@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital@0;1&family=Shippori+Mincho:wght@400;500;700&display=swap");
:root {
  --color-blacks: #231815;
  --color-green: #2b3d25;
  --color-light-green: #7eb8ac;
  --color-pink: #ec6d79;
  --color-light-pink: #f7c7c5;
}

main {
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-style: normal;
  background-color: #fef5f3;
}

.inner {
  width: clamp(0px, 91.7vw, 1100px);
  max-width: 90%;
  margin: 0 auto;
}

.sec_cont {
  display: flex;
  align-items: flex-start;
  gap: clamp(0px, 5.9vw, 70px);
}

.sec_cont .sec_text_area {
  flex: 1;
}

@media screen and (min-width: 600px) and (max-width: 1210px) {
  .sec_cont {
    gap: clamp(0px, 4.6vw, 56px);
  }
}
@media (max-width: 599px) {
  .sec_cont {
    gap: clamp(0px, 7dvw, 70px);
  }
}
.list > li {
  font-size: clamp(0px, 1.4vw, 16px);
  color: var(--color-green);
  line-height: 2.5;
  position: relative;
  padding-left: 1.2em;
  font-feature-settings: "palt";
}

.list > li::before {
  content: "・";
  width: 1em;
  height: 1em;
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 599px) {
  .list > li {
    font-size: clamp(0px, 3.8dvw, 38px);
  }
}
.c_pink {
  color: var(--color-pink);
}

br.nopc {
  font-size: 0;
}

/* ===============================================
   header
=============================================== */
.nav {
  background-color: var(--color-light-green);
  color: #fff;
}

.nav_actions {
  border: 1px solid #fff;
  background-color: #fff;
}

.nav_actions a {
  color: #fff;
  background-color: var(--color-black);
}

.nav_actions a:hover {
  color: var(--color-black);
}

.nav_actions a span::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.7em 0 0.7em 1em;
  border-color: transparent transparent transparent var(--color-light-pink);
  -webkit-mask-image: none;
          mask-image: none;
  background-color: transparent;
}

.nav_actions a::before {
  background-color: #fff;
}

.nav_sns a {
  background-color: var(--color-light-green);
}

.nav_sns a img {
  opacity: 0;
}

.nav_sns > li {
  background-color: #fff;
  border-radius: 50%;
}

.nav_sns > li:nth-child(1) a {
  -webkit-mask-image: url("../img/menu_icon_line.svg");
          mask-image: url("../img/menu_icon_line.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
}

.nav_sns > li:nth-child(2) a {
  -webkit-mask-image: url("../img/menu_icon_x.svg");
          mask-image: url("../img/menu_icon_x.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
}

.nav_sns > li:nth-child(3) a {
  -webkit-mask-image: url("../img/menu_icon_insta.svg");
          mask-image: url("../img/menu_icon_insta.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
}

.nav_sns > li:nth-child(4) a {
  -webkit-mask-image: url("../img/menu_icon_youtube.svg");
          mask-image: url("../img/menu_icon_youtube.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* ===============================================
   footer
=============================================== */
#footer {
  padding-top: clamp(0px, 9.6vw, 115px);
  background: linear-gradient(45.72deg, #7EB8AC 0%, #EBF3E0 60%, #EBF3E0 100%);
  -webkit-clip-path: polygon(50% 0%, 100% 18%, 100% 100%, 0 100%, 0% 18%);
          clip-path: polygon(50% 0%, 100% 18%, 100% 100%, 0 100%, 0% 18%);
  margin-top: clamp(-150px, -12.5vw, 0px);
  z-index: 2;
}

@media (max-width: 599px) {
  #footer {
    padding-top: clamp(0px, 8.5dvw, 85px);
    margin-top: clamp(-130px, -13vw, 0px);
  }
}
/* ===============================================
   Instagram
=============================================== */
#insta {
  font-family: "Shippori Mincho", serif;
  width: 100%;
  height: clamp(0px, 18.3vw, 220px);
  border-bottom: 1px solid var(--color-black);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 clamp(0px, 2.5vw, 30px);
}

#insta a {
  display: flex;
  align-items: center;
  gap: 0 clamp(0px, 2.5vw, 30px);
}

#insta .text_1 {
  font-size: clamp(0px, 2.5vw, 30px);
  letter-spacing: 0.15em;
  font-weight: var(--font-w-b);
  white-space: nowrap;
}

#insta a img {
  width: clamp(0px, 5.8vw, 70px);
}

#insta .text_2 {
  font-size: clamp(0px, 1.7vw, 20px);
  line-height: 1.6em;
  font-weight: var(--font-w-b);
  white-space: nowrap;
}

