@charset "utf-8";

/* ========================================================
  共通・ベースリセット
======================================================== */
#gFooter {
	margin-top: 0!important;}
.pageTitle {
	margin-bottom: 0!important;}
.headerNote {
  display: block; /* 必要に応じてスマホ側で表示 */
}
.sp_none{
	display: none;
}
#shokusapo {
  color: #1c1612;
  line-height: 1.7em; /* スマホ向けに少し詰め気味に */
  font-size: 14px;    /* モバイルの可読性に最適化 */
  background-image: url(/ssi/event/unitimekitchen/img/bg_paper.webp);
  background-size: auto;
  overflow-x: hidden; /* 横揺れ・はみ出しを絶対防止 */
}
#shokusapo .inner {
  width: 96%;
	margin:0 auto;
  padding: 0;
  box-sizing: border-box;
}
#shokusapo h2, #shokusapo h3, #shokusapo h4, #shokusapo h5 {
  font-family: 'M PLUS 1p', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em;
}

/* ========================================================
  スマホ専用：自動計測連動型・吸着横スクロールメニュー
======================================================== */

/* 1. ロゴの出し分け（スマホ側：PC用を消し、スマホ用を縮小表示） */
.my-sticky-menusp .round_logo {
  display: none !important; /* PC用ロゴはスマホでは完全に非表示 */
}
.my-sticky-menusp .round_logo_sp {
  display: block !important; /* スマホ用ロゴを表示 */
  margin: 0 10px 0 0 !important;
  flex-shrink: 0 !important;
}
.my-sticky-menusp .round_logo_sp img {
  height: 40px !important;
  width: auto !important;
  display: block;
}

/* 2. メニュー全体の基本設定 */
.my-sticky-menusp {
  width: 100% !important;
  background-image: url(/ssi/event/unitimekitchen/img/bg_herringbone.webp) !important;
	background-size:160%;
  box-sizing: border-box;
  overflow-x: auto !important; /* 横スクロールを許可 */
  -webkit-overflow-scrolling: touch; /* スワイプを滑らかに */
}

/* 固定化のトップ位置を、スマホごとのリアルな高さに自動同期 */
.my-sticky-menusp.is-sp-fixed {
  position: fixed !important;
  top: var(--header-h, 54px) !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 990 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

/* 3. 横スクロール枠（厚みを極限まで削って薄く調整） */
.my-sticky-menusp ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important; /* 絶対に下に折り返させない */
  justify-content: flex-start !important;
  align-items: center;
  margin: 0 !important;
  padding: 6px 10px 4px 10px !important; /* 上下パディングを詰めて極薄化 */
  width: max-content !important; /* スクロールを成立させるための幅確保 */
}

.my-sticky-menusp li {
  margin: 0 6px 0 0 !important; /* ボタン同士の間隔も少しタイトに */
  flex-shrink: 0 !important;
}

/* ボタンのデザイン（厚みを減らしスタイリッシュに） */
.my-sticky-menusp a {
  color: #1c1612 !important;
  font-weight: bold;
  font-size: 11px !important; /* 文字を1px小さくして省スペース化 */
  white-space: nowrap !important;
  background-color: rgba(255, 255, 255, 1);
  padding: 4px 8px !important; /* 内側の上下の余白を削って薄く */
  border-radius: 12px !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

/* 4. ガタつき防止クッション（実際のメニューの薄さに自動連動） */
#sticky-trigger.is-active {
  height: var(--menu-h, 34px) !important; /* メニューが薄くなった分、身代わりも薄く自動追従 */
  display: block !important;
}

/* 5. 【改善】横スクロールできることが分かる「白いスクロールバー」を表示 */
.my-sticky-menusp::-webkit-scrollbar {
  height: 3px !important; /* スクロールバーの太さ（邪魔にならない極細） */
  display: block !important; /* 非表示を解除して表示 */
}
.my-sticky-menusp::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1) !important; /* バーの背景（うっすら暗く） */
}
.my-sticky-menusp::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.6) !important; /* スクロールバー本体を「白」に */
  border-radius: 3px !important;
}

/* ========================================================
  メインビジュアル動画（スマホ専用：動画クッキリ・4秒間隔時間差フェードイン完全版）
======================================================= */
/* 4:5の黄金比率を維持して画面幅いっぱいに配置 */
.video-container {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1080 / 1350 !important;
  overflow: hidden !important;
  background-color: #000;
}
.video-container video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* 画面全体の濁りを解消するため、黒いスモークを廃止して動画の鮮やかさを復活 */
.video-overlay {
  display: none !important;
}

/* 文字を動画の下部エリアに配置 ＋ 下から上へのグラデーション影を敷く */
.fade-text-box {
  position: absolute !important;
  bottom: 0 !important; /* 動画の下端にぴったり吸着 */
  top: auto !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 50% !important; /* 動画の下半分を使ってテキストエリアを構成 */
  box-sizing: border-box;
  padding: 0 15px 35px 15px !important; /* 下部に程よい余白 */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important; /* 文字を下側に寄せる */
  align-items: center !important;
  z-index: 3;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%) !important;
  pointer-events: none;
}

/* 古い白ボカシ座布団を消滅 */
.blur-bg {
  display: none !important;
}

