@charset "UTF-8";
/* ==========================================================================
   KYOHEI HOSODA Portfolio — メインスタイル

   色・書体は現行 STUDIO 版から採取した実際の値を使っています。
   変更したいときは、まず下の「デザインの基本設定」だけ直せば
   サイト全体にまとめて反映されます。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザインの基本設定（ここだけ直せば全体が変わります）
   -------------------------------------------------------------------------- */
:root {
	/* 色 */
	--gold:        #C2A311;
	--gold-dark:   #A08908;
	--dark:        #2E2E2E;
	--dark-2:      #222222;
	--dark-3:      #080808;
	--text:        #333333;
	--text-mute:   #666666;
	--text-light:  #777777;
	--bg:          #FFFFFF;
	--bg-2:        #EEEEEE;
	--bg-3:        #E6E6E6;
	--line:        #DDDDDD;

	/* WORKS のパネル背景（交互に使う2色・STUDIO の実測値） */
	--panel-a:     #222222;
	--panel-b:     #2E2E2E;

	/* 書体（STUDIO 版の実測値に合わせています）
	   --font-en   … 英字の見出し・ボタン（Poppins）
	   --font-slab … ヒーローの記入欄（Rokkitt）
	   --font-body … 本文と日本語。STUDIO 版と同じく Lato ＋ OS 標準の日本語書体
	   --font-sign … 手書き風（Rock Salt） */
	--font-en:   "Poppins", sans-serif;
	--font-slab: "Rokkitt", Georgia, serif;
	--font-body: "Lato", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", Meiryo, sans-serif;
	--font-sign: "Rock Salt", cursive;

	/* 余白・幅 */
	--wrap:      1140px;
	--wrap-narrow: 880px;
	--gap-section: 120px;
}

/* --------------------------------------------------------------------------
   2. 土台
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	/* ヒーロー背景などページ幅いっぱいに広がる装飾で、
	   横スクロールが出ないようにする。clip は hidden と違い
	   ヘッダーの position: sticky を壊しません。 */
	overflow-x: clip;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* PC / スマホで画像を出し分ける <picture> は、
   親の高さいっぱいに広がる必要があるためブロック扱いにします。 */
picture { display: block; }

.gateway__bg picture,
.works-banner__bg picture,
.profile-section__bg picture { height: 100%; }
a  { color: inherit; text-decoration: none; }
a:hover { opacity: .7; }
a, button { transition: opacity .3s ease, color .3s ease, background-color .3s ease; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* 目には見えないが、キーボード操作と読み上げには残す書き方 */
.skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	left: 8px;
	top: 8px;
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 16px;
	clip-path: none;
	background: var(--dark);
	color: #fff;
}

.wrap {
	width: min(100% - 48px, var(--wrap));
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   3. 見出しの共通形（英字大見出し＋日本語小見出し）
      例）WORKS / 制作実績
   -------------------------------------------------------------------------- */
.sec-title { margin: 0 0 56px; }

.sec-title__en {
	display: block;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: clamp(1.9rem, 3.75vw, 4.5rem);
	line-height: 1.1;
	color: var(--dark-2);
}

.sec-title__jp {
	display: block;
	margin-top: .8vw;
	font-size: clamp(.82rem, 1.25vw, 1.5rem);
	font-weight: 400;
	letter-spacing: .05em;
	color: var(--text-light);
}

.sec-title--light .sec-title__en { color: #fff; }
.sec-title--light .sec-title__jp { color: rgba(255, 255, 255, .6); }

/* --------------------------------------------------------------------------
   4. ボタン
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 32px;
	border: 1px solid var(--dark-2);
	border-radius: 999px;
	background: transparent;
	color: var(--dark-2);
	font-family: var(--font-en);
	font-weight: 400;
	font-size: clamp(.7rem, .94vw, 1.1rem);
	letter-spacing: .12em;
	cursor: pointer;
}
.btn:hover { background: var(--dark-2); color: #fff; opacity: 1; }

.btn--gold { border-color: var(--gold); background: var(--gold); color: #fff; }
.btn--gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }

.btn--light { border-color: #fff; color: #fff; }
.btn--light:hover { background: #fff; color: var(--dark-2); }

/* --------------------------------------------------------------------------
   5. ハンバーガーメニュー（ヘッダーバーは置いていません）
   -------------------------------------------------------------------------- */
.nav-toggle {
	position: fixed;
	top: clamp(16px, 1.8vw, 32px);
	right: clamp(16px, 1.8vw, 32px);
	z-index: 60;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: clamp(44px, 3.8vw, 58px);
	height: clamp(44px, 3.8vw, 58px);
	padding: 0 clamp(10px, .9vw, 14px);
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(6px);
	box-shadow: 0 2px 14px rgba(0, 0, 0, .12);
	cursor: pointer;
}

.nav-toggle__bar {
	display: block;
	height: 1px;
	background: var(--dark-2);
	transition: transform .3s ease, opacity .3s ease;
}

/* 開いているときは×印になります */
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* hidden 属性が付いているときは必ず消す。
   display: flex だけだと hidden が打ち消され、透明なまま画面全体を覆って
   リンクがクリックできなくなります。 */
.nav-overlay[hidden] { display: none; }

.nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 55;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(8, 8, 8, .96);
	opacity: 0;
	transition: opacity .3s ease;
}

.nav-overlay.is-open { opacity: 1; }

.nav-overlay__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(20px, 2.8vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: clamp(1.5rem, 3.2vw, 3.4rem);
	letter-spacing: .06em;
	color: #fff;
}

.nav-overlay__list a { display: block; }
.nav-overlay__list a:hover { color: var(--gold); opacity: 1; }

/* いま見ているページ。ゴールドの文字色と下線で示します。
   （WordPress のメニュー機能を使う場合は current-menu-item が付きます） */
.nav-overlay__list a.is-current,
.nav-overlay__list .current-menu-item > a,
.nav-overlay__list .current_page_item > a {
	color: var(--gold);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 10px;
}

/* メニューを開くと最初のリンクにフォーカスが当たります（キーボード操作のため）。
   四角い枠は「選択中」と紛らわしいので、白い下線だけにしています。 */
.nav-overlay__list a:focus-visible {
	outline: none;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 10px;
}

@media (prefers-reduced-motion: reduce) {
	.nav-overlay { transition: none; }
}

/* --------------------------------------------------------------------------
   6. フッター
   -------------------------------------------------------------------------- */
.site-footer {
	background: var(--dark-3);
	color: #fff;
	padding: 64px 0 48px;
}

.site-footer__inner {
	width: min(100% - 48px, var(--wrap));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
	text-align: center;
}

/* ロゴ画像（kv_sign.png）。フッターは白く反転させて使います。 */
.site-logo {
	display: block;
	width: auto;
	height: clamp(52px, 5.2vw, 88px);
}

.site-logo--light { filter: brightness(0) invert(1); }

.site-footer__logo {
	margin: 0 0 8px;
}

.site-footer__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .82rem;
	letter-spacing: .08em;
}

