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

/*▼▼▼Contact Form 7*/
/* フォーム全体の外枠デザイン */
.wp-block-contact-form-7-contact-form-selector {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 40px;
}
/* 項目見出し：テキストを太字 */
.wpcf7-form label {
font-weight: 700;
}
/* 承諾文章：normal */
.wpcf7-list-item-label {
font-weight: normal;
}
/* フォームの下に余白 */
.wpcf7-form p {
margin-bottom: 30px;
}
/* フォームのカスタマイズ（種別以外） */
.wpcf7-text, .wpcf7-email, .wpcf7-tel, .wpcf7-textarea {
width: 100%;
background-color: #fdfdfd;
margin-top: 10px;
padding: 16px 18px;
border: 1px solid #ddd;
border-radius: 10px;
}
/* フォームのカスタマイズ （種別）*/
.wpcf7-radio .wpcf7-list-item {
margin-top: 10px;
}
.wpcf7-radio .wpcf7-list-item.first {
    margin-left: 0;
}
/* 送信ボタンのカスタマイズ */
.wpcf7-submit, .wpcf7-previous {
display: inline-block;
width: 100%;
padding: 1em;
border-radius: 50px;
background: var(--color_main);
font-size: 16px;
font-weight: 700;
letter-spacing: 0.2em;
line-height: 1;
color: #fff;
}
/* 送信ボタンが入っている段落のみ下部マージンを0にする */
.wpcf7-form p:has(.wpcf7-submit) {
margin-bottom: 0 !important;
}
/* 必須マーク */
.required {
margin-left: 8px;	
color: #fff;
background: var(--color_main);
padding: 3px 8px;
border-radius: 50px;
font-size: 12px;
}
/* 任意マーク */
.optional {
margin-left: 8px;
color: #777;	
background: #eee;
padding: 3px 8px;
border-radius: 50px;
font-size: 12px;
}
/* リンク */
.wpcf7 a {
    color: var(--color_main);
    font-weight: 600;
    text-decoration: none;
}
.wpcf7 a:hover {
    text-decoration: underline;
}

/* レスポンシブ（600px以下） */
@media screen and (max-width: 600px) {
/* スマホ（600px以下）でお問い合わせ種別を縦並びにする */
  .wpcf7-radio {
    display: flex;
    flex-direction: column; /* 縦並びにする */
  }
  .wpcf7-radio .wpcf7-list-item {
    margin-left: 0; /* 横並び時の左余白をリセット */
  }
	
/* スマホ（600px以下）でフォーム全体の余白を小さくする */
  .wp-block-contact-form-7-contact-form-selector {
    padding: 20px 15px !important;
  }
}