@charset "utf-8";


/* eyecatch */
.eyecatch {
    margin: 0 auto;
    width: 100%;
    position: relative;
}
.eyecatch-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.eyecatch_txt {
    position: absolute;
    margin: 0 auto;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: min(50vw/12, 50px);
    color: #fff;
    font-weight: 700;
    text-align: center;
}
.eyecatch_txt span {
    font-size: min(32vw/12, 32px);
}
@media(min-width:1201px) {
    .eyecatch-inner {
        max-width: 1920px;
    }
}
@media(max-width:780px) {
    .eyecatch-inner {
        max-width: 780px;
    }
    .eyecatch_txt {
        font-size: min(54vw/7.8, 54px);
        line-height: 1em;
    }
    .eyecatch_txt span {
        font-size: min(30vw/7.8, 30px);
    }
} 


/* **********
    howto-title
 ********** */
.howto-title {
    display: flex;
    align-items: center;
    text-align: center;
    margin-bottom: min(20vw/12, 20px);
}
.howto-title h2 {
    font-size: min(50vw/12, 50px);
    font-weight: 700;
    letter-spacing: 0.01em;
    font-weight: 700;
    line-height: 0.6em;
    color: #7c050b;
}
.howto-title::before,
.howto-title::after {
    content:"";
    flex-grow: 1;  /* 線の伸び率 */
    border-bottom: min(3vw/12, 3px) solid #7c050b;
}
.howto-title::before{
    margin-right: min(20vw/12, 20px);
    padding-left: min(20vw/12, 20px);
}
.howto-title::after{
    margin-left: min(20vw/12, 20px);
    padding-right: min(20vw/12, 20px);
}
.title-cap {
    font-size: min(26vw/12, 26px);
    font-weight: 700;
    line-height: 1.375;
    letter-spacing: 0.02em;
    /* display: inline-block; */
    flex-shrink: 0;
    margin: 0 auto;
    color: #7c050b;
}
@media(max-width:780px) {
    .howto-title {
        margin: 0 calc(50% - 50vw) min(20vw/7.8, 20px);
    }
    .howto-title h2 {
        font-size: min(62vw/7.8, 62px);
    }
    .howto-title::before,
    .howto-title::after {
        border-bottom: min(3vw/7.8, 3px) solid #7c050b;
    }
    .howto-title::before{
        margin-right: min(20vw/7.8, 20px);
        padding-left: min(20vw/7.8, 20px);
    }
    .howto-title::after{
        margin-left: min(20vw/7.8, 20px);
        padding-right: min(20vw/7.8, 20px);
    }
    .title-cap {
        font-size: min(30vw/7.8, 30px);
    }
}


/* **********
    howto
 ********** */
.howto {
    max-width: 1200px;
    margin: 0 auto;
}
.howto-inner {
    padding: min(140vw/12, 140px) min(80vw/12, 80px) min(120vw/12, 120px);
    position: relative;
}
@media(max-width:780px) {
    .howto {
        max-width: 780px;
    }
    .howto-inner {
        padding: min(140vw/7.8, 140px) min(40vw/7.8, 40px) min(120vw/7.8, 120px);
        position: relative;
    }
}


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

 /* bake-wrap */
