@charset "utf-8";
/* CSS Document */

/* ===============================
	home_common
 =============================== */
h2.title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.666666666666667;
  position: relative;
  z-index: +1;
}
h2.title + p {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 2;
  position: relative;
  z-index: +1;
}
@media screen and (max-width: 750px) {
  h2.title {
    font-size: 5.2vw;
  }
  h2.title + p {
    font-size: 3.33333333333333vw;
  }
}

/* ===============================
	home_mv
 =============================== */
#home_mv {
  height: 740px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -182px;
}
#home_mv .title {
  background: rgba(255,255,255,.9);
  width: 250px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  margin-bottom: -80px;
  z-index: +1;
}
#home_mv .title p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 35px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.857142857142857;
  writing-mode: tb;
}
#home_mv .title p span {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  color: var(--C-green);
}
#home_mv .mv_point {
  position: absolute;
  z-index: +1;
  left: 17.42857142857143%;
  bottom: 8px;
}
#home_mv .mv_point ul {
  display: flex;
  flex-direction: row;
  gap: 12px;
}
#home_mv .mv_point small {
  font-size: 10px;
  letter-spacing: 0.1em;
  -webkit-text-stroke: 2px var(--C-white);
  text-stroke: 2px var(--C-white);
  paint-order: stroke;
}
#home_mv .home_mv_contact {
  background: var(--C-green);
  border-radius: 100px 100px 0 0;
  width: 74px;
  height: 86px;
  position: absolute;
  bottom: 0;
  right: 18.14285714285714%;
  z-index: +1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
}
#home_mv .home_mv_contact p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--C-white);
  text-align: center;
}
#home_mv .splide {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#home_mv .splide,
#home_mv .splide * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#home_mv .splide li {
  width: 300px;
}
#home_mv .sp_mv {
  display: none;
}
@media screen and (max-width: 750px) {
  #home_mv {
    margin-top: 0;
    height: auto;
  }
  #home_mv .title {
    width: 32.26666666666667vw;
    height: 61.06666666666667vw;
    margin-bottom: 0;
  }
  #home_mv .title p {
    font-size: 6.8vw;
    line-height: 1.588235294117647;
  }
  #home_mv .mv_point {
    width: fit-content;
    left: 0;
    right: 0;
    bottom: 1.06666666666667vw;
    margin: auto;
  }
  #home_mv .mv_point ul {
    gap: 2.4vw;
  }
  #home_mv .mv_point li img {
    width: 24.8vw;
  }
  #home_mv .mv_point small {
    font-size: 2.13333333333333vw;
  }
  #home_mv .home_mv_contact,
  #home_mv .splide {
    display: none;
  }
  #home_mv .sp_mv {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  #home_mv .sp_mv li {
    width: 100%;
    height: 50%;
  }
  #home_mv .sp_mv li img {
    width: 100%;
    height: 100%;
    max-width: inherit;
    object-fit: cover;
  }
}

/* ===============================
	about
 =============================== */
#about {
  background-image: url(../img/home/about_bg.webp);
  background-size: 1920px auto;
  background-position: top center;
  background-repeat: no-repeat;
}
#about .wrap {
  height: 664px;
  position: relative;
  z-index: +1;
}
#about .title {
  padding-top: 212px;
  margin-bottom: 12px;
}
#about .title + p {
  margin-bottom: 158px;
}
#about .img_1 {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 16.44444444444444%;
  z-index: -1;
}
#about .btn_area {
  text-align: center;
}
@media screen and (max-width: 750px) {
  #about {
    background-image: url(../img/home/about_bg_sp.webp);
    background-size: contain;
  }
  #about .wrap {
    height: 153.6vw;
    padding-right: 13.6vw;
  }
  #about .title {
    padding-top: 38.66666666666667vw;
    margin-bottom: 3.2vw;
    margin-left: calc(13.6vw - 4%);
  }
  #about .title + p {
    margin-bottom: 36.8vw;
    margin-left: calc(13.6vw - 4%);
  }
  #about .img_1 {
    width: 50.93333333333333vw;
    height: 100.2666666666667vw;
    top: 19.46666666666667vw;
    right: -17.86666666666667vw;
  }
  #about .btn_area {
    margin-left: calc(13.6vw - 4%);
  }
}

