/* ============================================================
   RESET
   ============================================================ */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:rgba(0,0,0,0)}body{line-height:1}article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}a{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:rgba(0,0,0,0);text-decoration:none}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}*{box-sizing:border-box;position:relative}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* ベース */
  --paper:        #eef6fa;    /* ページ背景 — ごく薄いブルーグレー */
  --paper-card:   #ffffff;    /* カード背景 */
  --paper-tint:   #dff0f6;    /* 薄いアクア塗り */

  /* メインアクセント — マンガ背景の青緑系 */
  --aqua:         #3cb5c8;
  --aqua-deep:    #1e8fa6;
  --aqua-pale:    #dff0f6;

  /* レガシー（CM/FAQ/NEWS専用） */
  --teal:         #3ab5c0;
  --teal-dark:    #1a6e7a;

  /* 暖色 — FAQレガシーCSSのみで使用（LP本体では不使用） */
  --amber:        #f5a420;
  --amber-deep:   #d4840c;

  /* インク（テキスト） — ネイビー系 */
  --ink:          #1a2e38;
  --ink-mid:      #3a6070;
  --ink-light:    #7ab0c0;

  /* ボーダー */
  --border:       #b8d5e2;
  --border-dark:  #7aaabb;

  /* シャドウ */
  --shadow-cool:  rgba(26,46,56,.08);

  /* レイアウト */
  --max-w:        120rem;
  --gutter-sp:    2rem;
  --gutter-tb:    3rem;
}

/* ============================================================
   BASE
   ============================================================ */

html {
  font-size: 10px;
  background-color: var(--paper);
  margin-left: auto;
  margin-right: auto;
  min-height: 100%;
}

body {
  font-family: "M PLUS Rounded 1c", "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  font-feature-settings: "palt";
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ink);
  background-color: var(--paper);
  min-block-size: 100svb;
}
@media (min-width: 768px)  { body { font-size: 1.5rem; } }
@media (min-width: 1080px) { body { font-size: 1.6rem; } }

