@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap");
@font-face {
  font-family: KozGoPr6N-Bold;
  src: url("../fonts/KozGoPr6N-Bold.otf");
}
@font-face {
  font-family: KozGoPr6N-Medium;
  src: url("../fonts/KozGoPr6N-Medium.otf");
}
@font-face {
  font-family: KozGoPr6N-Regular;
  src: url("../fonts/KozGoPr6N-Regular.otf");
}
@font-face {
  font-family: gothicMB101Pro-Medium;
  src: url("../fonts/A-OTF-GothicMB101Pro-Medium.otf");
}
@font-face {
  font-family: gothicMB101Pro-Regular;
  src: url("../fonts/A-OTF-GothicMB101Pro-Reg.otf");
}
@font-face {
  font-family: notoSansCJKjp-black;
  src: url("../fonts/NotoSansCJKjp-Black.otf");
}
@font-face {
  font-family: notoSansCJKjp-bold;
  src: url("../fonts/NotoSansCJKjp-Bold.otf");
}
@font-face {
  font-family: notoSansCJKjp-Regular;
  src: url("../fonts/NotoSansCJKjp-Regular.otf");
}
@font-face {
  font-family: hiraMinPro-W6;
  src: url("../fonts/HiraMinPro-W6.otf");
}
@font-face {
  font-family: noto-extra;
  src: url("../fonts/NotoSans-ExtraBold.ttf");
}
@font-face {
  font-family: acumin;
  src: url("../fonts/FontsFree-Net-aa2woff2.ttf");
}
.pc {
  display: flex !important;
}

.sp {
  display: none !important;
}

.tc {
  display: block !important;
}

.tb {
  display: none !important;
}

@media print, screen and (max-width: 641px) {
  .tc {
    display: none !important;
  }
  .tb {
    display: block !important;
  }
}
@media only screen and (max-width: 640px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: flex !important;
  }
}
@media print, screen and (min-width: 769px) {
  .pc-hide {
    display: none !important;
  }
}
@media only screen and (max-width: 640px) {
  .sp-hide {
    display: none !important;
  }
}
#wrapper {
  position: relative;
  width: 100%;
}

main {
  position: relative;
}

/* input */
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
select,
textarea {
  position: relative;
  background-color: transparent;
  border: 1px solid #E7E8E8;
  background-color: #E7E8E8;
  border-radius: 1rem;
  box-sizing: border-box;
  padding: 0.9rem 1.6rem;
  width: 100%;
  font-weight: normal;
  font-size: 1.8rem;
  line-height: 3rem;
  text-align: left;
  color: #000000;
  outline: none !important;
}
@media only screen and (max-width: 640px) {
  input[type=text],
  input[type=email],
  input[type=tel],
  input[type=number],
  input[type=password],
  select,
  textarea {
    padding: 1.2rem 1.6rem;
    font-size: 2.4rem;
    line-height: 3.2rem;
  }
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
select {
  height: 4.8rem;
}
@media only screen and (max-width: 640px) {
  input[type=text],
  input[type=email],
  input[type=tel],
  input[type=number],
  input[type=password],
  select {
    height: 5.6rem;
  }
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
select:focus,
textarea:focus {
  border-color: #E7E8E8;
}

select {
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url(../img/select-down.svg);
  background-position: calc(100% - 1.2rem) 50%;
  background-size: 1rem 0.8rem;
  background-repeat: no-repeat;
  z-index: 0;
}
@media only screen and (max-width: 640px) {
  select {
    background-position: calc(100% - 1rem) 50%;
  }
}

picture,
figure,
.image_wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

picture img,
figure img,
.image_wrap img {
  width: 100%;
}

.common-page {
  position: relative;
  padding: 8rem 0 12rem;
}
@media only screen and (max-width: 640px) {
  .common-page {
    padding: 6rem 0 18rem;
  }
}

.p-lead-section {
  position: relative;
  padding: 4.8rem 0 7rem;
}
@media only screen and (max-width: 640px) {
  .p-lead-section {
    padding: 4rem 0 6rem;
  }
}

.column-section {
  position: relative;
  padding: 6rem 0;
}
@media only screen and (max-width: 640px) {
  .column-section {
    padding: 5rem 0;
  }
}

.p-archive-section {
  position: relative;
  padding: 7rem 0;
}
@media only screen and (max-width: 640px) {
  .p-archive-section {
    padding: 6rem 0;
  }
}

.m-text {
  position: relative;
  font-family: KozGoPr6N-Regular;
  font-weight: 400;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 3.2rem;
  text-align: left;
  color: #231815;
}
@media only screen and (max-width: 640px) {
  .m-text {
    font-size: 2.1rem;
    line-height: 4rem;
  }
}

.mx-text {
  position: relative;
  font-family: KozGoPr6N-Bold;
  font-weight: bold;
  font-size: 1.8rem;
  color: #82CE98;
  line-height: 3.2rem;
  text-align: center;
}
@media only screen and (max-width: 640px) {
  .mx-text {
    font-size: 2.4rem;
    line-height: 4rem;
  }
}

.lead-title {
  position: relative;
  font-family: KozGoPr6N-Bold;
  font-weight: bold;
  color: #82CE98;
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 4rem;
}
.text-list {
  position: relative;
  list-style-type: "・";
  padding-left: 1.8rem;
}

.underline_bg {
  display: inline;
  background: linear-gradient(transparent 68%, #FBB03B 0%);
}

.section-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.section-title img {
  width: 4rem;
  margin: 0 auto 1rem auto;
}
.section-title .lead {
  position: relative;
  font-family: KozGoPr6N-Bold;
  font-weight: bold;
  font-size: 3rem;
  line-height: 1.4;
  color: #231815;
  text-align: center;
  margin-bottom: 1.2rem;
}
.section-title .sub {
  position: relative;
  font-family: notoSansCJKjp-black;
  font-size: 1.8rem;
  line-height: 1.5;
  color: #64B5E7;
  text-align: center;
  text-transform: uppercase;
}
@media only screen and (max-width: 640px) {
  .section-title .sub {
    font-size: 1.8rem;
  }
}
.section-title.c_white::before {
  background: #FFFFFF;
}
.section-title.c_white .lead {
  color: #FFFFFF;
}
.section-title.c_white .sub {
  color: #FFFFFF;
}
.section-title.c_white.c_main::before {
  background: #64B5E7;
}
.section-title.inline {
  display: block;
}
.section-title.inline .lead {
  display: inline-block;
}
.section-title.inline .sub {
  display: inline-block;
  margin: 0 0 0 3rem;
}
.section-title.clearfix .link-btn {
  float: right;
}

.breadcrumbs {
  position: relative;
  padding: 2rem 0;
  background: transparent;
  margin-top: -6rem;
  z-index: 99;
}
@media only screen and (max-width: 640px) {
  .breadcrumbs {
    display: none;
  }
}
.breadcrumbs .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.breadcrumbs ol {
  display: block;
  list-style: none;
  margin: 0;
  font-family: KozGoPr6N-Medium;
  font-weight: 500;
  font-size: 1rem;
  font-weight: normal;
  color: white;
}
@media only screen and (max-width: 640px) {
  .breadcrumbs ol {
    font-size: 1.2rem;
  }
}
.breadcrumbs ol a {
  color: white;
}
.breadcrumbs ol li {
  position: relative;
  display: inline;
}
.breadcrumbs ol li + li::before {
  content: "・";
  display: inline-block;
  font-family: KozGoPr6N-Medium;
  font-weight: 500;
  font-size: 1rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}
@media only screen and (max-width: 640px) {
  .breadcrumbs ol li + li::before {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.section-lead {
  position: relative;
}
.section-lead .title {
  position: relative;
  font-family: gothicMB101Pro-Medium;
  font-size: 1.8rem;
  line-height: 1.5;
  color: #000000;
  margin-bottom: 2.5rem;
}
@media only screen and (max-width: 640px) {
  .section-lead .title {
    font-size: 2.4rem;
  }
}
.section-lead .text {
  position: relative;
  font-family: gothicMB101Pro-Regular;
  font-size: 1.4rem;
  line-height: 2;
  color: #000000;
}
@media only screen and (max-width: 640px) {
  .section-lead .text {
    font-size: 1.8rem;
  }
}

/* btn */
.btn-wrap {
  position: relative;
}

.btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  max-width: 240px;
  width: 100%;
  height: 50px;
  background: #F2F2F2;
  border: 1px solid #858585;
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 300;
  color: #1A1A1A;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all 0.4s;
  cursor: pointer;
}
@media only screen and (max-width: 640px) {
  .btn {
    height: 45px;
    max-width: 200px;
  }
}
.btn span {
  position: relative;
  color: inherit;
  text-decoration: none;
  z-index: 3;
}
.btn:hover {
  background: #A10707;
  border-color: #A10707;
  color: #FFFFFF;
}

.viewmore_link_wrap {
  position: relative;
}
.viewmore_link_wrap .viewmore_link {
  position: relative;
  display: inline-block;
  font-family: "Ubuntu";
  font-weight: bold;
  font-style: italic;
  font-size: 16px;
  line-height: 26px;
  color: #FF7100;
  text-decoration: none;
}
.viewmore_link_wrap .viewmore_link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #FF7100;
}
.viewmore_link_wrap .viewmore_link::after {
  content: ">";
  display: inline-block;
  line-height: 1;
  margin-left: 6px;
  vertical-align: text-bottom;
}
.viewmore_link_wrap .viewmore_link:hover::before {
  width: 100%;
  animation: link-lineloop 0.6s ease-out;
  -webkit-animation: link-lineloop 0.6s ease-out;
}

.view-more {
  position: relative;
}

.link-btn {
  position: relative;
  width: 32rem;
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  outline: none;
  border-radius: 1.6rem;
  background-color: #DCB165;
  font-family: KozGoPr6N-Bold;
  font-weight: bold;
  font-size: 1.4rem;
  color: white;
  transition: all ease 0.3s;
  border: none;
}
@media only screen and (max-width: 640px) {
  .link-btn {
    width: 45rem;
    height: 8.5rem;
    font-size: 1.8rem;
  }
}
.link-btn.green {
  background-color: white;
  color: #82CE98;
}
.link-btn.green:hover {
  background-color: #82CE98;
  color: white;
  border: 1px solid #82CE98;
}
.link-btn.green:hover .arrow {
  background-color: #FFFFFF;
}
.link-btn.green:hover .arrow span {
  border-right: 1px solid #82CE98;
  border-bottom: 1px solid #82CE98;
}
.link-btn.green .arrow {
  background-color: #82CE98;
}
.link-btn.green .arrow span {
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.link-btn .arrow {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  right: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 3.6rem;
  height: 3.6rem;
  background-color: white;
  border-radius: 50%;
}
@media only screen and (max-width: 640px) {
  .link-btn .arrow {
    width: 5rem;
    height: 5rem;
  }
}
.link-btn .arrow span {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1px solid #DCB165;
  border-bottom: 1px solid #DCB165;
  transform: rotate(-45deg);
}
@media only screen and (max-width: 640px) {
  .link-btn .arrow span {
    width: 0.8rem;
    height: 0.8rem;
  }
}
.link-btn:hover {
  border: 1px solid #DCB165;
  color: #DCB165;
  background-color: transparent;
}
.link-btn:hover .arrow {
  background-color: #DCB165;
}
.link-btn:hover .arrow span {
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.form-btn {
  position: relative;
  display: inline-block;
  padding: 2rem 3rem;
  max-width: 100%;
  width: 30rem;
  background-color: #672E2B;
  border: 1px solid #672E2B;
  border-radius: 0.6rem;
  font-family: "Kozuka Gothic Pr6N", sans-serif;
  font-weight: 500;
  font-size: 2.3rem;
  line-height: 3.6rem;
  text-align: center;
  color: #FFFFFF;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all 0.6s cubic-bezier(0.8, 0, 0.2, 1);
  cursor: pointer;
  overflow: hidden;
  margin: 0 2rem;
  z-index: 0;
}
@media only screen and (max-width: 640px) {
  .form-btn {
    width: 32rem;
    font-size: 2.4rem;
    line-height: 3.6rem;
  }
  .form-btn:not(:last-child) {
    margin-bottom: 3rem;
  }
}
.form-btn span {
  position: relative;
  color: inherit;
  text-decoration: none;
  z-index: 3;
}
.form-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background: #FFFFFF;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1);
  transform-origin: right top;
  transform: scale(0, 1);
  z-index: 1;
}
.form-btn:hover {
  color: #672E2B;
}
.form-btn:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  outline: 0;
  opacity: 0;
  transition: opacity 0.1s linear;
  padding: 1.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.5);
}
.modal .modal-dialog {
  position: relative;
  max-width: 70rem;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  transform: translate(0, -15%);
  margin: auto;
}
.modal .modal-content {
  position: relative;
  display: block;
  width: 100%;
  background: #FFFFFF;
  border-radius: 0.6rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  pointer-events: auto;
}
.modal .close {
  position: absolute;
  top: -1rem;
  right: -1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.6rem;
  width: 3rem;
  height: 3rem;
  background-color: #FCEE21;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  z-index: 3;
}
.modal .modal-body {
  position: relative;
  padding: 2rem;
}
.modal.show {
  opacity: 1;
}
.modal.show .modal-dialog {
  transform: translate(0, 0);
}

.modal-open {
  overflow: hidden;
}

.wp-pagination {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wp-pagination .wp-pagenavi {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wp-pagination .wp-pagenavi span,
.wp-pagination .wp-pagenavi a {
  position: relative;
  display: inline-block;
  font-family: "Noto Sans CJK JP", sans-serif;
  font-size: 1.8rem;
  line-height: 1;
  text-align: center;
  color: #64B5E7;
  text-decoration: none;
}
@media only screen and (max-width: 640px) {
  .wp-pagination .wp-pagenavi span,
  .wp-pagination .wp-pagenavi a {
    font-size: 2rem;
  }
}
.wp-pagination .wp-pagenavi a:hover {
  text-decoration: underline;
}
.wp-pagination .wp-pagenavi .smaller {
  border-color: #E6BB65;
  width: 6rem;
  height: 6rem;
  border-radius: 1rem;
  color: #E6BB65;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wp-pagination .wp-pagenavi .smaller:hover {
  position: relative;
  display: inline-block;
  width: 6rem;
  height: 6rem;
  border-radius: 1rem;
  padding: 0;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #E6BB65;
  border-color: #E6BB65;
  color: #FFFFFF;
}
.wp-pagination .wp-pagenavi .larger {
  border-color: #E6BB65;
  width: 6rem;
  height: 6rem;
  border-radius: 1rem;
  color: #E6BB65;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wp-pagination .wp-pagenavi .larger:hover {
  position: relative;
  display: inline-block;
  width: 6rem;
  height: 6rem;
  border-radius: 1rem;
  padding: 0;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #E6BB65;
  border-color: #E6BB65;
  color: #FFFFFF;
}
.wp-pagination .wp-pagenavi .current {
  position: relative;
  display: inline-block;
  width: 6rem;
  height: 6rem;
  border-radius: 1rem;
  padding: 0;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #E6BB65;
  border-color: #E6BB65;
  color: #FFFFFF;
}
.wp-pagination .wp-pagenavi .smaller + .current {
  margin-left: 3rem;
}
.wp-pagination .wp-pagenavi .current + .larger {
  margin-left: 2.5rem;
}
.wp-pagination .wp-pagenavi .first,
.wp-pagination .wp-pagenavi .last {
  display: none;
}
.wp-pagination .wp-pagenavi .previouspostslink,
.wp-pagination .wp-pagenavi .nextpostslink {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: #82CE98;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.wp-pagination .wp-pagenavi .previouspostslink {
  margin-right: 2rem;
}
.wp-pagination .wp-pagenavi .nextpostslink {
  margin-left: 2rem;
}
.wp-pagination .wp-pagenavi .pages {
  width: 15rem;
  height: 3.5rem;
  border-radius: 1.75rem;
  border: 1px solid #8B8C8C;
  display: none;
  justify-content: center;
  align-items: center;
  color: #8B8C8C;
  order: 1;
  margin-left: 1.5rem;
}
.wp-pagination .link-btn {
  margin-left: 3.6rem;
}

#toc_container {
  position: relative;
  display: block;
  max-width: 100%;
  width: 100%;
  border: 1px solid #D9D9D9;
  border-radius: 1.5rem;
  font-size: 100%;
  line-height: 1.8;
  letter-spacing: 0.05em;
  padding: 2.4rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 640px) {
  #toc_container {
    letter-spacing: 0;
    padding: 1.8rem;
    margin-top: 2.4rem;
    margin-bottom: 2.5rem;
    border-radius: 1.2rem;
  }
}
#toc_container .toc_title {
  position: relative;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #000000;
  text-align: center;
  margin: 0;
  padding: 0;
}
@media only screen and (max-width: 640px) {
  #toc_container .toc_title {
    font-size: 1.6rem;
  }
}
#toc_container .toc_list {
  margin-top: 1rem !important;
}
#toc_container .toc_list .toc_number {
  margin-right: 0.4rem;
}

.accordion-item-list {
  position: relative;
}
.accordion-item-list .accordion-item {
  position: relative;
}
.accordion-item-list .accordion-item:not(:last-child) {
  margin-bottom: 1.6rem;
}
.accordion-item-list .accordion-item .accordion-question {
  position: relative;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 1px solid #727171;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.accordion-item-list .accordion-item .accordion-question::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.2rem);
  right: 2.4rem;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border-left: 1px solid #727171;
  border-bottom: 1px solid #727171;
  transition: transform ease-in-out 0.4s;
  transform: translateY(-50%) rotate(-45deg);
  z-index: 2;
}
@media only screen and (max-width: 640px) {
  .accordion-item-list .accordion-item .accordion-question::after {
    width: 1.4rem;
    height: 1.4rem;
  }
}
.accordion-item-list .accordion-item .accordion-question h3 {
  position: relative;
  display: block;
  width: 100%;
  font-family: gothicMB101Pro-Medium;
  font-size: 1.4rem;
  line-height: 1.3;
  text-align: left;
  color: #727171;
  padding: 2.4rem 6rem 2.4rem 10rem;
  z-index: 0;
}
@media only screen and (max-width: 640px) {
  .accordion-item-list .accordion-item .accordion-question h3 {
    padding: 2.4rem 6rem 2.4rem 6rem;
  }
}
.accordion-item-list .accordion-item .accordion-question h3::before {
  content: "Q.";
  position: absolute;
  display: inline-block;
  top: 50%;
  transform: translateY(-50%);
  left: 3rem;
  font-family: gothicMB101Pro-Medium;
  font-size: 3.6rem;
  line-height: 1.3;
  text-align: left;
  color: #727171;
}
@media only screen and (max-width: 640px) {
  .accordion-item-list .accordion-item .accordion-question h3::before {
    left: 2rem;
  }
}
.accordion-item-list .accordion-item .accordion-question.expanded::after {
  border-left: none;
  border-bottom: none;
  border-right: 1px solid #727171;
  border-top: 1px solid #727171;
  top: calc(50% + 0.6rem);
}
.accordion-item-list .accordion-item .accordion-answer {
  position: relative;
  display: none;
  padding: 3.6rem 2.4rem 3.6rem 0;
  background: transparent;
  border: 1px solid #D1BA8E;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
}
@media only screen and (max-width: 640px) {
  .accordion-item-list .accordion-item .accordion-answer {
    padding: 2.4rem 2rem 2.4rem 0;
  }
}
.accordion-item-list .accordion-item .accordion-answer .content {
  position: relative;
  padding: 0 0 0 10rem;
  margin: 0;
}
@media only screen and (max-width: 640px) {
  .accordion-item-list .accordion-item .accordion-answer .content {
    padding-left: 6rem;
  }
}
.accordion-item-list .accordion-item .accordion-answer .content::before {
  content: "A";
  position: absolute;
  top: -1rem;
  left: 3rem;
  font-size: 3.6rem;
  line-height: 1.3;
  color: #64B5E7;
}
@media only screen and (max-width: 640px) {
  .accordion-item-list .accordion-item .accordion-answer .content::before {
    left: 2rem;
  }
}
.accordion-item-list .accordion-item .accordion-answer .content .m-text {
  position: relative;
  color: #64B5E7;
  font-family: gothicMB101Pro-Regular;
  font-size: 1.4rem;
  color: #3E3A39;
}

/* デバイス毎の改行操作 */
@media screen and (min-width: 1024px) {
  [data-tb],
  [data-sp] {
    display: none !important;
  }
  [data-pc] {
    display: inline-block !important;
  }
}
@media screen and (min-width: 750px) and (max-width: 1024px) {
  [data-pc],
  [data-sp] {
    display: none !important;
  }
  [data-tb] {
    display: inline-block !important;
  }
}
@media screen and (max-width: 750px) {
  [data-tb],
  [data-pc] {
    display: none !important;
  }
  [data-sp] {
    display: inline-block !important;
  }
}
/* ========================================
   Variables
   ======================================== */
/* ========================================
   Mixins
   ======================================== */
/* ========================================
   Reset and Base Styles
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  overflow-x: hidden;
  background-color: #f5f5f5;
}

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

button {
  font-family: inherit;
}

.section-contents-wrap {
  background-image: url(../img/common/main_background.jpg);
}
@media only screen and (max-width: 490px) {
  .section-contents-wrap {
    background-image: unset;
    background-color: #FFFBED;
  }
}

.section-contents {
  /* 3. 画像を繰り返さない */
  position: relative;
}
@media only screen and (max-width: 490px) {
  .section-contents {
    background-image: unset;
    background-color: #FFFBED;
  }
}

body {
  clip-path: inset(0 0 0 0);
}

/* ========================================
   Content Scaler - Responsive Sizing
   ======================================== */
.content-scaler {
  width: 400px;
  min-height: 556px;
  transform-origin: top center;
  margin: 0 auto;
  transform: scale(min(100vw / 400px, 1));
}
@media (min-width: 1024px) {
  .content-scaler {
    width: 1920px;
    height: 959px;
    min-height: auto;
    transform: scale(min(100vw / 1920px, 100vh / 959px));
  }
}

/* ========================================
   Main Section
   ======================================== */
.main-section {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ========================================
   Header - Responsive Design
   ======================================== */
.site-header {
  position: absolute;
  top: 0;
  z-index: 100;
  left: 0px;
  width: 100%;
  height: 114px;
}
@media (min-width: 1024px) {
  .site-header {
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
  }
}

/* ========================================
   Main Visual Area
   ======================================== */
.main-visual {
  position: relative;
  width: 100%;
  min-height: 556px;
  height: 100vw;
  max-height: 500px;
  z-index: 4;
}
@media (min-width: 1024px) {
  .main-visual {
    height: 100vh;
    max-height: calc(100vh - 100px);
  }
}

/* ========================================
   Background Image
   ======================================== */
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vw;
  max-height: 500px;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .background-image {
    width: 1920px;
    border-radius: 0;
    height: 100vh;
    max-height: calc(100vh - 100px);
  }
}
@media only screen and (max-width: 640px) {
  .background-image {
    height: 115vw;
  }
}

.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  -webkit-animation: imageSlideshow 15s infinite;
  animation: imageSlideshow 15s infinite;
}
@media (min-width: 1024px) {
  .bg-img {
    position: absolute;
    left: 0;
    top: -17.51%;
    width: 100%;
    height: 128.04%;
  }
}

.bg-img-1 {
  animation-delay: 0s;
}

.bg-img-2 {
  animation-delay: 5s;
}

.bg-img-3 {
  animation-delay: 10s;
}

/* ========================================
   Decorative Lines
   ======================================== */
.decorative-lines {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  height: 188px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transform: translateY(-50%);
}
@media (min-width: 1024px) {
  .decorative-lines {
    display: none;
  }
}

.line {
  width: 100%;
  height: 2px;
  background-color: #fff;
}

/* ========================================
   Title Image
   ======================================== */
.mv-content-wrapper {
  max-width: 400px;
  width: 90%;
  height: 80vh;
  margin: auto;
  padding-top: 15vh;
}
@media (min-width: 1024px) {
  .mv-content-wrapper {
    max-width: 1000px;
  }
}

