/* ブログ (Snow Monkey) にサイトのヘッダー・フッターを出したときの調整。HAWAII-2075 */

/* Snow Monkey のフッター・ページトップ・スマホの下の固定ナビは使わない (サイトのフッターを出す) */
.l-footer,
#page-top,
#footer-sticky-nav { display: none !important; }

/* common.css の header { height: 80px; overflow: hidden; background: #fff; ... }・header > div { max-width: 1000px; display: flex; ... } が
   サイトのヘッダー (#header) 以外の <header> にも当たる (ブログのヘッダー .l-header、記事のタイトル .c-entry__header、関連記事のカードなど)。
   ブラウザの初期値に戻す。:not(:where(#header)) で詳細度を common.css と同じにして、Snow Monkey 自身の指定 (クラス) には勝たないようにする */
header:not(:where(#header)) { overflow: visible; margin: 0; padding: 0; width: auto; height: auto; position: static; top: auto; left: auto; z-index: auto; background: none; }
header:not(:where(#header)) > div { max-width: none; margin: 0; padding: 0; overflow: visible; display: block; }
/* ブログのヘッダーは、サイトのヘッダー (z-index 200) より下に。スクロールしても帯 (サブナビ) を残すため、ヘッダーごと sticky にして
   帯より上 (ロゴ・キャッチ) はサイトのヘッダーの裏に隠す。top (--rk-head-top) は rk-site-frame.php の JS が
   「サイトのヘッダーの下端 (スマホは流れていくので画面の上) − ヘッダーの中の帯の位置」で入れる */
.l-header { position: sticky; top: var(--rk-head-top, 0px); z-index: 100; background: #FFFFFF; }
/* スクロールすると出る Snow Monkey の固定ナビは使わない (サイトのヘッダーが上に残るので) */
.l-header__drop-nav { display: none !important; }

/* common.css の main { overflow: hidden; margin-bottom: 40px; } と subpage-2075.css の body:not(.home) main { letter-spacing: 0.05em; color: ... } が
   ブログの本文の列 (Snow Monkey の main) に当たるので戻す (字間・色は Snow Monkey の指定を受け継ぐ) */
main { position: static; overflow: visible; margin-bottom: 0; }
body.sec-blog main { letter-spacing: inherit; color: inherit; }

/* サイトの CSS が body に付ける文字色 (#000)・両端そろえ (common.css の text-align: justify) が、ブログの部分にも受け継がれるので戻す。
   サイトのヘッダー・フッターは .l-container の外にあるので、サイトのまま */
body.sec-blog .l-container { color: var(--_color-text, #333); text-align: start; }

/* サイトのフッター向けの footer > div { display: block !important; padding: 0 32px !important; max-width: 1192px !important; ... } が、
   記事の下の「前の記事・次の記事」(Snow Monkey の <footer> の中の div) にも当たるので戻す */
footer > .c-prev-next-nav { display: flex !important; padding: 0 !important; max-width: none !important; overflow: visible; }

/* サイトのフッター向けの footer { 背景のドット・背景色・白い文字・Noto Sans・余白 110px/39px (!important)・position: relative } が、
   記事の下の Snow Monkey の <footer class="c-entry__footer"> (関連記事・前後の記事) にも当たるので戻す。サイトのフッターはクラスのない <footer> */
footer.c-entry__footer { position: static; padding: 0 !important; border: none; background: none !important; background-blend-mode: normal; color: var(--_color-text, #333) !important; font-family: inherit; }

/* ---------- ブログのタイトル・ヘッダー ----------
   パンくずとタイトル (ROYAL KAILA BLOG + 日本語) は下層と同じ HTML・位置で rk-site-frame.php が出す。
   Snow Monkey のヘッダーは MAGAZINE のロゴの段を出さず (中身も rk-site-frame.php で空に)、サブナビだけの帯 (上下に細い線) にする */
.l-header .l-center-header__row:has(.c-site-branding),
.l-header .l-center-header__row:first-child:not(.u-invisible-md-down) { display: none; }
.l-header .l-center-header__row.u-invisible-md-down { margin-top: 0; border-top: 1px solid #E6ECEC; border-bottom: 1px solid #E6ECEC; }

/* タイトル: 下層の .midasi-2075 (英字 55px・日本語 12px) のまま。下はすぐサブナビの帯なので、下の余白だけ 70px → 40px。
   日本語の 2 つは細い縦線で区切る (スマホは 2 行) */
.midasi.midasi-2075.rk-blog-title { margin-bottom: 40px; }
.rk-blog-title__sub { margin-left: 1.2em; padding-left: 1.2em; border-left: 1px solid #C9CDCF; }
@media only screen and (max-width: 767px) {
	.midasi.midasi-2075.rk-blog-title { margin-bottom: 28px; }
	.rk-blog-title__sub { display: block !important; margin: 2px 0 0; padding-left: 0; border-left: 0; }
}

/* ---------- カテゴリーのナビ (Snow Monkey の .p-global-nav。サイトのヘッダーの下のサブナビ) ---------- */
.l-header .p-global-nav .c-navbar__item > a > small { display: none; }   /* 英字 (HOME・ABOUT HAWAII など) は出さない */
.l-header .p-global-nav .c-navbar__item > a { padding: 13px 14px; font-size: 13px; }
.l-header .p-global-nav .c-navbar__item > a > span { white-space: nowrap; }   /* 「ホー／ム」のように 1 文字ずつ折り返さない */
/* 1280px 以上は右に固定のサイトの SNS (右から 24〜50px) にかからないよう、ナビの幅を 1,100px までに
   (文字だけで約 872px (「ブログトップ」込み) + 余白 11px × 2 × 10 項目 = 約 1,092px) */
@media (min-width: 80em) {
	.l-header .p-global-nav { max-width: 1100px; margin-left: auto; margin-right: auto; }
	.l-header .p-global-nav .c-navbar__item > a { padding-left: 11px; padding-right: 11px; }
}
/* PC でマウスを乗せると出る下の階層 (フォトロケーション → ビーチフォト など。元 14px)。サブナビ (13px) より一回り小さく。
   記事カードのラベルより手前に出るのは .l-header の z-index: 100 (上の sticky の指定) */
.l-header .p-global-nav .c-navbar__submenu { min-width: 200px; }
.l-header .p-global-nav .c-navbar__subitem > a { padding: 9px 16px; font-size: 12px; line-height: 1.6; letter-spacing: 0.1em; }

/* 1200〜1279px は左右の余白を 9px に (約 872px + 180px = 約 1,052px。1200px で並ぶ幅は約 1,144px) */
@media (min-width: 75em) and (max-width: 79.9375em) {
	.l-header .p-global-nav .c-navbar__item > a { padding-left: 9px; padding-right: 9px; }
}
/* 1024〜1199px は文字を 12px・余白 6px に (約 805px + 120px = 約 925px。1024px で並ぶ幅は約 968px) */
@media (min-width: 64em) and (max-width: 74.9375em) {
	.l-header .p-global-nav .c-navbar__item > a { padding-left: 6px; padding-right: 6px; font-size: 12px; }
}
/* 1023px 以下: Snow Monkey の「MENU」(ハンバーガー) はやめて、カテゴリーを横にスクロールできる 1 列で出す (サイトのハンバーガーと 2 つ並ぶので) */
@media (max-width: 63.9375em) {
	.l-header .c-row__col:has(> .c-hamburger-btn) { display: none !important; }
	.l-header .l-center-header__row.u-invisible-md-down { display: block !important; }
	.l-header .p-global-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 32px), transparent);   /* 左右の端をぼかして、横に続きがあるとわかるように */
		mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 32px), transparent); }
	.l-header .p-global-nav::-webkit-scrollbar { display: none; }
	.l-header .p-global-nav .c-navbar { flex-wrap: nowrap; width: max-content; margin: 0 auto; padding: 0 16px; }   /* 端の項目がぼかしにかからないように */
	.l-header .p-global-nav .c-navbar__item { flex: 0 0 auto; }
	.l-header .p-global-nav .c-navbar__item > a { padding: 10px 12px; font-size: 13px; }
	.l-header .p-global-nav .c-navbar__submenu { display: none !important; }   /* 下の階層 (ホバーで出る) はスマホでは出さない */
	.l-header.is-stuck .p-global-nav { margin-right: var(--rk-ham-space, 0px); }   /* 画面の上に貼り付いている間は、右上のハンバーガーの分あける */
	.l-header.is-stuck { box-shadow: 0 -24px 0 #FFFFFF; }   /* 帯はハンバーガーの高さにそろえて上から 約 18px 下がるので、その上も白く */
}

/* ---------- PC の幅を下層にそろえる ----------
   下層の本文は 1,000px (.in など)。Snow Monkey は 1,280px から左右の余白 (約 28px) を引いた約 1,224px なので、
   記事・一覧の部分 (.l-contents) だけ中身が 1,000px になるようにする。ヘッダー (ロゴ・サブナビ) はそのまま。
   サイドバーのあるページは 本文 約 607px + 間 約 57px + サイドバー 336px = 1,000px */
.l-contents { --_container-max-width: calc(1000px + var(--_container-margin, 1.76923rem) * 2); }
/* Snow Monkey 31 から: 幅は .c-container が --_global--container-max-width を読む (中身の幅。左右の余白は外に足される) */
.l-contents { --_global--container-max-width: 1000px; }
/* Snow Monkey 31 から: サイドバーのない一覧 (カテゴリー・タグ・検索など) は幅の上限のない .c-fluid-container になる → ほかと同じ 1,000px に */
.l-contents__container.c-fluid-container { max-width: var(--_global--container-max-width); margin-left: auto; margin-right: auto; }
/* Snow Monkey 31 から: 1023px 以下の左右の余白が 約 29px になる → 前と同じ 14px に */
@media not all and (min-width: 64em) {
	:root { --_global--container-margin: 14px; }
}
/* Snow Monkey 31 から: 本文とサイドバーは横並びの flex で、本文 46rem (736px)・サイドバー 336px が並ばないと折り返す。
   1,000px に収まるよう 本文 600px・サイドバー 280px を起点にする (本文は残りに広がって 約 672px)。1023px 以下は今までどおり縦に並べる */
@media (min-width: 64em) {
	[data-has-sidebar=true] .l-contents { --contents--main-basis: 600px; --contents--sidebar-basis: 280px; }
}
@media not all and (min-width: 64em) {
	[data-has-sidebar=true] .l-contents { --contents--main-basis: 100%; }
}
/* Snow Monkey 31 から: トップの本文 (.c-entry__content) に左右の余白と幅の上限 (1,000px) が付き、スライダーも縮む → PC はスライダーだけ前のとおり画面の端まで
   (スマホは前も左右に余白があったので、そのまま) */
@media (min-width: 64em) {
	.p-section-front-page-content .c-entry__content > .smb-pickup-slider { max-width: none; margin-left: calc(-1 * var(--_container-margin-left)); margin-right: calc(-1 * var(--_container-margin-right)); }
}

/* ---------- Snow Monkey 31 から: common.css の「余白 0」に負ける指定を戻す ----------
   common.css の blockquote, dd, div, … p, … ul, figure { margin: 0; padding: 0; } (要素名だけの指定) が、Snow Monkey 31 の :where() で書いた指定
   (強さ 0) に勝ち、本文の段落・画像・見出しの上下の余白、見出しの飾りの内側の余白、箇条書きの字下げが消える (Snow Monkey 11 はクラスの指定だったので勝っていた)。
   Snow Monkey と同じ指定を、:not(html) で common.css と同じ強さ (要素 1 つ分) にして書き直す (後から読むのでこちらが勝つ)。Snow Monkey 自身のクラスの指定には負けたまま */
:where(.p-entry-content) > :where(:not(:first-child)):not(html) { margin-top: calc(var(--_margin1) * var(--_margin-top)); }
:where(.p-entry-content) > :where(:not(:last-child)):not(html) { margin-bottom: calc(var(--_margin1) * var(--_margin-bottom)); }
:where(.p-entry-content, .textwidget, .is-layout-constrained, .is-layout-flow, .wp-block-freeform > div, .wp-block-media-text__content) > :where(h2:not([class*=is-style-]), h2.is-style-default):not(html) { padding: var(--entry-content-h2-padding); }
:where(.p-entry-content, .textwidget, .is-layout-constrained, .is-layout-flow, .wp-block-freeform > div, .wp-block-media-text__content) > :where(h3:not([class*=is-style-]), h3.is-style-default):not(html) { padding: var(--entry-content-h3-padding); }
:where(.p-entry-content) > :where(.wp-block-list) * > :where(li:first-child):not(html),
:where(.p-entry-content) > :where(.wp-block-list) :where(li) + :where(li):not(html) { margin-top: var(--_margin-2); }
:where(.l-container) :where(ul, ol):not(html) { padding-left: var(--_list-item-indent); }
:where(.l-container) :where(.has-background):not(html) { padding: var(--_padding1); }
:where(.l-contents__container > *, .l-contents__main > *, .c-entry > *, .c-entry__body > *):not(html) { margin-inline: auto; }

/* ---------- 記事・一覧の文字 (サイトのトンマナ design.md に寄せる) ----------
   書体: Snow Monkey の設定はシステムフォント → サイトと同じ Noto Sans JP。トップのスライダーの見出しは
   「日本語だけの見出し」なので しっぽり明朝 (太字)。大きさは元の値から一回り小さく */
body.sec-blog .l-container { font-family: var(--f-sans-jp); }

/* トップのスライダーの見出し (元 48px のシステムフォント。Snow Monkey の [data-has-sidebar] .c-entry__content … より強くするため親のクラスも付ける) */
body.sec-blog .wpaw-pickup-slider .wpaw-pickup-slider__item-title { font-family: var(--f-serif-jp); font-weight: 700; font-size: 30px; line-height: 1.6; letter-spacing: 0.1em; text-align: center; word-break: auto-phrase; }   /* 文節で折り返す (Chrome)。text-wrap: balance は文節を無視して「かけが / えのない」のように言葉の途中で切るのでやめる */

/* トップのスライダー: 矢印は写真の外 (画面の外) に出る作りで、右の SNS にも重なっていた → PC は写真の内側 (本文 1,000px の少し外・SNS にかからない位置) に白い細い矢印で。
   スマホは矢印なし (指で横に動かすか、下の印を押す)。何枚目かの印 (dots) は rk-site-frame.php の JS で出す: 短い横線、今の 1 枚だけ濃いグレー */
body.sec-blog .wpaw-pickup-slider .slick-arrow { width: 44px; height: 44px; background: none !important; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.45)); }
body.sec-blog .wpaw-pickup-slider .slick-arrow::before { width: 14px; height: 14px; border-color: #FFFFFF !important; border-width: 1px !important; }
body.sec-blog .wpaw-pickup-slider .slick-prev { left: max(60px, calc(50% - 560px)); transform: translateY(-50%); }
body.sec-blog .wpaw-pickup-slider .slick-next { right: max(60px, calc(50% - 560px)); transform: translateY(-50%); }
body.sec-blog .wpaw-pickup-slider .slick-prev::before { left: calc(50% - 4px); top: calc(50% - 7px); }
body.sec-blog .wpaw-pickup-slider .slick-next::before { left: calc(50% - 10px); top: calc(50% - 7px); }
@media (max-width: 767px) {
	body.sec-blog .wpaw-pickup-slider .slick-arrow { display: none !important; }
}
body.sec-blog .wpaw-pickup-slider .slick-dots { position: static; display: flex; justify-content: center; gap: 4px; width: auto; margin: 16px 0 0; padding: 0; list-style: none; }
body.sec-blog .wpaw-pickup-slider .slick-dots li { margin: 0; padding: 0; }
body.sec-blog .wpaw-pickup-slider .slick-dots button { display: block; width: 40px; height: 20px; padding: 0; border: 0; background: none; font-size: 0; cursor: pointer; }
body.sec-blog .wpaw-pickup-slider .slick-dots button::before { content: ""; display: block; width: 32px; height: 2px; margin: 0 auto; background: #C9CDCF; transition: background-color 0.3s; }
body.sec-blog .wpaw-pickup-slider .slick-dots .slick-active button::before { background: #7D8A8E; }
/* Snow Monkey 31 から: 見出しの枠が写真の 80% になり (スマホで見出しが 6 行に折り返してスライダーが縦に伸びる)、日付・READ MORE の余白も大きくなる
   → 前 (11) と同じ 枠 100%・日付の上 14px・READ MORE の上 14px / 内側 14px 28px (PC は上 28px / 内側 14px 57px) */
body.sec-blog .wpaw-pickup-slider__item-body { max-width: 100%; }
body.sec-blog .wpaw-pickup-slider__item-meta { margin-top: 14px; }
body.sec-blog .wpaw-pickup-slider__item-more { margin-top: 14px; padding: 14px 28px; }
@media (min-width: 64em) {
	body.sec-blog .wpaw-pickup-slider__item-more { margin-top: 28px; padding: 14px 57px; }
}

/* Snow Monkey 31 で大きく・濃くなった小さい文字を、前 (11) と同じに: 記事の日付・著者 12px、カードの日付・著者 10px、カードの抜粋 12px のグレー、
   トップのスライダーの日付 11px (31 は 14.2px・12.8px・14.2px の #333・12.8px) */
body.sec-blog .c-entry__meta,
body.sec-blog .c-entry__meta .c-meta { font-size: 12px; }
body.sec-blog .c-entry-summary__meta,
body.sec-blog .c-entry-summary__meta .c-meta { font-size: 10px; }
body.sec-blog .c-entry-summary__content { font-size: 12px; color: #888888; }
body.sec-blog .wpaw-pickup-slider .c-meta { font-size: 11px; }

/* 一覧のカードの見出し (元 トップ 20px・行間 1.6、関連記事 16px・行間 1.77) */
body.sec-blog .c-entry-summary__title { font-size: 16px; line-height: 1.5; }
/* 3 行で「…」(Snow Monkey の 40 文字で切る処理は rk-site-frame.php で止めている)。並んだカードで本文の始まりがそろうよう、2 行以下でも 3 行分の高さを取る */
body.sec-blog .c-entry-summary__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; min-height: 4.5em; }
/* カードの本文 (抜粋) も 3 行で「…」にして高さをそろえる */
body.sec-blog .c-entry-summary__content { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; min-height: 5.4em; line-height: 1.8; }
body.sec-blog .c-entry-summary__content > p { display: inline; margin: 0; }

/* 記事のタイトル (元 40px) と本文 (元 16px・行間 1.77)・本文の見出し (元 h2 24px) */
body.sec-blog .c-entry__title { font-size: 26px; line-height: 1.5; word-break: auto-phrase; }
body.sec-blog .c-entry__content { font-size: 15px; line-height: 1.9; }
body.sec-blog .c-entry__content > h2 { font-size: 20px; line-height: 1.6; }
body.sec-blog .c-entry__content > h3 { font-size: 17px; line-height: 1.6; }

@media (max-width: 63.9375em) {
	body.sec-blog .wpaw-pickup-slider .wpaw-pickup-slider__item-title { font-size: 18px; }
	body.sec-blog .c-entry-summary__title { font-size: 14px; }
	body.sec-blog .c-entry__title { font-size: 20px; }
	body.sec-blog .c-entry__content { font-size: 14px; }
	body.sec-blog .c-entry__content > h2 { font-size: 18px; }
	body.sec-blog .c-entry__content > h3 { font-size: 16px; }
}

/* ---------- 右カラム (サイドバー) ----------
   PC は幅 336px → 280px (本文は 約 607px → 約 663px)。文字も一回り小さく */
@media (min-width: 64em) {
	body[data-has-sidebar=true] .l-contents__inner > .l-contents__main { width: calc(100% - 280px - var(--_space, 1.76923rem) * 2 * var(--_margin-scale, 1)); }
	body[data-has-sidebar=true] .l-contents__inner > .l-contents__sidebar { width: 280px; }
}
body.sec-blog .l-contents__sidebar .c-widget__title { font-size: 14px; }                       /* 元 16px */
body.sec-blog .l-contents__sidebar li { font-size: 13px; line-height: 1.7; }                   /* 最近の投稿・カテゴリー・アーカイブ (元 14px) */
body.sec-blog .l-contents__sidebar .c-input-group__field { font-size: 13px; }                 /* 検索 (元 14px) */
body.sec-blog .l-contents__sidebar .tag-cloud-link { font-size: 11px !important; }            /* タグ (元 12px。style 属性に大きさが入るので !important) */

/* ---------- 関連記事: 4 列 → 2 列 (本文の幅が 約 663px なので 4 列だと 1 枚 約 170px で詰まって見えた) ---------- */
body.sec-blog .p-related-posts .c-entries__item { flex-basis: 50%; max-width: 50%; }

/* ---------- トップの Instagram 欄 (rk-site-frame.php が出す。サイトの TOP の #top-instagram と同じ見た目) ----------
   top.css を丸ごと読むとブログのほかの所に当たる (header・main・main a など) ので、この欄に要る指定だけを .rk-blog-instagram の中に写す。
   TOP 側 (top.css の .top-sec・.c-section-ttl・#top-instagram・.p-instagram) を直したら、ここも合わせる */
.rk-blog-instagram { --top-gutter: calc(100vw * 50 / 750); padding: 20vw var(--top-gutter); color: var(--c-ground); text-align: start; background: url("/common/img/top/bg_instagram@sp.webp") no-repeat center/cover; }
.rk-blog-instagram .top-sec__inner { width: 100%; max-width: 63.75rem; margin-inline: auto; }
.rk-blog-instagram .c-section-ttl { margin: 0 0 10.6666666667vw; color: var(--c-ground); text-align: center; }
.rk-blog-instagram .c-section-ttl > *::before,
.rk-blog-instagram .c-section-ttl > *::after { content: ""; display: block; height: 0; }
.rk-blog-instagram .c-section-ttl > *::before { margin-top: calc((1em - 1lh) / 2); }
.rk-blog-instagram .c-section-ttl > *::after { margin-bottom: calc((1em - 1lh) / 2); }
.rk-blog-instagram .c-section-ttl__label { margin: 0; padding-left: 0.2em; font-family: var(--f-num); font-size: 2.4vw; line-height: 1; letter-spacing: 0.2em; }
.rk-blog-instagram .c-section-ttl__main { margin: 0.3em 0; padding: 0 0 0 0.25em; border: 0; background: none; font-family: var(--f-en-main); font-size: 8.5333333333vw; font-weight: 400; line-height: 1; letter-spacing: 0.25em; color: inherit; }
.rk-blog-instagram .c-section-ttl__text { margin: 0; padding-left: 0.2em; font-family: var(--f-sans-jp); font-size: 2.6666666667vw; line-height: 1; letter-spacing: 0.2em; }
.rk-blog-instagram .p-instagram__accounts { display: grid; gap: 10.6666666667vw; }
.rk-blog-instagram .p-instagram__ttl { margin: 0; padding: 0; border: 0; background: none; font-family: var(--f-num); font-size: 5.6vw; font-weight: 400; line-height: 1; letter-spacing: 0.2em; text-align: center; color: inherit; }
.rk-blog-instagram .p-instagram__icon a { display: block; width: 4.8vw; height: 4.8vw; margin: 4vw auto; background: url("/common/img/common/icon_instagram-2075.svg") no-repeat center/contain; }
.rk-blog-instagram .p-instagram__name { margin: 0; font-family: var(--f-num); font-size: 2.9333333333vw; line-height: 1; letter-spacing: 0.2em; text-align: center; text-transform: uppercase; }
.rk-blog-instagram .p-instagram__name a { color: inherit; text-decoration: none; }
.rk-blog-instagram .p-instagram__list { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); gap: 0; margin: 0 0 9.3333333333vw; padding: 0; list-style: none; }
.rk-blog-instagram .p-instagram__item { margin: 0; }
.rk-blog-instagram .p-instagram__item:nth-child(n+7) { display: none; }
.rk-blog-instagram .p-instagram__link { display: block; aspect-ratio: 3/4; overflow: hidden; background: #F1F4F4; }
.rk-blog-instagram .p-instagram__image { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; }
@media (hover: hover) {
	.rk-blog-instagram .p-instagram__link:hover .p-instagram__image { transform: scale(1.06); opacity: 0.85; }
}
.rk-blog-instagram .p-instagram__link:focus-visible .p-instagram__image { transform: scale(1.06); opacity: 0.85; }
@media (min-width: 768px) {
	.rk-blog-instagram { --top-gutter: 24px; padding-block: min(7.8125vw, 6.25rem); background-image: url("/common/img/top/bg_instagram.webp"); }
	.rk-blog-instagram .c-section-ttl { margin-bottom: min(5.859375vw, 4.6875rem); }
	.rk-blog-instagram .c-section-ttl__label,
	.rk-blog-instagram .c-section-ttl__text { font-size: clamp(0.75rem, 0.9375vw, 0.75rem); }
	.rk-blog-instagram .c-section-ttl__main { margin: 0.2em 0; font-size: clamp(0.75rem, 4.296875vw, 3.4375rem); }
	.rk-blog-instagram .p-instagram__accounts { grid-auto-columns: 1fr; grid-auto-flow: column; gap: min(3.125vw, 2.5rem); }
	.rk-blog-instagram .p-instagram__ttl { font-size: clamp(0.75rem, 2.03125vw, 1.625rem); }
	.rk-blog-instagram .p-instagram__icon a { width: 1.5rem; height: 1.5rem; margin: min(1.5625vw, 1.25rem) auto; }
	.rk-blog-instagram .p-instagram__name { font-size: clamp(0.6875rem, 0.859375vw, 0.6875rem); }
	.rk-blog-instagram .p-instagram__list { margin-bottom: min(3.125vw, 2.5rem); }
}

/* ---------- 記事の目次の番号 ----------
   Snow Monkey は灰色の四角に白い小さな数字 (10px)。下層の「流れ」の STEP の数字と同じく、四角なしの Domaine・#A5B1B4 で「01」にする */
body.sec-blog .wpco .contents-outline a::before {
	content: counter(wpco, decimal-leading-zero);
	width: auto;
	min-width: 2em;
	height: auto;
	margin-top: 0;
	justify-content: flex-start;
	align-items: flex-start;
	background: none;
	font-family: var(--f-en-main);
	font-size: 15px;
	letter-spacing: 0.05em;
	line-height: inherit;
	color: var(--c-accent);
}

/* ---------- 記事の下の「ROYAL KAILA WEDDING」の箱 (ウィジェット) ----------
   見出しは しっぽり明朝、本文は小さく (元 見出し 24px・本文 16px)。本文は改行が入っているので、小さくすると途中の折り返しも減る */
body.sec-blog .wpaw-showcase__title { font-family: var(--f-serif-jp); font-weight: 700; font-size: 22px; letter-spacing: 0.1em; }
body.sec-blog .wpaw-showcase__lead { font-size: 13px; line-height: 1.9; }
@media (max-width: 63.9375em) {
	body.sec-blog .wpaw-showcase__title { font-size: 18px; }
}

/* ---------- 水色を下層のグレーに ----------
   Snow Monkey のアクセントカラー (カスタマイザーの #3399cc。カテゴリーのラベル・ボタン・スライダーの矢印・ページ送り・
   本文の h2 の左線など) と、そこから作られる濃淡を、下層 (subpage-2075.css) で使っている色に置き換える。
   カスタマイザーの設定は変えずに CSS で上書き (本番もこのプラグインを入れるだけで変わる) */
:root {
	--accent-color: #A5B1B4;            /* 下層の見出し・ボタン・バッジの色 (--c-accent) */
	--dark-accent-color: #7D8A8E;       /* 下層のリンクの色 */
	--light-accent-color: #C9CDCF;      /* 下層の罫線の色 */
	--lighter-accent-color: #DCE2E2;
	--lightest-accent-color: #E6ECEC;
	--sub-accent-color: #E6ECEC;        /* 元は #ccffff (メニューの「強調」項目にだけ使う) */
	--dark-sub-accent-color: #C9CDCF;
	--light-sub-accent-color: #F1F4F4;
	--lighter-sub-accent-color: #F1F4F4;
	--lightest-sub-accent-color: #F1F4F4;
}
/* エディターの色パレットの「アクセント」「サブアクセント」(has-accent-color-background-color など) も同じ色に */
:root, body {
	--wp--preset--color--accent-color: #A5B1B4;
	--wp--preset--color--sub-accent-color: #E6ECEC;
}
/* 右の「ROYAL KAILA WEDDING」の箱の地 (ウィジェットの設定 #c1dff2 が style 属性で入るので !important) */
.wpaw-showcase__mask { background-color: #E6ECEC !important; }

/* ---------- ボタン (下層の「プラン詳細はこちら」などと同じ形。design.md: 面 #B9C7C6・白文字・Noto 中太・字間 0.1em・角なし・高さ 44px 以上、
   右端から外へはみ出す短い横線 20px・1px・#DCE2E2) ----------
   記事の中のボタン (WordPress の編集画面で入れる Snow Monkey Blocks のボタン 162 個・標準のボタン。#3399cc や黒を選んだものもある)・
   「ロイヤルカイラ公式サイト」など。色・角丸・幅が style 属性に入っているものがあるので !important (記事のデータはそのまま)。
   スライダーの READ MORE (写真の上の白枠) は除く */
body.sec-blog .c-btn:not(.wpaw-pickup-slider__item-more),
body.sec-blog .smb-btn,
body.sec-blog .wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 280px;
	max-width: 100%;
	min-height: 44px;
	padding: 6px 24px;
	overflow: visible;
	border: 0;
	border-radius: 0 !important;
	background-color: #B9C7C6 !important;
	font-family: var(--f-sans-jp);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.1em;
	line-height: 1.4;
	color: #FFFFFF !important;
	box-shadow: none;
}
body.sec-blog .smb-btn { width: auto !important; }   /* 「幅広」(smb-btn--more-wider) などの幅の指定をやめて、下層と同じく 280px から文字に合わせて広がる形に */
body.sec-blog .smb-btn__label { font: inherit; letter-spacing: inherit; color: inherit !important; }
body.sec-blog .c-btn:not(.wpaw-pickup-slider__item-more)::after,
body.sec-blog .smb-btn::after,
body.sec-blog .wp-block-button__link::after { content: ""; position: absolute; top: 50%; right: -10px; width: 20px; height: 1px; background: #DCE2E2; }
body.sec-blog .c-btn:not(.wpaw-pickup-slider__item-more):hover,
body.sec-blog .smb-btn:hover,
body.sec-blog .wp-block-button__link:hover { opacity: 0.85; }
@media only screen and (max-width: 767px) {
	body.sec-blog .c-btn:not(.wpaw-pickup-slider__item-more),
	body.sec-blog .smb-btn,
	body.sec-blog .wp-block-button__link { min-width: min(280px, calc(100% - 20px)); max-width: calc(100% - 20px); white-space: normal; text-align: center; }   /* 右の横線がはみ出す分あける。長い文字は折り返す */
}
/* 検索窓も角を取る (角丸・影は使わない) */
body.sec-blog .c-input-group__field,
body.sec-blog .c-input-group__btn { border-radius: 0; }

/* 著者のアイコン (水色の丸に白い R) をグレーに。フィルターは rk-site-frame.php が出す SVG */
body.sec-blog img.avatar { filter: url(#rk-avatar-gray); }

/* マウスを乗せたときの下線 (common.css の a[href]:hover { text-decoration: underline }) は、ブログの部分 (ヘッダー・サブナビ・記事カード・
   右カラム・ボタン) では出さない。サイトのヘッダー・フッターは .l-container の外なのでそのまま */
body.sec-blog .l-container a[href]:hover { text-decoration: none; }
/* 本文の中の文字のリンクだけは、design.md のとおり いつも下線を付ける (マウスを乗せても消えない)。
   目次 (.contents-outline)・ボタン・ブログカード・画像のリンクには付けない */
body.sec-blog .c-entry__content :is(p, li, td, dd, blockquote, figcaption):not(.wp-oembed-blog-card-url-template) a[href]:not(:has(img)):not(.contents-outline a),
body.sec-blog .c-entry__content :is(p, li, td, dd, blockquote, figcaption):not(.wp-oembed-blog-card-url-template) a[href]:not(:has(img)):not(.contents-outline a):hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* マウスを乗せたときの影 (common.css の button:hover { box-shadow: 1px 1px 4px … }) を、ブログの中のボタン
   (カテゴリーの開閉の矢印・検索・スライダーの矢印など) では出さない。サイトのヘッダー・フッターは .l-container の外なのでそのまま */
body.sec-blog .l-container button:hover { box-shadow: none; }

/* ---------- サブナビの書体と色 (サイトのトンマナ: Noto Sans JP の黒) ---------- */
.l-header { --accent-color: #7D8A8E; }   /* 選択中・マウスを乗せたときの色。Snow Monkey の水色 (#3399cc) → サイトのリンクの色 */
.l-header { --wp--preset--color--sm-accent: #7D8A8E; }   /* Snow Monkey 31 から: マウスを乗せたときの色はこちらの変数 */
/* Snow Monkey 31 から: 今いるページの項目 (「ブログトップ」など) に色が付く → 前と同じく付けない (マウスを乗せたときだけ色) */
.l-header .p-global-nav .c-navbar__item[data-active-menu]:not(:hover) { color: inherit; }
.l-header .p-global-nav { color: #000000; }
.l-header .p-global-nav .c-navbar__item > a > span { font-family: var(--f-sans-jp); font-weight: 500; letter-spacing: 0.1em; }