@charset "utf-8";

/* -----------------------------------------------------------
　common
----------------------------------------------------------- */

* {box-sizing: border-box;}
img {max-width: 100%;}
.fwbold {font-weight: bold;}
figure img {display: block;}

body {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  max-width: 600px;
  margin: 0 auto;
}
.pen {
  pointer-events: none;
  text-decoration: none;
  color: inherit;
}

@media screen and (max-width: 767px) {
  .pc_cont {display: none !important;}
}

@media screen and (min-width: 768px) {
  .sp_cont {display: none !important;}
}

main {
  display: block;
  width: 100%;
}
main article {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

aside {
  position: fixed;
  z-index: 10;
  inset: auto 0 0;
  width: 100%;
  max-width: 600px;
  margin: auto;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
  opacity: 0;
  transition: 1s 1s;
}
.loaded aside {opacity: 1;}
aside.hidden {opacity: 0;}
aside img {
  display: block;
  width: 100%;
}
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  background: url("../img/bg_footer.jpg") no-repeat center / cover;
}
footer > .box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 3svh 5%;
}
footer > .box:nth-of-type(1) {height: 65svh;}
footer > .box:nth-of-type(2) {
  height: 35svh;
  background: #476c3e;
}
footer > .box:nth-of-type(1) p {
  font-size: 3.6vw;
  text-align: center;
}
footer > .box:nth-of-type(1) p span {
  display: block;
  font-size: 1.2em;
  font-weight:700;
  color: #476c3e;
}
footer > .box:nth-of-type(1) dl {
  font-size: 3.6vw;
  line-height: 1.5;
  text-align: center;
  margin: 3svh auto 1svh;
} 
footer > .box:nth-of-type(1) dl a {color: inherit;text-decoration: none;}
footer > .box:nth-of-type(1) dl dd span {
  display: block;
  font-size: 2.7em;
  font-weight: 700;
}
footer > .box:nth-of-type(1) dl dd span::before {
  display: inline-block;
  vertical-align: middle;
  content: "";
  width: 1em;
  height: 1em;
  margin: 0 0.25em 0.2em 0;
}
footer > .box:nth-of-type(1) dl:nth-of-type(1) dd span::before {background: url("../img/ico_tel.svg") no-repeat center / contain;}
footer > .box:nth-of-type(1) dl:nth-of-type(2) dd span::before {background: url("../img/ico_fax.svg") no-repeat center / contain;}
footer ul {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5dvh auto;
}
footer ul li {
  width: 8vw;
  margin: 0 2vw;
}
footer ul li img {
  display: block;
  width: 100%;
}
footer .logo {
  width: 60vw;
  margin: 0 auto;
}
footer .logo img {width: 100%;}
footer .logo + p {
  color: #FFFFFF;
  font-size: 3.2vw;
  text-align: center;
}
footer .copyright {
  color: #FFFFFF;
  font-size: 3vw;
  text-align: center;
}

.scrollify {
  width: 100%;
  height: 100svh;
  padding: 0 0 14.67vw;
  overflow: hidden;
}
.scrollify.based {padding: 0;}

/** heading_area **/

