/*
Theme Name: Otoro Technology
Theme URI: https://otoro.technology/
Description: 株式会社大トロテクノロジー公式サイト用の統合WordPressテーマです。
Author: Otoro Technology
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: otoro-technology
*/

/*
 * assets/css/theme.css: Tailwind のユーティリティと、トップページの基本スタイル・アニメーション（ビルド成果物）。
 * style.css（このファイル）: WordPress のページ、フォーム、レスポンシブ調整。theme.css のあとに読み込まれる。
 *
 * 並び順
 *   基本 → 文字色ユーティリティの固定 → セクションをまたぐ文字色の固定 → 共通パーツ
 *   → 画面のまとまりごと（ヘッダー、トップページの各セクション、Contact、Cafestan、News 一覧、本文、ページ送り、検索）
 *   同じ強さのセレクタは後ろに書いたほうが勝つので、「固定」の 2 つは各セクションより前に置いている。
 *   セクションの順番を入れ替えるときは、表示が変わらないことを確かめること（npm run test:e2e と目視）。
 *
 * !important について
 *   Tailwind のユーティリティ（@layer 内）には、ここに書いた普通の宣言がそのまま勝つので !important は要らない。
 *   残している !important は、(1) 暗い地のページで子孫の文字を白にそろえる .text-white * に勝つ必要があるもの、
 *   (2) その .text-white * 自身、(3) JS が付けるインラインスタイルや、より強いセレクタの指定に勝つ必要があるもの。
 *
 * 文字の塗り（-webkit-text-fill-color）は指定しない。初期値の currentcolor のまま、color に従わせる。
 */

/* ==========================================================================
   基本（ページ全体、配色の固定）
   ========================================================================== */

html {
  supported-color-schemes: light;
}