/* ★スマホ専用：下からふわっと登場する文字の初期状態（サイズ・視認性大幅アップ版） */
.fade-line {
  font-family: "Hiragino Mincho ProN", "YuMincho", serif !important;
  font-weight: 800 !important;
  
  /* ★修正：下のコンテンツ文章（1.2em）に引けを取らないしっかりとしたサイズに拡大！ 
     これ以上大きくすると、横幅の狭いスマホで1行がはみ出て自動改行を誘発するため、これが美しさの限界突破サイズです */
  font-size: 0.85em !important; 
  
  color: #ffffff !important; /* 映画の字幕風の白文字 */
  line-height: 1.6 !important;
  margin: 6px 0 !important; /* 文字が大きくなった分、行間も少しゆとりを持たせる */
  text-align: center !important;
  white-space: nowrap !important;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUpSP 1.5s ease forwards;
  
  /* 文字をグッと手前に浮き上がらせて、明るい背景の時でも確実に読ませる強力なシャドウ */
  text-shadow: 
    1px 1px 3px rgba(0, 0, 0, 0.9), 
    -1px 1px 3px rgba(0, 0, 0, 0.9), 
    1px -1px 3px rgba(0, 0, 0, 0.9), 
    -1px -1px 3px rgba(0, 0, 0, 0.9),
    0 0 6px rgba(0, 0, 0, 0.8) !important;
}

/* 完璧な4秒ディレイ設計 */
.line1 { animation-delay: 0.5s !important; }
.line2 { animation-delay: 4.5s !important; }

/* 下部キャッチコピーの隙間調整 */
.line3 {
  animation-delay: 8.5s !important;
  margin-top: 25px !important; /* キャッチコピーの前に少し広めの美しい余白を挿入 */
  font-size: 0.9em !important; /* 導入文よりわずかにスマートにしてメリハリをつける */
  font-weight: 700 !important;
  color: #fff !important;
}

/* 食堂ブランドロゴ（UniTime Kitchen）の文字装飾 */
.line4 {
  animation-delay: 12.5s !important;
  font-size: 1.45rem !important; /* ★ここも全体の拡大に合わせて、ドカンと主役級のサイズに爆上げ！ */
  font-weight: 900 !important;
  text-shadow: 
    1px 1px 4px rgba(0, 0, 0, 0.9),
    -1px 1px 4px rgba(0, 0, 0, 0.9),
    1px -1px 4px rgba(0, 0, 0, 0.9),
    -1px -1px 4px rgba(0, 0, 0, 0.9) !important;
}

/* スマホ用の下からフワッと上がって定着するアニメーション定義 */
@keyframes fadeInUpSP {
  from {
    opacity: 0;
    transform: translateY(20px); /* 20px下からスタート */
  }
  to {
    opacity: 1;
    transform: translateY(0);   /* 定位置にカチッと着地 */
  }
}

/* ========================================================
  スマホ専用メニュー固定時のブルブル震え（チャタリング）防止
======================================================== */
#sticky-trigger {
  width: 100%;
  height: 1px;
  visibility: hidden;
  margin-bottom: -1px;
}
/* メニューが薄くなった分（約34px）、吸着した瞬間に正確な高さの身代わりを出してガタつきを瞬時に相殺 */
#sticky-trigger.is-active {
  height: var(--menu-h, 34px) !important;
  display: block !important;
}

/* -------------------------------------
特徴01 安心・おいしい
------------------------------------- */
#key_features01{
	margin:0 0 4em;
}
#key_features01 h2 {
	display: block;
	height: auto;
	width: 100%;
	margin: 1em auto 0;
	padding: 1.5em 0 20px;
	background-image: url(/ssi/event/unitimekitchen/img/figure_logo_utk.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size:7.5em;
	text-align:center;
	font-size:140%;
}
#key_features01 h2 span{
	display:block;
	margin-top:0.3em;
	font-size:140%;
	color:#0a6db0;
	background-image:url(/ssi/event/unitimekitchen/img/bg_chalkline_blue.png);
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:9em auto;
	padding-bottom:38px;
}
#key_features01 dl,
#key_features02 dl,
#key_features03 dl{
	width:100%;
	margin-bottom: 3em;
}
#key_features03 dl{
	position: relative;
}
#key_features03 dl img.sashie02{
	height: 12em;
	position: absolute;
	bottom: -2em;
	right:1em;
	z-index:800;
}
/*SPではボツとする画像だけがある枠*/
#key_features01 dl.kf01_1 dt.kf01_left,
#key_features02 dl.kf02_2 dt.kf02_left,
#key_features03 dl.kf03_1 dt.kf03_left{
	display: none!important;
}
/*画像だけがある枠*/
#key_features01 dl.kf01_1 dt.kf01_left,
#key_features01 dl.kf01_2 dd.kf01_right,
#key_features02 dl.kf02_1 dd.kf02_right,
#key_features02 dl.kf02_3 dd.kf02_right,
#key_features01 dl.kf01_1 dd.kf01_img_sp,
#key_features02 dl.kf02_2 dd.kf02_img_sp,
#key_features03 dl.kf03_1 dd.kf03_img_sp{
	width:60%;
	height:10em;
	margin: 0 auto;
	overflow:hidden;
	border-radius:16px;
}
/*画像だけがある枠の画像を少し平たく*/
#key_features01 dl.kf01_1 dt.kf01_left img,
#key_features01 dl.kf01_2 dd.kf01_right img,
#key_features02 dl.kf02_1 dd.kf02_right img,
#key_features02 dl.kf02_3 dd.kf02_right img,
#key_features03 dl.kf03_1 dt.kf03_left img,
#key_features01 dl.kf01_1 dd.kf01_img_sp img,
#key_features02 dl.kf02_2 dd.kf02_img_sp img{
	width:100%;
	height:100%;
	object-fit:cover;
}
/*文字だけがある枠*/
#key_features01 dl.kf01_1 dd.kf01_right,
#key_features01 dl.kf01_2 dt.kf01_left,
#key_features02 dl.kf02_1 dt.kf02_left,
#key_features02 dl.kf02_2 dd.kf02_right,
#key_features02 dl.kf02_3 dt.kf02_left,
#key_features03 dl.kf03_1 dd.kf03_right{
	width:94%;
	margin: 0 auto;
}
#key_features02 dt.kf02_left{
	position: relative;
}
#key_features02 dt.kf02_left img.sashie01{
	width:10em;
	position: absolute;
	bottom: 0;
	right:-0.8em;
	z-index:800;
}
#key_features01 .item-subtitle {
  font-family: "Yu Mincho Demibold", "YuMincho", "Hiragino Mincho ProN", serif !important;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 1.4em;
	font-weight:700;
  color: #0a6db0;
  padding: 0 0 6px;
  margin-bottom: 0.5em;
  border-bottom: 2px solid #0a6db0;
}
#key_features02 .item-subtitle {
  font-family: "Yu Mincho Demibold", "YuMincho", "Hiragino Mincho ProN", serif !important;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 1.3em;
	line-height: 1.6;
	font-weight:700;
  color: #d13e34;
  padding: 0 0 6px;
  margin-bottom: 0.5em;
  border-bottom: 2px solid #d13e34;
}
#key_features03 .item-subtitle {
  font-family: "Yu Mincho Demibold", "YuMincho", "Hiragino Mincho ProN", serif !important;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 1.3em;
	line-height: 1.6;
	font-weight:700;
  color: #c07a08;
  padding: 0 0 6px;
  margin-bottom: 20px;
  border-bottom: 2px solid #c07a08;
}
#key_features01 .item-text,
#key_features02 .item-text,
#key_features03 .item-text,
#key_features04 p{
	display: block;
  padding: 0 1em;
	margin-bottom: 1em;
  font-size: 1.2em;
  color: #1c1612;
  line-height: 1.7;
  text-align: left;
}
#key_features02 .item-text span.akamoji{
	color: #d13e34;
	font-weight: 700;
}
ruby rt {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif; /* ゴシック体 */
  font-size: 0.45em; /* 親文字に対するルビのサイズ */
  font-weight: bold;
  letter-spacing: 0.65em;
	color:#1c1612;
  text-align: center; /* Safariなどの古いブラウザ向けの互換性お守り */
}

