@charset "UTF-8";

@media (min-width: 2161px) {
    html {
		font-size: 100px;
    }
}
@media (min-width: 1201px) and (max-width: 2160px){
    html {
        font-size: calc(100 / 2160 * 100vw);
    }
}
@media (max-width: 1200px) {
    html {
        font-size: calc(1200 / 2160 * 100px);
    }
}
body {
    font-size: 16px;
}
#footer {
    z-index: 15;
    margin-top: -10px;
}

.frenchrusk_content {
    margin-top: -10px;
	/* font-feature-settings: 'palt'; */
    letter-spacing: 0.1em;
    min-width: 1200px;
}
.font_serif {
	font-family: 'Noto Serif JP', serif;
}
.font_sans {
	font-family: 'Noto Sans JP', sans-serif;
}
.frenchrusk_content img {
    max-width: 100%;
    height: auto;
}
.frenchrusk_section_inner {
    max-width: 19.2rem;
    margin: 0 auto;
}

/* mv */
.frenchrusk_mv {
    background: url(../img/pc/product/frenchrusk/bg_dairiseki.jpg) repeat center bottom; 
    background-size: 100% auto;
    position: relative;
    text-align: center;
}
.frenchrusk_mv_inner {
    max-width: 21.6rem;
    position: relative;
    margin: auto;
}

[class].frenchrusk_mv_logo {
    position: absolute;
    top: 22.6%;
    right: 36.5%;
    z-index: 2;
    width: 27.037037%;
}
[class].frenchrusk_mv_logo img {
    width: 100%;
}
[class].frenchrusk_mv_pkg {
    position: absolute;
    top: 31.3%;
    right: 54%;
    max-width: 18.61111%;
    z-index: 2;
    margin-right: -9rem;
}

/* about */
.frenchrusk_about {
    background: url(../img/pc/product/frenchrusk/bg_pt1.jpg) repeat center top;
    background-size: 1.42rem auto;
    position: relative;
    padding-top: 2.74rem; 
    padding-bottom: 2.85rem;
}
.bg_wave_dairiseki {
    background: url(../img/pc/product/frenchrusk/bg_wave_dairiseki.png) no-repeat center top;
    background-size: 100% 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1; 
}
.frenchrusk_about_box {
    margin: auto;
    width: 10.82rem;
    text-align: center;
    color: #380000;
    padding: 0.76rem 0;
    position: relative;
}
.frenchrusk_about_box_in {
    background:  url(../img/pc/product/frenchrusk/bg_about_middle.png) repeat-y center bottom;
    background-size: 100% auto;
    padding: 0.79rem 0 0.57rem;
}
.frenchrusk_about_box::before,
.frenchrusk_about_box::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    height: 0.76rem;
    width: 100%;
}
.frenchrusk_about_box::before {
    background: url(../img/pc/product/frenchrusk/bg_about_top.png) no-repeat center top;
    background-size: 100% auto;
    top: 1px;
}
.frenchrusk_about_box::after {
    background:  url(../img/pc/product/frenchrusk/bg_about_bottom.png) no-repeat center bottom;
    background-size: 100% auto;
    bottom: 1px;
}
.frenchrusk_about_ttl {
    width: 7rem;
    margin: auto;
}
.frenchrusk_about_txt {
    line-height: 2.1818;
    font-size: 0.33rem;
    font-weight: 500;
    margin-top: 0.72rem;
    letter-spacing: 0.1em;
}
.frenchrusk_about_pkg {
    width: 3.77rem;
    margin-top: 0.8rem;
    margin-left: -0.18rem;
}