body {
  background: var(--sea-deepest, #021f33);
  color: var(--foreground, #102030);
}

@media (max-width: 639px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
}

@media (prefers-color-scheme: dark) {
  :root,
  html,
  body {
    background-color: #021f33;
  }
}

/* OS やブラウザがダークモード・強制カラーでも、ライトと同じ配色で表示する。 */
html,
body {
  forced-color-adjust: none;
}

/* custom.css の :root はダークモードで色のトークンを切り替えるので、ライトの値に固定し直す。 */
:root,
html,
body {
  --foreground: #101820;
  --muted-foreground: #5c6b78;
  --sea-deep: #064a78;
  --sea-shallow: #7fd7ee;
  --sea-surface: #dff7ff;
  --accent: #d8423f;
  color-scheme: only light;
}

*,
*::before,
*::after {
  forced-color-adjust: none;
}

input,
select,
textarea,
button {
  color-scheme: only light;
}

/* ==========================================================================
   Tailwind の文字色ユーティリティの固定
   ========================================================================== */

/*
 * 文字色のクラスを付けた要素の子孫も、同じ色にそろえる（ダークモードでトークンが変わっても固定の色）。
 * 白の系統だけ !important。暗い地のページ（main.text-white など）の中で、各パーツの色指定より優先させている。
 * そのため、白い地のカードやボタンの中の文字は、下の各ルールで !important を付けて色を戻している。
 *
 * 例外: 本文（.otoro-entry-content）の中で、編集者が背景色を指定したブロック（.has-background）とカバーの中は
 * 白に固定しない（白い背景に白い文字になるため）。そこでの文字色は「本文」のセクションで決めている。
 * :where() で包んでいるのは、詳細度を元の .text-white *（0,1,0）のまま変えないため。
 */
.text-foreground,
.text-foreground * {
  color: #101820;
}

.text-muted-foreground,
.text-muted-foreground * {
  color: #5c6b78;
}

.text-sea-deep,
.text-sea-deep * {
  color: #064a78;
}

.text-sea-shallow,
.text-sea-shallow * {
  color: #7fd7ee;
}

.text-accent,
.text-accent * {
  color: var(--accent-text);
}

.text-white,
.text-white :where(:not(.otoro-entry-content :is(.has-background, .wp-block-cover), .otoro-entry-content :is(.has-background, .wp-block-cover) *)),
.text-white\/72,
.text-white\/72 *,
.text-white\/82,
.text-white\/82 :where(:not(.otoro-entry-content :is(.has-background, .wp-block-cover), .otoro-entry-content :is(.has-background, .wp-block-cover) *)) {
  color: #ffffff !important;
}

.text-white\/48,
.text-white\/48 * {
  color: rgba(255, 255, 255, 0.48) !important;
}

.text-white\/50,
.text-white\/50 * {
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-white\/60,
.text-white\/60 * {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ==========================================================================
   複数のセクションにまたがる文字色の固定
   ========================================================================== */

/*
 * 白い地のカード・ボタンの中の文字色。上の .text-white * に勝つよう !important を付けている。
 * 同じ色にそろえる要素をまとめて書いているので、セクションごとには分けていない。
 */
.otoro-contact-form-shell .otoro-cf7-field *,
.otoro-contact-form-shell .text-sea-deep,
.otoro-cafestan-install-card .otoro-section-cta,
.otoro-cafestan-install-card .otoro-section-cta * {
  color: var(--sea-deep, #064a78) !important;
}

.otoro-contact-form-shell .text-muted-foreground,
.otoro-cafestan-install-card .text-muted-foreground {
  color: var(--muted-foreground, #5c6b78) !important;
}

.otoro-site-header .otoro-header-segment,
.otoro-site-header .otoro-header-segment *,
.otoro-contact-form-shell h2,
.otoro-contact-form-shell .otoro-cf7-form {
  color: #101820 !important;
}

.otoro-site-header .text-muted-foreground,
.otoro-site-header .text-muted-foreground * {
  color: #5c6b78 !important;
}

/* 暗い地のページに置いた白いボタン（一覧へ戻る、ページ送りの現在地など）の文字。 */
main.text-white .otoro-section-cta,
main.text-white .otoro-section-cta *,
.otoro-post-row a,
.otoro-pagination .page-numbers.current *,
.otoro-pagination a.page-numbers:hover * {
  color: #064a78 !important;
}

.otoro-contact-form-shell .text-accent,
.otoro-cafestan-install-card .text-accent {
  color: var(--accent-text) !important;
}

/* ==========================================================================
   共通パーツ（ボタン、暗い地のページの文字色）
   ========================================================================== */

.otoro-section-cta {
  color-scheme: only light;
  color: var(--sea-deep, #084a78);
}

.site-depth-wrapper,
footer {
  color: #fff;
}

/*
 * 暗い地のページ（#0b78aa → #021f33 のグラデーション）に置くガラス調のカードの色。
 * --otoro-glass-deep: カードの地。テンプレート側の bg-sea-deep/45 と同じ濃さ。
 *   白い文字とのコントラストは、グラデーションの最も明るい位置（上端）でも 6.5:1、
 *   その上に白 12% のラベル（ジャンル名など）を重ねても 5.0:1。
 * --otoro-on-deep-accent: その上に置く水色の小さいラベル（同じ位置で 5.2:1）。
 */
:root {
  --otoro-glass-deep: color-mix(in oklab, var(--sea-deep, #064a78) 45%, transparent);
  --otoro-on-deep-accent: #c4eefa;
}

.overflow-visible {
  align-content: center;
}

/* ==========================================================================
   ヘッダー、ハンバーガーメニュー
   ========================================================================== */

.otoro-header-segment,
.otoro-header-segment a {
  color-scheme: only light;
}

.otoro-header-segment a {
  color: var(--foreground, #102030);
}

.otoro-header-segment,
.otoro-header-segment * {
  color: var(--foreground, #101820);
}

.otoro-header-segment .text-muted-foreground {
  color: var(--muted-foreground, #5c6b78);
}

/* 下層ページでは、最初から上部に固定する（動かさない）。 */
.otoro-site-header--subpage {
  --otoro-header-docked-top: 12px;
  --otoro-header-top: 12px !important;
  --otoro-header-stripe-color: rgba(255, 255, 255, 0.8);
  transform: none;
}

.otoro-site-header--subpage .otoro-header-buoy {
  animation: none;
}

.otoro-site-header--subpage .otoro-header-stripes {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0 8%,
    #fff 8% 92%,
    rgba(255, 255, 255, 0.8) 92% 100%
  );
}

/* ハンバーガーメニューの開閉ボタン（メインナビが出ない幅、lg 未満）。パネルは assets/css/src/mobile-menu.css。 */
@media (max-width: 1023px) {
  /* 三本線。幅を持たせないと線が描かれない。 */
  .otoro-site-header [data-otoro-menu-line] {
    display: block;
    width: 1.35rem;
  }

  .otoro-site-header .otoro-mobile-menu-control {
    border: 0;
    cursor: pointer;
  }
}

@media (max-width: 639px) {
  .otoro-site-header {
    padding-inline: 0.25rem;
  }

  .otoro-site-header .otoro-header-buoy {
    max-width: calc(100vw - 0.5rem);
    position: relative;
  }

  .otoro-site-header .otoro-header-buoy > div {
    position: relative;
    width: 100%;
    gap: 0.45rem;
    height: 3.7rem;
    padding-inline: 0.25rem;
  }

  .otoro-site-header .otoro-header-segment {
    min-height: 4rem;
    transform: translateY(-56px);
  }

  .otoro-site-header[data-otoro-header-docked="true"] .otoro-header-segment {
    transform: translateY(0);
  }

  .otoro-site-header a.otoro-header-segment {
    flex: 0 1 calc(100vw - 6rem);
    min-width: 0;
    width: calc(100vw - 6rem);
    max-width: calc(100vw - 6rem);
    padding: 0.45rem 0.75rem;
  }

  .otoro-site-header button.otoro-header-segment {
    display: inline-flex;
    width: 3.75rem;
    height: 3.75rem;
    min-width: 3.75rem;
    flex: 0 0 3.75rem;
  }

  /* 開閉ボタンは右端に置く（上下の位置は、ほかのパーツと同じく .otoro-header-segment の transform で動く）。 */
  .otoro-site-header .otoro-mobile-menu-control {
    position: absolute;
    top: calc(50% - 1.875rem);
    right: 0.25rem;
  }

  .otoro-site-header .otoro-header-segment:before {
    top: -2.35rem;
    height: 2.75rem;
    left: 1.35rem;
  }

  .otoro-site-header .otoro-header-segment:after {
    top: -3.15rem;
    left: 1.35rem;
    transform: scale(0.82);
    transform-origin: left bottom;
  }

  .otoro-site-header .otoro-woven-brand {
    max-width: calc(100vw - 8.4rem);
    font-size: clamp(0.66rem, 3vw, 0.82rem);
    line-height: 1.1;
  }

  .otoro-site-header [aria-hidden="true"].relative.block.size-10 {
    width: 2rem;
    height: 2rem;
  }

  .otoro-site-header [data-otoro-menu-toggle] > span {
    width: 2.65rem;
    height: 2.65rem;
  }
}

@media (prefers-color-scheme: dark) {
  .otoro-site-header [data-otoro-menu-line] {
    background-color: currentColor;
  }
}

/* ==========================================================================
   トップページ: ヒーロー
   ========================================================================== */

/* ヒーローの CSS は assets/css/src/hero.css にある（theme.css にビルドされる。最初の描画を止める量を減らすため）。 */

/* ==========================================================================
   トップページ: 水深ゲージ
   ========================================================================== */

/*
 * 画面の右端・縦の中央に固定する装飾（template-parts/depth-gauge.php）。
 * 白いヒーローの上も、暗い海の上も、白いタイルの上も通るので、濃い地のカプセルに入れている。
 * 本文の幅（--content-max: 82rem）の外側の余白に収まる 1440px 以上でだけ表示する。
 * 幅と右端からの距離は、下から上へ移動するヘッダー（右端の Contact は画面の右 40px まで）と重ならない値。それより狭い画面と、
 * ヘッダーと重なる背の低い画面では出さない（条件は theme.js の DEPTH_GAUGE_MEDIA と同じ）。
 * 動くのは点の transform と文字だけ。操作の邪魔をしないよう、クリックは下の要素へ通す。
 */
.otoro-depth-gauge {
  --otoro-depth-track-height: 9rem;

  position: fixed;
  top: 50%;
  right: 0.25rem;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--otoro-radius-pill);
  background: rgba(2, 31, 51, 0.8);
  padding: 1.1rem 0 1rem;
  color: #ffffff;
  font-family: var(--otoro-font-sans);
  line-height: 1.2;
  box-shadow: 0 18px 40px rgba(0, 14, 28, 0.24);
  transform: translateY(-50%);
  pointer-events: none;
}

/* 文字を書き換える行は幅を固定し、桁数や文字数が変わっても位置がずれないようにする。 */
.otoro-depth-gauge-chapter,
.otoro-depth-gauge-value,
.otoro-depth-gauge-zone {
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

.otoro-depth-gauge-chapter {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.otoro-depth-gauge-chapter b {
  display: block;
  color: #7fd7ee;
  font-family: var(--otoro-font-sans);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* セクション名。名前の長さでカプセルの高さが変わらないよう、高さを固定している。 */
.otoro-depth-gauge-name {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.otoro-depth-gauge-label {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  writing-mode: vertical-rl;
}

.otoro-depth-gauge-track {
  position: relative;
  width: 1px;
  height: var(--otoro-depth-track-height);
  margin-block: 0.35rem;
  background: rgba(255, 255, 255, 0.45);
}

.otoro-depth-gauge-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--accent, #d8423f);
  box-shadow: 0 0 0 4px rgba(216, 66, 63, 0.28);
  transform: translateY(calc(var(--otoro-depth-progress, 0) * var(--otoro-depth-track-height)));
}

.otoro-depth-gauge-value {
  font-size: 0.64rem;
  font-weight: 700;
  text-align: center;
}

/* 数値の下に単位（m）を置く。桁数が変わっても幅が変わらないよう等幅の数字にする。 */
.otoro-depth-gauge-value b {
  display: block;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.otoro-depth-gauge-zone {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
}

@media (min-width: 1440px) and (min-height: 620px) {
  .otoro-depth-gauge {
    display: flex;
  }
}

@media print {
  .otoro-depth-gauge {
    display: none;
  }
}

/* ==========================================================================
   トップページ: Strengths
   ========================================================================== */

.otoro-strengths-body-card,
.otoro-strengths-statement-card {
  color-scheme: only light;
  color: var(--sea-deep, #084a78);
}

@media (max-width: 639px) {
  #strengths {
    padding-top: 2.5rem;
  }

  #strengths .otoro-strengths-content {
    margin-top: 2.9rem;
  }

  #strengths .otoro-strengths-statement-card {
    position: relative;
    inset: auto;
    width: 100%;
    border: 0;
    background: transparent;
    box-shadow: none;
    margin-block: 1.25rem 1.75rem;
    margin-inline: 0;
    padding: 0;
    transform: none;
    text-align: center;
  }

  #strengths .otoro-strengths-statement-break {
    display: block;
  }

  #strengths .otoro-strengths-body-card {
    min-height: auto;
    margin-top: 0;
    padding-top: 1.75rem;
    padding-bottom: 1.65rem;
  }
}

@media (min-width: 1024px) {
  #strengths .otoro-strengths-statement-card {
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: linear-gradient(180deg, rgba(245, 252, 255, 0.9), rgba(217, 239, 246, 0.88));
    box-shadow: 0 28px 72px rgba(0, 20, 36, 0.24);
    left: -100%;
    top: 3.5rem;
    width: 184%;
    margin-bottom: 0;
    text-align: left;
    transform: none;
  }
}

/* ==========================================================================
   トップページ: Trainings
   ========================================================================== */

@media (max-width: 639px) {
  .otoro-training-statement {
    margin-top: 2.25rem;
    font-size: clamp(1.08rem, 5.5vw, 1.55rem);
    line-height: 1.25;
    white-space: nowrap;
  }

  #training {
    padding-top: 5rem;
  }

  #training .otoro-section-cta {
    min-height: 3.2rem;
  }
}

#training .otoro-section-cta,
#training .otoro-section-cta * {
  color: #064a78;
}

/* ==========================================================================
   トップページ: News
   ========================================================================== */

.otoro-news-card,
.otoro-news-card * {
  color: #fff;
}

.otoro-news-card time {
  color: rgba(255, 255, 255, 0.72);
}

.otoro-news-card a,
.otoro-news-card a * {
  color: var(--sea-deep, #064a78);
}

@media (max-width: 639px) {
  #news {
    padding-top: 5rem;
  }

  #news .otoro-news-list {
    gap: 0.65rem;
    min-height: auto !important;
  }

  #news .otoro-news-card {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr) 2.35rem;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.3rem 0.85rem;
    min-height: 4.7rem;
    padding: 0.8rem 0.85rem 0.8rem 1.15rem;
  }

  #news .otoro-news-card time {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.68rem;
  }

  #news .otoro-news-card > span:not([aria-hidden="true"]) {
    grid-column: 2;
    grid-row: 1;
    padding: 0.18rem 0.6rem;
    font-size: 0.64rem;
  }

  #news .otoro-news-card p {
    grid-column: 1 / 3;
    grid-row: 2;
    align-self: center;
    padding-right: 0.75rem;
    font-size: 0.74rem;
    line-height: 1.42;
  }

  #news .otoro-news-card p:only-child {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    justify-self: center;
    align-self: center;
    padding-right: 0;
    text-align: center;
  }

  #news .otoro-news-card a,
  #news .otoro-news-card > span[aria-hidden="true"] {
    grid-column: 3;
    grid-row: 1 / 3;
    width: 2.15rem;
    height: 2.15rem;
    align-self: center;
    justify-self: end;
    font-size: 0.92rem;
  }
}

