@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 全体に適用 */
body {
    font-family: 'Zen Maru Gothic', sans-serif !important;
    letter-spacing: 0.05em;
}

/* ====================================
   汎用クラス: 角丸と影 (u-radius)
   これをつけるだけで、画像もカラムも丸くなる
   ==================================== */

/* 1. 基本設定（グループブロックや単体要素用） */
.u-radius {
    border-radius: 8px !important;
}

/* 2. 画像ブロックの場合（中のimgタグを直接丸くする） */
.wp-block-image.u-radius img,
.u-radius img {
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* ほんのり影 */
    transition: transform 0.3s ease;
}

/* 画像ホバー時のふわっと効果（不要なら削除可） */
.u-radius img:hover {
    transform: translateY(-5px);
}

/* 3. リッチカラムの場合（親につけると、中のカラム達が丸くなる） */
.wp-block-loos-rich-column.u-radius {
    /* 親自体の装飾はリセット */
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.wp-block-loos-rich-column.u-radius .c-richColumn__col {
    /* 中のカラムを丸くする */
    border-radius: 8px !important;
    overflow: hidden; /* 中身のはみ出し防止 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* 個別に影 */
    background-color: #fff; /* 背景がないと影が見えないので白を入れる */
}

/* ====================================
   洗練されたお問い合わせフォーム
   ==================================== */

/* フォーム全体の最大幅と中央寄せ */
.p-contact-form {
    max-width: 700px;
    margin: 0 auto;
    font-family: 'Zen Maru Gothic', sans-serif;
}

/* 各項目の余白 */
.p-contact-item {
    margin-bottom: 35px;
}

/* ラベルのデザイン */
.p-contact-label {
    display: block;
    font-weight: 700;
    color: #5D4037; /* ウッディブラウン */
    margin-bottom: 10px;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

/* 必須バッジ */
.p-contact-badge {
    background-color: #FFB74D; /* サニーオレンジ */
    color: #fff;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: 10px;
    vertical-align: text-bottom;
    font-weight: normal;
}

/* 入力欄（テキスト・メール・電話・テキストエリア） */
.p-contact-form input[type="text"],
.p-contact-form input[type="email"],
.p-contact-form input[type="tel"],
.p-contact-form textarea,
.p-contact-form select {
    width: 100%;
    background-color: #f9f9f9; /* わずかにグレーにして優しさを出す */
    border: 2px solid #eee; /* 薄い枠線 */
    border-radius: 12px; /* 大きめの角丸 */
    padding: 15px;
    font-size: 1rem;
    transition: all 0.3s ease;
    color: #333;
}

/* 入力欄をクリック（フォーカス）した時のデザイン */
.p-contact-form input:focus,
.p-contact-form textarea:focus,
.p-contact-form select:focus {
    background-color: #fff;
    border-color: #8BC34A; /* メインカラー（緑） */
    box-shadow: 0 0 0 3px rgba(139, 195, 74, 0.2); /* ふわっと光る */
    outline: none;
}

/* ラジオボタンの配置 */
.p-contact-radio .wpcf7-list-item {
    display: block;
    margin: 0 20px 10px 0;
}
.p-contact-radio label {
    cursor: pointer;
}

/* プライバシーポリシー同意エリア */
.p-contact-privacy {
    text-align: center;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

/* 送信ボタンの親要素 */
.p-contact-submit {
    text-align: center;
}

/* 送信ボタン本体のデザイン（緑に変更） */
.p-contact-form input[type="submit"] {
    background-color: #8BC34A; /* メインカラーの緑 */
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 15px 60px;
    border: none;
    border-radius: 50px; /* 丸いボタン */
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(139, 195, 74, 0.4); /* 緑の影 */
    transition: all 0.3s;
    width: auto; /* 幅をなりゆきに */
    display: inline-block;
}

/* 送信ボタンホバー時 */
.p-contact-form input[type="submit"]:hover {
    background-color: #7CB342; /* 少し濃い緑へ変化 */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(124, 179, 66, 0.4);
}

/* スマホ対応（ボタン幅いっぱい） */
@media (max-width: 600px) {
    .p-contact-form input[type="submit"] {
        width: 100%;
    }
}

/* グループブロックの高さを親要素に合わせる */
.fit-height {
    height: 100%;
}