:root {
  --color-base: #111111;
  --color-body: #fff;
  --color-beige1: #ffeddf;
  --color-beige2: #FDF8E7;
  --color-brown1: #956134;
  --color-red1: #FF645F;
  --color-orange1: #F7792A;
  --color-gray1: #e7ded9;
  --color-gray2: #F0F5F7;
  --color-green1: #005F2F;
  --color-green2: #0C8F54;
  --color-green3: #B7D450;
  --color-green4: #0C8F2B;
  --color-blue1: #1C66A3;
  --color-white_op: rgb(from #fff r g b / 0.7);
}

/* ------------------------------------
// common
------------------------------------ */
.hgroup01 {
  text-align: center;
  transform: translateY(calc(-0.75 * clamp(6rem, 9.7vw, 14rem)));
  margin-bottom: calc(-0.25 * clamp(6rem, 9.7vw, 14rem));
  color: var(--color-green2);
  font-size: clamp(6rem, 9.7vw, 14rem);
}
.hgroup01 .en {
  font-size: clamp(6rem, 9.7vw, 14rem);
  line-height: 1;
  margin-block: calc((1cap - 1lh) / 2);
  font-family: "Croissant One", serif;
}
.hgroup01 h2 {
  font-size: clamp(1.5rem, 1.9vw, 2.8rem);
  letter-spacing: 0.1em;
  text-indent: -0.1em;
}
@media screen and (max-width: 768px) {
  .hgroup01 {
    transform: translateY(-1em);
    container-type: inline-size;
  }
  .hgroup01 .en {
    font-size: clamp(5rem, 9.7vw, 14rem);
  }
}

.hgroup02 {
  color: var(--color-green2);
  font-size: clamp(3rem, 5.6vw, 8rem);
}
.hgroup02 .en {
  font-size: clamp(3rem, 5.6vw, 8rem);
  line-height: 1;
  margin-block: calc((1cap - 1lh) / 2);
  font-family: "Croissant One", serif;
}
.hgroup02 h2 {
  font-size: clamp(1.5rem, 1.9vw, 2.8rem);
  letter-spacing: 0.1em;
  text-indent: -0.1em;
  margin-top: 2rem;
}
/* ------------------------------------
// mv
------------------------------------ */
#mv {
  max-width: 1440px;
  margin: 0 auto;
}

/* ------------------------------------
// news
------------------------------------ */
#timetable {
  width: min(1200px, 100% - 2rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: clamp(3rem, 5.6vw, 8rem);
}
#timetable .hgroup02::after {
  content: "";
  width: 90%;
  aspect-ratio: 370/209;
  display: block;
  background: url(/lib/img/top/timetable_01.webp) no-repeat right/contain;
  margin: 0 0 0 auto;
}
@media screen and (max-width: 768px) {
  #timetable {
    display: block;
    width: 100%;
  }
  #timetable .hgroup02 {
    margin-bottom: 0;
  }
  #timetable .hgroup02 .en br {
    display: none;
  }
  #timetable .hgroup02::after {
    content: "";
    width: 90%;
    max-width: 200px;
  }
}

/* ------------------------------------
// news
------------------------------------ */
#news {
  margin-top: calc(0.75 * clamp(2rem, 9.7vw, 14rem));
  background: var(--color-beige2);
}
#news .newsContainer {
  width: min(1040px, 100% - 2rem);
  margin: 0 auto;
}
#news .newsContainer ul {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 clamp(2rem, 0.7vw, 1rem);
  margin-bottom: 2rem;
}
#news .newsContainer ul li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px dotted var(--color-green2);
}
#news .newsContainer ul li a {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  gap: 0 clamp(2rem, 2.8vw, 4rem);
}
#news .newsContainer ul li a .date {
  color: var(--color-green2);
}
#news .newsContainer ul li a:hover .title {
  text-decoration: underline;
}
#news .btn {
  margin-top: 4rem;
}
#news .btn a {
  margin-inline: auto;
  border-radius: 50vh;
  padding: 1.5rem;
  width: fit-content;
  display: flex;
  justify-content: space-between;
  background: var(--color-green1);
  color: #FFF;
  gap: 3rem;
}
#news .btn a::before {
  content: "";
  width: 1.5em;
}
#news .btn a:after {
  content: "";
  width: 1.5em;
  background: url(/lib/img/cmn/btn_01.webp) no-repeat center/contain;
  aspect-ratio: 1;
  display: block;
}
#news .btn a:hover {
  background: var(--color-green2);
}
@media screen and (max-width: 768px) {
  #news .newsContainer {
    width: 100%;
  }
  #news .newsContainer ul {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0 clamp(2rem, 0.7vw, 1rem);
    margin-bottom: 2rem;
  }
  #news .newsContainer ul li {
    display: block;
  }
  #news .newsContainer ul li a {
    display: grid;
    grid-template-columns: 1fr 2rem;
    grid-template-areas: "date icon" "title icon";
  }
  #news .newsContainer ul li a:after {
    content: "";
    grid-area: icon;
    width: 1.8rem;
    aspect-ratio: 1;
    mask: url(/lib/img/cmn/icon_arrow.svg) no-repeat center/contain;
    background: var(--color-green1);
    align-self: center;
  }
  #news .newsContainer ul li a .date {
    grid-area: date;
  }
  #news .newsContainer ul li a .title {
    grid-area: title;
  }
  #news .newsContainer ul li a:hover .title {
    text-decoration: none;
  }
}

