/* 
Theme Name:Vieni KANDA
Template: VieniKANDA
Theme URI:
Description:グルテンフリーイタリアンVieni KANDAのHP
Author:Vieni KANDA
*/

@charset "utf-8";

/* --common-- */
:root{
    --main-color:#665A1A;
    --section-color:#395A4D;
    --main-backcolor:#EEE7E0;
    --point-color:#97484B;
    --point-color-org:#DD8359;
}
html{
    font-size: 62.5%;
    scroll-padding-top: 113px;
}

body{
    font-family: "Noto Serif JP",
                 "Cardo",
                  serif;
    font-style: normal;
    font-weight: 300;
    color: #2F2F2F;
    background-color: #FFF;
    line-height: 1.5;
    color: var(--main-color);
    margin:0;
    font-size: 1.6rem;
    padding: 0;
}

img{
    max-width: 100%;
    height: auto;
}

p,h4{
    margin:0;
}

.section__topic{
    color:var(--main-color);
    font-family: Cardo,"Arial";
}

.main{
    overflow: hidden;
}
/* -- PC common 終わり -- */

/* -- SP common -- */
@media screen and(max-width:769px) {
}

/************************/
/*** -- index.html -- ***/
/************************/

/* header */

.header{
    padding:8px 5.8% 12px 4.4%;
    background-color: var(--main-backcolor);
    display: flex;
    justify-content: space-between;
    align-items:flex-end;
    box-sizing: border-box;
    position:sticky;
    top:0;
    z-index: 1000;

}

.logo{
    width:78px;
    height:74px;
}

.nav__header,.nav__footer{
    display:none;
}

.header__btn,.header__closebtn{
    display:none;
    width: 16px;
    height: 16px;

}


.nav__list{
    display:flex;
    gap:48px;
    list-style: none;
    margin-top:24px;
    margin-bottom: 8px;
}

.nav__item > a{
    text-decoration: none;
    font-family: Cardo , "Arial";
    color: var(--main-color);
    font-size: 1.8rem;
    font-weight: 700;
    z-index: 10;
    position:relative;
}

.nav__item{
    position:relative;
}

.nav__item img{
    width: 47.14px;
    height: 61.09px;
    position:absolute;
    top:0;
    right: 0;
    bottom:0;
    left: 0;
    margin:auto;
    opacity: 0;
    z-index: 1;
    transform: rotateX(-40deg);
}

.nav__item--menutopic{
    display: none;
}

/* -- PC 終わり header -- */

/* -- SP header -- */
@media screen and (max-width:769px)  {
    .body{
        font-weight:400;
    }
    /* .nav__logo{
        margin:0 auto;
        width: 62px;
        height: 64px;
    } */

    .logo{
        margin:0 auto;
        width: 62px;
        height: 64px;
        margin-top:9px;
    }
    
    .header__btn{
        display:block;
        margin-right:0;
        position:absolute;
        top:50%;
        right: 5.6%;
        transform:translateY(-50%);
        cursor: pointer;
    }
    .header__closebtn{
        display: none;
        margin-right:0;
        position:absolute;
        top:50%;
        right: 5.6%;
        transform:translateY(-50%);
        cursor: pointer;

    }

    .nav{
        background:rgba(255, 255, 255, 0.9);
        width: 100%;
        height: 100vh;
        position:fixed;
        left:0;
        top:93px;
        z-index:100;
        transform: translateX(200%);
        transition: transform 0.4s;
    } 

    .nav.active{
        transform:translateX(0);
    }

    .nav__list{
        display: flex;
        flex-direction: column;
        text-align: center;
        font-size: 1.8rem;
        padding:0;
        align-items: center;
        margin-top:48px;
    }

    .nav__item--menutopic{
        display:flex;
        flex-direction: column;

    }

    .menutopic{
        display: block;
        font-weight: 400;
        font-size: 1.4rem;
        text-decoration: none;
        line-height: 3;
        color: var(--main-color);
    }
    
}