/* time */
.frenchrusk_time {
    background: url(../img/pc/product/frenchrusk/bg_pt2.jpg) repeat center top;
    background-size: 0.89rem auto;
    position: relative;
}
.bg_wave_tricolor_1,
.bg_wave_tricolor_2 {
    position: absolute;
    height: 2.68rem;
    width: 100%;
}
.bg_wave_tricolor_1 {
    background: url(../img/pc/product/frenchrusk/bg_wave_tricolor_1.png) no-repeat center top;
    background-size: 100% 2.68rem;
    top: -1rem;
}
.bg_wave_tricolor_2 {
    background: url(../img/pc/product/frenchrusk/bg_wave_tricolor_2.png) no-repeat center top;
    background-size: 100% 2.68rem;
    bottom:  -1.35rem;
}
.frenchrusk_time_box {
    color: #380000;
    margin: auto;
    text-align: center;
    width: 10.8rem;
    padding: 1.02rem 0;
    text-align: center;
    position: relative;
}
.frenchrusk_time_box_in {
    background:  url(../img/pc/product/frenchrusk/bg_time_middle.png) repeat-y center bottom;
    background-size: 100% auto;
    padding: 0.65rem 0 0.45rem;
}
.frenchrusk_time_box::before,
.frenchrusk_time_box::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    height: 1.02rem;
    width: 100%;
}
.frenchrusk_time_box::before {
    background: url(../img/pc/product/frenchrusk/bg_time_top.png) no-repeat center top;
    background-size: 100% auto;
    top: 1px;
}
.frenchrusk_time_box::after {
    background:  url(../img/pc/product/frenchrusk/bg_time_bottom.png) no-repeat center bottom;
    background-size: 100% auto;
    bottom: 1px;
}

.frenchrusk_time_inner {
    padding: 2.37rem 0 2.27rem;
}
.frenchrusk_time_ttl {
    width: 7.62rem;
    text-align: center;
    margin: auto;
}
.frenchrusk_time_img {
    width: 3.54rem;
    margin-top: 0.66rem;
}
.frenchrusk_time_txt {
    font-size: 0.33rem;
    font-weight: 500;
    margin-top: 0.57rem;
    line-height: 2.1818;
    letter-spacing: 0.1em;
}

/* recipe */
.frenchrusk_recipe {
    background: url(../img/pc/product/frenchrusk/bg_dairiseki.jpg) repeat center bottom; 
    background-size: 100% auto;
    padding-top: 2.6rem;
    padding-bottom: 1.79rem;
}
.frenchrusk_recipe_ttl {
    width: 8.29rem;
    margin: auto;
}
.frenchrusk_recipe_list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.42rem;
    max-width: 18rem;
    margin: 0.58rem auto 0;
}
.frenchrusk_recipe_list > li {
    width: 5.7rem;
    position: relative;
    text-align: center;
}
.frenchrusk_recipe_btn {
    position: absolute;
    bottom: 0.77rem;
    left: 0;
    right: 0;
    width: 2.4rem;
    height: 0.6rem;
    font-size: 0.24rem;
    font-weight: 500;
    border-radius: 0.3rem;
    margin: auto;
    appearance: none;
    border: none;
    background-color: #fff;
    color: #bd0715;
    letter-spacing: 0.01em;
    padding-right: 0.5rem;
}
.frenchrusk_recipe_btn_icon {
    position: absolute;
    right: 0.13rem;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 0.37rem;
    height: 0.37rem;
    border-radius: 50%;
    display: block;
    background-color: #bd0715;
}
.frenchrusk_recipe_btn_icon::before,
.frenchrusk_recipe_btn_icon::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 0.18rem;
    height: 0.03rem;
    background-color: #fff;
}
.frenchrusk_recipe_btn_icon::after {
    transform: rotate(90deg);
}

