@charset "UTF-8";

/* all */
.body { 
  color: #333; background-color: #fff;  max-width: 1280px; margin: 0 auto;
  font-family: 'Roboto Mono', monospace; letter-spacing: 1px;
  user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
body.lock { position: fixed; left: 0; right: 0; top: 0; bottom: 0; }

.section__inner { width: 85%; margin: 0 auto;  padding: 130px 0;}
.section__ttl { 
  color: #5C8D89; font-size: 45px; text-shadow: 4px 4px 0 #ccc; 
  text-align: center; font-weight: bold; margin-bottom: 50px;  
}


@media screen and (min-width: 1051px) { .mb {display: none; }  .mb-txt { display: none; } }

@media screen and (max-width: 1050px) {
  .pc-txt { display: none; } .section__inner { width: 90%; padding: 100px 0; } 
}

@media screen and (max-width: 480px) { 
  .section__ttl { font-size: 30px; margin-bottom: 25px; text-shadow: 2px 2px 0 #ccc;  } 
}

.ttl { opacity: 0; transition: 0.6s ease-out; transform: translateX(-50px); }
.left { opacity: 1; transform: translate(0, 0); }
.item { opacity: 0; transition: 1s ease-out; transform: translateY(50px); }
.up { transform: translate(0, 0); opacity: 1; }



/* loading */
.loading { 
  width : 100%; height: 100vh; margin : 0 auto; position: fixed; z-index: 999; animation: change 8s; 
}

.plant {
  position : relative; display:flex; justify-content:center; align-items:center;
  width: 600px; height: 600px; margin: -100px auto; border-bottom:1px solid #222;
}  

.graound {
  background-color : #36111a; border-radius: 150px 150px 0 0; border-bottom-left-radius: none;
  position:absolute; bottom:0; width:200px; height: 70px; border:none; z-index: 1;
}

.root {
  background-color : green; animation: height 2s ease alternate; z-index: 0;
  position : absolute; bottom:40px; right : 50%; width : 4px; height : 75px;
}

@keyframes height { 0% { transform: translateY(40px); } 100%{ transform: translateY(0px); } }

.leaves {
  transform:rotate(28deg) skewX(-12deg)  skewY(-4deg); transform: scale(0);
  width: 30px; height: 30px; background: green; position: absolute; border-radius: 50px;
}

.leaves-left{
  animation: 2.5s ease-out 1.5s normal none 1 grow; animation-fill-mode: forwards;
  bottom: 93px; left: 49.5%; z-index: 2; border-top-right-radius: 0;
}

.leaves-right{
  animation: 2s ease-out 1s normal none 1 grow; animation-fill-mode: forwards;
  bottom: 97px; right: 50%; z-index: 3; border-bottom-left-radius: 0;
}

@keyframes grow { from { transform: scale(0); } to { transform: scale(1); } }
  @keyframes change {
    0% { background-image: linear-gradient(to bottom, #0280ba, #181818); }
    100% { background-image: linear-gradient(to bottom, #d37426, #181818); }
  }

@media screen and (max-width: 1050px) { .plant { height: 60%; } }
@media screen and (max-width: 560px) { .plant { width:300px; height: 70%; } }

/* header */
.header { position: absolute; z-index: 100; top: 40px; left: 0; width: 100%; }
.header__inner { 
  position: relative; display: flex; justify-content: space-between; align-items: center;
  width: 90%; justify-content: space-between; margin: 0 auto;
}
.header.is-active { position: fixed; top: 0; padding: 15px 0; background-color: #fff; }
.header__ttl { display: block; color: #5C8D89; font-size: 2em; align-items: center; font-weight: bold; }
.header__list { display: flex; justify-content: space-between;  }

.header__item {
  display: block; font-size: 1.7em; letter-spacing: 0.1px; font-weight: bold;
  padding: 15px 5px; margin: 0 10px; color: #333; position: relative; overflow: hidden; 
}
.header__item:after {
  content: ""; background-color: #5C8D89; position: absolute; bottom: 10px; left: 0;
  width: 100%; height: 3px; transform: scaleX(0); transition: transform 0.4s;
}
.header__item:hover:after { transform: scale(1); }

.hamburger {
  display: none; width: 40px; height: 40px; cursor: pointer; z-index: 999; position: absolute; top: 0; right: 0;
}
.hamburger-bar {
  display: block; width: 30px; height: 3px; background-color: #5C8D89;
  position: absolute; left: 0px; transition: 0.3s;
}

.hamburger:hover .hamburger-bar:nth-child(2) { left: 15px; }
.hamburger-bar:nth-child(1) { top: 10px; }
.hamburger-bar:nth-child(2) { top: 20px; }
.hamburger-bar:nth-child(3) { top: 30px; }
.hamburger.is-active .hamburger-bar:nth-child(1) { top: 20px; transform: rotate(45deg); }
.hamburger.is-active .hamburger-bar:nth-child(2) { left: 30px; opacity: 0; }
.hamburger.is-active .hamburger-bar:nth-child(3) { top: 20px; transform: rotate(-45deg); }


@media screen and (max-width: 1450px) { .header__item { font-size: 1.2em; }}

@media screen and (min-width: 1050px) { 
  .mv__scroll-mb {display: none; }  .header__nav { display: block !important; }
}

@media screen and (max-width: 1050px) {
  .header.is-active { padding: 20px 0;}
  .header__ttl { font-size: 2em;  line-height: 1.5; }
  .header__nav {
    position: fixed; top: 0; left: 0;width: 100%; min-height: 100vh; z-index: 998; 
    background-color: #fff; display: none;
  }
  .header__list {
    display: block; text-align: center; line-height: 50px; 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  }
  .header__item { color: #5C8D89; font-size: 2em; line-height: 2; }
  .header__item:after { display: none; }
  .hamburger { display: block;} 
  }
  
@media screen and (max-width: 560px) { 
  .header.is-active {  padding: 10px 0 5px; }
  .header__ttl { font-size: 1.5em; line-height: 2; } 
  .header__item { font-size: 1em; } 
}



/* mv */
.mv { position: relative; height: 100vh; padding-top: 140px; }

.mv::before {
  content: ""; background-color: #74B49B;  z-index: -1;
  position: absolute; top: 240px; left: 0; width: 100%; height: calc(100vh - 240px);
}

.mv__slides { position: absolute; top: 15%; right: 52px; background-color: #fff; width: 71%; height: 70vh; }
.mv__img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; }
.mv__content { position: relative; z-index: 1; top: 200px; padding-left: 100px; display: block; color: #fff; }

.mv__ttl { 
  opacity: 0; transition: 1s ease-out; transform: translateX(-50px);
  font-family: YakuHanMP, "EB Garamond", "Shippori Mincho", serif; 
  font-size: 3.3em; font-weight: bold; letter-spacing: 3.3px;  line-height: 1.5;
}
.mv__ttl.is-active { transform: translate(0, 0); opacity: 1; }

.mv__ttl-sub { 
  opacity: 0; transition: 1s ease-out; transform: translateX(-50px);
  margin-top: 3vh; font-size: 1.7em; letter-spacing: 3px; line-height: 1.7; font-weight: bold; 
}
.mv__ttl-sub.is-active { transform: translate(0, 0); opacity: 1; }


.mv__scroll-down {
  position: absolute; bottom: 30px; left: 50%; display: block; width: 32px; height: 32px;
  margin-left: -16px; border: 2px solid #FFF; border-radius: 50%; background-size: 14px auto;
  z-index: 2; -webkit-animation: bounce 2s infinite 2s; animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in; transition: all .2s ease-in; transform: scale(1)
}

.mv__scroll-down:before {
  content: ""; position: absolute; top: calc(50% - 8px); left: calc(50% - 6px);
  transform: rotate(-45deg); display: block; width: 12px; height: 12px;
  border: 2px solid white; border-width: 0px 0 2px 2px;
}

@keyframes bounce {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);
  }
  40% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); }
  60% { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); }
}

.mv__scroll-mb {
  display: inline-block; position: absolute; left: 15px; bottom: 50px; padding: 10px 10px 110px;
  overflow: hidden; color: #fff; font-size: 1em; font-family: 'Josefin Sans', sans-serif;
  line-height: 1; letter-spacing: .2em; animation: .3s fadeinscroll 9s linear forwards;
  text-transform: uppercase; text-decoration: none; writing-mode: vertical-lr; opacity: 0; z-index: 2;
}

.mv__scroll-mb::after {
  content: ''; position: absolute; bottom: 0; left: 50%; width: 2px; height: 80px;
  background: #fff; animation: slidetop 2s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes fadeinscroll { 0% { bottom: 20px; } 100% { bottom: 30px; opacity: 1; } }

@keyframes slidetop {
  0% { transform: scale(1, 0); transform-origin: 0 0; }
  30% { transform: scale(1, 1); transform-origin: 0 0; }
  70% { transform: scale(1, 1); transform-origin: 0 100%; }
  100% { transform: scale(1, 0); transform-origin: 0 100%; }
}

@media screen and (min-width: 1051px) { .mv__scroll-mb { display: none; } }

@media screen and (max-width: 1050px) {
  .mv__slides { width: 85%; right: 5%; left: 10%; }
  .mv__content { top: 70%;  width: 100%; padding-left: 13%; letter-spacing: 5px; }
  .mv__ttl { font-size: 3em; }
  .mv__ttl-sub { font-size: 1.5em; text-align: right; padding-right: 7%; margin-top: 5%; line-height: 1.2;} 
  .mv__scroll-down { display: none; }
  .mv__scroll-mb { display: block; } 
}

@media screen and (max-width: 1001px) { .mv__content { top: 45vh; } }
@media screen and (max-width: 780px) { .mv__content { top: 67%; } }
@media screen and (max-width: 560px) { .mv__ttl { font-size: 1.5em; }  .mv__ttl-sub { font-size: 1em;}   }
@media screen and (max-width: 480px) { 
  .mv__slides { top: 18%; } .mv__content { top: 77%;}
  .mv__ttl { font-size: 1.2em; }  .mv__ttl-sub { font-size: 0.7em;}  
  .mv__scroll-mb { font-size: 0.5em; left: 0; }
}



/* message */
.message { position: relative; }
.message__content { display: flex; justify-content: space-between; }
.message__content-inner { margin-top: 50px; width: 55%; }

.message__ttl { text-align: left; }
.message__ttl-sub { font-size: 17px; font-weight: bold; margin-bottom: 40px; line-height: 2; }
.message__txt { font-size: 15px; line-height: 2; }
.message__txt + .message__txt { margin: 15px 0; }

.message__copy { 
  font-size: 25px; font-weight: bold; display: inline-block; margin: 30px 0 0 160px; padding: 0 10px; 
  background: linear-gradient(transparent 50%, #A7D7C5 50%); 
}

.message__img { width: 450px; height: 600px; overflow: hidden; position: relative; }

.message__img img {
  position: absolute; top: 110px; left: 0; height: 170%; object-fit: cover; object-position: center;
}

@media screen and (max-width: 1050px) {
  .message__content-inner { margin: 0 auto; width: auto; }
  .message__img { display: none; }
  .message__ttl-sub { font-size: 1.8em;  line-height: 1.5; }
  .message__txt { font-size: 1.2em; line-height: 1.5; }
  .message__copy { font-size: 1.6em;  margin: 40px 0 0 44%; padding: 0; }
  }
@media screen and (max-width: 580px) {
  .message__ttl-sub { font-size: 0.9em; margin-bottom: 20px; }
  .message__txt { font-size: 0.8em; line-height: 1.5; }
  .message__txt .pc { display: none;}
  .message__copy { font-size: 0.8em;  margin: 20px 0 0 40%; padding: 0; }
  }



/* service */
.service { position: relative; }
.service__inner { width: 100%; }

.service::before {
  content: ""; background-color: #74B49B;  z-index: -1;
  position: absolute; top: 0px; left: 0; width: 65%; height: 100%;
}

.service__ttl { color: #fff; }
.service__ttl-sub { font-size: 20px; font-weight: bold; line-height: 1.5; display: block; margin: 50px 140px; }
.service__list { display: flex; justify-content: space-between; flex-wrap: wrap;}
.service__item { border: 10px solid #5C8D89; }

.service__item::after {
  content: ''; position: absolute; top: 0; left: 0; width: calc(50% - 4px);
  color: #fff; background: #0009; z-index: 1; transition: 0.5s; opacity: 0;
}

.service__item-inner {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; z-index: 2; opacity: 0;
  padding: 50px 15px; text-align: center; color: #fff; background: rgb(0, 0, 0,.7); transition: 0.5s;
}

.service__item-ttl { font-size: 43px; font-weight: bold; margin-bottom: 25px; display: block; }
.service__item-txt { font-size: 23px; line-height: 1.5;  display: block; }

.service__img img { object-fit: cover; height: auto; width: 100%; transition: 0.5s; }
.service__item:hover img { transform: scale(1.1); }
.service__item:hover::after,.service__item:hover .service__item-inner { opacity: 1; } 

.slick-arrow {
  width: 70px; height: 70px; background: #5c8d89; cursor: pointer;
  transition: 0.5s; overflow: hidden; color: transparent; border:none; 
  position: absolute; top: -120px; border-radius: 50%;
}

.slick-arrow::after {
  content: ""; position: absolute; top: 25px; left: 22.5px; width: 25px; height: 25px;
  border-top: 3px solid #fff; border-right: 3px solid #fff; transition: .3s;
}

.slick-arrow:hover { opacity: 0.8; }
.slick-prev { right: calc(25%); }
.slick-next { right: calc(25% - 120px); }
.slick-next::after { transform: rotate(45deg); }
.slick-prev::after { transform: rotate(-135deg); }

.slick-slide { margin: 0 10px; overflow: hidden; position: relative; }
.service__btn {
  display: flex; justify-content: space-around; position: relative; width: 200px; color: #5C8D89;
  font-size: 20px; align-items: center; display: block; top: 40px; left: 75%; 
}
.service__btn::after {
  content: ''; position: absolute; top: 40%; right: 1em; width: 85px; height: 2px; transition: 0.3s;
  background-color: #5C8D89; animation: scroll 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes scroll {
  0% { transform: scale(0, 1); transform-origin: 0 0; } 40% { transform: scale(1, 1); transform-origin: 0% 0; }
  70% { transform: scale(1, 1); transform-origin: 100% 0; } 100% { transform: scale(0, 1); transform-origin: 100% 0; }
}

@media screen and (max-width: 1050px) {
  .service__inner { width: 100%; }
  .service__ttl-sub { text-align: center; margin: 50px auto; }
  .service__item-ttl { font-size: 45px; } .service__item-txt { font-size: 30px; }
  .service__btn { top: 25px; left: 80%; width: 190px; }
  }

@media screen and (max-width: 900px) { .service__btn {  left: 70%; font-size: 17px; width: 190px; } }

@media screen and (max-width: 580px) { 
  .service__btn { left: 70%; font-size: 11px; width: 140px;  } .service__btn::after { width: 70px; }
  .service__item-inner { padding: 25px 10px; }
  .service__item-ttl {  font-size: 20px; } .service__item-txt { font-size: 15px; } 
}

@media screen and (max-width: 480px) {
  .service::before { width: 70%; }
  .service__ttl-sub { font-size: 13px; margin: 30px 2% 20px; }
  .slick-slide { margin: 0 5px }
  .service__btn { top: 15px; left: 72%; font-size: 11px; width: 100px;  } .service__btn::after { width: 40px; }
}



/* lineup */
.lineup__txt { font-size: 20px; text-align: center; font-weight: bold; margin-bottom: 30px; display: block; }
.lineup__table { width: 100%; margin: 0 auto 30px; border-collapse: separate; }
.lineup__table::-webkit-scrollbar { display:none; }
.lineup__item, th, td { font-size: 17px; vertical-align: middle; padding: 10px 15px; border: 1px solid #bbb; }
.lineup__item th { background-color: #A7D7C5; text-align: center; }
.lineup__item td { background-color: #fff; }
.lineup__item .lineup__item-list { background-color: #d9e6e1; font-weight: bold; }
.lineup__item:first-child th:first-child { border-radius: 15px 0 0 0; }
.lineup__item:first-child th:last-child { border-radius: 0 15px 0 0; }
.lineup__item:last-child td:first-child { border-radius: 0 0 0 15px; }
.lineup__item:last-child td:last-child { border-radius: 0 0 15px 0; }
.lineup__notes { margin: 0 30px 10px;  font-size: 18px; }
.lineup__btn { display: none; }

@media screen and (max-width: 900px) {
  .lineup__txt {  margin-bottom: 50px; } .lineup__txt .mb { display: none; }
  .lineup__btn { 
    display: flex; justify-content: space-around; position: relative; color: #5C8D89;
    font-size: 20px; align-items: center; display: block; top: -10px; left: 70%; font-size: 17px; width: 190px; 
  }
  .lineup__btn::after {
    content: ''; position: absolute; top: 40%; right: 1em; width: 85px; height: 2px; transition: 0.3s;
    background-color: #5C8D89; animation: scroll 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }
  .lineup__table { width: 100%; display: block; overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .lineup__notes { font-size: 16px; margin: 0; }
}

@media screen and (max-width: 580px) {
  .lineup__txt { text-align: center; font-size: 15px; margin-bottom: 30px; }
  .lineup__txt .mb { display: block; } 
  .lineup__btn { left: 70%; font-size: 11px; width: 140px;  }  .lineup__btn::after { width: 70px; }
  .lineup__item, th, td { font-size: 12px; padding: 5px 10px; }
  .lineup__notes { font-size: 10px; }
}

@media screen and (max-width: 480px) { 
  .lineup__btn { left: 72%; font-size: 11px; width: 100px;  } .lineup__btn::after { width: 40px; }
}


/* sv */
.sv {  
  background: url(../img/sv.jpg) no-repeat; width: 100%; height: 400px;
	background-position: center; background-size: cover; 
}

@media screen and (max-width: 580px) { .sv { height: 200px; } }


/* qa */
.qa__item { opacity : 0; transition : all .1s; }
.qa__item.active { opacity : 1; }

.qa__item-q {
  color: #fff; background: #5C8D89; font-size: 20px; z-index: 2;
	position: relative; padding: 17px; border-radius: 5px; cursor: pointer;
}

.qa__item-q::after {
	content: '+'; font-size: 30px; 
	position: absolute; top: 50%; right: 2.5%; transform: translateY(-50%);
}

.qa__list-num { font-weight: bold;  margin-right: 20px; }

.qa__item-a {
	height: 0; overflow: hidden; transition: .4s; font-size: 18px; margin-bottom: 12px; padding: 0 3% 0 7%; 
	color: #333; background: #F4F9F4; align-items: center; top: -2.1px; left: 3px; width: 99.5%;
  border: 1px solid #5C8D89; border-radius: 5px; z-index: 1; display: flex; position: relative; 
}

.open + .qa__item-a { height: 60px; }
.open::after { content: 'ー'; font-size: 20px; font-weight: bold; top: 53%; }

.qa__pdf {
  font-weight: bold; color: #0280ba; text-decoration: underline;
}

@media screen and (max-width: 1050px) { 
  .qa__item-q { font-size: 19px; }  .qa__item-q .mb { display: none; } }

@media screen and (max-width: 750px) {  
  .qa__item-q { font-size: 14px; }  
  .qa__item-a { font-size: 16px; left: 1.5px; top: -2.5px; width: 99%; }  .qa__item-q .mb { display: block; } 
}

@media screen and (max-width: 580px) { 
  .qa__item-q { font-size: 13px; padding: 5px; } .qa__item-q::after { font-size: 15px; right: 0.5%; }
  .qa__list-num { margin-right: 5px; }
  .qa__item-a { font-size: 13px; } 
  .open + .qa__item-a { height: 50px; } .open::after { font-size: 10px; right: 1%; }
}

@media screen and (max-width: 480px) { 
  .qa__item-q { font-size: 8px; }  .qa__item-a { font-size: 10px; } 
  .open + .qa__item-a { height: 35px; } .open::after { font-size: 10px; right: 1%; }
}


/* access */
.access { background-color: #74B49B; display: flex; justify-content: space-between; }
.access__map { width: 50%; }
.access__inner { width: 50%; margin: 0; padding: 100px 0; } 
.access__ttl { text-align: center; color: #fff; display: block; }
.access__content {  width: 470px; margin: 0 auto; }
.access__item-ttl { font-size: 30px; font-weight: bold; margin: 40px 0; }
.access__th, .access__td { border: none; font-size: 20px; text-align: left; padding: 0 0 20px; }
.access__th { padding-right: 30px; font-weight: bold; }
.access__td span { background: linear-gradient(transparent 60%, rgb(255, 255, 255, 0.5) 60%);   } 
.access__fb { width: 50px; margin-top: 20px; }
.access__fb:hover { opacity: 0.8; }

@media screen and (max-width: 1050px) {
  .access { display: block; }
  .access__map { width: 100%; height: 400px; margin-bottom: 20px; }
  .access__inner { width: 90%; margin: 0 auto; padding: 50px 0; } 
}

@media screen and (max-width: 480px) {
  .access__content {  width: 300px; margin: 0 auto; }
  .access__map { height: 300px; }
  .access__item-ttl { font-size: 20px; margin-bottom: 20px; }
  .access__th, .access__td { font-size: 12px; }
  .access__fb { width: 35px; }
}

/* footer */
.footer { padding: 20px 0; }
.footer__ttl { text-align: center; }
.footer__copyright { font-size: 8px; text-align: center; }

@media screen and (max-width: 480px) { .footer__ttl { font-size: 20px; } }