@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:800|Noto+Sans|Open+Sans|Quicksand:700|Roboto|Work+Sans:600');


<style type="text/css">

html, body {
	margin: 0;
	padding: 0;
}

body {
    background-color: #fff;
    color: #333;
	font-size: 17px;
    font-family:
	'Noto Sans Japanese',
	'Muli',	
    	Verdana, Arial,
    	'繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3',
    	'Hiragino Kaku Gothic Pro',
    	Osaka,
    	sans-serif;
    line-height: 160%;
}

.bg-mask{
	margin: -10px;
	background: rgba(255,255,255,0.96);
}

#container,
.wrapper {
	margin: 0 auto;
	width: 940px;
}

#main {
	float: left;
	width: 100%;
}

#footer {
	clear: both;
	color: #000;
}

#footer .copyright{
    color: #000;
}

.lineup{
font-size: 1.3em;
line-height: 1.6em;
border: solid 0px #000000;
width: 660px;
}

.link7{
    text-decoration: none;
    transition: 0.3s ease-out;
    font-family: 'Noto Sans Japanese';
    font-weight: normal;
    color: #000000;
}

.link7:hover{
    font-size: 1.2em;
}

.lineup_left{
width: 330px;
float: left;
border: solid 0px #000000;
text-align: left;
}

.lineup_right{
width: 330px;
border: solid 0px #000000;
text-align: left;
float: left;
}

.concept{
font-family:  "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
width: 700px;
text-align: left;
color: #000000;
margin-bottom: 40px;
transition: 0.3s ease-out;
clear: both;
}

.brline{
line-height: 0.3em;
clear: both;
}

p.title{
font-family: 'Nanum Gothic', sans-serif;
font-size: 1.5em;
}

p.index{
font-family: 'Nanum Gothic', sans-serif;
font-size: 4.0em;
line-height: 1em;
border: solid 0px #000000;
margin-bottom: 5px;
color: #000000;
}

p.lineup_catch{
font-size: 1.4em;
line-height: 0.1em;
font-family: 'Knewave', cursive;
margin-bottom: 15px;
color: #000000;
}

p.lineup_catch2{
font-size: 1em;
line-height: 0.1em;
font-family: 'Knewave', cursive;
margin-bottom: 10px;
color: #000000;
}

p.lineup_name{
font-size: 0.9em;
line-height: 0.1em;
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴ ProN W3', 'Meyrio';
margin-bottom: 0px;
color: #000000;
transition: 0.3s ease-out;
}

a.lineup{
    font-weight: Bold;
    text-decoration: none;
}

p.index2{
font-family: 'Montserrat', helvetica;
font-size: 3.0em;
line-height: 1em;
border: solid 0px #000000;
}

p.index3{
font-family: 'Montserrat', helvetica;
font-size: 3.5em;
line-height: 1em;
margin-bottom: 5px;
}

p.catch1{
font-size: 1.8em;
line-height: 1.7em;
color: #000000;
margin-bottom: -9px;
}

p.catch2{
font-size: 0.8em;
line-height: 1.5em;
color: #000000;
}

p.footer{
font-size: 0.8em;
}

a.name:hover{
color: #0080FF
}

a.sns{
transition: 0.3s ease-out;
}

a.sns:hover{
opacity:0.5;
}

.ec_banner{
text-align: center;
width: 190px;
border: solid 1px #696969;
color: #000000;
transition: 0.3s ease-out;
margin-bottom: 5px;
}

a.banner{
color: #696969;
text-decoration: none;
}

a.rocket{
color: #696969;
transition: 0.3s ease-out;
}

a.rocket:hover{
opacity:0.5;
}

.ec_banner:hover{
opacity:0.5;
}

.sns{
margin-top: 5px;
text-align: right;
width: 100%;
}