#news .otoro-news-card,
#news .otoro-news-card p,
#news .otoro-news-card span {
  color: #ffffff;
}

#news .otoro-news-card time {
  color: rgba(255, 255, 255, 0.72) !important;
}

#news .otoro-news-card a,
#news .otoro-news-card a * {
  color: #064a78 !important;
}

/* ==========================================================================
   Contact ページ、お問い合わせフォーム（Contact Form 7）
   ========================================================================== */

.otoro-contact-form-shell {
  color-scheme: only light;
  color: #101820 !important;
}

.otoro-contact-page {
  color: #fff;
  padding-top: 12rem;
}

.otoro-cf7-field input,
.otoro-cf7-field select,
.otoro-cf7-field textarea {
  background-color: rgba(236, 250, 255, 0.72);
  width: 100%;
  border: 1px solid rgba(8, 74, 120, 0.2);
  border-radius: 1rem;
  background: rgba(236, 250, 255, 0.72);
  color: var(--foreground);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
  padding: 0.9rem 1rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

/* 入力例（プレースホルダー）。薄い地の上でも WCAG AA（4.5:1）を満たす濃さにする（以前の 52% の濃さは 3.4:1）。 */
.otoro-cf7-field input::placeholder,
.otoro-cf7-field textarea::placeholder {
  color: var(--muted-foreground);
  opacity: 1;
}

.otoro-contact-form-shell * {
  color: var(--foreground, #101820);
}

.otoro-contact-form-shell .wpcf7 {
  color: var(--foreground);
}

.otoro-cf7-form {
  display: grid;
  gap: 1.05rem;
}

.otoro-cf7-form p {
  margin: 0;
}

.otoro-cf7-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 0;
}

.otoro-cf7-field {
  display: grid;
  gap: 0;
  color: var(--sea-deep);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.6;
}

.otoro-cf7-field br {
  display: none;
}

.otoro-cf7-label-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 0;
}

.otoro-cf7-required {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--accent-text);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.25rem 0.5rem;
}

.otoro-cf7-field select {
  appearance: auto;
}

.otoro-cf7-field textarea {
  min-height: 11rem;
  resize: vertical;
}

.otoro-cf7-field input:focus,
.otoro-cf7-field select:focus,
.otoro-cf7-field textarea:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(216, 66, 63, 0.12);
}

.otoro-cf7-submit {
  display: inline-flex;
  min-height: 3.5rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sea-deep);
  border-radius: var(--otoro-radius-pill);
  background: #fff;
  color: var(--sea-deep);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(0, 8, 18, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.otoro-cf7-submit:hover {
  background: rgba(236, 250, 255, 0.78);
  transform: translateY(-2px);
  box-shadow: 0 22px 52px rgba(0, 8, 18, 0.24);
}

.otoro-cf7-submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.otoro-contact-form-shell .wpcf7-spinner {
  margin: 1rem auto 0;
}

/* 入力エラー。.otoro-cf7-field * の色指定（!important）より優先させる。 */
.otoro-contact-form-shell .otoro-cf7-field .wpcf7-not-valid-tip {
  margin-top: 0.35rem;
  color: var(--accent-text) !important;
  font-size: 0.8rem;
  font-weight: 700;
}

/*
 * 送信結果（成功・エラー）のメッセージ。
 * 親セクションの .text-white * で白地に白になり読めなかったので色を固定する。
 * 余白は Contact Form 7 の既定（.wpcf7 form .wpcf7-response-output）より強いセレクタで指定する。
 */
.otoro-contact-form-shell .wpcf7 form .wpcf7-response-output {
  margin: 1.25rem 0 0;
  border-radius: 1rem;
  padding: 0.9rem 1rem;
  color: var(--sea-deep) !important;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.7;
}

.otoro-contact-page-inner {
  display: grid;
  gap: 2rem;
}

.otoro-contact-back {
  margin-bottom: 0.5rem;
}

.otoro-contact-heading {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
}

.otoro-contact-heading h1 {
  position: relative;
  font-size: clamp(3rem, 8vw, 5.75rem);
  line-height: 1;
}

.otoro-contact-lead {
  max-width: 46rem;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 2;
  text-align: center;
}

.otoro-contact-form-wrap {
  width: min(100%, 56rem);
  margin: 1rem auto 0;
}

@media (max-width: 639px) {
  .otoro-contact-page {
    padding-top: 9.5rem;
  }

  .otoro-contact-page-inner {
    gap: 1.4rem;
  }

  .otoro-contact-heading h1 {
    font-size: clamp(3rem, 17vw, 4.2rem);
  }

  .otoro-contact-lead {
    font-size: 0.9rem;
    line-height: 1.85;
    text-align: left;
  }

  .otoro-contact-form-wrap {
    margin-top: 0.3rem;
  }

  .otoro-contact-form-shell {
    border-radius: 1.45rem;
    padding: 1.35rem;
  }
}

@media (prefers-color-scheme: dark) {
  .otoro-contact-form-shell .text-foreground {
    color: #101820;
  }

  .otoro-contact-form-shell .text-sea-deep,
  .otoro-contact-form-shell .otoro-cf7-submit {
    color: #064a78 !important;
  }
}

.otoro-contact-form-shell .otoro-cf7-field input,
.otoro-contact-form-shell .otoro-cf7-field select,
.otoro-contact-form-shell .otoro-cf7-field textarea,
.otoro-contact-form-shell .wpcf7-form-control-wrap input,
.otoro-contact-form-shell .wpcf7-form-control-wrap select,
.otoro-contact-form-shell .wpcf7-form-control-wrap textarea {
  color: #101820 !important;
  caret-color: #101820;
}

.otoro-contact-page .otoro-contact-back,
.otoro-contact-page .otoro-contact-back * {
  background-color: #ffffff;
  border-color: #064a78;
  color: #064a78 !important;
}

.otoro-contact-page .otoro-contact-back:hover {
  background-color: rgba(236, 250, 255, 0.94);
}

.otoro-contact-form-shell .otoro-section-cta,
.otoro-contact-form-shell .otoro-section-cta * {
  color: #064a78;
}

.otoro-contact-form-shell label,
.otoro-contact-form-shell .otoro-cf7-label-text,
.otoro-contact-form-shell .otoro-cf7-field {
  color: #064a78 !important;
}

.otoro-contact-form-shell input,
.otoro-contact-form-shell select,
.otoro-contact-form-shell textarea {
  appearance: none;
  background-color: rgba(236, 250, 255, 0.72) !important;
  border-color: rgba(8, 74, 120, 0.2) !important;
  color: #101820 !important;
  caret-color: #101820;
}

.otoro-contact-form-shell option {
  background-color: #ffffff;
  color: #101820;
}

.otoro-contact-form-shell input::placeholder,
.otoro-contact-form-shell textarea::placeholder {
  color: var(--muted-foreground);
  opacity: 1;
}

.otoro-contact-form-shell .otoro-cf7-required {
  background-color: var(--accent-text);
  color: #ffffff !important;
}

/* ハニーポット（人にも支援技術にも見せない入力欄）、同意チェック、送信できない状態のボタン。 */
.otoro-cf7-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.otoro-cf7-consent {
  margin-top: 0.75rem;
  border: 1px solid rgba(8, 74, 120, 0.2);
  border-radius: 1rem;
  background: rgba(236, 250, 255, 0.4);
  padding: 1rem;
}

.otoro-cf7-consent p {
  display: grid;
  gap: 0.6rem;
}

.otoro-cf7-consent br {
  display: none;
}

.otoro-contact-form-shell .otoro-cf7-privacy-notice {
  display: block;
  color: #5c6b78 !important;
  font-size: 0.82rem;
  line-height: 1.8;
}

.otoro-contact-form-shell .otoro-cf7-privacy-notice a {
  color: #064a78 !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.otoro-contact-form-shell .otoro-cf7-privacy-notice a:hover {
  text-decoration-thickness: 2px;
}

.otoro-contact-form-shell .otoro-cf7-privacy-notice a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.otoro-cf7-consent .wpcf7-list-item {
  display: block;
  margin: 0;
}

.otoro-cf7-consent .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
}

.otoro-contact-form-shell .otoro-cf7-consent .wpcf7-list-item-label {
  color: #064a78 !important;
}

.otoro-contact-form-shell .otoro-cf7-consent input[type="checkbox"] {
  appearance: auto;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: #064a78;
  cursor: pointer;
}

.otoro-contact-form-shell .otoro-cf7-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.otoro-cf7-submit:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

