@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Outfit:wght@100..900&display=swap&subset=japanese');

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, p, blockquote, th, td { 
	margin: 0;
	padding: 0;
}

a {
	outline: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset, legend, img { 
	border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}

ol, ul {
	list-style: none;
}

caption, th {
	text-align: left;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}

q:before, q:after {
	content: '';
}

abbr, acronym {
	border: 0;
}

img {
	max-width: 100%;
	vertical-align: bottom;
}

body {
	position: relative;
	font-family: 'Outfit', 'Noto Sans JP', sans-serif;
	font-feature-settings: "palt";
	background-color: #fff;
}

body::before {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background: url('images/body_bg.jpg') no-repeat 50% 50% / cover;
}

body *, body *::before, body *::after {
	box-sizing: border-box;
}

.viewer {
	position: relative;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	background-color: #fff;
}

.visual {
	background: #ffde96 url('images/visual_bg.jpg?v=0.2') no-repeat 50% 0 / contain;
}

.visual .news {
	width: min(calc(840vw / 960 * 100), calc(840px * (750 / 960)));
	margin: 0 auto min(calc(60vw / 960 * 100), calc(60px * (750 / 960)));
	padding: min(calc(32vw / 960 * 100), calc(32px * (750 / 960))) min(calc(40vw / 960 * 100), calc(40px * (750 / 960)));
	border: min(calc(8vw / 960 * 100), calc(8px * (750 / 960))) solid #ff7300;
	border-radius: min(calc(40vw / 960 * 100), calc(40px * (750 / 960)));
	background-color: #fff;
}

.visual .news h2 {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: min(calc(32vw / 960 * 100), calc(32px * (750 / 960)));
	margin-bottom: min(calc(16vw / 960 * 100), calc(16px * (750 / 960)));
	color: #ff7300;
	font-size: min(calc(48vw / 960 * 100), calc(48px * (750 / 960)));
	font-weight: 700;
}

.visual .news h2::before,
.visual .news h2::after {
	content: '';
	flex-grow: 1;
	height: min(calc(6vw / 960 * 100), calc(6px * (750 / 960)));
	border-radius: min(calc(3vw / 960 * 100), calc(3px * (750 / 960)));
	background-color: #f8b62d;
}

.visual .news ul {
	display: flex;
	flex-direction: column;
	gap: min(calc(16vw / 960 * 100), calc(16px * (750 / 960)));
}

.visual .news ul li {
	display: flex;
	flex-wrap: wrap;
	gap: min(calc(8vw / 960 * 100), calc(8px * (750 / 960))) min(calc(16vw / 960 * 100), calc(16px * (750 / 960)));
	font-size: min(calc(32vw / 960 * 100), calc(32px * (750 / 960)));
}

.visual .news ul li .date {
	flex-shrink: 0;
	width: min(calc(176vw / 960 * 100), calc(176px * (750 / 960)));
	margin-top: 0.125em;
	color: #888;
}

.visual .news ul li .title {
	color: #ff6c00;
	width: min(calc(544vw / 960 * 100), calc(544px * (750 / 960)));
	transition: color 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}

.visual .news ul li .message {
	width: 100%;
	color: #444;
	font-size: min(calc(24vw / 960 * 100), calc(24px * (750 / 960)));
	line-height: 1.5;
}

.visual .news ul li a:hover {
	color: #c00;
}

.visual .nav {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: min(calc(48vw / 960 * 100), calc(48px * (750 / 960)));
	width: 100%;
}

.visual .nav .btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: min(calc(32vw / 960 * 100), calc(32px * (750 / 960)));
	width: min(calc(840vw / 960 * 100), calc(840px * (750 / 960)));
	height: min(calc(160vw / 960 * 100), calc(160px * (750 / 960)));
	border: min(calc(8vw / 960 * 100), calc(8px * (750 / 960))) solid #fff;
	border-radius: min(calc(80vw / 960 * 100), calc(80px * (750 / 960)));
	color: #fff;
	font-size: min(calc(64vw / 960 * 100), calc(64px * (750 / 960)));
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	background-color: #c00;
	background-image: linear-gradient(180deg, #f00 50%, #c00 50%);
	box-shadow: 0 0 min(calc(32vw / 960 * 100), calc(32px * (750 / 960))) #f90;
	transition: transform 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}

.visual .nav .btn::after {
	content: '';
	width: 0.75em;
	height: 0.75em;
	background-color: #fff;
	mask: url('images/icon_external.svg') no-repeat 50% 50% / contain;
}

.visual .nav .btn:hover {
	transform: scale(1.1);
}

.visual .nav .manual {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: min(calc(8vw / 960 * 100), calc(8px * (750 / 960)));
	color: #ff6c00;
	font-size: min(calc(40vw / 960 * 100), calc(40px * (750 / 960)));
	font-weight: 700;
	transition: color 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}

.visual .nav .manual::after {
	content: '';
	width: 0.75em;
	height: 0.75em;
	background-color: #ff6c00;
	mask: url('images/icon_external.svg') no-repeat 50% 50% / contain;
	transition: background-color 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}

.visual .nav .manual:hover {
	color: #c00;
}

.visual .nav .manual:hover::after {
	background-color: #c00;
}

.visual .introduction {
	position: relative;
	z-index: 1;
	margin-top: min(calc(-40vw / 960 * 100), calc(-40px * (750 / 960)));
}

.visual .introduction::before,
.visual .introduction::after {
	content: '';
	position: absolute;
	left: 0;
	z-index: 1;
	width: 100%;
}

.visual .introduction::before {
	bottom: 0;
	height: calc(100% - min(calc(280vw / 960 * 100), calc(280px * (750 / 960))));
	background: url('images/texture.png') repeat 50% 50%;
	clip-path: polygon(0 min(calc(160vw / 960 * 100), calc(160px * (750 / 960))),100% 0,100% 100%,0 100%);
}

.visual .introduction::after {
	top: min(calc(276vw / 960 * 100), calc(276px * (750 / 960)));
	height: min(calc(168vw / 960 * 100), calc(168px * (750 / 960)));
	background-color: #ff7300;
	clip-path: polygon(0 min(calc(160vw / 960 * 100), calc(160px * (750 / 960))),100% 0,100% min(calc(8vw / 960 * 100), calc(8px * (750 / 960))),0 100%);
}

.visual .introduction img {
	position: relative;
	z-index: 2;
}

.contents > * {
	background: url('images/contents_bg.jpg') no-repeat 50% 50% / cover;
}

.contents > *:not(:first-child) {
	border-top: min(calc(8vw / 960 * 100), calc(8px * (750 / 960))) solid #ff7300;
}

.cta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: min(calc(32vw / 960 * 100), calc(32px * (750 / 960)));
	padding: min(calc(40vw / 960 * 100), calc(40px * (750 / 960)));
	background-color: #ff7300;
	background-image: none !important;
}

