@charset "UTF-8";
/* =========================================================
   FARE株式会社 コーポレートサイト 共通スタイル
   ヘッダー / ナビ / パンくず / ヒーロー / フッター
   ページ本文のスタイルは各ページの <style> 内にあります。
   ========================================================= */

:root{
  --ink:        #10263a;
  --accent:     #4572e6;
  --muted:      #5a6b78;
  --line:       rgba(16,38,58,.14);
  --tint:       #eef2fd;
  /* ページ本文（.fare__inner）と同じ幅にして、ロゴ・ヒーロー・本文の左端を揃える */
  --shell-maxw: 1080px;
  --shell-pad:  clamp(20px,5vw,48px);
}

*,*::before,*::after{ box-sizing: border-box; }

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

body{
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  line-height: 2;
  overflow-x: clip;
}

img{ max-width: 100%; }

a{ color: inherit; }

/* ===== ヘッダー ===== */
.site-header{
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner{
  max-width: var(--shell-maxw);
  margin-inline: auto;
  padding: 14px var(--shell-pad);
  display: flex;
  align-items: center;
  gap: 18px;
}
.site-header__inner .site-nav{ margin-left: auto; }
.site-header__logo{
  flex: 0 0 auto;
  display: block;
  line-height: 0;
  text-decoration: none;
}
.site-header__logo img{
  height: 30px;
  width: auto;
  display: block;
}

/* ===== グローバルナビ ===== */
.nav-toggle{ display: none; }

.site-nav{
  display: flex;
  align-items: center;
  gap: clamp(12px,1.9vw,28px);
  min-width: 0;
}

/* 上段のリンク（HOME・親メニュー・お問い合わせ） */
.site-nav > a,
.nav-parent{
  position: relative;
  display: block;
  flex: 0 0 auto;
  padding: 10px 0;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.4;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  transition: color .2s;
}
.site-nav > a::after,
.nav-parent::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.site-nav > a:hover,
.nav-parent:hover{ color: var(--accent); }
.site-nav > a:hover::after,
.nav-parent:hover::after{ transform: scaleX(1); }

/* 現在地 */
.site-nav > a[aria-current="page"],
.nav-item.is-current > .nav-parent{ color: var(--accent); font-weight: 700; }
.site-nav > a[aria-current="page"]::after,
.nav-item.is-current > .nav-parent::after{ transform: scaleX(1); }

/* お問い合わせだけボタン型 */
.site-nav .nav-cta{
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}
.site-nav .nav-cta::after{ display: none; }
.site-nav .nav-cta:hover{ color: #fff; background: #2f58c4; }
/* お問い合わせページ上では、現在地の色（青）で文字が背景に溶けないようにする */
.site-nav .nav-cta[aria-current="page"]{ color: #fff; background: var(--ink); }

/* 子メニュー（共通） */
.nav-item{ position: relative; }
.nav-sub a{
  display: block;
  padding: 9px 14px;
  border-radius: 6px;
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-sub a:hover,
.nav-sub a:focus-visible{ background: var(--tint); color: var(--accent); outline: none; }
.nav-sub a[aria-current="page"]{ background: var(--tint); color: var(--accent); font-weight: 700; }

/* パソコン：マウスを乗せる・タップ・キーボード操作で開くドロップダウン */
@media (min-width: 1001px){
  .nav-parent{ padding-right: 15px; }
  .nav-parent::after{ right: 15px; }
  .nav-parent::before{
    content: "";
    position: absolute;
    right: 1px; top: 50%;
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-75%) rotate(45deg);
    transition: transform .2s;
  }
  .nav-item:hover > .nav-parent::before,
  .nav-item:focus-within > .nav-parent::before,
  .nav-item.is-open > .nav-parent::before{ transform: translateY(-25%) rotate(225deg); }

  .nav-sub{
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    z-index: 60;
    min-width: 13em;
    padding: 8px;
    display: grid;
    gap: 2px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(16,38,58,.14);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  /* マウスを親から子メニューへ動かす途中で閉じないための透明な橋 */
  .nav-sub::before{
    content: "";
    position: absolute;
    left: 0; right: 0; top: -10px;
    height: 10px;
  }
  .nav-item:hover > .nav-sub,
  .nav-item:focus-within > .nav-sub,
  .nav-item.is-open > .nav-sub{
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }
  .nav-item:hover > .nav-parent,
  .nav-item:focus-within > .nav-parent,
  .nav-item.is-open > .nav-parent{ color: var(--accent); }
}

/* スマホ・タブレット：メニューボタンで開く一覧 */
@media (max-width: 1000px){
  .site-header__inner{
    flex-wrap: wrap;
    gap: 0;
    padding-block: 12px;
  }
  .lang-menu{ order: 1; margin-left: auto; }
  .nav-toggle{ order: 2; }
  .site-header__inner .site-nav{ order: 3; margin-left: 0; }
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 8px;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    cursor: pointer;
  }
  .nav-toggle:focus-visible{ outline: 3px solid rgba(69,114,230,.35); outline-offset: 2px; }
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after{
    display: block;
    width: 16px; height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform .2s, background .2s;
  }
  .nav-toggle__bars{ position: relative; }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after{ content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before{ top: -5px; }
  .nav-toggle__bars::after{ top: 5px; }
  .is-menu-open .nav-toggle__bars{ background: transparent; }
  .is-menu-open .nav-toggle__bars::before{ top: 0; transform: rotate(45deg); }
  .is-menu-open .nav-toggle__bars::after{ top: 0; transform: rotate(-45deg); }

  .site-nav{
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 10px;
    padding-bottom: 14px;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .is-menu-open .site-nav{ display: flex; }

  .site-nav > a,
  .nav-parent{
    padding: 10px 2px;
    font-size: .95rem;
    border-bottom: 1px solid var(--line);
  }
  .site-nav > a::after,
  .nav-parent::after{ display: none; }
  .nav-sub{
    display: grid;
    padding: 2px 0 8px 12px;
    border-bottom: 1px solid var(--line);
  }
  .nav-sub a{ padding: 7px 10px; font-size: .88rem; }
  .site-nav .nav-cta{
    margin-top: 14px;
    padding: 14px;
    text-align: center;
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .site-nav *, .nav-toggle *{ transition: none !important; }
}

/* ===== パンくず ===== */
.site-crumb{
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.site-crumb__inner{
  max-width: var(--shell-maxw);
  margin-inline: auto;
  padding: 12px var(--shell-pad);
  font-size: .74rem;
  line-height: 1.8;
  color: var(--muted);
  letter-spacing: .02em;
}
.site-crumb a{ color: var(--muted); text-decoration: none; }
.site-crumb a:hover{ color: var(--accent); }
.site-crumb span{ margin: 0 .55em; opacity: .55; }

/* ===== トップのヒーロー ===== */
.site-hero{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(69,114,230,.14), transparent 62%),
    linear-gradient(180deg, var(--tint) 0%, #fff 78%);
  border-bottom: 1px solid var(--line);
}
.site-hero__inner{
  max-width: var(--shell-maxw);
  margin-inline: auto;
  padding: clamp(60px,10vw,132px) var(--shell-pad) clamp(54px,8vw,110px);
}
.site-hero__en{
  margin: 0 0 clamp(16px,2vw,26px);
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(.78rem,1.4vw,.95rem);
  letter-spacing: .34em;
  line-height: 1;
  color: var(--accent);
}
.site-hero__copy{
  margin: 0;
  font-size: clamp(1.6rem,7vw,4.1rem);   /* スマホで「〜けん。」の「ん。」だけが落ちない大きさ */
  text-wrap: balance;
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: .01em;
}
.site-hero__rule{
  width: 76px;
  height: 4px;
  margin: clamp(22px,3vw,34px) 0 clamp(20px,2.6vw,30px);
  background: var(--accent);
  border: 0;
}
.site-hero__lead{
  max-width: 44em;
  margin: 0;
  font-size: clamp(.9rem,1.6vw,1.05rem);
  color: var(--muted);
  line-height: 2.1;
}
.site-hero__cta{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px,4vw,44px);
}
.btn{
  display: inline-block;
  padding: 15px 34px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.btn--fill{ background: var(--accent); color: #fff; border: 2px solid var(--accent); }
.btn--fill:hover{ background: #2f58c4; border-color: #2f58c4; }
.btn--line{ background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.btn--line:hover{ background: var(--ink); color: #fff; }

/* ===== 下層ページの見出し帯 ===== */
.page-head{
  background: var(--tint);
  border-bottom: 1px solid var(--line);
}
.page-head__inner{
  max-width: var(--shell-maxw);
  margin-inline: auto;
  padding: clamp(34px,5vw,64px) var(--shell-pad);
}
.page-head__en{
  margin: 0;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(2rem,6vw,3.4rem);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--accent);
}
.page-head__ja{
  margin: 12px 0 0;
  font-size: clamp(.74rem,1.2vw,.85rem);
  font-weight: 500;
  letter-spacing: .18em;
}

/* ===== フッター ===== */
.site-footer{
  background: var(--ink);
  color: rgba(255,255,255,.82);
  font-size: .82rem;
  line-height: 2;
}
.site-footer__inner{
  max-width: var(--shell-maxw);
  margin-inline: auto;
  padding: clamp(46px,6vw,76px) var(--shell-pad) clamp(26px,3vw,36px);
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  gap: clamp(32px,5vw,64px);
}
@media (max-width: 760px){
  .site-footer__inner{ grid-template-columns: 1fr; }
}
.site-footer__logo{
  height: 34px;
  width: auto;
  display: block;
  margin: 0 0 20px;
}
.site-footer__addr{
  margin: 0;
  font-size: .78rem;
  line-height: 2.1;
  color: rgba(255,255,255,.66);
  font-style: normal;
}
.site-footer__tag{
  margin: 0 0 18px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: #fff;
}
.site-footer__nav{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px,1fr));
  gap: 6px clamp(20px,3vw,36px);
  align-content: start;
}
.site-footer__nav a{
  display: block;
  padding: 3px 0;
  font-size: .8rem;
  text-decoration: none;
  color: rgba(255,255,255,.82);
  transition: color .2s;
}
.site-footer__nav a:hover{ color: #fff; }
.site-footer__bottom{
  max-width: var(--shell-maxw);
  margin-inline: auto;
  padding: 16px var(--shell-pad) 30px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .7rem;
  letter-spacing: .06em;
  color: rgba(255,255,255,.5);
}

/* ===== 印刷 ===== */
@media print{
  .site-header, .site-crumb, .site-footer{ display: none; }
}

/* =========================================================
   メンバーカードの名前は写真の左にはみ出すデザインですが、
   1列表示（520px以下）では画面の外まで出てしまうため、
   その幅だけ文字サイズを下げます。
   （body を付けて、ページ側の .member-section より優先させています）
   ========================================================= */
@media (max-width: 520px){
  body .member-section{ --fare-name-size: 10.5cqw; }
}


/* =========================================================
   博多弁の切り替えボタン
   ========================================================= */
.lang-toggle{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.lang-toggle .lang-toggle__std, .lang-toggle .lang-toggle__hkt{
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; line-height: 1; white-space: nowrap;
}
.lang-toggle .lang-toggle__hkt{ display: none; }
.lang-toggle[aria-pressed="true"] .lang-toggle__std{ display: none; }
.lang-toggle[aria-pressed="true"] .lang-toggle__hkt{ display: inline; }
.lang-toggle[aria-pressed="true"]{ background: var(--accent); border-color: var(--accent); color: #fff; }
.lang-toggle:hover{ border-color: var(--ink); }
.lang-toggle:focus-visible{ outline: 3px solid rgba(69,114,230,.35); outline-offset: 2px; }
.lang-toggle__icon{ flex: 0 0 auto; transition: rotate .5s cubic-bezier(.34,1.56,.64,1); }


/* =========================================================
   読み込み画面：ロゴの青い弧が左から描かれる
   JSが動かなくても、CSSだけで自動的に消えます
   ========================================================= */
.site-loader{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #fff;
  animation: loader-out .5s ease 1.55s forwards;
}
.loader-short .site-loader{ animation-delay: .7s; }
.site-loader.is-done{ opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.site-loader__mark{
  position: relative;
  width: min(180px, 46vw);
  aspect-ratio: 206 / 80;
  animation: loader-pop .5s cubic-bezier(.34,1.56,.64,1) 1.05s both;
}
.loader-short .site-loader__mark{ animation-delay: .4s; }
.site-loader__mark img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.site-loader__letters{ animation: loader-fade .45s ease .05s both; }
.site-loader__arc{
  clip-path: inset(0 100% 0 0);
  animation: loader-draw .75s cubic-bezier(.65,0,.25,1) .35s forwards;
}
.loader-short .site-loader__letters{ animation-duration: .2s; animation-delay: 0s; }
.loader-short .site-loader__arc{ animation-duration: .4s; animation-delay: .05s; }
@keyframes loader-fade{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
@keyframes loader-draw{ to{ clip-path: inset(0 0 0 0); } }
@keyframes loader-pop{ 0%{ transform: scale(1); } 45%{ transform: scale(1.06); } 100%{ transform: scale(1); } }
@keyframes loader-out{ to{ opacity: 0; visibility: hidden; } }

/* =========================================================
   表示アニメ：スクロールで下からふわっと現れる
   ========================================================= */
.js .reveal{
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .75s cubic-bezier(.2,.7,.2,1) var(--d, 0s),
    transform .75s cubic-bezier(.2,.7,.2,1) var(--d, 0s);
}
.js .reveal--pop{ transform: translateY(22px) scale(.92); }
.js .reveal.is-in{ opacity: 1; transform: none; }
.js .reveal--pop.is-in{
  transition:
    opacity .6s ease var(--d, 0s),
    transform .8s cubic-bezier(.34,1.56,.64,1) var(--d, 0s);
}
/* 出終わったあとは、ホバーの動きを軽く */
.js .reveal.is-in.revealed{
  transition: transform .25s ease, box-shadow .25s ease, background .2s, color .2s, border-color .2s;
}

/* イラストは、出たあとにゆっくり浮かぶ */
.lead-visual img{ will-change: transform; }
.reveal.is-in .lead-visual img,
.lead-visual.reveal.is-in img{ animation: float-soft 6s ease-in-out 1s infinite; }
@keyframes float-soft{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }

/* =========================================================
   質感：角丸のカード・見出しの小さな丸・ホバーで浮き上がる
   （body を付けて、各ページ側の指定より優先させています）
   ========================================================= */
body .lead-visual{
  background: var(--tint);
  border-radius: 28px;
  padding: clamp(18px, 3vw, 34px);
  overflow: hidden;
}
body .lead-visual img{ border-radius: 0; }
body .service__visual{ border-radius: 22px; overflow: hidden; background: var(--tint); }   /* ホームと事業内容でカードの見た目を揃える */
body .member__photo img{ border-radius: 20px; }
body .fare figure img[src*="cocoa-screen"]{ border-radius: 16px; }

body .fare .link-card,
body .fare .duo__card,
body .fare .closing,
body .fare .cta{ border-radius: 20px; }

@media (hover: hover){
  body .fare .link-card:hover,
  body .fare .duo__card:hover,
  body .fare .feature:hover{
    transform: translateY(-5px);
    box-shadow: 0 18px 36px rgba(16,38,58,.12);
  }
  body .fare .service:hover .service__visual img{ transform: scale(1.04); }
  body .fare .service__visual img{ transition: transform .5s cubic-bezier(.2,.7,.2,1); }
}

/* 見出しの日本語ラベルの頭に、小さな青い丸 */
body .sec-head .ja::before,
body .sub-ja::before{
  content: "";
  display: inline-block;
  width: .55em;
  height: .55em;
  margin-right: .6em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: .05em;
}

/* ボタンを押したときの小さな沈み込み */
.btn:active,
.site-nav .nav-cta:active,
.lang-toggle:active{ transform: scale(.97); }

/* トップのヒーローに、ゆっくり漂う光の玉 */
.site-hero::before,
.site-hero::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}
.site-hero::before{
  width: clamp(160px, 26vw, 340px); aspect-ratio: 1;
  right: -4%; top: 12%;
  background: radial-gradient(circle at 35% 35%, rgba(69,114,230,.28), rgba(69,114,230,0) 70%);
  animation: drift 14s ease-in-out infinite;
}
.site-hero::after{
  width: clamp(90px, 14vw, 180px); aspect-ratio: 1;
  right: 22%; bottom: 8%;
  background: radial-gradient(circle at 40% 40%, rgba(255,201,60,.30), rgba(255,201,60,0) 70%);
  animation: drift 11s ease-in-out -4s infinite reverse;
}
.site-hero__inner{ position: relative; z-index: 1; }
@keyframes drift{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(-24px, 18px); }
}

/* =========================================================
   動きを減らす設定の人には、演出をすべて止める
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .site-loader{ display: none; }
  .js .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal.is-in .lead-visual img,
  .lead-visual.reveal.is-in img,
  .site-hero::before,
  .site-hero::after{ animation: none !important; }
}


/* =========================================================
   あそび（site.js の 5. と対になる見た目）
   ========================================================= */
.pyon{ position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
body .is-pyon{ animation: pyon .6s cubic-bezier(.3,1.4,.6,1) !important; }
@keyframes pyon{
  0%{ transform: translateY(0) scale(1,1); }
  18%{ transform: translateY(4px) scale(1.06,.92); }
  48%{ transform: translateY(-22px) scale(.95,1.05); }
  78%{ transform: translateY(0) scale(1.04,.96); }
  100%{ transform: translateY(0) scale(1,1); }
}
@media (hover: hover){
  .lead-visual.pyon:hover img, .office-visual.pyon:hover img{ rotate: -2deg; }
  .lead-visual.pyon img, .office-visual.pyon img{ transition: rotate .4s cubic-bezier(.34,1.56,.64,1); }
}
/* 人の写真は、さわると枠が黄色に */
body .member__photo.pyon img, body .message__photo.pyon img{ transition: box-shadow .25s ease; }
body .member__photo.is-on img, body .message__photo.is-on img{ box-shadow: 0 0 0 5px var(--fare-yellow), 0 14px 30px rgba(255,201,60,.4); }

body .pyon-bubble{
  position: absolute; left: 50%; top: 14px; z-index: 3; translate: -50% 0;
  padding: 7px 14px; border-radius: 999px; background: #10263a; color: #fff;
  font-family: "Anton", "Noto Sans JP", sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: .04em; line-height: 1.3; white-space: nowrap;
  opacity: 0; scale: .6; transition: opacity .2s, scale .3s cubic-bezier(.34,1.56,.64,1); pointer-events: none;
}
body .pyon-bubble:empty{ display: none; }
body .is-talk > .pyon-bubble{ opacity: 1; scale: 1; }
body .pyon-dot{
  position: absolute; z-index: 3; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--yellow, #ffc93c); pointer-events: none;
  animation: pyon-dot .75s cubic-bezier(.2,.7,.2,1) forwards;
}
body .pyon-dot:nth-child(odd){ background: #4572e6; width: 7px; height: 7px; }
@keyframes pyon-dot{ from{ transform: translate(0,0) scale(1); opacity: 1; } to{ transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }

/* 流れ・沿革：順に光る */
.lights{ cursor: pointer; }
body .flow > .is-lit .no{ background: #ffc93c !important; color: #10263a !important; animation: lit .7s cubic-bezier(.34,1.56,.64,1); }
body .flow .no{ transition: background .35s ease, color .35s ease; }
body .history dt.is-lit{ animation: lit-text .7s ease; }
@keyframes lit{ 0%{ transform: scale(1); } 35%{ transform: scale(1.22); } 100%{ transform: scale(1); } }
@keyframes lit-text{ 0%,100%{ color: #4572e6; translate: 0 0; } 35%{ color: #e0a800; translate: 6px 0; } }

/* 見出しの黄色マーカー */
body .mk{
  background: linear-gradient(transparent 64%, rgba(255,201,60,.8) 64%, rgba(255,201,60,.8) 92%, transparent 92%) no-repeat 0 0 / 0% 100%;
  transition: background-size 1s cubic-bezier(.65,0,.25,1);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
body .mk.is-on{ background-size: 100% 100%; }

/* NEW */
body .new-badge{
  display: inline-block; margin-left: .6em; padding: 2px 8px; border-radius: 999px; vertical-align: .1em;
  background: #ffc93c; color: #10263a; font-family: "Anton", sans-serif; font-size: .66rem; letter-spacing: .08em; line-height: 1.5;
  animation: new-wiggle 2.6s ease-in-out infinite;
}
@keyframes new-wiggle{ 0%,80%,100%{ rotate: 0deg; } 86%{ rotate: -10deg; } 92%{ rotate: 8deg; } }

/* 博多弁ボタンのひとこと */
.lang-toggle{ position: relative; }
.lang-tip{
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 5;
  padding: 6px 12px; border-radius: 10px; background: #10263a; color: #fff;
  font-size: .74rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
  opacity: 0; translate: 0 -6px; transition: opacity .2s, translate .3s cubic-bezier(.34,1.56,.64,1); pointer-events: none;
}
.lang-tip::before{ content: ""; position: absolute; right: 22px; top: -5px; border: 6px solid transparent; border-bottom-color: #10263a; border-top: 0; }
.lang-toggle.is-tip .lang-tip{ opacity: 1; translate: 0 0; }

/* ページの上へ */
.to-top{
  position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); z-index: 40;
  display: grid; place-items: center; align-content: center; width: 58px; height: 58px; border: 0; border-radius: 50%;
  background: #4572e6; color: #fff; box-shadow: 0 10px 24px rgba(69,114,230,.35);
  font-family: "Anton", sans-serif; font-size: .72rem; letter-spacing: .08em; line-height: 1.1; cursor: pointer;
  opacity: 0; visibility: hidden; translate: 0 16px; transition: opacity .25s, translate .35s cubic-bezier(.34,1.56,.64,1), visibility .25s, background .2s;
}
.to-top span{ font-size: 1rem; }
.to-top.is-shown{ opacity: 1; visibility: visible; translate: 0 0; }
.to-top:hover{ background: #2f58c4; }
.to-top:focus-visible{ outline: 3px solid #ffc93c; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  body .mk{ transition: none; }
  body .new-badge{ animation: none; }
}

/* 見出しを句の途中で改行させない */
body .nb{ display: inline-block; }

/* 幅の狭いスマホでは、言語ボタンを地球のマークだけに */
@media (max-width: 420px){
  .lang-toggle{ padding: 8px; }
  .lang-toggle .lang-toggle__std,
  .lang-toggle[aria-pressed="true"] .lang-toggle__hkt{ display: none; }
  .lang-toggle__icon{ width: 18px; height: 18px; }
}

/* =========================================================
   言語メニュー（Language を押すと開く）
   ========================================================= */
.lang-menu{ position: relative; flex: 0 0 auto; }
.lang-toggle__caret{ flex: 0 0 auto; transition: rotate .25s ease; }
.lang-menu.is-open .lang-toggle__caret{ rotate: 180deg; }
.lang-menu__list{
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 172px;
  padding: 6px; border-radius: 14px; background: #fff;
  box-shadow: 0 14px 34px rgba(16,38,58,.16), 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; translate: 0 -6px;
  transition: opacity .18s ease, translate .25s cubic-bezier(.34,1.56,.64,1), visibility .18s;
}
.lang-menu.is-open .lang-menu__list{ opacity: 1; visibility: visible; translate: 0 0; }
.lang-menu__list button{
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; width: 100%;
  padding: 10px 12px 10px 30px; border: 0; border-radius: 10px; background: none;
  font: inherit; text-align: left; color: var(--ink); cursor: pointer; position: relative;
}
.lang-menu__list button:hover, .lang-menu__list button:focus-visible{ background: var(--tint); outline: none; }
.lang-menu__list button[aria-checked="true"]::before{
  content: ""; position: absolute; left: 12px; top: 50%; width: 9px; height: 5px; margin-top: -4px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); rotate: -45deg;
}
.lang-menu__name{ font-size: .86rem; font-weight: 700; line-height: 1.4; }
.lang-menu__sub{ font-size: .7rem; color: var(--muted); line-height: 1.4; white-space: nowrap; }
.lang-menu__list button[aria-checked="true"] .lang-menu__name{ color: var(--accent); }
@media (max-width: 420px){ .lang-toggle__caret{ display: none; } }
.lang-menu__list .lang-menu__soon{ cursor: not-allowed; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
.lang-menu__list .lang-menu__soon .lang-menu__name{ color: #a3adb7; }
.lang-menu__list .lang-menu__soon:hover{ background: none; }
.lang-menu__soon.is-nudge{ animation: soon-shake .4s ease; }
@keyframes soon-shake{ 0%,100%{ translate: 0 0; } 25%{ translate: -4px 0; } 50%{ translate: 4px 0; } 75%{ translate: -2px 0; } }