@charset "utf-8";
/*==========================================================
  Type3 代表挨拶（SPECIAL INTERVIEW）— .type3-msg スコープ
  Design: ChatGPT Image 2026年9月17日 15_40_55.png
          （= media/design-message.png / 748 x 2103 の縮小モック）
  対象  : company/message.html のみ
  画像  : images/type3-message/ に閉じる（他ページのディレクトリを参照しない）

  デザインの実測値（748px幅 → 1440px幅は ×1.925）
    コンテンツ左右 : x 38 / x 712   → サイト共通 .inner（1310px, padding 15px）と一致
    ストライプ帯   : 01（y 508-757）と 03（y 1044-1221）のみ。02/04/05/06/07 は白
    見出し         : 各セクションの左カラム先頭。全幅の帯にはしない
    01/04 : [左 38.8% = 見出し+写真] [右 58% = 引用+Q+本文]
    02    : [左 58.9% = 見出し+引用+Q+本文] [右 38.8% = 写真]
    03    : 全幅（見出し → カード3枚）
    05    : [左 57% = 見出し+引用+本文] [右 40% = 写真3点+手書きメモ]
    06/07 : [左 40% = 見出し｜写真] [右 56.7% = 引用+本文]
  中野指示: 黄色は TOP 相当のヤマブキ #ffd100 /
            本文は「文章のまとまりを見つつ一行スペース」を入れる
==========================================================*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&family=Yomogi&family=Cormorant+Garamond:wght@300;400&display=swap');

.type3-msg {
  --t3-yellow: #ffd100;
  --t3-yellow-deep: #e8bd00;
  --t3-cream: #fffdf2;
  --t3-cream-2: #fdf8e1;
  --t3-stripe: rgba(255, 209, 0, 0.11);
  --t3-ink: #1d1d1d;
  --t3-ink-2: #3b3b3b;
  --t3-ink-3: #5a5a5a;
  --t3-muted: #9b9484;
  --t3-line: #e8e1ce;
  /* デザイン実測: ヒーローの朱色 #fe3b00 / CTA 電話ボタン #fd6002。
     LINE ボタンはフッターの LINE ボタンが同じ画面に並ぶので、
     デザインの #03b525 ではなくサイト共通の --green を使う。 */
  --t3-orange: #fd4405;
  --t3-cta-orange: #fd6002;
  --t3-green: var(--green, #2bac38);
  /* デザインのキャッチ・メモは筆ペンの手書き。ゴシック寄りの Yusei Magic では
     字面が幾何学的になりすぎるため、ペン字系の Zen Kurenaido を使い、
     足りない太さは使用箇所で -webkit-text-stroke を足して補う。 */
  --t3-hand: "Zen Kurenaido", "Yomogi", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --t3-serif: "Cormorant Garamond", "Times New Roman", "Yu Mincho", serif;
}

/*----------------------------------------------------------
  under.css / styles.css に対するリセット
----------------------------------------------------------*/
.type3-msg.under main #content.t3-wrap {
  padding: 0;
  background: #fff;
  color: var(--t3-ink-2);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.82;
  font-weight: 500;
  letter-spacing: 0.02em;
  overflow-x: clip;
}
/* styles.css の `p, li, th, td … { font-size: 200% }` を無効化し、
   コンテナから素直に継承させる。:where() で詳細度を持たせないため、
   これ以降のコンポーネント指定が常に勝つ。 */
.type3-msg .t3-wrap :where(p, li, th, td, dt, dd, caption, address, blockquote) {
  font-size: inherit;
  font-weight: inherit;
}
.type3-msg.under main #content.t3-wrap section {
  margin: 0;
  padding: 0;
  overflow: visible;
}
.type3-msg.under main #content.t3-wrap h1,
.type3-msg.under main #content.t3-wrap h2,
.type3-msg.under main #content.t3-wrap h3,
.type3-msg.under main #content.t3-wrap h4 {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--t3-ink);
  font-size: inherit;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: inherit;
  text-align: inherit;
}
.type3-msg.under main #content.t3-wrap h1::first-letter,
.type3-msg.under main #content.t3-wrap h2::first-letter,
.type3-msg.under main #content.t3-wrap h3::first-letter,
.type3-msg.under main #content.t3-wrap h4::first-letter { color: inherit; }
/* under.css の見出し装飾（h3 .txt の両脇の飾り／h6 のアイコン）だけを消す。
   見出し自身の ::before は本ページのパーツ（ヒーローの白地など）で使うため、
   ここでブランケットに殺さない。 */
