@charset "UTF-8";
/*
Theme Name: まさきエンタメフェスタ2026
Theme URI: http://xxxxxxxxxxxxxxxx.jp/
Description: まさきエンタメフェスタ2026 オリジナルテーマ
Version: 1.0.0
Author: bamboo
Author URI: http://xxxxxxxxxxxxxxxx.jp/
*/
/* html5 reset*/
html {
  overflow-y: scroll;
}

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: transparent;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset, img {
  border: 0;
}

/* span は除外。ボタンや見出しの <span> が親の太字を打ち消してしまうため
   （font-weight は本来 inherit させるのが正しい） */
h1, h2, h3, h4, h5, h6, address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal;
}

li {
  list-style: none;
}

article, aside, dialog, figure, footer, header, hgroup, nav, section {
  display: block;
}

q:before, q:after {
  content: "";
}

abbr, acronym {
  border: 0;
  font-variant: normal;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

img {
  vertical-align: bottom;
}

/*sass用　ブレイクポイント定義*/
:root {
  --font-weight-Regular: 400;
  --font-weight-Medium: 500;
  --font-weight-SemiBold: 600;
  --font-weight-Bold: 700;
  --font-weight-Black: 900;
  /* --- font family ---
     ベースフォントは Noto Sans JP（Google Fonts / 400・700・900）。
     display と body は現状同じだが、見出しだけ別フォントに振る余地を残して分けている。 */
  --font-display: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
  --font-pixel: "Buildings and under the railway tracks free ver", var(--font-display);
  /* --- color ---*/
  --c-text: #333333;
  --c-blue: #1E76BB;
  --c-teal: #2493B4;
  --c-pink: #E9546B;
  --c-orange: #EA5504;
  --c-red: #FF0000;
  --c-green: #337100;
  --c-sky: #7AE1FF;
  --c-ivory: #F4F2ED;
  --c-craft-bg: #D7E7AF;
  --c-craft-bg2: #E9F2D3;
  --c-purple: #BB8DBE;
  --c-cream: #FFF9E5;
  /* --- layout ---*/
  --sp-max: 460px;
  --sp-half: calc(var(--sp-max) / 2); /* 固定要素をカラム端に寄せる計算用 */
  /* KVカラム幅。KV内の座標はすべてこの値を基準に算出する。
     ※ 100% にしてはいけない。width だけでなく top にも使うため、
        % だと top の時だけ「親の高さ」基準になり縦位置がずれる。 */
  --kvw: min(100vw, var(--sp-max));
  /* --- PC固定背景 (デザイン枠 1440 x 800) の座標系 ---
     ※ ここの % は「使う場所の包含ブロック」で解決される。
        使用箇所は .pc_bg / .pc_craft_link(fixed=ビューポート) と
        main > * / .l_header(=ページ全幅) のみで、いずれも基準幅が同じ。 */
  --stg-w: min(100%, 1440px); /* 水平の基準幅。1440で頭打ち */
  --stg-ox: calc((100% - min(100%, 1440px)) / 2); /* デザイン枠の左端 */
  --stg-v: min(100vw, 1440px); /* 垂直の拡大率基準（top に % は使えない） */
  --stg-oy: calc((100% - min(100vw, 1440px) * 800 / 1440) / 2); /* 枠(800)を画面中央に */
  /* メインフレーム左端。デザイン上カラムは中央ではなく右寄り(1440中 611.6) */
  --col-left: calc(var(--stg-ox) + var(--stg-w) * 611.6 / 1440);
  --pc-inner: 1100px;
  --z-index-hamburger: 100;
  --z-index-hamburgermenu: 99;
  --height-hamburger: 80px;
}

/* original reset */
li {
  list-style: none;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* html5 reset +alpha */
html {
  font-size: 62.5%; /* (14px) */
  line-height: 1;
}

#main {
  line-height: 1.4;
}

/* common item */
.clrfx:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  font-size: 0.1em;
  line-height: 0;
}

.clrfx {
  zoom: 1;
}

.clr {
  clear: both;
}

.fltl {
  float: left;
}

.fltr {
  float: right;
}

.leftAdjust {
  text-align: left;
}

.rightAdjust {
  text-align: right;
}

.centerAdjust {
  text-align: center;
}

.topAdjust {
  vertical-align: top;
}

.middleAdjust {
  vertical-align: middle;
}

.bottomAdjust {
  vertical-align: bottom;
}

.rlt {
  position: relative;
}

.abs {
  position: absolute;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

del {
  text-decoration: line-though;
}

/* items */
img {
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}

a img {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: alpha(opacity=70);
}

a:hover img.opa100 {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100);
}

.container {
  margin: 0 auto;
}

.f_mincho {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* body style */
body {
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--c-text);
  background: #fff;
  -webkit-text-size-adjust: 100%;
}

/* common */
@media (width > 768px) {
  .sp_v {
    display: none !important;
  }
}

@media (width <= 768px) {
  .pc_v {
    display: none !important;
  }
}

/*==============================
	ホバーアニメーション
===============================*/
a .hover_abs_anim_01 {
  position: relative;
  overflow: hidden;
}

a .hover_abs_anim_01 img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%) scale(1, 1); /* Safari用 */
  transform: translate(-50%, -50%) scale(1, 1);
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

a:hover .hover_abs_anim_01 img {
  -webkit-transform: translate(-50%, -50%) scale(1.2, 1.2); /* Safari用 */
  transform: translate(-50%, -50%) scale(1.2, 1.2);
}

a .hover_anim_01 {
  overflow: hidden;
}

a .hover_anim_01 img {
  transform: scale(1, 1);
  transition: all 0.3s ease-out;
}

a:hover .hover_anim_01 img {
  transform: scale(1.2, 1.2);
}

/*==============================
	SPナビ
===============================*/
.navBtn {
  position: fixed;
  top: 25px;
  right: 30px;
  width: 40px;
  aspect-ratio: 1/1;
  margin: 0;
  box-sizing: border-box;
  z-index: var(--z-index-hamburger);
  cursor: pointer;
}
.navBtn .navIcon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background: #1D1F87;
  background-size: cover;
  border: none;
  outline: none;
  box-sizing: border-box;
  box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.16);
}
.navBtn .navbar {
  position: relative;
  display: block;
  width: 22px;
  order: 2;
  margin-inline: auto;
  aspect-ratio: 1/1;
}
.navBtn .navbar .menu-btn-bar {
  position: absolute;
  left: 0%;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: 0;
  margin-left: 0%;
  border-radius: 3px;
  display: block;
  transition: all 0.3s;
  transform: rotate(0deg);
}
.navBtn .navbar .menu-btn-top {
  background-color: #ffffff;
  transform: translateY(-7px);
}
.navBtn .navbar .menu-btn-middle {
  background-color: #ffffff;
}
.navBtn .navbar .menu-btn-bottom {
  background-color: #ffffff;
  transform: translateY(7px);
}
.navBtn .navIcon.btn_on .menu-btn-middle {
  opacity: 0;
}
.navBtn .navIcon.btn_on .menu-btn-top {
  width: 100%;
  transform: rotate(-45deg) translateY(0px);
}
.navBtn .navIcon.btn_on .menu-btn-bottom {
  width: 100%;
  transform: rotate(45deg) translateY(0px);
}

