:root {
  /*
  * pxベースで値を指定し、calc(値 * var(--rem))でremに変換するための変数
  * 例: calc(40 * var(--rem)) → 2.5rem
  */
  --rem: calc(1rem / 16);
  /* フォント */
  --ff-gothic: "Fjalla One", sans-serif;
  --ff-shippori: 'ShipporiGothicB2', sans-serif;
  --ff-base: var(--ff-gothic);
  --fw-base: 400;
  /* カラー */
  --color-main: #111;
  --color-base: #F5F5F5;
  --color-accent: #BD293C;
}
/* 参考：https://speakerdeck.com/tak_dcxi/2025nian-noz-indexshe-ji-wokao-eru */
/* 絶対的なz-index→固定配置の重ね順（追従ヘッダーやその他fixedやstickyな要素） */
/* 最前面 */
@property --stack-top {
  syntax: "<integer>";
  inherits: false;
  initial-value: 9999;
}
/* ドロワーボタン */
@property --stack-drawer-button {
  syntax: "<integer>";
  inherits: false;
  initial-value: 50;
}
/* ドロワーメニュー */
@property --stack-drawer-menu {
  syntax: "<integer>";
  inherits: false;
  initial-value: 40;
}
/* 固定ヘッダー */
@property --stack-header {
  syntax: "<integer>";
  inherits: false;
  initial-value: 30;
}
/* ページトップボタン */
@property --stack-page-top {
  syntax: "<integer>";
  inherits: false;
  initial-value: 20;
}
/* 固定フッター */
@property --stack-footer {
  syntax: "<integer>";
  inherits: false;
  initial-value: 10;
}
/* 相対的なz-index→コンポーネントルートを基準とした重ね順（Blockを基準としたElementの重ね順） */
/* 前面 */
@property --stack-forwards {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}
/* 背面 */
@property --stack-backwards {
  syntax: "<integer>";
  inherits: false;
  initial-value: -1;
}
/*! kiso.css v1.2.4 | MIT License | https://github.com/tak-dcxi/kiso.css */
/* ======================================================
  MARK: 全体共通
====================================================== */
*,
::before,
::after {
  /*
  * 要素の指定サイズに `padding` と `border` を含める。
  * デフォルトで `box-sizing: border-box;` を指定しておくと、
  * 特に `width: 100%;` を指定する場合などにスタイリングが非常に楽になるため推奨される。
  */
  box-sizing: border-box;
}
/* ======================================================
  MARK: ドキュメント・body要素
====================================================== */
:where(:root) {

  /* 句読点が隣接した際の空白や行頭の空白を除去する */
  text-spacing-trim: trim-start;

  /* 日本語と英数字の間に適切なスペースを自動挿入し、可読性を向上させる */
  text-autospace: normal;

  /*
  * モバイルブラウザには文字が小さくなりすぎないよう自動調整する機構がある
  * 意図しない文字サイズ変更を防ぐために制御する
  */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /*
  * スクロールバーの表示／非表示によるレイアウトシフトを防ぐ
  * Chrome 145以降では、vw計算にも影響し横スクロール防止にもなる
  */
  /* scrollbar-gutter: stable; */

  /* iOSでのタップ時のハイライト表示を抑制する */
  -webkit-tap-highlight-color: transparent;
  /* Safariでは `font-family` 未指定時に serif が適用されるため、デフォルトとして `sans-serif` を指定 */
  font-family: sans-serif;

  /* 厳密な禁則処理を行い、誤読を防ぐ */
  line-break: strict;

  /*
  * アクセシビリティの観点から、段落内の行間は文字サイズの1.5倍以上が推奨される
  * @see https://waic.jp/translations/WCAG21/#visual-presentation
  */
  line-height: 1.5;

  /* 英単語の途中でも折り返しを許可し、flexやgridなどでのはみ出しを防ぐ */
  overflow-wrap: anywhere;
}
:where(body) {

  /* UAスタイルシートで指定されている `margin` は不要な場合が多いためリセット */
  margin: unset;
  /*
  * スティッキーフッターを作る際など、最小高さが必要になることが多いため、
  * 動的ビューポート高さを指定する
  */
  min-block-size: 100dvb;
}
/* ======================================================
  MARK: セクション
======================================================*/
:where(:is(h1, h2, h3, h4, h5, h6):lang(en)) {
  /* 最終行が1単語のみになる（オーファン）状態を防ぐ */
  text-wrap: pretty;
}
:where(h1) {
  font-size: 2em;
  /*
  * セクショニング要素内の `h1` に対するUAスタイルを調整
  * font-size や margin が無い場合に DevTools で警告が出るのを防ぐ
  * @see https://html.spec.whatwg.org/#sections-and-headings
  */
  margin-block: 0.67em;
}
:where(h2, h3, h4, h5, h6) {
  /* UAスタイルシートの `margin-block` は不要なことが多いためリセット */
  margin-block: unset;
}
:where(search) {
  /*
  * `<search>` 要素は Safari 17 以降でサポートされている
  * 未対応環境でインライン要素として表示されるのを防ぐ
  */
  display: block flow;
}
/* ======================================================
  MARK: グルーピングコンテンツ
====================================================== */
:where(p, blockquote, figure, pre, address, ul, ol, dl, menu) {
  /* UAスタイルシートの `margin-block` をリセット */
  margin-block: unset;
}
:where(blockquote, figure) {
  /* UAスタイルシートの `margin-inline` をリセット */
  margin-inline: unset;
}
:where(p:lang(en)) {
  /*
  * 英文では最終行が1単語だけになる（widow / orphan）と可読性が下がるため防止する
  */
  text-wrap: pretty;
}
:where(address:lang(ja)) {
  /* 日本語では斜体表現が一般的でないため `font-style` をリセット */
  font-style: unset;
}
:where(ul, ol, menu) {

  /*
  * Safariでは `list-style: none` を使うとスクリーンリーダーがリストを読み上げなくなる
  * アクセシビリティを保ったままマーカーを非表示にするため `list-style-type: ""` を使用
  * @see https://matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics
  */
  list-style-type: "";
  /* UAスタイルシートの `padding-inline-start` をリセット */
  padding-inline-start: unset;
}
:where(dt) {
  /* `<dt>` は太字表示されることが一般的なためデフォルトで太字にする */
  font-weight: bolder;
}
:where(dd) {
  /* UAスタイルシートの `margin-inline-start` をリセット */
  margin-inline-start: unset;
}
:where(pre) {
  /*
  * `text-spacing-trim` は `<pre>` 内でも影響するため、
  * 表示のズレを防ぐ目的で明示的に `space-all` を指定し継承を防ぐ
  */
  text-spacing-trim: space-all;

  /* 等幅フォントでのズレを防ぐため `text-autospace` を無効化 */
  text-autospace: no-autospace;
}
/* ======================================================
  MARK: テキストレベルセマンティクス
====================================================== */
:where(em:lang(ja)) {
  /* 日本語では強調は太字が一般的なため太字にする */
  font-weight: bolder;
}
:where(:is(i, cite, em, dfn):lang(ja)) {
  /* 日本語では斜体表現が一般的でないためリセット */
  font-style: unset;
}
:where(u, s, del, ins) {
  /* 下線が連続した場合に横線のみを分離し、位置は自動調整 */
  text-decoration-inset: auto;
}
:where(code, kbd, samp) {

  /* 等幅フォントで問題が起きやすいためフォント機能設定をリセット */
  font-feature-settings: initial;
  /*
  * Tailwind を参考にした等幅フォント指定
  * @see https://tailwindcss.com/docs/font-family
  */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* UAスタイルシートの `font-size` をリセットし継承させる */
  font-size: unset;

  /*
  * プログラミング用フォントでの合字（=> が ⇒ になる等）を防ぐ
  */
  font-variant-ligatures: none;
  font-variation-settings: initial;
}
:where(abbr[title]) {
  text-decoration-inset: auto;
  cursor: help;
  /*
  * `<abbr title>` はアクセシビリティ面で一貫したサポートがない
  * すべてのブラウザで点線下線を表示し、カーソルを変更する
  * @see https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
  */
  text-decoration-line: underline;
  text-decoration-style: dotted;
}
:where(time) {
  /* 日付表記ではスペースを入れないため `no-autospace` を指定 */
  text-autospace: no-autospace;
}
/* ======================================================
  MARK: リンク
====================================================== */
:where(a) {
  /*
  * UAスタイルの `color` はそのまま使われることが少ないためリセット
  * iOS版Firefoxで非リンク文字にも色が適用される問題への対策
  */
  color: unset;
}
:where(a:any-link) {

  /* 下線位置を自動調整 */
  text-decoration-inset: auto;
  /*
  * 下線は有用な場合もあるが邪魔になることが多いためデフォルトでは無効化
  * 必要に応じて `text-decoration-line: revert;` で復活可能
  */
  text-decoration-line: unset;

  /* 下線の太さをフォント依存にする */
  text-decoration-thickness: from-font;
}
/* ======================================================
  MARK: その他
====================================================== */
:where(:disabled, [aria-disabled="true" i]) {
  /* 非活性要素であることを示すためデフォルトカーソルにする */
  cursor: default;
}
[hidden]:not([hidden="until-found" i]) {
  /* 非表示要素が確実に表示されないようにする */
  display: none !important;
}
:where(:any-link, :enabled, summary) {
  --default: initial;
  --hover: ;

  &:focus-visible {
    --default: ;
    --hover: initial;
  }
}
/* 使い方 */
/* .button {
  color: var(--default, #246A92) var(--hover, #FFF);
  background-color: var(--hover, #246A92);
  border: 2px solid var(--hover, #246A92);
} */
/* フォントファイル「Shippori Gothic B2」 */
@font-face {
  font-display: swap;
  font-family: 'ShipporiGothicB2';
  font-style: normal;
  font-weight: 700;
  src: url('https://irodori-x.com/wp-content/themes/irodori-2025/assets/fonts/ShipporiGothicB2-Bold.ttf') format('truetype');
}
*,
::before,
::after {
  --clamp-root-font-size: 16;
  --clamp-slope: calc((var(--clamp-max) - var(--clamp-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)));
  --clamp-y-axis-intersection: calc(var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min)));
  --clamp-preffered-value: calc(var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) + (var(--clamp-slope) * 100vi));
  --clamp: clamp(calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
      var(--clamp-preffered-value),
      calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size))));
  font-size: var(--clamp);
}
:where(body) {
  /* スマホデザインカンプの横幅 */
  --clamp-viewport-min: 390;
  /* PCデザインカンプの横幅 */
  --clamp-viewport-max: 1440;
  /* 個別に指定していない箇所のフォントサイズは14〜16pxの間で可変 */
  --clamp-min: 14;
  --clamp-max: 16;
  font-feature-settings: "palt";
  background-color: var(--color-base);
  color: var(--color-main);
  font-family: var(--ff-base);
  font-weight: var(--fw-base);

  &:has(.bl_micromodalSlide#modal-filter[aria-hidden="false"]) {
    & .bl_filterSearch_filterBtn {
      background-color: var(--color-main);
      border: 1px solid var(--color-main);
      color: #FFF;

      & path {
        stroke: #FFF;
      }
    }

    & .bl_filterSearch_searchBtn {
      pointer-events: none;
    }
  }

  &:has(.bl_micromodalSlide#modal-search[aria-hidden="false"]) {
    & .bl_filterSearch_searchBtn {
      background-color: var(--color-main);
      border: 1px solid var(--color-main);

      & path {
        fill: #FFF;
      }
    }

    & .bl_filterSearch_filterBtn {
      pointer-events: none;
    }
  }

  &:has(.bl_postBody) .bl_fixedCopy {
    opacity: 0;
    visibility: hidden;
  }
}
:where(img) {
  font-style: italic;
}
:where(:focus):not(:where(:focus-visible)) {
  outline: none;
}
:where(:focus-visible) {
  outline: 2px solid #005FCC;
  outline-offset: -2px;
}
:where(a, button) {
  transition: background-color .4s, border-color .4s, color .4s, opacity .4s;
}
.ly_main {
  background-color: var(--color-base);
  margin-block-start: 6.25rem;
  min-block-size: inherit;
}
.ly_mv {
  padding-block-start: .6rem;
}
.ly_mv_inner {
  inline-size: min(100%, 390px);
  margin-inline: auto;
  padding-inline: 15px;
  position: relative;

  &::before {
    --clamp-min: 12;
    --clamp-max: 16;
    content: "Pick Up";
    inset-block-end: -2.3rem;
    inset-inline-start: 12%;
    position: absolute;
    z-index: var(--stack-forwards);
  }

  &::after {
    background: url(../images/image_frame.svg) no-repeat center / cover;
    block-size: 12.5625rem;
    content: "";
    inline-size: 18.375rem;
    inset-block-end: -15.3rem;
    inset-inline-start: 50%;
    position: absolute;
    translate: -50% 0;
  }
}
.ly_cont {
  padding-block: 5.6875rem 3.75rem;

  & .bl_cardUnit {
    margin-block-start: .75rem;
  }
}
.ly_inner {
  inline-size: min(100%, 1080px);
  margin-inline: auto;
  padding-inline: 15px;
}
.ly_post,
.ly_page {
  padding-block-end: 1.5rem;
}
.ly_post_inner,
.ly_page_inner,
.ly_404_inner {
  inline-size: min(100%, 680px);
  margin-inline: auto;
  padding-inline: 15px;
}
.ly_about {
  padding-block-end: 3.05rem;
}
.ly_about_inner,
.ly_comment_inner,
.ly_related_inner {
  inline-size: min(100%, 1300px);
  margin-inline: auto;
  padding-inline: 15px;
}
.ly_about_inner>.bl_profileInfo {
  margin-block-start: 1rem;
}
.ly_comment {
  display: none !important;
  padding-block-end: 1.5625rem;

  &+.ly_back .ly_back_inner {
    padding-block-start: 2.1875rem;
  }
}
.ly_back {
  padding-block-end: 2.1875rem;
}
.ly_back_inner {
  display: block grid;
  inline-size: 93%;
  margin-inline: auto;
  place-content: center;

}
.ly_related {
  background-color: #FFF;
  padding-block: 1.562rem 4.25rem;
  position: relative;

  &:has(:not(.bl_related_empty)) {
    &::before {
      background-color: currentColor;
      block-size: 1px;
      content: "";
      inline-size: 100dvi;
      inset-block-start: 9.7rem;
      inset-inline-start: 0;
      position: absolute;
    }
  }
}
.ly_category,
.ly_taxonomy,
.ly_results,
.ly_author,
.ly_404 {
  padding-block: 1.5625rem;
}
.ly_auhor {
  background-color: #FFF;
  padding-block: 2.5rem 5.1rem;
}
.ly_auhor_inner {
  inline-size: min(100%, 1100px);
  margin-inline: auto;
  padding-inline: 15px;
}
.ly_page_inner>*+* {
  margin-block-start: 1.5625rem;
}
.ly_results+.ly_back .ly_back_inner,
.ly_404+.ly_back .ly_back_inner {
  padding-block-start: 4.4375rem;
}
/* Favorites カスタムスタイル */
.simplefavorite-button.preset {
  align-items: center;
  background: none !important;
  border: unset !important;
  border-radius: unset !important;
  box-shadow: unset !important;
  display: block flex !important;
  font-size: 0;
  padding: .2rem 0 !important;
  z-index: var(--stack-forwards);

  &::before {
    background-position: center;
    background-size: cover;
    content: "";
    transition: background-image .4s;
  }
}
.sf-icon-love {
  display: none !important;
}
.simplefavorite-button-count {
  color: #BBB;
  font-family: var(--ff-base);
}
.bl_splide {
  margin-block-start: 2.9375rem;

  & .splide__arrows {
    column-gap: .75rem;
    display: block grid;
    grid-template-columns: 1rem auto 1rem;
    inline-size: fit-content;
    inset-block-start: -2rem;
    inset-inline: 0;
    margin-inline: auto;
    place-items: center;
    position: absolute;
  }

  & .splide__arrow {
    background-color: var(--color-main);
    block-size: 1rem;
    display: block grid;
    inline-size: 1rem;
    opacity: 1;
    place-content: center;
    position: initial;
    transform: translateY(0);

    &::before {
      block-size: .3125rem;
      content: "";
      inline-size: .3125rem;
    }

    & svg {
      display: none;
    }
  }

  & .splide__arrow--prev::before {
    border-block-end: 1px solid #FFF;
    border-inline-start: 1px solid #FFF;
    rotate: 45deg;
    translate: 1px;
  }

  & .splide__arrow--next::before {
    border-block-end: 1px solid #FFF;
    border-inline-end: 1px solid #FFF;
    rotate: -45deg;
    translate: -1px;
  }

  & .bl_splide_counter {
    column-gap: .1rem;
    display: inherit;
    grid-template-columns: repeat(3, 1fr);
    letter-spacing: calc(-2em / 1000);
    line-height: 1.2;
    place-items: center;
  }

  & .bl_splide_counter_num {
    --clamp-min: 12;
    --clamp-max: 16;
  }

  & .bl_splide_counter_sep {
    --clamp-min: 10;
    --clamp-max: 14;
  }

  & .bl_card {
    row-gap: unset;
  }

  & .bl_card_imgWrapper {
    block-size: auto;
    opacity: .6;
    scale: .8;
    transition: opacity .4s, scale .4s;

    & img {
      aspect-ratio: 280/187;
    }
  }

  & .bl_card_ttl,
  & .bl_card_meta {
    opacity: 0;
    transition: opacity .4s;
  }

  & .bl_card_meta {
    grid-template-columns: 1fr auto;
  }

  & .bl_card_meta_info {
    align-self: end;
    grid-template: "date" auto / auto;
  }

  & .bl_card_meta_info_date {
    --clamp-min: 10;
    --clamp-max: 10;
  }

  & .bl_card_ttl {
    margin-block-start: .5rem;
  }

  & .bl_card_ttl_link {
    --clamp-min: 14;
    --clamp-max: 20;
    font-family: var(--ff-shippori);
  }

  & .splide__slide {
    inline-size: 18.3125rem !important;

    &.is-active {
      & .bl_card_imgWrapper {
        opacity: 1;
        scale: .95;
      }

      & .bl_card_ttl,
      & .bl_card_meta {
        opacity: 1;
      }
    }
  }
}
/* wpDiscuz カスタムスタイル */
#wpdcom {
  padding: unset !important;
}
#wpdcom .wpd-form-head {
  display: none !important;
}
.wpd_comm_form.wpd_main_comm_form {
  display: block grid;

  &::before {
    content: "コメントする";
  }
}
.wc_comment.wpd-field {
  --clamp-min: 16;
  --clamp-max: 16;
  font-family: var(--ff-shippori);
  inline-size: 100%;
  line-height: 1.5 !important;
  min-block-size: 6.25rem !important;
  padding-block: .7em;
  padding-inline: .5em;

  &::placeholder {
    color: #BBB;
  }
}
#wpdcom .wc-field-submit {
  justify-content: center !important;
}
#wpdcom .wc-field-submit input[type="submit"] {
  --clamp-min: 14;
  --clamp-max: 14;
  appearance: none;
  background-color: var(--default, #000) var(--hover, #FFF);
  border: 1px solid #000;
  color: var(--default, #FFF) var(--hover, #000);
  cursor: pointer;
  font-family: var(--ff-base);
  margin-inline-start: unset !important;
  padding-block: .25em;
  padding-inline: 1.07em;
  transition: background-color .4s, color .4s;
}
#wpdcom .wpd-form-row .wpdiscuz-item input {
  --clamp-min: 16;
  --clamp-max: 16;
  font-size: var(--clamp);
}
#wpdcom .wpd-comment-header .wpd-comment-author {
  color: var(--color-main);
}
#wpdcom .wpd-comment-date {
  color: #BBB;
}
#wpdcom .wpd-comment-text p {
  color: var(--color-main);
  font-family: var(--ff-shippori);
  line-height: 1.6 !important;
  margin-block-start: 1em !important;
}
#wpdcom .wpd-comment .wpd-reply-to {
  font-style: unset !important;
}
#wpdcom .wpd-comment-footer .wpd-vote-up svg,
#wpdcom .wpd-comment-footer .wpd-vote-down svg {
  display: none;
}
#wpdcom .wpd-comment-footer .wpd-vote-up {
  background-image: url(../images/icon_heart-outline.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  block-size: 1rem !important;
  inline-size: 1.125rem !important;
}
#wpdcom .wpd-comment-footer .wpd-reply-button svg,
#wpdcom .wpd-comment-footer .wpd-reply-button span {
  display: none;
}
#wpdcom .wpd-comment-footer .wpd-reply-button {
  background-image: url(../images/icon_reply.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  block-size: 1.0625rem;
  inline-size: 1.0625rem;
}
#wpdcom .wpd-comment-footer {
  column-gap: .375rem;
  display: inline flex !important;
  flex-direction: row-reverse !important;
}
#wpdcom .wpd-comment-footer .wpd-vote {
  padding-inline-end: unset !important;
}
#wpdcom .wmu-attached-images .wmu-attachment > a{
  /* display: none; */
}
.bl_mv {
  display: block grid;
  place-items: center;
  row-gap: .1rem;
}
.bl_mv_logo {
  inline-size: 7.5rem;
  margin-block: unset;

  & img {
    inline-size: 100%;
  }
}
.bl_mv_read {
  --clamp-min: 10;
  --clamp-max: 12;
  font-family: var(--ff-shippori);
  letter-spacing: calc(50em / 1000);
  line-height: 1.6;
  text-align: center;
}
.bl_fixedCopy {
  display: inline flow-root;
  inset-block-start: 6.7rem;
  inset-inline-start: 1rem;
  position: fixed;
  z-index: var(--stack-header);
}
.bl_filterSearch {
  column-gap: .625rem;
  display: block flex;
  inset-block-start: 4.4375rem;
  inset-inline-end: 15px;
  justify-content: end;
  position: fixed;
  z-index: var(--stack-drawer-button);
}
.bl_filterSearch_filterBtn,
.bl_filterSearch_searchBtn {
  background-color: var(--default, rgb(245 245 245/.7)) var(--hover, var(--color-main));
  border: 1px solid var(--default, #BBB) var(--hover, var(--color-main));
  cursor: pointer;
}
.bl_filterSearch_filterBtn {
  --clamp-min: 12;
  --clamp-max: 14;
  align-items: center;
  border-radius: unset;
  color: var(--hover, #FFF);
  column-gap: .3125em;
  display: block flex;
  font-family: var(--ff-base);
  justify-content: center;
  line-height: 1.4;
  padding-block: .301em;
  padding-inline: .749em;

  & svg {
    inline-size: .4775rem;
  }

  & path {
    transition: stroke .4s;
  }

  &:focus-visible path {
    stroke: #FFF;
  }
}
.bl_filterSearch_searchBtn {
  block-size: 1.75rem;
  border-radius: 50%;
  display: block grid;
  inline-size: 1.75rem;
  margin: unset;
  padding: unset;
  place-content: center;

  & path {
    transition: fill .4s;
  }

  &:focus-visible path {
    fill: #FFF;
  }
}
.bl_tab {
  margin-block-start: 4.1rem;
  padding-block-end: 2.56rem;
}
.bl_tabList {
  display: block grid;
  grid-template-columns: repeat(3, 1fr);
}
.bl_tabList_item {
  --clamp-min: 14;
  --clamp-max: 14;
  background-color: transparent;
  border: unset;
  color: var(--default, var(--color-main)) var(--hover, var(--color-accent));
  cursor: pointer;
  font-family: var(--ff-base);
  line-height: 1.4;
  padding-block: .429em;
  padding-inline: .5em;
  position: relative;

  &::after {
    background-color: transparent;
    block-size: 1px;
    content: "";
    inline-size: 100%;
    inset-block-end: -1px;
    inset-inline-start: 0;
    position: absolute;
    z-index: var(--stack-forwards);
  }
}
.bl_tabList_item[aria-selected="true"] {
  color: var(--color-accent);

  &::after {
    background-color: var(--color-accent);
  }
}
.bl_tabPanel {
  border-block-start: 1px solid #D9D9D9;
  display: none;
  max-block-size: 12.5rem;
  overflow-y: auto;
  overscroll-behavior-block: contain;
  padding-block: 1.5625rem;
}
.bl_tabPanel.is_active {
  display: revert;
}
.bl_tabPanel_tags {
  display: block flex;
  flex-wrap: wrap;
  gap: .625rem;
}
.bl_searchForm {
  --clamp-min: 16;
  --clamp-max: 16;
  align-items: center;
  display: block grid;
  grid-template-columns: 1fr auto;
  margin-block-start: 3.875rem;
  padding-block-end: 3.9rem;
}
.bl_searchForm_input {
  background-color: var(--color-base);
  border: 1px solid #BBB;
  border-inline-end: unset;
  font-family: var(--ff-shippori);
  line-height: 1.6;
  min-inline-size: 0;
  padding-block: .39em;
  padding-inline-start: .6em;

  &::placeholder {
    color: #BBB;
  }
}
.bl_searchForm_submit {
  background-color: var(--color-base);
  border: 1px solid #BBB;
  border-inline-start: unset;
  cursor: pointer;
  display: block grid;
  padding-block: .625em;
  padding-inline: 1.1em;
  place-content: center;
}
.bl_micromodalSlide,
.bl_micromodalAuthor {
  display: none;

  &.is-open {
    display: revert;
  }
}
.bl_modalOverlay {
  background-color: var(--color-base);
  border-block: 1px solid #BBB;
  inline-size: 100%;
  inset-block-start: 3.4rem;
  inset-inline-start: 0;
  position: fixed;
  z-index: var(--stack-drawer-menu);
}
.bl_modalContainer {
  margin-inline: auto;
  padding-inline: 15px;

  &:has(.bl_tab) {
    inline-size: min(100%, 820px);

    & .bl_modalBody {
      inline-size: 100%;
    }
  }

  &:has(.bl_searchForm) {
    & .bl_modalBody {
      inline-size: 100%;
      justify-self: end;
    }
  }

  &>* {
    display: block grid;
    place-items: center;
  }
}
.bl_modalTtl {
  clip: rect(0 0 0 0) !important;
  block-size: 1px !important;
  border: none !important;
  inline-size: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: unset !important;
  position: absolute !important;
  white-space: nowrap !important;
}
.bl_modalClose {
  background-color: var(--default, #000) var(--hover, #FFF);
  block-size: 1.875rem;
  border: 1px solid var(--default, #000) var(--hover, #BBB);
  border-radius: 50%;
  cursor: pointer;
  display: block grid;
  inline-size: 1.875rem;
  margin-block-end: -.875rem;
  padding: unset;
  place-content: center;

  & svg {
    block-size: 1.75rem;
    inline-size: 1.75rem;
    pointer-events: none;
  }

  & circle,
  & rect {
    transition: fill .4s;
  }

  &:focus-visible {
    & circle {
      fill: #FFF;
    }

    & rect {
      fill: #000;
    }
  }
}
.bl_micromodalAuthor_overlay {
  background-color: rgb(17 17 17/.95);
  block-size: 100dvb;
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  overflow-y: auto;
  overscroll-behavior-block: contain;
  position: fixed;
  z-index: var(--stack-top);
}
.bl_micromodalAuthor_close {
  background-color: transparent;
  block-size: 2.8rem;
  border: unset;
  cursor: pointer;
  inline-size: 2.8rem;
  inset-block-start: .6rem;
  inset-inline-end: .25rem;
  padding: unset;
  position: fixed;
  z-index: var(--stack-forwards);

  & svg {
    block-size: inherit;
    inline-size: inherit;
    pointer-events: none;
  }
}
.bl_micromodalAuthor_container {}
.bl_micromodalAuthor_inner {
  color: #FFF;
  display: block grid;
  gap: 1.9rem 1rem;
  grid-template:
    "thumb col" 10rem
    "desc desc" auto
    "profile profile" auto
    / 44.5% 1fr;
  inline-size: min(100%, 1078px);
  margin-inline: auto;
  padding-block-start: 5.5rem;
  padding-inline: 15px;

  &>.bl_profileInfo {
    grid-area: profile;
  }

  & .bl_profileInfo_term {
    color: #BBB;
  }
}
.bl_micromodalAuthor_thumb {
  grid-area: thumb;
  max-block-size: 10rem;

  &>img {
    aspect-ratio: 1;
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }
}
.bl_micromodalAuthor_col {
  align-items: flex-end;
  display: inherit;
  grid-area: col;
  grid-template-rows: 1fr auto;
  margin-block-end: .625rem;
  row-gap: 1.7rem;
}
.bl_micromodalAuthor_author {
  letter-spacing: calc(-2em / 1000);
  line-height: 1.2;
}
.bl_micromodalAuthor_name {
  --clamp-min: 22;
  --clamp-max: 22;
  font-weight: 400;
}
.bl_micromodalAuthor_position {
  --clamp-min: 12;
  --clamp-max: 12;
  margin-block-start: .2em;
}
.bl_micromodalAuthor_sns {
  align-items: center;
  column-gap: .6rem;
  display: block flex;
}
.bl_micromodalAuthor_sns_link {
  display: block grid;
  place-content: center;
}
.bl_micromodalAuthor_desc {
  --clamp-min: 12;
  --clamp-max: 14;
  font-family: var(--ff-shippori);
  grid-area: desc;
  letter-spacing: calc(-2em / 1000);
  line-height: 1.6;
}
.bl_micromodalAuthor_column {
  color: #FFF;
  inline-size: min(100%, 1078px);
  margin-block-start: 1.9rem;
  margin-inline: auto;
  padding-block-end: 5.5rem;
  padding-inline: 15px;
}
.bl_micromodalAuthor_column_ttl {
  --clamp-min: 24;
  --clamp-max: 32;
  border-block-end: 1px solid #D9D9D9;
  font-weight: 400;
  letter-spacing: calc(-2em / 1000);
  line-height: 1.2;
  padding-block-end: .4em;
}
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
.bl_micromodalSlide[aria-hidden="false"] .bl_modalOverlay,
.bl_micromodalAuthor[aria-hidden="false"] .bl_micromodalAuthor_overlay {
  animation: mmfadeIn .3s cubic-bezier(0, 0, .2, 1);
}
.bl_micromodalSlide[aria-hidden="false"] .bl_modalContainer,
.bl_micromodalAuthor[aria-hidden="false"] .bl_micromodalAuthor_container {
  animation: mmfadeIn .3s cubic-bezier(0, 0, .2, 1);
}
.bl_micromodalSlide[aria-hidden="true"] .bl_modalOverlay,
.bl_micromodalAuthor[aria-hidden="true"] .bl_micromodalAuthor_overlay {
  animation: mmfadeOut .3s cubic-bezier(0, 0, .2, 1);
}
.bl_micromodalSlide[aria-hidden="true"] .bl_modalContainer,
.bl_micromodalAuthor[aria-hidden="true"] .bl_micromodalAuthor_container {
  animation: mmfadeOut .3s cubic-bezier(0, 0, .2, 1);
}
.bl_micromodalSlide .bl_modalContainer,
.bl_micromodalSlide .bl_modalOverlay,
.bl_micromodalAuthor .bl_micromodalAuthor_overlay,
.bl_micromodalAuthor .bl_micromodalAuthor_container {
  will-change: transform;
}
.bl_contTtl{
  --clamp-min: 24;
  --clamp-max: 36;
  font-weight: 400;
  line-height: 1.4;
}
.bl_cardUnit {
  margin-block-start: 1.5625rem;

  &:has(:not(.el_nopost)) {
    display: block grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: subgrid;
  }
}
.bl_card {
  display: block grid;
  grid-row: span 3;
  grid-template-rows: inherit;
  position: relative;
  row-gap: .625rem;
}
.bl_card_imgWrapper {
  block-size: 10.9375rem;

  & img {
    block-size: 100%;
    inline-size: 100%;
    object-fit: contain;
  }
}
.bl_card_ttl_link {
  --clamp-min: 12;
  --clamp-max: 15;
  font-family: var(--ff-shippori);
  letter-spacing: calc(-5em / 1000);
  line-height: 1.4;

  &::before {
    block-size: 100%;
    content: "";
    inline-size: 100%;
    inset: 0;
    position: absolute;
  }
}
.bl_card_meta {
  display: block grid;
}
.bl_card_meta_info {
  column-gap: unset !important;
  display: inherit;
  gap: .0625rem .25rem;
  grid-template: "date date" auto "label like" auto / auto 1fr;
}
.bl_card_meta_info_date {
  --clamp-min: 8;
  --clamp-max: 8;
  color: #BBB;
  grid-area: date;
  letter-spacing: calc(-2em / 1000);
  line-height: 1.2;
}
.bl_card_meta_info_label {
  display: none !important;
  grid-area: label;
}
.bl_card_meta_info_like {
  grid-area: like;
  margin-block-start: 1px;

  &>.simplefavorite-button.preset {
    column-gap: .092rem;

    &::before {
      background-image: url(../images/icon_heart-outline-sm.svg);
      block-size: .75rem;
      inline-size: .875rem;
    }

    &.active::before {
      background-image: url(../images/icon_heart-filled-sm.svg);
    }

    &:focus-visible {
      &::before {
        background-image: url(../images/icon_heart-filled-sm.svg);
      }
    }
  }

  & .simplefavorite-button-count {
    --clamp-min: 10;
    --clamp-max: 10;
  }
}
.bl_card_author {
  column-gap: .625rem;
  display: inline grid;
  grid-template-columns: 1fr 1.5625rem;
  text-align: end;
}
.bl_card_author_name {
  --clamp-min: 10;
  --clamp-max: 12;
}
.bl_card_author_position {
  --clamp-min: 8;
  --clamp-max: 8;
}
.bl_card_author_thumb {
  block-size: 1.5625rem;

  & img {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }
}
.bl_auhorTtl {
  --clamp-min: 24;
  --clamp-max: 36;
  letter-spacing: calc(-2em / 1000);
  line-height: 1.2;
  font-weight:400;
}
.bl_auhor {
  column-gap: .9375rem;
  display: block grid;
  grid-auto-columns: 5rem;
  grid-auto-flow: column;
  margin-block-start: 1.5625rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-inline: max(1.9375rem, calc((100% - 1040px) / 2));
  scrollbar-width: none;
}
.bl_auhor_btn {
  background-color: transparent;
  border: unset;
  cursor: pointer;
  display: inherit;
  grid-row: span 2;
  grid-template-rows: subgrid;
  padding: unset;
  row-gap: .6875rem;
}
.bl_author_thumb>img {
  aspect-ratio: 1;
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}
.bl_auhor_body {
  display: block grid;
  font-family: var(--ff-base);
  letter-spacing: calc(-2em / 1000);
  line-height: 1.2;
  row-gap: .125rem;
  text-align: start;
}
.bl_author_name {
  color: var(--color-main);
}
.bl_author_position {
  --clamp-min: 10;
  --clamp-max: 12;
}
.bl_profileInfo {
  --clamp-min: 12;
  --clamp-max: 12;
  display: block grid;
  font-family: var(--ff-shippori);
  grid-template-columns: 42% 1fr;
  letter-spacing: calc(-2em / 1000);
}
.bl_profileInfo_row {
  column-gap: .625rem;
  display: inherit;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  padding-block: .1875rem;
}
.bl_profileInfo_term {
  color: #555;
}
.bl_profileInfo_desc>a {
  display: inline flow-root;
  text-decoration: var(--hover, underline);
}
.quote-url,
.quote-url a {
  font-size: 12px;
  font-weight: 400;
  margin-top: 120px;
}
.sme-highlighter {
  background-image: linear-gradient(transparent 75%, rgba(189, 41, 75, .5) 75%) !important;
}
.bl_post {
  display: block grid;
}
.bl_post_header {
  /* padding-inline: 15px; */
  padding-inline: 46px;
}
.bl_post_header_time {
  --clamp-min: 12;
  --clamp-max: 12;
  color: #BBB;
  display: block flow;
  letter-spacing: calc(-2em / 1000);
  line-height: 1.2;
}
.bl_post_header_ttl {
  --clamp-min: 18;
  --clamp-max: 32;
  font-family: var(--ff-shippori);
  letter-spacing: calc(-5em / 1000);
  line-height: 1.4;
  margin-block: .6em 0;
}
.bl_post_header_label {
  display: inline grid;
  display: none !important;
  margin-block-start: .5rem;
}
.bl_post_thumb {
  margin-block-start: .9375rem;

  & img {
    aspect-ratio: 390/254;
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }
}
.bl_post_footer {
  margin-block-start: 1.5625rem;
  padding-inline: 15px;
}
.bl_post_footer_lead {
  --clamp-min: 12;
  --clamp-max: 14;
  font-family: var(--ff-shippori);
  font-weight: 700;
  letter-spacing: calc(-2em / 1000);
  line-height: 1.6;

  & a {
    text-decoration: var(--default, underline) var(--hover, none);
  }
}
.bl_post_footer_author {
  column-gap: .8125rem;
  display: inline grid;
  grid-template-columns: 3.125rem 1fr;
  margin-block-end: 1.6rem;
  /* margin-block-start: 1.25rem; */

  margin-block-start: 0;
}
.bl_post_footer_author_thumb {
  block-size: 3.125rem;

  &>img {
    aspect-ratio: 1;
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }
}
.bl_post_footer_author_body {
  align-self: end;
  display: inherit;
  letter-spacing: calc(-2em / 1000);
  line-height: 1.2;
  row-gap: .1875rem;
}
.bl_post_footer_author_name {
  --clamp-min: 16;
  --clamp-max: 16;
}
.bl_post_footer_author_position {
  --clamp-min: 12;
  --clamp-max: 12;
}
.bl_postBody {
  font-family: var(--ff-shippori);
  margin-block-start: 3.75rem;

  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6,
  & p {
    letter-spacing: calc(-2em / 1000);
    line-height: 1.6;
  }

  & h1 {
    --clamp-min: 18;
    --clamp-max: 32;
    margin-block: unset;
  }

  & h2 {
    --clamp-min: 16;
    --clamp-max: 30;
  }

  & h3,
  & h4,
  & h5,
  & h6 {
    --clamp-min: 14;
    --clamp-max: 28;
  }

  & figcaption {
    --clamp-min: 12;
    --clamp-max: 12;
    color: #BBB;
    font-family: var(--ff-base);
    line-height: 1.2;
    margin-block-start: 1.67em;
  }

  & a[target="_blank"] {
    text-decoration: var(--default, underline) var(--hover, none);
  }
}
.bl_postBody_tag {
  display: inline flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-block-start: 1.1rem;
}
.bl_postBody_favorite {
  margin-block-start: .562rem;

  &>.simplefavorite-button.preset {
    column-gap: .25rem;

    &::before {
      background-image: url(../images/icon_heart-outline-lg.svg);
      block-size: 1.25rem;
      inline-size: 1.375rem;
    }

    &.active::before {
      background-image: url(../images/icon_heart-filled-lg.svg);
    }

    &:focus-visible {
      &::before {
        background-image: url(../images/icon_heart-filled-lg.svg);
      }
    }
  }

  & .simplefavorite-button-count {
    --clamp-min: 16;
    --clamp-max: 18;
  }
}
.bl_about,
.bl_comment {
  border-block-start: 1px solid #D9D9D9;
  display: block grid;
}
.bl_about_ttl,
.bl_comment_ttl {
  --clamp-min: 16;
  --clamp-max: 16;
  font-weight: 400;
  letter-spacing: calc(-2em / 1000);
  line-height: 1.2;
}
.bl_about {
  padding-block-start: 1.6rem;
  row-gap: .9rem;
}
.bl_comment {
  padding-block-start: 1.65rem;
}
.bl_about_inner {
  display: block grid;
  gap: 1.55rem 1rem;
  grid-template: "thumb col" 10rem "desc desc" auto / 10rem auto;
}
.bl_about_thumb {
  grid-area: thumb;

  & img {
    aspect-ratio: 1;
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }
}
.bl_about_body {
  display: contents;
  margin-block-start: .3125rem;
}
.bl_about_col {
  align-items: flex-end;
  display: block grid;
  grid-area: col;
  grid-template-rows: 1fr auto;
  row-gap: .7rem;
}
.bl_about_name,
.bl_about_position {
  letter-spacing: calc(-2em / 1000);
  line-height: 1.2;
}
.bl_about_name {
  --clamp-min: 22;
  --clamp-max: 22;
}
.bl_about_position {
  --clamp-min: 12;
  --clamp-max: 12;
  margin-block-start: .17em;
}
.bl_about_sns {
  align-items: center;
  column-gap: .8125rem;
  display: block flex;
}
.bl_about_sns_link {
  display: block grid;
  place-content: center;
}
.bl_about_desc {
  --clamp-min: 12;
  --clamp-max: 14;
  font-family: var(--ff-shippori);
  grid-area: desc;
  letter-spacing: calc(-2em / 1000);
  line-height: 1.6;
}
.bl_relatedTtl {
  --clamp-min: 24;
  --clamp-max: 32;
  font-weight: 400;
  letter-spacing: calc(-2em / 1000);
  line-height: 1.2;
}
.bl_related {
  margin-block-start: .875rem;
  padding-inline: max(1.125rem, calc((100% - 1240px) / 2));

  &:has(:not(.el_nopost)) {
    column-gap: 4.9375rem;
    display: block grid;
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
}
.bl_related_post {
  display: block grid;
  gap: .625rem .3125rem;
  grid-template: "time thumb" 7.3125rem ". ttl" auto / 2.2rem 10.9375rem;
  position: relative;
  z-index: var(--stack-forwards);
}
.bl_related_post_time {
  --clamp-min: 8;
  --clamp-max: 8;
  align-self: center;
  color: #BBB;
  grid-area: time;
  letter-spacing: calc(-2em / 1000);
  line-height: 1.2;
  margin-block-start: 1.7rem;
}
.bl_related_post_thumb {
  grid-area: thumb;

  & img {
    block-size: 100%;
    inline-size: 100%;
    object-fit: contain;
  }
}
.bl_related_post_ttl {
  --clamp-min: 12;
  --clamp-max: 16;
  font-family: var(--ff-shippori);
  grid-area: ttl;
  letter-spacing: calc(-5em / 1000);
  line-height: 1.4;
}
.bl_related_post_link::before {
  block-size: 100%;
  content: "";
  inline-size: 100%;
  inset: 0;
  position: absolute;
}
.bl_breadcrumb {
  border-block-start: 1px solid #D9D9D9;
  inline-size: 93%;
  margin-block-start: 1.5625rem;
  margin-inline: auto;
  padding-block-start: .6rem;
}
.bl_breadcrumb_list {
  --clamp-min: 8;
  --clamp-max: 12;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .2em .35em;
  line-height: 1.6;

  & li {
    align-items: inherit;
    column-gap: .8em;
    display: inherit;
  }

  & li:not(:last-of-type) {
    &::after {
      background-image: url(../images/icon_breadcrumb-arrow.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      block-size: .5rem;
      content: "";
      inline-size: .75rem;
    }
  }

  & a {
    color: #BBB;
  }

  & li:last-of-type a {
    color: #343434;
    pointer-events: none;
  }
}
.bl_back {
  --clamp-min: 16;
  --clamp-max: 16;
  background-color: var(--default, var(--color-base)) var(--hover, var(--color-main));
  border: 1px solid var(--default, #BBB) var(--hover, var(--color-main));
  color: var(--hover, #FFF);
  column-gap: .4em;
  display: block grid;
  grid-template-columns: 1fr auto 1fr;
  inline-size: 8em;
  line-height: 1.4;
  padding-block: .43em;
  padding-inline: .7em .2em;
  place-items: center;

  &>svg {
    justify-self: end;
  }

  & path {
    transition: stroke .4s;
  }

  &:focus-visible path {
    stroke: #FFF;
  }
}
.bl_404 {
  display: block grid;
  font-family: var(--ff-shippori);
  margin-block-start: 1.5625rem;
  row-gap: 1rem;
}
.bl_404_txt,
.bl_404_bulletList>li {
  --clamp-min: 16;
  --clamp-max: 16;
  letter-spacing: calc(-2em / 1000);
  line-height: 1.6;
}
.bl_404_bulletList {
  list-style-position: inside;
  list-style-type: disc;
}
.el_lv1Heading {
  --clamp-min: 24;
  --clamp-max: 32;
  border-block-end: 1px solid #BBB;
  font-weight: 400;
  letter-spacing: calc(-2em / 1000);
  line-height: 1.2;
  margin-block: unset;
  padding-block-end: .625rem;
}
.el_lv1Heading {
  padding-block-end: .75rem;
}
.el_label {
  --clamp-min: 8;
  --clamp-max: 10;
  display: block grid;
  padding-block: .188em;
  padding-inline: .533em;
  place-content: center;
  position: relative;
  z-index: var(--stack-forwards);
}
.el_label__original {
  background-color: var(--color-main);
  color: #FFF;
}
.el_label__repost {
  background-color: rgb(187 187 187/.4);
}
.el_nopost{
  --clamp-min: 12;
  --clamp-max: 16;
  letter-spacing: calc(-2em / 1000);
  line-height: 1.6;
}
.el_positionFujifilmStaff {
  color: #018463;
}
.el_positionXLovers {
  color: #BBB;
}
.el_tag {
  --clamp-min: 14;
  --clamp-max: 14;
  background-color: var(--default, var(--color-base)) var(--hover, var(--color-main));
  border: 1px solid var(--default, #BBB) var(--hover, var(--color-main));
  color: var(--hover, var(--color-base));
  display: inline grid;
  line-height: 1.4;
  padding-block: .301em;
  padding-inline: .832em;
  place-content: center;
}
.hp_bbsLightgray {
  border-block-start: 1px solid #D9D9D9 !important;
}
.site-header,.site-footer{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
    }
/* ========== HEADER BASE ========== */
.site-header {
        background: #fff;
        left: 0;
        position: sticky;
        right: 0;
        top: 0;
        z-index: 1000;
    }
.site-header__inner {
        align-items: center;
        display: flex;
        height: 56px;
        justify-content: space-between;
        padding: 0 20px;
        position: relative;
    }
/* ========== LOGO ========== */
.custom-logo {
        display: block;
        flex-shrink: 0;
        position: relative;
        z-index: 20;
    }
.custom-logo img {
        display: block;
        height: auto;
        width: 36px;
    }
/* ========== NAVIGATION DESKTOP ========== */
.header-navigation {
        display: none;
    }
.main-navigation,
    .main-navigation>ul {
        align-items: center;
        display: flex;
        gap: 0;
        list-style: none;
        position: static;
    }
.main-navigation>ul>li {
        position: static;
    }
.main-navigation>ul>li.divide>a {}
/* X-Photographer の左ディバイダーを :before で表現（元サイト準拠） */
.main-navigation>ul>li>a,
    .main-navigation>ul>li>span {
        color: #000;
        cursor: pointer;
        display: block;
        font-family: 'Fjalla One', sans-serif;
        font-size: 16px;
        font-weight: 400;
        height: 72px;
        letter-spacing: 0.01em;
        line-height: 72px;
        padding: 0 18px;
        text-decoration: none;
        transition: color 0.2s;
        white-space: nowrap;
    }
/* ========== MEGA MENU ========== */
/* ヘッダーをメガメニューの基準に */
.site-header {
        overflow: visible;
    }
.mega-menu-wrapper {
        /* 上から下へ展開するアニメーション */
        animation: slideDown 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        background: #fff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
        display: none;
        left: 0;
        position: absolute;
        /* ヘッダー直下から展開 */
        top: 100%;
        transform-origin: top center;
        width: 100%;
        z-index: 500;
    }
@keyframes slideDown {
        from {
            clip-path: inset(0 0 100% 0);
            opacity: 0;
        }

        to {
            clip-path: inset(0 0 0% 0);
            opacity: 1;
        }
    }
/* li の position:static を解除してヘッダー基準にする */
.mega-menu-products {
        position: static;
    }
.mega-menu-support {
        position: static;
    }
/* ★ 修正ポイント: トップレベルの li のみに限定 */
#menu-navigation-header>li:hover>.mega-menu-wrapper {
        display: flex;
    }
#menu-navigation-header>li:hover>.menu-item-has-children__wrapper {
        display: block;
    }
.mega-menu-wrapper__inner {
        padding: 28px 32px;
        width: 100%;
    }
.mega-menu-wrapper>.mega-menu-wrapper__inner>ul.sub-menu {
        display: flex;
        flex-direction: row;
        gap: 40px;
        list-style: none;
    }
/* PRODUCTS columns */
.mega-menu-wrapper--products .mega-menu-wrapper__inner>ul.sub-menu>li {
        min-width: 140px;
    }
.mega-menu-wrapper--products .mega-menu-wrapper__inner>ul.sub-menu>li>a {
        color: #888;
        display: block;
        font-family: 'Fjalla One', sans-serif;
        font-size: 16px;
        letter-spacing: 0.01em;
        margin-bottom: 12px;
        padding-bottom: 8px;
        text-decoration: none;
    }
.mega-menu-wrapper--products .sub-menu>li>ul.sub-menu {
        list-style: none;
    }
.mega-menu-wrapper--products .sub-menu>li>ul.sub-menu>li>a {
        color: #000;
        display: block;
        font-family: Fjalla One, Helvetica, sans-serif;
        font-size: 22px;
        padding: 4px 0;
        text-decoration: none;
        transition: color 0.15s;
    }
.mega-menu-wrapper--products .sub-menu>li>ul.sub-menu>li>a:hover {
        color: #888;
    }
.mega-menu-wrapper--products .sub-menu>li>ul.sub-menu>li>a.sub-title {
        color: #888;
        display: block;
        font-family: 'Fjalla One', sans-serif;
        font-size: 16px;
        letter-spacing: 0.01em;
        margin-bottom: 12px;
        padding-bottom: 8px;
        text-decoration: none;
    }
/* By System column */
.sub-menu--mega-menu-products-lists {
        list-style: none;
    }
.sub-menu--mega-menu-products-lists>li>a {
        color: #000;
        display: block;
        font-family: 'Fjalla One', sans-serif;
        font-size: 12px;
        letter-spacing: 0.05em;
        margin-bottom: 4px;
        padding: 4px 0;
        text-decoration: none;
    }
.sub-menu--mega-menu-products-lists>li>ul.sub-menu {
        list-style: none;
        padding-left: 8px;
    }
.sub-menu--mega-menu-products-lists>li>ul.sub-menu>li>a {
        color: #555;
        display: block;
        font-size: 12px;
        padding: 3px 0;
        text-decoration: none;
        transition: color 0.15s;
    }
.sub-menu--mega-menu-products-lists>li>ul.sub-menu>li>a:hover {
        color: #000;
    }
/* Group items column */
.group-items>a {
        display: none !important;
    }
.group-items>ul.sub-menu {
        display: flex;
        flex-direction: column;
        gap: 24px;
        list-style: none;
    }
.group-items>ul.sub-menu>li>a {
        border-bottom: 1px solid #eee;
        color: #888;
        display: block;
        font-family: 'Fjalla One', sans-serif;
        font-size: 11px;
        letter-spacing: 0.08em;
        margin-bottom: 8px;
        padding-bottom: 6px;
        text-decoration: none;
        text-transform: uppercase;
    }
.group-items>ul.sub-menu>li>ul.sub-menu {
        list-style: none;
    }
.group-items>ul.sub-menu>li>ul.sub-menu>li>a {
        color: #000;
        display: block;
        font-family: Fjalla One, Helvetica, sans-serif;
        font-size: 22px;
        font-weight: 400;
        padding: 3px 0;
        text-decoration: none;
        transition: color 0.15s;
    }
.group-items>ul.sub-menu>li>ul.sub-menu>li>a:hover {
        color: #888;
    }
/* B2B column */
.no-arrow>a {
        border-bottom: 1px solid #eee;
        color: #888;
        display: block;
        font-family: 'Fjalla One', sans-serif;
        font-size: 11px;
        letter-spacing: 0.08em;
        margin-bottom: 12px;
        padding-bottom: 8px;
        text-decoration: none;
        text-transform: uppercase;
    }
.no-arrow>ul.sub-menu {
        list-style: none;
    }
.no-arrow>ul.sub-menu>li>a {
        color: #000;
        display: block;
        font-size: 12px;
        padding: 3px 0;
        text-decoration: none;
        transition: color 0.15s;
    }
.no-arrow>ul.sub-menu>li>a:hover {
        color: #888;
    }
/* Cameras/Lenses side panel */
.cameras-lenses {
        background: #fff;
        border-left: 1px solid #eee;
        display: none;
        flex-direction: column;
        left: 22%;
        max-height: 480px;
        max-width: 360px;
        min-height: 100%;
        min-width: 280px;
        overflow-y: auto;
        padding: 28px 28px;
        position: absolute;
    }
.cameras-lenses.active {
        display: flex;
    }
.cameras-lenses__inner {
        display: none;
        flex-direction: column;
    }
.cameras-lenses__inner.active {
        display: flex;
    }
.cameras-lenses__inner--sub-title {
        background: #fff;
        color: #888;
        font-family: 'Fjalla One', sans-serif;
        font-size: 11px;
        letter-spacing: 0.06em;
        margin: 12px 0 6px;
        text-transform: uppercase;
    }
.cameras-lenses__inner--sub-title--active {
        margin-top: 0;
    }
.cameras-lenses__inner--products {
        display: none;
        flex-direction: column;
        gap: 4px;
        list-style: none;
    }
.cameras-lenses__inner--products--active {
        display: flex;
    }
.cameras-lenses__inner--products li a {
        align-items: center;
        color: #000;
        display: flex;
        font-size: 12px;
        gap: 10px;
        padding: 3px 0;
        text-decoration: none;
        transition: color 0.15s;
    }
.cameras-lenses__inner--products li a:hover {
        color: #888;
    }
.camera-lenses--image {
        flex-shrink: 0;
        height: 45px;
        object-fit: contain;
        width: 45px;
    }
/* ========== SUPPORT MEGA MENU ========== */
.mega-menu-wrapper--support .mega-menu-wrapper__inner>ul.sub-menu {
        display: flex;
        flex-direction: row;
        gap: 40px;
        list-style: none;
    }
.mega-menu-wrapper--support ul.sub-menu>li>a {
        color: #000;
        display: block;
        font-family: 'Fjalla One', sans-serif;
        font-family: Fjalla One, Helvetica, sans-serif;
        font-size: 22px;
        letter-spacing: 0.01em;
        margin-bottom: 10px;
        padding-bottom: 6px;
        text-decoration: none;
    }
.mega-menu-wrapper--support ul.sub-menu>li>ul.sub-menu {
        list-style: none;
    }
.mega-menu-wrapper--support ul.sub-menu>li>ul.sub-menu>li>a {
        color: #000;
        display: block;
        font-family: Fjalla One, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0;
        padding: 1px;
        text-decoration: none;
        text-transform: none;
        transition: color 0.15s;
    }
.mega-menu-wrapper--support ul.sub-menu>li>ul.sub-menu>li>a:hover {
        color: #888;
    }
/* ========== X-Photographer dropdown ========== */
.menu-item-has-children__wrapper {
        animation: slideDown 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        background: #fff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        display: none;
        left: 0;
        min-width: 180px;
        padding: 16px 20px;
        position: absolute;
        top: 100%;
        transform-origin: top center;
        z-index: 500;
    }
.menu-item-has-children__wrapper>ul.sub-menu {
        list-style: none;
    }
.menu-item-has-children__wrapper>ul.sub-menu>li>a {
        color: #000;
        display: block;
        font-size: 13px;
        padding: 5px 0;
        text-decoration: none;
        transition: color 0.15s;
    }
.menu-item-has-children__wrapper>ul.sub-menu>li>a:hover {
        color: #888;
    }
/* ========== UTILITIES ========== */
.header-utilities {
        align-items: center;
        display: none;
        flex-shrink: 0;
    }
.btn-site-switcher {
        align-items: center;
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        gap: 6px;
        padding: 4px 0;
        position: relative;
    }
.btn-site-switcher p {
        color: #111;
        font-family: 'Fjalla One', sans-serif;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0.01em;
        padding-right: 14px;
        text-transform: uppercase;
    }
.btn-site-switcher p::after {
        border: 0 solid;
        border-color: rgb(27 27 27 / 1);
        border-right-width: 2px;
        border-top-width: 2px;
        content: '';
        display: block;
        height: .375rem;
        position: absolute;
        right: 0;
        top: 4px;
        transform: rotate(135deg);
        width: .375rem;
    }
.flag-jp {
        flex-shrink: 0;
        height: 16px;
        width: 24px;
    }
/* ========== HAMBURGER ========== */
.btn-hamburger-menu {
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 6px 0;
        z-index: 20;
    }
.btn-hamburger-menu span {
        background: #000;
        display: block;
        height: 2px;
        transition: all 0.3s;
        width: 24px;
    }
.btn-hamburger-menu.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
.btn-hamburger-menu.open span:nth-child(2) {
        opacity: 0;
    }
.btn-hamburger-menu.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
/* ========== MOBILE OVERLAY ========== */
.mobile-nav-overlay {
        background: #fff;
        bottom: 0;
        display: none;
        flex-direction: column;
        left: 0;
        overflow-y: auto;
        position: fixed;
        right: 0;
        top: 56px;
        z-index: 900;
    }
.mobile-nav-overlay.open {
        display: flex;
    }
.mobile-nav-list {
        list-style: none;
    }
.mobile-nav-list>li>a,
    .mobile-nav-list>li>span.m-nav-label {
        align-items: center;
        color: #000;
        cursor: pointer;
        display: flex;
        font-family: 'Fjalla One', sans-serif;
        font-size: 18px;
        justify-content: space-between;
        letter-spacing: 0.01em;
        padding: 20px 20px 5px;
        text-decoration: none;
        text-transform: uppercase;
    }
.mobile-nav-list>li>a .arrow-icon,
    .mobile-nav-list>li>span.m-nav-label .arrow-icon {
        color: #000;
        font-size: 18px;
    }
.mobile-sub-panel {
        background: #fff;
        bottom: 0;
        display: none;
        flex-direction: column;
        left: 0;
        overflow-y: auto;
        position: fixed;
        right: 0;
        top: 56px;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 950;
    }
.mobile-sub-panel.open {
        display: flex;
        transform: translateX(0);
    }
.mobile-sub-header {
        align-items: center;
        background: #fff;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        padding: 14px 20px;
        position: sticky;
        top: 0;
    }
.btn-back-mobile {
        align-items: center;
        background: none;
        border: none;
        color: #000;
        cursor: pointer;
        display: flex;
        font-family: 'Fjalla One', sans-serif;
        font-size: 12px;
        gap: 6px;
        letter-spacing: 0.01em;
        padding: 0;
        text-transform: uppercase;
    }
.btn-back-mobile::before {
        content: '<<';
        font-size: 14px;
    }
.mobile-sub-panel-title {
        font-family: 'Fjalla One', sans-serif;
        font-size: 20px;
        letter-spacing: 0.01em;
        padding-right: 22px;
        text-transform: uppercase;
    }
.mobile-sub-list {
        list-style: none;
    }
.mobile-sub-list>li {}
.mobile-sub-list>li>a {
        color: #000;
        display: block;
        font-family: Fjalla One, Helvetica, sans-serif;
        font-size: 20px;
        padding: 4px 20px;
        text-decoration: none;
    }
.mobile-sub-list>li.sub-heading>span {
        color: #888;
        display: block;
        font-family: 'Fjalla One', sans-serif;
        font-size: 12px;
        letter-spacing: 0.01em;
        padding: 10px 20px 4px;
    }
.mobile-footer-bar {
        border-top: 1px solid #eee;
        margin-top: auto;
        padding: 20px;
    }
.mobile-footer-bar p {
        color: #888;
        font-size: 11px;
        margin-top: 8px;
        text-align: center;
    }
/* ========== Demo body ========== */
.demo-content {
        color: #666;
        font-size: 14px;
        padding: 60px 40px;
        text-align: center;
    }
/* ========== SITE SWITCHER MODAL ========== */
.modal-overlay {
        align-items: flex-start;
        backdrop-filter: blur(5px);
        background-color: hsla(0, 0%, 7%, .55);
        display: none;
        inset: 0;
        justify-content: center;
        padding-top: 100px;
        position: fixed;
        z-index: 2000;
    }
.modal-overlay.open {
        display: flex;
    }
/* SP: 全画面黒背景 */
/* モーダル本体 */
.site-switcher {
        background: #fff;
        display: flex;
        flex-direction: column;
        max-height: 80vh;
        max-width: 920px;
        overflow: hidden;
        position: relative;
        width: 100%;
    }
.site-switcher__inner {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        padding: 40px 40px 0;
    }
/* 閉じるボタン */
.btn-site-switcher-close {
        align-items: center;
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        height: 32px;
        justify-content: center;
        position: absolute;
        right: 20px;
        top: 20px;
        width: 32px;
        z-index: 10;
    }
.btn-site-switcher-close span {
        background: #000;
        display: block;
        height: 2px;
        position: absolute;
        width: 22px;
    }
.btn-site-switcher-close span:nth-child(1) {
        transform: rotate(45deg);
    }
.btn-site-switcher-close span:nth-child(2) {
        transform: rotate(-45deg);
    }
/* タイトル + 検索 行 */
.site-switcher__header {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: space-between;
        margin-bottom: 28px;
    }
.site-switcher__title {
        color: #000;
        font-family: 'Fjalla One', sans-serif;
        font-size: 24px;
        font-weight: 400;
        letter-spacing: 0.01em;
        line-height: 1.2;
        text-transform: uppercase;
    }
/* 検索フォーム */
.filter-regions {
        align-items: center;
        border: none;
        display: flex;
        gap: 8px;
    }
.filter-regions svg {
        color: #888;
        flex-shrink: 0;
    }
.filter-regions input {
        background: transparent;
        border: none;
        border-bottom: 1px solid #ccc;
        color: #333;
        font-size: 13px;
        outline: none;
        padding: 4px 0;
        width: 200px;
    }
/* 国リスト スクロール領域 */
.site-switcher--regions {
        flex: 1;
        overflow-y: auto;
        padding-bottom: 32px;
        padding-right: 8px;
    }
/* 大陸ブロック */
.continent>.region-name {
        border-bottom: 1px solid #ccc;
        color: #000;
        display: block;
        font-family: 'Fjalla One', sans-serif;
        font-size: 17px;
        font-weight: 400;
        letter-spacing: 0.06em;
        margin-bottom: 16px;
        margin-top: 28px;
        padding-bottom: 8px;
        text-transform: uppercase;
    }
/* 国リスト */
.menu-depth-1 {
        display: grid;
        gap: 10px 0;
        /* PC: 最大4列 */
        grid-template-columns: repeat(4, 1fr);
        list-style: none;
        margin-bottom: 8px;
    }
/* 1カ国アイテム */
.menu-depth-1>li {
        align-items: center;
        display: flex;
        gap: 8px;
        min-width: 0;
    }
/* multi（カナダ・ベルギー等）は1行分 */
.menu-depth-1>li.multi {
        align-items: flex-start;
        flex-direction: row;
        font-size: 12px;
        font-weight: 400;
        gap: 2px;
    }
.menu-depth-1>li.multi>p {
        color: #222;
        font-size: 12px;
    }
.menu-depth-1>li img {
        display: block;
        flex-shrink: 0;
        height: 16px;
        object-fit: cover;
        width: 24px;
    }
.menu-depth-1>li>p {
        color: #222;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
.menu-depth-1>li>p>a,
    .menu-depth-1>li>p a {
        color: inherit;
        font-family: Noto Sans JP, Noto Sans, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: 400;
        text-decoration: none;
        transition: color 0.15s;
    }
.menu-depth-1>li>p>a:hover {
        text-decoration: underline;
    }
/* multi の第2言語リスト */
.menu-depth-2 {
        display: flex;
        flex-direction: row;
        gap: 0;
        list-style: none;
        padding-left: 5px;
    }
.menu-depth-1>li.multi>.multi-top p {
        color: inherit;
        font-family: Noto Sans JP, Noto Sans, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: 400;
        text-decoration: none;
        transition: color 0.15s;
    }
.menu-depth-2 li {
        font-size: 12px;
    }
.menu-depth-2 li a {
        color: #222;
        font-family: Noto Sans JP, Noto Sans, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: 400;
        padding: 0 4px;
        text-decoration: underline;
        transition: color 0.15s;
    }
.menu-depth-2 li a:hover {
        color: #888;
    }
/* multi行のflag+p横並び */
.menu-depth-1>li.multi>.multi-top {
        align-items: center;
        display: flex;
        gap: 8px;
    }
/* non-multiのpに国名リンク */
.menu-depth-1>li:not(.multi) {
        align-items: center;
        display: flex;
        gap: 8px;
    }
/* 検索フィルター非表示 */
.country-hidden {
        display: none !important;
    }
/* scrollbar styling */
.site-switcher--regions::-webkit-scrollbar {
        width: 6px;
    }
.site-switcher--regions::-webkit-scrollbar-track {
        background: #f5f5f5;
    }
.site-switcher--regions::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
    }
/* ─── Back-to-top button ─── */
.page-top-wrap {
        display: flex;
        justify-content: center;
        left: 0;
        margin: 0 auto;
        position: absolute;
        right: 0;
        z-index: 10;
    }
#page-top {
        align-items: center;
        background: #111;
        border-radius: 50%;
        color: #fff;
        display: flex;
        flex-shrink: 0;
        height: 52px;
        justify-content: center;
        margin-bottom: 0;
        margin-top: -26px;
        text-decoration: none;
        width: 52px;
    }
#page-top::after {
        border: 0 solid;
        border-color: rgb(255 255 255 / 1);
        border-right-width: 1px;
        border-top-width: 1px;
        content: "";
        height: .75rem;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 45%;
        transform: rotate(-45deg);
        width: .75rem;
    }
#page-top svg {
        fill: none;
        stroke: #fff;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        height: 18px;
        width: 18px;
    }
#page-top:hover {
        transform: translate(0, -5px);
    }
/* ─── Footer Top (dark gray) ─── */
.site-footer__top {
        background: #1a1a1a;
        padding-top: 52px;
        /* room for the overlapping button */
    }
.footer-inner {
        display: grid;
        gap: 20px 32px;
        grid-template-columns: 1fr 1fr 1fr auto;
        margin: 0 auto;
        max-width: 1152px;
        padding: 24px 20px 56px;
        width: 100%;
    }
/* ─── Nav columns ─── */
.footer-navigation ul,
    .footer-navigation li {
        list-style: none;
    }
/* Top-level column heading */
.footer-navigation>ul>li>a {
        color: #fff;
        display: block;
        font-family: 'Fjalla One', sans-serif;
        font-size: 20px;
        letter-spacing: 0;
        margin-bottom: 14px;
        text-decoration: none;
        text-transform: uppercase;
    }
/* Sub-menu items */
.footer-navigation .sub-menu {
        list-style: none;
    }
.footer-navigation .sub-menu li a {
        color: #fff;
        display: block;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.375;
        padding: 6px 0;
        text-decoration: none;
        transition: color 0.15s;
    }
.footer-navigation .sub-menu li a:hover {
        color: #fff;
    }
.footer-navigation .sub-menu li a[target=_blank]:after {
        background-image: url(https://www.fujifilm-x.com/wp-content/themes/fujifilm/dist/images/svg/duplicate.svg);
        content: "";
        display: inline-block;
        filter: invert(100%) sepia(100%) saturate(0) hue-rotate(7deg) brightness(100%) contrast(105%);
        height: .625rem;
        margin-left: .5rem;
        width: .625rem;
    }
.footer-navigation .divide::before {
        border-top: 1px solid rgb(191 191 191 / 0.3);
        content: "";
        display: block;
        height: 1px;
        margin-top: 1rem;
        padding-top: .75rem;
        width: 2rem;
    }
/* ─── SNS section ─── */
.follow-us {
        min-width: 200px;
    }
.follow-us__title {
        color: #fff;
        display: block;
        font-family: 'Fjalla One', sans-serif;
        font-size: 17px;
        letter-spacing: 0.04em;
        margin-bottom: 20px;
        text-transform: uppercase;
    }
.follow-us nav {
        margin-bottom: 18px;
    }
.follow-us__label {
        color: #fff;
        display: block;
        font-family: 'Fjalla One', sans-serif;
        font-size: 14px;
        letter-spacing: 0.1em;
        margin-bottom: 10px;
        text-transform: uppercase;
    }
.sns-icons {
        align-items: center;
        display: flex;
        gap: 10px;
        list-style: none;
    }
.sns-icons a {
        align-items: center;
        color: #fff;
        display: flex;
        height: 24px;
        justify-content: center;
        text-decoration: none;
        transition: border-color 0.15s, color 0.15s;
        width: 24px;
    }
.sns-icons a:hover {
        color: #ccc;
    }
.sns-icons svg {
        fill: currentColor;
        height: 21px;
        width: 21px;
    }
/* ─── Footer Bottom (black) ─── */
.site-footer__bottom {
        background: #000;
        padding: 32px 32px;
    }
.footer-bottom-inner {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: space-between;
        margin: 0 auto;
        max-width: 1320px;
    }
.footer-brand {
        align-items: center;
        display: flex;
        flex-shrink: 0;
        gap: 14px;
    }
.footer-brand img {
        height: 22px;
        max-width: 88px;
        vertical-align: middle;
        width: auto;
    }
.footer-brand span {
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        vertical-align: middle;
    }
.bottom-navigation ul {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        list-style: none;
    }
.bottom-navigation li+li::before {
        background: rgb(255 255 255 / 30%);
        content: '';
        display: inline-block;
        height: 12px;
        margin: 0 22px;
        vertical-align: middle;
        width: 1px;
    }
.bottom-navigation a {
        color: #fff;
        font-size: 12px;
        letter-spacing: 0.01rem;
        text-decoration: none;
        transition: color 0.15s;
        white-space: nowrap;
    }
.bottom-navigation a:hover {
        text-decoration: underline;
    }
/* ─── Responsive ─── */
/* Tablet: 768–1023px — 2-col nav + sns below */
/* Mobile: <768px — single column */
#page-top,
    .pre-scrim {
        display: block;
        z-index: 20;
    }
#page-top {
        background-color: rgb(0 0 0 / 1);
        border-radius: 9999px;
        box-shadow: 0px 0px 9.6px 0.4px rgba(0, 0, 0, .32);
        height: 4rem;
        margin: auto;
        opacity: 1;
        position: relative;
        top: -2rem;
        transition-duration: .2s;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        width: 4rem;
    }
@media screen and (768px <= width) {
  .ly_main {
    margin-block-start: 4.375rem;
  }
  .ly_mv {
    padding-block-start: 2.5rem;
  }
  .ly_mv_inner {
    inline-size: min(100%, 620px);
    padding-inline: 30px;

    &::before {
      inset-block-end: -2.9rem;
      inset-inline-start: .2rem;
    }

    &::after {
      block-size: 26.1875rem;
      inline-size: 38.375rem;
      inset-block-end: -29.4rem;
    }
  }
  .ly_cont {
    padding-block-start: 7.625rem;

    & .bl_cardUnit {
      margin-block-start: 1.375rem;
    }
  }
  .ly_inner {
    padding-inline: 30px;
  }

  .ly_post,
  .ly_page {
    padding-block-end: 2.5rem;
  }

  .ly_post_inner,
  .ly_page_inner,
  .ly_404_inner {
    padding-inline: 30px;
  }
  .ly_about {
    padding-block-end: 2.5rem;
  }

  .ly_about_inner,
  .ly_comment_inner,
  .ly_related_inner {
    padding-inline: 30px;
  }
  .ly_about_inner>.bl_profileInfo {
    inline-size: 75%;
    margin-block-start: 1.25rem;
    margin-inline-start: auto;
  }
  .ly_comment {
    padding-block-end: 2.5rem;

    &+.ly_back .ly_back_inner {
      padding-block-start: 3.75rem;
    }
  }
  .ly_back {
    padding-block-end: 3.6875rem;
  }
  .ly_back_inner {
    inline-size: min(100%, 1300px);
    padding-inline: 30px;

  }
  .ly_related {
    padding-block: 3.75rem 4.25rem;

    &:has(:not(.bl_related_empty)) {
      &::before {
        inset-block-start: 19rem;
      }
    }
  }

  .ly_category,
  .ly_taxonomy,
  .ly_results,
  .ly_author,
  .ly_404 {
    padding-block: 6.4375rem;
  }
  .ly_auhor {
    padding-block: 6.25rem 9.0625rem;
  }
  .ly_auhor_inner {
    padding-inline: 30px;
  }

  .ly_results+.ly_back .ly_back_inner,
  .ly_404+.ly_back .ly_back_inner {
    padding-block-start: 1.875rem;
  }
  .bl_splide {
    margin-block-start: 3.5625rem;

    & .splide__slide {
      inline-size: 38.375rem !important;
    }

    & .splide__arrow {
      block-size: 1.125rem;
      inline-size: 1.125rem;
      position: initial;
    }

    & .splide__arrows {
      column-gap: .8rem;
      inset-block-start: -2rem;
    }

    & .bl_card_imgWrapper img {
      aspect-ratio: 580/387;
    }

    & .bl_card_ttl {
      margin-block-start: 1.125rem;
    }

    & .bl_card_meta {
      margin-block-start: .1rem;
    }

    & .bl_card_meta_info {
      align-self: center;
    }

    & .bl_card_author_body {
      align-self: end;
    }

    & .bl_card_author_name,
    & .bl_card_author_position {
      line-height: 1.2;
    }
  }
  .bl_mv {
    row-gap: 1.6rem;
  }
  .bl_mv_logo {
    inline-size: 13.0625rem;
  }
  .bl_mv_read {
    & br {
      display: none;
    }
  }
  .bl_filterSearch {
    inset-block-start: 6.875rem;
    inset-inline-end: 6.25rem;
  }
  .bl_filterSearch_filterBtn {
    column-gap: .357em;
    padding-inline: .926em;

    & svg {
      inline-size: auto;
    }
  }
  .bl_filterSearch_searchBtn {
    block-size: 1.875rem;
    inline-size: 1.875rem;
  }
  .bl_tab {
    margin-block-start: 6.8125rem;
    padding-block-end: .9rem;
  }
  .bl_tabList {
    inline-size: 40%;
    margin-inline: auto;
  }
  .bl_tabList_item {
    padding-inline: .2em;
  }
  .bl_tabPanel {
    padding-block-start: 1.25rem;
  }
  .bl_tabPanel_tags {
    gap: .5rem .25rem;
    justify-content: center;
  }
  .bl_searchForm {
    margin-block-start: 6.5rem;
    margin-inline-end: 4.4rem;
    padding-block-end: 2rem;
  }
  .bl_searchForm_submit {
    padding-inline: .8em;
  }
  .bl_modalContainer {
    padding-inline: 30px;

    &:has(.bl_searchForm) {
      & .bl_modalBody {
        max-inline-size: 22.95rem;
      }
    }
  }
  .bl_modalClose {
    block-size: 2rem;
    inline-size: 2rem;
    margin-block-end: -.9375rem;

    & svg {
      block-size: 1.875rem;
      inline-size: 1.875rem;
    }
  }
  .bl_micromodalAuthor_close {
    block-size: 5rem;
    inline-size: 5rem;
    inset-block-start: 2rem;
    inset-inline-end: 5.05rem;
  }
  .bl_micromodalAuthor_container {}
  .bl_micromodalAuthor_inner {
    gap: 1.25rem 2.4rem;
    grid-template:
      "thumb col" auto
      "thumb desc" auto
      "thumb profile" 1fr
      / 17.5rem 1fr;
    padding-block-start: 7.45rem;
    padding-inline: 30px;

    &>.bl_profileInfo {
      align-self: flex-start;
    }
  }
  .bl_micromodalAuthor_thumb {
    max-block-size: 17.5rem;
  }
  .bl_micromodalAuthor_col {
    display: block grid;
    gap: 0 calc(55 * var(--rem));
    grid-template-columns: auto 1fr;
    margin-block-end: unset;
  }
  .bl_micromodalAuthor_author {
    margin-block-start: .3rem;
  }
  .bl_micromodalAuthor_sns {
    column-gap: .8rem;
    margin-block-end: .2rem;
  }
  .bl_micromodalAuthor_column {
    margin-block-start: 3.7rem;
    padding-block-end: 7.45rem;
    padding-inline: 30px;
  }
  .bl_micromodalAuthor_column_ttl {
    padding-block-end: .35em;
  }
  .bl_cardUnit {
    margin-block-start: 3.75rem;

    &:has(:not(.el_nopost)) {
      gap: 2rem 3.75rem;
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .bl_card_imgWrapper {
    block-size: 18.75rem;
  }
  .bl_card_meta {
    grid-template-columns: 1fr auto;
  }
  .bl_card_meta_info {
    gap: .15625rem .375rem;
  }
  .bl_card_author {
    grid-template-columns: 1fr 1.875rem;
  }
  .bl_card_author_thumb {
    block-size: 1.875rem;
  }
  .bl_auhor {
    column-gap: 1.8125rem;
    grid-auto-columns: 8.125rem;
    margin-block-start: 1.25rem;
  }
  .bl_auhor_body {
    row-gap: .3125rem;
  }
  .bl_profileInfo {
    grid-template-columns: max-content 1fr;
  }
  .bl_post {
    gap: 1.3125rem 1.875rem;
    grid-template:
      "thumb header" auto
      "thumb footer" 1fr
      / 52.78% 38%;
  }
  .bl_post_header {
    grid-area: header;
    padding-inline: 30px;
  }
  .bl_post_header {
    margin-block-start: 6.4375rem;
  }
  .bl_post_header_ttl {
    margin-block-start: .25em;
  }
  .bl_post_header_label {
    margin-block-start: .8rem;
  }
  .bl_post_thumb {
    grid-area: thumb;
    margin-block-start: unset;
    max-block-size: 31.5rem;

    & img {
      aspect-ratio: initial;
    }
  }
  .bl_post_footer {
    grid-area: footer;
    margin-block-start: unset;
    padding-inline: 30px;
  }
  .bl_post_footer_author {
    /* margin-block-start: 2.4rem; */
  }
  .bl_postBody {
    margin-block-start: 6.6875rem;
  }
  .bl_postBody_tag {
    gap: .4375rem;
    margin-block-start: 1.25rem;
  }
  .bl_postBody_favorite {
    margin-block-start: 1.5rem;

    &>.simplefavorite-button.preset {
      column-gap: .29rem;

      &::before {
        block-size: 1.5rem;
        inline-size: 1.6875rem;
      }
    }
  }

  .bl_about,
  .bl_comment {
    grid-template-columns: 25% 1fr;
  }
  .bl_about {
    padding-block-start: 2.5rem;
    row-gap: unset;
  }
  .bl_comment {
    padding-block-start: 2.5rem;
  }
  .bl_about_inner {
    gap: 0 2.5rem;
    grid-template: unset;
    grid-template-columns: 21.51% auto;
  }
  .bl_about_thumb {
    grid-area: unset;
    max-block-size: 200px;
  }
  .bl_about_body {
    display: unset;
  }
  .bl_about_col {
    column-gap: 3.3125rem;
    grid-area: unset;
    grid-template-columns: auto 1fr;
    grid-template-rows: unset;
  }
  .bl_about_sns {
    margin-block-end: .1875rem;
  }
  .bl_about_desc {
    grid-area: unset;
    inline-size: 57%;
    margin-block-start: 1rem;
  }
  .bl_related {
    margin-block-start: 2.875rem;
  }
  .bl_related_post {
    gap: .5rem .8125rem;
    grid-template: "time thumb" 18.75rem ". ttl" auto / 2.6875rem 18.75rem;
  }
  .bl_related_post_time {
    margin-block-start: unset;
  }
  .bl_breadcrumb {
    border-block-start: unset;
    inline-size: min(100%, 1288px);
    margin-block-start: .6875rem;
    padding-inline: 30px;
  }
  .el_label {
    padding-block: .05em;
    padding-inline: .62em;
  }
  .el_tag {
    padding-inline: 1.142em;
  }
}
@media screen and (1024px <= width) {
  .bl_fixedCopy {
    inset-block-start: 8.2rem;
    inset-inline-start: 6.3rem;
  }
}
@media (min-width: 1200px) {
        .site-header__inner {
            height: 72px;
            padding: 0 32px;
        }
        .custom-logo img {
            width: 48px;
        }
        .header-navigation {
            align-items: center;
            display: flex;
            flex: 1;
            justify-content: center;
        }
        #menu-navigation-header>li.divide {
            margin-left: 1rem;
            padding-left: 1rem;
            position: relative;
        }

        #menu-navigation-header>li.divide::before {
            border-color: rgb(191 191 191 / 1);
            border-left-style: solid;
            border-left-width: 1px;
            content: '';
            display: inline-block;
            height: 1.5rem;
            left: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .header-utilities {
            display: flex;
        }
        .btn-hamburger-menu {
            display: none;
        }
        .mobile-nav-overlay {
            display: none !important;
        }
}
@media screen and (1280px <= width) {
  .bl_auhor {
    padding-inline: max(12.5rem, calc((100% - 1040px) / 2));
  }
  .bl_related {
    padding-inline: max(8.125rem, calc((100% - 1240px) / 2));
  }
}
@media (max-width: 1023px) {
        .footer-inner {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
        }

        .follow-us {
            border-top: 1px solid #333;
            grid-column: 1 / -1;
            margin-top: 8px;
            padding-top: 24px;
        }

        .sns-icons {
            flex-wrap: wrap;
        }
}
@media (max-width: 768px) {
        .btn-site-switcher {
            margin: 10px auto 40px !important;
            padding: 0 0;

        }
}
@media (max-width: 767px) {
        .modal-overlay {
            align-items: stretch;
            backdrop-filter: blur(0px);
            background: #000;
            padding-top: 0;
        }
        .site-switcher {
            background: #000;
            height: 100%;
            max-height: 100%;
            max-width: 100%;
            overflow-y: auto;
        }
        .site-switcher__inner {
            overflow-y: auto;
            padding: 24px 24px 0;
        }
        .btn-site-switcher-close span {
            background: #fff;
        }
        .site-switcher__header {
            align-items: flex-start;
            flex-direction: column;
        }
        .site-switcher__title {
            color: #fff;
            font-size: 26px;
            margin-top: 40px;
        }
        .filter-regions svg {
            color: #fff;
        }
        .filter-regions input {
            border-bottom-color: #555;
            color: #fff;
            width: 100%;
        }

        .filter-regions input::placeholder {
            color: #888;
        }
        .site-switcher--regions {
            overflow-y: visible;
            padding-right: 0;
        }
        .continent>.region-name {
            border-bottom-color: #444;
            color: #fff;
            font-size: 14px;
        }
        .menu-depth-1 {
            gap: 16px 0;
            grid-template-columns: repeat(2, 1fr);
        }
        .menu-depth-1>li.multi>p {
            color: #fff;
        }
        .menu-depth-1>li>p {
            color: #fff;
        }
        .menu-depth-2 li a {
            color: #ccc;
        }
        .footer-inner {
            grid-template-columns: 1fr;
            padding: 20px 20px 40px;
        }

        .follow-us {
            grid-column: 1;
        }

        /* collapsible nav on mobile */
        .footer-navigation>ul>li {
            border-top: 1px solid #333;
            padding: 0;
        }

        .footer-navigation>ul>li>a {
            align-items: center;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            margin-bottom: 0;
            padding: 14px 0;
        }

        .footer-navigation>ul>li.open>a::after {
            content: '−';
        }

        .footer-navigation .sub-menu {
            padding-bottom: 12px;
        }

        .footer-navigation>ul>li.open>.sub-menu {
            display: block;
        }

        .footer-bottom-inner {
            align-items: center;
            flex-direction: column-reverse;
            gap: 12px;
            text-align: center;
        }

        .bottom-navigation ul {
            justify-content: center;
        }

        .footer-brand {
            flex-direction: column;
            margin-top: 20px;
        }
}
@media (any-hover: hover) {
  :where(:any-link, :enabled, summary):hover {
    --default: ;
    --hover: initial;
  }
  .bl_filterSearch_filterBtn:hover path {
    stroke: #FFF;
  }
  .bl_filterSearch_searchBtn:hover path {
    fill: #FFF;
  }
  .bl_modalClose:hover {
    & circle {
      fill: #FFF;
    }

    & rect {
      fill: #000;
    }
  }
  .bl_card_meta_info_like {
    & .simplefavorite-button.preset:hover {
      &::before {
        background-image: url(../images/icon_heart-filled-sm.svg);
      }
    }
  }
  .bl_postBody_favorite {
    & .simplefavorite-button.preset:hover {
      &::before {
        background-image: url(../images/icon_heart-filled-lg.svg);
      }
    }
  }
  .bl_back:hover path {
    stroke: #FFF;
  }
}
@media (prefers-reduced-motion: reduce) {

  *,
  ::before,
  ::after,
  ::backdrop {
    animation-delay: 0s !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: scroll !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 1ms !important;
  }
}
@media print {
  :where(pre) {
    /* 印刷時にテキストが折り返されないようにする */
    text-wrap-mode: unset;
  }
}

/*# sourceMappingURL=sourcemaps/style.css.map */