@charset "UTF-8";
/* //////////////////////////////////////////////////////////////////////////////////////////
default settings
//////////////////////////////////////////////////////////////////////////////////////////
*/
.FU251225otosidama {
  --pc-width: 1400;
  --sp-width: 750;
  --pc-artboard-width: 460;
  --sp-artboard-width: 750;
  --formula: calc(var(--variable) * var(--ratio));
  --formula_pc: calc(var(--variable) * 1);
}

@media (min-width: 1401px) {
  .FU251225otosidama {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: 1px;
  }
}

@media (min-width: 768px) and (max-width: 1400px) {
  .FU251225otosidama {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: calc(100vw / var(--pc-width));
  }
}

@media (max-width: 767px) {
  .FU251225otosidama {
    --ratio: 1;
    --variable: calc(100vw / var(--sp-width));
  }
}

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

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

.FU251225otosidama .invisible-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* //////////////////////////////////////////////////////////////////////////////////////////
common settings
//////////////////////////////////////////////////////////////////////////////////////////
*/
.FU251225otosidama {
  --black: #000000;
  --navy: #50789c;
  --dark-navy: #44536f;
  --pink: #ffa6bb;
  --light-pink: #ffd2dd;
  --brown: #774731;
  --bg-color: #f9f2f5;
  --font-credit: meno-banner, serif;
  --yu-gochic: 游ゴシック体, 游ゴシック Medium, Yu Gothic Medium, Yu Gothic,
    YuGothic, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  --font-medium: 500;
  --font-semi-bold: 600;
  position: relative;
  display: flex;
  background: var(--bg-color);
  font-feature-settings: "palt";
  margin: 0 0 calc(200 * var(--formula)) 0;
}

.FU251225otosidama .sec-set {
  position: relative;
  width: calc(460 * var(--formula_pc));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.FU251225otosidama [class*="__credit"] {
  font-family: var(--font-credit);
  font-size: calc(22 * var(--formula));
  line-height: 1.8;
  letter-spacing: 0.025em;
  font-weight: var(--font-semi-bold);
  display: flex;
  flex-direction: column;
  gap: calc(17 * var(--formula));
}

.FU251225otosidama [class*="__credit"] li {
  display: flex;
  gap: calc(25 * var(--formula));
}

.FU251225otosidama [class*="-obj-"] {
  position: relative;
  z-index: 5;
}

/* ::before 共通設定 */
.FU251225otosidama [class^="sec"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  width: 50vw;
  left: 50%;
  transform: translateX(-50%);
}

.FU251225otosidama [class*="-model"] {
  background: #ffffff;
}

.FU251225otosidama .stagger-child,
.FU251225otosidama .reveal-img,
.FU251225otosidama .scroll-fade-in {
  visibility: hidden;
}
#FU251225otosidama {
  position: relative;
  width: 100%;
  overflow-x: clip;
}

/* .particle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
  z-index: 100;
  overflow: clip;
} */

.FU251225otosidama .particle-item {
  position: absolute;
  pointer-events: none !important;
  z-index: 100;
  width: auto !important;
  height: auto !important;
}
/* //////////////////////////////////////////////////////////////////////////////////////////
layout settings
//////////////////////////////////////////////////////////////////////////////////////////
*/

.FU251225otosidama .lp-mv-area {
  position: sticky;
  flex: 1;
  min-width: 0;
  top: var(--lpHeaderHeight);
  height: calc(100vh - var(--lpHeaderHeight));
}

.FU251225otosidama .lp-mv-model {
  width: 100%;
  height: 100%;
  z-index: 1;
  position: relative;
}
.FU251225otosidama .lp-mv-model img {
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.FU251225otosidama .lp-mv-obj {
  width: calc(400 * (100vw / 1400));
  position: absolute;
  z-index: 5;
  bottom: 3.4%;
  left: 50.2%;
  transform: translateX(-50%);
  pointer-events: none;
}

.FU251225otosidama .lp-main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.FU251225otosidama .sec01 {
  gap: calc(73 * var(--formula));
  padding: calc(1122 * var(--formula)) 0 calc(148 * var(--formula)) 0;
  width: 100%;
}
.FU251225otosidama .sec01-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(../img/sec1-obj-01.jpg?v3);
  background-size: cover;
  background-position: top center;
}