.menu-wrap {
  position: fixed;
  top: 0;
  right: 0;
  margin: 0;
  width: 100%;
  max-width: 480px;
  height: 100vh;
  padding: var(--height-hamburger) 20px 60px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.965);
  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  z-index: var(--z-index-hamburgermenu);
  overflow-y: auto;
  overflow-x: hidden;
}
.menu-wrap .menu-inner {
  max-width: 400px;
  width: 86%;
  margin: 40px auto 0;
  padding-top: 60px;
  padding-bottom: 60px;
}
.menu-wrap .menu-inner .menu_logo_01 {
  max-width: 260px;
  width: 70%;
  margin-inline: auto;
}
.menu-wrap .menu-inner .menu_logo_01 img {
  width: 100%;
}
.menu-wrap .global_nav_block_01 {
  margin-top: 35px;
}
.menu-wrap .nav_btnwrap_01 {
  margin-top: 30px;
}

.global-nav-menu-01 .nav_item_01 {
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom: 2px dotted #C4C4C4;
}
.global-nav-menu-01 .nav_item_01 .p_menu_01 {
  display: block;
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  font-weight: var(--font-weight-Bold);
  color: var(--color-base-dark_blue);
  letter-spacing: 0.08em;
}
.global-nav-menu-01 .nav_item_01 .p_menu_01::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 2px;
  background: var(--color-base-blue);
  border-radius: 5px;
  transform: translate(0, -50%);
}
.global-nav-menu-01 .nav_item_01 .p_menu_01.is_plus {
  cursor: pointer;
}
.global-nav-menu-01 .nav_item_01 .p_menu_01.is_plus::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 15px;
  aspect-ratio: 1/1;
  background: url(./images/i_plus_01_blue.svg) center center no-repeat;
  background-size: contain;
  transform: translate(0, -50%);
  transition: 0.3s all ease-out;
}
.global-nav-menu-01 .nav_item_01 .p_menu_01.is_plus:hover::after {
  transform: translate(0, -50%) rotate(360deg);
}
.global-nav-menu-01 .nav_item_01 .p_menu_01.is_plus.trigger_on::after {
  width: 20px;
  background-image: url(./images/i_minus_01_blue.svg);
}
.global-nav-menu-01 .nav_item_01 a.p_menu_01 {
  padding-right: 40px;
  transition: 0.3s all ease-out;
  color: #010548;
}
.global-nav-menu-01 .nav_item_01 a.p_menu_01:hover {
  text-decoration: none;
  opacity: 0.7;
}
.global-nav-menu-01 .nav_item_01 a.p_menu_01:hover::after {
  right: 20px;
}
.global-nav-menu-01 .nav_contact_block_01 {
  margin-top: 50px;
  padding: 40px 25px;
  background: #DDE6F1;
}
.global-nav-menu-01 .nav_contact_block_01 .block_txt_01 {
  margin-bottom: 30px;
}
.global-nav-menu-01 .nav_contact_block_01 .contact_tel_parts_01 .parts_txt_01 {
  display: block;
  margin-bottom: 8px;
  text-align: center;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: var(--font-weight-Bold);
  line-height: 1.6;
  color: var(--color-base-dark_blue);
}
.global-nav-menu-01 .nav_contact_block_01 .contact_tel_parts_01 .parts_tel_01 {
  display: block;
  width: 90%;
  max-width: 380px;
  margin-inline: auto;
  text-align: center;
}
.global-nav-menu-01 .nav_contact_block_01 .contact_tel_parts_01 .parts_tel_01 img {
  width: 100%;
}
.global-nav-menu-01 .nav_contact_block_01 .contact_mail_parts_01 {
  margin-top: 40px;
}

.menuOff {
  transform: translate3d(100%, 0%, 0);
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0);
  z-index: var(--z-index-hamburgermenu);
}

.menuOn {
  transform: translate3d(0, 0, 0);
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  z-index: var(--z-index-hamburgermenu);
}

.ie .menuOff {
  left: -100%;
  /* IE向け */
}

.ie .menuOn {
  left: 0;
  /* IE向け */
}

.smenu_wrap {
  padding: 0;
}

/* ==========================================================================
   まさきエンタメフェスタ2026  TOP
   SPデザイン(375px) / PCデザイン(1440px KV) より実装
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

#over_wrapper {
  overflow-x: clip;
}

/* --------------------------------------------------
   レイアウト幅
   スマホ特化サイトのため、PC はスマホ版をそのまま拡張して見せる。
   KV を含む全セクションが --sp-max(460px) を超えない。
   背景の色帯もこのカラム内に収まる（左右は body の白）。
   ※ メディアクエリを使わず全幅で効かせている。460〜768px の中間幅でも
      カラムが広がってしまうのを防ぐため。
-------------------------------------------------- */
main > * {
  width: min(100%, var(--sp-max));
  margin-inline: auto;
}

