@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* --- 見出し（H1〜H4）の共通スタイル --- */
.article h1 {
    font-size: 28px;
    margin: 0rem 0 2rem;
    padding: 1rem;
    border-bottom: 3px solid #005070;
    color: #005070;
}

.article h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 0;
    background-color: transparent;
}

.article h3 {
    color: #005070;
    font-size: 20px;
    border: none;
    margin-bottom: 1rem;
}

.article h4 {
    color: #005070;
    font-size: 18px;
    border: none;
    margin-bottom: 1rem;
}

/* リンクの設定 */
a {
    color: #0044CC;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
    background-color: #e6f0ff;
    transition: background-color 0.2s;
}

/* --- ヘッダーナビ：アクティブの設定 --- */
.navi-in>ul li.current-menu-item a,
.navi-in>ul li.current_page_item a {
    background-color: #a4c9eb !important;
    color: #002d62 !important;
    font-weight: bold !important;
    display: flex !important;
    /* 中央揃えにするための設定 */
    align-items: center !important;
    /* 上下の中央揃え */
    justify-content: center !important;
    /* 左右の中央揃え */
    position: relative;
}

/* 下のライン */
.navi-in>ul li.current-menu-item a::after,
.navi-in>ul li.current_page_item a::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    /* メニューボタンの一番下に配置 */
    left: 20%;
    /* 左右に20%ずつ余白を作って中央寄せ */
    width: 60%;
    height: 4px;
    background-color: #002d62;
    border-radius: 2px 2px 0 0;
}

/* --- ヘッダーナビ：ホバーの設定 --- */
/* 通常のメニュー項目をホバーしたとき */
.navi-in>ul li a:hover {
    background-color: #ebf5ff !important;
    color: #002d62 !important;
}

/* すでに選択中のメニュー項目をホバーしたとき（現在の色をキープ）#a4c9eb #bce0fd*/
.navi-in>ul li.current-menu-item a:hover,
.navi-in>ul li.current_page_item a:hover {
    background-color: #ebf5ff !important;
}

/* モーダル背景 ------------------------------*/
.login-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

/* モーダル本体 */
.login-modal-content {
    background: #fff;
    width: 90%;
    max-width: 400px;
    margin: 10% auto;
    padding: 20px;
    border-radius: 8px;
    position: relative;
}

/* 閉じるボタン */
.login-close {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 28px;
    cursor: pointer;
}

/* ↑--------------------------------- */

/* --- サイドバーメニュー：アクティブ＆ホバーの設定 --- */
#sidebar {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.widget_nav_menu ul li.current-menu-item a {
    background-color: #d1e4f6 !important;
    color: #005070 !important;
    font-weight: bold !important;
    border-left: 4px solid #005070;
    padding-left: 10px !important;
}

/* サイドメニューの文字色 */
.widget_nav_menu ul li a {
    color: #005070;
}


/* 通常のサイドメニューをホバーしたとき */
.widget_nav_menu ul li a:hover {
    background-color: #ebf5ff !important;
    color: #002d62 !important;
    padding-left: 10px !important;
    /* ホバー時に文字が少し右に動く */
    transition: all 0.3s ease;
    /* ふわっと変化させるアニメーション */
}

/* すでに選択中のサイドメニュー項目をホバーしたとき（現在の色をキープ） */
.widget_nav_menu ul li.current-menu-item a:hover {
    background-color: #d1e4f6 !important;
}

.menu-drawer li a {
    color: #005070;
}

/* 本文下の画像 */
.img-p1 {
    text-align: right;
}

.img-p1 img {
    width: 60%;
    opacity: 0.6;
}

/* --- ページ個別・装飾スタイル -------------------------------- */
/* ページID: 10　Home Welcome、トレーニング */
/* キービジュアル */
.top-key {
    width: 100vw;
    aspect-ratio: 2000 / 935;
}

.page-id-10 .wrap {
    width: 100vw;
}

.page-id-10 .content {
    margin: 0;
}

.page-id-10 .main {
    padding: 0;
}

