@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Template: cocoon-master
Version: 1.1.3
*/

/************************************
** Google Fonts 読み込み
************************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Shippori+Mincho:wght@400;700&display=swap');

/************************************
** Cocoon ヘッダー表示修正＆モダンデザイン
************************************/
/* --- ヘッダー全体の固定 --- */
#header-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 80px !important;
    z-index: 9999 !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
}

/* ロゴ文字のデザイン */
#header-container .logo-text,
.mobile-header-menu-buttons .logo-menu-button {
font-family: 'Shippori Mincho', serif; 
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
	order: 1 !important;
	justify-content: left;
	padding-left: 1em;
}
#header-container .navi {
	background-color: transparent !important;
}

/* ヘッダーの中を整理 */
.header-container-in.hlt-top-menu {
	justify-content: space-between;
	width: 100%;
	padding: 0 20px;
}

/* --- main全体の幅を固定 --- */
main.page-intro-wrapper {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.page-intro-wrapper .entry-content {
  margin-top: 0;
}

/* --- レスポンシブ調整 --- */
@media screen and (max-width: 1023px) {
    /* スマホ・タブレット時はPC用メニューを非表示にする */
    .navi-in .menu-pc {
        display: none !important; 
    }
	#header-container {
		display: none !important;
    }
    /* Cocoon標準のモバイルボタンをヘッダーの上に表示させる */
    .mobile-header-menu-buttons {
        z-index: 10000 !important; /* ヘッダーより上に */
		background-color: rgba(255, 255, 255, 0.6) !important;
    	backdrop-filter: blur(12px) !important;
    	-webkit-backdrop-filter: blur(12px) !important;
    }
	.mobile-header-menu-buttons .search-menu-button {
		order: 2 !important;
		display: none;
	}
	.mobile-header-menu-buttons .navi-menu-button {
		order: 3 !important;
	}
}

/* 782px以下（さらに小さい画面）の時 */
@media screen and (max-width: 782px) {
    /* サイトロゴの位置やサイズ微調整 */
    .site-name-text {
        font-size: 14px !important;
    }
}

/* 管理バーがある時にヘッダーを下げる */
.admin-bar #header-container {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
	.admin-bar .mobile-header-menu-buttons {
		    top: 46px !important;
	}
}
/* コンテンツの潜り込み防止 */
body {
    padding-top: 50px !important;
}
@media screen and (max-width: 782px) {
    body {
        padding-top: 35px !important; /* ヘッダーの高さに合わせる */
    }
}

/* ---------------------------------------------------------
 * モバイルヘッダーのスタイル
 * --------------------------------------------------------- */
.navi-menu-content {
	background-color: rgba(15, 23, 42, 0.9); /* スレート900に近い色 */
    backdrop-filter: blur(12px);
    min-height: 100vh !important; /* 画面の高さ100%を最大に */
	transform: translateX(100%) !important; /* 右側に表示 */
	left: auto !important; /* 右側に表示 */
	right: 0 !important; /* 右側に表示 */
    overflow-y: auto !important;   /* 縦方向にスクロールを許可 */
	width: 50%;
	visibility: hidden;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease, visibility 0.3s ease !important;
}
.navi-menu-content .menu-close-button {
	display: block;
	color: #fff;
    width: fit-content !important;
	margin-left: auto !important;
    margin-right: 20px !important;
}
#navi-menu-input:checked ~ #navi-menu-content {
    visibility: visible !important;
    transform: translateX(0) !important; /* 右端(0)の位置まで戻る */
}
#navi-menu-input:checked ~ #navi-menu-close {
    display: block !important;
}

/* ---------------------------------------------------------
 * モバイルヘッダーメニュー（ドロワー）のスタイル
 * --------------------------------------------------------- */
