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

/* 全アイテム非表示（強いテーマにも勝てるようにoptionalで !important ） */
.thumb-slider-gallery .blocks-gallery-item,
.thumb-slider-gallery .wp-block-image,
.thumb-slider-gallery .slide-item {
  display: none;
}

.thumb-slider-gallery .is-active {
  display: block;
}

/* サムネ行 */
.thumb-slider-gallery .thumb-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
}

.thumb-slider-gallery .thumb-nav img {
  width: 80px;
  height: auto;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: .7;
  transition: opacity .2s;
}

.thumb-slider-gallery .thumb-nav img.active {
  border-color: #0073aa;
  opacity: 1;
}

/* フェード演出（任意） */
.thumb-slider-gallery .is-active img {
  animation: fadein .25s ease;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* サムネを正方形で固定（中央トリミング） */
.thumb-slider-gallery .thumb-nav img {
  width: 96px;          /* お好みで 80〜120px などに */
  height: 96px;         /* 同上：幅と高さを同値に */
  object-fit: cover;    /* アスペクト比を保ったまま中央トリミング */
  object-position: center;
  max-width: none;      /* テーマ側の max-width:100% を無効化 */
  display: block;       /* 画像下のすき間対策 */
  flex: 0 0 auto;       /* Flex収縮で潰れないように */
  border: 2px solid transparent;
  opacity: .7;
  transition: opacity .2s;
}

.thumb-slider-gallery .thumb-nav img.active {
  border-color: #0073aa;
  opacity: 1;
}

/* メイン画像を16:9で表示（中央トリミング） */
.thumb-slider-gallery .is-active img {
  width: 100%;
  aspect-ratio: 16 / 9; /* ここで比率固定 */
  height: auto;         /* 高さは比率から自動算出 */
  object-fit: cover;    /* 全体表示なら contain */
  object-position: center;
  display: block;
}

.c-postTitle__ttl {
    margin-top: 20px;
    font-size: 25px;
    line-height: 1.4;
    width: 100%;
}