input {
  appearance: none;
  margin: 0; padding: 0; width: 100%;
  font-size: 16px; color: inherit; font-family: inherit;
  background: transparent; border: none; border-radius: 0;
}
input:focus, textarea:focus { border: none; box-shadow: none; outline: none; }
input::placeholder { color: #ccc; }

textarea {
  appearance: none;
  margin: 0; padding: 0; width: 100%; height: 100px;
  font-size: 16px; color: inherit; font-family: inherit;
  background: transparent; border: none; border-radius: 0;
}

input, select, textarea {
  font-family: "M PLUS Rounded 1c", "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

a { color: var(--ink); }

h1, h2, h3, h4, h5, h6 {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: normal;
}

img { max-width: 100%; vertical-align: middle; height: auto; line-height: 1; }
sub { font-size: .6em; vertical-align: sub; }
sup { font-size: .6em; vertical-align: super; }

button {
  padding: 0; font-family: inherit;
  appearance: none; cursor: pointer;
  background: transparent; border: none;
}

:root { scrollbar-gutter: stable; }
:root:has(:modal) { overflow: clip; }
:where(dialog:not([open],[popover]),[popover]:not(:popover-open)) { display: none !important; }

dialog {
  position: fixed; inset: 0;
  overscroll-behavior-block: contain;
  transition: display 300ms ease-out, overlay 300ms ease-out, opacity 300ms ease-out;
  transition-behavior: allow-discrete;
}
dialog::backdrop {
  background: oklch(from black l c h / 50%);
  backdrop-filter: blur(4px);
  transition: opacity 300ms ease-out;
}
@starting-style { dialog:modal, dialog:modal::backdrop { opacity: 0; } }
dialog:not(:modal), dialog:not(:modal)::backdrop { opacity: 0; }

.bl_modal {
  --_max-width: 64rem;
  --_gutter:    2rem;
  position: fixed; inset: 0;
  overscroll-behavior-block: contain;
  max-inline-size: calc(min(var(--_max-width), 100%) - var(--_gutter) * 2);
  max-block-size: calc(100% - var(--_gutter) * 2);
  margin: revert; padding: 1.5rem 1rem;
  border: unset; border-radius: .9rem;
  box-shadow: 0 4px 6px oklch(from black l c h / .1);
  background: #fff; color: var(--ink); outline: none;
  transition: display 300ms ease-in-out, overlay 300ms ease-in-out, opacity 300ms ease-in-out;
  transition-behavior: allow-discrete;
}
.bl_modal::backdrop { background: oklch(from black l c h / .5); transition: opacity 300ms ease-in-out; }
.bl_modal:not(:modal), .bl_modal:not(:modal)::backdrop { opacity: 0; display: none; }
.bl_modal_inner_button_wrap { margin-top: 2rem; display: grid; place-content: center; }
.bl_modal_inner_button {
  background: var(--aqua); color: #fff;
  text-align: center; font-weight: 700;
  padding: .5rem 3rem; border-radius: 9999px;
  transition: background .3s ease-out;
}
.bl_modal_inner_button.hover, .bl_modal_inner_button:hover { background: var(--aqua-deep); }
.bl_modal_inner_button:focus { outline: none; }

/* ============================================================
   LAYOUT
   ============================================================ */

.ly_inner {
  width: 100%;
  max-width: var(--max-w);
  padding: 0 var(--gutter-sp);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) { .ly_inner { padding: 0 var(--gutter-tb); } }

/* ============================================================
   UTILITIES
   ============================================================ */

.is_hidden { display: none; }
.is_sp_hidden { display: none !important; }
@media (min-width: 768px) { .is_sp_hidden { display: block !important; } }

/* ============================================================
   SECTION TITLE
   ============================================================ */

.bl_secTitle_txt { font-weight: 700; }
.bl_secTitle_txt.el_center { text-align: center; }

.bl_secTitle_txt .el_en {
  display: block; font-size: .95rem; font-weight: 700;
  letter-spacing: .38em; color: var(--aqua-deep); margin-bottom: .7rem;
}

.bl_secTitle_txt .el_jp {
  display: inline-block; font-size: 2.6rem; font-weight: 700;
  color: var(--ink); line-height: 1.3; letter-spacing: .05em;
  padding-bottom: .25em; border-bottom: 4px solid var(--aqua);
}
.bl_secTitle_txt .el_jp sup { font-size: .5em; vertical-align: super; display: inline-block; }

/* dark bg variant */
.bl_secTitle_txt.el_white .el_jp { color: #fff; border-bottom-color: var(--aqua); }
.bl_secTitle_txt.el_white .el_en { color: rgba(255,255,255,.5); }

@media (min-width: 768px) {
  .bl_secTitle_txt .el_jp { font-size: 3.2rem; }
  .bl_secTitle_txt .el_en { font-size: 1rem; }
}

/* ============================================================
   HEADER
   ============================================================ */

.bl_hdr {
  position: fixed; top: 0; left: 0;
  width: 100%;
  background: var(--ink);
  z-index: 999;
}

.bl_hdr_inner {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--max-w);
  margin-left: auto; margin-right: auto;
  padding-left: var(--gutter-sp);
  min-height: 5.6rem;
}
@media (min-width: 768px) { .bl_hdr_inner { min-height: 6rem; } }

.bl_hdr_inner_logo_link {
  display: flex; align-items: center;
  padding: 1rem 0; flex-shrink: 0;
}
.bl_hdr_inner_logo_link img { display: block; width: 100%; max-width: 13rem; }
.bl_hdr_inner_logo_link:focus { outline: none; }

.bl_hdr_inner_wrap { display: flex; margin-left: auto; }
.bl_hdr_inner_lgNav  { display: none; }

/* ハンバーガーボタン */
.bl_hdr_inner_menu {
  width: 5.6rem; height: 5.6rem;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  cursor: pointer;
}
.bl_hdr_inner_menu_bar {
  display: block; width: 2rem; height: 1.4rem;
  background: linear-gradient(#fff, #fff) center / 100% 1px no-repeat transparent;
  transition: .3s ease-out;
}
.bl_hdr_inner_menu_bar::before,
.bl_hdr_inner_menu_bar::after {
  content: ""; display: block; width: 100%; height: 1px;
  background: #fff; position: absolute;
  transition: .3s ease-out; transform-origin: center;
}
.bl_hdr_inner_menu_bar::before { top: 0; }
.bl_hdr_inner_menu_bar::after  { bottom: 0; }
.bl_hdr_inner_menu_txt {
  display: block; font-size: 1rem; font-weight: 700;
  color: #fff; margin-top: .6rem; line-height: 1;
}

/* open 状態 → ✕ アニメーション */
.bl_hdr_navBody[open] .bl_hdr_inner_menu .bl_hdr_inner_menu_bar { background: none; }
.bl_hdr_navBody[open] .bl_hdr_inner_menu .bl_hdr_inner_menu_bar::before { top: 50%; transform: rotate(135deg); }
.bl_hdr_navBody[open] .bl_hdr_inner_menu .bl_hdr_inner_menu_bar::after  { top: 50%; transform: rotate(-135deg); }

/* モバイルナビ（dialog） */
.bl_hdr_navBody {
  width: 100%; max-width: none;
  background: var(--ink);
}
.bl_hdr_navBody:not(:modal), .bl_hdr_navBody:not(:modal)::backdrop { opacity: 0; }
.bl_hdr_navBody::backdrop { background: var(--ink); transition: opacity 300ms ease-out; }
.bl_hdr_navBody_inner { padding: 2rem var(--gutter-sp); }
.bl_hdr_navBody_inner_list_item {
  border-top: 1px solid rgba(255,255,255,.15);
}
.bl_hdr_navBody_inner_list_item:last-child { border-bottom: 1px solid rgba(255,255,255,.15); }
.bl_hdr_navBody_inner_list_item_link {
  display: block; color: #fff; font-size: 1.8rem; padding: 1.8rem 0;
}
.bl_hdr_navBody_inner_list_item_link sup { display: inline-block; vertical-align: super; font-size: .7em; }

/* PC ナビ（1080px〜） */
@media (min-width: 1080px) {
  .bl_hdr_inner {
    padding-left: var(--gutter-tb);
    gap: 3rem;
  }
  .bl_hdr_inner_logo_link img { max-width: 20rem; }
  .bl_hdr_inner_wrap  { display: none; }
  .bl_hdr_inner_lgNav {
    display: flex; align-items: stretch;
    justify-content: flex-end; gap: 0; flex: 1;
  }
  .bl_hdr_inner_lgNav_list {
    display: flex; flex-wrap: nowrap;
    justify-content: flex-end; align-items: center;
    gap: 0 2rem; flex: 1;
  }
  .bl_hdr_inner_lgNav_list_item_link {
    display: block; padding: 0 .2rem;
    color: #fff; font-weight: 700; font-size: 1.4rem;
    transition: opacity .25s ease-out;
  }
  .bl_hdr_inner_lgNav_list_item_link sup { display: inline-block; vertical-align: super; font-size: .7em; }
  .bl_hdr_inner_lgNav_list_item_link:hover { opacity: .65; }
  /* 採用ボタン */
  .bl_hdr_inner_lgNav_cv {
    display: flex; align-items: center;
    background: var(--aqua);
    color: #fff;
    border-left: none;
    font-weight: 700; font-size: 1.4rem;
    padding: 0 3rem;
    transition: background .25s ease-out;
    white-space: nowrap;
  }
  .bl_hdr_inner_lgNav_cv:hover { background: var(--aqua-deep); }
}
@media (min-width: 1200px) {
  .bl_hdr_inner_lgNav_list { gap: 0 3rem; }
  .bl_hdr_inner_lgNav_list_item_link { font-size: 1.5rem; }
}

/* バックボタン（アーカイブページ） */
.bl_hdr_inner_backBtn {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.12);
  color: #fff; font-weight: 700;
  border-left: 1px solid rgba(255,255,255,.2);
  padding: 0 2rem;
  transition: background .25s ease-out;
}
.bl_hdr_inner_backBtn:hover { background: rgba(255,255,255,.22); }
.bl_hdr_inner_backBtn .el_txt,
.bl_hdr_inner_backBtn .el_icon { display: block; line-height: 1; }
.bl_hdr_inner_backBtn .el_icon img { filter: invert(1); }

/* ============================================================
   FIXED SNS BUTTON
   ============================================================ */

.bl_fixedSns {
  position: fixed;
  /* ヘッダー(5.6rem) + sticky subnav(約4.5rem) + バッファ(1.9rem) = 12rem */
  top: 12rem;
  right: 1.5rem;
  z-index: 9;
}

.bl_fixedSns_btn {
  display: grid; align-content: center; justify-items: center; gap: .5rem;
  width: 3rem; height: 11rem;
  background: var(--ink);
  border-radius: 9999px; overflow: hidden;
  box-shadow: 2px 2px 0 var(--aqua);
}
.bl_fixedSns_btn .el_txt { display: block; }
.bl_fixedSns_btn .el_txt img { width: 1.2rem; height: auto; filter: invert(1) brightness(10); }
.bl_fixedSns_btn .el_icon { display: block; width: 1.5rem; height: 1.5rem; }
.bl_fixedSns_btn .el_icon img { width: 1.5rem; height: 1.5rem; filter: invert(1) brightness(10); }
.bl_fixedSns_btn + .bl_fixedSns_btn { margin-top: 1rem; }

@media (min-width: 768px) {
  /* ヘッダー(6rem) + sticky subnav(約5.4rem) + バッファ(1.6rem) = 13rem */
  .bl_fixedSns { top: 13rem; right: 2rem; }
  .bl_fixedSns_btn {
    width: 3.6rem; height: 14rem;
    transition: background .3s ease-out, box-shadow .3s ease-out;
  }
  .bl_fixedSns_btn:hover, .bl_fixedSns_btn.hover {
    background: var(--aqua);
    box-shadow: 2px 2px 0 var(--aqua-deep);
  }
  .bl_fixedSns_btn:hover .el_txt img,
  .bl_fixedSns_btn:hover .el_icon img,
  .bl_fixedSns_btn.hover .el_txt img,
  .bl_fixedSns_btn.hover .el_icon img { filter: none; }
  .bl_fixedSns_btn .el_txt img { width: 1.3rem; }
  .bl_fixedSns_btn .el_icon { width: 1.8rem; height: 1.8rem; }
  .bl_fixedSns_btn .el_icon img { width: 1.8rem; height: 1.8rem; }
}

@media (min-width: 1080px) {
  /* subnavがdisplay:noneになるためheader直下に戻す */
  .bl_fixedSns { top: 8rem; }
}
@media (min-width: 1260px) {
  .bl_fixedSns { right: calc(50vw - 57rem); }
}

/* ============================================================
   MAIN VISUAL (MV / FV)
   ============================================================ */

.bl_mv {
  margin-top: 5.6rem;
  background: linear-gradient(160deg, #eaf7fc 0%, #c8eaf5 50%, #a4d8ef 100%);
  border-bottom: 3px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* SP: テキスト → キャラクター の縦並び */
.bl_mv_body {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 2rem;
  padding: 3.5rem var(--gutter-sp) 2.5rem;
  width: 100%;
}

.bl_mv_title {
  display: inline-block;
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--aqua);
  padding: .3em 1em;
  letter-spacing: .1em;
  line-height: 1.3;
}
.bl_mv_title sup { display: inline-block; font-size: .5em; vertical-align: super; }

.bl_mv_copy {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink-mid);
  line-height: 1.9;
  letter-spacing: .06em;
}

/* 登録商標注記 */
.bl_mv_note {
  font-size: 1.1rem;
  color: var(--ink-light);
  text-align: center;
  line-height: 1.6;
  letter-spacing: .02em;
  opacity: .85;
}

.bl_mv_cta {
  display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center;
}

.bl_mv_cta_primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff;
  font-weight: 700; font-size: 1.7rem;
  padding: .9em 2.4em; border-radius: 9999px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--aqua);
  transition: background .25s ease-out, transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.bl_mv_cta_primary:hover { background: var(--ink-mid); transform: translateY(-2px); box-shadow: 3px 5px 0 var(--aqua); }

.bl_mv_cta_secondary {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--ink);
  font-weight: 700; font-size: 1.7rem;
  padding: .9em 2.4em; border-radius: 9999px;
  border: 2px solid var(--border-dark);
  box-shadow: 3px 3px 0 var(--shadow-cool);
  transition: background .25s ease-out, transform .2s ease;
  white-space: nowrap;
}
.bl_mv_cta_secondary:hover { background: var(--aqua-pale); transform: translateY(-2px); }

