@charset "UTF-8";
:root {
  --col: min(100vw, 600px);
}
@media screen and (min-width: 769px) and (min-aspect-ratio: 4/3) {
  :root {
    --col: calc(390 / 1280 * 100vw);
  }
}

html {
  scroll-behavior: smooth;
  background-color: #f1f1f3;
}

body {
  width: 100%;
  line-height: 1.5;
  letter-spacing: 0.2px;
  font-size: 11px;
  transition: all 1.6s ease 0s;
  background-color: #f1f1f3;
  font-weight: 500;
  font-style: normal;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

a:hover {
  opacity: 0.6;
  transition: 0.6s;
}

@media screen and (min-width: 769px) and (min-aspect-ratio: 4/3) {
  .spNone {
    display: block;
  }
}
@media not all and (min-width: 769px) and (min-aspect-ratio: 4/3) {
  .spNone {
    display: none !important;
  }
}

@media screen and (min-width: 769px) and (min-aspect-ratio: 4/3) {
  .pcNone {
    display: none !important;
  }
}
@media not all and (min-width: 769px) and (min-aspect-ratio: 4/3) {
  .pcNone {
    display: block;
  }
}

/* .load
===================================================== */
.load {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  height: 100vh;
  z-index: 9999;
}

/* .bar_band（iOS：画面上端に固定するグレーの帯）
===================================================== */
.bar_band {
  display: none;
}
@supports (-webkit-touch-callout: none) {
  .bar_band {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    width: 100%;
    height: 20px;
    background-color: #f1f1f3;
  }
}

/* 共通
===================================================== */
.stack {
  display: grid;
  grid-template-columns: 100%;
}
.stack > * {
  grid-area: 1/1;
  justify-self: start;
  align-self: start;
  z-index: 1;
}

.crossfade {
  display: grid;
}
.crossfade .crossfade_slide {
  grid-area: 1/1;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.crossfade .crossfade_slide.is-active {
  opacity: 1;
}

.num {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-size: calc(56 / 390 * var(--col));
  line-height: 1;
  letter-spacing: 0;
  color: #1a1a38;
}

.sab {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-size: calc(32 / 390 * var(--col));
  line-height: 1;
  letter-spacing: 0;
  color: #1a1a38;
  white-space: nowrap;
}

.color {
  display: flex;
  gap: calc(10 / 390 * var(--col));
}

.color_dot {
  display: block;
  width: calc(20 / 390 * var(--col));
  height: calc(20 / 390 * var(--col));
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--dot);
  cursor: pointer;
}

.color_dot--line {
  box-shadow: inset 0 0 0 0.5px #1a1a38;
}

.deco {
  width: calc(134 / 390 * var(--col));
  height: calc(134 / 390 * var(--col));
}

.frame {
  border: 1px solid #1a1a38;
}

.item_credit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(5 / 390 * var(--col));
}

