@charset "utf-8";
/* CSS Document */

[class*="blk-lsec"] * { box-sizing: border-box; margin: 0; padding: 0; list-style: none;}
[class*="blk-lsec"] *:first-child { margin-top: 0;}
[class*="blk-lsec"] img { width: 100%; height: auto;}

[class*="blk-lsec"] {
	--vw-min: 320;
	--vw-max: 900;
	--vw-range: calc(var(--vw-max) - var(--vw-min));

	/* subtitle L */
	--subttl-lsec1-min: 24px;
	--subttl-lsec1-preferred: calc(24px + (28 - 24) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range)));
	--subttl-lsec1-max: 28px;
	/* subtitle M */
	--subttl-lsec2-min: 20px;
	--subttl-lsec2-preferred: calc(20px + (24 - 20) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range)));
	--subttl-lsec2-max: 24px;
	/* subtitle S */
	--subttl-lsec3-min: 18px;
	--subttl-lsec3-preferred: calc(18px + (20 - 18) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range)));
	--subttl-lsec3-max: 20px;
	/* subtitle SS */
	--subttl-lsec4-min: 16px;
	--subttl-lsec4-preferred: calc(16px + (18 - 16) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range)));
	--subttl-lsec4-max: 18px;

	/* base-text */
	--txt-lsec1-min: 14px;
	--txt-lsec1-preferred: calc(14px + (16 - 14) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range)));
	--txt-lsec1-max: 16px;
	/* sub-text */
/*	--txt-lsec2-min: 12px;
	--txt-lsec2-preferred: calc(12px + (14 - 12) * ((100vw - var(--vw-min)) / var(--vw-range)));
	--txt-lsec2-max: 14px;*/

	/* font-size */
	--lsec-fs-xl: 24px;
	--lsec-fs-ll: 22px;
	--lsec-fs-l: 20px;
	--lsec-fs-m: 18px;
	--lsec-fs-base: 16px;
	--lsec-fs-s: 14px;

	/* color */
	--link-color: 0,163,167;/* 100% / bg7% */
	--link-color2: 209,0,35;/* 60% */	
	--accent-color: 255,255,0;/* 100% / bg20% */
	--bg-color-top: 242,242,242;/* 100% #f2f2f2 */

	/* margin */
	--lsec-mb-xs: 14px;
	--lsec-mb-s: 24px;
	--lsec-mb-m: 36px;
	--lsec-mb-l: 48px;
	--lsec-mb-ll: 70px;/* セクション区切り(total) */
}

[class*="blk-lsec"] br.pcbr { display: none;}

@media screen and (min-width: 900px) {
	[class*="blk-lsec"] {
		/* margin */
		--lsec-mb-xs: 16px;
		--lsec-mb-s: 32px;
		--lsec-mb-m: 48px;
		--lsec-mb-l: 64px;
		--lsec-mb-ll: 80px;/* セクション区切り(total) */
	}
	[class*="blk-lsec"] br.spbr { display: none;}
	[class*="blk-lsec"] br.pcbr { display: block;}
	[class*="blk-lsec"] .pc-txtC { text-align: center;}
}

/* block
------------------------------------------ */
[class*="blk-lsec"] { width: min(100%, 900px); margin: 0 auto;}

/* section END */
[class^="blk-lsec01"] { 
	margin-bottom: clamp(30px, calc(30px + (50 - 30) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range))), 50px);}
.blk-lsec01frm {
	padding: min(4%, 20px);	border: 1px solid rgba(0,0,0,0.5);}

/* box END */
[class^="blk-lsec02"] {
	margin-bottom: clamp(40px, calc(40px + (64 - 40) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range))), 64px);}

/* box(連続) END */
[class^="blk-lsec03"] {
	margin-bottom: clamp(10px, calc(10px + (20 - 10) * ((100vw - (var(--vw-min) * 1px)) / var(--vw-range))), 20px);}


/*	link
------------------------------------------ */
[class*="blk-lsec"] a { color: rgba(var(--link-color),1.0); text-decoration: underline;}
[class*="blk-lsec"] a:hover { text-decoration: none;}
[class*="blk-lsec"] a:hover img { opacity: .8;}


/* title
------------------------------------------ */
/* ページタイトル */
[class*="blk-lsec"] [class*="sub-heading"] { margin-bottom: 0em;	font-weight: bold;}

