/* ===========================================
       ベース・リセット系
=========================================== */
@charset "utf-8";

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  height: auto;
}

html, body {
  scrollbar-width: none;       /* スクロールバーを非表示に */
  -ms-overflow-style: none;    /* IE 10+ 用 */
}

/* Chrome, Safari, Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  height: auto;
  width: 100%;
  min-width: 375px;
  font-family: "Inter", "Noto Sans JP", sans-serif;
  color: var(--color-black);
}

.horizontal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}


.horizontal-scroll::-webkit-scrollbar {
  height: 0.375rem; 
}
.horizontal-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.3);
  border-radius: 0.1875rem; 
}
.horizontal-scroll::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0.05);
}


/* スキップリンク */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background:var(--color-black);
  color:var(--color-white);
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  z-index: 1000;
  font-weight: bold;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-white);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.tosei-logo{
display: block;
width: 100%;
}

/* ===========================================
        タイポグラフィ
=========================================== */

p {
  font-size: var(--font-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.font-sm {
  font-size: var(--font-sm);
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-sm);
}

.caption {
  font-size: var(--font-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
}

br.spacer {
  display: block;
  margin-bottom: 0.5em;
}

.color-navy{
  color: var(--color-navy);
}

.color-accent{
  color: var(--color-accent);
}

.u-invert {
  color: var(--color-white);
}

.u-bg-brand-blue{
background-color: var(--color-primary);
}

.u-bg-light-blue{
background-color: var(--color-light-blue);
}

 /* コピーライト */
.footer__copyright{
 display: block;
 text-align: center;
}

/* フレックス系 */
/* デフォルト縦並び */
.flex { display: flex;}
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }

/* 配置 */
.flex-center { justify-content: center; align-items: center; }
.flex-start { justify-content: flex-start; align-items: flex-start; }
.flex-end { justify-content: flex-end; align-items: flex-end; }
.flex-between { justify-content: space-between; align-items: center; }

/* ギャップ */
.flex-gap-sm { gap: 8px; }
.flex-gap-md { gap: 16px; }
.flex-gap-lg { gap: 32px; }

/* 横並びにするレスポンシブ */
@media (min-width: 768px) {
  .flex-md-row { flex-direction: row; }
  .flex-md-center { justify-content: center; align-items: center; }
  .flex-md-between { justify-content: space-between; align-items: center; }
  .flex-md-gap-md { gap: 16px; }
  .flex-md-gap-lg { gap: 32px; }
}

/* 配置調整 */
.txt-center {
  text-align: center;
}
.txt-right {
  text-align: right;
}
.txt-left {
  text-align: left;
}

/* 装飾系 */
.link-underline {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.link-underline:hover,
.link-underline:focus {
  color: var(--color-primary-dark);
  outline: none;
}

.nowrap{
  white-space: nowrap;
}