@charset "UTF-8";

* {
    margin: 0px;
    padding: 0px;
    color: #412E27;
}

.container {
    width: 100%;
    margin: 0 auto;
}

.body {
    margin: 0;
    padding: 0;

}

#mainContents {
    padding-top: 50px !important;
}

.video-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 2000px;
    overflow: hidden;
    z-index: -1;
}

.video-wrapper video {
    width: 100%;
    height: auto;
    opacity: 0.4;
}





/*---------------------*/


/* パンくずリスト */
.GIFT-breadcrumb {
    font-size: .8rem;
    margin: 2%;
}

.GIFT-breadcrumb a {
    text-decoration: none;
}






.Gift-container {
    position: relative;
}


/* hero全体 */
.GIFT-hero {
    position: relative;
}

/* ▼ 初期状態（大・小共通） */
.kesshou {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transform: translate(0, 0) scale(0.6) rotate(0deg);
}

/* 大（右上に変更済） */
.kesshou-top {
    width: 20%;
    top: -7%;
    right: 6%;
}

/* 小（左下） */
.kesshou-bottom {
    width: 10%;
    bottom: 40%;
    left: 5%;
}

/* ▼ イントロ用：最初だけ小さく→大きく＋回転しながらふわっと */
.kesshou-top.start {
    animation: kesshouTopIntro 8s ease-out forwards;
}

.kesshou-bottom.start {
    animation: kesshouBottomIntro 10s ease-out forwards;
}

/* ▼ イントロが終わったあと、ずっとふわふわ＋回転ループ */
.kesshou-top.loop {
    opacity: 1;
    animation: kesshouTopMotion 16s ease-in-out 0s infinite;
}

.kesshou-bottom.loop {
    opacity: 1;
    animation: kesshouBottomMotion 13s ease-in-out 0s infinite;
}

/* --- イントロ：大きい結晶 --- */
@keyframes kesshouTopIntro {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.6) rotate(0deg);
    }

    60% {
        opacity: 1;
        transform: translate(4px, -8px) scale(1.02) rotate(140deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, -10px) scale(1) rotate(180deg);
    }
}

/* --- イントロ：小さい結晶 --- */
@keyframes kesshouBottomIntro {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.6) rotate(0deg);
    }

    60% {
        opacity: 1;
        transform: translate(6px, -12px) scale(1.05) rotate(-130deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, -16px) scale(1) rotate(-180deg);
    }
}

/* --- ループ：大きい結晶（上下にふわふわ＋ゆっくり回転） --- */
@keyframes kesshouTopMotion {
    0% {
        transform: translate(0, -10px) scale(1) rotate(180deg);
    }

    25% {
        transform: translate(6px, -16px) scale(1.02) rotate(210deg);
    }

    50% {
        transform: translate(0, -22px) scale(1.03) rotate(240deg);
    }

    75% {
        transform: translate(-6px, -16px) scale(1.01) rotate(300deg);
    }

    100% {
        transform: translate(0, -10px) scale(1) rotate(360deg);
    }
}

/* --- ループ：小さい結晶（少し大きめにふわふわ＋逆回転） --- */
@keyframes kesshouBottomMotion {
    0% {
        transform: translate(0, -16px) scale(1) rotate(-180deg);
    }

    25% {
        transform: translate(8px, -24px) scale(1.03) rotate(-220deg);
    }

    50% {
        transform: translate(0, -32px) scale(1.05) rotate(-250deg);
    }

    75% {
        transform: translate(-8px, -22px) scale(1.02) rotate(-310deg);
    }

    100% {
        transform: translate(0, -16px) scale(1) rotate(-360deg);
    }
}









/* hero画像 */
.hero-img {
    width: 100%;
    opacity: 0;
    /* 初期は完全に非表示 */
    transform: translateY(0);
}

.hero-img.fade-in {
    opacity: 0.9;
    /* ← 少し透過した状態で表示 */
    transform: translateY(0);
    transition: opacity 7s ease, transform 2s ease;
}



