@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td,main,figure{margin:0;padding:0}table{font-size:100%;font-family:inherit}fieldset,img{border:0}img,svg,video{vertical-align:middle}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%}q:before,q:after{content:''}abbr,acronym{border:0}select,input,textarea{font-size:100%}header,footer,nav,main,section,article,figure,aside,picture{display:block}.clearfix:after,.row:after{content:"";display:table;clear:both}._fl{float:left}._fr{float:right}@media screen and (min-width: 744px),print{._pc_fl{float:left}._pc_fr{float:right}}@media screen and (max-width: 743px){._sp_fl{float:left}._sp_fr{float:right}}._tal{text-align:left!important}._tac{text-align:center!important}._tar{text-align:right!important}@media screen and (min-width: 744px),print{._pc_tal{text-align:left!important}._pc_tac{text-align:center!important}._pc_tar{text-align:right!important}}@media screen and (max-width: 743px){._sp_tal{text-align:left!important}._sp_tac{text-align:center!important}._sp_tar{text-align:right!important}}._mt{margin-top:1em;}

/* 変数
====================================================================== */
:root {
	--color-base: #fff;
	--color-theme: #00dcdc;
	--color-blue: #005bff;
	--color-green: #00f5a3;
	--color-green2: #00b49d;
	--color-link: #38aae1;
	--bg-body: #000;
	--base-width: 120rem;
	--base-width-s: 100rem;
	--sp-base-padding: calc(30 / 375 * 100vw);
	--font-family-jp: "Noto Sans JP", sans-serif;
	--font-family-en: "Inter", var(--font-family-jp);
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semi: 600;
	--font-weight-bold: 700;
	--font-weight: var(--font-weight-regular);
	--gradient: linear-gradient(267.48deg, #00ff9d 20%, var(--color-blue) 140%);
	--gradient2: linear-gradient(214.8deg, #00ff9d 0%, var(--color-blue) 100%);
	--gradient3: linear-gradient(90deg, #00a9d0 0%, var(--color-green) 150%);
	--gradient4: linear-gradient(90deg, var(--color-blue) 0%, var(--color-green) 60%, #00ff9d 120%);
	--transition-duration: .3s;
	--transition: var(--transition-duration) ease-in-out;
	--header-height: 12rem;
	@media screen and (max-width: 743px) {
		--header-height: 8rem;
	}
}

/*
====================================================================== */
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}
html.no-scroll-behavior {
	scroll-behavior: auto;
}
@media screen and (min-width: 744px), print {
	html {
		font-size: min(calc(10px - (1300px - 100vw) * (10 / 1300)), 10px);
	}
}
@media screen and (max-width: 743px) {
	html {
		font-size: calc((10 / 375) * 100vw);
	}
}
body {
	position: relative;
	background-color: var(--bg-body);
	font-size: 1.6rem;
	line-height: calc(36 / 16);
	color: var(--color-base);
	word-wrap: break-word;
	overflow-wrap: break-word;
	letter-spacing: .1rem;

	font-family: var(--font-family-jp);
	font-weight: var(--font-weight);
	font-feature-settings: "palt";
	font-style: normal;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 743px) {
	body {
		font-size: 1.2rem;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
:where(address,caption,cite,code,dfn,em,th,var) {
	font-style: normal;
	font-weight: var(--font-weight);
}
:where(img) {
	max-width: 100%;
	height: auto;
}
:where(iframe) {
	max-width: 100%;
	vertical-align: middle;
}
:where(sup) {
	vertical-align: super;
	font-size: 60%;
}
:where(table) {
	border-collapse: collapse;
	border-spacing: 0;
	line-height: inherit;
}
:where(a[href], a[data-modal]) {
	--a-color: var(--color-base);
	--a-color-op: color-mix(in srgb, var(--a-color) 0%, transparent);
	color: var(--a-color);
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--a-color);
	text-underline-offset: .3em;
	outline: none;
	cursor: pointer;
}
:where(a[href]._a_reverse,._a_reverse a[href]) {
	text-decoration-color: var(--a-color-op);
}
@media (hover) {
	:where(a,button,._basic_trs,._hl),
	:where(a,button,._basic_trs,._hl)::before,
	:where(a,button,._basic_trs,._hl)::after {
		transition: color var(--transition), background var(--transition), border var(--transition), opacity var(--transition), text-decoration-color .2s ease-in-out;
	}
	:where(a svg) {
		transition: fill var(--transition);
	}
	:where(a[href]:hover, a[data-modal]:hover) {
		text-decoration-color: var(--a-color-op);
	}
	:where(a[href]._a_reverse, a[data-modal]._a_reverse, ._a_reverse a[href], ._a_reverse a[data-modal]):hover {
		text-decoration-color: var(--a-color);
	}
	:where(a[href] ._a_reverse) {
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-thickness: 1px;
		text-decoration-color: var(--a-color-op);
		text-underline-offset: .3em;
	}
	:where(a[href] ._a_reverse) {
		transition: text-decoration-color .2s ease-in-out;
	}
	:where(a[href]:hover ._a_reverse) {
		text-decoration-color: var(--a-color);
	}
	:where(a[href] ._hl) {
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-thickness: 1px;
		text-decoration-color: var(--a-color-op);
		text-underline-offset: .3em;
	}
	:where(a[href]:hover ._hl) {
		text-decoration-color: var(--a-color);
	}
}

:where(label) {
	cursor: pointer;
}
:where(input, select, textarea, button) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
	vertical-align: middle;
	font-family: inherit;
	font-weight: inherit;
	font-feature-settings: inherit;
	outline: none;
	font-size: 100%;
}
::placeholder {
	color: #ccc;
}
:where(button) {
	cursor: pointer;
}

.hidden {
	display: none;
}
.slick-slider * {
	outline: none;
}

#top {
	display: block;
}

/* pc / sp
====================================================================== */
@media screen and (min-width: 744px), print {
	._sp {
		display: none !important;
	}
	._pc_break {
		position: relative;
		display: block;
		height: 0;
		overflow: hidden;
	}
	._pc_hidden {
		position: relative;
		overflow: hidden;
		display: block;
		height: 0;
	}
}
@media screen and (max-width: 743px) {
	._pc {
		display: none !important;
	}
	._sp_break {
		position: relative;
		display: block;
		height: 0;
		overflow: hidden;
	}
}

/* color
====================================================================== */
._c_base {
	color: var(--color-base) !important;
}
._c_theme {
	color: var(--color-theme) !important;
}
._c_green {
	color: var(--color-green) !important;
}

/* font
====================================================================== */
._ff_en {
	font-family: var(--font-family-en);
	font-weight: 500;
	font-style: normal;
}
@media screen and (max-width: 743px) {
	._fz_sp_s {
		font-size: 1.6rem;
		line-height: 2;
	}
	._fz_sp_ss {
		font-size: 1.4rem;
		line-height: calc(24 / 14);
	}
}
._fwn {
	font-weight: var(--font-weight);
}
._fwr {
	font-weight: 400;
}
._fwm {
	font-weight: 500;
}
._fws {
	font-weight: 600;
}
._fwb {
	font-weight: var(--font-weight);
}
._wsnw {
	white-space: nowrap;
}
@media screen and (min-width: 744px), print {
	._pc_wsnw {
		white-space: nowrap;
	}
}
@media screen and (max-width: 743px) {
	._sp_wsnw {
		white-space: nowrap;
	}
}

/* bg
====================================================================== */

/* display
====================================================================== */
._db {
	display: block;
}
._dib {
	display: inline-block;
}
._dfcc {
	display: flex !important;
	justify-content: center;
	align-items: center;
}
@media screen and (min-width: 744px), print {
	._pc_dib {
		display: inline-block;
	}
	._pc_dfcc {
		display: flex !important;
		justify-content: center;
		align-items: center;
	}
}
@media screen and (max-width: 743px) {
	._sp_dib {
		display: inline-block;
	}
	._sp_dfcc {
		display: flex !important;
		justify-content: center;
		align-items: center;
	}
}

/* object-fit
====================================================================== */
img._of {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
img._of.-abs {
	position: absolute;
	top: 0;
	left: 0;
}
img._of.-bg {
	pointer-events: none;
	user-select: none;
	z-index: -1;
}
img._of.-top {
	object-position: 50% 0;
}
img._of.-bottom {
	object-position: 50% 100%;
}
@media screen and (min-width: 744px), print {
	img._of.-pc_none {
		object-fit: none;
	}
	img._of.-pc_top {
		object-position: 50% 0 ;
	}
	img._of.-pc_bottom {
		object-position: 50% 100%;
	}
	img._pc_of {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	img._pc_of.-abs {
		position: absolute;
		top: 0;
		left: 0;
	}
	img._pc_of.-bg {
		pointer-events: none;
		user-select: none;
		z-index: -1;
	}
	img._pc_of.-top {
		object-position: 50% 0;
	}
	img._pc_of.-none {
		object-fit: none;
	}
}
@media screen and (max-width: 743px) {
	img._of.-sp_top {
		object-position: 50% 0 ;
	}
	img._of.-sp_bottom {
		object-position: 50% 100%;
	}
	img._sp_of {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	img._sp_of.-abs {
		position: absolute;
		top: 0;
		left: 0;
	}
	img._sp_of.-bg {
		pointer-events: none;
		user-select: none;
		z-index: -1;
	}
	img._sp_of.-top {
		object-position: 50% 0 ;
	}
}

/* hover
====================================================================== */
@media (hover) {
	a[href] ._hv_op {
		transition: opacity var(--transition);
	}
	a:is([href], [data-modal])._hv_op:hover,
	a[href]:hover ._hv_op,
	button._hv_op:hover,
	._hv_op a[href]:hover {
		opacity: 0.5;
	}
	a[href]._hv_op.-a30:hover,
	a[href]:hover ._hv_op.-a30,
	._hv_op.-a50 a[href]:hover {
		opacity: 0.7;
	}
	a[href]._hv_op.-a20:hover,
	a[href]:hover ._hv_op.-a20,
	._hv_op.-a20 a[href]:hover {
		opacity: 0.8;
	}
	a[href]._hv_op.-a10:hover,
	a[href]:hover ._hv_op.-a10,
	._hv_op.-a10 a[href]:hover {
		opacity: 0.9;
	}
}

._hv_zoom {
	position: relative;
	display: block;
	overflow: hidden;
}
._hv_zoom > * {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
}
._hv_zoom.-static > * {
	position: relative;
}
@media (hover) {
	a[href]._hv_zoom > *,
	a[href] ._hv_zoom > * {
		transition: transform 0.5s, opacity .3s;
	}
	a[href]:hover ._hv_zoom.-s > * {
		transform: scale(1.03);
	}
	a[href]:hover ._hv_zoom.-l > * {
		transform: scale(1.1);
	}
	a[href]:hover._hv_zoom > *,
	a[href]:hover ._hv_zoom > * {
		transform: scale(1.05);
	}
}

/* _target
====================================================================== */
:where([id]:not(#top):not(style):not(script)) {
	scroll-margin-top: var(--header-height);
}

/* w
====================================================================== */
._w {
	position: relative;
}
@media screen and (min-width: 744px), print {
	._w {
		width: var(--base-width);
		margin-inline: auto;
	}
	._w.-s {
		width: var(--base-width-s);
	}
}
@media screen and (max-width: 743px) {
}

/* spパディング
====================================================================== */
@media screen and (max-width: 743px) {
	._sp_pd {
		padding-inline: var(--sp-base-padding) !important;
	}
	._sp_mg {
		margin-inline: var(--sp-base-padding) !important;
	}
	._sp_full {
		margin-inline: calc(var(--sp-base-padding) * -1) !important;
	}
	._sp_full_l {
		margin-left: calc(var(--sp-base-padding) * -1) !important;
	}
	._sp_full_r {
		margin-right: calc(var(--sp-base-padding) * -1) !important;
	}
}

/* header
============================================================================================================ */
#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--header-height);
	z-index: 500;
	.logo {
		img {
			width: 20rem;
		}
	}
	@media print {
		position: absolute;
	}
	@media screen and (min-width: 744px), print {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-inline: 6rem;
		padding-inline: clamp(4rem, calc(100vw - 130rem) * .3 + 4rem, 6rem);
		nav,
		nav ul {
			display: flex;
			align-items: center;
			font-size: 1.6rem;
			line-height: 1.6;
			font-weight: var(--font-weight-bold);
			li {
				position: relative;
			}
		}
		nav a {
			text-decoration: none;
			color: #fff;
			@media (hover) {
				&[href]:hover {
					color: var(--color-theme);
				}
			}
		}
		.gnav {
			li + li::before {
				content: "";
				position: absolute;
				left: 0;
				top: 50%;
				height: 1.2em;
				border-left: 1px solid #fff;
				transform: translateY(-50%);
				pointer-events: none;
			}
			a {
				padding: 1rem 2.5rem;
			}
		}
		.lang {
			margin-left: 5rem;
			margin-left: clamp(3rem, calc(100vw - 130rem) * .3 + 3rem, 5rem);
			font-size: 1.9rem;
			li + li::before {
				content: "/";
				position: absolute;
				top: 50%;
				left: -.5em;
				width: 1em;
				text-align: center;
				transform: translateY(-50%);
			}
			a {
				position: relative;
				padding: 1rem .5em;
				font-weight: 500;
				&.current {
					color: var(--color-theme);
					&::after {
						content: "";
						position: absolute;
						top: calc(50% + 0.6em);
						left: 0.5em;
						right: 0.5em;
						border-top: 1px solid;
					}
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		height: var(--header-height);
		.logo {
			position: relative;
			display: flex;
			z-index: 20;
			a {
				display: flex;
				align-items: center;
				height: var(--header-height);
				padding-inline: 3rem;
			}
			img {
				width: 13rem;
			}
		}

		/* nav_btn */
		.nav_btn {
			position: absolute;
			right: 0;
			top: 0;
			width: 8rem;
			height: var(--header-height);
			z-index: 100;
			a {
				overflow: hidden;
				position: relative;
				display: block;
				height: 0;
				padding-top: var(--header-height);
				text-decoration: none;
				&::before,
				&::after {
					content: "";
					position: absolute;
					width: 2.6rem;
					left: 0;
					right: 0;
					top: calc(50% - 1px);
					margin-inline: auto;
					border-top: 2px solid var(--color-theme);
					pointer-events: none;
					transition: transform var(--transition), opacity var(--transition), border var(--transition);
					z-index: 2;
				}
				&::before {
					transform: translateY(-.6rem);
				}
				&::after {
					transform: translateY(.6rem);
				}
			}
		}
		&.-open .nav_btn a::before {
			transform: translate(0) rotate(-45deg);
		}
		&.-open .nav_btn a::after {
			transform: translate(0) rotate(45deg);
		}

		/* gnav */
		.gnav {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			padding-top: 3rem;
			background-color: rgba(0,0,0,.9);
			transform: scale(1.1);
			opacity: 0;
			pointer-events: none;
			transition: transform var(--transition),  opacity var(--transition);
			z-index: 10;
		}
		/* open */
		&.-open .gnav {
			transform: scale(1);
			opacity: 1;
			overscroll-behavior-y: contain;
			pointer-events: auto;
		}
		.gnav > ul {
			max-height: 100vh;
			width: 100%;
			overflow-y: auto;
			padding-block: 6rem;
		}
		.gnav a {
			display: block;
			padding: 0.2em;
			color: #fff;
			color: var(--color-theme);
			text-decoration: none;
			text-align: center;
			font-size: 2rem;
			font-weight: var(--font-weight-bold);
		}
		.hnav {
			margin-top: 3rem;
			a {
				padding: 0.6em;
				font-size: 1.2rem;
				line-height: 1.3;
				font-weight: var(--font-weight-medium);
				color: #fff;
			}
		}

		/* lang */
		.lang {
			position: absolute;
			top: 0;
			right: 8.5rem;
			height: var(--header-height);
			display: flex;
			align-items: center;
			font-size: 1.4rem;
			z-index: 20;
			li {
				position: relative;
			}
			li + li::before {
				content: "/";
				position: absolute;
				top: 50%;
				left: -.5em;
				width: 1em;
				text-align: center;
				transform: translateY(-50%);
			}
			a {
				position: relative;
				padding: 1rem .5em;
				font-weight: 500;
				text-decoration: none;
				&.current {
					color: var(--color-theme);
					&::after {
						content: "";
						position: absolute;
						top: calc(50% + 0.6em);
						left: 0.5em;
						right: 0.5em;
						border-top: 1px solid;
					}
				}
			}
		}
	}
	@media screen and (min-width: 744px), print {
		html[lang="en"] & {
			padding-inline: clamp(4rem, calc(100vw - 140rem) * .2 + 4rem, 6rem);
			.gnav {
				a {
					padding: 1rem 2rem;
				}
			}
			.lang {
				margin-left: 3rem;
				margin-left: clamp(1rem, calc(100vw - 130rem) * .3 + 1rem, 3rem);
			}
		}
	}
}

/* footer
====================================================================== */
#footer {
	position: relative;
	margin-top: 28rem;
	padding-bottom: 2rem;
	z-index: 2;
	@media screen and (min-width: 744px), print {
		max-width: 140rem;
		margin-inline: auto;
		padding-inline: 3rem;
		box-sizing: content-box;
	}
	@media screen and (max-width: 743px) {
		margin-top: 14rem;
		padding-bottom: 1rem;
	}
	nav {
		position: relative;
		line-height: 1.6;
		li {
			position: relative;
		}
		a {
			text-decoration: none;
			font-weight: var(--font-weight-bold);
			@media (hover) {
				&[href]:hover {
					color: var(--color-theme);
				}
			}
		}
		@media screen and (min-width: 744px), print {
			display: flex;
			flex-wrap: wrap;
			ul {
				display: flex;
			}
			.gnav {
				font-size: 1.6rem;
				li {
					padding-inline: 2.5rem;
					&:first-child {
						padding-left: 0;
					}
					&:last-child {
						padding-right: 0;
					}
				}
				li + li::before {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					height: 1.2em;
					border-left: 1px solid #fff;
					transform: translateY(-50%);
					pointer-events: none;
				}
			}
			.lang {
				margin-left: 6rem;
				font-size: 1.9rem;
				line-height: 1.5;
				li + li::before {
					content: "/";
					position: absolute;
					top: 50%;
					left: -.5em;
					width: 1em;
					text-align: center;
					transform: translateY(-55%);
				}
				a {
					position: relative;
					padding: 0 .5em;
					font-weight: 500;
					&.current {
						color: var(--color-theme);
						&::after {
							content: "";
							position: absolute;
							top: calc(50% + 0.6em);
							left: 0.5em;
							right: 0.5em;
							border-top: 1px solid;
						}
					}
				}
			}
			.hnav {
				width: 100%;
				gap: 4rem;
				margin-top: 4rem;
				font-size: 1.2rem;
			}
			.sns {
				position: absolute;
				top: 0;
				right: 0;
				gap: 4rem;
				li {
					width: 3rem;
				}
			}
		}
		@media screen and (max-width: 743px) {
			margin: 0 3rem;
			.gnav {
				width: 25rem;
				display: flex;
				flex-wrap: wrap;
				gap: 2rem 0;
				font-size: 1.3rem;
				li {
					width: 50%;
				}
				a {
					display: block;
					position: relative;
					padding-left: 1.3rem;
					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: calc(.5lh - .6rem / 2);
						width: 0.5rem;
						height: 0.6rem;
						background-color: var(--color-theme);
						clip-path: polygon(0 0, 100% 50%, 0 100%);
					}
				}
			}
			.lang {
				position: absolute;
				right: -.5em;
				top: -.2rem;
				display: flex;
				align-items: center;
				font-size: 1.4rem;
				margin-left: auto;
				li {
					position: relative;
				}
				li + li::before {
					content: "/";
					position: absolute;
					top: 50%;
					left: -.5em;
					width: 1em;
					text-align: center;
					transform: translateY(-50%);
				}
				a {
					position: relative;
					padding: 0 .5em;
					font-weight: 500;
					text-decoration: none;
					&.current {
						color: var(--color-theme);
						&::after {
							content: "";
							position: absolute;
							top: calc(50% + 0.6em);
							left: 0.5em;
							right: 0.5em;
							border-top: 1px solid;
						}
					}
				}
			}
			.hnav {
				margin-top: 3rem;
				font-size: 1.1rem;
				a {
					display: inline-block;
					padding: 0.5em 0;
				}
			}
			.sns {
				position: absolute;
				bottom: 0.8rem;
				right: 0;
				display: flex;
				gap: 2rem;
				li {
					width: 2.5rem;
				}
			}
		}
	}

	.logo {
		position: relative;
		margin-top: 20rem;
		margin-bottom: 7rem;
		img {
			width: 100%;
		}
		@media screen and (max-width: 743px) {
			margin: 5rem 1rem 3rem;
		}
		.myoact {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
		.tryit {
			opacity: 0;
			pointer-events: none;
			@media screen and (min-width: 744px), print {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.img {
				width: calc(1020 / 1400 * 100%);
				@media screen and (max-width: 743px) {
					margin-inline: auto;
				}
			}
			ul {
				@media screen and (min-width: 744px), print {
					width: 30rem;
					li + li {
						margin-top: 4rem;
					}
				}
				@media screen and (max-width: 743px) {
					width: 90%;
					margin-top: 2rem;
					margin-inline: auto;
					display: flex;
					justify-content: space-between;
					&:has(li:only-child) {
						justify-content: center;
					}
					li {
						width: calc(50% - .5rem);
					}
				}
			}
			a {
				width: auto;
				box-shadow: none;
				background-color: color-mix(in srgb, var(--bgc) 80%, transparent);
				border-color: var(--bgc);
				border: 1px solid var(--bgc);
				.arrow::before {
					background: var(--bgc);
					mix-blend-mode: normal;
				}
				@media screen and (max-width: 743px) {
					height: 4rem;
				}
				&::before {
					opacity: 0;
				}
				&.-sample {
					--bgc: #00b4dc;
				}
				&.-contact {
					--bgc: #00bba3;
				}
				@media (hover) {
					transition: box-shadow var(--transition), background var(--transition);
					.arrow::before {
						transition: background var(--transition);
					}
					.arrow::after {
						transition: border var(--transition);
					}
					&:hover {
						box-shadow: 0 0 3rem color-mix(in srgb, var(--bgc) 50%, transparent);
						background-color: color-mix(in srgb, var(--bgc) 100%, transparent);
						.arrow::before {
							background: #fff;
						}
						.arrow::after {
							border-color: var(--bgc);
						}
					}
				}
			}
		}
		&.-change {
			.myoact {
				pointer-events: none;
				transition: opacity .3s ease-in-out;
				opacity: 0;
			}
			.tryit {
				pointer-events: auto;
				transition: opacity .5s .4s ease-in-out;
				opacity: 1;
			}
		}
	}

	small {
		display: block;
		text-align: center;
		font-size: 1.4rem;
		@media screen and (max-width: 743px) {
			font-size: 1rem;
		}
	}
}

#pagetop {
	position: fixed;
	overflow: hidden;
	right: 3rem;
	bottom: 3rem;
	width: 5rem;
	height: 5rem;
	padding-left: calc(5rem - 2px * 2);
	border-radius: 100%;
	border: 2px solid var(--color-theme);
	color: transparent;
	font-size: 1rem;
	text-decoration: none;
	line-height: 1;
	opacity: 0;
	pointer-events: none;
	z-index: 890;
	&::after {
		content: "";
		position: absolute;
		top: calc(50% - .6rem);
		right: 50%;
		width: 1.4rem;
		height: 1.4rem;
		border-top: 2px solid var(--color-theme);
		border-right: 2px solid var(--color-theme);
		transform-origin: 100% 0;
		transform: rotate(-45deg);
	}
	&.-show {
		opacity: 1;
		pointer-events: auto;
	}
	@media print {
		display: none;
	}
	@media (hover) {
		&:hover {
			background-color: var(--color-theme);
			&::after {
				border-color: #fff;
			}
		}
	}
	@media screen and (max-width: 743px) {
		bottom: 1rem;
		right: 1rem;
		transform-origin: 100% 100%;
		transform: scale(calc(3 / 5));
	}
}


/* ======================================================================================

	パーツ

====================================================================================== */

/* fadein
====================================================================== */
@keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* bg-canvas
====================================================================== */
#bg-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	pointer-events: none;
	user-select: none;
	z-index: -1;
}

/* breadcrumbs
====================================================================== */
.breadcrumbs {
	display: flex;
	margin-bottom: 9rem;
	font-size: 1.2rem;
	line-height: 1.4;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.02em;
	li:not(:last-child) {
		position: relative;
		margin-right: 3rem;
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			right: -1.8rem;
			width: 0.8rem;
			height: 0.8rem;
			margin-top: 0.1rem;
			border-right: .2rem solid var(--color-theme);
			border-top: .2rem solid var(--color-theme);
			transform-origin: 100% 0;
			transform: rotate(45deg);
		}
	}
	@media screen and (max-width: 743px) {
		overflow-x: auto;
		margin-bottom: 4rem;
		padding: 0 3rem 1rem;
		font-size: 1.1rem;
		white-space: nowrap;
	}
}

/* box_btn
====================================================================== */
.box_btn {
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	width: 28rem;
	height: 6.4rem;
	padding-right: 1rem;
	border-radius: 100rem;
	font-size: 1.6rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 0 1rem rgba(0,0,0,.2);
	color: #fff;
	letter-spacing: .1em;
	z-index: 2;
	@media screen and (max-width: 743px) {
		width: 20rem;
		height: 4.5rem;
		font-size: 1.2rem;
	}
	&::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 200%;
		background: linear-gradient(to right, var(--color-blue) 0%, var(--color-green2) 50%, var(--color-blue) 100%);
		z-index: -1;
	}
	&.-center {
		margin-inline: auto;
	}
	&.-w1 {
		width: 32rem;
		@media screen and (max-width: 743px) {
			width: 24rem;
		}
	}
	.arrow {
		position: absolute;
		right: 1.8rem;
		top: calc(50% - 3rem / 2);
		width: 3rem;
		height: 3rem;
		@media screen and (max-width: 743px) {
			right: 1.2rem;
			top: calc(50% - 2rem / 2);
			width: 2rem;
			height: 2rem;
		}
		&::before {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: linear-gradient(135deg, #999999 0%, #e5e5e5 100%);
			border-radius: 100%;
			mix-blend-mode: multiply;
		}
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			right: 1.1rem;
			width: 0.8rem;
			height: 0.8rem;
			border-top: 2px solid #fff;
			border-right: 2px solid #fff;
			transform-origin: 100% 0;
			transform: rotate(45deg);
			@media screen and (max-width: 743px) {
				right: .7rem;
				width: 0.6rem;
				height: 0.6rem;
				border-top-width: 1px;
				border-right-width: 1px;
			}
		}
	}
	@media (hover) {
		transition: box-shadow .2s cubic-bezier(0.33, 1, 0.68, 1);
		&::before {
			transition: transform .3s cubic-bezier(0.33, 1, 0.68, 1);
		}
		&:hover {
			box-shadow: 0 0 3rem color-mix(in srgb, #00aaff 50%, transparent);
			&::before {
				transform: translateX(50%);
			}
		}
	}
}

.more_btn {
	margin-top: 10rem;
	@media screen and (max-width: 743px) {
		margin-top: 6rem;
	}
}


/* gradient-text
====================================================================== */
.gradient-text {
	--bgg: var(--gradient);
	display: block;
	width: fit-content;
	margin-inline: auto;
	background: var(--bgg);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	&.-gradient2 {
		--bgg: var(--gradient2);
	}
	&.-gradient3 {
		--bgg: var(--gradient3);
	}
	&.-gradient4 {
		--bgg: var(--gradient4);
	}
	&.-tal {
		margin-left: 0;
	}
}

/* page_title
====================================================================== */
.page_title {
	position: relative;
	margin-bottom: 10rem;
	padding-top: 23rem;
	text-align: center;
	z-index: 2;
	@media screen and (max-width: 743px) {
		margin-bottom: 5rem;
		padding-top: 12rem;
	}

	.lead_text {
		margin-top: 10rem;
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
		}
	}
}

/* title
====================================================================== */
.title_xl {
	text-align: center;
	font-size: 7rem;
	line-height: calc(100 / 70);
	font-weight: 700;
	letter-spacing: 0.06em;
	@media screen and (max-width: 743px) {
		font-size: 3.2rem;
		line-height: 1.5;
	}
}
html[lang="en"] .title_xl {
	font-size: 6rem;
	letter-spacing: 0.02em;
	@media screen and (max-width: 743px) {
		font-size: 2.8rem;
		&.-sp-s {
			font-size: 2.4rem;
		}
	}
}

.title_l {
	margin-bottom: 4rem;
	text-align: center;
	font-size: 4.8rem;
	line-height: calc(70 / 48);
	font-weight: 700;
	@media screen and (max-width: 743px) {
		margin-bottom: 2rem;
		font-size: 2.4rem;
	}
	&.-s {
		font-size: 4rem;
		@media screen and (max-width: 743px) {
			font-size: 2rem;
		}
	}
}

.title_after_en {
	margin-top: 1.5rem;
	text-align: center;
	font-size: 2.2rem;
	line-height: calc(40 / 22);
	@media screen and (max-width: 743px) {
		font-size: 1.2rem;
		letter-spacing: 0.05em;
	}
}

.lead_text {
	font-size: 2rem;
	font-weight: var(--font-weight-bold);
	line-height: calc(48 / 20);
	@media screen and (max-width: 743px) {
		font-size: 1.4rem;
		line-height: calc(70 / 28);
	}
}

/* compare-container
====================================================================== */
.compare-container {
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
	.overlay {
		position: absolute;
		overflow: hidden;
		top: 0;
		left: 0;
		bottom: 0;
		width: 50%;
	}
	img {
		max-width: none;
	}
	video {
		height: auto;
		aspect-ratio: 1200 / 480;
		object-fit: cover;
	}
	> div:not(.handle) {
		pointer-events: none;
		user-select: none;
	}
	.handle {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 6rem;
		height: 6rem;
		background: linear-gradient(135deg, var(--color-green2) 0%, var(--color-blue) 100%);
		border-radius: 50%;
		cursor: ew-resize;
		box-shadow: 0 0 1rem rgba(0,0,0,.5);
		z-index: 10;
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			right: 25%;
			width: 0.7rem;
			height: 0.7rem;
			border-top: 1px solid #fff;
			border-right: 1px solid #fff;
			transform-origin: 100% 0;
			transform: rotate(45deg);
		}
		&::before {
			right: 75%;
			transform: rotate(225deg);
		}
		@media screen and (max-width: 743px) {
			transform: translate(-50%, -50%) scale(.6);
		}
	}
}

/* paragraph
====================================================================== */
.paragraph > * + * {
	margin-top: 0.6lh;
}

/* accordion
====================================================================== */
.acc_contents {
	height: 0;
	overflow: hidden;
	transition: height .3s ease-in-out;
}

/* contents_link
====================================================================== */
.contents_link {
	overflow: hidden;
	position: relative;
	padding-top: 33rem;
	@media screen and (max-width: 743px) {
		padding-top: 10rem;
	}
	section {
		position: relative;
		text-align: center;
		.title_after_en {
			margin-bottom: 4rem;
		}
		.more {
			margin-top: 5rem;
		}
		@media screen and (min-width: 744px), print {
			& + section {
				margin-top: 24rem;
			}
			.img {
				position: absolute;
			}
			&:nth-child(2n + 1) {
				padding-left: calc(var(--base-width) - 46rem);
				.img {
					top: 0;
					left: 0;
				}
			}
			&:nth-child(2n) {
				padding-right: calc(var(--base-width) - 46rem);
				.img {
					top: 0;
					right: 0;
				}
			}
			&.-features {
				min-height: 49rem;
				.img {
					width: 92rem;
					left: -15rem;
					top: -10rem;
				}
			}
			&.-cases {
				min-height: 48rem;
				.img {
					width: 81rem;
					right: -6rem;
					top: -10rem;
				}
			}
		}
		@media screen and (max-width: 743px) {
			& + section {
				margin-top: 8rem;
			}
			.img {
				margin: 0 2rem ;
			}
			.title_after_en {
				margin-bottom: 2rem;
			}
			.more {
				margin-top: 3rem;
			}
		}
	}
}


/* basic_table
====================================================================== */
.basic_table {
	width: 100%;
	@media screen and (max-width: 743px) {
		line-height: 2;
	}
	@media screen and (min-width: 744px), print {
		tr {
			border-top: 1px solid;
			border-bottom: 1px solid;
		}
		th {
			width: 23rem;
			padding-block: 2.5rem;
			padding-right: 2rem;
			line-height: calc(26 / 14);
			vertical-align: top;
		}
		td {
			padding: 2.4rem 0;
			vertical-align: middle;
		}
	}
	@media screen and (max-width: 743px) {
		display: block;
		border-top: 1px solid;
		thead, tbody, tr, th, td {
			display: block;
		}
		tr {
			padding: 2rem 0;
			border-bottom: 1px solid;
		}
		th {
			margin-bottom: 0.5em;
			font-weight: var(--font-weight-bold);
		}
	}
}


/* ul / ol
====================================================================== */
.dot_li > li {
	position: relative;
	padding-left: 1em;
}
.dot_li > li::before {
	content: "・";
	position: absolute;
	top: 0;
	left: 0;
	font-feature-settings: normal;
}

.circle_li > li {
	position: relative;
	padding-left: 1em;
}
.circle_li > li::before {
	content: "";
	position: absolute;
	top: .6em;
	left: 0;
	width: 8px;
	height: 8px;
	background-color: #005f8b;
	border-radius: 100%;
}

.parentheses_li > li {
	position: relative;
	padding-left: 2.8em;
}
.parentheses_li > li > span:first-child {
	position: absolute;
	top: 0;
	left: 0;
}

.parentheses_li_h > li {
	position: relative;
	padding-left: 1.6em;
}
.parentheses_li_h > li > span:first-child {
	position: absolute;
	top: 0;
	left: 0;
}
.parentheses_li_hh > li {
	position: relative;
	padding-left: 2.2em;
}
.parentheses_li_hh > li > span:first-child {
	position: absolute;
	top: 0;
	left: 0;
}

.point_li > li {
	position: relative;
	padding-left: 1.5em;
}
.point_li > li > span:first-child {
	position: absolute;
	top: 0;
	left: 0;
}

.square_li > li {
	position: relative;
	padding-left: 0.8em;
}
.square_li > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .8em;
	width: 5px;
	height: 5px;
	background-color: #14143c;
}
@media screen and (max-width: 743px) {
	.square_li > li::before {
		top: 0.6em;
	}
}

.num_li {
	margin-left: 1.8em;
	list-style: decimal;
}
.alphabet_li {
	margin-left: 1.8em;
	list-style: lower-latin;
}
.roman_li {
	margin-left: 1.8em;
	list-style: lower-roman;
}

.mt_li > li + li {
	margin-top: 0.8em;
}
@media screen and (max-width: 743px) {
	.sp_mt_li > li + li {
		margin-top: 0.8em;
	}
}

.inline_li > li {
	display: inline-block;
	margin-right: 0.3em;
}

@media screen and (min-width: 744px), print {
	.column_li {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.column_li > li {
		width: 48%;
	}
	.column_li > li:nth-child(n + 3) {
		margin-top: 0.25em;
	}
}
@media screen and (max-width: 743px) {
	.column_li > li + li {
		margin-top: 0.25em;
	}
}

.dl_table {
	display: table;
	& > * {
		display: table-row;
		& > * {
			display: table-cell;
		}
	}
	dt {
		white-space: nowrap;
	}
	&.-dt_pr dt {
		padding-right: 1em;
	}
}


/* ======================================================================================

	基本機能

====================================================================================== */
.features_contents {
	margin-top: 17rem;
	@media screen and (max-width: 743px) {
		margin-top: 8rem;
	}
	section {
		& + section {
			margin-top: 18rem;
			@media screen and (max-width: 743px) {
				margin-top: 8rem;
			}
		}
		@media screen and (min-width: 744px), print {
			display: flex;
			justify-content: space-between;
			.img {
				width: 50rem;
				&.-img1 {
					width: 58rem;
					margin-left: -4rem;
				}
				&.-img2 {
					width: 48rem;
				}
				&.-img3 {
					width: 60rem;
					margin-left: -4rem;
				}
				&.-img4 {
					width: 60rem;
					margin-right: -4rem;
				}
				&.-img5 {
					width: 55rem;
					margin-right: -2rem;
				}
			}
			.txt {
				width: 50%;
			}
			&:nth-child(2n) {
				flex-direction: row-reverse;
			}
		}
	}
	.num {
		margin-bottom: 2rem;
		font-size: 5rem;
		line-height: 1;
		text-align: center;
	}
	.img {
		position: relative;
		z-index: 1;
		@media screen and (max-width: 743px) {
			margin-bottom: 3rem;
		}
		img {
			border-radius: 1rem;
		}
		&.-img1 {
			display: flex;
			gap: 2rem;
			@media screen and (max-width: 743px) {
				gap: 1.5rem;
			}
			li {
				width: 100%;
				& + li {
					margin-top: 8rem;
				}
			}
		}
		&.-img2 {
			padding: 4rem;
			@media screen and (max-width: 743px) {
				padding: 2rem;
			}
			.sub {
				position: absolute;
				width: 15rem;
				width: calc(15 / 48 * 100%);
				box-shadow: 0 0 4rem rgba(0,225,255,.1);
				img {
					border-radius: 0;
				}
				&.-sub1 {
					top: 0;
					left: 0;
				}
				&.-sub2 {
					right: 0;
					bottom: 0;
				}
			}
		}
		&.-img3 {
			.sub {
				position: relative;
				width: 50rem;
				width: calc(50 / 60 * 100%);
				img {
					border-radius: 0;
				}
				&.-sub1 {
					height: 0;
					margin-top: 6.5rem;
					position: relative;
					z-index: 2;
					img {
						transform: translate(calc(12 / 50 * 100%), -50%);
					}
					@media screen and (max-width: 743px) {
						margin-top: 3rem;
					}
				}
			}
		}
		&.-img4 {
			padding-top: 12rem;
			@media screen and (max-width: 743px) {
				padding-top: 6rem;
			}
			.main {
				width: 43rem;
				width: calc(43 / 60 * 100%);
				margin-left: auto;
			}
			.sub {
				position: absolute;
				z-index: -1;
				&.-sub1 {
					top: 0;
					left: -2rem;
					width: 30rem;
					width: calc(30 / 60 * 100%);
				}
				&.-sub2 {
					bottom: -5rem;
					left: -1rem;
					width: 21rem;
					width: calc(21 / 60 * 100%);
					@media screen and (max-width: 743px) {
						bottom: -3rem;
					}
				}
			}
		}
		&.-img5 {
			@media screen and (max-width: 743px) {
				margin-bottom: 7rem;
			}
			.main {
				position: relative;
				width: 37rem;
				width: calc(37 / 55 * 100%);
				top: -6.5rem;
				left: -1rem;
				z-index: 2;
				@media screen and (max-width: 743px) {
					top: 0;
				}
			}
			.sub {
				position: absolute;
				right: 0;
				top: 10rem;
				width: 25rem;
				width: calc(25 / 55 * 100%);
				z-index: -1;
			}
		}
	}
	h2 {
		margin-inline: -.5em;
	}
}

.features_expansion {
	position: relative;
	margin-top: 45rem;
	text-align: center;
	z-index: 1;
	@media screen and (max-width: 743px) {
		margin-top: 16rem;
	}
	.lead_text {
		margin-top: 4rem;
		@media screen and (max-width: 743px) {
			margin-top: 2rem;
		}
	}
	.btn {
		margin-top: 8rem;
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
		}
	}
	.bg {
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		min-height: 90rem;
		display: flex;
		transform: translateY(-50%);
		-webkit-mask-image: linear-gradient(to bottom, transparent 3%, black 20%, black 80%, transparent 97%);
		mask-image: linear-gradient(to bottom, transparent 3%, black 20%, black 80%, transparent 97%);
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		z-index: -1;
		@media screen and (max-width: 743px) {
			min-height: 160%;
		}
		& > * {
			width: 100%;
		}
		img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	}
}


/* ======================================================================================

	活用分野

====================================================================================== */
.cases_contents {
	.main {
		position: relative;
		margin-bottom: 18rem;
		text-align: center;
		z-index: 1;
		@media screen and (max-width: 743px) {
			margin-bottom: 6rem;
		}
		.title_xl {
			margin-bottom: 4rem;
			line-height: calc(90 / 70);
			@media screen and (max-width: 743px) {
				margin-bottom: 2rem;
			}
		}
		.bg {
			position: absolute;
			right: 0;
			left: 0;
			top: 50%;
			min-height: 110rem;
			height: calc(100vw * (1100 / 1600));
			transform: translateY(-50%) translateY(-10rem);
			-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
			mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
			-webkit-mask-size: 100% 100%;
			mask-size: 100% 100%;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			z-index: -1;
			@media screen and (max-width: 743px) {
				height: 52rem;
				min-height: 0;
				transform: translateY(-50%);
			}
		}
	}
	.cases {
		padding: 10rem 10rem 9rem;
		background-color: rgba(30,30,40,.5);
		border-radius: .6rem;
		@media screen and (max-width: 743px) {
			padding: 3rem 2rem;
			margin-inline: 2rem;
		}
		& + .cases {
			margin-top: 2rem;
		}
		.number {
			margin-bottom: 7rem;
			font-size: 5rem;
			line-height: 1.2;
			@media screen and (max-width: 743px) {
				margin-bottom: 2rem;
				font-size: 2.4rem;
			}
		}
		.info {
			.img {
				width: 32rem;
				@media screen and (max-width: 743px) {
					width: auto;
					margin-bottom: 2rem;
				}
				img {
					border-radius: .6rem;
				}
			}
			.name {
				margin-bottom: 2rem;
				font-weight: var(--font-weight-bold);
				font-size: 2.4rem;
				line-height: 1.5;
				@media screen and (max-width: 743px) {
					margin-bottom: 1rem;
					font-size: 1.6rem;
				}
			}
			@media screen and (min-width: 744px), print {
				display: flex;
				justify-content: space-between;
				flex-direction: row-reverse;
				.img {
					flex-shrink: 0;
					margin-left: 7rem;
				}
			}
		}
		.voice {
			margin-top: 6rem;
			padding-top: 5rem;
			border-top: 1px solid var(--color-theme);
			@media screen and (max-width: 743px) {
				margin-top: 2rem;
				padding-top: 2rem;
			}
			dt {
				margin-bottom: 1em;
				font-weight: var(--font-weight-bold);
				&::before {
					content: "【 ";
				}
				&::after {
					content: " 】";
				}
			}
		}
	}
}
.cases_solution {
	position: relative;
	padding-top: 28rem;
	@media screen and (max-width: 743px) {
		padding-top: 10rem;
	}
	section {
		position: relative;
		@media screen and (min-width: 744px), print {
			& + section {
				margin-top: 28rem;
			}
			.img {
				position: absolute;
				top: -4rem;
			}
			&:nth-child(2n + 1) {
				padding-left: calc(var(--base-width) - 50rem);
				.img {
					left: 0;
				}
			}
			&:nth-child(2n) {
				padding-right: calc(var(--base-width) - 50rem);
				.img {
					right: 0;
				}
			}
			&.-solution1 {
				.img {
					width: 72rem;
					left: -10rem;
				}
			}
			&.-solution2 {
				.img {
					width: 68rem;
				}
			}
		}
		@media screen and (max-width: 743px) {
			& + section {
				margin-top: 6rem;
			}
			.img {
				margin-left: -1rem;
			}
			.title_after_en {
				margin-bottom: 2rem;
			}
			.more {
				margin-top: 3rem;
			}
		}
	}
}


/* ======================================================================================

	サンプル

====================================================================================== */
.sample-compare {
	.titles {
		display: flex;
		text-align: center;
		li {
			position: relative;
			width: 50%;
			padding-bottom: 3rem;
			font-size: 2.2rem;
			line-height: 1.5;
			font-weight: var(--font-weight-bold);
			@media screen and (max-width: 743px) {
				padding-bottom: 2rem;
				font-size: 1.2rem;
			}
			._ff_en {
				display: block;
				margin-top: 1rem;
				font-size: 1.4rem;
				margin-top: 0.5rem;
				@media screen and (max-width: 743px) {
					font-size: .9rem;
				}
			}
			&::before {
				content: "";
				position: absolute;
				right: 0;
				left: 0;
				top: -11rem;
				width: 38rem;
				aspect-ratio: 1;
				margin-inline: auto;
				background-color: #f00;
				opacity: 0.5;
				z-index: -1;
				@media screen and (max-width: 743px) {
					top: -4rem;
					width: 100%;
				}
			}
			&.original::before {
				background: radial-gradient(circle, #005bff 0%, rgba(0,91,255,0) 40%);
			}
			&.generated::before {
				background: radial-gradient(circle, #00f5a3 0%, rgba(0,245,163,0) 40%);
			}
		}
	}
	.compare-container {
		@media screen and (max-width: 743px) {
			margin-inline: 1rem;
		}
		img {
			width: var(--base-width);
			@media screen and (max-width: 743px) {
				width: calc(100vw - 1rem * 2);
				aspect-ratio: 710 / 480;
				object-fit: cover;
			}
		}
		video {
			width: var(--base-width);
			@media screen and (max-width: 743px) {
				width: calc(100vw - 1rem * 2);
				aspect-ratio: 710 / 480;
				object-fit: cover;
			}
		}
	}
}

.sample_contents {
	margin-top: 18rem;
	@media screen and (max-width: 743px) {
		margin-top: 8rem;
	}
	& > section {
		position: relative;
		& + section {
			margin-top: 18rem;
			@media screen and (max-width: 743px) {
				margin-top: 6rem;
			}
		}
	}
	h2 {
		position: relative;
		width: 7rem;
		font-size: 2.8rem;
		line-height: 1;
		text-align: center;
		@media screen and (min-width: 744px), print {
			position: absolute;
			top: .5rem;
			right: calc(50% + 55rem);
			@media screen and (min-width: 1400px) {
				top: calc(100% - 48rem / 2 - .5lh);
				right: min(calc(50% + 69rem), calc(100% - 7rem - 2rem));
			}
			&::before {
				content: "";
				position: absolute;
				right: 100%;
				top: 50%;
				width: 100rem;
				border-top: 1px solid var(--color-theme);
			}
		}
		@media screen and (max-width: 743px) {
			margin-bottom: 2rem;
			margin-inline: auto;
			&::before,
			&::after {
				content: "";
				position: absolute;
				top: 50%;
				width: 2rem;
				border-top: 1px solid var(--color-theme);
			}
			&::before {
				right: 100%;
			}
			&::after {
				left: 100%;
			}
		}
	}
}


/* ======================================================================================

	プライバシーポリシー

====================================================================================== */
.privacy_contents {
	& > section {
		margin-top: 8rem;
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
		}
	}
	h2 {
		margin-bottom: 1em;
		font-size: 2rem;
		line-height: 1.5;
		text-align: center;
		@media screen and (max-width: 743px) {
			font-size: 1.6rem;
		}
	}
}


/* ======================================================================================

	利用規約

====================================================================================== */
.terms_contents {
	& > section {
		margin-top: 8rem;
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
		}
		& + section {
			margin-top: 4rem;
			@media screen and (max-width: 743px) {
				margin-top: 3rem;
			}
		}
	}
	h2 {
		margin-bottom: 2rem;
		font-size: 1.8rem;
		line-height: 1.5;
		@media screen and (max-width: 743px) {
			margin-bottom: 1rem;
			font-size: 1.4rem;
		}
	}
	.lang-note {
		margin-top: 9rem;
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
		}
	}
	.date {
		margin-top: 3rem;
		@media screen and (max-width: 743px) {
			margin-top: 2rem;
		}
	}
}


/* ======================================================================================

	ニュース

====================================================================================== */
.news_list_block {
	article {
		padding-bottom: 4rem;
		border-bottom: 1px solid var(--color-theme);
		&:not(:first-child) {
			padding-top: 10rem;
			@media screen and (max-width: 743px) {
				padding-top: 4rem;
			}
		}
	}
	a {
		display: block;
		text-decoration: none;
		line-height: 1.3;
		@media screen and (min-width: 744px), print {
			display: flex;
			align-items: start;
			.ph {
				width: 32rem;
				margin-right: 4rem;
				flex-shrink: 0;
			}
		}
		.ph {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			aspect-ratio: 320 / 180;
			@media screen and (max-width: 743px) {
				margin-bottom: 2rem;
			}
			&.-no-img {
				background-color: var(--bg-body);
				img {
					width: 60%;
				}
			}
		}
		.content {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
		time {
			margin-right: 2rem;
			letter-spacing: 0;
			font-weight: 400;
			font-size: 1.4rem;
			padding-top: 0.2em;
			@media screen and (max-width: 743px) {
				padding-top: 0.1em;
				font-size: 1.3rem;
			}
		}
		.category {
			position: relative;
			border-right: 2px solid var(--color-theme);
			flex-shrink: 0;
			letter-spacing: 0;
			padding-right: 2rem;
			font-size: 1.4rem;
			@media screen and (max-width: 743px) {
				font-size: 1.3rem;
			}
		}
		.title {
			width: 100%;
			margin-top: 3rem;
			font-weight: var(--font-weight-bold);
			font-size: 2.4rem;
			line-height: 1.5;
			@media screen and (max-width: 743px) {
				margin-top: 2rem;
				font-size: 1.8rem;
			}
		}
	}
}
.wp-pagenavi {
	position: relative;
	margin-top: 8rem;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	font-size: 2rem;
	line-height: 1.2;
	font-family: var(--font-family-en);
	font-weight: 500;
	font-style: normal;
}
.wp-pagenavi > * {
	position: relative;
	display: flex;
	padding: 0 1rem;
	justify-content: center;
	align-items: center;
}
.wp-pagenavi a {
	color: #fff;
	text-decoration: none;
}
.wp-pagenavi .current {
	color: var(--color-theme);
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
	overflow: hidden;
	justify-content: start;
	background-color: transparent !important;
	text-indent: -999em;
}
.wp-pagenavi .previouspostslink::before,
.wp-pagenavi .nextpostslink::before {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(50% - 0.7rem);
	width: 1.4rem;
	height: 1.4rem;
	border-top: .1rem solid var(--color-base);
	border-right: .1rem solid var(--color-base);
	transform-origin: 100% 0;
	transform: rotate(45deg);
}
.wp-pagenavi .previouspostslink {
	transform: scaleX(-1);
}
@media (hover) {
	.wp-pagenavi a:hover {
		color: var(--color-theme);
	}
	.wp-pagenavi .previouspostslink:hover,
	.wp-pagenavi .nextpostslink:hover {
		opacity: 0.5;
	}
}
@media screen and (max-width: 743px) {
	.wp-pagenavi {
		gap: 0.6rem;
		margin-top: 5rem;
		font-size: 1.6rem;
	}
	.wp-pagenavi .extend {
		display: none;
	}
}

.entry_detail {
	padding: 10rem 10rem 12rem;
	background-color: rgba(30,30,40,.5);
	@media screen and (max-width: 743px) {
		padding: 3rem 2rem 6rem;
	}
}
.entry_header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	line-height: 1.3;
	margin-bottom: 8rem;
	padding-bottom: 5rem;
	border-bottom: 1px solid var(--color-theme);
	@media screen and (max-width: 743px) {
		margin-bottom: 4rem;
		padding-bottom: 3rem;
	}
	time {
		margin-right: 2rem;
		letter-spacing: 0;
		font-weight: 400;
		font-size: 1.4rem;
		padding-top: 0.2em;
		@media screen and (max-width: 743px) {
			padding-top: 0.1em;
			font-size: 1.3rem;
		}
	}
	.category {
		position: relative;
		border-right: 2px solid var(--color-theme);
		flex-shrink: 0;
		letter-spacing: 0;
		padding-right: 2rem;
		font-size: 1.4rem;
		@media screen and (max-width: 743px) {
			font-size: 1.3rem;
		}
	}
	h1 {
		width: 100%;
		margin-top: 2rem;
		font-weight: var(--font-weight-bold);
		font-size: 3rem;
		line-height: 1.5;
		@media screen and (max-width: 743px) {
			font-size: 2.2rem;
		}
	}
}
.entry_footer {
	padding-top: 4rem;
	border-top: 1px solid var(--color-theme);
	.entry_pager {
		display: flex;
		li {
			max-width: 40%;
			&.next {
				margin-left: auto;
			}
		}
		a {
			display: block;
			text-decoration: none;
			font-weight: var(--font-weight-medium);
			.dt {
				position: relative;
				display: block;
				margin-bottom: 1rem;
				.prev & {
					padding-left: 2rem;
					&::before {
						content: "";
						position: absolute;
						top: 50%;
						left: 0;
						width: 1.2rem;
						height: 1.2rem;
						border-top: 2px solid;
						border-left: 2px solid;
						transform-origin: 0 0;
						transform: rotate(-45deg);
					}
				}
				.next & {
					padding-right: 2rem;
					text-align: right;
					&::before {
						content: "";
						position: absolute;
						top: 50%;
						right: 0;
						width: 1.2rem;
						height: 1.2rem;
						border-top: 2px solid;
						border-right: 2px solid;
						transform-origin: 100% 0;
						transform: rotate(45deg);
					}
				}
			}
			.title {
				display: block;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				margin-top: 0.3em;
				color: var(--color-base);
				text-decoration: underline;
				@media (hover) {
					a:hover & {
						text-decoration: none;
					}
				}
				@media screen and (max-width: 743px) {
					display: none;
				}
			}
		}
	}
	.back_btn {
		margin-top: 10rem;
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
		}
	}
}


