@charset "UTF-8";

/* ==========================================================================
   m-kankou.css - 追記用スタイルシート

   このファイルは自由に編集してください。
   サイトの見た目を調整したいときは、まずここに書き足します。

   --------------------------------------------------------------------------
   読み込み順（あとに読まれるものが勝ちます）

     1. SWELL 本体
     2. style.css        ヘッダー・ヒーロー（テーマの土台）
     3. custom.css       サイト構築時の調整
     4. m-kankou.css     このファイル。いちばん最後

   最後に読まれるので、同じ指定なら !important を付けなくても
   ここに書いたものが優先されます。

   --------------------------------------------------------------------------
   書くときの注意（このテーマ特有の癖）

   1. 本文の中を触るときは .post_content を頭に付ける

        効かない例   .wp-block-table th { ... }
        効く例       .post_content .wp-block-table th { ... }

      SWELL 本体が詳細度の高いセレクタと !important を多用しているため、
      素のセレクタだと負けることがあります。

   2. ブレイクポイントは 960px と 600px

        @media (max-width: 959px) { ... }   タブレット・スマホ
        @media (max-width: 599px) { ... }   スマホ

      SWELL 本体と同じ区切りです。ここを揃えないと中途半端な幅で崩れます。

   3. スマホでは html の font-size が 13.5px に落ちます（PCは16px）

      rem 指定は意図より小さくなります。
      サイズを確実に効かせたいところは px で書いてください。

   4. 色はできるだけ変数を使う

        var(--color_main)     カスタマイザーのメインカラー
        var(--color_text)     本文の文字色
        var(--mk-ink)         #2b2926  チャコール
        var(--mk-ink-soft)    #6b6459  補助テキスト
        var(--mk-base)        #f4f1eb  オフホワイト
        var(--mk-base-deep)   #e8e3d9  一段落とした背景
        var(--mk-accent)      #1f4e5a  三陸の海
        var(--mk-amber)       #c8873c  差し色
        var(--mk-serif)       見出し用（欧文セリフ）
        var(--mk-sans)        本文用（欧文サンセリフ）

      変数を使っておくと、カスタマイザーで色を変えたときに追従します。

   5. 未定義の変数を書くと、その宣言ごと無効になります

      var(--foo) が存在しないと color: var(--foo) の行が丸ごと
      効かなくなります。タイプミスに注意してください。

   --------------------------------------------------------------------------
   例（コメントアウトしてあります）

   .post_content h2 {
     letter-spacing: 0.04em;
   }

   @media (max-width: 599px) {
     .post_content h2 {
       font-size: 24px;
     }
   }
   ========================================================================== */


/* ここから下に書いてください
   -------------------------------------------------------------------------- */


/* ========================================================================== */
/* 　　標準デザインの調整 */
/* ========================================================================== */

/* フォントサイズがスマホ表示でＰＣ表示より大きくなるのを修正 */
:root {
	--swl-fz--content: 3.5vw;
}

@media screen and (min-width: 600px) {
	:root {
	--swl-fz--content: 16px;
	}
}

/* 本文中のアイコンが小さくて見えづらい */
.post_content .swl-inline-icon {
	scale: 120%;
	margin-right: .3em;
	margin-left: .2em;
}

/* インラインボタンのデザイン変更 */
table .swl-inline-btn {
	margin: 0 .25em;
}

.post_content .wp-block-table .swl-inline-btn a {
	padding: .1em .75em;
	line-height: 150%;
}

/* img にカーソルを合わせると scale を上げる設定の影響で表示されない shadow を修正 */
.is-style-shadow {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .1), 0 4px 8px -4px rgba(0, 0, 0, .2);
}

/* 影を付けた画像のアスペクト比を設定すると余白ができるのを防止 */
.is-style-shadow img {
	width: fit-content;
}

/* テーブル内セルで変な場所で折り返すのを防止 */
td, th {
    word-break: normal;
}

/* 見出しに背景色を付けたときのpaddingを調整 */
h1:where(.wp-block-heading).has-background, h2:where(.wp-block-heading).has-background, h3:where(.wp-block-heading).has-background, h4:where(.wp-block-heading).has-background, h5:where(.wp-block-heading).has-background, h6:where(.wp-block-heading).has-background {
    padding: .75em 1.25em;
}

