@charset "utf-8";

:root {
    --cr25-font-en: "Montserrat";
    --cr25-font-jp: "Noto Sans JP", sans-serif;
    --cr25-color-blk: #222222;
    --cr25-color-red: #d10000;
    --cr25-color-gry: #ededed;
    --cr25-color-d-gry: #8b8b8b;
    --cr25-content-width: min(1200px,89.33vw);
    --cr25-button-max: min(100%,520px);
    --cr25-button-arrow: min(40px,7vw);
}
#capsule-renewal-2025 {
    background-color: #fff;
    color: var(--cr25-color-blk);
    font-family: var(--cr25-font-en), var(--cr25-font-jp);
    font-weight: 500;
    font-feature-settings: "palt";
}
@media screen and (min-width: 767px) {
    #capsule-renewal-2025 .pc_none {
        display: none;
    }
}
#capsule-renewal-2025 a {
    color: var(--cr25-color-blk);
}
#capsule-renewal-2025 img {
    width: 100%;
    vertical-align: bottom;
}
#capsule-renewal-2025 .fadeIn {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease-out, transform .8s ease-out;
}
#capsule-renewal-2025 .fadeIn.show {
    opacity: 1;
    transform: translateY(0);
}
#capsule-renewal-2025 .content_nav {
    position: sticky;
    top: calc(var(--headHeight) + 1rem);
    z-index: 1000;
    opacity: 0;
    transition: opacity .5s ease, transform .5s ease;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
#capsule-renewal-2025 .content_nav.show {
    opacity: 1;
}
#capsule-renewal-2025 .hamburger .hamburger_btn {
    position: fixed;
    top: calc(var(--headHeight) + 1rem);
    right: min(36px,3vw);
    z-index: 1001;
    width: min(50px,10vw);
    height: min(50px,10vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: min(4.6px,1.2vw);
    cursor: pointer;
    background-color: var(--cr25-color-red);
    border-radius: 40px;
}
@media screen and (min-width: 767px) {
    #capsule-renewal-2025 .hamburger .hamburger_btn  {
        top: calc(var(--headMainHeight) + 1.5rem);
    }
}
#capsule-renewal-2025 .hamburger_btn span {
    width: 50%;
    display: block;
    height: 1px;
    background: #fff;
    border-radius: 3px;
    transition: 1s;
}
#capsule-renewal-2025 .nav_menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: var(--cr25-color-gry);
    box-shadow: 2px 0 8px rgba(0,0,0,0.2);
    transform: translateX(100%);
    transition: transform .8s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1000;
    padding: 0 min(40px,6vw);
}
#capsule-renewal-2025 .hamburger.open .nav_menu {
    transform: translateX(0);
}
@media screen and (min-width: 767px) {
    #capsule-renewal-2025 .nav_menu {
        width: 40%;
    }
}
#capsule-renewal-2025 .nav_menu ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap: min(6vw,30px);
}
#capsule-renewal-2025 .nav_menu li {
    border-bottom: 0.25px solid var(--cr25-color-d-gry);
    padding-bottom: min(3vw,20px);
}
#capsule-renewal-2025 .nav_menu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: clamp(1.2rem, 0.927rem + 0.852vw, 1.8rem);
    font-weight: normal;
}
#capsule-renewal-2025 .nav_menu a::after {
    content: "";
    background: url(../img-renewal-2025/arrow_wht.svg) no-repeat center center;
    display: block;
    width: min(40px,6vw);
    height: min(40px,6vw);
    transform: rotate(-90deg);
}
#capsule-renewal-2025 .hamburger.open .hamburger_btn span:nth-child(1) {
    transform: rotate(45deg) translate(3.6px, 4px);
}
#capsule-renewal-2025 .hamburger.open .hamburger_btn span:nth-child(2) {
    opacity: 0;
}
#capsule-renewal-2025 .hamburger.open .hamburger_btn span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -3.8px);
}

