@charset "utf-8";
/* -------------------------------------
共通
------------------------------------- */
.headerNote{
	display:none;
}
#shokusapo .pc_none {
display:none;
}
#shokusapo {
/*font-family: 'M PLUS 1 Code', sans-serif;*/
color:#1c1612;
line-height:2em;
font-size:16px;
	background-image:url(/ssi/event/unitimekitchen/img/bg_paper.webp);
}
#shokusapo .inner {
max-width: 1140px;
margin: 0 auto;
}
#shokusapo h2,h3,h4,h5{
	font-family: 'M PLUS 1p', sans-serif !important;
  font-weight: 900 !important; /* ★ここを900に指定するのがポイント */
  letter-spacing: 0.05em;
}
#gFooter{
	margin-top:0!important;
}

/* 見えないセンサー */
#sticky-trigger {
  width: 100%;
  height: 1px; /* ゼロではなく1pxにしてブラウザの交差判定を確実に安定させる */
  visibility: hidden;
  margin-bottom: -1px; /* 1pxの厚みによるデザインのズレを相殺 */
}

/* ★改善：メニューが固定された瞬間の、PC側ガタつきクッション */
#sticky-trigger.is-active {
  /* PC用メニューの実際の厚み（padding込みで約54px）の身代わり（クッション）を敷くことで、
     固定された瞬間にページ全体が上にカクッと浮き上がるのを防ぎ、ブルブル震えるループを完全に殺します */
  height: 54px !important; 
  display: block !important;
}

/* 通常時のメニュー */
.my-sticky-menu {
  width: 100%;
  background-image: url(/ssi/event/unitimekitchen/img/bg_herringbone.webp);
  z-index: 990;
}

/* ★JSで固定された瞬間のスタイル */
.my-sticky-menu.is-fixed {
  position: fixed !important;
  top: 91px !important; /* 既存ヘッダー（91px）のすぐ下に固定 */
  left: 0 !important;
  width: 100% !important;
  z-index: 998 !important;
  display: block !important;
  background-image: url(/ssi/event/unitimekitchen/img/bg_herringbone.webp) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

/* メニューの中身を横並び */
.my-sticky-menu ul {
  display: flex;
  justify-content: center;  /* 中央寄せ（左寄せなら flex-start） */
  list-style: none;
  margin: 0;
  padding: 16px 0;
	color:#fff;
	position:relative;
}
.my-sticky-menu li {
  margin: 0 40px 0 0;
}
.my-sticky-menu li.round_logo{
	width:80px;
	margin:0 80px 0 0;
}
.my-sticky-menu li.round_logo img{
	position:absolute;
	height:8em;
	top:-26px;
	left:50;
	z-index:999!important;
}
.my-sticky-menu li.round_logo_sp,
.my-sticky-menu li.voice_sp{
	display: none !important;
}
.my-sticky-menu a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  transition: color 0.3s;
}
.my-sticky-menu a:hover {
  color: #ffe8b1;
	text-decoration:underline;
}

/* -------------------------------------
動画上の文字フェードイン
------------------------------------- */
/* ★動画と文字を包む一番外側の枠（高さを動画と100%一致させます） */
.video-container {
  position: relative !important;
  width: 100vw !important;  /* ブラウザの横幅100%を強制 */
  height: auto !important;  /* ★ 100vh から auto に変更（動画の高さに自動で合わせる） */
  overflow: hidden !important;
  left: 50% !important;     /* 既存のサイトのデザイン枠から飛び出すための魔法 */
  transform: translateX(-50%) !important; /* 画面の真ん中に強制センタリング */
}

/* ★動画自の設定（現在の指定のままでOKですが、連動の要になります） */
.video-container video {
  width: 100%;
  height: auto; /* 動画の比率を保ったまま縮む */
  object-fit: cover;
  display: block; /* 下部に謎の微小な隙間ができるのを防ぐお守り */
}

/* 動画の上の薄暗い膜（外枠の高さと完全に一致させます） */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 親要素（.video-container）が縮むのと同時に、膜も縮む */
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

/* 文字ボックス全体 */
/* 文字ボックス全体（上下中央の比率を少し安定させます） */
.fade-text-box {
  position: absolute !important;
  top: 50% !important; /* ★ 40% から 50% に戻す（動画が縮んでも常に真ん中に固定される） */
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10 !important;
  width: 90% !important;
  max-width: 850px;
  text-align: center;
  pointer-events: none;
  padding: 40px; /* 上下の無駄なはみ出しを防ぐためpaddingを少しスリムに */
}

