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

/* ===== 買い目 横並びセット化 ===== */

.father-form .acf-field[data-name^="shubetsu"],
.father-form .acf-field[data-name^="jiku"],
.father-form .acf-field[data-name^="aite"] {
    display: inline-block;
    width: 32%;
    margin-right: 1%;
    vertical-align: top;
    box-sizing: border-box;
}

.father-form .acf-field[data-name^="aite"] {
    margin-right: 0;
    margin-bottom: 25px;
    border-bottom: 2px dashed #ccc;
    padding-bottom: 20px;
}

@media (max-width: 768px) {
  .father-form .acf-field[data-name^="shubetsu"],
  .father-form .acf-field[data-name^="jiku"],
  .father-form .acf-field[data-name^="aite"] {
    width: 100%;
    margin-right: 0;
    display: block;
  }
}
/* ===== 買い目 横ズレ修正 ===== */

/* 3つを横並び固定 */
.father-form .acf-field[data-name="shubetsu1"],
.father-form .acf-field[data-name="jiku1"],
.father-form .acf-field[data-name="aite1"],
.father-form .acf-field[data-name="shubetsu2"],
.father-form .acf-field[data-name="jiku2"],
.father-form .acf-field[data-name="aite2"],
.father-form .acf-field[data-name="shubetsu3"],
.father-form .acf-field[data-name="jiku3"],
.father-form .acf-field[data-name="aite3"] {
    float: left;
    width: 33.333%;
    box-sizing: border-box;
}

/* 3つごとに改行 */
.father-form .acf-field[data-name="aite1"],
.father-form .acf-field[data-name="aite2"],
.father-form .acf-field[data-name="aite3"] {
    clear: both;
    border-bottom: 2px dashed #ccc;
    padding-bottom: 20px;
    margin-bottom: 25px;
}

@media (max-width: 768px) {
  .father-form .acf-field[data-name^="shubetsu"],
  .father-form .acf-field[data-name^="jiku"],
  .father-form .acf-field[data-name^="aite"] {
    float: none;
    width: 100%;
  }
}

/* =============================
   フォーム全体
============================= */
.father-form {
    max-width: 900px;
    margin: 40px auto;
}

/* =============================
   買い目を縦並び
============================= */
.father-form .acf-field[data-name="kaime"] > .acf-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 区切り線を消す */
.father-form .acf-field {
    border-bottom: none !important;
}

/* =============================
   本命・対抗・単穴 入力幅
============================= */
.father-form .acf-field[data-name="honmei_uma"] input,
.father-form .acf-field[data-name="taikou_uma"] input,
.father-form .acf-field[data-name="tanana_uma"] input {
    width: 60%;
    max-width: 400px;
}

/* =============================
   個別フィールド幅調整
============================= */

/* 的中 */
.acf-field[data-name="tekichuu"] select {
    max-width: 120px;
}


/* 競馬場 */
.acf-field[data-name="race_place"] select {
    max-width: 120px;
}

/* レース名 */
.acf-field[data-name="race_name"] {
    max-width: 350px;
}

.acf-field[data-name="race_name"] select {
    width: 100%;
}

/* 配当 */
.acf-field[data-name="haitou"] {
    max-width: 200px;
}

.acf-field[data-name="haitou"] input {
    width: 100%;
}
/* =============================
   レース基本情報 2列
============================= */
.acf-field-group[data-name="race_basic"] > .acf-fields {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 30px;
}

.acf-field-group[data-name="race_basic"] .acf-field {
    border-top: none !important;
}

/* レース日を小さく */
.acf-field-group[data-name="race_basic"]
.acf-field[data-name="race_date"] .acf-input input {
    width: 160px !important;
    max-width: 160px !important;
}

/* race_basic を2列にする */
.acf-field-group[data-name="race_basic"] > .acf-input > .acf-fields {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 30px;
}

/* 上の線を消す */
.acf-field-group[data-name="race_basic"] .acf-field {
    border-top: none !important;
}

/* ===== 結果エリア ===== */
.acf-field-group[data-name="result_section"] {
    background: #f3f3f3;
    padding: 30px;
    margin-top: 50px;
    border-radius: 10px;
}

/* 結果タイトル強調 */
.acf-field-group[data-name="result_section"] > .acf-label label {
    font-size: 18px;
    font-weight: bold;
}


/* 送信ボタンを少し下に */
.acf-form-submit {
    margin-top: 40px;
}

/* ===== 送信ボタンをボタンらしくする ===== */
.acf-form-submit {
    text-align: center;   /* 中央寄せ */
    margin-top: 50px;
}

.acf-form-submit input[type="submit"] {
    width: auto !important;      /* 横いっぱいを解除 */
    display: inline-block;
    padding: 14px 40px;
    background: #222;
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

/* ホバー演出 */
.acf-form-submit input[type="submit"]:hover {
    background: #444;
}

/* ===== 基本情報＋予想を同じ紫カードに ===== */
.acf-field-group[data-name="race_basic"],
.acf-field-group[data-name="yosou_section"] {
    background: #f4f0ff;
    padding: 35px;
    border: 2px solid #e0d8ff;
}

/* 上だけ角丸 */
.acf-field-group[data-name="race_basic"] {
    border-radius: 14px 14px 0 0;
    border-bottom: none; /* 下の枠線消す */
}

/* 下だけ角丸 */
.acf-field-group[data-name="yosou_section"] {
    border-radius: 0 0 14px 14px;
}


.acf-field-group[data-name="result_section"] {
    margin-top: 60px !important;
}

/* ===== グループタイトル共通デザイン ===== */
.acf-field-group[data-name="race_basic"] > .acf-label label,
.acf-field-group[data-name="yosou_section"] > .acf-label label,
.acf-field-group[data-name="result_section"] > .acf-label label {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
}

.acf-field-group[data-name="race_basic"] > .acf-label,
.acf-field-group[data-name="yosou_section"] > .acf-label,
.acf-field-group[data-name="result_section"] > .acf-label {
    margin-bottom: 20px;
}

.acf-field-group[data-name="race_basic"] > .acf-label label,
.acf-field-group[data-name="yosou_section"] > .acf-label label,
.acf-field-group[data-name="result_section"] > .acf-label label {
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}

.handwritten-memo {
  margin: 30px 0;
  text-align: center;
}

.handwritten-memo img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}