@charset "utf-8";


.bg-gray {
	background: #e6e6e6;
	padding: 0.6rem 1rem 0.3rem;
}

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

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

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

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

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

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

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

.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; */
		align-items: stretch;
	}

	.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));
	}

	&.columns2 {
		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");
			}
		}
	}
}


/* 横罫線（少し太め） */
.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;
	min-width: 350px;
	padding: 1rem 1.5rem;
	font-size: 1.25rem;
	line-height: 1;
	text-decoration: none;
	background: #fff;
	border: 1px solid #000;
	border-radius: 0;
	transition: .2s ease;
	cursor: pointer;

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

	&.btn_sm {
		padding: 0.75rem 1.25rem;
		font-size: 1rem;
		min-width: inherit;

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

	&.btn_lg {
		min-width: 400px;
		padding: 1.5rem 1.5rem;
		font-size: 1.5rem;

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

	&: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 {
		padding-top: 1px;
		font-weight: 700;
	}

	&.btn_bg_grad-h2a {
		background: linear-gradient(135deg, #ea0000, #ff8000);
		border-style: none;
	}

	&.btn_bg_grad-h3a {
		background: linear-gradient(135deg, #2400b0, #00e7ef);
		border-style: none;
	}

	&.btn_bg_grad-h5a {
		background: linear-gradient(135deg, #ff8000, #ffe700);
		border-style: none;
	}

	&.btn_bg_grad-h10a {
		background: linear-gradient(135deg, #000, #3c3c3c);
		border-style: none;
	}

	&.btn_bg_magenta {
		background: #d80084;
		border-style: none;
	}

	&.radius-pill {
		border-radius: 100vh;
		justify-content: center;
	}

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

}


.contact-section {
	.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;
		}
	}
	.contact-section_title {
		margin-bottom: 2.5rem;
		font-size: clamp(1.375rem, 1.075rem + 1vw, 1.875rem);
		font-weight: 400;
		line-height: 1.2;

		@media only screen and (max-width: 767px) {
			margin-bottom: 1rem;
		}
	}

	.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;
	overflow-wrap: anywhere;
	margin-top: 14px;

	.c-link__link {
		display: flex;
		align-items: center;
		width: fit-content;
		column-gap: 8px;

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

		@media print,screen and (min-width: 768px) {
			transition: text-decoration .5s ease-in;
			will-change: text-decoration;

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

	&.c-link_type_large {
		font-size: 1.25rem;
		margin-top: 10px;

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

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

		@media print,screen and (min-width: 768px) {
			margin-top: 20px;

			.c-link__link {
				padding-top: 10px;
			}

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

				.arrow, .circle {
					stroke-width: 3px;
				}
			}
		}
	}

	&.c-link_type_small {
		font-size: 1rem;
		margin-top: 10px;
		text-align: left;

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

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

	.c-link-icon {
		display: inline-block;
		height: 32px;
		min-width: 32px;
		position: relative;
		vertical-align: middle;

		svg {
			stroke: #5f5f5f;
			left: 0;
			position: absolute;
			top: 0;

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

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

			.circle {
				fill: none;
				transform-origin: center;
			}
		}

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

			.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;
		}
	}
}


/* ベース：テキストとアイコンを上下中央に */
a.link-auto {
	display: inline-flex;
	align-items: center;
	gap: .2em;
}

/* 自動付与の共通スタイル（_blank または PDF のとき） */
a.link-auto[target="_blank"]::after,
a.link-auto[href$=".pdf" i]::after,
a.link-auto[href*=".pdf?" i]::after,
a.link-auto[href*=".pdf#" i]::after {
	content: "";
	inline-size: 1em;
	block-size: 1em;
	background: no-repeat center / contain;
	display: inline-block;
	flex: 0 0 auto;
}

/* 新しいタブ（PDF以外） */
a.link-auto[target="_blank"]::after {
	background-image: url("/common/images/windows.svg");
}


a.link-auto[target="_blank"].u-icon-white::after { filter: invert(1); }


a.link-auto[href$=".pdf" i]::after,
a.link-auto[href*=".pdf?" i]::after,
a.link-auto[href*=".pdf#" i]::after {
	background-image: url("/common/images/ico-pdf-blk.svg");
	inline-size: 1.4em;
	block-size: 1.4em;
}


a.link-arrow, a.link-download {
	display: inline-flex;
	align-items: center;
	gap: .2em;
}

a.link-arrow::after {
	content: "";
	inline-size: 0.8em;
	block-size: 0.8em;
	background: url("/common/images/icon-link-arrow.svg") no-repeat center / contain;
	display: inline-block;
	flex: 0 0 auto;
}

a.link-arrow.u-icon-white::after { filter: invert(1); }

a.link-arrow.-leading:not(.link-auto)::after {
	content: none;
}

a.link-arrow.-leading:not(.link-auto)::before {
	content: "";
	inline-size: 0.8em;
	block-size: 0.8em;
	background: url("/common/images/icon-link-arrow.svg") no-repeat center / contain;
	display: inline-block;
	flex: 0 0 auto;
	transform: scaleX(-1);
	transform-origin: center;
}

a.link-download::after {
	content: "";
	inline-size: 1em;
	block-size: 1em;
	background: url("/common/images/download-fill.png") no-repeat center / contain;
	display: inline-block;
	flex: 0 0 auto;
}



.icon-info {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.icon-info::before {
  content: "";
  inline-size: 1.2em;
  block-size: 1.2em;
  background: no-repeat center / contain;
  background-image: url("/common/images/status_mono.png");
  flex: 0 0 auto;
}


.icon-important {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.4em;
  block-size: 1.4em;
  margin-right: .25em;
  border-radius: 50%;
  background-color: #d52e20;
  color: #fff;
  font-weight: 700;
  font-size: .9em;
  visibility: hidden;
}

.important > .icon-important::before {
  content: "!";
  line-height: 1;
}

.important > .icon-important {
	visibility: visible;
}



/* カード型CTA */
.cta-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;

	@media (max-width:768px) {
		grid-template-columns: 1fr;
	}

	.cta-grid__item {
		display: contents;
	}

	.cta-card {
		position: relative;
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		gap: 0.5rem;
		padding: 1rem;
		color: #fff !important;
		text-decoration: none;
		overflow: hidden;
		transform: translateY(0);
		transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
		cursor: pointer;

		&.grid-row-3 {
			grid-row: span 3;
		}

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: -1;
		}

		&.theme-a::before {
			background: url(/products/images/campaign-fjcloud-order-here-item1-bg.jpg) no-repeat center center/cover;
		}

		&.theme-b::before {
			background: url(/products/images/campaign-fjcloud-order-here-item2-bg.jpg) no-repeat center center/cover;
		}

		&:hover,
		&:focus-visible {
			text-decoration: none !important;
			transform: translateY(-4px);
		}

	}

	.card__subtitle {
		position: relative;
		font-size: 1.5rem;
		font-weight: 700;
		padding: 0 0 0.5rem;

		@media (max-width: 480px) {
			font-size: 1.25rem;
		}

		&.card__subtitle--divider::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			border-bottom: 1px solid #fff;
		}
	}

	.cta-card__title {
		position: relative;
		font-size: 2rem;
		font-weight: 700;
		margin: 0.5rem 0 0;

		@media (max-width: 480px) {
			font-size: 1.75rem;
		}

		&.card__title--divider::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: -0.5rem;
			border-bottom: 1px solid #fff;
		}
	}

	.cta-card__text {
		font-size: 1.25rem;
		font-weight: 700;

		@media (max-width: 480px) {
			font-size: 1.125rem;
		}
	}

	.cta-card__cta {
		font-size: 1rem;
		font-weight: 700;
	}
}




.text-white { color: #fff !important; }
.text-black { color: #000 !important; }

.btn_hm-52 { min-block-size:52px; padding-block:0; }
.btn_hm-56 { min-block-size:56px; padding-block:0; }
.btn_hm-60 { min-block-size:60px; padding-block:0; }
.btn_hm-64 { min-block-size:64px; padding-block:0; }


.fs-16 { font-size: 1rem !important; }
.fs-18 { font-size: 1.125rem !important; }
.fs-20 { font-size: 1.25rem !important; }
.fs-22 { font-size: 1.375rem !important; }
.fs-24 { font-size: 1.5rem !important; }

.u-mt-0  { margin-top: 0 !important; }
.u-mt-4  { margin-top: 0.25rem !important; }
.u-mt-8  { margin-top: 0.5rem !important; }
.u-mt-12 { margin-top: 0.75rem !important; }
.u-mt-16 { margin-top: 1rem !important; }
.u-mt-20 { margin-top: 1.25rem !important; }
.u-mt-24 { margin-top: 1.5rem !important; }
.u-mt-28 { margin-top: 1.75rem !important; }
.u-mt-32 { margin-top: 2rem !important; }
.u-mt-36 { margin-top: 2.25rem !important; }
.u-mt-40 { margin-top: 2.5rem !important; }
.u-mt-44 { margin-top: 2.75rem !important; }
.u-mt-48 { margin-top: 3rem !important; }
.u-mt-64 { margin-top: 4rem !important; }
.u-mt-80 { margin-top: 5rem !important; }
.u-mt-96 { margin-top: 6rem !important; }

.u-ml-0  { margin-left: 0 !important; }
.u-ml-4  { margin-left: 0.25rem !important; }
.u-ml-8  { margin-left: 0.5rem !important; }
.u-ml-12 { margin-left: 0.75rem !important; }
.u-ml-16 { margin-left: 1rem !important; }
.u-ml-20 { margin-left: 1.25rem !important; }
.u-ml-24 { margin-left: 1.5rem !important; }
.u-ml-28 { margin-left: 1.75rem !important; }
.u-ml-32 { margin-left: 2rem !important; }
.u-ml-36 { margin-left: 2.25rem !important; }
.u-ml-40 { margin-left: 2.5rem !important; }
.u-ml-44 { margin-left: 2.75rem !important; }
.u-ml-48 { margin-left: 3rem !important; }
.u-ml-64 { margin-left: 4rem !important; }
.u-ml-80 { margin-left: 5rem !important; }
.u-ml-96 { margin-left: 6rem !important; }

.u-w-full { width: 100% !important; }