.otoro-cf7-submit:disabled:hover {
  background: #fff;
  transform: none;
  box-shadow: none;
}

/* 入力欄のフォーカス。枠のすぐ外に輪を出す（共通の輪は assets/css/src/custom.css）。 */
.otoro-cf7-field input:focus-visible,
.otoro-cf7-field select:focus-visible,
.otoro-cf7-field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Cafestan ページ
   ========================================================================== */

.otoro-cafestan-install-card {
  color-scheme: only light;
  margin-top: 0;
}

.otoro-cafestan-install-card,
.otoro-cafestan-install-card * {
  color: var(--foreground, #101820);
}

.otoro-cafestan-page {
  padding-top: 13.5rem;
}

.otoro-cafestan-page-inner {
  display: grid;
  gap: 2.5rem;
}

.otoro-cafestan-back {
  margin-bottom: 0;
}

@media (max-width: 639px) {
  .otoro-cafestan-page {
    padding-top: 10.75rem;
    padding-bottom: 5rem;
  }

  .otoro-cafestan-page-inner {
    gap: 1.5rem;
  }

  .otoro-cafestan-install-card {
    min-height: auto;
  }
}

/* Contact の「トップへ戻る」と同じ扱い（白いボタンに濃い文字）。 */
.otoro-cafestan-page .otoro-cafestan-back,
.otoro-cafestan-page .otoro-cafestan-back * {
  color: #064a78 !important;
}

/* ==========================================================================
   News 一覧（/news/）
   ========================================================================== */

.otoro-news-archive-card {
  color-scheme: only light;
  display: grid;
  gap: 0.9rem;
  align-content: start;
  min-height: 15rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--otoro-radius-section);
  background: rgba(255, 255, 255, 0.72);
  padding: 1.25rem;
  box-shadow: 0 18px 46px rgba(0, 18, 36, 0.16);
  background-color: rgba(255, 255, 255, 0.72);
}

.otoro-news-archive-card * {
  color: var(--sea-deep, #064a78);
}

.otoro-news-archive-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  padding: 12rem 0.625rem 6rem;
  color: #fff;
}

.otoro-news-archive-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

.otoro-news-archive-back {
  width: fit-content;
  margin-bottom: 2.5rem;
}

.otoro-news-archive-heading {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
}

.otoro-news-archive-heading h1 {
  position: relative;
  font-size: clamp(3rem, 8vw, 5.75rem);
  line-height: 1;
}

/*
 * ジャンルの絞り込みリンク（ALL / APP / EVENT / BLOG）。
 * 現在地（aria-current）は白い地に濃い文字、それ以外は一覧の枠と同じ濃いガラスに白い文字。
 */
.otoro-news-filter {
  margin-top: 3rem;
}

.otoro-news-filter-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.otoro-news-filter-link {
  display: inline-grid;
  min-width: 5.25rem;
  min-height: 2.75rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--otoro-radius-pill);
  background: var(--otoro-glass-deep);
  padding: 0.5rem 1.25rem;
  color: #ffffff;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.otoro-news-filter-link:hover {
  background: #ffffff;
  color: #064a78;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 26, 44, 0.2);
}

.otoro-news-filter-link[aria-current] {
  border-color: #ffffff;
  background: #ffffff;
  color: #064a78;
  box-shadow: 0 10px 24px rgba(0, 26, 44, 0.12);
}

.otoro-news-archive-groups {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.75rem;
}

/*
 * ジャンルごとの枠。白を重ねて明るくすると、ページ上端（グラデーションの最も明るい位置）で
 * 白い文字のコントラストが 4.5:1 を下回るので、海の深い色を重ねて暗い側へ寄せたガラスにしている。
 */
.otoro-news-archive-group {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--otoro-radius-section);
  background: var(--otoro-glass-deep);
  box-shadow: 0 28px 78px rgba(0, 14, 28, 0.22);
  backdrop-filter: blur(10px);
  padding: 1.25rem;
  min-height: 18rem;
}

.otoro-news-archive-group-head {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem 0.25rem 1.25rem;
}

.otoro-news-archive-label {
  color: var(--otoro-on-deep-accent);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.otoro-news-archive-group h2 {
  margin-top: 0.35rem;
  font-size: clamp(1.65rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
}

.otoro-news-archive-group-head p:not(.otoro-news-archive-label) {
  max-width: 42rem;
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.8;
  padding-top: 1.45rem;
}

.otoro-news-archive-card-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.otoro-news-archive-card time {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.82rem;
  font-weight: 700;
}

.otoro-news-archive-card span {
  width: fit-content;
  border: 1px solid rgba(2, 31, 51, 0.14);
  border-radius: var(--otoro-radius-pill);
  background: rgba(255, 255, 255, 0.78);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.otoro-news-archive-card h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
}

.otoro-news-archive-card p {
  font-size: 0.88rem;
  line-height: 1.75;
}

.otoro-news-archive-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border: 1px solid currentColor;
  border-radius: var(--otoro-radius-pill);
  background: #fff;
  padding: 0 1.15rem;
  font-size: 0.82rem;
  font-weight: 700;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 12px 28px rgba(0, 18, 36, 0.14);
}

.otoro-news-archive-card a:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 18, 36, 0.2);
}

.otoro-news-archive-card a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.otoro-news-archive-empty {
  display: grid;
  min-height: 9rem;
  place-items: center;
}

.otoro-news-archive-empty p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.7;
}

@media (max-width: 767px) {
  .otoro-news-archive-page {
    padding-top: 10rem;
  }

  .otoro-news-filter {
    margin-top: 2.25rem;
  }

  .otoro-news-filter-link {
    min-width: 4.25rem;
    padding-inline: 1rem;
  }

  .otoro-news-archive-group-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }

  .otoro-news-archive-group-head p:not(.otoro-news-archive-label) {
    padding-top: 0;
  }

  .otoro-news-archive-card,
  .otoro-news-archive-card-list {
    grid-template-columns: 1fr;
  }

  .otoro-news-archive-card a {
    width: fit-content;
  }
}

.otoro-news-archive-card,
.otoro-news-archive-card h3,
.otoro-news-archive-card span,
.otoro-news-archive-card a,
.otoro-news-archive-card a * {
  color: #064a78;
}

.otoro-news-archive-card time,
.otoro-news-archive-card p {
  color: rgba(2, 31, 51, 0.78);
}

/* 一覧の枠の中のページ送り。 */
.otoro-news-archive-group .otoro-pagination {
  margin-top: 2rem;
}

/* ==========================================================================
   本文（固定ページ、News 詳細）
   ========================================================================== */

/*
 * 固定ページと News 詳細の本文（濃い海色のカードの上）。
 * カード（.otoro-entry-card）は --sea-deep を 45% 重ねた濃い地色。白い文字・リンク・引用元が
 * グラデーションのいちばん明るい所（ページ上端）でも WCAG AA（4.5:1）を満たす。
 */
.otoro-entry-content > * + * {
  margin-top: 1.5rem;
}

.otoro-entry-content h2,
.otoro-entry-content h3,
.otoro-entry-content h4,
.otoro-entry-content h5,
.otoro-entry-content h6 {
  color: #ffffff;
  font-weight: 700;
  line-height: 1.5;
}

.otoro-entry-content > h2,
.otoro-entry-content > h3,
.otoro-entry-content > h4 {
  margin-top: 2.75rem;
}

.otoro-entry-content > h5,
.otoro-entry-content > h6 {
  margin-top: 2rem;
}

.otoro-entry-content h2 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  padding-bottom: 0.6rem;
  font-size: 1.6rem;
}

.otoro-entry-content h3 {
  border-left: 4px solid #7fd7ee;
  padding-left: 0.85rem;
  font-size: 1.3rem;
}

.otoro-entry-content h4 {
  font-size: 1.12rem;
}

.otoro-entry-content h5 {
  font-size: 1rem;
}

