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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* FrontPage MV navi-color-change */
.skin-grayish #navi-in[data-navi-active=false] {
  background-color: transparent;
}

.skin-grayish #navi-in[data-navi-active=false]>ul.menu-top.menu-header.menu-pc>li>a,
.skin-grayish #navi-in[data-navi-active=false] [class^="icon-"],
.skin-grayish #navi-in[data-navi-active=false] .search-menu-icon span::before {
  color: #333a3f;
  filter: drop-shadow(0px 0px 4px white);
}

/* ==========================================
 * ヘッダーの波アニメーション（トップページ限定版）
 * ========================================== */
#header {
    position: relative !important;
}

/* ★トップページ（.home）以外のページでは、波を完全に非表示にする */
body:not(.home) .header-wave-container {
    display: none !important;
}

.header-wave-container {
    position: absolute !important;
    bottom: 0 !important;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 999 !important; /* 最前面に戻す */
    pointer-events: none;
}

.header-wave-container svg {
    width: 100%;
    height: 100%;
    display: block;
}

.header-wave-container svg use {
    fill: #fff;
    animation: wave linear 4s infinite;
}

.header-wave-container svg use:nth-of-type(2), 
.header-wave-container svg use:nth-of-type(3) {
    opacity: 0.25;
}
.header-wave-container svg use:nth-of-type(2) { animation-duration: 6s; }
.header-wave-container svg use:nth-of-type(3) { animation-duration: 3.5s; }

