/**
Theme Name: JIN:R child
Template: jinr
Author: CROOVER Inc.
Author URI: https://croover.co.jp
Version: 1.00
*/

/* スクロールバーのカクツキ防止 & 横スクロール防止 */
html {
    scrollbar-gutter: stable;
    overflow-x: hidden;
    width: 100%;
	font-family: 'Noto Sans JP', sans-serif !important;
}

img {
    max-width: 100%;
    height: auto;
}

/* スマホ時はスクロールバー非表示 */
@media (max-width: 768px) {
    html {
        scrollbar-gutter: auto;
    }

    body {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    body::-webkit-scrollbar {
        display: none;
    }
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    overflow-x: hidden;
    width: 100%;
    position: relative;
    /* ensure hidden overflow works */
}


/* =============================
 ヘッダー全体
============================= */

#custom-header {
    width: 100%;
    background: #ffffff;
    padding: 20px 40px;
    border-bottom: 1px solid #eee;
    overflow-x: hidden;
    /* Prevent header content overflow */
}

.header-inner {
    max-width: 1360px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    /* 高さ揃える */
    justify-content: space-between;
    /* 左・中・右を横一列で並べる */
    gap: 20px;
}


/* =============================
左側ロゴ
============================= */

.header-left {
    flex-shrink: 0;
}

.site-logo-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.header-left .site-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.title-main {
    color: #1ca368;
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 700;
    font-family: "Noto Sans JP", serif;
}

.title-sub {
    font-size: clamp(12px, 1vw, 15px);
    color: #555;
}

.site-desc {
    margin-top: 2px;
    font-size: clamp(11px, 0.9vw, 13px);
    color: #666;
    white-space: nowrap;
    /* Prevent wrapping on narrow PC screens */
}


/* =============================
中央ナビ
============================= */

div#global-nav {
    display: flex;
    width: 100%;
}

.header-nav-inner {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

/* PC時はナビを表示 */
@media (min-width: 1281px) {
    div#global-nav {
        display: flex !important;
    }
}

.header-nav ul {
    display: flex;
    gap: clamp(20px, 3vw, 46px);
    /* Scale gap to prevent wrapping */
    list-style: none;
    font-family: "Noto Sans JP", serif;
}

.header-nav a {
    color: #333;
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    /* Prevent text wrapping */
}


/* =============================
右側：資料DL ＋ 検索
============================= */

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 100%;
    overflow-x: clip;
    /* safer than hidden for some browsers, or just use hidden */
}


/* 資料DLボタン */

.cta-btn {
    display: inline-block;
    padding: 12px 32px;
    background: #22c887;
    color: #fff !important;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
}


/* 検索フォーム */

.search-form {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 12px;
    padding-left: 15px;
    padding-right: 10px;
    height: 48px;
    /* ボタンと高さを揃える */
}

.search-form input {
    border: none;
    outline: none;
    width: 200px;
    font-size: 15px;
}

.search-form button {
    background: none;
    border: none;
    cursor: pointer;
}

.search-form .dashicons {
    font-size: 20px;
    color: #999;
}


/* =============================
スマホ対応
============================= */

/* タブレット・PC/* =============================
スマホ対応 (1280px以下)
============================= */

@media(max-width:1280px) {
    .header-inner {
        height: 60px;
    }

    /* オーバーレイ全体 */
    .header-nav-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #ffffff;
        z-index: 99999999;
        opacity: 0;
        visibility: hidden;
        overflow-y: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 100px 20px 60px;
    }

    .header-nav-wrap.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* 内部コンテナ */
    .header-nav-inner {
        width: 100%;
        max-width: 500px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 50px;
    }

    /* ナビゲーションリスト */
    .header-nav {
        width: 100%;
    }

    .header-nav ul {
        flex-direction: column;
        gap: 0;
        border-top: 1px solid #f0f0f0;
    }

    .header-nav li {
        border-bottom: 1px solid #f0f0f0;
    }

    .header-nav a {
        display: block;
        padding: 20px 10px;
        font-size: 18px;
        font-weight: 700;
        color: #333;
        position: relative;
        transition: color 0.3s;
    }

    .header-nav a::after {
        content: "";
        position: absolute;
        right: 15px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-top: 2px solid #ccc;
        border-right: 2px solid #ccc;
        transform: translateY(-50%) rotate(45deg);
    }

    .header-nav a:hover {
        color: #1ca368;
    }

    /* 右側エリア（資料DL ＋ 検索） */
    .header-right {
        flex-direction: column;
        gap: 25px;
        width: 100%;
    }

    .cta-btn {
        width: 100%;
        text-align: center;
        padding: 18px;
        font-size: 16px;
        box-shadow: 0 4px 15px rgba(34, 200, 135, 0.3);
    }

    .search-form {
        width: 100%;
        background: #f8f8f8;
        border: none;
        height: 54px;
    }

    .search-form input {
        background: transparent;
        width: 100%;
    }

    /* ハンバーガーの優先順位 */
    .hamburger {
        display: block;
        z-index: 10001;
        /* メニューより上 */
    }
}

@media(max-width:768px) {
    #custom-header {
        padding: 15px 20px;
    }

    .title-main {
        font-size: 20px;
    }

    .title-sub {
        font-size: 12px;
    }

    .site-desc {
        font-size: 11px;
    }
}


