@charset "UTF-8";

/* スマホ、タブレット用 */
#andcouture_lp .wrap {
	width: 100%;
	height: auto;
	
}
#andcouture_lp .content {
  	width: 100%;
/*	height: 9500px;*/
	height: auto;
	position: relative;/* absolute; */
	top: auto;/* 76%; */
	background-color:#30354f;
	flex: 1;
}
#andcouture_lp .awinterdressedinLight {
	max-width: 100%;
	margin: 0 0 15px 0;
}

#andcouture_lp .stay1 {
	padding-top: 3%;
}
#andcouture_lp .stay2 {
	padding-top: 6%;
}
#andcouture_lp .stay3 {
	padding-top: 4%;
}

/* フェードイン */
.layout{
	display: flex;
}

/* その場でフェードイン */
.fadein {
	opacity: 0;
	/* 1s でアニメーションスピードを管理 */
	animation: fadeIn 1s ease-in forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* 下から上にフェードインアニメーション */
#andcouture_lp .fade-in-up {
	animation: fadeInUp linear; /* アニメーション設定 */
	animation-timeline: view(); /* スクロールと連動 */
	animation-range: entry 10% cover 30%;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(6rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 指定したスライダーだけ左寄せ */
.slide-wrap.slide-left {
  width: 90%;
  margin-left: 0;
  margin-right: auto;
}

/* 指定したスライダーだけ右寄せ */
.slide-wrap.slide-right {
  width: 90%;
  margin-left: auto;
  margin-right: 0;
}

/* 指定したスライダーだけ左右に余白 */
.slide-wrap.slide-margin {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* スマホ：スライダー全体 */
#andcouture_lp .slide-wrap {
  overflow: hidden;
  position: relative;
}

/* スマホ専用：通常の横スライダー */
@media screen and (max-width: 649px) {

  #andcouture_lp .slide-wrap {
    container-type: inline-size;
  }

  #andcouture_lp .slide-wrap .slide-track {
    display: flex;
    width: max-content;
    gap: 0;
    margin: 0;
    padding: 0;

    animation: mobile-seamless 12s linear infinite;
    will-change: transform;
  }

  #andcouture_lp .slide-wrap .slide-track img {
    display: block;

    width: 100cqw;
    flex: 0 0 100cqw;
    max-width: none;
    height: auto;

    margin: 0;
    padding: 0;
    border: 0;
  }

}

/* スマホ：右から左へ無限ループ */
@keyframes mobile-seamless {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.scroll-slider {
    width: 100%;
    overflow: hidden;
    }

    .scroll-slider-track {
    display: flex;
    width: 300%;
    transform: translateX(0);
    }

    .scroll-slide {
    width: 33.333%;
    flex-shrink: 0;
    }

    .scroll-slide img {
    display: block;
    width: 100%;
    height: auto;
    }

/* ========================================
   11月LOOK 背景色切り替え
======================================== */

/* 各セクション共通 */
#andcouture_lp .bg-section {
    width: 100%;
    height: auto;
    position: relative;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 背景01 */
#andcouture_lp .bg01 {
    background-color: #30354f;
}

/* 背景02 */
#andcouture_lp .bg02 {
    background-color: #ffffff;
}

/* 背景03 */
#andcouture_lp .bg03 {
    background-color: #dedee9;
}

/* 背景04 */
#andcouture_lp .bg04 {
    background-color: #c0c0c0;
}

/* ========================================
   通常画像の配置調整（スマホ）
======================================== */

/* 画像共通 */
#andcouture_lp .img-wrap {
    width: 100%;
    position: relative;
}

/* 画像サイズ */
#andcouture_lp .img-wrap img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
}

/* 左寄せ：幅70% */
#andcouture_lp .img-wrap.img-left {
    width: 70%;
    margin-left: 0;
    margin-right: auto;
}

/* 右寄せ：幅70% */
#andcouture_lp .img-wrap.img-right {
    width: 70%;
    margin-left: auto;
    margin-right: 0;
}

/* 中央寄せ：幅90% */
#andcouture_lp .img-wrap.img-margin {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   特定画像のみ配置調整（スマホ）
======================================== */

#andcouture_lp .img-wrap.img-special {
    width: 100%;
    padding-top: 3%;
    padding-bottom: 3%;
    box-sizing: border-box;
}

#andcouture_lp .img-wrap.img-special img {
    display: block;
    width: 75%;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: 5%;
    margin-bottom: 0;
}


