@charset "UTF-8";

/* ---------------------------------------------------------
	CSS Document point
--------------------------------------------------------- */

#point {
	margin: 0 5vw 10vw;
}

#point .text {
	margin-bottom: 5vw;
}

#point .text img {
	height: 40vw;
}

#point .flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#point .flex .section {
	width: 47%;
	margin-bottom: 7vw;
	line-height: 1.6;
}

#point .flex figure {
	margin-bottom: 0.5em;
	border-radius: 5px;
	box-shadow: 0 0 0 2px #291c14 inset;
	transform: scale(0.8, 0.8);
	transform-origin: bottom right;
	transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) ;
}

#point .flex.active figure {
	transform: scale(1, 1);
}

#point .flex figure img {
	height: 53.9024154589372vw;
}

#point .flex .section:nth-of-type(2) figure {
	transition-delay: 0.3s;
}

/* ---------------------------------------------------------
	CSS Document trouble
--------------------------------------------------------- */

#trouble {
	margin: 0 5vw 10vw;
}

#trouble h2 {
	margin-bottom: 5vw;
}

#trouble h2 img {
	height: 19vw;
}

#trouble ul li {
	margin-top: -5vw;
	position: relative;
	z-index: 5;
}

#trouble ul li:nth-of-type(odd) {
	text-align: left;
}

#trouble ul li:nth-of-type(even) {
	text-align: right;
}

#trouble ul li:nth-of-type(1) img {
	height: 36.23384615384615vw;
}

#trouble ul li:nth-of-type(2) {
	z-index: 4;
}

#trouble ul li:nth-of-type(2) img {
	height: 25.73717948717949vw;
}

#trouble ul li:nth-of-type(3) {
	z-index: 3;
}

#trouble ul li:nth-of-type(3) img {
	height: 35.67307692307692vw;
}

#trouble ul li:nth-of-type(4) {
	z-index: 2;
}

#trouble ul li:nth-of-type(4) img {
	height: 36.16179487179487vw;
}

#trouble ul li:nth-of-type(5) {
	z-index: 1;
}

#trouble ul li:nth-of-type(5) img {
	height: 26.74666666666667vw;
}

#trouble figure {
	margin-top: -5vw;
}

#trouble figure img {
	height: 40vw;
}

/* ---------------------------------------------------------
	CSS Document reason
--------------------------------------------------------- */

#reason {
	margin: 0 5vw 15vw;
}

#reason h2 {
	margin-bottom: 8vw;
}

#reason h2 img {
	height: 18vw;
}

#reason figure {
	margin-bottom: 5vw;
}

#reason figure img {
	height: 38vw;
}

#reason ul li {
	margin-bottom: 3vw;
}

#reason ul li:nth-of-type(odd) {
	text-align: left;
}

#reason ul li:nth-of-type(even) {
	text-align: right;
}

#reason ul li:nth-of-type(1) img {
	height: 26.83102564102564vw;
}

#reason ul li:nth-of-type(2) img {
	height: 25.50871794871795vw;
}

#reason ul li:nth-of-type(3) img {
	height: 24.97205128205128vw;
}

#reason ul li:nth-of-type(4) img {
	height: 29.55538461538462vw;
}

#reason ul li:nth-of-type(5) {
	margin-top: -5vw;
}

#reason ul li:nth-of-type(5) img {
	height: 25.23641025641026vw;
}

#reason ul li:nth-of-type(6) img {
	height: 31.94307692307692vw;
}

/* ---------------------------------------------------------
	CSS Document case
--------------------------------------------------------- */

#case {
	margin: 0 5vw 20vw;
}

#case h2 {
	margin-bottom: 5vw;
}

#case h2 img {
	height: 10vw;
}

#case li {
	margin-bottom: 5vw;
}

#case li img {
	height: 82.72025641025641vw;
}

/* ---------------------------------------------------------
	CSS Document price
--------------------------------------------------------- */

#price {
	margin-bottom: 20vw;
	padding: 10vw 5vw;
	background: #fff100;
}

#price h2 {
	margin-bottom: 10vw;
	padding: 10vw 0 5vw;
	border: solid 3vw #fff;
}

#price h2 img {
	height: 66vw;
}

#price dt {
	margin-bottom: 5vw;
}

#price dt img {
	height: 30vw;
}

#price dd {
	margin-bottom: 20vw;
	padding: 10px 0;
	border-radius: 5px;
	background: #e60012;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	transform: perspective(1px) translateZ(0);
	position: relative;
}