.item_credit_link {
  display: block;
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-size: calc(10 / 390 * var(--col));
  line-height: 1.5;
  letter-spacing: 0;
  color: #1a1a38;
  white-space: nowrap;
  background: linear-gradient(to right, #1a1a38 50%, transparent 50%) left bottom/2px 0.5px repeat-x;
}

/* .fv
===================================================== */
.fv {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
}
.fv > * {
  grid-area: 1/1;
}
@media screen and (min-width: 769px) and (min-aspect-ratio: 4/3) {
  .fv {
    position: fixed;
    top: 0;
    left: 0;
    width: 50vw;
    height: 100vh;
    overflow: hidden;
  }
}

@media screen and (min-width: 769px) and (min-aspect-ratio: 4/3) {
  .fv_img {
    height: 100%;
  }
  .fv_img img {
    height: 100%;
    object-fit: cover;
  }
}

.fv_ttl_sp {
  align-self: end;
  justify-self: start;
  width: calc(283.5 / 390 * var(--col));
  margin: 0 0 calc(48.7 / 390 * var(--col)) calc(53 / 390 * var(--col));
}

.fv_logo {
  align-self: end;
  justify-self: center;
  width: calc(144.6 / 390 * var(--col));
  margin-bottom: calc(8.4 / 390 * var(--col));
}
@media screen and (min-width: 769px) and (min-aspect-ratio: 4/3) {
  .fv_logo {
    margin-bottom: calc(11.4 / 390 * var(--col));
  }
}

/* main（SP：カラム幅で中央寄せ。縦向きタブレットで左右に余白ができる）
===================================================== */
@media not all and (min-width: 769px) and (min-aspect-ratio: 4/3) {
  main {
    width: var(--col);
    margin: 0 auto;
  }
}

/* .wrap（PC：右半分）
===================================================== */
@media screen and (min-width: 769px) and (min-aspect-ratio: 4/3) {
  .wrap {
    width: 50vw;
    margin-left: 50vw;
  }
}

.fv_ttl_pc {
  width: calc(496.5 / 390 * var(--col));
  margin: 0 auto;
}

@media screen and (min-width: 769px) and (min-aspect-ratio: 4/3) {
  .top_wrap {
    padding-top: calc(50 / 390 * var(--col));
  }
}

.top_block {
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 769px) and (min-aspect-ratio: 4/3) {
  .lead_wrap {
    width: calc(390 / 390 * var(--col));
    margin: calc(43 / 390 * var(--col)) auto 0;
  }
}

@media screen and (min-width: 769px) and (min-aspect-ratio: 4/3) {
  .container {
    width: calc(390 / 390 * var(--col));
    margin: 0 auto;
  }
}

/* .lead
===================================================== */
.lead {
  background-color: #d3d6e0;
  padding: calc(100 / 390 * var(--col)) 0;
}

.lead_txt {
  width: calc(350 / 390 * var(--col));
  margin: 0 auto;
  text-align: center;
  color: #1a1a38;
}

.lead_ttl {
  font-family: "yu-mincho-pr6n", "Yu Mincho", "YuMincho", "游明朝", "Hiragino Mincho ProN", serif;
  font-weight: 400;
  font-size: calc(16 / 390 * var(--col));
  line-height: 1.5;
  letter-spacing: 0;
}

.lead_desc {
  margin-top: calc(10 / 390 * var(--col));
  font-family: "yu-mincho-pr6n", "Yu Mincho", "YuMincho", "游明朝", "Hiragino Mincho ProN", serif;
  font-weight: 400;
  font-size: calc(12 / 390 * var(--col));
  line-height: 1.5;
  letter-spacing: 0;
}

.menu {
  display: flex;
  justify-content: center;
  gap: calc(10 / 390 * var(--col));
  margin-top: calc(100 / 390 * var(--col));
}

.menu_item {
  width: calc(100 / 390 * var(--col));
  line-height: 1;
}

.menu_link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(5 / 390 * var(--col));
  color: #000;
}

.menu_num {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-size: calc(16 / 390 * var(--col));
  line-height: 1;
  letter-spacing: 0;
}

.menu_arrow {
  display: block;
  width: calc(14.5 / 390 * var(--col));
  height: auto;
}

/* .sec（共通）
===================================================== */
.sec {
  padding-top: calc(100 / 390 * var(--col));
  overflow: hidden;
  overflow: clip;
}

/* .sec1
===================================================== */
.sec1 {
  background-color: #f1f1f3;
  padding-bottom: 30vh;
  position: relative;
  z-index: 2;
}

.sec1_1 {
  width: calc(300 / 390 * var(--col));
  margin: calc(28 / 390 * var(--col)) 0 0 calc(47 / 390 * var(--col));
}

.sec1_color {
  margin: calc(438 / 390 * var(--col)) 0 0 calc(267 / 390 * var(--col));
}

.sec1_sab {
  margin: calc(410 / 390 * var(--col)) 0 0 calc(20 / 390 * var(--col));
}

.sec1_num {
  margin-left: calc(27 / 390 * var(--col));
}

.sec1_2 {
  width: calc(225 / 390 * var(--col));
  margin: calc(50 / 390 * var(--col)) 0 0 calc(10 / 390 * var(--col));
}

.sec1_sub {
  margin-top: calc(80 / 390 * var(--col));
}

