@charset "UTF-8";


/* kv ---------------------------------------*/

.indexkv-wrapper {
    background: #000;
    color:#fff;
    position: relative;
    padding-top: 70px;
}

.indexkv-wrapper::before{
    display:block;
    content:'';
    background:#F40009;
    width:100%;
    height: max(12vw, 140px);
    position:absolute;
    left:0;
    top:0;
}

.indexkv-wrapper::after{
    display:block;
    content:'';
    background:url(../img/index/line_kv.svg) no-repeat left bottom / cover;
    width:100%;
    height: 30vw;
    position:absolute;
    left:0;
    top:118px;
}

.indexkv {
    height: 54vw;
    position: relative;
    z-index:2;
}

.indexkv-detail {
    position: absolute;
    left: 5.8vw;
    top: 7.4vw;
}

.indexkv-title-wrapper {
    margin-bottom: 1.9vw;
}

.indexkv-title {
    margin-bottom: 1vw;
    width: calc(492 / 1280 * 100vw);
}

.indexkv-title img {
    width:100%;
}

.indexkv-title-sholder {
    margin-bottom: 2vw;
    font-size: calc(28 / 1280 * 100vw);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.1em;
}

.indexkv-text {
    font-size: calc(18 / 1280 * 100vw);
    font-weight: 700;
    line-height: calc(36 / 18);
    letter-spacing: 0.1em;
    width:47vw;
}

.indexkv-map {
    position: absolute;
    right: 4vw;
    top: 3vw;
    width: calc(560 / 1280 * 100vw);
}

.indexkv-map img {
    width:100%;
}

.indexkv-map span {
    position: absolute;
    font-size: calc(7 / 1280 * 100vw);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    background: #fff;
    color:#000;
    padding: calc(3 / 1280 * 100vw) calc(9 / 1280 * 100vw);
    border-radius: calc(20 / 1280 * 100vw);
}

.indexkv-map span:first-of-type {
    top: 85.2%;
    left: 38.8%;
}


/* common ---------------------------------------*/

.indexwrapper {
}

.indexsection {
}

.indexsection-head {
    position: relative;
    padding-top: calc(314 / 1280 * 100%);
    width: 100%;
    min-height: 270px;
    background: url(../img/index/bg_coke.png) no-repeat center bottom / cover;
    color:#fff;
}

.indexsection-head-inner {
    display: flex;
	align-items: flex-end;
    position: absolute;
    top: calc(186 / 314 * 100%);
    left: 50%;
    transform: translateX(-50%);
    padding: 0 30px;
    max-width: 1060px;
    width: 100%;
    line-height: 1;
}

.indexsection-title {
    font-size: min(calc(120 / 1280 * 100vw), 120px);
    font-weight: 700;
    line-height: 0.7;
    padding-right: 28px;
    white-space: nowrap;
}

.indexsection-text {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    padding:15px 24px;
    border-left:1px solid #fff;
    white-space: nowrap;
}

.indexsection-body {
}


/* news ---------------------------------------*/

.indexnews {
    position: relative;
    z-index: 1;
    background-color: #000;
}

.indexnews::before {
    position: absolute;
    top: -6.4vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    width: 100%;
    aspect-ratio: 1280 / 224;
    background: url('../img/index/bg_news.png') no-repeat center center / contain;
    content: '';
}

.indexnews-body {
    padding:80px 30px 96px;
    background: #F4F4F4;
    border-top:20px solid #F40009;
}

.indexnews-block {
    background: #fff;
    padding:30px 50px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    max-height:370px;
    height: 100%;
    overflow-y: auto;
}

.indexnews-block-inner {

}

.indexnews-list {
}

.indexnews-list-item {
    border-bottom:2px dashed #ccc;
    padding: 32px 0;
}