/* --------------------------------------------------
   PC固定背景
   スマホ版(460px)をメインフレームとして、その外側の背景を position:fixed で固定する。
   スクロールしてもメインフレームだけが動く。

   $bp-stage 未満ではロゴ / CRAFTカード / キャッチを出さない。
   デザイン枠を縮めても 460px のカラムは縮まないため、
   1360px を切ると左右パーツがカラムに食い込むため。
   （ブロブだけは 768px から表示。カラムの背後なので衝突しない）
-------------------------------------------------- */
/* デザイン枠(1440)基準の座標。1440px を超えても拡大せず中央に固定 */
.pc_bg {
  display: none;
}
@media (min-width: 768px) {
  .pc_bg {
    display: block;
    position: fixed;
    inset: 0;
    /* body の白(canvas)より上、コンテンツより下。
       これなら既存要素に position/z-index を足さずに背面へ回せる */
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    /* 装飾は 1枚にまとめた SVG(viewBox 1440x800) を cover で全画面に敷く。
       SVG 側に白背景と mix-blend-mode:multiply が焼き込まれている。
       ※ cover はアスペクト比を保って切り取るため、
          1440x800 以外の比率では下のロゴ/キャッチとの相対位置は完全一致しない */
    background-image: url(./images/pc_bg_deco.svg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}
.pc_bg {
  /* 右側パネルは 1360px 以上でのみ表示 */
}
.pc_bg__side {
  display: none;
  position: absolute;
  margin: 0;
}
@media (min-width: 1360px) {
  .pc_bg {
    /* キャッチ + 鳥を1枚にまとめたPC専用SVG。
       SVGの幅270はデザイン上のキャッチ枠(269.83)と一致する。
       background で持つことで 1360px 未満では 59KB を読み込まない */
  }
  .pc_bg__side {
    display: block;
    left: calc(var(--stg-ox) + var(--stg-w) * 1129 / 1440);
    top: calc(var(--stg-oy) + var(--stg-v) * 319 / 1440);
    width: calc(var(--stg-w) * 269.83 / 1440);
    aspect-ratio: 270/341;
    background-image: url(./images/kv_scroll_side_pc.svg);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

/* ロゴ（PC左上）。TOPへのリンクなのでクリックできる必要がある。
   pc_bg は z-index:-1 で main の下に潜るためクリックできないので、
   別要素にして main より前面に出す。座標は pc_bg 内にあった時と同じ。 */
.pc_top_link {
  display: none;
}
@media (min-width: 1360px) {
  .pc_top_link {
    display: block;
    position: fixed;
    left: calc(var(--stg-ox) + var(--stg-w) * 100 / 1440);
    top: calc(var(--stg-oy) + var(--stg-v) * 212 / 1440);
    width: calc(var(--stg-w) * 407.56 / 1440);
    z-index: 50;
    transition: transform 0.3s ease-out;
  }
  .pc_top_link img {
    display: block;
    width: 100%;
    height: auto;
  }
  .pc_top_link:hover {
    transform: translateY(-4px);
  }
}

/* MASAKI CRAFT カード。
   pc_bg は z-index:-1 で main の下に潜るためクリックできない。
   これだけ別要素にして main より前面に出す。
   画像を background で持つことで、1360px 未満では 68KB を読み込まない。 */
.pc_craft_link {
  display: none;
}
@media (min-width: 1360px) {
  .pc_craft_link {
    display: block;
    position: fixed;
    left: calc(var(--stg-ox) + var(--stg-w) * 98 / 1440);
    top: calc(var(--stg-oy) + var(--stg-v) * 451 / 1440);
    width: calc(var(--stg-w) * 435 / 1440);
    aspect-ratio: 439/321;
    z-index: 50;
    background: url(./images/pc_craft_card.webp) center center/contain no-repeat;
    transition: transform 0.3s ease-out;
  }
  .pc_craft_link:hover {
    transform: translateY(-4px);
  }
}

/* --------------------------------------------------
   共通パーツ
-------------------------------------------------- */
/* 見出し（英語 + 日本語） */
.sec_ttl_01 {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.sec_ttl_01__en {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--c-blue);
}
.sec_ttl_01__en--teal {
  color: var(--c-teal);
}
.sec_ttl_01__ja {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--c-text);
  padding-bottom: 4px;
}
.sec_ttl_01 {
  /* 画像版の見出し。幅は HTML の width 属性（＝素材の実寸）に任せるので、
     セクションごとにCSSを足さなくてよい */
}
.sec_ttl_01__en-img, .sec_ttl_01__ja-img {
  display: block;
  height: auto;
}
.sec_ttl_01 {
  /* 横並び(NEWS)のときだけ、テキスト版の padding-bottom: 4px と同じだけ持ち上げる */
}
.sec_ttl_01__ja-img {
  margin-bottom: 4px;
}
.sec_ttl_01--center .sec_ttl_01__ja-img {
  margin-bottom: 0;
}
.sec_ttl_01--center {
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.sec_ttl_01--center .sec_ttl_01__en {
  font-size: 64px;
  letter-spacing: -0.02em;
}

/* ピル型セクションタイトル */
.ttl_pill_01 {
  position: relative;
  z-index: 2;
  width: 222px;
  max-width: 62%;
  margin-inline: auto;
  padding: 15px 10px;
  border-radius: 999px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #fff;
}
.ttl_pill_01--blue {
  background: var(--c-blue);
}
.ttl_pill_01--green {
  background: #80BD23;
}

/* 小さなタグ（駐車場 / 主催 など） */
.ttl_tag_01 {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--c-text);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--c-text);
}
.ttl_tag_01--gray {
  border-color: #666;
  font-size: 15px;
}

/* ボタン（角丸 + 白丸矢印） */
.c_btn_01 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  max-width: 100%;
  min-height: 60px;
  padding: 8px 62px 8px 18px;
  border-radius: 10px;
  background: var(--c-blue);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #fff;
  text-align: center;
  transition: 0.3s ease-out;
}
.c_btn_01:hover {
  text-decoration: none;
  opacity: 0.82;
}
.c_btn_01__icon {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
}
.c_btn_01--blue {
  background: var(--c-blue);
}
.c_btn_01--red {
  background: var(--c-red);
}

/* ボタン（ダウンロード系・オレンジ） */
.c_btn_02 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 91px;
  /* 余白は画面幅に比例させる。デザイン基準の 375px でちょうど従来値
     (26 / 56 / 14 / 11px) になる vw を置き、下限＝その 375px 時の値、
     上限＝カラム幅の上限 --sp-max(460px) 時の値で頭打ちにする。
     右余白は矢印アイコン(right:10px + 42px = 52px)を避ける役目もあるので
     下限を 56px より小さくしないこと */
  padding: clamp(26px, 6.93vw, 32px) clamp(56px, 14.93vw, 69px) clamp(14px, 3.73vw, 17px) clamp(11px, 2.93vw, 18px);
  border-radius: 12px;
  background: var(--c-orange);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 5.3vw, 20px);
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #fff;
  transition: 0.3s ease-out;
}
.c_btn_02:hover {
  text-decoration: none;
  opacity: 0.85;
}
.c_btn_02__icon {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 42px;
  height: 42px;
  margin-top: 6px;
  transform: translateY(-50%);
}

/* --------------------------------------------------
   ヘッダー / メニュー
-------------------------------------------------- */
.l_header {
  position: fixed;
  top: 0;
  /* viewport の右端ではなく 460px カラムの右端に合わせる */
  right: calc(50% - min(var(--sp-half), 50%));
  z-index: var(--z-index-hamburger);
}

.menu_btn_01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 0;
  background: #fff;
  border-bottom-left-radius: 30px;
  cursor: pointer;
}
.menu_btn_01__bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 30px;
}
.menu_btn_01__bar {
  display: block;
  width: 30px;
  height: 4px;
  border-radius: 2px;
  transition: 0.3s ease-out;
}
.menu_btn_01__bar:nth-child(1) {
  background: #E60013;
}
.menu_btn_01__bar:nth-child(2) {
  background: #F08200;
}
.menu_btn_01__bar:nth-child(3) {
  background: #B7D200;
}
.menu_btn_01__txt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--c-blue);
}
.menu_btn_01[aria-expanded=true] .menu_btn_01__bar:nth-child(1) {
  transform: translateY(11px) rotate(-45deg);
}
.menu_btn_01[aria-expanded=true] .menu_btn_01__bar:nth-child(2) {
  opacity: 0;
}
.menu_btn_01[aria-expanded=true] .menu_btn_01__bar:nth-child(3) {
  transform: translateY(-11px) rotate(45deg);
}

.global_menu_01 {
  position: fixed;
  inset: 0;
  /* オーバーレイもカラム内に収める（inset:0 + 幅指定 + auto マージンで中央寄せ） */
  width: min(100%, var(--sp-max));
  margin-inline: auto;
  z-index: var(--z-index-hamburgermenu);
  background: rgba(255, 255, 255, 0.97);
  overflow-y: auto;
}
.global_menu_01[hidden] {
  display: none;
}
.global_menu_01__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 100px 20px 50px;
}
.global_menu_01__list {
  width: 100%;
  max-width: 400px;
  /* 最大8項目あるので、小さめの端末でも1画面に収まる行間にする */
}
.global_menu_01__list a {
  display: block;
  padding: 17px 10px;
  border-bottom: 2px dotted #C4C4C4;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--c-blue);
  text-align: center;
}
.global_menu_01__list a:hover {
  text-decoration: none;
  opacity: 0.7;
}
.global_menu_01__list li:last-child a {
  border-bottom: 0;
}

/* --------------------------------------------------
   KV + 主なイベント の共通背景
   左右の装飾を「白背景の上・本文の下」に敷くための入れ物。
   .kv と .lead は背景を持たず、ここの白を共有する。
   （装飾を .kv の中に置くと、.lead の白背景に隠れるか、
     逆に .lead より前面に出て本文へかぶってしまう）
-------------------------------------------------- */
.sp_deco_wrap {
  position: relative;
  background: #fff;
}

