@charset "UTF-8";

/* ============================================================
   Web Fonts
   Caveat       … 英語タイトル（手書き風）
   Hina Mincho  … 日本語タイトル（明朝）
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Hina+Mincho&display=swap");

/* ============================================================
   rem 換算ルール
   ------------------------------------------------------------
   html に font-size:62.5% を指定して 1rem = 10px としています。
     10px = 1.0rem   16px = 1.6rem   24px = 2.4rem
     12px = 1.2rem   15px = 1.5rem   32px = 3.2rem
     14px = 1.4rem   20px = 2.0rem   48px = 4.8rem
   px ÷ 10 = rem で換算できます。
   ============================================================ */

/* ============================================================
   Design Tokens
   ============================================================ */
:root {
  /* 配色 */
  --color-bg: #f2f2f2; /* 基本背景 */
  --color-text: #190606; /* 基本テキスト（濃い） */
  --color-text-light: #f3f3f3; /* 反転テキスト（明るい） */
  --color-accent: #c58b21; /* さし色 */
  --color-bk: #141414; /* BK */

  /* タイポグラフィ */
  --font-en: "Caveat", cursive;
  --font-ja:
    "Hina Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --font-body:
    "Shippori Mincho B1", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

/* ============================================================
   Base
   ============================================================ */
/* 1rem = 10px に正規化（rem換算の基準） */
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  -webkit-text-size-adjust: 100%;
  margin-top: 0px !important;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* 基本背景：#EEEEEE の上に bg-bk.png を 20% の濃さで重ねる
     （白を80%かぶせてテクスチャを薄く見せる）
     ※ アップロード名が wh-bg.png の場合はパスを差し替えてください */
  background-color: var(--color-bg);
  background-image:
    linear-gradient(rgba(238, 238, 238, 0.4), rgba(238, 238, 238, 0.4)),
    url("../img/bg-bk.png");
  background-repeat: no-repeat, repeat;
  background-size:
    cover,
    200px 200px; /* テクスチャはタイル状に繰り返し */
  background-position:
    center,
    top left;

  color: var(--color-text);
  font-family: var(--font-body);

  line-height: 1.8;
  letter-spacing: 0.02em;
}
main {
  font-size: 1.6rem;
  line-height: 2;
  font-style: normal;
  font-weight: 500;
}

p {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
下層ページtitle
   ============================================================ */

.feature-hero,
.wood-stove-option-hero,
.fire-hero,
.wood-hero,
.firewood-hero,
.company-hero,
.faq-hero {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  padding: 150px 20px 130px;
  text-align: center;
  margin-top: 56px; /* position: relative と top: 18px を削除してこれに */
}

.hero__en {
  margin: 0 0 24px;
  font-family: var(--font-en, cursive);
  font-size: clamp(5.2rem, 8vw, 10rem);
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--color-text-light);
}
.hero__inner span {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero__inner span::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: currentColor;
}

/* ============================================================
下層ページtitle下sub
   ============================================================ */