/* main */
.sideWord{
    display: block;
    position:absolute;
    left:-350px;
    top:700px;
    opacity: 0.3;
    transform:rotate(90deg);
    font-size: 10rem;
    color: var(--main-backcolor);
    z-index: 500;
    font-weight: 400;
    text-shadow: .05rem .05rem 1em #916b4a,  -.05rem -.05rem 1em #916b4a, 2px 2px 4px #916b4a;

}

.green{
    color: 	#009246;
}

.red{
    color:#ce2b37;
}

.showImg_pc{
    margin:0;
    height: 665px;
    overflow: hidden;
    position:relative;
    background-color: var(--main-backcolor);
}

.showImg_sp{
    margin:0;
    /* height: calc(100vh - 93px); */
    height: 60vh;
    width:100%;
    overflow: hidden;
    position:relative;
    display: none;
    background-color: var(--backcolor-color);
    object-fit: contain;
}


.mainImg_pc{
    display: block;
    object-fit: cover;
    height: 100%;
    width: 100%;
    position:absolute;
    /* overflow: hidden; */
}

.mainImg{
    position:relative;
}

.catchcopy{
    position:absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 200px;
    height: 200px;
}


.mainTopics{
    padding-top: 101px;
    padding-bottom:101px;
    position:relative;
    width: 100%;
    text-align: center;
}

.mainTopics__txt{
    text-align: center;
    width: 56%;
    margin:0 auto;
    line-height: 2;
    font-weight: 200;
}

.spBr{
    display: none;
}


.mainChefImg{
    text-align: center;
    position:absolute;
    top:124px;
    right:5%;
}

.mainChefImg__image{
    width: 167px;
    height: 201px;
}

.chefImg{
    object-position: 10% top;
}
/* -- PC 終わり main -- */

/* -- SP main-- */
@media screen and (max-width:769px)  {
    .sideWord{
        font-size:7rem;
        left:-260px;
        top:800px;
    }
    
    .mainImg{
        display: block;
        object-fit: cover;
        width: 100%;
        text-align: center;
    }

    .mainImg_sp{
        display: block;
        object-fit: cover;
        height: 60vh;
        width: 100%;
        position:absolute;
        overflow: hidden;
    }

    .showImg_pc{
        display: none;
    }
    .showImg_sp{
        display: block;
    }
    
    .spBr{
        display:inline;
    }

    .spBr_none{
        display: none;
    }
    
    .mainTopics{
        padding-top: 24px;
        padding-bottom:48px;
        width: 100%;
        text-align: center;
    }
    
    .mainTopics__txt{
        text-align: center;
        width:100%;
    }
    .mainChefImg{
        display: flex;
        position:static;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        margin-top:24px;
    }
    .mainChefImg__image{
        display: block;
        width:106px;
        height: 126px;
    }
    .mainChefImg__name{
        font-size: 1rem;
    }

    .catchcopy{
        font-size: 4rem;
        width: 120px;
        height: 120px;
        /* position: static;
        transform: none;
        margin-top:24px; */
    }
}
/* --SP main 終わり */

/* section */

.section{
    margin:0 auto;
    padding-bottom: 64px;;
    text-align: center;
}

.section__topic{
    padding-top: 64px;
    padding-bottom: 24px;
}

/* concept */

.conceptTxt__txt{
    font-weight: 700;
    line-height: 2.5;
    color:var(--main-color);
}

.section--concept{
    background-image: url(../img/vegetable.jpg);
    background-size: cover;
}

/* -- SP Concept */
@media screen and (max-width:769px) {
    /* .conceptTxt__txt{
        font-size: 1.4rem;
    }
 */
    .section--concept{
        margin:0;
    }
}


/* news */

.news__topic{
    border-bottom:var(--main-color) 1px solid;
    padding:14px 20px;
    display: flex;
    gap:70px;
}

