@charset "UTF-8";
:root {
  --color-black: #333;
  --color-main: #000127;
  --color-pink: #ff9999;
  --color-theme-1: #caa55a;
  --color-theme-2: #3987b3;
  --color-theme-3: #7a5f9c;
  --font-en: "Lora", serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.7;
}

.animated {
  opacity: 0;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

body,
html {
  height: 100%;
  margin: 0;
}

html {
  font-size: 0.1333333333vmin;
}

body {
  font-family: "Noto Sans JP", serif;
  font-weight: 500;
  color: var(--color-black);
  font-size: 30rem;
  line-height: 1.8;
  min-height: 100%;
}

a {
  text-decoration: none;
  color: var(--color-black);
}

.pc {
  display: none;
}

p {
  line-height: 1.8;
  color: var(--color-black);
  font-size: 30rem;
}

footer {
  padding: 100rem 0 30rem;
}
footer .logo-footer {
  width: 390rem;
  margin: 0 auto;
}
footer .wrap-sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 60rem;
}
footer .wrap-sns .sns-item {
  width: 50rem;
  margin: 0 25rem;
}
footer .wrap-sns .sns-item img {
  vertical-align: middle;
}
footer .btn-primary {
  margin-top: 80rem;
}
footer .btn-primary a {
  width: 340rem;
  height: 80rem;
  font-size: 26rem;
  padding: 0 55rem 0 40rem;
}
footer .btn-primary a::after {
  width: 12rem;
  height: 12rem;
  right: 28rem;
}
footer small {
  margin-top: 80rem;
  text-align: center;
  display: block;
  font-size: 22rem;
  color: #b3b3b3;
}

.btn-primary {
  text-align: center;
}
.btn-primary.black a {
  border: 1px solid #666;
}
.btn-primary.black a::after {
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
}
.btn-primary.gold a {
  border: 1px solid var(--color-theme-1);
  color: var(--color-theme-1);
}
.btn-primary.gold a::after {
  border-right: 1px solid var(--color-theme-1);
  border-bottom: 1px solid var(--color-theme-1);
}
.btn-primary.theme-2 a {
  border: 1px solid var(--color-theme-2);
  color: var(--color-theme-2);
}
.btn-primary.theme-2 a::after {
  border-right: 1px solid var(--color-theme-2);
  border-bottom: 1px solid var(--color-theme-2);
}
.btn-primary.theme-3 a {
  border: 1px solid var(--color-theme-3);
  color: var(--color-theme-3);
}
.btn-primary.theme-3 a::after {
  border-right: 1px solid var(--color-theme-3);
  border-bottom: 1px solid var(--color-theme-3);
}
.btn-primary.arrow-left a {
  padding: 0 40rem 0 95rem;
}
.btn-primary.arrow-left a::after {
  content: "";
  position: absolute;
  width: 17rem;
  height: 17rem;
  left: 40rem;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(135deg);
          transform: translateY(-50%) rotate(135deg);
}
.btn-primary a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100rem;
  border-radius: 50rem;
  padding: 0 95rem 0 40rem;
  position: relative;
  font-size: 30rem;
}
.btn-primary a::after {
  content: "";
  position: absolute;
  width: 17rem;
  height: 17rem;
  right: 40rem;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(-45deg);
          transform: translateY(-50%) rotate(-45deg);
}