/* ▼ ハンバーガー初期状態（1280px以下で表示） */

.hamburger {
    display: block;
    /* デフォルトで表示 */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 999999999999;
    /* Ensure above menu */
    position: relative;
}

/* PC時はハンバーガーを非表示 */
@media (min-width: 1281px) {
    .hamburger {
        display: none !important;
    }
}

.hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background: #333;
    border-radius: 2px;
    margin: 6px 0;
    transition: all 0.3s ease;
}

/* ハンバーガーのアニメーション */
.hamburger.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
    opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}



/* ▼ ボタン押下時にメニューを開く */

.header-nav-wrap.is-open {
    display: flex;
}


/* =============================
上のベージュ背景
============================= */

.footer-hero-wrapper {
    background: url('assets/img/footer-cta-bk.png') no-repeat center center;
    background-size: cover;
    padding: 64px 20px;
}


/* =============================
白い角丸ボックス
============================= */

.footer-hero-box {
    max-width: 1088px;
    background: #fff;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 32px 12.4rem;
    border-radius: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}


/* イラスト */

.footer-hero-img {
    width: 480px;
    max-width: 100%;
}


/* テキスト */

.footer-hero-text {
    text-align: center;
    max-width: 348px;
    width: 100%;
}

.footer-hero-text .hero-text-line {
    margin: 0 0 10px 0;
    font-size: 20px;
    line-height: 1.6;
    color: #333;
    font-weight: 700;
    font-family: "Noto Sans JP", serif;
    letter-spacing: 0.08rem;
}


/* 資料DLボタン */

.footer-hero-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 32px;
    background: #22c887;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 10px;
    font-size: 16px;
    max-width: 348px;
    width: 100%;
}


/* =============================
フッター下部（背景画像エリア）
============================= */

.footer-bottom-wrapper {
    background: url('assets/img/footer-bk.png') no-repeat center center;
    background-size: cover;
    padding-top: 60px;
    padding-bottom: 40px;
    position: relative;
    /* Decoration positioning context */
    overflow: hidden;
    /* Contain decorations */
}

/* フッター装飾 */
.footer-deco-left,
.footer-deco-right {
    position: absolute;
    top: 0;
    pointer-events: none;
    z-index: 10;
    /* width: 25vw; */
    /* max-width: 340px; */
}

.footer-deco-left {
    left: 0;
    /* width: 25vw; */
    max-width: 340px;
}

.footer-deco-right {
    right: 0;
    /* width: 25vw; */
    max-width: 380px;
}

.footer-deco-left img,
.footer-deco-right img {
    width: 100%;
    height: auto;
}


/* =============================
下の人物イラスト
============================= */

.footer-people {
    width: 400px;
    max-width: 100%;
    margin: 0 auto 20px;
    display: block;
    z-index: 999;
    position: relative;
}


/* =============================
タイトル
============================= */

.footer-title-block {
    text-align: center;
    margin-top: 30px;
}

.footer-title {
    font-size: 28px;
    font-weight: 700;
    color: #1ca368;
    font-family: "Noto Sans JP", serif;
}

.footer-sub {
    color: #333;
    font-size: 14px;
    margin-left: 6px;
    font-weight: 500;
}

.footer-desc {
    color: #666;
    font-size: 12px;
    margin-top: 6px;
}


/* =============================
カテゴリーメニュー
============================= */

.footer-nav {
    margin-top: 30px;
    text-align: center;
}

.footer-nav ul {
    display: flex;
    justify-content: center;
    gap: 36px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: "Noto Sans JP", serif;
}

.footer-nav a {
    font-size: 16px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
}


/* 薄いライン */

.footer-line {
    width: 100%;
    max-width: 1100px;
    height: 1px;
    background: #fff;
    margin: 30px auto 0;
}


/* =============================
コピーライト
============================= */

.footer-copy {
    margin-top: 40px;
    font-size: 12px;
    text-align: center;
    color: #777;
    /* padding-bottom: 40px; */
}


/* =============================
スマホ対応
============================= */

@media(max-width:768px) {
    .footer-hero-box {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
        gap: 20px;
    }

    .footer-hero-img img {
        width: 100%;
    }

    .footer-hero-text .hero-text-line {
        font-size: 16px;
    }

    .footer-nav ul {
        flex-wrap: wrap;
        gap: 20px;
    }
}


/* =============================
   FRONT PAGE STYLES
============================= */