.bl_mv_xlink {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--ink-mid); font-size: 1.3rem; font-weight: 700;
  opacity: .75; transition: opacity .2s ease;
}
.bl_mv_xlink:hover { opacity: 1; }
.bl_mv_xlink img { width: 1.4rem; height: 1.4rem; }

/* キャラクター画像 */
.bl_mv_img {
  display: block;
  width: 72%;
  max-width: 26rem;
  margin: 0 auto;
}
.bl_mv_img img { display: block; width: 100%; height: auto; }

/* PC (768px+): テキスト左 / キャラクター右 */
@media (min-width: 768px) {
  .bl_mv {
    margin-top: 6rem;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-height: 40rem;
    max-height: 52rem;
    padding: 0 var(--gutter-tb);
    gap: 3rem;
    overflow: hidden;
  }
  .bl_mv_body {
    flex: 1;
    align-items: flex-start;
    text-align: left;
    padding: 3rem 0 3rem;
    gap: 2.5rem;
  }
  .bl_mv_img {
    flex-shrink: 0;
    width: 34rem;
    max-width: 34rem;
    margin: 0;
    align-self: flex-end;
  }
  .bl_mv_title { font-size: 4.4rem; }
  .bl_mv_copy { font-size: 1.8rem; }
  .bl_mv_cta { justify-content: flex-start; }
  .bl_mv_cta_primary, .bl_mv_cta_secondary { font-size: 1.9rem; }
}
@media (min-width: 1080px) {
  .bl_mv { gap: 5rem; }
  .bl_mv_img { width: 40rem; max-width: 40rem; }
  .bl_mv_title { font-size: 5.2rem; }
}

/* ============================================================
   INTRO NAV — スクロール目次チップ（sticky）
   ============================================================ */

.bl_intro {
  position: sticky;
  top: 5.6rem;
  z-index: 99;
  background: rgba(238,246,250,.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px var(--shadow-cool);
}

.bl_intro_list {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--gutter-sp);
}
.bl_intro_list::-webkit-scrollbar { display: none; }

.bl_intro_list_item_link {
  display: block;
  white-space: nowrap;
  padding: 1.2rem 1.4rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink-mid);
  border-bottom: 2.5px solid transparent;
  transition: color .2s ease, border-bottom-color .2s ease;
}
.bl_intro_list_item_link:hover,
.bl_intro_list_item_link.hover { color: var(--aqua-deep); border-bottom-color: var(--aqua); }
.bl_intro_list_item_link--ext::after { content: " ↗"; font-size: .85em; opacity: .6; }