/* ========================================
   重ねる画像の配置（スマホ）
======================================== */

#andcouture_lp .image-overlay .overlay-image {
    position: absolute;

    /* 左上に配置 */
    top: 13%;
    left: 3%;
    right: auto;

    z-index: 10;

    /* 画像を小さめに */
    width: 5%;
    max-width: none;
    height: auto;

    /* フェードイン前 */
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    animation: none !important;

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;

    pointer-events: none;
}

/* フェードイン後 */
#andcouture_lp .image-overlay .overlay-image.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ========================================
   重ねる画像のサイズ・位置を最優先
======================================== */

#andcouture_lp .img-wrap.image-overlay img.overlay-image {
    width: 45% !important;
    max-width: 45% !important;

    position: absolute;
    top: 10%;
    left: 0.9%;
    right: auto;

    height: auto;
}


/* ========================================
   特定の左寄せスライダーのみ画像追加
   スマホ
======================================== */

#andcouture_lp .slide-decoration-special {
    position: relative;
    width: 100%;
}

#andcouture_lp .slide-decoration-special .slide-side-special {
    position: absolute;
    top: 69%;
    right: 0.2%;

    width: 15%;
    max-width: 15%;
    height: auto;

    transform: translateY(-50%);
    z-index: 5;
    pointer-events: none;
}

/* ========================================
   2個目の左寄せスライダー装飾画像
   スマホ
======================================== */

#andcouture_lp .slide-decoration-special-02 {
    position: relative;
    width: 100%;
}

#andcouture_lp .slide-decoration-special-02 .slide-side-special-02 {
    position: absolute;
    top: 88%;
    right: 0.1%;

    width: 30% !important;
    max-width: 30% !important;
    height: auto;

    transform: translateY(-50%);
    z-index: 5;
    pointer-events: none;
}

/* 2個目のスライダー下に余白を追加 */
#andcouture_lp .slide-decoration-special-02 {
    margin-bottom: 6%;
}

/* ========================================
   特定の右寄せ画像のみサイズ変更
   スマホ
======================================== */

#andcouture_lp .img-wrap.img-right.img-right-special {
    width: 90%;
    margin-left: auto;
    margin-right: 0;
}

/* ========================================
   今回のLP専用 画像切り替え
   添付動画に近いフェード演出
======================================== */

#andcouture_lp .ac-image-change {
    position: relative;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    overflow: hidden;
    background-color: #ffffff;
}

/* 画像共通 */
#andcouture_lp .ac-image-change .ac-change-item {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    animation: none;
    backface-visibility: hidden;
}

/* 開始前は1枚目 */
#andcouture_lp .ac-image-change:not(.is-started)
.ac-change-item:first-child {
    opacity: 1;
}

/* 表示後にアニメーション開始 */
#andcouture_lp .ac-image-change.is-started .ac-change-item {
    animation: ac-look-fade 8s linear infinite;
}

/* 1枚目 */
#andcouture_lp .ac-image-change.is-started
.ac-change-item:nth-child(1) {
    animation-delay: 0s;
}

/* 2枚目 */
#andcouture_lp .ac-image-change.is-started
.ac-change-item:nth-child(2) {
    animation-delay: -4s;
}

/* 画像が一瞬薄くなって切り替わる */
@keyframes ac-look-fade {
    0% {
        opacity: 1;
    }

    42% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    92% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* ========================================
   画像切り替えスライダーの左右余白
======================================== */

#andcouture_lp .ac-image-change {
    width: 86%;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   特定の右寄せ画像 スマホ
   上10%・左5%・右0%
======================================== */

#andcouture_lp .img-wrap.img-right.img-right-position {
    width: 90%;
    margin-top: 0%;
    margin-left: auto;
    margin-right: 0;
    padding: 0;
    left: 0;
    top: 0;
}

/* ========================================
   フェードイン画像を上の画像に重ねる
   スマホ
======================================== */

#andcouture_lp .img-wrap.img-overlap-up {
    position: relative;
    margin-top: -60px;
    z-index: 2;
}

/* ========================================
   余白なし画像切り替えスライダー
   スマホ
======================================== */

#andcouture_lp .ac-image-change-full {
    position: relative;
    display: grid;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#andcouture_lp .ac-image-change-full .ac-full-item {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    animation: none;
}

