/* ===============================================
  * COMMON *
=============================================== */
:root {
  --spacer-xxs: 1.5rem;
  --spacer-xs: 2rem;
  --spacer-s: 1.8rem;
  --spacer-m: 4rem;
  --spacer-l: 5rem;
  --spacer-xl: 6rem;
  --padding-horizontal: 5.2%;
  --transition-duration: 1.5s;
}


@media (min-width: 769px) {
  :root {
    --spacer-xxs: 3rem;
    --spacer-xs: 4rem;
    --spacer-s: 3rem;
    --spacer-m: 8rem;
    --spacer-l: 10rem;
    --spacer-xl: 12rem;
    --padding-horizontal: min(4.54%, 5rem);
  }
}

.header[data-header-theme="light"].c-active,
.header[data-header-theme="dark"] {
  background: linear-gradient(180deg, #FFFDC1 33%, transparent 85%);
}

.main-area.lp {
  margin-bottom: 0 !important;
}

.lp_area img {
  width: 100%;
  height: auto;
}

.maivsiual {
  position: relative;
}

.lp_area .slick-slide {
  height: fit-content;
}

.slider-container {
  position: relative;
}

.main-container {
  overflow: hidden;
  font-family: "a-otf-ryumin-pr6n", serif;
  font-weight: 300;
  font-style: normal;
  color: #250D00;
  font-size: calc(15* (100vw /375));
  line-height: 2;
  letter-spacing: 0.08em;
  text-align: center;
  padding-top: calc(130* (100vw /375));
}

@media screen and (min-width: 768px) {
  .main-container {
    font-size: 1.8rem;
    padding-top: 16rem;
  }
}

.font_en {
  font-family: "adobe-garamond-pro", serif;
}

/*
 * Text
 */

/* pc */
body,
html {
  height: 100%;
  margin: 0 auto;
}

/* ===============================================
* 背景画像・背景色 *
=============================================== */
body:before,
body:after {
  content: "";
  display: block;
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: -1;
}

body:before {
  background: url(../img/bg01.jpg) center/100% no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

body:after {
  background: linear-gradient(0deg, #FFFDC1 8%, transparent 50%);
  top: 0;
}

.footer {
  z-index: 999;
}




/* ===============================================
  * アニメーション - 1 *
=============================================== */

/* 普通フェード */
.main-container .js_fade {
  opacity: 0;
  transition-duration: 1s;
  transition: ease-in, opacity 2500ms, transform 1000ms;
}

.main-container .js_fade.active {
  opacity: 1;
}


@media (max-width: 1400px) and (min-width: 768px) {
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}


/* 回転TX */
.keyvisual {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

img.keyvisual__scroll--circle {
  height: auto;
  width: 100%;
  animation: rotate 15s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (min-width: 768px) {
  .sponly {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .pconly {
    display: none !important;
  }

}



/* ===============================================
* maivsiual *
=============================================== */
.maivsiual .imgBox {
  width: calc(316* (100vw /375));
  margin: auto;
}

.txBox .logo {
  position: relative;
  width: calc(80* (100vw /375));
  margin: calc(31*(100vw / 375)) auto 0;
}

.txBox .logo::before {
  content: "";
  position: absolute;
  background: url(../img/svg/star_ylw.svg) center/contain no-repeat;
  width: calc(15* (100vw /375));
  height: calc(15* (100vw /375));
  top: calc(30* (100vw /375));
  left: 50%;
  transform: translateX(-50%);
}

.txBox h2 {
  font-family: "orpheuspro", serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(38* (100vw /375));
  line-height: 1;
  letter-spacing: 0;
  color: #C19400;
  margin-top: calc(44* (100vw /375));
}

.txBox p {
  margin-top: calc(35*(100vw / 375));
}

@media screen and (min-width: 768px) {
  .maivsiual {
    display: flex;
    justify-content: center;
    gap: 11.2rem;
    flex-direction: row-reverse;
    padding-left: 3.5rem;
  }

  .maivsiual .imgBox {
    width: 48.5rem;
    margin: 0;
  }

  .txBox {
    margin-top: 16rem;
    width: 52rem;
  }

  .txBox .logo {
    position: relative;
    width: 11.7rem;
    margin: 0 auto 0;
  }

  .txBox .logo::before {
    width: 2.4rem;
    height: 2.4rem;
    top: 5.5rem;
  }

  .txBox h2 {
    font-size: 6.6rem;
    margin-top: 8.5rem;
  }

  .txBox p {
    margin-top: 3.6rem;
  }
}

/* ===============================================
* info_wrap *
=============================================== */
.info_wrap {
  width: calc(345* (100vw /375));
  margin: calc(52*(100vw / 375)) auto 0;
  border: #250D00 1px solid;
  padding: calc(30*(100vw / 375)) 0 calc(26*(100vw / 375));
}

.info_wrap .info_ttl {
  font-size: calc(20* (100vw /375));
  letter-spacing: 0.08em;
  line-height: 1;
  width: fit-content;
  margin: auto;
  position: relative;
}

.info_wrap .info_ttl::before,
.info_wrap .info_ttl::after {
  content: "";
  position: absolute;
  background: url(../img/svg/star_bk.svg) center/contain no-repeat;
  width: calc(14*(100vw / 375));
  height: calc(14*(100vw / 375));
  top: calc(3*(100vw / 375));
}

.info_wrap .info_ttl::before {
  left: calc(-27*(100vw / 375));
}

.info_wrap .info_ttl::after {
  right: calc(-27* (100vw /375));
}

.info_wrap p {
  font-size: calc(15* (100vw /375));
  line-height: 1.5;
  margin-top: calc(26*(100vw / 375));
}

@media screen and (min-width: 768px) {
  .info_wrap {
    width: 52.8rem;
    margin: 10rem auto 0;
    padding: 4rem 0 3.2rem;
  }

  .info_wrap .info_ttl {
    font-size: 2.6rem;
  }

  .info_wrap .info_ttl::before,
  .info_wrap .info_ttl::after {
    width: 1.9rem;
    height: 1.9rem;
    top: 0.3rem;
  }

  .info_wrap .info_ttl::before {
    left: -3.6rem;
  }

  .info_wrap .info_ttl::after {
    right: -3.6rem;
  }

  .info_wrap p {
    font-size: 1.8rem;
    line-height: 1.8;
    margin-top: 2.1rem;
  }
}

/* ===============================================
* sec01 *
=============================================== */
.sec01 {
  position: relative;
  background: url(../img/bg02.jpg) center /contain repeat;
  padding: calc(86*(100vw / 375)) 0 calc(82*(100vw / 375));
  margin-top: calc(80*(100vw / 375));
}

.sec_ttl {
  position: relative;
  font-family: "orpheuspro", serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(32* (100vw /375));
  color: #003E56;
  line-height: 1;
}

.sec_ttl::before {
  content: "";
  position: absolute;
  background: url(../img/svg/star_brue.svg) center/contain no-repeat;
  width: calc(15*(100vw / 375));
  height: calc(15*(100vw / 375));
  top: calc(49*(100vw / 375));
  left: 50%;
  transform: translateX(-50%);
}

.sec_img {
  position: relative;
  width: calc(341*(100vw / 375));
  z-index: 1;
  margin-top: calc(58* (100vw /375));
  left: calc(-10* (100vw /375));
}

.sec_img .keyvisual {
  width: calc(130* (100vw /375));
  top: calc(-25*(100vw / 375));
  left: calc(40*(100vw / 375));
}

.sec_tx {
  text-align: left;
  width: calc(315* (100vw /375));
  margin: calc(8* (100vw /375)) auto 0;
}

.credit_wrap {
  color: #003E56;
  margin-top: calc(25* (100vw /375));
}

.credit_wrap a {
  font-size: calc(14* (100vw /375));
  text-decoration: underline;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .sec01 {
    padding: 17rem 0 15.6rem;
    margin-top: 16rem;
  }

  .sec_ttl {
    font-size: 5.6rem;
  }

  .sec_ttl::before {
    width: 2.4rem;
    height: 2.4rem;
    top: 8.8rem;
  }

  .sec_inner {
    display: flex;
    justify-content: center;
    gap: 6rem;
    padding-right: 7rem;
    margin-top: 8.6rem;

  }

  .sec_img {
    width: 50rem;
    margin-top: 0;
    left: 0;
  }

  .sec_img .keyvisual {
    width: 19.5rem;
    top: -4.4rem;
    left: 5rem;
  }

  .sec_tx {
    width: 57.2rem;
    margin: 7.4rem 0 0 0;
  }

  .credit_wrap {
    margin-top: 4.2rem;
  }

  .credit_wrap a {
    font-size: 1.6rem;
    line-height: 1.8;
  }
}

/* ===============================================
* sec02 *
=============================================== */
.sec02 {
  position: relative;
  background: #FFE691;
  padding: calc(87* (100vw /375)) 0 calc(0* (100vw /375));
}

.sec02 .sec_inner {
  position: relative;
  padding-bottom: calc(96* (100vw /375));
}

.sec02::before,
.sec02::after,
.sec02 .sec_inner::before,
.sec02 .sec_inner::after {
  position: absolute;
  content: "";
  background: url(../img/svg/frame.svg) center/contain no-repeat;
  width: calc(84* (100vw /375));
  height: calc(87* (100vw /375));
  z-index: 1;
}

.sec02::before,
.sec02::after {
  top: calc(10* (100vw /375));
}

.sec02 .sec_inner::before,
.sec02 .sec_inner::after {
  bottom: calc(10* (100vw /375));
}

.sec02::before,
.sec02 .sec_inner::before {
  left: calc(10* (100vw /375));
}

.sec02::after,
.sec02 .sec_inner::after {
  right: calc(10* (100vw /375));
}

.sec02::after {
  transform: scale(-1, 1);
}

.sec02 .sec_inner::before {
  transform: scale(1, -1);
}

.sec02 .sec_inner::after {
  transform: scale(-1, -1);
}

.sec02 .sec_ttl,
.sec02 .credit_wrap {
  color: #A34900;
}

.sec02 .sec_ttl::before {
  background: url(../img/svg/star_orange.svg) center/contain no-repeat;
}

.sec02 .sec_img {
  width: calc(341*(100vw / 375));
  margin-top: calc(58* (100vw /375));
  left: calc(60* (100vw /375));
}

.sec02 .sec_img .keyvisual {
  top: calc(-16*(100vw / 375));
  left: calc(120*(100vw / 375));
}

@media screen and (min-width: 768px) {
  .sec02 {
    padding: 17rem 0 0;
  }

  .sec02 .sec_inner {
    padding-bottom: 16.2rem;
    flex-direction: row-reverse;
    padding-right: 0;
    padding-left: 13.8rem;
    gap: 5rem;
  }

  .sec02::before,
  .sec02::after,
  .sec02 .sec_inner::before,
  .sec02 .sec_inner::after {
    width: 14.6rem;
    height: 15.2rem;
  }

  .sec02::before,
  .sec02::after {
    top: 2rem;
  }

  .sec02 .sec_inner::before,
  .sec02 .sec_inner::after {
    bottom: 2rem;
  }

  .sec02::before,
  .sec02 .sec_inner::before {
    left: 2rem;
  }

  .sec02::after,
  .sec02 .sec_inner::after {
    right: 2rem;
  }

  .sec02 .sec_img {
    width: 50rem;
    margin-top: 0;
    left: 0;
  }

  .sec02 .sec_img .keyvisual {
    top: -3.8rem;
    left: 17.3rem;
  }

  .sec02 .sec_tx {
    width: 51.4rem;
    margin: 10rem 0 0 0;
  }
}

/* ===============================================
* lp--btn *
=============================================== */
.lp--btn {
  padding: calc(60* (100vw /375)) 0 calc(60* (100vw /375));
}

.lp--btn a {
  position: relative;
  width: calc(283*(100vw / 375));
  left: calc(63*(100vw / 375));
  display: block;
}

@media screen and (min-width: 768px) {
  .lp--btn {
    padding: 10rem 0 10rem;
  }

  .lp--btn a {
    width: 33.3rem;
    left: 50%;
    transform: translateX(-45%);
  }
}