@charset "UTF-8";

/* ================================================================
   Naoya Miyamoto Portfolio — スタイルシート
   ================================================================
   目次:
   1. 変数定義（カラー・フォント）
   2. リセット・グローバルスタイル
   3. 共通コンポーネント（セクションラベル・ボタン等）
   4. ナビゲーション（PC / モバイル）
   5. ヒーローセクション
   6. トラストバー（実績バッジ）
   7. About セクション
   8. Service セクション
   9. Skills セクション
   10. Works セクション
   11. Flow セクション（制作の流れ）
   12. Appeal セクション（選ばれる理由）
   13. SEO Appeal セクション
   14. Monthly Plan セクション（月額プラン）
   15. FAQ セクション
   16. Contact セクション
   17. フッター
   18. レスポンシブ（タブレット：960px以下）
   19. レスポンシブ（スマホ：600px以下）
   ================================================================ */


/* ==========================================================
   1. 変数定義（カラー・フォント）
   ========================================================== */
:root {
  /* グレースケール（g950が最も暗く、g50が最も明るい） */
  --g950: #0d0d0d;
  --g900: #1a1a1a;
  --g800: #2a2a2a;
  --g700: #3d3d3d;
  --g600: #555;
  --g500: #737373;
  --g400: #9a9a9a;
  --g300: #c2c2c2;
  --g200: #e0e0e0;
  --g100: #f0f0f0;
  --g50: #f8f8f8;
  --white: #fff;

  /* アクセントカラー（ベージュ/ゴールド系） */
  --ac: #b8a990;
  /* メインアクセント */
  --acl: #d4c9b8;
  /* アクセント（明） */
  --acd: #9a8c7a;
  /* アクセント（暗） */

  /* フォントファミリー */
  --fd: 'Cormorant Garamond', serif;
  /* 見出し・装飾用（欧文セリフ） */
  --fb: 'Noto Sans JP', sans-serif;
  /* 本文用（日本語ゴシック） */

  /* ボーダー半径 */
  --r: 0px;
}


/* ==========================================================
   2. リセット・グローバルスタイル
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--g50);
  color: var(--g900);
  font-family: var(--fb);
  font-weight: 300;
  line-height: 1.8;
  overflow-x: hidden;
}

/* カスタムスクロールバー */
::-webkit-scrollbar {
  width: 3px;
}

::-webkit-scrollbar-track {
  background: var(--g100);
}

::-webkit-scrollbar-thumb {
  background: var(--g400);
}


/* ==========================================================
   3. 共通コンポーネント
   ========================================================== */

/* --- セクション共通 --- */
section {
  padding: 8rem 5rem;
}

.inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* --- セクションラベル（英語の小見出し） --- */
.sec-label {
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: .9rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}

.sec-label::before {
  content: '';
  display: block;
  width: 26px;
  height: 1px;
  background: var(--ac);
}

/* --- セクション見出し（h2） --- */
h2 {
  font-family: var(--fd);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--g900);
  margin-bottom: 1.2rem;
}

/* --- セクションリード文 --- */
.sec-lead {
  font-size: .9rem;
  color: var(--g600);
  line-height: 2.1;
  max-width: 580px;
  margin-bottom: 3.5rem;
}

/* --- フェードインアニメーション --- */
.fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- CTAボタン（塗りつぶし） --- */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--ac);
  color: var(--g950);
  padding: .85rem 2rem;
  font-size: .75rem;
  letter-spacing: .18em;
  text-decoration: none;
  font-family: var(--fb);
  transition: background .25s, transform .3s ease, box-shadow .3s ease;
  white-space: nowrap;
  cursor: pointer;
  border: none;
}

.cta-btn:hover {
  background: var(--acl);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(184, 169, 144, .3);
}

.cta-btn svg {
  width: 15px;
  height: 15px;
  fill: var(--g950);
  flex-shrink: 0;
}

/* --- CTAボタン（アウトライン / ヒーロー内で使用） --- */
.cta-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--white);
  color: var(--white);
  padding: .85rem 2rem;
  font-size: .75rem;
  letter-spacing: .18em;
  text-decoration: none;
  font-family: var(--fb);
  transition: all .25s;
  white-space: nowrap;
  cursor: pointer;
  background: none;
}

.cta-btn-outline:hover {
  background: var(--white);
  color: var(--g950);
}

/* --- CTA中央揃え・補足テキスト --- */
.cta-center {
  text-align: center;
  margin-top: 3rem;
}

.cta-note {
  font-size: .72rem;
  color: var(--g500);
  margin-top: .8rem;
  letter-spacing: .05em;
}


/* ==========================================================
   4. ナビゲーション
   ========================================================== */