.menu-drawer {
    border: none !important;
    margin: 0 auto;
    padding: 0 2em !important;
}
.menu-drawer .menu-item {
    border: none !important;
    margin-bottom: 10px;
    transform: translateY(20px);
}
.menu-drawer .menu-item a {
    color: #fff !important;
    font-size: 1em !important;
    font-weight: 700 !important;
    padding: 15px 0 !important;
    display: block;
    text-decoration: none !important;
    letter-spacing: 0.05em;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.menu-drawer .menu-item a:hover {
	background-color: transparent !important;
}
/* リンク右側の矢印演出 */
.menu-drawer .menu-item a::after {
    content: '\f061';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #3b82f6; /* ブルー */
    transition: transform 0.3s ease;
}
.menu-drawer .menu-item a:hover::after {
    transform: translateY(-50%) translateX(5px);
}

/************************************
**  Cocoonのレイアウト強制リセット
** トップページ（.home）かつ自作ラッパーがある場合のみ適用
************************************/
.home .main,
.home .content,
.home .article,
.home .entry-content {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}
/* Cocoon標準footerを非表示 */
#footer {
  display: none !important;
}
/************************************
**  自作エリア共通スタイル
************************************/
.page-intro-wrapper {
    font-family: 'Noto Sans JP', sans-serif;
    color: #0f172a;
    line-height: 1.8;
    overflow-x: hidden; /* 横揺れ防止 */
}

.page-intro-wrapper .font-mincho { 
    font-family: 'Shippori Mincho', serif; 
}

/* 縦書きテキスト */
.page-intro-wrapper .vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.2em;
}

/************************************
**  アニメーション（フェードイン・浮遊）
************************************/
.page-intro-wrapper .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}
.page-intro-wrapper .reveal.active {
    opacity: 1;
    transform: translateY(0);
}

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(15px, -25px) scale(1.05); }
    100% { transform: translate(-15px, 25px) scale(0.95); }
}

/* 装飾用オーブ */
.page-intro-wrapper .bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.6;
    animation: float 20s infinite ease-in-out alternate;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
}
@media (min-width: 768px) {
    .page-intro-wrapper .bg-orb { filter: blur(80px); opacity: 0.8; }
}
.page-intro-wrapper .orb-1 { width: 60vw; height: 60vw; background: rgba(37, 99, 235, 0.25); top: -5%; left: -10%; }
.page-intro-wrapper .orb-2 { width: 70vw; height: 70vw; background: rgba(15, 23, 42, 0.1); bottom: -10%; right: -10%; animation-delay: -5s; }

/************************************
**  ホバーアクション
************************************/

/* カードが上に浮き上がる動き */
.page-intro-wrapper .hover-card-up {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    will-change: transform, box-shadow;
    position: relative;
    z-index: 1;
}

.page-intro-wrapper .hover-card-up:hover {
    transform: translateY(-12px) scale(1.02) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
    z-index: 10;
}

/* カード内のアイコンも連動して動かす */
.page-intro-wrapper .hover-card-up .fa-solid,
.page-intro-wrapper .hover-card-up i {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.page-intro-wrapper .hover-card-up:hover .fa-solid,
.page-intro-wrapper .hover-card-up:hover i {
    transform: scale(1.2) rotate(8deg) !important;
}

/* ニュースアイテムの横移動 */
.page-intro-wrapper .news-item {
    transition: all 0.3s ease !important;
    display: flex; /* Cocoonの干渉防止 */
}

.page-intro-wrapper .news-item:hover {
    transform: translateX(10px) !important;
    background-color: rgba(248, 250, 252, 0.8) !important;
    padding-left: 10px !important;
    text-decoration: none !important; /* 下線を消す */
}

/************************************
**  その他パーツ
************************************/
.page-intro-wrapper .bg-stripe {
    background-image: repeating-linear-gradient(-45deg, rgba(37, 99, 235, 0.03), rgba(37, 99, 235, 0.03) 1px, transparent 1px, transparent 40px);
}
.single-post .eye-catch {
    max-width: 40em !important;
}
/************************************
**  サイトマップ
************************************/
/* 全体のリスト構造のリセット */
.footer-custom ul, 
.footer-custom li {
    list-style: none !important;
    padding: 0 !important;
}

/* Cocoonが自動でつける「・」を全方位で消去 */
.sitemap-grid .sub-menu li {
    list-style: none !important;
    list-style-type: none !important;
    display: block !important; 
}

/* サイトマップのグリッド配置 */
.sitemap-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px 30px;
}

/* 親項目（第一階層のli）の箱 */
.sitemap-grid > .menu-item {
    margin-top: 15px !important;
    list-style: none !important;
    display: block !important;
}

