/* reset */
abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:rgba(0,0,0,0);font-style:normal;font-weight:400}article,aside,details,figcaption,figure,footer,header,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{font-size:0;line-height:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}a{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:rgba(0,0,0,0)}ins{background:#fff;color:#000;text-decoration:none}mark{background:#ff9;color:#000;font-style:normal;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}table{border-collapse:collapse;border-spacing:0;word-break:break-all}fieldset,img{vertical-align:top;line-height:0}input,select{vertical-align:middle}html{height:100%;overflow-y:scroll}*{margin:0;padding:0}


/* root */
:root {
	--bp-sp: 375px;
	--bp-tb: 800px;
	--bp-pc: 1200px;
	--color-f-base: #000;
	--color-f-link: #2a0019;
	--color-f-footer: #fff;
	--color-main: #c73834;
	--color-footer: #000;
	--color-input: #d1d1d1;
	--weight-r: 400;
	--weight-m: 500;
	--weight-b: 600;
	--family-serif: "Noto Serif JP", serif;
	--family-sans: "Noto Sans JP", sans-serif;
}

/* html */
html {
	scroll-behavior: smooth;
}

/* base */
body {
	height: 100%;
	font-size: 15px;
	font-family: "Noto Sans JP", sans-serif;
	-webkit-text-size-adjust: none;
	font-feature-settings: "palt";
	word-wrap: break-word;
	color: var(--color-f-base);
	line-height: 1.8;
	font-weight: var(--weight-r);
	background: #fff;
}
a:link, a:visited {
	color: var(--color-f-link);
	outline-width: 0;
	outline: none;
}
a:hover, a:active {
	text-decoration: none;
	outline-width: 0;
}
.alertJs {
	padding: 10px 40px;
	text-align: center;
	background: #de8e0c;
	color: #fff;
	display: block;;
}
input, textarea, select {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
	-webkit-appearance : none;
	color: var(--color-f-base);
	&::placeholder {
		color: #999;
	}
}
span {
	font-weight: inherit;
}


/* layout */
#header {
	padding: 60px 0 50px;
	border-top: 5px solid var(--color-main);
	border-bottom: 1px solid var(--color-main);
	& h1 {
		text-align: center;
	}
	& img {
		height: 50px;
	}
}
@media screen and (min-width: 800px) { #header {
	/*padding: 53px 0 51px;*/
	padding: 41px 0 39px;
	& img {
		height: 56px;
	}
}}

#footer {
	padding: 22px 0 24px;
	background: var(--color-footer);
	text-align: center;
	font-size: 14px;
	color: var(--color-f-footer);
	letter-spacing: 0.06em;
}
@media screen and (min-width: 800px) { #footer {
	padding: 35px 0 38px;
	font-size: 15px;
}}

#pagetop {
	width: 36px;
	height: 36px;
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	overflow: hidden;
	border-radius: 50%;
	display: block;
	background: var(--color-main);
	position: fixed;
	bottom: 15px;
	right: 15px;
	transition: opacity .3s, transform .3s;
	transform: translateY(100px);
	&.show {
		transform: translateY(0);
	}
	&::before {
		content: "";
		display: block;
		width: 8px;
		height: 8px;
		border-left: 2px solid #fff;
		border-bottom: 2px solid #fff;
		position: absolute;
		inset: 0;
		top: 4px;
		margin: auto;
		transform: rotate(135deg);
	}
}
@media screen and (min-width: 800px) { #pagetop {
	width: 60px;
	height: 60px;
	bottom: 30px;
	right: 30px;
	&::before {
		width: 14px;
		height: 14px;
		top: 7px;
	}
}}

.contents {
	max-width: 1100px;
	padding: 32px min(calc(4000vw/750), 50px) 45px;
	margin: 0 auto;
}
@media screen and (min-width: 800px) { .contents {
	padding-top: 49px;
	padding-bottom: 90px;
}}

.btn {
	& input[type="submit"], & a {
		width: min(100%, 400px);
		height: 80px;
		margin: 0 auto;
		text-decoration: none;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
		border: 2px solid transparent;
		box-sizing: border-box;
		font-size: 18px;
		border-radius: 3px;
		cursor: pointer;
	}
	.btn-ok input, .btn-ok a {
		background: var(--color-main);
		border-color: var(--color-main);
		color: #fff;
	}
	.btn-back input, .btn-back a {
		background: #ccc;
		border-color: #ccc;
	}
}
@media screen and (min-width: 800px) { .btn {
	.btn-ok input, .btn-ok a {
		border-radius: 6px;
		transition: background .3s, color .3s;
		&:hover {
			background: #fff;
			color: var(--color-main);
		}
	}
	.btn-back input, .btn-back a {
		transition: opacity .3s;
		&:hover { opacity: .5;}
	}
}}