@charset "utf-8";
/* ===============================================================
   base.css … 全ページ共通
   1. 色の定義
   2. リセット
   3. 基本（body / 見出し / リンク）
   4. レイアウト（.layout-main）
   5. フッター
   6. ローダー（サムネ・動画の読み込み中リング）
   7. 本文テキスト（.lang-text）

   ※ ブレイクポイント：1280px / 840px（SP）
   ※ 文字サイズ
     ・基準は html の 17px（= 1rem）。各所の指定はすべて rem
     ・画面幅で変わる文字は clamp() で、375px（SP）→ 1280px（PC）のあいだを
       なめらかに変化させる（それより狭い／広い画面では両端の値で止まる）
       サイズは :root の --fs-◯◯ にテンプレート化してあり、各所はそれを参照するだけ
   ※ トップページ専用 → home.css、作品ページ専用 → work.css
   =============================================================== */


/* ===============================
   1. 色の定義
   =============================== */

:root {
  --c-text: #333;
  --c-link: #ba3f20;
  --c-hover: #6b7d89;
  --c-active: #e66b4c;
  --c-line: #ccc;

  /* 本文の文字間隔・行間（英文／和文） */
  --ls-en: 0.1em;
  --lh-en: 2;
  --ls-ja: 0.025em;
  --lh-ja: 2.1;

  /* 文字サイズのテンプレート（1rem = 17px）
     左＝SP（375px 以下）→ 右＝PC（1280px 以上）。そのあいだはなめらかに変化
     ・サイズを変えるときは clamp の両端を書き換え、途中の式は
       （PC − SP）× 17 ÷ 905 × 100 = vw の係数、SP − 係数 × 3.75 ÷ 17 = rem の項 で再計算 */
  --fs-2xl: clamp(1.5rem, 1.293rem + 0.939vw, 2rem);        /* 1.5 → 2    名前（h1） */
  --fs-xl2: clamp(1.375rem, 1.199rem + 0.798vw, 1.8rem);      /* 1.375 → 1.8  中間 */
  --fs-xl: clamp(1.25rem, 1.105rem + 0.657vw, 1.6rem);        /* 1.25 → 1.6  作品タイトル */
  --fs-l: clamp(1.05rem, 0.905rem + 0.657vw, 1.4rem);         /* 1.05 → 1.4  名前の英字 */
  --fs-m: clamp(0.9rem, 0.817rem + 0.376vw, 1.1rem);          /* 0.9 → 1.1  Film / Street 切り替え・ページ送り */
  --fs-base: clamp(0.85rem, 0.809rem + 0.188vw, 0.95rem);     /* 0.85 → 0.95  本文（プロフィール文・説明文・リンクなど） */
  --fs-base-ja: clamp(0.8rem, 0.738rem + 0.282vw, 0.95rem);    /* 0.8 → 0.9  本文の和文表示時（和文は大きく見えるので一段小さく） */
  --fs-s: clamp(0.75rem, 0.729rem + 0.094vw, 0.8rem);         /* 0.75 → 0.8  フッター・スペック・クレジット */
  --fs-xs: clamp(0.65rem, 0.609rem + 0.188vw, 0.75rem);       /* 0.65 → 0.75  サムネ上の文字・キャプション */
}


/* ===============================
   2. リセット
   =============================== */

body,
div, ul, ol, li,
p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

ul, ol, li {
  list-style: none;
}

h1, h2, h3, h4, h5, h6, p {
  font-size: inherit; /* 見出しも親と同じ大きさから */
  font-weight: normal;
}

a {
  outline-style: none;
}

a img {
  border: none;
}


/* ===============================
   3. 基本
   =============================== */

html {
  font-size: 17px; /* 文字サイズの基準（1rem） */
}

body {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-align: left;
  line-height: 1.5;
  color: var(--c-text);
  background-color: #fff;
  letter-spacing: 0.1em;
  font-family: "Quattrocento", "Shippori Mincho", serif;
}

/* リンク */
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-decoration: none;
}

a:link,
a:visited { color: var(--c-link); }
a:hover   { color: var(--c-hover); }
a:active  { color: var(--c-active); }


/* ===============================
   4. レイアウト
   =============================== */

.layout-main {
  width: 80%;
  max-width: 1400px;
  padding: 3% 0;
  margin: 0 auto;
}

