@charset "UTF-8";

/* テイクアウト */
a{
    text-decoration: none;
    color: #000000;
}
article{
    margin-bottom: 10rem;
}
.to_img01{
    width: 100%;
    margin-bottom: 50px;
}
.to_exp{
    width: 95%;
    margin: 0 auto;
    border: #d83a3e 2px solid;
    padding: 20px 0;
    /* margin-bottom: 30px; */
}
.to_exp p{
    font-size: 1.1rem;
    line-height: 200%;
}
.to_exp p span{
    font-size: 0.8rem;
    line-height: 0;
    color: #d83a3e;
}
.to_exp p a{
    font-size: 1.5rem;
    line-height: 300%;
    color: #000000;
    text-decoration: none;
}
.to_h3{
    margin: 25px 0;
    padding: 25px 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
}
#shun .to_h3,#okui .to_h3{
    background-image: url(../image/takeout_title_bg01.png);
}
#odb .to_h3{
    background-image: url(../image/takeout_title_bg02.png);
}
.to_section{
    max-width: 100%;
    width: 960px;
    display: grid;
    grid-template-rows: repeat(1,1fr);
    grid-row-gap: 2rem;
}
.to_section > p{
    max-width: 95%;
    margin: 0 auto;
    margin-bottom: 30px;
}
.to_section p a{
    border-bottom: #000000 1px solid;
}
.to_cat_wrap{
    width: 100%;

    display: flex;
    justify-content: space-between;
}
.to_cat_wrap a{
    text-decoration: none;
    color: #ffffff;
}
.to_cat{
    /* font-weight: bold; */
    width: 32.5%;
    line-height: 250%;
    color: #ffffff;
    background-color: #e4bfc1;
}
.to_cat:hover{
    background:#d83a3e;
    transition: 0.5s;
}
.to_wrap{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    margin-bottom:3em;
}
.to_left, .to_right{
    width:48%;
}
.to_right{
    height:100%;
    height:310px;
}
.to_left img{
    width:auto;
    height:310px;
}
.to_title{
    width:100%;
    border-top:solid 4px #2e1212;
    border-bottom:solid 4px #2e1212;
}
.to_title p{
    border-top:solid 1px #2e1212;
    border-bottom:solid 1px #2e1212;
    margin:3px 0;
    padding:0.3em;
    font-size:1.5rem;
}
.to_box{
    width: 100%;
    display: grid;
    /* grid-template-columns: repeat(4,1fr); */
    grid-template-columns: 16% 71%;
    column-gap: 5%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    margin:0.5em 0 3px 0;
    /* border-bottom:solid 1px #2e1212; */
    /* height:98%; */
    height:82%;
}
#shun .to_box,#okui .to_box{
    background-image: url(../image/takeout_bg01.png);
}
#odb .to_box{
    background-image: url(../image/takeout_bg02.png);
}
.to_box_wrap{
    border-bottom:solid 4px #2e1212;
    height:225px;
}
.to_cont_left p{
    color:#fff;
    background:#000;
    font-size:0.7em;
    padding:3px 0;
    letter-spacing: 5px;
    /* text-indent: 15px; */
    text-align: center;
}
.to_cont_right{
    height: 99%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-content: space-between;
}
.to_cont_right p{
    text-align: left;
    font-size:68%;
}
.to_cont_right_btm{
    display: block;
    margin-top:auto;
}
.to_price{
    color:#dd0000;
    text-align: right;
    display: block;
    font-weight: bolder;
}
.to_caution_wrap{
    width: 100%;
    color: #dd0000;
    margin: 0 0 3px 0;
    padding-bottom: 5px;
    border-bottom: solid #2e1212 1px ;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.to_caution{
    margin-right: 2rem;
    font-size: 0.7rem;
}
.to_hyaku_alert{
    display: flex;
    flex-flow: column nowrap;
    font-size:90%;
    margin-bottom:5em;
    line-height: 2.2em;
    padding:0 1em;
}

/* --------------------------------------------------------------------------------
Tabのレイアウト
-------------------------------------------------------------------------------- */
/*tabの形状*/
.to_tab{
	display: flex;
	flex-wrap: wrap;
}
.to_tab li a{
	display: block;
	background:#ddd;
	margin:0 2px;
	padding:10px 20px;
}
/*liにactiveクラスがついた時の形状*/
.to_tab div.active{
	background:#d83a3e;
}
#okui .to_cat_wrap{
    display: flex;
    justify-content: space-evenly;
}
#okui .to_cat_wrap div{
    background-color: unset;
    margin-bottom: 50px;
}
#okui .to_cat_wrap div a{
    color: #000000;
    border-bottom: #000000 1px solid;
}

/*エリアの表示非表示と形状*/
.to_area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	/* padding:50px 20px; */
}

/*areaにis-activeというクラスがついた時の形状*/
.to_area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media screen and (max-width:767px) {
    .to_img01 img{
        width: 100%;
    }
    .to_cat_wrap{
        font-size: 0.92rem;
    }
    .to_left, .to_right {
        width: 100%;
    }
    .to_left img {
        width: 100vw;
        height: auto;
    }
    .to_hyaku_alert{
        font-size: 0.83rem;
    }
    .to_caution{
        margin-right: 0;
    }
}
/* テイクアウト */