.link2 {
  display: inline-block;
  width: 130px;
  text-align: center;
  text-decoration: none;
  padding: 7px;
  line-height: 22px;
  outline: none;
  font-family: 'Noto Sans Japanese';
  font-weight: normal;
}
.link2::before,
.link2::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.link2,
.link2::before,
.link2::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.link2 {
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 0px solid #333;
  color: #fff;
  line-height: 22px;
  overflow: hidden;
}
.link2:hover {
	color: #31E5FC;
}
.link2::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
.link2:hover::after {
  background: #FCF831;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.link3 {
  display: inline-block;
  text-align: center;
  text-decoration: underline;
  line-height: 1.0em;
  background-color: #000000;
  padding: 5px; 
  outline: none;
  font-family: 'Noto Sans Japanese';
}
.link3::before,
.link3::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.link3,
.link3::before,
.link3::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.link3 {
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 0px solid #333;
  color: #000000;
  line-height: 1.2em;
  overflow: hidden;
}
.link3:hover {
	padding-left: 40px;
}
.link3::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
.link3:hover::after {
  background: #E9E9E9;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.link4 {
  display: inline-block;
  text-align: center;
  text-decoration: underline;
  line-height: 1.0em;
  outline: none;
  font-family: 'Noto Sans Japanese';
  font-weight: normal;
}
.link4::before,
.link4::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.link4,
.link4::before,
.link4::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.link4 {
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 0px solid #333;
  color: #000000;
  line-height: 1.2em;
  overflow: hidden;
}
.link4:hover {
}
.link4::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
.link4:hover::after {
	background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  -webkit-transform: scale(1);
  transform: scale(1);
}

.link5 {
    background-color: #3169d1;
    color: #fff !important;
    background-size: 200% 100%;	
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(153, 139, 250, 1) 50%);
    background-image: linear-gradient(to right, transparent 50%, rgba(153, 139, 250, 1) 50%);
    -webkit-transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
      font-family: 'Noto Sans Japanese';
  font-weight: normal;
}
.link5:hover {
    background-color: #000000;
    background-position: -100% 100%;
}

.link6 {
  display: inline-block;
  width: 130px;
  text-align: center;
  text-decoration: none;
  padding: 7px;
  line-height: 22px;
  outline: none;
  font-family: 'Noto Sans Japanese';
  font-weight: normal;
}
.link6::before,
.link6::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.link6,
.link6::before,
.link6::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.link6 {
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 0px solid #333;
  color: #fff;
  line-height: 22px;
  overflow: hidden;
}
.link6:hover {
	color: #31E5FC;
}
.link6::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
.link6:hover::after {
  background: linear-gradient(to top, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%);
  -webkit-transform: scale(1);
  transform: scale(1);
}

nav a {
	position: relative;
	display: inline-block;
	outline: none;
	color: #000;
	text-decoration: none;
	font-family: 'Noto Sans Japanese';
}

nav a:hover,
nav a:focus {
	outline: none;
}

.link1 a {
	padding: 8px 0;
}

