@charset "utf-8";

/* CSS Document */

/* ======================================================
	[object]
	@import"../css/test_line.css";
	------------------------------------------------------
	clamp()ジェネレーター
	https://min-max-calculator.9elements.com/
====================================================== */


:root
{
	--line_height		: 2;
	--font				: 16px;
	--font				: clamp(0.563rem, 0.3rem + 0.88vw, 1rem);
	--font				: clamp(0.75rem, 0.653rem + 0.32vw, 1rem);
	--font				: clamp(0.625rem, 0.479rem + 0.49vw, 1rem);
	--font				: clamp(0.625rem, 0.4rem + 0.75vw, 1rem);
	--font				: clamp(0.625rem, 0.424rem + 0.67vw, 1rem);/* 10 - 16px, 480-1376px*/
	--font				: clamp(0.563rem, 0.328rem + 0.78vw, 1rem);/* 9 - 16px, 480-1376px*/
	--font				: clamp(0.5rem, 0.232rem + 0.89vw, 1rem);/* 8 - 16px, 480-1376px*/
	--font				: clamp(0.5rem, 0.348rem + 0.76vw, 1rem);/* 8 - 16px, 320-1376px*/
	--font				: 16px;
	--font				: clamp(0.5rem, 1.2vw, 1rem);
	
	--font_family		: Yu Gothic, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	--tracking			: 0.15em;
	--tracking_em		: calc(1em + var(--tracking));
	
	--max_width			: calc(var(--font) * 80);
	--max_width			: clamp( 480px, calc(100% - 1em), 1280px );
	--max_width			: clamp( 480px, calc(100% - 1em), 80em );

	--gap				: 3em;
	--margin			: 4vw;
	--padding			: 4vw;
	--padding_tb		: 7em;
	--border_radius		: 0.5em;
	
	--h1_h				: 35em;
	--logo_w			: ;
	--logo_h			: 3em;
	
	--w					: 255 255 255;
	--bk				: 0 0 0;
	--r					: 204 51 51;
	--or				: 243 151 0;
	--y					: 255 193 7;
	--bl				: 33 150 243;
	--gr				: 139 195 74;
	--dark_brown		: 112 66 44;
	
	--color				: 0 0 0;
	--href_icon_size	: 1.5em;
	--anchor_color		: inherit;
	--bg_color			: 0 0 0;
	--border_color		: 0 0 0;

	--arrow_color		: var(--color);
	--btn_arrow_type	: 0 0, 0% 100%, 100% 50%;

	--btn_bg_color		: rgb(255 255 255 / 0);
	
	--arrow_color		: rgb(var(--btn_bg_color));

	--section_color		: 0 0 0;
	--section_color_alpha	: 0.05;
	
	--drawer_toggle_size	: 2.5em;

	--cal_color_daily_bg	: rgb(22 52 108 / 0.2);
	--cal_color_sun_bg		: rgb(255 232 232 / 0.5);
	--cal_color_sun			: rgb(244 69 108);
	--cal_color_sat_bg		: rgb(235 245 253 / 0.5);
	--cal_color_sat			: rgb(124 147 201);
	--cal_color_holiday_bg	: var(--cal_color_sun_bg);
	--cal_color_holiday		: var(--cal_color_sun);
	--cal_color_closed_bg	: rgb(224 136 167 / 0.75);
	--cal_color_closed		: rgb(var(--w));
	--cal_color_OK			: rgb(32 35 192);
	--cal_color_NG			: rgb(var(--bk) / 0.354);

	--x_color			: rgb(0 0 0);
	
	--instagram_color	: rgb(211 41 133);
	--instagram_gradation	: linear-gradient(230deg, #D300C5,#F00679,#FF7A00);
	
	--twitter_color		: #55acee;
	
	--facebook_color	: #315096;
	
	--line_color		: #00c300;
	--lineat_color		: #00c300;
	
	--ameblo_color		: rgb(58 140 45);
	
	--rakuten_color		: #bf0000;

	--mask_arrow_line_r		: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='icon' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-mask:new 0 0 50 50;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%237AC943;%7D%0A%3C/style%3E%3Cpolygon id='XMLID_2_' class='st0' points='21.395,14.376 19.981,15.79 29.191,25 19.981,34.21 21.395,35.624 32.02,25 '/%3E%3C/svg%3E");

}

/* [本文以上でも、ヨコ長] */
@media screen and (min-width: 1280px) and (max-height : calc(800px - 1px)) {
	:root
	{
	}
}

/* [ヨコ長] */
@media screen and (orientation: landscape) {
	:root
	{
		--font				: clamp(0.7rem, 0.435rem + 0.88vh, 1rem);
	}
}

/* [ヨコ長 + 高さ800px以下] 
@media screen and (orientation: landscape) and (max-height : calc(800px - 1px)) {
	:root
	{
		--font				: clamp(0.563rem, -0.094rem + 2.19vh, 1rem);
	}
}
*/

/* ============================================================================================================
	logo
------------------------------------------------------------------------------------------------------------ */
.Logo
{
	display: grid;
	gap: 0.5em;
	text-align: left;
	line-height: 1;
}

.Logo :is(a, .a)
{
	display: flex;
}

.Logo .Img
{
}

.Logo .Img img
{
	width: auto;
	height: var(--logo_h);
	object-fit: contain;
}

/* キャッチコピー */
.Catch
{
	font-size: 0.8em;
	display: block;
	vertical-align: middle;
}

.Catch br
{
}

.Catch.On
{
}

.Catch.Prev
{
}

.Catch.After
{
}

.Catch.Bottom
{
}



.Header .Logo
{
}

.Header .Logo .Name
{
	line-height: 1;
	white-space: nowrap;
	word-break: break-all;
}


.Footer .Logo
{
	font-size: 0.8em;
	line-height: inherit;
}

.Footer .Catch
{
}

.Footer .Catch br
{
	display: none;
}


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


/* ============================================================================================================
	<div><section>
------------------------------------------------------------------------------------------------------------ */
section,
.section
{
	padding-top: var(--padding_tb);
	padding-bottom: var(--padding_tb);
}
/*
*/

:where(section, .section):nth-of-type(odd)
{
}

:where(section, .section):nth-of-type(even)
{
}
/*
	background-color: rgb(var(--section_color) / var(--section_color_alpha));
*/

/* ------------------------------------------------------------------------------------------------------------
	段落 */
.Note
{
	margin-left: 2em;
}


:is(ul, ol).List
{
	margin: 0;
	list-style: none;
}

:is(ul, ol).List>li
{
	margin: 0;
}


/* ------------------------------------------------------------------------------------------------------------
	囲み */
.lead
{
	font-size: 1.2em;
	margin-top: 3em;
	margin-bottom: 3em;
}

.lead div:last-of-type
{
	margin-bottom: 0;
}

.Border,
.Frame
{
	padding: calc(var(--gap) / 2);
}


/* ------------------------------------------------------
	背景 */
.BG
{
	--border_color		: var(--w);

	background-color: rgb(var(--bg_color));
	color: rgb(255 255 255);
}

.BG:not(.section)
{
	margin-top: var(--gap);
	margin-bottom: var(--gap);
	padding: var(--gap);
}

.BG.BGK
{
	--bg_color			: 0 0 0 ;
}


/* ------------------------------------------------------
	円で囲む */
.Circle
{
	padding: 1em;
	border-radius: 100em;
	display: inline-block;
}


/* ============================================================================================================
	grid */
/*
.grid
{
}

.grid>*
{
	display: grid;
	grid-gap: var(--gap);
	grid-template-columns: 1fr 1fr 1fr;
}

.grid>*>*
{
}
*/


/* ============================================================================================================
	フキダシ */
.balloon
{
	--balloon_round			: 100%;
	--balloon_color			: #4ECDC4;
	--balloon_arrow_aspect	: 1/cos(30deg);
	--balloon_arrow_size	: 1em;

	display: block;
	padding: 1em;
	background-color: rgb(var(--balloon_color));
	border-radius: var(--balloon_round);
	line-height: 1;
}

.balloon::after
{
	content: "";
	display: block;
	
	position: absolute;
	left: 50%;
	top: 100%;
	translate: -0% -50%;

	width: var(--balloon_arrow_size);
	height: var(--balloon_arrow_size);
	background-color: rgb(var(--balloon_color));

	aspect-ratio: var(--ballballoon_arrow_aspecton_aspect);
	clip-path: polygon(
		50% 100%,
		100% 0,
		0 0
	);
}
/*
	/ triangle dimension /
	--balloon_base: 2em		; / base /
	--balloon_height		: 1em; / height /

	--balloon_position		: 50%; / triangle position (0%:left 100%:right) /
	--balloon_round			: 1em; / the radius /
	--balloon_color			: #4ECDC4;

	padding: 1em;
	border-radius:
		var(--balloon_round)
		var(--balloon_round)
		min(var(--balloon_round),100% - var(--balloon_position) - var(--balloon_base)/2)
		min(var(--balloon_round),var(--balloon_position) - var(--balloon_base)/2)/var(--balloon_round)
	;
	background: var(--balloon_color);
	border-image:
		conic-gradient(var(--balloon_color) 0 0)
		fill 0
		/
		var(--balloon_round) calc(100% - var(--balloon_position) - var(--balloon_base)/2) 0 calc(var(--balloon_position) - var(--balloon_base)/2)
		/
		0 0 var(--balloon_height) 0
	;
	
	clip-path: polygon(
		0 100%,
		0 0,
		100% 0,
		100% 100%,
		min(100%, var(--balloon_position) + var(--balloon_base)/2) 100%,
		var(--balloon_position) calc(100% + var(--balloon_height)),
		max(0%, var(--balloon_position) - var(--balloon_base)/2) 100%
	);
*//*
.Balloon
{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	padding: 1em 0.5em;
	border-radius: 100%;
	text-align: center;
	line-height: 1.2;
	letter-spacing: normal;
}

.Balloon b
{
	color: rgb(var(--w));
}

.Balloon:before
{
	content: '';
	position: absolute;
	width: 1em;
	height: 1em;
	border-width: 1em 1.5em 1em 0;
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-left-color: transparent;
}

.Balloon.L
{
}

.Balloon.R
{
}

.Balloon.L:before,
.Balloon.R:before
{
	top: calc((100% - 1.5em) / 2);
}

.Balloon.L:before
{
	left: -0.75em;
}

.Balloon.R:before
{
	right: -0.75em;
	rotate: 180deg;
}

.Balloon.T
{
}

.Balloon.B
{
}

.Balloon.T:before,
.Balloon.B:before
{
	left: calc((100% - 1em) / 2);
	right: calc((100% - 1em) / 2);
}

.Balloon.T:before
{
	top: -0.75em;
}

.Balloon.B:before
{
	bottom: -0.75em;
}

.Balloon.outline
{
}

.Balloon.outline:before
{
	border-width: 3px;
	border-color: inherit;
	width: 2em;
	height: 2em;
	rotate: 45deg;
	z-index: 2;
	background-color: rgb(var(--w));
}

.Balloon.outline.L:before
{
	border-top-color: transparent;
	border-right-color: transparent;
}

.Balloon.outline.R:before
{
	border-bottom-color: transparent;
	border-left-color: transparent;
}

.Balloon.outline.T:before
{
	border-bottom-color: transparent;
	border-right-color: transparent;
}

.Balloon.outline.B:before
{
	border-top-color: transparent;
	border-left-color: transparent;
}
*/





/* ======================================================
	爆弾
------------------------------------------------------ */
/*
.Bomb
{
	display: block;
	display: inline-table;
	text-align: center;
	letter-spacing: normal;
	text-indent: 0;
	color: rgb(var(--w));
	padding: 0;
	margin: 0;
	line-height: 0;
	width: 5em;
	height: 5em;
	rotate: -10deg;
}

.Bomb>b
{
	display: block;
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 100%;
}

.Bomb b
{
	font-weight: inherit;
}

.Bomb:before,
.Bomb b:before
{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.Bomb:before
{
	rotate: 30deg;
}

.Bomb>b:before
{
	rotate: 60deg;
}

.Bomb span
{
	display: inline-block;
	width: 100%;
	line-height: 1.2;
}

.BombC2
{
	width: 2em;
	height: 2em;
}
*/


/* ============================================================================================================
	new
------------------------------------------------------------------------------------------------------------ */
.NewMark
{
	position: absolute;
	left: 0;
	bottom: 100%;
	font-size: 0.8em;
	line-height: 1;
	letter-spacing: normal;
}

.News .List .NewMark
{
	top: 50%;
	left: initial;
	right: calc(100% + 0.5em);
	bottom: initial;
	translate: -0% -50%;
}

.NewsDetail .NewMark
{
	top: 0.5em;
	left: 50%;
	right: initial;
	bottom: initial;
	translate: -50% -0%;
}
/*
	padding: 0.3em 0.5em;
*/
/*
.NewMark
	{
	letter-spacing: normal;
	color: rgb(var(--w));
	font-size: 0.8em;
	rotate: -10deg;
}
.NewMark b,
.NewMark b:before,
.NewMark b:after
	{
	display: block;
	width: 1.2em;
	height: 1.2em;
}
.NewMark b
	{
	position: relative;
	text-align: center;
	rotate: -30deg;
	font-weight: inherit;
}
.NewMark b:before
	{
	content: "";
	position: absolute;
	rotate: 30deg;
	z-index: 0;
}
.NewMark b:after
	{
	content: "N";
	position: absolute;
	rotate: 60deg;
	z-index: 1;
}
*/



/* ============================================================================================================
	ribbon
------------------------------------------------------------------------------------------------------------ */
.ribbon
{
	display: inline-block;
	padding: 0.25em 0.75em;
	background-color: rgb(240 131 7 / 0.9);
	color: rgb(var(--w));
	line-height: 1.5;
	clip-path: polygon(
		100% 0%,
		calc(100% - 0.5em) 50%,
		100% 100%,
		0% 100%,
		0.5em 50%,
		0% 0%
	);
	text-align: center;
}
/*
	rotate: -5deg;
*/



/* ============================================================================================================
	new ribbon　肩に掛ける
	------------------------------------------------------
	http://webrocketsmagazine.com/entry/20120224/css3-image-effects.html#ribbon
------------------------------------------------------------------------------------------------------------ */
.Ribbon
{
}

.Ribbon>.Wrap
{
	overflow: hidden;
}

/*
	position: relative;
*/

.Ribbon>.Wrap:after
{
	font-size: 1em;
	content: "NEW";	/* 表示するテキスト */
	display: inline-block;
	position: absolute;
	top: 0.25em;
	left: -3em;
	width: 10em;
	height: auto;
	text-indent: 0;
	padding: 0.25em 0 0.25em;
	background-color: rgb(217 66 54 / 0.9);
	background-position: right -75px;
	background-repeat: no-repeat;
	border-width: 3px;
	border-style: double;
	border-color: rgb(var(--w) / 0.5);
	text-align: center;
	color: #fff;
	line-height: 1;
	letter-spacing: normal;
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	rotate: -30deg;
	z-index: 1;
}

/*
	font-size: 0.9em;
	box-shadow: 0 1px 0px rgb(62 63 31 / 0.5);
*/



/* ============================================================================================================
	点滅
------------------------------------------------------------------------------------------------------------ */
.blinking
{
	-webkit-animation: blink 1.0s ease-in-out infinite alternate;
	-moz-animation: blink 1.0s ease-in-out infinite alternate;
	animation: blink 1.0s ease-in-out infinite alternate;
}
/* パキっと */
@-webkit-keyframes blink {
	0% {
		opacity: 0;
	}
	49.9% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@-moz-keyframes blink {
	0% {
		opacity: 0;
	}
	49.9% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes blink {
	0% {
		opacity: 0;
	}
	49.9% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

/* ふわっと
@-webkit-keyframes blink
	{
	0% {opacity:0;}
	100% {opacity:1;}
}
@-moz-keyframes blink
	{
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes blink
	{
	0% {opacity:0;}
	100% {opacity:1;}
}
*/




/* ===========================================================================================================
	流れ
------------------------------------------------------------------------------------------------------------ */
.Step
{
	--step_gap		: 8em;
	--step_padding	: 3em;
	--step_num		: 5em;
	--step_arrow	: 5em;
	--step_icon		: 8em;
	--step_photo	: 8em;

	text-align: inherit;
}

.Step ol
{
	list-style: none;
	margin: 0;
	gap: var(--step_gap);
}

.Step ol>li
{
	margin: 0;
	width: 100%;
}

.Step ol>li>.Wrap
{
	display: flex;
	gap: var(--step_padding);
}

.Step .step_body
{
	display: flex;
	justify-content: space-between;
	gap: var(--step_padding);
	width: calc(100% - (var(--step_icon) + var(--step_padding)));
}
/*
	width: calc(100% - (var(--step_icon) + var(--step_gap)));
*/

.Step .step_body :where(.No, .num)
{
	text-align: center;
	font-weight: inherit;
}

.Step .step_body :where(.No, .num)
{
	display: grid;
	justify-content: center;
	align-items: center;
	gap: 0.5em;

	width: var(--step_num);
	height: var(--step_num);

	background-color: rgb(var(--bl) / 0.2);

	text-align: center;
	font-weight: normal;
	letter-spacing: normal;
	line-height: 1;
}

.Step .step_body :where(.No, .num)>*
{
}

.Step .step_body :where(.No, .num)>span
{
}

.Step .step_body :where(.No, .num)>b
{
	font-size: 1.75em;
}


.Step .step_head
{
	display: flex;
}

.Step .step_head .title
{
	background: none;
	margin-top: 0;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	gap: var(--step_padding);
}

.Step .step_head .title .name
{
}

.Step .step_main
{
	margin-top: 1em;
	margin-left: calc(var(--step_num) + var(--step_padding));
}

.Step .step_main .txt
{
	text-align: left;
}


.Step .step_body a
{
}


.Step .step_body .icon
{
	min-width: var(--step_icon);
	max-width: var(--step_icon);
	padding: 1em;
	background-color: rgb(var(--bl) / 0.2);
	align-self: flex-start;
}

.Step .step_body .arrow_item .icon
{
	background-color: transparent;

	/* triangle dimension */
	--b: 2em; /* base */
	--h: 1em; /* height */
	--p: 50%; /* triangle position (0%:left 100%:right) */
	clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
		min(100%,var(--p) + var(--b)/2) 100%,
		var(--p) calc(100% + var(--h)),
		max(0%  ,var(--p) - var(--b)/2) 100%)
	;
	border-image:
		fill 0/var(--h)
		conic-gradient(rgb(var(--bl) / 0.2) 0 0)
	; /* the color */
}
/*
.Step .step_body .icon:before
{
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(100% + 3em);
	height: calc(100% + 3em);
	translate: -50% -50%;

}
*/

.Step .step_body .photo
{
	min-width: var(--step_photo);
	max-width: var(--step_photo);
	border-radius: 100em;
	background-color: rgb(var(--bl) / 0.1);
	align-self: flex-end;;
}

.Step .step_body .photo img
{
	width: 100%;
}


.Step .arrow
{
	display: block;

	position: absolute;
	left: 50%;
	top: calc(
		100% + (
			(var(--step_gap) - (var(--step_arrow) / 2))
			/ 2
		)
	);
	translate: -50% -0%;

	line-height: 1;
	letter-spacing: normal;
}
/*
	width: var(--step_arrow);
	height: calc(var(--step_arrow) / 2);
	margin: 0 auto;

	clip-path: polygon(50% 100%,100% 0,0 0);
	background-color: rgb(var(--bl) / 0.2);
	
	aspect-ratio: 1/cos(60deg);
	↓正三角形
	aspect-ratio: 1/cos(30deg);
*/

.Step .arrow::after
{
	content: none;
}

.Step .arrow>*
{
	position: absolute;
	display: none;
	opacity: 0;
}


/* ============================================================================================================
	開け閉め
------------------------------------------------------------------------------------------------------------ */
.Change
{
	--change_btn_size		: 1.5em;
	--change_btn_padding	: 3em;

	text-align: left;
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

.Change .num
{
	font-size: 1.5em;
	line-height: 0;
	display: flex;
	align-items: baseline;
}

.Change .num>b
{
	font-size: 1.5em;
	font-weight: inherit;
}

.Change .details
{
	border-width: 1px;
	border-radius: var(--border_radius);
}
/*
	display: flex;
	flex-direction: column;
	gap: var(--change_btn_padding);
*/

.Change .details .summary
{
	cursor: pointer;

	display: grid;
	grid-template-areas:
		"title Btn"
	;
	justify-content: space-between;
	align-items: center;
	gap: 1em;

	padding: var(--change_btn_padding);
	background-color: rgb(var(--bg_color) / 0.1);
}
.Change .details .summary>.title
{
	grid-area: title;
}
.Change .details .summary>.Btn
{
	grid-area: Btn;
}

.Change .details .summary .title
{
	display: flex;
	align-items: baseline;
	gap: 1em;
}
/*
	align-items: center;
*/

.Change .details .summary .Btn
{
	display: flex;
	align-items: center;
	width: var(--change_btn_size);
	height: var(--change_btn_size);
}

.Change .details .summary .Btn>*
{
	display: flex;
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: 0;
}
/*
	padding-right: var(--change_btn_padding);
*/

.Change .details .summary .Btn>*:before,
.Change .details .summary .Btn>*:after
{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;

	line-height: 0;
}

.Change .details .summary .Btn>*:before
{
	width: var(--change_btn_size);
	height: 0;
	border-top-width: 1px;
}

.Change .details .summary .Btn>*:after
{
	width: 0;
	height: var(--change_btn_size);
	border-left-width: 1px;
}

.Change .details .detail
{
	display: grid;
	grid-template-areas:
		"num main"
	;
	grid-template-columns: 3em 1fr;
	align-items: baseline;
	gap: 1em;

	opacity: 0;
	width: calc(100% - (var(--change_btn_padding) + var(--change_btn_size)));
	margin-left: auto;
	margin-right: 0;
	padding-right: var(--change_btn_padding);
}
/*
	display: flex;
*/
.Change .details .detail .num
{
	grid-area: num;
}
.Change .details .detail .main
{
	grid-area: main;
}

.Change .details .detail .main
{
	text-align: justify;
}


.Change details[open]
{
}

.Change details[open] .summary
{
}

.Change details[open] .summary .Btn
{
}

.Change details[open] .summary .Btn>*:before
{
	width: 0;
}

.Change details[open] .summary .Btn>*:after
{
	translate: -50% -50%;
	rotate: -90deg;
}

.Change details[open] .detail
{
	opacity: 1;
	padding-top: var(--change_btn_padding);
	padding-bottom: var(--change_btn_padding);
}


/* ------------------------------------------------------
	↓<details>はanimationが効かないので、<input>で開け閉めする場合 */
.Change .details .switch
{
	display: none;
}

.Change .details label ~ .detail
{
	opacity: 0;
	width: calc(100% - (var(--change_btn_padding) + var(--change_btn_size)));
	height: 0;
	overflow: hidden;
	margin-left: auto;
	margin-right: 0;
	padding-right: var(--change_btn_padding);
}

.Change .details .switch:checked
{
}

.Change .details .switch:checked ~ .summary .Btn
{
}

.Change .details .switch:checked ~ .summary .Btn>*:before
{
	width: 0;
}

.Change .details .switch:checked ~ .summary .Btn>*:after
{
	translate: -50% -50%;
	rotate: -90deg;
}

.Change .details .switch:checked ~ label ~ .detail
{
	opacity: 1;
	height: auto;
	padding-top: var(--change_btn_padding);
	padding-bottom: var(--change_btn_padding);
}


/* ============================================================================================================
	[商品]　価格
------------------------------------------------------------------------------------------------------------ */
.Price
{
	display: flex;
	align-items: baseline;
	gap: 0.25em;

	text-align: right;
}

.price_results
{
	display: inline-flex;
	flex-direction: column;
	align-items: baseline;
	margin-left: auto;
	margin-right: 0;
	gap: 1em 0;
}
/*
	display: flex;
	gap: 0.5em;
*/

.price_results .results
{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: baseline;
	gap: 0 0.25em;
}
/*
	display: inline-flex;
*/

.price_results .results .num
{
	font-size: 1.5em;
	line-height: 1;
}
/*
	font-weight: inherit;
*/

.price_results .Tax
{
	display: flex;
	align-items: baseline;
	font-size: smaller;
}

.price_results .Tax .num
{
	font-weight: inherit;
	font-size: inherit;
}


/* ============================================================================================================
	Google 検索BOX
------------------------------------------------------------------------------------------------------------ */
.SiteSearch
{
	width: 12em;
}

.SiteSearch div
{
	padding: 0;
	background: none;
	border-width: 0;
}

.SiteSearch form,
.SiteSearch form[class],
.SiteSearch table,
.SiteSearch table[class]
{
	margin: 0;
}

.SiteSearch table,
.SiteSearch table[class]
{
}

.SiteSearch td,
.SiteSearch td[class]
{
	padding: 0;
}

.SiteSearch input
{
	border-radius: 0em;
	min-height: calc(var(--font) * 1.75);
}

.SiteSearch td[class].gsc-input
{
	padding: 0;
}

.SiteSearch .gsc-input-box
{
	border-width: 1px;
}

.SiteSearch button,
.SiteSearch button[class]
{
	width: 100%;
	min-height: calc(var(--font) * 1.75);
	margin: 0;
	padding: 0 calc(var(--font) * 0.5);
	border-radius: 0em;
}
/*
	border-width: 1px;
	background: none;
*/

.SiteSearch .gsc-results-wrapper-overlay
{
	background: rgb(var(--w));
	padding: 2em;
	text-align: left;
}

/*[191114]仕様が変わった...
.SiteSearch	{
	vertical-align: middle;
	border-radius: 0em;
	font-size: 0.8em;
	width: 15em;
}
.SiteSearch input,
.SiteSearch button	{
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	height: 2em;
	line-height: 2em;
	padding: 0;
	border-width: 1px;
	margin: 0;
	border-radius: 0em;
}

.SiteSearch>.Wrap	{ }
.SiteSearch>.Wrap table,
.SiteSearch>.Wrap th,
.SiteSearch>.Wrap td	{
	margin: 0;
	padding: 0;
	border-width: 0;
}
.SiteSearch>.Wrap table	{
	width: 100%;
}

.SiteSearch .Text,
.SiteSearch .Btn	{
}

.SiteSearch .Text	{
	text-align: left;
}
.SiteSearch .Text>.Wrap	{
}

.SiteSearch .Text input[type="text"]	{
}
.SiteSearch .Text select	{
	height: 2em;
}

.SiteSearch .Btn	{
	width: 2em;
	text-align: right;
	color: rgb(var(--w));
}
.SiteSearch .Btn>.Wrap	{
}
.SiteSearch .Btn button	{
	background: transparent;
	border-width: 0;
}
.SiteSearch .Btn button>span	{
	display: inline-block;
	line-height: inherit;
}
*/


/* ============================================================================================================
	商品検索BOX
------------------------------------------------------------------------------------------------------------ */
.SearchBox
{
	letter-spacing: normal;
	border-width: 1px;
}

.SearchBox form
{
	display: grid;
	grid-template-areas:
		"head Txt Btn"
	;
	grid-template-columns: 4em 1fr 2em;
	align-items: center;

	width: 100%;
}
.SearchBox form>.head
{
	grid-area: head;
}
.SearchBox form>.Txt
{
	grid-area: Txt;
}
.SearchBox form>.Btn
{
	grid-area: Btn;
}


.SearchBox select
{
	width: 100%;
}

.SearchBox input
{
	background: transparent;
}


.SearchBox .Txt
{
	margin: 0;
	background: rgb(var(--w));
	line-height: 1;
}

.SearchBox .Txt .title
{
	text-align: center;
	white-space: normal;
	font-weight: bold;
}

.SearchBox .keyword
{
	background-color: rgb(var(--w));
	border-width: 0;
	border-left-width: 1px;
	border-radius: 0;
	border-left-style: dashed;
	padding-left: 0;
	padding-right: 0;
	margin: 0;
}

.SearchBox input
{
	width: 100%;
	height: 100%;
}

.SearchBox input[name="keyword"]
{
}

.SearchBox input[value$="検索"]
{
	border-width: 0;
	border-radius: 0;
	padding: 0 0.75em;
}

.SearchBox .Btn
{
	min-width: initial;
	width: 2em;
	padding: 0em;
	vertical-align: middle;
}

.SearchBox .Btn input[type="image"]
{
	padding: 0em;
	border-width: 0;
	outline-width: 0;
}


/* ============================================================================================================
	翻訳
------------------------------------------------------------------------------------------------------------ */
.Translation
{
	width: 23px;
	width: 1.53333em;
	font-weight: normal;
	cursor: pointer;
}

.Translation a
{
}

.Translation .head
{
}

.Translation .head .main
{
	position: absolute;
	top: -1.5em;
	right: calc(100% + 1em);
	width: 11em;
	border-radius: var(--border_radius);
	letter-spacing: normal;
	text-align: center;
}

.Translation .main:before
{
	content: "▲";

	position: absolute;
	top: calc(2em * 0.95);
	left: calc(100% - (1em / 2));
	rotate: 90deg;

	width: 1em;
	height: 1em;
}

.Translation .main>ul
{
	text-align: inherit;
}

.Translation .main>ul>li
{
	display: block;
}

.Translation .main>ul>li:not(:first-of-type)
{
	border-top-width: 1px;
	border-top-style: dotted;
	border-color: rgb(var(--w) / 0.4);
}

.Translation .main a
{
	line-height: 2em;
}

/* :hover */
.Translation .head .main
{
	display: none;
}

.Translation:hover .head .main
{
	display: block;
}

.Translation:hover:before
{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: -2em;
	bottom: -1em;
	width: 16em;
}
/*
	background-color: red;
*/


/* ============================================================================================================
	タブメニュー
------------------------------------------------------------------------------------------------------------ */
.TabMenu
{
	text-align: center;
	letter-spacing: 0;
}

.TabMenu ul
{
	list-style: none;
	width: 100%;
	width : -webkit-calc(100% + 8px);
	width : calc(100% + 1px);
	margin-left: 0;
	border-left-width: 1px;
}

.TabMenu li
{
	display: table;
	float: left;
	width: 25%;
	width : -webkit-calc(25% - 1px);
	width : calc(25% + 1px);
	min-height: 3em;
	text-align: center;
	margin-bottom: 0;
	padding: 1px 1px 0 0;
	background: linear-gradient(-135deg, transparent 0px, #000 0px);
}

.TabMenu li p
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	margin-left: auto;
	margin-top: auto;
	width: 100%;
	height: 100%;
	background: linear-gradient(-135deg, transparent 0px, #fff 0px);
}

/* ベタで右耳 */
li.TabMenuEnd
{
	background: linear-gradient(-135deg, transparent 10px, #000 10px);
}

li.TabMenuEnd p
{
	background: linear-gradient(-135deg, transparent 10px, #fff 10px);
}

/* box */
.TabMenu ul
{
	zoom: 1;
}

.TabMenu:after
{
	content: "";
	display: block;
	clear: both;
}

/*
.TabMenu
	{
}
.TabMenu ul
	{
	margin-left: 0;
}
.TabMenu li
	{
	display: block;
	float: left;
	min-width: 20%;
	text-align: center;
	margin: 0;
	border-width: 2px 2px 0 2px;
	background-image: url(../img/bg_back.png);
	padding: 10px;
}
.TabMenu li img
	{
	vertical-align: middle;
}
.TabMenu li a
	{
	display: block;
}
.TabMenu li.On
	{
	background-image: url(../img/CategoryOn.png);
	background-repeat: repeat-x;
	background-position: left top;
	border-color: #fff;
}
*/


/* ============================================================================================================
	クリップ
------------------------------------------------------------------------------------------------------------ */
.Clip
{
	display: inline-block;
	margin-top: 2em;
	margin-bottom: 2em;
}

.Clip:before
{
	content: "■";
	display: inline-block;
	position: absolute;
	top: -1em;
	left: -0em;
	right: -0em;
	font-size: 1.5em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.OnePoiont
{
	margin-top: 2em;
	margin-bottom: 2em;
	padding: 1em;
	border-width: 1px;
	border-style: dotted;
}
/*
	position: relative;
*/

.OnePoiont:before
{
	font-size: 1.5em;
	content: "Point!";
	display: inline-block;
	position: absolute;
	 top: calc(0em - (0.5em + 3px));
	left: 0.5em;
	padding-left: 0.5em;
	background-color: rgb(var(--w));
	border-bottom-width: 1px;
	text-align: center;
}
/*
	left: calc(0em - (0.5em + 3px));
*/
/*
.OnePoiont:after
	{
	content: "";
	display: block;
	position: absolute;
	top: calc(0em - (0.5em + 3px));
	left: calc(0em - (1.5em + 3px));
	width: 0.5em;
	height: 0.5em;
	border-radius: 100em;
	border-width: 3px;
}
*/


/* ============================================================================================================
	耳
------------------------------------------------------------------------------------------------------------ */
.DogEar
{
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
}
/*
	background-image: url(../img/bg.png);
	border-width: 0 1px 1px 0;
	padding: 1em 3em;
	border-width: 0 1px 1px 0;
	background-color: #fff;
*/

.DogEar::after
{
	content: "";
	position: absolute;
	top: -1px;
	right: -1px;
	background: rgb(89 73 66 /  .2);
	border: solid 10px;
	border-color: white white transparent transparent;
	border-radius: 0 0 0 3px;
	box-shadow: -2px 2px 1px rgb(var(--bk) /  .1);
}


/* ============================================================================================================
	めくれ
------------------------------------------------------------------------------------------------------------ */


/* ============================================================================================================
	飾り枠
----------------------------------------------------------------------------------------------------------- */


/* ============================================================================================================
	非表示
------------------------------------------------------------------------------------------------------------ */
.DspNo
{
	display: none;
	width: 0;
	height: 0;
	overflow: hidden;
	border-width: 0;
	margin: 0;
	padding: 0;
	background: none;
}

/* 表示OFF */
.DspOFF
{
	opacity: 0.5;
	background-color: rgb(var(--bk) / 0.1);
}

/* 表示・変数 */
.DspVar
{
	opacity: 0.5;
	background-color: rgb(var(--bk) / 0.1);
	display: inline;
}


/* ============================================================================================================
	box
------------------------------------------------------------------------------------------------------------ */
.box
{
	zoom: 1;
	margin: 0;
}

.box:after
{
	content: "";
	display: block;
	clear: both;
}