.cta .shoulder {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: min(calc(8vw / 960 * 100), calc(8px * (750 / 960)));
	color: #fff;
	font-size: min(calc(40vw / 960 * 100), calc(40px * (750 / 960)));
	font-weight: 700;
	transition: color 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}

.cta .btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: min(calc(32vw / 960 * 100), calc(32px * (750 / 960)));
	width: min(calc(840vw / 960 * 100), calc(840px * (750 / 960)));
	height: min(calc(160vw / 960 * 100), calc(160px * (750 / 960)));
	border: min(calc(8vw / 960 * 100), calc(8px * (750 / 960))) solid #fff;
	border-radius: min(calc(80vw / 960 * 100), calc(80px * (750 / 960)));
	color: #fff;
	font-size: min(calc(56vw / 960 * 100), calc(56px * (750 / 960)));
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	background-color: #c00;
	background-image: linear-gradient(180deg, #f00 50%, #c00 50%);
	box-shadow: 0 0 min(calc(32vw / 960 * 100), calc(32px * (750 / 960))) #f90;
	transition: transform 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}

.cta .btn::after {
	content: '';
	width: 0.75em;
	height: 0.75em;
	background-color: #fff;
	mask: url('images/icon_external.svg') no-repeat 50% 50% / contain;
}