.site-footer__copy {
	margin: 0;
	font-family: var(--font-body);
	font-size: .72rem;
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .5);
}

/* --------------------------------------------------------------------------
   7. セクションの共通余白
   -------------------------------------------------------------------------- */
.section { padding: var(--gap-section) 0; }
.section--tight { padding: 80px 0; }
.section--dark { background: var(--dark); color: #fff; }
.section--gray { background: var(--bg-2); }

/* --------------------------------------------------------------------------
   8. スクロールで表示するアニメーション
      現行サイトと同じ「透明度 0 → 1 / 1000ms / linear」
   -------------------------------------------------------------------------- */
.js .reveal {
	opacity: 0;
	transition: opacity 1000ms linear;
}
.js .reveal.is-visible { opacity: 1; }

/* 背景画像をゆっくり拡大（現行サイトと同じ 5000ms） */
.kenburns { overflow: hidden; }
.kenburns img {
	transform: scale(1);
	transition: transform 5000ms linear;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.is-visible .kenburns img,
.kenburns.is-visible img { transform: scale(1.08); }

/* JavaScript が無効・動きを減らす設定の場合は、最初から表示する
   （.js クラスは header.php の最初の 1 行で付けています） */

@media (prefers-reduced-motion: reduce) {
	.js .reveal { opacity: 1; transition: none; }
	.kenburns img { transform: none; transition: none; }
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	html { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; }

/* --------------------------------------------------------------------------
   9. トップ：ヒーロー（IDカード風）
   -------------------------------------------------------------------------- */
/* STUDIO 版の実測値（1280px 幅のとき）
     セクション 1280x800 ／ 顔写真 440x545 ／ テキスト列 x=640 幅514 */
.hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 44fr) minmax(0, 51fr);
	grid-template-areas:
		"visual title"
		"visual body";
	/* 行は内容ぶんの高さ。1fr にすると余った高さが行に配られ、
	   写真（2段ぶち抜き）が必要以上に大きくなります。 */
	grid-template-rows: auto auto;
	gap: 0 clamp(24px, 3.9vw, 50px);
	align-content: center;  /* 行そのものを縦中央に置く */
	align-items: stretch;   /* 写真の列をテキスト列の高さに合わせる */
	/* STUDIO は 1280px を基準に全体を拡大縮小します。
	   1004 / 1280 = 78.4vw なので、同じ比率で広がるようにしています。 */
	width: min(100% - 48px, 78.4vw);
	margin-inline: auto;
	/* KV は 1 画面に収める制約をかけません。
	   無理に詰めると写真が小さくなり、元のデザインが崩れるためです。
	   最低でも 1 画面ぶんの高さは確保し、内容が多ければそのぶん伸びます。 */
	min-height: 100vh;
	min-height: 100svh;
	padding: clamp(20px, 2.4vw, 48px) 0;
}

/* 背景の紙テクスチャ
   画像は「外観 → カスタマイズ → トップページの設定」で指定します。
   未設定のときは単色の背景になります。 */
.hero::before {
	content: "";
	position: absolute;
	/* 画面幅ちょうどに広げる。-50vw で左右に伸ばすと枠が画面の
	   2 倍になり、背景画像が引き伸ばされてぼやけます。 */
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background-color: var(--bg-2);
	background-image: var(--hero-texture, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 1;
	z-index: -1;
}

/* スマホ用のテクスチャが登録されていれば、そちらに差し替える */
@media (max-width: 548px) {
	.hero::before {
		background-image: var(--hero-texture-sp, var(--hero-texture, none));
	}
}

.hero__visual {
	position: relative;
	grid-area: visual;
}

.hero__title { grid-area: title; }
.hero__body  { grid-area: body; }

/* 写真は列の高さいっぱい。比率は保ったまま収めます。
   絶対配置にしているのは、写真が行の高さを決めてしまわないようにするためです。
   影と角丸は元画像に含まれているので CSS では付けません。 */
/* 高さをテキスト列に完全に合わせる。
   width を auto にすることで、幅ではなく高さが基準になります。 */
.hero__photo {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	width: auto;
	max-width: none;
}

/* 顔写真に重ねる小物（スタンプ・指紋など） */
.hero__stamp {
	position: absolute;
	left: -6%;
	bottom: 6%;
	width: 38%;
	transform: rotate(-14deg);
	opacity: .9;
}

.hero__title {
	margin: 0 0 40px;
	font-family: var(--font-en);
	font-weight: 800;
	font-size: clamp(2.2rem, 4.95vw, 5.9rem);
	line-height: 1;
	color: var(--gold);
	opacity: .75;          /* STUDIO と同じ透過 */
	text-wrap: balance;
}

/* IDカードの記入欄 */
.hero__fields {
	display: flex;
	flex-direction: column;
	gap: 2vw;
	max-width: 100%;
}

.hero__field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-bottom: 1px solid var(--dark-2);
	padding-bottom: 6px;
}

/* 記入欄のラベル：Rokkitt 400 / 16.64px */
.hero__key {
	font-family: var(--font-slab);
	font-weight: 400;
	font-size: clamp(.85rem, 1.3vw, 1.55rem);
	line-height: 1.1;
	color: var(--text);
}

/* 記入欄の値：Rokkitt 500 / 43.52px */
.hero__value {
	font-family: var(--font-slab);
	font-weight: 500;
	font-size: clamp(1.75rem, 3.4vw, 4.05rem);
	line-height: 1.3;
	color: #000;
}

.hero__value--sign {
	font-family: var(--font-sign);
	font-weight: 400;
	font-size: 1.1rem;
}

/* STUDIO 版では 64x91。thumbnail（150x150 の切り抜き）を使うと
   上下が欠けるので、テンプレート側で原寸を読み込んでいます。 */
.hero__fingerprint {
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp(48px, 5vw, 96px);
	height: auto;
	opacity: .85;
}

.hero__signature { width: clamp(120px, 12.5vw, 240px); max-width: 100%; }

.hero__field--sign { position: relative; padding-right: 84px; }

/* --------------------------------------------------------------------------
   10. トップ：2つの入口（DESIGN / VIDEOGRAPH）
   -------------------------------------------------------------------------- */
.gateways {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--line);
}