[class*="blk-lsec"] .sub-heading01 { font-size: clamp(var(--subttl-lsec1-min), var(--subttl-lsec1-preferred), var(--subttl-lsec1-max));}/* 24-28 */
[class*="blk-lsec"] .sub-heading02 { font-size: clamp(var(--subttl-lsec2-min), var(--subttl-lsec2-preferred), var(--subttl-lsec2-max));}/* 20-24 */
[class*="blk-lsec"] .sub-heading03 { font-size: clamp(var(--subttl-lsec3-min), var(--subttl-lsec3-preferred), var(--subttl-lsec3-max));}/* 18-20 */
[class*="blk-lsec"] .sub-heading04 { font-size: clamp(var(--subttl-lsec4-min), var(--subttl-lsec4-preferred), var(--subttl-lsec4-max));}/* 16-18 */

[class*="blk-lsec"] .sub-heading05 {
	font-size: clamp(26px, 22.3px + 1.1765vw, 34px);
	margin-bottom: .2em; line-height: 1.4em;}

/* text
------------------------------------------ */
[class*="blk-lsec"] p {
	font-size: clamp(var(--txt-lsec1-min), var(--txt-lsec1-preferred), var(--txt-lsec1-max));
	line-height: 1.8em;
	vertical-align: top;
/*	margin-bottom: 1em;*/
}
[class*="blk-lsec"] .lead-txt { width: min(96%, 900px); margin: 0 auto 2.2em;}
[class*="blk-lsec"] .lead-txt02 { width: min(96%, 900px); margin: 0 auto 1em;}
[class*="blk-lsec"] .section-txt { margin-bottom: 1em;}


/* botton
------------------------------------------ */
[class*="blk-lsec"] [class*="btn-lsec"] a {
	display: block;
	padding: 20px;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	background-color: #fff;
	font-size: clamp(var(--txt-lsec1-min), var(--txt-lsec1-preferred), var(--txt-lsec1-max));
	text-align: center;
	text-decoration: none;
	font-weight: 600;
}

/* グレーのボタン */
[class*="blk-lsec"] .btn-lsec01 {
	width: min(90%, 700px);	margin: 0 auto var(--lsec-mb-xs);}