@media (max-width: 599px) {
  #insta {
    height: clamp(0px, 22vw, 220px);
    gap: 0 clamp(0px, 4dvw, 40px);
  }

  #insta a {
    gap: 0 clamp(0px, 4dvw, 40px);
  }

  #insta .text_1 {
    font-size: clamp(0px, 3.4dvw, 34px);
  }

  #insta a img {
    width: clamp(0px, 7dvw, 70px);
  }

  #insta .text_2 {
    font-size: clamp(0px, 2.5dvw, 25px);
  }
}
/* ===============================================
   button
=============================================== */
.button {
  width: clamp(0px, 35vw, 420px);
  aspect-ratio: 420/60;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-green);
  background-color: #eaf0e5;
  border: 1px solid var(--color-green);
  font-size: clamp(0px, 1.3vw, 15px);
  letter-spacing: 0;
  border-radius: clamp(0px, 2.3vw, 27px);
  position: relative;
}

.button_1 {
  width: clamp(0px, 43vw, 516px);
  aspect-ratio: 516/80;
  border-radius: clamp(0px, 3vw, 35px);
  font-size: clamp(0px, 1.5vw, 18px);
}

.button::before {
  content: "";
  width: 0.67em;
  height: 0.67em;
  border: 0;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: clamp(0px, 1.7vw, 20px);
  bottom: 0;
  margin: auto;
}

.button_1::before {
  width: 0.8em;
  height: 0.8em;
  right: clamp(0px, 2.5vw, 30px);
}

