@charset "utf-8";
/* MV */
.top-mv {
	position: relative;
	width: 100%;
	height: 100%;
}
.top-mv .top-mv-keyvisual img {
	margin-top: -2.8%;
}
.top-mv .top-mv-service {
	position: absolute;
	top: clamp(2.1875rem, -1.0454rem + 6.1947vw, 4.375rem);
	left: 5%;
	width: clamp(18.75rem, -4.8037rem + 45.1327vw, 34.6875rem);
}
.top-mv h1 {
	position: absolute;
	top: clamp(10rem, -2.9314rem + 24.7788vw, 18.75rem);
	left: 3%;
	font-size: clamp(1.75rem, -0.5592rem + 4.4248vw, 3.3125rem);
	color: #FFFCF1;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-shadow: -1px -1px 0 var(--title), 1px -1px 0 var(--title), -1px 1px 0 var(--title), 1px 1px 0 var(--title), 0 -1px 0 var(--title), -1px 0 0 var(--title), 1px 0 0 var(--title), 0 1px 0 var(--title), /* 同じ色のぼかし影（オプション） */
	0 0 5px var(--title);
}
.top-mv h1 .small-title {
	font-size: clamp(1.4375rem, -0.4098rem + 3.5398vw, 2.6875rem);
}
.top-mv h1 .mv-indent-title-1 {
	padding-left: clamp(5rem, -3.8673rem + 16.9912vw, 11rem);
}
.top-mv h1 .mv-indent-title-2 {
	padding-left: clamp(7.2rem, -6.5442rem + 26.3363vw, 16.5rem);
}
/* フローティングバナー */
.banner {
	position: fixed;
	right: 5%;
	top: clamp(11rem, -2.1842rem + 25.2632vw, 21.5rem);
	width: clamp(13rem, 1.7312rem + 21.5929vw, 20.625rem);
	height: auto;
	box-sizing: border-box;
	background: linear-gradient(#FFFCF1 0%, #DCFFD5 20%);
	border: solid 1px var(--text);
	z-index: 998;
}
.banner-inner::before {
	content: "";
	position: absolute;
	top: .4375rem;
	right: .4375rem;
	left: .4375rem;
	bottom: .4375rem;
	border: solid 1px #D2A730;
	z-index: 999;
}
.banner-inner .banner-content {
	position: relative;
}
.banner-blog-link {
	position: relative;
	display: flex;
	align-items: center;
	z-index: 1000;
}
.banner-blog-link img {
	width: clamp(3rem, 0.0442rem + 5.6637vw, 5rem);
	margin: .5rem;
}
.banner-blog-link p {
	margin-bottom: .5rem;
	font-size: clamp(0.875rem, -0.141rem + 1.9469vw, 1.5625rem);
	font-weight: 500;
	color: var(--title);
	text-decoration-line: underline;
	text-decoration-color: var(--title);
	text-decoration-style: solid;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}
.banner-blog-link p span {
	font-size: clamp(0.75rem, 0.0111rem + 1.4159vw, 1.25rem);
}
.banner-blog-link .banner-lines, .banner-blog-link .banner-lines::before, .banner-blog-link .banner-lines::after {
	content: '';
	position: absolute;
	top: clamp(1.4rem, -0.2257rem + 3.115vw, 2.5rem);
	right: 1.8rem;
	width: clamp(0.625rem, 0.3941rem + 0.4425vw, 0.78125rem);
	height: 1.5px;
	display: flex;
	background-color: var(--title);
	border-radius: .5rem;
	transform: rotate(-58.54deg);
}
.banner-blog-link .banner-lines::before {
	top: -10px;
	right: 2px;
	transform: rotate(140deg);
}
.banner-blog-link .banner-lines::after {
	top: 10px;
	right: 2px;
	transform: rotate(35deg);
}
.banner-blog-link .banner-lines div {
	width: 12px;
}
.banner-close {
	top: -1.3rem;
	right: -1.3rem;
	width: 2.5rem;
	height: 2.5rem;
	position: absolute;
	border: solid 1.8px #D2A730;
	border-radius: 50%;
	background: #FFFCF1;
	cursor: pointer;
	z-index: 1000;
}
.banner-close::before, .banner-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 17.4px;
	height: 1px;
	border-radius: 1rem;
	background-color: var(--title);
	transform-origin: center;
}
.banner-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.banner-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
/* ===================MainContents=================== */
.top-page-content {
	margin-top: clamp(-17rem, -.5rem + -18vw, -11rem);
	position: relative;
	z-index: 1;
}
#first-time-guide {
	position: absolute;
	top: -.5%;
	right: 5%;
	width: clamp(16.25rem, 0.5476rem + 30.0885vw, 26.875rem);
	padding: 0;
	z-index: 2;
}
.clipped-area {
	background: #FFFCF1;
	-webkit-clip-path: polygon(0 1.8%, 50% 0, 100% 1.8%, 100% 100%, 0 100%);
	clip-path: polygon(0 1.8%, 50% 0, 100% 1.8%, 100% 100%, 0 100%);
}
/* News */
#News {
	padding-top: 9.375rem;
}
#News .border-style {
	margin-left: 5rem;
}
.top-news-list {
	margin-top: 1.25rem;
}
/* Greeting */
#Greeting {
	display: flex;
	gap: clamp(1.5rem, -3.2183rem + 9.0411vw, 3.5625rem);
}
.top-greeting-inner img {
	width: clamp(25rem, -4.1678rem + 55.8904vw, 37.75rem);
	margin-top: 1.25rem;
}
.top-greeting-text {
	line-height: clamp(1.8rem, 0.1986rem + 3.0685vw, 2.5rem);
}
/* Advantage */
#Advantage .border-style {
	margin-left: 8rem;
}
.top-adv-inner {
	display: flex;
	margin: 2.8125rem 0 2.5rem;
	gap: clamp(1.875rem, -2.4144rem + 8.2192vw, 3.75rem);
}
.top-adv-img img {
	width: clamp(22rem, 9.1318rem + 24.6575vw, 27.625rem);
	-o-object-fit: cover;
	object-fit: cover;
}
.top-adv-feature {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(1.875rem, 0.4452rem + 2.7397vw, 2.5rem);
	font-size: 1.5625rem;
	font-weight: 500;
}
.top-adv-feature h3 {
	font-size: 1.5625rem;
	font-weight: 500;
	color: var(--title);
	text-decoration-line: underline;
	text-decoration-color: var(--title);
	text-decoration-style: solid;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}