/* ★新設：文字の裏側に敷く、フチがぼやけた白い円形背景 */
.blur-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* ★透明度を低く（白を濃く）調整しました */
  /* 中央付近（40%の距離まで）を不透明度90%のしっかりした白にし、そこから外側へ向かって滑らかに消える設定です */
  background: radial-gradient(circle, rgba(255, 255, 255, 0.90) 40%, rgba(255, 255, 255, 0) 75%);
  
  z-index: -1; /* 文字の裏側に回り込ませる */
}

/* 各行のスタイル */
.fade-line {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  color: #1c1612;
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.7;
  margin: 10px 0;
  -webkit-text-stroke: 4px #ffffff; /* 白いフチの太さを指定（4px） */
  paint-order: stroke fill;         /* フチを文字の「後ろ側」に回り込ませて文字を潰さない設定 */
  opacity: 0;
  animation: fadeInUp 1.5s ease forwards;
}

/* 2行目と3行目の間の1行分の空白 */
.line3 {
  margin-top: 45px !important; 
}

/* ★すべて4秒間隔のディレイ設計に修正 */
.line1 {
  animation-delay: 0.5s;  /* 0.5秒後（ページが開いてすぐ） */
}
.line2 {
  animation-delay: 4.5s;  /* 1行目が出てから4秒後 */
}
.line3 {
  animation-delay: 8.5s;  /* 2行目が出てから4秒後 */
}
.line4 {
  animation-delay: 12.5s; /* 3行目が出てから4秒後 */
}

/* 下から上へフワッと上がって定着するアニメーション */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------------------
特徴01 安心・おいしい
------------------------------------- */
#key_features01{
	margin:0 0 6em;
}
#key_features01 h2 {
	display: block;
	height: auto;
	width: 1140px;
	margin: 1em auto;
	padding: 50px 0 40px;
	background-image: url(/ssi/event/unitimekitchen/img/figure_logo_utk.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size:260px;
	text-align:center;
	font-size:200%;
}
#key_features01 h2 span{
	font-size:130%;
	color:#0a6db0;
	background-image:url(/ssi/event/unitimekitchen/img/bg_chalkline_blue.png);
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:100% auto;
	padding-bottom:30px;
}
#key_features01 dl,
#key_features02 dl,
#key_features03 dl{
	width:100%;
}
#key_features03 dl{
	position: relative;
}
#key_features03 dl img.sashie02{
	width:130px;
	height: auto;
	position: absolute;
	bottom: 0;
	left:44%;
	z-index:800;
}
/*SPの時だけ採用したい画像枠*/
#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{
	display: none!important;
}
#key_features01 dl img,
#key_features02 dl img,
#key_features03 dl img{
	width:600px;
}
#key_features01 dt.kf01_left,
#key_features02 dt.kf02_left,
#key_features03 dt.kf03_left
{/*左枠*/
	width:50%;
	float: left;
	text-align:right;
	margin: 0!important;
}
#key_features02 dt.kf02_left{
	position: relative;
}
#key_features02 dt.kf02_left img.sashie01{
	width:200px;
	position: absolute;
	bottom: -70px;
	right:-20px;
	z-index:800;
}
#key_features01 dd.kf01_right,
#key_features02 dd.kf02_right,
#key_features03 dd.kf03_right
{/*右枠*/
	float:right;
	width:50%;
	margin: 0;
}
#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.7em;
	font-weight:700;
  color: #0a6db0;
  padding: 100px 1em 8px;
  margin-bottom: 20px;
  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.7em;
	line-height: 1.7;
	font-weight:700;
  color: #d13e34;
  padding: 70px 1em 8px;
  margin-bottom: 20px;
  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.7em;
	line-height: 1.7;
	font-weight:700;
  color: #c07a08;
  padding: 20px 1em 8px;
  margin-bottom: 20px;
  border-bottom: 2px solid #c07a08;
}
#key_features01 .item-text,
#key_features02 .item-text,
#key_features03 .item-text{
	display: block;
  width: 580px;
  padding: 0 20px;
  font-size: 1.2em;
  color: #1c1612;
  line-height: 1.8;
  text-align: left;
}
#key_features02 .item-text span.akamoji{
	color: #d13e34;
	font-weight: 700;
}
#key_features01 dt.kf01_left .item-text,
#key_features02 dt.kf02_left .item-text{
	text-align: right;
	margin-left: auto;     /* ★【重要】580pxの箱ごと、右側（中央の境界線）へギュッと寄せる */
}
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 6em;
}
#menu .bg_photo{
	width:100%;
	height: 690px;
	background-image:url(/ssi/event/unitimekitchen/img/bg_weekly_mealplan.webp);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#menu .fukidashi01{
	display: block;
	width:330px;
	height: 116px;
	position:absolute;
	top:590px;
	right:38%;
}
#menu p.fukidashi01 img{
	width:100%;
	height: auto;
}
#menu .weekly_mealplan{/*544x871px*/
	width:30%;
	height: auto;
	position: absolute;
	top:120px;
	right:5%;
}
#menu .weekly_mealplan img.wm_sp{
	display: none;
}
#menu p{
	display: block;
	width: 65%;
	margin:2em 0 0;
	padding: 0 20px;
	font-size: 1.3em;
	color: #1c1612;
	line-height: 1.8;
	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 {
  display: block;
  width: 530px;        /* ★上の.item-textと「完全に同じ横幅」の箱にする */
  padding: 0 20px;     /* ★上の.item-textと「完全に同じ左右の余白」を持たせる */
  box-sizing: border-box;
  margin-left: auto;   /* ★【最重要】580pxの箱ごと、中央の境界線（右側）へギュッと寄せる */
  text-align: left;    /* ★箱の中身の文字は「左寄せ」にリセット */
}
.chushaku06 {
  display: block;
  width: 330px;        /* ★上の.item-textと「完全に同じ横幅」の箱にする */
  padding: 0 20px;     /* ★上の.item-textと「完全に同じ左右の余白」を持たせる */
  box-sizing: border-box;
  margin-left: auto;   /* ★【最重要】580pxの箱ごと、中央の境界線（右側）へギュッと寄せる */
  text-align: left;    /* ★箱の中身の文字は「左寄せ」にリセット */
}
.chushaku02 ol,
.chushaku06 ol{
  width: 100%;         /* 箱いっぱいに広げる */
  padding-left: 1.2em; /* ★「1文字分」のインデントをここで正確に確保 */
  margin: 0.5em 0 0 0; /* 無駄な左マージン（20%など）をリセット */
}
.chushaku04 ol{
	margin:1em 0 2em 2em;
}
#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 center;
}