/* ------------------------------------
// about
------------------------------------ */
#about {
  width: min(1240px, 100% - 2rem);
  margin: 0 auto;
}
#about .aboutphoto {
  margin-bottom: 5rem;
}
#about hgroup {
  grid-area: title;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6rem;
  position: relative;
  gap: 3%;
}
#about hgroup::after {
  content: "";
  width: 26%;
  aspect-ratio: 331/504;
  display: block;
  background: url(/lib/img/top/about_title_a.webp) no-repeat 0 0/contain;
  z-index: 0;
}
#about hgroup::before {
  content: "";
  width: 34%;
  aspect-ratio: 436/483;
  display: block;
  background: url(/lib/img/top/about_title_b.webp) no-repeat 0 0/contain;
  z-index: 0;
}
#about hgroup h2 {
  white-space: nowrap;
  font-size: clamp(3rem, 4.2vw, 6rem);
  writing-mode: vertical-rl;
  color: var(--color-green1);
  position: relative;
}
#about hgroup p {
  white-space: nowrap;
  font-size: clamp(1.2rem, 1.1vw, 1.6rem);
  writing-mode: vertical-rl;
  transform: rotate(5deg);
}
#about .textbox {
  text-align: center;
  position: relative;
}
#about .textbox::after {
  content: "";
  width: 17%;
  aspect-ratio: 210/203;
  display: block;
  background: url(/lib/img/top/about_ill_01.webp) no-repeat 0 0/contain;
  z-index: 0;
  position: absolute;
  left: 0;
  bottom: 0;
}
#about .textbox::before {
  content: "";
  width: 8%;
  aspect-ratio: 101/188;
  display: block;
  background: url(/lib/img/top/about_ill_02.webp) no-repeat 0 0/contain;
  position: absolute;
  z-index: 0;
  right: 8%;
  bottom: 0;
}
#about .textbox p {
  position: relative;
  z-index: 2;
}
#about .textbox p strong {
  font-size: clamp(2rem, 2.1vw, 3rem);
  color: var(--color-green2);
}
#about .textbox p + p {
  margin-top: 2rem;
}
#about .btn {
  margin-top: 4rem;
}
#about .btn a {
  margin-inline: auto;
  border-radius: 50vh;
  padding: 1.5rem;
  width: fit-content;
  display: flex;
  justify-content: space-between;
  background: var(--color-green1);
  color: #FFF;
  gap: 3rem;
}
#about .btn a::before {
  content: "";
  width: 1.5em;
}
#about .btn a:after {
  content: "";
  width: 1.5em;
  background: url(/lib/img/cmn/btn_01.webp) no-repeat center/contain;
  aspect-ratio: 1;
  display: block;
}
#about .btn a:hover {
  background: var(--color-green2);
}
@media screen and (max-width: 768px) {
  #about {
    width: 100%;
  }
  #about hgroup {
    grid-area: title;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
    gap: 3%;
    padding-bottom: calc(36.5745856354vw - 6rem);
  }
  #about hgroup::after {
    width: 40%;
    aspect-ratio: 331/362;
    background: url(/lib/img/top/about_title_a_sp.webp) no-repeat 0 0/contain;
    z-index: 0;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  #about hgroup::before {
    width: 34%;
    aspect-ratio: 291/508;
    background: url(/lib/img/top/about_title_b_sp.webp) no-repeat 0 0/contain;
    z-index: 0;
    align-self: start;
  }
  #about hgroup p {
    padding-right: 15%;
  }
  #about .textbox {
    text-align: left;
    position: relative;
  }
  #about .textbox::after {
    content: "";
    width: 30%;
    position: relative;
    left: 0;
    bottom: 0;
  }
  #about .textbox::before {
    width: 15%;
    right: 8%;
  }
  #about .textbox p {
    position: relative;
    z-index: 2;
  }
  #about .textbox p strong {
    font-size: clamp(2rem, 2.1vw, 3rem);
    color: var(--color-green2);
  }
  #about .textbox p + p {
    margin-top: 2rem;
  }
}