.top-adv-feature ol {
	counter-reset: item;
}
.top-adv-feature ol li {
	counter-increment: item;
	position: relative;
	padding-left: 2.6rem;
}
.top-adv-feature ol li:not(:last-child) {
	margin-bottom: clamp(1.25rem, 0.2491rem + 1.9178vw, 1.6875rem);
}
.top-adv-feature ol li::before {
	content: counter(item) ".";
	position: absolute;
	left: 0;
	font-size: 2.25rem;
	font-weight: 400;
	color: var(--title);
	line-height: 1;
}
.top-adv-feature ol li strong {
	text-decoration-line: underline;
	text-decoration-color: var(--text);
	text-decoration-style: dotted;
	text-decoration-thickness: 3px;
	text-underline-offset: .5rem;
}
.top-adv-text {
	font-size: 1rem;
	font-weight: 500;
	line-height: clamp(1.8rem, 0.8849rem + 1.7534vw, 2.2rem);
}
/* Services */
#Services {
	padding-right: 0;
}
.top-service-content {
	display: flex;
	margin-top: 2.5rem;
	gap: 1.5rem;
}
.top-service-title {
	width: 4.25rem;
	height: 19.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	background: white;
	border: 1px solid #D2A730;
}
.top-service-title h3 {
	font-size: 1.875rem;
	font-weight: 500;
}
.top-service-list {
	padding-right: 2rem;
	overflow-x: auto;
	cursor: -webkit-grab;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
}
.top-service-list:active {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}
.top-service-list::-webkit-scrollbar {
	height: 10px;
}
.top-service-list::-webkit-scrollbar-track {
	background: white;
	/* スクロールバー背景 */
}
.top-service-list::-webkit-scrollbar-thumb {
	background: var(--text);
	border-radius: .5rem;
	border: 2px solid white;
	/* trackとの隙間を作る */
}
.top-service-inner {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	width: -webkit-max-content;
	width: -moz-max-content;
}
.top-service-grid {
	margin-bottom: 1.5rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, auto);
	gap: 2.1875rem 1rem;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
}
.top-service-grid a {
	display: inline-block;
	text-decoration: none;
	color: inherit;
}
.top-service-link {
	position: relative;
	display: inline-block;
	overflow: hidden;
}
.top-service-link::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: white;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.top-service-grid a:hover .top-service-link::after {
	opacity: 0.4;
}
.top-service-grid p {
	margin-top: .5rem;
	font-size: 1.125rem;
	font-weight: 700;
	text-align: center;
	color: var(--text);
}
.top-service-grid .top-service-arrow {
	width: .9375rem;
	height: 1px;
	margin: .35rem .5rem;
	position: relative;
	display: inline-block;
	border-radius: 9999px;
	background-color: var(--text);
}
.top-service-grid .top-service-arrow::before, .top-service-grid .top-service-arrow::after {
	right: 0;
	width: 6px;
	height: 1px;
	content: "";
	position: absolute;
	border-radius: 9999px;
	background-color: var(--text);
	transform-origin: calc(100% - 0.5px) 50%;
}
.top-service-grid .top-service-arrow::before {
	transform: rotate(45deg);
}
.top-service-grid .top-service-arrow::after {
	transform: rotate(-45deg);
}
@media (max-width: 1300px) {
	.clipped-area {
		-webkit-clip-path: polygon(0 1.4%, 50% 0, 100% 1.4%, 100% 100%, 0 100%);
		clip-path: polygon(0 1.4%, 50% 0, 100% 1.4%, 100% 100%, 0 100%);
	}
}
@media (max-width: 834px) {
	/* MV */
	.top-mv .top-mv-keyvisual img {
		margin-top: 0;
	}
	.top-mv .top-mv-service {
		top: 10px;
		left: 50%;
		transform: translateX(-50%);
		width: clamp(16.8125rem, -1.0045rem + 67.8744vw, 34.375rem);
	}
	.top-mv h1 {
		top: auto;
		bottom: clamp(7rem, 3.9565rem + 11.5942vw, 10rem);
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		font-size: clamp(1.5rem, -0.1705rem + 6.682vw, 3.3125rem);
		text-align: center;
	}
	.top-mv h1 .mv-spacing-title {
		letter-spacing: 0;
	}
	.top-mv h1 .mv-spacing-title-2 {
		letter-spacing: -.5em;
	}
	.top-mv h1 .small-title {
		font-size: clamp(1.375rem, 0.0435rem + 5.0725vw, 2.6875rem);
	}
	.top-mv h1 .mv-indent-title-1, .top-mv h1 .mv-indent-title-2 {
		padding-left: 0;
	}
	/* フローティングバナー */
	.banner {
		top: clamp(17rem, 75vw, 25rem);
		width: clamp(11.25rem, 2.3732rem + 33.8164vw, 20rem);
	}
	.banner-inner::before {
		top: .25rem;
		right: .25rem;
		left: .25rem;
		bottom: .25rem;
	}
	.banner-blog-link img {
		width: clamp(3rem, 0.971rem + 7.7295vw, 5rem);
		margin: .5rem clamp(0rem, -0.5072rem + 1.9324vw, 0.5rem);
	}
	.banner-blog-link p {
		font-size: clamp(0.875rem, 0.1775rem + 2.657vw, 1.5625rem);
	}
	.banner-blog-link p span {
		font-size: clamp(0.75rem, 0.2428rem + 1.9324vw, 1.25rem);
		width: clamp(0.5625rem, 0.4991rem + 0.2415vw, 0.625rem);
	}
	.banner-blog-link .banner-lines {
		top: clamp(1.5rem, 0.4855rem + 3.8647vw, 2.5rem);
		right: clamp(0.8rem, -0.2145rem + 3.8647vw, 1.8rem);
	}
	.banner-blog-link .banner-lines::before {
		top: -7px;
	}
	.banner-blog-link .banner-lines::after {
		top: 7px;
	}
	.banner-close {
		top: -1rem;
		right: -1rem;
		width: clamp(1.875rem, 1.5453rem + 1.256vw, 2.2rem);
		height: clamp(1.875rem, 1.5453rem + 1.256vw, 2.2rem);
	}
	.banner-close::before, .banner-close::after {
		width: 15px;
	}
	/* ===================MainContents=================== */
	.top-page-content {
		margin-top: -6.5rem;
	}
	#first-time-guide {
		top: .2%;
		right: 50%;
		transform: translateX(50%);
		width: 100%;
		max-width: 43.75rem;
		padding: 0 2.0625rem;
	}
	.clipped-area {
		-webkit-clip-path: polygon(0 1%, 50% 0, 100% 1%, 100% 100%, 0 100%);
		clip-path: polygon(0 1%, 50% 0, 100% 1%, 100% 100%, 0 100%);
	}
	/* News */
	#News {
		padding-top: 50%;
	}
	#News .border-style {
		width: calc(100% - clamp(3rem, 0.971rem + 7.7295vw, 5rem));
		margin-left: clamp(3rem, 0.971rem + 7.7295vw, 5rem);
	}
	.top-news-list {
		margin-top: 1rem;
	}
	/* Greeting */
	#Greeting {
		flex-direction: column;
		gap: clamp(1.5rem, -3.2183rem + 9.0411vw, 3.5625rem);
	}
	.top-greeting-inner img {
		width: 100%;
		margin-top: 1.25rem;
	}
	.top-greeting-text {
		font-size: clamp(0.875rem, 0.7482rem + 0.4831vw, 1rem);
		line-height: 2rem;
	}
	.top-greeting-text .bold {
		font-weight: 500;
	}
	/* Advantage */
	#Advantage .border-style {
		width: calc(100% - clamp(6.5rem, 4.471rem + 7.7295vw, 8.5rem));
		margin-left: clamp(6.5rem, 4.471rem + 7.7295vw, 8.5rem);
	}
	.top-adv-inner {
		margin: .9375rem 0 1.25rem;
		flex-direction: column;
		gap: 1.25rem;
	}
	.top-adv-img img {
		width: 100%;
	}
	.top-adv-feature {
		gap: clamp(1.25rem, 0.6159rem + 2.4155vw, 1.875rem);
		font-size: clamp(1.25rem, 0.933rem + 1.2077vw, 1.5625rem);
	}
	.top-adv-feature h3 {
		font-size: clamp(1.25rem, 0.933rem + 1.2077vw, 1.5625rem);
	}
	.top-adv-feature ol li {
		padding-left: clamp(1.5rem, 0.4855rem + 3.8647vw, 2.5rem);
	}
	.top-adv-feature ol li:not(:last-child) {
		margin-bottom: clamp(0.9375rem, 0.6205rem + 1.2077vw, 1.25rem);
	}
	.top-adv-feature ol li::before {
		font-size: clamp(1.25rem, 0.933rem + 1.2077vw, 1.5625rem);
		line-height: normal;
	}
	.top-adv-feature ol li strong {
		text-decoration-line: underline;
		text-decoration-color: var(--text);
		text-decoration-style: dotted;
		text-decoration-thickness: 2px;
		text-underline-offset: .3rem;
	}
	.top-adv-text {
		line-height: 2rem;
	}
	/* Services */
	#Services .border {
		margin-right: 1.5625rem;
	}
	.top-service-content {
		margin-top: clamp(1rem, -0.5217rem + 5.7971vw, 2.5rem);
		gap: clamp(1.25rem, 0.9964rem + 0.9662vw, 1.5rem);
	}
	.top-service-title {
		width: clamp(2.1875rem, 0.0951rem + 7.971vw, 4.25rem);
		height: clamp(9.375rem, -0.8967rem + 39.1304vw, 19.5rem);
	}
	.top-service-title h3 {
		font-size: clamp(0.9375rem, -0.0136rem + 3.6232vw, 1.875rem);
	}
	.top-service-list {
		padding-right: 1.5625rem;
	}
	.top-service-grid {
		margin-bottom: 1rem;
		gap: 1rem .625rem;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
	}
	.top-service-grid img {
		width: 9.375rem;
	}
	.top-service-grid p {
		margin-top: .3rem;
		font-size: .8125rem;
	}
	.top-service-grid .top-service-arrow {
		width: .625rem;
		margin: .35rem .3125rem;
	}
}
@media(max-width:834px) and (min-width:710px) {
	#News {
		padding-top: 21rem;
	}
}
@media(max-width:834px) and (min-width:600px) {
	.clipped-area {
		-webkit-clip-path: polygon(0 .8%, 50% 0, 100% .8%, 100% 100%, 0 100%);
		clip-path: polygon(0 .8%, 50% 0, 100% .8%, 100% 100%, 0 100%);
	}
}