@charset "UTF-8";
.sp {
  display: block;
}

.tab,
.pc {
  display: none;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .sp,
  .pc {
    display: none;
  }
  .tab {
    display: block;
  }
}
@media screen and (min-width: 1024px) {
  .sp,
  .tab {
    display: none;
  }
  .pc {
    display: block;
  }
}
html {
  font-size: 16px;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-size: 1rem;
  line-height: 1.5;
  background: rgba(127, 109, 93, 0.07);
  font-family: "Yu Gothic Medium", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial;
  font-feature-settings: "palt";
  letter-spacing: 0.125em;
}

a:link, a:active {
  color: #8db31b;
  text-decoration: underline;
}

a:visited {
  color: #7f6d5d;
  text-decoration: none;
}

a:hover {
  color: #8db31b;
  text-decoration: none;
}

.lp-container {
  width: 100%;
}

h2, h3, h4, h1, h5 {
  /*text-wrap: balance;*/
  overflow-wrap: break-word;
}

#hero {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}
#hero .theme {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", "MS Mincho", serif;
  font-size: 1rem;
  color: #fff;
  position: absolute;
  top: 6rem;
  right: 5rem;
  z-index: 3;
  text-align: left;
}
@media screen and (max-width: 767px) {
  #hero .theme {
    top: 2rem;
    right: 2rem;
  }
}
#hero .theme span {
  display: block;
  margin-bottom: 0.5rem;
}
#hero .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
  filter: blur(3px);
}
#hero .text-bloc {
  position: absolute;
  z-index: 2;
  bottom: 6rem;
  left: 4rem;
  color: #fff;
}
@media screen and (max-width: 767px) {
  #hero .text-bloc {
    bottom: 2rem;
    left: 2rem;
    width: calc(100% - 4rem);
  }
}
#hero .text-bloc h1 {
  font-size: 2.25rem;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", "MS Mincho", serif;
  line-height: 1.5;
  letter-spacing: 0.125rem;
  margin-bottom: 2rem;
  margin-top: 2.4rem;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
#hero .text-bloc .btn a {
  color: #fff;
  text-align: center;
  background: #8db31b;
  line-height: 1.5;
  padding: 1.25rem 6.25rem;
  border-radius: 10px;
  box-sizing: border-box;
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  transform: translateY(0);
  transition: background 0.5s ease, transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 767px) {
  #hero .text-bloc .btn a {
    display: block;
    padding: 1.25rem 0;
  }
}
#hero .text-bloc .btn a:hover {
  background: rgba(141, 179, 27, 0.6);
  transform: translateY(-4px);
}
#hero .text-bloc img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
  #hero .text-bloc img {
    width: 80%;
  }
}

#course-lead {
  padding: 5rem 0;
  background: rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  #course-lead {
    padding: 4rem 0;
  }
}
#course-lead .inner {
  width: 90%;
  max-width: 1280px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 0;
  align-items: center;
}
@media screen and (max-width: 767px) {
  #course-lead .inner {
    grid-template-columns: 1fr;
  }
  #course-lead .inner img {
    order: 2;
  }
  #course-lead .inner .text-bloc {
    order: 1;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #course-lead .inner {
    grid-template-columns: 1fr;
  }
  #course-lead .inner img {
    order: 2;
  }
  #course-lead .inner .text-bloc {
    order: 1;
  }
}
#course-lead .inner img {
  width: auto;
  max-width: 100%;
  height: auto;
}
#course-lead .inner .text-bloc h2, #course-lead .inner .text-bloc h3 {
  color: #8db31b;
  font-size: 1.725rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  font-weight: 700;
}
#course-lead .inner .text-bloc h2 span, #course-lead .inner .text-bloc h3 span {
  display: block;
}
#course-lead .inner .text-bloc h3 {
  margin-top: 4rem;
}
#course-lead .inner .text-bloc p {
  margin-bottom: 0.875rem;
}

#vision {
  padding: 5rem 0;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  #vision {
    padding: 4rem 0;
  }
}
#vision .grid-container {
  width: 90%;
  max-width: 1280px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.25rem;
  align-items: center;
}
@media screen and (max-width: 767px) {
  #vision .grid-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
#vision .grid-container img {
  width: auto;
  max-width: 100%;
  height: auto;
}
#vision .grid-container h2 {
  color: #8db31b;
  font-size: 1.725rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  font-weight: 700;
}
#vision .grid-container h2 span {
  display: block;
}
#vision .grid-container p {
  margin-bottom: 0.875rem;
}

