/* ==========================================================================
   site-common.css — ヘッダー・フッター・ドロワー(テーマ出力領域)の見た目
   --------------------------------------------------------------------------
   - 全ページ共通。.page-template-front-page-renewal にスコープしない
   - セレクタはテーマの既存クラス(.l-header 等)に対して書く
   - 詳細度は最小限、!important は原則禁止
   - 本番の enqueue では front-renewal.css より前に読み込む
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 全ページ共通の挙動
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* トップページ(body.home)の背景は白。
   注意: テーマの追加CSS(カスタマイザー)に
   `body { background-color: #F5EFE9 !important }` と
   `body.home { background-color: #86c4e5 !important }` が残っている間は
   !important に負けるため効かない。追加CSS 側の2行の削除が前提 */
body.home {
  background-color: #fff;
}

/* --------------------------------------------------------------------------
   1. ヘッダー(design/sections/01-hero.png 上部 84px、sections-sp/01-hero.png)
   --------------------------------------------------------------------------
   注意: テーマの追加CSS(カスタマイザー)に `header { background: red !important }`
   が残っている間は背景の透過が効かない。追加CSS側の削除が前提。
   -------------------------------------------------------------------------- */

/* 背景: 通常はヒーローと同じグラデ帯(全ページ・スクロール追従時)。
   トップページ(body.home)の未スクロール時だけ透過してヒーローのグラデが透ける。
   スクロール判定はテーマ JS が html[data-scrolled] に付ける値を使う(追加 JS なし)。
   位置(sticky)はカスタマイザー「上部固定」の出力(.l-header--sticky-lg/-sm)に任せる */
.l-header,
.l-header .l-header__content {
  padding-top: 0;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}
.l-header {
  background: linear-gradient(90deg, #fcff4e 0%, #00e8ff 100%);
  transition: background-color 0.3s ease, opacity 0.3s ease;
}
html[data-scrolled="false"] body.home .l-header {
  background: transparent;
}
/* 透過中はヘッダー領域がヒーローのタップ/クリックを奪わないようにする(ボタン・リンクは受ける) */
html[data-scrolled="false"] body.home .l-header {
  pointer-events: none;
}
html[data-scrolled="false"] body.home .l-header a,
html[data-scrolled="false"] body.home .l-header button {
  pointer-events: auto;
}

/* 下層ページ: ヘッダーをコンテンツの上に重ねず、自分の高さぶん場所を取る(sticky)。
   テーマの追加CSS(カスタマイザー)の @media (max-width: 1024px) { .l-header { position: fixed } } により
   SP / タブレットでヘッダーが本文の上部に重なっていたため、トップ(body.home)以外は sticky に戻す。
   詳細度 (0,2,1) で追加CSSの .l-header (0,1,0) に勝つ。top はテーマの値(管理バー対応込み)をそのまま使う */
body:not(.home) .l-header {
  position: sticky;
}

/* コンテナをほぼ全幅に(ロゴ左端 x60、ナビ右端 x1876 @1920) */
.l-header .l-1row-header .c-container {
  max-width: none;
  padding-right: 44px;
  padding-left: 60px;
}
@media (min-width: 1024px) {
  .l-header .l-1row-header .c-row {
    align-items: center;
    min-height: 84px; /* カンプのヘッダー高。SP は fixed のため触らない */
  }
}

/* ロゴ: 高さ基準で固定(横長ロゴ 551×75 → 高さ 34 で幅約 250)。差し替え前の縦積みロゴでも破綻しない */
.l-header .c-site-branding__title .custom-logo {
  width: auto;
  height: 34px;
}
.l-header .c-site-branding__title {
  margin: 0;
  line-height: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
/* SP のトップページ: 未スクロール時はヘッダーのロゴを出さない(ヒーローのロゴと重なるため)。
   スクロールして帯が付いたら表示 */
@media (max-width: 1023px) {
  html[data-scrolled="false"] body.home .l-header .c-site-branding {
    opacity: 0;
    visibility: hidden;
  }
  .l-header .c-site-branding {
    transition: opacity 0.3s ease, visibility 0s;
  }
}

/* グローバルナビ: 右寄せ、枠なしのテキスト 2 段(英字 太字 / 和文 小)。
   クライアント指示(fb-01)で白地・黒枠のピルをやめ、シンプルな表示に。
   メニューのラベルはドロワーと同じ「英字 + <span class="front-drawer-nav__sub">和文</span>」 */
.l-header .u-invisible-md-down {
  width: 100%;
}
.l-header .p-global-nav .c-navbar {
  justify-content: flex-end;
  gap: 30px;
}
.l-header .p-global-nav .c-navbar__item {
  margin: 0;
}
.l-header .p-global-nav .c-navbar__item > a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #100f0e;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.l-header .p-global-nav .c-navbar__item > a span {
  display: inline;
}
.l-header .p-global-nav .c-navbar__item > a .front-drawer-nav__sub {
  display: block;
  margin-top: 1px;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: center;
}
/* ホバー / 現在ページ: 英字の下に 2px の黒線 */
.l-header .p-global-nav .c-navbar__item > a::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 2px;
  background: #100f0e;
  opacity: 0;
  transition: opacity 0.2s;
}
.l-header .p-global-nav .c-navbar__item > a:hover::after,
.l-header .p-global-nav .c-navbar__item > a:focus-visible::after,
.l-header .p-global-nav .c-navbar__item[data-active-menu="true"] > a::after {
  opacity: 1;
}
.l-header .p-global-nav--hover-extend-underline .c-navbar__item > a::after {
  position: static;
  transform: none;
}

