@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css");
@media print {
  body {
    display: none;
  }
}
html {
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  font-size: 1.6rem;
  font-family: YakuHanMP_Noto, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  overflow-x: hidden;
  line-height: 2;
  letter-spacing: 0.12em;
}

.font_notosans {
  font-family: "Noto Sans JP", sans-serif;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-5x {
  padding: 5rem;
}

.p-8x {
  padding: 8rem;
}

.fs_small {
  font-size: 0.875em;
}

.beforeafter_title {
  background-color: #95611e;
  color: #fff;
  padding: 1rem;
  font-size: clamp(1.8rem, -1.309rem + 6.55vw, 3.2rem);
}

.color-brown {
  color: #523508;
}

.head_under_color::after {
  content: "";
  display: block;
  background-color: #e3c18b;
  width: 100%;
  height: 1rem;
  margin-top: 1rem;
}

.fs_s {
  font-size: clamp(1.6rem, 1.255rem + 0.73vw, 1.8rem);
}

.fs_l {
  font-size: clamp(1.8rem, -1.309rem + 6.55vw, 3.2rem);
}

.fs_lx {
  font-size: clamp(2rem, -0.764rem + 5.82vw, 4rem);
}

.fs_lxx {
  font-size: clamp(2.2rem, -2.636rem + 10.18vw, 5rem);
}

.fs_h {
  font-size: clamp(1.8rem, -1.309rem + 6.55vw, 3.6rem);
}

.catch_shadow_w {
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.841), 0 0 20px rgba(255, 255, 255, 0.841), 0 0 20px rgba(255, 255, 255, 0.841);
}

.text_shadow_w {
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.841), 0 0 20px rgba(255, 255, 255, 0.841), 0 0 20px rgba(255, 255, 255, 0.841);
}

.header_screen {
  position: relative;
  /* min-height: 100lvh;*/
}

.header_screen:before {
  content: "";
  width: 100%;
  height: 100%;
  /*  background-color: rgba(0, 0, 0, 0.5); */
  position: absolute;
}

.h_main_img {
  max-width: 900px;
}

.prlx_bg {
  background-position: center calc(50% - 10px);
}