.indexnews-list-item-detail {
    display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.indexnews-list-item-info {
    width: 276px;
    display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.indexnews-list-item-date {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.indexnews-list-item-category {
    display: inline-block;
    width:150px;
    font-size: 20px;
    font-weight: 700;
    border: 1px solid #aaa;
    border-radius: 20px;
    text-align: center;
}

.indexnews-list-item-title {
    font-size: 16px;
    line-height: calc(30 / 16);
    letter-spacing: 0.12em;
}


/* pickuparea ---------------------------------------*/

.indexpickuparea {
    color:#fff;
}

.indexpickuparea .indexsection-head{
    background-color: #F4F4F4;
}

.indexpickuparea-body {
    position: relative;
    padding:80px 30px calc(300 / 1280 * 100%);
    border-top:20px solid #fff;
}

.indexpickuparea-body::before,
.indexpickuparea-body::after {
    position: absolute;
    content: '';
}

.indexpickuparea-body::before {
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: #F40009;
    mix-blend-mode: darken;
}

.indexpickuparea-body::after {
    top: 40px;
    left: 49%;
    transform: translateX(-50%);
    z-index: -2;
    width: 240px;
    height: 946px;
    background: url('../img/index/bg_pickuparea.png') no-repeat center center / contain;
    content: '';
}

.indexpickuparea-head {
    margin-bottom: 30px;
}

.indexpickuparea-title {
    margin-bottom: 8px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.08em;
}

.indexpickuparea-text {
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.1em;
}


/* pickuparealist（トップ・下層共通作成後commonへ） ---------------------------------------*/

.pickuparealist {
    display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 32px;
}

.pickuparealist-item {
    width:calc(25% - 24px);
}

.pickuparealist-item-link {
    background: #000;
    color:#fff;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.pickuparealist-item-link.disabled {
    pointer-events: none;
    opacity: 0.6;
}

.pickuparealist-item-image {
    position: relative;
    z-index: 1;
}

.pickuparealist-item-image::after {
    position: absolute;
    bottom: -14%;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 42%;
    background: url('../img/common/line_pickuparea.svg') no-repeat;
    background-size: contain;
    content: '';
}

.pickuparealist-item-image img {
    width:100%;
}

.pickuparealist-item-detail {
    position: relative;
    z-index: 2;
    text-align: center;
    padding:10px 10px 16px;
}

.pickuparealist-item-message {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    height:50px;
    line-height: 1;
}

.pickuparealist-item-message small {
    display: block;
    font-weight: 700;
    font-size: 16px;
}

.pickuparealist-item-message span {
    display: block;
    font-weight: 700;
    font-size: 22px;
    color:#F40009;
}

.pickuparealist-item-title {
    line-height: 1;
    font-size: 30px;
    font-weight: 700;
    position: relative;
}

.pickuparealist-item-icon {
    display: block;
    width: 36px;
    height: 36px;
    position: absolute;
    right: 10px;
    bottom: 12px;
    background: #fff;
    display: flex;
	justify-content: center;
	align-items: center;
    border-radius: 50%;
}

.pickuparealist-item-icon::after{
    display: inline-block;
	content:'';
	background:url('../img/common/icon_arrow.svg') no-repeat left top;
	background-size:100%;
	width: 20px;
	height: 20px;
}

.pickuparealist-item-movie {
    display: block;
    background: #fff;
    border-radius: 5px;
    color:#F40009;
    margin-top: 16px;
    position: relative;
    padding:11px 54px 11px 15px;
}

.pickuparealist-item-movie span {
    font-weight: 700;
    line-height: 1;
}

.pickuparealist-item-movie i {
    position: absolute;
    right:13px;
    top:50%;
    transform: translate(0,-50%);
	content:'';
	background:url('../img/common/icon_movie.svg') no-repeat left top;
	background-size:100%;
	width: 32px;
	height: 30px;
}


/* area ---------------------------------------*/

.indexarea {
    margin-top: calc(-220 / 1280 * 100%);
}

.indexarea .indexsection-head{
}

.indexarea-body {
    background: #000;
    color:#fff;
    border-top:20px solid #F40009;
    padding:80px 30px 160px;
}

.indexarea-head {
    margin-bottom: 36px;
}

.indexarea-title {
    margin-bottom: 8px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.08em;
}

.indexarea-text {
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.1em;
}

.indexarealist {
    display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 32px 35px;
}

.indexarealist-item {
    width:310px;
}

.indexarealist-item-link {
    display: block;
    border-radius: 15px;
    overflow: hidden;
    border-radius: 12px;
    background: #F40009;
    color:#fff;
}

.indexarealist-item-link.disabled {
    pointer-events: none;
}

.indexarealist-item-image {
    position: relative;
}

.indexarealist-item-image img {
    width:100%;
}

.indexarealist-item-link.disabled .indexarealist-item-image::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    content: '';
}

.indexarealist-item-link.disabled .indexarealist-item-image::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    content: 'COMING SOON';
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
}

.indexarealist-item-detail {
    padding:10px 22px 12px 12px;
    display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.indexarealist-item-title {
    font-size: 30px;
    font-weight: 700;
}

.indexarealist-item-store {
    display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.indexarealist-item-store b {
    line-height: 1;
    width:58px;
    height:58px;
    color:#F40009;
    background: #fff;
    border-radius: 50%;
    display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
    font-size: 35px;
    font-weight: 700;
    line-height: 1;
}

.indexarealist-item-store span {
    font-size: 24px;
    font-weight: 700;
}

/* small pc */
@media screen and (min-width: 768px) and (max-width: 1200px){


}



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

    
    /* kv ---------------------------------------*/

    .indexkv-wrapper {
        padding-top: 40px;
    }

    .indexkv-wrapper::before {
        height: 45vw;
    }

    .indexkv-wrapper::after{
        background:url(../img/index/line_kv_sp.svg) no-repeat left bottom / cover;
        height: 69vw;
        top:138px;
    }

    .indexkv {
        height:205vw;
        min-height:100px;
        overflow: hidden;
    }

    .indexkv-detail {
        left:5vw;
        top:7.5vw;
        width:90%;
        height:100%;
    }

    .indexkv-title-wrapper {
        margin-bottom: 2vw;
    }

    .indexkv-title {
        margin-left: -1vw;
        margin-bottom: 4.6vw;
        width: calc(469 / 750 * 100vw);
    }

    .indexkv-title-sholder {
        margin-bottom: 4vw;
        font-size: calc(30 / 750 * 100vw);
        line-height: 1.4;
    }

    .indexkv-text {
        font-size: calc(30 / 750 * 100vw);
        line-height: calc(46 / 30);
        text-align: center;
        width: 90vw;
        position: absolute;
        left: 50%;
        top: 145vw;
        transform: translateX(-50%);
    }

    .indexkv-map {
        right: 2vw;
        top: 48vw;
        width: calc(360 / 375 * 100vw);
    }

    .indexkv-map span {
        font-size: calc(4.3 / 375 * 100vw);
        padding: calc(2 / 375 * 100vw) calc(4 / 375 * 100vw);
        border-radius: calc(20 / 375 * 100vw);
    }


    /* common ---------------------------------------*/

    .indexsection-head {
        min-height: unset;
        background: url(../img/index/bg_coke_sp.png) no-repeat center bottom / cover;
        padding-top: calc(263 / 750 * 100%);
    }

    .indexsection-head-inner {
        align-items: center;
        top: calc(152 / 263 * 100%);
        padding-right: 0;
    }

    .indexsection-title {
        font-size: 35px;
        padding-right: 14px;
    }

    .indexsection-text {
        font-size: 12px;
        padding:7px 12px;
    }

    .indexsection-body {
    }


    /* news ---------------------------------------*/
    .indexnews::before {
        top: -17vw;
        aspect-ratio: 750 / 224;
        background: url(../img/index/bg_news_sp.png) no-repeat center center / contain;
    }

    .indexnews-body {
        padding:40px 15px 20px;
        border-top-width:5px;
    }

    .indexnews-block {
        padding:22px 15px;
        border-radius: 3px;
        box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
        max-height: 250px;
    }

    .indexnews-list {
    }

    .indexnews-list-item {
        border-bottom-width:1px;
        padding: 5px 0;
    }

    .indexnews-list-item-detail {
        gap: 2px;
    }

    .indexnews-list-item-info {
        width: 100%;
        gap: 14px;
    }

    .indexnews-list-item-date {
        font-size: 10px;
    }

    .indexnews-list-item-category {
        width:74px;
        font-size: 10px;
        line-height: 1.5;
    }

    .indexnews-list-item-title {
        font-size: 12px;
        line-height: calc(40 / 24);
    }


    /* pickuparea ---------------------------------------*/

    .indexpickuparea {
        background: none;
    }

    .indexpickuparea-body {
        padding:15px 30px calc(150 / 375 * 100%);
        border-top-width:5px;
    }

    .indexpickuparea-body::after {
        top: 76px;
        left: 50%;
        width: 165px;
        height: 649px;
    }

    .indexpickuparea-head {
        margin-bottom: 8px;
    }

    .indexpickuparea-title {
        font-size: 16px;
    }

    .indexpickuparea-text {
        font-size: 12px;
        line-height: calc(40 / 24);
    }


    /* pickuparealist（トップ・下層共通作成後commonへ） ---------------------------------------*/

    .pickuparealist {
        gap: 30px 20px;
    }

    .pickuparealist-item {
        width:calc(50% - 10px);
    }

    .pickuparealist-item-link {
        border-radius: 5px;
    }

    .pickuparealist-item-detail {
        text-align: center;
        padding:14px 6px 18px;
    }

    .pickuparealist-item-message {
        height:auto;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px;
        margin-bottom: 10px;
    }

    .pickuparealist-item-message small {
        font-size: 11px;
    }

    .pickuparealist-item-message span {
        font-size: 11px;
    }

    .pickuparealist-item-title {
        font-size: 20px;
    }

    .pickuparealist-item-icon {
        width: 24px;
        height: 24px;
        right: 5px;
        bottom: 6px;
    }

    .pickuparealist-item-icon::after{
        width: 12px;
        height: 12px;
    }

    .pickuparealist-item-movie {
        border-radius: 3px;
        margin-top: 8px;
        padding:6px 34px 7px 8px;
        font-size: 12px;
    }

    .pickuparealist-item-movie i {
        right:9px;
        width: 21px;
        height: 20px;
    }


    /* area ---------------------------------------*/

    .indexarea {
        margin-top: calc(-116 / 375 * 100%);
    }

    .indexarea .indexsection-head{
    }

    .indexarea-body {
        border-top-width:5px;
        padding:16px 30px 40px;
    }

    .indexarea-head {
        margin-bottom: 12px;
    }

    .indexarea-title {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .indexarea-text {
        font-size: 12px;
        line-height: calc(40 / 24);
    }

    .indexarealist {
        gap: 22px 20px;
    }

    .indexarealist-item {
        width:calc(50% - 10px);
    }

    .indexarealist-item-link {
        border-radius: 5px;
    }

    .indexarealist-item-link.disabled .indexarealist-item-image::after {
        font-size: 13px;
    }

    .indexarealist-item-detail {
        padding: 5px 2px 5px 6px;
        gap: 5px;
    }

    .indexarealist-item-title {
        font-size: 15px;
    }

    .indexarealist-item-store {
        width: 60px;
        gap: 3px;
    }

    .indexarealist-item-store b {
        width:29px;
        height:29px;
        font-size: 18px;
    }

    .indexarealist-item-store span {
        font-size: 12px;
    }

}