@charset "UTF-8";

/*----------------------------------------------------
    ☆PC
----------------------------------------------------*/

article{
    max-width: 1500px;
    margin: 0 auto;
}


/*------------------------------------------ MV */

.mvInner {
    background: url(/pp/frozen/images/top/mv_bg.png) top center / cover no-repeat;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    margin: 0 auto;
    position: relative;
    padding-top: 63%;
}

.mvInner .mv_shop {
    width: 83%;
    /*top: -50px;*/
    top: -5.4%;
    left: 0;
    right: 0;
    margin: auto;
}

.mvInner .mv_ponnya {
    width: 20.4%;
    top: 33.7%;
    right: 14%;
}

.mvInner .mv_title {
    width: 41%;
    top: 32%;
    left: 0;
    right: 0;
    margin: auto;
}

.mvInner .mv_takko {
    width: 9.4%;
    top: 77%;
    left: 35%;
}

.mvInner .mv_balloon {
    width: 16%;
    top: -4%;
    left: 1%;
}

.mvInner .mv_kanban {
    width: 19.2%;
    top: 50%;
    left: 9%;
}

.mvInner .mv_family {
    width: 36%;
    top: 54%;
    right: 2%;
}



/*------------------------------------------ スライダー */

.slideAreaFlame{
    position: absolute;
    top: 13.1%;
    left: 0;
    right: 0;
    margin: auto;
}

.slideArea{
    /*height: 100vh;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 修正ポイント：高さを固定せず、横幅100%に合わせる --- */
.slide > span {
    display: block; /* flexからblockへ（画像比率維持のため） */
    height: auto;   /* 固定値を解除 */
    background: #fff;
    margin: 0 5px;
}

/* Slickの内部構造で高さがズレないように調整 */
.slick-slide .slide > span {
    display: block;
    height: auto;   /* ここも固定値を解除 */
    margin: 0 5px;
    transition: all 0.5s ease;
}

/* 画像の設定：アスペクト比を維持 */
.slick-slide .slide > span img {
    width: 100%;
    height: auto;   /* object-fit: cover を使う場合は親に高さが必要ですが、可変なら auto がスムーズです */
    display: block;
}

/* もしスマホで横幅いっぱいにしたい場合は、親の .inner の max-width を調整してください */
.inner {
    width: 64%;
    max-width: 1500px;
}



/* --- JSで付与されたposクラスごとの形状（!importantで強制適用） --- */

/* 1番目（左端）：かなり深い台形 */
/*.pos-1 .slide > span {
  clip-path: polygon(30% 25%, 100% 0%, 100% 100%, 30% 75%) !important;
  z-index: 1;
}*/

/* 2番目（左から2番目）：中くらいの台形 */
/*.pos-2 .slide > span {
  clip-path: polygon(15% 12%, 100% 0%, 100% 100%, 15% 88%) !important;
  z-index: 2;
}*/

/* 3番目・4番目（中央2枚）：完全な正方形 */
/*.pos-3 .slide > span,
.pos-4 .slide > span {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
  transform: scale(1.1);
  z-index: 10;
}*/

/* 5番目（右から2番目）：中くらいの台形（右絞り） */
/*.pos-5 .slide > span {
  clip-path: polygon(0% 0%, 85% 12%, 85% 88%, 0% 100%) !important;
  z-index: 2;
}*/

/* 6番目（右端）：かなり深い台形（右絞り） */
/*.pos-6 .slide > span {
  clip-path: polygon(0% 0%, 70% 25%, 70% 75%, 0% 100%) !important;
  z-index: 1;
}*/



/*------------------------------------------ intro */

#intro {
    position: relative;
    background: #fff url(/pp/frozen/images/top/intro_bg.png) top center / cover no-repeat;
    margin-top: -7.5%;
    z-index: -1;
    overflow: hidden;

}

/*#intro:before {
    content: "";
    position: absolute;
    bottom: -7.8vw;
    left: 0;
    background: url(/pp/frozen/images/common/wt_bg.svg) bottom center / cover no-repeat;
    width: 100%;
    height: 7.9vw;
    transform: scaleY(-1);
}*/

#intro .introInner {
    position: relative;
    background-color: #fff;
    width: min(1000px, 85%);
    padding: 200px 0 300px;
    margin: 0 auto;
}

#intro .introBox {
    margin-bottom: 100px;
    position: relative;
}

#intro .introBox:last-child {
    margin-bottom: 0;
}

.introTitle {
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 30px;
}

.bigTitle {
    font-size: 4rem;
}

#intro .text {
    font-size: 1.8rem;
    text-align: center;
    line-height: 1.8;
    color: #881a1f;
}

#intro .text:nth-child(n+2) {
    margin-top: 15px;
}

