@charset "UTF-8";

/* --- デフォルトCSS設定 --- */

#FU260722cinnamon {

margin: 0 0 calc(200 * var(--formula)) 0;

}



@media (max-width: 767px) {

#FU260722cinnamon {

    margin: 0 0 0 0;

  }

}



#FU260722cinnamon {

  min-width: 100%;

  max-width: 100%;

  display: flex;

  font-feature-settings: "palt";

  position: relative;

  --black: #000000;

  --white: #ffffff;

  --sky-blue: #7dcbf2;

  --light-blue: #d7ecf4;

  --blue: #2d67a0;

  --navy: #104566;

  --item-sky-blue: #a3ced8;

  --item-black: #12110a;

  --item-gray: #cccccc;

  --item-pink: #e2c0c0;

  --font-jpn: dnp-shuei-gothic-kin-std, sans-serif;

  --font-credit: gamay-narrow, sans-serif;

  --font-b: 600;

  --pc-width: 1400;

  --sp-width: 750;

  --pc-artboard-width: 450;

  --sp-artboard-width: 750;

  --formula: calc(var(--variable) * var(--ratio));

  --formula_pc: calc(var(--variable) * 1);

  background: var(--light-blue);

}



@media (min-width: 1401px) {

  #FU260722cinnamon {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: 1px;

  }

}

@media (min-width: 768px) and (max-width: 1400px) {

  #FU260722cinnamon {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: calc(100vw / var(--pc-width));

  }

}

@media (max-width: 767px) {

  #FU260722cinnamon {

    --ratio: 1;

    --variable: calc(100vw / var(--sp-width));

  }

}



#FU260722cinnamon img {

  display: block;

  width: 100%;

  height: auto;

}



#FU260722cinnamon h2,

#FU260722cinnamon h3,

#FU260722cinnamon p,

#FU260722cinnamon li {

  margin-block: calc((1em - 1lh) / 2);

}



#FU260722cinnamon .invisible-heading {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}



#FU260722cinnamon [class*="-img-"]:has(a){

  display: flex;

  flex-direction: column;

  line-height: 0;

  font-size: 0;

  background-color: rgba(255, 255, 255, 1);

}



#FU260722cinnamon [class*="-img-"]:has(a).zoom-out{

  display: flex;

  flex-direction: column;

  line-height: 0;

  font-size: 0;

  background-color: rgba(255, 255, 255, 0);

  transition: background-color 3s cubic-bezier(0.22, 0.61, 0.36, 1);

}



#FU260722cinnamon [class*="-img-"]:has(a).zoom-out.is-visible {

  background-color:  rgba(255, 255, 255, 1); 

}



/* --- 属性セレクタ設定 --- */



#FU260722cinnamon [class*="__inner--vertical"] {

  display: flex;

  flex-direction: column;

}



#FU260722cinnamon [class*="__inner--horizontal"] {

  display: flex;

}



#FU260722cinnamon [class*="__inner--absolute"] {

  position: relative;

}



#FU260722cinnamon [class*="__credit"] {

  display: flex;

  flex-direction: column;

  gap: calc(24 * var(--formula));

}



#FU260722cinnamon [class*="__credit"] li {

  display: flex;

  font-family: var(--font-credit);

  color: var(--blue);

  font-size: calc(24 * var(--formula));

  line-height: 1;

  letter-spacing: 0.02em;

  font-weight: var(--font-b);

  text-transform: uppercase;

  gap: calc(16 * var(--formula));

}



#FU260722cinnamon [class*="__inner--grid"] {

  display: grid;

}



#FU260722cinnamon [class*="teaser-sec__txt--desc"] {

  font-family: var(--font-jpn);

  color: var(--blue);

  font-size: calc(26 * var(--formula));

  line-height: calc(57.2 / 26);

  letter-spacing: 0.05em;

  text-align: center;

  font-weight: var(--font-b);

}

#FU260722cinnamon [class*="teaser-sec__item"] {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: calc(97 * var(--formula));

}

#FU260722cinnamon [class*="teaser-sec__info"] {

  font-family: var(--font-credit);

  color: var(--blue);

  font-size: calc(27 * var(--formula));

  line-height: 1;

  letter-spacing: 0.02em;

  text-align: center;

  font-weight: var(--font-b);

  text-transform: uppercase;

}

#FU260722cinnamon [class*="teaser-sec__info"] a {

  display: flex;

  flex-direction: column;

  gap: calc(14 * var(--formula));

}

#FU260722cinnamon [id*="teaser-slide"],

