@charset "UTF-8";
/* CSS Document */

/*ベースの要素の設定をリセット*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,p,blockquote,th,td {
margin:0;
padding:0;
}

/*画像の枠線をクリアして位置の初期値の設定*/
img{
border:0;
vertical-align: bottom;
}

/*リンク時の枠の点線をなしにする*/
a{
outline: none;
}

/*リスト要素の初期値をリセット*/
ul,ol{
list-style: none;
}

/*フロート解除用のハック*/
/*clearfixの設定*/
.clearfix:after{  
display: block;/*block要素にする*/
content: " ";  
clear: both;  
}  



/*==========================================
共通
============================================*/


body{
font-size:100%;
font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
line-height:1.4em;
color:rgba(0,2,15,1.00);
background:rgba(137,208,234,1.00);
letter-spacing: 0.075em;
}

/*リンクの装飾の設定*/
a:link,
a:visited,
a:active{
color:rgba(137,208,234,1.00);
text-decoration:underline;
}

a:hover{
color:rgba(137,208,234,1.00);
text-decoration:none;
}


/***** クリック前のボタン *****/
.toggle {
/* display:none; */ /* 通常時は非表示 */
position: fixed; /* bodyに対しての絶対位置指定 */
right: 10%;
top: 0;
display: block;
width: 45px;
height: 50px;
cursor: pointer;
z-index: 3;
background:rgba(255,255,255,0.5)
}
.toggle span {
display: block;
position: absolute; /* .toggleに対して */
width: 70%;
border-bottom: solid 3px #000;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
padding-top: 5px;
right: 7px;
}
.toggle span:nth-child(1) {
top: 3px;
}
.toggle span:nth-child(2) {
top: 13px;
}
.toggle span:nth-child(3) {
top: 23px;
}
.toggle span:nth-child(4) {
border: none;
top: 28px;
left: 5px;
font-size: 12px;
font-weight: bold;
}

/***** クリック後のボタン *****/
/* 最初のspanをマイナス45度にする */
.toggle.active span:nth-child(1) {
top: 15px;
left: 4px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* 2番目と3番目のspanを45度にする */
.toggle.active span:nth-child(2),
.toggle.active span:nth-child(3) {
top: 15px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}



/*************************************
* グローバルメニュー
*************************************/
/* .global_nav */
.global_nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
transform: translateY(-100%);
z-index: 2;
padding-top: 50px;
text-align: center;
color: #000;
background:rgba(255,255,255,0.8);
transition: all 0.8s;  
}
.global_nav .nav_li {
width: 100%;
line-height: 28px;
font-size: 1.1em;
padding: 5px;
list-style-type: none;
}
.global_nav .nav_li a {
display: block;
color: #000;
}
.global_nav .nav_li a:hover{
color: rgba(240,0,0,1.00);
}

/* .global_navに.activeが追加 */
.global_nav.active {
transform: none;
}


.top{
padding-top: 2%;
text-align: center;
}


h1 img{
margin: 0 0 20px;
width: 90%;
height: auto;
max-width: 1080px;
max-height: 216px;
}
.main{
width: 100%;
margin: 0;
}

#go{
/* display:none; */ /* 通常時は非表示 */
position: fixed; /* bodyに対しての絶対位置指定 */
right: 5%;
top: 75%;
display: block;
width: 100px;
height: 100px;
cursor: pointer;
z-index: 3;
}

#go img{
display: block;
width: 100%;
height: auto;
margin-bottom: 15px;
}

.mv{
position:relative;
width: 90%;
margin: 0 5%;
height: auto;
text-align: center;
}

.mv video,img{
position: relative;
width: 100%;
height: auto;
}

.iframe-wrap {
position: relative;
width: 100%;
padding-top: 56.25%;
overflow:auto; 
-webkit-overflow-scrolling:touch;
border:2px solid #ccc; 
}

.iframe-wrap iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:none;
display:block;
}

.highlights{
text-align: center;
}
.highlights img{
width: 50%;
height: auto;
margin: 0 25%;
}

.highlights p{
text-align: left;
}

.highlights strong{
text-decoration: underline;
}

.highlights h3{
text-align: left;
color:rgba(4,177,182,1.00);
}

.slide {
overflow: hidden;
width: 1152px;
height:576px;
margin: auto ;
}

.exhibition img{
width: 60%;
height: auto;
margin: 0 20%;
}


.slide img {
display: block;
position: absolute;
width:inherit;
height:inherit;
opacity: 0;
animation  : slideAnime 24s ease infinite;
}

/*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 4s }
.slide img:nth-of-type(3) { animation-delay: 8s }
.slide img:nth-of-type(4) { animation-delay: 12s }
.slide img:nth-of-type(5) { animation-delay: 16s }
.slide img:nth-of-type(6) { animation-delay: 20s }

/*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
0% { opacity: 0 }
4% { opacity: 1 }
16% { opacity: 1 }
20% { opacity: 0 }
100% { opacity: 0 }
}

h2.ttl{
width: 30%;
margin: 60px 35% 25px;
border-bottom: 4px solid rgba(137,208,234,1.00);
text-align: center;
font-size: 25px;
color:rgba(64,64,64,1.00);
display: block;
}

/*container*/
#container{
width:80%;
height: auto;
float:left;
margin: 0 10% 0;
line-height: 40px;
background: rgba(255,255,255,1.00);
}

#about{
width:100%;
}


.sentence{
width: 80%;
margin: 0 10% 60px;
border-bottom: 1px dashed rgba(148,148,148,1.00);
}

.sentence p{
font-size: 20px;	
font-style: normal;
padding: 0px 10% 20px;
}

p.nonborder{
border-bottom: none;
padding-bottom: 10px;
}

span.story{
font-weight: bold;
}


