/* ========== common ======================================== */

:root {
  --primary-font-set: "Inter", YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  --font-montserrat: "Montserrat", sans-serif;
  --font-Mplus-R: "M PLUS Rounded 1c", sans-serif;
  --font-Inter: "Inter", sans-serif;
  --fontSize-XS: clamp(0.75rem, 0.632rem + 0.59vw, 1rem);
  --fontSize-S: clamp(0.875rem, 0.757rem + 0.59vw, 1.125rem);
  --fontSize-R: clamp(1rem, 0.859rem + 0.71vw, 1.3rem);
  --fontSize-M: clamp(1.125rem, 1.007rem + 0.59vw, 1.375rem);
  --fontSize-L: clamp(1.3rem, 1.206rem + 0.47vw, 1.5rem);
  --fontSize-XL: clamp(1.375rem, 1.257rem + 0.59vw, 1.625rem);
  --fontSize-XXL: clamp(1.625rem, 1.507rem + 0.59vw, 1.875rem);
  --fontSize-H2S: clamp(1.875rem, 1.757rem + 0.59vw, 2.125rem);
  --fontSize-H2M: clamp(2.5rem, 2.324rem + 0.88vw, 2.875rem);
  --fontSize-H2L: clamp(2.875rem, 2.757rem + 0.59vw, 3.125rem);
  --dBlue: #1c60cc;
  --dBlue-rgb: 28 96 204;
  --Blue: #0085D7;
  --Blue-rgb: 0 133 215;
  --lBlue: #2e9fe3;
  --lBlue-rgb: 46 159 227;
  --Yellow: #ffde1c;
  --Yellow-rgb: 255 222 28;
  --lYello: #ffee55;
  --lYello-rgb: 255 238 85;
  --Green: #2fb484;
  --Green-rgb: 47 180 132;
  --kids-Yellow: #f4b942;
  --kids-Yellow-rgb: 244 185 66;
  --junior-Blue: #219EBC;
  --junior-Blue-rgb: 33 158 188;
  --advanced-Pink: #EB665E;
  --advanced-Pink-rgb: 235 102 94;
  --sizes-30_10: clamp(0.625rem, 0.037rem + 2.94vw, 1.875rem);
  --sizes-40_20: clamp(1.25rem, 0.662rem + 2.94vw, 2.5rem);
  --sizes-50_30: clamp(1.875rem, 1.287rem + 2.94vw, 3.125rem);
  --sizes-60_40: clamp(2.5rem, 1.912rem + 2.94vw, 3.75rem);
  --sizes-70_50: clamp(3.125rem, 2.537rem + 2.94vw, 4.375rem);
  --sizes-80_60: clamp(3.75rem, 3.162rem + 2.94vw, 5rem);
}

html {
  font-family: var(--primary-font-set);
  font-size: 100%;
  font-optical-sizing: auto;
  line-height: 1.4;
}

body {
  color: #333;
  font-size: var(--fontSize-R);
  font-style: normal;
}

h1 {
  font-family: var(--font-montserrat);
  font-weight: 800;
  font-size: clamp(1.375rem, 0.83rem + 2.73vw, 2.875rem);
}

h2, h3, h4 {
  font-family: var(--font-Mplus-R);
  font-weight: 700;
}

h2 {
  font-size: var(--fontSize-H2S);
}

img {
  max-width: 100%;
}

a {
  transition: .3s;
}

a:hover {
  transition: .3s;
  opacity: 0.6;
}

.fw600 {
  font-weight: 600;
}

.dpN_pc {
  display: none;
}

.dpN_sp {
  display: block;
}

@media screen and (width <= 768px) {
  .dpN_pc {
    display: block;
  }
  .dpN_sp {
    display: none;
  }
}

i.fa-2xs {
  vertical-align: 1px;
}

/* ========== header ======================================== */

