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

/* =========================
メインビジュアル
========================= */
#mv{
  position: relative;
  padding-bottom: 3rem;
}
#mv h1{
  margin: 0;
}
#mv h1 img{
  width: 100%;
  height: auto;
}
@media (max-width: 32.5em){
#mv {
    padding-bottom: 0;
}
}

/* =========================
#submenu
========================= */
#submenu{
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(7.2rem, 10vw, 9.75rem);
  margin-top: calc(-1.5 * clamp(2rem, 6vw, 5rem));
  padding-top: clamp(2rem, 6vw, 5rem);
  background: #ededed;
  box-shadow: 0 -0.6rem 1.2rem rgba(0, 0, 0, .25);
}
#submenu .inner{
  padding-inline: clamp(6.0rem, 14vw, 8.2rem);
}
#submenu::before,
#submenu::after{
  content: "";
  position: absolute;
  bottom: 0;
  z-index: 0;
  width: clamp(6.6rem, 14vw, 8.8rem);
  height: clamp(6.6rem, 14vw, 8.8rem);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  pointer-events: none;
}
#submenu::before{
  left: clamp(1.2rem, 3.5vw, 2.4rem);
  background-image: url("/houche/images/chara1.png");
}
#submenu::after{
  right: clamp(1.2rem, 3.5vw, 2.4rem);
  background-image: url("/houche/images/chara2.png");
}
#submenu ul{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  margin-inline: auto;
  margin-top: -4rem;
  gap: 2rem;
}
#submenu li{
  width: 48%;
}
#submenu ul li a{
  display: inline-block;
  transition: transform 0.2s ease;
}
#submenu ul li a:hover{
  transform: scale(1.03);
}

@media (max-width: 67.5em){
  #submenu a{
    font-size: var(--font-size-24);
  }
}
@media (max-width: 55.625em){
  #submenu a{
    font-size: var(--font-size-18);
  }
}
@media (max-width: 32.5em){
  #submenu{
    min-height: 18rem;
    margin-top: 0;
    padding-bottom: 4rem;
  }
  #submenu .inner{
    margin-top: -2rem;
    padding-inline: 1rem;
  }
  #submenu ul{
    width: 100%;
    flex-direction: column;
    margin-top: 0;
  }
  #submenu li{
    width: 100%;
    margin-top: 0;
  }
  #submenu a{
    padding-inline: 0;
    font-size: var(--font-size-24);
    font-weight: 900;
  }
}

/* ---------- appear animation（出てくる動き） ---------- */
@keyframes fadeUp{
  from{
    opacity: 0;
    transform: translateY(0.6rem);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
#sec1,
#sec2,
#sec3,
#sec4,
#sec5,
#sec6,
#sec7,
#sec8,
#sec9,
#\31 0{
  animation: fadeUp .6s ease both;
}

/* ---------- titles ---------- */
h2.title{
  text-align: center;
  font-size: var(--font-size-36);
  line-height: 1.25;
  margin: 0 0 clamp(1rem, 2.6vw, 1.6rem);
}
h3.strong{
  text-align: center;
  font-size: var(--font-size-28);
  font-weight: 800;
  margin: 0 0 clamp(0.9rem, 2.2vw, 1.4rem);
}

/* =========================================================
  sec1 お悩み（flex 3列→2列→1列 / gap無し）
========================================================= */
#sec1{
  background: #fede40;
  text-align: center;
}
#sec1 .title{
  position: relative;
  display: inline-block;
  font-size: var(--font-size-48);
  font-weight: 700;
  text-align: center;
}
#sec1 .title span{
  color: #e50012;
}
#sec1 .title::before,
#sec1 .title::after{
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(1.6em, 4vw, 2.4em);
  height: 0.12em;
  background: #111;
}
#sec1 .title::before{
  right: 100%;
  margin-right: clamp(0.6em, 1.6vw, 1em);
  transform: translateY(-50%) rotate(40deg);
}
#sec1 .title::after{
  left: 100%;
  margin-left: clamp(0.6em, 1.6vw, 1em);
  transform: translateY(-50%) rotate(-40deg);
}
#sec1 ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: clamp(1rem, 2.8vw, 1.6rem);
}
#sec1 li{
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-26);
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}
#sec1 li:nth-child(-n+3){
  margin-bottom: clamp(2rem, 4.8vw, 2.5rem);
}
#sec1 li img{
  width: 80%;
  max-width: 100%;
  height: auto;
  margin-bottom: clamp(0.7rem, 2vw, 1rem);
}
#sec1 li span{
  color: #e50012;
}
#sec1 li.fadein:nth-child(1){ transition-delay: 0.2s; }
#sec1 li.fadein:nth-child(2){ transition-delay: 0.4s; }
#sec1 li.fadein:nth-child(3){ transition-delay: 0.6s; }
#sec1 li.fadein:nth-child(4){ transition-delay: 0.8s; }
#sec1 li.fadein:nth-child(5){ transition-delay: 1.0s; }
#sec1 li.fadein:nth-child(6){ transition-delay: 1.2s; }

@media (max-width: 48em){
  #sec1 li{
    width: calc((100% - clamp(0.8rem, 2vw, 1.2rem)) / 2);
  }
  #sec1 li:not(:nth-child(2n+1)){
    margin-left: clamp(0.8rem, 2vw, 1.2rem);
  }
  #sec1 li:nth-child(2n+1){
    margin-left: 0;
  }
}
@media (max-width: 32.5em){
  #sec1 li{
    width: 48%;
    margin-left: 0 !important;
  }
}

