@charset "utf-8";
/* ヘッダとしているが、全体のレイアウト調整用という方がより正確で正しい */
/* MEMO: header作り直し */

#header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 2000;
  /* background: linear-gradient(#999999,rgba(0,0,0,0)); */
}

/* PC時のオーバーレイ表示を明示的に維持 */
@media screen and (min-width: 791px) {
  /* Hero の UI 色。既定は白で、これが現在の見た目。
     写真ごとにテキストトーンを指定する仕組みは未実装で、切替の受け口だけ用意してある。
     body に top-hero-ui--grey が付けば色もロゴ/SNS もグレー版に入れ替わるので、
     将来は指定値からこのクラスを出すだけでよい。
     グレー値は同居する SNS アイコン SVG の fill(#666666) に合わせている。 */
  body.top-hero--overlay {
    --top-hero-ui-color: #ffffff;
    /* 白は「これ以上濃く」できないため、hover は薄くする方向で示す。
       グレー版（下）は逆に #2b2a29 へ濃くなる＝強調方向。 */
    --top-hero-ui-color-hover: rgb(255 255 255 / 70%);
  }

  body.top-hero--overlay.top-hero-ui--grey,
  body.top-hero--overlay.top-hero-media-failed {
    --top-hero-ui-color: #666666;
    --top-hero-ui-color-hover: #2b2a29;
  }

  /* 写真に載るヘッダーのフォーカスの輪も UI と同じ色にする（既定のインク色は暗い写真の上で見えない）。
     グレー版では --top-hero-ui-color ごとグレーになる。ドロワーを開くと地の面が敷かれるので、インク色に戻す。 */
  body.top-hero--overlay #header-wrapper {
    --focus-ring-color: var(--top-hero-ui-color);
  }

  body.top-hero--overlay.body-no-scroll #header-wrapper {
    --focus-ring-color: var(--color-heading);
  }

  /* ヘッダーを画像より先に出さない。最初の画像が読めた時点で、
     プリローダーのfade-outと同時に白UIをfade-inする。 */
  body.top-hero--overlay #header-wrapper {
    visibility: hidden;
    opacity: 0;
    /* opacity/visibility は「初回画像を待つ表示」用なので --dur-slow のまま。
       background-color はドロワー開閉に連動するので --drawer-dur を使う。 */
    transition:
      opacity var(--dur-slow) ease-in-out,
      visibility 0s linear var(--dur-slow),
      background-color var(--drawer-dur) ease;
  }

  body.top-hero--overlay.top-hero-media-ready #header-wrapper,
  body.top-hero--overlay.top-hero-media-failed #header-wrapper {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  #header-wrapper {
    position: absolute !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #header {
    color: #FFFFFF !important;
  }

  body.top-hero--overlay #header {
    color: var(--top-hero-ui-color) !important;
    transition: color var(--drawer-dur) ease;
  }

  /* inherit にすると style.css の #menu-topnavi{color:#648344} を拾うので明示する。 */
  body.top-hero--overlay #menu-topnavi li a {
    color: var(--top-hero-ui-color);
    transition: color var(--dur-slow) ease-in-out;
  }

  /* 触れたときは速く反応させる（2026-10-20 指摘「マウスオーバーの色の差があまり無い」）。上の --dur-slow の ease-in-out は
     スライドの切り替えでの白とグレーの入れ替え用で、触れても 0.1 秒の時点ではほぼ色が変わらず、差が無いように見えていた。
     遷移は行き先の状態の指定で走るので、触れたときだけ速く、離れたときは元の速さで戻る。 */
  body.top-hero--overlay #menu-topnavi li a:hover {
    color: var(--top-hero-ui-color-hover);
    transition-duration: var(--dur-fast);
    transition-timing-function: var(--ease);
  }

  /* ロゴとSNSは白版とグレー版を同じ座標へ重ね、opacityでクロスフェードする。 */
  body.top-hero--overlay .index-siteinfo a.index-sitetop {
    display: grid;
  }

  body.top-hero--overlay .top-hero-ui-asset--white,
  body.top-hero--overlay .top-hero-ui-asset--grey {
    grid-area: 1 / 1;
    display: block;
    /* ドロワー開閉で面と同時に入れ替わるので、面と同じ速度にする。
       写真ごとのトーン指定(.top-hero-ui--grey)でゆっくり変えたくなったら
       そのクラス側で duration を上書きする。 */
    transition: opacity var(--drawer-dur) ease;
  }

  body.top-hero--overlay .top-hero-ui-asset--white {
    opacity: 1;
  }

  body.top-hero--overlay .top-hero-ui-asset--grey {
    opacity: 0;
  }

  body.top-hero--overlay.top-hero-ui--grey .top-hero-ui-asset--grey,
  body.top-hero--overlay.top-hero-media-failed .top-hero-ui-asset--grey {
    opacity: 1;
  }

  body.top-hero--overlay.top-hero-ui--grey .top-hero-ui-asset--white,
  body.top-hero--overlay.top-hero-media-failed .top-hero-ui-asset--white {
    opacity: 0;
  }

  /* 高さは top_hero.css の比率と上限（--top-hero-ratio / --top-hero-max-height）が決める。
     ここは overlay 版面でほかの指定に勝たせるためだけの上書きなので、値を直接書かない。 */
  .top-hero {
    margin-top: 0 !important;
    height: auto !important;
  }

  /* --- PC ハンバーガー帯（980-791）の UI 色 ------------------------------
     この帯は Hero が overlay のままなので、ドロワーのトリガーも写真の上に
     白で載せる。ロゴと同じ --top-hero-ui-color を使うので、写真ごとの
     トーン指定（body.top-hero-ui--grey）にも一緒に追従する。 */
  body.top-hero--overlay #smp-menu-button span {
    background-color: var(--top-hero-ui-color);
    /* 色は面と同時に変わる。×への変形だけは即応させたいので据え置き。 */
    transition:
      transform var(--dur-fast) ease,
      opacity 0.1s ease,
      background-color var(--drawer-dur) ease;
  }

  /* --- ドロワー展開時 ---------------------------------------------------
     ヘッダーが透明のままだと、ドロワーの面(#f8f8f8)の上に写真が帯状に覗いて
     分断されて見える。開いている間だけヘッダーにも同じ面を敷き、
     ロゴとトリガーをグレー版へ入れ替える（明るい面の上に白は乗らないため）。
     JS が body へ .body-no-scroll を付けるのでそれをフックにする。 */
  body.top-hero--overlay.body-no-scroll #header-wrapper {
    background-color: var(--color-bg) !important;
  }

  body.top-hero--overlay.body-no-scroll #header {
    color: var(--color-text) !important;
  }

  body.top-hero--overlay.body-no-scroll #smp-menu-button span {
    background-color: #787878;
  }

  body.top-hero--overlay.body-no-scroll .top-hero-ui-asset--white {
    opacity: 0;
  }

  body.top-hero--overlay.body-no-scroll .top-hero-ui-asset--grey {
    opacity: 1;
  }
}

