@charset "UTF-8";

/* =========================================================
   bicaree  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-red:      #c14140;   /* ベースの赤 */
  --c-cream:    #F9EEDA;
  --c-black:    #202020;
  --c-ink:      #1E1E1E;
  --c-yellow:   #F7E25F;
  --c-purple:   #6518FF;
  --c-cta:      #1f5bd8;   /* CTAボタンの青 */
  --c-white:    #ffffff;
  --c-bk:       #ea510f;   /* BK（オレンジ質感）のベース色 */
  --c-marquee:  #DE3B00;   /* マーキー英字（ブランドオレンジ＝デザイン準拠） */
  --c-reason:   #c52d04;   /* reasons 上下の尖り帯 */

  --f-en:  "Boldonse", sans-serif;
  --f-jp:  "Noto Sans JP", sans-serif;
  --f-num: "Barlow", sans-serif;
  --f-figtree: "Figtree", sans-serif;

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

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

/* ===== フッター（TOP/下層 共通） =====
   .home の外＝body直下なので地は全幅。中身は .footer-inner で最大1440・中央
   構成：CTAカード → ブランド＋リンク群 → 規約・コピーライト → 巨大ワードマーク */
.footer{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(180deg, #a73433 0%, #8c2827 100%);   /* LP のモデルケースと同じ濃い赤 */
  color:var(--c-cream);
  padding-block:96px 0;
}
/* 背景：上端に LP の赤から濃い赤へのなじませ（装飾はワードマークに任せる） */
.footer-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(193,65,64,.6) 0%, transparent 40%);
}
.footer-inner{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:24px;
}

/* --- CTAカード --- */
.footer-cta{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:48px 56px;
  border-radius:16px;
  border:3px solid var(--c-cream);
  background:linear-gradient(135deg, #d93a10 0%, #ed5700 60%, #ff8656 120%);
  box-shadow:0 20px 48px rgba(60,10,10,.35);
  color:#fff;
}
.footer-cta__en{
  font-family:var(--f-en);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--c-yellow);
}
.footer-cta__head{
  margin-top:14px;
  font-size:26px;
  font-weight:900;
  line-height:1.5;
  letter-spacing:.04em;
}
.footer-cta__note{
  margin-top:12px;
  font-size:13px;
  color:rgba(255,255,255,.85);
  letter-spacing:.04em;
}
.footer-cta__btns{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:340px;
  flex:none;
}
.footer-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:64px;
  padding:0 32px;
  border-radius:999px;
  font-size:15px;
  font-weight:900;
  letter-spacing:.04em;
  color:var(--c-cream);
  transition:background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.footer-btn::after{
  content:"";
  width:0;
  height:0;
  border-style:solid;
  border-width:6px 0 6px 9px;
  border-color:transparent transparent transparent currentColor;
  transition:transform .25s ease;
}
.footer-btn--primary{
  background:var(--c-cta);
  color:#fff;
  box-shadow:0 5px 0 #0e3489;
}
.footer-btn--primary:hover{
  transform:translateY(3px);
  box-shadow:0 2px 0 #0e3489;
}
.footer-btn--secondary{
  background:var(--c-cream);
  color:var(--c-red);
  box-shadow:0 5px 0 rgba(140,40,39,.45);
}
.footer-btn--secondary:hover{
  transform:translateY(3px);
  box-shadow:0 2px 0 rgba(140,40,39,.45);
}
.footer-btn:hover::after{ transform:translateX(4px); }

