@charset "UTF-8";
/* CSS Document */


/* ////////////////////////////////////////////////////////////////////////////////

	Common

//////////////////////////////////////////////////////////////////////////////// */
@font-face {
  font-family: 'sns_ico';
  src:
    url('../fonts/sns_ico.ttf?z7sza2') format('truetype'),
    url('../fonts/sns_ico.woff?z7sza2') format('woff'),
    url('../fonts/sns_ico.svg?z7sza2#sns_ico') format('svg');
  font-weight: normal;
  font-style: normal;
}

i.snsIcon {
  font-family: 'sns_ico' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
	color: #000;
}

.icon-search:before { content: "\e908";}
.icon-arrow1_left:before { content: "\e90c";}
.icon-arrow1_bottom:before { content: "\e90d";}
.icon-arrow1_right:before { content: "\e90e";}
.icon-arrow1_top:before { content: "\e90f";}
.icon-arrow2_left:before { content: "\e910";}
.icon-arrow2_bottom:before { content: "\e911";}
.icon-arrow2_right:before { content: "\e912";}
.icon-arrow2_top:before { content: "\e913";}
.icon-link:before { content: "\e914";}
.icon-note:before { content: "\e915";}
.icon-ap:before { content: "\e900";}
.icon-blo:before { content: "\e901";}
.icon-fb:before { content: "\e902";}
.icon-hp:before { content: "\e903";}
.icon-in:before { content: "\e904";}
.icon-line:before { content: "\e905";}
.icon-spo:before { content: "\e906";}
.icon-tt:before { content: "\e907";}
.icon-yt:before { content: "\e909";}
.icon-x:before { content: "\e90a";}
.icon-wb:before { content: "\e90b";}
.icon-arrow3_top:before { content: "\ea3a";}
.icon-arrow3_right:before { content: "\ea3c";}
.icon-arrow3_bottom:before { content: "\ea3e";}
.icon-arrow3_left:before { content: "\ea40";}


html {
	scroll-behavior: smooth;
}
body {
  font-family: "LINE Seed JP", sans-serif;
	font-size: min(3.2vw, 14px);
	line-height: 1.8;
  letter-spacing: 0.08em;
	-webkit-text-size-adjust: 100%;
}

img {
	max-width: 100%;
	height: auto;
}
ul { list-style: none;}

.anim {
	opacity: 0;
	transition: all .6s ease-out;
}
.anim.on {
	opacity: 1;
}

@media screen and (min-width: 821px) {
	
	.sp { display: none;}
	
	a { transition: all 0.3s ease-out;}
	a:hover { opacity: 0.5;}
	
}
@media screen and (max-width: 820px) {
	
	.pc { display: none;}
	
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: min(6vw, 30px) min(6vw, 30px) 0;
}
header .hdrLogo {
  width: min(40vw, 320px);
  line-height: 0;
}
body:not(.page--home) .footer .pagetop {
  top: 0;
  right: 0;
}
body:not(.page--home) .footer .copyright {
  margin: 40px auto 70px 0;
}

.header .logo {
  margin: 0;
}
.header .logo a svg {
  fill: #fff;
}
.wovn-languages,
.drawer-visible .wovn-languages {
  z-index: 2000 !important;
  background: #f6fadf !important;
  right: 140px !important;
  top: 56px !important;
}


#mainVisual {
  background-color: #182b26;
  padding: min(30vw, 140px) 0 min(20vw, 140px);
  overflow: hidden;
  width: 100%;
}
#mainVisual h1 {
  width: min(72vw, 740px);
  line-height: 0;
  margin: 0 auto min(8vw, 30px);
}
#mainVisual .mainLead {
  color: #fff;
  text-align: center;
  margin-bottom: min(14vw, 100px);
  font-size: min(3.1vw, 16px);
  line-height: 2.4;
}
#mainVisual .mainLead span {
  display: inline-block;
  line-height: 1.4;
  vertical-align: bottom;
  width: 8.2em;
  margin: 0 0.7em;
}


.mainSlide {
  width: 820px;
  max-width: 76%;
  margin: 0 auto;
  overflow: visible;
  background-color: #f6fadf;
  border-radius: min(6vw, 40px);
}
.mainSlide .slick-list {
  overflow: visible;
}
.mainSlide .slideWrap {
  padding: min(5vw, 25px) min(5vw, 25px) min(7vw, 40px);
}
.mainSlide .slideWrap .slidePic {
  border-radius: min(4vw, 30px);
  overflow: hidden;
  margin-bottom: min(4vw, 20px);
}
.mainSlide .slideWrap .slidePic img {
  width: 100%;
  height: auto;
}
.mainSlide .slideWrap .slideTxt {
  padding: 0 min(6vw, 30px);
  color: #fff;
}
.mainSlide .slick-current .slideWrap .slideTxt {
  color: #182b26;
}
.mainSlide .slideWrap .slideTxt h3 {
  text-align: center;
  font-size: min(3.6vw, 20px);
  margin-bottom: min(2vw, 10px);
}
.mainSlide .slideWrap .slideTxt p {
  font-size: min(3vw, 16px);
}

