@charset "utf-8";
/*

**-- 共通CSS
*/

/*-- 基本設定 -----------------------------------------------*/

*,
*:before,
*:after {
	-webkit-print-color-adjust:exact;
	-webkit-text-size-adjust:none;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	font-size:inherit;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
:root {
#	--color1:#005baa;
#	--color2:#444c9c;
	--vwp:1024px;
	--esr:env(safe-area-inset-right);
	--esl:env(safe-area-inset-left);
}
html, body, div, p, table, iframe, ul, li, img, h1, h2, h3, h4, h5, h6, header, footer {
	margin:0;
	padding:0;
}
h1, h2, h3, h4, h5, h6 {
	display:block;
	font-size:inherit;
	font-weight:normal;
	font-style:normal;
}
img {
	width:auto;
	height:auto;
}
sub, sup, .sub, .sup {
	font-size:60%;
}
svg {
	overflow:none;
}
svg text {
	fill:#ffffff;
	text-anchor:middle;
	font-size:35px;
}
html {
	#background:linear-gradient(180deg, #222, #444);
	#background:linear-gradient(180deg, #bbb, #fff);
	background-color:#fff;
}
body {
	font-size:3vw;
	text-align:left;
	vertical-align:top;
	#font-family:Helvetica,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-weight:500;
	min-height:100vh;
	--headh:min(14vw, 14vh);
}
body:before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	display:block;
	height:100vh;
}
@media screen and (min-width:720px) {
	body {
		font-size:14px;
	}
}
header + nav ~ i {
	display:block;
	height:0;
	overflow:hidden;
}
.document {
	min-height:calc(100vh - 73px - 37px - 80px);
}
:where(a, a:hover, a:visited) {
	color:#a0a0a0;
	text-decoration:none;
}
:where(input, textarea, select, button) {
	font-size:inherit;
	font-family:inherit;
	-webkit-appearance:none;
	margin:0;
	#line-height:1.3;
	border-width:1px;
	border-style:solid;
	border-radius:2px;
	padding:0 6px;
	vertical-align:bottom;
}
:where(input[type='text'],
input[type='email'],
input[type='zip'],
input[type='tel'],
input[type='password'],
input[type='date'],
textarea, select, button) {
	width:100%;
	line-height:calc(1em + 6px);
}
input[type='tel'] {
	#text-align:right;
}
input[type='color'] {
	#padding:1px;
	border:0;
	width:100%;
}
:where(button,
input[type='submit'],
input[type='button']) {
	min-width:2em;
	padding:6px 10px;
	padding:0 6px;
}
:where(button:not(:disabled),
input[type='submit']:not(:disabled),
input[type='button']:not(:disabled)) {
	cursor:pointer;
}
input::placeholder {
	color:rgba(0,0,0,.3);
	font-weight:bolder;
}
select + .selecttri {
	position:relative;
	display:inline-block;
	vertical-align:bottom;
	pointer-events:none;
	width:0;
	border:none;
}
select {
	#padding:6px 2px;
}
select + .selecttri:before {
	position:absolute;
	bottom:0;
	right:0;
	content:'▼';
	#line-height:1.3;
	line-height:calc(1em + 6px);
	display:block;
	padding:1px 6px;
	#padding:7px 3px;
}
.cartquans {
	padding-right:2em;
	text-align:right;
}
.cartquans option {
	text-align:right;
}
textarea {
	resize:none;
}

:where(label:not([class])) {
	position:relative;
	display:inline-block;
	padding:0 2px 2px 0;
}
:is(.Form, .LineForm) label:not([class]) > :is(input[type='radio'], input[type='checkbox']) + div {
	transition-property:all;
	transition-duration:0.3s;
	transition-timing-function:ease;
}
:is(.Form, .LineForm) label:not([class]):not(:disabled):hover > :is(input[type='radio'], input[type='checkbox']):not(:checked) + div {
	cursor:pointer;
	border-color:#00000033;
}