.title-image {
  display: block;
  position: absolute;
  margin-left: 10px;
  width: 100%;
  max-width: 350px;
}
@media (min-width: 1024px) {
  .title-image {
    display: block;
    position: absolute;
    margin-left: 300px;
    width: 50vw;
    max-width: 666.043px;
    max-width: 600px;
  }
  .title-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ========================================
   Hero Text Content
   ======================================== */
/* ========================================
   Speech Bubble
   ======================================== */
.speech-bubble {
  position: absolute;
  width: 85px;
  height: 80px;
  margin-top: 120px;
}
@media (min-width: 1024px) {
  .speech-bubble {
    margin-left: 100px;
    width: 212px;
    height: 170px;
    margin-top: 220px;
  }
}
.speech-bubble svg {
  width: 100%;
}

/* ========================================
   Car Image
   ======================================== */
.car-image {
  position: absolute;
  margin-left: 150px;
  width: 205px;
  margin-top: 250px;
}
@media (min-width: 1024px) {
  .car-image {
    bottom: auto;
    right: auto;
    margin-left: 500px;
    margin-top: 450px;
    max-width: 486.597px;
    width: 25vw;
  }
}
.car-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   Person Image
   ======================================== */
.person-image {
  position: absolute;
  width: 160px;
  margin-top: 200px;
}
@media (min-width: 1024px) {
  .person-image {
    bottom: auto;
    margin-left: 200px;
    margin-top: 370px;
    max-width: 340.728px;
    width: 20vw;
  }
}
.person-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   Page Number
   ======================================== */
.page-number {
  display: none;
}
@media (min-width: 1024px) {
  .page-number {
    display: flex;
    align-items: center;
    gap: 16px;
    position: absolute;
    right: 32.16px;
    bottom: 98.77px;
    background-color: #fffbed;
    border: 2px solid #2234da;
    border-radius: 13.148px;
    padding: 12.806px 25.613px;
  }
}

@media (min-width: 1024px) {
  .page-num {
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: #2234da;
    line-height: 1;
  }
}

@media (min-width: 1024px) {
  .page-dots {
    display: flex;
    gap: 11.5px;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .dot {
    width: 6.574px;
    height: 6.574px;
    border-radius: 50%;
    background-color: #2234da;
  }
}

/* カクカク回転 */
@-webkit-keyframes kakukaku_20ure520c {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
}
@keyframes kakukaku_20ure520c {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(20deg);
  }
}
/* スライドショー（不透明度のみなので基本はそのままでもOKですが念のため） */
@keyframes imageSlideshow {
  0% {
    opacity: 0;
  }
  6.66% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* ポンっと出る（バウンス） */
@-webkit-keyframes popUpBounce {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes popUpBounce {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* 上下バウンド */
@-webkit-keyframes popUpBound {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }
  70% {
    opacity: 1;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes popUpBound {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  50% {
    opacity: 1;
    transform: translateY(5px);
  }
  70% {
    opacity: 1;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
/* シンプルなフェードイン */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* 跳ねる動き */
@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
/* 車の揺れ（移動＋回転） */
@-webkit-keyframes carShake {
  0%, 100% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
  }
  25% {
    -webkit-transform: translateY(-2px) rotate(1deg);
    transform: translateY(-2px) rotate(1deg);
  }
  75% {
    -webkit-transform: translateY(-1px) rotate(-1deg);
    transform: translateY(-1px) rotate(-1deg);
  }
}
@keyframes carShake {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-2px) rotate(1deg);
  }
  75% {
    transform: translateY(-1px) rotate(-1deg);
  }
}
/* 影のパルス */
@-webkit-keyframes shadowPulse {
  0%, 100% {
    opacity: 0.1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    opacity: 0.15;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes shadowPulse {
  0%, 100% {
    opacity: 0.1;
    transform: scale(1);
  }
  50% {
    opacity: 0.15;
    transform: scale(1.1);
  }
}
/* マーキー（無限ループ） */
@-webkit-keyframes marquee-loop {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
@keyframes marquee-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* 下からフェードイン */
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* アニメーションを適用したい要素の初期状態 */
.js-pop-in {
  opacity: 0; /* 最初は隠しておく */
  /* ちらつき防止のおまじない */
  will-change: transform, opacity;
}

/* 画面内に入った時にJSで付与されるクラス */
.js-pop-in.is-active {
  /* 定義したアニメーションを0.6秒かけて実行 */
  /* forwards は、アニメーション終了時の状態（opacity:1, scale:1）を維持する設定 */
  -webkit-animation: popUpBounce 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation: popUpBounce 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.js-pop-down-in {
  opacity: 0; /* 最初は隠しておく */
  /* ちらつき防止のおまじない */
  will-change: transform, opacity;
}

/* 画面内に入った時にJSで付与されるクラス */
.js-pop-down-in.is-active {
  /* 定義したアニメーションを0.6秒かけて実行 */
  /* forwards は、アニメーション終了時の状態（opacity:1, scale:1）を維持する設定 */
  -webkit-animation: popUpBound 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation: popUpBound 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.js-pop-down-in {
  opacity: 0;
  will-change: transform, opacity;
}

/* 画面内に入った時にJSで付与されるクラス */
.js-fade-in.is-active {
  /* 定義したアニメーションを0.6秒かけて実行 */
  /* forwards は、アニメーション終了時の状態（opacity:1, scale:1）を維持する設定 */
  -webkit-animation: fadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation: fadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.ani-kirakira {
  -webkit-animation: kakukaku_20ure520c 1s steps(2) infinite;
  animation: kakukaku_20ure520c 1s steps(2) infinite;
}

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 400px) {
  .content-scaler {
    transform: scale(calc(100vw / 400px));
  }
}
.section-center {
  position: relative;
  z-index: 1;
}

.section-center .inner {
  width: 100%;
  border-radius: 20px;
  border: 3px solid #2234da;
  background-color: #FFFBED;
  overflow: hidden;
}
@media only screen and (max-width: 490px) {
  .section-center .inner {
    border: unset;
  }
}

.top.section-contents {
  /* ========================================
    News Section
    ======================================== */
  /* ========================================
    Main Visual Section
    ======================================== */
  /* Decoration Elements */
  /* Characters */
  /* Visual Swiper */
  /* Visual Pagination */
  /* ========================================
    Point Section
    ======================================== */
  /* ========================================
    Print Styles
    ======================================== */
  /* ========================================
    Car Animation Section
    ======================================== */
  /* ========================================
    Main Photo Section
    ======================================== */
  /* ========================================
    TOKAI Logo
    ======================================== */
  /* ========================================
    Menu Grid Section
    ======================================== */
  /* ========================================
    Menu Card
    ======================================== */
  /* ========================================
    Special Card Styles
    ======================================== */
  /* ========================================
    Responsive Adjustments
    ======================================== */
  /* ========================================
    Print Styles
    ======================================== */
}
.top.section-contents .important-notice-section {
  padding: 24px 16px;
}
.top.section-contents .important-notice-container {
  background-color: #fff0f3;
  border: 1px solid #d73852;
  border-radius: 24px;
  background-color: #fff;
  overflow: hidden;
}
@media only screen and (max-width: 640px) {
  .top.section-contents .important-notice-container {
    padding: 16px;
  }
}
.top.section-contents .important-notice-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 16px;
}
@media only screen and (max-width: 490px) {
  .top.section-contents .important-notice-header {
    padding: 10px 0;
  }
}
.top.section-contents .important-notice-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 28px;
  color: #d73852;
  text-align: center;
}
@media only screen and (max-width: 490px) {
  .top.section-contents .important-notice-title {
    font-size: 7vw;
  }
}
.top.section-contents .header-decoration {
  flex-shrink: 0;
}
.top.section-contents .important-notice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 24px 16px;
}
@media only screen and (max-width: 490px) {
  .top.section-contents .important-notice-list {
    padding: 0 8px;
  }
}
.top.section-contents .important-notice-item {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid #d73852;
  border-radius: 4px;
}
.top.section-contents .important-notice-item a {
  display: flex;
  gap: min(2vw, 24px);
}
.top.section-contents .important-notice-item a:hover {
  opacity: 0.62;
  transition: 0.5s;
}
.top.section-contents .notice-date {
  font-size: 12px;
  color: #d73852;
  font-weight: bold;
  font-family: "Noto Sans", sans-serif;
  width: fit-content;
}
.top.section-contents .notice-text {
  font-size: 13px;
  color: #071a33;
  line-height: 1.6;
  transition: color 0.2s;
  flex: 1;
  display: block;
}
.top.section-contents .news-section {
  padding: 24px 16px;
}
.top.section-contents .news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
@media only screen and (max-width: 640px) {
  .top.section-contents .news-title {
    font-size: 24px;
  }
}
@media only screen and (max-width: 490px) {
  .top.section-contents .news-title svg {
    height: 10vw;
  }
}
.top.section-contents .news-view-all-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border: 2px solid #2234da;
  border-radius: 9999px;
  background-color: #fff;
  transition: all 0.2s;
  z-index: 3;
  margin-top: 60px;
  box-shadow: 0px 2px 0px #2234da;
}
@media only screen and (max-width: 490px) {
  .top.section-contents .news-view-all-btn {
    padding: 5px 16px;
  }
}
.top.section-contents .news-view-all-btn:hover {
  background-color: #2234da;
}
.top.section-contents .news-view-all-btn:hover .btn-text {
  color: #fff;
}
.top.section-contents .news-view-all-btn:hover .btn-icon circle,
.top.section-contents .news-view-all-btn:hover .btn-icon path {
  stroke: #fff;
}
.top.section-contents .btn-text {
  font-size: 13px;
  font-weight: bold;
  color: #2234da;
  transition: color 0.2s;
}
.top.section-contents .btn-icon {
  flex-shrink: 0;
}
.top.section-contents .news-item {
  border-bottom: 1px solid #ddd;
  border-radius: 4px;
  padding: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.top.section-contents .news-item:hover {
  opacity: 0.62;
  transition: 0.5s;
}
.top.section-contents .news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.top.section-contents .news-date {
  font-size: 12px;
  font-weight: bold;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}
.top.section-contents .news-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: bold;
  color: #2234da;
  border: 1px solid #2234da;
  background-color: #fff;
}
.top.section-contents .news-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: opacity 0.2s;
}
.top.section-contents .news-link:hover {
  opacity: 0.8;
}
.top.section-contents .news-link:hover .news-arrow {
  transform: translateX(4px);
}
.top.section-contents .news-content {
  flex: 1;
  font-size: 13px;
  color: #071a33;
  line-height: 1.6;
}
.top.section-contents .news-arrow {
  flex-shrink: 0;
  transition: transform 0.2s;
}
.top.section-contents .main-visual-section {
  padding: 48px 16px;
  margin-bottom: 24px;
  margin-top: 50px;
}
.top.section-contents .main-visual-section .illu01 {
  position: absolute;
  margin-left: min(60%, 370px);
  margin-top: -50px;
}
.top.section-contents .main-visual-section .illu02 {
  position: absolute;
  margin-top: -30px;
}
.top.section-contents .main-visual-section .illu03 {
  position: absolute;
  margin-left: min(60%, 370px);
  margin-top: -30px;
}
.top.section-contents .decoration-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.top.section-contents .character {
  position: absolute;
  z-index: 10;
  width: 300px;
  -webkit-animation: bounce 2s ease-in-out infinite;
  animation: bounce 2s ease-in-out infinite;
}
.top.section-contents .character img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media only screen and (max-width: 640px) {
  .top.section-contents .character {
    width: 90%;
  }
}
.top.section-contents .character-left {
  margin-left: 20px;
  margin-top: -270px;
}
.top.section-contents .visual-swiper {
  width: 100%;
  padding-bottom: 48px;
  overflow: visible;
}
.top.section-contents .slider-stop-btn {
  width: 50px;
  height: 50px;
  position: absolute;
  margin-top: -250px;
  margin-left: 26%;
  z-index: 13;
}
@media only screen and (max-width: 640px) {
  .top.section-contents .slider-stop-btn {
    margin-left: 45%;
  }
}
.top.section-contents .visual-swiper .swiper-wrapper {
  align-items: center;
}
.top.section-contents .visual-swiper .swiper-slide {
  width: 70%;
}
.top.section-contents .visual-swiper .swiper-slide-active {
  opacity: 1;
  transform: scale(1.1);
  z-index: 2;
}
@media only screen and (max-width: 640px) {
  .top.section-contents .visual-swiper .swiper-slide-active {
    transform: scale(1.1);
  }
}
.top.section-contents .visual-image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  transition: box-shadow 0.4s ease;
}
.top.section-contents .visual-image-wrapper img {
  min-height: unset;
  height: auto;
}
.top.section-contents .visual-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
@media print, screen and (min-width: 769px) {
  .top.section-contents .visual-image {
    min-height: 250px;
  }
}
.top.section-contents .visual-pagination {
  bottom: 0 !important;
  text-align: center;
}
.top.section-contents .visual-pagination.swiper-pagination-bullets {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.top.section-contents .visual-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: #ddd;
  opacity: 1;
  transition: all 0.3s ease;
}
.top.section-contents .visual-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 24px;
  background-color: #2234da;
  border-radius: 5px;
}
@media print {
  .top.section-contents .slider-button,
  .top.section-contents .news-view-all-btn,
  .top.section-contents .star,
  .top.section-contents .circle,
  .top.section-contents .character {
    display: none;
  }
  .top.section-contents .news-item,
  .top.section-contents .slide-content {
    page-break-inside: avoid;
  }
}
.top.section-contents .car-animation-section {
  margin-bottom: var(--spacing-md);
  width: 450px;
  margin-left: 20px;
}
.top.section-contents .animation-wrapper {
  position: relative;
  width: 100%;
  height: 120px;
}
.top.section-contents .path-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.top.section-contents .car-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transform-origin: center center;
  will-change: transform;
  -webkit-animation: carShake 0.3s ease-in-out infinite;
  animation: carShake 0.3s ease-in-out infinite;
  width: 100px;
}
.top.section-contents .car-icon_01 {
  margin-top: 300px;
  margin-left: min(80%, 350px);
}
@media only screen and (max-width: 490px) {
  .top.section-contents .car-icon_01 {
    margin-left: 70vw;
    margin-top: 70vw;
  }
}
.top.section-contents .car-icon_02 {
  margin-top: 180px;
  margin-left: min(40%, 150px);
}
@media only screen and (max-width: 490px) {
  .top.section-contents .car-icon_02 {
    margin-left: 30vw;
    margin-top: 35vw;
  }
}
.top.section-contents .car-shadow {
  -webkit-animation: shadowPulse 0.3s ease-in-out infinite;
  animation: shadowPulse 0.3s ease-in-out infinite;
}
.top.section-contents .car-animation-section {
  position: absolute;
  margin-top: -140px;
  z-index: 0;
}
.top.section-contents .load-wrapper {
  position: relative;
  width: 100%;
}
@media only screen and (max-width: 490px) {
  .top.section-contents .load-wrapper {
    width: 90vw;
    margin-left: 0;
  }
}
.top.section-contents .main-photo-section {
  margin-bottom: var(--spacing-lg);
}
.top.section-contents .photo-wrapper {
  width: 80%;
  overflow: hidden;
  margin-top: 120px;
}
@media only screen and (max-width: 490px) {
  .top.section-contents .photo-wrapper {
    margin-top: 18vw;
  }
}
.top.section-contents .main-photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 280px;
}
@media screen and (max-width: 767px) {
  .top.section-contents .main-photo {
    max-height: 220px;
  }
}
.top.section-contents .tokai-logo {
  margin-bottom: var(--spacing-lg);
  text-align: center;
  position: relative;
}
.top.section-contents .tokai-logo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 80px;
  background: linear-gradient(to right, rgba(255, 224, 130, 0.3) 0%, rgba(255, 224, 130, 0.1) 50%, rgba(255, 224, 130, 0.3) 100%);
  border-radius: 50%;
  z-index: 0;
  filter: blur(20px);
}
.top.section-contents .logo-text {
  width: 80%;
  margin: 0 auto -30px;
}
.top.section-contents .logo-text svg {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .top.section-contents .logo-text {
    font-size: 52px;
  }
}
.top.section-contents .menu-grid-section {
  width: 90%;
  margin: auto;
  margin-bottom: var(--spacing-md);
}
.top.section-contents .menu-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2%;
}
.top.section-contents .menu-grid .menu-card {
  width: 48.5%;
  border: 2px solid #2234da;
  box-shadow: 3px 4px 0px #2234da;
  padding: 16px;
  background-color: #FFFBED;
  margin-bottom: 16px;
}
@media only screen and (max-width: 490px) {
  .top.section-contents .menu-grid .menu-card {
    padding: 16px 8px;
  }
}
.top.section-contents .menu-grid .menu-card .card-icon {
  margin-bottom: 20px;
  width: 45px;
}
.top.section-contents .menu-grid .menu-card:nth-child(1) .card-illust {
  position: absolute;
  width: 45px;
  margin-left: 120px;
  margin-top: -10px;
}
.top.section-contents .menu-grid .menu-card:nth-child(2) .flow-car-icon {
  position: absolute;
  width: 60px;
  margin-left: 110px;
  margin-top: 10px;
}
.top.section-contents .menu-grid .menu-card:nth-child(3) .flow-start-icon {
  position: absolute;
  width: 35px;
  margin-left: -165px;
  margin-top: -170px;
}
@media only screen and (max-width: 490px) {
  .top.section-contents .menu-grid .menu-card:nth-child(3) .flow-start-icon {
    width: 30px;
    margin-top: -180px;
    margin-left: -100px;
  }
}
.top.section-contents .menu-grid .menu-card:nth-child(4) .flow-woman2-icon {
  position: absolute;
  width: 47px;
  margin-left: -140px;
  margin-top: -50px;
}
@media only screen and (max-width: 490px) {
  .top.section-contents .menu-grid .menu-card:nth-child(4) .flow-woman2-icon {
    width: 35px;
    margin-top: 0px;
    margin-left: -100px;
  }
}
.top.section-contents .menu-grid .menu-card:nth-child(5) .flow-start-icon {
  position: absolute;
  width: 47px;
  margin-left: 100px;
  margin-top: 30px;
}
.top.section-contents .menu-grid .menu-card:nth-child(6) .flow-start-icon {
  position: absolute;
  width: 65px;
  margin-left: 120px;
  margin-top: -230px;
}
@media only screen and (max-width: 490px) {
  .top.section-contents .menu-grid .menu-card:nth-child(6) .flow-start-icon {
    width: 55px;
    margin-top: -180px;
    margin-left: 80px;
  }
}
.top.section-contents .menu-card {
  background-color: var(--color-grid-bg);
  background-image: linear-gradient(rgba(34, 52, 218, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 52, 218, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 3px solid var(--color-primary);
  border-radius: 20px;
  padding: var(--spacing-md) var(--spacing-sm);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}
.top.section-contents .menu-card:hover {
  background-color: #2234da;
}
.top.section-contents .menu-card:hover .card-title, .top.section-contents .menu-card:hover .card-description {
  color: #fff;
}
.top.section-contents .menu-card:active {
  transform: translateY(-2px);
}
.top.section-contents .menu-card:focus {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}
@media screen and (max-width: 767px) {
  .top.section-contents .menu-card {
    padding: var(--spacing-sm) var(--spacing-xs);
    min-height: 180px;
    border-radius: 16px;
  }
}
.top.section-contents .card-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}
.top.section-contents .card-icon {
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}
.top.section-contents .card-icon svg {
  flex-shrink: 0;
}
.top.section-contents .card-title {
  font-size: 24px;
  font-weight: bold;
  color: #2234da;
  margin-bottom: var(--spacing-xs);
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .top.section-contents .card-title {
    font-size: 18px;
  }
}
.top.section-contents .card-description {
  font-size: 16px;
  color: var(--color-text-dark);
  line-height: 1.6;
  margin-bottom: var(--spacing-sm);
}
@media screen and (max-width: 767px) {
  .top.section-contents .card-description {
    font-size: 11px;
  }
}
.top.section-contents .card-illust {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top.section-contents .card-illust svg {
  max-width: 60px;
  height: auto;
}
@media screen and (max-width: 767px) {
  .top.section-contents .card-illust svg {
    max-width: 50px;
  }
}
.top.section-contents .menu-card:nth-child(2) .card-icon {
  flex-direction: row;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .top.section-contents .car-animation-section {
    padding: var(--spacing-sm) var(--spacing-xs);
  }
  .top.section-contents .animation-wrapper {
    height: 100px;
  }
  .top.section-contents .car-icon svg {
    width: 60px;
    height: 45px;
  }
}
.top.section-contents .banner-section {
  width: 90%;
  position: relative;
  z-index: 2;
  margin: 40px auto;
}
.top.section-contents .banner-section .banner-item {
  margin-bottom: 20px;
}
.top.section-contents .banner-section .banner-item a:hover {
  opacity: 0.62;
  transition: 0.5s;
}
@media print {
  .top.section-contents .car-animation-section {
    display: none;
  }
}

.point-section {
  margin-top: 100px;
  background-image: url(../img/top/top-vmsec-bg.png);
  background-size: 100% 100%;
  background-position: center;
  padding: 0 16px 32px;
}
@media only screen and (max-width: 640px) {
  .point-section {
    padding: 32px 16px;
  }
}
@media only screen and (max-width: 490px) {
  .point-section {
    padding: 0 16px 32px;
  }
}
.point-section .people-img {
  position: absolute;
  width: min(30vw, 200px);
  margin-left: max(-10vw, -50px);
  margin-top: -130px;
}
@media only screen and (max-width: 640px) {
  .point-section .people-img {
    width: 35vw;
    margin-left: -10vw;
    margin-top: -100px;
  }
}
.point-section .deco01 {
  position: absolute;
  width: min(10vw, 50px);
  margin-left: min(82vw, 310px);
  margin-top: -100px;
  -webkit-animation: kakukaku_20ure520c 1s steps(2) infinite;
  animation: kakukaku_20ure520c 1s steps(2) infinite;
}
@media only screen and (max-width: 640px) {
  .point-section .deco01 {
    margin-left: 70vw;
    margin-top: -80px;
  }
}

.point-header {
  text-align: center;
  margin-bottom: 48px;
}

.point-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.point-title-en {
  position: absolute;
  margin-top: -80px;
  font-family: "RocknRoll One", sans-serif;
  font-size: 56px;
  font-weight: normal;
  color: transparent;
  -webkit-text-stroke: 2px #2234da;
  letter-spacing: 4px;
}
.point-title-en img {
  max-width: min(80%, 350px);
  margin: auto;
}
@media only screen and (max-width: 640px) {
  .point-title-en {
    font-size: 48px;
  }
}
@media only screen and (max-width: 490px) {
  .point-title-en {
    margin-top: -60px;
  }
}

.point-title-ja {
  padding: 20px;
  background-color: #FFECEF;
  border: 10px solid #fff;
  border-radius: 30px;
  max-width: 80%;
}
@media only screen and (max-width: 640px) {
  .point-title-ja {
    font-size: 16px;
    max-width: 90%;
  }
}

.point-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 60px;
  background-color: #2234da;
  color: #fff;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}
@media only screen and (max-width: 640px) {
  .point-number {
    min-width: 50px;
    height: 50px;
    font-size: 20px;
  }
}

.point-main {
  text-align: center;
  line-height: 1.5;
}

.school-name {
  color: #2234da;
  position: relative;
  display: inline-block;
}
.school-name::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: rgba(34, 52, 218, 0.2);
  z-index: -1;
}

.feature-text {
  font-size: 28px;
  color: #d73852;
  font-weight: bold;
}
@media only screen and (max-width: 640px) {
  .feature-text {
    font-size: 24px;
  }
}

/* Point Slider */
.point-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 100%;
}
@media only screen and (max-width: 640px) {
  .point-slider-wrapper {
    gap: 8px;
  }
}

.slider-button {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
  position: absolute;
  z-index: 5;
}
.slider-button svg {
  width: 100%;
  height: 100%;
}
.slider-button.slider-button-next {
  margin-left: 410px;
}
@media print, screen and (max-width: 1600px) {
  .slider-button.slider-button-next {
    margin-left: 82%;
  }
}
@media only screen and (max-width: 640px) {
  .slider-button.slider-button-next {
    margin-left: 80vw;
  }
}
.slider-button:hover:not(:disabled) {
  transform: scale(1.1);
}
.slider-button:active:not(:disabled) {
  transform: scale(0.95);
}
.slider-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.point-swiper {
  flex: 1;
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
}

.swiper-slide {
  width: 100%;
}

.slide-content {
  position: relative;
  background-color: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.slide-badge {
  position: absolute;
  top: 24px;
  margin-left: calc((min(100vw, 400px) - 100px) / 2);
  background-color: #fff;
  color: #2234da;
  padding: 3px 16px;
  font-family: "Noto Sans", sans-serif;
  font-weight: bold;
  font-size: 12px;
  z-index: 1;
  border: 1px solid #2234da;
}
@media print, screen and (max-width: 1600px) {
  .slide-badge {
    margin-left: 40%;
  }
}

.slide-image-wrapper {
  width: 100%;
  padding: 16px;
  background-color: #fff;
}
.slide-image {
  width: 100%;
  height: unset;
  object-fit: cover;
}

/* Slide Pagination */
.slide-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Arial", sans-serif;
  color: #071a33;
  margin-top: -40px;
  transition: opacity 0.4s ease;
  width: 200px;
  border-radius: 8px;
  border: 2px solid #2234da;
  margin-left: min(20%, 100px);
  background-color: #FFFBED;
  z-index: 4;
  position: absolute;
}
@media print, screen and (max-width: 1600px) {
  .slide-pagination {
    margin-left: 30%;
  }
}
@media only screen and (max-width: 640px) {
  .slide-pagination {
    margin-left: 20vw;
  }
}
.slide-pagination.is-fading {
  opacity: 0;
}
.slide-pagination .current-number {
  font-size: 23px;
  font-weight: bold;
  color: #2234da;
  transition: opacity 0.4s ease;
}
.slide-pagination .divider {
  font-size: 12px;
  color: #d3d3d3;
  letter-spacing: 0.1em;
}
.slide-pagination .total-number {
  font-size: 23px;
  font-weight: bold;
  color: #2234da;
}

/* ========================================
  Feature Detail Section
  ======================================== */
.feature-detail-section {
  margin-top: 24px;
  padding: 0 16px;
  text-align: center;
  z-index: 1;
  position: relative;
}
@media only screen and (max-width: 490px) {
  .feature-detail-section {
    padding: 0;
  }
}
.feature-detail-section .feature-content-wrapper {
  background-color: #fff;
  width: 100%;
  border-radius: 24px;
  margin: auto;
  padding: 16px;
  margin-bottom: 24px;
}

.feature-divider {
  width: 100%;
  max-width: 300px;
  height: 1px;
  background: repeating-linear-gradient(to right, #ddd 0px, #ddd 8px, transparent 8px, transparent 16px);
  margin: 32px auto 0;
}

.feature-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 24px;
  color: #2234da;
  margin-bottom: 24px;
  margin: -20px auto 20px;
  width: fit-content;
  background-color: #fff;
}
@media only screen and (max-width: 640px) {
  .feature-title {
    font-size: 22px;
  }
}

.feature-description {
  max-width: 400px;
  margin: 0 auto;
}

.description-text {
  font-size: 16px;
  color: #071a33;
  line-height: 2;
  width: fit-content;
  margin: auto;
  text-align: left;
}

/* Feature CTA */
.feature-cta {
  display: flex;
  justify-content: center;
}

