@charset "UTF-8";
@font-face {
  font-family: 'Noto Sans JP Variable';
  src: url('./fonts/NotoSansJP-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900; /* フォントのウェイトの範囲を指定 */
  font-display: swap; /* フォントの読み込み方法を指定 */
}

@font-face {
  font-family: "Arial"; /* 任意のフォント名を指定 */
  src: url("./fonts/Arial.ttf") format("truetype"); /* ファイルへのパスを指定 */
  font-weight: normal;
  font-style: normal;
}


:root{
  --lpHeaderHight: 10.2rem;
}
@media screen and (max-width:767px) {
  :root {
    --lpSetSize: (100vw / 750);
  }
}
@media screen and (min-width:768px) and (max-width:1260px) {
  :root {
    --lpSetSize: calc(1px * var(--ratio));
    --ratio: calc(410 / 750);
    --variable: calc(100vw / 1260);
  }
}
@media screen and (min-width:1261px){
  :root {
    --lpSetSize: calc(1px * var(--ratio));
    --ratio: calc(410 / 750);
    --variable: 1px;
  }
}

/*================================
  variables
=================================*/
#CE251104paddington{
  --zindex-behind: -1;
  --zindex-middle: 0;
  --zindex-front: 1;
  --zindex-over: 10;
  --zindex-cursor: 100;
  --zindex-top: 200;
  --pointer-none: none;
  --color-white: #fff;
  --color-black: #000;
  --color-blue: #10317D;
  --color-darkblue: #001E4A;
}
#CE251104paddington img,
#CE251104paddington picture,
#CE251104paddington video,
#CE251104paddington a{
  display: inline-block;
  width: 100%;
  height: auto;
}
#CE251104paddington video{
  object-fit: cover;
}
@media only screen and (min-width: 768px) {
  #CE251104paddington a:hover{
    transition: .5s;
    opacity: .7;
  }
}
#CE251104paddington span{
  display: inline-block;
}
#CE251104paddington li{
  list-style: none;
}
#CE251104paddington .imgWrap{
  background: #fff;
  position: relative;
  transition: opacity 1.5s;
}
#CE251104paddington .imgWrap-radius{
  background: #fff;
  position: relative;
  border-radius: calc(31 * var(--lpSetSize));
}
#CE251104paddington .noBgCont.imgWrap{
  background: none;
}
#CE251104paddington .flexArea{
  display: flex;
  width: 100%;
}
#CE251104paddington .gridWrap,
#CE251104paddington .gridWrap_pc{
  display: grid;
  margin: 0 auto;
}
/*--------------------------------
  variables for mobile
--------------------------------*/
@media screen and (max-width: 767px) {
  #CE251104paddington .pcOnly {
    display: none!important;
  }
  #CE251104paddington .flexAreaSp{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
  }
  #CE251104paddington .gridWrapPc{
    display: block;
  }
}
/*--------------------------------
  variables for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  #CE251104paddington .spOnly {
    display: none!important;
  }
  #CE251104paddington .pcOnly {
    display: block;
  }
  #CE251104paddington .flexAreaPc{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
  }
  #CE251104paddington .gridWrap,
  #CE251104paddington .gridWrapPc{
    max-width: 126rem;
  }
}
/* end variables */

/*================================
  variables
=================================*/
@media screen and (min-width: 768px) {
  .header.is-fixed {
    position: fixed;
    transition: all 1000ms ease-out;
    transform: translateY(-100%);
  }
  .header.is-obverse {
    transform: translateY(-100%);
  }
  .header.is-reverse {
    transform: translateY(0%);
  }
}
/* end variables */

/*================================
  font
=================================*/
#CE251104paddington .font-ja{
  font-family: 'Noto Sans JP Variable', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-feature-settings: "palt";
}
#CE251104paddington .font-en{
  font-family: "Arial", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
}
/*================================
  font-size
=================================*/
#CE251104paddington [data-txt="lead"]{
  color: var(--color-blue);
  font-size: calc(20 * var(--lpSetSize));
  line-height: 2.45;
  letter-spacing: 0.025em;
  text-align: center;
  margin-top: calc(53 * var(--lpSetSize));
}
#CE251104paddington [data-txt="credit"]{
  color: var(--color-blue);
  font-size: calc(22 * var(--lpSetSize));
  line-height: 1.5;
  letter-spacing: 0.025em;
}
#CE251104paddington [data-txt="credit"] span {
  margin-left: calc(5 * var(--lpSetSize));
  margin-right: calc(5 * var(--lpSetSize));
}
/* end font-size */