.type3-msg.under main #content.t3-wrap h3 .txt::before,
.type3-msg.under main #content.t3-wrap h3 .txt::after,
.type3-msg.under main #content.t3-wrap h6::before,
.type3-msg.under main #content.t3-wrap h6::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
}
.type3-msg.under main #content.t3-wrap img {
  border-radius: 0;
  max-width: 100%;
  height: auto;
  display: block;
}
.type3-msg.under main #content.t3-wrap table { margin: 0; }
/* figure はUAスタイルで margin:1em 40px が付くので落とす。
   :where() で詳細度0にして、後続のコンポーネント指定を邪魔しない。 */
.type3-msg .t3-wrap :where(p, figure, figcaption, ul, ol) { margin: 0; }

/* サイト共通 .inner と同じ幅（--site_size:1310px / padding 15px） */
.type3-msg .t3-inner {
  position: relative;
  width: var(--site_size, 1310px);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

/* 斜めストライプ（デザインの淡い黄色の帯 / ピッチ実測 13px 相当） */
.type3-msg .t3-stripe {
  background-color: var(--t3-cream);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--t3-stripe) 0 3px,
    transparent 3px 11px
  );
}

/*==========================================================
  HERO — 左 35% にヤマブキのシェイプ、右 65% に代表写真
==========================================================*/
.type3-msg .t3-hero {
  position: relative;
  width: 100%;
  min-height: clamp(460px, 46vw, 680px);
  display: flex;
  align-items: center;
  background: #eef2f5;
  overflow: hidden;
}
.type3-msg .t3-hero__photo {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 66%;
}
/* 上の img リセット（height:auto）より強い指定で高さを埋める */
.type3-msg.under main #content.t3-wrap .t3-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 素材の高さがほぼそのまま入る比率。頭上の余白を残して足元の机を落とす */
  object-position: 50% 26%;
}
/* section リセットの overflow:visible を打ち消す（背景シェイプと写真の切り抜き） */
.type3-msg.under main #content.t3-wrap .t3-hero,
.type3-msg.under main #content.t3-wrap .t3-cta { overflow: hidden; }
/* 左のヤマブキ。デザインは右端が x=250/748（約35%）で僅かに傾く */
.type3-msg .t3-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -12%;
  left: -14%;
  width: 51%;
  height: 112%;
  background: var(--t3-yellow);
  transform: rotate(-2.6deg);
}
.type3-msg .t3-hero__inner {
  position: relative;
  z-index: 2;
  width: var(--site_size, 1310px);
  max-width: 100%;
  margin: 0 auto;
  padding: 44px 15px 48px;
}
/* デザインはコピー・名前・リード全体がまとまって傾く
   （実測: 白地の上辺 -8.4° / 文字の並び -6.2°）。
   個別に回すと段ごとに基準が変わるため、まとめて 1 回だけ傾ける。 */
.type3-msg .t3-hero__panel {
  position: relative;
  width: min(700px, 60%);
  transform: rotate(-6deg);
  transform-origin: 0 42%;
}

/* コピー。実測（1440px 換算）で 1 文字 ≒ 55px、3 行目の語尾は白地より右へ
   はみ出して写真に乗る。白地は文字より狭く取るのが正しい見せ方。 */
.type3-msg.under main #content.t3-wrap .t3-hero__copy {
  position: relative;
  display: block;
  margin: 0 0 clamp(26px, 3vw, 46px);
  padding: 16px 0 18px 6px;
  font-family: var(--t3-hand);
  font-weight: 400;
  font-size: clamp(25px, 3.8vw, 57px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--t3-ink);
  -webkit-text-stroke: 0.042em currentColor;
}
.type3-msg .t3-hero__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 25% 0 -30px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 16px rgba(120, 95, 0, 0.09);
}
.type3-msg .t3-hero__copy em {
  font-style: normal;
  color: var(--t3-orange);
}
/* 名前ブロック。デザインでは帯を敷かず、ヤマブキ地に直接置く */
.type3-msg .t3-hero__who {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
  padding: 2px 4px 14px 6px;
  color: var(--t3-ink);
  line-height: 1.5;
}
.type3-msg .t3-hero__who .co {
  width: 100%;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.type3-msg .t3-hero__who .role { font-size: clamp(14px, 1.15vw, 18px); font-weight: 800; }
.type3-msg .t3-hero__who .nm {
  font-size: clamp(20px, 1.85vw, 29px);
  font-weight: 800;
  letter-spacing: 0.08em;
}
.type3-msg .t3-hero__who .en {
  width: 100%;
  margin-top: 2px;
  font-family: var(--t3-hand);
  font-size: clamp(11px, 0.86vw, 13px);
  letter-spacing: 0.1em;
  color: #6c5a08;
}
.type3-msg .t3-hero__lead {
  position: relative;
  margin-top: clamp(14px, 1.6vw, 24px);
  padding: 20px 18px 22px 24px;
  font-size: clamp(12px, 1.06vw, 16px);
  font-weight: 700;
  line-height: 2;
  color: #2a2404;
}
/* デザインの淡い帯は x 52-531 / ヒーロー下端まで届く（実測 1440px 換算）。
   下は負の inset で溢れさせ、ヒーローの overflow:hidden で断ち切る。 */
.type3-msg .t3-hero__lead::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 8% -180px -30px;
  background: rgba(255, 255, 255, 0.46);
}

