@charset "utf-8";
/* ■■■■■■■■■■■■■■■■■■■■■■header■■■■■■■■■■■■■■■■■■■■■■ */
#headerarea{
	background: url(../images/cp/common/pattern.jpg) repeat top left / 30px;
}
.hd-nav__btn li a{
	display: grid;
}
.hd-nav__btn li a span{
	display: inline-block;
}
.hd-nav__btn__icon{
	--MASK: var(--URL) no-repeat center center / 100%;
	mask: var(--MASK);
	-webkit-mask: var(--MASK);
}
.hd-nav__btn__label{
	line-height: 1.5;
}
@media screen and (min-width: 1201px){
	.hd-nav{
		--NAV_GAP: var(--GAP_50);
	}
	.hd-nav__link li a{
		font-size: var(--FZ_16);
	}
	.hd-nav__btn li a{
		width: 220px;
		padding: 12px 0 12px 19px;
		grid-template-columns: 26px 1fr;
		gap: var(--GAP_15);
	}
	.hd-nav__btn__label{
		font-size: var(--FZ_13);
	}
}
@media screen and (min-width: 768px) and (max-width: 1200px){
	.hd-nav{
		--NAV_GAP: var(--GAP_30);
	}
}
@media screen and (min-width: 951px) and (max-width: 1200px){
	.hd-nav__link li a{
		font-size: var(--FZ_14);
	}
	.hd-nav__btn li a{
		width: 180px;
		padding: 10px 0 10px 15px;
		grid-template-columns: 20px 1fr;
		gap: 10px;
		letter-spacing: 0.05em;
	}
	.hd-nav__btn__label{
		font-size: var(--FZ_12_CONST);
	}
}
@media screen and (min-width: 768px) and (max-width: 950px){
	.hd-nav__link li a{
		font-size: var(--FZ_12_CONST);
	}
	.hd-nav__btn li a{
		width: 130px;
		padding: 6px 0 6px 10px;
		grid-template-columns: 15px 1fr;
		gap: 8px;
		letter-spacing: 0px;
	}
	.hd-nav__btn__label{
		font-size: var(--FZ_10_CONST);
	}
}
@media screen and (min-width: 768px){
	body{
		--HEADER_HEIGHT: clamp( 90px, 10vw, 120px);
	}
	.hd-inner{
		height: var(--HEADER_HEIGHT);
		display: flex;
		align-items: center;
	}
	.hd-logo{
		width: clamp( 100px, 15vw, 200px);
	}
	.hd-nav{
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: var(--NAV_GAP);
	}
	.hd-nav__link{
		display: flex;
		gap: var(--NAV_GAP);
	}
	.hd-nav__link li a{
		color: var(--WHITE);
	}
	.hd-nav__btn{
		display: flex;
		gap: var(--NAV_GAP);
	}
	.hd-nav__btn li a{
		border: 1px solid var(--WHITE);
		background-color: var(--WHITE);
	}
	.hd-nav__btn__icon{
		background-color: var(--TXT_COLOR_BASE);
	}
	.hd-nav__btn__label{
		white-space: nowrap;
	}
}
@media screen and (max-width: 767px){
	#headerarea{
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		padding: 15px;
	}
	.hd-inner{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 45px;
	}
	.hd-logo{
		width: 92px;
	}
	.hd-shopLink{
		width: 38px;
	}
}
/* ■■■■■■■■■■■■■■■■■■■■■■footer■■■■■■■■■■■■■■■■■■■■■■ */
/* ft-shopLink */
@media screen and (max-width: 767px){
	.ft-shopLink{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		opacity: 0;
	}
	body.scroll .ft-shopLink{
		opacity: 0;
		animation: var(--ANIME_FADEIN);
	}
	body.scroll.returnTop .ft-shopLink{
		opacity: 1;
		animation: var(--ANIME_FADEOUT);
	}
	.ft-shopLink a{
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: var(--WHITE);
		padding: 17px 0;
	}
	.ft-shopLink a::before,
	.ft-shopLink a::after{
		content: "";
		--MASK: var(--ICON) no-repeat center center / 100%;
		mask: var(--MASK);
		-webkit-mask: var(--MASK);
		background-color: var(--TXT_COLOR_BASE);
		display: inline-block;
		aspect-ratio: 1/1;
		width: 20px;
	}
	.ft-shopLink a::before{
		--ICON: url(../images/cp/common/icon_tea-utensils.svg);
		order: 2;
		margin-right: 5px;
	}
	.ft-shopLink a::after{
		--ICON: url(../images/cp/common/icon_online-shop.svg);
		order: 3;
	}
	.ft-shopLink a span{
		order: 1;
		display: inline-block;
		margin-right: 10px;
		font-size: 13px;
		letter-spacing: 0.08em;
	}
}
/* ft-bnrLink */
.ft-bnrLink{
	display: grid;
}
.ft-bnrLink__img img{
	border-radius: var(--IMG_BDRS);
}
@media screen and (min-width: 768px){
	.ft-bnrLink{
		grid-template-columns: repeat(5,1fr);
		gap: var(--GAP_20);
	}
	.ft-bnrLink__img{
		margin-bottom: 10px;
	}
	.ft-bnrLink__ttl{
		font-size: var(--FZ_16);
	}
}
@media screen and (max-width: 767px){
	.ft-bnrLink{
		grid-template-columns: repeat(2,1fr);
		gap: 20px 15px;
	}
	.ft-bnrLink__img{
		margin-bottom: 5px;
	}
	.ft-bnrLink__ttl{
		font-size: 16px;
	}
}
/* ft-broadcast */
.ft-broadcast{
	position: fixed;
	z-index: 99;
}
.ft-broadcast.formReset button{
	background: url(../images/common/close.svg) no-repeat center center / 60%;
	aspect-ratio: 1 / 1;
	position: absolute;
	z-index: 2;
}
@media (hover: hover){
	.ft-broadcast.formReset button:hover{
		opacity: 0.7;
	}
}
@media screen and (min-width: 768px){
	.ft-broadcast{
		bottom: 20px;
		width: 136px;
		right: 5%;
	}
	.ft-broadcast.formReset button{
		width: 30px;
		top: 5px;
		right: 5px;
	}
}
@media screen and (max-width: 767px){
	.ft-broadcast{
		width: 86px;
		bottom: 30px;
		right: 2%;
		opacity: 0;
	}
	body.scroll .ft-broadcast{
		opacity: 0;
		animation: var(--ANIME_FADEIN);
	}
	body.scroll.returnTop .ft-broadcast{
		opacity: 1;
		animation: var(--ANIME_FADEOUT);
	}
	.ft-broadcast.formReset button{
		width: 20px;
		top: 0;
		right: 0;
	}
}
/* ft-contents */
.ft-contents{
	background-color: var(--TXT_COLOR_BASE);
}
.ft-link{
	display: grid;
}
.ft-link__item a{
	color: var(--WHITE);
}
.ft-link__sns{
	grid-column: span 2;
}
.ft-copy{
	color: var(--WHITE);
	text-align: center;
	font-family: var(--FF_NOTO);
}
@media screen and (min-width: 768px){
	.ft-wrap{
		display: flex;
		align-items: center;
		padding: 190px 0 160px;
	}
	.ft-logo{
		width: 250px;
	}
	.ft-link{
		width: fit-content;
		margin-left: auto;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--GAP_10);
	}
	.ft-link__item a{
		font-size: var(--FZ_16);
	}
	.ft-link__sns{
		margin-top: 20px;
		border-top: 1px solid var(--GRAY03);
		padding-top: 20px;
	}
	.ft-copy{
		font-size: var(--FZ_12);
		padding-bottom: 10px;
	}
}
@media screen and (max-width: 767px){
	.ft-logo{
		width: 162px;
		margin: 0 auto;
		padding: 50px 0 100px;
	}
	.ft-link{
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.ft-link__item a{
		font-size: 14px;
	}
	.ft-link__sns{
		margin-top: 80px;
	}
	.ft-link__item--spBtm a{
		font-family: var(--FF_NOTO);
		font-size: 12px;
	}
	.ft-link__item--pp{
		text-align: right;
		padding-right: 30px;
		position: relative;
	}
	.ft-link__item--pp::after{
		content: "";
		display: inline-block;
		background: var(--GRAY01);
		width: 1px;
		height: 15px;
		position: absolute;
		top: 5px;
		right: 10px;
	}
	.ft-link__item--terms{
		position: relative;
		left: -10px;
	}
	.ft-copy{
		font-size: 10px;
		padding: 20px 0;
		letter-spacing: 0;
	}
}

/* ■■■■■■■■■■■■■■■■■■■■■■side■■■■■■■■■■■■■■■■■■■■■■ */


/* ■■■■■■■■■■■■■■■■■■■■■■全ページ共通部分■■■■■■■■■■■■■■■■■■■■■■ */
/* -------------------g-heading-------------------- */
.g-heading > span{
	display: block;
}
.g-heading__en{
	font-family: var(--FF_EN);
}
@media screen and (min-width: 768px){
  .g-headingContainer{
		margin-bottom: var(--GAP_50);
	}
	.g-heading--center > span{
		text-align: center;
	}
	.g-heading__ja{
		font-size: var(--FZ_25);
	}
	.g-heading__en{
		font-size: var(--FZ_16);
	}
}
@media screen and (max-width: 767px){
	.g-headingContainer{
		margin-bottom: var(--GAP_20_CONST);
	}
	.g-heading__ja{
		font-size: var(--FZ_22);
	}
	.g-heading__en{
		font-size: var(--FZ_16);
	}
}
/* -------------------g-magazine__list-------------------- */
.g-magazine__list{
	display: grid;
}
.g-magazine__list__thumb img{
	border-radius: var(--IMG_BDRS);
	aspect-ratio: 3/2;
	object-fit: cover;
}
.g-magazine__list__date{
	display: block;
	font-family: var(--FF_NOTO);
	color: var(--GRAY03);
}
@media screen and (min-width: 768px){
	.g-magazine__list{
		grid-template-columns: repeat(3, 1fr);
		gap: var(--GAP_55) var(--GAP_20);
	}
	.g-magazine__list--shop_kusatsuhonten{
		grid-template-columns: repeat(4,1fr);
	}
	.g-magazine__list__thumb{
		margin-bottom: 10px;
	}
	.g-magazine__list__date{
		margin-bottom: 5px;
		font-size: var(--FZ_14);
	}
	.g-magazine__list__ttl{
		font-size: var(--FZ_18);
		margin-bottom: 5px;
	}
	.g-magazine__list__excerpt{
		font-size: var(--FZ_12);
	}
}
@media screen and (max-width: 767px){
	.g-magazine__list{
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 15px;
	}
	.g-magazine__list article:nth-of-type(n+5){
		display: none;
	}
	.g-magazine__list__thumb{
		margin-bottom: 5px;
	}
	.g-magazine__list__date{
		margin-bottom: 5px;
		font-size: 12px;
	}
	.g-magazine__list__ttl{
		font-size: 13px;
	}
	.g-magazine__list__excerpt{
		display: none;
	}
}

/* ■■■■■■■■■■■■ 茶房リニューアルオープンバナー ■■■■■■■■■■■■ */
@media screen and (min-width: 768px){
	.sabou-open-bnr{
		width: 50%;
		margin: 0 auto;
	}
}