@charset "utf-8";
/* CSS Document */
section{ position:relative; min-height: -webkit-calc(100vh -
160px);min-height: calc(100vh - 160px) ; margin:0; z-index:1; padding:0 0 60px 0 }
.main { height: -webkit-calc(100vh - 460px) ; margin:0; padding:110px 0 0 0; width:100vw; background-repeat:no-repeat; 
background-color:#000; background-position:50% bottom; background-size:cover; min-height:200px }

.copy{ font-family:"notomin"; font-weight:bold; font-size:20px !important; margin:10vh auto; padding:0;
line-height:30px; color:#FFF; text-shadow:0px 0px 10px #000000; width:70vw; text-align:center; }
.subcopy{font-size:20px !important; line-height:30px !important; margin:20px auto 0 auto !important; padding:5px; 
width:600px; background-color:rgba(255,255,255,0.5); display:block; box-sizing:border-box; border: #FFF 1px solid}

/* 音声ガイド */
#map{ width:100%; margin:10px 0; height:30vh}
.iconphoto{ width:95vw; margin:0 0 0 3vw; padding:0 0 50px 0;  display: flex; flex-flow: row wrap;  }
.iconphoto div { width:18vw; text-align:center; margin:10px 1vw 20px 0 }
.iconphoto div a { width:100%; height:100%; display:block;}
.iconphoto div a img { width:100%; height: 200px; object-fit: cover; }
.iconphoto div iframe { width:100%; height: 200px; }
.iconphoto div a p { font-size:1.6rem; line-height:20px; color:#3470a5; padding:5px; margin:0; box-sizing:border-box  }
.guideheader{  padding:110px 0 0 0; box-sizing:border-box; margin:0; text-align:center; font-family:"noto";  font-size:120%; line-height:160%; height:145px; width:100% }
.guidepanel{ padding:10px; box-sizing:border-box; margin:0;  width:100%;display: inline-flex; justify-content: center; }
.guidepanel div{ align-self: center; margin:0 2vw;}
.mapnavi{ margin:0; color: #5E7B86; padding:10px 0; text-align:center; font-size:18px; line-height:38px}
.spotname{ margin:20px auto 0 auto; padding:20px; width:90vw; box-sizing:border-box;  
font-size:30px; line-height:40px; text-align:left; color:#FFF; font-weight:bold; border:2px #FFFFFF solid}
.prof { display: inline-flex; flex-flow: row wrap;justify-content: space-between; 
margin:20px 5vw; padding:0; width:90vw; text-align:left; box-sizing:border-box; font-size:1.6rem; line-height:2.6rem }
.prof_comment { width:46%;}
.profttl{ margin:20px 0 5px 0; padding:5px 0 !important;width:100%; clear:both; border-bottom:1px dotted #003333; font-size:2.0rem; line-height:2.6rem  }
.prof_info{ width:50%;}
.prof_info dl{ margin:0; padding:0; width:100%;}
.prof_info dl dt{ width:100px; margin:0; padding:0; clear:left; float:left; box-sizing:border-box; clear:left }
.prof_info dl dd{ width : -webkit-calc(100% - 100px) ; margin:0; padding:0; box-sizing:border-box; float:left }
.prof_info dl dd:before { content: "：";}
#ggg { display: none;}
.panel { position: absolute;top: -1000px; left: -1000px; }
#s_map { width:100vw; height:500px; margin:10px auto}
.stampmap { width:88vw; margin:15px auto; background:#CCC; text-align:center; z-index:10000; }
.fukidashi { margin:0 auto; background-color:#FFF; font-size:16px; color:#09F; line-height:32px;position: relative;	display: inline-block;	margin: 1.5em 0;padding: 7px 10px;min-width: 120px;	max-width: 300px;font-size: 16px;}
.mapphoto{ height:20vh }
.fukidashi:before{	content: "";position: absolute;	top: 100%;left: 50%;margin-left: -15px;	border: 15px solid transparent;	border-top: 15px solid #FFF;}
/* 音声ガイド */
.pd10{ padding:10px 0 0 0 !important; margin:0 !important}

.shopphoto div{ width:200px !important;} 
/* コンシェルジュ */
.icon_cs{ width:100vw; margin:5px 0; padding:0;display: inline-flex;
justify-content: center;}
.icon_cs div{ margin:9px; width:110px; }
.icon_cs div a{ display:block; color:#FFF; border:5px solid #FFF; border-radius:50%; width:110px; height:110px; text-align:center} 
.icon_cs div img{ width:80%; padding:5px 0 0 0; } 
.icon_cs div p{ width:100%; padding:5px 0 0 0; margin:0; font-size:20px; line-height:24px; font-weight:bold} 
.icon_cs div a:hover { border:5px solid #FC0; background:#FC6}

.join{ padding:10px 0 70px 0; margin:0; width:100vw; text-align:center; font-size:18px; color:#FFF; line-height:18px; font-weight:bold }

.area{ font-size:1.6rem; color:#eb651b !important; border:none !important; border-radius:5px; width:300px; height:40px; padding:5px; box-sizing:border-box; margin:10px auto 20px auto; }
.genre{ margin:10px 0; padding:5px 0 30px 0; border:#fff 1px solid; }
.genre div{  display: flex;  flex-flow: row wrap; list-style:none; width:90vw; margin:10px auto 0 4vw }
/* genre checkbox */
.genre div label{ position:static !important; align-items: stretch; height:auto; width:23% !important; margin:10px 1% !important; background:none !important; border-radius:0 !important; border:none !important; color:#000 !important; padding:0 !important; box-sizing:border-box;} 
.genre_check-input{ display: none ;}
.genre_check-parts{  position:relative; font-size:1.4rem; line-height:2.4rem; padding:10px 5px 10px 45px; margin:0 !important; border:#F60 1px solid; background-color:#FFF; width:100%; box-sizing:border-box; text-align:left; height:100% !important;  }
.genre_check-parts::before{ content: ""; display: block; position: absolute;
  top: 8px; left: 8px; width: 25px; height: 25px; border: 2px solid #999; border-radius: 4px;}
.genre_check-input:checked + .genre_check-parts{ color: #009a9a;}
.genre_check-input:checked + .genre_check-parts::after{
  content: ""; display: block; position: absolute;
  top: 0; left: 17px; width: 14px; height: 28px;
  transform: rotate(40deg); border-bottom: 5px solid #F30; border-right: 3px solid #F60;}
.icon{ width:100vw;  display: flex; justify-content: center;align-content:center; margin:0; padding:10px; box-sizing:border-box  }
.icon div{ padding:0 10px; box-sizing:border-box;  }
.icon a { color:#FFF}
.icon img { max-width:90%}

@media print, screen and (max-width: 1300px) {
.iconphoto div { width:32%; }
}
@media print, screen and (max-width: 1000px) {
.iconphoto{ width:98vw; margin:0 1vw; justify-content:space-between;padding:0 0 100px 0; }
.iconphoto div { width:48%; }
.genre div{width:96vw; margin:10px 0 10px 1vw }
.genre div label{ width:31% !important; } 
.spotname{ border:none;}

}

@media print, screen and (max-width: 768px) {
.spotname{ width:100%; font-size:20px; line-height:30px; padding:10px 20px}  
.copy{ font-size:30px; line-height:35px; width:70vw; margin:5vh auto }
.subcopy{font-size:16px !important; width:100%; }
.scroll{ display:block; margin-top:20px  }
section{ position:relative; min-height: -webkit-calc(50vh + 655px) ;  }
.iconphoto { width:98vw; margin:10px auto; justify-content: center;  }
.iconphoto div { height: 250px; width:69vw; }
.guideheader{ padding:70px 0 5px 0; height:100px;}
.prof { display:block; }
.prof_comment { width:100%;}
.prof_info{ width:100%;}
.genre div label{ width:48% !important; } 
.icon_cs{ display: inline-flex; flex-flow: row wrap; background-color:#FFF !
important;justify-content: space-between;  } 
.icon_cs div{ margin:1px 0; text-align:center !important; width:33%; box-sizing:border-box;  background-color:#f5ae35; } 
.icon_cs div a{ margin:5px auto;}
.ttlh1 { width:80vw; margin:20px auto; font-size:2.4rem !important;}
.main { min-height:400px !important;}
}


/* ページTOPに戻る */
.back{ position:fixed; bottom:0; left:0; font-family:"noto"; padding:20px 0 0 0; box-sizing:border-box; text-align:center;
width:100%; background:rgba(51,51,51,0.7); border-top:#333 1px solid; height:60px; color:#FFF; font-size: 18px; line-height:20px}
.back1{ margin:0 auto; padding:0; position:relative; width:100px; display:block; }
.back1::before,
.back1::after{ position: absolute; top: 0; bottom: 0;left: 0; margin: auto; content: ""; vertical-align: middle;}
.back1::before { top: 8px; left: 7px; box-sizing: border-box; width: 10px; height: 10px;  border: 10px solid transparent;
    border-left: 10px solid #fff; -webkit-transform: rotate(45deg);  transform: rotate(45deg);}
.back1::after { left: -5px; border: 0 solid transparent; border-top:6px solid #FFF;
    border-radius:20px 0 0; width: 16px; height:16px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}