/* FVスライダー */
.fv-slider-section {
    position: relative;
    padding: 70px 0 00px;
    /* 上部に装飾用の余白 */
    /* 上部が黄緑、下部が白っぽいグラデーション */
    background: linear-gradient(180deg, #DAEC8D 0%, #f7fcf5 100%);
    overflow: hidden;
}

/* 装飾：つばめと電球 */
.fv-decoration {
    position: absolute;
    top: 0px;
    /* 少し上に */
    left: 25%;
    /* 左寄り */
    transform: translateX(-50%);
    width: 285px;
    max-width: 100%;
    z-index: 10;
    pointer-events: none;
}

.fv-decoration img {
    width: 100%;
    height: auto;
}

.fv-swiper {
    width: 100%;
    overflow: visible;
    padding-bottom: 50px;
}

.fv-swiper .swiper-slide {
    width: 850px !important;
    /* サイドは0.8スケールで約680pxに */
    max-width: 90%;
    /* モバイル対応 */
    transition: transform 0.4s ease !important;
    /* 非アクティブなスライド */
    transform: scale(0.8) !important;
    z-index: 1;
}

.fv-swiper .swiper-slide-active {
    /* アクティブなスライド */
    width: 820px !important;
    transform: scale(1) !important;
    /* 1.2倍に拡大 */
    z-index: 2;
}

.fv-slide-link {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    transform-style: preserve-3d;
}

.fv-slide-img {
    aspect-ratio: 16/9;
    overflow: hidden;
    /* 画像に角丸 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* 影を画像につける */
}

.fv-slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* スライド下のコンテンツ（タイトル・メタ情報） */
.fv-slide-content {
    margin-top: 20px;
    text-align: left;
    opacity: 0;
    /* デフォルト非表示 */
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    /* スライド幅を超えないように */
    width: 100%;
}

span.fv-meta-author {
    display: flex;
    gap: 4px;
}

span.fv-meta-date {
    display: flex;
    gap: 4px;
}

/* アクティブ時のみ表示 */
.swiper-slide-active .fv-slide-content {
    opacity: 1;
    transform: translateY(0);
}

.fv-slide-text {
    font-size: 24px;
    /* 大きめに */
    font-weight: 700;
    color: #333;
    margin: 0 0 10px;
    line-height: 1.5;
    font-family: "Noto Sans JP", serif;
}

.fv-slide-meta {
    display: flex;
    gap: 15px;
    font-size: 14px;
    color: #666;
    align-items: center;
}

.fv-slide-meta img {
    width: 20px;
}

.fv-meta-author i,
.fv-meta-date i {
    margin-right: 5px;
    color: #22c887;
    /* アイコン緑 */
}

/* Swiper ナビゲーション */
.swiper-button-prev,
.swiper-button-next {
    color: #fff;
    background: #22c887;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(34, 200, 135, 0.3);
    z-index: 20;
    /* スライドより上に */
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 18px;
    font-weight: 700;
}

/* 位置調整：画面端ではなく、スライドの横あたりに */
.swiper-button-prev {
    left: calc(50% - 35%);
    /* 中央から適度な距離 */
}

.swiper-button-next {
    right: calc(50% - 35%);
}

/* Swiper ページネーション */
.swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
    width: 8px;
    height: 8px;
    margin: 0 6px !important;
}

.swiper-pagination-bullet-active {
    background: #22c887;
}

/* スクロール指示 */
.fv-scroll-sign {
    text-align: center;
    margin-top: 60px;
    /* 余白調整 */
    /* padding-bottom: 20px; */
    position: relative;
    z-index: 10;
    z-index: 99999;
    position: relative;
}

.fv-scroll-sign span {
    display: inline-block;
    color: #22c887;
    font-size: 14px;
    letter-spacing: 0.1em;
    font-family: sans-serif;
    position: relative;
    padding-bottom: 70px;
}

.fv-scroll-sign span::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 60px;
    background: #22c887;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .fv-slider-section {
        padding-top: 60px;
        /* padding-bottom: 20px; */
    }

    .fv-swiper .swiper-slide {
        width: 85% !important;
    }

    .fv-decoration {
        width: 38vw;
        left: 2vw;
        top: 0;
        transform: none;
    }

    /* スライダー矢印は小さく表示 */
    .swiper-button-prev,
    .swiper-button-next {
        display: flex !important;
        width: 32px;
        height: 32px;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-size: 14px;
    }

    .swiper-button-prev {
        left: 5px;
    }

    .swiper-button-next {
        right: 5px;
    }

    .fv-slide-text {
        font-size: 14px;
    }

    .fv-slide-meta {
        font-size: 14px;
        gap: 10px;
    }

    .fv-scroll-sign {
        margin-top: 30px;
    }

    .fv-scroll-sign span {
        padding-bottom: 50px;
    }

    .fv-scroll-sign span::after {
        height: 40px;
    }
}


/* =============================
   セクション共通
============================= */

.section-title-main {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #333;
    font-family: "Noto Sans JP", serif;
    margin-bottom: 10px;
}

.section-subtitle {
    text-align: center;
    font-size: 16px;
    color: #22c887;
    margin-bottom: 40px;
    padding-bottom: 10px;
    border-bottom: 2px solid #22c887;
    display: inline-block;
    width: 100%;
}

.section-more-wrap {
    text-align: center;
    margin-top: 60px;
}

.btn-more {
    display: inline-block;
    padding: 14px;
    background: #22c887;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    transition: opacity 0.3s;
    max-width: 320px;
    width: 100%;
}

.btn-more:hover {
    opacity: 0.8;
}


/* =============================
   人気記事セクション
============================= */

/* カテゴリセクション全体のラッパー */
.categories-wrapper {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
    padding-top: 110px;
    z-index: 9999999;
    position: relative;
    margin-top: -20px;
    padding-bottom: 40px;
    /* overflow: hidden; */
    /* Ensure decorations don't cause overflow */
}

.category-decorations-grid {
    display: none;
}