/* 1枚目 */
#andcouture_lp .ac-image-change-full .ac-full-item:nth-child(1) {
    opacity: 1;
}

/* 2枚目 */
#andcouture_lp .ac-image-change-full .ac-full-item:nth-child(2) {
    opacity: 0;
}

/* スクロール後に切り替え開始 */
#andcouture_lp .ac-image-change-full.is-started .ac-full-item:nth-child(2) {
    animation: ac-full-change-sp 8s linear infinite;
}

/* 画像切り替えアニメーション */
@keyframes ac-full-change-sp {
    0%, 40% {
        opacity: 0;
    }

    50%, 90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ========================================
   特定の左寄せ画像
   左余白0%・右余白10% スマホ
======================================== */

#andcouture_lp .img-wrap.img-left.img-left-special {
    width: 90%;
    margin-left: 0;
    margin-right: auto;
    padding: 0;
}

/* ========================================
   特定の画像を中央に小さく表示
   スマホ
======================================== */

#andcouture_lp .img-wrap.img-center-special {
    width: 30%;
    margin: 0 auto;
    padding: 0;
    left: -7px;
}

#andcouture_lp .img-wrap.img-center-special img {
    display: block;
    width: 100%;
    height: auto;
}

/* ========================================
   特定の中央画像
   左右余白5% スマホ
======================================== */

#andcouture_lp .img-wrap.img-center-90 {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

#andcouture_lp .img-wrap.img-center-90 img {
    display: block;
    width: 100%;
    height: auto;
}

/* 画像05の下だけ余白5% */
#andcouture_lp .slide-decoration-special-02.slide-bottom-special-05 {
    margin-bottom: 0;
    padding-bottom: 10%;
    box-sizing: border-box;
}

/* ========================================
   画像05・09 せり上がり SP
======================================== */

/* せり上がり全体 */
#andcouture_lp .ac-pull-area {
    position: relative;
    width: 100%;
    overflow: visible;
    isolation: isolate;
    z-index: 1;
}

/* 画像05～08のエリアを前面に */
#andcouture_lp .ac-pull-area:not(.ac-pull-area-09) {
    z-index: 2;
}

/* 画像09～10のエリア */
#andcouture_lp .ac-pull-area-09 {
    position: relative;
    z-index: 1;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    overflow: visible;
}

/* 固定される画像05・09 */
#andcouture_lp .ac-pull-before {
    position: sticky;
    top: var(--ac-sticky-top, 0px);
    z-index: 1;
    width: 100%;
}

/* 上から重なる次のエリア */
#andcouture_lp .ac-pull-next {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

/* ========================================
   画像08 PRICE ～ 画像09
   白背景の調整 SP
======================================== */

/* 画像08と09の隙間を白くする */
#andcouture_lp .ac-pull-area-09::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 150px;
    background-color: #ffffff;
    pointer-events: none;
    z-index: -1;
}

/* 画像09の背景 */
#andcouture_lp .ac-pull-before-09 {
    background-color: #ffffff;
}

/* ========================================
   画像05・09 フェードインアップ SP
======================================== */

/* 表示前 */
#andcouture_lp .ac-pull-before .fade-in-up {
    opacity: 0;
    transform: translateY(35px);

    animation: none !important;
    animation-timeline: auto !important;

    transition:
        opacity 0.9s ease-out,
        transform 0.9s ease-out;
}

/* スクロールで表示 */
#andcouture_lp .ac-pull-before .fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 画像10と11の親 */
#andcouture_lp .ac-pull-area-10 {
    position: relative;
    width: 100%;
    overflow: visible;
    isolation: isolate;
}

/* 画像10を固定 */
#andcouture_lp .ac-pull-before-10 {
    position: sticky;
    top: var(--ac-sticky-top, 0px);
    z-index: 1;
    width: 100%;
}

/* 画像11を前面に */
#andcouture_lp .ac-pull-next-11 {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #c0c0c0;
}

/* ========================================
   TOP画像00 横幅調整
======================================== */

/* TOP画像の親要素 */
#andcouture_lp .layout {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* フェードイン部分 */
#andcouture_lp .layout .fadein {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* TOP画像00のみ */
#andcouture_lp .layout .fadein img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

/* ========================================
   特定画像のみ左右10%余白（スマホ）
======================================== */

#andcouture_lp .img-wrap.img-center-80 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    box-sizing: border-box;
}

