/* ============================================================
   top.css — front-page.php 専用スタイル
============================================================ */
body {
  background: var(--color_sub);
}
.top_jp-title {
  font-family: var(--font_jp);
  font-size: clamp(3rem, calc(60 / var(--design-width) * 100vw), 6rem);
  font-weight: 700;
  color: var(--color_orange);
  line-height: 1.3;
  -webkit-text-stroke: 8px #fff;
  paint-order: stroke fill;
}
.sp-only { display: none; }
@media (max-width: 768px) {
  .sp-only { display: inline; }
}

/* ============================================================
   KV
============================================================ */
.top_kv {
  background-size: cover;
  background-position: bottom right;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}
.top_kv .section-inner {
  max-width: var(--sectionWidth_wide);
  padding: 0;
  display: flex;
  align-items: center;
  min-height: clamp(36rem, calc(520 / var(--design-width) * 100vw), 52rem);
}
.top_kv__content {
  padding: clamp(3.2rem, calc(48 / var(--design-width) * 100vw), 6.4rem) clamp(2rem, calc(48 / var(--design-width) * 100vw), 6.4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.top_kv__label {
  display: inline-block;
  color: #fff;
  font-size: clamp(2rem, calc(36 / var(--design-width) * 100vw), 3.6rem);
  font-weight: 700;
  padding: 0 1rem;
  line-height: 1.2;
  align-self: flex-start;
  position: relative;
}
.top_kv__label::before {
  content: '';
  width: 100%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  background: var(--color_main);
  transform: translateY(-35%)skewX(-10deg);
}
.top_kv__label span {
  position: relative;
  z-index: 1;
}
.top_kv__label em {
  color: var(--color_yellow);
  -webkit-text-stroke: 8px #044D27;
  paint-order: stroke fill;
  font-style: normal;
  font-size: clamp(3rem, calc(48 / var(--design-width) * 100vw), 4.8rem);
}
.top_kv__title { 
  display: flex; 
  flex-direction: column; 
  margin: 1rem 0;
  -webkit-text-stroke: 9px #fff;
  paint-order: stroke fill;
  width: fit-content;
}
.top_kv__title-price {
  display: block;
  font-size: clamp(2.8rem, calc(56 / var(--design-width) * 100vw), 5.6rem);
  font-weight: 900;
  color: var(--color_dark);
  line-height: 1.2;
  transform: skewX(-5deg);
}
.top_kv__title-price em {
  font-size: clamp(4.2rem, calc(84 / var(--design-width) * 100vw), 8.4rem);
  font-style: normal;
}
.top_kv__title-price.sub {
  font-size: clamp(2.8rem, calc(56 / var(--design-width) * 100vw), 5.6rem);
}
.top_kv__title-price.sub em {
  font-size: clamp(3.8rem, calc(84 / var(--design-width) * 100vw), 8.4rem);
}
.top_kv__title-price em.orange {
  color: var(--color_orange);
}
.top_kv__title-price em.green {
  color: var(--color_main);
}
.top_kv__title-note {
  font-size: 1.2rem;
  color: var(--color_muted);
  font-weight: 400;
  vertical-align: super;
  -webkit-text-stroke: 4px #fff;
  line-height: 0;
  text-align: right;
  position: relative;
  z-index: 2;
  transform: translate(-20px, 10px);
}
.top_kv__title-sub {
  font-size: clamp(2rem, calc(32 / var(--design-width) * 100vw), 3.4rem);
  font-weight: 700;
  color: var(--color_dark);
  line-height: 1.4;
}
.top_kv__features {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  gap: 1rem;
  margin: 1rem 0;
  width: fit-content;
}
.top_kv__feat {
  display: grid;
  grid-template-columns: 4.2rem auto;
  grid-template-rows: auto auto;
  column-gap: 1.2rem;
  row-gap: 0.6rem;
  align-items: center;
  background: rgba(255,255,255,0.92);
  border-radius: 1.2rem;
  padding: 1.6rem;
}
.top_kv__feat img {
  width: 4.2rem;
  height: 4.2rem;
  object-fit: contain;
  grid-row: 1;
  grid-column: 1;
}
.top_kv__feat-main {
  grid-row: 1;
  grid-column: 2;
  font-size: clamp(1.6rem, calc(20 / var(--design-width) * 100vw), 2rem);
  font-weight: 700;
  color: var(--color_main);
  line-height: 1.4;
}
.top_kv__feat-sub {
  grid-row: 2;
  grid-column: 1 / -1;
  font-size: clamp(1.4rem, calc(16 / var(--design-width) * 100vw), 1.6rem);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.top_kv__area {
  display: inline-block;
  background: var(--color_main);
  color: #fff;
  padding: 1rem 3rem;
  font-size: clamp(1.8rem, calc(24 / var(--design-width) * 100vw), 2.4rem);
  line-height: 1.4;
  font-weight: 700;
  align-self: flex-start;
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - 10px) 50%,
    100% 100%,
    0 100%,
    10px 50%
  );
}
.top_kv__area span {
  color: var(--color_yellow);
}
.top_kv__badge {
  position: absolute;
  
}
.top_kv__badge strong { 
  font-size: 1.8rem; 
  line-height: 1.2;
}
@media screen and (max-width: 768px) {
  .top_kv {
    padding-bottom: 15rem;
  }
  .top_kv__label::before { top: 60%; }
  .top_kv { background-position: 75% center; }
  .top_kv__content { width: 100%; }
  .top_kv__title-note {
    transform: translate(-20px, -10px);
  }
  .top_kv__badge {
    width: 9.6rem;
    height: 9.6rem;
    right: 1.6rem;
    bottom: 1.6rem;
    font-size: 1rem;
  }
  .top_kv__badge strong { font-size: 1.5rem; }
  .top_kv__features { grid-template-columns: 1fr; }
}
@media screen and (min-width: 769px) {
  .top_kv {
    padding-bottom: 10rem;
  }
  .top_kv__label br:not(.active), 
  .top_kv__title br:not(.active) { display: none; }
}

/* ============================================================
   TROUBLE
============================================================ */
.top_trouble {
  position: relative;
  min-height: 20rem;
}
.top_trouble .section-inner {
  padding: 0;
  display: grid;
  grid-template-columns: 18rem auto 18rem;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  width: calc(100% - 2rem);
  min-height: 20rem;
  background-color: var(--color_beige);
  box-shadow: 0px 4px 20px 0px #0000001A;
  border-radius: 3rem;

}
.top_trouble .section-inner::before {
  content: '';
  background-color: var(--color_beige);
  width: 90%;
  height: 6rem;
  border-radius: 3rem;
  position: absolute;
  left: 50%;
  top: -2.5rem;
  transform: translateX(-50%);
  z-index: -1;
}
.top_trouble__person {
  width: 100%;
  object-fit: cover;
  object-position: top;
  align-self: end;
  max-height: 22rem;
}
.top_trouble__content {
  padding: 0 2.4rem 3rem;
  text-align: center;
  
}
.top_trouble__heading {
  font-size: clamp(1.8rem, calc(32 / var(--design-width) * 100vw), 3.2rem);
  font-weight: 700;
  color: var(--color_dark);
  margin-bottom: 2.4rem;
  line-height: 1;
}
.top_trouble__heading span {
  font-size: clamp(2rem, calc(40 / var(--design-width) * 100vw), 4rem);
  color: var(--color_main);
}
.top_trouble__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  text-align: left;
}
.top_trouble__list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color_dark);
}
.top_trouble__list li .bi {
  color: var(--color_main);
  font-size: 1.8rem;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .top_trouble .section-inner {
    grid-template-columns: auto auto;
    position: relative;
    margin: 0 auto;
    transform: translateY(-5rem);
  }
  .top_trouble__person {
    display: block;
    max-height: 16rem;
    align-self: end;
  }
  .top_trouble__content {
    grid-column: 1 / -1;
    order: -1;
    padding: 1.6rem 1.6rem 3.2rem;
  }
  .top_trouble__list { grid-template-columns: 1fr; }
}
@media (min-width: 769px) {
  .top_trouble .section-inner {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -5rem);
  }
}