.heading_area {
  position: relative;
  z-index: 0;
  opacity: 0;
  transition: 1s 1s;
}
.loaded .heading_area {opacity: 1;}
.heading_area .logo {
  position: absolute;
  z-index: 2;
  width: 55%;
  inset: 2% auto auto 4%;
}
.heading_area .kv {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.heading_area .kv::after {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  display: block;
  content: "";
  width: 100%;
  height: 40%;
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
}
.heading_area .kv > p {
  position: absolute;
  z-index: 2;
}
.heading_area .kv > .catch01 {
  width: 50%;
  inset: 0 0 auto auto;
}
.heading_area .kv > .catch02 {
  width: 16%;
  inset: 8% auto auto 5%;
}
.heading_area .kv > .kv_bottom {
  width: 94%;
  inset: auto 0 9.5% auto;
  margin: auto;
}
.heading_area .kv > .kv_bottom img {width: 100%;}
.heading_area .kv > .scroll {
  width: 7%;
  inset: auto 0 10%;
  margin: auto;
}
.heading_area .kv .slider {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.5s;
}
.heading_area .kv .slider.slick-initialized {opacity: 1;}
.heading_area .kv .slider .slick-list {height: 100%;}
.heading_area .kv .slider .slick-track {height: 100%;}
.heading_area .kv .slider .slick-slide {
  width: 100%;
  height: 100%;
}
.heading_area .kv .slider .slick-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/** lead_section **/

.lead_section {
  position: relative;
  background: url("../img/bg_lead_section.jpg") no-repeat center / cover;
}
.lead_section .box {
  display: flex;
  flex-wrap: wrap;
  height: 75%;
  padding: 1.5svh 7% 5svh;
}
.lead_section .box > p {
  width: 100%;
  max-width: 320px;
  margin: 0 auto 1.5svh;
}
.lead_section .box > p:nth-last-of-type(1) {margin: 0 auto;}
.lead_section .box > p img {
  display: block;
  width: 100%;
  max-height: 21svh;
  margin: 0 auto;
}
.lead_section .lead_bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 25%;
  text-align: center;
  background: #476c3e;
  padding: 5% 0 25%;
}
.lead_section .lead_bottom::before ,
.lead_section .lead_bottom::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: "";
  width: 150%;
  height: 60%;
  background: #476c3e;
  pointer-events: none;
  margin: auto;
  inset: 0 -200% auto;
}
.lead_section .lead_bottom::before {transform: rotate(12deg);}
.lead_section .lead_bottom::after {transform: rotate(-12deg);}
.lead_section .lead_bottom p {
  color: #FFFFFF;
  font-size: min(20px,4.8vw);
  font-weight: 500;
  margin: 0 auto;
}
.lead_section .lead_bottom p span {
  display: block;
  width: 90%;
  max-width: 300px;
  margin: 2% auto 0;
}
.lead_section .lead_bottom p span img {
  display: block;
  width: 100%;
}

/** feature **/

.feature01,.feature03 {background: url("../img/bg_feature0102.png") no-repeat top left / 100%,url("../img/bg_feature01.jpg") no-repeat top left / cover;}
.feature02 {background: url("../img/bg_feature0202.png") no-repeat top left / 100%,url("../img/bg_feature02.jpg") no-repeat top left / cover;}

.feature .box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  height: 100%;
  padding: 7%;
}
.feature.feature02 .box {align-items: flex-end;}
.feature .box h2 {
  width: 30%;
  max-height: 15svh;
  margin: 0 0 3svh;
}
.feature .box h2 img {height: 100%;}

.feature .box > div {width: 93vw;}
.feature .box figure {
  position: relative;
  z-index: 0;
  margin: 0 0 4svh;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
}
.feature .box figure > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature .box figure figcaption {
  position: absolute;
  z-index: 2;
}
.feature.feature01 .box figure figcaption {
  width: 55%;
  inset: auto 5% 45% auto;  
}
.feature.feature02 .box figure figcaption {
  width: 32%;
  inset: auto auto 45% 5%;  
}
.feature.feature03 .box figure figcaption {
  width: 63%;
  inset: auto 3% 80% auto;  
}

@media screen and (max-height: 580px) {
  .feature.feature01 .box figure {height: 36svh;}
  .feature.feature02 .box figure {height: 36svh;}
  .feature.feature03 .box figure {height: 43svh;}
  .feature.feature03 .box figure > img {object-position: bottom;}
  .feature.feature01 .box figure figcaption {width: 48%;inset: auto 5% 52% auto;}
  .feature.feature02 .box figure figcaption {width: 30%;inset: auto auto 35% 5%;}
  .feature.feature03 .box figure figcaption {inset: auto 3% 80% auto;}
}

.feature .box figure figcaption img {width: 100%;}
.feature.feature01 .box figure::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 60%;
  height: auto;
  aspect-ratio: 205/ 145;
  inset: auto 1.5% 0 auto;
  background: url("../img/feature0102.jpg") no-repeat center / cover;
  transform: rotate(5deg);
  transform-origin: bottom left;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}