/* 右上の SPECIAL INTERVIEW。デザインでは真っ白な壁の前に濃いグレーで置かれる
   （実測: 地の明度 254 / 文字 #3f4a56 相当）。手持ち写真の同じ位置は中間調の
   ため、白いヴェールを敷いて同じ明度差を作る。
   実測: SPECIAL / INTERVIEW / 罫 / iMotto / 氏名 の左端が x=577 で揃う左寄せ。
   ブロック右端は x=678（1440px 換算で右余白 135px）。 */
.type3-msg .t3-hero__label {
  position: absolute;
  z-index: 2;
  right: max(6vw, 30px);
  top: 10%;
  padding: 22px 34px 26px;
  text-align: left;
  color: #33404b;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}
.type3-msg .t3-hero__label::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(
    62% 58% at 50% 46%,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.82) 52%,
    rgba(255, 255, 255, 0) 100%
  );
}
.type3-msg .t3-hero__label .en {
  font-family: var(--t3-serif);
  font-weight: 300;
  font-size: clamp(20px, 2.5vw, 43px);
  line-height: 1.2;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.type3-msg .t3-hero__label .rule {
  display: block;
  width: 36px;
  height: 2px;
  margin: 14px 0 11px;
  background: var(--t3-yellow);
}
.type3-msg .t3-hero__label .brand {
  font-family: var(--t3-serif);
  font-size: clamp(14px, 1.55vw, 26px);
  letter-spacing: 0.06em;
}
.type3-msg .t3-hero__label .nm-en {
  margin-top: 7px;
  font-family: var(--t3-serif);
  font-size: clamp(10px, 0.85vw, 14px);
  letter-spacing: 0.12em;
  color: #5d6a75;
}

/*==========================================================
  パンくず
==========================================================*/
.type3-msg .t3-bc { padding: 13px 0 0; }
.type3-msg .t3-bc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  font-size: 12px;
  color: var(--t3-muted);
}
.type3-msg .t3-bc li { display: flex; align-items: center; gap: 0 6px; }
.type3-msg .t3-bc li:not(:last-child)::after { content: ">"; color: #cfc6ae; }
.type3-msg .t3-bc a { color: var(--t3-muted); text-decoration: none; }
.type3-msg .t3-bc a:hover { text-decoration: underline; }

/*==========================================================
  INTRO（リード文＋代表写真＋手書きメモ）
  デザイン: 本文 x75-440 / 写真 x450-594(1.29) / メモ x600-730
==========================================================*/
.type3-msg .t3-intro { padding: clamp(30px, 3.2vw, 50px) 0 clamp(26px, 2.8vw, 44px); }
.type3-msg .t3-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21.5% 19.5%;
  align-items: center;
  gap: 0 clamp(12px, 1.4vw, 22px);
  padding-left: 5.5%;
}
.type3-msg .t3-intro__lead {
  font-size: clamp(14px, 1.22vw, 18px);
  font-weight: 500;
  line-height: 1.95;
  color: var(--t3-ink-2);
}
.type3-msg .t3-intro__pic img {
  width: 100%;
  aspect-ratio: 121 / 100;
  object-fit: cover;
  border-radius: 8px;
}

/*==========================================================
  手書きメモ（黄色いアンダーライン付き）
==========================================================*/
.type3-msg .t3-note {
  position: relative;
  width: fit-content;
  font-family: var(--t3-hand);
  font-size: clamp(13px, 1.24vw, 19px);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.02em;
  color: var(--t3-ink);
  -webkit-text-stroke: 0.022em currentColor;
  transform: rotate(-2.4deg);
}
.type3-msg .t3-note::after {
  content: "";
  position: absolute;
  left: 8%;
  bottom: -4px;
  width: 78%;
  height: 4px;
  border-radius: 4px;
  background: var(--t3-yellow);
}

