@charset "UTF-8";
/* =========================================================
   USTOOL.jp  -  home（トップページ専用）
   base.css のあとに読む。
   グローバルナビ / ヒーロー / タグ / ミニツール /
   お知らせ / 3分割フッター。
   ========================================================= */

/* =========================================================
   GLOBAL NAV（トップだけ。下層は page.css のパンくず）
   ========================================================= */
.gnav{ margin-left:auto; }
.gnav__list{ display:flex; align-items:flex-end; gap:clamp(14px, 2.4vw, 34px); }
.gnav__link{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-family:var(--font-round); font-size:13px; font-weight:500;
  color:var(--ink-soft);
  padding:6px 2px 8px;
  border-bottom:3px solid transparent;
  transition:color .18s, border-color .18s, transform .18s;
}
.gnav__link .ico{ width:30px; height:30px; }
/* 英語併記（留学生向け。ブラウザ翻訳が効くよう全てテキストで持つ） */
.gnav__en{
  font-family:var(--font-body); font-weight:400;
  font-size:10px; letter-spacing:.02em; line-height:1.2;
  color:var(--line); white-space:nowrap;
}
.gnav__link:hover .gnav__en,
.gnav__link.is-current .gnav__en{ color:currentColor; opacity:.7; }
.gnav__link:hover{ color:var(--teal); transform:translateY(-2px); }
.gnav__link.is-current{ color:var(--red); border-bottom-color:var(--red); }

/* hamburger */
.navbtn{
  display:none;
  margin-left:auto;
  width:46px; height:46px;
  border:2px solid var(--line); border-radius:12px;
  position:relative; background:var(--white);
}
.navbtn span{
  position:absolute; left:11px; right:11px; height:2px;
  background:var(--ink); border-radius:2px;
  transition:transform .25s, opacity .2s;
}
.navbtn span:nth-child(1){ top:15px; }
.navbtn span:nth-child(2){ top:21px; }
.navbtn span:nth-child(3){ top:27px; }
.navbtn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.navbtn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.navbtn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  border-bottom:2px solid var(--line-soft);
  padding-block:clamp(24px, 4vw, 48px) clamp(28px, 4vw, 56px);
}
.hero__inner{
  width:min(100% - 40px, var(--wrap)); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:center; gap:var(--gap);
}
.hero__title{
  font-family:var(--font-round); font-weight:900;
  font-size:clamp(34px, 6.4vw, 62px);
  line-height:1.32; letter-spacing:.01em;
}
.hero__title .line{ display:block; }
.hero__title .mark{
  font-style:normal; position:relative; color:var(--red);
  padding-inline:2px;
}
/* 手描き風のアンダーライン */
.hero__title .mark::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:.06em; height:.16em;
  background:var(--orange); opacity:.5; border-radius:.1em;
  transform:rotate(-1.2deg);
}

.hero__lead{
  margin-top:clamp(18px,2.6vw,28px);
  font-size:clamp(14px,1.6vw,17px);
  color:var(--ink-soft); line-height:2.1;
}

.hero__note{
  margin-top:10px;
  font-size:clamp(12px,1.35vw,14px);
  color:var(--ink-soft); line-height:1.8;
  padding-left:14px; position:relative;
}
.hero__note::before{
  content:""; position:absolute; left:0; top:.72em;
  width:6px; height:6px; border-radius:50%;
  background:var(--orange);
}

.hero__lead-en{
  margin-top:8px;
  font-size:clamp(12px,1.35vw,14px);
  color:var(--teal); line-height:1.75; letter-spacing:.01em;
}

.hero__visual{ min-width:0; }
.illust--hero img{ width:100%; }

/* =========================================================
   TOOL BOX（カード本体は base.css。ここはトップ固有の中身）
   ========================================================= */
.illust--typing svg{
  width:100%; height:auto; color:#9fb0ba; stroke-width:2.4;
}

.tags{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
  margin-top:14px;
}
.tags li{
  font-family:var(--font-round); font-size:12px; font-weight:500;
  padding:3px 10px; border-radius:8px;
  border:1.5px solid currentColor; background:var(--white);
}
.card--jlpt .tags li{ color:var(--teal); }
.card--kanji .tags li{ color:var(--orange); }
.card--typing .tags li{ color:var(--slate); }
.tags__dots{ border:0 !important; background:none !important; padding:3px 2px !important; }

/* 上段3つ・下段2つ（下段は中央寄せ）を6分割グリッドで組む */
.minitools{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px 4px; margin-top:14px;
}
.minitools li:nth-child(1){ grid-column:1 / span 2; }
.minitools li:nth-child(2){ grid-column:3 / span 2; }
.minitools li:nth-child(3){ grid-column:5 / span 2; }
.minitools li:nth-child(4){ grid-column:2 / span 2; }
.minitools li:nth-child(5){ grid-column:4 / span 2; }
.minitools li{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-family:var(--font-round); font-size:12px; text-align:center;
  color:var(--ink-soft); line-height:1.4;
  padding-inline:2px;
}
.minitools li img{ height:34px; width:auto; }
.minitools li:nth-child(2),
.minitools li:nth-child(3),
.minitools li:nth-child(5){ border-left:1.5px dotted var(--line); }

/* =========================================================
   NEWS
   ========================================================= */