.gateway {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	min-height: clamp(240px, 31.25vw, 560px);
	padding: 48px 24px;
	background: var(--bg);
	text-align: center;
	overflow: hidden;
}

.gateway__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.gateway__bg img { width: 100%; height: 100%; object-fit: cover; }

/* STUDIO は背景画像に暗いオーバーレイをかけていません。
   ホバー時だけ軽く暗くします。 */
.gateway::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	z-index: 1;
	transition: background-color .3s ease;
}
.gateway:hover::after { background: rgba(0, 0, 0, .18); }
.gateway:hover { opacity: 1; }

/* 背景画像だけは絶対配置のまま残す（:not で除外しないと
   下の position: relative に打ち消されます） */
.gateway > *:not(.gateway__bg) { position: relative; z-index: 2; }

.gateway__en {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: clamp(1.6rem, 3.75vw, 4.5rem);
	color: var(--gold);
}

.gateway__jp {
	font-size: clamp(.82rem, 1.25vw, 1.5rem);
	font-weight: 400;
	letter-spacing: .05em;
	color: #fff;
}

.gateway__arrow {
	margin-top: 10px;
	width: 22px;
	height: 22px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   11. トップ：WORKS（自動スライド付き）
   -------------------------------------------------------------------------- */
/* WORKS セクション全体（行はページ幅いっぱいに広がります） */
.works { padding: 0; }

/* WORKS の見出し帯（背景画像の上に白文字） */
.works-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(240px, 31.25vw, 560px);
	padding: 64px 24px;
	overflow: hidden;
	background: var(--dark-2);
	text-align: center;
}

.works-banner__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.works-banner__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* STUDIO はオーバーレイなし */
.works-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0);
}

.works-banner .sec-title {
	position: relative;
	z-index: 2;
	margin: 0;
}

/* 全件おなじ形。左 70% が画像（自動スライド）、右 30% がダークパネル。
   左右を交互に入れ替える演出はしていません（STUDIO 版と同じ）。
   高さは 1 行 = 1 画面（lvh ＝スクロール中の表示領域・伸び縮みしません）。 */
.work-row {
	display: grid;
	grid-template-columns: 70% 30%;
	min-height: 100vh;        /* lvh に未対応のブラウザ向け */
	/* lvh はスマホのアドレスバーが隠れた状態の高さで、スクロールしても変わりません。
	   dvh だとバーの出入りに合わせて高さが伸び縮みし、画面がガクッと動きます。 */
	min-height: 100lvh;
}

.work-row__media {
	position: relative;
	background: var(--bg-3);
	overflow: hidden;
}

/* パネルの中身は縦中央。STUDIO では 800px のパネルに対して
   上下 200px ずつの対称な余白になっています。 */
.work-row__panel {
	display: flex;
	align-items: center;
	padding: 0;
	background: var(--panel-a);
	color: #fff;
}

/* 内側の余白は STUDIO 実測（384px のパネルに対して左右 48px = 12.5%） */
.work-row__inner {
	width: 100%;
	padding-inline: 12.5%;
}

