@charset "utf-8";

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    /*Adobe Font*/
/*
    --ab-doramin: "ab-doramin", sans-serif;
    --ab-countryroad: "ab-countryroad", sans-serif;
    --ab-karuta-bold: "ab-karuta-bold", sans-serif;
    --ab-kikori: "ab-kikori", sans-serif;
    --ab-kirigirisu: "ab-kirigirisu", sans-serif;
*/
    --ab-heisei-maru-gothic-std: "heisei-maru-gothic-std", sans-serif;
  }

  html, body {
/*    font-family: var(--ab-kirigirisu), 'Zen Kaku Gothic New';	*/
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
    background: #F6EEE0;
/*    background: #ffffff;	*/
    color: #000000;
    font-size: 16px;
/*    min-width: 1920px;	*/
    min-width: 64px;
    scroll-behavior: smooth;
  }
  html {
    scroll-padding-top: 78px;
  }

  /* ─── HEADER ─── */
  .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 78px;	/* 80.5px */
    z-index: 100;
    background: #C70000;
    overflow: hidden;
  }
.site-header .bg {
    position: relative;	/* absolute;*/
    inset: 0 0 4px 0;
    background: #C70000;
}
/*
  .site-header__bg {
    position: absolute;
    top: 0;
    left: 50vw;
    transform: translateX(-50%);
    width: 1920px;
    height: 84px;
    pointer-events: none;
    user-select: none;
  }
  .site-header__bg img {
    display: block;
    width: 1920px;
    height: 84px;
  }
*/
  .site-header__inner {
    position: relative;
    z-index: 1;
    height: 80px;
    display: flex;
    align-items: center;
    width: 1000px;
    margin: 0 auto;
  }
  .site-header__logo img {
    position: absolute;
    top: 25px;
    display: block;
    width: 258px;
    height: 28px;
  }
  .site-header__nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .site-header__nav-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
    transition: opacity .2s;
  }
  .site-header__nav-link:hover { opacity: .6; }
  .site-header__logo:hover { opacity: .6; }

  /* ─── HEADER ─── */
  .hero__rule.hero__rule--thick.rule_header {    top:76px;  }
  .hero__rule.hero__rule--thin.rule_header  {    top:80px;  }
@media (max-width: 1050px) {
  .hero__rule.hero__rule--thick.rule_header {    top:44px ! important;  }
  .hero__rule.hero__rule--thin.rule_header  {    top:48px ! important;  }
}

  /* ─── HERO ─── */
  .hero {
    margin-top: 78px;
    height: 660px;
    position: relative;
    overflow: hidden;
    background: #000000;
  }
  .hero__stage {
    position: absolute;
    top: 0;
    left: 50vw;
    transform: translateX(-50%);
    width: 1920px;
    height: 100%;
    pointer-events: none;
    user-select: none;
  }
  .hero__title-graphic {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
/*
    width: 325px;
    height: 174px;
    z-index: 999;
*/
    width: 918px;
    height: auto;
  }
