/* ==========================================================================
   common.css
   --------------------------------------------------------------------------
   方針：
   - 既存テーマを壊さないため「強いリセット」はしない（必要最低限）
   - モバイルファースト：基本＝スマホ、min-widthで拡張

   よく使う：
   - layout-container / layout-section / layout-stack / layout-grid
   - text-eyebrow / text-title / text-lead
   - card / button
   - hero（ページ先頭見出し）
   ========================================================================== */


/* ==========================================================================
   0) TOKENS（値の集中管理）
   ========================================================================== */
:root{
  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", Arial, sans-serif;

  --font-serif: "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;

  /* 追加フォント */
  --font-display: var(--font-sans);
  --font-accent: var(--font-serif);

  /* 共通：見出しサイズ */
  --h2-fs: clamp(1.375rem, 1.15rem + 1.2vw, 2rem);    /* 22〜32 */
  --h2-lh: 1.2;

  --h3-fs: clamp(1.125rem, 1.02rem + 0.7vw, 1.5rem);  /* 18〜24 */
  --h3-lh: 1.3;

  /* FontSize */
  --fs-0: clamp(0.875rem, 0.86rem + 0.15vw, 0.95rem);   /* 14-15 */
  --fs-1: clamp(1rem, 0.98rem + 0.25vw, 1.125rem);      /* 16-18 */
  --fs-2: clamp(1.125rem, 1.05rem + 0.45vw, 1.375rem);  /* 18-22 */
  --fs-3: clamp(1.375rem, 1.18rem + 0.9vw, 1.95rem);    /* 22-31 */
  --lh-tight: 1.2;
  --lh-base: 1.65;

  /* Spacing */
  --sp-1: 0.25rem; /* 4 */
  --sp-2: 0.5rem;  /* 8 */
  --sp-3: 0.75rem; /* 12 */
  --sp-4: 1rem;    /* 16 */
  --sp-5: 1.5rem;  /* 24 */
  --sp-6: 2rem;    /* 32 */
  --sp-7: 3rem;    /* 48 */
  --sp-8: 4rem;    /* 64 */
  --sp-9: 5rem;    /* 80 */
  --sp-10: 6rem;   /* 96 */
  --sp-11: 7rem;   /* 112 */
  --sp-12: 8rem;   /* 128 */


  /* Layout */
  --container-max: 72rem; /* 1152px */
  --gutter: clamp(1rem, 2.5vw, 2rem);

  /* Radius / Shadow */
  --r-1: 0.5rem;
  --r-2: 0.75rem;
  --r-3: 1rem;
  --shadow-1: 0 1px 2px rgba(2,6,23,0.08);
  --shadow-2: 0 12px 34px rgba(2,6,23,0.14);

  /* Colors（コーポレート向けライト） */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --text: #0f172a;
  --text-muted: rgba(15,23,42,0.7);
  --border: rgba(15,23,42,0.12);

  --primary: #0ea5e9;
  --primary-ink: #062a25;

  --focus-ring: 0 0 0 3px rgba(14,165,233,0.25);
}

/* 上の余白（margin-top） */
.u-mt-4{ margin-top: var(--sp-4); } /* 16 */
.u-mt-5{ margin-top: var(--sp-5); } /* 24 */
.u-mt-6{ margin-top: var(--sp-6); } /* 32 */
.u-mt-7{ margin-top: var(--sp-7); } /* 48 */
.u-mt-8{ margin-top: var(--sp-8); } /* 64 */

/* 下の余白（margin-bottom） */
.u-mb-4{ margin-bottom: var(--sp-4); }
.u-mb-5{ margin-bottom: var(--sp-5); }
.u-mb-6{ margin-bottom: var(--sp-6); }
.u-mb-7{ margin-bottom: var(--sp-7); }
.u-mb-8{ margin-bottom: var(--sp-8); }

