@charset "utf-8";
/* ==========================================================================
   common.css  ―  全ページ共通スタイル
   --------------------------------------------------------------------------
   命名規則: BEM（FLOCSS 準拠のプレフィックスを併用）
     l-  : Layout    … ヘッダー / フッター / メイン / インナーなどの骨格
     c-  : Component … ボタン・見出し・カードなどの再利用パーツ
     p-  : Project   … ページ / セクション固有（page/*.css 側に記述）
     u-  : Utility   … 表示制御などの単機能クラス
     js- : JavaScript のトリガー専用（スタイルは当てない）
   Element = __element / Modifier = --modifier
   --------------------------------------------------------------------------
   ・!important は使用しない
   ・共通パーツ（c-）には margin / width を指定しない
   ・margin の向きは top / left に統一する
   ・html { font-size: 10px } のため 1.6rem = 16px
   ========================================================================== */

/* ==========================================================================
   1. Variables
   ========================================================================== */
:root {
  /* Color  */
  --color-text: #000000;
  --color-text-sub: #b3b3b3;
  --color-text-invert: #fff;
  --color-primary: #ff3a23;
  --color-primary-dark: #c73a15;
  --color-secondary: #ff8d28;
  --color-accent: #ffd23f;
  --color-alert: #e60012;
  --color-link: #e8481e;
  --color-bg: #fffaf2;
  --color-bg-cream: #fdfbf3;
  --color-bg-yellow: #fff1c4;
  --color-bg-white: #fff;
  --color-border: #e8ded0;
  --color-border-strong: #d8c9b4;
  --color-overlay: rgba(57, 57, 57, .6);

  /* Layout */
  --inner-width: 1440px;
  --inner-width-narrow: 900px;
  --inner-padding: 100px;
  --header-height: 9rem;
  --nav-height: 4.4rem;

  /* Typography */
  --font-base: "Noto Sans JP", sans-serif;
  --font-heading: "Noto Sans JP", sans-serif;

  /* Effect */
  --radius-s: .6rem;
  --radius-m: 1.2rem;
  --radius-l: 5rem;
  --radius-full: 999px;
  --shadow-card: 0 .2rem .8rem rgba(57, 57, 57, .08);
  --shadow-content-card: 0 .1rem .2rem rgba(120, 80, 40, .06),
    0 .4rem 1.2rem rgba(120, 80, 40, .06);
  --shadow-float: 0 .4rem 1.6rem rgba(57, 57, 57, .16);
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* z-index */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;

  color-scheme: light;
}

@media screen and (max-width: 767px) {
  :root {
    --inner-padding: 16px;
    --header-height: 6.5rem;
  }
}

/* ==========================================================================
   2. Base
   ========================================================================== */
html {
  scroll-behavior: auto;
}

body {
  font-size: 1.8rem;
  background-color: var(--color-bg);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body.is-fixed {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

[id] {
  scroll-margin-top: calc(var(--header-height) + var(--nav-height) + 2rem);
}

:focus-visible {
  outline: .3rem solid var(--color-secondary);
  outline-offset: .2rem;
}

img {
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
  }
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

/* --- インナー（コンテンツ幅） --- */
.l-inner {
  width: 84%;
  max-width: var(--inner-width);
  margin-right: auto;
  margin-left: auto;
}

.l-inner--narrow {
  max-width: calc(var(--inner-width-narrow) + var(--inner-padding) * 2);
}

/* --- セクション --- */
.l-section {
  padding-bottom: 8rem;
}

.l-section--cream {
  background-color: var(--color-bg-cream);
}

.l-section--yellow {
  background-color: var(--color-bg-yellow);
}

.l-section--white {
  background-color: var(--color-bg-white);
}

.l-section__body {
  margin-top: 4rem;
}

/* --- ヘッダー --- */
.l-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
}

.l-header__top {
  background-color: var(--color-bg-white);
  border-bottom: .1rem solid var(--color-border);
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--header-height);
}

.l-header__logo {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  line-height: 1;
}

.l-header__logo img {
  width: auto;
  max-height: 5.6rem;
}

.l-header__catch {
  margin-top: .4rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
}

