@charset "UTF-8";
html, body{ margin:0; padding:0;font-family: var(--ff-base); }
body, h1, h2, p {
  font-family: "Gothic A1", "Noto Sans JP", sans-serif;
}
:root{
  --ff-jp: "Hiragino Sans","Hiragino Kaku Gothic ProN",
           "Yu Gothic Medium","Yu Gothic","Meiryo",
           system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --ff-en: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
}

html, body { font-family: var(--ff-jp); }

/* 英文だけ切替（.en を付ける or lang="en" を付与） */
.en, :lang(en) {
  font-family: var(--ff-en);
  font-weight: 600;              /* 視認性を上げる */
  letter-spacing: .01em;         /* ほんの少しだけ字間 */
  font-synthesis-weight: none;   /* “偽ボールド”防止（対応ブラウザ） */
}

:root{
  /* viewportに応じて滑らかに可変 */
  --fz-body: clamp(15px, 1.15vw, 16px);
  --fz-h2:   clamp(28px, 4.6vw, 60px);
  --fz-h1: clamp(27px, 4.2vw, 51px); 
}
h1{ font-size: var(--fz-h1); line-height: 1.25; }
h2{ font-size: var(--fz-h2); line-height: 1.3; }
body{ font-size: var(--fz-body); line-height: 1.7; }

/* PC */
:root{
  --container: 1200px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:80px; --s10:96px;
}

/* タブレット以下 */
@media (max-width: 1024px){
  :root{
    --container: 960px;
    --s7:44px; --s8:56px; --s9:72px; --s10:88px; /* セクション間だけ少し縮む */
  }
}
/* sp */
@media (max-width: 768px){
  :root{
    --container: 100%;
    --s6:28px; --s7:36px; --s8:48px; --s9:64px; --s10:72px;
  }
}
/* 共通コンテナ：幅は100% + 最大幅、ガターはpaddingで作る */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;  /* ← 両端ガターはここで作る */
  box-sizing: border-box; /* 念のため */
}

/* セクションの上下マージンをトークンで統一 */
.section{ padding-block: var(--s8); }
@media (max-width:768px){ .section{ padding-block: var(--s7); } }

/* card */
.cards{ display:grid; gap: var(--s6); grid-template-columns: repeat(3,1fr); }
@media (max-width:1024px){ .cards{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:768px){ .cards{ grid-template-columns: 1fr; gap: var(--s5); } }

/* hero：左右2カラム→縦並び */
.hero__inner{ display:grid; gap: var(--s7); grid-template-columns: 1.1fr .9fr; }
@media (max-width:1024px){ .hero__inner{ grid-template-columns: 1fr; } }

/* サムネイルは比率固定 */
.thumb{ aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px;
}
/*btn*/
.btn{ padding: 14px 18px; border-radius: 999px; font-weight:700; }
@media (max-width:768px){
  .btn{ padding: 12px 16px; }
}

/*動画埋込*/
.ir-hero {
  padding-bottom: 3rem;  
  margin-bottom: 3rem; 
}

.ir-hero__movie-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
  /* 余白はここに付けない */
}

.ir-hero__video {
  display: block;
  width: 100%;
  height: 100%;      /* 枠いっぱいにフィット */
  object-fit: contain; /* 余白優先なら contain / トリミングしてでも一杯は cover */
}

@media (max-width: 480px) {
  .ir-hero {
    padding-block-end: 1rem; /* 下余白16px */
    margin-top: 30px;
	margin-bottom: 1rem;
  }
}

@media (min-width: 481px) and (max-width: 959px) {
  .ir-hero {
    padding-block-end: 1.5rem; /* 下余白24px */
    margin-top: 0;             /* 必要なければリセット */
  }
}

@media (min-width: 960px) {
  .ir-hero {
    padding-block-end: 3rem; /* 下余白48px */
    margin-top: 0;           /* PCでは上余白なし */
  }
}