@charset "utf-8";

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;
	}
}

table.contact th small {
	display:block;
	padding:.5em 0 0;
}
table.contact th small:before {
	content:'※';
}
table.contact td > .pist {
	display:flex;
	flex-wrap:wrap;
	font-size:90%;
	gap:1em;
}
.pist label {
	display:block;
	width:calc((100% - 2em) / 3);
	cursor:pointer;
}
@media screen and (min-width:840px) {
	.pist label {
		width:calc((100% - 3em) / 4);
	}
}

table.contact td label ul {
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:start;
}
table.contact td label .ch {
	position:absolute;
	display:block;
	width:3em;
	height:1.8em;
	inset:auto auto calc(100% - 2em) calc(100% - 2em);
	transform:scale(.8) rotate(-40deg);
	pointer-events:none;
	transform-origin:bottom left;
	transition-timing-function:ease;
	transition-duration:.5s;
	transition-property:all;
}
label:not([class]) > :is(input[type='radio'], input[type='checkbox']):checked + ul .ch {
	transform:scale(1) rotate(-50deg);
}
table.contact td label .ch p {
	inset:0;
	position:absolute;
	display:block;
	background-color:#cccccc;
	margin:auto;
	--p:.4em;
	transition-timing-function:ease;
	transition-duration:.5s;
	transition-property:all;
}
label:not([class]) > :is(input[type='radio'], input[type='checkbox']):checked + ul .ch p:nth-child(-n+2) {
	background-color:#0088ff;
}
table.contact td label .ch p:nth-child(n+3) {
	inset:.2em;
	background-color:#fff;
	--p:.0em;
}
table.contact td label .ch p:nth-child(2n) {
	right:auto;
	width:calc(.4em + var(--p));
}
table.contact td label .ch p:nth-child(2n+1) {
	top:auto;
	height:calc(.4em + var(--p));
}
table.contact td label .dn.img {
	position:relative;
}
table.contact td label .dn.img:before {
	content:'';
	position:absolute;
	display:block;
	inset:1em;
	border:.4em solid #ddd;
	border-radius:1em;
	transition-timing-function:ease;
	transition-duration:.5s;
	transition-property:all;
}
table.contact td label input[type='checkbox']:checked + ul .dn.img:before {
	inset:1px;
}
table.contact td :is(label:hover, label input[type='checkbox']:checked + ul) .dn.img:before {
	border-width:.2em;
	border-color:#0088ff;
}
table.contact td label .dn.img:after {
	content:'';
	display:block;
	padding-top:100%;
}
table.contact td label .dn.img img {
	position:absolute;
	display:block;
	inset:0;
	margin:auto;
	max-width:90%;
	max-height:90%;
	transition-timing-function:ease;
	transition-duration:.3s;
	transition-delay:.2s;
	transition-property:all;
}
table.contact td label input[type='checkbox']:not(:checked) + ul .dn.img img {
	transition-delay:0s;
	max-width:80%;
	max-height:80%;
}
table.contact td label:not(:hover) input[type='checkbox']:not(:checked) + ul .dn.img img {
	filter:grayscale(.5);
	-webkit-filter:grayscale(.5);
}
table.contact td label .dn.lbl {
	width:fit-content;
	margin:auto;
}

table.contact + input[type='button']:disabled {
	background-image:linear-gradient(0deg, #00000066, #00000055 50%, #00000000 130%);
}

.underTitle {
	margin-bottom:1em;
}

.teel {
	display:block;
	font-size:120%;
	padding:1em 1em 2em;
}

.content .outer {
	text-align:center;
}
.content .outer:after,
.content .outer:before {
	content:'――――';
	display:inline-block;
	margin:0 .5em;
}

.darkBack {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	z-index:9;
	background-image:linear-gradient(to bottom, #000000ee, #00000088);
}
.darkBack .prog {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:250px;
	height:60px;
	margin:auto;
	background:#fff;
	border-radius:10px;
	box-shadow:0 10px 10px #000000;
}
.darkBack .prog > div {
	position:absolute;
	left:10px;
	right:10px;
	bottom:10px;
	height:10px;
	border:1px solid #888888;
	padding:1px;
}
.darkBack .prog > div > div {
	background:#0099ff;
	width:0%;
	height:100%;
	transition-property:all;
	transition-duration:0.2s;
	transition-timing-function:ease-out;
}
.darkBack .prog > span {
	position:absolute;
	left:0;
	right:0;
	bottom:50%;
	width:fit-content;
	height:fit-content;
	margin:auto;
}

.floatTOP > div {
	right:max(0px, calc(env(safe-area-inset-right) / 2));
	left:auto !important;
	bottom:max(2px, calc(env(safe-area-inset-left) / 2));
}