@charset "UTF-8";
/* =========================================================
   USTOOL.jp  -  base
   全ページが読む土台。
   デザイントークン / リセット / ヘッダー / フッター /
   ボタン / セクション見出し / カード。
   ページ固有のものは home.css・page.css などに置く。
   ========================================================= */

/* ---------- design tokens ---------- */
:root{
  /* 背景はイラスト素材（mockupから切出し）の地色に合わせている */
  --paper:      #fcfbf9;
  --paper-2:    #f4f1e9;
  --white:      #fcfbf9;
  --ink:        #3f3b34;
  --ink-soft:   #6b655b;
  --line:       #d6cfc2;
  --line-soft:  #e6e0d4;

  --teal:       #2b7a8c;
  --teal-soft:  #eaf3f5;
  --orange:     #cf9327;
  --orange-soft:#fbf3e2;
  --red:        #cd5540;
  --red-soft:   #fbeeea;
  --slate:      #55707e;
  --slate-soft: #edf1f4;

  --radius:     18px;
  --wrap:       1080px;
  --gap:        clamp(20px, 3vw, 36px);

  --font-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-body:  "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;

  --shadow-card: 0 2px 0 rgba(63,59,52,.06), 0 10px 24px -18px rgba(63,59,52,.5);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.9;
  color:var(--ink);
  background:var(--paper);
  /* 紙の質感（うっすらノイズ + 罫線） */
  background-image:
    radial-gradient(rgba(63,59,52,.035) 1px, transparent 1px);
  background-size:4px 4px;
  overflow-wrap:break-word;
}
img{ max-width:100%; height:auto; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
svg{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--white); padding:10px 18px; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

:where(a,button,input,textarea):focus-visible{
  outline:3px solid var(--teal); outline-offset:3px; border-radius:6px;
}

/* ---------- 画像プレースホルダ（画像未配置でも崩れない） ---------- */
/* is-missing は js/main.js が読み込み失敗時に付ける */
.illust{
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.illust.is-missing{
  min-height:120px;
  border:2px dashed var(--line);
  border-radius:var(--radius);
  background:
    repeating-linear-gradient(45deg, rgba(214,207,194,.16) 0 8px, transparent 8px 16px);
}
.illust.is-missing img{ display:none; }
.illust.is-missing::after{
  content:"IMAGE";
  font-family:var(--font-round); font-size:.75rem; letter-spacing:.2em;
  color:var(--line);
}

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,248,243,.94);
  backdrop-filter:blur(6px);
  border-bottom:2px solid var(--line-soft);
}
.header__inner{
  width:min(100% - 32px, 1180px); margin-inline:auto;
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
  min-height:82px;
}

/* logo（テキスト・ゴシック） */
.logo{ display:block; flex-shrink:0; padding:6px 0; line-height:1.05; }
.logo__main{
  display:block;
  font-family:var(--font-body); font-weight:700;
  font-size:clamp(26px, 4.4vw, 38px);
  letter-spacing:.04em;
}
/* 立体プレート風：左上に白ハイライト、右下に同系色の濃い影を短く落とす */
.logo__us{
  color:var(--red);
  text-shadow:-1px -1px 0 #fff, 1.5px 1.5px 0 #8f3325;
}
.logo__tool{
  color:var(--teal);
  text-shadow:-1px -1px 0 #fff, 1.5px 1.5px 0 #17505d;
}
.logo__sub{
  display:block;
  font-family:var(--font-body); font-weight:500;
  font-size:clamp(10px, 1.4vw, 13px);
  color:var(--teal); letter-spacing:.14em;
  border-top:1.5px solid var(--teal);
  padding-top:3px; margin-top:3px;
  text-align:right;
}
.logo:hover .logo__main{ opacity:.8; }

/* =========================================================
   BUTTON
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-round); font-weight:700;
  padding:14px 26px; border-radius:14px;
  transition:transform .18s, background-color .18s, color .18s;
}
.btn .arw{ width:34px; height:12px; }
.btn--outline{
  margin-top:clamp(20px,3vw,32px);
  border:2px solid var(--teal); color:var(--teal); background:var(--white);
  box-shadow:3px 3px 0 rgba(43,122,140,.16);
}
.btn--outline:hover{ background:var(--teal); color:var(--white); transform:translate(1px,1px); }

/* =========================================================
   セクション見出し
   ========================================================= */
.tools{ padding-block:clamp(38px, 5vw, 64px); }

.sec-head{ text-align:center; margin-bottom:clamp(26px,3.4vw,44px); }
.sec-title{
  display:inline-flex; align-items:center; gap:18px;
  font-family:var(--font-round); font-weight:900;
  font-size:clamp(26px, 4vw, 40px);
  letter-spacing:.14em; color:var(--teal);
}
/* 見出し脇のキラキラ（ヒーローのイラストと世界観を合わせる） */
.sec-title .star{
  width:clamp(30px, 4vw, 42px); height:auto; flex-shrink:0;
  fill:currentColor; stroke:none;
}
.sec-title .star__big{ color:inherit; opacity:.9; }
.sec-title .star__sm{ fill:var(--orange); opacity:.85; }
.sec-title .star--r{ transform:scaleX(-1); }
.sec-lead{ margin-top:6px; font-size:clamp(13px,1.5vw,15px); color:var(--ink-soft); }

