@charset "UTF-8";

/* =========================================================
   bycaree  common.css  ─ TOP / 下層ページ 共通レイヤ
   ・デザイントークン(:root)＝色・フォント等（全ページ共有）
   ・フッター（TOP/下層で共通の唯一のUI）：**PC～タブレットは px 固定（可変にしない）**、
     SP(≤600px) のみ幅追従で可変（狭いと収まらないため）。html font-size に非依存。
   読み込み順は各ページで  common.css → (top.css | lower.css)  の順。
   ========================================================= */

/* ===== デザイントークン ===== */
:root{
  --c-orange:   #DE3B00;
  --c-orange2:  #ED5700;
  --c-orange3:  #FF8656;
  --c-orange4:  #FBDFC7;
  --c-cream:    #F9EEDA;
  --c-black:    #202020;
  --c-ink:      #1E1E1E;
  --c-yellow:   #F7E25F;
  --c-purple:   #6518FF;
  --c-white:    #ffffff;
  --c-bk:       #ea510f;   /* BK（オレンジ質感）のベース色 */
  --c-marquee:  #DE3B00;   /* マーキー英字（ブランドオレンジ＝デザイン準拠） */
  --c-reason:   #c52d04;   /* reasons 上下の尖り帯 */

  --f-en:  "Boldonse", sans-serif;
  --f-jp:  "Zen Kaku Gothic New", sans-serif;
  --f-num: "Barlow", sans-serif;
  --f-figtree: "Figtree", sans-serif;

  --dw: 1440px;            /* デザイン基準幅 */
}

/* リンクの下線リセット（下線が要る箇所＝本文リンク等は各所で明示的に付与） */
a{ text-decoration:none; }

/* ===== フッター（TOP/下層 共通） =====
   .home の外＝body直下なので地は全幅。中身は .footer-inner で最大1440・中央 */
.footer{
  background:var(--c-cream);
  color:var(--c-black);
  padding-block:56px;
  text-align:center;
}
.footer-inner{
  max-width:1440px;
  margin-inline:auto;
  padding-inline:24px;
}
.footer-logo{
  width:141px;
  height:auto;
  margin:0 auto 8px;
}
.footer-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  font-size:14px;
  font-weight:500;
}
.footer-nav a{
  color:var(--c-black);
  opacity:.92;
  transition:opacity .2s ease;
}
.footer-nav a:hover{
  opacity:1;
  text-decoration:underline;
}
.footer-copy{
  font-size:12px;
  opacity:.7;
  margin-top:8px;
  letter-spacing:.02em;
}

/* ===== フッター SP（≤600px）：狭いと収まらないので「幅追従で可変」に。
   375 基準の vw で縮小、375px 以上は PC 値でキャップ（min）＝拡大はしない。 ===== */
@media (max-width: 600px){
  .footer{ padding-block:min(40px, calc(40 / 375 * 100vw)); }
  .footer-inner{ max-width:100%; padding-inline:min(20px, calc(20 / 375 * 100vw)); }
  .footer-logo{ width:min(101px, calc(101 / 375 * 100vw)); }   /* Figma SP 101px */
  .footer-nav{ gap:min(16px, calc(16 / 375 * 100vw)); font-size:min(14px, calc(14 / 375 * 100vw)); }
  .footer-copy{ font-size:min(12px, calc(12 / 375 * 100vw)); }
}