/*
Theme Name:        SOMA WEB DESIGN
Theme URI:         https://soma-web-design.example.com/
Author:            Soma Takahashi（高橋颯真）
Author URI:        https://soma-web-design.example.com/
Description:        鹿児島を拠点にWebサイト制作を行う SOMA WEB DESIGN のオリジナルポートフォリオテーマ。Works はカスタム投稿タイプ + ACF、お問い合わせは Contact Form 7 に対応。
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       soma
Tags:              portfolio, business, custom-post-type, contact-form, translation-ready
*/

/* ==========================================================
   このファイルはテーマのメインスタイルシートです。
   下記はトップページ共通スタイル（旧 css/top.css）を統合したもの。
   Works 詳細/一覧の追加スタイルは assets/css/works.css を
   条件付きでエンキューしています（functions.php 参照）。
   Colors: ink #1A1A1A / text #2A2A2A / accent #5B9BD5 / gray #F5F5F4
   ========================================================== */

/* padding を幅・高さに含める。
   これが無いと、left:0/right:0 を指定した要素に padding を付けたとき
   その分だけ画面からはみ出し、横スクロールが発生する（実際に発生していた）。 */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #FFFFFF;
  color: #2A2A2A;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #2A2A2A; text-decoration: none; }
a:hover { color: #5B9BD5; }

img { max-width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 30px 48px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  pointer-events: none;
}
.brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}
.brand .brand-en {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  letter-spacing: .32em;
  color: #1A1A1A;
}
.brand .brand-sub {
  font-size: 9px;
  letter-spacing: .38em;
  color: #1A1A1A;
  font-weight: 500;
}
.hamburger {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 4px;
}
.hamburger span {
  display: block;
  width: 36px;
  height: 1.5px;
  background: #1A1A1A;
}
.hamburger span:nth-child(1) { transition: transform .3s; }
.hamburger span:nth-child(2) { transition: opacity .3s; }
.hamburger span:nth-child(3) { transition: transform .3s; }
body.menu-open .hamburger span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
body.menu-open .hamburger span:nth-child(2) { opacity: 0; }
body.menu-open .hamburger span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }

/* ---------- Fullscreen menu ---------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(250,250,249,.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 38px;
}
body.menu-open .menu-overlay { display: flex; }
.menu-overlay a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.menu-overlay .en {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  letter-spacing: .28em;
  color: #1A1A1A;
  text-indent: .28em;
}
.menu-overlay .jp {
  font-family: 'Noto Serif JP', serif;
  font-size: 11px;
  letter-spacing: .25em;
  color: #2A2A2A;
}

/* ---------- Hero ---------- */
/* 横方向のはみ出しだけを切る。
   ⚠️ overflow: hidden にすると「スクロール範囲」とみなされ、
      子孫の position: sticky（About の写真固定）が効かなくなる。
      clip はスクロール範囲を作らないので sticky と併用できる。 */
main { overflow-x: clip; }

.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}
.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.72) 26%, rgba(255,255,255,.25) 48%, rgba(255,255,255,0) 68%);
}
.hero-copy {
  position: absolute;
  left: 8vw;
  top: 30%;
  transform: translateY(-50%);
}
.hero-copy h1 {
  margin: 0;
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 2.0;
  letter-spacing: .14em;
  color: #1A1A1A;
}
.hero-rule {
  width: min(300px, 30vw);
  height: 1px;
  background: #1A1A1A;
  margin-top: 28px;
}
.scroll-ind {
  position: absolute;
  left: 56px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.scroll-ind .label {
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: .35em;
  color: #1A1A1A;
}
.scroll-ind .line {
  position: relative;
  width: 1px;
  height: 72px;
  background: rgba(26,26,26,.12);
  overflow: hidden;
}
.scroll-ind .line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#1A1A1A 60%, #5B9BD5);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Section common ---------- */
.sec { scroll-margin-top: 40px; }
.sec.-white { background: #FFFFFF; padding: 120px 48px 130px; }
.sec.-gray  { background: #F5F5F4; padding: 110px 48px 120px; }

.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 72px;
}
.sec-head .tick {
  width: 1.5px;
  height: 26px;
  background: #5B9BD5;
}
.sec-head h2 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 38px;
  letter-spacing: .22em;
  color: #1A1A1A;
  text-indent: .22em;
}
.sec-head .jp {
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  letter-spacing: .22em;
  color: #2A2A2A;
}

/* VIEW MORE (line + arrow) */
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  letter-spacing: .3em;
  color: #1A1A1A;
}