@media (max-width: 599px) {
  .button,
  .button_1 {
    width: clamp(0px, 71.5dvw, 715px);
    aspect-ratio: 715/150;
    font-size: clamp(0px, 3dvw, 30px);
    border-radius: clamp(0px, 7dvw, 70px);
  }

  .button::before,
  .button_1::before {
    width: 0.5em;
    height: 0.5em;
    right: clamp(0px, 4dvw, 40px);
  }
}
/* ===============================================
   title
=============================================== */
.sec_title {
  font-size: clamp(0px, 1.7vw, 20px);
  font-weight: 700;
  color: var(--color-green);
  letter-spacing: 0.25em;
  writing-mode: vertical-rl;
  padding: 0 clamp(0px, 0.5vw, 6px) clamp(0px, 0.5vw, 6px) 0;
  background-image: url("../img/nihon/bg_title.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

.sec_title > span {
  height: 100%;
  display: inline-block;
  background-color: #fff;
  padding: 2.7em 0;
  white-space: nowrap;
}

@media (max-width: 599px) {
  .sec_title {
    font-size: clamp(0px, 4dvw, 40px);
    padding: 0 clamp(0px, 0.8dvw, 7px) clamp(0px, 0.8dvw, 7px) 0;
  }
}
.sec_title_line {
  font-size: clamp(0px, 1.6vw, 19px);
  font-weight: 700;
  color: var(--color-green);
  letter-spacing: 0.1em;
  margin-bottom: 1em;
}

.sec_title_line:before,
.sec_title_line:after {
  border-top: 1px solid;
  display: inline-block;
  content: "";
  width: 0.8em;
  transform: translateY(-0.3em);
}

@media (max-width: 599px) {
  .sec_title_line {
    font-size: clamp(0px, 4dvw, 40px);
  }
}
/* ===============================================
   mv
=============================================== */
#mv {
  background: linear-gradient(45.72deg, #7eb8ac 0%, #ebf3e0 98.11%);
  padding-bottom: clamp(0px, 2.1vw, 25px);
}

#mv::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("../img/nihon/bg_mv.png");
  background-repeat: repeat;
  background-position: top left;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.mv_inner {
  width: clamp(0px, 100vw, 1410px);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

#mv .inner {
  position: relative;
}

.mv_img {
  width: clamp(0px, 100vw, 1410px);
  margin: 0 auto;
  overflow: hidden;
}

.mv_img img {
  width: 1410px;
  max-width: 103.2vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.mv_title {
  font-size: clamp(0px, 2.2vw, 26px);
  font-weight: 700;
  color: var(--color-green);
  letter-spacing: 0.3em;
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0px, 1vw, 12px);
  position: absolute;
  top: clamp(0px, 21.7vw, 260px);
  left: 0;
  z-index: 1;
}

.mv_title .small {
  font-size: 0.8em;
}

.mv_title .text_box {
  padding: 0 clamp(0px, 0.5vw, 6px) clamp(0px, 0.5vw, 6px) 0;
  background-image: url("../img/nihon/bg_title.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

.mv_title .text_box > span {
  display: inline-block;
  background-color: #fff;
  padding: 1em 0 3em;
  white-space: nowrap;
}

.mv_title .text_box.lg > span {
  padding-top: 1.5em;
}

.mv_text {
  font-size: clamp(0px, 1.7vw, 20px);
  color: var(--color-green);
  line-height: 3;
  letter-spacing: 0.3em;
  writing-mode: vertical-rl;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 1em;
}

@media (max-width: 599px) {
  #mv {
    background: linear-gradient(38.41deg, #7eb8ac 0%, #ebf3e0 98.11%);
    padding-bottom: 0;
  }

  #mv::before {
    background-size: clamp(0px, 19.5dvw, 194px) auto;
  }

  .mv_img img {
    width: 100%;
    max-width: 100%;
  }

  .mv_title {
    font-size: clamp(0px, 4.7dvw, 47px);
    top: clamp(0px, 125dvw, 1250px);
  }

  .mv_title .text_box {
    padding: 0 clamp(0px, 1dvw, 10px) clamp(0px, 1dvw, 10px) 0;
  }

  .mv_text {
    font-size: clamp(0px, 3.8dvw, 38px);
    line-height: 2.6;
    letter-spacing: 0.25em;
    top: clamp(0px, 40dvw, 400px);
    transform: translate(-50%, 0);
    margin-top: 0;
  }
}
/* ===============================================
   bg_area
=============================================== */
.bg_area {
  background-color: #ebf0e5;
  background-image: url("../img/nihon/bg_main.png"), url("../img/nihon/bg_plaid.png");
  background-repeat: no-repeat, repeat;
  background-position: top clamp(0px, 28.5vw, 342px) center, top left;
  background-size: 100% auto, clamp(0px, 10.5vw, 125px);
  -webkit-clip-path: polygon(100% clamp(0px, 8.4vw, 115px), 100% 100%, 0 100%, 0 clamp(0px, 8.4vw, 115px), 50% 0);
          clip-path: polygon(100% clamp(0px, 8.4vw, 115px), 100% 100%, 0 100%, 0 clamp(0px, 8.4vw, 115px), 50% 0);
  margin-top: clamp(-140px, -11.7vw, 0px);
  position: relative;
  z-index: 2;
  padding: clamp(0px, 9.6vw, 115px) 0 clamp(0px, 18vw, 215px);
}

.bg_container {
  width: clamp(0px, 100vw, 1366px);
  margin: 0 auto;
  position: relative;
}

.bg_container .img_01,
.bg_container .img_02,
.bg_container .img_03,
.bg_container .img_04 {
  position: absolute;
}

.bg_container .img_01 {
  width: clamp(0px, 16.7vw, 200px);
  top: 0;
  right: clamp(0px, 24vw, 280px);
}

.bg_container .img_02 {
  width: clamp(0px, 18.8vw, 225px);
  top: clamp(0px, 18.5vw, 222px);
  right: 0;
}

.bg_container .img_03 {
  width: clamp(0px, 13.4vw, 160px);
  top: clamp(0px, 38.4vw, 460px);
  right: clamp(0px, 30.9vw, 370px);
}

.bg_container .img_04 {
  width: clamp(0px, 20.9vw, 250px);
  top: clamp(0px, 54.6vw, 655px);
  right: clamp(0px, 5.9vw, 70px);
}

@media (max-width: 599px) {
  .bg_area {
    background-image: url("../img/nihon/bg_main_sp.png"), url("../img/nihon/bg_plaid.png");
    background-position: top clamp(0px, 72dvw, 720px) center, top left;
    background-size: 100% auto, clamp(0px, 9.3dvw, 92px);
    -webkit-clip-path: polygon(100% clamp(0px, 8.4dvw, 84px), 100% 100%, 0 100%, 0 clamp(0px, 8.4dvw, 84px), 50% 0);
            clip-path: polygon(100% clamp(0px, 8.4dvw, 84px), 100% 100%, 0 100%, 0 clamp(0px, 8.4dvw, 84px), 50% 0);
    padding: clamp(0px, 8.5dvw, 85px) 0 clamp(0px, 18dvw, 180px);
  }

  .bg_container {
    width: 100%;
  }

  .bg_container .img_01 {
    width: clamp(0px, 16dvw, 160px);
    top: clamp(0px, 44dvw, 440px);
    right: 0;
  }

  .bg_container .img_02 {
    width: clamp(0px, 19.3dvw, 192px);
    top: clamp(0px, 82.9dvw, 828px);
    z-index: 2;
  }

  .bg_container .img_03 {
    width: clamp(0px, 15.7dvw, 157px);
    top: clamp(0px, 91dvw, 910px);
    right: clamp(0px, 36.4dvw, 364px);
  }

  .bg_container .img_04 {
    width: clamp(0px, 24.5dvw, 245px);
    top: clamp(0px, 106dvw, 1060px);
    right: clamp(0px, 5dvw, 50px);
  }
}
/* ===============================================
   about
=============================================== */
#about {
  padding: clamp(0px, 5.9vw, 70px) 0 clamp(0px, 16.7vw, 200px);
}

.about_text {
  font-size: clamp(0px, 1.4vw, 16px);
  color: var(--color-green);
  line-height: 2.8;
}

#about .sec_cont .sec_text_area {
  padding-top: clamp(0px, 5.9vw, 70px);
}

#about .sec_title {
  font-size: clamp(0px, 2.2vw, 26px);
}