/* =========================================================
  sec2 スライダー背景 + overlay
========================================================= */
:root{
  --sec2-tri-w: clamp(12rem, 18vw, 14.375rem);
  --sec2-tri-h: clamp(3.2rem, 6vw, 4.0625rem);
}
#sec2{
  position: relative;
  overflow: hidden;

  min-height: clamp(22rem, 55vw, 36rem);
  padding: 0;
  padding-top: var(--sec2-tri-h);
}
#sec2::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: calc(var(--sec2-tri-w) / 2) solid transparent;
  border-right: calc(var(--sec2-tri-w) / 2) solid transparent;
  border-top: var(--sec2-tri-h) solid #fede40;
  pointer-events: none;
}
.sec2_slider{
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.sec2_slider,
.sec2_slider .v-track,
.sec2_slider .v-slide{
  height: 100%;
}
.sec2_slider .v-track{
  display: flex;
  height: 100%;
  transition: transform .65s ease;
  will-change: transform;
}
.sec2_slider .v-slide{
  flex: 0 0 calc(100% / 3);
  height: 100%;
}
.sec2_slider img,
.sec2_slider .v-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sec2_overlay{
  position: relative;
  z-index: 2;
  padding: 0;
}
.sec2_inner{
  width: min(var(--maxw, 75rem), 100%);
  margin-inline: auto;
  padding-block: clamp(1.8rem, 4vw, 3rem);
  padding-inline: clamp(1rem, 3vw, 2rem);
  text-align: center;
  color: #111;
  background-color: rgba(255, 255, 255, 0.7);
}
.sec2_inner .tag{
  position: relative;
  display: inline-block;
  background: #111;
  color: #fede40;
  font-size: var(--font-size-36);
  border-radius: clamp(0.6rem, 1.5vw, 0.9rem);
  padding-block: clamp(0.55rem, 1.4vw, 0.85rem);
  padding-inline: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
}
.sec2_inner .tag::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 2;
  transform: translateX(-50%);
  width: clamp(1.2rem, 3vw, 1.6rem);
  height: clamp(0.8rem, 2vw, 1.05rem);
  background: #111;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.sec2_inner .title{
  font-size: var(--font-size-48);
  background-image: url("../images/point_l.png"), url("../images/point_r.png");
  background-size: 4%, 4%;
  background-position: left center, right center;
  background-repeat: no-repeat, no-repeat;
  display: inline-block;
  padding: 0 4rem;
  margin-bottom: 0.5rem;
}
.sec2_inner > p{
  position: relative;
  display: inline-block;
  z-index: 0;
  font-size: var(--font-size-36);
  font-weight: 600;
  line-height: 1.45;
  margin: clamp(0.1rem, 0.5vw, 0.25rem) auto 0;
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
  padding-inline: clamp(0.2rem, 0.6vw, 0.4rem);
}
.sec2_inner > p::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.12em;
  z-index: -1;
  height: 0.55em;
  background: rgba(242, 183, 5, .65);
}
.sec2_inner dl{
  width: 80%;
  margin: 0 auto;
  position: relative;
  border: 0.18rem solid #111;
  border-radius: clamp(0.8rem, 1.8vw, 1.1rem);
  background: #fff;
  padding:
    clamp(1.2rem, 2.5vw, 1.6rem)
    clamp(1.4rem, 3vw, 2rem)
    clamp(1.2rem, 2.5vw, 1.6rem)
    clamp(4.4rem, 7vw, 5.4rem);
}
.sec2_inner dl dt{
  position: absolute;
  left: -5rem;
  top: 3.5rem;
  z-index: 2;
  transform: translateY(-50%);
  width: clamp(7.2rem, 14vw, 9rem);
  height: clamp(7.2rem, 14vw, 9rem);
  border-radius: 50%;
  background: #ffd94a;
  border: 0.2rem solid #111;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec2_inner dl dd{
  position: relative;
  z-index: 1;
  font-size: var(--font-size-26);
  font-weight: 600;
  text-align: left;
}
.sec2_inner .strong{
  position: relative;
  display: inline-block;
  font-size: var(--font-size-40);
  font-weight: 700;
  margin: clamp(1.4rem, 3vw, 2rem) auto 0;
  padding-inline: clamp(1rem, 2.4vw, 1.4rem);
}
.sec2_inner .strong::before,
.sec2_inner .strong::after{
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(1.4rem, 5vw, 3rem);
  border-top: 0.32rem dotted rgba(242, 140, 40, .9);
  transform: translateY(-50%) rotate(-10deg);
}
.sec2_inner .strong::before{
  left: calc(-1 * clamp(1.8rem, 5vw, 3.2rem));
  transform: translateY(-50%) rotate(40deg);
}
.sec2_inner .strong::after{
  right: calc(-1 * clamp(1.8rem, 5vw, 3.2rem));
  transform: translateY(-50%) rotate(-40deg);
}

@media (max-width: 48em){
  .sec2_slider .v-slide{
    flex-basis: calc(100% / 2);
  }
}
@media (max-width: 32.5em){
  .sec2_slider .v-slide{
    flex-basis: 100%;
  }
  .sec2_overlay{
    background: linear-gradient(180deg, rgba(0, 0, 0, .60), rgba(0, 0, 0, .20), rgba(0, 0, 0, 0));
  }
  .sec2_inner{
    text-align: center;
  }
  .sec2_inner .title{
    font-size: var(--font-size-36);
    padding-inline: clamp(2rem, 8vw, 2.6rem);
  }
  .sec2_inner > p{
    font-size: var(--font-size-24);
  }
  .sec2_inner dl{
    width: 90%;
    flex-direction: column;
    text-align: center;
    padding: 6rem 1rem 1rem;
    margin-top: 2rem;
  }
  .sec2_inner dl dt{
    left: 6rem;
    top: 2rem;
    margin-right: 0;
    margin-bottom: clamp(0.8rem, 2vw, 1.1rem);
  }
  .sec2_inner .buttons{
    flex-direction: column;
  }
  .sec2_inner .buttons li + li{
    margin-left: 0;
    margin-top: clamp(0.8rem, 2vw, 1.1rem);
  }
}