@keyframes wave {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* 端末ごとの「波の高さ」自動調整 */
@media screen and (min-width: 1024px) { .header-wave-container { height: 60px; } }
@media screen and (max-width: 1023px) and (min-width: 481px) { .header-wave-container { height: 40px; } }
@media screen and (max-width: 480px) { .header-wave-container { height: 20px; } }

/* ==========================================
 * ショートコード用パンくずリストの調整
 * ========================================== */

/* ① 自動で出てしまう元のパンくず（画面の上下にあるもの）をすべて非表示にする */
.breadcrumb {
    display: none !important;
}

/* ショートコードで配置したパンくずだけを再表示し、見た目をカスタム */
.my-custom-breadcrumbs .breadcrumb {
    display: block !important; /* 非表示を解除して表示 */
    
    /* ② 背景色を透明にする */
    background-color: transparent !important;
    box-shadow: none !important; /* スキンによって付く「影」を消す */
    border: none !important;     /* スキンによって付く「線」を消す */
    
    /* ③ 右側の謎の余白を無くすためのリセット */
    padding-left: 0 !important;  /* 左側の余白も不要なら0に（必要なら残してください） */
    padding-right: 0 !important; /* 右側の内側余白をゼロに */
    margin-right: 0 !important;  /* 右側の外側余白をゼロに */
    width: 100% !important;      /* 横幅を100%に広げる */
}

/* スキンによっては、中の文字の背景にも色がついている場合があるため透明化 */
.my-custom-breadcrumbs .breadcrumb span,
.my-custom-breadcrumbs .breadcrumb a {
    background-color: transparent !important;
}

/* スマホ（画面幅767px以下）のときだけカルーセルにする */
@media screen and (max-width: 767px) {
    .sp-carousel {
        display: flex !important;
        flex-wrap: nowrap !important; /* 縦並びになるのを防ぐ */
        overflow-x: auto !important;  /* 横スクロールを許可 */
        scroll-snap-type: x mandatory; /* フリック時にピタッと止める */
        -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかに */
        padding-bottom: 20px !important; /* 下部のドロップシャドウやスクロールバー用余白 */
        padding-left: 4% !important; /* 左端の余白（お好みで） */
        padding-right: 4% !important; /* 右端の余白（お好みで） */
        box-sizing: border-box;
    }

    /* カラムの中身（各カード）の調整 */
    .sp-carousel > .wp-block-column,
    .sp-carousel > .column-box { 
        flex: 0 0 75% !important; /* スマホ画面に対するカード1枚の横幅（75%で見切れを作る） */
        max-width: 75% !important;
        scroll-snap-align: start; /* スクロールが止まる位置 */
        margin-right: 16px !important; /* カード同士の間隔 */
        margin-left: 0 !important;
    }

    /* 最後のカードの右余白だけ調整 */
    .sp-carousel > *:last-child {
        margin-right: 4% !important; 
    }
}

/* ==========================================
 * [合言葉: smooth-link-p] 特定の段落内リンクのアニメーション（0.6s）
 * ========================================== */

/* 1. 通常時のリンクのデザインと仕込み */
.smooth-link-p a {
  color: #333333; /* 通常時の文字色（サイトに合わせて変更してください） */
  text-decoration: none !important; /* WordPressデフォルトの硬い下線を強制非表示 */
  display: inline;
  
  /* インライン文章の行間に響かないよう、隙間は2pxと絶妙に狭めています */
  padding-bottom: 2px; 
  
  /* 下線の準備（シルバー・細さ1px） */
  background-image: linear-gradient(#c0c0c0, #c0c0c0); 
  background-position: 0 100%;
  background-size: 0% 1px; /* 初期状態は横幅0% */
  background-repeat: no-repeat;
  
  /* お気に入りの0.6秒スローモーション */
  transition: color 0.6s ease, background-size 0.6s ease;
}

/* 2. そのテキストリンクにカーソルが重なった（ホバーした）時 */
.smooth-link-p a:hover {
  color: #778893 !important; /* ご指定のグレー色 */
  background-size: 100% 1px !important; /* 下線が100%に滑らかに伸びる */
}

/* [custom-sub-paragraph] 公開日と同じデザインを段落全体に適用するクラス */
.custom-sub-paragraph {
    font-size: 0.8em !important;
    color: #999 !important;
    letter-spacing: 0.05em !important;
}

/* [no-title-timeline] 特定のタイムラインのタイトルと下の2重線を非表示にする */
.no-title-timeline .timeline-title {
    display: none !important;
}

/* ==========================================
 * 階層マップ
 * ========================================== */

/* 階層マップ全体の枠 */
.custom-hierarchy-map {
    max-width: 100%;
    margin: 2em auto;
    box-sizing: border-box;
}

/* 一番上の親ボックス（白背景・薄い枠・左に上品なゴールドの線） */
.chm-parent {
    background: #ffffff;
    border: 1px solid #8A7350;
    border-left: 5px solid #c5a880; /* 左側の太線の色 */
    border-radius: 6px;
    padding: 20px;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

/* 子要素エリア（全体を右に段落ちさせ、親から伸びる縦線を引く） */
.chm-children-list {
    position: relative;
    padding-left: 35px; /* 親ボックスより右に下げる幅 */
    margin: 0;
}

/* 親の底から伸びる、綺麗な一本の縦線（さらに下まで延長） */
.chm-children-list::before {
    content: "";
    position: absolute;
    top: -10px;        /* 親ボックスの底から線を繋げます */
    left: 15px;        /* 縦線の左右の位置 */
    width: 2px;
    
    /* ★ここを変更！数値を小さくして、線をさらに下まで伸ばしました */
    bottom: 10px;      
    
    /* 上から下へ向かって透明になるグラデーション */
    background: linear-gradient(to bottom, #c5a880 0%, rgba(203, 213, 225, 0) 110%);
}
/* 各子要素のラップ */
.chm-item {
    position: relative;
    padding: 15px 0;
}

/* 縦線から分岐する横線 */
.chm-item::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    width: 30px; /* 横線の長さ */
    height: 2px;
    background-color: #c5a880;
}

/* 分岐点のドット（丸） */
.chm-item::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 15px;
    width: 8px;
    height: 8px;
    background-color: #8A7350; /* ドットの色（ゴールド） */
    border-radius: 50%;
}

/* 子ボックス本体（白背景に薄いグレーの枠） */
.chm-box {
    background: #ffffff;
    border: 1px solid #8A7350;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
    margin-left: 20px; /* 横線の分、さらに右に寄せる */
}

/* ボックス内の横並びレイアウト設定 */
.chm-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.chm-text {
    flex: 1;
}

.chm-text h4 {
    margin: 0 0 8px 0 !important;
    font-size: 1.15em;
    color: #1e293b;
    font-weight: bold;
}

.chm-text p {
    margin: 0 !important;
    font-size: 0.95em;
    color: #475569;
    line-height: 1.6;
}

/* 画像のサイズと形（すべて綺麗な正方形に統一） */
.chm-img {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
}

.chm-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px; /* ★ここ！すべての画像の角をほんのり丸い四角形にします */
}

/* 以前あった「親は丸、子は四角」の分岐設定（.chm-parent .chm-img img など）は完全に消去してください */

/* 📱 スマホ対応（画面が狭いときは、線は残したまま画像を上に逃がす） */
@media (max-width: 640px) {
    .chm-flex {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 12px;
    }
    .chm-img {
        width: 70px;
        height: 70px;
    }
    .chm-children-list {
        padding-left: 25px;
    }
    .chm-children-list::before {
        left: 5px;
    }
    .chm-item::before {
        left: 5px;
        width: 15px;
    }
    .chm-item::after {
        left: 5px;
    }
    .chm-box {
        margin-left: 15px;
        padding: 15px;
    }
}

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}