@charset "UTF-8";
/* --- デフォルトCSS設定 --- */

#CE260819horse {
  min-width: 100%;
  font-feature-settings: normal;
  position: relative;
  display: flex;
  justify-content: center;
  --black: #000000;
  --gray: #707070;
  --credit-gray: #8e8e8e;
  --white: #ffffff;
  --beige: #ebe3df;
  --brown: #a0563b;
  --font-jpn: shippori-mincho, sans-serif;
  --font-eng: noto-serif-jp, sans-serif;
  --font-credit: "bodoni-moda-variable", sans-serif;
  --pc-width: 1400;
  --sp-width: 560;
  --pc-artboard-width: 560;
  --sp-artboard-width: 560;
  --formula: calc(var(--variable) * var(--ratio));
  --formula_pc: calc(var(--variable) * 1);
  background: var(--beige);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (min-width: 1401px) {
  #CE260819horse {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: 1px;
  }
}
@media (min-width: 768px) and (max-width: 1400px) {
  #CE260819horse {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: calc(100vw / var(--pc-width));
  }
}
@media (max-width: 767px) {
  #CE260819horse {
    --ratio: 1;
    --variable: calc(100vw / var(--sp-width));
  }
}

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

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

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

#CE260819horse [class*="-img-"]:has(a) {
  display: flex;
  flex-direction: column;
  line-height: 0;
  font-size: 0;
}

/* ホバー時のみ白背景を適用 */
#CE260819horse [class*="-img-"]:has(a):hover {
  background: var(--white);
}

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

#CE260819horse [class*="__inner--absolute"] {
  position: relative;
}

#CE260819horse [class*="__txt"] {
  font-family: var(--font-jpn);
  color: var(--black);
  font-size: calc(16 * var(--formula));
  line-height: calc(28 / 16);
  letter-spacing: 0;
  text-align: center;
  font-weight: 400;
}

#CE260819horse [class*="__credit"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--formula));
}

#CE260819horse [class*="__credit"] li {
  display: flex;
  font-family: var(--font-eng);
  color: var(--credit-gray);
  font-size: calc(16 * var(--formula));
  line-height: calc(24 / 16);
  letter-spacing: 0;
  text-align: left;
  font-weight: 400;
  text-decoration: underline;
  gap: calc(5 * var(--formula));
  text-underline-offset: calc(2 * var(--formula));
}

#CE260819horse [class*="pc-header-txt"] {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.2s ease,
    visibility 1.2s ease;
}

#CE260819horse [class*="pc-header-txt"].is-active {
  opacity: 1;
  visibility: visible;
}

#CE260819horse [class*="__h4"] {
  font-family: var(--font-jpn);
  color: var(--black);
  font-size: calc(18 * var(--formula));
  line-height: calc(26 / 18);
  letter-spacing: 0;
  text-align: center;
  font-weight: 400;
}

#CE260819horse [class*="__inner--postcard"] {
  background: var(--white);
  border: 1px solid var(--gray);
  width: calc(480 * var(--formula));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(16 * var(--formula)) 0 calc(4 * var(--formula));
  z-index: 5;
}

#CE260819horse [class*=""] {
}

#CE260819horse [class*=""] {
}

#CE260819horse [class*=""] {
}

#CE260819horse [class*=""] {
}

#CE260819horse [class*=""] {
}
#CE260819horse [class*=""] {
}

#CE260819horse [class*=""] {
}

#CE260819horse [class*=""] {
}

#CE260819horse [class*=""] {
}

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

#CE260819horse .lp-left-area {
  position: sticky;
  top: var(--lpHeaderHeight);
  height: 100dvh;
  width: calc(560 * var(--formula_pc));
  background: var(--white);
}

#CE260819horse .sec-set {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#CE260819horse .z1-relative {
  z-index: 1;
  position: relative;
}

#CE260819horse .z5-absolute {
  z-index: 5;
  position: absolute;
}

#CE260819horse .lp-main-area {
  width: calc(560 * var(--formula_pc));
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: clip;
}

/* --- 抽出されたCSS（上から順） --- */
#CE260819horse .lp-mv-sec {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#CE260819horse .lp-mv-sec__inner--absolute {
}

#CE260819horse .mv-img-01 {
  width: calc(560 * var(--formula));
}