.FU251225otosidama .sec1__txt-cont {
  z-index: 5;
  gap: calc(71 * var(--formula));
  display: flex;
  flex-direction: column;
}
.FU251225otosidama .sec01__txt1,
.FU251225otosidama .sec01__txt2,
.FU251225otosidama .sec01__txt3 {
  font-family: var(--yu-gochic);
  color: var(--black);
  font-size: calc(24 * var(--formula));
  line-height: 2.2;
  letter-spacing: 0.05em;
  text-align: center;
  font-weight: var(--font-medium);
}

.FU251225otosidama .sec01__txt3 {
  margin: calc(-12 * var(--formula)) calc(-8 * var(--formula)) 0 0;
}

.FU251225otosidama .sec02 {
  background: var(--navy);
  width: 100%;
  height: calc(120 * var(--formula));
  display: flex;
  justify-content: center;
}

.FU251225otosidama #sec2-slide {
  width: 100%;
}

.FU251225otosidama #sec2-slide .splide {
}

.FU251225otosidama #sec2-slide .splide__track {
}

.FU251225otosidama #sec2-slide .splide__list {
}
.FU251225otosidama .sec2-obj-01 {
  width: calc(630 * var(--formula));
}
.FU251225otosidama .sec2-obj-02 {
  width: calc(20 * var(--formula));
}

.FU251225otosidama #sec2-slide .splide__slide {
  display: grid;
  place-items: center;
}

/* Section 03 (Zigzag layout) */
.FU251225otosidama .sec03 {
  padding: calc(243 * var(--formula)) 0 0 0;
}
.FU251225otosidama .sec03::before {
  background-image: url(../img/sec3-bg-01.png?v2);
  z-index: 0;
}

.FU251225otosidama #sec03__h3 {
  font-family: var(--font-credit);
  color: var(--navy);
  font-size: calc(70 * var(--formula));
  line-height: 1.25;
  letter-spacing: 0.025em;
  text-align: center;
  font-weight: var(--font-semi-bold);
}

.FU251225otosidama .sec03__txt1 {
  font-family: var(--font-credit);
  color: var(--navy);
  font-size: calc(34 * var(--formula));
  line-height: 1;
  letter-spacing: 0.025em;
  text-align: center;
  font-weight: var(--font-semi-bold);
  margin: calc(38 * var(--formula)) 0 calc(60 * var(--formula)) 0;
}

.FU251225otosidama .sec03__img-cont1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(20 * var(--formula));
  align-items: start;
}

.FU251225otosidama .sec3-obj-01 {
  width: calc(240 * var(--formula));
  left: calc(55 * var(--formula));
}
.FU251225otosidama .sec3-obj-02 {
  width: calc(240 * var(--formula));
  left: calc(85 * var(--formula));
  top: calc(80 * var(--formula));
}
.FU251225otosidama .sec3-obj-03 {
  width: calc(240 * var(--formula));
  top: calc(-20 * var(--formula));
  right: calc(85 * var(--formula));
}
.FU251225otosidama .sec3-obj-04 {
  width: calc(240 * var(--formula));
  top: calc(70 * var(--formula));
  right: calc(55 * var(--formula));
}

.FU251225otosidama .sec03__img-cont2 {
  position: relative;
  padding: calc(190 * var(--formula)) 0 calc(240 * var(--formula)) 0;
}

.FU251225otosidama .sec03__txt2 {
  font-family: var(--font-credit);
  color: var(--navy);
  font-size: calc(40 * var(--formula));
  line-height: 1;
  letter-spacing: 0.025em;
  text-align: center;
  font-weight: var(--font-semi-bold);
  position: absolute;
  bottom: calc(321 * var(--formula));
  right: calc(70 * var(--formula));
}

.FU251225otosidama .sec3-obj-05 {
  width: calc(630 * var(--formula));
}

/* Section 04 - 11 ::before background images */
.FU251225otosidama .sec04 {
  padding: 0 0 calc(160 * var(--formula)) 0;
}
.FU251225otosidama .sec04::before {
  background-image: url(../img/sec4-bg-01.png?v2);
}

