@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{
background-color:rgba(247,248,242,1.00);
font-size:0.875em;
font-family: 'Shippori Mincho', serif;
color: rgba(32,47,85,1.00);
letter-spacing: 0.075em;
}

h2.ttl{
color:rgba(89,77,60,100);
}

h3{

}

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

a:hover{
color: rgba(89,77,60,100);
text-decoration:none;
}



.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;
}

.mbox{
width: 90%;
height:auto;
padding: 0 5% 0px;
margin: 1% 0 0%;
float: left;
display: flex;
overflow-x: scroll;
}

.mbox p{
font-size: 1.075em;
border-bottom: none;
margin-bottom: 2%;
}


.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: center;
}


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

.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: 30px 35% 5%;
text-align: center;
font-size: 1.5em;
display: block;
border-bottom: 1px solid rgba(89,77,60,1.00);
padding-bottom: 0.5%;
}




#container{
width:90%;
height: auto;
margin: 0 5% 0;
line-height: 35px;
border-right: 2px solid rgba(89,77,60,1.00);
border-left: 2px solid rgba(89,77,60,1.00);
}

.mbox{
width: 90%;
height:auto;
padding: 0 5% 0px;
margin: 1% 0 0%;
float: left;
display: flex;
overflow-x: scroll;
}

.mbox p{
font-size: 1.075em;
border-bottom: none;
margin-bottom: 2%;
}

ul.list{
z-index: 3;
position: fixed;
right: 0%;
width: 100%;
text-align: center;
background:rgba(65,65,65,0.8);
margin: -1% 0 0;
}

li.list{
font-weight:bolder;
line-height: 30px;
padding:0 1%;
float: right;

}

li.list
a{
color:rgba(255,255,255,1.00);
}

h1 img{
margin: 0 0 20px;
width: 80%;
height: auto;
max-width: 1080px;
max-height: 108px;
text-align: center;
}

#about{
width:100%;
}


.sentence{
width: 90%;
margin: 0 5% 60px;
padding: 10% 5% 30px;
}

.sentence p{

font-style: normal;
padding: 0px 0% 20px;
border-bottom: 1px dashed rgba(148,148,148,1.00);
}

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

span.story{
font-weight: bold;
}


.sentence h3{
text-decoration: underline;
font-size: 1.2em;
margin: 0 0 2%;
text-decoration-color:rgba(32,47,85,1.00);
}

.sentence h4{
font-size: 1.15em;
}



.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;
}

.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;
}

.btn1{
border: 1px solid rgba(32,47,85,1.00);
background: rgba(243,244,225,1.00);
box-sizing: border-box;
}

.btn1 a:hover {
text-decoration: underline;
color: rgba(243,244,225,1.00);
background: rgba(32,47,85,1.00);
border: 1px solid rgba(243,244,225,1.00);
}


#contact p{
text-align: center;
}

#contact h2{
width: 30%;
margin: 60px 35% 60px;
text-align: center;
font-size: 1.5em;
display: block;
border-bottom: 1px solid rgba(89,77,60,1.00);
padding-bottom: 0.5%;
}

p time{
font-size: 0.9em;
float: right;
}

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

.intro img{
width: 40%;
height: auto;
max-width: 500px;
max-height: 500px;
padding: 2% 5% ;
float: left;
}

.detail{
width: 40%;
padding: 0 5% 0 ;
white-space:normal;
float: left;
}

.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;
}




#footer {
padding: 30px 0;
font-size: 0.8em;
text-align: center;
}




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


@media screen and (min-width: 1024px) {


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



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

h2.ttl{
width: 50%;
margin: 0% 25% 5%;
}

#contact h2{
width: 50%;
margin: 60px 25% 25px;
}

}


@media screen and (max-width: 768px) {
#contact h2{
width: 70%;
margin: 60px 15% 25px;
}

.toggle {
right: 1%;
}

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

.slide {
width: 614.4px;
height:307.2px;
}

#container{
line-height: 30px;
}



h2.ttl{
width: 70%;
margin: 5% 15% 5%;
}
.sentence{
width: 100%;
margin: 0 0 30px;
}

.sentence p{
font-size: 15px;	
padding: 5px 2% 10px;
}

.sentence h3{
padding: 10px 2% 0 ;
font-size: 1.2em;
}




.detail p{
border-bottom: none;
}

.box{
height: 150px;
}	

.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;
}

}

@media screen and (max-width: 480px) {
.mbox{
width: 90%;
max-height:200px;
padding: 0 5% 0px;
margin: 1% 0 0%;
float: left;
display: flex;
overflow-y: scroll;
}

.mbox p{
font-size: 0.75em;
border-bottom: none;
margin-bottom: 0.5%;
}

#container{
width:96%;
margin: 0 2% ;
}

#go{
top: 80%;
right: 2%;
width: 35px;
height: 35px;
margin-bottom: 5px;
}

h2.ttl{
width: 90%;
margin: 5% 5% 5%;
font-size: 1.2em;
}


.top img{
width: 80%;
height: auto;
padding: 0 10%;
}
.slide {
width: 300px;
height:150px;
}

.intro{
width: 96%;
height: auto;
margin: 0 2% 10px 2%;
}

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



.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;
}

#contact h2{
width: 90%;
margin: 60px 5% 25px;
font-size: 1.2em;
}

}