.is-sans{ 
  font-family: var(--font-sans); 
}
.is-serif{ 
  font-family: var(--font-serif);
}
.is-display{ 
  font-family: var(--font-display); 
}
.is-accent{ 
  font-family: var(--font-accent); 
}

.heading-2{ font-size: var(--h2-fs); line-height: var(--h2-lh); }
.heading-3{ font-size: var(--h3-fs); line-height: var(--h3-lh); }

/* 改行制御（SP/TB/PC）
   - SP: <48rem
   - TB: 48rem〜
   - PC: 64rem〜
*/
.u-br-sp,
.u-br-tb,
.u-br-pc{ display: none; }

.u-br-sp{ display: inline; }

/* TB〜 */
@media (min-width: 48rem){ 
  .u-br-sp{ display: none; }
  .u-br-tb{ display: inline; }
}

/* PC〜 */
@media (min-width: 64rem){
  .u-br-tb{ display: none; }
  .u-br-pc{ display: inline; }
}


/* ==========================================================================
   1) Minimum Reset（必要最低限）
   - “全要素のmargin:0”のような強いリセットは避ける
   - 画像のはみ出し等、事故りやすい箇所のみ
   ========================================================================== */
img, svg, video, canvas{
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea{
  font: inherit;
  color: inherit;
}

/* 「」などの余白を無効化する */
html{
  text-spacing-trim: trim-start;
}

/* ==========================================================================
   2) Layout Blocks
   ========================================================================== */

/* 共通：コンテンツ枠（中央寄せ + 左右余白）
   - ※ layout-container は廃止して、content-wrapper に統一する */
.content-wrapper{
  width: 100%;
  margin-inline: auto;

  /* 既存トークンに統一 */
  padding-inline: var(--gutter);

  /* ノート基準 */
  max-width: var(--container-max);
}

/* 大画面で少し広げる（余白が無駄に見えないように） */
@media (min-width: 90rem){ /* 1440px */
  .content-wrapper{ max-width: 80rem; } /* 1280px */
}
@media (min-width: 100rem){ /* 1600px */
  .content-wrapper{ max-width: 90rem; } /* 1440px */
}
@media (min-width: 120rem){ /* 1920px */
  .content-wrapper{ max-width: 100rem; } /* 1600px */
}

/* セクション余白（モバイル基準） */
.layout-section{
  padding-block: var(--sp-7);
}
@media (min-width: 64rem){
  .layout-section{
    padding-block: var(--sp-8);
  }
}
.layout-section--tight{
  padding-block: var(--sp-6);
}

/* 縦積み（gap管理） */
.layout-stack{
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.layout-stack--sm{
  gap: var(--sp-3);
}

/* グリッド（カード一覧など） */
.layout-grid{
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* 2カラム（必要なときだけ） */
.layout-split{
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem){
  .layout-split{
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
  }
}

/* ==========================================================================
   3) Typography Blocks
   ========================================================================== */
.text-eyebrow{
  font-size: var(--fs-0);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.text-title{
  font-family: var(--font-sans);
  font-size: var(--fs-3);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--text);
}

.text-lead{
  font-size: var(--fs-2);
  color: var(--text-muted);
}


/* ==========================================================================
   4) UI Blocks
   ========================================================================== */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
  padding: var(--sp-6);
}
.card--soft{
  background: var(--surface-2);
}

.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: 0.75rem 1.1rem;
  border-radius: var(--r-2);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);

  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  transition: transform 120ms ease, filter 120ms ease, background 120ms ease, border-color 120ms ease;
}
.button:hover{ filter: brightness(1.03); }
.button:active{ transform: translateY(1px); }
.button:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

.button--primary{
  background: var(--primary);
  border-color: rgba(14,165,233,0.45);
  color: var(--primary-ink);
}
.button--outline{
  border-color: rgba(14,165,233,0.45);
  color: var(--primary);
}
.button--ghost{
  border-color: transparent;
  background: var(--surface-2);
}

.button--sm{
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-1);
  font-size: var(--fs-0);
}
.button--lg{
  padding: 0.95rem 1.25rem;
  border-radius: var(--r-3);
}