.l-header__utility {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.l-header__sns {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.l-header__sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
}

.l-header__sns-link img {
  width: 2.4rem;
}

.l-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.l-header__utility .l-header__cta {
  width: 32rem;
  height: 3.6rem;
  min-height: 3.6rem;
}

/* --- 検索フォーム --- */

.c-searchform.c-searchform--icon {
  align-items: center;
  gap: 0;
  width: 15rem;
  height: 2.5rem;
  padding-left: .8rem;
  background-color: var(--color-bg-white);
  border: .1rem solid var(--color-text);
  border-radius: 0;
}

.c-searchform--icon .c-searchform__input {
  min-height: auto;
  min-width: 0;
  padding: 0 .8rem 0 .8rem;
  font-size: 1.3rem;
  background-color: transparent;
  border: none;
}

.c-searchform--icon .c-searchform__submit {
  order: -1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  min-height: auto;
  padding: 0;
  font-size: 0;
  color: var(--color-text);
  background-color: transparent;
  border-radius: 0;
}

.c-searchform--icon .c-searchform__submit::before {
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  background-color: currentColor;
  -webkit-mask: url("../img/common/icon-search.svg") no-repeat center / contain;
  mask: url("../img/common/icon-search.svg") no-repeat center / contain;
}

.c-searchform--icon .c-searchform__input:focus-visible,
.c-searchform--icon .c-searchform__submit:focus-visible {
  outline: .1rem solid var(--color-primary);
  outline-offset: -.1rem;
}

/* --- グローバルナビ --- */

.l-nav {
  position: relative;
  display: block;
  background-color: var(--color-primary);
}

.l-nav__list {
  position: relative;
  display: flex;
  align-items: stretch;
}

.l-nav__item {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.l-nav__link {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 4.4rem;
  padding: .8rem 1.4rem;
  border: 0;
  background: transparent;
  color: var(--color-text-invert);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: color .2s var(--ease);
}

.l-nav__link::before {
  content: '';
  position: absolute;
  inset: 0 0 0 -1.4rem;
  z-index: -1;
  background-image:
    url("../img/common/nav-fill-left.svg"),
    linear-gradient(#fff, #fff),
    url("../img/common/nav-fill-right.svg");
  background-repeat: no-repeat;
  background-position: left top, center top, right top;
  background-size: 1.4rem 100%, calc(100% - 2.8rem) 100%, 1.4rem 100%;
  opacity: 0;
  pointer-events: none;
}

.l-nav__link::after,
.l-nav__list::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1.4rem;
  height: 100%;
  background: url("../img/common/nav-divider.svg") no-repeat center / 100% 100%;
  pointer-events: none;
}

.l-nav__list::before {
  right: auto;
  left: -1.4rem;
  background-image: url("../img/common/nav-edge.svg");
}

.l-nav__link:not([aria-controls])::after {
  background-image: url("../img/common/nav-edge.svg");
}

.l-nav__link[aria-controls]::after {
  background-image: url("../img/common/nav-divider.svg");
}

.l-nav__link[aria-expanded="true"],
.l-nav__link:focus-visible {
  color: var(--color-primary);
}

.l-nav__link[aria-expanded="true"]::before,
.l-nav__link:focus-visible::before {
  opacity: 1;
}

.l-nav__link:focus-visible,
.l-nav__panel-link:focus-visible {
  outline: .2rem solid var(--color-text);
  outline-offset: -.3rem;
}

.l-nav__link[aria-current="page"] {
  text-decoration: underline;
}

.l-nav__panel-inner--no-title .l-nav__panel-list {
	margin-top: 0;
}

.l-nav__item:has(+ .l-nav__item .l-nav__link[aria-expanded="true"]) .l-nav__link::after,
.l-nav__item:has(+ .l-nav__item .l-nav__link:focus-visible) .l-nav__link::after,
.l-nav__list:has(> .l-nav__item:first-child .l-nav__link[aria-expanded="true"])::before,
.l-nav__list:has(> .l-nav__item:first-child .l-nav__link:focus-visible)::before {
  visibility: hidden;
}

.l-nav__panel-title-link {
	color: inherit;
	text-decoration: underline;
  text-underline-offset: .25em;
}

@media (hover: hover) and (pointer: fine) {
  .l-nav__item:has(+ .l-nav__item .l-nav__link:hover) .l-nav__link::after,
  .l-nav__list:has(> .l-nav__item:first-child .l-nav__link:hover)::before {
    visibility: hidden;
  }
}

.l-nav__panel {
  position: absolute;
  top: 100%;
  left: -1.3rem;
  z-index: var(--z-header);
  width: max-content;
  max-width: 52rem;
  background-color: rgba(255, 58, 35, .9);
  color: var(--color-text-invert);
  visibility: hidden;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 3.27rem),
    calc(100% - 2.89rem) 100%,
    0 100%
  );
}

.l-nav__item--end .l-nav__panel {
  right: -1.3rem;
  left: auto;
}

.l-nav__panel.is-open {
  visibility: visible;
}

.l-nav__panel[hidden] {
  display: none;
}

.l-nav__panel::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 3.4rem;
  aspect-ratio: 38 / 37;
  background: url("../img/common/nav-curl.svg") no-repeat right bottom / contain;
  opacity: .9;
  pointer-events: none;
}