/* ===============================
	choose
 =============================== */
#choose {
  background: url(../img/home/choose_bg.webp) center no-repeat;
  background-size: cover;
  padding-top: 110px;
  padding-bottom: 108px;
}
#choose .title {
  width: fit-content;
  margin-bottom: 26px;
}
#choose ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px;
}
#choose li {
  width: 420px;
  position: relative;
  padding-bottom: 378px;
}
#choose li h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--C-yellow);
  background: var(--C-white);
  padding: 8px;
}
#choose li img {
  position: absolute;
}
#choose .img_1 {
  top: 42px;
  left: 0;
}
#choose .img_2 {
  top: 42px;
  right: 0;
}
#choose .img_3 {
  top: 42px;
  left: 0;
}
#choose .img_4 {
  top: 42px;
  right: 0;
}
#choose .img_5 {
  top: 230px;
  left: 102px;
}
#choose .img_6 {
  top: 230px;
  left: 116px;
}
#choose .img_7 {
  top: 230px;
  right: -126px;
}
#choose li p {
  font-size: 15px;
  font-weight: 700;
  background: var(--C-white);
  border-radius: 1000px;
  text-align: center;
  position: absolute;
  top: 336px;
  right: 22px;
  padding: 20px;
}
@media screen and (max-width: 750px) {
  #choose {
    background-image: url(../img/home/choose_bg_sp.webp);
    padding-top: 15.2vw;
    padding-bottom: 24vw;
  }
  #choose .title {
    margin-bottom: 3.46666666666667vw;
    margin-left: calc((100% - 73.86666666666667vw) / 2);
  }
  #choose ul {
    flex-direction: column;
    gap: 3.73333333333333vw;
  }
  #choose li {
    width: 73.86666666666667vw;
    margin: auto;
    padding-bottom: 35.73333333333333vw;
  }
  #choose li:last-child {
    padding-bottom: 102.9333333333333vw;
  }
  #choose li h3 {
    font-size: 3.73333333333333vw;
    padding: 1.86666666666667vw;
  }
  #choose img {
    width: 36.53333333333333vw;
  }
  #choose .img_1 {
    top: 8vw;
    left: -1.06666666666667vw;
  }
  #choose .img_2 {
    top: 8vw;
    right: -1.06666666666667vw;
  }
  #choose .img_3 {
    top: 8vw;
    left: -1.06666666666667vw;
  }
  #choose .img_4 {
    top: 8vw;
    right: -1.06666666666667vw;
  }
  #choose .img_5 {
    top: 41.33333333333333vw;
    left: 0;
    right: 0;
    margin: auto;
  }
  #choose .img_6 {
    top: 123.7333333333333vw;
    left: -1.06666666666667vw;
  }
  #choose .img_7 {
    top: 123.7333333333333vw;
    right: -1.06666666666667vw;
  }
  #choose li p {
    font-size: 2.8vw;
    top: 59.46666666666667vw;
    right: 1.33333333333333vw;
    padding: 3.2vw;
  }
}

/* ===============================
	exterior
 =============================== */
