@charset "utf-8";

:root{
	--color-a: #d9e4ef;
	--color-b: #4077b0;
	--color-k: #000;
	--color-w: #fff;
	--color-wa: #ffffffbb;
}

.larger-text{
	font-size: 1.3em;
}
.inverted{
	filter: invert(100%) hue-rotate(180deg);
}

body{
	position: relative;
}

.accessibility-controls{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1em;
	text-align: center;
	width: 100%;
	font-size: 15px;
	font-weight: bold;
	line-height: 40px;
	padding: 5px 0;
	color: var(--color-k);
	background: var(--color-wa);
	position: sticky;
	top: 0;
	z-index: 5;
	list-style-type: none;
}
.accessibility-controls a{
	text-decoration: none;
	color: inherit;
}

.accessibility-controls .switch{
	position: relative;
	display: inline-block;
	width: 8em;
	height: 2em;
	border: 1px solid #000000;
	border-radius: 1em;
	box-sizing: border-box;
}
.accessibility-controls .switch input{
	opacity: 0;
	width: 0;
	height: 0;
}
.accessibility-controls .slider{
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color-w);
	border-radius: 1em;
	display: flex;
	align-items: center;
}
.accessibility-controls .slider .active a{
	color: var(--color-w);
}
.accessibility-controls .slider:before{
	position: absolute;
	content: "";
	height: 2em;
	width: 4.5em;
	text-align: center;
	left: 0;
	background-color: var(--color-k);
	transition: 0.4s;
	border-radius: 1em;
}

.accessibility-controls .slider.choose-lang:before{
	transition: none;
}

.accessibility-controls input:checked + .slider{
	background-color: var(--color-w);
	color: var(--color-k);
}

.accessibility-controls input:checked + .slider:before{
	transform: translateX(3.5em);
}

.accessibility-controls input:checked + .slider.choose-lang,
.accessibility-controls input:checked + .slider.choose-lang:before{
	transform: none;
}


.accessibility-controls .slider .off,
.accessibility-controls .slider .on{
	color: var(--color-w);
	position: absolute;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 25%;
}
.accessibility-controls .slider .on{
	left: 75%;
}

.accessibility-controls .slider.choose-lang .off a{
	color: var(--color-w);
}

.accessibility-controls input:checked + .slider .off,
.accessibility-controls input:not(:checked) + .slider .on{
	color: var(--color-k);
}
.accessibility-controls label{
	display: flex;
	align-items: center;
}



form#mail_form input[type="text"],
form#mail_form input[type="email"],
form#mail_form input[type="tel"]{
	line-height: 1.5em;
	font-size: 1em;
}



/* 色反転時の色補正 */
html.inverted,
html.inverted body>div.wrap *,
html.inverted body #thanks *,
html.inverted body .green{
	color: #000000!important;
}

html.inverted img{filter: invert(100%) hue-rotate(180deg);}

html.inverted form#mail_form div.explanation,
html.inverted form#mail_form div.way,
html.inverted form#mail_form div.note,
html.inverted form#confirm_form div.confirm_notes_toparea,
html.inverted form#mail_form div.notes_toparea{
	border: 0.1rem solid #999999;
	background: unset;
}
html.inverted form#mail_form div.payment table th,
html.inverted form#mail_form div.payment table td{
	background: unset;
	border-color: #999999;
}
html.inverted form#mail_form div.payment table th{
	font-weight: bold;
}

html.inverted form#mail_form div.headline,
html.inverted form#mail_form dl,
html.inverted form#confirm_form dl,
html.inverted form#mail_form dl dd,
html.inverted form#confirm_form dl dd,
html.inverted .delimiter,
html.inverted form#mail_form div.breakdown,
html.inverted form#mail_form div.pay,
html.inverted form#confirm_form div.headline,
html.inverted form#confirm_form div.way,
html.inverted form#confirm_form div.pay,
html.inverted form#confirm_form div.breakdown,
html.inverted .personal-information dd,
html.inverted .unchangeable ul,
html.inverted .unchangeable ul li:nth-child(2n),
html.inverted .table-bordered td,
html.inverted .table-bordered th{
	border-color: #999999!important;
}

