/*
 * サービス・料金／スタッフ紹介／お問い合わせ。
 * WordPress 版では Elementor で作っていたページ。見た目を同じ寸法で写したもの。
 */

/* タイトルの帯 */
.sl-p-hero { position: relative; display: flex; align-items: center; justify-content: center; height: 150px; background-repeat: repeat; background-size: auto; background-position: 0 0; }
.sl-p-hero::before { content: ""; position: absolute; inset: 0; background: rgba(2, 1, 1, .5); }
.sl-p-hero h1 { position: relative; margin: 0; color: #fff; font-family: Roboto, sans-serif; font-size: 30px; font-weight: 600; line-height: 1.3; }
.sl-p-hero--short { height: 120px; }
.sl-p-hero--bottom { background-position: 50% 100%; }
.sl-p-spacer { height: 50px; }

/* 画像と文章を左右に並べる区画 */
.sl-p-row { display: flex; max-width: 1140px; margin: 0 auto; }
.sl-p-row > * { width: 50%; }
.sl-p-media img { display: block; width: 100%; height: auto; }
.sl-p-text { padding: 20px; }
.sl-p-heading { margin: 0; color: #6ec1e4; font-family: Roboto, sans-serif; font-size: 30px; font-weight: 600; line-height: 1.3; }
.sl-p-gap-s { height: 10px; }
.sl-p-gap-l { height: 50px; }

/* チェックの付いた一覧 */
.sl-p-list { margin: 0; padding: 0; list-style: none; }
.sl-p-list li { display: flex; align-items: center; }
.sl-p-list .sl-p-icon { display: flex; width: 17.5px; flex-shrink: 0; }
.sl-p-list svg { width: 14px; height: 14px; fill: #6ec1e4; }
.sl-p-list span:last-child { padding-left: 5px; color: #54595f; font-family: Roboto, sans-serif; }

/* スタッフ紹介 */
.sl-p-staff .sl-p-media { width: 43%; }
.sl-p-staff .sl-p-text { width: 50%; }
.sl-p-staff .sl-p-text, .sl-p-staff .sl-p-text a { color: #7a7a7a; font-family: Roboto, sans-serif; }
.sl-p-staff .sl-p-text a { text-decoration: none; }
.sl-p-romaji { margin: 0; }
.sl-p-subheading { margin: 0 0 6px; color: #000; font-family: Roboto, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.2; }
.sl-p-profile { padding-top: 15px; }
.sl-p-profile p { margin: 0 0 28px; }
.sl-p-books { display: flex; }
.sl-p-books a { display: block; width: 20%; padding: 5px 5px 13px; }
.sl-p-books img { display: block; width: auto; max-width: 100%; height: auto; }

/* お問い合わせ */
.sl-p-contact { padding: 0 30px; }
.sl-p-form { max-width: 800px; margin: 0 auto; }
.sl-p-form p { margin: 0 0 20px; }
.sl-p-form label { display: block; padding-top: 6px; color: #111827; font-size: 14px; font-weight: 500; line-height: 20px; }
.sl-p-form input[type="text"], .sl-p-form input[type="email"], .sl-p-form textarea { display: block; width: 100%; margin-top: 4px; padding: 12px 16px; border: 1px solid #bbb; border-radius: 0; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); color: #475569; font: inherit; font-size: 14px; font-weight: 500; line-height: 20px; }
.sl-p-form input[type="text"], .sl-p-form input[type="email"] { height: 40px; }
.sl-p-form textarea { height: 226px; resize: vertical; }
.sl-p-form label:has(textarea) { padding-bottom: 4px; }
.sl-p-form input:focus, .sl-p-form textarea:focus { outline: 3px solid #475569; outline-offset: 0; }
.sl-p-form button { padding: 15px 30px; border: 0; border-radius: 0; background: #154a6e; color: #fff; font: inherit; font-size: 16px; line-height: 30.4px; cursor: pointer; }
.sl-p-form button:disabled { opacity: .6; cursor: wait; }
.sl-p-form-message { margin: 0 0 20px; padding: 12px 16px; border: 2px solid #46b450; font-size: 14px; }
.sl-p-form-message[data-state="error"] { border-color: #dc3232; }
.sl-p-trap { position: absolute; left: -9999px; }

@media (max-width: 767px) {
  .sl-p-hero h1 { font-size: 22.8px; }
  .sl-p-row { flex-direction: column; }
  .sl-p-row > *, .sl-p-staff .sl-p-media, .sl-p-staff .sl-p-text { width: 100%; }
  .sl-p-row .sl-p-media { order: -1; }
  .sl-p-heading { font-size: 22.8px; }
  .sl-p-subheading { font-size: 18.24px; }
  .sl-p-books { flex-wrap: wrap; }
  .sl-p-books a { width: 33.33%; }
  .sl-p-books img { margin: 0 auto; }
}