html,body { overflow-x: hidden;}
#preloader { position: fixed; width: 100%; height: 100%; background-color: #fff; z-index: 1000; }
.preloader-logo { width: calc(300px * 1.5); height: calc(73px * 1.5); position: absolute; top: 50px; left: 0; right: 0; bottom: 0; margin: auto; transition: .5s .5s all cubic-bezier(0,0,.3,2); opacity: 0; }
#preloader.on .preloader-logo { opacity: 1; top: 0; }

body { color:#000; font-family:'Noto Serif JP','NotoSerif',serif; font-weight:200; }
body.noScroll { overflow:hidden; }
a { color:#000; text-decoration:none; }
.gnav { position:absolute; display:flex; box-sizing:border-box; width:100%; font-size:1.4rem; letter-spacing:1px; justify-content:flex-end; line-height:1; /*padding-right:40px;*/ }
.gnav ul { display:flex; }
.gnav li { border-left:solid 1px #000; }
.gnav-btn , .gnav-btn:before { transition:.5s all cubic-bezier(.1, 1.2, .5, 1); }
.gnav-btn { position:relative; display:block; box-sizing:border-box; padding:30px 20px 10px 15px; background-color:#fff; z-index:1; }
.gnav-btn:hover { color:#fff; }
.gnav-btn:hover:before { height:100%; }
.gnav-btn:before { content:''; position:absolute; width:100%; height:0; background-color:#000; top:0; left:0; z-index:-1; }

/* firstView */
.firstView { position:relative; width:100%; height:118vh; margin-bottom:13vw; }
/* .firstView * { transition:.6s all cubic-bezier(.1, .9, .2, 1.8); } */
.firstView-ttl { position:absolute; color:#fff; top:17vw; left:25vw; z-index:2; text-align:center; }
.firstView-ttl-en,.firstView-ttl-ja { opacity: 0; position: relative; top: 20px; transition: .8s all cubic-bezier(0,0,.3,2); }
.firstView-ttl-ja { transition-delay: .2s; }
.firstView-ttl.on .firstView-ttl-en,.firstView-ttl.on .firstView-ttl-ja { opacity:1; top: 0; }
.firstView-ttl-en { display:block; font-family:'Oranienbaum', serif; font-size:5.5vw; letter-spacing:3px; }
.firstView-ttl-ja { position:relative; display:inline-block; font-size:2vw; letter-spacing:3px; }
.firstView-ttl-ja:before , .firstView-ttl-ja:after { content:''; position:absolute; width:3vw; height:1px; margin:auto; background-color:#fff; top:0; bottom:0; }
.firstView-ttl-ja:before { left:-4vw; }
.firstView-ttl-ja:after { right:-4vw; }
.firstView-bg { position:absolute; width:100%; height:calc(100% - 54px); top:0; left:0; }
.firstView-bg-mizutama { position:absolute; top:0; left:0; }
.firstView-bg-black { position:absolute; top:5vh; left:0; z-index:1; }
.firstView-akakabotya { position:absolute; right:5vw; bottom:23vh; z-index:2; }
.firstView-akakabotya-img { width:93vmin; height:auto; }
.firstView-fit { width:90vw; height:auto; }

/* art */
.art { height:82vw; margin-bottom:15vw; }
.art-island { width:80%; height:60vw; background:url(../img/bg0.jpg); margin-left:auto; }

.art-islandAnim { position: relative; left: 100%; transition: 1.5s all cubic-bezier(0.65, 0.05, 0.36, 1); opacity: 0; }
.art-islandAnim.on { left: 0; opacity: 1; }
.art-island-inner1 { position:relative; box-sizing:border-box; top:-5vw; padding-left:6vw; }
.art-island-inner2 { display:inline-block; box-sizing:border-box; padding:2.5vw 2vw; background-color:#fff; margin-bottom:3vw; }

.art-island-inner2Anim { position: relative; left: 100%; transition: 1.5s all cubic-bezier(0.65, 0.05, 0.36, 1); opacity: 0; }
.art-island-inner2Anim.on { left: 0; opacity: 1; }

.art-island-ttl1Anim,.art-island-txt1Anim { position: relative; top: 50px; opacity: 0; transition: 1s all cubic-bezier(0.65, 0.05, 0.36, 1); }
.art-island-ttl1Anim.on,.art-island-txt1Anim.on { top: 0; opacity: 1; }
.art-island-ttl1 { font-size:2.8vw; margin-bottom:1.5vw; line-height:1; }
.art-island-txt1 { font-size:.9vw; letter-spacing:1px; line-height:2.2; }
.art-island-youtube { width:45%; }
.art-island-youtubeAnim{position: relative; top: 50px; opacity: 0; transition: 1s all ease-out;}
.art-island-youtubeAnim.on { top: 0; opacity: 1; }


.art-guide { position:relative; height:34vw; top:-12vw; }
.art-guide-inner { position:absolute; width:35.5%; height:34vw; transition:.2s transform ease-in,1s bottom ease-out,1s opacity ease-out; opacity: 0;}

.art-guide-inner:hover { z-index:10; transform:scale(1.1); }

.art-guide-naoshimaAnim.on { opacity: 1; bottom: 0; }
.art-guide-setouthiAnim.on { opacity: 1; bottom: 100px; }
.art-guide-kinrinAnim.on { opacity: 1; bottom: 0; }

.art-guide-naoshima { background:url('../../img/kankou/naoshima.png') no-repeat; background-size:contain; left:0; bottom:-100px; }

.art-guide-setouthi { margin:auto; background:url('../../img/kankou/setouthi.png') no-repeat; background-size:contain; left:0; right:0; /*bottom:100px;*/ bottom: 200px;}

.art-guide-kinrin { background:url('../../img/kankou/kinrin.png') no-repeat; background-size:contain; right:0; bottom: -100px; }


.art-guide-btn { position:absolute; box-sizing:border-box; padding:1.5vw; background-color:#fff; font-size:1.15vw; line-height:1; overflow: hidden; }

.art-guide-btnAnim { opacity: 0; transition: 1s all cubic-bezier(0.65, 0.05, 0.36, 1); }
.art-guide-btnAnim.on { opacity: 1; }

.art-guide-inner:hover .art-guide-btn:before { width:100%; left:0; }
.art-guide-btn:before { content:''; position:absolute; width:0; height:100%; background-color:#000; top:0; right:0; z-index:0; transition:.5s all cubic-bezier(.7, .7, 0, 1); }
.art-guide-btn-naoshima { right:.4vw; bottom:5vw; }
.art-guide-btn-setouthi { left:1.9vw; bottom:9vw; }
.art-guide-btn-kinrin { left:.8vw; bottom:9vw; }
.art-guide-btn-txt { position:relative; padding-right:2vw; line-height:1; }


.art-guide-btn-txtAnim { right: 100%; opacity: 0; transition: 1s all cubic-bezier(0.65, 0.05, 0.36, 1); }
.art-guide-btn-txtAnim.on { right: 0; opacity: 1; }
.art-guide-inner:hover .art-guide-btn-txt { color:#fff; }
.art-guide-btn-txt:before { content:''; position:absolute; width:1.31vw; height:1.31vw; margin:auto; background:url('../img/icon/arrow1.png') no-repeat; background-size:contain; top:0; right:0; bottom:0; z-index:5; }
.art-guide-inner:hover .art-guide-btn-txt:before { transform:rotate(90deg); }
.naoshima { margin-bottom:15vw; }
.naoshima-outer { box-sizing:border-box; padding:0 5vw; text-align:center; }
.naoshima-ttl1 { position:relative; display:inline-block; font-size:2.2vw; letter-spacing:2px; align-items:center; padding-right:4.5vw; margin-bottom:3vw; line-height:1; }

.naoshima-anim { position: relative; top: 50px; opacity: 0; transition: 1s all cubic-bezier(0.65, 0.05, 0.36, 1);}
.naoshima-anim.on { top: 0; opacity: 1;}

.naoshima-ttl1:before { content:''; position:absolute; width:6.5vw; height:6.5vw; margin:auto; background:url('../img/naoshimattl.png') no-repeat; background-size:contain; top:0; right:0; bottom:0; }
.naoshima-ttl2 { font-size:1.1vw; letter-spacing:1px; margin-bottom:.5vw; }
.naoshima-txt1 { font-size:.9vw; line-height:2; }
.naoshima-map { max-width:1280px; margin:0 auto; }
.naoshima-map-tabletSumaho { display:none; width:70%; margin:0 auto; }
.setouchi { position:relative; }
.setouchi-imgAnim { opacity: 0; transition: 1s all cubic-bezier(0.65, 0.05, 0.36, 1);}
.setouchi-imgAnim.on { opacity: 1; }
.setouchi-box { position:absolute; box-sizing:border-box; max-width:570px; padding:1.5vw; background-color:#fff; font-size:12px; top:0; z-index: 1; }
.setouchi-box-ttl1 { position:relative; font-size:2rem; letter-spacing:2px; margin-bottom:.5vw; line-height:1; }
.setouchi-box-txt1 { font-size:1.3rem; line-height:1.5; text-align:left; }

.setouchi-shoudoshima-txtAnim { opacity: 0; position: relative; left: 15%; transition: 1s all cubic-bezier(0.65, 0.05, 0.36, 1); }
.setouchi-shoudoshima-txtAnim.on { opacity: 1; left: 0; }

.setouchi-shimakitchen-txtAnim { opacity: 0; position: relative; right: 15%; transition: 1s all cubic-bezier(0.65, 0.05, 0.36, 1); }
.setouchi-shimakitchen-txtAnim.on { opacity: 1; right: 0; }

.setouchi-shoudoshima { position:absolute; top:-15vw; right:0; }
.setouchi-shoudoshima-box { top:80px; left:-20vw; z-index:1; }
.setouchi-shoudoshima-boxAnim { transform: translateX(50%); opacity:0; transition: 1s all cubic-bezier(0.65, 0.05, 0.36, 1); overflow: hidden; z-index: 2; }
.setouchi-shoudoshima-boxAnim.on { opacity: 1; transform: translateX(0); }

.setouchi-shimakitchen-boxAnim { transform: translateX(-50%); opacity:0; transition: 1s all cubic-bezier(0.65, 0.05, 0.36, 1); overflow: hidden; }
.setouchi-shimakitchen-boxAnim.on { opacity: 1; transform: translateX(0); }

.setouchi-shoudoshima-ttl1 { text-align:right; }
.setouchi-shoudoshima-ttl1Anim { opacity: 0; position: relative; left: 15%; transition: 1s all cubic-bezier(0.65, 0.05, 0.36, 1); }
.setouchi-shoudoshima-ttl1Anim.on { left: 0; opacity: 1; }

.setouchi-shimakitchen-ttl1Anim { opacity: 0; position: relative; right: 15%; transition: 1s all cubic-bezier(0.65, 0.05, 0.36, 1); }
.setouchi-shimakitchen-ttl1Anim.on { opacity: 1; right: 0; }

.setouchi-shoudoshima-imgAnim { opacity: 0; position: relative; left: 100%; transition: 1s all cubic-bezier(0.65, 0.05, 0.36, 1);}
.setouchi-shimakitchen-imgAnim { opacity: 0; position: relative; right: 100%; transition: 1s all cubic-bezier(0.65, 0.05, 0.36, 1); }
.setouchi-shimakitchen-imgAnim.on { opacity: 1; right: 0; }
.setouchi-shoudoshima-imgAnim.on { opacity: 1; left: 0; }
.setouchi-shoudoshima-txt { position:relative; padding-right:1.4vw; }
.setouchi-shoudoshima-txt:before , .setouchi-shoudoshima-txt:after { content:''; position:absolute; margin:auto; top:0; right:.5vw; bottom:0; }
.setouchi-shoudoshima-txt:before { width:.5vw; height:.3vw; background-color:#000; }
.setouchi-shoudoshima-txt:after { width:0; height:0; border:solid .3vw transparent; right:-.2vw; border-left:solid #000 .4vw; }
.setouchi-shimakitchen { position:absolute; left:0; bottom:-8vw; z-index: 1; }
.setouchi-shimakitchen-box { top:80px; right:-20vw; }
.setouchi-shimakitchen-txt { position:relative; padding-left:1.4vw; }
.setouchi-shimakitchen-txt:before , .setouchi-shimakitchen-txt:after { content:''; position:absolute; margin:auto; top:0; left:.5vw; bottom:0; }
.setouchi-shimakitchen-txt:before { width:.5vw; height:.3vw; background-color:#000; }
.setouchi-shimakitchen-txt:after { width:0; height:0; border:solid .3vw transparent; left:-.2vw; border-right:solid #000 .4vw; }
.setouchi-inner { position:absolute; color:#fff; top:40%; left:50%; transform:translate(-50%, -50%); }
.setouchi-ttl1 { font-family:'Goudy Bookletter 1911', serif; font-size:2.1vw; letter-spacing:2px; margin-bottom:1.5vw; }
.setouchi-ttl1Anim,.setouchi-txt1Anim,.setouchi-btn1Anim { position: relative; top: 20px; opacity: 0; transition: 1.5s top cubic-bezier(0.65, 0.05, 0.36, 1),1.5s opacity cubic-bezier(0.65, 0.05, 0.36, 1); }
.setouchi-ttl1Anim.on,.setouchi-txt1Anim.on,.setouchi-btn1Anim.on { top: 0; opacity: 1; }

.setouchi-txt1 { font-size:.85vw; letter-spacing:2px; line-height:3; margin-bottom:1.5vw; }
.setouchi-btn1 , .setouchi-btn:before { transition:.3s color ease-out,.3s background-color ease-out,1.5s top cubic-bezier(0.65, 0.05, 0.36, 1),1.5s opacity cubic-bezier(0.65, 0.05, 0.36, 1); }
.setouchi-btn1 { position:relative; display:inline-block; padding:.5vw 3.5vw .5vw 1.5vw; color:#000; background-color:#fff; font-size:.8vw; border-radius:50px; line-height:1; }
.setouchi-btn1:hover { color:#fff; background-color:#000; }
.setouchi-btn1:hover:before { border:solid .3vw transparent; border-left:.5vw solid #fff; }
.setouchi-btn1:before { content:''; position:absolute; width:0; height:0; margin:auto; border:solid .3vw transparent; top:0; right:.6vw; bottom:0; z-index:1; border-left:.5vw solid #000; }
.kinrinmap { margin-bottom:4vw; }
.kinrinmapAnim { position: relative; top: 50px; opacity: 0; transition: 1.5s cubic-bezier(0.65, 0.05, 0.36, 1); }
.kinrinmapAnim.on { top: 0; opacity: 1; }
.shodoshima { position:relative; height:90vh; }

.shodoshima-ph { position:relative; z-index:1; /*width: 68.1vmax;*/ }
.shodoshima-phAnim { position: relative; right: 50%; opacity: 0; transition: 1s cubic-bezier(0.65, 0.05, 0.36, 1); }
.shodoshima-phAnim.on { right: 0; opacity: 1; }

.shodoshima-bg { position:absolute; right:0; /*width: 55.3vmax;*/ bottom:0; }
.shodoshima-inner { position:absolute; width:700px; padding:50px; background-color:#fff; top: 50%; left: 50%; transform: translate(-20%,-65%); z-index:1; }

.shodoshima-innerAnim { opacity: 0; transition: 1s cubic-bezier(0.65, 0.05, 0.36, 1); transform: translate(-50%,-65%);}
.shodoshima-innerAnim.on { opacity: 1; transform: translate(-20%,-65%); }

.shodoshima-ttl1Anim { position: relative; top: 50px; opacity: 0; transition: 1s cubic-bezier(0.65, 0.05, 0.36, 1); }
.shodoshima-ttl1Anim.on { top: 0; opacity: 1; }
.shodoshima-txt1Anim { position: relative; top: 50px; opacity: 0; transition: 1s cubic-bezier(0.65, 0.05, 0.36, 1); }
.shodoshima-txt1Anim.on { top: 0; opacity: 1; }

.shodoshima-btn1Anim1 { position: relative; top: 50px; opacity: 0; transition: 1s cubic-bezier(0.65, 0.05, 0.36, 1);}
.shodoshima-btn1Anim1.on { top: 0; opacity: 1; }
.shodoshima-btn1Anim2 { position: relative; top: 50px; opacity: 0; transition: 1s cubic-bezier(0.65, 0.05, 0.36, 1);}
.shodoshima-btn1Anim2.on { top: 0; opacity: 1; }

.teshima { position:relative; height:90vh; }
.teshima-inner { position:absolute; width:700px; padding:50px; background-color:#fff; top:50%; left:50%; z-index:1; transform: translate(-40%,-65%); }


.teshima-ph { position:absolute; top:0; right:0; z-index:1; }

.teshima-phAnim { right: -100%; opacity:0; transition: 1.5s cubic-bezier(0.65, 0.05, 0.36, 1); }
.teshima-phAnim.on { right: 0; opacity: 1; }
.teshima-innerAnim { transform: translate(-40%,-65%); opacity: 0; transition: 1s cubic-bezier(0.65, 0.05, 0.36, 1); }
.teshima-innerAnim.on { transform: translate(-85%,-65%); opacity: 1; }

.teshima-ttl1Anim { position: relative; top: 50px; opacity: 0; transition: 1s cubic-bezier(0.65, 0.05, 0.36, 1); }
.teshima-ttl1Anim.on { top: 0; opacity: 1; }
.teshima-txt1Anim { position: relative; top: 50px; opacity: 0; transition: 1s cubic-bezier(0.65, 0.05, 0.36, 1); }
.teshima-txt1Anim.on { top: 0; opacity: 1; }

.teshima-btn1Anim1 { position: relative; top: 50px; opacity: 0; transition: 1s cubic-bezier(0.65, 0.05, 0.36, 1);}
.teshima-btn1Anim1.on { top: 0; opacity: 1; }
.teshima-btn1Anim2 { position: relative; top: 50px; opacity: 0; transition: 1s cubic-bezier(0.65, 0.05, 0.36, 1);}
.teshima-btn1Anim2.on { top: 0; opacity: 1; }


.teshima-bg { position:absolute; width:100%; height:90%; background:url('../../img/teshima/bg.jpg'); left:0; bottom:0; }
.ttl1 { font-size:3.3vw; letter-spacing:3px; line-height:1; margin-bottom:1vw; }
.txt1 { font-size:.8vw; letter-spacing:1px; line-height:2; margin-bottom:2vw; }
.btn1 { display:flex; }
.btn1-inner { position:relative; display:block; margin-right:20px; transition: .3s all cubic-bezier(0.65, 0.05, 0.36, 1);}
.btn1-inner:hover { opacity: .6; }
.btn1-inner:before { content:''; position:absolute; width:100%; height:100%; background-color:rgba(0, 0, 0, .5); top:0; left:0; }
.btn1 .btn1-inner:nth-last-child() { margin-right:0; }
.btn1-txt { position:absolute; width:100%; color:#fff; font-size:1.5rem; letter-spacing:2px; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; }
.btn1-txt-inner { position:relative; line-height:1; padding-right:4rem; }
.btn1-txt-inner:after { content:''; position:absolute; width:calc(70px / 2); height:calc(70px / 2); margin:auto; background:url('../img/icon/arrow2.png') no-repeat; background-size:contain; top:0; right:0; bottom:0; }
footer { padding:5vw 0 7vw; background-color:#000; }
.footer-sns { display:flex; justify-content:center; margin-bottom:5vw; line-height:1; }
.footer-sns-inner { position:relative; width:72px; height:72px; background-color:#fff; border-radius:50%; margin-right:30px; transition:.3s all ease-out; }
.footer-sns-inner:last-of-type { margin-right:0; }
.footer-sns-inner:before { content:''; position:absolute; margin:auto; top:0; left:0; right:0; bottom:0; }
.footer-sns-inner:hover { opacity:.5; }

.footer-sns-icon { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
.footer-sns-instagram { width:calc(66px / 2); height:calc(66px / 2); }
.footer-sns-twitter { width:calc(72px / 2); height:calc(60px / 2); }
.footer-sns-facebook { width:calc(38px / 2); height:calc(76px / 2); }

.footer-link { display:flex; font-size:1.5rem; letter-spacing:2px; justify-content:center; line-height:1; margin-bottom:4vw; }
.footer-link li { box-sizing:border-box; padding:2px 15px 2px 0; margin-right:15px; border-right:solid 1px #fff; }
.footer-link a { position:relative; display:inline-block; color:#fff; }
.footer-link a:before { content:''; position:absolute; width:0; height:1px; background-color:#fff; right:0; bottom:-10px; transition:.3s all ease-out; }
.footer-link a:hover:before { width:100%; right:auto; }
.footer-link li:last-of-type { border-right:none; margin-right:0; padding-right:0; }
.footer-access { color:#fff; text-align:center; }
.footer-access-ttl { font-size:1.8rem; letter-spacing:2px; margin-bottom:.5vw; }
.footer-access-ttl a  { color:#fff;}
.footer-access-txt { font-size:1.5rem; letter-spacing:2px; }
.modal { position:fixed; display:none; width:100%; height:100%; background:url('../img/bg0.jpg'); top:0; left:0; z-index:300; padding-top:100px; overflow-y:hidden; }
.modal:before { content:''; position:absolute; width:200%; height:300px; background-color:#fff; top:0; right:-50%; z-index:0; transform:rotate(45deg); }
.modal-close { cursor:pointer; position:absolute; width:60px; height:60px; top:20px; right:20px; }
.modal-close:before , .modal-close:after { content:''; position:absolute; width:100%; height:2px; margin:auto; background-color:#000; top:0; left:0; right:0; bottom:0; }
.modal-close:before { transform:rotate(45deg); }
.modal-close:after { transform:rotate(-45deg); }
.modal-outer1 { position:relative; max-width:1200px; height:85%; margin:0 auto; background-color:#fff; z-index:1; overflow-y:scroll; }
.modal-inner1 { position:relative; max-width:1000px; margin:0 auto; z-index:1; text-align:center; }
.modal-inner2 { position:relative; box-sizing:border-box; padding:20px; z-index:1; text-align:center; }
.modal-img img { width:100%; height:auto; }
.modal-ttl1 { font-size:2.5rem; font-weight:bold; letter-spacing:2px; margin-bottom:.5vw; }
.modal-ttl2 { font-size:1.8rem; }
.hamburger { display:none; }


@media screen and (max-width: 1400px) {
	.gnav { padding-right:0; }
	.firstView { height:100vh; }
	.firstView-ttl { top:30vw; left:10vw; }
	.firstView-bg { top:54px; }
	.firstView-bg-black { top:15vw; }
	.firstView-akakabotya { bottom:5vw; }
	.firstView-akakabotya-img { width:100vmin; }
	.art-island-txt1 { font-size:1.3rem; }
	.setouchi-shimakitchen { bottom:-3vw; }
	.setouchi-shimakitchen-img { width:85%; }
	.setouchi-inner { width:90%; }
	.setouchi-ttl1 { font-size:2.5rem; }
	.setouchi-txt1 { font-size:1.2rem; margin-bottom:50px; }
	.setouchi-btn1 { padding:20px 50px 20px 20px; font-size:1.3rem; }
}

@media screen and (max-width: 1350px) {
	.shodoshima-innerAnim { transform: translate(-80%,-50%);}
	.shodoshima-innerAnim.on { transform: translate(-50%,-50%); }
	.teshima-innerAnim { transform: translate(-10%,-50%);}
	.teshima-innerAnim.on { transform: translate(-50%,-50%); }
}

@media screen and (max-width: 1280px) {
	.firstView-bg-black { top: 5vw; }
	.firstView-akakabotya { bottom: 0; }
	.firstView-ttl { top: 20vw; left: 15vw; }
	.firstView-akakabotya-img { width: 93vmin; }
	.modal-outer1 { width: 70%; }
	.modal-inner1 { width: 80%; }
	.setouchi-shoudoshima-box { left: -30vw; }
	.shodoshima-ph { width:80%; }
	.shodoshima-ph img { width: 100%; height: auto; }
	.shodoshima-bg { width:40%; }
	.shodoshima-bg img { width: 100%; height: auto; }
	.teshima-ph { width: 80%; }
	.teshima-ph img { width: 100%; height: auto; }
	.art-guide { top: -5vw; }
	.setouchi-inner { top: 45%; }
}

@media screen and (max-width: 1100px) {
	.art-island { height:65vw; }
}


@media screen and (max-width: 1000px) {
	.firstView-ttl { top:32vw; }
	.firstView-bg-black { top:10vw; }
	.firstView-akakabotya { bottom:8vw; }
	.firstView-akakabotya-img { width:95vmin; }
	.setouchi-shoudoshima { top:-15vw; text-align:right; }
	.setouchi-shoudoshima-img { position:relative; width:70%; top:10px; }
	.setouchi-shoudoshima-box { top:0; }
	.setouchi-shimakitchen-img { width:70%; }
	.shodoshima-inner { box-sizing:border-box; width:90%; top:50%; left:50%; }
	.teshima-inner { box-sizing:border-box; width:90%; top:50%; left:50%; }
}


@media screen and (max-width: 960px) {
	.art-island { height:75vw; }
	.setouchi-box { padding:3vw; }
	.setouchi-shimakitchen-box { right:0; }
}


@media screen and (max-width: 950px) {
	.firstView-ttl { top:45vw; left:10vw; }
	.firstView-ttl-en { font-size:7vw; }
	.firstView-ttl-ja { font-size:3vw; }
	.firstView-ttl-ja:before , .firstView-ttl-ja:after { width:5vw; }
	.firstView-ttl-ja:before { left:-6vw; }
	.firstView-ttl-ja:after { right:-30px; }
	.firstView-bg-black { top:20vh; }
	.firstView-akakabotya { bottom:4vh; }
	.firstView-akakabotya-img { width:85vmin; }
}


@media screen and (max-width: 768px) {
	.firstView-ttl-ja { font-size: 1.8rem; }
	.firstView-ttl-ja:before { left: -50px; }
	.firstView-ttl-ja:after { right: -50px; }
	.btn1-inner:hover { opacity: 1; }
	.gnav a:hover { color:#000; }
	.gnav a:hover:before { height:0; }
	.firstView { height:52vh; }
	.firstView-ttl { top:29vw; left:8vw; }
	.firstView-bg-black { top:40px; }
	.firstView-akakabotya { bottom:0; }
	.firstView-akakabotya-img { width:60vmin; }
	.art { height:152vw; }
	.art-island { width:90%; height:130vw; }
	.art-island-inner2 { padding:50px; margin-bottom:40px; }
	.art-island-ttl1 { font-size:3rem; }
	.art-island-youtube { width:100%; }
	.art-guide-inner:hover { transform:scale(1); }
	.art-guide-btn { padding:30px; font-size:1.5rem; }
	.art-guide-inner:hover .art-guide-btn:before { width:0; }
	.art-guide-inner:hover .art-guide-btn-txt { color:#000; }
	.art-guide-inner:hover .art-guide-btn-txt:before { transform:none; }
	.naoshima { margin-bottom:30vw; }
	.naoshima-ttl1 { font-size:2.8rem; }
	.naoshima-ttl2 { font-size:2.2rem; margin-bottom:20px; }
	.naoshima-txt1 { font-size:1.3rem; }
	.naoshima-map-tabletSumaho { display:block; text-align:center; }
	.naoshima-map-tabletSumaho .naoshima-map-tabletSumaho-btn { margin-bottom: 20px; font-size: 1.2rem; width: 80%; padding: 15px 20px; background-color: #fff; }
	.naoshima-map-tabletSumaho-btn:before , .naoshima-map-tabletSumaho-btn:after { content:''; position:absolute; height:1px; margin:auto; background-color:#000; top:0; right:0; bottom:0; z-index:2; left: auto; }
	.naoshima-map-tabletSumaho-btn:before { width:30px; right:-20px; }
	.naoshima-map-tabletSumaho-btn:after { width:10px; top:-6px; right:-20px; transform:rotate(35deg); }
	.naoshima-map-tabletSumaho-btn { padding:30px 20px ; background-color:#fbf450 ; font-size:1.8rem; box-shadow: 10px 10px 0 0 #ddd; display: block; position: relative; }

	.setouchi { height:100vh; background-color:#000; padding-bottom:50vw; }
	.setouchi-img { position:absolute; width:100%; height:auto; top:50%; left:50%; transform:translate(-50%, -50%); }
	.setouchi-box-ttl1 { font-size:2rem; margin-bottom:3vw; }
	.setouchi-shoudoshima { top:-15vw; text-align:right; }
	.setouchi-shoudoshima-img { position:relative; width:90%; top:10px; z-index:1; }
	
	.setouchi-shoudoshima-box { left:-50px; top: -60px; }
	.setouchi-shoudoshima-txt { padding-right:30px; }
	.setouchi-shoudoshima-txt:before { width:15px; height:5px; right:10px; }
	.setouchi-shoudoshima-txt:after { border:solid 5px transparent; right:-1px; border-left:solid #000 7px; }
	.setouchi-shimakitchen { bottom:-2vw; }
	.setouchi-shimakitchen-img { width:75%; }
	.setouchi-shimakitchen-txt { padding-left:30px; }
	.setouchi-shimakitchen-txt:before { width:15px; height:5px; left:5px; }
	.setouchi-shimakitchen-txt:after { border:solid 5px transparent; left:-6px; border-right:solid #000 7px; }
	.setouchi-inner { top:50%; }
	.setouchi-ttl1 { font-size:3rem; }
	.setouchi-txt1 { font-size:1.3rem; margin-bottom:50px; }
	.setouchi-btn1:hover { color:#000; background-color:#fff; }
	.setouchi-btn1:hover:before { border:6px solid transparent; right:10px; border-left:6px solid #000; }
	.setouchi-btn1:before { border:6px solid transparent; right:10px; border-left:6px solid #000; }
	.shodoshima { height:50vh; }
	.shodoshima-ph { width:90%; }
	.shodoshima-ph img { width:100%; height:auto; }
	.shodoshima-bg { width:60%; }
	.shodoshima-bg img { width:100%; height:auto; }
	.teshima { height:56vh; }
	.teshima-ph { width:80%; }
	.teshima-ph img { width:100%; height:auto; }
	.txt1 { font-size:1.3rem; }
	.btn1-txt { font-size:1.3rem; }
	footer { padding:100px 0; }
	.footer-sns { margin-bottom:60px; }
	.footer-sns-inner:hover { opacity:1; }
	.footer-link { font-size:1.3rem; margin-bottom:50px; }
	.footer-link a:before { display:none; }
	.modal-outer1 { position:absolute; width:90%; height:auto; top:50%; left:50%; transform:translate(-50%, -50%); }
	.modal-ttl1 { font-size:1.8rem; letter-spacing:1px; }
}


@media screen and (max-width: 600px) {
	.setouchi-inner { top:55%; }
	.preloader-logo { width: calc(300px / 1.3); height: calc(73px / 1.3); }
	.setouchi-box-ttl1 { font-size: 1.8rem;}
	header { position:fixed; display:none; width:100%; height:100%; background:rgba(255, 255, 255, .9); top:0; left:0; z-index:100; }
	header .gnav { position:relative; height:100%; justify-content:center; align-items:center; }
	header .gnav ul { display:block; padding-right:5%; }
	header .gnav li { position:relative; border-left:none; margin-bottom:20px; }
	header .gnav li:last-of-type { margin-bottom:0; }

	.sumahoBtn1 { padding:30px 20px ; background-color:#fbf450 ; font-size:1.8rem; box-shadow: 10px 10px 0 0 #ddd; display: block; position: relative; }
	.sumahoBtn1:before , .sumahoBtn1:after { content:''; position:absolute; height:1px; margin:auto; background-color:#000; top:0; right:0; bottom:0; z-index:2; left: auto; }
	.sumahoBtn1:before { width:30px; right:-20px; }
	.sumahoBtn1:after { width:10px; top:-6px; right:-20px; transform:rotate(35deg); }

	.firstView { height:100vh; overflow:hidden; margin-bottom:20vw; }
	.firstView-ttl { top:35%; left:50%; transform:translate(-50%, -50%); }
	.firstView-ttl-en { font-size:6rem; }
	.firstView-ttl-ja { font-size:1.5rem; }
	.firstView-ttl-ja:before { left:-30px; }
	.firstView-ttl-ja:after { right:-30px; }
	.firstView-bg { top:0; }
	.firstView-akakabotya { width:100%; right:15px; bottom:-15px; }
	.firstView-akakabotya-img { width:140%; }
	.firstView-fit { width:780px; }
	.firstView-fitBlack { width:250%; }
	.art { height:auto; margin-bottom:30vw; }
	.art-island { width:95%; height:auto; margin-bottom:50px; }
	.art-island-inner2 { padding:20px; }
	.art-island-ttl1 { font-size:2rem; margin-bottom:20px; }
	.art-island-txt1 { font-size:1.2rem; }
	.art-guide { height:auto; border:solid 20px #000; background-color:#000; top:0; }
	.art-guide-inner { position:relative; display:block; width:100%; height:250px; bottom:auto !important; }
	.art-guide-naoshima { width:100%; background-size:cover; margin-bottom:0; }
	.art-guide-setouthi { margin:0 0 0 auto; background-color:#000; background-size:cover; }
	.art-guide-kinrin { width:100%; background-size:cover; margin-left:auto; }
	.art-guide-btn { width:80%; padding:20px 0; letter-spacing:1px; text-align:center; box-shadow: 10px 10px 0 0 #ccc; }
	.art-guide-btn-naoshima { right:0; }
	.art-guide-btn-setouthi { left:0; }
	.art-guide-btn-kinrin { left:auto; right:0; }
	.art-guide-btn-txt { font-weight:bold; padding-right:20px; }
	.art-guide-btn-txt:before { width:calc(50px / 4); height:calc(50px / 4); }
	.naoshima-ttl1 { font-size:1.8rem; padding-right:40px; margin-bottom: 30px; }
	.naoshima-ttl1:before { width:calc(218px / 4); height:calc(224px / 4); }
	.naoshima-ttl2 { font-size:1.8rem; }
	.naoshima-txt1 { font-size:1.2rem; }
	.naoshima-map-tabletSumaho { width:85%; font-size:1.3rem; }
	.setouchi-box { width:90%; margin:0 auto; }
	.setouchi-shoudoshima-box { top:230px; left:0; padding-top:80px; }
	.setouchi-shoudoshima-txt:before , .setouchi-shoudoshima-txt:after { display:none; }
	.setouchi-shimakitchen { bottom:-30px; }
	.setouchi-shimakitchen-box { top:-260px; padding-bottom:180px; padding-top:20px; }
	.setouchi-shimakitchen-txt { padding-left:0; }
	.setouchi-shimakitchen-txt:before , .setouchi-shimakitchen-txt:after { display:none; }
	.setouchi-ttl1 { font-size:2.7rem; margin-bottom:20px; }
	.setouchi-txt1 { font-size:1.2rem; line-height: 2.3; }
	.kinrinmap { margin-bottom:10vw; }
	.shodoshima { height:957px; margin-bottom:10vw; }
	.shodoshima-ph { width:95%; z-index:2; }
	.shodoshima-bg { width:100%; }
	.shodoshima-inner { padding:20px; top:60%; }
	.teshima { height:957px; }
	.teshima-inner { padding:20px; top:60%; }
	.teshima-ph { width:95%; z-index:2; }
	.teshima-bg { height:50%; }
	.ttl1 { font-size:2rem; margin-bottom:10px; }
	.txt1 { margin-bottom:30px; }
	.btn1 { flex-direction:column; }
	.btn1-inner { margin-right:0; margin-bottom:10px; }
	.btn1-txt-inner { padding-right:2.5rem; }
	.btn1-txt-inner:after { width:calc(70px / 3); height:calc(70px / 3); }
	footer { padding:50px 0 30px; }
	.footer-link { flex-direction:column; }
	.footer-link li { padding:0; border:none; margin-right:0; }
	.footer-link a { display:block; padding:20px 0; text-align:center; }
	.footer-access-ttl { font-size:1.5rem; margin-bottom:10px; }
	.footer-access-ttl a  { color:#fff;}
	.footer-access-txt { font-size:1.2rem; letter-spacing:1px; }
	.modal:before { height:200px; }
	.modal-close { width: 40px; height: 40px; background-color: #fff; border-radius: 50%; top: 10px; right: 10px; }
	.modal-close:before, .modal-close:after { width: 50%; }
	.modal-outer1 { top:45%; }
	.modal-ttl1 { font-size:1.5rem; letter-spacing:1px; }
	.modal-ttl2 { font-size:1.2rem; }
	.hamburger { cursor:pointer; position:fixed; display:block; width:50px; height:50px; background-color:#fff; top:15px; right:15px; z-index:200; border-radius:50%; }
	.hamburger.on { background-color: #fbf450;}
	.hamburger-line { position:absolute; width:40%; height:2px; margin:auto; background-color:#000; left:0; right:0; transition:.1s all ease-out; }
	.hamburger-top { top:15px; }
	.hamburger-center { top:0; bottom:0; }
	.hamburger-bottom { bottom:15px; }
	.hamburger.on .hamburger-top { top:23px; transform:rotate(45deg); }
	.hamburger.on .hamburger-center { opacity:0; }
	.hamburger.on .hamburger-bottom { bottom:25px; transform:rotate(-45deg); }
	.setouchi { box-sizing:border-box; height:2000px; padding:0; margin-bottom:50px; }
	.setouchi-shoudoshima-img { width:95%; top:-10px; z-index: 2; }
	.setouchi-shimakitchen-img { position:relative; width:90%; z-index:1; }
}

@media screen and ( max-width: 375px ) {
	.setouchi-shoudoshima-box { padding-top: 50px; }
	.setouchi-inner { top: 56%; }
	.setouchi-shimakitchen-box { top: -290px; }
	.setouchi-txt1 { margin-bottom: 30px; }
	.sumahoBtn1 { font-size: 1.3rem; }
	.naoshima-map-tabletSumaho .naoshima-map-tabletSumaho-btn { font-size: 1.1rem;}
}

@media screen and (max-width: 320px) {
	.setouchi { height:1700px; }
	header .gnav a { font-size:1.3rem; }
	.firstView-ttl { top:35%; }
	.firstView-ttl-en { font-size:5.5rem; }
	.firstView-akakabotya { bottom:-10px; }
	.art-island-ttl1 { font-size:2rem; }
	.art-guide-btn { font-size:1.2rem; }
	.naoshima-ttl1 { font-size:1.6rem; margin-bottom:30px; }
	.naoshima-ttl2 { font-size:1.5rem; }
	.naoshima-map-tabletSumaho { width:90%; font-size:1.2rem; }
	.setouchi-box-ttl1 { font-size:1.5rem; }
	.setouchi-box-txt1 { font-size:1.2rem; }
	.setouchi-box { width:95%; margin:0 auto; }
	.setouchi-shoudoshima-box { top:190px; }
	.setouchi-shoudoshima-txt { padding-right:10px; }
	.setouchi-inner { top:56%; }
	.setouchi-ttl1 { font-size:2.5rem; }
	.setouchi-txt1 { font-size:1.1rem; line-height:2; }
	.setouchi-btn1 { font-size:1.2rem; }
	.shodoshima { height:880px; }
	.shodoshima-inner { padding:10px; }
	.teshima { height:900px; }
	.teshima-inner { width:95%; padding:10px; top:58%; }
	.ttl1 { font-size:1.8rem; }
	.txt1 { font-size:1.2rem; }
	.footer-access-ttl { font-size:1.3rem; }
	.footer-access-ttl a  { color:#fff;}
	.footer-access-txt { font-size:1rem; }
}