/* --- PC ナビバー --- */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 3rem;
  background: rgba(248, 248, 248, .94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--g200);
  transition: padding .3s;
  /* スクロール時の縮小アニメーション */
}

/* ロゴ */
.nav-logo {
  font-family: var(--fd);
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: .12em;
  color: var(--g900);
  text-decoration: none;
}

/* ナビリンク */
.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--g600);
  text-decoration: none;
  transition: color .2s;
}

.nav-links a:hover {
  color: var(--g900);
}

/* ナビCTAボタン */
.nav-cta {
  font-size: .68rem;
  letter-spacing: .15em;
  background: var(--ac);
  color: var(--g950);
  padding: .52rem 1.3rem;
  text-decoration: none;
  font-family: var(--fb);
  transition: background .25s;
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--acl);
}

/* --- ハンバーガーメニュー（モバイル用） --- */
.hamburger {
  display: none;
  /* PCでは非表示 */
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--g800);
}

/* --- モバイルナビ（フルスクリーンオーバーレイ） --- */
.m-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--g950);
  z-index: 300;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.m-nav.open {
  display: flex;
}

/* モバイルナビのリンク */
.m-nav a {
  font-family: var(--fd);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--white);
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s, transform .4s;
}

.m-nav.open a {
  opacity: 1;
  transform: translateY(0);
}

/* リンクの段階的アニメーション */
.m-nav.open a:nth-child(2) {
  transition-delay: .05s;
}

.m-nav.open a:nth-child(3) {
  transition-delay: .1s;
}

.m-nav.open a:nth-child(4) {
  transition-delay: .15s;
}

.m-nav.open a:nth-child(5) {
  transition-delay: .2s;
}

.m-nav.open a:nth-child(6) {
  transition-delay: .25s;
}

.m-nav.open a:nth-child(7) {
  transition-delay: .3s;
}

.m-nav.open a:nth-child(8) {
  transition-delay: .35s;
}

/* 閉じるボタン */
.m-close {
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  font-size: 1.8rem;
  color: var(--g500);
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
}


/* ==========================================================
   5. ヒーローセクション
   ========================================================== */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 5rem;
  position: relative;
  overflow: hidden;
  background: #020308;
  cursor: none;
}

/* カスタムカーソル */
#cursor {
  position: fixed;
  z-index: 9999;
  width: 8px;
  height: 8px;
  background: var(--ac);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .5s ease;
}

#cursor-ring {
  position: fixed;
  z-index: 9998;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(184, 169, 144, .5);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .3s, height .3s, border-color .3s;
  opacity: 0;
  transition: opacity .5s ease, width .3s, height .3s, border-color .3s;
}

body.revealed #cursor,
body.revealed #cursor-ring {
  opacity: 1;
}

/* ヒーローのCanvas背景（シルクリボン） */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ビネットオーバーレイ */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(ellipse at center, transparent 20%, rgba(2, 3, 8, .5) 62%, rgba(2, 3, 8, .97) 100%);
  pointer-events: none;
}

/* スキャンラインオーバーレイ */
.hero-scanline {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: repeating-linear-gradient(to bottom, transparent, transparent 3px, rgba(0, 0, 0, .022) 3px, rgba(0, 0, 0, .022) 4px);
  pointer-events: none;
}

/* 背景の大きなテキスト装飾 */
.hero-bg-word {
  position: absolute;
  top: 50%;
  left: -.02em;
  transform: translateY(-50%);
  z-index: 1;
  font-family: var(--fd);
  font-size: clamp(7rem, 22vw, 22rem);
  font-weight: 300;
  color: rgba(255, 255, 255, .025);
  line-height: 1;
  user-select: none;
  pointer-events: none;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* ヒーローコンテンツ */
.hero-content {
  position: relative;
  z-index: 5;
  max-width: 700px;
  padding-top: 6rem;
  /* ナビ固定分の余白 */
  padding-bottom: 4rem;
}

/* バッジ（Web Coder / Designer） */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-size: .67rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 2rem;
}

.hero-badge::before {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  background: var(--ac);
}

/* メインキャッチコピー（h1） */
.hero-h1 {
  font-family: 'Zen Old Mincho', 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3.8vw, 3.5rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--white);
  letter-spacing: .04em;
  margin-bottom: 2.2rem;
}