/* ======================================================================================

	お問い合わせ

====================================================================================== */
.contact_contents {
	padding: 10rem 10rem 12rem;
	background-color: rgba(30,30,40,.5);
	@media screen and (max-width: 743px) {
		padding: 3rem 2rem 6rem;
	}
	.lead_text {
		margin-bottom: 7rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 3rem;
		}
	}
	.notes {
		margin: 8rem 0 7rem;
		text-align: center;
		font-size: 1.4rem;
		line-height: 2;
		@media screen and (max-width: 743px) {
			margin: 5rem 0 4rem;
			text-align: left;
			font-size: 1.3rem;
		}
	}

	.form_item {
		@media screen and (min-width: 744px), print {
			display: flex;
			align-items: start;
			justify-content: space-between;
		}
		dt {
			position: relative;
			font-weight: var(--font-weight-bold);
			font-size: 2rem;
			@media screen and (min-width: 744px), print {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 25rem;
				height: 6rem;
				html[lang="en"] & {
					width: 26rem;
				}
			}
			@media screen and (max-width: 743px) {
				display: flex;
				align-items: center;
				margin-bottom: 1.5rem;
				font-size: 1.6rem;
				line-height: 1.5;
			}
		}
		dd {
			@media screen and (min-width: 744px), print {
				width: 72rem;
			}
		}
		.hissu {
			color: var(--color-theme);
			font-size: 1.2rem;
			line-height: 1.4;
			font-weight: var(--font-weight-medium);
			@media screen and (max-width: 743px) {
				margin-left: 1em;
				padding-top: 0.2em;
			}
		}
		&.form_check {
			justify-content: center;
			align-items: center;
			gap: 3rem;
			@media screen and (max-width: 743px) {
				margin-bottom: 3rem;
				text-align: center;
			}
			dt {
				width: 31rem;
				height: 5rem;
				font-size: 1.6rem;
				text-align: left;
				html[lang="en"] & {
					width: 48rem;
				}
				@media screen and (max-width: 743px) {
					height: auto;
					justify-content: center;
					margin-bottom: 0;
					font-size: 1.3rem;
					html[lang="en"] & {
						width: auto;
					}
				}
			}
			dd {
				width: auto;
			}
			label {
				height: 5rem;
				@media screen and (max-width: 743px) {
					height: 4rem;
				}
			}
		}
	}
	.form_input {
		.form_item + .form_item {
			margin-top: 4rem;
			padding-top: 4rem;
			border-top: 1px solid var(--color-theme);
			@media screen and (max-width: 743px) {
				margin-top: 2rem;
				padding-top: 2rem;
			}
		}
	}
	.privacy {
		display: flex;
		justify-content: center;
	}

	.submit {
		margin-top: 6rem;
		text-align: center;
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
		}
		button:disabled {
			opacity: 0.3;
			pointer-events: none;
		}
	}
}


