@charset "UTF-8";

/*
 Theme Name:   Cocoon Child
 Template:     cocoon-master
*/

/* --------------------------------------------------
 * 0. フォント読み込み
 * -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap');

/* --------------------------------------------------
 * 1. 共通：透明化設定
 * -------------------------------------------------- */
.header, .header-container, .header-container-in, .common-header-in, #navi {
    background: transparent !important; /* 背景を透明に */
    border: none !important;             /* 枠線を消す */
    box-shadow: none !important;         /* 影を消す */
}

/* --------------------------------------------------
 * 2. 背景画像の設定
 * -------------------------------------------------- */
body {
    background-image: url('http://okinawanext.life/wp-content/uploads/2026/04/名称未設定のデザイン.jpg'); /* 背景画像URL */
    background-size: cover;              /* 画面いっぱいに広げる */
    background-attachment: fixed;        /* スクロールしても固定 */
    background-position: center top;     /* 中央上部を基準に配置 */
}

/* --------------------------------------------------
 * 3. ヘッダータイトル（メインロゴ）
 * -------------------------------------------------- */
.header {
    min-height: 45vh;                    /* ヘッダーの高さ */
    display: flex;                       /* 子要素を整列 */
    flex-direction: column;              /* 縦並び */
    justify-content: center;             /* 垂直中央寄せ */
    align-items: center;                 /* 水平中央寄せ */
    position: relative;                  /* 配置の基準 */
    z-index: 20;                         /* 重なり順 */
}

.header .logo-text,
.header .site-name-text,
.header .site-name-text-link {
    font-family: 'Amatic SC', cursive !important; /* おしゃれフォント */
    font-weight: 700;                             /* 太字 */
    font-size: 150px !important;                  /* PCサイズ */
    color: #fff !important;                       /* 文字色（白） */
    text-shadow: 2px 2px 10px rgba(0,0,0,0.6);    /* 文字の影 */
    letter-spacing: 5px;                          /* 文字の間隔 */
    line-height: 1.1;                             /* 行間 */
    text-decoration: none;                        /* 下線なし */
}

/* --------------------------------------------------
 * 4. ナビゲーション：自動伸縮する右上フローティング配置
 * -------------------------------------------------- */
.navi-in {
    position: fixed;                     /* 常に画面に固定 */
    top: 25px;                           /* 画面上からの余白 */
    right: 25px;                         /* 画面右からの余白 */
    display: inline-flex !important;     /* 【重要】中身に合わせて幅を自動伸縮 */
    width: auto !important;              /* 固定幅を解除 */
    min-width: fit-content;              /* 最小幅を中身に合わせる */
    align-items: center;                 /* 垂直中央揃え */
    background: rgba(10, 25, 30, 0.4) !important; /* 深海のような透明感のある黒 */
    padding: 5px 10px !important;        /* スリムな外枠余白 */
    border-radius: 100px !important;     /* 完璧なカプセル形状 */
    backdrop-filter: blur(15px);         /* 背景ぼかし */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* 繊細な光の輪郭 */
    z-index: 9999 !important;            /* 最前面 */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important; /* 深みのある影 */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* メニュー全体のホバー：少し浮き上がる */
.navi-in:hover {
    background: rgba(10, 25, 30, 0.6) !important;
    transform: scale(1.02) translateY(-2px);
}

.navi-in a {
    font-family: 'Amatic SC', cursive !important; /* フォント統一 */
    font-weight: 700;                             /* 太字 */
    font-size: 22px;                              /* 文字サイズ */
    letter-spacing: 2px;                          /* 文字間隔（高級感） */
    color: rgba(255, 255, 255, 0.85) !important;  /* 柔らかい白 */
    padding: 6px 18px;                            /* 押しやすい余白 */
    text-decoration: none;                        /* 下線なし */
    border-radius: 100px;                         /* ホバー背景もカプセル型 */
    transition: all 0.3s ease;                    /* 変化を滑らかに */
    white-space: nowrap;                          /* 勝手に改行させない */
    position: relative;
}

/* メニュー間の仕切り線 */
.navi-in a:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    width: 1px;
    height: 50%;
    background: rgba(255, 255, 255, 0.15);
}

/* 各メニュー項目のホバー：水色に発光 */
.navi-in a:hover {
    color: #fff !important;                      
    background: rgba(0, 251, 255, 0.15);          
    text-shadow: 0 0 15px rgba(0, 251, 255, 0.8); 
}

/* --------------------------------------------------
 * 5. メインコンテンツエリア
 * -------------------------------------------------- */
#content { position: relative; z-index: 10; }
.main {
    background: #fff;                    /* 背景色（白） */
    border-radius: 20px 20px 0 0;        /* 上部を丸く */
    padding: 40px 30px;                  /* 内側の余白 */
}

/* --------------------------------------------------
 * 6. フッタータイトル（左右1本線スタイル）
 * -------------------------------------------------- */
.footer {
    background-color: #0d9688 !important; /* 指定のグリーン背景 */
    padding: 30px 0;                      /* 上下の余白 */
    width: 100% !important; 
    text-align: center;                   /* 中央揃え */
}

.footer .logo-text,
.footer .site-name-text,
.footer .site-name-text-link {
    display: inline-flex !important;      /* 線と文字を横一列に */
    align-items: center;                  /* 垂直中央揃え */
    font-family: 'Amatic SC', cursive !important; /* フォント統一 */
    font-weight: 700 !important;          /* 太字 */
    font-size: 36px !important;           /* フッターサイズ */
    color: #fff !important;                /* 文字色（白） */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3) !important; /* 控えめな影 */
    letter-spacing: 4px !important;       /* 文字間隔 */
    text-decoration: none;
    margin: 15px 0;
}

/* フッターの左右1本線（疑似要素） */
.footer .site-name-text-link::before,
.footer .site-name-text-link::after {
    content: '';                          /* 線の箱を作成 */
    display: block;
    width: 2px;                           /* 線の太さ */
    height: 40px;                         /* 線の高さ */
    background-color: #fff;               /* 線の色（白） */
    flex-shrink: 0;                       /* 幅を固定 */
}

.footer .site-name-text-link::before { margin-right: 25px; } /* 文字との間隔（左） */
.footer .site-name-text-link::after  { margin-left: 25px;  } /* 文字との間隔（右） */

/* --------------------------------------------------
 * 7. レスポンシブ（スマホ対応）
 * -------------------------------------------------- */
@media screen and (max-width: 480px) {
    /* ヘッダータイトルのスマホサイズ */
    .header .site-name-text,
    .header .site-name-text-link { font-size: 60px !important; }

    /* メニューを画面下中央に固定（親指で押しやすく） */
    .navi-in {
        top: auto; bottom: 20px; left: 50%;
        transform: translateX(-50%);      /* 中央寄せ補正 */
        width: 90% !important;            /* スマホでは幅広に */
        justify-content: center;
    }
    .navi-in a { font-size: 20px !important; }
    .navi-in a:not(:last-child)::after { display: none; } /* スマホでは区切り線を消す */

    /* フッターのスマホ対応 */
    .footer .site-name-text,
    .footer .site-name-text-link { font-size: 28px !important; }
    .footer .site-name-text-link::before,
    .footer .site-name-text-link::after {
        height: 30px;                     /* 線を短く */
        margin: 0 15px;                   /* 線と文字の間隔を狭める */
    }
}