:root {
    --accent: #4daaf5;
    --accent-bg: #e9f4ff;;
    --accent-text: #003366;
    --line: rgba(0,0,0,0.1);
    --ink:#222;
}
    
/* ベース */
body {
    font-family: "Noto Sans JP", sans-serif;
    margin: 0;
    color: var(--ink);
    background: #f3f8ff;
}
header {
    color: #fff;
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header {
    position: sticky;
    top: 0;
    z-index: 999;
    background:var(--accent);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.07);
    border-bottom: 1px solid rgba(255,255,255,.25);
    padding: 10px 0;
}
.header .logo-area{
  width: min(1100px, calc(100% - 32px));
  margin: 0 35px;
  display: flex; align-items: center; gap: 14px;
}
.header .logo{
  width: 56px; height: auto; 
}
.header h1{
  margin: 0;
  font-family: "Philosopher","Noto Sans JP",system-ui,sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
/* ===== Fullscreen Global Nav ===== */
.global-nav{
    position: fixed;
    inset: 0;
    z-index: 300;                          /* ヘッダーより後ろ */
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--accent);             /* アクセントカラーで全面 */
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .22s ease;
}
.nav-toggle:checked ~ .global-nav{ 
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

/* 背景（押すと閉じる） */
.nav-backdrop{
    position:absolute;
    inset:0;
    background: transparent;
    display:block;
}

/* パネル本体 */
.global-panel{
    position: relative;
    width: 100%;
    max-width: var(--container, 1100px);
    margin: 0 auto;
    padding: 80px 20px 40px;
    background: none;
    border: none;
    box-shadow: none;
}
/* オーバーレイ内のメニュー全体 */
.global-menu {
  max-width: 880px;
  margin: 0 auto;
  padding: 72px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* MENU / SNS 見出し */
.global-heading {
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* SNS 用にちょっと余白を変えたい場合 */
.global-heading--sub {
  margin-top: 8px;
}

/* ===== メニュー一覧 ===== */
.global-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;   /* 行間, 列の間隔 */
}

.global-list li {
  margin: 0;
}

.global-list a {
    position: relative;
    display: inline-block;
    font-size: clamp(18px, 2.3vw, 22px);
    font-weight: 700;
    letter-spacing: .08em;
    color: #fff;
    text-decoration: none;
    opacity: 1;
    padding-bottom: 4px;
    transition: transform .25s ease;
}

/* ホバーは今のままの雰囲気をキープ */
.global-list a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;                         /* ← 最初は非表示 */
    background: rgba(255,255,255,0.8);
    transition: width .25s ease;      /* ← スッと伸びるアニメーション */
}
/* ホバーした時だけ下線が伸びる */
.global-list a:hover::after {
  width: 100%;                      /* ← 文字の長さぴったりで完成 */
}

.global-list a:hover {
  transform: translateX(4px);
  opacity: 1;                       /* ← 文字は消えない */
  color: #fff;
}

/* ===== SNS リンク ===== */
.global-sns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;            /* ← 横並び */
  gap: 16px 24px;
}

.global-sns a {
  position: relative;        /* 下線のために必須 */
  display: inline-block;
  color: #fff;               /* 常に白 */
  font-size: 0.9rem;
  text-decoration: none;
  padding-bottom: 3px;       /* 下線の余白 */
  opacity: 1;
  transition: transform .25s ease;
}

.global-sns a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: rgba(255,255,255,0.8);
  transition: width .25s ease;
}
/* ホバー：文字はそのまま、下線だけ伸びる、少し右に動く */
.global-sns a:hover {
  color: #fff;      /* 文字色を固定 */
  opacity: 1;       /* 消えない */
  transform: translateX(3px);
}

.global-sns a:hover::after {
  width: 100%;      /* ← ここで文字幅ぴったりの下線が出る！ */
}