/* -------------------------------------
  画像単体のスクロールフェードイン（100px版）
------------------------------------- */
.js-fade-img-left,
.js-fade-img-right {
  opacity: 0;
  /* 移動距離が短くなるので、アニメーション時間も「1.2秒」に微調整して、
     より洗練された「フワッ」という戻り方にしています */
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.0s ease;
}

/* ★左の画像は、100pxだけ左にずらして待機 */
.js-fade-img-left {
  transform: translateX(-100px);
}

/* ★右の画像は、100pxだけ右にずらして待機 */
.js-fade-img-right {
  transform: translateX(100px);
}

/* 画面内に入ったら、本来の位置（0）にピタッと戻る */
.js-fade-img-left.is-active,
.js-fade-img-right.is-active {
  opacity: 1;
  transform: translateX(0);
}

/* -------------------------------------
1週間の献立見本
------------------------------------- */
#menu{
	width:100%;
	position: relative;
	margin: 0 0 9em;
}
#menu .bg_photo{
	width:100%;
	height: 20em;
	background-image:url(/ssi/event/unitimekitchen/img/bg_weekly_mealplan.webp);
	background-repeat: no-repeat;
	background-position: 35% center;
	background-size: cover;
}
#menu .fukidashi01{
	display: block;
	width:13em;
	height: auto;
	position:absolute;
	top:17em;
	right:0;
}
#menu p.fukidashi01 img{
	width:100%;
	height: auto;
}
/* -------------------------------------
1週間の献立見本（スマホ専用：メニュー表はみ出しスクロール版）
------------------------------------- */

/* ★重要：メニュー表を包む親の箱
   画面幅100%に固定し、中身がはみ出したら横スクロールを発生させる設定にします */
#menu .weekly_mealplan {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important; /* ★横スクロールを許可 */
  -webkit-overflow-scrolling: touch; /* スワイプを滑らかにする */
  padding: 10px 0 !important;
  margin: 1em 0 !important;
  box-sizing: border-box;
}

/* PC用のメニュー画像は完全に非表示 */
#menu .weekly_mealplan img.wm_pc {
  display: none !important;
}

/* ★超最重要：スマホ用の横長メニュー画像（.wm_sp）の設定
   画面幅（100%）に閉じ込めず、文字がクッキリ読める絶対値（例: 580px）まで
   強制的に限界突破させて引き伸ばします */
#menu .weekly_mealplan img.wm_sp {
  display: block !important;
  width: 700px !important;    /* ★スマホの画面幅を超えて大きく配置（指で動かせる全容になります） */
  max-width: none !important; /* 100%制限を完全に解体 */
  height: auto !important;
  padding: 0 15px !important; /* スクロールした時に右端や左端に少し余白を残すためのクッション */
  box-sizing: border-box !important;
}

/* メニュー表にも、上部メニューとお揃いの「細い白いスクロールバー」を出して
   「右に動かせるよ」とユーザーにアピールします */
#menu .weekly_mealplan::-webkit-scrollbar {
  height: 4px !important;
  display: block !important;
}
#menu .weekly_mealplan::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05) !important;
}
#menu .weekly_mealplan::-webkit-scrollbar-thumb {
  background: rgba(10, 109, 176, 0.4) !important; /* 食堂のテーマカラーの青を薄くして上品に */
  border-radius: 4px !important;
}

#menu p{
	display: block;
	width: 90%;
	margin:1.5em 0 0;
	padding: 0 20px;
	font-size: 1.2em;
	color: #1c1612;
	line-height: 1.7;
	text-align: left;
}
#menu p span.text_emphasis{
	color: #0a6db0;
	font-weight: 700;
}
span.text_80{
	font-size:80%;
}
#menu .chushaku01 ol{
	padding-left:2em;
	margin:0.5em 0 0;
	}
