/* しおかぜ ポートフォリオ 共通トークン（2026-09-15 改訂）
   方向: 海の見えるまちのデザイナー／ミニマル
   - 色数を絞る（白・砂・藍・浅瀬）
   - 影は使わず、1pxの線と余白で構造をつくる
   - 見出しは明朝（ローカルフォントのみ。外部Webフォントは読み込まない）
   - 上辺・左辺のカラーアクセント線は不使用 */

:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote) { margin: 0; padding: 0; }
:where(ul, ol) { list-style: none; }
:where(img) { max-width: 100%; display: block; }
:where(a:not([class])) { color: inherit; }

:root {
  /* 色：白 / 砂 / 藍 / 浅瀬 の4色だけ */
  --c-bg:     #FFFFFF;
  --c-sand:   #F7F5F1;   /* 生成り。面としてごく薄く使う */
  --c-ink:    #1A2228;   /* 見出し */
  --c-body:   #46505A;   /* 本文（濃いめ） */
  --c-muted:  #8A949C;   /* 注記・英字ラベル */
  --c-sea:    #16455F;   /* 主色＝深い藍 */
  --c-shoal:  #A9C4CE;   /* 浅瀬。線と面のアクセント */
  --c-line:   #E4E7E9;   /* 水平線 */

  /* 書体：見出し＝明朝（ローカル）／本文・ラベル＝標準UIゴシック */
  --ff: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
        "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --ff-min: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho",
            "Noto Serif JP", serif;

  --fs-display: clamp(30px, 5.4vw, 76px);
  --fs-h1:      clamp(25px, 3.2vw, 40px);
  --fs-h2:      clamp(21px, 2.4vw, 29px);
  --fs-h3:      clamp(17px, 1.6vw, 20px);
  --fs-lead:    clamp(16px, 1.4vw, 18px);
  --fs-body:    17px;
  --fs-note:    14px;
  --fs-micro:   11px;

  /* 余白：ミニマルなので大きく取る */
  --container: 1200px;
  --gutter: 28px;
  --sec: clamp(88px, 12vw, 176px);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-body);
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }

/* 明朝の見出し。字間を広めに取り、線を細く見せる */
.mincho {
  font-family: var(--ff-min);
  font-weight: 400;
  letter-spacing: .055em;
  color: var(--c-ink);
}

/* 極小の英字ラベル */
.micro {
  font-size: var(--fs-micro);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}

/* 水平線＝このサイトの基本部品 */
.rule { height: 1px; background: var(--c-line); border: 0; }

/* CTA：塗りボタンにしない。字間を空けた下線＋矢印 */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  font-size: var(--fs-note);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--c-sea);
  text-decoration: none;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--c-shoal);
  transition: gap .25s ease, border-color .25s ease;
}
.link-cta:hover { gap: 1.4em; border-color: var(--c-sea); }
.link-cta .arw { font-size: 1em; line-height: 1; }

/* ヘッダー：全ページ共通。線1本だけ */
.site-head {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(120%) blur(6px);
}
.site-head__in {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--c-line);
}
.site-head__logo {
  font-family: var(--ff-min);
  font-size: 17px;
  letter-spacing: .34em;
  color: var(--c-ink);
  text-decoration: none;
}
.site-head__nav { display: flex; align-items: center; gap: 30px; }
.site-head__nav a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--c-muted);
  text-decoration: none;
}
.site-head__nav a:hover { color: var(--c-sea); }

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .site-head__in { height: 62px; }
  .site-head__logo { font-size: 15px; letter-spacing: .24em; }
  .site-head__nav { gap: 16px; }
  .site-head__nav a { letter-spacing: .12em; }
  .site-head__nav a.is-hide-sp { display: none; }
}
@media (max-width: 400px) {
  .site-head__nav { gap: 13px; }
  .site-head__nav a { font-size: 10px; letter-spacing: .08em; }
}