/* ハンバーガー(1023px 以下): 白い角丸四角(46×48、下の角だけ丸い)に黒の三本線 + MENU ラベル。
   位置(fixed / top / right 等)と重なり順はテーマとカスタマイザー設定に任せ、
   ここでは色・サイズ・太さ・余白だけを当てる。
   三本線はテーマの構造のまま(bars 22×16、bar top 0/7/14、開くと 1・3 本目が top 7px で ±45° 回転して ×)。
   横幅と太さ・色だけ変える。高さはテーマの 16px のまま(変えると × の交点がずれる) */
@media (max-width: 1023px) {
  .l-header .c-hamburger-btn {
    width: 46px;
    min-height: 48px;
    padding: 6px 0;
    border-radius: 0 0 14px 14px;
    background-color: #fff;
    color: #100f0e;
  }
  .l-header .c-hamburger-btn__bars {
    width: 24px;
  }
  .l-header .c-hamburger-btn__bar {
    height: 2px;
    background-color: #100f0e;
  }
  .l-header .c-hamburger-btn__label {
    color: #100f0e;
  }
}

/* --------------------------------------------------------------------------
   2. フッター(.front-footer = override/templates/layout/footer/footer.php の出力)
   --------------------------------------------------------------------------
   カンプ: design/sections/10-footer.png(PC、1920 基準・高さ 498)、
           design/sections-sp/10-footer.png(SP、398 基準・高さ 616)
   - 全ページに出るため、幅は「中央 1358px 以内、両端 20px の余白」で組み、
     コンテンツ幅の異なるページでも破綻しない
   - 検索フォーム(get_search_form の .p-search-form)とコピーライト(.c-copyright)は
     テーマ既存マークアップへのスタイル調整
   -------------------------------------------------------------------------- */
