/* =====================
   ORDER FLOW ページ
   ※ functions.php 例：
   wp_enqueue_style(
     'acero-order-flow',
     get_theme_file_uri('assets/css/order-flow.css'),
     ['acero-style'],
     '1.0'
   );
===================== */

.order-flow {
  background: #D8DAD2;
  color: #28332e;
  font-family: "A-OTF Shuei Mincho Pro", "Yu Mincho", "Hiragino Mincho ProN",
    "游明朝", serif;
}

/* ---- 共通見出し（h2） ---- */

.order-flow h2,
.of-head__title,
.of-after__title,
.of-contact__title {
  font-family: "A-OTF Shuei Mincho Pro", "Yu Mincho", "Hiragino Mincho ProN",
    "游明朝", serif;
  font-size: 42px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.order-flow p{
  font-size:14px;
}

/* =====================
   HERO
===================== */

.of-hero {
  position: relative;
  color: #fff;
  overflow: hidden;
}

.of-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.of-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.of-hero__inner {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 160px 0 120px;
  text-align: center;
}

.of-hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  margin-bottom: 12px;
  margin-top: 0;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
}

.of-hero__title {
  font-family: "A-OTF Shuei Mincho Pro", "Yu Mincho", serif;
  font-size: 42px;
  letter-spacing: 0.2em;
  margin-bottom: 0;
}

.of-hero__lead {
  font-size: 12px;
  line-height: 2;
  margin-top: 7vh;
}


/* =====================
   セクション共通
===================== */

.of-section {
  padding: 50px 0;
}

.of-section__inner {
  margin: 0 10vw;
}

/* =====================
   ORDER FLOW 本文
===================== */

.of-head {
  margin-bottom: 50px;
}

.of-head__title {
  color: #a87b30; /* ゴールド系 */
  font-size: 32px;
  letter-spacing: 0.1em;
  margin-bottom: 0;
}

.of-head__sub {
  font-size: 16px;
  margin-bottom: 16px;
  margin-top: -12px;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
}

.of-head__intro {
  font-size: 12px;
  line-height: 2;
  margin-top: 2vw;
}

/* ステップ全体 */

.of-steps {
  list-style: none;
  margin: 0;
  padding: 0 0 0 60px;
  position: relative;
  padding-inline-start: 0;
}

/* 数字の下に出る縦ライン（グラデーション） */
.of-steps::before {
  content: none;
  position: absolute;
  top: 0;
  bottom: 0;
  /* 数字のど真ん中に来るようにここは微調整 */
  left: 32px; 
  width: 1px;
  background: linear-gradient(to bottom, #D8DBD2 0%, #7F7667 100%);
}

/* 各ステップ */

.of-step {
  display: grid;
  grid-template-columns: 20vw minmax(0, 1fr);
  column-gap: 40px;
  padding-bottom: 40px;
  height: 190px;
}

.of-step:last-child {
  padding-bottom: 0;
}

.of-step__label {
  position: relative;
  padding-left: 10px;
  margin-top: -25px;
}

.of-step__num {
  font-size: 22px;
  letter-spacing: 0.2em;
  margin-bottom: 6px;
  font-family: "Roboto Flex", system-ui, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  color: #7F7667;
  position: relative;           
  display: inline-block;        
}

/* ★最後のステップだけ縦ラインなし */
.of-step:not(:last-child) .of-step__num::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;                     /* 数字のすぐ下から */
  transform: translateX(-50%);
  width: 1px;
  height: 140px;                 /* ラインの長さ。好みで調整OK */
  background: linear-gradient(to bottom, #D8DBD2 0%, #7F7667 100%);
}
.of-step__jp {
  font-size: 16px;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  margin: -33px 0 2px 45px;
}

.of-step__en {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  font-family: "Aboreto", system-ui, -apple-system, BlinkMacSystemFont,
  "Helvetica Neue", Arial, sans-serif;
  margin-left: 47px;
  margin-top: 0;
}

.of-step__label::before {
  content: none;
}

.of-step__body {
  font-size: 12px;
  line-height: 2;
  padding-top: 2px;
  margin-top: -15px;
}
.of-step__body p {
  margin: 0 0 16px;   /* 上0 / 下だけ余白 */
}

.of-step__btn {
  margin-top: 20px;
}

/* ボタン */

.of-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 1vw 8vw;
  border: 1px solid #28332e;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-decoration: none;
  color: #28332e;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
  border-radius: 4px;
}

.of-btn:hover {
  background: #28332e;
  color: #fff;
}

/* =====================
   AFTER MAINTENANCE
===================== */

.of-after__head {
  margin-bottom: 30px;
}

.of-after__title {
  color: #a87b30;
  font-size: 26px;
  letter-spacing: 0.18em;
  margin-block-end: 0;
}

.of-after__sub {
  font-size: 16px;
  margin-top: -10px;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
}

.of-after__body {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  column-gap: 40px;
  align-items: flex-start;
}
.of-after__text{
  width: 45vw;
}
.of-after__text p {
  font-size: 14px;
  line-height: 2;
  margin-bottom: 16px;
}
.of-after__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.of-after__btn {
  margin-top: 5vw;
  display: flex;
  justify-content: center;
}