#intro .note {
    text-align: center;
    line-height: 1.8;
    margin-top: 20px; 
}

#intro .decoBox li {
    position: absolute;
    width: 20%;
}

#intro .decoBox li:nth-child(1) {
    top: -25%;
    left: -4%;
}

#intro .decoBox li:nth-child(2) {
    top: 24%;
    left: 0%;
}

#intro .decoBox li:nth-child(3) {
    top: 65%;
    left: -4%;
}

#intro .decoBox li:nth-child(4) {
    top: -18%;
    right: -7%;
}

#intro .decoBox li:nth-child(5) {
    top: 24%;
    right: 0%;
}

#intro .decoBox li:nth-child(6) {
    top: 76%;
    right: -4%;
}

#intro .introBox .linkArea {
    width: min(800px, 90%);
    margin: 0 auto;
}

.introBox .linkArea .imgBox {
    background-position: center 16%;
}


/*------------------------------------------ 商品一覧 */

.category .title {
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: .2rem;
    margin-bottom: 70px;
}

.category .title:has(+ .text) {
    margin-bottom: 25px;
}

.category .title .en {
    font-size: 1.6rem;
    display: block;
    opacity: .3;
    margin-bottom: 10px;
}

.category .title + .text {
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 70px;
    line-height: 1.8;
}


#product {
    position: relative;
    background: linear-gradient(180deg, rgb(203 2 19) 0%, rgb(229 1 17) 60%);
}

#product:before {
    content: "";
    position: absolute;
    /*top: -7.4vw;*/
    top: -112px;
    left: 0;
    background: url(/pp/frozen/images/common/red_bg.svg) top center / cover no-repeat;
    width: 100%;
    /*height: 7.5vw;*/
    height: 112px;
}

.ponnya {
    width: 10.3%;
}

#product .chara01 {
    top: -5.4%;
    /*width: 140px;*/
    /*top: -210px;*/
    left: 0;
    right: 0;
    margin: auto;
}

.productInner {
    /*padding: 200px 0 250px;*/
}

.menuBoxArea {
    margin-bottom: 120px;
}

.menuBoxArea .menuTitle {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: 40px;
}

.menuBoxArea .menuTitle .menu_icon {
    width: 80px;
    margin-right: 10px;
}

.menuBoxArea .menuBoxList {
    display: flex;
    flex-wrap: wrap;
    gap: 50px 20px;
}

.menuBoxArea .menuBoxList li {
    width: calc((100% - 100px) / 3);
}

.menuBoxArea .menuBoxList li .imgBox {
    position: relative;
    margin-bottom: 20px;
}

.menuBoxArea .menuBoxList li .imgBoxInner {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    z-index: 1;
}

.menuBoxArea .menuBoxList li .imgBoxInner img {
    transition: .3s;
}

.menuBoxArea .menuBoxList li a:hover .imgBoxInner img {
    transform: scale(1.1);
}

.menuBoxArea .menuBoxList li .imgBox .pkg {
    bottom: -10px;
    right: -10px;
    width: 51%;
}

.menuBoxArea .menuBoxList li .imgBox .typeIcon {
    bottom: 20px;
    left: 20px;
    width: 55px;
}

.menuBoxArea .menuBoxList li .imgBox .deco {
    z-index: 1;
}

.menuBoxArea .menuBoxList li .textBox {
    font-size: 2rem;
    color: #fff;
}

.menuBoxArea .menuBoxList li .textBox .name {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 10px;
}

.menuBoxArea .menuBoxList li .textBox .name .piece {
    font-size: 1.3rem;
    line-height: 1;
    padding: 2px 12px;
    border: 1px solid #fff;
    border-radius: 13px;
    margin-left: 15px;
}

.menuBoxArea .menuBoxList li .textBox .price {
    font-size: 2rem;
    line-height: 1;
}

.menuBoxArea .menuBoxList li .textBox .price .small {
    font-size: 80%;
}

/*--- おすすめ ---*/

.recommend .recTitle {
    width: 16%;
    margin: 0 auto 30px;
}

.menuBoxArea .menuBoxList {
    gap: 50px 50px;
}

.recommend .menuBoxArea .menuBoxList li:nth-child(n+2) {
    width: calc((100% - 50px) /2);
}

.recommend .menuBoxList li .imgBox .pkg {
    width: 45%;
    bottom: -10px;
    right: -10px;
}

.recommend .menuBoxList li .imgBox .number {
    width: 20%;
    top: -30px;
    left: -20px;
}

.recommend .menuBoxList li .imgBox .voice {
    width: 23%;
    bottom: -20px;
    left: 30px;
}

/* long */
.recommend .menuBoxArea .menuBoxList li.long {
    width: 100%;
}

