@charset "utf-8";
/* CSS Document */
/* ==========================================================================
   Base Settings (基本設定)
   ========================================================================== */
:root {
    --primary-green: #060;     /* 研究所らしい深い緑 */
    --accent-gold: #d68121;      /* お問い合わせボタンの金茶 */
    --text-color: #000000;       /* メインの文字色 */
    --white: #ffffff;
    --transition: all 0.3s ease; /* アニメーションの共通設定 */
}


/* ==========================================================================
   共通レイアウト設定
   ========================================================================== */
.inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2%;
    width: 100%;
}

/* 各セクションの共通上下余白 */
.content-section{
    padding: 100px 0; 
}

/* 改行(スマホのみ) */
.sp-only {
    display: none;
}

@media (max-width: 768px) {
    .content-section {
        padding: 60px 0;    /* スマホ時は少し狭める */
    }
    .sp-only {
        display: inline; /* スマホの時だけ改行を有効にする */
    }
}
/* ==========================================================================
   Header (ヘッダー)
   ========================================================================== */
/* ヘッダー全体 */
.site-header {
    /* 画面上部に固定してついてくる設定 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;

    /* 背景の透過と質感 */
    background: rgba(0, 102, 0, 0.6); /* 画像に合わせた深い緑の透過 */
    backdrop-filter: blur(4px);       /* 背後の森を少しぼかして文字を読みやすくする */
    -webkit-backdrop-filter: blur(4px);
    font-family: 'Noto Sans JP', sans-serif;
    box-sizing: border-box;
    margin: 0;
}

/* ロゴエリア */
.header-top {
    text-align: center;
    padding: 15px 0 10px; /* 画像の上下の余白 */
}

.logo {
    display: inline-block;
}

.logo img {
    /* 画像のサイズ調整（元の画像の大きさに合わせて変えてください） */
    max-width: 335px; 
    height: auto;
    display: block;
    margin: 0 auto;
    
    /* 透過背景の上でロゴを綺麗に見せるための処理 */
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.2)); 
}

/* リンクをマウスオーバーした時に少し透過させる（お好みで） */
.logo a:hover {
    opacity: 0.8;
    transition: opacity 0.3s;
}
/* ナビゲーションの枠線 */
.main-nav {
}

.nav-list {
    display: flex;
    justify-content: center;
    align-items: stretch;
    max-width: 1400px; /* 端まで広げる */
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 1);
}

/* 各メニュー項目 */
.nav-item {
    flex: auto;
    display: flex;
    align-items: stretch; 
/*    border-right: 1px solid rgba(255, 255, 255, 0.3);*/
    min-height: 45px;
    position: relative;
}

.nav-item a {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 上下中央揃え */
    align-items: center;
    width: 100%;
    padding: 0 4px;
    font-size: 1rem;
    color: #fff;
    text-decoration: none;
    position: relative; /* 三角形の基準点にする */
	font-size: 16px;
}

/* 「ホーム」の白ボックス */
.nav-item.current {
    background: #fff;
    border-right: none;
}

.nav-item.current a {
    color: #005a42;
    font-weight: bold;
}

/* 下向き矢印（画像に基づいた配置） */
.nav-item.has-child a::after {
    content: '';
    position: absolute;
    bottom: 7px; /* 位置は高さに合わせて微調整してください */
    left: 50%;
    
    /* V字の形を作る設定 */
    width: 6px;           /* Vの横幅 */
    height: 6px;          /* Vの高さ */
    border-right: 1px solid #ffffff; /* Vの右側の線 */
    border-bottom: 1px solid #ffffff; /* Vの左側の線 */
    
    /* 45度回転させてVの形にする */
    transform: translateX(-50%) rotate(45deg);
}

/* お問い合わせボタン（右端固定） */
.nav-item.btn-contact {
    background: var(--accent-gold);
    border-right: none;
    flex: 1.2;
}

.nav-item.btn-contact a {
    padding-bottom: 0; /* お問い合わせは三角形がないので余白なし */
    text-align: center;
    width: 130px;
}

.sub-menu {
    position: absolute;
    top: 100%; /* 親（nav-item）のすぐ下に配置 */
    left: 0;
    width: 100%; /* メニューの幅 */
    background: rgba(0, 40, 20, 0.95);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    
    /* 非表示設定 */
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    transform: translateY(10px); /* 少し下からふわっと出すための準備 */
    z-index: 1001;
}