/* -------------------------------------
保護者＆入居者の声
------------------------------------- */
#voice{
	width:100%;
	background-color:#dbb761;
	position: relative;
	margin-bottom: 6em;
}
#voice .figure_meal_l{
	position: absolute;
	top:-2em;
	left: 2%;
	width:25%;
	height: 320px;
}
#voice .figure_meal_r{
	position: absolute;
	top:-2em;
	right: 2%;
	width:25%;
	height: 320px;
}
#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 {
  text-align: center;
  padding: 40px 0 10px;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Segoe UI", sans-serif;
}
/* --- タイトル部分の横並び枠 --- */
.voice-title-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 2.8rem; /* 「の声」の基準サイズ */
  font-weight: bold;
  color: #1c1612;    /* 「の声」の黒文字色 */
  margin: 0;
  line-height: 1.2;
}
/* --- 白い丸文字（保・護・者 / 入・居・者） --- */
.voice-title-row .circle-text {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #fff;
  color: #0a6db0;
  font-size: 2.4rem;
  font-weight: 900;
  margin: 0 2px;
}
/* --- 「＆」の文字 --- */
.voice-title-row .amp {
  color: #0a6db0;
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 10px;
}
/* --- 「の声」の文字 --- */
.voice-title-row .txt-sub {
  font-size: 2.6rem;
  font-weight: 700;
  margin-left: 10px;
}
/* --- 注記（※2025年度〜） --- */
.voice-note {
  font-weight: 700;
  color: #1c1612;
  margin: 12px 0 0 0;
  letter-spacing: 0.05em;
}
.voice_figure {
  width: 100%;            /* ★横幅いっぱいに広げる */
  max-width: 1431px;      /* ★最大サイズは元の大きさに制限 */
  height: auto;           /* ★高さ固定をやめる */
  aspect-ratio: 1431 / 600; /* ★重要：1431x600の「比率」をガッチリ保って伸縮させる */
  position: relative;
  margin: 0 auto;
  background-image: url(/ssi/event/unitimekitchen/img/bg_review.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; /* ★coverからcontainに変更（画像が絶対に見切れない設定） */
}
/* 3つのテキスト共通設定 */
.voice_figure p {
  position: absolute;
  line-height: 1.8;
  margin: 0;
  display: block;
  font-weight: bold;
  color: #1c1612;
  /* ★文字サイズをブラウザ幅連動（vw）にする（1431pxの時に約21px(1.3em)になる計算） */
  font-size: 1.48vw; 
}
/* 最大幅（1431px）を超えたら、文字が大きくなりすぎないようにストッパーをかける */
@media (min-width: 1432px) {
  .voice_figure p {
    font-size: 1.3em; 
  }
}
/* ★各テキストの位置と横幅を、1431pxに対する「%」に変換して完全連動 */
.voice_figure p.voice01 {
  top: 23.3%;   /* 140px / 600px */
  left: 8.4%;   /* 120px / 1431px */
  width: 30%;   /* 430px / 1431px */
}
.voice_figure p.voice02 {
  top: 18.3%;   /* 110px / 600px */
  left: 51.7%;  /* 740px / 1431px */
  width: 19.5%; /* 280px / 1431px */
}
.voice_figure p.voice03 {
  top: 31.6%;   /* 190px / 600px */
  left: 79.6%;  /* 1140px / 1431px */
  width: 16.8%; /* 240px / 1431px */
}
.voice_figure img.voice01_icon,
.voice_figure img.voice02_icon,
.voice_figure img.voice03_icon{
	display: none!important;
}

/* -------------------------------------
特徴02 嬉しい！楽しい！
------------------------------------- */
#key_features02{
	margin:0 0 6em;
}
#key_features02 h3 {
	display: block;
	height: auto;
	width: 1140px;
	margin: 0 auto 1em;
	padding: 50px 0 40px;
	background-image: url(/ssi/event/unitimekitchen/img/figure_logo_utk.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size:260px;
	text-align:center;
	font-size:200%;
}
#key_features02 h3 span{
	font-size:130%;
	color:#d13e34;
	background-image:url(/ssi/event/unitimekitchen/img/bg_chalkline_red.png);
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:100% auto;
	padding-bottom:30px;
}

