/* =================================================================
   1. プログレスリング & コントロールバー (Sony Style / 最新版)
   ================================================================= */

/* --------------------------------------
   設定: 色やサイズの調整 (ここで一括管理)
   -------------------------------------- */
:root {
  --sng-dot-size: 14px;       /* ドット全体のサイズ (小ぶり) */
  --sng-ring-color: #ff6600;  /* 進捗リングの色 (オレンジ) */
  --sng-ring-base: #ddd;      /* リングの背景線の色 */
  --sng-arrow-bg: #eee;       /* 矢印ボタンの背景色 */
  --sng-btn-bg: #333;         /* 停止・再生ボタンの背景色 */

  /* リングの計算値 (変更不要) */
  --sng-circumference: 62.83;
}

/* --------------------------------------
   レイアウト: コントロールバー全体
   -------------------------------------- */
.sng-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;            /* ボタン同士の間隔 */
    margin-top: 15px;     /* 画像との距離 */
    position: relative;
    z-index: 2;
}

/* --------------------------------------
   矢印ボタン (Splideデフォルトの上書き)
   -------------------------------------- */
.sng-controls .splide__arrow {
    position: static !important; /* 絶対配置を解除 */
    transform: none !important;
    background: none; /* 背景色を適用 */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    border: none;
}
.sng-controls .splide__arrow svg {
    width: 14px;
    height: 14px;
    fill: #333;
}

/* --------------------------------------
   ページネーション (ドットエリア)
   -------------------------------------- */
.sng-controls .splide__pagination {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    transform: none !important;
    display: flex;
    gap: 8px; /* ドット同士の間隔 */
}

/* ドット単体のリセット */
.splide__pagination__page {
    position: relative;
    width: var(--sng-dot-size);
    height: var(--sng-dot-size);
    border-radius: 50%;
    background: transparent !important; /* 背景はSVGに任せる */
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1;
    border: none;
}

/* --------------------------------------
   SVGプログレスリング (Sony風実装)
   -------------------------------------- */
/* リング全体を90度回転させて12時の位置から開始 */
.sng-svg-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

/* 背景の円 (グレー) */
.sng-circle-bg {
    fill: transparent;
    stroke: var(--sng-ring-base);
    stroke-width: 2px; /* 線の太さ */
}

/* 進捗の円 (オレンジ) */
.sng-circle-bar {
    fill: transparent;
    stroke: #373395;
    stroke-width: 3px; /* 線の太さ (Sony風なら細め推奨、好みで4pxでも可) */
    stroke-dasharray: var(--sng-circumference);
    stroke-dashoffset: var(--sng-circumference); /* 初期状態は隠す */
}

/* アニメーション定義: 5秒かけて線を伸ばす */
.splide__pagination__page.is-active .sng-circle-bar {
    animation: sngProgress 5s linear forwards;
}

@keyframes sngProgress {
    to { stroke-dashoffset: 0; }
}

/* 停止中(.is-paused)はアニメーションを一時停止 */
.splide.is-paused .splide__pagination__page.is-active .sng-circle-bar {
    animation-play-state: paused;
}

/* --------------------------------------
   停止・再生ボタン (CSS図形アイコン)
   -------------------------------------- */
.sng-toggle-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--sng-btn-bg); /* 黒背景 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.3s;
}

.sng-toggle-btn:hover {
    background: #000;
}

/* 共通設定: 初期は非表示 */
.sng-toggle-btn span {
    display: none;
}

/* ■ 停止アイコン (二本線) */
.sng-toggle-btn .sng-icon-pause {
    width: 10px;
    height: 12px;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    box-sizing: border-box;
}

/* ▶ 再生アイコン (三角形) */
.sng-toggle-btn .sng-icon-play {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #fff;
    margin-left: 2px; /* 中央寄せ調整 */
}

/* クラスによる表示切り替え */
.splide:not(.is-paused) .sng-toggle-btn .sng-icon-pause { display: block; }
.splide.is-paused .sng-toggle-btn .sng-icon-play { display: block; }


/* =================================================================
   2. その他のサイトレイアウト (記事一覧・グリッドなど)
   ================================================================= */

.recent-posts-list {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左1 : 右4 */
  gap: 20px 30px;
  max-width: 1180px;
}

/* 左カラム（1番目だけ縦にまたぐ） */
.recent-posts-list li:first-child {
  grid-row: 1 / span 5; /* 右側の件数に合わせて伸ばす */
  width: 100%;
}