/* タイトルと制作範囲のまとまり。下に白い 1px の線が入ります。 */
.work-row__meta {
	padding-bottom: 3.125vw;
	border-bottom: 1px solid #fff;
}

/* パネルの背景は 2 色を交互に。縦に同じ色が続きません。
   色を変えたいときは :root の --panel-a / --panel-b を直してください。 */
.work-row:nth-of-type(even) .work-row__panel { background: var(--panel-b); }

.work-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 自動スライド：全スライドを重ねて、表示中の 1 枚だけ不透明にする */
.work-slider { position: relative; width: 100%; height: 100%; }

.work-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1000ms linear;
}

.work-slider__slide.is-active { opacity: 1; }

/* JavaScript が無効でも 1 枚目は必ず見えるようにする */
.work-slider__slide:first-child { opacity: 1; }
.js .work-slider__slide:first-child:not(.is-active) { opacity: 0; }

.work-row__title {
	margin: 0;
	font-size: clamp(.85rem, 1.25vw, 1.5rem);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
	text-wrap: balance;
}

.work-row__scope {
	margin: 1.56vw 0 0;
	font-size: clamp(.7rem, .94vw, 1.1rem);
	font-weight: 400;
	line-height: 1.4;
	color: var(--text-light);
}

.work-row__teaser {
	margin: 3.2vw 0 0;
	font-size: clamp(.66rem, .86vw, 1rem);
	line-height: 2;
	color: #fff;
}

/* MORE ボタン：STUDIO 実測 155x49・白1px枠・左寄せ */
.work-row .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12.1vw;
	min-width: 120px;
	max-width: 100%;
	height: 3.83vw;
	min-height: 40px;
	margin-top: 3.125vw;
	padding: 0;
	border-color: #fff;
	border-radius: 0;   /* MORE は角丸にしない */
	color: #fff;
}

.work-row .btn:hover {
	background: #fff;
	border-color: #fff;
	color: var(--dark-2);
}

/* --------------------------------------------------------------------------
   11-2. PROFILE 下の DESIGN LIST / VIDEO LIST
         STUDIO 版は 640x153 の帯 2 枚。背景は入口と同じ画像を使っています。
   -------------------------------------------------------------------------- */
.list-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.list-link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: clamp(110px, 11.95vw, 215px);
	padding: 24px;
	overflow: hidden;
	background: var(--dark-2);
	text-align: center;
}

.list-link__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.list-link__bg picture { height: 100%; }

.list-link__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* STUDIO はオーバーレイなし */
.list-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0);
	transition: background-color .3s ease;
}

.list-link:hover::after { background: rgba(0, 0, 0, .18); }
.list-link:hover { opacity: 1; }

/* 背景だけは絶対配置のまま残す（:not で除外しないと打ち消されます） */
.list-link > span:not(.list-link__bg) {
	position: relative;
	z-index: 2;
}

.list-link__en {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: clamp(1.1rem, 2.08vw, 2.5rem);
	line-height: 1.1;
	color: var(--gold);
}

.list-link__jp {
	font-size: clamp(.7rem, .94vw, 1.1rem);
	letter-spacing: .05em;
	color: #fff;
}

/* 一覧ページ上部の見出し帯
   STUDIO 実測（1280px 幅のとき）：ページ名の帯 324px、WORKS の帯 229px */
.page-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(200px, 25.3vw, 460px);
	padding: 48px 24px;
	overflow: hidden;
	background: var(--dark-2);
	text-align: center;
}

.page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.page-hero__bg picture { height: 100%; }

.page-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-hero .sec-title {
	position: relative;
	z-index: 2;
	margin: 0;
}

/* ページ名は入口ブロックと同じくゴールド */
.page-hero .sec-title__en {
	color: var(--gold);
	font-size: clamp(1.9rem, 4.69vw, 5.6rem);
}

/* 一覧ページの WORKS 帯はトップより小さめ */
.works-banner--sm {
	min-height: clamp(150px, 17.9vw, 320px);
}

.works-banner--sm .sec-title__en {
	font-size: clamp(1.5rem, 2.81vw, 3.4rem);
}

/* --------------------------------------------------------------------------
   12. 一覧ページ（/design/ ・ /videograph/）
   -------------------------------------------------------------------------- */
.work-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 40px 32px;
}

.work-card__thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--bg-3);
	overflow: hidden;
	margin-bottom: 18px;
}

.work-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
.work-card:hover .work-card__thumb img { transform: scale(1.05); }
.work-card:hover { opacity: 1; }

.work-card__title {
	margin: 0 0 6px;
	font-size: clamp(.85rem, 1.25vw, 1.5rem);
	font-weight: 400;
	color: var(--dark-2);
}

.work-card__scope {
	margin: 0;
	font-size: clamp(.7rem, .94vw, 1.1rem);
	font-weight: 400;
	color: var(--text-light);
}

/* --------------------------------------------------------------------------
   13. 実績の詳細ページ
       STUDIO 実測（1280px / 1440px の両方で確認）
         背景 #2B2B2B ／ コンテンツ幅 980px 固定・中央寄せ
         文字サイズは画面幅で変わらない固定 px
           タイトル24 ／ 業種16 ／ 見出し14 ／ 本文13（行間20.8）
         カルーセル 高さ360px 固定・幅は可変・間隔128px・角丸8px
         区切り線 タイトル下=白1px ／ 概要下と本文下=#6C6C6C 1px
         ボタン 196x56・黒・角丸4px
   -------------------------------------------------------------------------- */