/* ==========================================================================
   5) Motion（控えめ・任意）
   - 付けた要素だけ効く
   ========================================================================== */
.motion-reveal{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease-out, transform 320ms ease-out;
}
.motion-reveal.is-visible{
  opacity: 1;
  transform: none;
}
.motion-reveal--left{
  transform: translateX(-8px);
}

@media (prefers-reduced-motion: reduce){
  .motion-reveal{
    transition: none;
    opacity: 1;
    transform: none;
  }
  .button{
    transition: none;
  }
}


/* ==========================================================================
    6) Hero（ページ先頭見出し）
   ========================================================================== */

.hero{
  width: 100%;
}

.hero--02{
  max-width: 1860px;
  margin-inline: auto 0; /* 右寄せの意図を明示 */
}

/* “背景英字”と“タイトル”の器 */
.hero__box{
  position: relative;
  max-width: 1760px;
  margin: 0 0 20px auto; /* 下20px + 右寄せ（意図を1行で） */
  min-height: 70px;      /* SP基準 */
}

/* 背景英字（装飾） */
.hero__en{
  margin: 0;
  font-family: "Jost", var(--font-sans);
  font-weight: 200;
  color: #DBDBDB;
  opacity: 0.27;

  /* SP基準 */
  font-size: 70px;
  line-height: 1;
  padding-left: 1rem;

  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

/* 日本語H1（SP基準） */
.hero__title{
  margin: 0;
  position: absolute;
  top: 25px;
  left: 35px;
  z-index: 10;

  font-size: 26px;
  line-height: 1.4;
  font-weight: 500;
  color: #0E1A3C;
}

/* 共通：固定ヘッダーと見出しの被りを避ける */
.hero.hero--02{
  padding-top: 88px;
}

@media (min-width: 64rem){
  .hero.hero--02{
    padding-top: 110px;
  }
}

/* 992px以上（= 旧 max-width: 991px の反対） */
@media (min-width: 992px){
  .hero{
    margin-bottom: 120px;
  }

  .hero__box{
    min-height: 160px;
  }

  .hero__en{
    position: static;   /* PCでは通常フローに戻す（元の見た目と同等） */
    padding-left: 0;
    font-size: 160px;
  }

  .hero__title{
    top: 50%;
    left: 80px;
    transform: translateY(-50%);
    font-size: 48px;
    line-height: 1.1;
  }
}

/* 1600px未満（= 旧 max-width: 1600px と同等の調整） */
@media (max-width: 1600px){
  .hero__title{
    left: 32px;
  }
}

/* variantの箱幅だけ合わせる */
.hero--02 .hero__box{
  max-width: 1860px;
}

/* ==========================================================================
   7) Section Intro（見出し＋本文＋画像の汎用セクション）
   ========================================================================== */
.section-intro{
  padding-block: var(--sp-7);
}
@media (min-width: 64rem){
  .section-intro{
    padding-block: var(--sp-8);
  }
}

.section-intro__grid{
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

@media (min-width: 48rem){
  .section-intro__grid{
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: var(--sp-7);
  }
}

.section-intro__title{
  font-size: var(--fs-3);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

.section-intro__catch{
  margin: 0;
  font-size: var(--fs-2);
  line-height: var(--lh-tight);
  color: var(--text-muted);
}

.section-intro__text{
  color: var(--text-muted);
}

.section-intro__media{
  margin: 0;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
}
.section-intro__media img{
  width: 100%;
  height: auto;
}

/* 中央配置（幅は制限しない：配置だけ） */
.u-center{
  margin-inline: auto;
  text-align: center;
}

/* 文章幅制限（読みやすさ）：数値で統一 */
.u-measure-42{ max-width: 42rem; } /* 約672px */
.u-measure-50{ max-width: 50rem; } /* 約800px */
.u-measure-60{ max-width: 60rem; } /* 約960px */