.news__list{
    text-align: left;
    margin:0 auto;
    width:72%;
}
.news__topic time{
    margin-left:32px;
    width: 130px;
    display: inline-block;
}

.news__topic a{
    display: inline-block;
    text-decoration: none;
    color: var(--main-color);
}
.news__topic a:visited{
    color: var(--main-color);
}
/* -- PC News　終わり */

/* -- SP News */
@media screen and (max-width:769px) {
    .news__list{
        margin:0 4.auto;
        text-align:center;
        font-size: 1.5rem;
        padding:3px 5.6%;
    }

    .news__topic{
        display: block;
        border:none;
        padding: 0;
        margin-bottom:16px;
    }

    .news__topic time{
        margin:0;
    }
    .news__topic a{
        display: block;
        text-decoration: underline;
        margin-top:8px;
    }
}

/* -- SP News 終わり */


/* menu */

.section--menu{
    background:linear-gradient(to bottom,#FFFBF6,var(--main-backcolor));
    position:relative;
}

.precautions{
    background-color: var(--main-backcolor);
    padding: 16px 3.2%;
    margin:auto 13%;
    color: var(--main-color);
    list-style-type: "・";
}

.precautions__list{
    text-align: left;
    line-height: 1.6;
    list-style-type: "・";

}

.menu__btn{
    display: flex;
    /* width: 680px;
    height:160px; */
    width: 600px;
    height: 120px;
    padding: 0;
    margin:32px auto;
}

.menu__link{
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    line-height: 120px;
    margin:0;
    position: relative;
    z-index: 10;
    letter-spacing: 0.1rem;
}

.menu__img{
    width: 50%;
    height: 100%;
    margin:0;
    overflow: hidden;
    cursor: pointer;
}

.menu__img span{
    display: none;
}

.dinnerImg{
    object-position: 0 -35px;
}

.menu__block{
    width: 50%;
    height: 100%;
    background-color: #FFF;
    position:relative;
    cursor: pointer;
}

.imgMenuLink{
    width: 81px;
    height: 88px;
    opacity: 0.3;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.imgLeaf{
    width: 40px;
    height: 75px;
    position:absolute;
    filter: saturate(30%);
    opacity: 0.5;
}
.imgLeaf--leftTop{
    left:0;
    top:0;
    transform:rotateY(180deg);
}

.imgLeaf--rightTop{
    right:0;
    top:0;

}

.imgLeaf--leftBottom{
    left:0;
    bottom:0;
}

.imgLeaf--rightBottom{
    right:0;
    bottom:0;
    transform: rotateY(180deg);
}
/* -- PC menu 終わり -- */

/* -- SP menu -- */
@media screen and (max-width:769px) {
   .precautions{
        margin:auto 3.8%;
        padding: 24px 2.8%;
   }

    .precautions__list{
        text-align: left;
        font-size: 1.4rem;
        line-height: 1.5;
    }

    .imgLeaf{
        width:37.6px;
        height: 65.87px;
    }

    .menu__block{
        display:none;
        cursor: pointer;
    }

    .menu__img{
        width: 280px;
        height: 80px;
        margin:0 auto;
        position:relative;
        cursor: pointer;
    }

    .menu__img img:hover{
        filter:brightness(100%);
    }

    .menu__img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter:brightness(80%);

    }

    .menu__btn{
        flex-direction: column;
        width: auto;
        height:auto;
        column-gap:16px;
        margin:16px auto 0 auto;
    }

    .menu{
        padding: 0;
        margin-top:32px;
    }

    .menu__img--lunch{
        object-fit: cover;
        object-position: center -15px;
    }
    
    .menu__img span{
        position:absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        display: block;
        font-size: 2.4rem;
        font-weight: 700;
        color: #FFF;
        /* -webkit-text-stroke: 1px var(--section-color); */
        text-shadow: .05rem .05rem 1em #916b4a, -.05rem .05rem 1em #916b4a, .05rem -.05rem 1em #916b4a, -.05rem -.05rem 1em #916b4a, 2px 2px 4px #666;

    }

    .bgImg-italy{
        width: 80%;
        height: auto;
    }
}

/* access */

.access__info{
    display:flex;
    align-items: stretch;
    margin:0 auto;   
    justify-content: center;
    padding: 0 5.8%;
}

.map{
    display:block;
    border:0;
    width:50%;
}

.info__address img{
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}

.info{
    text-align: left;
    margin-left:19px;
    line-height: 1.5;
    width: 50%;
    background-image: url(../img/exterior.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
}

.info__storeName{
    margin-top:0;
}

.info__address{
    font-style: normal;
    padding-left:15px;
}

.info__addresstxt{
    padding-left:15px;

}

.directions__item{
    list-style: none;
    padding:11px 0;

}


.directions__item:last-child{
    display: flex;
    gap: 26px;
}

.directions{
    margin:0px;
    padding-left: 20px;
}

.direction__txt--tel{
    font-size: 2rem;
    font-weight: 700;
}

/* -- PC access 終わり -- */

/* -- SP access -- */
@media screen and (max-width:769px) {
    .access__info{
        display: block;
        height: auto;
        padding:0;
    }

    .map{
        width: 100%;
        height: 400px;
    }

    .info{
        text-align: center;
        margin:16px 0;
        width: 100%;

    }

    .info__address{
        padding-left: 0;
    }

    .info__addresstxt{
        padding-left:0;

    }


    .info__storeName{
        font-size: 2rem;
    }

    .directions{
        font-size: 1.4rem;
        line-height: 1.6;
        padding-left: 0;
        font-weight: 400;
    }

    .directions__item:last-child{
        display: block;
    }

    .info__img{
        left:0;
    }
   

}

/* -- SP access 終わり -- */

/* -- PC instagram --  */
.section-instagram{
    margin:0 5.2% 24px;
    padding: 16px 2.4%;
    border: var(--main-backcolor) solid 1px;
}

/* footer 共通 */
.footer{
    padding:22px 5.8% 12px 4.4%;
    background-color: var(--main-backcolor);
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    width: 100vw;
    box-sizing: border-box;
}



.menu__list{
    margin-top:0;
    display:flex;
    gap:48px;
    list-style: none;
    align-items: flex-end;
}

.menu__item > a{
    text-decoration: none;
    font-family: Cardo , "Arial";
    color: var(--section-color);
    font-size: 1.8rem;
    font-weight: 700;
    z-index: 10;
    position:relative;
    color: var(--main-color);
}

.menu__item{
    position:relative;
}

.nav__telsns{
    justify-content: flex-end;
    display: flex;
    font-size: 2rem;
    font-weight: 700;
    gap:35px;
    color: var(--main-color);
}

.copy{
    font-size:1.1rem;
    text-align: center;
}
/* -- PC footer 終わり -- */

/* -- SP footer　共通 -- */
@media screen and (max-width:769px) {
    .footer{
        position:static;
        display: block;
        text-align:center;
        padding:32px 0;
    }

    .menu__list{
        display: block;
        margin: 11px auto;
        text-align: center;
        padding:0;
    }

    .nav__telsns{
        display: block;
        text-align: center;
        margin: 36px auto;
    }

    .nav__telsns a{
        display: block;
        margin-top: 19px;
    }

    .menu__item{
        margin-top:24px;
        font-size: 2rem;
    }
    

}

/* CSSアニメーション */
/* ふわっと表示させる ①下から上へ */
.fadein{

    opacity: 0;
    transform:translateY(30px);
    transition: all 1.5s;

    &.scrollin{
        opacity: 1 !important;
        transform: translateY(0) !important;
      }

}

.fadeinXleft{

    opacity: 0;
    transform:translateX(-30px);
    transition: all 1.5s;

    &.scrollin{
        opacity: 1 !important;
        transform: translateX(0) !important;
      }

}

.fadeinXright{

    opacity: 0;
    transform:translateX(30px);
    transition: all 1.5s;

    &.scrollin{
        opacity: 1 !important;
        transform: translateX(0) !important;
      }

}


/* じんわりシャドウ */
.blur-anime{
    animation: blur-anime 2s linear infinite;
    animation-iteration-count:1;
    text-shadow: 0 0 30px white;
}


/************************/
/*** -- menu.html -- ***/
/************************/

.mainImg-menu_sp{
    display: none;
}

.mainImg-menu{
    position:relative;
}

.mainImg-menu span{
    position:absolute;
    transform:translate(-50%,-50%);
    top:50%;
    right:0;
    font-size: 3.6rem;
    font-weight: 700;
    color:var(--main-backcolor);
    font-family: Cardo;
}

.precautions--menu{
    margin-top:32px;
}

.precautions__caption{
    text-align: center;
    font-size: 1.6rem;
}

.article-menu{
    margin-bottom: 85px;
    color: #524e4d;
}

.alacarte__item--exMenu{
    text-align: right;
}
/* -- PC main 終わり -- */


/* -- SP main -- */
@media screen and (max-width:769px) {
    .mainImg-menu span{
        font-size: 2.8rem;
        right: -30px;
    }

    .precautions--menu{
        padding-right: 16px;
    }
}

/* Lunch */
.section-menu__lunchtitle{
    font-size: 2.4rem;
    font-weight: 700;
    margin-top:22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.section-menu__exp{
    font-size: 1.4rem;
    margin-top:12px;
}

.lunchfork{
    width: 9.52px;
    height: 52px;
    transform: rotate(-20deg);
}

.lunchknife{
    width: 7px;
    height: 52px;
    transform: rotate(20deg);

}
.section-menu__topic{
    margin:64px auto 10px auto;
    text-align:center;
    position:relative;
    width: 198px;
    height: 144px;
}

.section-menu__topic span{
    font-size: 2.4rem;
    font-weight: 700;
    font-family: Cardo;
    position:absolute;
    transform:translate(-50%,-50%);
    top:50%;
    left:50%;
    white-space: nowrap;
}

.section-menu__exp{
    text-align: center;
    text-decoration: underline;
}

.section-menu__caption{
    font-size:2rem;
    text-align: center;
    margin:16px auto;
}

.section-menu__menu{
    margin:auto 9%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:12px 0 62px;
    gap:50px;
}
.lunchset{
    margin:0 auto;
    display: flex;
    gap:32px;
    width: 100%;
    justify-content: center;
    padding-bottom:32px;
}

.lunchset__menu{
    background:linear-gradient(to bottom,var(--main-backcolor),#FFFFFF);
    list-style: none;
    text-align: center;
    padding:22.5px 0 24px;
    border: solid 1px var(--point-color);
    align-items: stretch;
    width: 23%;
    position:relative;
    
}

.lunchset__menu li{
    margin-bottom:12px;
}

.lunchset__menu li:first-child{
    background-color: var(--point-color);
    color: #FFF;
    font-weight: 500;
    font-size: 2.8rem;
    width: 66px;
    text-align: center;
    margin:0 auto 12px;
    line-height: 38px;
}

.lunchset__menu li:nth-child(2){
    font-weight: 700;
    font-size: 2rem;
    text-decoration: underline;
}

.courseSign{
    margin-top:0;
    position: absolute;
    right: 0;
    top:0;
    border-bottom: 60px solid transparent;
    border-right: 60px solid var(--section-color);
}

.courseSignTxt{
    position: absolute;
    top: 12px;
    right: 5px;
    font-size: 1.2rem;
    color: #fff;
    transform: rotate(45deg);
    font-weight: 600;
}

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

.dishImg{
    width: 403px;
    height: 337px;
    display: block;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
    object-fit: cover; /* 画像の比率維持 */
}

.course-menu{
    list-style: none;
    text-align:center;
    padding: 0;
    font-size: 1.8rem;
}

.course-menu__item{
    margin-top:24px;
}

.course-menu__item--lunchset{
    margin-top:12px;
}
.course-menu__item:first-child{
    font-size:2rem;
    font-weight: 700;
    text-decoration: underline;
}

.course-menu__item--lunchset:first-child{
    font-size:2rem;
    font-weight: 700;
}

.course-menu__item--lunchset:last-child{
    margin-top:24px;
}

.course-menu__item--weekday:nth-child(2){
    font-weight: 700;
}

.course-menu__plus{
    text-align:center;
    font-size:1.4rem;
    font-weight: 400;
    margin:auto 5.2%;   
}

.weekday-menu{
    border:1px solid var(--point-color);
    list-style: none;
    padding:16px 0;
    margin:16px 4.3% 0;
    font-size:1.6rem;
}

.course-menu__item--weekday:first-child{
    font-weight: 700;
}

.course-menu__plus--weekday{
    font-size:1.4rem;
    margin:auto 2%;
}

/* PC lunch&dinner 終わり */


/* -- SP lunch&dinner -- */
@media screen and (max-width:769px) {
    .section-menu__exp{
        font-size: 1.4rem;
    }

    .section-menu__caption{
        font-size: 1.8rem;
        margin:48px auto 0;
    }
    .section-menu__topic{
        margin:48px auto 10px auto;
        width: 158px;
        height: 100px;
    }

    .section-menu__topic sapn{
        font-size: 2rem;
        top:40%;
    }

    .section-menu__menu{
        padding-bottom:24px;
        flex-direction: column;
        gap:16px;
        margin-top: 0;

    }
    .section-menu__menu--rev{
        flex-direction: column-reverse;
    }

    .section-menu__lunch{
        margin-top:10px;
    }
    .section-menu__lunchtitle{
        font-size: 1.5rem;
    }
    .lunchfork{
        width: 7.52px;
        height: 42px;
    }

    .lunchknife{
        width: 7px;
        height: 42px;
    }

    .lunchset__imgbox{
        flex-direction: column;
        gap:12px;
    }


    .course-menu__item{
        margin-top:12px;
    }

   .course-menu__item:first-child{
        font-size:1.6rem;
    }

    .course-menu__item--lunchset:first-child{
        font-size:1.6rem;
    }

    .course-menu{
        font-size: 1.4rem;
        margin-top:0;
    }
 
    .lunchset{
        width: 100%;
    }

    .lunchset{
        flex-direction: column;
        gap:10px;
        align-items: center;
    }

    .lunchset__menu{
        padding:22.5px 0 24px;
        align-items:baseline;
        width: 86%;   
        margin:0;     
    }


    .course-menu__plus{
        font-size: 1.1rem;
        text-align: center;
    }

    .weekday-menu{
        font-size: 1.2rem;
        padding:8px 0;

    }

    .course-menu__plus--weekday{
        font-size: 1.1rem;
    }

    .dishImg{
        width: 280px;
        height: 140px;
        margin:0 auto;
    }

    .lunchCourseImg{
        object-position: 0 0;
    }
}
/* -- SP lunch&dinner 終わり -- */

/* alacarte */

.section-menu__exp--alacarte{
    font-size: 2rem;
    text-decoration: none;
    text-align: center;
}

.section-menu__exp--alacarte span{
    font-size:1.4rem;
}

.section-menu__alacarte-menu{
    display:flex;
    justify-content: center;
}

.alacarte__list{
    list-style: none;
}

.alacarte__item{
    margin-top:8px;
    text-indent: 2rem;
}

.alacarte__item:first-child{
    color: var(--section-color);
    font-size: 2rem;
    font-weight: 700;
    text-indent: 0;
}

.alacarte__item--exMenu{
    text-align: righ;
}

/* PC alacarte 終わり */

/* SP alacarte */
@media screen and (max-width:769px) {
    .section-menu__alacarte-menu{
        flex-direction: column;
        font-size:1.4rem;
    }

    .section-menu__exp--alacarte{
        /* text-align:left; */
        padding-left: 24px;
        padding-bottom: 24px;
        font-size: 1.6rem;
    }

    .alacarte{
        padding-left: 24px;
        margin:0 12px;
    }
    .alacarte__list{
        padding:0;
        margin-top:0
    }

    .alacarte__item{
        text-indent: -15px;
        padding-left: 15px;
    }

    .alacarte__item:first-child{
        font-size:1.6rem;
        padding-left: 0;
    }
}


/* take out */
.section-menu--takeOut{
    padding-bottom:86px;
}
.takeoutmenu{
    display: flex;
    flex-direction: column;
    gap:32px;
}

.pizzaTitle{
    /* font-size: 23rem; */
    font-size: 14vw;
    font-family: caramel;
    color: var(--section-color);
    position: absolute;
    top:0;
    line-height: 120px;
    opacity: 0.2;
    margin-left:24px;
}
.precautions__takeout{
    margin:0 11%;
    text-align:left;
    list-style: none;
    padding:0;
}

.pizzaarea{
    margin:0 11%;
    background-color: var(--main-backcolor);
    display: flex;
    flex-direction: column;
    gap:36px;
    padding-top: 37px;
    padding-bottom:64px;
}

.takeout__title{
    color: #FFF;
    background-color: var(--section-color);
    width: 211px;
    height: 41px;
    margin-right:0;
    font-size: 2rem;
    line-height: 41px;
    font-weight: 600;
    padding-left: 16px;

    /* 三角に削る */
        clip-path: polygon(0 0, 100% 0, 85% 100%,0 100%);

}

.other{
    position:absolute;
    left:0;
    top:31px;
}

.pizzaarea__menu--ex{
    font-weight: 600;
    margin-bottom: 24px;
    margin-left:32px;
}

.pizza__explanation{
    background-color: var(--main-backcolor);
    padding:0 0 48px;
    width:46%;;
    margin-top:auto;
}

.pizza__box{
    display: flex;
    margin:0 40px 0;
}

.pizzaarea__menu{
    list-style: none;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 38px;
    margin:0 auto;
    position: relative;
    padding:0;
    width:100%;
}

.pizza{
    background-color: #FFF;
    padding: 30px 32px 16px;
    margin:0;
    width: 46%;
    box-sizing: border-box;
}

.pizza img{
    width: 100%;
    height: 238px;
    object-fit: cover;
}
.pizza__ex{
    padding: 0;
}
.pizza__exList{
    list-style: none;
    padding:0;
}

.pizza__exList:first-child{
    font-weight: 700;
    font-size: 2rem;
    color:var(--section-color);
}

.pizza__exList:last-child{
    font-weight: 700;
    font-size:2rem;
    text-align: right;
    line-height: 3;
}

.takeoutmenu__box{
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap:3%;
    margin:0 auto;
    width: 100%;
}

.toboxLayout{
    background-color: var(--main-backcolor);
    list-style: none;
    padding:95px 32px 42px;
    width: 37.5%;
    position: relative;
    margin:0;
}

.toboxLayoutEmpty{
    padding:95px 45px 42px;
    width: 37.5%;
    position: relative;
    margin:0;
    list-style: none;
}

.toboxLayout__ind{
    background-color: #FFF;
    padding: 30px 32px 16px;
    margin:0 auto;
    box-sizing: border-box;
    resize: none;
}
.toboxLayout__ind img{
    width: 100%;
    height: 238px;
    object-fit: cover;

}

.toboxLayout_ex{
    list-style: none;
    padding: 0;
    container-type: inline-size;
}

.toboxLayout__foodname{
    font-size: 7.5vw;
    font-family: caramel;
    color: var(--section-color);
    position: absolute;
    bottom:0;
    right:10px;
    line-height: 100px;
    opacity: 0.2;
}
.exRed{
    color: var(--point-color);
}

.exOrg{
    background-color: var(--point-color-org) !important;
}
.annotation{
    font-size: 1.3rem;
}

.price{
    text-align: right;
    font-size: 1.8rem;
    font-weight: 700;
}

.takeout__reserve{
    position:absolute;
    color: #FFF;
    width: 27%;
    height: 43px;
    background-color: var(--point-color);
    right: 32px;
    top:31px;
    text-align: center;
    font-size:clamp(1.8rem,1.2vw,2rem);
    font-weight: 600;
    line-height: 43px;
}

.triangle{
    /* aspect-ratio: 1/cos(45deg); */
    clip-path: polygon(100% 0, 85% 100%, 100% 100%);
    background-color: #FFF;
}

/* PC takeout 終わり */

/* SP takeout */
@media screen and (max-width:769px) {
   .precautions__takeout{
        font-size: 1.4rem;
        margin:0 5.6%;
   }
   .takeout__title{
        width: 147px;
        height: 30px;
        font-size: 1.4rem;
        line-height: 30px;
        padding-left: 12px;

        /* 三角に削る */
            clip-path: polygon(0 0, 100% 0, 90% 100%,0 100%);

    }

   .pizzaarea{
        gap:10px;
        margin:0 5.6%;
        padding-top: 10px;
        padding-bottom: 12px;
    }

    .pizza__box{
        flex-direction:column;
        margin:0;
    }
    .spPizzabox{
        flex-direction:column-reverse !important;
        margin:0;
    }

    .pizza__explanation{
        background:none;
        width:82%;
        text-align: left;
        padding:0 0 12px;
    }

    .pizzaarea__menu--ex{
        margin:0;
        font-size: 1.4rem;
    }

    .pizzaTitle{
        font-size: 11.5rem;
        top:0;
        right:20px;
        line-height: 40px;
        margin: 0;
    }

    .pizza__exList{
        font-size: 1rem;
    }


    .pizza__exList:first-child{
        font-size: 1.4rem;
    }

    .pizza__exList:last-child{
        font-size:1.4rem;
        line-height: 2;
    }

    .toboxLayout__ind{
        padding: 18px 30px 6px;
    }
    .toboxLayout__ind img{
        height: 150px;
    }


    .pizzaarea__menu{
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .pizza{
        padding: 18px 30px 9px;
        width: 82%;
        box-sizing: border-box;
    }

    .pizza img{
        height: 130px;
    }

    .takeoutmenu{
        gap:16px;
    }

    .takeoutmenu__box{
        flex-direction: column;
        gap: 16px;;
        align-items:center;
    }

    .toboxLayout{
        padding:50px 32px 24px;
        width:88%;
    }

    .other{
        top:10px;
    }

    .toboxLayout_ex{
        font-size: 1.2rem;
    }

    .takeout__reserve{
        width: 80.5px;
        height: 28.5px;
        right: 32px;
        top:10px;
        font-size:1.3rem;
        line-height: 28.5px;
    }
   .price{
        font-size: 1.4rem;
   }

   .toboxLayout__foodname{
        font-size: 7.2rem;
        bottom:3px;
        right:10px;
        line-height: 50px;
    }
    .annotation{
        font-size: 1rem;
    }

    .toboxLayoutEmpty{
        display: none;
    }

}

/************************/
/*** -- single.php-- ***/
/*** -- お知らせページ-- ***/
/************************/
.postpage{
    margin:0 auto;
    width:80%;
    padding-top:64px;
    padding-bottom:64px;
}

.content__date{
    margin-top:24px;
}

.back{
    color:var(--main-color);
    text-decoration: none;
}