@charset "UTF-8";
/* CSS Document */

body {
    font-weight: 300;
}
.row, .rowWide {
    margin-left: auto;
    margin-right: auto;
  }
.flxBox {
    display: flex;
}
.gray01 {
    background-color: #f2f2f2;
}
.gray02 {
    background-color: #B3B3B3;
}
.cntLine {
    text-align: center;
}
a {
    color:#000;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
b.phoneNumb {
    margin-right:0.5em;
    font-size:1.125rem;
}
.spOnly {
    display: none;
}


/* Header */
header.headerCommon .flxBox {
    align-items: center;
}
header.headerCommon h2 {
    margin-left: auto;
    color: #604B3B;
    font-weight: 300;
    line-height: 140%;
    text-align: right;
}

/* Top Page */
#topPageVisual {
    padding-bottom: 2em;
}
#topPageVisual img {
    width: 100%;
}
#instaArea {
    padding-bottom: 4em;
    padding-top: 4em;
    align-items: center;
    justify-content: space-between;
}
#instaArea h3 {
    margin-left: auto;
    margin-right: auto;
}
#instaArea .pluginArea img {
    margin-left: 4px;
}
#menuAreaTop .titMenueTop {
    margin-bottom: 4em;
    text-align: center;
    border-bottom: thin solid #000;
}
#menuAreaTop {
    padding-bottom: 4em;
    padding-top: 2em;
}
#menuAreaTop .titMenueTop h3 {
    padding-bottom: 0.4em;
    display: inline-block;
    font-family: 'Noto Serif JP', serif;
    font-size: 1.78rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    border-bottom: 5px solid #000;
}
#menuAreaTop ul {
    list-style: none;
    justify-content: space-between;
    line-height: 180%;
}
#menuAreaTop ul li#ikebukuro {
    padding-right: 40px;
    border-right: thin solid #604B3B;
}
#menuAreaTop ul li.shopMenu h4 {
    margin-bottom: 1em;
    color: #604B3B;
    font-size: 1.25rem;
    font-weight: 400;
    font-family: 'Noto Serif JP', serif;
    letter-spacing: 0.2em;
}
#menuAreaTop ul li.shopMenu .menuList {
    margin-bottom: 1em;
}
#menuAreaTop ul li.shopMenu .menuList h5 {
    margin-bottom: 0.4em;
    font-weight: 500;
}
#menuAreaTop ul li.shopMenu .photoSpace {
    padding-bottom: 1em;
    padding-top: 1em;
    display: flex;
    justify-content: space-between;
}
.btnToPage {
    margin-left: auto;
    margin-bottom: 4em;
    margin-right: auto;
    margin-top: 4em;
}
.btnToPage#toStanderd {
    margin-bottom: 8em;
    font-display: block;
    background-image: url("../images/btn_standard.jpg");
}
.btnToPage#toStanderd a {
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 2rem;
    text-decoration: none;
    font-family: 'Noto Serif JP', serif;
    letter-spacing: 0.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.3);
}
.btnToPage#toStanderd a:hover {
    background-color: rgba(0,0,0,0.6);
}
.btnToPage#toDelivere {
    width:632px;
    height: 198px;
    display: flex;
    align-items: center;
    background-image: url("../images/btn_delivere.jpg");
}
.btnToPage#toDelivere a {
    width: 100%;
    height:70%;
    color: #35261F;
    font-family: 'Noto Serif JP', serif;
    text-align: center;
    letter-spacing: 0.4em;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255,255,255,0.7);
}
.btnToPage#toDelivere a:hover {
    background-color: rgba(255,255,255,1);
}
.btnToPage#toDelivere a p {
    margin-bottom: 0.4em;
    padding-bottom: 0.2em;
    font-size: 1.68rem;
    font-weight: 400;
    border-bottom: thin solid #35261F;
}
.btnToPage#toDelivere a h4 {
    font-size: 1.68rem;
    font-weight: 700;
}
#conceptTop {
    padding-bottom: 8em;
    padding-top: 4em;
    text-align: center;
}
h3.titGreen {
    margin-bottom: 2em;
    color: #237D26;
    font-size: 1.62rem;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    letter-spacing: 0.2em;
}
#conceptTop h4.slogan {
    margin-bottom: 1em;
    font-size: 1.5rem;
    line-height: 160%;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    letter-spacing: 0.4em;
}
#conceptTop p {
    line-height: 2rem;
    margin-bottom: 4em;
}
#conceptTop .flxBox {
    justify-content: space-between;
}
#conceptTop .flxBox img {
    object-fit: cover;
    font-family: 'object-fit: cover;'; /*object-fit　IE11対策*/
}
#shopList {
    padding-bottom: 8em;
    padding-top: 6em;
}
#shopList ul {
    padding: 2em 8em;
    list-style: none;
    justify-content: space-around;
}
#shopList ul h5 {
    margin-bottom: 1em;
    font-size: 1.25rem;
}
#shopList ul p {
    line-height: 180%;
}