/* ---------- About ---------- */
/* 写真を画面に留めたまま、右の文章だけが流れていく見せ方。
   sticky を効かせるには align-items が start である必要がある（center だと効かない）。
   文章が写真より高いぶんだけ写真が留まり、読み終わると次のセクションへ進む。 */
.about-grid {
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  /* 写真の幅は固定し、広げたぶんは文章側に回す。
     比率（5fr 6fr 等）にすると、幅を広げたときに写真まで一緒に大きくなり、
     固定して動く距離＝（文章の高さ − 写真の高さ）が縮んでしまうため。 */
  grid-template-columns: 460px 1fr;
  gap: 110px;
  align-items: start;
}
.about-photo {
  position: sticky;
  top: 96px;   /* 固定ヘッダーの下に収まる位置 */
}
/* 写真は縦長（2:3）。比率を写真と一致させてトリミングが起きないようにしている。
   比率は固定しているので、別の写真に差し替えてもレイアウトは崩れない
   （ただし横長の写真を入れると上下が切れる点は object-fit: cover のまま）。 */
.about-photo img {
  width: 100%;
  height: auto;   /* WPのheight属性がaspect-ratioを潰すため */
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
/* 白いベール。既定は透明で、スマホでのみ top.js が濃さを動かす。 */
.about-veil {
  position: absolute;
  inset: 0;
  background: #FAFAF9;
  opacity: 0;
  pointer-events: none;
}
/* 写真を留めるぶん、文章側は大きめ・ゆったりにして読ませる。
   （文章の高さが写真より低いと sticky が効かないため、余白も意図的に広くとっている） */
.about-text {
  padding: 40px 0 90px;
  /* 日本語を語句の切れ目で折り返す。「カタチ／に。」のような
     不自然な改行を防ぐ（auto-phrase 未対応ブラウザは通常の折り返しになる）。 */
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}
.about-text p {
  margin: 0 0 104px;
  font-weight: 300;
  font-size: 19px;
  line-height: 2.7;
  letter-spacing: .06em;
}
.about-text .quote {
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  line-height: 2.3;
  letter-spacing: .08em;
  color: #1A1A1A;
}
.about-text p:last-of-type { margin-bottom: 70px; }
.btn-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(91,155,213,.65);
  padding: 17px 58px 17px 44px;
  font-size: 12px;
  letter-spacing: .28em;
  color: #1A1A1A;
  transition: background .3s;
}
.btn-more:hover { background: rgba(91,155,213,.07); color: #1A1A1A; }
.btn-more svg {
  position: absolute;
  right: -26px;
  top: 50%;
  margin-top: -4px;
}

/* ---------- Works ---------- */
.works-wrap {
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 70px;
}
.works-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 26px;
  transition: opacity .26s;
}
.works-card {
  display: block;
  margin: 0;
  background: #FFFFFF;
  box-shadow: 0 2px 14px rgba(26,26,26,.05);
}
/* WordPress は画像に width / height 属性を自動で付ける。
   height 属性は CSS の height として扱われ、aspect-ratio より優先されてしまうため、
   aspect-ratio で高さを決めたい画像には必ず height: auto を添えること。
   （静的HTMLでは属性が無かったので問題にならなかったが、
     アイキャッチ画像にした途端カードの高さが揃わなくなる） */
.works-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.works-card .cap { padding: 20px 22px 24px; }
.works-card .title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: .08em;
  color: #1A1A1A;
  line-height: 1.9;
}
.works-card .en {
  margin-top: 8px;
  font-size: 9.5px;
  letter-spacing: .3em;
  color: rgba(42,42,42,.55);
}
.works-nav {
  position: absolute;
  top: 38%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
}
.works-nav.-prev { left: 0; }
.works-nav.-next { right: 0; }
.works-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 44px;
}
.works-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  background: #C9C9C6;
}
.works-dots button.is-active { background: #5B9BD5; }
.works-more {
  display: flex;
  justify-content: center;
  margin-top: 52px;
}

/* ---------- Service ---------- */
/* ==========================================================
   Service — スクロールでカードが切り替わる
   .svc-stage  … 縦に長い助走路。ここをスクロールする間、中身が画面に留まる
   .svc-sticky … 実際に留まる箱
   .svc-card   … 重ねて置き、有効なものだけ表示する（切り替えは top.js）
   ========================================================== */
/* Service は画面いっぱいを使う。セクションの左右余白も打ち消す。 */
#service.sec { padding: 0; }
.svc-stage {
  --svc-count: 4;
  position: relative;
  width: 100%;
  margin: 0;
  /* カード1枚あたり約0.85画面分の助走をとる */
  height: calc(var(--svc-count) * 85vh);
}
.svc-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 560px;
  /* 枠の縁が見える程度の余白だけ残して、あとは画面いっぱい。
     ⚠️ box-sizing を border-box にしないと padding が 100vh に加算され、
        要素が画面より高くなって sticky が正しく留まらなくなる。 */
  box-sizing: border-box;
  padding: clamp(20px, 2vw, 40px) clamp(14px, 1.4vw, 30px) clamp(24px, 2.4vw, 46px);
  display: flex;
  flex-direction: column;
}