.sec1_3 {
  width: calc(300 / 390 * var(--col));
  margin-left: calc(20 / 390 * var(--col));
}

.sec1_4 {
  width: calc(100 / 390 * var(--col));
  margin: calc(175 / 390 * var(--col)) 0 0 calc(270 / 390 * var(--col));
}

.sec1_5 {
  width: calc(100 / 390 * var(--col));
  margin: calc(329 / 390 * var(--col)) 0 0 calc(270 / 390 * var(--col));
}

.sec1_6 {
  width: calc(178 / 390 * var(--col));
  margin-top: calc(443 / 390 * var(--col));
}

.sec1_credit {
  margin: calc(420 / 390 * var(--col)) 0 0 calc(20 / 390 * var(--col));
}

/* .sec2
===================================================== */
.sec2 {
  background-color: #d3d6e0;
  padding-bottom: calc(calc(117 / 390 * var(--col)) + 30vh);
  position: relative;
  z-index: 3;
}

.sec2_deco_1 {
  width: calc(225 / 390 * var(--col));
  height: calc(197 / 390 * var(--col));
  margin: calc(10 / 390 * var(--col)) 0 0 calc(24 / 390 * var(--col));
  background: url("../images/sec2_deco_1.svg") no-repeat center/100% 100%;
}

.sec2_frame_1 {
  width: calc(225 / 390 * var(--col));
  height: calc(197 / 390 * var(--col));
  margin: calc(20 / 390 * var(--col)) 0 0 calc(40 / 390 * var(--col));
}

.sec2_1 {
  width: calc(300 / 390 * var(--col));
  margin: calc(64 / 390 * var(--col)) 0 0 calc(45 / 390 * var(--col));
}

.sec2_color {
  margin: calc(441 / 390 * var(--col)) 0 0 calc(295 / 390 * var(--col));
}

.sec2_num {
  margin-left: calc(270 / 390 * var(--col));
}

