/* =========================================================
   B&G関連ページ 共通CSS
========================================================= */

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

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

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

/* アイコン共通仕様 */
#pool-aboutus .smb-section__title::before,
#pool-calendar .smb-section__title::before,
#pool-news .smb-section__title::before,
#pool-guidance .smb-section__title::before,
#pool-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;
}

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

#pool-calendar .smb-section__title::before {
	background-image: url(http://hibari21.com/hibari21_wp/wp-content/uploads/2025/12/pool_-calendar_icon.svg);
}

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

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

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


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


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

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

.fukidashi-blue .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_02.png")
    no-repeat center / contain;
}

/* -------------------------------------
   共通：h2背景装飾
------------------------------------- */
.pool_h2_bg {
	background-image: url(http://hibari21.com/hibari21_wp/wp-content/uploads/2026/01/pool_h2_bg.svg);
	height: 56px;
	display: flex;
	align-items: center;
	padding-left: 12px;
	border-radius: 5px;
}



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

.link-decorated{
	color: #0074b8;
	text-decoration: underline;
	text-decoration-color: currentColor;
}



/* =====================================
   共通：お問い合わせセクション
===================================== */
#pool-contact{
	color: #fff;
	background-image: url(http://hibari21.com/hibari21_wp/wp-content/uploads/2026/01/pool_contact_bg_1920px.png);
	background-repeat: no-repeat;
	background-size: cover;
}

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


#pool-contact .smb-section__title{
	padding-top: 120px;
}

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


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


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

#pool-contact .smb-section__title > span::before,
#pool-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) {

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

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

	/* after を見出し下装飾として使用 */
	#pool-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. B&G メインページ
========================================================= */

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


/* 日本語タイトル */
#pool-kv::before{
	content: "高島市今津B&G海洋センター";
	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);
}


/* 英語タイトル */
#pool-kv::after{
	content: "Imazu B&G Marine 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) {
	#pool-kv::before{
		top: 38%;
		font-size: 24px;
		letter-spacing: .1em;
	}
	#pool-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(-80px)!important;
}

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

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

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

/* タブレット表示 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	#pool-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) {
	#pool-aboutus{
		background-image: url(http://hibari21.com/hibari21_wp/wp-content/uploads/2026/01/pool_aboutus_bg_1920px-scaled.webp);
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	#pool-aboutus .smb-section__dividers,
	#pool-aboutus .smb-section__fixed-background{
		display: none!important;
	}
	
	#pool-aboutus .smb-section__title{
	padding-top: 80px;
	}
}

/* -------------------------------------
   パネル調整
------------------------------------- */
@media screen and (min-width: 768px) {
	/* パネルのテキストの高さを揃える */
	.panel-text{
		height: 115px;
	}
	
	/* パネル内のコンテンツ幅 */
	.content-w450{
		width: 450px;
	}
}

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

#pool-aboutus .pool_illustration_01{
    position: absolute;
    top: 20px;
	left: 80px;
    z-index: 1;
    pointer-events: none;
}

#pool-aboutus .pool_illustration_02{
    position: absolute;
    top: 100px;
    right: 80px;
    z-index: 1;
    pointer-events: none;
}

#pool-aboutus .pool_illustration_03{
    position: absolute;
    top: 20px;
    right: 80px;
    z-index: 1;
    pointer-events: none;
}

/* スマホ表示 */
@media screen and (max-width: 767px) {
	.pool-logo img{
		width: 120px!important;
		margin-left: 0;
		margin-right: auto;
		display: block;
	}
	
	#pool-aboutus .pool_illustration_01{
		top: unset;
		bottom: 1390px;
        left: 20px;
	}

	#pool-aboutus .pool_illustration_01 img{
		width: 140px!important;
	}
	
	#pool-aboutus .pool_illustration_02{
		top: -100px;
		right: 20px;
	}
	
	#pool-aboutus .pool_illustration_02 img{
		width: 140px!important;
	}
	
	#pool-aboutus .pool_illustration_03{
		top: unset;
		right: 10px;
		bottom: -560px;
	}
	
	#pool-aboutus .pool_illustration_03 img{
		width: 90px!important;
	}
}

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


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

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

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

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

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

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

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

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

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

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

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



/* =====================================
   02-4 お知らせセクション
===================================== */
/* スマホ表示 */
@media (max-width: 767px) {
	#pool-news .pool_illustration_04{
		display: none;
	}
}




