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

/* 大きな角丸（PC・スマホ共通） */
.kimiiro-rounded {
    border-radius: 24px;   /* 角の丸み具合 */
    overflow: hidden;      /* 中身がはみ出さないように */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* ほんのり影をつける */
}

/* もしスマホだけ少し角丸を小さくしたい場合 */
@media screen and (max-width: 600px) {
    .kimiiro-rounded {
        border-radius: 16px;
    }
}

/* --- Contact Form 7 デザインカスタマイズ --- */

/* フォーム全体の余白調整 */
.kimiiro-contact-form {
    max-width: 700px;
    margin: 0 auto;
    padding: 10px;
}

/* 各項目の間隔 */
.kimiiro-contact-form .form-row {
    margin-bottom: 2.5em;
}

/* ラベルデザイン */
.kimiiro-contact-form label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.8em;
    color: #444444; /* テキストカラー */
    font-family: 'M PLUS Rounded 1c', sans-serif; /* 丸ゴシック */
}

/* 必須・任意バッジ */
.kimiiro-contact-form .badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: middle;
    color: #fff;
    font-weight: normal;
}
.kimiiro-contact-form .badge.required {
    background-color: #FF9F5F; /* アクセントオレンジ */
}
.kimiiro-contact-form .badge.any {
    background-color: #9CA3AF; /* グレー */
}

/* 入力フィールド (テキスト・メール・電話・テキストエリア) */
.kimiiro-contact-form input[type="text"],
.kimiiro-contact-form input[type="email"],
.kimiiro-contact-form input[type="tel"],
.kimiiro-contact-form textarea {
    width: 100%;
    padding: 15px;
    background-color: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px; /* 大きめの角丸 */
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* フォーカス時のアニメーション */
.kimiiro-contact-form input:focus,
.kimiiro-contact-form textarea:focus {
    background-color: #fff;
    border-color: #00BF63; /* メインカラー(緑) */
    box-shadow: 0 0 0 4px rgba(0, 191, 99, 0.1); /* ふわっと光る */
    outline: none;
}

/* ラジオボタンの配置 */
.kimiiro-contact-form .wpcf7-list-item {
    display: block; /* 縦並びにする */
    margin: 0 0 10px 0;
}
.kimiiro-contact-form .wpcf7-list-item-label {
    padding: 10px 15px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    display: block;
    cursor: pointer;
    transition: background 0.2s;
}
.kimiiro-contact-form .wpcf7-list-item-label:hover {
    background-color: #FFFDF5; /* 薄いベージュ */
}

/* 送信ボタン */
.kimiiro-contact-form input[type="submit"] {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 40px auto 0;
    padding: 15px;
    background-color: #00BF63; /* メインカラー */
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 50px; /* 丸いボタン */
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

/* 送信ボタンホバー時 */
.kimiiro-contact-form input[type="submit"]:hover {
    background-color: #008f4a; /* 少し濃い緑 */
    transform: translateY(-2px); /* 浮き上がる */
    box-shadow: 0 8px 12px rgba(0,0,0,0.15);
}

/* SWELLのデフォルトスタイル調整 */
.kimiiro-contact-form p {
    margin-bottom: 0;
}