.l-nav__panel-inner {
  max-height: calc(100vh - 15rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 5.5rem 5rem;
}

.l-nav__panel-inner::-webkit-scrollbar {
  display: none;
}

.l-nav__panel-title {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
}

.l-nav__panel-list {
  margin-top: 2.2rem;
}

.l-nav__panel-link {
  display: block;
  min-height: 3.1rem;
  padding: .5rem 0;
  font-size: 1.4rem;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: .25em;
  overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
  .l-nav__link:hover {
    opacity: 1;
    color: var(--color-primary);
  }

  .l-nav__link:hover::before {
    opacity: 1;
  }
}

html:not(.js) .l-nav__item:hover .l-nav__panel,
html:not(.js) .l-nav__item:focus-within .l-nav__panel {
  visibility: visible;
}

/* --- ハンバーガー（SP） --- */
.l-hamburger {
  display: none;
  position: relative;
  z-index: calc(var(--z-drawer) + 1);
  width: 4.4rem;
  height: 4.4rem;
  background-color: transparent;
  cursor: pointer;
}

.l-hamburger__bar {
  position: absolute;
  left: 50%;
  width: 2.4rem;
  height: .2rem;
  background-color: var(--color-primary);
  transform: translateX(-50%);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}

.l-hamburger__bar:nth-child(2) {
  top: 1.4rem;
}

.l-hamburger__bar:nth-child(3) {
  top: 2.1rem;
}

.l-hamburger__bar:nth-child(4) {
  top: 2.8rem;
}

.l-hamburger[aria-expanded="true"] .l-hamburger__bar:nth-child(2) {
  transform: translateX(-50%) translateY(.7rem) rotate(45deg);
}

.l-hamburger[aria-expanded="true"] .l-hamburger__bar:nth-child(3) {
  opacity: 0;
}

.l-hamburger[aria-expanded="true"] .l-hamburger__bar {
  background-color: var(--color-text-invert);
}

.l-hamburger[aria-expanded="true"] .l-hamburger__bar:nth-child(4) {
  transform: translateX(-50%) translateY(-.7rem) rotate(-45deg);
}

/* --- ドロワー（SP） --- */
.l-hamburger[aria-expanded="true"] {
  visibility: hidden;
}

.l-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: rgba(255, 255, 255, .94);
  visibility: hidden;
}

.l-drawer.is-open {
  visibility: visible;
}

.l-drawer[hidden],
.l-drawer__panel[hidden] {
  display: none;
}

.l-drawer__close {
  position: sticky;
  top: max(1.2rem, env(safe-area-inset-top));
  left: calc(100% - 5.6rem);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--color-text-invert);
  cursor: pointer;
}

.l-drawer__close-icon {
  position: relative;
  width: 3rem;
  height: 3rem;
}

.l-drawer__close-icon::before,
.l-drawer__close-icon::after {
  content: '';
  position: absolute;
  top: calc(50% - .15rem);
  left: 0;
  width: 100%;
  height: .3rem;
  background-color: currentColor;
  transform: rotate(45deg);
}

.l-drawer__close-icon::after {
  transform: rotate(-45deg);
}

.l-drawer .l-inner {
  width: 100%;
  max-width: none;
}

.l-drawer__menu {
  margin-top: -4.4rem;
  padding-top: max(8rem, calc(env(safe-area-inset-top) + 6.8rem));
  padding-bottom: 4rem;
  background-color: rgba(255, 58, 35, .9);
}

.l-drawer__item {
  position: relative;
}

.l-drawer__item::before {
  content: '';
  position: absolute;
  right: 2.7rem;
  bottom: 0;
  left: 2.7rem;
  height: .1rem;
  background-color: var(--color-text-invert);
  pointer-events: none;
}

.l-drawer__item--parent::before {
  right: 4.1rem;
}

.l-drawer__item--parent::after {
  content: '';
  position: absolute;
  right: 2.7rem;
  bottom: 0;
  width: 1.6rem;
  aspect-ratio: 38 / 37;
  background: url("../img/common/nav-curl.svg") no-repeat right bottom / contain;
  pointer-events: none;
}

.l-drawer__link,
.l-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 8.1rem;
  padding: 2rem 2.7rem;
  border: 0;
  background: transparent;
  color: var(--color-text-invert);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.l-drawer__toggle[aria-expanded="true"] {
  background-color: #ffeceb;
  color: var(--color-primary);
}

.l-drawer__sublist {
  padding: 2.4rem 2.7rem 3.2rem;
}

.l-drawer__sublink {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.4rem;
  padding: .6rem 0;
  color: var(--color-text-invert);
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: .25em;
  overflow-wrap: anywhere;
}

.l-drawer__sublink--parent {
  margin-bottom: 1.6rem;
  font-size: 1.8rem;
  font-weight: 700;
}

.l-drawer__foot {
  padding: 4rem 3.6rem 8rem;
  background-color: var(--color-bg-white);
}

.l-drawer__search-form {
  display: flex;
  align-items: stretch;
  min-height: 4.4rem;
  border: .1rem solid var(--color-text);
}

