/*-----------------------------------------------*/
/*-------------------- color --------------------*/
/*-----------------------------------------------*/
@white: #ffffff;
@black: #191919;
@l_black: #333333;
@gray: #c6c6c6;
@l_gray: #eeeeee;
@d_gray: #afafaf;
@dd_gray: #777777;
@red: #d85656;
@d_red: #a53a3a;
@yellow: #e5a82e;
@l_yellow: #ffe6b5;
@d_yellow: #bb8210;
@blue: #00539b;
@d_blue: #163b84;
@green: #59b559;
@l_green: #d2edd2;
@d_green: #287528;
@violet: #8243c4;
@d_violet: #58278c;
@sky: #5ec2d2;
@brown: #926834;
@l_pink: #fdc0c0;
@pink: #d34490;
@site: #1052d4;

/*----------------------------------------------*/
/*-------------------- font --------------------*/
/*----------------------------------------------*/
@font-face {
	font-family: 'oswald_medium';
	src: url('/fonts/Oswald-Medium.ttf');
}

@font-face {
	font-family: 'oswald_bold';
	src: url('/fonts/Oswald-Bold.ttf');
}

@font-face {
	font-family: 'Recoleta';
	src: url('/fonts/Recoleta-Regular.otf');
}


/*------------------------------------------------*/
/*-------------------- common --------------------*/
/*------------------------------------------------*/
html,
body {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	font-family: YuGothic, 'Yu Gothic', sans-serif;
	font-size: 14px;
	color: @black;
	background-color: @white;
	letter-spacing: 0.5px;
	box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}

a {
	font-size: 14px;
	color: @black;
	text-decoration: none;

	&:hover {
		text-decoration: none;
	}

	&:visited {
		color: inherit;
	}
}

img {
	vertical-align: bottom;
}

ul {
	margin: 0;
	padding: 0;

	li {
		list-style: none
	}
}

dl {
	margin: 0;

	dd {
		margin: 0;
	}
}

span.req {
	color: @red;
}

/*---------- デフォルトスタイルのリセット ----------*/
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
textarea {
	box-sizing: border-box;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

button {
	position: relative;
	border: none;
	border-radius: 0;
	cursor: pointer;
	overflow: hidden;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		/* height:100%; */
		background-color: @black;
		opacity: 0;
		transition: 0.3s;
	}

	&:hover:before {
		opacity: 0.3;
	}

	&:disabled:before {
		content: none;
	}
}

select {
	border: none;
	border-radius: 0;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 10px 20px 10px 10px;
	background-image: url('/img/select_cursor.png');
	background-position: center right 10px;
	background-repeat: no-repeat;
	background-size: 10px;
}

/*---------- disabled ----------*/
input:disabled,
textarea:disabled,
select:disabled {
	background-color: @gray;
}

/*---------- error ----------*/
.error {
	background-color: @l_pink  !important;
}

/*---------- scrollbar ----------*/
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: @gray;
}

::-webkit-scrollbar-thumb {
	background: @dd_gray;
	box-shadow: inset 0 0 0 1px @gray;
}

/*---------- loading ----------*/
.loading {
	display: none;

	&.active {
		display: block;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		/* z-index:9999; */

		span {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 100%;
			text-align: center;

			i {
				font-size: 50px;
				color: @white;
			}
		}
	}
}

/*---------- button-option ----------*/
button.red {
	color: @white;
	background-color: @red;
}

button.yellow {
	color: @white;
	background-color: @yellow;
}

button.green {
	color: @white;
	background-color: @green;
}

button.blue {
	color: @white;
	background-color: @blue;
}

button.violet {
	color: @white;
	background-color: @violet;
}

button.gray {
	color: @white;
	background-color: @d_gray;
}

button.site_color{
	color: @white;
	background-color: @site;
}

button.max {
	width: 100%;
}

/*---------- responsive ----------*/
@media(max-width:768px) {
	.pc {
		display: none !important;
	}
}

@media(min-width:769px) {
	.sp {
		display: none !important;
	}
}