#exterior {
  background-color: var(--C-blue);
  background-image: url(../img/home/exterior_bg.webp);
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 176px;
}
#exterior .txt_area {
  width: 510px;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: -128px;
  padding-bottom: 72px;
}
#exterior .txt_area .title {
  margin-bottom: 8px;
}
#exterior .exterior_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 54px 0;
  padding-bottom: 128px;
  margin-bottom: 66px;
}
#exterior .exterior_list li {
  width: 50%;
  height: 100%;
  aspect-ratio: 596 / 300;
  filter: drop-shadow(7px 7px 10px rgba(0, 0, 0, .1));
}
#exterior .exterior_list li:nth-child(even) {
  position: relative;
  top: 128px;
}
#exterior .exterior_list a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: +1;
  opacity: 1;
  transition-timing-function: ease-in;
}
#exterior .exterior_list li.nohover a {
  opacity: .4;
}
#exterior .exterior_list .btn_title {
  background: var(--C-white);
  height: 100%;
  display: inline-flex;
  align-items: center;
  position: absolute;
  padding: 5% 58px;
  transition: 0.4s
}
#exterior .exterior_list li:hover .btn_title {
  background: var(--C-blue);
}
#exterior .exterior_list li:nth-child(odd) .btn_title {
  right: 18%;
}
#exterior .exterior_list li:nth-child(even) .btn_title {
  left: 18%;
}
#exterior .exterior_list .btn_title::after {
  content: '';
  width: 25px;
  height: 13px;
  background-image: url(../img/home/exterior_arrow.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  margin: auto;
}
#exterior .exterior_list .btn_title p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.12em;
  writing-mode: tb;
}
#exterior .exterior_list img {
  width: calc(100% + 30px);
  max-width: none;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  transition: 1.4s
}
#exterior .exterior_list li:nth-child(odd) img {
  right: 0;
}
#exterior .exterior_list li:nth-child(even) img {
  left: 0;
}
#exterior .exterior_list li:nth-child(odd):hover img {
  transform: translateX(30px);
}
#exterior .exterior_list li:nth-child(even):hover img {
  transform: translateX(-30px);
}
#exterior .btn_area {
  text-align: center;
  padding-bottom: 138px;
}
@media screen and (min-width: 1918px) {
  #exterior {
    background-position: left;
  }
}
@media screen and (max-width: 1160px) {
  #exterior .txt_area {
    width: fit-content;
  }
}
@media screen and (max-width: 750px) {
  #exterior {
    background-image: url(../img/home/exterior_bg_sp.webp);
    background-size: cover;
    padding-top: 34.93333333333333vw;
  }
  #exterior .txt_area {
    width: 73.33333333333333vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 9.86666666666667vw;
    padding-bottom: 0;
  }
  #exterior .txt_area .title {
    margin-bottom: 8px;
  }
  #exterior .exterior_list {
    gap: 4.53333333333333vw 3.2vw;
    width: 100vw;
    padding-bottom: 0;
    margin-bottom: 11.73333333333333vw;
    margin-left: -4%;
  }
  #exterior .exterior_list li {
    width: calc((100% - 3.2vw) / 2);
    aspect-ratio: 360 / 300;
  }
  #exterior .exterior_list li:nth-child(even) {
    top: 0;
  }
  #exterior .exterior_list .btn_title {
    padding: 5% 4.312vw;
  }
  #exterior .exterior_list li:nth-child(odd) .btn_title,
  #exterior .exterior_list li:nth-child(even) .btn_title {
    left: 0;
    right: auto;
  }
  #exterior .exterior_list .btn_title::after {
    width: 3.33333333333333vw;
    height: 1.73333333333333vw;
    bottom: 5.33333333333333%;
  }
  #exterior .exterior_list .btn_title p {
    font-size: 4vw;
  }
  #exterior .btn_area {
    padding-bottom: 15.46666666666667vw;
  }
}

/* ===============================
	case
 =============================== */