.hero-h1 .hero-line1 {
  display: block;
  font-size: clamp(.85rem, 1.5vw, 1.1rem);
  font-family: var(--fb);
  font-weight: 300;
  letter-spacing: .12em;
  color: var(--ac);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* ラインバイラインリビール */
.hero-h1 .hero-line {
  display: block;
  overflow: hidden;
}

.hero-h1 .hero-line-inner {
  display: block;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}

.hero-h1 .hero-line:nth-child(2) .hero-line-inner {
  transition-delay: 0s;
}

.hero-h1 .hero-line:nth-child(3) .hero-line-inner {
  transition-delay: .2s;
}

.hero-h1 .hero-line:nth-child(4) .hero-line-inner {
  transition-delay: .4s;
}

body.revealed .hero-h1 .hero-line-inner {
  opacity: 1;
  transform: translateY(0);
}

/* 説明文 */
.hero-desc {
  font-size: .84rem;
  color: var(--g400);
  max-width: 500px;
  margin-bottom: .6rem;
  line-height: 2.1;
}

.hero-desc2 {
  font-size: .76rem;
  color: var(--g600);
  max-width: 480px;
  margin-bottom: 3rem;
  line-height: 2;
}

/* ボタングループ（縦並び） */
.hero-btns {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  align-items: flex-start;
}

.hero-btn-note {
  font-size: .67rem;
  color: var(--g600);
  letter-spacing: .06em;
  margin-top: .2rem;
}

/* スクロールインジケーター */
.hero-scroll {
  position: absolute;
  bottom: 3rem;
  right: 4rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--g600);
  font-size: .6rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.hero-scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 52px;
  background: var(--g600);
  animation: sLine 1.8s ease-in-out infinite;
}

/* スクロールラインアニメーション */
@keyframes sLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}


/* ==========================================================
   6. トラストバー（実績バッジ）
   ========================================================== */
#trust {
  padding: 2rem 3rem;
  background: var(--white);
  border-bottom: 1px solid var(--g200);
}

.trust-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.5rem;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .75rem;
  color: var(--g600);
  letter-spacing: .06em;
}

.trust-item strong {
  font-weight: 500;
  color: var(--g900);
}

.trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--ac);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  flex-shrink: 0;
}

/* セパレーター（縦線） */
.trust-sep {
  width: 1px;
  height: 28px;
  background: var(--g200);
}


/* ==========================================================
   7. About セクション
   ========================================================== */
#about {
  background: var(--g50);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: center;
}

/* プロフィール写真エリア */
.photo-wrap {
  position: relative;
}

/* 写真の装飾枠（ずらしたボーダー） */
.photo-deco {
 /* position: absolute;
  top: -14px;
  left: -14px;
  width: 80%;
  aspect-ratio: 3/4;
  border: 1px solid var(--g200);*/
  z-index: 0;
}

/* 写真ボックス */
.photo-box {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--g200);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.photo-box svg {
  width: 52px;
  height: 52px;
  stroke: var(--g400);
  fill: none;
  stroke-width: 1;
}

/* テキストエリア */
.about-text p {
  font-size: .88rem;
  color: var(--g700);
  margin-bottom: 1.1rem;
  line-height: 2;
}

/* 実績数値エリア */
.stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 2.2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--g200);
  flex-wrap: wrap;
}

.stat-n {
  font-family: var(--fd);
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--g900);
  line-height: 1;
}

.stat-l {
  font-size: .66rem;
  letter-spacing: .14em;
  color: var(--g500);
  margin-top: .22rem;
}


/* ==========================================================
   8. Service セクション（ワンストップ対応）
   ========================================================== */
#service {
  background: var(--white);
}

.service-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 3.5rem;
}

/* サービスアイテム（2カラムグリッド） */
.s-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--g50);
  border: 1px solid var(--g200);
}

/* 偶数番目は左右反転 */
.s-item.rev {
  direction: rtl;
}

.s-item.rev>* {
  direction: ltr;
}

/* サービス画像エリア */
.s-img {
  background: var(--g100);
  display: block;
  overflow: hidden;
  position: relative;
  min-height: 280px;
}

.s-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 0.6s ease;
}

.s-item:hover .s-img img {
  transform: scale(1.15);
}

/* プレースホルダー */
.s-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  color: var(--g400);
}

.s-ph svg {
  width: 40px;
  height: 40px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1;
}

.s-ph span {
  font-size: .63rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* サービス説明エリア */
.s-body {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.s-num {
  font-family: var(--fd);
  font-size: 3.5rem;
  font-weight: 300;
  color: var(--ac);
  opacity: .55;
  line-height: 1;
  margin-bottom: .7rem;
}

.s-title {
  font-size: .95rem;
  font-weight: 500;
  color: var(--g900);
  letter-spacing: .05em;
  margin-bottom: .6rem;
}

.s-text {
  font-size: .81rem;
  color: var(--g600);
  line-height: 2;
}

/* タグ一覧 */
.s-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .9rem;
}

.s-tag {
  font-size: .62rem;
  letter-spacing: .1em;
  padding: .25rem .65rem;
  border: 1px solid var(--g300);
  color: var(--g500);
}


/* ==========================================================
   9. Skills セクション
   ========================================================== */
#skills {
  background: var(--g50);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.5px;
  background: var(--g200);
  border: 1px solid var(--g200);
  margin-bottom: 3.5rem;
}