form input[type=text],
form input[type=email],
form input[type=tel],
form input[type=number],
form textarea,
form select {
	width: 100%;
	height: 6rem;
	padding: 0 1em;
	background-color: #fff;
	border: 1px solid #b2b2b2;
	border-radius: 0;
	color: #000;
	font-size: 1.8rem;
}
form textarea {
	width: 100%;
	height: 22rem;
	padding-top: 0.8em;
	padding-bottom: 0.8em;
}
form select {
	width: auto;
	padding: 0 30px 0 1em;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%226%22%20viewBox%3D%220%200%209%206%22%3E%3Cpath%20d%3D%22M8.995%2C.297L4.5%2C5.704%2C.005%2C.296H8.995Z%22%20fill%3D%22%23333%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: calc(100% - 10px);
}
form select::-ms-expand {
	display: none;
}
form input[type=text],
form input[type=email],
form input[type=tel],
form input[type=number],
form select,
form textarea {
	transition: box-shadow .2s, border .2s;
}
form input[type=text]:focus,
form input[type=email]:focus,
form input[type=tel]:focus,
form input[type=number]:focus,
form select:focus,
form textarea:focus {
	border-color: #66afe9;
	outline: 0;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,0.8);
}
form input[type=text]:disabled,
form input[type=email]:disabled,
form input[type=tel]:disabled,
form input[type=number]:disabled,
form select:disabled,
form textarea:disabled {
	background-color: #ddd;
	opacity: .5;
}
form ::-webkit-input-placeholder {
	color: #a6a6a6;
}
form :-ms-input-placeholder {
	color: #a6a6a6;
}
form ::-moz-placeholder {
	color: #a6a6a6;
}
form input[type=checkbox],
form input[type=radio] {
	position: absolute;
	width: 2rem;
	height: 2rem;
}
form label {
	position: relative;
	display: flex;
	align-items: center;
	height: 6rem;
	font-size: 1.6rem;
}
form label input[type=radio] + span {
	position: relative;
	padding-left: 3rem;
}
form label input[type=radio] + span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -1rem;
	width: 2rem;
	height: 2rem;
	background-color: #fff;
	border: 1px solid #b2b2b2;
	border-radius: 100%;
}
form label input[type=radio] + span::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1rem;
	height: 1rem;
	margin-top: -.5rem;
	margin-left: .5rem;
	background-color: var(--color-theme);
	border-radius: 100%;
	opacity: 0;
	transition: opacity .1s;
}
form label input[type=radio]:checked + span::after {
	opacity: 1;
}
form label input[type=checkbox] + span {
	position: relative;
	padding-left: 3rem;
}
form label input[type=checkbox] + span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -1rem;
	width: 2rem;
	height: 2rem;
	background-color: #fff;
	border: 1px solid #b2b2b2;
}
form label input[type=checkbox] + span::after {
	content: "";
	position: absolute;
	left: 7px;
	top: calc(50% - 8px);
	width: 7px;
	height: 14px;
	border-right: 3px solid var(--color-theme);
	border-bottom: 3px solid var(--color-theme);
	opacity: 0;
	transition: opacity .1s;
	transform: rotate(45deg);
}
form label input[type=checkbox]:checked + span::after {
	opacity: 1;
}
@media screen and (max-width: 743px) {
	form input[type=text],
	form input[type=email],
	form input[type=tel],
	form input[type=number],
	form textarea,
	form select {
		height: 5rem;
		font-size: 1.6rem;
	}
	form textarea {
		height: 15rem;
	}
}
form .wpcf7-list-item {
	margin: 0;
}

.contact_fin_contents {
	padding: 10rem 10rem 12rem;
	background-color: rgba(30,30,40,.5);
	text-align: center;
	@media screen and (max-width: 743px) {
		padding: 3rem 2rem 6rem;
	}
	.btn {
		margin-top: 7rem;
		@media screen and (max-width: 743px) {
			margin-top: 3rem;
		}
	}
}