.deco-cat-item {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.deco-cat-item img {
    width: 100%;
    height: auto;
}

/* =========================================
   Category Decorations (Refactored)
   Relative to each .section-category
========================================= */

/* --- Welfare Section (deco 01-05) --- */
/* 1. Top Left - Red Splash */
.deco-cat-01 {
    top: 0;
    left: 0;
    width: 18vw;
    z-index: 0;
}

/* 2. Top Left - Bird */
.deco-cat-02 {
    top: 4vw;
    left: 0;
    width: 16vw;
    z-index: 2;
}

/* 3. Top Right - Red Splash */
.deco-cat-03 {
    top: 4vw;
    right: 0;
    width: 14vw;
    z-index: 0;
}

/* 4. Top/Middle Right - Bird */
.deco-cat-04 {
    top: 7vw;
    right: 0;
    width: 9vw;
    z-index: 2;
}

/* 5. Bottom Left - Orange Splash */
.deco-cat-05 {
    bottom: 9vw;
    left: 0;
    width: 12vw;
    z-index: 0;
}

/* --- Health Section (deco 06-14) --- */

/* 6. Top Left - Bird (Flying) */
.deco-cat-06 {
    top: -3vw;
    left: -10px;
    width: 20vw;
    z-index: 2;
}

/* 7. Top Left - Green Heart */
.deco-cat-07 {
    top: -6vw;
    left: 2vw;
    width: 16vw;
    z-index: 2;
}

/* 8. Top Right - Green Splash */
.deco-cat-08 {
    top: 0;
    right: 0;
    width: 20vw;
    z-index: 0;
}

/* 9. Top Right - Plant Scene */
.deco-cat-09 {
    top: -3vw;
    right: 3vw;
    width: 22vw;
    z-index: 2;
}


/* 10. Middle Left - Splash */
.deco-cat-10 {
    top: 50%;
    left: 0;
    width: 14vw;
    z-index: 0;
    transform: translateY(-50%);
}

/* 11. Middle Left - Yellow Splash */
.deco-cat-11 {
    left: 0;
    width: 16vw;
    z-index: 0;
    bottom: -5vw;
}

/* 12. Middle Left - People */
.deco-cat-12 {
    left: 30px;
    width: 17vw;
    z-index: 2;
    bottom: -10vw;
}

/* 13. Bottom Right - Yellow Splash */
.deco-cat-13 {
    bottom: -11vw;
    right: 0;
    width: 22vw;
    z-index: 0;
}

/* 14. Bottom Right - Laptop/Bird */
.deco-cat-14 {
    bottom: -6vw;
    right: 2vw;
    width: 17vw;
    z-index: 2;
}


/* --- DX Section (deco 15-16) --- */
/* 15. Bottom Corner Left - Blue Splash */
.deco-cat-15 {
    bottom: 0;
    left: 0;
    width: 19vw;
    z-index: 0;
}

/* 16. Bottom Corner Right - Blue Splash */
.deco-cat-16 {
    bottom: 0;
    right: 0;
    width: 20vw;
    z-index: 0;
}




/* サイド装飾 */
.deco-leaves-left,
.deco-leaves-right {
    position: absolute;
    top: -12vw;
    z-index: 100;
    /* コンテンツより前面か背面かはデザイン次第、一旦前面 */
    pointer-events: none;
    width: 100%;
    /* PCサイズでの適当な幅 */
    max-width: 30vw;
    z-index: 9999999999999999;
}

.deco-leaves-left {
    left: 0;
}

.deco-leaves-right {
    right: 0;
}

.deco-leaves-left img,
.deco-leaves-right img {
    width: 100%;
    height: auto;
}

.section-popular {
    padding: 60px 20px;
    /* background: #f9f7f2; */
    margin-top: -20px;
    z-index: 99;
    position: relative;
}

/* カテゴリーセクションのタイトルアイコン */
.section-title-icon {
    text-align: center;
    margin: 10px auto 40px;
    max-width: 40px;
    width: 100%;
}

.section-title-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.section-popular .section-title-main::before {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #22c887;
    margin: 0 auto 20px;
}


/* =============================
   カードグリッド
============================= */

.cards-grid {
    display: grid;
    gap: 15px;
    max-width: 1100px;
    margin: 0 auto;
}

.cards-3 {
    grid-template-columns: repeat(3, 1fr);
}

.article-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); */
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.article-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.card-thumb {
    aspect-ratio: 16/10;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 12px;
}

.card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-body {
    padding: 24px;
}

.card-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0 0 15px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: "Noto Sans JP", serif;
}

.card-excerpt {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.card-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    font-family: sans-serif;
}

.card-meta img {
    filter: invert(59%) sepia(68%) saturate(444%) hue-rotate(103deg) brightness(91%) contrast(87%);
    width: 20px;
}


/* =============================
   カテゴリーセクション（装飾付き）
============================= */

.section-category {
    position: relative;
    padding: 60px 20px;
}

.section-category {
    position: relative;
    /* Establish positioning context */
}

.section-category:nth-child(odd) {
    /* background: #f9f7f2; */
}

.section-category:nth-child(even) {
    /* background: #fff; */
}

.section-content {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* 装飾イラスト */
.section-deco {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.section-deco img {
    max-width: 100%;
    height: auto;
}

.section-deco-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
}

.section-deco-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
}


