@charset "UTF-8";
/*
$c_main: #DB0000;
$c_sub: #E9A87D;
$c_accent: #E64D4D;
$c_btn: #FF7043;
$c_btn_hover: #F4511E;
$c_sns_line: #06C755;
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap&family=Oswald&display=swap");
/* ============================================================
   common.scss (refactored: BEM + mobile-first)
   - Base / Utilities
   - Containers (.h-container / .c-container / .f-container)
   - Header (.site-header / .gnav)
   - Footer (.site-footer)
   - PageTop Button
   ============================================================ */
/* ------------------------------------------------------------
   CSS Vars
------------------------------------------------------------ */
:root {
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Kozuka Mincho Pro", "Noto Serif JP", "IPAexMincho", serif;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
}

/* ------------------------------------------------------------
   Base
------------------------------------------------------------ */
html {
  /* 1rem = 10px */
  font-size: 10px !important;
  scroll-behavior: smooth;
  overflow-x: hidden;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  font-family: "kozuka-gothic-pr6n", "Noto Sans JP", -apple-system, system-ui, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-size: 1.6rem;
  line-height: 2;
  color: #222;
  background: #fff;
  min-height: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

picture {
  display: block;
  line-height: 0;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: opacity 0.15s ease-out;
  transition: opacity 0.15s ease-out;
}
a:hover {
  opacity: 0.9;
}

/* ------------------------------------------------------------
   Containers
   - ヘッダー専用: .h-container
   - コンテンツ専用: .c-container
   - フッター専用: .f-container
------------------------------------------------------------ */
.h-container {
  position: relative;
  width: 100%;
  max-width: 1952px;
  padding-inline: 16px;
  margin-inline: auto;
}

.c-container {
  position: relative;
  width: 100%;
  max-width: 1432px;
  padding-inline: 32px;
  margin-inline: auto;
}
@media (min-width: 1400px) {
  .c-container {
    padding-inline: 16px;
  }
}

.f-container, .site-footer__inner {
  position: relative;
  max-width: 1432px;
  padding-inline: 32px;
  margin-inline: auto;
}
@media (min-width: 1400px) {
  .f-container, .site-footer__inner {
    padding-inline: 16px;
  }
}

/* ------------------------------------------------------------
   Visibility helpers (mobile-first)
   - .sp : show on < xl, hide on >= xl
   - .pc : hide on < xl, show on >= xl
------------------------------------------------------------ */
.sp {
  display: block !important;
}

.pc {
  display: none !important;
}

@media (min-width: 1200px) {
  .sp {
    display: none !important;
  }
  .pc {
    display: initial !important;
  }
}
/* =========================
  Header
   ========================= */
.site-header {
  background: #FFFFFF;
  /* 右端リンク：通常はテキスト、ホバーで反転（背景#222/文字#fff） */
}
.site-header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.75rem;
  padding: 0 1rem;
  min-height: 26px;
}
@media (min-width: 768px) {
  .site-header__inner {
    min-height: 88px;
    padding: 0 1.75rem;
  }
}
.site-header__brand {
  display: block;
  text-decoration: none;
  color: inherit;
}
.site-header__title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0.5em;
  line-height: 1;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .site-header__title {
    gap: 1em;
  }
}
.site-header__title-main {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.2rem, 0.24rem + 3vw, 4.2rem);
  letter-spacing: -0.05em;
}
.site-header__title-sub {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1rem, 0.36rem + 2vw, 3rem);
  letter-spacing: -0.05em;
}
.site-header__right {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25em;
}
.site-header__divider {
  display: inline-block;
  width: 1px;
  height: 28px;
  background: #d7dde3;
}
@media (min-width: 768px) {
  .site-header__divider {
    display: none;
  }
}
.site-header__about-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 36px;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1rem, 0.36rem + 2vw, 2.4rem);
  line-height: 1;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
  color: #464646;
  background: #FFFFFF;
  padding: 0.25em;
}
@media (min-width: 768px) {
  .site-header__about-link {
    border-radius: 9999px;
    background: #464646;
    color: #FFFFFF;
    border: 1px solid #464646;
    padding: 0.5em 1em;
  }
}
.site-header__about-link:hover, .site-header__about-link:active {
  color: #FFFFFF;
  background: #464646;
}
@media (min-width: 768px) {
  .site-header__about-link:hover, .site-header__about-link:active {
    color: #464646;
    background: #FFFFFF;
  }
}
.site-header__about-link:focus-visible {
  outline: 0;
  -webkit-box-shadow: 0 0 0 3px rgba(76, 159, 254, 0.3);
          box-shadow: 0 0 0 3px rgba(76, 159, 254, 0.3);
}