#CE260819horse .reveal-svg {
  bottom: calc(70 * var(--formula));
  left: calc(25 * var(--formula));
  width: calc(387 * var(--formula));
  pointer-events: none;
}

#CE260819horse #main-container {
}

#CE260819horse .main-container {
}

#CE260819horse #reveal-step-1 {
}

#CE260819horse .reveal-item {
}

#CE260819horse .step-1 {
}

#CE260819horse .svg-fill {
}

#CE260819horse #reveal-step-2 {
}

#CE260819horse .step-2 {
}

#CE260819horse #reveal-step-3 {
}

#CE260819horse .step-3 {
}

#CE260819horse #layer-1-sub {
}

#CE260819horse .lp-mv-sec__inner--header {
  position: relative;
  display: grid;
  justify-items: center;
  margin: calc(50 * var(--formula_pc)) 0 0 0;
}

#CE260819horse .pc-header-txt-07 {
  width: calc(389 * var(--formula));
}

#CE260819horse .pc-header-txt-01 {
  width: calc(397 * var(--formula));
}

#CE260819horse .pc-header-txt-05 {
  width: calc(394 * var(--formula));
}

#CE260819horse .lp-btn-01.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#CE260819horse .lp-btn-01 {
position: fixed;
  bottom: calc(100 * var(--formula));
  z-index: 100;
  width: calc(18 * var(--formula));
  transition: opacity 0.4s ease, visibility 0.4s ease;
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1401px) {
#CE260819horse .lp-btn-01 {
    right: calc(50% - 540px);
    left: auto;
  }
}

/* 2. 768px ～ 1400px（PC・タブレット可変幅） */
@media (min-width: 768px) and (max-width: 1400px) {
#CE260819horse .lp-btn-01 {
    right: calc(50% - (540 * var(--formula)));
    left: auto;
  }
}

/* 3. 767px以下（SP可変幅） */
@media (max-width: 767px) {
#CE260819horse .lp-btn-01 {
    right: calc(20 * var(--formula));
    left: auto;
  }
}

#CE260819horse #lp-top {
}

#CE260819horse .teaser-sec {
  background: var(--white);
  padding: calc(57 * var(--formula)) 0 calc(67 * var(--formula)) 0;
}

#CE260819horse .teaser-sec__h3 {
  font-family: var(--font-jpn);
  color: var(--black);
  font-size: calc(24 * var(--formula));
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  font-weight: 400;
}

#CE260819horse .teaser-sec__txt {
  margin: calc(13 * var(--formula)) 0 0 0;
}

#CE260819horse .sec01 {
  padding: 0 0 calc(52 * var(--formula)) 0;
}
#CE260819horse .sticky-item01 {
  position: sticky;
  z-index: 0;
  top: 0;
  padding: calc(30 * var(--formula)) 0 0 0;
}
#CE260819horse .sticky-item02 {
  position: sticky;
  z-index: 0;
  top: 0;
  padding: calc(50 * var(--formula)) 0 0 0;
}
#CE260819horse .sticky-item04 {
  position: sticky;
  z-index: 0;
  top: 0;
  padding: calc(30 * var(--formula)) 0 0 0;
}

#CE260819horse .header-txt-02 {
  width: calc(486 * var(--formula));
  z-index: 5;
}

#CE260819horse .lp-img-10 {
  width: calc(560 * var(--formula));
  margin: calc(-15 * var(--formula)) 0 0 0;
  z-index: 1;
}

#CE260819horse .sec01__inner--postcard {
  margin: calc(-50 * var(--formula)) 0 calc(72 * var(--formula)) 0;
  gap: calc(6 * var(--formula));
}

#CE260819horse .lp-img-01 {
  width: calc(450 * var(--formula));
}

#CE260819horse .header-txt-07 {
  width: calc(194 * var(--formula));
}

#CE260819horse .sec01__h4 {
  margin: calc(31 * var(--formula)) 0 calc(20 * var(--formula)) 0;
  color: var(--white);
}

#CE260819horse .sec01__txt {
  color: var(--white);
}

#CE260819horse .sec01__credit {
  margin: calc(48 * var(--formula)) 0 0 0;
}
#CE260819horse .sec01__credit li {
  color: var(--white);
}
#CE260819horse .sec02 {
  padding: 0 0 calc(73 * var(--formula)) 0;
}

