@charset "utf-8";
/* CSS Document */
:root {
  --spaceSSS: 10px;
  --spaceSS: 20px;
  --spaceS: 30px;
  --spaceM: 60px;
  --spaceL: 120px;
  --spaceLL: 220px;
  --green: #468d48;
  --yellow: #f8eedb;
  --fzS: 20px;
  --fzM: 24px;
  --fzL: 40px;
  --fwB: 600;
  --fwBB: 800;
  --kadomaruS: 10px;
  --kadomaruM: 15px;
  --kadomaruL: 1000px;
  --borderG: 4px #468d48 solid;
  --borderD: 10px #468d48 dotted;
  --borderD2: 5px #468d48 dotted;
  --pointM: 0 0 -20px;
  --boxsha: 0 10px 0 0 rgb(70 141 72 / 30%);
  --boxsha2: 0 10px 0 0 #c7ddc8;
  --icImg: url(../img/ic1.png) no-repeat center center / 70% 70%;
  --icSize: 70px;
}
/*windows*/
.no-hiragino:root {
  --fzS: 18px;
  --fzM: 22px;
  --fzL: 38px;
  --fwB: bold;
  --fwBB: bold;
}
.no-hiragino  .slickItem p,
.no-hiragino #aboutArea dt,
.no-hiragino #workingArea dt {
    -webkit-text-stroke: 1px var(--green);
  }
/*windows*/

main * {
  list-style-type: none;
  box-sizing: border-box;
  font-size: var(--fzS);
  font-weight: normal;
}
.header, .footer {
  margin: 0;
}
.header__contents,.header__subContents,.header .headerMenu__list,.footer__contents {
  max-width: 100%;
}
[data-role="header"] {background: var(--green);}
.sitemap {
  display: none;
}
.pcOnly {display: inline-block;}
.spOnly {display: none;}
main {
  font-family: 'ヒラギノ角ゴシック','Hiragino Sans',arial, Meiryo, 'Yu Gothic', sans-serif!important;
  color: #000;
  line-height: 1.4;
  overflow: hidden;
  text-align: center;
  font-feature-settings: "palt";
}
main a:hover, main a:hover img {
  opacity: 1;
  text-decoration: none!important;
}
main button {
  background: none;
  border: none;
}
main img {
  width: 100%;
  max-width: fit-content;
  vertical-align: bottom;
}
main > section:not(#mvArea) {
  position: relative;
  padding: var(--spaceL) 0;
}
main > section:last-of-type:not(#mvArea)  {
  padding-bottom: 1px;
}
main > section:not(#mvArea):before {
  position: absolute;
  content: "";
  top: -50px;
  left: 0;
  right: 0;
  margin: auto;
  width: 80px;
  height: 80px;
  border-radius: var(--kadomaruM);
  transform: rotate(45deg);
}
main > section:nth-of-type(even):before {background-color: var(--yellow);}
main > section:nth-of-type(odd):before {background-color: #FFF;}
#packageArea:before {background: linear-gradient(135deg, transparent 43%, #468d48 50%)!important;}

main section h3 {
  margin-bottom: var(--spaceM);
}
.w1020 {
  max-width: 1020px;
  margin: auto;
}
.w820 {
  max-width: 820px;
  margin: auto;
}
.dispNone {
  display: none;
}
.flex_box {
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
/* ---mvArea--- */
#mvArea {
  position: relative;
}
#mvArea h2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.mainImage {
  background-color: var(--green);
}
.mainImage .off {display: none;}
.mainImage .on {display: block;}
.afterImage.on {
  position: relative;
}
.afterImage.on:before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("../img/mvDotted_pc.gif") no-repeat top center / auto 100%;
}
.toggleBtn {
  display: flex;
  align-items: center;
  position: relative;
  margin: var(--spaceSS) auto;
  width: 500px;
  height: 100px;
  border-radius: var(--kadomaruL);
  background: url(
  "../img/toggleBg_pc.png") no-repeat center center / auto 100px,#dfdfdf;
  cursor: pointer;
  border: var(--borderG);
  box-sizing: border-box;
}
/*ボタン*/
.toggleBtn::before {
  position: absolute;
  right: -4px;
  width: calc(50% + 4px);
  height: 100%;
  border-radius: var(--kadomaruL);
  background-color: var(--green);
  content: '';
  transition: right .4s;
}
.toggleBtn:has(:checked)::before {
  right: 50%;
}
/*テキスト*/
.toggleBtn::after {
  position: absolute;
  content: "";
  right: 5%;
  transition: right .4s ease-out;
  width: 40%;
  height: 100%;
  background: url("../img/after.png") no-repeat center center / 100% auto;
}
.toggleBtn:has(:checked)::after {
  background-image: url("../img/before.png");
  right: 55%;
}
.toggleBtn input {
  display: none;
}
/* ---leadArea--- */
#leadArea {
  position: relative;
  z-index: 2;
  padding: var(--spaceS);
  color: var(--green);
  background: var(--yellow);
}
#leadArea * {
  font-weight: var(--fwB);
}
/* ---aboutArea--- */
#aboutArea {
  background: 
    url("../img/bgimage2.jpg") no-repeat calc(50% - 670px) center/ 470px auto,
    url("../img/bgimage1.jpg") no-repeat calc(50% + 670px) 20%/ 470px auto,
    url("../img/bgimage3.jpg") no-repeat calc(50% + 670px) 84%/ 470px auto,
    var(--green);
}
#aboutArea h3 {
  margin-bottom: var(--spaceS)
}
#aboutArea h3+p{
  color: #FFF;
}
#aboutArea dt,#aboutArea dd {
  border: var(--borderG);
  border-radius: var(--kadomaruM);
  text-align: left;
}
#aboutArea dt,#aboutArea dd span {
  font-size: var(--fzM);
  font-weight: var(--fwB);
  color: var(--green);
}
#aboutArea dt {
  position: relative;
  margin: var(--pointM);
  margin-top: var(--spaceSS);
  width: 180px;
  text-align: center;
  border-bottom-left-radius: 0;
  padding: var(--spaceSSS) var(--spaceS);
  background: var(--yellow);
  z-index: 2;
  font-weight: var(--fwBB);
}
#aboutArea dd {
  padding: var(--spaceS);
  background: #FFF;
}
#aboutArea .flex_box {
  flex-direction: row-reverse;
}
.bgimage {
  width: 24%;
  margin-right: auto;
}
.bgimage:first-child figure:first-child {
  margin-bottom: var(--spaceM);
}
.bgimage:last-child {
  margin-left: auto;
  margin-right: 0;
}