@media (min-width: 768px) {
  .bl_intro { top: 6rem; }
  .bl_intro_list { padding: 0 var(--gutter-tb); }
  .bl_intro_list_item_link { font-size: 1.5rem; padding: 1.5rem 2rem; }
}
@media (min-width: 1080px) { .bl_intro { display: none; } }

/* ============================================================
   ANCHOR SCROLL OFFSETS
   ============================================================ */

#anchor_story,
#anchor_profile,
#anchor_manga { scroll-margin-top: 10rem; }
@media (min-width: 768px) {
  #anchor_story, #anchor_profile, #anchor_manga { scroll-margin-top: 12rem; }
}
@media (min-width: 1080px) {
  #anchor_story, #anchor_profile, #anchor_manga { scroll-margin-top: 6rem; }
}

/* ============================================================
   STORY
   ============================================================ */

.bl_story {
  background: var(--paper);
  border-top: 3px solid var(--border);
  position: relative;
  padding: 6rem 0 7rem;
  overflow: hidden; /* 装飾画像のはみ出し防止 */
}

.bl_story .bl_secTitle_txt { position: relative; z-index: 2; }
.bl_story .bl_secTitle_txt sup { display: inline-block; vertical-align: super; font-size: .7em; }

/* テキストブロック */
.bl_story_inner_txt {
  position: relative; z-index: 2;
  margin-top: 3rem;
  text-align: center;
  line-height: 2.2;
  letter-spacing: .04em;
  font-size: 1.45rem;
  color: var(--ink-mid);
  word-break: auto-phrase;
}
/* 段落間スペース */
.bl_story_inner_txt p + p {
  margin-top: 2.2rem;
  padding-top: 2rem;
  border-top: 1px dashed var(--border);
}

/* 装飾画像: セクション四隅に小さく配置、テキストと干渉しない */
.bl_story_img { position: absolute; opacity: .55; pointer-events: none; }
.bl_story_img.el_01 { width: 13vw; top: 3rem; left: 0; }
.bl_story_img.el_02 { width: 13vw; bottom: 3rem; right: 0; }

@media (min-width: 768px) {
  .bl_story { padding: 8rem 0 10rem; }
  .bl_story_inner_txt { font-size: 1.6rem; line-height: 2.2; margin-top: 4rem; }
  .bl_story_img.el_01 { width: 8vw; max-width: 10rem; top: 3rem; }
  .bl_story_img.el_02 { width: 8vw; max-width: 11rem; bottom: 3rem; }
}
@media (min-width: 1080px) {
  .bl_story { padding: 10rem 0 12rem; }
  .bl_story_img.el_01 { width: 8rem; max-width: 8rem; top: 4rem; }
  .bl_story_img.el_02 { width: 9rem; max-width: 9rem; bottom: 4rem; }
}

/* ============================================================
   PROFILE
   ============================================================ */

.bl_profile {
  position: relative;
  padding: 8rem 0;
  background: var(--aqua-pale);
  border-top: 3px solid var(--border);
  border-bottom: 3px solid var(--border);
}

.bl_profile_inner { position: relative; z-index: 1; }

.bl_profile_col { margin-top: 4rem; }

.bl_profile_slider { display: flex; justify-content: center; }
.bl_profile_slider .bl_profile_slider_item {
  background: #fff;
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--aqua);
  border-radius: 12px;
  display: grid; place-items: center;
  padding: 2rem;
  width: 100%; max-width: 32rem;
  overflow: hidden;
}
.bl_profile_slider .bl_profile_slider_item img { display: block; }

.bl_profile_detail { margin-top: 3rem; }
.bl_profile_detail_ttl {
  color: var(--ink);
  font-size: 2.6rem; font-weight: 700;
  line-height: 1.2; word-break: auto-phrase;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--border-dark);
  margin-bottom: 2rem;
}
.bl_profile_detail_ttl sup { font-size: .5em; vertical-align: super; }

.bl_profile_detail_desc {
  margin-bottom: 2rem;
  padding: 1.6rem 1.8rem 1.6rem 2rem;
  background: #fff;
  border: 2px solid var(--border);
  border-left: 4px solid var(--aqua);
  border-radius: 10px;
}
.bl_profile_detail_desc p {
  color: var(--ink-mid);
  font-size: 1.4rem;
  line-height: 1.95;
}
.bl_profile_detail_desc p + p { margin-top: 1.1rem; }

.bl_profile_detail_table {
  margin-top: 1.5rem;
  border: 2px solid var(--border-dark);
  border-radius: .6rem; overflow: hidden;
  background: #fff;
  box-shadow: 3px 3px 0 var(--shadow-cool);
}
.bl_profile_detail_table_row { display: flex; align-items: stretch; }
.bl_profile_detail_table_row dt,
.bl_profile_detail_table_row dd { padding: .9rem 1.2rem; }
.bl_profile_detail_table_row dt {
  width: 8rem; font-weight: 700; color: var(--ink-mid);
  font-size: 1.2rem; letter-spacing: .08em;
  flex-shrink: 0;
  background: rgba(60,181,200,.08);
  display: flex; align-items: flex-start;
}
.bl_profile_detail_table_row dd { flex: 1; word-break: auto-phrase; color: var(--ink-mid); }
.bl_profile_detail_table_row + .bl_profile_detail_table_row {
  border-top: 1px solid var(--border);
}
.bl_profile_detail_table_row.el_bowtie dt { color: var(--aqua-deep); }

@media (min-width: 768px) {
  .bl_profile { padding: 12rem 0 14rem; }
  .bl_profile_col {
    margin-top: 6rem;
    display: flex; align-items: center; justify-content: center; gap: 5rem;
  }
  .bl_profile_detail { margin-top: 0; width: 100%; max-width: 52rem; }
  .bl_profile_detail_ttl { font-size: 3.2rem; }
  .bl_profile_detail_desc p { font-size: 1.5rem; }
  .bl_profile_detail_table_row dt,
  .bl_profile_detail_table_row dd { padding: 1.2rem 1.8rem; }
  .bl_profile_detail_table_row dt { width: 10rem; }
}

/* ============================================================
   MANGA
   ============================================================ */

.bl_manga {
  background: var(--ink);
  padding: 8rem 0;
}

.bl_manga_inner_txt_desc {
  margin-top: 3rem;
  color: var(--ink-light);
  font-size: 1.5rem;
}
.bl_manga_inner_txt_desc sup { display: inline-block; vertical-align: super; font-size: .7em; }