.FU251225otosidama .sec4-model-01 {
  width: calc(750 * var(--formula));
  z-index: 1;
  position: relative;
}
.FU251225otosidama .sec4-obj-01 {
  width: calc(250 * var(--formula));
  position: absolute;
  top: calc(-30 * var(--formula));
  left: calc(50 * var(--formula));
  pointer-events: none;
}

.FU251225otosidama .sec04__img-cont2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: start;
  padding: calc(100 * var(--formula)) calc(44 * var(--formula)) 0;
  position: relative;
  box-sizing: border-box;
}
.FU251225otosidama .sec4-model-02 {
  width: calc(360 * var(--formula));
  z-index: 1;
}
.FU251225otosidama .sec4-model-03 {
  width: calc(360 * var(--formula));
  position: absolute;
  right: calc(45 * var(--formula));
  top: calc(340 * var(--formula));
  z-index: 5;
}
.FU251225otosidama .sec04__credit {
  margin: calc(62 * var(--formula)) 0 0 0;
  gap: calc(17.5 * var(--formula));
  color: var(--dark-navy);
}

.FU251225otosidama .sec05 {
  padding: 0 0 calc(240 * var(--formula)) 0;
}
.FU251225otosidama .sec05::before {
  background-image: url(../img/sec5-bg-01.png?v2);
}
.FU251225otosidama .sec5-model-01 {
  width: calc(660 * var(--formula));
}
.FU251225otosidama .sec5-model-02 {
  width: calc(660 * var(--formula));
  margin: calc(30 * var(--formula)) 0 calc(63 * var(--formula)) 0;
}
.FU251225otosidama .sec05__credit {
  color: var(--dark-navy);
  align-items: center;
}

.FU251225otosidama .sec06a {
  padding: 0 0 calc(159 * var(--formula)) 0;
}
.FU251225otosidama .sec06a::before {
  background-image: url(../img/sec6-bg-01.png?v2);
}
.FU251225otosidama #sec06-slide {
  width: calc(750 * var(--formula));
}
.FU251225otosidama #sec06-slide .splide__slide {
  width: calc(750 * var(--formula));
}
.FU251225otosidama #sec06-slide .splide__pagination {
  bottom: calc(-44 * var(--formula));
  padding: 0;
  gap: calc(20 * var(--formula));
}
.FU251225otosidama #sec06-slide .splide__pagination__page {
  opacity: 1;
  width: calc(60 * var(--formula));
  height: calc(4 * var(--formula));
  background: var(--light-pink);
  border-radius: 0;
  margin: 0;
}
.FU251225otosidama #sec06-slide .splide__pagination__page.is-active {
  transform: scale(1);
}

.FU251225otosidama #sec06-slide .splide__pagination__page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: var(--pink);
}

.FU251225otosidama #sec06-slide .splide__pagination__page.is-active::before {
  animation: splide-loading-bar 3s linear;
  width: 100%;
}