/* 親項目（第1階層）のスタイル */
.sitemap-grid > .menu-item > a {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em;
    text-decoration: none !important;
	margin-bottom: 5px !important;
    padding-left: 12px !important;
    display: block;
    position: relative;
    line-height: 1.4;
}

/* 親のアクセント線（青い縦線） */
.sitemap-grid > .menu-item > a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background-color: #3b82f6;
}

/* 子メニュー（サブ項目）のリスト */
.sitemap-grid .sub-menu {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    padding-left: 12px !important; /* 親のアクセント線に合わせる */
}

/* 子項目のテキスト */
.sitemap-grid .sub-menu .menu-item a {
    font-size: 11px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    line-height: 1.6 !important;
    transition: all 0.3s;
    display: block;
}

/* 項目のホバー */
.sitemap-grid .menu-item a:hover {
    color: #fff !important;
    transform: translateX(5px);
}

/* スマホ対応：1カラム時でも親項目同士がくっつかないように */
@media screen and (max-width: 599px) {
    .sitemap-grid {
        gap: 30px 0;
    }
}

/************************************
**  問合せフォーム
************************************/
/* フォーム全体のコンテナ */
.wpcf7 {
    max-width: 700px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* ラベルの装飾 */
.wpcf7 label {
    display: block;
    margin-bottom: 1.5rem;
    font-weight: 600;
    color: #334155; /* slate-700相当 */
}

/* 入力フィールド共通 (text, email, tel, select, textarea) */
.wpcf7-form-control:not(.wpcf7-submit) {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #1e293b;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.3s ease;
    -webkit-appearance: none; /* デフォルトスタイル除去 */
}

/* フォーカス時の演出 */
.wpcf7-form-control:not(.wpcf7-submit):focus {
    outline: none;
    background-color: #fff;
    border-color: #3b82f6; /* ブルーのアクセント */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* セレクトボックスの調整 */
.wpcf7-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2em;
}

/* テキストエリアの高さ調整 */
.wpcf7-textarea {
    min-height: 150px;
    resize: vertical;
}

/* 送信ボタンの装飾 */
.wpcf7-submit {
    display: inline-block; /* 中央寄せを機能させるためにinline-blockに変更 */
    width: 100%;
    max-width: 280px; /* ボタンが広がりすぎないよう制限 */
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.wpcf7-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4);
    opacity: 0.9;
}

.wpcf7-submit:active {
    transform: translateY(0);
}

/* エラーメッセージ（バリデーション） */
.wpcf7-not-valid-tip {
    color: #ef4444;
    font-size: 0.8rem;
    font-weight: normal;
    margin-top: 5px;
    display: block;
}

.wpcf7-response-output {
    margin-top: 2rem !important;
    padding: 1rem !important;
    border-radius: 8px !important;
    border: 2px solid transparent !important;
    text-align: center;
}

/* 送信成功時のメッセージ */
.wpcf7 form.sent .wpcf7-response-output {
    background-color: #f0fdf4;
    border-color: #22c55e !important;
    color: #166534;
}

/* 送信失敗時のメッセージ */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unspam .wpcf7-response-output {
    background-color: #fef2f2;
    border-color: #ef4444 !important;
    color: #991b1b;
}

/* ローディングスピナーの位置調整 */
.wpcf7-spinner {
    display: block;
    margin: 10px auto;
}

/************************************
**  グラフ描写用
************************************/
.chart-container {
	position: relative;
	width: 100%;
	height: 320px;
}
        
/* グラフのアニメーション */
.line-path {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: draw 2.5s ease-out forwards;
}
        
@keyframes draw {
	to { stroke-dashoffset: 0; }
}

.area-path {
	opacity: 0;
	animation: fadeIn 1s ease-out 1.8s forwards;
}

@keyframes fadeIn {
	to { opacity: 0.15; }
}

/* 数値ラベルのアニメーション */
.label-fade-in {
	opacity: 0;
	animation: labelFadeIn 0.8s ease-out 2.2s forwards;
}

@keyframes labelFadeIn {
	to { opacity: 1; }
}

/************************************
**  クッキーNotis
************************************/
#hu-revoke .hu-revoke-button {
	opacity: 0 !important;
	pointer-events: none; /* 通常時の誤クリック防止 */
    position: fixed;
    left: -100px;
}