/* =========================================================
  sec3 バナー PC/SP
========================================================= */
#sec3{
  padding-block: clamp(2rem, 5vw, 3rem);
  margin-bottom: 2rem;
  text-align: center;
}
#sec3 .banner{
  width: min(var(--maxw, 75rem), 100%);
  margin-inline: auto;
  padding-block: clamp(1.8rem, 4vw, 3rem);
  padding-inline: clamp(1rem, 3vw, 2rem);
  text-align: center;
  color: #111;
  background-color: rgba(255, 255, 255, 0.7);
}
#sec3 .sp_banner{
  display: none;
  margin-top: clamp(0.8rem, 2vw, 1.2rem);
}
#sec3 h3.strong{
  font-size: var(--font-size-48);
  font-weight: 700;
  margin: clamp(1.4rem, 3vw, 2rem) auto 2rem;
  position: relative;
  display: inline-block;
  padding-inline: clamp(1rem, 2.4vw, 1.4rem);
  text-align: center;
}
#sec3 h3.strong::before,
#sec3 h3.strong::after{
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(1.4rem, 5vw, 3rem);
  border-top: 0.32rem solid rgba(242, 140, 40, .9);
  transform: translateY(-50%) rotate(-10deg);
}
#sec3 h3.strong::before{
  left: calc(-1 * clamp(1.8rem, 5vw, 3.2rem));
  transform: translateY(-50%) rotate(40deg);
}
#sec3 h3.strong::after{
  right: calc(-1 * clamp(1.8rem, 5vw, 3.2rem));
  transform: translateY(-50%) rotate(-40deg);
}

@media (max-width: 32.5em){
  #sec3 h3.strong{
    font-size: 28px;
  }
  #sec3 .banner{
    display: none;
  }
  #sec3 .sp_banner{
    display: block;
  }
}

/* =========================================================
  sec4 ポイント（flex wrap / gap無し）
========================================================= */
#sec4{
  background: #f6f1c7;
}
#sec4 h2{
  margin-bottom: 2rem;
}
#sec4 .sub_title{
  text-align: center;
}
#sec4 h3{
  font-size: var(--font-size-48);
  font-weight: 700;
  margin: clamp(1.4rem, 3vw, 2rem) auto 4rem;
  position: relative;
  display: inline-block;
  padding-inline: clamp(1rem, 2.4vw, 1.4rem);
  text-align: center;
}
#sec4 h3::before,
#sec4 h3::after{
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(1.4rem, 5vw, 3rem);
  border-top: 0.32rem solid rgba(242, 140, 40, .9);
  transform: translateY(-50%) rotate(-10deg);
}
#sec4 h3::before{
  left: calc(-1 * clamp(1.8rem, 5vw, 3.2rem));
  transform: translateY(-50%) rotate(40deg);
}
#sec4 h3::after{
  right: calc(-1 * clamp(1.8rem, 5vw, 3.2rem));
  transform: translateY(-50%) rotate(-40deg);
}
#sec4 h3 span{
  color: #e50012;
}
#sec4 ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: clamp(0.9rem, 2.2vw, 1.4rem);
}
#sec4 li{
  width: 31%;
  background: #fff;
  border: solid 5px #e50012;
  border-radius: 0.9rem;
  padding: clamp(1.6rem, 3vw, 2rem);
  margin-bottom: clamp(0.8rem, 2vw, 1.2rem);
}
#sec4 li:not(:nth-child(3n+1)){
  margin-left: clamp(0.8rem, 2vw, 1.2rem);
}
#sec4 li > img{
  width: clamp(6.2rem, 14vw, 7.6rem);
  margin-inline: auto;
  margin-top: -4rem;
  margin-bottom: clamp(0.7rem, 2vw, 1rem);
}
#sec4 li dt{
  font-size: var(--font-size-32);
  font-weight: 800;
  line-height: 1.8;
  margin-bottom: 0.4em;
  text-align: center;
}
#sec4 li dd{
  color: #666;
  font-size: var(--font-size-20);
  line-height: 1.8em;
  border-top: solid 3px #e50012;
  padding-top: 0.4em;
}
#sec4 .note{
  display: block;
  margin-top: 0.4em;
  font-size: var(--font-size-18);
}
#sec4 .point4{
  display: flex;
  align-items: center;
  margin-top: clamp(0.9rem, 2.4vw, 1.4rem);
  margin-bottom: 4rem;
  background: #fff;
  border: solid 5px #e50012;
  border-radius: 0.9rem;
  padding: clamp(0.8rem, 2vw, 1.2rem);
}
#sec4 .point4 img{
  width: clamp(6.2rem, 14vw, 7.6rem);
}
#sec4 .point4 dl{
  margin-left: clamp(0.8rem, 2vw, 1.2rem);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