/* =============================
   ウェビナー情報セクション
============================= */

.section-webinar {
    position: relative;
    padding: 80px 20px 110px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background: linear-gradient(180deg, #f5f0e6 0%, #fff 100%); removed for bg image */
    overflow: hidden;
}

.webinar-list {
    max-width: 1099px;
    margin: 60px auto 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.webinar-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); */
    transition: transform 0.3s;
}

.webinar-card:hover {
    transform: translateY(-3px);
}

.webinar-card a {
    display: flex;
    text-decoration: none;
    color: inherit;
    padding: 32px 40px;
    align-items: flex-start;
}

.webinar-card-thumb {
    width: 260px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 12px;
    margin-right: 30px;
    aspect-ratio: 16/10;
}

.webinar-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.webinar-card-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.webinar-meta-date {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.tag-label {
    background: #22c887;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    line-height: 1;
}

.date-text {
    font-size: 18px;
    color: #333;
    font-weight: 500;
}

.webinar-card-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0 0 12px;
    line-height: 1.5;
    font-family: "Noto Sans JP", serif;
}

.webinar-card-excerpt {
    font-size: 16px;
    color: #666;
    line-height: 1.7;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-more-webinar {
    background: #22c887;
}

.section-deco-webinar-right {
    position: absolute;
    right: 20px;
    top: 30px;
    width: 100px;
}

.section-deco-webinar-left {
    position: absolute;
    left: 20px;
    bottom: 30px;
    width: 120px;
}


/* =============================
   Webinar Decorations (1-10)
============================= */

.webinar-decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Ensure content is above decorations */
.webinar-list,
.section-title-main,
.section-more-wrap {
    position: relative;
    z-index: 2;
}

.deco-item {
    position: absolute;
    z-index: 1;
}

.deco-item img {
    display: block;
    width: 100%;
    height: auto;
}

/* 1. Top Left - Pink abstract */
.deco-01 {
    top: 1vw;
    left: 0;
    width: 14.2vw;
}

/* 2. Top Center-Right - Bird branch */
.deco-02 {
    top: 2.5vw;
    right: 16vw;
    width: 8vw;
    z-index: 3;
    /* Slightly above */
}

/* 3. Top Right - Yellow watercolor */
.deco-03 {
    top: 0;
    right: 0;
    width: 18vw;
}

/* 4. Left Middle-Top - Yellow dots */
.deco-04 {
    top: 50%;
    left: 0;
    width: 14vw;
    transform: translateY(-50%);
}

/* 5. Left Middle - Flying bird */
.deco-05 {
    top: 52%;
    left: 0;
    width: 11vw;
    transform: translateY(-50%);
    z-index: 9999;
}

/* 6. Right Middle - Flying bird */
.deco-06 {
    top: 37%;
    right: 2vw;
    width: 10vw;
    transform: translateY(-50%);
    z-index: 99;
}

/* 7. Right Middle-Low - Green splash */
.deco-07 {
    top: 44%;
    right: 0;
    width: 18vw;
    transform: translateY(-50%);
}

/* 8. Right Bottom - Orange splash */
.deco-08 {
    bottom: 4vw;
    right: 0;
    width: 13vw;
}

/* 9. Right Bottom - Bird nest */
.deco-09 {
    bottom: 8vw;
    right: 4vw;
    width: 12vw;
    z-index: 3;
}

/* 10. Left Bottom - Blue scribbles */
.deco-10 {
    bottom: 1vw;
    left: 0;
    width: 14vw;
}


/* =============================
   フロントページ レスポンシブ
============================= */
@media (max-width: 1440px) {


    .deco-cat-01 {
        top: 2vw;
        left: 0;
        width: 20vw;
        z-index: 0;
    }

    .deco-cat-02 {
        top: 8vw;
        left: 0;
        width: 19vw;
        z-index: 2;
    }

    .deco-cat-03 {
        top: 0;
        right: 0;
        width: 16vw;
        z-index: 0;
    }

    .deco-cat-04 {
        top: 5vw;
        right: 0;
        width: 10vw;
        z-index: 2;
    }

    .deco-cat-05 {
        bottom: 9vw;
        left: 0;
        width: 15vw;
        z-index: 0;
    }

    .deco-cat-06 {
        top: -2vw;
        left: -10px;
        width: 23vw;
        z-index: 2;
    }

    .deco-cat-07 {
        top: -6vw;
        left: 2vw;
        width: 20vw;
        z-index: 2;
    }

    .deco-cat-08 {
        top: 0;
        right: 0;
        width: 25vw;
        z-index: 0;
    }

    .deco-cat-09 {
        top: -3vw;
        right: 3vw;
        width: 25vw;
        z-index: 2;
    }

    .deco-cat-10 {
        top: 50%;
        left: 0;
        width: 18vw;
        z-index: 0;
        transform: translateY(-50%);
    }

    .deco-cat-11 {
        left: 0;
        width: 22vw;
        z-index: 0;
        bottom: -5vw;
    }

    .deco-cat-12 {
        left: 30px;
        width: 20vw;
        z-index: 2;
        bottom: -10vw;
    }

    .deco-cat-13 {
        bottom: -16vw;
        right: 0;
        width: 25vw;
        z-index: 0;
    }

    .deco-cat-14 {
        bottom: -11vw;
        right: 2vw;
        width: 20vw;
        z-index: 2;
    }


    .deco-cat-15 {
        bottom: 2vw;
        left: 0;
        width: 22vw;
        z-index: 0;
    }

    .deco-cat-16 {
        bottom: 2vw;
        right: 0;
        width: 22vw;
        z-index: 0;
    }


    .deco-01 {
        top: 1vw;
        left: 0;
        width: 19.2vw;
    }

    .deco-02 {
        top: 2.5vw;
        right: 16vw;
        width: 12vw;
        z-index: 3;
        /* Slightly above */
    }

    .deco-03 {
        top: 0;
        right: 0;
        width: 23vw;
    }

    .deco-04 {
        top: 50%;
        left: 0;
        width: 17vw;
        transform: translateY(-50%);
    }

    .deco-05 {
        top: 52%;
        left: 0;
        width: 13vw;
        transform: translateY(-50%);
        z-index: 9999;
    }

    .deco-06 {
        top: 37%;
        right: 2vw;
        width: 11.4vw;
        transform: translateY(-50%);
        z-index: 99;
    }

    .deco-07 {
        top: 44%;
        right: 0;
        width: 21vw;
        transform: translateY(-50%);
    }

    .deco-08 {
        bottom: 7vw;
        right: 0;
        width: 16vw;
    }

    .deco-09 {
        bottom: 10vw;
        right: 4vw;
        width: 16.7vw;
        z-index: 3;
    }

    .deco-10 {
        bottom: 11vw;
        left: 0;
        width: 16vw;
    }
}

@media (max-width: 1024px) {
    .cards-3 {
        /* grid-template-columns: repeat(2, 1fr); */
    }

    .section-deco-left,
    .section-deco-right {
        width: 100px;
        width: 100px;
        opacity: 0.6;
    }

    /* スマホで装飾を消す場合 */
    .deco-leaves-left,
    .deco-leaves-right,
    .footer-deco-left,
    .footer-deco-right,
    .deco-cat-item {
        /* display: none; */
        /* display: none; */
    }

    .deco-cat-01 {
        top: -2vw;
        left: 0;
        width: 25.2vw;
    }

    .deco-cat-02 {
        top: 2.5vw;
        right: 16vw;
        width: 25vw;
        z-index: 3;
    }

    .deco-cat-03 {
        top: -2vw;
        right: 0;
        width: 18vw;
    }

    .deco-cat-04 {
        top: 2vw;
        right: 0;
        width: 13vw;
    }

    .deco-cat-05 {
        top: 50%;
        left: 0;
        width: 13vw;
        transform: translateY(-50%);
        z-index: auto;
    }

    .deco-cat-06 {
        top: -2vw;
        width: 23.4vw;
        transform: translateY(-50%);
        z-index: 99;
        left: 0;
    }

    .deco-cat-07 {
        top: -10vw;
        right: 0;
        width: 22vw;
        z-index: 99;
    }

    .deco-cat-08 {
        top: -1vw;
        right: 0;
        width: 22vw;
    }

    .deco-cat-09 {
        top: -3vw;
        right: 3vw;
        width: 24.7vw;
        z-index: 3;
    }

    .deco-cat-10 {
        top: 50%;
        left: 0;
        width: 18vw;
        transform: translateY(-50%);
    }

    .deco-cat-11 {
        bottom: -9vw;
        left: 0;
        width: 23.2vw;
    }

    .deco-cat-12 {
        bottom: -9.5vw;
        left: 2vw;
        width: 20vw;
        z-index: 3;
    }

    .deco-cat-13 {
        bottom: -10vw;
        right: 0;
        width: 28vw;
    }

    .deco-cat-14 {
        right: 4vw;
        width: 22vw;
        transform: translateY(-50%);
        bottom: -10vw;
    }

    .card-title {
        font-size: 20px;
    }

    .card-excerpt {
        font-size: 15px;
    }

    .card-meta span {
        font-size: 13px;
    }

    .card-meta img {
        width: 18px;
    }
}

@media (max-width: 768px) {
    .fv-slide-text {
        font-size: 18px;
    }

    .section-title-main {
        font-size: 22px;
    }

    .cards-3 {
        grid-template-columns: 1fr;
    }

    .section-deco {
        display: none;
    }


    .section-category {
        padding: 50px 20px;
    }

    /* ウェビナーカード縦積み */

    .section-webinar {
        position: relative;
        padding: 50px 20px 60px;
    }

    .webinar-list {
        margin: 40px auto 0;
        gap: 20px;
    }

    .webinar-card a {
        flex-direction: column;
        padding: 0;
    }

    .webinar-card-thumb {
        width: 100%;
        aspect-ratio: 16/9;
        margin-right: 0;
        border-radius: 12px;
        padding: 20px;
        padding-bottom: 0;
    }

    .webinar-card-body {
        padding: 20px;
    }

    .webinar-card-title {
        font-size: 16px;
    }

    .tag-label {
        font-size: 13px;
    }

    .date-text {
        font-size: 15px;
    }

    .webinar-card-excerpt {
        font-size: 14px;
    }

    .section-deco-webinar-left {
        display: none;
    }

    .webinar-decorations {
        /* display: none; */
    }

    .deco-01 {
        width: 24vw;
    }

    .deco-02 {
        width: 20vw;
        top: 2vw;
        right: 7vw;
    }

    .deco-03 {
        width: 32vw;
    }

    .deco-04 {
        width: 30vw;
    }

    .deco-05 {
        width: 16vw;
    }

    .deco-06 {
        width: 20vw;
    }

    .deco-07 {
        width: 25vw;
    }

    .deco-08 {
        width: 30vw;
        bottom: 2vw;
    }

    .deco-09 {
        width: 25vw;
        bottom: 2vw;
    }

    .deco-10 {
        width: 30vw;
        bottom: 0;
    }

    .footer-deco-left {
        left: -8rem;
    }

    .footer-deco-right {
        right: -8rem;
    }

    .footer-people {
        width: 300px;
    }

    .footer-title {
        font-size: 24px;
    }

    .footer-sub {
        font-size: 13px;
    }

    .footer-nav a {
        font-size: 14px;
    }

    .section-more-wrap {
        margin-top: 40px;
    }

    .btn-more {
        padding: 14px;
        font-size: 14px;
    }

    .card-title {
        font-size: 18px;
    }

    .card-excerpt {
        font-size: 14px;
    }

    .card-meta span {
        font-size: 12px;
    }

    .card-meta img {
        width: 16px;
    }
}

@media (max-width: 600px) {

    .footer-deco-left {
        left: -19rem;
    }

    .footer-deco-right {
        right: -22rem;
    }

    .deco-cat-13 {
        bottom: -15vw;
        width: 33vw;
    }

    .deco-cat-14 {
        bottom: -20vw;
        width: 29vw;
    }

    .deco-cat-11 {
        bottom: -23vw;
        width: 30vw;
    }

    .deco-cat-12 {
        width: 30vw;
        bottom: -25vw;
    }

    .deco-cat-08 {
        width: 30vw;
        top: -5vw;
    }

    .deco-cat-09 {
        width: 35vw;
        top: -5vw;
    }

    .deco-cat-07 {
        width: 30vw;
    }

    .deco-cat-06 {
        width: 31vw;
        top: 2vw;
    }

    .deco-cat-01 {
        width: 33vw;
    }

    .deco-cat-02 {
        width: 34vw;
    }

    .deco-cat-03 {
        width: 21vw;
        top: -6vw;
    }

    .deco-cat-04 {
        top: 0;
        width: 15vw;
    }

    .deco-leaves-left {
        max-width: 37vw !Important;
        width: 100%;
    }

    .deco-leaves-right {
        max-width: 37vw ! Important;
        width: 100%;
    }
}

/* 投稿 */
a:hover {
    opacity: .7;
}

.wp-block-quote cite {
    text-align: right;
    display: block;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.tac {
    text-align: center;
}

.tal {
    text-align: left;
}

.tar {
    text-align: right;
}

.width150 {
    min-width: 150px;
}

.pc_on {
    display: block !important;
}

.sp_on {
    display: none !important;
}

#postContent h5 {
    border-bottom: 4px double #e6b73e;
    font-size: 18px;
    font-weight: 500;
}

/* マーカー */
.marker-line {
    background: linear-gradient(transparent 75%, #ffdc00 75%);
    font-weight: 700;
}

.marker-red {
    color: #c71313;
    font-weight: 700;
}

.marker-green {
    color: #57840f;
    font-weight: 700;
}

.marker-bold {
    font-weight: 700;
}

/* ボタン */
#postContent p a,
#postContent li a,
#postContent table a,
.o--widget-area p a,
.o--widget-area li a,
.o--widget-area table a {
    text-decoration: none;
}

.btn01 {
    margin: 30px auto;
}

.btn01_top {
    font-size: 1.5rem;
    font-weight: bold;
    position: relative;
    margin-bottom: .2em;
    text-align: center;
}

.btn01_top:before {
    margin-right: 5px;
    content: '＼';
}

.btn01_top:after {
    margin-left: 5px;
    content: '／';
}

#postContent .btn01 p {
    margin: 0;
}

#postContent .btn01 p a {
    width: 50%;
    display: block;
    text-decoration: none;
    padding: 16px;
    background: #f1742c;
    color: #fff;
    text-align: center;
    font-weight: 700;
    box-shadow: 0 4px 0 #d16323;
    margin: 0 auto;
    position: relative;
    transition: .3s;
    text-decoration: none;
}