/* PC でヘッダーに触れている間だけ、地の色の帯を敷き、ロゴ・メニュー・SNS をグレーにする（2026-10-19 ユーザー判断）。
   写真の上の白い文字は、明るい写真では読みにくい。白を基本にしたまま、メニューを使うときだけ読めるようにする
   （部品ごとに自動で色を変える案は、白とグレーが混ざって見えるので却下・knowledge 2026-10-19）。
   見え方はドロワーを開いたとき（上の .body-no-scroll）と同じ。
   帯・文字の色・ロゴと SNS の入れ替えは、サイト共通のフェードの速さ --dur-slow でそろえて出す（ユーザー指定）。
   帯はフェードだけで出す（上から降ろす形は「にゅっと出てくるのが今見せたいテイストと違う」・ユーザー。
   乗せたときだけ影を敷く形も比べて、こちらにした）。
   マウスの端末だけ（タッチでは hover が残るため）。キーボードでヘッダーにフォーカスが入ったときも同じ。
   2026-10-19〜20 は Top の URL に ?header_hover=1 を付けたときだけ出して見比べ、2026-10-20 に正式採用（ユーザー判断。
   スライドごとの白とグレーの切り替え・白文字 + 影のオン・オフと比べた）。 */
@media screen and (min-width: 981px) and (hover: hover) and (pointer: fine) {
  /* 帯はバーより --header-reveal-extend だけ下へ伸ばす（ほかのページで固定したヘッダーの面と同じ。css/header_style.css）。
     バーちょうどで切ると、ロゴの y の下端が帯の縁に迫る。 */
  body.top-hero--overlay #header-wrapper::before {
    content: '';
    position: absolute;
    inset: 0 0 calc(-1 * var(--header-reveal-extend, var(--space-md)));
    z-index: -1;
    /* 写真を透かす。濃さは地の色の 70%（2026-10-20 デザイナー決定。?tune=1 の調整パネルで見比べて決めた。パネルは外した）。
       ⚠️ 写真の暗い所の上ではメニューのグレー（#666）が読みにくくなる（真っ黒の上で約 2.6:1。90% で約 4.4:1）。
       承知のうえでの判断なので、ここから下げるときはもう一度見てもらう。 */
    background-color: color-mix(in srgb, var(--color-bg) 70%, transparent);
    opacity: 0;
    transition: opacity var(--dur-slow) ease;
  }

  body.top-hero--overlay #header-wrapper:is(:hover, :focus-within)::before {
    opacity: 1;
  }

  body.top-hero--overlay #header-wrapper:is(:hover, :focus-within) {
    --top-hero-ui-color: #666666;
    --top-hero-ui-color-hover: #2b2a29;
    --focus-ring-color: var(--color-heading);
  }

  body.top-hero--overlay #header-wrapper:is(:hover, :focus-within) .top-hero-ui-asset--white {
    opacity: 0;
  }

  body.top-hero--overlay #header-wrapper:is(:hover, :focus-within) .top-hero-ui-asset--grey {
    opacity: 1;
  }

  /* 帯と同じ速さで色とロゴ・SNS を替える（メニューの色はもともと --dur-slow。ロゴ・SNS とヘッダーの文字は --drawer-dur）。
     981px 以上にはドロワーが無いので、ドロワーの開閉の速さとはぶつからない。 */
  body.top-hero--overlay #header,
  body.top-hero--overlay .top-hero-ui-asset--white,
  body.top-hero--overlay .top-hero-ui-asset--grey {
    transition-duration: var(--dur-slow);
  }
}