.btn-feature-detail {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background-color: #d73852;
  color: #fff;
  padding: 16px 24px;
  border-radius: 9999px;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 4px 0px 0px rgb(183.179916318, 36.820083682, 60.7531380753);
  transition: all 0.2s;
  min-width: 280px;
  border: 1px solid #d73852;
}
.btn-feature-detail:hover {
  background-color: #fff;
}
.btn-feature-detail:hover .btn-label {
  color: #d73852;
}
.btn-feature-detail:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0px 0px rgb(183.179916318, 36.820083682, 60.7531380753);
}
@media only screen and (max-width: 640px) {
  .btn-feature-detail {
    font-size: 14px;
    min-width: 260px;
    padding: 8px 16px;
  }
}
.btn-feature-detail .btn-label {
  line-height: 2;
}

.btn-label {
  flex: 1;
  text-align: center;
  z-index: 1;
  position: relative;
}

.btn-icon-wrapper {
  flex-shrink: 0;
}

.btn-arrow-icon {
  display: block;
}

.sp-only {
  display: none;
}
@media only screen and (max-width: 640px) {
  .sp-only {
    display: block;
  }
}

#sub-page-desc {
  padding: 5%;
  position: relative;
  z-index: 1;
}
#sub-page-desc .desc {
  background-color: #fff;
  border: 1px solid #2234da;
  border-radius: 24px;
  padding: 30px;
  color: #2234da;
  line-height: 1.8;
  font-size: 16px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
}
#sub-page-desc .desc span {
  background: linear-gradient(transparent 60%, #FEE284 60%);
  background-repeat: no-repeat;
  /* 最初は幅 0% にしておく */
  background-size: 0% 100%;
  /* 伸びる速度とタイミングの設定 */
  transition: background-size 0.8s ease-out;
  display: inline;
}
#sub-page-desc .desc span.is-active {
  background-size: 100% 100%;
}
#sub-page-desc .where-wrap {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid #2234da;
  border-radius: 24px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
  background-color: #FFFBED;
  box-shadow: 3px 4px 0px #2234da;
}
#sub-page-desc .where-wrap .illu-wrap {
  position: absolute;
  width: 100px;
  margin-left: min(75%, 340px);
}
#sub-page-desc .where-wrap .txt01-wrap {
  max-width: 330px;
  text-align: center;
  background: linear-gradient(transparent 60%, #FFDEE3 60%);
  background-repeat: no-repeat;
  /* 最初は幅 0% にしておく */
  background-size: 0% 100%;
  /* 伸びる速度とタイミングの設定 */
  transition: background-size 0.8s ease-out;
}
#sub-page-desc .where-wrap .txt01-wrap.is-active {
  background-size: 100% 100%;
}
#sub-page-desc .where-wrap .txt01-wrap img {
  max-width: 300px;
  margin: auto;
}
#sub-page-desc .where-wrap .txt02-wrap {
  max-width: 230px;
  text-align: center;
  margin-top: 15px;
  background: linear-gradient(transparent 60%, #FFDEE3 60%);
  background-repeat: no-repeat;
  /* 最初は幅 0% にしておく */
  background-size: 0% 100%;
  /* 伸びる速度とタイミングの設定 */
  transition: background-size 0.8s ease-out;
}
#sub-page-desc .where-wrap .txt02-wrap.is-active {
  background-size: 100% 100%;
}
#sub-page-desc .where-wrap .txt02-wrap img {
  max-width: 220px;
  margin: auto;
}
#sub-page-desc .where-wrap .txt-wrap {
  font-size: 16px;
  line-height: 1.8;
  margin-top: 16px;
  text-align: center;
}
#sub-page-desc .where-wrap .txt-wrap .red {
  color: #d73852;
  font-weight: bold;
}
#sub-page-desc .where-wrap .txt-wrap .red-border {
  background: linear-gradient(transparent 60%, #FFDEE3 60%);
  background-repeat: no-repeat;
  /* 最初は幅 0% にしておく */
  background-size: 0% 100%;
  /* 伸びる速度とタイミングの設定 */
  transition: background-size 0.8s ease-out;
}
#sub-page-desc .where-wrap .txt-wrap .red-border.is-active {
  background-size: 100% 100%;
}

.biginner {
  /* マウスホバーで一時停止させる設定（お好みで） */
  /* ========================================
     タイトルセクション
     ======================================== */
  /* ========================================
     カテゴリーセクション
     ======================================== */
  /* ========================================
     コメントグリッド
     ======================================== */
  /* ========================================
     コメント吹き出し
     ======================================== */
  /* ========================================
     著者情報
     ======================================== */
  /* ========================================
     コメントグリッド（PC: グリッド / SP: スライダー）
     ======================================== */
  /* ========================================
     スライダーナビゲーションボタン（SP用）
     ======================================== */
  /* ========================================
     コメント吹き出し（高さ調整）
     ======================================== */
  /* ========================================
     レスポンシブ調整
     ======================================== */
  /* ========================================
     タイトルセクション
     ======================================== */
  /* ========================================
     イラスト
     ======================================== */
  /* ========================================
     カード
     ======================================== */
  /* ========================================
     カードバッジ
     ======================================== */
  /* ========================================
     カードコンテンツ
     ======================================== */
}
.biginner .deco-ticker {
  width: 100%; /* 横幅いっぱい */
  background: transparent; /* 背景は必要に応じて設定 */
  padding: 20px 0;
}
.biginner .deco-ticker-inner {
  display: flex; /* SVGを横に並べる */
  width: max-content; /* 中身のサイズに合わせる */
  -webkit-animation: marquee-loop 30s linear infinite;
  animation: marquee-loop 30s linear infinite; /* 30秒で1周、等速、無限 */
}
.biginner .deco-txt {
  display: flex;
  align-items: center;
  padding-right: 50px; /* 要素同士の間隔 */
}
.biginner .deco-ticker:hover .deco-ticker-inner {
  animation-play-state: paused;
}
.biginner .deco-txt {
  margin-top: -70px;
}
.biginner #sub-page-desc {
  padding: 5%;
  position: relative;
  z-index: 1;
}
.biginner #sub-page-desc .desc {
  background-color: #fff;
  border: 1px solid #2234da;
  border-radius: 24px;
  padding: 30px;
  color: #2234da;
  line-height: 1.8;
  font-size: 16px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
}
.biginner #sub-page-desc .desc span {
  background: linear-gradient(transparent 60%, #FEE284 60%);
  background-repeat: no-repeat;
  /* 最初は幅 0% にしておく */
  background-size: 0% 100%;
  /* 伸びる速度とタイミングの設定 */
  transition: background-size 0.8s ease-out;
  display: inline;
}
.biginner #sub-page-desc .desc span.is-active {
  background-size: 100% 100%;
}
.biginner #sub-page-desc .where-wrap {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid #2234da;
  border-radius: 24px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
  background-color: #FFFBED;
  box-shadow: 3px 4px 0px #2234da;
}
@media only screen and (max-width: 490px) {
  .biginner #sub-page-desc .where-wrap {
    padding-top: 48px;
  }
}
.biginner #sub-page-desc .where-wrap .illu-wrap {
  position: absolute;
  width: 100px;
  margin-left: min(75%, 340px);
}
@media only screen and (max-width: 490px) {
  .biginner #sub-page-desc .where-wrap .illu-wrap {
    width: 75px;
    margin-left: 60vw;
    margin-top: -90px;
  }
}
.biginner #sub-page-desc .where-wrap .txt01-wrap {
  max-width: 330px;
  text-align: center;
  background: linear-gradient(transparent 60%, #FFDEE3 60%);
  background-repeat: no-repeat;
  /* 最初は幅 0% にしておく */
  background-size: 0% 100%;
  /* 伸びる速度とタイミングの設定 */
  transition: background-size 0.8s ease-out;
}
.biginner #sub-page-desc .where-wrap .txt01-wrap.is-active {
  background-size: 100% 100%;
}
.biginner #sub-page-desc .where-wrap .txt01-wrap img {
  max-width: 300px;
  margin: auto;
}
.biginner #sub-page-desc .where-wrap .txt02-wrap {
  max-width: 230px;
  text-align: center;
  margin-top: 15px;
  background: linear-gradient(transparent 60%, #FFDEE3 60%);
  background-repeat: no-repeat;
  /* 最初は幅 0% にしておく */
  background-size: 0% 100%;
  /* 伸びる速度とタイミングの設定 */
  transition: background-size 0.8s ease-out;
}
.biginner #sub-page-desc .where-wrap .txt02-wrap.is-active {
  background-size: 100% 100%;
}
.biginner #sub-page-desc .where-wrap .txt02-wrap img {
  max-width: 220px;
  margin: auto;
}
.biginner #sub-page-desc .where-wrap .txt-wrap {
  font-size: 16px;
  line-height: 1.8;
  margin-top: 16px;
  text-align: center;
}
.biginner #sub-page-desc .where-wrap .txt-wrap .red {
  color: #d73852;
  font-weight: bold;
}
.biginner #sub-page-desc .where-wrap .txt-wrap .red-border {
  background: linear-gradient(transparent 60%, #FFDEE3 60%);
  background-repeat: no-repeat;
  /* 最初は幅 0% にしておく */
  background-size: 0% 100%;
  /* 伸びる速度とタイミングの設定 */
  transition: background-size 0.8s ease-out;
}
.biginner #sub-page-desc .where-wrap .txt-wrap .red-border.is-active {
  background-size: 100% 100%;
}
.biginner #load-wrap {
  position: absolute;
  max-width: 450px;
  margin-left: 30px;
}
@media only screen and (max-width: 490px) {
  .biginner #load-wrap {
    width: 90vw;
  }
}
.biginner #load-wrap .load-wrapper {
  z-index: 0;
  position: relative;
  margin-top: -90px;
}
.biginner #load-wrap .car-icon {
  margin-top: -30px;
  margin-left: 300px;
  z-index: 2;
  position: relative;
}
@media only screen and (max-width: 490px) {
  .biginner #load-wrap .car-icon {
    margin-left: 50vw;
  }
}
.biginner .point-section {
  margin-top: 200px;
  position: relative;
  z-index: 1;
}
.biginner .voice-section {
  width: 100%;
  padding: 24px min(5%, 40px) 0;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .biginner .voice-section {
    padding: 32px 20px 0;
  }
}
.biginner .voice-section .voice-header {
  margin-top: 50px;
}
.biginner .voice-section .voice-header .en-ttl {
  font-size: min(20vw, 110px);
  margin-bottom: -30px;
}
.biginner .voice-section .voice-header .news-title {
  padding-top: 0px;
}
@media only screen and (max-width: 490px) {
  .biginner .voice-section .voice-header .news-title svg {
    height: 7vw;
  }
}
.biginner .voice-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.biginner .voice-header {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.biginner .voice-title-wrapper {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 3px 0;
  height: 77px;
}
.biginner .voice-title-bg {
  position: absolute;
  left: 211px;
  top: -31.54px;
  transform: translateX(-50%);
  font-family: "Wendy One", sans-serif;
  font-size: 127px;
  color: #FFECEF;
  text-align: center;
  letter-spacing: 11.43px;
  line-height: 130px;
  margin: 0;
  z-index: 1;
}
@media (max-width: 768px) {
  .biginner .voice-title-bg {
    font-size: 80px;
    left: 50%;
    line-height: 1;
    top: -20px;
  }
}
.biginner .voice-title {
  position: relative;
  z-index: 2;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 32px;
  color: white;
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .biginner .voice-title {
    font-size: 24px;
  }
}
.biginner .voice-illustration {
  position: absolute;
  right: -0.38px;
  top: -34px;
  max-width: 183.5px;
  width: 35%;
}
.biginner .voice-illustration img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .biginner .voice-illustration {
    width: 120px;
    height: auto;
    top: -40px;
    right: 0;
  }
}
@media only screen and (max-width: 490px) {
  .biginner .voice-illustration {
    width: 40vw;
    top: -20px;
  }
}
.biginner .voice-category {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.biginner .voice-category:nth-child(2) .comments-grid .comment-card:nth-child(1) {
  width: 42%;
  min-width: unset;
}
.biginner .voice-category:nth-child(2) .comments-grid .comment-card:nth-child(2) {
  width: 54%;
  min-width: unset;
}
@media (max-width: 768px) {
  .biginner .voice-category:nth-child(4) .slider-nav-btn {
    margin-top: -215px;
  }
}
.biginner .voice-category:nth-child(4) .comments-grid .comment-card {
  min-width: unset;
}
.biginner .voice-category:nth-child(4) .comments-grid .comment-card:nth-child(1) {
  width: 51%;
}
.biginner .voice-category:nth-child(4) .comments-grid .comment-card:nth-child(2) {
  width: 45%;
}
.biginner .voice-category:nth-child(4) .comments-grid .comment-card:nth-child(3) {
  width: 48%;
}
.biginner .voice-category:nth-child(4) .comments-grid .comment-card:nth-child(4) {
  width: 48%;
}
.biginner .voice-category:nth-child(4) .comments-grid .comment-card:nth-child(5) {
  width: 41%;
}
.biginner .voice-category:nth-child(4) .comments-grid .comment-card:nth-child(6) {
  width: 54%;
}
.biginner .category-title-btn {
  width: 100%;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
  background-color: #FFFBED;
  background-size: 98.14px 98.14px;
  border: 2px solid #2234DA;
  border-radius: 9999px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.biginner .category-title-btn span {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 24px;
  color: #2234DA;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .biginner .category-title-btn {
    padding: 18px 24px;
  }
  .biginner .category-title-btn span {
    font-size: 18px;
  }
}
.biginner .comments-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 16px;
  width: 100%;
}
.biginner .comment-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  min-width: 200px;
  max-width: 380px;
}
@media (max-width: 768px) {
  .biginner .comment-card {
    max-width: 100%;
  }
}
.biginner .comment-bubble {
  position: relative;
  width: 100%;
  min-height: 185px;
  background-color: white;
  border: 2px solid #2234DA;
  border-radius: 24px;
  padding: 40px 23px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.biginner .comment-bubble::after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 15px solid white;
  filter: drop-shadow(0px 3px 0px #2234da);
}
@media (max-width: 768px) {
  .biginner .comment-bubble {
    min-height: 160px;
    padding: 30px 20px;
  }
}
.biginner .comment-bubble-tall {
  min-height: 225px;
  padding: 60px 23px 40px;
}
@media (max-width: 768px) {
  .biginner .comment-bubble-tall {
    min-height: 200px;
    padding: 40px 20px 30px;
  }
}
.biginner .comment-text {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #071A33;
  line-height: 1.8;
  text-align: justify;
  letter-spacing: -1.05px;
  margin: 0;
}
@media (max-width: 768px) {
  .biginner .comment-text {
    font-size: 14px;
  }
}
.biginner .comment-author {
  display: flex;
  align-items: center;
  gap: 8px;
}
.biginner .author-icon {
  flex-shrink: 0;
  width: 54.97px;
  height: 54.97px;
}
.biginner .author-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.biginner .author-info {
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #333;
  line-height: 2;
  white-space: nowrap;
  margin: 0;
}
@media (max-width: 768px) {
  .biginner .author-info {
    font-size: 14px;
  }
}
.biginner .comments-slider-wrapper {
  position: relative;
  width: 100%;
}
@media (min-width: 769px) {
  .biginner .comments-slider-wrapper .slider-nav-btn {
    display: none;
  }
}
.biginner .comments-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}
@media (max-width: 768px) {
  .biginner .comments-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    gap: 12px;
    padding: 0 4px 16px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .biginner .comments-grid::-webkit-scrollbar {
    display: none;
  }
}
.biginner .comment-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 200px;
  max-width: 380px;
}
@media (max-width: 768px) {
  .biginner .comment-card {
    flex: 0 0 280px;
    min-width: 280px;
    max-width: 280px;
  }
}
.biginner .slider-nav-btn {
  display: none;
}
@media (max-width: 768px) {
  .biginner .slider-nav-btn {
    margin-top: -195px;
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s, opacity 0.2s;
  }
  .biginner .slider-nav-btn svg {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  }
  .biginner .slider-nav-btn:active {
    transform: translateY(-50%) scale(0.9);
  }
  .biginner .slider-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
}
@media (max-width: 768px) {
  .biginner .slider-nav-prev {
    margin-left: min(65vw, 280px);
  }
}
@media (max-width: 768px) {
  .biginner .slider-nav-next {
    margin-left: min(76vw, 380px);
  }
}
.biginner .comment-bubble {
  position: relative;
  width: 100%;
  min-height: 185px;
  background-color: white;
  border: 2px solid #2234DA;
  border-radius: 24px;
  padding: 40px 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 4px 0px 0px #2234DA;
}
.biginner .comment-bubble::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid white;
  filter: drop-shadow(2px 2px 0px #2234DA);
}
@media (max-width: 768px) {
  .biginner .comment-bubble {
    min-height: 200px;
    padding: 30px 20px;
  }
}
.biginner .comment-text {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #071A33;
  line-height: 1.8;
  text-align: justify;
  letter-spacing: -1.05px;
  margin: 0;
}
@media (max-width: 768px) {
  .biginner .comment-text {
    font-size: 14px;
  }
}
@media (max-width: 1024px) {
  .biginner .comment-card {
    max-width: calc(50% - 8px);
  }
}
@media (max-width: 640px) {
  .biginner .comment-card {
    max-width: 100%;
  }
  .biginner .comments-grid {
    gap: 20px;
  }
}
.biginner .choice-section {
  width: 100%;
  padding: 48px min(5%, 40px) 64px;
  z-index: 1;
  position: relative;
}
@media (max-width: 768px) {
  .biginner .choice-section {
    padding: 32px 20px 48px;
  }
}
.biginner .choice-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.biginner .choice-header {
  position: relative;
  width: 100%;
  height: 172px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@media (max-width: 768px) {
  .biginner .choice-header {
    height: auto;
    min-height: 120px;
  }
}
.biginner .choice-header .en-ttl {
  font-size: min(23vw, 120px);
}
.biginner .choice-header .sec-header .news-title {
  margin-top: 15px;
}
.biginner .choice-header .sec-header .news-title svg {
  height: 13vw;
}
.biginner .choice-title-wrapper {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 77px;
  padding: 3px 0;
  z-index: 1;
}
.biginner .choice-title-bg {
  position: absolute;
  left: 214.5px;
  top: -31.54px;
  transform: translateX(-50%);
  font-family: "Wendy One", sans-serif;
  font-size: 111px;
  color: #FFECEF;
  text-align: center;
  letter-spacing: 9.99px;
  line-height: normal;
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .biginner .choice-title-bg {
    font-size: 70px;
    left: 50%;
    top: -20px;
  }
}
.biginner .choice-title {
  position: relative;
  z-index: 2;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 32px;
  color: white;
  line-height: normal;
  white-space: nowrap;
}
.biginner .choice-title p {
  margin: 0;
}
@media (max-width: 768px) {
  .biginner .choice-title {
    font-size: 24px;
    white-space: normal;
  }
}
.biginner .choice-illustrations {
  position: absolute;
  right: 10px;
  margin-top: -10px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
@media (max-width: 768px) {
  .biginner .choice-illustrations {
    right: 0;
    top: -40px;
    transform: scale(0.7);
    transform-origin: top right;
  }
}
.biginner .illustration-cards {
  position: relative;
  width: 52px;
  height: 54px;
}
.biginner .illustration-cards svg {
  width: 100%;
  height: 100%;
}
.biginner .illustration-person {
  position: relative;
  width: 80px;
}
.biginner .illustration-person img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 768px) {
  .biginner .illustration-person {
    width: 20vw;
    height: auto;
  }
}
@media only screen and (max-width: 490px) {
  .biginner .illustration-person {
    width: 40vw;
    right: 5vw;
  }
}
.biginner .choice-card {
  width: 100%;
  background-color: #FFFBED;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
  background-color: #FFFBED;
  border: 2px solid #2234DA;
  border-radius: 24px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
@media (max-width: 768px) {
  .biginner .choice-card {
    padding: 20px;
  }
}
@media only screen and (max-width: 490px) {
  .biginner .choice-card {
    padding: 20px 16pxs;
  }
}
.biginner .card-badge {
  width: 101px;
  background-color: #fffbed;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
  border: 2px solid #2234DA;
  border-radius: 9999px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.biginner .card-badge span {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 24px;
  color: #2234DA;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .biginner .card-badge span {
    font-size: 20px;
  }
}
.biginner .card-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.biginner .card-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 24px;
  color: #2234DA;
  line-height: 1.3;
  text-align: left;
  width: 100%;
  margin: 0;
}
@media (max-width: 768px) {
  .biginner .card-title {
    font-size: 20px;
  }
}
.biginner .card-description {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #071A33;
  line-height: 1.8;
  text-align: justify;
  width: 100%;
  margin: 0;
}
@media (max-width: 768px) {
  .biginner .card-description {
    font-size: 14px;
  }
}

.section-contents.subpage.flow #sub-page-ttl .inner, .section-contents.subpage.course #sub-page-ttl .inner, .section-contents.subpage.enter #sub-page-ttl .inner, .section-contents.subpage.school #sub-page-ttl .inner {
  background-image: url(../img/common/dotted-bg.jpg);
  border-radius: 24px;
  border: 2px solid #2234da;
  flex-wrap: wrap;
  padding: 24px 0;
  height: unset;
}
@media only screen and (max-width: 490px) {
  .section-contents.subpage.flow #sub-page-ttl .inner, .section-contents.subpage.course #sub-page-ttl .inner, .section-contents.subpage.enter #sub-page-ttl .inner, .section-contents.subpage.school #sub-page-ttl .inner {
    aspect-ratio: unset;
  }
}
.section-contents.subpage.flow #sub-page-ttl .inner img, .section-contents.subpage.course #sub-page-ttl .inner img, .section-contents.subpage.enter #sub-page-ttl .inner img, .section-contents.subpage.school #sub-page-ttl .inner img {
  width: 50%;
  margin: auto;
}

.section-contents.subpage.course #sub-page-ttl .inner img {
  width: 70%;
}

.section-contents.subpage.enter #sub-page-ttl .inner img {
  width: 75%;
}
.section-contents.subpage.enter #sub-page-ttl .inner .txt-wrap {
  margin-top: -40px;
}

.section-contents.subpage.school #sub-page-ttl .inner img {
  width: 75%;
}
.section-contents.subpage.school #sub-page-ttl .inner .txt-wrap {
  margin-top: -10px;
}

