@charset "utf-8";
:root {
  /* color */
  --white: #fff;
  --brown1: #442920;
  --brown2: #746560;
  --green1: #00b900;
  --gray1: #f3f3f3;
  --gray2: #e1e1e1;
  --gray3: #b5b5b5;
  --gray4: #f9f6f5;
  --gray5: #f0f0f0;
  --gray6: #efefef;
  --gray7: #cccccc;
  /* container, padding, margin */
  --content-width: 1400px;
}

html {
  font-size: 100%;
}

body {
  color: var(--black);
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: initial;
  line-height: 1;
  letter-spacing: 0.2em;
  overflow-x: hidden;
}

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

li {
  list-style: none;
}

/* 共通パーツ
------------------------------------------------------- */
.section__title {
  font-size: 3.5rem;
  color: var(--brown1);
  font-family: "Cinzel", serif;
  font-weight: 400;
  letter-spacing: 0.2em;
}

.section__subtitle {
  font-size: 1.125rem;
  color: var(--brown1);
  letter-spacing: 0.2em;
  font-weight: 300;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 13px;
  margin-top: 12px;
}

.section__subtitle::before {
  content: "";
  width: calc(clamp(1.875rem, -0.063rem + 8.27vw, 3.813rem));
  height: 1px;
  display: block;
  background-color: currentColor;
}

.white {
  color: var(--white);
}

.for-sp,
.for-tab {
  display: none;
}

.no-scroll {
  overflow: hidden;
  width: 100%;
}

.hover {
  display: none;
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s ease-out;
}

.fade-in--visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in--up {
  transform: translateY(50px);
}

.fade-in--visible.fade-in--up {
  transform: translateX(0) translateY(0) scale(1);
  opacity: 1;
}

@media screen and (max-width: 960px) {
  .for-tab {
    display: block;
  }
}

@media screen and (max-width: 1000px) {
  .section__title {
    font-size: calc(clamp(2.375rem, 10.13vw, 4.75rem));
  }

  .section__subtitle {
    font-size: calc(clamp(0.875rem, 0.125rem + 3.2vw, 1.625rem));
  }
}

@media screen and (max-width: 428px) {
  .for-pc {
    display: none;
  }

  .for-tab {
    display: none;
  }

  .for-sp {
    display: block;
  }
}

/* header
----------------------------------------------------- */
.header {
  background-color: var(--white);
  height: 100px;
  width: 100vw;
  display: grid;
  align-items: center;
  padding-inline: 24px;
  position: fixed;
  z-index: 50;
}

.header__inner {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: end;
  align-items: center;
  gap: calc(clamp(1.063rem, -1.594rem + 4.25vw, 2.125rem));
}

.header__logo {
  width: 162px;
  height: auto;
  position: absolute;
  top: 16px;
  left: 38px;
  z-index: 90;
  transition: all 0.4s ease-out;
}

.circle-block {
  margin: auto;
  position: relative;
  transition: all 0.4s ease-out;
}

.circleText {
  overflow: visible;
  animation: rotation 18s linear infinite;
}

.circleText__circle {
  fill: none;
}

.circleText__text {
  fill: var(--brown1);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.05em;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.header__logo img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: auto;
}

.header__logo.is-scrolled {
  width: 76px;
  height: 76px;
}

.header__nav-list {
  display: flex;
  justify-content: center;
}

.header__nav-item {
  padding-inline: calc(clamp(1rem, -1.5rem + 4vw, 2rem));
}

.header__nav-item:not(:last-child) {
  border-right: solid 1px var(--gray3);
}

.header__nav-link {
  font-size: 1.125rem;
  color: var(--brown1);
  transition: all 0.4s ease-out;
}

.header__nav-link:hover {
  opacity: 0.6;
}

.header__actions {
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: center;
  gap: 10px;
}

.header__button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  height: 49px;
  border-radius: 25px;
  font-weight: 500;
  transition: all 0.4s ease-out;
}

.header__button--contact {
  width: 180px;
  gap: 21px;
  background-color: var(--brown1);
  color: var(--white);
}

.header__button--contact:hover {
  opacity: 0.6;
}

.header__button--line {
  width: 160px;
  gap: 13px;
  background-color: var(--white);
  color: var(--green1);
  border: 1px solid var(--green1);
}

.header__button--line:hover {
  background-color: var(--green1);
  color: var(--white);
}

.header__icon--instagram {
  width: 31px;
  height: 31px;
  transition: all 0.4s ease-out;
}

.header__icon--instagram img {
  width: 100%;
  height: 100%;
}

.header__icon--instagram:hover {
  opacity: 0.6;
}

.burger {
  display: none;
}

@media screen and (max-width: 1000px) {
  .header {
    height: 140px;
    padding-inline: 16px;
  }

  .header__button-text {
    display: none;
  }

  .header__button {
    width: 90px;
    height: 90px;
    border-radius: 50%;
  }

  .header__button--contact img {
    width: 26px;
    height: 18px;
  }

  .header__button--line img {
    width: 39px;
    height: 39px;
  }

  .header__icon--instagram {
    width: 52px;
    height: 52px;
  }
}