/* --- 親にマウスが乗ったら表示 --- */
.nav-item:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- サブメニュー内のリスト項目 --- */
.sub-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.sub-menu li:last-child {
    border-bottom: none;
}

.sub-menu li a {
    padding: 12px 20px;
    font-size: 12px;
    color: #fff;
    display: block;
    width: 100%;
}
.sub-menu li a::after{
	display: none;
}
/* サブメニュー内のホバー */
.sub-menu li a:hover {
    background: rgba(255, 255, 255, 0.1);
}
/* PC時はスマホメニュー関連を隠す */
.menu-trigger, .sp-nav-wrapper {
    display: none;
}

@media (max-width: 1024px) { /* タブレット・スマホサイズから切り替え */
    .header-top {
        display: flex;
        justify-content: space-between; /* ロゴとボタンを両端に */
        align-items: center;
        padding: 10px 20px; /* 左右に適切な余白を */
        position: relative;
        z-index: 10000; /* メニュー本体(2500)より圧倒的に上に */
    }

    /* ロゴのサイズとマージンをリセット */
    .logo {
        margin: 0; 
    }

    /* ボタン自体の設定 */
    .menu-trigger {
        position: relative; /* fixedにする必要はありません */
        z-index: 10001;     /* さらにその上に */
        margin-right: 0;    /* 調整 */
        display: block;
    }
	
    .nav-list {
        gap: 15px;
    }
    .nav-list li a {
        font-size: 0.8rem;
    }
    .main-nav {
        display: none;
    }

    .menu-trigger { display: block; }

    /* ハンバーガーボタン */
    .menu-trigger {
        position: relative;
        width: 30px;
        height: 24px;
        appearance: none;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 3000;
        margin-right: 20px;
    }
    .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #fff;
        transition: all 0.4s;
    }
    .menu-trigger span:nth-child(1) { top: 0; }
    .menu-trigger span:nth-child(2) { top: 11px; }
    .menu-trigger span:nth-child(3) { bottom: 0; }

    /* ボタンがアクティブ（開いている時）の形 */
    .menu-trigger.is-active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
    .menu-trigger.is-active span:nth-child(2) { opacity: 0; }
    .menu-trigger.is-active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

    /* スマホメニュー本体 */
    .sp-nav-wrapper {
        display: block;
        position: fixed;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100vh;
        background: rgba(0, 40, 20, 0.98);
        z-index: 2500;
        transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        overflow-y: auto;
        padding: 60px 30px ;
        font-family: "Times New Roman", "Shippori Mincho", "Hiragino Mincho ProN", serif;
    }
    
    /* メニューが開いた時 */
    .sp-nav-wrapper.is-active {
        transform: translateX(-100%);
    }

    /* メニュー内の装飾 */
    .sp-nav-list { list-style: none; }
    .sp-nav-item { margin-bottom: 30px; }
    
    .sp-nav-label {
        color: #fff;
        text-decoration: none;
        font-size: 18px;
        display: block;
    }

    .sp-nav-list a {
        color: #fff;
        text-decoration: none;
        font-size: 18px;
        display: block;
        padding: 8px 0;
        margin-bottom: 30px;
    }

    .sp-sub-menu {
        margin-top: 10px;
        padding-left: 15px;
        border-left: 1px solid rgba(255,255,255,0.2);
    }

    .sp-sub-menu li a {
        font-size: 15px;
        color: #e0ca9e;
        margin-bottom: 5px;
    }

    /* お問い合わせボタン */
    .sp-btn-contact a {
        background: #e0ca9e;
        color: #00381e !important;
        text-align: center;
        padding: 15px;
        border-radius: 4px;
        font-weight: bold;
        margin-top: 20px;
        width: 315px;
    }
}
/* レスポンシブ */
@media (max-width: 768px) {
    .logo img {
        max-width: 280px; /* スマホではロゴを小さくする */
    }
    .header-inner {
        padding: 10px;
    }
    .logo {
        font-size: 1rem;
    }
    .menu-trigger {
        margin-right: 0px;
    }
    .header-top {
     padding: 10px; 
    }
}

/* ==========================================================================
   フッター
   ========================================================================== */
.main-footer {
    background-color: #009245; 
    color: #fff;
    padding: 60px 0 0;
    /* 親要素の基準サイズ */
    font-size: 16px !important;
}

/* 上部のレイアウト */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