/* 見出しは束の外。.svc-sticky の中にあるので、
   04 のカードを見終わるまで画面に留まり続ける。 */
.svc-headbar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 24px clamp(20px, 2.2vh, 34px);
}
.svc-headbar .tick {
  width: 1.5px;
  height: 20px;
  background: #5B9BD5;
}
.svc-headbar h2 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: .22em;
  color: #1A1A1A;
  text-indent: .22em;
}
.svc-headbar .jp {
  font-family: 'Noto Serif JP', serif;
  font-size: 12.5px;
  letter-spacing: .22em;
  color: rgba(42,42,42,.72);
}

/* ---------- カードの束（後ろから前へ繰り上がる） ----------
   待機中のカードがそのまま「後ろに重なった紙」になる。
   data-depth が 0 なら手前、1・2・3 と奥へ下がるにつれて
   少しずつ右下にずれ、小さくなる。めくると全体が1段ずつ前へ繰り上がる。 */
.svc-cardwrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.svc-card {
  position: absolute;
  /* 右下に奥行き分の余地を残す（奥のカードがここに収まる） */
  top: 0;
  left: 0;
  right: 44px;
  bottom: 44px;
  display: grid;
  grid-template-columns: 40% 1fr;
  background: #FFFFFF;
  border: 1px solid rgba(26,26,26,.16);
  box-shadow: 0 12px 34px rgba(26,26,26,.07);
  overflow: hidden;
  transition: transform .62s cubic-bezier(.22,1,.32,1),
              opacity .62s cubic-bezier(.22,1,.32,1),
              box-shadow .62s;
}

/* 手前（いま読んでいるカード） */
.svc-card[data-depth="0"] {
  transform: none;
  opacity: 1;
  z-index: 40;
}
/* 後ろに控えているカード。奥へいくほど右下にずれて小さくなる */
.svc-card[data-depth="1"] {
  transform: translate(15px, 15px) scale(.988);
  opacity: 1;
  z-index: 30;
  box-shadow: 0 8px 20px rgba(26,26,26,.05);
}
.svc-card[data-depth="2"] {
  transform: translate(29px, 29px) scale(.976);
  opacity: 1;
  z-index: 20;
  box-shadow: 0 6px 14px rgba(26,26,26,.04);
}
.svc-card[data-depth="3"] {
  transform: translate(42px, 42px) scale(.964);
  opacity: 1;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(26,26,26,.03);
}
/* めくり終えたカード＝左上へ払われて消える */
.svc-card[data-depth="-1"] {
  transform: translate(-54px, -34px) rotate(-2.4deg) scale(1.015);
  opacity: 0;
  z-index: 50;
  pointer-events: none;
}