.sp_deco {
  position: absolute;
  /* .kv__main は aspect-ratio 375/850。その下端がキャッチの上端なので、
     そこから 30px 上を開始位置にする */
  top: calc(var(--kvw) * 850 / 375 - 30px);
  /* .kv(1) より前面。KV下端に -30px 重ねる意図があるので、
     背面にすると .kv__main のグラデーションに上端が隠れてしまう。
     .lead(3) より背面なので、イベント一覧やMAPにはかぶらない */
  z-index: 2;
  display: block;
  height: auto;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.sp_deco--l {
  left: 0;
  width: 20.53%;
}
.sp_deco { /* 77 / 375 */ }
.sp_deco--r {
  right: 0;
  width: 24.53%;
}
.sp_deco { /* 92 / 375 */ }

/* --------------------------------------------------
   KV
-------------------------------------------------- */
.kv {
  position: relative;
  z-index: 1;
  /* 背景は .sp_deco_wrap が持つ（装飾を本文の下に敷くため） */
}
.kv__layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
.kv {
  /* 中央（SPでは本体）カラム : デザイン 375 x 850 の比率を保持 */
}
.kv__main {
  position: relative;
  order: 2;
  width: var(--kvw);
  margin-inline: auto;
  aspect-ratio: 375/850;
  background: linear-gradient(to bottom, #BAE3F9 0%, #BAE3F9 50.6%, #C4E6DB 58.8%, #D9EBA2 75.3%, #F6F6BD 87.1%, #FFFFFF 100%); /* 850/850 */
}
.kv {
  /* 中央カラム内はデザイン座標(375x850)を % に換算して絶対配置 */
}
.kv__visual, .kv__info {
  position: static;
}
.kv {
  /* ロゴは .kv 直下（PCで左カラムへ移動するため）。中央カラム基準で配置する */
}
.kv__logo {
  position: absolute;
  z-index: 3;
  left: calc(50% - var(--kvw) / 2 + var(--kvw) * 23 / 375);
  top: calc(var(--kvw) * 47 / 375);
  width: calc(var(--kvw) * 328.54 / 375);
  margin: 0;
}
.kv__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.kv__illust, .kv__note, .kv__date, .kv__guest-label, .kv__guest-photo, .kv__guest-works, .kv__mc {
  position: absolute;
  margin: 0;
}
.kv__illust img, .kv__note img, .kv__date img, .kv__guest-label img, .kv__guest-photo img, .kv__guest-works img, .kv__mc img {
  display: block;
  width: 100%;
  height: auto;
}
.kv__illust {
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}
.kv__note {
  left: 45.6%;
  top: 44.94%;
  width: 49.68%;
  z-index: 2;
}
.kv__date {
  left: 10.67%;
  top: 46.25%;
  width: 79.73%;
  z-index: 2;
}
.kv__guest-label {
  left: 10.99%;
  top: 60.35%;
  width: 40.7%;
  z-index: 4;
}
.kv__guest-photo {
  left: 9.94%;
  top: 63.84%;
  width: 42.88%;
  z-index: 3;
}
.kv__guest-works {
  left: 50.6%;
  top: 64.32%;
  width: 39.25%;
  z-index: 2;
}
.kv__mc {
  left: 10.4%;
  top: 89.53%;
  width: 51.12%;
  z-index: 2;
}
.kv {
  /* 氏名は写真に対して配置 */
}
.kv__guest-name {
  position: absolute;
  left: 8.99%;
  top: 88.12%;
  width: 81.84%;
  margin: 0;
}
.kv__guest-name img {
  display: block;
  width: 100%;
  height: auto;
}
.kv {
  /* 右カラム（キャッチ + スクロール誘導） */
}
.kv__aside--right {
  order: 3;
  position: relative;
  width: var(--kvw);
  margin-inline: auto;
}
.kv {
  /* キャッチコピー : デザイン y=874〜1029（中央カラム下端 850 を起点） */
}
.kv__catch {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--kvw) * 24 / 375);
}
.kv__catch-line {
  display: block;
  height: auto;
}
.kv__catch-line--1 {
  width: 68.24%;
}
.kv__catch-line--2 {
  width: 84.34%;
}
.kv__catch-line--3 {
  width: 45.3%;
  margin-top: calc(var(--kvw) * 9 / 375);
}
.kv__catch-line--2 {
  margin-top: calc(var(--kvw) * 8 / 375);
}
.kv {
  /* 鳥＋「詳しくはスクロール！」 : デザイン x=246, y=748 */
}
.kv__scroll {
  position: absolute;
  left: calc(var(--kvw) * 246 / 375);
  top: calc(var(--kvw) * -102 / 375);
  width: calc(var(--kvw) * 118.9 / 375);
  margin: 0;
  z-index: 5;
}
.kv__scroll img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------
   主なイベント + MAP
-------------------------------------------------- */
.lead {
  position: relative;
  /* 3 = .sp_deco(2) より前面。本文が装飾の上に来る */
  z-index: 3;
  padding: 30px 0 60px;
  /* 背景は .sp_deco_wrap が持つ */
}
.lead__inner {
  position: relative;
  z-index: 1;
  width: 90.4%;
  max-width: var(--sp-max);
  margin-inline: auto;
}
.lead {
  /* 見出しと各項目をひとかたまりにして中央へ。
     幅は一番長い行に合わせるので、ピルと項目の左端は揃ったまま
     ブロック全体が中央に寄る */
}
.lead__events {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.lead__ttl span {
  display: inline-block;
  min-width: 142px;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--c-pink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #fff;
  text-align: center;
}
.lead__list {
  margin-top: 16px;
}
.lead__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: var(--c-pink);
  /* バッジ列は一番広い ALL(34px) に合わせた固定幅。
     28px の番号バッジでもテキストの開始位置が全行で揃う。
     object-fit: contain で 28x28 は枠内中央に収まる */
}
.lead__list li img {
  flex: 0 0 34px;
  width: 34px;
  height: 28px;
  object-fit: contain;
}
.lead__map {
  position: relative;
  margin-top: 44px;
  padding: 26px 4.42% 20px;
  border: 3px solid var(--c-orange);
  border-radius: 16px;
  background: #fff;
}
.lead__map-ttl {
  position: absolute;
  top: 0;
  left: 50%;
  width: 134px;
  transform: translate(-50%, -50%);
}
.lead__map-ttl img {
  display: block;
  width: 100%;
  height: auto;
}
.lead__map-body {
  position: relative;
}
.lead {
  /* 拡大時のはみ出しを隠す枠。Floral Gate 7 前ボックスは画像に統合済み */
}
.lead__map-view {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  /* 等倍のときはページの縦スクロールを妨げない */
  touch-action: pan-y;
}
.lead__map-view.is_zoomed {
  touch-action: none;
  cursor: grab;
}
.lead__map-view.is_zoomed.is_dragging {
  cursor: grabbing;
}
.lead__map-img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 0 0;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
.lead {
  /* ズームボタン : デザイン 30px 円 x=319 / 縦位置は map_emifull.jpg (2142x1098) の比率が前提 */
}
.lead__map-zoom {
  position: absolute;
  padding: 0;
  border: 0;
  cursor: pointer;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.lead__map-zoom:hover {
  transform: scale(1.1);
}
.lead__map-zoom:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}
.lead__map-zoom:disabled {
  opacity: 0.3;
  cursor: default;
  transform: none;
}
.lead__map-zoom {
  left: 94.17%; /* (319-28)/309 */
  width: 9.71%; /* 30/309 */
  aspect-ratio: 1/1;
  border-radius: 50%;
}
.lead__map-zoom::before, .lead__map-zoom::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.lead__map-zoom::before {
  width: 40%;
  height: 2px;
}
.lead__map-zoom--in {
  bottom: 17.8%; /* 画像下端から 28.2/309(幅比) ÷ 1098/2142(画像比) */
  background: #F2704B;
}
.lead__map-zoom--in::after {
  width: 2px;
  height: 40%;
}
.lead__map-zoom--out {
  bottom: -3.66%; /* 画像下端から -5.8/309(幅比) ÷ 1098/2142(画像比) */
  background: #7ECEE8;
}
.lead {
  /* ---- 装飾ブロブ SP ---- */
}

