@charset "utf-8";
/* *************************************************************************************************************
 *	file name:		index.css
 *	Alteration:		2025.03.13
 *	style info:		indexページ用CSS
----------------------------------------------------------------------------------------------------------------
 *	< COMMON > - CssCustomProperties - Setting
 *	< BASE > - TK_BASE - TK_HEADER - Framework_Elements
 *	< PAGE >
 -	simpleShowTarget_v3
 -	mvContainer | メインビジュアル
 -	brandMessageWrap
 -	tkRecommendWrap
 -	tkRecommendReasons____Individual（tkRecommendReasonSection01～04）
 -	tkBukkenlistWrap
----------------------------------------------------------------------------------------------------------------
 * {A}	『スライド1枚目（表紙）の時は[prev/nextナビ]を表示しない』は、index.js でスタイルを記述。
************************************************************************************************************* */

/* ***************************************************************************************************
	COMMON
*************************************************************************************************** */

/* ============================================================================
	Setting
============================================================================ */
/* キャプション類
------------------------------------------------------------------------ */
	.caption,
	.imgcap,
	.imgcapkeep,
	[data-bgcap-parent]::after {
		font-size: clamp(1rem, (20 / 750 * 100vw), 2rem);
	}
@media print, screen and (min-width: 750px) {
	.caption,
	.imgcap,
	.imgcapkeep,
	[data-bgcap-parent]::after {
		font-size: 1.2rem;
	}
}

/* generalButton
------------------------------------------------------------------------ */
	[class*="generalButton"] {
		width: 100%;
		min-height: calc(100 / 750 * 100vw);
		line-height: 1.5;
		font-size: calc(13 / 13 * 1em);		/* =(自要素の想定フォントサイズ / 親要素の想定フォントサイズ * 1em) */
		font-weight: bold;
		padding: 1em 1.16em;
	}
	.generalButton_innerBorder .btnBd {
		inset: calc(5 / 13 * 1em);			/* =(自要素の想定insetサイズ / 親要素の想定フォントサイズ * 1em) */
	}
@media print, screen and (min-width: 750px) {
	[class*="generalButton"] {
		width: 100%;
		max-width: clamp(415px, (462 / 1200 * 100vw), 462px);
		min-height: 70px;
		font-size: clamp(1.6rem, (18 / 1200 * 100vw), 1.8rem);
	}
	.generalButton_innerBorder .btnBd {
		inset: calc(7 / clamp(1.6rem, (18 / 1200 * 100vw), 1.8rem) * 1em);
	}
}


/* ***************************************************************************************************
	BASE
*************************************************************************************************** */

/* ============================================================================
	TK_BASE
============================================================================ */

/* Base
--------------------------------- */
	body {
		line-height: 1.5;
		color: rgb(var(--site-themeColor-text));
		font-family: var(--site-font_family-basic);
		font-size: clamp(1.3rem, (26 / 750 * 100vw), 2.6rem);
		letter-spacing: .1em;
	}
	/* キャプション用途の小さい文字設定は tk_portal_common.css の .caption を使用する */

@media print, screen and (min-width: 750px) {
	body {
		font-size: clamp(1.4rem, (16 / 1200 * 100vw), 1.6rem);
	}
}



/* ============================================================================
	TK_HEADER
============================================================================ */

/* ----------------------------------------------------------------------------
	siteHeaderWrap | 「メインビジュアルを越えたら」ヘッダーを非表示にする
---------------------------------------------------------------------------- */
	.siteHeaderWrap {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 900;
		background: transparent;
	}
	.siteHeaderWrap::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: #fff;
	}

	/* -------------------- 消すもの */
	.siteHeaderWrap::before,
	.siteHeaderCorpNameWrap {
		transition: opacity 200ms ease-out, visibility 200ms ease-out;
	}
	body.js_winScrolled_stickyHeaderHydePositionPassed .siteHeaderWrap::before,
	body.js_winScrolled_stickyHeaderHydePositionPassed .siteHeader .siteHeaderCorpNameWrap {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		/* JSでさらに[aria-hidden="true"]追加しています */
	}
	/* -------------------- 消せないけどポインターイベントはnoneのもの */
	body.js_winScrolled_stickyHeaderHydePositionPassed .siteHeaderWrap,
	body.js_winScrolled_stickyHeaderHydePositionPassed .siteHeader {
		pointer-events: none;
	}
	/* -------------------- ポインターイベントの解除（グロナビやフローティングバナーが操作できなくなるため） */
	body.js_winScrolled_stickyHeaderHydePositionPassed .siteHeader > * {
		pointer-events: auto;
	}



/* ============================================================================
	Framework_Elements
-------------------------------------------------------------------------------
	見出し
============================================================================ */

/* ptHeading
------------------------------------------------------------------------ */
	:where(.ptHeading) .hTxt,
	[class*="hTxtStyh"] {
		display: block;
		line-height: 1.6;
		color: inherit;
		font-weight: bold;
		text-align: center;
		letter-spacing: .1em;
	}
	:where(.ptHeading) .hTxt .kana,
	[class*="hTxtStyh"] .kana {
		letter-spacing: -.02em;
		margin-right: .02em;
	}
	/* -- */
	:where(h2.ptHeading) .hTxt,
	.hTxtStyh2 {
		font-size: calc(43 / 750 * 100vw);
		margin-bottom: 1.65em;
	}
	:where(h3.ptHeading) .hTxt,
	.hTxtStyh3 {
		font-size: calc(34 / 750 * 100vw);
	}
	:where(h4.ptHeading) .hTxt,
	.hTxtStyh4 {
	}
	:where(h5.ptHeading) .hTxt,
	.hTxtStyh5 {
	}
	:where(h6.ptHeading) .hTxt,
	.hTxtStyh6 {
	}
@media print, screen and (min-width: 750px) {
	:where(.ptHeading) .hTxt,
	[class*="hTxtStyh"] {
		line-height: 1.777778;
	}
	:where(h2.ptHeading) .hTxt,
	.hTxtStyh2 {
		font-size: clamp(2.8rem, (40 / 1200 * 100vw), 4rem);
		margin-bottom: 1.325em;
	}
	:where(h3.ptHeading) .hTxt,
	.hTxtStyh3 {
		font-size: clamp(2rem, (27 / 1200 * 100vw), 2.7rem);
	}
}





/* ***************************************************************************************************
	PAGE
*************************************************************************************************** */

/* simpleShowTarget_v3 | setting.js									2024.03
---------------------------------------------------------------------------
div[data-js_show_target="blur"]
div[data-js_show_target_suite="blur"]>div[data-js_show_target_suite_descendant="000ms"]
---------------------------------------------------------------------------
- 対象要素とビューポートが交差したら(=要素が画面に入ったら)関数を実行する（≒inview）
	- 動作例：
	- <div data-js_show_target="blur"> → <div data-js_show_target="blur" data-js_show_target-passed="blur">
- カスタムデータ属性（^= と = の違いに注意。^=先頭の値）
---------------------------------------------------------------------------
- 「単独設定（通常通り）」と「一揃い（スイート）」の2種類を用意。
	- 「単独設定」はターゲット（[data-js_show_target]を設定した要素）自身がアニメーションする。
	- 「一揃い」はターゲット（[data-js_show_target_suite]を設定した要素）の“子孫要素”がアニメーションする。
		- 子孫要素のdata属性の値でディレイ秒数を設定できる。設定したくない場合は値を空にする。（[data-js_show_target_suite_descendant="300ms"] ＝ 300ミリ秒遅延）
---------------------------------------------------------------------------
- 2022.04	開始時の opacity を0より少し高くすることでスクロールを促す（但しChromeはバグがあるため0とする。※CSSハック）
------------------------------------------------------------------------ */
@media screen {
	/* ----------------------------------------------------
		共通設定
	---------------------------------------------------- */
	/* 開始時、初期値 ========== */
	[data-js_show_target],
	[data-js_show_target_suite_descendant] {
		--default-jsShowTarget-transition-opacity:		opacity 1500ms ease-out 300ms;
		--default-jsShowTarget-transition-translate:	transform 1000ms ease-out 100ms;
		--default-jsShowTarget-transition-blur:			filter 1000ms ease-out 200ms;
		/*opacity: .05;*/
		opacity: 0;
	}
	_:lang(x)::-internal-media-controls-overlay-cast-button, /* CSSハック */
	[data-js_show_target],
	[data-js_show_target_suite_descendant] {	/* for Chrome. | Chromeでは「transform + opacity」で「transition (animation) のフェードイン」をするときに、「開始時の opacity が 0 以外」では正しくフェードしないバグがある模様。 */
		opacity: 0;
	}
	/* 終了時 ================== */
	[data-js_show_target-passed],
	[data-js_show_target_suite-passed] :where([data-js_show_target_suite_descendant]) {
		opacity: 1;
	}
	/* ----------------------------------------------------
		単独設定（通常）
	-------------------------------------------------------
	 * 2023.09	データ属性の値を変更、設定を追加
	-------------------------------------------------------
	フェードイン、上へスライド、ブラー、
	ストレッチレフト、ストレッチライト
	---------------------------------------------------- */
	[data-js_show_target="fadeIn"] {				transition: var(--default-jsShowTarget-transition-opacity);}

	[data-js_show_target="fadeIn_slowly"] {			transition: opacity 2500ms ease-out 100ms;}
	[data-js_show_target="fadeIn_quickly"] {		transition: opacity 900ms ease-out 100ms;}

	[data-js_show_target^="moveUp"] {				transition: var(--default-jsShowTarget-transition-opacity), var(--default-jsShowTarget-transition-translate);}
	[data-js_show_target="moveUp20"] {				transform: translateY(20px);}
	[data-js_show_target="moveUp30"] {				transform: translateY(30px);}
	[data-js_show_target="moveUp40"] {				transform: translateY(40px);}
	[data-js_show_target-passed^="moveUp"] {		transform: translateY(0);}

	[data-js_show_target^="moveDown"] {				transition: var(--default-jsShowTarget-transition-opacity), var(--default-jsShowTarget-transition-translate);}
	[data-js_show_target="moveDown20"] {			transform: translateY(-20px);}
	[data-js_show_target="moveDown30"] {			transform: translateY(-30px);}
	[data-js_show_target="moveDown40"] {			transform: translateY(-40px);}
	[data-js_show_target-passed^="moveDown"] {		transform: translateY(0);}

	[data-js_show_target^="moveLeft"] {				transition: var(--default-jsShowTarget-transition-opacity), var(--default-jsShowTarget-transition-translate);}
	[data-js_show_target="moveLeft20"] {			transform: translateX(20px);}
	[data-js_show_target="moveLeft30"] {			transform: translateX(30px);}
	[data-js_show_target="moveLeft40"] {			transform: translateX(40px);}
	[data-js_show_target-passed^="moveLeft"] {		transform: translateX(0);}

	[data-js_show_target^="moveRight"] {			transition: var(--default-jsShowTarget-transition-opacity), var(--default-jsShowTarget-transition-translate);}
	[data-js_show_target="moveRight20"] {			transform: translateX(-20px);}
	[data-js_show_target="moveRight30"] {			transform: translateX(-30px);}
	[data-js_show_target="moveRight40"] {			transform: translateX(-40px);}
	[data-js_show_target-passed^="moveRight"] {		transform: translateX(0);}

	[data-js_show_target="blur"] {					opacity: .7; filter: blur(6px); transition: var(--default-jsShowTarget-transition-opacity), var(--default-jsShowTarget-transition-blur);}
	[data-js_show_target-passed="blur"] {			opacity: 1; filter: blur(0);}

	[data-js_show_target="blur_opacity0"] {			opacity: 0; filter: blur(6px); transition: var(--default-jsShowTarget-transition-opacity), var(--default-jsShowTarget-transition-blur);}
	[data-js_show_target-passed="blur_opacity0"] {	opacity: 1; filter: blur(0);}

	[data-js_show_target="blur_slowly"] {			opacity: .7; filter: blur(6px); transition: var(--default-jsShowTarget-transition-opacity), filter 2000ms ease-out 600ms;}
	[data-js_show_target-passed="blur_slowly"] {	opacity: 1; filter: blur(0);}

	[data-js_show_target="blur_slowly_opacity0"] {			opacity: 0; filter: blur(6px); transition: var(--default-jsShowTarget-transition-opacity), filter 2000ms ease-out 600ms;}
	[data-js_show_target-passed="blur_slowly_opacity0"] {	opacity: 1; filter: blur(0);}

	[data-js_show_target^="scale"] {				opacity: 0; scale: 0; transition: var(--default-jsShowTarget-transition-opacity), scale 1500ms ease-out 300ms;}
	[data-js_show_target="scale095"] {				scale: 0.95;}
	[data-js_show_target="scale105"] {				scale: 1.05;}
	[data-js_show_target="scale110"] {				scale: 1.1;}
	[data-js_show_target="scale115"] {				scale: 1.15;}
	[data-js_show_target="scale120"] {				scale: 1.2;}
	[data-js_show_target-passed^="scale"] {			opacity: 1; scale: 1;}

	[data-js_show_target="fadeInStretchLeft"],
	[data-js_show_target="fadeInStretchRight"] {		opacity: 0; transition: opacity 500ms, clip-path 1000ms; transition-delay: 100ms; transition-timing-function: ease-out;}
	[data-js_show_target="fadeInStretchLeft"] {			clip-path: inset(0 100% 0 0);}
	[data-js_show_target="fadeInStretchRight"] {		clip-path: inset(0 0 0 100%);}
	[data-js_show_target-passed="fadeInStretchLeft"],
	[data-js_show_target-passed="fadeInStretchRight"] {	opacity: 1; clip-path: inset(0 0 0 0);}

	[data-js_show_target="fadeInStretchUp"],
	[data-js_show_target="fadeInStretchDown"] {			opacity: 0; transition: opacity 500ms, clip-path 1000ms; transition-delay: 100ms; transition-timing-function: ease-out;}
	[data-js_show_target="fadeInStretchUp"] {			clip-path: inset(100% 0 0 0);}
	[data-js_show_target="fadeInStretchDown"] {			clip-path: inset(0 0 100% 0);}
	[data-js_show_target-passed="fadeInStretchUp"],
	[data-js_show_target-passed="fadeInStretchDown"] {	opacity: 1; clip-path: inset(0 0 0 0);}

	[data-js_show_target="fadeIn_scaleGetBigger_blur"] {		opacity: 0;	transform: scale(.5); filter: blur(10px);}
	[data-js_show_target-passed="fadeIn_scaleGetBigger_blur"] {	animation: 700ms ease both M_fadeIn_and_scaleGetBigger_and_blur;}

	[data-js_show_target="fadeIn_scaleGetBigger_blur myEaseOutBack"] {			opacity: 0;	transform: scale(.5); filter: blur(10px);}
	[data-js_show_target-passed="fadeIn_scaleGetBigger_blur myEaseOutBack"] {	animation: 700ms var(--M-easing-myEaseOutBack_01) both M_fadeIn_and_scaleGetBigger_and_blur;}


	/* ----------------------------------------------------
		一揃い(suite) | 子孫要素にスタイルを設定する
	-------------------------------------------------------
	フェードイン、上へスライド
	---------------------------------------------------- */
	[data-js_show_target_suite="fadeIn"] :where([data-js_show_target_suite_descendant]) {			transition: var(--default-jsShowTarget-transition-opacity);}

	[data-js_show_target_suite="fadeIn_slowly"] :where([data-js_show_target_suite_descendant]) {	transition: opacity 2500ms ease-out 100ms;}
	[data-js_show_target_suite="fadeIn_quickly"] :where([data-js_show_target_suite_descendant]) {	transition: opacity 900ms ease-out 100ms;}

	[data-js_show_target_suite^="moveUp"] :where([data-js_show_target_suite_descendant]) {			transition: var(--default-jsShowTarget-transition-opacity), var(--default-jsShowTarget-transition-translate);}
	[data-js_show_target_suite="moveUp20"] :where([data-js_show_target_suite_descendant]) {			transform: translateY(20px);}
	[data-js_show_target_suite="moveUp30"] :where([data-js_show_target_suite_descendant]) {			transform: translateY(30px);}
	[data-js_show_target_suite="moveUp40"] :where([data-js_show_target_suite_descendant]) {			transform: translateY(40px);}
	[data-js_show_target_suite-passed^="moveUp"] :where([data-js_show_target_suite_descendant]) {	transform: translateY(0);}

	[data-js_show_target_suite^="moveLeft"] :where([data-js_show_target_suite_descendant]) {		transition: var(--default-jsShowTarget-transition-opacity), var(--default-jsShowTarget-transition-translate);}
	[data-js_show_target_suite="moveLeft20"] :where([data-js_show_target_suite_descendant]) {		transform: translateX(20px);}
	[data-js_show_target_suite="moveLeft30"] :where([data-js_show_target_suite_descendant]) {		transform: translateX(30px);}
	[data-js_show_target_suite="moveLeft40"] :where([data-js_show_target_suite_descendant]) {		transform: translateX(40px);}
	[data-js_show_target_suite-passed^="moveLeft"] :where([data-js_show_target_suite_descendant]) {	transform: translateX(0);}

}