.hero-bottom {
  padding-top: 100px;
  color: var(--color-text-light);
}
.hero__sub {
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.hero__sub::before {
  content: "";
  width: 15%; /* 線の長さ（横） */
  max-width: 110px;
  height: 1px; /* 線の太さ（縦） */
  background: currentColor;
  flex-shrink: 0;
}
.hero__sub::after {
  content: "";
  width: 15%; /* 線の長さ（横） */
  max-width: 110px;
  height: 1px; /* 線の太さ（縦） */
  background: currentColor;
  flex-shrink: 0;
} /*
@media (max-width: 783px) {
  .feature-hero,
  .wood-stove-option-hero,
  .fire-hero,
  .wood-hero,
  .firewood-hero,
  .company-hero,
  .faq-hero {
    margin-top: 43px; /* position: relative と top: 18px を削除してこれに */

@media (max-width: 768px) {
  .hero-bottom {
    padding-top: 60px;
  }
}
/* ============================================================
下層ページtitle 線の動き
   ============================================================ */
.hero__deco {
  position: absolute;
  z-index: 3;
  right: 1vw;
  top: 157px;
  width: 48%;
  height: auto;
  pointer-events: none;
  max-width: 780px;
}

.hero__deco-path {
  fill: none;
  stroke: rgba(243, 243, 243, 0.75);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 8000;
  stroke-dashoffset: 8000;
}

.hero__deco.is-drawn .hero__deco-path {
  animation: featureDraw 10s ease forwards;
}
@keyframes featureDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (min-width: 2000px) {
  .hero__deco {
    left: 50%; /* 要素の左端を中央に */
    margin-left: 100px; /* そこから右へ100pxずらす */
  }
}

@media (max-width: 980px) {
  .hero__deco {
    width: 56vw;
    top: 182px;
  }
}

@media (max-width: 768px) {
  .hero__deco {
    width: 60vw;
    top: 124px;
  }
  .feature-hero,
  .wood-stove-option-hero,
  .fire-hero,
  .wood-hero,
  .firewood-hero,
  .company-hero,
  .faq-hero {
    margin-top: 64px;
    padding: 80px 20px 80px;
  }
  .hero__en {
    margin: 0 0 15px;
  }
}

/* ============================================================
   Title — 英語（Caveat）
   ============================================================ */
.title-en {
  position: relative;
  display: inline-block;
  margin-bottom: 40px;
  padding-bottom: 12px;
  width: 100%;
  color: var(--color-text);
  font-family: var(--font-en);
  font-size: clamp(2rem, 2.6vw, 3.2rem);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.title-en::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background: currentColor;

  transform: scaleX(0);
  transform-origin: left;
}

.title-en.is-line::after {
  animation: titleLine 0.8s ease forwards;
}

@keyframes titleLine {
  to {
    transform: scaleX(1);
  }
}

/* 下線をセクション幅いっぱいに伸ばす場合 */
.title-en--full {
  display: block;
}

/* ============================================================
   Title — 日本語（Hina Mincho）
   ============================================================ */
.title-ja {
  margin: 0;
  color: var(--color-text); /* #190606 */
  font-family: var(--font-ja); /* "Hina Mincho" */
  font-size: clamp(2rem, 2.6vw, 3.2rem);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  padding-bottom: 60px;
}

@media (max-width: 768px) {
  main {
    font-size: 1.5rem;
  }
}

/* ============================================================
  オレンジ数字
============================================================ */

.section__num {
  color: var(--color-accent, #c58b21);
  font-family: var(--font-ja, serif);
  font-size: clamp(3rem, 3vw, 5rem);
  line-height: 1;
}
/* ============================================================
  キャッチtitle日本語
   ============================================================ */
.section__catch {
  font-family: var(--font-ja, serif);
  font-size: clamp(1.8rem, 1.5vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-align: center;
}

/* ============================================================
   Accent ユーティリティ
   ============================================================ */
.is-accent {
  color: var(--color-accent);
} /* #C58B21 */
.is-light {
  color: var(--color-text-light);
} /* #F3F3F3 */

/* ============================================================
   CTA Button（2カラー / ホバーで矢印が右に動く）
   ------------------------------------------------------------
   横長・左テキスト・右に水平線＋矢印（→）。
   .cta            … 枠線タイプ（明るい背景用 / テキスト #190606）
   .cta--accent    … 塗りタイプ（さし色 #C58B21 / テキスト #F3F3F3）
   ============================================================ */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem; /* 24px */
  min-width: 28rem; /* 280px */
  padding: 2rem 2.4rem; /* 20px 24px */
  font-size: 2rem; /* 15px */
  letter-spacing: 0.08em;
  line-height: 1;
  cursor: pointer;
  /* 枠線タイプ（明るい背景用） */
  background-color: transparent;
  border: 1px solid var(--color-accent);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}
.cta:hover,
.oven__cta:hover {
  color: #adadad;
}
/* 矢印部分（線＋ヘッド） */
.cta__arrow {
  position: relative;
  right: -50px;
  flex-shrink: 0;
  width: 7rem; /* 40px：矢印の線の長さ */
  height: 1px;
  background-color: currentColor;
  transition:
    transform 0.3s ease,
    width 0.3s ease;
  color: var(--color-accent);
}
.cta__arrow::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -1px;
  width: 1rem;
  border-top: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.cta__arrow-brn {
  position: relative;
  right: -50px;
  flex-shrink: 0;
  width: 7rem; /* 40px：矢印の線の長さ */
  height: 1px;
  background-color: currentColor;
  transition:
    transform 0.3s ease,
    width 0.3s ease;
  color: var(--color-text);
}
.cta__arrow-brn::after {
  content: "";
  position: absolute;

  top: -3px;
  right: -1px;
  width: 1rem;
  border-top: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.cta-wh {
  border: 1px solid var(--color-text-light);
  color: var(--color-text-light);
}

/* 矢印部分（線＋ヘッド） */
.cta__arrow-wh {
  position: relative;
  right: -50px;
  flex-shrink: 0;
  width: 7rem; /* 40px：矢印の線の長さ */
  height: 1px;
  background-color: currentColor;
  transition:
    transform 0.3s ease,
    width 0.3s ease;
  color: var(--color-text-light);
}
.cta__arrow-wh::after {
  content: "";
  position: absolute;

  top: -3px;
  right: -1px;
  width: 1rem;
  border-top: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.cta-org {
  color: var(--color-accent);
}

/* ホバー：矢印が右へ少し動く */
.cta:hover .cta__arrow,
.cta:hover .cta__arrow-brn,
.cta:hover .cta__arrow-wh {
  transform: translateX(1.5rem);
}

/* フォーカス可視化（キーボード操作） */
.cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ============================================================
   CTA — さし色（塗り）タイプ
   ============================================================ */
.cta--accent {
  color: var(--color-text-light); /* #F3F3F3 */
  border-color: var(--color-accent);
}
.cta--accent:hover {
  /* 塗りタイプは少し暗くするだけ。矢印の動きは共通 */
  background-color: #b07d18;
  color: var(--color-text-light);
  border-color: #b07d18;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --fs-body: 1.5rem; /* SP本文 15px */
  }
  .title-en {
    margin-bottom: 40px;
  } /* 26px */

  .cta {
    width: 100%;
    min-width: 0;
    padding: 1.8rem 1rem; /* 18px 10px */
    width: 86%;
    max-width: 500px;
    font-size: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}