@media (max-width: 1280px) {
  .layout-main {
    width: 90%;
  }
}

@media (max-width: 840px) {
  .layout-main {
    width: 96%;
    margin: 2em auto 0.5em auto;
  }
a:link,
a:hover   { color: var(--c-link); }
}


/* ===============================
   5. フッター
   =============================== */

.site-footer {
  margin: 0;
  font-size: var(--fs-s);
  text-align: right;
}

.site-footer p {
  letter-spacing: 0.05em;
}

.site-footer::after {
  content: "FURUYA Shinji";
}

/* 無断転載の注意書き */
.site-footer .ng {
  margin-bottom: 1em;
  font-size: var(--fs-s);
}

/* Portrait service / Contact / Instagram */
.site-footer .link {
  display: inline;
  padding-right: 1em;
  font-size: var(--fs-base);
}

.site-footer a {
  padding-left: 1em;
}

#year {
  margin-right: 0.5em;
}

@media (max-width: 840px) {
  .site-footer {
    margin: 0 4% 2em 4%;
  }

  .site-footer .ng {
    width: 85%;
    margin: 2em auto 2em 15%;
  }

  .site-footer .link {
    display: block;
    padding-right: 0;
    padding-bottom: 3em;
  }

  .site-footer a {
    display: block;
    margin: 0;
    padding: 1em 0 0 0;
  }

  .site-footer a:last-child {
    margin: 0 0 3em 0;
  }
}


/* ===============================
   6. ローダー
   画像・動画の読み込み中に出す細いリング。
   タイル（.work-item）／動画枠（.video-embed）に .is-loaded が付いたらフェードアウト
   =============================== */

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

.work-grid .work-item::before,
.video-embed::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 22px;
  height: 22px;
  margin: -12px 0 0 -12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top-color: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  pointer-events: none;
  animation: loader-spin 0.9s linear infinite;
  transition: opacity 400ms ease, visibility 0s linear 0s;
}

.work-grid .work-item.is-loaded::before,
.video-embed.is-loaded::before {
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}

@media (prefers-reduced-motion: reduce) {
  .work-grid .work-item::before,
  .video-embed::before {
    animation-duration: 2.4s;
  }
}

/* JS 無効時は読み込み完了を検知できないので出さない */
@media (scripting: none) {
  .work-grid .work-item::before,
  .video-embed::before {
    display: none;
  }
}


/* ===============================
   7. 本文テキスト（.lang-text）
   ホームのプロフィール文と、作品ページの説明文の「文字まわり」はここだけで管理
   （余白・幅などの配置は home.css / work.css 側）
   ・日本語ブラウザのときだけ和文を表示し、段落に .is-ja が付く（common/js/lang.js）
   ・サイズ／文字間隔／行間の値は :root の --fs-base(-ja) / --ls-◯◯ / --lh-◯◯
   =============================== */

/* 英文（初期状態） */
.lang-text {
  font-size: var(--fs-base);
  letter-spacing: var(--ls-en);
  line-height: var(--lh-en);
  text-align: justify;
  text-align-last: left;
  -webkit-hyphens: auto;
  hyphens: auto;
  word-break: normal;
  overflow-wrap: break-word; /* 長いURLなど、はみ出す時だけ折る */
  /* text-wrap: pretty は使わない：iOS Safari では段落全体の行長を揃えようとして
     各行が短く折り返され、右に大きな余白ができる */
}

.lang-text span span{
  display:block;
  margin-bottom:0.8em;
}

/* 和文 */
.lang-text.is-ja {
  font-size: var(--fs-base-ja);
  letter-spacing: var(--ls-ja);
  line-height: var(--lh-ja);
  line-break: strict; /* 句読点・小さい「っ」などを行頭に来させない */
}

/* 日本語ブラウザでは本文をタップで日英切り替え（common/js/lang.js）。
   合図は出さない方針なので、タップ時のハイライトだけ消す */
.lang-text.is-switchable {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 840px) {
  /* SP の英文は左揃え（和文は両端揃えのまま。和文も左揃えにするなら
     下の .lang-text.is-ja の指定を消す） */
  .lang-text {
    text-align: left;
  }

.lang-text br{
display:none;
}

.lang-text span span{
  display:inline;
  margin-bottom:0em;
}

  .lang-text.is-ja {
    text-align: justify;
  }
}