/* ==========================================================================
   Service page - ヘッダー下〜3つのボタン
   ========================================================================== */
   .service-page{
    position: relative;
    background: var(--color-next-bg);
    padding-top: var(--header-h);
    container-type: inline-size;
  }
  
  .service-page__inner{
    max-width: 1536px;
    margin: 0 auto;
    padding-inline: clamp(24px, 6.51cqw, 100px);
    /* ②：ヘッダー→(service) works の②と同じ */
    padding-top: 160px;
    padding-bottom: 100px; /* ⑤：ボタン→クリーム背景 の余白100px */
  }
  
  .service-page__eyebrow{
    font-family: var(--font-en);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .1em;
    color: var(--color-text);
  }
  
  .service-page__heading{
    margin-top: 16px;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 24px;
    letter-spacing: .1em;
    color: #493c33;
  }
  
  /* ③：見出し→3つのボタン の余白118px */
  .service-page__nav{
    margin-top: 118px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: min(116px, 7.552cqw);
    row-gap: 24px;
  }
  
  /* ①：シンプルな長丸ボタン */
  .service-page__nav-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 230px; /* ①：グラフィックデザインの横幅に3つとも統一 */
    padding: 15px 20px;
    border: 1px solid var(--color-teal);
    border-radius: 999px;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .1em;
    color: var(--color-teal);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .3s ease, color .3s ease;
  }
  .service-page__nav-btn:hover{
    background: var(--color-teal);
    color: #ffffff;
  }
  
  /* 画面幅が縮んでボタンがぶつかりそうになったら縦積みに */
  @container (max-width: 1000px){
    .service-page__nav{
      flex-direction: column;
      align-items: center;
    }
  }
  
  /* ==========================================================================
     Service category（Webサイト制作／Web画像制作／グラフィックデザイン 共通）
     ========================================================================== */
  .service-category{
    position: relative;
    background: var(--color-bg);
    width: 100%;
    container-type: inline-size; /* このセクション内の@containerを機能させるために必要 */
  }
  
  .service-category__inner{
    max-width: 1536px;
    margin: 0 auto;
    padding-inline: clamp(24px, 6.51cqw, 100px);
    /* ⑥：背景の中の上下の余白100px */
    padding-block: 100px;
  }
  
  /* ⑦・⑧：見出しテキストと、その後ろの帯シェイプ */
  .service-category__band{
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .service-category__band-shape{
    position: absolute;
    inset: 0;
    background: var(--color-teal);
  }
  .service-category__band-text{
    position: relative;
    z-index: 1;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 26px;
    letter-spacing: .1em;
    color: #ffffff;
  }
  
  /* ⑨：帯→説明文 の余白100px */
  .service-category__desc{
    margin-top: 100px;
    margin-inline: auto; /* 塊自体は中央配置 */
    width: fit-content; /* 文章の幅にぴったり合わせる */
    text-align: left; /* テキストは左揃え */
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: .1em;
    line-height: 40px;
    color: var(--color-text);
  }
  
  /* ⑩：説明文→3つのボックス の余白120px。
     3つのボックス+余白で常に画面幅いっぱい。ぶつかりそうになったらスワイプ
     （ループはさせず、両端で止まる） */
  .service-plans{
    margin-top: 120px;
    display: flex;
    gap: 32px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .service-plans::-webkit-scrollbar{ display: none; }
  
  .service-plan{
    flex: 1 1 0;
    min-width: 300px;
    scroll-snap-align: start;
    background: #ffffff;
    border-radius: 30px;
    /* ⑪：ボックス内の余白 上下60px・左右20px */
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  /* ⑫：丸イラスト＋プラン名。中央配置 */
  .service-plan__head{
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .service-plan__icon{
    display: block;
    width: 39.51px;
    height: 40px;
  }
  .service-plan__name{
    font-family: var(--font-en);
    font-weight: 400;
    font-size: 24px;
    letter-spacing: .1em;
    color: var(--color-text);
  }
  
  /* ⑬：塊→価格 の余白36px */
  .service-plan__price{
    margin-top: 36px;
    font-family: var(--font-en);
    font-weight: 500; /* medium */
    font-size: 24px;
    letter-spacing: .1em;
    color: var(--color-orange);
  }
  
  /* ⑭：横棒線（ボックス幅いっぱい、太さ2px、D9D9D9） */
  .service-plan__divider{
    margin-top: 24px; /* ※余白の指定がなかったため24pxを仮置き */
    width: 100%;
    height: 2px;
    background: #D9D9D9;
    border: none;
  }
  
  /* ⑮：説明文 */
  .service-plan__desc{
    margin-top: 40px;
    text-align: left;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .1em;
    line-height: 24px;
    color: var(--color-text);
  }
  
  /* ⑯：プラン内容 ラベル＋緑の線(87×1px、10px下) */
  .service-plan__label{
    margin-top: 60px;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .1em;
    color: var(--color-text);
  }
  .service-plan__label-line{
    margin-top: 10px;
    width: 87px;
    height: 1px;
    background: var(--color-teal);
  }
  /* ②：囲みのdivをflexにして、中の線(span)がインライン化して消えるのを防ぐ */
  .service-plan__label-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .service-plan__divider2-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Simple・Smart plan だけ：おすすめ文の位置はそのままに、
     「こんな方におすすめ」のかたまりを、おすすめ文の30px上に配置する
     （余った高さは divider2-wrap 側が吸収する） */
  .service-plans > .service-plan:nth-child(2) .service-plan__divider2-wrap,
  .service-plans > .service-plan:nth-child(3) .service-plan__divider2-wrap{
    margin-top: auto;
  }
  .service-plans > .service-plan:nth-child(2) .service-plan__recommend,
  .service-plans > .service-plan:nth-child(3) .service-plan__recommend{
    margin-top: 30px;
    padding-top: 0;
  }
  
  /* ⑰・⑱：チェックボックス付きリスト */
  .service-plan__list{
    margin-top: 34px;
    width: 100%;
    text-align: left;
  }
  .service-plan__list-item{
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .service-plan__list-item + .service-plan__list-item{
    margin-top: 20px;
  }
  .service-plan__list-item img{
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }
  .service-plan__list-item span{
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .1em;
    color: var(--color-text);
  }
  .service-plan__list-note-row{
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
  }
  .service-plan__list-note-spacer{
    flex: 0 0 auto;
    width: 18px;
  }
  .service-plan__list-note{
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--color-text-soft);
  }
  
  /* ⑲：横棒線(157×1px、493C33) */
  .service-plan__divider2{
    margin-top: 60px;
    width: 157px;
    height: 1px;
    background: #493c33;
    border: none;
  }
  /* ①：Complete planだけ余白を24pxにして、3枚のカードの高さ差を縮める */
  .service-plans > .service-plan:nth-child(4) .service-plan__divider2{
    margin-top: 24px;
  }
  
  /* ⑳：こんな方におすすめ ラベル */
  .service-plan__label2{
    margin-top: 10px;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .1em;
    color: var(--color-text);
  }
  
  /* ㉑：同様の横棒線 */
  .service-plan__divider3{
    margin-top: 10px;
    width: 157px;
    height: 1px;
    background: #493c33;
    border: none;
  }
  
  /* ㉒：おすすめテキスト（中央揃え） */
  .service-plan__recommend{
    margin-top: auto; /* カードの余った高さぶんを吸収して、下端の空白をなくす */
    padding-top: 30px; /* 棒線との最低限の余白は確保 */
    text-align: center;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .1em;
    line-height: 32px;
    color: var(--color-teal);
  }
  
  /* ==========================================================================
     ㉔：追加オプション ボックス（小・高さ260px）／
     ㉛：対応可能な画像・デザイン ボックス（大・高さ564px）共通
     ========================================================================== */
  .service-box{
    margin-top: 80px;
    width: 100%;
    border-radius: 30px;
    background: #ffffff;
    /* ㉔：上下30px・左右80pxの余白 */
    padding: 30px 80px 30px 80px;
  }
  .service-box--lg{
    min-height: 564px;
    padding: 60px 80px 60px 80px;
  }
  
  /* ㉕：緑の棒線→追加オプション→棒線（3点セットを左揃え） */
  .service-box__heading-group{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
  }
  .service-box__heading-bar{
    width: 100%;
    height: 1px;
    background: var(--color-teal);
  }
  .service-box__heading{
    margin-top: 10px;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .1em;
    line-height: 16px;
    color: var(--color-teal);
  }
  .service-box__heading-bar2{
    margin-top: 10px;
    width: 100%;
    height: 1px;
    background: var(--color-teal);
  }
  
  /* ㉖：4×4円＋タイトル＋破線＋価格 の1行 */
  .service-box__row{
    margin-top: 34px;
    display: flex;
    align-items: center;
  }
  .service-box__row + .service-box__row{
    margin-top: 26px; /* ㉗：2つ目以降の項目までの余白 */
  }
  .service-box__dot{
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #493c33;
  }
  .service-box__row-title{
    margin-left: 20px;
    flex: 0 0 auto;
    font-family: var(--font-jp);
    font-weight: 500; /* medium */
    font-size: 16px;
    letter-spacing: .1em;
    color: var(--color-text);
    white-space: nowrap;
  }
  .service-box__row-price-group{
    display: flex;
    align-items: center;
    margin-left: auto; /* 破線+金額をまとめて右端に押し出す */
  }
  /* ①：800px以下では、破線+金額のセットを見出しの20px下に折り返す */
  @container (max-width: 800px){
    .service-box__row{
      flex-wrap: wrap;
    }
    .service-box__row-price-group{
      flex-basis: 100%;
      margin-top: 10px;
      margin-left: 0;
      justify-content: flex-end;
    }
  }
  .service-box__row-dashed{
    margin-right: 30px; /* ③：破線→金額 の余白30px */
    flex: 0 1 120px; /* 通常は120pxを保ち、はみ出しそうな時だけ縮む */
    min-width: 130px;
    height: 0;
    border-top: 1px dashed var(--color-text-soft);
  }
  .service-box__row-price{
    margin-left: 12px;
    flex: 0 0 auto;
    font-family: var(--font-jp);
    font-weight: 500; /* medium */
    font-size: 16px;
    letter-spacing: .1em;
    color: var(--color-orange);
    white-space: nowrap;
  }
  
  /* ㉗：行の説明文 */
  .service-box__row-desc{
    margin-top: 10px;
    margin-left: 24px; /* dot+gapぶん軽くインデント */
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .1em;
    line-height: 24px;
    color: #493c33;
  }
  
  /* ㉘：追加オプション→実績をみるボタン の余白80px */
  .service-category__viewmore-wrap{
    position: relative;
    width: fit-content;
    margin: 80px auto 0;
  }
  
  /* ==========================================================================
     ㉛：対応可能なリスト（画像／デザイン）のチェックボックス行
     ========================================================================== */
  .service-checklist{
    display: flex;
    flex-wrap: wrap;
    column-gap: 60px;
    row-gap: 20px;
  }
  
  /* ④：チェックボックスの頭を揃え、金額のお尻を揃える2列グリッド */
  .service-checklist-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 60px;
    row-gap: 20px;
  }
  /* 1200px以下：2列だと波線が見えなくなるので、1列（縦積み）に切り替える */
  @container (max-width: 1400px){
    .service-checklist-grid{
      grid-template-columns: 1fr;
    }
  }
  .service-checklist-row2{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }
  .service-checklist-row2 img{
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }
  .service-checklist-row2 > span:not(.service-checklist__dashed2):not(.service-checklist__price2):not(.service-checklist__price-group2){
    flex: 0 0 auto;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .1em;
    color: var(--color-text);
    white-space: nowrap;
  }
  .service-checklist__price-group2{
    display: flex;
    align-items: center;
    margin-left: auto; /* 破線+金額をまとめて右端まで押し出す */
  }
  /* ②：650px以下では、破線+金額のセットを見出しの10px下に折り返す */
  @container (max-width: 760px){
    .service-checklist-row2{
      flex-wrap: wrap;
    }
    .service-checklist__price-group2{
      flex-basis: 100%;
      margin-top: 10px;
      margin-left: 0;
      justify-content: flex-end;
    }
  }
  .service-checklist__dashed2{
    margin-right: 12px;
    flex: 0 1 150px; /* 通常は150pxを保ち、はみ出しそうな時だけ縮む */
    min-width: 130px;
    height: 0;
    border-top: 1px dashed var(--color-text-soft);
  }
  .service-checklist__price2{
    flex: 0 0 auto;
    font-family: var(--font-jp);
    font-weight: 500; /* ⑥：medium */
    font-size: 16px;
    letter-spacing: .1em;
    color: var(--color-orange);
    white-space: nowrap;
  }
  
  /* ⑤：チェックリストを2段に分けて表示する版。
     2段目には、破線＋金額を同じ行に並べる */
  .service-checklist-row{
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* 折り返さず、破線を縮めて対応する */
  }
  /* バナー〜ストーリーズの5項目：CSS Gridで2列/3列に自動配置する
     （flexとmarginの組み合わせは複雑で崩れやすかったため、Gridに統一） */
  .service-checklist-row--images{
    display: grid;
    grid-template-columns: repeat(3, auto); /* 通常時：3列→3+2の並びになる */
    column-gap: 60px;
    row-gap: 12px;
    align-items: center;
  }
  /* 830px以下：2列にすることで、自動的に「2+2+1」の並びになる */
  @container (max-width: 830px){
    .service-checklist-row--images{
      grid-template-columns: repeat(2, auto);
      column-gap: 60px;
    }
  }
  /* 価格の塊は、列数に関わらず常に単独の行（全列にまたがる）にする */
  .service-checklist-row--images .service-checklist__price-group{
    grid-column: 1 / -1;
    margin-top: 20px;
    margin-left: 0;
    justify-content: flex-end;
  }
  /* ④：各行の1つ目の項目の幅を揃えることで、2つ目の項目(SNS投稿画像／
     ストーリーズ画像)の開始位置が行をまたいで揃うようにする */
  .service-checklist-row > .service-checklist__item:first-child{
    min-width: 140px;
  }
  .service-checklist__price-group{
    display: flex;
    align-items: center;
    margin-left: auto; /* 破線+金額をまとめて右端に押し出す */
  }
  .service-checklist__dashed{
    flex: 0 1 150px; /* 通常は150pxを保ち、はみ出しそうな時だけ縮む */
    min-width: 130px;
    height: 0;
    border-top: 1px dashed var(--color-text-soft);
    margin-right: 8px; /* ②：金額とのギャップを狭く */
  }
  .service-checklist__item{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
  }
  .service-checklist__item img{
    width: 18px;
    height: 18px;
  }
  .service-checklist__item span{
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .1em;
    color: var(--color-text);
  }
  .service-checklist__price{
    flex: 0 0 auto;
    white-space: nowrap;
    margin-left: 0;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .1em;
    color: var(--color-orange);
  }
  .service-box__note{
    margin-top: 20px;
    margin-inline: auto; /* 塊自体は中央配置 */
    max-width: 700px;
    text-align: left; /* 改行した場合は左揃え */
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .1em;
    color: #493c33;
  }
  
  /* ==========================================================================
     SP（スマホ）— Service page
     ========================================================================== */
  
  /* ①：1245px前後〜601px：カード幅500px固定でスクロール（600px以下はSP版の327pxに切り替わる） */
  @container (max-width: 1245px) and (min-width: 601px){
    .service-plans{
      flex-wrap: nowrap;
    }
    .service-plan{
      flex: 0 0 500px;
      min-width: 500px;
    }
    .service-plans__swipe-hint{
      display: flex;
    }
  }
  
  @media (max-width: 600px){
    /* ②：(service) と同じ、英字タイトルのルール */
    .service-page__eyebrow{
      font-size: 12px;
      font-weight: 400;
      letter-spacing: .1em;
    }
    .service-page__heading{
      margin-top: 16px;
      font-size: 20px;
      font-weight: 400;
      letter-spacing: .1em;
    }
  
    /* ③④：ボタン。3つとも240×40pxで統一、縦の間隔24px */
    .service-page__nav{
      margin-top: 50px;
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }
    .service-page__nav-btn{
      width: 240px;
      height: 40px;
      padding: 0;
      /* ⑤：ボタン内テキスト */
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .1em;
    }
  
    /* ⑥：最後のボタン→クリーム背景 */
    .service-page__inner{
      padding-bottom: 45px;
    }
  
    /* ⑦：背景の中の上下余白 */
    .service-category__inner{
      padding-block: 50px;
    }
  
    /* ⑧：バンドの文字 */
    .service-category__band-text{
      font-size: 20px;
      font-weight: 400;
      letter-spacing: .1em;
    }
    /* ⑨：バンドのシェイプの高さ */
    .service-category__band{
      height: 50px;
    }
  
    /* ⑩：バンド→説明文 */
    .service-category__desc{
      margin-top: 40px;
      text-align: left;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: .1em;
      line-height: 27.5px;
    }
  
    /* 11：説明文→プランボックス */
    .service-plans{
      margin-top: 40px;
      gap: 24px; /* 12：ブロック同士の間隔 */
    }
  
    /* 12：ブロックサイズ・内側の余白 */
    .service-plan{
      width: 327px;
      min-height: 681.5px; /* ①：固定heightだと中身がはみ出すのでmin-heightに */
      border-radius: 30px;
      padding: 30px 20px;
    }
  
    /* 13：丸イラスト・プラン名 */
    .service-plan__icon{
      width: 49.19px;
      height: 49.8px;
    }
    .service-plan__head{
      gap: 10px;
    }
    .service-plan__name{
      font-size: 18px;
      font-weight: 400;
      letter-spacing: .1em;
    }
  
    /* 14：価格 */
    .service-plan__price{
      margin-top: 24px;
      font-size: 18px;
      font-weight: 500;
      letter-spacing: .1em;
    }
  
    /* 15：横棒線 */
    .service-plan__divider{
      margin-top: 30px;
    }
  
    /* 16：説明文 */
    .service-plan__desc{
      margin-top: 30px;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: .1em;
      line-height: 30px;
    }
  
    /* 17：プラン内容 ラベル＋線（文字幅と同じ長さにするため、fit-contentの箱でまとめる） */
    .service-plan__label-wrap{
      margin-top: 40px;
      width: fit-content;
    }
    .service-plan__label{
      margin-top: 0;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: .1em;
    }
    .service-plan__label-line{
      margin-top: 10px;
      width: 100%;
    }
  
    /* 18・19：チェックリスト */
    .service-plan__list{
      margin-top: 20px;
    }
    .service-plan__list-item + .service-plan__list-item{
      margin-top: 12px;
    }
    .service-plan__list-item span{
      font-size: 14px;
      font-weight: 400;
      letter-spacing: .1em;
    }
    .service-plan__list-note-row{
      margin-top: 10px;
    }
    .service-plan__list-note{
      font-size: 13px;
      font-weight: 400;
      letter-spacing: .1em;
    }
  
    /* 20〜22：こんな方におすすめ（線も文字幅と同じ長さにする） */
    .service-plan__divider2-wrap{
      margin-top: 40px;
      width: fit-content;
    }
    .service-plan__divider2{
      width: 100%;
      background: #493c33;
    }
    .service-plan__label2{
      margin-top: 10px;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: .1em;
    }
    .service-plan__divider3{
      margin-top: 10px;
      width: 100%;
      background: #493c33;
    }
  
    /* 23：おすすめ文 */
    .service-plan__recommend{
      padding-top: 20px;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: .1em;
      line-height: 26px;
    }
  
    /* 25：Webサイト制作の追加オプションボックス */
    #website .service-box{
      margin-top: 30px;
      min-height: 465px;
      padding: 20px 16px;
    }
    /* 32：Web画像制作の「対応可能な画像+追加オプション」ボックス */
    #image .service-box{
      min-height: 642.5px;
      padding: 20px 16px;
    }
    /* グラフィックデザインの「対応可能なデザイン+追加オプション」ボックス */
    #graphic .service-box{
      padding: 20px 16px;
    }
  
    /* 26：追加オプション の見出し（線→文字→線を中央揃え、文字幅と同じ長さの線） */
    .service-box__heading-group{
      margin-inline: auto;
      align-items: center;
    }
    .service-box__heading{
      font-size: 15px;
      font-weight: 500;
      letter-spacing: .1em;
      line-height: 15px;
    }
  
    /* 27：6×6の丸＋タイトル＋破線＋金額（左揃え） */
    .service-box__row{
      margin-top: 20px;
      flex-wrap: wrap;
    }
    .service-box__row + .service-box__row{
      margin-top: 20px; /* 28 */
    }
    .service-box__dot{
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
    .service-box__row-title{
      margin-left: 13px;
      flex: 1 1 auto; /* 折り返せるように、幅いっぱいまで伸びられるようにする */
      min-width: 0;
      white-space: normal; /* 長い項目名は折り返す */
      font-size: 15px;
      font-weight: 500;
      letter-spacing: .1em;
    }
    .service-box__row-spacer{
      flex: 0 0 0; /* SPでは左揃えにするため、伸びるスペースを無効化 */
      width: 100%; /* 破線・金額を次の行へ折り返させる */
      order: 3;
    }
    .service-box__row-dashed{
      margin-top: 10px;
      margin-right: 10px;
      order: 4;
      flex: 0 0 auto;
      width: 60px;
    }
    .service-box__row-price{
      order: 5;
      margin-left: 0;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: .1em;
    }
  
    /* 28：説明文 */
    .service-box__row-desc{
      margin-top: 15px;
      margin-left: 0;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: .1em;
      line-height: 52px;
    }
  
    /* 29：ボックス→実績をみるボタン */
    .service-category__viewmore-wrap{
      margin-top: 40px;
    }
  
    /* ①：Webサイト制作の追加オプションボックスは、縦幅を中身に合わせる */
    #website .service-box{
      margin-top: 30px;
      min-height: 0;
      padding: 20px 16px;
    }
  
    /* ②：Web画像制作の説明文→ボックス の余白40px */
    #image .service-box{
      margin-top: 40px;
      padding: 20px 16px;
    }
  
    /* ③：「対応可能な画像」の上の線は無し、文字色は493C33 */
    #image .service-box__heading-group:first-of-type .service-box__heading-bar{
      display: none;
    }
    #image .service-box__heading-group:first-of-type .service-box__heading{
      color: #493c33;
    }
  
    /* ④：チェックリスト項目のフォントサイズ、行間の余白 */
    #image .service-checklist__item span{
      font-size: 14px;
    }
    #image .service-checklist-row--images{
      row-gap: 15px;
    }
  
    /* ⑤：ストーリーズ画像の下、金額までの余白30px。金額はここだけ独立した行に */
    #image .service-checklist__price-group{
      flex-basis: 100%;
      margin-top: 30px;
      margin-left: 0;
      justify-content: flex-end; /* ②：波線+金額をセットで画面右に揃える */
    }
    #image .service-checklist__price{
      font-size: 16px;
      font-weight: 500;
      letter-spacing: .1em;
    }
    /* ②：金額の波線は固定58px */
    #image .service-checklist__dashed{
      flex: 0 0 58px;
      width: 58px;
      min-width: 58px;
    }
    .service-checklist__dashed2{
      flex: 0 0 58px;
      width: 58px;
      min-width: 58px;
    }
    .service-box__row-dashed{
      flex: 0 0 58px;
      width: 58px;
      min-width: 58px;
    }
  
    /* ⑥：金額→「追加オプション」見出し の余白60px */
    #image .service-box__heading-group:nth-of-type(2){
      margin-top: 60px !important;
    }
    #image .service-box__heading{
      font-size: 15px;
      font-weight: 500;
      letter-spacing: .1em;
    }
  
    /* ①：説明文の行間を26pxに（Webサイト制作・Web画像制作の追加オプション共通） */
    .service-box__row-desc{
      line-height: 26px;
    }
  
    /* ③：Gridの列間隔を375px幅に合わせて調整 */
    #image .service-checklist-row--images{
      column-gap: 10px;
    }
    @container (max-width: 361px){
      #image .service-checklist-row--images{
        grid-template-columns: 1fr;
      }
    }
  
    /* ④：追加オプション/対応可能な画像・デザイン のボックスは上下30pxに */
    #website .service-box,
    #image .service-box,
    #graphic .service-box{
      padding-top: 30px;
      padding-bottom: 30px;
    }
  
    /* ⑤（グラフィックデザイン）：「対応可能なデザイン」の上の線は無し、文字色493C33 */
    #graphic .service-box__heading-group:first-of-type .service-box__heading-bar{
      display: none;
    }
    #graphic .service-box__heading-group:first-of-type .service-box__heading{
      color: #493c33;
    }
  
    /* ⑥⑦：グラフィックデザインのチェックリスト */
    #graphic .service-checklist-row2 > span:not(.service-checklist__price-group2){
      font-size: 14px;
      font-weight: 400;
      letter-spacing: .1em;
    }
    #graphic .service-checklist-grid{
      row-gap: 15px; /* 各グループ同士の間隔 */
    }
    #graphic .service-checklist__price-group2{
      margin-top: 10px;
    }
    #graphic .service-checklist__price2{
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .1em;
    }
  
    /* ⑨：注釈文→「追加オプション」見出し の余白60px */
    #graphic .service-box__heading-group:nth-of-type(2){
      margin-top: 60px !important;
    }
  }