/* ------------------------------------
// treatment
------------------------------------ */
#treatment {
  margin-top: calc(0.75 * clamp(2rem, 9.7vw, 14rem));
  background: var(--color-gray2);
}
#treatment .itemContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 2.8vw, 4rem) clamp(2rem, 5.6vw, 8rem);
  width: min(1200px, 100% - 2rem);
  margin: 0 auto;
}
#treatment .itemContainer .item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: clamp(1rem, 1.4vw, 2rem);
  background: #FFF;
  padding-bottom: 3rem;
}
#treatment .itemContainer .item .photo {
  aspect-ratio: 580/360;
  position: relative;
  overflow: hidden;
}
#treatment .itemContainer .item .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#treatment .itemContainer .item > *:not(.photo) {
  padding-inline: clamp(1rem, 2.1vw, 3rem);
}
#treatment .itemContainer .item .title {
  color: var(--color-green2);
  font-size: clamp(2rem, 1.7vw, 2.4rem);
  letter-spacing: 0.1em;
  text-indent: -0.1em;
  text-align: center;
}
#treatment .itemContainer .item .title span {
  font-size: clamp(1.6rem, 1.4vw, 2rem);
}
#treatment .itemContainer .item .btn {
  display: grid;
  grid-template-rows: subgrid;
}
#treatment .itemContainer .item .btn a {
  border-radius: 50vh;
  padding: 1.5rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: var(--color-green1);
  color: #FFF;
  gap: 1rem;
  align-items: center;
}
#treatment .itemContainer .item .btn a span {
  display: contents;
  font-size: clamp(1.2rem, 1vw, 1.4rem);
}
#treatment .itemContainer .item .btn a::before {
  content: "";
  width: 1.5em;
}
#treatment .itemContainer .item .btn a:after {
  content: "";
  width: 1.5em;
  background: url(/lib/img/cmn/btn_01.webp) no-repeat center/contain;
  aspect-ratio: 1;
  display: block;
}
#treatment .itemContainer .item .btn a:hover {
  background: var(--color-green2);
}
@media screen and (max-width: 1024px) {
  #treatment .itemContainer {
    width: 100%;
    grid-template-columns: repeat(1, 1fr);
    gap: clamp(2rem, 2.8vw, 4rem) clamp(2rem, 5.6vw, 8rem);
  }
  #treatment .itemContainer .item {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 0.7fr 1fr;
    grid-template-areas: "photo title" "photo disc" "photo btn";
    gap: clamp(1rem, 1.4vw, 2rem);
    padding-bottom: 0;
  }
  #treatment .itemContainer .item .photo {
    grid-area: photo;
    aspect-ratio: auto;
  }
  #treatment .itemContainer .item .title {
    padding-top: 1rem;
    grid-area: title;
  }
  #treatment .itemContainer .item .btn {
    grid-area: btn;
    padding-bottom: 1rem;
  }
}
@media screen and (max-width: 768px) {
  #treatment .itemContainer {
    width: 100%;
  }
  #treatment .itemContainer .item {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-template-areas: "photo" "title" "disc" "btn";
    gap: clamp(1rem, 1.4vw, 2rem);
    padding-bottom: 0;
  }
  #treatment .itemContainer .item .photo {
    grid-area: photo;
    aspect-ratio: auto;
  }
  #treatment .itemContainer .item .title {
    padding-top: 1rem;
    grid-area: title;
  }
  #treatment .itemContainer .item .btn {
    grid-area: btn;
    padding-bottom: 1rem;
  }
}