#sec4 .point4 dt{
  font-size: var(--font-size-40);
  font-weight: 700;
  color: #e50012;
  margin-right: 2rem;
  padding: 0.5rem;
  background: #fede40;
}
#sec4 .point4 dd{
  font-size: var(--font-size-32);
  font-weight: 800;
}
#sec4 .support{
  text-align: center;
}
#sec4 .support h2{
  font-size: var(--font-size-46);
  position: relative;
  display: inline-block;
  text-align: center;
  background-image: url("../images/point_l.png"), url("../images/point_r.png");
  background-repeat: no-repeat, no-repeat;
  background-size: 10%, 10%;
  background-position: left center, right center;
  padding-inline: clamp(3.2rem, 6vw, 4rem);
}
#sec4 .support h2 .m{
  position: relative;
  display: inline-block;
  z-index: 0;
  padding-inline: clamp(0.2rem, 0.6vw, 0.4rem);
}
#sec4 .support h2 .m::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.12em;
  z-index: -1;
  height: 0.55em;
  background: rgba(242, 183, 5, .65);
}
.support-box{
  width: 100%;
  margin: 0 auto;
  border-radius: clamp(1rem, 2vw, 1.4rem);
  overflow: hidden;
  border: 0.35rem solid #e60012;
}
.support-box dt{
  background: #e60012;
  color: #fff;
  text-align: center;
  padding: clamp(1.8rem, 2.8vw, 2rem);
  font-size: var(--font-size-34);
  font-weight: 700;
  line-height: 1.6;
}
.support-box dt span{
  display: block;
  margin-top: clamp(0.4rem, 1vw, 0.6rem);
  font-size: var(--font-size-32);
  font-weight: 700;
  color: #ffd94a;
}
.support-box dd{
  background: #fff;
  color: #111;
  text-align: center;
  padding: clamp(1.8rem, 2.8vw, 2rem);
  font-size: var(--font-size-34);
  line-height: 1.8;
}
.support-box dd span{
  display: block;
  font-size: var(--font-size-30);
  color: #555;
}
#sec4 li.fadein:nth-child(1){ transition-delay: 0.2s; }
#sec4 li.fadein:nth-child(2){ transition-delay: 0.4s; }
#sec4 li.fadein:nth-child(3){ transition-delay: 0.6s; }
#sec4 .point4.fadein{ transition-delay: 0.8s; }
#sec4 .support-box.fadein{ transition-delay: 1.0s; }

@media (max-width: 48em){
  #sec4 li{
    width: 100%;
    margin-left: 0 !important;
    margin-bottom: 4rem !important;
  }
  #sec4 .point4{
    flex-direction: column;
    text-align: center;
  }
  #sec4 .point4 dl{
    margin-left: 0;
    margin-top: 0.8rem;
  }
}
@media (max-width: 32.5em){
  #sec4 h3{
    font-size: 28px;
  }
  #sec4 h3 span{
    display: block;
  }
  #sec4 h3::before{
    left: -1rem;
  }
  #sec4 h3::after{
    right: -1rem;
  }
  #sec4 li{
    margin-bottom: 4rem !important;
  }
  #sec4 .point4 > img{
    width: clamp(6.2rem, 14vw, 7.6rem);
    margin-inline: auto;
    margin-top: -4rem;
    margin-bottom: clamp(0.7rem, 2vw, 1rem);
  }
  #sec4 .point4 dl{
    display: flex;
    flex-direction: column;
  }
  #sec4 .point4 dt{
    margin-right: 0 !important;
    margin-bottom: 1rem;
  }
}

/* =========================================================
  sec5 SNS（2カラム→1カラム / タイルはflex）
========================================================= */
#sec5 .title_logo{
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}
#sec5 .parent{
  text-align: center;
}
#sec5 .parent p{
  font-size: var(--font-size-24);
  line-height: 1.8;
}
#sec5 h3.strong{
  font-size: var(--font-size-46);
  font-weight: 700;

  position: relative;
  display: inline-block;
  padding-inline: clamp(1rem, 2.4vw, 1.4rem);

  margin-bottom: 2rem;
}
#sec5 h3.strong::before,
#sec5 h3.strong::after{
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(1.4rem, 5vw, 3rem);
  border-top: 3px solid #000;
  transform: translateY(-50%) rotate(-10deg);
}
#sec5 h3.strong::before{
  left: calc(-1 * clamp(1.8rem, 5vw, 3.2rem));
  transform: translateY(-50%) rotate(40deg);
}
#sec5 h3.strong::after{
  right: calc(-1 * clamp(1.8rem, 5vw, 3.2rem));
  transform: translateY(-50%) rotate(-40deg);
}

.sns-embed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}


/* タブレット以下：2列 */
@media (max-width: 48em) {
  .sns-embed-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホ：1列 */
@media (max-width: 32.5em) {
  .sns-embed-grid {
    grid-template-columns: 1fr;
    justify-items: center; /* 子を中央配置 */
  }
  .sns-embed-grid > * {
    justify-self: center;
    width: fit-content;    
    max-width: 100%;
  }
}

@media (max-width: 23.4375em) {  /* 375px以下SE対策 */
.sns-panel {
padding: 0!important;
border: none!important;
}
}


.sns-embeds{
  display: flex;
  flex-wrap: wrap;
  margin-top: clamp(1.1rem, 3vw, 1.8rem);
}
.sns-panel{
  width: 100%;
  background: #fff;
  border: dotted 3px #000;
  border-radius: 0.9rem;
  padding: clamp(1.6rem, 3vw, 2rem);
  margin-bottom: 4rem;
}
.sns-panel + .sns-panel{
  margin-left: clamp(0.8rem, 2vw, 1.2rem);
}
.sns-panel__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: dotted 3px #e50012;
}
.sns-panel__brand{
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: var(--font-size-40);
}
.sns-panel__icon{
  width: 1.4em;
  height: 1.4em;
  object-fit: contain;
  margin-right: 0.5em;
}
.sns-panel__title{
  margin: 0;
  font-size: var(--font-size-30);
  color: #666;
}
.sns-panel__divider{

  background: rgba(0, 0, 0, .08);
  margin-block: clamp(0.7rem, 2vw, 1rem);
}
.sns-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sns-tile{
  width: 31%;
  aspect-ratio: 1 / 1;
  border-radius: 0.8rem;
  overflow: hidden;
  position: relative;
  margin-bottom: 2rem;
}
.sns-tile:not(:nth-child(3n+1)){
  margin-left: 0.5rem;
}
.sns-tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sns-tile__meta{
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: var(--font-size-12);
  padding: 0.25em 0.7em;
  border-radius: 100vh;
}