/* --------------------------------------------------
   NEWS
-------------------------------------------------- */
.news {
  padding: 30px 0 70px;
  background: #fff;
}
.news__inner {
  width: 90.4%;
  max-width: var(--sp-max);
  margin-inline: auto;
}
.news__list {
  margin-top: 26px;
}
.news__item {
  border-bottom: 1px dashed #B5B5B5;
}
.news__item:last-child {
  border-bottom: 0;
}
.news__item a {
  position: relative;
  display: block;
  padding: 18px 40px 18px 0;
  color: var(--c-text);
  transition: 0.3s ease-out;
}
.news__item a:hover {
  text-decoration: none;
  opacity: 0.65;
}
.news__date {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--c-blue);
}
.news__ttl {
  display: block;
  margin-top: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--c-text);
}
.news__arrow {
  position: absolute;
  top: 50%;
  right: 0;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
}
.news__btnwrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* --------------------------------------------------
   MASAKI CRAFT
-------------------------------------------------- */
.craft {
  position: relative;
  background: #fff;
  /* ヒーロー(375x696)の表示幅。PCでもスマホ幅を超えないよう上限を設ける */
  --craftw: min(100%, var(--sp-max));
  /* デザイン 375 x 696 (y=2154〜2850) の構図をそのまま比率保持で再現 */
}
.craft__hero {
  position: relative;
  z-index: 3; /* 結果発表ボードを緑背景の上に出す */
  width: 100%;
  max-width: var(--craftw);
  margin-inline: auto;
  aspect-ratio: 375/690;
  background: #fff;
}
.craft__hero > * {
  position: absolute;
  margin: 0;
}
.craft__hero > * img {
  display: block;
  width: 100%;
  height: auto;
}
.craft {
  /* 樽キャラを内包した合成ロゴ。旧ロゴ(top 9.20%)の上に樽(top 0)が乗るので上端は 0 */
}
.craft__logo {
  left: 4.27%;
  top: 0;
  width: 91.57%;
  z-index: 3;
}
.craft {
  /* 賞金ボードの文字は新イラストに焼き込み済み。別素材(craft_prize.png)の重ね置きは不要 */
}
.craft__illust {
  left: 0;
  top: 15.23%;
  width: 100%;
  z-index: 1;
}
.craft__result {
  left: 19.73%;
  top: 89.8%;
  width: 60.53%;
  z-index: 5;
}
.craft__deco {
  z-index: 4;
}
.craft__deco--010 {
  left: 51.47%;
  top: 33.05%;
  width: 23.12%;
}
.craft__deco--iyo {
  left: 76.27%;
  top: 33.62%;
  width: 18.24%;
}
.craft__body {
  position: relative;
  z-index: 2;
  /* 結果発表ボード（heroから約105pxはみ出す）を避ける。
     はみ出し量は hero の表示幅に比例するので --craftw から算出する。
     375px 基準で 150px＝ボード下に約45pxの余白が残る */
  padding: calc(var(--craftw) * 150 / 375) 0 50px;
  /* 上から下への線形グラデーション。
     末端 2% で白に抜け、次セクションの白背景と繋げる */
  background: linear-gradient(180deg, var(--c-craft-bg) 0%, var(--c-craft-bg2) 98%, #fff 100%);
  text-align: center;
}
.craft {
  /* 特殊フォントの見出しなので画像(SVG)で差し替え。
     幅は HTML の width 属性（＝素材の実寸 264px）に任せ、
     親の text-align: center で中央揃えする */
}
.craft__ttl img {
  max-width: 100%;
  height: auto;
}
.craft__txt {
  width: 80.3%;
  max-width: calc(var(--sp-max) * 0.803);
  margin: 22px auto 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.875;
  letter-spacing: 0.08em;
  text-align: left;
  color: var(--c-text);
}
.craft__btns {
  width: 80.3%;
  max-width: calc(var(--sp-max) * 0.803);
  margin: 40px auto 0;
}
.craft__btnwrap {
  position: relative;
  padding-top: 22px;
}
.craft__btnwrap + .craft__btnwrap {
  margin-top: 44px;
}
.craft {
  /* 帯はボタン上辺を 18px ほど食い込む位置に置き、
     両脇の凹カーブ（::before / ::after）でボタンと繋げる。
     下角は角丸にせず、上角だけボタンと同じ 12px にする */
}
.craft__btn-cap {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  display: inline-block;
  min-width: 225px;
  padding: 12px 18px;
  border-radius: 99px;
  background: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--c-orange);
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  /* 帯の右下から出る三角のしっぽ。
     直角が帯側（左下）、斜辺が左上→右下。元の凹カーブと同じ3頂点で、
     弧を直線に置き換えた形 */
}
.craft__btn-cap::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 21px;
  aspect-ratio: 32/24;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translate(-50%, 100%);
}
.craft {
  /* 赤ブロックは白カード(.craft__entry)の上部。
     警告アイコンが上へはみ出すので overflow:hidden は使わず角丸を直接指定する */
}
.craft__apply {
  padding: 18px 5.31% 20px;
  border-radius: 16px 16px 0 0;
  background: var(--c-red);
}
.craft__apply-card {
  position: relative;
  width: 100%;
  margin-inline: auto;
  padding: 40px 2% 20px;
  border-radius: 16px;
  background: #fff;
  text-align: center;
}
.craft__apply-icon {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FFE100;
  transform: translate(-50%, -58%);
}
.craft__apply-icon img {
  display: block;
  width: 26px;
  height: auto;
}
.craft__apply-ttl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--c-red);
}
.craft__apply-sub {
  position: relative;
  display: inline-block;
  margin-top: 21px;
  padding: 0 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--c-text);
}
.craft__apply-sub::before, .craft__apply-sub::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 22px;
  background: var(--c-red);
  transform: translateY(-50%);
}
.craft__apply-sub::before {
  left: 4px;
  rotate: -20deg;
}
.craft__apply-sub::after {
  right: 4px;
  rotate: 20deg;
}
.craft__apply-btnwrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  /* この応募ボタンだけ一回り大きく。
     .c_btn_01 は他セクションでも使うのでここに閉じ込める */
}
.craft__apply-btnwrap .c_btn_01 {
  width: 252px;
  min-height: 68px;
  padding: 10px 70px 10px 22px;
  font-size: 20px;
}
.craft__apply-btnwrap .c_btn_01__icon {
  right: 24px;
  width: 36px;
  height: 36px;
}
.craft {
  /* ---- 応募期間（赤カード内） ---- */
}
.craft__apply-period {
  margin-top: 26px;
}
.craft__apply-period-ttl {
  width: 93.8%;
  margin-inline: auto;
  padding: 9px 10px;
  border-radius: 8px;
  background: #FFEE00;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--c-text);
}
.craft__apply-period-date {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  color: var(--c-text);
  white-space: nowrap;
  /* 行末が「）」でその右半分が空くため、中央揃えでも左寄りに見える。
     実測で左余白14px / 右余白23px だったので、差の半分だけ右へ寄せる */
  transform: translateX(5px);
}
.craft__apply-period-date .num {
  font-size: 25px;
}
.craft__apply-period-date .sub {
  font-size: 15px;
}
.craft__apply-period-date .wave {
  margin: 0 2px;
}
.craft {
  /* ---- 開催時間・場所 ---- */
}
.craft__schedule {
  position: relative;
  width: 80.3%;
  max-width: calc(var(--sp-max) * 0.803);
  margin: 30px auto 0;
  text-align: left;
}
.craft__schedule-ttl {
  position: relative;
  z-index: 2;
  text-align: center;
}
.craft__schedule-ttl span {
  display: inline-block;
  min-width: 66.4%;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--c-green);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #fff;
}
.craft__schedule-box {
  position: relative;
  /* ピル(40px)の下半分を箱にかぶせる */
  margin-top: -20px;
  padding: 40px 6% 22px;
  border: 3px solid #836AA5;
  border-radius: 16px;
  background: #fff;
}
.craft__schedule-item + .craft__schedule-item {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px dashed #D5D5D5;
}
.craft__schedule-name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.35;
  color: var(--c-green);
}
.craft__schedule-name img {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
}
.craft__schedule-name + .craft__schedule-row {
  margin-top: 15px;
}
.craft__schedule-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-left: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--c-text);
}
.craft__schedule-row img {
  flex: 0 0 19px;
  width: 19px;
  height: auto;
}
.craft__schedule-row--pink {
  color: var(--c-pink);
}
.craft__schedule-row--green {
  color: #009944;
}
.craft {
  /* 箱の右下にはみ出す鳥 */
}
.craft__schedule-bird {
  position: absolute;
  right: -6%;
  bottom: -30px;
  width: 37.5%;
  height: auto;
}
.craft {
  /* ---- 応募〜応募部門〜DLボタンを収める白カード ---- */
}
.craft__entry {
  width: 90.4%;
  max-width: calc(var(--sp-max) * 0.904);
  margin: 56px auto 0;
  border-radius: 16px;
  background: #fff;
  text-align: left;
}
.craft__entry-body {
  padding: 40px 5.31%;
}
.craft__entry-ttl {
  text-align: center;
}
.craft__entry-ttl span {
  display: block;
  width: 93%;
  margin-inline: auto;
  padding: 13px 10px;
  border-radius: 8px;
  background: #FFEE00;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--c-text);
}
.craft {
  /* ---- 応募部門 ---- */
}
.craft__division {
  margin-top: 34px;
}
.craft__division + .craft__division {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px dashed #D5D5D5;
}
.craft__division-ttl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 21px;
  line-height: 1.3;
  /* 21px だと「自分のアリーナを作ろう部門」(13字) が 375px 幅で
     1行に収まらないので、字間をわずかに詰めて逃がす */
  letter-spacing: -0.04em;
  color: var(--c-green);
}
.craft__division-num {
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFEE00;
  font-size: 18px;
  line-height: 1;
  color: var(--c-green);
}
.craft__division-txt {
  margin-top: 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--c-text);
}
.craft__division-spec {
  margin-top: 20px;
  padding: 16px 3.3%;
  border-radius: 8px;
  background: #FFF7B7;
}
.craft__division-spec li {
  position: relative;
  padding-left: 1.1em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text);
  /* カッコ書きの補足だけ一段落とす */
}
.craft__division-spec li .sub {
  font-size: 13px;
}
.craft__division-spec li::before {
  content: "・";
  position: absolute;
  left: 0;
}
.craft__division-spec li + li {
  margin-top: 4px;
}
.craft__award {
  margin-top: 33px;
}
.craft__award-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.craft__award-row + .craft__award-row {
  margin-top: 20px;
}
.craft__award-badge {
  flex: 0 0 80px;
  width: 80px;
  height: auto;
}
.craft__award-txt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--c-orange);
}
.craft {
  /* DLボタンは白カードの中。横幅はカード内いっぱいに */
}
.craft__entry-body .craft__btns {
  width: 100%;
  max-width: none;
  margin: 50px 0 0;
}