.chushaku02,
.chushaku04,
.chushaku06{
  display: block;
  padding: 0 0 0 2em;
	margin-bottom: 1em;
}
.chushaku02 ol,
.chushaku04 ol,
.chushaku06 ol{
  width: 100%;
  margin: 0;
}
#menu .chushaku01 ol li,
.chushaku02 ol li,
.chushaku04 ol li,
.chushaku06 ol li{
	font-size:0.9em;
	margin: 0;
	padding-left:1em;
	background-image:url(/media/assets/img/common/icon_kome.png);
	background-repeat: no-repeat;
	background-size:0.9em auto;
	background-position: 0 7px;
}

/* -------------------------------------
保護者＆入居者の声
------------------------------------- */
#voice{
	width:100%;
	background-color:#dbb761;
	position: relative;
	margin-bottom: 4em;
	padding-bottom:2em;
}
#voice .figure_meal_l{
	position: absolute;
	top:-6.5em;
	left: 3%;
	width:40%;
	height: auto;
}
#voice .figure_meal_r{
	position: absolute;
	top:-6.5em;
	right: 3%;
	width:40%;
	height: auto;
}
#voice .figure_meal_l img,
#voice .figure_meal_r img{
	width: 100%;
	height: auto;
}
/* -------------------------------------
  食事見本の跳ねるアニメーション仕込み
------------------------------------- */
/* アニメーション前の初期状態（透明にしておく） */
.js-bounce-img {
  opacity: 0;
}
/* ★左の画像が画面に入ったら発動するアニメーション */
.js-bounce-img.is-active-l {
  animation: bounceUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* ★右の画像用：少しだけ（0.3秒）遅れて発動させる設定 */
.js-bounce-img.is-active-r {
  animation: bounceUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards; /* 末尾の0.3sがディレイ（時間差） */
}
/* 上にピョンッと跳ねて定着する一連の動き */
@keyframes bounceUp {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.95); /* 下から小さめに登場 */
  }
  60% {
    opacity: 1;
    transform: translateY(-15px) scale(1.02); /* 定位置を通り越して上に少し跳ねる */
  }
  80% {
    transform: translateY(5px) scale(0.99); /* 少しだけ下に沈む */
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1); /* 定位置にピタッと着地 */
  }
}

/* ========================================================
  保護者＆入居者の声 タイトルスマホ用リサイズ・改行制御
======================================================== */

/* タイトルエリア全体の上下余白をスマホ用に少しスリムに */
.voice-title-area {
  padding: 30px 0 10px !important;
}

/* ★ポイント：
  1列の横並び（flex）を解除して、センター揃えのブロック型に変更。
  「＆（amp）」を強制的に改行の起点として機能させます。
*/
.voice-title-row {
  display: block !important; 
  text-align: center !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ★白い丸文字のスマホ最適化：
  スマホ画面（横幅320px〜400px前後）で絶対に折り返さないよう、
  サイズを「縦横 38px」までスリムに絞り込みます。
*/
.voice-title-row .circle-text {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  color: #0a6db0 !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  margin: 0 1px !important;
  vertical-align: middle !important;
}
.voice-title-row .amp {
  color: #0a6db0 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

/* 2行目：「入 居 者 の声」部分の文字サイズ調整 */
.voice-title-row .txt-sub {
  font-size: 1.45rem !important; /* 丸文字とのバランスを保つサイズ */
  font-weight: 700 !important;
  margin-left: 6px !important;
  color: #1c1612 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

/* 注記（※2025年度〜） */
.voice-note {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #1c1612 !important;
  margin: 10px 0 0 0 !important;
  letter-spacing: 0.05em !important;
	text-align:center;
}

/*ここからイラスト＋フキダシ*/
.voice_figure {
	width: 90%;
	margin: 0 auto;
	text-align:center;
}
/* 3つのテキスト共通設定 */
.voice_figure p {
  line-height: 1.6;
  display: block;
  color: #1c1612;
  font-size: 1.1em;
	padding:1.5em;
	margin:0;
	background-color:#fff;
	border-radius:20px;
	clear:both;
	position:relative;
	z-index:1;
	text-align:left;
}
.voice_figure p.voice01:after,
.voice_figure p.voice02:after,
.voice_figure p.voice03:after{
 content: '';
 display: inline-block;
 width: 23px;
 height: 23px;
 background-color: #fff; /*fukidashi2*/
 border-radius: 2px;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 position: absolute;
 left:47%;
 bottom: -10px;
	z-index:0;
}
.voice_figure img.voice01_icon{
	width:12em!important;
	margin:1em 0;
}
.voice_figure img.voice02_icon {
	width:6em;
	margin:1em 0;
}
.voice_figure img.voice03_icon {
	width:6em;
	margin:1em 0 0;
}

/* -------------------------------------
特徴02 嬉しい！楽しい！
------------------------------------- */
#key_features02{
	margin:0 0 5em;
}
#key_features02 h3 {
	display: block;
	height: auto;
	width: 100%;
	margin: 1.5em auto 0;
	padding: 2em 0 20px;
	background-image: url(/ssi/event/unitimekitchen/img/figure_logo_utk.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size:7.5em;
	text-align:center;
	font-size:140%;
}
#key_features02 h3 span{
	display:block;
	margin-top:0.3em;
	font-size:140%;
	color:#d13e34;
	background-image:url(/ssi/event/unitimekitchen/img/bg_chalkline_red.png);
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:9em auto;
	padding-bottom:30px;
}

/* -------------------------------------
特徴03 学生生活の質が向上！
------------------------------------- */
#key_features03{
	margin:0 0 5em;
}
#key_features03 h4 {
	display: block;
	height: auto;
	width: 100%;
	margin: 1em auto 0;
	padding: 1.5em 0 20px;
	background-image: url(/ssi/event/unitimekitchen/img/figure_logo_utk.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size:7.5em;
	text-align:center;
	font-size:140%;
}
#key_features03 h4 span{
	display:block;
	margin-top:0.3em;
	font-size:140%;
	color:#c07a08;
	background-image:url(/ssi/event/unitimekitchen/img/bg_chalkline_yellow.png);
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:11em auto;
	padding-bottom:38px;
}

