@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
*/

/* ----------------------------------------------------------------------------
  Custom Fonts
---------------------------------------------------------------------------- */
/* Noto Sans JP サブセット - Regular */
@font-face {
    font-family: 'NotoSansJP-Subset'; /* CSSで呼び出すフォント名 */
    src: url('./fonts/NotoSansJP-Subset-Regular.woff2') format('woff2'),
         url('./fonts/NotoSansJP-Subset-Regular.woff') format('woff');
    font-weight: 400; /* Regularのウェイト */
    font-style: normal;
    font-display: swap; /* フォントの読み込み戦略 */
}

/* Noto Sans JP サブセット - Bold (もしBoldも使う場合) */
@font-face {
    font-family: 'NotoSansJP-Subset'; /* 同じフォント名でウェイト違いを定義 */
    src: url('./fonts/NotoSansJP-Subset-Bold.woff2') format('woff2'),
         url('./fonts/NotoSansJP-Subset-Bold.woff') format('woff');
    font-weight: 700; /* Boldのウェイト */
    font-style: normal;
    font-display: swap;
}


/* サイト全体に適用 */
body {
    font-family: 'NotoSansJP-Subset', "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* SWELLの特定の要素に適用を上書きする（必要であれば） */
/* SWELLがデフォルトでfont-familyを強く指定している場合、!importantが必要になることがあります。 */
/* ただし、!importantの多用は避けるのがベストプラクティスです。 */
/* 例：記事本文のフォントを確実に上書きしたい場合 */
.p-article-content,
.p-entry-content {
    font-family: 'NotoSansJP-Subset', sans-serif !important;
}

/* その他の要素でフォントを上書きしたい場合も同様に追記 */
/* 例：見出し */
h1, h2, h3, h4, h5, h6 {
    font-family: 'NotoSansJP-Subset', sans-serif !important;
}

/* =========================================================
//  コピペで簡単！無限ループアニメーション
// ========================================================= */

/* 無限ループアニメーション */
@keyframes infinite-loop {
  to {
    transform: translateX(-100%);
  }
}
.infiniteLoop {
  /* 設定項目 START */
  --item-max-width: 400px; /* 各アイテムの最大幅 */
  --item-mobile-width: 80vw; /* スマホでのアイテムの幅 */
  --duration: 12s; /* アニメーションスピード */
  --gap: 1rem; /* 各アイテム同士の間隔 */
  /* 設定項目 END */

  --play-state: running;
  --direction: normal;
  --flex-direction: row;
}

/* アニメーションの方向を逆にします */
.infiniteLoop.-reverse {
  --direction: reverse;
  --flex-direction: row-reverse;
}

/* ホバーで一時停止 */
.infiniteLoop:hover {
  --play-state: paused;
}

.infiniteLoop > * {
  display: flex;
}

.infiniteLoop > * > * > * {
  overflow: hidden;
  transform: translateX(0);
  flex-wrap: nowrap !important;
  flex-direction: var(--flex-direction, row);
  margin: 0 !important;
  padding-left: var(--gap) !important;
  gap: var(--gap);
  width: calc(var(--infinite-loop_width, 100vw) * 1);
}

.infiniteLoop > * > * > * > * {
  padding: 0 !important;
}

.infiniteLoop > * > * > * > * > * {
  max-width: var(--item-max-width, 0px);
  margin-inline: auto;
}

@media (min-width: 600px) {
  .infiniteLoop > * > * > * {
    animation: infinite-loop var(--duration) linear infinite both var(--play-state) var(--direction);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* =========================================================
// 無限ループアニメーション - モバイル対応 再々修正 (原点回帰 + カラム調整)
// ========================================================= */

/* 無限ループアニメーション */
@keyframes infinite-loop {
  to {
    transform: translateX(-100%);
  }
}

/* 無限ループアニメーションのメインスタイル */
.infiniteLoop {
  /* 設定項目 START */
  --item-max-width: 400px; /* 各アイテムの最大幅 */
  --duration: 20s; /* アニメーションスピード */
  --gap: 1rem; /* 各アイテム同士の間隔 */

  /* スマホでの表示カラム数を制御するための変数 */
  --sp-columns: 2; /* デフォルトは2カラム */
  /* 各アイテムの幅を計算 (ギャップも考慮) */
  --item-mobile-calculated-width: calc((100vw - var(--gap) * (var(--sp-columns) - 1)) / var(--sp-columns));
  /* 設定項目 END */

  --play-state: running;
  --direction: normal;
  --flex-direction: row;
}

.infiniteLoop.-reverse {
  --direction: reverse;
  --flex-direction: row-reverse;
}

.infiniteLoop:hover {
  --play-state: paused;
}

.infiniteLoop > * {
  display: flex;
}

/* アニメーションさせる要素 (p-postListWrapを囲む要素) */
.infiniteLoop > * > * > * {
  overflow: hidden; /* コンテンツがはみ出した場合に非表示 */
  transform: translateX(0);
  flex-wrap: nowrap !important; /* フレックスアイテムの折り返し禁止を強制 */
  flex-direction: var(--flex-direction, row);
  margin: 0 !important;
  padding-left: var(--gap) !important; /* 左側のパディングは維持 */
  gap: var(--gap); /* フレックスアイテム間のギャップ */
  /* ここは、PC版と同じく、内部のリストの合計幅に依存するため、100vwに設定 */
  width: calc(var(--infinite-loop_width, 100vw) * 1);
  /* will-changeとbackface-visibilityは、アニメーション時に追加されるためここでは記述しない */
}

.infiniteLoop > * > * > * > * {
  padding: 0 !important; /* アイテム内の不要なパディングをリセット */
}

.infiniteLoop > * > * > * > * > * {
  max-width: var(--item-max-width, 0px); /* アイテムの最大幅 */
  margin-inline: auto; /* PC版では中央寄せを維持 */
}


/* PC・タブレット向け (600px以上) */
@media (min-width: 960px) {
  /* 無限ループアニメーションを適用 */
  .infiniteLoop > * > * > * {
    animation: infinite-loop var(--duration) linear infinite both var(--play-state) var(--direction);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* p-postList.-sp-col1 はPCでは影響がないので触らない */
}


/* スマートフォン向け (600px未満) */
@media not all and (min-width: 960px) {
  /*
    無限ループを有効にするため、2つ目以降の p-postListWrap を非表示にする設定を削除
    (以前の `infiniteLoop > * > *:nth-child(n + 2) { display: none; }` は不要)
  */

  /* 無限ループアニメーションを適用 */
  .infiniteLoop > * > * > * {
    animation: infinite-loop var(--duration) linear infinite both var(--play-state) var(--direction);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    /* モバイルの手動スクロール用のプロパティを解除または無効化 */
    -webkit-scroll-snap-type: none;
    scroll-snap-type: none;
    overflow-x: hidden; /* 横スクロールバーを非表示 */
    padding: 0 !important; /* SWELLのパディングをリセット */
    -webkit-overflow-scrolling: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* SWELLが生成する ul.p-postList に適用されるスタイルを上書き */
  .infiniteLoop ul.p-postList {
    display: flex !important; /* フレックスボックスとして表示を強制 */
    flex-wrap: nowrap !important; /* アイテムの折り返しを禁止を強制 */
    gap: var(--gap) !important; /* アイテム間のギャップを強制 */
    width: auto !important; /* 幅指定をリセット */
    margin: 0 !important; /* マージンをリセット */
    padding: 0 !important; /* パディングをリセット */
    /* -sp-col1 クラスの特定のスタイルがあれば、ここで上書きします。
       例: -sp-col1が特定のwidthやflex-basisを設定している場合など */
  }

  /* 各リストアイテム (li.p-postList__item) の幅を調整 */
  .infiniteLoop .p-postList__item {
    flex-shrink: 0 !important; /* アイテムが縮まないように強制 */
    /* カラム計算用の変数を使用 */
    width: var(--item-mobile-calculated-width) !important; /* 強制的に幅を適用 */
    max-width: none !important; /* max-widthをリセット */
    padding: 0 !important; /* アイテムのパディングもリセット */
    scroll-snap-align: none; /* スクロールスナップを無効化 */
  }

  /* アイテムの中央寄せのための margin-inline: auto; はモバイルでは不要 */
  .infiniteLoop > * > * > * > * > * {
    margin-inline: unset !important;
  }

  /* WebKit系ブラウザでのスクロールバー非表示は維持 */
  .infiniteLoop > * > * > *::-webkit-scrollbar {
    display: none;
  }

  /*
   * カラム数を変更したい場合は、このメディアクエリ内で .infiniteLoop に
   * --sp-columns: X; を追加してください。
   * 例: 3カラムにする場合
   * .infiniteLoop {
   * --sp-columns: 3;
   * }
   */
}