@charset "UTF-8";


/*=================================================
       common
=================================================*/
a {text-decoration: none;}
.pc_on {display: block;}
.sp_on {display: none;}
.pc_ok {display: block;}
.sp_ok {display: none;}

@media screen and (max-width: 1280px) {
        * {box-sizing: border-box;}
        html , body {min-width: 100%;}
        .wrap {width: 100%; padding: 0 1%;}
        .wrap-12 {width: 100%; padding: 0 1%;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
        .pc_ok {display: none;}
        .sp_ok {display: block;}
        .jump {z-index: 90;}
        .wrap {width: 100%; padding: 0 2%;}
        .wrap-12 {width: 100%; padding: 0 2%;}
        }
        @media only screen and (max-width: 767px) {
        .pc_on {display: none;}
        .sp_on {display: block;}
        .section {padding: 80px 0;}
        #pagehead {height: auto; padding-top: 30%;}
        h2 {font-size: 1.6em;}
        h3 {font-size: 1.4em;}
        h4 {font-size: 1.2em;}
        .naka h2 span {font-size: 24px;}
        .naka table th {white-space: nowrap;}
        .naka table td {padding: 5px 5px 5px 10px;}
        .read {padding: 0 5px; text-align: left;}
        }
        

/*=================================================
       header
=================================================*/

@media screen and (max-width: 1280px) {
        header .wrap {display: flex; flex-wrap: nowrap; justify-content: space-around; width: 100%; padding: 0 10px}
        header .logo {width: auto; margin-right: 20px;} 
        header #nav {flex: 0 1 800px;}
        header #nav nav ul {display: flex; flex-wrap: nowrap; justify-content: space-around;}
        header #nav nav ul li + li {margin-left: 2%;}
        header #nav nav ul li a {padding: 10px 1% 23px 1%; white-space: nowrap;}
        header .tel {flex: 0 1 196px; margin-left: 20px;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
        }
        

/*=================================================
       footer
=================================================*/
 
@media screen and (max-width: 1280px) {
        footer .box {display: flex; flex-wrap: nowrap; justify-content: space-between;}
        footer .box .data1 {flex: 0 1 360px; width: auto;}
        footer .box .data2 {flex: 0 1 680px; width: auto; margin: 0 1%;}
        footer .box .data3 {flex: 0 1 240px; width: auto;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
        footer .box {display: flex; flex-wrap: wrap; flex-direction: column-reverse; align-items: center; text-align: center;}
        footer .box .data1 {flex: 0 1 auto; width: auto; margin-top: 50px;}
        footer dl dt {text-align: center;}
        footer .box .data2 {flex: 0 1 auto; width: auto; margin: 0;}
        footer .gaibulink a {margin-right: 0;}
        footer .box .data3 {flex: 0 1 auto; width: 60%;}
        }
        @media only screen and (max-width: 767px) {
        }

        
/*=================================================
       toppage
=================================================*/

@media screen and (max-width: 1280px) {
        #topslide {position: relative;}
        #topslide #welcome {top: 50%; left: 50%; transform: translate(-50% , -50%);}
        #search .wrap {display: flex; flex-wrap: nowrap; justify-content:center;}
        #search .wrap .kensakumado {flex: 0 1 200px; width: auto; margin-right: 20px;}
        #search .wrap .plan_form {flex: 0 1 900px; width: auto;}
        #search .wrap .plan_form form {display: flex; flex-wrap: nowrap; justify-content: space-between;}
        #search .wrap .plan_form form .data1 {flex: 0 1 650px; width: auto;}
        #search .plan_form .retsu {padding: 2%;}
        #search .retsu dl + dl {margin-left: 2%;}
        #search .wrap .plan_form form .data2 {flex: 0 1 240px; width: auto;}
        #feature #f1 .data1 {left: calc(50% + 30px);}
        #feature #f1 .data2 {width: 50%;}
        #feature #f1 .data2 img {width: 100%;}
        #feature #f1 .data2 p {width: auto;}
        #feature #f1 .data2 .ido {position: relative; bottom: 0; float: right; margin-top: ;}
        #feature #f1 .data2 .ido a {display: inline-block;}
        #homeplan ul {display: flex; flex-wrap: nowrap; justify-content: space-between;}
        #homeplan ul li {flex: 0 1 240px;}
        #homeplan ul li + li {margin-left: 10px;}
        #info .wrap .box {display: flex; flex-wrap: nowrap; justify-content:space-between;}
        #info .wrap .box .data1 {flex: 0 1 470px; width: auto;}
        #homesns .gaibulink {margin-top: 30px;}
        #info .wrap .box .data2 {flex: 0 1 600px; width: auto; margin-left: 30px; }
        #map .ido a {padding: 16px 20px 18px 40px;}
        #map .ido a + a {margin-left: 5px;}
        #info .wrap .box .data2 .map {position: relative; display: block; content: ""; width: 100%; max-width: 600px; margin: 0 auto; padding-top: 100%;}
        #info .wrap .box .data2 iframe {position:absolute; top: 0; left: 0; width: 100%; height: 100%;}

        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
        #search .wrap {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; max-width: 700px;}
        #search .wrap .kensakumado {flex: 0 1 auto; width: auto; margin-right: 0; margin-bottom: 30px;}
        #search .wrap .plan_form {flex: 0 1 auto; width: 100%;}
        #search .wrap .plan_form form {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: space-between;}
        #search .wrap .plan_form form .data1 {flex: 0 1 auto; width: 100%; padding: 20px 2%;}
        #search .plan_form .retsu:nth-of-type(1) {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between;}
        #search .plan_form .retsu:nth-of-type(2) {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between;}
        #search .plan_form .retsu:nth-of-type(3) dl {display: flex; flex-wrap: wrap; flex-direction: flex-start; width: 100%;}
        #search .wrap .plan_form form .data2 {flex: 0 1 auto; width: 100%;}
        #feature #f1 .wrap-12 {max-width: 700px; background: url(../img/home/feature_1_map.png) no-repeat right 33% ,url(../img/home/feature_1_bg.png) no-repeat top center;}
        #feature #f1 .title2 , #feature #f1 .data1 , #feature #f1 .data2 {position: static;}
        #feature #f1 .title2 {text-align: right;}
        #feature #f1 .data1 {width: auto; margin: -30px 0 30px 50px;}
        #feature #f1 .data2 {width: 100%;}
        #feature #f2 .wrap-12 {position: relative; background: url(../img/home/feature_2_bg.png) no-repeat right top / cover;}
        #feature #f2 .data1 {z-index: 10;}
        #feature #f2 .data2 ul {position: absolute; top: 0; left: 0; width: 30%;}
        #feature #f2 .data2 ul li {margin-top: 2%;}
        #feature #f2 .data2 ul li img , #feature #f2 .data2 div img {width: 100%; height: auto;}
        #feature #f2 .data2 div {position: absolute; top: 0; right: 0; width: 30%}
        #info .wrap {max-width: 700px; margin: 0 auto;}
        #info .wrap .box {display: flex; flex-wrap: wrap; align-items:center;}
        #info .wrap .box .data1 {flex: 0 1 100%; width: 100%; margin-top: 30px;}
        #newsfeed .news-img img {width: 100%; height: auto;}
        #info .wrap .box .data2 {flex: 0 1 100%; width: 100%; max-width: 600px; margin: 50px auto 0;}
        #map .ido a {padding: 16px 23px 18px 50px;}
        #map .ido a + a {margin-left: 20px;}
        #info .wrap .box .data2 .map {position: relative; display: block; content: ""; width: 100%; padding-top: 100%;}
        #info .wrap .box .data2 iframe {position:absolute; top: 0; left: 0; width: 100%; height: 100%;}
        }
        @media only screen and (max-width: 767px) {
        #search .search_btn #submit_button {padding: 20px 0;}
        #topslide #welcome {width: 30%; max-width: 200px;}
        #topslide #welcome .moon img {width: 100%; max-width: 130px; height: auto;}
        #topslide #welcome .logo2 img {width: 100%; max-width: 200px; height: auto;}
        #feature #f1 .data1 {width: auto; margin: -30px 0 30px 0;}
        #homeplan .planall a {padding: 20px 0;}
        .planall a {padding: 20px 0;}
        #homeplan ul {display: flex; flex-wrap: wrap; align-items: center; width: 100%; max-width: 360px; margin: 0 auto 50px;}
        #homeplan ul li {flex: 0 1 auto; width: 100%;}
        #homeplan ul li + li {margin-left: 0; margin-top: 50px;}
        #feature #f1 {padding-bottom: 0;}
        #info {padding: 60px 0 60px;}
        #map .ido {display: flex; flex-wrap: wrap; flex-direction: column; align-items:center; margin-bottom: 20px;}
        #map .ido a {width: 210px; margin: 5px 0;}
        #map .ido a + a {margin-left: 0;}
        }
        @media only screen and (max-width: 560px) {
        #search .plan_form .retsu:nth-of-type(3) dl dt , #search .plan_form .retsu:nth-of-type(3) dl dd {width: 100%; margin: 0;}
        #feature #f1 .wrap-12 {max-width: 700px; background: url(../img/home/feature_1_map.png) no-repeat right 35% / 40% auto ,url(../img/home/feature_1_bg.png) no-repeat top center;}
        #search .retsu dl.price dd {display: flex; flex-wrap: nowrap; justify-content: space-between; width: 100%;}
        #search .retsu dl.price dd select {flex: 0 1 auto; width: auto; max-width: 180px;}
        #homeslide {height: 250px;}
        #homeslide ul {height: 250px !important;}
        #homeslide ul li img {height: 100%;}
        }



/*=================================================
       greeting
=================================================*/

@media screen and (max-width: 1280px) {
        #greetingbg {width: 100%;}
        #greetingbg > .wrap {width: 100%;}
        #greeting #comment {width: 100%;}
        #greetingbg img {width: auto; height: 100%;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
        main.naka {background: url(../img/base/dia-gara.png) no-repeat 0 0 / 50% auto, url(../img/base/dia-gara-min.png) no-repeat right 400px / 50% auto;}
        #greetingbg {background: url(../img/greeting/bg.jpg) no-repeat center 0 / cover; padding: 50px 0 30px;}
        #greetingbg > .wrap {display: none;}
        #greeting #comment , #greeting #comment h1 {position: static;}
        #greeting #comment .text_contents {max-width: 530px; margin: 0 auto; padding: 1px 15px 15px;}
        #greeting #comment h1 {padding-left: 0;}
        #greeting #comment h2 {margin: 30px 0 10px 0; font-size: 1.6em; line-height: ;}
        #greeting #comment p {margin-left: 0;}
        #greeting #comment p.hissya {margin-left: 0; text-align: right;}
        }
  
/*=================================================
       guestroom
=================================================*/

@media screen and (max-width: 1280px) {
        .pageslide .box {display: flex; flex-wrap: nowrap; justify-content: space-between;}
        .pageslide .box .slidemain {flex: 0 1 960px; width: auto; margin-right: 10px;}
        .pageslide .box .slidethumbs {flex: 0 1 300px; width: auto; height: auto; }
        .pageslide .box .slidethumbs ul {position: relative; width: 100%;}
        .slidethumbs ul li {width: 100%; height: auto; padding-top: 33%;}
        #guestroom .swiper-pagination-bullet {background-position: center center; background-size: cover;}
        .swiper-slide img {width: 100%; height: auto;}
        #guestroom .info .wrap {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: space-between;}
        #guestroom .info .wrap .data1 {flex: 0 1 750px; width: auto;}
        #guestroom .info .wrap .data2 {flex: 0 300px; width: auto; margin-right: 10px;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
            #guestroom .submit_button {padding: 20px 20px 20px 40px;}
            #otherroom ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center;}
            #otherroom ul li {flex: 0 1 400px;}
            #otherroom ul li a img {width: 100%; height: auto;}
            #otherroom ul li + li {margin-left: 10px;}
        #otherroom ul li dl dt {font-size: 2rem;}
        }
        @media only screen and (max-width: 767px) {
            #guestroom-select .select > ul {flex-direction: column; align-items: center;}
            #guestroom-select .select > ul li {height: 460px;}
            #guestroom-select .select > ul li.select-wayou:hover, #guestroom-select .select > ul li.select-special:hover, #guestroom-select .select > ul li.select-hanare:hover {width: 100%;}
            #guestroom-select .select > ul li h2 img {width: 30%;}
        .pageslide .box {flex-wrap: wrap; flex-direction: column; align-items: center;}
        .pageslide .box .slidemain {flex: 0 1 100%; width: 100%; margin-right: 0; margin-bottom: 5px;}
        .pageslide .box .slidethumbs {flex: 0 1 100%; width: 100%; height: auto; }
        .slidethumbs ul li {width: 33%; height: auto; margin-bottom: 0.5%; margin-right: 0.5%; padding-top: 9.9%;}
        .slidethumbs ul li:nth-of-type(3n) {margin-right: 0;}
        #guestroom .info + .pageslide {margin-top: 80px;}
        #guestroom .info .wrap {flex-wrap: wrap; flex-direction: column; align-items: center;}
        #guestroom .info .wrap .data1 {flex: 0 1 100%; width: auto;}
        #guestroom .info .wrap .data2 {flex: 0 100%; width: 300px; margin-right: 0; margin-top: 10px;}
        #otherroom ul {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
        #otherroom ul li {flex: 0 1 100%;}
        #otherroom ul li a img {width: 100%; height: auto;}
        #otherroom ul li + li {margin-left: 0; margin-top: 50px;}

        }


/*=================================================
       cuisine
=================================================*/
#dinner.res {display: none; height: auto;}

@media screen and (max-width: 1280px) {
        #dinner {display: none;}
        #dinner.res {display: block;}
        #dinner.res > div {position: static;}
        #dinner.res .box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; max-width: 1280px;}
        #dinner.res .box img {width: 100%; height: auto;}
        #dinner.res ul.img01 {float: left; flex: 0 1 550px; max-width: 550px;}
        #dinner.res ul.img01:after {display: block; content: ""; clear: both;}
        #dinner.res ul.img01 li > ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; margin-bottom: 10px;}
        #dinner.res ul.img01 li:nth-of-type(1) > ul li:nth-of-type(1) {float: left; flex: 0 1 320px; max-width: 320px;}
        #dinner.res ul.img01 li:nth-of-type(1) > ul li:nth-of-type(2) {float: left; flex: 0 1 220px; max-width: 320px; margin-left: 10px;}
        #dinner.res ul.img01 li:nth-of-type(2) > ul li:nth-of-type(1) {float: left; flex: 0 1 240px; max-width: 320px;}
        #dinner.res ul.img01 li:nth-of-type(2) > ul li:nth-of-type(2) {float: left; flex: 0 1 300px; max-width: 320px; margin-left: 10px;}
        #dinner.res .img02 {float: right; flex: 0 1 720px; max-width: 720px; margin-left: 10px;}
        #dinner.res .img03 {float: left; flex: 0 1 640px; max-width: 640px;}
        #dinner.res ul.img04 {float: left; flex: 0 1 630px; max-width: 630px; margin-left: 10px;}
        #dinner.res ul.img04:after {display: block; content: ""; clear: both;}
        #dinner.res ul.img04 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center;}
        #dinner.res ul.img04 > li:nth-of-type(1)  {float: left; flex: 0 1 190px; max-width: 190px;}
        #dinner.res ul.img04 > li:nth-of-type(1) > ul li:nth-of-type(2) {margin-top: 10px;}
        #dinner.res ul.img04 > li:nth-of-type(2) {float: left; flex: 0 1 430px; max-width: 430px; margin-left: 10px;}
        #dinner.res ul.img04 > li:nth-of-type(2) > ul li:nth-of-type(2) {margin-top: 10px;}
        #location .dining {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between;}
        #location .dining .naiyo {flex: 0 1 510px; width: auto; max-width: ; margin-right: 20px;}
        #location .dining .pic {flex: 0 1 720px; width: auto; max-width: 720px;}
        #location .dining .pic .swiper-slide {width: 100% !important; }
        #type .box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center;}
        #type .box .naiyo {flex: 0 1 510px; width: auto; max-width: 510px; margin-right: 20px;}
        #type .box .pic {flex: 0 1 720px; width: auto; max-width: 720px;}
        #type .box  .pic img {width: 32%;}
        #type .box  .pic img + img {margin-left: 0.5%;}
        #wa-restaurant .wrap-12 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center;}
        #wa-restaurant .wrap-12 .naiyo {flex: 0 1 510px; width: auto; max-width: 510px; margin-right: 20px;}
        #wa-restaurant .wrap-12 .pic {flex: 0 1 720px; width: auto; max-width: 720px;}
        #wa-restaurant .wrap-12 .pic .swiper-slide {width: 100% !important; }
        #morning .pic {width: 100%; max-width: 720px;}
        #morning .pic img {width: 100%; height: auto;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
        #cuisine .section h2 {font-size: 1.2em;}
        #location .wrap-12 {flex-wrap: wrap; flex-direction: column; align-items: center;}
        #location .wrap-12 .naiyo {flex: 0 1 100%; width: auto; margin-right: 0;}
        #location .wrap-12 .pic {flex: 0 1 100%; width: 100%;}
        #type {margin-top: 50px;}
        #type .box {flex-wrap: wrap; flex-direction: column; align-items: center;}
        #type .box .naiyo {flex: 0 1 100%; width: 100%; margin-right: 0;}
        #type .box .pic {flex: 0 1 100%; width: auto; margin-bottom: 30px;}
        #wa-restaurant .wrap-12 {flex-wrap: wrap; flex-direction: column; align-items: center;}
        #wa-restaurant .wrap-12 .naiyo {flex: 0 1 100%; width: 100%; margin-right: 0;}
        #wa-restaurant .wrap-12 .pic {flex: 0 1 100%; width: auto; margin-top: 30px;}
        }
        @media only screen and (max-width: 767px) {
        #dinner.res .box {flex-wrap: wrap; flex-direction: column-reverse; align-items: center; max-width: 100%; max-width: 550px; margin: 0 auto;}
        #dinner.res .box:last-of-type {flex-direction: column;}
        #dinner.res ul.img01 {flex: 0 1 100%; margin-top: 10px;}
        #dinner.res .img02 {flex: 0 1 100%; margin-left: 0px;}
        #dinner.res .img03 {flex: 0 1 100%;}
        #dinner.res ul.img04 {flex: 0 1 100%; margin-left: 0px; margin-top: 10px;}
        #morning {padding: 80px 0 50px;}
        #morning .read {text-align: left;}
        }

/*=================================================
       hotspa
=================================================*/

@media screen and (max-width: 1280px) {
        #hotspamovie {width: 100%; padding: 0 2%;}
        #hotspamovie #hotspa_video {width: 100%;}
        #daiyokujyo .wrap-12 {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: center;}
        #daiyokujyo .wrap-12 .naiyo {flex: 0 1 510px; width: auto; max-width: 510px;}
        #daiyokujyo .wrap-12 .pic {flex: 0 1 720px; width: auto; max-width: 720px; margin-right: 20px;}
        #daiyokujyo .wrap-12 .pic img {width: 100%; height: auto;}
        #uchiyu .wrap-12 ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between;}
        #uchiyu .wrap-12 ul li {flex: 0 1 400px;}
        #uchiyu .wrap-12 ul li img {width: 100%; height: auto;}
        #uchiyu ul li + li {margin-left: 2%;}
        #uchiyu ul li dl dd {font-size: 1.4em;}
        #hanare .wrap-12 {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center;}
        #hanare .wrap-12 .naiyo {flex: 0 1 510px; width: auto; max-width: 510px; margin-right: 20px;}
        #hanare .wrap-12 .pic {flex: 0 1 720px; width: auto; max-width: 720px;}
        #hanare .pic .swiper-slide {width: 100% !important; }
        #hotspa #kounou .wrap-12 {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: center;}
        #hotspa #kounou .wrap-12 .naiyo {flex: 0 1 510px; width: auto; max-width: 510px;}
        #hotspa #kounou .wrap-12 .pic {flex: 0 1 720px; width: auto; max-width: 720px;  margin-right: 20px;}
        #hotspa #kounou .pic img {width: 100%; height: auto; }
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
        #daiyokujyo .wrap-12 {flex-wrap: wrap; flex-direction: column; align-items: center;}
        #daiyokujyo .wrap-12 .naiyo {flex: 0 1 100%; width: 100%;  }
        #daiyokujyo .wrap-12 .pic {flex: 0 1 100%; width: auto; margin-right: 0; margin-top: 30px;}
        #uchiyu ul li dl dd {font-size: 1em;}
        #uchiyu ul li .ido a {display: block; background-position: 3% 50% , 0 0; padding: 16px 3% 18px 6%; animation: none;}
        #hanare .wrap-12 {flex-wrap: wrap; flex-direction: column; align-items: center;}
        #hanare .wrap-12 .naiyo {flex: 0 1 100%; width: 100%;  margin-right: 0; }
        #hanare .wrap-12 .pic {flex: 0 1 100%; width: auto; margin-top: 30px;}
        #hotspa #kounou #type {margin-top: 0;}
        #hotspa #kounou .wrap-12 {flex-wrap: wrap; flex-direction: column; align-items: center;}
        #hotspa #kounou .wrap-12 .naiyo {flex: 0 1 100%; width: 100%;  }
        #hotspa #kounou .wrap-12 .pic {flex: 0 1 100%; width: auto; margin-right: 0; margin-top: 30px;}
        }
        @media only screen and (max-width: 767px) {
        #hotspa .section {padding: 50px 0 50px;}
        #uchiyu .wrap-12 ul  {flex-wrap: wrap; flex-direction: column; align-items: center;}
        #uchiyu .wrap-12 ul li {flex: 0 1 100%; width: 100%; max-width: 400px;}
        #uchiyu ul li + li {margin-left: 0; margin-top: 30px;}
        #uchiyu ul li dl dd {font-size: 1.4em;}
        
        }


/*=================================================
       facility
=================================================*/
#kannai.res {display: none; height: auto;}

@media screen and (max-width: 1280px) {
        #kannai {display: none;}
        #kannai.res {display: block;}
        #kannai.res > div {position: static;}
        #kannai.res .box {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; max-width: 1280px;}
        #kannai.res .box img {width: 100%; height: auto;}
        #kannai.res ul.img01 {float: left; flex: 0 1 550px; max-width: 550px;}
        #kannai.res ul.img01:after {display: block; content: ""; clear: both;}
        #kannai.res ul.img01 li > ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; margin-bottom: 10px;}
        #kannai.res ul.img01 li:nth-of-type(1) > ul li:nth-of-type(1) {float: left; flex: 0 1 150px; max-width: 150px;}
        #kannai.res ul.img01 li:nth-of-type(1) > ul li:nth-of-type(2) {float: left; flex: 0 1 380px; max-width: 380px; margin-left: 20px;}
        #kannai.res ul.img01 li:nth-of-type(2) > ul li:nth-of-type(1) {float: left; flex: 0 1 300px; max-width: 300px;}
        #kannai.res ul.img01 li:nth-of-type(2) > ul li:nth-of-type(2) {float: left; flex: 0 1 240px; max-width: 240px; margin-left: 10px;}
        #kannai.res .img02 {float: right; flex: 0 1 720px; max-width: 720px; margin-left: 10px;}
        #kannai.res .img03 {float: left; flex: 0 1 720px; max-width:720px;}
        #kannai.res ul.img04 {float: left; flex: 0 1 550px; max-width: 550px; margin-left: 10px;}
        #kannai.res ul.img04:after {display: block; content: ""; clear: both;}
        #kannai.res ul.img04 li > ul {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; margin-bottom: 10px;}
        #kannai.res ul.img04 li:nth-of-type(1) > ul li:nth-of-type(1) {float: left; flex: 0 1 200px; max-width: 200px;}
        #kannai.res ul.img04 li:nth-of-type(1) > ul li:nth-of-type(2) {float: left; flex: 0 1 340px; max-width: 340px; margin-left: 10px;}
        #kannai.res ul.img04 li:nth-of-type(2) > ul li:nth-of-type(1) {float: left; flex: 0 1 280px; max-width: 280px;}
        #kannai.res ul.img04 li:nth-of-type(2) > ul li:nth-of-type(2) {float: left; flex: 0 1 260px; max-width: 260px; margin-left: 10px;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
        }
        @media only screen and (max-width: 767px) {
        #kannai.res .box {flex-wrap: wrap; flex-direction: column-reverse; align-items: center; max-width: 100%; max-width: 550px; margin: 0 auto;}
        #kannai.res .box:last-of-type {flex-direction: column;}
        #kannai.res ul.img01 {flex: 0 1 100%; margin-top: 10px;}
        #kannai.res .img02 {flex: 0 1 100%; margin-left: 0px;}
        #kannai.res .img03 {flex: 0 1 100%;}
        #kannai.res ul.img04 {flex: 0 1 100%; margin-left: 0px; margin-top: 10px;}
        #facility #kounou.section {padding: 80px 0;}
        }

/*=================================================
       access
=================================================*/

@media screen and (max-width: 1280px) {
        #access #map.wrap-12 {display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: center; padding: 0 1%;}
        #map.wrap-12 .naiyo {flex: 0 1 510px; width: auto; max-width: 510px;}
        #map.wrap-12 .pic {flex: 0 1 720px; width: auto; max-width: 720px; margin-right: 20px;}
        #map.wrap-12 .pic iframe {width: 100%; height: 100%;}
        #tourism .wrap-12 ul {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center;}
        #tourism .wrap-12 ul li {flex: 0 1 33%; max-width: 386px; margin-right: 0.5%;}
        #tourism .wrap-12 ul li:nth-of-type(3n) {margin-right: 0;}
        #tourism .wrap-12 ul li img {width: 100%; height: auto;}
        }
        @media screen and (max-width: 1200px) {
        }
        @media screen and (max-width: 1024px) {
        #access #map.wrap-12 {display: flex; flex-wrap: nowrap; flex-direction: column-reverse; align-items: center; padding: 0 2%;}
        #map.wrap-12 .naiyo {flex: 0 1 100%; width: 100%; margin-top: 30px;}
        #map.wrap-12 .pic {position: relative; top: 0; left: 0; flex: 0 1 100%; width: 100%; margin-right: 0; padding-top: 83.33333%;}
        #map.wrap-12 .pic iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
        #map.wrap-12 .naiyo p {padding: 0 5px;}
        }
        @media only screen and (max-width: 767px) {
        #tourism .wrap-12 ul {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
        #tourism .wrap-12 ul li {flex: 0 1 100%; margin-right: 0; margin-top: 50px; margin-bottom: 0;}
        #tourism.section {padding: 80px 0;}
        }