/* -------------------------------------
特徴03 学生生活の質が向上！
------------------------------------- */
#key_features03{
	margin:0 0 6em;
}
#key_features03 h4 {
	display: block;
	height: auto;
	width: 1140px;
	margin: 0 auto 1em;
	padding: 50px 0 40px;
	background-image: url(/ssi/event/unitimekitchen/img/figure_logo_utk.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size:260px;
	text-align:center;
	font-size:200%;
}
#key_features03 h4 span{
	font-size:130%;
	color:#c07a08;
	background-image:url(/ssi/event/unitimekitchen/img/bg_chalkline_yellow.png);
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:100% auto;
	padding-bottom:42px;
}

/* -------------------------------------
ギャラリースライド
------------------------------------- */
#gallery {
  width: 100%;
  height: 800px;
  padding: 0;
	margin-bottom: 6em;
  background-image: url(/ssi/event/unitimekitchen/img/bg_slider.webp);
	position:relative;
}
#gallery p.shoukai{
	color:#fff;
	width:100%;
	margin:0 auto;
	text-align:center;
	position:absolute;
	top:200px;
	left:auto;
}
#gallery p.chushaku05{
	display: none;
}
#gallery img.kirakira01{
	width:160px;
	height: auto;
	position: absolute;
	bottom:6px;
	right:7%;
}
#gallery img.kirakira02{
	width:140px;
	height: auto;
	position: absolute;
	top:15%;
	left:3%;
}
#gallery .g_tit {
  display: block;
  height: 100px;
  width: 100%; 
  max-width: 100%;
  /* ★ 修正：左右のマージンを「auto」にして、文字も背景画像も強制的にど真ん中に寄せる */
  margin: 30px auto 0;
  padding: 150px 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: contain; 
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: 1.7em;
  font-weight: 700;
  color: #fff;
}

/* -------------------------------------
ギャラリースライド全体枠（1140pxの枠内に収める）
------------------------------------- */
.slider-container {
  width: 100% !important;
  max-width: 1140px !important;
  margin: 10px auto 0;
  padding: 0;                 /* スライダー自体の幅を1140pxいっぱいにするため0に */
  box-sizing: border-box;
  position: relative;
}

/* Swiper本体のコンテナ（高さを固定し、ドットエリアを下に確保） */
.main-slider {
  width: 100%;
  height: 480px !important;   /* 写真の高さ420px ＋ 下のドット用余白 */
  overflow: hidden;
  position: relative;
}