/* ---packageArea--- */
#packageArea  {
  background: var(--yellow);
}
.slickItem .flex_box {
  justify-content: space-evenly;
}
.slickItem p {
  width: 450px;
  font-size: var(--fzL);
  color: var(--green);
  font-weight: var(--fwBB);
}
.slickItem p img {
  margin-top: var(--spaceSSS)
}
.slickItem ul li {
  width: 480px;
  height: 100px;
  margin-bottom: var(--spaceSS);
  background: var(--green);
  box-shadow: var(--boxsha);
  border: var(--borderG);
  overflow: hidden;
  border-radius: var(--kadomaruM);
  cursor: pointer;
}
.slickItem ul li:last-of-type {
  margin-bottom: 0;
}
.slickItem ul span {
  margin: 0 auto;
  font-size: var(--fzM);
  font-weight: var(--fwB);
  color: #FFF;
}
.slickItem ul img {
  width: 40%;
}
/* ---slickBox--- */
.slick-prev,.slick-next,.slick-dots li,.slick-dots li button {font-size: 0;cursor: pointer;}
.slickBox {
  padding-bottom: var(--spaceSS);
}
.slickItem {
  width: 1020px;
  margin: 0 15px;
  padding: var(--spaceM) 0;
  background: #FFF;
  border-radius: var(--kadomaruM);
  border: var(--borderG);
}
.slick-dots {
  display: flex!important;
  justify-content: center;
  margin-top: var(--spaceM);
}
.slick-dots li {
  margin: 0 20px;
}
.slick-dots li button:before {
  content: '';
  display: block;
  border: var(--borderG);
  border-radius: var(--kadomaruL);
  opacity: 1;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  box-shadow: var(--boxsha);
  background: #FFF;
}
.slick-dots li.slick-active,
.slick-dots li.slick-active button{
  cursor: auto;
}
.slick-dots li.slick-active button:before {
  background: var(--green);
  opacity: 1;
}
.slick-dots li,.slick-dots li button {
  height: 28px;
}