/* section-contentsクラス下のH2に装飾を追加 */
.section-contents h2 {
  padding-bottom: .2em;
  background: linear-gradient(transparent 85%, color-mix(in srgb, var(--color_main) 60%, transparent));
  font-size: clamp(24px, 2vw, 30px);
}
@media screen and (min-width: 782px) {
	.section-contents > p {
		padding: 0 1em;
	}
	.section-contents .wp-block-group__inner-container > p {
		padding: 0 1em;
	}
}

/* カバーの文字に装飾を追加 */
.wp-block-cover__inner-container h2,
.wp-block-cover__inner-container p {
  text-shadow: 
	  1px 1px 0 #fff, 
	  -1px -1px 0 #fff, 
	  -1px 1px 0 #fff, 
	  1px -1px 0 #fff, 
	  2px 0px 0 #fff, 
	  -1px 0px 1px #fff, 
	  0px 2px 0 #fff, 
	  0px -1px 1px #fff,
	  1px 1px 1px #fff, 
	  1px 1px 5px #fff, 
	  1px 1px 10px #fff, 
	  1px 1px 15px #fff;
  font-family: "Cormorant Garamond", "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important;
  font-weight: 500 !important;
  font-style: italic;
}

.wp-block-cover__inner-container p {
  font-size: clamp(24px, 2vw, 30px) !important;
}

/* 囲み装飾 */
.section-contents_messagebox {
  background-color: #ffffff;
  border-left: 5px solid var(--color_main);
  border: 1px solid var(--color_main);
  border-left-width: 5px;
  padding: 15px;
  border-radius: 6px;
  font-size: 0.95rem;
  color: #222222;
}
.section-contents_columnbox {
  padding: 1em 1.25em !important;
  border-radius: .5rem;
}

/* =================================================================================== */
/*   カスタムギャラリーブロック用：pagetop_gallery （3枚固定表示 ＋ 4枚目以降非表示）  */
/* =================================================================================== */

/* 画像のアスペクトレートを固定 */
.wp-block-gallery.pagetop_gallery figure.wp-block-image img {
  aspect-ratio: 3 / 2;
}

/* --- 1. PC表示：左1枚(大) + 右2段 --- */
@media (min-width: 601px) {
  .wp-block-gallery.pagetop_gallery {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    /* 固定値(180px)をやめ、autoにして子要素のアスペクト比に任せる */
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* 各画像ブロック */
  .wp-block-gallery.pagetop_gallery figure.wp-block-image {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    /* アスペクト比を維持するための指定 */
    aspect-ratio: 3 / 2 !important; 
  }

  .wp-block-gallery.pagetop_gallery figure.wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 1枚目：左側に大きく配置（縦に2段分使うため auto に上書き） */
  .wp-block-gallery.pagetop_gallery figure.wp-block-image:nth-child(1) {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
    /* aspect-ratio: auto !important; 右2枚の高さに自動で合わせる */
  }

  /* 2枚目：右上 */
  .wp-block-gallery.pagetop_gallery figure.wp-block-image:nth-child(2) {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
  }

  /* 3枚目：右下 */
  .wp-block-gallery.pagetop_gallery figure.wp-block-image:nth-child(3) {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
  }
}

/* --- 2. 4枚目以降の画像を常に非表示 --- */
.wp-block-gallery.pagetop_gallery figure.wp-block-image:nth-child(n+4) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* --- 3. スマホ表示（縦1列で3枚表示） --- */
@media (max-width: 600px) {
	.wp-block-gallery.pagetop_gallery {
    	display: flex !important;
    	flex-direction: column !important;
    	gap: 8px !important;
 	}

 	.wp-block-gallery.pagetop_gallery figure.wp-block-image {
    	width: 100% !important;
    	margin: 0 !important;
	}

 	.wp-block-gallery.pagetop_gallery figure.wp-block-image img {
    	width: 100% !important;
    	/* 高さをアスペクト比指定(3:2)に変更 */
    	height: auto !important;
    	aspect-ratio: 3 / 2 !important;
    	object-fit: cover !important;
	}

	.wp-block-gallery.pagetop_gallery figure.wp-block-image:nth-child(1) img {
    	/* 1枚目も同じく比率で調整（例：16:9 や 3:2 など） */
    	aspect-ratio: 16 / 9 !important; 
	}
	
	.wp-block-gallery.pagetop_gallery figure.wp-block-image:nth-child(n+2) {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}
}

.pagetop_gallery {
  border-radius: 0.4rem;
  overflow: hidden;
}

/* --- 4. ボタンのデザイン --- */
.open_pagetop_gallery_area {
  text-align: center;
  margin-top: 16px;
  position: absolute;
  right: 15px;
  bottom: 15px;
}

#open_pagetop_gallery {
  background-color: #f7f7f7;
  color: #333;
  border: 1px solid #ccc;
  padding: 1px 15px 0 15px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#open_pagetop_gallery:hover {
  background-color: #eee;
  border-color: #999;
}