/* スキルカード */
.sk-card {
  background: var(--white);
  padding: 2rem 1.6rem;
  transition: background .2s;
}

.sk-card:hover {
  background: var(--g50);
}

.sk-icon {
  width: 32px;
  height: 32px;
  margin-bottom: .8rem;
  color: var(--ac);
}

.sk-name {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--g900);
  margin-bottom: .35rem;
}

.sk-desc {
  font-size: .75rem;
  color: var(--g500);
  line-height: 1.75;
}

/* スキルバー（習熟度） */
.bar-wrap {
  margin-top: 1rem;
}

.bar-bg {
  height: 1px;
  background: var(--g200);
}

.bar {
  height: 1px;
  background: var(--ac);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s ease;
}

.bar.on {
  transform: scaleX(1);
}


/* ==========================================================
   10. Works セクション（制作実績）
   ========================================================== */
#works {
  background: var(--white);
}

/* フィルターボタン群 */
.wf {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: 2.2rem;
}

.f-btn {
  font-size: .67rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding: .46rem .95rem;
  border: 1px solid var(--g300);
  background: transparent;
  color: var(--g600);
  cursor: pointer;
  transition: all .2s;
  font-family: var(--fb);
}

.f-btn:hover,
.f-btn.active {
  background: var(--g900);
  border-color: var(--g900);
  color: var(--white);
}

/* Worksグリッド */
.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-bottom: 3rem;
}

/* ===== 作品カードリンク ===== */
.w-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* ===== 作品カード ===== */
.w-card {
  background: linear-gradient(135deg, #f5f0ea 0%, #ece6dc 100%);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}

.w-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .1);
}

/* モックアップエリア */
.w-card-mockup {
  position: relative;
  padding: 2.5rem 2rem 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 320px;
}

/* ===== ラップトップモックアップ ===== */
.mockup-laptop {
  position: relative;
  width: 72%;
  z-index: 1;
}

.mockup-laptop-screen {
  background: #1a1a1a;
  border-radius: 8px 8px 0 0;
  padding: 6px 6px 0;
  position: relative;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
}

/* カメラドット */
.mockup-laptop-screen::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: #444;
  border-radius: 50%;
  z-index: 2;
}

.mockup-laptop-screen img {
  width: 100%;
  display: block;
  border-radius: 2px 2px 0 0;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

/* ラップトップ下部のベース */
.mockup-laptop-base {
  height: 12px;
  background: linear-gradient(180deg, #c8c8c8 0%, #b0b0b0 40%, #d0d0d0 100%);
  border-radius: 0 0 4px 4px;
  position: relative;
}

.mockup-laptop-base::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 4px;
  background: #aaa;
  border-radius: 0 0 8px 8px;
}

/* ===== スマホモックアップ ===== */
.mockup-phone {
  position: absolute;
  right: 8%;
  bottom: 0;
  width: 18%;
  min-width: 80px;
  background: #1a1a1a;
  border-radius: 14px 14px 14px 14px;
  padding: 8px 4px 10px;
  box-shadow: -4px 4px 20px rgba(0, 0, 0, .2);
  z-index: 2;
}

/* ノッチ */
.mockup-phone-notch {
  width: 40%;
  height: 5px;
  background: #333;
  border-radius: 10px;
  margin: 0 auto 4px;
}

.mockup-phone-screen {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}

.mockup-phone-screen img {
  width: 100%;
  display: block;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: top;
}

/* ===== カード下部情報 ===== */
.w-card-info {
  padding: 1.2rem 1.8rem 1.6rem;
  text-align: center;
}

.w-card-tags {
  display: flex;
  gap: .45rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}

.w-card-tag {
  font-size: .62rem;
  letter-spacing: .12em;
  padding: .28rem .7rem;
  border-radius: 2px;
  border: 1px solid var(--g400);
  color: var(--g600);
  background: transparent;
}

.w-card-tag--primary {
  background: var(--g800);
  border-color: var(--g800);
  color: var(--white);
}

.w-card-name {
  font-size: .88rem;
  font-weight: 400;
  color: var(--g800);
  letter-spacing: .05em;
  line-height: 1.5;
}


/* ==========================================================
   11. Flow セクション（制作の流れ）
   ========================================================== */
#flow {
  background: var(--g900);
}