.flow {
  /* ========================================
   免許取得の流れ - STEPセクション
   ======================================== */
  /* ========================================
     アコーディオン
     ======================================== */
  /* ========================================
     アコーディオンコンテンツ
     ======================================== */
  /* ========================================
     注意書き
     ======================================== */
  /* ========================================
     STEPラッパー
     ======================================== */
  /* ========================================
     STEPバッジ
     ======================================== */
  /* ========================================
     STEP詳細（シンプル）
     ======================================== */
  /* ========================================
     STEP詳細（テーブル付き）
     ======================================== */
  /* ========================================
     テーブル
     ======================================== */
  /* ========================================
     アクションボタン
     ======================================== */
  /* ========================================
     最終ステップ
     ======================================== */
  /* ========================================
     レスポンシブ
     ======================================== */
  /* ========================================
     レスポンシブ
     ======================================== */
  /* ========================================
     アコーディオンリスト
     ======================================== */
  /* ========================================
     アコーディオンアイテム
     ======================================== */
  /* ========================================
     テーブル
     ======================================== */
  /* ========================================
     レスポンシブ
     ======================================== */
}
.flow .step-section {
  width: 100%;
  padding: 40px 20px;
}
.flow .step-container {
  max-width: 500px;
  margin: 16px auto;
}
.flow .step-accordion {
  width: 100%;
}
.flow .step-accordion-content {
  max-height: 10000px;
  margin-top: 24px;
  opacity: 1;
  visibility: visible;
  padding-top: 16px;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.3s ease, padding-top 0.3s ease, visibility 0.3s ease;
}
.flow .step-note {
  background-color: #E7E6EB;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 40px;
}
.flow .step-note p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #071A33;
  text-align: center;
  margin: 0;
}
.flow .step-wrapper {
  position: relative;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-left: 1px solid #2234da;
  margin-left: 5px;
}
@media only screen and (max-width: 490px) {
  .flow .step-wrapper {
    padding: 16px 0;
  }
}
.flow .step-wrapper:nth-child(2) {
  border-left: 0;
}
.flow .step-wrapper:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 70px;
  width: 1px;
  height: 500px;
  background: #2234da;
}
.flow .step-wrapper:last-child {
  border-left: 0;
}
.flow .step-wrapper:last-child::before {
  content: "";
  position: absolute;
  top: -120px;
  width: 1px;
  height: 200px;
  background: #2234da;
}
.flow .step-wrapper.step-wrapper-last::after {
  display: none;
}
.flow .step-badge {
  position: relative;
  background-color: #FFFBED;
  border: 2px solid #2234DA;
  border-radius: 9999px;
  padding: 8px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.flow .step-badge.step-1::after {
  position: absolute;
  width: 80px;
  height: 130px;
  content: "";
  background-image: url(../img/flow/flow-illu01.png);
  background-size: cover;
  margin-left: min(40vw, 300px);
  margin-top: -30px;
}
@media only screen and (max-width: 490px) {
  .flow .step-badge.step-1::after {
    width: 70px;
    height: 120px;
    margin-left: 55vw;
  }
}
.flow .step-badge.step-2::after {
  position: absolute;
  width: 82px;
  height: 60px;
  content: "";
  background-image: url(../img/flow/flow-illu02.png);
  background-size: cover;
  margin-left: min(40vw, 300px);
  margin-top: 10px;
}
@media only screen and (max-width: 490px) {
  .flow .step-badge.step-2::after {
    width: 75px;
    height: 55px;
    margin-left: 55vw;
  }
}
.flow .step-badge.step-3::after {
  position: absolute;
  width: 110px;
  height: 85px;
  content: "";
  background-image: url(../img/flow/flow-illu03.png);
  background-size: cover;
  margin-left: min(30vw, 240px);
  margin-top: -50px;
}
@media only screen and (max-width: 490px) {
  .flow .step-badge.step-3::after {
    width: 108px;
    height: 81px;
    margin-left: 50vw;
  }
}
.flow .step-badge.step-4::after {
  position: absolute;
  width: 110px;
  height: 110px;
  content: "";
  background-image: url(../img/flow/flow-illu04.png);
  background-size: cover;
  margin-left: min(40vw, 300px);
  margin-top: 10px;
}
@media only screen and (max-width: 490px) {
  .flow .step-badge.step-4::after {
    margin-left: 50vw;
    margin-top: -20px;
  }
}
.flow .step-badge.step-5::after {
  position: absolute;
  width: 110px;
  height: 64px;
  content: "";
  background-image: url(../img/flow/flow-illu05.png);
  background-size: cover;
  margin-left: min(30vw, 220px);
  margin-top: -30px;
}
@media only screen and (max-width: 490px) {
  .flow .step-badge.step-5::after {
    margin-left: 54vw;
    margin-top: -20px;
  }
}
.flow .step-badge.step-6::after {
  position: absolute;
  width: 60px;
  height: 81px;
  content: "";
  background-image: url(../img/flow/flow-illu06.png);
  background-size: cover;
  margin-left: min(30vw, 200px);
  margin-top: -50px;
}
@media only screen and (max-width: 490px) {
  .flow .step-badge.step-6::after {
    margin-left: 54vw;
    margin-top: -40px;
  }
}
.flow .step-badge.step-7::after {
  position: absolute;
  width: 86px;
  height: 63px;
  content: "";
  background-image: url(../img/flow/flow-illu07.png);
  background-size: cover;
  margin-left: min(30vw, 200px);
  margin-top: -20px;
}
@media only screen and (max-width: 490px) {
  .flow .step-badge.step-7::after {
    margin-left: 54vw;
  }
}
.flow .step-badge.step-8::after {
  position: absolute;
  width: 110px;
  height: 95px;
  content: "";
  background-image: url(../img/flow/flow-illu08.png);
  background-size: cover;
  margin-left: min(32vw, 230px);
  margin-top: -50px;
}
@media only screen and (max-width: 490px) {
  .flow .step-badge.step-8::after {
    margin-left: 54vw;
  }
}
.flow .step-badge-pink {
  background-color: #FFECEF;
}
.flow .step-badge-purple {
  background-color: #EEECFF;
}
.flow .badge-dot {
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #2234DA;
  border-radius: 50%;
  z-index: 1;
}
.flow .badge-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
@media only screen and (max-width: 490px) {
  .flow .badge-content {
    gap: 8px;
  }
}
.flow .step-number {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #2234DA;
  border-radius: 4px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #2234DA;
}
@media only screen and (max-width: 490px) {
  .flow .step-number {
    font-size: 18px;
  }
}
.flow .step-subtitle {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 24px;
  color: #2234DA;
  text-align: center;
  margin: 0;
}
.flow .step-subtitle span.small {
  font-size: 16px;
}
.flow .step-illustration {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 90px;
  height: auto;
}
.flow .step-illustration img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.flow .step-details-simple {
  padding: 0 32px;
}
.flow .step-details-simple .details-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #071A33;
  line-height: 1.8;
  margin: 0 0 16px;
}
.flow .step-details-simple .details-title-primary {
  color: #2234DA;
}
.flow .step-details-simple .details-text {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #071A33;
  line-height: 1.8;
  margin: 0;
}
.flow .step-details-with-table {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.flow .step-details-with-table .details-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #071A33;
  line-height: 1.8;
  margin: 0;
}
.flow .step-details-with-table .details-title-primary {
  color: #2234DA;
}
.flow .step-details-with-table .details-text {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #071A33;
  line-height: 1.8;
  margin: 0;
}
.flow .step-table {
  width: 100%;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 16px;
}
.flow .table-row {
  display: flex;
  width: 100%;
}
.flow .table-header {
  background-color: #E7E6EB;
}
.flow .table-header .table-cell {
  font-family: "Noto Sans", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #071A33;
  text-align: center;
  padding: 14px 17px;
  border-bottom: 1px solid #D3D3D3;
}
.flow .table-cell {
  flex: 1;
  border-right: 1px solid #D1D5DB;
}
.flow .table-cell:last-child {
  border-right: none;
}
.flow .table-cell p {
  margin: 0;
  line-height: 1.8;
}
.flow .table-cell-content {
  background-color: #EEECFF;
  border-bottom: 1px solid #D1D5DB;
  padding: 14px 17px;
  font-family: "Noto Sans", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #071A33;
}
.flow .table-cell-content p {
  margin: 0;
  text-align: center;
}
.flow .table-cell-content p:not(:last-child) {
  margin-bottom: 8px;
}
.flow .step-details {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.flow .step-details .details-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #071A33;
  line-height: 1.8;
  margin: 0;
}
.flow .step-details .details-text {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #071A33;
  line-height: 1.8;
  margin: 0;
}
.flow .btn-step-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background: linear-gradient(180deg, #D73852 0%, #FA6D84 100%);
  border-radius: 9999px;
  padding: 16px 64px;
  text-decoration: none;
  box-shadow: 0 4px 0 0 #9A0C23;
  margin-top: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.flow .btn-step-action:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 #9A0C23;
}
.flow .btn-step-action:active {
  transform: translateY(4px);
  box-shadow: none;
}
.flow .btn-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}
.flow .btn-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.flow .btn-text {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 24px;
  color: white;
  white-space: nowrap;
  flex: 1;
  text-align: center;
}
.flow .btn-arrow {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.flow .btn-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}
.flow .step-details-final {
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.flow .step-details-final .final-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(255, 165, 0, 0.3);
}
.flow .step-details-final .final-badge span {
  font-size: 24px;
}
.flow .step-details-final .final-badge p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: white;
  margin: 0;
}
.flow .step-details-final .details-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #2234DA;
  line-height: 1.8;
  margin: 0;
}
.flow .step-details-final .details-text {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #071A33;
  line-height: 1.8;
  margin: 0;
}
@media (max-width: 640px) {
  .flow .step-badge {
    padding: 16px 8px;
  }
  .flow .step-subtitle {
    font-size: 18px;
  }
  .flow .step-illustration {
    width: 70px;
    right: 5px;
  }
  .flow .btn-step-action {
    padding: 12px 32px;
  }
  .flow .btn-text {
    font-size: 20px;
  }
  .flow .step-details-simple,
  .flow .step-details-with-table,
  .flow .step-details-final {
    padding: 0 16px;
  }
}
.flow .skill-training-card {
  position: relative;
  width: 100%;
  max-width: 500px;
  background-color: #fffbed;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
  border: 1px solid #2234DA;
  border-radius: 24px;
  padding: 16px;
  text-align: center;
  margin-top: 16px;
}
.flow .skill-training-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 24px;
  color: #071A33;
  line-height: 1.8;
  margin: 0 0 16px;
}
.flow .skill-training-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.flow .training-item {
  margin: 0;
  line-height: 1.8;
}
.flow .training-item:not(:last-child) {
  margin-bottom: 0;
}
.flow .training-course {
  display: block;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: #071A33;
  line-height: 1.8;
}
.flow .training-course.blue {
  color: #2234da;
  font-weight: bold;
}
.flow .training-note {
  display: block;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #071A33;
  line-height: 1.8;
}
.flow .training-item-last {
  margin-top: 0;
}
.flow .training-item-last .training-course,
.flow .training-item-last .training-note {
  display: inline;
}
@media (max-width: 640px) {
  .flow .skill-training-card {
    padding: 20px 16px;
  }
  .flow .skill-training-title {
    font-size: 20px;
  }
  .flow .training-course {
    font-size: 20px;
  }
  .flow .training-note {
    font-size: 14px;
  }
}
.flow .exam-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.flow .exam-table {
  width: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
}
.flow .exam-table-row {
  width: 100%;
  display: flex;
}
.flow .exam-table-cell {
  flex: 1;
  padding: 14px 12px;
  border: 1px solid #D1D5DB;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Noto Sans", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #071A33;
  line-height: 1.6;
}
.flow .exam-table-cell p {
  margin: 0;
}
.flow .cell-day {
  background-color: #EEECFF;
  border-right: 1px solid #D1D5DB;
}
.flow .cell-time {
  background-color: white;
  border-right: 1px solid #D1D5DB;
}
.flow .cell-single {
  background-color: white;
  border-right: 1px solid #D1D5DB;
}
.flow .exam-table-note {
  width: 100%;
  background-color: #E7E6EB;
  border: 1px solid #D3D3D3;
  border-top: 1px solid #D3D3D3;
  padding: 24px;
}
.flow .exam-table-note p {
  margin: 0;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #071A33;
  line-height: 1.8;
}
@media (max-width: 640px) {
  .flow .exam-schedule-lead p {
    font-size: 18px;
  }
  .flow .exam-accordion-list {
    gap: 20px;
  }
  .flow .exam-accordion-btn {
    height: 56px;
    padding: 12px 16px;
  }
  .flow .btn-text {
    font-size: 18px;
  }
  .flow .btn-icon {
    width: 28px;
    height: 28px;
  }
  .flow .exam-table-cell {
    padding: 12px 8px;
    font-size: 14px;
  }
  .flow .exam-table-note {
    padding: 16px;
  }
  .flow .exam-table-note p {
    font-size: 14px;
  }
}
.flow .action-button {
  padding: 16px;
}
.flow .mt-removal-content {
  padding: 0 5%;
}
.flow .mt-removal-content .mt-removal-flow {
  margin-top: 24px;
}
.flow .mt-removal-content .flow-badge-pink {
  border: 2px solid #2234da;
  background-color: #FFECEF;
  color: #2234da;
  border-radius: 30px;
  text-align: center;
  line-height: 2;
  font-size: 24px;
  font-weight: bold;
  padding: 4px 0;
}
.flow .mt-removal-content .flow-content-box {
  border: 1px solid #2234da;
  border-radius: 30px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  padding: 24px 0;
  background-color: #fffbed;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
}
.flow .mt-removal-content .bar {
  width: 1px;
  height: 20px;
  background-color: #2234da;
  margin: auto;
}

.school .info-container .action-button {
  padding: 5px 16px;
  height: 68px;
}
.school .info-container .action-button.bus .button-label {
  font-size: 20px;
}

.school .info-container .step-accordion {
  margin-bottom: 24px;
}

@media only screen and (max-width: 640px) {
  .enter .enter-section .sec-header.voice-header .en-ttl {
    font-size: min(14vw, 48px);
    margin-top: -15px;
  }
}

.course, .enter, .school {
  /* ========================================
   料金シミュレーション
   ======================================== */
  /* ========================================
     タイトル
     ======================================== */
  /* ========================================
     フォーム
     ======================================== */
  /* ========================================
     フォームセクション
     ======================================== */
  /* ========================================
     フォームグループ
     ======================================== */
  /* ========================================
     セレクトボックス
     ======================================== */
  /* ========================================
     ラジオボタン
     ======================================== */
  /* ========================================
     プランリンク
     ======================================== */
  /* ========================================
     シミュレーションボタン
     ======================================== */
  /* ========================================
     結果エリア
     ======================================== */
  /* ========================================
     合計金額
     ======================================== */
  /* ========================================
     時限数
     ======================================== */
  /* ========================================
     注意書き
     ======================================== */
  /* ========================================
     入校申込ボタン
     ======================================== */
  /* ========================================
     レスポンシブ
     ======================================== */
  /* ========================================
     メインタイトル
     ======================================== */
  /* ========================================
     説明文
     ======================================== */
  /* ========================================
     MTコース説明
     ======================================== */
  /* ========================================
     リンクリスト
     ======================================== */
  /* ========================================
     情報ボックス
     ======================================== */
  /* ========================================
     レスポンシブ
     ======================================== */
  /* ========================================
     注意書き
     ======================================== */
  /* ========================================
     コースカード
     ======================================== */
  /* ========================================
     カードタイトル
     ======================================== */
  /* ========================================
     時限数
     ======================================== */
  /* ========================================
     料金
     ======================================== */
  /* ========================================
     レスポンシブ
     ======================================== */
  /* divベーステーブル用CSS */
  /* ========================================
     テーブル本体
     ======================================== */
}
.course .course-container, .enter .course-container, .school .course-container {
  max-width: 90%;
  margin: auto;
}
.course .simulator-title, .enter .simulator-title, .school .simulator-title {
  padding-bottom: 0px;
  margin-bottom: -20px;
}
.course .simulator-title .sec-header .en-ttl, .enter .simulator-title .sec-header .en-ttl, .school .simulator-title .sec-header .en-ttl {
  font-size: min(23vw, 104px);
}
.course .simulator-title .title-icon, .enter .simulator-title .title-icon, .school .simulator-title .title-icon {
  margin-top: 60px;
}
.course .course-section, .enter .course-section, .school .course-section {
  padding-bottom: 80px;
}
.course .course-section .sec-header .en-ttl, .enter .course-section .sec-header .en-ttl, .school .course-section .sec-header .en-ttl {
  font-size: 64px;
}
.course .course-section .sec-header .news-title, .enter .course-section .sec-header .news-title, .school .course-section .sec-header .news-title {
  padding-top: 0;
}
.course .course-section .sec-header, .enter .course-section .sec-header, .school .course-section .sec-header {
  margin-bottom: 40px;
}
.course .enter-section, .enter .enter-section, .school .enter-section {
  padding-bottom: 80px;
}
.course .enter-section .sec-header, .enter .enter-section .sec-header, .school .enter-section .sec-header {
  margin-left: 0;
  margin-top: 50px;
}
.course .enter-section .sec-header .en-ttl, .enter .enter-section .sec-header .en-ttl, .school .enter-section .sec-header .en-ttl {
  font-size: 64px;
}
.course .enter-section .sec-header .news-title, .enter .enter-section .sec-header .news-title, .school .enter-section .sec-header .news-title {
  padding-top: 0;
}
.course .enter-section .sec-header, .enter .enter-section .sec-header, .school .enter-section .sec-header {
  margin-bottom: 40px;
}
.course .enter-section .title-icon, .enter .enter-section .title-icon, .school .enter-section .title-icon {
  position: absolute;
  right: 10px;
  margin-top: -120px;
}
.course .sec-header, .enter .sec-header, .school .sec-header {
  width: 90%;
  margin-left: 5%;
}
.course .sec-header .en-ttl, .enter .sec-header .en-ttl, .school .sec-header .en-ttl {
  margin-top: -30px;
}
.course .simulator-section, .enter .simulator-section, .school .simulator-section {
  width: 100%;
  min-height: 100vh;
  padding: 40px 0px;
}
.course .simulator-container, .enter .simulator-container, .school .simulator-container {
  margin: 0 auto;
}
.course .simulator-title, .enter .simulator-title, .school .simulator-title {
  display: flex;
  align-items: center;
  gap: 16px;
}
.course .simulator-title h2, .enter .simulator-title h2, .school .simulator-title h2 {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 28px;
  color: #2234DA;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(34, 52, 218, 0.2);
}
.course .simulator-title .title-icon, .enter .simulator-title .title-icon, .school .simulator-title .title-icon {
  flex-shrink: 0;
}
.course .simulator-title .title-icon svg, .enter .simulator-title .title-icon svg, .school .simulator-title .title-icon svg {
  display: block;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
}
.course .simulator-form-wrap, .enter .simulator-form-wrap, .school .simulator-form-wrap {
  padding: 24px;
  border: 1px solid #2234da;
  border-radius: 16px;
  background-color: #fffbed;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
}
.course .simulator-form, .enter .simulator-form, .school .simulator-form {
  border-radius: 24px;
  margin: 24px 0;
}
.course .form-section, .enter .form-section, .school .form-section {
  margin-bottom: 24px;
}
.course .section-header, .enter .section-header, .school .section-header {
  border: 2px solid #2234DA;
  border-radius: 9999px;
  padding: 8px 24px;
  margin-bottom: 16px;
  background-color: #fffbed;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
}
.course .section-header h3, .enter .section-header h3, .school .section-header h3 {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #2234DA;
  margin: 0;
  text-align: left;
}
.course .form-group, .enter .form-group, .school .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.course .form-label, .enter .form-label, .school .form-label {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #071A33;
  margin-bottom: 0px;
}
.course .select-wrapper, .enter .select-wrapper, .school .select-wrapper {
  position: relative;
  width: 100%;
}
.course .form-select, .enter .form-select, .school .form-select {
  width: 100%;
  height: 40px;
  background: white;
  border: 1px solid #969FA9;
  border-radius: 6px;
  padding: 4px 40px 4px 13px;
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  color: #071A33;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.course .form-select:hover, .enter .form-select:hover, .school .form-select:hover {
  border-color: #2234DA;
}
.course .form-select:focus, .enter .form-select:focus, .school .form-select:focus {
  outline: none;
  border-color: #2234DA;
  box-shadow: 0 0 0 3px rgba(34, 52, 218, 0.1);
}
.course .select-arrow, .enter .select-arrow, .school .select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #969FA9;
  font-size: 12px;
  pointer-events: none;
}
.course .radio-group, .enter .radio-group, .school .radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.course .radio-label, .enter .radio-label, .school .radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.course .radio-label input[type=radio], .enter .radio-label input[type=radio], .school .radio-label input[type=radio] {
  position: absolute;
  opacity: 0;
}
.course .radio-label input[type=radio]:checked + .radio-custom, .enter .radio-label input[type=radio]:checked + .radio-custom, .school .radio-label input[type=radio]:checked + .radio-custom {
  border-color: #2234DA;
}
.course .radio-label input[type=radio]:checked + .radio-custom::after, .enter .radio-label input[type=radio]:checked + .radio-custom::after, .school .radio-label input[type=radio]:checked + .radio-custom::after {
  opacity: 1;
  transform: scale(1);
}
.course .radio-custom, .enter .radio-custom, .school .radio-custom {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid #969FA9;
  border-radius: 50%;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}