/* -------------------------------------
  ギャラリースライド（スマホ専用環境設定）
------------------------------------- */
#gallery {
  width: 100%;
  height: auto;
  padding: 0 0 2em;
  margin-bottom: 4em;
  background-image: url(/ssi/event/unitimekitchen/img/bg_slider.webp);
  position: relative;
}
#gallery p.shoukai{
  color: #fff;
  width: 80%;
  margin: -1em auto 2em;
  text-align: center;
}
#gallery p.chushaku05{
  color: #fff;
  font-size: 90%;
  width: 80%;
  margin: 0 auto;
}
#gallery img.kirakira01{
  width: 5em;
  height: auto;
  position: absolute;
  bottom: 6px;
  right: 7%;
}
#gallery img.kirakira02{
  width: 5em;
  height: auto;
  position: absolute;
  top: 10%;
  left: 3%;
}
#gallery .g_tit {
  display: block;
  width: 90%; 
  max-width: 100%;
  margin: 30px auto 1.5em;
  padding: 3.2em 0 0;
  text-align: center;
  background-image: url(/ssi/event/unitimekitchen/img/figure_slider_tit.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 160%; 
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: 1.3em;
  font-weight: 700;
  color: #fff;
  line-height: 1.5em;
}

/* -------------------------------------
  表側のギャラリースライダー全体枠
------------------------------------- */
.slider-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 10px auto 0;
  padding: 0 15px !important; /* 左右に少し余白を作ってスライダーを画面内に収める */
  box-sizing: border-box;
  position: relative;
}

/* Swiper本体のコンテナ */
.main-slider {
  width: 100%;
  height: 280px !important; /* スマホ用に全体の高さを280pxに縮小 */
  overflow: hidden;
  position: relative;
}

/* スライド1枚ずつの箱 */
.main-slider .gallery-item {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  height: 240px !important; /* 写真自体の高さを240pxに（下の残り40pxはドット用） */
  box-sizing: border-box !important;
}

/* 写真自体の高さ・幅指定 */
.main-slider .gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 12px !important;
}

/* --- テキストリンク被せ --- */
.gallery-item .gallery-overlay {
  position: absolute !important;
  left: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%) !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  z-index: 5 !important;
}

.gallery-item .property-name {
  color: #ffffff !important;
  font-size: 0.8em !important;
  font-weight: bold !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9) !important;
  position: relative !important;
  padding-left: 12px !important;
  display: block !important;
  line-height: 1.3;
}
.gallery-item .property-name::before {
  content: "▶" !important;
  font-size: 0.8em !important;
  color: #dbb761 !important;
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}

/* -------------------------------------
  左右の矢印ボタン（スマホ用：標準の青い残像を完全抹殺）
------------------------------------- */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none !important; /* Swiper標準の巨大文字フォントを消滅させる */
}

.swiper-button-prev,
.swiper-button-next {
  width: 36px !important;
  height: 36px !important;
  top: calc(240px / 2) !important; /* 写真の高さ240pxのセンター */
  transform: translateY(-50%) !important;
  margin: 0 !important;
  background-color: rgba(0, 0, 0, 0.4) !important; /* 半透明の黒丸座布団 */
  border-radius: 50% !important;
  color: #ffffff !important;
  z-index: 10 !important;
  position: absolute !important;
  
  /* ★追加：裏で生き残っているSwiper標準の青い矢印（SVG背景画像）を完全に破壊・無色化する */
  background-image: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent; /* タップした瞬間に青い四角い選択枠が出るのも防止 */
}

/* 自前のシンプルな細型矢印（〈 〉）を丸ボタンのど真ん中に配置 */
.swiper-button-prev::before {
  content: "〈" !important;
  font-size: 13px !important;
  font-weight: bold !important;
  color: #ffffff !important; /* 確実に白文字にする */
  position: absolute;
  left: 45%;
  top: 46%;
  transform: translate(-50%, -50%);
}
.swiper-button-next::before {
  content: "〉" !important;
  font-size: 13px !important;
  font-weight: bold !important;
  color: #ffffff !important; /* 確実に白文字にする */
  position: absolute;
  left: 55%;
  top: 46%;
  transform: translate(-50%, -50%);
}

/* 矢印の左右の配置位置 */
.swiper-button-prev { left: 5px !important; }
.swiper-button-next { right: 5px !important; }


/* -------------------------------------
  表側のドットナビカスタム（Swiper版）
------------------------------------- */
.swiper-pagination {
  bottom: 10px !important;
  line-height: 1 !important;
}
.swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  background: #ffffff !important;
  opacity: 0.35 !important;
  margin: 0 4px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  transition: opacity 0.3s ease, background-color 0.3s ease !important;
}
.swiper-pagination-bullet-active {
  background: #dbb761 !important;
  opacity: 1 !important;
}


/* -------------------------------------
  詳細ギャラリーモーダル（スマホ専用：上下2段・下部横並び・独立キャプション）
------------------------------------- */
.g-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 9999;
  display: none;
}
.g-modal.is-open {
  display: block;
  animation: gModalFade 0.3s ease forwards;
}

/* 背景マット */
.g-modal-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
}

