@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================================
   南三陸観光ポータル英語版 ベーススタイル

   配色は INOW（inowkamikatsu.com）の温かいオフホワイト基調を踏襲しつつ、
   アクセントを山の琥珀色から三陸の海の藍鉄色に置き換えている。
   ========================================================================== */
.p-postSlider {
  padding: 0px;
}

:root {
  --mk-base: #f4f1eb; /* 温かいオフホワイト */
  --mk-base-deep: #e8e3d9; /* 一段落とした背景 */
  --mk-ink: #2b2926; /* 本文チャコール */
  --mk-ink-soft: #6b6459; /* 補助テキスト */
  --mk-accent: #1f4e5a; /* 三陸の海（見出し・リンク） */
  --mk-accent-soft: #3a7080;
  --mk-amber: #c8873c; /* CTA の差し色 */

  /*
	 * 見出し・ロゴ用のセリフ。
	 * 日本語は Shippori Mincho（しっぽり明朝）。線が繊細で
	 * Cormorant Garamond と並べても太さの差が出ない。
	 */
  --mk-serif:
    "Cormorant Garamond", "Shippori Mincho", "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN", serif;

  /*
	 * 本文・ナビ・ボタン用のサンセリフ。
	 * 日本語は Zen Kaku Gothic New。字面が整っていて Jost と揃う。
	 */
  --mk-sans:
    "Jost", "Zen Kaku Gothic New", "Yu Gothic", "YuGothic", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/*
 * SWELL の本文フォントをサンセリフに差し替える。
 *
 * ※ 変数（--swl-font_family）の上書きだけでは効かない。
 *    SWELL は body に font-family を直接書き出しており、
 *    その値は変数を参照していないため。body にも直接指定する。
 */
:root {
  --swl-font_family: var(--mk-sans);
}

body {
  font-family: var(--mk-sans);
}

/* --------------------------------------------------------------------------
   タイポグラフィ / 全体
   -------------------------------------------------------------------------- */

/*
 * 背景色と文字色はカスタマイザー（外観 > カスタマイズ > サイト全体設定）で
 * 指定する方針のため、CSS では持たない。
 */

/*
 * SWELL の既定は 700。セリフ体では太く見えるため 500 に落とす。
 * この指定は詳細度が高く、個別の見出しクラス（.mk-gate__title など）より
 * 優先されるので、サイト全体の見出しの太さはここで決まる。
 */
/*
 * SWELL の main.css が
 *   .post_content dt, .post_content h2, .post_content h3, .post_content h4
 *   { font-weight: 700 }
 * を持っている（詳細度 0-1-1）。要素セレクタでは勝てないため、
 * 同じ詳細度で受けて既定を 500 にする。
 *
 * ※ custom.css で個別に上書きするときは、これより強い詳細度が要る。
 *      NG  .mk-gate__title        { font-weight: 300 }   ← 0-1-0 で負ける
 *      OK  .post_content .mk-gate__title { font-weight: 300 }  ← 0-2-0
 */
.post_content dt,
.post_content h2,
.post_content h3,
.post_content h4 {
  font-weight: 500;
}

/*
 * 見出しの既定はサンセリフ。
 * セリフ（Cormorant Garamond / しっぽり明朝）はロゴとヒーローにだけ
 * 明示的に当てており、本文側には流さない。
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--mk-sans);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/*
 * 本文の書体は上の h1〜h6 と --swl-font_family で足りるため、
 * `.post_content h2` のような詳細度の高い指定は置かない。
 * 置くと `.mk-gate__title` のようなクラス指定（詳細度 0-1-0）が負けて、
 * custom.css でフォントを変えられなくなる。
 */

/*
 * ユーティリティクラス（mk-min / mk-go / mk-nospace / mk-lead /
 * mk-linkText / mk-zoom / mk-nozoom）は custom.css にまとめてある。
 * 変数 --mk-serif / --mk-sans はロゴ・ヒーローで使うのでここに残す。
 */

/* --------------------------------------------------------------------------
   トップへ戻るボタン

   SWELL 既定の影付きボタンをやめ、細い線だけの控えめな円にする。
   ホバーでインクを流し込む。
   -------------------------------------------------------------------------- */

#pagetop.c-fixBtn {
  width: 52px;
  height: 52px;
  background-color: transparent;
  border: 1px solid rgba(43, 41, 38, 0.22);
  color: var(--mk-ink);
  box-shadow: none;
  transition:
    background-color 0.3s,
    border-color 0.3s,
    color 0.3s;
}