.course .radio-custom::after, .enter .radio-custom::after, .school .radio-custom::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 20%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  background: #2234DA;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.course .radio-text, .enter .radio-text, .school .radio-text {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  color: #071A33;
}
.course .plan-links, .enter .plan-links, .school .plan-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}
.course .plan-link, .enter .plan-link, .school .plan-link {
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #D73852;
  transition: color 0.2s ease;
  text-decoration: underline;
}
.course .plan-note, .enter .plan-note, .school .plan-note {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  color: #4B5563;
  margin: 8px 0 0;
}
.course .select-wrap, .enter .select-wrap, .school .select-wrap {
  background-color: #fff;
  border-radius: 16px;
  border: 4px solid #D5DBF6;
  padding: 24px;
}
.course .result-area, .enter .result-area, .school .result-area {
  margin-top: 16px;
  padding: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-animation: fadeIn 0.5s ease;
  animation: fadeIn 0.5s ease;
  border-radius: 16px;
  background-color: #D5DBF6;
}
.course .result-area .btn-simulate, .enter .result-area .btn-simulate, .school .result-area .btn-simulate {
  background-color: #2234da;
  border-radius: 16px 16px 0 0;
  line-height: 2;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
.course .result-total, .enter .result-total, .school .result-total {
  display: flex;
  margin: 16px 24px;
  flex-direction: column;
  gap: 16px;
}
.course .total-label, .enter .total-label, .school .total-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.course .total-label svg, .enter .total-label svg, .school .total-label svg {
  flex-shrink: 0;
}
.course .total-label span, .enter .total-label span, .school .total-label span {
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #071A33;
}
.course .total-amount, .enter .total-amount, .school .total-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  border: 2px solid #2234da;
  padding: 8px 0;
  background-color: #fffbed;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
}
.course .currency, .enter .currency, .school .currency {
  font-family: "Noto Sans", sans-serif;
  font-weight: bold;
  font-size: 24px;
  color: #2234DA;
}
.course .amount-digits, .enter .amount-digits, .school .amount-digits {
  display: flex;
  align-items: center;
  gap: 2px;
}
.course .digit-box, .enter .digit-box, .school .digit-box {
  font-family: "Noto Sans", sans-serif;
  width: 32px;
  height: 32px;
  background: white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
  font-size: 21px;
  background-color: #2234da;
  color: #fff;
}
.course .digit-separator, .enter .digit-separator, .school .digit-separator {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  color: #2234DA;
  margin: 0 2px;
}
.course .result-hours, .enter .result-hours, .school .result-hours {
  display: flex;
  gap: 8px;
  margin: 0px 24px;
}
@media only screen and (max-width: 490px) {
  .course .result-hours, .enter .result-hours, .school .result-hours {
    margin: 0px 16px;
  }
}
.course .hours-item, .enter .hours-item, .school .hours-item {
  flex: 1;
  border-radius: 6px;
  padding: 1px 9px;
  display: flex;
  gap: 4px;
}
@media only screen and (max-width: 490px) {
  .course .hours-item, .enter .hours-item, .school .hours-item {
    padding: 1px 5px;
  }
}
.course .hours-icon, .enter .hours-icon, .school .hours-icon {
  flex-shrink: 0;
}
.course .hours-icon svg, .enter .hours-icon svg, .school .hours-icon svg {
  display: block;
}
.course .hours-content, .enter .hours-content, .school .hours-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.course .hours-label, .enter .hours-label, .school .hours-label {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  color: #071A33;
  display: flex;
  flex-wrap: wrap;
}
.course .label-highlight, .enter .label-highlight, .school .label-highlight {
  color: #D73852;
  font-weight: 500;
}
.course .hours-value, .enter .hours-value, .school .hours-value {
  display: flex;
  align-items: center;
  gap: 2px;
}
.course .hour-digit, .enter .hour-digit, .school .hour-digit {
  width: 32px;
  height: 32px;
  background: white;
  border: 1px solid #A8B3C2;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  color: #2234DA;
}
.course .hour-unit, .enter .hour-unit, .school .hour-unit {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  color: #071A33;
  margin-left: 4px;
}
.course .action-button, .enter .action-button, .school .action-button {
  margin: 0px 8px;
  padding: 16px;
}
.course .result-notes, .enter .result-notes, .school .result-notes {
  line-height: 1.8;
  border-radius: 8px;
  margin: 0px 24px;
}
.course .result-notes p, .enter .result-notes p, .school .result-notes p {
  font-family: "Noto Sans", sans-serif;
  font-size: 12px;
  color: #071A33;
  line-height: 1.7;
  margin: 0;
}
.course .btn-enrollment, .enter .btn-enrollment, .school .btn-enrollment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background: linear-gradient(135deg, #D73852 0%, #FA6D84 100%);
  border-radius: 9999px;
  padding: 16px 24px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(215, 56, 82, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.course .btn-enrollment:hover, .enter .btn-enrollment:hover, .school .btn-enrollment:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(215, 56, 82, 0.4);
}
.course .btn-enrollment:active, .enter .btn-enrollment:active, .school .btn-enrollment:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(215, 56, 82, 0.3);
}
.course .btn-icon, .enter .btn-icon, .school .btn-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.course .btn-icon svg, .enter .btn-icon svg, .school .btn-icon svg {
  display: block;
}
.course .btn-text, .enter .btn-text, .school .btn-text {
  flex: 1;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: white;
  text-align: center;
}
.course .btn-arrow, .enter .btn-arrow, .school .btn-arrow {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.course .btn-arrow svg, .enter .btn-arrow svg, .school .btn-arrow svg {
  display: block;
}
@media (max-width: 640px) {
  .course .simulator-title h2, .enter .simulator-title h2, .school .simulator-title h2 {
    font-size: 24px;
  }
  .course .simulator-title .title-icon svg, .enter .simulator-title .title-icon svg, .school .simulator-title .title-icon svg {
    width: 60px;
    height: 60px;
  }
  .course .section-header h3, .enter .section-header h3, .school .section-header h3 {
    font-size: 16px;
  }
  .course .btn-simulate, .enter .btn-simulate, .school .btn-simulate {
    font-size: 18px;
  }
  .course .btn-text, .enter .btn-text, .school .btn-text {
    font-size: 18px;
  }
}
.course .license-info-container, .enter .license-info-container, .school .license-info-container {
  max-width: 375px;
  margin: 0 auto;
  background: white;
  border: 4px solid #D5DBF6;
  border-radius: 4px;
  padding: 24px 20px;
}
.course .license-info-content, .enter .license-info-content, .school .license-info-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.course .main-title, .enter .main-title, .school .main-title {
  width: 100%;
}
.course .main-title p, .enter .main-title p, .school .main-title p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #2234DA;
  line-height: 1.8;
  margin: 0;
}
.course .description-text, .enter .description-text, .school .description-text {
  width: 100%;
}
.course .description-text p, .enter .description-text p, .school .description-text p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #071A33;
  line-height: 1.8;
  margin: 0 0 16px;
}
.course .description-text p:last-child, .enter .description-text p:last-child, .school .description-text p:last-child {
  margin-bottom: 0;
}
.course .mt-course-description, .enter .mt-course-description, .school .mt-course-description {
  width: 100%;
}
.course .mt-course-description p, .enter .mt-course-description p, .school .mt-course-description p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #071A33;
  line-height: 1.8;
  margin: 0;
}
.course .link-list, .enter .link-list, .school .link-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.course .info-link, .enter .info-link, .school .info-link {
  font-family: "Noto Sans", sans-serif;
  font-weight: 350;
  font-size: 14px;
  color: #D73852;
  line-height: 20px;
  text-decoration: underline;
  text-underline-position: from-font;
  transition: color 0.2s ease;
  padding-top: 10px;
}
.course .info-box, .enter .info-box, .school .info-box {
  width: 100%;
  background-color: #E7E6EB;
  border-radius: 4px;
  padding: 8px 16px;
}
.course .info-box-title, .enter .info-box-title, .school .info-box-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #2234DA;
  line-height: 1.8;
  margin: 0 0 8px;
}
.course .info-box-content, .enter .info-box-content, .school .info-box-content {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #071A33;
  line-height: 1.8;
}
.course .info-box-content p, .enter .info-box-content p, .school .info-box-content p {
  margin: 0 0 8px;
}
.course .info-box-content p:last-child, .enter .info-box-content p:last-child, .school .info-box-content p:last-child {
  margin-bottom: 0;
}
.course .info-box-content .bullet, .enter .info-box-content .bullet, .school .info-box-content .bullet {
  color: #2234DA;
  margin-right: 4px;
}
.course .info-box-content .note-text, .enter .info-box-content .note-text, .school .info-box-content .note-text {
  margin-top: 12px;
  line-height: 1.8;
}
@media (max-width: 480px) {
  .course .license-info-section, .enter .license-info-section, .school .license-info-section {
    padding: 16px;
  }
  .course .license-info-container, .enter .license-info-container, .school .license-info-container {
    padding: 20px 16px;
  }
  .course .main-title p, .enter .main-title p, .school .main-title p {
    font-size: 16px;
  }
  .course .description-text p,
  .course .mt-course-description p, .enter .description-text p,
  .enter .mt-course-description p, .school .description-text p,
  .school .mt-course-description p {
    font-size: 15px;
  }
  .course .info-link, .enter .info-link, .school .info-link {
    font-size: 13px;
  }
  .course .info-box-title, .enter .info-box-title, .school .info-box-title {
    font-size: 15px;
  }
  .course .info-box-content, .enter .info-box-content, .school .info-box-content {
    font-size: 13px;
  }
}
@media (min-width: 768px) {
  .course .license-info-container, .enter .license-info-container, .school .license-info-container {
    max-width: 600px;
    padding: 32px 40px;
  }
  .course .main-title p, .enter .main-title p, .school .main-title p {
    font-size: 20px;
  }
  .course .description-text p,
  .course .mt-course-description p, .enter .description-text p,
  .enter .mt-course-description p, .school .description-text p,
  .school .mt-course-description p {
    font-size: 17px;
  }
  .course .info-link, .enter .info-link, .school .info-link {
    font-size: 15px;
  }
  .course .info-box, .enter .info-box, .school .info-box {
    padding: 12px 24px;
    margin-top: 16px;
  }
  .course .info-box-title, .enter .info-box-title, .school .info-box-title {
    font-size: 17px;
  }
  .course .info-box-content, .enter .info-box-content, .school .info-box-content {
    font-size: 15px;
  }
}
.course .course-notes, .enter .course-notes, .school .course-notes {
  background-color: #E7E6EB;
  border-radius: 4px;
  padding: 12px 24px;
  margin-top: 16px;
}
.course .course-notes p, .enter .course-notes p, .school .course-notes p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #071A33;
  line-height: 1.8;
  margin: 0;
}
.course .course-notes p:first-child, .enter .course-notes p:first-child, .school .course-notes p:first-child {
  margin-bottom: 0;
}
.course .course-card, .enter .course-card, .school .course-card {
  position: relative;
  background-color: #fffbed;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
  border: 1px solid #2234DA;
  border-radius: 24px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
}
.course .card-title-main, .enter .card-title-main, .school .card-title-main {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #2234DA;
  line-height: 1.8;
  text-align: center;
  margin: 0;
  width: 100%;
}
.course .card-subtitle, .enter .card-subtitle, .school .card-subtitle {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #2234DA;
  line-height: 1.8;
  text-align: center;
  margin: 0;
  width: 100%;
}
.course .card-title, .enter .card-title, .school .card-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #2234DA;
  line-height: 1.8;
  text-align: center;
  margin: 0;
  width: 100%;
}
.course .course-hours, .enter .course-hours, .school .course-hours {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin-top: 8px;
}
@media (min-width: 1024px) {
  .course .course-hours, .enter .course-hours, .school .course-hours {
    flex-direction: unset;
    justify-content: center;
  }
  .course .course-hours:has(.up-cell), .enter .course-hours:has(.up-cell), .school .course-hours:has(.up-cell) {
    flex-direction: column;
  }
  .course .course-hours:has(.col), .enter .course-hours:has(.col), .school .course-hours:has(.col) {
    flex-direction: column;
  }
}
.course .course-hours .up-cell, .enter .course-hours .up-cell, .school .course-hours .up-cell {
  align-items: bottom;
  gap: 16px;
}
.course .course-hours .up-cell .hours-label, .enter .course-hours .up-cell .hours-label, .school .course-hours .up-cell .hours-label {
  font-size: 18px;
}
.course .course-hours .up-cell .hours-value, .enter .course-hours .up-cell .hours-value, .school .course-hours .up-cell .hours-value {
  color: #2234da;
  font-size: 16px;
}
.course .course-hours .up-cell .hours-value span, .enter .course-hours .up-cell .hours-value span, .school .course-hours .up-cell .hours-value span {
  font-size: 28px;
}
.course .hours-item, .enter .hours-item, .school .hours-item {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 0;
  line-height: 1.45;
}
.course .hours-item:first-child, .enter .hours-item:first-child, .school .hours-item:first-child {
  margin-bottom: 0;
}
.course .hours-label, .enter .hours-label, .school .hours-label {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 24px;
  color: #071A33;
}
.course .hours-label .small, .enter .hours-label .small, .school .hours-label .small {
  font-size: 16px;
  line-height: 2.6;
}
.course .hours-label.inline, .enter .hours-label.inline, .school .hours-label.inline {
  display: inline;
}
.course .hours-value .small, .enter .hours-value .small, .school .hours-value .small {
  font-size: 16px;
  line-height: 2.6;
}
.course .hours-value, .enter .hours-value, .school .hours-value {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 28px;
  color: #071A33;
}
.course .course-card-compact, .enter .course-card-compact, .school .course-card-compact {
  padding: 26px 24px;
  min-height: 133px;
  justify-content: center;
}
.course .course-price, .enter .course-price, .school .course-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 8px 0 0;
  line-height: 1.45;
}
.course .price-amount, .enter .price-amount, .school .price-amount {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 28px;
  color: #071A33;
  letter-spacing: 0.05em;
}
.course .price-unit, .enter .price-unit, .school .price-unit {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #071A33;
}
@media (max-width: 480px) {
  .course .course-info-section, .enter .course-info-section, .school .course-info-section {
    padding: 16px;
  }
  .course .course-info-container, .enter .course-info-container, .school .course-info-container {
    max-width: 100%;
  }
  .course .course-notes, .enter .course-notes, .school .course-notes {
    padding: 10px 20px;
  }
  .course .course-notes p, .enter .course-notes p, .school .course-notes p {
    font-size: 13px;
  }
  .course .course-card, .enter .course-card, .school .course-card {
    padding: 20px 8px;
  }
  .course .card-title-main,
  .course .card-subtitle,
  .course .card-title, .enter .card-title-main,
  .enter .card-subtitle,
  .enter .card-title, .school .card-title-main,
  .school .card-subtitle,
  .school .card-title {
    font-size: 18px;
  }
  .course .hours-label, .enter .hours-label, .school .hours-label {
    font-size: 20px;
  }
  .course .hours-value, .enter .hours-value, .school .hours-value {
    font-size: 26px;
  }
  .course .price-amount, .enter .price-amount, .school .price-amount {
    font-size: 26px;
  }
  .course .price-unit, .enter .price-unit, .school .price-unit {
    font-size: 15px;
  }
}
@media (min-width: 768px) {
  .course .course-notes, .enter .course-notes, .school .course-notes {
    padding: 14px 28px;
  }
  .course .course-notes p, .enter .course-notes p, .school .course-notes p {
    font-size: 15px;
  }
  .course .course-card, .enter .course-card, .school .course-card {
    padding: 16px 28px;
  }
  .course .card-title-main,
  .course .card-subtitle,
  .course .card-title, .enter .card-title-main,
  .enter .card-subtitle,
  .enter .card-title, .school .card-title-main,
  .school .card-subtitle,
  .school .card-title {
    font-size: 22px;
  }
  .course .hours-label, .enter .hours-label, .school .hours-label {
    font-size: 26px;
  }
  .course .hours-value, .enter .hours-value, .school .hours-value {
    font-size: 30px;
  }
  .course .price-amount, .enter .price-amount, .school .price-amount {
    font-size: 30px;
  }
  .course .price-unit, .enter .price-unit, .school .price-unit {
    font-size: 18px;
  }
}
.course .exam-accordion-btn, .enter .exam-accordion-btn, .school .exam-accordion-btn {
  background-color: #EEECFF;
  margin-top: 16px;
}
.course .exam-accordion-btn .btn-text, .enter .exam-accordion-btn .btn-text, .school .exam-accordion-btn .btn-text {
  color: #2234da;
}
.course .child-accordion-btn, .enter .child-accordion-btn, .school .child-accordion-btn {
  background-color: #FFECEF;
  margin-top: 16px;
}
.course .child-accordion-btn .btn-text, .enter .child-accordion-btn .btn-text, .school .child-accordion-btn .btn-text {
  color: #2234da;
}
.course .custom-table, .enter .custom-table, .school .custom-table {
  width: 100%;
  border: 1px solid #D1D5DB;
  margin: 20px 0;
}
.course .custom-table .custom-table-row, .enter .custom-table .custom-table-row, .school .custom-table .custom-table-row {
  display: flex;
  border-bottom: 1px solid #D1D5DB;
}
.course .custom-table .custom-table-row:last-child, .enter .custom-table .custom-table-row:last-child, .school .custom-table .custom-table-row:last-child {
  border-bottom: none;
}
.course .custom-table .custom-table-header, .enter .custom-table .custom-table-header, .school .custom-table .custom-table-header {
  background-color: #D5DBF6;
}
.course .custom-table .custom-table-cell, .enter .custom-table .custom-table-cell, .school .custom-table .custom-table-cell {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  color: #071A33;
  text-align: center;
  padding: 15px 12px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
}
.course .custom-table .header-age,
.course .custom-table .cell-age, .enter .custom-table .header-age,
.enter .custom-table .cell-age, .school .custom-table .header-age,
.school .custom-table .cell-age {
  width: 113px;
  flex-shrink: 0;
  border-right: 1px solid #D1D5DB;
}
.course .custom-table .header-age,
.course .custom-table .header-price, .enter .custom-table .header-age,
.enter .custom-table .header-price, .school .custom-table .header-age,
.school .custom-table .header-price {
  font-weight: 500;
}
.course .custom-table .cell-age, .enter .custom-table .cell-age, .school .custom-table .cell-age {
  background-color: #EEECFF;
  font-weight: 300;
}
.course .custom-table .header-price,
.course .custom-table .cell-price, .enter .custom-table .header-price,
.enter .custom-table .cell-price, .school .custom-table .header-price,
.school .custom-table .cell-price {
  flex: 1;
}
.course .custom-table .cell-price, .enter .custom-table .cell-price, .school .custom-table .cell-price {
  background-color: white;
  font-weight: 300;
}
.course .additional-price-container, .enter .additional-price-container, .school .additional-price-container {
  max-width: 520px;
  margin: 24px auto;
}
.course .additional-price-table, .enter .additional-price-table, .school .additional-price-table {
  width: 100%;
  background-color: white;
  border: 1px solid #E5E7EB;
  overflow: hidden;
  margin-top: 16px;
  /* ========================================
     テーブル行
     ======================================== */
  /* ========================================
     テーブルセル
     ======================================== */
  /* ========================================
     注意書きセル
     ======================================== */
  /* ========================================
     レスポンシブ
     ======================================== */
}
.course .additional-price-table .table-row, .enter .additional-price-table .table-row, .school .additional-price-table .table-row {
  width: 100%;
  display: flex;
  border-bottom: 1px solid #E5E7EB;
}
.course .additional-price-table .table-row:last-child, .enter .additional-price-table .table-row:last-child, .school .additional-price-table .table-row:last-child {
  border-bottom: none;
}
.course .additional-price-table .row-purple, .enter .additional-price-table .row-purple, .school .additional-price-table .row-purple {
  background-color: #EEECFF;
}
.course .additional-price-table .row-white, .enter .additional-price-table .row-white, .school .additional-price-table .row-white {
  background-color: white;
}
.course .additional-price-table .row-note, .enter .additional-price-table .row-note, .school .additional-price-table .row-note {
  background-color: #FFFBED;
  border-top: 1px solid #E5E7EB;
  border-bottom: none;
}
.course .additional-price-table .table-cell, .enter .additional-price-table .table-cell, .school .additional-price-table .table-cell {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  color: #071A33;
  padding: 4px 16px;
  display: flex;
  align-items: center;
  min-height: 68px;
}
.course .additional-price-table .table-cell.col_1, .enter .additional-price-table .table-cell.col_1, .school .additional-price-table .table-cell.col_1 {
  display: block;
}
.course .additional-price-table .table-cell p, .enter .additional-price-table .table-cell p, .school .additional-price-table .table-cell p {
  margin: 0;
  line-height: 1.6;
}
.course .additional-price-table .cell-item, .enter .additional-price-table .cell-item, .school .additional-price-table .cell-item {
  width: 120px;
  flex-shrink: 0;
  font-weight: 300;
}
.course .additional-price-table .cell-item p, .enter .additional-price-table .cell-item p, .school .additional-price-table .cell-item p {
  white-space: pre-line;
}
.course .additional-price-table .cell-price, .enter .additional-price-table .cell-price, .school .additional-price-table .cell-price {
  flex: 1;
  font-weight: 500;
  justify-content: left;
  padding-bottom: 2px;
}
.course .additional-price-table .cell-price-right, .enter .additional-price-table .cell-price-right, .school .additional-price-table .cell-price-right {
  justify-content: flex-end;
  text-align: right;
}
.course .additional-price-table .table-note-cell, .enter .additional-price-table .table-note-cell, .school .additional-price-table .table-note-cell {
  width: 100%;
  padding: 16px;
  font-family: "Noto Sans", sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #071A33;
  line-height: 1.8;
}
.course .additional-price-table .table-note-cell p, .enter .additional-price-table .table-note-cell p, .school .additional-price-table .table-note-cell p {
  margin: 0;
}
@media (max-width: 640px) {
  .course .additional-price-table .additional-price-section, .enter .additional-price-table .additional-price-section, .school .additional-price-table .additional-price-section {
    padding: 16px;
  }
  .course .additional-price-table .table-cell, .enter .additional-price-table .table-cell, .school .additional-price-table .table-cell {
    font-size: 13px;
    padding: 4px 12px;
    min-height: 60px;
  }
  .course .additional-price-table .cell-item, .enter .additional-price-table .cell-item, .school .additional-price-table .cell-item {
    width: 110px;
  }
  .course .additional-price-table .table-note-cell, .enter .additional-price-table .table-note-cell, .school .additional-price-table .table-note-cell {
    font-size: 14px;
    padding: 12px;
  }
}
@media (max-width: 480px) {
  .course .additional-price-table .additional-price-section, .enter .additional-price-table .additional-price-section, .school .additional-price-table .additional-price-section {
    padding: 12px;
  }
  .course .additional-price-table .table-cell, .enter .additional-price-table .table-cell, .school .additional-price-table .table-cell {
    font-size: 12px;
    padding: 4px 10px;
    min-height: 56px;
  }
  .course .additional-price-table .cell-item, .enter .additional-price-table .cell-item, .school .additional-price-table .cell-item {
    width: 100px;
  }
  .course .additional-price-table .table-note-cell, .enter .additional-price-table .table-note-cell, .school .additional-price-table .table-note-cell {
    font-size: 13px;
    padding: 10px;
  }
}
@media (min-width: 768px) {
  .course .additional-price-table .additional-price-container, .enter .additional-price-table .additional-price-container, .school .additional-price-table .additional-price-container {
    max-width: 600px;
  }
  .course .additional-price-table .table-cell, .enter .additional-price-table .table-cell, .school .additional-price-table .table-cell {
    font-size: 15px;
    padding: 6px 20px;
  }
  .course .additional-price-table .cell-item, .enter .additional-price-table .cell-item, .school .additional-price-table .cell-item {
    width: 160px;
  }
  .course .additional-price-table .table-note-cell, .enter .additional-price-table .table-note-cell, .school .additional-price-table .table-note-cell {
    font-size: 16px;
    padding: 20px;
  }
}

.closed .step-accordion-header {
  background-color: #fffbed;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
  border: 2px solid #2234da;
  box-shadow: 3px 4px 0px 0px #2234da;
}
.closed .step-accordion-header span {
  color: #2234da;
}
.closed .step-accordion-header svg circle {
  fill: #2234da;
}
.closed .step-accordion-header svg path {
  stroke: #fff;
}
.closed .step-accordion-header:hover span {
  color: #fff;
}
.closed .step-accordion-header:hover svg circle {
  fill: #fff;
}
.closed .step-accordion-header:hover svg path {
  stroke: #2234da;
}

.step-accordion-header {
  width: 100%;
  height: 64px;
  background: #2234DA;
  border: 1px solid #2234DA;
  border-radius: 24px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
@media only screen and (max-width: 490px) {
  .step-accordion-header {
    padding: 16px;
  }
}
.step-accordion-header:hover {
  background: rgb(30.5595238095, 46.7380952381, 195.9404761905);
}

.accordion-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: white;
  text-align: center;
  flex: 1;
}
@media only screen and (max-width: 490px) {
  .accordion-title {
    font-size: 16px;
  }
}

.accordion-toggle-icon {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.accordion-toggle-icon svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}
.accordion-toggle-icon .icon-minus {
  opacity: 1;
}
.accordion-toggle-icon .icon-plus {
  opacity: 0;
}

.step-accordion.closed .accordion-toggle-icon .icon-minus {
  opacity: 0;
}
.step-accordion.closed .accordion-toggle-icon .icon-plus {
  opacity: 1;
}
.step-accordion.closed .step-accordion-content {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  padding-top: 0;
  margin-top: 24px;
}

.exam-accordion-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.exam-accordion-item .txt {
  font-size: 16px;
  line-height: 1.8;
}
.exam-accordion-item .txt .accordion-content-lead-ttl {
  color: #2234da;
  font-weight: 700;
  font-size: 20px;
}
.exam-accordion-item .txt .accordion-content-lead-ttl span {
  font-size: 40px;
}

/* ========================================
   アコーディオンボタン
   ======================================== */
.exam-accordion-btn, .child-accordion-btn {
  width: 100%;
  height: 64px;
  background-color: white;
  border: 2px solid #2234DA;
  border-radius: 90px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
@media only screen and (max-width: 490px) {
  .exam-accordion-btn, .child-accordion-btn {
    padding: 8px 16px;
    height: 50px;
  }
}
.exam-accordion-btn:hover, .child-accordion-btn:hover {
  background-color: #F8F9FF;
}
.exam-accordion-btn:active, .child-accordion-btn:active {
  transform: scale(0.98);
}
.exam-accordion-btn .btn-text, .child-accordion-btn .btn-text {
  flex: 1;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #2234DA;
  text-align: center;
  line-height: 1.6;
  width: 80%;
  word-break: break-word;
}
@media only screen and (max-width: 490px) {
  .exam-accordion-btn .btn-text, .child-accordion-btn .btn-text {
    font-size: 16px;
  }
}
.exam-accordion-btn .btn-icon, .child-accordion-btn .btn-icon {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.exam-accordion-btn .btn-icon svg, .child-accordion-btn .btn-icon svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, transform 0.2s ease;
}
.exam-accordion-btn .btn-icon .icon-minus, .child-accordion-btn .btn-icon .icon-minus {
  opacity: 0;
  transform: rotate(0deg);
}
.exam-accordion-btn .btn-icon .icon-plus, .child-accordion-btn .btn-icon .icon-plus {
  opacity: 1;
  transform: rotate(0deg);
}

/* ========================================
   開いた状態
   ======================================== */
.exam-accordion-item:not(.closed) > .child-accordion-btn > .btn-icon .icon-minus, .exam-accordion-item:not(.closed) > .exam-accordion-btn > .btn-icon .icon-minus, .child-accordion-item:not(.closed) > .child-accordion-btn > .btn-icon .icon-minus, .child-accordion-item:not(.closed) > .exam-accordion-btn > .btn-icon .icon-minus {
  opacity: 1;
}
.exam-accordion-item:not(.closed) > .child-accordion-btn > .btn-icon .icon-plus, .exam-accordion-item:not(.closed) > .exam-accordion-btn > .btn-icon .icon-plus, .child-accordion-item:not(.closed) > .child-accordion-btn > .btn-icon .icon-plus, .child-accordion-item:not(.closed) > .exam-accordion-btn > .btn-icon .icon-plus {
  opacity: 0;
}
.exam-accordion-item:not(.closed) .exam-accordion-content, .child-accordion-item:not(.closed) .exam-accordion-content {
  opacity: 1;
  visibility: visible;
  padding-bottom: 10px;
}

/* ========================================
   閉じた状態
   ======================================== */
.exam-accordion-item.closed .exam-accordion-content, .exam-accordion-item.closed .child-accordion-content, .child-accordion-item.closed .exam-accordion-content, .child-accordion-item.closed .child-accordion-content {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
}

/* ========================================
   アコーディオンコンテンツ
   ======================================== */
.exam-accordion-content, .child-accordion-content {
  width: 100%;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.child-acodion-wrap {
  margin-bottom: 16px;
}

.enter .required-items-container {
  /* ========================================
     カテゴリーバッジ
     ======================================== */
  /* ========================================
     チェックボックス付きアイテム
     ======================================== */
  /* ========================================
     アイテムグループ（注釈付き）
     ======================================== */
  /* ========================================
     レスポンシブ
     ======================================== */
}
.enter .required-items-container .items-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #071A33;
  line-height: 1.8;
  margin: 0;
  text-align: left;
  width: 100%;
}
.enter .required-items-container .category-badge {
  position: relative;
  width: 100%;
  background-color: #fffbed;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
  border: 2px solid #2234DA;
  border-radius: 9999px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
}
.enter .required-items-container .category-badge p {
  font-family: "Noto Sans", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #2234DA;
  line-height: 1;
  margin: 0;
}
.enter .required-items-container .item-with-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 110%;
  padding: 8px 0;
}
.enter .required-items-container .checkbox-icon {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.enter .required-items-container .checkbox-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.enter .required-items-container .item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.enter .required-items-container .item-text {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 15px;
  color: #2234DA;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.enter .required-items-container .item-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.enter .required-items-container .item-note {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #071A33;
  line-height: 1.6;
  margin: 0;
  padding-left: 32px; /* チェックボックス幅(24px) + gap(8px) */
}
@media (max-width: 640px) {
  .enter .required-items-container .required-items-section {
    padding: 16px;
  }
  .enter .required-items-container .required-items-container {
    gap: 14px;
  }
  .enter .required-items-container .items-title {
    font-size: 18px;
  }
  .enter .required-items-container .category-badge {
    padding: 14px 20px;
  }
  .enter .required-items-container .category-badge p {
    font-size: 18px;
  }
  .enter .required-items-container .item-text {
    font-size: 15px;
  }
  .enter .required-items-container .item-note {
    font-size: 14px;
    padding-left: 32px;
  }
  .enter .required-items-container .checkbox-icon {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 480px) {
  .enter .required-items-container .required-items-section {
    padding: 12px;
  }
  .enter .required-items-container .items-title {
    font-size: 17px;
  }
  .enter .required-items-container .category-badge {
    padding: 12px 16px;
  }
  .enter .required-items-container .category-badge p {
    font-size: 17px;
  }
  .enter .required-items-container .item-text {
    font-size: 14px;
  }
  .enter .required-items-container .item-note {
    font-size: 13px;
    padding-left: 30px;
  }
  .enter .required-items-container .checkbox-icon {
    width: 20px;
    height: 20px;
  }
}
.enter .payment-container {
  /* ========================================
     メインタイトル
     ======================================== */
  /* ========================================
     コンテンツ
     ======================================== */
  /* ========================================
     セクションボタン
     ======================================== */
  /* ========================================
     サブタイトル
     ======================================== */
  /* ========================================
     支払い方法リスト
     ======================================== */
  /* ========================================
     支払いアイテム
     ======================================== */
  /* ========================================
     レスポンシブ
     ======================================== */
}
.enter .payment-container .section-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #2234DA;
  line-height: 1.8;
  margin: 0;
  text-align: left;
  display: block;
}
.enter .payment-container .payment-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.enter .payment-container .payment-content:nth-child(3) {
  padding-top: 24px;
}
.enter .payment-container .section-button {
  width: 100%;
  height: 64px;
  background-color: #2234DA;
  border: 2px solid #2234DA;
  border-radius: 90px;
  display: flex;
  align-items: left;
  justify-content: left;
  padding: 16px 24px;
}
.enter .payment-container .section-button p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: white;
  line-height: normal;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}
