@charset "UTF-8";
/* =========================================================
   株式会社Relife コーポレートサイト
   共通スタイル
   設計の参考: https://stile-inc.jp/（構成・演出の考え方のみ参照。
   コード・画像・フォントファイルの流用は一切していない）
   ========================================================= */

/* ---------- 変数 ---------- */
:root {
  --c-text: #333333;
  --c-black: #000000;
  --c-white: #ffffff;
  --c-footer: #292929;
  --c-line: #a0a0a0;
  --c-bg-soft: #f7f6f3;

  /* 上質ミニマル方向に合わせて彩度を落としたアクセント */
  --c-service: #7c9a62;   /* 事業＝セージグリーン */
  --c-media: #c9a24b;     /* 発信＝マットゴールド */
  --c-profile: #b87355;   /* 代表＝テラコッタ（淡） */

  --c-hairline: #e5e1d8;  /* 極細罫線 */

  --f-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", meiryo, sans-serif;
  --f-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --w-container: 1200px;
  --w-sub: 960px;
  --header-h: 96px;
}

/* ---------- リセット ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-base);
  font-weight: 400;
  color: var(--c-text);
  line-height: 1.9;
  letter-spacing: .02em;
  background: var(--c-white);
  /* clip を使う。hidden は body 自体をスクロールコンテナにしてしまい、
     ページ全体のスクロール位置制御と噛み合わないため。 */
  overflow-x: clip;
}

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

/* 日本語の長い見出しが横幅を押し広げないようにする */
h1, h2, h3, h4, p, li, dt, dd, th, td { overflow-wrap: break-word; word-break: normal; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 3px solid var(--c-service); outline-offset: 3px; }

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

/* 表示切替 */
.pc { display: block; }
.sp { display: none; }
@media screen and (max-width: 540px) {
  .pc { display: none; }
  .sp { display: block; }
}
.nb { display: block; }
.tb { display: none; }
@media screen and (max-width: 768px) {
  .nb { display: none; }
  .tb { display: block; }
}

/* ---------- 共通パーツ ---------- */
.container { width: var(--w-container); max-width: 90%; margin-inline: auto; }
.sub-container { width: var(--w-sub); max-width: 90%; margin-inline: auto; }

/* ゴーストボタン（細い罫線＋広めの字間） */
.btn {
  display: block;
  position: relative;
  width: 240px;
  max-width: 100%;
  padding: 14px 34px 14px 18px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--c-text);
  background-color: transparent;
  border: 1px solid #4a4a4a;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.btn::after {
  position: absolute;
  content: "";
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  top: 50%; right: 18px;
  transform: translateY(-50%) rotate(45deg);
  transition: right .3s ease;
}
.btn:hover { background-color: var(--c-black); border-color: var(--c-black); color: var(--c-white); }
.btn:hover::after { right: 13px; }

.btn--white { border-color: rgba(255, 255, 255, .85); color: var(--c-white); background: transparent; }
.btn--white:hover { background-color: var(--c-white); border-color: var(--c-white); color: var(--c-black); }

.btn--wide { width: 300px; padding: 16px 36px 16px 20px; }
@media screen and (max-width: 540px) {
  .btn { width: 210px; font-size: 13px; padding: 12px 30px 12px 14px; }
  .btn--wide { width: 250px; padding: 13px 32px 13px 16px; }
}

/* スクロールで出す（動きは控えめに、長めの尺で上品に） */
.fadein { opacity: 0; transform: translateY(26px); transition: opacity 1.4s cubic-bezier(.22,1,.36,1), transform 1.4s cubic-bezier(.22,1,.36,1); }
.fadein.is-shown { opacity: 1; transform: translateY(0); }
.fadein-right { opacity: 0; transform: translateX(-26px); transition: opacity 1.4s cubic-bezier(.22,1,.36,1), transform 1.4s cubic-bezier(.22,1,.36,1); }
.fadein-right.is-shown { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fadein, .fadein-right { opacity: 1; transform: none; transition: none; }
  .kv__slide { animation: none !important; }
}

/* =========================================================
   ヘッダー
   ========================================================= */
.header {
  position: fixed;
  width: 95%;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  z-index: 999;
}
@media screen and (max-width: 768px) {
  /* transform を残すと、中のスマホメニュー（position:fixed）の基準が
     ビューポートではなくヘッダーになり、全画面に開かなくなる */
  .header { width: 100%; top: 0; left: 0; transform: none; }
}
.header__inner { display: flex; align-items: center; justify-content: space-between; }

.header__logo { display: block; transition: opacity .5s ease; }
.header__logo.is-hidden { opacity: 0; pointer-events: none; }