.campain {
  background: url(../images/sale-bg2.webp) 0 0 no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  background-size: cover;
  padding: 5rem 0;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .campain {
    padding: 4rem 0;
  }
}
.campain .inner {
  width: 90%;
  max-width: 1280px;
  margin-inline: auto;
  text-align: center;
}
.campain .inner h2 {
  text-align: center;
  background: linear-gradient(90deg, #f8bfbf, #f9d9b3, #f9f6b3, #c8e6b3, #b3d9f9, #d3b3f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 1.8rem;
  line-height: 1.5;
  font-weight: 700;
  display: inline-block;
}
.campain .inner .lead {
  text-align: center;
  margin-bottom: 2rem;
  color: #fff;
}
.campain .inner .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.25rem;
  align-items: center;
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .campain .inner .grid-container {
    grid-template-columns: 1fr;
  }
}
.campain .inner .grid-container .card {
  border-radius: 10px;
  padding: 2rem;
  border: 1px solid #efefef;
  box-sizing: border-box;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.03);
  background: rgba(255, 255, 255, 0.95);
}
.campain .inner .grid-container .card figure {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  .campain .inner .grid-container .card figure {
    grid-template-columns: 1fr;
  }
}
.campain .inner .grid-container .card figure img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.07);
}
.campain .inner .grid-container .card h3 {
  font-weight: 700;
  line-height: 1.5;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: #8db31b;
}
.campain .inner .grid-container .card .kamei h3 {
  color: #d54f4f;
}
.campain .inner .grid-container .card .sub {
  font-size: 0.8125rem;
}
.campain .inner .grid-container .card .sub .normal-price {
  text-decoration: line-through;
  font-weight: 700;
}
.campain .inner .grid-container .card .tax {
  font-size: 0.875rem;
  font-weight: 700;
}
.campain .inner .grid-container .card .normal-price + .tax {
  font-size: 0.8125rem;
}
.campain .inner .grid-container .card .price {
  color: #d54f4f;
}
.campain .inner .grid-container .card .member .price {
  color: #8db31b;
}
.campain .inner .grid-container .card .sale-price {
  font-size: 2rem;
  font-weight: 700;
}
.campain .inner .grid-container .card .btn {
  margin-top: 1rem;
}
.campain .inner .grid-container .card .btn a {
  transform: translateY(0);
  transition: background 0.3s ease, transfrorm 0.4s ease-in-out;
}
.campain .inner .grid-container .card .btn a:hover {
  filter: opacity(0.7);
  transform: translateY(-2px);
}
.campain .inner .grid-container .card .btn.btn-1 a {
  display: inline-block;
  width: 80%;
  text-align: center;
  line-height: 1.3;
  padding: 0.875rem 0;
  border-radius: 10px;
  background: #d54f4f;
  color: #fff;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .campain .inner .grid-container .card .btn.btn-1 a {
    width: 100%;
    display: block;
  }
}
.campain .inner .grid-container .card .btn.btn-1 a:hover {
  background: rgba(213, 79, 79, 0.6);
}
.campain .inner .grid-container .card .btn.btn-2 a {
  display: inline-block;
  width: 80%;
  text-align: center;
  line-height: 1.3;
  padding: 1rem 0;
  border-radius: 10px;
  background: #8db31b;
  color: #fff;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .campain .inner .grid-container .card .btn.btn-2 a {
    width: 100%;
    display: block;
  }
}
.campain .inner .note {
  width: 70%;
  max-width: 920px;
  margin-inline: auto;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  padding: 2rem;
  box-sizing: border-box;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.07);
  text-align: center;
}
@media screen and (max-width: 767px) {
  .campain .inner .note {
    width: 90%;
  }
}
.campain .inner .note h3 {
  color: #d54f4f;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.campain .inner .note p strong {
  font-weight: 700;
  font-size: 1.125rem;
}
.campain .inner .note p span {
  display: block;
}