.otoro-entry-content h6 {
  color: var(--otoro-on-deep-accent);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

.otoro-entry-content > h2 + *,
.otoro-entry-content > h3 + *,
.otoro-entry-content > h4 + * {
  margin-top: 1rem;
}

.otoro-entry-content > h5 + *,
.otoro-entry-content > h6 + * {
  margin-top: 0.6rem;
}

.otoro-entry-content strong {
  color: #ffffff;
  font-weight: 700;
}

.otoro-entry-content a {
  color: #dff7ff !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.18s ease;
}

.otoro-entry-content a:hover {
  color: #ffffff !important;
  text-decoration-thickness: 2px;
}

.otoro-entry-content a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.otoro-entry-content ul,
.otoro-entry-content ol {
  padding-left: 1.6rem;
}

.otoro-entry-content ul {
  list-style: disc;
}

.otoro-entry-content ol {
  list-style: decimal;
}

.otoro-entry-content li + li,
.otoro-entry-content li > ul,
.otoro-entry-content li > ol {
  margin-top: 0.4rem;
}

/*
 * リストのマーカー（「・」と番号）。どのブラウザでも同じ明るい水色（--sea-surface。本文のリンクと同じ色）で描く。
 * 本文カードの地色に対して 6:1 以上あり、WCAG AA（4.5:1）を満たす
 * （以前 Safari だけで使っていた --sea-shallow は 4.35:1 で、番号の文字としては足りない）。
 * 文字の塗り（-webkit-text-fill-color）は指定しない。Safari は ::marker の塗りの指定に従い、
 * Chrome / Firefox は無視して li の塗りを継承するので、指定するとブラウザで色が分かれる。
 * 初期値の currentcolor のままなら、どのブラウザでも ::marker の color で描かれる。
 */
.otoro-entry-content li::marker {
  color: var(--sea-surface);
  font-weight: 700;
}

.otoro-entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--otoro-radius-card);
}

.otoro-entry-content figure {
  max-width: 100%;
}

.otoro-entry-content figcaption {
  margin-top: 0.6rem;
  color: #dff7ff !important;
  font-size: 0.82rem;
  line-height: 1.7;
  text-align: center;
}

.otoro-entry-content .aligncenter {
  margin-inline: auto;
}

/*
 * 中央寄せ。ブロックの画像（div.wp-block-image > figure.aligncenter）は WordPress が display: table にして
 * キャプションを画像の幅に収めるので、figure の display は変えない（block にするとキャプションが 1 文字幅になる）。
 * 対象は、img に直接付いた aligncenter と、クラシックエディターのキャプション付き画像（figure.wp-caption）。
 */
.otoro-entry-content img.aligncenter,
.otoro-entry-content figure.wp-caption.aligncenter {
  display: block;
}

.otoro-entry-content blockquote {
  border-left: 4px solid #7fd7ee;
  border-radius: 0 var(--otoro-radius-card) var(--otoro-radius-card) 0;
  background: rgba(255, 255, 255, 0.08);
  padding: 1rem 1.25rem;
}

.otoro-entry-content blockquote > * + * {
  margin-top: 0.75rem;
}

.otoro-entry-content blockquote cite {
  display: block;
  color: #dff7ff !important;
  font-size: 0.85rem;
  font-style: normal;
}

.otoro-entry-content .wp-block-table {
  overflow-x: auto;
}

.otoro-entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.7;
}

.otoro-entry-content th,
.otoro-entry-content td {
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
}

.otoro-entry-content th {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-weight: 700;
}

.otoro-entry-content hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  margin-block: 2.5rem;
}

.otoro-entry-content code {
  border-radius: 4px;
  background: rgba(0, 14, 28, 0.4);
  padding: 0.15em 0.4em;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9em;
}

.otoro-entry-content pre {
  overflow-x: auto;
  border-radius: var(--otoro-radius-card);
  background: rgba(0, 14, 28, 0.4);
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  line-height: 1.7;
}

.otoro-entry-content pre code {
  background: none;
  padding: 0;
}

/*
 * ---- ここから下は、WordPress 標準ブロックごとの調整 ----
 * ブロックの基本の CSS（wp-block-*-inline-css）は、使ったブロックの分だけ WordPress が読み込む。
 * ここでは、暗い地のカードに合わせた色と余白だけを上書きしている。
 */

/* 回り込み（左右寄せの画像）をカードの中で完結させ、長い URL などは折り返す。 */
.otoro-entry-content {
  display: flow-root;
  overflow-wrap: break-word;
}

.otoro-entry-content .alignleft {
  float: left;
  margin: 0.4rem 1.5rem 1rem 0;
}

.otoro-entry-content .alignright {
  float: right;
  margin: 0.4rem 0 1rem 1.5rem;
}

.otoro-entry-content :is(.alignleft, .alignright) {
  max-width: 50%;
}

/* 回り込みは、見出しや幅いっぱいのブロックの手前で解除する。 */
.otoro-entry-content .aligncenter,
.otoro-entry-content > :is(h2, h3, h4, hr, pre, blockquote, details, .alignfull, .alignwide, .wp-block-table, .wp-block-gallery, .wp-block-columns, .wp-block-group, .wp-block-buttons, .wp-block-cover, .wp-block-media-text, .wp-block-embed, .wp-block-pullquote, .wp-block-file) {
  clear: both;
}

.otoro-entry-content :is(.alignfull, .alignwide) {
  width: 100%;
  max-width: 100%;
}

/* 狭い画面では回り込ませず、中央に置く。 */
@media (max-width: 479px) {
  .otoro-entry-content :is(.alignleft, .alignright) {
    float: none;
    max-width: 100%;
    margin: 1.5rem auto 0;
  }

  .otoro-entry-content figure:is(.alignleft, .alignright) {
    display: table;
  }
}

/* カラム・グループなど、入れ子のブロックの中の縦の間隔。 */
.otoro-entry-content :is(.wp-block-column, .wp-block-group, .wp-block-group__inner-container, .wp-block-media-text__content, .wp-block-cover__inner-container, details) > * + * {
  margin-top: 1rem;
}

.otoro-entry-content .wp-block-columns {
  gap: 1.5rem 2rem;
}

/*
 * 文字サイズを指定したブロック。本文の行の高さは固定値（2rem）なので、大きい文字では行が重なる。
 * 文字サイズに比例する行の高さへ切り替える。
 */
.otoro-entry-content :is([class*="-font-size"], [style*="font-size"]) {
  line-height: 1.6;
}

/* 列の多いテーブルを狭い画面で見たとき、セルが 1 文字幅まで縮まないようにする（はみ出す分は表の中で横スクロール）。 */
.otoro-entry-content .wp-block-table :is(th, td) {
  min-width: 4.5em;
}

/* マーカー、キーボードのキー。 */
.otoro-entry-content mark:not(.has-inline-color) {
  border-radius: 3px;
  background: #ffe27a;
  padding: 0 0.2em;
  color: #101820 !important;
}

.otoro-entry-content kbd {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(0, 14, 28, 0.4);
  padding: 0.1em 0.45em;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.85em;
}

/* プルクオート。引用（blockquote）の枠は外し、上下の線で区切る。 */
.otoro-entry-content .wp-block-pullquote {
  margin-block: 2.5rem;
  border-block: 1px solid rgba(255, 255, 255, 0.24);
  padding: 1.75rem 1rem;
  text-align: center;
}

.otoro-entry-content .wp-block-pullquote blockquote {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
}

.otoro-entry-content .wp-block-pullquote p {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.7;
}

/* テーブル。ヘッダー・フッターの太い線を細くし、ストライプは白い地ではなく薄い白の重ねにする。 */
.otoro-entry-content .wp-block-table thead {
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

.otoro-entry-content .wp-block-table tfoot {
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}

.otoro-entry-content .wp-block-table tfoot td {
  background: rgba(255, 255, 255, 0.06);
  font-weight: 700;
}

.otoro-entry-content .wp-block-table.is-style-stripes {
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.otoro-entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.1);
}

.otoro-entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
  background-color: transparent;
}

/* ボタン（塗り・アウトライン）とファイルのダウンロードボタン。サイトの白いボタンにそろえる。 */
.otoro-entry-content .wp-block-buttons {
  gap: 0.75rem 1rem;
}

.otoro-entry-content :is(.wp-block-button__link, .wp-block-file__button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border-radius: var(--otoro-radius-pill);
  padding: 0.6rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 26, 44, 0.2);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.otoro-entry-content :is(.wp-block-button__link, .wp-block-file__button):not(.has-background) {
  background: #ffffff;
}

.otoro-entry-content :is(.wp-block-button__link, .wp-block-file__button):not(.has-text-color) {
  color: #064a78 !important;
}

.otoro-entry-content .is-style-outline > .wp-block-button__link {
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: none;
}

.otoro-entry-content .is-style-outline > .wp-block-button__link:not(.has-background) {
  background: rgba(255, 255, 255, 0.06);
}

.otoro-entry-content .is-style-outline > .wp-block-button__link:not(.has-text-color) {
  color: #ffffff !important;
}

.otoro-entry-content :is(.wp-block-button__link, .wp-block-file__button):hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 26, 44, 0.28);
}

.otoro-entry-content .wp-block-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  font-size: 0.95rem;
}

.otoro-entry-content .wp-block-file .wp-block-file__button {
  margin-left: 0;
}

/* 詳細（details）。 */
.otoro-entry-content details {
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--otoro-radius-card);
  background: rgba(255, 255, 255, 0.06);
  padding: 0.85rem 1.1rem;
}

.otoro-entry-content summary {
  cursor: pointer;
  font-weight: 700;
}