#CE260819horse .header-txt-01 {
  width: calc(497 * var(--formula));
}

#CE260819horse .lp-img-02 {
  width: calc(560 * var(--formula));
}

#CE260819horse a.link-disable:hover{
  opacity: 1;
}

#CE260819horse .sec02__inner--postcard {
  padding: calc(16 * var(--formula)) 0 calc(9 * var(--formula));
  margin: calc(-53 * var(--formula)) 0 calc(53 * var(--formula)) 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

#CE260819horse .lp-img-03 {
  width: calc(450 * var(--formula));
}

#CE260819horse .lp-img-04 {
  width: calc(450 * var(--formula));
  margin: calc(15 * var(--formula)) 0 calc(7 * var(--formula)) 0;
}

#CE260819horse .header-txt-03 {
  width: calc(199 * var(--formula));
}

#CE260819horse .sec02__h4 {
  margin: calc(31 * var(--formula)) 0 0 0;
}

#CE260819horse .sec02__txt {
  margin: calc(14 * var(--formula)) 0 calc(41 * var(--formula)) 0;
}

#CE260819horse .sec02__credit {
}

#CE260819horse .sec03 {
  padding: 0 0 calc(73 * var(--formula)) 0;
}

#CE260819horse .lp-img-08 {
  width: calc(560 * var(--formula));
  position: sticky;
  top: 0;
}

#CE260819horse .sec03__inner--postcard {
  margin: calc(-50 * var(--formula)) 0 calc(72 * var(--formula)) 0;
  padding: calc(14 * var(--formula)) 0 calc(10 * var(--formula)) 0;
  gap: calc(6 * var(--formula));
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

#CE260819horse .lp-img-09 {
  width: calc(450 * var(--formula));
}

#CE260819horse .sec03__h4 {
  margin: calc(41 * var(--formula)) 0 0 0;
}

#CE260819horse .sec03__txt {
  margin: calc(14 * var(--formula)) 0 calc(41 * var(--formula)) 0;
}

#CE260819horse .sec03__credit {
}

#CE260819horse .sec04 {
  padding: 0 0 calc(73 * var(--formula)) 0;
}

#CE260819horse .header-txt-04 {
  width: calc(493 * var(--formula));
  z-index: 5;
}

#CE260819horse .lp-img-11 {
  width: calc(560 * var(--formula));
  margin: calc(-15 * var(--formula)) 0 0 0;
  z-index: 1;
}

#CE260819horse .sec04__inner--postcard {
  margin: calc(-50 * var(--formula)) 0 calc(50 * var(--formula)) 0;
  padding: calc(14 * var(--formula)) 0 calc(5 * var(--formula)) 0;
}

#CE260819horse .lp-img-12 {
  width: calc(450 * var(--formula));
}

#CE260819horse .lp-img-13 {
  width: calc(450 * var(--formula));
  margin: calc(15 * var(--formula)) 0 calc(5 * var(--formula)) 0;
}

#CE260819horse .header-txt-05 {
  width: calc(197 * var(--formula));
}

#CE260819horse .sec04__h4 {
  margin: calc(41 * var(--formula)) 0 0 0;
  color: var(--white);
}

#CE260819horse .sec04__txt {
  margin: calc(14 * var(--formula)) 0 calc(41 * var(--formula)) 0;
  color: var(--white);
}

#CE260819horse .sec04__credit {
}
#CE260819horse .sec04__credit li {
  color: var(--white);
}
#CE260819horse .sec05 {
}

#CE260819horse .lp-img-05 {
  width: calc(560 * var(--formula));
  position: sticky;
  top: 0;
}

#CE260819horse .sec05__inner--postcard {
  margin: calc(-50 * var(--formula)) 0 calc(50 * var(--formula)) 0;
  padding: calc(14 * var(--formula)) 0 calc(5 * var(--formula)) 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

#CE260819horse .lp-img-06 {
  width: calc(450 * var(--formula));
}

#CE260819horse .lp-img-07 {
  width: calc(450 * var(--formula));
  margin: calc(15 * var(--formula)) 0 calc(5 * var(--formula)) 0;
}

#CE260819horse .sec05__h4 {
  margin: calc(44 * var(--formula)) 0 0 0;
}

#CE260819horse .sec05__txt {
  margin: calc(14 * var(--formula)) 0 calc(31 * var(--formula)) 0;
}