#FU260722cinnamon [id*="teaser-slide"] .splide__slide {

  width: calc(234 * var(--formula));

  height: calc(300 * var(--formula));

}

/* --- 固有クラス設定 --- */



#FU260722cinnamon .sec-set {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

}



#FU260722cinnamon .z1-relative {

  z-index: 1;

  position: relative;

}



#FU260722cinnamon .z5-absolute {

  z-index: 5;

  position: absolute;

}



/* --- 抽出されたCSS（上から順） --- */

#FU260722cinnamon .lp-left-area,

#FU260722cinnamon .lp-right-area {

  top: 60px;

  position: sticky;

  height: 100vh;

  flex: 1;

  display: grid;

  place-items: center;

}



#FU260722cinnamon .lp-main-area {

  width: calc(450 * var(--formula_pc));

  background: var(--white);

}



#FU260722cinnamon .lp-pc-01 {

  width: calc(260 * var(--formula_pc));

}



#FU260722cinnamon .lp-mv-sec {

  overflow: hidden;

  width: 100%;

}



#FU260722cinnamon .mv-img-01 {

  width: calc(750 * var(--formula));

}



#FU260722cinnamon .lp-mv-sec__scroll {

  display: flex;

  width: max-content;

  margin: 0;

  padding: 0;

  background: var(--sky-blue);

  height: calc(88 * var(--formula));

  align-items: center;

}



#FU260722cinnamon .mv-txt-01 {

  width: calc(997 * var(--formula));

  flex-shrink: 0;

  animation: mv-infinite-scroll 10s linear infinite;

}



#FU260722cinnamon .teaser-sec {

  background: var(--light-blue);

  padding: 0 0 calc(144 * var(--formula)) 0;

}



#FU260722cinnamon .teaser-sec__inner--vertical {

  position: relative;

  align-items: center;

  justify-content: center;

  z-index: 0;

  width: 100%;

  margin: calc(161 * var(--formula)) 0 calc(312 * var(--formula)) 0;

  gap: calc(68 * var(--formula));

}



#FU260722cinnamon .teaser-sec__inner--vertical::before {

  content: "";

  width: calc(710 * var(--formula));

  height: calc(725 * var(--formula));

  background-image: url(../img/teaser-obj-01.svg);

  background-position: center;

  background-repeat: no-repeat;

  background-size: contain;

  z-index: -1;

  position: absolute;

  left: 50%;

  top: 56.5%;

  transform: translate(-50%, -50%);

}



#FU260722cinnamon .teaser-obj-02 {

  width: calc(270 * var(--formula));

  bottom: calc(-226 * var(--formula));

  left: calc(40 * var(--formula));

}



#FU260722cinnamon .teaser-txt-01 {

  width: calc(537 * var(--formula));

  margin: 0 0 calc(56 * var(--formula)) calc(56 * var(--formula));

}



#FU260722cinnamon .teaser-sec__inner--horizontal {

  gap: calc(12 * var(--formula));

}



#FU260722cinnamon .sec01 {

  background: var(--light-blue);

}



#FU260722cinnamon .sec-txt-01 {

  width: calc(306 * var(--formula));

  margin: calc(140 * var(--formula)) 0 calc(39 * var(--formula))

    calc(7 * var(--formula));

}



#FU260722cinnamon .teaser-img-10 {

  width: calc(750 * var(--formula));

}



#FU260722cinnamon .sec-obj-01 {

  width: calc(133 * var(--formula));

  top: calc(41 * var(--formula));

  right: calc(25 * var(--formula));

}



#FU260722cinnamon .sec01__inner--vertical {

  margin: calc(100 * var(--formula)) 0 0 0;

  gap: calc(73 * var(--formula));

  position: relative;

}

#FU260722cinnamon #sec01-slide,

#FU260722cinnamon #sec01-slide .splide__slide {

  width: calc(580 * var(--formula));

}

#sec01-slide .splide__pagination {

  left: unset;

  right: 0;

  bottom: calc(-34 * var(--formula));

}

#FU260722cinnamon .teaser-img-11 {

  width: calc(580 * var(--formula));

}



#FU260722cinnamon .sec-obj-02 {

  width: calc(155 * var(--formula));

  top: calc(-78 * var(--formula));

  left: calc(-57 * var(--formula));

}



#FU260722cinnamon .sec-obj-03 {

  width: calc(38 * var(--formula));

  bottom: calc(198 * var(--formula));

  right: calc(49 * var(--formula));

}



#FU260722cinnamon .sec01__credit {

  align-self: flex-end;

  align-items: flex-end;

}



#FU260722cinnamon .sec02 {

  background: var(--light-blue);

}



