@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap");
.pc {
  display: block;
}

.sp {
  display: none;
}

@media (max-width: 1024px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
@media (max-width: 734px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
html {
  scroll-behavior: smooth;
  font-size: 10px;
  position: relative;
}
html::after {
  content: "";
  background: url(../img/pc_bg.png) no-repeat;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  width: 100vw;
  height: auto;
  z-index: -100;
}
html body {
  max-width: 430px;
  margin: 0 auto;
  width: 100%;
}
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body p,
html body b,
html body li,
html body span,
html body div,
html body a {
  color: black;
  font-family: "a-otf-ryumin-pr6n", "Yu Mincho", serif;
  font-weight: 300;
  font-style: normal;
}
html body header {
  width: 100%;
  margin: 0 auto;
}
html body section {
  width: 100%;
}
html body .contents {
  width: 100%;
  margin: 0 auto;
}
html body img {
  width: 100%;
  height: auto;
}
html body h1 {
  display: block;
  padding: min(30.9302325581vw, 133px) min(0vw, 0px) min(0vw, 0px) min(0vw, 0px);
  font-size: clamp(8px, 33.488372093vw, 144px);
}
html body h2 {
  font-size: clamp(8px, 4.3162790698vw, 18.56px);
  line-height: min(9.3023255814vw, 40px);
}
html body h3 {
  font-size: clamp(8px, 6.6046511628vw, 28.4px);
}
html body p {
  font-size: clamp(8px, 3.1255813953vw, 13.44px);
  line-height: min(9.3023255814vw, 40px);
}
html body b {
  font-size: 16px;
}
html body a {
  color: black;
  text-decoration: none;
  font-size: 16px;
}
html body li {
  list-style: none;
}
html body .sub {
  font-size: clamp(8px, 3.1255813953vw, 13.44px);
}
html body .h-txt {
  font-size: clamp(8px, 3.7209302326vw, 16px);
}
html body .siro {
  color: #fff;
}
html body footer {
  width: 100%;
}

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

body {
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
  overflow-x: hidden;
  color: black;
  margin: 0 auto;
  color: black;
}

.header {
  max-width: 430px;
  overflow: hidden;
}
.header__wrap {
  background: url(../img/fv_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: min(195.3488372093vw, 840px);
}
.header.is-scrolled .header__wrap {
  background: #fff;
}
.header__ttl--kana {
  display: block;
  text-align: right;
  font-size: clamp(8px, 3.1255813953vw, 13.44px);
  margin: min(4.6511627907vw, 20px) min(6.976744186vw, 30px) min(0vw, 0px) min(0vw, 0px);
}
/* 初期状態 */
.charfade__char {
  display: inline-block;
  opacity: 0;
  transform: translateX(var(--charfade-offset, -20px));
}

/* 発火後：1文字ずつアニメーション */
.is-charfade-active .charfade__char {
  animation: charfade-in 0.6s forwards;
}

@keyframes charfade-in {
  to {
    opacity: 1;
    transform: none;
  }
}
.fadein {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease, transform 1s ease;
}

.fadein-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 1s ease, transform 1s ease;
}

.fadein-right {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}

.fadein.is-active,
.fadein-left.is-active,
.fadein-right.is-active {
  opacity: 1;
  transform: none;
}

.quotation {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.quotation .right-apo,
.quotation .left-apo {
  content: "";
  position: absolute;
  display: flex;
  align-items: center;
  width: min(6.9302325581vw, 29.8px);
  height: min(5.6279069767vw, 24.2px);
  background-size: contain;
}
.quotation .right-apo {
  background: url(../img/right-apo.svg) no-repeat;
  background-size: contain;
  right: -48.7px;
  top: 45px;
}
.quotation .left-apo {
  background: url(../img/left-apo.svg) no-repeat;
  background-size: contain;
  left: -48.7px;
  top: -15px;
}
.quotation span.fadein {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 5s ease, transform 5s ease;
}
.quotation span.fadein-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.quotation span.fadein-right {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.quotation span.fadein.is-active, .quotation span.fadein-left.is-active, .quotation span.fadein-right.is-active {
  opacity: 1;
  transform: none;
}

.profile .quotation {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.profile .quotation .right-apo,
.profile .quotation .left-apo {
  position: absolute;
  display: flex;
  align-items: center;
  width: min(6.9302325581vw, 29.8px);
  height: min(5.6279069767vw, 24.2px);
  background-size: contain;
}
.profile .quotation .right-apo {
  background: url(../img/right-apo-b.svg) no-repeat;
  background-size: contain;
  right: -60.8px;
  top: 45px;
}
.profile .quotation .left-apo {
  background: url(../img/left-apo-b.svg) no-repeat;
  background-size: contain;
  left: -60.8px;
  top: -15px;
}

.js-charfade .charfade__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--charfade-offset, 20px));
  animation: charfade-in-up 1s ease-out both; /* 1秒で完成 */
  animation-play-state: paused; /* 発火前は停止 */
}

.is-charfade-active .charfade__char {
  animation-play-state: running; /* 発火で再生 */
}

@keyframes charfade-in-up {
  from {
    opacity: 0;
    transform: translateY(var(--charfade-offset, 20px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  background-color: #fff;
}

* {
  box-sizing: border-box;
}

html body {
  /* ローディング画面 */
  /* ローディングアニメーション */
}
html body #loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #fff;
  /* 以下のコードを追加 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
html body .loaded {
  opacity: 0;
  visibility: hidden;
}
html body .spinner {
  width: 100px;
  height: 100px;
  margin: 200px auto;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-scaleout 1s infinite ease-in-out;
}
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
html body main {
  max-width: 430px;
  margin: 0 auto;
  scroll-snap-type: y proximity;
}
html body main .reverse,
html body main .lesson,
html body main .free,
html body main .profile,
html body main .sns,
html body main .new-section {
  scroll-snap-align: end;
}
html body main .reverse {
  position: relative;
  z-index: 1;
  background: url(../img/reverse_bg.png) no-repeat;
  background-size: cover;
  padding: min(25.5813953488vw, 110px) min(0vw, 0px) min(0vw, 0px) min(0vw, 0px);
  text-align: center;
  height: min(238.1395348837vw, 1024px);
  max-width: 430px;
  margin: 0 auto;
}
html body main .reverse__ttlarea {
  position: relative;
}
html body main .reverse__ttl {
  color: #fff;
  font-size: clamp(8px, 12.7906976744vw, 55px);
}
html body main .reverse__ttl--sub {
  margin-top: min(5.2325581395vw, 22.5px);
  display: block;
}
html body main .reverse__img {
  width: min(53.488372093vw, 230px);
  margin: 0 auto;
}
html body main .reverse__subttl {
  margin: min(14.6511627907vw, 63px) min(0vw, 0px) min(17.5581395349vw, 75.5px) min(0vw, 0px);
  position: relative;
  display: inline-block;
  z-index: 1;
}
html body main .reverse__subttl::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(1.3953488372vw, 6px);
  width: min(76.2790697674vw, 328px);
  background: url(../img/u-line.svg) no-repeat left bottom;
  background-size: cover;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 1s ease, opacity 0.3s ease;
  z-index: -1;
}
html body main .reverse__subttl.is-active::before {
  transform: scaleX(1);
  opacity: 1;
}
html body main .reverse__txt:nth-of-type(1) {
  margin-bottom: min(16.0465116279vw, 69px);
}
html body main .film {
  z-index: 100;
  position: relative;
  background-color: #fff;
  max-width: 430px;
  margin: 0 auto;
}
html body main .film__img {
  margin: min(30.4651162791vw, 131px) min(0vw, 0px) min(13.9534883721vw, 60px) min(0vw, 0px);
}
html body main .film__ttl {
  margin: 0 auto;
  margin-bottom: min(9.3023255814vw, 40px);
  max-width: min(82.9069767442vw, 356.5px);
}
html body main .film__txt {
  margin: 0 auto;
  margin-bottom: min(9.3023255814vw, 40px);
  max-width: min(82.9069767442vw, 356.5px);
}
html body main .film__txt:nth-of-type(2) {
  margin: 0 auto;
  padding-bottom: min(19.7674418605vw, 85px);
  max-width: min(82.9069767442vw, 356.5px);
}
html body main .film__lesson-area {
  margin: 0 auto;
  padding-bottom: min(37.2093023256vw, 160px);
  max-width: min(82.9069767442vw, 356.5px);
  text-align: right;
}
html body main .film__lesson--img {
  margin-bottom: min(9.7674418605vw, 42px);
}
html body main .film__lesson--txt {
  width: min(33.488372093vw, 144px);
}
html body main .lesson {
  position: relative;
  background-color: #fff;
  max-width: 430px;
  width: 100%;
  margin: 0 auto;
  z-index: 4;
}
html body main .new-section {
  position: relative;
  z-index: 1;
  background: url(../img/reverse_bg.png) no-repeat;
  background-size: cover;
  padding: min(25.5813953488vw, 110px) min(0vw, 0px) min(0vw, 0px) min(0vw, 0px);
  text-align: center;
  height: min(238.1395348837vw, 1024px);
  max-width: 430px;
  margin: 0 auto;
}
html body main .new-section__ttlarea {
  position: relative;
}
html body main .new-section__ttl {
  color: #fff;
  font-size: clamp(8px, 12.7906976744vw, 55px);
}
html body main .new-section__ttl--sub {
  margin-top: min(5.2325581395vw, 22.5px);
  display: block;
}
html body main .new-section__img {
  width: min(53.488372093vw, 230px);
  margin: 0 auto;
}
html body main .new-section__subttl {
  margin: min(14.6511627907vw, 63px) min(0vw, 0px) min(17.5581395349vw, 75.5px) min(0vw, 0px);
  position: relative;
  display: inline-block;
  z-index: 1;
}
html body main .new-section__subttl::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(1.3953488372vw, 6px);
  width: min(76.2790697674vw, 328px);
  background: url(../img/u-line.svg) no-repeat left bottom;
  background-size: cover;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 1s ease, opacity 0.3s ease;
  z-index: -1;
}
html body main .new-section__subttl.is-active::before {
  transform: scaleX(1);
  opacity: 1;
}
html body main .new-section__txt:nth-of-type(1) {
  margin-bottom: min(16.0465116279vw, 69px);
}
html body main .free {
  max-width: 430px;
  margin: 0 auto;
  text-align: center;
  background: url(../img/leclat_hp.png) no-repeat;
  background-size: cover;
  background-position: center;
  height: min(500.9302325581vw, 2154px);
  position: relative;
  z-index: 4;
}
html body main .free__ttlarea {
  display: flex;
  flex-direction: column;
  padding: min(25.5813953488vw, 110px) min(0vw, 0px) min(0vw, 0px) min(0vw, 0px);
}
html body main .free__contents {
  transform: min(23.2558139535vw, 100px);
  text-align: center;
  transition: transform 0.3s ease-out;
}
html body main .free__txt {
  margin-bottom: min(9.3023255814vw, 40px);
  color: #fff;
}
html body main .free__txt:last-of-type {
  margin: 0 auto;
}
html body main .free__cheak-area {
  padding: min(26.0465116279vw, 112px) min(0vw, 0px) min(19.7674418605vw, 85px) min(0vw, 0px);
  display: grid;
  grid-template-columns: 30px 30px 30px;
  justify-content: center;
  gap: min(11.6279069767vw, 50px);
}
html body main .free__item {
  writing-mode: vertical-rl;
  text-align: left;
  display: flex;
  align-items: center;
  margin: min(0vw, 0px) min(2.3255813953vw, 10px) min(0vw, 0px) min(2.3255813953vw, 10px);
}
html body main .free__item p {
  color: #fff;
  letter-spacing: min(0.6976744186vw, 3px);
}
html body main .free__item:last-child {
  margin-bottom: 0;
}
html body main .free__checkbox {
  width: min(2.6744186047vw, 11.5px);
  height: min(2.6744186047vw, 11.5px);
  border: 1px solid #fff;
  position: relative;
  background-color: transparent;
  margin-bottom: 10px;
}
html body main .free__checkmark {
  position: absolute;
  top: -95%;
  left: -6%;
  transform: translate(-50%, -50%);
  opacity: 0;
  color: #fff;
  transition: opacity 5s ease, transform 0.5s ease;
}
html body main .free__checkmark.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
html body main .free__checkmark img {
  width: min(4.7674418605vw, 20.5px);
  height: min(4.7674418605vw, 20.5px);
}
html body main .free__btm-area {
  margin-top: min(110.4651162791vw, 475px);
  right: 0;
  left: 0;
  bottom: 0;
}
html body main .free__img-area {
  text-align: left;
  width: min(87.2093023256vw, 375px);
  margin: 0 auto;
}
html body main .free__img--txt {
  margin: min(8.5348837209vw, 36.7px) min(0vw, 0px) min(13.2558139535vw, 57px) min(0vw, 0px);
  width: min(43.488372093vw, 187px);
}
html body main .free__dis {
  text-align: left;
  margin: 0 auto;
  width: min(87.2093023256vw, 375px);
}
html body main .free__dis p {
  margin-bottom: min(6.976744186vw, 30px);
}
html body main .free__dis p:last-of-type {
  padding-bottom: min(32.5581395349vw, 140px);
  margin-bottom: 0;
}
html body main .profile {
  background-color: #181818;
}
html body main .profile__ttlarea {
  position: relative;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin-top: min(34.8837209302vw, 150px);
}
html body main .profile__ttl {
  font-size: clamp(8px, 13.023255814vw, 56px);
}
html body main .profile__ttl--sub {
  margin: min(5.2325581395vw, 22.5px) min(0vw, 0px) min(9.3023255814vw, 40px) min(0vw, 0px);
  display: block;
}
html body main .profile__img {
  width: min(43.7209302326vw, 188px);
  margin: 0 auto;
}
html body main .profile__name-area {
  width: min(86.0465116279vw, 370px);
  margin: 0 auto;
  margin-bottom: min(9.3023255814vw, 40px);
}
html body main .profile__name {
  margin-bottom: min(2.7906976744vw, 12px);
  text-align: left;
}
html body main .profile__sub {
  text-align: left;
}
html body main .profile__content-layer {
  background: #fff;
  width: min(92.0930232558vw, 396px);
  margin: 0 auto;
  padding: min(5.1162790698vw, 22px) min(0vw, 0px) min(0.2325581395vw, 1px) min(0vw, 0px);
  border-radius: min(1.1627906977vw, 5px);
}
html body main .profile__item {
  width: min(81.3953488372vw, 350px);
  margin: 0 auto;
  position: relative;
  margin-bottom: 40px;
}
html body main .profile__item::before {
  content: "";
  position: absolute;
  left: 0;
  height: min(27.2093023256vw, 120px);
  background-color: #101110;
  width: min(0.4651162791vw, 2px);
}
html body main .profile__item:last-of-type {
  position: relative;
}
html body main .profile__item:last-of-type::before {
  content: "";
  position: absolute;
  left: 0;
  height: min(20vw, 86px);
  background-color: #101110;
  width: min(0.4651162791vw, 2px);
}
html body main .profile__year {
  background: #101110;
  color: #fff;
  width: min(27.2093023256vw, 117px);
  height: min(6.2790697674vw, 27px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: min(4.6511627907vw, 20px);
  letter-spacing: min(0.4651162791vw, 2px);
  font-size: clamp(8px, 3.023255814vw, 13px);
}
html body main .profile__event {
  text-align: left;
  margin-bottom: min(4.6511627907vw, 20px);
  font-size: clamp(8px, 3.023255814vw, 13px);
  letter-spacing: min(0.4651162791vw, 2px);
  padding-left: min(9.3023255814vw, 40px);
  position: relative;
  width: 100%;
}
html body main .profile__event::before {
  position: absolute;
  content: "";
  background-color: #101110;
  height: min(0.4651162791vw, 2px);
  width: min(6.976744186vw, 30px);
  top: min(1.1627906977vw, 5px);
  left: 0;
}
html body main .profile__event:last-child {
  margin-bottom: 0;
}
html body main .sns {
  position: relative;
  z-index: 5;
  background-color: #181818;
}
html body main .sns__ttlarea {
  position: relative;
  text-align: center;
  padding: min(34.8837209302vw, 150px) min(0vw, 0px) min(13.9534883721vw, 60px) min(0vw, 0px);
}
html body main .sns__ttl {
  font-size: clamp(8px, 13.9534883721vw, 60px);
  color: #fff;
}
html body main .sns__ttl--sub {
  margin: min(5.2325581395vw, 22.5px) min(0vw, 0px) min(9.3023255814vw, 40px) min(0vw, 0px);
  display: block;
}
html body main .sns__img {
  width: min(69.7674418605vw, 300px);
  margin: 0 auto;
}
html body main .sns__slider {
  padding-bottom: min(32.5581395349vw, 140px);
}/*# sourceMappingURL=style.css.map */