#case {
  overflow: hidden;
}
#case .wrap {
  padding-bottom: 114px;
}
#case .txt_area {
  position: relative;
  width: 300px;
  max-width: 100%;
  height: 720px;
  display: flex;
  justify-content: center;
  margin-left: 20.97087378640777%;
  margin-right: auto;
}
#case .txt_area::after {
  content: '';
  width: 100%;
  height: 100%;
  background: var(--C-Dblue);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#case .txt_area .title {
  writing-mode: tb;
  color: var(--C-white);
  margin-top: 94px;
}
#case .txt_area .title + p {
  white-space: nowrap;
  position: absolute;
  top: 160px;
  left: 356px;
}
#case .splide {
  position: relative;
  margin-top: -420px;
}
#case .splide .splide__track {
  overflow: visible;
  overflow-x: clip;
}
#case .splide__arrows {
  pointer-events: none;
}
#case .splide__arrow {
  height: fit-content;
  cursor: pointer;
  pointer-events: painted;  
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
#case .splide__arrow.splide__arrow--prev {
  left: -44px;
}
#case .splide__arrow.splide__arrow--next {
  right: -44px;
}
#case .splide__arrow::before {
  content: '';
  width: 37px;
  height: 37px;
  background: url(../img/home/arrow.svg) center no-repeat;
  background-size: contain;
  display: block;
}
#case .splide__arrow.splide__arrow--next::before {
  transform: rotate(180deg);
}
#case .splide__arrow svg {
  display: none;
}
#case .splide li a {
  cursor: url("../img/home/slide_arrow.png") 0 0, auto;
}
#case .splide li a:hover {
  opacity: 1;
}
#case .splide .list_txt {
  position: absolute;
  top: -20px;
  left: -28px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  z-index: +1;
}
#case .splide li:not(.is-active) .list_txt {
  opacity: 0;
}
#case .splide .list_txt * {
  writing-mode: tb;
}
#case .splide .list_txt h3 {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--C-white);
  text-shadow: #6793ac 0 0 11px, #6793ac 0 0 11px, #6793ac 0 0 11px, #6793ac 0 0 11px, #6793ac 0 0 11px;    
  max-height: 290px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  margin-left: 10px;
  padding-top: 10px;
}
#case .splide li .list_img {
  position: relative;
}
#case .splide li:not(.is-active) .list_img::after {
  content: '';
  width: 100%;
  height: 100%;
  background: var(--C-white);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -1;
}
#case .splide li .list_img img {
  aspect-ratio: 30 / 42;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#case .splide li:not(.is-active) .list_img img {
  opacity: .4;
}
#case .splide time {
  font-size: 10px;
  display: block;
  margin-top: 4px;
  transition: 0.4s;
  opacity: 1;
}
#case .splide li:not(.is-active) time {
  opacity: 0;
}
#case .btn_area {
  width: 300px;
  max-width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 24px;
  margin-left: 20.97087378640777%;
  margin-right: auto;
}
@media screen and (max-width: 1090px) {
  #case .wrap {
    margin-left: -30px;
  }
  #case .splide {
    width: 100vw;
  }
}
@media screen and (max-width: 1030px) {
  #case .txt_area .title + p br.pcNone {
    display: block;
  }
}
@media screen and (max-width: 750px) {
  #case .wrap {
    margin-left: -4%;
    padding-bottom: 17.06666666666667vw;
    width: calc(100vw + 4%);
    max-width: none;
  }
  #case .txt_area {
    width: 50.13333333333333vw;
    height: 130.9333333333333vw;
    margin-left: 0;
    margin-right: auto;
  }
  #case .txt_area .title {
    margin-top: 19.73333333333333vw;
  }
  #case .txt_area .title + p {
    line-height: 2.04;
    top: 20vw;
    left: auto;
    right: -37vw;
  }
  #case .splide {
    margin-top: -70.6vw;
  }
  #case .splide__arrows {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 72vw;
    pointer-events: none;    
    z-index: +1;
  }
  #case .splide__arrow.splide__arrow--prev {
    left: -9.06666666666667vw;
  }
  #case .splide__arrow.splide__arrow--next {
    right: -9.06666666666667vw;
  }
  #case .splide__arrow::before {
    width: 4.93333333333333vw;
    height: 4.93333333333333vw;
  }
  #case .splide .list_txt {
    top: -2vw;
    left: -6.66666666666667vw;
  }
  #case .splide .list_txt .num_img {
    max-width: 13.86666666666667vw;
    max-height: 13.86666666666667vw;
  }
  #case .splide .list_txt h3 {
    font-size: 5.06666666666667vw;
    max-height: 57vw;
    margin-left: 3vw;
  }
  #case .splide time {
    font-size: 3.33333333333333vw;
    margin-top: .53333333333333vw;
  }
  #case .btn_area {
    width: 100%;
    margin-top: 4.8vw;
    margin-left: 4%;
  }
}