@media (max-width: 48em){
  .sns-panel{
    width: 100%;
  }
  .sns-panel + .sns-panel{
    margin-left: 0;
    margin-top: 0.9rem;
  }
}
@media (max-width: 32.5em){
  #sec5 h3.strong{
    font-size: 28px;
  }
  .sns-panel__title{
    font-size: 13px;
    margin-left: auto;
    text-align: right;
  }
  .sns-tile{
    width: calc((100% - 0.5rem) / 2);
  }
  .sns-tile:not(:nth-child(2n+1)){
    margin-left: 0.5rem;
  }
  .sns-tile:nth-child(2n+1){
    margin-left: 0;
  }
}

/* =========================================================
  sec6 料金/流れ/反響（最低限）
========================================================= */
#sec6{
  background: #f6f1c7;
}
#sec6 .parent{
  text-align: center;
}
#sec6 .parent .title_logo{
  width: 60%;
  margin: 0 auto 2rem;
}
#sec6 .parent h2{
  font-size: var(--font-size-46);
  position: relative;
  display: inline-block;
  text-align: center;
  background-image: url("../images/point_l.png"), url("../images/point_r.png");
  background-repeat: no-repeat, no-repeat;
  background-size: 10%, 10%;
  background-position: left center, right center;
  padding-inline: clamp(3.2rem, 6vw, 4rem);
  margin-bottom: 2rem;
}
#sec6 .parent h2 .m{
  position: relative;
  display: inline-block;
  z-index: 0;
  padding-inline: clamp(0.2rem, 0.6vw, 0.4rem);
}
#sec6 .parent h2 .m::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.12em;
  z-index: -1;
  height: 0.55em;
  background: rgba(242, 183, 5, .65);
}
#sec6 .box{
  background: #fff;
  border: solid 3px #e50012;
  border-radius: 0.9rem;
  padding: clamp(2.4rem, 4vw, 3rem);
  margin-top: clamp(0.9rem, 2.3vw, 1.4rem);
}
#sec6 .price{
  margin-bottom: 4rem;
}
#sec6 .price dl{
  display: flex;
  flex-wrap: wrap;
  padding-block: clamp(1.8rem, 2.5vw, 2rem);
  border-bottom: 3px dotted #e50012;
}
#sec6 .price dl:last-of-type,
#sec6 .detail dl:last-child{
  border-bottom: none;
}
#sec6 .price dt{
  width: 100%;
  font-weight: 700;
  font-size: var(--font-size-34);
  border-left: solid 6px #e50012;
  padding-left: clamp(0.8rem, 2vw, 1.2rem);
  margin-bottom: 1rem;
}
#sec6 .price dd{
  width: 95%;
  margin: 0 auto;
  color: #666;
  line-height: 1.9;
  font-size: var(--font-size-34);
  font-weight: 600;
}
#sec6 .price dd span{
  font-size: var(--font-size-30);
  margin-right: 1rem;
  background: #fff4bf;
}
#sec6 .price dd span b{
  color: #e50012;
}
#sec6 .detail{
  width: 95%;
  margin: 0 auto;
}
#sec6 .detail h4{
  display: inline-block;
  font-size: var(--font-size-32);
  color: #fff;
  background: #e50012;
  padding: 0.5rem 1rem;
}
#sec6 .detail dl{
  padding-block: clamp(0.8rem, 2vw, 1.2rem);
}
#sec6 .detail dt{
  padding: 0;
  border-left: none;
}
#sec6 .detail dd{
  color: #666;
  line-height: 1.9;
  font-size: var(--font-size-24);
}
#sec6 .detail dt b{
  color: #e50012;
}
#sec6 .model h5{
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  background: #e60012;
  color: #fff;
  font-size: var(--font-size-40);
  font-weight: 800;
  letter-spacing: 0.08em;
  padding-block: clamp(0.4rem, 1vw, 0.5rem);
  border-radius: clamp(0.6rem, 1.4vw, 0.9rem);
}
#sec6 .model h5::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * clamp(0.7rem, 1.8vw, 1rem));
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: clamp(0.9rem, 2.4vw, 1.3rem) solid transparent;
  border-right: clamp(0.9rem, 2.4vw, 1.3rem) solid transparent;
  border-top: clamp(0.7rem, 1.8vw, 1rem) solid #e60012;
}
#sec6 .model p{
  font-size: var(--font-size-34);
  text-align: center;
  font-weight: 600;
}
#sec6 .model ul{
  display: flex;
  align-items: stretch;
  height: clamp(18rem, 45vw, 20rem);
  overflow: hidden;
  margin-top: 2rem;
}
#sec6 .model li{
  flex: 1;
  display: flex;
  overflow: hidden;
}
#sec6 .model li + li{
  margin-left: clamp(0.7rem, 2vw, 1rem);
}
#sec6 .model img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  border-radius: 0.8rem;
}
#sec6 .model li:first-child img{
  object-position: center top;
}
#sec6 .flow{
  margin-bottom: 4rem;
}
#sec6 .flow .box ul{
  margin: 0;
  padding: 0;
}
#sec6 .flow .box li{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-radius: 0.8rem;
  padding: clamp(0.9rem, 2.4vw, 1.2rem);
}
#sec6 .flow .box li + li{
  margin-top: clamp(0.7rem, 2vw, 1rem);
}
#sec6 .flow .step{
  width: 35%;
}
#sec6 .flow .step img{
  width: 100%;
}
#sec6 .flow dl{
  width: 60%;
}
#sec6 .flow dt{
  font-weight: 700;
  font-size: var(--font-size-34);
  margin-bottom: 1em;
  border-left: 6px solid #e50012;
  padding-left: 1rem;
}
#sec6 .flow dd{
  font-size: var(--font-size-20);
  color: #666;
}
#sec6 .flow dd span{
  color: #e50012;
}
#sec6 .reaction .parent h2{
  background-size: 5%, 5%;
  margin-bottom: 6rem;
}