/*  Footer */
footer {
    background-color: #799E1C;
    text-align: center;
}
footer .footerMain {
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
}
footer .footerMain h2 {
    margin-right: 2em;
}
footer .footerMain ul {
    list-style: none;
    display: flex;
}
footer .footerMain ul li {
    padding: 0.2em 2em;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    letter-spacing: 0.4em;
}

footer .footerMain ul li a {
    color: #fff;
    text-decoration: none;
}
footer .footerMain ul li a:hover {
    color: #F5FE76;
}

/* Standard Page */
.titPageArea {
	height: 452px;
	background-attachment: fixed;
	background-size: cover;
	background-position: center bottom;
}
#standerdTop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-image: url("../images/top_visual_standerd.jpg");
	text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
#delivereTop {
    background-image: url("../images/top_visual_delivery.jpg");
}
.titPageArea h3 {
    margin-bottom: 0.8em;
    font-size: 2.75rem;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    letter-spacing: 0.4em;
}
.titPageArea p {
    font-size: 1.38rem;
    line-height: 180%;
    font-weight: 400;
}
#conceptMain {
    padding-bottom: 6em;
    padding-top: 6em;
}
#conceptMain .titSect {
    text-align: center;
    padding-bottom: 6em;
    line-height: 200%;
}
#conceptMain .titSect h4 {
    margin-bottom: 1.8em;
    font-size: 1.5rem;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    letter-spacing: 0.4em; 
}
#conceptMain .box {
    margin-bottom: 4em;
}
#conceptMain .box .flxBox {
    align-items: center;
}
#conceptMain .box #conceptBox2 {
    flex-direction: row-reverse;
}
#conceptMain .box .flxBox .txtArea {
	width: 100%;
	padding-left: 32px;
	padding-right: 32px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#conceptMain .box .flxBox .txtArea h4 {
    margin-bottom: 1em;
    color: #604B3B;
    font-size: 1.5rem;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
}
#conceptMain .box .flxBox .txtArea p {
    padding-bottom: 1em;
    padding-top: 1em;
    line-height: 180%;
    border-bottom: thin solid #DED5C1;
}
#conceptMain .box .flxBox .txtArea p:last-child {
    border-bottom: none;
}
.boxConcept2 {
    align-items: center;
}
.boxConcept2 .txtArea {
    padding-left: 5.6em;
    line-height: 200%;
}
.boxConcept2 .txtArea h4 {
    margin-bottom: 1em;
    color: #604B3B;
    font-size: 1.5rem;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
}
.boxConcept2 .txtArea p.text {
    margin-top: 2em;
}
.boxConcept2 .imgArea img {
    vertical-align: bottom;
}