.work-single {
	background: #2B2B2B;
	color: #fff;
	padding: 60px 0 80px;
	overflow: hidden;
}

/* ---- 上部のカルーセル ---- */
.work-carousel {
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
}

/* 止まらずに一定速度で流れ続けます。
   1 セットぶん左へずらすと元と同じ絵柄になるため、継ぎ目が出ません。 */
.work-carousel__track {
	display: flex;
	gap: 128px;
	width: max-content;
	will-change: transform;
	animation: khp-marquee var(--marquee-duration, 20s) linear infinite;
}

@keyframes khp-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--marquee-shift, 0px))); }
}

/* 画面外にあるときは止める */
.work-carousel.is-paused .work-carousel__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.work-carousel__track { animation: none; }
}

.work-carousel__slide {
	flex: 0 0 calc(25vw + 152px);
	height: 360px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .06);
	overflow: hidden;
}

.work-carousel__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- 本文 ---- */
.work-single__inner {
	width: min(100% - 48px, 980px);
	margin-inline: auto;
}

/* タイトル欄。下に白い線が入ります。 */
.work-single__head {
	padding-top: 40px;
	padding-bottom: 41px;
	margin-bottom: 40px;
	border-bottom: 1px solid #fff;
}

.work-single__title {
	margin: 0 0 20px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	text-wrap: balance;
}

.work-single__industry {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: #999;
}

/* 左：見出し（196px）／右：本文（784px） */
.work-single__row {
	display: grid;
	grid-template-columns: 196px minmax(0, 1fr);
	margin-bottom: 60px;
}

.work-single__row:last-child { margin-bottom: 0; }

/* 概要の行と、見出し本文群の下にグレーの区切り線 */
.work-single__row--intro,
.work-single__sections {
	padding-bottom: 60px;
	margin-bottom: 61px;
	border-bottom: 1px solid #6C6C6C;
}

.work-single__heading {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
}

/* 制作範囲の項目。見出し「制作範囲」より小さく細い字です。
   STUDIO 実測：Lato 400 / 11px / 行間 17.6px */
.work-single__scope {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 11px;
	font-weight: 400;
	line-height: 17.6px;
	color: #fff;
}

.work-single__body {
	font-size: 13px;
	line-height: 20.8px;
	color: #fff;
}

.work-single__body > *:first-child { margin-top: 0; }
.work-single__body > *:last-child { margin-bottom: 0; }
.work-single__body p { margin: 0 0 1.2em; }

/* 本文中に画像を入れたときのはみ出し防止 */
.work-single__body figure { margin: 1.6em 0; }
.work-single__body img { width: 100%; height: auto; border-radius: 8px; }

/* ---- 外部リンクのボタン（196x56・黒・角丸4px） ---- */
.work-single__link {
	margin: 51px 0 0;
	text-align: center;
}

.work-single__link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 196px;
	max-width: 100%;
	height: 56px;
	border-radius: 4px;
	background: #000;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.work-single__link a:hover { background: #111; opacity: 1; }

/* --------------------------------------------------------------------------
   13-2. 固定ページの本文（会社概要などを追加したとき用）
   -------------------------------------------------------------------------- */

/* 固定ページのタイトル（日本語） */
.page-title {
	margin: 0 0 40px;
	font-size: clamp(1.3rem, 3vw, 1.8rem);
	font-weight: 400;
	line-height: 1.5;
	color: var(--dark-2);
}

/* 一覧ページの導入文 */
.work-list__intro {
	max-width: 68ch;
	margin: 56px auto;
	font-size: clamp(.85rem, 1.1vw, 1.05rem);
	color: var(--text-mute);
}

/* ページ送り */
.pagination {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 64px;
	font-family: var(--font-en);
	font-size: .82rem;
}

.pagination .current { color: var(--gold); font-weight: 500; }

.work-body {
	width: min(100%, var(--wrap-narrow));
	margin-inline: auto;
}

.work-body > * { margin-block: 0 1.6em; }

.work-body h2 {
	margin-block: 3vw .8em;
	font-size: clamp(1.1rem, 2.4vw, 1.6rem);
	font-weight: 500;
	color: var(--dark-2);
	padding-left: 14px;
	border-left: 3px solid var(--gold);
	line-height: 1.6;
}

.work-body h3 {
	margin-block: 2.2vw .6em;
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	font-weight: 500;
	color: var(--dark-2);
}

.work-body p { font-size: clamp(.88rem, 1.1vw, 1.05rem); }
.work-body figure { margin-block: 2.6em; }
.work-body img { width: 100%; height: auto; }

/* PROFILE：背景画像の上に白文字。1画面ぶんの高さです。 */
.profile-section {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: 100vh;
	min-height: 100lvh;
	padding: 5vw 0;
	color: #fff;
}

.profile-section__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.profile-section__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* STUDIO は背景に暗いオーバーレイをかけていません */
.profile-section::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0);
}

.profile-section > .wrap {
	position: relative;
	z-index: 2;
	width: min(100% - 48px, var(--wrap));
	margin-inline: auto;
}

/* 見出しはセンター合わせ */
.profile-section .sec-title {
	margin-bottom: 3.1vw;
	text-align: center;
}

