@charset "utf-8";
/* CSS Document */
body:not(.page-top) .pane-main { padding-top: 0;}
.pane-left-menu,main,footer { -webkit-text-stroke-width: .2px !important;}
.pane-contents > .container { max-width: 1000px; margin: 0 auto;}
.pane-footer { margin: 0;}

/* =============================================================
	base
================================================================ */
[class^="blk_cafetop"] * { box-sizing: border-box; margin: 0; padding: 0; list-style: none;}
[class^="blk_cafetop"] *:first-child { margin-top: 0;}
[class^="blk_cafetop"] img { width: 100%; height: auto;}

[class^="blk_cafetop"] {

	--vw-min: 320;
	--vw-max: 1000;
	--vw-range: calc(var(--vw-max) - var(--vw-min));
	
	/* color */
	--cf-clr-txt: 58,48,42;/* #3a302a */
	--cf-clr-bg1: 250,248,242;/* #faf8f2 */
	--cf-clr-sub1: 114,133,90;/* #72855a */
	--cf-clr-sub2: 214,168,147;/* #d6a98 */
	--cf-clr-act: 217,108,44;/* #d96c2c  */

	/* margin-bottom */
	--cf-mb-xs: 12px;
	--cf-mb-s: 22px;
	--cf-mb-m: 32px;
	--cf-mb-l: 44px;
	--cf-mb-ll: 60px;/* セクション区切り(total) */

	/* font-sise
	-------------------------- */
	--cf-font-s: 12px;
	--cf-font-base: 14px;/* 本文 */
	--cf-font-m: 16px;
	--cf-font-l: 18px;
	--cf-font-ll: 20px;
	--cf-font-xl: 24px;

	/* subtitle L */
	--subttl-cf1-min: 24px;
	--subttl-cf1-preferred: calc(2.4rem + (2.8 - 2.4) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range)));
	--subttl-cf1-max: 28px;
	/* subtitle M */
	--subttl-cf2-min: 20px;
	--subttl-cf2-preferred: calc(2rem + (2.4 - 2.0) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range)));
	--subttl-cf2-max: 24px;
	/* subtitle S */
	--subttl-cf3-min: 18px;
	--subttl-cf3-preferred: calc(1.8rem + (2.0 - 1.8) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range)));
	--subttl-cf3-max: 20px;
	/* subtitle SS */
	--subttl-cf4-min: 16px;
	--subttl-cf4-preferred: calc(1.8rem + (1.8 - 1.6) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range)));
	--subttl-cf4-max: 18px;

	/* base-text */
	--txt-cf1-min: 14px;
	--txt-cf1-preferred: calc(1.4rem + (1.6 - 1.4) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range)));
	--txt-cf1-max: 16px;
	/* sub-text */
	--txt-cf2-min: 12px;
	--txt-cf2-preferred: calc(1.2rem + (1.4 - 1.2) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range)));
	--txt-cf2-max: 14px;
}

[class^="blk_cafetop"] br.pcbr { display: none;}
/*[class^="blk_cafetop"] .pc-txtC { text-align: left;}*/


@media screen and (min-width: 900px) {

	[class^="blk_cafetop"] {
		/* margin-bottom */
		--cf-mb-xs: 20px;
		--cf-mb-s: 36px;
		--cf-mb-m: 52px;
		--cf-mb-l: 84px;
		--cf-mb-ll: 104px;/* セクション区切り(total) */
		
		/* font-sise */
		--p-font-s: 14px;
		--p-font-base: 16px;/* 本文 */
		--p-font-m: 18px;
		--p-font-l: 20px;
		--p-font-ll: 24px;
		--p-font-xl: 28px;
	}
	
	[class^="blk_cafetop"] br.spbr { display: none;}
	[class^="blk_cafetop"] br.pcbr { display: block;}
	[class^="blk_cafetop"] .pc-txtC { text-align: center;}
}

/* block
------------------------------------------ */
[class^="blk_cafetop"] { width: min(100%, 1000px);}

/* section END */
[class^="blk_cafetop01"] { 
	margin-bottom: clamp(30px, calc(30px + (50 - 30) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range))), 50px);}

/* box END */
[class^="blk_cafetop02"] {
	margin-bottom: clamp(40px, calc(40px + (64 - 40) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range))), 64px);}

/* box(連続) END */
[class^="blk_cafetop03"] {
	margin-bottom: clamp(10px, calc(10px + (20 - 10) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range))), 20px);}