/* ▼ ロゴ周り（前のまま動く） */
.MAAM-logo {
    position: absolute;
    top: 8%;
    left: 22%;
    width: 400px;
    opacity: 0;
    transform: translateY(0);
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}

.MAAM-logo.fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 2s ease 1s, transform 2s ease 1s;
}

.MAAM-logo-img {
    width: 80%;
    display: block;
}






.GIFT-title {
    width: 70%;
    position: absolute;
    bottom: 8%;
    top: 85%;
    left: 16%;
    transform: translate(0, 100px);
    /* X方向：中央 / Y方向：少し下からスタート */

    /* ★ フェードイン用 初期状態 */
    opacity: 0;
    transition: opacity 2s ease, transform 1s ease;
}

/* 画面に入ったら付けるクラス */
.GIFT-title.show {
    opacity: 1;
    transform: translate(0, -60%);
    /* 下からふわっと上に戻る */
}





.Gift-container2 {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 5% 200px;
    text-align: center;
    /* ★ テキストも中央揃え */
}



.sub {
    font-size: 1.5rem;
    margin-top: 0.6em;
    margin-bottom: 1.4em;
    letter-spacing: 0.05em;
}

.lead {
    line-height: 1.9;
    font-size: 1rem;
}

.lead2 {
    text-align: center;
    padding-bottom: 100px;
}


/*------ フェードインのCSS ---------------*/

.scroll-fadein {
    opacity: 0;
    transform: translateY(200px);
    transition: opacity 1s ease-out, transform 0.5s ease-out;
}

.scroll-fadein.show {
    opacity: 1;
    transform: translateY(0);
}

/* すこし遅れる */
.scroll-fadein2 {
    opacity: 0;
    transform: translateY(300px);
    transition: opacity 1s ease-out, transform 0.5s ease-out;
}

.scroll-fadein2.show {
    opacity: 1;
    transform: translateY(0);
}


/* さらに遅れる */
.scroll-fadein3 {
    opacity: 0;
    transform: translateY(400px);
    transition: opacity 1s ease-out, transform 0.5s ease-out;
}

.scroll-fadein3.show {
    opacity: 1;
    transform: translateY(0);
}















/*------ BLANKET ---------------*/

.kirikae {
    width: 100%;
    opacity: .5;
    display: block;
}

.Gift-container-blanket {
    display: flex;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.5);
    position: relative;
    padding-bottom: 500px;
}

.Gift-container-blanket2 {
    position: relative;
}











/* ===========================
   ロールスクリーン（左→右）
=========================== */
/* 画像を入れる枠（はみ出しを隠す） */
.blanket-img-wrapper {
    position: relative;
    overflow: hidden;
    width: 520px;
}

/* 画像：最初は右側が全部マスクされている状態 */
.blanket-img {
    width: 100%;
    display: block;
    /* 上 右 下 左 の順で inset（右側100%隠す） */
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s ease-out;
}

/* ロールスクリーンが開いて、全体が見える状態 */
.blanket-img.show {
    clip-path: inset(0 0 0 0);
}

/* タイトル：ふわっと出るのは前回と同じでOK */
.blanket-title {
    position: absolute;
    bottom: -200px;
    left: -8%;
    width: 500px;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s ease-out 0.3s, transform 0.8s ease-out 0.3s;
}

.blanket-title.show {
    opacity: 1;
    transform: translateY(0);
}

/* ▼ 共通で使う「下からふわっと」 */
.fade-up {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .8s ease-out, transform 1s ease-out;
}

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
}











.Gift-container-blanket3 {
    width: 500px;
    padding: 30px 0 0 30px;

}

.Gift-container-blanket3-p {
    font-size: 1.5rem;
}

.Gift-container-blanket3-p2 {
    font-size: .9rem;
}

.kulkuri-img {
    width: 700px;
    position: absolute;
    top: 370px;
    right: 2%;
}