/* ポップアップメインコンテンツ */
.g-modal-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 92% !important;
  max-width: 100% !important;
  background-color: #fff;
  padding: 10px !important;
  box-sizing: border-box;
  border-radius: 16px !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

/* 横並びを解除し、スマホ用に縦の並び（上下2段・高さ自動）に組み替えます */
.g-modal-flex-wrapper {
  display: flex !important;
  flex-direction: column !important; /* 上下に割る */
  justify-content: flex-start !important;
  align-items: stretch !important;
  width: 100% !important;
  height: auto !important; /* PC用の560px固定をここで完全に破壊リセット */
}

/* --- 上段：メイン大画像エリア --- */
.g-modal-main-swiper {
  width: 100% !important;
  height: auto !important;
  position: relative;
  overflow: hidden;
  border-radius: 10px !important;
}

.g-modal-main-img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important; /* メイン大画像をスマホでも完璧な16:9の比率にする */
  overflow: hidden;
  background-color: #000;
  position: relative;
}
.g-modal-main-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* モーダル内の左右矢印（スマホサイズ・大画像の中央に吸着） */
.g-modal-prev, .g-modal-next {
  width: 34px !important; height: 34px !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  border-radius: 50% !important;
  color: #fff !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 30 !important;
  position: absolute !important;
}
.g-modal-prev::before { content: "〈" !important; font-size: 11px !important; position: absolute; left: 45%; top: 46%; transform: translate(-50%, -50%); }
.g-modal-next::before { content: "〉" !important; font-size: 11px !important; position: absolute; left: 55%; top: 46%; transform: translate(-50%, -50%); }
.g-modal-prev { left: 10px !important; }
.g-modal-next { right: 10px !important; }

/* --- 下段：サムネイルエリア（メインの下側に「横並び」で美しく展開） --- */
.g-modal-thumb-swiper {
  width: 100% !important;
  height: auto !important;
  margin-top: 10px !important; /* 大画像・キャプションとの間に適切な隙間を開ける */
  overflow: hidden !important;
  position: relative;
}

.g-modal-thumb-img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important; /* サムネイル1枚ずつを横長に成形 */
  overflow: hidden;
  border-radius: 4px !important;
  cursor: pointer;
  box-sizing: border-box;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  opacity: 0.4 !important;
}
.g-modal-thumb-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 現在選ばれているサムネイルの金色フチを100%点灯 */
.g-modal-thumb-swiper .swiper-slide-active .g-modal-thumb-img,
.g-modal-thumb-swiper .swiper-slide-thumb-active .g-modal-thumb-img,
.g-modal-thumb-swiper [class*="active"] .g-modal-thumb-img {
  border-color: #dbb761 !important; 
  opacity: 1 !important;        
}

/* 右上の「×」閉じるボタンの位置調整 */
.g-modal-close {
  position: absolute;
  top: -40px !important; /* 白い箱の外側（右上）に浮かせる */
  right: 4px !important;
  color: #fff; font-size: 32px;
  cursor: pointer; z-index: 100;
}

@keyframes gModalFade {
  from { opacity: 0; } to { opacity: 1; }
}

/* ========================================================
  ★追加：スマホモーダル専用の独立タイトル＆キャプション装飾（上書き徹底版）
======================================================== */
@media screen and (max-width: 767px) {
  
  /* モーダル白枠最上部に1つだけ固定される物件名タイトル */
  .g-modal-sp-fixed-title {
    width: 100% !important;
    padding: 5px 30px 12px 5px !important; /* 右上の「×」に被らない余白 */
    box-sizing: border-box !important;
    color: #1c1612 !important; /* 指定の文字色 */
    font-size: 1.2em !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 1.3 !important;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
    border-bottom: 1px solid #eee; /* 上部に固定されている感（区切り線）をプラス */
    margin-bottom: 10px !important;
    display: block !important;
  }

  /* メイン画像からPC用の重ねタイトル・重ねキャプションの設定を完全に抹殺 */
  .g-modal-main-swiper .g-modal-title,
  .g-modal-main-swiper .g-modal-caption {
    display: none !important;
  }

  /* ★ご要望：メイン画像とサムネイルの間に新設する「各画像のキャプション領域」 */
  .g-modal-sp-active-caption {
    width: 100% !important;
	  height:6em;
    margin: 12px 0 6px 0 !important; /* メイン画像の下、サムネイルの上に隙間を確保 */
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    background-color: #f7f5f3 !important; /* 読みやすいように薄い上品な座布団を敷く */
    border-left: 3px solid #dbb761 !important; /* 特設カラーの金色のアクセントライン */
    color: #1c1612 !important; /* 指定 of 文字色 */
    font-size: 1em !important;
    line-height: 1.6 !important;
    text-align: left !important;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
    min-height: 44px; /* 文字数が切り替わったときに全体の高さがガタガタ上下するのを防ぐ最低高 */
    display: block !important;
  }
}