/*	link
------------------------------------------ */
[class^="blk_cafetop"] a { scolor: rgba(var(--cf-clr-sub1),1); text-decoration: underline;}
[class^="blk_cafetop"] a:hover { text-decoration: none;}

[class^="blk_cafetop"] a:hover { opacity: 0.8;}

/* title
------------------------------------------ */
/* ページタイトル */
[class^="blk_cafetop"] [class*="sub-heading"] {	margin-bottom: 0em;	font-weight: bold;}

[class^="blk_cafetop"] .sub-heading01 { font-size: clamp(var(--subttl-cf1-min), var(--subttl-cf1-preferred), var(--subttl-cf1-max));}/* 24-28 */
[class^="blk_cafetop"] .sub-heading02 { font-size: clamp(var(--subttl-cf2-min), var(--subttl-cf2-preferred), var(--subttl-cf2-max));}/* 20-24 */
[class^="blk_cafetop"] .sub-heading03 { font-size: clamp(var(--subttl-cf3-min), var(--subttl-cf3-preferred), var(--subttl-cf3-max));}/* 18-20 */
[class^="blk_cafetop"] .sub-heading04 {	font-size: clamp(var(--subttl-cf4-min), var(--subttl-cf4-preferred), var(--subttl-cf4-max));}/* 16-18 */

/*[class^="blk_cafetop"] .sub-heading05 {
	font-size: clamp(26px, 22.3px + 1.1765vw, 34px);
	margin-bottom: .2em; line-height: 1.4em;}*/

/* text
------------------------------------------ */
[class^="blk_cafetop"] p {
	font-size: clamp(var(--txt-cf1-min), var(--txt-cf1-preferred), var(--txt-cf1-max));
	line-height: 1.8em;
	vertical-align: top;
	margin-bottom: 1em;
}
[class^="blk_cafetop"] .lead-txt { width: min(96%, 900px); margin: 0 auto 2.2em;}
[class^="blk_cafetop"] .section-txt { margin-bottom: 1em;}

/* ---------------------------------------
	botton
------------------------------------------ */
[class^="blk_cafetop"] [class*="btn-cafetop"] a {
	display: block;
	padding: 20px;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	background-color: #fff;
	font-size: clamp(var(--subttl-cf3-min), var(--subttl-cf3-preferred), var(--subttl-cf3-max));
	text-align: center;
	text-decoration: none;
	font-weight: 600;
}
/*[class^="blk_cafetop"] [class*="btn-cafetop"] a:hover {
	padding: 18px;	border-width: 3px;}
*/
/* グレーのボタン */
[class^="blk_cafetop"] .btn-cafetop01 {
	width: min(90%, 560px);
	margin: 0 auto var(--cf-mb-xs);
}
[class^="blk_cafetop"] .btn-cafetop01 a {
	border-color: rgba(0, 0, 0, 0.6);
	color: rgba(var(--cf-clr-txt), 1);
}
[class^="blk_cafetop"] .btn-cafetop01 a:hover { border-color: rgba(0,0,0,0.8); background-color: rgba(var(--cf-clr-txt), .2);}
[class^="blk_cafetop"] .btn-cafetop01 a span { display: block; font-weight: normal;}

/* オレンジのボタン */
[class^="blk_cafetop"] .btn-cafetop02 { width: min(90%, 400px);	margin: 0 auto;}
[class^="blk_cafetop"] .btn-cafetop02 a {
	border-color: rgba(var(--cf-clr-act),0.8);
	color: rgba(var(--cf-clr-act),1);
}
[class^="blk_cafetop"] .btn-cafetop02 a:hover {	border-color: rgba(var(--cf-clr-act),1); background-color: rgba(var(--cf-clr-act), 0.2);}