.recommend .menuBoxList li.long .imgBox .pkg {
    width: 21%;
    bottom: -30px;
    right: -20px;
}

.recommend .menuBoxList li.long .imgBox .number {
    width: 13%;
    top: -30px;
    left: -20px;
}

.recommend .menuBoxList li.long .imgBox .voice {
    width: 16%;
    top: -20px;
    left: auto;
    right: 60px;
}

.recommend .menuBoxArea .menuBoxList li .textBox .name,
.recommend .menuBoxArea .menuBoxList li .textBox .price {
    text-align: center;
}

.recommend .menuBoxList li.long .imgBox .chara02 {
    width: 20%;
    bottom: -28%;
    left: 12%;
}


/*--- 回転アイコン ---*/

/* --- レイアウト基本 --- */
.arc-slider-container {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.wheel {
    position: absolute;
    left: 50%;
    width: 5000px;
    height: 5000px;
    margin-left: -2500px;
    /* 親ホイールのアニメーション */
    animation: rotate-wheel 500s linear infinite;
}

/* 下のホイールだけ逆回転させる */
.lower {
    bottom: 80px;
    animation-direction: reverse;
}

.upper {
    top: 0px;
}

/* --- アイテムの配置 --- */
.item {
    position: absolute;
    left: 50%;
    top: 0;
    width: 110px;
    /* 配置の回転軸を円の中心（2500px下）に固定 */
    transform-origin: center 2500px;
}

.item img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- 【重要】自転を止める（打ち消し回転） --- */
.icon-wrapper {
    display: block;
    width: 100%;
    /* 親の .wheel が「時計回り」に回るなら、
       この .icon-wrapper を「反時計回り」に同じ速度で回すことで
       画像は常に「真上」を向いたまま移動します。
    */
    /*animation: rotate-wheel 500s linear infinite reverse;*/
}

/* lower（下のアーチ）の場合：
   親が reverse（反時計回り）なので、打ち消しは normal（時計回り）にする。
   さらに、画像が逆さまにならないよう初期状態で180度回しておく。
*/
.lower .icon-wrapper {
    animation: rotate-wheel-lower 500s linear infinite;
}

/* --- アニメーション定義 --- */

/* 基本：0度から360度 */
@keyframes rotate-wheel {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Lower用：常に180度ひっくり返した状態で360度回す */
@keyframes rotate-wheel-lower {
    from { transform: rotate(180deg); }
    to { transform: rotate(180deg); }
}



/*------------------------------------------ 購入方法 */

#howto {
    position: relative;
    padding: 100px 0;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
}

#howto:before {
    content: "";
    position: absolute;
    /*top: -7.8vw;*/
    top: -112px;
    left: 0;
    background: url(/pp/frozen/images/common/wt_bg.svg) top center / cover no-repeat;
    width: 100%;
    /*height: 7.9vw;*/
    height: 112px;
}






/*----------------------------------------------------
	☆TABLET UNDER 900
----------------------------------------------------*/

@media screen and (max-width:900px) {

    .menuBoxArea .menuBoxList li .imgBox .typeIcon {
        bottom: 15px;
        left: 15px;
        width: 32px;
    }

    
}


/*----------------------------------------------------
	☆UNDER 600
----------------------------------------------------*/

