@import "section-bg.generated.css";

/* ========================================
   Base / Variables
======================================== */
:root {
  --color-navy: #0b318f;
  --color-navy-deep: #041e5d;
  --color-navy-footer: #12183d;
  --color-navy-footer-box: #20254a;
  --color-yellow: #fff100;
  --color-yellow-faq: #fff9cc;
  --color-orange: #f08821;
  --color-green: #448f0b;
  --color-red: #dd4f4f;
  --color-alert: #b42318;
  --color-white: #ffffff;
  --color-text: #222222;
  --color-text-dark: #4f4f4f;
  --color-text-muted: #555555;
  --color-text-gray: #6b7280;
  --color-anxiety: #f0f5ff;
  --color-bubble: #fffdeb;
  --color-speaker: #e8eef9;
  --color-target: #fff8f1;
  --color-link: #37a5ff;
  --color-copy: #9aa3c7;

  --max-width-container: 375px;
  --max-width-inner: 343px;
  --frame-width: 375px;
  --pad-x: 16px;

  --font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  background: #baedff;
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.6;
  font-weight: 500;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
blockquote,
dl,
dt,
dd {
  margin: 0;
}

button {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.c_green { color: var(--color-green); }
.c_red { color: var(--color-red); }
.c_yellow { color: var(--color-yellow); }
.c_orange { color: var(--color-orange); }
.c_alert { color: var(--color-alert); }

/* ========================================
   Layout
======================================== */
.wrapper {
  width: 100%;
  max-width: var(--max-width-container);
  margin: 0 auto;
  overflow-x: hidden;
}

.lp {
  width: 100%;
  max-width: var(--frame-width);
  margin: 0 auto;
  background: var(--color-white);
  overflow-x: hidden;
}

.wrap {
  width: 100%;
  max-width: var(--max-width-inner);
  margin: 0 auto;
  padding-inline: 0;
}

/* ========================================
   Common components
======================================== */
.sec_title {
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  text-align: center;
  color: var(--color-navy);
}

.sec_title--white {
  color: var(--color-white);
  font-weight: 900;
  line-height: 29px;
}

.sec_title--dark {
  color: var(--color-red);
  font-size: 16px;
  line-height: 24px;
}

.sec_title--underline {
  position: relative;
  display: inline-block;
  width: 100%;
}

.sec_title--underline::after {
  content: "";
  display: block;
  width: 240px;
  height: 7px;
  margin: 4px auto 0;
  background: var(--color-yellow);
}

.title_mark {
  background-image: linear-gradient(var(--color-yellow), var(--color-yellow));
  background-repeat: no-repeat;
  background-size: 100% 7px;
  background-position: center 78%;
}

.sec_lead {
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  color: var(--color-navy);
}

.sec_lead--white {
  color: var(--color-white);
  font-size: 11px;
  line-height: 19px;
}

.sec_head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}

.mark {
  flex-shrink: 0;
  font-weight: 700;
  line-height: 1;
}

.mark--ng {
  color: #9ca3af;
  font-size: 14px;
  width: 1em;
}

.mark--ok {
  color: var(--color-navy);
  font-size: 12px;
  width: 1em;
}

.mark--star {
  color: var(--color-yellow);
  font-size: 10px;
  width: 1em;
}

.mark--check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-red);
  border-radius: 999px;
  color: var(--color-red);
  font-size: 11px;
  line-height: 1;
}

/* ========================================
   Header
======================================== */
.site_header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  background: var(--color-navy);
}

.site_header_label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.site_header_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  background: var(--color-white);
  color: var(--color-navy);
}

.site_header_lead {
  color: var(--color-yellow);
}

/* ========================================
   FV
======================================== */
.fv {
  width: 100%;
  background: var(--color-white);
}

.fv_title {
  margin: 0;
  line-height: 0;
}

.fv_visual {
  display: block;
  width: 100%;
  height: auto;
}

/* ========================================
   Anxiety
======================================== */
.sec_anxiety {
  padding: 30px 16px 50px;
  background-color: var(--color-anxiety);
  background-image: url("../img/anxiety_bottom_bg.webp");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
}

.sec_anxiety .wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.anxiety_head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}

.anxiety_title {
  color: var(--color-navy);
  font-size: 20px;
  font-weight: 900;
  line-height: 30px;
  text-align: center;
}

.anxiety_title_mark {
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--color-yellow), var(--color-yellow));
  background-repeat: no-repeat;
  background-size: 100% 7px;
  background-position: center 78%;
}