.front-footer {
  position: relative;
  z-index: 1; /* 上端にまたがるページトップボタンが直前のコンテンツに隠れないようにする */
  overflow: visible; /* テーマの .l-footer は overflow: hidden。上端にまたがるボタンを切らない */
  border-top: 0;
  background: linear-gradient(to bottom right, #94f4a8 0%, #00e7ff 100%); /* 指定色: 左上 #94F4A8 → 右下 #00E7FF */
  color: #100f0e;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
/* :where() で詳細度を (0,1,0) に抑え、各部品の色指定(ページトップの白など)を優先させる */
.front-footer :where(a) {
  color: inherit;
  text-decoration: none;
}
.front-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(612px, 100%);
  grid-template-rows: auto auto;
  column-gap: 40px;
  row-gap: 38px;
  box-sizing: border-box;
  width: min(1358px, 100% - 40px);
  margin: 0 auto;
  padding-top: 78px;
}

/* ロゴ・ナビ・ページトップ(左カラム、2 行分) ------------------------------ */
.front-footer__brand {
  grid-row: 1 / 3;
  grid-column: 1;
  min-width: 0;
}
.front-footer__logo {
  display: block;
  width: 340px;
  max-width: 100%;
}
.front-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.front-footer__nav {
  margin-top: 52px;
}
/* テーマの追加CSS がメニューを ID(#menu-footer-navi)で指定しているため(padding-top、
   横並び、縦線の区切り)、同じ ID にクラスを足した詳細度で打ち消す */
.front-footer__nav-list,
#menu-footer-navi.front-footer__nav-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.front-footer__nav-list li,
#menu-footer-navi.front-footer__nav-list li:not(:last-of-type) {
  position: static;
  display: block;
  margin: 0 0 20px;
  padding: 0;
}
#menu-footer-navi.front-footer__nav-list li:not(:last-of-type)::before {
  content: none;
}
.front-footer__nav-list li:last-child {
  margin-bottom: 0;
}
.front-footer__nav-list a {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
.front-footer__nav-list a:hover,
.front-footer__nav-list a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ページトップ: フッター上端にまたがる黒丸(カンプ: x103、中心 y-6)。
   コンテナ左端(= 50% - 679px)から 178px 左。狭い幅では 20px まで寄せる */
.front-footer__totop {
  position: absolute;
  top: -39px;
  left: max(20px, calc(50% - 857px));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #100f0e;
  color: #fff;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  transition: opacity 0.2s;
}
.front-footer__totop:hover,
.front-footer__totop:focus-visible {
  opacity: 0.75;
}
/* テーマの固定ページトップ(#page-top)はフッター内のボタンと重複するため非表示 */
#page-top.c-page-top {
  display: none;
}

/* 検索フォーム(右カラム 1 行目)------------------------------------------- */
.front-footer__search {
  grid-row: 1;
  grid-column: 2;
  margin-top: 5px; /* カンプ: 検索 y83、ロゴ y78 */
}
.front-footer__search .p-search-form {
  margin: 0;
}
.front-footer__search .c-input-group {
  display: flex;
  align-items: center;
  width: 477px;
  max-width: 100%;
  height: 35px;
  margin-left: auto;
  padding: 0 10px 0 20px;
  border: 1px solid #100f0e;
  border-radius: 18px;
  background: #fff;
}
.front-footer__search .c-input-group__field {
  flex: 1 1 auto;
  min-width: 0;
}
.front-footer__search .c-input-group__field input {
  width: 100%;
  height: 33px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #100f0e;
  font-size: 14px;
  letter-spacing: 0.2em;
  outline: none;
}
.front-footer__search .c-input-group__field input::placeholder {
  color: #9a9a9a;
  text-transform: uppercase;
}
.front-footer__search .c-input-group__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #100f0e;
  cursor: pointer;
}
.front-footer__search .c-input-group__btn .svg-inline--fa,
.front-footer__search .c-input-group__btn svg {
  width: 18px;
  height: 18px;
}

/* アンケート CTA カード(右カラム 2 行目)---------------------------------- */
.front-footer__survey {
  grid-row: 2;
  grid-column: 2;
  box-sizing: border-box;
  width: 612px;
  max-width: 100%;
  min-height: 184px;
  margin-left: auto;
  padding: 24px 24px 24px;
  border: 1px solid #100f0e;
  border-radius: 16px;
  background: #fff;
  text-align: center;
}
.front-footer__survey-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}
/* SP では「ETHICS for YOUTH の」の後で改行する。改行位置は CSS だけでは固定できないため、
   footer.php の見出しに <br class="front-footer__survey-br"> を入れる前提(PC では非表示) */
.front-footer__survey-br {
  display: none;
}
.front-footer__survey-text {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}
.front-footer__survey-text:empty {
  display: none;
}
.front-footer__survey-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 277px;
  height: 53px;
  margin-top: 14px;
  padding: 0 28px;
  border: 1px solid #100f0e;
  border-radius: 27px;
  background: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  transition: background-color 0.2s, color 0.2s;
}
.front-footer__survey-button::after {
  content: "\2192";
  font-size: 1.1em;
}
.front-footer__survey-button:hover,
.front-footer__survey-button:focus-visible {
  background: #100f0e;
  color: #fff;
}

