/* =========================================================
  共通
========================================================= */
.commit, .commitStep, .commitCta, .commitRank, .commit_wrap_read{
    box-sizing: border-box;
  }
  .commit * , .commitStep * , .commitCta * , .commitRank *{
    box-sizing: border-box;
  }
  
  /* 金グラデ（共通で使う） */
  .gold_grad{
    display: inline-block;
    white-space: nowrap;
    font-weight: 900;
    background: linear-gradient(
      180deg,
      #fffdf4 0%,
      #fff3c9 18%,
      #ffe39c 38%,
      #f7c85c 55%,
      #ffd88c 72%,
      #fff2c8 88%,
      #e3b955 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .commit-textWhite {
    color: #fff !important;
  }
  .nowrap { white-space: nowrap; }
.dash{
  letter-spacing: -0.2em !important; /* ここ重要 */
}

  /* =========================================================
    READ（導入）
  ========================================================= */
  .commit_wrap_read{
    max-width: 100%;
    background-image: url(../images/commit_bg02_read.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .commit_wrap_read h1{
    font-size: clamp(24px, 2.8vw, 38px);
    padding: 50px 10px 0 10px;
    color: #fff;
    text-align: center;
    line-height: 1.35;
    font-family: "Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","MS PMincho",serif;
  }
  .read_text{
    font-size: 16px;
    color: #fff;
    padding: 0 10px 50px 10px;
    text-align: center;
    line-height: 2;
    margin: 40px auto 0px auto;
    max-width: 980px;
  }
  
  /* =========================================================
    MARKETING / DESIGN 共通（上段：黒ボックス＋1のブロック）
  ========================================================= */
  .commit{
    position: relative;
    overflow: hidden;
    padding: 48px 0 48px;
  }
  
  /* 背景（セクション別に差し替え） */
  .commit::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 130px; /* 黒ボックスの上に背景が出ないように */
    bottom: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  /* 下端ゴールドライン */
  .commit::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #caa14a, #fff2c9, #caa14a);
    z-index: 3;
  }
  
  /* PC帯（MARKETING/DESIGN画像） */
  .commit .commit__band{
    position: absolute;
    left: 0;
    top: 90px;
    width: 100%;
    z-index: 1;
    pointer-events: none;
  }
  .commit .commit__band img{
    width: 100%;
    height: auto;
    display: block;
   /*   opacity: .92;*/
  }
  
  /* 中身 */
  .commit .commit__inner{
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
  }
  
  /* 黒い見出しボックス */
  .commit .commit__titleBox{
    display: inline-block;
    background: #050505;
    color: #fff;
    border-radius: 18px;
    padding: 28px 36px;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
  }
  .commit .commit__title{
    margin: 0 0 12px 0;
    line-height: 1.15;
    font-size: clamp(18px, 2.8vw, 44px);
    font-weight: 700;
    letter-spacing: .02em;
    font-family: "Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","MS PMincho",serif;
    color: #fff;
  }
  .commit .commit__subtitle{
    margin: 0;
    font-size: clamp(16px, 1.6vw, 28px);
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff !important;
  }
  
  /* 本文レイアウト */
  .commit .commit__content{
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 28px;
    align-items: end;
    margin-top: 36px;
  }
  
  /* ステップ見出し */
  .commit .commit__stepHead{
    display: flex;
    align-items: center;
    gap: 22px;
  }
  .commit .commit__stepNum{
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(64px, 7vw, 110px);
    line-height: 1;
    font-weight: 300;
    color: #8b5c45;
    margin-left: 6px;
    position: relative;
    top: -5px;
  }
  .commit .commit__stepLabel{
    background: #9b664d;
    color: #fff;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 14px 26px;
    font-size: clamp(16px, 2vw, 26px);
    line-height: 1.2;
  }
  
  /* チェックリスト */
  .commit .commit__checklist{
    list-style: none;
    padding: 0;
    margin: 18px 0 10px;
  }
  .commit .commit__checklist li{
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0;
    font-size: clamp(16px, 1.6vw, 22px);
    font-weight: 800;
    color: #111;
  }
  .commit .commit__checklist li::before{
    content: "✓";
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border: 2px solid #333;
    border-radius: 4px;
    font-weight: 900;
    font-size: 22px;
    line-height: 0.8;
    color: #9b664d;
    background: rgba(255,255,255,.55);
  }
  .commit .commit__checklist.commit-txtWhite li{
    color: #fff;
  }
  
  /* 点線 */
  .commit .commit__divider{
    border: none;
    border-top: 2px dotted rgba(0,0,0,.35);
    margin: 18px 0 18px;
    width: min(560px, 92%);
  }
  
  /* 本文 */
  .commit .commit__body p{
    margin: 0 0 12px 0;
    font-size: 15px;
    line-height: 1.9;
    color: #111111;
    width: min(560px, 100%);
  }
  
  /* 右イラスト */
  .commit .commit__right{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .commit .commit__illust{
    width: min(380px, 34vw);
    height: auto;
    display: block;
  }
  
  /* =========================================================
    MARKETING
  ========================================================= */
  .commit--marketing::before{
    background-image: url(../images/commit_bg04_hand.webp);
  }
  
  /* =========================================================
    DESIGN
  ========================================================= */
  /*.commit--design::before{
    background-image: url(../images/commit_bg07_man.webp);
  }*/

  .commit--design::before{
    background:
      linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08)),
      url(../images/commit_bg07_man.webp) center / cover no-repeat;
  }

  
  .commit--design .commit__band{
    top: 90px;
  }
  
  /* =========================================================
    2 / 3 セクション（共通）
  ========================================================= */
  .commitStep{
    position: relative;
    padding: 56px 0;
    overflow: hidden;
  }
  
  /* 上下ゴールドライン */
  .commitStep::before,
  .commitStep::after{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background:#d7b55c;
    z-index:2;
  }
  .commitStep::before{ top:0; }
  .commitStep::after{ bottom:0; }
  
  .commitStep__inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 3;
  }
  
  .commitStep__grid{
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 28px;
    align-items: center;
  }
  .commitStep__grid--hasIllust{
    align-items: end;
  }
  .commitStep__grid--cards{
    grid-template-columns: 1fr 420px;
    align-items: start;
  }
  
  .commitStep__head{
    display: flex;
    align-items: center;
    gap: 22px;
  }
  .commitStep__num{
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(64px, 7vw, 110px);
    line-height: 1;
    font-weight: 300;
    color: #8b5c45;
    position: relative;
    top: -7px;
  }
  .commitStep__label{
    background: #9b664d;
    color: #fff;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 14px 26px;
    font-size: clamp(16px, 2vw, 26px);
    line-height: 1.2;
  }
  
  .commitStep__check{
    list-style: none;
    padding: 0;
    margin: 18px 0 10px;
  }
  .commitStep__check li{
    display:flex;
    align-items:center;
    gap:14px;
    margin: 10px 0;
    font-size: clamp(16px, 1.6vw, 22px);
    font-weight: 800;
    color:#111;
  }
  .commitStep__check li::before{
    content:"✓";
    width:24px;height:24px;
    display:inline-grid;
    place-items:center;
    border:2px solid #333;
    border-radius:4px;
    font-weight:900;
    font-size: 22px;
    line-height: 0.8;
    color:#9b664d;
    background: rgba(255,255,255,.55);
  }
  .commitStep__check.commit-txtWhite li{
    color: #fff;
  }
  
  .commitStep__divider{
    border: none;
    border-top: 2px dotted rgba(0,0,0,.35);
    margin: 18px 0 18px;
    width: min(560px, 92%);
  }
  
  .commitStep__body p{
    margin: 0 0 12px 0;
    font-size: 15px;
    line-height: 1.9;
    color: #111;
    width: min(560px, 100%);
  }
  
  .commitStep__right{
    display:flex;
    justify-content:center;
    align-items:flex-end;
  }
  .commitStep__right--empty{ min-height: 1px; }
  .commitStep__illust{
    width: min(420px, 90%);
    height: auto;
    display:block;
  }
  
  /* 背景：布（2） */
  .commitStep--cloth{
    background: url(../images/commit_bg00_cloth.webp) center / cover no-repeat;
  }
  .commitStep--cloth::selection{}
  /* 布背景を少しだけ白っぽく */
  .commitStep--cloth .commitStep__inner{
    background: rgba(255,255,255,.0);
  }
  
  /* 背景：MAP（3） */
  .commitStep--map{
    background: 
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.3)),
    url(../images/commit_bg05_map.webp) center / cover no-repeat;
  }
  
  /* 背景：PC（DESIGN 3） */
  .commitStep--pc{
    background:
      linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.00)),
      url(../images/commit_bg08_pc.webp) center / cover no-repeat;
  }
  
  