/* ダーク背景用のテキスト色上書き */
#flow h2 {
  color: var(--white);
}

#flow .sec-label {
  color: var(--ac);
}

#flow .sec-label::before {
  background: var(--ac);
}

#flow .sec-lead {
  color: var(--g500);
}

/* 5ステップのグリッド */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  margin-bottom: 3.5rem;
}

/* ステップ間の接続線 */
.flow-grid::before {
  content: '';
  position: absolute;
  top: 2.65rem;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--g700);
}

.f-step {
  padding: 0 .6rem;
  text-align: center;
  position: relative;
}

/* ステップ番号（丸いバッジ） */
.f-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--ac);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.3rem;
  font-family: var(--fd);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--ac);
  background: var(--g900);
  position: relative;
  z-index: 1;
}

.f-title {
  font-size: .77rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: .4rem;
  letter-spacing: .06em;
}

.f-text {
  font-size: .7rem;
  color: var(--g500);
  line-height: 1.8;
}


/* ==========================================================
   12. Appeal セクション（選ばれる理由）
   ========================================================== */
#appeal {
  background: var(--g50);
}

.appeal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 3.5rem;
}

.a-card {
  background: var(--white);
  padding: 2.5rem 2rem;
  border-top: 2px solid transparent;
  transition: border-color .2s, background .2s;
}

.a-card:hover {
  border-color: var(--ac);
}

.a-num {
  font-family: var(--fd);
  font-size: 3rem;
  font-weight: 300;
  color: var(--g200);
  line-height: 1;
  margin-bottom: 1rem;
}

.a-title {
  font-size: .84rem;
  font-weight: 500;
  color: var(--g900);
  letter-spacing: .06em;
  margin-bottom: .65rem;
}

.a-text {
  font-size: .78rem;
  color: var(--g600);
  line-height: 1.95;
}


/* ==========================================================
   13. SEO Appeal セクション
   ========================================================== */
#seo-appeal {
  background: var(--g950);
}

/* ダーク背景用のテキスト色上書き */
#seo-appeal h2 {
  color: var(--white);
}

#seo-appeal .sec-label {
  color: var(--ac);
}

#seo-appeal .sec-label::before {
  background: var(--ac);
}

#seo-appeal .sec-lead {
  color: var(--g500);
  max-width: 640px;
}

/* SEOカードグリッド（2列） */
.seo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: 3.5rem;
}

.seo-card {
  background: var(--g900);
  padding: 2.8rem 2.4rem;
}

.seo-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 1.3rem;
  color: var(--ac);
}

.seo-title {
  font-size: .9rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: .65rem;
  letter-spacing: .05em;
}

.seo-text {
  font-size: .79rem;
  color: var(--g500);
  line-height: 2;
  margin-bottom: 1rem;
}

/* チェックリスト */
.seo-list {
  list-style: none;
}

.seo-list li {
  font-size: .77rem;
  color: var(--g400);
  padding: .34rem 0;
  border-bottom: 1px solid var(--g800);
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  line-height: 1.6;
}

.seo-list li::before {
  content: '✓';
  color: var(--ac);
  flex-shrink: 0;
  font-size: .72rem;
  margin-top: .12rem;
}

/* SEOセクション下部のCTAラップ */
.seo-cta-wrap {
  background: var(--g900);
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--g800);
}

.seo-cta-wrap p {
  font-size: .86rem;
  color: var(--g400);
  line-height: 1.9;
}

.seo-cta-wrap strong {
  display: block;
  font-size: .95rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: .3rem;
}

/* SEOセクション：大型ゴールドCTAボタン */
.seo-cta-center {
  text-align: center;
  margin-top: 3rem;
}

.seo-gold-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: linear-gradient(135deg, #c8a96e 0%, #e2c992 50%, #c8a96e 100%);
  background-size: 200% 200%;
  color: var(--g950);
  text-decoration: none;
  font-family: var(--fb);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .08em;
  padding: 1.3rem 3.2rem;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
    box-shadow .35s cubic-bezier(.22, 1, .36, 1),
    background-position .6s ease;
  box-shadow: 0 4px 20px rgba(200, 169, 110, .3);
  animation: goldPulse 3s ease-in-out infinite;
}

@keyframes goldPulse {

  0%,
  100% {
    box-shadow: 0 4px 20px rgba(200, 169, 110, .3);
  }

  50% {
    box-shadow: 0 6px 35px rgba(200, 169, 110, .5);
  }
}

.seo-gold-cta:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 40px rgba(200, 169, 110, .55);
  background-position: 100% 100%;
  animation: none;
}

.seo-gold-cta:active {
  transform: translateY(0) scale(.99);
}