/*================================
  layout
=================================*/
#CE251104paddington{
  padding-bottom: calc(40 * var(--lpSetSize));
  overflow: clip;
}
#CE251104paddington [data-numb]{
  display: block;
  pointer-events: none;
}
#CE251104paddington [data-credit]{
  display: flex;
  flex-wrap: wrap;
  /* column-gap: calc(25 * var(--lpSetSize));
  row-gap: calc(22 * var(--lpSetSize)); */
  column-gap: calc(4 * var(--lpSetSize));
  row-gap: calc(0 * var(--lpSetSize));
}
#CE251104paddington .creditLeft{
  justify-content: flex-start;
}
#CE251104paddington .creditRight{
  justify-content: flex-end;
}
#CE251104paddington .creditCenter{
  justify-content: center;
}
#CE251104paddington [data-img]{
  position: relative;
}
#CE251104paddington [data-deco]{
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: var(--zindex-behind);
}
/*========== mv ==========*/
#CE251104paddington .mvWrap{
  position: relative;
}
#CE251104paddington .mv__ttl{
  position: absolute;
  top: calc(26 * var(--lpSetSize));
  left: calc(192 * var(--lpSetSize));
  width: calc(366 * var(--lpSetSize));
  pointer-events: none;
}
#CE251104paddington .intro_Wrap{
  width: calc(750 * var(--lpSetSize));
  margin-top: calc(101 * var(--lpSetSize));
}
#CE251104paddington .intro__logo{
  width: calc(589 * var(--lpSetSize));
  margin: 0 auto;
}
#CE251104paddington .intro__coming{
  width: calc(426 * var(--lpSetSize));
  margin: calc(53 * var(--lpSetSize)) auto 0;
}
#CE251104paddington .intro_illust_box{
  width: calc(750 * var(--lpSetSize));
  margin: calc(36 * var(--lpSetSize)) auto 0;
  overflow: clip;
  position: relative;
}
#CE251104paddington .intro_illust_box .illust_line{
  width: calc(1527 * var(--lpSetSize));
  margin-left: calc(-332 * var(--lpSetSize));
}
#CE251104paddington .intro_illust01{
  width: calc(522 * var(--lpSetSize));
  position: absolute;
  top: calc(134 * var(--lpSetSize));
  left: calc(78 * var(--lpSetSize));
  z-index: 5;
}
#CE251104paddington .intro_illust_txt{
  width: calc(256 * var(--lpSetSize));
  margin: calc(204 * var(--lpSetSize)) auto 0;
}

/*========== block ==========*/
#CE251104paddington [data-block="01"]{
  margin-top: calc(175 * var(--lpSetSize));
}
#CE251104paddington [data-img="block01-01"]{
  width: calc(590 * var(--lpSetSize));
  margin: 0 auto;
}
#CE251104paddington [data-img="block01-illust"]{
  width: calc(528 * var(--lpSetSize));
  margin: calc(126 * var(--lpSetSize)) auto 0 calc(132 * var(--lpSetSize));
}
#CE251104paddington [data-img="block01-02"]{
  width: calc(750 * var(--lpSetSize));
  margin: calc(128 * var(--lpSetSize)) auto 0;
}
#CE251104paddington [data-credit="block01"]{
  width: calc(600 * var(--lpSetSize));
  margin: calc(28 * var(--lpSetSize)) auto 0;
}
#CE251104paddington [data-img="block01-03"]{
  width: calc(750 * var(--lpSetSize));
  margin: calc(26 * var(--lpSetSize)) auto 0;
}

#CE251104paddington [data-block="02"] .illust_line{
  width: calc(467 * var(--lpSetSize));
  margin-left: calc(282 * var(--lpSetSize));
}
#CE251104paddington [data-img="block02-01"]{
  width: calc(417 * var(--lpSetSize));
  margin: calc(125 * var(--lpSetSize)) auto 0 calc(290 * var(--lpSetSize));
  position: relative;
}
#CE251104paddington [data-img="block02-illust"]{
  width: calc(274 * var(--lpSetSize));
  position: absolute;
  top: calc(-256 * var(--lpSetSize));
  left: calc(-246 * var(--lpSetSize));
  z-index: -1;
  pointer-events: none;
}
#CE251104paddington [data-credit="block02"]{
  width: calc(170 * var(--lpSetSize));
  position: absolute;
  bottom: calc(-2 * var(--lpSetSize));
  left: calc(-245 * var(--lpSetSize));
}