/*==========================================================
  セクション共通（01–07）
  デザイン: 帯上端→見出し 14px(=27px) / 写真下端→帯下端 25px(=48px)
==========================================================*/
/* 上の `#content.t3-wrap section { padding:0 }` より詳細度を高く保つ */
.type3-msg.under main #content.t3-wrap .t3-sec {
  position: relative;
  padding: clamp(22px, 2.4vw, 34px) 0 clamp(32px, 3.6vw, 52px);
}

/* 見出し（左カラム先頭に置く） */
.type3-msg .t3-hd {
  display: flex;
  align-items: flex-end;
  gap: 0 clamp(8px, 1vw, 16px);
  margin-bottom: clamp(12px, 1.3vw, 20px);
}
.type3-msg .t3-hd__num {
  position: relative;
  flex: 0 0 auto;
  padding-left: clamp(10px, 1vw, 16px);
  font-family: var(--font-en), "Jost", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--t3-yellow);
  text-shadow: 0 1px 0 rgba(150, 118, 0, 0.16);
}
.type3-msg .t3-hd__num::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: clamp(3px, 0.3vw, 5px);
  height: 88%;
  background: var(--t3-yellow);
}
/* 数字の右下に添えられた小さな鉛筆ストローク */
.type3-msg .t3-hd__num::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: 2px;
  width: 13px;
  height: 3px;
  border-radius: 3px;
  background: var(--t3-yellow);
  transform: rotate(-38deg);
}
.type3-msg.under main #content.t3-wrap .t3-hd__ttl {
  margin: 0 0 0 8px;
  font-size: clamp(18px, 1.95vw, 28px);
  line-height: 1.32;
  letter-spacing: 0.01em;
  color: var(--t3-ink);
}
.type3-msg .t3-hd__ttl .en {
  display: block;
  margin-top: 5px;
  font-family: var(--font-en), "Jost", sans-serif;
  font-size: clamp(10px, 0.82vw, 13px);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--t3-muted);
}

/*----------------------------------------------------------
  セクションのカラム構成
----------------------------------------------------------*/
.type3-msg .t3-grid {
  display: grid;
  align-items: start;
}
/* 01 / 04 : 左に見出し＋写真、右に本文 */
.type3-msg .t3-grid--ml {
  grid-template-columns: 38.8% minmax(0, 1fr);
  gap: 0 3.2%;
}
/* 02 : 左に見出し＋本文、右に写真。
   SP で「見出し → 写真 → 本文」に素直に流れるよう、見出しを独立した
   グリッドアイテムにして行列を明示する。 */
.type3-msg .t3-grid--mr {
  grid-template-columns: minmax(0, 1fr) 38.8%;
  gap: 0 2.4%;
}
.type3-msg .t3-grid--mr > .t3-hd { grid-column: 1; grid-row: 1; }
.type3-msg .t3-grid--mr > .t3-fig { grid-column: 2; grid-row: 1 / span 2; }
.type3-msg .t3-grid--mr > .t3-col { grid-column: 1; grid-row: 2; }
/* 05 : 左に見出し＋本文、右に写真3点＋メモ */
.type3-msg .t3-grid--ep {
  grid-template-columns: minmax(0, 1fr) 40%;
  gap: 0 3%;
}
.type3-msg .t3-grid--ep > .t3-hd { grid-column: 1; grid-row: 1; }
.type3-msg .t3-grid--ep > .t3-ep { grid-column: 2; grid-row: 1 / span 2; }
.type3-msg .t3-grid--ep > .t3-col { grid-column: 1; grid-row: 2; }
/* 06 / 07 : 見出しと写真を横並びにした左ブロック＋右に本文 */
.type3-msg .t3-grid--inline {
  grid-template-columns: 40% minmax(0, 1fr);
  gap: 0 3.3%;
}
.type3-msg .t3-inline__left {
  display: grid;
  grid-template-columns: 51% minmax(0, 1fr);
  align-items: start;
  gap: 0 2%;
}
.type3-msg .t3-inline__left .t3-hd { margin-bottom: 0; }
/* 06/07 は見出しと写真が同じ幅の枠を分け合うため、デザイン同様に
   文字数の多い 07 だけ一段小さく組んで 1 行に収める。 */
