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

/* 1. 背景画像および背景カラーをフルスクリーンに */
body {
    background-image: url('背景画像のURL'); /* 画像を設定 */
    background-size: cover; /* 画面いっぱいに表示 */
    background-position: center; /* 画像を中央配置 */
    background-repeat: no-repeat; /* 繰り返しなし */
    background-color: #your-color; /* 画像がない場合の背景色 */
    margin: 0;
    padding: 0;
    height: 100vh; /* ビューポートの高さを100%に */
}


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

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

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

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

/************************************
** 固定ページのタイトルを中央寄せ
************************************/
.entry-title {
text-align: center;
}
/************************************
** 投稿ページのタイトルを中央寄せ
************************************/
.single .entry-title {
text-align: center;
}
/************************************
** 固定ページのスタイル
************************************/
.titlecover {
  background-color: #1a1e1d; /* 例：薄いグレー */
}
/************************************
** 固定ページの公開日非表示
************************************/
.post-3 .date-tags,
.post-26 .date-tags,
.post-28 .date-tags,
.post-30 .date-tags,
.post-32 .date-tags,
.post-35 .date-tags,
.post-37 .date-tags,
.post-41 .date-tags,
.post-43 .date-tags {
display: none;
}

@media (max-width: 768px) { /* 768px以下（モバイル）の画面幅に適用 */
  .logo-header.logo-image img {
    width: 80% !important; /* ロゴ画像の幅を80%に縮小 */
    height: auto !important; /* 高さを自動調整 */
  }
}

#appeal {
  background-image: url('http://kurucanaha.jp/wp-content/uploads/2025/02/top.png');
  background-size: cover;
  background-position: center;
  height: 800px; /* 例：PCでの高さを設定 */
}

/* モバイル用の画像（480px以下の場合） */
@media (max-width: 480px) {
  #appeal {
    background-image: url('http://kurucanaha.jp/wp-content/uploads/2025/03/main_sp1.png');
    height: 550px; /* 例：モバイルでの高さを設定 */
  }
}

.car01 {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('http://kurucanaha.jp/wp-content/uploads/2025/03/アルファード.png');
    height: 600px;
}

.car01 img {
    display: none !important;
    width: 100%;
    height: auto;
}

/* モバイル用の背景画像（480px以下の場合） */
@media (max-width: 480px) {
    .car01 {
        background-image: url('http://kurucanaha.jp/wp-content/uploads/2025/03/アルファード_sp.png');
        height: 350px;
    }
}

.car02 {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('http://kurucanaha.jp/wp-content/uploads/2025/03/ハリアー-e1742368764289.png');
    height: 600px;
}

.car02 img {
    display: none !important;
    width: 100%;
    height: auto;
}

/* モバイル用の背景画像（480px以下の場合） */
@media (max-width: 480px) {
    .car02 {
        background-image: url('http://kurucanaha.jp/wp-content/uploads/2025/03/ハリアー_sp.png');
        height: 350px;
    }
}

/* PCでの4列表示 */
.wp-block-columns.soubi .wp-block-column {
    width: 25%; /* 各列の幅を25%に設定 */
}

/* スマホ（480px以下）での2列表示 */
@media (max-width: 480px) {
    .wp-block-columns.soubi {
        display: grid; /* グリッドレイアウトに変更 */
        grid-template-columns: 1fr 1fr; /* 2列のグリッド */
        gap: 20px; /* 列間の隙間を設定（必要に応じて調整） */
    }

    .wp-block-columns.soubi .wp-block-column {
        width: auto; /* 列の幅を自動調整 */
    }
}

/* PCでの4列表示 */
.wp-block-columns.guidtop .wp-block-column {
    width: 25%; /* 各列の幅を25%に設定 */
}

/* スマホ（480px以下）での2列表示 */
@media (max-width: 480px) {
    .wp-block-columns.guidtop {
        display: grid; /* グリッドレイアウトに変更 */
        grid-template-columns: 1fr 1fr; /* 2列のグリッド */
        gap: 20px; /* 列間の隙間を設定（必要に応じて調整） */
    }

    .wp-block-columns.guidtop .wp-block-column {
        width: auto; /* 列の幅を自動調整 */
    }
}

/* PCでの4列表示 */
.wp-block-columns.cartop .wp-block-column {
    width: 25%; /* 各列の幅を25%に設定 */
}

/* スマホ（480px以下）での2列表示 */
@media (max-width: 480px) {
    .wp-block-columns.guidtop {
        display: grid; /* グリッドレイアウトに変更 */
        grid-template-columns: 1fr 1fr; /* 2列のグリッド */
        gap: 20px; /* 列間の隙間を設定（必要に応じて調整） */
    }

    .wp-block-columns.cartop .wp-block-column {
        width: auto; /* 列の幅を自動調整 */
    }
}

/* PCでの4列表示 */
.wp-block-columns.guidstep .wp-block-column {
    width: 25%; /* 各列の幅を25%に設定 */
}

/* スマホ（480px以下）での2列表示 */
@media (max-width: 480px) {
    .wp-block-columns.guidstep {
        display: grid; /* グリッドレイアウトに変更 */
        grid-template-columns: 1fr 1fr; /* 2列のグリッド */
        gap: 20px; /* 列間の隙間を設定（必要に応じて調整） */
    }

    .wp-block-columns.guidstep .wp-block-column {
        width: auto; /* 列の幅を自動調整 */
    }
}


/* レンタカー検索フォームのスタイル */
#SearchWrap {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 500px; /* 変更: 固定幅をmax-widthに */
    width: 100%; /* 追加: スマホ時に幅を調整 */
    margin: auto;
}

/* タイトルスタイル */
.search-title {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 10px;
    font-size: 18px;
    border-radius: 8px 8px 0 0;
    margin-bottom: 15px;
}

/* 検索フォームの各コンテナ */
.search-container {
    margin-bottom: 15px;
}

/* 出発日時と返却日時を並列配置（PC版） */
.search-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.search-container label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.search-container select,
.search-container input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

/* 検索ボタン */
.search-button {
    width: 100%;
    background-color: #0073aa;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
}

.search-button:hover {
    background-color: #005a87;
}

/* 480px以下（スマホ版） */
@media screen and (max-width: 480px) {
    /* 検索フォームの幅を調整 */
    #SearchWrap {
        width: 90% !important; /* 画面幅に合わせる */
        padding: 10px !important;
    }

    /* 出発日時・返却日時を縦並びに */
    .search-row {
        display: block !important; /* フレックスを解除 */
    }

    .search-container {
        width: 100% !important; /* 幅を最大化 */
    }

    /* タップしやすいサイズに調整 */
    .search-container select,
    .search-container input {
        font-size: 18px !important;
        padding: 10px !important;
    }

    .search-button {
        font-size: 18px !important;
        padding: 12px !important;
    }
}

.entry-footer {
    display: none;
}

@media (max-width: 767px) {
    #car { margin: 0 !important; padding: 0.75em 1em !important; }
    #car br { display: none !important; }
    .wp-block-group:has(#car) {
        justify-content: flex-start !important;
        gap: 0 !important;
        --wp--style--block-gap: 0 !important;
    }
    .cartop.wp-block-columns {
        margin-top: 0 !important;
        gap: 0 !important;
        row-gap: 0 !important;
    }
    .cartop .wp-block-spacer { display: none !important; }
    .cartop .wp-block-column { margin-bottom: 0 !important; }
}