header {
	background: @white;
	border-bottom: 1px solid #E2E8F0;
	height: 64px;

	.head_area {
		padding: 10px 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		box-sizing: border-box;

		.header_logo,
		.login_area {
			flex: 1;
		}

		.header_logo {
			img {
				width: 200px;
				height: 31px;
			}
		}

		a {
			font-size: 14px;
			color: #334155;
		}

		/* nav{
			ul{
				display:flex;
				justify-content:center;
				color:#0F172A;
				gap:30px;
			}
		} */

		.login_area {
			text-align: right;
		}
	}
}


footer {
	background: @white;
	border-top: 1px solid #E2E8F0;

	.footer_contents {
		/* padding:10px; */
		padding: 48px 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.footer_logo {
			color: @white;
			text-align: left;
		}

		.footer_nav {

			ul {
				display: flex;
				flex-direction: row;
				gap: 40px;
				justify-content: center;
				color: #64748B;

				li {
					a {
						font-size: 12px;
					}
				}
			}
		}

		p {
			font-size: 12px;
			color: #94A3B8;
			text-align: right;
		}

	}
}

.breadcrumb_inner {
	margin: 30px 0;
}

.breadcrumb {
	font-size: 14px;
	margin: 10px 0;

	span {
		margin: 0 6px;
		color: #999;
	}

	a {
		color: #666;
		text-decoration: none;
	}

	a:hover {
		text-decoration: underline;
	}
}


section {
	padding: 0 15px;
	margin: 50px 0;
}

.section_head {
	padding-bottom: 15px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 30px;

	h1 {
		font-size: 22px;
		text-align: center;
	}

	span {
		text-align: center;
		display: block;
		font-size: 12px;
		margin-top: 10px;
	}

	h1,
	span {
		color: #334156;
	}
}

.mv {
	padding: 0 30px;
	margin: 100px 0;

	.mv_inner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 48px;

		.mv_inner_left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.mv_content {
				h1 {
					font-size: 60px;
					line-height: 70px;
					color: #0F172A;

					span {
						color: #1152D4;
					}
				}

				p {
					font-size: 18px;
					margin-top: 24px;
					line-height: 29.3px;
					color: #475569;
				}
			}

		}

		.mv_inner_right {
			img {
				width: 100%;
			}
		}
	}
}

.section_area {
	text-align: center;
	margin-bottom: 64px;
	padding: 0 30px;

	span {
		font-size: 14px;
		color: #1152D4;
		display: block;
		font-weight: bold;
		line-height: 20px;
		letter-spacing: 1.4px;
	}

	h2 {
		margin: 12px 0;
		font-size: 35px;
		color: #0F172A;
	}

	p {
		color: #475569;
		font-size: 16px;
		line-height: 24px;
	}
}

.about {
	.about_content {
		margin-bottom: 64px;
	}

	.item_content {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;

		.item_card_content {
			padding: 30px;
			background: #F6F6F8;
			border-radius: 16px;
			text-align: left;

			.item_card_icon {
				background: #DFE6F4;
				width: 56px;
				height: 56px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 12px;

				i {
					color: #1152D4;
					font-size: 22px;
				}
			}

			h3 {
				margin: 24px 0 10px 0;
				font-size: 20px;
				color: #0F172A;
			}

			p {
				color: #475569;
				line-height: 22px;
				font-size: 14px;
			}
		}
	}
}