/* ===========================
   商品一覧：3列レイアウト
=========================== */

.Gift-container-blanket4 {
    padding-bottom: 200px;
    display: flex;
    justify-content: center;
    gap: 20px;
    /* 列間余白（お好みで） */
    background-color: rgba(255, 255, 255, 0.5);
    flex-wrap: wrap;
    /* ← 重要：折り返し */
}

/* 各カード（3列） */
.Gift-container-blanket4-a {
    text-decoration: none;
    flex: 0 0 calc((100% - 40px) / 3);
    /* 3列計算（gap×2） */
    max-width: 340px;
    /* 伸びすぎ防止（高級感） */
    box-sizing: border-box;
}

/* 画像を必ずカード幅に合わせる */
.hover-img-wrap {
    width: 100%;
    overflow: hidden;
}

.hover-img-wrap img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}


.Gift-container-blanket4-img {
    width: 100%;
}

.Gift-container-blanket4-itemname {
    padding: 0 8px 10px;
    font-size: 1rem;
}

.Gift-container-blanket4-price {
    padding: 5px;
    font-size: 1.2rem;
}


.hover-img-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 10px;
}

.hover-img-wrap img {
    width: 100%;
    display: block;
    transition: opacity .5s ease, filter .5s ease;
}

/* 上の画像（ホバー時に表示したい画像） */
.hover-img-wrap .img-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/* ホバー時の切り替え */
.Gift-container-blanket4-a:hover .hover-img-wrap .img-hover {
    opacity: 1;
}









/* ===========================
   ボタン
=========================== */
.center-wrap {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
    padding-bottom: 600px;
}

.button-29 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 260px;
    margin: 0 auto;
    padding: .8em 2em;
    overflow: hidden;
    border: 1px solid #000;
    border-radius: 5px;
    color: #000;
    font-size: .9rem;
    z-index: 0;
    transition: color .3s ease, opacity .8s ease-out, transform 1s ease-out;
    /* ← 追加 */
    text-decoration: none;
}

.button-29:hover {
    color: #ffffff;
}

.button-29::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background-color: rgb(88, 40, 40);
    content: '';
    transition: width .3s ease;
}

.button-29:hover::before {
    width: 100%;
}


/* fade-up の中でも、このボタンだけ遅らせる */
.fade-delay {
    transition-delay: 0.3s;
    transform: translateY(200px);
}











/*------ NIGHTWEAR ---------------*/

.nightwear-img1 {
    width: 250px;
    position: absolute;
    top: 38%;
    right: 32%;
    z-index: 2;
}

.nightwear-img2 {
    width: 240px;
    position: absolute;
    top: 47%;
    right: 16%;
    z-index: 1;
}

.nightwear-img3 {
    width: 260px;
    position: absolute;
    top: 34%;
    right: 0;
}





/*------ BED ACCESSARIES ---------------*/

.anke-img {
    width: 600px;
    position: absolute;
    top: 370px;
    right: 2%;
}














/* ------ スクロールダウン アイコン ------ */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

.scroll_down {
    position: fixed;
    /* ← absolute から fixed に変更 */
    bottom: 40px;
    /* 画面下からの距離 */
    right: 2%;
    /* 画面右からの距離 */
    animation: arrowmove 1s ease-in-out infinite;
    z-index: 999;
    /* 他の要素の上に表示 */
    opacity: 1;
    pointer-events: auto;
    transition: opacity .4s ease;
}

.scroll_down.is-hidden {
    opacity: 0;
    pointer-events: none;
}


.scroll_down a {
    position: absolute;
    left: -24px;
    bottom: 30px;
    color: #000;
    font-size: 14px;
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    width: 24px;
    height: 24px;
    text-decoration: none;
}

.text {
    display: block;
    margin-top: 66px;
    margin-left: -3px;
    font-size: 8px;
    color: #000;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 1px;
}

.arrow {
    position: absolute;
    width: 28px;
    height: 5px;
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5);
    animation: move 3s ease-out infinite;
}

