@charset "utf-8";





.justify-center {
	justify-content: center;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-between {
	justify-content: space-between;
}

.justify-around {
	justify-content: space-around;
}
.align-top {
	align-items: flex-start;
}

.align-middle {
	align-items: center;
}

.align-bottom {
	align-items: flex-end;
}

.flex-split {
	display: flex;
	gap: 1rem;
}

.flex-split-main,
.flex-split-sub {
	display: block;
	min-width: 0;
}

.flex-split-sub {
	white-space: nowrap;
}

/* 比率（flex-grow比 / basis:0 で純粋な比率に） */
.ratio-11 .flex-split-main {
	flex: 1 1 0;
}
.ratio-11 .flex-split-sub  {
	flex: 1 1 0;
}
.ratio-21 .flex-split-main {
	flex: 2 1 0;
}

.ratio-21 .flex-split-sub {
	flex: 1 1 0;
}

.ratio-31 .flex-split-main {
	flex: 3 1 0;
}

.ratio-31 .flex-split-sub {
	flex: 1 1 0;
}

.ratio-32 .flex-split-main {
	flex: 3 1 0;
}

.ratio-32 .flex-split-sub {
	flex: 2 1 0;
}

/* 左右反転したいとき */
.reverse {
	flex-direction: row-reverse;
}

/* レスポンシブ：狭幅で縦積み */
@media (max-width: 1000px) {
	.flex-split {
		flex-direction: column;
		align-items: flex-start;
	}

	.flex-split-main,
	.flex-split-sub {
		flex: 1 1 auto;
	}

	.flex-split-sub {
		white-space: normal;
	}

}



.gap-0   { gap: 0; }
.gap-2xs  { gap: 0.125rem; }
.gap-xs  { gap: 0.25rem; }
.gap-sm  { gap: 0.5rem; }
.gap-md  { gap: 0.75rem; }
.gap-lg  { gap: 1rem; }
.gap-xl  { gap: 1.5rem; }
.gap-2xl { gap: 2rem; }
.gap-3xl { gap: 3rem; }

@media (max-width: 767px) {
	.md-gap-0   { gap: 0; }
	.md-gap-2xs { gap: 0.125rem; }
	.md-gap-xs  { gap: 0.25rem; }
	.md-gap-sm  { gap: 0.5rem; }
	.md-gap-md  { gap: 0.75rem; }
	.md-gap-lg  { gap: 1rem; }
	.md-gap-xl  { gap: 1.5rem; }
	.md-gap-2xl { gap: 2rem; }
	.md-gap-3xl { gap: 3rem; }
}
@media (max-width: 1000px){
	.lg-gap-0   { gap: 0; }
	.lg-gap-2xs { gap: 0.125rem; }
	.lg-gap-xs  { gap: 0.25rem; }
	.lg-gap-sm  { gap: 0.5rem; }
	.lg-gap-md  { gap: 0.75rem; }
	.lg-gap-lg  { gap: 1rem; }
	.lg-gap-xl  { gap: 1.5rem; }
	.lg-gap-2xl { gap: 2rem; }
	.lg-gap-3xl { gap: 3rem; }
}



.page-nav-wrap {
	background: #efefef;
	padding: 2rem;
}
.page-nav {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem 2rem;

	@media (max-width:1280px){
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	@media (max-width:1000px){
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	@media (max-width:767px){
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.page-nav-item {
		display: flex;
		border: 1px solid #e5e7eb;
		background: #fff;
		min-width: 0;

		.page-nav-link {
			width: 100%;
			display:flex;
			align-items: center;
			padding: 1rem;
			color: inherit;
			text-decoration: none;
			font-size: 1rem;
			font-weight: 700;

			&::after{
				content:"";
				margin-left:auto;
				inline-size: 1.25rem;
				block-size: 1.25rem;
				background: no-repeat center / contain url("/common/images/arrow_down_fill.svg");
			}
		}
	}
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
	margin: 0;
}



/* 横罫線（少し太め） */
.divider {
	border: 0 !important;
	height: 2px !important;
	background-color: #d1d5db;
	padding: 0 !important;
	margin-block: 1.25rem;
	width: 100%;
}

/* バリエーション：もう少し細くしたい時 */
.divider-thin {
	height: 1px !important;
	background-color: #ececec;
}

/* バリエーション：もう少し太くしたい時 */
.divider-thick {
	height: 4px !important;
}

/* コンテナの左右端まで伸ばしたい時（フルブリード） */
.divider-bleed {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
}


/* ===== Base Button (.btn) ===== */
.btn {
	box-sizing: border-box;
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	background: #000;
	color: #fff !important;
	border: 1px solid #000;
	border-radius: 0;
	transition: .2s ease;
	cursor: pointer;

	&.btn_lg {

		min-width: 350px;
		padding: 1.5rem 1.25rem;

		@media only screen and (max-width: 480px) {
			min-width: inherit;
			width: 100%;
		}
	}

	&:hover,
	&:focus-visible {
		text-decoration: underline;
		box-shadow: 0 0 8px #555;
	}

	&:active {
		transform: translateY(1px);
	}

	.btn_icon {
		inline-size: 1em;
		block-size: 1em;
		flex: 0 0 auto;
	}

	.btn_label {

	}


	&.btn_type_arrow {
		.btn_label {
			display: flex;
			flex-grow: 1;
			align-items: center;
			justify-content: space-between;
		}

		.btn_label::after {
			content: "";
			display: inline-block;
			height: 15px;
			margin-left: 10px;
			position: relative;
			width: 15px;
			background: url("/cloudnavi/image/icon-link-arrow-white.svg") no-repeat 0 0;
		}
	}



	@media (prefers-reduced-motion: reduce) {
		transition: none;
	}
}


.contact-section {
	display: flex;
	& * {
		box-sizing: border-box;
	}


	img {
		width: auto;
		max-width: 100%;
	}

	.section-inner {
		max-width: 1280px;
		padding: 100px 0 70px;
		margin: 0 auto;

		@media only screen and (max-width: 1280px) {
			padding: 70px 8px 70px;
		}
		@media only screen and (max-width: 1000px) {
			padding: 70px 16px 70px;
		}
		@media only screen and (max-width: 767px) {
			padding: 40px 16px 70px;
		}
		@media only screen and (max-width: 480px) {
			padding: 0 16px 70px;
		}
	}
	.contact-section_title {
		margin-bottom: 2.5rem;
		font-size: clamp(1.375rem, 1.075rem + 1vw, 1.875rem);
		font-weight: 400;
		line-height: 1.2;
	}

	.contact-section_notes {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	a {
		color: #00e;
		font-weight: 700;
		text-decoration: none;

		:hover,
		&:focus-visible {
			text-decoration: underline;
		}
	}
}

.c-link {
	/* font-size: 1.125rem; */
	/* line-height: 1.188rem; */
	/* margin-top: 50px; */
	overflow-wrap: anywhere
}

.c-link__link {
	display: flex;
	/* flex-direction: row-reverse; */
	/* justify-content: center */
	align-items: center;
}

.c-link_type_list .c-link {
	margin-top: 0
}

.c-link_type_large {
	margin-top: 10px;
	text-align: left
}

.c-link_type_large .c-link__link {
	column-gap: 10px;
	display: flex
}

.c-link_type_large .c-link-icon {
	flex: 0 0 32px;
	height: 32px;
	margin-left: 0;
	width: 32px
}

.c-link_type_large .c-link-icon svg .arrow,
.c-link_type_large .c-link-icon svg .circle {
	stroke: currentColor
}

@media print,screen and (min-width: 768px) {
	.c-link {
		/* margin-top:60px */
	}

	.c-link__link {
		transition: text-decoration .5s ease-in;
		will-change: text-decoration
	}

	.c-link__link:focus-visible,.c-link__link:hover {
		text-decoration: underline
	}

	.c-link_type_large {
		margin-top: 30px
	}

	.c-link_type_large .c-link__link {
		column-gap: 10px;
		display: flex;
		padding-top: 10px
	}

	.c-link_type_large .c-link-icon {
		flex: 0 0 50px;
		height: 50px;
		margin-left: 0;
		margin-top: -10px;
		width: 50px
	}

	.c-link_type_large .c-link-icon svg .arrow,
	.c-link_type_large .c-link-icon svg .circle {
		stroke-width: 3px
	}
}


.c-link_type_small {
	margin-top: 10px;
	text-align: left
}

.c-link_type_small .c-link__link {
	column-gap: 6px;
	display: flex
}

.c-link_type_small .c-link-icon {
	flex: 0 0 32px;
	height: 32px;
	margin-left: 0;
	width: 32px
}




.c-link-icon {
	display: inline-block;
	height: 32px;
	/* margin-right: 10px; */
	min-width: 32px;
	position: relative;
	vertical-align: middle
}

.c-link-icon svg {
	stroke: #5f5f5f;
	left: 0;
	position: absolute;
	top: 0
}

.c-link-icon svg .arrow,
.c-link-icon svg .circle {
	stroke: #5f5f5f;
	stroke-width: 3px
}

.c-link-icon svg .arrow {
	transform: translateX(0);
	transition: transform .3s ease-in-out
}

.c-link-icon svg .circle {
	fill: none;
	transform-origin: center
}

.c-link-icon--white svg {
	fill: #fff
}

.c-link-icon--white svg .circle {
	fill: #fff
}

@media print,screen and (min-width: 768px) {
	a:focus-visible .c-link-icon svg .arrow,a:hover .c-link-icon svg .arrow {
		animation:arrow 1.5s ease-in-out forwards
	}

	a:focus-visible .c-link-icon svg .circle,a:hover .c-link-icon svg .circle {
		animation: circle 2s cubic-bezier(.215,.61,.355,1) forwards
	}
}


.banner-section {
	& * {
		box-sizing: border-box;
	}

	img {
		width: auto;
		max-width: 100%;
	}
	.section-inner {
		width: 100%;
		max-width: 1280px;
		padding: 0 0 100px;
		margin: 0 auto;

		@media only screen and (max-width: 1280px) {
			padding: 0 8px 70px;
		}
	}

	a {
		color: #00e;
		font-weight: 700;
		text-decoration: none;

		:hover,
		&:focus-visible {
			text-decoration: underline;
		}
	}
}


.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	/* 折り返し防止で高さが増えないように */
	border: 0;
}