@media (max-width: 640px) {
  .global-menu {
    padding: 56px 24px 40px;
    gap: 24px;
  }

  .global-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ===== ハンバーガーアイコン（3本線→×） ===== */
/* ボタン本体：幅30px固定 */
.header .menu{
  width: 30px;          /* アイコンの幅はずっと 30px 固定 */
  height: 22px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;   /* 左揃え */
  cursor: pointer;
  position: relative;
  margin-right: 35px;
}

/* 3本線のベース */
.header .menu .bar{
  display: block;
  height: 2px;
  width: 30px;              /* 基本の長さ */
  background: #fff;         /* 白 */
  border-radius: 999px;
  transition:
    width .25s ease,
    transform .25s ease,
    opacity .2s ease;
  transform-origin: center;
}

/* 最初は長さバラバラ */
.header .menu .bar:nth-child(1){ width: 30px; }  /* 一番長い */
.header .menu .bar:nth-child(2){ width: 22px; }
.header .menu .bar:nth-child(3){ width: 16px; }  /* 一番短い */

.header .menu .bar + .bar{
  margin-top: 6px;
}

/* ▼ メニュー閉じているときだけ：ホバーでニュッと同じ長さになる */
.nav-toggle:not(:checked) ~ .header .menu:hover .bar{
  width: 30px;
}

/* ===== チェックされたら綺麗な「×」に変形 ===== */

/* チェック時は3本を中央に寄せる */
.nav-toggle:checked ~ .header .menu{
  align-items: center;
}

/* 3本とも中央に重ねる（30px のまま） */
.nav-toggle:checked ~ .header .menu .bar{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  margin-top: 0;
  transform-origin: center;
  color: #fff;
}

/* 上の線： ／  */
.nav-toggle:checked ~ .header .menu .bar:nth-child(1){
  transform: translate(-50%, -50%) rotate(45deg);
}

/* 真ん中の線はフェードアウト */
.nav-toggle:checked ~ .header .menu .bar:nth-child(2){
  opacity: 0;
}

/* 下の線： ＼  */
.nav-toggle:checked ~ .header .menu .bar:nth-child(3){
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 開いているときはホバーしても形が崩れないように */
.nav-toggle:checked ~ .header .menu:hover .bar{
  width: 30px;
}

/* 小さめ画面でのタイポサイズ調整 */
@media (max-width: 520px){
  .global-list a{ font-size: clamp(18px, 5.5vw, 22px); }
}

/*（任意）オーバーレイ表示中の背景スクロール抑止：対応ブラウザ向け */
@supports selector(:has(*)) {
  body:has(#nav-toggle:checked){ overflow: hidden; }
}

/* セクション共通 */
section {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  padding: 32px 20px;
  width: 90%;          /* ← 表示画面に対して 90％ */
  max-width: 1100px;   /* ← 広すぎ防止（お好みで値を変えてOK） */
  margin: 40px auto;   /* ← 左右 auto でセンター */
}
h2 {
  position: relative;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-text);
  border-left: 6px solid var(--accent);
  padding-left: 10px;
  margin-bottom: 1.2rem;
}

.services li {
    margin-left: 20px;
}

/* クロス再生 */
.cross-renew { padding-top: 8px; }
.cross-renew > h2 { margin-bottom: 14px; }

/* カード一覧（スマホ1列） */
.cross-cases {
  display: flex;             /* ← グリッドやめてフレックスに */
  flex-direction: column;    /* ← 縦に並べる */
  align-items: flex-start;   /* ← 中の .case を左寄せにするポイント！ */
  gap: 24px;
}

/* カード本体：上=見出し・説明 / 下=写真 */
.case {
    width: 100%;
    max-width: 850px;
    display:grid;
    grid-template-areas:
        "title"
        "desc"
        "photos";
    gap: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
    margin: 20px auto;
}

/* 見出し・説明 */
.case h3 {
  grid-area: title;
  margin-bottom: 4px;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--accent-text);
}
.case p {
  grid-area: desc;
  margin: 0;
  line-height: 1.8;
  color: #333;
}

/* 写真ラッパー */
.case .photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列で均等幅 */
  gap: 12px;
  width: 100%;          /* ← 親の幅いっぱい使う */
}
/* 写真を包むdiv（ここにラベルを付ける） */
.photo-box {
  position: relative;
  width: 100%;
  height: auto;
  display: inline-block;
  justify-content: flex-start;
  align-items: flex-start;
}
/* PCではBefore/After横並び */
@media (min-width: 980px) {
  .case .photos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .case .photos {
    grid-template-columns: 1fr; /* スマホは縦並び */
  }
}
/* 写真そのもの */
.photo-box img {
  width: 100%;          /* ← 枠に合わせて自動で伸び縮み */
  height: auto;         /* ← 比率を保ったまま */
  aspect-ratio: 4 / 3;  /* 高さを揃えたいなら追加（なくてもOK） */
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* PCで中央寄せを解除して左右に寄せる → すっきりする */
@media (min-width: 768px) {
  .case .photos img {
    margin: 0;           /* ← これが効いて “間延び” が消える！ */
  }
}
/* ラベル（Before / After） */
.photo-label {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
}

.case .photos img::before {
  content: attr(data-label);
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 4px 10px;
  font-size: 0.8rem;
  border-radius: 6px;
}
/* Beforeをほんのり減彩（1枚目=Before想定） */
.case .photos img:first-child { filter: saturate(0.9); }

/* ホバー拡大（マウス環境のみ） */
@media (hover:hover) and (pointer:fine) {
  .case .photos img:hover { transform: scale(1.02); }
}

/* カード下の余白調整（連続でも詰まりすぎないように） */
.cross-cases .case:last-child { margin-bottom: 4px; }

/* お問い合わせ */
.contact-info {
    list-style: none;
    padding: 0;
    line-height: 1.9;
}
.contact-info a {
    color: var(--accent-text);
    text-decoration: none;
}
.contact-info a:hover {
    text-decoration: underline;
}

/* フッター */
.site-footer{
  background: linear-gradient(180deg, var(--accent-bg), #f7fbff);
  color: var(--accent-text);
  padding: 28px 16px;
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px rgba(0,0,0,.04) inset;
  text-align: center;    /* ← これが最重要！ */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* センターで上から下へ */
}
.site-footer p{
  margin: 0;
  font-weight: 600;
  letter-spacing: .02em;
}
.ft-copy{
  width: 100%;
  max-width: none;       /* ← 幅制限を外す */
  margin: 16px 0 0;      /* ← auto を外すと完全センター */
  text-align: center;    /* ← 念のため再指定 */
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.25);
  font-size: .85rem;
  opacity: .85;
}