#andcouture_lp .img-wrap.img-center-80 img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* ========================================
   特定スライダーのみ右余白20%（スマホ）
======================================== */

#andcouture_lp .slide-wrap.slide-left-70 {
    width: 84%;
    margin-left: 0;
    margin-right: auto;
    overflow: hidden;
    box-sizing: border-box;
}

/* ========================================
   特定画像のみ左余白30%・右寄せ（スマホ）
======================================== */

#andcouture_lp .img-wrap.img-right-70 {
    width: 70%;
    margin-left: auto;
    margin-right: 0;
    padding-top: 6%;
    padding-bottom: 4%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

#andcouture_lp .img-wrap.img-right-70 img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* ========================================
   特定画像のみ右余白20%・左寄せ（スマホ）
======================================== */

#andcouture_lp .img-wrap.img-left-80 {
    width: 80%;
    margin-left: 0;
    margin-right: auto;
    padding: 0;
    box-sizing: border-box;
}

#andcouture_lp .img-wrap.img-left-80 img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}


/*PC用*/
@media screen and (min-width:650px){
	#andcouture_lp .wrap {
		max-width: 500px;
		width: 100%;
		margin: 0 auto;
  	}
	#andcouture_lp .content {
		width: 500px;
		position: relative; /* absolute; */
		top: auto; /* 887px; */
		height: auto;
	}
	#andcouture_lp .awinterdressedinLight {
		max-width: 500px;
		margin: 0 0 18px 0;
	}
  
 	#andcouture_lp .stay1 {
	padding-top: 3%;
}
#andcouture_lp .stay2 {
	padding-top: 6%;
}
#andcouture_lp .stay3 {
	padding-top: 4%;
}

/* スライダー全体 */
.slide-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* 画像を横並び */
.slide-track {
  display: flex;
  width: 400%;
  animation: infinite-slide 12s linear infinite;
  will-change: transform;
}

/* 画像サイズ */
.slide-track img {
  width: 25%;
  height: auto;
  display: block;
  flex-shrink: 0;
}

/* 無限スライド */
@keyframes infinite-slide {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

}

/* 指定したスライダーだけ左寄せ */
.slide-wrap.slide-left {
  width: 90%;
  margin-left: 0;
  margin-right: auto;
}

/* 指定したスライダーだけ右寄せ */
.slide-wrap.slide-right {
  width: 90%;
  margin-left: auto;
  margin-right: 0;
}

/* 指定したスライダーだけ左右に余白 */
.slide-wrap.slide-margin {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.scroll-slider {
    width: 100%;
    overflow: hidden;
    }

    .scroll-slider-track {
    display: flex;
    width: 300%;
    transform: translateX(0);
    }

    .scroll-slide {
    width: 33.333%;
    flex-shrink: 0;
    }

    .scroll-slide img {
    display: block;
    width: 100%;
    height: auto;
    }

  /* 各セクション共通 */
#andcouture_lp .bg-section {
    width: 100%;
    height: auto;
    position: relative;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 背景01 */
#andcouture_lp .bg01 {
    background-color: #30354f;
}

/* 背景02 */
#andcouture_lp .bg02 {
    background-color: #ffffff;
}

/* 背景03 */
#andcouture_lp .bg03 {
    background-color: #dedee9;
}

/* 背景04 */
#andcouture_lp .bg04 {
    background-color: #c0c0c0;
}

/* ========================================
   通常画像の配置調整（PC）
======================================== */

/* 左寄せ：幅70% */
#andcouture_lp .img-wrap.img-left {
    width: 70%;
    margin-left: 0;
    margin-right: auto;
}

/* 右寄せ：幅70% */
#andcouture_lp .img-wrap.img-right {
    width: 70%;
    margin-left: auto;
    margin-right: 0;
}

/* 中央寄せ：幅90% */
#andcouture_lp .img-wrap.img-margin {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   特定画像のみ配置調整（PC）
======================================== */

#andcouture_lp .img-wrap.img-special {
    width: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
    box-sizing: border-box;
}

#andcouture_lp .img-wrap.img-special img {
    width: 75%;
    margin-left: auto;
    margin-right: 5%;
}

/* ========================================
   画像重ねフェードイン（PC）
======================================== */

#andcouture_lp .image-overlay .overlay-image {
    top: 13%;
    left: 5%;
    width: 65%;
}

/* ========================================
   重ねる画像の配置（PC）
======================================== */