/* スライド1枚ずつの箱（★ Swiperの仕様に合わせて最適化） */
.main-slider .gallery-item {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 20px !important; /* 綺麗な角丸四角形を100%保証 */
  height: 420px !important;       /* 高さを420pxに統一 */
  box-sizing: border-box !important;
  
  /* ★追加：ホバー時に金色の枠線を内側につけるための下準備 */
  border: 1px solid transparent !important; 
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* 写真自体の高さ・幅指定 */
.main-slider .gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 20px !important;
  
  /* ★追加：写真がズームするときのなめらかなアニメーション用 */
  transition: transform 0.4s ease, filter 0.4s ease !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.75) 0%, rgba(0, 0, 0, 0) 40%) !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 25px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  z-index: 5 !important;
  cursor: pointer !important; /* ★追加：どこを触っても確実に指マーク（ポインター）にする */
}

.gallery-item .property-name {
  color: #ffffff !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  letter-spacing: 0.05em !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
  position: relative !important;
  padding-left: 18px !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}

.gallery-item .property-name::before {
  content: "▶" !important;
  font-size: 0.8rem !important;
  color: #dbb761 !important;
  position: absolute !important;
  left: 0 !important;
  top: 52% !important;
  transform: translateY(-50%) !important;
}

/* -------------------------------------
  ★追加：モーダル最上部の物件名タイトル
------------------------------------- */
.g-modal-title {
  width: 100%;
  padding: 5px 40px 15px; /* 右上の「×」ボタンと被らないよう左右に余白を確保 */
  box-sizing: border-box;
  color: #1c1612;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
}


/* ========================================================
  ★ 新設：マウスを乗せた（ホバー時）のクリック誘導リッチエフェクト
======================================================== */

/* 1. 【ご要望】スライド全体に1pxの金色の枠線をつけ、ふんわり浮かび上がらせる */
.main-slider .gallery-item:hover {
  border-color: #dbb761 !important; /* 特設サイトカラーの金色（黄土色）の枠線 */
  box-shadow: 0 10px 25px rgba(220, 183, 97, 0.25) !important; /* 金色のうっすらとした高級感ある影 */
}

/* 2. 写真を奥へスッと少しだけズームさせ、明るくして視認性を高める */
.main-slider .gallery-item:hover img {
  transform: scale(1.03); /* 3%だけ奥から手前にズーム */
  filter: brightness(1.1); /* 少しだけ明るくライトアップして「選ばれてる感」を出す */
}

/* 3. 物件名を少し右へ動かす（既存の演出も綺麗に残します） */
.gallery-item:hover .property-name {
  transform: translateX(5px) !important;
}

/* -------------------------------------
  ★競合を完全無効化：左右の矢印カスタム（Swiper版）
------------------------------------- */
/* Swiper標準の太い矢印フォントを完全に消滅させます */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none !important;
}
.swiper-button-next,.swiper-container-rtl .swiper-button-prev {
	background-image:none!important;}
.swiper-button-prev,.swiper-container-rtl .swiper-button-next {
	background-image:none!important;}

.swiper-button-prev,
.swiper-button-next {
  width: 46px !important;
  height: 46px !important;
  background-color: rgba(0, 0, 0, 0.4) !important; /* 写真の上に置くため、半透明の黒座布団を敷きます */
  border-radius: 50% !important;
  color: #ffffff !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
  top: 210px !important; /* 写真の縦の中央（420pxの半分）に正確に配置 */
}

/* ホバーした時にUniLifeのゴールド（黄土色）に優しく光らせる演出 */
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: rgba(220, 183, 97, 0.9) !important;
}

/* 競合しない、自前のシンプルな細型矢印（〈 〉）を中央に設置 */
.swiper-button-prev::before {
  content: "〈" !important;
  font-size: 18px !important;
  font-weight: bold !important;
  position: absolute; left: 45%; top: 46%; transform: translate(-50%, -50%);
}
.swiper-button-next::before {
  content: "〉" !important;
  font-size: 18px !important;
  font-weight: bold !important;
  position: absolute; left: 55%; top: 46%; transform: translate(-50%, -50%);
}

/* 矢印の左右の配置位置（コンテナの端から少し内側に浮かせます） */
.swiper-button-prev { left: 15px !important; }
.swiper-button-next { right: 15px !important; }