@media screen and (max-width: 840px) {
  .header__logo {
    left: 27px;
    top: 25px;
  }

  .header__logo.is-scrolled {
    top: 26px;
  }

  .header__inner {
    padding-right: 102px;
  }

  .burger {
    width: 90px;
    height: 90px;
    background-color: var(--white);
    border: solid 1px var(--brown1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 14px;
    position: fixed;
    z-index: 99;
    top: 26px;
    right: 16px;
  }

  .burger__line {
    display: block;
    width: 50px;
    height: 1px;
    background-color: var(--brown1);
    transition: all 0.6s ease;
  }

  .is-active .burger__line:nth-of-type(1) {
    transform: translateY(16px) rotate(45deg);
  }

  .is-active .burger__line:nth-of-type(2) {
    opacity: 0;
  }

  .is-active .burger__line:nth-of-type(3) {
    transform: translateY(-13px) rotate(-45deg);
  }

  .header__nav {
    background-color: var(--white);
    position: fixed;
    top: 0;
    left: 0;
    flex-direction: column;
    gap: 73px;
    width: 100%;
    height: 100svh;
    padding-top: 124px;
    translate: 100% 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s;
  }

  .is-active .header__nav {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    overflow: auto;
  }

  .header__nav-list {
    flex-direction: column;
    align-items: center;
    gap: 73px;
    padding-top: 150px;
  }

  .header__nav-item:not(:last-child) {
    border-right: none;
  }

  .header__nav-link {
    font-size: calc(clamp(1rem, 4.27vw, 2rem));
  }
}

@media screen and (max-width: 600px) {
  .header {
    height: 70px;
    padding-inline: 8px;
  }

  .header__inner {
    padding-right: 48px;
  }

  .header__logo {
    width: 108px;
    height: 108px;
    left: 28px;
    top: 13px;
  }

  .header__logo.is-scrolled {
    width: 47px;
    height: 47px;
    top: 13px;
  }

  .header__button {
    width: 45px;
    height: 45px;
  }

  .header__button--contact img {
    width: 13px;
    height: 9px;
  }

  .header__button--line img {
    width: 20px;
    height: 20px;
  }

  .header__icon--instagram {
    width: 26px;
    height: 26px;
  }

  .header__nav {
    padding-top: 100px;
  }

  .burger {
    width: 45px;
    height: 45px;
    gap: 7px;
    top: 13px;
    right: 8px;
  }

  .burger__line {
    width: 25px;
    height: 1px;
  }

  .is-active .burger__line:nth-of-type(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .is-active .burger__line:nth-of-type(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* mainvisual
-------------------------------- */
.mainvisual {
  position: relative;
  width: 100%;
  height: 100vh; /* 全画面表示 */
  overflow: hidden;
  padding-top: 100px;
  padding-inline: 24px;
}

.mainvisual__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.mainvisual__picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.mainvisual__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mainvisual__picture-1,
.mainvisual__picture-2,
.mainvisual__picture-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.mainvisual__picture-1 {
  background-image: url("../img/mainvisual-1.webp");
  animation: slide-animation-01 24s infinite;
}
.mainvisual__picture-2 {
  background-image: url("../img/mainvisual-2.webp");
  animation: slide-animation-02 24s infinite;
}
.mainvisual__picture-3 {
  background-image: url("../img/mainvisual-3.webp");
  animation: slide-animation-03 24s infinite;
}
@keyframes slide-animation-01 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
    transform: scale(1.15);
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slide-animation-02 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
    transform: scale(1.1);
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide-animation-03 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
    transform: scale(1);
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

.mainvisual__text {
  position: absolute;
  bottom: 11.5vh;
  left: 7%;
  color: var(--white);
  z-index: 2;
}

.mainvisual__text-title {
  font-size: 4.125rem;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.5em;
}

.mainvisual__text-subtitle {
  font-size: 1.5rem;
  font-weight: 200;
  letter-spacing: 0.2em;
  margin-top: 24px;
}

.mainvisual__text-subtitle span {
  font-size: 0.8em;
  vertical-align: 50%;
}

@media screen and (max-width: 910px) {
  .mainvisual {
    padding-inline: 16px;
  }

  .mainvisual__text {
    bottom: 89px;
  }

  .mainvisual__text-title {
    font-size: calc(clamp(2.375rem, 10.13vw, 4.75rem));
    letter-spacing: 0.3em;
  }

  .mainvisual__text-subtitle {
    font-size: calc(clamp(0.875rem, 0.125rem + 3.2vw, 1.625rem));
  }
}

@media screen and (max-width: 600px) {
  .mainvisual {
    padding-top: 70px;
    height: 500px;
  }

  .mainvisual__text {
    bottom: 44px;
    left: 26px;
  }
}

/* greeting
-------------------------------------------------- */
.greeting {
  padding: 108px 24px 78px;
}

.greeting__inner {
  max-width: var(--content-width);
  margin-inline: auto;
}

.greeting__content {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 72px;
  margin-top: 40px;
  align-items: center;
}

.greeting__image {
  position: relative;
}

.greeting__image-profile {
  width: 100%;
  height: auto;
  display: block;
}

.greeting__image-logo {
  width: 162px;
  height: 162px;
  position: absolute;
  bottom: -70px;
  right: -36px;
}

.greeting__circle-block {
  margin: auto;
  position: relative;
  transition: all 0.4s ease-out;
}

.greeting__circleText {
  overflow: visible;
  animation: rotation 18s linear infinite;
}

.greeting__circleText-circle {
  fill: none;
}

.greeting__circleText-text {
  fill: var(--brown1);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.05em;
}

.greeting__image-logo img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: auto;
}

.greeting__text {
  font-size: 1.125rem;
  line-height: 2;
  color: var(--brown1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1em;
  text-align: justify;
}

.greeting__more {
  margin-top: 74px;
  text-align: right;
  padding-inline: 24px;
}

.greeting__more-link {
  font-size: 1.125rem;
  color: var(--brown1);
  font-family: "Cinzel", serif;
  font-weight: 400;
  letter-spacing: 0.2em;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 12px;
}

.greeting__more-arrow {
  width: 4em;
  height: 1px;
  background-color: var(--brown1);
  position: relative;
  transition: all 0.4s ease-out;
}

.greeting__more-arrow::after {
  content: "";
  display: block;
  background-color: var(--brown1);
  width: 12px;
  height: 1px;
  rotate: 45deg;
  position: absolute;
  top: -5px;
  right: 0px;
}

.greeting__more-link:hover .greeting__more-arrow {
  translate: 10px 0;
}

@media screen and (max-width: 1000px) {
  .greeting {
    padding: 124px 16px;
  }
  .greeting__content {
    grid-template-columns: 1fr;
  }

  .greeting__image {
    max-width: 527px;
    margin-inline: auto;
  }

  .greeting__image-logo {
    right: 0;
    left: -56px;
    bottom: -40px;
  }

  .greeting__text {
    font-size: 1.625rem;
  }

  .greeting__more-link {
    font-size: 2rem;
  }
}

@media screen and (max-width: 555px) {
  .greeting {
    padding: 62px 8px;
  }
  .greeting__content {
    grid-template-columns: 1fr;
  }

  .greeting__image {
    max-width: 264px;
    margin-inline: auto;
  }

  .greeting__image-logo {
    width: 121px;
    height: 121px;
    right: 0;
    left: -28px;
    bottom: -20px;
  }

  .greeting__text {
    font-size: 0.8125rem;
  }

  .greeting__more {
    margin-top: 48px;
  }

  .greeting__more-link {
    font-size: 1rem;
  }
}

/* strong
---------------------------------------------------------------- */
.strong {
  padding-inline: 24px;
}

.strong__inner {
  background: url(../img/strong-bg.webp) no-repeat center top/cover;
  margin-inline: auto;
  height: 940px;
  padding-inline: 20px;
  display: grid;
  place-items: center;
}

.strong__content {
  max-width: 1024px;
  margin-inline: auto;
}

.strong__text {
  font-size: 1.125rem;
  line-height: 2;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--white);
  margin-top: 43px;
  display: grid;
  gap: 2em;
  text-align: justify;
}

@media screen and (max-width: 1000px) {
  .strong {
    padding-inline: calc(clamp(0.5rem, 2.13vw, 1rem));
  }

  .strong__inner {
    height: auto;
    padding-inline: calc(clamp(0.625rem, 2.67vw, 1.25rem));
    padding-block: calc(clamp(5rem, 21.33vw, 10rem)) calc(clamp(3.875rem, 16.53vw, 7.75rem));
  }

  .strong__text {
    font-size: calc(clamp(0.875rem, 3.73vw, 1.75rem));
  }
}

/* feature
--------------------------------------------------------- */
.feature {
  padding: 106px 24px 0px;
}

.feature__inner {
  max-width: var(--content-width);
  margin-inline: auto;
}

.feature__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 28px 27px;
  margin-top: 28px;
}

.feature-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.feature-card__image {
  width: 100%;
  height: auto;
  margin-inline: auto;
}

.feature-card__title {
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--brown1);
}

.feature-card__text {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
}

.feature__more-link {
  font-size: 1.125rem;
  color: var(--brown1);
  font-family: "Cinzel", serif;
  font-weight: 400;
  letter-spacing: 0.2em;
  width: 70%;
  max-width: 979px;
  height: 45px;
  margin-inline: auto;
  margin-top: 84px;
  display: grid;
  place-items: center;
  border: solid 1px var(--brown1);
  border-radius: 22.5px;
  position: relative;
}

.feature__more-arrow {
  width: 96px;
  height: 1px;
  background-color: var(--brown1);
  position: absolute;
  right: -48px;
  transition: all 0.4s ease-out;
}

.feature__more-arrow::after {
  content: "";
  display: block;
  background-color: var(--brown1);
  width: 12px;
  height: 1px;
  rotate: 45deg;
  position: absolute;
  top: -5px;
  right: 0px;
}

.feature__more-link:hover .feature__more-arrow {
  translate: 10px 0;
}

@media screen and (max-width: 1000px) {
  .feature {
    padding-inline: calc(clamp(0.5rem, 2.13vw, 1rem));
  }

  .feature__grid {
    gap: calc(clamp(2.25rem, -0.063rem + 9.87vw, 4.563rem)) 27px;
  }

  .feature-card {
    gap: calc(clamp(1.125rem, 4.8vw, 2.25rem));
  }

  .feature-card__title {
    font-size: calc(clamp(1.313rem, 5.6vw, 2.625rem));
  }

  .feature-card__text {
    font-size: calc(clamp(0.813rem, 3.47vw, 1.625rem));
  }

  .feature__more-link {
    width: 70%;
    font-size: calc(clamp(1rem, 4.27vw, 2rem));
    max-width: calc(clamp(20.625rem, 88vw, 41.25rem));
    height: calc(clamp(2.813rem, 12vw, 5.625rem));
    border-radius: calc(clamp(1.438rem, 0.063rem + 5.87vw, 2.813rem));
  }

  .feature__more-arrow {
    width: 48px;
    right: -24px;
  }
}

@media screen and (max-width: 750px) {
  .feature__grid {
    grid-template-columns: 1fr;
  }
}

/* before & after
--------------------------------------------------------------------- */
.before-after {
  padding: 151px 0px 123px;
}

.before-after__inner {
  padding-inline: 24px;
}

.before-after__image {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.swiper-area {
  position: relative;
}

.swiper {
  margin-top: 40px;
  height: 469px;
}

.swiper-pagination {
  bottom: -35px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  background-color: var(--white);
  border: solid 1px var(--gray3);
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: var(--brown1);
}

.swiper-slide-active {
  transform: scale(1); /* 中央のスライドだけ等倍 */
  opacity: 1;
}

@media screen and (max-width: 600px) {
  .swiper {
    height: 269px;
  }
}

@media screen and (max-width: 450px) {
  .swiper {
    margin-top: 20px;
  }
}

/* voice
------------------------------------------------------ */
.voice {
  padding: 123px 24px 88px;
}

.voice__upper-inner {
  max-width: 1024px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.voice__more-link {
  font-size: 1.125rem;
  color: var(--brown1);
  font-family: "Cinzel", serif;
  font-weight: 400;
  letter-spacing: 0.2em;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 12px;
}

.voice__more-arrow {
  width: 4em;
  height: 1px;
  background-color: var(--brown1);
  position: relative;
  transition: all 0.4s ease-out;
}

.voice__more-arrow::after {
  content: "";
  display: block;
  background-color: var(--brown1);
  width: 12px;
  height: 1px;
  rotate: 45deg;
  position: absolute;
  top: -5px;
  right: 0px;
}

.voice__more-link:hover .voice__more-arrow {
  translate: 10px 0;
}

.voice__card-wrapper {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.voice__card-wrapper::-webkit-scrollbar {
  display: none;
}

.voice__card {
  width: 1024px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
  margin-top: 32px;
}

.voice__card-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.voice__card-pic {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: all 0.4s ease-out;
}

.voice__card-pic:hover {
  opacity: 0.6;
}

.voice__card-title a {
  color: var(--brown1);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-align: justify;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.4s ease-out;
}

.voice__card-title a:hover {
  opacity: 0.6;
}

.voice__card-text p {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--brown1);
  text-align: justify;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 1000px) {
  .voice {
    padding-inline: calc(clamp(0.5rem, 2.13vw, 1rem));
  }
}
@media screen and (max-width: 750px) {
  .voice__card {
    gap: calc(clamp(0.75rem, 0.063rem + 2.93vw, 1.438rem));
  }

  .voice__more-link {
    font-size: calc(clamp(1rem, 4.27vw, 2rem));
  }

  .voice__card-title a {
    font-size: calc(clamp(1.125rem, 4.8vw, 2.25rem));
  }

  .voice__card-text p {
    font-size: calc(clamp(0.813rem, 3.47vw, 1.625rem));
  }
}

@media screen and (max-width: 700px) {
  .voice__card-pic {
    width: 75%;
    margin-inline: auto;
  }
}

/* news
-------------------------------------------------------- */
.news {
  background-color: var(--gray1);
  padding: 122px 24px 96px;
}

.news__inner {
  max-width: 1024px;
  margin-inline: auto;
}

.news__items {
  margin-top: 50px;
}

.news__item {
  display: grid;
  grid-template-columns: 1fr;
  padding-block: 30px 26px;
  border-top: 1px solid var(--gray2);
}

.news__item:last-child {
  border-bottom: 1px solid var(--gray2);
}

.news__item-date {
  font-size: 0.875rem;
  font-family: "Cinzel", serif;
  font-weight: 300;
  color: var(--brown1);
}

.news__item-title {
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.1em;
  margin-top: 18px;
}

.news__item-text {
  margin-top: 28px;
}

.news__item-text a {
  display: inline-block;
  font-weight: 700;
  border-bottom: solid 1px currentColor;
  transition: all 0.4s ease-out;
}

.news__item-text a:hover {
  opacity: 0.6;
}

.news__item-text p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

@media screen and (max-width: 1000px) {
  .news {
    padding-inline: calc(clamp(0.5rem, 2.13vw, 1rem));
    padding-block: calc(clamp(4.813rem, 1.25rem + 15.2vw, 8.375rem)) calc(clamp(4.5rem, 19.2vw, 9rem));
  }

  .news__item {
    padding-block: calc(clamp(1.25rem, 5.33vw, 2.5rem)) calc(clamp(1.563rem, 6.67vw, 3.125rem));
  }

  .news__item-date {
    font-size: calc(clamp(0.625rem, 2.67vw, 1.25rem));
  }

  .news__item-title {
    font-size: calc(clamp(0.938rem, 4vw, 1.875rem));
  }

  .news__item-text {
    font-size: calc(clamp(0.813rem, 3.47vw, 1.625rem));
  }
}

/* faq
------------------------------------------------------ */
.faq {
  padding: 93px 24px 113px;
}

.faq__inner {
  max-width: 1024px;
  margin-inline: auto;
}

.faq__inner + .faq__inner {
  margin-top: 51px;
}

.faq__content {
  border-bottom: 1px solid var(--gray2);
  padding-inline: 12px;
}

.faq__content:first-of-type {
  border-top: 1px solid var(--gray2);
}

.summary {
  display: block;
}

.summary::-webkit-details-marker {
  display: none;
}

.faq__question {
  cursor: pointer;
  padding: 43px 0;
}

.faq__question-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0 43px;
}

.faq__question-initial {
  font-size: 2rem;
  font-family: "Cinzel", serif;
  font-weight: 400;
  color: var(--brown1);
}

.faq__question-text {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--brown1);
}

.faq__question-line {
  content: "";
  background-color: var(--brown1);
  display: block;
  width: 40px;
  height: 1px;
  position: relative;
}

.faq__question-line::after {
  content: "";
  background-color: var(--brown1);
  display: block;
  width: 40px;
  height: 1px;
  position: absolute;
  rotate: 90deg;
  transition: all 0.5s;
}

details[open] .faq__question-line::after {
  rotate: 0deg;
  opacity: 0;
}

.faq__answer-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 43px;
  padding-bottom: 43px;
}