/* --------------------------------------------------
   EVENT
-------------------------------------------------- */
.event {
  position: relative;
  overflow: hidden;
  /* 左右の装飾ブロブ。素材は 88x1987 / 103x1970 の縦帯だが
     セクション全長はその倍以上あるので、縦にリピートさせて全体を覆う */
}
.event::before, .event::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat-y;
  background-size: 100% auto;
}
.event::before {
  left: 0;
  width: 23.47%; /* 88 / 375 */
  background-image: url(images/deco_event_sp_l.svg);
}
.event::after {
  right: 0;
  width: 27.47%; /* 103 / 375 */
  background-image: url(images/deco_event_sp_r.svg);
}
.event__head, .event__list {
  position: relative;
  z-index: 1;
}
.event__head {
  padding: 60px 0 34px;
}
.event {
  /* イベント一覧末尾の注記。※ は .gallery__note と同じく absolute で
     本文の外に出し、2行目以降の頭を揃える */
}
.event__note {
  position: relative;
  z-index: 1;
  width: 80.3%;
  max-width: calc(var(--sp-max) * 0.803);
  margin: 40px auto 0;
  padding-left: 1em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: var(--c-text);
}
.event__note-mark {
  position: absolute;
  left: 0;
  top: 0;
}

/* ---- イベントカード ---- */
.event_card + .event_card {
  margin-top: 56px;
}
.event_card {
  /* サムネは番号・タイトルを焼き込み済み。帯は全幅、画像はスマホ幅で止める */
}
.event_card__thumb {
  display: block;
  width: 100%;
  max-width: var(--sp-max);
  height: auto;
  margin-inline: auto;
}
.event_card__body {
  width: 80.3%;
  max-width: calc(var(--sp-max) * 0.803);
  margin-inline: auto;
}
.event_card__txt {
  margin-top: 26px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.08em;
  color: var(--c-text);
}
.event_card__txt--top {
  margin-top: 30px;
}
.event_card {
  /* event_4_catch_1 / _2 の画像見出し。幅は素材の実寸に任せる */
}
.event_card__catch {
  margin-top: 40px;
  text-align: center;
}
.event_card__catch img {
  max-width: 100%;
  height: auto;
}

/* ---- 開催時間・場所（craft の同名ブロックと同じ見た目・色だけ紫） ---- */
.event_sched {
  position: relative;
  width: 90%;
  margin: 30px auto 0;
  text-align: left;
}
.event_sched__ttl {
  position: relative;
  z-index: 2;
  text-align: center;
}
.event_sched__ttl span {
  display: inline-block;
  min-width: 66.4%;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--c-purple);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #fff;
}
.event_sched__box {
  position: relative;
  /* ピル(38px)の下半分を箱にかぶせる */
  margin-top: -19px;
  padding: 34px 8% 20px;
  border: 3px solid var(--c-purple);
  border-radius: 16px;
  background: #fff;
}
.event_sched__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--c-text);
}
.event_sched__row:first-child {
  margin-top: 0;
}
.event_sched__row img {
  flex: 0 0 19px;
  width: 19px;
  height: auto;
}
.event_sched__row--pink {
  color: var(--c-pink);
}
.event_sched__row--green {
  color: #009944;
}
.event_sched__row--orange {
  color: #ED6D46;
}