.feature.feature03 .box figure::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 25%;
  height: auto;
  aspect-ratio: 58/ 150;
  inset: auto auto -15% -8%;
  background: url("../img/feature0302.svg") no-repeat center / cover;
}
.feature .box p {
  font-size: 3.6vw;
  line-height: 1.6;
  padding: 0 7vw 0 0;
}
.feature.feature02 .box p {padding: 0 0 0 7vw;}
.feature .box p span {color: #b3392b;}

/** about **/

.about {background: url("../img/bg_about_sp.jpg") no-repeat bottom center / cover;}
.about .box {padding: 10% 7%;}
.about .box h2 {
  width: 80%;
  margin: 0 0 5%;
}
.about .box p {
  color: #FFFFFF;
  font-size: 4vw;
  line-height: 2.2;
}

/** product **/

.product {background: url("../img/bg_product.jpg") no-repeat center / cover;}
.product .box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  padding: 3.5svh 7% 0;
}
.product .box h2 {
  width: 100%;
  margin: 0 0 2.5svh;
}
.product .box h2 img {width: 100%;}
.product .box .product_list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.product .box .product_list li {width: 47%;}
.product .box .product_list li:nth-child(1) {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  padding: 0 0 2.25svh;
  margin: 0 0 2.2svh;
  border-bottom: solid 1px #c89d4a;
}
.product .box .product_list li figure {
  position: relative;
  z-index: 0;
  margin: 0 0 1.5svh;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}
.product .box .product_list li:nth-child(1) figure ,
.product .box .product_list li:nth-child(1) div {
  width: 47%;
  margin: 0;
}
.product .box .product_list li figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product .box .product_list li figure::before, 
.product .box .product_list li figure::after {
  position: absolute;
  display: block;
  content: "";
  z-index: 1;
  pointer-events: none;
}
.product .box .product_list li:nth-child(1) figure::before {
  width: 40%;
  aspect-ratio: 1 / 1;
  background: url("../img/ranking01.svg") no-repeat center / contain;
  inset: -7% auto auto -7%;
}
.product .box .product_list li:nth-child(1) figure::after {
  width: 70%;
  aspect-ratio: 111 / 106;
  background: url("../img/product01.png") no-repeat center / contain;
  inset: auto -20% -17% auto;
}
.product .box .product_list li:nth-child(2) figure::after {
  width: 80%;
  aspect-ratio: 121 / 107;
  background: url("../img/product02.png") no-repeat center / contain;
  inset: auto -25% -25% auto;
}
.product .box .product_list li:nth-child(3) figure::after {
  width: 80%;
  aspect-ratio: 126 / 105;
  background: url("../img/product03.png") no-repeat center / contain;
  inset: auto -20% -25% auto;
}
.product .box .product_list li p {width: 100%;}
.product .box .product_list li p:nth-of-type(1) {
  font-size: 3.6vw;
  line-height: 1.35;
  text-align: center;
  margin: 0 0 1.5svh;
}
.product .box .product_list li p:nth-of-type(2) {
  font-size: 4.4vw;
  line-height: 1;
  margin: 0 0 0.5svh;
}
.product .box .product_list li p:nth-of-type(2) span {
  font-size: 1.85em;
  font-weight: 500;
}
.product .box .product_list li p:nth-of-type(2) span::before {
  display: inline-block;
  vertical-align: middle;
  content: "";
  width: 1.1em;
  height: 1.1em;
  background: url("../img/ico_free.svg") no-repeat center / contain;
  margin: 0 0.1em 0.3em 0;
}
.product .box .product_list li p:nth-of-type(3) a {
  position: relative;
  z-index: 0;
  display: block;
  height: 100%;
  color: #FFFFFF;
  font-size: 3.4vw;
  padding: 0.75em 1em;
  text-decoration: none;
  background: #b3392b;
  border-radius: 99px;
}
.product .box .product_list li p:nth-of-type(3) a::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 0.9em;
  height: 0.9em;
  background: url("../img/ar_w.svg") no-repeat center / contain;
  margin: auto;
  inset: 0 0.75em 0 auto;
}
.product .box  > p {
  font-size: 3.8vw;
  margin: 1svh 0 0;
  text-align: center;
}
.product .box  > p a {color: #476c3e;}
.product .box  > p a::after {
  display: inline-block;
  vertical-align: middle;
  content: "";
  width: 1.1em;
  height: 1.1em;
  background: url("../img/ico_target.svg") no-repeat center / contain;
  margin: 0 0 0.25em 0.5em;
}

@media screen and (max-height: 580px) {
  .product .box {padding: 1.5svh 11% 0;}
  .product .box .product_list li figure {max-height: 25svh;}
  .product .box .product_list li:nth-child(1) figure {aspect-ratio: 5 / 4;}
  .product .box .product_list li:nth-child(1) figure img {object-position: bottom;}
  .product .box .product_list li:nth-child(2) figure img {object-position: center;}
  .product .box .product_list li:nth-child(3) figure img {object-position: top;}
  .product .box .product_list li p:nth-of-type(1) {font-size: 3.2vw;margin: 0;}
  .product .box .product_list li p:nth-of-type(2) {font-size: 4vw;margin: 0;}
}

/** service_section **/

.service_section {
  position: relative;
  z-index: 0;
  background: url("../img/bg_service.jpg") no-repeat center / cover;
}
.service_section::after {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  width: 96vw;
  aspect-ratio: 1 / 1;
  background: url("../img/service.png") no-repeat center / contain;
  inset: 15% 0 auto;
  margin: auto;
}
.service_section .box {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  padding: 3.5svh 7% 0;
}
.service_section .box h2 {
  position: relative;
  z-index: 0;
  font-size: 6.5vw;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1.5svh;
  padding: 0 0 0 0.5em;
}
.service_section .box h2::before {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  width: 5px;
  height: 1.1em;
  inset: 0.1em auto  0 0;
  margin: auto;
  background: #476c3e;
}
.service_section .box p {font-size: 3.7vw;}
.service_section .box figure {
  width: 100%;
  margin: 3svh auto 3.5svh;
}
.service_section .box figure img {
  display: block;
  width: 100%;
}
.service_section .service03 figure {width: 107%;}

@media screen and (max-height: 580px) {
  .service_section .box figure {width: 80%;}
  
}
/** voice **/

.voice {background: url("../img/bg_voice_sp.jpg") no-repeat bottom center / cover;}
.voice .box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  padding: 3.5svh 7% 0;
}
.voice .box h2 {width: 100%;}
.voice .box h2 img {
  display: block;
  width: 100%;
}
.voice .box ul {
  width: 100%;
  margin: 2svh 0 0;
}
.voice .box ul li {
  margin: 1.5svh 0 0;
}
.voice .box ul li img {
  display: block;
  width: 100%;
  margin: 0 auto;
  filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.2));
}