#FU260722cinnamon .sec02__inner--absolute {

  margin: calc(182 * var(--formula)) 0 0 0;

}



#FU260722cinnamon .sec-img-01 {

  width: calc(580 * var(--formula));

}



#FU260722cinnamon .sec-obj-04 {

  width: calc(158 * var(--formula));

  top: calc(-155 * var(--formula));

  right: calc(-64 * var(--formula));

}



#FU260722cinnamon .sec-img-02 {

  width: calc(750 * var(--formula));

  margin: calc(100 * var(--formula)) 0 0 0;

}



#FU260722cinnamon .sec-obj-05 {

  width: calc(260 * var(--formula));

  margin: calc(100 * var(--formula)) 0 0 0;

}



#FU260722cinnamon .sec02__inner--vertical {

  align-items: center;

  margin: calc(50 * var(--formula)) 0 calc(182 * var(--formula)) 0;

  gap: calc(40 * var(--formula));

}



#FU260722cinnamon #sec02-slide {

  width: calc(750 * var(--formula));

}



#FU260722cinnamon #sec02-slide .splide__slide {

  width: calc(380 * var(--formula));

}



#FU260722cinnamon .sec02__credit {

  align-items: center;

}

#FU260722cinnamon .sec02__credit li:nth-of-type(1) {

  margin: 0 0 0 calc(-12 * var(--formula));

}



#FU260722cinnamon .sec-img-06 {

  width: calc(750 * var(--formula));

}



#FU260722cinnamon .sec-obj-06 {

  width: calc(37 * var(--formula));

  top: calc(-9 * var(--formula));

  right: calc(129 * var(--formula));

}



#FU260722cinnamon .sec-obj-07 {

  width: calc(37 * var(--formula));

  bottom: calc(-10 * var(--formula));

  left: calc(72 * var(--formula));

}



#FU260722cinnamon .sec-img-07 {

  width: calc(750 * var(--formula));

}



#FU260722cinnamon .sec04__inner--vertical {

  margin: calc(100 * var(--formula)) 0 0 0;

  gap: calc(73 * var(--formula));

}



#FU260722cinnamon #sec04-slide,

#FU260722cinnamon #sec04-slide .splide__slide {

  width: calc(580 * var(--formula));

}

#FU260722cinnamon #sec04-slide .splide__pagination {

  left: 0;

  right: unset;

  bottom: calc(-34 * var(--formula));

}

#FU260722cinnamon .sec-obj-08 {

  width: calc(156 * var(--formula));

  top: calc(-125 * var(--formula));

  left: calc(-57 * var(--formula));

}



#FU260722cinnamon .sec-obj-09 {

  width: calc(132 * var(--formula));

  bottom: calc(-33 * var(--formula));

  right: calc(-49 * var(--formula));

}



#FU260722cinnamon .sec04__credit {

  gap: calc(28 * var(--formula));

}



#FU260722cinnamon .sec05__inner--vertical {

  align-items: center;

  margin: calc(182 * var(--formula)) 0 calc(183 * var(--formula)) 0;

}



#FU260722cinnamon .sec-obj-10 {

  width: calc(245 * var(--formula));

  top: 38.2%;

  right: -12%;

}



#FU260722cinnamon .sec-img-10 {

  width: calc(580 * var(--formula));

  margin: 0 0 calc(40 * var(--formula)) 0;

}



#FU260722cinnamon #sec05-slide,

#FU260722cinnamon #sec05-slide .splide__slide {

  width: calc(580 * var(--formula));

}

#FU260722cinnamon #sec05-slide .splide__pagination {

  bottom: calc(-34 * var(--formula));

}

#FU260722cinnamon .sec05__credit {

  margin: calc(73 * var(--formula)) 0 0 0;

  align-items: center;

}

#FU260722cinnamon .sec05__credit li:nth-of-type(2) {

  margin: 0 0 0 calc(14 * var(--formula));

}

#FU260722cinnamon .sec06 {

  background: var(--navy);

}



#FU260722cinnamon .sec06__inner--vertical {

  align-items: center;

  margin: calc(160 * var(--formula)) 0 calc(162 * var(--formula)) 0;

  gap: calc(39 * var(--formula));

}



#FU260722cinnamon .sec-img-13 {

  width: calc(420 * var(--formula));

  mask-image: url(../img/sec-img-13.png);

  mask-repeat: no-repeat;

  mask-size: contain;

}



#FU260722cinnamon .sec-obj-11 {

  width: calc(201 * var(--formula));

  top: calc(-173 * var(--formula));

  right: calc(-143 * var(--formula));

}