/* ===============================
	plan
 =============================== */
#plan {
  overflow: hidden;
}
#plan .wrap {
  padding-bottom: 90px;
}
#plan .txt_area {
  position: relative;
  width: 300px;
  max-width: 100%;
  height: 720px;
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: 20.97087378640777%;
}
#plan .txt_area::after {
  content: '';
  width: 100%;
  height: 100%;
  background: var(--C-green);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#plan .txt_area .title {
  writing-mode: tb;
  color: var(--C-white);
  margin-top: 94px;
}
#plan .txt_area .title + p {
  white-space: nowrap;
  position: absolute;
  top: 160px;
  right: 356px;
}
#plan .splide {
  position: relative;
  margin-top: -420px;
}
#plan .splide .splide__track {
  overflow: visible;
  overflow-x: clip;
}
#plan .splide__arrows {
  pointer-events: none;
}
#plan .splide__arrow {
  height: fit-content;
  pointer-events: painted;  
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
#plan .splide__arrow.splide__arrow--prev {
  left: -44px;
}
#plan .splide__arrow.splide__arrow--next {
  right: -44px;
}
#plan .splide__arrow::before {
  content: '';
  width: 37px;
  height: 37px;
  background: url(../img/home/arrow.svg) center no-repeat;
  background-size: contain;
  display: block;
}
#plan .splide__arrow.splide__arrow--next::before {
  transform: rotate(180deg);
}
#plan .splide__arrow svg {
  display: none;
}
#plan .splide li a {
  cursor: url("../img/home/slide_arrow.png") 0 0, auto;
}
#plan .splide li a:hover {
  opacity: 1;
}
#plan .splide .list_txt {
  position: absolute;
  top: -20px;
  right: -28px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  z-index: +1;
}
#plan .splide li:not(.is-active) .list_txt {
  opacity: 0;
}
#plan .splide .list_txt * {
  writing-mode: tb;
}
#plan .splide .list_txt h3 {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--C-white);
  text-shadow: #4f652e 0 0 11px, #4f652e 0 0 11px, #4f652e 0 0 11px, #4f652e 0 0 11px, #4f652e 0 0 11px, #4f652e 0 0 11px;    
  max-height: 290px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  margin-right: 10px;
  padding-top: 10px;
}
#plan .splide li .list_img {
  position: relative;
}
#plan .splide li:not(.is-active) .list_img::after {
  content: '';
  width: 100%;
  height: 100%;
  background: var(--C-white);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -1;
}
#plan .splide li .list_img img {
  aspect-ratio: 30 / 42;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#plan .splide li:not(.is-active) .list_img img {
  opacity: .4;
}
#plan .btn_area {
  width: 300px;
  max-width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 24px;
  margin-left: auto;
  margin-right: 20.97087378640777%;
}
@media screen and (max-width: 1090px) {
  #plan .wrap {
    margin-left: -30px;
  }
  #plan .splide {
    width: 100vw;
  }
}
@media screen and (max-width: 1030px) {
  #plan .txt_area .title + p br.pcNone {
    display: block;
  }
}
@media screen and (max-width: 750px) {
  #plan .wrap {
    margin-left: -4%;
    padding-bottom: 22.4vw;
    width: calc(100vw + 4%);
    max-width: none;
  }
  #plan .txt_area {
    width: 50.13333333333333vw;
    height: 130.9333333333333vw;
    margin-left: auto;
    margin-right: 0;
  }
  #plan .txt_area .title {
    margin-top: 19.73333333333333vw;
  }
  #plan .txt_area .title + p {
    line-height: 2.04;
    top: 20vw;
    left: -37vw;
  }
  #plan .splide {
    margin-top: -70vw;
  }
  #plan .splide__arrows {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 72vw;
    pointer-events: none;
    z-index: +1;
  }
  #plan .splide__arrow.splide__arrow--prev {
    left: -9.06666666666667vw;
  }
  #plan .splide__arrow.splide__arrow--next {
    right: -9.06666666666667vw;
  }
  #plan .splide__arrow::before {
    width: 4.93333333333333vw;
    height: 4.93333333333333vw;
  }
  #plan .splide .list_txt {
    top: -2vw;
    right: -6.66666666666667vw;
  }
  #plan .splide .list_txt .num_img {
    max-width: 13.86666666666667vw;
    max-height: 13.86666666666667vw;
  }
  #plan .splide .list_txt h3 {
    font-size: 5.06666666666667vw;
    max-height: 57vw;
    margin-left: 3vw;
  }
  #plan .btn_area {
    width: 100%;
    margin-top: 4.8vw;
    margin-left: 4%;
    margin-right: auto;
  }
}