#pagetop.c-fixBtn:hover {
  background-color: var(--mk-ink);
  border-color: var(--mk-ink);
  color: var(--mk-base);
}

/* --------------------------------------------------------------------------
   フッターメニュー
   各リンクが左右に罫線を持つため、両端にも線が出てしまうのを消す
   -------------------------------------------------------------------------- */

.l-footer__nav li:first-child a {
  border-left: none;
}

.l-footer__nav li:last-child a {
  border-right: none;
}

/* --------------------------------------------------------------------------
   ヒーロー（parts/top/main_visual.php）
   -------------------------------------------------------------------------- */

.mk-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh; /* モバイルのアドレスバーを考慮 */
  overflow: hidden;
  background-color: #14232a;
}

.mk-hero__media {
  position: absolute;
  inset: 0;
  pointer-events: none; /* 動画をクリックさせない */
}

/*
 * iframe を 16:9 のまま画面いっぱいに「カバー」させる。
 * 画面が横長なら幅基準、縦長なら高さ基準で拡大する。
 */
.mk-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw; /* 100vw の 9/16 */
  min-height: 100%;
  min-width: 177.78vh; /* 100vh の 16/9 */
  border: 0;
  object-fit: cover; /* video 要素のとき */
}

/* 静止画モード。ゆっくり寄っていくことで映像に近い印象を出す */
.mk-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  animation: mk-hero-zoom 24s ease-out forwards;
  will-change: transform; /* 独立レイヤーに載せて再描画を避ける */
}

@keyframes mk-hero-zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk-hero__image {
    animation: none;
  }
}

.mk-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 35, 42, 0.45) 0%,
    rgba(20, 35, 42, 0.15) 35%,
    rgba(20, 35, 42, 0.65) 100%
  );
}

.mk-hero__inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  /*
	 * ヘッダーのコンテナ幅にはあえて揃えず、画面幅基準（8vw）で広く取る。
	 * 揃えると窮屈に見え、全画面写真のダイナミックさが失われるため。
	 */
  padding: 0 8vw;
  color: #fff;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

/*
 * リード → 見出し → 本文 で字間と明度に差をつけ、視線の順序をつくる。
 * 見出しは Cormorant Garamond の細字が最も映えるので weight 300。
 */
.mk-hero__lead {
  margin: 0 0 1.6em;
  font-family: var(--mk-sans);
  font-size: clamp(10px, 0.85vw, 11.5px);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  opacity: 0.72;
}

/*
 * 2行のコピーを収めるため、1行だった頃より一段小さくしている。
 * 行間はやや広めに取って、2行が別々の文として読めるようにした。
 */
.mk-hero__title {
  font-family: var(--mk-serif);
  /*
   * px 指定。SWELL はスマホで html の font-size を 13.5px に落とすため、
   * rem のままだと小さい画面で意図より縮む。
   *   下限 30px（375px幅） / 4.2vw / 上限 62px
   */
  font-size: clamp(30px, 4.2vw, 62px);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: 0.01em;
  margin: 0;
}

/* 2行目（コロン以降）をわずかに落として主従をつける */
.mk-hero__title br + *,
.mk-hero__title {
  text-wrap: balance;
}

.mk-hero__text {
  max-width: 32em;
  margin: 0;
  font-family: var(--mk-sans);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 300;
  line-height: 1.95;
  letter-spacing: 0.03em;
  opacity: 0.88;
}

/*
 * スクロール指標。コピーの塊を下げたので、ぶつからないよう右端に置く。
 * 左のテキストと左右で釣り合う配置でもある。
 */