.btn01 p a:before {
    content: '';
    display: block;
    height: 8px;
    width: 8px;
    border-right: solid 2px #fff;
    border-bottom: solid 2px #fff;
    transform: translateY(-50%) rotate(-45deg);
    color: #fff;
    position: absolute;
    top: 50%;
    right: 20px;
    pointer-events: none;
}

.jinr-article .btn01 a:not([class]) {
    color: #fff;
}

#wrapper .btn01 a:not([class]):hover {
    color: #fff;
    opacity: .7;
}

.btn02 {
    display: block;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    text-decoration: none;
    width: 60%;
    margin: auto;
    padding: 1rem 4rem 1rem 3rem;
    font-weight: bold;
    background: #eb732e;
    color: #fff;
    border-radius: 100vh;
    position: relative;
    transition: 0.5s;
}

.btn02::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin: 0 15px 0 0;
}

.btn02:hover {
    opacity: .7;
}

table .btn02 {
    width: 100%;
}

/* リンクデザイン */
a.text_link {
    border-bottom: 1px solid;
    color: #1a73e8;
}

a.yl_link01,
a.yl_link02,
a.yl_link03 {
    display: inline-block;
    font-weight: 500;
    text-decoration: none;
    color: #1a73e8;
}

a.yl_link01::before,
a.yl_link02::before,
a.yl_link03::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f101";
    margin: 0 5px 0 10px;
}