/* 上の指定は 791px 以上の帯にしか無く、モバイルでは透過のままドロワーが開いて
   ヘッダーの中身とドロワーの面が重なって見えていた。幅に関係なく面を敷く。
   モバイルはロゴが最初からグレー版なので、入れ替えは要らない。 */
body.body-no-scroll #header-wrapper {
  background-color: var(--color-bg);
}

#header {
  /* ロゴの高さは幅から出す（GKK_logo.svg の viewBox 300 × 66.82）。幅だけ変えればよい。 */
  --header-logo-width: 180px;
  --header-logo-height: calc(var(--header-logo-width) * 66.82 / 300);
  /* ロゴ画像の上端から G の縦中心まで（G は viewBox の y 0〜55.44）。PC のナビ・SNS・ハンバーガーはここへ中央を揃える。 */
  --header-logo-g-center: calc(var(--header-logo-height) * 27.72 / 66.82);
  --header-rail-bottom-space: 7px;
  /* ロゴを下げる量。根拠は header_style.css の同名変数。 */
  --header-logo-drop: 3px;
  display: flex;
  /* 他ページと同じく中身を 1340 端まで届かせる（レイアウトは全ページ共通。Top の特徴は色/オーバーレイ側で出す） */
  max-width: var(--container-wide-box);
  min-width: 680px;
  width: auto;
  height: var(--header-bar);
  padding-inline: var(--gutter);
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  position: relative;
  z-index: 1000;
  color: #FFFFFF;
}

#header p.index-site {
  margin: 0;
}



/* ロゴ */
/* サイズ設定が必要 */
.index-siteinfo {
  display: flex;
  align-items: center;
  flex-grow: 1;
  box-sizing: border-box;
  padding-bottom: var(--header-rail-bottom-space);
}

.index-siteinfo a.index-sitetop {
  display: block;
  width: var(--header-logo-width);
  height: auto;
}

