@charset "utf-8";

:root {
	--dark: #444;
	--primary: #FF6440;
	--cream: #F6F9FF;
	--white: #fff;
	--blue : #08037E;
	--charcoal: #1A1F1C;
	--accent: #ff0000;/*#F14117*/
	--shadow: rgba(0, 0, 0, 0.08);
}

* {
	box-sizing: border-box;
}
html {
	scroll-padding-top: 80px;
}
body { 
	font-family: 'DM Sans', 'Inter', 'Noto Sans JP', sans-serif; 
	color: var(--dark);
	background-color: var(--white);
	font-weight: 300;
	font-size:1.25rem;
	line-height:1.75rem;
	margin:0;
	padding:0；
}

section {
	padding-top: 5.6em;
	padding-bottom: 5.6rem;
}
h2 {
	font-size:2.8rem;
	line-height:1.25;
	letter-spacing: -0.02em;
	margin-bottom:1.4em;
	font-weight: 500;
}
h3 {
	font-size:2.0rem;
	line-height:2.5rem;
	font-weight: 400;
}
.inner {
	width:100%;
	max-width:1280px;
	margin:0 auto;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
}
.bg-blue {
	background:linear-gradient(180deg, var(--cream) 50%, #fefefe 100%);
}
.bg-gray {
	background:#fefefe;
}
p {
	margin:0.8em 0;
}

.text-lg{
	font-size:1.25rem;
	line-height:1.75rem
}
.text-md{
	font-size:1.05rem;
}
.text-sm{
	font-size:.875rem;
	line-height:1.25rem;
}
.red {
	color:var(--accent);
}
.orange {
	color:var(--primary);
}
.blue {
	color:var(--blue);
}
.text-center {
	text-align:center;
}
.text-shadow {
	text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.flex {
	display:flex;
	gap:25px;
}
.grid-2 {
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap:30px;
}
.grid-3 {
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:30px;
}
.grid-4 {
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	gap:20px;
}
.card {
		padding:1.5em 1.5em;
		background:var(--white);
		border-radius:16px;
		box-shadow:0px 6px 28px var(--shadow);
}
.card-2 {
		padding:1.5em 4.0em 0;
		background:var(--white);
		border-radius:16px;
		box-shadow:0px 6px 28px var(--shadow);
}
/*--list style--*/
.list-check li {
	margin-top:0.5em;
	text-indent:-1.2em;
	padding-left:1.2em;
	&::before {
	content:"✓";
	color:var(--accent);
	font-size:.875rem;
	margin-right:0.8em;
	}
}
.mark-red {
	list-style:inside disc;
	margin-left:0.5em;
	li {
		margin-top:0.5em;
		text-indent:-1.2em;
		padding-left:1.2em;
	}
}
.mark-red li::marker {
	color:var(--primary);
}

/*--button--*/
.button01 {
	background: linear-gradient(135deg, var(--primary), #F14117);
	color: var(--white);
	border-radius: 12px;
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	text-decoration: none;
	padding:0.6em 2.0em;
}
.button01:hover {
	background: linear-gradient(135deg, #F14117, var(--primary));
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	color: var(--white);
}
.button02 {
	border-radius: 12px;
	font-weight: 600;
	color:#F14117;
	transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
	border: 2px solid var(--primary);
	cursor: pointer;
/*	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
	text-decoration: none;
	padding:0.6em 2.0em;
}
.button02:hover {
	background:var(--primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	color: var(--white);
}
.link-back {
	margin-top:2.0em;
	text-decoration:underline;
	cursor:pointer;
	color:#555;
	font-weight:300;
	i {
		margin-right:0.4em;
		color:#777;
	}
}
.link-back:hover {
	text-decoration:none;
}
.fade-in {
	 animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}

/*--header--*/
	header {
		width:100%;
		position:sticky;
		top:0;
	padding:20px 0;
	margin:0;
		background:var(--white);
		box-shadow: 
                0 10px 15px -3px rgba(0,0,0,0.08),
                0 4px 6px -2px rgba(0,0,0,0.05);
		z-index:999;
		.inner {
			display:flex;
			justify-content:space-between;
			align-items:center;
			h1 {
				width:280px;
				img {
					width:auto;
				}
			}
			.button01 {
				font-size:1.0rem;
			}
		}
}

/*--footer--*/
footer {
	background:var(--dark);
	color:#eee;
	font-size:.875rem;
	line-height:1.25rem;
	.inner {
		padding-top: 5.6em;
		padding-bottom: 2.0rem;
			h5 {
				font-size:1.25rem;
				font-weight:500;
				margin-bottom:1.5em;
				color:var(--white);
			}
			li {
				margin-top:1.0em;
				i {
					margin-left:0.5em;
					font-size:.75rem;
				}
			}
			a {
				text-decoration:underline;
			}
			a:hover {
				text-decoration:none;
			}
		.copy {
			text-align:center;
			border-top:1px solid #777;
			margin-top:4.0em;
			padding:4.0em 0 0;
		}
	}
}
/*--sub pages--*/
.sub {
	section {
		section {
		padding-top:2.0em;
		padding-bottom:2.0em;
		h3 {
			margin-bottom:1.0em;
		}
		h4 {
			margin-top:2.0em;
			margin-bottom:0.5em;
			font-weight:600;
			font-size:1.4rem;
		}
	}
}
}

@media (max-width: 1024px) {
section {
	padding-bottom: 6rem;
}
.inner {
	max-width:100%;
	padding-left: 2rem;
	padding-right: 2rem;
}
.grid-2 {
	gap:2rem;
}
.grid-3 {
	grid-template-columns: repeat(1, 1fr);
	gap:2rem;
}
/*--header--*/
	header {
		padding:1.0em 0;
		.inner{
		h1 {
			width:25%;
		}
		.button01 {
			width:auto;
			padding:0.75em 2.0em;
		}
	}
	}

}

@media (max-width: 768px) {
section {
	padding-top: 5rem;
	padding-bottom: 5rem;
}
.inner {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
h2 {
	font-size:2.4rem;
	line-height:2.8rem;
}
h3 {
	font-size:1.875rem;
	line-height:2.25rem;
}
.flex {
	flex-flow: column;
}
.grid-2 {
	grid-template-columns: repeat(1, 1fr);
	gap:2rem;
}
.grid-4 {
	grid-template-columns: repeat(1, 1fr);
	gap:2rem;
}
.card {
		padding:1.5em 1.0em;
}
.card-2 {
		padding:1.5em 1.0em 0;

}
.button01 {
	padding:0.6em 1.0em;
}

/*--header--*/
	header {
		.inner{
		h1 {
			width:44%;
		}
		.button01 {
			font-size:.875rem;
			line-height:1.25rem;
			padding:1.0em 1.8em;
		}
	}
}

}