/* ===============================
  3つのボックス
=============================== */
.commitCards{
    display: grid;
    gap: 44px;                 /* 矢印を挟むので広めに */
    justify-items: center;     /* カードを中央寄せ */
  }
  
  /* 1枚のカード */
  .commitCard{
    /* 色は各modifierで差し替える */
    --accent: #c74e57;
  
    position: relative;
    width: min(560px, 100%);
    padding: 22px 26px 20px 60px;  /* 左に丸が食い込む分の余白 */
    border-radius: 14px;
  
    background: var(--accent);
    color: #fff;
  
    border: 3px solid rgba(255,255,255,.78); /* 白フチ */
    box-shadow: 0 16px 32px rgba(0,0,0,.18);
    overflow: visible; /* 矢印・丸が外に出てもOK */
  }
  
  /* 01/02/03 の丸（左にかぶせる） */
  .commitCard__no{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
  
    width: 56px;
    height: 56px;
    border-radius: 999px;
  
    display: grid;
    place-items: center;
  
    background: #fff;
    color: var(--accent);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: 700;
  
    border: 2px solid rgba(0,0,0,.06);
    box-shadow: 0 10px 18px rgba(0,0,0,.18);
  }
  
  /* タイトル＋本文 */
  .commitCard__top{
    display: block;    /* 横並び解除 */
    margin: 0 0 8px;
  }
  
  .commitCard__ttl{
    font-weight: 900;
    font-size: 20px;
    line-height: 1.25;
    color: #fff;
  }
  
  .commitCard__txt{
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,.92);
  }
  
  /* v の矢印（01↘02、02↘03） */
  .commitCard:not(:last-child)::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -30px;          /* gapに食い込ませる */
    width: 14px;
    height: 14px;
  
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: translateX(-50%) rotate(45deg);
    opacity: .7;
  }
  
  /* 色（HTMLのclassはそのまま使う前提） */
  .commitCard--blue{   --accent: #c74e57; } /* 01：赤 */
  .commitCard--yellow{ --accent: #ea7d4b; } /* 02：オレンジ */
  .commitCard--red{    --accent: #53a463; } /* 03：グリーン */

  /* ===============================
  SPではみ出し防止
=============================== */
@media (max-width: 480px){
    .commitCards{
      justify-items: stretch;
    }
  
    .commitCard{
      width: 100%;
      padding-left: 96px;  /* ★ここを増やす（丸+余白分） */
    }
  
    .commitCard__no{
      left: 26px;          /* ★丸の位置を少し左寄せ */
      transform: translate(0, -50%);
    }
  
    .commitCard__ttl{
      font-size: 16px;     /* タイトルが長いので少しだけ抑える */
    }
  }
  
  

  
  /* =========================================================
    CTA（共通）
  ========================================================= */
  .commitCta{
    position: relative;
    padding: 70px 0 80px;
    background: url(../images/commit_bg00_cloth.webp) center / cover no-repeat;
    overflow: hidden;
  }
  
  /* 矢印の丸（画像） */
  .commitCta__arrow{
    width: 100px;
    height: 100px;
    margin: -39px auto 22px;
    /*border-radius: 999px;*/
    /*background: #fff;*/
    /*border: 2px solid #d7b55c;*/
    /*display: grid;*/
    /*place-items: center;*/
    /*box-shadow: 0 8px 22px rgba(0,0,0,.10);*/
  }
  .commitCta__arrow img{
    width: 100px;
    height: auto;
    display:block;
  }
  @media (max-width: 600px){
    .commitCta__arrow{
        width: 50px;
        height: 50px;
        margin: -39px auto 20px;
        /*border-radius: 999px;*/
        /*background: #fff;*/
        /*border: 2px solid #d7b55c;*/
        /*display: grid;*/
        /*place-items: center;*/
        /*box-shadow: 0 8px 22px rgba(0,0,0,.10);*/
      }
      .commitCta__arrow img{
        width: 100%;
      }
  }

  .commitCta__inner{
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
  }

  .commitCta__kicker{
    margin: 0 0 12px;
    font-size: 14px;
    letter-spacing: .06em;
    color: #111;
    font-weight: 700;
  }
  .commitCta__title{
    margin: 0 0 18px;
    font-size: clamp(18px, 2.6vw, 38px);
    font-family: "Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","MS PMincho",serif;
    font-weight: 800;
    color: #443b2b;
    text-shadow: 2px 2px 2px rgba(0,0,0,.15);
  }
  .commitCta__text{
    margin: 0 auto 16px;
    max-width: 860px;
    font-size: 15px;
    line-height: 2;
    color:#111;
  }
  .commitCta__note{
    margin: 60px 0 22px;
    font-size: 14px;
    color:#111;
    font-weight: 700;
  }
  
  /* ボタン（波背景） */
  .commitCta__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 25px 30px;
    border-radius: 10px;
    text-decoration: none;
    color: #fff !important;
    font-weight: 900;
    letter-spacing: .04em;
    background: url(../images/commit_bg02_read.webp) center / cover no-repeat;
    box-shadow: 5px 12px 15px rgba(0,0,0,.30);
    font-size: clamp(15px, 2.8vw, 23px);
    transition: 0.3s
  }
  .commitCta__btn:hover{
    filter: brightness(2.5);
  }
  /*.commitCta__btnIcon{
    font-size: 50px;
    line-height: 1;
    transform: translateY(-1px);
  }*/
  
/* ===== 右端の「◯の中に→」：安定版（文字で表示） ===== */

.commitCta__btn{
  position: relative;     /* 追加 */
  padding-right: 86px;    /* 追加：右端アイコン分の余白 */
}

.commitCta__btn::after{
  content: "→";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);

  width: 32px;            /* ◯の大きさ（見本寄せ） */
  height: 32px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 9999px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;        /* 矢印の大きさ */
  line-height: 1;
  color: rgba(255,255,255,.95);

  pointer-events: none;
}

@media (max-width: 767px){
  .commitCta__btn{
    padding: 16px 18px;   /* 少し詰める（必要最小限） */
    padding-right: 68px;  /* 右の◯分も少し詰める */
  }
  .commitCta__btn::after{
    font-size: 16px;
    width: 25px;            /* ◯の大きさ（見本寄せ） */
    height: 25px;
  }
}




  
  /* =========================================================
    Designer Ranking
  ========================================================= */
  .commitRank{
    padding: 30px 0;
    background: #fff;
    margin-top: 50px;
  }
  .commitRank__inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 26px;
    align-items: center;
    background: #fff;
  }
  .commitRank__text{
    padding: 18px 10px;
    text-align: center;
  }
  .commitRank__title{
    margin: 0 0 14px;
    font-size: clamp(22px, 2.2vw, 34px);
    font-family: "Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","MS PMincho",serif;
    font-weight: 900;
    color:#111;
  }


  .sectionHeading{
    --line: #111;
    --bg: #fff;
  
    --notch: 14px;        /* 三角の大きさ */
    --notchHalf: 7px;     /* ↑の半分（calcで割り算しない方が安全） */
    --lineY: 0px;         /* 線の基準位置（見た目で微調整用） */
  
    position: relative;
    padding-bottom: 26px; /* 下の飾り分 */
    margin: 0;
  }
  
  /* 横線 */
  .sectionHeading::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--lineY);
    height: 1px;
    background: var(--line);
  }
  
  /* 中央のV（線にかぶせて“切り欠き”にする） */
  .sectionHeading::before{
    content: "";
    position: absolute;
    left: 50%;
    /* ★ここがポイント：線より上に少しかぶせる */
    bottom: calc(var(--lineY) - var(--notchHalf));
    width: var(--notch);
    height: var(--notch);
    background: var(--bg);                 /* 線を隠して切り欠きに */
    transform: translateX(-50%) rotate(45deg);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    z-index: 1;                            /* 線より手前 */
  }
  

  
  .commitRank__desc{
    margin: 20px 0;
    font-size: 14px;
    line-height: 2;
    color:#111;
  }
  
  .commitRank__btn{
    display: inline-flex;
    align-items:center;
    justify-content:center;
    gap: 12px;
    padding: 10px 30px;
    border-radius: 10px;
    text-decoration:none;
    font-weight: 500;
    color:#fff !important;
    background: #4d4124;
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
    transition: 0.3s;
    margin-top: 30px;
    font-size: clamp(16px, 2.8vw, 18px);
  }
  .commitRank__btn:hover{
    background: #786334 !important;
    text-decoration:none !important;
  }
  .commitRank__btnIcon{
    font-size: 22px;
    line-height: 1;
    transform: translateY(-1px);
  }
  
  /* ===== 右端の「◯の中に→」：安定版（文字で表示） ===== */