.slick-prev,.slick-next {
  position: absolute;
  bottom: 0;
  margin: auto;
  right: 0;
  width: var(--icSize);
  height: var(--icSize);
  z-index: 10;
}
.slick-prev {left: -300px;}
.slick-next {left: 300px;}

.slick-prev:before,.slick-next:before {
  display: block;
  content: "";
  width: var(--icSize);
  height: var(--icSize);
  background: var(--icImg);
  background-color: var(--green);
  border-radius: var(--kadomaruS);
  box-shadow: var(--boxsha);
  opacity: 1;
}
.slick-next:before {transform: scale(-1, 1);}
/* ---modal--- */
.modalArea {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 70%);
  z-index: 100;
}
.open {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modalArea:before {
  position: absolute;
  display: block;
  content: "";
  width: var(--icSize);
  height: var(--icSize);
  background: var(--icImg);
  background-color: var(--green);
  background-image: url(../img/ic3.png);
  border-radius: var(--kadomaruS);
  box-shadow: var(--boxsha2);
  top: 0;
  bottom: 520px;
  margin: auto;
  right: calc(50% - 339px);
  cursor: pointer;
}
.modalImg {
  border: var(--borderG);
  border-radius: var(--kadomaruM);
  overflow: hidden;
}
/* ---attachmentArea --- */
#attachmentArea ol {
  position: relative;
  justify-content: space-between;
}
#attachmentArea ol:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0px;
  border-top: var(--borderD);
}
#attachmentArea ol li {
  display: flex;
  justify-content: center;
  width: 190px;
  height: 190px;
  border: var(--borderG);
  border-radius: var(--kadomaruM);
  font-weight: var(--fwB);
  font-size: var(--fzM);
  color: var(--green);
  position: relative;
  background: var(--yellow);
  align-items: center;
}
#attachmentArea ol li:first-of-type {
  background: var(--green);
  border: none;
  box-shadow: var(--boxsha);
}
#attachmentArea ol li a {
  width: 100%;
  height: 100%;
  padding: var(--spaceSS) 0;
  position: relative;
  border-radius: var(--kadomaruM);
  color: #FFF;
  font-size: var(--fzM);
  font-weight: var(--fwB);
}
#attachmentArea ol li a:before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: var(--icSize);
  height: var(--icSize);
  background: var(--icImg);
  background-image: url("../img/ic2.png");
  border-radius: 10px;
}
/* ---workingArea--- */
#workingArea {
  background: var(--yellow);
}
#workingArea dl {
  width: calc(100%/3);
  margin-right: var(--spaceS);
}
#workingArea dl:last-of-type {margin-right: 0;}
#workingArea dt,#workingArea dd  {
  color: var(--green);
  font-weight: var(--fwB);
  font-size: var(--fzM);
  border-radius: var(--kadomaruM);
  border: var(--borderG);
}
#workingArea dt {
  position: relative;
  margin: var(--pointM);
  width: 180px;
  border-bottom-left-radius: 0;
  padding: var(--spaceSSS) 0;
  background: var(--yellow);
  z-index: 2;
  font-weight: var(--fwBB);
}
#workingArea dd {
    padding: var(--spaceS) 0 0;
    background: #FFF;
    overflow: hidden;
}
#workingArea dd img {
  width: 101%;
  margin-top: var(--spaceSSS);
  border-top: var(--borderG);
}
/* ---workingArea--- */
#chooseArea dt {
  margin: var(--spaceM) 0 var(--spaceSSS);
  padding-bottom: var(--spaceSSS);
  font-size: var(--fzM);
  font-weight: var(--fwB);
  color: var(--green);
  border-bottom: var(--borderD2);
}
#chooseArea dd {
  text-align: left;
}
/* ---searchArea--- */
#searchArea {
  background: var(--yellow);
}
#searchArea a {
  display: block;
  position: relative;
  margin-right: var(--spaceS);
  padding: var(--spaceSS) var(--spaceM) var(--spaceSS) var(--spaceSS);
  background: var(--green);
  box-shadow: var(--boxsha);
  color: #FFF;
  border-radius: var(--kadomaruM);
  font-size: var(--fzM);
  font-weight: var(--fwB);
}
#searchArea li:last-of-type a {
  margin-right: 0;
}
#searchArea li {width: 100%;}
#searchArea a:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: var(--spaceSSS);
  width: var(--icSize);
  height: var(--icSize);
  background: var(--icImg);
  background-image: url(../img/ic2.png);
}
/* ---movieArea --- */