.plan {
	background: #F6F6F8;
	padding: 80px 0 160px;

	.plan_content {
		margin-bottom: 64px;
	}

	.plan_card_content {
		display: flex;
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
		justify-content: center;

		article {
			border: 1px solid #E2E8F0;
			padding: 30px;
			border-radius: 24px;
			text-align: left;
			max-width: 432px;
			width: 100%;
			background: @white;

			h3 {
				font-size: 18px;
				color: #0F172A;
				margin-bottom: 8px;
			}

			p {
				color: #64748B;
				font-size: 14px;
			}

			.price_area {
				display: flex;
				align-items: baseline;
				font-size: 14px;
				color: #0F172A;
				margin: 32px 0;
				line-height: 20px;

				.yen {
					color: #0F172A;
					font-size: 20px;
					line-height: 40px;
				}

				.price {
					color: #0F172A;
					font-size: 36px;
				}
			}

			ul {
				li {
					position: relative;
					padding-left: 32px;
					margin-bottom: 20px;
					line-height: 1.6;
					font-size: 14px;

				}

				li::before {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					width: 16px;
					height: 16px;
					border-radius: 50%;
					border: 2px solid #2F6FE4;
				}

				li::after {
					content: "";
					position: absolute;
					left: 7px;
					top: 4px;
					width: 4px;
					height: 9px;
					border-right: 2px solid #2F6FE4;
					border-bottom: 2px solid #2F6FE4;
					transform: rotate(45deg);
				}
			}

			a {
				width: 100%;
				padding: 12px;
				background: #FFF;
				border: 1px solid #1152D4;
				border-radius: 12px;
				color: #1152D4;
				font-size: 16px;
				font-weight: bold;
				display: block;
				text-align: center;
				box-sizing: border-box;
			}

			a:hover {
				color: #FFF;
				background: #1152D4;
			}
		}
	}

}

.material {
	margin: 50px 30px 108px;
	background: #1152D4;
	border-radius: 40px;
	padding: 64px;
	text-align: center;

	h2 {
		color: @white;
		font-size: 36px;
		line-height: 40px;
	}

	p {
		color: @white;
		font-size: 18px;
		margin: 24px 0 40px;
	}

	a {
		max-width: 260px;
		width: 100%;
		margin: 0 auto;
		display: block;
		padding: 16px;
		border-radius: 12px;
		color: #1152D4;
		font-weight: bold;
		background: @white;
	}

	a:hover {
		color: #FFF;
		background: #1152D4;
	}
}


/*サブページ*/
.legal {
	max-width: 900px;
	margin: 100px auto;
	color: #334156;

	.legal_text {
		>p {
			margin-bottom: 30px;
		}
	}

	.legal_content {
		line-height: 40px;
		margin-bottom: 50px;

		h1 {
			color: #0a54d5;
			font-size: 50px;
			text-align: center;
		}

		span {
			display: block;
			text-align: center;
			font-size: 14px;
		}
	}

	.legal_adjust {
		padding-left: 20px;
		margin: 1em 0 0;
	}
}

.regster {
	max-width: 500px;
	margin: 50px auto;
}

.form_container{

	dl {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-bottom: 15px;
		color: #334156;

		dt {
			font-weight: bold;
			font-size: 16px;
		}

		dd {

			input,
			textarea,
			select {
				width: 100%;
				padding: 10px;
				font-size: 16px;
				border: 1px solid #ccc;
				border-radius: 0;
				box-sizing: border-box;

			}

			input[type="date"],
			input[type="time"] {
				-webkit-appearance: none;
				appearance: none;
				padding: 8px;
				height: 40px;
				box-sizing: border-box;
			}

			textarea {
				resize: vertical;
			}

			.readonly {
				background: #eee;
			}
		}

		dd.radio_form {
			label {
				display: flex;
				flex-direction: row-reverse;
				justify-content: space-between;
				gap: 5px;
				align-items: center;
				margin-bottom: 15px;
				width: 130px;
				font-weight: normal;

				input[type="radio"] {
					margin: 0;
					width: 25px;
					height: 25px;
				}
			}

			label:last-child {
				margin-bottom: 0;
			}
		}
	}

	dl:last-child {
		margin-bottom: 0;
	}

	button {
		width: 100%;
		padding: 14px;
		font-size: 16px;
		color: @white;
		border: none;
		border-radius: 0;
		margin-top: 15px;
	}

	.form_actions{
		display:flex;
		gap:15px;
		align-items:center;
	}
}

.confirm{
	max-width: 500px;
	margin: 50px auto;
    padding-bottom: 50px;
}