@charset "utf-8";

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 600px){
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
    /*
    #CookiebotWidget:not(.CookiebotWidget-inactive){
        bottom: 26vw !important;
    }
    #CookiebotWidget.CookiebotWidget-open{
        bottom: 10px !important;
    }
    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
} /* end of media query */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media (max-width: 768px){
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* $$$$$$$$$$$$$$$$ */
footer .goback label{
    position: relative;
    z-index: 1;
}

/* $$$$$$$$$$$$$$$$ */
section.visual{
    background-color: rgba(113,195,223,1);
}
section.visual .base{
    opacity: 0;
}
section.visual .base.appear{
    opacity: 1;
}
section.visual .outerblock{
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
section.visual .outerblock .innerblock{
    opacity: 0;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
section.visual .outerblock[my_idx="0"]{
}
section.visual .outerblock[my_idx="1"]{
}
section.visual .outerblock[my_idx="2"]{
}
section.visual .outerblock.curr{
    visibility: visible;
}
section.visual .outerblock.curr .innerblock{
    opacity: 1;
}
/* ---- */
section.visual .shiftbutton{
    position: absolute;
    right: 1vw;
    top: 0;
    width: auto;
    padding: 2vw 6vw 2vw 6vw;
    font-size: 0;
    white-space: nowrap;
}
section.visual .shiftbutton label.arrow{
    position: absolute;
    top: 2vw;
    width: 4vw;
    height: 4vw;
}
section.visual .shiftbutton label.arrow.prev{
    left: 0;
}
section.visual .shiftbutton label.arrow.next{
    right: 0;
}
section.visual .shiftbutton label.arrow i{
    position: absolute;
    top: 0;
    width: 2.4vw;
    height: 4vw;
}
section.visual .shiftbutton label.arrow i>svg{
    stroke: rgba(174,210,0,1);
    stroke-width: 4;
}
section.visual .shiftbutton label.arrow.prev i{
    left: 2vw;
}
section.visual .shiftbutton label.arrow.next i{
    right: 2vw;
}
section.visual .shiftbutton label.each{
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: auto;
    height: 4vw;
    background-color: rgba(174,210,0,1);
    margin: 0 1vw 0 1vw;
}
section.visual .shiftbutton label.each.curr{
    background-color: rgba(255,255,255,1);
}
section.visual .shiftbutton label.each.curr i>svg{
    stroke: rgba(255,255,255,1);
}
section.visual .shiftbutton[my_count="2"]{
    width: 39vw;
}
section.visual .shiftbutton[my_count="2"] label.each{
    width: 11.4vw;
}
section.visual .shiftbutton[my_count="3"]{
    width: 39vw;
}
section.visual .shiftbutton[my_count="3"] label.each{
    width: 7vw;
}
/* ---- */
section.visual .base .poster{
    background-image: url(../images/index--mwm/sp/base.png);
}
section.visual .objbox .mvbtn{
    display: none;
}
section.visual .objbox .edge{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 41%;
    padding: 41% 0 0 0;
}
section.visual .objbox .edge .skin1{
    position: absolute;
    left: 41%;
    top: 0;
    width: 200%;
    height: 200%;
    overflow: hidden;
    box-shadow: 0 0 1vw rgba(0,0,0,1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
section.visual .objbox .edge .skin2{
    position: absolute;
    left: -29%;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}
section.visual .objbox .edge a{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: rgba(255,255,255,1);
    background-color: rgba(0,0,0,1);
}
section.visual .objbox .edge span{
    position: absolute;
    left: 25%;
    top: 51%;
    width: 100%;
    font-size: 6.4vw;
}
section.visual .objbox .edge .arrow{
    position: absolute;
    left: 25%;
    top: 59%;
    width: 20%;
    height: 3%;
    overflow: hidden;
}
section.visual .objbox .edge .arrow b{
    position: absolute;
    left: -12%;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition-property: left;
    transition-property: left;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}
section.visual .objbox .edge .arrow b>svg{
    stroke: rgba(255,255,255,1);
    stroke-width: 3;
}
/* ---- */
section.visual .partarea{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
section.visual .partarea .item{
    position: absolute;
    top: 0;
    opacity: 0;
}
section.visual .partarea .item.appear{
    opacity: 1;
}
section.visual .partarea .item i{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
}
section.visual .partarea .item.n01{
    left: 3.4%;
    width: 24.8%;
    padding: 20.6% 0 0 0;
    margin: 116.2% 0 0 0;
}
section.visual div.partarea .item.n01 i{
}
section.visual div.partarea .item.n01 i.n01{
    background-image: url(../images/index--mwm/part_01a.png);
}
section.visual div.partarea .item.n01 i.n02{
    background-image: url(../images/index--mwm/part_01b.png);
}
section.visual div.partarea .item.n01 i.n03{
    background-image: url(../images/index--mwm/part_01c.png);
}
section.visual div.partarea .item.n01 i.n03.appear{
    left: 0;
    top: 0;
    opacity: 1;
}
section.visual div.partarea .item.n02{
    left: 30.8%;
    width: 39.8%;
    padding: 62.0% 0 0 0;
    margin: 66.6% 0 0 0;
    z-index: 1;
}
section.visual div.partarea .item.n02 i{
    background-image: url(../images/index--mwm/part_02.png);
}
section.visual div.partarea .item.n03{
    left: -1.6%;
    width: 31.8%;
    padding: 25.0% 0 0 0;
    margin: 64.4% 0 0 0;
}
section.visual div.partarea .item.n03 i{
    background-image: url(../images/index--mwm/part_03.png);
}
section.visual div.partarea .item.n04{
    left: 73.6%;
    width: 31.8%;
    padding: 25.0% 0 0 0;
    margin: 68.4% 0 0 0;
}
section.visual div.partarea .item.n04 i{
    background-image: url(../images/index--mwm/part_04.png);
}
section.visual div.partarea .item.n05{
    left: 2.4%;
    width: 31.8%;
    padding: 25.0% 0 0 0;
    margin: 86.2% 0 0 0;
}
section.visual div.partarea .item.n05 i{
    background-image: url(../images/index--mwm/part_05.png);
}
/* ---- */
section.visual .exbanner{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
section.visual .exbanner a{
    display: block;
    width: 100%;
    height: 100%;
}
section.visual .outerblock[my_idx="0"] .exbanner figure{
    background-image: url(../images/index/sp/kv_poster_mashup.png);
}
section.visual .outerblock[my_idx="1"] .exbanner figure{
    background-image: url(../images/index/sp/kv_poster_campaign_202310.png);
}
section.visual .outerblock[my_idx="2"] .exbanner figure{
    background-image: url(../images/index/sp/kv_poster_neon.png);
}
/* ---- */
section.visual .morebutton{
    position: absolute;
    left: 75%;
    top: 0;
    width: 23%;
    padding: 23% 0 0 0;
    margin: 104% 0 0 0;
}
section.visual .morebutton a{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
section.visual .morebutton span{
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../images/index--mwm/btn_more_hub_01.png);
}
section.visual .morebutton i{
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../images/index--mwm/btn_more_hub_02.png);
}

/* $$$$$$$$$$$$$$$$ */
section.about{
}
section.about>.bg{
}
section.about .itembox{
    padding: 16vw 0 12vw 0;
}
section.about .bannerbox{
}
section.about .bannerbox .skin{
    width: 82vw;
    background-color: rgba(255,255,255,1);
    margin: 8vw auto 0 auto;
}
section.about .bannerbox .skin:nth-of-type(1){
    margin: 0 auto 0 auto;
}
section.about .bannerbox .skin a{
}
section.about .bannerbox .skin.n1{
    height: 60vw;
}
section.about .bannerbox .skin.n1 figure{
    background-image: url(../images/pwam/sp/banner_02.png);
}

/* $$$$$$$$$$$$$$$$ */
section.community{
}
section.community .bannerbox{
    padding: 0 9vw 15vw 9vw;
}
/* ---- */
section.community .titlebox{
}

/* $$$$$$$$$$$$$$$$ */
section.contact{
    padding: 16vw 0 0 0;
}
section.contact>.inner{
    z-index: 1;
}
section.contact .announce{
    top: -20vw;
}
section.contact .announce p{
}

/* $$$$$$$$$$$$$$$$ */
body[my_mode="mwm"] footer .goback label i>svg{
    stroke: rgba(255,255,255,1);
}
body[my_mode="mwm"] footer .goback label figure{
    background-image: url(../images/logo_brand_02.svg);
}
body[my_mode="mwm"] footer .goback label span{
    color: rgba(255,255,255,1);
}

/* $$$$$$$$$$$$$$$$ */
body[my_mode="mwm"] section.about::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 20vw;
    background-image: url(../images/index--mwm/sp/bg_drip_01.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
}
body[my_mode="mwm"] section.about>.bg{
    display: none;
}
body[my_mode="mwm"] section.about .itembox .each dl>dd{
    background-color: rgb(0,178,204,1);
}
body[my_mode="mwm"] section.about .itembox .each.n1 dl>dd h2 p{
    background-image: url(../images/index/txt_about_story_02.svg);
}
body[my_mode="mwm"] section.about .itembox .each.n2 dl>dd h2 p{
    background-image: url(../images/index/txt_about_spirit_02.svg);
}
body[my_mode="mwm"] section.about .itembox .each.n3 dl>dd h2 p{
    background-image: url(../images/index/txt_about_come_02.svg);
}
body[my_mode="mwm"] section.about .itembox .each.n4 dl>dd h2 p{
    background-image: url(../images/index/txt_about_find_02.svg);
}

/* $$$$$$$$$$$$$$$$ */
body[my_mode="mwm"] section.community .titlebox{
    padding: 44vw 0 1vw 0;
}
body[my_mode="mwm"] section.community::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 40vw;
    background-image: url(../images/index--mwm/sp/bg_drip_02.svg);
    background-repeat: no-repeat;
    background-position: 0 -34vw;
    background-size: 100% auto;
}

/* $$$$$$$$$$$$$$$$ */
body[my_mode="mwm"] section.contact::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50vw;
    background-image: url(../images/index--mwm/sp/bg_drip_03.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
}
body[my_mode="mwm"] section.contact::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 81vw;
    background-color: rgba(0,0,0,1);
}
body[my_mode="mwm"] section.contact .address dl>dt p{
    color: rgba(255,255,255,1);
}
body[my_mode="mwm"] section.contact .address dl>dd p{
    color: rgba(255,255,255,1);
}
body[my_mode="mwm"] section.contact .address dl>dd p span a{
    color: rgba(255,255,255,1);
}

/* $$$$$$$$$$$$$$$$ */
body[my_mode="guava"] section.about{
    background-color: rgba(237,106,146,1);
}
body[my_mode="guava"] section.about>.bg{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0);
}
body[my_mode="guava"] section.about>.bg i{
    position: absolute;
    left: 0;
    top: 0;
    width: 400%;
    height: 48%;
}
body[my_mode="guava"] section.about>.bg i>svg{
    fill: rgba(49,196,163,1);
}
body[my_mode="guava"] section.about .itembox{
    padding: 16vw 0 8vw 0;
}
body[my_mode="guava"] section.about .bannerbox{
    position: absolute;
    left: 0;
    bottom: -72vw;
    width: 100%;
    z-index: 1;
}

/* $$$$$$$$$$$$$$$$ */
body[my_mode="guava"] section.community .titlebox{
    padding: 90vw 0 1vw 0;
}

/* $$$$$$$$$$$$$$$$ */
body[my_mode="guava"] section.contact>.inner{
    padding: 35vw 0 0 5vw;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
} /* end of media query */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */