/* =========================================================
   介護施設向けAI研修 LP（Tailwind版） css/styles.css
   コンセプト：和モダン編集デザイン × 上質な日本企業品質
   Tailwindユーティリティの上に、ブランド共通の署名要素を重ねるレイヤー
   ・英字セリフのゴースト数字（.sec-head[data-num]）
   ・金細罫オフセットの二重フレーム（.frame）
   ・CTAの金シャインスイープ（.btn-shine）
   ・数字カウントアップ（.count[data-count]）
   ※漫画版・写真版LPとブランド統一（同一カラートークン・同一書体系）
   ========================================================= */

:root{
  --navy:      #14304f;
  --navy-deep: #0a1d33;
  --gold:      #ac8a48;
  --gold-deep: #93753a;
  --gold-soft: #d9c596;
  --gold-pale: rgba(172,138,72,.14);
  --line:      #e1e6ec;
  --line-navy: rgba(20,48,79,.5);
  --ease:      cubic-bezier(.22,.61,.36,1);
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #1f2a36;
  letter-spacing: 0.02em;
  line-height: 1.9;
  font-feature-settings: "palt";
}
::selection{ background: var(--navy); color:#fff; }
.lead { letter-spacing: 0.04em; }

/* ===== 見出し：明朝（Zen Old Mincho）に格上げ ===== */
.heading {
  font-family: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-weight: 700 !important;
  letter-spacing: 0.07em;
  line-height: 1.6;
}

/* ===== セクションラベル：英字セリフ・イタリック＋金細罫 ===== */
.accent-bar{
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  font-family: 'Cormorant Garamond', 'Zen Old Mincho', serif !important;
  font-style: italic;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: .22em !important;
  color: var(--gold) !important;
}
.accent-bar::before,
.accent-bar::after{
  content:"";
  display:inline-block;
  width:34px; height:1px;
  background: var(--gold-soft);
  margin: 0;
  vertical-align: middle;
}
/* 左寄せで使うラベル（対応カテゴリー見出しなど）は片側罫のみ */
h3.accent-bar::after{ display:none; }
h3.accent-bar{
  font-family: 'Zen Old Mincho', serif !important;
  font-style: normal;
  letter-spacing: .06em !important;
  font-size: 1.125rem !important;
  color: var(--navy) !important;
}
h3.accent-bar::before{ width: 26px; background: var(--gold); height: 2px; }

/* ===== ゴースト数字（英字セリフの大型輪郭ナンバー） ===== */
.sec-head{ position: relative; }
.sec-head[data-num]::before{
  content: attr(data-num);
  position: absolute;
  left: 50%; top: -0.42em;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(92px, 22vw, 160px);
  line-height: 1;
  letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(20,48,79,.13);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.sec-head > *{ position: relative; z-index: 1; }
.sec-head[data-num]{ padding-top: clamp(26px, 6vw, 44px); }
/* ネイビー背景セクションでは白の輪郭線に */
.bg-navy .sec-head[data-num]::before{ -webkit-text-stroke-color: rgba(255,255,255,.14); }
.bg-lgray .sec-head[data-num]::before{ -webkit-text-stroke-color: rgba(20,48,79,.16); }

/* ===== 角丸の編集デザイン化（カード類をシャープに） ===== */
.rounded-xl{ border-radius: 2px !important; }
.rounded-2xl{ border-radius: 2px !important; }
.rounded-lg{ border-radius: 2px !important; }
.rounded{ border-radius: 2px !important; }
/* rounded-full（円形アイコン・バッジ）はそのまま */

/* ===== 画像：金細罫オフセットの二重フレーム（額装） ===== */
.frame{
  position: relative;
  display: block;
}
.frame > img{
  border: 1px solid var(--line-navy);
  background: #fff;
  box-shadow: 0 14px 36px -18px rgba(10,29,51,.32) !important;
  border-radius: 0 !important;
  width: 100%;
}
.frame::before{
  content:""; position:absolute; inset: 10px -11px -11px 10px;
  border: 1px solid var(--gold-soft);
  pointer-events:none; z-index:-1;
}
.frame::after{
  content:""; position:absolute; top:-1px; left:-1px;
  width:22px; height:22px;
  border-top:2px solid var(--gold); border-left:2px solid var(--gold);
  pointer-events:none;
}
/* 暗背景上のフレーム */
.bg-navy .frame > img{ border-color: rgba(255,255,255,.32); }
.bg-navy .frame::before{ border-color: rgba(217,197,150,.4); }

/* ===== ヘッダー：金の極細トップライン＋スクロール影 ===== */
header.fixed{
  background: rgba(251,251,250,.86) !important;
}
header.fixed::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 50%, var(--gold) 100%);
}
header.fixed.is-scrolled{ box-shadow: 0 6px 24px -8px rgba(10,29,51,.14); }
.logo-mark{ position: relative; }
.logo-mark::after{
  content:""; position:absolute; inset:3px;
  border:1px solid rgba(217,197,150,.55);
  pointer-events:none;
}
.logo-en{
  display:block;
  font-family:'Cormorant Garamond', serif;
  font-style: italic; font-weight: 500;
  font-size: 10px; letter-spacing: .2em;
  color: var(--gold);
  line-height: 1.2;
}

/* ===== CTAボタン：金シャインスイープ＋金/紺の天地罫 ===== */
.btn-shine{
  position: relative;
  overflow: hidden;
  border-radius: 2px !important;
  transition: transform .25s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease) !important;
}
.btn-shine::before{
  content:""; position:absolute; top:0; bottom:0; left:-40%;
  width:36%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-22deg);
  transition: left .65s var(--ease);
}
.btn-shine:hover{ transform: translateY(-2px); }
.btn-shine:hover::before{ left:116%; }
.btn-shine.bg-gold{ border-bottom: 2px solid var(--navy); box-shadow: 0 12px 26px -10px rgba(147,117,58,.55); }
.btn-shine.bg-gold:hover{ box-shadow: 0 18px 32px -12px rgba(147,117,58,.6); }
.btn-shine.bg-navy{ border-bottom: 2px solid var(--gold); box-shadow: 0 12px 26px -10px rgba(20,48,79,.5); }
.btn-shine.bg-navy:hover{ box-shadow: 0 18px 32px -12px rgba(20,48,79,.55); }

/* ===== 数字：英字セリフ（Cormorant）で上品に ===== */
.num-serif{
  font-family: 'Cormorant Garamond', 'Zen Old Mincho', serif !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em !important;
}
/* セクション番号（01/02…・STEP番号）をイタリックセリフに */
.no-serif{
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
}

/* ===== FAQ：編集的なアコーディオン ===== */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display:none; }
details{
  border-radius: 2px !important;
  border-top: 2px solid var(--gold-soft) !important;
  transition: background-color .3s ease, border-color .3s ease;
}
details[open]{ border-top-color: var(--gold) !important; }
details summary > span:first-child{
  position: relative;
  padding-left: 30px;
}
details summary > span:first-child::before{
  content:"Q";
  position:absolute; left:0; top:-2px;
  font-family:'Cormorant Garamond', serif;
  font-style: italic; font-weight: 600;
  font-size: 19px; color: var(--gold);
}
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .35s var(--ease); }

/* ===== 最終CTA：内側ヘアラインの額装 ===== */
#contact::after{
  content:""; position:absolute;
  inset: clamp(14px, 3vw, 28px);
  border: 1px solid rgba(217,197,150,.25);
  pointer-events: none;
}
#contact > .relative{ z-index: 1; }
#contact::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:1;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-soft) 50%, var(--gold) 70%, transparent);
}

/* ===== お問い合わせフォーム（LP内設置・確認画面共通） ===== */
.contact__form,
.confirm-box,
.thanks-box{
  background: #fff;
  color: #1f2a36;
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  box-shadow: 0 24px 54px -28px rgba(10,29,51,.35);
}
.contact__form{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 28px 22px;
}
.form__row{ margin-bottom: 18px; }
.form__row label,
.form__row legend{
  display: block;
  margin-bottom: 7px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}