label:not([class]) > :is(input[type='radio'], input[type='checkbox']) {
	display:none;
}
label:not([class]) > :is(input[type='radio'], input[type='checkbox']) + div {
	padding:0.6em;
	border-width:0.15em;
	border-color:#00000011;
	border-style:solid;
	line-height:1;
}
label:not([class]) > input[type='radio'] + div {
	border-radius:3em;
}
label:not([class]) > input[type='checkbox'] + div {
	border-radius:.3em;
}
label:not([class]) > :is(input[type='radio'], input[type='checkbox']) + div + i {
	position:absolute;
	inset:.2em .1em auto auto;
}
label:not([class]) > :is(input[type='radio'], input[type='checkbox']) + div + i:after {
	content:'';
	display:block;
	border-style:solid;
	border-color:#00000000;
	transform-origin:top right;
	transition-timing-function:linear;
	transition-duration:.3s;
	transition-property:all;
}
label:not([class]) > input[type='checkbox'] + div + i:after {
	transform:rotate(35deg);
	border-width:0 .3em .3em 0;
	width:.5em;
	height:.8em;
}
label:not([class]) > input[type='radio'] + div + i:after {
	border-width:.3em;
	border-radius:.6em;
	width:.6em;
	height:.6em;
}
label:not([class]) > :is(input[type='radio'], input[type='checkbox']):checked + div + i:after {
	border-color:#000000;
	filter:drop-shadow(0 0 .15em #000);
}

@media screen and (min-width:540px) {
	:where(input, textarea, select, button) {
		#padding:2px;
	}
	:where(button,
	input[type='submit'],
	input[type='button']) {
		#padding:2px 5px;
	}
	select {
		#padding:2px 4px;
	}
	select + .selecttri:before {
		#padding:3px 5px;
	}
	label:not([class]) > :is(input[type='radio'], input[type='checkbox']) + div {
		#padding:0.4em;
	}
}
*[a-left] {
	text-align:left;
}
*[a-right] {
	text-align:right;
}

.hook {
	position:relative;
	height:0;
}
.hook > div {
	position:absolute;
	bottom:0;
	height:15vw;
}
@media screen and (min-width:840px) {
	.hook > div {
		height:90px;
	}
}

.InputSet > input:not(:first-child), .InputSet > textarea:not(:first-child), .InputSet > select:not(:first-child), .InputSet > button:not(:first-child) {
	margin-left:1px;
}

.thumbs {
	height:0;
	overflow:scroll;
	padding-top:0;
	pointer-events:none;
}


header {
	position:sticky;
	position:-webkit-sticky;
	inset:0 0 auto;
	z-index:6;
	pointer-events:none;
	padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
	font-size:min(4vw, 4vh);
	#z-index:9;
}
header * {
	transition-property:all;
	transition-duration:0s;
	transition-timing-function:ease-out;
}
header :where(label:not([class])) {
	padding:0;
}

header input {
	display:none;
}
header a:hover {
	cursor:pointer;
}
header .td.mainMenu {
	#display:none;
}
header .inner {
	position:relative;
	pointer-events:auto;
	max-width:var(--vwp);
	margin:0 auto;
	display:grid;
	grid-template-columns:7em 1fr 12em 4em 4em 0;
	grid-template-rows:4em 0;
	font-size:90%;
}
header .td.logo {
	grid-column:1/2;
	grid-row:1/2;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
:where(header, footer) .logo :where(a, div) {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:100%;
}
:where(header, footer) .logo svg {
	width:90%;
	display:block;
}
footer .logo svg {
	max-width:8em;
}
:where(header, footer) .logo a {
	color:inherit;
}
:where(header, footer) .logo span {
	display:block;
	font-size:60%;
	width:fit-content;
	color:inherit;
}
:where(header, footer) .snss {
	grid-column:3/4;
	grid-row:1/2;
	display:flex;
	justify-content:right;
	align-items:center;
}
footer .snss {
	justify-content:center;
	height:8em;
}
header .td.cart {
	grid-column:4/5;
	grid-row:1/2;
}
header .td.cart .cart {
	position:relative;
	display:block;
	height:100%;
}
header .td.cart .cart input {
	display:block;
	visibility:hidden;
	cursor:pointer;
	position:absolute;
	inset:0;
}
header .td.cart .cart .cartlist {
	position:absolute;
	inset:100% .3em auto auto;
	transition-duration:.3s;
	--vh:3em;
	height:var(--vh);
	overflow:auto;
	max-height:calc(5em * 5);
}
header .td.cart .cart .touch {
	display:block;
	position:absolute;
	inset:0;
	cursor:pointer;
}
header .td.cart .cart input:checked ~ .touch {
	position:fixed;
}
header .td.cart .cart:not(.adding) input:not(:checked) ~ .cartlist {
	height:0;
}
header .td.cart .cart .quandis {
	position:absolute;
	display:block;
	inset:1em auto auto 1em;
	line-height:1;
}
header .td.cart :where(.cart .quandis) .x0 {
	position:absolute;
	display:block;
	background-color:#f00;
	inset:-3em;
	margin:auto;
	width:2em;
	height:2em;
	border-radius:50%;
	transition-duration:.3s;
	transition-timing-function:ease;
}
header .td.cart .cart .quandis .x1 {
	transition-delay:.2s;
}
header .td.cart .cart .quandis .x2 {
	transition-delay:0s;
}
header .td.cart :where(.cart.blnk .quandis) .x0 {
	width:0;
	height:0;
}
header .td.cart .cart .quandis.big .x0 {
	width:3em;
	height:3em;
}
header .td.cart .cart .quandis.big .cn {
	font-weight:bold;
}
header .td.cart .cart .quandis .cn {
	position:absolute;
	display:block;
	inset:-3em;
	margin:auto;
	padding:.5em;
	width:fit-content;
	height:fit-content;
	color:#fff;
	#box-shadow:0 .3em.3em #00000066;
}
header .td.cart .cart .cartlist .cwrp {
	display:block;
	padding:.5em;
	color:#000;
	max-width:18em;
	background-color:#fff;
	#background-image:linear-gradient(to bottom, #00000055 0, #00000000 20%);
	border-radius:0 0 .6em .6em;
	border:1px solid #00000055;
}
header .td.cart .cart .cartlist .ctbody {
	white-space:nowrap;
	padding:0;
	line-height:1;
	min-width:10em;
}
header .td.cart .cart.blnk .cartlist .ctbody:before {
	content:'カートは空です';
	display:block;
	color:#888;
	line-height:1;
	padding:1em .5em;
	border-radius:.5em;
	border:1px solid #888;
}
header .td.cart .cart .itm {
	display:flex;
	padding:.5em 0;
	justify-content:space-between;
}
header .td.cart .cart .img {
	position:relative;
}
header .td.cart .cart .img.freq:after {
	position:absolute;
	display:block;
	content:'定期';
	font-size:50%;
	color:#fff;
	background-color:#d22;
	padding:.1em .5em;
	line-height:1;
	inset:0 auto auto 0;
	transform-origin:top right;
	transform:translate(-50%, 0) rotate(-45deg);
}
header .td.cart .cart .img img {
	width:auto;
	height:4em;
	margin:auto;
}
header .td.cart .cart .img .dels {
	display:none;
	position:absolute;
	inset:.5em .6em auto auto;
	cursor:pointer;
}
header .td.cart .cart .img .dels:hover li {
	background-color:#c22;
	width:2.5em;
	height:2.5em;
}
header .td.cart .cart .img li {
	display:block;
	position:absolute;
	inset:-4em;
	width:2em;
	height:2em;
	margin:auto;
	border-radius:50%;
	background-color:#f00;
	overflow:hidden;
	transition-duration:.3s;
}
header .td.cart .cart .img li:before,
header .td.cart .cart .img li:after {
	content:'';
	display:block;
	position:absolute;
	inset:0;
	width:1.5em;
	height:.3em;
	background-color:#fff;
	margin:auto;
}

header .td.cart .cart .img li:before {
	transform:rotate(-45deg);
}
header .td.cart .cart .img li:after {
	transform:rotate(45deg);
}
header .td.cart .cart .name {
	display:flex;
	line-height:2;
	align-items:center;
	max-width:9em;
}
header .td.cart .cart .name li {
	display:block;
	font-size:70%;
	line-height:2;
	overflow:hidden;
	text-overflow:ellipsis;
	#background-color:#ff000055;
}
header .td.cart .cart .quan {
	line-height:4;
	padding:0 .5em 0 0;
	min-width:2em;
	text-align:right;
}
header .td.cart .cart .toc {
	position:sticky;
	position:-webkit-sticky;
	bottom:0;
	display:block;
	line-height:1;
	padding:1em 1em;
	text-align:center;
	background-color:#888;
	color:#fff;
	border-radius:.3em;
	overflow:hidden;
}
header .td.cart .cart.blnk .toc {
	padding:0;
	height:0;
}
header .td.cart .button {
	display:block;
	height:100%;
}
header .td.cart svg {
	position:absolute;
	inset:0;
	display:block;
	width:40%;
	height:auto;
	margin:auto;
}
header .td.cart svg .member {
	display:none;
}
header .td.cart b.cart:not([cart]) svg .cart {
	opacity:0;
}
header b.cart[cart] svg .member {
	opacity:0;
}
header .td.tp {
	grid-column:5/6;
	grid-row:1/2;
	cursor:pointer;
	background-color:#89aec3;
}
header .tp ul {
	position:relative;
	display:block;
	width:100%;
	height:100%;
}
header .tp li {
	position:absolute;
	display:block;
	width:48%;
	height:4%;
	left:26%;
	top:calc(50% - 2%);
	background-color:#ffffff;
	transform:rotate(var(--cr));
	transition-duration:.3s;
}
header .tp li:nth-child(1) {
	--cr:45deg;
	--ct:calc(50% - 2% - 15%);
}
header .tp li:nth-child(2) {
	--cr:-225deg;
	--ct:calc(50% - 2%);
}
header .tp li:nth-child(3) {
	--cr:135deg;
	--ct:calc(50% - 2% + 15%);
}
header input:not(:checked) ~ .tp li {
	top:var(--ct);
	transform:rotate(0);
}
header .td.mainMenu {
	position:relative;
	grid-column:6/7;
	grid-row:2/3;
}
header :where(.td.mainMenu .mli) {
	position:absolute;
	display:block;
	transition-duration:.1s;
	transition-timing-function:linear;
	overflow:hidden;
}
header :where(.td.mainMenu .mli.bk) {
	background-color:#00000055;
}
header :where(.td.mainMenu .mli.x1) {
	transition-delay:.0s;
	inset:0 0 calc(-100vh + 4em) -110vw;
}
header :where(.td.mainMenu .mli.x2) {
	transition-delay:.1s;
	inset:0 0 calc(-100vh + 4em) -100vw;
}
header :where(.td.mainMenu .mli.fr) {
	inset:0 0 calc(-100vh + 4em) -90vw;
	transition-delay:.2s;
}
header :where(input:not(:checked) ~ .td.mainMenu .mli) {
	inset:0 0 calc(-100vh + 4em) 0;
}
header :where(input:not(:checked) ~ .td.mainMenu .mli.fr) {
	transition-delay:0s;
}
header :where(input:not(:checked) ~ .td.mainMenu .mli.x1) {
	transition-delay:.2s;
}
header :where(.td.mainMenu) a {
	color:inherit;
}
header :where(.subl) {
	display:block;
	height:100%;
	overflow:hidden;
}
header :where(.subl.top) {
	padding:1em;
	#padding-left:.5em;
	width:90vw;
	overflow:auto;
}
header .subl > .xi {
	display:flex;
	justify-content:left;
	align-items:center;
}
header :where(.xi > label) {
	display:block;
	width:100%;
	padding:0 0 0 .5em;
}
header :where(.xi > label > a:before) {
	display:inline-block;
	content:'>';
	padding:0 .5em 0 0;
}
header :where(.xi > label > a) {
	position:relative;
	display:block;
	padding:1em 0 1em 1em;
	font-weight:bold;
	line-height:1;
	--arc:#a0a0a0;
	--c1:.7em;
	--c2:.5em;
	--c2:-3em;
	--r1:rotate(-65deg);
	--r2:rotate(-115deg);
	--r1:rotate(-0deg);
	--r2:rotate(-180deg);
}
header :where(.xi > label > a):not([href]) {
	--c1:.9em;
	--c2:.3em;
	--r1:rotate(-155deg);
	--r2:rotate(155deg);
}
header :where(.subl.top .xi > label > .subl) {
	max-height:calc(3em * var(--itms));
	transition-duration:.15s;
}
header :where(.xi > label > input:not(:checked) ~ .subl) {
	max-height:0;
}
header :where(.xi > label) > input:not(:checked) ~ a {
	--c1:.4em;
	--r1:rotate(-25deg);
	--r2:rotate(25deg);
}
header :where(.subl > .xi > label) > a[act] {
	color:#ff6c00;
	--arc:#ff6c00;
}
header :where(.xi > label > a):before,
header :where(.xi > label > a):after {
	content:'';
	display:block;
	position:absolute;
	inset:calc(50% - var(--c1) + .5px) auto auto var(--c2);
	height:.7em;
	width:1.5px;
	background-color:var(--arc);
	transform-origin:center calc(100% - .5px);
	transition-duration:.2s;
}
header .xi a:before {
	transform:var(--r1);
	--h:180deg;
}
header .xi a:after {
	transform:var(--r2);
	--h:360deg;
}
@media screen and (min-width:840px) {
	header {
		font-size:16px;
		--btnx:2em;
	}
	header .inner {
		grid-template-columns:7em 1fr 4em 0;
		grid-template-rows:2em 2em;
	}
	header .td.logo {
		grid-column:1/2;
		grid-row:1/3;
	}
	header .td.snss {
		grid-column:2/3;
		grid-row:1/2;
	}
	header .td.cart {
		grid-column:3/4;
		grid-row:1/3;
	}
	header .td.tp {
		grid-column:4/5;
		grid-row:1/3;
	}
	header .td.mainMenu {
		grid-column:2/3;
		grid-row:2/3;
		font-size:80%;
	}
	header .td.mainMenu .mli {
		transition-duration:.1s;
		transition-delay:0s;
		overflow:visible;
	}
	header .td.mainMenu .mli.fr {
		position:static;
		height:100%;
		inset:0;
	}
	header .td.mainMenu .mli.bk {
		inset:0 0 auto auto;
	}
	header :where(.subl.top) {
		overflow:visible;
	}
	header :where(.subl.top .xi > label > .subl) {
		position:absolute;
		inset:100% -50vw auto;
		height:auto;
		width:fit-content;
		margin:auto;
	}
	header .subl input + .swh {
		display:none;
	}
	header .subl > .xi {
		justify-content:center;
		padding:0 .5em;
		white-space:nowrap;
	}
	header .subl.top {
		display:flex;
		justify-content:right;
		width:auto;
	}
	header :where(.xi > label > a) {
		padding:1em 0 1em .5em;
	}
	header :where(.subl.top > .xi > label > a[href]):before,
	header :where(.subl.top > .xi > label > a[href]):after {
		content:none;
	}
	header :where(.subl.top .subl > .xi > label > a)[href] {
	#	--c1:.4em;
		--c2:-.5em;
		--r1:rotate(180deg);
		--r2:rotate(360deg);
	}
	header :where(.subl.top .subl > .xi > label > a):before,
	header :where(.subl.top .subl > .xi > label > a):after {
		width:0;
	}
	header :where(.xi > label > a):not([href]):hover {
		#--c1:.7em;
	}
	header .subl.top .subl > .xi a:hover:before,
	header .subl.top .subl > .xi a:hover:after {
		transform:rotate(var(--h));
		width:3px;
		left:0;
	}
	header .subl.top > .xi > label > a {
		padding:calc((2em / .8 - 1em) / 2) 1em;
	}
	header :where(.xi > label > a:before) {
		content:none;
	}
	header .subl.top .xi > label > .subl {
		backdrop-filter:blur(2em);
		-webkit-backdrop-filter:blur(.5em);
		padding:0 1em;
	}
	header .subl.top .xi > label > .subl {
		max-height:calc(3em * var(--itms) + var(--btnx));
	}
	header .subl.top .xi > label:not(:hover) > .subl {
		max-height:0;
	}
	header :where(.xi > label > a):not([href]) {
		--c1:.4em;
		--r1:rotate(-25deg);
		--r2:rotate(25deg);
	}
	header .subl.top > .xi > label > a:hover {
		--c1:.9em;
	}
	header .xi > label > a:hover {
		--c2:.3em;
		--r1:rotate(-155deg);
		--r2:rotate(155deg);
	}
	header :where(.xi > label) > input:not(:checked) ~ a {
		--c1:.4em;
		--r1:rotate(-25deg);
		--r2:rotate(25deg);
	}

	header .subl.top .xi > label > .subl:before {
		content:'';
		display:block;
		position:absolute;
		inset:0;
		opacity:.8;
	}
	header .subl.top .xi > label > .subl:after {
		content:'';
		display:block;
		height:var(--btnx);
	}
}

/*　基本配色　*/
header,
header .subl.top {
	background-color:#ffffff;
	color:#0097ff;
}
header .td.logo {
	color:#444444;
}
header :where(.td.mainMenu) a {
	--arc:#0097ff;
}
header .logo svg * {
	#fill:#444444;
}
header .cart svg * {
	fill:#ffffff;
}
header .td.tp,
header input + .swh li {
	background-color:#0097ff;
}
header .td.cart .cart {
	background-color:#000000;
}
.floatTOP > div {
	background-color:#fdd000;
	color:#000000;
}
@media screen and (min-width:840px) {
	header .subl.top .xi > label > .subl:before {
		background-color:#ffffff;
	}
}

header,
header .subl.top {
	background-color:#000000;
	color:#fff;
}
header .td.logo {
	color:#000;
}
header :where(.td.mainMenu) a {
	--arc:#000000;
}
header .logo svg * {
	#fill:#000000;
}
header .cart svg * {
	fill:#ffffff;
}
header .td.tp,
header input + .swh li {
	background-color:#e4007f;
}
header .td.cart .cart {
	background-color:#ffffffaa;
}
@media screen and (min-width:840px) {
	header .subl.top .xi > label > .subl:before {
		background-color:#fdd000;
	}
}

.qsec {
	padding:0 var(--esr) 0 var(--esl);
}
.qsec .inner {
	max-width:var(--vwp);
	margin:auto;
	padding-bottom:2em;
}
.qsec .title {
	display:flex;
	justify-content:space-between;
	align-items:end;
	font-size:150%;
	padding:1em;
	font-family:'DIN Condensed';
	border-bottom:1px solid #000;
}
.qsec .title > * {
	display:block;
	width:fit-content;
}
.qsec .logotitle {
	position:relative;
	font-size:120%;
	padding:.2em .5em .4em;
	line-height:1;
	min-width:4.5em;
	text-align:center;
}
.qsec .logotitle:before {
	content:'';
	display:block;
	position:absolute;
	inset:0 0 .4em;
	border:2px solid #c41b6f;
}
.qsec .logotitle:after {
	content:'';
	display:block;
	position:absolute;
	inset:1.2em 1em 0 auto;
	width:.5em;
	border:2px solid #c41b6f;
	border-style:none none solid solid;
	background-color:#fff;
	border-radius:0 1em 0 0;
	transform-origin:left bottom;
	transform:skewX(-30deg) skewY(-40deg);
}
.qsec .more {
	display:block;
	line-height:1;
	color:#000;
}
.qsec .more:after {
	content:'＞＞＞';
	display:inline-block;
	font-size:70%;

}

.purchaseshoot {
	display:block;
	position:fixed;
	inset:0;
	overflow:hidden;
	z-index:8;
	pointer-events:none;
}
.purchaseshoot :where(.lights, .dark) {
	position:absolute;
	display:block;
	transition-duration:.2s;
	transition-property:all;
	transition-timing-function:linear;
}
.purchaseshoot .lights {
	inset:50% 50% auto auto;
	width:0;
	height:0;
}
.purchaseshoot .lights:before,
.purchaseshoot .lights:after {
	position:absolute;
	display:block;
	content:'';
	#margin:auto;
	inset:calc(var(--a) * -1);
	border-radius:var(--a);
	width:calc(100% + var(--a) * 2);
	height:calc(100% + var(--a) * 2);
	filter:blur(1px);
}
.purchaseshoot .lights:not(.ready) {
	opacity:0;
}
.purchaseshoot .lights.done:before,
.purchaseshoot .lights.done:after {
	--a:.1em;
}
.purchaseshoot .lights:before {
	background-color:#0088ff33;
	--a:.8em;
}
.purchaseshoot .lights:after {
	background-color:#fff;
	--a:.5em;
}
.purchaseshoot .dark {
	inset:0;
	font-size:min(4vw, 4vh);
	overflow:hidden;
	padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.purchaseshoot .dark.act {
	pointer-events:all;
}
.purchaseshoot .dark .wh {
	pointer-events:none;
	display:block;
	position:relative;
	max-width:var(--vwp);
	font-size:90%;
	height:4em;
	margin:auto;
}
.purchaseshoot .dark .wh li {
	position:relative;
	display:block;
	--vv:calc(4em / sin(45deg));
	--dd:calc((var(--vv) - 4em) / -2);
	--ff:calc(max(200vh, 200vw) / sin(45deg));
	--bb:calc((var(--ff) - var(--vv)) / 2);
	width:var(--vv);
	height:var(--vv);
	margin:var(--dd) calc(4em + var(--dd)) 0 auto;
	transition-duration:.2s;
	transition-property:all;
	transition-timing-function:linear;
}
.purchaseshoot .dark .wh li:before {
	position:absolute;
	box-sizing:content-box;
	display:block;
	content:'';
	inset:calc((var(--ff) - var(--vv)) / -2);
	border-radius:50%;
	border-style:solid;
	border-color:#00000000;
	border-width:calc((var(--ff) - var(--vv)) / 2);
	#filter:blur(.2em);
}
.purchaseshoot .dark.act .wh li:before {
	border-color:#000000aa;
}
@media screen and (min-width:840px) {
	.purchaseshoot .dark {
		font-size:16px;
	}
	.purchaseshoot .dark .wh li {
		margin:var(--dd) var(--dd) 0 auto;
	}
}


/* 基本配色 */


.snss a {
	position:relative;
	display:block;
	#margin:calc(var(--headh) / 4) calc(var(--headh) / 4) 0 0;
	margin:0 .5em 0;
	overflow:hidden;
	pointer-events:all;
}
.snss svg {
	#position:relative;
	#width:calc(var(--headh) / 2);
	#height:calc(var(--headh) / 2);
	width:2em;
	height:2em;
	display:block;
}
@media screen and (min-width:840px) {
	.snss a {
		margin:.5em;
	}
	.snss svg {
		width:1em;
		height:1em;
	}
}
.color_ig {
	background-image:linear-gradient(135deg, #427eff 0%, #f13f79 70%);
	border-radius:20%;
}
.color_ig:before {
	content:'';
	display:block;
	position:absolute;
	top:55%;
	left:-25%;
	width:110%;
	height:90%;
	background-repeat:no-repeat;
	background-image:radial-gradient(#ffdb2c 7%, rgba(255, 105, 34, 0.3) 60%, rgba(255, 88, 96, 0) 70%);
}
.color_ln {
	background-color:#06C755;
	border-radius:22%;
}
:where(.color_ig, .color_ln) use {
	fill:#ffffff;
}
.color_tw use {
	fill:#1D9AEF;
}
.floatTOP > div {
	background-color:#000000;
}

.crowns {
	display:block;
	height:0;
	overflow:hidden;
}

footer {
	background:#393939;
	padding:20vw env(safe-area-inset-left);
	color:#ffffff;
}
footer .logo {
	margin:auto;
}
footer .logo svg * {
	#fill:#ffffff;
}
footer .feets,
footer .middle {
	position:relative;
	max-width:var(--vwp);
	margin:auto;
	padding:0;
}
footer > .middle > div > ul {
	margin:8vw auto;
	background-color:transparent;
	padding:0;
	display:block;
}
footer .middle a {
	display:block;
	color:#ffffff;
	font-size:4vw;
	text-align:center;
	padding:0.75em 0;
}
footer .bottom {
	margin-top:2em;
	font-size:2vw;
}
footer .footmenu {
	color:#7e7a7a;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
footer .right {
	padding:.2em 0;
	width:fit-content;
	margin:10vw auto 0;
}
footer .footmenu a {
	border-color:#7e7a7a;
	border-width:1px;
	border-right-style:solid;
	padding:.2em 2em;
}
footer .footmenu a:first-of-type {
	border-left-style:solid;
}
@media screen and (min-width:840px) {
	footer {
		background:#393939;
		padding:80px 0;
	}
	footer .logo {
		#position:absolute;
		#left:80px;
		padding:0;
		margin:0;
	}
	footer .logo svg {
		width:auto;
		height:6em;
		max-width:none;
	}
	footer .logo span {
		font-size:160%;
	}
	footer .feets,
	footer .middle {
		padding:0 80px;
	}
	footer .middle a {
    	padding:9px 10px;
		font-size:inherit;
	}
	footer .feets {
		display:flex;
		flex-wrap:wrap;
		justify-content:flex-end;
	}
	footer .bottom {
		justify-content:flex-start;
		font-size:13px;
		margin:1em auto 0;
	}
	footer .top {
		#height:80px;
		align-items:flex-start;
		justify-content:space-between;
	}
	footer .middle > div {
		position:relative;
	}
	footer .middle > div > ul {
		margin:0;
		position:absolute;
		inset:auto 0 0 auto;
		display:flex;
		justify-content:flex-end;
	}
	footer .middle li {
		display:block;
	}
	footer .footmenu {
		display:block;
	}
	footer .bottom .right {
		#position:absolute;
		#right:80px;
		#width:auto;
		margin:0 0 0 auto;
	}
	footer .snss {
		height:auto;
		font-size:200%;
	}
}

.downArrow * {
	fill:#96857D;
}

.inMenu {
	position:sticky;
	position:-webkit-sticky;
	z-index:4;
}
.inMenu > div {
	position:relative;
	max-width:var(--vwp);
	margin:0 auto;
	display:-webkit-flex;
	display:flex;
	flex-wrap:wrap;
	-webkit-justify-content:space-between;
	justify-content:space-between;
}

.spec1, .spec2 {
	border:1px solid #fff;
	background-color:rgba(0,0,0,.6);
	color:#fff;
	padding:0 1em .5em;
	font-size:3.6vw;
	width:531px;
	max-width:100%;
	margin:0 auto 1em;
}
.spec1:before,
.spec2:before {
	display:block;
	line-height:2.5;
	border-bottom:1px solid #fff;
	font-size:4.3vw;
	padding:0 .5em;
	margin:0 0 .6em;
	font-weight:700;
}
.spec1:before {
	content:'特徴';
}
.spec2:before {
	content:'評価';
}
.spec2 table {
	line-height:1.3;
}
.spec2 th {
	width:1%;
	font-weight:500;
	white-space:nowrap;
	padding:0 1em 0 .5em;
}
.spec2 td:before {
	background:-webkit-linear-gradient(#ffffff 0%, #ffffff 50%, #dadada 51%, #f2f2f2 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.spec2 td[s3]:before {
	content:'★★★';
}
.spec2 td[s4]:before {
	content:'★★★★';
}
.spec2 td[s5]:before {
	content:'★★★★★';
	color:#f80;
	background:-webkit-linear-gradient(#f8e987 55%, #c3aa22 56%, #c3aa22 84%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
@media screen and (min-width:840px) {
	.spec1, .spec2 {
		font-size:17px;
		#padding:0 20px 10px;
		min-height:200px;
	}
	.spec1:before,
	.spec2:before {
		font-size:19px;
	}
}

.news_field,
.news_field li {
	display:block;
}
.news_field {
	border-bottom:1px dashed rgba(0,0,0,.1);
}
.news_field li {
	padding:24px;
	border-top:1px dashed rgba(0,0,0,.1);
}
.news_field li > span {
	display:inline-block;
	margin-right:1em;
	font-weight:700;
	color:#002047;
}

.section {
	position:relative;
	border:1px dashed #fff;
}
.sectionLead {
	position:sticky;
	position:-webkit-sticky;
	#float:right;
	bottom:0;
	top:calc(100% - 85px);
	right:0;
	background:#fff;
	display:block;
	width:100px;
	padding:10px;
	line-height:20px;
	margin-left:auto;
	margin-top:-40px;
	z-index:6;
}
.section:after {
	content:'';
	display:block;
	clear:both;
}
.outerBody {
	position:relative;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	color:#fff;
}
.outerBody:before {
	content:'';
	display:block;
	padding-top:calc(100% / 159 * 240);
}
.innerBody {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}
@media screen and (min-width:640px) {
	.innerBody {
		max-width:1000px;
		margin:0 auto;
	}
	.outerBody:before {
		content:'';
		display:block;
		padding-top:calc(100% / 240 * 159);
	}
}

.content {
	padding:32px env(safe-area-inset-left);
}
.content .inner_title {
	padding:0 2vw;
	max-width:944px;
	margin:0 auto;
}
.content .inner {
	padding:3em 4vw;
	max-width:944px;
	margin:0 auto;
	font-size:16px;
	line-height:1.8;
}
@media screen and (min-width:840px) {
	.content .inner_title {
		padding:0 32px;
	}
	.content .inner {
		padding:3em 48px;
	}
}

.content h2 {
	position:relative;
	font-size:1.5em;
	padding:.75em 1em;
	color:#fff;
	background-color:#002047;
	font-weight:bold;
}
.content h2:before {
	content:'';
	position:absolute;
	pointer-events:none;
	top:2px;
	bottom:2px;
	left:0;
	right:0;
	border:2px solid #fff;
	border-style:solid none solid none;
}
h3.secTitle {
	position:relative;
	padding:0 .5em .5em;
	font-size:1.3em;
	font-weight:700;
	margin:1em 0 2em;
	line-height:1.4;
}
h3.secTitle:before {
	content:'';
	height:2px;
	background:repeating-linear-gradient(90deg, #002047 0%, #002047 29.3%, rgba(150,150,150,.2) 29.3%, rgba(150,150,150,.2) 100%);
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	z-index:0;
	display:block;
}

table.form,
table.form tr > * {
	border:1px solid #ededed;
}
table.form {
	padding:0;
	border-spacing:0;
	border-style:solid none none solid;
	line-height:1.5;
}
table.form tr > * {
	border-style:none solid solid none;
	padding:1em;
	font-size:16px;
	font-weight:500;
}
table.form th {
	font-weight:700;
	background-color:rgba(150,150,150,.05);
}
table.form,
table.form * {
	display:block;
}
@media screen and (min-width:840px) {
	table.form {
		display:table;
		width:100%
	}
	table.form tbody {
		display:table-row-group;
	}
	table.form thead {
		display:table-header-group;
	}
	table.form tr {
		display:table-row;
	}
	table.form tr > * {
		display:table-cell;
		padding:.5em .75em;
		vertical-align:top;
	}
	table.form th {
		width:200px;
	}
}

table.contact input[type='text'],
table.contact input[type='email'],
table.contact input[type='tel'],
table.contact textarea {
	background-color:#fff;
	border:1px solid #ccc;
	border-radius:3px;
	outline:0;
	padding:calc(1.8rem*.25) calc(1.8rem*.5);
	line-height:1.8;
	transition:border .2s ease-out;
	box-shadow:inset 0 1px 1px rgb(0 0 0 / 4%);
	text-align:left;
}
table.contact + input[type='button'] {
	width:100%;
	line-height:1.8;
	padding:calc(1.8rem*.5) calc(1.8rem*.5);
	background:linear-gradient(0deg, #002047, #002047 50%, #ffffff 130%);
	color:#ffffff;
}
table.contact + input[type='button']:hover {
	background:linear-gradient(0deg, #002047, #002047 40%, #ffffff 115%);
}
table.contact {
	margin-bottom:calc(1.8rem*.25);
}
table.contact,
table.contact tr > * {
	border:1px solid #ededed;
}
table.contact {
	padding:0;
	border-spacing:0;
	border-style:solid none none solid;
	line-height:1.5;
}
table.contact tr > * {
	border-style:none solid solid none;
	padding:calc(1.8rem*1);
	font-size:16px;
	font-weight:500;
	background-color:#fdfdfd;
}
table.contact th {
	background-color:rgba(150,150,150,.05);
}
table.contact,
table.contact * {
	display:block;
}
@media screen and (min-width:620px) {
	table.contact {
		display:table;
		width:100%
	}
	table.contact tbody {
		display:table-row-group;
	}
	table.contact thead {
		display:table-header-group;
	}
	table.contact tr {
		display:table-row;
	}
	table.contact tr > * {
		display:table-cell;
		#padding:.5em .75em;
		vertical-align:top;
	}
	table.contact th {
		width:200px;
	}
}

table.spec,
table.spec tr > * {
	border:1px solid #ededed;
}
table.spec {
	padding:0;
	border-spacing:0;
	border-style:solid none none solid;
	line-height:1.5;
}
table.spec tr > * {
	border-style:none solid solid none;
	padding:1em;
	font-size:16px;
	font-weight:500;
}
table.spec th {
	font-weight:700;
}
table.spec,
table.spec * {
	display:block;
}
@media screen and (min-width:840px) {
	table.spec {
		display:table;
		width:100%
	}
	table.spec tbody {
		display:table-row-group;
	}
	table.spec thead {
		display:table-header-group;
	}
	table.spec tr {
		display:table-row;
	}
	table.spec tr > * {
		display:table-cell;
		padding:.5em .75em;
		vertical-align:top;
	}
	table.spec th {
		width:200px;
	}
}
table.spec ul {
	list-style-type:square;
}
table.spec li {
	display:list-item;
	margin-left:1.5em;
}

p.ranking_causion,
.flx p.ranking_causion {
	font-size:12px;
	padding:20px;
}


.guess {
	position:relative;
	z-index:3;
}
.guess ul {
	position:absolute;
	inset:0 -1em auto auto;
	display:block;
	filter:drop-shadow(0 .5em 1em #00000088);
}
.guess[mr] ul {
	inset:auto -1em 3.1em auto;
}
.guess li {
	display:block;
	background-color:#ffffffcc;
	padding:.5em 1em;
	border-radius:3px;
	margin:1px 0 0;
	white-space:nowrap;
	color:#666666;
	cursor:pointer;
	transition-duration:.5s;
	transition-property:all;
	transition-timing-function:ease;
}

.guess li[act] {
	background-color:#ffffff;
	color:#000088;
}
.guess li:not(:first-child) {
	#margin:1px 0 0;
}


small {
	font-size:80%;
}

.fakeol {
	counter-reset:step;
}
.fakeol > p {
	line-height:1.5;
	text-indent:-1.5em;
	padding-left:1.5em;
}
.fakeol > p:before {
	counter-increment:step;
	content:counter(step);
	display:inline-block;
	width:calc(1em / 0.8);
	height:calc(1em / 0.8);
	padding:0.1em;
	text-indent:0;
	font-size:0.8em;
	border:1px solid #000000;
	border-radius:50%;
	line-height:1;
	text-align:center;
	vertical-align:bottom;
	margin:calc(1em / 0.8 * 0.25);
}

.h2svg text {
	text-anchor:start;
	font-size:22px;
	font-weight:700;
	filter:url(#h2svg);
}
.h2svg text tspan[big] {
	font-size:160%;
}

.hashes:after {
	content:'';
	display:block;
	clear:both;
}
.hashes span {
	position: relative;
	display:block;
	float:left;
	font-size:11px;
	font-weight:700;
	line-height:1.2;
	margin:2px 5px 5px 10px;
	padding:4px 7px;
	background-color:rgb(255, 255, 255);
	border-radius:0px 2px 2px 0px;
	color:#000000;
}
.hashes span:before {
	border-top: 10px solid transparent;
	border-right: 8px solid rgb(255, 255, 255);
	border-bottom: 10px solid transparent;
	content:'';
	height: 0px;
	position: absolute;
	top: 0px;
	left: -8px;
	width: 0px;
}

.ShadowBack {
	position:fixed;
	top:50%;
	left:50%;
	right:50%;
	bottom:50%;
	z-index:15;
}
.ShadowBack > div {
	position:absolute;
	top:-50vh;
	left:-50vw;
	right:-50vw;
	bottom:-50vh;
	width:0px;
	height:0px;
	margin:auto;
	transition-property:all;
	transition-duration:0.3s;
	transition-timing-function:linear;
}
.ShadowBack > div > div {
	position:relative;
	width:100%;
	height:100%;
}
.ShadowBack > div > div:after {
	content:'';
	display:block;
	position:absolute;
	border-radius:30px;
	top:-30px;
	left:-30px;
	right:-30px;
	bottom:-30px;
}
.PopUp {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:20;
	text-align:center;
	line-height:100vh;
	overflow:auto;
}
.PopUp > div {
	width:240px;
	display:inline-block;
	line-height:1.5;
	vertical-align:middle;
	text-align:left;
	transition-property:all;
	transition-duration:0.1s;
	transition-timing-function:linear;
	border-radius:30px;
	overflow:hidden;
	transform:scale(0);
	opacity:0;
}
.PopUp > div > div {
	position:relative;
	width:100%;
	height:100%;
}
.PopUp > div > div > div {
	padding:30px 30px 15px;
}
.PopUp > div > div > div:last-child {
	padding:15px 30px;
	cursor:pointer;
}
@media screen and (min-width:540px) {
	.PopUp > div {
		width:480px;
	}
}


.Switch {
	display:inline-block;
	width:70px;
	height:30px;
	border-radius:16px;
	overflow:hidden;
	padding:0 28px 0 0;
	white-space:nowrap;
	vertical-align:bottom;
	cursor:pointer;
}
.Switch[readonly] {
	pointer-events:none;
}
.Switch input { display:none; }
.Switch div {
	position:relative;
	display:inline-block;
	vertical-align:top;
	margin-right:1px;
	transition-property:margin;
	transition-duration:0.1s;
	transition-timing-function:ease-in;
}
.Switch div:after {
	content:'';
	position:absolute;
	display:block;
	width:26px;
	height:26px;
	border-radius:13px;
	margin:2px;
}
.Switch input:checked + div {
	margin-left:40px;
}
.Switch div > * {
	position:absolute;
	box-sizing:border-box;
	display:block;
	vertical-align:top;
	text-align:center;
	width:72px;
	height:30px;
	padding:0;
	font-size:11px;
	line-height:30px;
	font-style:normal;
	font-weight:normal;
}
.Switch div > *:nth-child(1) {
	right:-31px;
	padding-right:20px;
}
.Switch div > b:empty:after {
	content:'火';
}
.Switch div > *:nth-child(2) {
	left:0;
	padding-left:20px;
}
.Switch input:checked + div > *:nth-child(2) {
	left:31px;
}
.Switch div > i:empty:after {
	content:'安';
}
@media screen and (min-width:540px) {
	.Switch {
		width:50px;
		height:22px;
		border-radius:16px;
		padding:0 20px 0 0;
	}
	.Switch div:after {
		width:18px;
		height:18px;
		border-radius:10px;
		margin:2px;
	}
	.Switch input:checked + div {
		margin-left:28px;
	}
	.Switch div > * {
		width:52px;
		height:22px;
		padding:0;
		font-size:9px;
		line-height:22px;
	}
	.Switch div > *:nth-child(1) {
		right:-23px;
		padding-right:16px;
	}
	.Switch div > *:nth-child(2) {
		left:0;
		padding-left:16px;
	}
	.Switch input:checked + div > *:nth-child(2) {
		left:31px;
	}
}

.CircleList {
	overflow:hidden;
	line-height:1.5;
}
.CircleList input {
	display:none;
}
.CircleList label {
	display:inline-block;
	text-align:center;
	line-height:26px;
	border-radius:20px;
	border:1px solid rgba(0,0,0,.15);
	margin:0 1px 1px 0;
	padding:1px;
}
.CircleList label:hover div:before {
	border-color:rgba(0,0,0,.15);
}
.CircleList label div {
	display:inline-block;
	line-height:26px;
	padding:0 10px 0 0;
	cursor:pointer;
}
.CircleList label div:before {
	content:'';
	display:inline-block;
	width:26px;
	height:26px;
	line-height:0px;
	vertical-align:bottom;
	border-radius:20px;
	margin-right:5px;
	border:1.5px solid rgba(0,0,0,0);
	transition-property:all;
	transition-duration:0.3s;
	transition-timing-function:linear;
}

.CircleRadio {
	overflow:hidden;
	line-height:1.5;
}
.CircleRadio input {
	display:none;
}
.CircleRadio label {
	display:inline-block;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	border-radius:20px;
	margin-left:20px;
	cursor:pointer;
	border:1.5px solid rgba(0,0,0,0);
	transition-property:all;
	transition-duration:0.3s;
	transition-timing-function:linear;
}
.CircleRadio label:hover {
	border-color:rgba(0,0,0,.15);
}
.CircleRadio div {
	height:0;
	#white-space:nowrap;
	line-height:1.5;
}
.CircleRadio b {
	position:relative;
	height:30px;
	vertical-align:top;
}
.CircleRadio b:after {
	position:absolute;
	content:'';
	display:inline-block;
	width:30px;
	height:30px;
	border:2px solid rgba(10,10,10,.0);
	border-radius:20px;
	right:0;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	transition-property:all;
	transition-duration:0.5s;
	transition-timing-function:ease-in;
}
.CircleRadio span {
	display:inline-block;
	width:0;
	height:30px;
	transition-property:all;
	transition-duration:0.2s;
	transition-timing-function:ease-out;
	#border:1px solid #000000;
	vertical-align:top;
}
.CircleRadio input:checked ~ span { width:50px; }
.CircleRadio input:checked ~ b:after { border:2px solid rgba(10,10,10,.7); }
@media screen and (min-width:540px) {
	.CircleRadio label {
		width:25px;
		height:25px;
		line-height:25px;
		margin-left:25px;
	}
	.CircleRadio span,
	.CircleRadio b {
		height:25px;
	}
	.CircleRadio b:after {
		width:25px;
		height:25px;
	}
}

.SmallList > span {
	display:block;
	text-align:right;
}
.SmallList > .list > div > input {
	display:none;
}
.SmallList > .list {
	display:table;
	width:100%;
}
.SmallList > .list > div {
	display:table-row;
}
.SmallList > .list > div > * {
	display:table-cell;
	padding:1px 1px 3px;
}
.SmallList > .list > div:nth-child(even) {
	background-color:rgba(0,0,0,.1);
}
.SmallList > .list > div > label {
	position:relative;
	width:0.5%;
	min-width:26px;
	line-height:26px;
	text-align:center;
	vertical-align:top;
	cursor:pointer;
	margin-right:4px;
}
.SmallList > .list > div > label:first-of-type:before {
	position:absolute;
	content:'';
	display:block;
	left:0;
	right:0;
	top:0;
	bottom:0;
	border:2px solid rgba(0,0,0,.05);
	border-radius:50%;
	width:26px;
	height:26px;
	margin:0;
	transition-property:border;
	transition-duration:0.1s;
	transition-timing-function:ease-in;
}
.SmallList > .list > div > label:hover:before {
	border:2px solid rgba(0,0,0,.1);
}
.SmallList > .list > div > input:checked + label:before {
	border:3px solid rgba(0,0,0,.5);
}
.SmallList > span input + input {
	margin-left:1px;
}
@media screen and (min-width:540px) {
	.SmallList > .list > div > label:before {
		width:23px;
		height:23px;
	}
}

.Popup {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	padding:50px;
	background-color:rgba(0,0,0,.5);
	z-index:9;
	transition-property:all;
	transition-duration:.3s;
	transition-timing-function:linear;
	opacity:0;
}
.Popup div {
	width:100%;
	height:100%;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	transition-property:all;
	transition-duration:.3s;
	transition-timing-function:linear;
}
.Popup[act] {
	opacity:1;
	padding:10px;
}

.wordRound {
	font-family:ronde-b, sans-serif;
	font-weight:400;
	text-align:center;
	max-width:404px;
	margin:0 auto;
	padding:4vw 0;
}
.wordRound > div {
	position:relative;
	display:inline-block;
	width:30vw;
	max-width:40%;
	border:1vw solid #fff;
	border-radius:15vw;
	margin:0 1vw;
	font-size:3vw;
}
.wordRound > div:before {
	content:'';
	display:block;
	padding-top:100%;
}
.wordRound > div > span {
	position:absolute;
	display:block;
	left:0;
	right:0;
	line-height:.8;
}
.wordRound > div > span:nth-child(1) {
	top:25%;
	font-size:180%;
}
.wordRound > div > span:nth-child(2) {
	top:50%;
	font-size:430%;
}
@media screen and (min-width: 500px) {
	.wordRound > div {
		font-size:14px;
	}
}
@media screen and (min-width: 840px) {
	.wordRound {
		padding:20px 0;
	}
	.wordRound > div {
		width:160px;
		border-width:5px;
		border-radius:80px;
		margin:0 10px;
	}
}

.top_model {
	position:relative;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	overflow:hidden;
}
.top_model:before {
	content:'';
	display:block;
	padding-top:100%;
}
.top_model > img,
.top_model > svg,
.top_model > span {
	position:absolute;
}
.flx > .top_model img {
	display:unset;
	max-width:unset;
	margin:unset;
}
.top_model [light] {
	top:0;
	right:-25%;
	left:auto;
	bottom:0;
	width:calc(100% / 72 * 128);
}
.top_model [model] {
	top:0;
	right:0;
	width:80%;
}
.top_model [shade] {
	bottom:0;
	left:0;
	right:0;
	height:35%;
	display:block;
	background:linear-gradient(0deg, black, transparent);
}
.top_model [badge] {
	bottom:5%;
	right:1%;
}
.top_model [produ] {
	bottom:3%;
	left:1%;
	width:50%;
}
.top_model [ttext] {
	top:7%;
	left:-2%;
	width:63%;
}
.top_model [anoun] {
	bottom:1%;
	left:8%;
	font-size:10px;
	text-indent:-1em;
	display:block;
}
@media screen and (min-width:840px) {
	.top_model:before {
		padding-top:calc(100% / 128 * 72);
	}
	.top_model [light] {
		right:0;
		left:0;
		width:100%;
	}
	.top_model [model] {
		top:0;
		right:5%;
		width:45%;
	}
	.top_model [produ] {
		left:4%;
		width:33%;
	}
	.top_model [ttext] {
		top:2%;
		left:2%;
		width:57%;
	}
	.top_model [anoun] {
		bottom:2%;
		left:38%;
	}
}

.Breadcrumb {
	position:absolute;
	top:calc(50vw - 20px);
	left:0;
	right:0;
	line-height:1.2;
	z-index:3;
}
.Breadcrumb > * {
	position:relative;
	display:table;
	margin:0 auto;
}
.Breadcrumb > * > * {
	display:table-cell;
	text-align:center;
}
.Breadcrumb > * > *:not(:last-child):after {
	content:'/';
	display:inline-block;
	padding:0 5px 0 5px;
}
.Breadcrumb > * > h1 {
	display:table-caption;
	font-size:20px;
}
.Breadcrumb > * > * > * {
	display:inline-block;
	padding:0 0 0 5px;
}
@media screen and (min-width:540px) {
	.Breadcrumb {
		top:calc(25vw - 20px);
	}
	.Qelect > .list[bottom] > * {
		bottom:26px;
	}
}

.Head {
	position:sticky;
	position:-webkit-sticky;
	z-index:5;
}

.FormHead {
	border-width:1px;
	border-style:solid;
	box-shadow:0 3px 7px rgba(0,0,0,.5);
}
.FormHead:after {
	content:'';
	display:block;
	clear:both;
}
.FormHead > .pager,
.FormHead .control {
	display:inline-block;
	padding:4px;
}
.FormHead .control {
	float:right;
	vertical-align:top;
	white-space:nowrap;
}
.list .pager input,
.FormHead .pager input {
	padding:6px 0.25em;
}
.list .pager input:not(:first-child):not(:last-child),
.FormHead .pager input:not(:first-child):not(:last-child) {
	padding:6px 0.5em;
}
.list .pager input + input,
.FormHead .pager input + input {
	margin-left:1px;
}
.list .pager .nowPage,
.FormHead .nowPage {
	display:inline-block;
	padding:7px 5px;
	min-width:50px;
	text-align:center;
}
.nowPage select,
.list .pager .nowPage select,
.FormHead .nowPage select{
	border:none;
	padding:0;
	background:transparent;
	width:auto;
	text-align:right;
	line-height:1;
	vertical-align:baseline;
}
.nowPage option,
.list .pager .nowPage option,
.FormHead .nowPage option {
	padding:5px 10px;
}
@media screen and (min-width:540px) {
	.FormHead {
		display:table;
		width:100%;
	}
	.FormHead > .pager,
	.FormHead .control {
		width:99%;
		display:table-cell;
	}
	.FormHead .control {
		width:1%;
		float:none;
	}
	.list .pager .nowPage,
	.FormHead .nowPage {
		padding:3px;
	}
	.list .pager input,
	.FormHead .pager input {
		padding:2px 0.25em;
	}
	.list .pager input:not(:first-child):not(:last-child),
	.FormHead .pager input:not(:first-child):not(:last-child) {
		padding:2px 0.5em;
	}
}

.Form {
	border-spacing:0;
}
.Form, .Form :where(thead, tbody, tr, td, th) {
	display:block;
}
.Form :where(td, th) {
	padding:5px;
}
.Form :where(th) {
	padding:20px 5px 5px;
	font-weight:lighter;
	text-align:left;
	line-height:calc(1em + 6px);
}
.Form :where(td:not([text])) {
	padding:1px 2px 0;
	line-height:1;
}
@media screen and (min-width:540px) {
	.Form:not([sm]) {
		display:table;
		width:100%;
	}
	.Form:not([sm]) :where(thead) { display:table-header-group; }
	.Form:not([sm]) :where(tbody) { display:table-row-group; }
	.Form:not([sm]) :where(tr) { display:table-row; }
	.Form:not([sm]) :where(td, th) { display:table-cell; }
	.Form:not([sm]) :where(th) {
		padding:4px 3px 3px;
		width:20%;
		text-align:center;
	}
	.Form:not([sm]) :where(td) {
		width:30%;
	}
}

.List {
	position:relative;
	overflow:auto;
	#max-height:calc(100vh - 170px);
}
.List > table {
	width:100%;
	border-spacing:0;
}
.List > table > * > * > * {
	padding:0;
	border:none;
	white-space:nowrap;
	padding:8px 5px;
}
.List > table > * > * > * > div {
	display:inline-block;
	vertical-align:top;
}
.List > * > thead > * > *,
.List > table > * > * > th {
	position:sticky;
	position:-webkit-sticky;
	z-index:2;
	font-weight:normal;
}
.List > * > thead > * > *[DESC]:after {
	content:'▼';
}
.List > * > thead > tr > *[ASC]:after {
	content:'▲';
}
.List > * > thead > tr > th {
	z-index:3;
}
.List > * > thead > tr > *:nth-of-type(n) {
	top:0;
	text-align:center;
}
.List > * > thead > tr > *[onclick] {
	cursor:pointer;
}
.List > * > * > tr > * {
	#left:0;
}
.List > * > tbody > tr > *[onclick]:hover,
.List > * > tbody > tr[onclick] > *:hover {
	cursor:pointer;
}
.List > * > tbody > tr:last-child > th {
	#text-align:left;
	#bottom:0;
}
.List > .tips,
.List > .sum {
	position:sticky;
	position:-webkit-sticky;
	left:0;
	padding:8px 5px;
}
.List > .sum {
	position:sticky;
	position:-webkit-sticky;
	bottom:0;
	white-space:nowrap;
	z-index:3;
}
@media screen and (min-width:540px) {
	.List > * > * > tr > * {
		padding:5px;
	}
}