/* -------------------------------------
特徴04 その他特徴
------------------------------------- */
#key_features04{
	margin:0 0 4em;
}
#key_features04 h5 {
	display: block;
	height: auto;
	width: 100%;
	margin: 0 auto 1em;
	padding: 4em 0 40px;
	background-image: url(/ssi/event/unitimekitchen/img/figure_andmore_green.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size:auto 3.5em;
	text-align:center;
	font-size:140%;
	line-height:1.5em;
}
#key_features04 h5 span{
	font-size:115%;
	color:#417a36;
	background-image:url(/ssi/event/unitimekitchen/img/bg_chalkline_green.png);
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:100% auto;
	padding-bottom:18px;
}
#key_features04 ul{
	width:100%;
	margin:0 auto;
}
#key_features04 li{
	display: block;
	width:100%;
	padding: 0;
	text-align:center;
	margin-bottom:1em;
	border-bottom:1px dashed #417a36;
}
#key_features04 li:last-child{
	border:none;
}
#key_features04 .kf04_img_container{
	width:60%;
	height:12em;
	margin:0 auto 1em;
	overflow:hidden;
	border-radius:16px;
}
#key_features04 li img{
	width:100%;
	height:100%;
	object-fit:cover;
	margin: 0;
}
#key_features04 li p.kf04_tit{
	color: #417a36;
	font-weight: 700;
	font-size:1.2em;
	text-align: center;
	margin:0 0 0.2em;
	font-family: 'M PLUS 1p', sans-serif !important;
  letter-spacing: 0.05em;
	line-height:1.4;
}
#key_features04 li p.kf04_tit span{
	font-size:140%;
}
#key_features04 li p span{
	font-size:110%;
	color:#417a36;
	font-weight:700;
}
/* 光るリンクボタン */
#key_features04 li p.kf04_link a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0.7em auto;
    max-width: 280px;
    padding: 10px 0 10px 1em;
    color: #1c1612;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #fdeadc;
	background-image:url(/media/assets/img/common/icon81.png);
	background-repeat: no-repeat;
	background-position: 1em center;
}
#key_features04 li p.kf04_link a:hover {
    background: #fdeadc;
    color: #fd7009;
	background-image:url(/media/assets/img/common/icon81.png);
	background-repeat: no-repeat;
	background-position: 1.4em center;
}
#key_features04 li p.kf04_link a:before, #key_features04 li p.kf04_link a:after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
#key_features04 li p.kf04_link a:before {
  top: 0;
  left: 0;
}
#key_features04 li p.kf04_link a:after {
  bottom: 0;
  right: 0;
}
#key_features04 li p.kf04_link a:hover:before, #key_features04 li p.kf04_link a:hover:after {
  width: 100%;
  height: 100%;
}
#key_features04 li p.kf04_link a:hover:before {
  border-top-color: #fd7009;
  border-right-color: #fd7009;
  transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}
#key_features04 li p.kf04_link a:hover:after {
  border-bottom-color: #fd7009;
  border-left-color: #fd7009;
  transition: border-color 0s ease-out 0.2s, width 0.15s ease-out 0.2s, height 0.15s ease-out 0.3s;
}

/* -------------------------------------
05 動画
------------------------------------- */
#movies{
	max-width: 100%;
	margin:0 auto 4em;
	padding: 0;
	background-image: url(/ssi/event/unitimekitchen/img/bg_herringbone.webp);
	background-size:160% auto;
}
.m_container{
	width:100%;
	margin: 0 auto 1em;
	padding-bottom:1.5em;
	background-image: url(/ssi/event/unitimekitchen/img/bg_chalkart_movie.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size:40em auto;
}
.m_container p.chushaku03{
	display:block;
	color: #fff;
	font-size:90%;
	width:90%;
	margin:0 auto;
}
.m_tit{
	display: block;
	color:#fff;
	font-family: 'M PLUS 1p', sans-serif !important;
	letter-spacing: 0.2em;
	font-weight:700;
	text-align:center;
	width:100%;
	height:8em;
	font-size:1.4em;
	line-height:1.8em;
	padding:2.6em 0 0;
}
.m_tit span{
	font-size:130%;
	letter-spacing: 0;
}
/* -------------------------------------
  動画
------------------------------------- */
/* -------------------------------------
  動画セクション（スマホ用最適化）
------------------------------------- */

/* 動画を2つ包む枠：PCの1060px固定を解除し、スマホは縦並び1列に変更 */
.video-double-grid {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 15px 1em 15px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important; /* スマホでは縦に並べる */
  align-items: center !important;
  gap: 20px !important; /* 動画同士の上下の間隔 */
}

/* 動画1つずつの外枠 */
.youtube-trigger {
  width: 100% !important; /* スマホ画面幅いっぱいに広げる */
  max-width: 480px !important; /* 大きくなりすぎて画質が荒れないようにストッパー */
  background-color: #fff !important;
  padding: 6px !important; /* 白い紙フチをスマホ用に少しスリムに */
  box-sizing: border-box !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
  border-radius: 16px !important;
  transition: transform 0.3s ease !important;
}

/* ★改善：スマホで動画再生が始まったら、周囲の白いpaddingと背景を完全に消滅させて16:9を100%活かす */
.youtube-trigger.is-playing-sp {
  padding: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.youtube-trigger.is-playing-sp .video-poster {
  border-radius: 12px !important; /* 動画自体の角を綺麗に丸める */
}

/* 16:9を維持する箱 */
.video-poster {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important; /* 横幅に対して常に16:9をキープ */
  overflow: hidden !important;
  background-color: #000 !important; /* 動画読み込み中の一瞬のチラつき防止用黒 */
  border-radius: 12px !important;
}

/* サムネイル画像 */
.video-poster img {
  border-radius: 12px !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* YouTube風再生ボタンのスマホサイズ縮小調整 */
.video-poster .play-btn {
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 54px !important; /* スマホ画面に合わせて少し小ぶりに */
  height: 38px !important;
  background-color: #f00 !important;
  border-radius: 8px !important;
  z-index: 2 !important;
}
.video-poster .play-btn::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important; left: 55% !important;
  transform: translate(-50%, -50%) !important;
  border-style: solid !important;
  border-width: 8px 0 8px 14px !important; /* 三角マークもボタンに合わせてリサイズ */
  border-color: transparent transparent transparent #ffffff !important;
}

/* 本物の動画（iframe）の設定：16:9のエリアに100%ぴったり吸着 */
.youtube-trigger iframe {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border: none !important;
  display: block !important;
}

/* スマホ時はPC用のモーダルポップアップ関連のスタイルを完全非表示リセット（競合防止） */
.video-modal, .video-modal-bg, .video-modal-content {
  display: none !important;
}

/* -------------------------------------
  テキスト検索
------------------------------------- */
#text_search{
	width:100%;
}
.comSideSearch {
    border-radius: 0!important;
	background-color: #d9671d;
	padding: 3em 0!important;
}
.comSideSearch p {
	font-size: 1.4em!important;
font-family: 'M PLUS 1p', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;}
.autocomplete {
    display: block!important;
    width: 90%!important;
    margin:0 auto!important;
}
.autocomplete #search-school-submit,.autocomplete input[type=submit] {
    background-color: #0a6db0!important;
}
.comSideSearch .button {
	margin: 1em auto!important;
max-width:16em!important;}