.logo-mark {
  display: flex; align-items: baseline; gap: 10px;
  font-weight: 700; letter-spacing: .06em; line-height: 1;
}
.logo-mark__en { font-size: 30px; color: var(--c-black); }
.logo-mark__jp { font-size: 12px; color: var(--c-text); letter-spacing: .18em; }
.logo-mark::before {
  content: "";
  width: 26px; height: 26px;
  border-radius: 50% 50% 50% 4px;
  background: linear-gradient(135deg, var(--c-service) 0%, var(--c-media) 55%, var(--c-profile) 100%);
  align-self: center;
  flex: none;
}
@media screen and (max-width: 768px) {
  .header__logo { padding: 18px 0 0 16px; }
}
@media screen and (max-width: 540px) {
  .logo-mark__en { font-size: 22px; }
  .logo-mark__jp { font-size: 10px; }
  .logo-mark::before { width: 20px; height: 20px; }
}

/* 正式ロゴ（Ribbon Monogram / Blue Edition） */
.logo-img { height: 44px; width: auto; display: block; }
@media screen and (max-width: 540px) { .logo-img { height: 34px; } }
.header .logo-img--white { display: none; }
.header--onkv .logo-img--color { display: none; }
.header--onkv .logo-img--white { display: block; }
.spmenu .logo-img { height: 38px; }
.footer .logo-img { height: 32px; }

/* ヘッダーが写真の上に乗るページでは白抜きにする */
.header--onkv .logo-mark__en,
.header--onkv .logo-mark__jp { color: var(--c-white); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
@media screen and (max-width: 768px) {
  .header--onkv .logo-mark__en, .header--onkv .logo-mark__jp { color: var(--c-white); }
}

/* PCナビ（白いピル） */
.gnav { transition: opacity .5s ease; }
.gnav.is-hidden { opacity: 0; pointer-events: none; }
.gnav__list {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 38px;
  padding: 18px 34px;
  background-color: var(--c-white);
  border-radius: 100px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}
.gnav__list a {
  font-size: 14px; font-weight: 500; letter-spacing: .1em; color: var(--c-text);
  position: relative; padding-bottom: 2px;
}
.gnav__list a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px; background: var(--c-service);
  transform: scaleX(0); transform-origin: right; transition: transform .3s ease;
}
.gnav__list a:hover::after,
.gnav__list a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.gnav__list a[aria-current="page"] { font-weight: 700; }
@media screen and (max-width: 1024px) {
  .gnav__list { gap: 22px; padding: 16px 26px; }
  .gnav__list a { font-size: 15px; }
}

/* ハンバーガー */
.hamburger {
  width: 50px; height: 50px;
  margin: 18px 16px 0 0;
  padding: 13px 12px;
  background: var(--c-white);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
  position: relative; z-index: 1001;
}
.hamburger span {
  display: block; width: 24px; height: 2px; margin: 6px auto;
  background: #393939; transition: transform .3s ease, opacity .3s ease;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* SPメニュー */
.spmenu {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--c-white);
  transform: translateX(100%);
  transition: transform .4s ease;
  overflow-y: auto;
  padding: 30px;
}
.spmenu.is-open { transform: translateX(0); }
.spmenu__logo { margin-bottom: 40px; }
/* メニューは白地なので、写真の上用の白抜き指定を打ち消す */
.header--onkv .spmenu .logo-mark__en { color: var(--c-black); text-shadow: none; }
.header--onkv .spmenu .logo-mark__jp { color: var(--c-text); text-shadow: none; }
.spmenu__list { display: flex; flex-direction: column; gap: 28px; padding-top: 20px; }
.spmenu__list a { font-size: 21px; font-weight: 500; position: relative; padding-left: 20px; }
.spmenu__list a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 8px; height: 8px; border-top: 2px solid var(--c-service); border-right: 2px solid var(--c-service);
  transform: translateY(-50%) rotate(45deg);
}
.spmenu__foot { margin-top: 48px; font-size: 13px; color: #777; }
@media screen and (max-width: 540px) {
  .spmenu__list a { font-size: 17px; }
}

/* =========================================================
   トップ：キービジュアル
   ========================================================= */
.kv { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: #1c1a17; }
.kv__slide {
  position: absolute; inset: -4%;
  opacity: 0;
  transition: opacity 2.8s ease;
  background-position: center;
  background-size: cover;
  will-change: transform, opacity;
}
/* 映像のようなゆっくりしたパン＋ズーム。スライドごとに動きを変える */
.kv__slide.is-active { opacity: 1; animation: kvDriftIn 19s cubic-bezier(.25,.1,.25,1) both; }
.kv__slide:nth-child(2).is-active { animation-name: kvDriftOut; }
.kv__slide:nth-child(3).is-active { animation-name: kvDriftSide; }
@keyframes kvDriftIn {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.1) translate(-1.2%, -1%); }
}
@keyframes kvDriftOut {
  from { transform: scale(1.12) translate(1%, -.8%); }
  to   { transform: scale(1) translate(0, 0); }
}
@keyframes kvDriftSide {
  from { transform: scale(1.06) translate(-1.4%, .6%); }
  to   { transform: scale(1.06) translate(1.2%, -.6%); }
}

/* ヘッダー動画（PC・通常モーション設定時のみJSが注入する） */
.kv__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.kv__video.is-playing { opacity: 1; }