.l-drawer__search-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: .6rem .8rem;
  border: 0;
  background-color: transparent;
  color: var(--color-text);
  font-size: 1.8rem;
}

.l-drawer__search-submit {
  order: -1;
  display: grid;
  place-items: center;
  flex: 0 0 4.4rem;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.l-drawer__search-icon {
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
  border: .15rem solid currentColor;
  border-radius: 50%;
}

.l-drawer__search-icon::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 100%;
  width: .7rem;
  border-top: .15rem solid currentColor;
  transform: rotate(45deg);
  transform-origin: left;
}

.l-drawer__cta {
  display: flex;
  width: 100%;
  min-height: 4.4rem;
  margin-top: 4rem;
  padding: .8rem 1.6rem;
}

.l-drawer__sns {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  margin-top: 5.6rem;
}

.l-drawer__sns-link {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
}

.l-drawer__sns-link img {
  width: 3.2rem;
  height: auto;
}

.l-drawer__logo {
  margin-top: 2.4rem;
  text-align: center;
}

.l-drawer__logo img {
  width: 100%;
  max-width: 32rem;
  height: auto;
}

.l-drawer__toggle:focus-visible,
.l-drawer__link:focus-visible,
.l-drawer__sublink:focus-visible,
.l-drawer__close:focus-visible,
.l-drawer__search-input:focus-visible,
.l-drawer__search-submit:focus-visible {
  outline: .2rem solid var(--color-text);
  outline-offset: -.3rem;
}

/* --- メイン --- */
.l-main {
  display: block;
}

/* --- フッター --- */
.l-footer {
  background-color: var(--color-bg-cream);
}

.l-footer__top {
  display: flex;
  align-items: center;
  min-height: 15rem;
  background-color: var(--color-bg-white);
  border-top: .8rem solid var(--color-primary);
}

.l-footer__brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3.5rem;
}

.l-footer__logo img {
  width: 28rem;
}

.l-footer__logo a {
  display: block;
}

.l-footer__brand .l-footer__sns {
  display: flex;
}

.l-footer__sns {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.l-footer__sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
}

.l-footer__sns-link img {
  width: 2.5rem;
}

.l-footer__inner {
  display: flex;
  flex-direction: column;
  padding-top: 3.3rem;
}

.l-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem;
}

.l-footer__nav-heading-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.6rem;
}

.l-footer__nav-group {
  margin-top: 2.5rem;
}

.l-footer__nav-group:first-child {
  margin-top: 0;
}

.l-footer__nav-heading {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary);
}

.l-footer__nav-list {
  margin-top: .4rem;
}

.l-footer__nav-col:last-child .l-footer__nav-list {
  margin-top: 0;
}

.l-footer__nav-item {
  margin-top: 0;
}

.l-footer__nav-link {
  display: flex;
  align-items: center;
  min-height: 3.6rem;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: var(--color-primary);
}

.l-footer__note {
  margin-top: 4rem;
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text);
}

.l-footer__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  margin-top: .5rem;
  background-color: var(--color-primary);
}

.l-footer__copy-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.l-footer__copyright {
  padding: 1.4rem 0;
  font-size: 1.1rem;
  color: var(--color-text-invert);
}

.l-footer__copy-links {
  padding: 1.4rem 0;
  font-size: 1.1rem;
  color: var(--color-text-invert);
}

.l-footer__copy-link {
  display: inline-flex;
  align-items: center;
  min-height: 3.6rem;
  padding: 0.1rem 0;
  font-size: 1.1rem;
  color: var(--color-text-invert);
}

/* --- ページトップボタン --- */
.l-pagetop {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: var(--z-sticky);
  display: grid;
  place-items: center;
  width: 5.6rem;
  height: 5.6rem;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}

.l-pagetop.is-visible {
  opacity: 1;
  visibility: visible;
}

.l-pagetop__icon {
  width: 1.4rem;
  height: 1.4rem;
  border-top: .3rem solid var(--color-text-invert);
  border-left: .3rem solid var(--color-text-invert);
  transform: translateY(.3rem) rotate(45deg);
}

/* ==========================================================================
   4. Component
   ========================================================================== */

/* --- セクションタイトル（帯見出し） --- */
.c-section-title {
  display: block;
  padding: 1.2rem 2rem;
  font-family: var(--font-heading);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--color-text-invert);
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

.c-section-title--plain {
  color: var(--color-primary);
  background-color: transparent;
}

.c-section-title__sub {
  display: block;
  margin-top: .6rem;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: .1em;
}

/* --- 見出し --- */
.c-heading {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.4;
}

.c-heading--h1 {
  font-size: 3.5rem;
}

.c-heading--h2 {
  font-size: 2.6rem;
}

.c-heading--h3 {
  font-size: 2.2rem;
}

.c-heading--h4 {
  font-size: 1.8rem;
}

.c-heading--bar {
  padding-left: 1.6rem;
  border-left: .6rem solid var(--color-primary);
}