/* ボタン上のシマーエフェクト */
.seo-gold-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
  transition: none;
  animation: goldShimmer 4s ease-in-out infinite;
}

@keyframes goldShimmer {

  0%,
  100% {
    left: -100%;
  }

  50% {
    left: 150%;
  }
}

.seo-gold-cta__text {
  position: relative;
  z-index: 1;
}

.seo-gold-cta__arrow {
  position: relative;
  z-index: 1;
  font-size: 1.3rem;
  transition: transform .3s ease;
}

.seo-gold-cta:hover .seo-gold-cta__arrow {
  transform: translateX(5px);
}

.seo-gold-cta__note {
  margin-top: 1.2rem;
  font-size: .78rem;
  color: var(--g500);
  letter-spacing: .04em;
}

/* ==========================================================
   14. Monthly Plan セクション（月額プラン）
   ========================================================== */
#monthly {
  background: var(--g50);
}

.monthly-note {
  font-size: .8rem;
  color: var(--g500);
  margin-top: -.8rem;
  margin-bottom: 2.8rem;
}

/* プランカードグリッド（3列） */
.monthly-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 3.5rem;
}

/* プランカード */
.m-plan {
  background: var(--white);
  padding: 2.6rem 2rem;
  border-top: 2px solid var(--g200);
  position: relative;
  transition: border-color .25s, transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
}

/* ホバーで浮き上がるアニメーション */
.m-plan:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.m-plan.featured:hover {
  box-shadow: 0 10px 30px rgba(184, 169, 144, .25);
}

/* おすすめプラン（ダーク背景） */
.m-plan.featured {
  border-color: var(--ac);
  background: var(--g900);
}

/* おすすめバッジ */
.m-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--ac);
  color: var(--g950);
  padding: .26rem .85rem;
  white-space: nowrap;
}

/* プラン名 */
.m-name {
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--g400);
  margin-bottom: .8rem;
}

/* 価格 */
.m-price {
  font-family: var(--fd);
  font-size: 2.8rem;
  font-weight: 300;
  color: var(--g900);
  line-height: 1;
  margin-bottom: .2rem;
}

.m-plan.featured .m-price {
  color: var(--white);
}

.m-price span {
  font-size: .9rem;
  font-family: var(--fb);
  font-weight: 300;
  color: var(--g400);
}

/* サブテキスト */
.m-sub {
  font-size: .67rem;
  color: var(--g400);
  margin-bottom: 1.5rem;
}

/* 機能リスト */
.m-features {
  list-style: none;
  margin-bottom: 2rem;
  flex-grow: 1;
  /* ボタンの高さを揃えるために残りスペースを埋める */
}

.m-features li {
  font-size: .78rem;
  color: var(--g600);
  padding: .44rem 0;
  border-bottom: 1px solid var(--g100);
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  line-height: 1.6;
}

.m-plan.featured .m-features li {
  color: var(--g400);
  border-bottom-color: var(--g800);
}

.m-features li::before {
  content: '✓';
  color: var(--ac);
  font-size: .68rem;
  flex-shrink: 0;
  margin-top: .15rem;
}

/* プランボタン（mt-auto でカード底部に固定） */
.m-plan-btn {
  display: block;
  text-align: center;
  padding: .75rem;
  font-size: .7rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  font-family: var(--fb);
  transition: all .25s;
  margin-top: auto;
  /* カード内でボタンを底に揃える */
}

/* アウトラインボタン */
.m-btn-out {
  border: 1px solid var(--g300);
  color: var(--g700);
}

.m-btn-out:hover {
  background: var(--g900);
  border-color: var(--g900);
  color: var(--white);
}

/* 塗りつぶしボタン */
.m-btn-fill {
  background: var(--ac);
  color: var(--g950);
}

.m-btn-fill:hover {
  background: var(--acl);
}


/* ==========================================================
   15. FAQ セクション
   ========================================================== */
#faq {
  background: var(--white);
}

.faq-inner {
  max-width: 740px;
  margin: 0 auto;
}

/* FAQ アイテム */
.faq-item {
  border-bottom: 1px solid var(--g200);
  margin-bottom: .5rem;
}

/* 質問ボタン（グレー背景で区切りを明確に） */
.faq-q {
  width: 100%;
  text-align: left;
  background: var(--g100);
  border: none;
  padding: 1.2rem 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--fb);
  font-size: .84rem;
  color: var(--g800);
  font-weight: 400;
  gap: 1rem;
  transition: background .2s;
}

.faq-q:hover {
  background: var(--g200);
}