.faq__answer-initial {
  font-size: 2rem;
  font-family: "Cinzel", serif;
  font-weight: 400;
  color: var(--brown1);
}

.faq__answer-inner p {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--brown1);
}

@media screen and (max-width: 1000px) {
  .faq {
    padding-inline: calc(clamp(0.5rem, 2.13vw, 1rem));
    padding-block: calc(clamp(4.813rem, 1.25rem + 15.2vw, 8.375rem)) calc(clamp(4.5rem, 19.2vw, 9rem));
  }

  .faq__question-initial,
  .faq__answer-initial {
    font-size: calc(clamp(1.438rem, 6.13vw, 2.875rem));
  }

  .faq__question-text,
  .faq__answer-inner p {
    font-size: calc(clamp(1rem, 4.27vw, 2rem));
  }

  .faq__question-line {
    width: calc(clamp(1.688rem, 7.2vw, 3.375rem));
  }

  .faq__question-line::after {
    width: calc(clamp(1.688rem, 7.2vw, 3.375rem));
  }
}

/* contact
----------------------------------------------------- */
.contact {
  padding-inline: 24px;
  height: 519px;
}

.contact__inner {
  background: url(../img/contact-bg.webp) no-repeat center top/cover;
  height: 100%;
  display: grid;
  align-items: center;
}