.otoro-entry-content summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* 整形済み・詩は折り返す（コードはブロックの中で横スクロール）。 */
.otoro-entry-content :is(.wp-block-preformatted, .wp-block-verse) {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.otoro-entry-content .wp-block-verse {
  font-family: inherit;
}

/*
 * ギャラリーの画像に重なるキャプション。WordPress の既定（下から上へ薄くなる黒）は、明るい画像の上で
 * 文字が読めなくなるので、濃い地を敷く（白い画像の上でも 10:1）。
 */
.otoro-entry-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  margin-top: 0;
  background: rgba(0, 14, 28, 0.78);
  padding: 0.5rem 0.75rem;
  color: #ffffff !important;
  text-shadow: none;
}

.otoro-entry-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption::before {
  content: none;
}

/* 埋め込み、カバー、メディアとテキスト。 */
.otoro-entry-content :is(iframe, video, embed, object) {
  max-width: 100%;
}

.otoro-entry-content .wp-block-embed iframe {
  border-radius: var(--otoro-radius-card);
}

/*
 * 動画の URL だけを 1 行で置いたとき（埋め込みブロックを使わない自動埋め込み）の iframe。
 * width / height が属性で固定されている（500x281 など）ので、そのままだと狭い画面で幅だけ縮んで縦長になる。
 * 本文の幅いっぱいにして、16:9 を保つ。埋め込みブロックは WordPress 側の指定（縦横比のクラス）に任せる。
 */
.otoro-entry-content iframe:is([src*="youtube.com/embed"], [src*="youtube-nocookie.com/embed"], [src*="player.vimeo.com"]):not(.wp-block-embed iframe) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--otoro-radius-card);
}

.otoro-entry-content .wp-block-cover {
  overflow: hidden;
  border-radius: var(--otoro-radius-card);
}

.otoro-entry-content .wp-block-media-text {
  gap: 1rem 0;
}

/* 最新の投稿。リストの字下げを外し、行ごとに線で区切る。 */
.otoro-entry-content .wp-block-latest-posts {
  padding-left: 0;
}

.otoro-entry-content .wp-block-latest-posts > li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-block: 0.7rem;
}

.otoro-entry-content .wp-block-latest-posts > li + li {
  margin-top: 0;
}

.otoro-entry-content .wp-block-latest-posts__post-date {
  margin-top: 0.2rem;
  font-size: 0.82rem;
}

/*
 * 背景色を指定したブロック（.has-background）とカバーの中の文字色。
 * ここは白に固定していない（「Tailwind の文字色ユーティリティの固定」を参照）。
 * 文字色の指定が無いときは、エディターの既定と同じく濃い色にする。既定のパレットのうち、濃い色では
 * 4.5:1 に届かない背景（黒・赤・紫）だけ白にする。文字色も指定されているときは、その指定に従う。
 * 背景を指定せず文字色だけを指定した段落は、暗い地で読めなくなる色があるため白のままにしている。
 */
.otoro-entry-content .has-background:not(.has-text-color) {
  --otoro-on-background: #101820;

  color: var(--otoro-on-background);
}

.otoro-entry-content :is(.has-black-background-color, .has-vivid-red-background-color, .has-vivid-purple-background-color):not(.has-text-color) {
  --otoro-on-background: #ffffff;
}

.otoro-entry-content :is(p, .wp-block-group, .wp-block-column).has-background {
  border-radius: var(--otoro-radius-card);
}

.otoro-entry-content :is(.wp-block-group, .wp-block-column).has-background {
  padding: 1.25rem 1.5rem;
}

/* 見出し・太字・リンク・キャプションなど、上で白や水色に決めている要素を、地の色に合わせた文字色へ戻す。 */
.otoro-entry-content :is(.has-background, .wp-block-cover) :is(h2, h3, h4, h5, h6, strong, th) {
  color: inherit;
}

.otoro-entry-content :is(.has-background, .wp-block-cover) :is(a:not(.wp-element-button), figcaption, cite),
.otoro-entry-content a.has-background:not(.has-text-color, .wp-element-button) {
  color: inherit !important;
}

.otoro-entry-content :is(.has-background, .wp-block-cover) li,
.otoro-entry-content :is(.has-background, .wp-block-cover) li::marker {
  color: inherit;
}

.otoro-entry-content :is(.has-background, .wp-block-cover) :is(th, td) {
  border-color: currentcolor;
}

.otoro-entry-content :is(.has-background, .wp-block-cover) th {
  background: none;
}

/* ==========================================================================
   ページ送り
   ========================================================================== */

/* 一覧、検索結果、複数ページに分けた固定ページで使う。 */
.otoro-pagination {
  margin-top: 2.5rem;
}

.otoro-pagination-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.otoro-pagination .page-numbers,
.otoro-pagination .post-page-numbers {
  display: inline-grid;
  min-width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--otoro-radius-pill);
  background: rgba(255, 255, 255, 0.14);
  padding: 0 0.75rem;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

.otoro-pagination a.page-numbers,
.otoro-pagination a.post-page-numbers {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.otoro-pagination a.page-numbers:hover,
.otoro-pagination a.post-page-numbers:hover {
  background: #ffffff;
  color: #064a78 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 26, 44, 0.2);
}

.otoro-pagination a.page-numbers:focus-visible,
.otoro-pagination a.post-page-numbers:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.otoro-pagination .page-numbers.current,
.otoro-pagination .post-page-numbers.current {
  border-color: #ffffff;
  background: #ffffff;
  color: #064a78 !important;
  box-shadow: 0 10px 24px rgba(0, 26, 44, 0.12);
}

.otoro-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
  min-width: 1.5rem;
  padding: 0;
}

/* ==========================================================================
   検索フォーム
   ========================================================================== */

/* 検索結果と 404 で使う。 */
.otoro-search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.otoro-search-form input[type="search"] {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 3.5rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--otoro-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  padding: 0 1.4rem;
  color: #101820 !important;
  font-size: 0.95rem;
  font-weight: 500;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.otoro-search-form input[type="search"]::placeholder {
  color: var(--muted-foreground);
  opacity: 1;
}

.otoro-search-form input[type="search"]:focus {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(216, 66, 63, 0.24);
}

.otoro-search-form .otoro-section-cta {
  cursor: pointer;
}

.otoro-search-form input[type="search"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   実績（Works）: カード、一覧（/works/）、トップページの Works セクション
   ========================================================================== */

/*
 * カードは不透明な白い地（後ろの泡を隠すので、泡が重なっても文字のコントラストは変わらない）。
 * 文字は --sea-deep（#064a78、白地で 9.3:1）と #2c4356（同 10:1）。
 */
:root {
  --otoro-card-surface: #fbfdff;
  --otoro-card-text: #2c4356;
}

/* 一覧と提供サービス一覧の、見出しの下の一文。 */
.otoro-archive-lead {
  max-width: 40rem;
  margin: 1.5rem auto 0;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.9;
  text-align: center;
}

.otoro-works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.otoro-works-card {
  color-scheme: only light;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--otoro-radius-section);
  background: var(--otoro-card-surface);
  box-shadow: 0 18px 46px rgba(0, 18, 36, 0.2);
  transition: transform 0.24s ease;
}

.otoro-works-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0, 18, 36, 0.3);
}

/* カード全体をリンクにしているので、フォーカスの輪はカードの外周に出す。 */
.otoro-works-card:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #ffffff, 0 18px 46px rgba(0, 18, 36, 0.2);
}

.otoro-works-card:has(a:focus:not(:focus-visible)) {
  outline: none;
  box-shadow: 0 18px 46px rgba(0, 18, 36, 0.2);
}

.otoro-works-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #d9eef6;
}

.otoro-works-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.otoro-works-card:hover .otoro-works-card-image {
  transform: scale(1.04);
}

/* アイキャッチ未設定のとき。海の色の地に、泡に見立てた輪とロゴを置く。 */
.otoro-works-card-media--fallback {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.2) 0 3.2rem, transparent 3.3rem),
    radial-gradient(circle at 12% 86%, rgba(127, 215, 238, 0.24) 0 4.6rem, transparent 4.7rem),
    linear-gradient(140deg, #1591bd 0%, #0b78aa 38%, #064a78 100%);
}

.otoro-works-card-fallback-mark {
  width: min(38%, 9rem);
  height: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #ffffff 0%, #f3fdff 36%, #dff7ff 58%, #aee9ff 100%);
  padding: 7%;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.88), 0 14px 34px rgba(0, 40, 70, 0.3);
}

.otoro-works-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.25rem 1.25rem 1.4rem;
}

.otoro-works-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  color: var(--sea-deep, #064a78);
  font-size: 0.78rem;
  font-weight: 700;
}