/* コピーライト(テーマ既存 .c-copyright)----------------------------------- */
.front-footer .c-copyright {
  padding: 87px 0 59px; /* カード下端 y339 → 字面 y426、フッター下端 y498 */
  background: transparent;
  color: #100f0e;
  text-align: right;
}
.front-footer .c-copyright .c-container {
  max-width: 1358px;
  padding-right: 20px;
  padding-left: 20px;
}
.front-footer .c-copyright .footer_copy {
  text-align: right;
}
.front-footer .c-copyright small {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* 中間幅: 右カラムが収まらなくなったら 1 カラムに */
@media (max-width: 1100px) {
  .front-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }
  .front-footer__brand { grid-row: 1; grid-column: 1; }
  .front-footer__search { grid-row: 2; grid-column: 1; margin-top: 0; }
  .front-footer__survey { grid-row: 3; grid-column: 1; margin-left: 0; }
  .front-footer__search .c-input-group { margin-left: 0; }
}

/* SP(design/sections-sp/10-footer.png、398 基準)------------------------- */
@media (max-width: 767px) {
  .front-footer__inner {
    width: calc(100% - 64px);
    row-gap: 0;
    padding-top: 36px;
  }
  .front-footer__brand {
    text-align: center;
  }
  .front-footer__logo {
    width: 288px;
    margin: 0 auto;
  }
  .front-footer__nav {
    margin-top: 32px;
    padding-left: 35px; /* カンプ: リンク左端 x67(コンテナ左 32 + 35) */
    text-align: left;
  }
  .front-footer__nav-list li,
  #menu-footer-navi.front-footer__nav-list li:not(:last-of-type) {
    margin-bottom: 18px;
  }
  .front-footer__nav-list a {
    font-size: 12px;
  }
  /* SP ではリンク列の右、検索の上(カンプ: x323、y197) */
  .front-footer__totop {
    top: 197px;
    right: 34px;
    left: auto;
    width: 42px;
    height: 42px;
    font-size: 20px;
  }
  .front-footer__search {
    margin-top: 40px; /* カンプ: 検索 y279 */
  }
  .front-footer__search .c-input-group {
    width: 100%;
    height: 32px; /* カンプ実測 21 はタップ領域として小さいため最小 32 */
    padding: 0 8px 0 14px;
    border-radius: 16px;
  }
  .front-footer__search .c-input-group__field input {
    height: 30px;
    font-size: 11px;
  }
  .front-footer__search .c-input-group__btn svg {
    width: 14px;
    height: 14px;
  }
  .front-footer__survey {
    width: 100%;
    min-height: 0;
    margin-top: 12px;
    padding: 24px 8px 24px;
    border-radius: 24px;
  }
  .front-footer__survey-title {
    font-size: 20px;
    line-height: 1.45;
  }
  .front-footer__survey-br {
    display: inline;
  }
  .front-footer__survey-text {
    font-size: 12px;
  }
  .front-footer__survey-button {
    min-width: 160px;
    height: 46px;
    margin-top: 10px;
    padding: 0 20px;
    font-size: 15px;
  }
  .front-footer .c-copyright {
    padding: 22px 0 28px;
    text-align: center;
  }
  .front-footer .c-copyright .footer_copy {
    text-align: center;
  }
  .front-footer .c-copyright small {
    font-size: 10px;
  }
}

/* --------------------------------------------------------------------------
   3. ドロワー(design/spec-sp/spsp-01 左の図示、398px 基準。KEY WORD は仕様から削除)
   --------------------------------------------------------------------------
   前提とするマークアップ(テーマのドロワー構造 + 追加要素):
     #drawer-nav.c-drawer > .c-drawer__inner
       .front-drawer-logo(ロゴ画像を包む a / div)
       .p-search-form(get_search_form の出力。.c-input-group を持つ)
       ul.c-drawer__menu > li.c-drawer__item > a > (英語ラベル + span.front-drawer-nav__sub)
       .front-drawer-follow(見出し + SNS アイコンの画像リンク)
   図示は 398×481 の縮小図のため、横方向の寸法は実測、縦方向はタップ領域を
   確保できる値(ピル 44px 等)に置き換えている
   -------------------------------------------------------------------------- */