#CE251104paddington [data-img="block03-01"]{
  width: calc(473 * var(--lpSetSize));
  margin: 0 auto;
  border: solid calc(25 * var(--lpSetSize)) var(--color-white);
  box-sizing: content-box;
}
#CE251104paddington [data-img="block03-02"]{
  width: calc(750 * var(--lpSetSize));
  margin: calc(262 * var(--lpSetSize)) auto 0;
}
#CE251104paddington [data-credit="block03"]{
  width: 100%;
  padding: calc(27 * var(--lpSetSize)) calc(110 * var(--lpSetSize)) calc(27 * var(--lpSetSize));
  box-sizing: border-box;
  background-color: #fff;
}
#CE251104paddington [data-img="block03-03"]{
  width: calc(473 * var(--lpSetSize));
  margin: calc(262 * var(--lpSetSize)) auto 0;
  border: solid calc(25 * var(--lpSetSize)) var(--color-white);
  box-sizing: content-box;
}

#CE251104paddington [data-block="04"]{
  position: sticky;
  top: calc(-1000 * var(--lpSetSize));
  z-index: 40;
  transform: translateZ(0);
}
#CE251104paddington [data-img="block04-slider"]{
  width: calc(750 * var(--lpSetSize));
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#CE251104paddington [data-credit="block04"]{
  width: calc(600 * var(--lpSetSize));
  margin: calc(33 * var(--lpSetSize)) auto 0;
}
#CE251104paddington [data-img="block04-02"]{
  width: calc(400 * var(--lpSetSize));
  margin: calc(190 * var(--lpSetSize)) auto 0;
}

#CE251104paddington [data-block="05"]{
  position: relative;
  top: 0;
  z-index: 50;
  border-radius: calc(50 * var(--lpSetSize)) calc(50 * var(--lpSetSize)) 0 0;
  margin-top: calc(188 * var(--lpSetSize));
  transform: translateZ(1px);
}
#CE251104paddington [data-block="05"]::before{
  content: "";
  width: 100%;
  height: 100%;
  background: var(--color-white);
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: calc(375 * var(--lpSetSize)) calc(375 * var(--lpSetSize)) 0 0;
}
#CE251104paddington [data-credit="block05"]{
  width: calc(600 * var(--lpSetSize));
  margin: calc(33 * var(--lpSetSize)) auto 0;
  position: relative;
}

#CE251104paddington [data-block="06"]{
  padding-top: calc(27 * var(--lpSetSize));
}
#CE251104paddington [data-img="block06-01"]{
  width: calc(750 * var(--lpSetSize));
  margin: 0 auto;
}
#CE251104paddington [data-img="block06-02"]{
  width: calc(737 * var(--lpSetSize));
  margin: calc(220 * var(--lpSetSize)) auto 0;
}
#CE251104paddington [data-credit="block06"]{
  width: calc(620 * var(--lpSetSize));
  margin: calc(17 * var(--lpSetSize)) auto 0;
}
#CE251104paddington [data-credit="block06"] li {
  font-size: calc(21 * var(--lpSetSize));
  line-height: 1.5714285714;
}

#CE251104paddington [data-block="07"]{
  padding-top: calc(170 * var(--lpSetSize));
}
#CE251104paddington .block07_box{
  padding-block: calc(22 * var(--lpSetSize)) calc(26 * var(--lpSetSize));
  background-color: var(--color-darkblue);
}
#CE251104paddington .txt-slide{
  width: calc(750 * var(--lpSetSize));
  margin: 0 auto;
}
#CE251104paddington .txt-slide02{
  margin-top: calc(82 * var(--lpSetSize));
}
#CE251104paddington .txt-slide .swiper-wrapper{
  transition-timing-function: linear;
}
#CE251104paddington .txt-slide .message__txt{
  width: calc(896 * var(--lpSetSize));
}
#CE251104paddington [data-img="block07-01"]{
  width: calc(592 * var(--lpSetSize));
  margin: calc(92 * var(--lpSetSize)) auto 0 calc(74 * var(--lpSetSize));
}

