@charset "utf-8";



/*----------------------------------
	Main images
----------------------------------*/
#main_images .main_image{
	position:relative;
	width:100%;
	height: 570px;
	margin-top: 50px;
}
#main_images .image{
	position:absolute;
	background-size:cover;
	background-position:center;
}
#main_images .image img{
    height:100%;
    object-fit: cover;
}
#main_images .image01{
	width:calc(21% - 2px);
	height:calc(60% - 2px);
	top:0;
	left:0;
}
#main_images .image02{
	width:calc(46% - 2px);
	height:calc(60% - 2px);
	top:0;
	left:21%;
}
#main_images .image03{
	width:33%;
	height:calc(45% - 2px);
	top:0;
	left:67%;
}
#main_images .image04{
	width:calc(41% - 2px);
	height:40%;
	top:60%;
	left:0;
}
.webpno-webp #main_images .image04{
	background-image:url(../img/bg_main_04_pc.jpg);
}
#main_images .image05{
	width:calc(26% - 2px);
	height:40%;
	top:60%;
	left:41%;
}
#main_images .image06{
	width:33%;
	height:55%;
	top:45%;
	left:67%;
}
#main_images .lead{
	text-align: center;
	margin-top:7rem;
	line-height: 3;
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	#main_images .main_image{
		height: 400px;
	}
	#main_images .image01{
		width:calc(59% - 2px);
		height:calc(43% - 2px);
		top:0;
		left:0;
	}
	#main_images .image02{
		width:41%;
		height:calc(43% - 2px);
		top:0;
		left:59%;
	}
	#main_images .image03{
		width:calc(42% - 2px);
		height:calc(27% - 2px);
		top:43%;
		left:0%;
	}
	#main_images .image04{
		width:58%;
		height:calc(27% - 2px);
		top:43%;
		left:42%;
	}
	#main_images .image05{
		width:calc(52% - 2px);
		height:30%;
		top:70%;
		left:0;
	}
	#main_images .image06{
		width:48%;
		height:30%;
		top:70%;
		left:52%;
	}
	#main_images .lead{
		text-align: left;
		line-height: 2;
		margin-top: 5rem;
	}
}

/*----------------------------------
	About
----------------------------------*/
#about {
	margin-top:15rem;
}
#about .fumonchaya{
	margin-top: 10rem;
}
#about .shop .color_bg{
	background:var(--color_bg);
	width:50%;
	justify-content: flex-end;
	padding: 5rem 0;
    align-content: center;
}
#about .shop .info{
	max-width:400px;
	justify-content: flex-end;
	margin-left: 5%;
	margin-right: 20%;
}
#about .shop .info .name_wrap{
	flex-wrap:nowrap;
	align-items: center;
}
#about .shop .logo{
	max-width:70px;
}
#about .shop .name{
	margin-left:3rem;
	padding-left:3rem;
	word-break: keep-all;
}
#about .fumonan .name{
	border-left:1px solid var(--color_an);
}
#about .fumonan .name h3,
#about .fumonan .name .category{
	color:var(--color_an);
}
#about .fumonchaya .name{
	border-left:1px solid var(--color_chaya);
}
#about .fumonchaya .name h3,
#about .fumonchaya .name .category{
	color:var(--color_chaya);
}
#about .name .category{
	text-align: right;
}
#about .shop{
	align-items: stretch;
}
#about .shop > img{
	width:50%;
}
#about .shop .text{
	margin-top:2rem;
	line-height: 2;
}
#about .shop .more{
	margin-top:3rem;
	font-size:1.6rem;
}
#about .fumonan .more{
	color:var(--color_an);
}
#about .fumonchaya .more{
	color:var(--color_chaya);
}
#about .shop .image{
	width: 55%;
    height: auto;
    margin-left: -5%;
	transform:translateY(3rem)
}
#about .shop .image img{
    object-fit: cover;
    overflow: hidden;
    object-position: center;
    max-height: 300px;
    height: 100%;
}
#about .fumonan .image{
    background-size: cover;
	background-position: center;
}
#about .fumonchaya .image{
    background-size: cover;
	background-position: center;
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	#about {
		margin-top:0;
	}
	#about .fumonchaya{
		margin-top: 5rem;
	}
	#about .shop .image{
		order:1;
		width: 90%;
		height: auto;
		margin-left: 5%;
		transform: translateY(5rem);
	}
	#about .shop .color_bg{
		width:100%;
		order:2;
		padding-top:10rem;
	}
	#about .shop .info {
		max-width: unset;
		margin-left: 5%;
		margin-right: 5%;
	}
	#about .shop .info .name_wrap{
		text-align: center;
		width: 100%;
		display: inline-block;
	}
	#about .shop .name {
		margin-left: 0;
		padding-left: 0;
		border-left: none;
		margin-top: 1rem;
	}
	#about .name .category {
		text-align: center;
	}

}


/*----------------------------------
	Access
----------------------------------*/
#access{
	margin-top:25rem;
}
#access .title{
	background-image:url(../img/bg_access_title.webp);
	background-position: center;
	color:#fff;
	margin-bottom:0;
}
.webpno-webp #access .title{
	background-image:url(../img/bg_access_title.jpg);
}

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


/*----------------------------------
	News
----------------------------------*/
#news{
	margin-top:15rem;
	padding:5rem 0;
	background:var(--color_bg);
}
#news .title{
	color: var(--color_chaya);
	margin-bottom: 3rem;
    text-align: center;
    border-bottom: 1px solid #fff;
    padding-bottom: 5rem;
}
#news .article{
	height:15rem;
	overflow-y:scroll;
	-ms-overflow-style: none;    /* IE, Edge 対応 */
	scrollbar-width: none;       /* Firefox 対応 */
}
#news .article::-webkit-scrollbar {  /* Chrome, Safari 対応 */
	display:none;
}
#news .article li:not(:first-child){
	margin-top:3rem;
}
#news .article .date{
	font-size:1.2rem;
	width:10rem;
}
#news .article .article_title{
	color:var(--color_text);
	margin-bottom: 0;
	font-weight: bold;
    padding-bottom: 0;
	width:calc(100% - 10rem);
}
#news .article .text{
	margin-left:10rem;
	margin-top: 0.5rem;
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	#news .article .date {
		width:100%;
	}
	#news .article .article_title {
		margin-top:1rem;
	}
	#news .article .text {
		margin-left: 0;
	}
}


/*----------------------------------
	Links
----------------------------------*/
#links{
	justify-content: space-between;
	margin:10rem auto 0;
}
@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*/
}


.opening{
	padding: 0.5rem 1rem;
    background: var(--color_chaya);
    color: #fff;
    text-align: center;
    width: 100%;
    margin-top: 2rem;
    font-size: 1.8rem;
    font-family: sans-serif;
    font-weight: bold;
}