#about .sec_title > span {
  padding: 2em 0 2.3em;
}

@media (max-width: 599px) {
  #about {
    padding: clamp(0px, 15dvw, 150px) 0 clamp(0px, 21dvw, 210px);
  }

  .about_text {
    font-size: clamp(0px, 3.8dvw, 38px);
    line-height: 2.36;
    letter-spacing: 0;
  }

  #about .sec_cont .sec_text_area {
    padding-top: clamp(0px, 2dvw, 20px);
  }

  #about .sec_title {
    font-size: clamp(0px, 4.7dvw, 47px);
  }
}
/* ===============================================
   licence
=============================================== */
#licence {
  padding-bottom: clamp(0px, 16.7vw, 200px);
}

#licence .sec_cont .sec_text_area {
  padding-top: clamp(0px, 2.1vw, 25px);
}

#licence .button {
  margin-top: clamp(0px, 3.4vw, 40px);
}

@media (max-width: 599px) {
  #licence {
    padding-bottom: clamp(0px, 21dvw, 210px);
  }

  #licence .sec_cont .sec_text_area {
    padding-top: clamp(0px, 1.5dvw, 15px);
  }

  #licence .button {
    margin-top: clamp(0px, 4dvw, 40px);
  }
}
/* ===============================================
   career
=============================================== */
#career {
  padding-bottom: clamp(0px, 16.7vw, 200px);
  position: relative;
}

#career::before {
  content: "";
  width: 100vw;
  height: auto;
  aspect-ratio: 1366/552;
  background-image: url("../img/nihon/bg_career.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  position: absolute;
  bottom: clamp(-150px, -12.5vw, 0px);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

#career .inner {
  position: relative;
}

.career_list {
  display: flex;
  gap: clamp(0px, 2.5vw, 30px);
  counter-reset: number;
}

.career_list > li {
  font-size: clamp(0px, 1.4vw, 16px);
  font-weight: 700;
  color: var(--color-green);
  letter-spacing: 0.1em;
  background-color: #fff;
  display: flex;
  overflow: hidden;
  counter-increment: number;
}

.career_list > li > div {
  font-size: inherit;
}