/* flex
------------------------- */
[class^="blk_cafetop"] [class*="flx"],
[class^="blk_cafetop"][class*="flx"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
[class^="blk_cafetop"] [class*="flx"].justify-fs,
[class^="blk_cafetop"][class*="flx"].justify-fs { justify-content: flex-start;}
[class^="blk_cafetop"] [class*="flx"].justify-sb,
[class^="blk_cafetop"][class*="flx"].justify-sb { justify-content: space-between;}

[class^="blk_cafetop"] [class*="flx"].align-center,
[class^="blk_cafetop"][class*="flx"].align-center { align-items: center;}
[class^="blk_cafetop"] [class*="flx"].align-end,
[class^="blk_cafetop"][class*="flx"].align-end { align-items: flex-end;}
[class^="blk_cafetop"] [class*="flx"].align-start,
[class^="blk_cafetop"][class*="flx"].align-start { align-items: flex-start;}

/* =============================================================
	個別設定
================================================================ */
[class^="blk_cafetop"] .lead-entry { width: min(96%, 900px); margin: 0 auto ;}


/* page nav
------------------------------- */
[class^="blk_cafetop"] .pagenav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	flex-wrap: nowrap;
	gap: min(1%, 54px);
	width: 100%;
	padding: 0;
	margin: 0;
}
[class^="blk_cafetop"] .pagenav li {
	width: min(33%, 300px);
	padding: 0 0 10px;
	margin: 0;
	border-radius: 6px;
	border: 1px solid rgba(var(--cf-clr-act),0.6);
	position: relative;
}
[class^="blk_cafetop"] .pagenav li a {
	display: block;
	padding: clamp(6px, -4.353px + 3.2353vw, 28px);
	padding-bottom: 30px;
	text-decoration: none;
}
[class^="blk_cafetop"] .pagenav li:hover {
	border-color: rgba(var(--cf-clr-act),1);
	background-color: rgba(var(--cf-clr-act), 0.2);
}

[class^="blk_cafetop"] .pagenav li a img {
	width: min(96%, 200px);
	margin: 0 auto 5px;
}
[class^="blk_cafetop"] .pagenav li::after {
	content: "▼";
	font-size: 24px;
	text-align: center;
	color: rgba(var(--cf-clr-sub2),1);
	position: absolute;
	bottom: 0;
	left: calc(50% - 12px);
}
[class^="blk_cafetop"] .pagenav li a .entry-txt {
	font-size: clamp(12px, 8.235px + 1.1765vw, 20px);
	color: rgba(var(--cf-clr-act), 1.0);
	margin: 0 0 0.6em;
	text-align: center;
	font-weight: bold;
	line-height: 1.4em;
}

[class^="blk_cafetop"] .pagenav li a p.sub-txt { display: none; margin: 0;}
[class^="blk_cafetop"] .pagenav li a .nav-cap {	display: none;}

@media screen and (min-width: 900px) {
	[class^="blk_cafetop"] .pagenav li a .nav-cap {	display: block;}
	[class^="blk_cafetop"] .pagenav li a p.sub-txt { display: block!important; color: rgba(var(--cf-clr-txt), 1);}
}


/* オンラインショップのメリット
-------------------------------------------- */
.blk_cafetop02.box_merit {
	padding: min(5%,var(--cf-mb-m)) min(10%,var(--cf-mb-ll));
	background-color: rgba(var(--cf-clr-bg1),1);
}
.blk_cafetop02.box_merit .icon_h01 {
	width: min(100%,600px);
	margin: 0 auto 20px;
	text-align: center;
}
.blk_cafetop02.box_merit ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	justify-content: flex-start;
	align-items: flex-start;
	gap: min(10%, 54px);
	column-rule: 1px solid rgba(var(--cf-clr-act),0.8);
	row-rule: 1px solid rgba(var(--cf-clr-act),0.8);
	
	row-rule-break: normal; /* 行の罫線 T字交点のみで分割 */
	column-rule-break: intersection;  /* 列の罫線 交点で分割 */
	column-rule-inset-cap: 30px;
	rule-inset-junction: 30px;
}
.blk_cafetop02.box_merit ul li {
	width: 100%;
	padding: 30px 0;
}
.blk_cafetop02.box_merit ul li img {
	width: min(50%, 190px);
	margin-bottom: 10px;
}

.blk_cafetop02.box_merit ul li .subttl_merit2 {
	font-size: clamp(24px, 19.294px + 1.4706vw, 34px);
}

@media screen and (min-width: 760px) {
	.blk_cafetop02.box_merit ul li {
		width: 33%;
		width: calc(100%/3 - 10px);
		flex: 1 1 auto;
	}
}


/* カテゴリ
-------------------------------------------- */
[class^="blk_cafetop"] [class*="flx-list"] { width: 100%;}
[class^="blk_cafetop"] .icon_h02 {
	width: min(60%, 200px);
	margin: 0 auto 30px;
	text-align: center;
}
/*[class^="blk_cafetop"] [class*="flx-list"] li img {	margin-bottom: var(--cf-font-s);}*/

/* 3－2 */
[class^="blk_cafetop"] .flx-list01 {
	gap: min(4%, 60px);
	row-rule: 1px solid rgba(var(--cf-clr-act),0.8);
}
[class^="blk_cafetop"] .flx-list01 li {
	width: min(46%, 300px);
	margin: 30px 0;
}
[class^="blk_cafetop"] .flx-list01 li .sub-heading03 {
	text-align: center;
	height: 3em;
	vertical-align: middle;
	margin-bottom: 0;
	line-height: 1.2em;
}

