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

/* ===== モノログ お問い合わせフォーム ===== */
.wpcf7 {
  --mlg-accent: #2f6df6;
  --mlg-accent-dark: #2456c9;
  --mlg-ink: #1f2329;
  --mlg-muted: #6b7280;
  --mlg-border: #d8dde3;
  --mlg-radius: 10px;

  max-width: 640px;
  margin: 0 auto;
}

.wpcf7-form p { margin: 0 0 1.25rem; }

.wpcf7-form > p > label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--mlg-ink);
  line-height: 1.7;
}

.wpcf7-form .req {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background: #e0405e;
  border-radius: 4px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.4rem;
  padding: 0.75rem 0.9rem;
  font-size: 16px;
  font-family: inherit;
  color: var(--mlg-ink);
  background: #fff;
  border: 1px solid var(--mlg-border);
  border-radius: var(--mlg-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.wpcf7-form textarea { min-height: 160px; resize: vertical; }

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--mlg-accent);
  box-shadow: 0 0 0 3px rgba(47,109,246,.15);
}

.wpcf7-form ::placeholder { color: #9aa2ad; }

.wpcf7-acceptance .wpcf7-list-item { margin: 0; }

.wpcf7-acceptance label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--mlg-ink);
  cursor: pointer;
  padding: 0.85rem 1rem;
  background: #f6f8fb;
  border: 1.5px solid var(--mlg-border);
  border-radius: var(--mlg-radius);
  transition: border-color .15s ease, background .15s ease;
}

.wpcf7-acceptance label:hover {
  border-color: var(--mlg-accent);
  background: #eef3fe;
}

.wpcf7-acceptance input[type="checkbox"] {
  margin: 0;
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--mlg-accent);
  flex: none;
  cursor: pointer;
}

.wpcf7-acceptance a {
  color: var(--mlg-accent);
  text-decoration: underline;
  font-weight: 700;
}

.wpcf7-form > p:last-of-type { margin-bottom: 0; }

.wpcf7-submit {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 1rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--mlg-accent);
  border: none;
  border-radius: var(--mlg-radius);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(47,109,246,.32);
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}

.wpcf7-submit:hover:not([disabled]) {
  background: var(--mlg-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(47,109,246,.4);
}

.wpcf7-submit:active:not([disabled]) {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(47,109,246,.3);
}

.wpcf7-submit[disabled] {
  background: #aab2bd;
  cursor: not-allowed;
  box-shadow: none;
  opacity: .85;
}

.wpcf7-spinner { margin: 0 auto 0 0.5rem; }

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
  border-color: #e0405e;
  box-shadow: 0 0 0 3px rgba(224,64,94,.12);
}

.wpcf7-not-valid-tip {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: #e0405e;
}

.wpcf7-response-output {
  margin: 1.25rem 0 0 !important;
  padding: 0.85rem 1rem;
  border-radius: var(--mlg-radius);
  font-size: 0.9rem;
  border: 1px solid transparent;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #2f9e6f;
  background: #eaf7f0;
  color: #1d6b4c;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: #e0405e;
  background: #fdecef;
  color: #b3203f;
}