/*
Theme Name: RIT_CUSTOM
Theme URI: https://example.com
Author: kuwahara
Description: Custom theme for RIT
Version: 1.0
*/

/*全体のスタイル*/
body {
    margin: 0;
    font-family: "interstate", "Noto Sans JP", "Zen Maru Gothic", sans-serif;
    cursor: url('https://wptest.skr.jp/wp-content/uploads/2026/03/cursor-icon2.svg') 16 16, auto;
}

.cursor-trail {
    position: absolute;
    width: 4px;            /* 発生時の太さ（細めに設定） */
    height: 4px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    animation: smokeFade 0.8s ease-out forwards;
    filter: blur(1px);     /* 発生時から少しぼかす */
}

@keyframes smokeFade {
    0% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        /* 3倍に広がりながら消えることで、拡散する煙を表現 */
        transform: translate(-50%, -50%) scale(3);
        filter: blur(4px); /* 消える時はよりぼかす */
    }
}

/* body直下にフェードアウト用の白い層を作る */
body.start-white-out::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 10000; /* section1(9999)より上に */
    pointer-events: none;
    animation: whiteOut 2.2s forwards;
}

/* =========================================
   固定の申し込みボタン
========================================= */
.float-button {
    width: 10vw;
    height: 10vw;
    position: fixed;
    z-index: 100;
    top: 77%;
    right: 10%;
}

.sp-float-button{
    display: none;
}


.section2,
.section3,
.section4,
.section5,
.section6,
.section7 {
    padding: 5vw 0;
}

/*ヘッダーのスタイル*/
/* ===========================
   HEADER BASE
=========================== */
.site-header {
    width: 100vw;
    height: 96px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 0; /*中央揃えしやすく */
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 999;
    display: flex;
    align-items: center; /* 高さ120pxの中で中央揃え */
}

/* 内側のレイアウト */
.header-inner {
    width: 70%;
    display: flex;
    justify-content: space-between;
    align-items: center; /* 完全中央揃え */
    margin: 0 auto;
}

/* ロゴ */
.header-logo img {
    height: 60px; /* 高さ120pxに合わせて少し大きめに */
    width: auto;
}

/* ナビゲーション */
.header-nav ul {
    display: flex;
    gap: 2vw;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1vw;
    align-items: center;
}

.header-nav a,
.lang-trigger {
    text-decoration: none;
    color: #211815;
    font-weight: 300;
    cursor: pointer;
    font-size: 18px;
}

.contact-cap a{
    border: #211815 1px solid;
    border-radius: 20px;
    background-color: transparent;
    padding: 5px 15px;
}

.lang-trigger{
    color: #fff;
    background-color: #211815;
    padding: 5px 15px;
}

/* ハンバーガーはPCでは非表示 */
.hamburger {
    display: none;
}

/* ===========================
   CART
=========================== */
.nav-cart a {
    position: relative;
}

.cart-icon { width: 2vw; height: 2vw;}

.cart-count {
    background: #e60023;
    color: #fff;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 50%;
    position: absolute;
    top: -100%;
    right: -20%;
}

@media (max-width: 768px){
    .cart-icon{ width: 4vh; height: 4vh;}

    .cart-count {font-size: 1.5vh; padding: 2px 5px; top:-35%; right: -25%; }
}


/* ===========================
   LANGUAGE DROPDOWN
=========================== */
.nav-lang {
    position: relative;
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: 130%; /* LANGUAGE の真下に表示 */
    right: 0;
    background: #fff;
    padding: 10px 15px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 100%;
    z-index: 1000;
    text-align: center;
}

/* hover で開く */
.nav-lang:hover .lang-dropdown {
    display: flex;
    justify-content: center;
}

/* GTranslate の中のリンク調整 */
.lang-dropdown a {
    color: #333 !important;
    display: block;
    padding: 5px 0;
    text-align: center;
    justify-content: center;
    width: 100%;
}

/*section1*/
/* エントランス動画の全画面固定 */
.section1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    background: #000;
    overflow: hidden;
    cursor: pointer;
}

.section1 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 白いオーバーレイ（最初は透明） */
.section1::after {
    content: "";
    position: absolute;
    inset: 0;
    background: white;
    opacity: 0;
    pointer-events: none;
}

/* ① 白フェードイン（動画が白に覆われる） */
.section1.white-in::after {
    animation: whiteIn 1.2s forwards;/*1.2に戻す*/
}

/* ② 白フェードアウト（本編が見えてくる） */
.section1.white-out::after {
    animation: whiteOut 2.2s forwards;
}

.section1.white-out video {
    display: none;
}

/* 白フェードイン */
@keyframes whiteIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* 白フェードアウト */
@keyframes whiteOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* スクロール禁止 */
body.no-scroll {
    overflow: hidden;
}

#pcmovie { object-position: top;}

#spmovie{
    display: none;
}

.page-id-7090 main { margin-top: 5vw;}

/* =========================================
   section2 全体
========================================= */
.section2 {
    background: #f6f6f6;
    padding: 0;
    padding-bottom: 5vw;
    margin-top: 96px;
}

/*===PCではボタンを非表示===*/
.section2 .wp-block-button__link{ display: none; }

/* =========================================
   PLANセクションのタイトル
========================================= */
.plan-headline-group > .wp-block-group__inner-container{
    display: flex;
    margin-bottom: 2vw;
    padding: 0 5vw;
    align-items: center;
    gap: 3vw;
}

.plan-section-headline{
    font-size: 7vw;
    font-weight: 500;
    letter-spacing: 0.3vw;
    color: #fe9fc4;
    margin: 0;
}
.plan-headline-group p{
    font-size: 1.2vw;
    font-weight: 500;
    letter-spacing: 0.1vw;
    color: #645f5c;
}

/* =========================================
   スライダー全体（UL）
========================================= */
/*ピックアップ以外を半透明にする*/
.topics-slider li {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.topics-slider li.is-active {
    opacity: 1;
}

/*スライダー部*/
.topics-slider {
    display: flex;                 /* 横並びにする */
    overflow-x: scroll;            /* 横スクロールを有効化 */
    scroll-behavior: smooth;       /* スムーズスクロール */
    -webkit-overflow-scrolling: touch;
    gap: 3vw;                      /* スライド間の余白 */
    padding: 0;
    margin: 0;
    list-style: none;              /* UL の点を消す */
}

/* ドラッグ中は全てのクリックを無効化 */
.topics-slider.dragging {
    pointer-events: none;
}

/* ただしリンクだけはクリック可能に戻す */
.topics-slider.dragging a {
    pointer-events: auto;
}

/* =========================================
   スライド1枚（LI）
========================================= */
.topics-slider > li {
    flex: 0 0 auto;
    display: flex;
    gap: 1vw;
    height: 35vw;
    box-sizing: border-box;
    pointer-events: none;
    padding-left: 2vw;
}

/* =========================================
   左側の帯（topics-band）
========================================= */
.topics-band {
    width: 7vw;
    height: 100%;
    background: #fff;
    border-left: 1px solid #403d3c;
    border-top: 1px solid #403d3c;
    padding: 1vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* タイトル（post-title）→ 横文字を90度回転 */
.topics-band h1 {
    font-size: 2.5vw;
    color: #403d3c;
    white-space: nowrap;
    font-weight: lighter;
    font-style: italic;
    letter-spacing: 0.3vw;
    writing-mode: vertical-rl;
    margin: 0;
     /* 上に寄せる */
    align-self: center;
    user-select: none;
}

/* 抜粋内（excerpt）→ 縦書き */
.topics-band-title {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 1.1vw;
    color: #403d3c;
    line-height: 1.5;
    margin: 0;
    text-align: left;
    font-weight: lighter;
     /* 下に寄せる */
    align-self: center;
    max-height: 50%;
    font-feature-settings: "palt";
    text-indent: -1.1vw;
    user-select: none;
}

/* =========================================
   右側のカード（topics-card）
========================================= */
.topics-card {
    width: 60vw;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 120px 0;
}

.topics-card a { 
    -webkit-user-drag: none; 
    user-select: none;
}

/* アイキャッチ画像 */
.topics-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: auto;
    aspect-ratio: 1.618/1;
    /* 画像そのものがブラウザによって「掴まれる」のを防ぐ */
    -webkit-user-drag: none; 
    user-select: none;
}

/* 画像上のテキスト（content） */
.topics-card-content p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: fit-content;
    padding: 1vw 3vw;
    color: #f6f6f6;
    font-size: 1.9vw;
    line-height: 2;
    margin: 0;
    box-sizing: border-box;
    font-feature-settings: "palt";
    backdrop-filter: blur(2px);
    text-shadow: 0 0 1px #090909;
    user-select: none;
}

/*スクロールバー非表示*/
/* Chrome / Edge / Safari */
.topics-slider::-webkit-scrollbar {
    display: none;
}

/* Firefox */
.topics-slider {
    scrollbar-width: none;
}

/* IE / 古い Edge */
.topics-slider {
    -ms-overflow-style: none;
}

/* ======================================
    section3（PC版 Grid 化）
====================================== */
.section3 {
    background-color: #fea4c2;
    color: #fff;
    padding: 10vw 5vw;

    /* ★ 5×4 グリッドを定義 */
    display: grid;
    grid-template-columns: 25% 20% 10% 20% 25% ;
    grid-template-rows: 25% 25% 25% 25% ;

    /*マップボタンの位置の親*/
    position: relative;
}

/* -------------------------------
   共通テキスト
-------------------------------- */
.section3 h2 {
    color: #fff;
    width: 100%;
    text-align: justify;
    text-align-last: justify;
    font-size: 2.5vw;
    font-family: "interstate";
    font-weight: normal;
    margin: 0;
}

.section3-ruby {
    font-size: 1.5vw;
    margin: 0;
    font-weight: 500;
    line-height: 2;
}

.big_w{
    font-size: 7vw;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    line-height: 1;
}

/* ======================================
   1) what-headline → グリッド1
====================================== */
.what-headline {
    grid-column: 1 / 2; /* 1列目 */
    grid-row: 1 / 2;    /* 1行目 */
}

/* WHAT 内部の既存レイアウトは維持 */
.what_head > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    gap: 0;
}

.what_head h2 {
    margin: 0;
    width: 50%;
}

.what_head img {
    width: 20vw;
    height: auto;
}

/* ======================================
   2) image-blossum → グリッド2
====================================== */
.image-blossum {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    width: 75%;
    transform: translateY(-7vw);
}

.image-blossum img {
    width: 100%;
    height: auto;
}

/* ======================================
   3) theme-buttons → グリッド6,11
====================================== */
.theme-buttons {
    grid-column: 1 / 2; /* 左側に縦並び */
    grid-row: 2 / 4;    /* 6 と 11 を縦に占有 */
}

.theme-buttons .wp-block-group__inner-container{
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.theme-buttons .wp-block-button{
    width: 100%;
}

/* 既存のボタンデザインはそのまま */
.section3 .wp-block-button__link {
    text-align: left;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    padding: 0 1vw;
    display: block;
    aspect-ratio: 6/1;
    font-size: 1.3vw;
    letter-spacing: 0.1vw;
}

/* ======================================
   4) experience-text → グリッド16,17
====================================== */
.experience-text {
    grid-column: 1 / 3; /* 16,17 を占有 */
    grid-row: 4 / 5;
    align-self: flex-end;
    font-size: 1.5vw;
    font-weight: 300;
    line-height: 2;
}

.experience-text p {
    font-size: 1.2vw;
    font-weight: 300;
    margin-top: 10vw;
    text-align: left;
    text-align-last: unset;
}

/* ======================================
   5) japan-map-wrapper → 4,5,8,9,13
====================================== */
.japan-map-wrapper {
    grid-column: 3 / 6; /* 4,5 列 */
    grid-row: 1 / 4;    /* 1〜3 行 */
    position: relative;
}

.japan-map-wrapper figure{
    margin: 0;
}

.japan-map-wrapper img {
    width: 100%;
    height: auto;
}

/* circle の既存デザインは維持 */
.circle-link div {
    position: absolute;
    width: 10%;
    height: 10%;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
}

/* 既存の circle 位置をそのまま維持 */
.circle1 { top: 12%; left: 65%; }
.circle2 { top: 62%; left: 52%; }
.circle3 { top: 55%; left: 37%; }
.circle4 { top: 71%; left: 29%; }
.circle5 { top: 70%; left: 12%; }
.circle6 { top: 81%; left: 5%; }
.circle7 { top: 51%; left: 8%; }

/* ======================================
   6) map-buttons → map-wrapper 上に absolute
====================================== */
.map-buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* ボタン以外はクリック不可 */
}

.map-buttons .wp-block-buttons {
    position: absolute;
    pointer-events: auto;
}

.map-buttons .wp-block-button__link {
    background: #fff;
    color: #333;
    padding: 0.7vw;
    border-radius: 100px;
    font-size: 1.3vw;
    white-space: nowrap;
    width: auto;
    height: auto;
    text-align: center;
    letter-spacing: 0.3vw;
}

/* 既存の位置を維持 */
.hokkaido-tohoku { top: 11%; left: 80%; }
.kanto { top: 52%; left: 76%; }
.hokuriku { top: 38%; left: 58%; }
.kansai { top: 58%; left: 64%; }
.sannin-sikoku { top: 50%; left: 41%; }
.kyusyu { top: 64%; left: 53%; }
.okinawa { top: 36%; left: 42%; }

/* ======================================
   7) image-bus → グリッド10
====================================== */
.image-bus {
    grid-column: 5 / 6;
    grid-row: 3 / 4;
    align-self: end;
    justify-self: end;
    width: 50%;
    margin: 0;
}

.image-bus img {
    width: 100%;
    height: auto;
}

/* ======================================
   8) where-headline → グリッド19,20
====================================== */
.where-headline {
    grid-column: 5 / 6; /* 19,20 */
    grid-row: 4 / 5;
    text-align: right;
    align-self: end;
}

.where-headline h2 {
    text-align: justify;
    text-align-last: justify;
    margin: 0;
}

.where-headline .ruby {
    display: inline-block;
    width: 100%;
    text-align: right;
    text-align-last: right;
}

/*=====================================
    section4
=======================================*/
.section4{
    background-color: #fcf4ed;
    padding: 10vw 0;
}

.news_section_title{
    display: flex;
    gap: 5vw;
    align-items:center;
    margin-left: 5vw;
}

.news_section_title h2{
    font-size: 7vw;
    color: #588e6a;
    font-weight: 500;
    letter-spacing: 0.3vw;
    margin: 0;
}

.news_section_title p{
    font-size: 1.2vw;
    font-weight: 500;
    letter-spacing: 0.1vw;
    color: #645f5c;
}

/* ============================
   PC：投稿スライダー
   ============================ */

/* ドラッグ中のスタイル */
.wp-block-latest-posts.dragging {
    user-select: none;
    pointer-events: none;
}
/* スライダー全体（横並び・ドラッグ対応） */
.wp-block-latest-posts {
    display: flex;
    gap: 5vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 3vw 0;
    -webkit-overflow-scrolling: touch;
}

/* 各スライド（3件表示） */
.wp-block-latest-posts li {
    width: 30vw; /* PCでは3件並ぶ */
    list-style: none;
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* 共通：カード全体を縦フレックスにする */
.wp-block-latest-posts li {
    display: flex;
    flex-direction: column;
}

/* タイトルを下にしたいので order を後ろに */
.wp-block-latest-posts__post-title {
    order: 2;
}

/* 日付を上にしたいので order を前に */
.wp-block-latest-posts__post-date {
    order: 1;
}

.post-category {
    order: 3;
}

/* 画像ラッパー（正方形・角丸） */
.wp-block-latest-posts__featured-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 1vw;
    overflow: visible;
    pointer-events: auto;
    -webkit-user-drag: none; 
    user-select: none;
}

/* 画像本体 */
.wp-block-latest-posts__featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1vw;
    pointer-events: auto;
    -webkit-user-drag: none; 
    user-select: none;
}

.wp-block-latest-posts__featured-image a {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1vw;
    pointer-events: auto;
    margin-left: 5vw;
    -webkit-user-drag: none; 
    user-select: none;
}


/* オフセット枠線（右下に5%ずらす） */
.wp-block-latest-posts__featured-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 0.11vw solid #403d3c;
    border-radius: 1vw;
    transform: translate(20%, 3%);
    pointer-events: none;
}

/* 日付 */
.wp-block-latest-posts__post-date {
    display: block;
    margin-top: 3vw;
    font-size: 1vw;
    color: #000;
    margin-left: 5vw;
}

/* タイトル */
.wp-block-latest-posts__post-title {
    display: block;
    margin-top: 0.5vw;
    font-size: 1.2vw;
    font-weight: 500;
    color: #211815;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    margin-left: 5vw;
    -webkit-user-drag: none; 
    user-select: none;
}

/*投稿記事のタグ*/
.post-tags {
    order: 3;
    margin-top: 0.8vw;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5vw;
    margin-left: 5vw;
}