.otoro-works-card-category {
  border: 1px solid rgba(6, 74, 120, 0.22);
  border-radius: var(--otoro-radius-pill);
  background: #e6f5fb;
  padding: 0.25rem 0.75rem;
  color: var(--sea-deep, #064a78);
}

.otoro-works-card-meta time {
  color: var(--otoro-card-text);
  font-family: "Courier New", Courier, monospace;
}

.otoro-works-card-title {
  color: var(--sea-deep, #064a78);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.55;
}

.otoro-works-card-title a {
  color: inherit;
  outline: none;
}

.otoro-works-card-title a::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
}

.otoro-works-card-client {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--otoro-card-text);
  font-size: 0.85rem;
  font-weight: 600;
}

.otoro-works-card-client span {
  color: var(--accent-text);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.otoro-works-card-summary {
  color: var(--otoro-card-text);
  font-size: 0.88rem;
  line-height: 1.8;
}

.otoro-works-card-more {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--sea-deep, #064a78);
  font-size: 0.82rem;
  font-weight: 700;
}

.otoro-works-card-more span {
  display: inline-block;
  transition: transform 0.24s ease;
}

.otoro-works-card:hover .otoro-works-card-more span {
  transform: translateX(4px);
}

/* 大きく見せる 1 枚（一覧の先頭、トップページの先頭）。横長にして、画像と文字を左右に並べる。 */
.otoro-works-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

.otoro-works-card--featured .otoro-works-card-media {
  aspect-ratio: auto;
  min-height: 22rem;
}

.otoro-works-card--featured .otoro-works-card-image {
  position: absolute;
  inset: 0;
}

.otoro-works-card--featured .otoro-works-card-body {
  justify-content: center;
  gap: 0.9rem;
  padding: 2.25rem 2.5rem;
}

.otoro-works-card--featured .otoro-works-card-title {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.4;
}

.otoro-works-card--featured .otoro-works-card-summary {
  font-size: 0.95rem;
  line-height: 1.9;
}

.otoro-works-card--featured .otoro-works-card-more {
  margin-top: 0.5rem;
}

/* 種類の絞り込みリンク。日本語の名前なので、News（英字）の等幅・字間は使わない。 */
.otoro-works-filter-link {
  font-family: inherit;
  letter-spacing: 0.04em;
}

@media (max-width: 1023px) {
  .otoro-works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .otoro-works-card--featured {
    display: flex;
  }

  .otoro-works-card--featured .otoro-works-card-media {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .otoro-works-card--featured .otoro-works-card-body {
    padding: 1.5rem 1.5rem 1.75rem;
  }
}

@media (max-width: 767px) {
  .otoro-works-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .otoro-archive-lead {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   実績の詳細（/works/{slug}/）
   ========================================================================== */

/*
 * News 詳細と同じ濃い海色のカード（.otoro-entry-card）の上。main に .text-white が付いていて、
 * 子孫の文字は白に固定されるので、白以外にしたい所だけ !important で色を指定している。
 */
.otoro-works-detail-eyebrow,
.otoro-detail-heading span {
  display: block;
  color: var(--otoro-on-deep-accent) !important;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.otoro-works-detail-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.otoro-works-detail-categories :is(a, span) {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--otoro-radius-pill);
  background: rgba(255, 255, 255, 0.12);
  padding: 0.2rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  transition: transform 0.18s ease;
}

.otoro-works-detail-categories a:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

.otoro-works-detail-lead {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.9;
}

.otoro-works-detail-figure {
  overflow: hidden;
  margin-top: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgba(0, 14, 28, 0.3);
}

.otoro-works-detail-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.otoro-works-detail-section,
.otoro-works-detail-content {
  margin-top: 3rem;
}

/* 詳細ページの中見出し（英字の小さなラベル＋日本語の見出し）。実績と提供サービスで共通。 */
.otoro-detail-heading {
  color: #ffffff;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
}

.otoro-detail-heading span {
  margin-bottom: 0.35rem;
}

.otoro-works-summary {
  margin-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.otoro-works-summary > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 1rem 0.25rem;
}

.otoro-works-summary dt {
  color: var(--otoro-on-deep-accent) !important;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.9;
}

.otoro-works-summary dd {
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.otoro-works-summary-list {
  display: grid;
  gap: 0.15rem;
}

.otoro-works-summary-list li {
  position: relative;
  padding-left: 1.1rem;
}

.otoro-works-summary-list li::before {
  position: absolute;
  top: 0.8em;
  left: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #7fd7ee;
  content: "";
}

.otoro-works-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.otoro-works-tags li {
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--otoro-radius-pill);
  background: rgba(255, 255, 255, 0.12);
  padding: 0.1rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.otoro-external-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.otoro-external-link:hover {
  text-decoration-thickness: 2px;
}

.otoro-works-detail-visit {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.otoro-works-detail-visit .otoro-section-cta {
  gap: 0.5rem;
}

.otoro-related-service-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.otoro-related-service,
.otoro-works-adjacent-link {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.1);
  transition: transform 0.18s ease;
}

.otoro-related-service:hover,
.otoro-works-adjacent-link:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 14, 28, 0.28);
}

.otoro-related-service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 1.1rem 1.25rem;
}

.otoro-related-service-name {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
}

.otoro-related-service-lead {
  grid-column: 1;
  font-size: 0.88rem;
  line-height: 1.8;
}

.otoro-related-service-arrow {
  display: grid;
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  color: #064a78 !important;
  font-weight: 700;
}

.otoro-works-adjacent {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 3rem;
}

.otoro-works-adjacent-link {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 1rem 1.25rem;
}

.otoro-works-adjacent-link--next {
  grid-column: 2;
  text-align: right;
}

.otoro-works-adjacent-label {
  color: var(--otoro-on-deep-accent) !important;
  font-size: 0.78rem;
  font-weight: 700;
}

.otoro-works-adjacent-label span {
  color: inherit !important;
}

.otoro-works-adjacent-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .otoro-works-summary > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }

  .otoro-works-adjacent {
    grid-template-columns: minmax(0, 1fr);
  }

  .otoro-works-adjacent-link--next {
    grid-column: auto;
  }
}

/* 動きを減らす設定のときは、カードや矢印を動かさない。 */
@media (prefers-reduced-motion: reduce) {
  .otoro-works-card,
  .otoro-works-card-image,
  .otoro-works-card-more span,
  .otoro-works-detail-categories a,
  .otoro-related-service,
  .otoro-works-adjacent-link {
    transition: none;
  }

  .otoro-works-card:hover,
  .otoro-works-card:hover .otoro-works-card-image,
  .otoro-works-card:hover .otoro-works-card-more span,
  .otoro-works-detail-categories a:hover,
  .otoro-related-service:hover,
  .otoro-works-adjacent-link:hover {
    transform: none;
  }
}

/* ==========================================================================
   提供サービス（/service/ と /service/{slug}/）
   ========================================================================== */

/*
 * 依頼を受けて提供するサービスの一覧と詳細。Cafestan などのサービスを紹介する、トップページの Business の「育てる」（#services）とは別。
 * 海の地（.otoro-news-archive-page）の上に、濃いガラスの枠（--otoro-glass-deep。白い文字で 6.5:1 以上）と
 * 不透明な白いカードを交互に置いて、区切りと強弱を付けている。
 */
.otoro-service-badge {
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--otoro-radius-pill);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.3rem 0.85rem;
  color: var(--otoro-on-deep-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* 一覧: 番号つきの行。 */
.otoro-service-list {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}

.otoro-service-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--otoro-radius-section);
  background: var(--otoro-glass-deep);
  box-shadow: 0 28px 78px rgba(0, 14, 28, 0.22);
  backdrop-filter: blur(10px);
  padding: 2rem 2.5rem;
  transition: transform 0.24s ease;
}

.otoro-service-row:hover {
  transform: translateY(-4px);
  box-shadow: 0 34px 84px rgba(0, 14, 28, 0.36);
}

.otoro-service-row:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #ffffff, 0 28px 78px rgba(0, 14, 28, 0.22);
}

.otoro-service-row:has(a:focus:not(:focus-visible)) {
  outline: none;
  box-shadow: 0 28px 78px rgba(0, 14, 28, 0.22);
}

.otoro-service-row-number {
  color: var(--otoro-on-deep-accent);
  font-family: var(--otoro-font-sans);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-stretch: 75%;
  font-weight: 700;
  line-height: 0.9;
}

.otoro-service-row-body {
  display: grid;
  gap: 0.7rem;
}

.otoro-service-row-title {
  color: #ffffff;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.35;
}

.otoro-service-row-title a {
  color: inherit;
  outline: none;
}

.otoro-service-row-title a::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
}

.otoro-service-row-lead {
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.9;
}

.otoro-service-row-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  border-radius: var(--otoro-radius-pill);
  background: #ffffff;
  padding: 0 1.25rem;
  color: #064a78;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.otoro-service-row-more span {
  display: inline-block;
  transition: transform 0.24s ease;
}