/* -------------------------------------
  ★競合を完全無効化：下のドットナビカスタム（Swiper版）
------------------------------------- */
/* ドットの親要素の位置調整（写真の下、ちょうどいい高さに配置） */
.swiper-pagination {
  bottom: 10px !important;
  line-height: 1 !important;
}

/* ドット単体のリセット＆成形（10pxのきれいな正円） */
.swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  background: #ffffff !important;
  opacity: 0.35 !important;
  margin: 0 6px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  cursor: pointer !important;
  transition: opacity 0.3s ease, background-color 0.3s ease !important;
}

/* 【選択中（アクティブ）】のドットだけ、黄土色にして100%点灯 */
.swiper-pagination-bullet-active {
  background: #dbb761 !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet:hover {
  opacity: 0.7 !important;
}

/* -------------------------------------
  Slick公式のデザインカスタム（ドット・矢印リセット上書き）
------------------------------------- */

/* 1. slick-theme.css が勝手に出してくる巨大な丸（疑似要素）を完全に消滅させる */
#gallery .slick-dots li button::before {
  display: none !important;
  content: "" !important;
}
.slick-dots
{	bottom: -50px!important;}
.slick-dots li button{
	width: 10px!important;
    height: 10px!important;
    padding: 5px!important;
}

/* -------------------------------------
  詳細ギャラリーモーダル（修正版：右側縦サムネイル・省スペース版）
------------------------------------- */
.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: 95%;
  max-width: 1060px;
  background-color: #fff;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* ★重要：大画像とサムネイルを横並びにするラッパー
  高さを「メイン画像の16:9比率の予測値（約560px）」でがっちり固定し、
  縦Swiperが計算崩壊を起こさないようにロックします。
*/
.g-modal-flex-wrapper {
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 560px !important; /* ★高さを固定して真っ白バグを回避 */
}

/* --- 左側：メイン画像エリア --- */
.g-modal-main-swiper {
  width: 84% !important;
  height: 100% !important;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.g-modal-main-img {
  width: 100%;
  height: 100% !important;
  overflow: hidden;
  background-color: #000;
  position: relative;
}
.g-modal-main-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 物件名（完成年月）を画像の上部に重ねて配置 */
.g-modal-title {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  padding: 18px 40px 30px !important;
  box-sizing: border-box !important;
  color: #ffffff !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%) !important;
  font-size: 1.25rem !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;
  z-index: 20 !important;
}

/* キャプションを画像の下部に重ねて配置 */
.g-modal-caption {
  position: absolute !important;
  left: 0 !important; bottom: 0 !important;
  width: 100% !important;
  padding: 18px 20px !important;
  box-sizing: border-box !important;
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.65) !important;
  font-size: 0.8em !important;
  font-weight: bold !important;
  text-align: center !important;
  line-height: 1.4 !important;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  z-index: 20 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* --- 右側：サムネイルエリア（縦スクロール） --- */
.g-modal-thumb-swiper {
  width: 14% !important;
  height: 100% !important; /* 親要素の560pxいっぱいに使う */
  overflow: hidden;
  position: relative;
}

.g-modal-thumb-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
  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;
}

/* アクティブなサムネイルのゴールドフチ */
.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;            
  box-shadow: 0 4px 10px rgba(220, 183, 97, 0.3);
}

.g-modal-thumb-img:hover {
  opacity: 0.9 !important;
}

/* モーダル内専用の左右矢印デザイン */
.g-modal-prev, .g-modal-next {
  width: 40px !important; height: 40px !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;
}
.g-modal-prev::before, .g-modal-next::before {
  font-size: 14px !important;
}
.g-modal-prev { left: 15px !important; }
.g-modal-next { right: 15px !important; }

/* 閉じる（×）ボタン */
.g-modal-close {
  position: absolute;
  top: -45px; right: 0;
  color: #fff; font-size: 36px;
  cursor: pointer; transition: transform 0.2s;
  z-index: 100;
}
.g-modal-close:hover { transform: scale(1.15); }

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