.subContainer {
  margin: 4rem 0 2rem 0;
  box-sizing: border-box;
}
.subContainer .inner {
  width: 70%;
  max-width: 920px;
  margin-inline: auto;
  background: #fff;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.03);
  padding: 3rem;
  box-sizing: border-box;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  .subContainer .inner {
    width: 90%;
    padding: 2rem;
  }
}
.subContainer .inner h2 {
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

#about .grid-container {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  #about .grid-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
@media screen and (max-width: 767px) {
  #about .grid-container .course-detail {
    order: 2;
  }
}
#about .grid-container .course-detail h3 {
  margin-top: 4rem;
  margin-bottom: 0.875rem;
  font-weight: 700;
  font-size: 1.25rem;
}
#about .grid-container .course-detail h3:first-child {
  margin-top: 0;
}
#about .grid-container .course-detail h3:before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' fill='%238db31b' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11.998 2.005c5.517 0 9.997 4.48 9.997 9.997 0 5.518-4.48 9.998-9.997 9.998-5.518 0-9.998-4.48-9.998-9.998 0-5.517 4.48-9.997 9.998-9.997zm-5.049 10.386 3.851 3.43c.142.128.321.19.499.19.202 0 .405-.081.552-.242l5.953-6.509c.131-.143.196-.323.196-.502 0-.41-.331-.747-.748-.747-.204 0-.405.082-.554.243l-5.453 5.962-3.298-2.938c-.144-.127-.321-.19-.499-.19-.415 0-.748.335-.748.746 0 .205.084.409.249.557z' fill-rule='nonzero'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  width: 1.25rem;
  height: 1.25rem;
  background-size: contain;
  display: inline-block;
  margin-right: 0.5rem;
  vertical-align: middle;
}
#about .grid-container .course-detail dl {
  margin-bottom: 1.5rem;
}
#about .grid-container .course-detail dl dt {
  font-weight: 700;
  display: inline-block;
  background: rgba(127, 109, 93, 0.02);
  margin-bottom: 0.5rem;
}
#about .grid-container .course-detail dl dd {
  padding-left: 1.5rem;
  box-sizing: border-box;
  font-size: 0.875rem;
}
#about .grid-container .course-detail dl dd ul {
  list-style: none;
}
#about .grid-container .course-detail dl dd ul li {
  margin-bottom: 0.5rem;
}
#about .grid-container .course-detail dl dd ul li:before {
  content: "●";
  font-size: 10px;
  color: #c8e6b3;
  margin-right: 0.5rem;
}
#about .grid-container .course-detail .add {
  color: #8db31b;
  font-weight: 700;
}
#about .grid-container .course-detail .add:before {
  content: "※";
}
#about .grid-container .course-detail .outer li {
  margin-bottom: 3.5rem;
}
#about .grid-container .course-detail .outer li h4 {
  display: inline-block;
  background: linear-gradient(transparent 60%, rgba(141, 179, 27, 0.3) 60%);
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: 1.125rem;
}
#about .grid-container .course-detail .outer li h5 {
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
#about .grid-container .course-detail .outer li .inner {
  list-style: decimal;
  box-shadow: none;
  width: 100%;
  padding: 0;
  margin-top: 1.5rem;
}
#about .grid-container .course-detail .outer li .inner li {
  margin-bottom: 0.5rem;
  margin-left: 1.5rem;
}
#about .grid-container .course-detail .outer li h5 + .inner {
  margin-top: 0.5rem;
  padding: 0;
}
#about .grid-container .course-detail .outer li ol + h5 {
  margin-top: 2rem;
}
#about .grid-container img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
  #about .grid-container img {
    order: 1;
  }
}

.exam table {
  border: 1px solid #ddd;
  width: 100%;
}
.exam table th, .exam table td {
  border: 1px solid #ddd;
  padding: 1rem;
}
.exam table thead {
  background: rgba(127, 109, 93, 0.02);
}
.exam table thead th {
  padding: 1rem;
}

#message {
  margin-top: 1.5rem;
  padding: 5rem 0;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
}
@media screen and (max-width: 767px) {
  #message {
    padding: 4rem 0;
  }
}
#message .inner {
  width: 70%;
  max-width: 920px;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  #message .inner {
    width: 90%;
  }
}
#message .inner figcaption {
  order: 1;
}
@media screen and (max-width: 767px) {
  #message .inner figcaption {
    order: 2;
  }
}
#message .inner img {
  order: 2;
}
@media screen and (max-width: 767px) {
  #message .inner img {
    order: 1;
  }
}
#message .inner #message-area {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  #message .inner #message-area {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
#message .inner #message-area h2 {
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 1rem;
  line-height: 1.5;
  color: #8db31b;
}
#message .inner #message-area img {
  border-radius: 10px;
  width: 100%;
  height: auto;
}
#message .inner #message-area .message-inner {
  letter-spacing: 0.2em;
}
#message .inner #message-area .message-inner p {
  margin-bottom: 1rem;
  font-size: 0.8125rem;
}
#message .inner #message-area .message-inner .name {
  margin-top: 1rem;
  text-align: right;
}
#message #editor-area {
  width: 70%;
  max-width: 920px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
}
@media screen and (max-width: 767px) {
  #message #editor-area {
    grid-template-columns: 1fr;
    gap: 2rem;
    width: 90%;
  }
}
#message #editor-area img {
  border-radius: 10px;
  width: 100%;
  height: auto;
}
#message #editor-area .inner2 h2 {
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 0.625rem;
}
#message #editor-area .inner2 p {
  font-size: 0.8125rem;
  margin-bottom: 0.625rem;
}
#message #editor-area .inner2 .name {
  margin-bottom: 0.875rem;
  font-size: 1rem;
}