#open_pagetop_gallery.has-icomoon-icon::before {
  content: "\e937";
  font-family: "icomoon" !important; 
  font-style: normal;
  font-weight: normal;
  font-size: 1.4em;
  display: inline-block;
  margin-right: 0.5em; /* アイコンと文字の間の余白 */
  vertical-align: middle;
}

/* --- 5. lightboxのサイズを調整 --- */

.lum-lightbox-inner img {
  /* 画面幅・高さに対する最大サイズ（デフォルトは 100vw / 100vh に近い状態） */
  max-width: 85vw !important;  /* 画面幅の85%に制限 */
  max-height: 85vh !important; /* 画面高さの85%に制限 */
  
  /* 画像自体を中央に配置 */
  margin: auto !important;
  object-fit: contain !important;
}


/* =================================================================================== */
/*   STAY タブアイコン設定  */
/* =================================================================================== */

:root {
	--tab-icon-tag: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSJub25lIj48L3JlY3Q+PHBhdGggZD0iTTEyMi43LDI1LjksNDIsNDIsMjUuOSwxMjIuN2E4LDgsMCwwLDAsMi4yLDcuMkwxMzIuNSwyMzQuM2E3LjksNy45LDAsMCwwLDExLjMsMGw5MC41LTkwLjVhNy45LDcuOSwwLDAsMCwwLTExLjNMMTI5LjksMjguMUE4LDgsMCwwLDAsMTIyLjcsMjUuOVoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMTYiPjwvcGF0aD48Y2lyY2xlIGN4PSI4NCIgY3k9Ijg0IiByPSIxMiI+PC9jaXJjbGU+PC9zdmc+);
	--tab-icon-room: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSJub25lIj48L3JlY3Q+PHBhdGggZD0iTTEwNCwxNjhWODBIMjA4YTMyLDMyLDAsMCwxLDMyLDMydjU2IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE2Ij48L3BhdGg+PGxpbmUgeDE9IjE2IiB5MT0iMjA4IiB4Mj0iMTYiIHkyPSI0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxNiI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjE2IDE2OCAyNDAgMTY4IDI0MCAyMDgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMTYiPjwvcG9seWxpbmU+PGxpbmUgeDE9IjEwNCIgeTE9IjgwIiB4Mj0iMTYiIHkyPSI4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxNiI+PC9saW5lPjwvc3ZnPg==);
	--tab-icon-bath: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSJub25lIj48L3JlY3Q+PGxpbmUgeDE9IjcyIiB5MT0iMTkyIiB4Mj0iNzIiIHkyPSIyMTYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMTYiPjwvbGluZT48bGluZSB4MT0iMTg0IiB5MT0iMTkyIiB4Mj0iMTg0IiB5Mj0iMjE2IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE2Ij48L2xpbmU+PHBhdGggZD0iTTU2LDEwNFY1MmEyMCwyMCwwLDAsMSw0MCwwIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE2Ij48L3BhdGg+PHJlY3QgeD0iMTM2IiB5PSI5NiIgd2lkdGg9IjY0IiBoZWlnaHQ9IjQ4IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE2Ij48L3JlY3Q+PHBhdGggZD0iTTIwMCwxMDRoMzJhOCw4LDAsMCwxLDgsOHYzMmE0OCw0OCwwLDAsMS00OCw0OEg2NGE0OCw0OCwwLDAsMS00OC00OFYxMTJhOCw4LDAsMCwxLDgtOEgxMzYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMTYiPjwvcGF0aD48L3N2Zz4=);
	--tab-icon-meal: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSJub25lIj48L3JlY3Q+PGxpbmUgeDE9Ijg0IiB5MT0iMzIiIHgyPSI4NCIgeTI9IjcyIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE2Ij48L2xpbmU+PGxpbmUgeDE9Ijg0IiB5MT0iMTE2IiB4Mj0iODQiIHkyPSIyMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMTYiPjwvbGluZT48cGF0aCBkPSJNMTEyLDMybDgsNDhhMzYsMzYsMCwwLDEtNzIsMGw4LTQ4IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE2Ij48L3BhdGg+PHBhdGggZD0iTTIwNCwxNjBIMTQ4UzE2MCw0OCwyMDQsMzJWMjI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE2Ij48L3BhdGg+PC9zdmc+);
	--tab-icon-bell: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSJub25lIj48L3JlY3Q+PHBhdGggZD0iTTU2LjIsMTA0YTcxLjksNzEuOSwwLDAsMSw3Mi4zLTcyYzM5LjYuMyw3MS4zLDMzLjIsNzEuMyw3Mi45VjExMmMwLDM1LjgsNy41LDU2LjYsMTQuMSw2OGE4LDgsMCwwLDEtNi45LDEySDQ5YTgsOCwwLDAsMS02LjktMTJjNi42LTExLjQsMTQuMS0zMi4yLDE0LjEtNjhaIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE2Ij48L3BhdGg+PHBhdGggZD0iTTk2LDE5MnY4YTMyLDMyLDAsMCwwLDY0LDB2LTgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMTYiPjwvcGF0aD48L3N2Zz4=);
	--tab-icon-map: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSJub25lIj48L3JlY3Q+PHBvbHlsaW5lIHBvaW50cz0iOTYgMTg0IDMyIDIwMCAzMiA1NiA5NiA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxNiI+PC9wb2x5bGluZT48cG9seWdvbiBwb2ludHM9IjE2MCAyMTYgOTYgMTg0IDk2IDQwIDE2MCA3MiAxNjAgMjE2IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjE2Ij48L3BvbHlnb24+PHBvbHlsaW5lIHBvaW50cz0iMTYwIDcyIDIyNCA1NiAyMjQgMjAwIDE2MCAyMTYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMTYiPjwvcG9seWxpbmU+PC9zdmc+);
}