.enter .payment-container .content-subtitle {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #071A33;
  line-height: 1.8;
  margin: 0;
  text-align: left;
}
.enter .payment-container .payment-list {
  background-color: #E7E6EB;
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.enter .payment-container .payment-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #A8B3C2;
}
.enter .payment-container .payment-item ol {
  list-style: decimal;
  padding-left: 20px;
}
.enter .payment-container .payment-item ol li {
  margin-bottom: 8px;
}
.enter .payment-container .payment-item:last-child {
  border-bottom: none;
}
.enter .payment-container .payment-item-last {
  border-bottom: none;
  padding-bottom: 0;
}
.enter .payment-container .payment-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #2234DA;
  line-height: 1.8;
  margin: 0 0 0;
  white-space: nowrap;
}
.enter .payment-container .payment-description {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #071A33;
  line-height: 1.8;
  margin: 0;
}
.enter .payment-container .payment-description.blue {
  color: #2234da;
  font-weight: bold;
  margin-bottom: 16px;
}
.enter .payment-container .payment-description span {
  color: #2234da;
}
.enter .payment-container .payment-description p {
  margin: 0;
}
.enter .payment-container .payment-description p:not(:last-child) {
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .enter .payment-container .payment-section {
    padding: 16px;
  }
  .enter .payment-container .payment-container {
    max-width: 100%;
  }
  .enter .payment-container .section-title {
    font-size: 18px;
  }
  .enter .payment-container .section-button {
    height: 56px;
    padding: 14px 20px;
  }
  .enter .payment-container .section-button p {
    font-size: 18px;
  }
  .enter .payment-container .content-subtitle {
    font-size: 18px;
  }
  .enter .payment-container .payment-list {
    padding: 20px;
  }
  .enter .payment-container .payment-title {
    font-size: 18px;
  }
  .enter .payment-container .payment-description {
    font-size: 15px;
  }
}
@media (max-width: 480px) {
  .enter .payment-container .payment-section {
    padding: 12px;
  }
  .enter .payment-container .section-title {
    font-size: 17px;
  }
  .enter .payment-container .section-button {
    height: 52px;
    padding: 12px 16px;
  }
  .enter .payment-container .section-button p {
    font-size: 17px;
  }
  .enter .payment-container .content-subtitle {
    font-size: 17px;
  }
  .enter .payment-container .payment-list {
    padding: 16px;
  }
  .enter .payment-container .payment-title {
    font-size: 17px;
  }
  .enter .payment-container .payment-description {
    font-size: 14px;
  }
}
.enter .enter-section .enter-container {
  width: 90%;
  margin: auto;
}
.enter .action-button {
  margin: 24px 0 0;
  width: 100%;
  padding: 8px;
  height: 65px;
}
.enter .action-button .button-label {
  font-size: 18px;
}
.school .bus-service-container {
  /* ========================================
     各時刻表・路線MAPセクション
     ======================================== */
  /* ========================================
     セクションヘッダーバッジ
     ======================================== */
  /* ========================================
     ルートカードグリッド
     ======================================== */
  /* ========================================
     ルートカード
     ======================================== */
  /* ========================================
     ルートボタン
     ======================================== */
  /* ========================================
     注意事項セクション
     ======================================== */
  /* ========================================
     レスポンシブ
     ======================================== */
}
.school .bus-service-container .bus-location-banner {
  position: relative;
  width: 100%;
  height: 81px;
  background-color: #27A0FC;
  border: 6px solid #27A0FC;
  border-radius: 24px;
  overflow: hidden;
  margin-top: 24px;
}
.school .bus-service-container .bus-location-bg {
  position: absolute;
  top: 3.09%;
  right: 0.63%;
  bottom: 4.32%;
  left: 1.25%;
  background-color: #27A0FC;
  border-radius: 16px;
}
.school .bus-service-container .bus-location-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 8px 12px;
}
.school .bus-service-container .bus-icon {
  position: absolute;
  left: 1.88%;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}
.school .bus-service-container .bus-location-header {
  flex: 1;
  padding-left: 70px;
}
.school .bus-service-container .bus-location-header h3 {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: white;
  line-height: 1.4;
  margin: 0;
  text-align: center;
  width: 100%;
}
.school .bus-service-container .bus-download-btn {
  margin-left: 70px;
  margin-top: 4px;
  width: 100%;
  height: auto;
  background-color: white;
  border-radius: 9999px;
  padding: 2px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.school .bus-service-container .bus-download-btn:hover {
  opacity: 0.9;
}
.school .bus-service-container .bus-download-btn span {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #27A0FC;
  line-height: 1.4;
  white-space: nowrap;
}
.school .bus-service-container .arrow-icon {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
}
.school .bus-service-container .schedule-map-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.school .bus-service-container .section-header-badge {
  margin-top: 16px;
  width: 100%;
  height: 42px;
  position: relative;
  background-color: #fffbed;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
  border: 1px solid #2234DA;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 0 16px;
}
.school .bus-service-container .section-header-badge p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #2234DA;
  line-height: 1.8;
  margin: 0;
}
.school .bus-service-container .route-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.school .bus-service-container .route-card {
  background-color: white;
  border: 1px solid #2234DA;
  border-radius: 24px;
  padding: 8px 14px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.school .bus-service-container .route-card-small {
  min-height: 240px;
}
.school .bus-service-container .route-card-large {
  grid-column: 1/-1;
  padding: 8px 14px 24px;
}
.school .bus-service-container .route-description {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #071A33;
  line-height: 1.8;
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.school .bus-service-container .route-card-large .route-description {
  max-width: 286px;
}
.school .bus-service-container .route-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.school .bus-service-container .route-buttons-large {
  max-width: 321px;
}
.school .bus-service-container .route-btn {
  width: 100%;
  height: auto;
  background-color: white;
  border: 1px solid #2234DA;
  border-radius: 50px;
  box-shadow: 3px 4px 0px 0px #2234DA;
  padding: 8px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  margin: 0 auto;
}
.school .bus-service-container .route-btn:hover {
  background-color: #2234da;
}
.school .bus-service-container .route-btn:hover span {
  color: #fff;
}
.school .bus-service-container .route-btn:hover svg path {
  fill: #fff;
}
.school .bus-service-container .route-btn:active {
  transform: translate(3px, 4px);
  box-shadow: 0px 0px 0px 0px #2234DA;
}
.school .bus-service-container .route-btn-large {
  max-width: 100%;
}
.school .bus-service-container .route-btn span {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #2234DA;
  line-height: normal;
  white-space: nowrap;
}
.school .bus-service-container .route-btn svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.school .bus-service-container .notice-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.school .bus-service-container .notice-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #2234DA;
  line-height: 1.8;
  margin: 0;
}
.school .bus-service-container .notice-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
.school .bus-service-container .notice-bullet {
  width: 8px;
  height: 28px;
  position: relative;
  flex-shrink: 0;
}
.school .bus-service-container .notice-bullet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background-color: #2234DA;
  border-radius: 50%;
}
.school .bus-service-container .notice-text {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #071A33;
  line-height: 1.8;
  margin: 0;
  flex: 1;
}
@media (max-width: 640px) {
  .school .bus-service-container .bus-service-section {
    padding: 16px;
  }
  .school .bus-service-container .bus-service-container {
    max-width: 100%;
  }
  .school .bus-service-container .bus-location-banner {
    height: 75px;
  }
  .school .bus-service-container .bus-location-header h3 {
    font-size: 15px;
  }
  .school .bus-service-container .bus-download-btn {
    width: 240px;
    font-size: 15px;
  }
  .school .bus-service-container .bus-download-btn span {
    font-size: 15px;
  }
  .school .bus-service-container .section-header-badge {
    height: 40px;
  }
  .school .bus-service-container .section-header-badge p {
    font-size: 17px;
  }
  .school .bus-service-container .route-description {
    font-size: 15px;
  }
  .school .bus-service-container .route-btn span {
    font-size: 15px;
  }
  .school .bus-service-container .notice-title {
    font-size: 17px;
  }
  .school .bus-service-container .notice-text {
    font-size: 15px;
  }
}
@media (max-width: 480px) {
  .school .bus-service-container .bus-service-section {
    padding: 12px;
  }
  .school .bus-service-container .bus-location-banner {
    height: 70px;
    border-width: 4px;
  }
  .school .bus-service-container .bus-icon {
    width: 50px;
    height: 50px;
  }
  .school .bus-service-container .bus-location-header {
    padding-left: 60px;
  }
  .school .bus-service-container .bus-location-header h3 {
    font-size: 14px;
  }
  .school .bus-service-container .bus-download-btn {
    width: 220px;
    padding: 3px 8px;
  }
  .school .bus-service-container .bus-download-btn span {
    font-size: 14px;
  }
  .school .bus-service-container .arrow-icon {
    width: 20px;
    height: 20px;
  }
  .school .bus-service-container .section-header-badge {
    height: 38px;
  }
  .school .bus-service-container .section-header-badge p {
    font-size: 16px;
  }
  .school .bus-service-container .route-card {
    padding: 6px 12px 20px;
  }
  .school .bus-service-container .route-card-small {
    min-height: 220px;
  }
  .school .bus-service-container .route-description {
    font-size: 14px;
    max-width: 120px;
  }
  .school .bus-service-container .route-card-large .route-description {
    max-width: 100%;
  }
  .school .bus-service-container .route-btn {
    max-width: 130px;
    padding: 4px 24px;
  }
  .school .bus-service-container .route-btn span {
    font-size: 14px;
  }
  .school .bus-service-container .route-btn svg {
    width: 24px;
    height: 24px;
  }
  .school .bus-service-container .notice-title {
    font-size: 16px;
  }
  .school .bus-service-container .notice-text {
    font-size: 14px;
  }
  .school .bus-service-container .notice-bullet {
    width: 7px;
    height: 26px;
  }
  .school .bus-service-container .notice-bullet::before {
    width: 7px;
    height: 7px;
  }
}
@media (max-width: 380px) {
  .school .bus-service-container .route-cards-grid {
    grid-template-columns: 1fr;
  }
  .school .bus-service-container .route-card-small {
    min-height: auto;
  }
  .school .bus-service-container .route-description {
    max-width: 100%;
  }
  .school .bus-service-container .route-btn {
    max-width: 140px;
  }
}
.school .section-center .inner .info-section {
  padding-bottom: 100px;
}
.school .section-center .inner .facility-section, .school .section-center .inner .staff-section, .school .section-center .inner .info-section, .school .section-center .inner .company-section {
  width: 90%;
  margin: auto;
}
.school .section-center .inner .facility-section .sec-header, .school .section-center .inner .staff-section .sec-header, .school .section-center .inner .info-section .sec-header, .school .section-center .inner .company-section .sec-header {
  margin-top: 50px;
  margin-left: 0;
  margin-bottom: 40px;
}
.school .section-center .inner .facility-section .en-ttl, .school .section-center .inner .staff-section .en-ttl, .school .section-center .inner .info-section .en-ttl, .school .section-center .inner .company-section .en-ttl {
  font-size: min(15vw, 88px);
}
.school .section-center .inner .facility-section .news-title, .school .section-center .inner .staff-section .news-title, .school .section-center .inner .info-section .news-title, .school .section-center .inner .company-section .news-title {
  padding-top: 20px;
}
.school .section-center .inner .facility-section .title-icon, .school .section-center .inner .staff-section .title-icon, .school .section-center .inner .info-section .title-icon, .school .section-center .inner .company-section .title-icon {
  position: absolute;
  right: 10px;
  margin-top: -150px;
}
.school .txt {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
.school .schoole-info-item {
  margin-bottom: 16px;
}
.school .schoole-info-item h3 {
  font-size: 20px;
  color: #2234da;
  font-weight: bold;
}
.school .map-wrap {
  width: 100%;
  aspect-ratio: 16/9;
}
.school .map-wrap iframe {
  width: 100%;
  height: 100%;
}
.school .img-wrap img {
  width: 100%;
}
.school .recruit-link-wrap {
  margin-bottom: 50px;
}
.school .recruit-link-wrap h4 {
  text-align: center;
  font-weight: bold;
  color: #2234da;
  margin-top: 16px;
  font-size: 16px;
}
.school .recruit-link-wrap .link-wrap a {
  width: 100%;
  padding: 16px;
  border-radius: 50px;
  border: 1px solid #2234da;
  color: #2234da;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 3px 0 #2234da;
  background-color: #fff;
  display: block;
  text-align: center;
  margin: 16px auto;
  max-width: 400px;
}
.school .recruit-link-wrap .link-wrap a:hover {
  background-color: #2234da;
  color: #fff;
  transition: 0.5s;
}
.school .recruit-link-wrap .link-wrap a:hover svg path {
  stroke: #fff;
  transition: 0.5s;
}

.news-archive-wrapper {
  max-width: 90%;
  margin: auto;
  /* ========================================
     お知らせカード
     ======================================== */
  /* ========================================
     アイコン画像
     ======================================== */
  /* ========================================
     コンテンツエリア
     ======================================== */
  /* ========================================
     タイトル
     ======================================== */
  /* ========================================
     説明文
     ======================================== */
  /* ========================================
     アイキャッチ画像
     ======================================== */
  /* ========================================
     詳しく見るリンク
     ======================================== */
  /* ========================================
     投稿がない場合
     ======================================== */
  /* ========================================
     ページネーション（WP PageNavi）
     ======================================== */
  /* WP PageNaviのスタイル */
  /* 前へ・次へボタン */
  /* 省略記号 */
  /* デフォルトのWordPressページネーション */
  /* ========================================
     レスポンシブ
     ======================================== */
}
.news-archive-wrapper a .news-card-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.news-archive-wrapper .news-card {
  background-color: #E7E6EB;
  border-bottom: 1px solid #D3D3D3;
  width: 100%;
  position: relative;
}
.news-archive-wrapper .news-card:last-child {
  border-bottom: none;
}
.news-archive-wrapper .news-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  width: 100%;
}
.news-archive-wrapper .news-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.news-archive-wrapper .news-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-archive-wrapper .news-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.news-archive-wrapper .news-title-wrapper {
  width: 100%;
}
.news-archive-wrapper .news-title {
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #071A33;
  line-height: 1.8;
  margin: 0;
}
.news-archive-wrapper .news-title a {
  color: #071A33;
  text-decoration: none;
  transition: color 0.2s;
}
.news-archive-wrapper .news-title a:hover {
  color: #2234DA;
}
.news-archive-wrapper .news-excerpt-wrapper {
  width: 100%;
}
.news-archive-wrapper .news-excerpt {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #071A33;
  line-height: 1.8;
  margin: 0;
}
.news-archive-wrapper .news-thumbnail {
  width: 100%;
  background-color: white;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-archive-wrapper .news-thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
}
.news-archive-wrapper .news-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-archive-wrapper .news-thumbnail-placeholder {
  width: 100%;
  aspect-ratio: 16/9.5;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F5F7FF;
}
.news-archive-wrapper .news-thumbnail-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.news-archive-wrapper .news-more-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.news-archive-wrapper .news-more-link a {
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #848484;
  text-decoration: none;
  line-height: 1.8;
  transition: color 0.2s;
}
.news-archive-wrapper .news-more-link a:hover {
  color: #2234DA;
}
.news-archive-wrapper .news-no-posts {
  padding: 60px 20px;
  text-align: center;
}
.news-archive-wrapper .news-no-posts p {
  font-family: "Noto Sans", sans-serif;
  font-size: 18px;
  color: #071A33;
  margin: 0;
}
.news-archive-wrapper .news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 0 0;
  width: 100%;
}
.news-archive-wrapper .news-pagination .wp-pagenavi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.news-archive-wrapper .news-pagination .wp-pagenavi a,
.news-archive-wrapper .news-pagination .wp-pagenavi span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid #2234DA;
  border-radius: 9999px;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 500;
  font-size: 32px;
  color: #2234DA;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
  line-height: 1;
  padding-top: 8px;
  padding-bottom: 7px;
}
.news-archive-wrapper .news-pagination .wp-pagenavi a:hover {
  background-color: #F5F7FF;
}
.news-archive-wrapper .news-pagination .wp-pagenavi .current {
  background-color: #D5DBF6;
  color: #2234DA;
  font-weight: 500;
}
.news-archive-wrapper .news-pagination .wp-pagenavi .previouspostslink,
.news-archive-wrapper .news-pagination .wp-pagenavi .nextpostslink {
  font-size: 16px;
  padding: 0 16px;
  width: auto;
}
.news-archive-wrapper .news-pagination .wp-pagenavi .extend {
  border: none;
  font-size: 24px;
}
.news-archive-wrapper .news-pagination .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.news-archive-wrapper .news-pagination .pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid #2234DA;
  border-radius: 9999px;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 500;
  font-size: 32px;
  color: #2234DA;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
  line-height: 1;
  padding-top: 8px;
  padding-bottom: 7px;
}
.news-archive-wrapper .news-pagination .pagination .page-numbers:hover {
  background-color: #F5F7FF;
}
.news-archive-wrapper .news-pagination .pagination .page-numbers.current {
  background-color: #D5DBF6;
  color: #2234DA;
  font-weight: 500;
}
.news-archive-wrapper .news-pagination .pagination .page-numbers.prev,
.news-archive-wrapper .news-pagination .pagination .page-numbers.next {
  font-size: 16px;
  padding: 0 16px;
  width: auto;
}
.news-archive-wrapper .news-pagination .pagination .page-numbers.dots {
  border: none;
  font-size: 24px;
}
@media (max-width: 768px) {
  .news-archive-wrapper .news-archive-container {
    padding: 0 24px;
  }
  .news-archive-wrapper .news-card-inner {
    padding: 20px;
  }
  .news-archive-wrapper .news-title {
    font-size: 18px;
  }
  .news-archive-wrapper .news-excerpt {
    font-size: 15px;
  }
  .news-archive-wrapper .news-pagination .wp-pagenavi a,
  .news-archive-wrapper .news-pagination .wp-pagenavi span,
  .news-archive-wrapper .news-pagination .pagination .page-numbers {
    width: 44px;
    height: 44px;
    font-size: 28px;
  }
}
@media (max-width: 640px) {
  .news-archive-wrapper .news-archive-wrapper {
    padding: 24px 0;
  }
  .news-archive-wrapper .news-archive-container {
    padding: 0 16px;
  }
  .news-archive-wrapper .news-card-inner {
    padding: 16px;
    gap: 12px;
  }
  .news-archive-wrapper .news-icon {
    width: 40px;
    height: 40px;
  }
  .news-archive-wrapper .news-content {
    gap: 12px;
  }
  .news-archive-wrapper .news-title {
    font-size: 17px;
  }
  .news-archive-wrapper .news-excerpt {
    font-size: 14px;
  }
  .news-archive-wrapper .news-more-link a {
    font-size: 15px;
  }
  .news-archive-wrapper .news-pagination {
    padding: 20px 0 0;
  }
  .news-archive-wrapper .news-pagination .wp-pagenavi a,
  .news-archive-wrapper .news-pagination .wp-pagenavi span,
  .news-archive-wrapper .news-pagination .pagination .page-numbers {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
  .news-archive-wrapper .news-pagination .wp-pagenavi .previouspostslink,
  .news-archive-wrapper .news-pagination .wp-pagenavi .nextpostslink,
  .news-archive-wrapper .news-pagination .pagination .page-numbers.prev,
  .news-archive-wrapper .news-pagination .pagination .page-numbers.next {
    font-size: 14px;
    padding: 0 12px;
  }
}
@media (max-width: 480px) {
  .news-archive-wrapper .news-archive-wrapper {
    padding: 20px 0;
  }
  .news-archive-wrapper .news-archive-container {
    padding: 0;
  }
  .news-archive-wrapper .news-card-inner {
    padding: 12px;
  }
  .news-archive-wrapper .news-icon {
    width: 36px;
    height: 36px;
  }
  .news-archive-wrapper .news-title {
    font-size: 16px;
  }
  .news-archive-wrapper .news-excerpt {
    font-size: 13px;
  }
  .news-archive-wrapper .news-more-link a {
    font-size: 14px;
  }
  .news-archive-wrapper .news-pagination .wp-pagenavi a,
  .news-archive-wrapper .news-pagination .wp-pagenavi span,
  .news-archive-wrapper .news-pagination .pagination .page-numbers {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}

#single-news {
  /* ========================================
     タイトルセクション
     ======================================== */
  /* ========================================
     ヘッダーアイキャッチ画像
     ======================================== */
  /* ========================================
     ヘッダータイトルバー
     ======================================== */
  /* ========================================
     コンテンツセクション
     ======================================== */
  /* ========================================
     コンテンツアイコン
     ======================================== */
  /* ========================================
     コンテンツテキストエリア
     ======================================== */
  /* ========================================
     コンテンツタイトル
     ======================================== */
  /* ========================================
     コンテンツ本文
     ======================================== */
  /* ========================================
     コンテンツ内アイキャッチ画像
     ======================================== */
  /* ========================================
     一覧に戻るボタン
     ======================================== */
  /* ========================================
     レスポンシブ
     ======================================== */
}
#single-news .news-single-container {
  max-width: 90%;
  margin: 0 auto;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
#single-news .news-header-section {
  width: 100%;
}
#single-news .news-header-card {
  background-color: white;
  border: 2px solid #2234DA;
  border-radius: 24px;
  width: 100%;
  position: relative;
  padding: 16px 32px 24px 0;
  overflow: hidden;
}
#single-news .news-header-thumbnail {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: auto;
}
#single-news .news-header-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#single-news .news-header-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#single-news .news-header-title-bar {
  position: relative;
  width: 100%;
  background-color: #fffbed;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
  border: 1px solid #2234DA;
  border-left: 2px solid #2234DA;
  border-radius: 0 8px 8px 0;
  margin-left: -2px;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#single-news .news-header-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #2234DA;
  line-height: normal;
  text-align: center;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#single-news .news-content-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#single-news .news-content-card {
  background-color: #E7E6EB;
  border-bottom: 1px solid #D3D3D3;
  width: 100%;
}
#single-news .news-content-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  width: 100%;
}
#single-news .news-content-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
#single-news .news-content-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#single-news .news-content-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
#single-news .news-content-title-wrapper {
  width: 100%;
}
#single-news .news-content-title {
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #071A33;
  line-height: 1.8;
  margin: 0;
}
#single-news .news-content-body {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #071A33;
  line-height: 1.8;
  width: 100%;
}
#single-news .news-content-body p {
  margin: 0 0 1em 0;
}
#single-news .news-content-body p:last-child {
  margin-bottom: 0;
}
#single-news .news-content-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em 0;
}
#single-news .news-content-body a {
  color: #2234DA;
  text-decoration: underline;
}
#single-news .news-content-body a:hover {
  text-decoration: none;
}
#single-news .news-content-thumbnail {
  width: 100%;
  height: 240px;
  background-color: white;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#single-news .news-content-thumbnail-img {
  max-width: 288px;
  max-height: 125.28px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
#single-news .news-back-button-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#single-news .news-back-button {
  width: 100%;
  height: 64px;
  background-color: white;
  border: 2px solid #2234DA;
  border-radius: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
#single-news .news-back-button:hover {
  background-color: #F5F7FF;
}
#single-news .news-back-button span {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #2234DA;
  line-height: normal;
  text-align: center;
  max-width: 332px;
}
@media (max-width: 768px) {
  #single-news .news-single-container {
    padding: 24px 0;
    gap: 32px;
  }
  #single-news .news-header-card {
    height: 250px;
    padding: 28px 60px 28px 0;
  }
  #single-news .news-header-thumbnail {
    top: 32px;
    width: 260px;
    height: 113px;
  }
  #single-news .news-header-title {
    font-size: 18px;
  }
  #single-news .news-content-inner {
    padding: 20px;
  }
  #single-news .news-content-title {
    font-size: 18px;
  }
  #single-news .news-content-body {
    font-size: 15px;
  }
  #single-news .news-content-thumbnail {
    height: 220px;
  }
  #single-news .news-back-button {
    height: 60px;
  }
  #single-news .news-back-button span {
    font-size: 18px;
  }
}
@media (max-width: 640px) {
  #single-news .news-single-wrapper {
    padding: 24px 0;
  }
  #single-news .news-single-container {
    padding: 0 16px;
    gap: 24px;
  }
  #single-news .news-header-card {
    height: 220px;
    padding: 24px 40px 24px 0;
  }
  #single-news .news-header-thumbnail {
    top: 28px;
    width: 230px;
    height: 100px;
  }
  #single-news .news-header-title-bar {
    margin-right: -32px;
    padding: 8px 20px;
  }
  #single-news .news-header-title {
    font-size: 17px;
  }
  #single-news .news-content-inner {
    flex-direction: column;
    padding: 16px;
    gap: 12px;
  }
  #single-news .news-content-icon {
    width: 40px;
    height: 40px;
  }
  #single-news .news-content-text {
    gap: 12px;
  }
  #single-news .news-content-title {
    font-size: 17px;
  }
  #single-news .news-content-body {
    font-size: 14px;
  }
  #single-news .news-content-thumbnail {
    height: 200px;
  }
  #single-news .news-back-button {
    height: 56px;
  }
  #single-news .news-back-button span {
    font-size: 17px;
  }
}
@media (max-width: 480px) {
  #single-news .news-single-wrapper {
    padding: 20px 0;
  }
  #single-news .news-single-container {
    padding: 0 12px;
    gap: 20px;
  }
  #single-news .news-header-card {
    height: 200px;
    padding: 20px 32px 20px 0;
  }
  #single-news .news-header-thumbnail {
    top: 24px;
    width: 200px;
    height: 87px;
  }
  #single-news .news-header-title-bar {
    margin-right: -24px;
    padding: 6px 16px;
  }
  #single-news .news-header-title {
    font-size: 16px;
  }
  #single-news .news-content-inner {
    padding: 12px;
  }
  #single-news .news-content-icon {
    width: 36px;
    height: 36px;
  }
  #single-news .news-content-title {
    font-size: 16px;
  }
  #single-news .news-content-body {
    font-size: 13px;
  }
  #single-news .news-content-thumbnail {
    height: 180px;
  }
  #single-news .news-content-thumbnail-img {
    max-width: 240px;
    max-height: 105px;
  }
  #single-news .news-back-button {
    height: 52px;
    padding: 12px;
  }
  #single-news .news-back-button span {
    font-size: 16px;
  }
}

.privacy-container {
  width: 90%;
  margin: auto;
}

