/* =========================================================
   ゆめの関連ページ 共通CSS
========================================================= */


/* =========================================================
   01. 共通パーツ / Utility
========================================================= */
/* -------------------------------------
	上下余白削除
------------------------------------- */
.l-contents__inner{
	padding-top: 0!important;
	padding-bottom: 0!important;
}

/* -------------------------------------
	共通：セクションタイトル装飾（アイコン）
------------------------------------- */

/* --- 共通セット（上アイコン配置） --- */
#yumeno-aboutus .smb-section__title,
#yumeno-news .smb-section__title,
#yumeno-access .smb-section__title {
	position: relative;
	text-align: center;
}

/* アイコン共通仕様 */
#yumeno-aboutus .smb-section__title::before,
#yumeno-news .smb-section__title::before,
#yumeno-access .smb-section__title::before {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto 12px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* --- 各セクションのアイコン --- */
#yumeno-aboutus .smb-section__title::before {
	background-image: url(http://hibari21.com/hibari21_wp/wp-content/uploads/2025/12/yumeno_aboutus_icon.svg);
}

#yumeno-news .smb-section__title::before {
	background-image: url(http://hibari21.com/hibari21_wp/wp-content/uploads/2025/12/yumeno_news_icon.svg);
}

#yumeno-access .smb-section__title::before {
	background-image: url(http://hibari21.com/hibari21_wp/wp-content/uploads/2025/12/yumeno_access_icon.svg);
}


/* -------------------------------------
   共通：セクションタイトルと英語サブタイトルの間
------------------------------------- */
.smb-section__lede-wrapper{
	margin-top: 8px!important;
}


/* -------------------------------------
   共通：セクションタイトル装飾（オレンジの吹き出し線）
------------------------------------- */
/* セクションタイトル下に画像ライン */
.fukidashi-orange .smb-section__title {
  position: relative;
  text-align: center;
}

.fukidashi-orange .smb-section__title > span {
  position: relative;
  display: inline-block;
}

.fukidashi-orange .smb-section__title > span::after {
  content: "";
  display: block;
  width: 260px;
  height: 16px;
  margin: 16px auto 0;
  background: url("http://hibari21.com/hibari21_wp/wp-content/uploads/2026/01/fukidashi_line_03.png")
    no-repeat center / contain;
}




/* -------------------------------------
   共通：オレンジのアンダーライン
------------------------------------- */
.underline-orange {
  position: relative;
  font-weight: 600;
  padding-bottom: 10px;   /* 文字と線の間隔 */
  text-align: left;
}

.underline-orange::after {
  content: "";
  display: block;
  width: 880px;          /* ★線の長さ */
  max-width: 100%;       /* 画面が狭い時の保険 */
  height: 1px;
  background: #d87023;
}



/* -------------------------------------
   共通：リンク部分をオレンジ色へ
------------------------------------- */
a:where(:not(.wp-element-button)) {
	color: #d87023;
}



/* =====================================
   共通：お問い合わせセクション
===================================== */
#yumeno-contact .smb-section__title {
    padding-top: 120px;
}

#yumeno-contact {
	color: #fff;
	background-image: url(http://hibari21.com/hibari21_wp/wp-content/uploads/2026/01/yumeno_contact_bg_1920px.png);
	background-repeat: no-repeat;
	background-size: cover;
}

/* スマホ表示 */
@media screen and (max-width: 767px) {	
	#yumeno-contact {
		background-image: url(http://hibari21.com/hibari21_wp/wp-content/uploads/2026/01/yumeno_contact_bg_sp.png);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
	}
}



#yumeno-contact .wp-block-social-links .wp-block-social-link{
	color:#FFF!important;
	
}

/* お問い合わせセクションの背景色 */
.contact-bg-color{
	background-color: #fffdec!important;
}

/* 電話番号とメールアドレスフォントサイズ調整 */
@media (max-width: 767px) {
	#yumeno-contact h3 .sme-font-size {
		font-size: 24px !important;
	}
}