#capsule-renewal-2025 .description {
    font-size: clamp(1.1rem, 0.964rem + 0.426vw, 1.4rem);
    font-weight: normal;
    line-height: 1.8;
    text-align: justify;
}
#capsule-renewal-2025 .content_wrap {
    width: var(--cr25-content-width);
    margin: 0 auto;
    padding: min(20vw,100px) 0;
}
#capsule-renewal-2025 #mv {
    width: min(1400px,100vw);
    margin: 0 auto;
    position: relative;
}
#capsule-renewal-2025 #mv .hero {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
#capsule-renewal-2025 #mv h1 {
    width: min(600px,80vw);
}
#capsule-renewal-2025 #mv .subtext {
    background-color: #fff;
    margin-top: min(18px,3vw);
}
#capsule-renewal-2025 #mv .subtext > img {
    width: min(310px,54vw);
    padding: min(12px,2vw) 0;
}
#capsule-renewal-2025 #statement .lead {
    font-size: clamp(1.1rem, 0.873rem + 0.71vw, 1.6rem);
    text-align: center;
    line-height: 2.27;
}
#capsule-renewal-2025 #statement .lead + .lead {
    margin-top: min(20px,4vw);
}
#capsule-renewal-2025 #statement .statement_illust {
    width: min(42.27vw, 200px);
    margin: 0 auto;
    padding: min(80px,14vw) 0;
}
#capsule-renewal-2025 #statement .statement_banner a {
    display: flex;
    align-items: center;
    background-color: var(--cr25-color-gry);
    border: 0.25px solid var(--cr25-color-d-gry);
    border-radius: 5px;
    width: var(--cr25-button-max);
    margin: 0 auto;
}
#capsule-renewal-2025 #statement .statement_banner .banner_img {
    flex: 1;
}
#capsule-renewal-2025 #statement .statement_banner p {
    flex: 1.3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: min(20px,5vw);
    font-size: clamp(1.3rem, 1.118rem + 0.568vw, 1.7rem);
}
#capsule-renewal-2025 #statement .statement_banner p::after {
    content: "";
    background: url(../img-renewal-2025/arrow_wht.svg) no-repeat center center;
    display: block;
    width: var(--cr25-button-arrow);
    height: var(--cr25-button-arrow);
    transform: rotate(-90deg);
}
@media (hover:hover) {
    #capsule-renewal-2025 #statement .statement_banner a:hover {
        opacity: .8;
    }
}
#capsule-renewal-2025 h3 {
    font-size: clamp(1.6rem, 1.418rem + 0.568vw, 2rem);
    text-align: center;
    line-height: 1.56;
    font-weight: 800;
}
#capsule-renewal-2025 h3 + p.description {
    padding-top: min(4vw,40px);
    padding-bottom: min(10vw,80px);
}
@media screen and (min-width: 767px) {
    #capsule-renewal-2025 h3 + p.description {
    text-align: center;
    font-size: clamp(1.1rem, 0.873rem + 0.71vw, 1.6rem);
    }
}
#capsule-renewal-2025 #renewal {
    background-color: var(--cr25-color-gry);
}
#capsule-renewal-2025 #renewal .renewal_point {
    margin-top: min(10vw,60px);
}
#capsule-renewal-2025 #renewal .renewal_point li {
    margin-bottom: min(5.33vw, 30px);
}
#capsule-renewal-2025 #renewal .renewal_point a {
    color: #fff;
    display: flex;
    align-items: center;
    gap: min(20px,2vw);
    background-color: var(--cr25-color-d-gry);
    border-radius: 80px;
    padding: min(5vw,13px) min(3vw,20px);
    position: relative;
}
#capsule-renewal-2025 #renewal .renewal_point a > svg {
    width: min(38px,6.66vw);
    height: min(28px,5vw);
}
#capsule-renewal-2025 #renewal .renewal_point a > p {
    font-size: clamp(1.1rem, 0.827rem + 0.852vw, 1.7rem);
    line-height: 1.34;
}
#capsule-renewal-2025 #renewal .renewal_point a::after {
content: "";
background: url(../img-renewal-2025/arrow_wht.svg) no-repeat center center;
position: absolute;
top: 50%;
right: min(4.8vw,10px);
transform: translateY(-50%);
width: var(--cr25-button-arrow);
height: var(--cr25-button-arrow);
}
#capsule-renewal-2025 #renewal .content_wrap {
    width: min(720px,89.33vw);
}
#capsule-renewal-2025 .button_detail a {
    display: block;
    font-size: clamp(1.2rem, 1.109rem + 0.284vw, 1.4rem);
    width: min(68vw,360px);
    margin: 0 auto;
    border-radius: 40px;
    position: relative;
    text-align: center;
    padding: min(20px,4vw) 0;
    font-weight: 800;
    margin-top: min(6vw, 40px);
}
#capsule-renewal-2025 .button_detail a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: min(10px,3vw);
    transform: translateY(-50%);
    width: var(--cr25-button-arrow);
    height: var(--cr25-button-arrow);
    text-align: center;
}
#capsule-renewal-2025 #future .renewal_sustainable {
    width: min(720px,89.33vw);
}
#capsule-renewal-2025 #future .button_detail a {
    border: 0.5px solid var(--cr25-color-blk);
    color: var(--cr25-color-blk);
}
#capsule-renewal-2025 #future .button_detail a::after {
    background: url(../img-renewal-2025/arrow_blk.svg) no-repeat center center;
}
#capsule-renewal-2025 #new-lineup .button_detail a {
    background-color: var(--cr25-color-red);
    color: #fff;
}
#capsule-renewal-2025 #new-lineup .button_detail a::after {
    background: url(../img-renewal-2025/ico-modal-wht.svg) no-repeat center center;
}
#capsule-renewal-2025 #future .future_list + .future_list {
    margin-top: min(14vw,120px);
}
@media screen and (min-width: 767px) {
    #capsule-renewal-2025 #future .future_list + .future_list {
        margin-top: 0;
    }
}
#capsule-renewal-2025 #future .future_list_head {
    border-top: 0.5px solid var(--cr25-color-blk);
    border-bottom: 0.5px solid var(--cr25-color-blk);
    padding: min(40px,5vw) 0;
    margin-bottom: min(40px,5vw);
}
#capsule-renewal-2025 #future .future_list_title {
    display: flex;
    align-items: center;
    gap: min(40px,4vw);
}
#capsule-renewal-2025 #future .future_list_title + .description {
    margin-top: min(4vw,30px);
}
@media screen and (min-width: 767px) {
    #capsule-renewal-2025 #future .future_list_title {
        justify-content: center;
    }
    #capsule-renewal-2025 #future .future_list_title + .description {
        text-align: center;
    }
}
#capsule-renewal-2025 #future .future_list_title > svg {
    width: min(40px,7.66vw);
    height: min(40px,7.66vw);
}
#capsule-renewal-2025 #future .future_list_title > p {
    font-size: clamp(1.4rem, 1.218rem + 0.568vw, 1.8rem);
    line-height: 1.4; 
}
#capsule-renewal-2025 #future .future_item li:not(:last-child) {
    margin-bottom: min(6vw,100px);
}
#capsule-renewal-2025 #future .future_item_name {
    font-size: clamp(1.4rem, 1.218rem + 0.568vw, 1.8rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: min(10px,2vw);
    padding-top: min(5vw,30px);
}
#capsule-renewal-2025 #future .future_item_name > span {
    font-size: clamp(1rem, 0.909rem + 0.284vw, 1.2rem);
}
#capsule-renewal-2025 #future .future_item_name + p {
    padding-top: min(2.8vw,14px);
}
@media screen and (min-width: 767px) {
    #capsule-renewal-2025 #future .future_item {
        display: flex;
        gap: min(40px,4vw);
        justify-content: center;
    }
}
#capsule-renewal-2025 #future .sustainable_info {
    display: flex;
    gap: min(40px,4vw);
    align-items: center;
}
#capsule-renewal-2025 #future .sustainable_mark img {
    width: min(160px,25.33vw);
}
#capsule-renewal-2025 #future .sustainable_system .system_title {
    border: 0.5px solid var(--cr25-color-blk);
    padding: min(3vw,20px) 0;
    display: block;
    text-align: center;
    margin-top: min(8vw, 60px);
    font-size: clamp(1.2rem, 1.109rem + 0.284vw, 1.4rem);
}
#capsule-renewal-2025 #future .sustainable_system .system_img {
    margin: min(30px,4vw) 0 min(60px,10vw);
}

