@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){
  /*必要ならばここにコードを書く*/
}

/* コメント送信ボタンの文字色・背景色が見えにくいので修正 */
.comment-form .form-submit input {
  background-color: #edfaff;
  border-color: #72c7e6;
  border: 1px solid #ddd;
  color: #333;
}

body {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 16px;
}

.article h2 {
  border-left: 6px solid #007acc;
  background-color: #f0f8ff;
  padding: 0.5em;
  margin: 1.5em 0 1em;
}

.article h3 {
  border-bottom: 2px dotted #ccc;
  padding-bottom: 0.3em;
  margin: 1.2em 0 0.8em;
}

.sidebar .widget-title {
  background-color: #007acc;
  color: #fff;
  padding: 0.5em;
  border-radius: 4px;
}

/* ============================
   SaintJordi form theme tokens
   必要なら色だけここで調整
================================ */
:root {
  --sj-bg:        #ffffff;
  --sj-text:      #333333;
  --sj-border:    #d7d7d7;
  --sj-muted:     #efefef;
  --sj-field:     #eff1f5;
  --sj-accent:    #09b555;   /* 送信ボタンなどのアクセント */
  --sj-required:  #ff9393;
  --sj-error:     #e92323;
}

/* 全体 */
.inquiry { 
  margin-bottom: 30px;
  border: 1px solid var(--sj-border);
  line-height: 1.6;
  background: var(--sj-bg);
  color: var(--sj-text);
  width: 100%;
  border-collapse: collapse;
}

/* 行・セル */
.inquiry tr { border: 0 !important; }
.inquiry th {
  text-align: left;
  font-size: 14px;
  color: #444;
  padding: 1em .75em;
  width: 0;               /* ラベル側は圧縮 */
  white-space: nowrap;
  background: var(--sj-muted);
  border: 1px solid var(--sj-border);
}
.inquiry td {
  padding: .75em;
  border: 1px solid var(--sj-border);
  background: var(--sj-bg);
}

/* 必須タグ */
.haveto{
  font-size: 12px;
  padding: 4px 6px;
  background: var(--sj-required);
  color: #fff;
  border-radius: 3px;
  margin-right: 6px;
  font-weight: normal;
}

/* 入力欄 */
.inquiry input,
.inquiry select,
.inquiry textarea {
  width: 100%;
  margin: 6px 0 0;
  background: var(--sj-field);
  border: none;
  padding: .5em .6em;
  border-radius: 4px;
  box-sizing: border-box;
  font: inherit;
}
.inquiry textarea { min-height: 10em; }

/* 送信ボタン */
.wpcf7-submit{
  display: block;
  margin: 14px auto 10px;
  padding: 1em 0;
  width: clamp(220px, 80%, 520px);
  background: var(--sj-accent);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: opacity .25s ease, transform .02s ease-in-out;
}
.wpcf7-submit:hover{ opacity: .9; }
.wpcf7-submit:active{ transform: translateY(1px); }

/* CF7 エラーメッセージ */
.wpcf7-not-valid-tip { color: var(--sj-error); }
.screen-reader-response { display: none; }

/* Turnstile の余白（ボタン直前で少し余白） */
.wpcf7-form .wpcf7-turnstile { margin: 8px 0 6px; }

/* スマホ最適化 */
@media (max-width: 560px) {
  .inquiry th, .inquiry td {
    display: block;
    width: 100%;
    border-width: 0 0 1px 0;
  }
  .inquiry th { 
    border-top: 1px solid var(--sj-border);
    border-bottom: 0;
  }
  .haveto { font-size: 3.4vw; position: relative; bottom: 1px; }
  .wpcf7-submit { width: 100%; margin-bottom: 26px; }
}

/* 余計な <p> の影響を弱める（display:inline は崩れやすいので margin リセットに） */
.wpcf7-form p { margin: 0; }