/* ============================================================
   Footer
   - カテゴリ色は .site-footer__item.category* によって付与
   - カラーは CSS変数 --cat-color に集約（リンク側で参照）
============================================================ */
.site-footer {
  background: #FFFFFF;
  color: #222;
  border-top: 1px solid #ddd;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  padding-top: clamp(60px, 10vw, 192px);
  padding-bottom: clamp(60px, 10vw, 192px);
  /* =========================
   * カテゴリカラー定義
   * =======================*/
  /* titles */
  /* menu (カラムレイアウト) */
  /* layout detail for columns */
  /* copyright */
}
.site-footer__item.category1 {
  --cat-color: #00A99D;
}
.site-footer__item.category2 {
  --cat-color: #FF0000;
}
.site-footer__item.category3 {
  --cat-color: #29ABE2;
}
.site-footer__item.category4 {
  --cat-color: #F7931E;
}
.site-footer__item.category5 {
  --cat-color: #8CC63F;
}
.site-footer__site-title {
  font-weight: 700;
  font-size: clamp(1.8rem, 0.84rem + 3vw, 4.8rem);
}
.site-footer__menu {
  display: -ms-grid;
  display: grid;
  gap: 14px;
  -ms-grid-columns: 1fr 14px 1fr;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row;
  margin-top: clamp(1.8rem, 0.84rem + 3vw, 4.8rem);
}
@media (min-width: 992px) {
  .site-footer__menu {
    gap: 24px;
    -ms-grid-columns: 1fr 24px 1fr 24px 1fr;
    grid-template-columns: repeat(3, 1fr);
  }
}
.site-footer__col-title {
  margin-bottom: 1em;
}
.site-footer__col-rule {
  display: block;
  height: 6px;
  background: #bcbcbc;
}
@media (min-width: 992px) {
  .site-footer__col-rule {
    height: 12px;
  }
}
.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__item + .site-footer__item {
  margin-top: 0.5rem;
}
.site-footer__col-link, .site-footer__link {
  position: relative;
  display: inline-block;
  font-size: clamp(1.4rem, 0.76rem + 2vw, 3.2rem);
  font-weight: 500;
  text-decoration: none;
  color: var(--cat-color, currentColor);
  -webkit-transition: color 0.3s ease, -webkit-transform 0.3s ease;
  transition: color 0.3s ease, -webkit-transform 0.3s ease;
  transition: color 0.3s ease, transform 0.3s ease;
  transition: color 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
  /* hover時に軽く浮かせる＋下からバー */
}
.site-footer__col-link::after, .site-footer__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background-color: var(--cat-color, #000000);
  -webkit-transition: width 0.3s ease, background-color 0.3s ease;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.site-footer__col-link:hover, .site-footer__col-link:focus-visible, .site-footer__link:hover, .site-footer__link:focus-visible {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  outline: none;
}
.site-footer__col-link:hover::after, .site-footer__col-link:focus-visible::after, .site-footer__link:hover::after, .site-footer__link:focus-visible::after {
  width: 100%;
}
.site-footer__col-link:active, .site-footer__link:active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 0.8;
}
.site-footer__col:nth-child(1) {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 1;
  grid-row: 1;
}
.site-footer__col:nth-child(2) {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 2;
  grid-row: 2;
}
.site-footer__col:nth-child(3) {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1/span 2;
  border-left: 1px solid #BEBEBE;
  padding-left: 14px;
}
@media (min-width: 992px) {
  .site-footer__col:nth-child(1) {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
  }
  .site-footer__col:nth-child(2) {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 1;
    grid-row: 1;
    border-left: 1px solid #BEBEBE;
    padding-left: 24px;
  }
  .site-footer__col:nth-child(3) {
    -ms-grid-column: 3;
    grid-column: 3;
    -ms-grid-row: 1;
    grid-row: 1;
    border-left: 1px solid #BEBEBE;
    padding-left: 24px;
  }
}
.site-footer__copyright {
  text-align: center;
  padding-top: clamp(60px, 10vw, 192px);
}
.site-footer__copyright-text {
  font-size: clamp(1rem, 0.68rem + 1vw, 2rem);
}

/* 下からフェードイン（初期状態） */
.feadin {
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity 1.2s ease, -webkit-transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition: opacity 1.2s ease, -webkit-transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), -webkit-transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
  /* 遅延（data属性）を反映：例 200ms */
}
.feadin[data-feadin-delay] {
  -webkit-transition-delay: calc(attr(data-feadin-delay number) * 1ms);
          transition-delay: calc(attr(data-feadin-delay number) * 1ms);
}
@media (min-width: 1200px) {
  .feadin {
    -webkit-transform: translateY(24px);
            transform: translateY(24px);
  }
}

