@charset "utf-8";

html {
  font-size: 18px;
}

:root {
    --color-yellow: #ffda15;
    --color-black: #0d1528;
    --color-white: #fff;
    --color-paleblack: #323233;
    --color-blue: #9f9beb;
    --color-brown: #6d4d4d;
    --color-whitegray: #e0e0e0;
    --color-gray: #888;
    --radius-1: 6px;
    --ab-doramin: "ab-doramin", sans-serif;
    --ab-countryroad: "ab-countryroad", sans-serif;
    --ab-karuta-bold: "ab-karuta-bold", sans-serif;
    --ab-kikori: "ab-kikori", sans-serif;
    --ab-kirigirisu: "ab-kirigirisu", sans-serif;
    --ab-tyuusyobokunenn: "ab-tyuusyobokunenn", sans-serif;
    --ab-megadot9: "ab-megadot9", sans-serif;
    --ta-rb: "ta-rb", sans-serif;
    --ab-junglecock-01: "ab-junglecock-01", sans-serif;
    --ab-shonen-oto: "ab-shonen-oto", sans-serif;
    --ab-shoutenkaku: "ab-shoutenkaku", sans-serif;
    --ab-ishi-chan: "ab-ishi-chan", sans-serif;
    --ab-don: "ab-don", sans-serif;
    --ab-kokoro-no3: "ab-kokoro-no3", sans-serif;
    --ab-j-gu: "ab-j-gu", sans-serif;
    --ab-j-choki: "ab-j-choki", sans-serif;
    --ab-24h: "ab-24h", sans-serif;
    --ta-nasubi: "ta-nasubi", sans-serif;
    --ab-marusan: "ab-marusan", sans-serif;
    --ab-accent: "ab-accent", sans-serif;
    --taw-kadomaru-tsurara: "taw-kadomaru-tsurara", sans-serif;
    --ab-appare: "ab-appare", sans-serif;
    --ab-hanamaki: "ab-hanamaki", sans-serif;
    --ab-lineboard-bold: "ab-lineboard-bold", sans-serif;
    --ab-quadra: "ab-quadra", sans-serif;
    --ab-tombo-bold: "ab-tombo-bold", sans-serif;
//    --ab-tsubaki: "ab-tsubaki", sans-serif;
    --ab-yurumin: "ab-yurumin", sans-serif;
    --ta-engeifude: "ta-engeifude", sans-serif;
    --ta-marugo-gf-01: "ta-marugo-gf-01", sans-serif;
    --ta-kasanemarugo: "ta-kasanemarugo", sans-serif;
    --ta-oonishi: "ta-oonishi", sans-serif;

       /* 18-22 320-1200 */
    --fontsize: clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);
    /* --Jungecock: 'Junglecock', 'Hiragino Sans', sans-serif;
    --Tsubaki: 'Tsubaki', 'Hiragino Sans', sans-serif;
    --Tonbo: 'Tonbo', 'Hiragino Sans', sans-serif;
    --Shotenkaku: 'Shotenkaku', 'Hiragino Sans', sans-serif;
    --Polcadot: 'Polcadot', 'Hiragino Sans', sans-serif;
    --Megadot9: 'Megadot9', 'Hiragino Sans', sans-serif;
    --Kokoro: 'Kokoro', 'Hiragino Sans', sans-serif;
    --Kikori: 'Kikori', 'Hiragino Sans', sans-serif;
    --Kai: 'Kai', 'Hiragino Sans', sans-serif;
    --IshiChan: 'IshiChan', 'Hiragino Sans', sans-serif;
    --F113049PIC: 'F113049PIC', 'Hiragino Sans', sans-serif;
    --Doudoukaisyo: 'Doudoukaisyo', 'Hiragino Sans', sans-serif;
    --Doramin: 'Doramin', 'Hiragino Sans', sans-serif;
    --Countryroad: 'Countryroad', 'Hiragino Sans', sans-serif;
    --AppareRJ1: 'AppareRJ1', 'Hiragino Sans', sans-serif;
    --Sajimin: 'Sajimin', 'Hiragino Sans', sans-serif;
    --Kirigirisu: 'Kirigirisu', 'Hiragino Sans', sans-serif;
    --24H:'24H', 'Hiragino Sans', sans-serif;
    --Don:'Don', 'Hiragino Sans', sans-serif;
    --doramin:'doramin', 'Hiragino Sans', sans-serif;
    --ikkyu:'ikkyu', 'Hiragino Sans', sans-serif;
    --jchoki:'jchoki', 'Hiragino Sans', sans-serif;
    --karutaB:'karutaB', 'Hiragino Sans', sans-serif;
    --rb:'rb', 'Hiragino Sans', sans-serif;
    --roman:'roman', 'Hiragino Sans', sans-serif;
    --shonen_otoKna:'shonen_otoKna', 'Hiragino Sans', sans-serif;
    --chusyobokunen:'chusyobokunen', 'Hiragino Sans', sans-serif;
    --houdate_K:'houdate_K', 'Hiragino Sans', sans-serif;
    --nasubi:'nasubi', 'Hiragino Sans', sans-serif; */
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* スマホでのスクロール最適化 */
html {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* iOSでのスクロール問題を防止 */
  position: relative;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  background: var(--color-black);
  color: var(--color-white);
  overflow-x: hidden;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  /* スマホでのスクロール最適化 */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  /* iOSでのバウンススクロールを抑制 */
  overscroll-behavior-y: contain;
  position:relative;
  z-index:-9999;
}