/* =====================
   768px 以下：ORDER FLOW
===================== */
@media screen and (max-width: 768px) {

  /* ---------- HERO ---------- */
  .of-hero {
    min-height: 520px;
  }

  .of-hero__bg {
    background-size: 255% auto;   /* ちょいアップで年輪どーん */
    background-position: 17% 100%; /* すこし上め */
  }

  .of-hero__inner {
    max-width: 100%;
    padding: 120px 8vw 80px;
    text-align: center;
  }

  .of-hero__title,
  .order-flow h2 {
    font-size: 32px;
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 20px;
  }

  .of-hero__lead {
    font-size: 11px;
    line-height: 1.9;
    margin-top: 32px;
  }

  /* ---------- セクション共通 ---------- */
  .of-section {
    padding: 0 0 48px;
  }

  .of-section__inner {
    margin: 0 6vw;
  }

  .order-flow p {
    font-size: 12px;
    line-height: 1.9;
  }

  /* ---------- ORDER FLOW 見出し部分 ---------- */
  .of-head {
    margin-bottom: 32px;
  }

  .of-head__title {
    font-size: 26px;
    letter-spacing: 0.12em;
  }

  .of-head__sub {
    font-size: 13px;
    margin-top: -8px;
  }

  .of-head__intro {
    font-size: 14px !important;
    margin-top: 35px;
  }
  .order-flow .of-hero__lead {
    font-size: 14px;
    margin-top: 50px;
  }
  /* ---------- ステップ一覧 ---------- */
  .of-steps {
    margin: 0;
  }

  .of-step {
    display: grid;
    grid-template-columns: 20vw minmax(0, 1fr);    column-gap: 0;
    row-gap: 12px;
    padding-bottom: 32px;
    height: auto;                /* 固定高さは解除 */
    position: relative;
  }

  .of-step:last-child {
    padding-bottom: 0;
  }

  .of-step__label {
    display: grid;
    grid-template-columns: auto 300px;  /* 左：番号 / 右：テキスト */
    grid-template-rows: 35px auto;    /* 右側を2段に */
    column-gap: 8px;
    align-items: flex-start;
    padding-left: 0;
    margin: 0 0 4px 0;
  }

  .of-step__num {
    font-size: 22px !important;
    letter-spacing: 0;
    grid-column: 1;
    grid-row: 1 / span 2;    /* 左で2行ぶち抜きにして縦センター寄せ */
    margin: 0;   
  }

  /* 縦ラインは少し短めに */
  .of-step:not(:last-child) .of-step__num::after {
    content: none;
  }
  /* 最後のステップ以外に縦線を表示 */
  .of-step:not(:last-child)::after {
    content: "";
    position: absolute;

    /* 左右位置：数字の真ん中に合わせる（ここは調整ポイント） */
    left: 11px;             /* 数字の位置を見ながら微調整してね */
    width: 1px;

    /* 上端：数字の下あたりからスタート */
    top: 32px;              /* 「01」の下にくるように調整 */

    /* 下端：ブロックの下から 20px 手前で終わる */
    bottom: 20px;           /* ← ここが「高さ = of-step の高さ − 20px」のキモ */

    background: linear-gradient(to bottom, #D8DBD2 0%, #7F7667 100%);
  }

  .of-step__jp {
    font-size: 16px !important;
    margin: 4px 0 0 0;
    grid-column: 2;
    grid-row: 1;
    margin: 4px 0 2px 0;
    line-height: 1.4;
  }

  .of-step__en {
    font-size: 11px;
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    line-height: 1.4;
  }

  .of-step__body {
    font-size: 12px;
    line-height: 1.9;
    margin: 70px 0 0 -40px;
  }

  .of-step__body p {
    margin: 0 0 14px;
    font-size: 14px;
  }

  .of-step__btn {
    margin-top: 16px;
    width: 50vw;
  }

  .of-step__btn .of-btn {
    width: 100%;
    max-width: 320px;
    padding: 10px 0;
    box-sizing: border-box;
  }


  /* ---------- AFTER MAINTENANCE ---------- */
  .of-after__head {
    margin-bottom: 24px;
  }

  .of-after__title {
    font-size: 22px;
    letter-spacing: 0.16em;
  }

  .of-after__sub {
    font-size: 13px;
    margin-top: -6px;
  }

  .of-after__body {
    grid-template-columns: 1fr;  /* テキスト → 画像の縦並び */
    row-gap: 24px;
  }

  .of-after__text {
    width: 100%;
  }

  .of-after__text p {
    font-size: 14px;
    line-height: 1.9;
  }

  .of-after__media img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .of-after__btn {
    margin-top: 50px;
    justify-content: center;
  }

  /* ---------- 下部リンク（FIRST ORDER / ORDER FLOW） ---------- */
  .of-contact__inner {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .of-links {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .of-link {
    height: 220px;
  }
}