.career_list > li .title {
  max-width: 50%;
  position: relative;
  padding: clamp(0px, 1.7vw, 20px) clamp(0px, 1.7vw, 20px) clamp(0px, 1.7vw, 20px) clamp(0px, 1.3vw, 15px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.career_list > li .title::before {
  content: "";
  width: 1px;
  height: 110%;
  background-color: var(--color-green);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(18deg);
}

.career_list > li .title::after {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-size: clamp(0px, 7.5vw, 90px);
  font-weight: 400;
  color: var(--color-light-pink);
  line-height: 1;
  content: counter(number);
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -0.1em;
  margin-left: -0.1em;
}

.career_list > li .title > span {
  position: relative;
  z-index: 2;
}

.career_list > li .text {
  flex: 1;
  line-height: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(0px, 1.7vw, 20px) clamp(0px, 1.3vw, 15px) clamp(0px, 1.7vw, 20px) clamp(0px, 1.7vw, 20px);
}

.career_text {
  font-size: clamp(0px, 1.4vw, 16px);
  color: var(--color-green);
  line-height: 2.5;
  letter-spacing: 0.1em;
  margin: 0.8em 0 clamp(0px, 4.2vw, 50px);
}

.career_block {
  display: flex;
  justify-content: space-between;
  gap: clamp(0px, 2.1vw, 25px);
}

.career_block + .career_block {
  margin-top: clamp(0px, 5vw, 60px);
}

.career_block .img_area {
  width: clamp(0px, 33.4vw, 400px);
  flex-shrink: 0;
}

.career_block .text_area {
  flex: 1;
  width: clamp(0px, 46.3vw, 555px);
  color: var(--color-green);
}

.career_block .text_head {
  display: flex;
  justify-content: space-between;
  gap: clamp(0px, 1.7vw, 20px);
  margin-top: clamp(0px, 0.5vw, 5px);
}

.career_block .title {
  max-width: 60%;
  font-size: clamp(0px, 1.7vw, 20px);
  font-weight: 700;
  color: var(--color-pink);
  line-height: 1.5;
  letter-spacing: 0.15em;
}

.career_block .text_1 {
  max-width: 40%;
  font-size: clamp(0px, 2vw, 23px);
  line-height: 1.5;
  text-align: right;
  align-self: flex-end;
}

.career_block .text_1 > span {
  font-size: 0.7em;
}

.career_block .text_1 > span > span {
  display: inline-block;
}

.career_block .text_2 {
  font-size: clamp(0px, 1.4vw, 16px);
  line-height: 1.5;
  text-align: right;
  margin-bottom: 0.5em;
}

.career_block .text_3 {
  font-size: clamp(0px, 1.4vw, 16px);
  color: var(--color-green);
  line-height: 1.875;
  text-align: justify;
  text-justify: inter-character;
}

#career .button {
  margin: clamp(0px, 7.5vw, 90px) auto 0;
}

@media screen and (min-width: 600px) and (max-width: 1210px) {
  .career_list {
    gap: clamp(0px, 1.25vw, 15px);
  }

  .career_list > li .text {
    padding: clamp(0px, 1.7vw, 20px) clamp(0px, 0.83vw, 10px) clamp(0px, 1.7vw, 20px) clamp(0px, 1.7vw, 20px);
  }
}
@media (max-width: 599px) {
  #career {
    padding-bottom: clamp(0px, 20dvw, 200px);
  }

  #career::before {
    aspect-ratio: 1000/405;
    bottom: clamp(-20px, -2.5vw, 0px);
    left: 0;
    transform: none;
    background-image: url("../img/nihon/bg_career_sp.png");
  }

  .career_list {
    flex-direction: column;
    gap: clamp(0px, 1dvw, 10px);
  }

  .career_list > li {
    font-size: clamp(0px, 3.8dvw, 38px);
    min-height: clamp(0px, 23dvw, 230px);
  }

  .career_list > li .title {
    width: 43%;
    padding: clamp(0px, 2.5dvw, 25px);
    line-height: 1.45;
  }

  .career_list > li .title::after {
    font-size: clamp(0px, 18dvw, 180px);
  }

  .career_list > li .text {
    line-height: 1.45;
  }

  .career_text {
    font-size: clamp(0px, 3.5dvw, 35px);
    line-height: 1.77;
    margin: clamp(0px, 5dvw, 50px) 0 clamp(0px, 9dvw, 90px);
  }

  .career_block {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    width: 100vw;
    margin: 0 calc(50% - 58vw);
    padding: 0 clamp(0px, 8dvw, 80px);
  }

  .career_block .img_area {
    width: clamp(0px, 68.2dvw, 682px);
  }

  .career_block .title {
    font-size: clamp(0px, 4.5dvw, 45px);
    text-align: center;
    max-width: 100%;
    margin-bottom: 0.5em;
  }

  .career_block .text_area {
    width: 100%;
    margin-top: -17vw;
  }

  .career_block .text_1 {
    font-size: clamp(0px, 4.7dvw, 46px);
    line-height: 1.1;
    width: 100%;
    max-width: 30%;
    margin-left: auto;
  }

  .career_block .text_1 .ib {
    display: inline-block;
  }

  .career_block .text_2 {
    font-size: clamp(0px, 3.2dvw, 32px);
    max-width: 35%;
    margin-left: auto;
    margin-bottom: 1em;
  }

  .career_block .text_3 {
    font-size: clamp(0px, 3.5dvw, 35px);
  }

  .career_button {
    width: 100vw;
    margin: 0 calc(50% - 58vw);
  }
}
/* ===============================================
   learning
=============================================== */
#learning {
  padding-bottom: clamp(0px, 16.7vw, 200px);
}

.learning_list {
  display: flex;
  flex-direction: column;
  gap: clamp(0px, 1.7vw, 20px);
  counter-reset: number;
}

.learning_list > li {
  display: flex;
  background-color: #fff;
  counter-increment: number;
  position: relative;
}

.learning_list > li::before {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-size: clamp(0px, 7.5vw, 90px);
  font-weight: 400;
  color: var(--color-light-green);
  line-height: 1;
  content: counter(number);
  display: inline-block;
  position: absolute;
  bottom: -0.15em;
  left: 0;
  z-index: 2;
  transform: translateX(-85%);
}