#price dd:before {
	content: '';
	border-radius: 10px;
	border: solid 10px #e60012;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-name: ripple;
}

#price dd img {
	height: 10vw;
}

@keyframes ripple {
	0% {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0;
	}
	70% {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 1;
	}
	100% {
		top: -12px;
		right: -12px;
		bottom: -12px;
		left: -12px;
		opacity: 0;
	}
}

#price .contact_btn a {
	background: #fff;
	color: #e60012;
}

#price .outline {
	margin-bottom: 20vw;
}

#price .outline h3 {
	margin-bottom: 5vw;
}

#price .outline h3 img {
	height: 9vw;
}

#price .outline li {
	margin-bottom: 10px;
	background: #e60012;
	line-height: 3em;
	color: #fff;
}

#price .option {
	margin-bottom: 10vw;
}

#price .option h3 {
	padding-bottom: 10px;
	border-bottom: solid 3px #e60012;
	text-align: right;
}

#price .option h3 img {
	height: 7vw;
}

#price .option ul {
	padding: 7vw;
	padding-left: 10vw;
	border-left: dashed 10px #e60012;
	text-align: left;
	line-height: 2.3;
}

#price .option figure img {
	height: 130vw;
}

#price .option figure {
	position: relative;
	left: 110vw;
	transition: .5s;
}

#price .option figure.active {
	left: 0;
}

/* ---------------------------------------------------------
	CSS Document flow
--------------------------------------------------------- */

#flow {
	margin: 0 5vw 20vw;
}

#flow h2 {
	margin-bottom: 5vw;
}

#flow h2 img {
	height: 10vw;
}

#flow dl {
	margin-bottom: 53px;
	padding: 5vw;
	border: solid 4px #f5cd3b;
	text-align: justify;
	position: relative;
}

#flow dl:after,
#flow dl:before {
	content: '';
	width: 0;
	height: 0;
	margin-left: -10px;
	border: solid 10px transparent;
	border-top: solid 16px #291c14;
	position: absolute;
	bottom: -60px;
	left: 50%;
}

#flow dl:before {
	bottom: -40px;
}

#flow dl:last-of-type:after,
#flow dl:last-of-type:before {
	display: none;
}

#flow dt {
	margin-bottom: 0.8em;
	font-weight: 800;
	font-size: 4vw;
	line-height: 1.3;
}

#flow dd a {
	color: #e60012;
}

/* ---------------------------------------------------------
	CSS Document story
--------------------------------------------------------- */

#story {
	margin-top: 30vw;
	margin-bottom: 20vw;
}

#story h2 {
	margin-bottom: 5vw;
}

#story h2 img {
	height: 8.36538461538462vw;
}

#story .container {
	margin-bottom: 20vw;
}

#story h3 {
	margin: 0 0 5vw 5vw;
	padding: 3vw 5vw;
	background: linear-gradient(to right, #e60012 0%, #fff 100%);
	text-align: left;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-size: 3.5vw;
	letter-spacing: 0.05em;
	line-height: 1.5;
	color: #e60012;
	position: relative;
	z-index: 0;
}

#story h3:before {
	content: '';
	width: 100%;
	height: 90%;
	background: #fff;
	position: absolute;
	top: 5%;
	left: 1%;
	z-index: -1;
}

#story .section {
	margin: 0 5vw 5vw;
	text-align: justify;
}

#story .copy {
	margin-bottom: 20px;
	font-weight: 800;
	font-size: 4vw;
	line-height: 1.5;
}

#story strong {
	font-weight: 800;
}

#story .name {
	margin-top: 5vw;
	text-align: center;
	letter-spacing: 0.1em;
}

#story .name span {
	font-size: 4.5vw;
}

#story figure {
	text-align: center;
}

#story figure img {
	height: 80vw;
}

/* ---------------------------------------------------------
	CSS Document contact
--------------------------------------------------------- */

#contact {
	margin: 0 5vw 30vw;
	padding-top: 10vw;
}

#contact .contact_header {
	height: 22vw;
	margin: 0 5vw 10vw;
}

#contact .contact_header h1 {
	margin-bottom: 15px;
	font-weight: 400;
	font-size: 5vw;
	line-height: 1;
}

#contact h2 {
	margin-bottom: 5vw;
	font-weight: 800;
	font-size: 8vw;
	line-height: 1;
	color: #e60012;
}