.contact__content {
  width: 100%;
  max-width: 1024px;
  margin-inline: auto;
  margin: auto;
  padding-inline: 20px;
}

.contact__buttons {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: 47px;
  margin-top: 45px;
}

.contact__button {
  font-size: 1rem;
  font-weight: 600;
  background-color: var(--white);
  width: 340px;
  height: 49px;
  padding-inline: 17px;
  border-radius: 24.5px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  text-align: center;
  position: relative;
}

.contact__button-mail {
  color: var(--brown1);
  border: solid 1px var(--brown1);
}

.contact__button-mail--arrow {
  content: "";
  display: block;
  width: 33px;
  height: 1px;
  background-color: var(--brown1);
  position: absolute;
  right: 0;
  transition: all 0.4s ease-out;
}

.contact__button-mail--arrow::before {
  content: "";
  display: block;
  width: 10px;
  height: 1px;
  background-color: var(--white);
  position: absolute;
  right: -33px;
  bottom: 3px;
  rotate: 45deg;
  transition: all 0.4s ease-out;
}

.contact__button-mail--arrow::after {
  content: "";
  display: block;
  width: 33px;
  height: 1px;
  background-color: var(--white);
  position: absolute;
  right: -33px;
  transition: all 0.4s ease-out;
}

.contact__button-line {
  background-color: var(--green1);
  color: var(--white);
}

.contact__button-line--arrow {
  width: 66px;
  height: 1px;
  background-color: var(--white);
  position: absolute;
  right: -33px;
  transition: all 0.4s ease-out;
}

.contact__button-line--arrow::after {
  content: "";
  display: block;
  background-color: var(--white);
  width: 10px;
  height: 1px;
  rotate: 45deg;
  position: absolute;
  right: -2px;
  bottom: 3px;
}

.contact__button-line:hover .contact__button-line--arrow {
  translate: 10px 0;
}

.contact__button-mail:hover .contact__button-mail--arrow {
  width: 22px;
}

.contact__button-mail:hover .contact__button-mail--arrow::after {
  width: 42px;
  right: -43px;
}

.contact__button-mail:hover .contact__button-mail--arrow::before {
  translate: 10px 0;
}

@media screen and (max-width: 1000px) {
  .contact {
    height: auto;
    padding-inline: calc(clamp(0.5rem, 2.13vw, 1rem));
  }

  .contact__inner {
    padding-block: calc(clamp(6.5rem, 27.73vw, 13rem));
  }

  .contact__buttons {
    grid-template-columns: 1fr;
    gap: calc(clamp(1.313rem, 5.6vw, 2.625rem));
  }

  .contact__button {
    font-size: calc(clamp(1rem, 4.27vw, 2rem));
    width: 90%;
    max-width: calc(clamp(19.688rem, 84vw, 39.375rem));
    height: calc(clamp(2.875rem, 12.27vw, 5.75rem));
    border-radius: calc(clamp(1.438rem, 6.13vw, 2.875rem));
    padding-inline: calc(clamp(1.188rem, 5.07vw, 2.375rem));
  }

  .contact__button-mail img {
    width: calc(clamp(1.188rem, 5.07vw, 2.375rem));
    height: auto;
  }

  .contact__button-line img {
    width: calc(clamp(2.5rem, 10.67vw, 5rem));
    height: auto;
  }
}

/* footer
------------------------------------------------------------------- */
.footer {
  padding: 141px 24px 70px;
  text-align: center;
}

.footer__inner {
  max-width: var(--content-width);
  margin-inline: auto;
}

.footer__image-logo {
  width: 162px;
  aspect-ratio: 1/1;
  margin-inline: auto;
}

.footer__circle-block {
  margin: auto;
  position: relative;
  transition: all 0.4s ease-out;
}

.footer__circleText {
  overflow: visible;
  animation: rotation 18s linear infinite;
}

.footer__circleText-circle {
  fill: none;
}

.footer__circleText-text {
  fill: var(--brown1);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.05em;
}

.footer__image-logo img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: auto;
}

.footer__logo img {
  width: 100%;
  height: 100%;
}

.footer__icon-instagram {
  width: 31px;
  aspect-ratio: 1/1;
  margin-inline: auto;
  margin-top: 70px;
  transition: all 0.4s ease-out;
}

.footer__icon-instagram:hover {
  opacity: 0.6;
}

.footer__icon-instagram img {
  width: 100%;
  height: 100%;
}

.footer__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 92px;
}

.footer__nav-list {
  padding-inline: 2em;
}

.footer__nav-list:not(:last-child) {
  border-right: solid 1px var(--gray3);
}

.footer__nav-link {
  color: var(--brown1);
  font-size: 1.125rem;
  font-weight: 600;
  transition: all 0.4s ease-out;
}

.footer__nav-link:hover {
  opacity: 0.6;
}

.footer__copyright {
  color: var(--brown1);
  font-size: 0.75rem;
  margin-top: 164px;
}