/* --- ブランド＋リンク群 --- */
.footer-main{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:56px;
  margin-top:80px;
  align-items:start;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.footer-logo{
  width:160px;
  height:auto;
}
.footer-tagline{
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--c-yellow);
}
.footer-company{
  margin-top:24px;
  font-size:13px;
  font-weight:500;
  line-height:1.8;
  letter-spacing:.02em;
  color:rgba(249,238,218,.8);
}
/* ブログ（エボルート）への導線。会社情報の下に、クリームの枠のカードで置く */
.footer-media{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:2px 12px;
  margin-top:24px;
  padding:14px 20px;
  border:2px solid rgba(249,238,218,.6);
  border-radius:10px;
  color:var(--c-cream);
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.footer-media::after{
  content:"→";
  grid-row:1 / 3;
  grid-column:3;
  font-size:16px;
  transition:transform .2s ease;
}
.footer-media__sub{
  grid-column:1;
  font-family:var(--f-num);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--c-yellow);
}
.footer-media__name{
  grid-column:2;
  font-size:16px;
  font-weight:900;
  letter-spacing:.04em;
}
.footer-media__text{
  grid-column:1 / 3;
  font-size:12px;
  color:rgba(249,238,218,.8);
}
.footer-media:hover{
  background:var(--c-cream);
  border-color:var(--c-cream);
  color:var(--c-red);
}
.footer-media:hover .footer-media__sub,
.footer-media:hover .footer-media__text{ color:var(--c-red); }
.footer-media:hover::after{ transform:translateX(4px); }
.footer-group__title{
  display:flex;
  align-items:baseline;
  gap:12px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(249,238,218,.75);
  padding-bottom:16px;
  border-bottom:1px solid rgba(249,238,218,.25);
}
/* LP の見出しと同じく、左に黄色の回路アイコン */
.footer-group__title::before{
  content:"";
  align-self:center;
  width:22px;
  aspect-ratio:28 / 21;
  background:url("../img/top/head_deco_tech.svg") center / contain no-repeat;
}
.footer-group__en{
  font-family:var(--f-en);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--c-cream);
}
.footer-links{
  list-style:none;
  display:grid;
  grid-template-columns:1fr;
  gap:6px 24px;
  margin-top:16px;
}
.footer-group--service .footer-links{
  grid-template-columns:repeat(3, 1fr);
}
.footer-links a{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 28px 10px 0;
  font-size:15px;
  font-weight:500;
  color:var(--c-cream);
  transition:color .2s ease, padding-left .25s ease;
}
.footer-links__num{
  font-family:var(--f-num);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--c-yellow);
}
/* 右端の矢印：ホバーで出現 */
.footer-links a::after{
  content:"→";
  position:absolute;
  right:4px;
  font-family:var(--f-num);
  font-size:14px;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .2s ease, transform .25s ease;
}
.footer-links a:hover{
  color:var(--c-yellow);
  padding-left:6px;
}
.footer-links a:hover::after{
  opacity:1;
  transform:none;
}

/* --- 下段：規約／コピーライト／トップへ --- */
.footer-bottom{
  display:flex;
  align-items:center;
  gap:24px 40px;
  margin-top:72px;
  padding-top:28px;
  border-top:1px solid rgba(249,238,218,.25);
}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  font-size:13px;
}
.footer-legal a{
  color:rgba(249,238,218,.8);
  transition:color .2s ease;
}
.footer-legal a:hover{
  color:var(--c-yellow);
  text-decoration:underline;
  text-underline-offset:4px;
}
.footer-legal a.is-external::after{
  content:"↗";
  margin-left:4px;
  font-size:.9em;
}
.footer-copy{
  margin-left:auto;
  font-size:12px;
  color:rgba(249,238,218,.65);
  letter-spacing:.04em;
}
.footer-totop{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  flex:none;
  border-radius:50%;
  border:2px solid rgba(249,238,218,.5);
  transition:background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.footer-totop span{
  width:10px;
  height:10px;
  margin-top:4px;
  border-top:2px solid var(--c-cream);
  border-left:2px solid var(--c-cream);
  transform:rotate(45deg);
  transition:border-color .25s ease;
}
.footer-totop:hover{
  background:var(--c-cream);
  border-color:var(--c-cream);
  transform:translateY(-3px);
}
.footer-totop:hover span{ border-color:var(--c-red); }

/* --- 巨大ワードマーク（下端で少し切れる） --- */
.footer-wordmark{
  margin-top:24px;
  margin-bottom:-.45em;
  font-family:var(--f-en);
  font-size:min(160px, 13vw);
  line-height:1.4;
  text-align:center;
  white-space:nowrap;
  letter-spacing:-.02em;
  color:rgba(96,22,21,.45);
  user-select:none;
  pointer-events:none;
}

/* ===== フッター タブレット/SP ===== */
@media (max-width: 1100px){
  .footer-cta{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-cta__btns{ width:100%; max-width:480px; }
  .footer-main{
    grid-template-columns:1fr;
    gap:40px;
  }
  .footer-group--service .footer-links{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 600px){
  .footer{ padding-block:56px 0; }
  .footer-inner{ padding-inline:20px; }
  .footer-cta{ padding:32px 24px; border-radius:20px; gap:28px; }
  .footer-cta__head{ font-size:20px; }
  .footer-cta__btns{ max-width:none; }
  .footer-logo{ width:130px; }
  .footer-main{
    grid-template-columns:1fr;
    gap:36px;
    margin-top:56px;
  }
  .footer-links a{ font-size:14px; }
  .footer-btn{ min-height:56px; font-size:14px; }
  .footer-bottom{
    flex-wrap:wrap;
    margin-top:48px;
    position:relative;
  }
  .footer-legal{ gap:10px 20px; font-size:12px; padding-right:64px; }
  .footer-copy{ margin-left:0; width:100%; }
  .footer-totop{ position:absolute; top:24px; right:0; }
}