#header .index-siteinfo a.index-sitetop {
  line-height: 0;
  /* 下げるのは相対位置で。padding を削る形だと 7px（レール）より先は 0 で頭打ちになる。 */
  position: relative;
  top: var(--header-logo-drop);
}

.index-siteinfo img {
  width: var(--header-logo-width);
  height: auto;
}

/* PC/Mobile logo responsive control */
.forTopPageMobile {
  display: none;
}

.forTopPagePC {
  display: block;
}

.header-menu {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  height: calc(var(--header-logo-height) + var(--header-rail-bottom-space));
  gap: 80px;
  padding-bottom: var(--header-rail-bottom-space);
}

/* トップメニュー枠組み */
.menu-topnavi-container {
  display: flex;
  align-items: center;
}

/* メニュー内要素 */
#menu-topnavi {
  display: flex;
  align-items: center;
  font-size: 18px;
  gap: 16px;   /* 他ページ(header_style)と同じメニュー項目間隔。Top は 8px で詰まっていた */
  margin: 0;
  padding: 0;
}

#menu-topnavi li {
  padding: 0;
}

#menu-topnavi li a {
  padding: 0 8px;
  font-weight: 400;
  /* color: #787878; */
  color: #FFFFFF;
  margin: 0;
}

/* 旧style.cssの固定高・上マージンを外す。行の箱（22px）の中心を G の中心へ揃える（下の 791px 以上）。 */
#header #menu-topnavi > li > a {
  height: auto;
  line-height: 22px;
  margin-top: 0;
}

#menu-topnavi li a:hover {
  color: #787878;
}

ul.sub-menu {
  width: 620px;
}

ul.sub-menu li {
  margin: 0;
}

.menu ul li a {
  border-width: 5px;
}

/* SNS */
.header-sns {
  display: flex;
  gap: 18px;
  /* margin: 0 0 0 auto; */
  align-items: center;
}

.header-sns a {
  display: grid;
  width: 22px;
  height: 22px;
  line-height: 0;
  place-items: center;
}

.header-sns img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin-top: 0 !important;
}

/* PC（791 以上）はナビ・SNS・ハンバーガーを下端レールではなく G の縦中心へ中央揃えにする。
   バー下端から G 中心までの距離の2倍の箱を下端に置き、中身を中央揃えにすれば中心が G に来る。
   ロゴ幅・drop・レールの値から出すので、縦が短いデスクトップ（ロゴ 160px）にもそのまま効く。
   790 以下はモバイルの配置（バー中央揃え）へ戻す。 */
@media (min-width: 791px) {
  .header-menu {
    align-items: center;
    height: calc(2 * (var(--header-logo-height) - var(--header-logo-g-center) + var(--header-rail-bottom-space) - var(--header-logo-drop)));
    padding-bottom: 0;
  }
}

#content {
  max-width: 1340px;
  min-width: 740px;
  width: auto;
  padding: 0;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#main {
  margin: 0 auto;
}

.bx-wrapper img {
  width: 1340px;
  min-width: 740px;
  max-width: 100%;
}

#content-wrapper:before {
  display: none !important;
  height: 0 !important;
  margin-top: 0 !important;
}

/* ulの幅狭くする */
/* ===========================================================================
   ナビ収容の階段（横幅の軸）— header_style.css と同一。両方を揃えて更新すること。
   段は 1280 / 1200(SNS落とし) / 980(ドロワー) / 480。値はユーザー指定。
   切替基準は「入るか」ではなく **ロゴ右端 → Topics 左端の間隔が 64px を切らないか**。
   根拠と実測値は header_style.css 側のコメントを参照。
   ========================================================================= */

@media (max-width:1280px) {
  #header {
    width: auto;
  }

  #main {
    width: 1024px;
    /* TKTmemo 余白調整に伴い */
    margin: 0 auto;
    padding: 0 0px;
  }

  #menu-topnavi {
    margin-left: 0;
    padding: 0;
  }

  .header-menu {
    gap: 60px;
  }

  #menu-topnavi li a {
    padding: 0 5px;
  }
}