html.inverted form#mail_form dl dt span.required,
html.inverted form#mail_form dl dt span.optional{
	border: 1px solid #000000;
	font-weight: bold;
}
html.inverted form#mail_form dl dt span.required{
	background: #000000!important;
	color: #FFFFFF!important;
}
html.inverted form#mail_form dl dt span.optional{
	background: unset!important;
}

html.inverted form#mail_form ul li label{
	border: 0.1rem solid #999999;
	background: #d9d9d9;
}
html.inverted form#mail_form ul li label:hover{
	background: #999999;
}
html.inverted form#mail_form input[type="text"],
html.inverted form#mail_form input[type="email"],
html.inverted form#mail_form input[type="tel"]{
	border-color: #999999!important;
}
html.inverted form#mail_form select{
	font-size: 1em;
	border-color: #999999!important;
}
html.inverted ::placeholder{
	color: #999999!important;
	font-weight: bold;
}
html.inverted form#mail_form input#postal+a{
	border: 1px solid #FFFFFF;
	background: #000000;
	color: #FFFFFF!important;
}
html.inverted form#mail_form div.way > .breakdown-hed,
html.inverted form#mail_form div.pay > ul > li:first-child,
html.inverted form#confirm_form div.way > .breakdown-hed,
html.inverted form#confirm_form div.pay > ul > li:first-child,
html.inverted .personal-information tr td:first-child{
	background: #000000!important;
	color: #FFFFFF!important;
}


html.inverted form#mail_form a:hover,
html.inverted form#mail_form input[type="button"]:hover{opacity: 0.7;}

html.inverted form#mail_form dl dd span.error_blank,
html.inverted form#mail_form dl dd span.error_format,
html.inverted form#mail_form dl dd span.error_match{
	color: #FFFFFF!important;
	background: #000000;
	padding-left: 1em;
}


html.inverted form#mail_form input[type="button"],
html.inverted div#confirm_field input#confirm_submit_button,
html.inverted .btn-pay,
html.inverted .card-button.-compact,
html.inverted body>div.wrap button.print{
	border-color: #FFFFFF!important;
	background: #000000!important;
	color: #FFFFFF!important;
	font-weight: bold;
}
html.inverted body>div.wrap .btn-pay,
html.inverted body>div.wrap .btn-pay span,
html.inverted body>div.wrap .card-button.-compact i{
	color: #FFFFFF!important;
}
html.inverted div#confirm_field input#confirm_cancel_button,
html.inverted form#mail_form input[type="button"].button_cancel,
html.inverted .button_cancel_mypage{
	border-color: #000000!important;
	background: #FFFFFF!important;
	color: #000000!important;
	font-weight: bold;
}

html.inverted header h1,
html.inverted header p.period,
html.inverted header.mypage-head,
html.inverted header.mypage-head > p.period{
	background: #FFFFFF!important;
	color: #000000!important;
}
html.inverted .card{
	border: 0.1rem solid #000000;
	border-radius: 1rem;
	overflow: hidden;
}
html.inverted .card__title{
	border-color: #000000;
}

html.inverted body>div.wrap .personal-information dt{
	border-color: #999999;
	background: #000000;
	color: #FFFFFF!important;
}

html.inverted form#mail_form div.pay+table tr:first-child th {
	background: #000000;
	color: #FFFFFF!important;
	text-align: center;
}



/* 文字サイズ */
.larger-text form#mail_form dl dt{
	text-indent: -70px;
	padding: 0 0 0 70px;
}
.element-label,
.stripe-input,
.btn-pay{
	font-size: 1rem!important;
}




@media screen and (max-width: 559px){
	.accessibility-controls{
		gap: 0.5em;
		font-size: 12px;
		line-height: 24px;
		padding: 5px 0;
	}
}


@media screen and (max-width: 424px){
	.accessibility-controls .switch{
		width: 7em;
	}
	.accessibility-controls .slider:before{
		width: 4em;
	}
	.accessibility-controls input:checked + .slider:before{
		transform: translateX(3em);
	}
}


@media screen and (max-width: 767px){
	.larger-text form#mail_form dl dt{
		text-indent: -60px;
		padding: 0 0 0 61px;
	}
}

@media print{
	.accessibility-controls{
		display: none;
	}
	html.larger-text{
		font-size: 87.5%;
	}
	.inverted,
	html.inverted img{
		filter: unset;
	}	
}