.commitRank__btn{
  position: relative;     /* 追加 */
  padding-right: 70px;    /* 追加：右端アイコン分の余白 */
}

.commitRank__btn::after{
  content: "→";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);

  width: 28px;            /* ◯の大きさ（見本寄せ） */
  height: 28px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 9999px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;        /* 矢印の大きさ */
  line-height: 1;
  color: rgba(255,255,255,.95);

  pointer-events: none;
}

@media (max-width: 767px){
  .commitRank__btn{
    padding: 16px 18px;   /* 少し詰める（必要最小限） */
    padding-right: 68px;  /* 右の◯分も少し詰める */
  }
  .commitRank__btn::after{
    font-size: 16px;
    width: 25px;            /* ◯の大きさ（見本寄せ） */
    height: 25px;
  }
}
  
  
  .commitRank__img{
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0,0,0,.12);
  }
  .commitRank__img img{
    width: 100%;
    height: auto;
    display:block;
  }
  
  /* =========================================================
    レスポンシブ
  ========================================================= */
  @media (max-width: 1024px){
    /* 帯はタブレット以下で消す */
    .commit .commit__band{ display:none; }
  
    .commit .commit__content{
      grid-template-columns: 1fr;
      gap: 18px;
    }
    .commit .commit__right{
      justify-content:center;
    }
    .commit .commit__illust{
      width: min(420px, 80vw);
    }
    .commit::before{
      top: 80px;
    }
  
    .commitStep__grid,
    .commitStep__grid--cards,
    .commitRank__inner{
      grid-template-columns: 1fr;
    }
  
    .commitCards{
      margin-top: 18px;
    }
  }
  
  @media (max-width: 600px){
    .commit{ padding: 28px 0 32px; }
    .commit .commit__inner{ padding: 0 16px; }
  
    .commit .commit__stepHead{ gap: 14px; }
    .commit .commit__stepLabel{ padding: 12px 18px; }
  
    .commitStep{ padding: 40px 0; }
    .commitStep__inner{ padding: 0 16px; }
  
    .commitCta{ padding: 62px 0 70px; }
    .commitCta__inner{ padding: 0 16px; }
  
    .commitRank{ padding: 48px 0; }
    .commitRank__inner{ padding: 0 16px; }

      /* 黒い見出しボックス */
    .commit .commit__titleBox{
      width: 100%;
      text-align: center;
    }

  }