/* ========================================================
  エリア別検索（スマホ専用：崩れ防止・2カラム等倍グリッド構成）
======================================================== */
#area-search {
  width: 100% !important;
  padding: 40px 0 60px !important; /* スマホ用に上下の余白を少しコンパクトに */
  box-sizing: border-box;
}

#area-search .area-inner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto;
  padding: 0 15px !important; /* 左右の余白を15pxで統一して画面幅に合わせる */
  box-sizing: border-box;
}

/* タイトル装飾のスマホ成形 */
.area-section-title {
  text-align: center;
  margin-bottom: 25px !important;
}
.area-section-title p {
  font-family: 'M PLUS 1p', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  font-size: 1.35em !important; /* スマホで見やすい見出しサイズに微縮小 */
  color: #1c1612;
  line-height: 1.4;
  padding-bottom: 15px !important;
  background-image: url(/ssi/event/unitimekitchen/img/bg_midashi_areasearch.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 11em auto !important; /* 見出し文字の縮小に合わせて背景線も小さく */
}

/* 各地域行のコンテナ（高さ自動・横揺れ防止） */
.area-grid-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important; /* 行同士の隙間を少しタイトにして見やすく */
  width: 100% !important;
}

/* 各地域ごとの「1行」の枠組み（Flexboxで左右の役割をロック） */
.area-row {
  display: flex !important;
  flex-direction: row !important; /* 横並び構造を100%維持 */
  align-items: stretch !important; /* 左右のブロックの高さを自動で揃える */
  margin: 0 !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(28, 22, 18, 0.03) !important;
}

/* --- 左側：地域名ラベル（スマホの横幅を圧迫しない30%比率） --- */
.area-row .area-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28% !important;   /* ★PCの固定180pxを廃止し、画面の28%に固定してボタン幅を広く確保 */
  min-width: 28% !important;
  max-width: 90px !important; /* 広がりすぎ防止のストッパー */
  font-weight: bold;
  color: #ffffff !important;
  font-size: 0.95em !important; /* 枠内で文字が溢れないように1pxスリムに */
  text-align: center !important;
  padding: 10px 5px !important; /* 左右の余白を削って文字領域を確保 */
  box-sizing: border-box !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
  border-radius: 10px 0 0 10px !important;
  word-break: break-all !important; /* 「北海道・東北」などの長いテキストの自動改行を許可 */
}

/* --- 右側：都道府県ボタンエリア（等倍グリッド化のレイアウト） --- */
.area-row .area-buttons {
  width: 72% !important; /* ラベルの残りの領域をすべて使う */
  display: grid !important; /* ★CSS Gridを導入：これでボタンが確実に格子状に整列します */
  grid-template-columns: repeat(2, 1fr) !important; /* ★最重要：ボタンを常に「綺麗な2列等倍」で横並びにする命令 */
  gap: 8px !important; /* ボタン同士の上下左右の隙間 */
  padding: 12px !important; /* キャプチャに合わせてフチの余白を調整 */
  box-sizing: border-box !important;
  align-content: center !important;
}

/* 各都道府県のボタン（スマホのタップしやすい最適サイズに変形） */
.area-row .btn-pref {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important; /* グリッドの枠いっぱいに広げて左右等倍にする */
  min-width: 0 !important; /* PC用の固定幅100pxを完全に破壊リセット */
  height: 38px !important; /* 指で押しやすく、高すぎない絶妙なサイズ */
  background-color: #ffffff !important;
  color: #1c1612 !important;
  font-weight: bold;
  font-size: 0.9em !important; /* ボタン幅が狭い端末でも文字がはみ出さないサイズ */
  text-decoration: none !important;
  border-radius: 6px !important;
  border: 1px solid rgba(28, 22, 18, 0.15) !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease !important;
}

/* -------------------------------------
  各地域のカラーリング（現状維持 ＋ スマホ調整）
------------------------------------- */
.row-hokkaido .area-label { background-color: #558b85 !important; }
.row-kanto .area-label    { background-color: #5a8a54 !important; }
.row-tokai .area-label    { background-color: #c09d53 !important; }
.row-kansai .area-label   { background-color: #b85a54 !important; }
.row-chugoku .area-label  { background-color: #8f7499 !important; }
.row-kyushu .area-label   { background-color: #5a74a8 !important; }

/* スマホ用の簡易ホバー（タップ時の一瞬のリアクション） */
.area-row .btn-pref:not(.is-disabled):active {
  background-color: #f5f5f5 !important;
}

/* -------------------------------------
  リンク切れのグレーアウト設定（見本画像の質感を100%再現）
------------------------------------- */
.area-row .btn-pref.is-disabled {
  background-color: #e5e5e5 !important; /* キャプチャ通りの上品なグレーマット */
  color: #a6a6a6 !important;            /* 文字色を薄く視認性を下げる */
  border-color: rgba(0, 0, 0, 0.05) !important;
  pointer-events: none !important;       /* タップイベントを完全に遮断 */
  cursor: default !important;
  box-shadow: none !important;
  transform: none !important;
}