#CE251104paddington [data-block="08"]{
  padding-block: calc(233 * var(--lpSetSize)) calc(20 * var(--lpSetSize));
  /*height: calc(1573 * var(--lpSetSize));*/
}
#CE251104paddington .sticky-container_start {
  position: sticky;
  top: 0;
}
/* 「指定の枠」となる親コンテナ */
#CE251104paddington .sticky-container {
  width: calc(570 * var(--lpSetSize));
  margin: 0 auto;
  height: calc(785 * var(--lpSetSize));

  /* ★変更: スクロールを禁止し、はみ出た部分を隠す */
  overflow: hidden; 
  /* または overflow: clip; */

  /* スクロールバー非表示の指定は overflow:hidden のため不要になります */
  /* scrollbar-width: none; */
  /* -ms-overflow-style: none; */
}
/* #CE251104paddington .sticky-container::-webkit-scrollbar {
  display: none;
} 
*/
#CE251104paddington .sticky-container::before {
  content: "";
  width: calc(590 * var(--lpSetSize));
  height: calc(805 * var(--lpSetSize));
  background: var(--color-darkblue);
  position: absolute;
  top: calc(-10 * var(--lpSetSize));
  left: 50%;
  transform: translateX(-50%);
}
/* 各画像パネル */
#CE251104paddington .sticky-panel {
  position: sticky;
  top: 0;
  width: 100%;
  height: calc(788 * var(--lpSetSize));
  scroll-snap-align: start;
}
/* パネル内の画像 */
#CE251104paddington .sticky-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
}
#CE251104paddington [data-img="block08-02"]{
  width: calc(700 * var(--lpSetSize));
  margin: calc(-84 * var(--lpSetSize)) 0 calc(60 * var(--lpSetSize));
  z-index: var(--zindex-middle);
}

#CE251104paddington [data-block="09"]{
  padding-top: calc(20 * var(--lpSetSize));
}
#CE251104paddington [data-credit="block09"]{
  width: calc(620 * var(--lpSetSize));
  margin: 0 auto;
}
#CE251104paddington [data-img="block09-01"]{
  width: calc(750 * var(--lpSetSize));
  margin-top: calc(185 * var(--lpSetSize));
}
#CE251104paddington [data-img="block09-02"]{
  width: calc(750 * var(--lpSetSize));
  margin: 0 auto;
}

#CE251104paddington [data-block="10"]{
  padding-top: calc(178 * var(--lpSetSize));
}
#CE251104paddington [data-img="block10-01"]{
  width: calc(529 * var(--lpSetSize));
  margin: 0 auto;
  position: relative;
}
#CE251104paddington [data-img="block10-illust"]{
  width: calc(318 * var(--lpSetSize));
  position: absolute;
  bottom: calc(-369 * var(--lpSetSize));
  left: calc(120 * var(--lpSetSize));
  z-index: 5;
  pointer-events: none;
}
#CE251104paddington [data-credit="block10"]{
  width: calc(620 * var(--lpSetSize));
  margin: calc(519 * var(--lpSetSize)) auto 0;
}
#CE251104paddington [data-img="block10-02"]{
  width: calc(750 * var(--lpSetSize));
  margin: calc(35 * var(--lpSetSize)) auto 0;
}

#CE251104paddington [data-block="11"]{
  padding-block: calc(308 * var(--lpSetSize)) calc(300 * var(--lpSetSize));
}
#CE251104paddington [data-img="block11-slider"]{
  width: calc(750 * var(--lpSetSize));
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
#CE251104paddington [data-img="block11-01"]{
  width: calc(475 * var(--lpSetSize));
  margin-right: calc(15 * var(--lpSetSize));
  border-radius: calc(225 * var(--lpSetSize));
}
#CE251104paddington [data-img="block11-illust01"]{
  width: calc(634 * var(--lpSetSize));
  position: absolute;
  top: calc(216 * var(--lpSetSize));
  left: calc(53 * var(--lpSetSize));
  z-index: 0;
  pointer-events: none;
}
#CE251104paddington [data-img="block11-illust02"]{
  width: calc(555 * var(--lpSetSize));
  position: absolute;
  bottom: calc(186 * var(--lpSetSize));
  left: calc(132 * var(--lpSetSize));
  z-index: 2;
  pointer-events: none;
}