.anxiety_lead {
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.anxiety_card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 15px 20px;
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(26, 36, 89, 0.3);
}

.anxiety_person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.anxiety_face {
  position: relative;
  z-index: 0;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  object-fit: cover;
}

.anxiety_label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: -18px;
  padding: 5px 30px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.anxiety_label--fill {
  background: var(--color-navy);
  color: var(--color-yellow);
}

.anxiety_label--outline {
  background: var(--color-white);
  border: 1px solid var(--color-navy);
  color: var(--color-navy);
}

.bubble_list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 11px;
  width: 100%;
}

.bubble {
  position: relative;
  padding: 13px 10px;
  background: var(--color-bubble);
  border: 1px solid var(--color-navy);
  border-radius: 5px;
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.bubble--left {
  border-left: 0;
  box-shadow: -1px 0 0 0 var(--color-navy);
}

.bubble--right {
  border-right: 0;
  box-shadow: 1px 0 0 0 var(--color-navy);
}

.bubble::before {
  content: "";
  position: absolute;
  top: 10px;
  width: 13px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 17px;
}

.bubble--left::before {
  left: -11px;
  background-image: url("../img/anxiety_deco_left.svg");
}

.bubble--right::before {
  right: -11px;
  background-image: url("../img/anxiety_deco_right.svg");
}

/* ========================================
   Risks
======================================== */
.sec_risks {
  position: relative;
  padding: 32px 16px 16px;
  background: var(--color-navy);
}

.sec_risks .wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.risk_cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.risk_card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 16px 20px;
  background-color: var(--color-white);
  background-image:
    url("../img/card_deco_right_top.png"),
    url("../img/card_deco_left_bottom.png");
  background-repeat: no-repeat, no-repeat;
  background-position: right top, left bottom;
  background-size: 21px 21px, 21px 21px;
  overflow: hidden;
}

.risk_icon {
  width: 47px;
  height: 47px;
}

.risk_icon--stack {
  position: relative;
  display: block;
  width: 47px;
  height: 47px;
}

.risk_icon--stack > img:first-child {
  width: 47px;
  height: 47px;
}

.risk_icon_inner {
  position: absolute;
  top: 8px;
  left: 9px;
  width: 30px;
  height: 30px;
}

.risk_card_title {
  width: 100%;
  max-width: 300px;
  color: var(--color-navy);
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.risk_card_text {
  width: 100%;
  max-width: 300px;
  color: var(--color-navy);
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
}

.risk_note {
  padding: 14px;
  border-radius: 8px;
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* ========================================
   Why ALSOK
======================================== */
.sec_why {
  padding: 50px 16px 20px;
  background-color: var(--color-yellow);
  background-image: url("../img/why_top_bg.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

.sec_why .wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.compare_card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 10px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-text-gray);
}

.compare_card--good {
  border-color: var(--color-navy);
}

.compare_label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 3px 28px;
  border-radius: 0 0 5px 5px;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.compare_label--gray {
  background: var(--color-text-gray);
}

.compare_label--navy {
  background: var(--color-navy);
}

.compare_diff_title {
  color: var(--color-navy);
  font-size: 15px;
  font-weight: 900;
  line-height: 22px;
  text-align: center;
}

.compare_list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.compare_list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-text-gray);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.compare_list--good li {
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
}

/* ========================================
   Solutions
======================================== */
.sec_solutions {
  padding: 30px 16px;
  background: var(--color-white);
}

.sec_solutions .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}

.sec_solutions .sec_title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--color-navy);
}

.solution_list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  max-width: 333px;
}

.solution_card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.solution_num {
  position: absolute;
  top: -14px;
  left: 11px;
  width: 37px;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15));
}

.solution_card_title {
  padding: 5px 10px 5px 60px;
  background: var(--color-navy);
  border-radius: 10px 10px 0 0;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.solution_card_text {
  padding: 15px;
  background: var(--color-white);
  border-radius: 0 0 10px 10px;
  color: #222222;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

/* ========================================
   Speaker
======================================== */
.sec_speaker {
  padding: 32px 16px;
  background: var(--color-speaker);
}

.sec_speaker .wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sec_speaker .sec_title {
  font-size: 16px;
  line-height: 24px;
}

.speaker_card {
  background: var(--color-white);
  border: 1px solid var(--color-navy);
  border-radius: 12px;
  overflow: hidden;
}

.speaker_top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 10px;
}

.speaker_profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}