.c-heading--dot {
  display: flex;
  align-items: flex-start;
  gap: .5em;
}

.c-heading--dot::before {
  content: "";
  flex: 0 0 auto;
  width: .6em;
  height: .6em;
  margin-top: .4em;
  background-color: var(--c-heading-dot, var(--color-secondary));
  border-radius: var(--radius-full);
}

/* --- ボタン --- */
.c-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 4.8rem;
  padding: 1.2rem 4rem;
  overflow: hidden;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--color-text-invert);
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: color .4s ease;
}

.c-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-bg-white);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path .4s ease;
  pointer-events: none;
}

.c-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border: .2rem solid var(--color-primary);
  border-radius: inherit;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .c-button:hover {
    color: var(--color-primary);
    opacity: 1;
  }

  .c-button:hover::before {
    clip-path: circle(71% at 50% 50%);
  }

  .c-button:hover::after {
    opacity: 1;
  }
}

.c-button:focus-visible {
  color: var(--color-primary);
}

.c-button:focus-visible::before {
  clip-path: circle(71% at 50% 50%);
}

.c-button:focus-visible::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .c-button,
  .c-button::before,
  .c-button::after {
    transition: none;
  }
}

.c-button--secondary {
  background-color: var(--color-secondary);
}

/* --- outline：色の変化を反転（赤い円・白文字） --- */
.c-button--outline {
  color: var(--color-primary);
  background-color: var(--color-bg-white);
  border: .2rem solid var(--color-primary);
}

.c-button--outline::before {
  background-color: var(--color-primary);
}

.c-button--outline::after {
  content: none;
}

@media (hover: hover) and (pointer: fine) {
  .c-button--outline:hover {
    color: var(--color-text-invert);
  }
}

.c-button--outline:focus-visible {
  color: var(--color-text-invert);
}

.c-button--small {
  min-height: 4.4rem;
  padding: .8rem 2.4rem;
  font-size: 1.3rem;
}

.c-button__icon {
  flex-shrink: 0;
  width: .8rem;
  height: .8rem;
  border-top: .2rem solid currentColor;
  border-right: .2rem solid currentColor;
  transform: rotate(45deg);
}

/* --- ラベル / タグ --- */
.c-tag {
  display: inline-block;
  padding: .3rem 1.2rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-invert);
  background-color: var(--color-secondary);
  border-radius: var(--radius-full);
}

.c-tag--primary {
  background-color: var(--color-primary);
}

.c-tag--outline {
  color: var(--color-primary);
  background-color: var(--color-bg-white);
  border: .1rem solid var(--color-primary);
}

/* --- カード --- */
.c-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-bg-white);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}

.c-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.c-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-bg-cream);
}

.c-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: .8rem;
  padding: 1.6rem;
}

.c-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  font-size: 1.2rem;
  color: var(--color-text-sub);
}

.c-card__title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.c-card__text {
  font-size: 1.4rem;
  color: var(--color-text-sub);
}

/* --- カードグリッド --- */
.c-card-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
}

.c-card-list--col3 {
  grid-template-columns: repeat(3, 1fr);
}

.c-card-list--col2 {
  grid-template-columns: repeat(2, 1fr);
}

/* --- パートナーロゴ --- */
.c-logo-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.4rem 4rem;
}

.c-logo-list__item {
  display: grid;
  place-items: center;
}

.c-logo-list__item img {
  width: auto;
  max-height: 4.8rem;
}

/* --- 協賛ロゴ（footer.php から全ページで出力） --- */
.c-sponsor {
  padding: 0 0 6rem;
  background-color: var(--color-bg-white);
}

.c-sponsor__inner {
  padding-top: 4rem;
  border-top: .8rem solid var(--color-primary);
}

/* --- ロゴの並びと大きさ --- */
.c-sponsor__list {
  --sponsor-gap-x: 2rem;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 2rem var(--sponsor-gap-x);
}

.c-sponsor__item--lead {
  grid-column: 1 / -1;
}

.c-sponsor__link {
  display: block;
}

.c-sponsor__logo-frame {
  display: block;
  width: 100%;
}

.c-sponsor__item--lead .c-sponsor__logo-frame {
  max-width: 28rem;
}

.c-sponsor__logo {
  display: block;
  width: 100%;
  height: auto;
}

/* --- パンくず --- */
.c-breadcrumb {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  font-size: 1.2rem;
  color: var(--color-text-sub);
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.2rem;
}

.c-breadcrumb__item:not(:last-child)::after {
  content: ">";
  margin-left: 1.2rem;
  color: var(--color-border-strong);
}

.c-breadcrumb__link {
  text-decoration: underline;
}

/* --- ページネーション --- */
.c-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .8rem;
}

.c-pagination .page-numbers {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary);
  background-color: var(--color-bg-white);
  border: .1rem solid var(--color-primary);
  border-radius: var(--radius-full);
}

