@charset "UTF-8"; /* CSSの文字コード指定 */

/*
 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; /* 画面高さの45%確保 */

    display:flex; /* flexbox有効化 */

    flex-direction:column; /* 縦並び */

    justify-content:center; /* 縦中央 */

    align-items:center; /* 横中央 */

    position:relative; /* 基準位置 */

    z-index:20; /* 重なり順 */

    text-align:center; /* テキスト中央 */

    padding:0 10px; /* 横余白 */

}


.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; /* 下線削除 */

    word-break:keep-all; /* 改行防止 */

}


/* --------------------------------------------------
 * 4. ナビメニュー
 * -------------------------------------------------- */

.navi-in{

    position:fixed; /* 画面固定 */

    top:25px; /* 上余白 */

    right:25px; /* 右余白 */

    display:inline-flex !important; /* 横並び */

    flex-wrap:nowrap; /* 折返し禁止 */

    width:auto !important; /* 自動幅 */

    max-width:calc(100% - 40px); /* 画面外にはみ出さない */

    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 .4s cubic-bezier(.165,.84,.44,1); /* アニメーション */

}


/* ホバー時の動き */

.navi-in:hover{

    background:rgba(10,25,30,.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,.85) !important; /* 文字色 */

    padding:6px 18px; /* 余白 */

    text-decoration:none; /* 下線なし */

    border-radius:100px; /* 丸形 */

    transition:.3s; /* アニメーション */

    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,.15); /* 線色 */

}


/* hover発光 */

.navi-in a:hover{

    color:#fff !important; /* 明るく */

    background:rgba(0,251,255,.15); /* 水色背景 */

    text-shadow:0 0 15px rgba(0,251,255,.8); /* 発光 */

}


/* --------------------------------------------------
 * 5. メインエリア
 * -------------------------------------------------- */

#content{

    position:relative; /* 基準 */

    z-index:10; /* 重なり */

}


.main{

    background:#fff; /* 白背景 */

    border-radius:20px 20px 0 0; /* 上角丸 */

    padding:40px 30px; /* 内余白 */

    box-sizing:border-box; /* padding含めて幅計算 */

}


/* --------------------------------------------------
 * 6. フッター
 * -------------------------------------------------- */

.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,.3) !important; /* 影 */

    letter-spacing:4px !important; /* 文字間隔 */

    text-decoration:none; /* 下線なし */

    margin:15px 0; /* 上下余白 */

}


/* 左右ライン */

.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){ /* 画面幅480px以下 */


/* iPhoneで背景ガタつき防止 */

body{

    background-attachment:scroll; /* fixed解除 */

}


/* ロゴ高さ調整 */

.header{

    min-height:40vh; /* 少し小さく */

}


/* ロゴサイズ自動調整 */

.header .site-name-text,
.header .site-name-text-link{

    font-size:clamp(42px,10vw,60px) !important; /* 画面に応じて変化 */

    letter-spacing:2px; /* 間隔調整 */

}


/* メニュー下固定 */

.navi-in{

    top:auto; /* 上解除 */

    bottom:20px; /* 下配置 */

    left:50%; /* 中央基準 */

    right:auto; /* 右解除 */

    transform:translateX(-50%); /* 中央寄せ */

    width:calc(100% - 30px) !important; /* 横幅調整 */

    justify-content:center; /* 中央揃え */

    padding:8px 10px !important; /* 余白調整 */

}


/* スマホ文字サイズ */

.navi-in a{

    font-size:18px !important; /* 少し小さく */

    padding:8px 12px; /* タップしやすい */

}


/* 区切り線非表示 */

.navi-in a:not(:last-child)::after{

    display:none; /* 線消す */

}


/* コンテンツ余白 */

.main{

    padding:25px 18px; /* 余白縮小 */

}


/* フッター文字 */

.footer .site-name-text,
.footer .site-name-text-link{

    font-size:24px !important; /* 小さく */

    letter-spacing:2px !important; /* 間隔調整 */

}


/* フッター線 */

.footer .site-name-text-link::before,
.footer .site-name-text-link::after{

    height:25px; /* 短く */

    margin:0 10px; /* 間隔調整 */

}

}