/* -------------------------------------
   共通：お問い合わせ 見出し横装飾
------------------------------------- */
#yumeno-contact .smb-section__title > span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	width: 100%;
}

#yumeno-contact .smb-section__title > span::before,
#yumeno-contact .smb-section__title > span::after {
	content: "";
	flex: 1;
	max-width: 100%;
	min-width: 80px;
	height: 10px;
	background: url(http://hibari21.com/hibari21_wp/wp-content/uploads/2026/01/contact_deco_white.svg)
		repeat-x center / auto 100%;
}

/*見出し横装飾 スマホ対応*/
@media (max-width: 767px) {

	/* 横並び解除 */
	#yumeno-contact .smb-section__title > span {
		display: block;
	}

	/* before は非表示 */
	#yumeno-contact .smb-section__title > span::before {
		display: none;
	}

	/* after を見出し下装飾として使用 */
	#yumeno-contact .smb-section__title > span::after {
		display: block;
		content: "";
		width: 80%;
		height: 8px;
		margin: 12px auto 0;
		background: url(http://hibari21.com/hibari21_wp/wp-content/uploads/2026/01/contact_deco_white.svg)
			repeat-x center / auto 100%;
	}
}







/* =========================================================
   02. ゆめの メインページ
========================================================= */

/* =====================================
   02-1 キービジュアルセクション
===================================== */
#yumeno-kv{
  position: relative;
}


/* 日本語タイトル */
#yumeno-kv::before{
	content: "体験交流センター ゆめの";
	position: absolute;
	top: 46%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 48px;
	font-weight: 700;
	letter-spacing: .18em;
	white-space: nowrap;
	width: 100%;
	max-width: 100%;
	text-align: center;
	text-shadow: 0 0px 18px rgba(51,51,51,.45);
}


/* 英語タイトル */
#yumeno-kv::after{
	content: "Yumeno Experience Exchange Center";
	position: absolute;
	top: 57%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: bold;
	letter-spacing: .18em;
	white-space: nowrap;
	width: 100%;
	max-width: 100%;
	color: #fff;
	font-size: 18px;
	text-align: center;
	text-shadow: 0 5px 15px rgba(0,0,0,.45);
}

@media (max-width: 767px) {
	#yumeno-kv::before{
		top: 38%;
		font-size: 24px;
		letter-spacing: .1em;
	}
	#yumeno-kv::after{
		font-size: 14px;
		letter-spacing: .1em;
	}
}



/* =====================================
   02-2 コンセプトセクション
===================================== */

/* -------------------------------------
   写真２枚のレイアウト設定
------------------------------------- */
.concept-img {
  display: grid;
  gap: 28px;
  justify-items: end;
}

/* ---上の画像（大きめ・右にズラす）--- */
.concept-img .wp-block-image:nth-child(1) {
  max-width: 375px !important;
  width: 375px !important;
  transform: translateX(100px);
}

/* ---コンセプト画像：下の画像（小さめ・左にズラす）--- */
.concept-img .wp-block-image:nth-child(2) {
  max-width: 285px !important;
  width: 285px !important;
  transform: translateX(-80px);
}

/* ---歪まない設定--- */
.concept-img img {
  width: 100% !important;
  height: auto !important;
}

/* スマホ表示 */
@media screen and (max-width: 767px) {
	#yumeno-concept .wp-block-image img {
		max-width: 80%!important;
	}
	/* ---上の画像（大きめ・右にズラす）--- */
	.concept-img .wp-block-image:nth-child(1) {
		transform: translateX(65px)!important;
	}
	
	/* ---コンセプト画像：下の画像（小さめ・左にズラす）--- */
	.concept-img .wp-block-image:nth-child(2) {
		transform: translateX(-75px)!important;
	}
}