h1, h2, h3, h4, h5, h6, p, figure, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img{
    max-width: 100%;
    height: auto;
    display: block;
}
/* p, li {
  text-align: justify;
} */


/* ボタン共通CSS */

/* .btn {
  padding: 1.2rem 3rem;
  font-size: 1.1rem;
  font-weight: 700;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  position: relative;
}
.btn::after {
	animation: 2s 0s shine linear infinite;
	background: linear-gradient(to right, rgba(255,255,255,0) 25%, rgba(255,255,255,.8) 50%, rgba(255, 255, 255, 0) 75%);
	content: '';
	height: 100%;
	left: -100%;
	position: absolute;
	top: 0;
	transform: skewX(-15deg);
	width: 100%;
}
.btn:hover {
	color: var(--color-black);
  transform: scale(1.1,1.1);
}
*/
@keyframes shine {
	20% {
		left: 100%;
	}
	100% {
		left: 100%;
	}
}

.btn {
  padding: 1.2rem 4.5rem 1.2rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  position: relative;
  /* min-width: 260px; */

  /* キラキラをボタン内に収めるなら hidden、／ 白丸を少しはみ出させるなら visible に調整してね */
  overflow: hidden;
}

/* ⭐ キラキラ用（before に逃がす） */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, .8) 50%,
    rgba(255, 255, 255, 0) 75%
  );
  transform: skewX(-15deg);
  animation: shine 2s linear infinite;
  pointer-events: none; /* クリックの邪魔をしないように */
  border-radius: inherit; /* 角丸にフィット */
}

.btn:hover {
  /* transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); */
  color: var(--color-black);
  transform: scale(1.1,1.1);

}

/* 矢印アイコンを右側の円の中に配置 */
.btn::after {
  font-family: "Material Symbols Outlined";
  content: "\e941";
  font-weight: normal;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4em;
  width: 40px;
  height: 40px;
  background: var(--color-white);
  border-radius: 50%;
  color: var(--color-black);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}

.btn:hover::after {
  transform: translateY(-50%) translateX(4px);
}

@media (max-width: 968px) {
  .btn {
    width: 100%;
    /* max-width: 400px; */
    justify-content: center;
    }
  }

@media (width <= 425px) {
.btn {
  padding: 1.2rem 0;
  /* width: 95%; */
}
}


/* .btn-primary {
  font-size: clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);
  padding: 1.4rem 6rem;
}
.btn-primary, .plan-btn {
  background: var(--color-yellow);
  color: var(--color-black);
  transition: all 0.3s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
}


.btn-primary::before {
  font-family: "Material Symbols Outlined";
  content: "\e941";
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  vertical-align: middle;
  font-size: 1.2em;
  position: relative;
  transition: transform 0.5s ease;
}

.btn-primary:hover {
  transform: scale(1.1,1.1);
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}

.btn-primary:hover::before {
  animation: arrow-loop 1.2s ease-in-out infinite;
} */

.btn-primary {
  font-size: clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);
  padding: 1.4rem 7rem;
  background: var(--color-yellow);
  color: var(--color-black);
  transition: all 0.3s;
}

a.plan-btn.btn-primary {
  /* 14-18 320-1200 */
  font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
  padding: 1.4rem 0;
  justify-content: center;
}

@media (width <= 768px) {
  a.plan-btn.btn-primary {
    padding: 1.2rem 0;
    width: 100%;
  }
}

.btn-primary::after {
  color: var(--color-black);
}

.btn-primary:hover {
  background: #ffed4e;
  transform: scale(1.1,1.1);
  text-indent: 0.12em;
  /* transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 218, 21, 0.3); */
}

/* .btn-secondary {
  background: rgba(60, 60, 60, 0.9);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
  background: var(--color-yellow);
  transform: translateY(-2px);
} */