#capsule-renewal-2025 #new-lineup {
    background-color: var(--cr25-color-gry);
}
#capsule-renewal-2025 #new-lineup h3 img{
    width: auto;
    height: min(5vw,34px);
    object-fit: contain;
    margin-bottom: min(10vw,60px);
}
#capsule-renewal-2025 #new-lineup .new_lineup_list{
    margin-bottom: min(12vw,60px);
}
#capsule-renewal-2025 #new-lineup .series {
    margin-bottom: min(5vw,20px);
}
#capsule-renewal-2025 #new-lineup .series p.first {
    font-size: clamp(1.3rem, 1.209rem + 0.284vw, 1.5rem);
    padding-bottom: min(2vw,10px);
    display: flex;
    align-items: center;
    gap: min(2vw,10px);
}
#capsule-renewal-2025 #new-lineup .series p.first::after {
    content: "";
    display: block;
    height: 1px;
    background-color: var(--cr25-color-blk);
    flex-grow: 100;
}
#capsule-renewal-2025 #new-lineup .series p.second {
    line-height: 1.6;
    font-size: clamp(1.1rem, 0.964rem + 0.426vw, 1.4rem);
    font-weight: normal;
    padding-bottom: min(10px,2vw);
}
#capsule-renewal-2025 #new-lineup .new_lineup_list > ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: min(3vw,20px);
    flex: 20;
}
@media screen and (min-width: 767px) {
    #capsule-renewal-2025 #new-lineup .new_lineup_list > ul {
        grid-template-columns: repeat(5, 1fr);
    }
}
#capsule-renewal-2025 #new-lineup .new_lineup_list > ul > li {
    display: flex;
}
#capsule-renewal-2025 #new-lineup .new_lineup_list .lineup_modal {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    padding: min(6vw, 40px) min(3vw, 20px) min(5vw, 30px);
    flex-grow: 1;
}
#capsule-renewal-2025 #new-lineup .new_lineup_list .lineup_modal .label {
    position: absolute;
    top: min(3vw,20px);
    left: 0;
}
#capsule-renewal-2025 #new-lineup .new_lineup_list .lineup_modal .label img {
    height: min(4vw,20px);
    width: auto;
}
#capsule-renewal-2025 #new-lineup .new_lineup_list .lineup_modal .btn {
    position: absolute;
    top: min(3vw,10px);
    right: min(3vw, 10px);
    width: min(6vw, 30px);
}
#capsule-renewal-2025 #new-lineup .new_lineup_list .lineup_modal .capsule_name {
    font-size: clamp(1.4rem, 1.355rem + 0.142vw, 1.5rem)    ;
    text-align: center;
    line-height: 1.2;
    padding-top: min(2vw,10px);
    flex-grow: 1;
}
#capsule-renewal-2025 #new-lineup .new_lineup_list .lineup_modal .capsule_name > span {
font-size: clamp(1rem, 0.909rem + 0.284vw, 1.2rem);
padding-bottom: min(1vw, 6px);
display: inline-block;
}
#capsule-renewal-2025 #new-lineup .new_lineup_list .lineup_modal .date {
    text-align: center;
    color: var(--cr25-color-red);
    padding-top: min(3vw,20px);
}
#capsule_modal {
    display: none;
}
.modaal-wrapper {
    z-index: 1002;
}
.modaal-inner-wrapper {
    padding-top: 24px;
    padding-bottom: 24px;
}
.map_modal_wrap .modaal-inner-wrapper {
    padding: 24px 18px;
}
.modaal-container {
    margin: 0 auto;
    background: none;
    box-shadow: none;
}
.lineup_modal_wrap .modaal-container {
    max-width: 460px;
}
.map_modal_wrap .modaal-container {
    max-width: 600px;
}
.modaal-content-container {
    padding: 0;
}
.modal_wrap {
    position: relative;
    background-color: #fff;
    padding: min(60px,10vw) min(40px,6vw);;
    border-radius: 16px;
    color: var(--cr25-color-blk);
    font-family: var(--cr25-font-en), var(--cr25-font-jp);
    font-weight: 500;
    font-feature-settings: "palt";
}
.modal_wrap .modal_close > span {
    display: block;
    text-indent: -9999px;
}
.modal_wrap .label {
    position: absolute;
    left: 0;
    top: min(5vw,20px);
    width: 100%;
    display: flex;
    align-items: center;
    gap: min(5px,2vw);
    color: var(--cr25-color-red);
    font-size: clamp(1.1rem, 1.009rem + 0.284vw, 1.3rem);
}
.modal_wrap .label > img {
    width: min(19vw,113px);
}
.modal_wrap figure {
    width: min(210px,38vw);
    margin: 0 auto;
}
.modal_wrap figure.map {
    width: 100%;
    margin: 0 auto;
}
.modal_wrap figure img {
    max-width: 100%;
}
.modal_wrap p {
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    font-size: clamp(1.4rem, 1.309rem + 0.284vw, 1.6rem);
}
.modal_wrap .capsule_detail {
    margin-top: min(2vw,30px);
}
.modal_wrap .capsule_name {
    font-size: clamp(1.8rem, 1.709rem + 0.284vw, 2rem);
    font-weight: 800;
    text-align: center;
    margin-bottom: min(3vw,15px);
    line-height: 1.4;
}
.modal_wrap .capsule_name > span {
    font-size: clamp(1.2rem, 1.109rem + 0.284vw, 1.4rem);
}
.modal_wrap .capsule_detail .detail {
    display: flex;
    width: min(340px,100%);
    margin: min(4vw,30px) auto 0;
}
.modal_wrap .detail p {
    font-size: clamp(1.2rem, 1.109rem + 0.284vw, 1.4rem);
    text-align: center;
}
.modal_wrap .feature,
.modal_wrap .flavor {
    flex: 1;
}
.modal_wrap .capsule_detail .detail .ttl {
    padding-bottom: min(1vw,10px);
    font-weight: 600;
}
.modal_wrap .feature > ul > li {
    display: flex;
    align-items: center;
    gap: min(3vw,10px);
    justify-content: center;
}
.modal_wrap .feature > ul > li > p > span {
    color: var(--cr25-color-gry);
}
.modal_wrap .feature > ul > li > p > span.red {
    color: var(--cr25-color-red);
}
.modaal-overlay {
    z-index: 1001;
}
.modaal-close {
    position: absolute;
    top: -45px;
    right: -15px;
}
.modaal-close:after, 
.modaal-close:before {
    background: var(--cr25-color-d-gry); 
    width: min(1px,1vw);
    height: min(30px,6vw);
    top: 5px;
}
.modaal-close:focus, .modaal-close:hover {
    background-color: transparent;
}
.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
    background: #fff;
}