/* 2－2 */
[class^="blk_cafetop"] .flx-list02 { gap: min(3%, 44px);}
[class^="blk_cafetop"] .flx-list02 li {
/*	width: min(47%, 480px);*/
	width: 47%;
	margin-bottom: 2em;
}

/* 4－2 */
[class^="blk_cafetop"] .flx-list03 {
	gap: 20px;
}
[class^="blk_cafetop"] .flx-list03 li {
	width: 48%;
	width: calc(100%/2 - 10px);
	margin-bottom: 20px;
}
@media screen and (min-width: 900px) {
	[class^="blk_cafetop"] .flx-list03 {
		gap: 36px;
	}
	[class^="blk_cafetop"] .flx-list03 li {
		width: 22%;
		width: calc(100%/4 - 27px);
	}

}

/* その他の紹介
-------------------------------------------- */
[class^="blk_cafetop"] .flx_module01 {
	padding: var(--cf-mb-xs);
/*	margin-bottom: var(--cf-mb-xs);*/
	background-color: rgba(var(--cf-clr-bg1),1.0);
	gap: min(4%, 60px);
}
[class^="blk_cafetop"] .flx_module01 .child {
	width: min(96%, 560px);
	margin: 0 auto;
}

@media screen and (max-width: 639px) {
	[class^="blk_cafetop"] .flx_module01 .child {
		margin-bottom: 15px;
	}
}


@media screen and (min-width: 640px) {
	[class^="blk_cafetop"] .flx_module01 .child {
		width: 48%;
		width: calc((100% - 8%)/2);
	}
}


/*
------------------------- */
.blk_cafetop-contact {
	padding: var(--cf-mb-m);
	background-color: rgba(var(--cf-clr-bg1),1.0);
	margin-bottom: var(--cf-mb-m);
}
[class^="blk_cafetop"] .flx_module02 {
	margin-bottom: var(--cf-mb-s);
}
[class^="blk_cafetop"] .flx_module02 .child {
	width: min(90%, 560px);
	margin: 0 auto;
}


@media screen and (min-width: 900px) {

	[class^="blk_cafetop"] .flx_module02 {
		gap: max(3%, 100px);
	}

	[class^="blk_cafetop"] .flx_module02 .child {
		width: 45%;
		width: calc((100% - 18%)/2);
		margin: 0;
	}
}

.blk_cafetop-contact .flx_sns {
	width: min(90%, 270px);
	margin: var(--cf-mb-m) auto 0;
	font-size: var(--cf-font-s);
}

.blk_cafetop-contact .flx_sns li {
	width: 48%;
	width: calc(100%/2 - 10px);
	text-align: center;
}

.blk_cafetop-contact .flx_sns li img {
	width: 95px;
	border: 1px solid #ccc;
	display: block;
	margin: 0 auto;
}

@media screen and (min-width: 900px) {
	.blk_cafetop-contact .flx_sns {
		margin: var(--cf-mb-xs) 0 0;
	}
}





/* =============================================================

================================================================ */
/* font-color */
[class^="blk_cafetop"] .clr-acc { color: rgba(var(--cf-clr-act),1)!important;}
[class^="blk_cafetop"] .clr-sub1 { color: rgba(var(--cf-clr-sub1),1)!important;}

[class^="blk_cafetop"] .cf_fs80 { font-size: 80%!important;}
[class^="blk_cafetop"] .cf_fs90 { font-size: 90%!important;}
[class^="blk_cafetop"] .cf_fs110 { font-size: 110%!important;}
[class^="blk_cafetop"] .cf_fs120 { font-size: 120%!important;}
[class^="blk_cafetop"] .cf_fs130 { font-size: 130%!important;}
[class^="blk_cafetop"] .cf_fs140 { font-size: 140%!important;}

[class^="blk_cafetop"] .cf_mg-xs { margin-bottom: var(--cf-mb-xs)!important;}
[class^="blk_cafetop"] .cf_mg-s { margin-bottom: var(--cf-mb-s)!important;}
[class^="blk_cafetop"] .cf_mg-m { margin-bottom: var(--cf-mb-m)!important;}
[class^="blk_cafetop"] .cf_mg-l { margin-bottom: var(--cf-mb-l)!important;}
[class^="blk_cafetop"] .cf_mg-ll { margin-bottom: var(--cf-mb-ll)!important;}