#CE260819horse .sec05__credit {
}

#CE260819horse .lp-footer-sec {
  padding: calc(73 * var(--formula)) 0 calc(82 * var(--formula)) 0;
  background:var(--white);
}

#CE260819horse .lp-btn-02 {
  width: calc(260 * var(--formula));
}

#CE260819horse .lp-footer-sec__h4 {
  font-family: var(--font-credit);
  color: var(--black);
  font-size: calc(14 * var(--formula));
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  font-variation-settings:
    "opsz" 11,
    "wght" 400;
  font-style: italic;
  margin: calc(24 * var(--formula)) 0 calc(6 * var(--formula)) 0;
}

#CE260819horse .lp-footer-sec__credit--staff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--formula));
}

#CE260819horse .lp-footer-sec__credit--staff li {
  font-family: var(--font-credit);
  color: var(--black);
  font-size: calc(14 * var(--formula));
  line-height: calc(20 / 14);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  font-style: italic;
  font-variation-settings:
    "opsz" 11,
    "wght" 400;
}
@media (max-width: 767px) {
  #CE260819horse {
    flex-direction: column;
  }
  #CE260819horse .lp-left-area {
    position: relative;
    top: 0;
    height: auto;
    width: 100%;
  }
  #CE260819horse .lp-main-area {
    width: 100%;
  }
  #CE260819horse .lp-mv-sec__inner--header {
    display: none;
  }
}
/* 
////////////////////////////////////////////
animation
////////////////////////////////////////////
*/

#CE260819horse .wipe-right {
  transition: clip-path 0.6s cubic-bezier(0.83, 0, 0.17, 1);
  clip-path: inset(0 0 0 100%);
}
#CE260819horse .is-visible .wipe-right {
  clip-path: inset(0 0 0 0);
}

#CE260819horse .reveal-svg .reveal-item {
  transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  clip-path: inset(100% 0 0 0); /* 初期状態: 上側100%を隠す（下から上へ展開） */
}

#CE260819horse .is-visible .step-1,
.reveal-svg.is-visible .step-1 {
  clip-path: inset(0 0 0 0);
  transition-delay: 0.4s;
}

#CE260819horse .is-visible .step-2,
.reveal-svg.is-visible .step-2 {
  clip-path: inset(0 0 0 0);
  transition-delay: 0.7s;
}

#CE260819horse .is-visible .step-3,
.reveal-svg.is-visible .step-3 {
  clip-path: inset(0 0 0 0);
  transition-delay: 1s;
}

#CE260819horse .sec01,
#CE260819horse .sec02,
#CE260819horse .sec03,
#CE260819horse .sec04,
#CE260819horse .sec05 {
  position: relative;
  z-index: 1;
}

#CE260819horse .sec01::before,
#CE260819horse .sec04::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--brown);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.83, 0, 0.17, 1);
}

#CE260819horse .sec02::before,
#CE260819horse .sec03::before,
#CE260819horse .sec05::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--white);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.83, 0, 0.17, 1);
}

#CE260819horse .sec01.is-visible::before,
#CE260819horse .sec02.is-visible::before,
#CE260819horse .sec03.is-visible::before,
#CE260819horse .sec04.is-visible::before,
#CE260819horse .sec05.is-visible::before {
  transform: scaleX(1);
}

#CE260819horse .header-txt-anm {
  transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.3s;
  clip-path: inset(0 0 0 100%);
}

#CE260819horse .is-visible .header-txt-anm {
  clip-path: inset(0 0 0 0);
}

#CE260819horse .header-img-anm {
  transition: clip-path 1s cubic-bezier(0.83, 0, 0.17, 1);
  transition-delay: 0.6s;
  clip-path: inset(0 0 100% 0);
}

#CE260819horse .is-visible .header-img-anm,
#CE260819horse .header-img-anm.is-visible {
  clip-path: inset(0 0 0 0);
}

#CE260819horse .header-txt-anm,
#CE260819horse .header-img-anm,
#CE260819horse .wipe-right,
#CE260819horse .wipe-up,
#CE260819horse .reveal-item {
  will-change: clip-path;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

#CE260819horse .fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
#CE260819horse .is-visible.fade-up {
    opacity: 1;
  transform: translateY(0);
}