#FU260722cinnamon .sec-obj-12 {

  width: calc(97 * var(--formula));

  bottom: calc(-119 * var(--formula));

  left: calc(-118 * var(--formula));

}



#FU260722cinnamon .sec06__credit li {

  color: var(--white);

}



#FU260722cinnamon .sec07 {

  background: var(--navy);

}



#FU260722cinnamon .sec-img-14 {

  width: calc(750 * var(--formula));

}



#FU260722cinnamon .sec07__inner--vertical {

  margin: calc(120 * var(--formula)) 0 calc(182 * var(--formula)) 0;

  gap: calc(39 * var(--formula));

}



#FU260722cinnamon .sec-img-15 {

  width: calc(580 * var(--formula));

}



#FU260722cinnamon .sec07__credit {

  align-self: flex-end;

  align-items: flex-end;

}



#FU260722cinnamon .sec07__credit li {

  color: var(--white);

}



#FU260722cinnamon .sec08__inner--absolute {

  margin: calc(160 * var(--formula)) 0 0 0;

}



#FU260722cinnamon .sec-img-16 {

  width: calc(580 * var(--formula));

}



#FU260722cinnamon .sec-obj-13 {

  width: calc(36 * var(--formula));

  top: calc(-10 * var(--formula));

  left: calc(137 * var(--formula));

}



#FU260722cinnamon .sec-obj-14 {

  width: calc(37 * var(--formula));

  bottom: calc(185 * var(--formula));

  right: calc(-24 * var(--formula));

}



#FU260722cinnamon .sec-img-17 {

  width: calc(580 * var(--formula));

  margin: calc(160 * var(--formula)) 0 calc(100 * var(--formula)) 0;

}



#FU260722cinnamon .sec09__inner--vertical {

  align-items: center;

  gap: calc(39 * var(--formula));

}



#FU260722cinnamon .sec-img-18 {

  width: calc(750 * var(--formula));

}



#FU260722cinnamon .sec-obj-15 {

  width: calc(104 * var(--formula));

  right: calc(28 * var(--formula));

  top: calc(-77 * var(--formula));

}



#FU260722cinnamon .sec-obj-16 {

  width: calc(215 * var(--formula));

  bottom: calc(-129 * var(--formula));

  left: calc(30 * var(--formula));

}



#FU260722cinnamon .sec09__credit {

  align-items: center;

}



#FU260722cinnamon .lp-footer-sec__inner--grid {

  place-items: center;

  margin: calc(181 * var(--formula)) 0 0 0;

}



#FU260722cinnamon .footer-obj-01 {

  width: calc(480 * var(--formula));

  grid-area: 1/1;

}



#FU260722cinnamon .footer-txt-01 {

  width: calc(470 * var(--formula));

  grid-area: 1/1;

  margin: calc(36 * var(--formula)) 0 0 0;

}



#FU260722cinnamon .z5-relative {

  z-index: 5;

  position: relative;

}



#FU260722cinnamon .footer-txt-02 {

  width: calc(487 * var(--formula));

  margin: calc(62 * var(--formula)) 0 calc(220 * var(--formula)) 0;

}



#FU260722cinnamon .right__inner--grid {

  place-items: center;

}



#FU260722cinnamon .lp-pc-02 {

  width: calc(204 * var(--formula_pc));

  grid-area: 1/1;

}



#FU260722cinnamon .lp-pc-03 {

  width: calc(288 * var(--formula_pc));

  grid-area: 1/1;

}



#FU260722cinnamon .splide--timer-pager .splide__pagination {

  padding: 0;

  gap: calc(30 * var(--formula));

}

#FU260722cinnamon .splide--timer-pager .splide__pagination__page {

  opacity: 1;

  width: calc(60 * var(--formula));

  height: calc(4 * var(--formula));

  background: #96b3d0;

  border-radius: 0;

  position: relative;

  overflow: hidden;

  margin: 0;

}

#FU260722cinnamon .splide--timer-pager .splide__pagination__page.is-active {

  transform: scale(1);

  background: #96b3d0;

}



#FU260722cinnamon

  .splide--timer-pager

  .splide__pagination__page.is-active::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  background-color: var(--blue);

  animation: cinnamon-timer-progress 3.5s linear forwards;

}



#FU260722cinnamon [id*="teaser-slide"] .splide__pagination {

  padding: 0;

  bottom: calc(-60 * var(--formula));

  gap: calc(20 * var(--formula));

}



#FU260722cinnamon [id*="teaser-slide"] .splide__pagination__page {

  opacity: 1;

  width: calc(20 * var(--formula));

  height: calc(20 * var(--formula));

  margin: 0;

}