.bake-wrap {
    padding: min(20vw/12, 20px) min(40vw/12, 40px) min(120vw/12, 120px);
}
.bake-prep {
    padding: min(10vw/12, 10px);
    font-size: min(20vw/12, 20px);
    border: solid min(2vw/12, 2px) #7d0a0a;
    margin-bottom: min(40vw/12, 40px);
}
.bake-prep span {
    font-size: min(22vw/12, 22px);
    font-weight: 700;
    color: #7d0a0a;
}
.bake-area {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: min(60vw/12, 60px);
    justify-content: space-between;
    margin-bottom: min(60vw/12, 60px);
}
.bake-area02 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: min(60vw/12, 60px);
    justify-content: space-between;
}
.bake-txt_area .bake-txt_area_title img {
    width: min(248vw/12, 248px);
    height: min(87vw/12, 87px);
}
.bake-area_thumb img {
    width: min(300vw/12, 300px);
    height: min(300vw/12, 300px);
}
.bake-area_thumb02 img {
    width: min(588vw/12, 588px);
    height: min(332vw/12, 332px);
}
.bake-txt_box {
    position: relative;
    padding: min(20vw/12, 20px);
}
.bake-txt_box p {
    font-size: min(20vw/12, 20px);
    line-height: 1.55em;
    color: #131313;
}
.bake-txt_box span {
    color:#bf3131;
    font-weight: 700;
}
.bake-txt_box .bake-txt_cap {
    padding-top: min(20vw/12, 20px);
    font-size: min(18vw/12, 18px);
    color:#bf3131;
    font-weight: 700;
}
@media(max-width:780px) {
    .bake-wrap {
        padding: min(40vw/7.8, 20px) 0 min(140vw/7.8, 140px);
    }
    .bake-prep {
        padding: min(10vw/7.8, 10px);
        font-size: min(30vw/7.8, 30px);
        border: solid min(2vw/7.8, 2px) #7d0a0a;
        margin-bottom: min(40vw/7.8, 40px);
    }
    .bake-prep span {
        font-size: min(30vw/7.8, 30px);
    }
    .bake-area {
        grid-template-columns: 1fr;
        gap: min(20vw/7.8, 20px);
        justify-content: space-between;
        margin-bottom: min(80vw/7.8, 80px);
    }
    .bake-area02 {
        grid-template-columns: 1fr;
        gap: min(20vw/7.8, 20px);
    }
    .bake-txt_area .bake-txt_area_title img {
        width: min(370vw/7.8, 370px);
        height: min(130vw/7.8, 130px);
    }
    .bake-area_thumb {
        margin: 0 auto;
    }
    .bake-area_thumb img {
        width: min(580vw/7.8, 580px);
        height: min(580vw/7.8, 580px);
    }
    .bake-area_thumb02 {
        margin: 0 calc(50% - 50vw);
    }
    .bake-area_thumb02 img {
        width: min(780vw/7.8, 780px);
        height: min(500vw/7.8, 500px);
    }
    .bake-txt_box {
        position: relative;
        padding: min(20vw/7.8, 20px);
    }
    .bake-txt_box p {
        font-size: min(36vw/7.8, 36px);
    }
    .bake-txt_box .bake-txt_cap {
        padding-top: min(20vw/7.8, 20px);
        font-size: min(32vw/7.8, 32px);
    }
}


/* point */
.point-wrap {
    padding: min(40vw/12, 40px) min(60vw/12, 60px);
    background-color: #ffffff;
    border: min(2vw/12, 2px) solid #131313;
    position: relative;
    margin-bottom: min(140vw/12, 140px);
}
.point-wrap::after {
    content: "";
    position: absolute;
    bottom: max(-16vw/12, -16px);
    right: max(-16vw/12, -16px);
    background: url(../img/icon_pig.png) no-repeat;
    background-size: cover;
    width: min(133vw/12, 133px);
    height: min(108vw/12, 108px);
}
.point-wrap .point-title {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    font-size: clamp(1.875rem, 1.121rem + 1.54vw, 2.125rem);
    padding: 0 min(40vw/12, 40px);
    background-image: url(../img/bg_img.png);
    transform: translateY(-80%) translateX(40%);
}
.point-wrap .point-title h2 {
    font-weight: 700;
    color: #7c050b;
    padding-right: min(10vw/12, 10px);
}
.point-wrap .point-title > img {
    width: min(184vw/12, 184px);
    height: min(84vw/12, 84px);
}
.point-area_txt li {
    position: relative;
    line-height: 1.95em;
    text-indent: 1em;
    padding-bottom: min(40vw/12, 40px);
    font-size: min(18vw/12, 18px);
}
.point-area_txt li:before {
    content: "";
    position: absolute;
    top: .7em;
    left: 0;
    width: min(4vw/12, 4px);
    height: min(4vw/12, 4px);
    background-color: #131313;
    border-radius: 50%;
}
.point-area_txt span {
    color:#bf3131;
    font-weight: 700;
}
@media(max-width:780px) {
    .point-wrap {
        padding: min(40vw/7.8, 40px) min(40vw/7.8, 40px);
        border: min(2vw/7.8, 2px) solid #131313;
        margin-bottom: min(140vw/7.8, 140px);
    }
    .point-wrap::after {
        bottom: max(-16vw/7.8, -16px);
        right: max(-16vw/7.8, -16px);
        width: min(117vw/7.8, 117px);
        height: min(106vw/7.8, 106px);
        background-size: contain;
    }
    .point-wrap .point-title {
        font-size: min(44vw/7.8, 44px);
        padding: 0 min(20vw/7.8, 20px);
        transform: translateY(-80%) translateX(10%);
    }
    .point-wrap .point-title h2 {
        padding-right: min(10vw/7.8, 10px);
    }
    .point-wrap .point-title > img {
        width: min(184vw/7.8, 184px);
        height: min(84vw/7.8, 84px);
    }
    .point-area_txt li {
        padding-bottom: min(40vw/7.8, 40px);
        font-size: min(34vw/7.8, 34px);
    }
    .point-area_txt li:before {
        width: min(4vw/7.8, 4px);
        height: min(4vw/7.8, 4px);
    }
}


/* **************
    eat-area
 ************** */