.type3-msg.under main #content.t3-wrap .t3-inline__left .t3-hd__ttl {
  font-size: clamp(15px, 1.55vw, 22px);
}
.type3-msg.under main #content.t3-wrap .t3-sec--07 .t3-inline__left .t3-hd__ttl {
  font-size: clamp(13px, 1.25vw, 18px);
}

/* 写真（デザイン実測の縦横比を aspect-ratio で保持）
   実測値: 01 x38-294/y562-728 / 02 x449-714/y752-995 / 04 x43-296/y1277-1413
           06 x176-310/y1661-1776 / 07 x176-311/y1789-1908 */
.type3-msg .t3-fig img {
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.type3-msg .t3-fig--01 img { aspect-ratio: 154 / 100; }
.type3-msg .t3-fig--02 img { aspect-ratio: 109 / 100; }
.type3-msg .t3-fig--04 img { aspect-ratio: 185 / 100; }
.type3-msg .t3-fig--06 img { aspect-ratio: 117 / 100; }
.type3-msg .t3-fig--07 img { aspect-ratio: 113 / 100; }

/* 引用（プルクオート）— カラム幅いっぱいの淡クリームの箱。
   デザインは 01/02/05/06 がカラム幅、04/07 が文字幅だが、
   カラム幅で揃えた方が意図が伝わるため全セクションで統一する。 */
.type3-msg.under main #content.t3-wrap .t3-quote {
  margin: 0 0 clamp(14px, 1.6vw, 24px);
  padding: clamp(11px, 1.1vw, 17px) clamp(16px, 1.7vw, 28px);
  background: var(--t3-cream-2);
  border-left: 6px solid var(--t3-yellow);
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 800;
  line-height: 1.64;
  letter-spacing: 0.01em;
  color: var(--t3-ink);
}

/* インタビュー Q & A */
.type3-msg .t3-q {
  padding-top: clamp(9px, 0.95vw, 14px);
  border-top: 1px solid var(--t3-line);
  font-size: clamp(12px, 1.02vw, 15.5px);
  font-weight: 700;
  line-height: 1.8;
  color: var(--t3-ink-3);
}
.type3-msg .t3-q::before {
  content: "——";
  margin-right: 0.5em;
  color: var(--t3-yellow-deep);
  letter-spacing: -0.1em;
}
.type3-msg .t3-body { font-size: clamp(13.5px, 1.11vw, 16px); }
.type3-msg .t3-body > p { margin: 0; }
/* 中野指示: 文章のまとまりごとに一行スペース */
.type3-msg .t3-body > p + p { margin-top: 1.82em; }
.type3-msg .t3-q + .t3-body { margin-top: 0.9em; }
.type3-msg .t3-body .who {
  margin-right: 0.2em;
  font-weight: 800;
  color: var(--t3-ink);
}
/* デザインの本文は黄色マーカーもオレンジ文字も使わず、太字だけで強める
   （実測: 本文域の淡黄ピクセル 0 / オレンジ 0、強調語は無彩色のまま） */
.type3-msg .t3-body .em {
  color: var(--t3-ink);
  font-weight: 700;
}

/*==========================================================
  03 これまでのご経歴 — キャリアカード
  デザイン実測: カードの送り 229px（1/3）、内寸 204px。
  サムネ x48-118（内寸の 34.8%・縦位置 0.84）、本文は写真の下へ回り込まず
  右カラムに留まる → float ではなく2カラムのグリッドで組む。
==========================================================*/
.type3-msg .t3-careers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
}
.type3-msg .t3-career {
  display: grid;
  grid-template-columns: 34.8% minmax(0, 1fr);
  align-items: start;
  gap: 0 4.4%;
  padding: clamp(12px, 1.3vw, 20px);
  background: #fff;
  border: 1px solid #f0e8cf;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(150, 125, 40, 0.06);
}
.type3-msg .t3-career__fig {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-top: 3px;
}
.type3-msg .t3-career__fig img {
  width: 100%;
  aspect-ratio: 84 / 100;
  object-fit: cover;
  border-radius: 4px;
}
.type3-msg .t3-career__no {
  position: absolute;
  top: -5px;
  right: -9px;
  font-family: var(--font-en), "Jost", sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.55vw, 24px);
  line-height: 1;
  color: var(--t3-ink);
  text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
}
.type3-msg.under main #content.t3-wrap .t3-career__ttl {
  margin: 0 0 9px;
  font-size: clamp(12.5px, 1.16vw, 16.5px);
  line-height: 1.45;
  color: var(--t3-ink);
}
.type3-msg .t3-career__txt {
  font-size: clamp(11.5px, 0.95vw, 14px);
  line-height: 1.85;
}