#pre-seminar {
  padding: 5rem 0;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  #pre-seminar {
    padding: 4rem 0;
  }
}
#pre-seminar .inner {
  width: 70%;
  max-width: 920px;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  #pre-seminar .inner {
    width: 90%;
  }
}
#pre-seminar .inner .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
}
@media screen and (max-width: 767px) {
  #pre-seminar .inner .grid-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  #pre-seminar .inner .grid-container a {
    width: 100%;
  }
}
#pre-seminar .inner .grid-container img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  aspect-ratio: 1/1;
}
#pre-seminar .inner .grid-container figcaption h2 {
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
#pre-seminar .inner .grid-container figcaption li {
  margin-bottom: 0.5rem;
}
#pre-seminar .inner .grid-container figcaption li a {
  word-break: break-all;
  text-overflow: ellipsis;
}
#pre-seminar .inner .grid-container figcaption .btn {
  margin-top: 1rem;
}
#pre-seminar .inner .grid-container figcaption .btn a {
  display: inline-block;
  border-radius: 10px;
  color: #fff;
  background: #7f6d5d;
  transform: translateY(0);
  line-height: 1;
  padding: 1.25rem 3rem;
  text-decoration: none;
  transition: background 0.4 ease, transform 0.4 cubic-bezier(0.075, 0.82, 0.165, 1);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.07);
}
@media screen and (max-width: 767px) {
  #pre-seminar .inner .grid-container figcaption .btn a {
    display: block;
    padding: 1.25rem 0;
    text-align: center;
  }
}
#pre-seminar .inner .grid-container figcaption .btn a:hover {
  background: rgba(127, 109, 93, 0.6);
  transform: translateY(-2px);
}

#note-info {
  padding: 5rem 0;
  box-sizing: border-box;
  background: rgba(127, 109, 93, 0.07);
}
@media screen and (max-width: 767px) {
  #note-info {
    padding: 4rem 0;
  }
}
#note-info .inner {
  width: 70%;
  max-width: 920px;
  margin-inline: auto;
  padding: 3rem;
  background: #fff;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.03);
  border-radius: 10px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  #note-info .inner {
    width: 90%;
  }
}
#note-info .inner figure {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 3rem;
}
@media screen and (max-width: 767px) {
  #note-info .inner figure {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
#note-info .inner img {
  margin-bottom: 2rem;
  width: 100%;
  height: auto;
  order: 2;
}
#note-info .inner figcaption {
  order: 1;
}
#note-info .inner h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
#note-info .inner .btn {
  margin-top: 1rem;
}
#note-info .inner .btn a {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  border-radius: 10px;
  display: inline-block;
  line-height: 1;
  padding: 1rem 2rem;
  background: #484f47;
}
@media screen and (max-width: 767px) {
  #note-info .inner .btn a {
    display: block;
    padding: 1.25rem 0;
    text-align: center;
  }
}

#recommend {
  padding: 5rem 0;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  #recommend {
    padding: 4rem 0;
  }
}
#recommend .inner {
  width: 70%;
  max-width: 920px;
  margin-inline: auto;
  border-radius: 10px;
  padding: 3rem;
  background: #fff;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.07);
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  #recommend .inner {
    width: 90%;
    padding: 2rem;
  }
}
#recommend .inner h2 {
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 1rem;
  line-height: 1.5;
  color: #8db31b;
}
#recommend .inner figure img {
  float: left;
  margin: 0 1.5rem 1.5rem 0;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  #recommend .inner figure img {
    display: block;
    float: none;
  }
}
#recommend .inner figure figcaption p {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}
#recommend .inner figure figcaption p.name {
  margin-top: 1rem;
  text-align: right;
}
#recommend .inner figure:after {
  content: "";
  clear: both;
  display: table;
  width: 100%;
  height: 0;
}

.cta {
  padding: 1.5rem 0 0;
  box-sizing: border-box;
}
.cta .btn {
  text-align: center;
  width: 60%;
  max-width: 320px;
  margin: 0 auto;
}
.cta .btn a {
  display: block;
  line-height: 1.2;
  color: #fff;
  background: #8db31b;
  text-decoration: none;
  padding: 1.25rem 0;
  border-radius: 10px;
  transform: translateY(0);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: background 0.4s ease, transform 0.4s ease-in-out, box-shadow 0.4s ease;
}
.cta .btn a:hover {
  background: rgba(141, 179, 27, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.1);
}/*# sourceMappingURL=style.css.map */