.lower{ padding-bottom:clamp(38px,5vw,64px); }
.lower__grid{
  display:grid; gap:clamp(16px,2.2vw,26px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  align-items:start;
}
/* パネルが1つだけのとき（お知らせのみ） */
.lower__grid--single{ grid-template-columns:minmax(0,1fr); max-width:720px; margin-inline:auto; }

/* お知らせを1件ずつ並べるとき用。
   今のトップは「公開準備中」表示（.news-empty）なので出番がないが、
   再開したらそのまま使うので残してある */
.news__item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline; gap:6px 14px;
  padding:9px 2px;
  border-bottom:1.5px dotted var(--line-soft);
}
.news__date{
  font-family:var(--font-round); font-size:13px; color:var(--ink-soft);
  letter-spacing:.02em; white-space:nowrap;
}
.news__link{
  font-size:14px;
  text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:4px; transition:text-decoration-color .18s, color .18s;
}
.news__link:hover{ color:var(--teal); text-decoration-color:var(--teal); }
.badge{
  font-family:var(--font-round); font-size:10px; font-weight:700; letter-spacing:.06em;
  color:var(--red); border:1.5px solid var(--red); border-radius:5px;
  padding:1px 6px; white-space:nowrap;
}

/* お知らせが未掲載のときの表示 */
.news-empty{
  padding:clamp(18px,2.4vw,28px) 4px 0;
  text-align:center; line-height:2;
  font-size:clamp(14px,1.6vw,15px); color:var(--ink-soft);
}
.news-empty__en{
  margin-top:6px; text-align:center;
  font-size:clamp(12px,1.35vw,13px); color:var(--teal);
}

.panel__foot{
  display:flex; align-items:center; gap:10px;
  margin-top:16px;
}
.panel__foot--empty{ justify-content:center; margin-top:clamp(14px,2vw,22px); }
.illust--mega{ flex-shrink:0; width:clamp(70px,9vw,104px); }
.illust--mega img{ width:100%; }

/* =========================================================
   FOOTER（トップだけイラスト入りの3分割。下層は著作権表記のみ）
   ========================================================= */
.footer__inner{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,2fr) minmax(0,.7fr);
  align-items:end; gap:clamp(14px,2vw,28px);
}
.illust--footL img,.illust--footR img{ width:100%; }

.fnav{
  display:flex; justify-content:center; align-items:center;
  padding-bottom:10px;
}
.fnav__list{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px clamp(18px,3vw,34px);
}
.fnav__list li{
  font-family:var(--font-round); font-size:14px;
  position:relative;
}
/* 項目の間に細い区切りを入れる */
.fnav__list li + li::before{
  content:""; position:absolute; left:calc(clamp(18px,3vw,34px) / -2);
  top:.35em; bottom:.35em; width:1.5px; background:var(--line);
}
.fnav__list a{ color:var(--ink-soft); transition:color .18s; }
.fnav__list a:hover{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; }

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

/* --- タブレット横 / 小さめPC --- */
@media (max-width:1080px){
  .gnav__list{ gap:16px; }
  .gnav__link{ font-size:12px; }
  .gnav__link .ico{ width:26px; height:26px; }
}

/* --- タブレット縦（iPad）--- */
@media (max-width:900px){
  /* ハンバーガー開閉 */
  .navbtn{ display:block; }
  .gnav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--paper);
    border-bottom:2px solid var(--line-soft);
    box-shadow:0 14px 24px -18px rgba(63,59,52,.7);
    display:none;
  }
  .gnav.is-open{ display:block; }
  .gnav__list{
    flex-direction:column; align-items:stretch; gap:0;
    width:min(100% - 32px, 640px); margin-inline:auto;
    padding-block:8px;
  }
  .gnav__item + .gnav__item{ border-top:1.5px dotted var(--line); }
  .gnav__link{
    flex-direction:row; justify-content:flex-start; gap:14px;
    font-size:15px; padding:14px 8px;
    border-bottom:0; border-left:4px solid transparent;
  }
  .gnav__link.is-current{ border-left-color:var(--red); }
  .gnav__link:hover{ transform:none; }

  /* hero を縦積み */
  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__body{ order:2; display:flex; flex-direction:column; align-items:center; }
  /* 中央寄せになるので行頭の点は外す */
  .hero__note{ padding-left:0; }
  .hero__note::before{ display:none; }
  .hero__visual{ order:1; max-width:560px; margin-inline:auto; }

  /* news 縦積み */
  .lower__grid{ grid-template-columns:1fr; }

  /* footer */
  .footer__inner{ grid-template-columns:1fr; justify-items:center; }
  .illust--footL,.illust--footR{ max-width:300px; }
  .illust--footL{ order:2; }
  .illust--footR{ display:none; }
  .fnav{ order:1; width:100%; }
}

/* --- スマホ --- */
@media (max-width:600px){
  .hero__inner{ width:calc(100% - 32px); }
  .hero{ padding-block:22px 30px; }
  .hero__title{ line-height:1.4; }
  .hero__lead{ font-size:14px; line-height:1.95; }

  .minitools{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .minitools li:nth-child(n){ grid-column:auto; border-left:0; }
  .minitools li{
    flex-direction:row; justify-content:center; gap:8px;
    border:1.5px solid var(--line); border-radius:10px; padding:6px 4px; background:var(--white);
  }
  .minitools li img{ height:26px; }

  /* お知らせ：日付を上、タイトルを下に */
  .news__item{
    grid-template-columns:auto 1fr;
    gap:2px 10px;
  }
  .news__date{ grid-row:1; grid-column:1; }
  .badge{ grid-row:1; grid-column:2; justify-self:start; }
  .news__link{ grid-row:2; grid-column:1 / -1; }

  .fnav__list{ gap:8px 18px; font-size:13px; }
}