.mk-hero__scroll {
  position: absolute;
  right: 8vw;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.mk-hero__scrollLabel {
  font-family: var(--mk-sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  opacity: 0.75;
}

.mk-hero__scrollLine {
  position: relative;
  width: 1px;
  height: 64px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.35);
}

.mk-hero__scrollLine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  animation: mk-scroll-line 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes mk-scroll-line {
  0% {
    transform: translateY(-100%);
  }
  60% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk-hero__scrollLine::after {
    animation: none;
  }
}

@media (max-width: 959px) {
  .mk-hero__inner {
    bottom: 12%;
  }
  .mk-hero__scroll {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   ヘッダーの横幅

   SWELL は `.l-header .l-container { max-width:100% }` でヘッダーだけ
   全幅にしているため、コンテナ幅（--container_size）に戻す。
   上段（バー）と下段（ロゴ・ナビ）が同じ幅で揃う。
   -------------------------------------------------------------------------- */

.l-header .l-container {
  max-width: calc(
    var(--container_size, 1200px) + var(--swl-pad_container, 0px) * 2
  );
}

/* --------------------------------------------------------------------------
   グローバルナビ
   -------------------------------------------------------------------------- */

/*
 * ナビはサンセリフ（Jost）。
 * ロゴ＝セリフ / ナビ＝サンセリフで書体を分け、
 * 「ブランド」と「操作要素」の階層をつくっている。
 */
.c-gnav > li > a {
  font-family: var(--mk-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-left: 1.1em;
  padding-right: 1.1em;
}

/* 下線は細く短く。主張しすぎないホバー */
.c-gnav > li > a::after {
  height: 1px;
  background-color: currentColor;
}

/*
 * 上段の検索アイコンと下段のナビ末尾を、コンテナの右端で揃える。
 * 双方の末尾パディングを外すことで基準線を一致させている。
 */
@media (min-width: 960px) {
  .l-header .c-gnav > li:last-child > a {
    padding-right: 0;
  }
}

.l-header__bar .c-iconList__item:last-child .c-iconList__link {
  padding-right: 0;
}

/* --------------------------------------------------------------------------
   ロゴ（サイト名をワードマークとして扱う）
   -------------------------------------------------------------------------- */

/*
 * ロゴ。SWELL の `.-txt .c-headLogo__link { font-weight:500 }` に
 * 詳細度で勝つ必要があるため、セレクタを重ねている。
 */
.c-headLogo.-txt .c-headLogo__link,
.c-headLogo .c-headLogo__link,
.c-headLogo .c-headLogo__title {
  font-family: var(--mk-serif);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.22em;
  white-space: nowrap;
}

/*
 * ロゴ上の地名表示。
 * SWELL のロゴ出力にフックが無いため擬似要素で載せている。
 * トップページでは h1 の中に入るので、読み上げ順も
 * 「Tohoku : Miyagi → MINAMISANRIKU」となり自然。
 */
/* SWELL 側で .c-headLogo は flex/row。縦積みにするため向きだけ変える */
.c-headLogo {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.c-headLogo::before {
  content: "Tohoku : Miyagi";
  font-family: var(--mk-sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 12px; /* ロゴ本体と近すぎないよう間を取る */
  opacity: 0.68;
}

/* 追従ヘッダーは高さを抑えたいので地名は出さない */
.l-fixHeader .c-headLogo::before {
  display: none;
}

/* --------------------------------------------------------------------------
   トップページのヘッダー透過

   SWELL の「ヘッダー透過」設定を有効にしても該当CSSが出力されなかったため、
   子テーマ側で実装している（Git管理下に置けるという利点もある）。
   スクロールして固定ヘッダーが出た後は SWELL 標準の見た目に戻す。
   -------------------------------------------------------------------------- */

.home .l-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}

.home .l-header__inner,
.home .l-header__bar,
.home .l-header__logo,
.home .l-header__center {
  background: transparent;
}

.home .l-header .c-headLogo__link,
.home .l-header .c-headLogo,
.home .l-header .c-gnav > li > a,
.home .l-header .c-iconBtn,
.home .l-header .c-iconList__link,
.home .l-header .mk-headIcon,
.home .l-header .w-header {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* ヘッダー分の高さを打ち消してヒーローを画面最上部から始める */
.home .l-topTitleArea,
.home .l-header + * {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   追従ヘッダー（#fix_header / .l-fixHeader）

   SWELL が html[data-scrolled] で表示を切り替えるため、
   ここでは見た目だけを整えている。
   背景をぼかした半透明にして、ヒーローから自然につながるようにする。
   -------------------------------------------------------------------------- */

.l-fixHeader {
  border-bottom: 1px solid rgba(43, 41, 38, 0.09);
  box-shadow: none;
}

/*
 * 管理バーの分の位置合わせは SWELL 本体が済ませている。
 *
 *   .admin-bar   { --swl-adminbarH: var(--wp-admin--admin-bar--height, 32px) }
 *   .l-fixHeader { margin-top: var(--swl-adminbarH, 0) }
 *
 * ここで top をずらすと margin-top と二重に効いて、
 * ログイン中だけ追従ヘッダーが 64px 下がる。指定しないこと。
 */

/* --------------------------------------------------------------------------
   管理バーの表示トグル（ログイン中のみ / functions.php で出力）
   -------------------------------------------------------------------------- */

.mk-hide-adminbar #wpadminbar {
  display: none !important;
}

/* WordPress が html に付ける margin-top を打ち消す（同等以上の詳細度が必要） */
html.mk-hide-adminbar {
  margin-top: 0 !important;
}

/*
 * 管理バーを隠したら、SWELL が確保している管理バー分の高さも 0 にする。
 * これを忘れると追従ヘッダーが 32px 浮いたままになる。
 * 変数を潰すので、追従ヘッダー以外（スマホの追従ヘッダー等）にもまとめて効く。
 */
.mk-hide-adminbar .admin-bar {
  --swl-adminbarH: 0px;
}

#mk-adminbarToggle {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 100000;
  padding: 7px 14px;
  font-family: var(--mk-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #fff;
  background-color: rgba(43, 41, 38, 0.72);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.25s;
}

#mk-adminbarToggle:hover {
  opacity: 1;
}

/* SWELL は ::before に背景色を敷いているのでそこを置き換える
 *
 * 透過率は指定しない。
 * SWELL がカスタマイザー（ヘッダー > ヘッダーの追従設定 >
 * 「追従ヘッダー（PC）の背景不透明度」）の値を
 * `.l-fixHeader::before { opacity: … }` として head に出力するので、
 * ここで opacity を書くと（読み込み順であとになるため）それを潰してしまう。
 * 色だけを指定して、濃さの調整は管理画面に任せる。
 *
 * backdrop-filter は使わない。
 * ヒーローのズームアニメーションと重なると毎フレームぼかし直しが走り、
 * 合成処理が破綻してページが固まるため。
 */
.l-fixHeader::before {
  background-color: var(--mk-base);
}

.l-fixHeader__inner {
  min-height: 64px;
}

/* 色と太さは custom.css の「追従ヘッダーのロゴ」で指定している */
.l-fixHeader .c-headLogo__link,
.l-fixHeader .c-headLogo {
  font-size: 18px;
  letter-spacing: 0.2em;
  text-shadow: none;
}

.l-fixHeader .c-gnav > li > a {
  color: var(--mk-ink);
  text-shadow: none;
}

/* --------------------------------------------------------------------------
   ヘッダー内ボタン（head_box ウィジェット）
   -------------------------------------------------------------------------- */

.w-header__inner,
.mk-headBar {
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   ヘッダーバー（上段のユーティリティ行 / mk_head_bar ウィジェット）

   Instagram · Downloads · Contact · 検索 の順に並べる。
   補助導線なので視覚的な重さは抑え、Contact だけ細いピルにして
   優先順位を1段だけ上げている。
   -------------------------------------------------------------------------- */

/*
 * ボタンの上下の余白。
 * 上は画面端（見えない境界）、下はボタンの枠線とナビ文字（見える要素同士）
 * のため、数値を揃えると下が広く感じる。下を小さめに取って釣り合わせている。
 */
.l-header__bar {
  padding: 28px 0 10px;
}

.mk-headBar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  margin-right: 10px;
}

/* 画面には出さず、読み上げにだけ残す */
.mk-srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ナビゲーションメニューのウィジェットを横並びにする */
.mk-headBar .widget_nav_menu ul {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-headBar .widget_nav_menu li {
  margin: 0;
  padding: 0;
}

.mk-headBar .widget_nav_menu li::before {
  content: none; /* SWELL のリストマーカーを消す */
}

/*
 * ロゴの縦位置。
 * バーの padding とは独立して調整できるよう margin-top で持ち上げている
 * （行間を変えてもロゴがつられて動かない）。
 */
@media (min-width: 960px) {
  .-series .l-header__logo {
    padding: 0 0 14px;
    margin-top: -20px;
    align-items: flex-start;
  }
}

.mk-headLink {
  font-family: var(--mk-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.25s;
}

.mk-headLink:hover {
  opacity: 0.6;
}

/*
 * Instagram などのアイコンリンク。
 * リンク色を継承させず親の文字色に揃える。
 *
 * ボタン・Instagram・検索はそれぞれ別の要素から出力されるため
 * （メニューウィジェット / HTMLウィジェット / SWELLのアイコンリスト）、
 * 箱の高さをボタンと同じ 30px に統一しないと数pxずれる。
 */
.mk-headBar__item,
.l-header__bar .c-iconList {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.mk-headIcon,
.l-header__bar .c-iconList__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.mk-headIcon {
  width: 22px;
  color: inherit;
  transition: opacity 0.25s;
}

.mk-headIcon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.mk-headIcon:hover {
  opacity: 0.65;
}

/*
 * Downloads / Contact。細い線のピルにして、面で塗らず品を保つ。
 * 管理画面のメニュー（ヘッダー内ウィジェット）から出力される
 * リンクにも同じ見た目を当てている。
 */
.mk-headBtn,
.mk-headBar .widget_nav_menu a {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  font-family: var(--mk-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition:
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s;
}

.mk-headBtn:hover,
.mk-headBar .widget_nav_menu a:hover {
  background-color: var(--mk-ink);
  border-color: var(--mk-ink);
  color: var(--mk-base);
}

/* ヒーローに重なっている間は白の細線 */
.home .l-header .mk-headBtn,
.home .l-header .mk-headBar .widget_nav_menu a {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  text-shadow: none;
}

.home .l-header .mk-headBtn:hover,
.home .l-header .mk-headBar .widget_nav_menu a:hover {
  background-color: #fff;
  border-color: #fff;
  color: var(--mk-ink);
  text-shadow: none;
}

/* ==========================================================================
   ページ上部ギャラリーの「+N」ボタン（assets/js/pagetop-gallery.js と対で使う）

   ボタンの中身は投稿本文に「ギャラリーを見る」という日本語で入っていて、
   JSが枚数を数えてから「+3」などに書き換える。
   何もしないと、英語サイトなのに読み込み直後だけ日本語が見えてしまう。

   そこで最初は隠しておき、JSが書き換え終えてから見せる。
   visibility なので場所は確保されたまま＝出たときに行がずれない。

   【注意】 pagetop-gallery.js が読み込まれないとボタンは出ない（日本語が出るよりは良い、
      という判断でこうしている）。ボタンが出ないときは、まずJSの404を疑う。
   ========================================================================== */

.open_pagetop_gallery_area {
  visibility: hidden;
}

/*
 * PHPが出力したボタン（functions.php の render_block）は、
 * 数字も表示/非表示もサーバー側で確定しているので最初から見せてよい。
 */
.open_pagetop_gallery_area.-auto {
  visibility: visible;
}

/*
 * 画面幅で並ぶ枚数が変わるぶん、数字も変わる。
 * PHPは画面幅を知らないので両方を出しておき、ここで出し分ける。
 *   601px以上 … 3枚並ぶ → 残りは (枚数 - 3)
 *   600px以下 … 1枚並ぶ → 残りは (枚数 - 1)
 * 【注意】 この 600px は assets/js/pagetop-gallery.js と揃えている。片方だけ変えないこと。
 */
@media (min-width: 601px) {
  .mk-galleryMore__sp {
    display: none;
  }
  /* PCでは全部見えているので、ボタン自体を出さない */
  .open_pagetop_gallery_area.-hidePc {
    display: none;
  }
}

@media (max-width: 600px) {
  .mk-galleryMore__pc {
    display: none;
  }
}

/* ==========================================================================
   固定ページ本文（.post_content）のスタイルは持たない

   トップページを含む固定ページの余白・背景・段組みは、
   SWELL のブロック設定（幅・PADDING・カラー）で組む方針のため、
   子テーマ側では一切指定しない。
   ここに CSS を足すと、ブロック側の設定が効かなくなる箇所が出る。
   ========================================================================== */


/* ==========================================================================
   カスタム投稿タイプは日付を出さない

   VOICE & NEWS（通常の投稿）は「いつの記事か」に意味があるが、
   STAY / FOOD / DISCOVER MINAMISANRIKU / OTHER AREA / EXPERIENCE は
   施設・場所の紹介で、投稿日や更新日に意味が無い（先方の指摘・2026-09-16）。

   ここで消すのはタイトル横の大きい日付。
   タイトル下の「公開日・更新日」の行は functions.php で出力ごと止めている
   （投稿タイプの一覧もそちらにある）。

   【注意】 消し方は SWELL 本体と同じ（カスタマイザーで日付表示を切ったときに
      SWELL が出すCSSと同じ指定）。タイトルの位置はこれで正しく詰まる。
   ========================================================================== */

:is(.single-stay, .single-food, .single-spot, .single-nearby, .single-experience) .c-postTitle__date {
  display: none;
}