@media print,screen and (min-width:1px){
/*areamap*/
body.komagane #areamap {width:100%; padding:3% 0;}
body.komagane #areamap .inner{width:100%; max-width:1035px; margin:2% auto;}
body.komagane #areamap .map{width:100%; height:320px; overflow:hidden;}
body.komagane #areamap .map .gmap{width:100%; height:100%;}
body.komagane #areamap .map .gmap iframe{width:100%; height:100%;}
body.komagane #areamap .inner .route{box-sizing:border-box; width:100%; max-width:1040px;  padding:25px 10px 10px; letter-spacing:-0.4em; text-align:center;}
body.komagane #areamap .inner .route .column{display:block; vertical-align:top; letter-spacing:0; width:80%; margin:0 auto; text-align:center;}
body.komagane #areamap .inner .route .column:last-child{margin:0 auto;}

/*hotel info*/
body.komagane #hotelinfo {width:100%; padding:2% 0 3%;}
body.komagane #hotelinfo .inner{width:100%; max-width:1035px; margin:1% auto; box-sizing:border-box; letter-spacing:0; padding:0 10px;}
body.komagane #hotelinfo .inner .hotel{width:100%; margin:8px 0; display:inline-block; vertical-align:top; letter-spacing:0;}
body.komagane #hotelinfo .inner .hotel:last-child{margin:0;}
body.komagane #hotelinfo .inner .hotel .photo{display:block; padding:5px 0;width:100%;}
body.komagane #hotelinfo .inner .hotel .txt{display:block; padding:5px 0; width:100%;}
body.komagane #hotelinfo .inner .hotel .txt h3{font-size:1.4rem; color:#c92223; display:block;  font-weight:bold;}
body.komagane #hotelinfo .inner .hotel .txt p{font-size:1.2rem; line-height:1.6; padding:5px 0;}
body.komagane #hotelinfo .inner .hotel .txt p a{color:#0068b7; text-decoration:none;}
body.komagane #hotelinfo .inner .hotel .txt p a:hover{ text-decoration:underline;}

}


@media print,screen and (min-width:481px){
body.komagane #areamap .inner .route{box-sizing:border-box; width:100%; max-width:1040px;  padding:25px 10px 10px; letter-spacing:-0.4em; text-align:center;}
body.komagane #areamap .inner .route .column{display:inline-block; vertical-align:top; letter-spacing:0; width:48%; margin-right:2%; text-align:center;}
body.komagane #areamap .inner .route .column:last-child{margin-right:0;}

/*hotel info*/
body.komagane #hotelinfo {width:100%; padding:2% 0 3%;}
body.komagane #hotelinfo .inner{width:100%; max-width:1035px; margin:1% auto; box-sizing:border-box; letter-spacing:-0.4em; padding:0 10px;}
body.komagane #hotelinfo .inner .hotel{width:100%; margin:8px 0; display:block; vertical-align:top; letter-spacing:-0.4em;}
body.komagane #hotelinfo .inner .hotel:last-child{margin:8px 0;}
body.komagane #hotelinfo .inner .hotel .photo{display:inline-block; padding:5px 0; width:44%;  padding-right:2%; vertical-align:middle;}
body.komagane #hotelinfo .inner .hotel .txt{display:inline-block; padding:5px 0; width:54%; letter-spacing:0; vertical-align:middle;}
body.komagane #hotelinfo .inner .hotel .txt h3{font-size:1.4rem; color:#c92223; display:block;  font-weight:bold;}
body.komagane #hotelinfo .inner .hotel .txt p{font-size:1.2rem; line-height:1.6; padding:5px 0;}
body.komagane #hotelinfo .inner .hotel .txt p a{color:#0068b7; text-decoration:none;}
body.komagane #hotelinfo .inner .hotel .txt p a:hover{ text-decoration:underline;}

}