/* ページを開いた瞬間の白いベール（JSが生成し、フェードアウトする） */
.intro-veil {
  position: fixed; inset: 0; z-index: 2000;
  background: #fbfaf8;
  opacity: 1;
  transition: opacity 1.4s ease .3s;
  pointer-events: none;
}
.intro-veil.is-out { opacity: 0; }
/* 画像が無い環境でも破綻しないための下地 */
.kv::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 15% 20%, #fdf6e6 0%, rgba(253,246,230,0) 60%),
    radial-gradient(100% 80% at 85% 30%, #eaf3e4 0%, rgba(234,243,228,0) 55%),
    linear-gradient(160deg, #f6f2ea 0%, #e9efe6 55%, #f3ece1 100%);
}

/* 明るい写真でもヘッダーのロゴが読めるように、上端だけ暗く落とす */
.kv::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .12) 18%, rgba(0, 0, 0, 0) 34%);
  pointer-events: none;
}

.kv-cover {
  position: fixed; inset: 0; z-index: -1;
  background-color: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.kv-cover.is-shown { opacity: 1; }

/* ヒーローコピー */
.hero {
  /* svh = ブラウザUI（スマホのURLバー等）を除いた「実際に見えている高さ」。
     スクロールせずにファーストビュー全体が収まるようにする */
  height: 100vh;
  height: 100svh;
  position: relative;
}
.hero__copy {
  position: fixed;
  top: 46%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 1100px);
  text-align: center;
  transition: opacity .5s ease;
  z-index: 1;
  /* 固定表示のままページ全体に残るため、下のボタンやリンクのクリックを吸わないようにする */
  pointer-events: none;
}
.hero__copy.is-hidden { opacity: 0; }
.hero__lead {
  font-size: clamp(12px, 1.4vw, 15px);
  font-weight: 500;
  letter-spacing: .5em;
  text-indent: .5em; /* 中央揃え時の字間ズレ補正 */
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
  margin-bottom: 34px;
}
.hero__title {
  font-family: var(--f-serif);
  font-size: clamp(40px, 7.2vw, 100px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .14em;
  color: var(--c-white);
  text-shadow: 0 3px 22px rgba(0, 0, 0, .45);
}
.hero__rule {
  width: 1px; height: 54px;
  margin: 40px auto 0;
  background: rgba(255, 255, 255, .7);
}

/* 見出しの1文字ずつの立ち上がり（JSが .char に分割し --i を振る） */
.hero__title .char { display: inline-block; }
.hero--ready .hero__title .char {
  opacity: 0;
  transform: translateY(.55em);
}
.hero--ready.is-in .hero__title .char {
  animation: charIn 1.3s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--i) * .06s + .4s);
}
@keyframes charIn {
  to { opacity: 1; transform: translateY(0); }
}
.hero--ready .hero__lead,
.hero--ready .hero__rule {
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero--ready .hero__rule { transform: scaleY(0); transform-origin: top; transition: opacity 1.6s ease, transform 1.2s cubic-bezier(.22,1,.36,1); }
.hero--ready.is-in .hero__lead { opacity: 1; transition-delay: 1.5s; }
.hero--ready.is-in .hero__rule { opacity: 1; transform: scaleY(1); transition-delay: 1.9s; }

/* 右端の縦書き英字ラベル */
.hero__side {
  position: fixed;
  right: 34px; bottom: 44px;
  pointer-events: none;
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: .42em;
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
  transition: opacity .6s ease;
  z-index: 1;
}
.hero__side.is-hidden { opacity: 0; }
@media screen and (max-width: 768px) { .hero__side { display: none; } }
.hero__title .accent {
  background: linear-gradient(transparent 62%, rgba(111, 181, 82, .85) 62%);
  padding-inline: 4px;
}
.hero__scroll {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%);
  pointer-events: none;
  color: var(--c-white); font-size: 11px; letter-spacing: .3em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  writing-mode: vertical-rl;
  padding-bottom: 56px;
  transition: opacity .5s ease;
  z-index: 1;
}
.hero__scroll.is-hidden { opacity: 0; }
.hero__scroll::after {
  content: ""; position: absolute; bottom: 0; left: 50%;
  width: 1px; height: 46px; background: rgba(255, 255, 255, .8);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}


/* 縦幅が低い画面ではファーストビューの要素を縮めて1画面に収める */
@media (max-height: 760px) {
  .hero__title { font-size: clamp(32px, 6vw, 72px); }
  .hero__lead { margin-bottom: 20px; }
  .hero__rule { height: 36px; margin-top: 24px; }
  .hero__scroll { bottom: 18px; padding-bottom: 42px; }
  .hero__scroll::after { height: 34px; }
}
@media (max-height: 600px) {
  .hero__title { font-size: clamp(28px, 5vw, 54px); }
  .hero__rule { display: none; }
}

/* =========================================================
   トップ：メッセージ（背景写真の上）
   ========================================================= */