.svc-photo { position: relative; overflow: hidden; background: #F5F5F4; }
.svc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.svc-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 4vw, 90px);
  text-align: left;
}
.svc-body .svc-icon { display: block; margin-bottom: 20px; }
.svc-count {
  margin: 0 0 14px;
  font-family: 'Playfair Display', serif;
  font-size: 12px;
  letter-spacing: .28em;
  color: #5B9BD5;
}
.svc-count span { margin-left: 8px; color: rgba(42,42,42,.4); }
.svc-body h3 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: .18em;
  color: #1A1A1A;
}
.svc-jp {
  margin: 12px 0 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 14.5px;
  letter-spacing: .16em;
  color: #2A2A2A;
}
.svc-rule {
  width: 26px;
  height: 1px;
  background: rgba(26,26,26,.25);
  margin: 24px 0;
}
.svc-desc {
  margin: 0;
  font-weight: 300;
  font-size: 15.5px;
  line-height: 2.2;
  letter-spacing: .05em;
  color: #1A1A1A;
}
.svc-detail {
  max-width: 640px;
  margin: 18px 0 0;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 2.1;
  letter-spacing: .04em;
  color: rgba(42,42,42,.78);
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* JSが無い／動きを減らす設定のときは、重ねずに縦に並べて全部見せる */
.no-js .svc-stage,
.svc-stage.is-static { height: auto; }
.no-js .svc-sticky,
.svc-stage.is-static .svc-sticky { position: static; height: auto; min-height: 0; display: block; }
.no-js .svc-cardwrap,
.svc-stage.is-static .svc-cardwrap { position: static; }
.no-js .svc-card,
.svc-stage.is-static .svc-card {
  position: static;
  inset: auto;
  transform: none !important;
  opacity: 1 !important;
  box-shadow: none;
  margin-bottom: 28px;
}

/* ---------- Flow ---------- */
.flow-row {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}
.flow-cell {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
}
.flow-arrow {
  flex: none;
  padding-top: 74px;
}
.flow-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.flow-step .num {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  letter-spacing: .2em;
  color: #1A1A1A;
}
.flow-step .title {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  letter-spacing: .15em;
  color: #1A1A1A;
}
.flow-step .desc {
  font-weight: 300;
  font-size: 11.5px;
  line-height: 2;
  letter-spacing: .04em;
  color: rgba(42,42,42,.8);
}

.flow-note {
  max-width: 760px;
  margin: 64px auto 0;
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 2.2;
  letter-spacing: .06em;
  color: rgba(42,42,42,.85);
}
.contact-cta { margin: 40px 0 0 22px; }

/* ---------- Contact ---------- */
/* 写真を上下いっぱいに使う。460px 固定では写真が帯のように細く見えるため、
   画面高さに応じて伸びるようにした（min/max で極端な高さを防ぐ）。 */
.contact {
  position: relative;
  height: clamp(560px, 82vh, 860px);
  scroll-margin-top: 40px;
}
.contact-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right 72%;
  background: #0d1a24;
}
.contact-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.85) 28%, rgba(255,255,255,.3) 55%, rgba(255,255,255,0) 75%);
}
.contact-copy {
  position: absolute;
  left: 8vw;
  top: 50%;
  transform: translateY(-50%);
}
.contact-head {
  display: flex;
  align-items: center;
  gap: 20px;
}
.contact-head .bar {
  width: 2px;
  height: 34px;
  background: #5B9BD5;
}
.contact-head h2 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 34px;
  letter-spacing: .22em;
  color: #1A1A1A;
}
.contact-copy .jp {
  margin: 16px 0 0 22px;
  font-family: 'Noto Serif JP', serif;
  font-size: 12px;
  letter-spacing: .22em;
  color: #2A2A2A;
}
.contact-copy .lead {
  margin: 30px 0 0 22px;
  font-weight: 300;
  font-size: 14px;
  line-height: 2.2;
  letter-spacing: .06em;
}
.contact-copy .more-link { margin: 34px 0 0 22px; }

/* ---------- Footer ---------- */
.site-footer {
  background: #1A1A1A;
  padding: 64px 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}
.site-footer .brand-f {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.site-footer .brand-f .en {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  letter-spacing: .34em;
  color: #FFFFFF;
  text-indent: .34em;
}
.site-footer .brand-f .sub {
  font-size: 8.5px;
  letter-spacing: .42em;
  color: rgba(255,255,255,.65);
  text-indent: .42em;
}
.site-footer nav {
  display: flex;
  /* 5項目 × gap36px は狭い画面で画面幅を超える（実際に横スクロールが出ていた）。
     折り返しを許可し、gap も画面幅に応じて縮むようにする。 */
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 4vw, 36px);
  max-width: 100%;
}
.site-footer nav a {
  font-size: 11px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.7);
}
.site-footer nav a:hover { color: #5B9BD5; }
.site-footer .copyright {
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.4);
}

/* ==========================================================
   Contact form（Contact Form 7）
   ========================================================== */