.c-pagination .page-numbers.current {
  color: var(--color-text-invert);
  background-color: var(--color-primary);
}

/* --- タブ --- */
.c-tab__list {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.c-tab__button {
  min-height: 4.4rem;
  padding: .5rem 2rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  background-color: var(--color-bg-white);
  border: .2rem solid var(--color-primary);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.c-tab__button[aria-selected="true"] {
  color: var(--color-text-invert);
  background-color: var(--color-primary);
}

.c-tab__panel[hidden] {
  display: none;
}

/* --- アコーディオン --- */
.c-accordion__item {
  overflow: hidden;
  background-color: var(--color-bg-white);
  border-radius: var(--radius-m);
}

.c-accordion__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  width: 100%;
  min-height: 4.8rem;
  padding: 1.6rem 2rem;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: left;
  background-color: transparent;
  cursor: pointer;
}

.c-accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
}

.c-accordion__icon::before,
.c-accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: .2rem;
  background-color: var(--color-primary);
  transition: transform .3s var(--ease);
}

.c-accordion__icon::after {
  transform: rotate(90deg);
}

.c-accordion__button[aria-expanded="true"] .c-accordion__icon::after {
  transform: rotate(0deg);
}

.c-accordion__panel {
  padding: 0 2rem 2rem;
  font-size: 1.5rem;
}

.c-accordion__panel[hidden] {
  display: none;
}

/* --- モーダル --- */
.c-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 2rem;
  background-color: var(--color-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}

.c-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.c-modal__body {
  position: relative;
  width: 100%;
  max-width: 80rem;
  max-height: 85vh;
  padding: 4rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--color-bg-white);
  border-radius: var(--radius-m);
}

.c-modal__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 4.4rem;
  height: 4.4rem;
  background-color: transparent;
  cursor: pointer;
}

/* --- 本文（投稿エディタ出力） --- */
.c-entry {
  font-size: 1.8rem;
  line-height: 1.9;
}

.c-entry > * + * {
  margin-top: 2.4rem;
}

.c-entry h2 {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
}

.c-entry h3 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}

.c-entry a {
  color: var(--color-link);
  text-decoration: underline;
}

.c-entry ul li {
  padding-left: 1.6rem;
  list-style: disc inside;
}

.c-entry ol li {
  padding-left: 1.6rem;
  list-style: decimal inside;
}

.c-entry table {
  width: 100%;
  font-size: 1.5rem;
}

.c-entry th,
.c-entry td {
  padding: 1.2rem 1.6rem;
  border: .1rem solid var(--color-border);
}

.c-entry th {
  font-weight: 700;
  text-align: left;
  background-color: var(--color-bg-cream);
}

.c-scroll-x {
  overflow-x: auto;
}

/* --- 下層ページのタイトル --- */
.c-page-title {
  padding-top: 4rem;
  padding-bottom: 4rem;
  text-align: center;
  background-color: var(--color-bg-cream);
}

.c-page-title__main {
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.3;
}

/* --- 検索フォーム --- */
.c-searchform {
  display: flex;
  align-items: stretch;
  gap: .8rem;
}

.c-searchform__input {
  flex-grow: 1;
  min-height: 4.4rem;
  padding: .8rem 1.6rem;
  font-size: 1.8rem;
  background-color: var(--color-bg-white);
  border: .1rem solid var(--color-border-strong);
  border-radius: var(--radius-s);
}

.c-searchform__submit {
  min-height: 4.4rem;
  padding: .8rem 2rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text-invert);
  background-color: var(--color-primary);
  border-radius: var(--radius-s);
  cursor: pointer;
}

/* --- 空表示 --- */
.c-empty {
  padding: 6rem 2rem;
  font-size: 1.8rem;
  text-align: center;
  color: var(--color-text-sub);
}

/* --- スクロール連動アニメーション --- */
.c-fadein {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.c-fadein.is-active {
  opacity: 1;
  transform: translateY(0);
}

.c-img-fadein {
  opacity: 0;
  translate: 0 2rem;
  transition: opacity .8s var(--ease), translate .8s var(--ease);
}

.c-img-fadein.is-shown {
  opacity: 1;
  translate: 0 0;
}

/* ==========================================================================
   5. Utility
   ========================================================================== */
.u-pc-only {
  display: block;
}

.u-sp-only {
  display: none;
}

.u-tab-hidden {
  display: block;
}

.u-nowrap {
  white-space: nowrap;
}

.u-text-center {
  text-align: center;
}

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

.c-skip-link:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: calc(var(--z-modal) + 1);
  width: auto;
  height: auto;
  padding: 1.2rem 1.6rem;
  overflow: visible;
  clip: auto;
  white-space: normal;
  color: var(--color-text);
  background-color: var(--color-bg-white);
  border: .2rem solid var(--color-primary);
  border-radius: .4rem;
}