/* line up */
.frenchrusk_lineup {
    background: url(../img/pc/product/frenchrusk/bg_pt3.jpg) repeat center top;
    background-size: 1.42rem auto;
    padding: 2.78rem 0 1rem;
    position: relative;
}
.frenchrusk_lineup_ttl {
    display: block;
    text-align: center;
    width: 9.19rem;
    margin: auto;
}
.frenchrusk_lineup_list {
    display: flex;
    justify-content: space-between;
    max-width: 18.1rem;
    margin: 0.85rem auto 0 0.45rem;
}
.frenchrusk_lineup_list > li {
    display: flex; 
    align-items: flex-start;
}
.lineup_img_1 {
    max-width: 5.29rem;
    margin-right: 0.3rem;
}
.lineup_img_2 {
    max-width: 3.28rem;
    margin-right: 0.26rem;
}
.lineup_ttl_1 {
    max-width: 3.23rem;
    margin: auto;
}
.lineup_ttl_2 {
    max-width: 2.6rem;
    margin: auto;
}
.frenchrusk_lineup_txt_wrap {
    text-align: center;
    padding-top: 1.26rem;
    padding-bottom: 1.34rem;
    margin-top: 0.1rem;
    position: relative;
}
.frenchrusk_lineup_txt_wrap::before,
.frenchrusk_lineup_txt_wrap::after {
    content: '';
    position: absolute;
    width: 3.61rem;
    left: 0;
}
.frenchrusk_lineup_txt_wrap::before {
    background: url(../img/pc/product/frenchrusk/bg_lineup_top.svg) no-repeat;
    background-size: contain;
    height: 0.87rem;
    top: 0;
}
.frenchrusk_lineup_txt_wrap::after {
    bottom: 0;
    background: url(../img/pc/product/frenchrusk/bg_lineup_bottom.svg) no-repeat;
    background-size: contain;
    height: 0.86rem;
}
.frenchrusk_lineup_flavor {
    background-color: #baa166;
    color: #bd0715;
    letter-spacing: 0.1em;
    width: 3.6rem;
    padding: 0.045rem 0;
    font-size: 0.24rem;
    font-weight: 700;
    margin-top: 0.25rem;
}
.frenchrusk_lineup_btn {
    font-size: 0.24rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    background-color: #fff;
    color: #142a81;
    letter-spacing: 0.1em;
    width: 2.88rem;
    margin: 0.48rem auto 0;
    height: 0.6rem;
    border-radius: 0.3rem;
    display: block;
    padding: 0.1rem 0 0.1rem 0.25rem;
    box-sizing: border-box;
    position: relative;
}
.frenchrusk_lineup_btn_icon {
    position: absolute;
    right: 0.13rem;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 0.37rem;
    height: 0.37rem;
    border-radius: 50%;
    display: block;
    background-color: #142a81;
}
.frenchrusk_lineup_btn_icon::before,
.frenchrusk_lineup_btn_icon::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 0.18rem;
    height: 0.03rem;
    background-color: #fff;
}
.frenchrusk_lineup_btn_icon::after {
    transform: rotate(90deg);
}
.frenchrusk_lineup_note {
    text-align: right;
    color: #f8f6f2;
    font-size: 0.21rem;
    max-width: 18rem;
    letter-spacing: 0;
    margin: 1.35rem auto 0;
}
@media(hover:hover) {
    .frenchrusk_recipe_btn,
    .frenchrusk_lineup_btn {
        transition: background .3s, color .3s;
    }
    .frenchrusk_recipe_btn:hover {
        cursor: pointer;
        background-color: #bd0715;
        color: #fff;
    }
    .frenchrusk_recipe_btn:hover .frenchrusk_recipe_btn_icon {
        background-color: #fff;
    }
    .frenchrusk_recipe_btn:hover .frenchrusk_recipe_btn_icon::before,
    .frenchrusk_recipe_btn:hover .frenchrusk_recipe_btn_icon::after {
        background-color: #bd0715;
    }
    .frenchrusk_lineup_btn:hover {
        opacity: 1;
        background-color: #142a81;
        color: #fff;
    }
    .frenchrusk_lineup_btn:hover .frenchrusk_lineup_btn_icon {
        background-color: #fff;
    }
    .frenchrusk_lineup_btn:hover .frenchrusk_lineup_btn_icon::before,
    .frenchrusk_lineup_btn:hover .frenchrusk_lineup_btn_icon::after {
        background-color: #142a81;
    }
}