.contact-form-wrap {
  background: #FFFFFF;
  padding: 96px 48px 120px;
}
.contact-form {
  max-width: 620px;
  margin: 0 auto;
}
.contact-form-lead {
  margin: 0 0 44px;
  text-align: center;
  font-weight: 300;
  font-size: 14px;
  line-height: 2.2;
  letter-spacing: .05em;
  color: rgba(42,42,42,.85);
}
.contact-form .wpcf7-form p {
  margin: 0 0 26px;
}
.contact-form label {
  display: block;
  font-size: 12px;
  letter-spacing: .16em;
  color: #1A1A1A;
  margin-bottom: 10px;
}
/* 必須 / 任意 の小さなラベル（縁の青は必須のみに点として使う） */
.contact-form label .req,
.contact-form label .opt {
  margin-left: 10px;
  padding: 2px 7px;
  font-size: 9.5px;
  letter-spacing: .14em;
  vertical-align: 1px;
}
.contact-form label .req {
  border: 1px solid rgba(91,155,213,.55);
  color: #5B9BD5;
}
.contact-form label .opt {
  border: 1px solid rgba(26,26,26,.18);
  color: rgba(42,42,42,.6);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form textarea,
.contact-form select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(26,26,26,.18);
  background: #FCFCFB;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.8;
  color: #2A2A2A;
  border-radius: 0;
  transition: border-color .25s;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: #5B9BD5;
  background: #FFFFFF;
}
.contact-form textarea {
  min-height: 168px;
  resize: vertical;
}
.contact-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  border: 1px solid rgba(91,155,213,.65);
  background: none;
  padding: 16px 56px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .28em;
  color: #1A1A1A;
  cursor: pointer;
  transition: background .3s;
}
.contact-form .wpcf7-submit:hover {
  background: rgba(91,155,213,.07);
}
.contact-form .wpcf7-spinner {
  margin: 0 0 0 14px;
}
/* CF7 のバリデーション / レスポンス表示
   ブランド方針により赤い警告色は使わず、墨色の細い枠と
   「縁の青」の1pxラインだけで状態を示す。 */
.contact-form .wpcf7-not-valid-tip {
  color: rgba(26,26,26,.8);
  font-size: 11px;
  letter-spacing: .04em;
  margin-top: 6px;
}
/* 未入力・不正な入力欄は枠線を縁の青に */
.contact-form .wpcf7-not-valid {
  border-color: #5B9BD5 !important;
}
.contact-form .wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 16px 20px !important;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .04em;
  border: 1px solid rgba(26,26,26,.22) !important;
  background: #FCFCFB;
  color: rgba(42,42,42,.9);
}
/* 送信成功：左辺だけ縁の青にして、静かに完了を示す */
.contact-form .wpcf7 form.sent .wpcf7-response-output {
  border-left: 2px solid #5B9BD5 !important;
  color: #1A1A1A;
}
/* エラー系：枠線は同じまま、文字だけ濃くする */
.contact-form .wpcf7 form.invalid .wpcf7-response-output,
.contact-form .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form .wpcf7 form.payment-required .wpcf7-response-output,
.contact-form .wpcf7 form.spam .wpcf7-response-output,
.contact-form .wpcf7 form.failed .wpcf7-response-output,
.contact-form .wpcf7 form.aborted .wpcf7-response-output {
  color: #1A1A1A;
}
/* CF7 未導入時の管理者向け注意書き */
.soma-form-notice {
  text-align: center;
  font-size: 13px;
  color: #C0392B;
  letter-spacing: .04em;
}

/* ---------- Contact 単独ページ（page-contact.php） ----------
   もとはトップページ内のセクションだったが1ページに独立させた。
   見出しは .page-head が担当するので、フォーム側の上余白を詰める。 */
.contact-page-form { padding-top: 78px; }

.contact-note {
  max-width: 620px;
  margin: 40px auto 0;
  font-weight: 300;
  font-size: 12px;
  line-height: 2.1;
  letter-spacing: .04em;
  color: rgba(42,42,42,.62);
}

.contact-back {
  margin-top: 66px;
  text-align: center;
}

@media (max-width: 640px) {
  .contact-page-form { padding-top: 56px; }
}

/* ==========================================================
   汎用ページ（固定ページ / 404 / アーカイブ）
   ※ Works 一覧・詳細は assets/css/works.css が上書き
   ========================================================== */