/* ---- スペシャルゲスト（KVと同じ素材を再利用） ---- */
.event_guest {
  position: relative;
  /* 写真と代表作ボックスを天端で揃えた2カラム。
     帯は写真の左上に重ねるので、その分だけ上に余白を取る */
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 44px -10px 26px;
  padding-top: 9%;
}
.event_guest img {
  display: block;
  width: 100%;
  height: auto;
}
.event_guest__label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 50%;
  margin: 0;
}
.event_guest__photo {
  position: relative;
  /* gap: 0 で代表作ボックスと隣り合わせる。
     ボックス側は見出しが中央揃えの固定画像なので、写真を重ねない */
  z-index: 1;
  flex: 0 0 47%;
  width: 47%;
  margin: 0;
}
.event_guest {
  /* 氏名は写真の下端へ重ねる */
}
.event_guest__name {
  position: absolute;
  left: -6%;
  bottom: -5%;
  z-index: 2;
  width: 100%;
  margin: 0;
}
.event_guest__works {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- まさきブランド米 販売会 ---- */
.event_rice {
  display: flex;
  align-items: center;
  gap: 4%;
  margin-top: 32px;
  padding: 24px 9%;
  border: 2px solid var(--c-orange);
  border-radius: 12px;
  background: #FFEBD4;
}
.event_rice__txt {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-orange);
}
.event_rice__sub {
  display: block;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.06em;
}
.event_rice__lead {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.event_rice__logo {
  flex: 0 0 42%;
  width: 42%;
  height: auto;
}

/* ---- 飲食ブース出店者募集 ---- */
.event_recruit {
  position: relative;
  /* 下マージンは隣接カードの margin-top(56px) と相殺されるので、
     ここで指定した値がそのまま「白カード下端→次カード」の間隔になる。
     鳥が 78px 下へはみ出すため広めに取る */
  margin: 46px 0 125px;
  /* タイトル箱が白カードの上へはみ出す分 */
  padding-top: 40px;
  /* タイトルは4隅を丸めた独立した箱。下半分を白カードに重ねる */
}
.event_recruit__ttl {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: 88%;
  padding: 14px 3%;
  border-radius: 10px;
  background: var(--c-orange);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #fff;
  text-align: center;
  transform: translateX(-50%);
}
.event_recruit {
  /* 白カードはオレンジの枠線つき。上余白はタイトルの重なり分を見込む */
}
.event_recruit__body {
  position: relative;
  padding: 74px 6% 52px;
  border: 2px solid var(--c-orange);
  border-radius: 16px;
  background: #fff;
}
.event_recruit {
  /* 屋台の鳥はカード右下の角に重ねて、下へはみ出させる */
}
.event_recruit__bird {
  position: absolute;
  right: -18px;
  bottom: -88px;
  width: 38%;
  height: auto;
}
.event_recruit__label {
  width: 100%;
  margin-inline: auto;
  padding: 7px 0;
  border-radius: 8px;
  background: #FFEE00;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--c-text);
  text-align: center;
}
* + .event_recruit__label {
  margin-top: 30px;
}
.event_recruit__list {
  margin-top: 16px;
}
.event_recruit__list li {
  position: relative;
  padding-left: 1em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: var(--c-text);
}
.event_recruit__list li::before {
  content: "・";
  position: absolute;
  left: 0;
}
.event_recruit__txt {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: var(--c-text);
}
.event_recruit__btnwrap {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  /* この応募ボタンだけ白カードの幅いっぱい近くまで広げる。
     .c_btn_01 は他所でも使うのでここに閉じ込める */
}
.event_recruit__btnwrap .c_btn_01 {
  width: 92%;
}
.event_recruit__note {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--c-text);
}

/* --------------------------------------------------
   GALLERY
-------------------------------------------------- */
.gallery {
  position: relative;
  z-index: 1;
  padding: 60px 0 120px;
  /* 素材の実寸比で散らし置き。座標はすべて枠幅に対する % なので
     スマホ幅が変わっても配置は崩れない。
     さらに1枚ずつ角度を振って、貼り付けたような散らし感を出す */
}
.gallery__grid {
  position: relative;
  width: 90.4%;
  max-width: calc(var(--sp-max) * 0.904);
  margin: 32px auto 0;
  aspect-ratio: 375/485;
}
.gallery__img {
  position: absolute;
  height: auto;
}
.gallery__img--1 {
  left: 5%;
  top: 0;
  width: 34%;
  z-index: 2;
  rotate: 0deg;
}
.gallery__img--2 {
  left: 45%;
  top: 0;
  width: 58%;
  z-index: 1;
  rotate: 0deg;
}
.gallery__img--3 {
  left: -7%;
  top: 26%;
  width: 52%;
  z-index: 3;
  rotate: 0deg;
}
.gallery__img--4 {
  left: 45%;
  top: 34%;
  width: 80%;
  z-index: 2;
  rotate: 0deg;
}
.gallery__img--5 {
  left: -16%;
  top: 66%;
  width: 79%;
  z-index: 3;
  rotate: 0deg;
}
.gallery__bird {
  position: absolute;
  right: 0%;
  bottom: -8%;
  width: 33%;
  height: auto;
  z-index: 4;
}
.gallery {
  /* ※ は absolute で本文の外に出し、2行目以降の頭を揃える */
}
.gallery__note {
  position: relative;
  padding-left: 1em;
  width: fit-content;
  max-width: calc(var(--sp-max) * 0.904);
  margin: 66px auto 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: var(--c-text);
}
.gallery__note-mark {
  position: absolute;
  left: 0;
  top: 0;
}

/* スクリーンリーダー用テキスト */
.u_vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------
   駐車場・雨天時 / 協賛企業
-------------------------------------------------- */
.access {
  position: relative;
  /* 上端だけ大きく丸める。前セクション(白)が角から覗く */
  padding: 10px 0 80px;
  background: var(--c-sky);
}
.access::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 150%;
  aspect-ratio: 4/1;
  background: var(--c-sky);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.access__block + .access__block {
  margin-top: 60px;
}
.access__card {
  width: 90.4%;
  max-width: var(--sp-max);
  margin: -25px auto 0;
  padding: 60px 5.6% 40px;
  border-radius: 20px;
  background: #fff;
}
.access__card--sponsor {
  padding-top: 50px;
}
.access {
  /* 行間の破線は <hr> が持つ。行自体に上下パディングを持たせると、
     絶対配置のアイコン(top:0)がパディング分ずれて2行目以降で揃わなくなる */
}
.access__row {
  position: relative;
}
.access__line {
  margin: 34px 0;
  border: 0;
  border-top: 1px dashed #B5B5B5;
}
.access__icon {
  position: absolute;
  top: 0;
  right: 5%;
  width: 48px;
  height: auto;
}
.access__lead {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  color: var(--c-text);
}
.access__note {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--c-text);
  /* 行頭の「※」ぶんだけ2行目を字下げして、本文の頭を揃える */
  padding-left: 1em;
  text-indent: -1em;
}
.access__note--sm {
  font-size: 14px;
  padding-left: 0;
  text-indent: 0;
}
.access__btnwrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.sponsor {
  /* ロゴは協賛ランクごとに4段階の大きさ。段=グリッドの列数で、
     1段目から順に 1列 / 2列 / 3列 / 4列。スロット高さは段で固定し、
     実ロゴは object-fit: contain で天地中央に収める（縦横比はロゴ側任せ） */
}
.sponsor__tier {
  display: grid;
  justify-items: center;
  align-items: center;
}
.sponsor__tier + .sponsor__tier {
  margin-top: 30px;
}
.sponsor__tier--1 {
  grid-template-columns: 1fr;
  gap: 22px 0;
  --slot-h: 66px;
}
.sponsor__tier--2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 10px;
  --slot-h: 44px;
}
.sponsor__tier--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 10px;
  --slot-h: 34px;
}
.sponsor__tier--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 8px;
  --slot-h: 26px;
}
.sponsor__logo {
  display: block;
  width: 100%;
  height: var(--slot-h);
  object-fit: contain;
}
.sponsor {
  /* 企業名が行途中で割れないよう ul/li で組む。
     flex なら li 間の改行が空白として出ないので、読み味は元の
     「、」区切りの一文のまま、名前だけが折り返し単位になる */
}
.sponsor__list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 34px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: var(--c-text);
}
.sponsor__list li {
  white-space: nowrap;
}
.sponsor__list li::after {
  content: "、";
}
.sponsor__list li:last-child::after {
  content: none;
}
.sponsor__list--sm {
  font-size: 12px;
  line-height: 2;
  color: #555;
}