.cta .btn:hover {
	transform: scale(1.1);
}

.cta .btn.disabled {
	flex-direction: column;
	gap: 0;
	pointer-events: none;
	border-color: rgb(0 0 0 / .2);
	color: rgb(0 0 0 / .2);
	background-color: #ccc;
	background-image: none;
}

.cta .btn.disabled::after {
	display: none;
}

.cta .btn.disabled .notes {
	font-size: min(calc(40vw / 960 * 100), calc(40px * (750 / 960)));
}

.breaker {
	position: relative;
}

.breaker input[type=checkbox] {
	display: none;
}

.breaker label {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: min(calc(80vw / 960 * 100), calc(80px * (750 / 960)));
	background: linear-gradient(180deg,rgb(255 255 255 / 0) 0%,rgb(255 255 255 / 1) 60%);
	cursor: pointer;
	transition: opacity 0.5s cubic-bezier(0.2,1,0.2,1);
}

.breaker label button {
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: min(calc(4vw / 960 * 100), calc(4px * (750 / 960)));
	width: min(calc(96vw / 960 * 100), calc(96px * (750 / 960)));
	aspect-ratio: 1/1;
	padding: 0;
	border: 1px solid rgb(0 0 0 / 0.8);
	border-radius: 50%;
	color: #fff;
	font-size: min(calc(24vw / 960 * 100), calc(24px * (750 / 960)));
	font-weight: 700;
	background-color: rgb(0 0 0 / 0.6);
	transition: opacity 0.5s cubic-bezier(0.2,1,0.2,1);
}

.breaker label button::after {
	content: '';
	width: 0.75em;
	aspect-ratio: 4/3;
	background-color: #fff;
	clip-path: polygon(0 0,100% 0,50% 100%);
}

.breaker label:hover button {
	opacity: 0.6;
}

.breaker .content {
	max-height: min(calc(640vw / 960 * 100), calc(640px * (750 / 960)));
	overflow: hidden;
	transition: max-height 1s ease-in-out;
}

.breaker input[type=checkbox]:checked + label {
	opacity: 0;
	pointer-events: none;
}

.breaker input[type=checkbox]:checked + label + .content {
	max-height: min(calc(2220vw / 960 * 100), calc(2220px * (750 / 960)));
}

.faq {
	padding: min(calc(80vw / 960 * 100), calc(80px * (750 / 960))) min(calc(60vw / 960 * 100), calc(60px * (750 / 960)));
}

.faq .panel {
	padding: min(calc(40vw / 960 * 100), calc(40px * (750 / 960)));
	border-radius: min(calc(32vw / 960 * 100), calc(32px * (750 / 960)));
	background-color: #132178;
}