.c-drawer.c-drawer--fixed {
  width: 100%;
  max-width: none;
  background: linear-gradient(135deg, #ebed61 0%, #a6dd9a 50%, #71cfd6 100%);
  color: #100f0e;
}
.c-drawer .c-drawer__inner {
  box-sizing: border-box;
  min-height: 100%;
  padding: 16px 29px 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
}

/* ロゴ */
.c-drawer .front-drawer-logo {
  display: block;
  width: 110px;
  margin: 0 auto;
}
.c-drawer .front-drawer-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* 検索(テーマの get_search_form 出力) */
.c-drawer .p-search-form .c-input-group {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 8px 0 16px;
  border: 1px solid #100f0e;
  border-radius: 18px;
  background: #fff;
}
.c-drawer .p-search-form .c-input-group__field {
  flex: 1 1 auto;
  min-width: 0;
}
.c-drawer .p-search-form .c-input-group__field input {
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #100f0e;
  font-size: 12px;
  letter-spacing: 0.2em;
  outline: none;
}
.c-drawer .p-search-form .c-input-group__field input::placeholder {
  color: #9a9a9a;
  text-transform: uppercase;
}
.c-drawer .p-search-form .c-input-group__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #100f0e;
}
.c-drawer .p-search-form .c-input-group__btn svg {
  width: 14px;
  height: 14px;
}

/* 検索(WordPress 標準の get_search_form 出力: form.search-form > label > input.search-field + input.search-submit)
   ライブではこちらの形式で出力されているため、テーマ形式(.p-search-form)と両方に対応する */
.c-drawer .search-form {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 36px;
  margin: 16px 0 0;
  padding: 0 44px 0 16px;
  border: 1px solid #100f0e;
  border-radius: 18px;
  background: #fff;
  text-align: left;
}
.c-drawer .search-form label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.c-drawer .search-form .search-field {
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #100f0e;
  font-size: 12px;
  letter-spacing: 0.2em;
  outline: none;
}
.c-drawer .search-form .search-field::placeholder {
  color: #9a9a9a;
}
/* 送信ボタン「検索」は文字を消し、虫眼鏡アイコン(SVG)に置き換える */
.c-drawer .search-form .search-submit {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23100f0e' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/></svg>") center / 14px 14px no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  transform: translateY(-50%);
  cursor: pointer;
}

/* メニュー: PC ナビと同じ枠なしのテキスト 2 段(英字 太字 / 和文 小)。
   ホバー・現在ページは英字の下に黒線。白ピルはクライアント指示(fb-01 と同じシンプルな表現)でやめた */
