/*
Theme Name: HtoH Academy
Theme URI: http://htohacademy.com/
Author: tipinn / carta
Description: HtoH academy LP の忠実再現テーマ（BiND版からの移植）。1ページ構成 + WP標準ブログ。
Version: 1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: htoh
*/

/* ============================================================
   Design tokens (元サイト base.css より抽出)
   ============================================================ */
@font-face{
  font-family:"GenJyuuGothic-Monospace";
  src:url("fonts/GenJyuuGothic-Monospace-Light.woff2") format("woff2"),
      url("fonts/GenJyuuGothic-Monospace-Light.ttf") format("truetype");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

:root{
  --c-ink:    #0D0D0F;   /* 本文・見出し */
  --c-slate:  #536473;   /* プライマリ・アクセント */
  --c-teal:   #8BA9A9;   /* セカンダリ・ラベル */
  --c-paper:  #EEF0EC;   /* セクション背景（オフホワイト） */
  --c-white:  #FFFFFF;
  --c-line:   rgba(83,100,115,0.30);
  --maxw: 1100px;
  /* 見出し用：英字=Jost / 和文=Zen Kaku Gothic New（角ゴシックで洗練された印象） */
  --font-en: "Jost", "Noto Sans JP", sans-serif;
  --font-jp-head: "Zen Kaku Gothic New", "GenJyuuGothic-Monospace", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  /* 本文用：源柔ゴシック（丸ゴシック）を据え置き */
  --font-jp: "GenJyuuGothic-Monospace", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  margin:0;
  font-family:var(--font-jp);
  color:var(--c-ink);
  background:var(--c-white);
  line-height:1.9;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--c-slate); text-decoration:none; transition:opacity .2s; }
a:hover{ opacity:.65; }

.container{ width:90%; max-width:var(--maxw); margin:0 auto; }
.section{ padding:96px 0; }
.section--paper{ background:var(--c-paper); }
.section--narrow{ padding:64px 0; }

/* ---- ラベル / 見出し ---- */
.label{
  font-family:var(--font-en);
  color:var(--c-teal);
  letter-spacing:.28em;
  font-weight:500;
  font-size:.82rem;
  text-transform:uppercase;
  text-align:right;
  margin:0 0 .6em;
}
.label--left{ text-align:left; }
.title-en{
  font-family:var(--font-en);
  font-weight:400;
  font-size:clamp(2.2rem,5vw,3.4rem);
  letter-spacing:.14em;
  line-height:1.2;
  margin:0 0 .3em;
  color:var(--c-ink);
}
.title-jp{
  font-family:var(--font-jp-head);
  font-size:clamp(1.6rem,3.4vw,2.3rem);
  font-weight:500;
  letter-spacing:.06em;
  margin:0 0 .5em;
}
.headline{
  font-family:var(--font-jp-head);
  font-size:clamp(1.15rem,2.2vw,1.45rem);
  font-weight:500;
  color:var(--c-slate);
  margin:0 0 1em;
  line-height:1.6;
}
.subhead{
  font-family:var(--font-jp-head);
  font-size:1.05rem;
  font-weight:500;
  margin:0 0 .8em;
  line-height:1.6;
}
.num{
  font-family:var(--font-en);
  font-style:italic;
  font-weight:400;
  font-size:2.2rem;
  color:var(--c-teal);
  display:block;
  text-align:right;
  letter-spacing:.08em;
}
.body{ margin:0 0 1em; }
.bold{ font-weight:700; }
.wave{ margin:.4em 0 1.2em; max-width:340px; }
.center{ text-align:center; }

/* セクション見出し（中央寄せの導入ブロック） */
.section-head{ text-align:center; margin-bottom:56px; }
.section-head .label{ text-align:center; }
.section-head .title-en{ text-align:center; }
.section-head .headline{ text-align:center; color:var(--c-ink); }

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--c-line);
}
.site-header .inner{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand img{ height:34px; width:auto; }
.gnav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
.gnav a{
  font-family:var(--font-en); font-weight:500; letter-spacing:.16em;
  font-size:.9rem; color:var(--c-ink); text-transform:uppercase;
}
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; width:34px; height:28px; padding:0; }
.nav-toggle span{ display:block; height:2px; background:var(--c-ink); margin:6px 0; transition:.3s; }

/* ============================================================
   Hero (billboard)
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  /* サロン店内写真(1207.jpg)を背景に、白系オーバーレイで可読性を確保 */
  background-image:
    linear-gradient(rgba(255,255,255,0.66), rgba(255,255,255,0.72)),
    url("images/1207.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:120px 20px 60px;
}
.hero .tagline-top{
  font-family:var(--font-en); color:var(--c-slate);
  letter-spacing:.22em; font-weight:400; margin:0 0 .4em;
}
.hero h1{
  font-family:var(--font-en); font-weight:400;
  font-size:clamp(3rem,9vw,6rem); letter-spacing:.12em; margin:0; color:var(--c-ink);
}
.hero .hero-wave{ max-width:520px; width:80%; margin:1.4em auto 0; }
.hero .tagline{
  margin-top:1.6em; font-family:var(--font-en); letter-spacing:.16em; font-weight:400;
  color:var(--c-slate); font-size:1.05rem;
}
.hero-nav{ margin-top:48px; }
.hero-nav ul{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:center; padding:0; margin:0; }
.hero-nav a{
  font-family:var(--font-en); font-weight:500; letter-spacing:.16em;
  font-size:.86rem; color:var(--c-ink); text-transform:uppercase;
  border-bottom:1px solid transparent; padding-bottom:3px;
}
.hero-nav a:hover{ border-color:var(--c-teal); opacity:1; }