#movieArea h3 {
  margin-bottom: var(--spaceS)
}
#movieArea h3+p {
  margin-bottom: var(--spaceM)
}
.movieBox li {
  color: var(--green);
}
.movieBox li:first-of-type {
  margin-right: var(--spaceM);
}
.movieBox li p {
  margin-bottom: var(--spaceSSS);
  font-size: var(--fzM);
  font-weight: var(--fwB);
}
.movieBox li a {
  display: block;
  overflow: hidden;
  border: var(--borderG);
  border-radius: var(--kadomaruM);
  box-shadow: var(--boxsha);
}
.movieBox li a img {
  width: 101%;
}
.offer {
  margin: var(--spaceM) auto 0;
}
.sns {
  margin: var(--spaceS) auto var(--spaceM);
  width: 300px;
  justify-content: space-between;
}
/*followBtn*/

.followBtn {
  position: fixed;
  bottom: 50px;
  right: -800px;
  left: 0;
  margin: auto;
  width: 250px;
  height: 215px;
  display: flex;
  justify-content: center;
  z-index: 20;
  opacity: 0;
  transition: opacity .3s;
}
.followBtn.show {
  opacity: 1;
}
.followBtn a {
  width: 100%;
  position: relative;
  border: var(--borderG);
  border-width: 8px;
  color: #FFF;
  font-weight: bold;
  border-radius: 22px;
  padding: var(--spaceSS) 0;
  font-size: var(--fzM);
  box-shadow: var(--boxsha2);
  background: var(--green);
  pointer-events: none;
}
.followBtn.show a {
  pointer-events:auto;
}
.followBtn a:before,.followBtn a:after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
}
.followBtn a:before { 
  width: var(--icSize);
  height: var(--icSize);
  bottom: 4px;
  background: var(--icImg);
  transform: rotate(-90deg);
}
.followBtn a:after {
  width: 100%;
  height: 100%;
  bottom: 0;
  border-radius: var(--kadomaruM);
  box-shadow: 0 0 0 4px var(--yellow);
}


/* ---slick-slide--- */
.slick-slide {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity .3s;
}
.slick-center {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .3s;
}

/* ---scroll--- */
main section:nth-child(n+2) .js-scroll {
  transition: all, opacity .75s cubic-bezier(0.5, 0, 0, 1) 0.3s, transform .75s cubic-bezier(0.5, 0, 0, 1) 0.3s;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 15, 0, 1);
  transition-timing-function: ease-in-out;
  opacity: 0;
}
main section:nth-child(n+2) .is-active {
  opacity: 1;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}



/* ---SPタブレット--- */

