@charset "UTF-8";
/* CSS Document */
body{ min-width: 640px;width: 100%;font-size:14.5px;line-height:150%;color:#000; position:absolute;
font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-family: "Noto Sans Japanese", "Yu Gothic UI", 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;}
#cover{ background:url(images/mainimg_05.jpg);background-repeat: no-repeat; background-size:cover; padding:0px 10% 200px 10%; }
@keyframes sky{
  0%{background-position: 100% 50%; opacity:1;}
  50%{background-position: 20% 70%; opacity:1;}
  100%{background-position: 100% 50%; opacity:1}  
}

#cover .column2{margin-top:0; grid-gap:0; grid-template-columns:minmax(400px, 1fr) minmax(1fr, 600px) ;}
#cover #logo div{mix-blend-mode:normal; width:100%;margin:20px 0 0; padding-bottom:20px; justify-self:end; text-align: center;}
#cover #logo div img{width:100%;}
#cover #logo .headline{color:#000; font-size:500%; text-shadow: 4px 4px 0px #fff; }
#cover #leadtxt{ text-align:center; font-weight: 600; margin:0 0 0px 4vw; color:#000; mix-blend-mode:normal;);
background-size:200% 200%; animation: 10s sky ease infinite; padding:80px 0 30px;}
#cover #leadtxt .message{ font-size:150%;}
#kitamoc24tour .btn a {box-shadow:10px 10px 0 #fff; }
#cover #leadtxt .btn a{ background:transparent; border:10px solid #fff; margin-top:80px; /*animation: color-change 10s infinite;*/}
#cover #leadtxt .btn a:hover{mix-blend-mode:normal;}



#about .image img{width:100%;}


h2.headline{font-family: 'Anton', sans-serif; color:#000; font-weight:600; letter-spacing:0.05em;}

dl.flow{display:grid; grid-template-columns:1fr 60%; grid-column-gap:10%; color:#fff; width:100%; text-align: left; border-left:1px solid #fff; margin-bottom:50px;}
dl.flow dt{ margin-left:50px; width:auto; }
dl.flow dd{ width:auto; margin-left:0;}

dl.flow dt .txt strong{color:rgba(157,199,56,1); font-size:110%; display:block; margin-bottom:10px; font-weight:600;}
dl.flow dt .time{position:relative;}
dl.flow dt .time:before{ content:"──"; position:absolute; left:-60px; top:0px; font-size:48%;}
dl.flow dd.image img{width:100%;}
dl.flow .txt{margin:0 0 30px;}
dl.flow .btn{ margin:20px 0 10px; text-align:center;}
#kitamoc24tour table.outline{color:#fff;}
#kitamoc24tour table.outline tr th,#kitamoc24tour table.outline tr td{border:1px solid #fff; background:transparent; padding:10px 20px;}
#kitamoc24tour table.outline tr th{border-left:none; padding:10px 0; width:100px;}
#kitamoc24tour table.outline tr td{border-right:none;}
#kitamoc24tour table.outline tr td dl{ display: grid; grid-template-columns:100px 60px;}
#kitamoc24tour table.outline tr td dl dd{ text-align:right;}
dl.history{display: grid; grid-template-columns:4em 1fr;}
#access .notice{color:rgba(255,255,255,0.8);}
#clothes .headline,#clothes .check{color:#fff;}
#kitamoc24tour footer{margin-top:0;}
/*事前説明会*/
#hearing{background-image:repeating-linear-gradient(-45deg, rgba(157,199,56,0.5) 0 30px, transparent 30px 31px);margin-bottom:0;}
#hearing ul.MovieList{ display:grid; grid-template-columns:repeat(auto-fit,400px); grid-gap:50px; text-align:center; justify-content:center; margin:50px auto; color:rgba(0,0,0,0.8);}
#hearing ul.MovieList li iframe{box-shadow:20px 50px 0 rgba(157,199,56,1); position:relative; z-index:100;}
#hearing ul.MovieList li .message{position:relative; z-index:500; margin-top:10px;}
#hearing dl.scheduleTable{display: grid; grid-template-columns:1fr 3fr; width:600px; background:rgba(157,199,56,1); margin:20px auto; text-align:left; grid-gap:10px 0; padding:20px;}
.face li{ display:inline-block; margin:0 4px;}
.face img{ border-radius:50%; border:6px solid #fff;}


div.caution{width:1200px; margin: 30px auto; text-align: left;}

ul.gridList{ display:grid; grid-template-columns:repeat(auto-fit,400px); grid-gap:80px; text-align:center; justify-content:center; margin:50px auto; color:rgba(0,0,0,0.8);}
ul.gridList>li{box-shadow: 0 10px 20px -6px rgba(0,0,0,0.5); background-image: linear-gradient(-10deg,var(--link-color) 50%, rgba(255,255,255,0.9) 50.1%); transition: background 400ms ease-in-out; position:relative;}
ul.gridList>li:hover{box-shadow: 0 10px 30px -6px rgba(0,0,0,0.8);}
ul.gridList>li .image img, ul.frexList>li .image img {width:100%;}
ul.gridList>li .number {margin:-70px auto 0; position:absolute; top:0; left:0; right:0; bottom:0; font-family:"Noto Sans Japanese"; color:var(--link-color); font-size:200%; letter-spacing:0.2em; }
ul.gridList>li .number span{display: block; background: url("../images/svg/txt_scene.svg") top center no-repeat; padding:30px 0 30px 6px; }
ul.gridList>li article{text-align: left; padding:0 24px 30px; color:rgba(0,0,0,0.8);}
ul.gridList>li article ul.btn{ display:flex; justify-content: flex-start; }
ul.gridList>li article ul.btn>li{ margin:0 10px 0 0;}

@media(max-width : 640px ){
	#cover{padding:0; background-size:cover; background-position:center;}
	#cover #leadtxt{margin:0 auto; padding:50px;}
	#cover #logo div{margin: 0 auto; padding:0; }
	#about {width:90%; margin: 0 auto 100px;}
	.column2{display:block;}
	#tourProguram{padding:30px 5%;}
	dl.flow{display: block;}
	dl.flow .image{margin:0 0 50px 50px; }
	div.caution{width:100%;}
}