/* --------------------------------------------------
   SDGs
-------------------------------------------------- */
.sdgs {
  padding: 56px 0 60px;
  background: var(--c-cream);
}
.sdgs__inner {
  width: 90.4%;
  max-width: calc(var(--sp-max) * 0.904);
  margin-inline: auto;
}
.sdgs__ttl img {
  display: block;
  width: 100%;
  height: auto;
}
.sdgs {
  /* 110px 角のパネルを3列。枠幅 339px なら gap 4px でちょうど実寸に収まる
     ((339 - 4*2) / 3 = 110.3) */
}
.sdgs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 20px;
}
.sdgs__grid img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------
   お知らせ詳細 (single.html)
-------------------------------------------------- */
.single {
  padding: 40px 0 70px;
  background: #fff;
}
.single__inner {
  width: 90.4%;
  max-width: var(--sp-max);
  margin-inline: auto;
}
.single__article {
  margin-top: 34px;
}
.single__head {
  padding-bottom: 18px;
  border-bottom: 1px dashed #B5B5B5;
}
.single__date {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--c-blue);
}
.single__ttl {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--c-text);
}
.single {
  /* 本文は CMS から流し込む想定なので、素のタグにそのまま当てる */
}
.single__body {
  margin-top: 26px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: var(--c-text);
}
.single__body > * + * {
  margin-top: 22px;
}
.single__body h3 {
  margin-top: 38px;
  padding-left: 12px;
  border-left: 4px solid var(--c-blue);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.single__body ul li {
  position: relative;
  padding-left: 1.1em;
}
.single__body ul li::before {
  content: "・";
  position: absolute;
  left: 0;
}
.single__body ul li + li {
  margin-top: 8px;
}
.single__body a {
  color: var(--c-blue);
  text-decoration: underline;
}
.single__body a:hover {
  text-decoration: none;
}
.single__figure {
  margin: 0;
}
.single__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.single__figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: #777;
}
.single__meta {
  padding: 20px 6%;
  border-radius: 12px;
  background: var(--c-ivory);
}
.single__meta > div {
  display: flex;
  gap: 14px;
}
.single__meta > div + div {
  margin-top: 12px;
}
.single__meta dt {
  flex: 0 0 3.5em;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-blue);
}
.single__meta dd {
  flex: 1 1 auto;
  margin: 0;
}
.single__note {
  font-size: 13px;
  line-height: 1.7;
  color: #777;
}
.single__btnwrap {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

/* --------------------------------------------------
   WordPress 出力まわり
   the_content() / ページャ / 記事ナビなど、
   エディタやコアが吐くマークアップを受け止める
-------------------------------------------------- */
.single__body {
  /* 本文中の画像はカラム幅を超えない */
}
.single__body img {
  max-width: 100%;
  height: auto;
}
.single__body h2 {
  margin-top: 40px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.single__body h4 {
  margin-top: 30px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
}
.single__body ol {
  padding-left: 1.4em;
  list-style: decimal;
}
.single__body ol li + li {
  margin-top: 8px;
}
.single__body blockquote {
  padding: 16px 5%;
  border-left: 4px solid #D5D5D5;
  background: var(--c-ivory);
  font-size: 14px;
}
.single__body table {
  width: 100%;
  font-size: 14px;
}
.single__body table th, .single__body table td {
  padding: 10px;
  border: 1px solid #D5D5D5;
}
.single__body table th {
  background: var(--c-ivory);
}
.single__body {
  /* コアの配置クラス */
}
.single__body .aligncenter {
  display: block;
  margin-inline: auto;
}
.single__body .alignleft {
  float: left;
  margin: 0 20px 16px 0;
}
.single__body .alignright {
  float: right;
  margin: 0 0 16px 20px;
}
.single__body .wp-caption {
  max-width: 100%;
}
.single__body .wp-caption-text, .single__body figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #777;
}
.single__body::after {
  content: "";
  display: block;
  clear: both;
}

/* 前後の記事 */
.single__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px dashed #B5B5B5;
}
.single__nav-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--c-blue);
}
.single__nav-link:hover {
  text-decoration: none;
  opacity: 0.7;
}
.single__nav-link {
  /* 片方しか無いときも位置が崩れないように */
}
.single__nav-link--next {
  margin-left: auto;
}

/* ページャ（the_posts_pagination の出力） */
.single__pager {
  margin-top: 40px;
}
.single__pager .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.single__pager .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.single__pager .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--c-ivory);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--c-text);
}
.single__pager .page-numbers:hover {
  text-decoration: none;
  opacity: 0.75;
}
.single__pager .page-numbers.current {
  background: var(--c-blue);
  color: #fff;
}

/* 一覧ページのお知らせリスト（トップと同じ見た目で幅だけ枠いっぱい） */
.news__list--archive {
  margin-top: 30px;
}

/* --------------------------------------------------
   コンテンツ全体のラッパー
-------------------------------------------------- */
.l_contents {
  overflow: hidden;
}

/* --------------------------------------------------
   フッター
-------------------------------------------------- */
.l_footer {
  padding: 40px 0 30px;
  background: var(--c-cream);
}
.l_footer__card {
  width: 90.4%;
  max-width: var(--sp-max);
  margin-inline: auto;
  padding: 50px 5.6% 66px;
  border-radius: 80px;
  background: #fff;
  text-align: center;
}
.l_footer__logo {
  width: 91px;
  margin: 0 auto;
}
.l_footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.l_footer__name {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.67;
  letter-spacing: 0.08em;
  color: var(--c-text);
}
.l_footer__contact {
  margin-top: 24px;
}
.l_footer__contact li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 6px 0;
}
.l_footer__contact li img {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}
.l_footer__contact a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 4.1vw, 16px);
  letter-spacing: 0.02em;
  color: var(--c-text);
  word-break: break-all;
}
.l_footer__contact a:hover {
  text-decoration: none;
  opacity: 0.7;
}
.l_footer {
  /* メールアドレスは 375px でも1行に収める。実測で 375px 時の使える幅は
     260px、字間0なら 13.9px 以下なら収まる。3.5vw ならどの幅でも比率が保てる。
     font-size は .l_footer__contact a (詳細度が上) を上書きする必要がある */
}
.l_footer__mail {
  font-size: clamp(11px, 3.5vw, 15px) !important;
  letter-spacing: 0;
  white-space: nowrap;
  word-break: keep-all !important;
}
.l_footer__tel {
  font-size: clamp(21px, 6.4vw, 26px) !important;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  word-break: keep-all !important;
}
.l_footer__hours {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--c-text);
  white-space: nowrap;
}
.l_footer__org {
  margin-top: 30px;
  text-align: left;
}
.l_footer__org-txt {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 4vw, 17px);
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--c-text);
}
.l_footer__org-txt--sm {
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.08em;
}
.l_footer__org-txt--sm + .l_footer__org-txt--sm {
  margin-top: 18px;
}
.l_footer__copy {
  margin-top: 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--c-text);
  text-align: center;
}

/* --------------------------------------------------
   PC固定背景 : メインフレームの位置合わせ
   ※ .l_header / .global_menu_01 の基本定義より後に置くこと。
      同じ詳細度なので、前に置くと後勝ちで基本定義に負ける。
-------------------------------------------------- */
@media (min-width: 1360px) {
  main > * {
    margin-left: var(--col-left);
    margin-right: 0;
  }
  /* MENUボタンをカラムの右端に合わせる */
  .l_header {
    right: calc(100% - var(--col-left) - var(--sp-max));
  }
  /* メニューオーバーレイもカラムに重ねる */
  .global_menu_01 {
    margin-left: var(--col-left);
    margin-right: 0;
  }
}

/*# sourceMappingURL=style.css.map */