.mainSlide .slick-prev,
.mainSlide .slick-next {
  background-color: #fff;
  width: min(8vw, 50px);
  height: min(8vw, 50px);
  border-radius: 50%;
  z-index: 800;
}
.mainSlide .slick-prev:before,
.mainSlide .slick-next:before {
  font-family: "LINE Seed JP", sans-serif;
  color: #002928;
  font-weight: 700;
}
.mainSlide .slick-prev {
  left: -65px;
}
.mainSlide .slick-next {
  right: -65px;
}


@media screen and (max-width: 820px) {
  
  body:not(.page--home) .header .logo {
    width: 150px;
    margin: 20px 0;
  }
  
  .wovn-languages,
  .drawer-visible .wovn-languages {
    right: 80px !important;
    top: 39px !important;
  }
  
  #mainVisual .mainLead {
    padding: 0 min(6vw, 60px);
    line-height: 2;
  }
  #mainVisual .mainLead span {
    line-height: 1;
  }
  
  .mainSlide .slideWrap .slideTxt {
    padding: 0;
  }
  
  .mainSlide .slick-prev {
    left: -10vw;
  }
  .mainSlide .slick-next {
    right: -10vw;
  }
  
  body:not(.page--home) .footer .copyright {
    margin-bottom: 30px;
  }
  
}


.contentWrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 min(6vw, 60px);
}
.contentWrap h2 {
  text-align: center;
  color: #fff;
  margin-bottom: min(6vw, 60px);
  letter-spacing: 0.1em;
  font-size: min(4.2vw, 24px);
}
.contentWrap h2::before {
  content: "";
  display: inline-block;
  background: url("../images/ico_apple.png") no-repeat center center / contain;
  width: 1.2em;
  aspect-ratio: 74 / 80;
  vertical-align: sub;
  margin-right: 0.6em;
}


@media screen and (max-width: 820px) {
  
  
}


#appDLstep {
  background-color: #182b26;
}

.stepAccordion {
  display: flex;
  margin-bottom: min(8vw, 70px);
  border-radius:  min(4vw, 20px);
  overflow: hidden;
  color: #002928;
}
.stepAccordion .stepCont {
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease-out;
}
.stepAccordion .stepCont.current {
  width: calc(100% - (70px * 5));
}

.stepAccordion .step01.stepCont,
.stepAccordion .step01 .stepTtlInr { background-color: #fff;}

.stepAccordion .step01.stepTtl::before,
.stepAccordion .step02.stepCont,
.stepAccordion .step02 .stepTtlInr { background-color: #f6fadf;}

.stepAccordion .step02.stepTtl::before,
.stepAccordion .step03.stepCont,
.stepAccordion .step03 .stepTtlInr { background-color: #d1ee9c;}

.stepAccordion .step03.stepTtl::before,
.stepAccordion .step04.stepCont,
.stepAccordion .step04 .stepTtlInr { background-color: #bce670;}

.stepAccordion .step04.stepTtl::before,
.stepAccordion .step05.stepCont,
.stepAccordion .step05 .stepTtlInr { background-color: #90c31f;}

.stepAccordion .stepCont .stepContInr {
  padding: min(6vw, 30px);
}
.stepAccordion .stepCont .stepTxt {
  margin-bottom: min(8vw, 60px);
}
.stepAccordion .stepCont h4 {
  font-size: min(4vw, 18px);
  font-weight: bold;
  margin-bottom: min(4vw, 20px);
}
.stepAccordion .stepCont p {
  font-weight: 600;
}

.stepAccordion .stepTtl {
  width: 70px;
  position: relative;
  cursor: pointer;
}
.stepAccordion .stepTtl::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.stepAccordion .stepTtl .stepTtlInr {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: min(6vw, 30px) 0;
  border-radius: 0 min(4vw, 20px) min(4vw, 20px) 0;
  position: relative;
  z-index: 1;
}
.stepAccordion .stepTtl .stepNum {
  font-size: min(3.4vw, 16px);
  font-weight: bold;
}
.stepAccordion .stepTtl .stepNum span {
  font-size: min(5.6vw, 30px);
  font-weight: 900;
  line-height: 1;
  display: inline-block;
  margin-top: 0.2em;
  height: 1em;
  text-align: center;
}

.stepAccordion .stepTtl .stepBtn {
  width: min(8vw, 35px);
  aspect-ratio: 1/1;
  background-color: #182b26;
  position: relative;
  border-radius: 50%;
}
.stepAccordion .stepTtl .stepBtn::before,
.stepAccordion .stepTtl .stepBtn::after {
  content: "";
  background-color: #fff;
  width: 50%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.stepAccordion .stepTtl .stepBtn::after {
  transition: all 0.3s ease-out;
  transform: translate(-50%, -50%) rotate(90deg);
}
.stepAccordion .stepTtl.current .stepBtn::after {
  transform: translate(-50%, -50%) rotate(0deg);
}



#appDLstep h3 {
  text-align: center;
  color: #fff;
  font-size: min(3.6vw, 18px);
  font-weight: bold;
  margin-bottom: min(6vw, 30px);
}
#appDLstep .device {
  display: flex;
  border: #fff solid 1px;
  border-radius: min(2vw, 10px);
}
#appDLstep .device .deviceWrap {
  padding: min(6vw, 30px);
  width: 50%;
  color: #fff;
}
#appDLstep .device .deviceWrap:nth-child(2) {
  background-color: rgba(255,255,255,0.10);
}
#appDLstep .device .deviceWrap h4 {
  text-align: center;
  font-size: min(3.4vw, 16px);
  margin-bottom: min(4vw, 20px);
}
#appDLstep .device .deviceWrap p {
  font-size: min(3.2vw, 14px);
}
#appDLstep .device .deviceWrap ul {
  list-style: disc;
  padding-left: min(4vw, 20px);
}