.message { padding: 360px 90px 260px; }
@media screen and (max-width: 768px) { .message { padding: 250px 40px 170px; } }
@media screen and (max-width: 540px) { .message { padding: 200px 24px 130px; } }

.message__head {
  font-family: var(--f-serif);
  font-size: clamp(28px, 5.6vw, 76px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-white);
  margin-bottom: 64px;
  letter-spacing: .1em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.message__head small {
  display: block;
  font-family: var(--f-base);
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 500;
  letter-spacing: .48em;
  margin-bottom: 28px;
  color: rgba(255, 255, 255, .8);
}
.message p {
  color: var(--c-white);
  font-weight: 500;
  text-align: right;
  font-size: clamp(15px, 2.1vw, 28px);
  line-height: 2.1;
  letter-spacing: .08em;
  /* 背景写真の明るい部分に重なっても読めるようにする */
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.message p.up { margin-top: 52px; }
.message .btn { margin-left: auto; margin-top: 80px; }
@media screen and (max-width: 540px) {
  .message p.up { margin-top: 34px; }
  .message .btn { margin-top: 52px; }
}

/* =========================================================
   トップ：2カラムの章
   ========================================================= */
.column-sec {
  background-color: var(--c-white);
  position: relative;
  padding: 210px 80px 210px 190px;
}
@media screen and (max-width: 1024px) { .column-sec { padding: 150px 50px 150px 130px; } }
@media screen and (max-width: 768px)  { .column-sec { padding: 110px 40px 110px 105px; } }
@media screen and (max-width: 540px)  { .column-sec { padding: 90px 24px 90px 66px; } }

/* 左端の縦バー */
.column-sec__tag {
  position: absolute;
  top: 0; left: 0;
  width: 68px;
  height: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 44px;
  transition: height 1.8s cubic-bezier(.19,1,.22,1);
  overflow: hidden;
}
.column-sec__tag.is-shown { height: 100%; }
.column-sec__tag span {
  writing-mode: vertical-rl;
  font-size: 12px; font-weight: 500;
  letter-spacing: .55em;
  color: rgba(255, 255, 255, .95);
  white-space: nowrap;
}
.column-sec--service .column-sec__tag { background: var(--c-service); }
.column-sec--media   .column-sec__tag { background: var(--c-media); }
.column-sec--profile .column-sec__tag { background: var(--c-profile); }
@media screen and (max-width: 540px) {
  .column-sec__tag { width: 44px; padding-top: 26px; }
  .column-sec__tag span { font-size: 10px; letter-spacing: .45em; }
}

.column-sec__title {
  font-family: var(--f-serif);
  font-size: clamp(32px, 5.4vw, 76px);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 80px;
  letter-spacing: .1em;
}
@media screen and (max-width: 540px) { .column-sec__title { margin-bottom: 52px; } }

.column-sec__lead {
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 2.3;
  max-width: 680px;
  margin-bottom: 120px;
}
@media screen and (max-width: 540px) { .column-sec__lead { margin-bottom: 70px; } }

.column-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 90px;
  margin-bottom: 160px;
}
.column-item:last-child { margin-bottom: 0; }
.column-item__figure { width: min(780px, 50%); flex: none; }
.column-item__figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: linear-gradient(140deg, #eef2ea, #f7f1e6);
}
/* 書籍の表紙は縦長なので、切り取らずに全体を見せる */
.column-item__figure--book {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10;
  padding: 34px;
  background: linear-gradient(150deg, #f6f4ee 0%, #eef1ea 100%);
}
.column-item__figure--book img {
  width: auto; height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

.column-item__body { width: 480px; }
@media screen and (max-width: 1440px) { .column-item__figure { width: 50%; } }
@media screen and (max-width: 1024px) {
  .column-item { flex-wrap: wrap; gap: 40px; justify-content: flex-start; margin-bottom: 110px; }
  .column-item__figure, .column-item__body { width: 100%; }
}

.column-item__name {
  font-family: var(--f-serif);
  font-size: clamp(23px, 2.6vw, 40px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .06em;
  margin-bottom: 22px;
}
.column-item__sub {
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .04em;
  padding-bottom: 30px;
  margin-bottom: 30px;
  position: relative;
}
.column-item__sub::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 44px; height: 1px; background: var(--c-text);
}
@media screen and (max-width: 540px) {
  .column-item__sub { padding-bottom: 20px; margin-bottom: 20px; }
  .column-item__sub::after { width: 36px; }
}
.column-item__text { font-size: clamp(13px, 1.05vw, 15px); line-height: 2.2; margin-bottom: 36px; }
.column-item__meta {
  display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 36px;
}
.column-item__meta li {
  font-size: 12px; font-weight: 400;
  letter-spacing: .06em;
  padding: 6px 16px;
  border: 1px solid var(--c-hairline);
  border-radius: 100px;
  color: #6b675f;
}
.column-item__price {
  font-size: 15px; font-weight: 700; margin-bottom: 24px;
}
.column-item__price span { font-size: 22px; }

/* SNSブロック（プロフィール画面を並べる） */
.sns-block { max-width: 1100px; margin-top: 100px; }
@media screen and (max-width: 768px) { .sns-block { margin-top: 70px; } }
.sns-block__lead { max-width: 760px; }
.sns-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  align-items: start;
  margin-bottom: 26px;
}
@media screen and (max-width: 768px) {
  .sns-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
}
.sns-card {
  display: block;
  background: var(--c-white);
  border: 1px solid var(--c-hairline);
  transition: transform .25s ease, box-shadow .25s ease;
}
.sns-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, .14); }
.sns-card__shot { overflow: hidden; background: #f2f0ea; }
.sns-card__shot img { width: 100%; height: auto; display: block; }
.sns-card__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #e3e0d8;
}
.sns-card__name { font-size: 17px; font-weight: 700; }
.sns-card__count { font-size: 14px; color: #555; }
/* 補助6媒体: 3列グリッド。画像は1280x800の統一規格で作成済み */
.sns-grid--sub { grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media screen and (max-width: 1024px) { .sns-grid--sub { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 540px)  { .sns-grid--sub { grid-template-columns: 1fr; } }
.sns-card--sub .sns-card__shot { aspect-ratio: 16 / 10; }
.sns-card--sub .sns-card__shot img { height: 100%; object-fit: cover; }
.sns-card--sub .sns-card__name { font-size: 15px; }
.sns-card--sub .sns-card__count { font-size: 13px; }
.sns-card--sub .sns-card__meta { padding: 13px 16px; }
@media screen and (max-width: 540px) {
  .sns-card__meta { flex-direction: column; gap: 2px; padding: 13px 15px; }
  .sns-card__name { font-size: 15px; }
  .sns-card__count { font-size: 13px; }
}
.sns-block .btn { margin-top: 34px; }

/* 逆並び（画像が左） */
.column-item--rev { flex-direction: row-reverse; justify-content: flex-start; }
@media screen and (max-width: 1024px) { .column-item--rev { flex-direction: row; flex-wrap: wrap; } }

/* =========================================================
   トップ：コンテンツ実績（人気動画＋教材マーキー）
   ========================================================= */
.contents-sec {
  background: var(--c-white);
  position: relative;
  padding: 190px 0 170px;
  overflow: clip;
}
@media screen and (max-width: 768px) { .contents-sec { padding: 120px 0 110px; } }
.contents-sec__lead {
  text-align: center;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 2.3;
  margin: -20px 0 90px;
}
@media screen and (max-width: 540px) { .contents-sec__lead { margin-bottom: 60px; } }
.contents-sec__sub {
  font-size: 15px; font-weight: 700; letter-spacing: .14em;
  margin-bottom: 30px;
  padding-left: 14px; position: relative;
}
.contents-sec__sub::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 4px; height: 1em; background: var(--c-media);
}
.contents-sec__sub--center {
  max-width: var(--w-sub); width: 90%;
  margin: 90px auto 30px;
}
@media screen and (max-width: 540px) { .contents-sec__sub--center { margin-top: 60px; } }

/* 人気動画グリッド */
.video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media screen and (max-width: 1024px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 540px)  { .video-grid { grid-template-columns: 1fr; gap: 28px; } }
.video-card { display: block; }
.video-card__thumb {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #eee;
}
.video-card__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.video-card:hover .video-card__thumb img { transform: scale(1.04); }
.video-card__play {
  position: absolute; inset: 0; margin: auto;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  transition: background .3s ease;
}
.video-card__play::after {
  content: ""; position: absolute; top: 50%; left: 53%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}
.video-card:hover .video-card__play { background: rgba(200, 60, 60, .9); }
.video-card__views {
  font-family: var(--f-serif);
  font-size: 17px; font-weight: 600; letter-spacing: .04em;
  margin: 14px 0 6px;
}
.video-card__title {
  font-size: 12px; line-height: 1.8; color: #6b675f;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 教材・特典マーキー */
.marquee { overflow: hidden; padding: 12px 0; }
.marquee__track {
  display: flex; align-items: center; gap: 22px;
  width: max-content;
  animation: marqueeL 52s linear infinite;
}
.marquee--rev .marquee__track { animation-name: marqueeR; }
.marquee img {
  height: 210px; width: auto;
  border: 1px solid var(--c-hairline);
  flex: none;
}
@media screen and (max-width: 540px) { .marquee img { height: 150px; } .marquee__track { gap: 14px; } }
@keyframes marqueeL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
}
.contents-sec__note {
  max-width: var(--w-sub); width: 90%;
  margin: 44px auto 0;
  font-size: 11px; line-height: 1.9; color: #8d8981;
  text-align: center;
}

/* =========================================================
   トップ：数字（背景写真の上）
   ========================================================= */
.numbers { padding: 190px 0 200px; }
@media screen and (max-width: 540px) { .numbers { padding: 120px 0 130px; } }
.numbers__head {
  text-align: center; color: var(--c-white); margin-bottom: 96px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.numbers__head span {
  display: block; font-size: 11px; letter-spacing: .5em; text-indent: .5em; margin-bottom: 22px; opacity: .8;
}
.numbers__head h2 { font-family: var(--f-serif); font-size: clamp(22px, 3vw, 36px); font-weight: 600; letter-spacing: .12em; }
.numbers__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 60px;
}
@media screen and (max-width: 768px) { .numbers__list { grid-template-columns: 1fr; gap: 0; } }
.numbers__item {
  display: flex; align-items: baseline; gap: 20px;
  color: var(--c-white);
  padding: 26px 4px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.numbers__label { font-size: 12px; font-weight: 400; letter-spacing: .12em; width: 9.5em; flex: none; opacity: .85; }
.numbers__value { font-family: var(--f-serif); font-size: clamp(24px, 3.2vw, 38px); font-weight: 600; line-height: 1.2; letter-spacing: .04em; }
.numbers__value small { font-family: var(--f-base); font-size: .45em; font-weight: 400; margin-left: 6px; letter-spacing: .1em; }
.numbers__sub {
  display: block;
  font-family: var(--f-base);
  font-size: 11px; font-weight: 400;
  letter-spacing: .04em; line-height: 1.9;
  margin-top: 8px;
  opacity: .75;
}
.numbers__note {
  color: rgba(255, 255, 255, .85);
  font-size: 12px; line-height: 1.9; margin-top: 34px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
@media screen and (max-width: 540px) {
  .numbers__item { display: block; padding: 18px 2px; }
  .numbers__label { width: auto; display: block; font-size: 12px; margin-bottom: 4px; }
}

/* =========================================================
   トップ：CTA
   ========================================================= */
.cta { background: var(--c-white); padding: 170px 0; text-align: center; }
.cta__avatar {
  display: block;
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 36px;
  border: 1px solid var(--c-hairline);
}
@media screen and (max-width: 540px) { .cta__avatar { width: 78px; height: 78px; margin-bottom: 26px; } }
@media screen and (max-width: 540px) { .cta { padding: 110px 0; } }
.cta h2 { font-family: var(--f-serif); font-size: clamp(22px, 2.8vw, 36px); font-weight: 600; letter-spacing: .12em; line-height: 1.7; margin-bottom: 30px; }
.cta p { font-size: clamp(13px, 1.1vw, 15px); line-height: 2.3; margin-bottom: 56px; }
.cta .btn { margin-inline: auto; }

/* =========================================================
   フッター
   ========================================================= */
.footer { background: var(--c-footer); color: var(--c-white); position: relative; z-index: 1; }
.footer__main {
  display: flex; justify-content: space-between; gap: 50px;
  padding: 70px 0 50px;
  border-bottom: 1px solid #777777;
}
@media screen and (max-width: 768px) { .footer__main { flex-direction: column; gap: 36px; padding: 50px 0 36px; } }
.footer .logo-mark__en, .footer .logo-mark__jp { color: var(--c-white); }
.footer__brand p { font-size: 13px; line-height: 2; margin-top: 18px; color: #cfcfcf; }
.footer__nav { display: flex; gap: 70px; }
@media screen and (max-width: 540px) { .footer__nav { gap: 40px; } }
.footer__nav h3 { font-size: 12px; letter-spacing: .2em; color: #9a9a9a; margin-bottom: 16px; font-weight: 500; }
.footer__nav li { margin-bottom: 12px; }
.footer__nav a { font-size: 14px; }
.footer__nav a:hover { text-decoration: underline; }
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 0;
}
@media screen and (max-width: 540px) { .footer__bottom { display: block; text-align: center; padding: 22px 0; } }
.footer__bottom a, .footer__bottom p { font-size: 13px; color: var(--c-white); }
.footer__bottom a:hover { text-decoration: underline; }
@media screen and (max-width: 540px) { .footer__bottom p { margin-top: 8px; } }

/* =========================================================
   下層ページ
   ========================================================= */
.page-head {
  padding: 260px 0 170px;
  position: relative;
  /* 背景画像は各HTMLのインラインstyleで上書きする（HTML基準でパスを解決させるため） */
  background-color: #6f7f68;
  background-image:
    linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.42)),
    linear-gradient(140deg, #6f7f68, #b9a98d);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) { .page-head { padding: 170px 0 90px; } }
@media screen and (max-width: 540px) { .page-head { padding: 140px 0 66px; } }
.page-head h1 {
  text-align: center; color: var(--c-white); line-height: 1;
  font-size: clamp(30px, 5.4vw, 56px); font-weight: 500; letter-spacing: .3em; text-indent: .3em;
}
.page-head h1 span {
  display: block; font-size: clamp(12px, 1.3vw, 16px);
  letter-spacing: .3em; text-indent: .3em; margin-top: 26px; font-weight: 400; opacity: .9;
}

.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  background: var(--c-white); color: var(--c-text);
  font-size: 12px;
  padding: 6px 0 8px 44px;
  border-top: .5px solid var(--c-line);
  box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
  position: relative; z-index: 2;
}
@media screen and (max-width: 768px) { .breadcrumb { padding-left: 18px; box-shadow: 0 1px 6px rgba(0,0,0,.16); } }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--c-line); }

.lower-sec { padding: 150px 0; }
@media screen and (max-width: 1024px) { .lower-sec { padding: 110px 0; } }
@media screen and (max-width: 540px) { .lower-sec { padding: 80px 0; } }

.sec-label { margin-bottom: 70px; }
.sec-label__en {
  display: block;
  font-size: clamp(26px, 3.4vw, 44px); font-weight: 500; line-height: 1;
  letter-spacing: .24em;
  color: var(--c-black);
}
.sec-label__jp { display: block; font-size: 13px; font-weight: 500; letter-spacing: .16em; margin-top: 16px; color: #7d7970; }
.sec-label--center { text-align: center; }
.sec-label--center .sec-label__en { letter-spacing: .24em; text-indent: .24em; }

/* ビジョン／ミッション */
.vision {
  background: linear-gradient(160deg, #f4f7f1 0%, #fbf6ec 100%);
}
.vision + .vision { background: linear-gradient(160deg, #fbf6ec 0%, #f6f0f0 100%); }
.vision__title {
  font-family: var(--f-serif);
  font-size: clamp(19px, 2.2vw, 28px); font-weight: 600; line-height: 1.9;
  letter-spacing: .1em;
  margin-bottom: 36px; position: relative;
}
@media screen and (min-width: 1025px) {
  .vision__title::before {
    content: ""; position: absolute;
    width: 100px; height: 1px; background: var(--c-text);
    top: .8em; left: -120px;
  }
}
.vision__text { font-size: clamp(13px, 1.1vw, 15px); line-height: 2.4; }

/* 会社概要表 */
.company-table { border-top: 1px solid var(--c-hairline); }
.company-table__row {
  display: flex; gap: 24px;
  padding: 28px 0 28px 30px;
  border-bottom: 1px solid var(--c-hairline);
  line-height: 1.9;
}
.company-table__row dt { width: 200px; flex: none; font-weight: 500; font-size: 14px; letter-spacing: .08em; }
.company-table__row dd { font-size: 14px; }
.company-table__row dd .todo { color: #b45309; font-size: 13px; margin-left: 4px; }
@media screen and (max-width: 540px) {
  .company-table__row { padding: 16px 0 16px 8px; gap: 12px; }
  .company-table__row dt { width: 105px; font-size: 13px; }
  .company-table__row dd { font-size: 13px; }
}

/* プロフィール */
.profile { display: flex; gap: 60px; align-items: flex-start; }
@media screen and (max-width: 1024px) { .profile { flex-direction: column; gap: 34px; } }
.profile__figure { width: 380px; flex: none; }
@media screen and (max-width: 1024px) { .profile__figure { width: 100%; } }
.profile__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 3px 16px rgba(0,0,0,.16); }
.profile__name { font-size: 14px; font-weight: 400; margin-bottom: 8px; color: #7d7970; }
.profile__name strong { font-family: var(--f-serif); font-size: 30px; font-weight: 600; letter-spacing: .1em; margin-right: 12px; color: var(--c-text); }
.profile__role { font-size: 14px; color: #666; margin-bottom: 26px; }
.profile__text { font-size: 16px; line-height: 2.1; margin-bottom: 30px; }
.profile__list { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.profile__list li {
  font-size: 13px; padding: 6px 13px;
  border: 1px solid var(--c-line); border-radius: 100px;
}

/* 事業詳細 */
.service-detail { border-top: 1px solid #3a3a3a; padding-top: 56px; margin-bottom: 150px; }
.service-detail:last-of-type { margin-bottom: 0; }
.service-detail__no { font-size: 11px; font-weight: 500; letter-spacing: .4em; color: #8d8981; margin-bottom: 22px; }
.service-detail__name { font-family: var(--f-serif); font-size: clamp(24px, 2.8vw, 38px); font-weight: 600; letter-spacing: .06em; line-height: 1.5; margin-bottom: 16px; }
.service-detail__sub { font-size: clamp(14px, 1.3vw, 17px); font-weight: 500; letter-spacing: .04em; margin-bottom: 40px; }
.service-detail__body { display: flex; gap: 56px; align-items: flex-start; }
@media screen and (max-width: 1024px) { .service-detail__body { flex-direction: column; gap: 30px; } }
.service-detail__figure { width: 46%; flex: none; }
@media screen and (max-width: 1024px) { .service-detail__figure { width: 100%; } }
.service-detail__figure img { aspect-ratio: 16/10; object-fit: cover; width: 100%; box-shadow: 0 3px 16px rgba(0,0,0,.16); }
.service-detail__figure--book {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 26px;
  background: linear-gradient(150deg, #f5f2ea 0%, #edf1e9 100%);
  box-shadow: 0 3px 16px rgba(0, 0, 0, .16);
}
.service-detail__figure--book img {
  width: auto; height: 100%;
  aspect-ratio: auto; object-fit: contain;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
.service-detail__text { font-size: 16px; line-height: 2.1; margin-bottom: 26px; }
.service-detail dl.spec { border-top: 1px solid var(--c-hairline); }
.service-detail dl.spec > div {
  display: flex; gap: 18px; padding: 18px 4px; border-bottom: 1px solid var(--c-hairline);
}
.service-detail dl.spec dt { width: 7.5em; flex: none; font-weight: 500; font-size: 13px; letter-spacing: .06em; }
.service-detail dl.spec dd { font-size: 13px; line-height: 2; }

/* 流れ */
.flow { counter-reset: flow; display: grid; gap: 22px; }
.flow__item {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-hairline);
  padding: 34px 36px 34px 110px;
}
.flow__item::before {
  counter-increment: flow;
  content: "0" counter(flow);
  position: absolute; left: 34px; top: 32px;
  font-family: var(--f-serif);
  font-size: 26px; font-weight: 500; color: var(--c-service);
  line-height: 1;
}
.flow__item h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.flow__item p { font-size: 15px; line-height: 1.9; }
@media screen and (max-width: 540px) {
  .flow__item { padding: 22px 18px 22px 66px; }
  .flow__item::before { left: 18px; font-size: 21px; }
  .flow__item h3 { font-size: 16px; }
  .flow__item p { font-size: 13px; }
}

/* FAQ */
.faq__item { border-bottom: 1px solid var(--c-hairline); }
.faq__q {
  width: 100%; text-align: left;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 24px 44px 24px 4px;
  font-size: 17px; font-weight: 700; line-height: 1.6;
  position: relative;
}
.faq__q::before { content: "Q"; color: var(--c-service); font-size: 20px; line-height: 1.4; }
.faq__q::after {
  content: ""; position: absolute; right: 12px; top: 32px;
  width: 12px; height: 12px;
  border-right: 2px solid var(--c-text); border-bottom: 2px solid var(--c-text);
  transform: rotate(45deg); transition: transform .3s ease;
}
.faq__item.is-open .faq__q::after { transform: rotate(-135deg); }
.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  font-size: 15px; line-height: 2; padding: 0 44px 26px 40px;
}
@media screen and (max-width: 540px) {
  .faq__q { font-size: 15px; padding: 20px 36px 20px 2px; }
  .faq__a p { font-size: 13px; padding: 0 30px 22px 36px; }
}

/* お問い合わせ */
.contact-lead { text-align: center; font-size: clamp(14px, 1.2vw, 17px); line-height: 2.1; margin-bottom: 60px; }
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 80px; }
@media screen and (max-width: 768px) { .contact-cards { grid-template-columns: 1fr; } }
.contact-card { border: 1px solid var(--c-hairline); padding: 38px 32px; background: var(--c-white); }
.contact-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 12px; padding-left: 14px; position: relative; }
.contact-card h3::before {
  content: ""; position: absolute; left: 0; top: .35em; width: 4px; height: 1em; background: var(--c-service);
}
.contact-card p { font-size: 14px; line-height: 1.9; }

.form { background: var(--c-bg-soft); padding: 54px; }
@media screen and (max-width: 768px) { .form { padding: 32px 20px; } }
.form__row { display: flex; gap: 26px; padding: 22px 0; border-bottom: 1px solid #e2ded5; }
@media screen and (max-width: 768px) { .form__row { flex-direction: column; gap: 10px; padding: 16px 0; } }
.form__label { width: 220px; flex: none; font-size: 15px; font-weight: 700; padding-top: 10px; }
.form__label .req, .form__label .opt {
  display: inline-block; font-size: 11px; font-weight: 500;
  padding: 2px 8px; margin-left: 8px; border-radius: 2px; vertical-align: 2px;
}
.form__label .req { background: #c0392b; color: #fff; }
.form__label .opt { background: #dcdcdc; color: #555; }
.form__field { flex: 1; }
.form__field input[type="text"],
.form__field input[type="email"],
.form__field input[type="tel"],
.form__field select,
.form__field textarea {
  width: 100%; font: inherit; font-size: 15px;
  padding: 12px 14px;
  border: 1px solid #c9c4b8; background: var(--c-white); border-radius: 2px;
}
.form__field textarea { min-height: 180px; resize: vertical; }
.form__field .note { font-size: 12px; color: #777; margin-top: 8px; line-height: 1.7; }
.form__privacy { text-align: center; font-size: 13px; line-height: 1.9; margin: 30px 0 26px; }
.form__submit { display: flex; justify-content: center; }
.form__submit .btn { width: 300px; }
.form__notice {
  margin-top: 26px; font-size: 12px; line-height: 1.9; color: #8a6d3b;
  background: #fdf6e3; border: 1px solid #eadfc0; padding: 14px 18px;
}