/*==========================================================
  05 エピソード — 写真スタック＋手書きメモ
  デザイン実測: 1段目 x440-603 / y1430-1530（1.63）＋ メモ
                2段目 x440-587 / y1532-1652（1.23）＋ プリント写真
                プリント写真は傾き約6°を戻すと 111x82（1.35）
==========================================================*/
/* デザインは2段の写真が隙間なく積まれる（実測: 段間 2px / 748px 幅） */
/* z-index:0 で重ね合わせ文脈を作る。省くと ::before(z-index:-1) が
   #content の白背景より後ろに落ちて見えなくなる。 */
.type3-msg .t3-ep { position: relative; z-index: 0; display: grid; gap: 4px; }
/* 写真列の右側だけ、斜めストライプの淡い帯が紙面右端まで抜ける
   （実測: x 645→748+ / y 1424-1658。左へ向かってフェードする） */
.type3-msg .t3-ep::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -14px;
  right: -50vw;
  bottom: -12px;
  left: 66%;
  background-color: var(--t3-cream);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--t3-stripe) 0 3px,
    transparent 3px 11px
  );
  /* 右へ 50vw 抜くので、フェード量は % ではなく px で固定する */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 120px);
  mask-image: linear-gradient(90deg, transparent 0, #000 120px);
}
.type3-msg .t3-ep__row {
  display: grid;
  grid-template-columns: 55.5% minmax(0, 1fr);
  align-items: center;
  gap: 0 clamp(7px, 0.8vw, 13px);
}
/* メモはデザインどおり写真列の右端に寄せる（実測 右端 x=712 / 列右端 718） */
.type3-msg .t3-ep__row > .t3-note { justify-self: end; }
/* デザインの3枚目は写真列の右端をわずかに越えてはみ出し、2枚目とは隙間なく
   隣り合う（実測: 2枚目の右端 x=590 / 3枚目の白フチ左端 x=591） */