a.yl_link02::before {
    content: "\f35a";
}

a.yl_link03::before {
    content: "\f0da";
}

a.yr_link01 {
    display: inline-block;
    font-weight: 500;
    text-decoration: none;
}

a.yr_link01::after {
    margin: 0 0 0 5px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f101";
}

a.yt_link,
a.yr_link02 {
    display: block;
    padding: 10px;
    color: #FF8C00;
    font-weight: 500;
    display: block;
    text-align: right;
    text-decoration: none;
}

a.yr_link::after,
a.yt_link02::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f35a";
    margin: 0 0 0 10px;
}

a.yt_link::after {
    content: "\f35b";
}

/* 引用元 */
.QuoteTitle {
    font-size: 10px;
    color: gray;
}

.QuoteTitle-Img {
    font-size: 10px;
    text-align: center;
    color: gray;
    display: block;
}

.box01 {
    background: #e1e1e1;
    padding: 10px;
    font-size: 14px;
}

/* Tableのスタイル */
.TableStyle01 {
    width: 100%;
    table-layout: normal;
    word-break: break-all;
    border-collapse: collapse;
    border: 1px solid #eeeeee;
    margin: 30px auto;
}

.TableStyle01 th,
.TableStyle01 td {
    text-align: center;
    /*font-weight: 500;*/
    border: 1px solid #eee;
    padding: 8px 10px;
}