/* ============================================================
   Two-column rows
   ============================================================ */
.row{ display:flex; gap:56px; align-items:center; }
.row > .col{ flex:1 1 0; min-width:0; }
.row--reverse{ flex-direction:row-reverse; }
.row img{ border-radius:2px; }
.row + .row{ margin-top:72px; }

/* POINT 2連カラム */
.points{ display:flex; gap:56px; margin-top:8px; }
.points > div{ flex:1; }

/* ============================================================
   Album (3-col photo grid)
   ============================================================ */
.album{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:32px; }
.album figure{ margin:0; position:relative; overflow:hidden; aspect-ratio:3/2; }
.album img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.album figure:hover img{ transform:scale(1.05); }
.album figcaption{
  position:absolute; inset:auto 0 0 0; padding:10px 12px;
  background:linear-gradient(0deg,rgba(13,13,15,.7),transparent);
  color:#fff; font-size:.78rem; opacity:0; transition:opacity .3s;
}
.album figure:hover figcaption{ opacity:1; }

/* ============================================================
   Greeting / 開催情報
   ============================================================ */
.signoff{ margin-top:1.6em; }
.signoff p{ margin:.2em 0; }
.signoff .lead-info{ color:var(--c-slate); font-weight:700; }
.note-small{ font-size:.88rem; color:var(--c-slate); }

/* ============================================================
   Voice
   ============================================================ */
.voice{ display:flex; gap:48px; align-items:flex-start; }
.voice + .voice{ margin-top:64px; }
.voice .voice-img{ flex:1 1 45%; }
.voice .voice-body{ flex:1 1 55%; }
.voice .voice-name{ font-family:var(--font-jp-head); font-size:1.3rem; font-weight:500; margin:0 0 .1em; }
.voice .voice-salon{ color:var(--c-slate); font-weight:700; margin:0 0 1em; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-block; font-family:var(--font-en); font-weight:500;
  letter-spacing:.1em; padding:12px 26px; border:1px solid var(--c-slate);
  color:var(--c-slate); background:transparent; border-radius:2px; margin:6px 8px 6px 0;
  transition:.25s;
}
.btn:hover{ background:var(--c-slate); color:#fff; opacity:1; }
.btn--fill{ background:var(--c-slate); color:#fff; }
.btn--fill:hover{ background:var(--c-ink); border-color:var(--c-ink); }

/* ============================================================
   Contact table
   ============================================================ */
.contact-table{ width:100%; border-collapse:collapse; max-width:760px; margin:0 auto; }
.contact-table th,.contact-table td{
  text-align:left; vertical-align:top; padding:18px 16px; border-bottom:1px solid var(--c-line);
}
.contact-table th{ width:34%; font-weight:700; color:var(--c-slate); white-space:nowrap; }
.contact-table p{ margin:.2em 0; }
.contact-cta{ text-align:center; margin-top:40px; }

/* ============================================================
   Blog (front latest + archive)
   ============================================================ */
.blog-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.blog-empty{ text-align:center; color:var(--c-slate); padding:32px 0; }
.post-card{ border:1px solid var(--c-line); padding:24px; border-radius:2px; }
.post-card h3{ margin:.2em 0; font-size:1.15rem; }
.post-meta{ font-size:.8rem; color:var(--c-teal); letter-spacing:.06em; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background:var(--c-ink); color:rgba(255,255,255,.85); padding:40px 0; }
.site-footer .inner{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.site-footer a{ color:rgba(255,255,255,.85); }
.site-footer .copyright{ font-family:var(--font-en); letter-spacing:.06em; font-size:.85rem; }

/* ============================================================
   Generic page (privacy etc.)
   ============================================================ */
.page-wrap{ padding:120px 0 96px; }
.page-wrap .title-en{ text-align:center; }
.page-wrap .page-lead{ text-align:center; color:var(--c-teal); }
.page-content{ max-width:820px; margin:48px auto 0; }
.page-content h2,.page-content h3{ color:var(--c-slate); margin-top:2em; }
.breadcrumb{ text-align:center; font-size:.82rem; color:var(--c-slate); margin-top:8px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:880px){
  .row,.points,.voice{ flex-direction:column; gap:32px; }
  .row--reverse{ flex-direction:column; }
  .album{ grid-template-columns:repeat(2,1fr); }
  .blog-list{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .section{ padding:64px 0; }
  .gnav{
    position:fixed; inset:72px 0 auto 0; background:var(--c-white);
    border-bottom:1px solid var(--c-line); transform:translateY(-120%);
    transition:transform .3s; box-shadow:0 10px 20px rgba(0,0,0,.06);
  }
  .gnav.open{ transform:translateY(0); }
  .gnav ul{ flex-direction:column; gap:0; }
  .gnav li{ border-top:1px solid var(--c-line); }
  .gnav a{ display:block; padding:16px 24px; }
  .nav-toggle{ display:block; }
  .album{ grid-template-columns:1fr 1fr; }
}