.wendy-one-regular {
  font-family: "Wendy One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* ========================================
   Header Content
   ======================================== */
.car-deco {
  position: absolute;
  width: 150px;
  z-index: 1;
  animation: carShake 0.3s ease-in-out infinite;
}
.car-deco.car-deco01 {
  margin-left: 4vw;
  margin-top: 128vw;
}
@media only screen and (max-width: 640px) {
  .car-deco.car-deco01 {
    display: none;
  }
}
.car-deco.car-deco02 {
  margin-left: 83vw;
  margin-top: 182vw;
}
@media only screen and (max-width: 640px) {
  .car-deco.car-deco02 {
    display: none;
  }
}
.car-deco.car-deco03 {
  margin-left: 20vw;
  margin-top: 282vw;
}
@media only screen and (max-width: 640px) {
  .car-deco.car-deco03 {
    display: none;
  }
}

.load-deco {
  position: absolute;
  top: 50vh;
}

.header-content {
  position: fixed;
  top: 0;
  width: 100%;
  height: 70px;
  z-index: 999;
}
@media print, screen and (min-width: 1301px) {
  .header-content {
    position: fixed;
    top: 0;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}

/* ========================================
   Border Wrap
   ======================================== */
.border-wrap {
  background-color: #fff;
  border: 1px solid #2234da;
  border-top: none;
  border-left: none;
  border-bottom-right-radius: 24px;
  display: flex;
  align-items: center;
  padding: 10px min(3%, 72px);
}
@media print, screen and (max-width: 1300px) {
  .border-wrap {
    width: 50%;
    max-width: 250px;
    display: block;
    position: absolute;
  }
}

/* ========================================
   Logo Section
   ======================================== */
.logo-section {
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px;
}
@media print, screen and (min-width: 1301px) {
  .logo-section {
    position: relative;
    width: auto;
    height: 93px;
    padding: 16px;
    gap: 8px;
  }
}

.logo-image a:hover {
  opacity: 0.62;
  transition: 0.5s;
}

.logo-placeholder {
  border-radius: 4px;
}
@media (min-width: 1024px) {
  .logo-placeholder {
    max-width: 400px;
    border-radius: 8px;
  }
}

.logo-text {
  font-weight: bold;
  font-size: 11px;
  color: #2234da;
  line-height: 1.2;
}
@media (min-width: 1024px) {
  .logo-text {
    font-size: 21.766px;
    width: 210px;
  }
}
.logo-text p {
  margin: 0;
}

.logo-text-tight {
  letter-spacing: -7.04px;
}

/* ========================================
   Navigation Area
   ======================================== */
.nav-area {
  display: none;
}
@media print, screen and (min-width: 1301px) {
  .nav-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

/* ========================================
   Contact Section
   ======================================== */
@media (min-width: 1024px) {
  .contact-section {
    display: flex;
    gap: 32px;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .phone-section {
    display: flex;
    gap: 8px;
    align-items: center;
  }
}
.phone-section:hover {
  opacity: 0.62;
  transition: 0.5s;
}

.phone-icon svg {
  width: 32px;
}

@media (min-width: 1024px) {
  .phone-number {
    font-family: "Noto Sans", sans-serif;
    font-weight: 900;
    font-size: 28px;
    background: linear-gradient(to bottom, #d73852 25.377%, #fa6d84);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
  }
}
@media print, screen and (max-width: 1600px) {
  .phone-number {
    font-size: 18px;
  }
}

@media (min-width: 1024px) {
  .contact-details {
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    color: #2234da;
    line-height: 1.4;
  }
  .contact-details p {
    margin: 0;
  }
}

@media (min-width: 1024px) {
  .contact-label {
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  .contact-value {
    font-size: 20px;
  }
}

/* ========================================
   CTA Buttons
   ======================================== */
@media (min-width: 1024px) {
  .cta-buttons {
    display: flex;
    gap: 8px;
  }
}

@media (min-width: 1024px) {
  .btn-admission,
  .btn-document {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 18px;
    border: none;
    border-radius: 9999px;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.2s;
    white-space: nowrap;
  }
}
@media print and (min-width: 1024px), screen and (min-width: 1024px) and (max-width: 1600px) {
  .btn-admission,
  .btn-document {
    font-size: 18px;
  }
}

.btn-admission {
  border: 1px solid #d73852;
}
@media (min-width: 1024px) {
  .btn-admission {
    background-color: #d73852;
    color: #fff;
    box-shadow: 0px 3px 0px 0px #9a0c23;
  }
}
.btn-admission:hover {
  background-color: #fff;
  color: #d73852;
  transition: 0.5s;
}
.btn-admission:hover svg circle {
  fill: #FFECEF;
}

@media (min-width: 1024px) {
  .btn-document {
    background-color: #2234da;
    color: #fff;
    border: 1px solid #2234da;
    box-shadow: 0px 3px 0px 0px #2234da;
  }
}
.btn-document:hover {
  background-color: #fff;
  color: #2234da;
  transition: 0.5s;
}

@media (min-width: 1024px) {
  .btn-icon {
    font-size: 24px;
  }
}

/* ========================================
   Main Navigation
   ======================================== */
@media (min-width: 1024px) {
  .main-nav {
    display: flex;
    backdrop-filter: blur(2px);
  }
}

.nav-item-wrapper {
  position: relative;
  height: 100%;
}
.nav-item-wrapper:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-item-wrapper:first-child .nav-item {
  border-left: 1px solid #d3d3d3;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 24px;
  font-weight: bold;
  font-size: 20px;
  color: #071a33;
  text-decoration: none;
  border-right: 1px solid #d3d3d3;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
  height: 100%;
}
@media print, screen and (max-width: 1600px) {
  .nav-item {
    font-size: 18px;
  }
}
.nav-item:hover {
  transition: 0.5s;
  color: #d73852;
}
.nav-item.nav-item-active {
  color: #d73852;
}

/* ========================================
   Dropdown Menu
   ======================================== */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 352px;
  background-color: #fffbed;
  background-image: repeating-linear-gradient(0deg, rgba(34, 52, 218, 0.03) 0px, rgba(34, 52, 218, 0.03) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(90deg, rgba(34, 52, 218, 0.03) 0px, rgba(34, 52, 218, 0.03) 1px, transparent 1px, transparent 20px);
  background-size: 20px 20px;
  border: 1px solid #2234da;
  border-radius: 24px;
  box-shadow: 3px 4px 0px 0px #2234da;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dropdown-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #2234da;
  text-align: center;
  margin-bottom: 8px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-weight: bold;
  font-size: 16px;
  color: #2234da;
  text-decoration: none;
  background-color: rgba(255, 251, 237, 0.8);
  border-bottom: 1px solid #2234da;
  transition: background-color 0.2s, transform 0.2s;
}
.dropdown-item:hover {
  opacity: 0.63;
  transition: 0.5s;
}
.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item-external {
  justify-content: space-between;
  gap: 10px;
}
.dropdown-item-external span {
  flex: 1;
  text-align: center;
}

.external-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* ========================================
   Student Button
   ======================================== */
.btn-students {
  position: absolute;
  right: 66px;
  top: 5px;
  background-color: #fff;
  border: 1px solid #2234da;
  border-radius: 98px;
  padding: 8px;
  font-weight: bold;
  font-size: max(2vw, 18px);
  color: #2234da;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
}
@media print, screen and (min-width: 1301px) {
  .btn-students {
    position: relative;
    right: auto;
    top: auto;
    padding: 32px 16px;
    font-size: 20px;
    margin-left: 10px;
    margin-right: 64px;
    transition: background-color 0.2s;
  }
  .btn-students:hover {
    opacity: 0.63;
    transition: 0.5s;
  }
}

.students-text-desktop {
  display: none;
}
@media print, screen and (min-width: 1301px) {
  .students-text-desktop {
    display: block;
    white-space: nowrap;
  }
}

.students-text-mobile {
  display: block;
}
@media print, screen and (min-width: 1301px) {
  .students-text-mobile {
    display: none;
  }
}

/* ========================================
   Hamburger Menu Button
   ======================================== */
.hamburger-menu {
  position: absolute;
  right: 0;
  top: 0;
  width: 60px;
  height: 100%;
  background: linear-gradient(to bottom, #d73852 25.377%, #fa6d84);
  border: none;
  border-bottom-left-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  cursor: pointer;
  transition: transform 0.2s;
}
@media print, screen and (min-width: 1301px) {
  .hamburger-menu {
    display: none;
  }
}
.hamburger-menu:hover {
  transform: scale(1.05);
}
.hamburger-menu:active {
  transform: scale(0.95);
}
.hamburger-menu.active {
  background: unset;
}
.hamburger-menu.active .hamburger-line:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
  background-color: #D73852;
}
.hamburger-menu.active .hamburger-line:nth-child(2) {
  opacity: 0;
}
.hamburger-menu.active .hamburger-line:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
  background-color: #D73852;
}

.hamburger-line {
  width: 40.5px;
  height: 2px;
  background-color: #fff;
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ========================================
   Mobile Menu Overlay
   ======================================== */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 98;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}
@media print, screen and (min-width: 1301px) {
  .mobile-menu-overlay {
    display: none;
  }
}

/* ========================================
   Mobile Menu Container
   ======================================== */
.mobile-menu-container {
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 100vh;
  max-width: 100vw;
  background-color: #fffbed;
  background-image: repeating-linear-gradient(0deg, rgba(34, 52, 218, 0.03) 0px, rgba(34, 52, 218, 0.03) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(90deg, rgba(34, 52, 218, 0.03) 0px, rgba(34, 52, 218, 0.03) 1px, transparent 1px, transparent 20px);
  background-size: 20px 20px;
  border-left: 3px solid #2234da;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.mobile-menu-overlay.active .mobile-menu-container {
  transform: translateX(0);
}

/* ========================================
   Mobile Menu Header
   ======================================== */
.mobile-menu-header {
  position: relative;
  padding-top: 70px;
  background-color: #fff;
}

.menu-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.menu-logo-image {
  width: 80px;
  height: 35px;
  border-radius: 4px;
  flex-shrink: 0;
  overflow: hidden;
}
.menu-logo-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu-logo-text {
  font-size: 11px;
  font-weight: bold;
  color: #2234da;
  line-height: 1.3;
}
.menu-logo-text p {
  margin: 0;
}

.menu-student-btn {
  position: absolute;
  top: 16px;
  right: 56px;
  background-color: #fff;
  border: 2px solid #2234da;
  border-radius: 9999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: bold;
  color: #2234da;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s;
}
.menu-student-btn:hover {
  background-color: rgba(34, 52, 218, 0.05);
}

.menu-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}
.menu-close-btn:hover {
  background-color: rgba(215, 56, 82, 0.1);
}

/* ========================================
   Mobile Menu Content
   ======================================== */
.mobile-menu-content {
  flex: 1;
  padding: 30px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
  margin: auto;
}
.mobile-menu-content::-webkit-scrollbar {
  width: 8px;
}
.mobile-menu-content::-webkit-scrollbar-track {
  background-color: rgba(34, 52, 218, 0.05);
  border-radius: 4px;
}
.mobile-menu-content::-webkit-scrollbar-thumb {
  background-color: #2234da;
  border-radius: 4px;
}
.mobile-menu-content::-webkit-scrollbar-thumb:hover {
  background-color: rgb(27.119047619, 41.4761904762, 173.880952381);
}

/* ========================================
   Mobile Menu Section
   ======================================== */
.menu-section {
  background-color: #fff;
  border: 2px solid #2234da;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(34, 52, 218, 0.1);
  background-color: #fffbed;
  background-image: repeating-linear-gradient(0deg, rgba(34, 52, 218, 0.03) 0px, rgba(34, 52, 218, 0.03) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(90deg, rgba(34, 52, 218, 0.03) 0px, rgba(34, 52, 218, 0.03) 1px, transparent 1px, transparent 20px);
  padding: 15px;
}
.menu-section.active .toggle-icon svg path:nth-child(4) {
  display: none;
}
.menu-section.active .menu-section-content {
  background-color: #fffbed;
  max-height: 600px;
  padding: 16px;
}

.menu-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px;
  background-color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  background-color: #fffbed;
  background-image: repeating-linear-gradient(0deg, rgba(34, 52, 218, 0.03) 0px, rgba(34, 52, 218, 0.03) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(90deg, rgba(34, 52, 218, 0.03) 0px, rgba(34, 52, 218, 0.03) 1px, transparent 1px, transparent 20px);
}
.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #2234da;
}

.toggle-icon {
  flex-shrink: 0;
}
.toggle-icon svg {
  display: block;
}
.toggle-icon .icon-plus {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toggle-icon .icon-minus {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ========================================
   Mobile Menu Section Content
   ======================================== */
.menu-section-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-item {
  display: block;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: bold;
  color: #2234da;
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 52, 218, 0.2);
  transition: background-color 0.2s, padding-left 0.2s;
}
.menu-item:last-child {
  border-bottom: none;
}
.menu-item:hover {
  opacity: 0.63;
  transition: 0.5s;
}

.menu-item-external {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.menu-item-external svg {
  flex-shrink: 0;
}

/* ========================================
   Simple Menu Section (Direct Links)
   ======================================== */
.menu-section-simple {
  padding: 0;
}

.menu-section-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  width: 100%;
  text-decoration: none;
  transition: background-color 0.2s;
}
.menu-section-link:hover {
  background-color: rgba(34, 52, 218, 0.03);
}

.arrow-icon {
  flex-shrink: 0;
}

/* ========================================
   Mobile Menu Footer
   ======================================== */
.mobile-menu-footer img {
  width: 100%;
}

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 400px) {
  .mobile-menu-container {
    width: 100%;
    max-width: 100vw;
  }
  .section-title {
    font-size: 16px;
  }
  .menu-item {
    font-size: 14px;
  }
}
/* ========================================
   Accessibility
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ========================================
   在校生の方へモーダル
   ======================================== */
/* モーダルオーバーレイ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 20px 20px 0 20px;
  overflow-y: auto;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* モーダルコンテンツ */
.modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}

/* ========================================
   モーダルカード
   ======================================== */
.students-modal-card {
  background-color: white;
  border-radius: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0 24px;
}

/* ========================================
   ヘッダー
   ======================================== */
.students-modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  gap: 0;
}

.header-icon {
  position: relative;
  width: 41px;
  height: 41px;
  flex-shrink: 0;
}

.icon-circle-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 41px;
  height: 41px;
}

.icon-book {
  position: absolute;
  top: 7.59px;
  left: 7.05px;
  width: 25.625px;
  height: 25.625px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(180deg) scaleY(-1);
}

.header-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 24px;
  color: #2234DA;
  line-height: normal;
  margin: 0;
  white-space: nowrap;
}

/* ========================================
   コンテンツグリッド
   ======================================== */
.students-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0 10px;
  width: 100%;
  margin: 0 auto;
}

/* ========================================
   学生カード
   ======================================== */
.student-card {
  position: relative;
  background-color: #fffbed;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
  border: 1px solid #2234DA;
  border-radius: 24px;
  box-shadow: 3px 4px 0px 0px #2234DA;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 222px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.student-card:hover {
  background: unset;
  background-color: #2234da;
}
.student-card:hover .card-title, .student-card:hover .card-description {
  color: #fff;
}

.student-card:active {
  transform: translate(3px, 4px);
  box-shadow: 0px 0px 0px 0px #2234DA;
}

/* カード2と4は上部パディング調整 */
.student-card:nth-child(2) {
  padding-top: 14px;
}

.student-card:nth-child(4) {
  padding-top: 21px;
}

/* ========================================
   カードアイコン
   ======================================== */
.card-icon-circle {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.card-icon-main {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.student-card:nth-child(1) .card-icon-main {
  top: 32px;
}

.student-card:nth-child(3) .card-icon-main {
  top: 32px;
}

/* ========================================
   カードロゴ
   ======================================== */
.card-logo-wrapper {
  width: 123px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Xロゴ */
.card-x-logo {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.x-logo-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
}

.x-logo-icon {
  position: absolute;
  top: 13px;
  left: 12px;
  width: 23px;
  height: 23px;
}

/* ========================================
   カードタイトル
   ======================================== */
.card-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #2234DA;
  line-height: 1.2;
  text-align: center;
  margin: 0;
}

.card-title-small {
  line-height: normal;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   カード説明文
   ======================================== */
.card-description {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #071A33;
  line-height: normal;
  text-align: left;
  margin: 0;
  width: 100%;
}

.student-card:nth-child(2) .card-description {
  max-width: 144px;
}

.student-card:nth-child(4) .card-description {
  letter-spacing: -0.84px;
  max-width: 148px;
}

/* ========================================
   閉じるボタン
   ======================================== */
.modal-close-btn {
  background-color: white;
  border: 1px solid #2234DA;
  border-radius: 24px;
  width: 100%;
  max-width: 320px;
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.modal-close-btn:hover {
  background-color: #F5F7FF;
}

.modal-close-btn span {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #2234DA;
  line-height: none;
  text-align: center;
}

.close-icon {
  width: 22.5px;
  height: 22.5px;
  flex-shrink: 0;
}

/* ========================================
   ボディのスクロール制御
   ======================================== */
body.modal-open {
  overflow: hidden;
}

/* ========================================
   レスポンシブ
   ======================================== */
@media (max-width: 640px) {
  .modal-overlay {
    padding: 16px;
  }
  .modal-content {
    max-width: 100%;
  }
  .header-title {
    font-size: 22px;
  }
  .students-grid {
    max-width: 100%;
    gap: 6px;
  }
  .student-card {
    padding: 20px;
    min-height: 200px;
  }
  .card-title {
    font-size: 15px;
  }
  .card-description {
    font-size: 13px;
  }
  .modal-close-btn {
    max-width: 100%;
    height: 46px;
  }
  .modal-close-btn span {
    font-size: 15px;
  }
}
@media (max-width: 480px) {
  .modal-overlay {
    padding: 12px;
  }
  .header-icon {
    width: 36px;
    height: 36px;
  }
  .icon-circle-bg {
    width: 36px;
    height: 36px;
  }
  .icon-circle-bg svg {
    width: 36px;
    height: 36px;
  }
  .icon-book {
    width: 22px;
    height: 22px;
    top: 7px;
    left: 7px;
  }
  .header-title {
    font-size: 20px;
  }
  .students-grid {
    gap: 6px;
  }
  .student-card {
    padding: 16px;
    min-height: 180px;
    gap: 6px;
  }
  .card-icon-circle {
    width: 36px;
    height: 36px;
  }
  .card-icon-circle svg {
    width: 36px;
    height: 36px;
  }
  .card-icon-main {
    width: 22px;
    height: 22px;
    top: 28px;
  }
  .card-icon-main svg {
    width: 22px;
    height: 22px;
  }
  .card-logo-wrapper {
    width: 100px;
    height: 54px;
  }
  .card-x-logo {
    width: 42px;
    height: 42px;
  }
  .x-logo-circle {
    width: 42px;
    height: 42px;
  }
  .x-logo-circle svg {
    width: 42px;
    height: 42px;
  }
  .x-logo-icon {
    width: 20px;
    height: 20px;
    top: 11px;
    left: 11px;
  }
  .x-logo-icon svg {
    width: 20px;
    height: 20px;
  }
  .card-title {
    font-size: 14px;
  }
  .card-description {
    font-size: 12px;
  }
  .modal-close-btn {
    height: 44px;
  }
  .modal-close-btn span {
    font-size: 14px;
  }
  .close-icon {
    width: 20px;
    height: 20px;
  }
  .close-icon svg {
    width: 20px;
    height: 20px;
  }
}
/* ========================================
   在校生の方へボタン（サンプル用）
   ======================================== */
.btn-students {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: 90px;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
  transition: opacity 0.2s;
  cursor: pointer;
}

.btn-students:hover {
  opacity: 0.9;
}

.students-text-mobile {
  display: none;
}
@media print, screen and (max-width: 1300px) {
  .students-text-mobile {
    display: block;
    text-align: center;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  .btn-students {
    padding: 8px 16px;
  }
}
/* ローディング画面：画面全体を覆う */
#loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #fffbed;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: transform 0.8s cubic-bezier(0.85, 0, 0.15, 1); /* 上に上がる動き */
}

/* ローディングが消える時のクラス */
#loader.is-hidden {
  transform: translateY(-100%);
}

/* メインコンテンツの初期状態（隠しておく） */
.mv-item {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  margin-bottom: 20px;
  text-align: center;
  font-size: 2rem;
}

/* 表示された時のクラス */
.mv-item.is-visible {
  opacity: 1;
}

.loading-txt {
  text-align: center;
  display: flex;
  color: #FFECEF;
  font-size: 80px;
  font-family: "Wendy One", sans-serif;
  text-transform: uppercase;
  -webkit-text-stroke: 2px #2234da;
}
.loading-txt span {
  transform: translateY(20px);
  animation: bounce-txt 0.3s ease infinite alternate;
}

@keyframes bounce-txt {
  to {
    transform: translateY(-20px);
  }
}
.fade-transition {
  transition: all 0.3s ease;
}

.fade-enter, .fade-leave {
  opacity: 0;
}

.percentage {
  position: absolute;
  top: 60px;
  color: #c1c1c1;
  font-size: 0.24rem;
  width: 100%;
  text-align: center;
}

.a1 {
  animation: a_motor_man 0.5s linear infinite;
}

.mo-sprite, .mo-boy, .mo-girl, .mo-mo, .mo-wheel1, .mo-wheel2 {
  background-image: url("../img/common/car.svg");
  background-repeat: no-repeat;
  background-size: 200px;
  position: absolute;
}

.mo-boy {
  background-position: 0 0;
  height: 140px;
  width: 250px;
  top: -104px;
  left: 50px;
  z-index: 1;
}

.mo-wheel1, .mo-wheel2 {
  background-image: url("../img/common/who.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
}

.mo-wheel1 {
  height: 31px;
  width: 31px;
  top: -33px;
  left: 194px;
  z-index: 2;
  animation: rotate 1s linear infinite;
}

.mo-wheel2 {
  height: 31px;
  width: 31px;
  top: -33px;
  left: 80px;
  z-index: 2;
  animation: rotate 1s linear infinite;
}

.smoke {
  display: block;
  height: 80px;
  width: 100px;
  background-image: url(../img/common/gas.svg);
  border-radius: 8px;
  position: absolute;
  margin-left: 250px;
  margin-top: -100px;
  opacity: 0;
}

.smoke_1 {
  animation: a_smoke 1s 0.1s linear infinite;
}

@-webkit-keyframes a_motor_hook {
  0% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.1, 1);
  }
  100% {
    -webkit-transform: scale(1, 1);
  }
}
@-webkit-keyframes a_motor_wrap {
  0% {
    -webkit-transform: rotate(-35deg);
    opacity: 0;
  }
  5% {
    -webkit-transform: rotate(-35deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
}
@-webkit-keyframes a_motor_handle {
  0% {
    -webkit-transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(1px, 1px);
  }
  50% {
    -webkit-transform: translate(-2px, -4px);
  }
  75% {
    -webkit-transform: translate(1px, 0px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
@-webkit-keyframes a_wheel_front {
  0% {
    -webkit-transform: translate(0, 0) scale(1, 1);
  }
  25% {
    -webkit-transform: translate(1px, 1px) scale(1.07, 0.98);
  }
  50% {
    -webkit-transform: translate(-1px, -1px) scale(0.96, 1.06);
  }
  75% {
    -webkit-transform: translate(1px, 0px) scale(1.05, 0.99);
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1, 1);
  }
}
@-webkit-keyframes a_smoke {
  0% {
    -webkit-transform: scale(0.5) translate(0, 0);
    opacity: 0;
  }
  25% {
    -webkit-transform: translate(6px, 0px);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(12px, -4px);
    opacity: 1;
  }
  75% {
    -webkit-transform: translate(18px, -12px);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1) translate(22px, -16px);
    opacity: 0;
  }
}
@-webkit-keyframes a_motor_body {
  0% {
    -webkit-transform: translate(0, 0) scale(1, 1);
  }
  25% {
    -webkit-transform: translate(1px, 1px) scale(1.02, 0.99);
  }
  50% {
    -webkit-transform: translate(-1px, -3px) scale(0.97, 1.03);
  }
  75% {
    -webkit-transform: translate(1px, 0px) scale(1.01, 1);
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1, 1);
  }
}
@-webkit-keyframes a_motor_penguin {
  0% {
    -webkit-transform: translate(0, 0) scale(1, 1);
  }
  25% {
    -webkit-transform: translate(1px, 1px) scale(1.05, 0.98);
  }
  50% {
    -webkit-transform: translate(-1px, -4px) scale(0.96, 1.07);
  }
  75% {
    -webkit-transform: translate(1px, 0px) scale(1.03, 0.99);
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1, 1);
  }
}
@-webkit-keyframes a_motor_man {
  0% {
    -webkit-transform: translate(0, 0) scale(1, 1);
  }
  25% {
    -webkit-transform: translate(0px, 1px) scale(1.02, 0.99);
  }
  50% {
    -webkit-transform: translate(0px, -2px) scale(0.97, 1.03);
  }
  75% {
    -webkit-transform: translate(0px, 0px) scale(1.01, 1);
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1, 1);
  }
}
@-webkit-keyframes a_motor_man_head {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(8deg);
  }
  50% {
    -webkit-transform: rotate(-6deg);
  }
  75% {
    -webkit-transform: rotate(4deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
.mobile-nav-toggle {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-61%);
  width: 8.5rem;
  height: 8.5rem;
  background: #64B5E7;
  padding: 0;
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1001;
  margin: 0;
  transition: all 0.4s ease-in-out;
}
@media only screen and (max-width: 640px) {
  .mobile-nav-toggle {
    display: flex;
  }
}
.mobile-nav-toggle .toggle-icon {
  position: relative;
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 0;
}
.mobile-nav-toggle .toggle-icon span {
  display: inline-block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.4rem;
  background: #FFFFFF;
  transition: all 0.4s ease-in-out;
  transform-origin: center center;
}
.mobile-nav-toggle .toggle-icon span:nth-child(1) {
  top: 0;
}
.mobile-nav-toggle .toggle-icon span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.mobile-nav-toggle .toggle-icon span:nth-child(3) {
  bottom: 0;
}
.mobile-nav-toggle.toggle-active .toggle-icon span:nth-child(1) {
  transform: translateY(1.7rem) rotate(-45deg);
}
.mobile-nav-toggle.toggle-active .toggle-icon span:nth-child(2) {
  display: none;
}
.mobile-nav-toggle.toggle-active .toggle-icon span:nth-child(3) {
  transform: translateY(-1.9rem) rotate(45deg);
}

#mobile-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 998;
  top: -100%;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #82CE98;
  transition: all 0.4s ease-in-out;
}
#mobile-nav .mobile-img {
  width: 100%;
}
#mobile-nav .mobile-img img {
  width: 100%;
}
#mobile-nav .mobile-nav-container {
  position: relative;
  padding: 8rem 3rem 3rem;
}
#mobile-nav .top-sdg {
  padding-top: 10rem;
}
#mobile-nav .mobile-nav-menu {
  position: relative;
  list-style: none;
}
#mobile-nav .mobile-nav-menu > li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.3rem 0;
  list-style: none;
  cursor: pointer;
}
#mobile-nav .mobile-nav-menu > li .menu-link {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
#mobile-nav .mobile-nav-menu > li .menu-link .mobile-link {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}
#mobile-nav .mobile-nav-menu > li .menu-link .sub {
  font-family: notoSansCJKjp-black;
  font-size: 1.8rem;
  color: #FFFFFF;
}
#mobile-nav .mobile-nav-menu > li .menu-link .lead {
  font-family: KozGoPr6N-Bold;
  font-weight: bold;
  color: #FFFFFF;
  font-size: 3rem;
  line-height: 2;
}
#mobile-nav .mobile-nav-menu > li .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.3rem;
  height: 5.3rem;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: #82CE98;
  font-size: 2.4rem;
}