/* =========================
   reaction card
========================= */
.reaction{
  overflow: visible;
}
.reaction-box{
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border: 3px solid #e60012;
  border-radius: clamp(1.2rem, 2.4vw, 1.6rem);
  overflow: visible;
  padding:
    clamp(1.8rem, 3.2vw, 2.2rem)
    clamp(1.6rem, 3vw, 2rem)
    clamp(1.8rem, 3vw, 2.2rem)
    clamp(1.6rem, 3vw, 2rem);
}
.reaction-upper{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.reaction-upper > .badge{
  position: relative;
  flex: 0 0 clamp(8.6rem, 20vw, 11.2rem);
  text-align: center;
}
.reaction-upper > .badge + .badge{
  margin-left: clamp(1rem, 2.4vw, 1.4rem);
}
.reaction-upper > .reaction-text{
  flex: 1 1 auto;
  min-width: 0;
  margin-left: clamp(1.6rem, 3vw, 2.2rem);
  font-size: var(--font-size-24);
  line-height: 2.4;
}
.reaction-upper > .badge .ear{
  position: absolute;
  left: 50%;
  top: -2.1rem;
  z-index: 30;
  transform: translate(-50%, -100%);
  width: clamp(6.4rem, 13vw, 8.4rem);
  height: clamp(3.2rem, 6.5vw, 4.2rem);
  background: #fff;
  border: 3px solid #e60012;
  border-bottom: 0;
  border-top-left-radius: 999rem;
  border-top-right-radius: 999rem;
}
.reaction-upper > .badge .ear img{
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -50%);
  width: clamp(4.6rem, 9.5vw, 6rem);
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
.badge__img{
  width: 100%;
  height: auto;
  border-radius: clamp(0.5rem, 1.2vw, 0.8rem);
  margin-top: clamp(0.8rem, 1.8vw, 1.2rem);
}
.badge__code{
  font-size: var(--font-size-14);
  font-weight: 700;
  margin-top: clamp(0.6rem, 1.6vw, 1rem);
}
#sec6 .open_bt,
#sec6 .close_bt{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(18rem, 45vw, 26rem);
  padding: clamp(1rem, 2.6vw, 1.3rem);
  font-size: var(--font-size-20);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  background: #e60012;
  border-radius: clamp(0.9rem, 2vw, 1.2rem);
  margin: clamp(1.2rem, 3vw, 1.8rem) auto 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}
#sec6 .open_bt:hover,
#sec6 .close_bt:hover{
  transform: scale(1.04);
}
#sec6 .open_bt::before,
#sec6 .close_bt::before{
  content: "";
  position: absolute;
  right: clamp(0.8rem, 2vw, 1rem);
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: clamp(1.2rem, 3vw, 1.4rem);
  height: clamp(1.2rem, 3vw, 1.4rem);
  background: #fff;
  border-radius: 50%;
}
.open_bt::after,
.close_bt::after{
  content: "";
  position: absolute;
  top: 50%;
  z-index: 3;
  right: calc(clamp(0.8rem, 2vw, 1rem) + (clamp(1.2rem, 3vw, 1.4rem) / 2));
  transform: translate(50%, -50%);
  border-left: 0.28em solid transparent;
  border-right: 0.28em solid transparent;
}
.open_bt::after{
  transform: translate(50%, -35%);
  border-top: 0.4em solid #e50020;
}
.close_bt::after{
  transform: translate(50%, -65%);
  border-bottom: 0.4em solid #e50020;
}
#sec6 .open h5{
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  background: #e50020;
  color: #fff;
  font-size: var(--font-size-40);
  font-weight: 800;
  letter-spacing: 0.08em;
  padding-block: clamp(0.4rem, 1vw, 0.5rem);
  border-radius: clamp(0.6rem, 1.4vw, 0.9rem);
  margin-top: clamp(1.8rem, 2.5vw, 2rem);
}
#sec6 .open h5::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * clamp(0.7rem, 1.8vw, 1rem));
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: clamp(0.9rem, 2.4vw, 1.3rem) solid transparent;
  border-right: clamp(0.9rem, 2.4vw, 1.3rem) solid transparent;
  border-top: clamp(0.7rem, 1.8vw, 1rem) solid #e60012;
}
#sec6 .step ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 2rem;
}
#sec6 .step ul li:first-child{
  width: 40%;
}
#sec6 .step ul li:last-child{
  width: 55%;
}
#sec6 .step ul .frame{
  border: solid 1px #000;
}
#sec6 .step dt{
  font-size: var(--font-size-32);
  margin-bottom: 2rem;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(0.6rem, 1.6vw, 0.9rem);
}
#sec6 .step dt span{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(1.8rem, 4vw, 2.2rem);
  height: clamp(1.8rem, 4vw, 2.2rem);
  background: #e50020;
  color: #fff;
  font-weight: 800;
  font-size: var(--font-size-34);
  line-height: 1;
  border-radius: 50%;
}
#sec6 .step dd{
  font-size: var(--font-size-24);
}
#sec6 .sample{
  margin-bottom: 4rem;
}
#sec6 .sample h6{
  font-size: var(--font-size-34);
  border-left: solid 6px #e50020;
  padding-left: 1.5rem;
}
#sec6 .sample dl{
  margin-bottom: 4rem;
}
#sec6 .sample dt{
  font-size: var(--font-size-34);
  margin-bottom: 2rem;
}
#sec6 .sample dd{
  font-size: var(--font-size-24);
  margin-bottom: 2rem;
}
#sec6 .sample dd img{
  width: 60%;
  height: auto;
}
#sec6 .sample dd.right img{
  width: 95%;
}