header .header_Wrap {
  background-image: url(../images/fv_bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 680px;
  position: relative;
  z-index: 1;
  margin: 0 0 180px;
}

header .header_Wrap::after {
  background: url("../images/img_wave.svg");
  background-repeat: no-repeat;
  background-size: cover;
  bottom: -30px;
  left: 0;
  content: '';
  height: 80px;
  position: absolute;
  width: 100%;
  z-index:-1;
}

header .header_Wrap h1 {
  text-align: center;
  padding: 10px 0;
}

header .header_Wrap h1 img {
  height: clamp(1.875rem, 1.193rem + 3.41vw, 3.75rem); /* 60-30px */
  margin-top: 2%;
}

header .header_Wrap .main_copy {
  width: min(90%, 1200px);
  margin: 90px 0 0 40%;
}

header .header_Wrap .main_copy :is(.mc01, .mc02) {
  width: 60%;
}

header .header_Wrap .main_copy .mc01 {
  margin: 0 0 12px;
}

header .header_Wrap .main_copy img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

header .header_Wrap .main_img {
  width: 750px;
  z-index: -1;
  position: absolute;
  top: 24%;
  left: 8%;
}

header .header_Wrap .sub_copy {
  width: 900px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.4vw;
  position: absolute;
  top: 630px;
  left: 50%;
  transform: translate(-50%, -50%);
}

header .header_Wrap .sub_copy div:nth-of-type(odd) {
  width: 350px;
}

header .header_Wrap .sub_copy div:nth-of-type(even) {
  width: 70px;
}

@media screen and (768px < width <= 940px) {
  header .header_Wrap {
    height: 580px;
    margin: 0 0 140px;
  }
  header .header_Wrap .main_img {
    width: 650px;
    top: 20%;
    left: 6%;
  }
  header .header_Wrap .sub_copy {
    width: 700px;
    top: 520px;
  }
}

@media screen and (width <= 768px) {
  header .header_Wrap {
    height: 480px;
    margin: 0 0 16%;
  }
  header .header_Wrap .main_copy.mc01 {
    top: 16%;
    left: 0;
    transform: translateX(25%);
    margin: auto;
  }
  header .header_Wrap .main_img {
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  header .header_Wrap .sub_copy {
    width: 90%;
    top: 430px;
  }
}

@media screen and (width <= 500px) {
  header .header_Wrap .main_copy {
    margin: 0 auto;
  }
  header .header_Wrap .main_copy :is(.mc01, .mc02) {
    width: 85%;
    margin: 0 auto 8px;
  }
}

/* ========== content ======================================== */
/* ---------- 01 --------------------------------------------- */

section.content1 {
  background: linear-gradient(-7.5deg, rgba(var(--Blue-rgb) /.1) 65%, #fff 0);
  margin: 0 auto;
}

section.content1 div {
  width: min(90%, 1000px);
  margin: 0 auto;
  padding: 0 0 var(--sizes-80_60);
}

section.content1 h2 {
  text-align: center;
  margin: 0 0 var(--sizes-30_10);
}

section.content1 h2 span {
  background: linear-gradient(transparent 60%, #ffee55 60%);
}

section.content1 p {
  margin: 0 0 var(--sizes-40_20);
}

@media screen and (width <= 768px) {
  section.content1 {
    background: linear-gradient(-15deg, rgba(var(--Blue-rgb) /.1) 45%, #fff 0);
  }
}

/* ---------- 02 --------------------------------------------- */

section.content2 {
  padding: var(--sizes-50_30) 0 0;
}

section.content2 .mpecs_system {
  font-family: var(--font-montserrat);
  font-weight: 800;
  font-style: normal;
  font-size: var(--fontSize-H2S);
  text-align: center;
  color: var(--dBlue);
  line-height: 1;
  margin: 0 0 10px;
  letter-spacing: 0.1rem;
}

section.content2 .mpecs_system_Wrap {
  margin: 0 auto;
  text-align: center;
}

section.content2 .mpecs_system_Wrap h2 {
  display: inline-block;
  line-height: 1;
  position: relative;
}

section.content2 .mpecs_system_Wrap h2::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  border-bottom: 8px solid var(--dBlue);
}

section.content2 .mpecs_system_Wrap h2 span {
  font-size: clamp(3.5rem, 3.382rem + 0.59vw, 3.75rem);
  font-family: var(--font-Inter);
  color: var(--dBlue);
  vertical-align: text-bottom;
}

section.content2 .mpecs_system_Wrap p:not(.mpecs_system) {
  font-size: var(--fontSize-M);
  margin: 30px 0 0;
}

section.content2 .method {
  margin: var(--sizes-50_30) auto var(--sizes-30_10);
  padding: var(--sizes-70_50) 0;
  position: relative;
}

section.content2 .method::before {
  position: absolute;
  content: "";
  left: 7%;
  top: 0;
  background-color: var(--dBlue);
  border-radius: var(--sizes-50_30) 0 0 var(--sizes-50_30);
  width: 93%;
  height: 100%;
  z-index: -1;
}

section.content2 .method > div {
  width: min(77vw, 1110px);
  display: grid;
  grid-template-columns: 76px calc(100% - 76px);
  align-items: center;
  gap: 15px;
  background-color: #fff;
  box-shadow: 0px 0px 10px 0px #000000;
  border-radius: var(--sizes-30_10);
  padding: 0 25px;
  margin: 0 auto 24px;
}

section.content2 .method > div:last-of-type {
  margin: 0 auto;
}

section.content2 .method .method_dtl {
  display: grid;
  grid-template-columns: 1fr 2fr;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  width: 98%;
  height: max(150px, 10vh);
}

section.content2 .method .method_name > div {
  display: flex;
  gap: 6px;
  margin: 0 0 6px;
}

section.content2 .method .method_name > div > div {
  border-radius: 100vh;
  padding: 0 16px;
  color: #fff;
  height: 32px;
  display: grid;
  place-content: center;
  font-size: var(--fontSize-S);
}

section.content2 .method .method_label_listen {
  background-color: var(--dBlue);
}

section.content2 .method .method_label_write {
  background-color: var(--lBlue);
}

section.content2 .method .method_label_read {
  background-color: var(--Yellow);
}

section.content2 .method .method_label_speak {
  background-color: var(--Green);
}

section.content2 .method .method_dtl p {
  font-weight: bold;
  font-size: var(--fontSize-L);
}

section.content2 .method_text {
  display: grid;
  place-content: center center;
}

section.content2 .method_img {
  text-align: center;
  margin: 0 3vw;
}

@media screen and (width <= 999px) {
  section.content2 .method > div {
    height: max(150px, 16vh);
  }
  section.content2 .method .method_dtl {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    height: auto;
  }
  section.content2 .method .method_name {
    display: flex;
    gap: 5px;
  }
  section.content2 .method .method_name p {
    margin: 0 0 5px;
  }
}

@media screen and (width <= 768px) {
  section.content2 .method::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    background-color: var(--dBlue);
    border-radius: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  section.content2 .method > div {
    display: block;
    height: 100%;
    padding: 20px;
    width: 88vw;
  }
  section.content2 .method .method_imgWrap {
    text-align: center;
    margin: 0 auto 10px;
  }
  section.content2 .method img {
    width: 60px;
  }
  section.content2 .method .method_name {
    flex-direction: column;
  }
  section.content2 .method .method_name > div {
    justify-content: center;
    order: 2;
  }
  section.content2 .method .method_name p {
    text-align: center;
    order: 1;
    margin: 0;
  }
}

/* ---------- 03 --------------------------------------------- */

section.content3 {
  background-color: rgba(var(--lYello-rgb) / .1);
  padding: var(--sizes-70_50) 20px var(--sizes-50_30);
}
section.content3 > h2 {
  font-size: var(--fontSize-H2M);
  font-weight: 800;
  text-align: center;
  margin: 0 auto var(--sizes-50_30);
}

section.content3 > p {
  font-size: var(--fontSize-L);
  text-align: center;
}

section.content3 .course {
  margin: var(--sizes-80_60) auto var(--sizes-50_30);
  max-width: 800px;
}

section.content3 .course .c-ttlimg {
  position: relative;
  text-align: center;
  margin: 0 auto 2.5%;
}

section.content3 .course .c-ttlimg img {
  border-radius: var(--sizes-40_20);
}

section.content3 .course.c-kids .c-ttlimg img {
  border: 4px solid var(--kids-Yellow);
}

section.content3 .course.c-junior .c-ttlimg img {
  border: 4px solid var(--junior-Blue);
}

section.content3 .course.c-advanced .c-ttlimg img {
  border: 4px solid var(--advanced-Pink);
}

section.content3 .course .c-ttlimg .c-ttl {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  padding: 10px 16px;
  border-radius: 100vh;
  width: 210px;
  font-size: var(--fontSize-L);
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

section.content3 .course.c-kids .c-ttlimg .c-ttl {
  background-color: var(--kids-Yellow);
}

section.content3 .course.c-junior .c-ttlimg .c-ttl {
  background-color: var(--junior-Blue);
}

section.content3 .course.c-advanced .c-ttlimg .c-ttl {
  background-color: var(--advanced-Pink);
}

section.content3 .course .c-ttlimg .c-ttl .c-age {
  font-size: var(--fontSize-S);
  font-weight: normal;
}

section.content3 .course .c-ttlimg + h5 {
  font-weight: 600;
  text-align: center;
  margin: 0 auto 1.5%;
}

section.content3 .course.c-kids .c-ttlimg + h5 {
  color: var(--kids-Yellow);
}

section.content3 .course.c-junior .c-ttlimg + h5 {
  color: var(--junior-Blue);
}

section.content3 .course.c-advanced .c-ttlimg + h5 {
  color: var(--advanced-Pink);
}

section.content3 .course p:has(+ .c-point) {
  margin: 0 0 5%;
}

section.content3 .course .c-point {
  display: flex;
  margin: 0 0 5%;
}

section.content3 .course .c-point div:first-of-type {
  color: #fff;
  display: grid;
  place-content: center;
  padding: 3.77vh 0.84vw;
  font-weight: 600;
  border-radius: 10px;
  position: relative;
  margin: 0 calc(19px + 0.84vw) 0 0;
}

section.content3 .course.c-kids .c-point div:first-of-type {
  background-color: var(--kids-Yellow);
}

section.content3 .course.c-junior .c-point div:first-of-type {
  background-color: var(--junior-Blue);
}

section.content3 .course.c-advanced .c-point div:first-of-type {
  background-color: var(--advanced-Pink);
}

section.content3 .course .c-point div:first-of-type::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px;
  border-radius: 0 0 15px 0;
  transform: translateY(-50%) translate3d(0, 0, 0) scaleY(0.4) rotate(315deg);
  right: -19px;
  top: 50%;
}

section.content3 .course.c-kids .c-point div:first-of-type::after {
  border-color: transparent var(--kids-Yellow) var(--kids-Yellow) transparent;
}

section.content3 .course.c-junior .c-point div:first-of-type::after {
  border-color: transparent var(--junior-Blue) var(--junior-Blue) transparent ;
}

section.content3 .course.c-advanced .c-point div:first-of-type::after {
  border-color: transparent var(--advanced-Pink) var(--advanced-Pink) transparent ;
}

section.content3 .course .c-point ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: li;
}

section.content3 .course .c-point ol li {
  position: relative;
  padding-left: 2rem;
  line-height: 1.4;
  font-weight: 600;
}

section.content3 .course .c-point ol li:not(:first-child) {
  margin-top: 0.5em;
}

section.content3 .course .c-point ol li::before {
  counter-increment: li;
  content: counter(li);
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: var(--fontSize-S);
  color: #fff;
  line-height: 26px;
  text-align: center;
}

section.content3 .course.c-kids .c-point ol li::before {
  background-color: var(--kids-Yellow);
}

section.content3 .course.c-junior .c-point ol li::before {
  background-color: var(--junior-Blue);
}

section.content3 .course.c-advanced .c-point ol li::before {
  background-color: var(--advanced-Pink);
}

section.content3 .course .c-price {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin: 0 auto;
}

section.content3 .course.c-kids .c-price {
  border: 2px solid var(--kids-Yellow);
}

section.content3 .course.c-junior .c-price {
  border: 2px solid var(--junior-Blue);
}

section.content3 .course.c-advanced .c-price {
  border: 2px solid var(--advanced-Pink);
}

section.content3 .course .c-price h5 {
  text-align: center;
  font-weight: 500;
  margin: 0 0 1.6vh;
}

section.content3 .course .c-price > div {
  margin: 0 0 1.2vh;
}

section.content3 .course .c-price .cp-box01 ul, .cp-box02, .cp-box02-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

section.content3 .course .c-price .cp-box01 ul, .cp-box02 {
  gap: 20px;
}

section.content3 .course .c-price .cp-box02-2 {
  gap: 10px;
}

section.content3 .course .c-price ul li span {
  font-weight: 600;
}

section.content3 .course .c-price .c-price-bg {
  background-color: #333;
  color: #fff;
  padding: 6px 25px;
  font-size: var(--fontSize-S);
}

section.content3 .course .c-price .c-price-bg + p {
  font-weight: 600;
}

section.content3 .course .c-price .c-note {
  font-size: var(--fontSize-XS);
  text-align: center;
}

section.content3 .c-flow {
  width: min(100%, 800px);
  background: repeating-linear-gradient(-45deg, #F5FBFF, #F5FBFF 9px, #fff 9px, #fff 18px);
  border: 6px solid var(--Blue);
  border-radius: clamp(1.875rem, 1.287rem + 2.94vw, 3.125rem);
  padding: clamp(1.25rem, 0.779rem + 2.35vw, 2.25rem) 15px clamp(0.313rem, -0.599rem + 4.56vw, 2.25rem);
  text-align: center;
  margin: 0 auto;
}

section.content3 .c-flow > p {
  margin: 0 0 2.5%;
}

section.content3 .c-flow div p {
  width: min(94%, 500px);
  background-color: var(--Blue);
  margin: 0 auto clamp(1.563rem, 1.416rem + 0.73vw, 1.875rem);
  color: #fff;
  font-size: var(--fontSize-M);
  padding: clamp(0.938rem, 0.791rem + 0.73vw, 1.25rem);
  border-radius: 10px;
  line-height: 1.2;
}

section.content3 .c-flow div p {
  position: relative;
}

section.content3 .c-flow div p:not(:last-of-type):after {
  content: '';
  width:0;
  height:0;
  border-style:solid;
  border-width: 18px 15px 0 15px;
  border-color: var(--Blue) transparent transparent transparent;
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
}

@media screen and (width <= 768px) {
  section.content3 .course .c-point {
    display: block;
  }
  section.content3 .course .c-point div:first-of-type {
    padding: 0.6vh 10px;
  }
  section.content3 .course .c-point div:first-of-type {
    margin: 0 0 calc(19px + 0.84vw);
  }
  section.content3 .course .c-point div:first-of-type::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px;
    border-radius: 0 0 15px 0;
    transform: translateX(-50%) translate3d(0, 0, 0) scaleX(0.4) rotate(45deg);
    left: 50%;
    top: 10px;
  }
  section.content3 .course .c-point ol li::before {
    top: -2px;
  }
  section.content3 .course .c-price .cp-box01 ul, .cp-box02 {
    display: block;
  }
  section.content3 .course .c-price .cp-box02-2 {
    justify-content: flex-start;
  }
  section.content3 .course .c-price .cp-box02-2:first-of-type {
    margin: 0 0 10px;
  }
}

/* ---------- 04 --------------------------------------------- */

section.content4 {
  background-color: var(--Green);
  padding: var(--sizes-50_30) 0 var(--sizes-70_50);
}

section.content4 > p {
  font-family: var(--font-Mplus-R);
  font-size: var(--fontSize-XL);
  font-weight: 600;
}

section.content4 > p span {
  font-family: var(--font-montserrat);
}

section.content4 h2 {
  font-family: var(--font-montserrat);
  font-size: var(--fontSize-H2S);
  margin: 0 auto var(--sizes-40_20);
}

section.content4 h2 span {
  font-size: clamp(3.375rem, 3.199rem + 0.88vw, 3.75rem);
}

section.content4 > p, section.content4 h2 {
  color: #fff;
  line-height: 1;
  text-align: center;
}

section.content4 .feature {
  background-color: #fff;
  padding: clamp(1.25rem, 0.956rem + 1.47vw, 1.875rem);
  border-radius: var(--sizes-40_20);
  width: min(90%, 1200px);
  margin: 0 auto;
}

section.content4 .feature > div {
  display: flex;
  margin: 0 auto 20px;
  width: min(90%, 1015px);
  gap: 20px;
}

section.content4 .feature > div:nth-child(even) {
  flex-direction: row-reverse;
}

section.content4 .feature div > img {
  width: 415px;
  height: 222px;
}

section.content4 .feature div > div {
  width: calc(100% - 415px);
}

section.content4 .feature div > div h5 {
  font-weight: 600;
  margin: 40px 0 20px;
}

section.content4 .feature div > div p {
  font-weight: 300;
}

@media screen and (width <= 768px) {
  section.content4 .feature > div {
    display: block;
  }
  section.content4 .feature div:nth-child(even) {
    display: block;
  }
  section.content4 .feature div > img {
    width: 100%;
    height: auto;
  }
  section.content4 .feature div > div {
    width: 100%;
  }
  section.content4 .feature div > div h5 {
    margin: 15px 0 10px;
  }
}

/* ---------- 05 --------------------------------------------- */

section.content5 {
  background: linear-gradient(rgba(255 255 255 /.8),  rgba(255 255 255 /.8)), url("../images/footer_bg.png"); 
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: var(--sizes-60_40) 0 var(--sizes-50_30);
}

section.content5 > div {
  width: min(94%, 1000px);
  margin: 0 auto;
}

section.content5 a:has(.cta) {
  width: min(94%, 1000px);
  display: block;
  margin: 0 auto -20px;
  text-align: center;
}

section.content5 .cta {
  width: min(100%, 1000px);
  background-color: var(--Green);
  color: #fff;
  font-family: var(--font-Mplus-R);
  font-size: clamp(1.375rem, 0.669rem + 3.53vw, 2.875rem);
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  margin: 0 auto 50px;
  padding: var(--sizes-30_10) 10px;
  border-radius: 100vh;
  border-bottom: 12px solid #097f44;
}

section.content5 .cta p {
  position: relative;
}

section.content5 .cta p::after {
  font: var(--fa-font-solid);
  content: '\f105';
  font-size: clamp(2.188rem, 1.865rem + 1.62vw, 2.875rem);
  position: absolute;
  top: 50%;
  right: var(--sizes-30_10);
  transform: translateY(-50%);
}

section.content5 .cta i {
  counter-reset: #fff;
  margin: 0 min(5%, 45px);
}

section.content5 .calendar > p {
  text-align: center;
  font-size: var(--fontSize-S);
  padding: 0 0 10px;
}

section.content5 .calendar > div {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

section.content5 .access {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  font-size: var(--fontSize-S);
  margin: 40px auto 0;
}

section.content5 .access .map {
  width: 500px;
  margin: 0;
}

section.content5 .access .map iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

section.content5 .access .address p {
  margin: 0 0 clamp(0.625rem, 0.331rem + 1.47vw, 1.25rem);
}

section.content5 .access .mail i {
  color: #333;
}

@media screen and (width <= 768px) {
  section.content5 .access {
    display: block;
    text-align: center;
  }
  section.content5 .access .map {
    width: 100%;
    margin: 0 0 20px;
  }
}

/* ========== footer ======================================== */

footer div {
  background-color: var(--dBlue);
  text-align: center;
  color: #fff;
  font-size: var(--fontSize-XS);
  font-weight: 300;
  padding: 3.3vh 1.65vh;
}

footer div ul {
  display: flex;
  justify-content: center;
  margin: 10px auto 20px;
}

footer div ul li {
  border-left: 1px solid #fff;
  padding: 0 var(--sizes-40_20);
}

footer div ul li:last-of-type {
  border-right: 1px solid #fff;
}

/* ========== campaign 2025 spring ======================================== */

.campaign {
  --cnpPink: #F25680;
  --cnpGreen: #46ADB5;
  --cnpBlue: #0085D7;
  font-size: clamp(16px, 0.882rem + 0.59vw, 20px);
}

.campaign > div {
  width: min(90%, 1000px);
  margin-inline: auto;
  margin-bottom: 2em;
  border: 4px solid var(--cnpPink);
  border-radius: 1em;
  padding: 1em 1.4em;
  background-color: rgb(242 86 128 / 0.06 );
}

.campaign h3 {
  text-align: center;
  color: var(--cnpPink);
  font-size: 1.4em;
  margin-bottom: 0.25em;
}

.campaign h4 {
  text-align: center;
  margin-bottom: 0.8em;
  font-weight: normal;
}

@media (width > 500px) {
  .campaign .dpn_pc {
    display: none;
  }
}

@media (width <= 500px) {
  .campaign .dpn_sp {
    display: none;
  }
}

.campaign ul {
  width: min(100%, 800px);
  margin-inline: auto;
}

.campaign ul li {
  margin-bottom: 0.8em;
}

.campaign dl {
  border-bottom: 2px dotted var(--cnpGreen);
  padding-bottom: 0.3em;
}

.campaign dl,
.campaign ul li div {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}

.campaign dl dt {
  width: 4em;
}

.campaign dl dd {
  width: calc(100% - 4em);
  font-size: 1.1em;
  font-weight: 600;
}

.campaign dl dd a {
  font-size: 0.85em;
  color: var(--cnpBlue);
}

.campaign ul p {
  font-size: 0.9em;
  margin: 0.5em auto;
  text-align: left;
}

.campaign ul .notes {
  font-size: 0.8125em;
  color: rgb(0 0 0 / 0.4);
}

.campaign .bi {
  padding-left: 0.25em;
  font-size: 1.3em;
  color: var(--cnpPink);
}

.campaign dl .fa-solid {
  padding-right: 0.25em;
  font-size: 0.9em;
  color: var(--cnpBlue);
}

@media (width > 1000px) {
  .campaign .fa-solid {
    padding-left: 1em;
  }
}

.campaign a:has(.cta) {
  width: min(100%, 500px);
  display: block;
  margin: 0 auto 0.5em;
  text-align: center;
}

.campaign .cta {
  width: min(100%, 500px);
  background-color: var(--Green);
  color: #fff;
  font-family: var(--font-Mplus-R);
  font-size: 1.3em;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  margin: 0 auto 1em;
  padding: 0.6em 1em;
  border-radius: 100vh;
  border-bottom: 12px solid #097f44;
}

.campaign .cta p {
  position: relative;
}

.campaign .cta p::after {
  font: var(--fa-font-solid);
  content: '\f105';
  font-size: 1.125em;
  position: absolute;
  top: 50%;
  right: 0.2em;
  transform: translateY(-50%);
}

.campaign .cta i {
  counter-reset: #fff;
  margin: 0 min(5%, 45px);
}

.campaign .memo {
  width: min(100%, 600px);
  margin-inline: auto;
}

.campaign .memo * {
  font-size: 0.85em;
  text-align: center;
}

.campaign .memo p {
  margin-bottom: 0.5em;
}

.campaign .pdf {
  text-align: center;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0.8em;
}

.campaign .pdf a {
  text-decoration: underline;
  font-size: 1em;
}