.otoro-service-row:hover .otoro-service-row-more span {
  transform: translateX(4px);
}

/* 詳細: ヒーロー（白いカード）。 */
.otoro-service-hero {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  overflow: hidden;
  border: 1px solid #ffffff;
  border-radius: var(--otoro-radius-section);
  background: linear-gradient(180deg, #ffffff 0%, #ecfaff 100%);
  box-shadow: 0 34px 90px rgba(0, 16, 40, 0.26);
  padding: clamp(2rem, 6vw, 4.5rem);
}

.otoro-service-hero-ring {
  position: absolute;
  top: -5rem;
  right: -5rem;
  width: 17rem;
  height: 17rem;
  border: 1px solid rgba(127, 215, 238, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 0 2.5rem rgba(127, 215, 238, 0.12);
  pointer-events: none;
}

.otoro-service-hero .otoro-service-badge {
  position: relative;
  border-color: rgba(216, 66, 63, 0.24);
  background: #ffffff;
  color: var(--accent-text);
}

.otoro-service-hero-title {
  position: relative;
  color: #101820;
  font-size: clamp(2.1rem, 6vw, 4.25rem);
  line-height: 1.2;
}

.otoro-service-hero-lead {
  position: relative;
  max-width: 44rem;
  color: #46586a;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 500;
  line-height: 1.9;
}

.otoro-service-hero-cta {
  position: relative;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* 詳細: 各ブロック。 */
.otoro-service-section {
  margin-top: 4rem;
}

.otoro-service-section--glass {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--otoro-radius-section);
  background: var(--otoro-glass-deep);
  box-shadow: 0 28px 78px rgba(0, 14, 28, 0.22);
  backdrop-filter: blur(10px);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.otoro-service-section--glass + .otoro-service-section--glass {
  margin-top: 1.5rem;
}

.otoro-service-issues {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 2rem;
  margin-top: 1.5rem;
}

.otoro-service-issues li {
  position: relative;
  padding-left: 2.25rem;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
}

/* チェックの印（丸の中にレ点）。 */
.otoro-service-issues li::before {
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: #7fd7ee;
  content: "";
}

.otoro-service-issues li::after {
  position: absolute;
  top: calc(0.2em + 0.36rem);
  left: 0.45rem;
  width: 0.55rem;
  height: 0.32rem;
  border-bottom: 2px solid #043656;
  border-left: 2px solid #043656;
  content: "";
  transform: rotate(-45deg);
}

.otoro-service-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
  counter-reset: otoro-feature;
}

.otoro-service-feature {
  color-scheme: only light;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--otoro-radius-section);
  background: var(--otoro-card-surface);
  box-shadow: 0 18px 46px rgba(0, 18, 36, 0.2);
  padding: 1.75rem 1.75rem 1.9rem;
  counter-increment: otoro-feature;
}

.otoro-service-feature::before {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--accent-text);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  content: counter(otoro-feature, decimal-leading-zero);
}

.otoro-service-feature h3 {
  color: var(--sea-deep, #064a78);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
}

.otoro-service-feature p {
  margin-top: 0.6rem;
  color: var(--otoro-card-text);
  font-size: 0.93rem;
  line-height: 1.9;
}

/* 項目が奇数のときは、最後の 1 枚を横いっぱいにして段を埋める。 */
.otoro-service-feature:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* 進め方: 番号の丸を縦の線でつなぐ。1 番目だけ白く塗って、始まりを強調する。 */
.otoro-service-steps {
  display: grid;
  margin-top: 1.75rem;
}

.otoro-service-step {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-bottom: 2rem;
}

.otoro-service-step:last-child {
  padding-bottom: 0;
}

.otoro-service-step:not(:last-child)::before {
  position: absolute;
  top: 4rem;
  bottom: 0;
  left: calc(2rem - 1px);
  width: 2px;
  background: linear-gradient(180deg, rgba(127, 215, 238, 0.7), rgba(127, 215, 238, 0.2));
  content: "";
}

.otoro-service-step-number {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border: 2px solid #7fd7ee;
  border-radius: 50%;
  background: rgba(2, 31, 51, 0.5);
  color: #ffffff;
  font-family: var(--otoro-font-sans);
  font-size: 1.5rem;
  font-stretch: 75%;
  font-weight: 700;
  line-height: 1;
}

.otoro-service-step:first-child .otoro-service-step-number {
  border-color: #ffffff;
  background: #ffffff;
  color: #064a78;
  box-shadow: 0 0 0 0.4rem rgba(255, 255, 255, 0.16);
}

.otoro-service-step h3 {
  padding-top: 0.55rem;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}

.otoro-service-step:first-child h3 {
  font-size: 1.45rem;
}

.otoro-service-step p {
  margin-top: 0.4rem;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.9;
}

.otoro-service-price p {
  margin-top: 1.25rem;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 2;
}

.otoro-works-grid--related {
  margin-top: 1.5rem;
}

/* よくある質問（<details>）。開閉はブラウザ標準の動きで、キーボード（Enter / Space）でも操作できる。 */
.otoro-faq {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.otoro-faq-item {
  color-scheme: only light;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 1.25rem;
  background: var(--otoro-card-surface);
  box-shadow: 0 14px 36px rgba(0, 18, 36, 0.18);
}

.otoro-faq-item summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 4rem;
  border-radius: 1.25rem;
  padding: 1rem 1.5rem;
  color: var(--sea-deep, #064a78);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}

.otoro-faq-item summary::-webkit-details-marker {
  display: none;
}

.otoro-faq-mark {
  color: var(--accent-text);
  font-family: var(--otoro-font-sans);
  font-size: 1.4rem;
  font-stretch: 75%;
  font-weight: 700;
  line-height: 1.2;
}

/* 開閉の印（＋ / −）。縦の棒を回して消す。 */
.otoro-faq-toggle {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgba(6, 74, 120, 0.3);
  border-radius: 50%;
}

.otoro-faq-toggle::before,
.otoro-faq-toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 2px;
  margin: -1px 0 0 -0.35rem;
  background: #064a78;
  content: "";
  transition: transform 0.24s ease, opacity 0.24s ease;
}

.otoro-faq-toggle::after {
  transform: rotate(90deg);
}

.otoro-faq-item[open] .otoro-faq-toggle::after {
  opacity: 0;
  transform: rotate(0deg);
}

.otoro-faq-answer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  border-top: 1px solid rgba(6, 74, 120, 0.14);
  margin: 0 1.5rem;
  padding: 1.1rem 0 1.4rem;
}

.otoro-faq-answer .otoro-faq-mark {
  color: #0e7490;
}

.otoro-faq-answer p {
  color: var(--otoro-card-text);
  font-size: 0.95rem;
  line-height: 1.9;
}

/* お問い合わせへの誘導（一覧と詳細の末尾）。 */
.otoro-service-cta {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin-top: 4rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--otoro-radius-section);
  background: var(--otoro-glass-deep);
  box-shadow: 0 28px 78px rgba(0, 14, 28, 0.22);
  backdrop-filter: blur(10px);
  padding: clamp(2.25rem, 6vw, 4rem) 1.5rem;
  text-align: center;
}

.otoro-service-cta-title {
  color: #ffffff;
  font-family: var(--otoro-font-sans);
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  font-stretch: 75%;
  font-weight: 700;
  line-height: 1.4;
}

.otoro-service-cta-text {
  max-width: 38rem;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.9;
}

.otoro-service-cta .otoro-section-cta {
  gap: 0.5rem;
  margin-top: 0.75rem;
}

@media (max-width: 767px) {
  .otoro-service-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem 1.25rem;
    padding: 1.5rem 1.25rem;
  }

  .otoro-service-row-more {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .otoro-service-section {
    margin-top: 3rem;
  }

  .otoro-service-issues,
  .otoro-service-features {
    grid-template-columns: minmax(0, 1fr);
  }

  .otoro-service-step {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
  }

  .otoro-service-step-number {
    width: 3rem;
    height: 3rem;
    font-size: 1.2rem;
  }

  .otoro-service-step:not(:last-child)::before {
    top: 3rem;
    left: calc(1.5rem - 1px);
  }

  .otoro-service-step h3 {
    padding-top: 0.3rem;
  }

  .otoro-faq-item summary {
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
  }

  .otoro-faq-answer {
    margin: 0 1.1rem;
  }
}

/* 動きを減らす設定のときは、行や矢印を動かさない。 */
@media (prefers-reduced-motion: reduce) {
  .otoro-service-row,
  .otoro-service-row-more span,
  .otoro-faq-toggle::before,
  .otoro-faq-toggle::after {
    transition: none;
  }

  .otoro-service-row:hover,
  .otoro-service-row:hover .otoro-service-row-more span {
    transform: none;
  }
}