.faq .panel h2 {
	margin-bottom: min(calc(32vw / 960 * 100), calc(32px * (750 / 960)));
	padding-bottom: min(calc(24vw / 960 * 100), calc(24px * (750 / 960)));
	color: #fff;
	font-size: min(calc(48vw / 960 * 100), calc(48px * (750 / 960)));
	font-weight: 700;
	text-align: center;
	background-image: radial-gradient(circle, #fff min(calc(4vw / 960 * 100), calc(4px * (750 / 960))), transparent min(calc(4vw / 960 * 100), calc(4px * (750 / 960))));
	background-repeat: repeat-x;
	background-position: 0 100%;
	background-size: min(calc(20vw / 960 * 100), calc(20px * (750 / 960))) min(calc(8vw / 960 * 100), calc(8px * (750 / 960)));
}

.faq .panel ul {
	display: flex;
	flex-direction: column;
	gap: min(calc(32vw / 960 * 100), calc(32px * (750 / 960)));
}

.faq .panel ul li {
	display: flex;
	flex-direction: column;
	gap: min(calc(8vw / 960 * 100), calc(8px * (750 / 960)));
}

.faq .panel ul li input[type=checkbox] {
	display: none;
}

.faq .panel ul li label {
	display: flex;
	gap: min(calc(8vw / 960 * 100), calc(8px * (750 / 960)));
	color: #fff;
	font-size: min(calc(32vw / 960 * 100), calc(32px * (750 / 960)));
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
}

.faq .panel ul li label::after {
	content: '';
	align-self: center;
	flex-shrink: 0;
	width: min(calc(32vw / 960 * 100), calc(32px * (750 / 960)));
	aspect-ratio: 1/1;
	background-color: #fff;
	clip-path: polygon(calc(50% - 1px) 0,calc(50% + 1px) 0,calc(50% + 1px) calc(50% - 1px),100% calc(50% - 1px),100% calc(50% + 1px),calc(50% + 1px) calc(50% + 1px),calc(50% + 1px) 100%,calc(50% - 1px) 100%,calc(50% - 1px) calc(50% + 1px),0 calc(50% + 1px),0 calc(50% - 1px),calc(50% - 1px) calc(50% - 1px));
	transition: transform 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}

.faq .panel ul li label .question {
	flex-grow: 1;
}

.faq .panel ul li .answer {
	display: flex;
	gap: min(calc(8vw / 960 * 100), calc(8px * (750 / 960)));
	max-height: 0;
	overflow: hidden;
	color: #ffd22b;
	font-size: min(calc(28vw / 960 * 100), calc(28px * (750 / 960)));
	line-height: 1.75;
	transition: max-height 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}

.faq .panel ul li .icon {
	flex-shrink: 0;
	width: min(calc(64vw / 960 * 100), calc(64px * (750 / 960)));
	text-align: right;
}

.faq .panel ul li input[type=checkbox]:checked + label::after {
	transform: rotate(45deg);
}

.faq .panel ul li input[type=checkbox]:checked + label + .answer {
	max-height: 10em;
}

.contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: min(calc(8vw / 960 * 100), calc(8px * (750 / 960)));
	margin-top: min(calc(64vw / 960 * 100), calc(64px * (750 / 960)));
}

.contact p {
	color: #132178;
	font-size: min(calc(32vw / 960 * 100), calc(32px * (750 / 960)));
	font-weight: 700;
	text-align: center;
}

.contact a[href^="tel:"] {
	display: flex;
	align-items: center;
	gap: min(calc(16vw / 960 * 100), calc(16px * (750 / 960)));
	pointer-events: none;
	color: #132178;
	font-size: min(calc(72vw / 960 * 100), calc(72px * (750 / 960)));
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	letter-spacing: .1em;
}

.contact a[href^="tel:"]::before {
	content: '';
	width: .75em;
	aspect-ratio: 1/1;
	background-color: #132178;
	mask: url('images/icon_tel.svg') no-repeat 50% 50% / contain;
}

.contact p.notes {
	color: #4d4d4d;
	font-size: min(calc(24vw / 960 * 100), calc(24px * (750 / 960)));
	font-weight: 400;
	line-height: 1.75;
}

@media(max-width: 768px) {
	.contact a[href^="tel:"] {
		position: relative;
		pointer-events: all;
	}
	.contact a[href^="tel:"]::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: min(calc(4vw / 960 * 100), calc(4px * (750 / 960)));
		background-color: #132178;
	}
}

.footer {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: min(calc(16vw / 960 * 100), calc(16px * (750 / 960)));
	width: 100%;
	padding: min(calc(32vw / 480 * 100), calc(32px * (750 / 960)));
	color: #fff;
	font-size: min(calc(24vw / 960 * 100), calc(24px * (750 / 960)));
	text-align: center;
	background: url('images/texture.png') no-repeat 50% 50% / cover;
}

.footer a { color: #fff; }