@charset "utf-8";

:root {
	--pcp: / 1400 * 100%;
	--pcv: / 1400 * 100vw;
	
	--spp: / 375 * 100%;
	--spv: / 375 * 100vw;
}

/* -------------------------------------------------
	reset
------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
	vertical-align: top;
	box-sizing: border-box;
}

html {
}

body {
	line-height: 1;
	-webkit-text-size-adjust: 100%;
	position: relative;
	font-family: "A1ゴシック M", "A1 Gothic M", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	overflow-y: hidden;
	color: #f00;
	font-feature-settings: "palt";
}

p, h1, h2, h3, h4, th, td, li, dt, dd, figcaption, input, select, textarea {
	font-weight: normal;
}

img {
	border: none;
	max-width: 100%;
	height: auto;
}

iframe {
	border: none;
}

a {
	text-decoration: none;
	color: #f00;
}
a:hover {
	
}

ul, ol {
	list-style-type: none;
}

table {
	border-collapse: collapse;
}

main {
	display: block;
}

@media print, screen and (min-width:768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

/* -------------------------------------------------
	#mandatory-box
------------------------------------------------- */

#mandatory-box {
	height: 100vh;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
}
#mandatory-box .mandatory-item {
	height: 100vh;
	scroll-snap-align: start;
}

/* -------------------------------------------------
	#fv
------------------------------------------------- */

#fv {
	background: #f00;
	display: flex;
	justify-content: center;
	align-items: center;
}
#fv h1 {
	width: 223px;
	opacity: 0;
	transition: opacity 1.5s ease-out 1s;
}
#fv.on h1 {
	opacity: 1;
}
#fv h1 .logo {
	width: 100%;
}
#fv h1 .text {
	width: 100%;
	margin-top: 56px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#fv h1 .text img:first-child {
	width: 27px;
}
#fv h1 .text img:last-child {
	width: 30px;
}
#fv h1 .text .bar {
	width: 30px;
	height: 4px;
	margin: 0 4px;
	background: #fff;
	overflow: hidden;
	transition: width 0.8s cubic-bezier(0,.3,.09,.9) 2.5s;
}
#fv.on h1 .text .bar {
	width: 154px;
}
#fv h1 .text .bar span {
	font-size: 1px;
	color: transparent;
	text-indent: 100%;
}

/* PCで画面幅大きくなったときの調整 */
@media screen and (min-width:1400px) {
	#fv h1 {
		width: calc(223 var(--pcv));
	}
	#fv h1 .text {
		margin-top: calc(56 var(--pcv));
	}
	#fv h1 .text img:first-child {
		width: calc(27 var(--pcv));
	}
	#fv h1 .text img:last-child {
		width: calc(30 var(--pcv));
	}
	#fv h1 .text .bar {
		width: calc(30 var(--pcv));
		height: calc(4 var(--pcv));
		margin: 0 calc(4 var(--pcv));
	}
	#fv.on h1 .text .bar {
		width: calc(154 var(--pcv));
	}
}

@media screen and (max-width:767px) and (orientation:portrait) {
	#fv h1 {
		width: calc(162 var(--spv));
	}
	#fv h1 .text {
		margin-top: calc(41 var(--spv));
	}
	#fv h1 .text img:first-child {
		width: calc(20 var(--spv));
	}
	#fv h1 .text img:last-child {
		width: calc(22 var(--spv));
	}
	#fv h1 .text .bar {
		width: calc(22 var(--spv));
		height: calc(3 var(--spv));
		margin: 0 calc(3 var(--spv));
	}
	#fv.on h1 .text .bar {
		width: 30vw;
	}
}

@media screen and (max-width:767px) and (orientation:landscape) {
	#fv h1 {
		width: calc(223px * 0.5);
	}
	#fv h1 .text {
		margin-top: calc(56px * 0.5);
	}
	#fv h1 .text img:first-child {
		width: calc(27px * 0.5);
	}
	#fv h1 .text img:last-child {
		width: calc(30px * 0.5);
	}
	#fv h1 .text .bar {
		width: calc(30px * 0.5);
		height: calc(4px * 0.5);
		margin: 0 calc(4px * 0.5);
	}
	#fv.on h1 .text .bar {
		width: calc(154px * 0.5)
	}
}

/* -------------------------------------------------
	#lead
------------------------------------------------- */

#lead {
	display: flex;
	align-items: center;
}
#lead .text-wrap {
	width: 96%;
	max-width: 950px;
	margin: 0 auto;
}
#lead .text-wrap p {
	font-size: 22px;
	line-height: calc(50 / 22);
	letter-spacing: 0.05em;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(1em);
	transition:
		opacity 1.2s cubic-bezier(.05,.77,.45,.99),
		transform 1.2s cubic-bezier(.05,.77,.45,.99);
}
#lead .text-wrap p:nth-child(2) { transition-delay: 0.5s; }
#lead .text-wrap p:nth-child(3) { transition-delay: 1s; }
#lead .text-wrap p:nth-child(4) { transition-delay: 1.5s; }
#lead .text-wrap p:nth-child(5) { transition-delay: 2s; }

#lead.on .text-wrap p {
	opacity: 1;
	transform: translateY(0);
}
#lead .text-wrap p + p {
	margin-top: 1em;
}