.bl_manga_inner_txt_desc_sns { margin-top: 2.5rem; display: flex; align-items: center; gap: 1.5rem; }
.bl_manga_inner_txt_desc_sns_p { color: var(--aqua); font-weight: 700; }
.bl_manga_inner_txt_desc_sns_list { display: flex; gap: 1rem; }
.bl_manga_inner_txt_desc_sns_list_link {
  display: grid; place-content: center;
  width: 3.4rem; height: 3.4rem;
  background: var(--aqua);
  border: none; border-radius: 9999px; overflow: hidden;
  transition: background .3s ease-out;
}
.bl_manga_inner_txt_desc_sns_list_link:hover,
.bl_manga_inner_txt_desc_sns_list_link.hover { background: var(--aqua-deep); }
.bl_manga_inner_txt_desc_sns_list_link img { width: 60%; height: auto; }

.bl_manga_inner_txt .bl_secTitle_txt .el_jp .el_minusml { margin-left: -0.45em; }

/* マンガカード: コミックパネル */
.bl_manga_ishiyama_archive {
  margin-top: 3rem; overflow: hidden;
  border: 2.5px solid var(--ink-light);
  box-shadow: 0 6px 28px rgba(0,0,0,.45);
  border-radius: 8px;
}
.bl_manga_ishiyama_archive_link { display: block; cursor: pointer; }
.bl_manga_ishiyama_archive_link:hover .bl_manga_ishiyama_archive_link_txt,
.bl_manga_ishiyama_archive_link.hover .bl_manga_ishiyama_archive_link_txt { background: var(--aqua-deep); }
.bl_manga_ishiyama_archive_link_txt {
  background: var(--aqua); padding: 1rem;
  transition: background .3s ease-out;
}
.bl_manga_ishiyama_archive_link_txt_p {
  text-align: center; font-size: 1.8rem; font-weight: 700; color: var(--ink);
}

@media (min-width: 768px) {
  .bl_manga { padding: 12rem 0; }
  .bl_manga_inner { display: flex; gap: 6rem; width: 100%; align-items: center; }
  .bl_manga_inner_txt {
    flex: 1; display: flex; flex-direction: column; gap: 5rem;
    width: 40%; max-width: 44rem;
  }
  .bl_manga_inner_txt_desc { font-size: 1.9rem; margin-top: 0; }
  .bl_manga_ishiyama_archive { flex: 1; margin-top: 0; }
}

/* ============================================================
   RECRUIT
   ============================================================ */

.bl_recruit {
  background: var(--paper);
  border-top: 3px solid var(--border);
  padding: 5rem 0;
}

.bl_recruit_link {
  width: 100%; max-width: 96rem;
  display: flex;
  background: var(--paper-card);
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--aqua);
  border-radius: 12px; overflow: hidden;
  margin: 0 auto;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bl_recruit_link:hover, .bl_recruit_link.hover {
  transform: translateY(-3px);
  box-shadow: 4px 7px 0 var(--aqua);
}
.bl_recruit_link_txt { flex: 1; padding: 2rem 1.5rem; }
.bl_recruit_link_txt_sub {
  font-size: 1.2rem; font-weight: 700; text-align: center; color: var(--ink-mid);
}
.bl_recruit_link_txt_sub sup { display: inline-block; vertical-align: super; font-size: .7em; }
.bl_recruit_link_txt_main {
  font-size: 2rem; font-weight: 700; text-align: center; color: var(--ink);
  margin-top: .3em;
}
.bl_recruit_link_icon {
  padding: 1.5rem 1.2rem; display: grid; place-items: center;
  background: var(--ink);
}
.bl_recruit_link_icon img { display: block; width: 2rem; filter: invert(1); }

@media (min-width: 768px) {
  .bl_recruit { padding: 8rem 0; }
  .bl_recruit_link_txt { padding: 3.5rem 3rem; }
  .bl_recruit_link_txt_sub { font-size: 1.8rem; }
  .bl_recruit_link_txt_main { font-size: 3.2rem; }
  .bl_recruit_link_icon { padding: 2rem; }
  .bl_recruit_link_icon img { width: 2.6rem; }
}
@media (min-width: 1080px) {
  .bl_recruit_link_txt_main { font-size: 3.6rem; }
}

/* ============================================================
   SHARE
   ============================================================ */

.bl_share {
  background: var(--aqua);
  border-top: 3px solid var(--border-dark);
}