.type3-msg .t3-ep__row--2 {
  grid-template-columns: 55.5% 45.5%;
  align-items: start;
  gap: 0 2px;
  margin-right: -4%;
}
.type3-msg .t3-ep img {
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.type3-msg .t3-ep__row > figure:first-child img { aspect-ratio: 163 / 100; }
.type3-msg .t3-ep__row--2 > figure:first-child img { aspect-ratio: 123 / 100; }
/* デザインでは3枚目だけ白フチ付きで少し傾いた「プリント写真」の見せ方。
   実測どおり天は2枚目より 17px（1440px換算 33px）下がり、地は2枚目の下端に
   届かない位置で収まる。 */
.type3-msg .t3-ep__row--2 > figure:last-child {
  margin-top: clamp(16px, 2.3vw, 33px);
  padding: 5px 5px 7px;
  background: #fff;
  box-shadow: 0 3px 13px rgba(90, 76, 20, 0.16);
  transform: rotate(-5.5deg);
}
.type3-msg .t3-ep__row--2 > figure:last-child img {
  aspect-ratio: 135 / 100;
  border-radius: 2px;
}

/*==========================================================
  ボトム CTA（黄色帯）
==========================================================*/
.type3-msg .t3-cta {
  position: relative;
  padding: clamp(26px, 2.8vw, 44px) 0 clamp(24px, 2.6vw, 42px);
  background: var(--t3-yellow);
  overflow: hidden;
}
.type3-msg .t3-cta::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -6%;
  width: 46%;
  height: 180%;
  background: rgba(255, 255, 255, 0.14);
  transform: rotate(-16deg);
}
.type3-msg .t3-cta .t3-inner { z-index: 1; }
.type3-msg .t3-cta__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0 clamp(14px, 1.8vw, 32px);
}
.type3-msg.under main #content.t3-wrap .t3-cta__lead {
  margin: 0;
  font-family: var(--t3-hand);
  font-weight: 400;
  font-size: clamp(20px, 2.3vw, 38px);
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: #231c00;
  -webkit-text-stroke: 0.05em currentColor;
}
.type3-msg .t3-cta__figure {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 0 clamp(6px, 0.9vw, 16px);
}
.type3-msg .t3-cta__figure img {
  width: clamp(130px, 15vw, 234px);
  filter: drop-shadow(0 6px 14px rgba(120, 90, 0, 0.18));
}
.type3-msg .t3-cta__figure .t3-note { margin-bottom: clamp(18px, 2.4vw, 46px); }
.type3-msg .t3-cta__figure .t3-note::after { background: #fff; }

/* デザイン実測（1440px 換算）: ボタン高 90px / 幅 約 390px / 間隔 約 50px /
   角丸は 10px 程度（ピル型ではない） */
.type3-msg .t3-cta__btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 3.5vw, 50px);
  margin-top: clamp(14px, 1.6vw, 24px);
}
.type3-msg .t3-cbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 12px;
  min-height: clamp(54px, 6.25vw, 90px);
  padding: 8px 14px;
  border-radius: 10px;
  text-decoration: none !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.type3-msg .t3-cbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.14);
}
.type3-msg .t3-cbtn img { flex: 0 0 auto; }
.type3-msg .t3-cbtn__body { line-height: 1.25; }
.type3-msg .t3-cbtn--tel { background: var(--t3-cta-orange); color: #fff !important; }
/* アイコンの実測（1440px 換算）: 受話器 29px / LINE 50px / 封筒 52px */
.type3-msg .t3-cbtn--tel img { width: clamp(18px, 2vw, 29px); }
.type3-msg .t3-cbtn--tel .num {
  display: block;
  font-family: var(--font-en), "Jost", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.1vw, 33px);
  letter-spacing: 0.01em;
}
.type3-msg .t3-cbtn--tel .time {
  display: block;
  margin-top: 1px;
  font-size: clamp(9px, 0.72vw, 11px);
  letter-spacing: 0.02em;
}
.type3-msg .t3-cbtn--line { background: var(--t3-green); color: #fff !important; }
.type3-msg .t3-cbtn--line img { width: clamp(28px, 3.4vw, 50px); }
.type3-msg .t3-cbtn--mail {
  background: #fff;
  border: 2px solid var(--t3-cta-orange);
  color: var(--t3-cta-orange) !important;
}
.type3-msg .t3-cbtn--mail img { width: clamp(26px, 3.6vw, 52px); }
/* ラベルは実測 26px 相当（1440px 換算）。電話番号 33px より一段小さい */
.type3-msg .t3-cbtn--line .label,
.type3-msg .t3-cbtn--mail .label {
  font-size: clamp(15px, 1.8vw, 26px);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/*==========================================================
  1259px 以下（サイト全体が #wrapper{min-width:1260px} のため縮小表示）
==========================================================*/
@media screen and (max-width: 1259px) {
  .type3-msg .t3-inner,
  .type3-msg .t3-hero__inner { padding-left: 24px; padding-right: 24px; }
}

/*==========================================================
  SP（750px 以下）
==========================================================*/
@media screen and (max-width: 750px) {
  .type3-msg.under main #content.t3-wrap { font-size: 15px; }
  .type3-msg .t3-inner,
  .type3-msg .t3-hero__inner { padding-left: 18px; padding-right: 18px; }

  /* HERO: 写真を下に置き、コピーは黄色ベタの上へ */
  .type3-msg .t3-hero {
    display: block;
    min-height: 0;
    background: var(--t3-yellow);
  }
  .type3-msg .t3-hero::before {
    top: auto;
    bottom: 27%;
    left: -20%;
    width: 140%;
    height: 78%;
    transform: rotate(-3deg);
  }
  .type3-msg .t3-hero__photo {
    position: relative;
    inset: auto;
    z-index: 2;
    width: 100%;
    aspect-ratio: 4 / 3;
  }
  .type3-msg.under main #content.t3-wrap .t3-hero__photo img { object-position: 52% 12%; }
  .type3-msg .t3-hero__inner { padding: 24px 18px 30px; }
  .type3-msg .t3-hero__panel { width: 100%; }
  .type3-msg.under main #content.t3-wrap .t3-hero__copy {
    padding: 14px 8px 16px;
    font-size: 25px;
    /* 幅が狭いときは溢れるより折り返す */
    white-space: normal;
  }
  .type3-msg .t3-hero__copy::before { inset: 0 -10px 0 -18px; }
  .type3-msg .t3-hero__lead { font-size: 13px; }
  .type3-msg .t3-hero__lead::before { inset: 0 -10px 0 -18px; }
  /* static にすると z-index が効かず、ヒーローの黄色シェイプ（z-index:1）に
     隠れてしまうため relative のまま前面に出す */
  .type3-msg .t3-hero__label {
    position: relative;
    inset: auto;
    z-index: 3;
    margin: 0 0 16px;
    /* .t3-hero__inner と同じ左右余白（ラベルは inner の外にある） */
    padding: 4px 18px 0;
    text-align: left;
    text-shadow: none;
  }
  .type3-msg .t3-hero__label::before { background: none; }
  .type3-msg .t3-hero__label .en { font-size: 26px; }
  /* 黄色ベタの上に出るので、罫だけ白に置き換える */
  .type3-msg .t3-hero__label .rule { margin: 10px 0 8px; background: #fff; }
  .type3-msg .t3-hero__label .brand { font-size: 17px; }

  /* INTRO */
  .type3-msg .t3-intro__grid {
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding-left: 0;
  }
  .type3-msg .t3-intro__lead {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 15px;
    line-height: 2;
  }
  .type3-msg .t3-intro__pic { grid-column: 1; grid-row: 1; }
  .type3-msg .t3-intro__grid .t3-note { grid-column: 2; grid-row: 1; }

  /* セクション: すべて1カラムに落とす */
  .type3-msg.under main #content.t3-wrap .t3-sec { padding: 20px 0 34px; }
  .type3-msg .t3-hd { align-items: center; margin-bottom: 14px; }
  .type3-msg .t3-hd__num { font-size: 30px; }
  .type3-msg.under main #content.t3-wrap .t3-hd__ttl { font-size: 21px; }

  .type3-msg .t3-grid--ml,
  .type3-msg .t3-grid--mr,
  .type3-msg .t3-grid--ep,
  .type3-msg .t3-grid--inline { grid-template-columns: 1fr; gap: 16px; }
  .type3-msg .t3-grid--mr > .t3-hd,
  .type3-msg .t3-grid--mr > .t3-fig,
  .type3-msg .t3-grid--mr > .t3-col,
  .type3-msg .t3-grid--ep > .t3-hd,
  .type3-msg .t3-grid--ep > .t3-ep,
  .type3-msg .t3-grid--ep > .t3-col { grid-column: 1; grid-row: auto; }
  .type3-msg .t3-inline__left { grid-template-columns: 1fr; gap: 14px; }
  .type3-msg .t3-inline__left .t3-hd { display: flex; align-items: center; }
  .type3-msg.under main #content.t3-wrap .t3-inline__left .t3-hd__ttl {
    margin: 0 0 0 8px;
    font-size: 21px;
  }

  .type3-msg.under main #content.t3-wrap .t3-quote { width: auto; font-size: 18px; }
  .type3-msg .t3-body { font-size: 15px; }
  .type3-msg .t3-q { font-size: 13.5px; }

  /* 03 カード */
  .type3-msg .t3-careers { grid-template-columns: 1fr; gap: 14px; }
  .type3-msg .t3-career { grid-template-columns: 96px minmax(0, 1fr); gap: 0 14px; }
  .type3-msg.under main #content.t3-wrap .t3-career__ttl { font-size: 16px; }
  .type3-msg .t3-career__txt { font-size: 14px; }

  /* 05 */
  /* 右カラムが無くなるので、右へ抜けるストライプ帯も畳む */
  .type3-msg .t3-ep::before { content: none; }
  .type3-msg .t3-ep__row { grid-template-columns: minmax(0, 1fr) 118px; }
  .type3-msg .t3-ep__row--2 {
    grid-template-columns: 1fr 1fr;
    gap: 0 8px;
    margin-right: 0;
  }
  /* 1カラムに近づくと傾きが崩れて見えるため水平に戻す */
  .type3-msg .t3-ep__row--2 > figure:last-child {
    margin-top: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    transform: none;
  }

  /* CTA */
  .type3-msg .t3-cta__head { flex-direction: column; align-items: stretch; }
  .type3-msg.under main #content.t3-wrap .t3-cta__lead { font-size: 23px; }
  .type3-msg .t3-cta__figure {
    justify-content: flex-end;
    margin-top: 6px;
  }
  .type3-msg .t3-cta__figure img { width: 150px; }
  .type3-msg .t3-cta__btns { grid-template-columns: 1fr; }
  .type3-msg .t3-cbtn { min-height: 62px; }
  .type3-msg .t3-cbtn--tel .num { font-size: 27px; }
  .type3-msg .t3-cbtn--line .label,
  .type3-msg .t3-cbtn--mail .label { font-size: 18px; }
}

@media screen and (max-width: 440px) {
  .type3-msg.under main #content.t3-wrap .t3-hero__copy { font-size: 22px; }
  .type3-msg.under main #content.t3-wrap .t3-cta__lead { font-size: 20px; }
  .type3-msg .t3-intro__grid { grid-template-columns: 92px minmax(0, 1fr); }
  .type3-msg .t3-ep__row { grid-template-columns: 1fr; }
  .type3-msg .t3-ep__row .t3-note { justify-self: end; }
}