.arrow:first-child {
    animation: move 3s ease-out 1s infinite;
}

.arrow:nth-child(2) {
    animation: move 3s ease-out 2s infinite;
}

.arrow:before,
.arrow:after {
    content: ' ';
    position: absolute;
    top: 0;
    height: 100%;
    width: 51%;
    background: #000;
}

.arrow:before {
    left: 0;
    transform: skew(0deg, 30deg);
}

.arrow:after {
    right: 0;
    width: 50%;
    transform: skew(0deg, -30deg);
}

@keyframes move {
    25% {
        opacity: 1;
    }

    33% {
        opacity: 1;
        transform: translateY(30px);
    }

    67% {
        opacity: 1;
        transform: translateY(40px);
    }

    100% {
        opacity: 0;
        transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
    }
}

.brand-logo {
    display: block;
    width: 200px;
    margin: 0 auto 200px;
}



/* ------ footer ------ */

.footer {
    text-align: center;
    padding: 200px 0;
    font-size: .9rem;
    line-height: 2rem;
}


/* ------ instagram button ------ */

.button a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 30px;
    padding: 8px 20px;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.button a img {
    display: block;
    width: 108px;
    /* 元のサイズでもOK */
    height: auto;
}

.button a:hover {
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
    border-color: transparent;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.button a:hover img {
    filter: brightness(0) invert(1);
    /* ホバー時はロゴを白っぽく */
}





/* ------ ホームへ戻る button ------ */

.circle_btn05 {
    position: relative;
    display: inline-block;
    display: flex;
    justify-content: flex-end;
    margin: 50px 60px 100px 0;
}

.circle_btn05 .circle_btn05-txt {
    height: 48px;
    line-height: 48px;
    padding-right: 60px;
    color: initial;
    text-decoration: none;
}

.circle_btn05 .circle_btn05-icon {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.circle_btn05 .circle_btn05-icon .circle_btn05-circle {
    transition: transform 1s cubic-bezier(.23, 1, .32, 1);
    height: 48px;
}

.circle_btn05 .circle_btn05-icon .circle_btn05-circle svg {
    transition: transform .75s cubic-bezier(.215, .61, .355, 1);
    width: 100%;
    height: 100%;
    position: relative;
}

.circle_btn05 .circle_btn05-icon .circle_btn05-circle svg path {
    stroke-width: 2;
    transition: stroke-width .75s cubic-bezier(.215, .61, .355, 1);
}

.circle_btn05 .circle_btn05-icon .circle_btn05-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    display: inline-flex;
}

.circle_btn05 .circle_btn05-icon .circle_btn05-arrow svg path {
    stroke-width: 2;
    stroke: #5e5e5e;
    /* 矢印の色 */
}

.circle_btn05 .circle_btn05-circle-itm {
    background-color: #5e5e5e;
    /* 丸の色 */
    height: 48px;
}

/* マウスオーバーした際のデザイン */
.circle_btn05:hover .circle_btn05-txt {
    transform: translateX(-12px);
    transition: transform .5s cubic-bezier(.39, .575, .565, 1);
}

.circle_btn05:hover .circle_btn05-icon .circle_btn05-circle {
    transform: rotate(1turn);
    transition: transform .75s cubic-bezier(.23, 1, .32, 1);
}

.circle_btn05:hover .circle_btn05-icon .circle_btn05-circle svg {
    transform: scale(1.5);
}









/* ===========================
   縦ライン（横ズレしない版）
=========================== */
.divider-line {
    width: 100%;
    height: 500px;
    margin: 300px auto 500px;
    position: relative;
}

/* 線だけロールスクリーン */
.divider-line::after {
    content: '';
    position: absolute;
    top: 300px;
    left: 50%;
    width: 1.2px;
    height: 100%;
    background: #412E27;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    transition: transform 2s ease-out, opacity .4s ease-out;
}

.divider-line.show::after {
    transform: scaleY(1);
    opacity: 1;
}