.contact-form-subnote{
  color: #5f6b78;
  font-size: 12px;
  font-weight: 500;
}
.form__row fieldset,
fieldset.form__row{
  min-width: 0;
  padding: 0;
  border: 0;
}
.form__req{
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  background: var(--gold);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  vertical-align: middle;
}
.form__row input[type="text"],
.form__row input[type="email"],
.form__row input[type="tel"],
.form__row textarea,
.form__row select{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d8d0bd;
  background: #fff;
  color: #1f2a36;
  font-size: 15px;
  line-height: 1.7;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form__row input:focus,
.form__row textarea:focus,
.form__row select:focus{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(172,138,72,.18);
}
.form__row textarea{
  min-height: 132px;
  resize: vertical;
}
.form__grid{
  display: grid;
  gap: 18px;
}
.form__checks{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px;
  border: 1px solid #d8d0bd;
  background: #fbfbfa;
}
.form__checks label,
.form__check{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #5f6b78;
  font-size: 13px;
  line-height: 1.7;
  cursor: pointer;
}
.form__check-option--other{
  display: flex;
  align-items: center !important;
  grid-column: 1 / -1;
  gap: 9px;
  color: #5f6b78;
  font-size: 13px;
  line-height: 1.7;
}
.form__check-option--other label{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  cursor: pointer;
}
.form__check-option--other span{
  flex: 0 0 auto;
  white-space: nowrap;
}
.facility-other-input{
  flex: 1 1 auto !important;
  min-width: 0;
  width: 100% !important;
  margin-top: 0 !important;
  padding: 9px 11px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.facility-other-input:disabled{
  background: #f1f3f5 !important;
  color: #9aa3ad;
  cursor: not-allowed;
}
.form__checks input,
.form__check input{
  flex: 0 0 auto;
  width: auto;
  margin-top: .45em;
  accent-color: var(--gold);
}
.form__check{
  margin: 8px 0 22px;
  padding: 14px;
  border: 1px solid var(--line);
  background: #fbfbfa;
}
.contact__form-note{
  margin-top: 10px;
  color: #5f6b78;
  font-size: 12px;
  line-height: 1.8;
}
.confirm-box,
.thanks-box{
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 22px;
}
.thanks-box{ text-align: center; }
.confirm-table{
  width: 100%;
  margin-bottom: 24px;
  border-collapse: collapse;
}
.confirm-table th,
.confirm-table td{
  padding: 14px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
  vertical-align: top;
}
.confirm-table th{
  width: 36%;
  color: #5f6b78;
  font-weight: 700;
}
.confirm-table td{
  color: #1f2a36;
  word-break: break-word;
}
.confirm-errors{
  margin: 0 0 22px 1.25em;
  color: #9a3b3b;
  font-size: 14px;
  line-height: 1.9;
  list-style: disc;
}
.confirm-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
@media (min-width: 640px){
  .contact__form,
  .confirm-box,
  .thanks-box{ padding: 40px 36px; }
  .form__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__checks{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .confirm-table th{ width: 30%; }
}
@media (max-width: 480px){
  .form__check-option--other{
    flex-wrap: wrap;
  }
  .facility-other-input{
    flex-basis: 100% !important;
    margin-left: 25px;
  }
  .confirm-table th,
  .confirm-table td{
    display: block;
    width: 100%;
    padding: 10px 0;
  }
  .confirm-table th{ border-bottom: 0; padding-bottom: 2px; }
}

/* ===== スクロール出現アニメ（控えめ） ===== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn-shine::before{ display:none; }
}

/* ===== 写真プレースホルダ ===== */
img { background:#e8ebf0; }

/* ===== スクリーンリーダー専用 ===== */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===== 日本語改行制御 ===== */
h1, h2, h3, p, li, span, a, dt, dd { word-break: normal; overflow-wrap: anywhere; line-break: strict; }
.keep { word-break: keep-all; }
.company-url-link{
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--gold-soft);
  text-underline-offset: 4px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.company-url-link:hover{
  color: var(--gold);
  text-decoration-color: var(--gold);
}

/* ============================
   スマホ最適化（768px以下）
   ============================ */
@media (max-width: 768px) {
  body { line-height: 1.85; }
  .heading { line-height: 1.55; letter-spacing: 0.04em; }
  .body-sp { font-size: 0.95rem; }
}

/* ============================
   小型端末（400px以下）
   ============================ */
@media (max-width: 400px) {
  h2.heading { font-size: 1.2rem; line-height: 1.6; }
  .price-num { font-size: 2.75rem !important; }
  .accent-bar{ gap:10px; font-size:13.5px !important; letter-spacing:.12em !important; white-space:nowrap; }
  .accent-bar::before, .accent-bar::after{ width:16px; }
}

/* ============================
   ファーストビュー画像
   スマホ：横幅いっぱい（全幅）
   PC（640px以上）：最大1000px・中央寄せ＋ネイビー余白フレーム
   ※ コンパイル済みtailwind.cssにsm:変種が無いためCSSで制御
   ============================ */
@media (min-width: 640px) {
  #fv { padding: 2.5rem 1.5rem; }
  #fv img {
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  }
}

/* ============================
   信頼バーUL
   スマホ：max-w-xs で中央寄せ（HTML側クラス）
   PC（640px以上）：最大1000px・中央寄せでFV画像と幅を揃える
   ============================ */
@media (min-width: 640px) {
  .trust-ul { max-width: 1000px; }
}