.c-drawer .c-drawer__menu {
  margin-top: 18px; /* 検索ピルとの間隔 */
  padding: 0;
  list-style: none;
}
.c-drawer .c-drawer__item {
  margin: 0 0 6px;
  text-align: center;
  padding: 0;
  border: 0;
}
.c-drawer .c-drawer__item > a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #100f0e;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.c-drawer .c-drawer__item > a::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 2px;
  background: #100f0e;
  opacity: 0;
  transition: opacity 0.2s;
}
.c-drawer .c-drawer__item > a:hover,
.c-drawer .c-drawer__item > a:focus-visible,
.c-drawer .c-drawer__item[data-active-menu="true"] > a {
  background: transparent;
  color: #100f0e;
}
.c-drawer .c-drawer__item > a:hover::after,
.c-drawer .c-drawer__item > a:focus-visible::after,
.c-drawer .c-drawer__item[data-active-menu="true"] > a::after {
  opacity: 1;
}
.c-drawer .front-drawer-nav__sub {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

/* Follow me! */
.c-drawer .front-drawer-follow {
  margin-top: 22px;
}
.c-drawer .front-drawer-follow__heading,
.c-drawer .front-drawer-follow__title,
.c-drawer .front-drawer-follow > :is(h2, h3, p):first-child {
  position: relative;
  display: inline-block;
  margin: 0;
  color: #fff;
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 1px #100f0e;
  paint-order: stroke fill;
}
/* 文字の下のグラデ下線(文字幅のみ)。
   見出しがトップページの見出し部品(h2.front-section-title > span.front-section-title__en + 飾り)で
   組まれている場合は、下線を内側の span にだけ付け、外側の要素には付けない(幅いっぱいの線が
   二重に出るのを防ぐ)。front-renewal.css の同部品の指定は単位(--front-sp-u)が .front-renewal 内でしか
   定義されずドロワー内では効かないため、ここで px 値で完結させる(詳細度を 1 段上げて上書き) */
/* 実際の見出しは p.front-drawer-follow__heading で、下線はマークアップ側が持つため
   外側要素(p / h2 / h3)には ::before の下線を付けない */
.c-drawer .front-drawer-follow .front-section-title .front-section-title__en {
  position: relative;
  z-index: 0;
  display: inline-block;
  color: #fff;
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 1px #100f0e;
  paint-order: stroke fill;
}
.c-drawer .front-drawer-follow .front-section-title .front-section-title__en::before {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  left: -3px;
  z-index: -1;
  height: 9px;
  background: linear-gradient(90deg, #e1ec4e 0%, #59c8d4 100%);
}
.c-drawer .front-drawer-follow .front-section-title .front-follow__sparkle {
  position: absolute;
  top: -2px;
  color: #100f0e;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  white-space: nowrap;
  -webkit-text-stroke: 0;
}
.c-drawer .front-drawer-follow .front-section-title .front-follow__sparkle--l { right: calc(100% + 14px); left: auto; text-align: right; }
.c-drawer .front-drawer-follow .front-section-title .front-follow__sparkle--r { left: calc(100% + 14px); right: auto; text-align: left; }
.c-drawer .front-drawer-follow__list,
.c-drawer .front-drawer-follow ul {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.c-drawer .front-drawer-follow__list li,
.c-drawer .front-drawer-follow ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-drawer .front-drawer-follow a {
  display: block;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
}
.c-drawer .front-drawer-follow img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ドロワーを開いている間は、ヘッダーをドロワー(z-index 100000)より上に出して、
   ヘッダーのハンバーガー(開くと × になる)を見せる。
   本番の設定(ドロワーの方向 ≠ ボタンの位置)ではドロワー内に閉じるボタンが出力されないため、
   × はヘッダー側のボタンだけ。開いている間はヘッダーの帯・ロゴを消し、ドロワーの上には × だけを重ねる */
body:has(#drawer-nav[aria-hidden="false"]) .l-header {
  z-index: 100001;
  background: transparent;
  box-shadow: none;
}
body:has(#drawer-nav[aria-hidden="false"]) .l-header .c-site-branding,
body:has(#drawer-nav[aria-hidden="false"]) .l-header .p-global-nav {
  visibility: hidden;
}
/* ドロワー内にも閉じるボタンが出る設定のときは二重にならないよう、ヘッダー側を隠す */
body:has(#drawer-nav[aria-hidden="false"] .c-drawer__controls) .l-header .c-hamburger-btn {
  visibility: hidden;
}
/* 開いている間のハンバーガー: 白い箱を消し、黒い × だけにする */
.l-header .c-hamburger-btn[aria-expanded="true"] {
  background-color: transparent;
}

/* 閉じるボタン(×)。図示: 右上、黒い ×。
   テーマは「ドロワーの方向 = ハンバーガーの位置」(または overall)のとき、ドロワー内にも
   .c-drawer__controls > .c-drawer__control > .c-hamburger-btn(開くと × になる)を出力する。
   位置・配置(.c-drawer__controls の text-align / absolute 等)はテーマに任せ、
   ヘッダーのハンバーガーと同じ色・太さ・サイズだけ当てて「三本線 → ×」が 1 つのボタンに見えるようにする */
.c-drawer .c-drawer__controls .c-hamburger-btn {
  padding: 0;
  color: #100f0e;
}
.c-drawer .c-drawer__controls .c-hamburger-btn__bars {
  width: 24px;
}
.c-drawer .c-drawer__controls .c-hamburger-btn__bar {
  height: 2px;
  background-color: #100f0e;
}
.c-drawer .c-drawer__controls .c-hamburger-btn__label {
  color: #100f0e;
}
/* Follow me! の飾り(✧)。マークアップ側に飾り(.front-follow__sparkle)がある場合は付けない */
.c-drawer .front-drawer-follow__title:not(:has(.front-follow__sparkle))::after,
.c-drawer .front-drawer-follow > :is(h2, h3, p):first-child:not(:has(.front-follow__sparkle))::after {
  content: "\2727";
  position: absolute;
  top: -6px;
  right: -22px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  -webkit-text-stroke: 0;
  color: #100f0e;
}