.speaker_achievements {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

.speaker_photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.speaker_role {
  display: inline-flex;
  padding: 4px 10px;
  background: var(--color-yellow);
  border: 1px solid var(--color-navy);
  border-radius: 999px;
  color: var(--color-navy);
  font-size: 6px;
  font-weight: 700;
}

.speaker_name {
  color: var(--color-navy);
  font-size: 16px;
  font-weight: 700;
}

.speaker_org {
  color: var(--color-text-muted);
  font-size: 8px;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
}

.speaker_achievements_title {
  padding: 5px 0;
  border-bottom: 1px solid var(--color-navy);
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.speaker_achievements_list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.speaker_achievements_list li {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  color: var(--color-text);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
}

.speaker_message {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 10px 10px;
  padding: 10px;
  border: 1px solid var(--color-navy);
}

.speaker_message_lead {
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
}

.speaker_message_body {
  color: var(--color-text);
  font-size: 10px;
  font-weight: 500;
  line-height: 18px;
}

.speaker_book {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 7px 10px;
  background: var(--color-navy);
}

.speaker_book_img {
  width: 67px;
  height: auto;
  flex-shrink: 0;
}

.speaker_book_meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.speaker_book_label {
  color: var(--color-yellow);
  font-size: 10px;
  font-weight: 700;
}

.speaker_book_title {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
}

.speaker_book_pub {
  color: #c5cee8;
  font-size: 9px;
  font-weight: 500;
}

.speaker_note {
  color: #374151;
  font-size: 7px;
  font-weight: 400;
  line-height: 12px;
  text-align: center;
}

/* ========================================
   Overview
======================================== */
.sec_overview {
  padding: 32px 16px;
  background: var(--color-white);
}

.sec_overview .wrap {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.overview_org {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.overview_org_badge {
  display: inline-flex;
  padding: 2px 7px;
  background: var(--color-navy);
  border-radius: 2px;
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
}

.overview_org_name {
  color: var(--color-navy);
  font-size: 17px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}

.overview_org_lead {
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 13px;
  text-align: center;
}

.overview_box {
  border: 1px solid var(--color-navy);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-white);
}

.overview_box_title {
  padding: 12px;
  background: var(--color-navy);
  color: var(--color-yellow);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.overview_dl {
  display: flex;
  flex-direction: column;
}

.overview_row {
  display: flex;
  align-items: stretch;
  border-top: 1px solid #dbe3f5;
}

.overview_row:first-of-type {
  border-top: 0;
}

.overview_row dt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  flex-shrink: 0;
  padding: 12px 8px;
  background: #eef3ff;
  color: var(--color-navy);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.overview_row dd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex: 1;
  padding: 12px;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.overview_dd_main {
  color: var(--color-navy);
  font-size: 15px;
  font-weight: 700;
}

.overview_dd_inline {
  align-items: baseline;
  gap: 8px !important;
}

.overview_free {
  display: inline-flex;
  padding: 3px 10px;
  background: var(--color-yellow);
  border: 1px solid var(--color-navy);
  border-radius: 4px;
  color: var(--color-navy);
  font-size: 14px;
  font-weight: 700;
}

.overview_dd_alert {
  color: var(--color-alert);
}

.overview_map {
  display: block;
  width: 100%;
  max-width: 239px;
  height: 100px;
  margin-top: 6px;
  border: 0;
  border-radius: 6px;
}

/* ========================================
   FAQ
======================================== */
.sec_faq {
  padding: 32px 16px;
  background: var(--color-yellow-faq);
}

.sec_faq .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.sec_faq .sec_title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
}

#faq .faq_dl {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 100%;
}

#faq .faq_dl .inner {
  border-radius: 5px;
  box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

#faq .faq_dl dt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px 10px 48px;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

#faq .faq_dl dt::before {
  content: "Q";
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

#faq .faq_dl .btn {
  position: relative;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-left: auto;
}

#faq .faq_dl .btn span,
#faq .faq_dl .btn span::before,
#faq .faq_dl .btn span::after {
  display: block;
}

#faq .faq_dl .btn span::before,
#faq .faq_dl .btn span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-white);
  transform: translate(-50%, -50%);
}

#faq .faq_dl .btn span::before {
  width: 12px;
  height: 2px;
}

#faq .faq_dl .btn span::after {
  width: 2px;
  height: 12px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#faq .faq_dl dt.highlight .btn span::after {
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0);
}

#faq .faq_dl dd {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