/* ===============================
	news
 =============================== */
#news {
  padding-bottom: 94px;
}
#news .news_area {
  display: flex;
  flex-direction: row;
  margin-bottom: 58px;
}
#news .txt_area {
  width: 138px;
  position: relative;
  display: flex;
  justify-content: center;
}
#news .txt_area::after {
  content: '';
  width: 2px;
  height: 100%;
  background: var(--C-gray);
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
#news .txt_area .title {
  writing-mode: tb;
}
#news .usually {
  margin-top: 60px;
}
#news .main_area {
  width: calc(100% - 138px);
  /* margin-top: 60px; */
  padding-right: 56px;
  padding-left: 84px;
}
#news .main_area ul {
  display: flex;
  flex-direction: column;
}
#news .main_area li {
  position: relative;
}
#news .main_area li::after {
  content: '';
  width: 100%;
  height: 2px;
  background: var(--C-gray);
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#news .main_area li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px 0;
}
#news .main_area li:first-child a {
  padding-top: 0;
}
#news .main_area li time {
  font-size: 17px;
  font-weight: 500;
  margin-right: 30px;
}
#news .main_area li span {
  width: 68px;
  height: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 22px;
}
#news .main_area li span.new {
  font-size: 11px;
  font-weight: 500;
  color: var(--C-white);
  background: var(--C-green);
}
#news .main_area li span.new::before {
  content: 'NEW';
}
#news .main_area li p {
  font-size: 17px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 466px;
}
@media screen and (max-width: 750px) {
  #news {
    padding-bottom: 17.06666666666667vw;
  }
  #news .wrap {
    overflow: visible;
    padding-left: 10.93333333333333vw;
    padding-right: 10.93333333333333vw;
  }
  #news .usually {
    margin-top: 8vw;
  }
  #news .news_area {
    margin-bottom: 12.53333333333333vw;
  }
  #news .txt_area {
    width: 10.4vw;
  }
  #news .txt_area .title {
    font-size: 3.73333333333333vw;
  }
  #news .main_area {
    width: calc(100% - 10.4vw);
    margin-top: 0;
    padding-right: 0;
    padding-left: 9.33333333333333vw;
  }
  #news .main_area li a {
    flex-wrap: wrap;
    padding: 4vw 0;
  }
  #news .main_area li time {
    font-size: 3.06666666666667vw;
    margin-right: 5.33333333333333vw;
  }
  #news .main_area li span {
    width: 12.26666666666667vw;
    height: 3.46666666666667vw;
    margin-right: 0;
  }
  #news .main_area li span.new {
    font-size: 2.66666666666667vw;
  }
  #news .main_area li p {
    font-size: 3.06666666666667vw;
    width: 100%;
  }
  #news .btn_area {
    text-align: center;
  }
}