.subpage main { display: block; }
.subpage .site-header {
  background: linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.6) 55%, rgba(255,255,255,0));
}
.page-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 172px 48px 0;
}
.page-head .tick { width: 1.5px; height: 26px; background: #5B9BD5; }
.page-head .en {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 40px;
  letter-spacing: .22em;
  color: #1A1A1A;
  text-indent: .22em;
}
.page-head .jp {
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  letter-spacing: .22em;
  color: #2A2A2A;
}
.page-head .lead {
  max-width: 660px;
  margin: 14px auto 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 2.3;
  letter-spacing: .05em;
  color: rgba(42,42,42,.85);
}
.page-content {
  max-width: 720px;
  margin: 56px auto 0;
  padding: 0 48px 120px;
  font-weight: 300;
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: .04em;
}
.page-content h2 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  letter-spacing: .06em;
  color: #1A1A1A;
}
.page-content a { color: #5B9BD5; }

/* --- 読み物（規約ページなど）用の本文スタイル --- */
/* 既存トークンのみ使用。長文の固定ページを読みやすくする。 */
.page-content > :first-child { margin-top: 0; }
.page-content h2 {
  margin: 64px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(26,26,26,.12);
  font-size: 19px;
  line-height: 1.7;
}
.page-content h3 {
  margin: 40px 0 14px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .05em;
  color: #1A1A1A;
}
.page-content p { margin: 0 0 20px; color: #2A2A2A; }
.page-content ul,
.page-content ol { margin: 0 0 24px; padding-left: 1.4em; }
.page-content li { margin-bottom: 10px; }
.page-content li::marker { color: rgba(42,42,42,.5); }
.page-content a:hover { text-decoration: underline; text-underline-offset: 4px; }
.page-content dl { margin: 0 0 24px; }
.page-content dt {
  margin-top: 22px;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: .05em;
  color: #1A1A1A;
}
.page-content dd { margin: 6px 0 0; padding-left: 1.2em; color: #2A2A2A; }
.page-content strong { font-weight: 500; color: #1A1A1A; }
.page-content hr {
  margin: 48px 0;
  border: 0;
  border-top: 1px solid rgba(26,26,26,.12);
}
.page-content .note {
  margin: 32px 0 0;
  padding: 20px 24px;
  background: #F5F5F4;
  font-size: 13.5px;
  line-height: 2;
  color: rgba(42,42,42,.85);
}
.page-back { margin: 72px 0 0; text-align: center; }
.page-back .btn-more { padding-right: 44px; }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { border-bottom: 1px solid rgba(26,26,26,.12); }
.post-list a { display: flex; gap: 20px; padding: 22px 4px; align-items: baseline; }
.post-list .post-date {
  font-family: 'Playfair Display', serif;
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(42,42,42,.5);
  flex: none;
}
.post-pagination { margin-top: 40px; text-align: center; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1024px) {
  .site-header { padding: 24px 32px; }
  .sec.-white, .sec.-gray {
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 84px;
    padding-bottom: 88px;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 44px;
    max-width: 560px;
  }
  /* 写真を画面に留めたまま、その上を文章が流れていく。
     文章側に白い半透明＋ぼかしを敷くことで、写真が透けて見えつつ文字が読める。
     文章は写真より後ろのDOM順にあるので、自然に上へ重なる。 */
  /* 写真を画面に留め、しばらく写真だけを見せたあと、
     ベールが写真全体に白くフェードインする。その上を文章が流れる。
     ベールの濃さは top.js がスクロール量から決める。 */
  .about-grid { position: relative; gap: 0; }
  .about-photo {
    position: sticky;
    top: 56px;
    z-index: 0;
    /* sticky が止まる位置は「包み箱の下端 − この margin」で決まる。
       0 のままだと写真が .about-grid の一番下まで居座り、
       文末の VIEW MORE が写真の上に乗ってしまう。
       ここで早めに解除して、CTA を写真の下の白地に落とす。
       下の .about-text の margin-top と合計で「写真と本文の間」になるので、
       片方だけ変えると間隔がずれる。 */
    margin-bottom: 180px;
  }
  .about-veil {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .about-text {
    position: relative;
    z-index: 1;
    /* 写真が固定されてから白が出るまでの「間」。
       上の .about-photo の margin-bottom(180px) と足して 240px。
       見た目の間隔を変えずに sticky だけ早く終わらせるための配分なので、
       間隔を変えたいときは両方の合計で考えること。 */
    margin-top: 60px;
    padding: 0 22px 64px;
  }

  /* 狭い画面で画面を占有し続けると読みづらいので、カードは縦に並べて全部見せる。 */
  /* Service は狭い画面でもPCと同じ「束をめくる」動きのまま。
     ただし横並びだと窮屈なので、写真を上・本文を下の縦並びにする。 */
  /* 左右の余白は最小限にして、カードに画面幅を使わせる。
     右下のずれ幅（束の奥行き）だけを空けておく。 */
  .svc-sticky { padding: 14px 8px 18px; }
  .svc-headbar { padding: 0 12px 16px; }
  .svc-card {
    grid-template-columns: 1fr;      /* 写真は上、本文は下 */
    /* カードは overflow:hidden なので、本文が収まらないと文字が消える。
       写真の取り分を 42% → 34% に減らして本文の場所を確保している。
       ここを増やすと、縦の短い端末で説明文の末尾が切れる。 */
    grid-template-rows: 34% 1fr;
    right: 16px;
    bottom: 16px;
  }
  .svc-card[data-depth="1"] { transform: translate(6px, 6px) scale(.992); }
  .svc-card[data-depth="2"] { transform: translate(11px, 11px) scale(.985); }
  .svc-card[data-depth="3"] { transform: translate(16px, 16px) scale(.978); }
  .svc-card[data-depth="-1"] { transform: translate(-32px, -22px) rotate(-2deg) scale(1.01); }
  .svc-body { padding: 18px 20px; }
  .svc-body .svc-icon { margin-bottom: 12px; }
  .svc-rule { margin: 16px 0; }
  .svc-desc { font-size: 14px; line-height: 2; }
  .svc-detail { font-size: 12.5px; line-height: 1.95; margin-top: 12px; }
  /* padding は上の .about-text（写真に重ねる指定）で設定済み。ここで打ち消さないこと。 */
  .about-text p { font-size: 15px; line-height: 2.3; margin-bottom: 30px; }
  .about-text .quote { font-size: 18px; }
  /* スマホでは本文が中央寄りの見た目になるため、CTAも中央に置く。
     （左寄せのままだと下に取り残されたように見える） */
  .about-text .btn-more {
    display: flex;
    justify-content: center;
    margin: 4px auto 0;
    width: fit-content;
  }
  .works-grid { grid-template-columns: 1fr 1fr; }
  .works-wrap { max-width: 640px; }
  .contact-form-wrap { padding-left: 32px; padding-right: 32px; }
  .page-head { padding: 148px 32px 0; }
  .page-content { padding-left: 32px; padding-right: 32px; }
}

/* ==========================================================
   画面の「高さ」が足りない端末（小型スマホ、ブラウザのバー込みで
   表示領域が狭い状態、1024x600 のような小型ノート）
   ----------------------------------------------------------
   Service のカードは高さが画面に連動し、overflow:hidden なので、
   入りきらない文字は表示されずに消える。
   ここでは補足説明（.svc-detail）だけを落とし、
   見出しとリード文（.svc-desc）は必ず残す。
   文章を削る対応は front-page.php の $services 側で済ませてあるので、
   これは「それでも足りない端末」のための最後の受け皿。
   ========================================================== */
@media (max-width: 1024px) and (max-height: 720px) {
  .svc-detail { display: none; }
}

@media (max-width: 640px) {
  .site-header { padding: 18px 20px; }
  .sec.-white, .sec.-gray {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 68px;
    padding-bottom: 70px;
  }
  .hero-copy h1 { font-size: 26px; line-height: 1.95; }
  .scroll-ind { left: 20px; }
  .works-grid { grid-template-columns: 1fr; }
  .works-wrap { padding-left: 0; padding-right: 0; max-width: 420px; }
  .works-nav { display: none; }
  .flow-row {
    flex-direction: column;
    align-items: center;
    gap: 52px;
  }
  .flow-arrow { display: none; }
  .contact-copy { left: 22px; right: 22px; top: 24%; }
  .contact-photo { object-position: center; }
  .contact-form-wrap { padding: 68px 20px 80px; }
  .page-head { padding: 128px 20px 0; }
  .page-head .en { font-size: 32px; }
  .page-content { padding-left: 20px; padding-right: 20px; }
}

/* ==========================================================
   Reveal（スクロール連動フェードイン）
   assets/js/common.js が .in を付与する。
   もとは works.css にあったが、固定ページ・404 でも使うため全体へ移動。
   ========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }

/* 動きを減らす設定の環境では、フェードせず最初から表示する。 */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}