/*
  .hero__ambassador-card {
    position: absolute;
    top: 142px;
    left: 50%;
    transform: translateX(-50%);
    width: 918px;
    height: auto;
  }
*/

  /* ─── AMBASSADOR PROFILE ─── */
  .ambassador-profile {
    position: relative;
    overflow: hidden;
    background: #000000;
    height: 1037px;
  }
  .ambassador-profile__stage {
    position: absolute;
    top: 0;
    left: 50vw;
    transform: translateX(-50%);
    width: 1920px;
    height: 100%;
    color: #ffffff;
  }
  .ambassador-profile__photo {
    position: absolute;
    top: 84px;
    left: 498px;
    width: 133px;
    height: 133px;
    border-radius: 50%;
  }
  .ambassador-profile__text {
    position: absolute;
    top: 93px;
    left: 654px;
    width: 750px;
    font-size: 16px;
    line-height: 1.6;
  }
  .ambassador-profile__sns {
    position: absolute;
    top: 309px;
    left: 1242px;
    display: flex;
    align-items: flex-end;
    gap: 28px;
  }
  .ambassador-profile__sns img { display: block; }
  .ambassador-profile__characters {
    position: absolute;
    top: 434px;
    left: 585px;
    width: 750px;
    height: 488px;
  }
  .ambassador-profile__char-name {
    position: absolute;
    top: 900px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .ambassador-profile__char-name--mari { left: 748px; }
  .ambassador-profile__char-name--hana { left: 1066px; }
  .ambassador-profile__omf-logo {
    position: absolute;
    top: 961px;
    left: 50%;
    transform: translateX(-50%);
    height: 35px;
  }

  /* 全画面幅に延ばす横線（SVG外の余白を埋める） */
  .hero__rule {
/*
    position: relative;
    z-index: 999;
*/
    position: absolute;
    left: 0; right: 0;
    height: 0;
    pointer-events: none;
  }
  .hero__rule.hero__rule--thin.rule_hero_top_upper  {    top:5px;   }

  .hero__rule.hero__rule--thin.rule_hero_top_lower  {    top:22px;  }
  .hero__rule.hero__rule--thick.rule_hero_top_lower {    top:26px;  }

  .hero__rule.hero__rule--thick.rule_hero_bottom_upper {    top:452px;  }
  .hero__rule.hero__rule--thin.rule_hero_bottom_upper  {    top:456px;  }

  .hero__rule.hero__rule--thin.rule_hero_bottom_lower  {    top:474px;  }
  .hero__rule.hero__rule--thick.rule_hero_bottom_lower {    top:478px;  }

/* ─── HERO fluid（1050px→390pxでPC比率を保ったままリニア縮小、390px未満はそのまま同じ式で緩やかに追従） ───
   %指定はすべて .hero-stage の実幅（100%＝スクロールバー幅を含まない正しい表示幅）基準。
   vw単位は使わない（vwはスクロールバー分を含んでしまい、端が見切れるため） */
@media (max-width: 1050px) {
  .hero__stage {
    left: 0;
    transform: none;
    width: 100%;
  }
  .hero {
    height: clamp(240px, calc(56.08px + 57.5163vw), 660px);
  }
  .hero__title-graphic {
/*    width: clamp(334px, calc(78px + 80%), 918px);*/
    width: clamp(340px, calc(-1.55px + 87.5758%), 918px);
  }
  .hero__rule.hero__rule--thin.rule_hero_top_upper     { top: 5px; }	/*0.7576%;*/
  .hero__rule.hero__rule--thin.rule_hero_top_lower     { top: 3.3333%; }
  .hero__rule.hero__rule--thick.rule_hero_top_lower    { top: 3.9394%; }
  .hero__rule.hero__rule--thick.rule_hero_bottom_upper { top: 68.4848%; }
  .hero__rule.hero__rule--thin.rule_hero_bottom_upper  { top: 69.0909%; }
  .hero__rule.hero__rule--thin.rule_hero_bottom_lower  { top: 71.8182%; }
  .hero__rule.hero__rule--thick.rule_hero_bottom_lower { top: 72.4242%; }
}

  .hero__rule--thick { border-top: 2px solid #FFFFFF; }
  .hero__rule--thin  { border-top: 0.5px solid #FFFFFF; }

  /* hero内の横線は .hero__stage（PCでは1920px固定）の幅に収まってしまい、1920px超の画面で
     左右が途切れるため、.section-title__rule と同じく画面幅(100vw)いっぱいに広げる。
     .hero が overflow:hidden なので、スクロールバー分のはみ出しは切り取られる。
     ヘッダー内の .rule_header は .hero__stage の外なので対象外 */
  .hero__stage .hero__rule {
    left: 50%;
    right: auto;
    width: 100vw;
    transform: translateX(-50vw);
  }

  /* ─── SECTION TITLE（ボーダーライン付き見出し。複数セクションで共通利用） ─── */
  .section-title {
    position: relative;
    height: 65px;	/*51px;*/
  }
  .section-title__rule {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50vw);
    width: 100vw;
    height: 0;
  }
  .section-title__rule--thick { border-top: 2px solid #ffffff; }
  .section-title__rule--thin  { border-top: 0.5px solid #ffffff; }
  .section-title__img {
    position: absolute;
    /*top: 15px; left: 0; right: 0; bottom: 0;*/
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    display: block;
    /*max-height: 60%;*/
    /*max-width: 960px;*/
    max-height: 50px;
  }

  /* ─── SECTION TITLE fluid（全セクション共通。PDF実測: SP=59.5px/img max-height=46px） ─── */
  @media (max-width: 1050px) {
    .section-title {
      height: clamp(59.5px, calc(56.25px + 0.8333vw), 65px);
    }
    .section-title__img {
      /* SVGにwidth/height属性が無く、left:0;right:0;margin:autoのままだと幅いっぱいに引き伸ばされてしまうため、
         transformでの単一アンカー中央寄せに切り替え、widthを明示指定してサイズを決める（heightはauto追従）。
         PC/SPでタイトル画像の行数が違うセクションがあるため、各セクションのwidth指定は
         「幅基準の値」と「section-titleの高さに収まる幅（高さ基準の安全値）」のmin()にして、
         行数が変わってもsection-titleの枠から縦にはみ出さないようにしている。 */
      top: 50%;
      left: 50%;
      right: auto;
      bottom: auto;
      transform: translate(-50%, -50%);
      margin: 3px 0 0;
      height: auto;
    }
    /* title-service-SP.svg viewBox 263.57×26.43／PC版 title-service.svg 実測幅499.83px。
       高さ安全値(41px→50px, vw式)を比率9.973で幅換算: 355.85px + 13.599vw */
    #service .section-title__img.sp-only {
      /*aspect-ratio: 263.57 / 26.43;	*/
      width: clamp(263.57px, min(calc(131.11px + 38.7311%), calc(355.85px + 13.599vw)), 499.83px);
      margin-top:5px;/*横線分*/
    }
    /* title-mailmag-info-SP.svg viewBox 177.09×41／PC版 title-mailmag-info.svg 実測幅899.44px。
       高さ安全値を比率4.319で幅換算: 154.12px + 5.889vw */
    #mailmag-info .section-title__img.sp-only {
      aspect-ratio: 177.09 / 41;
      width: clamp(177.09px, min(calc(-227.9px + 118.418%), calc(154.12px + 5.889vw)), 899.44px);
    }
  }

  /* ─── CTA ボタン（共通） ─── */
  .cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 45px;
    background: #C70000;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    transition: background-color .2s, color .2s;
  }
  .cta-btn:hover { background: #ffffff; color: #C70000; }

  /* ─── SERVICE（OH MY FONTとは） ─── */
  .service-section {
    position: relative;
    overflow: hidden;
    background: #000000;
    color: #ffffff;
    padding-bottom: 100px;
  }
  .service-section__inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
  }
  .service-section__lead {
    margin: 76px 0 0;
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 0.05em;
  }
  .service-section__rule {
    width: 100%;
    max-width: 430px;
    margin: 58.8125px auto 0;
    height: 0;
    border-top: 0.3px solid #ffffff;
  }
  .service-section__rule + .service-section__rule { margin-top: 4px; }
  .service-section__body {
    margin: 104px auto 0;
    width: 100%;
    max-width: 750px;
    line-height: 2;
    font-weight: 400;
  }
  .service-section__body p { margin-bottom: 0; }
  .service-section__buttons {
    margin: 93px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .service-section__text-link {
    color: #F5F5F5;
    text-decoration: underline;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: color .2s;
    text-align: center;
  }
  .service-section__text-link:hover { color: #C70000; }

  /* ─── SERVICE fluid（PDF実測に基づく1050px→390pxの線形補間。SPは装飾罫線なし・OMF logo追加） ─── */
  @media (max-width: 1050px) {
    .service-section {
      padding-bottom: clamp(60px, calc(36.364px + 6.0606vw), 100px);
    }
    .service-section__omf-logo {
      display: block;
      margin: 62px auto 0;
      width: 100%;
      max-width: 240px;
      height: auto;
    }
    .service-section__lead {
      margin: clamp(26.5px, calc(-2.75px + 7.5vw), 76px) 0 0;
      font-size: clamp(13px, calc(0.7576vw), 15px);	/*clamp(16px, calc(13.045px + 0.7576vw), 21px);*/
    }
    .service-section__rule { display: none; }
    .service-section__body {
      margin-top: clamp(36.5px, calc(-3.386px + 10.23vw), 104px);
      font-size: clamp(13px, calc(11.227px + 0.4545vw), 16px);
    }
    .service-section__buttons {
      margin-top: clamp(65.5px, calc(49.25px + 4.1667vw), 93px);
    }
    .service-section__text-link {
      font-size: clamp(13px, calc(11.818px + 0.303vw), 15px);
    }
  }

  /* ─── MAILMAG INFO（OH MY FONTのメルマガについて） ─── */
  .mailmag-info {
    position: relative;
    overflow: hidden;
    background: #000000;
    color: #ffffff;
  }
  .mailmag-info__inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    padding: 0 8px 100px;	/*163px;*/
    box-sizing: border-box;
  }
  .mailmag-info__text {
    width: 100%;
    max-width: 750px;
    margin: 62px auto 0;
    line-height: 1.9;
    font-weight: 400;
  }
  .mailmag-info__buttons {
    margin-top: 100px;	/*50px;*/
    display: flex;
    justify-content: center;
  }

  /* ─── MAILMAG INFO fluid（PDF実測に基づく1050px→390pxの線形補間） ─── */
  @media (max-width: 1050px) {
    /* title-mailmag-info-SP.svg viewBox 177.09×41／PC版 title-mailmag-info.svg 実測幅899.44px。
       共通ルールのmax-height（ベース側）と合わせて、幅・高さどちらか狭い方に自動で収まる */
    #mailmag-info .section-title__img.sp-only {
      aspect-ratio: 177.09 / 41;
      max-width: clamp(177.09px, calc(-227.9px + 118.418%), 899.44px);
    }
    .mailmag-info__inner {
      padding-bottom: clamp(60.5px, calc(37.16px + 5.98485%), 100px);
    }
    .mailmag-info__text {
      font-size: clamp(12px, calc(11.227px + 0.4545vw), 14px);	/*    font-size: 14px;	/*clamp(13px, calc(11.227px + 0.4545vw), 16px);*/
    }
    .mailmag-info__buttons {
      margin-top: clamp(69px, calc(50.68px + 4.697%), 100px);
    }
  }

  /* ─── Q&A（オカルト先生に質問！） ─── */
  .qa-section {
    position: relative;
    overflow: hidden;
    background: #000000;
    color: #ffffff;
    padding-bottom: 170px;
  }
  .qa-section__inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;	/*80px 0;*/
  }
  .qa-section__content {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
  }
  .qa-section__content .qa-section__content_text {
    /*margin-left: 142px;*/
  }
  .qa-section__subheading {
    margin: 30px 0 0;
    font-size: 18px;
    font-weight: 700;
  }
  .qa-section__intro {
    margin: 17px 0 0;
    line-height: 1.9;
    font-weight: 400;
  }
  .qa-section__title-img {
    display: block;
    width: 235.5px;
    margin: 100px 0 40px -53px;	/*100px 0 40px;*/
  }
  .qa-turns {
    width: 1000px;
    margin: 0 0 0 -48px;	/* staffアバター左端Xとsenseiアバター右端Xの中点を画面中心（スクロールバー除く）に合わせるオフセット */
  }
  .qa-turn {
    display: flex;
    align-items: flex-start;
    margin-bottom: 32px;	/*40px;*/
  }
  .qa-turn.qa-turn--wider10 {
    margin-bottom: 10px;	/*吹き出し　次への間隔を狭めたい時用*/
  }
  .qa-turn.qa-turn--wider14 {
    margin-bottom: 14px;	/*吹き出し　次への間隔を狭めたい時用*/
  }
  .qa-turn.qa-turn--wider22 {
    margin-bottom: 22px;	/*吹き出し　次への間隔を狭めたい時用*/
  }
  .qa-turn.qa-turn--wider38 {
    margin-bottom: 38px;	/*吹き出し　次への間隔を広げたい時用*/
  }
  .qa-turn.qa-turn--wider42 {
    margin-bottom: 42px;	/*吹き出し　次への間隔を広げたい時用*/
  }

  .qa-turn--sensei { flex-direction: row-reverse; transform: translateX(-30px); }
  .qa-avatar {
    flex-shrink: 0;
    width: 86px;
    text-align: center;
  }
  /* 画面中心から staff=左へ290px／sensei=右へ330px の位置にアバター左端を合わせる */
  .qa-turn--staff .qa-avatar { margin-left: 210px; }
  .qa-turn--sensei .qa-avatar { margin-right: 84px; }
  .qa-avatar img {
    display: block;
    width: 86px;
    height: 86px;
    object-fit: contain;
  }
  .qa-avatar__name {
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    -webkit-text-stroke: 3px #ffffff;
    paint-order: stroke fill;
  }
  .qa-turn--staff .qa-avatar__name { color: #2563EB; }
  .qa-turn--sensei .qa-avatar__name { color: #C70000; }
  .qa-bubbles {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 6px 20px 0;
    min-width: 0;
  }
  .qa-turn--sensei .qa-bubbles { 
    align-items: flex-end; 
    text-align: right;
  }
  .qa-bubble {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
  }
  .qa-turn--staff .qa-bubble { --qa-accent: #2563EB; }
  .qa-turn--sensei .qa-bubble { --qa-accent: #C70000; }
  .qa-bubble__shape {
    position: absolute;
    z-index: 0;
    display: block;
    pointer-events: none;
  }
  .qa-bubble__text {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 24px 14px 40px;	/*14px 24px 14px 40px;*/
    color: #ffffff;
    -webkit-text-stroke: 2px var(--qa-accent);
    paint-order: stroke fill;
    font-size: 15px;
/*
    font-weight: 700;
*/
    font-family: var(--ab-heisei-maru-gothic-std);
    font-style: normal;
    font-weight: 800;

    line-height: 1.5;
  }
  .qa-turn--sensei .qa-bubble__text {
    text-align: right;
    padding: 14px 44px 14px 24px; 	/*14px 40px 14px 24px; */
  }

  /* ─── Q&A fluid（PDF実測に基づく1050px→390pxの線形補間。qa-turns/吹き出しは別途対応） ─── */
  @media (max-width: 1050px) {
    /* title-ambassador-SP.svg viewBox 266.4×40.7／PC版 title-ambassador.svg 実測幅999.86px。
       高さ安全値を比率6.546で幅換算: 233.55px + 8.926vw。qa-section__innerに横paddingが無いためvw基準 */
    #ambassador .section-title__img.sp-only {
      aspect-ratio: 266.4 / 40.7;
      width: clamp(266.4px, min(calc(-167.01px + 111.13vw), calc(233.55px + 8.926vw)), 999.86px);
    }
    .qa-section {
      padding-bottom: 50px;
    }
    .qa-section__content {
      padding: 0 14px;	/*0 24px;*/
      box-sizing: border-box;
    }
    .qa-section__subheading {
      font-size: clamp(15px, calc(12.955px + 0.5303vw), 18px);
    }
    .qa-section__intro {
      font-size: clamp(13px, calc(11.227px + 0.4545vw), 16px);
    }
    .qa-section__title-img {
      width: clamp(180px, calc(147.05px + 8.7955%), 235.5px);
      margin: clamp(60px, calc(43.64px + 5.4545vw), 100px) 0 30px 0;
    }

    /* qa-turns（吹き出しのやりとり）SP版レイアウト。
       PC版の中央寄せオフセット・widerNN間隔調整・sensei側transformはSP非対応にしてリセットする */
    .qa-turns {
      width: 100%;
      max-width: 390px;
      margin: 0 auto;
      padding: 0 24px;
      box-sizing: border-box;
    }
    .qa-turn {
      margin-bottom: 20px;
    }
    .qa-turn.qa-turn--wider10,
    .qa-turn.qa-turn--wider14,
    .qa-turn.qa-turn--wider22,
    .qa-turn.qa-turn--wider38,
    .qa-turn.qa-turn--wider42 {
      margin-bottom: 20px;
    }
    .qa-turn--sensei { transform: none; }
    .qa-avatar {
      width: 52px;
    }
    .qa-turn--staff .qa-avatar,
    .qa-turn--sensei .qa-avatar {
      margin-left: 0;
      margin-right: 0;
    }
    .qa-avatar img {
      width: 52px;
      height: 52px;
    }
    .qa-avatar__name {
      font-size: 11px;
      -webkit-text-stroke: 2px #ffffff;
    }
    .qa-bubbles.sp-only {
      /* .sp-only{display:block} と同specificityで上書きされてしまうため、.sp-onlyを含めてflexを指定し直す */
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 4px 10px 0;
    }
    .qa-bubble__text {
      padding: 8px 14px 8px 24px;
      font-size: 12px;
      line-height: 1.35;
    }
    .qa-turn--sensei .qa-bubble__text {
      padding: 8px 24px 8px 14px;
    }
  }

  /* ─── 使用事例 ─── */
  .usecase-section {
    position: relative;
    overflow: hidden;
    background: #000000;
    color: #ffffff;
    padding: 0 0 15px;	/*80px 0;*/
  }
  .usecase-section__inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
  }
  .usecase-card {
    margin: 0 auto 144px;	/*50px;*/
    text-align: right;
  }
  .usecase-card.usecase-card-202 {
    margin: 0 auto 202px;
  }
  .usecase-card.usecase-card-197 {
    margin: 0 auto 197px;
  }
  .usecase-card.usecase-card-190 {
    margin: 0 auto 190px;
  }
  .usecase-card:first-of-type { margin-top: 200px; }	/*150px;*/
  .usecase-card:nth-of-type(1),
  .usecase-card:nth-of-type(3),
  .usecase-card:nth-of-type(4) { max-width: 750px; }
  .usecase-card:nth-of-type(2) { max-width: 430px; }
  .usecase-card:nth-of-type(5) { max-width: 450px; }
  .usecase-card img {
    display: block;
    width: 100%;
    height: auto;
  }
  .usecase-card figcaption {
    margin-top: 8px;
    font-size: 13px;
  }

  /* ─── 使用事例 fluid（PDF実測: SPではカード間の間隔はいずれも約60pxで統一） ─── */
  @media (max-width: 1050px) {
    .usecase-card:first-of-type {
      margin-top: clamp(60px, calc(-29.51px + 22.951%), 200px);
    }
    .usecase-card {
      margin-bottom: clamp(60px, calc(6.3px + 13.770%), 144px);
    }
    .usecase-card.usecase-card-202 {
      margin-bottom: clamp(60px, calc(-30.79px + 23.279%), 202px);
    }
    .usecase-card.usecase-card-197 {
      margin-bottom: clamp(60px, calc(-27.59px + 22.459%), 197px);
    }
    .usecase-card.usecase-card-190 {
      margin-bottom: clamp(60px, calc(-23.11px + 21.311%), 190px);
    }
    /* 画像幅もPDF実測（1050px→390pxの線形補間）。max-widthではなくwidthで、
       画面幅が縮んでも一定の比率を保ったまま連続的に縮小するようにする */
    .usecase-card:nth-of-type(1) {
      width: clamp(376px, calc(136.9px + 61.31%), 750px);
    }
    .usecase-card:nth-of-type(3) {
      width: clamp(376px, calc(136.9px + 61.31%), 750px);
    }
    .usecase-card:nth-of-type(4) {
      width: clamp(370.5px, calc(127.87px + 62.213%), 750px);
    }
    .usecase-card:nth-of-type(2) {
      width: clamp(215.5px, calc(78.36px + 35.164%), 430px);
    }
    .usecase-card:nth-of-type(5) {
      width: clamp(226px, calc(82.79px + 36.721%), 450px);
    }
  }

  /* ─── ウシミツドキ オトについて ─── */
  .story-section {
    position: relative;
    overflow: hidden;
    background: #000000;
    color: #ffffff;
    padding: 0;	/*80px 0;*/
    padding-bottom: 134px;	/*170px;*/
  }
  .story-section__inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
  }
  .story-section__logo {
    display: block;
    max-width: 750px;
    width: 100%;
    height: auto;
    margin: 100px auto 0;	/*90px auto 0;*/
  }
  .story-section__body {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    margin-top: 100px;
  }
  .story-section__body p {
    margin: 0 0 24px;
    line-height: 1.9;
    font-weight: 400;
  }
  .story-section__photo {
    max-width: 750px;
    margin: 100px auto 0;	/*50px auto 0;*/
    text-align: right;
  }
  .story-section__photo img {
    display: block;
    width: 100%;
    height: auto;
  }
  .story-section__photo figcaption {
    margin-top: 8px;
    font-size: 13px;
  }
  .story-section__specimen {
    display: block;
    max-width: 750px;
    width: 100%;
    height: auto;
    margin: 120px auto 0;	/*60px auto 0;*/
  }
  .story-section__usage-cards {
    width: 100%;
    max-width: 750px;	/*1200px;*/
    margin: 90px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;	/*60px;*/
  }
  .story-section__usage-cards img {
    display: block;
    max-width: 750px;
    width: 100%;
    height: auto;
  }

  /* ─── ウシミツドキ オトについて fluid（PDF実測に基づく1050px→390pxの線形補間） ─── */
  @media (max-width: 1050px) {
    /* title-story-SP.svg viewBox 311.02×22.5／PC版 title-story.svg 実測幅744.38px */
    #story .section-title__img.sp-only {
      aspect-ratio: 311.02 / 22.5;
      width: clamp(311.02px, calc(33.96px + 71.042%), 744.38px);
    }
    .story-section__logo,
    .story-section__body,
    .story-section__specimen,
    .story-section__photo,
    .story-section__usage-cards {
      width: clamp(358px, calc(81.15px + 66.885%), 750px);	/*clamp(342px, calc(81.15px + 66.885%), 750px);*/
    }
    .story-section__logo {
      margin-top: clamp(60.5px, calc(35.246px + 6.4754%), 100px);
    }
    .story-section__body {
      margin-top: clamp(62.5px, calc(38.525px + 6.1475%), 100px);
    }
    .story-section__body p {
      font-size: clamp(11px, calc(10px + 0.3vw), 12px);	/*    font-size: 12px;*/
    }
    .story-section__photo {
      margin-top: clamp(61.5px, calc(36.885px + 6.3115%), 100px);
    }
    .story-section__specimen {
      margin-top: clamp(76.5px, calc(48.689px + 7.1311%), 120px);
    }
    .story-section__usage-cards {
      margin-top: clamp(62px, calc(44.098px + 4.5902%), 90px);
      gap: clamp(30.5px, calc(18.033px + 3.1967%), 50px);
    }
    .story-section {
      padding-bottom: clamp(06.5px, calc(11.0656%), 134px);	/*clamp(66.5px, calc(23.344px + 11.0656%), 134px);*/
    }
  }

  /* ─── フッター前デコレーション ─── */
  .footer-decoration-section {
    position: relative;
    overflow: hidden;
    background: #000000;
    text-align: center;
    padding: 30px 0;
  }
  .footer-decoration-btn {
    display: block;
    max-width: 664px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .footer-decoration-section img {
    display: inline-block;
    max-width: 664px;
    width: 100%;
    height: auto;
    transition: filter .25s ease;
  }
  @media (hover: hover) {
    .footer-decoration-btn:hover img {
      animation: occult-shudder .35s steps(2, jump-none) infinite;
      filter: drop-shadow(0 0 10px rgba(199,0,0,.9)) drop-shadow(0 0 24px rgba(199,0,0,.6));
    }
  }
  .footer-decoration-btn:focus-visible img {
    animation: occult-shudder .35s steps(2, jump-none) infinite;
    filter: drop-shadow(0 0 10px rgba(199,0,0,.9)) drop-shadow(0 0 24px rgba(199,0,0,.6));
  }
  .footer-decoration-btn.is-tapped img {
    animation: occult-shudder .35s steps(2, jump-none) 3;
    filter: drop-shadow(0 0 10px rgba(199,0,0,.9)) drop-shadow(0 0 24px rgba(199,0,0,.6));
  }
  @keyframes occult-shudder {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20%      { transform: translate(-3px, 1px) rotate(-0.6deg); }
    40%      { transform: translate(2px, -2px) rotate(0.5deg); }
    60%      { transform: translate(-2px, 2px) rotate(-0.4deg); }
    80%      { transform: translate(3px, -1px) rotate(0.6deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .footer-decoration-btn:hover img,
    .footer-decoration-btn:focus-visible img,
    .footer-decoration-btn.is-tapped img {
      animation: none;
    }
  }

  /* ─── ボタン ホバー画像切替 ─── */
  .btn-hover-swap { cursor: pointer; }
  .btn-hover-swap .btn-img-default { display: block; }
  .btn-hover-swap .btn-img-hover   { display: none; }
  .btn-hover-swap:hover .btn-img-default { display: none; }
  .btn-hover-swap:hover .btn-img-hover   { display: block; }

  /* ─── PC / SP 切替ヘルパー ─── */
  .sp-only { display: none; }

  /* ─── AMBASSADOR 共通 ─── */
  .amb-common {
    position: relative;
    overflow: hidden;
    background: #ffffff;
  }
  .amb-common__rule {
    position: absolute;
    left: 0; right: 0;
    height: 0;
    pointer-events: none;
    z-index: 2;
  }
  .amb-common__rule--thick { border-top: 2px solid #FFFFFF; }
  .amb-common__rule--thin  { border-top: 0.5px solid #FFFFFF; }
  .amb-common__inner {
    width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* ─── AMBASSADOR Footer ─── */
  .amb-common.amb-footer {
    background: #C70000;
    height: 207px;
/*
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top: 2px solid #000000;
    gap: 24px;
*/
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .amb-common.amb-footer_TAMESHI {
    height: 207px;

    display: flex;
    flex-direction: column;

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

    gap: 48px;
  }

  /* Footer の背景色を4px下から適用する（境界ライン考慮） */
  .amb-common.amb-footer::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #C70000;
  }

  .amb-footer__inner {
    height: 207px;

    display: flex;
    flex-direction: column;

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

    gap: 48px;
  }
  .text-link {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s ease;
  }

  .text-link:hover {
    opacity: .6;
  }
  /* ============================================================
     SECTION SEPARATOR STRIPE
     ============================================================ */
  .stripe {
    height: 52px;
    width: 100%;
  }
  .stripe-salmon { background: #F98375; }
  .stripe-mint   { background: #ABD3C1; }
  .stripe-yellow { background: #FFB200; }
  .stripe-cream  { background: #F6EEE0; }

  /* ============================================================
     AMBASSADOR PROFILE + Q&A
     ============================================================ */
  .ambassador-section {
    scroll-margin-top: 77px; /* 固定ヘッダ(80.5px)分オフセット */
    background: #ffffff;
    padding: 0;
  }

  .footer-nav {
    display: flex;
    gap: 72px;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
  }

@media (max-width: 560px) {
  /* PDF実測（本文ページ・メルマガ登録ページとも約131px）に合わせて縮小 */
  .amb-common.amb-footer { height: auto; }
  .amb-footer__inner {
    height: auto;
    padding: 10px 0 9px;
    gap: 8px;
    align-items: stretch; /* 左右個別に制御 */
  }
  .footer-nav {
    flex-direction: column;
    gap: 7px;
    font-size: 16px;
    align-items: flex-start;
    /* 左端から 15.5/390 の比率でインデント */
    margin-left:  calc(15.5 / 390 * 100vw);
  }
  .footer-company {
    font-size: 12px;
    text-align: right ! important;
    /* 右端から同比率でインデント */
    padding-right: calc(15.5 / 390 * 100vw);
    /* このメディアクエリ全体が本来のPC用ルールより前に書かれているため、
       同詳細度だと後勝ちでPC側のtranslateに負けてしまう。!importantで確実に上書きする */
    translate: 0 !important;
  }
}

  .footer-nav_TAMESHI {
    display: flex;
    gap: 72px;
    align-items: center;

    font-size: 18px;
    font-weight: 700;

    transform: translateY(12px);
  }
  .footer-company {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: center;
    translate: 0 25px;
  }
  .footer-company_TAMESHI {
    font-size: 14px;
    color: #4D4D4D;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: center;

    transform: translateY(12px);
  }

  /* ============================================================
     UTILITY
     ============================================================ */
  .text-center { text-align: center; }
  .fw-black { font-weight: 900; }
  .fw-bold  { font-weight: 700; }
  .fw-med   { font-weight: 500; }

  /* Accent colors applied to Q section headings etc. */
  .accent-green  { color: #016B49; }
  .accent-salmon { color: #F98375; }
  .accent-yellow { color: #FFB200; }
  .accent-mint   { color: #016B49; }

  .divider-line {
    border: none;
    border-top: 1px solid #000000;
    margin: 0;
  }
  .divider-line-half {
    border: none;
    border-top: 0.5px solid #000000;
    margin: 0;
  }



/*******************************************************************************/


  /* ─── HERO ─── */
  .mailmag_hero {
    margin-top: 78px;
    height: 0;
    position: relative;
    overflow: hidden;
  }
  /* ─── MAIL MAG FORM ─── */
  .mailmag_form {
    position: relative;
    height: 668px;
    overflow: hidden;
    background: #000000;
    color: #ffffff;
  }
  .mailmag_form__inner {
    position: absolute;
    top: 0;
/*
    left: 50vw;
    transform: translateX(-50%);
*/
/*    width: 1920px;	*/
    width: 100%;
    height: 668px;
  }
  .mailmag_form__heading {
    position: absolute;
    top: 132.4px;
    left: 0; right: 0;
    height: 43px;
  }
  .mailmag_form__omf-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
/*    top: 175.8px;*/
    display: block;
    width: 400px;
    height: 43px;
  }
  .mailmag_form__lead {
    position: absolute;
    top: 198.0px;
/*
    left: 727px;
    width: 500px;
*/
    position: relative;
    text-align: center;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.05em;
  }
  .mailmag_form__rule {
    position: absolute;
    left: 745px;
    width: 430px;
    height: 0;
    border-top: 0.3px solid #ffffff;
  }
/*
  .mailmag_form__body {
    position: absolute;
    top: 468px;
    left: 590px;
    width: 750px;
    line-height: 2;
    font-weight: 400;
  }
  .mailmag_form__body p { margin-bottom: 0; }
  .mailmag_form__buttons {
    position: absolute;
    top: 968px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
  }
  .mailmag_form__btn {
    display: block;
    text-decoration: none;
    cursor: pointer;
  }
*/

  /* ─── MAIL MAG FORM ─── * /
  .mailmag_form {
    position: relative;
    height: 641px;
    overflow: hidden;
  }
  .mailmag_form__inner {
    position: absolute;
    top: 0;
    left: 50vw;
    transform: translateX(-50%);
    width: 1920px;
    height: 641px;
  }
  .mailmag_form__heading {
    position: absolute;
    top: 22px;
    left: 0; right: 0;
    height: 43px;
  }
  /* 全画面幅に延ばす横線（SVG外の余白を埋める） * /
  .mailmag_form__rule {
    position: absolute;
    left: 0; right: 0;
    height: 0;
    pointer-events: none;
  }
  .mailmag_form__rule--thick { border-top: 2px solid #000000; }
  .mailmag_form__rule--thin  { border-top: 0.5px solid #000000; }
*/

  .mailmag_form-form {
/*
    position: relative;
    top: 146px;
*/
    position: absolute;
    top: 276.7px;
    left: 50%;
    transform: translateX(-50%);
/*
    max-width: 640px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
*/
    width: 700px;
  }
  .mailmag_form-group {
/*    margin-bottom: 55px;	*/
  }
  .mailmag_form-group-top-gap {
    margin-top: 47.2px;
  }

  .mailmag_form-group-top-gap-agree {
    margin-top: 36.0px;
  }

  .mailmag_form-label-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
/*    margin-bottom: 8px;*/
  }

  .mailmag_form-label {
    display: block;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.05em;
/*    margin-bottom: 8px;*/
  }

  .mailmag_form-badge {
    width: 43px;
    height: 18px;
    display: block;
  }

  .mailmag_form-label_GOMI {
    display: block;
    font-size: 18px;
    font-weight: 500;
/*    margin-bottom: 8px;*/
    letter-spacing: 0.05em;
  }

  .mailmag_form-input {
    width: 100%;
    height: 48px;
    border: 1px solid #000000;
    background: #ffffff;
    font-size: 14px;
    padding: 0 16px;
    font-family: inherit;
    outline: none;
  }
  .mailmag_form-input:focus {
    border-width: 2px;
  }
  .mailmag_form-submit_btn {
    display: block;
    width: 200px;
    margin: 0 auto;
    height: 48px;
    background: #000000;
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    border: none;
    cursor: pointer;
  }
  .mailmag_form-submit-wrap {
      text-align: center;
      margin-top: 20px;
  }
  .mailmag_form-submit-wrap .cta-btn {
      margin: 0 auto;
  }
  .mailmag_form-submit {
    margin-top: 20px;
    margin-left: auto;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
  }
  .mailmag_form-submit img {
    display: block;
    margin: 0 auto;
    width: 114px;
    height: 37px;
  }

  .mailmag-disabled {
      pointer-events: none;
      opacity: 0.5;
  }

/* ============================================================
   SEO対策の為の非表示属性
============================================================ * /

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

*/

/* ============================================================
   HAMBURGER / SP NAV  — PC デフォルト（非表示）
   ============================================================ */
.hamburger-btn {
  display: none; /* PC では非表示 */
  flex-direction: column;
  justify-content: center;	/* 3本線なら⇒space-between;*/
  gap: 5px;	/* 2本線なら */
  width: 44px;
  height: 44px;
  padding: 10px 8px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
}
.hamburger-btn span {
  display: block;
  width: 26px;
  height: 2px;
  background: #000;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.sp-nav { display: none; } /* PC では完全非表示 */

body.sp-nav-open { overflow: hidden; }

/* ============================================================
   RESPONSIVE — スマホ版 (max-width: 1000px)
   PC 版の CSS を一切変更せず、スマホのみに追加適用
   ============================================================ */
@media (max-width: 1050px) {
  /* ─── UTILITY ─── */
  .sp-hide { display: none !important; }

  /* ─── HEADER ─── */
  .site-header {
    height: 46px;
  }
  .site-header__inner {
    width: 100%;
    padding: 0 16px;
    height: 44px;
  }
  /* mailmag.php のロゴ（site-header__logo img）— absolute → static */
  .site-header__logo img {
    position: static !important;
    top: auto !important;
    width: 180px;
    height: auto;
  }
  .site-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  /* ─── HAMBURGER BUTTON ─── */
  .hamburger-btn {
    display: flex;
    width: 44px;
    height: 36px;
    padding: 8px 6px;
  }
  .hamburger-btn span {
    width: 30px;
  }
  .hamburger-btn.is-active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .hamburger-btn.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .hamburger-btn.is-active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* ─── SP NAV ─── */
  .sp-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 200;
    background: #000;
    transform: translateY(-100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
  }
  .sp-nav.is-open {
    transform: translateY(0);
  }
  .sp-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 44px;
    flex-shrink: 0;
    /*border-bottom: 2px solid #000;	*/
  }
  .sp-nav__logo {
    display: block;
    line-height: 0;
    text-decoration: none;
  }
  .sp-nav__logo img {
    width: 178.02px;
    height: auto;
  }
  .sp-nav__close {
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
  }
  .sp-nav__close::before,
  .sp-nav__close::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 2px;
    background: #fff;
    top: 50%;
    left: 50%;
  }
  .sp-nav__close::before { transform: translate(-50%, -50%) rotate(45deg); }
  .sp-nav__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/*
  .sp-nav__body {
    flex: 1;
/*
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 0;
* /
    padding: 124px 0 24px 0;
  }
*/
  .sp-nav__body {	/* 画面の上下中央（ヘッダ除く） */
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }


  .sp-nav__menu {
    list-style: none;
    padding: 0;
    text-align: center;
    /*margin-top: 44px;		画面の上下中央（ヘッダ除く）にする為、削除 */
  }
  .sp-nav__link {
    display: block;
    padding: 14px 20px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.05em;
  }
  .sp-nav__sub {
    font-size: 16px;
    font-weight: 500;
  }
  .sp-nav__divider.upper {
    border: none;
    border-top: 0.5px solid #000;
    margin: 16px 48px 0px 48px;
  }
  .sp-nav__divider.lower {
    border: none;
    border-top: 0.5px solid #000;
    margin: 5px 48px 16px 48px;
  }

  /* ─── HERO ─── */
  .hero {
    margin-top: 44px;
  }

  /* ─── AMBASSADOR PROFILE ─── */
  .ambassador-profile {
    height: auto;
    padding: 40px 7px 48px;	/*40px 24px 48px;*/
  }
  .ambassador-profile__stage {
    position: relative;
    top: auto; left: auto; transform: none;
    width: 100%;
    height: auto;
  }
  .ambassador-profile__top {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 16px;
    row-gap: 10px;
    width: fit-content;
    margin-left: auto;
    margin-right: 8vw;	/*12vw;*/
  }
  .ambassador-profile__photo {
    position: relative;
    top: auto; left: auto;
    grid-column: 1;
    grid-row: 1 / 3;
    width: 60px;
    height: 60px;
  }
  .ambassador-profile__heading {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .ambassador-profile__sns {
    position: relative;
    top: auto; left: auto;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    gap: 16px;
  }
  .ambassador-profile__sns img {
    width: auto;
    height: 24px;
  }
  .ambassador-profile__text {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    margin-top: 20px;
    font-size: clamp(12px, calc(11.227px + 0.4545vw), 14px);	/*    font-size: 14px;	*/
    line-height: 1.8;
  }
  .ambassador-profile__characters,
  .ambassador-profile__omf-logo {
    display: none;
  }

  /* ─── SERVICE ─── */
  .service-section__inner {
    padding: 0 14px;
  }

  .service-section__lead { /*font-size: 15px;*/ }
  .service-section__lead br { /*display: none;*/ }
  .service-section__body { 
    font-size: clamp(12px, calc(11.227px + 0.4545vw), 14px);	/*    font-size: 14px;	*/
    padding : 0 8px;
  }
  .service-section__body br { /*display: none;*/ }

  /* ─── PC / SP 切替 ─── */
  .pc-only { display: none !important; }
  .sp-only { display: block; }

  /* ─── MAILMAG HERO ─── */
  .mailmag_hero {
    margin-top: 44px;
    height: auto;
  }

  /* ─── MAILMAG FORM ─── */
  .mailmag_form {
    height: auto;
    overflow: visible;
    padding-bottom: 66px;	/* 16.92vw	48px */
  }
  .mailmag_form__inner {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 100%;
    height: auto;
    padding: 0vw 10vw;
  }
@media (max-width: 420px) {
  .mailmag_form__inner{
    padding: 0vw 2vw;
  }
  .mailmag_form-form {
    padding: 0vw;
  }
}
  .mailmag_form__heading {
    position: relative;
    top: auto;
    height: auto;
    padding-top: 40px;
    display: flex;
    justify-content: center;
  }
  .mailmag_form__omf-logo {
    position: relative;
    left: auto;
    transform: none;
    width: 240px;
    height: auto;
  }
  .mailmag_form__lead {
    position: relative;
    top: auto;
    font-size: 16px;
    text-align: center;
    margin-top: 24px;	/* 6.67vw;	16px */
  }
  .mailmag_form-form {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 100%;
    padding: 0 24px;
    margin-top: 54px;	/* 14.88vw	32px */
    box-sizing: border-box;
  }
  .mailmag_form-label { font-size: 15px; }

  .mailmag_form-group-top-gap-agree {
    margin-top: 69px;	/* 18.21vw */
  }
  .mailmag_form-group-top-gap{
    margin-top: 54px;	/* 18.21vw */
  }

} /* end @media (max-width: 1050px) */

/* ============================================================
   390px未満（④ゾーン）: 各fluid clamp()の下限（=390px時点の値）を解除し、
   同じ傾き（calc式）のままviewport幅に応じて緩やかに縮小を継続する。
   画像・タイトル画像・余白(margin/padding/gap)は連続的に縮小し続け、
   左右の余白は式の性質上自動的に維持される。
   本文テキストのfont-sizeは変更しない（既存clampの下限をそのまま維持＝無指定でOK）。
   qa-turns（吹き出し一式）だけは例外的に、avatar含めた1ブロックとしてzoomで縮小し、
   吹き出し内テキストのfont-sizeもzoomに連動してリニアに縮小する。
   ============================================================ */
@media (max-width: 389px) {
  /* ─── HERO ─── */
  .hero {
    height: max(0px, calc(56.08px + 57.5163vw));
  }
  .hero__title-graphic {
    width: max(0px, calc(-1.55px + 87.5758%));
  }

  /* ─── SECTION TITLE 共通 ─── */
  .section-title {
    height: max(0px, calc(56.25px + 0.8333vw));
  }
  #service .section-title__img.sp-only {
    width: max(0px, min(calc(131.11px + 38.7311%), calc(355.85px + 13.599vw)));
  }
  #mailmag-info .section-title__img.sp-only {
    width: max(0px, min(calc(-227.9px + 118.418%), calc(154.12px + 5.889vw)));
  }
  #ambassador .section-title__img.sp-only {
    width: max(0px, min(calc(-167.01px + 111.13vw), calc(233.55px + 8.926vw)));
  }
  #story .section-title__img.sp-only {
    width: max(0px, calc(33.96px + 71.042%));
  }

  /* ─── SERVICE ─── */
  .service-section {
    padding-bottom: max(0px, calc(36.364px + 6.0606vw));
  }
  .service-section__lead {
    margin-top: max(0px, calc(-2.75px + 7.5vw));
  }
  .service-section__body {
    margin-top: max(0px, calc(-3.386px + 10.23vw));
  }
  .service-section__buttons {
    margin-top: max(0px, calc(49.25px + 4.1667vw));
  }

  /* ─── MAILMAG INFO ─── */
  .mailmag-info__inner {
    padding-bottom: max(0px, calc(37.16px + 5.98485%));
  }
  .mailmag-info__buttons {
    margin-top: max(0px, calc(50.68px + 4.697%));
  }

  /* ─── Q&A ─── */
  .qa-section__title-img {
    width: max(0px, calc(147.05px + 8.7955%));
    margin-top: max(0px, calc(43.64px + 5.4545vw));
  }
  /* qa-turns：avatar＋吹き出しをひとかたまりとしてzoomで縮小。
     390pxデザインをそのまま基準にして viewport幅/390 の比率でzoomする。
     zoomはtransformと違いレイアウトごと縮小するので、内部のfont-sizeも
     連動してリニアに小さくなり、左右の寄せ（staff左／sensei右）も崩れない。 */
  .qa-turns {
    width: 390px;
    zoom: calc(100vw / 390px);
  }

  /* ─── 使用事例 ─── */
  .usecase-card:first-of-type {
    margin-top: max(0px, calc(-29.51px + 22.951%));
  }
  .usecase-card {
    margin-bottom: max(0px, calc(6.3px + 13.770%));
  }
  .usecase-card.usecase-card-202 {
    margin-bottom: max(0px, calc(-30.79px + 23.279%));
  }
  .usecase-card.usecase-card-197 {
    margin-bottom: max(0px, calc(-27.59px + 22.459%));
  }
  .usecase-card.usecase-card-190 {
    margin-bottom: max(0px, calc(-23.11px + 21.311%));
  }
  /* 元式は切片が正のため、コンテナが約354px（1・3）/338px（4）/121px（2）/131px（5）を
     下回ると計算値がコンテナ幅を超えてしまう。min(100%-14px, ...)で常にコンテナ内に収まる
     よう安全弁をかける（14px = 390px時点の左右合計余白とほぼ同等） */
  .usecase-card:nth-of-type(1),
  .usecase-card:nth-of-type(3) {
    width: min(calc(100% - 14px), max(0px, calc(136.9px + 61.31%)));
  }
  .usecase-card:nth-of-type(4) {
    width: min(calc(100% - 14px), max(0px, calc(127.87px + 62.213%)));
  }
  .usecase-card:nth-of-type(2) {
    width: min(calc(100% - 14px), max(0px, calc(78.36px + 35.164%)));
  }
  .usecase-card:nth-of-type(5) {
    width: min(calc(100% - 14px), max(0px, calc(82.79px + 36.721%)));
  }

  /* ─── ウシミツドキ オトについて ─── */
  .story-section__logo,
  .story-section__body,
  .story-section__specimen,
  .story-section__photo,
  .story-section__usage-cards {
    /* 元式(81.15px + 66.885%)は390px時点で342pxになる式だが、
       実際のSP側clamp下限は358pxに手動調整済みのため、
       同じ傾きのまま切片を+16pxして390px時点で358pxに一致するよう補正。
       また切片が正のためコンテナが約293pxを下回ると計算値がコンテナ幅を
       超えてしまうので、min(100%-32px, ...)で安全弁をかける
       （32px = 390px時点の左右合計余白とほぼ同等） */
    width: min(calc(100% - 32px), max(0px, calc(97.15px + 66.885%)));
  }
  .story-section__logo {
    margin-top: max(0px, calc(35.246px + 6.4754%));
  }
  .story-section__body {
    margin-top: max(0px, calc(38.525px + 6.1475%));
  }
  .story-section__photo {
    margin-top: max(0px, calc(36.885px + 6.3115%));
  }
  .story-section__specimen {
    margin-top: max(0px, calc(48.689px + 7.1311%));
  }
  .story-section__usage-cards {
    margin-top: max(0px, calc(44.098px + 4.5902%));
    gap: max(0px, calc(18.033px + 3.1967%));
  }
  .story-section {
    padding-bottom: max(0px, calc(11.0656%));	/*max(0px, calc(23.344px + 11.0656%));*/
  }
}