@keyframes splide-loading-bar {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.FU251225otosidama .sec06a__credit {
  margin: calc(106 * var(--formula)) 0 0 0;
  align-items: center;
  color: var(--pink);
}

.FU251225otosidama .sec06b {
  padding: 0 0 calc(159 * var(--formula)) 0;
}
.FU251225otosidama .sec06b::before {
  background-image: url(../img/sec6b-bg-01.png?v2);
}
.FU251225otosidama .sec6-model-03 {
  width: calc(750 * var(--formula));
}
.FU251225otosidama .sec06b__credit {
  align-items: center;
  color: var(--pink);
  margin: calc(62 * var(--formula)) 0 0;
}

.FU251225otosidama .sec07 {
  padding: calc(80 * var(--formula)) 0 calc(80 * var(--formula)) 0;
}
.FU251225otosidama .sec07::before {
  background-image: url(../img/sec7-bg-01.png?v2);
}
.FU251225otosidama .sec7-model-01 {
  width: calc(600 * var(--formula));
}
.FU251225otosidama .sec7-obj-01 {
  width: calc(230 * var(--formula));
  position: absolute;
  right: calc(35 * var(--formula));
  top: calc(-1 * var(--formula));
  pointer-events: none;
}
.FU251225otosidama .sec7-model-02 {
  width: calc(750 * var(--formula));
  margin: calc(80 * var(--formula)) 0 0 0;
}

.FU251225otosidama .sec08 {
  padding: 0 0 calc(239 * var(--formula)) 0;
}
.FU251225otosidama .sec08::before {
  background-image: url(../img/sec8-bg-01.png?v2);
}
.FU251225otosidama .sec8-model-01 {
  width: calc(570 * var(--formula));
  background-image: linear-gradient(#ffffff, #ffffff);
  background-size: calc(508 * var(--formula)) calc(678 * var(--formula));
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
}
.FU251225otosidama .sec08__credit {
  align-items: center;
  color: var(--pink);
  margin: calc(62 * var(--formula)) 0 0 0;
}

.FU251225otosidama .sec09 {
  width: 100%;
  padding: 0 0 calc(161 * var(--formula)) 0;
}
.FU251225otosidama .sec09::before {
  background-image: url(../img/sec4-bg-09.png?v2);
}
.FU251225otosidama .sec9-model-01 {
  width: calc(750 * var(--formula));
  margin: 0 0 calc(100 * var(--formula)) 0;
}
.FU251225otosidama #sec09-slide {
  width: 100%;
}
.FU251225otosidama #sec09-slide .splide__slide {
  width: calc(450 * var(--formula));
}
.FU251225otosidama .sec09__credit {
  align-items: center;
  color: var(--brown);
  margin: calc(61 * var(--formula)) 0 0 0;
}

.FU251225otosidama .sec10 {
  padding: 0 0 calc(218 * var(--formula)) 0;
}
.FU251225otosidama .sec10::before {
  background-image: url(../img/sec10-bg-01.png?v2);
}
.FU251225otosidama .sec10-model-01 {
  width: calc(660 * var(--formula));
  margin: 0 0 calc(30 * var(--formula)) 0;
}
.FU251225otosidama .sec10-model-02 {
  width: calc(660 * var(--formula));
}
.FU251225otosidama .sec10__credit {
  align-items: center;
  color: var(--brown);
  margin: calc(61 * var(--formula)) 0 0 0;
}

.FU251225otosidama .sec11 {
  padding: 0 0 calc(190 * var(--formula)) 0;
}
.FU251225otosidama .sec11::before {
  background-image: url(../img/sec11-bg-01.png?v2);
}
.FU251225otosidama .link-btn {
  width: calc(582 * var(--formula));
}
.FU251225otosidama .sec11-obj-01 {
  width: calc(480 * var(--formula));
  margin: calc(219 * var(--formula)) 0 0 0;
}
.FU251225otosidama .sec11__staff-credit {
  font-family: var(--font-credit);
  font-size: calc(24 * var(--formula));
  line-height: 2;
  letter-spacing: 0.025em;
  font-weight: var(--font-semi-bold);
  color: var(--brown);
  align-items: center;
  margin: calc(100 * var(--formula)) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--formula));
}

/* SP用設定 */
@media (max-width: 767px) {
  .FU251225otosidama {
    flex-direction: column;
  }
  .FU251225otosidama .lp-mv-area {
    position: relative;
    height: auto;
    top: 0;
  }
  .FU251225otosidama .lp-mv-model {
    width: calc(750 * var(--formula));
    height: auto;
  }
  .FU251225otosidama .lp-mv-model img {
    height: unset;
  }
  .FU251225otosidama .lp-mv-obj {
    width: calc(644 * var(--formula));
    bottom: 10.77%;
    left: 50.2%;
  }
  .FU251225otosidama .sec-set {
    width: 100%;
  }
  .FU251225otosidama .sec01 {
    padding: calc(1122 * var(--formula)) 0 calc(148 * var(--formula)) 0;
  }
  /* SP時は背景を100%に戻す（スクロールバー回避） */
  .FU251225otosidama [class^="sec"]::before {
    width: 100%;
    left: 0;
    transform: none;
    background-size: cover;
  }
}