#andcouture_lp .image-overlay .overlay-image {
    top: 13%;
    left: 3%;
    right: auto;
    width: 15%;
}

/* ========================================
   重ねる画像のサイズ・位置を最優先
======================================== */

#andcouture_lp .img-wrap.image-overlay img.overlay-image {
    width: 45% !important;
    max-width: 45% !important;

    position: absolute;
    top: 13%;
    left: 1%;
    right: auto;

    height: auto;
}

/* ========================================
   特定の左寄せスライダーのみ画像追加
   PC
======================================== */

#andcouture_lp .slide-decoration-special .slide-side-special {
    top: 67%;
    right: 5%;

    width: 15%;
    max-width: 15%;
}

/* ========================================
   2個目の左寄せスライダー装飾画像
   PC
======================================== */

#andcouture_lp .slide-decoration-special-02 .slide-side-special-02 {
    top: 88%;
    right: 0.2%;

    width: 29% !important;
    max-width: 29% !important;
}

/* 2個目のスライダー下に余白を追加 */
#andcouture_lp .slide-decoration-special-02 {
    margin-bottom: 6%;
}

/* ========================================
   特定の右寄せ画像のみサイズ変更
   PC
======================================== */

#andcouture_lp .img-wrap.img-right.img-right-special {
    width: 90%;
}


/* ========================================
   今回のLP専用 画像切り替え
   添付動画に近いフェード演出
======================================== */

#andcouture_lp .ac-image-change {
    position: relative;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    overflow: hidden;
    background-color: #ffffff;
}

/* 画像共通 */
#andcouture_lp .ac-image-change .ac-change-item {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    animation: none;
    backface-visibility: hidden;
}

/* 開始前は1枚目 */
#andcouture_lp .ac-image-change:not(.is-started)
.ac-change-item:first-child {
    opacity: 1;
}

/* 表示後にアニメーション開始 */
#andcouture_lp .ac-image-change.is-started .ac-change-item {
    animation: ac-look-fade 8s linear infinite;
}

/* 1枚目 */
#andcouture_lp .ac-image-change.is-started
.ac-change-item:nth-child(1) {
    animation-delay: 0s;
}

/* 2枚目 */
#andcouture_lp .ac-image-change.is-started
.ac-change-item:nth-child(2) {
    animation-delay: -4s;
}

/* 画像が一瞬薄くなって切り替わる */
@keyframes ac-look-fade {
    0% {
        opacity: 1;
    }

    42% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    92% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* ========================================
   画像切り替えスライダーの左右余白
======================================== */

#andcouture_lp .ac-image-change {
    width: 86%;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   特定の右寄せ画像 PC
   上10%・左5%・右0%
======================================== */

#andcouture_lp .img-wrap.img-right.img-right-position {
    width: 90%;
    margin-top: 0%;
    margin-left: auto;
    margin-right: 0;
    padding: 0;
    left: 0;
    top: 0;
}

/* ========================================
   フェードイン画像を上の画像に重ねる
   PC
======================================== */

#andcouture_lp .img-wrap.img-overlap-up {
    position: relative;
    margin-top: -64px;
    z-index: 2;
}


/* ========================================
   余白なし画像切り替えスライダー
   PC
======================================== */

#andcouture_lp .ac-image-change-full {
    position: relative;
    display: grid;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#andcouture_lp .ac-image-change-full .ac-full-item {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    animation: none;
}

/* 1枚目 */
#andcouture_lp .ac-image-change-full .ac-full-item:nth-child(1) {
    opacity: 1;
}

/* 2枚目 */
#andcouture_lp .ac-image-change-full .ac-full-item:nth-child(2) {
    opacity: 0;
}

/* スクロール後に切り替え開始 */
#andcouture_lp .ac-image-change-full.is-started .ac-full-item:nth-child(2) {
    animation: ac-full-change 8s linear infinite;
}

/* 画像切り替えアニメーション */
@keyframes ac-full-change {
    0%, 40% {
        opacity: 0;
    }

    50%, 90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ========================================
   特定の左寄せ画像
   左余白0%・右余白10% PC
======================================== */

#andcouture_lp .img-wrap.img-left.img-left-special {
    width: 90%;
    margin-left: 0;
    margin-right: auto;
    padding: 0;
}

/* ========================================
   特定の画像を中央に小さく表示
   PC
======================================== */