#CE251104paddington [data-block="12"]{
  padding-block: calc(36 * var(--lpSetSize)) calc(150 * var(--lpSetSize));
}
#CE251104paddington [data-img="block12-slider"]{
  width: calc(645 * var(--lpSetSize));
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#CE251104paddington [data-credit="block12"]{
  width: calc(645 * var(--lpSetSize));
  margin: calc(28 * var(--lpSetSize)) auto 0;
}

#CE251104paddington [data-block="13"]{
  padding-block: calc(100 * var(--lpSetSize)) calc(108 * var(--lpSetSize));
}
#CE251104paddington [data-block="13"] .flex_warp{
  width: calc(750 * var(--lpSetSize));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(10 * var(--lpSetSize));
}
#CE251104paddington [data-img="block13-01"],
#CE251104paddington [data-img="block13-04"],
#CE251104paddington [data-img="block13-07"]{
  width: calc(260 * var(--lpSetSize));
}
#CE251104paddington [data-img="block13-02"],
#CE251104paddington [data-img="block13-05"],
#CE251104paddington [data-img="block13-08"]{
  width: calc(331 * var(--lpSetSize));
}
#CE251104paddington [data-img="block13-03"],
#CE251104paddington [data-img="block13-06"],
#CE251104paddington [data-img="block13-09"]{
  width: calc(139 * var(--lpSetSize));
}


#CE251104paddington [data-block="14"]{
  padding-block: calc(150 * var(--lpSetSize)) calc(150 * var(--lpSetSize));
}
#CE251104paddington [data-img="block14-01"]{
  width: calc(402 * var(--lpSetSize));
  margin: 0 auto;
}

#CE251104paddington [data-block="15"]{
  padding-block: calc(45 * var(--lpSetSize)) calc(100 * var(--lpSetSize));
}
#CE251104paddington [data-block="15"] .illust_line{
  width: calc(843 * var(--lpSetSize));
  margin-left: calc(-77 * var(--lpSetSize));
}
#CE251104paddington .allBtn{
  width: calc(391 * var(--lpSetSize));
  margin: calc(68 * var(--lpSetSize)) auto 0;
}

/*--------------------------------
  layout for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  /*========== fixedArea ==========*/
  #Contents{
    padding-top: 5rem;
  }
  #CE251104paddington .lpMainWrap{
    position: relative;
    display: flex;
    padding-bottom: 0;
  }
  #CE251104paddington .fixedImg{
    position: sticky;
    top: 0;
    width: 50vw;
    height: 100%;
    z-index: 2;
  }
  #CE251104paddington .fixedImg__inner{
    position: relative;
    height: 100%;
  }
  #CE251104paddington .fixedImg__inner a{
    position: sticky;
    top: 0;
  }
  #CE251104paddington .mvWrap__img img{
    height: 100vh;
    object-fit: cover;
    object-position: top;
  }
  #CE251104paddington .mvWrap__ttl{
    position: absolute;
    top: 5.2vh;
    left: 17.5vw;
    width: 15vw;
    pointer-events: none;
  }
  #CE251104paddington .mvWrap__lead{
    position: absolute;
    /* top: auto; */
    top: 10.1vh;
    left: 11.1vw;
    width: 27.5vw;
    pointer-events: none;
  }
  #CE251104paddington .contWrap{
    margin: 0 0 0 auto;
    width: 50vw;
    overflow: clip;
    z-index: 1;
    padding-top: calc(1 * (67.5rem / 750));
    padding-bottom: calc(220 * var(--lpSetSize));
  }
  #CE251104paddington .contWrap__inner{
    /* width: calc(480 * (100vw / 1400));
    max-width: 67.5rem; */
    width: calc(750 * var(--lpSetSize));
    margin: 0 auto;
  }
}
/* end layout */


/*================================
  slick
=================================*/
#CE251104paddington .slider{
  width:100%;
  margin:0 auto;
}
#CE251104paddington .slick-list{
  overflow: visible;
}
#CE251104paddington .slider img{
  width:100%;
}
#CE251104paddington [data-img="block01-slider"] .slick-list{
  padding-left: calc(110 * var(--lpSetSize))!important;
}
#CE251104paddington [data-img="block07-slider"] .slick-list{
  padding-right: calc(110 * var(--lpSetSize))!important;
}
#CE251104paddington .slider .slick-slide{
  height:auto!important;
}
/* end slick */