@media screen and (max-width: 1000px) {
  .footer {
    padding-block: clamp(4.313rem, 18.4vw, 8.625rem) calc(clamp(1.688rem, 7.2vw, 3.375rem));
    padding-inline: calc(clamp(0.5rem, 2.13vw, 1rem));
  }

  .footer__image-logo {
    width: calc(clamp(8.125rem, 34.67vw, 16.25rem));
  }

  .footer__icon-instagram {
    width: calc(clamp(1.875rem, 8vw, 3.75rem));
  }

  .footer__nav {
    font-size: calc(clamp(1rem, 4.27vw, 2rem));
    flex-direction: column;
    gap: 3em;
  }

  .footer__nav-list:not(:last-child) {
    border-right: none;
  }

  .footer__nav-link {
    font-size: calc(clamp(1rem, 4.27vw, 2rem));
  }

  .footer__copyright {
    font-size: calc(clamp(0.625rem, 0.5rem + 0.53vw, 0.75rem));
    letter-spacing: 0.1em;
  }
}

/* 下層ページ
------------------------------------------------- */
.page-mainvisual {
  height: 600px;
  padding-top: 140px;
  box-sizing: content-box;
  position: relative;
}

.page-mainvisual__inner {
  max-width: var(--content-width);
  height: 100%;
  margin-inline: auto;
  padding-inline: 20px;
  position: relative;
  display: grid;
  align-items: center;
  justify-content: start;
}

.page-mainvisual__image {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.page-mainvisual__image img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  object-position: center top;
}

/* パンくず */
.breadcrumbs {
  position: absolute;
  bottom: 21px;
  left: 20px;
  font-size: 0.75rem;
  color: var(--white);
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.breadcrumbs > a,
.breadcrumbs > li {
  color: var(--white);
}

@media screen and (max-width: 600px) {
  .page-mainvisual {
    padding-top: 70px;
    height: 500px;
  }
  .page-mainvisual__image,
  .page-mainvisual__image img {
    height: 500px;
  }
}

/* contact
-------------------------------------------------- */
.contact-form {
  padding: 170px 24px 0px;
}

.contact-form__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-bottom: 82px;
  border-bottom: solid 1px var(--gray5);
}

.contact-form__description {
  background-color: var(--gray4);
  padding: 49px;
  border-radius: 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 60px;
}

.contact-form__description-text {
  width: 100%;
  color: var(--brown1);
  font-size: 1.25rem;
  line-height: 1.8;
}

.contact-form__description-text--small {
  display: block;
  margin-top: 0.5em;
  font-size: 1rem;
}

.contact-form__description-tell,
.contact-form__description-mail {
  display: inline-block;
}

.contact-form__description-tell {
  font-size: 2.875rem;
  font-family: "Cinzel", serif;
  font-weight: 400;
  color: var(--brown1);
  letter-spacing: 0.1em;
}

.contact-form__description-mail {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--brown1);
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 12px;
}

.contact-form__description-mail img {
  vertical-align: middle;
  margin-right: 0.5em;
}

.contact-form__content form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0px 60px;
  margin-top: 106px;
}

/* トラッカー */
.smf-progress-tracker {
  grid-column: 1/2;
  grid-row: 1/3;
  flex-direction: column;
  grid-template-columns: 1fr;
  gap: 40px;
  height: 230px;
  margin-top: 20px;
  position: relative;
}

.smf-progress-tracker__item {
  font-size: 1.25rem;
  width: 100% !important;
  height: 50px;
  flex-direction: row !important;
  gap: 14px;
  opacity: 0.3;
}

.smf-progress-tracker__item__text {
  margin-top: 0 !important;
  color: var(--brown1) !important;
  font-size: 1.125rem;
  letter-spacing: 0;
}

.smf-progress-tracker__item::after,
.smf-progress-tracker__item::before {
  display: none !important;
}

/* 現在のステップ */
.smf-progress-tracker__item[aria-current="true"] {
  opacity: 1;
}

.smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__text {
  color: var(--brown1) !important;
}

.smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number {
  background-color: var(--brown1) !important;
}

.smf-progress-tracker__item__number {
  font-size: 1.5rem;
  width: 50px !important;
  height: 50px !important;
  background-color: var(--brown1) !important;
  position: relative;
  overflow: visible !important;
}

.smf-progress-tracker__item:not(:first-of-type) .smf-progress-tracker__item__number::after {
  content: "";
  width: 2px;
  height: 40px;
  display: block;
  background-color: var(--brown1);
  position: absolute;
  top: -40px;
  left: 24px;
  opacity: 0.3;
}
/* トラッカー終了 */

/* form入力欄 */
.smf-form {
  grid-column: 2/3;
  grid-row: 1/2;
}

.smf-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 60px;
  gap: 26px;
  padding-block: 30px !important;
}

.smf-item:last-of-type,
.smf-item:nth-last-of-type(2) {
  display: grid;
  grid-template-columns: 1fr;
}

.smf-item:last-of-type .smf-item__col--controls,
.smf-item:nth-last-of-type(2) .smf-item__col--controls,
.smf-item:last-of-type .smf-item__col--label,
.smf-item:nth-last-of-type(2) .smf-item__col--label {
  width: 100%;
}

.smf-item:last-of-type .smf-item__label__text,
.smf-item:nth-last-of-type(2) .smf-item__label__text {
  display: block;
  line-height: 1.6;
}

.smf-item:last-of-type .smf-item__label .has-inline-color,
.smf-item:nth-last-of-type(2) .smf-item__label .has-inline-color {
  margin-left: 22px;
}

.smf-item:not(:first-of-type) {
  border-top: solid 1px var(--gray5);
}

.smf-item__col--label {
  max-width: 100% !important;
  padding: 0 !important;
  flex-basis: auto !important;
  width: 30%;
}

.smf-item__label__text {
  font-size: 1.125rem;
  letter-spacing: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.smf-item__label .has-inline-color {
  color: var(--white);
  font-size: 0.8em;
  font-weight: 500;
  font-style: normal;
  padding: 4px 6px;
}

.smf-item__col--controls {
  width: 70%;
}

.smf-select-control {
  width: 100%;
}

.smf-text-control__control,
.smf-select-control__control,
.smf-textarea-control__control {
  display: block;
  width: 100%;
  padding: 16px 32px !important;
  box-sizing: border-box;
  color: var(--black);
  background-color: transparent !important;
  border: none !important;
  font-size: 1.125rem;
}

.smf-text-control,
.smf-select-control,
.smf-textarea-control {
  background-color: var(--gray5) !important;
  border-radius: 5px;
}

.smf-form .smf-select-control__toggle {
  background-color: var(--gray5) !important;
  border-radius: 5px;
}

.smf-textarea-control > textarea {
  height: 300px;
  padding: 26px;
  resize: none;
  overflow-y: auto;
}

.wp-block-columns.are-vertically-aligned-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 !important;
}

.smf-action {
  grid-column: 1/3;
  grid-row: 2/3;
}

.smf-system-error-content-ready {
  grid-column: 1/3;
  grid-row: 3/4;
}