/* ------------------------------------
// point3
------------------------------------ */
#point3 {
  width: min(1200px, 100% - 2rem);
  margin: 0 auto;
}
#point3 > hgroup {
  display: grid;
  grid-template-columns: 0.35fr 1fr 0.5fr;
  grid-template-areas: "tento h2 bee";
  align-items: center;
  margin-bottom: 10rem;
}
#point3 > hgroup h2 {
  grid-area: h2;
}
#point3 > hgroup:before, #point3 > hgroup:after {
  content: "";
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#point3 > hgroup::before {
  margin-right: 2rem;
  align-self: end;
  grid-area: tento;
  aspect-ratio: 227/190;
  background-image: url(/lib/img/top/poiint_title_b.webp);
}
#point3 > hgroup::after {
  margin-left: -5rem;
  align-self: start;
  grid-area: bee;
  aspect-ratio: 377/179;
  background-image: url(/lib/img/top/poiint_title_a.webp);
}
#point3 section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "hgroup photo" "text photo";
  gap: clamp(2rem, 2.8vw, 4rem) clamp(2rem, 4.2vw, 6rem);
  margin-bottom: 6rem;
}
#point3 section:not(#point3 section:last-child) {
  border-bottom: 1px dashed var(--color-green2);
  padding-bottom: 6rem;
}
#point3 section > hgroup {
  grid-area: hgroup;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "point title" "num title";
  color: var(--color-green2);
  gap: 0 1rem;
  align-items: center;
}
#point3 section > hgroup span {
  display: block;
  grid-area: point;
  text-align: center;
  font-style: normal;
  line-height: 1;
  font-weight: 800;
  font-size: clamp(2rem, 1.7vw, 2.4rem);
}
#point3 section > hgroup p {
  grid-area: num;
  font-weight: 800;
  font-size: clamp(5rem, 7.6vw, 11rem);
  margin-block: calc((1cap - 1lh) / 2);
  line-height: 24px;
}
#point3 section > hgroup h3 {
  grid-area: title;
  font-size: clamp(2rem, 1.7vw, 2.4rem);
  align-self: end;
  font-weight: 600;
}
#point3 section .text {
  grid-area: text;
}
#point3 section .photo {
  grid-area: photo;
}
@media screen and (max-width: 768px) {
  #point3 {
    width: 100%;
  }
  #point3 > hgroup {
    display: grid;
    grid-template-columns: 1fr 0.5fr;
    grid-template-areas: "h2 bee" "h2 tento";
    align-items: center;
    margin-bottom: 4rem;
    padding-bottom: 1rem;
    border-bottom: 5px dashed rgba(183, 212, 80, 0.3);
  }
  #point3 > hgroup h2 {
    grid-area: h2;
  }
  #point3 > hgroup::before {
    width: 50%;
    margin: 0 0 0 auto;
  }
  #point3 section {
    grid-template-columns: 1fr;
    grid-template-areas: "hgroup" "text" "photo";
    margin-bottom: 3rem;
  }
  #point3 section:not(#point3 section:last-child) {
    padding-bottom: 3rem;
  }
  #point3 section > hgroup {
    grid-area: hgroup;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "point num" "title title";
    gap: 1rem 0;
  }
}

/* ------------------------------------
// blog
------------------------------------ */
#blog {
  margin-top: calc(0.75 * clamp(2rem, 9.7vw, 14rem));
  background: var(--color-beige2);
}
#blog .articleContainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 2.8vw, 4rem);
  width: min(1200px, 100% - 2rem);
  margin: 0 auto;
}
#blog .articleContainer .item a {
  border-radius: 20px;
  display: block;
  background: #FFFFFF;
  position: relative;
}
#blog .articleContainer .item a::before {
  transition: 0.5s;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  z-index: 2;
  opacity: 0;
}
#blog .articleContainer .item a:after {
  transition: 0.5s;
  content: "Read This";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  color: #FFF;
  font-family: "Croissant One", serif;
  font-size: clamp(2rem, 2.1vw, 3rem);
  opacity: 0;
}
#blog .articleContainer .item a:hover::after, #blog .articleContainer .item a:hover::before {
  opacity: 1;
}
#blog .articleContainer .item a .photo {
  aspect-ratio: 390/300;
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}
#blog .articleContainer .item a .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#blog .articleContainer .item a .date {
  color: var(--color-green1);
  padding: 1rem clamp(1rem, 1.4vw, 2rem) 0;
}
#blog .articleContainer .item a .title {
  padding: 2rem clamp(1rem, 1.4vw, 2rem);
}
#blog .btn {
  margin-top: 4rem;
}
#blog .btn a {
  margin-inline: auto;
  border-radius: 50vh;
  padding: 1.5rem;
  width: fit-content;
  display: flex;
  justify-content: space-between;
  background: var(--color-green1);
  color: #FFF;
  gap: 3rem;
}
#blog .btn a::before {
  content: "";
  width: 1.5em;
}
#blog .btn a:after {
  content: "";
  width: 1.5em;
  background: url(/lib/img/cmn/btn_01.webp) no-repeat center/contain;
  aspect-ratio: 1;
  display: block;
}
#blog .btn a:hover {
  background: var(--color-green2);
}
@media screen and (max-width: 768px) {
  #blog {
    padding-inline: 0;
  }
  #blog .articleContainer {
    width: 100%;
  }
  #blog .articleContainer.swiper {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #blog .articleContainer:not(.swiper) {
    grid-template-columns: 1fr;
  }
}