#CE251104paddington .slide-container {
  margin: 0 auto;
  width: calc(590 * var(--lpSetSize));
  padding: calc(10 * var(--lpSetSize));
  height: calc(805 * var(--lpSetSize));
  background: var(--color-darkblue);
  overflow: hidden;
}
.slide-panel {
  width: calc(570 * var(--lpSetSize));
}
.slide-panel a {
  display: block;
}
.slide-panel img {
  display: block;
  width: 100%;
  height: auto;
}

/*================================
  fadeIn
=================================*/
#CE251104paddington [data-fade="nomal"]{
  opacity: 0;
  transition: all 0.5s ease;
}
#CE251104paddington [data-fade="blur"]{
  opacity: 0;
  transform: translate(0, 0);
  filter: blur(5px);
  transition: all 1.1s ease;
}
#CE251104paddington [data-fade="right"]{
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 1.5s, transform 1.5s;
}
#CE251104paddington [data-fade="left"]{
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 1.5s, transform 1.5s;
}
#CE251104paddington [data-fade="top"]{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s, transform 1.2s;
}
#CE251104paddington [data-delay="01"]{
  transition-delay: 0.1s;
}
#CE251104paddington [data-delay="02"]{
  transition-delay: 0.2s;
}
#CE251104paddington [data-delay="03"]{
  transition-delay: 0.3s;
}
#CE251104paddington [data-delay="04"]{
  transition-delay: 0.4s;
}
#CE251104paddington [data-delay="05"]{
  transition-delay: 0.5s;
}
#CE251104paddington [data-delay="06"]{
  transition-delay: 0.6s;
}
#CE251104paddington [data-delay="07"]{
  transition-delay: 0.7s;
}
#CE251104paddington [data-delay="08"]{
  transition-delay: 0.8s;
}
#CE251104paddington [data-fade="nomal"].js-scrollIn{
  opacity: 1;
}
#CE251104paddington [data-fade="blur"].js-scrollIn{
  opacity: 1;
  filter: blur(0px);
  transform: translate(0, 0);
}
#CE251104paddington [data-fade="right"].js-scrollIn,
#CE251104paddington [data-fade="left"].js-scrollIn{
  opacity: 1;
  transform: translateX(0);
}
#CE251104paddington [data-fade="top"].js-scrollIn{
  opacity: 1;
  transform: translateY(0);
}
/* end fadeIn */

/* SVGパス（.d）の初期状態を設定 */
.illust_line .a {
  /* 1. 破線の長さを「1」 (pathLength="1" に対応) にする */
  stroke-dasharray: 1;
  
  /* 2. 破線の開始位置を「1」ずらし、線を非表示にする */
  stroke-dashoffset: 1;
}

/* ★ 描画が開始されたときのスタイル */
.illust_line .a.is-drawing {
  /* 3. アニメーションを適用する */
  /* アニメーション名: draw-line
    時間: 3秒 (3s)
    速度: ease-out
    終了時の状態: forwards (アニメーション終了時の状態を保持)
  */
  animation: draw-line 1.5s ease-out forwards;
}

/* アニメーション（@keyframes）の定義 (変更なし) */
@keyframes draw-line {
  from {
    stroke-dashoffset: 1; /* 線が見えない状態 */
  }
  to {
    stroke-dashoffset: 0; /* 線が見える状態 */
  }
}

/* * ----------------------------------------
 * ★ [data-block="02"] (反転) 用の上書き
 * ----------------------------------------
 */

/* ★ 1. [data-block="02"] の初期オフセットを -1 に変更 */
[data-block="02"] .illust_line .d {
  stroke-dasharray: 1;
  /* オフセットをマイナスにし、終点側を非表示にする */
  stroke-dashoffset: 1;
}

/* ★ 2. [data-block="02"] 用のアニメーションを指定 */
[data-block="02"] .illust_line .d.is-drawing {
  /* アニメーション名を反転用のものに変更 */
  animation: draw-line-reverse 1.5s ease-out forwards;
}