.smf-button-control__control {
  width: 400px;
  height: 65px;
  background-image: none !important;
  background: var(--brown1) !important;
  color: white !important;
  border: none !important;
  place-items: center;
  font-size: 1.125rem;
  border-radius: 30px !important;
  margin-top: 49px;
  transition: all 0.3s ease-out !important;
}

.smf-button-control__control:hover {
  background: var(--white) !important;
  color: var(--brown1) !important;
  border: solid 1px var(--brown1) !important;
}

.smf-complete-content {
  width: 100%;
  color: var(--brown1);
  font-size: 1.25rem;
  line-height: 1.8;
}

@media screen and (max-width: 880px) {
  .contact-form {
    padding: 40px 16px;
  }
  .contact-form__content form {
    grid-template-columns: 1fr;
    margin-top: 36px;
  }

  .smf-progress-tracker {
    display: inline-block;
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .smf-form {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .smf-action {
    grid-column: 1/2;
    grid-row: 3/4;
  }
  .smf-system-error-content-ready {
    grid-column: 1/2;
    grid-row: 4/5;
  }
}

@media screen and (max-width: 624px) {
  .smf-item {
    display: grid;
    grid-template-columns: 1fr;
  }

  .smf-item__col--controls {
    width: 100%;
    margin-top: 20px;
  }

  .smf-item,
  .smf-item__col--label {
    width: 100%;
  }

  .smf-item,
  .smf-item__label__text {
    display: block;
    line-height: 1.6;
  }

  .smf-item__label .has-inline-color {
    margin-left: 22px;
  }

  .contact-form__description {
    padding: 20px;
  }
  .smf-complete-content,
  .contact-form__description-text {
    font-size: 1rem;
  }

  .contact-form__description-text--small {
    font-size: 0.875rem;
  }

  .contact-form__description-tell {
    font-size: 2rem;
  }

  .contact-form__description-mail {
    font-size: 1rem;
  }

  .smf-button-control__control {
    width: 100%;
    max-width: 400px;
  }
}

/* voiceアーカイブ
------------------------------------------------------------ */
.voice-page__content {
  padding: 47px 20px 0px;
}

.voice-page__content .voice__card {
  max-width: 1024px;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(316px, 1fr));
  overflow: hidden;
  gap: 54px 38px;
}

.voice__pagination {
  margin-top: 120px;
  text-align: center;
}

.voice__pagination ul {
  display: inline-flex;
  align-items: center;
  gap: 74px;
}

.voice__pagination li {
  display: inline-block;
  height: 24px;
}

.voice__pagination li a,
.voice__pagination li span {
  display: inline-block;
  color: var(--brown1);
  text-decoration: none;
  font-size: 1.5rem;
}

.voice__pagination li span.current {
  opacity: 0.3;
}

.voice__pagination li span.dots {
  background-color: var(--brown1);
  color: var(--red6);
  border: none;
  padding: 6px;
}

.voice__pagination li > .next,
.voice__pagination li > .prev {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.voice__pagination li > .next::before,
.voice__pagination li > .prev::before {
  content: "";
  display: block;
  width: 2em;
  height: 1px;
  background-color: var(--brown1);
  transition: all 0.4s ease-out;
}

.voice__pagination li > .next::after,
.voice__pagination li > .prev::after {
  content: "";
  display: block;
  background-color: var(--brown1);
  width: 12px;
  height: 1px;
  rotate: 45deg;
  position: absolute;
  top: 7px;
  right: 0;
  transition: all 0.4s ease-out;
}

.voice__pagination li > .prev::after {
  right: auto;
  left: 0;
  rotate: -45deg;
}

.voice__pagination li > .next:hover::before,
.voice__pagination li > .next:hover::after {
  translate: 10px 0;
}

.voice__pagination li > .prev:hover::before,
.voice__pagination li > .prev:hover::after {
  translate: -10px 0;
}

@media screen and (max-width: 700px) {
  .voice-page__content {
    padding: 24px 16px 55px;
  }

  .voice-page__content .voice__card {
    grid-template-columns: 1fr;
    gap: 27px 12px;
  }
}

/* comment
-------------------------------------------------------- */
.comment {
  padding-block: 34px 87px;
}

.comment__inner {
  max-width: 1024px;
  padding-inline: 12px;
  margin-inline: auto;
}

.comment__handwriting {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 33px;
  border-top: solid 1px var(--gray6);
}

.comment__handwriting-item {
  width: 100%;
  border-bottom: solid 1px var(--gray6);
}

.comment__handwriting-image {
  width: 100%;
  height: auto;
  margin-inline: auto;
}

.comment__handwriting-image-1 {
  max-width: 640px;
}

.comment__handwriting-image-2 {
  max-width: 760px;
}

.comment__handwriting-image-3 {
  max-width: 779px;
}

.comment__chat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 8px 12px;
  margin-top: 13px;
}

.comment__chat-image {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 615px) {
  .comment__chat {
    gap: 30px;
    margin-top: 26px;
  }

  .comment__chat-image {
    width: 75%;
    margin-inline: auto;
  }
}

/* voice個別ページ
------------------------------------------------------- */
.voice-content {
  max-width: 800px;
  margin-inline: auto;
  padding: 140px 12px 150px;
  color: var(--brown1);
}

.voice-breadcrumbs {
  position: relative;
  color: var(--brown1);
  font-size: 0.875rem;
  left: 0px;
}

.voice-breadcrumbs > a {
  color: var(--brown1);
}

.voice-student-information {
  display: flex;
  justify-content: start;
  align-items: end;
  gap: 1em;
  margin-top: 2em;
}

.voice-student-occupation {
  color: var(--brown1);
  font-size: 1rem;
}

.voice-student-name {
  font-size: 1.625rem;
}

.voice-title {
  color: var(--brown1);
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.4;
  margin-top: 23px;
}

.voice-thumbnail {
  width: 100%;
  height: auto;
  margin-inline: auto;
  margin-top: 26px;
}

.voice-body {
  margin-top: 67px;
  padding-block: 46px;
  border-top: solid 1px var(--gray5);
  border-bottom: solid 1px var(--gray5);
}

.voice-body h2 {
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1em;
  margin-top: 35px;
}

.voice-body h2::before {
  content: "";
  display: block;
  background-color: var(--brown1);
  width: 13px;
  height: 40px;
}

.voice-body h3 {
  color: var(--brown1);
  font-size: 1.125rem;
  padding: 16px 27px;
  background-color: var(--gray5);
  margin-top: 18px;
}

.voice-body p {
  font-size: 1.125rem;
  line-height: 1.5;
}

.voice-body a {
  display: inline-block;
  font-weight: bold;
  color: var(--brown1);
  border-bottom: solid 1px var(--brown1);
}

.voice-body img {
  width: 84%;
  margin-inline: auto;
  margin-top: 32px;
  border-radius: 20px;
}

.voice-body ul {
  margin-top: 18px;
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  gap: 8px;
}

.voice-body li {
  font-size: 1.25rem;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 16px;
}

.post-date {
  color: var(--brown1);
  font-size: 0.875rem;
}

.voice__back {
  margin-top: 84px;
  text-align: center;
}

.voice__back-link {
  font-size: 1.5rem;
  color: var(--brown1);
  font-family: "Cinzel", serif;
  font-weight: 400;
  letter-spacing: 0.2em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.voice__back-arrow {
  width: 2em;
  height: 1px;
  background-color: var(--brown1);
  position: relative;
  transition: all 0.4s ease-out;
}

.voice__back-arrow::after {
  content: "";
  display: block;
  background-color: var(--brown1);
  width: 12px;
  height: 1px;
  rotate: 45deg;
  position: absolute;
  top: -5px;
  right: 0px;
}

.voice__back-link:hover .voice__back-arrow {
  translate: 10px 0;
}

.wp-block-embed__wrapper iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 500/281;
}

@media screen and (max-width: 500px) {
  .voice-content {
    padding: 70px 12px 75px;
  }

  .voice-student-information {
    flex-direction: column;
    align-items: start;
  }

  .voice-student-occupation {
    font-size: 0.875rem;
  }

  .voice-student-name {
    font-size: 1.25rem;
  }

  .voice-title {
    font-size: 1.75rem;
  }

  .voice-body {
    margin-top: 33px;
    padding-block: 23px;
  }

  .voice-body p {
    font-size: 1rem;
  }

  .voice__back-link {
    font-size: 1.25rem;
  }
}

/* about
--------------------------------------------------------------------- */
.about__message {
  padding-block: calc(clamp(4rem, 2.239rem + 7.52vw, 7.875rem)) calc(clamp(4rem, 2.409rem + 6.79vw, 7.5rem));
}

.about__message-inner {
  max-width: var(--content-width);
  padding-inline: 24px;
  margin-inline: auto;
}

.about__message-main {
  font-size: calc(clamp(1.125rem, 0.898rem + 0.97vw, 1.625rem));
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

.about__message-sub {
  font-size: calc(clamp(0.875rem, 0.761rem + 0.48vw, 1.125rem));
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  margin-top: 26px;
}

/* profile
---------------------------------------------------------------------- */
.profile__inner {
  padding-top: 0;
}

.profile__text-title {
  color: var(--brown1);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.4;
}

@media screen and (max-width: 555px) {
  .profile__text-title {
    font-size: 1.25rem;
  }
}

/* curriculum
--------------------------------------------------------------------- */
.curriculum {
  padding: calc(clamp(0rem, -2.557rem + 10.91vw, 5.625rem)) 0 calc(clamp(2.938rem, 1.602rem + 5.7vw, 5.875rem));
}

.curriculum__inner {
  max-width: var(--content-width);
  padding-inline: 24px;
  margin-inline: auto;
}

.curriculum__grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: calc(clamp(1.25rem, -0.028rem + 5.45vw, 4.063rem)) calc(clamp(1.25rem, 0.057rem + 5.09vw, 3.875rem));
}

.curriculum-card {
  text-align: center;
}

.curriculum-card__icon {
  max-width: 300px;
  width: 90%;
  aspect-ratio: 1/1;
  margin-inline: auto;
  background-color: var(--gray4);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.curriculum-card__icon img {
  width: 43%;
  height: auto;
  object-fit: contain;
}

.curriculum-card__title {
  margin-top: 24px;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--brown1);
}

.curriculum-card__text {
  margin-top: 24px;
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--brown1);
  text-align: left;
}