/* ============================================================================
	mvContainer | メインビジュアル
============================================================================ */
	/* ////////////////////////////////////////////////////////////
	 * メインビジュアル以降のコンテンツの上に、position: fixed;されているメインビジュアルの要素が重なるのを防ぐ。
	 * 第一候補：.pin-spacer { z-index: -1; }
	 * 第二候補：body.js_winScrolled_stickyHeaderHydePositionPassed .mvContainer { visibility: hidden; pointer-events: none; }
	 * 第三候補：「メインビジュアルエリアを過ぎたら position: fixed; を解除する」JSを追加する
	//////////////////////////////////////////////////////////// */

	/* 第一候補 */
		/*.pin-spacer { z-index: -1; }*/

	/* 第二候補 */
		.mvContainer { transition: visibility 30ms ease-out; }
		body.js_winScrolled_stickyHeaderHydePositionPassed .mvContainer { visibility: hidden; pointer-events: none; }

	/* ///////////////////////////////////////////////////////// */
	
	.mvContainer {
		display: flex;
		flex-direction: column;
		position: relative;
		width: 100%;
		height: 100vh;
	}
	.mvContainer .panel {
		height: 100dvh;
		height: 200dvh;
	}
	.mvContainer [data-bg] {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		transition: opacity 800ms ease 0s;
	}
	.mvContainer [data-bg] .mvPic img {
		width: 100%;
		height: 100vh;
		object-fit: cover;
	}
	.mvContainer [data-bg]:not(.bg1) {
		opacity: 0 !important;
	}
	.mvContainer[data-slide-num="1"] [data-bg].bg2,
	.mvContainer [data-bg].bg2.is-show {
		opacity: 1 !important;
	}
	.mvContainer[data-slide-num="2"] [data-bg].bg3,
	.mvContainer [data-bg].bg3.is-show {
		opacity: 1 !important;
	}
	.mvContainer .mvBrandSlogan {
		position: absolute;
		inset: 0;
		height: 100vh;
		z-index: 10;
		pointer-events: none;
	}
	.mvContainer .mvBrandSlogan img {
		--_top:	calc((72 / 1335 * 100%) + var(--site-stickyHeader-height));		/* 高さから求めるので % を使用する */
		--floatingBanner_bukkenlist-height:	calc((165 / 750 * 100vw) + 0px);	/* =(フローティングバナーの高さ + bottomの値) ※ざっくり対応 */
		position: absolute;
		inset: var(--_top) 0 auto;
		z-index: 0;
		width: calc(206 / 750 * 100vw);
		max-width: 206px;
		height: calc(90% - var(--_top) - var(--floatingBanner_bukkenlist-height));
		min-height: 60px;														/* 不要ならこの設定は削除可 */
		object-fit: contain !important;
		object-position: 50% 0%;
		margin: auto;
		pointer-events: auto;
	}
	/* -- Individual -- */
	.mvContainer [data-bg].bg2 .mvPic img {
		object-position: 5% center;
	}
@media print, screen and (min-width: 750px) {
	.mvContainer .mvBrandSlogan img {
		--_top: calc((100 / 823 * 100%) + var(--site-stickyHeader-height));
		--floatingBanner_bukkenlist-height:	calc(130px + 20px);
		width: 13vw;
		max-width: 89px;
	}
	/* -- Individual -- */
	.mvContainer [data-bg].bg2 .mvPic img {
		object-position: 41.5% center;
	}
	.mvContainer [data-bg].bg3 .mvPic img {
		object-position: 60% center;
	}
}





/* ============================================================================
	brandMessageWrap
============================================================================ */
	.brandMessageWrap {
		background: rgb(var(--site-themeColor-base));
	}


/* brandMessageFigureWrap
------------------------------------------------------------------------ */
	.brandMessageFigureWrap {
		overflow: clip;
	}
	.brandMessageFigureBox {
		position: relative;
		z-index: 0;
		padding-top: calc(130 / 750 * 100vw);
		padding-bottom: calc(225 / 750 * 100vw);
	}
	.brandMessageFigureItem {
							/*background: rgb(255 0 0 / .25);*/
		position: relative;
		z-index: 2;
		width: calc((560 + 32) / 750 * 100vw); /* padding-right分を増やす */
		margin-left: auto;
		margin-right: auto;
		padding-right: calc(32 / 750 * 100vw); /* 位置調整 */
	}
	.brandMessageFigurePh {
							/*opacity: .2;*/
		--_parentBoxH: 1814;	/* ウィンドウ幅750pxの時の .brandMessageFigureBox の高さ */
		--_parentBoxW: 750;		/* ウィンドウ幅750pxの時の .brandMessageFigureBox の幅 */
		position: absolute;
		z-index: 1;
		clip-path: circle(50%);
	}
	.ph01.brandMessageFigurePh {
		top:	calc(100 / var(--_parentBoxH) * 100%);	/* top = calc(phのポジション / 親コンテンツの高さ * 100%) */
		left:	calc(291 / var(--_parentBoxW) * 100vw);
		width:	calc(314 / var(--_parentBoxW) * 100vw);
	}
	.ph02.brandMessageFigurePh {
		top:	calc(382 / var(--_parentBoxH) * 100%);
		left:	calc(470 / var(--_parentBoxW) * 100vw);
		width:	calc(290 / var(--_parentBoxW) * 100vw);
		z-index: 3;
	}
	.ph03.brandMessageFigurePh {
		top:	calc(760 / var(--_parentBoxH) * 100%);
		left:	calc(-178 / var(--_parentBoxW) * 100vw);
		width:	calc(314 / var(--_parentBoxW) * 100vw);
	}
	.ph04.brandMessageFigurePh {
		top:	calc(1096 / var(--_parentBoxH) * 100%);
		left:	calc(238 / var(--_parentBoxW) * 100vw);
		width:	calc(182 / var(--_parentBoxW) * 100vw);
	}
	.ph05.brandMessageFigurePh {
		top:	calc(1372 / var(--_parentBoxH) * 100%);
		left:	calc(222 / var(--_parentBoxW) * 100vw);
		width:	calc(292 / var(--_parentBoxW) * 100vw);
	}
	.brandMessageFigurePh img {
	}
@media print, screen and (min-width: 750px) {
	.brandMessageFigureBox {
		padding-top: clamp(95px, (171 / 1920 * 100vw), 171px);
		padding-bottom: clamp(128px, (230 / 1920 * 100vw), 230px);
	}
	.brandMessageFigureItem {
		width: clamp(400px, (717 / 1920 * 100vw), 717px);
		padding-right: 0;
	}
	.brandMessageFigurePh {
		--_parentBoxH: 1321;	/* ウィンドウ幅1920pxの時の .brandMessageFigureBox の高さ */
		--_parentBoxW: 1920;	/* ウィンドウ幅1920pxの時の .brandMessageFigureBox の幅 */
	}
	.ph01.brandMessageFigurePh {
		top:	calc(73 / var(--_parentBoxH) * 100%);
		left:	calc(50% + (clamp(59px, (105 / var(--_parentBoxW) * 100vw), 105px) * -1) );
		width:	clamp(177px, (314 / var(--_parentBoxW) * 100vw), 314px);
	}
	.ph02.brandMessageFigurePh {
		top:	calc(271 / var(--_parentBoxH) * 100%);
		left:	calc(50% + (clamp(195px, (347 / var(--_parentBoxW) * 100vw), 347px) * 1) );
		width:	clamp(163px, (290 / var(--_parentBoxW) * 100vw), 290px);
	}
	.ph03.brandMessageFigurePh {
		top:	calc(453 / var(--_parentBoxH) * 100%);
		left:	calc(50% + (clamp(397px, (706 / var(--_parentBoxW) * 100vw), 706px) * -1) );
		width:	clamp(174px, (308 / var(--_parentBoxW) * 100vw), 308px);
	}
	.ph04.brandMessageFigurePh {
		top:	calc(902 / var(--_parentBoxH) * 100%);
		left:	calc(50% + (clamp(153px, (272 / var(--_parentBoxW) * 100vw), 272px) * -1) );
		width:	clamp(102px, (182 / var(--_parentBoxW) * 100vw), 182px);
	}
	.ph05.brandMessageFigurePh {
		top:	calc(773 / var(--_parentBoxH) * 100%);
		left:	calc(50% + (clamp(235px, (417 / var(--_parentBoxW) * 100vw), 417px) * 1) );
		width:	clamp(165px, (292 / var(--_parentBoxW) * 100vw), 292px);
	}
}


/* brandMessageSlideWrap
------------------------------------------------------------------------ */
	.brandMessageSlideWrap {
		/*overflow: clip;*/
	}
	.brandMessageSlideBox {
	}
	.brandMessageSlideBox .slideItem {
		position: relative;
		z-index: 0;
	}
	.brandMessageSlideBox .slideItemHeader {
		position: absolute;
		inset: 0;
		z-index: 1;
		color: inherit;
		font-weight: bold;
		text-align: center;
		letter-spacing: .1em;
		/*background: linear-gradient(to bottom, #fff 21%, rgb(255 255 255 / .6) 27%, rgb(255 255 255 / .2) 31% , rgb(255 255 255 / 0) 35% 100%);*/
		background: linear-gradient(to bottom, #fff 12.5%, rgb(255 255 255 / .6) 17.5%, rgb(255 255 255 / .2) 22% , rgb(255 255 255 / 0) 35% 100%);
		padding-top: calc(21 / 750 * 100vw);
		padding-left: .5em;
		padding-right: .5em;
	}
	.brandMessageSlideBox .slideItemHeader .heading {
		line-height: 1.71;
		font-size: calc(32 / 750 * 100vw);
	}
	.brandMessageSlideBox .slideItemHeader .text {
		line-height: 1.52;
		font-size: calc(25 / 750 * 100vw);
		margin-top: .1em;
	}
@media print, screen and (min-width: 750px) {
	.brandMessageSlideBox .slideItemHeader {
		/*background: linear-gradient(to bottom, #fff 14%, rgb(255 255 255 / .9) 25%, rgb(255 255 255 / .8) 28%, rgb(255 255 255 / .1) 38% , rgb(255 255 255 / 0) 42% 100%);*/
		background: linear-gradient(to bottom, rgb(255 255 255 / .94) 1%, rgb(255 255 255 / .88) 4%, rgb(255 255 255 / .57) 18%, rgb(255 255 255 / .15) 26% , rgb(255 255 255 / 0) 34% 100%);
		padding-top: calc(14 / 750 * 100vw);
	}
	.brandMessageSlideBox .slideItemHeader .heading {
		font-size: calc(21 / 750 * 100vw);
	}
	.brandMessageSlideBox .slideItemHeader .text {
		font-size: calc(11.25 / 750 * 100vw);
		margin-top: .2em;
	}
	.brandMessageSlideBox .slideItemHeader .text br {
		display: none;
	}
}
@media print, screen and (min-width: 1200px) {
	.brandMessageSlideBox .slideItemHeader {
		/*background: linear-gradient(to bottom, #fff 9%, rgb(255 255 255 / .9) 17%, rgb(255 255 255 / .8) 20%, rgb(255 255 255 / .1) 40% , rgb(255 255 255 / 0) 45% 100%);*/
		/*background: linear-gradient(to bottom, rgb(255 255 255 / .94) 1%, rgb(255 255 255 / .87) 9%, rgb(255 255 255 / .83) 12%, rgb(255 255 255 / .1) 30% , rgb(255 255 255 / 0) 35% 100%);*/
		background: linear-gradient(to bottom, rgb(255 255 255 / .92) 1%, rgb(255 255 255 / .77) 9%, rgb(255 255 255 / .68) 11%, rgb(255 255 255 / .11) 24% , rgb(255 255 255 / 0) 30.5% 100%);
		padding-top: calc(30 / 1920 * 100vw);
	}
	.brandMessageSlideBox .slideItemHeader .heading {
		font-size: calc(27 / 1920 * 100vw);
	}
	.brandMessageSlideBox .slideItemHeader .text {
		font-size: calc(21 / 1920 * 100vw);
	}
}

/* brandMessageSlideSwiper（スワイパーUI等）
---------------------------------------------------- */
	/* ---------- slide */
	[id="brandMessageSlideSwiper"] .swiper-slide {
		width: calc(660 / 750 * 100vw);				/* jsの slidesPerView の代わり */
		padding: 0 calc((15 / 750 * 100vw) / 2);	/* jsの spaceBetween の代わり */
	}
	[id="brandMessageSlideSwiper"] .swiper-slide .slideItem {
		opacity: .5;
		transition: opacity 500ms ease-out 50ms;
	}
	[id="brandMessageSlideSwiper"] .swiper-slide-active .slideItem {
		opacity: 1;
	}
	/* ---------- pagination */
	[id="brandMessageSlideSwiper"] .swiper-pagination {
		position: static;
		margin-top: calc(30 / 750 * 100vw);
		padding-bottom: 2px; /* 微調整（paginationを外に出したため、下辺が欠けるのを防ぐ） */
	}
	[id="brandMessageSlideSwiper"] .swiper-pagination-bullet {
		display: inline-grid;
		place-content: center;
		width:	calc(78 / 750 * 100vw);
		height:	calc(78 / 750 * 100vw);
		line-height: 1;
		font-size: calc(30 / 750 * 100vw);
		text-align: center;
		letter-spacing: .1em;
		background: transparent;
		border: 1px solid #cbcbcb;
		opacity: 1;
	}
	[id="brandMessageSlideSwiper"].swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0 1.166667em;
	}
	[id="brandMessageSlideSwiper"] .swiper-pagination-bullet .inner {
		translate: .05em -.08em;
	}
	[id="brandMessageSlideSwiper"] .swiper-pagination-bullet-active {
		background: #fff;
		border: 1px solid currentColor;
		opacity: 1;
	}
	/* ---------- navigation */
	[id="brandMessageSlideSwiper"] .swiper-button-prev,
	[id="brandMessageSlideSwiper"] .swiper-container-rtl .swiper-button-next,
	[id="brandMessageSlideSwiper"] .swiper-button-next,
	[id="brandMessageSlideSwiper"] .swiper-container-rtl .swiper-button-prev {
		--_translateX_add: 0px; /* '画面に入ったらフェードイン'などで値を変更したい場合使用する */
		--_translateY_add: 0px; /* '画面に入ったらフェードイン'などで値を変更したい場合使用する */
		width: calc(45 / 750 * 100vw);
		height: auto;
		aspect-ratio: 45 / 100;
		transform: translate(calc(0% + var(--_translateX_add)), calc((-50% + -40%) + var(--_translateY_add)));
		/*transform: translate(0, calc(-50% + -40%));*/ /* feeling. | -50%は初期値。paginationを外に出したため追加でマイナスする */
		/*animation: 1000ms ease-out both 700ms M_fadeIn;*/
	}
	[id="brandMessageSlideSwiper"] .swiper-button-next.swiper-button-disabled,
	[id="brandMessageSlideSwiper"] .swiper-button-prev.swiper-button-disabled {
		/*display: none;*/
		opacity: .35 !important;
		cursor: auto;
		pointer-events: none;
	}
	[id="brandMessageSlideSwiper"] .swiper-button-prev,
	[id="brandMessageSlideSwiper"] .swiper-container-rtl .swiper-button-next {
		left: 0;
		background: rgb(50 50 50 / .75);
	}
	[id="brandMessageSlideSwiper"] .swiper-button-next,
	[id="brandMessageSlideSwiper"] .swiper-container-rtl .swiper-button-prev {
		right: 0;
		background: rgb(50 50 50 / .75);
	}
	[id="brandMessageSlideSwiper"] .swiper-button-prev::after,
	[id="brandMessageSlideSwiper"] .swiper-button-next::after {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 55%;
		height: auto;
		aspect-ratio: 1;
		margin-top: 0;
		border-width: 2px 2px 0 0;
	}
	[id="brandMessageSlideSwiper"] .swiper-button-prev::after {
		transform: none;
		rotate: -135deg;
		translate: calc(23% + -50%) -50%;
	}
	[id="brandMessageSlideSwiper"] .swiper-button-next::after {
		transform: none;
		rotate: 45deg;
		translate: calc(-23% + -50%) -50%;
	}

			/* ////////////////////////////////////////////////////////////////////////////////
			 *	'javascript無効状態'の設定 | tk_portal_general.jsの[bodyClassSetting]連携有
			//////////////////////////////////////////////////////////////////////////////// */
			body:not(.is-js) [id="brandMessageSlideSwiper"] .swiper-wrapper {
				display: block !important; /* 'javascript無効状態'の時は非表示を解除する */
				/*margin: min(8vw, 40px) 0;*/
				padding: 50px 5px;
				border: 1px solid rgb(255 255 255 / .7);
			}
			body:not(.is-js) [id="brandMessageSlideSwiper"] .swiper-slide {
				margin-left: auto;
				margin-right: auto;
			}
			body:not(.is-js) [id="brandMessageSlideSwiper"] .swiper-slide + .swiper-slide {
				border-top: 50px solid transparent;
			}
			body:not(.is-js) [id="brandMessageSlideSwiper"] .swiper-slide .slideItem {
				opacity: 1;
			}
			body:not(.is-js) [id="brandMessageSlideSwiper"] .swiper-pagination,
			body:not(.is-js) [id="brandMessageSlideSwiper"] .swiper-button-prev,
			body:not(.is-js) [id="brandMessageSlideSwiper"] .swiper-button-next {
				display: none !important;
			}