/* SNS を落とす点（ユーザー指定 1200）。 */
@media (max-width:1200px) {
  #main {
    width: 100%;
  }

  .bx-wrapper img {
    width: 100%;
  }

  /* SNS は 1040px を割ると nav と同居できない（実測） */
  .header-sns {
    display: none;
  }

  .header-menu {
    gap: 0px;
  }

  #menu-topnavi {
    gap: 10px;
  }
}

/* 基本的にスマホメニューは非表示 */
.smp-menu {
  display: none;
}

.smp-menu-button {
  display: none;
}

.smp-menu-content {
  display: none;
}

/* css for smp, add hamburger menu and remove other items on header */

/* ul.sub-menu {
  display: none;
} */

/* ドロワーへの転換点（ユーザー指定 980）。正準点 768 ではない（ナビ収容の軸）。
   根拠は header_style.css 側のコメントを参照。 */
@media screen and (max-width:980px) {
  /* ⚠️ ロゴの版（白/グレー）・寸法・ハンバーガーの寸法は**ここで下げない**。
     980〜790 は Hero が overlay のままなので、写真の上に載る PC のセット
     （白ロゴ・大きめ）を保つ必要がある。モバイル版へ落とすのは 790 以下。 */

  /* スマホ時はヘッダーを通常フローに配置 */
  #header-wrapper {
    position: relative;
    z-index: 3000;
    width: 100%;
  }






  #header {
    width: 100%;
    min-width: 0;
    /* gutter は #header-wrapper 側だけで持つ。両方に入れると
       980-791px 帯だけロゴとトリガーが二重に inset する。 */
    padding-inline: 0;
  }

  #main {
    width: 100%;
    margin: 0 auto;
    flex-direction: column;
  }

  #menu-topnavi {
    margin-left: 0;
  }

  #menu-topnavi li a {
    padding-right: 20px;
  }

  .bx-wrapper img {
    width: 100%;
  }

  .header-sns {
    display: none;
  }

  .sub-menu {
    display: none;
  }

  #content {
    padding: 0 15px;
    max-width: 790px;
    min-width: 320px;
    margin: 15px auto 0;
  }

  .menu-topnavi-container {
    display: none !important;
  }

  #header-wrapper {
    /* ドロワーの位置決め基準（`#smp-menu-content` の top / height が参照）。
       **その帯のヘッダーバーの実高**を入れる。980-791 は PC の --header-bar、790 以下は --header-bar-compact。
       名前は経緯的に mobile だが実体は「ヘッダーバー高」。header_style.css と同値。 */
    --mobile-header-height: var(--header-bar);
    /* 生値 20px だとコンテンツ側(--gutter 基準)と 500-790px の帯で最大 11.6px ズレる。
       両ファイルを揃えて更新すること。 */
    padding-block: 0;
    padding-inline: var(--gutter);
    width: auto;
  }

  /* ⚠️ ロゴ・メニューの**配置**（バー高・align-items・padding・文字色）はここで下げない。
     980-791 は Hero が overlay のままなので、PC の配置（--header-bar・下端レール揃え）を保つ。
     モバイル配置へ落とすのは 790 以下。 */


  /* PC 帯（980-791）は他の PC 要素と同じく G の縦中心へ揃える。
     親 .header-menu の箱が G 中心を中心に持つので（791px 以上のブロック）、ここは中央揃えだけでよい。
     padding を足すと中心がずれる。 */
  .smp-menu {
    display: flex;
    width: 56px;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
  }

  /* PC 帯（980-791）のハンバーガー。写真の上に白で載るので一回り大きく取る。
     色は overlay ブロックが --top-hero-ui-color で上書きする。 */
  #smp-menu-button {
    --smp-menu-line-step: 11px;
    display: flex;
    width: 56px;
    height: 56px;
    padding: 8px;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
  }

  #smp-menu-button span {
    display: block;
    width: 40px;
    height: 2px;
    flex: 0 0 2px;
    background-color: #787878;
    margin: 0;
    transition: transform 0.2s, opacity 0.1s;
  }

  #smp-menu-button.active span:nth-child(1) {
    transform: translateY(var(--smp-menu-line-step)) rotate(45deg);
  }

  /* 開くときは真ん中の線を即座に消す。上下の線が × に回る 0.2s のあいだ横線が残ると、
     × に横線が重なって「※」に見えた（2026-10-05 iOS の Chrome で指摘。左カラムの版面のページで目立った）。
     visibility も外して、iOS が薄くなる途中の描画を残さないようにする。閉じるときは従来どおりフェードで戻る。 */
  #smp-menu-button.active span:nth-child(2) {
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  #smp-menu-button.active span:nth-child(3) {
    transform: translateY(calc(0px - var(--smp-menu-line-step))) rotate(-45deg);
  }

  #smp-menu-content {
    display: block;
    width: 100%;
    height: calc(100vh - var(--mobile-header-height));
    height: calc(100dvh - var(--mobile-header-height));
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--drawer-dur) ease,
      visibility 0s linear var(--drawer-dur);
    position: fixed;
    top: var(--mobile-header-height);
    left: 0;
    z-index: 1000;
    background-color: #f8f8f8;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* ドロワーの中身（項目・SNS の並び）は header_style.css が持つ（Top でも読まれる）。
     以前はここに同じ指定が2組重なっていた。 */

  #content-wrapper:before {
    display: none !important;
    height: 0 !important;
    margin-top: 0 !important;
  }

  /* margin-top removed - no longer needed */

  .menu-container {
    padding-top: 0 !important;
  }
}