/* 左：キャッチコピー */
.footer-sub-copy {
    font-size: 25px !important; /* 1.56rem相当 */
    margin-bottom: 5px;
    letter-spacing: 0.1em;
    font-family: "Times New Roman", "Shippori Mincho", "Hiragino Mincho ProN", serif;
}

.footer-main-copy {
    font-size: 48px !important; /* 3rem相当 */
    font-family: serif;
    font-weight: bold;
}

/* 右：研究所情報 */
.footer-info {
    text-align: right;
}

.footer-name {
    font-size: 24px !important; /* 1.5rem相当 */
    margin-bottom: 10px;
}

.footer-address, 
.footer-contact {
    font-size: 15px !important; /* 0.95rem相当 */
    line-height: 1.8;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    margin-bottom: 15px;
}

.footer-contact span {
    font-size: 15px !important; /* 子要素にも確実にpx指定 */
    margin-left: 0;
    line-height: 1.2;
}

/* SNSアイコン */
.footer-sns {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.sns-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    transition: opacity 0.3s;
}

.sns-icon img {
    width: 40px; 
    height: auto;
}

.sns-icon:hover {
    opacity: 0.8;
}

/* 下部：ナビゲーション */
.footer-nav {
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    padding: 20px 0 30px;
}

.footer-nav-list {
    display: flex;
    justify-content: space-between;
    list-style: none;
    flex-wrap: wrap;
}

.footer-nav-list li a {
    color: #fff;
    text-decoration: none;
    font-size: 14px !important; /* 0.9rem相当（微調整可） */
    display: flex;
    align-items: center;
}

.footer-nav-list li a::before {
    content: "〉";
    font-size: 11px !important; /* 0.7rem相当 */
    margin-right: 5px;
    display: inline-block;
}

.footer-nav-list li a:hover {
    border-bottom: 1px solid #fff; 
    padding-bottom: 1px;
}

/* --- フッター最下部エリア --- */
.footer-bottom {
    font-size: 13px !important; /* 0.8rem相当 */
    color: rgba(255, 255, 255, 0.8);
}