/* .btn-secondary {
  background: var(--color-yellow);
  color: var(--color-black);
}

.btn-secondary::after {
  background: var(--color-white);
  color: var(--color-black);
}

.btn-secondary:hover {
  background: #ffed4e;
  color: var(--color-black);
  transform: translateY(-2px);
}

.btn-secondary:hover::after {
  color: var(--color-black);
} */

/* CTA Sectionのボタン */
/* .cta .btn {
  background: var(--color-black);
  color: #fff;
  18-22 320-1200
  font-size: clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);
  padding: 1.4rem 6rem;
  align-items: center;
  display: inline-flex;
  gap: 0.5em;
  transition: transform 0.3s ease, letter-spacing 0.3s ease, background 0.3s ease;
}

.cta .btn:hover {
  background: var(--color-black);
  transform: scale(1.1,1.1);
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}
.cta .btn::before {
  font-family: "Material Symbols Outlined";
  content: "\e941";
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  vertical-align: middle;
  font-size: 1.2em;
  position: relative;
  transition: transform 0.5s ease;
} */

/* hover中はループアニメーション */
/* .cta .btn:hover::before {
  animation: arrow-loop 1.2s ease-in-out infinite;
} */

/* スムーズに右↔左往復するアニメーション */
/* @keyframes arrow-loop {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(6px);
  }
  50% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(0);
  }
} */

.cta .btn {
  /* 18-22 320-1200 */
  font-size: clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);
  padding: 1.4rem 6rem;
  background: var(--color-black);
  color: var(--color-white);
  padding: 1.4rem 7rem;
  align-items: center;
  display: inline-flex;
  justify-content: flex-start;
  gap: 0.5em;
  transition: transform 0.3s ease, background 0.3s ease;
  position: relative;
  /* min-width: 300px; */
}

.cta .btn:hover {
  background: var(--color-black);
  transform: scale(1.1,1.1);
  /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); */
}

.cta .btn::after {
  font-family: "Material Symbols Outlined";
  content: "\e941";
  font-weight: normal;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  width: 40px;
  height: 40px;
  background: var(--color-white);
  border-radius: 50%;
  color: var(--color-black);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}

.cta .btn:hover::after {
  transform: translateY(-50%) translateX(4px);
}



 @media (width <= 768px) {
  .cta .btn {
    padding: 1.2rem 3rem;
    justify-content: center;
  }
 }
 @media (width <= 425px) {
  .cta .btn {
    padding: 1.2rem 2rem;
  }
 }

 @media (width <= 425px) {
  .btn {
    padding: 1.2rem 3rem 1.2rem 1.5rem;
    /* width: 95%; */
    justify-content: center;
    text-align: center;
  }

  .btn::after {
    width: 32px;
    height: 32px;
    right: 12px;
  }
}
@media (width <= 320px) {
  .btn::after {
    right: 4px;
}
}

@media (width <= 768px) {
  .cta .btn {
    padding: 1.2rem 4rem 1.2rem 2.5rem;
  }

  .cta .btn::after {
    width: 48px;
    height: 48px;
  }
}

@media (width <= 425px) {
  .cta .btn {
    padding: 1.2rem 3.5rem 1.2rem 2rem;
    justify-content: center;
    text-align: center;
  }

  .cta .btn::after {
    width: 44px;
    height: 44px;
    right: 14px;
  }
}

/* headerのボタン */
/* .nav-links a.btn::before {
  font-family: "Material Symbols Outlined";
  content: "\e941";
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  vertical-align: middle;
  font-size: 1.2em;
  position: relative;
  transition: transform 0.3s ease;
}
.nav-links a.btn:hover::before {
  transform: translateX(6px);
} */

.nav-links a.btn {
  padding: 0.7rem 1.5rem;
  font-size: 0.9rem;
  min-width: auto;
}

/* ヘッダーボタンは矢印を表示しない */
.nav-links a.btn::after {
  display: none;
}

.nav-links a.btn:hover::before {
  transform: translateX(6px);
}

/* タブレットとスマホで改行する　*/
.sp-only {
  display: none;
}
@media (max-width: 640px) {
  .sp-only {
    display: inline;
  }
}

/* PCだけ改行する　*/
.pc-only {
  display: none;
}
  @media (min-width: 768px) {
    .pc-only {
      display: inline;
    }
}
/* タブレット以下だけ改行する、PCは改行しない　*/
.tb-only {
  display: none;
}
  @media (width <= 768px) {
    .tb-only {
      display: inline;
    }
}


   /* z-indexを以下のように変更 */
.bg-text { z-index: 0; }          /* 元: z-index: -2; */
.sub-text { z-index: 0; }         /* 元: z-index: -2; */
.hero_app-icon { z-index: 0; }    /* 元: z-index: -2; */
.kanji-container { z-index: 1; }  /* 元: z-index: -2; */
.bottom-cta { z-index: 100; }     /* 元: z-index: -2; */