.curriculum__details {
  margin-top: calc(clamp(4.25rem, 2.318rem + 8.24vw, 8.5rem));
}

.curriculum-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 22px;
}

.curriculum-header__title {
  background-color: var(--brown2);
  color: var(--white);
  font-size: calc(clamp(1.125rem, 0.898rem + 0.97vw, 1.625rem));
  font-weight: 500;
  width: calc(clamp(3.75rem, 2.614rem + 4.85vw, 6.25rem));
  height: calc(clamp(1.875rem, 1.449rem + 1.82vw, 2.813rem));
  border-radius: 5px;
  display: grid;
  place-items: center;
}

.curriculum-header__subtitle {
  font-size: calc(clamp(1.125rem, 0.898rem + 0.97vw, 1.625rem));
  color: var(--brown1);
  font-weight: 500;
}

.curriculum-table {
  margin-top: calc(clamp(1.625rem, 0.886rem + 3.15vw, 3.25rem));
}

.curriculum-table__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
}

.curriculum-table__label {
  color: var(--brown1);
  border: solid 1px currentColor;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 500;
  display: grid;
  place-items: center;
  width: 101px;
  height: 35px;
}

.curriculum-table__content {
  padding-top: 8px;
}

.curriculum-table__title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--brown1);
}

.curriculum-table__list {
  margin-top: 18px;
  color: var(--brown1);
  font-size: calc(clamp(0.875rem, 0.761rem + 0.48vw, 1.125rem));
  font-weight: 500;
  line-height: 1.4;
}

.curriculum-table__list > li {
  list-style: inside;
}

.curriculum-table__row--total {
  padding: 9px 10px;
  display: flex;
  justify-content: start;
  align-items: center;
  border-top: solid 1px var(--gray7);
  border-bottom: solid 1px var(--gray7);
  margin-top: 26px;
}

.curriculum-table__row--total .curriculum-table__label {
  background-color: var(--gray6);
  border: none;
  font-size: 1.125rem;
  width: calc(clamp(6.25rem, 5.568rem + 2.91vw, 7.75rem));
  height: calc(clamp(1.875rem, 1.591rem + 1.21vw, 2.5rem));
  display: grid;
  place-items: center;
}

.curriculum-table__time {
  font-size: calc(clamp(1rem, 0.886rem + 0.48vw, 1.25rem));
  font-weight: 500;
  color: var(--brown1);
}

.curriculum-message {
  margin-top: calc(clamp(3rem, 1.636rem + 5.82vw, 6rem));
}

.curriculum-message__main {
  font-size: calc(clamp(1.125rem, 0.898rem + 0.97vw, 1.625rem));
  font-weight: 500;
  line-height: 1.8;
  color: var(--brown1);
  text-align: center;
}

.curriculum-message__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 16px;
}

.curriculum-message__item {
  color: var(--brown1);
  background-color: var(--gray6);
  border-radius: 10px;
  font-size: calc(clamp(1rem, 0.886rem + 0.48vw, 1.25rem));
  font-weight: 500;
  line-height: 1.4;
  padding: calc(clamp(0.938rem, 0.511rem + 1.82vw, 1.875rem)) calc(clamp(1.188rem, 0.648rem + 2.3vw, 2.375rem));
}

.curriculum-table--last > .curriculum-table__row:first-of-type {
  grid-template-columns: 1fr;
}

.curriculum-table--last > .curriculum-table__row:first-of-type > .curriculum-table__label {
  width: 230px;
  height: 35px;
}

.curriculum-table__text {
  color: var(--brown1);
  font-size: calc(clamp(0.875rem, 0.761rem + 0.48vw, 1.125rem));
  font-weight: 500;
  margin-top: 1em;
}