@media screen and (min-width: 821px) {

  .stepAccordion .stepTtl .stepNum {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  }
  
}
@media screen and (max-width: 820px) {
  
  .stepAccordion {
    flex-direction: column;
  }
  .stepAccordion .stepCont {
    width: 100%;
  }
  .stepAccordion .stepCont.current {
    width: 100%;
    height: auto;
  }
  .stepAccordion .stepCont .stepContInr {
    width: 100%;
  }
  
  .stepAccordion .stepTtl {
    width: 100%;
  }
  .stepAccordion .stepTtl .stepTtlInr {
    flex-direction: row;
    padding: min(3vw, 15px) min(6vw, 30px);
    border-radius: 0 0 min(4vw, 20px) min(4vw, 20px);
  }

  
  
  #appDLstep .device {
    flex-direction: column;
  }
  #appDLstep .device .deviceWrap {
    width: 100%;
  }
  
  
}

#appDL {
  background-color: #182b26;
  padding: min(14vw, 80px) 0;
}
#appDL h2 {
  margin-bottom: min(5vw, 25px);
}
.appDLBox {
  background-color: #90c31f;
  border-radius: min(4vw, 20px);
  padding: min(6vw, 30px);
}
.appDLBox .appDLlogo {
  width: 400px;
  max-width: 70vw;
  margin: 0 auto min(3vw, 15px);
  line-height: 0;
}
.appDLBox .dlBtn {
  width: min(40vw, 200px);
  margin: 0 auto;
  line-height: 0;
}

@media screen and (max-width: 820px) {
  
  
  
}

#faq {
  padding: min(10vw, 80px) 0;
}
#faq h2 {
  color: #002928;
}

.faqWrap {
  background-color: #f0f3de;
  margin-bottom: min(4vw, 20px);
  border-radius: min(4vw, 20px);
  overflow: hidden;
}
.faqWrap dt {
  padding: min(3vw, 15px) min(13vw, 70px) min(3vw, 15px) min(13vw, 70px);
  font-size: min(3.4vw, 16px);
  font-weight: bold;
  color: #002928;
  position: relative;
}
.faqWrap dt span {
  display: block;
  position: absolute;
  background-color: #002928;
  border-radius: 50%;
  top: 50%;
  right: min(4vw, 20px);
  width: min(6vw, 34px);
  aspect-ratio: 1/1;
  transform: translateY(-50%);
}
.faqWrap dt span::before,
.faqWrap dt span::after {
  content: "";
  display: block;
  background-color: #fff;
  width: 40%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.faqWrap dt span::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: all 0.3s ease-out;
}
.faqWrap dt.on span::after {
  transform: translate(-50%, -50%) rotate(0deg);
}


.faqWrap dt::before {
  content: "Q";
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #002928;
  border-radius: 50%;
  position: absolute;
  top: min(3vw, 15px);
  left: min(4vw, 20px);
  width: min(6vw, 32px);
  aspect-ratio: 1/1;
  font-size: min(3.4vw, 16px);
}
.faqWrap dd {
  padding: min(6vw, 30px) min(6vw, 30px) min(6vw, 30px) min(13vw, 70px);
  position: relative;
  display: none;
  border-top: #002928 solid 1px;
}
.faqWrap dd::before {
  content: "A";
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #90c31f;
  border-radius: 50%;
  position: absolute;
  top: min(5vw, 25px);
  left: min(4vw, 20px);
  width: min(6vw, 32px);
  aspect-ratio: 1/1;
  font-size: min(3.4vw, 16px);
}
.faqWrap dd p {
  color: #002928;
}
.faqWrap dd p + p {
  margin-top: min(3vw, 15px);
}
.faqWrap dd p a {
  color: #002928;
  text-decoration: underline;
  word-break: break-all;
}


.faqBtn {
  display: flex;
  justify-content: center;
  margin-top: min(8vw, 60px);
}
.faqBtn a {
  display: block;
  text-align: center;
  background-color: #002928;
  color: #fff;
  text-decoration: none;
  border-radius: 100px;
  padding: min(4vw, 20px);
  width: min(60vw, 260px);
}

@media screen and (max-width: 820px) {
  
  
}



footer {
  padding: min(8vw, 60px) min(6vw, 60px);
}
footer .copyright {
  text-align: center;
  font-size: min(2.8vw, 10px);
}