/* /h2o/faq/ 専用。見た目は /usm/port-out/ と同じ（白地・グレー・濃いグレー（#333）＋オフセット影）。すべて .hf の中だけに効かせる */
.hf{--ink:#222;--sub:#5E5872;--warn:#C8000F;--fill:#efefef;--fill2:#f7f7f7;--dark:#333;color:var(--ink);font-family:'GenJyuuGothic',sans-serif;font-size:16px;line-height:1.8;padding-bottom:64px}
.hf *,.hf *::before,.hf *::after{box-sizing:border-box}
.hf .gutter{max-width:860px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
.hf p,.hf ul,.hf h1,.hf h2{margin-block:0}
.hf a{color:var(--dark);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.hf a:hover{text-decoration:none}

/* 見出し */
.hf-head{padding-top:36px;padding-bottom:8px;text-align:center}
.hf-head__en{display:flex;align-items:center;justify-content:center;gap:14px;font-size:34px;font-style:italic;font-weight:700;line-height:1.3}
.hf-head__en::before,.hf-head__en::after{content:"";width:2px;height:28px;background:var(--dark)}
.hf .hf-head__ja{margin-top:2px;font-size:22px;font-weight:800;line-height:1.5}
.hf .hf-lead{margin-top:18px;text-align:left}
.hf-pc-br{display:none}

/* ページ内リンク */
.hf-nav{position:sticky;top:60px;z-index:10;padding-top:14px;padding-bottom:14px;background:#fff}
.hf-nav ul{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:0;list-style:none}
.hf-nav a{display:flex;align-items:center;justify-content:center;height:100%;min-height:48px;padding:6px 8px;border:2px solid var(--dark);border-radius:999px;background:var(--fill);box-shadow:2px 3px 0 var(--dark);color:var(--dark);font-size:14px;font-weight:800;line-height:1.35;text-align:center;text-decoration:none}
.hf-nav a{background:var(--dark);color:#fff;box-shadow:2px 3px 0 #999}.hf-nav a:hover{background:#000;color:#fff}
.hf-nav a:focus-visible{outline:3px solid #1D5FA8;outline-offset:2px}
.hf-sec{scroll-margin-top:140px}

/* セクション */
.hf-body{padding-top:16px}
.hf-sec+.hf-sec{margin-top:48px}
.hf .hf-sec__title{margin-bottom:40px;padding:8px 14px;border:2px solid var(--dark);border-radius:12px;background:var(--fill);box-shadow:4px 5px 0 var(--dark);font-size:18px;font-weight:800;line-height:1.5;text-align:center}

/* Q&A */
.hf-qa{margin-bottom:22px;border:2px solid var(--dark);border-radius:12px;background:#fff;box-shadow:4px 5px 0 var(--dark);overflow:hidden}
.hf-qa__q{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-bottom:2px solid var(--dark);background:var(--fill2);font-size:16px;font-weight:800;line-height:1.6}
.hf-qa__mark{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:2px solid var(--dark);border-radius:50%;background:var(--dark);color:#fff;font-size:15px;font-style:italic;line-height:1}
.hf-qa__a{padding:16px 18px}
.hf-qa__a p+p{margin-top:12px}
.hf-qa__a p.gap{margin-top:18px}
.hf-qa__a strong{font-weight:800;background:none}

/* 連絡先 */
.hf-contact{margin-top:14px;padding:14px 16px;border-radius:12px;background:#e4e4e4;font-size:15px}
.hf-contact p+p{margin-top:6px}
.hf-contact__title{font-weight:800;font-size:16px}
.hf-contact__small{font-size:13px;line-height:1.7}
.hf-qa__a .hf-contact{margin-top:14px}

@media (min-width:761px){.hf-pc-br{display:inline}.hf .hf-head__ja{font-size:26px}}
@media (max-width:760px){
  .hf-head__en{font-size:28px}
  .hf-nav{top:52px}
  .hf-nav ul{grid-template-columns:1fr 1fr}
  .hf-sec{scroll-margin-top:190px}
  .hf-sec__title{font-size:17px}
  .hf-qa__q{padding:12px 14px}
  .hf-qa__a{padding:14px}
}