/* ★ 3. 反転用のアニメーション（@keyframes）を定義 */
@keyframes draw-line-reverse {
  from {
    stroke-dashoffset: 1; /* -1 から 0 へ */
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* SVGパス（.line）の初期状態を設定 */
[data-block="15"] .illust_line .line {
  /* 1. 破線の長さを「1」 (pathLength="1" に対応) にする */
  stroke-dasharray: 1;
  
  /* 2. 破線の開始位置を「1」ずらし、線を非表示にする */
  stroke-dashoffset: 1;
}

/* ★ 描画が開始されたときのスタイル */
[data-block="15"] .illust_line .line.is-drawing {
  animation: draw-line02 1.5s ease-out forwards;
}

/* アニメーション（@keyframes）の定義 (変更なし) */
@keyframes draw-line02 {
  from {
    stroke-dashoffset: 1; /* 線が見えない状態 */
  }
  to {
    stroke-dashoffset: 0; /* 線が見える状態 */
  }
}


/* * --- Slick Dots (ページネーション) のスタイル ---
 * (JSで dots: true にした場合に適用されます) 
 */
.js-slider .slick-dots {
  position: absolute;
  bottom: calc(25 * var(--lpSetSize));
  right: calc(30 * var(--lpSetSize));
  
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  gap: calc(10 * var(--lpSetSize));
}

.js-slider .slick-dots li {
  margin: 0;
  padding: 0;
}

/* ドット本体のボタン */
.js-slider .slick-dots li button {
  /* ボタンのテキスト（数字）を非表示にする */
  font-size: 0;
  line-height: 0;
  
  /* ドットのサイズ */
  width: calc(12 * var(--lpSetSize));
  height: calc(12 * var(--lpSetSize));
  
  /* 添付画像のような枠線のあるドット */
  /* border: 1px solid #002e7d; 枠線の色 (例: ネイビー) */
  border-radius: 50%;      /* 円形にする */
  
  background: rgba(0, 47, 125, 0.28); /* 通常時の背景は透明 */
  padding: 0;
  cursor: pointer;
  
  /* 色が変わる際のアニメーション */
  transition: background-color 0.3s ease;
}

/* ★ アクティブ（現在地）のドット */
.js-slider .slick-dots li.slick-active button {
  background: #002e7d; /* 背景色を枠線と同じ色にする */
}

/* (オプション) ドットボタンの枠線を消す (slickデフォルト) */
.js-slider .slick-dots li button:focus {
  outline: none;
}

#CE251104paddington [data-block="06"],
#CE251104paddington [data-block="07"],
#CE251104paddington [data-block="08"],
#CE251104paddington [data-block="09"],
#CE251104paddington [data-block="10"],
#CE251104paddington [data-block="11"],
#CE251104paddington [data-block="12"],
#CE251104paddington [data-block="13"],
#CE251104paddington [data-block="14"],
#CE251104paddington [data-block="15"]{
  position: relative;
  background: var(--color-white);
  z-index: 50;
  transform: translateZ(1px);
}

.mobile-fixed-background {
  /* PCでは非表示（モバイルでのみJSで表示） */
  display: none;
  
  /* ★ 画面全体に固定 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* コンテンツの背後に配置 */
  
  /* ★ 背景画像スタイルをここに移動 */
  background-image: url(../img/bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: calc(750 * var(--lpSetSize)) auto;

  /* ★ 初期状態ではすべてをクリップ（非表示） */
  clip-path: inset(100% 0 0 0);
  
  /* アニメーションのちらつき防止 */
  will-change: clip-path;
}

#CE251104paddington [data-block="03"]{
  margin-top: calc(172 * var(--lpSetSize));
  padding-top: calc(142 * var(--lpSetSize));
  padding-bottom: calc(260 * var(--lpSetSize));
  /* position: relative;
  z-index: 0; */
  background-image: url(../img/bg.png);
  background-position: right calc((50vw - calc(750 * var(--lpSetSize))) / 2) center;
  background-repeat: no-repeat;
  background-size: calc(750 * var(--lpSetSize)) auto;
  background-attachment: fixed;
}
/* #CE251104paddington [data-block="03"]::before{
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  background: url(../img/bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
} */

/* モバイル用のスタイル（例: 767px以下） */
@media only screen and (max-width: 767px) {
  #CE251104paddington [data-block="03"] {
    
    /* ★ モバイルでは、要素自体の背景を無効化する */
    background-image: none !important;
    background-attachment: scroll !important;
  }
  
  /* ★ モバイルでのみ、JSで制御するヘルパーを表示する */
  .mobile-fixed-background {
    display: block;
    
    /* モバイルでの背景位置（必要なら 'center' に）*/
    background-position: center; 
  }
}