.main_h.hero .prlx_bg:before {
  background-image: url(./../img/common/h_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
  height: 100lvh;
  left: 0;
  /* right: 0; */
  position: fixed;
  background-position: center top;
  top: 0;
  width: 100%;
  z-index: -1;
  display: block;
}

.checkarea_sec {
  background-image: url(./../img/common/gr_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.check_box_text li {
  margin-bottom: 1rem;
}

.check_box_text li:last-child {
  margin-bottom: 0rem;
}

.pna_point_box {
  background-color: #d2d2d2;
}

.pna_head_sec {
  background-image: url(./../img/common/gold_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.pna_teacher_intro_text_box_head_text_positon {
  font-size: 80%;
}

.pna_gray_line_bg {
  background-image: url(./../img/common/pna_gray_line.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.beforeafter_sec {
  background-image: url(./../img/common/beforeafter_sec_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.pna_free_gift_sec {
  background-image: url(./../img/common/pna_free_gift_sec_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.pna_free_gift_sec_intro {
  background-image: url(./../img/common/dark_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.main_h_img_set {
  position: relative;
}

.main_h_img_set {
  min-height: 450px;
  margin-top: -5rem;
}

.beforeafter_box {
  background: #fff;
}

.balloon1-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 0em 15px;
  padding: 1rem;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  /* font-size: 16px; */
  background: #eeeeee;
  border-radius: 2%;
}

.balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -50px;
  margin-top: -15px;
  border: 20px solid transparent;
  border-right: 30px solid #eeeeee;
}

.balloon1-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 0em 0;
  padding: 1rem;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  background: #eeeeee;
  border-radius: 2%;
}

.balloon1-right:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 20px solid transparent;
  border-left: 30px solid #eeeeee;
}

.intvw_text_head {
  color: #000;
  text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0 -1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
}

/* line */
.line_btn_contents_set {
  max-width: 700px;
  margin-right: auto;
  margin-left: auto;
}

.sec_line_btn_set {
  position: relative;
  top: -6.5rem;
}

.buttons_set {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttons {
  position: relative;
}

.floating_item {
  animation: fuwafuwa 3s infinite ease-in-out 0.8s alternate;
  transition: 1.5s ease-in-out;
  margin-top: 15px;
}

@keyframes fuwafuwa {
  0%, 40%, 60%, 80% {
    transform: scale(1);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
.buttons:before, .buttons:after {
  content: "";
  position: absolute;
  --black: #ffff00;
  --ch-black: #fcfc0d;
  --eer-black: #f7f716;
  --night-rider: #f5f520;
  --white: #ffffff;
  --af-white: #f3f3f3;
  --ch-white: #e1e1e1;
  left: -1px;
  top: -1px;
  border-radius: 10px;
  background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
  background: linear-gradient(45deg, var(--ch-black), var(--eer-black), var(--night-rider), var(--ch-white), var(--night-rider), var(--eer-black), var(--ch-black), var(--ch-black));
  background-size: 400%;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  z-index: -1;
  animation: steam 20s linear infinite;
}

@keyframes steam {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.shiny-box {
  position: absolute !important;
  width: 65%;
  height: 55%;
  top: 1rem;
  right: 0;
}

.shiny-btn {
  position: relative;
  display: inline-block;
  /* width: 100%; */
  /* height: 40px; */
  /* line-height: 40px; */
  text-align: center;
  text-decoration: none;
  /* color: #fff; */
  /* background-color: #384878; */
  cursor: pointer;
  overflow: hidden;
}

@keyframes shiny {
  0% {
    left: -20%;
  }
  95% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}
.shiny-btn::after {
  content: "";
  position: absolute;
  top: -10%;
  left: -20%;
  width: 40px;
  height: 100%;
  transform: scale(2) rotate(20deg);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0) 0%);
  animation-name: shiny;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.buttons:after {
  filter: blur(50px);
}

.line_btn_contents_set_head.fixbtnon {
  bottom: 1rem;
}

.line_btn_contents_set_head {
  position: fixed;
  z-index: 100;
  bottom: -100vh;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  transition: opacity 0.5s;
}

/* ローディング画面 */
#loading {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #fcfcfc;
  z-index: 555;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 1s;
}

.loaded {
  opacity: 0;
  visibility: hidden;
}

/***************************************************
 * Generated by SVG Artista on 6/5/2024, 6:49:37 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
/***************************************************
 * Generated by SVG Artista on 6/5/2024, 7:18:47 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-1 {
  animation: animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s both;
}
@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-2 {
  animation: animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s both;
}
@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-3 {
  animation: animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.3s both;
}
@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-4 {
  animation: animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s both;
}
@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-5 {
  animation: animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s both;
}
@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-6 {
  animation: animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both;
}
@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-7 {
  animation: animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s both;
}
@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-8 {
  animation: animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}
@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-9 {
  animation: animate-svg-fill-9 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}
@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-10 {
  animation: animate-svg-fill-10 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}
@keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-11 {
  animation: animate-svg-fill-11 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}
@keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-12 {
  animation: animate-svg-fill-12 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both;
}
@keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-13 {
  animation: animate-svg-fill-13 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
}
@keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-14 {
  animation: animate-svg-fill-14 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s both;
}
@keyframes animate-svg-fill-15 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-15 {
  animation: animate-svg-fill-15 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
}
@keyframes animate-svg-fill-16 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-16 {
  animation: animate-svg-fill-16 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
}
@keyframes animate-svg-fill-17 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-17 {
  animation: animate-svg-fill-17 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7s both;
}
@keyframes animate-svg-fill-18 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-18 {
  animation: animate-svg-fill-18 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
}
@keyframes animate-svg-fill-19 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-19 {
  animation: animate-svg-fill-19 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9s both;
}
@keyframes animate-svg-fill-20 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-20 {
  animation: animate-svg-fill-20 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s both;
}
@keyframes animate-svg-fill-21 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(184, 149, 49);
  }
}
.svg-elem-21 {
  animation: animate-svg-fill-21 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s both;
}
@keyframes animate-svg-fill-22 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(77, 71, 77);
  }
}
.svg-elem-22 {
  animation: animate-svg-fill-22 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s both;
}/*# sourceMappingURL=common.css.map */