h2.jt-h2-text {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

h2.jt-h2-text::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 60px;
    border-radius: 50%;
    border: 5px solid #a6ddb0;
    border-left: transparent;
    border-right: transparent;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.page-id-10 .itcj-h3-line {
    border-bottom: 1px solid #005070;
}

.page-id-10 h4 {
    color: #005dd8;
}

/* ページID: 13　ITC-Jの組織と活動 ------------------------ */
.page-id-13 h3 {
    font-size: 18px;
    border: solid 3px #005dd8;
    border-radius: 0.5rem;
    color: #005dd8;
}

.page-id-13 h4 {
    font-size: 17px;
    border-left: 3px solid #005dd8;
}

.page-id-13 .is-layout-flex {
    gap: 3rem;
}

/* --- 記事内テーブル（表）の美化カスタマイズ --- */
.article table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

/* カウンスルNo. 公式サイトボタン ------------------------ */
div.wp-block-cocoon-blocks-button-1.button-block.itcj-cnl-btn a.btn {
    align-items: center;
    justify-content: center;
    width: auto;
    /* 横幅を文字に合わせる */
    background-color: #005070;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 10px;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 119, 167, 0.5)
}

/* マウスホバー時のエフェクト */
div.wp-block-cocoon-blocks-button-1.button-block.itcj-cnl-btn a.btn:hover {
    background-color: #245c91 !important;
    /* ホバー時に少し明るいネイビー */
    color: #ffffff !important;
    opacity: 0.9 !important;
    transform: translateY(-2px);
    /* ほんの少しだけ上に浮き上がる */
    /*     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important; */
    box-shadow: 0 4px 8px rgba(0, 119, 167, 0.25)
}

/* アーカイブ　 ----------------------------------------- */
div.wp-block-cocoon-blocks-button-1.button-block.itcj-cnl-btn.itcj-color-42 a.btn {
    width: 20rem;
    background-color: #f0f49d !important;
    color: #005070 !important;
    font-size: 18px;
    font-weight: normal;
}

div.wp-block-cocoon-blocks-button-1.button-block.itcj-cnl-btn.itcj-color-42 a.btn:hover {
    background-color: #f4f8d1 !important;
    color: #005070 !important;
}

div.wp-block-cocoon-blocks-button-1.button-block.itcj-cnl-btn.itcj-color-44 a.btn {
    width: 20rem;
    background-color: #d5f294 !important;
    color: #005070 !important;
    font-size: 18px;
    font-weight: normal;
}

div.wp-block-cocoon-blocks-button-1.button-block.itcj-cnl-btn.itcj-color-44 a.btn:hover {
    background-color: #dcf0b6 !important;
    color: #005070 !important;
}

/* 表のヘッダー（見出し部分）--------------------------------- */
.article table {
    border-collapse: separate;
    /* collapse から separate に変更 */
    border-spacing: 1px;
    /* 線の太さ */
    background-color: #005070;
}

.article table th {
    border: none;
    background-color: #d1e4f6;
    color: #005070;
    font-weight: bold;
    padding: 12px 15px;
    text-align: center;
}

/* 表のデータが入るセル */
.article table td {
    padding: 12px 15px;
    background-color: #ffffff;
    border: none;
    vertical-align: middle;
}

/* 1行おきに背景色をほんのり極薄の水色にして互い違いに見やすくする */
.article table tr:nth-child(even) td {
    background-color: #f2f7fc;
}

/* 特定ページ（ページID: 32　会計・委員会 ---------------------- */
/* ページ内の表全体の横幅を100%にして統一 */
/* figure.wp-block-table.custom-table {
    width: 100%;
	min-width: 600px;
	border-collapse: collapse;
} */

/* 左から1番目の列の幅を70%に固定する */
.custom-table table th:nth-child(1),
.custom-table table td:nth-child(1) {
    width: 50%;
}

.custom-table table th:nth-child(3),
.custom-table table td:nth-child(3) {
    width: 7rem;
}

/* 各カウンスル ページの列幅 --------------------------- */
.itcj-cnl-table table th:nth-child(1),
.itcj-cnl-table table td:nth-child(1) {
    width: 12rem;
}

.itcj-cnl-table table th:nth-child(2),
.itcj-cnl-table table td:nth-child(2) {
    width: 4rem;
}

.itcj-cnl-table table th:nth-child(3),
.itcj-cnl-table table td:nth-child(3),
.itcj-cnl-table table th:nth-child(4),
.itcj-cnl-table table td:nth-child(4) {
    width: 10rem;
}

/* ITC-Jのクラブ ID:15 ------------------------- */
.page-id-15 .wp-block-table.itcj-table-6 {
    max-width: 700px;
}

/* 役員 ID:30 ------------------------- */
.page-id-30 .wp-block-table.itcj-table-6 td {
    font-size: 18px;
}

.page-id-30 .wp-block-table.itcj-table-6 {
    max-width: 700px;
}

/* 会報 ID:38 ------------------------- */
.page-id-38 .wp-block-table.itcj-table-6 {
    max-width: 600px;
}

/* 通信 ID:36 ------------------------- */
.page-id-36 .wp-block-table.itcj-table-6 {
    max-width: 600px;
}

/* 年次大会 ID:40 ------------------------- */
.page-id-40 .wp-block-table.itcj-table-6 {
    max-width: 600px;
}

/* --- 横スクロール対応 ----------------------------------------------- */
/* ITC-J 通信・会報 ID:36 38 ------------------------- */
.wp-block-table {
    width: 100%;
    overflow-x: auto;
    /* スマホで中身がはみ出たときにスクロールさせる */
}

/* スマホのときでも、テーブルの中身が潰れないように最小幅をキープ */
.wp-block-table table {
    min-width: 550px;
    /* 文字が潰れない最低限の幅 */
}

@media screen and (min-width: 601px) {
    .wp-block-table.itcj-table-6 {
        max-width: 600px;
        /* PC版は600pxに固定 */
    }

    .wp-block-table table {
        min-width: 100%;
        /* PC版では上記の550px固定を解除する */
    }
}

/* ----------------------------------------------------- */

.page-id-36 .wp-block-table.itcj-table-6 th:nth-child(2),
.page-id-36 .wp-block-table.itcj-table-6 td:nth-child(2),
.page-id-38 .wp-block-table.itcj-table-6 th:nth-child(2),
.page-id-38 .wp-block-table.itcj-table-6 td:nth-child(2) {
    width: 10rem;
}

.page-id-36 .wp-block-table.itcj-table-6 th:nth-child(3),
.page-id-36 .wp-block-table.itcj-table-6 td:nth-child(3),
.page-id-38 .wp-block-table.itcj-table-6 th:nth-child(3),
.page-id-38 .wp-block-table.itcj-table-6 td:nth-child(3) {
    width: 8rem;
}

/* -------------------------------------------------- */

/* ===================================================
** 冊子アーカイブ：親の箱をGrid化して自動で横並びにする
=================================================== */
.itcj-sasshi-container {
    display: grid !important;
    /* 1つのカードの最小幅を「140px」に。画面幅に合わせて自動で 3列、4列、5列… と変動します */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 2rem !important;
    margin-bottom: 3rem !important;
    width: 100% !important;
}

/* ===================================================
** 冊子アーカイブ：中の子グループ（1セット）のスタイル
=================================================== */
.itcj-sasshi-container>.wp-block-group,
.itcj-sasshi-card {
    display: flex !important;
    flex-direction: column !important;
    /* 期 → 画像 → 容量 を上から縦に並べる */
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    width: 100% !important;
    /* Gridのセルの幅いっぱいに広げる */
    margin: 0 0 2rem !important;
    /* WordPressの標準余白をリセット */
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.itcj-kaiho-pd {
    padding: 0;
}

.itcj-sasshi-card p {
    margin-bottom: 0;
}

/* 中の画像が大きすぎてはみ出さないための保険 */
.itcj-sasshi-card img {
    max-width: 100% !important;
    height: auto !important;
    box-shadow: 0 0 6px rgba(0, 0, 10, 0.2);
    margin: 8px 0 !important;
}

.itcj-sasshi-card .wp-block-image {
    margin-bottom: 0;
}

/* ------------------ */
/* 画面の横幅が767px以下（一般的なスマホサイズ）の時だけ管理バーを非表示にする */
@media screen and (max-width: 767px) {
    #wpadminbar {
        display: none !important;
    }

    html {
        margin-top: 0 !important;
    }

    * html body {
        top: 0 !important;
    }
}

/* モバイルヘッダーの検索ボタンを非表示にする */
.search-menu-button.menu-button {
    /*   display: none; */
    visibility: hidden;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************
/*1023px以下*/
@media screen and (max-width: 1023px) {
    /*必要ならばここにコードを書く*/

    /* 1. モバイルの時はPC用のヘッダー（ブルーの領域）を丸ごと非表示にする */
    #header-container,
    #header-container-in {
        display: none !important;
    }

    /* 2. モバイル用のヘッダーバー全体を水色にする */
    .mobile-header-menu-buttons {
        background-color: #d1e4f6 !important;
        /* PC版ヘッダーに近い綺麗な水色に変更 */
        border-bottom: 1px solid #b3d1ee;
        /* バーの下側に少し濃いめの境界線をプラス */
    }

    /* 3. ハンバーガー（三本線）や検索アイコン、文字の色を濃紺にして見やすく */
    .mobile-header-menu-buttons .key-btn-icon,
    .mobile-header-menu-buttons .menu-caption {
        color: #005070 !important;
    }

    .fa-remove:before,
    .fa-close:before,
    .fa-times:before {
        /*     content: "\f00d"; */
        content: "\f00d閉じる";
        font-size: 1rem;
        color: #005070;
    }
}

/*834px以下*/
@media screen and (max-width: 834px) {

    /*必要ならばここにコードを書く*/
    .content {
        margin-top: 3rem;
    }

    /* 	Home	 */
    .page-id-10 .entry-content {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    /* 	更新案内	 */
    .page-id-19 .article ul {
        padding-left: 0;
    }

    .article h1 {
        font-size: 24px;
    }

    .article h2 {
        font-size: 22px;
    }

    .reverse-on-mobile {
        display: flex;
        flex-direction: column-reverse;
    }

    .entry-content table,
    .entry-content table td,
    .entry-content table th {
        font-size: 16px;
    }
}

/* 480px以下 */
@media screen and (max-width: 480px) {

    /* モバイルヘッダーのハンバーガーメニューの調整 */
    .mobile-menu-buttons {
        border-top: 1px solid #005070;
    }

    /* ハンバーガーアイコン（三本線）の色と文字の調整 */
    .menu-button .key-btn-icon,
    .menu-button .menu-caption {
        color: #005070 !important;
        /* アイコンと文字の色を濃いグレーに */
    }

    /* ITC-J通信　ID:36	 */
    .page-id-36 .wp-block-table.itcj-table-6 th:nth-child(1),
    .page-id-36 .wp-block-table.itcj-table-6 td:nth-child(1),
    .page-id-38 .wp-block-table.itcj-table-6 th:nth-child(1),
    .page-id-38 .wp-block-table.itcj-table-6 td:nth-child(1) {
        width: 15rem;
    }
}