[class*="blk-lsec"] .btn-lsec01 a { color: #333;}
[class*="blk-lsec"] .btn-lsec01 a:hover { border-color: rgba(0,0,0,0.8);}
[class*="blk-lsec"] .btn-lsec01 a span { display: block; font-weight: normal;}

[class*="blk-lsec"] .btn-h_bdr01 a { text-decoration: none; color: #555;}


/* ----------------------------------------
	flex
------------------------------------------- */
/*[class^="flx-blk-lsec"] {
	display: flex; sflex-wrap: wrap; justify-content: center;}

[class^="flx-blk-lsec"].nowrap { flex-wrap: nowrap;}
[class^="flx-blk-lsec"].justify-fs { justify-content: flex-start;}

[class^="flx-blk-lsec"].reverse { flex-direction: column-reverse;}
[class^="flx-blk-lsec"].c-reverse { flex-direction: column-reverse;}
@media screen and (min-width: 900px) {
	[class^="flx-blk-lsec"].c-reverse { flex-direction: row-reverse;}
	[class^="flx-blk-lsec"].c-reverse { flex-direction: row;}
}
[class^="flx-blk-lsec"].r-reverse { flex-direction: row-reverse;}
[class^="flx-blk-lsec"].align-center { align-items: center;}
[class^="flx-blk-lsec"].align-end { align-items: flex-end;}
[class^="flx-blk-lsec"].align-start { align-items: flex-start;}*/


/* Basic Module
------------------------------------- */
[class*="flx-lsec"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	flex: 1 0 auto;
	width: 100%;
}
/* wrap */
[class*="flx-lsec"].nowrap { flex-wrap: nowrap;}
/* justify-content */
[class*="flx-lsec"].justify-fs { justify-content: flex-start;}
/* direction */
/*[class*="flx-lsec"].reverse { flex-direction: column-reverse;}
[class*="flx-lsec"].c-reverse { flex-direction: column-reverse;}
@media screen and (min-width: 900px) {
	[class*="flx-lsec"].reverse { flex-direction: row-reverse;}
	[class*="flx-lsec"].c-reverse { flex-direction: row;}
}*/
[class*="flx-lsec"].r-reverse { flex-direction: row-reverse;}
/* align */
[class*="flx-lsec"].align-center { align-items: center;}
[class*="flx-lsec"].align-end { align-items: flex-end;}
[class*="flx-lsec"].align-start { align-items: flex-start;}

[class*="flx-lsec"] > div:not(:first-child) { margin-top: 0;}


/* 隙間大きい方 */
[class*="blk-lsec"] .flx-lsec01 { gap: min(10%, 40px);}
[class*="blk-lsec"] .flx-lsec01 div {
	width: min(100%, 410px);
	margin-bottom: 20px;
}
[class*="blk-lsec"] .flx-lsec01 .sub-heading03 span {
	display: block;
	font-size: 80%;
}

/* 隙間細い方 */
[class*="blk-lsec"] .flx-lsec02 { gap: min(3%, 20px);}

[class*="blk-lsec"] .flx-lsec02 .child {
	width: min(48%, 500px);	margin-bottom: 20px;}
[class*="blk-lsec"] .flx-lsec02 .child:first-child { width: 100%;}

[class*="blk-lsec"] .flx-lsec02 .child2 {
	width: min(100%, 420px); margin-bottom: min(2.5%, 20px);}
[class*="blk-lsec"] .flx-lsec02 .child3 {
	width: min(48%, 200px);	margin-bottom: min(2.5%, 20px); padding: 5px; background-color: #fff;}



/* ----------------------------------------
	page nav
------------------------------------------- */
[class*="blk-lsec"] [class*="pagenav"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
[class*="blk-lsec"] [class*="pagenav"] li {
	width: min(80%, 350px);
	margin-bottom: 5px;
	font-size: clamp(var(--txt-lsec1-min), var(--txt-lsec1-preferred), var(--txt-lsec1-max));
}

/* ランキング（個別ページ？） */
/*[class*="blk-lsec"] ol.pagenav-lanking,*/
[class*="blk-lsec"] ol[class*="pagenav"] {
	counter-reset: my-counter;
}
/*[class*="blk-lsec"] ol.pagenav-lanking li,*/
[class*="blk-lsec"] ol[class*="pagenav"] li {
/*	width: min(50%, 310px);*/
	margin-bottom: 10px;
	padding-left: 30px;
	position: relative;
}
/*[class*="blk-lsec"] ol.pagenav-lanking li::before,*/
[class*="blk-lsec"] ol[class*="pagenav"] li::before {
	content: counter(my-counter);
	counter-increment: my-counter;
	background-color: rgba(0,0,0,0.15);
	color: #222;
	display: block;
	float: left;
	line-height: 22px;
	margin-left: -30px;
	text-align: center;
	height: 22px;
	width: 22px;
	border-radius: 50%;
}
/* ランキング用（1～3位） */
[class*="blk-lsec"] ol.pagenav-lanking li:first-child::before { background-color: rgba(196,169,91,1);}
[class*="blk-lsec"] ol.pagenav-lanking li:nth-child(2)::before { background-color: rgba(165,163,155,1);}
[class*="blk-lsec"] ol.pagenav-lanking li:nth-child(3)::before { background-color: rgba(175,130,107,1);}


/* =============================================================
	TOP用設定
================================================================ */
/* Main visual
------------------------- */
[class*="blk-lsec"] .mv-lsec-sp { display: block; margin-bottom: 28px;}
[class*="blk-lsec"] .mv-lsec-pc { display: none;}
@media screen and (min-width: 900px) {
	[class*="blk-lsec"] .mv-lsec-sp { display: none;}
	[class*="blk-lsec"] .mv-lsec-pc { display: block; margin-bottom: 32px;}
}

/* Check point
------------------------- */
[class*="blk-lsec"] .checkpoint-top {
	font-size: 18px;
	width: min(21em, 600px);
	margin: 0 auto var(--lsec-mb-m);
}
[class*="blk-lsec"] .checkpoint-top li {
	display: block;
	line-height: 2em;
	vertical-align: middle;
/*	margin-left: -40px;*/
}
[class*="blk-lsec"] .checkpoint-top li img {
	width: 30px; margin-right: 5px; vertical-align: middle;
}



/* subtitle section1（揃えたいアイテム）
--------------------------------------------------- */
/* lead */
[class*="blk-lsec"] .subttl-lsec-first {
	width: min(94%, 500px);
	margin: 0 auto 30px;
	font-size: 30px;
	text-align: center;
}
[class*="blk-lsec"] .subttl-lsec-first em {
	display: block;
	padding-top: 70px;
	font-size: 20px;
	font-style: normal;
	vertical-align: bottom;
}

[class*="blk-lsec"] .subttl-lsec-first em img {
	width: 90px; margin: -50px 10px 0 -40px;}/* baloon */
@media screen and (min-width: 900px) {
	[class*="blk-lsec"] .subttl-lsec-first em img {
		width: 120px; margin: -70px 10px 0 -100px;}/* baloon */
}



/**/
[class*="blk-lsec"] .list_recommend { border-top: 1px solid #ddd; padding-top: var(--lsec-mb-m);}
[class*="blk-lsec"] .list_recommend li {
	display: block;
	padding-bottom: var(--lsec-mb-xs);
	margin-bottom: var(--lsec-mb-m);
	border-bottom: 1px solid #ddd;
}


/* おすすめ商品（アイコン） */
[class*="blk-lsec"] .icon_recommend { width: 124px; margin: 0 auto 20px;}

/* おすすめ商品概要テキスト */
[class*="blk-lsec"] .note-lsec01 {
	width: 96%;
	margin: 0 auto 2em;
	font-size: 16px;
}
[class*="blk-lsec"] .note-lsec01 dt { font-weight: 600;}
[class*="blk-lsec"] .note-lsec01 dd { margin-bottom: 1em;}






/* lanking Link (top)
--------------------------------------- */

/* section(title) */
.blk-lsec01-toplanking {padding: 10px; background-color: #f1f1f1; }
@media screen and (min-width: 900px) {
	.blk-lsec01-toplanking {padding: 40px;}
}
/* title block */
.blk-lsec01-toplanking .blockttl-lanking {
	padding: 10px 10px 30px;
	background-color: #ffffff;
}
.blk-lsec01-toplanking .blockttl-lanking .lead-txt {
	max-width: 740px;
}
.blk-lsec01-toplanking .blockttl-lanking .section-nav {
	text-align: center;
	font-size: clamp(var(--subttl-lsec4-min), var(--subttl-lsec4-preferred), var(--subttl-lsec4-max));
	line-height: 2em;
}

/* section（１～３位） */
.blk-lsec01-toplanking .blk-lsec02-toplanking { padding: 20px; margin-bottom: 0; background-color: #fff;}
.blk-lsec01-toplanking .blk-lsec02-toplanking:first-child {margin-bottom: 20px;}

@media screen and (min-width: 900px) {
	.blk-lsec01-toplanking .blk-lsec02-toplanking { padding: 40px;}
}

.blk-lsec01-toplanking .blk-lsec02-toplanking .heading-lanking {
	width: 100%;
	padding: 0.4em 0;
	margin: 1.6em 0 0.6em;
	border-style: solid;
	border-color: rgba(0,0,0,0.6);
	border-width: 1px 0;
	font-size: clamp(var(--subttl-lsec1-min), var(--subttl-lsec1-preferred), var(--subttl-lsec1-max));
	font-weight: 600;
	text-align: center;
}



/* entry lanking */
.blk-lsec02-toplanking .flx-lsec02 .child .subttl_lanking {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

.blk-lsec02-toplanking .flx-lsec02 .child .subttl_lanking img {
	width: 65px;
	margin-right: 5px;
}

.blk-lsec02-toplanking .flx-lsec02 .child:first-child .subttl_lanking img {
	width: 84px;
	margin-right: 5px;
}

.blk-lsec02-toplanking .flx-lsec02 .child .subttl_lanking h4 {
	width: calc(100% - 70px);
	font-size: clamp(var(--subttl-lsec3-min), var(--subttl-lsec3-preferred), var(--subttl-lsec3-max));
	font-weight: 600;
	text-align: left;
}
.blk-lsec02-toplanking .flx-lsec02 .child:first-child .subttl_lanking h4 {
	width: calc(100% - 90px);
	font-size: clamp(var(--subttl-lsec2-min), var(--subttl-lsec2-preferred), var(--subttl-lsec2-max));
	font-weight: 600;
	text-align: left;
}
.blk-lsec02-toplanking .flx-lsec02 .subttl_lanking h4 span {	display: block; font-size: 80%;}

/* スマホ用調整 */
@media screen and (max-width: 899px) {
	.blk-lsec02-toplanking .flx-lsec02 .child .subttl_lanking { text-align: center; 	margin-bottom: 14px;}
	.blk-lsec02-toplanking .flx-lsec02 .child .subttl_lanking img {
		display: block;
		margin: 0 auto!important;
		text-align: center;
	}	
	.blk-lsec02-toplanking .flx-lsec02 .child:not(:first-child) { display: none;}
	.blk-lsec02-toplanking .flx-lsec02 .child:first-child .subttl_lanking h4 {
		width: 100%;
		display: block;
		text-align: center;
	}	
}


/* contents link (top)
----------------------------------- */
.blk-lsec02-topcontents { padding: 10px 10px 1px; background-color: #f1f1f1;}
.blk-lsec02-topcontents p { margin-top: 0.4em!important;}
.blk-lsec02-topcontents .flx-lsec02 .child3 p { font-size: 90%;}

@media screen and (min-width: 900px) {
	.blk-lsec02-topcontents { padding: 20px 20px 1px;}
}
.blk-lsec02-topcontents .flx-lsec02 .child2,
.blk-lsec02-topcontents .flx-lsec02 .child3 {
	padding: min(2%, 20px); background-color: #fff;}


/* category link (top)
----------------------------------- */
.blk-lsec-category {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: min(2%, 20px);
}
.blk-lsec-category dt { width: 100%; margin-top: 10px; font-weight: 600;}

.blk-lsec-category dd {
	width: min(49%, 200px);	margin-bottom: min(2%, 20px);}
.blk-lsec-category dd a {
	display: flex;
	padding: 5px;
	align-items: center;
	border: 1px solid #ccc;
	color: #444;
	text-decoration: none;
}
.blk-lsec-category dd a:hover {	border-color: #999;}
.blk-lsec-category dd img {	width: 50px; margin-right: 5px;}










/* =============================================================
	汎用設定
================================================================ */
/* text-align ( left -> center ) */
[class*="blk-lsec"] .lsec_txtLC { text-align: center;}
[class*="blk-lsec"] .lsec_txtC-L { text-align: left;}

@media screen and (min-width: 900px) {
	[class*="blk-lsec"] .lsec_txtLC { text-align: left;}
	[class*="blk-lsec"] .lsec_txtC-L { text-align: center;}
}



/* background-color */
/*[class*="blk-lsec"].bgclr-top { background-color: var(--bg-color-top);}*/
[class*="blk-lsec"].bgclr-lanking-01 { background-color: var();}
[class*="blk-lsec"].bgclr-lanking-02 { background-color: var();}

/* font-background-color */
[class*="blk-lsec"] .txt-underline {
	display: inline;
	background: linear-gradient(180deg,#fff 0%,#fff 55%,#ffff00 55%,#ffff00 100%);	
}

/* margin-bottom */
[class*="blk-lsec"] .lsec_mb-xs { margin-bottom: var(--lsec-mb-xs)!important;}
[class*="blk-lsec"] .lsec_mb-s { margin-bottom: var(--lsec-mb-s)!important;}
[class*="blk-lsec"] .lsec_mb-m { margin-bottom: var(--lsec-mb-m)!important;}
[class*="blk-lsec"] .lsec_mb-l { margin-bottom: var(--lsec-mb-l)!important;}
[class*="blk-lsec"] .lsec_mb-ll { margin-bottom: var(--lsec-mb-ll)!important;}

/* font-size */
/*[class*="blk-lsec"] .lsec_fs80 { font-size: 80%!important;}
[class*="blk-lsec"] .lsec_fs90 { font-size: 90%!important;}
[class*="blk-lsec"] .lsec_fs110 { font-size: 110%!important;}
[class*="blk-lsec"] .lsec_fs120 { font-size: 120%!important;}
[class*="blk-lsec"] .lsec_fs130 { font-size: 130%!important;}
[class*="blk-lsec"] .lsec_fs140 { font-size: 140%!important;}*/