.sec2_sab {
  align-self: end;
  margin: 0 0 calc(30 / 390 * var(--col)) calc(10 / 390 * var(--col));
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.sec2_sub {
  margin-top: calc(50 / 390 * var(--col));
}

.sec2_deco_2 {
  width: calc(225 / 390 * var(--col));
  height: calc(310 / 390 * var(--col));
  margin: calc(14 / 390 * var(--col)) 0 0 calc(148 / 390 * var(--col));
  background: url("../images/sec2_deco_2.svg") no-repeat center/100% 100%;
}

.sec2_deco_3 {
  width: calc(100 / 390 * var(--col));
  height: calc(163 / 390 * var(--col));
  margin: calc(470 / 390 * var(--col)) 0 0 calc(137 / 390 * var(--col));
  background: url("../images/sec2_deco_3.svg") no-repeat center/100% 100%;
}

.sec2_frame_2 {
  width: calc(225 / 390 * var(--col));
  height: calc(300 / 390 * var(--col));
  margin: calc(10 / 390 * var(--col)) 0 0 calc(153 / 390 * var(--col));
}

.sec2_2 {
  width: calc(225 / 390 * var(--col));
  margin-left: calc(165 / 390 * var(--col));
}

.sec2_3 {
  width: calc(225 / 390 * var(--col));
  margin-top: calc(320 / 390 * var(--col));
}

.sec2_pin_area {
  margin-top: calc(67 / 390 * var(--col));
  height: calc(calc(400 / 390 * var(--col)) + 80vh);
}

.sec2_pin {
  position: sticky;
  top: calc(50vh - calc(200 / 390 * var(--col)));
}

.sec2_4 {
  width: calc(300 / 390 * var(--col));
  margin-left: calc(10 / 390 * var(--col));
}

.sec2_5 {
  width: calc(225 / 390 * var(--col));
  margin: calc(100 / 390 * var(--col)) 0 0 calc(47 / 390 * var(--col));
}

.sec2_btm {
  margin-top: calc(65.5 / 390 * var(--col));
}

.sec2_deco_4 {
  width: calc(79 / 390 * var(--col));
  height: calc(167 / 390 * var(--col));
  margin: calc(280.5 / 390 * var(--col)) 0 0 calc(-16 / 390 * var(--col));
  background: url("../images/sec2_deco_4.svg") no-repeat center/100% 100%;
}

.sec2_6 {
  width: calc(249.5 / 390 * var(--col));
  margin-left: calc(140.5 / 390 * var(--col));
}

.sec2_credit {
  margin: calc(309.5 / 390 * var(--col)) 0 0 calc(20 / 390 * var(--col));
}

/* .sec3
===================================================== */
.sec3 {
  background-color: #f1f1f3;
  padding-bottom: calc(112 / 390 * var(--col));
  position: relative;
  z-index: 4;
  box-shadow: 2px 0 0 #f1f1f3;
}

.sec3_1 {
  width: calc(300 / 390 * var(--col));
  margin: calc(36 / 390 * var(--col)) 0 0 calc(45 / 390 * var(--col));
}

.sec3_color {
  margin: calc(446 / 390 * var(--col)) 0 0 calc(295 / 390 * var(--col));
}

.sec3_num {
  margin-left: calc(20 / 390 * var(--col));
}

.sec3_sab {
  justify-self: end;
  margin-right: calc(45 / 390 * var(--col));
}

.sec3_sub {
  margin-top: calc(44 / 390 * var(--col));
}

.sec3_deco_1 {
  margin-left: calc(107 / 390 * var(--col));
  background-color: #828b97;
}

.sec3_deco_2 {
  margin: calc(178 / 390 * var(--col)) 0 0 calc(4 / 390 * var(--col));
  background-color: #828b97;
}

.sec3_2 {
  width: calc(224 / 390 * var(--col));
  height: calc(300 / 390 * var(--col));
  margin: calc(6 / 390 * var(--col)) 0 0 calc(10 / 390 * var(--col));
  object-fit: cover;
}

.sec3_deco_3 {
  margin: calc(253 / 390 * var(--col)) 0 0 calc(149 / 390 * var(--col));
  background-color: #d4ccdd;
}

.sec3_deco_4 {
  margin: calc(431 / 390 * var(--col)) 0 0 calc(252 / 390 * var(--col));
  background-color: #d4ccdd;
}

.sec3_3 {
  width: calc(225 / 390 * var(--col));
  margin: calc(259 / 390 * var(--col)) 0 0 calc(155 / 390 * var(--col));
}

.sec3 .loop_swiper {
  width: calc(630 / 390 * var(--col));
  margin: calc(74 / 390 * var(--col)) 0 0 calc(-120 / 390 * var(--col));
}
.sec3 .loop_swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}
.sec3 .loop_swiper .swiper-slide {
  width: calc(150 / 390 * var(--col));
}
.sec3 .loop_swiper img {
  height: calc(200 / 390 * var(--col));
  object-fit: cover;
}

.sec3_credit {
  width: fit-content;
  margin: calc(20 / 390 * var(--col)) auto 0;
}

/* .footer
===================================================== */
.footer {
  background-color: #d3d6e0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(100 / 390 * var(--col)) 0 calc(18.5 / 390 * var(--col));
}

.footer_menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 / 390 * var(--col));
  line-height: 1;
}
.footer_menu a {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-size: calc(16 / 390 * var(--col));
  line-height: 1;
  letter-spacing: 0;
  color: #1a1a38;
}

.footer_logo {
  width: calc(200 / 390 * var(--col));
  margin-top: calc(50 / 390 * var(--col));
}

.footer_copy {
  margin-top: calc(20 / 390 * var(--col));
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-size: calc(10 / 390 * var(--col));
  line-height: 1.5;
  letter-spacing: 0;
  line-height: 1;
  color: #1a1a38;
  white-space: nowrap;
}

/* .all_btn（sec1の上部が画面上に達したら右下に表示）
===================================================== */
.all_btn {
  position: fixed;
  right: calc(15 / 390 * var(--col));
  bottom: calc(15 / 390 * var(--col));
  z-index: 99;
  width: calc(100 / 390 * var(--col));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.all_btn.is-show {
  opacity: 1;
  visibility: visible;
}/*# sourceMappingURL=style.css.map */