.mobile-nav-overly {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 997;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

/* Mobile Nav body classes */
@media only screen and (max-width: 640px) {
  body.mobile-nav-active {
    overflow: hidden;
  }
}

body.mobile-nav-active #mobile-nav {
  top: 0;
}

.side-menu-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 0 20px;
  /* ========================================
     Header Section
     ======================================== */
  /* ========================================
     Logo Area
     ======================================== */
  /* ========================================
     Phone Area
     ======================================== */
  /* ========================================
     Contact Info
     ======================================== */
  /* ========================================
     Menu List
     ======================================== */
  /* ========================================
     Menu Item Base
     ======================================== */
  /* ========================================
     Accordion Styles
     ======================================== */
  /* Toggle Icon Animation */
  /* ========================================
     Submenu List
     ======================================== */
  /* ========================================
     Link Item (Arrow Icon)
     ======================================== */
  /* ========================================
     Print Styles
     ======================================== */
}
@media only screen and (max-width: 640px) {
  .side-menu-container {
    padding: 0 10px;
  }
}
.side-menu-container .side-menu-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.side-menu-container .header-section {
  width: 100%;
}
.side-menu-container .logo-area {
  height: 93px;
}
@media only screen and (max-width: 640px) {
  .side-menu-container .logo-area {
    gap: 4px;
    padding: 0 7px;
  }
}
.side-menu-container .logo-area img {
  width: 100%;
}
.side-menu-container .logo-text {
  font-weight: bold;
  font-size: 21.766px;
  color: #2234da;
  line-height: 1.2;
}
.side-menu-container .logo-text p {
  margin: 0;
}
@media only screen and (max-width: 640px) {
  .side-menu-container .logo-text {
    font-size: 11px;
  }
}
.side-menu-container .text-tight {
  letter-spacing: -7.04px;
}
.side-menu-container .phone-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.side-menu-container .phone-icon {
  font-size: 48px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 640px) {
  .side-menu-container .phone-icon {
    font-size: 32px;
  }
}
.side-menu-container .phone-number {
  font-family: "Noto Sans", sans-serif;
  font-weight: 900;
  font-size: 40px;
  background: linear-gradient(to bottom, #d73852 25.377%, #fa6d84);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
@media only screen and (max-width: 640px) {
  .side-menu-container .phone-number {
    font-size: 28px;
  }
}
.side-menu-container .contact-info {
  font-family: "Noto Sans", sans-serif;
  font-weight: bold;
  color: #2234da;
  text-align: right;
  line-height: 1.4;
}
.side-menu-container .contact-info .label {
  font-size: 16px;
}
@media only screen and (max-width: 640px) {
  .side-menu-container .contact-info .label {
    font-size: 14px;
  }
}
.side-menu-container .contact-info .value {
  font-size: 21px;
}
@media only screen and (max-width: 640px) {
  .side-menu-container .contact-info .value {
    font-size: 16px;
  }
}
@media only screen and (max-width: 640px) {
  .side-menu-container .contact-info {
    font-size: 14px;
  }
}
.side-menu-container .menu-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-menu-container .menu-item {
  width: 100%;
  border-radius: 24px;
  background-color: #fffbed;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=");
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
  border: 2px solid #2234da;
  box-shadow: 3px 4px 0px 0px #2234da;
  position: relative;
  opacity: 0.95;
}
.side-menu-container .menu-item.open .toggle-icon svg path:nth-child(4) {
  display: none;
}
.side-menu-container .menu-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1px 24px;
  min-height: 44px;
  background: unset;
  transition: opacity 0.3s, transform 0.2s;
}
.side-menu-container .menu-button:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}
.side-menu-container .menu-button:active {
  transform: translateY(0);
}
@media only screen and (max-width: 640px) {
  .side-menu-container .menu-button {
    padding: 16px;
  }
}
.side-menu-container .menu-text {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #2234da;
  text-align: center;
  flex: 1;
  max-width: 260px;
}
@media only screen and (max-width: 640px) {
  .side-menu-container .menu-text {
    font-size: 16px;
  }
}
.side-menu-container .menu-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}
.side-menu-container .icon-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.side-menu-container .accordion-item .accordion-trigger {
  cursor: pointer;
}
.side-menu-container .accordion-item .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.side-menu-container .accordion-item.open .accordion-content {
  max-height: 500px;
  transition: max-height 0.3s ease-in;
}
.side-menu-container .accordion-item.open .toggle-icon .vertical-line {
  opacity: 0;
  transform: rotate(90deg);
}
.side-menu-container .accordion-inner {
  padding: 8px 24px 16px;
}
@media only screen and (max-width: 640px) {
  .side-menu-container .accordion-inner {
    padding: 8px 16px 12px;
  }
}
.side-menu-container .toggle-icon .vertical-line {
  transition: opacity 0.3s, transform 0.3s;
  transform-origin: center;
}
.side-menu-container .submenu-list {
  background-color: #fffbed;
  border-radius: 4px;
}
.side-menu-container .submenu-item {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #2234da;
  padding: 10px;
  border-bottom: 1px solid #2234da;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.2s;
}
.side-menu-container .submenu-item:last-child {
  border-bottom: none;
}
.side-menu-container .submenu-item:hover {
  opacity: 0.63;
  transition: 0.5s;
  cursor: pointer;
}
.side-menu-container .submenu-item p {
  margin: 0;
  line-height: 1.5;
}
@media only screen and (max-width: 640px) {
  .side-menu-container .submenu-item {
    font-size: 14px;
    padding: 8px;
  }
}
.side-menu-container .link-item .menu-button {
  display: flex;
}
.side-menu-container .arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media print {
  .side-menu-container .menu-item {
    box-shadow: none;
    page-break-inside: avoid;
  }
  .side-menu-container .accordion-content {
    max-height: none !important;
  }
}

.side-menu-buttons-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 0 20px;
  /* ========================================
  Button Base Styles
  ======================================== */
  /* ========================================
  Banner Section
  ======================================== */
  /* ========================================
  Responsive Adjustments
  ======================================== */
  /* ========================================
  Print Styles
  ======================================== */
}
@media only screen and (max-width: 640px) {
  .side-menu-buttons-container {
    padding: 0 10px;
  }
}
.side-menu-buttons-container .side-menu-buttons-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.side-menu-buttons-container .side-menu-buttons-content .btn-students {
  position: relative;
  display: block;
  right: unset;
  top: unset;
  padding: 24px 0;
}
.side-menu-buttons-container .side-menu-buttons-content .btn-students:hover {
  opacity: 0.62;
  transition: 0.5s;
}
.side-menu-buttons-container .side-menu-buttons-content .btn-admission, .side-menu-buttons-container .side-menu-buttons-content .btn-document {
  padding: 16px 10%;
  text-align: center;
}
.side-menu-buttons-container .side-menu-buttons-content .btn-admission span, .side-menu-buttons-container .side-menu-buttons-content .btn-document span {
  color: #fff;
  font-size: max(1.5vw, 20px);
}
.side-menu-buttons-container .side-menu-buttons-content .btn-admission:hover span {
  color: #d73852;
}
.side-menu-buttons-container .side-menu-buttons-content .btn-document:hover span {
  color: #2234da;
}
.side-menu-buttons-container .banner-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.side-menu-buttons-container .banner-item {
  width: 100%;
}
.side-menu-buttons-container .banner-item a:hover {
  opacity: 0.63;
  transition: 0.5s;
}
.side-menu-buttons-container .banner-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
@media only screen and (max-width: 640px) {
  .side-menu-buttons-container .banner-section {
    gap: 16px;
  }
  .side-menu-buttons-container .banner-item {
    border-width: 2px;
    border-radius: 12px;
  }
}
@media print {
  .side-menu-buttons-container .btn {
    box-shadow: none;
    page-break-inside: avoid;
  }
  .side-menu-buttons-container .banner-item {
    box-shadow: none;
    page-break-inside: avoid;
  }
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 88px;
  border-radius: 9999px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  position: relative;
  border: none;
  transition: opacity 0.3s, transform 0.2s;
}
.btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
@media only screen and (max-width: 640px) {
  .btn {
    font-size: 20px;
    min-height: 72px;
  }
}

.btn-text {
  white-space: nowrap;
  line-height: 1;
}

/* ========================================
White Button (在校生の方へ)
======================================== */
.btn-white {
  background-color: #fff;
  color: #2234da;
  border: 2px solid #2234da;
  padding: 32px 16px;
}
@media only screen and (max-width: 640px) {
  .btn-white {
    padding: 24px 16px;
  }
}

/* ========================================
Red Button (入校申込はこちら)
======================================== */
.btn-red {
  background-color: #d73852;
  color: #fff;
  box-shadow: 0px 3.947px 0px 0px #9a0c23;
  padding-left: 56px;
  gap: 24px;
}
@media only screen and (max-width: 640px) {
  .btn-red {
    padding-left: 40px;
    gap: 16px;
  }
}

/* ========================================
Blue Button (資料請求はこちら)
======================================== */
.btn-blue {
  background-color: #2234da;
  color: #fff;
  border: 1.33px solid #2234da;
  box-shadow: 0px 3.989px 0px 0px #2234da;
  padding-left: 56px;
  gap: 24px;
}
@media only screen and (max-width: 640px) {
  .btn-blue {
    padding-left: 40px;
    gap: 16px;
  }
}

/* ========================================
Button Icon Styles
======================================== */
.btn-icon {
  flex-shrink: 0;
  width: 50px;
}
@media only screen and (max-width: 640px) {
  .btn-icon {
    width: 40px;
    height: 40px;
  }
}

.icon-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.icon-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.school-icon path {
  stroke: #2234da;
}
.school-icon circle {
  stroke: #2234da;
}

main {
  overflow: clip;
}

.section-contents {
  display: flex;
  align-items: flex-start;
  padding: 200px 0;
  margin-top: -200px;
}
@media (min-width: 1024px) {
  .section-contents {
    margin-top: 0px;
  }
}
@media print, screen and (max-width: 1300px) {
  .section-contents {
    justify-content: center;
    padding-top: 100px;
  }
}
@media only screen and (max-width: 490px) {
  .section-contents {
    padding-bottom: 0;
    margin-top: -150px;
  }
}
.section-contents.subpage {
  padding-top: 250px;
  margin-top: 0;
}
@media print, screen and (max-width: 1300px) {
  .section-contents.subpage {
    padding-top: 150px;
  }
}
@media only screen and (max-width: 490px) {
  .section-contents.subpage {
    padding-top: 150px;
  }
}
.section-contents.subpage #sub-page-ttl {
  padding: 30px;
}
.section-contents.subpage #sub-page-ttl .inner {
  border: none;
  background-image: url(../img/biginner/page-ttl-bg.png);
  height: 190px;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 490px) {
  .section-contents.subpage #sub-page-ttl .inner {
    height: auto;
    aspect-ratio: 21/9.2;
  }
}
.section-contents.subpage #sub-page-ttl .inner .txt-wrap {
  border: 1px solid #2234da;
  border-radius: 24px;
  background-color: #fffbed;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgMCAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjAuNSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=);
  background-size: 98.14px 98.14px;
  background-position: top left;
  background-repeat: repeat;
  display: flex;
  width: 70%;
  padding: 8px 16px;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 4px 0px #2234da;
}
@media only screen and (max-width: 490px) {
  .section-contents.subpage #sub-page-ttl .inner .txt-wrap {
    max-width: 90%;
    width: unset;
  }
}
.section-contents.subpage #sub-page-ttl .inner .txt-wrap h2 {
  font-size: 24px;
  font-weight: bold;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  color: #2234da;
  margin-left: 16px;
}
@media only screen and (max-width: 490px) {
  .section-contents.subpage #sub-page-ttl .inner .txt-wrap h2 {
    font-size: max(5vw, 20px);
  }
}

.section-center {
  max-width: 500px;
  width: 32%;
}
@media print, screen and (max-width: 1300px) {
  .section-center {
    width: 100%;
  }
}

.section-contents .side-menu-buttons-container, .section-contents .side-menu-container {
  position: sticky;
  top: 150px; /* 画面の一番上で固定 */
  z-index: 10;
  height: calc(100vh - 150px);
  overflow-y: scroll;
  padding-bottom: 100px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.section-contents .side-menu-buttons-container::-webkit-scrollbar, .section-contents .side-menu-container::-webkit-scrollbar {
  display: none;
}
@media print, screen and (max-width: 1300px) {
  .section-contents .side-menu-buttons-container, .section-contents .side-menu-container {
    display: none;
  }
}

.sec-header .en-ttl {
  position: absolute;
  color: #FFECEF;
  font-size: 144px;
  z-index: 0;
}
@media only screen and (max-width: 490px) {
  .sec-header .en-ttl {
    font-size: max(20vw, 50px);
  }
}
.sec-header .news-title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: bold;
  padding-top: 60px;
  color: #fff;
  -webkit-text-stroke: 3px #2234da;
  font-size: 40px;
  line-height: 58px;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 490px) {
  .sec-header .news-title {
    text-align: left;
    padding-top: 0px;
  }
}
@media only screen and (max-width: 490px) {
  .sec-header .news-title svg {
    height: 7vw;
    width: auto;
  }
}

/* ========================================
   Container
   ======================================== */
/* タイヤの回転 */
@-webkit-keyframes tireRotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes tireRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* 家族の揺れ */
@-webkit-keyframes familyWave {
  0%, 100% {
    -webkit-transform: translateY(0) rotate(-2deg);
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateY(-10px) rotate(2deg);
    transform: translateY(-10px) rotate(2deg);
  }
}
@keyframes familyWave {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}
/* 先生の浮遊 */
@-webkit-keyframes teacherFloat {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes teacherFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.footer-container {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  /* ========================================
     SNS & Buttons Section
     ======================================== */
  /* ========================================
     Main Content Section
     ======================================== */
  /* ========================================
     Title Section (Blackboard)
     ======================================== */
  /* ========================================
     Action Buttons
     ======================================== */
  /* ========================================
     Footer Info Section
     ======================================== */
  /* ========================================
     Site Footer
     ======================================== */
  /* ========================================
     Scroll to Top Button
     ======================================== */
  /* ========================================
     Tire Decoration
     ======================================== */
  /* ========================================
     Responsive Adjustments
     ======================================== */
  /* ========================================
     Accessibility
     ======================================== */
}
.footer-container .footer-top-deco {
  width: 100%;
}
.footer-container .sns-buttons-section {
  background: linear-gradient(to bottom, rgba(34, 52, 218, 0) 0%, rgba(34, 52, 218, 0) 55%, #2234da 64%);
  padding: 0 0 24px 0;
}
.footer-container .sns-section {
  padding: 0 48px 48px;
  position: relative;
  background-color: #2234da;
}
.footer-container .sns-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.footer-container .sns-icon {
  display: block;
  transition: transform 0.3s ease;
}
.footer-container .sns-icon:hover {
  opacity: 0.62;
  transition: 0.5s;
}
.footer-container .sns-icon svg {
  display: block;
}
.footer-container .sns-buttons {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.footer-container .sns-button {
  background-color: transparent;
  border: 1.5px solid #fff;
  border-radius: 32px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}
@media only screen and (max-width: 640px) {
  .footer-container .sns-button {
    padding: 8px;
  }
}
.footer-container .sns-button:hover {
  background-color: #fff;
}
.footer-container .sns-button:hover span {
  color: #2234da;
}
.footer-container .sns-button .button-text {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
.footer-container .sns-button .button-arrow {
  flex-shrink: 0;
}
.footer-container .main-content-section {
  background-color: #FFFBED;
  background-image: repeating-linear-gradient(0deg, rgba(34, 52, 218, 0.03) 0px, rgba(34, 52, 218, 0.03) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(90deg, rgba(34, 52, 218, 0.03) 0px, rgba(34, 52, 218, 0.03) 1px, transparent 1px, transparent 20px);
  background-size: 20px 20px;
  border-radius: 24px 24px 0 0;
  padding: 48px 32px;
  position: relative;
}
.footer-container .title-section {
  margin-bottom: 24px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 200px;
}
.footer-container .blackboard {
  flex: 1;
  position: relative;
  background-color: #3E9A4F;
  border: 11px solid #E6B063;
  border-radius: 4px;
  padding: 32px 24px;
  margin-left: 140px;
  min-height: 190px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.footer-container .blackboard-content {
  position: relative;
  z-index: 2;
}
.footer-container .blackboard-title {
  font-family: "RocknRoll One", cursive, sans-serif;
  color: #fff;
  text-align: center;
  line-height: 1.4;
}
.footer-container .blackboard-title .title-line-1 {
  display: block;
  font-size: 32px;
  margin-bottom: 8px;
}
@media only screen and (max-width: 640px) {
  .footer-container .blackboard-title .title-line-1 {
    font-size: 26px;
  }
}
.footer-container .blackboard-title .title-line-2 {
  display: block;
  font-size: 38px;
}
@media only screen and (max-width: 640px) {
  .footer-container .blackboard-title .title-line-2 {
    font-size: 30px;
  }
}
.footer-container .blackboard-eraser {
  position: absolute;
  bottom: -4px;
  right: 20px;
  width: 36px;
  height: 16px;
  background-color: #EFC58A;
  border-radius: 2px;
}
.footer-container .blackboard-eraser::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 5px;
  height: 16px;
  background-color: #9F7436;
  border-radius: 0 2px 2px 0;
}
.footer-container .blackboard-shelf {
  position: absolute;
  bottom: -14px;
  left: -11px;
  right: -11px;
  height: 14px;
  background-color: #E6B063;
}
.footer-container .teacher-illustration {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  -webkit-animation: teacherFloat 3s ease-in-out infinite;
  animation: teacherFloat 3s ease-in-out infinite;
}
@media only screen and (max-width: 640px) {
  .footer-container .teacher-illustration {
    transform: scale(0.8);
    transform-origin: top left;
  }
}
.footer-container .secondary-button {
  background-color: #fff;
  color: #2234da;
  border: 2px solid #2234da;
  box-shadow: 3px 4px 0 #2234da;
}
.footer-container .secondary-button:hover {
  background-color: #2234da;
  color: #fff;
}
.footer-container .secondary-button:active {
  box-shadow: 1px 2px 0 #2234da;
}
.footer-container .footer-info-section {
  padding: 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 2;
  background-image: url(../img/common/div_footer.jpg);
  padding-bottom: 100px;
  background-size: cover;
  background-position: center;
  margin-bottom: -50px;
  z-index: 0;
}
@media only screen and (max-width: 640px) {
  .footer-container .footer-info-section {
    padding: 48px 24px;
  }
}
.footer-container .logo-address-box {
  background-color: #fff;
  border: 1px solid #2234da;
  border-radius: 8px;
  padding: 32px 16px;
  text-align: center;
}
@media only screen and (max-width: 640px) {
  .footer-container .logo-address-box {
    padding: 32px 8px;
  }
}
.footer-container .logo-image {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-container .address-text {
  font-size: 16px;
  color: #2234da;
  font-weight: bold;
  line-height: 1.8;
}
.footer-container .address-text p {
  margin: 0;
}
.footer-container .phone-box {
  background-color: #fff;
  border-radius: 9999px;
  padding: 24px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
@media only screen and (max-width: 640px) {
  .footer-container .phone-box {
    padding: 24px 32px;
  }
}
.footer-container .freecall {
  border: 2px solid #2234da;
  box-shadow: 0 3px 0 #2234da;
}
.footer-container .phone-icon {
  flex-shrink: 0;
}
.footer-container .phone-number {
  font-size: 32px;
  font-weight: 900;
  background: linear-gradient(to bottom, #d73852 25%, #fa6d84 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media only screen and (max-width: 640px) {
  .footer-container .phone-number {
    font-size: 26px;
  }
}
.footer-container .contact-info {
  background-color: #FFFBED;
  flex-direction: column;
  padding: 24px 80px;
  gap: 4px;
}
@media only screen and (max-width: 490px) {
  .footer-container .contact-info {
    padding: 24px 0;
  }
}
.footer-container .contact-line {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #2234da;
  font-weight: bold;
}
.footer-container .contact-line .label {
  font-size: 14px;
}
.footer-container .contact-line .number {
  font-size: 20px;
}
.footer-container .site-footer {
  position: relative;
  height: 347px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 8px;
  overflow: hidden;
}
.footer-container .footer-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(39, 95, 241, 0) 44%, #275FF1 49%);
  z-index: 0;
  margin-top: 0px;
}
.footer-container .footer-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #FFFBED;
}
.footer-container .privacy-link {
  font-size: 16px;
  text-decoration: underline;
  margin-bottom: 8px;
  display: inline-block;
  transition: opacity 0.3s ease;
}
.footer-container .privacy-link:hover {
  opacity: 0.8;
}
.footer-container .copyright {
  font-size: 16px;
  line-height: 1.8;
}
.footer-container .family-illustration {
  position: absolute;
  left: 30px;
  bottom: 100px;
  z-index: 1;
  -webkit-animation: familyWave 4s ease-in-out infinite;
  animation: familyWave 4s ease-in-out infinite;
}
@media only screen and (max-width: 640px) {
  .footer-container .family-illustration {
    left: 10px;
    transform: scale(0.7);
  }
}
.footer-container .footer-message {
  position: absolute;
  right: 50px;
  bottom: 120px;
  z-index: 1;
}
@media only screen and (max-width: 640px) {
  .footer-container .footer-message {
    right: 20px;
  }
}
.footer-container .message-text {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 640px) {
  .footer-container .message-text {
    font-size: 16px;
  }
}
.footer-container .scroll-to-top {
  position: absolute;
  right: 40px;
  bottom: 180px;
  width: 64px;
  height: 64px;
  background-color: #FAEFC9;
  border: 6px solid #FAEFC9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.footer-container .scroll-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.footer-container .scroll-to-top:active {
  transform: translateY(-2px);
}
@media only screen and (max-width: 640px) {
  .footer-container .scroll-to-top {
    right: 20px;
    width: 56px;
    height: 56px;
  }
}
.footer-container .scroll-icon {
  text-align: center;
  color: #2234da;
  font-weight: bold;
}
.footer-container .icon-arrow {
  display: block;
  font-size: 18px;
  line-height: 1;
  margin-bottom: 2px;
}
.footer-container .icon-text {
  display: block;
  font-size: 16px;
  line-height: 1;
}
.footer-container .tire-decoration {
  position: absolute;
  left: -26px;
  bottom: 180px;
  z-index: 0;
  opacity: 0.8;
  -webkit-animation: tireRotate 20s linear infinite;
  animation: tireRotate 20s linear infinite;
}
@media only screen and (max-width: 640px) {
  .footer-container .tire-decoration {
    left: -40px;
    transform: scale(0.8);
  }
}
@media only screen and (max-width: 640px) {
  .footer-container .footer-container {
    border-radius: 16px;
    padding-top: 24px;
  }
  .footer-container .sns-section {
    padding: 48px 24px;
  }
  .footer-container .main-content-section {
    padding: 24px 16px;
  }
  .footer-container .blackboard {
    margin-left: 100px;
    padding: 24px 16px;
  }
  .footer-container .action-button {
    padding: 16px 24px;
    height: 76px;
  }
}
.footer-container button:focus,
.footer-container a:focus {
  outline: 3px solid #2234da;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .footer-container * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.footer-container .footer-background {
  background-image: url(../img/common/footer-bg.png);
  background-size: 100% 100%;
}
.footer-container .footer-ill-wrap {
  display: flex;
  margin-top: 70px;
  margin-left: 5%;
}
.footer-container .footer-ill-wrap .footer-illustration {
  width: 30%;
}
.footer-container .footer-ill-wrap .footer-illustration img {
  width: 100%;
}
.footer-container .footer-ill-wrap .footer-txt {
  width: 50%;
}
.footer-container .footer-ill-wrap .footer-txt img {
  width: 100%;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.action-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 48px;
  border-radius: 82px;
  height: 88px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.action-button:hover {
  transform: translateY(-2px);
}
.action-button:active {
  transform: translateY(0);
}
.action-button .button-icon {
  flex-shrink: 0;
}
.action-button .button-label {
  flex: 1;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
@media only screen and (max-width: 640px) {
  .action-button .button-label {
    font-size: 20px;
  }
}
.action-button .button-arrow-circle {
  flex-shrink: 0;
}

.primary-button {
  background-color: #d73852;
  color: #fff;
  box-shadow: 0 3px 0 #9A0C23;
  border: 2px solid #d73852;
}
.primary-button:hover {
  background-color: #fff;
  color: #d73852;
}
.primary-button:hover .button-icon svg circle {
  fill: #FFECEF;
}/*# sourceMappingURL=style.css.map */