/* -------------------------------------
特徴04 その他特徴
------------------------------------- */
#key_features04{
	margin:0 0 6em;
}
#key_features04 h5 {
	display: block;
	height: auto;
	width: 1140px;
	margin: 0 auto 1em;
	padding: 120px 0 40px;
	background-image: url(/ssi/event/unitimekitchen/img/figure_andmore_green.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size:160px;
	text-align:center;
	font-size:200%;
	line-height:1.5em;
}
#key_features04 h5 span{
	font-size:130%;
	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:26px;
}
#key_features04 ul{
	width:100%;
}
#key_features04 li{
	display: block;
	float: left;
	width:31%;
	margin: 0 1% 0;
	padding: 0;
}
#key_features04 li img{
	width:100%;
	height: auto;
	margin: 0.5em 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;
}
#key_features04 li p.kf04_tit span{
	font-size:140%;
}
#key_features04 li p{
	margin:1em;
}
#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: 1140px;
	margin:0 auto 6em;
	padding: 0;
	border-radius:30px;
	background-image: url(/ssi/event/unitimekitchen/img/bg_herringbone.webp);
	background-size:100% 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:802px auto;
}
.m_container p.chushaku03{
	display:block;
	color: #fff;
	font-size:80%;
	width:1040px;
	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:194px;
	font-size:1.8em;
	line-height:1.8em;
	padding:70px 0 0;
}
.m_tit span{
	font-size:130%;
	letter-spacing: 0;
}
/* -------------------------------------
  動画
------------------------------------- */
/* --- 動画を横に2つ並べる枠 --- */
.video-double-grid {
	width:1060px;
	margin:0 auto;
	padding-bottom:2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 動画1つずつの外枠 */
.youtube-trigger {
  width: 48.5%;
  background-color: #fff;
  padding: 8px;
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  cursor: pointer;
	border-radius:20px;
}
/* 16:9を維持する箱 */
.video-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* 動画の黄金比 */
  overflow: hidden;
  background-color: #fff; /* 読み込み一瞬の黒背景 */
}
/* サムネイル画像 */
.video-poster img {
	border-radius:16px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.3s ease;
}
/* マウスを乗せたときにちょっと画像をズームさせて「押せる感」を出す */
.youtube-trigger:hover .video-poster img {
  transform: scale(1.04);
  filter: brightness(0.85); /* ちょっと暗くして再生ボタンを引き立てる */
}
/* --- YouTube風再生ボタン（CSSで作る美しい正円と三角） --- */
.video-poster .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background-color: #f00; /* YouTubeの赤 */
  border-radius: 12px;
  transition: background-color 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
/* 三角アイコン */
.video-poster .play-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%; /* 三角の重心に合わせて少し右寄りに */
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #ffffff; /* 白い三角 */
}
/* ホバーでちょっとボタンを大きく、明るくする */
.youtube-trigger:hover .play-btn {
  background-color: #cc0000;
  transform: translate(-50%, -50%) scale(1.1);
}
/* --- JSで書き換わったあとの本物の動画（iframe）の設定 --- */
.youtube-trigger iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
	border-radius:16px;
}
/* -------------------------------------
  PC限定：動画ポップアップ（モーダル）
------------------------------------- */
/* ポップアップ全体（初期状態は非表示） */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999; /* メニューなどの全てを突き抜けて最前面に出す */
  display: none;
}

/* JSで「.is-open」がついたらふわっと表示 */
.video-modal.is-open {
  display: block;
  animation: modalFadeIn 0.3s ease forwards;
}

/* 背景の黒い半透明の膜 */
.video-modal-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 映画館のように周囲を暗く */
}

/* ★動画を包む白いフチ付きの箱（ご希望の1000pxサイズ） */
.video-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;           /* ★ 横幅を1000pxに固定 */
  aspect-ratio: 16 / 9;    /* ★ 16:9の黄金比を維持（自動で高さ562.5pxになります） */
  background-color: #fff;  /* 見本動画セクションと合わせた白いフチ */
  padding: 10px;           /* 白いフチの太さ */
  box-sizing: border-box;
  border-radius: 20px;     /* サムネイルと同じ角丸 */
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* ポップアップ内の動画本体 */
.video-modal-content iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  border-radius: 12px;     /* 内側の動画の角も少し丸く */
}

/* 右上の「×」閉じるボタン */
.video-modal-close {
  position: absolute;
  top: -50px;             /* 動画の少し右上に配置 */
  right: -10px;
  color: #ffffff;
  font-size: 40px;
  font-weight: normal;
  cursor: pointer;
  transition: transform 0.2s;
  line-height: 1;
}
.video-modal-close:hover {
  transform: scale(1.2);  /* ホバーで少し大きく */
}

/* ポップアップがひらく時のフワッとしたアニメーション */
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* -------------------------------------
  テキスト検索
------------------------------------- */
#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: 800px!important;
    margin:0 auto!important;
}
.autocomplete #search-school-submit,.autocomplete input[type=submit] {
    background-color: #0a6db0!important;
}
.comSideSearch .button {
	margin: 1em auto!important;}

