/* ==========================================================================
   Work detail page（実績詳細ページ・15件共通テンプレート）
   ========================================================================== */
   .work-detail{
    position: relative;
    background: var(--color-next-bg);
    padding-top: var(--header-h);
    container-type: inline-size;
  }
  
  .work-detail__inner{
    max-width: 1536px;
    margin: 0 auto;
    padding-inline: clamp(24px, 6.51cqw, 100px);
  }
  
  /* ②：ヘッダー→1つ目の写真 の余白180px */
  .work-detail__hero-wrap{
    padding-top: 120px;
  }
  
  /* ③：1136×700px（1536px基準）。最大幅1136pxで、画面幅が縮んだらアスペクト比を保ったまま縮小 */
  .work-detail__hero{
    display: block;
    width: 100%;
    max-width: 1136px;
    aspect-ratio: 1136 / 700;
    object-fit: cover;
    border-radius: 30px;
    margin-inline: auto;
  }
  
  /* ④：写真→タイトル の余白40px */
  .work-detail__title{
    margin-top: 40px;
    max-width: 1136px;
    margin-inline: auto;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 28px;
    letter-spacing: .1em;
    color: var(--color-text);
    text-align: center;
  }
  
  .work-detail__title-br{
    display: none; /* PCでは1行で表示（③はSP専用の改行指定のため） */
  }
  
  /* ⑤：タイトル→テキストブロック の余白180px */
  .work-detail__lead{
    margin-top: 180px;
    max-width: 1136px;
    margin-inline: auto;
    text-align: left;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .1em;
    line-height: 30px;
    color: var(--color-text);
  }
  
  /* ⑥：テキストブロック→次の画像 の余白180px。
     画像は常に画面幅いっぱい。1536px基準で高さ476px、アスペクト比は固定 */
  .work-detail__full-image{
    display: block;
    width: 100%;
    aspect-ratio: 1536 / 476;
    object-fit: cover;
    margin-top: 180px;
  }
  
  /* ⑦：画像→概要 の余白180px */
  .work-detail__overview{
    margin-top: 180px;
    max-width: 1136px;
    margin-inline: auto;
  }
  
  /* ⑧・⑭：見出し(概要／デザインプロセス)。左に高さ20px・太さ2pxの縦棒、10pxの余白 */
  .work-detail__section-heading{
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: .1em;
    color: var(--color-text);
  }
  .work-detail__section-bar{
    display: block;
    width: 2px;
    height: 20px;
    background: var(--color-teal);
  }
  
  /* ⑨：見出し→1つ目のラベル(制作ツール) の余白60px */
  .work-detail__meta{
    margin-top: 60px;
  }
  
  .work-detail__meta-row{
    display: flex;
    align-items: baseline;
  }
  /* ⑪：ラベル同士（行）の余白40px */
  .work-detail__meta-row + .work-detail__meta-row{
    margin-top: 40px;
  }
  
  /* ⑨：ラベルの幅を固定して、⑩・⑪の「文頭を揃える」を実現する */
  .work-detail__meta-label{
    flex: 0 0 auto;
    width: 160px;
    font-family: var(--font-jp);
    font-weight: 500; /* medium */
    font-size: 16px;
    letter-spacing: .1em;
    color: var(--color-text);
  }
  
  /* ⑩：ラベルから100px右に値のテキスト */
  .work-detail__meta-value{
    flex: 1 1 auto;
    margin-left: 100px;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .1em;
    line-height: 30px;
    color: var(--color-text);
    text-align: left;
  }
  
  /* ⑬：概要の最後の行→横棒線 の余白100px。線は画面幅いっぱい(paddingを除く)・太さ2px */
  .work-detail__divider{
    margin-top: 100px;
    width: 100%;
    height: 2px;
    border: none;
    background: var(--color-orange);
    max-width: none;
  }
  
  /* ⑬：横棒線→デザインプロセス見出し の余白100px */
  .work-detail__process{
    margin-top: 100px;
    max-width: 1136px;
    margin-inline: auto;
  }
  
  /* ⑮：デザインプロセス見出し→テキストブロック の余白60px */
  .work-detail__process-text{
    margin-top: 60px;
    text-align: left;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .1em;
    line-height: 32px;
    color: var(--color-text);
  }
  .work-detail__process-text p + p{
    margin-top: 1em;
  }
  
  /* ⑯：テキストブロック→一覧にもどるボタン の余白80px。ボタン自体はview moreと同じ形状・挙動 */
  .work-detail__back-wrap{
    position: relative;
    width: fit-content;
    margin: 80px auto 0;
  }
  
  /* ④：「一覧にもどる」は日本語なので、日本語フォントに上書き
     （about__viewmore-labelは元々「view more」という英字用に英語フォントが指定されているため） */
  #backToListBtn .about__viewmore-label{
    font-family: var(--font-jp);
  }
  
  /* ==========================================================================
     SP（スマホ）— Work detail page
     ========================================================================== */
  @media (max-width: 600px){
    /* ②：ヘッダー→1つ目の写真 */
    .work-detail__hero-wrap{
      padding-top: 40px;
    }
  
    /* ③：写真→タイトル */
    .work-detail__title{
      margin-top: 30px;
      font-size: 20px;
      font-weight: 400;
      letter-spacing: .1em;
      line-height: 30px;
      text-align: left; /* SPでは左揃え（PCのみ中央） */
    }
    .work-detail__title-br{
      display: inline; /* SPでは「unigraph design」の後で改行 */
    }
  
    /* ④：タイトル→テキストブロック */
    .work-detail__lead{
      margin-top: 40px;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: .1em;
      line-height: 30px;
    }
  
    /* ⑤：テキストブロック→次の画像 */
    .work-detail__full-image{
      margin-top: 40px;
    }
  
    /* ⑥：画像→概要 */
    .work-detail__overview{
      margin-top: 40px;
    }
  
    /* ⑦・⑬：概要／デザインプロセス見出し。色は緑(teal)に */
    .work-detail__section-heading{
      font-size: 19px;
      font-weight: 400;
      letter-spacing: .1em;
      color: var(--color-teal);
    }
    .work-detail__section-bar{
      background: var(--color-teal);
    }
  
    /* ⑧：見出し→1つ目のラベル(制作ツール) */
    .work-detail__meta{
      margin-top: 20px;
    }
  
    /* ⑩：ラベル同士（行）の余白20px */
    .work-detail__meta-row + .work-detail__meta-row{
      margin-top: 20px;
    }
  
    .work-detail__meta-label{
      width: 100px; /* PCの160pxより短い文字サイズに合わせて縮小 */
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .1em;
    }
  
    /* ⑨：ラベルから30px右に値のテキスト */
    .work-detail__meta-value{
      margin-left: 30px;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: .1em;
      line-height: 28px;
    }
  
    /* ⑫：概要の最後の行→横棒線、線→デザインプロセス見出し */
    .work-detail__divider{
      margin-top: 40px;
    }
    .work-detail__process{
      margin-top: 40px;
    }
  
    /* ⑭：デザインプロセス見出し→テキストブロック */
    .work-detail__process-text{
      margin-top: 20px;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: .1em;
      line-height: 28px;
    }
  
    /* ⑮：テキストブロック→一覧にもどるボタン */
    .work-detail__back-wrap{
      margin-top: 50px;
    }
  }