.section-stay-tab .c-tabList__button::before {
	content: "";
	display: inline-block;
	width: 1.2em;  /* アイコンのサイズ（文字より少し大きめ） */
	height: 1.2em;
	margin-right: 0.5em; /* アイコンと文字の間の隙間 */
	vertical-align: -0.2em; /* 高さを中央に合わせる */
  
	/* 文字色と連動させるマスク設定 */
	background-color: currentColor; 
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.section-stay-tab .c-tabList__item:nth-child(1) .c-tabList__button::before {
  -webkit-mask-image: var(--tab-icon-tag); mask-image: var(--tab-icon-tag);
}
.section-stay-tab .c-tabList__item:nth-child(2) .c-tabList__button::before {
  -webkit-mask-image: var(--tab-icon-room); mask-image: var(--tab-icon-room);
}
.section-stay-tab .c-tabList__item:nth-child(3) .c-tabList__button::before {
  -webkit-mask-image: var(--tab-icon-bath); mask-image: var(--tab-icon-bath);
}
.section-stay-tab .c-tabList__item:nth-child(4) .c-tabList__button::before {
  -webkit-mask-image: var(--tab-icon-meal); mask-image: var(--tab-icon-meal);
}
.section-stay-tab .c-tabList__item:nth-child(5) .c-tabList__button::before {
  -webkit-mask-image: var(--tab-icon-bell); mask-image: var(--tab-icon-bell);
}
.section-stay-tab .c-tabList__item:nth-child(6) .c-tabList__button::before {
  -webkit-mask-image: var(--tab-icon-map); mask-image: var(--tab-icon-map);
}


/* =================================================================================== */
/*   投稿リストに装飾を追加  */
/* =================================================================================== */

.p-postList__body::after {
	content: "VIEW DERAIL";
	padding: 1em 2.5px .5em 2.5px;
	color: var(--color_link);
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	background-color: transparent;
	background-image: linear-gradient(to right, var(--color_link) 75%, transparent 25%);
	background-size: 50% 1px;
	background-position: bottom left;
	background-repeat: no-repeat;
	transition: background-size 0.3s ease;
	width: fit-content;
}

.p-postList__link:hover .p-postList__body:after {
	background-color: transparent;
	background-image: linear-gradient(to right, var(--color_link), var(--color_link));
	background-size: 100% 1px;
	background-position: bottom left;
 	background-repeat: no-repeat;
	color: var(--color_link);
}

.p-postList__body {
	display: flex;
    flex-direction: column;
}

.p-postList__thumb.c-postThumb {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .1), 0 4px 8px -4px rgba(0, 0, 0, .2);
	border-radius: 0.2rem;
}
@media (min-width: 600px) {
	.-type-card .p-postList__item {
	padding: 0 1em;
	}
}