/* Q ラベル */
.faq-label-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ac);
  color: var(--white);
  font-family: var(--fd);
  font-size: .85rem;
  font-weight: 600;
  flex-shrink: 0;
  line-height: 1;
}

/* A ラベル */
.faq-label-a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--g800);
  color: var(--white);
  font-family: var(--fd);
  font-size: .85rem;
  font-weight: 600;
  flex-shrink: 0;
  line-height: 1;
  margin-right: .6rem;
}

/* 質問テキスト */
.faq-q-text {
  flex-grow: 1;
}

/* 開閉アイコン（+ / −） */
.faq-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  position: relative;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--g500);
  transition: transform .3s, opacity .3s;
}

.faq-icon::before {
  width: 1px;
  height: 10px;
  top: 3px;
  left: 7px;
}

.faq-icon::after {
  width: 10px;
  height: 1px;
  top: 7px;
  left: 3px;
}

/* 開いた状態：縦棒を回転＆非表示に */
.faq-item.open .faq-icon::before {
  transform: rotate(90deg);
  opacity: 0;
}

/* 回答テキスト（アコーディオン） */
.faq-a {
  font-size: .8rem;
  color: var(--g600);
  line-height: 2;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .3s;
  padding: 0 1.4rem;
  display: flex;
  align-items: flex-start;
}

.faq-item.open .faq-a {
  max-height: 320px;
  padding: 1.2rem 1.4rem;
  background: var(--white);
}


/* ==========================================================
   16. Contact セクション
   ========================================================== */
#contact {
  background: var(--g50);
}

#contact h2 {
  color: var(--g900);
}

#contact .sec-label {
  color: var(--ac);
}

#contact .sec-label::before {
  background: var(--ac);
}

/* 2カラムグリッド（テキスト + フォーム） */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4.5rem;
  align-items: start;
}

.contact-text p {
  font-size: .88rem;
  color: var(--g700);
  line-height: 2.1;
  margin-bottom: 1.6rem;
}

/* SNSリンク */
.sns-links {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: 1.5rem;
}

.sns-link {
  display: flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  color: var(--g600);
  font-size: .8rem;
  letter-spacing: .1em;
  padding: .72rem 0;
  border-bottom: 1px solid var(--g200);
  transition: color .2s;
}

.sns-link:hover {
  color: var(--g900);
}

.sns-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

/* お問い合わせフォーム */
.form-card {
  background: var(--white);
  padding: 2.8rem;
  border: 1px solid var(--g200);
}

.form-label {
  display: block;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g500);
  margin-bottom: .45rem;
  margin-top: 1.3rem;
}

.form-label:first-child {
  margin-top: 0;
}

/* 入力フィールド共通 */
.form-input,
.form-ta {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--g200);
  background: var(--g50);
  font-family: var(--fb);
  font-size: .86rem;
  color: var(--g900);
  outline: none;
  transition: border-color .2s, background .2s;
  resize: none;
}

.form-input::placeholder,
.form-ta::placeholder {
  color: var(--g400);
}

/* フォーカス時 */
.form-input:focus,
.form-ta:focus {
  border-color: var(--ac);
  background: var(--white);
}

.form-ta {
  height: 110px;
}

/* 送信ボタン */
.form-submit {
  margin-top: 1.8rem;
  width: 100%;
  background: var(--ac);
  color: var(--g950);
  border: none;
  padding: 1rem;
  font-family: var(--fb);
  font-size: .73rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s;
}

.form-submit:hover {
  background: var(--acl);
}


/* ==========================================================
   17. フッター
   ========================================================== */
footer {
  background: var(--g900);
  padding: 2rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  border-top: 1px solid var(--g800);
}

.f-logo {
  font-family: var(--fd);
  font-size: 1rem;
  font-weight: 300;
  color: var(--g400);
  letter-spacing: .12em;
  text-decoration: none;
}

.f-links {
  display: flex;
  gap: 1.6rem;
}

.f-links a {
  font-size: .63rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--g600);
  text-decoration: none;
  transition: color .2s;
}

.f-links a:hover {
  color: var(--g400);
}

.f-copy {
  font-size: .63rem;
  color: var(--g700);
  letter-spacing: .1em;
}


/* ==========================================================
   18. レスポンシブ（タブレット：960px以下）
   ========================================================== */