/* ------------
     modal
------------ */
body.is_modal_show {
    overflow: hidden;
}
.modal_content * {
    box-sizing: border-box;
}
.modal_content {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    height: 100%;
    right: 0;
    bottom: 0;
    z-index: 20;
    opacity: 0;
    transform: translateY(100%);
    background: rgba(46, 20, 0, 0.9);
    transition: opacity 0.3s 0s, transform 0s 0.3s;
}
.modal_content.is_modal_show {
    opacity: 1;
    transform: translateY(0%);
    transition: opacity 0.3s 0s, transform 0s 0s;
}
.modal_scroll {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    letter-spacing: -0.5em; /*inline-blockの隙間をなくす*/
}
.modal_scroll_inner {
    text-align: center;
    margin: auto;
    padding: 0.5rem;
    max-width: 19rem;
    min-width: 12rem;
    width: 100%;
    letter-spacing: normal; /* letter-spacing 戻す*/
    line-height: 1.5;
    box-sizing: border-box;
}
.modal_inner {
    background-color: #f8f6f2;
    border: 0.03rem solid #baa166;
    position: relative;
    padding: 0.4rem 1.2rem 0.7rem; /* 内側の余白*/
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}
.is_modal_show .modal_inner {
    opacity: 1;
}
/* centering */
.modal_scroll_inner,
.modal_scroll:after {
    display: inline-block;
    vertical-align: middle;
}
.modal_scroll:after {
    content: '';
    height: 100%;
}
/* close */
.modal_close {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #baa166;
    border: none;
    width: 0.96rem;
    height: 0.96rem;
    cursor: pointer;
}
.modal_close::before,
.modal_close::after {
    content: "";
    display: block;
    width: 0.6rem;
    height: 0.03rem;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.modal_close::before {
    rotate: 0 0 1 45deg;
}
.modal_close::after {
    rotate: 0 0 1 -45deg;
}

.modal_ttl {
    margin: auto;
}
.modal_ttl_1 {
    width: 5.52rem;
}
.modal_ttl_2 {
    width: 4.31rem;
}
.modal_ttl_3 {
    width: 4.72rem;
}
.modal_ttl_4 {
    width: 4.09rem;
}
.modal_ttl_5 {
    width: 4.13rem;
}
.modal_ttl_6 {
    width: 10.11rem;
}
.modal_ttl_7 {
    width: 6.18rem;
}
.modal_ttl_8 {
    width: 6.58rem;
}
.modal_ttl_9 {
    width: 7.08rem;
}
.modal_recipe_box {
    display: flex;
    margin-top: 0.38rem;
}
.modal_recipe_img_wrap {
    width: 50.16%;
}
.modal_recipe_txt_wrap {
    width: 49.84%;
    text-align: left;
    padding: 0.04rem 0 0 0.64rem;
}
.modal_recipe_steps_ttl {
    width: 1.18rem;
    margin-top: 0.47rem;
}
.modal_recipe_ingredients_ttl_wrap {
    display: flex;
    align-items: center;
}
.modal_recipe_ingredients_ttl_txt {
    margin-left: 0.1rem;
    font-size: 0.24rem;
}
.modal_recipe_ingredients_wrap {
    display: flex;
    flex-wrap: wrap;
}
.modal_recipe_ingredients_wrap > .modal_recipe_ingredients {
    width:50%;
    min-width: 150px;
}
.modal_recipe_steps,
.modal_recipe_ingredients {
    font-size: 0.24rem;
    font-weight: 500;
    line-height: 2;
    margin-top: 0.2rem;
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
}
.modal_recipe_ingredients > li {
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1.5;
}
.modal_recipe_ingredients > li + li {
    margin-top:0.1rem;
}
.modal_recipe_steps {
    margin-top: 0.23rem;
}
.modal_recipe_steps > li {
    padding-left: 1.4em;
    text-indent: -1.4em;
}
.modal_recipe_steps .modal_recipe_steps_small {
    font-size: 0.2rem;
    padding-left: 0;
    text-indent: 0;
    margin-top: 0.06rem;
}
.modal_recipe_ingredients_ttl {
    width: 0.88rem;
    margin-top: -0.06rem;
}
.modal_recipe_ingredients {
    width: 102%;
}
.modal_btn_print {
    color: #fff;
    font-size: 0.24rem;
    letter-spacing: 0.08em;
    display: inline-block;
    text-decoration: none;
    padding: 0.12rem 0 0.12rem 0.36rem;
    border-radius: 0.3rem;
    width: 2.2rem;
    text-align: left;
    margin-top: 0.64rem;
    background:#baa166 url(../img/pc/product/frenchrusk/icon_printer.svg) no-repeat right 0.3rem center;
    background-size: 0.34rem auto;
}

/*print*/
@media print{
    body {
        zoom: 100%;
    }
    #header,
    #footer,
    .frenchrusk_mv,
    .frenchrusk_about,
    .frenchrusk_time,
    .frenchrusk_recipe,
    .frenchrusk_lineup,
    .modal_btn_print { 
        display: none;
    }
    .modal_scroll_inner, 
    .modal_scroll:after  {
        vertical-align: top;
    }
    .modal_scroll_inner {
        padding: 0;
    }
    .modal_content {
        background-color: #fff;
    }
    .modal_inner {
        border: none;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
    .modal_recipe_img_wrap {
        width: 40%;
    }
    .modal_recipe_txt_wrap {
        width: 60%;
        padding: 0.04rem 0 0 0.32rem;
    }
}