/* =================================================================================== */
/*   カードスタイルのリッチカラム装飾  */
/* =================================================================================== */

.swell-block-columns.cardstyle-columns .swell-block-columns__inner > div {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .1), 0 4px 8px -4px rgba(0, 0, 0, .2);
	border-radius: 3rem;
}
.swell-block-columns.cardstyle-columns .swell-block-columns__inner p {
	padding: 0 1.5em;
	flex-grow: 1 !important;
}
.swell-block-columns.cardstyle-columns .is-stack {
	height: 100%;
	height: 100%;
}
.swell-block-columns.cardstyle-columns .is-stack p:last-child {
	margin-bottom: 1.5em !important;
	flex-grow: initial !important;
}
/* 画像をホバーした際、View Detailリンクの見た目を変更 */
.swell-block-columns.cardstyle-columns .wp-block-group:has(figure.wp-block-image:hover) .mk-linkText a::after {
  transform: scaleX(1);
}

/* =================================================================================== */
/*   バナーリンクのリッチカラム装飾  */
/* =================================================================================== */

.swell-block-columns.bannerlink-columns .is-stack p {
  flex-grow: 1 !important;
}
.swell-block-columns.bannerlink-columns .is-stack p:last-child {
  margin-bottom: .5em !important;
  flex-grow: initial !important;
}

.swell-block-columns.bannerlink-columns img {
	aspect-ratio: 16 / 10 ;
}

.swell-block-columns.bannerlink-columns .c-bannerLink__text {
	font-family: "Cormorant Garamond", "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important;
	font-weight: 600;
	letter-spacing: 0.08em;
}

/* 画像をホバーした際、View Detailリンクの見た目を変更 */
.swell-block-columns.bannerlink-columns .wp-block-group:has(div.swell-block-bannerLink:hover) .mk-linkText a::after {
  transform: scaleX(1);
}


/* ==========================================================================
   STAY と地図まわりの意匠

   もともと、この内容は投稿の本文（カスタムHTMLブロックの <style>）に
   1本ずつ貼られていた。貼られていない投稿だけ見た目が変わってしまうため、
   同じ内容をここに置いて、本文に何も無くても効くようにしている。

   ＝ 新しく STAY や地図付きの投稿を追加するとき、
      本文に <style> を貼る必要はない。何もしなくてよい。

   ※ 既存19本の本文側 <style> は残してある。同じ値なので二重でも見た目は変わらない。
   ※ !important は元の記述に合わせている（SWELL本体の指定を上書きするため）。
   ========================================================================== */

/* 地図の枠線。.googlemap_iframe を置いた所だけに効く */
.googlemap_iframe iframe {
	border: solid 1px #dcdcdc !important;
	border-radius: .3rem;
}

/* --------------------------------------------------------------------------
   ここから下は STAY の個別ページだけに効かせる。

   単に `.post_content td` と書くと、表を持つ EXPERIENCE 30本・FOOD 8本・
   固定ページ8本まで巻き込んで見た目が変わる。
   SWELL は #body_wrap にクラスを出すので、single-stay で絞る。
   -------------------------------------------------------------------------- */

/* 施設情報タブ */
@media (min-width: 600px) {
	.single-stay .is-style-default .c-tabBody {
		padding: 1.5em;
	}
	.single-stay .c-tabList__button {
		font-size: 16px;
	}
}

.single-stay .is-style-default > .c-tabList .c-tabList__button {
	border-radius: .3rem .3rem 0 0;
}

.single-stay .is-style-default > .c-tabList {
	gap: 2px;
}

.single-stay .is-style-default .c-tabBody {
	border-radius: 0 0 .3rem .3rem;
}

/* 表のセルが細くなりすぎないように */
.single-stay .post_content td {
	min-width: 75px !important;
}

/* 説明リスト（施設情報の項目名と内容） */
.single-stay .swell-block-dl__dt {
	padding: .5em .8em !important;
	background-color: var(--wp--preset--color--swl-gray) !important;
	font-weight: bold;
}

.single-stay .swell-block-dl__dd {
	padding: .25em .8em !important;
}

/* =================================================================================== */