#FU260722cinnamon [id*="teaser-slide"] .splide__pagination__page.is-active {

  transform: scale(1);

}



#FU260722cinnamon

  #teaser-slide1

  .splide__pagination

  li:nth-child(1)

  .splide__pagination__page,

#FU260722cinnamon

  #teaser-slide2

  .splide__pagination

  li:nth-child(3)

  .splide__pagination__page {

  background: var(--white);

}

#FU260722cinnamon

  #teaser-slide1

  .splide__pagination

  li:nth-child(2)

  .splide__pagination__page,

#FU260722cinnamon

  #teaser-slide2

  .splide__pagination

  li:nth-child(1)

  .splide__pagination__page {

  background: var(--item-sky-blue);

}

#FU260722cinnamon

  #teaser-slide1

  .splide__pagination

  li:nth-child(3)

  .splide__pagination__page,

#FU260722cinnamon

  #teaser-slide2

  .splide__pagination

  li:nth-child(2)

  .splide__pagination__page,

#FU260722cinnamon

  #teaser-slide3

  .splide__pagination

  li:nth-child(1)

  .splide__pagination__page {

  background: var(--item-black);

}

#FU260722cinnamon

  #teaser-slide3

  .splide__pagination

  li:nth-child(2)

  .splide__pagination__page {

  background: var(--item-gray);

}



#FU260722cinnamon

  #teaser-slide3

  .splide__pagination

  li:nth-child(3)

  .splide__pagination__page {

  background: var(--item-pink);

}



@media (max-width: 767px) {

  #FU260722cinnamon .lp-left-area,

  #FU260722cinnamon .lp-right-area {

    display: none;

  }



  #FU260722cinnamon .lp-main-area {

    width: 100%;

  }

}



/* 

////////////////////////////////////////////

animation

////////////////////////////////////////////

*/

@keyframes mv-infinite-scroll {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-100%);

  }

}

@keyframes cinnamon-timer-progress {

  0% {

    width: 0%;

  }

  100% {

    width: 100%;

  }

}



#FU260722cinnamon .pop-in {

  opacity: 0;

  transform: translateY(calc(80 * var(--formula))) scale(0) rotate(-20deg);

  transition:

    opacity 1.2s ease,

    transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);

}



#FU260722cinnamon .pop-in.is-visible {

  opacity: 1;

  transform: translateY(0) scale(1) rotate(0deg);

}



#FU260722cinnamon .zoom-out {

  overflow: hidden;

}



#FU260722cinnamon .zoom-out img {

  opacity: 0;

  transform: scale(1.2);

  transition: 3s;

  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);

}



#FU260722cinnamon .zoom-out.is-visible img {

  transform: none;

  opacity: 1;

}



#FU260722cinnamon .zoom-out2 {

  opacity: 0;

  transform: scale(1.2);

  transition: 3s;

  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);

}



#FU260722cinnamon .zoom-out2.is-visible {

  transform: none;

  opacity: 1;

}



#FU260722cinnamon .reveal-right {

  -webkit-clip-path: inset(0 100% 0 0);

  clip-path: inset(0 100% 0 0);

  -webkit-transition: -webkit-clip-path 0.85s

    cubic-bezier(0.645, 0.045, 0.355, 1);

  transition: clip-path 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);

}



#FU260722cinnamon .reveal-right.is-visible {

  -webkit-clip-path: inset(0 0 0 0);

  clip-path: inset(0 0 0 0);

}



#FU260722cinnamon .reveal-left {

  -webkit-clip-path: inset(0 0 0 100%);

  clip-path: inset(0 0 0 100%);

  -webkit-transition: -webkit-clip-path 0.85s

    cubic-bezier(0.645, 0.045, 0.355, 1);

  transition: clip-path 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);

}



#FU260722cinnamon .reveal-left.is-visible {

  -webkit-clip-path: inset(0 0 0 0);

  clip-path: inset(0 0 0 0);

}



#FU260722cinnamon .blur-in {

  opacity: 0;

  filter: blur(calc(10 * var(--formula)));

  -webkit-filter: blur(calc(10 * var(--formula)));



  /* duration(時間)は1.2秒、イージングは ease-out-quart に近い滑らかな動き */

  transition:

    opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1),

    filter 1.2s cubic-bezier(0.25, 1, 0.5, 1),

    -webkit-filter 1.2s cubic-bezier(0.25, 1, 0.5, 1);

}



#FU260722cinnamon .is-visible .blur-in {

  opacity: 1;

  filter: blur(0);

  -webkit-filter: blur(0);

}