.learning_list > li .title {
  width: clamp(0px, 51.7vw, 620px);
  font-size: clamp(0px, 1.7vw, 20px);
  font-weight: 700;
  color: var(--color-green);
  line-height: 1.65;
  letter-spacing: 0.05em;
  background: linear-gradient(90deg, #7eb8ac 0%, #9fcab8 18.75%, #bcd9c2 39.47%, #d0e4c9 60.1%, #ddebce 80.4%, #e1edcf 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
  padding: clamp(0px, 1.7vw, 20px) clamp(0px, 1.7vw, 20px) clamp(0px, 1.7vw, 20px) clamp(0px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.learning_list > li .text {
  flex: 1;
  font-size: clamp(0px, 1.4vw, 16px);
  color: var(--color-green);
  line-height: 1.875;
  letter-spacing: 0.05em;
  padding: clamp(0px, 1.7vw, 20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#learning .sec_text_area {
  width: calc(100% + clamp(0px, 11.3vw, 135px));
  margin-right: clamp(-135px, -11.3vw, 0px);
}

@media (max-width: 599px) {
  #learning {
    padding-bottom: clamp(0px, 20dvw, 200px);
  }

  #learning .sec_text_area {
    width: 100%;
    margin-right: 0;
  }

  .learning_list {
    gap: clamp(0px, 3dvw, 30px);
  }

  .learning_list > li {
    flex-direction: column;
  }

  .learning_list > li::before {
    display: none;
  }

  .learning_list > li .title {
    width: 100%;
    -webkit-clip-path: none;
            clip-path: none;
    display: block;
    font-size: clamp(0px, 4dvw, 40px);
    padding: clamp(0px, 3dvw, 30px) clamp(0px, 3dvw, 30px) clamp(0px, 3dvw, 30px) clamp(0px, 3.5dvw, 35px);
    position: relative;
  }

  .learning_list > li .title::before {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-size: clamp(0px, 14.4dvw, 144px);
    font-weight: 400;
    color: var(--color-light-green);
    line-height: 1;
    content: counter(number);
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: calc(100% - 0.1em);
    z-index: 2;
  }

  .learning_list > li .text {
    font-size: clamp(0px, 3.5dvw, 35px);
    padding: clamp(0px, 3dvw, 30px) clamp(0px, 3dvw, 30px) clamp(0px, 3dvw, 30px) clamp(0px, 3.5dvw, 35px);
  }
}
/* ===============================================
   classes
=============================================== */
#classes {
  padding-bottom: clamp(0px, 16.7vw, 200px);
  background-image: url("../img/nihon/bg_classes.png");
  background-repeat: no-repeat;
  background-position: top clamp(0px, 18.4vw, 220px) center;
  background-size: clamp(0px, 166.7vw, 2000px) auto;
}

.classes_block {
  display: flex;
  justify-content: space-between;
  gap: clamp(0px, 2.5vw, 30px);
}

.classes_block + .classes_block {
  margin-top: clamp(0px, 5vw, 60px);
}

.classes_block.reverse {
  flex-direction: row-reverse;
}

.classes_block .img_area {
  width: clamp(0px, 25vw, 300px);
}

.classes_block .text_area {
  width: calc(100% - clamp(0px, 25vw, 300px));
}

.classes_block.reverse .text_area {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.classes_block .title {
  font-size: clamp(0px, 2vw, 23px);
  font-weight: 700;
  color: var(--color-pink);
  line-height: 1.3;
  margin-top: -0.5em;
  margin-bottom: 0.5em;
}

.classes_block.reverse .title {
  color: var(--color-light-green);
}

.classes_block .title .em {
  font-size: 4.3em;
  font-weight: normal;
  margin-left: -0.15em;
}

.classes_block .text_1 {
  font-size: clamp(0px, 1.7vw, 20px);
  font-weight: 500;
  color: #fff;
  line-height: 1.6;
  letter-spacing: 0.02em;
  background-color: var(--color-pink);
  padding: 0.2em 3.5em 0.2em 1.5em;
  display: inline-block;
  -webkit-clip-path: polygon(0 0, 100% 0, 97% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0, 97% 100%, 0% 100%);
  margin-left: clamp(-30px, -2.5vw, 0px);
  margin-bottom: 0.6em;
  margin-top: -1px;
}

.classes_block.reverse .text_1 {
  margin-left: auto;
  -webkit-clip-path: polygon(3% 100%, 0% 0%, 100% 0%, 100% 100%);
          clip-path: polygon(3% 100%, 0% 0%, 100% 0%, 100% 100%);
  margin-right: clamp(-30px, -2.5vw, 0px);
  background-color: var(--color-light-green);
  padding: 0.2em 1.5em 0.2em 3.5em;
}

.classes_block .text_2 {
  max-width: clamp(0px, 45.9vw, 550px);
  font-size: clamp(0px, 1.4vw, 16px);
  color: var(--color-green);
  line-height: 1.875;
  letter-spacing: 0.05em;
  text-align: justify;
  text-justify: inter-character;
}

@media (max-width: 599px) {
  #classes {
    padding-bottom: clamp(0px, 20dvw, 200px);
    background-image: url("../img/nihon/bg_classes_sp.png"), url("../img/nihon/bg_classes_sp.png");
    background-repeat: no-repeat, no-repeat;
    background-position: top clamp(0px, 74dvw, 740px) center, bottom clamp(0px, 54.8dvw, 548px) center;
    background-size: 100% auto, 100% auto;
  }

  .classes_block,
  .classes_block.reverse {
    flex-direction: column;
    position: relative;
    gap: 0;
  }

  .classes_block + .classes_block {
    margin-top: clamp(0px, 10dvw, 100px);
  }

  .classes_block .img_area {
    width: clamp(0px, 42dvw, 420px);
  }

  .classes_block.reverse .img_area {
    align-self: flex-end;
  }

  .classes_block .title {
    font-size: clamp(0px, 4.7dvw, 46px);
    writing-mode: vertical-rl;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.8;
    position: absolute;
    top: 0;
    right: 0;
    width: 44%;
    height: 43%;
  }

  .classes_block.reverse .title {
    position: absolute;
    top: 0;
    left: 0;
    width: 44%;
    height: 43%;
  }

  .classes_block .line_1 {
    margin-top: -3.5em;
    margin-left: -2em;
    margin-right: -2.5em;
  }

  .classes_block.reverse .line_1 {
    margin-top: -1em;
    margin-left: -2em;
    margin-right: -1.5em;
  }

  .classes_block .line_2 {
    transform: translateX(0.45em);
  }

  .classes_block .line_3 {
    transform: translateX(0.8em);
  }

  .classes_block .line_2 {
    margin-top: 2em;
  }

  .classes_block .line_3 {
    margin-top: 3em;
  }

  .classes_block.block_3 .line_1 {
    margin-top: -4.5em;
  }

  .classes_block.block_3 .line_2 {
    margin-top: -1em;
  }

  .classes_block.block_3 .line_3 {
    margin-top: 0;
  }

  .classes_block.block_4 .line_1 {
    margin-top: -3.5em;
  }

  .classes_block.block_4 .line_2 {
    margin-top: 1em;
  }

  .classes_block.block_4 .line_3 {
    margin-top: 3.2em;
  }

  .classes_block.block_5 .line_3 {
    margin-top: 1em;
  }

  .classes_block .title .em {
    margin-left: 0;
  }

  .classes_block .title > span {
    display: block;
  }

  .classes_block .text_area {
    width: 100%;
  }

  .classes_block .text_1 {
    min-width: clamp(0px, 59dvw, 590px);
    font-size: clamp(0px, 4dvw, 40px);
    margin-left: 0;
    padding-left: 0.5em;
    padding-right: 0.5em;
    -webkit-clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
  }

  .classes_block.reverse .text_1 {
    margin-right: 0;
    text-align: right;
  }

  .classes_block .text_2 {
    max-width: 100%;
    font-size: clamp(0px, 3.5dvw, 35px);
  }
}
/* ===============================================
   voice
=============================================== */
#voice .inner {
  position: relative;
}