/* モバイルヘッダー寸法。Hero / スライドショーの構図も別軸で 790 に切り替わるが、
   そちらのレイアウトは後読みの top_hero.css が一元管理する。 */
@media screen and (max-width:790px) {
  /* ここで初めてモバイルの見た目・配置へ落とす（Hero が通常フローになるため）。 */
    .smp-menu {
    width: 48px;
    align-items: center;
    padding-bottom: 0;
  }

  #header-wrapper {
    --mobile-header-height: var(--header-bar-compact);
    height: var(--mobile-header-height);
  }

  #header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    height: var(--mobile-header-height);
    margin-top: 0;
    /* モバイルはロゴとトリガーを中央揃えにするので下げない。 */
    --header-logo-drop: 0px;
    /* モバイルのロゴ幅。高さと G の縦中心はここから出る（ハンバーガーの位置合わせが参照する）。 */
    --header-logo-width: 140px;
    color: #787878;
    /* スマホ時は通常のテキスト色 */
  }

  .header-menu {
    align-items: center;
    height: 100%;
    padding-bottom: 0;
  }

  .index-siteinfo {
    height: 100%;
    padding-bottom: 0;
  }

  .index-siteinfo img {
    width: var(--header-logo-width);
    height: auto;
  }

  .forTopPagePC {
    display: none;
  }

  .forTopPageMobile {
    display: block;
  }

  /* ロゴ画像の箱は y のディセンダーまで含むので、箱どうしを中央揃えにすると文字の本体（G・K）が
     ハンバーガーより約 2.7px 上に見える。PC と同じく G の縦中心へ揃える（2026-10-01 ユーザー指摘）。
     線（2px）がにじまないよう整数 px に丸める。ずらすのはボタンだけ。親の .smp-menu を動かすと
     中のドロワーまで一緒に動く。 */
  #smp-menu-button {
    --smp-menu-line-step: 9px;
    position: relative;
    top: round(calc(var(--header-logo-g-center) - var(--header-logo-height) / 2), 1px);
    width: 48px;
    height: 48px;
    gap: 7px;
  }

  #smp-menu-button span {
    width: 32px;
  }

}


@media screen and (max-width:480px) {
  .index-siteinfo img {
    width: var(--header-logo-width);
    height: auto;
  }

  #smp-menu-content a {
    color: #787878;
    /* font-family: Roboto; */
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  /* TopicsエリアのスマホでのWorksページと同じ余白適用 */
  #content {
    padding: 0 22px !important;
  }
}

#content {
  padding: 0;
}

html {
  overflow: auto;
  height: 100%;
}

.body-no-scroll {
  overflow: hidden;
  height: 100%;
}

/* 旧: ここに @media (max-width:500px) がもう1ブロックあったが、上の 480 ブロックの
   完全な部分集合（同一宣言）だったため削除。 */