@media screen and (max-height: 580px) {
  .voice .box ul li img {width: 86%;}
}
  
/** before **/

.before {background: url("../img/bg_before.jpg") no-repeat center / cover;}
.before .box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  padding: 2.5svh 7% 0;
}
.before .box h2 {width: 100%;}
.before .box h2 img {
  display: block;
  width: 100%;
}
.before .box h3 {
  color: #FFFFFF;
  font-size: 4.6vw;
  font-weight: 500;
  padding: 0.25em;
  text-align: center;
  background: #c89d4a;
  margin: 3svh 0 1svh;
}
.before .box p {font-size: 3.8vw;}

@media screen and (max-height: 580px) {
  .before .box h3 {font-size: 4.2vw;}
  .before .box p {font-size: 3.4vw;}
}

/** faq **/

.faq {background: url("../img/bg_faq.jpg") no-repeat center / cover;}
.faq .box {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  padding: 3.5svh 7% 0;
}
.faq .box h2 {width: 100%;}
.faq .box h2 img {
  display: block;
  width: 100%;
}
.faq .box dl {margin: 2.5svh 0 0;}
.faq .box dl dt {
  position: relative;
  z-index: 0;
  font-size: 4.875vw;
  margin: 0 0 1.25svh;
  padding: 0 0 0 1.38em;
}
.faq .box dl dd {
  position: relative;
  z-index: 0;
  font-size: 3.75vw;
  padding: 0 0 0 1.8em;
}
.faq .box dl dt::before {
  position: absolute;
  z-index: 0;
  font-weight: 700;
  color: #c89d4a;
  content: "Q";
  inset: 0 auto auto 0;
  line-height: 1.5;
}
.faq .box dl dd::before {
  position: absolute;
  z-index: 0;
  font-weight: 700;
  color: #c89d4a;
  content: "A";
  font-size: 1.3em;
  inset: 0 auto auto 0;
  line-height: 1.2;
}