@media (max-width: 48rem){
  .reaction-upper{
    flex-wrap: wrap;
  }
  .reaction-upper > .badge{
    flex: 0 0 46%;
  }
  .reaction-upper > .badge + .badge{
    margin-left: 8%;
  }
  .reaction-upper > .reaction-text{
    flex: 0 0 100%;
    margin-left: 0;
    margin-top: clamp(1.2rem, 3vw, 1.8rem);
  }
  .reaction-upper > .badge .ear{
    top: -1.7rem;
  }
}
@media (max-width: 32.5em){
  #sec6 .parent h2{
    font-size: 28px;
    line-height: 1.2em;
    padding-inline: 0;
  }
  #sec6 .box{
    padding: 1.5rem;
  }
  #sec6 .price dl{
    padding-block: 0;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
  }
  #sec6 .price dd{
    font-size: 20px;
  }
  #sec6 .flow .box li{
    flex-direction: column;
  }
  #sec6 .flow dl{
    width: 100%;
    margin-left: 0;
    margin-top: 0.8rem;
  }
  #sec6 .model ul{
    height: auto;
  }
  #sec6 .flow .step{
    width: 90%;
    margin: 0 auto;
  }
  .reaction-text{
    line-height: 1.8em !important;
  }
}

/* =========================================================
  sec7 FAQ
========================================================= */
#sec7{
  background: #fede40;
}
#sec7 .parent{
  text-align: center;
}
#sec7 h2{
  font-size: var(--font-size-46);
  position: relative;
  display: inline-block;
  text-align: center;
  background-image: url("../images/point_l.png"), url("../images/point_r.png");
  background-repeat: no-repeat, no-repeat;
  background-size: 10%, 10%;
  background-position: left center, right center;
  padding-inline: clamp(3.2rem, 6vw, 4rem);
  margin-bottom: 4rem;
}
#sec7 .box{
  padding: clamp(1rem, 2.6vw, 1.4rem);
  margin-bottom: clamp(0.9rem, 2.3vw, 1.4rem);
}
#sec7 .box h3{
  font-size: var(--font-size-40);
  color: #fff;
  display: flex;
  align-items: center;
  padding: clamp(0.4rem, 1vw, 0.5rem) clamp(1.8rem, 2.5vw, 2rem);
  margin-bottom: clamp(0.4rem, 1vw, 0.5rem);
}
#sec7 .box h3 span{
  font-size: var(--font-size-24);
  margin-right: clamp(0.8rem, 2vw, 1.2rem);
}
#sec7 .box h3.bk{ background: #000; }
#sec7 .box h3.rd{ background: #e50020; }
#sec7 .qa-item{
  padding-block: clamp(0.8rem, 2vw, 1.1rem);
}

/* =========================
   Q / A 共通バッジ
========================= */
#sec7 .qa-question span,
#sec7 .qa-answer > span{
  width: clamp(2.6rem, 5.6vw, 3.2rem);
  height: clamp(2.2rem, 4.8vw, 2.8rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-40);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  padding: 0;
}

/* =========================
   Q（質問）
========================= */
#sec7 .qa-question{
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 0.6rem;
  border: solid 0.125rem #000;
  background: #fff;
  font-weight: 800;
  font-size: var(--font-size-20);
  cursor: pointer;
  margin-bottom: 0.5rem;
  padding: clamp(0.4rem, 1vw, 0.5rem) clamp(0.8rem, 2vw, 1.2rem);
  padding-right: 3.2rem;
}
#sec7 .qa-question span{
  background: #000;
  margin-right: 1rem;
}
#sec7 .qa-question::after{
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-42);
  font-weight: 600;
  line-height: 1;
  color: #000;
}
#sec7 .qa-answer{
  display: none;
}
#sec7 .qa-item.is-open .qa-question::after{
  content: "−";
}
#sec7 .qa-item.is-open .qa-answer{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  border-radius: 0.6rem;
  border: solid 0.125rem #e50020;
  background: #fff;
  font-size: var(--font-size-20);
  line-height: 1.9;
  color: #000;
  padding: clamp(0.4rem, 1vw, 0.5rem) clamp(0.8rem, 2vw, 1.2rem);
}
#sec7 .qa-answer > span{
  flex-shrink: 0;
  background: #e50020;
  margin-right: 1rem;
}
#sec7 .qa-answer__text{
  flex: 1;
  min-width: 0;
}

@media (max-width: 32rem){
  #sec7 h2{
    font-size: 28px;
    margin-bottom: 2rem;
  }
  #sec7 .box h3{
    font-size: 24px;
  }
}

/* =========================================================
  sec8
========================================================= */
#sec8{
  background: #fff;
}
#sec8 .parent{
  text-align: center;
}
#sec8 h2{
  font-size: var(--font-size-46);
  position: relative;
  display: inline-block;
  text-align: center;
  background-image: url("../images/point_l.png"), url("../images/point_r.png");
  background-repeat: no-repeat, no-repeat;
  background-size: 10%, 10%;
  background-position: left center, right center;
  padding-inline: clamp(3.2rem, 6vw, 4rem);
  margin-bottom: 4rem;
}
#sec8 .flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#sec8 dl,
#sec8 .area{
  width: 50%;
}
#sec8 dt{
  font-weight: 700;
  font-size: var(--font-size-46);
  line-height: 1.6;
  margin-bottom: 4rem;
}
#sec8 dt span{
  color: #e50020;
}
#sec8 dd{
  font-size: var(--font-size-30);
  margin-top: 0.7em;
  color: #666;
}