.footer-bottom-top {
    background-color:#006600; 
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-utility {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.policy-link {
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.05em;
    font-size: 13px !important; /* aタグに直接指定 */
}

.policy-link:hover {
    text-decoration: underline;
}

.copyright {
    letter-spacing: 0.1em;
    font-size: 13px !important; /* smallタグ等に直接指定 */
}

.footer-bottom-info {
    padding: 12px 0;
}

.disclaimer {
    text-align: center;
    margin: 0;
    line-height: 1.8;
    font-size: 12px !important; /* 0.75rem相当 */
    color: rgba(255, 255, 255, 1);
}

/* --- レスポンシブ --- */
@media (max-width: 900px) {
    .footer-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
    }

    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-info {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-contact {
        align-items: center;
        margin-left: 0;
    }

    .footer-sns {
        justify-content: center;
    }

    .footer-nav-list {
        justify-content: center;
        gap: 15px 20px;
    }

    .footer-bottom-top {
        padding: 25px 0;
    }
    .footer-utility {
        flex-direction: column;
        gap: 15px;
    }
    .disclaimer {
        padding: 0 20px;
    }
}
/* ==========================================================================
   アニメーション
   ========================================================================== */

/* 上にふわっと浮き上がるアニメーション */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   各ページ見出し共通スタイル
   ========================================================================== */
.voicesHome,
.cordycepsHome,
.travelogueHome,
.privacyHome,
.contactHome,
.cautionHome,
.picturebookHome,
.studyHome,
.aboutHome,
.newsHome {
    display: flex;
    justify-content: center;
    margin-top: 0rem;
}

.voicesHome__container,
.cordycepsHome__container,
.travelogueHome__container,
.privacyHome__container,
.contactHome__container,
.cautionHome__container,
.picturebookHome__container,
.studyHome__container,
.aboutHome__container,
.newsHome__container {
    position: relative;
    width: 100%;
    height: 18rem;
    overflow: hidden;
    background-size: cover;
}

@media print, screen and (min-width: 1025px) {
    .voicesHome__container,
    .cordycepsHome__container,
    .travelogueHome__container,
    .privacyHome__container,
    .contactHome__container,
    .cautionHome__container,
    .picturebookHome__container,
    .studyHome__container,
    .aboutHome__container,
    .newsHome__container {
        height: 30rem;
    }

    .voicesHome .bd-container,
    .cordycepsHome .bd-container,
    .travelogueHome .bd-container,
    .privacyHome .bd-container,
    .contactHome .bd-container,
    .cautionHome .bd-container,
    .picturebookHome .bd-container,
    .studyHome .bd-container,
    .aboutHome .bd-container,
    .newsHome .bd-container {
        max-width: none;
        margin: 0;
    }
}

.voicesHome__container .voicesHome__title__waku,
.cordycepsHome__container .cordycepsHome__title__waku,
.travelogueHome__container .travelogueHome__title__waku,
.privacyHome__container .privacyHome__title__waku,
.contactHome__container .contactHome__title__waku,
.cautionHome__container .cautionHome__title__waku,
.picturebookHome__container .picturebookHome__title__waku,
.studyHome__container .studyHome__title__waku,
.aboutHome__container .aboutHome__title__waku,
.newsHome__container .newsHome__title__waku {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    width: 500px;
    background: none;
    height: auto;
    border-radius: 0;
    display: block;
    animation: none;
    -webkit-animation: none;
}

.voicesHome__container .voicesHome__title,
.cordycepsHome__container .cordycepsHome__title,
.travelogueHome__container .travelogueHome__title,
.privacyHome__container .privacyHome__title,
.contactHome__container .contactHome__title,
.cautionHome__container .cautionHome__title,
.picturebookHome__container .picturebookHome__title,
.studyHome__container .studyHome__title,
.aboutHome__container .aboutHome__title,
.newsHome__container .newsHome__title {
    font-family: "游明朝", "游明朝体", "Yu Mincho", YuMincho, "Noto Serif Japanese", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    color: #ffffff;
    letter-spacing: 0;
    position: relative;
    font-weight: bold;
    font-size: 2.5rem;
    margin-top: 5rem;
    text-shadow: 0px 0px 10px rgba(0, 81, 74, 1), 0px 0px 10px rgba(0, 81, 74, 1), 0px 0px 10px rgba(0, 81, 74, 1), 0px 0px 10px rgba(0, 81, 74, 1);
    text-align: center;
}

.voicesHome__container .voicesHome__title::before,
.cordycepsHome__container .cordycepsHome__title::before,
.travelogueHome__container .travelogueHome__title::before,
.privacyHome__container .privacyHome__title::before,
.contactHome__container .contactHome__title::before,
.cautionHome__container .cautionHome__title::before,
.picturebookHome__container .picturebookHome__title::before,
.studyHome__container .studyHome__title::before,
.aboutHome__container .aboutHome__title::before,
.newsHome__container .newsHome__title::before,
.voicesHome__container .voicesHome__title::after,
.cordycepsHome__container .cordycepsHome__title::after,
.travelogueHome__container .travelogueHome__title::after,
.privacyHome__container .privacyHome__title::after,
.contactHome__container .contactHome__title::after,
.cautionHome__container .cautionHome__title::after,
.picturebookHome__container .picturebookHome__title::after,
.studyHome__container .studyHome__title::after,
.aboutHome__container .aboutHome__title::after,
.newsHome__container .newsHome__title::after {
    content: none;
}

@media screen and (min-width: 768px) {
    .voicesHome__container .voicesHome__title,
    .cordycepsHome__container .cordycepsHome__title,
    .travelogueHome__container .travelogueHome__title,
    .privacyHome__container .privacyHome__title,
    .contactHome__container .contactHome__title,
    .cautionHome__container .cautionHome__title,
    .picturebookHome__container .picturebookHome__title,
    .studyHome__container .studyHome__title,
    .aboutHome__container .aboutHome__title,
    .newsHome__container .newsHome__title {
        letter-spacing: .1rem;
        font-size: 3rem;
    }
}

@media print, screen and (min-width: 1025px) {
    .voicesHome__container .voicesHome__title,
    .cordycepsHome__container .cordycepsHome__title,
    .travelogueHome__container .travelogueHome__title,
    .privacyHome__container .privacyHome__title,
    .contactHome__container .contactHome__title,
    .cautionHome__container .cautionHome__title,
    .picturebookHome__container .picturebookHome__title,
    .studyHome__container .studyHome__title,
    .aboutHome__container .aboutHome__title,
    .newsHome__container .newsHome__title {
        margin-top: 8rem;
		width: 500px;
    }
}