.profile-section .profile__text { color: rgba(255, 255, 255, .85); }

/* --------------------------------------------------------------------------
   14. プロフィール
   -------------------------------------------------------------------------- */
.profile {
	display: grid;
	grid-template-columns: clamp(180px, 20.3vw, 320px) minmax(0, 1fr);
	grid-template-areas:
		"visual sign"
		"visual body";
	/* 上段はサインの高さぶん、下段が残り。
	   こうしないと余った高さが行に分配され、本文の上だけ広くなります。 */
	grid-template-rows: auto 1fr;
	gap: 0 clamp(28px, 6.3vw, 100px);
	align-items: center;
}

.profile__visual { grid-area: visual; }
.profile__sign   { grid-area: sign; }

/* 本文は下段の先頭から始める（中央寄せだと上下の余白がずれます） */
.profile__body {
	grid-area: body;
	align-self: start;
}

.profile__visual {
	aspect-ratio: 260 / 440;   /* STUDIO の 204/440 より横に広げています */
	background: rgba(255, 255, 255, .08);
	overflow: hidden;
}

.profile__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* PROFILE の手書きサイン。専用の白版が未登録のときは
   ヒーローと同じ画像を CSS で白く反転させて使います。 */
/* 本文の上下の余白を揃えるため、サインの下と SNS の上を同じ値にしています */
.profile__sign {
	display: block;
	width: clamp(140px, 15.6vw, 300px);
	max-width: 60%;
	height: auto;
	margin: 0 0 32px;
}

.profile__sign--invert { filter: brightness(0) invert(1); }

.profile__name {
	margin: 0 0 1.9vw;
	font-size: clamp(.85rem, 1.25vw, 1.5rem);
	font-weight: 400;
	letter-spacing: .1em;
	color: var(--dark-2);
}

/* 幅も文字サイズも画面幅に比例させることで、
   どの画面幅でも STUDIO と同じ位置で改行されます。
   （796 / 1280 = 62.2vw、12.032 / 1280 = 0.94vw） */
.profile__text {
	max-width: min(100%, 62.2vw);
	font-size: clamp(.7rem, .94vw, 1.1rem);
	line-height: 2;
	color: var(--text-mute);
}

/* 段落の既定マージンを消して、上下の余白を .profile__sign と .profile__sns で揃える */
.profile__text p { margin: 0; }

.profile__sns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.profile__sns a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(46px, 4.6vw, 72px);
	padding: 0 clamp(18px, 2.2vw, 34px);
	border: 1px solid #fff;
	border-radius: 96px;
	font-family: var(--font-body);
	font-size: clamp(.7rem, .94vw, 1.1rem);
	letter-spacing: .06em;
	color: #fff;
}

.profile__sns a:hover {
	background: #fff;
	color: var(--dark-2);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   15. お問い合わせ
   -------------------------------------------------------------------------- */
.contact { background: var(--dark); color: #fff; padding: var(--gap-section) 0; }

.contact__inner {
	width: min(100% - 48px, 720px);
	margin-inline: auto;
}

.contact input[type="text"],
.contact input[type="email"],
.contact textarea {
	width: 100%;
	padding: 14px 16px;
	margin-top: 8px;
	border: 1px solid #fff;
	background: #fff;
	color: var(--text);
	font-family: inherit;
	font-size: clamp(.85rem, 1.1vw, 1.15rem);
	border-radius: 4px;
}

.contact input::placeholder,
.contact textarea::placeholder { color: var(--text-light); }

.contact input[type="text"]:focus,
.contact input[type="email"]:focus,
.contact textarea:focus { outline: 2px solid var(--gold); outline-offset: 2px; }

.contact label {
	display: block;
	margin-bottom: 24px;
	font-size: .82rem;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .75);
}

.contact .required { color: var(--gold); margin-left: 4px; }

.contact input[type="submit"],
.contact .wpcf7-submit {
	display: inline-block;
	margin-top: 8px;
	padding: 15px 56px;
	border: 1px solid var(--gold);
	background: var(--gold);
	color: #fff;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: .8rem;
	letter-spacing: .18em;
	cursor: pointer;
	border-radius: 4px;
}
.contact input[type="submit"]:hover,
.contact .wpcf7-submit:hover { background: var(--gold-dark); border-color: var(--gold-dark); }

/* --------------------------------------------------------------------------
   16. 画面幅ごとの調整
      タブレット … 920px 以下 / スマートフォン … 548px 以下
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
	:root { --gap-section: 88px; }

	/* スマホでは写真とテキストを縦に積む。
	   スマホ用の背景画像が全画面用なので、高さは 1 画面のまま保ちます。 */
	/* 下端が画面の端に貼り付かないよう、下の余白を厚めにとります */
	.hero {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 24px 0 0;
		align-content: start;
	}
	.hero__visual {
		position: relative;
		width: 100%;
		max-width: 185px;
		aspect-ratio: 945 / 1170;
		/* margin: auto ではなく justify-self を使う。
		   グリッドの stretch と auto マージンが競合すると幅が 0 になります。 */
		justify-self: center;
		align-self: center;
	}

	/* 縦並びでも 1 行 = 1 画面を保つ。
	   画像が残りの高さいっぱいに広がり、パネルは内容ぶんの高さになります。 */
	.work-row {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(0, 1fr) auto;
	}
	.work-row__media { aspect-ratio: auto; }
	.work-row__panel { align-items: flex-start; }
	.work-row__inner { padding-inline: 24px; padding-block: 32px 40px; }
	.work-row__meta { padding-bottom: 20px; }
	.work-row__teaser { margin-top: 24px; }
	.work-row .btn { width: 200px; height: 52px; margin-top: 28px; }

	.profile { grid-template-columns: 1fr; gap: 28px; }
	.profile__visual { aspect-ratio: 3 / 2; max-width: 100%; }
	.profile__sign { width: 160px; }

	/* 詳細ページはスマホ・タブレットでは 1 カラムに */
	.work-single { padding: 40px 0 64px; }
	.work-single__row {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-bottom: 40px;
	}
	.work-single__row--intro,
	.work-single__sections {
		padding-bottom: 40px;
		margin-bottom: 40px;
	}
	.work-single__inner { width: calc(100% - 48px); }
	.work-single__head { padding-top: 24px; padding-bottom: 32px; margin-bottom: 36px; }
	.work-single__link { margin-top: 40px; }
	.work-carousel__slide { flex: 0 0 min(78vw, 420px); height: min(52vw, 280px); }
	.work-carousel__track { gap: 16px; }
}

