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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* --- 35行目から全て上書き --- */

/* 1. ヘッダー全体の余計な背景と線を全て消す */
.header, .header-container, .header-container-in, .common-header-in {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. 海の画像をヘッダー全体の背景として敷く */
.header {
    background-image: url('http://okinawanext.life/wp-content/uploads/2026/04/名称未設定のデザイン.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    min-height: 45vh; /* 高さを画面の45%に調整 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
}

/* ヘッダー画像をページ全体の最背面に固定する */
body {
    background-image: url('http://okinawanext.life/wp-content/uploads/2026/04/名称未設定のデザイン.jpg') !important;
    background-size: cover !important;
    background-attachment: fixed !important; /* スクロールしても画像が動かない */
    background-position: center top !important;
}

/* ヘッダー部分を透明にして背景を見せる */
.header {
    background-image: none !important; /* bodyの背景を見せるためヘッダー自体は空にする */
    background-color: transparent !important;
    min-height: 50vh;
}

/* 3. ロゴ（okinawa next）の調整 */
.site-name-text-link {
    color: #ffffff !important;
    font-size: 56px !important; /* 大きく主役に */
    font-weight: bold !important;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.6) !important; /* 影をしっかり */
    display: block;
    margin-bottom: 20px;
}

/* 4. メニューバー（お問い合わせ等）を透明にする */
#navi, .navi-in {
    background-color: transparent !important;
    border: none !important;
}

.navi-in a {
    color: #ffffff !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.6);
    background-color: rgba(255,255,255,0.2); /* メニューボタンを少し透かす */
    padding: 10px 25px !important;
    border-radius: 50px;
    margin: 0 10px;
}

/* 5. 下の記事エリアを海に重ねる（グイッと持ち上げ） */
#content {
    margin-top: -60px !important; /* 海の上に少し乗せる */
    position: relative;
    z-index: 10;
}

.main {
    background-color: #ffffff !important; /* 指定の白色 */
    border-radius: 15px 15px 0 0 !important; /* 角を丸く */
    box-shadow: 0 -10px 20px rgba(0,0,0,0.1);
    padding: 30px !important;
}

/* 6. スマホで見やすくする調整 */
@media screen and (max-width: 480px) {
    .site-name-text-link { font-size: 32px !important; }
    .header { min-height: 35vh; }
}