@media screen and (max-width: 500px) {
  .curriculum__inner {
    padding-inline: 16px;
  }

  .curriculum-table__row {
    grid-template-columns: 1fr;
    gap: 0px;
  }

  .curriculum-table__row--total {
    gap: 12px;
    margin-top: 13px;
  }

  .curriculum-table__title {
    margin-top: 6px;
    font-size: 1.125rem;
  }

  .curriculum-table__list {
    padding-left: 1em;
  }

  .curriculum-table__content {
    padding: 0;
  }
}

/* flow
------------------------------------------------------------ */
.flow {
  margin-top: calc(clamp(3.75rem, 2.045rem + 7.27vw, 7.5rem));
  padding: calc(clamp(3.188rem, 1.739rem + 6.18vw, 6.375rem)) 0px calc(clamp(3.563rem, 1.943rem + 6.91vw, 7.125rem));
  background-color: var(--gray1);
}

.flow__inner {
  max-width: var(--content-width);
  padding-inline: 24px;
  margin-inline: auto;
}

.flow__list {
  margin-top: 43px;
}

.flow-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 calc(clamp(0.875rem, 0.477rem + 1.7vw, 1.75rem));
  position: relative;
}

.flow-item + .flow-item {
  margin-top: calc(clamp(1.875rem, 1.023rem + 3.64vw, 3.75rem));
}

.flow-item__step {
  width: calc(clamp(4.375rem, 3.182rem + 5.09vw, 7rem));
  aspect-ratio: 1/1;
  background-color: var(--brown2);
  color: var(--white);
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

.flow-item:not(:last-child) .flow-item__step::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 60px;
  background-color: #ccc;
  transform: translateX(-50%);
}

.flow-item__step-label {
  font-size: calc(clamp(0.75rem, 0.636rem + 0.48vw, 1rem));
  font-family: "Cinzel", serif;
  font-weight: 400;
}

.flow-item__step-number {
  font-size: calc(clamp(1.5rem, 1.273rem + 0.97vw, 2rem));
  font-family: "Cinzel", serif;
  font-weight: 400;
}

.flow-item__title {
  font-size: calc(clamp(1rem, 0.716rem + 1.21vw, 1.625rem));
  font-weight: 500;
  color: var(--brown1);
}

.flow-item__text {
  margin-top: calc(clamp(0.5rem, 0.273rem + 0.97vw, 1rem));
  font-size: calc(clamp(0.75rem, 0.636rem + 0.48vw, 1rem));
  font-weight: 500;
  line-height: 1.4;
  color: var(--brown1);
}

@media screen and (max-width: 700px) {
  .flow__inner {
    padding-inline: 16px;
  }
}

@media screen and (max-width: 450px) {
  .flow-item:not(:last-child) .flow-item__step::after {
    height: 100px;
  }
}

/* movie
-------------------------------------------------------- */
.movie {
  padding: calc(clamp(2.625rem, 1.432rem + 5.09vw, 5.25rem)) 0;
}

.movie__inner {
  max-width: var(--content-width);
  padding-inline: 24px;
  margin-inline: auto;
}

.movie__title {
  font-size: calc(clamp(1.25rem, 1.08rem + 0.73vw, 1.625rem));
  font-weight: 500;
  line-height: 1.2;
  color: var(--brown1);
  text-align: center;
}

.movie__description {
  margin-top: calc(clamp(0.813rem, 0.443rem + 1.58vw, 1.625rem));
  font-size: calc(clamp(0.875rem, 0.761rem + 0.48vw, 1.125rem));
  font-weight: 500;
  line-height: 1.4;
  color: var(--brown1);
  text-align: center;
}

.movie__content {
  margin-top: 49px;
}

.movie__video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  background-color: #000;
}

.movie__video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.movie__caption {
  margin-top: 18px;
  text-align: left;
}

.movie__caption-text {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--brown1);
}

@media screen and (max-width: 700px) {
  .movie__inner {
    padding-inline: 16px;
  }

  .movie__content {
    margin-top: 25px;
  }

  .movie__caption-text {
    font-size: 1rem;
  }
}

/* access
------------------------------------------------------------------ */
.access {
  margin-top: calc(clamp(4.438rem, 2.42rem + 8.61vw, 8.875rem));
}

.access__inner {
  max-width: var(--content-width);
  padding-inline: 24px;
  margin-inline: auto;
}

.access__list {
  border-top: 1px solid var(--gray2);
  margin-top: 52px;
}

.access-item {
  display: grid;
  grid-template-columns: 170px 1fr;
  border-bottom: 1px solid var(--gray2);
  gap: 46px;
}

.access-item__term {
  font-size: 1.25rem;
  padding: 40px 12px;
  font-weight: 500;
  color: var(--brown1);
}

.access-item__description {
  font-size: 1.25rem;
  padding: 40px 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--brown1);
}

.access-item__map {
  margin-top: 32px;
  width: 100%;
  aspect-ratio: 828 / 421;
  position: relative;
}

.access-item__map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 700px) {
  .access__inner {
    padding-inline: 16px;
  }

  .access-item {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .access-item__term,
  .access-item__description {
    padding: 20px 6px;
  }

  .access-item__description {
    padding: 20px 6px;
  }
}

@media screen and (max-width: 400px) {
  .access-item__term,
  .access-item__description {
    font-size: 1rem;
  }

  .access-item__description {
    padding-top: 0px;
  }
}

/* school
------------------------------------------------------------------ */
.school {
  margin-top: calc(clamp(4.438rem, 2.42rem + 8.61vw, 8.875rem));
}

.school__inner {
  max-width: var(--content-width);
  padding-inline: 24px;
  margin-inline: auto;
}

.school__list {
  border-top: 1px solid var(--gray2);
  margin-top: 52px;
}

.school-item {
  display: grid;
  grid-template-columns: 280px 1fr;
  border-bottom: 1px solid var(--gray2);
  gap: 46px;
}

.school-item__term {
  font-size: 1.25rem;
  padding: 40px 12px;
  font-weight: 500;
  color: var(--brown1);
}

.school-item__description {
  font-size: 1.25rem;
  padding: 40px 12px;
  font-weight: 500;
  color: var(--brown1);
}

.school-item__map {
  margin-top: 32px;
  width: 100%;
  aspect-ratio: 828 / 421;
}

@media screen and (max-width: 700px) {
  .school__inner {
    padding-inline: 16px;
  }

  .school-item {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .school-item__term,
  .school-item__description {
    padding: 20px 6px;
  }

  .school-item__description {
    padding: 20px 6px;
  }
}

@media screen and (max-width: 400px) {
  .school-item__term,
  .school-item__description {
    font-size: 1rem;
  }

  .school-item__description {
    padding-top: 0px;
  }
}

/* 404
------------------------------------------------------------------ */
.error__wrapper {
  max-width: var(--content-width);
  padding: 140px 20px 100px;
  margin-inline: auto;
}

.error__title {
  font-size: 2rem;
  text-align: center;
}

.error__content {
  color: var(--black);
  font-size: 1.25rem;
  line-height: 1.2;
  margin-top: 36px;
}

.error__content-link {
  display: inline-block;
  font-weight: bold;
  color: var(--brown1);
  border-bottom: solid 1px var(--brown1);
}

.error__content-link:hover {
  opacity: 0.6;
}