@media (max-width: 548px) {
	/* --------------------------------------------------------------------
	   スマートフォン（STUDIO の 390px 表示を実測して合わせています）
	   文字サイズは画面幅に比例（390px のとき 12.987px = 3.33vw）
	   -------------------------------------------------------------------- */
	:root { --gap-section: 64px; }

	body { font-size: 15px; }

	.wrap,
	.site-footer__inner { width: calc(100% - 32px); }

	.sec-title { margin-bottom: 36px; }
	.sec-title__en { font-size: 8.89vw; }
	.sec-title__jp { font-size: 3.33vw; margin-top: 2.6vw; }

	/* ---- KV ----
	   下端が画面の縁に貼り付かないよう、下に十分な余白を確保します。
	   高さは svh 基準なので、アドレスバーが出ていても切れません。 */
	/* 写真 → タイトル → 記入欄 の順。
	   STUDIO はタイトルが最上段ですが、その位置だと右上のハンバーガーと
	   重なって読みづらいため、写真を先頭にしています。 */
	.hero {
		width: calc(100% - 70px);
		grid-template-columns: 1fr;
		grid-template-areas:
			"visual"
			"title"
			"body";
		grid-template-rows: auto auto 1fr;
		gap: 0;
		padding: 18px 0 72px;
		align-content: start;
	}

	/* 写真の下・タイトルの上に間隔をとる */
	.hero__visual { margin-bottom: 4vw; }

	.hero__title {
		font-size: 9.63vw;
		margin-bottom: 4vw;
	}

	/* STUDIO 実測：390px 幅のとき 320x396 */
	.hero__visual {
		max-width: 100%;
		width: 82vw;
		aspect-ratio: 320 / 396;
		justify-self: start;
		margin-bottom: 3vw;
	}

	.hero__fields { gap: 3.2vw; }
	.hero__key { font-size: 2.5vw; }
	.hero__value { font-size: 6vw; }
	.hero__signature { width: 32vw; }
	.hero__fingerprint { width: 19.2vw; }
	.hero__field--sign { padding-right: 22vw; }

	/* ---- 入口（DESIGN / VIDEOGRAPH）と WORKS 帯 ----
	   STUDIO は 3 つの帯が合わせて 1 画面に収まります（各 1/3） */
	.gateways { grid-template-columns: 1fr; }

	.gateway,
	.works-banner {
		min-height: 33.33lvh;
		padding: 24px;
	}

	.gateway__en,
	.works-banner .sec-title__en { font-size: 8.89vw; }

	.gateway__jp { font-size: 3.33vw; }

	.gateway__arrow { width: 16px; height: 16px; margin-top: 6px; }

	/* ---- WORKS の行（画像 4 割・パネル 6 割） ---- */
	.work-row { grid-template-rows: 40% 60%; }

	/* パネル 390x506：上余白50 ／ 内側左右35（=9%）
	   タイトル＋制作範囲の下に白線 ／ MORE は 218x60 で中央 */
	.work-row__panel { align-items: flex-start; }
	.work-row__inner { padding-inline: 9%; padding-block: 50px 0; }
	.work-row__meta { padding-bottom: 5.13vw; }
	.work-row__title { font-size: 5.19vw; }
	/* スマホは行間が広め（STUDIO 実測 1.8） */
	.work-row__scope { font-size: 3.33vw; margin-top: 5.13vw; line-height: 1.8; }
	.work-row__teaser { font-size: 3.33vw; margin-top: 5.13vw; }
	.work-row .btn {
		/* inline-flex のままだと margin:auto で中央に寄らないため flex にします */
		display: flex;
		width: 55.9vw;
		height: 15.4vw;
		min-width: 0;
		min-height: 0;
		margin: 12.8vw auto 0;
		font-size: 3.33vw;
	}

	/* ---- PROFILE ---- */
	/* 上：見出しの位置を下げる ／ 下：ボタンの下に余白を足す */
	.profile-section { min-height: 0; padding: 100px 0 110px; }

	/* 内容は左右 40px の余白（本文幅 310px）*/
	.profile-section > .wrap { width: calc(100% - 80px); }

	/* 見出しが見出しとして伝わるよう、写真との間を空けます。
	   STUDIO は 92px ですが、下が詰まって見えるため 70px にしています。 */
	.profile-section .sec-title { margin-bottom: 70px; }

	/* 上段に写真とサインを横並び、その下に本文（全幅）。
	   写真とサインは高さの中心を揃えます。 */
	.profile {
		grid-template-columns: 29.5vw minmax(0, 1fr);
		grid-template-areas:
			"visual sign"
			"body   body";
		gap: 40px 40px;
		align-items: center;
	}

	.profile__visual {
		display: block;
		width: 100%;
		aspect-ratio: 115 / 172;   /* STUDIO 実測 115x172 */
		max-width: none;
	}

	.profile__sign { width: 38.5vw; max-width: none; margin: 0; }

	.profile__text {
		max-width: 100%;
		width: 79.5vw;
		margin-inline: auto;
		font-size: 3.33vw;
		line-height: 1.8;
	}

	/* STUDIO 実測：273x60・角丸128px・白1px枠・文字16px・90px間隔 */
	/* 本文の上（グリッドの行間 40px）と下を同じにする */
	.profile__sns {
		flex-direction: column;
		align-items: center;
		gap: 30px;
		margin-top: 40px;
	}

	.profile__sns a {
		width: 70vw;
		min-height: 60px;
		padding: 0;
		border-radius: 128px;
		font-size: 4.1vw;
	}

	/* ---- DESIGN LIST / VIDEO LIST（2 段・各 169px） ---- */
	.list-links { grid-template-columns: 1fr; }
	.list-link { min-height: 43.3vw; }
	.list-link__en { font-size: 6.67vw; }
	.list-link__jp { font-size: 3.33vw; }

	/* ---- 一覧ページの見出し帯 ---- */
	.page-hero { min-height: 43.3vw; }
	.page-hero .sec-title__en { font-size: 8.89vw; }

	/* ---- 実績の詳細ページ（文字サイズは PC と同じ固定 px） ---- */
	.work-single { padding: 80px 0 60px; }
	.work-single__inner { width: calc(100% - 50px); }
	.work-single__head { padding-top: 20px; padding-bottom: 40px; margin-bottom: 40px; }
	.work-single__title { font-size: 24px; margin-bottom: 20px; }
	.work-single__industry { font-size: 16px; }

	/* 見出しとその本文をひとかたまりに見せるため、
	   見出し→本文は 10px、次の見出しまでは 40px 空けます（STUDIO 実測）。 */
	.work-single__row {
		grid-template-columns: 1fr;
		gap: 10px;
		margin-bottom: 40px;
	}

	/* 見出しだけの段（ロゴデザイン等）は下マージンを消す。
	   これが残っていると gap に足されて間隔が広がります。
	   制作範囲のように下に項目が続く場合は :last-child に当たらないので保持されます。 */
	.work-single__label .work-single__heading:last-child { margin-bottom: 0; }

	/* 制作範囲と概要の行だけは少し広め */
	.work-single__row--intro { gap: 34px; }

	.work-single__row--intro,
	.work-single__sections {
		padding-bottom: 44px;
		margin-bottom: 44px;
	}

	.work-single__sections .work-single__row:last-child { margin-bottom: 0; }

	.work-single__link { margin-top: 44px; }

	.work-carousel { margin-bottom: 20px; }
	.work-carousel__track { gap: 48px; }
	.work-carousel__slide {
		flex: 0 0 67.7vw;
		height: 51.3vw;
		border-radius: 6px;
	}

	/* ---- そのほか ---- */
	.work-grid { grid-template-columns: 1fr; gap: 32px; }
	.work-body h2 { margin-block: 40px .8em; }
}