.post-tag {
    display: inline-block;
    padding: 0.3vw 1vw;
    background: #c7c7c8;
    color: #fff;
    font-size: 0.8vw;
    border-radius: 1vw;
    white-space: nowrap;
}

/* section4 ボタン全体を中央寄せ */
.section4 .wp-block-buttons {
    display: flex;
    justify-content: center;
    margin-top: 3vw;
}

/* ボタン本体 */
.section4 .wp-block-button__link {
    width: 23vw;
    background-color: #598f69;
    color: #fff;
    text-align: center;
    padding: 1vw 2vw 1vw 4vw;
    font-size: 1.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0; /* テキストと矢印の間は span 側で調整 */
    text-decoration: none;
}

/* 矢印（→）の余白 */
.section4 .vector-right {
    margin-left: 5vw;
    display: inline-block;
    font-size: 1.2vw;
}

/* スクロールバー非表示（Chrome / Edge / Safari） */
.wp-block-latest-posts::-webkit-scrollbar {
    display: none;
}

/* Firefox */
.wp-block-latest-posts {
    scrollbar-width: none;
}

/* IE / 古いEdge */
.wp-block-latest-posts {
    -ms-overflow-style: none;
}

/* ============================
   section5（ABOUT）
   ============================ */
.section5 {
    background-color: #483b37;
    color: #fff;
}

/* 見出し＋テキストの横並び */
.about-headline {
    padding: 0 10vw;
    margin-bottom: 5vw;
}

.about-h2-p> .wp-block-group__inner-container{
    display: flex;
    align-items: center;
    gap: 3vw;
    width: 35vw;
}

/* Group ブロックの inner-container を横並びにする */
.about-headline > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 見出し */
.section5 h2 {
    font-size: 7vw;
    color: #fff;
    font-weight: 500;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.3vw;
}

/* テキスト（共通） */
.section5 p {
    font-size: 1.2vw;
    line-height: 2.5vw;
    color: #fff;
    font-weight: lighter;
    margin: 0;
    width: 40vw;
}

/* テキストグループ（縦並び） */
.abou-text > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 1〜2行目（justify） */
.abou-text p {
    text-align: justify;
    text-align-last: justify;
}

/* 3行目だけ left */
.about-text-lastline {
    text-align: left !important;
    text-align-last: left !important;
}

/*pc版のみ表示*/
.section5-image{ margin: 0;}

/*スマホ版画像非表示*/
.sp-section5-image{ display: none;}

/* 画像（横幅いっぱい） */
.section5 img {
    width: 100vw;
    height: auto;
    display: block;
}

/* section5 ボタン全体を中央寄せ */
.section5 .wp-block-buttons {
    display: flex;
    justify-content: center;
    margin-top: 5vw;
    margin-bottom: 5vw;
}

/* ボタン本体 */
.section5 .wp-block-button__link {
    width: 23vw;
    background-color: #706e70;
    color: #fff;
    text-align: center;
    padding: 1vw 2vw 1vw 4vw;
    font-size: 1.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0; /* テキストと矢印の間は span 側で調整 */
    text-decoration: none;
}

/* 矢印（→）の余白 */
.section5 .vector-right {
    margin-left: 5vw;
    display: inline-block;
    font-size: 1.2vw;
}

/* ============================
   section6（Activities）
   ============================ */
.section6 {
    padding: 0;
    color: #403b3a;
    overflow: hidden;
}

/* 見出しエリア */
.activity-headline {
    background-color: #ebeded;
    padding: 7vw 5vw;
    text-align: center;
    font-weight: lighter;
}

.activity-headline h2 {
    color: #afadac;
    font-size: 5vw;
    font-weight: 500;
    letter-spacing: 0.3vw;
    margin: 0;
}

.activity-headline p {
    color: #848486;
    font-size: 1.2vw;
    margin-top: 2vw;
}

/*カラムのギャップ調整*/
.activity-section{
    gap: 0;
    margin: 0;
}
/* ============================
   3カラム（赤・青・緑）
   ============================ */
.section6 .wp-block-column {
    padding: 7vw 3vw;
    position: relative;
    overflow: visible;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vw;
}

/* 背景色 */
.section-red { background-color: #e15e5a; }
.section-blue { background-color: #3bb5d6; }
.section-green { background-color: #b3cb63; }

/* ============================
   画像2枚の重ね表示
   ============================ */

/* 1枚目（背景画像） */
.section6 .wp-block-column figure:first-of-type {
    position: relative;
    z-index: 1;
}

/* 2枚目（アイコン画像） */
.section6 .wp-block-column figure:nth-of-type(2) {
    position: absolute;
    transform: translateX(-50%);
    z-index: 2;
}

.section-red figure:nth-of-type(2) {
    top: 27%;
    left: 20%;
    width: 65%;
}

.section-blue figure:nth-of-type(2) {
    top: 25%;
    left: 70%;
    width: 60%;
}

.section-green figure:nth-of-type(2) {
    top: 16%;
    left: 59%;
    width: 95%;
}

/* 画像のリセット */
.section6 img {
    width: 100%;
    height: auto;
    display: block;
}

/* 1枚目の背景画像（activity-section-picture）を40%に縮小 */
.activity-section-picture {
    width: 65% !important;
    margin: 3vw;
}

/* 2枚目のアイコン画像はそのまま（位置だけ維持） */
.activity-section-icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 45%;
    z-index: 2;
    /* サイズは変更しない */
}

/* ============================
   見出し・テキスト
   ============================ */
.section6 h3 {
    margin-top: 6vw; /* アイコンの下に余白 */
    font-size: 1.8vw;
    color: #403b3a;
}

.section6 p {
    font-size: 1.2vw;
    margin: 0.5vw 0;
    color: #403b3a;
}

/* ============================
   ボタン
   ============================ */
.section6 .wp-block-button__link {
    background: #2a1e1c;
    color: #fff;
    padding: 0.8vw 2vw;
    border-radius: 900px;
    font-size: 1.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3vw 0;
    text-decoration: none;
    width: 17vw;
    letter-spacing: 0.1vw;
}

.section6 .vector-right {
    margin-left: 2vw;
    display: inline-block;
    font-size: 1.2vw;
}


/*section7*/
.section7 {
    width: 100%;
    margin: 0;
    padding: 15vw 0;
}

/* 上段：3枚を中央寄せ */
.link-banner-upper .wp-block-group__inner-container {
    display: flex;
    grid-template-columns: repeat(3, 15vw);
    gap: 6vw;
    padding: 0 5vw;
    margin-bottom: 5vw;
    justify-content: center; /* グリッド全体を中央へ */
    justify-items: center;   /* 各画像を中央へ */
}

/* 下段：4枚を中央寄せ */
.link-banner-lower .wp-block-group__inner-container {
    display: flex;
    grid-template-columns: repeat(4, 15vw);
    gap: 4vw;
    padding: 0 5vw;

    justify-content: center; /* グリッド全体を中央へ */
    justify-items: center;   /* 各画像を中央へ */
    align-items: center;
}

/* 画像を100%で綺麗に表示 */
.section7 img {
    width: 75%;
    height: auto;
    display: block;
}

/* ===========================
   フッターのスタイル
=========================== */
.site-footer {
    background: transparent;
    padding: 20vw 5vw 0vw 5vw;
    color: #fff;
    height: 55vw;
    background-image: url(https://wptest.skr.jp/wp-content/uploads/2026/02/footer-bg.png);
    background-size: cover;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* ← 右側が上揃えになるよう変更 */
}

.footer-logo img {
    height: 5vw;
    width: auto;
}

/* ===========================
   右側：4行構成
=========================== */
.footer-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-left: 5vw; /* ロゴとの距離調整 */
}

/* ===========================
   1行目：会社情報 + SNS
=========================== */
.footer-row.row-1 {
    display: flex;
    justify-content: left;
    gap: 20vw;
    align-items: flex-start;
    border-bottom: #fff 1px solid;
}

.company-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 3vw;
}

.company-name {
    font-size: 1vw;
    font-weight: 400;
    margin-bottom: 0.7vw;

}

.company-address {
    font-size: 0.9vw;
    margin: 0;
}

.sns-icons {
    display: flex;
    gap: 2vw;
    margin-top: 1vw;
}

.sns-icons img {
    width: 1.5vw;
    height: auto;
}

/* ===========================
   2行目：2カラム（縦並び×2）
=========================== */
.footer-row.row-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5vw;
    border-bottom: #fff 1px solid;
    padding-right: 25vw;
}

.footer-links-col {
    display: flex;
    flex-direction: column;
    gap: 0.6vw;
    margin: 3vw 0;
}

.footer-links-col a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9vw;
}

.footer-links-col a:hover {
    opacity: 0.7;
}

/* ===========================
   3行目：横並びリンク群
=========================== */
.footer-row.row-3 {
    display: flex;
    flex-wrap: wrap;
    gap: 1vw 2vw;
    margin: 3vw 0;
}

.footer-row.row-3 a {
    color: #fff;
    text-decoration: none;
    font-size: 0.8vw;
    white-space: nowrap;
}

.footer-row.row-3 a:hover {
    opacity: 0.7;
}

/* ===========================
   4行目：コピーライト
=========================== */
.footer-row.row-4 {
    font-size: 0.9vw;
    opacity: 0.8;
}

