@charset "utf-8";


/*----------------------------------
	Main
----------------------------------*/
#main{
	margin-top:80px;
}
#main .images{
	width:100%;
	align-content: flex-start;
	grid-template-columns: repeat(20, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 2px;
}
#main .image{
	background-position:center;
	background-size:cover;
}
#main .images .image{
	height:380px;
}
#main .images .image01{
	/* width:calc(50% - 2px); */

	/* margin-bottom:2px; */
	background-image:url(../img/img_main_01_pc.jpg);
	grid-column-start: 1;
	grid-column-end: 9;
	grid-row-start: 1;
	grid-row-end: 3;
}
#main .images .image02{
	/* width:50%; */
	background-image:url(../img/img_main_02_pc.jpg);
	grid-column-start: 9;
	grid-column-end: 16;
	grid-row-start: 1;
	grid-row-end: 2;
}
#main .images .image03{
	/* width:calc(40% - 2px); */
	background-image:url(../img/img_main_03_pc.jpg);
	grid-column-start: 16;
	grid-column-end: 21;
	grid-row-start: 1;
	grid-row-end: 2;
}
#main .images .image04{
	/* width:60%; */
	background-image:url(../img/img_main_04_pc.jpg);
	grid-column-start: 1;
	grid-column-end: 6;
	grid-row-start: 2;
	grid-row-end: 3;
}
#main .images .image05{
	/* width:calc(60% - 2px); */
	background-image:url(../img/img_main_05_pc.jpg);
	grid-column-start: 6;
	grid-column-end: 11;
	grid-row-start: 2;
	grid-row-end: 3;
}
#main .images .image06{
	/* width:calc(60% - 2px); */
	background-image:url(../img/img_main_06_pc.jpg);
	grid-column-start: 11;
	grid-column-end: 21;
	grid-row-start: 2;
	grid-row-end: 3;
}


#main .overview{
	background:var(--color_bg);
	width:50%;
	margin-left:-3%;
	margin-top:10rem;
	position:relative;
	z-index: -1;
	padding-left:calc(3% + 5%);
	padding-top:10rem;
	padding-bottom:10rem;
}
#main .overview .wrap{
	width:90%;
}
#main .overview h2{
	color:var(--color_chaya);
	font-size:4rem;
	align-items: center;
}
#main .overview h2:before{
	content:"";
	display: inline-block;
	background:url(/common/img/logo_fumonchaya.svg) no-repeat;
	width:60px;
	height:44px;
	margin-right:2rem;
}
#main .overview .roboto{
	color:var(--color_chaya);
	align-items: center;
	letter-spacing: 0.5rem;
	margin-top:2rem;
}
#main .overview .roboto:before{
	content:"";
	display: inline-block;
	background:var(--color_chaya);
	width:7rem;
	height:1px;
	margin-right:2rem;
}
#main .overview h4{
	margin-top:3rem;
	font-size:1.8rem;
	font-weight: normal;
	letter-spacing: 0.2rem;
}
#main .overview .text{
	margin-top:3rem;
	line-height:2.5;
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	/* #main{
		margin-top:0;
	} */
	#main .images {
		width: 100%;
		grid-template-rows: repeat(3, 1fr);
	}
	/* #main .images .image01{
		width: 100%;
		height: 0;
		padding-bottom: 53.5%;
	}
	#main .images .image02{
		width:calc(40% - 2px);
		height:0;
		margin-right:2px;
		padding-bottom: 33.8%;
	}
	#main .images .image03{
		width:60%;
		height:0;
		padding-bottom: 33.8%;

	} */
	#main .images .image{
		height:200px;
	}
	#main .images .image01{
		grid-column-start: 1;
		grid-column-end: 11;
		grid-row-start: 1;
		grid-row-end: 2;
	}
	#main .images .image02{
		grid-column-start: 11;
		grid-column-end: 21;
		grid-row-start: 1;
		grid-row-end: 2;
	}
	#main .images .image03{
		grid-column-start: 1;
		grid-column-end: 11;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	#main .images .image04{
		grid-column-start: 11;
		grid-column-end: 21;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	#main .images .image05{
		grid-column-start: 1;
		grid-column-end: 11;
		grid-row-start: 3;
		grid-row-end: 4;
	}
	#main .images .image06{
		grid-column-start: 11;
		grid-column-end: 21;
		grid-row-start: 3;
		grid-row-end: 4;
	}
	#main .overview {
		width: 100%;
		margin-left: 0%;
		margin-top: 0rem;
		padding-left: 0;
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
	#main .overview .wrap {
		width: 90%;
		margin:0 auto;
	}
	#main .overview h2 {
		font-size: 2.4rem;
	}
	#main .overview h2:before {
		position: absolute;
		right: 0;
	}
}


/*----------------------------------
	Commitment
----------------------------------*/
#commitment{
	margin-top:15rem;
	color:var(--color_chaya);
}
#commitment > .flex{
	width:700px;
	justify-content: space-between;
	margin:0 auto;
}
#commitment a{
    font-size: 2rem;
    width: 45%;
    padding: 17.5% 0;
    background-position: center;
    background-size: cover;
    justify-content: center;
    align-items: center;
	text-align: center;
    color: #fff;
	position: relative;
	overflow: hidden;
}
#commitment a:before{
	content:"";
	display: inline-block;
	background:#000;
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	opacity:0.5;
	z-index: 2;
	transition:0.5s;
}
#commitment a:after{
	content:"";
	display: inline-block;
	background-size:cover;
	width:100%;
	height:100%;
	position:absolute;
	transition:0.5s;
}
#commitment a.kiyomizu:after{
	background-image:url(../img/img_commitment_01.webp);
}
.webpno-webp #commitment a.kiyomizu:after{
	background-image:url(../img/img_commitment_01.jpg);
}
#commitment a.keifuku:after{
	background-image:url(../img/img_commitment_02.webp);
}
#commitment a.keifuku:after{
	background-image:url(../img/img_commitment_02.jpg);
}
#commitment a:hover:before{
	opacity:0.6;
}
#commitment a:hover:after{
	transform: scale(1.1);
}
#commitment a p{
	z-index: 100;
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	#commitment > .flex{
		width:70%;
		margin-left:15%;
	}
	#commitment a{
		width: 100%;
		padding: calc(50% - 3rem) 0;
		margin-top:3rem;
	}
}

