@charset "utf-8"; 
a, abbr, acronym, address, applet, article, aside, audio,b, big, blockquote, body, caption, canvas, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video{font-size:100%; vertical-align:baseline; white-space:normal; margin:0; padding:0; border:0; outline:0; background:transparent;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;} ol, ul{list-style:none;} blockquote, q{quotes:none;}table{border-collapse:collapse; border-spacing:0;} *{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; -webkit-text-size-adjust:100%;} img{vertical-align:top; width: 100%;height: auto;} h1, h2, h3, h4, h5, h6{font-weight:normal;}



/*---------------------------
Link
---------------------------*/
a{outline:none; text-decoration: none; color: #000;}
a:hover{ opacity: 0.8;}
a img:hover{ opacity: 0.8;}
a:hover{-webkit-transition:all .3s ease; transition:all .3s ease;}


/*---------------------------
Body
---------------------------*/
body{font-family:'Sawarabi Gothic', sans-serif, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic"; font-style: normal; font-weight: 300; color: #000000; word-wrap:break-word; font-kerning:normal;font-size:14px;letter-spacing: 0.05em;}



/*---------------------------
共通
---------------------------*/
.cf:before,
.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf{*zoom: 1;}

.pc{display:block;}
.sp{display:none;}



@media only screen and (max-width:750px){
.pc{display:none;}
.sp{display:block;}
}

header{ position: fixed; padding:30px 0; width: 100%; z-index: 3; background: #fff;}
header ul{ display: flex; justify-content: center; align-items: center;}
header ul li{margin-right: 50px; }
header ul li:last-child{margin-right: 0;}
header .nav01{max-width:38px }
header .nav02{max-width:166px }
header .nav03{max-width:110px }
header .nav04{max-width:51px }
header .nav05{max-width:140px }
header .nav06{max-width:52px }
header .nav07{max-width:97px }


@media only screen and (max-width:750px){
header{padding:0 0; height: 50px; background: none;}
header ul li{margin:0 auto; }
header .nav01{max-width:38px }
header .nav02{max-width:166px }
header .nav03{max-width:110px }
header .nav04{max-width:51px }
header .nav05{max-width:140px }
header .nav06{max-width:52px }
header .nav07{max-width:97px }
header ul li:last-child{margin:0 auto; }
}

#hero{min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100)}
.hero{position: relative;}
.hero .inner{height: 100vh; max-width: 1080px; margin: 0 auto;display: flex; justify-content: center; align-items: center; position: relative;}
.hero h1{ width: 45%; margin-bottom:180px;}
.hero .kumo01{ max-width: 318px;  position: absolute; bottom: 230px; left: 0;}
.hero .kumo02{ max-width: 349px; position: absolute; bottom:225px; right: 0;}
.hero .yama{max-width: 910px; position: absolute; left: 0; right: 0; margin: auto;bottom:30px;}
.hero .message{position: absolute; bottom: 0; width: 100%; height: 50px;display: flex;overflow: hidden;}

@media only screen and (max-width:750px){
.hero .message{align-items: center; height: 30px;}
}

@media only screen and (max-width:750px){
.hero h1{ width: 60%; margin-bottom:120px;}
.hero .kumo01{ max-width:none; width: 40%;  bottom: 15%; left: 0;}
.hero .kumo02{ max-width:none; width: 40%;  bottom:15%; right: 0;}
}



.side-insta_box{position: fixed; right:40px; top:40%; width: 28px;z-index: 1;}
.side-insta_box .line{height: 1px; width: 100%; border-bottom: 1px solid #231815;}
.side-insta_box .tit{width: 10px; margin: 20px auto 0;}
.side-insta_box .icon{width:100%; margin-top:10px;}

@media only screen and (max-width:750px){
.side-insta_box{right:10px;}
}

.intro{background: #bce2e8; padding: 125px 0; }
.intro h2{width: 223px; margin: 0 auto;}
.intro .inner{margin:70px auto 0;max-width:908px; padding: 0 20px; letter-spacing: 0.5em;}

@media only screen and (max-width:750px){
.intro{padding: calc(125/750 * 100vw) 0; }
.intro .inner{margin:calc(70/750 * 100vw) auto 0;padding: 0 50px;}
}

.gallery{ position: relative; height: 100vh;overflow-y: hidden;}
.gallery h2{position: absolute; right:20px;  top:35%; width:18px; z-index: 1; }

@media only screen and (max-width:750px){
.gallery{ height: auto;overflow-y:inherit;}
.gallery h2{position: absolute; right:0; left: 10px;  top:26%; width:12px; }
}

.contents{padding: 125px 0;}
.contents h2{width: 170px; margin: 0 auto;}
.contents h3{width: 235px; margin:70px auto 0;}
.contents h4{font-size: 28px; text-align: center;font-family:'Sawarabi Gothic', sans-serif; margin-top: 25px; letter-spacing: 0.5em; }
.contents .photo{max-width: 850px; margin:110px auto 0; position: relative;}
.contents .photo .wavy{width: 207px;height: 120px; position: absolute; bottom: -20px; right: -50px;}


@media only screen and (max-width:750px){
.contents{padding:calc(125/750 * 100vw) 0;}
.contents h3{width:180px; margin:calc(70/750 * 100vw) auto 0;}
.contents h4{font-size:calc(28/750 * 100vw) ;  margin-top: calc(25/750 * 100vw); }
.contents .photo{padding:0 20px; margin:30px auto 0;}
.contents .photo .wavy{width: calc(207/750 * 100vw);bottom: -75px; right: 0px;}
}

.umemap{padding: 125px 0; }
.umemap h4{font-size: 28px; text-align: center;font-family:'Sawarabi Gothic', sans-serif; letter-spacing: 0.5em;}

.umemap .tab-list {display: flex;flex-flow: row wrap;justify-content: space-btween;max-width: 1200px; margin: 110px auto 0;width: 90%;}
.umemap .tab-list-item {text-align: center;flex: 0 0 25%;background-color: #eee;padding: 10px 0;font-size: 15px;font-weight: bold; }
.umemap .tab-list-item.active2 {background-color: #bce2e8;}
.umemap .tab-list-item:hover{cursor: pointer;}
.umemap .tab-contents-item {display: none;}
.umemap .tab-contents-item.show {display: block;}
.umemap .inner{max-width: 1200px; display: flex;width: 90%; margin: 30px auto 0;}
.umemap .inner .map-box{width: 50%;}
.umemap .inner .map-box iframe{height: 580px;}
.umemap .inner .txt-box{width: 50%; padding: 30px 0 0 0; background: #fff;}
.umemap .inner .txt-box h3{font-size:40px;font-family:'Sawarabi Gothic', sans-serif;  padding-left: 50px; font-weight: bold;}
.umemap .inner .txt-box h3 span{font-size:18px;font-family:'Sawarabi Gothic', sans-serif;font-weight: 500; display: block;}
.umemap .inner .txt-box .list-box{display: flex; justify-content: flex-start; align-items: flex-start; margin-top: 30px;}
.umemap .inner .txt-box .list-box ul{width: 50%; padding-left: 50px;}
.umemap .inner .txt-box .list-box ul.w100{width: 100%;}
.umemap .inner .txt-box .list-box ul li{font-size:15px;font-family:'Sawarabi Gothic', sans-serif; font-weight: 500; margin-bottom: 20px;text-indent: -1.5em; padding-left: 1.5em;}
.umemap .inner .txt-box .list-box ul li a{text-decoration: underline;}
.umemap .tit1{font-size: 18px;  color: #e68231;font-weight: bold; text-align:center; margin: 50px auto 0;}
.umemap .tit2{font-size: 18px;  color: #9036aa;font-weight: bold; text-align:center; margin: 50px auto 0;}
.umemap .tit3{font-size: 18px;  color: #ed5f59;font-weight: bold; text-align:center; margin: 50px auto 0;}


@media only screen and (max-width:750px){
.umemap{padding: calc(125/750 * 100vw) 0;}
.umemap{padding: 0 0;}
.umemap h4{font-size: calc(28/750 * 100vw);}
.umemap .tab-list {margin: 30px auto 0;}
.umemap .inner{margin: 20px auto 0;display: block;}
.umemap .inner .map-box{width: 100%;}
.umemap .inner .map-box iframe{height: 350px;}
.umemap .inner .txt-box{width: 100%; padding:0 0 20px 0;}
.umemap .inner .txt-box h3{font-size:24px; text-align: center; padding-left: 0;}
.umemap .inner .txt-box h3 span{font-size:18px;text-align: center;}
.umemap .inner .txt-box .list-box{margin-top: 10px;}
.umemap .inner .txt-box .list-box ul{width: 50%; padding-left:20px; margin-top: 10px;}
.umemap .inner .txt-box .list-box ul li{font-size: 13px;margin-bottom: 10px;}
}


.movie{width: 100%; position: relative;}
.movie .movie-box{position: relative;width: 100%;padding-top: 56.25%;}
.movie .movie-box iframe {position: absolute;top: 0;right: 0;width: 100%;height: 100%;}
.movie .over, .movie #yt_player, .movie #yt_player2 {position: absolute;top: 0;left: 0;min-width: 100%;min-height: 100%;width: auto;height: auto;}
.movie .over{z-index: 1;}
.movie #yt_player, .movie #yt_player2{z-index: -2;}


.news{background: #bce2e8; padding: 125px 0; }
.news h2{width: 170px; margin: 0 auto;}
.news .inner{max-width: 760px; margin: 70px auto 0;}
.news label {display: flex;justify-content: flex-start;align-items: center;padding : 15px;line-height: 1;color :#000000;cursor :pointer;position: relative;border-bottom: 1px solid #000;}
.news label .day{font-size: 18px; letter-spacing: 0.2em; padding-right: 20px; position: relative;}
.news label .day::after{content: ""; position: absolute; right: 0; height: 100%; width: 1px; border-right:1px solid #000;}
.news label h4{font-size: 18px; letter-spacing: 0.2em; padding-left: 50px; line-height:1.8;}
.news label .more{position: absolute;right: 10px; top: 8px; width: 38px; height: 28px; background:url("../images/icon_more.svg") no-repeat; background-size: cover;}
.news input {display: none;}
.news .news-box ul {padding: 40px;}
.news-box li {height: 0;overflow: hidden;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;
font-size: 15px;}
#links6 li{height: auto;opacity: 1;}
#type1:checked ~ #links1 li{height: auto;opacity: 1;}
#type2:checked ~ #links2 li{height: auto;opacity: 1;}
#type3:checked ~ #links3 li{height: auto;opacity: 1;}
#type4:checked ~ #links4 li{height: auto;opacity: 1;}
#type5:checked ~ #links5 li{height: auto;opacity: 1;}
#type6:checked ~ #links6 li{height: auto;opacity: 1;}
.news-box li{line-height: 1.8;}
.news-box li a{ text-decoration: underline;}
.news-box .img-box{display: flex; justify-content: center;}
.news-box .img-box .left{width: 48%; margin-right: 4%;}
.news-box .img-box .right{width: 48%;}


@media only screen and (max-width:750px){
.news{padding:calc(125/750 * 100vw) 0; }
.news .inner{ margin: 30px auto 0; padding: 0 20px;}
.news label {display: flex;justify-content: flex-start;align-items: center;padding : 15px;line-height: 1;color :#000000;cursor :pointer;position: relative;border-bottom: 1px solid #000;}
.news label .day{font-size: calc(18/750 * 100vw); letter-spacing: 0.0em; padding-right: calc(20/750 * 100vw);}
.news label h4{font-size: calc(18/750 * 100vw); letter-spacing: 0.0em; padding-left: calc(50/750 * 100vw);}
.news label .more{right: 5px; top: 4px;}
.news .news-box ul {padding: calc(40/750 * 100vw);}
.news-box li{font-size: calc(15/750 * 100vw);}
#type3:checked ~ #links3 li{height:auto;}
.news-box .img-box{display: block;}
.news-box .img-box .left{width: 100%; margin-right:0; margin-bottom: 20px;}
.news-box .img-box .right{width: 100%;}

}

.instagram-box {background: #bce2e8; padding:0 0 125px 0; }
.instagram-box h2{width: 188px; margin: 0 auto;}
.instagram-box .insta-box{background: #fff; margin: 70px auto 0; padding: 30px 0;}
.instagram-box .insta-box ul{display: flex; justify-content: space-between;}
.instagram-box .insta-box li{width: 25%; margin-right: 30px;}
.instagram-box .insta-box li:last-child{margin-right: 0;}

.instagram-box .link-box{max-width: 900px; margin: 50px auto 0; display: flex; justify-content: center;align-items: center;}
.instagram-box .link-box .icon{width:55px; margin-right: 20px; }
.instagram-box .link-box .tit{font-size:20px; margin-right: 30px; letter-spacing: 0.3em;}
.instagram-box .link-box .url{font-size:17px;letter-spacing: 0.3em;}

@media only screen and (max-width:750px){
.instagram-box { padding:0 0 calc(125/750 * 100vw) 0; }
.instagram-box .insta-box{margin: calc(70/750 * 100vw) auto 0; padding: calc(30/750 * 100vw) 0;}
.instagram-box .link-box{ margin: calc(50/750 * 100vw) auto 0; padding: 0 20px;}
.instagram-box .link-box .icon{width:calc(55/750 * 100vw) ; margin-right:10px;}
.instagram-box .link-box .tit{font-size:calc(20/750 * 100vw); margin-right: 10px; letter-spacing: 0em;}
.instagram-box .link-box .url{font-size:calc(17/750 * 100vw);letter-spacing: 0em;}
.instagram-box .insta-box li{margin-right: 10px;}
}


.access{background: #fff; padding:125px 0; position: relative;}
.access h2{width: 234px; margin: 0 auto;}
.access .map-box{max-width:833px; margin: 100px auto 0;}
.access .btn-box{max-width:600px; margin: 100px auto 0;}
.access .btn-box2{max-width:600px; margin: 65px auto 0;}
.access .map-box2{max-width:850px; margin: 100px auto 0;}
.access h3{position: absolute; right:20px;  top:15%; width:18px; z-index: 1; }

@media only screen and (max-width:750px){
.access{ padding:calc(125/750 * 100vw) 0; }
.access .map-box{padding: 0 10px 0 30px; margin:30px auto 0;}
.access .btn-box{padding: 0 30px;margin: calc(100/750 * 100vw) auto 0;}
.access .btn-box2{padding: 0 30px; margin: 20px auto 0;}
.access .map-box2{padding: 0 30px;margin: calc(100/750 * 100vw) auto 0;}
.access h3{ right:0; left: 10px;  top:26%; width:12px;}
}


.sdgs{background: #bce2e8; padding:125px 0; }
.sdgs h2{width: 170px; margin: 0 auto;}
.sdgs .copy{font-size: 28px;letter-spacing:0.4em;margin: 70px auto 0; text-align: center;}
.sdgs .txt{font-size: 18px; letter-spacing:0.1em; max-width: 780px; margin: 30px auto 0; text-align: center; line-height: 2.2;}
.sdgs .btn-box{max-width:600px; margin: 70px auto 0;}
.sdgs .pict{max-width:600px; margin: 70px auto 0; position: relative;}
.sdgs .pict .wavy{width: 207px; height: 120px; position: absolute; bottom: -50px; right: -70px;}
.sdgs .copy2{font-size: 18px; text-align: center; letter-spacing:0.2em;margin: 100px auto 0;}
.sdgs ul{display: flex; justify-content: space-between; align-items: flex-start; max-width: 850px; margin: 100px auto 0;}
.sdgs ul li{width: 25%; margin-right:50px; }
.sdgs ul li:last-child{margin-right: 0;}

@media only screen and (max-width:750px){
.sdgs{padding:calc(125/750 * 100vw) 0; }
.sdgs .copy{font-size: calc(28/750 * 100vw);letter-spacing:0.2em;margin: calc(70/750 * 100vw) auto 0;}
.sdgs .txt{font-size: calc(18/750 * 100vw); padding:0 20px; margin: calc(30/750 * 100vw) auto 0; }
.sdgs .btn-box{padding:0 20px; margin: calc(70/750 * 100vw) auto 0;}
.sdgs .pict{padding:0 20px; margin: calc(70/750 * 100vw) auto 0;}
.sdgs .pict .wavy{width: calc(207/750 * 100vw);bottom: -85px; right: 0px;}
.sdgs .copy2{font-size: calc(18/750 * 100vw); letter-spacing:0.1em;margin: calc(70/750 * 100vw) auto 0;}
.sdgs ul{padding: 0 20px; margin: calc(70/750 * 100vw) auto 0;}
.sdgs ul li{ margin-right:20px; }
}


.contact{background: #fff; padding:125px 0; }
.contact h2{width: 170px; margin: 0 auto;}
.contact .txt{font-size:24px; letter-spacing: 0.5em; line-height: 2.2; text-align: center; margin: 70px auto 0;}
.contact ul{text-align: center; letter-spacing: 0; font-size: 0; max-width: 920px; margin:80px auto 0;}
.contact ul li{display: inline-block; max-width: 295px; padding: 10px;}
.contact ul li.big{max-width:590px; }


@media only screen and (max-width:750px){
.contact{padding:calc(125/750 * 100vw) 0; }
.contact .txt{font-size:15px; letter-spacing: 0.2em; margin: calc(70/750 * 100vw) auto 0;}
.contact ul{padding: 0 20px; margin:calc(80/750 * 100vw) auto 0;}
.contact ul li{ max-width: 50%; padding: 5px;}
.contact ul li.big{max-width:none; width: 100%; }
}

/*---------------------------
bxslider
---------------------------*/
.bx-wrapper{ position: relative;}
.bx-wrapper .bx-viewport{-webkit-transform:translatez(0); -moz-transform:translatez(0); -ms-transform:translatez(0); -o-transform:translatez(0); transform:translatez(0);}

.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item{display:inline-block; *zoom:1; *display:inline;}
.bx-wrapper .bx-pager.bx-default-pager a{background:#fff; border: 1px solid #c1c1c1;text-indent:-9999px; display:block; width:10px; height:10px; margin:0 5px; outline:0; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active{background:#c1c1c1;}
.bx-wrapper .bx-prev {left: 10px;background:url("../img/common/prev.png") no-repeat; background-size: cover; }
.bx-wrapper .bx-next {right: 10px;background: url("../img/common/next.png") no-repeat; background-size: cover; }
.bx-wrapper .bx-controls-direction a {position: absolute;top: 38%;outline: 0;width: 40px;height: 78px;text-indent: -9999px;z-index: 100;}
.bx-default-pager {display: none;}
.bx-pager a {display:inline-block;width: 15%;}
.bx-pager a img {  opacity: 0.5;  filter: alpha(opacity=50);width: 100%; margin-bottom: 5px;}
.bx-pager a.active img {  opacity: 1;  filter: alpha(opacity=100);}

.bxslider li {
display: none;
}
.bx-viewport .bxslider li {
display: block !important;
}

@media screen and (max-width:751){
.bx-wrapper .bx-pager{ margin-top: 10px;}
.bx-wrapper .bx-prev {left: 5px; }
.bx-wrapper .bx-next {right: 5px; }
.bx-wrapper .bx-controls-direction a {display: none;}
}


.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap:before {
  animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #f2f2f2;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}


.img-animation {
  animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}

.img-animation:before {
  animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #f2f2f2;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}


@keyframes img-opacity {
  0% {
    opacity: 0;
  }
}

@keyframes img-animation {
  100% {
    transform: translateX(100%);
  }
}


.img-wrap2 {
  overflow: hidden;
  position: relative;
}

.img-wrap2:before {
  animation: img-wrap2 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #bce2e8;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-wrap2 {
  100% {
    transform: translateX(100%);
  }
}


.img-animation2 {
  animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}

.img-animation2:before {
  animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #bce2e8;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}


@keyframes img-opacity {
  0% {
    opacity: 0;
  }
}

@keyframes img-animation2 {
  100% {
    transform: translateX(100%);
  }
}


.img-wrap3 {
  overflow: hidden;
  position: relative;
}

.img-wrap3:before {
  animation: img-wrap3 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #F2F2F2;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-wrap3 {
  100% {
    transform: translateX(100%);
  }
}


.img-animation3 {
  animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}

.img-animation3:before {
  animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #F2F2F2;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}


@keyframes img-opacity {
  0% {
    opacity: 0;
  }
}

@keyframes img-animation2 {
  100% {
    transform: translateX(100%);
  }
}

.fade00{animation-delay: 1.0s;}
.fade01{animation-delay: 3.0s;}
.fade02{animation-delay: 4.0s;}
.fade03{animation-delay: 9.0s;}
.fade04{animation-delay: 9.5s;}
.fade05{animation-delay: 10.0s;}
.fade06{animation-delay: 10.0s;}
.fade07{animation-delay: 5.5s;}





.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap:before {
  animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}


.img-animation {
  animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}

.img-animation:before {
  animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}



/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/

.d-demo__wrap {
  display: flex;
  overflow: hidden;
}

.d-demo__list {
  display: flex;
  list-style: none;
}

.d-demo__list--left{
animation :infinity-scroll-left 30s infinite linear 0.5s both;
margin-right: 30px;
}

@media only screen and (max-width:750px){
.d-demo__list--left{
margin-right: 10px;
}
}

.d-demo__item {
  width: calc(100vw / 1);
}
.d-demo__item > img{
   max-width: 100%;
}


#loader {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
}
#loader .loader-slide {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
 
}

#loader .loader-slide.open {
  animation-name: fadeOut;
  animation-duration: 2s;
  animation-delay: 3s;

}

#loader .loader-slide .inner{display: flex; justify-content: center; align-items: center;  width: 100%;height: 100vh;}
#loader .loader-slide .inner .mizu{width:184px; position: relative;}
#loader .loader-slide .inner .mizu .wavy{width: 207px;height: 120px; position: absolute; bottom: -20px; right: -50px;}


@media only screen and (max-width:750px){
#loader .loader-slide .inner .mizu{width:150px;}
#loader .loader-slide .inner .mizu .wavy{width:150px;bottom: -55px; right: -30px;}
}

body {
  animation: disableScroll .1s linear 10s both;
}



@keyframes
disableScroll {
  0%{
    overflow: hidden;
  }
  100%{
    overflow: auto;
  }
}



#trigger-overlay{ display: none;}
.menu{position: fixed; right: 29px; top: 44px; font-size:12px; color: #FBC2D9;font-family:futura-pt, sans-serif;font-weight: 400;letter-spacing: 0.1em; z-index: 1;}
.open .btn{display:block !important;}
.overlay{position:fixed; width:100%; height:100%; top:0; right:0; background:#fff; z-index:7777; }
.overlay .inner{height: 100vh; overflow:auto;display: flex;align-items:center;justify-content:center; flex-flow: column; }
.overlay nav{position:relative;width: 100%;}
.overlay ul{display:inline-block; position:relative; margin:0; text-align: center; width: 100%;}
.overlay ul li{ padding: 1% 0;display:block; -webkit-backface-visibility:hidden; backface-visibility:hidden; text-align: center; font-family: futura-pt, sans-serif;font-weight: 400;}
.overlay ul li a{font-size:22px; display:block; color:#fff !important; -webkit-transition:color 0.2s; transition:color 0.2s; letter-spacing: 0.1em;}
.overlay ul li a:hover, .overlay ul li a:focus{color:#fff;}
.overlay .sns{ text-align: center; margin-bottom: 0;}
.overlay .sns li{  width:25px; margin:0 10px; display: inline-block; vertical-align: middle; border-bottom: none;}
.overlay .sns li a{ font-size: 24px;}
.overlay-door{visibility:hidden; width:0; right:0; -webkit-transition:width 0.5s 0.3s, visibility 0s 0.8s; transition:width 0.5s 0.3s, visibility 0s 0.8s;}
.open .overlay-door{visibility:visible; width:100%; height:100vh; -webkit-transition:width 0.5s; transition:width 0.5s; }
.overlay-door nav{width:100%;}
.overlay-door nav, .overlay-door .overlay-close{opacity:0; -webkit-transition:opacity 0.3s 0.5s; transition:opacity 0.3s 0.5s;}
.open .overlay-door nav, .open .overlay-door .overlay-close{opacity:1; -webkit-transition-delay:0.5s; transition-delay:0.5s;}
.overlay-door.close nav, .overlay-door.close .overlay-close{-webkit-transition-delay:0s; transition-delay:0s;}
.overlay .sns_box{font-size:20px; margin:0 0 5% 0;}
.overlay .sns_box a{color:#fff; margin:0 5% 0 0;}
.overlay dl{margin:0 0 30px; float:left; width:100%; color:#fff;}
.overlay dt{margin:0 0 10px; color:#fff;}
.overlay dd{margin:0;}
.overlay dd a{margin:0 5% 0 0;}
.btn{display:block; width:60px; height:60px; position:fixed; z-index:8888; right:10px; top:4px;}
.btn button{border:none; outline:none; background:none; text-indent:-9999px; position:absolute; top:20px; right:17px; width:25px; height:21px; cursor:pointer; z-index:4444; overflow:hidden; }
.btn button::before, .btn button::after{position:absolute; left:0; content:""; width:25px; height:0; border-top:1px solid #000;}
.other .btn button::before, .other .btn button::after{position:absolute; left:0; content:""; width:25px; height:0; border-top:1px solid #000;}
.open .btn button::before, .open .btn button::after{position:absolute; left:0; content:""; width:25px; height:0; border-top:1px solid #000;}
.btn button::before{top:3px; -webkit-transition:all .2s ease; transition:all .2s ease;}
.btn button::after{bottom:3px; -webkit-transition:all .2s ease; transition:all .2s ease;}
.open button{border-top:none; top:18px !important; width:25px; height:25px;}
.open button::before, .open button::after{top:12px; width:25px;}
.open button::before{-webkit-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:all .2s ease; transition:all .2s ease;}
.open button::after{-webkit-transform:rotate(45deg); transform:rotate(45deg); -webkit-transition:all .2s ease; transition:all .2s ease;}	
#trigger-overlay{ display:block;}

@media screen and (max-width:768px){
.btn{ right:0; top: -6px;}
.btn button::before, .btn button::after{border-top:1px solid #000;}
.open .overlay-door{visibility:visible; width:100%;} 
.overlay .inner{height: 90vh; padding-bottom: 15%;}
.overlay ul li{ padding: 3% 0;}
.overlay ul li a{font-size:16px;}
.menu{ right: 10px; top: 44px; }

.fade06{animation-delay: 0.5s;}
}