#andcouture_lp .img-wrap.img-center-special {
    width: 45%;
    margin: 0 auto;
    padding: 0;
    left: -7px;
}

#andcouture_lp .img-wrap.img-center-special img {
    display: block;
    width: 100%;
    height: auto;
}

/* ========================================
   特定の中央画像
   左右余白5% PC
======================================== */

#andcouture_lp .img-wrap.img-center-90 {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

#andcouture_lp .img-wrap.img-center-90 img {
    display: block;
    width: 100%;
    height: auto;
}

/* 画像05の下だけ余白5% */
#andcouture_lp .slide-decoration-special-02.slide-bottom-special-05 {
    margin-bottom: 0;
    padding-bottom: 10%;
    box-sizing: border-box;
}

/* ========================================
   画像05・09 せり上がり PC
======================================== */

/* せり上がり全体 */
#andcouture_lp .ac-pull-area {
    position: relative;
    width: 100%;
    overflow: visible;
    isolation: isolate;
    z-index: 1;
}

/* 画像05～08のエリアを前面に */
#andcouture_lp .ac-pull-area:not(.ac-pull-area-09) {
    z-index: 2;
}

/* 画像09～10のエリア */
#andcouture_lp .ac-pull-area-09 {
    position: relative;
    z-index: 1;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    overflow: visible;
}

/* 固定される画像05・09 */
#andcouture_lp .ac-pull-before {
    position: sticky;
    top: var(--ac-sticky-top, 0px);
    z-index: 1;
    width: 100%;
}

/* 上から重なる次のエリア */
#andcouture_lp .ac-pull-next {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

/* ========================================
   画像08 PRICE ～ 画像09
   白背景の調整
======================================== */

/* 画像08と09の隙間だけ白くする */
#andcouture_lp .ac-pull-area-09::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 150px;
    background-color: #ffffff;
    pointer-events: none;
    z-index: -1;
}

/* 画像09の背景 */
#andcouture_lp .ac-pull-before-09 {
    background-color: #ffffff;
}

/* ========================================
   画像05・09 フェードインアップ PC
======================================== */

/* 表示前 */
#andcouture_lp .ac-pull-before .fade-in-up {
    opacity: 0;
    transform: translateY(50px);

    animation: none !important;
    animation-timeline: auto !important;

    transition:
        opacity 0.9s ease-out,
        transform 0.9s ease-out;
}

/* スクロールで表示 */
#andcouture_lp .ac-pull-before .fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 画像10と11の親 */
#andcouture_lp .ac-pull-area-10 {
    position: relative;
    width: 100%;
    overflow: visible;
    isolation: isolate;
}

/* 画像10を固定 */
#andcouture_lp .ac-pull-before-10 {
    position: sticky;
    top: var(--ac-sticky-top, 0px);
    z-index: 1;
    width: 100%;
}

/* 画像11を前面に */
#andcouture_lp .ac-pull-next-11 {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #c0c0c0;
}

/* ========================================
   TOP画像00 横幅調整
======================================== */

/* TOP画像の親要素 */
#andcouture_lp .layout {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* フェードイン部分 */
#andcouture_lp .layout .fadein {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* TOP画像00のみ */
#andcouture_lp .layout .fadein img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

/* ========================================
   特定画像のみ左右10%余白（PC）
======================================== */

#andcouture_lp .img-wrap.img-center-80 {
    width: 80%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    box-sizing: border-box;
}

#andcouture_lp .img-wrap.img-center-80 img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* ========================================
   特定スライダーのみ右余白20%（PC）
======================================== */

#andcouture_lp .slide-wrap.slide-left-70 {
    width: 80%;
    margin-left: 0;
    margin-right: auto;
    overflow: hidden;
    box-sizing: border-box;
}

/* ========================================
   特定画像のみ左余白30%・右寄せ（PC）
======================================== */

#andcouture_lp .img-wrap.img-right-70 {
    width: 70%;
    margin-left: auto;
    margin-right: 0;
    padding-top: 6%;
    padding-bottom: 4%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

#andcouture_lp .img-wrap.img-right-70 img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* ========================================
   特定画像のみ右余白20%・左寄せ（PC）
======================================== */

#andcouture_lp .img-wrap.img-left-80 {
    width: 80%;
    margin-left: 0;
    margin-right: auto;
    padding: 0;
    box-sizing: border-box;
}

#andcouture_lp .img-wrap.img-left-80 img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

}