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

/*ーーーーーーーーAbutページのキャラ紹介部分ーーーーー*/

/* ベース */
.character-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 3rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 2rem;
}
.character-image img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.character-text h3 {
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}
.character-quote {
  font-style: italic;
  color: #555;
  margin-top: 0.5rem;
}
.characters-intro,
.characters-end {
  margin: 2rem 0 3rem;
}

/* 交互：偶数番目の行は左右入替え */
.character-row:nth-of-type(even) {
  direction: rtl;               /* 並びだけ反転 */
}
.character-row:nth-of-type(even) > * {
  direction: ltr;               /* 文字方向は戻す */
}

/* タブレット以下：縦積み */
@media (max-width: 960px) {
  .character-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .character-row:nth-of-type(even) {
    direction: ltr;
  }
}

/* 画像を少し小さめに（任意） */
@media (min-width: 961px) {
  .character-image { max-width: 420px; }
}
/*ーーーーーーーーAbutページのキャラ紹介部分　ENDーーーーー*/


/*ーーーーーーーーコンタクトフォーム（仮）ーーーーー*/
/* ===== Contact Form 7 base ===== */
.contact-form.-stack {
  --cf7-max: 760px;
  --cf7-gap: 18px;
  --cf7-label: #222;
  --cf7-text: #111;
  --cf7-muted: #666;
  --cf7-border: #dcdcdc;
  --cf7-focus: #3b82f6; /* 適宜ブランド色に */
  --cf7-danger: #dc2626;
  --cf7-success: #16a34a;
  --cf7-bg: #fff;
}

.contact-form.-stack {
  max-width: var(--cf7-max);
  margin: 0 auto;
  padding: 24px 16px;
  background: var(--cf7-bg);
}

.contact-form .cf7-field {
  display: block;
  margin-bottom: var(--cf7-gap);
}

.contact-form .cf7-label {
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--cf7-label);
  line-height: 1.4;
}

/* 必須マーク（.is-required が付いたフィールド） */
.contact-form .cf7-field.is-required .cf7-label::after {
  content: " *";
  color: var(--cf7-danger);
  margin-left: 4px;
}

/* テキスト系 */
.contact-form .input-text,
.contact-form .input-textarea,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 14px;
  border: 1px solid var(--cf7-border);
  border-radius: 8px;
  color: var(--cf7-text);
  box-sizing: border-box;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.contact-form textarea,
.contact-form .input-textarea {
  min-height: 160px;
  resize: vertical;
}

/* フォーカス */
.contact-form .input-text:focus,
.contact-form .input-textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--cf7-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf7-focus) 20%, transparent);
}

/* ラジオ */
.contact-form .radio-group .wpcf7-list-item {
  display: block;
  margin: 8px 0;
}
.contact-form .radio-group input[type="radio"] {
  transform: translateY(1px);
}
.contact-form .radio-group label {
  cursor: pointer;
}

/* 同意チェック */
.contact-form .cf7-accept {
  color: var(--cf7-text);
}
.contact-form .cf7-accept a {
  text-decoration: underline;
  color: inherit;
}

/* 送信ボタン */
.contact-form .btn-primary,
.contact-form input[type="submit"] {
  display: inline-block;
  padding: 12px 28px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: var(--cf7-focus);
  color: #fff;
  transition: filter .2s ease, transform .02s ease-in-out;
}
.contact-form .btn-primary:hover,
.contact-form input[type="submit"]:hover {
  filter: brightness(0.95);
}
.contact-form .btn-primary:active,
.contact-form input[type="submit"]:active {
  transform: translateY(1px);
}
.contact-form .cf7-actions {
  margin-top: 24px;
}

/* エラー／成功メッセージ */
.wpcf7 form .wpcf7-response-output {
  margin: 18px 0 0;
  border-radius: 8px;
  padding: 12px 14px;
  border-width: 1px;
}
.wpcf7 form.invalid .wpcf7-response-output {
  border-color: var(--cf7-danger);
  color: var(--cf7-danger);
  background: #fff5f5;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--cf7-success);
  color: var(--cf7-success);
  background: #f4fff6;
}

/* 個別フィールドのエラー（CF7既定クラス） */
.wpcf7-not-valid {
  border-color: var(--cf7-danger) !important;
  background: #fffafa;
}
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: var(--cf7-danger);
  font-size: 13px;
}

/* スピナーの位置微調整 */
.wpcf7-spinner {
  margin-left: 10px;
}

/* 小さめ画面対応 */
@media (max-width: 480px) {
  .contact-form.-stack { padding: 20px 12px; }
  .contact-form .btn-primary,
  .contact-form input[type="submit"] { width: 100%; text-align: center; }
}
/*ーーーーーーーーコンタクトフォーム（仮）ENDーーーーー*/