/* -------------------------------------
  エリア別検索
------------------------------------- */
#area-search {
  width: 100%;
  padding: 60px 0 100px;
  box-sizing: border-box;
}

/* 1140pxのインナーコンテナ */
#area-search .area-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* タイトル装飾 */
.area-section-title {
  text-align: center;
  margin-bottom: 40px;
}
.area-section-title p {
  font-family: 'M PLUS 1p', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  font-size: 1.6em;
  color: #1c1612;
  line-height: 1.4;
	padding-bottom:1em;
	background-image: url(/ssi/event/unitimekitchen/img/bg_midashi_areasearch.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 14em auto;
}
.area-section-title p span {
  font-size: 1.1rem;
  background-color: #1c1612;
  color: #fff;
  padding: 4px 15px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 8px;
}

/* エリア全体のグリッド */
.area-grid-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* 各地域ごとの「1行」の枠組み */
.area-row {
  display: flex;
  align-items: stretch;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(28, 22, 18, 0.03);
}

/* --- 左側：地域名ラベル（★font-size: 1.1em に変更） --- */
.area-row .area-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  min-width: 180px;
  font-weight: bold;
  color: #ffffff;
  font-size: 1.1em; /* ★ ご指定の1.1emに変更 */
  text-align: center;
  padding: 15px;
  box-sizing: border-box;
  letter-spacing: 0.05em;
  border-radius: 12px 0 0 12px;
}

/* --- 右側：都道府県ボタンエリア --- */
.area-row .area-buttons {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 10px;
  padding: 15px 25px;
  box-sizing: border-box;
  width: 100%;
}

/* 各都道府県のボタン（★font-size: 1em に変更） */
.area-row .btn-pref {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 40px;
  background-color: #ffffff;
  color: #1c1612; /* ご指定のベース文字色 */
  font-weight: bold;
  font-size: 1em; /* ★ ご指定の1emに変更 */
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid rgba(28, 22, 18, 0.12);
  box-sizing: border-box;
  transition: all 0.25s ease;
}

/* -------------------------------------
  各地域の「上品なくすみカラー」設定
------------------------------------- */
/* 北海道・東北：くすみ青緑 */
.row-hokkaido .area-label { background-color: #558b85; }
.row-hokkaido .btn-pref:not(.is-disabled):hover { border-color: #558b85; color: #558b85; background-color: #f4f8f7; }

/* 関東：くすみ緑 */
.row-kanto .area-label { background-color: #5a8a54; }
.row-kanto .btn-pref:not(.is-disabled):hover { border-color: #5a8a54; color: #5a8a54; background-color: #f4f8f3; }

/* 東海・北信越：くすみマスタード */
.row-tokai .area-label { background-color: #c09d53; }
.row-tokai .btn-pref:not(.is-disabled):hover { border-color: #c09d53; color: #c09d53; background-color: #faf7f1; }

/* 関西：くすみローズ */
.row-kansai .area-label { background-color: #b85a54; }
.row-kansai .btn-pref:not(.is-disabled):hover { border-color: #b85a54; color: #b85a54; background-color: #faf3f3; }

/* 中国・四国：くすみパープル */
.row-chugoku .area-label { background-color: #8f7499; }
.row-chugoku .btn-pref:not(.is-disabled):hover { border-color: #8f7499; color: #8f7499; background-color: #f7f4f8; }

/* 九州・沖縄：くすみブルー */
.row-kyushu .area-label { background-color: #5a74a8; }
.row-kyushu .btn-pref:not(.is-disabled):hover { border-color: #5a74a8; color: #5a74a8; background-color: #f3f5fa; }

/* 通常ボタンの共通ホバー効果 */
.area-row .btn-pref:not(.is-disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(28, 22, 18, 0.08);
}

/* -------------------------------------
  ★ 追加：リンク切れのグレーアウト設定
------------------------------------- */
.area-row .btn-pref.is-disabled {
  background-color: #e5e5e5 !important; /* 見本画像に近い、リンク切れ用グレー */
  color: #9d9d9d !important;            /* 文字色を薄くぼやけさせる */
  border-color: rgba(0, 0, 0, 0.06) !important; /* 線の主張をなくす */
  pointer-events: none;                 /* マウスのクリック・反応を完全に無効化 */
  cursor: default !important;
  transform: none !important;            /* ホバー時の浮き上がりを阻止 */
  box-shadow: none !important;
}