@media print, screen and (min-width: 750px) {
	/* ---------- slide */
	[id="brandMessageSlideSwiper"] .swiper-slide {
		width: calc(510 / 750 * 100vw);
		padding: 0 calc((50 / 750 * 100vw) / 2);
	}
	/* ---------- pagination */
	[id="brandMessageSlideSwiper"] .swiper-pagination {
		margin-top: max(24px, (40 / 1920 * 100vw));
	}
	[id="brandMessageSlideSwiper"] .swiper-pagination-bullet {
		width:	max(30px, (47 / 1920 * 100vw));
		height:	max(30px, (47 / 1920 * 100vw));
		font-size: max(12px, (18 / 1920 * 100vw));
	}
	/* ---------- navigation */
	[id="brandMessageSlideSwiper"] .swiper-button-prev,
	[id="brandMessageSlideSwiper"] .swiper-container-rtl .swiper-button-next,
	[id="brandMessageSlideSwiper"] .swiper-button-next,
	[id="brandMessageSlideSwiper"] .swiper-container-rtl .swiper-button-prev {
		width: calc(22 / 750 * 100vw);
	}
	[id="brandMessageSlideSwiper"] .swiper-button-prev,
	[id="brandMessageSlideSwiper"] .swiper-container-rtl .swiper-button-next {
		left: 11.25vw;
	}
	[id="brandMessageSlideSwiper"] .swiper-button-next,
	[id="brandMessageSlideSwiper"] .swiper-container-rtl .swiper-button-prev {
		right: 11.25vw;
	}
}
@media print, screen and (min-width: 1200px) {
	/* ---------- slide */
	[id="brandMessageSlideSwiper"] .swiper-slide {
		width: calc(1000 / 1920 * 100vw);
		padding: 0 calc((105 / 1920 * 100vw) / 2);
	}
	/* ---------- pagination */
	/* ---------- navigation */
	[id="brandMessageSlideSwiper"] .swiper-button-prev,
	[id="brandMessageSlideSwiper"] .swiper-container-rtl .swiper-button-next,
	[id="brandMessageSlideSwiper"] .swiper-button-next,
	[id="brandMessageSlideSwiper"] .swiper-container-rtl .swiper-button-prev {
		width: calc(45 / 1920 * 100vw);
	}
	[id="brandMessageSlideSwiper"] .swiper-button-prev,
	[id="brandMessageSlideSwiper"] .swiper-container-rtl .swiper-button-next {
		left: 20vw;
	}
	[id="brandMessageSlideSwiper"] .swiper-button-next,
	[id="brandMessageSlideSwiper"] .swiper-container-rtl .swiper-button-prev {
		right: 20vw;
	}
}

/* =================================
 * brandMessageSlideWrap | '画面に入ったらフェードイン'
------------------------------------
 * index.jsの2か所のスクリプトを使用。
 - 「simpleShowTarget_v3」で画面に入った判定([data-js_show_target-passed])を追加する
 - 「BrandMessageSlideSwiper」でロードされたらクラス(.js_isOnLoad)を追加する
================================= */
	/* ---------- 初期値（画面外の時の設定） */
	[data-js_show_target="brandMessageSlideWrap"] [id="brandMessageSlideSwiper"] .swiper-button-prev,
	[data-js_show_target="brandMessageSlideWrap"] [id="brandMessageSlideSwiper"] .swiper-container-rtl .swiper-button-next {
		--_translateX_add: -100%;
		opacity: 0;
		transition: transform 1000ms ease-out 700ms, opacity 1000ms ease-out 700ms;
	}
	[data-js_show_target="brandMessageSlideWrap"] [id="brandMessageSlideSwiper"] .swiper-button-next,
	[data-js_show_target="brandMessageSlideWrap"] [id="brandMessageSlideSwiper"] .swiper-container-rtl .swiper-button-prev {
		--_translateX_add: 100%;
		opacity: 0;
		transition: transform 1000ms ease-out 700ms, opacity 1000ms ease-out 700ms;
	}
	/* ---------- 初期値（画面内に入った時の設定） */
	.js_isOnLoad[data-js_show_target-passed="brandMessageSlideWrap"] [id="brandMessageSlideSwiper"] .swiper-button-prev,
	.js_isOnLoad[data-js_show_target-passed="brandMessageSlideWrap"] [id="brandMessageSlideSwiper"] .swiper-container-rtl .swiper-button-next,
	.js_isOnLoad[data-js_show_target-passed="brandMessageSlideWrap"] [id="brandMessageSlideSwiper"] .swiper-button-next,
	.js_isOnLoad[data-js_show_target-passed="brandMessageSlideWrap"] [id="brandMessageSlideSwiper"] .swiper-container-rtl .swiper-button-prev {
		--_translateX_add: 0%;
		opacity: 1;
	}



/* ============================================================================
	tkRecommendWrap
============================================================================ */
	.tkRecommendWrap {
		background: rgb(var(--site-themeColor-base));
		padding-top: calc(130 / 750 * 100vw);
	}
	.tkRecommendBox {
	}
	.tkRecommendBoxHeader {
	}
	.tkRecommendBoxHeader .heading {
		line-height: 1.714285;
		font-size: calc(49 / 750 * 100vw);
		margin-bottom: 0;
		padding-bottom: 1.33em; /* グロナビのcurrent設定のため、marginではなくpaddingにする */
	}
	.tkRecommendBoxHeader .heading .thinner {
		display: block;
		font-size: .877551em;
		font-weight: normal;
		letter-spacing: .06em;
	}
	.tkRecommendBoxHeader .heading .emphasis {
		display: block;
		margin-top: .111224em;
		letter-spacing: .06em;
	}
@media print, screen and (min-width: 750px) {
	.tkRecommendWrap {
		/*padding-top: 183px;*/
		padding-top: min((183 / 1200 * 100vw), 183px);
	}
	.tkRecommendBoxHeader .heading {
		font-size: clamp(2.8rem, (40 / 1200 * 100vw), 4rem);
		padding-bottom: 1.2em;
	}
	.tkRecommendBoxHeader .heading .thinner {
		font-size: .9em;
	}
	.tkRecommendBoxHeader .heading .emphasis {
		margin-top: .05em;
		letter-spacing: .07em;
	}
	.tkRecommendBoxHeader .heading .emphasis br {
		display: none;
	}
}