/* タブレット表示 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	#yumeno-concept .wp-block-image img {
		max-width: 100%;
	}
	/* ---上の画像（大きめ・右にズラす）--- */
	.concept-img .wp-block-image:nth-child(1) {
		transform: translateX(100px)!important;
	}
	
	/* ---コンセプト画像：下の画像（小さめ・左にズラす）--- */
	.concept-img .wp-block-image:nth-child(2) {
		transform: translateX(-120px)!important;
	}
}




/* =====================================
   02-3 体験・施設紹介セクション
===================================== */
/* -------------------------------------
   背景画像
------------------------------------- */
@media screen and (min-width: 768px) {
	#yumeno-aboutus{
		background-image: url(http://hibari21.com/hibari21_wp/wp-content/uploads/2026/01/yumeno_aboutus_bg_1920px-scaled.webp);
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	#yumeno-aboutus .smb-section__dividers,
	#yumeno-aboutus .smb-section__fixed-background{
		display: none!important;
	}
	
	#yumeno-aboutus .smb-section__title{
	padding-top: 80px;
	}
}



/* -------------------------------------
   イラストの位置調整
------------------------------------- */
#yumeno-aboutus{
    position: relative; /* 基準 */
}

#yumeno-aboutus .yumeno_illustration_01{
    position: absolute;
    top: -40px;
	left: 160px;
    z-index: 1;
    pointer-events: none;
}

#yumeno-aboutus .yumeno_illustration_02{
    position: absolute;
    top: 30px;
    right: 200px;
    z-index: 1;
    pointer-events: none;
}

/* スマホ表示 */
@media screen and (max-width: 767px) {
	#yumeno-aboutus .yumeno_illustration_01{
		top: -70px;
        right: 20px;
		left: unset;
	}
	
	#yumeno-aboutus .yumeno_illustration_01 img{
		width: 130px!important;
	}
	
	#yumeno-aboutus .yumeno_illustration_02{
		bottom: -70px;
        right: 0px;
        left: 40px;
		top: unset;
	}
	
	#yumeno-aboutus .yumeno_illustration_02 img{
		width: 70px!important;
	}
}

/* タブレットはイラスト非表示 */
@media (min-width: 768px) and (max-width: 1024px) {
	.yumeno_illustration_01,
	.yumeno_illustration_02{
		display: none;
	}
}


/* -------------------------------------
   見出しの背景画像（体験・お食事・学び交流）
------------------------------------- */
/*背景付きセクション対策（Snow Monkey）※ これが無いと背景レイヤーが前に来て消えます*/
.smb-section-with-bgimage__bgimage{
  z-index: 0 !important;
}

/* 共通設定（親を基準にする） */
.taiken-panel,
.shokuji-panel,
.manabi-panel{
  position: relative;
  overflow: visible;
  z-index: 5; /* ← 背景より前に固定 */
}


/* バブル画像 */
/*体験*/
.taiken-panel::before{
	content:"";
	position:absolute;
	top: -140px;
	right: -50px;
    width: 240px;
    height: 260px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	z-index:4;
	pointer-events:none;
	background-image:url("http://hibari21.com/hibari21_wp/wp-content/uploads/2026/01/yumeno_blob_taiken.svg");
}


/*お食事*/
.shokuji-panel::before{
  content:"";
  position:absolute;
  top:-140px;
  left:400px;
  width:240px;
  height:260px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  z-index:4;
  pointer-events:none;
  background-image:url("http://hibari21.com/hibari21_wp/wp-content/uploads/2026/01/yumeno_blob_shokuji.svg");
}


/*学び・交流*/
.manabi-panel::before{
	content:"";
	position:absolute;
	top:-140px;
	right:-50px;
	width:240px;
	height:260px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	z-index:4;
	pointer-events:none;
	background-image:url("http://hibari21.com/hibari21_wp/wp-content/uploads/2026/01/yumeno_blob_manabi.svg");
}

/* バブル画像スマホとタブレット非表示 */
@media screen and (max-width: 1024px) {
  .taiken-panel::before,
  .shokuji-panel::before,
  .manabi-panel::before {
    display: none;
  }
}