ul.course-list {
  width: 82%;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  gap: 100rem;
}
ul.course-list li {
  -webkit-transition: 0.4s all ease-out;
  transition: 0.4s all ease-out;
  clip-path: inset(0 100% 0 0);
}
ul.course-list li.active {
  clip-path: inset(0);
}
ul.course-list.theme-1 .area div {
  background: var(--color-theme-1);
}
ul.course-list.theme-1 dl.info dt {
  color: var(--color-theme-1);
  border: 1px solid var(--color-theme-1);
}
ul.course-list.theme-2 .area div {
  background: var(--color-theme-2);
}
ul.course-list.theme-2 dl.info dt {
  color: var(--color-theme-2);
  border: 1px solid var(--color-theme-2);
}
ul.course-list.theme-3 .area div {
  background: var(--color-theme-3);
}
ul.course-list.theme-3 dl.info dt {
  color: var(--color-theme-3);
  border: 1px solid var(--color-theme-3);
}
ul.course-list .thum img {
  border-radius: 6px;
}
ul.course-list .inn {
  padding: 0 40rem;
  margin-top: 35rem;
}
ul.course-list .area {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 10rem 1fr 10rem 1fr 10rem 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10rem;
}
ul.course-list .area div {
  font-size: 28rem;
  border-radius: 100px;
  line-height: 1;
  height: 50rem;
  width: 130rem;
  text-align: center;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
ul.course-list h3.hstyle-couse-list {
  margin-top: 20rem;
  font-size: 36rem;
  line-height: 1.5;
  line-break: anywhere;
}
ul.course-list dl.info {
  margin-top: 30rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 140rem 0 1fr;
  grid-template-columns: 140rem 1fr;
  gap: 20rem 0;
}
ul.course-list dl.info dt {
  text-align: center;
  font-size: 26rem;
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
ul.course-list dl.info dd {
  margin-left: 20rem;
}

/**********************************************************************

 * Media Query For PC

 ***********************************************************************/
@media print, screen and (min-width: 768px) {
  html {
    font-size: 62.5%;
  }
  body {
    letter-spacing: 0.03em;
    font-size: min(24px, 1.6vw);
  }
  .sp {
    display: none;
  }
  .pc {
    display: block;
  }
  p {
    font-size: min(20px, 1.33vw);
    line-height: 1.9;
  }
  footer {
    padding: min(80px, 5.33vw) 0 min(30px, 2vw);
  }
  footer .logo-footer {
    width: min(320px, 21.33vw);
    margin: 0 auto;
  }
  footer .wrap-sns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: min(60px, 4vw);
  }
  footer .wrap-sns .sns-item {
    width: min(40px, 2.67vw);
    margin: 0 min(25px, 1.67vw);
  }
  footer .wrap-sns .sns-item img {
    vertical-align: middle;
  }
  footer .btn-primary {
    margin-top: min(80px, 5.33vw);
  }
  footer .btn-primary a {
    width: min(260px, 17.33vw);
    height: min(60px, 4vw);
    font-size: min(18px, 1.2vw);
    padding: 0 min(55px, 3.67vw) 0 min(40px, 2.67vw);
  }
  footer .btn-primary a::after {
    width: min(8px, 0.53vw);
    height: min(8px, 0.53vw);
    right: min(22px, 1.47vw);
  }
  footer small {
    margin-top: min(80px, 5.33vw);
    font-size: min(16px, 1.07vw);
  }
  .btn-primary {
    text-align: center;
  }
  .btn-primary a {
    -webkit-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
  }
  .btn-primary a:hover {
    -webkit-transform: scale(1.04);
            transform: scale(1.04);
  }
  .btn-primary.black a {
    border: 1px solid #666;
  }
  .btn-primary.black a::after {
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
  }
  .btn-primary.gold a {
    border: 2px solid var(--color-theme-1);
    color: var(--color-theme-1);
    font-size: min(20px, 1.33vw);
  }
  .btn-primary.gold a::after {
    border-right: 2px solid var(--color-theme-1);
    border-bottom: 2px solid var(--color-theme-1);
  }
  .btn-primary.theme-2 a {
    border: 2px solid var(--color-theme-2);
    color: var(--color-theme-2);
    font-size: min(20px, 1.33vw);
  }
  .btn-primary.theme-2 a::after {
    border-right: 2px solid var(--color-theme-2);
    border-bottom: 2px solid var(--color-theme-2);
  }
  .btn-primary.theme-3 a {
    border: 2px solid var(--color-theme-3);
    color: var(--color-theme-3);
    font-size: min(20px, 1.33vw);
  }
  .btn-primary.theme-3 a::after {
    border-right: 2px solid var(--color-theme-3);
    border-bottom: 2px solid var(--color-theme-3);
  }
  .btn-primary.arrow-left a {
    padding: 0 min(40px, 2.67vw) 0 min(55px, 3.67vw);
  }
  .btn-primary.arrow-left a::after {
    content: "";
    position: absolute;
    width: min(10px, 0.67vw);
    height: min(10px, 0.67vw);
    left: min(26px, 1.73vw);
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(135deg);
            transform: translateY(-50%) rotate(135deg);
  }
  .btn-primary a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: min(60px, 4vw);
    border-radius: min(40px, 2.67vw);
    padding: 0 min(55px, 3.67vw) 0 min(40px, 2.67vw);
    position: relative;
    font-size: min(18px, 1.2vw);
  }
  .btn-primary a::after {
    content: "";
    position: absolute;
    width: min(10px, 0.67vw);
    height: min(10px, 0.67vw);
    right: min(26px, 1.73vw);
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(-45deg);
            transform: translateY(-50%) rotate(-45deg);
  }
  ul.course-list {
    width: min(1170px, 78vw);
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0;
  }
  ul.course-list li {
    width: min(360px, 24vw);
    margin: 0 min(15px, 1vw);
    -webkit-transition: 0.4s all ease-out;
    transition: 0.4s all ease-out;
  }
  ul.course-list li:hover {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  ul.course-list .thum img {
    border-radius: 10px;
  }
  ul.course-list .inn {
    margin-top: min(20px, 1.33vw);
    padding: 0 min(20px, 1.33vw);
  }
  ul.course-list .area {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr min(5px, 0.33vw) 1fr min(5px, 0.33vw) 1fr min(5px, 0.33vw) 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: min(5px, 0.33vw);
  }
  ul.course-list .area div {
    font-size: min(16px, 1.07vw);
    border-radius: 100px;
    line-height: 1;
    height: min(30px, 2vw);
    width: 100%;
    text-align: center;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  ul.course-list .area div span {
    position: relative;
    top: -1px;
  }
  ul.course-list h3.hstyle-couse-list {
    margin-top: min(15px, 1vw);
    font-size: min(22px, 1.47vw);
    line-height: 1.5;
  }
  ul.course-list dl.info {
    margin-top: min(15px, 1vw);
    -ms-grid-columns: min(80px, 5.33vw) 0 1fr;
    grid-template-columns: min(80px, 5.33vw) 1fr;
    gap: min(10px, 0.67vw) 0;
  }
  ul.course-list dl.info dt {
    font-size: min(14px, 0.93vw);
  }
  ul.course-list dl.info dd {
    margin-left: min(18px, 1.2vw);
    font-size: min(18px, 1.2vw);
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* タブレット専用のスタイル */
  ul.course-list {
    width: 90%;
  }
  ul.course-list li {
    width: min(420px, 28vw);
    margin: 0 min(15px, 1vw);
  }
}