/* ==========================================================================
   6. Media Queries
   ========================================================================== */

/* --- タブレット・PC 狭幅 --- */
@media screen and (max-width: 999px) {
  .l-header__catch {
    display: none;
  }

  :root {
    --nav-height: 0rem;
  }

  .l-nav {
    display: none;
  }

  .l-hamburger {
    display: block;
  }

  .l-drawer {
    display: block;
  }

  .l-header__cta,
  .l-header__search {
    display: none;
  }

  .c-card-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .c-section-title {
    font-size: 2.8rem;
  }

  .u-tab-hidden {
    display: none;
  }

  .l-footer__nav {
  grid-template-columns: 1fr 1fr;
  gap: 3rem 2rem;
}
}

/* --- スマートフォン --- */
@media screen and (max-width: 767px) {
  /* --- ページ送り --- */
  .c-pagination__list {
    gap: .4rem;
  }

  .c-pagination .page-numbers {
    width: 3.8rem;
    height: 3.8rem;
    font-size: 1.2rem;
  }

  .c-pagination .page-numbers.dots {
    width: 1.5rem;
    border: none;
    background: transparent;
  }

  .l-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .l-section__body {
    margin-top: 2.4rem;
  }

  .l-header__logo img {
    max-height: none;
    width: 100%;
    height: auto;
  }

.l-footer__brand {
  justify-content: center;
}

.l-footer__nav-heading-row .l-footer__sns {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  gap: .5rem;
}

.l-footer__nav {
  grid-template-columns: 1fr;
  gap: 2.4rem;
}

.l-footer__copy-inner {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.l-footer__copy-links {
  order: 1;
  padding: 0;
  font-size: 1rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.l-footer__copyright {
  order: 2;
  align-self: center;
  padding: 0;
  font-size: 1rem;
  text-align: center;
}

  .l-pagetop {
    right: 1.2rem;
    bottom: 1.2rem;
    width: 4.8rem;
    height: 4.8rem;
  }

  .c-section-title {
    padding: 1rem 1.6rem;
    font-size: 2.2rem;
  }

  .c-heading {
    font-size: 2rem;
  }

  .c-heading--h1 {
    font-size: 2.4rem;
  }

  .c-heading--h2 {
    font-size: 2rem;
  }

  .c-heading--h3 {
    font-size: 1.8rem;
  }

  .c-heading--h4 {
    font-size: 1.8rem;
  }

  .c-page-title__main {
    font-size: 2.4rem;
  }

  .c-card-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
  }

  .c-card-list--col3,
  .c-card-list--col2 {
    grid-template-columns: repeat(1, 1fr);
  }

  .c-sponsor .l-inner {
    width: calc(100% - 1.6rem);
  }

  .c-sponsor__list {
    --sponsor-gap-x: .8rem;

    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.8rem var(--sponsor-gap-x);
  }

  .c-sponsor__item--lead .c-sponsor__logo-frame {
    max-width: calc(((100% - var(--sponsor-gap-x)) / 2) * 1.45);
  }

  .c-modal__body {
    padding: 2.4rem;
  }

  .c-entry {
    font-size: 1.5rem;
  }

  .u-pc-only {
    display: none;
  }

  .u-sp-only {
    display: block;
  }

  .l-header__top{
    border-bottom: .2rem solid var(--color-primary);
  }

  .l-header__inner{
    min-height: calc(var(--header-height) - .2rem);
    gap: 1.6rem;
  }

  .l-header__logo{
    width: min(21rem, calc(100% - 6rem));
  }

  .l-header__utility{
    flex-shrink: 0;
    gap: 0;
  }

  .l-header__sns, .l-nav.u-pc-only, .l-footer__brand .l-footer__sns{
    display: none;
  }

  .l-hamburger__bar{
    width: 3.6rem;
    height: .3rem;
  }

  .l-hamburger__bar:nth-child(2){
    top: 1rem;
  }

  .l-hamburger__bar:nth-child(3){
    top: 2.1rem;
  }

  .l-hamburger__bar:nth-child(4){
    top: 3.2rem;
  }

  .l-hamburger[aria-expanded="true"] .l-hamburger__bar:nth-child(2){
    transform: translateX(-50%) translateY(1.1rem) rotate(45deg);
  }

  .l-hamburger[aria-expanded="true"] .l-hamburger__bar:nth-child(4){
    transform: translateX(-50%) translateY(-1.1rem) rotate(-45deg);
  }

  .l-footer__top{
    min-height: 14.4rem;
  }

  .l-footer__logo{
    width: 28rem;
    max-width: 100%;
  }

  .l-footer__logo img{
    width: 100%;
    height: auto;
  }

  .l-footer__inner{
    padding-top: 4rem;
  }

  .l-footer__nav-heading-row{
    position: relative;
    display: block;
    padding-right: 11rem;
  }

  .l-footer__nav-heading-row .l-footer__sns-link img{
    width: 3rem;
  }

  .l-footer__nav-heading{
    line-height: 1.5;
  }

  .l-footer__nav-group--sub{
    margin-top: 2.4rem;
  }

  .l-footer__note{
    margin-top: 4rem;
    font-size: 1rem;
    line-height: 1.4;
  }

  .l-footer__copy{
    margin-top: 1.6rem;
  }

  .l-footer__copy-link{
    font-size: inherit;
    min-height: 0;
  }

  .l-inner{
    width: calc(100% - 3.2rem);
  }

}

/* ==========================================================================
   7. 全ページ共通の上書き
   ========================================================================== */

.l-nav__link::before,
.l-nav__panel-link,
.l-nav__panel-title-link,
.l-drawer__sublink {
  transition: opacity .2s var(--ease), color .2s var(--ease);
}

.l-nav__panel {
  opacity: 0;
  transform: translateY(-.6rem);
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}

.l-nav__panel.is-open,
html:not(.js) .l-nav__item:hover .l-nav__panel,
html:not(.js) .l-nav__item:focus-within .l-nav__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.l-nav__panel[hidden] {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-.6rem);
  pointer-events: none;
}