@media (max-width: 960px) {

  /* ナビ */
  nav {
    padding: 1rem 1.5rem;
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* セクション余白縮小 */
  section {
    padding: 5rem 1.8rem;
  }

  /* ヒーロー */
  #hero {
    padding: 0 1.8rem;
    min-height: 100vh;
  }

  .hero-content {
    padding-top: 5rem;
    padding-bottom: 3rem;
  }

  /* トラストバー */
  #trust {
    padding: 1.5rem 1.8rem;
  }

  .trust-sep {
    display: none;
  }

  /* グリッドを1列に */
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .works-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .appeal-grid,
  .monthly-grid,
  .seo-grid {
    grid-template-columns: 1fr;
  }

  .flow-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .flow-grid::before {
    display: none;
  }

  /* サービスアイテム1列化 */
  .s-item,
  .s-item.rev {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .s-item .s-img {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  /* フッター */
  footer {
    flex-direction: column;
    text-align: center;
  }

  .f-links {
    justify-content: center;
  }

  /* SEO CTAラップ */
  .seo-cta-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ゴールドCTAボタン（タブレット） */
  .seo-gold-cta {
    font-size: .95rem;
    padding: 1.2rem 2.4rem;
  }
}


/* ==========================================================
   19. レスポンシブ（スマホ：600px以下）
   ========================================================== */
@media (max-width: 600px) {

  /* キャッチコピーのサイズ調整（3行に収める） */
  .hero-h1 {
    font-size: 1.55rem;
    letter-spacing: .02em;
    line-height: 1.75;
  }

  /* 1列グリッド */
  .works-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .w-card-mockup {
    min-height: 240px;
    padding: 1.5rem 1.2rem .8rem;
  }

  .flow-grid {
    grid-template-columns: 1fr;
  }

  /* 実績数値の折り返し */
  .stats {
    flex-wrap: wrap;
    gap: 1.4rem;
  }

  /* トラストバー */
  .trust-inner {
    gap: 1.5rem;
    justify-content: flex-start;
  }

  /* ヒーロー余白調整 */
  #hero {
    padding: 0 1.4rem;
  }

  .hero-scroll {
    display: none;
  }

  /* ゴールドCTAボタン（スマホ） */
  .seo-gold-cta {
    font-size: .85rem;
    padding: 1.1rem 1.6rem;
    gap: .7rem;
    width: 100%;
    box-sizing: border-box;
  }

  .seo-gold-cta__arrow {
    font-size: 1.1rem;
  }
}


/* ==========================================================
   20. サブページ共通スタイル
   ========================================================== */

/* --- サブページ用ミニヒーロー --- */
.page-hero {
  background: var(--g950);
  padding: 8rem 5rem 4rem;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(184, 169, 144, .06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(184, 169, 144, .04) 0%, transparent 50%);
  pointer-events: none;
}

.page-hero .inner {
  position: relative;
  z-index: 1;
}

.page-hero .sec-label {
  color: var(--ac);
  margin-bottom: 1rem;
}

.page-hero .sec-label::before {
  background: var(--ac);
}

.page-hero h1 {
  font-family: var(--fd);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  line-height: 1.3;
  color: var(--white);
  letter-spacing: -.01em;
  margin-bottom: .8rem;
}

.page-hero p {
  font-size: .88rem;
  color: var(--g500);
  line-height: 2;
  max-width: 540px;
}

/* --- パンくずナビ --- */
.breadcrumb {
  padding: 1.2rem 5rem;
  background: var(--white);
  border-bottom: 1px solid var(--g200);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--g500);
}

.breadcrumb a {
  color: var(--g600);
  text-decoration: none;
  transition: color .2s;
}

.breadcrumb a:hover {
  color: var(--g900);
}

.breadcrumb span {
  margin: 0 .5rem;
  color: var(--g400);
}

/* --- 「もっと見る」リンクボタン --- */
.more-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--g700);
  text-decoration: none;
  padding: .7rem 0;
  border-bottom: 1px solid var(--g300);
  transition: color .2s, border-color .2s, gap .3s;
}

.more-link:hover {
  color: var(--g900);
  border-color: var(--g900);
  gap: 1rem;
}

.more-link::after {
  content: '→';
  font-size: .9rem;
  transition: transform .3s ease;
}

.more-link:hover::after {
  transform: translateX(4px);
}

/* --- サブページ用ナビ（トップへのリンク付き） --- */
.sub-nav {
  background: rgba(248, 248, 248, .94);
  backdrop-filter: blur(16px);
}

.sub-nav .nav-logo {
  color: var(--g900);
  text-decoration: none;
}

/* --- サブページ：レスポンシブ（タブレット） --- */
@media (max-width: 960px) {
  .page-hero {
    padding: 7rem 1.8rem 3rem;
  }

  .breadcrumb {
    padding: 1rem 1.8rem;
  }
}

/* --- サブページ：レスポンシブ（スマホ） --- */
@media (max-width: 600px) {
  .page-hero {
    padding: 6rem 1.4rem 2.5rem;
  }

  .breadcrumb {
    padding: .8rem 1.4rem;
  }
}