/* ==================================================================
    reset
*/
*{box-sizing:border-box;margin:0;padding:0;}button{border:none}img{line-height:0}img{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;}
*::before,*::after{box-sizing: border-box;margin:0;padding:0}
*{list-style: none;}

/* -------------------
    add
*/
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="tel"],input[type="email"],input[type="password"],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="tel"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="number"]: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}
body {
    /* font-size: 14px; */
    /* line-height:1.5 */
}
@media screen and (min-width: 768px) {
    body {
        /* font-size: 16px; */
    }
}
main 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[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"],
select,
textarea {
    font: inherit
}
input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"],
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% !important;
    height: 50% !important;
    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;
}
small {
    font-size: 70%;
}
strong {
    font-size: 120%
}
hr {
    display: block;
    width: 100%;
    height: 1px;
    margin: .5em 0;
    background: lightgray;
    border: none;
}

input[type="radio"], input[type="radio"]:checked:before, input[type="checkbox"], input[type="checkbox"]:checked:before {
    border: none;
}