@media (max-width: 32rem){
  #sec8 h2{
    font-size: 28px;
    margin-bottom: 2rem;
  }
  #sec8 .flex{
    display: block;
  }
  #sec8 dl,
  #sec8 .area{
    width: 100%;
  }
  #sec8 dt{
    font-size: 24px;
    margin-bottom: 2rem;
  }
  #sec8 dd{
    font-size: 20px;
    margin-bottom: 2rem;
  }
}

/* =========================================================
  sec9 news
========================================================= */
#sec9{
  --sec9-bottom-space: clamp(14rem, 20vw, 25rem);

  position: relative;
  overflow-x: clip;
  background: #ededed;
  padding-bottom: var(--sec9-bottom-space);
}
#sec9::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: 100vw;
  height: clamp(10rem, 14vw, 18rem);
  transform: translateX(-50%);
  background: url("../images/sec10_top.svg") no-repeat bottom center / cover;
  pointer-events: none;
}
#sec9 > .inner{
  position: relative;
  z-index: 1;
}
#sec9 .parent{
  text-align: center;
}
#sec9 h3.strong{
  font-size: var(--font-size-46);
  font-weight: 700;
  position: relative;
  display: inline-block;
  padding-inline: clamp(1rem, 2.4vw, 1.4rem);
  margin-bottom: 2rem;
}
#sec9 h3.strong::before,
#sec9 h3.strong::after{
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(1.4rem, 5vw, 3rem);
  border-top: 3px solid #000;
}
#sec9 h3.strong::before{
  left: calc(-1 * clamp(1.8rem, 5vw, 3.2rem));
  transform: translateY(-50%) rotate(40deg);
}
#sec9 h3.strong::after{
  right: calc(-1 * clamp(1.8rem, 5vw, 3.2rem));
  transform: translateY(-50%) rotate(-40deg);
}
#sec9 li + li{
  margin-top: 0.7rem;
}
#sec9 li a{
  display: flex;
  align-items: center;
  font-size: var(--font-size-20);
  background: #fff;
  border: solid 2px #000;
  border-radius: 0.8rem;
  padding: 1em;
}
#sec9 li a .news-date{
  font-weight: 700;
  color: #000;
  white-space: nowrap;
  margin-right: 2em;
}
#sec9 li a .news-title{
  color: #000;
}
#sec9 li a .news-icon{
  margin-left: auto;
  inline-size: 1.4em;
  block-size: 1.4em;
  border-radius: 50%;
  background: #f26925;
  position: relative;
  flex: 0 0 auto;
}
#sec9 li a .news-icon::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 0;
  block-size: 0;
  border-style: solid;
  border-width: 0.32em 0 0.32em 0.5em;
  border-color: transparent transparent transparent #fff;
  transform: translateX(0.08em);
}
#sec9 .btn{
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}
#sec9 .btn a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f26925;
  color: #fff;
  font-size: var(--font-size-20);
  font-weight: 700;
  padding: 0.9em 4.5em 0.9em 3.5em;
  border-radius: 0.7rem;
  position: relative;
  text-decoration: none;
  transition: transform 0.2s ease;
}
#sec9 .btn a::after{
  content: "";
  position: absolute;
  right: 1.6em;
  inline-size: 0;
  block-size: 0;
  border-style: solid;
  border-width: 0.32em 0 0.32em 0.5em;
  border-color: transparent transparent transparent #fff;
}
#sec9 .btn a:hover{
  transform: scale(1.04);
}

@media (max-width: 32rem){
  #sec9 h3.strong{
    font-size: 28px;
    margin-bottom: 2rem;
  }
  #sec9 li a{
    flex-direction: column;
  }
  #sec9 li a .news-date,
  #sec9 li a .news-title{
    width: 100%;
  }
  #sec9 li a .news-date{
    display: block;
    margin-bottom: 1rem;
    padding-left: 1rem;
  }
}

/* =========================================================
 #sec10
========================================================= */
#sec10{
  padding-top: 0;
  background: #fff4bf;
}
#sec10 .parent{
  text-align: center;
}
#sec10 .title_logo{
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}
#sec10 .parent h3{
  font-size: var(--font-size-46);
  position: relative;
  display: inline-block;
  text-align: center;
  background-image: url("../images/point_l.png"), url("../images/point_r.png");
  background-repeat: no-repeat, no-repeat;
  background-size: 10%, 10%;
  background-position: left center, right center;
  padding-inline: clamp(3.2rem, 6vw, 4rem);
  margin-bottom: 4rem;
}
#sec10 .parent h3 .m{
  position: relative;
  display: inline-block;
  z-index: 0;
  padding-inline: clamp(0.2rem, 0.6vw, 0.4rem);
}
#sec10 .parent h3 .m::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.12em;
  z-index: -1;
  height: 0.55em;
  background: rgba(242, 183, 5, .65);
}
#sec10 .contact{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto 3rem;
}
#sec10 .contact li{
  width: 50%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#sec10 .contact li img{
  height: clamp(5rem, 8vw, 7rem);
  object-fit: contain;
}
#sec10 .contact li span{
  display: block;
  margin-bottom: 0.8rem;
  font-size: var(--font-size-28);
  font-weight: 600;
}
#sec10 .top p{
  font-size: var(--font-size-24);
  text-align: center;
  margin-bottom: 3rem;
}

@media (max-width: 32rem){
  #sec10 .parent h3{
    font-size: 28px;
    margin-bottom: 2rem;
  }
  #sec10 .contact{
    width: 100%;
  }
  #sec10 .contact li{
    width: 100%;
    margin-bottom: 2rem;
  }
}