/* ===============================
	niwamame
 =============================== */
#niwamame {
  text-align: center;
  background-color: var(--C-Dblue);
  background-image: url(../img/home/niwamame_bg.webp);
  background-size: 1400px auto;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 120px;
  padding-bottom: 140px;
}
#niwamame .title {
  margin-bottom: 30px;
}
#niwamame ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 28px;
  margin-bottom: 52px;
}
#niwamame li {
  width: calc((100% - (28px * 3)) / 4);
  aspect-ratio: 254 / 274;
}
#niwamame li a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}
#niwamame li span {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: var(--C-white);
  background: var(--C-green);
  min-width: 64.56692913385827%;
  max-width: 100%;
  position: absolute;
  top: 10px;
  left: 0;
  padding: 3px 10px;
}
#niwamame li .txt_area {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 11px 11.81102362204724%;
  z-index: +1;
}
#niwamame li .txt_area::after {
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -1;
}
#niwamame li .txt_area p {
  font-size: 13px;
  font-weight: 500;
  color: var(--C-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  padding-bottom: 6px;
}
#niwamame li .txt_area p::after {
  content: '';
  background: var(--C-white);
  width: 100%;
  height: 1px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
#niwamame li .txt_area time {
  font-size: 10px;
  color: var(--C-white);
  display: block;
  margin-top: 2px;
}
#niwamame li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 1100px) {
  #niwamame {
    background-size: cover;
  }
}
@media screen and (max-width: 750px) {
  #niwamame {
    background-image: url(../img/home/niwamame_bg_sp.webp);
    background-size: cover;
    padding-top: 17.33333333333333vw;
    padding-bottom: 17.33333333333333vw;
  }
  #niwamame .wrap {
    overflow: visible;
  }
  #niwamame .title {
    margin-bottom: 2.66666666666667vw;
  }
  #niwamame .title img {
    width: 40.26666666666667vw;
  }
  #niwamame .list_block {
    overflow-x: auto;
    white-space: nowrap;
    width: 100vw;
    margin-left: -4%;
  }
  #niwamame ul {
    width: 177.3333333333333vw;
    gap: 2.93333333333333vw;
    margin-bottom: 11.46666666666667vw;
    padding-left: 4%;
    padding-right: 4%;
  }
  #niwamame li {
    width: 42.4vw;
  }
  #niwamame li span {
    font-size: 2.93333333333333vw;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    padding: .53333333333333vw 1vw;
  }
  #niwamame li .txt_area {
    padding: 1.6vw 10.06289308176101%;
  }
  #niwamame li .txt_area p {
    font-size: 3.06666666666667vw;
    overflow: visible;
    white-space: normal;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    padding-bottom: .8vw;
  }
  #niwamame li .txt_area time {
    font-size: 2.66666666666667vw;
  }
}

/* ===============================
	inst_list
 =============================== */
#inst_list {
  text-align: center;
  padding-top: 110px;
  padding-bottom: 90px;
}
#inst_list .title {
  font-size: 23px;
  position: relative;
  margin-bottom: 16px;
}
#inst_list .title::before {
  content: '';
  width: 32px;
  height: 32px;
  background-image: url(../img/home/inst_title_icon.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: -32px;
  left: 0;
  right: 0;
  margin: auto;
}
@media screen and (max-width: 750px) {
  #inst_list {
    padding-top: 16.26666666666667vw;
    padding-bottom: 17.33333333333333vw;
  }
  #inst_list .wrap {
    overflow: visible;
  }
  #inst_list .title {
    font-size: 4vw;
    margin-bottom: 2.66666666666667vw;
  }
  #inst_list .title::before {
    width: 5.06666666666667vw;
    height: 5.06666666666667vw;
    top: -5.06666666666667vw;
  }
}