/* =========================================================
   CARD（トップと下層ページで共通）
   ========================================================= */
/* カードは2×2。4列だと1枚が細くなりすぎるため */
.cards{
  display:grid; gap:clamp(16px,2.2vw,26px);
  grid-template-columns:repeat(2, minmax(0,1fr));
  align-items:stretch;
  max-width:880px; margin-inline:auto;
}
.card{
  position:relative; cursor:pointer;
  display:flex; flex-direction:column;
  background:var(--white);
  border:2px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(18px,2.2vw,26px);
  box-shadow:var(--shadow-card);
  transition:transform .2s, box-shadow .2s;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 2px 0 rgba(63,59,52,.06), 0 18px 30px -20px rgba(63,59,52,.6); }

.card--jlpt{ border-color:#a9cfd8; background:linear-gradient(180deg,var(--teal-soft),var(--white) 42%); }
.card--kanji{ border-color:#e0c489; background:linear-gradient(180deg,var(--orange-soft),var(--white) 42%); }
.card--teacher{ border-color:#e5b0a3; background:linear-gradient(180deg,var(--red-soft),var(--white) 42%); }
.card--typing{ border-color:#b7c4cc; background:linear-gradient(180deg,var(--slate-soft),var(--white) 42%); }

.card__head{ display:flex; align-items:center; gap:12px; }
.card__no{
  flex-shrink:0;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-round); font-weight:700; font-size:15px;
  border:2px solid currentColor;
}
.card--jlpt .card__no,   .card--jlpt .card__title,   .card--jlpt .card__en{ color:var(--teal); }
.card--kanji .card__no,  .card--kanji .card__title,  .card--kanji .card__en{ color:var(--orange); }
.card--teacher .card__no,.card--teacher .card__title,.card--teacher .card__en{ color:var(--red); }
.card--typing .card__no, .card--typing .card__title, .card--typing .card__en{ color:var(--slate); }

.card__title{
  font-family:var(--font-round); font-weight:900;
  font-size:clamp(22px,2.6vw,28px); line-height:1.3;
}
.card__sub{ font-size:13px; color:var(--ink-soft); line-height:1.6; }
.card__limit{ margin-top:5px; }
.card__en{
  font-size:11px; line-height:1.4; letter-spacing:.04em;
  color:currentColor; opacity:.75;
}

.illust--card{ margin-block:clamp(14px,2vw,20px); }
.illust--card img{ width:100%; }

.card__text{
  text-align:center; font-size:clamp(13px,1.5vw,15px);
  color:var(--ink-soft); line-height:1.9;
}

.card__link{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:auto; padding-top:clamp(16px,2vw,22px);
  font-family:var(--font-round); font-weight:700; font-size:15px;
  transition:gap .18s;
}
.card__link .arw{ width:38px; height:12px; }
.card__link:hover{ gap:18px; }
/* カード全体をクリック範囲にする（リンクは1つのまま広げる） */
.card__link::after{
  content:""; position:absolute; inset:0; z-index:1;
  border-radius:var(--radius);
}
.card:hover .card__link{ gap:18px; }
.card:focus-within{ outline:3px solid var(--teal); outline-offset:3px; }
.card__link:focus-visible{ outline:none; }
.card--jlpt .card__link{ color:var(--teal); }
.card--kanji .card__link{ color:var(--orange); }
.card--teacher .card__link{ color:var(--red); }
.card--typing .card__link{ color:var(--slate); }

/* =========================================================
   PANEL（枠つきの囲み）
   ========================================================= */
.panel{
  position:relative;
  background:var(--white);
  border:2px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(26px,3vw,34px) clamp(18px,2.4vw,30px) clamp(20px,2.4vw,28px);
  box-shadow:var(--shadow-card);
}
.panel__title{
  position:absolute; top:-16px; left:22px;
  font-family:var(--font-round); font-weight:700; font-size:15px;
  color:var(--red);
  background:var(--white);
  border:2px dashed var(--red);
  border-radius:10px;
  padding:2px 16px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  border-top:2px solid var(--line-soft);
  padding-top:clamp(20px,2.6vw,30px);
}
.copyright{
  text-align:center;
  font-family:var(--font-round); font-size:12px; color:var(--ink-soft);
  padding:14px 20px 20px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* --- タブレット縦（iPad）--- */
@media (max-width:900px){
  .header__inner{ min-height:70px; }

  /* cards は2×2のまま */
  .card--teacher .illust--card{ max-width:520px; margin-inline:auto; }
}

/* --- スマホ --- */
@media (max-width:600px){
  body{ font-size:15px; }
  .wrap{ width:calc(100% - 32px); }

  .btn--outline{ width:100%; max-width:320px; justify-content:center; }

  .cards{ grid-template-columns:1fr; }
  .illust--card{ max-width:360px; margin-inline:auto; }
}

/* --- モーション配慮 --- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}