/* PCで画面幅大きくなったときの調整 */
@media screen and (min-width:1400px) {
	#lead .text-wrap {
		max-width: calc(950 var(--pcv));
	}
	#lead .text-wrap p {
		font-size: calc(22 var(--pcv));
	}
}

@media screen and (max-width:767px) and (orientation:portrait) {
	#lead .text-wrap {
		width: calc(293 var(--spp));
	}
	#lead .text-wrap p {
		font-size: calc(16 var(--spv));
		line-height: calc(33 / 16);
	}
}

@media screen and (max-width:767px) and (orientation:landscape) {
	#lead .text-wrap {
		width: 70%;
	}
	#lead .text-wrap p {
		font-size: calc(22px * 0.5);
	}
}

/* -------------------------------------------------
	#footer
------------------------------------------------- */

#footer {
	display: flex;
	align-items: center;
	position: relative;
}

#footer .text-wrap,
#footer .copyright {
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity 1.6s cubic-bezier(.05,.77,.45,.99),
		transform 1.6s cubic-bezier(.05,.77,.45,.99);
}
#footer.on .text-wrap,
#footer.on .copyright {
	opacity: 1;
	transform: translateY(0);
}

#footer .text-wrap {
	width: 96%;
	max-width: 950px;
	margin: 0 auto;
}
#footer .col2 {
	display: flex;
}
#footer .left {
	width: 50%;
}
#footer .logo {
	width: 142px;
}
#footer .title {
	font-size: 30px;
}
#footer table {
	margin-top: 50px;
}
#footer th,
#footer td {
	font-size: 15px;
	line-height: calc(25 / 15);
	letter-spacing: 0.05em;
	font-weight: 400;
	text-align: left;
}
#footer th {
	width: 6em;
}
#footer tr:not(:first-child) th,
#footer tr:not(:first-child) td {
	padding-top: 25px;
}
#footer .copyright {
	letter-spacing: 0.05em;
}

@media print, screen and (min-width:768px) {
	#footer .copyright {
		font-size: 10px;
		position: absolute;
		right: 30px;
		bottom: 30px;
	}
}

/* PCで画面幅大きくなったときの調整 */
@media screen and (min-width:1400px) {
	#footer .text-wrap {
		max-width: calc(950 var(--pcp));
	}
	#footer .logo {
		width: calc(142 var(--pcv));
	}
	#footer .title {
		font-size: calc(30 var(--pcv));
	}
	#footer table {
		margin-top: calc(50 var(--pcv));
	}
	#footer th,
	#footer td {
		font-size: calc(15 var(--pcv));
	}
	#footer tr:not(:first-child) th,
	#footer tr:not(:first-child) td {
		padding-top: calc(25 var(--pcv));
	}
	#footer .copyright {
		font-size: calc(10 var(--pcv));
	}
}

@media screen and (max-width:767px) and (orientation:portrait) {
	#footer {
		flex-direction: column;
		justify-content: center;
	}
	#footer .text-wrap {
		width: calc(293 var(--spp));
	}
	#footer .col2 {
		display: block;
	}
	#footer .logo {
		width: calc(89 var(--spv));
	}
	#footer .title {
		margin-top: calc(52 var(--spv));
		font-size: calc(18 var(--spv));
	}
	#footer table {
		margin-top: calc(25 var(--spv));
	}
	#footer th,
	#footer td {
		font-size: calc(13 var(--spv));
		line-height: calc(20 / 13);
	}
	#footer tr:not(:first-child) th,
	#footer tr:not(:first-child) td {
		padding-top: calc(20 var(--spv));
	}
	#footer .copyright {
		width: calc(293 var(--spp));
		margin: calc(70 var(--spv)) auto 0;
		text-align: left;
		font-size: calc(9 var(--spv));
	}
}

@media screen and (max-width:767px) and (orientation:landscape) {
	#footer {
		position: relative;
	}
	#footer .text-wrap {
		width: 70%;
	}
	#footer .logo {
		width: calc(142px * 0.5);
	}
	#footer .title {
		font-size: calc(30px * 0.5);
	}
	#footer table {
		margin-top: calc(50px * 0.5);
	}
	#footer th,
	#footer td {
		font-size: calc(15px * 0.5);
	}
	#footer tr:not(:first-child) th,
	#footer tr:not(:first-child) td {
		padding-top: calc(25px * 0.5);
	}
	#footer .copyright {
		margin-top: calc(120px * 0.5);
		font-size: calc(10px * 0.5);
		position: absolute;
		right: calc(30px * 0.5);
		bottom: calc(30px * 0.5);
	}
}

/* -------------------------------------------------
	responsive
------------------------------------------------- */

@media print, screen and (min-width:768px) {
	.pc-none {
		display: none !important;
	}
}

@media screen and (max-width:767px) and (orientation:portrait) {
	.sp-none {
		display: none !important;
	}
}

@media screen and (max-width:767px) and (orientation:landscape) {
	.pc-none {
		display: none !important;
	}
}

/* -------------------------------------------------
	print
------------------------------------------------- */

@media print {
	* {
		opacity: 0 !important;
	}
	body {
		width: 980px !important;
	}
}