/* =====================================================================
   あきばれホームページ — Component styles
   Faithful, cosmetic recreations of the live site's UI vocabulary.
   Requires colors_and_type.css. Scope under .ah-scope.
   ===================================================================== */

/* ---------- BUTTONS (link_btn pills) ---------------------------------
   Faithful to the live site. The primary CTAs are fully-rounded SOLID
   pills (not gradients), each with an optional white circular icon badge
   on the left, white text + a white chevron on the right, and a hard
   `0 5px 0` bottom shadow that COLLAPSES on press (the button sinks 5px).
   Color = role:  資料請求→green · service→blue · contact→gray/deep-blue.
   The warm orange→red gradient is reserved for sidebar/banner contact
   strips (.list_bnr / .media_box) — see .ah-btn--warm, not the pills.
   --------------------------------------------------------------------- */
.ah-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  position:relative; top:0; height:60px; padding:0 2.2em;
  border:none; border-radius:9999px;
  font-family:var(--font-gothic); font-size:18px; font-weight:bold;
  color:#fff !important; text-decoration:none !important; cursor:pointer;
  transition:top .1s ease, box-shadow .1s ease, filter .15s ease;
}
.ah-btn::after{ /* chevron */
  content:""; width:8px; height:8px; flex:0 0 auto; margin-left:.15em;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
}
.ah-btn:hover{ filter:brightness(1.05); color:#fff !important; }
.ah-btn:active,.ah-btn.is-press{ top:5px; box-shadow:none !important; }

/* white circular icon badge (has_icon) */
.ah-btn__icon{ width:38px; height:38px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; margin-left:-.9em; flex:0 0 auto; }
.ah-btn__icon img, .ah-btn__icon svg{ width:60%; height:60%; }

/* size + width */
.ah-btn--lg{ height:74px; font-size:22px; padding:0 2.8em; }
.ah-btn--lg .ah-btn__icon{ width:52px; height:52px; }
.ah-btn--wide{ min-width:360px; }

/* === solid color variants (with 3D bottom shadow) === */
.ah-btn--siryo, .ah-btn--cta{ background:#4b8325; box-shadow:0 5px 0 #1d3a0e; }   /* 資料請求 (#1 CV) */
.ah-btn--green{ background:#689f38; box-shadow:0 5px 0 #386f08; }                  /* 申込・送信 submit */
.ah-btn--royalblue, .ah-btn--blue{ background:#1463c6; box-shadow:0 5px 0 #0a356a; } /* サービス確認 */
.ah-btn--contact{ background:#1e49a6; box-shadow:0 5px 0 #0e2350; }               /* お問合せ (deep blue) */
.ah-btn--gray{ background:#757575; box-shadow:0 5px 0 #424242; }                  /* 低優先度 */
.ah-btn--seminar{ background:#db3400; box-shadow:0 5px 0 #751c00; }               /* セミナー (rust) */
.ah-btn--maroon{ background:#8b1c23; box-shadow:0 5px 0 #4d0f14; }
.ah-btn--red{ background:#bf222c; box-shadow:0 5px 0 #5e1216; }

/* icon-badge glyph tint matches each button color */
.ah-btn--siryo .ah-btn__icon, .ah-btn--cta .ah-btn__icon, .ah-btn--green .ah-btn__icon{ color:#4b8325; }
.ah-btn--royalblue .ah-btn__icon, .ah-btn--blue .ah-btn__icon, .ah-btn--contact .ah-btn__icon{ color:#1463c6; }
.ah-btn--gray .ah-btn__icon{ color:#757575; }
.ah-btn--seminar .ah-btn__icon{ color:#db3400; }
.ah-btn--maroon .ah-btn__icon, .ah-btn--red .ah-btn__icon{ color:#8b1c23; }

/* === outline (line_btn) — white fill, 2px colored border + text === */
.ah-btn--line{ background:#fff !important; box-shadow:0 5px 0 #424242;
  border:2px solid #1e49a6; color:#1e49a6 !important; }
.ah-btn--line.ah-btn--siryo, .ah-btn--line.ah-btn--green{ border-color:#4b8325; color:#4b8325 !important; }
.ah-btn--line.ah-btn--maroon, .ah-btn--line.ah-btn--red{ border-color:#8b1c23; color:#8b1c23 !important; }
.ah-btn--line:hover{ filter:none; opacity:.85; }
.ah-btn--line .ah-btn__icon{ color:#fff; background:#1e49a6; }
.ah-btn--line.ah-btn--siryo .ah-btn__icon, .ah-btn--line.ah-btn--green .ah-btn__icon{ background:#4b8325; }

/* === legacy warm gradient — sidebar/banner contact CTAs only
   (.list_bnr / .media_box), NOT the primary link_btn pills === */
.ah-btn--warm{ background:linear-gradient(to bottom,#ff6b00 0%,#ff1600 100%);
  border:2px solid #ff1b1b; box-shadow:0 5px 0 #b81000; }

/* === tel CTA pill (電話で相談) — outline maroon pill carrying a phone
   number, designed to sit BESIDE the primary 資料請求 pill (the FV pattern).
   It is a terminal action (a phone dial), so it drops the chevron. The
   left icon badge is a SOLID maroon circle with a white phone glyph so it
   reads as a tappable call button. Use: <a class="ah-btn ah-btn--tel">,
   add .ah-btn--lg to match a large primary CTA. === */
.ah-btn--tel{ background:#fff !important; color:var(--ah-maroon) !important;
  border:2px solid var(--ah-maroon); box-shadow:0 5px 0 #4d0f14; gap:.5em; }
.ah-btn--tel::after{ display:none; }           /* no chevron — dialing isn't navigation */
.ah-btn--tel:hover{ filter:none; background:var(--ah-red-pale-2); }
.ah-btn--tel:active,.ah-btn--tel.is-press{ top:5px; box-shadow:none !important; }
.ah-btn--tel .ah-btn__icon{ background:var(--ah-maroon); color:#fff; }

/* ---------- CHECK LIST (box_check_list / check_list) ----------------- */
.ah-checklist{ list-style:none; margin:0; padding:0; }
.ah-checklist li{
  position:relative; padding-left:36px; margin-bottom:.6em;
  font-weight:bold; font-size:20px;
}
.ah-checklist li::before{
  content:""; position:absolute; left:0; top:.12em;
  width:24px; height:24px; border-radius:6px;
  background:var(--success-btn);
  -webkit-mask:var(--ah-check-mask) center/16px no-repeat;
          mask:var(--ah-check-mask) center/16px no-repeat;
  background-image:none;
}
/* tick drawn with a pseudo when no mask asset is available */
.ah-checklist li::after{
  content:""; position:absolute; left:7px; top:.45em;
  width:9px; height:5px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
  transform:rotate(-45deg);
}
.ah-checklist--sm li{ font-size:16px; padding-left:30px; }

/* ---------- CARDS / BOXES -------------------------------------------- */
.ah-card{
  background:#fff; border:1px solid var(--border-soft);
  border-radius:var(--radius-card); padding:1.5em;
  box-shadow:var(--shadow-card-soft);
}
.white_box, .ah-white-box{
  background:#fff; border:1px solid var(--border-soft);
  padding:1.5em; border-radius:8px;
}
.ah-box-top-accent{ border-top:4px solid var(--border); }

/* Attention / note boxes */
.ah-box--attention{
  background:var(--warning-bg-soft); border:1px solid var(--warning-border);
  padding:1em; border-radius:6px;
}
.ah-box--success{
  background:var(--success-bg); border:1px solid #b6dca6;
  padding:1em; border-radius:6px;
}
.ah-box--info{
  background:var(--info-bg); border:1px solid var(--info-border-soft);
  padding:1em; border-radius:10px;
}
.ah-box--note{ background:var(--surface-tint-y); border:1px solid #f1e9a8; padding:1em; }

/* CTA frame (cta_box) — heavy red border + red banner heading */
.ah-cta-box{ border:5px solid var(--warning-border); padding:1.25em; border-radius:6px; }
.ah-cta-box__head{
  background:var(--ah-red); color:#fff; text-align:center;
  padding:.5em; font-weight:bold; font-size:22px; border-radius:4px; margin:0 0 .75em;
}

/* ---------- HEADINGS (section vocabulary) ---------------------------- */
.ah-h1{
  font-size:24px; font-weight:bold; padding:7px 12px; margin:0 0 .5em;
  border:1px solid #cfcfcf; background:var(--surface-grad);
}
.ah-h2{
  font-size:22px; font-weight:bold; margin:0 0 1em;
  padding:2px 0 2px 15px; border-left:8px solid var(--accent-blue);
}
.ah-h2--center{
  border:none; border-bottom:4px solid #dd032c; text-align:center;
  font-size:2em; padding:0 0 .25em; line-height:1.3;
}
.ah-h3{ font-size:18px; font-weight:bold; margin:0 0 1em; padding-left:20px; position:relative; }
.ah-h3::before{
  content:""; position:absolute; left:0; top:.55em;
  width:12px; height:6px; background:var(--accent-blue);
}

/* ---------- TABLES (pricing / spec) --------------------------------- */
.ah-table{ border-collapse:collapse; width:100%; line-height:1.3; }
.ah-table th, .ah-table td{ border:1px solid var(--border); padding:.75em; text-align:left; }
.ah-table thead th{ background:var(--ah-maroon); color:#fff; font-weight:bold; }
.ah-table tbody th{ background:var(--surface-th); font-weight:bold; }
.ah-table tbody td{ background:#fff; }

/* ---------- FORM FIELDS --------------------------------------------- */
.ah-field{ width:100%; box-sizing:border-box; font-size:16px; padding:.55em .6em;
  border:1px solid var(--border); border-radius:4px; font-family:var(--font-gothic); }
.ah-field:focus{ outline:none; border-color:var(--accent-blue); box-shadow:0 0 0 2px var(--info-bg); }
.ah-required{ display:inline-block; font-size:11px; background:var(--ah-maroon);
  color:#fff; padding:2px 7px; border-radius:2px; vertical-align:middle; }

/* ---------- BADGES / LABELS ----------------------------------------- */
.ah-badge{ display:inline-block; font-size:14px; font-weight:bold; color:#fff;
  background:var(--ah-red); padding:4px 10px; border-radius:4px; }
.ah-badge--green{ background:var(--success-btn); }
.ah-badge--blue{ background:var(--accent-blue); }
.ah-badge--ribbon{ background:var(--ah-red); }

/* ---------- LINK LISTS (arrow / circle bullet) ---------------------- */
.ah-linklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4em; }
.ah-linklist a{
  position:relative; padding:.25em .25em .25em 2em; width:fit-content;
  color:var(--link) !important; text-decoration:none; border-bottom:1px solid var(--link);
}
.ah-linklist a::before{
  content:""; position:absolute; left:0; top:.2em; width:1.4em; height:1.4em;
  background:var(--link); border-radius:50%; transition:transform .3s ease;
}
.ah-linklist a::after{
  content:""; position:absolute; left:.6em; top:.62em; width:.45em; height:.45em;
  border-left:1px solid #fff; border-top:1px solid #fff;
  transform:translateX(-50%) rotate(135deg);
}
.ah-linklist a:hover::before{ transform:translateX(2px); }

/* =====================================================================
   LINK & ANCHOR SYSTEM  (from the official parts template)
   Two roles, color-separated:
     • SITE links (別ページへ) = BLUE,  arrow points RIGHT  → .ah-links / .ah-box
     • IN-PAGE anchors (#へ)   = RED,   arrow points DOWN   → .ah-anker / .ah-box--anchor
   ===================================================================== */

/* ---- text link: site (blue, right arrow) — alias of .ah-linklist ---- */
.ah-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.3em; align-items:flex-start; }
.ah-links a{ position:relative; padding:.25em .25em .25em 2em; width:fit-content;
  color:var(--link) !important; text-decoration:none; border-bottom:1px solid var(--link); }
.ah-links a::before{ content:""; position:absolute; left:0; top:.2em; width:1.4em; height:1.4em;
  background:var(--link); border-radius:50%; transition:transform .3s ease; }
.ah-links a::after{ content:""; position:absolute; left:.58em; top:.62em; width:.45em; height:.45em;
  border-left:1px solid #fff; border-top:1px solid #fff; transform:translateX(-50%) rotate(135deg); }
.ah-links a:hover::before{ transform:translateX(2px); }

/* ---- text link: in-page anchor (red, down arrow) ---- */
.ah-anker{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4em; align-items:flex-start; }
.ah-anker a{ position:relative; padding:.25em .25em .25em 2em; width:fit-content;
  color:var(--ah-maroon) !important; text-decoration:none; border-bottom:1px solid var(--ah-maroon); }
.ah-anker a::before{ content:""; position:absolute; left:0; top:.2em; width:1.4em; height:1.4em;
  background:var(--ah-maroon); border-radius:50%; transition:transform .3s ease; }
.ah-anker a::after{ content:""; position:absolute; left:.7em; top:.5em; width:.45em; height:.45em;
  border-right:1px solid #fff; border-bottom:1px solid #fff; transform:translateX(-50%) rotate(45deg); }
.ah-anker a:hover::before{ transform:translateY(2px); }

/* ---- box link: solid (links_box) — right chevron, 3D press ---- */
.ah-box{ display:inline-flex; align-items:center; position:relative; top:0;
  background:var(--success-btn); color:#fff !important; text-decoration:none;
  font-weight:normal; padding:.6em 2.4em .6em 1.2em; border-radius:8px; transition:.15s; }
.ah-box::after{ content:""; position:absolute; right:.9em; top:50%; width:6px; height:6px;
  border-right:2px solid #fff; border-bottom:2px solid #fff; transform:translateY(-60%) rotate(-45deg); }
.ah-box:hover{ top:3px; }
.ah-box--blue{ background:var(--link); }
.ah-box--red{ background:var(--ah-red-strong); }
.ah-box--orange{ background:var(--accent-orange); }
.ah-box--gray{ background:#ccc; color:#222 !important; }
.ah-box--gray::after{ border-color:#222; }

/* ---- box link: outline (line_box) — white fill, colored rule ---- */
.ah-box--line{ background:#fff; border:1px solid var(--link); color:var(--link) !important; }
.ah-box--line::after{ border-color:var(--link); }
.ah-box--line:hover{ background:var(--link); color:#fff !important; top:0; }
.ah-box--line:hover::after{ border-color:#fff; }
.ah-box--line.ah-box--red{ border-color:var(--ah-maroon); color:var(--ah-maroon) !important; background:#fff; }
.ah-box--line.ah-box--red::after{ border-color:var(--ah-maroon); }
.ah-box--line.ah-box--red:hover{ background:var(--ah-maroon); color:#fff !important; }
.ah-box--line.ah-box--red:hover::after{ border-color:#fff; }

/* ---- anchor button (btn_ancher) — centered, DOWN chevron, red ---- */
.ah-box--anchor{ justify-content:center; text-align:center; padding:.6em 1.2em .9em;
  background:#fff; border:1px solid var(--ah-maroon); color:var(--ah-maroon) !important; }
.ah-box--anchor::after{ right:auto; left:50%; top:auto; bottom:.5em;
  border-color:var(--ah-maroon); transform:translateX(-50%) rotate(45deg); }
.ah-box--anchor.is-invert{ background:var(--ah-maroon); color:#fff !important; }
.ah-box--anchor.is-invert::after{ border-color:#fff; }

/* ---- big CTA section title (cta_title) — red top rule ---- */
.ah-cta-title{ border-top:5px solid var(--ah-red-bright); padding:1.2em 0 .25em;
  font-size:30px; font-weight:bold; text-align:center; line-height:1.4; margin:0; }

/* ---- contact CTA box (contact_red_box) — heavy red border ---- */
.ah-contact-box{ border:3px solid var(--ah-red-strong); border-radius:6px; padding:1.5em; }
.ah-contact-box__title{ text-align:center; font-size:22px; font-weight:bold; color:var(--ah-maroon); margin:0 0 1em; }
.ah-contact-box__tel{ font-size:34px; font-weight:bold; color:var(--ah-maroon); display:flex; align-items:center; gap:10px; justify-content:center; }
.ah-contact-box__hours{ text-align:center; font-size:13px; color:var(--fg-sub); margin:.25em 0 0; }