/* -------------------------------------
   ループスライダー
------------------------------------- */
/* --- フルブリード & 表示枠 --- */
#yumeno-aboutus .wavy-slider-section {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 120px 0 160px;
	position: relative;

	/* transformで動かす */
	overflow: hidden;
}

/* --- トラック --- */
#yumeno-aboutus .wavy-slider-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 32px;
	padding: 0 24px;
	width: max-content;
	will-change: transform; /* ★追加 */
}

/* --- 各画像 --- */
#yumeno-aboutus .wavy-slider-track figure {
	width: 360px;
	flex-shrink: 0;
}

#yumeno-aboutus .wavy-slider-track img {
	width: 100%;
	display: block;
	box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* --- 波揺れ配置（4枚ループ） --- */
#yumeno-aboutus .wavy-slider-track figure:nth-child(4n+1) { margin-top: 32px; }
#yumeno-aboutus .wavy-slider-track figure:nth-child(4n+2) { margin-top: 0; }
#yumeno-aboutus .wavy-slider-track figure:nth-child(4n+3) { margin-top: 48px; }
#yumeno-aboutus .wavy-slider-track figure:nth-child(4n+4) { margin-top: 16px; }

/* --- スマホ対応 --- */
@media (max-width: 767px) {

	#yumeno-aboutus .wavy-slider-section {
		padding: 80px 0;
	}

	#yumeno-aboutus .wavy-slider-track {
		gap: 16px;
	}

	#yumeno-aboutus .wavy-slider-track figure {
		width: 80vw;
		margin-top: 0 !important;
	}

	/* スマホ用：互い違い */
	#yumeno-aboutus .wavy-slider-track figure:nth-child(even) {
		margin-top: 24px !important;
	}
}




/* =========================================================
   02. 体験交流メニュー ページ
========================================================= */

/* -------------------------------------
   バブル画像・予約制アイコン
------------------------------------- */
.yumeno-bubble-01{
	position: relative;
	top: 80px;
	right: 0px;
	z-index: 10;
}

.yumeno-bubble-02{
	position: relative;
    top: -40px;
	right: 80px;
	z-index: 10;
	margin-bottom: -120px!important; /* ← 上に動かした分の余白を打ち消す */
}

@media screen and (min-width: 768px) {
	.yumeno-bubble-01-sp{
	display: none;
	}
}


/* --- スマホ対応 --- */
@media (max-width: 767px) {
	.yumeno-bubble-01{
		position: relative;
		top: 80px;
		right: -10px;
		z-index: 10;
	}
	
	.yumeno-bubble-01 img{
		width: 160px!important;
	}
	
	.yumeno_yoyaku_icon{
		position: relative;
        top: -30px;
        right: 0px;
        z-index: 10;
        margin-bottom: -30px!important;
	}
	
	.yumeno-bubble-02{
		position: relative;
		top: -90px;
		right: 20px;
		z-index: 10;
		margin-bottom: -160px !important;
	}
	
	.yumeno-bubble-02 img{
		width: 100px!important;
	}

}


/* -------------------------------------
   ボタンの幅調整
------------------------------------- */
#yumeno-book .btn-large .smb-btn {
	padding-top: 24px;
	padding-bottom: 24px;
}



/* =========================================================
   03. ダイニングゆめの ページ
========================================================= */

/* -------------------------------------
   メニュー表デザイン（オレンジ下線のみ）
------------------------------------- */

/* table自体 */
figure.wp-block-table.menu-table table {
	border-collapse: collapse;
	width: 880px;
	border: none;
	font-weight: 600;
}

/* 行ごとの下線 */
figure.wp-block-table.menu-table tbody tr {
	border-bottom: 1px solid #f28c28;
}

/* セル共通 */
figure.wp-block-table.menu-table td {
	border: none !important;
	background: transparent;
}

/* 左：メニュー名 */
figure.wp-block-table.menu-table td:first-child {
	text-align: left;
}

/* 右：価格 */
figure.wp-block-table.menu-table td:last-child {
	text-align: right;
	white-space: nowrap;
}