/* ビューポートに入った後の状態 */
.feadin.is-inview {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* =========================================
   Ornaments (generic, mobile-first)
   - ベースはご提示コードを維持
   - $breakpoint-xl 未満：薄く表示（重なり対策）
   - $breakpoint-xl 以上：不透明に戻す
========================================= */
.ornaments {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* ブレイクポイント（min-width） */
  /* ▼ $breakpoint-xl 以上は不透明に戻す（重なりに余裕が出るため） */
  /* xxl以上で表示開始（それ未満は非表示） */
}
.ornaments--back {
  z-index: 0;
}
.ornaments__spark {
  /* 基本カスタムプロパティ（継承OK） */
  --size: 20px;
  /* -md の既定サイズ（BPで上書き） */
  --x: 10px;
  /* 端からの距離（px/% 可） */
  --y: 18%;
  /* セクション高に対する位置（%） */
  --rgb: 255 255 255;
  /* ▼ デフォルトは “$breakpoint-xl 未満” を想定した薄さ */
  --alpha: .50;
  /* 共通の透明度。必要に応じて下げる/上げる */
  /* ※ 白は視認性のため個別でさらに薄く（下の .-white 参照） */
  position: absolute;
  top: var(--y);
  width: var(--size);
  aspect-ratio: 74/84;
  /* 提供SVG比 */
  background-color: rgba(var(--rgb)/var(--alpha));
  -webkit-filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
          filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
  /* 端寄せ */
  /* 形状（色は background-color で付与） */
  -webkit-mask: url(/assets/img/edge-spark.svg) center/contain no-repeat;
  mask: url(/assets/img/edge-spark.svg) center/contain no-repeat;
  /* 初回フェードイン */
  opacity: 0;
  -webkit-transform: translateY(8px) scale(0.95);
          transform: translateY(8px) scale(0.95);
  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition: opacity 0.5s ease, -webkit-transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  /* サイズ修飾子 */
  /* 普通 */
  /* 大きい */
  /* 色修飾子（αは共通の --alpha を使用） */
  /* 白はさらに薄め */
  /* #9AD5EA */
  /* #E08092 */
}
.ornaments__spark.-left {
  left: var(--x);
}
.ornaments__spark.-right {
  right: var(--x);
}
.ornaments__spark.is-on {
  opacity: 1;
  -webkit-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);
}
.ornaments__spark.-md {
  --size: 20px;
}
.ornaments__spark.-lg {
  --size: 32px;
}
.ornaments__spark.-white {
  --rgb: 255 255 255;
  --alpha: 1;
}
.ornaments__spark.-blue {
  --rgb: 154 213 234;
}
.ornaments__spark.-pink {
  --rgb: 224 128 146;
}
.ornaments__spark.-yellow {
  --rgb: 254 228 162;
}
@media (min-width: 768px) {
  .ornaments__spark {
    --x: 16px;
  }
  .ornaments__spark.-md {
    --size: 24px;
  }
  .ornaments__spark.-lg {
    --size: 40px;
  }
}
@media (min-width: 1400px) {
  .ornaments__spark {
    --x: 24px;
    --alpha: 1;
  }
  .ornaments__spark.-white {
    --alpha: 1;
  }
  .ornaments__spark.-md {
    --size: 28px;
  }
  .ornaments__spark.-lg {
    --size: 48px;
  }
}
.ornaments__human {
  /* 調整用カスタムプロパティ */
  --w: 140px;
  /* 幅（px/%可） */
  --x: 3%;
  /* 端からの距離（px/%可） */
  --y: 50%;
  /* セクション高に対する位置（%）＝上基準 */
  --bottom: auto;
  /* 下基準を使うときは値を入れる or .-bottom を付ける */
  position: absolute;
  display: none;
  /* モバイルファースト：xxl未満は非表示 */
  width: var(--w);
  height: auto;
  pointer-events: none;
  z-index: 2;
  /* 位置：上基準が既定。必要に応じて下基準を切り替え可能 */
  top: var(--y, auto);
  bottom: var(--bottom, auto);
  /* 左右寄せ（sparkと同じ記法） */
  /* 下基準で使いたいとき（topを無効化し bottom を使う） */
  /* ふわっと下から */
  opacity: 0;
  -webkit-transform: translateY(12px);
          transform: translateY(12px);
  -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition: opacity 0.6s ease, -webkit-transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), -webkit-transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  /* 左右反転したい場合（任意） */
}
.ornaments__human.-left {
  left: var(--x);
}
.ornaments__human.-right {
  right: var(--x);
}
.ornaments__human.-bottom {
  top: auto !important;
  bottom: var(--bottom, 0);
}
.ornaments__human.is-on {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.ornaments__human.-flip {
  -webkit-transform: scaleX(-1) translateY(12px);
          transform: scaleX(-1) translateY(12px);
}
.ornaments__human.-flip.is-on {
  -webkit-transform: scaleX(-1) translateY(0);
          transform: scaleX(-1) translateY(0);
}
@media (min-width: 1400px) {
  .ornaments__human {
    display: block;
  }
}
/*# sourceMappingURL=common.css.map */