.TableStyle01 tbody th {
    background: #eff4fe;
}

.scroll-table table {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

/***　古代カラー　***/

.kodai-table {
	table-layout: fixed;
}


/* ヘッダー */
.kodai-table thead th {
	background:#5BAD92;
	font-weight: bold;
	color:#fff;
}

/* ボディ項目・フッター項目 */
.kodai-table tbody th,
.kodai-table tfoot th {
	background:#FCFAF2;
}

/* ボディデータ・フッターデータ */
.kodai-table tbody td,
.kodai-table tfoot td {
	text-align:center;
}



/* 関連リンク */
.relation_link {
    margin: 30px 0;
}

.relation_link a {
    color: #333!important;
    display: block;
    text-decoration: none;
    position: relative;
    transition: .5s;
    word-break: break-all;
    margin: 0 0 20px;
    font-size: 16px;
    padding-left: 30px;
}

.relation_link a::before {
    content: '';
    position: absolute;
    top: calc(60% - 1px);
    left: 10px;
    transform: translateY(calc(-50% - 2px)) rotate(30deg);
    width: 10px;
    height: 2px;
    background-color: #e6b73e;
    transition: 0.3s;
}

.relation_link a::after {
    content: '';
    position: absolute;
    top: 60%;
    left: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 2px;
    background-color: #e6b73e;
    transition: 0.3s;
}

.relation_link a span {
    border-bottom: 1px solid;
    font-weight: 500;
    color: #000;
}

.relation_link a:hover {
    opacity: .7;
	text-decoration: none;
}

/* form */
.form_required {
    background-color: #c21f00;
    color: #ffffff;
    font-size: 12px;
    border-radius: 5px;
    padding: 4px 8px;
    text-align: center;
    margin-right: 5px;
    letter-spacing: normal;
    font-weight: 500;
}

.form_any {
    background-color: #7c7c7c;
    color: #ffffff;
    font-size: 12px;
    border-radius: 5px;
    padding: 4px 8px;
    text-align: center;
    margin-right: 5px;
    letter-spacing: normal;
    font-weight: 500;
}

input.wpcf7-form-control.wpcf7-submit.has-spinner.form_btn {
    display: block;
    padding: 1em 0;
    margin-top: 30px;
    width: 280px;
    background: #5998cf;
    color: #fff;
    font-weight: 500;
    border-radius: 5px;
    border: 2px solid #5998cf;
    font-size: 16px;
}

input.wpcf7-form-control.wpcf7-submit.has-spinner.form_btn:hover {
    background: #fff;
    color: #5998cf;
    border: 2px solid #5998cf;
}

.form_policy {
    background: #fff;
    padding: 10px 10px 10px;
    border: 2px solid #ececec;
}

.wpcf7 p.form_policy_title {
    margin-top: 0 !important;
}

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

    .pc_on {
        display: none !important;
    }

    .sp_on {
        display: block !important;
    }

    #postContent .btn01 p a {
        width: 100%;
    }
	.btn02 {
		width: 100%;
	}
}

    @media screen and (min-width:480px) {
        .ctr-banner img {
            max-width: 50%;
            margin: 0 auto;
        }
    }
#commonHeader {
    background: #e6b73e;
}