@media screen and (max-width:600px) {
    
    #main {
        margin: 60px 10px 0;
        border-radius: 15px;
    }

    /*------------------------------------------ MV */

    .mvInner {
        background: url(/pp/frozen/images/top/mv_bg-sp.png) top center / cover no-repeat;
        padding-top: 133%;
        overflow: hidden;
        clip-path: ellipse(155% 100% at 50% 0%);
    }

    .mvInner .mv_shop {
        width: 136%;
        top: -1%;
    }

    .mvInner .mv_ponnya {
        width: 38%;
        top: 24.5%;
        right: -5%;
        z-index: 1;
    }

    .mvInner .mv_title {
        width: 75%;
        top: 31%;
        z-index: 1;
    }

    .mvInner .mv_takko {
        width: 15%;
        top: 82%;
        left: 24%;
    }

    .mvInner .mv_balloon {
        width: 31%;
        top: 0%;
        left: 0%;
        z-index: 1;
    }

    .mvInner .mv_kanban {
        width: 25%;
        top: 68%;
        left: 1%;
        z-index: 1;
    }

    .mvInner .mv_family {
        width: 67%;
        top: 66%;
        right: -3%;
        z-index: 1;
    }

    .slideAreaFlame{
        top: 13.5%;
        margin-left: 17%;
    }

    .inner {
        width: 108%;
    }

    .slick-slide .slide > span {
        margin: 0 3px;
    }



    /*------------------------------------------ intro */

    #intro .introInner {
        padding: 100px 30px 130px;
    }

    .introTitle {
        font-size: 2.3rem;
        margin-bottom: 20px;
    }

    .bigTitle {
        font-size: 2.7rem;
        letter-spacing: -0.05rem;
    }

    #intro .text {
        font-size: 1.4rem;
        text-align: justify;
        line-height: 1.6;
        color: #881a1f;
    }

    #intro .note {
        font-size: 1.3rem;
        text-align: left;
    }

    #intro .decoBox li {
        width: 40%;
    }

    #intro .decoBox li:nth-child(1) {
        top: -22%;
        left: -34%;
    }

    #intro .decoBox li:nth-child(2) {
        top: 40%;
        left: -39%;
    }

    #intro .decoBox li:nth-child(3) {
        top: 100%;
        left: -28%;
    }

    #intro .decoBox li:nth-child(4) {
        top: -18%;
        right: -35%;
    }

    #intro .decoBox li:nth-child(5) {
        top: 45%;
        right: -40%;
    }

    #intro .decoBox li:nth-child(6) {
        top: 95%;
        right: -26%;
    }

    #intro .introBox .linkArea {
        width:100%;
    }


    /*------------------------------------------ 商品一覧 */

    .category .title {
        font-size: 2.3rem;
    }

    .category .title.only {
        margin-bottom: 40px;
    }

    .category .title .en {
        font-size: 1.3rem;
        margin-bottom: 5px;
    }

    .category .title + .text {
        font-size: 1.3rem;
        margin-bottom: 40px;
    }


    #product:before {
        top: -30px;
        height: 30px;
    }

    .ponnya {
        width: 17%;
    }

    #product .chara01 {
        top: -2.2%;
    }

    .productInner {
        padding: 0 0 0;
    }

    .menuBoxArea {
        margin-bottom: 70px;
    }

    .menuBoxArea .menuTitle {
        font-size: 2rem;
    }

    .menuBoxArea .menuTitle .menu_icon {
        width: 40px;
    }

    .menuBoxArea .menuBoxList {
        gap: 25px 20px;
    }

    .menuBoxArea .menuBoxList li {
        width: calc((100% - 20px) / 2);
    }

    .menuBoxArea .menuBoxList li .imgBoxInner {
        border-radius: 10px;
    }

    .menuBoxArea .menuBoxList li .imgBox .pkg {
        bottom: -10px;
        right: -10px;
        width: 51%;
    }

    .menuBoxArea .menuBoxList li .imgBox .typeIcon {
        bottom: 10px;
        left: 10px;
        width: 28px;
    }

    .menuBoxArea .menuBoxList li .textBox .name {
        font-size: 1.4rem;
        line-height: 1.5;
        margin-bottom: 5px;
    }

    .menuBoxArea .menuBoxList li .textBox .name .piece {
        font-size: 1.1rem;
        padding: 1px 10px;
        border-radius: 13px;
        margin-left: 5px;
    }

    .menuBoxArea .menuBoxList li .textBox .price {
        font-size: 1.4rem;
    }

    /*--- おすすめ ---*/

    .recommend .recTitle {
        width: 42%;
    }

    .recommend .menuBoxArea .menuBoxList {
        gap: 40px 0;
    }

    .recommend .menuBoxArea .menuBoxList li:nth-child(n+2) {
        width: 100%;
    }

    .recommend .menuBoxList li .imgBox .pkg,
    .recommend .menuBoxList li.long .imgBox .pkg {
        width: 38%;
        bottom: -10px;
        right: -10px;
    }

    .recommend .menuBoxList li .imgBox .number,
    .recommend .menuBoxList li.long .imgBox .number {
        width: 24%;
    }

    .recommend .menuBoxList li .imgBox .voice {
        width: 25%;
        bottom: -10px;
        left: 10px;
    }

    .recommend .menuBoxList li.long .imgBox .voice {
        width: 25%;
        top: -15px;
        right: 10px;
    }

    .recommend .menuBoxList li.long .imgBox .chara02 {
        width: 30%;
        /*bottom: -18%;
        left: 0;*/
        /*width: 60px;*/
        bottom: auto;
        left: auto;
        top: -20px;
        right: -20px;
    }

    /*--- 回転アイコン ---*/

    .arc-slider-container {
        height: 100px;
    }

    .wheel {
        width: 1000px;
        height: 1000px;
        margin-left: -500px;
    }

    .item {
        width: 70px;
        transform-origin: center 500px;
    }

    .lower {
        bottom: 30px;
    }



    /*------------------------------------------ 購入方法 */

    #howto {
        padding: 70px 0;
    }

    #howto:before {
        top: -30px;
        height: 30px;
    }

}