/* tkRecommendReasons | スライドトグル・モーダル・スワイパー含む | 個別設定は後述[tkRecommendReasons____Individual]へ
---------------------------------------------------------------------------
 * 下記例は主要なクラスと要素のみ記述しています。
---------------------------------------------------------------------------
 * スライドトグル
 *		- 例: section.tkRecommendReasonSection.js_tkReco_slideToggleFocusWrapper>(header.tkRecommendReasonSectionHeader>h3>button.js_tkReco_slideToggleFocusBtn[aria-controls="IDXXXXX"])+(div#IDXXXXX.tkRecommendReasonSectionBody.js_tkReco_slideToggleFocusContent)
 * モーダル
 *		- 例ボタン:     a[href="#xxx00"].myVeno_tkRecommendReasonDetailOpenLink[data-vbtype="inline"][data-my_swiper_slide_num="1"]
 *		- 例コンテンツ: div#xxx00.tk_recommend_reason_detail_wrap>div.tk_recommend_reason_detail_myVenoContent[data-myveno="closeBtn"]
 * スワイパー
 *		- 例: div#tk_recommend_reason_00-detail_01.tk_recommend_reason_detail_wrap
---------------------------------------------------------------------------
 * tkRecommendReasons
 - tkRecommendReasonSectionHeader | スライドトグルのボタン
 - tkRecommendReasonSectionBody | スライドトグルのコンテンツ
 * tk_recommend_reason_detail_wrap | モーダル内にスワイパー（venobox2, swiper）
 - venobox2（モーダルUI等）
 - swiper（スワイパーUI等）
 * tkRecommendReasonDetailBox | おすすめする理由の詳細情報
 * {tkRecommendReasons____Individual}
------------------------------------------------------------------------ */
	.tkRecommendReasons {
		color: rgb(var(--site-themeColor-text_reverse));
		background: rgb(var(--site-themeColor-base_secondary_dark)) url("../img/recommend_bg_01.jpg") center top / 90% auto repeat;
	}
	.tkRecommendReasonSection {
	}
	.tkRecommendReasonSection01 {}
	.tkRecommendReasonSection02 {}
	.tkRecommendReasonSection03 {}
	.tkRecommendReasonSection04 {}

	/* ----------------------------------------------------
		tkRecommendReasonSectionHeader | スライドトグルのボタン
	---------------------------------------------------- */
	.tkRecommendReasonSectionHeader {
		border-top: min((10 / 750 * 100vw), 10px) solid rgb(var(--site-themeColor-accent_1));
	}
	.tkRecommendReasonSectionHeader button {
		/* clear */
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		color: inherit;
		font: inherit;
		background: transparent;
		border: none;
		border-radius: 0;
		cursor: pointer;

		/* reset */
		display: block;
		position: relative;
		z-index: 0;
		width: 100%;
		color: rgb(var(--site-themeColor-text_reverse));
		font-weight: normal;
		text-align: left;
		padding-top:	calc(45 / 750 * 100vw);
		padding-bottom:	calc(51 / 750 * 100vw);
	}
	.tkRecommendReasonSectionHeader button::before { /* hover時の背景色 */
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: rgb(0 0 0 / .18);
		opacity: 0;
		transition: opacity 350ms ease-out;
	}
	.tkRecommendReasonSectionHeader button::after { /* hover時の背景色アニメーション付き */
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: rgb(0 0 0 / .33);
		scale: 0 1;
		transform-origin: right center;
		opacity: 0;
		transition: scale 250ms ease-out, opacity 150ms ease-out;
	}
	.tkRecommendReasonSectionHeader button[data-buttonicon^="ico_plus"] {
		--tkpCommon-dataButtonIcon-icoPlus_-right:		0px;	/* 右端からの距離（初期値） */
		--tkpCommon-dataButtonIcon-icoPlus_-width:		calc(50 / 750 * 100vw);	/* アイコン幅（初期値） */
		--tkpCommon-dataButtonIcon-icoPlus_-columnGap:	min((12 / 750 * 100vw), 20px);	/* ラベルエリアとアイコンエリアの要素間余白 */
	}
	.tkRecommendReasonSectionHeader button .label {
		--_number-fontsize: calc(60 / 750 * 100vw);
		display: grid;
		grid-template-columns:	calc(var(--_number-fontsize) * 1.65)
								1fr
								calc(var(--tkpCommon-dataButtonIcon-icoPlus_-width) + var(--tkpCommon-dataButtonIcon-icoPlus_-columnGap));
		position: relative;
		max-width: calc(var(--site-sizeMaxWidth-M) + 20px);
	}
	.tkRecommendReasonSectionHeader button .label .number {
		align-self: center;
		line-height: .9;
		color: rgb(var(--site-themeColor-accent_1));
		font-family: var(--site-font_family-en_2);
		font-size: var(--_number-fontsize);
		letter-spacing: .04em;
		padding-right: .2em;
	}
	.tkRecommendReasonSectionHeader button .label .title {
		line-height: 1.6;
		font-size: calc(30 / 750 * 100vw);
		letter-spacing: .09em;
	}
	.tkRecommendReasonSectionHeader button .label .title .pointText {
		color: rgb(var(--site-themeColor-accent_3));
	}
	.tkRecommendReasonSectionHeader button .label .ico {
	}
	.tkRecommendReasonSectionHeader button[data-buttonicon^="ico_plus"] .ico::before,
	.tkRecommendReasonSectionHeader button[data-buttonicon^="ico_plus"] .ico::after {
		border-top-color: rgb(var(--site-themeColor-accent_1));
	}
	/* hover */
	@media (hover: hover) and (pointer: fine) {
		.tkRecommendReasonSectionHeader button:hover::before,
		.tkRecommendReasonSectionHeader button:hover::after {
			scale: 1 1;
			transform-origin: left center;
			opacity: 1;
		}
	}
	.tkRecommendReasonSectionHeader button:focus-visible::before,
	.tkRecommendReasonSectionHeader button:focus-visible::after {
			scale: 1 1;
			transform-origin: left center;
			opacity: .33;
	}

	/* ----------------------------------------------------
		tkRecommendReasonSectionBody | スライドトグルのコンテンツ
	---------------------------------------------------- */
											/* [CHECK] */
											/*.js_tkReco_slideToggleFocusContent:where(.tkRecommendReasonSectionBody) {	display: block !important;}
											*/
	.js_tkReco_slideToggleFocusContent:where(.tkRecommendReasonSectionBody) { /* 初期値none | JSで開閉（tk_portal_general.js の tkReco_slideToggleFocus 参照） */
		display: none;
		background: rgb(124 124 124 / .52);
	}
	.tkRecommendReasonSectionBody {
		box-shadow: 0
					clamp(6px, (12 / 750 * 100vw), 12px)
					clamp(2.5px, (5 / 750 * 100vw), 5px)
					clamp(-2.5px, (-5 / 750 * 100vw), -5px)
					rgb(0 0 0 / .45)
					inset;
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionWrap {
		padding-top:	calc(80 / 750 * 100vw);
		padding-bottom:	calc(80 / 750 * 100vw);
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionWrap + .bodyInnerSectionWrap {
		border-top: 1px solid #fff;
	}
	.tkRecommendReasonSectionBody .bodyInnerSection {
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionSummary {
	}
	/* -------------------- 見出しBox（ないこともある） */
	.tkRecommendReasonSectionBody .bodyInnerSectionHeader {
		margin-top: calc(-14 / 750 * 100vw); /* 余白調整 */
		margin-bottom: calc(55 / 750 * 100vw);
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionHeader .heading {
		line-height: 1.75;
		font-weight: normal;
		/*text-decoration: underline;
		text-decoration-color: rgb(255 255 255 / .7);
		text-underline-offset: .275em;*/
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionHeader .heading .inner {
		display: inline-block;
		border-bottom: 5px solid red;
		border-image: linear-gradient(to right, rgb(251 237 228 / 0) 0%, rgb(251 237 228 / .05) 1.5%, rgb(251 237 228 / .15) 15%, rgb(255 255 255 / 1) 49.5% 50.5%, rgb(251 237 228 / .15) 85%,rgb(251 237 228 / .05) 98.5%, rgb(251 237 228 / 0) 0%);
		border-image-slice: 1;
		padding-left: .02em;
		padding-right: .02em;
		padding-bottom: .04em;
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionHeader .txtL {
		font-size: 1.470588em;
	}
	/* -------------------- 画像Box */
	.tkRecommendReasonSectionBody .bodyInnerSectionPicBox {
		position: relative;
	}
	/* -------------------- 文章Box */
	.tkRecommendReasonSectionBody .bodyInnerSectionTxtBox {
		font-size: 1em;
		margin-top: calc(30 / 750 * 100vw);
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionTxtBox small.bl.caption {
		margin-top: 1.3em;
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionTxtBox .detailOpenLinkWrap {
		display: block;
		/*margin-top: .4em;*/
		margin-top: calc(50 / 750 * 100vw);
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionTxtBox .detailOpenLinkWrap a[href] { /* .myVeno_tkRecommendReasonDetailOpenLink */
		/*color: rgb(var(--site-themeColor-accent_1));*/
		color: rgb(var(--site-themeColor-text_strong));
		background: #c1ad6a url("../img/recommend_bg_02.jpg") center top / 100% auto repeat-y;
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionTxtBox .detailOpenLinkWrap .label {
		font-family: var(--site-font_family-en_2);
		font-size: 1.2em;
		font-weight: normal;
	}
	/*.tkRecommendReasonSectionBody .bodyInnerSectionTxtBox .detailOpenLinkWrap a[href] .btnBg {
		background: rgb(0 0 0 / .1);
	}*/
	
	/*.tkRecommendReasonSectionBody .bodyInnerSectionTxtBox .detailOpenLinkWrap a[href] {
		color: rgb(var(--site-themeColor-accent_3));
		text-decoration: underline;
		text-underline-offset: .15em;
		background: rgb(var(--site-themeColor-accent_3) / 0);
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionTxtBox .detailOpenLinkWrap a::before {
		content: "＞";
	}
	@media (hover: hover) and (pointer: fine) {
		.tkRecommendReasonSectionBody .bodyInnerSectionTxtBox .detailOpenLinkWrap a[href]:hover {
			text-decoration: none;
		}
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionTxtBox .detailOpenLinkWrap a[href]:focus-visible {
			text-decoration: none;
	}*/

	/* -------------------- 詳細_wrap は後述へ（.tk_recommend_reason_detail_wrap） */

	/* -------------------- ボタンBox */
	.tkRecommendReasonSectionBody .bodyInnerSectionBtnBox {
		margin-top: calc(50 / 750 * 100vw);
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionBtnBox .btn_tk_bukkenlist a {
		/*color: #ddd;
		background: #000 url("../img/recommend_bg_01.jpg") center top / 100% auto repeat;*/
		color: #fff;
		background: #666 url("../img/recommend_bg_01.jpg") center top / 100% auto repeat;
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionBtnBox .btn_tk_bukkenlist a .btnBg {
		/*background: rgb(0 0 0 / .51);*/
		background: rgb(160 160 160 / .6);
	}

@media print, screen and (min-width: 750px) {
	.tkRecommendReasons {
		background-size: 940px auto;
	}
	/* ----------------------------------------------------
		tkRecommendReasonSectionHeader | スライドトグルのボタン
	---------------------------------------------------- */
	.tkRecommendReasonSectionHeader button {
		padding-top:	33px;
		padding-bottom:	35px;
	}
	.tkRecommendReasonSectionHeader button[data-buttonicon^="ico_plus"] {
		--tkpCommon-dataButtonIcon-icoPlus_-width:		clamp(30px, (40 / 1200 * 100vw), 40px);
	}
	.tkRecommendReasonSectionHeader button .label {
		/*--_number-fontsize: 5rem;*/
		--_number-fontsize: 4.5rem;
	}
	.tkRecommendReasonSectionHeader button .label .number {
		/*font-size: 5rem;*/
		translate: 0 .04em;
	}
	.tkRecommendReasonSectionHeader button .label .title {
		line-height: 1.777778;
		/*font-size: 2.7rem;*/
		font-size: min((23 / 750 * 100vw), 2.7rem);
	}

	/* ----------------------------------------------------
		tkRecommendReasonSectionBody | スライドトグルのコンテンツ
	---------------------------------------------------- */
	.tkRecommendReasonSectionBody .bodyInnerSectionWrap {
		padding-top:	80px;
		padding-bottom:	80px;
	}
	/* -------------------- 見出しBox（ないこともある） */
	.tkRecommendReasonSectionBody .bodyInnerSectionHeader {
		margin-top: 0px; /* 余白調整の解除 */
		margin-bottom: 60px;
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionHeader .heading .inner {
		font-size: 1.037037em;
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionHeader .txtL {
		font-size: 1.428571em;
	}
	/* -------------------- 文章Box */
	.tkRecommendReasonSectionBody .bodyInnerSectionTxtBox {
		text-align: center;
		margin-top: 30px;
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionTxtBox .detailOpenLinkWrap {
		display: block;
		/*margin-top: 1.1875em;*/
		margin-top: 32px;
	}
	.tkRecommendReasonSectionBody .bodyInnerSectionTxtBox small.bl.caption {
		margin-top: 1.416667em;
	}
	/* -------------------- ボタンBox */
	.tkRecommendReasonSectionBody .bodyInnerSectionBtnBox {
		/*margin-top: 55px;*/
		margin-top: min((23 / 750 * 100vw), 35px);
	}
}
@media print, screen and (min-width: 1200px) {
	/* ----------------------------------------------------
		tkRecommendReasonSectionHeader | スライドトグルのボタン
	---------------------------------------------------- */
	.tkRecommendReasonSectionHeader button::after { /* hover時の背景色アニメーション付き */
		transition: scale 450ms ease-out, opacity 350ms ease-out;
	}
}


/* ----------------------------------------------------
	tk_recommend_reason_detail_wrap | モーダル内にスワイパー（venobox2, swiper）
---------------------------------------------------- */
											/* [CHECK] */
											/*.tk_recommend_reason_detail_wrap {							display: block !important;}
											.tk_recommend_reason_detail_myVenoContent .swiper-wrapper {	display: block !important;}
											.tk_recommend_reason_detail_swiper .swiper-button-next.swiper-button-disabled,
											.tk_recommend_reason_detail_swiper .swiper-button-prev.swiper-button-disabled {	display: block !important;}
											*/
	/* 詳細_wrap
	---------------------------------------------------- */
	.tk_recommend_reason_detail_wrap {
		display: none; /* venobox用：初期値を非表示にする | 'javascript無効状態'の時は非表示を解除する */
	}
	.tk_recommend_reason_detail_myVenoContent {
		--_myVenoCloseBtn-inset:	clamp(12px, (19 / 750 * 100vw), 19px);
		--_myVenoCloseBtn-width:	clamp(25px, (42 / 750 * 100vw), 42px);
		--_slideItem-width:			calc(660 / 750 * 100vw);
		position: relative;
		z-index: 0;
	}
	
	/* venobox2（モーダルUI等）
	---------------------------------------------------- */
	.vbox-content {
		width: 100%;
		margin: 0 auto;
		padding-left: 0;
		padding-right: 0;
	}
	.vbox-inline.vbox-child { /* SP用のシャドウを追加 | ※SPとPCTBでつける要素が違うので注意 */
		background: none !important;
		box-shadow: 0 0 24px rgb(0 0 0 / .13), 0 0 12px rgb(0 0 0 / .15), 0 6px 6px rgb(0 0 0 / .23);
	}
	.vbox-close {
		display: none;
	}
	.tk_recommend_reason_detail_myVenoContent .myVenoCloseBtn {
		position: absolute;
		top: var(--_myVenoCloseBtn-inset);
		right: var(--_myVenoCloseBtn-inset);
		z-index: 10;
		width: var(--_myVenoCloseBtn-width);
		aspect-ratio: 1;
		color: rgb(var(--site-themeColor-base_secondary_dark));
	}
	.tk_recommend_reason_detail_myVenoContent .myVenoCloseBtn::before,
	.tk_recommend_reason_detail_myVenoContent .myVenoCloseBtn::after {	/* × ライン */
		content: "";
		display: block;
		position: absolute;
		inset: calc(50% - (2px / 2)) 0 0;
		width: 100%;
		height: 0;
		border-top: 2px solid currentColor;
	}
	.tk_recommend_reason_detail_myVenoContent .myVenoCloseBtn::before {	transform: rotate(45deg) scaleX(1.38);}
	.tk_recommend_reason_detail_myVenoContent .myVenoCloseBtn::after {	transform: rotate(-45deg) scaleX(1.38);}
	.tk_recommend_reason_detail_myVenoContent .myVenoCloseBtn > span {
		position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0px 0px 99.99% 99.99%); overflow: hidden; width: 1px; height: 1px; white-space: nowrap; padding: 0; border: 0;
	}
	
	/* swiper（スワイパーUI等）
	-------------------------------------------------------
	 *	（.swiper-wrapper と .swiper-slide はスワイパー側の設定があるため、基本的に追加設定はしないこと）
	 *	スワイパーのUIは、
	 -	SP時は背景色内に収まる	… .tk_recommend_reason_detail_swiper に背景色を入れる
	 -	PCTB時は背景色の外に出す	… .slideItem に背景色を入れる（.tk_recommend_reason_detail_swiper は transparentにする）
	---------------------------------------------------- */
	.tk_recommend_reason_detail_swiper {
		/* //////////////////////////////////////////////////////////////////////////////////////////
		 * SP用の文字色・背景色 | （PCTBでは背景色は transparent になる）
		 * SP用のpadding | （クローズボタンやページネーションのスペースを確保）
		 -	padding-top: max((クローズボタンサイズ＋クローズボタンインセット＋クローズボタンとコンテンツとの間の余白), 100px分の余白)
		 -	padding-bottom: calc(clamp(ページネーションの上余白)+ページネーションの高さ+ページネーションの下余白) ※改行ナシ前提
		////////////////////////////////////////////////// ////////////////////////////////////////*/
		color: rgb(var(--site-themeColor-text));
		background: rgb(var(--site-themeColor-base));
		padding-top:	max((var(--_myVenoCloseBtn-width) + (var(--_myVenoCloseBtn-inset) * 2) + (20 / 750 * 100vw)), (100 / 750 * 100vw));
		padding-bottom:	calc(clamp(25px, (40 / 750 * 100vw), 40px) + 10px + 20px);
	}

	/* ---------- slide */
	.tk_recommend_reason_detail_swiper .swiper-slide {
		display: flex;	/* 不具合が出るなら非表示にすること（高さを継承するために入れています） */
		height: auto;	/* 不具合が出るなら非表示にすること。※スワイパーJSオプション「autoHeight: true,」にした場合、ここのスタイルは無効になります */
	}
	.tk_recommend_reason_detail_swiper .swiper-slide .slideItem {
		display: grid;	/* 高さを継承するために入れています（flexだとはみ出し時に上部が切れる） */
		align-items: start;
		width: var(--_slideItem-width);
		margin-left: auto;
		margin-right: auto;
	}
	/* ---------- pagination */
	.tk_recommend_reason_detail_swiper .swiper-pagination {
		position: absolute;
		padding-bottom: 2px; /* 微調整（paginationを外に出したため、下辺が欠けるのを防ぐ） */
	}
	.tk_recommend_reason_detail_swiper .swiper-pagination-bullet {
		display: inline-grid;
		place-content: center;
		width:	10px;
		height:	10px;
		line-height: 1;
		color: rgb(var(--site-themeColor-base_secondary));
		font-size: 8px;
		text-align: center;
		letter-spacing: normal;
		background: transparent;
		border: 1px solid currentColor;
		opacity: 1;
	}
	.tk_recommend_reason_detail_swiper.swiper-container-horizontal > .swiper-pagination-bullets {
		bottom: 13px;
		left: 0;
		width: 100%;
	}
	.tk_recommend_reason_detail_swiper.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0 15px;
	}
	.tk_recommend_reason_detail_swiper .swiper-pagination-bullet .inner {
		position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0px 0px 99.99% 99.99%); overflow: hidden; width: 1px; height: 1px; white-space: nowrap; padding: 0; border: 0;
	}
	.tk_recommend_reason_detail_swiper .swiper-pagination-bullet-active {
		background: currentColor;
	}
	/* ---------- navigation */
	.tk_recommend_reason_detail_swiper .swiper-button-prev,
	.tk_recommend_reason_detail_swiper .swiper-button-next {
		width: calc(45 / 750 * 100vw);
		height: auto;
		aspect-ratio: 45 / 100;
		transform: translate(0, -50%);
		animation: 300ms ease-out both 150ms M_fadeIn;
	}
	.tk_recommend_reason_detail_swiper .swiper-button-next.swiper-button-disabled,
	.tk_recommend_reason_detail_swiper .swiper-button-prev.swiper-button-disabled {
		display: none;
		/*opacity: .35 !important;*/
		cursor: auto;
		pointer-events: none;
	}
	.tk_recommend_reason_detail_swiper .swiper-button-prev,
	.tk_recommend_reason_detail_swiper .swiper-container-rtl .swiper-button-next,
	.tk_recommend_reason_detail_swiper .swiper-button-next,
	.tk_recommend_reason_detail_swiper .swiper-container-rtl .swiper-button-prev {
		background: rgb(50 50 50 / .88);
	}
	.tk_recommend_reason_detail_swiper .swiper-button-prev,
	.tk_recommend_reason_detail_swiper .swiper-container-rtl .swiper-button-next {
		left: 0;
	}
	.tk_recommend_reason_detail_swiper .swiper-button-next,
	.tk_recommend_reason_detail_swiper .swiper-container-rtl .swiper-button-prev {
		right: 0;
	}
	.tk_recommend_reason_detail_swiper .swiper-button-prev::after,
	.tk_recommend_reason_detail_swiper .swiper-button-next::after {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 55%;
		height: auto;
		aspect-ratio: 1;
		margin-top: 0;
		border-width: 2px 2px 0 0;
	}
	.tk_recommend_reason_detail_swiper .swiper-button-prev::after {
		transform: none;
		rotate: -135deg;
		translate: calc(23% + -50%) -50%;
	}
	.tk_recommend_reason_detail_swiper .swiper-button-next::after {
		transform: none;
		rotate: 45deg;
		translate: calc(-23% + -50%) -50%;
	}

			/* ////////////////////////////////////////////////////////////////////////////////
			 *	'javascript無効状態'の設定 | tk_portal_general.jsの[bodyClassSetting]連携有
			//////////////////////////////////////////////////////////////////////////////// */
			body:not(.is-js) .tk_recommend_reason_detail_wrap {
				display: block !important; /* 'javascript無効状態'の時は非表示を解除する */
				margin: min(8vw, 40px) 0;
				padding: 5px;
				border: 1px solid rgb(255 255 255 / .7);
			}
			body:not(.is-js) .tk_recommend_reason_detail_swiper .swiper-wrapper {
				display: block !important; /* 'javascript無効状態'の時は非表示を解除する */
			}
			body:not(.is-js) .tk_recommend_reason_detail_swiper .swiper-slide + .swiper-slide {
				border-top: 50px solid transparent;
			}
			body:not(.is-js) .tk_recommend_reason_detail_swiper .swiper-slide .slideItem {
				height: revert;
				overflow-y: revert;
			}
			body:not(.is-js) .tk_recommend_reason_detail_swiper .swiper-pagination,
			body:not(.is-js) .tk_recommend_reason_detail_swiper .swiper-button-prev,
			body:not(.is-js) .tk_recommend_reason_detail_swiper .swiper-button-next {
				display: none !important;
			}

@media print, screen and (min-width: 750px) {
	/* 詳細_wrap
	---------------------------------------------------- */
	.tk_recommend_reason_detail_myVenoContent {
		--_myVenoCloseBtn-inset:			19px;
		--_myVenoCloseBtn-width:			min((22 / 750 * 100vw), 42px);
	/*	--_slideContainer-paddingTop:		var(--_slideContainer-paddingBottom);*/
		--_slideContainer-paddingTop:		10px;	/* paddingBottomと同じ値にすればセンター揃い。センターにしない場合は自由。 */
		--_slideContainer-paddingBottom:	calc(40px + 10px + 15px);			/* = calc(clamp(ページネーションの上余白)+ページネーションの高さ+ページネーションの下余白) ※改行ナシ前提 */
		--_slideItem-width:					min((1710 / 1920 * 100vw), 1500px);	/* 「.slideItem の幅」「モーダルの myVenoCloseBtn のポジション」「スワイパーの navigation のポジション」で使用 */
	}

	/* venobox2（モーダルUI等）
	---------------------------------------------------- */
	.vbox-inline.vbox-child { /* SP用のシャドウを削除 */
		box-shadow: none;
	}
	.vbox-inline.vbox-child .slideItem { /* PCTB用のシャドウを追加 */
		box-shadow: 0 0 24px rgb(0 0 0 / .13), 0 0 12px rgb(0 0 0 / .15), 0 6px 6px rgb(0 0 0 / .23);
	}
	.tk_recommend_reason_detail_myVenoContent .myVenoCloseBtn {
		top: var(--_slideContainer-paddingTop);
		left: var(--_slideItem-width);
		right: 0;
		/*color: #fff;*/
		margin: auto;
		translate: calc(-50% + (var(--_myVenoCloseBtn-inset) * -1)) var(--_myVenoCloseBtn-inset);
	}
	
	/* swiper（スワイパーUI等）
	---------------------------------------------------- */
	.tk_recommend_reason_detail_swiper {
		/* //////////////////////////////////////////////////////////////////////////////////////////
		 * PCTB用の文字色 | （モーダルのオーバーレイは黒なので白文字にしておく）
		 * PCTB用の背景色 | （スワイパーの外に出ているように見せるため背景色を消す）
		 * PCTB用のpadding | （-bottomでページネーションのスペースを確保。）
		 -	padding-top: padding-bottom と同じ値にすればセンター揃い。センターにしない場合は自由。
		 -	padding-bottom: calc(40px + 10px + 15px); = calc(clamp(ページネーションの上余白)+ページネーションの高さ+ページネーションの下余白) ※改行ナシ前提
		////////////////////////////////////////////////// ////////////////////////////////////////*/
		color: #fff;
		background: transparent;
		padding-top:	var(--_slideContainer-paddingTop);
		padding-bottom:	var(--_slideContainer-paddingBottom);
	}

	/* ---------- slide */
	.tk_recommend_reason_detail_swiper .swiper-slide .slideItem {
		/* //////////////////////////////////////////////////////////////////////////////////////////
		 * align-items の値はレイアウトにより異なる。各要素で個別に指定する。
		 *		- 写真・テキストの周囲に余白がある場合： align-items: center; （※初期値はこちら）
		 *		- 写真が幅高さいっぱいの場合(余白なし)： align-items: stretch; （※ただし子孫要素の .txtBox に align-items: center; を追加すること）
		 * heightについて ※この設定は削除してもよい。
		 *		- PCTBではheightで高さを固定にしている。小さいモニタも考慮しあまり大きくしないこと。
		 *		- はみ出した分はスクロール。height固定しない場合は、この設定は削除すること。
		 * PCTB用の文字色・背景色 | （UIがスワイパーの外に出ているように見せるため親要素の背景色は消した）
		///////////////////////////////////////////////////////////////////////////////////////////*/
		align-items: center;
	/*	height: 78lvh;*/		/* 73lvh */
	/*	overflow-y: scroll;*/
		color: rgb(var(--site-themeColor-text));
		background: rgb(var(--site-themeColor-base));
	}
	/* ---------- pagination */
	.tk_recommend_reason_detail_swiper .swiper-pagination-bullet {
		color: #fff;
	}
	.tk_recommend_reason_detail_swiper.swiper-container-horizontal > .swiper-pagination-bullets {
		bottom: 8px;
	}
	/* ---------- navigation */
	.tk_recommend_reason_detail_swiper .swiper-button-prev,
	.tk_recommend_reason_detail_swiper .swiper-button-next {
		width: calc(27 / 750 * 100vw);
	}
	.tk_recommend_reason_detail_swiper .swiper-button-prev,
	.tk_recommend_reason_detail_swiper .swiper-container-rtl .swiper-button-next,
	.tk_recommend_reason_detail_swiper .swiper-button-next,
	.tk_recommend_reason_detail_swiper .swiper-container-rtl .swiper-button-prev {
		background: rgb(5 7 13 / .7);
	}
	.tk_recommend_reason_detail_swiper .swiper-button-prev,
	.tk_recommend_reason_detail_swiper .swiper-container-rtl .swiper-button-next {
		left: .8vw;
	}
	.tk_recommend_reason_detail_swiper .swiper-button-next,
	.tk_recommend_reason_detail_swiper .swiper-container-rtl .swiper-button-prev {
		right: .8vw;
	}
}
@media print, screen and (min-width: 1200px) {
	/* ---------- navigation */
	.tk_recommend_reason_detail_swiper .swiper-button-prev,
	.tk_recommend_reason_detail_swiper .swiper-button-next {
		width: min((45 / 1710 * 100vw), 45px);
	}
	.tk_recommend_reason_detail_swiper .swiper-button-prev,
	.tk_recommend_reason_detail_swiper .swiper-container-rtl .swiper-button-next {
		left: 0;
		right: calc(var(--_slideItem-width) + 2.75vw);
		translate: -50% 0;
		margin: auto;
	}
	.tk_recommend_reason_detail_swiper .swiper-button-next,
	.tk_recommend_reason_detail_swiper .swiper-container-rtl .swiper-button-prev {
		left: calc(var(--_slideItem-width) + 2.75vw);
		right: 0;
		translate: 50% 0;
		margin: auto;
	}
}



/* ----------------------------------------------------
	tkRecommendReasonDetailBox | おすすめする理由の詳細情報 | （.tk_recommend_reason_detail_swiper .swiper-slide .slideItem の子要素）
-------------------------------------------------------
	フォントサイズや余白は要素によって違うので個別で設定する
	PCTB時のコンテンツ余白や幅は'個別で' .tkRecommendReasonDetailBox や その中の 各テキストエリア(.txtBox等)  に入れる。
---------------------------------------------------- */
	.tkRecommendReasonDetailBox {
						/*	background-color: lavenderblush;*/
	}
	.tkRecommendReasonDetailHeading {
		line-height: 1.777778;
		font-weight: bold;
	}
	.tkRecommendReasonDetailPicture {
		position: relative;
	}
	.tkRecommendReasonDetailText {
		line-height: 1.5;
	}



/* ================================== [tkRecommendReasons____Individual] */
/* ////////////////////////////////////////////////////////////////////////
 *	[要素まとめ]
 *	
 *	.tkRecommendReasonSection00									00番のスライドトグルのラッパー
 *	[id="tk_recommend_reason_00"]								00番のスライドトグルのコンテンツ部分
 *	.tk_recommend_reason_00__sec01								00番のスライドトグルコンテンツのセクション01
 *	
 *	[id="tk_recommend_reason_00-detail_01"]						00番のスライドトグルのモーダル01
 *	
 *	[id="tk_recommend_reason_00-detail_01-swiper"]				00番のスライドトグルのモーダル01内にあるスワイパーのコンテナ
 *	[id="tk_recommend_reason_00-detail_01-swiper"] .slide01 	00番のスライドトグルのモーダル01内にあるスワイパーのスライド一枚目
 *	
---------------------------------------------------------------------------
 *	スワイパー：注釈文が入る場合の設定
 -	▼共通(SP)に追加
	[id="tk_recommend_reason_00-detail_00-swiper"] .swiper-slide .txtBox .capText {
		display: block;
		font-size: clamp(1rem, (10 / 750 * 100vw), 1.2rem);
		letter-spacing: .06em;
		margin-top: 1em;
	}
 -	▼PCTBに追加
	[id="tk_recommend_reason_00-detail_00-swiper"] .swiper-slide .txtBox {
		// ---------- 注釈文が入る場合の設定(.capText) //
		align-self: revert;		// 不要なら削除OK
		display: grid;
		grid-template-columns: 1fr;
		align-items: end;
	}
	[id="tk_recommend_reason_00-detail_00-swiper"] .swiper-slide .txtBox .capText {
		margin-top: 2em;
	}
//////////////////////////////////////////////////////////////////////// */


/* ========================================================================
	tkRecommendReasonSection01
---------------------------------------------------------------------------
	.tkRecommendReasonSection01 {}
	[id="tk_recommend_reason_01"] {}
	.tk_recommend_reason_01__sec01 {}
	[id="tk_recommend_reason_01-detail_01-swiper"]
	[id="tk_recommend_reason_01-detail_01-swiper"] .slide01
======================================================================== */
/* スライドトグルのボタン
---------------------------------------------------- */
	.tkRecommendReasonSection01 .tkRecommendReasonSectionHeader button .label .number {
		letter-spacing: .075em;
	}


/* sec01
---------------------------------------------------- */
	.tk_recommend_reason_01__sec01 .bodyInnerSectionSummary .picBox {
		display: grid;
		grid-template-columns: 1fr;
		gap: calc(30 / 750 * 100vw) 0;
	}
	.tk_recommend_reason_01__sec01 .bodyInnerSectionSummary .kanpachiInside {
		line-height: 1.45;
		font-size: 1.3em;
		text-align: center;
		letter-spacing: .08em;
		margin-top: 1.1em;
		padding: .55em 1.25em .65em;
		border: 1px solid rgb(255 255 255 / .43);
	}
	.tk_recommend_reason_01__sec01 .bodyInnerSectionSummary .kanpachiInside .kakeru {
		display: block;
	}
@media print, screen and (min-width: 750px) {
	.tk_recommend_reason_01__sec01 .bodyInnerSectionSummary .picBox {
		grid-template-columns: repeat(2, 1fr);
		gap: 0 30px;
	}
	.tk_recommend_reason_01__sec01 .bodyInnerSectionSummary .kanpachiInside {
		font-size: 1.48em;
		margin-top: 1.2em;
		padding: .85em 1.25em 1em;
		border: 1px solid rgb(255 255 255 / .35);
	}
	.tk_recommend_reason_01__sec01 .bodyInnerSectionSummary .kanpachiInside .kakeru {
		display: inline-block;
		margin-left: .2em;
		margin-right: .2em;
	}
}


/* sec02
---------------------------------------------------- */
	.tk_recommend_reason_01__sec02 {
	}

/* 詳細（detail_01） | スワイパー
--------------------------------- */
	[id="tk_recommend_reason_01-detail_01-swiper"] .slide01 .tkRecommendReasonDetailHeading {
		text-align: center;
		font-size: max(1.4rem, (34 / 750 * 100vw));
		margin-bottom: calc(29 / 750 * 100vw);
	}
	[id="tk_recommend_reason_01-detail_01-swiper"] .slide01 .tkRecommendReasonDetailHeading small {
		display: block;
		line-height: 1.55;
		font-size: .764705em;
	}
	[id="tk_recommend_reason_01-detail_01-swiper"] .slide01 .unit01 {
		display: grid;
		grid-template-columns: calc(216 / 750 * 100vw) 1fr;
		gap: 0 calc(30 / 750 * 100vw);
		position: relative;
		z-index: 1;
		margin-top: calc(30 / 750 * 100vw);
	}
	[id="tk_recommend_reason_01-detail_01-swiper"] .slide01 .unit01 .txtBox .ttl {
		display: grid;
		grid-template-columns: 1.35em 1fr;
		align-items: start;
		gap: 0 .55em;
		line-height: 1.35;
		color: #005d78;
		font-size: 1.153846em;
		font-weight: bold;
		margin-bottom: .7em;
	}
	[id="tk_recommend_reason_01-detail_01-swiper"] .slide01 .unit01 .txtBox .ttl .num {
		display: grid;
		place-content: center;
		min-height: 1.35em;
		line-height: 1;
		color: #fff;
		font-weight: normal;
		letter-spacing: normal;
		background: #005d78;
		padding-bottom: .09em;
	}
	[id="tk_recommend_reason_01-detail_01-swiper"] .slide01 .unit01 .txtBox .txt {
		letter-spacing: .05em;
	}
@media print, screen and (min-width: 750px) {
	[id="tk_recommend_reason_01-detail_01-swiper"] .slide01 .tkRecommendReasonDetailBox {
		width: min(90%, 1000px);
		margin-left: auto;
		margin-right: auto;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	[id="tk_recommend_reason_01-detail_01-swiper"] .slide01 .tkRecommendReasonDetailHeading {
		font-size: 2.7rem;
		margin-bottom: 33px;
	}
	[id="tk_recommend_reason_01-detail_01-swiper"] .slide01 .tkRecommendReasonDetailHeading small {
		display: inline-block;
		font-size: 1.6rem;
	}
	[id="tk_recommend_reason_01-detail_01-swiper"] .slide01 .unit01 {
		grid-template-columns: calc(167 / 554 * 100%) 1fr;
		gap: 0 1.875em;
		margin-top: -10%;
		width: calc(554 / 1000 * 100%);
		margin-left: auto;
	}
	[id="tk_recommend_reason_01-detail_01-swiper"] .slide01 .unit01 .txtBox {
		align-self: center;
		padding-top: 8px;
	}
	[id="tk_recommend_reason_01-detail_01-swiper"] .slide01 .unit01 .txtBox .ttl {
		grid-template-columns: 1.407em 1fr;
		gap: 0 .35em;
		font-size: min((27 / 1000 * 100vw), 1.6875em);
	}
}


/* sec03
---------------------------------------------------- */
	.tk_recommend_reason_01__sec03 .bodyInnerSectionSummary .picBox {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0 calc(15 / 750 * 100vw);
	}
	.tk_recommend_reason_01__sec03 .bodyInnerSectionSummary .picBox .unit .ttl {
		text-align: center;
		margin-top: calc(13 / 750 * 100vw);
	}
	.tk_recommend_reason_01__sec03 .bodyInnerSectionSummary .bodyInnerSectionTxtBox {
		margin-top: calc(53 / 750 * 100vw);
	}
@media print, screen and (min-width: 750px) {
	.tk_recommend_reason_01__sec03 .bodyInnerSectionSummary .picBox {
		gap: 0 26px;
	}
	.tk_recommend_reason_01__sec03 .bodyInnerSectionSummary .picBox .unit .ttl {
		margin-top: 15px;
	}
	.tk_recommend_reason_01__sec03 .bodyInnerSectionSummary .bodyInnerSectionTxtBox {
		margin-top: 56px;
	}
}

/* 詳細（detail_02） | スワイパー
--------------------------------- */
	[id="tk_recommend_reason_01-detail_02-swiper"] .swiper-slide .tkRecommendReasonDetailBox {
		display: grid;
		grid-template-columns: 1fr;
		gap: calc(25 / 750 * 100vw) 0;
		width: 87.878787%;
		margin-left: auto;
		margin-right: auto;
	}
	[id="tk_recommend_reason_01-detail_02-swiper"] .swiper-slide .txtBox .tkRecommendReasonDetailHeading {
		font-size: max(1.4rem, (30 / 750 * 100vw));
	}
	[id="tk_recommend_reason_01-detail_02-swiper"] .swiper-slide .txtBox .tkRecommendReasonDetailHeading small {
		display: inline-block;
		line-height: 1.55;
		font-size: .666667em;
	}
	[id="tk_recommend_reason_01-detail_02-swiper"] .slide03 .imgcapkeep.bk.bg {
		background-color:rgb(233 234 235/.5);
	}
@media print, screen and (min-width: 750px) {
	[id="tk_recommend_reason_01-detail_02-swiper"] .swiper-slide .tkRecommendReasonDetailBox {
		grid-template-columns: 50% calc(540 / 1200 * 100%);
		justify-content: space-between;
		gap: 0;
		width: min(90%, 1200px);
		padding-top: clamp(40px, (100 / 1200 * 100vw), 100px);
		padding-bottom: clamp(40px, (100 / 1200 * 100vw), 100px);
	}
	[id="tk_recommend_reason_01-detail_02-swiper"] .swiper-slide .txtBox {
		align-self: center;
	}
	[id="tk_recommend_reason_01-detail_02-swiper"] .swiper-slide .txtBox .tkRecommendReasonDetailHeading {
		font-size: 2.7rem;
		margin-bottom: .481481em;
	}
	[id="tk_recommend_reason_01-detail_02-swiper"] .swiper-slide .txtBox .tkRecommendReasonDetailHeading small {
		font-size: clamp(1.4rem, (18 / 1200 * 100vw), .666667em);
		letter-spacing: .08em;
	}
	/* -- Individual -- */
	[id="tk_recommend_reason_01-detail_02-swiper"] .slide01 .txtBox .tkRecommendReasonDetailHeading small {
		display: block; /* 行間調整のため block にする */
	}
}
@media print, screen and (min-width: 850px) {
	/* -- Individual -- */
	[id="tk_recommend_reason_01-detail_02-swiper"] .slide01 .txtBox .tkRecommendReasonDetailHeading small {
		display: inline-block; /* 行間調整不要なため inline-block に戻す */
	}
}


/* ========================================================================
	tkRecommendReasonSection02
---------------------------------------------------------------------------
	.tkRecommendReasonSection02 {}
	[id="tk_recommend_reason_02"] {}
	.tk_recommend_reason_02__sec01 {}
	[id="tk_recommend_reason_02-detail_01-swiper"]
	[id="tk_recommend_reason_02-detail_01-swiper"] .slide01
======================================================================== */
/* sec01
---------------------------------------------------- */
	.tk_recommend_reason_02__sec01 {
	}

/* 詳細（detail_01） | スワイパー
--------------------------------- */
	[id="tk_recommend_reason_02-detail_01-swiper"] .swiper-slide .tkRecommendReasonDetailBox {
		display: grid;
		grid-template-columns: 1fr;
		gap: calc(25 / 750 * 100vw) 0;
	}
	[id="tk_recommend_reason_02-detail_01-swiper"] .swiper-slide .picBox .tkRecommendReasonDetailPicture {
		margin-left:	calc(-50vw + 50%);
		margin-right:	calc(-50vw + 50%);
	}
	[id="tk_recommend_reason_02-detail_01-swiper"] .swiper-slide .txtBox .tkRecommendReasonDetailText {
		line-height: 1.5;
		font-size: max(1.3rem, (26 / 750 * 100vw));
	}
	[id="tk_recommend_reason_02-detail_01-swiper"] .swiper-slide .txtBox .capText {
		display: block;
		font-size: clamp(1rem, (10 / 750 * 100vw), 1.2rem);
		letter-spacing: .06em;
		margin-top: 1em;
	}
@media print, screen and (min-width: 750px) {
	[id="tk_recommend_reason_02-detail_01-swiper"] .swiper-slide .slideItem {
		align-items: stretch; /* 写真を高さいっぱいにするため */
	}
	[id="tk_recommend_reason_02-detail_01-swiper"] .swiper-slide .tkRecommendReasonDetailBox {
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
	}
	[id="tk_recommend_reason_02-detail_01-swiper"] .swiper-slide .picBox {
		display: grid;
	}
	[id="tk_recommend_reason_02-detail_01-swiper"] .swiper-slide .picBox .tkRecommendReasonDetailPicture {
		margin-left:	revert;
		margin-right:	revert;
		padding-top: calc(600 / 750 * 100%); /* =(画像の高さ/画像の幅*100%) */
	}
	[id="tk_recommend_reason_02-detail_01-swiper"] .swiper-slide .picBox .tkRecommendReasonDetailPicture img {
		position: absolute;
		inset: 0;
		z-index: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
	}
	[id="tk_recommend_reason_02-detail_01-swiper"] .swiper-slide .txtBox {
		width: min(85%, 540px);
		margin-left: auto;
		margin-right: auto;
		/*padding-top: clamp(22px, (30 / 1200 * 100vw), 30px);
		padding-bottom: clamp(22px, (30 / 1200 * 100vw), 30px);*/
		padding-top: clamp(40px, (60 / 1200 * 100vw), 60px);
		padding-bottom: clamp(40px, (60 / 1200 * 100vw), 60px);
		/* ---------- 注釈文が入る場合の設定(.capText) */
		align-self: revert;
		display: grid;
		grid-template-columns: 1fr;
		align-items: end;
	}
	[id="tk_recommend_reason_02-detail_01-swiper"] .swiper-slide .txtBox .tkRecommendReasonDetailText {
		line-height: 1.777778;
		font-size: clamp(1.8rem, (23 / 1200 * 100vw), 2.7rem);
		letter-spacing: .1em;
	}
	[id="tk_recommend_reason_02-detail_01-swiper"] .swiper-slide .txtBox .capText {
		margin-top: 2em;
	}
}


/* sec02
---------------------------------------------------- */
	.tk_recommend_reason_02__sec02 {
	}

/* 詳細（detail_02） | スワイパー
--------------------------------- */
	[id="tk_recommend_reason_02-detail_02-swiper"] .swiper-slide .tkRecommendReasonDetailBox {
		display: grid;
		grid-template-columns: 1fr;
		gap: calc(25 / 750 * 100vw) 0;
	}
	[id="tk_recommend_reason_02-detail_02-swiper"] .swiper-slide .picBox .tkRecommendReasonDetailPicture {
		margin-left:	calc(-50vw + 50%);
		margin-right:	calc(-50vw + 50%);
	}
	[id="tk_recommend_reason_02-detail_02-swiper"] .swiper-slide .txtBox .tkRecommendReasonDetailText {
		line-height: 1.5;
		font-size: max(1.3rem, (26 / 750 * 100vw));
	}
	[id="tk_recommend_reason_02-detail_02-swiper"] .swiper-slide .txtBox .capText {
		display: block;
		font-size: clamp(1rem, (10 / 750 * 100vw), 1.2rem);
		letter-spacing: .06em;
		margin-top: 1em;
	}
@media print, screen and (min-width: 750px) {
	[id="tk_recommend_reason_02-detail_02-swiper"] .swiper-slide .slideItem {
		align-items: stretch; /* 写真を高さいっぱいにするため */
	}
	[id="tk_recommend_reason_02-detail_02-swiper"] .swiper-slide .tkRecommendReasonDetailBox {
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
	}
	[id="tk_recommend_reason_02-detail_02-swiper"] .swiper-slide .picBox {
		display: grid;
	}
	[id="tk_recommend_reason_02-detail_02-swiper"] .swiper-slide .picBox .tkRecommendReasonDetailPicture {
		margin-left:	revert;
		margin-right:	revert;
		padding-top: calc(600 / 750 * 100%); /* =(画像の高さ/画像の幅*100%) */
	}
	[id="tk_recommend_reason_02-detail_02-swiper"] .swiper-slide .picBox .tkRecommendReasonDetailPicture img {
		position: absolute;
		inset: 0;
		z-index: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
	}
	[id="tk_recommend_reason_02-detail_02-swiper"] .swiper-slide .txtBox {
		width: min(85%, 540px);
		margin-left: auto;
		margin-right: auto;
		/*padding-top: clamp(22px, (30 / 1200 * 100vw), 30px);
		padding-bottom: clamp(22px, (30 / 1200 * 100vw), 30px);*/
		padding-top: clamp(40px, (60 / 1200 * 100vw), 60px);
		padding-bottom: clamp(40px, (60 / 1200 * 100vw), 60px);
		/* ---------- 注釈文が入る場合の設定(.capText) */
		align-self: revert;
		display: grid;
		grid-template-columns: 1fr;
		align-items: end;
	}
	[id="tk_recommend_reason_02-detail_02-swiper"] .swiper-slide .txtBox .tkRecommendReasonDetailText {
		line-height: 1.777778;
		font-size: clamp(1.8rem, (23 / 1200 * 100vw), 2.7rem);
		letter-spacing: .1em;
	}
	[id="tk_recommend_reason_02-detail_02-swiper"] .swiper-slide .txtBox .capText {
		margin-top: 2em;
	}
	
	/* -- Individual -- */
	[id="tk_recommend_reason_02-detail_02-swiper"] .slide07 .picBox .tkRecommendReasonDetailPicture {
		display: flex;			/* .ph02を上下センタリングするため */
		flex-direction: column;	/* .ph02を上下センタリングするため */
		padding-top: revert;
		background: #fff;
	}
	[id="tk_recommend_reason_02-detail_02-swiper"] .slide07 .picBox .tkRecommendReasonDetailPicture .ph02 {
		margin-top: auto;		/* .ph02を上下センタリングするため */
		margin-bottom: auto;	/* .ph02を上下センタリングするため */
	}
	[id="tk_recommend_reason_02-detail_02-swiper"] .slide07 .picBox .tkRecommendReasonDetailPicture img {
		position: revert;
		width: 100%;
		max-width: none;
		height: revert;
		object-fit: revert;
	}
}
	




/* ========================================================================
	tkRecommendReasonSection03
---------------------------------------------------------------------------
	.tkRecommendReasonSection03 {}
	[id="tk_recommend_reason_03"] {}
	.tk_recommend_reason_03__sec01 {}
	[id="tk_recommend_reason_03-detail_01-swiper"]
	[id="tk_recommend_reason_03-detail_01-swiper"] .slide01
======================================================================== */
/* sec01
---------------------------------------------------- */
	.tk_recommend_reason_03__sec01 {
	}

/* 詳細（detail_01） | スワイパー
--------------------------------- */
	[id="tk_recommend_reason_03-detail_01-swiper"] .swiper-slide .tkRecommendReasonDetailBox {
		display: grid;
		grid-template-columns: 1fr;
		gap: calc(25 / 750 * 100vw) 0;
	}
	[id="tk_recommend_reason_03-detail_01-swiper"] .swiper-slide .picBox .tkRecommendReasonDetailPicture {
		margin-left:	calc(-50vw + 50%);
		margin-right:	calc(-50vw + 50%);
	}
	[id="tk_recommend_reason_03-detail_01-swiper"] .swiper-slide .txtBox .tkRecommendReasonDetailText {
		line-height: 1.5;
		font-size: max(1.3rem, (26 / 750 * 100vw));
	}
	[id="tk_recommend_reason_03-detail_01-swiper"] .swiper-slide .txtBox .capText {
		display: block;
		font-size: clamp(1rem, (10 / 750 * 100vw), 1.2rem);
		letter-spacing: .06em;
		margin-top: 1em;
	}
@media print, screen and (min-width: 750px) {
	[id="tk_recommend_reason_03-detail_01-swiper"] .swiper-slide .slideItem {
		align-items: stretch; /* 写真を高さいっぱいにするため */
	}
	[id="tk_recommend_reason_03-detail_01-swiper"] .swiper-slide .tkRecommendReasonDetailBox {
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
	}
	[id="tk_recommend_reason_03-detail_01-swiper"] .swiper-slide .picBox {
		display: grid;
	}
	[id="tk_recommend_reason_03-detail_01-swiper"] .swiper-slide .picBox .tkRecommendReasonDetailPicture {
		margin-left:	revert;
		margin-right:	revert;
		padding-top: calc(600 / 750 * 100%); /* =(画像の高さ/画像の幅*100%) */
	}
	[id="tk_recommend_reason_03-detail_01-swiper"] .swiper-slide .picBox .tkRecommendReasonDetailPicture img {
		position: absolute;
		inset: 0;
		z-index: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
	}
	[id="tk_recommend_reason_03-detail_01-swiper"] .swiper-slide .txtBox {
		width: min(85%, 540px);
		margin-left: auto;
		margin-right: auto;
		/*padding-top: clamp(22px, (30 / 1200 * 100vw), 30px);
		padding-bottom: clamp(22px, (30 / 1200 * 100vw), 30px);*/
		padding-top: clamp(40px, (60 / 1200 * 100vw), 60px);
		padding-bottom: clamp(40px, (60 / 1200 * 100vw), 60px);
		/* ---------- 注釈文が入る場合の設定(.capText) */
		align-self: revert;
		display: grid;
		grid-template-columns: 1fr;
		align-items: end;
	}
	[id="tk_recommend_reason_03-detail_01-swiper"] .swiper-slide .txtBox .tkRecommendReasonDetailText {
		line-height: 1.777778;
		font-size: clamp(1.7rem, (23 / 1200 * 100vw), 2.7rem);
		letter-spacing: .1em;
	}
	[id="tk_recommend_reason_03-detail_01-swiper"] .swiper-slide .txtBox .capText {
		margin-top: 2em;
	}
}
	




/* ========================================================================
	tkRecommendReasonSection04
---------------------------------------------------------------------------
	.tkRecommendReasonSection04 {}
	[id="tk_recommend_reason_04"] {}
	.tk_recommend_reason_04__sec01 {}
	[id="tk_recommend_reason_04-detail_01-swiper"]
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01
======================================================================== */
/* sec01
---------------------------------------------------- */
	.tk_recommend_reason_04__sec01 {
	}
@media print, screen and (min-width: 750px) {
	.tk_recommend_reason_04__sec01 .bodyInnerSectionSummary .txtBox {
		text-align: center;
	}
}

/* 詳細（detail_01） | スワイパー
--------------------------------- */
/* slide共通
----------------------- */
	[id="tk_recommend_reason_04-detail_01-swiper"] .swiper-slide .tkRecommendReasonDetailHeading {
		font-size: max(1.4rem, (34 / 750 * 100vw));
		text-align: center;
		margin-bottom: 1.47em;
	}
@media print, screen and (min-width: 750px) {
	[id="tk_recommend_reason_04-detail_01-swiper"] .swiper-slide .slideItem {
		align-items: stretch; /* 写真を高さいっぱいにするため＋stretchによって上揃えになってOKなため、まとめてここで設定 */
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .swiper-slide .tkRecommendReasonDetailHeading {
		font-size: clamp(2.7rem, (27 / 1200 * 100vw), 3.6rem);
		margin-bottom: 1.39em;
	}
}

/* slide01
----------------------- */
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01 .tkRecommendReasonDetailBox.is_PC {
		display: none;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01 .tkRecommendReasonDetailHeading {
		text-decoration: underline;
		text-decoration-color: rgb(var(--site-themeColor-text) / .7);
		text-underline-offset: .275em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01 .tkRecommendReasonDetailHeading .txtL {
		font-size: 1.470588em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01 .tkRecommendReasonDetailPicture {
		margin-left:	calc(-50vw + 50%);
		margin-right:	calc(-50vw + 50%);
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01 .txtBox {
		margin-top: calc(28 / 750 * 100vw);
	}
@media print, screen and (min-width: 750px) {
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01 .tkRecommendReasonDetailBox.is_SP {
		display: none;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01 .tkRecommendReasonDetailBox.is_PC {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01 .picBox {
		display: grid;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01 .picBox .tkRecommendReasonDetailPicture {
		margin-left: revert;
		margin-right: revert;
		padding-top: calc(600 / 750 * 100%); /* =(画像の高さ/画像の幅*100%) */
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01 .picBox .tkRecommendReasonDetailPicture img {
		position: absolute;
		inset: 0;
		z-index: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01 .tkRecommendReasonDetailBox.is_PC .picBox .tkRecommendReasonDetailPicture img {
		object-position: 50% 26%;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01 .txtBox {
		align-self: center;
		width: min(85%, 540px);
		margin-top: revert;
		margin-left: auto;
		margin-right: auto;
		/*padding-top: clamp(22px, (30 / 1200 * 100vw), 30px);
		padding-bottom: clamp(22px, (30 / 1200 * 100vw), 30px);*/
		padding-top: clamp(40px, (60 / 1200 * 100vw), 60px);
		padding-bottom: clamp(40px, (60 / 1200 * 100vw), 60px);
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01 .tkRecommendReasonDetailHeading {
		font-size: clamp(2rem, (22 / 1200 * 100vw), 3rem);
		letter-spacing: .115em;
		margin-bottom: .65em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01 .tkRecommendReasonDetailHeading .txtL {
		font-size: 1.42em;
	}
}
@media print, screen and (min-width: 1000px) {
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01 .tkRecommendReasonDetailHeading br.adjustBr {
		display: none;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide01 .tkRecommendReasonDetailHeading .txtL {
		font-size: 1.5em;
	}
}
	
/* slide02
----------------------- */
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide02 .tkRecommendReasonDetailHeading {
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide02 .tkRecommendReasonDetailText .unit + .unit {
		margin-top: calc(47 / 750 * 100vw);
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide02 .tkRecommendReasonDetailText .unit .ttl {
		display: grid;
		place-content: center;
		min-height: 3.294117em;
		line-height: 1.411764;
		color: rgb(var(--site-themeColor-text_reverse));
		font-size: max(1.4rem, (34 / 750 * 100vw));
		/*font-weight: 450;*/
		text-align: center;
		letter-spacing: .08em;
		background: rgb(var(--site-themeColor-text));
		padding: .01em .25em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide02 .tkRecommendReasonDetailText .unit .ttl sup {
		font-size: max(.9rem, .6em);
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide02 .tkRecommendReasonDetailText .unit .txt {
		margin-top: calc(30 / 750 * 100vw);
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide02 .tkRecommendReasonDetailText .unit .bl.caption {
		margin-top: .775em;
	}
@media print, screen and (min-width: 750px) {
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide02 .tkRecommendReasonDetailBox {
		width: min(90%, 1170px);
		margin-left: auto;
		margin-right: auto;
		/*padding-top: clamp(40px, (60 / 1200 * 100vw), 60px);
		padding-bottom: clamp(40px, (60 / 1200 * 100vw), 60px);*/
		padding-top: 40px;
		padding-bottom: clamp(30px, (50 / 1200 * 100vw), 50px);
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide02 .tkRecommendReasonDetailText .unitWrap {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		align-items: start;
		gap: 0 calc(60 / 1170 * 100%);
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide02 .tkRecommendReasonDetailText .unit + .unit {
		margin-top: 0;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide02 .tkRecommendReasonDetailText .unit .ttl {
		min-height: 150px;
		min-height: 6em;
		line-height: 1.6;
		font-size: min((20 / 750 * 100vw), 3rem);
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide02 .tkRecommendReasonDetailText .unit .txt {
		margin-top: 1.3em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide02 .tkRecommendReasonDetailText .unit .bl.caption {
		font-size: clamp(1rem, (12 / 1200 * 100vw), 1.2rem);
		margin-top: 1.2em;
	}
}
@media print, screen and (min-width: 1200px) {
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide02 .tkRecommendReasonDetailText .unit .txt {
		margin-top: 1.875em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide02 .tkRecommendReasonDetailText .unit .bl.caption {
		margin-top: 1.775em;
	}
}

/* slide03
----------------------- */
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide03 .tkRecommendReasonDetailHeading {
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide03 .tkRecommendReasonDetailText {
		text-align: center;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide03 .figureBox {
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide03 .figureBox .kikanBox {
		display: grid;
		grid-template-columns: 1fr;
		margin-top: calc(45 / 750 * 100vw);
		margin-bottom: calc(60 / 750 * 100vw);
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide03 .figureBox .kikanBox .kikanBox_unit {
		display: grid;
		place-content: center;
		min-height: 2em;
		line-height: 1.4;
		color: rgb(var(--site-themeColor-text_reverse));
		font-size: calc(40 / 750 * 100vw);
		/*font-weight: 450;*/
		text-align: center;
		letter-spacing: .02em;
		background: rgb(var(--site-themeColor-text));
		padding: .01em .25em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide03 .figureBox .kikanBox .kikanBox_unit .kana {
		letter-spacing: normal;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide03 .figureBox .kikanBox .kikanBox_plus {
		display: grid;
		place-content: center;
		line-height: 1;
		color: rgb(var(--site-themeColor-text));
		font-size: calc(53 / 750 * 100vw);
		text-align: center;
		padding-top: calc(10 / 750 * 100vw);
		padding-bottom: calc(17 / 750 * 100vw);
	}
@media print, screen and (min-width: 750px) {
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide03 .tkRecommendReasonDetailBox {
		width: min(90%, 1000px);
		margin-left: auto;
		margin-right: auto;
		/*padding-top: clamp(40px, (60 / 1200 * 100vw), 60px);
		padding-bottom: clamp(40px, (60 / 1200 * 100vw), 60px);*/
		padding-top: 40px;
		padding-bottom: clamp(30px, (50 / 1200 * 100vw), 50px);
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide03 .tkRecommendReasonDetailHeading {
		letter-spacing: .1em;
		margin-bottom: .472222em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide03 .figureBox {
		grid-template-columns: 50% calc(470 / 1000 * 100%);
		justify-content: space-between;
		margin-top: min((44 / 1260 * 100vw), 44px);
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide03 .figureBox .kikanBox {
		margin-top: 0;
		margin-bottom: 0;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide03 .figureBox .kikanBox .kikanBox_unit {
		font-size: min((30 / 1260 * 100vw), 3rem);
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide03 .figureBox .kikanBox .kikanBox_plus {
		font-size: min((40 / 1260 * 100vw), 4rem);
		padding-top: min((18 / 1260 * 100vw), 18px);
		padding-bottom: min((22 / 1260 * 100vw), 22px);
	}
}

/* slide04
----------------------- */
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .tkRecommendReasonDetailHeading {
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap {
		display: grid;
		grid-template-columns: 1fr;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dl {
		/*display: block;*/
		display: grid;
		grid-template-rows: auto 1fr; /* = dt dd */
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dt {
		align-self: start;
		display: grid;
		place-content: center;
		min-height: 1.77em;
		line-height: 1.34;
		color: rgb(var(--site-themeColor-text_reverse));
		font-size: max(1.6rem, (26 / 750 * 100vw));
		/*font-weight: 450;*/
		text-align: center;
		letter-spacing: .1em;
		background: rgb(var(--site-themeColor-text));
		padding: .01em .25em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd {
		display: grid;
		grid-template-columns: calc(240 / 659 * 100%) 1fr;
		letter-spacing: .08em;
		background: #fff;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd .picBox {
		position: relative;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd .picBox .tkRecommendReasonDetailPicture {
		position: absolute;
		inset: 0;
		z-index: 0;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd .picBox .tkRecommendReasonDetailPicture img {
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd .txtBox {
		text-align: center;
		padding: .5em .576923em .725em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd .txtBox .txt {
		font-size: max(1rem, (21 / 750 * 100vw));
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd .txtBox .kakakuBox {
		font-size: max(.9rem, (20 / 750 * 100vw));
		letter-spacing: .03em;
		background: #edebeb;
		margin-top: calc(12 / 750 * 100vw);
		padding: .4em .2em .7em;
		border-radius: min((10 / 750 * 100vw), 10px);
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd .txtBox .kakakuBox .kakaku {
		display: block;
		color: #933c38;
		letter-spacing: .03em;
		margin-top: .25em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd .txtBox .kakakuBox .kakaku .txtL {
		line-height: 1;
		font-size: 1.85em;
		letter-spacing: -.01em;
		margin-left: .08em;
		margin-right: .06em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd .txtBox .kakakuBox .kana {
		letter-spacing: -.02em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsCaption {
		margin-top: calc(26 / 750 * 100vw);
	}
@media print, screen and (min-width: 750px) {
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .tkRecommendReasonDetailBox {
		width: min(90%, 1000px);
		margin-left: auto;
		margin-right: auto;
		/*padding-top: clamp(40px, (60 / 1200 * 100vw), 60px);
		padding-bottom: clamp(40px, (60 / 1200 * 100vw), 60px);*/
		padding-top: 40px;
		padding-bottom: clamp(30px, (50 / 1200 * 100vw), 50px);
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .tkRecommendReasonDetailHeading {
		margin-bottom: 1.1em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dt {
		min-height: 1.75em;
		line-height: 1.3;
		font-size: min((20 / 1200 * 100vw), 2rem);
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd {
		grid-template-columns: calc(182 / 495 * 100%) 1fr;
		letter-spacing: .07em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd .txtBox {
		padding: .6em .4em .7em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd .txtBox .txt {
		font-size: min((16 / 1200 * 100vw), 1.6rem);
		margin-left: -.3em;
		margin-right: -.3em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd .txtBox .kakakuBox {
		font-size: clamp(.9rem, (12 / 1200 * 100vw), 1.2rem);
		margin-top: min((10 / 1200 * 100vw), 10px);
		padding: .7em .5em .85em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd .txtBox .kakakuBox .kakaku {
		font-size: 1.166667em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd .txtBox .kakakuBox .kakaku .txtL {
		font-size: 1.928571em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsCaption {
		margin-top: min((25 / 1200 * 100vw), 25px);
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsCaption .bl.caption {
		font-size: clamp(1rem, (12 / 1200 * 100vw), 1.2rem);
	}
}
@media print, screen and (min-width: 1200px) {
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd .txtBox {
		padding: .625em .875em .875em;
	}
	[id="tk_recommend_reason_04-detail_01-swiper"] .slide04 .repairCostsWrap dd .txtBox .txt {
		margin-left: -.6em;
		margin-right: -.6em;
	}
}










/* ============================================================================
	tkBukkenlistWrap | 物件一覧
-------------------------------------------------------------------------------
 *	JSと連携しているコードが多く、構成やクラス名などが変更されると不具合が出ます。「index.js」を参照すること。
============================================================================ */
	.tkBukkenlistWrap {
		background: rgb(var(--site-themeColor-base));
		padding-top: calc(137 / 750 * 100vw);
		padding-bottom: calc(130 / 750 * 100vw);
	}
	.tkBukkenlistBox {
	}
@media print, screen and (min-width: 750px) {
	.tkBukkenlistWrap {
		padding-top: 80px;
		padding-bottom: 150px;
		padding-top: min((189 / 1200 * 100vw), 189px);
		padding-bottom: min((148 / 1200 * 100vw), 148px);
	}
}

/* tkBukkenlistBoxHeader
------------------------------------------------------------------------ */
	.tkBukkenlistBoxHeader {}
	.tkBukkenlistBoxHeader .heading {}

/* form
------------------------------------------------------------------------ */
	.tkBukkenlistBox form {
		margin-top: min((40 / 750 * 100vw), 40px);
	}
	[id="SiryoOrderForm"] {}


/* ---------------------------------
 * チェックボックスのデザイン（共通設定）
------------------------------------
 * JSが有効な場合デザインをカスタマイズする
 * JSで .is_checked の付け外し有
--------------------------------- */
	:where(body.is-js) .tkBukkenlistBox input[type="checkbox"] {
		appearance: none;
		position: relative;
		width: .9em;
		height: .9em;
		color: #000;
		background: #fff;
		border: 1px solid rgb(var(--site-themeColor-base_secondary_dark));
		border-radius: 0;
		cursor: pointer;
	}
	:where(body.is-js) .tkBukkenlistBox input[type="checkbox"].is_checked::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		height: 76%;
		aspect-ratio: 13 / 22;
		margin: auto;
		border: 0 solid #b21e24; /* #dc000c */
		border-width: 0 3px 3px 0;
		transform: translate(0, -13%) rotate(40deg);
	}
	@media (hover: hover) and (pointer: fine) {
		:where(body.is-js) .tkBukkenlistBox input[type="checkbox"]:hover {
			border: 1px solid currentColor;
			box-shadow: 0 0 1px 0 rgb(0 0 0 / .26);
		}
		:where(body.is-js) .tkBukkenlistBox input[type="checkbox"].is_checked:hover {
			background: #f8f8f9;
			box-shadow: 0 0 1px 0 rgb(0 0 0 / .14);
		}
		:where(body.is-js) .tkBukkenlistBox input[type="checkbox"].is_checked:hover::before {
			border-color: #a20e14; /* #cc0009 */
		}
	}
	:where(body.is-js) .tkBukkenlistBox input[type="checkbox"]:focus-visible {
			border: 1px solid currentColor;
			box-shadow: 0 0 1px 0 rgb(0 0 0 / .26);
	}
	:where(body.is-js) .tkBukkenlistBox input[type="checkbox"].is_checked:focus-visible {
			background: #f8f8f9;
			box-shadow: 0 0 1px 0 rgb(0 0 0 / .14);
	}
	:where(body.is-js) .tkBukkenlistBox input[type="checkbox"].is_checked:focus-visible::before {
			border-color: #a20e14; /* #cc0009 */
	}


/* sendSection | 全ての物件にチェック、まとめてエントリーする
------------------------------------------------------------------------ */
	.sendSection {
		color: rgb(var(	--site-themeColor-text_reverse));
		background: rgb(var(--site-themeColor-accent_2));
		padding-top: clamp(37px, (57 / 750 * 100vw), 60px);
		padding-bottom: clamp(40px, (60 / 750 * 100vw), 60px);
	}
	.sendSection .inner {
	}
	.sendSection .allCheckUnit {
		display: grid;
		justify-content: center;
		margin-bottom: clamp(2rem, (39 / 750 * 100vw), 40px);
	}
	.sendSection .allCheckUnit label {
		display: inline-grid;
		grid-template-columns: auto auto;
		gap: 0 .666667em;
		font-size: max(17px, (30 / 750 * 100vw));
		font-weight: bold;
		letter-spacing: .084em;
		cursor: pointer;
	}
	.sendSection .allCheckUnit input[type="checkbox"] {
		width:	1.333333em;
		height:	1.333333em;
	}
	.sendSection .allCheckUnit .allCheckUnitLabel {
		line-height: 1.3;
	}
	.sendSection .multipleEntriesButtonUnit {
	}
	.sendSection .multipleEntriesButtonUnit button {
		/* clear */
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		/*color: inherit;
		font: inherit;
		background: transparent;*/
		border: none;
		border-radius: 0;
		cursor: pointer;

		/* reset */
		padding-top: 1.4em;
		padding-bottom: 1.4em;
	}
@media print, screen and (min-width: 750px) {
	.sendSection .allCheckUnit label {
		gap: 0 .740740em;
		font-size: 2.7rem;
	}
	.sendSection .allCheckUnit input[type="checkbox"] {
		width:	1.481481em;
		height:	1.481481em;
	}
	.sendSection .multipleEntriesButtonUnit button {
		padding-top: 1.12em;
		padding-bottom: 1.27em;
	}
}


/* tkContactSection | 都心型戸建に関するお問い合わせ
------------------------------------------------------------------------ */
	.tkContactSection {
		color: rgb(var(--site-themeColor-base_secondary));
		text-align: center;
		letter-spacing: .08em;
		/*padding-top:	max(50px, (80 / 750 * 100vw));*/
		padding-bottom:	max(50px, (80 / 750 * 100vw));
	}
	.tkContactSectionInner {
		width: min(100%, 700px);
		padding: calc(35 / 750 * 100vw) calc(28 / 750 * 100vw) max(20px, (65 / 750 * 100vw));
		box-shadow: 0 0 0 1px #99999d, 0 0 0 4px rgb(var(--site-themeColor-base)), 0 0 0 5px #99999d;
	}
	.tkContactSection .tkContactIcon {
		width: max(40px, (120 / 750 * 100vw));
		margin-left: auto;
		margin-right: auto;
	}
	.tkContactSection .tkContactHeading {
		margin-top: .88em;
		margin-bottom: .88em;
	}
	.tkContactSection .tkContactText {
		font-size: .95em;
	}
	.tkContactSection .tkContactAddress {
		font-style: normal;
		margin-top:	max(20px, (50 / 750 * 100vw));
	}
	.tkContactSection .tkContactAddress .tkContactButton a {
		width: calc(580 / 660 * 100%);
		color: rgb(var(--site-themeColor-text_reverse));
		background: rgb(var(--site-themeColor-base_secondary));
	}
@media print, screen and (min-width: 750px) {
	.tkContactSection {
		/*padding-top:	60px;*/
		padding-bottom:	60px;
	}
	.tkContactSectionInner {
		display: inline-block;
		/*min-width: 600px;*/
		padding: 30px 35px 40px;
	}
	.tkContactSection .tkContactIcon {
		width: 80px;
	}
	.tkContactSection .tkContactHeading {
		font-size: clamp(2.45rem, (27 / 1200 * 100vw), 2.7rem);
		margin-top: .667em;
		margin-bottom: .667em;
	}
	.tkContactSection .tkContactText {
		font-size: 1em;
	}
	.tkContactSection .tkContactAddress {
		margin-top:	25px;
	}
	.tkContactSection .tkContactAddress .tkContactButton a {
		/*width: calc(580 / 660 * 100%);*/
		width: 100%;
	}
}


/* bukkenListWrap | 物件一覧のリストのラッパー
------------------------------------------------------------------------ */
	.bukkenListWrap {
		padding-top:	max(50px, (80 / 750 * 100vw));
	}
@media print, screen and (min-width: 750px) {
	.bukkenListWrap {
		/*padding-top:	60px;*/
		padding-top:	min((80 / 1200 * 100vw), 80px);
	}
}

/* 物件ユニットの親要素（共通設定）（'個別設定'は後述）
---------------------------------------------------- */
	[class*="bukkenListWrap__"] {
		display: grid;
		grid-template-columns: 1fr;
		gap: max(50px, (100 / 750 * 100vw)) 0;
		width: var(--site-sizeContentWide-M, 88%);
		max-width: var(--site-sizeMaxWidth-M, 1000px);
		margin-left: auto;
		margin-right: auto;
	}
@media print, screen and (min-width: 750px) {
	[class*="bukkenListWrap__"] {
		--M-fluidGapColumn-max-gap: 65;
		--M-fluidGapColumn-min-gap: 15;
		--M-fluidGapColumn-max-viewport: 1600;
		--M-fluidGapColumn-min-viewport: 750;
		--M-fluidGapColumn-gapSize: clamp( var(--M-fluidGapColumn-min-gap) * .1rem, (var(--M-fluidGapColumn-min-gap) * .1rem) + (1vw - (var(--M-fluidGapColumn-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidGapColumn-max-gap) - var(--M-fluidGapColumn-min-gap)) / (var(--M-fluidGapColumn-max-viewport) - var(--M-fluidGapColumn-min-viewport))), var(--M-fluidGapColumn-max-gap) * .1rem );
		
		grid-template-columns: repeat(3, 1fr);
		/*gap:  min((80 / 1200 * 100vw), 80px) min((42 / 1200 * 100vw), 42px);*/
		/*gap:  min((80 / 1200 * 100vw), 80px) min((33 / 1200 * 100vw), 42px);*/
		gap:  min((80 / 1200 * 100vw), 80px) var(--M-fluidGapColumn-gapSize);
		width: var(--site-sizeContentWide-L, 94%);
		max-width: var(--site-sizeMaxWidth-L, 1500px);
	}
}

/* 物件ユニット（共通設定） | JSと連携多し。必ず「index.js」を参照すること。
---------------------------------------------------- */
	.bukkenListUnit {
		display: grid;
		grid-template: 
			"bukkenCheckbox" auto
			"bukkenPic" auto
			"bukkenHead" auto
			"bukkenData" 1fr /
			1fr;
		align-items: start;
		position: relative;
		z-index: 0;
	}
	.bukkenListUnit .bukkenHead {		grid-area: bukkenHead;		/*background: red;*/}
	.bukkenListUnit .bukkenCheckbox {	grid-area: bukkenCheckbox;	/*background: lime;*/}
	.bukkenListUnit .bukkenPic {		grid-area: bukkenPic;		/*background: green;*/}
	.bukkenListUnit .bukkenData {		grid-area: bukkenData;		/*background: blue;*/}

	.bukkenListUnit .bukkenHead {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 0 .375em;
		line-height: 1.411764;
		font-size: max(1.62rem, (32 / 750 * 100vw));
		letter-spacing: .05em;
		padding-top:	calc(20 / 750 * 100vw);
		padding-bottom:	calc(20 / 750 * 100vw);
	}
	.bukkenListUnit .bukkenHead__ico {
		line-height: 1.35;
		font-family: var(--site-font_family-en_2);
		font-size: max(.85rem, (17 / 750 * 100vw));
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: .05em;
	}
	.bukkenListUnit .bukkenHead__ico > * {
		display: inline-block;
	}
	.bukkenListUnit .bukkenHead__ico .ico_status_new {
		color: rgb(var(--site-themeColor-text_reverse));
		text-transform: uppercase;
		background: rgb(var(--site-themeColor-accent_4));
		/*padding: .25em .55em .27em .65em;*/
		padding: .3em .55em .11em .65em;
	}
	.bukkenListUnit .bukkenHead__name {
		display: grid;
		align-items: center;
	}
	.bukkenListUnit .bukkenHead__name .name {
		font-weight: normal;
	}
	.bukkenListUnit .bukkenCheckbox {
		position: absolute;
		inset: 0 auto auto 0;
		z-index: 10;
	}
	.bukkenListUnit .bukkenCheckbox label { /* ※文字はクリッピングするけど一応横並び設定入れておく */
		display: grid;
		grid-template-columns: auto 1fr;
		padding: calc(15 / 750 * 100vw);
		cursor: pointer;
		line-height: .5;
	}
	.bukkenListUnit .bukkenCheckbox label > * {
		line-height: 1.35;
	}
	.bukkenListUnit .bukkenCheckbox input[type="checkbox"] { /* = .multipleEntriesCheck */
		width:	max(25px, (50 / 750 * 100vw));
		height:	max(25px, (50 / 750 * 100vw));
	}
	.bukkenListUnit .bukkenCheckbox .multipleEntriesCheckLabel { /* = 文字（クリッピングする） */
		align-self: center;
		position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0px 0px 99.99% 99.99%); overflow: hidden; width: 1px; height: 1px; white-space: nowrap; padding: 0; border: 0;
	}
	.bukkenListUnit .bukkenPic {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto; /* = サムネイルエリアの高さ テキストエリアの高さ */
		width: 100%;
		aspect-ratio: 660 / 440;
		position: relative;
	}
	.bukkenListUnit .bukkenPic__thumbnail {
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		background: rgb(0 0 0 / .12);
	}
	.bukkenListUnit .bukkenPic__thumbnail img {
		position: absolute;
		inset: 0;
		z-index: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: contain;
		object-position: 50% 50%;
		/* //////////////////////////////
		 * object-fit プロパティは、
		 - contain … 画像の比率を保ち、短辺合わせで伸縮させる（左右に余白が生まれる）
		 - cover … 画像の比率を保ち、長辺辺合わせで伸縮させる（上下がトリミングされる）
		////////////////////////////// */
	}
	.bukkenListUnit .bukkenPic__text {
		display: grid;
		position: relative; /* 光が走るエフェクトの親・先祖要素に relative 追加する */
		height: 100%;
		overflow: hidden;
		line-height: 1.411764;
		font-size: max(1.45rem, (29 / 750 * 100vw));
		letter-spacing: .1em;
	}
	.bukkenListUnit .bukkenPic__text > *::before { /* 光が走るエフェクト */
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		height: 0;
		width: 100%;
		padding-top: 100%;
		background: rgb(255 255 255/.43);
		transform: translate(-100%, -100%) rotate(-45deg) scale(1);
		transform-origin: center center;
		animation: 6500ms ease-out infinite ANIME-M_shinyEffect_toRight;
		pointer-events: none;
	}
	.bukkenListUnit .bukkenPic__text .raijoUketsuke {
		display: grid;
		place-content: center;
		color: #fff;
		background: rgb(var(--site-themeColor-accent_1) / .9);
		padding: .18em .5em .33em;
	}
	.bukkenListUnit .bukkenData {
		line-height: 1.5;
		font-size: max(1.2rem, (23 / 750 * 100vw));
		letter-spacing: .075em;
		padding-top: .57em;
		border-top: 1px solid currentColor;
	}
	.bukkenListUnit .bukkenData__description {
	}
	.bukkenListUnit .bukkenData__description .soldoutTxt {
		display: inline-block;
		color: rgb(var(--site-themeColor-accent_4));
		font-weight: bold;
	}
	.bukkenListUnit .bukkenData__description .description {
	}
	.bukkenListUnit .bukkenData__description .description small.caption {
		font-weight: inherit;
		letter-spacing: inherit;
	}
	.bukkenListUnit .bukkenData__link {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: calc(20 / 750 * 100vw) calc(20 / 750 * 100vw);
		margin-top: calc(20 / 750 * 100vw);
	}
	.bukkenListUnit .bukkenData__link > * { /* = div.ボタンの種類 */
		display: grid;
	}
	.bukkenListUnit .bukkenData__link a {
		--_bgColor:			#000000;
		--_bgColor_Hover:	#333333;
		--_boxShadow:		0 5px 5px 0 rgb(0 0 0/.35);
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: .3em;	/* ラベルエリアとアイコンエリアの要素間余白 */
		position: relative;
		z-index: 0;
		width: 100%;
		color: #ffffff;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		background: var(--_bgColor);
		padding: .807692em calc(20 / 750 * 100vw);
		box-shadow: var(--_boxShadow);
		translate: 0 .01px; /* おまじない（hover時にtranslate操作があるときに、ここが(0 0)のままだと少しずれることがあるので.01pxを追加しておく） */
	}
	.bukkenListUnit .bukkenData__link a::before,
	.bukkenListUnit .bukkenData__link a::after { /* アイコンエリア */
		content: "";
		display: inline-block;
		height: .58em;
		aspect-ratio: 1;
		scale: 1 1;
		transform: rotate(45deg);
	}
	.bukkenListUnit .bukkenData__link a::after {
		justify-self: end;
		border: 0 solid;
		border-width: 2px 2px 0 0;
	}
	.bukkenListUnit .bukkenData__link a .label {
		display: block;
		translate: 0 -.07em;
	}
	.bukkenListUnit .bukkenData__link a .label .inbl {
		text-decoration: inherit;
	}
	/* -- Individual -- | ボタンの種類 */
	.bukkenListUnit .bukkenData__link .bukkenSite a {
		--_bgColor:			#686868;
		--_bgColor_Hover:	#838383;
		color: #fff;
	}
	.bukkenListUnit .bukkenData__link .bukkenEntry a {
		--_bgColor:			#9b6a6a;
		--_bgColor_Hover:	#b87979;
		color: #fff;
		letter-spacing: .04em;
	}
	.bukkenListUnit .bukkenData__link .bukkenReservation a {
		--_bgColor:			#c1a85a;
		--_bgColor_Hover:	#d9bb64;
		color: #fff;
	}

	/* hover */
	.bukkenListUnit .bukkenData__link a[href] {
		transition: 100ms ease-out;
		transition-property:  color, background, border, box-shadow, opacity, translate;
	}
	@media (hover: hover) and (pointer: fine) {
		.bukkenListUnit .bukkenData__link a[href]:hover {
			--_boxShadow:		0 2px 2px 0 rgb(0 0 0/.45);
			background: var(--_bgColor_Hover);
			translate: 0 2px;
		}
	}
	.bukkenListUnit .bukkenData__link a[href]:focus-visible {
			--_boxShadow:		0 2px 2px 0 rgb(0 0 0/.45);
			background: var(--_bgColor_Hover);
			translate: 0 2px;
	}

@media print, screen and (min-width: 750px) {
	.bukkenListUnit {
		--bukkenListUnit__winW: 1600;
	}
	.bukkenListUnit .bukkenHead {
		line-height: 1.2;
		/*font-size: min((23 / var(--bukkenListUnit__winW) * 100vw), 2.3rem);*/
		font-size: clamp(1.55rem, (22 / var(--bukkenListUnit__winW) * 100vw), 2.2rem);
		padding-top:	min((15 / var(--bukkenListUnit__winW) * 100vw), 15px);
		padding-bottom:	min((15 / var(--bukkenListUnit__winW) * 100vw), 15px);
	}
	.bukkenListUnit .bukkenHead__ico {
		/*font-size: min((13 / var(--bukkenListUnit__winW) * 100vw), 1.3rem);*/
		font-size: clamp(.85rem, (11 / var(--bukkenListUnit__winW) * 100vw), 1.1rem);
	}
	.bukkenListUnit .bukkenCheckbox label {
		padding: min((15 / var(--bukkenListUnit__winW) * 100vw), 15px);
	}
	.bukkenListUnit .bukkenCheckbox input[type="checkbox"] { /* = .multipleEntriesCheck */
		width:	min((40 / var(--bukkenListUnit__winW) * 100vw), 40px);
		height:	min((40 / var(--bukkenListUnit__winW) * 100vw), 40px);
	}
	.bukkenListUnit .bukkenPic__text {
		/*font-size: min((24 / var(--bukkenListUnit__winW) * 100vw), 2.4rem);*/
		font-size: clamp(1.45rem, (21 / var(--bukkenListUnit__winW) * 100vw), 2.1rem);
	}
	.bukkenListUnit .bukkenPic__text .raijoUketsuke {
		padding: .25em .5em .38em;
	}
	.bukkenListUnit .bukkenData {
		/*font-size: min((16 / var(--bukkenListUnit__winW) * 100vw), 1.6rem);*/
		font-size: clamp(1.05rem, (15.5 / var(--bukkenListUnit__winW) * 100vw), 1.55rem);
		padding-top: .65em;
	}
	.bukkenListUnit .bukkenData__description .soldoutTxt {
		margin-bottom: .05em; /* 微調整 */
	}
	.bukkenListUnit .bukkenData__link {
		gap: min((15 / var(--bukkenListUnit__winW) * 100vw), 15px) min((15 / var(--bukkenListUnit__winW) * 100vw), 15px);
		/*margin-top: min((23 / var(--bukkenListUnit__winW) * 100vw), 23px);*/
		margin-top: 1em;
	}
	.bukkenListUnit .bukkenData__link a {
		padding: .85625em min((14 / var(--bukkenListUnit__winW) * 100vw), 14px);
	}
	/* -- Individual -- | ボタンの種類 */
	.bukkenListUnit .bukkenData__link .bukkenEntry a .label {
		margin-left: -.4em;
	}
}


/* ----------------------------------------------------
	bukkenListWrap__initialDisplay | 最初から表示されているリスト（物件ユニットの親要素'個別設定'）
---------------------------------------------------- */
	.bukkenListWrap__initialDisplay {}


/* ----------------------------------------------------
	bukkenListWrap__moreDisplay | 'もっと見る'の中のリスト（物件ユニットの親要素'個別設定'）
---------------------------------------------------- */
	.bukkenListWrap__moreDisplay {}



/* bukkenShowMoreWrap | もっと見る（折りたたみ要素）
------------------------------------------------------------------------ */
	.bukkenShowMoreWrap {
		display: block;
		width: 100%;
		margin-top: max(42px, (42 / 750 * 100vw));
	}
	.bukkenShowMoreWrap .bukkenShowMoreBtn {
		text-align: center;
	}
	.bukkenShowMoreWrap .bukkenShowMoreBtn button {
		/* clear */
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		color: inherit;
		font: inherit;
		background: transparent;
		border: none;
		border-radius: 0;
		cursor: pointer;

		/* reset */
		display: inline-grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: max(12px, (12 / 750 * 100vw));	/* ラベルエリアとアイコンエリアの要素間余白 */
		position: relative;
		z-index: 0;
		letter-spacing: .05em;
		padding: .2em .05em;
		margin-left: auto;
		margin-right: auto;
		border-bottom: 2px solid currentColor;
	}
	.bukkenShowMoreWrap .bukkenShowMoreBtn button::after {
		content: "";
		display: inline-block;
		height: .55em;
		aspect-ratio: 1;
		border: 0 solid;
		border-width: 2px 2px 0 0;
		transform: rotate(135deg);
		scale: 1 1;
		/*translate: 0 .01px;*/ /* おまじない（hover時にtranslate操作があるときに、ここが(0 0)のままだと少しずれることがあるので.01pxを追加しておく） */
		translate: 0 -7%;
	}
	.bukkenShowMoreWrap .bukkenShowMoreBtn button .label {
		translate: 0 .01px; /* おまじない（hover時にtranslate操作があるときに、ここが(0 0)のままだと少しずれることがあるので.01pxを追加しておく） */
	}
	.bukkenShowMoreWrap .bukkenShowMoreBody {
		display: none; /* 初期値none | JSで開閉 */
		padding-top: max(42px, (42 / 750 * 100vw));
	}
	/* hover */
	.bukkenShowMoreWrap .bukkenShowMoreBtn button,
	.bukkenShowMoreWrap .bukkenShowMoreBtn button::after,
	.bukkenShowMoreWrap .bukkenShowMoreBtn button .label {
		transition: 150ms ease-out;
		transition-property: color, translate;
	}
	@media (hover: hover) and (pointer: fine) {
		.bukkenShowMoreWrap .bukkenShowMoreBtn button:not([disabled]):hover {
			color: #000;
		}
		.bukkenShowMoreWrap .bukkenShowMoreBtn button:not([disabled]):hover::after,
		.bukkenShowMoreWrap .bukkenShowMoreBtn button:not([disabled]):hover .label {
			translate: 0 .175em;
		}
	}
	.bukkenShowMoreWrap .bukkenShowMoreBtn button:not([disabled]):focus-visible {
			color: #000;
	}
	.bukkenShowMoreWrap .bukkenShowMoreBtn button:not([disabled]):focus-visible::after,
	.bukkenShowMoreWrap .bukkenShowMoreBtn button:not([disabled]):focus-visible .label {
			translate: 0 .175em;
	}

@media print, screen and (min-width: 750px) {
	.bukkenShowMoreWrap {
		margin-top: min((56 / 1200 * 100vw), 56px);
	}
	.bukkenShowMoreWrap .bukkenShowMoreBtn button {
		column-gap: min((8 / 1200 * 100vw), 8px);	/* ラベルエリアとアイコンエリアの要素間余白 */
		border-width: 0 0 1px;
	}
	.bukkenShowMoreWrap .bukkenShowMoreBtn button::after {
		height: .6em;
		border-width: 1px 1px 0 0;
		translate: 0 -25%;
	}
	.bukkenShowMoreWrap .bukkenShowMoreBody {
		padding-top: min((56 / 1200 * 100vw), 56px);
	}
}