#voice .inner::before {
  content: "";
  width: clamp(0px, 48.9vw, 586px);
  height: auto;
  aspect-ratio: 586/268;
  background-image: url("../img/nihon/bg_voice.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  top: clamp(-45px, -3.75vw, 0px);
  right: 0;
  pointer-events: none;
}

#voice .sec_cont {
  position: relative;
  z-index: 2;
}

#voice .sec_text_area {
  position: relative;
}

#voice .sec_text_area::before {
  content: "";
  width: clamp(0px, 43.4vw, 520px);
  height: auto;
  aspect-ratio: 520/680;
  background-image: url("../img/nihon/bg_voice.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  bottom: clamp(0px, 7.5vw, 90px);
  left: clamp(-350px, -29.2vw, 0px);
}

.voice_qa {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(0px, 5vw, 60px) 0;
  margin-bottom: clamp(0px, 8.4vw, 100px);
}

.qa .area_q {
  padding: clamp(0px, 4.2vw, 50px) 0 clamp(0px, 6.7vw, 80px) clamp(0px, 7.5vw, 90px);
  background-image: url("../img/nihon/line_q.svg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  position: relative;
}

.area_q .icon {
  font-family: "EB Garamond", serif;
  font-size: clamp(0px, 7.5vw, 90px);
  font-weight: 400;
  color: #eaf0e5;
  line-height: 1;
  width: clamp(0px, 10.5vw, 125px);
  aspect-ratio: 1/1;
  border-bottom-right-radius: clamp(0px, 8.4vw, 100px);
  background: linear-gradient(45deg, #97c4ba 0%, #b7d6c5 33.34%, #d8e8d1 73.91%, #e5efd6 96.09%);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.area_q .icon > span {
  margin-top: -0.25em;
  margin-left: 0.15em;
}

.area_a .icon {
  font-size: clamp(0px, 3.3vw, 39px);
  color: #fff;
  line-height: 1;
  width: clamp(0px, 6.7vw, 80px);
  aspect-ratio: 1/1;
  border-bottom-right-radius: clamp(0px, 5.3vw, 63px);
  background: linear-gradient(45deg, #EC6D79 0%, #EC6F7B 1.01%, #F08F95 18.56%, #F3A8AA 36.81%, #F5B9B9 55.85%, #F7C4C2 76.17%, #F7C7C5 100%);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.area_a .icon > span {
  text-align: center;
  margin-top: -0.4em;
  margin-left: -0.5em;
}

.area_a .icon > span > span {
  font-size: 0.5em;
  display: block;
}

.qa .area_q .text {
  position: relative;
}

.qa .area_q .text p {
  font-size: clamp(0px, 1.7vw, 20px);
  font-weight: 700;
  color: var(--color-green);
  line-height: 1.7;
  letter-spacing: 0.1em;
}

.qa .area_q + .area_a {
  padding-top: clamp(0px, 1.7vw, 20px);
}

.qa .area_a .block_a {
  min-height: clamp(0px, 11.7vw, 140px);
  background-color: #fff;
  padding: clamp(0px, 2.5vw, 30px) clamp(0px, 5.9vw, 70px) clamp(0px, 2.5vw, 30px) clamp(0px, 10vw, 120px);
  border-radius: clamp(0px, 1.3vw, 15px);
  position: relative;
  overflow: hidden;
}

.qa .area_a .block_a + .block_a {
  margin-top: clamp(0px, 1.7vw, 20px);
}

.qa .area_a .text p {
  font-size: clamp(0px, 1.4vw, 16px);
  color: var(--color-black);
  line-height: 1.875;
  letter-spacing: 0.03em;
}

.qa .area_a .text p .small {
  font-size: 0.875em;
}

@media (max-width: 599px) {
  #voice::before {
    content: "";
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1000/816;
    background-image: url("../img/nihon/bg_voice_sp.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    position: absolute;
    bottom: clamp(-105px, -10.5vw, 0px);
    left: 0;
  }

  #voice .inner::before {
    width: clamp(0px, 58.6dvw, 586px);
    top: clamp(-30px, -3vw, 0px);
  }

  .voice_qa {
    gap: clamp(0px, 12dvw, 120px);
    margin-bottom: clamp(0px, 10dvw, 100px);
  }

  .qa .area_q {
    padding: clamp(0px, 5dvw, 50px) 0 clamp(0px, 9dvw, 90px) clamp(0px, 15dvw, 150px);
    background-size: auto clamp(0px, 2.5dvw, 24px);
  }

  .qa .area_q .text p {
    font-size: clamp(0px, 3.8dvw, 38px);
    line-height: 1.375;
    letter-spacing: 0.05em;
  }

  .area_q .icon {
    font-size: clamp(0px, 14dvw, 140px);
    width: clamp(0px, 19.6dvw, 196px);
    border-bottom-right-radius: clamp(0px, 15.6dvw, 156px);
  }

  .area_a .icon {
    font-size: clamp(0px, 7.8dvw, 78px);
    width: clamp(0px, 15.8dvw, 158px);
    border-bottom-right-radius: clamp(0px, 12.7dvw, 126px);
  }

  .area_q .icon > span {
    margin-left: -0.15em;
  }

  .qa .area_q + .area_a {
    padding-top: clamp(0px, 4dvw, 40px);
  }

  .qa .area_a .block_a {
    min-height: clamp(0px, 49.5dvw, 495px);
    padding: clamp(0px, 4dvw, 40px) clamp(0px, 3.5dvw, 35px) clamp(0px, 4dvw, 40px) clamp(0px, 16dvw, 160px);
    border-radius: clamp(0px, 3dvw, 30px);
  }

  .qa .area_a .text p {
    font-size: clamp(0px, 3.5dvw, 35px);
    line-height: 1.7;
  }

  .qa .area_a .block_a + .block_a {
    margin-top: clamp(0px, 2dvw, 20px);
  }

  #voice .sec_text_area::before {
    display: none;
  }

  .qa .area_a .text p .small {
    font-size: 0.857em;
  }
}
/*----------------------------
accordion
----------------------------*/
.acc_button {
  cursor: pointer;
  position: relative;
}

.acc_cont {
  display: none;
}

/* ===============================================
   link
=============================================== */
#link {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 599px) {
  #link {
    flex-direction: column;
    align-items: center;
  }
}