/* ============================================================
   SOLUTION
============================================================ */
.top_solution {
  text-align: center;
}
.top_solution__triangle {
  width: clamp(17rem, calc(344 / var(--design-width) * 100vw), 34.4rem);
  height: clamp(3rem, calc(62 / var(--design-width) * 100vw), 6.2rem);
  background: var(--color_main);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  margin: 0 auto 4rem;
}
.top_solution__heading {
  display: inline-block;
  font-size: clamp(3rem, calc(60 / var(--design-width) * 100vw), 6rem);
  font-weight: 900;
  -webkit-text-stroke: 10px #fff;
   paint-order: stroke fill;
  transform: skew(-5deg);
  color: var(--color_orange);
  line-height: 1.3;
  margin-bottom: 2.4rem;
}
.top_solution__text {
  font-weight: 700;
  font-size: clamp(1.7rem, calc(32 / var(--design-width) * 100vw), 3.2rem);
  color: var(--color_dark);
  line-height: 2;
}
.top_solution__text strong {
  font-weight: 700;
  font-size: clamp(2rem, calc(40 / var(--design-width) * 100vw), 4rem);
  color: var(--color_main);
}
@media (min-width: 769px) {
  .top_solution__text br {
    display: none;
  }
}

/* ============================================================
   SERVICE（選ばれる理由）
============================================================ */
.top_service__list {
  display: flex;
  flex-direction: column;
  gap: 6.4rem;
}
.top_service__item {
  max-width: clamp(40rem, calc(1000 / var(--design-width) * 100vw), 100rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  margin: 0 auto;
}
.top_service__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.top_service__title {
  font-size: clamp(2.8rem, calc(32 / var(--design-width) * 100vw), 3.2rem);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1.6rem;
  color: var(--color_dark);
}
.top_service__title span {
  font-size: clamp(3.2rem, calc(40 / var(--design-width) * 100vw), 4rem);
  color: var(--color_main);
}
.top_service__desc {
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--color_dark);
}
.top_service__note {
  font-size: 1.2rem;
  color: var(--color_muted);
  margin-top: 1.2rem;
  line-height: 1.6;
}
@media (min-width: 769px) {
  .top_service__item--reverse .top_service__img { order: 2; }
  .top_service__item--reverse .top_service__body { order: 1; }
  .top_service__body {
    padding-left: clamp(3rem, calc(60 / var(--design-width) * 100vw), 6rem);
  }
  .top_service__item--reverse .top_service__body {
    padding-left: 0;
    padding-right: clamp(3rem, calc(60 / var(--design-width) * 100vw), 6rem);
  }
}
@media (max-width: 768px) {
  .top_service__item {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .top_service__list { gap: 4.8rem; }
}

/* ============================================================
   CASE（施工実績）
============================================================ */
.top_case__item a {
  display: flex;
  flex-direction: column;
  color: var(--color_dark);
}
.top_case__item a:hover {
  opacity: 0.85;
  transition: var(--transition);
}
.top_case__item img,
.top_case__noimg {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color_light);
}
.top_case__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 0 0.4rem;
}
.top_case__desc {
  font-size: 1.3rem;
  color: var(--color_muted);
  line-height: 1.6;
  margin-top: 0.8rem;
}
.top_case__meta {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
  font-size: 1.2rem;
}
.top_case__meta > div {
  display: flex;
  align-items: center;
  gap: clamp(2rem, calc(30 / var(--design-width) * 100vw), 3rem);
}
.top_case__meta dt {
  font-weight: 700;
  color: var(--color_main);
  background-color: var(--color_sub);
  padding: .25rem 1rem;
  border-radius: 5px;
}
.top_case__comment {
  font-size: 1.2rem;
  color: var(--color_muted);
  margin-top: 0.8rem;
  line-height: 1.5;
}
.top_case__slider {
  padding: 0;
}
.top_case__slider .slick-track { display: flex; }
.top_case__slider .slick-slide {
  display: flex;
  height: auto;
  padding: 0 clamp(1.5rem, calc(22.5 / var(--design-width) * 100vw), 2.25rem);
}
.top_case__slider .slick-slide > a {
  background-color: white;
  height: 100%;
}
.top_case__info {
  padding: 2rem;
}
.top_case__slider .slick-slide > div {
  display: flex;
  width: 100%;
}
.top_case__item {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* Slick arrows: 画像底辺（= スライダー幅の25%）× カード境界（1/3・2/3）に配置 */
.top_case__slider .slick-prev,
.top_case__slider .slick-next {
  z-index: 2;
  width: 3.4rem;
  height: 3.4rem;
  background: var(--color_main);
  border-radius: 50%;
}
.top_case__slider .slick-prev {
  left: calc(100% / 3);
  right: auto;
}
.top_case__slider .slick-next {
  left: calc(200% / 3);
  right: auto;
}
.top_case__slider .slick-prev::before,
.top_case__slider .slick-next::before {
  color: #fff;
  font-size: 1.4rem;
  opacity: 1;
}
@media (min-width:769px) {
  .top_case__slider .slick-prev,
  .top_case__slider .slick-next {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
@media (max-width:768px) {
  .top_case__slider .slick-prev,
  .top_case__slider .slick-next {
    bottom: -3.4rem;
    transform: translate(-50%, 25%);
  }
}

/* ============================================================
   PRICE（料金）
============================================================ */
.top_price__wrap {
  margin: 0 auto;
}
.top_price__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4rem, calc(80 / var(--design-width) * 100vw), 8rem);
  background: var(--color_beige);
  border-radius: 1.2rem;
  padding: 4.8rem 4rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  position: relative;
}
.top_price__item::before, 
.top_price__item::after {
  content: '';
  position: absolute;
  width: clamp(13rem, calc(230 / var(--design-width) * 100vw), 23rem);
  aspect-ratio: 1/1;
  display: block;
  background-size: 100%;
  background-repeat: no-repeat;
}
.top_price__item::before {
  top: -3rem;
  left: -2rem;
  background-image: url(../images/price-left.webp);
}
.top_price__item::after {
  bottom: -3rem;
  right: -2rem;
  background-image: url(../images/price-right.webp);
}
.top_price__label {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.top_price__label strong {
  font-size: clamp(2.5rem, calc(50 / var(--design-width) * 100vw), 5rem);
  font-weight: 700;
}
.top_price__label span {
  font-size: clamp(1.6rem, calc(20 / var(--design-width) * 100vw), 2rem);
  font-weight: 700;
}
.top_price__num {
  font-size: clamp(2.5rem, calc(50 / var(--design-width) * 100vw), 5rem);
  font-weight: 700;
  color: var(--color_main);
  line-height: 1;
  -webkit-text-stroke: 15px #fff;
  paint-order: stroke fill;
}
.top_price__num span {
  font-size: 10rem;
}
.top_price__notes {
  margin: 2rem auto 0;
  font-size: clamp(1.4rem, calc(16 / var(--design-width) * 100vw), 1.6rem);
  line-height: 1.8;
}
.top_price__notes li::before {
  content: '※';
  margin-right: 0.2rem;
}
@media (max-width: 768px) {
  .top_price__item {
    flex-direction: column;
    padding: 3rem 2rem 8rem;
    text-align: center;
  }
}

/* ============================================================
   FAQ（よくある質問）
============================================================ */
.top_faq {
  padding-bottom: clamp(10rem, calc(200 / var(--design-width) * 100vw), 20rem);
  position: relative;
  z-index: 0;
}
.top_faq__list {
  max-width: 100rem;
  margin: 0 auto;
}
.top_faq__item {
  margin-bottom: 1.6rem;
  overflow: hidden;
}
.top_faq__q {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, calc(24 / var(--design-width) * 100vw), 2.4rem);
  cursor: pointer;
  font-size: clamp(1.6rem, calc(20 / var(--design-width) * 100vw), 2rem);
  font-weight: 700;
  line-height: 1.5;
  transition: var(--transition);
}
.top_faq__q:hover { background: var(--color_sub); }
.top_faq__q-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(4rem, calc(60 / var(--design-width) * 100vw), 6rem);
  height: clamp(4rem, calc(60 / var(--design-width) * 100vw), 6rem);
  background: var(--color_main);
  color: #fff;
  font-family: var(--font_eng);
  font-size: clamp(1.2rem, calc(24 / var(--design-width) * 100vw), 2.4rem);
  font-weight: 700;
  flex-shrink: 0;
}
.top_faq__toggle {
  margin-left: auto;
  width: clamp(2.8rem, calc(48 / var(--design-width) * 100vw), 4.8rem);
  height: clamp(2.8rem, calc(48 / var(--design-width) * 100vw), 4.8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid var(--color_main);
  border-radius: 50%;
  flex-shrink: 0;
  transition: var(--transition);
  font-size: 1.4rem;
}
.top_faq__a {
  display: none;
  gap: 1.6rem;
  padding: 2rem 2.4rem;
  padding-left: 0;
  font-size: 1.5rem;
  line-height: 1.8;
  margin-top: .8rem;
  background: white;
}
.top_faq__a.is-open { display: flex; }
.top_faq__a-label {
  width: clamp(4rem, calc(60 / var(--design-width) * 100vw), 6rem);
  height: clamp(4rem, calc(60 / var(--design-width) * 100vw), 6rem);
  background-color: var(--color_beige);
  color: var(--color_main);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top_faq__a-label i {
  display: inline-block;
  transform: rotateX(180deg);
}
@media (max-width: 768px) {
  .top_faq__q {
    padding: 1.6rem;
    gap: 1.2rem;
    font-size: 1.5rem;
  }
  .top_faq__a { padding: 1.6rem; }
}

/* ============================================================
   CTA
============================================================ */
.top_cta {
  background-image: url(../images/footer-bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: clamp(4rem, calc(80 / var(--design-width) * 100vw), 8rem);
  text-align: center;
}
.top_cta .section-inner {
  position: relative;
  z-index: 1;
}
.top_cta__area {
  background-color: var(--color_yellow);
  padding: 1rem;
  border-radius: 5rem;
  font-size: clamp(1.6rem, calc(32 / var(--design-width) * 100vw), 3.2rem);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 3.2rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}
.top_cta__area span {
  font-size: clamp(2rem, calc(40 / var(--design-width) * 100vw), 4rem);
}
.top_cta__title {
  padding-top: clamp(8rem, calc(100 / var(--design-width) * 100vw), 10rem);
  font-size: clamp(2.5rem, calc(50 / var(--design-width) * 100vw), 5rem);
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 2rem;
  color: var(--color_dark);
  -webkit-text-stroke: 9px #fff;
  paint-order: stroke fill;
  transform: skewX(-5deg);
}
.top_cta__title span {
  color: var(--color_orange);
}
.top_cta__rush {
  font-size: clamp(1.9rem, calc(36 / var(--design-width) * 100vw), 3.6rem);
  margin-bottom: 3.2rem;
  font-weight: 900;
  color: white;
  -webkit-text-stroke: 9px var(--color_main);
  paint-order: stroke fill;
  transform: skewX(-5deg);
}
.top_cta__rush span { 
  font-size: clamp(2.4rem, calc(48 / var(--design-width) * 100vw), 4.8rem);
  color: var(--color_yellow); 
}
.top_cta__btns {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 3.2rem;
}
.top_cta__btns .btn {
  font-size: 1.8rem;
  padding: 1.6rem 3.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border: 2px solid white;
}
.btn.solid-line {
  background: #06C755;
  color: #fff;
}
.btn.solid-line:hover {
  opacity: 0.7;
}
.top_cta__tel {
  background-color: white;
  padding: 2rem 1rem;
}
.top_cta__tel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  line-height: 1;
  font-size: 4rem;
  font-weight: 900;
  color: var(--color_main);
}
.top_cta__tel small {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
}
@media (max-width: 768px) {
  .top_cta__btns .btn {
    width: 100%;
    justify-content: center;
  }
  .top_cta__tel a { font-size: 3.2rem; }
  .top_cta__title, .top_cta__rush {
    -webkit-text-stroke-width: 7px;
  }
}
@media (min-width: 769px) {
  .top_cta .sp-only {
    display: none;
  }
}