@media screen and (max-height: 580px) {
  .faq .box dl dt {font-size: 4.2vw;}
  .faq .box dl dd {font-size: 3.4vw;}
}

/** point **/

.point {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  background: url("../img/bg_point.jpg") no-repeat center / cover;
}
.point .box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: calc(100svh - 26.7vw);
  padding: 3.5svh 7% 1svh;
}
.point .box h2 {width: 100%;}
.point .box h2 img {
  display: block;
  width: 100%;
}
.point .box .movie_box {
  position: relative;
  z-index: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 3svh 0 2.5svh;
}
.point .box .movie_box iframe {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  inset: 0;
}
.point .box p {font-size: 3.6vw;}
.point .box .banner_second {
  width: 100%;
  margin: 4svh 0;
} 
.point .box .banner_second img {
  display: block;
  width: 100%;
}
.point > figure {width: 100%;}
.point > figure img {
  display: block;
  width: 100%;
}

@media screen and (max-height: 580px) {
  .point .box {padding: 3.5svh 12% 1svh;}
}



@media screen and (min-width: 768px) {
  
  a.hover {transition: 0.5s;}
  a.hover:hover {opacity: 0.5;}
  body {
    font-size: 16px;
    max-width: 100%;
  }
  .box {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
  }
  aside {
    inset: auto 20px 20px auto;
    width: 20%;
    max-width: 380px;
    box-shadow: none;
  }
  aside p img {filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));}
  footer > .box:nth-of-type(1) {
    height: calc(100svh - 270px);
    justify-content: center;
  }
  footer > .box:nth-of-type(2) {max-width: 100%;}
  footer > .box:nth-of-type(1) p {font-size: min(16px , 3.6vw);}
  footer > .box:nth-of-type(1) dl {font-size: min(16px , 3.6vw);} 
  footer > .box:nth-of-type(1) dl dd span {font-size: 2.4em;}
  footer ul li {
    width: 8vw;
    max-width: 50px;
    margin: 0 5%;
  }
  footer .logo {max-width: 270px;}
  footer .logo + p {font-size: min(14px , 3.2vw);}
  footer .copyright {font-size: min(14px , 3.2vw);}

  .scrollify {padding: 0;}

  /** heading_area **/

  .heading_area .logo {
    max-width: 360px;
    inset: 2.5% auto auto 2.5%;
  }
  .heading_area .kv > .catch01 {
    width: 30%;
    max-width: 320px;
    inset: 1% 3% auto auto;
  }
  .heading_area .kv > .catch02 {
    width: 10%;
    max-width: 100px;
    inset: 11% auto auto 3%;
  }
  .heading_area .kv > .kv_bottom {
    max-width: 600px;
    inset: auto auto 4% 3%;
  }
  .heading_area .kv > .scroll {
    width: 50px;
    inset: auto 0 3%;
  }

  /** lead_section **/

  .lead_section .box {
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 1.5svh 50px 5svh;
    max-width: 1300px;
  }
  .lead_section .box > p {
    width: 31%;
    max-width: 400px;
  }
  .lead_section .box > p img {max-height: none;}
  .lead_section .lead_bottom {padding: 5% 0;}
  
  .lead_section .lead_bottom::before ,
  .lead_section .lead_bottom::after {
    height: 200%;
  }
  
  .lead_section .lead_bottom p {font-size: min(24px,4.8vw);}
  .lead_section .lead_bottom p span {max-width: 400px;}

  /** feature **/

  .feature01,.feature03 {background: url("../img/bg_feature0102.png") no-repeat top left / 600px,url("../img/bg_feature01.jpg") no-repeat top left / cover;}
  .feature02 {background: url("../img/bg_feature0202.png") no-repeat top right / 600px,url("../img/bg_feature02.jpg") no-repeat top left / cover;}

  .feature .box {
    max-width: 1200px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 3% 7% 5%;
  }
  .feature.feature02 .box {align-items: center;}
  .feature .box h2 {
    width: 100%;
    margin: 0 0 1.5svh;
  }
  .feature .box h2 img {display: block;width: 160px;}
  .feature.feature02 .box h2 img {margin-left: auto;}
  .feature .box > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    width: 100%;
  }
  .feature.feature02 .box > div {flex-direction: row;}
  .feature .box figure {
    width: 48%;
    margin: 0;
  }
  .feature .box p {
    width: 48%;
    font-size: min(18px,3.6vw);
    line-height: 2;
    padding: 0;
  }
  .feature.feature02 .box p {padding: 0;}
  
  /** about **/

  .about {background: url("../img/bg_about.jpg") no-repeat bottom right / cover;}
  .about .box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    max-width: 1600px;
    height: 100%;
    padding: 7%;
  }
  .about .box h2 {
    width: 80%;
    max-width: 400px;
    margin: 0 0 2%;
  }
  .about .box p {font-size: min(21px,3.8vw);}

  /** product **/

  .product {display: flex;align-items: center;}
  .product .box {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    height: auto;
  }
  .product .box h2 {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 2.5svh;
  }
  .product .box .product_list {width: 100%;}
  .product .box .product_list li {width: 30%;}
  .product .box .product_list li:nth-child(1) {
    display: block;
    width: 30%;
    padding: 0;
    margin: 0;
    border: none;
  }
  .product .box .product_list li:nth-child(1) figure {
    width: 100%;
    aspect-ratio: 245 / 161;
    margin: 0 0 1.5svh;
  }
  .product .box .product_list li:nth-child(1) div {width: 100%;}
  .product .box .product_list li:nth-child(1) figure::after {inset: auto -25% -25% auto;}
  .product .box .product_list li p:nth-of-type(1) {font-size: min(18px,3.6vw);}
  .product .box .product_list li p:nth-of-type(2) {font-size: min(21px,3.9vw);}
  .product .box .product_list li p:nth-of-type(2) span::before {margin: 0 0.5em 0.3em 0;}
  .product .box .product_list li p:nth-of-type(3) a {font-size: min(18px,3.6vw);}
  .product .box  > p {
    width: 100%;
    font-size: min(21px,3.9vw);
  }

  /** service_section **/

  .service_section::after {
    width: 500px;
    inset: 15% 0 auto;
  }
  /*
  .service_section .box {
    flex-direction: row;
    flex-wrap: wrap;
  }*/
  .service_section .box section {width: 100%;}
  .service_section .box h2 {font-size: min(32px,4vw);}
  .service_section .box p {font-size: min(18px,3.6vw);}
  .service_section .box figure {
    width: 50%;
    margin: 3svh auto 5svh;
  }
  .service_section .service03 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .service_section .service03 h2 {width: 100%;}
  .service_section .service03 p {width: 48%;}
  .service_section .service03 figure {width: 48%;margin: 3svh 0;}
  .service_section .service03 .btn_cv {margin: 3svh auto 0;}

  /** voice **/
  
  .voice {background: url("../img/bg_voice.jpg") no-repeat center / cover;}
  .voice .box {
    max-width: 1300px;
    padding: 0 50px;
  }
  .voice .box h2 {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 4svh;
  }
  .voice .box ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 10svh;
  }
  .voice .box ul li {
    width: 30%;
    margin: 0 auto;
  }
  
  /** before **/

  .before .box {
    flex-direction: column;
    height: 100%;
    padding: 2.5svh 7% 0;
  }
  .before .box h2 {
    max-width: 400px;
    margin: 0 auto 2.5svh;
  }
  .before .box section {width: 100%;}
  .before .box h3 {
    width: 100%;
    font-size: min(24px,4vw);
  }
  .before .box p {font-size: min(16px,3.2vw);}


  /** faq **/

  .faq .box h2 {max-width: 400px;}
  .faq .box dl dt {font-size: min(21px,3.6vw);}
  .faq .box dl dd {font-size: min(16px,3.2vw);}

  /** point **/

  .point .box {
    max-width: 800px;
    height: 100svh;
    padding: 3.5svh 7%;
  }
  .point .box h2 {max-width: 400px;}
  .point .box p { font-size: min(16px,3.2vw);}
  .point > figure {display: none;}
}