.eat-icon {
    position: relative;
    text-align: center;
    padding-top: min(80vw/12, 80px);
    padding-bottom: min(20vw/12, 20px);
}
.eat-icon::before {
    content: "";
    background-image: url(../img/icon_text02.png);
    width: min(97vw/12, 97px);
    height: min(35vw/12, 35px);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: min(40vw/12, 40px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.eat-area {
    display: flex;
    flex-direction: column;
    padding-top: min(20vw/12, 20px);
}
.eat-txt-area {
    padding: min(40vw/12, 40px) min(40vw/12, 40px) min(100vw/12, 100px);
    background-color: #f4e8c9; 
    position: relative;
}
.eat-txt-area li {
    width: 60%;
    position: relative;
    line-height: 1.75em;
    text-indent: 1em;
    padding-bottom: min(40vw/12, 40px);
    font-size: min(20vw/12, 20px);
}
.eat-txt-area li:before {
    content: "";
    position: absolute;
    top: .6em;
    left: 0;
    width: min(8vw/12, 8px);
    height: min(8vw/12, 8px);
    background-color: #bf3131;
    border-radius: 50%;
}
.eat-txt-area li span {
    color:#bf3131;
    font-weight: 700;
}
.eat-txt_cap {
    color:#bf3131;
    font-weight: 700;
    font-size: min(20vw/12, 20px);
    width: 60%;
}
.eat-area_pic01 {
    position: absolute;
    bottom: min(330vw/12, 330px);
    right: max(-40vw/12, -40px);
    z-index: 2;
}
.eat-area_pic01 img {
    width: min(380vw/12, 380px);
    height: min(380vw/12, 380px);
}
.eat-area_pic02 {
    position: absolute;
    bottom: min(220vw/12, 220px);
    right: min(180vw/12, 180px);
    z-index: 3;
}
.eat-area_pic02 img {
    width: min(180vw/12, 180px);
    height: min(180vw/12, 180px);
}
.eat-area_pic03 {
    position: absolute;
    bottom: min(60vw/12, 60px);
    right: max(-20vw/12, -20px);
}
.eat-area_pic03 img {
    width: min(180vw/12, 180px);
    height: min(180vw/12, 180px);
}
.eat-area_pic04 {
    position: absolute;
    bottom: max(-40vw/12, -40px);
    right: min(240vw/12, 240px);
}
.eat-area_pic04 img {
    width: min(220vw/12, 220px);
    height: min(220vw/12, 220px);
}
@media(max-width:780px) {
    .eat-icon {
        padding-top: min(80vw/7.8, 80px);
        padding-bottom: min(20vw/7.8, 20px);
    }
    .eat-icon::before {
        width: min(97vw/7.8, 97px);
        height: min(35vw/7.8, 35px);
        top: min(40vw/7.8, 40px);
    }
    .eat-area {
        padding-top: min(40vw/7.8, 40px);
    }
    .eat-area_thumb {
        display: flex;
        align-items: center;
        margin: 0 calc(50% - 50vw) min(40vw/7.8, 40px);
    }
    .eat-txt-area {
        padding: min(40vw/7.8, 40px) min(40vw/7.8, 40px) min(60vw/7.8, 60px);
    }
    .eat-txt-area li {
        padding-bottom: min(40vw/7.8, 40px);
        font-size: min(34vw/7.8, 34px);
        width: 100%;
    }
    .eat-txt-area li:before {
        content: "";
        position: absolute;
        top: .6em;
        left: 0;
        width: min(8vw/7.8, 8px);
        height: min(8vw/7.8, 8px);
        border-radius: 50%;
    }
    .eat-txt_cap {
        padding-top: min(440vw/7.8, 440px);
        font-size: min(30vw/7.8, 30px);
        width: 100%;
    }
    .eat-area_pic01 {
        position: absolute;
        bottom: min(220vw/7.8, 220px);
        left: max(-60vw/7.8, -60px);
    }
    .eat-area_pic01 img {
        width: min(380vw/7.8, 380px);
        height: min(380vw/7.8, 380px);
    }
    .eat-area_pic02 {
        position: absolute;
        bottom: min(380vw/7.8, 380px);
        left: min(260vw/7.8, 260px);
        z-index: 3;
    }
    .eat-area_pic02 img {
        width: min(180vw/7.8, 180px);
        height: min(180vw/7.8, 180px);
    }
    .eat-area_pic03 {
        position: absolute;
        bottom: min(200vw/7.8, 200px);
        right: min(140vw/7.8, 140px);
        z-index: 3;
    }
    .eat-area_pic03 img {
        width: min(180vw/7.8, 180px);
        height: min(180vw/7.8, 180px);
    }
    .eat-area_pic04 {
        position: absolute;
        bottom: min(320vw/7.8, 320px);
        right: max(-20vw/7.8, -20px);
    }
    .eat-area_pic04 img {
        width: min(220vw/7.8, 220px);
        height: min(220vw/7.8, 220px);
    }
}