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

/* =========================================
   /catalog/ password form (modern)
   ・説明〜入力〜注意書き の背面をグレー（panel）
   ・input自体はホワイトのまま
   ・発行フォームはホワイト
========================================= */

.hiyori-passwrap{
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* カード全体（白） */
.hiyori-passcard{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 22px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* タイトル */
.hiyori-pass-title{
  margin: 0 0 12px;
  font-size: 20px;
  letter-spacing: .02em;
}

/* ===== 追加：説明〜入力〜注意書き をまとめるグレーパネル ===== */
.hiyori-passpanel{
  background: rgba(0,0,0,.05);
  padding: 14px 16px;
  border-radius: 12px;
}

/* 文章要素は “グレー二重” を防ぐため透明化 */
.hiyori-passpanel .hiyori-pass-lead,
.hiyori-passpanel .hiyori-passnote{
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* 説明文 */
.hiyori-pass-lead{
  margin: 0 0 14px;
  line-height: 1.6;
  opacity: .90;
}

/* 注意書き */
.hiyori-passnote{
  margin: 14px 0 0;
  font-size: 13px;
  opacity: .85;
}

/* ===== 入力エリア（panel上に載るが、inputは白） ===== */
.hiyori-passlabel{
  display: block;
  margin: 16px 0 8px;
  font-size: 13px;
  opacity: .85;
}

/* row自体は透明＝背面はpanelのグレーが見える */
.hiyori-passrow{
  display: flex;
  gap: 10px;
  align-items: center;
  background: transparent;
  padding: 0;
}

/* 入力ボックス（完全ホワイト） */
.hiyori-passinput{
  flex: 1;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff; /* ←ここが最重要 */
  transition: box-shadow .2s ease, border-color .2s ease;
}

.hiyori-passinput:focus{
  outline: none;
  border-color: rgba(0,0,0,.3);
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}

/* 閲覧ボタン */
.hiyori-passbtn{
  height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #1e59e3;
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  transition: transform .15s ease, box-shadow .15s ease;
}

.hiyori-passbtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* 区切り線 */
.hiyori-divider{
  margin: 18px 0;
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.12), transparent);
}

/* ===== 発行フォーム（白） ===== */
.hiyori-issue{
  padding: 14px 14px 6px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}

.hiyori-issue-title{
  margin: 0 0 6px;
  font-size: 16px;
}

.hiyori-issue-lead{
  margin: 0 0 12px;
  font-size: 13px;
  opacity: .85;
}

/* CF7 */
.hiyori-cf7 .wpcf7-form input[type="text"],
.hiyori-cf7 .wpcf7-form input[type="email"],
.hiyori-cf7 .wpcf7-form input[type="tel"],
.hiyori-cf7 .wpcf7-form textarea{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 10px 12px;
  background: #fff;
}

.hiyori-cf7 .wpcf7-form input[type="submit"]{
  border-radius: 12px;
  padding: 12px 16px;
  background: orange;
  color: #fff;
  border: 0;
  font-weight: 700;
}

/* スマホ */
@media (max-width: 600px){
  .hiyori-passrow{
    flex-direction: column;
  }
  .hiyori-passbtn{
    width: 100%;
  }
}