/* 右側は普通に縦に並ぶ */
.recent-posts-list li:not(:first-child) {
  grid-column: 2;
  width: 100%;
}

body .is-layout-flex {
    max-width: 1180px;
    margin-bottom: 3rem;
    border-top: 2px solid #ddd;
}

.recent-posts-list li a span {
    text-align: left;
    font-size: 14px;
}

.recent-posts-list li a {
    display: flex;
    flex-wrap: wrap;
}

.recent-posts-list li:not(:first-child) a {
    display: flex;
    justify-content: space-between;
}

.recent-posts-list li:not(:first-child) a .posts-list.flex-layout {width: 75%;}

.recent-posts-list li:not(:first-child) a img {
    width: 25%;
    order: 2;
}

.catpost-cards.catpost-cards--column-2 {max-width: 1180px;grid-template-columns: repeat(3, 1fr);margin-bottom: 60px;}

.c_linkto_wrap {max-width: unset;}

.catpost-cards.catpost-cards--flat.catpost-cards--column-3 {
    max-width: unset;
}

.is-layout-constrained > .alignwide {
    max-width: 1180px;
}

/* =================================================================
   3. スライダー内のレイアウト (画像左・テキスト右など)
   ================================================================= */

.home .splide {
    width: 100% !important;
    height: auto;
}

.home .splide__track .splide__slide {
    width: 100% !important;
}

/* スライド内のグリッドレイアウト */
.home .splide__track .splide__slide a {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 画像とテキストを半々 */
    align-items: center;
    gap: 30px;
    box-sizing: border-box;
}

/* 画像エリア */
.home .splide__track .splide__slide a .rlmg {
    height: auto;
    order: 2; /* 画像を右へ */
    max-width: 520px;
}

.home .splide__track .splide__slide a .rlmg img {
    position: relative;
    height: auto;
}

/* テキストエリア */
.home .splide__track .splide__slide a .rep {
    position: relative;
    background: none;
    color: #000;
}

span.rep-date {
    font-size: 1.2rem;
}

.flex-layout {
    width: 70%;
}

/* フェードアニメーションを滑らかにする設定 */
.splide.is-active .splide__slide {
  transition: opacity 0.8s ease !important;
}

.splide__slide {
  opacity: 0;
}

.splide__slide.is-active {
  opacity: 1;
}
.footer-top-area ul.footer-cate-link li.cat-item ul.children li.cat-item a {
    font-weight: bold;
    font-size: 13px;
    font-weight: normal;
}

.footer-top-area ul.footer-cate-link li.cat-item {
    list-style: none;
}

.footer-top-area ul.footer-cate-link li.cat-item ul.children {
    padding-left: 1rem;
}

.footer-top-area ul.footer-cate-link li.cat-item ul.children li.cat-item a:before {
    content: "-";
}

.footer-top-area ul.footer-cate-link li.cat-item a {
    font-weight: bold;
    font-size: 14px;
}

@media screen and (max-width: 768px){
.home .splide__track .splide__slide a .rlmg {padding: 0;}

.home .splide__track .splide__slide a {
    display: block;
}

.home .splide {
    margin: 0 auto;
}

.is-layout-constrained > .alignwide {
    margin-bottom: 2rem;
}

.sng-controls .splide__arrow {
    box-shadow: none;
}
    .recent-posts-list {display: block;}

.recent-posts-list li:first-child {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 15px;
}

.recent-posts-list li:not(:first-child) a {border-bottom: 1px solid #ddd;padding-bottom: 1rem;}
.recent-posts-list li:first-of-type a .flex-layout {width: 100%;}

.recent-posts-list li:first-of-type a .flex-layout p {
    font-size: 20px;
}

.recent-posts-list li a p {
    margin-bottom: 10px;
    font-size: 16px;
}

.catpost-cards.catpost-cards--column-2 {
    display: block;
}
.home .splide__track .splide__slide a .rep {
    padding: 0;
    margin-top: 1rem;
}

body .entry-content > *:first-child {
    margin-bottom: 2rem;
}

span.rep-date {
    font-size: 0.8rem;
}

.sng-toggle-btn {
    width: 20px;
    height: 20px;
}

.splide.is-paused .sng-toggle-btn .sng-icon-play {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #fff;
    margin-left: 2px;
}
    }