/*----------------------------------
	Menu
----------------------------------*/
#menu{
	margin-top:15rem;
}
#menu .title{
	color:var(--color_chaya);
}
#menu .tab-group{
	display: flex;
	justify-content: center;
}
#menu .tab{
	flex-grow: 1;
	padding:1.5rem;
	list-style:none;
	text-align:center;
	cursor:pointer;
    background: #eee;
}
#menu .tab span{
	display: inline-block;
}
#menu .panel-group{
	background:var(--color_bg);
	padding-bottom:15rem;
}
#menu .panel{
	display:none;
}
#menu .panel > .flex{
	justify-content: space-between;
}
#menu .tab.is-active{
	color:#FFF;
	transition: all 0.2s ease-out;
}
#menu .tab.sp-su.is-active{
	background:var(--color_summer);
}
#menu .tab.au-wi.is-active{
	background:var(--color_winter);
}
#menu .panel.is-show{
	display:block;
}
#menu .panel.sp-su.is-show{
	border-top:3px solid var(--color_summer);
}
#menu .panel.au-wi.is-show{
	border-top:3px solid var(--color_winter);
	/* padding-top: 15rem; */
    text-align: center;
}
#menu .full{
    width: 100%;
}
#menu .half{
    width: 48%;
}
#menu .wrap{
	margin-top:8rem;
}
#menu .drink.wrap{
	margin-top:0rem;
}
#menu h4{
	font-size:2rem;
	font-weight: normal;
	text-align: center;
}
#menu .sp-su h4{
	color:var(--color_summer);
}
#menu .au-wi h4 {
    color: var(--color_winter);
}
#menu .lead{
	text-align: center;
	margin-top:3rem;
	line-height: 2;
}
#menu h4 span{
	display: inline-block;
}
#menu .lineup{
	justify-content: space-between;
}
#menu .kiyomizu-macha .lineup:before,
#menu .kiyomizu-macha .lineup:after,
#menu .tozan .lineup:before,
#menu .tozan .lineup:after,
#menu .sp-su .drink .lineup:after,
#menu .full.limited.otowa .lineup:before,
#menu .full.limited.otowa .lineup:after,
#menu .limited.tsukitei .lineup:before,
#menu .limited.tsukitei .lineup:after,
#menu .goju .lineup:before,
#menu .goju .lineup:after {
	content:"";
	width:22%;
}
#menu .au-wi .kiyomizu-kinako .lineup:before,
#menu .au-wi .kiyomizu-kinako .lineup:after{
	content:"";
	width:9%;
}
#menu .au-wi .drink .lineup:after{
	content:"";
	width:48%;
}
#menu .keifuku .lineup{
	justify-content: center;
}
#menu .lineup li{
	margin-top:4rem;
}
#menu .full .lineup li{
	width:22%;
	text-align: center;
}
#menu .half .lineup li{
	width:45.8333%;
	text-align: center;
}
#menu .lineup .name{
	margin-top:2rem;
}
#menu .lineup .name span{
	display: inline-block;
}
#menu .lineup .price{
	margin-top:1rem;
	font-weight: bold;
}
#menu .lineup .price span{
	font-size: 1.2rem;
	display: inline-block;
}
#menu .lineup_title{
	margin-top:15rem;
	width:100%;
	display: flex;
    justify-content: center;
	flex-wrap:nowrap;
}
#menu h3{
	font-size: 2rem;
    /* border-left: 1px solid;
    border-right: 1px solid; */
    /* text-align: center;
    margin: 0 auto; */
    /* padding: 0 3rem; */
}
#menu .lineup_title:before,
#menu .lineup_title:after{
	content:"";
	display: inline-block;
	background:#333;
	width:1px;
}
#menu .lineup_title:before{
	margin-right:3rem;
}
#menu .lineup_title:after{
	margin-left:3rem;
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	#menu .full .lineup li{
		width:48%;
		text-align: center;
	}
	#menu .kiyomizu-macha .lineup:before,
	#menu .kiyomizu-macha .lineup:after,
	#menu .drink .lineup:after,
	#menu .au-wi .kiyomizu-kinako .lineup:before,
	#menu .au-wi .kiyomizu-kinako .lineup:after,
	#menu .kiyomizu-macha .lineup:before,
	#menu .full.limited.otowa .lineup:before,
	#menu .full.limited.otowa .lineup:after,
	#menu .limited.tsukitei .lineup:before,
	#menu .limited.tsukitei .lineup:after,
	#menu .goju .lineup:before,
	#menu .goju .lineup:after{
		content:none;
	}
	#menu .half{
		width: 100%;
	}
	#menu .lead{
		text-align: left;
	}
	#menu .lineup .name{
		font-size:1.2rem;
	}
	#menu .half .lineup li{
		width:48%;
	}
}


/*----------------------------------
	Access
----------------------------------*/
#access .title{
	color:var(--color_chaya);
	margin-bottom: 0;
}
#access .porta{
	display: none;
}
#access .map_wrap::before{
	height:70rem;
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
}


/*----------------------------------
	Sample
----------------------------------*/

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
}