@media screen and (max-width: 1030px) {
/*all*/
  .w820,.w1020 {max-width: 670px;}
  .pcOnly {display: none;}
  .spOnly {display: inline-block;}
  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, mark, audio, video {
    font-family: 'ヒラギノ角ゴシック','Hiragino Sans',arial, Meiryo, 'Yu Gothic', sans-serif!important;
  }
  :root {
  --spaceSS: 14px;
  --spaceS: 20px;
  --spaceM: 42px;
  --spaceL: 80px;
  --spaceLL: 154px;
  --fzS: 14px;
  --fzM: 17px;
  --fzL: 27px;
  --borderG: 3px #468d48 solid;
  --borderD: 5px #468d48 dotted;
  --borderD2: 5px #468d48 dotted;
  --icSize: 50px;
}
  /*windows*/
.no-hiragino:root {
  --fzS: 14px;
  --fzM: 17px;
  --fzL: 25px;
}
/*windows*/
  main > section:not(#mvArea):before {
    top: -40px;
    border-radius: var(--kadomaruS);
    width: 60px;
    height: 60px;
  }
  main > section:not(#mvArea):not(#packageArea),#packageArea h3 {
    padding-left: var(--spaceS);
    padding-right: var(--spaceS);
  }
  .afterImage.on:before {
    background-image: url("../img/mvDotted_sp.gif");
  }
  .toggleBtn {
    max-width: 341px;
    width: calc(100% - 40px);
    height: 70px;
    background: url("../img/toggleBg_sp.png") no-repeat center center / 100% auto,#dfdfdf;
  }
  #leadArea,h3+p {text-align: left;}
  
  #aboutArea .flex_box,
  .slickItem > .flex_box,
  #attachmentArea ol,
  #workingArea .flex_box,
  #searchArea .flex_box,
  .movieBox {
    display: block;
  }
 #aboutArea .flex_box > *,
  #attachmentArea ol > *,
  #workingArea .flex_box > *,
  #searchArea .flex_box > *,
  .movieBox > * {
    width: 100%!important;
  }
  
  #aboutArea {
  padding-bottom: 320px!important;
  background: 
    url("../img/bgimage1.jpg") no-repeat left -30px bottom var(--spaceM) / auto 240px,
    var(--green);
  }
  .modalImg {
    margin-left: var(--spaceS);
    margin-right: var(--spaceS);
  }
  .modalArea:before {
    bottom: 340px;
    right: 20px;
  }
  .slick-dotted.slick-slider {
    margin-bottom: 0!important;
  }
  .slickItem {
    width: 335px;
    margin: 0 5px;
    padding: var(--spaceS) 0;
  }
  .slickItem p,
  .slickItem ul li {
    width: calc(100% - 30px);
    margin: 0 auto var(--spaceS);
  }
  .slickItem ul li {
    height: auto;
  }
  .slickItem ul span {
    font-size: var(--fzS);
  }
  #attachmentArea ol:before {
    width: 0;
    height: 360px;
    top: 1px;
    right: 0;
    left: 0;
    margin: auto;
    border-top: 0;
    border-left: var(--borderD);
  }
  #attachmentArea ol li, #attachmentArea ol li a {
    width: 100%;
    height: auto;
    padding: var(--spaceS) 0;
  }
  #attachmentArea ol li {
    margin-top: var(--spaceM);
  }
  #attachmentArea ol li:first-of-type {
    padding: 0;
  }
  #attachmentArea ol li:first-of-type a {
    padding-right: 40px;
  }
  #attachmentArea ol li a:before {
    top: 0;
    left: auto;
    right: 2px;
  }
  #workingArea dl {
    margin-top: var(--spaceS);
  }
  #aboutArea dt,#workingArea dt {
    width: 130px;
  }
  #searchArea li {
    margin-top: var(--spaceS);
  }
  #searchArea a {
    margin-right: 0;
    padding: var(--spaceS) 0;
  }
  .movieBox li {
    margin-top: var(--spaceM);
  }
  .followBtn {
    left: -20px;
    right: auto;
    bottom: 20px;
    height: auto;
    width: 300px;
    text-align: left;
  }
  .followBtn a {
    padding: var(--spaceSSS) 0;
    padding-left: 35px;
  }
  .followBtn a:before {
    bottom: 0;
    top: 0;
    right: 0;
    left: auto;
  }
  .no-hiragino .followBtn {
    width: 320px;
  }
}

/* ---タブレット--- */
@media only screen and (min-width: 500px) and (max-width: 1030px) {
    .afterImage.on:before {
    background-image: url("../img/mvDotted_pc.gif");
  }
  #aboutArea {
  background: 
    url("../img/bgimage1.jpg") no-repeat left -30px bottom 9% / 33% auto,
    url("../img/bgimage3.jpg") no-repeat center bottom 9% / 33% auto,
    url("../img/bgimage2.jpg") no-repeat right -30px bottom 9% / 33% auto,
    var(--green);
  }
  .slickItem {
    width: 400px;
    margin: 0 20px;
  }
}
/* ---PConly--- */
@media only screen and (min-width: 1031px) {
/*aHover*/
.followBtn a,
#attachmentArea ol li:first-of-type,
.slickItem ul li,
.slick-prev:before, .slick-next:before,
.slick-dots li button:before,
#searchArea a,
.movieBox li a
  {transition: all .2s ease-out;}
  
.followBtn a:hover,
#attachmentArea ol li:first-of-type:hover,
.slickItem ul li:hover,
.slick-prev:hover:before, .slick-next:hover:before,
.slick-dots li:not(.slick-active) button:hover:before,
#searchArea a:hover,
.movieBox li a:hover
  {transition: all .2s ease-out;
  translate: 0 10px;
  box-shadow: none!important;
}
}
/* ---SPonly--- */
@media only screen and (max-width: 369px) {
.slick-prev {
    left: 10px;
    right: auto;
}
  .slick-next{
    right: 10px;
    left: auto;
  }
}