/* Delivery Page */
#titDeliv {
    padding-bottom: 6em;
    padding-top: 6em;
    text-align: center;
}
.titDeliv h2 {
    margin-bottom: 1.8em;
    font-size: 1.64rem;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    letter-spacing: 0.4em;
}
.titDeliv h3 {
    margin-bottom: 1em;
    padding-bottom:0.8em;
    font-size: 1.88rem;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    letter-spacing: 0.4em;
}
#titDeliv.titDeliv h3 {
    border-bottom: thin solid #DED5C1;
}
#titDeliv p {
    line-height: 200%;
}
#menuDeliv {
    flex-wrap: wrap;
    list-style: none;
    justify-content: space-between;
}
#menuDeliv li {
	padding-left: 1em;
    padding-bottom: 2em;
    padding-right: 1em;
    padding-top: 2em;
	width: 33%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    line-height: 180%;
}
#menuDeliv li img {
    margin-bottom: 0.6em;
}
#menuDeliv li h5 {
    margin-bottom: 1em;
    font-size: 1.25rem;
    text-align: center;
}
#drink {
    padding-bottom: 6em;
    padding-top: 6em;
    text-align: center;
}
#drink ul {
    width: 468px;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
    list-style: none;
}
#drink ul li {
    height: 2em;
    font-weight: 600;
    position:relative;
}
#drink ul li::before {
    content: "";
    display: block;
    width: 100%;                    /* .line と同じ幅 */
    position: absolute;             /* 行の要素に重ねる */
    margin-top: 0.5em;              /* 高さの半分を上の margin にとる */
    border-top: 1px dotted #000;  /* リーダーの色、太さ、スタイルを指定 */
}
#drink ul li span.name {
    position: absolute;
    left:0;
    padding-right: 1ex;
    background-color: #f2f2f2;
}
#drink ul li span.amount {
    position: absolute;
    right: 0;
    padding-left: 1ex;
    background-color: #f2f2f2;
}
#drink p.text {
    line-height: 180%;
}
#order {
    padding-bottom: 4em;
    padding-top:6em;
}
#order h3 {
    margin-bottom: 4em;
    font-size: 1.25rem;
    text-align: center;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    letter-spacing: 0.4em;
}
#order dl dd ul {
	padding-left: 2em;
}
#order dl dd p {
    margin-bottom: 1em;
    padding-left: 2em;
}
#order dl dd ul li {
    margin-bottom: 1em;
}
#order dl {
    margin-bottom: 2em;
    padding-left: 14%;
    padding-right: 14%;
    display: flex;
    line-height: 160%;
}
#order dl dt {
  width:20%;
    font-weight: 600;
}
#order dl dd {
    width: 80%;
}




/* PC Size */
@media screen and (min-width:1200px){
    
    .row {
        width:1160px;
    }
    .rowWide {
        width: 1200px;
    }

    /* Mouse Efect */
    .scaler {
        overflow:hidden;
    }
    .scaler img  {
        transition-duration: 0.3s;    
    }
    .scaler img:hover {
        transform: scale(1.1);	/*画像の拡大率*/
    	transition-duration: 0.3s;	/*変化に掛かる時間*/
    	cursor:pointer;
    }
    
    header.headerCommon .flxBox {
        height: 110px;
    }
    header.headerCommon h1 {
        margin-left: 1em;
    }
    header.headerCommon h2 {
        margin-right: 2em;
    }
    #menuAreaTop ul li.shopMenu {
        width:540px;
    }
    #conceptTop .flxBox img {
        width: 576px;
        height: 282px;
    }
    .btnToPage#toStanderd {
        width:750px;
        height: 204px;
    }
    .btnToPage#toDelivere {
        width:632px;
        height: 198px;
    }
    
}


/* Tublet Size */
@media screen and (max-width:1199px) and (min-width:768px){
    
    body, html {
        font-size: 13px;
    }
    .row, .rowWide {
        width: 96vw;
    }
    header.headerCommon .flxBox {
        height: 10vw;
    }
    header.headerCommon h1 img {
        width: 18vw;
        height: auto;
    }
    #instaArea .pluginArea img {
        width: 16vw;
        height: auto;
        margin-left: 4px;
    }
    #instaArea h3 img {
        width:10vw;
        height: auto;
    }
    #menuAreaTop ul li.shopMenu {
        width:45vw;
    }
    #menuAreaTop ul li.shopMenu .photoSpace img {
        width: 14.6vw;
        height: 14.6vw;
    }
    #menuAreaTop ul li#ikebukuro {
        padding-right: 3vw;
    }
    #shopList ul {
        padding: 2em 1em;
    }
    .btnToPage#toStanderd {
        width:62.5vw;
        height: 17vw;
        background-size:100% auto;
    }
    #conceptTop .flxBox img {
        width: 47.8vw;
        height: 23vw;
    }
    .btnToPage#toDelivere {
        width:52.6vw;
        height: 16.5vw;
    }
    .titPageArea {
        height: 38vw;
    }
    #conceptMain .imgArea img.imgBox1 {
        width: 48vw;
        height: 40vw;
        object-fit: cover;
        font-family: 'object-fit: cover;'; /*object-fit　IE11対策*/
    }
    .boxConcept2 .imgArea img.imgBox2 {
        margin-left: -2vw;
        width: 48vw;
        height: 56vw;
        object-fit: cover;
        font-family: 'object-fit: cover;'; /*object-fit　IE11対策*/
    }
    .boxConcept2 .txtArea {
        padding-left: 2em;
    }
    #menuDeliv li img {
        width: 30vw;
        height: auto;
    }
    #order dl {
        padding-left: 0em;
        padding-right: 0em;
    }
}