/* =========================================================
   03. 館内施設ページ
========================================================= */

/* =====================================
   03-1 館内施設セクション
===================================== */

/* 屋内温水プールのタイトルをセクションタイトルと同じサイズに調整 */
#pool-facility .indoor-pool-h2{
	--_font-size-level: 4;
	font-size: var(--_fluid-font-size);
	line-height: var(--_line-height);
}

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



/* =========================================================
   04. スクール・フィットネスページ
========================================================= */

/* =====================================
   03-1 本科セクション
===================================== */
/* -------------------------------------
   本科クラスのポイントの背景
------------------------------------- */
@media screen and (min-width: 768px) {
	#honka-point {
		background-image: url(http://hibari21.com/hibari21_wp/wp-content/uploads/2026/01/pool_swimming_bg_02.jpg)!important;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	#honka-point .smb-section__background {
    background-color: unset;
	}
}


/* -------------------------------------
   見出しの青い角丸装飾
------------------------------------- */
/* 見出し全体を横並びに */
#honka h2,
#kyouei h2,
#seijin h2,
#sonota h2 {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 左の角丸青ラベル */
#honka h2 .kadomaru-blue,
#kyouei h2 .kadomaru-blue,
#seijin h2 .kadomaru-blue,
#sonota h2 .kadomaru-blue {
  background: #0074b8;
  color: #fff;
  padding: 6px 28px;
  border-radius: 30px;
  font-weight: 600;
  display: inline-block;
}

/* 右側の補足テキスト */
#honka h2 .kadomaru-blue-sub,
#kyouei h2 .kadomaru-blue-sub,
#seijin h2 .kadomaru-blue-sub {
  color: #0074b8;
  font-weight: 600;
}

/* スマホ表示 */
@media (max-width: 767px) {
	#honka .wp-block-heading,
	#kyouei .wp-block-heading,
	#seijin .wp-block-heading,
	#sonota .wp-block-heading{
		display: block;
	}
	
	.wp-block-heading .kadomaru-blue-sub {
		display: block;
		margin-top: 12px;
	}
	
}


/* -------------------------------------
   青いアンダーライン
------------------------------------- */
.underline-blue {
  position: relative;
  color: #2b7bc0;
  font-weight: 600;
  padding-bottom: 10px;   /* 文字と線の間隔 */
  text-align: left;
}

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


/* -------------------------------------
   表の部分の装飾など
------------------------------------- */
.course-table td:first-child,
.course-table th:first-child {
  width: 20%;          /* 好きな幅に調整 */
}



/* -------------------------------------
   セクション間のバブル画像
------------------------------------- */
.overlap-bubble-01{
	position: relative;
    top: -120px;
	right: 80px;
	margin-bottom: -120px!important; /* ← 上に動かした分の余白を打ち消す */
}

.overlap-bubble-02{
	position: relative;
	top: 120px;
	left: 80px;
	z-index: 100;
	margin-top: -120px!important; /* ← 下に動かした分の余白を打ち消す */
}

.overlap-bubble-03{
	position: relative;
    top: 120px;
	right: 80px;
	z-index: 100;
	margin-top: -120px!important; /* ← 下に動かした分の余白を打ち消す */
}

/* スマホ表示 */
@media (max-width: 767px) {
	.overlap-bubble-01 {
		top: -80px;
		left: -240px;
	}
	.overlap-bubble-01 img{
		width: 80px!important;
	}
	
	.overlap-bubble-02 {
		top: 140px;
		left: 240px;
	}
	
	.overlap-bubble-02 img{
		width: 100px!important;
	}
	
	.overlap-bubble-03 {
		top: 90px;
		right: 20px;
	}
	
	.overlap-bubble-03 img{
		width: 45px!important;
	}
	
}


/* =====================================
   03-2 フィットネスセクション
===================================== */

/* -------------------------------------
   見出しの白×青ボーダーの角丸装飾
------------------------------------- */
#fitness h2.kadomaru-white {
  display: inline-block;
  padding: 10px 36px;
  border: 1px solid #0074b8;
  border-radius: 40px;
  background: #fff;
  color: #0074b8;
}

/* -------------------------------------
   ボタンの背景色
------------------------------------- */
#fitness .smb-btn-wrapper.is-style-ghost .smb-btn {
	background-color: #fff!important;
}