#contact .em,
#contact em {
	color: #e60012;
}

#contact .notice {
	margin-bottom: 2em;
}

#contact .complete {
	margin-bottom: 3em;
}

#contact .table {
	display: table;
	width: 100%;
	margin-bottom: 3vw;
	text-align: left;
	line-height: 1.5;
	position: relative;
}

#contact .table:before {
	content: '';
	width: 100%;
	height: 1px;
	background-image: linear-gradient(90deg, transparent 0%, transparent 80%, #525656 80%, #525656 100%, transparent);
	background-size: 3px 1px;
	position: absolute;
	top: 0;
	left: 0;
}

#contact dl {
	padding: 5vw 0;
	position: relative;
}

#contact dl:not(:last-of-type):after {
	content: '';
	width: 100%;
	height: 1px;
	background-image: linear-gradient(90deg, transparent 0%, transparent 80%, #525656 80%, #525656 100%, transparent);
	background-size: 3px 1px;
	position: absolute;
	bottom: 0;
	left: 0;
}

#contact dt {
	margin-bottom: 10px;
	font-weight: 800;
	line-height: 18px;
}

#contact dt em {
	display: inline-block;
	vertical-align: top;
	width: 2.5em;
	height: 19px;
	margin-left: 0.5em;
	background: #e60012;
	text-align: center;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.05em;
	line-height: 18px;
	color: #fff;
}

#contact dd {
}

#contact dd p {
	margin-top: 10px;
}

#contact dd label {
	display: inline-block;
	vertical-align: middle;
	line-height: 40px;
}

#contact dd label:not(:last-of-type) {
	margin-right: 2.5em;
}

#contact .note {
	margin-top: 7vw;
	font-size: 3.2vw;
}

/* ---------------------------------------------------------
	CSS Document input
--------------------------------------------------------- */

input, textarea, select, button {
	outline: 0;
	margin: 0;
	padding: 0;
	border-radius: 0;
	border: 0;
	box-shadow: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 3.5vw;
	color: #291c14;
}

::-webkit-input-placeholder {
	color: #c8c8c8;
}

::-moz-placeholder {
	opacity: 1;
	color: #c8c8c8;
}

:-ms-input-placeholder {
	color: #c8c8c8;
}

#contact input[type='url'],
#contact input[type='tel'],
#contact input[type='email'],
#contact input[type='text'],
#contact select,
#contact textarea {
	padding: 0 0.8em;
	border-radius: 3px;
	border: solid 1px #d5d5d5;
	background: #fff;
	box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.08) inset;
	letter-spacing: 0.05em;
}

#contact select,
#contact input[type='url'],
#contact input[type='tel'],
#contact input[type='email'],
#contact input[type='text']{
	height: 3em;
}

#contact input[type='radio'] {
	vertical-align: -4px;
	width: 20px;
	height: 20px;
	margin: 0 0.2em 0 0;
	padding: 0;
}

#contact textarea {
	vertical-align: top;
	width: 100%;
	padding: 0.8em;
}

#contact select {
	padding: 0 0 0 0.5em;
}

#contact .err {
	box-shadow: 0 0 3px 0 #f00 !important;
}

#contact .w320,
#contact .w620 {
	width: 100%;
}

#contact .submit {
	display: flex;
	justify-content: center;
}

#contact .submit li {
	width: 48%;
}

#contact .submit li.send {
	margin-left: 4%;
}

#contact .submit button {
	vertical-align: top;
	width: 100%;
	height: 3.5em;
	background: #e60012;
	box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
	text-align: center;
	text-decoration: none;
	font-weight: 500;
	font-size: 4.5vw;
	letter-spacing: 0.05em;
	color: #fff;
}

#contact .submit .back button {
	background: #bbb;
}

/* ---------------------------------------------------------
	CSS Document footer
--------------------------------------------------------- */

#footer .logo {
	height: 22vw;
	margin: 0 5vw 10vw;
	font-size: 5vw;
	line-height: 1;
}

#footer .logo p {
	margin-bottom: 15px;
}

#footer .company {
	margin-bottom: 8vw;
	letter-spacing: 0.05em;
	line-height: 1.5;
}

#footer .company figure {
	margin-bottom: 3vw;
}

#footer .company img {
	height: 10vw;
}

#footer .copy {
	padding: 10vw 0 8vw;
	background: #fff100;
	font-size: 0;
}

#footer .copy img {
	height: 10vw;
}