.link1 a::after {
	position: absolute;
	top: 90%;
	left: 0;
	width: 100%;
	height: 3px;
	background: #000000;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

.link1 a:hover::after,
.link1 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

.date{
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 4.0em;
	line-height: 1em;
	margin-bottom: 5px;
	color: #000000;
}

.detail{
	padding-top: 10px;
	letter-spacing: 6px;
}

.interview{
	line-height: 1.4em;
	width: 660px;
	text-align: left;
}

.report{
	line-height: 1.4em;
	width: 660px;
	text-align: left;
	}

.phots{
	line-height: 1.4em;
	width: 800px;
	text-align: left;
}

p.report_title{
	font-family: 'Noto Sans Japanese', 'Nanum Gothic', sans-serif;
	font-size: 2.1em;
	font-weight: bold;
	color: #000000;
}

p.interview_title{
	font-family: 'Noto Sans Japanese', 'Nanum Gothic', sans-serif;
	font-size: 3.0em;
	font-weight: bold;
	color: #000000;
}

p.interview_catch{
	font-family:  'Noto Sans Japanese', "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;	font-size: 1.1em;
	font-weight: bold;
	color: #000000;
	display: inline-block;
	border-bottom: dashed 1px #363636;
}

p.writer{
	font-size: 0.8em;
	color: #969696;
}

p.writer_en{
	color: #737373;
	font-family:  'Tajawal', sans-serif;
	font-size: 1.1em;
}

p.artist{
	font-size: 0.8em;
	color: #363636;
}

p.artist_en{
	font-size: 1.1em;
	color: #363636;
	font-family:  'Tajawal', sans-serif;
}

p.writer_name{
	text-align: right;
	font-size: 0.8em;
}

p.writer_name_en{
	text-align: right;
	font-size: 1.1em;
	font-family:  'Tajawal', sans-serif;
}

p.profile{
	padding-top: 5px;
	padding-bottom: 10px;
	font-size: 1.0em;
	line-height: 1.6em;
	color: #000000;
}

p.mightsinterview{
	padding-left: 20px;
	text-alignt: left;
	color: #000000;
	font-family: 'Knewave', cursive;
	font-size: 0.9em;
	margin-bottom: -20px;
}

.home{
	font-size: 0.8em;	
	margin-bottom: 30px;	
}

a.abutton{
	color: #000;
}

.abutton {
	font-family: 'Contrail One', sans-serif;
	padding: 3px;
	font-size: 1.2em;
	line-height: 2.6em;
	cursor: pointer;
	transition: 0.3s;
	border-bottom: solid 2px #000;
	margin-right: 5px;
	text-decoration: none;
}

.abutton:hover {
	color: #fff;
	opacity: 0.8; 
	-webkit-animation: stripes-move 0.75s infinite linear;
          animation: stripes-move 0.75s infinite linear;
          background: repeating-linear-gradient(45deg, #000 0, #000 0.25em, transparent 0.25em, transparent 0.5em);
  }
  
a.abutton2{
  	color: #fff;
}

.abutton2 {
	color: #fff;
	text-decoration: none;
	border-bottom: solid 3px #000;
	padding-top: 20px;
	padding-bottom: 15px;
	transition: all .4s;
	color: #fff;
	opacity: 1.0; 
	-webkit-animation: stripes-move 0.75s infinite linear;
          animation: stripes-move 0.75s infinite linear;
          background: repeating-linear-gradient(45deg, #000 0, #000 0.1em, transparent 0.1em, transparent 0.23em);

}

.abutton2:hover {
	background: #000;
	color: #fff
	opacity: 1.0; 
	text-decoration: underline;
  }

a.abutton3{
	color: #000;
}

.abutton3 {
	font-family: 'Contrail One', sans-serif;
	cursor: pointer;
	transition: 0.3s;
	margin-right: 5px;
	text-decoration: none;
}

.abutton3:hover {
	color: #fff;
	opacity: 0.8; 
	-webkit-animation: stripes-move 0.75s infinite linear;
          animation: stripes-move 0.75s infinite linear;
          background: repeating-linear-gradient(45deg, #000 0, #000 0.25em, transparent 0.25em, transparent 0.5em);
  }


@keyframes stripes-move {
  100% {
    background-position: 4em 0px;
  }
}

.modal_wrap input {
  display: none;
}

.modal_overlay {
  display: flex;
  justify-content: center;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(256, 256, 256, 0.8);
  opacity: 0;
  transition: opacity 0.5s, transform 0s 0.5s;
  transform: scale(0);
}

.modal_trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}

.modal_content {
  align-self: center;
  width: 60%;
  max-width: 800px;
  padding: 30px 30px 15px;
  box-sizing: border-box;
  background: #fff;
  line-height: 1.4em;
  transform: scale(1.2);
  transition: 0.5s;
  border: solid 1px #000;
}

.close_button {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 24px;
  cursor: pointer;
}

.modal_wrap input:checked ~ .modal_overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}

.modal_wrap input:checked ~ .modal_overlay .modal_content {
  transform: scale(1);
}

.open_button {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 30px;
  margin: auto;
  padding: 8px 16px;
  color: #444;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  border-radius: 16px;
  cursor: pointer;
}

.container {
  display: grid;
  gap: 10px;
  grid-template-columns: 1.5fr 1.5fr;
  grid-template-rows: auto auto; 
}

.item {
	font-family: 'Noto Sans Japanese', 'Nanum Gothic', sans-serif;
  padding: 5px;
  border-radius: 3px;
  border: 0px solid #ccc;
  font-size: 0.8em;
  color: #000;
  text-align: left;
  line-height: 1.2em;
}

.modal_button{
	font-family: 'Contrail One', sans-serif;
	padding: 3px;
	font-size: 1.2em;
	line-height: 2.6em;
	cursor: pointer;
	transition: 0.3s;
	border-bottom: solid 2px #000;
	margin-right: 5px;
}

.modal_button:hover{
	color: #fff;
	opacity: 0.8; 
	-webkit-animation: stripes-move 0.75s infinite linear;
          animation: stripes-move 0.75s infinite linear;
          background: repeating-linear-gradient(45deg, #000 0, #000 0.25em, transparent 0.25em, transparent 0.5em);
}

.abox {
    position: relative;
    padding: 20px;
}
.abox a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}

.abox a:hover{/* マウスオーバー時に色変更*/
    color: #fff;
    opacity: 0.4; 
	-webkit-animation: stripes-move 0.75s infinite linear;
          animation: stripes-move 0.75s infinite linear;
          background: repeating-linear-gradient(45deg, #000 0, #000 0.25em, transparent 0.25em, transparent 0.5em);
}

.surl_title{
	font-family: 'Contrail One', sans-serif;
	font-size: 4.0em;
	margin-bottom: 5px;
	color: #000000;
}


</style>