/* --- カードの影 --- */
body .c-card,
body .c-page-title__panel,
body .p-initiative__card,
body .p-character__profile,
body .p-character__social,
body .p-partner__card,
body .p-special__card,
body .p-special .p-special-archive__thumb,
body .p-special-archive__section .p-special-archive__card,
body .p-partner-card__link,
body .p-partner-group__link,
body .p-partner-profile__summary,
body .p-partner-profile__feature,
body .p-partner-profile__lead,
body .p-column__card,
body .p-column-single__free,
body .p-column-single__article-body,
body .p-column-single__body,
body .p-about__flow,
body .p-about__step,
body .p-about__link,
body .p-about-single__intro,
body .p-about-single__free,
body .p-about-single__article-body,
body .p-about-single__body,
body .p-character-media,
body .p-character-download,
body .p-character-insta__panel,
body .p-member-topics__card,
body .p-member-download__card,
body .p-news__link,
body .p-search__guide {
  box-shadow: var(--shadow-content-card);
}

/* --- SPの本文サイズ --- */
@media screen and (max-width: 767px) {
  body {
    font-size: 1.6rem;
  }

  body .p-measures__note-label,
  body .p-partner__name,
  body .p-special .p-special-archive__placeholder,
  body .p-special-archive__empty,
  body .p-special-archive__placeholder,
  body .p-partner-profile,
  body .p-column__lead,
  body .p-column-single__comment,
  body .p-column-single__profile-text,
  body .p-column-single__free,
  body .p-column-single__article-body,
  body .p-column-single__body,
  body .p-about,
  body .p-about__text,
  body .p-about__step-text,
  body .p-about__link-text,
  body .p-about__message-text,
  body .p-about-single__comment,
  body .p-about-single__free,
  body .p-about-single__article-body,
  body .p-about-single__body,
  body .p-notfound__body,
  body .p-contact [data-screen="confirm"] .smf-placeholder {
    font-size: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l-nav__panel,
  .l-nav__link::before,
  .l-nav__panel-link,
  .l-nav__panel-title-link,
  .l-drawer__sublink {
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   8. Print
   ========================================================================== */
@media print {
  body .c-img-fadein {
    opacity: 1;
    translate: none;
  }

  body.is-fixed {
    position: static;
    overflow: visible;
  }

  @page {
    margin: 15mm;
  }

  body {
    background-color: #fff;
  }

  body .l-header,
  body .l-drawer,
  body .l-pagetop,
  body .l-footer__nav,
  body .c-breadcrumb,
  body .c-pagination {
    display: none;
  }

  body .l-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  body .c-card,
  body .c-entry {
    break-inside: avoid;
  }

  body .c-button,
  body .c-section-title:not(.c-section-title--plain),
  body .p-partner__group-name,
  body .l-footer__copyright,
  body .l-footer__copy-links,
  body .l-footer__copy .l-footer__copy-link {
    color: var(--color-text);
  }

  body .p-mv__arrow,
  body .p-mv__dots,
  body .p-mv__item--clone,
  body .p-initiative__filters,
  body .p-initiative__arrows,
  body .p-initiative__scroll-control {
    display: none;
  }

  body .p-mv,
  body .p-initiative {
    overflow: visible;
  }

  body .p-mv__list,
  body .p-initiative__list {
    display: block;
    width: auto;
    padding: 0;
    overflow: visible;
  }

  body .p-mv__item,
  body .p-mv__item.is-active,
  body .p-initiative__item {
    width: auto;
    max-width: 100%;
    margin-top: 1.6rem;
    opacity: 1;
    transform: none;
    break-inside: avoid;
  }
}