/* --------------------------------------------------------------------------
   17. サンクスページ（お問い合わせ送信完了）
      固定ページ /thanks/ に「サンクスページ（送信完了）」テンプレートを
      割り当てると、このデザインで表示されます。
   -------------------------------------------------------------------------- */
.thanks {
	display: grid;
	place-items: center;
	min-height: 100lvh;
	padding: 120px 0 88px;
	background: var(--dark);
	color: #fff;
	text-align: center;
}

.thanks__inner {
	width: min(100% - 48px, 720px);
}

.thanks__title { margin: 0; }

.thanks__en {
	display: block;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: clamp(1.9rem, 3.75vw, 4.5rem);
	line-height: 1.1;
	letter-spacing: .02em;
	color: #fff;
}

/* 英字の下の金色のライン。CONTACT セクションと同じ差し色です。 */
.thanks__en::after {
	content: "";
	display: block;
	width: 48px;
	height: 1px;
	margin: 28px auto 0;
	background: var(--gold);
}

.thanks__jp {
	display: block;
	margin-top: 24px;
	font-size: clamp(.9rem, 1.25vw, 1.25rem);
	font-weight: 400;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .72);
}

.thanks__body {
	margin-top: 40px;
	font-size: clamp(.85rem, 1.05vw, 1rem);
	line-height: 2.1;
	color: rgba(255, 255, 255, .72);
}
.thanks__body p { margin: 0 0 1.4em; }
.thanks__body p:last-child { margin-bottom: 0; }
.thanks__body a { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }

.thanks__actions { margin: 56px 0 0; }

@media (max-width: 920px) {
	.thanks { padding: 104px 0 72px; }
	.thanks__inner { width: calc(100% - 48px); }
	.thanks__en::after { margin-top: 22px; }
	.thanks__body { margin-top: 32px; line-height: 2; }
	.thanks__actions { margin-top: 44px; }
}