@media print,screen and (min-width:769px){
/*areamap*/
body.komagane #areamap {width:100%; padding:3% 0;}
body.komagane #areamap .inner{width:100%; max-width:1035px; margin:2% auto;}
body.komagane #areamap .map{width:100%;  height:400px; overflow:hidden;}
body.komagane #areamap .map .gmap iframe{width:100%; height:400px;}
body.komagane #areamap .inner .route{box-sizing:border-box; width:100%; max-width:1040px;  padding:25px 10px 10px; letter-spacing:-0.4em;}
body.komagane #areamap .inner .route .column{display:inline-block; vertical-align:top; letter-spacing:0; width:32%; margin-right:2%; text-align:center;}
body.komagane #areamap .inner .route .column:last-child{margin-right:0;}

/*hotel info*/
body.komagane #hotelinfo {width:100%; padding:2% 0 3%;}
body.komagane #hotelinfo .inner{width:100%; max-width:1035px; margin:1% auto; box-sizing:border-box; letter-spacing:-0.4em; padding:0 10px;}
body.komagane #hotelinfo .inner .hotel{width:32%; margin:0 2% 0 0; display:inline-block; vertical-align:top; letter-spacing:0;}
body.komagane #hotelinfo .inner .hotel:last-child{margin:0;}
body.komagane #hotelinfo .inner .hotel .photo{display:block; padding:5px 0;width:100%;}
body.komagane #hotelinfo .inner .hotel .txt{display:block; padding:5px 0; width:100%;}
body.komagane #hotelinfo .inner .hotel .txt h3{font-size:1.4rem; color:#c92223; display:block;  font-weight:bold;}
body.komagane #hotelinfo .inner .hotel .txt p{font-size:1.2rem; line-height:1.6; padding:5px 0;}
body.komagane #hotelinfo .inner .hotel .txt p a{color:#0068b7; text-decoration:none;}
body.komagane #hotelinfo .inner .hotel .txt p a:hover{ text-decoration:underline;}

}

@media print,screen and (min-width:1024px){
/*areamap*/
body.komagane #areamap {width:100%; padding:3% 0;}
body.komagane #areamap .inner{width:100%; max-width:1035px; margin:2% auto;}
body.komagane #areamap .map{width:100%;  height:400px; overflow:hidden;}
body.komagane #areamap .map .gmap iframe{width:100%; height:400px;}
body.komagane #areamap .inner .route{box-sizing:border-box; width:100%; max-width:1040px;  padding:25px 0 10px; letter-spacing:-0.4em;}
body.komagane #areamap .inner .route .column{display:inline-block; vertical-align:top; letter-spacing:0; width:32%; margin-right:2%; text-align:center;}
body.komagane #areamap .inner .route .column:last-child{margin-right:0;}

/*hotel info*/
body.komagane #hotelinfo {width:100%; padding:2% 0 3%;}
body.komagane #hotelinfo .inner{width:100%; max-width:1035px; margin:1% auto; box-sizing:border-box; letter-spacing:-0.4em;}
body.komagane #hotelinfo .inner .hotel{width:32%; margin:0 2% 0 0; display:inline-block; vertical-align:top; letter-spacing:0;}
body.komagane #hotelinfo .inner .hotel:last-child{margin:0;}
body.komagane #hotelinfo .inner .hotel .photo{display:block; padding:5px 0;}
body.komagane #hotelinfo .inner .hotel .txt{display:block; padding:5px 0;}
body.komagane #hotelinfo .inner .hotel .txt h3{ color:#c92223; font-size:1.6rem; display:block;  font-weight:bold;}
body.komagane #hotelinfo .inner .hotel .txt p{font-size:1.3rem; line-height:1.6; padding:5px 0;}
body.komagane #hotelinfo .inner .hotel .txt p a{color:#0068b7; text-decoration:none;}
body.komagane #hotelinfo .inner .hotel .txt p a:hover{ text-decoration:underline;}

}




/*recommend*/
body.komagane #recommend {width:100%; padding:2% 0 20px;}
body.komagane #recommend  .inner{width:100%; max-width:1035px; margin:0 auto; box-sizing:border-box; }
body.komagane #recommend  .inner h2{display:block; width:100%; text-align:center;}
body.komagane #recommend  .inner .spotlist{width:100%; max-width:1034px; letter-spacing:-0.4em;}
body.komagane #recommend  .inner .spotlist .item{display:inline-block; vertical-align:top; letter-spacing:0; width:50%;}
body.komagane #recommend  .inner .spotlist .item a:hover{opacity:.75;}

/*main*/
main{position:relative; z-index:5;}
main h1{position:absolute; z-index:10; text-align:center;}
main p{position:absolute;  z-index:10; color:#fff; text-shadow: black 1px 1px 0px;}

@media print,screen and (min-width:1px){
main h1{top:14.6%; left:20%; width:60%; }
main p{bottom:20%; width:90%; left:5%; font-size:0.6rem; line-height:1.5;}
}

@media print,screen and (min-width:481px){
main h1{top:14.6%; left:20%; width:60%; }
main p{bottom:15%; width:80%; left:10%; font-size:0.9rem; line-height:1.5;}
}

@media print,screen and (min-width:769px){
main h1{top:14.6%; left:20%; width:60%; }
main p{bottom:15%; width:80%; left:10%; font-size:1.1rem; line-height:1.5;}
}

@media print,screen and (min-width:1024px){
main h1{top:20%; left:23%; width:54%; }
main p{bottom:15%; width:80%; left:10%; font-size:1.4rem; line-height:1.5;}

}