@charset 'Shift_JIS';


:root{
    --window-width: 100vw;
    --window-width-px: 640;
    --wrapper-width: 355;

    --text-min-50px : min(50px, calc(50 / var(--window-width-px) * var(--window-width)));
    --text-min-35px : min(35px, calc(35 / var(--window-width-px) * var(--window-width)));
    --text-min-24px : min(24px, calc(24 / var(--window-width-px) * var(--window-width)));
    --text-min-18px : min(18px, calc(18 / var(--window-width-px) * var(--window-width)));

    --px-1: 40;

    --px-vw-2_5: calc(calc(var(--px-1) * 2.5) / var(--window-width-px) * var(--window-width));
    --px-vw-2: calc(calc(var(--px-1) * 2) / var(--window-width-px) * var(--window-width));
    --px-vw-1_5: calc(calc(var(--px-1) * 1.5) / var(--window-width-px) * var(--window-width));
    --px-vw-1_25: calc(calc(var(--px-1) * 1.25) / var(--window-width-px) * var(--window-width));
    --px-vw-1: calc(var(--px-1) / var(--window-width-px) * var(--window-width));
    --px-vw-0_75: calc(calc(var(--px-1) * 0.75) / var(--window-width-px) * var(--window-width));
    --px-vw-0_5: calc(calc(var(--px-1) * 0.5) / var(--window-width-px) * var(--window-width));
    --px-vw-0_25: calc(calc(var(--px-1) * 0.25) / var(--window-width-px) * var(--window-width));

    --w-image1: calc(160 / var(--window-width-px) * var(--window-width));
}

.mb-2_5{
    margin-bottom: var(--px-vw-2_5);
}

.mb-2{
    margin-bottom: var(--px-vw-2);
}

.mb-1_5{
    margin-bottom: var(--px-vw-1_5);
}

.mb-1_25{
    margin-bottom: var(--px-vw-1_25);
}

.mb-1{
    margin-bottom: var(--px-vw-1);
}

.mb-0_75{
    margin-bottom: var(--px-vw-0_75);
}

.mb-0_5{
    margin-bottom: var(--px-vw-0_5);
}

.mb-0_25{
    margin-bottom: var(--px-vw-0_25);
}

.pikmin4 *,
.pikmin4 *:before,
.pikmin4 *:after{
    box-sizing: border-box;
}

.pikmin4 img{
    width: 100%;
    vertical-align: top;
}

.bg1{
    background-image: url(./img/bg1.png);
    background-size: 100%;
}

.bg2{
    background-image:
        url(./img/bg2_1.png),
        url(./img/bg2_3.png),
        url(./img/bg2_2.png);
    background-size: 100%, 100%, 100%;
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: top, bottom, center;
}

.release_date{
    width: calc(425 / var(--window-width-px) * var(--window-width));
    margin-inline: auto;
}

/* items
-----------------------------------------------------------*/
.items_wrapper{
    width: calc(605 / var(--window-width-px) * var(--window-width));
    margin-inline: auto;
}

.items h2{
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    background-image: url(./img/bg_items_1.png);
    background-size: 100%;
    background-repeat: no-repeat;
    font-size: var(--text-min-35px);
    padding: calc(14 / var(--window-width-px) * var(--window-width)) 0;
}

.items_content{
    background-image: url(./img/bg_items_2.png);
    background-size: 100%;
    background-repeat: no-repeat;
    padding-top: calc(30 / var(--window-width-px) * var(--window-width));
    height: calc(890 / var(--window-width-px) * var(--window-width));
}

.items_img{
    width: calc(290 / var(--window-width-px) * var(--window-width));
    margin-bottom: calc(20 / var(--window-width-px) * var(--window-width));
    margin-inline: auto;
}

.items_info{
    color: #FF000C;
}

.items_price_type{
    font-size: var(--text-min-35px);
    text-align: center;
    font-weight: bold;
}

.items_price_box{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 calc(10 / var(--window-width-px) * var(--window-width));
}

.items_price_box_left{
    font-size: min(115px, calc(115 / var(--window-width-px) * var(--window-width)));
    letter-spacing: -0.02em;
    font-family: "Arial";
    font-weight: bold;
}

.tax_inc{
    font-size: var(--text-min-18px);
}

.yen{
    font-size: min(55px, calc(55 / var(--window-width-px) * var(--window-width)));
    font-weight: bold;
}

.items_btn{
    width: calc(445 / var(--window-width-px) * var(--window-width));
    margin-inline: auto;
}

/* video
-----------------------------------------------------------*/
.video_wrapper,
.introduction1_wrapper{
    width: calc(605 / var(--window-width-px) * var(--window-width));
    margin-inline: auto;
}

.video_wrapper h2,
.introduction1_wrapper h2{
    font-size: var(--text-min-50px);
    font-weight: bold;
    color: #FFF;
    text-align: center;
}

.video_wrapper iframe{
    vertical-align: top;
    width: calc(605 / var(--window-width-px) * var(--window-width));
    height: calc(340.3125 / var(--window-width-px) * var(--window-width));
}

/* introduction
-----------------------------------------------------------*/
.introduction1_wrapper{
    color: #FFF;
    padding-bottom: var(--px-vw-1_25);
}

.introduction1_catch{
    font-size: min(32px, calc(32 / var(--window-width-px) * var(--window-width)));
    font-weight: bold;
    line-height: calc(48/32);
    text-align: center;
}

.introduction1_lead{
    font-size: var(--text-min-24px);
    font-weight: bold;
    line-height: calc(40/24);
}

.introduction2_wrapper{
    padding-top: calc(200 / var(--window-width-px) * var(--window-width));
}

.introduction2 h3{
    font-size: var(--text-min-35px);
    font-weight: bold;
    color: #826400;
    text-align: center;
}

.introduction2_content p{
    width: calc(590 / var(--window-width-px) * var(--window-width));
    margin-inline: auto;
    font-size: var(--text-min-24px);
    line-height: calc(40/24);
    letter-spacing: 0.025em;
}

.introduction2_img{
    width: calc(620 / var(--window-width-px) * var(--window-width));
    margin-inline: auto;
}

.link{
    background-image: 
        url(./img/bud.png),
        url(./img/leaf.png),
        url(./img/flower.png);
    
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 
        calc(102 / var(--window-width-px) * var(--window-width)),
        calc(241 / var(--window-width-px) * var(--window-width)),
        calc(163 / var(--window-width-px) * var(--window-width));
    background-position: 
    calc(62 / var(--window-width-px) * var(--window-width)) calc(143 / var(--window-width-px) * var(--window-width)), 
    calc(172 / var(--window-width-px) * var(--window-width)) calc(179 / var(--window-width-px) * var(--window-width)), 
    calc(380 / var(--window-width-px) * var(--window-width)) calc(195 / var(--window-width-px) * var(--window-width));
}

.link_btn{
    width: calc(445 / var(--window-width-px) * var(--window-width));
    padding-bottom: calc(445 / var(--window-width-px) * var(--window-width));
    margin-inline: auto;
}

/* footer
-----------------------------------------------------------*/
.article_footer{
    background-color: #FFA000;
    font-size: 12px;
    color: #333333;
    text-align: center;
    padding: var(--px-vw-1) 0 var(--px-vw-2_5);
}