#faq .faq_dl dt.highlight + dd {
  grid-template-rows: 1fr;
}

#faq .faq_dl .faq_a_clip {
  overflow: hidden;
  min-height: 0;
}

#faq .faq_dl .faq_a_panel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 20px;
  background: var(--color-white);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

#faq .faq_dl .faq_a_panel::before {
  content: "A";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background: var(--color-yellow);
  border-radius: 4px;
  color: var(--color-navy);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

/* ========================================
   Target / CTA
======================================== */
.sec_target {
  padding: 28px 16px;
  background: var(--color-target);
}

.sec_target .wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.target_box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-red);
  border-radius: 10px;
}

.target_box_lead {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(221, 79, 79, 0.41);
  color: var(--color-red);
  font-size: 12px;
  font-weight: 700;
  line-height: 19px;
}

.target_list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.target_list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-dark);
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}

.target_urgency {
  color: var(--color-text-dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.cta_phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  background: var(--color-navy);
  border: 2px solid var(--color-yellow);
  border-radius: 10px;
}

.cta_phone_lead {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
}

.cta_phone_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 12px;
  background: var(--color-white);
  border-radius: 8px;
}

.cta_phone_tip {
  display: inline-flex;
  padding: 4px 10px;
  background: var(--color-navy);
  border-radius: 999px;
  color: var(--color-yellow);
  font-size: 10px;
  font-weight: 700;
}

.cta_phone_num {
  color: var(--color-navy);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.2;
  transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .cta_phone_num:hover {
    opacity: 0.7;
  }
}

.cta_phone_num:active {
  opacity: 0.7;
}

.cta_phone_hours {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
}

/* ========================================
   Footer
======================================== */
.site_footer {
  padding: 24px 16px;
  background: var(--color-navy-footer);
}

.site_footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}

.footer_heading {
  color: var(--color-white);
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
}

.footer_dl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  background: var(--color-navy-footer-box);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 300;
  line-height: 17px;
}

.footer_dl div {
  display: flex;
  gap: 0;
}

.footer_dl dt::after {
  content: "：";
}

.footer_privacy a {
  color: var(--color-link);
  font-size: 10px;
  font-weight: 500;
  text-decoration: underline;
}

.footer_copy {
  color: var(--color-copy);
  font-size: 10px;
  font-weight: 500;
}

/* ========================================
   PC aside (FV image + Float CTA)
======================================== */
.pc_aside {
  display: contents;
}

.pc_aside_fv {
  display: none;
}

/* ========================================
   Float CTA
======================================== */
.float_cta {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--frame-width);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.float_cta.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.float_cta_visual {
  position: relative;
  display: block;
  overflow: hidden;
  transition: transform 0.2s ease, filter 0.2s ease;
  transform-origin: center bottom;
}

.float_cta_visual::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0) 65%,
    transparent 100%
  );
  transform: translateX(-140%) skewX(-18deg);
  animation: float_cta_shine 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes float_cta_shine {
  0%,
  15% {
    transform: translateX(-140%) skewX(-18deg);
  }
  45%,
  100% {
    transform: translateX(280%) skewX(-18deg);
  }
}

.float_cta img {
  display: block;
  width: 100%;
  height: auto;
}

@media (hover: hover) and (pointer: fine) {
  .float_cta:hover .float_cta_visual {
    transform: translateY(2px) scale(1.02);
    filter: drop-shadow(0 1px 0 rgba(11, 49, 143, 0.25));
  }

  .float_cta:active .float_cta_visual {
    transform: translateY(4px) scale(1.01);
    filter: drop-shadow(0 0 0 rgba(11, 49, 143, 0));
  }
}

@media (prefers-reduced-motion: reduce) {
  .float_cta_visual::after {
    animation: none;
    display: none;
  }
}

@media screen and (min-width: 1001px) {
  body {
    padding-bottom: 0;
  }

  .pc_aside {
    --pc-aside-gap: clamp(16px, 8vw, 100px);
    position: fixed;
    z-index: 200;
    top: 50%;
    bottom: auto;
    left: calc(50% + (var(--frame-width) / 2) + var(--pc-aside-gap));
    right: auto;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: min(280px, calc(50vw - (var(--frame-width) / 2) - var(--pc-aside-gap) - 16px));
    padding: 0;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }

  .pc_aside.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .pc_aside_fv {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(11, 49, 143, 0.12);
  }

  .float_cta {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .float_cta.is-hidden {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .float_cta img {
    width: 100%;
    max-width: none;
  }
}