/* ==================================================================
    reset
*/
*{word-break: break-all;box-sizing:border-box;margin:0;padding:0;line-height:1.5}button{border:none}img{line-height:0;border:none}dl,dt,dd{margin:0;font-weight:normal}label:hover{cursor:default}table,table tr,table td,table th,ul,input{list-style:none outside none;margin:0;padding:0;font-weight:normal}h1{margin-top:0;}nav{list-style: none;}
*::before,*::after{box-sizing: border-box;margin:0;padding:0}

/* -------------------
    add
*/
form {width: auto;padding: 0;margin: 0}
input:disabled{background: currentColor;cursor: default !important;opacity: 0.1}
input::placeholder{opacity:0.5}
input,textarea,select{--webkit-appearance:none;appearance:none;-webkit-border-radius:0;margin:0;padding: 0;transition-duration: .3s}
input[type="radio"],input[type="checkbox"]{background:white}
input[type="text"],input[type="number"],input[type="email"],input[type="tel"],textarea,select{width:100%}
input[type="number"]{appearance:textfield;-moz-appearance:textfield;ime-mode:disabled}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type="submit"],input[type="button"],input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;-webkit-border-radius:0}
input[type="text"]:focus,input[type="number"]input[type="email"]:focus,input[type="tel"]:focus,:focus,textarea:focus,select:focus{outline: 0;}
table{width:100%;border-collapse:collapse}th{text-align:left}
a{text-decoration: underline;text-decoration-color: transparent;text-decoration-thickness: 1px;transition-duration: .3s;}
a:hover {text-decoration-color: currentColor;}
*:hover{transition-duration:.3s}
footer {margin-top: auto}
html {margin-top: 0 !important;scroll-behavior: smooth;}
body {
    position: relative;
    font-size: 14px;
    background: white;
}
@media screen and (min-width: 768px) {
    body {
        font-size: 16px;
    }
}
img {
    height: auto;
    max-width: 100%;
    width: fit-content;
}
a:has(img):hover {opacity: .8;}
#wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden
}

/* -------------------
    input customize
*/
label { white-space: nowrap }
label:has([type="checkbox"], [type="radio"]) { white-space: wrap }
button,
input,
optgroup,
select,
textarea {
    font: inherit
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
textarea,
select {
	padding: .5em;
	border: solid 1px;
}
input[type="radio"],
input[type="checkbox"] {
    appearance: none;
	position: relative;
    display: inline-block;
	width: 1rem;
	height: 1rem;
    margin-right: .25em;
	aspect-ratio: 1;
    vertical-align: middle;
}
input[type="radio"]::after,
input[type="radio"]::before {
    border-radius: 100%;
}
:is(input[type="radio"], input[type="checkbox"])::after,
:is(input[type="radio"], input[type="checkbox"])::before {
	content: "";
    position: absolute;
    top: 0;
    bottom: 0;
	left: 0;
    right: 0;
	display: block;
    margin: auto;
	aspect-ratio: 1;
}
:is(input[type="radio"], input[type="checkbox"])::after {
	width: 100%;
	height: 100%;
    border: solid 1px;
	pointer-events: none;
}
:is(input[type="radio"], input[type="checkbox"])::before {
	width: 50%;
    height: 50%;
    background: currentColor;
	opacity: 0;
}
:is(input[type="radio"], input[type="checkbox"]):checked::before {
    opacity: 1;
}
:is(input[type="radio"], input[type="checkbox"]) + span { vertical-align: middle; line-height: 1em }
select {
    padding-right: 1.5em;
}
div:has(>select) {
	position: relative;
	width: 100%;
}
div:has(>select)::before,
div:has(>select)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    display: inline-block;
	margin: auto;
    pointer-events: none;
}
div:has(>select)::before {
    right: 0;
    width: 1.5em;
    height: 100%;
}
div:has(>select)::after {
    right: .5em;
    height: .5em;
    aspect-ratio: 1;
    background: currentColor;
    clip-path: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%);
	transform: rotate(90deg);
}

/* -------------------
    basic
*/
h1 {
    font-size: 2rem;
    line-height: 1.5;
}
h1:has(img) {
    line-height: 0;
}
h2 {
    font-size: 1.5rem;
}
h3 {
    font-size: 1.25rem;
}
h4 {
    font-size: 1.2rem;
}
hr {
    display: block;
    width: 100%;
    height: 1px;
    margin: .5em 0;
    background: lightgray;
    border: none;
}
/* -------------------
    table
*/
.l-table {
	background: white;
}
.l-table :is(th, td) {
	display: block;
    padding: 1em;
    width: 100%;
}
.l-table :is(tr, th) {
    margin: -1px;
    width: calc(100% + 2px);
    border: solid 1px;
}
.l-table caption {
    padding: .5em;
    font-size: 1rem;
    text-align: left;
}
@media all and (min-width:768px) {
	.l-table :is(th, td) {
		display: table-cell;
        width: auto;
		vertical-align: middle;
	}
	.l-table th {
		width: 30%;
	}
	.l-table td {
		width: 70%;
	}	
}

@media screen and (min-width: 768px) {
    .only-sp {display: none}
}
@media screen and (max-width: 767px) {
    .only-pc {display: none}
}

/* ==================================================================
    javascript連動
*/
/* バリデーションエラー */
.is-error__text {
    margin-top: 1em;
	font-weight: bold;
    font-size: .875rem;
}
.is-error__text::before {
	content: "!";
	display: inline-block;
	height: 1.5em;
    width: 1.5em;
	margin-right: .25em;
	border-radius: 50%;
	text-align: center;
}
.is-error__text {
    color: red;
}
.is-error__text::before {
	color: white;
	background: red;
}