.bl_share_inner { padding: 4rem 0 5rem; }
.bl_share_inner_txt { color: #fff; font-weight: 700; text-align: center; margin-bottom: 1rem; }
.bl_share_inner_txt sup { display: inline-block; vertical-align: super; font-size: .7em; }
.bl_share_inner_list {
  display: flex; justify-content: center; gap: 1.5rem; padding: 2rem;
}
.bl_share_inner_list_link {
  display: grid; place-content: center;
  width: 4.5rem; height: 4.5rem;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 9999px; overflow: hidden;
  transition: background .3s ease-out;
}
.bl_share_inner_list_link:hover,
.bl_share_inner_list_link.hover { background: var(--aqua-deep); }
.bl_share_inner_list_link img { width: 2rem; height: auto; filter: invert(1) brightness(10); }
.bl_share_img { width: 6rem; margin-left: auto; margin-right: 1rem; margin-top: -3rem; }

@media (min-width: 768px) {
  .bl_share { padding-bottom: 10rem; }
  .bl_share_inner {
    padding: 5rem 0;
    display: flex; gap: 5rem; justify-content: center; align-items: center;
  }
  .bl_share_inner_txt { margin: 0; font-size: 1.8rem; }
  .bl_share_inner_list { gap: 2rem; padding: 2rem 0; }
  .bl_share_inner_list_link { width: 5.2rem; height: 5.2rem; }
  .bl_share_img {
    position: absolute;
    right: max(0px, calc((100% - var(--max-w)) / 2));
    bottom: 0; width: 10rem; margin: 0;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */

.bl_ftr { background: var(--ink); color: #fff; }

.bl_ftr_inner {
  max-width: var(--max-w);
  margin-left: auto; margin-right: auto;
  padding: 5rem var(--gutter-sp) 4rem;
  display: flex; flex-direction: column; gap: 3.5rem;
}

.bl_ftr_inner_logo_item_link { display: block; width: 16rem; }
.bl_ftr_inner_logo_copyright {
  display: block; font-size: 1.1rem; color: rgba(255,255,255,.45);
  margin-top: 1.5rem; letter-spacing: .03em;
}

/* リンク — 縦並びで読みやすく */
.bl_ftr_inner_list {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: .5rem;
}
.bl_ftr_inner_list_item a {
  display: block; font-size: 1.3rem;
  color: rgba(255,255,255,.6);
  padding: .8rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: color .2s ease-out;
  word-break: keep-all;
  letter-spacing: .02em;
}
.bl_ftr_inner_list_item a:hover { color: #fff; }

@media (min-width: 768px) {
  .bl_ftr_inner {
    flex-direction: row; justify-content: space-between; align-items: flex-start;
    padding: 6rem var(--gutter-tb) 5rem;
    gap: 4rem;
  }
  .bl_ftr_inner_logo { flex-shrink: 0; }
  .bl_ftr_inner_logo_item_link { width: 20rem; }
  .bl_ftr_inner_logo_copyright { margin-top: 1.8rem; }
  /* PC: ロゴ左・リンク右横並び */
  .bl_ftr_inner_list {
    flex-direction: row; flex-wrap: wrap;
    border-top: none; padding-top: 0;
    gap: .2rem 2.5rem; justify-content: flex-end;
    align-content: flex-start; max-width: 48rem;
  }
  .bl_ftr_inner_list_item { width: auto; }
  .bl_ftr_inner_list_item a {
    padding: .5rem 0;
    border-bottom: none;
    font-size: 1.2rem;
  }
}
@media (min-width: 1080px) {
  .bl_ftr_inner_logo_item_link { width: 24rem; }
}

/* ============================================================
   ARCHIVE PAGE
   ============================================================ */

.bl_mangaArchive {
  background: var(--paper);
  padding: 6rem 0 10rem;
  scroll-margin-top: 5.6rem;
  min-height: calc(100svh - 5.6rem);
}
@media (min-width: 768px) {
  .bl_mangaArchive {
    scroll-margin-top: 6rem;
    min-height: calc(100svh - 6rem);
  }
}

.bl_mangaArchive_main { margin-top: 5rem; }
.bl_mangaArchive_main_list { max-width: 52rem; margin: 3rem auto; display: grid; gap: 2.5rem; }
.bl_mangaArchive_main_list_item img {
  display: block; border-radius: .6rem;
  box-shadow: 3px 3px 0 var(--shadow-cool);
}
.bl_mangaArchive_main_decoration { display: none; }

@media (min-width: 768px) {
  .bl_mangaArchive_main {
    display: flex; justify-content: center; align-items: flex-start;
    gap: 3rem; position: relative;
  }
  .bl_mangaArchive_main_decoration {
    display: block; position: sticky; top: 8rem; width: 14rem; flex-shrink: 0;
  }
  .bl_mangaArchive_main_decoration.is_right { padding-top: 20rem; }
  .bl_mangaArchive_main_decoration img { width: 100%; height: auto; display: block; }
}
@media (min-width: 1080px) { .bl_mangaArchive_main { gap: 4rem; } }

/* Pagination */
.bl_pagination { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.bl_pagination_btn {
  border: 2px solid var(--border-dark);
  background: #fff; color: var(--ink-mid);
  border-radius: 6px;
  padding: .8rem .5rem; min-width: 3.8rem; min-height: 4.4rem;
  font-size: 1.2rem; font-weight: 700; cursor: pointer;
  transition: background .3s ease-out, transform .2s ease;
}
.bl_pagination_btn.prev,
.bl_pagination_btn.next,
.bl_pagination_btn.first,
.bl_pagination_btn.last {
  background: var(--paper-card); border-color: var(--border-dark);
}
.bl_pagination_btn.is_active {
  background: var(--aqua); color: #fff;
  border-color: var(--aqua-deep);
  box-shadow: 2px 2px 0 var(--aqua-deep);
  pointer-events: none;
}
.bl_pagination_btn.is_disabled { opacity: .35; pointer-events: none; }
.bl_pagination_btn:hover:not(.is_active) {
  background: var(--aqua-pale);
  transform: translateY(-1px);
}

@media (min-width: 768px) {
  .bl_pagination_btn { padding: 1rem; min-width: 4.2rem; min-height: 4.4rem; font-size: 1.4rem; }
  .bl_pagination_btn.prev,
  .bl_pagination_btn.next,
  .bl_pagination_btn.first,
  .bl_pagination_btn.last { width: 4.2rem; }
}

/* ============================================================
   PC LAYOUT — Phone column (≥ 768px)
   ============================================================ */
@media (min-width: 768px) {
  html { height: 100%; overflow: hidden; }
  body {
    height: 100%; overflow: hidden;
    /*
     * 外側背景パターン（3層）:
     *   L1/L2 — 半ドロップ千鳥配列ドット: 2層をセル半分ずらして重ね、
     *            スクリーントーン風の斜め配列感をCSS単体で再現。
     *   L3    — 極薄の135°斜めストライプ: コミック印刷原稿のような下地感。
     *   L4    — 寒色グラデーション: ベース。
     *   ※ 全レイヤー同系インク色で統一し、コントラストを最小限に抑制。
     */
    background:
      radial-gradient(circle, rgba(26,46,56,.052) 1.5px, transparent 1.5px) 12px 8px / 24px 16px,
      radial-gradient(circle, rgba(26,46,56,.052) 1.5px, transparent 1.5px) 0 0 / 24px 16px,
      repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 28px,
        rgba(26,46,56,.018) 28px,
        rgba(26,46,56,.018) 29px
      ),
      linear-gradient(160deg, #d8eef5 0%, #c4e4f0 50%, #aad4e8 100%);
    display: flex; align-items: stretch; justify-content: center;
  }
  /* transform: translateZ(0) でdialog（position:fixed）をcolumn内に封じ込める */
  .bl_allWrap {
    width: 420px; flex-shrink: 0;
    height: 100vh; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    box-shadow: 0 0 0 1px var(--border-dark), 0 0 60px rgba(26,46,56,.22);
    transform: translateZ(0); /* fixed子要素のcontaining block化 */
    background: var(--paper);
  }
  .bl_allWrap::-webkit-scrollbar { display: none; }
  /* Header: sticky in column */
  .bl_hdr { position: sticky; top: 0; left: auto; width: 100%; }
  .bl_hdr_inner { max-width: none; min-height: 5.2rem; gap: 0; }
  .bl_hdr_inner_wrap  { display: flex !important; }
  .bl_hdr_inner_lgNav { display: none !important; }
  /*
   * Dialog nav: dialogはtop layerに入るためtransform封じ込めが効かない。
   * 420pxカラムに合わせてwidth固定 + 左50%+translateXで中央配置する。
   */
  .bl_hdr_navBody {
    width: 420px;
    max-width: 420px;
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
  }
  /* dialogのbackdropはPC時は透明に（column外を暗くしない） */
  .bl_hdr_navBody::backdrop { background: transparent; }
  /* MV: stack layout */
  .bl_mv {
    margin-top: 0; flex-direction: column; align-items: center;
    min-height: auto; max-height: none;
    padding: 3rem var(--gutter-sp) 0; gap: 0; overflow: visible;
  }
  .bl_mv_body { flex: none; align-items: center; text-align: center; padding: 0 0 2rem; gap: 2rem; max-width: 100%; }
  .bl_mv_img { width: 72%; max-width: 26rem; align-self: center; flex-shrink: 1; margin: 0 auto; }
  .bl_mv_title { font-size: 3.4rem; }
  .bl_mv_copy { font-size: 1.5rem; }
  .bl_mv_cta { justify-content: center; }
  .bl_mv_cta_primary, .bl_mv_cta_secondary { font-size: 1.7rem; }
  /* Intro nav: always visible */
  .bl_intro { display: block !important; top: 5.2rem; }
  .bl_intro_list { padding: 0 var(--gutter-sp); }
  .bl_intro_list_item_link { font-size: 1.3rem; padding: 1.1rem 1.4rem; }
  /* Fixed SNS: 非表示 */
  .bl_fixedSns { display: none; }
  /* Profile: stack */
  .bl_profile_col { flex-direction: column; align-items: center; gap: 3rem; }
  .bl_profile_detail { margin-top: 0; max-width: 100%; }
  /* Manga: stack */
  .bl_manga_inner { flex-direction: column; }
  .bl_manga_inner_txt { width: 100%; max-width: 100%; }
  .bl_manga_ishiyama_archive { flex: none; margin-top: 3rem; }
  /* Footer: column内ではPC横並びを解除 */
  .bl_ftr_inner {
    flex-direction: column; padding: 5rem var(--gutter-sp) 4rem; gap: 3rem;
  }
  .bl_ftr_inner_list {
    flex-direction: column; border-top: 1px solid rgba(255,255,255,.1); padding-top: .5rem;
    max-width: none; gap: 0;
  }
  .bl_ftr_inner_list_item a { border-bottom: 1px solid rgba(255,255,255,.07); padding: .8rem 0; }

  /* ── ly_inner: phone column内はSP gutterに戻す ── */
  .ly_inner { padding: 0 var(--gutter-sp); }

  /* ── Share: カラム内では縦積みにして重なりを解消 ── */
  .bl_share { padding-bottom: 0; }
  .bl_share_inner {
    flex-direction: column;
    align-items: center;
    padding: 4rem var(--gutter-sp) 1.5rem;
    gap: 1.5rem;
  }
  .bl_share_inner_txt { font-size: 1.5rem; }
  .bl_share_inner_list { padding: .5rem 0 0; }
  /* キャラ画像: absoluteを解除して自然に下へ流す */
  .bl_share_img {
    position: static;
    width: 5rem;
    margin: 0 auto;
    display: block;
    padding-bottom: 2rem;
  }

  /* ── ストーリー: カラム内は余白を詰め、装飾を隅に小さく ── */
  .bl_story { padding: 5rem 0 6rem; }
  .bl_story_inner_txt { font-size: 1.45rem; line-height: 2.2; margin-top: 2.5rem; }
  /* 装飾画像: カラム端にごく小さく、テキストと重ならない位置へ */
  .bl_story_img.el_01 { width: 5rem; top: 1.5rem; left: 0; opacity: .3; }
  .bl_story_img.el_02 { width: 5rem; bottom: 1.5rem; right: 0; opacity: .3; }

  /* ══════════════════════════════════════════════
     アーカイブページ固有調整
     ══════════════════════════════════════════════ */

  /* 装飾キャラクター: カラム内では非表示 */
  .bl_mangaArchive_main_decoration { display: none !important; }

  /* アーカイブセクション: 余白・高さ削減 */
  .bl_mangaArchive {
    padding: 2.5rem 0 5rem;
    min-height: auto;
    scroll-margin-top: 5.2rem;
  }
  /* flexをブロックに戻してカラム全幅活用 */
  .bl_mangaArchive_main {
    display: block;
    margin-top: 2rem;
  }
  /* サムネイルリスト: カラム全幅 / 間隔詰める */
  .bl_mangaArchive_main_list {
    max-width: 100%;
    margin: 1rem 0;
    gap: 1.5rem;
  }

  /*
   * ページネーション: overflow-x:autoは親のoverflow-x:hiddenに切られるため使えない。
   * flex-wrap:wrapで折り返し、全ボタンをカラム内に収める。
   */
  .bl_pagination {
    flex-wrap: wrap;
    overflow: visible;
    justify-content: center;
    padding: .4rem 0;
    gap: .5rem .4rem;
    margin: .8rem 0;
  }
  /* ボタン: コンパクトに保ちつつ押しやすさ維持 */
  .bl_pagination_btn {
    flex-shrink: 0;
    font-size: 1.1rem;
    padding: .65rem .55rem;
    min-width: 3.2rem;
    min-height: 3.8rem;
    line-height: 1.4;
  }
  .bl_pagination_btn.prev,
  .bl_pagination_btn.next,
  .bl_pagination_btn.first,
  .bl_pagination_btn.last { width: 3.4rem; min-width: 3.4rem; }
}

/* ============================================================
   CM / FAQ / NEWS
   ============================================================ */

.bl_cm { padding: 6rem 0 0; }
.bl_cm_inner_txt_desc { margin-top: 3rem; color: var(--teal); }
.bl_cm_inner_movie {
  margin-top: 3rem; border-radius: .8rem; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.14); background: var(--teal);
}
.bl_cm_inner_movie_iframeWrap { width: 100%; aspect-ratio: 16/9; }
.bl_cm_inner_movie_iframeWrap iframe { width: 100%; height: 100%; }
.bl_cm_inner_movie_txt { color: #fff; font-weight: 700; padding: 1rem 1rem 1.2rem; line-height: 1.5; }
.bl_cm_ishiyama { width: 14rem; margin-top: 2rem; margin-left: auto; position: relative; z-index: -1; }

@media (min-width: 768px) {
  .bl_cm { padding: 10rem 0 0; }
  .bl_cm_inner { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 3rem; }
  .bl_cm_inner_txt { flex: 1; }
  .bl_cm_inner_txt .bl_secTitle_txt .el_jp,
  .bl_cm_inner_txt .bl_secTitle_txt .el_en,
  .bl_cm_inner_txt .bl_cm_inner_txt_desc { text-align: right; }
  .bl_cm_inner_txt .bl_cm_inner_txt_desc { font-size: 2rem; }
  .bl_cm_inner_movie { width: 62rem; margin-top: 0; }
  .bl_cm_ishiyama { width: 18rem; }
}

.bl_faq {
  background: var(--teal); width: 100%; padding: 8rem 0;
  box-shadow: 0 4px 24px rgba(0,0,0,.1);
  margin-top: -10rem;
}
.bl_faq_detail { margin-top: 3.5rem; position: relative; }
.bl_faq_detail_button {
  background: var(--amber); color: var(--ink);
  font-size: 1.7rem; font-weight: 700;
  padding: 1rem 2.5rem; border-radius: .5rem;
  box-shadow: 0 3px 14px rgba(0,0,0,.1);
  position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%);
}
.bl_faq_detail_ttl {
  display: flex; align-items: center;
  background: var(--amber); border: var(--amber) 2px solid;
  border-radius: .8rem .8rem 0 0; overflow: hidden;
}
.bl_faq_detail_ttl_q { background: var(--amber); color: #fff; font-size: 3.2rem; font-weight: 700; padding: 1.2rem; }
.bl_faq_detail_ttl_txt { background: var(--amber); padding: 1rem; color: var(--ink); font-size: 1.8rem; font-weight: 700; flex: 1; }
.bl_faq_detail_img {
  background: #fff; border: var(--amber) 2px solid; border-top: none;
  border-radius: 0 0 .8rem .8rem; overflow: hidden;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 1rem; width: 100%; padding: 2rem;
}
.bl_faq_detail_img img { display: block; flex: 1; }
.bl_faq_detail_modal .bl_faq_detail { margin-top: 0; }
.bl_faq_detail_modal .bl_faq_detail_ttl { background: var(--teal); border-color: var(--teal); }
.bl_faq_detail_modal .bl_faq_detail_ttl_q { background: var(--teal); }
.bl_faq_detail_modal .bl_faq_detail_ttl_txt { color: var(--ink); background: #fff; font-size: 1.7rem; }
.bl_faq_detail_modal .bl_faq_detail_img { border-color: var(--teal); border-top: none; }
.bl_faq_detail_modal_answer { margin-top: 1.5rem; }
.bl_faq_detail_modal_answer_ttl { color: var(--teal); font-size: 1.8rem; font-weight: 700; }
.bl_faq_detail_modal_answer_detail { color: var(--teal); margin-top: 1rem; }
.bl_faq_detail_modal_answer_detail br { display: none; }
.bl_faq_detail_modal_answer_detail_caption { font-size: 1.2rem; margin-top: 1rem; }
.bl_faq_detail_modal_button_wrap { margin-top: 2.5rem; display: grid; place-items: center; }
.bl_faq_detail_modal_button { background: var(--amber); color: var(--ink); font-size: 1.7rem; font-weight: 700; padding: 1rem 2.5rem; border-radius: .5rem; }

@media (min-width: 768px) {
  .bl_faq { margin-top: -10rem; padding: 10rem 0; }
  .bl_faq_detail { margin-top: 5rem; padding: 0 6rem; }
  .bl_faq_detail_ttl { border-width: 3px; }
  .bl_faq_detail_ttl_q { font-size: 4.4rem; padding: 2rem 2.5rem; }
  .bl_faq_detail_ttl_txt { font-size: 2.2rem; padding: 2.5rem 2rem; }
  .bl_faq_detail_img { justify-content: center; padding: 5rem 5rem 7rem; gap: 4rem; }
  .bl_faq_detail_img_item { max-width: 15rem; }
  .bl_faq_detail_button { font-size: 2.2rem; padding: 1.8rem 3rem; width: 100%; max-width: 44rem; cursor: pointer; transition: background .3s ease-out; }
  .bl_faq_detail_button:hover { background: var(--amber-deep); }
  .bl_faq_detail_modal .bl_faq_detail { padding: 0; }
  .bl_faq_detail_modal .bl_faq_detail_ttl_txt { padding: 2.5rem; font-size: 2.2rem; }
  .bl_faq_detail_modal .bl_faq_detail_modal_button { font-size: 2.2rem; padding: 1.8rem 3rem; width: 100%; max-width: 44rem; cursor: pointer; transition: background .3s ease-out; }
  .bl_faq_detail_modal .bl_faq_detail_modal_button:hover { background: var(--amber-deep); }
  .bl_faq_detail_modal_dialog { --_max-width: 102.4rem; padding: 3rem; }
  .bl_faq_detail_modal_answer_ttl { font-size: 2.2rem; }
  .bl_faq_detail_modal_answer_detail { font-size: 2rem; }
  .bl_faq_detail_modal_answer_detail br { display: block; }
}

.bl_news { padding: 6rem 0; }
.bl_news_detail { margin-top: 3rem; }
.bl_news_detail_txt_img { width: 14rem; margin-top: 1.5rem; margin-left: auto; }
.bl_news_detail_main { margin-top: -3rem; }
.bl_news_detail_main_img { border-radius: .6rem; box-shadow: 0 4px 16px rgba(0,0,0,.1); overflow: hidden; }
.bl_news_detail_main_txt { margin-top: 2rem; }
.bl_news_detail_main_txt_creator_link { display: inline-block; font-size: 1.5rem; font-weight: 700; color: var(--teal); }
.bl_news_detail_main_txt_p { margin-top: 1rem; }

@media (min-width: 768px) {
  .bl_news { padding: 10rem 0; }
  .bl_news_detail { margin-top: 5rem; }
  .bl_news_detail_txt_p { font-size: 2rem; }
  .bl_news_detail_txt { display: flex; justify-content: space-between; gap: 3rem; }
  .bl_news_detail_txt_img { width: 24rem; }
  .bl_news_detail_main { margin: -.5rem; }
  .bl_news_detail_main_txt { margin-top: 3rem; }
  .bl_news_detail_main_txt_creator_link { font-size: 2rem; }
  .bl_news_detail_main_txt_p { font-size: 1.5rem; margin-top: 1.5rem; }
}