.sentence h3{
text-decoration: underline;
padding: 10px 10% 0 ;
font-size: 20px;
}

.sentence h4{
text-decoration: underline;
padding: 10px 10% 0 ;
font-size: 20px;
color:rgba(4,177,182,1.00);
}

.sentence img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

#movie{
width: 100%;
border-bottom: 1px dashed rgba(148,148,148,1.00);
}

.box{
height: 301px;
border-bottom: 1px dashed rgba(148,148,148,1.00);
}

.contents{
width: 50%;
height: 114px;
margin: 0 25%;
float: left;
text-align: center;
}
.contents a{
font-weight: lighter;
line-height: 28px;
padding: 41px 0;
text-align: center;
display: block;
text-decoration: none;
color: #1B1B1B;
}

.btn1{
border: 3px solid rgba(239,204,160,1.00);
background: rgba(255,250,250,1.00);
box-shadow: 0 4px 8px gray;
box-sizing: border-box;
}

.btn1 a:hover {
color: rgba(82,188,177,1.00);
text-decoration: underline;
box-shadow: 0 4px 8px rgba(132,122,57,1.00);
}



.performer h3{
padding: 0 10%;
text-decoration: underline;
text-decoration-color:rgba(239,204,160,1.00);
font-size: 25px;
}

.intro{
width: 100%;
margin: 20px 0% 60px 0%;
border-bottom: 1px dashed rgba(132,122,57,1.00);
overflow-y: scroll;
}

.intro img{
width: 30%;
height: auto;
max-width: 300px;
max-height: 300px;
padding: 0 5% ;
float: left;
}

.detail{
width: 50%;
padding: 0 5% 0 ;
white-space:normal;
float: left;
height: 380px;
}

.detail p{
width: 100%;
border-bottom: none;
padding-bottom: 20px;
}

.digest{
width:80%;
margin: 50px 10% ;
padding-bottom: 56.25%;
height:90%;
position: relative;
}
.digest iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


#insta{
box-sizing: border-box;
}

#instagram{
margin-top: 30px;
}

#form{
background: rgba(255,255,255,0.9);
border: solid;
border-width:3px;
border-color:rgba(239,204,160,1.00);
margin: 0 0 10px;
}

#form ul{
text-align: center;
}

#form ul li:after{  
display: block;/*block要素にする*/
clear: both;  
}  

#contactbox li {
padding: 5px 0px;
min-height: 27px;
}

#contactbox p{
text-align: center;
line-height: 25px;
}

#footer {
margin:50px 10%;
padding: 30px 0;
font-size: 0.7em;
text-align: center;
border-top: 1px dashed rgba(148,148,148,1.00);
}



@media screen and (max-width: 1440px) {
#go{
width: 50px;
height: 50px;
}
}


@media screen and (min-width: 1024px) {
#contactbox {
width: 80%;
margin: 0 10%;
}

	
.slide {
width: 819.2px;
height:409.6px;
}
	


p.text{
font-size: 1em;
line-height: 25px;
margin-bottom: 10px;
}

}


@media screen and (max-width: 768px) {
.toggle {
right: 1%;
}

.top{
margin: 30px 0% 20px;
}

.slide {
width: 614.4px;
height:307.2px;
}
	
#container{
line-height: 30px;
}


	
h2.ttl{
width: 80%;
margin: 20px 10% 5px;
font-size: 20px;
padding: 10px 5px 5px;
border-bottom: 2px solid rgba(137,208,234,1.00);
}
	
.sentence{
width: 100%;
margin: 0 0 30px;
}
	
.sentence p{
font-size: 15px;	
padding: 5px 5% 10px;
}
	
.sentence h3{
text-decoration: underline;
padding: 10px 5% 0 ;
font-size: 1em;
}

	
.sentence h4{
padding: 10px 5% 0 ;
font-size: 1em;
}
	
.exhibition img{
width: 90%;
height: auto;
margin: 0 5%;
}
	
.performer h3{
padding: 0 2%;
text-decoration: underline;
text-decoration-color:rgba(239,204,160,1.00);
}
	
.detail p{
border-bottom: none;
	}

.box{
height: 150px;
border-bottom: 1px dashed rgba(148,148,148,0.8);
}	
	
.contents{
width: 80%;
height: 40px;
margin: 20px 10%;
float: left;
text-align: center;
}
.contents a{
font-weight: lighter;
font-size: 0.6em;
line-height: 0px;
padding: 20px 0;
text-align: center;
}

	
.digest{
width:94%;
margin: 15px 4% 0 2% ;
padding-bottom: 56.25%;
height:90%;
position: relative;
}

#form ul{
width: 80%;
margin: 0 auto;
padding: 0;
}
#form ul input, #form ul textarea {
width: 100%;
}
#form ul textarea {
height:180px;
}

@media screen and (max-width: 480px) {
#container{
width:96%;
margin: 0 2% ;
}
	
#go{
top: 80%;
right: 2%;
width: 35px;
height: 35px;
margin-bottom: 5px;
}
	
h2.ttl{
width: 80%;
margin: 20px 10% 5px;
font-size: 20px;
padding: 10px 5px 1px;
border-bottom: 1px solid rgba(82,188,177,1);
}

	
.top img{
width: 80%;
height: auto;
padding: 0 10%;
}
.slide {
width: 300px;
height:150px;
}
	
.intro{
width: 96%;
height: 650px;
margin: 0 2% 10px 2%;
}

.intro img{
width: 60%;
height: auto;
padding:0px 20% 0 ;
}



.detail{
width: 90%;
margin: 0 5%;
max-width: 300px;
margin-right:10%;
padding: 0 0 10px;
font-size: 0.6em;
}

.detail p{
line-height: 25px;
}

}

}