/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}
/* 
//////////////////////////////////////////////////////////////////////////////////////////
default settings
//////////////////////////////////////////////////////////////////////////////////////////
*/
.holiday {
  --navy: #00223b;
  --white: #ffffff;
  --font-weight-light: 300;
  --font-weight-semibold: 600;
  --font-varianle-regular: "slnt" 0, "wght" 400;
  --inter: "inter-variable", sans-serif;
  font-size: 62.5%;
  background: var(--navy);
}

@font-face {
  font-family: "Aktiv Grotesk";
  src: url("../font/aktiv-grotesk-regular.otf") format("opentype");
}

.holiday img,
.holiday picture {
  display: block;
  width: 100%;
  height: auto;
}

.holiday h2,
.holiday h3,
.holiday p,
.holiday li {
  margin-block: calc((1em - 1lh) / 2);
}

.holiday .invisible-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
html {
  scroll-padding-top: var(--headerHeight);
  scroll-behavior: smooth;
}

/* --- 抽出されたセレクタ --- */

/* レイアウト用セレクタ */
.holiday .section-settings {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.holiday [class*="__txt"] {
  font-family: var(--hkgrotesk);
  font-weight: normal;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 1.67;
  color: var(--white);
}

.holiday [class*="calendar-icon"] {
  position: absolute;
}

.holiday .credit-button {
  display: block;
  width: 4.6rem;
  height: 2rem;
  font-family: var(--inter);
  font-weight: var(--font-varianle-regular);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  line-height: 1.866;
  text-align: center;
  color: var(--navy);
  background: var(--white);
}

.holiday [class*="__credit"] {
  font-family: var(--inter);
  font-weight: var(--font-varianle-regular);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  line-height: 1.866;
  text-align: right;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  align-items: end;
}

.holiday [class*="__credit"] li {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
}

.holiday [class*="__colmn1"] {
  width: 90rem;
}
.holiday [class*="__colmn2"] {
  min-width: 0;
  width: 100%;
}
.holiday .sp_only {
  display: none;
}
.section2__colmn1,
.section4__colmn1 {
  display: grid;
  grid-template-areas:
    "area1 area4"
    "area2 area4"
    "area3 area4";
  grid-template-columns: 1fr 49rem;
  grid-template-rows: max-content max-content 1fr;
  margin: 0 0 8rem 0;
  gap: 4rem 6rem;
}

.section2__grid-cont1,
.section4__grid-cont1 {
  grid-area: area1;
  margin: 8rem 0 0 0;
}
.section2__grid-cont2,
.section4__grid-cont2 {
  grid-area: area2;
}
.section2__grid-cont3,
.section4__grid-cont3 {
  grid-area: area3;
  display: flex;
  justify-content: end;
  align-items: end;
}
.section2__grid-cont4,
.section4__grid-cont4 {
  grid-area: area4;
  height: 100%;
}

.holiday .section1__colmn1 {
  display: flex;
  justify-content: center;
}

.holiday .section1__txt {
  margin: 8.8rem 0 6.5rem 0;
  text-align: center;
}

.holiday .section1__colmn2 {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  background: var(--white);
  width: 100rem;
  height: 49.6rem;
  border: 1px solid #a28538;
  margin: 0 0 0 3.5rem;
}

.holiday .section1__grid-cont1 {
  position: relative;
  z-index: 1;
  margin: 0 0 0 -3.5rem;
}

.holiday .section1__grid-cont2 {
  margin: 4.2rem 5rem 6.6rem 5.9rem;
  position: relative;
}

.holiday .calendar-icon1 {
  top: 30%;
  left: -1.4%;
}

.holiday .calendar-icon2 {
  top: 48%;
  right: 15.4%;
}

.holiday .calendar-icon3 {
  top: 67%;
  right: 46.3%;
}

.holiday .calendar-icon4 {
  bottom: -6%;
  left: 29.7%;
}

.holiday .section2,
.holiday .section3,
.holiday .section4,
.holiday .section5 {
  margin: 12rem 0 0 0;
}

.holiday .section2__credit {
  margin: 0 0 0.3rem 0;
}

.holiday .splide {
  width: 100%;
}

.holiday .splide__list {
  left: -13.25rem;
  position: relative;
}

.holiday .splide__slide {
  width: 26.5rem;
}

.holiday .section3__colmn1 {
  display: grid;
  grid-template-areas:
    "area4 area1"
    "area4 area2"
    "area4 area3";
  grid-template-columns: max-content 1fr;
  grid-template-rows: max-content max-content 1fr;
  margin: 0 0 8rem 0;
  gap: 4rem 6rem;
}

.holiday .section3__grid-cont1 {
  grid-area: area1;
  align-self: start;
}
.holiday .section3__grid-cont2 {
  grid-area: area2;
  align-self: start;
}
.holiday .section3__grid-cont3 {
  grid-area: area3;
  align-self: end;
}
.holiday .section3__grid-cont4 {
  grid-area: area4;
  height: 100%;
}

.holiday .section3-item {
  margin: 8rem 0 0 0;
}

.holiday .section3__credit {
  margin: 0 0 0.5rem 0;
}

.holiday .section4 {
  margin: 11.7rem 0 0 0;
}

.holiday .section4__colmn1 {
  gap: 4.2rem 6rem;
}

.holiday .section4__grid-cont2 {
  margin: 0 0 0 0.4rem;
}
.holiday .section5__colmn1 {
  display: grid;
  grid-template-areas:
    "area1 area2"
    "area4 area4"
    ".     area3";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  margin: 0 0 8.2rem 0;
}
.holiday .section5__grid-cont1 {
  grid-area: area1;
}
.holiday .section5__grid-cont2 {
  grid-area: area2;
  justify-items: end;
  align-content: end;
}
.holiday .section5__grid-cont3 {
  grid-area: area3;
}
.holiday .section5__grid-cont4 {
  grid-area: area4;
  margin: 4rem 0 2.5rem 0;
}

.holiday .footer-cont {
  padding: 8rem 0 11.2rem 0;
}

.holiday .footer-cont__newitem {
  display: grid;
  width: 28rem;
  height: 5rem;
  background: var(--white);
  font-family: var(--hkgrotesk);
  font-weight: var(--font-weight-semibold);
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: center;
  color: var(--navy);
  place-items: center;
}

.holiday .footer-cont__gototop {
  display: grid;
  width: 28rem;
  height: 5rem;
  border: 1px solid var(--white);
  font-family: var(--hkgrotesk);
  font-weight: var(--font-weight-semibold);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: center;
  color: var(--white);
  margin: 0.7rem 0 0 0;
  place-items: center;
}

/* 
//////////////////////////////////////////////////////////////////////////////////////////
PC img settings
//////////////////////////////////////////////////////////////////////////////////////////
*/
.holiday .section1-item1__frame {
  width: 24rem;
}

.holiday .calendar-icon1__frame {
  width: 7.9rem;
}

.holiday .section1-item2__frame {
  width: 68.6rem;
}

.holiday .calendar-icon2__frame {
  width: 7.1rem;
}

.holiday .section2-item__frame {
  width: 26.4rem;
}

.holiday .section2-img-01__frame {
  width: 49rem;
}

.holiday .calendar-icon3__frame {
  width: 6.6rem;
}

.holiday .section3-item__frame {
  width: 25.3rem;
}

.holiday .section3-img-01__frame {
  width: 49rem;
}

.holiday .calendar-icon4__frame {
  width: 6rem;
}

.holiday .section4-item__frame {
  width: 29.9rem;
}

.holiday .section4-img-01__frame {
  width: 49rem;
}

.holiday .section5-item__frame {
  width: 26.8rem;
}

.holiday .section5-img-01__frame {
  width: 90rem;
}

.holiday .main-visual__frame {
  width: 100%;
}
/* 
//////////////////////////////////////////////////////////////////////////////////////////
SP img settings
//////////////////////////////////////////////////////////////////////////////////////////
*/
@media (max-width: 767px) {
  .holiday .section1-item1__frame {
    width: calc(248 * (100vw / 375));
  }

  .holiday .calendar-icon1__frame {
    width: calc(59.6 * (100vw / 375));
  }

  .holiday .section1-item2__frame {
    width: calc(284 * (100vw / 375));
  }

  .holiday .calendar-icon2__frame {
    width: calc(53.6 * (100vw / 375));
  }

  .holiday .section2-item__frame {
    width: calc(230 * (100vw / 375));
  }

  .holiday .section2-img-01__frame {
    width: calc(375 * (100vw / 375));
  }

  .holiday .calendar-icon3__frame {
    width: calc(49.8 * (100vw / 375));
  }

  .holiday .section3__grid-cont2 {
    margin: 0 0 0 calc(13 * (100vw / 375));
  }
  .holiday .section3-item__frame {
    width: calc(225.5 * (100vw / 375));
  }

  .holiday .section3-img-01__frame {
    width: calc(375 * (100vw / 375));
  }

  .holiday .calendar-icon4__frame {
    width: calc(44.1 * (100vw / 375));
  }

  .holiday .section4-item__frame {
    width: calc(255 * (100vw / 375));
  }

  .holiday .section4-img-01__frame {
    width: calc(375 * (100vw / 375));
  }

  .holiday .section5-item__frame {
    width: calc(226 * (100vw / 375));
  }

  .holiday .section5-img-01__frame {
    width: calc(375 * (100vw / 375));
  }

  .holiday .main-visual__frame {
    width: calc(375 * (100vw / 375));
  }
}
/* 
//////////////////////////////////////////////////////////////////////////////////////////
SP settings
//////////////////////////////////////////////////////////////////////////////////////////
*/
@media (max-width: 767px) {
  .holiday .section1__colmn2 {
    grid-template-columns: 1fr;
    width: calc(325 * 100vw / 375) !important;
    height: max-content !important;
    justify-items: center;
    margin: 0 0 0 calc(-5 * 100vw / 375);
  }

  .holiday .section1__grid-cont1 {
    justify-self: center;
    margin: calc(-47 * 100vw / 375) 0 0 0;
  }
  .section2__colmn1,
  .section3__colmn1,
  .section4__colmn1,
  .section5__colmn1 {
    display: flex;
    flex-direction: column;
    gap: calc(14.5 * 100vw / 375);
    margin: 0 0 calc(42 * 100vw / 375) 0;
    align-items: center;
  }

  .section2__grid-cont1,
  .section3__grid-cont1,
  .section4__grid-cont1,
  .section5__grid-cont1 {
    order: 1;
    margin: calc(23 * 100vw / 375) 0 0 calc(10 * 100vw / 375);
  }
  .section2__grid-cont4,
  .section3__grid-cont4,
  .section4__grid-cont4,
  .section5__grid-cont4 {
    order: 2;
  }
  .section2__grid-cont2,
  .section3__grid-cont2,
  .section4__grid-cont2,
  .section5__grid-cont2 {
    order: 3;
  }
  .section2__grid-cont3,
  .section3__grid-cont3,
  .section4__grid-cont3,
  .section5__grid-cont3 {
    order: 4;
  }
  .section2__grid-cont3,
  .section3__grid-cont3,
  .section4__grid-cont3,
  .section5__grid-cont3 {
    margin: calc(20 * 100vw / 375) calc(5 * 100vw / 375) 0 0;
  }
  .holiday [class*="__txt"] {
    font-family: var(--hkgrotesk);
    font-weight: normal;
    font-size: calc(14 * 100vw / 375);
    letter-spacing: 0.1em;
    line-height: 1.67;
    color: var(--white);
  }

  .holiday [class*="calendar-icon"] {
    position: absolute;
  }

  .holiday .credit-button {
    width: calc(46 * 100vw / 375);
    height: calc(20 * 100vw / 375);
    font-size: calc(12 * 100vw / 375);
  }

  .holiday [class*="__credit"] {
    font-size: calc(12 * 100vw / 375);
    gap: calc(13 * 100vw / 375);
  }

  .holiday [class*="__credit"] li {
    gap: calc(14 * 100vw / 375);
  }

  .holiday [class*="__colmn1"] {
    width: 100%;
  }
  .holiday [class*="__colmn2"] {
    min-width: 0;
    width: 100%;
  }
  .holiday .section1__txt {
    margin: calc(36 * 100vw / 375) 0 calc(81 * 100vw / 375) 0;
    text-align: center;
  }
  .holiday .section1__grid-cont2 {
    margin: calc(39 * 100vw / 375) 0 calc(40 * 100vw / 375)
      calc(-1 * 100vw / 375);
    position: relative;
  }
  .holiday .splide__list {
    left: unset;
  }
  .holiday .splide__slide {
    width: calc(162.5 * 100vw / 375);
  }
  .holiday .section5__colmn1 {
    display: flex;
    margin: 0 0 calc(43 * 100vw / 375) 0;
  }
  .holiday .footer-cont {
    padding: calc(41 * 100vw / 375) 0 calc(108 * 100vw / 375) 0;
  }
  .holiday .footer-cont__newitem {
    width: calc(280 * 100vw / 375);
    height: calc(50 * 100vw / 375);
    font-size: calc(14 * 100vw / 375);
  }
  .holiday .footer-cont__gototop {
    width: calc(280 * 100vw / 375);
    height: calc(50 * 100vw / 375);
    font-size: calc(14 * 100vw / 375);
    margin: calc(7 * 100vw / 375) 0 0 0;
  }
  .holiday .calendar-icon1 {
    top: 31%;
    left: -4%;
  }
  .holiday .calendar-icon2 {
    top: 48%;
    right: 10.5%;
  }
  .holiday .calendar-icon3 {
    top: 67%;
    right: 40%;
  }
  .holiday .calendar-icon4 {
    bottom: -7.5%;
    left: 28%;
  }
  .holiday .section-settings:not(.section1) [class*="__grid-cont1"],
  .holiday .section-settings:not(.section1) [class*="__grid-cont2"],
  .holiday .section-settings:not(.section1) [class*="__grid-cont3"] {
    width: calc(355 * 100vw / 375);
  }
  .holiday .sp_only {
    display: block;
  }
  .holiday .section3__colmn1 {
    display: flex;
    gap: calc(15 * 100vw / 375);
    margin: 0 0 calc(42 * (100vw / 375)) 0;
  }
  .holiday .section3 {
    margin: 0;
  }
  .holiday .section3-item {
    margin: 0 0 0 calc(3 * (100vw / 375));
  }
  .holiday .section2__grid-cont2 {
    margin: 0 0 0 calc(5 * 100vw / 375);
  }
  .holiday .section3__grid-cont1 {
    margin: calc(60 * 100vw / 375) 0 0 calc(10 * 100vw / 375);
  }
  .holiday .section3__grid-cont3 {
    align-self: unset;
  }
  .holiday .section4__grid-cont1 {
    margin: 0 0 0 calc(6 * 100vw / 375);
  }
  .holiday .section4 {
    margin: calc(59 * 100vw / 375) 0 0 0;
  }
  .holiday .section4__colmn1 {
    gap: calc(14 * 100vw / 375);
    margin: 0 0 calc(43 * 100vw / 375) 0;
  }
  .holiday .section4__grid-cont2 {
    margin: calc(2 * 100vw / 375) 0 0 calc(5 * 100vw / 375);
  }
  .holiday .section5__grid-cont1 {
    margin: calc(23 * 100vw / 375) 0 0 calc(6 * 100vw / 375);
  }
  .holiday .section5__grid-cont4 {
    margin: 0;
  }
  .holiday .section5__grid-cont2 {
    margin: calc(1 * 100vw / 375) 0 0 calc(5 * 100vw / 375);
  }
}
/* 
//////////////////////////////////////////////////////////////////////////////////////////
animation settings
//////////////////////////////////////////////////////////////////////////////////////////
*/
@keyframes iconanime {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.holiday .calendar-icon1 a,
.holiday .calendar-icon2 a,
.holiday .calendar-icon3 a,
.holiday .calendar-icon4 a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  z-index: 1;
  animation: iconanime 1.5s ease-in-out infinite alternate;
  transition: transform 0.3s ease;
}
.holiday .calendar-icon1 a:hover,
.holiday .calendar-icon2 a:hover,
.holiday .calendar-icon3 a:hover,
.holiday .calendar-icon4 a:hover {
  transform: scale(1.2);
}