/*==========================================================
    Aboutページのスタイル
============================================================*/
.page-id-7538 {
    background: linear-gradient(to bottom, #ffffff 50%, #e1e1e1 50%);
}
/* =========================================================
   Aboutページ全体：左右に10vwのpaddingを付ける
   ========================================================= */
.about-2,
.about-3,
.about-4,
.about-5,
.about-6,
.about-7,
.about-8,
.about-9 {
  padding: 7vw;
  overflow: hidden;
  font-size: 1vw;
  font-weight: 300;
  line-height: 2.5;
}

.about-2 strong,
.about-3 strong,
.about-4 strong,
.about-5 strong,
.about-6 strong,
.about-7 strong,
.about-8 strong,
.about-9 strong { background: rgba(255, 255, 255, 0.4); font-weight: 600; padding: 0.2vw;}


/* =========================================================
   section-1: about-1
   ・h1「About」を画像の上に重ねる
========================================================= */
.about-1 {
  position: relative;
  margin-top: 5vw;
}

/* About-1 の figure を完全リセット */
.about-1 figure,
.about-1 figure.wp-block-image {
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  background: none;
  display: block; /* UA stylesheet の影響を安定化 */
  max-width: none;
}

/* 画像も完全リセット */
.about-1 figure img {
  display: block;        /* 画像下の隙間を消す */
  width: 100%;           /* Gutenberg の max-width を上書き */
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  object-fit: cover;     /* 必要なら */
}

.about-1 h1.wp-block-heading, 
.about-1 p{
  position: absolute;
  top: 15%;
  left: 10vw;
  color: #fff;
  font-size: 5vw;
  font-weight: 500;
  z-index: 10;
  /* ← NEW：ドロップシャドウ */
  text-shadow: 
    0.2vw 0.2vw 0.5vw rgba(0, 0, 0, 0.8)
}

.about-1 p{
    font-size: 1.5vw;
    margin-top: 1vw;
    top: 27%;
    left: 26vw;
}


/* =========================================================
   section-2: about-2-upper / about-2-middle / about-2-lower
   ・upper → 左揃え
   ・middle → 右揃え
   ・lower → 中央揃え
========================================================= */
.about-2{
    background: linear-gradient(to bottom,#28130f ,#32211e);
    padding: 7vw 0;
    color: #fff;
    font-weight: 300;
}

.about-2-upper {
  text-align: left;
  width: 55%;
  margin: 0 7vw;
}

.about-2-upper h2{
    font-size: 2.5vw;
}

/* =========================================================
   about-2-middle：画像 左 ／ 段落 右
   ========================================================= */
.about-2-middle > .wp-block-group__inner-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 4vw;                     /* カラム間のスペース */
  margin-right: 7vw;
}

.about-2-middle figure { max-width: 50%;}

/* 左カラム：画像 */
.about-2-middle > figure.wp-block-image {
  flex: 0 0 40%;                /* 左の幅：40%（変更可） */
  margin: 0;
}

.about-2-middle > figure.wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* 右カラム：段落グループ */
.about-2-middle .about-2-middle-p {
  flex: 1;                      /* 右カラムを広く */
  display: flex;
  flex-direction: column;
  gap: 1.8em;                   /* p同士の間隔 */
  margin: auto 0;
}

.about-2-middle .about-2-middle-p p {
  margin: 0;
}

.about-2-lower {
  text-align: center;
}

/* Gutenberg の段落幅を整える */
.about-2-upper p,
.about-2-middle p {
  margin: 3vw 0;
}

.about-2-lower p{
  margin: 5vw 0;
  margin-bottom: 0;
}

/* 画像も揃え方向に合わせる */
.about-2-middle figure {
  margin-left: auto;
}

/* =========================================================
   section-3: about-3
   ・全て中央揃え
   ・about-scroll に1px border 追加
   ・縦スライダー化（scroll-snap）
========================================================= */

.about-3 {
  text-align: center;
  position: relative;
  background: linear-gradient(to bottom,#32211e ,#3b2f2c );
  padding: 0 8vw 7vw 8vw;
  color: #fff;
  font-weight: 300;
}

.about-3 h2{
    font-size: 2vw;
    position: absolute;
    top: -4.5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

/* 縦スクロールエリア（スライダー本体） */
.about-scroll-wrapper{
    position: relative;
}

.about-scroll-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  width: 25%;
  height: 0;
  border-top: 1px solid #fff;
  z-index: 1;
}

.about-scroll-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 61%;              /* h2 の位置に合わせる */
  width: 25%;            /* ← h2 の幅に合わせて調整 */
  border-top: 1px solid #fff;
  z-index: 1;
}


.about-3 .about-scroll {
  overflow-y: auto;
  margin: 2vw auto;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid #fff;
  border-top: none;
  box-sizing: border-box;
  text-align: left;

  width: 60vw;
  height: 25vw;

  /* ▼ 追加：縦スライダー化 */
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain; /* スマホでの跳ね返り防止 */

  position: relative;
}


/* ▼ 追加：1ページ分の高さ（scroll-page） */
.scroll-page {
  height: 25vw;                 /* about-scroll と同じ高さ */
  scroll-snap-align: start;     /* ページ先頭でピタッと止まる */
  padding: 3vw 6vw;
  box-sizing: border-box;
}

.sp-about-scroll-wrapper { display: none;}

/* ol 全体：縦方向に flex、行を space-between で等間隔 */
.about-scroll-list {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between; /* ← 01/02/03 を縦に等間隔配置 */
  padding: 0;
  margin: 0;
  list-style: none; /* デフォルト番号は消す */
}

/* li を横並びにする */
.about-scroll-list > li {
  display: flex;
  align-items: center; /* ← 番号の縦位置を自由に調整できる */
  gap: 1.5vw;              /* ← 番号とテキストの距離 */
}

/* 番号部分 */
.ol-num {
  font-size: 3vw;        /* ← 今のデザインに合う控えめサイズ */
  font-weight: 200;
  color: #fff;
  line-height: 1;
  min-width: 3vw;          /* ← 桁揃えのための固定幅 */
  display: inline-block;
  font-family: "Noto Sans JP";
}

/* テキスト部分 */
.ol-text {
  font-size: 0.9vw;
  line-height: 1.8;
  display: inline-block;
}

/* スクロールバー非表示（Chrome / Safari / Edge） */
.about-3 .about-scroll::-webkit-scrollbar {
  display: none;
}

/* Firefox */
.about-3 .about-scroll {
  scrollbar-width: none;
}

/* 1ページ目：1〜3 */
.scroll-page:nth-child(1) .about-scroll-list {
  counter-reset: vision 0; /* 01〜 */
}

/* 2ページ目：4〜6 */
.scroll-page:nth-child(2) .about-scroll-list {
  counter-reset: vision 3; /* 04〜 */
}

/* 3ページ目：7〜10 */
.scroll-page:nth-child(3) .about-scroll-list {
  counter-reset: vision 6; /* 07〜 */
}

/* ▼ ページインジケーター（3つのドット） */
.vertical-dots {
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
  position: absolute;
  right: 15%;        /* スライダーの右側に配置 */
  top: 50%;
  transform: translateY(-50%);
}

.vertical-dots .dot {
  width: 0.8vw;
  height: 0.8vw;
  border-radius: 50%;
  background-color: #a9a9a9;   /* 非アクティブ：グレー */
  transition: background-color 0.3s;
}

.vertical-dots .dot.active {
  background-color: #fff;   /* アクティブ：黒 */
}

.about-3-lower{
    margin-top: 7vw;
}
/* =========================================================
   section-4: about-purpose / about-overview
   ・purpose → 右揃え
   ・overview → 左揃え
========================================================= */

.about-purpose {
  margin-left: auto;   /* ブロックを右端へ寄せる */
  margin-bottom: 7vw;
  text-align: left;    /* テキストは左揃えのまま */
  width: 60vw;  /* 内容幅に合わせて右寄せが効くようにする（重要） */
}

.about-purpose h2{
    text-align: right;
    font-size: 2.5vw;
}

.about-overview {
  text-align: left;
}

.about-overview figure {
  margin: 2vw 0;
}

/* =========================================================
   section-4: about-4 overview
   ・幅100vwに拡張
   ・position: relative で自由配置
   ・画像3枚を重ねて横並び（指定サイズ・比率）
   ・p を画像1の上に重ねる
========================================================= */
.about-4{
    background-color: #e1e1e1;
}

.about-overview {
  width: 100vw;
  height: 45vw; /* 画像1が大きいので余裕を持たせる */
  margin-left: calc(50% - 50vw); /* WPのconstrainedを解除して画面端まで広げる */
  position: relative;
  padding: 5vw 0;
  box-sizing: border-box;
}

/* リスト（ol）を画像1の上に重ねる */
.about-overview-ol {
  position: absolute;
  font-size: 1.2vw;
  top: 0vw;
  left: 7vw;
  width: 53vw;
  color: #fff;
  z-index: 10;
  line-height: 2;
  padding: 2vw;
  background-color: rgba(52, 30, 26,0.7);
  letter-spacing: 0.1vw;
  list-style-position: inside;
  counter-reset: my-counter;
  list-style: none;
}

.about-overview-ol li {
    counter-increment: my-counter;
    margin: 1vh;
    padding-left: 4em;
    position: relative;
    line-height: 1.7;
}

.about-overview-ol li::before {
    content: "（" counter(my-counter) "）";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 400;
    color: #fff;
}

/* figure は位置決めだけ */
.about-overview figure {
  position: absolute;
  margin: 0;
  padding: 0;
}

/* ============================
   画像1：55vw、21:9、z-index:1
============================ */
.about-overview figure:nth-of-type(1) {
  left: 10vw;
  top: 2vw;
  z-index: 1;
  display: none;
}

.about-overview figure:nth-of-type(1) img {
  width: 50vw;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ============================
   画像2：25vw、16:9、z-index:2
============================ */
.about-overview figure:nth-of-type(2) {
  left: 50vw; /* 画像1に少し重ねる */
  top: 15vw;
  z-index: 3;
}

.about-overview figure:nth-of-type(2) img {
  width: 35vw;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ============================
   画像3：20vw、4:3、z-index:3
============================ */
.about-overview figure:nth-of-type(3) {
  left: 70vw;
  top: 9vw;
  z-index: 2;
}

.about-overview figure:nth-of-type(3) img {
  width: 30vw;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: left;
}

/* =========================================================
   section-5: about-5
   ・すべて中央揃え
========================================================= */

.about-5 {
  text-align: center;
  background-color: #49d2ed;
}

.about-5 h2{
    font-size: 2.5vw;
    margin: 0;
    color: #16558b;
}

.about-5 p {
  line-height: 1.9;
  margin-bottom: 5vw;
}

/* =========================================================
   about-5: about-slide
   ・3つのulを横に並べる
   ・1画面＝1スライド
   ・overflow hidden で横スクロールを隠す
========================================================= */

.about-slide {
  overflow: hidden;
}

/* 横並びのスライドコンテナ（WPが自動生成） */
.about-slide > .wp-block-group__inner-container {
  display: flex;
  width: 300%; /* ul が3つなので 100% × 3 */
  transition: transform 0.6s ease;
}

.about-slider-wrapper > .wp-block-group__inner-container{
    position: relative;
    margin: 0 7vw;
}

/* 左ボタン */
.about-slider-wrapper .slide-preview .wp-block-button__link {
  position: absolute;
  left: -6vw;
  top: 50%;
  transform: translateY(-100%);
  width: 6vw;
  height: 6vw;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 4vw;
}

/* 右ボタン */
.about-slider-wrapper .slide-next .wp-block-button__link {
  position: absolute;
  right: -6vw;
  top: 50%;
  transform: translateY(-100%);
  width: 6vw;
  height: 6vw;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 4vw;
}

/* =========================================================
   about-slide：各 ul を2カラム構成にする
   ・左カラム：画像（li の1つ目）
   ・右カラム：テキスト（li の2つ目以降）
========================================================= */

.about-slide ul {
  width: 100%;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 10% 20%; /* 左10%：右90% */
  grid-template-rows: repeat(3, 1fr); /* 右側テキスト3行を均等割り */
  gap: 1.5vw 5vw;
  align-items: stretch; /* ← 画像の高さに合わせて伸ばす */
  padding: 0;
  margin: 0;
}

/* 画像（li の1つ目） */
.about-slide ul li:first-child {
  grid-column: 1 / 2;
  grid-row: 1 / 4; /* ← 画像を3行ぶち抜きで縦に伸ばす */
  list-style: none;
}

.about-slide ul li:first-child img {
  width: 100%;
  height: 100%; /* ← 画像を縦方向にフィットさせる */
  object-fit: cover;
}

/* テキスト（li の2つ目以降） */
.about-slide ul li:not(:first-child) {
  grid-column: 2 / 3;
  line-height: 1.8;
  align-items: center; /* ← 各行の中央に配置 */
  text-align: left;
  list-style: none;
}

/* marker をカスタム */
.about-slide ul li:not(:first-child)::marker {
  content: "●";              /* ← 好きな記号に変更可能 */
  font-size: 1vw;          /* ← 大きさ */
  color: #16558b;            /* ← 色 */
  font-weight: 400;
  font-family: "Noto Sans JP";
}

/* =========================================================
   ★ 3つ目のスライド（ul）だけ4行にする
========================================================= */
.about-slide ul:nth-of-type(3) {
  grid-template-rows: repeat(4, 1fr);
}

/* 画像は4行ぶち抜きに変更 */
.about-slide ul:nth-of-type(3) li:first-child {
  grid-row: 1 / 5;
}

/* =========================================================
   about-6：代表挨拶セクション
   ・WP が生成する inner-container に flex を適用
   ・左：about-6-text
   ・右：about-portrait（30vw）
========================================================= */
.about-6{ background: #fff;}

.about-6 > .wp-block-group__inner-container {
  display: flex;
  gap: 7vw;
  align-items: flex-start;
  margin-top: 4vw;
}

/* 左カラム（テキスト） */
.about-6-text {
  flex: 1; /* 余った幅をすべて使う */
}

/* ================================
   about-6：代表挨拶の文章ウィンドウ
   3行だけ完全表示し、上下1行をフェード
================================ */
.about-6-message {
    max-height: 40vh;
    overflow-y: auto;
    position: relative;
    padding: 2vh 0;
}

.about-6-message {
    /* スクロールはできるがバーは非表示 */
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE / Edge */
}

.about-6-message::-webkit-scrollbar {
    display: none;                /* Chrome / Safari / iOS / Android */
}

.about-6-message p {
    margin: 0;
    padding: 1vh 0;
    line-height: 1.8;
    transition: opacity 0.25s ease;
    opacity: 0.5; /* デフォルトは非表示 */
}

/* 中央行（完全表示） */
.about-6-message p.active {
    opacity: 1;
}

/* 前後1行（フェード） */
.about-6-message p.near {
    opacity: 1;
}

.about-6-text h2 {
  margin-bottom: 8vw;
  font-size: 2.5vw;
}

/* 右カラム（写真＋名前） */
.about-portrait > .wp-block-group__inner-container {
  width: 30vw; /* ← 要望通り 30vw 固定 */
  text-align: center;
  padding-top: 10vw;
}

/* 写真 */
.about-portrait img {
  width: 80%;
  height: auto;
  object-fit: cover;
}

/* 団体名・代表名 */
.about-portrait p {
  margin-top: 1vw;
  line-height: 1.6;
  font-size: 1.3vw;
}

.strong-font{
    font-weight: 600;
}

/* =========================================================
   about-7：組織概要
   ・h2 のサイズを 2.5vw に
========================================================= */
.about-7{
    background-color: #e1e1e1;
}

.about-7 h2 {
  font-size: 2.5vw;
  margin-bottom: 2vw;
}

/* =========================================================
   about-7 の中身（セクション全体）は縦並び
========================================================= */
.about-7 > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* =========================================================
   各 org-xxx グループの inner-container を横並びにする
   （h3 と p を横並びにする本体）
========================================================= */

.about-7 .wp-block-group > .wp-block-group__inner-container {
  display: flex;
  align-items: center;
  gap: 2vw;
  width: 40vw;
  margin: 0 auto;
  padding: 1vw 0;
  border-bottom: 2px solid #fff;
}

/* 左側のラベル（h3） */
.about-7 h3 {
  width: 10vw;          /* ラベル幅を揃える */
  flex-shrink: 0;
  font-size: 1.4vw;
  margin: 0;
  color: #365888;
}

/* 右側の値（p） */
.about-7 p {
  margin: 0;
  line-height: 1.8;
  font-size: 1.2vw;
}

/* =========================================================
   section-8: about-8
   ・全て中央揃え
========================================================= */

.about-8 {
  text-align: center;
  background: #fff;
}

.about-8 h2{
    font-size: 2.5vw;
}

.about-8 figure img {
  width: 60vw;
  height: auto;
}

/* =========================================================
   section-9: about-9
   ・全て中央揃え
========================================================= */

.about-9 {
  text-align: center;
  background-color: #e1e1e1;
  margin-bottom: 7vw;
}

.about-9 h2{
    font-size: 2.5vw;
}

.about-9 .wp-block-buttons {
  justify-content: center;
}

.about-9 .wp-block-button__link {
  padding: 0.5vw 3vw;
  background: #365889;
  width: 25vw;
  color: #fff;
  font-family: "Zen Maru Gothic";
  font-size: 1.2vw;
  font-weight: 500;
  margin-bottom: 2vw;
  letter-spacing: 0.1vw;
}

/* =========================================================
   WooCommerce カスタムスタイル（プラン一覧ページ）
   ========================================================= */
.plan-archive-title{
    display: none;
}

.post-type-archive-product { background: linear-gradient(to bottom, #ffffff 50%, #dbf0fc 50%);}
.archive.tax-product_cat { background: linear-gradient(to bottom, #ffffff 50%, #dbf0fc 50%);}
.archive.tax-product_brand { background: linear-gradient(to bottom, #ffffff 50%, #dbf0fc 50%);}

/* ----------------------------------------
   ② フィルターエリア（3カラム横並び）
---------------------------------------- */
.plan-filter-title{ 
    display: flex; 
    align-items: center; 
    gap: 3vw;
    margin: 96px 0 0 0; 
    padding-left: 5vw;
    background: #f6f6f6;
}

.plan-filter-title h1 {
    font-size: 7vw;
    font-weight: 500;
    color: #fe9fc4;
    gap: 3vw;
    margin: 0;
}

.plan-filter-title .ruby{
    color: #868687;
    font-size: 1.2vw;
    margin: 0;
    font-weight: bold;
}

@media screen and (max-width: 768px){
    .plan-filter-title { flex-direction: column; margin-top: 60px;}
    .plan-filter-title .ruby { font-size: 1.5vh; }
} 

.plan-filters-wrapper {
    width: 100%;
    background: #f6f6f6;
    min-height: 300px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5vw;
    padding: 2vw 5vw;
    box-sizing: border-box;
    font-family: 'Zen Maru Gothic';
}

.filter-plan ul{
    margin: 1vw;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3,auto);
    gap: 0 2vw;
}

.filter-plan li {
    list-style-image: url('https://wptest.skr.jp/wp-content/uploads/2026/02/area-icon-01.png');
    list-style-position: outside;
}

.filter-plan li a,
.filter-plan li a:visited
.filter-plan li a:hover {
    color: #000;
    font-family: 'Noto Sans JP';
    font-weight: 500;
    text-decoration: none; /* 下線を消したい場合 */
}

.filter-block {
    padding: 1vw 2vw;
    border-left: solid 1px #000;
}

.filter-block h2 { margin: 0;}

.filter-area ul{
    margin: 1vw;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3,auto);
    gap: 0 2vw;
}

.filter-area li {
    list-style-image: url('https://wptest.skr.jp/wp-content/uploads/2026/02/plan-icon-01.png');
    list-style-position: outside;
}

.filter-area li a,
.filter-area li a:visited
.filter-area li a:hover {
    color: #000;
    font-family: 'Noto Sans JP';
    font-weight: 500;
    text-decoration: none; /* 下線を消したい場合 */
}

/*uncategorizedを非表示に*/
.cat-item-313 { display: none;}


/* ================================
   PRICE フィルター（スライダー）
================================ */
.filter-price .widget_price_filter .ui-slider {
    background: #dbdbdb; /* 棒の色（グレー） */
    width: 250px;
    height: 6px;
    border-radius: 3px;
    position: relative;
}

.filter-price .widget_price_filter .ui-slider-range {
    background: #dbdbdb !important; /* 選択範囲（濃いグレー） */
    height: 6px;
    border-radius: 3px;
}

.filter-price .widget_price_filter .ui-slider-handle {
    width: 20px;
    height: 20px;
    background: #fff !important; /* 白い丸 */
    border: 2px solid #dbdbdb;
    border-radius: 50%;
    top: -8px;
    cursor: pointer;
}

.filter-price .widget_price_filter .ui-slider-handle:focus {
    outline: none;
    box-shadow: none;
}

/* ================================
   PRICE 表示（min/max）
================================ */
/* PRICE 表示エリア全体 */
.filter-price .widget_price_filter .price_slider_amount {
    display: flex;
    justify-content: left;
    gap: 0;
}

/* ラベル全体を非表示にして個別表示に切り替え */
.filter-price .widget_price_filter .price_slider_amount .price_label {
    display: flex;
    gap: 7px;
    font-size: 0; /* テキストを消す */
}

.filter-price .widget_price_filter .price_slider_amount .from,
.filter-price .widget_price_filter .price_slider_amount .to {
    background: #fff;
    padding: 1px 12px;
    border: 1px solid #dbdbdb;
    font-size: 15px;
    font-weight: 600;
    display: inline-block;
    width: 120px; /* ← 横長にする */
    height: 40px;
    text-align: left;
}

.filter-price .widget_price_filter .button {
    display: none;
}

/*ページの説明文*/
.page-description { 
    margin: 0;
    padding: 0 8vw;
    background: #dbf0fc;
}

.page-description h2 {
    font-size: 3vw;
    font-weight: 700;
    color: #fe9fc4;
    margin: 0;
    padding: 2vw 0;
}

.page-description p {
    font-size: 1vw;
    font-weight: 400;
    color: #868687;
    margin: 0;
    line-height: 1.8;
}

@media screen and (max-width: 768px){
    .page-description h2 { font-size: 3vh;}
    .page-description p { font-size: 1.5vh;}
}

/* ----------------------------------------
   ③ プラン一覧グリッド
---------------------------------------- */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #dbf0fc;
    padding: 0 5vw;
    list-style: none;
    margin: 0;
}

.plan-grid > li {
    border-right: 1.5px solid #000;
    padding: 3vw;
    margin: 3vw 0;
}

.plan-grid > li:nth-child(3n) {
    border-right: none;
}
/* ----------------------------------------
   プランカード（新デザイン）
---------------------------------------- */
.plan-card {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
    display: block;
    height: 100%;
}

/* ホバー */
.plan-card:hover {
    transform: translateY(-4px);
}

/* 画像：アスペクト比 1.414 / 1 */
.plan-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1.414 / 1;
    object-fit: cover;
}

.plan-image {
    position: relative; /* ラベルの基準点 */
    overflow: hidden;
}

.plan-number-label {
    position: absolute;
    top: 0px;    /* 上からの位置（任意） */
    left: 0px;  /* 右端に配置 */
    z-index: 10;
    
    /* デザイン：白背景に黒文字、または反転などサイトに合わせて調整 */
    background: #fff;
    color: #3f3b3a;
    padding: 4px 8px;
    font-size: 2.5rem;
    font-weight: lighter;
    letter-spacing: 0.05em;
}

/* タイトル */
.plan-title {
    font-size: 1.5vw;
    font-weight: 400;
    letter-spacing: 0.15rem;
    color: #000;
    margin-top: 12px;
}

/* メタ情報（カテゴリ・ブランド） */
.plan-meta {
    margin-top: 8px;
}

.plan-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.plan-meta-icon {
    width: 0.5vw;
    height: 1vw;
    object-fit: contain;
    opacity: 0.6;
}

.plan-meta-item span {
    font-size: 0.8vw;
    font-weight: 300;
    color: #717071;
    line-height: 1;
}

/* 料金ブロック */
.plan-price-block {
    margin-top: 14px;
    padding: 10px 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #000;
}

/* From（小さめ） */
.plan-price-label {
    font-size: 0.8vw;
    font-weight: 400;
}

/* WooCommerce の価格HTML */
.plan-price-value {
    font-size: 1.2vw;
    font-weight: 400;
    color: #000;
}

/* ～（価格と同じサイズ） */
.plan-price-suffix {
    font-size: 1.2vw;
    font-weight: 400;
}

.woocommerce nav.woocommerce-pagination ul { border: none;}

.woocommerce-pagination ul li a {    
    padding: 0.2vw 1vw !important;
    margin: 0 6px !important;
    background: transparent;
    border: #16558b 1px solid;
    border-radius: 60px;
    color: #16558b;
    font-size: 1.2vw !important;
    line-height: 1;
}

.woocommerce nav.woocommerce-pagination ul li { border-right: none;}

.woocommerce nav.woocommerce-pagination ul li a:focus, 
.woocommerce nav.woocommerce-pagination ul li a:hover, 
.woocommerce nav.woocommerce-pagination ul li span.current {
    padding: 0.2vw 1vw !important;
    margin: 0 6px !important;
    background: #16558b;
    color: #fff;
    font-size: 1.2vw;
    border: #16558b 1px solid;
    border-radius: 60px;
}

/* =========================================================
   WooCommerce プラン詳細ページ（single-product）
   ========================================================= */
   .single-product { background: linear-gradient(to bottom,#fff 50%,#ebedec 50%) ;}

/* ----------------------------------------
   ページ全体
---------------------------------------- */
.single-plan-wrapper {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    background: #edeeee;
}

/* ----------------------------------------
   HERO（画像 + テキストオーバーレイ）
---------------------------------------- */
.single-plan-hero {
    margin-top: 96px;
    padding: 0 5vw;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 2/1;
}

.single-plan-hero .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    width: 100%;
    height: 100%;
    padding: 0 5vw;
}

.hero-short-desc  {
    font-size: 5vw;
    font-weight: lighter;
    font-style: italic;
    border-bottom: #fff 3px solid;
    width: fit-content;
    position: absolute;
    top: 10%;
    left: 10%;
    text-shadow: none;
    margin: 0;
}

.hero-title {
    font-size: 3vw;
    font-weight: lighter;
    position: absolute;
    bottom: 10%;
    left: 10%;
    margin: 0;
}

/* ----------------------------------------
   価格 + 商品概要（横並び）
---------------------------------------- */
.single-plan-summary-row {
    margin: 5vw 0;
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: 3vw;
    align-items: center;
    padding: 0 5vw;
}

/* 価格ブロック */
.single-plan-price-block {
    font-size: 2.5vw;
    font-weight: 700;
    color: #000;
    display: flex;
    align-items: center;
    gap: 2vw;
    padding: 3vw 1vw;
    border: #000 1px solid;
    border-left: none;
    border-right: none;
    justify-content: space-between;
}

.single-plan-price-block p { margin: 0;}

.price-label {
    font-size: 1.2vw;
    font-weight: 300;
    margin: 0;
    margin-right: 6px;
}

.woocommerce-Price-amount { margin: 0;}

.price-suffix {
    font-size: 1.2vw;
    font-weight: 300;
    margin: 0;
    margin-left: 4px;
}

/* 商品概要（plan-description-details） */
.single-plan-description p.plan-description-details {
    font-size: 1.2rem;
    line-height: 2.2;
    letter-spacing: 0.05vw;
}

/* ================================
   タイムスケジュール共通ベース (Grid化)
================================ */
.schedule-section {
    display: grid;
    /* 1列目と6列目を10vw固定。間を4等分 */
    grid-template-columns: 10vw repeat(4, 1fr) 10vw;
    /* 高さはauto。各行が最低限持つ高さを1fr(均等)にしつつ中身に合わせる */
    grid-template-rows: repeat(6, minmax(10vh, auto));
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow: visible;
    margin: 5vw 0;
}

/* ==============================
    出発・帰着共通スタイル 
=================================*/
.terminal-point {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 0 10vw;
}

/* アイコンと時間の縦並び列 */
.terminal-icon-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 75px; /* 時間の幅に合わせて調整 */
    gap: 1vw;
}

.terminal-icon {
    width: 75px;
    height: auto;
    margin-bottom: 8px;
}

.terminal-time {
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 0.1vw;
}

/* 場所と説明文の列 */
.terminal-text-column {
    flex: 1;
}

.terminal-place {
    font-size: 2.5rem;
    font-weight: 500;
    margin: 0 0 30px 0;
    line-height: 1.2;
    letter-spacing: 0.15vw;
}

.terminal-desc {
    font-size: 1.2rem;
    line-height: 2.2;
    letter-spacing: 0.05vw;
    margin: 0;
    color: #090909;
}

/* 出発と帰着で少しだけデザインを変える場合（任意） */
.departure-point {
    margin-bottom: 10rem;
}

.return-point {
    margin-top: 10rem;
}

/*====================================================
     全セクション共通：画像は背面に、テキストは前面に 
======================================================*/
.schedule-images-wrapper {
    z-index: 1;
}

.schedule-time-row,
.schedule-place,
.schedule-desc {
    z-index: 10; /* 画像の上に重ねる */
    position: relative;
}

.schedule-time-row{
    max-width: 4vw;
    justify-items: center;
    min-width: 75px;
}

.schedule-time-row .schedule-time-text{
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 0.1vw;
}

.schedule-place {
    font-size: 2.5rem;
    font-weight: 500;
    letter-spacing: 0.15vw;
    margin: 0;
}

.schedule-desc {
    font-size: 1.2rem;
    line-height: 2.2;
    letter-spacing: 0.05vw;
    backdrop-filter: blur(2px);
    text-shadow: 1px 1px 3px #fff;
    color: #090909;
}

/* 画像の基本スタイル（wrapperの中のimg） */
.schedule-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ================================
   ▼ セクション1 個別配置
================================ */

/* 2番：Time */
.section-1 .schedule-time-row {
    grid-column: 2;
    grid-row: 1;
    align-self: center; /* セル内中央 */
}

/* 8番〜9番：Place (重なり開始) */
.section-1 .schedule-place {
    grid-column: 2 / 4; /* 2列目から3列目の終わりまで */
    grid-row: 2;
    align-self: center;
}

/* 14番〜16番：Desc (重なり) */
.section-1 .schedule-desc {
    grid-column: 2 / 5; /* 2列目から4列目の終わりまで */
    grid-row: 3;
    padding-right: 2vw; /* 画像と被る部分の余白 */
    max-width: 35vw;
}

/* 画像：3列目〜6列目(最後)まで。縦は1行目〜6行目(最後)まで */
.section-1 .schedule-images-wrapper {
    grid-column: 3 / 7; /* 3列目開始、7列目(端)の手前まで */
    grid-row: 1 / 7;    /* 1行目開始、7行目(端)の手前まで */
}

/* ================================
   ▼ セクション2 個別配置（画像3枚）
================================ */
/* --- セクション2専用の上書き --- */
.schedule-section.section-2 {
    /* 1:10vw | 2:10vw(狭) | 3:1fr | 4:5vw(隙間) | 5:1fr | 6:10vw */
    grid-template-columns: 5vw 10vw 1fr 5vw 1fr 10vw;
}

/* 5番：Time */
.section-2 .schedule-time-row {
    grid-column: 5;
    grid-row: 1;
    align-self: start;
    justify-self: left;
}

/* 11番：Place */
.section-2 .schedule-place {
    grid-column: 5;
    grid-row: 2;
    align-self: start;    /* 上寄せにしてTimeと近づける */
    justify-self: left;
    text-align: left;
}

/* 29番：Desc */
.section-2 .schedule-desc {
    grid-column: 5;
    grid-row: 5;
    align-self: center;
    max-width: 100%;      /* セル幅に合わせる */
}

/* --- 画像の個別配置 --- */

/* 画像B（s2_image_b）：2,3,8,9,14,15番 */
.section-2 .schedule-images-wrapper .schedule-image:nth-of-type(2) {
    grid-column: 2 / 4;   /* 2列目から3列目の終わりまで */
    grid-row: 1 / 4;      /* 1行目から3行目の終わりまで */
    z-index: 1;
}

/* 画像A（s2_image_a）：17,18,23,24番 */
.section-2 .schedule-images-wrapper .schedule-image:nth-of-type(1) {
    grid-column: 5 / 7;   /* 5列目から6列目(右端10vw)まで */
    grid-row: 3 / 5;      /* 3行目から4行目の終わりまで */
    z-index: 2;           /* 画像Bや他の要素との重なりを考慮 */
}

/* 画像C（s2_image_c）：27,33番 */
.section-2 .schedule-images-wrapper .schedule-image:nth-of-type(3) {
    grid-column: 3;       /* 3列目 */
    grid-row: 4 / 7;      /* 5行目から6行目の終わりまで */
    z-index: 1;
    margin-top: 5vw;
}

/* 画像ラッパー自体の設定 */
.section-2 .schedule-images-wrapper {
    display: contents;    /* 子要素（img）を直接Grid親の直下として扱う */
}

/* ================================
   ▼ セクション3 個別配置
================================ */

/* --- セクション3専用の上書き --- */
.section-3 {
    /* 1:10vw | 2:1.5fr(広め) | 3-5:1fr | 6:10vw */
    grid-template-columns: 10vw 2fr 1fr 1fr 1fr 10vw;
    
    /* 1行目:auto | 2行目:5vw(狭) | 3-6行目:minmax */
    grid-template-rows: auto 1vw repeat(4, minmax(10vh, auto));
}

/* 2番：Time */
.section-3 .schedule-time-row {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}

/* 14番：Place */
.section-3 .schedule-place {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
}

/* 20番：Desc */
.section-3 .schedule-desc {
    grid-column: 2;
    grid-row: 4;
    align-self: start;
    max-width: 90%; /* 画像と被りすぎないよう調整 */
}

/* 画像：3列目〜5列目 / 2行目〜4行目 */
.section-3 .schedule-images-wrapper {
    grid-column: 3 / 6; /* 3列目開始、6列目の手前まで */
    grid-row: 2 / 5;    /* 2行目開始、5行目の手前まで */
}

/* ================================
   ▼ セクション4
================================ */

/* --- セクション4専用のグリッド定義 --- */
.schedule-section.section-4 {
    /* 列：1:5vw | 2-3:1fr | 4:1fr(余白) | 5:1fr | 6:10vw */
    grid-template-columns: 5vw 1fr 0.5fr 5vw 1fr 10vw;

    /* 行：1行目:2vw | 2行目(Time):auto | 3行目(Place):auto | 4行目以降:可変 */
    grid-template-rows: 
        2vw             /* 1行目：極狭スリット */
        min-content     /* 2行目：Time（中身の最小高さで固定） */
        min-content     /* 3行目：Place（中身の最小高さで固定） */
        1fr             /* 4行目：Desc（ここを伸縮させて余りを吸収） */
        1fr             /* 5行目：Desc続き */
        minmax(5vh, auto); /* 6行目：下部マージン */
    
    min-height: 100vh;
}

/* 11番：Time (2行目 / 5列目) */
.section-4 .schedule-time-row {
    grid-column: 5;
    grid-row: 2;
    align-self: center;
    justify-self: start;
}

/* 17番：Place (3行目 / 5列目) */
.section-4 .schedule-place {
    grid-column: 5;
    grid-row: 3;
    align-self: center;
    justify-self: start;
    text-align: left;
}

/* 23・29番：Desc (4行目〜5行目 / 5列目) 縦貫通 */
.section-4 .schedule-desc {
    grid-column: 5;
    grid-row: 4 / 6; /* 4行目から6行目の手前まで */
    align-self: start;
    padding-top: 2vh;
    max-width: 100%;
}

/* --- 画像の配置 --- */

/* 画像：2,3,8,9,14,15,20,21番（1行目〜4行目 / 2-3列目）縦貫通 */
.section-4 .schedule-images-wrapper {
    display: contents;
}

.section-4 .schedule-image {
    /* 2列目から3列目の終わりまで */
    grid-column: 2 / 4;
    /* 1行目(2vw)から、4行目の終わり（5行目の手前）まで貫通 */
    grid-row: 1 / 5;
    
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* ================================
   ▼ セクション5（has-2-images）
   サンドイッチ型 ＋ 16番開始Desc・ImageB重なり
=============================== */

.schedule-section.section-5 {
    overflow: visible;
    z-index: 5;
    grid-template-columns: 10vw 2fr 5vw 1.5fr 1fr 10vw;
    grid-template-rows: min-content min-content repeat(3, auto);
    min-height: 100vh;
}

/* --- テキスト配置 --- */

/* 4番：Time */
.section-5 .schedule-time-row {
    grid-column: 4;
    grid-row: 1;
    align-self: start;
    justify-self: start;
}

/* 10番：Place */
.section-5 .schedule-place {
    grid-column: 4;
    grid-row: 2;
    align-self: start;
    justify-self: start;
}

/* 16番スタート：Desc（4列目中心に5列目へはみ出し） */
/* 23番で画像B（IMG-B）と物理的に重なる */
.section-5 .schedule-desc {
    grid-column: 4 / 6; /* 4列目〜5列目 */
    grid-row: 3 / 5;    /* 3行目(16番)から5行目の手前(22,23番)まで */
    align-self: start;
    z-index: 10;        /* 画像B（z-5）の上に重ねる */
    padding-top: 1rem;
}

/* --- 画像の配置 --- */

.section-5 .schedule-images-wrapper {
    display: contents;
}

/* IMG(A)：左側 2x3（1, 2, 7, 8, 13, 14番） */
.section-5 .schedule-image:nth-of-type(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 4; 
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* IMG(B)：右下 2x3 ＋ ぶち抜き（23, 24, 29, 30, 35, 36番） */
.section-5 .schedule-image:nth-of-type(2) {
    grid-column: 5 / 7; 
    grid-row: 4 / 7;    
    
    height: 140%; 
    align-self: start;
    object-fit: cover;
    z-index: 5; /* Descの下、セクション6の背景より上 */
}

/* ================================
   ▼ セクション6（has-1-image）
   3列目拡大 ＋ 4列目スリット ＋ 重なり
================================ */

.schedule-section.section-6 {
    z-index: 1; /* セクション5のぶち抜き画像の下に潜らせる */
    
    /* 列：1:10vw | 2:1.5fr | 3:2fr(広) | 4:5vw(狭) | 5:1fr | 6:10vw */
    grid-template-columns: 10vw 1.5fr 0.7fr 1.5fr 5vw 1fr 10vw;
    
    /* 行：2〜4行目を文字の高さに合わせ、5行目以降で高さを確保 */
    grid-template-rows: auto min-content min-content 10vw auto;
    min-height: fit-content;
}

/* --- テキスト配置 --- */

/* 2番：Time */
.section-6 .schedule-time-row {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
}

/* 8番：Place */
.section-6 .schedule-place {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
}

/* 14・20番：Desc（縦貫通） */
/* 9・15番の画像（3列目）と重なるように設定 */
.section-6 .schedule-desc {
    grid-column: 2 / 4; /* 2列目から3列目まで貫通（画像と重なる） */
    grid-row: 4 / 7;
    align-self: start;
    z-index: 10;        /* 画像(z-5)より上に配置 */
    padding-top: 1rem;
}

/* --- 画像の配置 --- */

.section-6 .schedule-images-wrapper {
    display: contents;
}

/* 9, 15番（3列目 / 2-3行目） */
.section-6 .schedule-image {
    grid-column: 3/5;
    grid-row: 2 / 5;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5; /* 降りてくるセクション5の画像Bよりは下 */
}

/* ================================
   ▼ セクション7 個別配置
================================ */

/* 2番：Time */
.section-7 .schedule-time-row {
    grid-column: 2;
    grid-row: 1;
    align-self: center; /* セル内中央 */
}

/* 8番〜9番：Place (重なり開始) */
.section-7 .schedule-place {
    grid-column: 2 / 4; /* 2列目から3列目の終わりまで */
    grid-row: 2;
    align-self: center;
}

/* 14番〜16番：Desc (重なり) */
.section-7 .schedule-desc {
    grid-column: 2 / 5; /* 2列目から4列目の終わりまで */
    grid-row: 3;
    padding-right: 2vw; /* 画像と被る部分の余白 */
    max-width: 35vw;
}

/* 画像：3列目〜6列目(最後)まで。縦は1行目〜6行目(最後)まで */
.section-7 .schedule-images-wrapper {
    grid-column: 3 / 7; /* 3列目開始、7列目(端)の手前まで */
    grid-row: 1 / 7;    /* 1行目開始、7行目(端)の手前まで */
}

/* ================================
   ▼ セクション8 個別配置（画像3枚）
================================ */
/* --- セクション8専用の上書き --- */
.schedule-section.section-8 {
    /* 1:10vw | 2:10vw(狭) | 3:1fr | 4:5vw(隙間) | 5:1fr | 6:10vw */
    grid-template-columns: 5vw 10vw 1fr 5vw 1fr 10vw;
}

/* 5番：Time */
.section-8 .schedule-time-row {
    grid-column: 5;
    grid-row: 1;
    align-self: start;
    justify-self: left;
}

/* 11番：Place */
.section-8 .schedule-place {
    grid-column: 5;
    grid-row: 2;
    align-self: start;    /* 上寄せにしてTimeと近づける */
    justify-self: left;
    text-align: left;
}

/* 29番：Desc */
.section-8 .schedule-desc {
    grid-column: 5;
    grid-row: 5;
    align-self: center;
    max-width: 100%;      /* セル幅に合わせる */
}

/* --- 画像の個別配置 --- */

/* 画像B（s87image_b）：2,3,8,9,14,15番 */
.section-8 .schedule-images-wrapper .schedule-image:nth-of-type(2) {
    grid-column: 2 / 4;   /* 2列目から3列目の終わりまで */
    grid-row: 1 / 4;      /* 1行目から3行目の終わりまで */
    z-index: 1;
}

/* 画像A（s87image_a）：17,18,23,24番 */
.section-8 .schedule-images-wrapper .schedule-image:nth-of-type(1) {
    grid-column: 5 / 7;   /* 5列目から6列目(右端10vw)まで */
    grid-row: 3 / 5;      /* 3行目から4行目の終わりまで */
    z-index: 2;           /* 画像Bや他の要素との重なりを考慮 */
}

/* 画像C（s87image_c）：27,33番 */
.section-8 .schedule-images-wrapper .schedule-image:nth-of-type(3) {
    grid-column: 3;       /* 3列目 */
    grid-row: 4 / 7;      /* 5行目から6行目の終わりまで */
    z-index: 1;
    margin-top: 5vw;
}

/* 画像ラッパー自体の設定 */
.section-8 .schedule-images-wrapper {
    display: contents;    /* 子要素（img）を直接Grid親の直下として扱う */
}

/* ================================
   ▼ セクション9 個別配置
================================ */

/* --- セクション3専用の上書き --- */
.section-9 {
    /* 1:10vw | 2:1.5fr(広め) | 3-5:1fr | 6:10vw */
    grid-template-columns: 10vw 2fr 1fr 1fr 1fr 10vw;
    
    /* 1行目:auto | 2行目:5vw(狭) | 3-6行目:minmax */
    grid-template-rows: auto 1vw repeat(4, minmax(10vh, auto));
}

/* 2番：Time */
.section-9 .schedule-time-row {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}

/* 14番：Place */
.section-9 .schedule-place {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
}

/* 20番：Desc */
.section-9 .schedule-desc {
    grid-column: 2;
    grid-row: 4;
    align-self: start;
    max-width: 90%; /* 画像と被りすぎないよう調整 */
}

/* 画像：3列目〜5列目 / 2行目〜4行目 */
.section-9 .schedule-images-wrapper {
    grid-column: 3 / 6; /* 3列目開始、6列目の手前まで */
    grid-row: 2 / 5;    /* 2行目開始、5行目の手前まで */
}

/* ================================
   ▼ セクション10
================================ */

/* --- セクション4専用のグリッド定義 --- */
.schedule-section.section-10 {
    /* 列：1:5vw | 2-3:1fr | 4:1fr(余白) | 5:1fr | 6:10vw */
    grid-template-columns: 5vw 1fr 0.5fr 5vw 1fr 10vw;

    /* 行：1行目:2vw | 2行目(Time):auto | 3行目(Place):auto | 4行目以降:可変 */
    grid-template-rows: 
        2vw             /* 1行目：極狭スリット */
        min-content     /* 2行目：Time（中身の最小高さで固定） */
        min-content     /* 3行目：Place（中身の最小高さで固定） */
        1fr             /* 4行目：Desc（ここを伸縮させて余りを吸収） */
        1fr             /* 5行目：Desc続き */
        minmax(5vh, auto); /* 6行目：下部マージン */
    
    min-height: 100vh;
}

/* 11番：Time (2行目 / 5列目) */
.section-10 .schedule-time-row {
    grid-column: 5;
    grid-row: 2;
    align-self: center;
    justify-self: start;
}

/* 17番：Place (3行目 / 5列目) */
.section-10 .schedule-place {
    grid-column: 5;
    grid-row: 3;
    align-self: center;
    justify-self: start;
    text-align: left;
}

/* 23・29番：Desc (4行目〜5行目 / 5列目) 縦貫通 */
.section-10 .schedule-desc {
    grid-column: 5;
    grid-row: 4 / 6; /* 4行目から6行目の手前まで */
    align-self: start;
    padding-top: 2vh;
    max-width: 100%;
}

/* --- 画像の配置 --- */

/* 画像：2,3,8,9,14,15,20,21番（1行目〜4行目 / 2-3列目）縦貫通 */
.section-10 .schedule-images-wrapper {
    display: contents;
}

.section-10 .schedule-image {
    /* 2列目から3列目の終わりまで */
    grid-column: 2 / 4;
    /* 1行目(2vw)から、4行目の終わり（5行目の手前）まで貫通 */
    grid-row: 1 / 5;
    
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* ================================
   ▼ セクション11（has-2-images）
   サンドイッチ型 ＋ 16番開始Desc・ImageB重なり
=============================== */

.schedule-section.section-11 {
    overflow: visible;
    z-index: 5;
    grid-template-columns: 10vw 2fr 5vw 1.5fr 1fr 10vw;
    grid-template-rows: min-content min-content repeat(3, auto);
    min-height: 100vh;
}

/* --- テキスト配置 --- */

/* 4番：Time */
.section-11 .schedule-time-row {
    grid-column: 4;
    grid-row: 1;
    align-self: start;
    justify-self: start;
}

/* 10番：Place */
.section-11 .schedule-place {
    grid-column: 4;
    grid-row: 2;
    align-self: start;
    justify-self: start;
}

/* 16番スタート：Desc（4列目中心に5列目へはみ出し） */
/* 23番で画像B（IMG-B）と物理的に重なる */
.section-11 .schedule-desc {
    grid-column: 4 / 6; /* 4列目〜5列目 */
    grid-row: 3 / 5;    /* 3行目(16番)から5行目の手前(22,23番)まで */
    align-self: start;
    z-index: 10;        /* 画像B（z-5）の上に重ねる */
    padding-top: 1rem;
}

/* --- 画像の配置 --- */

.section-11 .schedule-images-wrapper {
    display: contents;
}

/* IMG(A)：左側 2x3（1, 2, 7, 8, 13, 14番） */
.section-11 .schedule-image:nth-of-type(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 4; 
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* IMG(B)：右下 2x3 ＋ ぶち抜き（23, 24, 29, 30, 35, 36番） */
.section-11 .schedule-image:nth-of-type(2) {
    grid-column: 5 / 7; 
    grid-row: 4 / 7;    
    
    height: 140%; 
    align-self: start;
    object-fit: cover;
    z-index: 5; /* Descの下、セクション6の背景より上 */
}

/* ================================
   ▼ セクション12（has-1-image）
   3列目拡大 ＋ 4列目スリット ＋ 重なり
================================ */

.schedule-section.section-12 {
    z-index: 1; /* セクション5のぶち抜き画像の下に潜らせる */
    
    /* 列：1:10vw | 2:1.5fr | 3:2fr(広) | 4:5vw(狭) | 5:1fr | 6:10vw */
    grid-template-columns: 10vw 1.5fr 0.7fr 1.5fr 5vw 1fr 10vw;
    
    /* 行：2〜4行目を文字の高さに合わせ、5行目以降で高さを確保 */
    grid-template-rows: auto min-content min-content 10vw auto;
    min-height: fit-content;
}

/* --- テキスト配置 --- */

/* 2番：Time */
.section-12 .schedule-time-row {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
}

/* 8番：Place */
.section-12 .schedule-place {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
}

/* 14・20番：Desc（縦貫通） */
/* 9・15番の画像（3列目）と重なるように設定 */
.section-12 .schedule-desc {
    grid-column: 2 / 4; /* 2列目から3列目まで貫通（画像と重なる） */
    grid-row: 4 / 7;
    align-self: start;
    z-index: 10;        /* 画像(z-5)より上に配置 */
    padding-top: 1rem;
}

/* --- 画像の配置 --- */

.section-12 .schedule-images-wrapper {
    display: contents;
}

/* 9, 15番（3列目 / 2-3行目） */
.section-12 .schedule-image {
    grid-column: 3/5;
    grid-row: 2 / 5;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5; /* 降りてくるセクション5の画像Bよりは下 */
}

/*=======================================
    総所要時間表示エリアのスタイル
=======================================*/
/* 総所要時間の表示エリア */
.plan-total-duration {
    width: 100%;
    padding: 10vh 10vw; /* 左右の余白をグリッドに合わせる */
    display: flex;
    justify-content: center; /* 中央に配置 */
}

.duration-inner {
    display: flex;
    align-items: center;
}

.duration-icon {
    width: 36px;
    height: auto;
    margin-right: 12px;
}

.duration-inner p {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.1em;
    line-height: 1.8;
}

.duration-inner p span {
    margin: 0 0.2rem;
    line-height: 1;
}

@media screen and (max-width: 768px) {
    /* 全セクション共通：5列グリッドの定義 */
    .schedule-section {
        display: grid !important;
        grid-template-columns: 5% 0.5fr 1fr 0.5fr 5% !important;
        grid-template-rows: auto auto auto !important;
        gap: 10px 0 !important; /* 横の隙間は0、縦は10px */
        padding: 40px 0 !important;
        min-height: auto !important;
        overflow: hidden;
    }

    /* --- 画像の共通設定 --- */
    .schedule-images-wrapper {
        display: contents !important;
    }

    .schedule-image {
        grid-row: 1 !important;
        width: 100% !important;
        height: 55vw !important;
        object-fit: cover !important;
        margin-bottom: 15px !important;
    }

    /* 2枚目以降の画像は非表示 */
    .schedule-image:nth-of-type(n+2) {
        display: none !important;
    }

    /* --- 画像の配置ルール --- */

    /* セクション 1, 6, 7, 12：1〜5列ぶち抜き */
    .section-1 .schedule-image,
    .section-6 .schedule-image,
    .section-7 .schedule-image,
    .section-12 .schedule-image {
        grid-column: 1 / 6 !important;
    }

    /* 奇数セクション（1, 3, 5, 7, 9, 11）：1〜3列（1, 7, 12はぶち抜きで上書き済み） */
    .schedule-section:nth-of-type(odd) .schedule-image {
        grid-column: 1 / 4 !important;
    }

    /* 偶数セクション（2, 4, 6, 8, 10, 12）：3〜5列（6, 12はぶち抜きで上書き済み） */
    .schedule-section:nth-of-type(even) .schedule-image {
        grid-column: 3 / 6 !important;
    }

    /* 再度、特定のぶち抜きセクションを強制適用（詳細度調整） */
    .section-1 .schedule-image, .section-6 .schedule-image, 
    .section-7 .schedule-image, .section-12 .schedule-image {
        grid-column: 1 / 6 !important;
    }

    .departure-point { margin: 5vh 0; }
    .return-point { margin-top: 2vh; }

    /* --- テキスト要素の配置 --- */

    /* Time Row：2列目（4番に相当） */
    .schedule-time-row {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: center !important;
        justify-self: start !important;
        min-width: 48px;
    }

    .terminal-place { font-size: 1.4rem; }

    .terminal-icon-column{ width: 48px; min-width: 48px; }
    .terminal-time { font-size: 1rem; }

    .terminal-desc { font-size: 1rem; }

    .terminal-point { flex-direction: column; }

    .schedule-time-row .schedule-time-text { font-size: 1rem; }

    .duration-inner p { font-size: 0.9rem; }

    .duration-icon { width: 24px; }

    /* Place：3〜4列目（5, 6番に相当） */
    .schedule-place {
        grid-column: 3 / 5 !important;
        grid-row: 2 !important;
        align-self: center !important;
        font-size: 1.4rem !important;
        text-align: left !important;
    }

    /* Description：2〜4列目（7, 8, 9番に相当） */
    .schedule-desc {
        grid-column: 2 / 5 !important;
        grid-row: 3 !important;
        max-width: 100% !important;
        padding: 5px 0 0 0 !important;
        font-size: 1rem !important;
        line-height: 1.8 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        text-shadow: none !important;
    }
}

/* ----------------------------------------
   h2（ガイド情報・注意事項など）
---------------------------------------- */
.special-notes { display: flex; justify-content: space-between; padding: 10vw; margin-top: 5vh; }

.note-item { width: 20vw; }

.special-notes a,
.special-notes a:visited,
.special-notes a:hover {
    width: 30%;
    text-align: center;
    text-decoration: none;
    color: #000;
}

.special-notes p { display: none;}
.special-notes h2 { 
    font-size: 1.3vw;
    font-weight: 300;
    margin: 0;
    text-decoration: none;
    border: 1px solid #000;
    background: #fff;
    border-radius: 60px;
    padding: 1vw 3vw;
}

/* ----------------------------------------
   予約フォーム
---------------------------------------- */
.reserve-button-wrapper { 
    position: fixed;
    bottom: 10%;
    right: 5%;
    width: 10%;
    cursor: pointer;
    z-index: 9998;
}

.reserve-modal {
    display: none; /* 初期は非表示 */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
}

.reserve-modal-content {
    background: #fff;
    padding: 2vw;
    border-radius: 12px;
    width: 40%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.reserve-modal-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 32px;
    cursor: pointer;
}


.single-plan-reserve {
    width: 90%;
    margin: 0 auto;
    padding: 2vw;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.plan-reserve-form {
    display: grid;
    gap: 20px;
    margin-bottom: 30px;
}

.reserve-field label {
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.reserve-field input,
.reserve-field select {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* ラジオボタン専用の幅指定 */
.reserve-field input[type="radio"] {
    width: 15px !important;
    height: 15px; /* 必要なら */
    display: inline-block;
}

.reserve-field label {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* WooCommerce 標準：数量 + カート */
/* 数量コンテナ */
.quantity {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    margin-bottom: 20px;
}

/* 数字部分 */
.quantity input.qty {
    width: 70px;
    height: 48px;
    text-align: center;
    font-size: 1.2rem;
    border-radius: 8px;
    border: none;
}

/* ボタン */
.qty-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #336688 !important;
    color: #fff !important;
    font-size: 1.2rem;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

.qty-btn:hover {
    opacity: 0.85;
}

.qty-label {
    font-weight: 600;
    font-size: 0.9vw;
    margin-bottom: 6px;
    margin-right: 3vw;
    display: block;
}

/* モーダル内の「予約を申し込む」ボタン */
.reserve-modal .single_add_to_cart_button {
    background: #336688 !important;
    border-radius: 60px !important;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 400;
    padding: 0.5vw 2vw;
    width: 100%;
    margin: 1vw auto !important;
    color: #fff;
    border: none;
    font-size: 1.2rem;
    display: block;
    text-align: center;
    transition: 0.25s;
}

.reserve-modal .single_add_to_cart_button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

@media screen and (max-width: 768px) {

    /* ------------------------------
       HERO（画像 + テキスト）
    ------------------------------ */
    .single-plan-hero {
        margin-top: 60px;
        padding: 0;
        aspect-ratio: 3/4;
        border-radius: 0;
    }

    .single-plan-hero .hero-image img {
        aspect-ratio: 3/4;
    }


    .hero-short-desc {
        font-size: 4vh;
        top: 6%;
        left: 5%;
        border-bottom-width: 2px;
    }

    .hero-title {
        font-size: 3vh;
        bottom: 8%;
        left: 5%;
    }

    /* ------------------------------
       価格 + 商品概要
    ------------------------------ */
    .single-plan-summary-row {
        grid-template-columns: 1fr;
        gap: 4vh;
        padding: 0 5vw;
        margin: 5vh 0;
    }

    .single-plan-price-block {
        font-size: 3.5vh;
        padding: 3vh 0;
        gap: 3vh;
    }

    .price-label,
    .price-suffix {
        font-size: 2vh;
    }

    .single-plan-description p.plan-description-details {
        font-size: 1rem;
        line-height: 1.8;
        padding: 0 5%;
        margin-bottom: 10vh;
    }

    /* ------------------------------
       注意事項リンク
    ------------------------------ */
    .special-notes {
        flex-direction: column;
        gap: 3vh;
        padding: 6vh 5vw;
        align-items: center;
    }

    .note-item { width: 70vw; }

    .special-notes h2 {
        width: 100%;
        font-size: 1.3rem;
        padding: 0.5rem;
        margin: 0 auto;
    }

    /* ------------------------------
       予約ボタン（固定位置）
    ------------------------------ */
    .reserve-button-wrapper {
        width: 30%;
        bottom: 5%;
        right: 5%;
    }

    /* ------------------------------
       モーダル
    ------------------------------ */
    .reserve-modal-content {
        width: 90%;
        padding: 4vh;
    }

    .single-plan-reserve {
        width: 100%;
        padding: 4vh;
    }

    .plan-reserve-form {
        gap: 3vh;
    }

    .reserve-field label {
        font-size: 2.2vh;
    }

    .reserve-field input,
    .reserve-field select {
        padding: 2vh;
        font-size: 2.2vh;
    }

    /* 数量 UI */
    .quantity {
        gap: 0;
    }

    .qty-label {
        font-size: 2vh;
        margin-right: 3vh;
    }

    .qty-btn {
        font-size: 2vh;
    }

    .quantity input.qty {
        width: 6vh;
        height: 5vh;
        font-size: 2.5vh;
    }

    /* 予約ボタン */
    .reserve-modal .single_add_to_cart_button {
        font-size: 2.5vh;
        padding: 2.5vh 0;
        border-radius: 50px;
    }

    .wp-block-woocommerce-checkout-order-summary-block{ display: none !important;}
}


/*買い物かごページのスタイル*/
.woocommerce-cart main { margin-top: 5vw; padding: 5vw 10vw;}
/*決済画面ページのスタイル*/
.woocommerce-checkout main{
    margin-top: 5vw;
    padding: 0 10vw;
}

.wc-block-checkout__form h2 {
    color: #006ba4;
    font-size: 1.2vw !important;
    font-weight: bold !important;
}

#wc-guest-checkout-notice { 
    display: none !important;
}

.wc-block-components-sidebar-layout .wc-block-components-main { 
    width: 60% !important; 
}

.wc-block-components-sidebar { 
    width: 40% !important;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name { 
    font-size: 1vw !important; 
    font-weight: 500 !important; 
    line-height: 1.5 !important;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__image { width: 5vw !important;}
.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img { 
    width: 5vw !important; 
    max-width: 96px !important;
}

.wc-block-components-product-details.wc-block-components-product-details { 
    margin: 2vw 0 !important;
}

.wc-block-components-product-details.wc-block-components-product-details li { 
    font-size: 0.8vw !important; 
    margin-bottom: 0.3vw !important;
}

.wc-block-components-button:not(.is-link){
    background: #006ba4;
    font-size: 1vw;
    font-family: "Zen Maru Gothic";
    border-radius: 60px;
}

.wc-block-components-payment-methods__save-card-info { display: none !important; }

.wc-block-components-product-metadata__description > .hero-short-desc { display: none;}

/*決済完了後のページスタイル*/
.woocommerce-order-received main { margin-top: 5vw; padding: 2vw 10vw;}

.woocommerce-order-received h2 { color: #006ba4;}

@media screen and (max-width: 768px) {
    .woocommerce-checkout main{ margin-top: 80px; }
}


/*=========================================================
投稿記事一覧のスタイル
==========================================================*/
/* 投稿一覧（固定ページ） */
.page-id-7535 {
    background: linear-gradient(to bottom, #ffffff 50%, #fff5ef 50%);
}

/* 投稿詳細 */
.single-post {
    background: linear-gradient(to bottom, #ffffff 50%, #fff5ef 50%);
}

/* 検索結果 */
.search {
    background: linear-gradient(to bottom, #ffffff 50%, #fff5ef 50%);
}

.archive.category {
    background: linear-gradient(to bottom, #ffffff 50%, #fff5ef 50%);
}

.archive.date {
    background: linear-gradient(to bottom, #ffffff 50%, #fff5ef 50%);
}

/* =========================================================
   投稿記事一覧ページ（page-articles.php）
   プラン一覧ページのデザインをベースに最適化
========================================================= */

/* ----------------------------------------
   ① フィルターエリア（3カラム横並び）
---------------------------------------- */
.article-filter-title{ 
    display: flex; 
    align-items: center; 
    gap: 3vw;
    margin: 5vw 0 0 0; 
    padding-left: 5vw;
    background: #f0f2f3;
}

.article-filter-title h1 {
    font-size: 7vw;
    font-weight: 500;
    color: #598f69;
    gap: 3vw;
    margin: 0;
}

.article-filter-title .ruby{
    color: #868687;
    font-size: 1.2vw;
    margin: 0;
}

.article-filters-wrapper {
    width: 100%;
    background: #f0f2f3;
    height: 300px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10vw;
    padding: 2vw 5vw;
    box-sizing: border-box;
    font-family: 'Zen Maru Gothic';
}

/* 各フィルターブロック */
.filter-block {
    padding: 1vw 2vw;
    border-left: solid 1px #000;
}

.filter-block h2 {
    font-size: 1.6vw;
    margin-bottom: 1vw;
}

/* リスト */
.filter-block ul {
    margin: 1vw 0 0 1vw;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3,auto);
}

@media screen and (max-width: 1200px) {
    .filter-block ul { display: flex; flex-direction: column; }
}

.filter-block li {
    list-style-position: outside;
    margin-bottom: 1vw;
}

/* カテゴリ・タグ・年のアイコン */
.filter-category li {
    list-style-image: url('https://wptest.skr.jp/wp-content/uploads/2026/02/news-category-icon-e1771223499916.png');
}

.filter-year li {
    list-style-image: url('https://wptest.skr.jp/wp-content/uploads/2026/02/news-archive-icon-e1771223485963.png');
}

/* リンク */
.filter-block li a,
.filter-block li a:visited,
.filter-block li a:hover {
    color: #000;
    font-family: 'Noto Sans JP';
    font-weight: 500;
    text-decoration: none;
}

/*ページの説明部分*/
.newspage-description { 
    margin: 0;
    padding: 0 3vw;
    background: #fff5ef;
}

.newspage-description h2 {
    font-size: 3vw;
    font-weight: 700;
    color: #598f69;
    margin: 0;
    padding: 2vw 0;
}

.newspage-description p {
    font-size: 1vw;
    font-weight: 400;
    color: #868687;
    margin: 0;
}

@media screen and (max-width: 768px){
    .newspage-description h2 { font-size: 3vh;}
    .newspage-description p { font-size: 1.5vh;}
}



/* ----------------------------------------
   ② 投稿記事一覧グリッド（プラン一覧と同じ）
---------------------------------------- */
.article-list-area {
    background: #fff5ef;
    padding: 0 5vw;
}

/* 3カラムグリッド */
.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-grid > li {
    border-right: 1.5px solid #000;
    padding: 3vw;
    margin: 3vw 0;
}

.article-grid > li:nth-child(3n) {
    border-right: none;
}

/* ----------------------------------------
   ③ 投稿カード（article-card）
---------------------------------------- */
.article-card {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
    display: block;
    height: 100%;
}

.article-card:hover {
    transform: translateY(-4px);
}

/* サムネイル */
.article-thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1.618/1;
}

/* 日付 */
.article-date {
    margin-top: 12px;
    font-size: 1.1vw;
    color: #333;
}

/* タイトル */
.article-title {
    font-size: 1.7vw;
    margin: 8px 0 0 0;
    font-weight: 400;
    color: #000;
    line-height: 1.4;
}

.article-tags{
    margin-top: 2vw;
    font-weight: 300;
    color: #706e70;
}

/* =========================================================
   キーワード検索フォーム
========================================================= */

.filter-search .article-search-form {
    margin-top: 1vw;
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.filter-search input[type="text"] {
    padding: 0.8vw 1vw;
    font-size: 1.2vw;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.filter-search button {
    padding: 0.8vw 1vw;
    font-size: 1.2vw;
    background: #36578e;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.filter-search button:hover {
    background: #2d4a78;
}


/* ----------------------------------------
   ④ ページネーション
---------------------------------------- */
.articles-pagination {
    text-align: center;
    margin-top: 5vw;
}

.articles-pagination a,
.articles-pagination span {
    margin: 0 6px;
    font-size: 1.2vw;
    color: #248960;
    text-decoration: none;
    background-color: transparent;
    border: #248960 1px solid;
    border-radius: 20px;
    padding: 0.2vw 1vw;
}

.articles-pagination .current {
    font-weight: bold;
    color: #fff;
    background-color: #248960;
    border-radius: 20px;
    padding: 0.2vw 1vw;
}

@media screen and (max-width: 768px){
    .articles-pagination a,
    .articles-pagination span { padding: 1vh 3vh; }

    .articles-pagination .current { padding: 1vh 3vh; }
}


/*=========================================================
投稿記事詳細のスタイル
==========================================================*/
/* ================================
   全体レイアウト（2カラム）
================================ */
.single-post-layout {
    width: 100%;
    margin: 60px 0 0 0;
    display: grid;
    grid-template-columns: 25% 1fr;
    gap: 0;
}

/* ================================
   左側サイドバー
================================ */
.single-post-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    background-color: #edeeef;
    padding: 5vw;
    margin-bottom: 5vw;
}

.sidebar-section {
    background: #edeeef;
}

.sidebar-title {
    font-family: "Zen Maru Gothic", sans-serif;
    color: #248960;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.5vw;
    margin-bottom: 0.5vw;
    white-space: nowrap;
}

/* ================================
    記事一覧に戻るボタン
================================= */
.sidebar-back { margin-bottom: 1.5vw;}

.sidebar-back a {
    font-family: "Zen Maru Gothic", sans-serif;
    color: #248960;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2vw;

    /* すべての状態で同じ見た目にする */
    transition: none;
}

.sidebar-back a:visited,
.sidebar-back a:hover,
.sidebar-back a:active,
.sidebar-back a:focus {
    color: #248960;
    text-decoration: none;
    opacity: 1;
}

/* ================================
     プラン誘導
==================================*/
.sidebar-plan-image img {
    width: 100%;
}

/* ================================
   キーワード検索
================================ */
.sidebar-search-input {
    width: 100%;
    padding: 1.2vw 0.6vw;
    border: 1px solid #ccc;
    margin-bottom: 0.8vw;
}

.sidebar-search-btn {
    display: none;
}

.sidebar-search-btn:hover {
    display: none;
}

/* ================================
   最新記事カード
================================ */
.new-article-add { font-size: 1vw;}

.sidebar-latest-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-latest-item {
    margin-bottom: 1.2vw;
}

.latest-card {
    display: flex;
    gap: 1vw;
    text-decoration: none;
    color: #333;
}

.latest-thumb img {
    width: 5vw;
    height: 4vw;
    object-fit: cover;
}

.latest-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.latest-date {
    font-family: "Zen Maru Gothic", sans-serif;
    color: #248960;
    text-decoration: none;
    font-weight: 600;
}

.latest-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ================================
   タグ・カテゴリフィルター
================================ */
.sidebar-tag-list,
.sidebar-category-list {
    list-style-image: url(https://wptest.skr.jp/wp-content/uploads/2026/02/news-category-icon-e1771223499916.png);
    list-style-position: inside;
    padding: 0;
    margin: 0;
}

.sidebar-tag-list li,
.sidebar-category-list li {
    margin-bottom: 0.6vw;
}

.sidebar-tag-list a,
.sidebar-category-list a {
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    transition: 0.2s;
}

.sidebar-tag-list a:hover,
.sidebar-category-list a:hover {
    opacity: 0.7;
}

/* ================================
   アーカイブ（年→月トグル）
================================ */
.sidebar-archive-list {
    list-style-image: url(https://wptest.skr.jp/wp-content/uploads/2026/02/news-archive-icon-e1771223485963.png);
    list-style-position: inside;
    padding: 0;
    margin: 0;
}

.archive-year {
    margin-bottom: 1vw;
}

.archive-year-toggle {
    cursor: pointer;
    font-weight: 700;
    display: inline;
    margin-bottom: 0.5vw;
}

.archive-month-list {
    list-style: none;
    padding-left: 1.5rem;
    display: none; /* 初期は閉じる */
}

.archive-month-list li {
    margin-bottom: 0.4vw;
}

.archive-month-list a {
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
}

.archive-month-list a:hover {
    opacity: 0.7;
}

/* ================================
   右側：記事本文
================================ */
.single-post-main {
    background: #fff5ef;
    padding: 10vw;
}

.single-post-title {
    font-size: 2vw;
    font-weight: 700;
    margin-bottom: 1vw;
    color: #248960;
}

.single-post-meta {
    display: flex;
    gap: 1.5vw;
    font-size: 0.9rem;
    color: #666;
    align-items: center;
    line-height: 1.7;
}

.single-post-meta .post-tags { margin: 0; align-items: center;}

.single-post-meta .post-tags a { color: #666; text-decoration: none; transition: none;}

.single-post-meta .post-tags a:hover, 
.single-post-meta .post-tags a:visited, 
.single-post-meta .post-tags a:active,
.single-post-meta .post-tags a:focus{
    color: #666;
    text-decoration: none;
}

.single-post-meta .post-date {
    position: relative;
    padding-left: 15px; /* アイコン分の余白 */
}

.single-post-meta .post-date::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-image: url("https://wptest.skr.jp/wp-content/uploads/2026/02/news-archive-icon-e1771223485963.png");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
}

.single-post-meta .post-tags a {
    position: relative;
    padding-left: 15px; /* アイコン分の余白 */
    margin-right: 0.6em;
}

.single-post-meta .post-tags a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-image: url("https://wptest.skr.jp/wp-content/uploads/2026/02/news-category-icon-e1771223499916.png");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
}

.single-post-thumbnail { width: 70%; height: auto; margin: 5vw auto;}

.single-post-thumbnail img {
    width: 100%;
    height: auto;
}

.single-post-content {
    line-height: 1.9;
    font-size: 1.05rem;
    margin: 0 auto;
    width: 70%;
}

.single-post-nav {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #ddd;
    align-items: center;
}

.single-post-nav a {
    color: #248960;
    font-family: "Zen Maru Gothic";
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

.single-post-nav a:hover {
    opacity: 0.7;
}

/* ============================================
    活動内容説明ページのスタイル
=============================================== */
.page-id-7653 main,
.page-id-7661 main,
.page-id-7664 main {
    text-align: center;
    color: #333;
    padding: 0 15vw;
    margin-top: 96px;
    background-color: #fdfdfd;
    overflow: hidden;
    position: relative;
    z-index: -2;
}

@media screen and (max-width: 768px){.page-id-7653 main,.page-id-7661 main,.page-id-7664 main{ margin-top: 60px;} }

.page-id-7653 h1,
.page-id-7661 h1,
.page-id-7664 h1 {
    margin: 7vw auto;
    width: fit-content;
    padding-bottom: 3vw;
    border-bottom-width: 30%;
    font-size: 4vw;
}

.page-id-7653 h1 { border-bottom: 7px solid #cc5959;}
.page-id-7661 h1 { border-bottom: 7px solid #5999cc;}
.page-id-7664 h1 { border-bottom: 7px solid #59cc59;}

.page-id-7653 h2,
.page-id-7661 h2,
.page-id-7664 h2 {
    margin: 5vw auto;
    width: fit-content;
    padding-bottom: 3vw;
    border-bottom-width: 30%;
    font-size: 2vw;
}

.page-id-7653 h2 { border-bottom: 5px solid #cc5959;}
.page-id-7661 h2 { border-bottom: 5px solid #5999cc;}
.page-id-7664 h2 { border-bottom: 5px solid #59cc59;}

.page-id-7653 h3,
.page-id-7661 h3,
.page-id-7664 h3 {
    margin: 0 auto;
    text-align: left;
    width: 60vw;
}

.page-id-7653 p,
.page-id-7661 p,
.page-id-7664 p {
    max-width: 60vw;
    line-height: 2;
    text-align: left;
    margin: 0 auto;
}

.page-id-7653 figure,
.page-id-7661 figure,
.page-id-7664 figure {
    position: fixed;
    top: 40%;
    right: 0;
    overflow: hidden;
}

.page-id-7653 figure img,
.page-id-7661 figure img,
.page-id-7664 figure img {
    opacity: 0.05;
}

/* ================================
   お問い合わせontactページ（page-id-6457）
   見出しスタイル
================================ */

/* h1（Contact） */
.page-id-6457 main {
    margin-top: 96px;
    padding: 0 15vw;
    padding-bottom: 5vw;
}

@media screen and (max-width: 768px){ .page-id-6457 main { margin-top: 60px;}}

.contact-headline > .wp-block-group__inner-container {
    display: flex;
    gap: 3vw;
    align-items: center;
    margin-bottom: 5vw;
}

.page-id-6457 h1 {
    color: #365888;
    font-size: 7vw;
    font-weight: 500;
    letter-spacing: 0.3vw;
    margin: 0;
    margin-left: -7.5vw;
    text-decoration: none;
}

.contact-headline p {
    margin: 0;
    font-size: 1.2vw;
    font-weight: 500;
    letter-spacing: 0.1vw;
    color: #898586;
}

/* h2（セクション見出し） */
.page-id-6457 h2 {
    color: #365888;
    font-size: 1.8rem;
    font-weight: 600;
    margin: 2vw 0;
    text-decoration: none;
}

#snow-monkey-form-7160 { margin: 5vw 0;}

.smf-progress-tracker { display: none;}

.confirm-attend { line-height: 3; }

/* ================================
   Contactページ（page-id-6457）
   Snow Monkey Forms ボタンデザイン
================================ */

/* Contactページ（page-id-6457）Snow Monkey Forms ボタン */
/* 無効状態（disabled）の見た目） */
.page-id-6457 .smf-button-control__control:disabled {
    background: #cccccc !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.page-id-6457 .smf-button-control__control {
    font-family: "Zen Maru Gothic", sans-serif !important;
    font-size: 1.1vw !important;

    /* ここが重要：background を上書きする */
    background: #365888 !important;
    background-color: #365888 !important;

    color: #fff !important;
    border: none !important;
    border-radius: 60px !important;
    padding: 1vw 2vw !important;

    /* ブラウザ標準のボタン装飾を消す */
    appearance: none !important;
    -webkit-appearance: none !important;

    cursor: pointer;
    text-decoration: none;
    transition: none !important;
}

/* hover/active/focus */
.page-id-6457 .smf-button-control__control:hover,
.page-id-6457 .smf-button-control__control:active,
.page-id-6457 .smf-button-control__control:focus {
    background: #365888 !important;
    color: #fff !important;
    opacity: 1 !important;
    outline: none !important;
}

/* 送信中アニメーションを消す場合 */
.page-id-6457 .smf-sending::before {
    display: none !important;
}

/* 確認画面で非表示 */
.snow-monkey-form[data-screen="confirm"] .hide-on-confirm {
    display: none !important;
}

.snow-monkey-form[data-screen="confirm"] [data-name="confirmed-check"] {
    display: none !important;
}



/*==========================================================
    サイトマップページ
============================================================ */
.page-id-7803 {background: linear-gradient(to bottom,#fff 30%,#0b2b52 40%); }

.page-id-7803 main {
    margin-top: 96px;
    padding: 5vw 10vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: left;
    gap: 3vw 0;
    background: #0b2b52;
    color: #fff;
}

@media screen and (max-width: 768px){ .page-id-7803 main { margin-top: 60px; grid-template-columns:1fr; }}

.page-id-7803 main a,
.page-id-7803 main a:visited,
.page-id-7803 main a:hover { color: #fff; text-decoration: none; }

.page-id-7803 h2 { font-weight: 500; text-align: center; width: fit-content;}
.page-id-7803 h3 { font-weight: 400;}
.page-id-7803 h4 { font-weight: 300; margin-left: 1rem;}

.sitemap-flex > .wp-block-group__inner-container { display: flex; gap: 3vw; justify-content: left;}


/*==========================================================
    その他固定ページ
============================================================ */
.page-id-7722 main,
.page-id-6454 main,
.page-id-6449 main,
.page-id-7738 main,
.page-id-7740 main { margin-top: 5vw; padding: 5vw 10vw;}

.page-id-7722 h1,
.page-id-6454 h1,
.page-id-6449 h1,
.page-id-7738 h1,
.page-id-7740 h1 { padding: 2.5vw; border-bottom: 1px solid #000 ; margin: 0 auto; margin-bottom: 2.5vw; width: fit-content;}

.page-id-7722 h2,
.page-id-6454 h2,
.page-id-6449 h2,
.page-id-7738 h2,
.page-id-7740 h2 { margin: 2vw 0;}

.page-id-7722 h4 { width: 70%; margin: 0 auto; line-height: 3;}
.page-id-7722 p { width: 70%; margin: 0 auto; line-height: 3;}

/* =========================================================
   Smartphone（～768px）
   ========================================================= */
   @media screen and (max-width: 1100px) {
  /* ---------- Header：ハンバーガー展開 ---------- */
  .site-header { width: 70vw; height: 96px; }
  .header-inner { width: 100%; height: 100%; padding: 0 5%; align-items: center; }
  .header-logo{ width: auto; height: 60px;}
  .header-logo img{ width: auto; height: 60px;}
  .hamburger { display: flex; flex-direction: column; gap: 7px;  width: 70px; height: 10px; z-index: 10000; }
  .menu-line { width: 70px; height: 1.5px; background: #403d3c; }
  .header-nav { 
    display: none; 
    position: absolute;
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    width: 50vw; 
    background: #fff;
    padding: 10vw;
    text-align: center;
    z-index: 9999;
  }

  .header-nav.open { display: block; border-top: #403b3a 1px solid; border-left: #403b3a 1px solid; }
  .header-nav ul { flex-direction: column; gap: 3vh; text-align: left; }
  .header-nav li{ width: fit-content; border-bottom: 1px solid #403b3a; padding: 1vh 0; margin: 0 auto; }
  .header-nav li a { font-size: 20px; display: flex; flex-direction: column; width: fit-content; margin: 0 auto; }
  .nav-cart a { font-size: 6vw; }
  .cart-icon { width: auto; height: 48px; }
  .cart-count { font-size: 15px; top:0; }
  .lang-trigger { font-size: 20px; padding: 10px 20px; }
  .lang-dropdown{ padding: 10px; left: 50%; transform: translateX(-50%) ;}
  .lang-dropdown > div { display: grid; grid-template-columns: 50% 50%; grid-template-rows: 50% 50%; gap: 10px; width: 100%;}
  .nav-lang:hover .lang-dropdown{ display: flex; gap: 30px;}
   }

@media screen and (max-width: 768px) {
  /* ---------- Header：ハンバーガー展開 ---------- */
  .site-header { width: 100vw; height: 60px; }
  .header-inner { width: 100%; height: 100%; padding: 0 5%; align-items: center; }
  .header-logo{ width: auto; height: 45px;}
  .header-logo img{ width: auto; height: 45px;}
  .hamburger { display: flex; flex-direction: column; gap: 7px;  width: 70px; height: 10px; z-index: 10000; }
  .menu-line { width: 70px; height: 1.5px; background: #403d3c; }
  .header-nav { 
    display: none; 
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw; 
    background: #fff;
    padding: 10vw;
    text-align: center;
    z-index: 9999;
  }

  .header-nav.open { display: block; border-top: #403b3a 1px solid; border-left: #403b3a 1px solid; }
  .header-nav ul { flex-direction: column; gap: 3vh; text-align: left; }
  .header-nav li{ width: fit-content; border-bottom: 1px solid #403b3a; padding: 1vh 0; margin: 0 auto; }
  .header-nav li a { font-size: 20px; display: flex; flex-direction: column; width: fit-content; margin: 0 auto; }
  .nav-cart a { font-size: 6vw; }
  .lang-trigger { font-size: 20px; padding: 10px 20px; }
  .lang-dropdown{ padding: 10px; left: 50%; transform: translateX(-50%) ;}
  .lang-dropdown > div { display: grid; grid-template-columns: 50% 50%; grid-template-rows: 50% 50%; gap: 10px; width: 100%;}
  .nav-lang:hover .lang-dropdown{ display: flex; gap: 30px;}

  /* ---------- Float Button ---------- */
  .float-button { display: none; }

  .sp-float-button{ 
    width: 100vw;
    height: 90px;
    padding: 2vh;
    background-color: #fff;
    display: flex;
    justify-content: space-evenly;
    position: fixed;
    bottom: 0;
    z-index: 500;
  }

  /* ---------- section1（イントロ動画） ---------- */
  .section1 { height: 100svh; }
  #pcmovie { display: none;}
  #spmovie { display: block; }

  /* ---------- 共通パディング ---------- */
  .section2, .section3, .section4, .section5, .section6, .section7 { padding: 40px 5%; }

  /* ---------- section2（topics slider） ---------- */
  .section2{ padding: 40px 0 0 0; margin-top: 60px; }
  .section2 .wp-block-button { width: 100vw; margin-top: 5vh; padding: 2vh 0; background-color: #bc9e66; }
  .section2 .wp-block-button__link { display: block; width: 80%; margin: auto; background-color: #fff; border: 2px solid #fff96f ; color: #bc9e66; font-size: larger; padding: 1vh; letter-spacing: 3px; }
  .plan-headline-group > .wp-block-group__inner-container{ margin-bottom: 3vh;}
  .plan-section-headline { font-size: 7vh; }
  .plan-headline-group p { font-size: 1.7vh; }
  .topics-slider { gap: 10vw; padding-left: 3vw; }
  .topics-slider > li { height: auto; width: 90vw; gap: 1vh; padding-left: 0; flex-direction: column; }
  .topics-band { 
    width: auto; height: 8vh; padding: 0.5vh;  order: 1;
  }
  .topics-band  {
    flex-direction: row; align-items: center;
  }
  /* タイトル・抜粋は横書きに戻す（スマホの読みやすさを優先） */
  .topics-band h1 { 
    writing-mode: horizontal-tb; font-size: 3vh; font-style: italic; 
    margin: 0; white-space: normal; align-self: unset; width: fit-content;
  }
  .topics-band h2 { 
    writing-mode: horizontal-tb; text-orientation: mixed; 
    font-size: 0.9rem; text-align: left; margin: 0; align-self: flex-start; line-height: 1.5; width: 50%;
  }
  .topics-card { width: 100%; height: auto; order: 2; border-radius: 0 0 60px 0; }
  .topics-card img { aspect-ratio: 1/1; height: auto; }
  .topics-card-content p { position: absolute; padding: 2vh; font-size: 1.7vh; color: #fff; width: 100%; line-height: 2.5; }

  /* ---------- section3（What / Where） ---------- */
  /* section3 全体を縦積みに */
  .section3 {
    display: flex;
    flex-direction: column;
    gap: 8vw;
    position: relative; /* ★ absolute の基準 */
    padding: 20vw 5vw;
  }

  /* PC の Grid 指定を無効化 */
  .section3 > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* 並び順（指定） */
  .what-headline { order: 1; width: 50vw; }
  .theme-buttons { order: 2; width: 60vw; }
  .where-headline { order: 3; width: 50vw; text-align: left; align-self: start; }
  .map-buttons { order: 4; }
  .japan-map-wrapper { order: 5; }
  .experience-text { order: 6; }

  /* image-blossum と image-bus は absolute で自由配置 */
  .image-blossum {
    order: 7;
    position: absolute;
    width: 50%;
    top: 8%;
    right: 1%;
    z-index: 1;
  }

  .image-bus {
    order: 8;
    position: absolute;
    width: 27%;
    bottom: 48%;
    right: 21%;
    z-index: 1;
  }

  /*モバイル版のthme-buttonsの見た目*/
  .theme-buttons .wp-block-group__inner-container{ gap: 1vh;}
  .section3 .wp-block-button__link{ font-size: 2vh; padding: 0 2vh; font-weight: 300;}

  /* map-buttons を通常フローに戻す */
  .map-buttons { position: static; width: 100%; height: auto; pointer-events: auto; order: 4; /* Aki 指定の順番 */ margin-top: 5vw; } 
  .map-buttons > .wp-block-group__inner-container{ display: flex; flex-direction: column; gap: 1vh;}
  /* 内部のボタンを縦並びにする */ 
  .map-buttons .wp-block-buttons { position: static; display: flex; flex-direction: column; gap: 3vw; align-items: flex-start; /* 左揃え（必要なら center に変更可） */ } 
  /* ボタンの見た目は PC と同じでOK */ 
  .map-buttons .wp-block-button__link { font-size: 4vw; padding: 2vw 4vw; border-radius: 50px; letter-spacing: 0.3vw; width: auto; } 
  /* 位置指定はすべて解除（PC の absolute を無効化） */ 
  .hokkaido-tohoku, 
  .kanto, .hokuriku, 
  .kansai, .sannin-sikoku, 
  .kyusyu, .okinawa { top: auto !important; left: auto !important; position: static !important; }

  /* テキストサイズ調整（必要なら） */
  .section3 h2 {
    font-size: 2.5vh;
    line-height: 1.2;
  }

  .section3 p {
    font-size: 2vh;
    line-height: 1.8;
    margin-top: 2vh;
  }

  .big_w {
    font-size: 7.5vh;
    line-height: 1;
  }

  /*=============================================
   section4 全体 
   ==============================================*/
  .section4 {
    padding: 15vw 0;
  }

  /* タイトル部分 */
  .news_section_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 2vw;
    margin-left: 5vw;
  }

  .news_section_title h2 {
    font-size: 7vh;
  }

  .news_section_title p {
    font-size: 1.7vh;
    margin: 0;
    letter-spacing: 0.1vh;
  }

  /* 最新の投稿：スライダー解除 → 縦積み */
  .wp-block-latest-posts {
    display: flex;
    flex-direction: column;
    gap: 12vw;
    overflow: visible;
    margin: 10vw 0;
  }

  /* 1カード（li）を2×3グリッドにする */
  .wp-block-latest-posts li {
    width: 90vw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 45% auto;
    grid-template-rows: auto auto auto;
    gap: 1.5vh 3vh;
    padding-bottom: 1vh;
    border-bottom: 1px solid #ccc; /* ★区切り線 */
  }

  /* 画像（1〜2行目の左側） */
  .wp-block-latest-posts__featured-image {
    grid-column: 1 / 2;
    grid-row: 1 / 3; /* 1〜2行目を占有 */
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 3vw;
    position: relative;
  }

  .wp-block-latest-posts__featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3vw;
    margin-left: 0;
  }

  /* オフセット枠線（モバイル用に弱める） */
  .wp-block-latest-posts__featured-image::after {
    display: none;
  }

  /* 日付（右側1行目） */
  .wp-block-latest-posts__post-date {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-size: 4vw;
    color: #000;
    margin: 0;
  }

  /* タイトル（右側2行目） */
  .wp-block-latest-posts__post-title {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: 5vw;
    font-weight: 600;
    margin: 0;
    white-space: normal;
  }

  /* タグ（3行目：横ブチ抜き） */
  .post-tags {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    display: flex;
    flex-wrap: wrap;
    gap: 2vw;
    margin-top: 1.5vh;
    margin-left: 0;
  }

  .post-tag {
    padding: 1vw 3vw;
    background: #c7c7c8;
    color: #fff;
    font-size: 3.5vw;
    border-radius: 5vw;
  }

  /* 「もっと見る」ボタン */
  .section4 .wp-block-buttons {
    margin-top: 5vh;
  }

  .section4 .wp-block-button__link { font-size: 2vh; padding: 2vh; width: 60vw; letter-spacing: 0.3vh; margin-top: 7vh;  }

  .section4 .vector-right {
    font-size: 2.5vh;
    margin-left: 2vh;
  }

  /* ---------- section5（ABOUT） ---------- */
  .section5{ padding: 5vh 0;}
  .about-headline { padding: 10vw 5vw 16vw; }
  .about-headline > .wp-block-group__inner-container { flex-direction: column; gap: 6vw; align-items: flex-start; }
  .about-h2-p > .wp-block-group__inner-container { flex-direction: column; align-items: flex-start; gap: 2vh;}
  .about-h2-p p{ font-size: 1.7vh !important; letter-spacing: 0.1vh;}
  .section5 h2 { font-size: 7vh; }
  .about-headline p { font-size: 1.7vh; line-height: 2; text-align: left; width: auto; }
  /*PC版非表示*/
  .section5-image{ display: none;}
  /*スマホ版表示*/
  .sp-section5-image{ display: block; margin: 0;}
  .section5 .wp-block-buttons { margin-top: 10vw; }
  .section5 .wp-block-button__link { font-size: 2vh; padding: 2vh; width: 60vw; letter-spacing: 0.3vh; margin-top: 7vh; }
  .section5 .vector-right { margin-left: 2vh; font-size: 2vh; }  

  /* ---------- section6（Activities） ---------- */
  .section6{ padding: 0;}
  .activity-headline { padding: 15vw 5vw; text-align: left; }
  .activity-headline h2 { font-size: 7vh; letter-spacing: 0.1vh; }
  .activity-headline p { font-size: 1.7vh !important; letter-spacing: 0.1vh; }
  .activity-section { gap: 0; margin: 0; }
  .section6 .wp-block-column { padding: 10vh 5vh; gap: 3vh; }
  .activity-section-picture { width: 88% !important; margin: 5vw auto; }
  .section6 .wp-block-column figure:nth-of-type(2) { position: absolute; transform: none; width: 60%; margin: 0 auto; }
  .section-red figure:nth-of-type(2) { top: 25%; left: -20%; }
  .section-blue figure:nth-of-type(2){top: 26%; left: 45%;}
  .section-green figure:nth-of-type(2){ width: 120% !important; top: 13%; left: 0%;}
  .section6 h3 { font-size: 3vh; margin-top: 10vh; }
  .section6 p { font-size: 2vh; font-weight: 400; }
  .section6 .wp-block-button__link { font-size: 2vh; padding: 2vh; width: 60vw; letter-spacing: 0.3vh; margin-top: 12vh; }
  .section6 .vector-right { margin-left: 2vh; font-size: 2vh; }  


  /* ---------- section7（リンクバナー） ---------- */
  .section7 { padding: 10vh 5vh; }
  .section7 img { width: 100%; }
  .link-banner-upper .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 3vh; }
  .link-banner-lower .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 3vh; }

  /* ---------- Footer ---------- */
  .site-footer { height: 250vw; padding: 75vw 7vw 0; margin-bottom: 90px; background-size: cover; }
  .footer-inner { flex-direction: column; gap: 8vw; }
  .footer-logo img { height: 12vw; }
  .footer-info { margin-left: 0; gap: 4vw; width: 100%; }
  .footer-row.row-1 { flex-direction: column; gap: 4vw; padding-right: 0; }
  .company-name { font-size: 4vw; }
  .company-address { font-size: 3.6vw; }
  .sns-icons { justify-content: flex-start; }
  .sns-icons img { width: 6.4vw; }
  .footer-row.row-2 { grid-template-columns: 1fr; gap: 6vw; padding-right: 0; }
  .footer-links-col a { font-size: 3.6vw; }
  .footer-row.row-3 a { font-size: 3.4vw; }
  .footer-row.row-4 { font-size: 3.4vw; }

  /* ---------- WooCommerce 一覧 ---------- */
  .plan-filters-wrapper { grid-template-columns: 50% 50%; gap: 2vh; padding: 3vh; margin-top: 0; height: 450px; }
  .filter-block { height: fit-content; }
  .filter-block h2 { font-size: 2vh;}
  .filter-block li { list-style-position: inside;}
  .filter-plan ul, .filter-area ul { margin: 2vw 0; display: flex; flex-direction: column; }
  .filter-price .widget_price_filter .ui-slider { width: 80vw; }
  .plan-grid { grid-template-columns: 1fr; padding: 12vw 5vw; }
  .plan-grid > li { border-right: none !important; border-bottom: 1px solid #000; padding: 6vw 0; margin: 0; }
  .plan-grid > li:last-child { border-bottom: none; }
  .plan-title { font-size: 3vh; }
  .plan-price { font-size: 2.5vh; }
  .plan-short-desc { font-size: 4.2vw; }
  .plan-meta-item span { font-size: 1.5vh; }
  .plan-meta-icon { width: auto; height: 1.2vh; }


    /* From（小さめ） */
    .plan-price-label { font-size: 1.5vh; }

    /* WooCommerce の価格HTML */
    .plan-price-value { font-size: 2vh; }

    /* ～（価格と同じサイズ） */
    .plan-price-suffix { font-size: 2vh; }

    .woocommerce-pagination ul li a {    
        padding: 1vh 3vh !important;
        font-size: 2vh !important;
     }

    .woocommerce nav.woocommerce-pagination ul li a:focus, 
    .woocommerce nav.woocommerce-pagination ul li a:hover, 
    .woocommerce nav.woocommerce-pagination ul li span.current {
        padding: 1vh 3vh !important;
        font-size: 2vh;
    }

  /* ---------- WooCommerce 商品詳細 ---------- */


  /*----------- WooCommerce決済画面 -------------*/
  .wc-block-checkout__form h2 {
    font-size: 2.5vh !important;
}

#wc-guest-checkout-notice { 
    display: none !important;
}

.wc-block-components-sidebar-layout .wc-block-components-main { 
    width: 100% !important; 
}

.wc-block-components-sidebar { 
    width: 100% !important;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name { font-size: 1.5vh !important; }

.wc-block-components-order-summary .wc-block-components-order-summary-item__image { width: 10vh !important;}
.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {  width: 10vh !important; }

.wc-block-components-product-details.wc-block-components-product-details { 
    margin: 2vh 0 !important;
}

.wc-block-components-product-details.wc-block-components-product-details li { 
    font-size: 1.5vh !important; 
    margin-bottom: 0.3vh !important;
}

.wc-block-components-button:not(.is-link){
    font-size: 2vh;
}




/* ------------投稿記事一覧のページ--------------- */

  /* ① フィルターエリア（3 → 2 カラム） */
  .article-filter-title {
      font-size: 4vh;
      margin: 5vw 0 0 0;
      padding-left: 5vw;
      display: flex;
      flex-direction: column;
      gap: 1vh;
      font-weight: bold;
      margin-top: 60px;
  }

  .article-filter-title .ruby { font-size: 1.5vh; }

  .article-filters-wrapper {
      grid-template-columns: 50% 50%;
      gap: 2vh;
      padding: 3vh 5vw;
      height: auto; /* PC の固定高さを解除 */
  }

  .filter-block h2 {
      font-size: 2vh;
  }

  .filter-block ul {
      margin: 2vw 0;
  }

  .filter-block li {
      list-style-position: inside;
  }

  .filter-block li a { font-size: 1.35vh;}

  /* ② 投稿一覧（3 → 1 カラム） */
  .article-list-area {
      padding: 12vw 5vw;
  }

  .article-grid {
      grid-template-columns: 1fr;
  }

  .article-grid > li {
      border-right: none;
      border-bottom: 1px solid #000;
      padding: 6vw 0;
      margin: 0;
  }

  .article-grid > li:last-child {
      border-bottom: none;
  }
  
  .filter-search input[type="text"]{ font-size: 1.2vh;}

  /* ③ 投稿カード（画像・文字サイズ） */
  .article-thumb img {
      aspect-ratio: 1/1;
      border-radius: 3vw;
  }

  .article-date {
      font-size: 4vw;
      margin-top: 2vw;
  }

  .article-title {
      font-size: 6.2vw;
      margin-top: 3vw;
      font-weight: 500;
  }

  .article-tags {
      font-size: 4vw;
      margin-top: 3vw;
  }

  /* ④ ページネーション */
  .articles-pagination {
      margin-top: 10vw;
  }

  .articles-pagination a,
  .articles-pagination span {
      font-size: 4vw;
  }
/* =============================================
    投稿記事詳細のスタイル
================================================ */
    .single-post { background: #fff5ef; }

    /* 2カラム → 1カラム */
    .single-post-layout {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        margin-top: 60px;
    }

    /* サイドバーをグリッド化 */
    .single-post-sidebar {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto auto auto;
        gap: 4vw;
        padding: 6vw;
        margin: 0;
        background-color: #edeeef;
    }

    /* グリッド配置 */
    .sidebar-back        { grid-area: 1 / 1 / 2 / 2; padding: 0; }
    /* 2, 3 は空白 */
    .sidebar-plan        { display: none; } /* 4 と 5 をまとめて占有 */
    .sidebar-categories  { grid-area: 2 / 1 / 3 / 2; padding: 2vh; } /* 6 */
    .sidebar-search      { grid-area: 3 / 1 / 4 / 3; padding: 2vh; } /* 7 と 8 をまとめて占有 */
    .sidebar-archive     { grid-area: 2 / 2 / 2 / 3; padding: 2vh; } /* 9 */

    /* 最新記事は非表示 */
    .sidebar-latest {
        display: none;
    }

    .sidebar-back a { font-size: 1.2vh;}
    .sidebar-title { font-size: 1.5vh;}

    /* 記事本文はサイドバーの下に */
    .single-post-main {
        width: 100%;
        padding: 8vw 6vw;
        margin: 0;
        border-radius: 0;
    }

    /* タイトルのサイズ調整 */
    .single-post-title {
        font-size: 6vw;
        margin-bottom: 4vw;
    }

    /* メタ情報の調整 */
    .single-post-meta {
        font-size: 3.5vw;
        gap: 3vw;
        margin-bottom: 6vw;
    }

    /* アイキャッチ画像 */
    .single-post-thumbnail {
        width: 100%;
        margin: 0 auto 8vw;
    }

    /* 本文 */
    .single-post-content {
        width: 100%;
        font-size: 4vw;
        line-height: 1.9;
    }

    /* 前後ナビ */
    .single-post-nav {
        margin-top: 10vw;
        padding-top: 6vw;
    }

    .single-post-nav a {
        font-size: 4vw;
    }

/* ============================
     about-1（ヒーロー）
  ============================ */
  .about-1 {
    margin-top: 60px;
  }

  .about-1 h1.wp-block-heading {
    font-size: 7vh;
    top: 0%;
    left: 5%;
    margin: 5vh 0 0 0;
  }

  .about-1 p {
    font-size: 1.5vh;
    top: 13vh;
    left: 5%;
    margin: 0;
  }

  /* ============================
     about-2（3ブロック構成）
  ============================ */

  .about-2 {
    padding: 7vh 0;
  }

  .about-2-upper {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .about-2-upper h2 {
    font-size: 4vh; padding: 0 5%;
  }

  .about-2 p{ font-size: 1.7vh; line-height: 3.5vh; padding: 0 5%; }

  /* middle：画像 → テキストの横並びを縦積みに */
  .about-2-middle > .wp-block-group__inner-container {
    flex-direction: column;
    gap: 8vw;
    margin: 0;
  }

  .about-2-middle figure { width: 100%; max-width: 100%;}

  .about-2-middle > figure.wp-block-image {
    width: 100%;
  }

  .about-2-middle .about-2-middle-p {
    gap: 6vw;
  }

  .about-2-middle .about-2-middle-p p {
    font-size: 1.7vh;
    line-height: 3.5vh;
  }

  .about-2-lower {
    margin-top: 10vw;
  }

  /* ============================
     about-3（縦スライダー）
  ============================ */

  .about-3 {
    padding: 5vh 5%;
  }

  .about-3 h2 {
    font-size: 6vw;
    top: -1%;
  }

  .about-scroll-wrapper { display: none; }

  .sp-about-scroll-wrapper {
    display: block;
    height: 40vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scroll-behavior: smooth;
    border: #fff 1px solid;
    border-top: none;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .sp-about-scroll-wrapper ::before { content: ""; position: absolute; top: 6%; left: 5%; width: 20%; height: 0; border-top: 1px solid #fff; z-index: 1; }
  .sp-about-scroll-wrapper ::after { content: ""; position: absolute; top: 6%; left: 75%; width: 20%; height: 0; border-top: 1px solid #fff; z-index: 1;}

  .sp-scroll-page { height: 40vh; scroll-snap-align: start; display: flex; gap: 5vh; align-items: center; }

  .sp-vertical-dots { position: absolute; right: 7%; top: 24%; }

  .sp-vertical-dots .dot { width: 8px; height: 8px; background: #a9a9a9; border-radius: 50%; margin: 8px 0; }
  .sp-vertical-dots .dot.active { background: #fff; }

  .about-scroll-list { list-style: none; padding: 5vh 1vh; margin: 0; justify-content: center; gap: 3vh; }

  .about-scroll-list li { display: flex; gap: 5vh; padding: 0 5%; margin: 0; }

  .ol-num { font-size: 4vh; font-weight: 600; }

  .ol-text { font-size: 1.5vh; line-height: 3vh; }

  .about-3-lower{ font-size: 1.5vh; line-height: 3.5vh; margin-top: 3vh;}

  /* ▼ SP版のスクロールバー非表示 */ 
  .sp-about-scroll-wrapper { -ms-overflow-style: none; scrollbar-width: none; } 
  .sp-about-scroll-wrapper::-webkit-scrollbar { display: none; } 
  .sp-scroll-page { -ms-overflow-style: none; scrollbar-width: none; } 
  .sp-scroll-page::-webkit-scrollbar { display: none; }

  /* ============================
     about-4（画像＋テキスト）
  ============================ */

  .about-4 {
    padding: 12vw 5vw;
  }

  .about-4 .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
  }

  .about-purpose { width: 100%; margin: 0;}

  .about-purpose h2 { font-size: 4vh;}

  .about-overview { height: auto;}

  .about-overview-ol {
  position: static;
  font-size: 1.3vh;
  width: 100%;
  order: 2;
  margin: 0;
  }

  .about-overview figure:nth-of-type(2) { position: static; order: 1; }
  .about-overview figure:nth-of-type(2) img { width: 80vw; aspect-ratio: 16/9;}

  .about-overview figure:nth-of-type(3) { position: static; align-self: flex-end; order: 3; }
  .about-overview figure:nth-of-type(3) img { width: 70vw;}



  .about-4 img {
    width: 100%;
  }

  .about-4 p {
    font-size: 1.7vh;
    line-height: 2;
  }

  /* ============================
     about-5（スライダー）
     → 既にPC版スライダーがあるので
       スマホでは縦積み＋幅100%に
  ============================ */

  .about-5 {
    padding: 12vw 5vw;
  }

  .about-5 h2 { font-size: 4vh;}

  .about-5 p { font-size: 1.7vh; margin-bottom: 5vh; }

  .about-slider-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6vw;
  }

  .about-slide > .wp-block-group__inner-container { width: 100%; }

  .about-slide ul {
    display: flex;
    flex-direction: column;
    gap: 3vh;
    padding: 0 5%;
  }

  .about-slide ul li:first-child {
    grid-row: auto;
  }

  .about-slide ul li:not(:first-child) {
    font-size: 1.7vh;
    line-height: 1.5;
    padding-left: 0.5em;
  }

  .about-slide ul li:not(:first-child)::marker { font-size: 1vh;}

  .slide-preview,
  .slide-next {
    position: static;
    width: 100%;
    justify-content: center;
  }

  .about-slider-wrapper .slide-preview .wp-block-button__link { left: -10%;}
  .about-slider-wrapper .slide-next .wp-block-button__link { right: -10%;}

  .slide-preview a,
  .slide-next a {
    font-size: 5vh !important;
    padding: 2vw 4vw;
  }

  /* ============================
     about-6 / about-7 / about-8 / about-9
     → 全て「画像＋テキスト」構成なので
       共通で縦積みレイアウトに統一
  ============================ */

  .about-6,
  .about-7,
  .about-8,
  .about-9 {
    padding: 5%;
  }

  .about-6 .wp-block-group__inner-container,
  .about-7 .wp-block-group__inner-container,
  .about-8 .wp-block-group__inner-container,
  .about-9 .wp-block-group__inner-container {
    flex-direction: column;
    gap: 8vw;
  }

  .about-6 img,
  .about-7 img,
  .about-8 img,
  .about-9 img {
    width: 100%;
  }
  
  .about-6 h2,
  .about-7 h2,
  .about-8 h2,
  .about-9 h2 {
    font-size: 4vh;
  }


  .about-6 p,
  .about-7 p,
  .about-8 p,
  .about-9 p {
    font-size: 1.7vh;
    line-height: 2;
  }

  .about-6 .wp-block-group__inner-container { align-items: center;}
  .about-6-message > .wp-block-group__inner-container { height: 25vh;}

    .about-6-message p { opacity: 0; /* デフォルトは非表示 */ }

    /* 中央行（完全表示） */
    .about-6-message p.active { opacity: 1; }

    /* 前後1行（フェード） */
    .about-6-message p.near { opacity: 0.5; }

  .about-portrait > .wp-block-group__inner-container { width: 100%;}
  .about-portrait figure { width: 70%; margin: 0 auto;}
  .about-portrait p {font-size: 1.7vh; white-space: nowrap; text-align: center;}

  .about-7 { margin-bottom: 10vh; }
  .about-7 .wp-block-group > .wp-block-group__inner-container { width: 100%;}
  .about-7 h3 { width: 100%; font-size: 2.5vh; text-align: center;}

  .about-8 figure img { width: 90vw; }

  .about-9 .wp-block-button__link { width: 65vw; font-size: 2vh; margin-bottom: 2vh; letter-spacing: 0.1vh;}

  /* ==============================================
  投稿一覧ページ（archive.php / index.php）
  =================================================  */
  .archive-title {
    font-size: 10vw;
    text-align: center;
    margin: 12vw 0 6vw;
  }

  .archive-description {
    font-size: 4vw;
    text-align: center;
    margin-bottom: 10vw;
  }

  .archive-post-list {
    padding: 0 5vw;
  }

  .archive-post-list article {
    margin-bottom: 12vw;
  }

  .archive-post-list img {
    width: 100%;
    border-radius: 4vw;
  }

  .archive-post-list h2 {
    font-size: 5vw;
    margin: 4vw 0 2vw;
  }

  .archive-post-list .post-date {
    font-size: 3.6vw;
    color: #666;
  }

  .archive-post-list .post-excerpt {
    font-size: 4vw;
    line-height: 7vw;
    margin-top: 2vw;
  }
/*投稿詳細ページ*/
  .single-title {
    font-size: 8vw;
    margin: 12vw 5vw 4vw;
  }

  .single-date {
    font-size: 3.6vw;
    margin: 0 5vw 6vw;
  }

  .single-content {
    padding: 0 5vw 12vw;
  }

  .single-content img {
    width: 100%;
    border-radius: 4vw;
    margin: 6vw 0;
  }

  .single-content p {
    font-size: 4vw;
    line-height: 7vw;
  }

  /*==========================================
    問い合わせページ
==============================================*/
.page-id-6457 .smf-button-control__control{
    width: 100%;
    font-size: 3vh !important;
    margin-top: 5vh;
}

.page-id-6457 h1 { font-size: 6vh; }
.contact-headline p { font-size: 1.5vh; }

}