@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap');
@import url("https://use.typekit.net/vxt0gvy.css");
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Dots&family=Zen+Old+Mincho&display=swap');
/*
Theme Name: It Solution Group
Theme URI: null
Description: Description
Author: 81bridge - SGX
Version: 1.0
*/

:root {
	--color-main: #eb5a1e;
	--color-sub: #1b4fa0;
	--color-dark: #111;
	--color-bg: #f4f1ea;
	--color-txt-gray: #8b857b;
	--font-ttl: "Anton", sans-serif;
	--font-en: "Roboto Mono", monospace;
	--font-serif: "Zen Old Mincho", serif;
}

.aligncenter {
	display: block;
	margin: 0 auto;
}

.alignright {
	float: right;
}

.alignleft {
	float: left;
}

img[class*="wp-image-"],
img[class*="attachment-"] {
	height: auto;
	max-width: 100%;
}

.wp-block-image figure,
.wp-block-image figcaption {
	display: block;
}

a.nolink,
a.nolink:hover {
	opacity: 1;
	cursor: default;
	pointer-events: none;
}

/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 1em;
}

html {
	font-size: 62.5%;
}

body,
table,
input,
textarea,
select,
option {
	font-family: 'Noto Sans JP', sans-serif;
}

article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
	display: block;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

p {
	line-height: 1.6;
}

img {
	vertical-align: top;
	max-width: 100%;
	height: auto;
}

a,
a:link {
	color: #212836;
	text-decoration: none;
	transition: .3s;
	-webkit-transition: .3s;
}

a:visited {
	color: #212836;
}

a:hover {
	color: #212836;
}

a:active {
	color: #212836;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* clearfix */
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

/* flex */
.flex,
.flexA,
.flexB,
.flexC {
	display: flex;
	flex-wrap: wrap;
}

.flexA {
	justify-content: space-around;
}

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

.flexC {
	justify-content: center;
}

.colorMain {
	color: var(--color-main);
}

.colorSub {
	color: var(--color-sub);
}

.colorLight {
	color: #fff;
}

/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
body {
	color: #212836;
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1.5;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	background-color: #FFF;
	background-color: var(--color-bg);
}

body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
}

#container {
	padding-top: 83px;
	overflow: clip;
	text-align: left;
	position: relative;
}

.special #container {
	padding: 0;
}

#main {
	display: block;
}

#main:not(.topPage) {
	padding-top: 100vh;
}

.Page {
	min-height: 65vh;
	padding: 80px 0;
	background-color: var(--color-bg);
	position: relative;
	z-index: 1;
}

a[href^="tel:"] {
	cursor: default;
	pointer-events: none;
}

@media all and (min-width: 897px) {
	.sp {
		display: none !important;
	}
}

@media all and (max-width: 896px) {
	body {
		min-width: inherit;
		font-size: 1.4rem;
	}

	a:hover,
	a:hover img {
		opacity: 1 !important;
	}

	.pc {
		display: none !important;
	}

	a[href^="tel:"] {
		cursor: pointer;
		pointer-events: auto;
	}

	#main {
		/* margin-bottom: 50px; */
		margin-top: 0;
	}

	#container {
		padding-top: 60px;
	}
}

@media all and (min-width: 641px) {
	.ssp {
		display: none !important;
	}
}

@media all and (max-width: 640px) {
	.spc {
		display: none !important;
	}
}

/*------------------------------------------------------------
	loading
------------------------------------------------------------*/
body.is-loading {
	overflow: hidden;
}

body.is-loading #container {
	visibility: hidden;
}

#loading {
	position: fixed;
	inset: 0;
	z-index: 999999;
	overflow: hidden;
}

#loading svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.loadingCatch {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
}

.catch {
	position: absolute;
	opacity: 0;
	color: #fff;
	font-size: clamp(30px, 6.4vw, 92px);
	font-weight: 900;
}

.catch:last-child {
	font-family: var(--font-ttl);
	font-size: clamp(40px, 6vw, 82px);
	font-weight: 400;
}

.loadingProgress {
	position: absolute;
	left: 60px;
	bottom: 36px;
	width: calc(100% - 120px);
	height: 1px;
	background: rgba(255, 255, 255, .15);
	z-index: 10;
}

.loadingBar {
	width: 0%;
	height: 100%;
	background: var(--color-main)
}

.loadingPercent {
	color: #fff;
	font-family: var(--font-en);
	font-size: 9px;
	letter-spacing: .2em;
	text-transform: uppercase;
	position: absolute;
	right: 0;
	bottom: 12px;
}

@media (width < 840px) {
	.loadingProgress {
		left: 24px;
		width: calc(100% - 48px);
	}
}

@media (scripting:none) {
	#loading {
		display: none;
	}

	.hidden {
		display: block;
	}
}

/*------------------------------------------------------------
	cursor
------------------------------------------------------------*/
.cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #ffffff40;
	color: var(--color-dark);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	backdrop-filter: blur(2px);
	/* border: 1px solid #ffffff40; */
	border: 1px solid var(--color-main);
	transform: translate(-50%, -50%) scale(0);
	transition: transform .3s;
	z-index: 9999;
}

.cursor::before {
	content: "→";
	font-size: 16px;
	transform: rotate(-30deg);
}

.cursor::after {
	content: "";
}

.cursorTarget {
	cursor: none;
}

.cursor.is-active {
	transform: translate(-50%, -50%) scale(1);
}

/* comMore */
.cursor.is-more {
	border-color: var(--color-main);
}

.cursor.is-more::before {
	color: var(--color-main);
}

.cursor.is-more::after {
	content: "VIEW";
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--color-dark);
	transform: rotate(0);
}

/* expandBtn */
.cursor.read::after {
	content: "READ";
}

.cursor.close::after {
	content: "CLOSE";
}


/* service */
body:has(.scard:hover) .cursor {
	border-color: var(--color-main);
}

body:has(.scard:hover) .cursor::before {
	color: var(--color-main);
}

body:has(.scard:hover) .cursor::after {
	content: "Owned Media";
	text-align: center;
	color: #fff;
}

body:has(.scard:nth-child(2):hover) .cursor::after {
	content: "CCMP";
	text-align: center;
}

body:has(.scard:nth-child(3):hover) .cursor::after {
	content: "RCMP";
	text-align: center;
}

body:has(.scard:nth-child(4):hover) .cursor::after {
	content: "MEO";
	text-align: center;
}


/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/
#gHeader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40px;
	height: 68px;
	background: transparent;
	transition: background .4s, border-color .4s;
}

.special01 #gHeader {
	background: none;
}

#gHeader h1 a {
	display: flex;
	align-items: center;
	gap: 15px;
}

#gHeader h1 .logoImg {
	width: 48px;
}

#gHeader h1 .txtLogo {
	width: 290px;
	margin-top: 6px;
	color: #fff;
	transition: .4s ease;
}

#gHeader h1 .txtLogo.on {
	color: var(--color-dark);
}

#gHeader .headerNav {
	padding: 0.25em 0.75em;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 100px;
}

#gHeader .headerNav ul {
	display: flex;
	align-items: center;
}

#gHeader .headerNav li a {
	padding: 0.75em 1.25em;
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	display: flex;
	transition: color .3s;
}

#gHeader .rBox .btn a {
	padding: 1.25em 1.75em;
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
	background-color: var(--color-main);
	display: flex;
	border: 1px solid var(--color-main);
	border-radius: 100px;
	transition: color .3s, background .3s, border .3s;
}

#gHeader .rBox .btn .img {
	margin: 0 12px 0 0;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

#gHeader .menu-btn {
	width: 82px;
	padding: 6px 12px 16px;
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-txt-gray);
	background-color: #ffffff20;
	backdrop-filter: blur(4px);
	border-radius: 100px;
	border: 1px solid var(--color-main);
	cursor: pointer;
	position: relative;
}

#gHeader .menu-btn::before {
	content: "MENU";
}

#gHeader .menu-btn.on::before {
	content: "CLOSE";
}

.menu-btn span {
	width: 32px;
	height: 1px;
	background-color: var(--color-txt-gray);
	position: absolute;
	left: calc(50% - 16px);
	transition: all .4s, bottom .1s;
}

.menu-btn span:nth-of-type(1) {
	bottom: 11px;
}

.menu-btn span:nth-of-type(2) {
	bottom: 8px;
}

.menu-btn.on span {
	bottom: 9px !important;
}

.menu-btn.on span:nth-of-type(1) {
	transform: rotate(12deg);
}

.menu-btn.on span:nth-of-type(2) {
	transform: rotate(-12deg);
}

.menuBox {
	width: 100%;
	height: calc(100% - 60px);
	background: var(--color-dark);
	position: fixed;
	right: 0;
	top: 60px;
	z-index: 1000;
	overflow-y: auto;
	transform: translateX(100%);
	transition: .6s;
}

.menuBox .menuWrapper {
	height: fit-content;
	padding: 60px 50px 100px 60px;
	position: absolute;
	bottom: 0;
}

.menuBox .ttl {
	padding: 6px;
	font-family: var(--font-en);
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: var(--color-main);
	display: flex;
	align-items: center;
	gap: 0.75em;
	position: relative;
}

.menuBox .ttl:after {
	content: "";
	flex: 0;
	width: 1px;
	background-color: #fff;
	transition: all .5s .8s;
}

.menuBox.open {
	transform: translateX(0);
}

.menuBox.open .ttl:after {
	flex: 1;
}

.menuBox .naviUl li a {
	padding: 6px 32px 6px 12px;
	font-family: var(--font-ttl);
	font-size: 2rem;
	letter-spacing: 0.06em;
	font-weight: 500;
	color: #fff;
	display: block;
	position: relative;
}

.menuBox .naviUl li.contact a {
	color: var(--color-main);
}

/* topPage */
#gHeader.topPage .headerNav {
	background-color: unset;
	border: unset;
}

#gHeader.topPage .headerNav li a {
	color: #cfcfd2;
}

#gHeader.topPage .rBox .btn a {
	color: #cfcfd2;
	background-color: #ffffff20;
	border-color: #cfcfd2;
}

#gHeader.menu-open h1 .txtLogo,
#gHeader.on h1 .txtLogo {
	color: var(--color-dark);
}

#gHeader.on .headerNav {
	background: #fff;
}

#gHeader.on.topPage .headerNav li a {
	color: var(--color-dark);
}

#gHeader.on.topPage .rBox .btn a {
	color: #fff;
	background-color: var(--color-main);
	border-color: var(--color-main);
}

#gHeader .headerNav li a:hover {
	color: var(--color-main);
}

#gHeader .rBox .btn a:hover {
	color: var(--color-main);
	background-color: #fff;
}

#gHeader.topPage .headerNav li a:hover {
	color: var(--color-main);
}

#gHeader.topPage .rBox .btn a:hover {
	color: var(--color-main);
	border-color: var(--color-main);
}

#gHeader.on.topPage .rBox .btn a:hover {
	color: var(--color-main);
	background-color: #fff;
}

#gHeader.menu-open {
	background-color: #fff;
}

@media all and (min-width: 897px) {
	#gHeader .menu-btn:hover {
		opacity: 0.7;
	}

	.menuBox .naviUl li a:hover:before {
		right: -15px;
	}
}

@media all and (max-width: 896px) {
	#gHeader {
		height: 60px;
		padding: 0 24px;
		/* background: #fff; */
	}

	#gHeader h1 .logoImg {
		width: 32px;
	}

	#gHeader h1 .txtLogo {
		width: 160px;
	}

	#gHeader .rBox .btn a {
		height: 35px;
		width: 96px;
		font-size: 1.2rem;
		letter-spacing: 0.03em;
	}

	#gHeader .rBox .btn .img {
		margin: 7px 6px 0 0;
	}
}

@media (width < 640px) {
	.menuBox .menuWrapper {
		padding: 60px 50px 40px 24px;
	}
}


/*------------------------------------------------------------
	pagePath
------------------------------------------------------------*/
.topBg {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 5%;
}

#pagePath {
	max-width: 1920px;
	padding: 0 20px;
	margin: 0 auto;
}

#pagePath li {
	margin-right: 10px;
	display: inline;
	letter-spacing: 0.08em;
}

#pagePath li a {
	padding-right: 30px;
	display: inline-block;
	background: url("img/common/icon04.png") no-repeat right center;
	background-size: 9px auto;
}

#pagePath li img {
	margin: -3px 0 0;
	display: inline-block;
	vertical-align: middle;
}

#pagePath li a:hover {
	opacity: 0.7;
}

@media all and (max-width: 896px) {
	.topBg {
		position: relative;
		bottom: 0;
	}

	#pagePath {
		max-width: inherit;
		padding: 0 24px;
		margin-top: 2em;
	}

	#pagePath li {
		margin-right: 9px;
	}

	#pagePath li a {
		padding-right: 26px;
		background: url("img/common/sp_icon03.png") no-repeat right center;
		background-size: 8px auto;
	}

	#pagePath li img {
		margin: -3px 0 0;
	}
}

/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/
#gFooter {
	background: #0f0e0d;
	color: #fff;
	padding: 90px 60px 40px;
	position: relative;
	z-index: 1;
}

#gFooter .footerLogo {
	width: 240px;
	display: flex;
	align-items: center;
}

#gFooter .footerLogo img {
	width: 100%;
}

#gFooter .footerNav ul {
	gap: 64px;
}

#gFooter .footerNavItem h3 {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: .16em;
	color: #8b857b;
	margin-bottom: 18px;
}

#gFooter .footerNavItem a {
	display: block;
	margin-bottom: 12px;
	font-size: 13px;
	text-decoration: none;
	color: #d8d3ca;
	transition: color .3s;
}

#gFooter .footerNavItem a:hover {
	color: var(--color-main);
}

#gFooter small {
	max-width: 1280px;
	margin: 64px auto 0;
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: .06em 0.66px;
	color: #8b857b;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.pageTop {
	position: fixed;
	right: 16px;
	bottom: 24px;
	z-index: 600;
}

.pageTop a {
	color: #8b857b;
	background-color: #ffffff20;
	padding: 0.25em 0.25em 0.75em;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 100px;
	border: 1px solid var(--color-main);
	backdrop-filter: blur(4px);
}

.pageTop a:hover {
	opacity: 0.7;
}

@media all and (max-width: 896px) {
	#gFooter {
		padding: 60px 0 20px;
	}

	.special #gFooter {
		border-top: none;
	}

	#gFooter .footerMenu {
		justify-content: center;
		gap: 40px;
	}

	#gFooter address {
		font-size: 1.2rem;
		text-align: center;
	}

	.pageTop {
		display: none;
	}
}

@media (width < 540px) {
	#gFooter .footerNav ul {
		gap: 40px;
	}

	#gFooter .footerNav .footerNavItem {
		max-width: 260px;
		width: 100%;
		padding-top: 6px;
		padding-left: 60px;
		position: relative;
	}

	#gFooter .footerNav .footerNavItem h3 {
		writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		position: absolute;
		top: 0;
		left: 20px;
	}
}

/*------------------------------------------------------------
	content
------------------------------------------------------------*/
.content {
	/* max-width: 1280px; */
	max-width: 1600px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
}

@media all and (max-width: 896px) {
	.content {
		max-width: inherit;
		padding: 0 24px;
	}
}

/*------------------------------------------------------------
	pageTitle
------------------------------------------------------------*/
.pageTitle {
	margin-bottom: 26px;
	padding: 93px 0 63px;
	text-align: center;
	border-bottom: 1px solid #D1CFCF;
}

.pageTitle .headLine01 .en {
	margin-bottom: 8px;
	display: block;
	font-size: 5.4rem;
	font-weight: 700;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0.08em;
}

.pageTitle .headLine01 .jp {
	display: block;
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

@media all and (max-width: 896px) {
	.pageTitle {
		margin-bottom: 13px;
		padding: 18px 0 30px;
	}

	.pageTitle .headLine01 .en {
		margin-bottom: 2px;
		font-size: 3rem;
	}

	.pageTitle .headLine01 .jp {
		font-size: 1.6rem;
	}
}


/*------------------------------------------------------------
	fadeInUp
------------------------------------------------------------*/
.fadeInUp {
	opacity: 0;
	-webkit-transform: translateY(28px);
	transform: translateY(28px);
	transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform .8s cubic-bezier(.4, 0, .2, 1);
}

.fadeInUp.on {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

/*------------------------------------------------------------
slideInR
------------------------------------------------------------*/
.slideInR {
	opacity: 0;
	-webkit-transform: translateX(100px);
	transform: translateX(100px);
	transition: opacity .6s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.4, 0, .2, 1);
}

.slideInR.on {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateY(0);
}

/*------------------------------------------------------------
scaleIn
------------------------------------------------------------*/
.scaleIn {
	opacity: 0;
	-webkit-transform: scale(1.8);
	transform: scale(1.8);
	filter: blur(4px);
	transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform .8s cubic-bezier(.4, 0, .2, 1), filter .8s cubic-bezier(.4, 0, .2, 1);
}

.scaleIn.on {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
	filter: blur(0);
}

/*------------------------------------------------------------
scroll reveal
------------------------------------------------------------*/
.rv {
	opacity: 0;
	transform: translateY(48px);
	filter: blur(9px);
	transition: opacity 1.25s cubic-bezier(.16, 1, .3, 1),
		transform 1.25s cubic-bezier(.16, 1, .3, 1),
		filter 1.25s cubic-bezier(.16, 1, .3, 1);
}

.rv.in {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

.rv.d1 {
	transition-delay: .08s;
}

.rv.d2 {
	transition-delay: .16s;
}

.rv.d3 {
	transition-delay: .24s;
}

/*------------------------------------------------------------
js-char
------------------------------------------------------------*/
.js-char {
	perspective: 600px;
}

.js-char span {
	display: inline-block;
	opacity: 0;
	transform: translateX(30px) rotateY(90deg);
	transform-origin: right center;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

.menuBox.open .js-char span {
	animation: charAnime .6s cubic-bezier(.22, 1, .36, 1) forwards;
}

.footerNavItem.on .js-char span {
	animation: charAnime .6s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes charAnime {
	from {
		opacity: 0;
		transform: translateX(30px) rotateY(90deg);
	}

	to {
		opacity: 1;
		transform: translateX(0) rotateY(0deg);
	}
}

/*------------------------------------------------------------
	bound
------------------------------------------------------------*/
.bound {
	display: inline-block;
	/* animation: bound 3s forwards; */
}

@keyframes bound {
	0% {
		transform: translateY(0)
	}

	5% {
		transform: translateY(0)
	}

	10% {
		transform: translateY(-25px)
	}

	15% {
		transform: translateY(0)
	}

	20% {
		transform: translateY(-10px)
	}

	30% {
		transform: translateY(0)
	}

	100% {
		transform: translateY(0)
	}
}

/*------------------------------------------------------------
	heading02
------------------------------------------------------------*/
.heading02 {
	font-family: var(--font-ttl);
	margin-bottom: 30px;
	line-height: .84;
	letter-spacing: .004em;
	font-size: clamp(66px, 12.5vw, 190px);
}

/*------------------------------------------------------------
	heading03
------------------------------------------------------------*/
.heading03 {
	display: block;
	width: fit-content;
	padding: 0 4px;
	margin-bottom: 5.4em;
	font-family: var(--font-ttl);
	line-height: 1.05;
	letter-spacing: .004em;
	overflow: clip;
}

.heading03 .en {
	font-size: clamp(66px, 12vw, 160px);
	color: var(--color-main);
	text-shadow: 0 4px var(--color-dark);
}

.heading03 .jp {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 40px;
	font-size: clamp(16px, 3vw, 40px);
	color: var(--color-dark);
	position: relative;
}

.heading03 .jp::after {
	content: "";
	flex: unset;
	height: 2px;
	background-color: var(--color-dark);
	transition: .3s .4s;
}

.heading03.on .jp::after {
	flex: 1;
}

/*------------------------------------------------------------
		headLine04
------------------------------------------------------------*/
.headLine04 {
	margin-bottom: 0.75em;
	font-size: clamp(1.8rem, 2vw, 2rem);
}

/*------------------------------------------------------------
	comMore
------------------------------------------------------------*/
.comMore a {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--color-dark);
	text-decoration: none;
	padding-bottom: 5px;
	transition: color .3s;
	position: relative;
	cursor: none;
}

.comMore a::before {
	content: "";
	width: 100%;
	height: 1.5px;
	background-color: var(--color-dark);
	position: absolute;
	left: 0;
	bottom: 0;
	opacity: 0.8;
	transition: .3s ease;
}

.comMore a::after {
	content: "→";
	margin-left: 12px;
	color: var(--color-dark);
	transform: translateX(0);
	opacity: 0.8;
	transition: .3s ease;
}

.comMore a:hover::before {
	width: calc(100% + 6px);
}

.comMore a:hover::after {
	transform: translateX(6px);
}

/*------------------------------------------------------------
	comInner
------------------------------------------------------------*/
.comInner {
	max-width: 1280px;
	max-width: 1600px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	gap: 56px;
	align-items: center;
	position: relative;
	z-index: 1;
}

.comInner .photoBox {
	position: relative;
	aspect-ratio: 4/3;
	overflow: clip;
}

.comInner .photoBox .inner {
	width: 100%;
	height: 100%;
	position: absolute;
	will-change: transform;
}

.comInner .photoBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (width < 840px) {
	.comInner {
		max-width: 520px;
		grid-template-columns: 1fr;
	}
}

/*------------------------------------------------------------
	indexPage
------------------------------------------------------------*/
.indexPage {
	overflow-x: clip;
}

#kv-rig {
	height: 600vh;
	position: relative;
}

.mainVisual {
	width: 100%;
	/* height: 100vh; */
	position: relative;
	z-index: 0;
}

.mainVisual .kvInner {
	height: 100vh;
	overflow: clip;
	background: #0c0c0d;
	position: sticky;
	top: 0;
	z-index: 2;
}

.mainVisual .kvInner::before {
	content: "";
	background: linear-gradient(to right, rgba(12, 12, 13, .72) 0%, rgba(12, 12, 13, .30) 55%, rgba(12, 12, 13, .55) 100%);
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.mainVisual video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#kv-track {
	width: 400%;
	height: 100%;
	display: flex;
	will-change: transform;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.mainVisual .kvPanel {
	flex: 0 0 25%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 60px 100px;
}

.mainVisual .kvPanel.kvPanelkv {
	justify-content: flex-end;
}

.kvTag {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 28px;
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--color-main);
}

.kvTag::before {
	content: "";
	width: 36px;
	height: 1px;
	background-color: var(--color-main);
}

.mainCatchphrase {
	font-weight: 900;
	font-size: clamp(38px, 9vw, 158px);
	line-height: 1.02;
	letter-spacing: .005em;
	white-space: nowrap;
}

.subCatchphrase {
	margin-top: 26px;
	font-size: clamp(12px, 1.3vw, 14px);
	color: rgba(255, 255, 255, .65);
	line-height: 2;
	font-weight: 400;
}

.kvNumber {
	font-family: var(--font-ttl);
	font-size: 13px;
	color: var(--color-main);
	letter-spacing: .18em;
	margin-bottom: 8px;
}

.kvLabel {
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
	margin-bottom: 20px;
}

.kvPanel .panelTtl {
	font-family: var(--font-ttl);
	font-size: clamp(80px, 11vw, 180px);
	color: #fff;
	line-height: .92;
	margin-bottom: 14px;
}

.kvPanel.vision .panelTtl {
	font-size: clamp(72px, 10vw, 150px);
	line-height: .96;
}

.kvPanel.join .panelTtl {
	font-size: clamp(80px, 11vw, 140px);
}

.panelTxt {
	max-width: 800px;
	font-weight: 700;
	font-size: clamp(16px, 2.2vw, 52px);
	line-height: 1.55;
	color: #fff;
}

.kvPanel.vision .panelTxt {
	font-size: clamp(14px, 2vw, 40px);
	line-height: 1.6;
}

.kvPanel.join .panelTxt {
	font-size: clamp(14px, 1.8vw, 40px);
	line-height: 1.7;
}

.kvPanel em {
	font-style: normal;
	color: var(--color-main);
}

.panelTxt .name {
	display: block;
	margin-top: 16px;
	font-size: 12px;
	color: rgba(255, 255, 255, .5);
	font-weight: 500;
}

/*** progress bar ***/
#kv-progress {
	position: absolute;
	bottom: 36px;
	left: 60px;
	right: 60px;
	z-index: 4;
}

.kv-prog-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.kv-prog-count {
	font-family: var(--font-en);
	font-size: 11px;
	color: #fff;
	letter-spacing: .12em;
}

.kv-prog-count span {
	color: rgba(255, 255, 255, .35);
}

.kv-prog-scroll {
	font-family: var(--font-en);
	font-size: 9px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

.kv-prog-track {
	height: 1px;
	background: rgba(255, 255, 255, .16);
	position: relative;
}

#kv-prog-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 0;
	background: var(--color-main);
	transition: width .1s linear;
}

#kv-wipe {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	background: #edece6;
	z-index: 10;
	transform: translateY(100%);
	will-change: transform;
	border-top: 3px solid var(--color-main);
}

@media (width < 840px) {
	.mainVisual .kvInner {
		/* height: calc(100vh - 60px);
		top: 60px; */
	}

	.mainVisual .kvPanel {
		padding: 0 24px 100px;
	}

	.kvNumber {
		font-family: var(--font-ttl);
		font-size: 13px;
		color: var(--color-main);
		letter-spacing: .18em;
		margin-bottom: 8px;
	}

	.kvLabel {
		font-family: var(--font-en);
		font-size: 10px;
		letter-spacing: .2em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, .5);
		margin-bottom: 20px;
	}

	.kvPanel em {
		font-style: normal;
		color: var(--color-main);
	}

	.panelTxt .name {
		display: block;
		margin-top: 16px;
		font-size: 12px;
		color: rgba(255, 255, 255, .5);
		font-weight: 500;
	}

	/*** progress bar ***/
	#kv-progress {
		left: 24px;
		right: 24px;
	}
}

/*** indexPage section共通 ***/
.indexPage .sec {
	padding: 100px 60px;
	position: relative;
	overflow-x: clip;
}

.indexPage .ghostWord {
	position: absolute;
	font-family: var(--font-ttl);
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	letter-spacing: -.01em;
	font-size: clamp(150px, 28vw, 440px);
	color: rgba(17, 17, 17, .04);
	mix-blend-mode: multiply;
	z-index: 0;
	will-change: transform;
}

.indexPage .sec .headingBox .lbl {
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #8a857c;
	margin-bottom: 12px;
}

.indexPage .sec .txtBox .txt {
	font-size: 14px;
	line-height: 2;
	color: #46433d;
	max-width: 430px;
	margin: 6px 0 34px;
}


/*** MESSAGE SECTION ***/
#sec-message {
	padding-top: 160px;
	overflow-X: clip;
	position: relative;
	z-index: 0;
}

.indexPage #sec-message .ghostWord {
	top: 35%;
	left: 20%;
}

#sec-message .msgInner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start;
}

/* 左カラム */
#sec-message .number {
	font-family: var(--font-ttl);
	font-size: 13px;
	letter-spacing: .2em;
	color: var(--color-main);
	margin-bottom: 6px;
}

#sec-message .ttl {
	font-family: var(--font-ttl);
	font-size: clamp(80px, 12vw, 150px);
	line-height: .86;
	color: var(--color-dark);
	margin-bottom: 24px;
}

#sec-message .txt {
	font-weight: 900;
	font-size: clamp(22px, 3vw, 34px);
	line-height: 1.4;
	letter-spacing: .01em;
	color: var(--color-dark);
	border-left: 4px solid var(--color-main);
	padding-left: 20px;
	text-shadow: 1px 1px #fff, -1px -1px 1px #ffffff60, -1px 1px 1px #ffffff60, 1px -1px 1px #ffffff60;
}

/* #sec-message .txt span {} */


/* 右カラム */
#sec-message .msgBox {
	padding-top: 8px;
}

#sec-message .photo {
	width: 100%;
	aspect-ratio: 4/3;
	background: #e8e7e2;
	border-radius: 2px;
	overflow: clip;
	margin-bottom: 32px;
}

#sec-message .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: #e0ddd7;
}

/* アコーディオン */
#sec-message .txtAccordion {
	border-top: 0.5px solid rgba(0, 0, 0, .18);
}

#sec-message .txtAccordion button {
	cursor: none;
}

#sec-message .summaryTxt {
	padding: 20px 0;
	font-size: 13px;
	line-height: 2;
	color: #444;
	border-bottom: 0.5px solid rgba(0, 0, 0, .12);
}

#sec-message .expandBtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	background: none;
	border: none;
	padding: 0;
	border-bottom: 1.5px solid var(--color-dark);
	padding-bottom: 4px;
}

#sec-message .expandBtn:after {
	content: "↓";
	color: var(--color-main);
	font-size: 13px;
	transition: transform .3s;
}

#sec-message .expandBtn span {
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-dark);
}

#sec-message .closeBtn {
	display: none;
	visibility: hidden;
}

#sec-message .txtAccordion.is-open .openBtn {
	display: none;
}

#sec-message .txtAccordion.is-open .closeBtn {
	display: inline-flex;
	visibility: visible;
	transition: visibility .1s 2s ease;
}

#sec-message .expandBtn::after {
	content: "↓";
	color: var(--color-main);
	font-size: 13px;
	transition: transform .3s;
}

#sec-message .closeBtn::after {
	transform: rotate(180deg);
}

/* 展開する長文 */
#sec-message .fullTxt {
	overflow: clip;
	max-height: 0;
	transition: max-height .6s cubic-bezier(.4, 0, .2, 1), opacity .4s;
	opacity: 0;
}

#sec-message .fullTxt.open {
	max-height: 1200px;
	opacity: 1;
}

#sec-message .fullTxt p {
	font-size: 13px;
	line-height: 2.1;
	color: #444;
	padding: 16px 0;
	border-bottom: 0.5px solid rgba(0, 0, 0, .08);
}

#sec-message .fullTxt p:last-child {
	border-bottom: none;
}

#sec-message .name {
	margin-top: 28px;
	font-size: 13px;
	color: var(--color-dark);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 10px;
}

#sec-message .name::before {
	content: '';
	width: 24px;
	height: 1px;
	background: var(--color-main);
}

/*** NEWS SECTION ***/
.indexPage .newsSec {
	min-height: 100vh;
}

.indexPage .newsSec .headingBox {
	margin-bottom: 80px;
}

.indexPage .newsSec .comMore {
	width: fit-content;
	margin: 40px 0 0 auto;
}

/*** COMPANY SECTION・BUSINESS SECTION ***/
#sec-company,
#sec-business {
	padding: 120px 60px;
}

#sec-business {
	padding-bottom: 180px;
}

#sec-business .comInner {
	grid-template-columns: .98fr 1.02fr;
}

#sec-business .comInner .txtBox {
	order: 2;
}

#sec-business .comInner .photoBox {
	order: 1;
}

/*** SERVICE SECTION ***/
#sec-service {
	padding: 120px 60px 150px;
}

#sec-service .txtBox {
	position: relative;
	z-index: 1;
	margin-bottom: 62px;
	max-width: 760px;
}

#sec-service .txtBox .catchTxt {
	font-weight: 700;
	font-size: clamp(17px, 2.2vw, 26px);
	margin: 24px 0 14px;
	letter-spacing: .01em;
}

#sec-service .txtBox .txt {
	max-width: 620px;
}

.scards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	position: relative;
	z-index: 1;
	margin-bottom: 48px;
}

.scard {
	position: relative;
	aspect-ratio: 3/4;
	border-radius: 2px;
	overflow: hidden;
	background: #1c1c1e;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 26px 22px;
	text-decoration: none;
	isolation: isolate;
}

.scard .scard-bg {
	position: absolute;
	inset: 0;
	background: url(img/index/top_service01.jpg) no-repeat center/ cover;
	z-index: -2;
	transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

.scard:nth-child(2) .scard-bg {
	background-image: url(img/index/top_service02.jpg);
}

.scard:nth-child(3) .scard-bg {
	background-image: url(img/index/top_service03.jpg);
}

.scard:nth-child(4) .scard-bg {
	background-image: url(img/index/top_service04.jpg);
}

.scard::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(10, 9, 8, .05), rgba(10, 9, 8, .78));
}

.scard:hover .scard-bg {
	transform: scale(1.07);
}

.scard .swm {
	position: absolute;
	top: 20px;
	right: 22px;
	font-family: var(--font-ttl);
	font-size: clamp(36px, 4vw, 54px);
	color: rgba(255, 255, 255, .12);
	line-height: 1;
}

.scard .sen {
	font-family: var(--font-ttl);
	font-size: clamp(20px, 2.2vw, 26px);
	color: #fff;
	letter-spacing: .01em;
	line-height: 1.05;
}

.scard .sjp {
	font-weight: 500;
	font-size: 12px;
	color: #cfc9bf;
	margin-top: 8px;
	letter-spacing: .02em;
}

.scard .sline {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--color-main);
	margin-top: 14px;
	transition: width .5s cubic-bezier(.16, 1, .3, 1);
}

.scard:hover .sline {
	width: 54px;
}

/*** VOICE SECTION ***/
.indexPage .voiceSec {
	background: rgba(13, 12, 11, .7);
	color: #fff;
	padding: 130px 60px 140px;
}

.indexPage .voiceSec .ghostWord {
	color: rgba(255, 255, 255, .035);
	top: 8%;
	left: -3%;
	mix-blend-mode: overlay;
}

.indexPage .voiceSec .inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
}

.indexPage .voiceSec .lbl {
	color: #9b958a;
}

.indexPage .voiceSec .heading02 {
	color: #fff;
	margin-bottom: 48px;
}

.voice-viewport {
	width: 100%;
	padding-bottom: 100px;
}

.vcard {
	background: #191815;
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 3px;
	padding: 38px 34px;
	display: flex;
	flex-direction: column;
}

.vcard .quote {
	font-family: 'Anton', sans-serif;
	font-size: 64px;
	line-height: .6;
	color: var(--color-main);
	margin-bottom: 18px;
}

.vcard .vbody {
	font-size: 14px;
	line-height: 2;
	color: #d8d3ca;
	flex: 1;
}

.vcard .vmeta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
}

.vcard .vava {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
	background: #2a2622;
	flex-shrink: 0;
	position: relative;
}

.vcard .vava .ph::after {
	content: '';
}

.vcard .vname {
	font-weight: 700;
	font-size: 13px;
	color: #fff;
}

.vcard .vdate {
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: .08em;
	color: #8b857b;
	margin-top: 3px;
}

.voice-ctrl {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-top: 44px;
}

.v-arrows {
	display: flex;
	gap: 12px;
}

.v-arrows button {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .2);
	background: transparent;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	transition: background .3s, border-color .3s, color .3s;
	display: grid;
	place-items: center;
}

.v-arrows button:hover {
	background: var(--color-main);
	border-color: var(--color-main);
}

.v-prog {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: .1em;
	color: #cfc9bf;
}

.v-prog .v-cur {
	color: var(--color-main);
}

.v-dots {
	display: flex;
	gap: 9px;
	margin-left: auto;
}

.v-dots button {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, .22);
	cursor: pointer;
	padding: 0;
	transition: background .3s, transform .3s;
}

.v-dots button.on {
	background: var(--color-main);
	transform: scale(1.3);
}

.swiper-button-next,
.swiper-button-prev {
	position: unset;
}

.swiper-button-next:after,
.swiper-button-prev:after {
	content: none;
}

.swiper-pagination {
	display: block;
	position: relative;
	width: fit-content !important;
	text-align: end;
}

.swiper-pagination-bullet-active {
	background: var(--color-main);
}

/*** RECRUIT SECTION ***/
#sec-recruit {
	padding: 120px 60px 150px;
}

#sec-recruit .comInner {
	grid-template-columns: 1fr 1fr;
	gap: 60px;
}

#sec-recruit .photoBox {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

#sec-recruit .photoBox .photo {
	aspect-ratio: 3/4;
	background: #ded9cf;
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}

#sec-recruit .photoBox .photo:nth-child(2) {
	margin-top: 42px;
}

#sec-recruit .txtBox .txt {
	font-weight: 700;
	font-size: clamp(16px, 2vw, 20px);
	line-height: 1.9;
	margin: 6px 0 32px;
}

@media (width < 840px) {
	.indexPage .sec {
		padding: 80px 24px;
	}

	/*** MESSAGE SECTION ***/
	#sec-message .msgInner {
		grid-template-columns: 1fr;
	}

	.indexPage #sec-message .ghostWord {
		top: 25%;
	}

	#sec-message .name {
		justify-content: flex-end;
	}

	.indexPage .newsSec .comMore {
		margin-top: -26px;
	}

	/*** COMPANY SECTION・BUSINESS SECTION ***/
	#sec-company,
	#sec-business {
		padding: 100px 40px;
	}

	#sec-business .comInner {
		margin: 0 0 0 auto;
		grid-template-columns: 1fr;
	}

	#sec-business .comInner .photoBox {
		grid-row: 2/3;
	}

	/*** SERVICE SECTION ***/
	#sec-service {
		padding: 80px 24px;
	}

	.scards {
		grid-template-columns: repeat(2, 1fr);
	}

	#sec-recruit {
		padding: 80px 24px;
	}

	#sec-recruit .comInner {
		grid-template-columns: 1fr;
	}

	#sec-recruit .comInner .photoBox {
		grid-row: 2/3;
	}
}

@media (width < 540px) {
	.indexPage .sec {
		padding: 80px 0;
	}

	/*** MESSAGE SECTION ***/
	#sec-message {
		padding-top: 40px;
	}

	.indexPage #sec-message .ghostWord {
		top: 216px;
	}

	/*** COMPANY SECTION・BUSINESS SECTION ***/
	#sec-company,
	#sec-business {
		padding: 80px 24px;
	}

	#sec-company {
		padding-bottom: 50px;
	}

	#sec-business {
		padding-top: 50px;
	}

	/*** SERVICE SECTION ***/
	#sec-service {
		padding: 80px 0;
	}

	.indexPage .voiceSec {
		padding: 80px 24px;
	}
}

/*------------------------------------------------------------
	セクション背景画像
------------------------------------------------------------*/
.indexPage .sec .bgImg {
	width: 60%;
	height: 100vh;
	background-image: url(img/index/bg01.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0;
	/* transition: .3s ease; */
}

.indexPage #sec-message .bgImg {
	height: 100%;
	background-position: left top;
	background-size: 100% auto;
	position: absolute;
	top: 0;
	left: 10%;
}

.indexPage .newsSec .bgImg {
	width: 80%;
	background-image: url(img/index/bg02.png);
	left: unset;
	right: 0;
}

.indexPage #sec-service .bgImg {
	width: 80%;
	background-image: url(img/index/bg04.png);
	top: -20vh;
	left: 40%;
}

.indexPage .voiceSec .bgImg {
	width: 120%;
	height: 90%;
	background-image: url(img/index/bg06.png);
	object-position: center;
	background-size: 80% auto;
	top: 5%;
	left: -10%;
}

@media (width < 840px) {
	.indexPage .sec .bgImg {
		width: 100%;
	}

	.indexPage #sec-message .bgImg {
		top: 40px;
		left: 20%;
	}

	.indexPage .newsSec .bgImg {
		width: 125%;
		right: -20%;
	}

	.indexPage #sec-service .bgImg {
		width: 120%;
		background-position: top;
		top: 0;
		left: 30%;
	}
}

@media (width < 540px) {
	.indexPage #sec-message .bgImg {
		top: 70px;
		left: 28%;
	}

	.scard {
		padding: 26px 12px;
	}
}

/*------------------------------------------------------------
	bgGalleryWrap
------------------------------------------------------------*/
.bgGalleryWrap {
	width: 100%;
	height: 100vh;
	overflow-x: clip;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -2;
}

.bgGalleryWrap .bgGallery {
	width: 100%;
	height: 100%;
	background-image: url(img/index/bg01.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.bgGalleryWrap .bgGallery01 {
	background-image: url(img/index/bg03.png);
	background-position: center right;
	left: 10%;
}

.bgGalleryWrap .bgGallery01.is-active {
	opacity: 0.3;
}

.bgGalleryWrap .bgGallery02 {
	width: 80%;
	background-image: url(img/index/bg05.png);
	background-position: center right;
	left: 25%;
	transition: opacity 0.4s ease;
}

.bgGalleryWrap .bgGallery02.is-active {
	opacity: 0.2;
}

/* ---- VOICE: dark intermission, let the fixed wall bleed faintly through ---- */
.sec-voice {
	background: rgba(13, 12, 11, .7) !important;
}

.sec-voice::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(13, 12, 11, .55) 0%, transparent 16%, transparent 84%, rgba(13, 12, 11, .6) 100%);
}

@media (width < 540px) {
	.bgGalleryWrap .bgGallery {
		width: 100%;
	}

	.bgGalleryWrap .bgGallery02 {
		left: -2%;
	}
}

/*------------------------------------------------------------
	comVisual
------------------------------------------------------------*/
.comVisual {
	/* margin-top: -83px;
	margin-bottom: 25px; */
	padding: 0 40px;
	width: 100%;
	height: 100vh;
	background: url("img/page/com_visual_bg.jpg") no-repeat center center/ cover;
	overflow: clip;
	/* position: relative;
	z-index: 0; */
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
}

.comVisual .ttlBox {
	width: 50%;
	padding-top: 43vh;
	padding-left: 5%;
	font-size: clamp(4rem, 5vw, 8rem);
	position: relative;
	z-index: 1;
}

.comVisual .headLine05 {
	line-height: 1.2;
	letter-spacing: 0.06em;
}

.comVisual .headLine05 span {
	display: block;
	color: var(--color-main);
	text-transform: uppercase;
	font-family: var(--font-ttl);
	font-weight: 400;
	font-size: 0.5em;
}

.comVisual ul {
	margin-top: 24px;
	margin-left: 2.25em;
}

.comVisual ul li {
	margin-top: 0.25em;
	font-size: initial;
}

.comVisual ul a {
	display: flex;
	align-items: center;
	gap: 0.5em;
	transition: color .3s ease-in-out;
}

.comVisual ul a::before {
	content: "";
	width: 12px;
	height: 2px;
	background-color: var(--color-dark);
	transition: .3s ease-in-out;
}

.comVisual ul a:hover {
	color: var(--color-main);
}

.comVisual ul a:hover::before {
	width: 24px;
	background-color: var(--color-main);
}

.comVisual .mediaBox {
	width: 100%;
	height: 100%;
	background-image: url("img/page/com_visual_bg.jpg");
	background-repeat: no-repeat;
	background-position: 100% 30%;
	background-size: auto 60%;
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	/* left: 30%; */
	left: 5%;
	z-index: 0;
	padding-left: 30%;
}

.comVisual .glassTxt {
	display: block;
	font-family: var(--font-ttl);
	font-size: clamp(8rem, 15vw, 24rem);
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
	text-shadow:
		-2px -2px 0px rgba(255, 255, 255, 0.05),
		2px 2px 3px rgba(0, 0, 0, 0.08),
		0 0 10px rgba(255, 255, 255, 0.15);
	background-image: url("img/page/com_visual_bg.jpg");
	background-repeat: no-repeat;
	background-position: left 10vw top 50%;
	background-size: auto 60vh;
	mask-image: url(img/page/kv-company.svg);
	mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: contain;
	position: relative;
	z-index: 0;
}

.comVisual .glassTxt::before {
	content: "PRIVACY";
	filter: blur(2px);
	font-weight: 700;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.comVisual .glassTxt:has(span) {
	background: unset;
	mask: unset;
}

.comVisual .glassTxt:has(span)::before {
	content: unset;
}

.comVisual .glassTxt span {
	font-family: var(--font-ttl);
	font-size: clamp(80px, 15vw, 240px);
	line-height: 1;
	color: transparent;
	background-image: inherit;
	background-size: auto 100vh;
	background-position: center;
	-webkit-background-clip: text;
	background-clip: text;
	transform: translate(10px, 10px);
	filter: drop-shadow(-2px 2px 3px rgba(255, 255, 255, 0.3));
}

@media all and (width < 896px) {
	.comVisual {
		padding: 40px 24px 10vh;
		display: flex;
		/* align-items: flex-end; */
		flex-direction: column;
		justify-content: flex-end;
	}

	.comVisual .ttlBox {
		width: 100%;
		padding-top: 10vh;
		padding-left: 3%;
	}

	.comVisual .mediaBox {
		width: 130%;
		height: auto;
		aspect-ratio: 3 / 2;
		padding-left: 5vw;
		background-size: auto 100%;
		top: 10vh;
		/* left: 5vw; */
		left: 0;
	}

	.comVisual .glassTxt {
		background-position: left 1.5vw top 50%;
		background-size: 131vw auto;
	}
}

@media all and (width < 640px) {
	.comVisual {
		padding: 40px 24px 15vh;
	}
}

/*------------------------------------------------------------
	archivePage・singlePage
------------------------------------------------------------*/
.archivePage,
.singlePage {
	padding-bottom: 100px;
}

.blogUl {
	gap: 60px 5%;
}

.blogLi {
	width: 30%;
}

.blogLi a {
	backdrop-filter: blur(4px);
}

.blogLi .thumbnail {
	width: 100%;
	aspect-ratio: 1.3 / 1;
	overflow: clip;
}

.blogLi .thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blogLi .thumbnail:has(.noImage) {
	padding: 5%;
	background-color: #fff;
	border: 1px solid var(--color-bg);
}

.blogLi .thumbnail .noImage {
	object-fit: contain;
}

.blogLi .txtBox {
	padding: 0 24px 18px;
}

.blogLi a h4 {
	transition: .3s ease;
}

.blogDate {
	margin: 18px 0 9px;
	color: #747474;
	font-size: 1.2rem;
	font-family: var(--font-en);
}

.blogDate .category {
	margin-left: 1.25em;
	padding: 0 1.25em;
	color: var(--color-main);
	border: 1px solid var(--color-main);
	border-radius: 100px;
}

.blogLi a:hover h4 {
	color: var(--color-main);
}

/* singlePage */
#newsContents .newsTtl {
	margin: 24px 0;
	font-size: clamp(17px, 2.2vw, 26px);
	font-weight: 700;
	letter-spacing: .01em;
}

#newsContents .single_txt p {
	margin-bottom: 0.75em;
	line-height: 1.8;
}

.singlePage .pageNavi {
	margin-top: 60px;
	display: flex;
	gap: 5%;
}

.singlePage .pageNavi li:not(:has(a)) {
	display: none;
}

/* 月別アーカイブがある場合 */
.blogPage_inner:has(.blogPage_item_widget) {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 5%;
}

.blogPage_item {
	width: calc(95% - 186px);
}

.blogPage_item_widget {
	width: 186px;
	padding: 24px;
	height: fit-content;
	background-color: var(--color-dark);
}

.blogPage_item_widget .widget-title {
	margin-bottom: 0.75em;
	padding-bottom: 0.25em;
	font-family: var(--font-ttl);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	border-bottom: 1px solid var(--color-main);
}

.blogPage_item_widget ul li a {
	display: block;
	padding: 6px 0;
	font-size: 13px;
	text-decoration: none;
	color: #d8d3ca;
	/* border-bottom: 1px dashed #8b857b; */
	transition: color .3s;
}

.blogPage_item_widget ul li a:hover {
	color: var(--color-main);
}

@media (width < 896px) {
	.blogUl {
		gap: 40px;
	}

	.blogLi {
		width: calc(50% - 20px);
	}
}

@media (width < 640px) {

	.archivePage,
	.singlePage {
		/* padding-bottom: 0; */
		/* padding-top: 60px; */
	}

	.blogUl {
		gap: 40px 20px;
	}

	.blogLi {
		width: calc(50% - 10px);
	}

	.blogLi .txtBox {
		padding: 0 12px 14px;
	}

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

	.blogDate .category {
		font-size: 10px;
	}

	.blogPage_item {
		width: 100%;
	}
}

@media (width < 400px) {
	.blogLi .txtBox {
		padding: 0 0 14px;
	}

	.blogLi a h4 {
		font-size: 13px;
	}
}

/*------------------------------------------------------------
	companyPage
------------------------------------------------------------*/
.companyPage {
	padding-top: 0;
}

.companyPage .philosophySec {
	min-height: 100vh;
	height: fit-content;
	overflow: clip;
	position: relative;
	z-index: 0;
}

.companyPage .philosophySec::before {
	content: "";
	width: 100%;
	height: 100%;
	background-color: #000000cf;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.companyPage .philosophySec .photoBoxWrap {
	height: 100vh;
	gap: 5%;
	position: sticky;
	top: 0;
	z-index: -1;
}

.companyPage .philosophySec .photoBox {
	flex: 1;
	height: 100%;
	overflow: hidden;
}

.companyPage .philosophySec .marquee {
	height: 100%;
	overflow: hidden;
}

.companyPage .philosophySec .marqueeInner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.companyPage .philosophySec .photo img {
	width: 100%;
	display: block;
	border-radius: 20px;
}

.companyPage .philosophySec .photoBox.left .photo img {
	border-radius: 0 20px 20px 0;
}

.companyPage .philosophySec .photoBox.right .photo img {
	border-radius: 20px 0 0 20px;
}

.up .marqueeInner {
	animation: marqueeUp 25s linear infinite;
}

.down .marqueeInner {
	animation: marqueeDown 25s linear infinite;
}

@keyframes marqueeUp {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-50%);
	}
}

@keyframes marqueeDown {
	from {
		transform: translateY(-50%);
	}

	to {
		transform: translateY(0);
	}
}

.companyPage .philosophySec .txtBox {
	min-height: calc(100vh - 68px);
	padding: 100px 0;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 1;
}

.companyPage .philosophySec .headingBox {
	min-height: 100vh;
	margin-top: -70vh;
}

.companyPage .philosophySec .heading03 {
	margin-left: auto;
	margin-right: auto;
}

.companyPage .philosophySec .heading03 .en {
	text-shadow: 0 4px #fff;
}

.companyPage .philosophySec .heading03 .jp {
	color: #fff;
}

.companyPage .philosophySec .heading03 .jp::after {
	background-color: #fff;
}

.companyPage .philosophySec h3 {
	font-size: clamp(48px, 12vw, 100px);
	text-align: center;
	line-height: 1;
}

.companyPage .philosophySec h3 span {
	padding: 0 0.5em;
	font-family: "Zen Dots", sans-serif;
	font-size: 1.2em;
	font-weight: normal;
}

.companyPage .philosophySec .slogan {
	margin-top: 0.75em;
	font-family: var(--font-serif);
	font-size: clamp(32px, 8vw, 64px);
	text-align: center;
	display: flex;
	align-items: center;
}

.companyPage .philosophySec .slogan span {
	padding: 0 0.5em;
	font-family: "Zen Dots", sans-serif;
	font-size: 0.9em;
}

.companyPage .philosophySec .txtBox .txt {
	font-size: 1.2em;
	font-size: clamp(1.6rem, 2vw, 2.4rem);
	text-align: center;
	line-height: 1.8;
	letter-spacing: 0.06em;
}

.companyPage .sec {
	padding: 100px 0;
	margin-bottom: 120px;
}

.companyPage .messageSec .txtBox {
	/* max-width: 728px; */
	width: 50%;
}

.companyPage .messageSec .txtBox p {
	max-width: 745px;
	margin: 0 0 0 auto;
	line-height: 1.8;
}

.companyPage .messageSec .txtBox .name {
	margin-bottom: 0.75em;
	font-size: clamp(2rem, 3vw, 4rem);
	font-weight: 800;
}

.companyPage .messageSec .photoBox {
	width: 45%;
	position: relative;
}

.companyPage .messageSec .photoBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}

.companyPage .overviewSec dl {
	max-width: 1280px;
	margin: 0 auto;
	padding: 60px 24px;
}

.companyPage .overviewSec .infoItem {
	align-items: center;
	border-bottom: 1px solid #00000020;
}

.companyPage .overviewSec dt,
.companyPage .overviewSec dd {
	padding: 24px 5%;
}

.companyPage .overviewSec dt {
	width: 300px;
	font-size: 1.1em;
	font-weight: 600;
}

.companyPage .accsessSec {
	margin-bottom: 0;
	padding-bottom: 120px;
}

.companyPage .accsessSec .inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 5%;
	gap: 10%;
}

.companyPage .accsessSec .txtBox p {
	line-height: 1.8;
}

.companyPage .accsessSec .txtBox p span {
	font-size: 1.1em;
	font-weight: 600;
}

.companyPage .accsessSec .mapBox {
	flex: 1;
}

.companyPage .accsessSec iframe {
	width: 100%;
}

@media (width > 1800px) {
	.companyPage .overviewSec dt {
		width: 400px;
		padding-left: 10%;
	}
}

@media (width < 768px) {
	.companyPage .philosophySec .photoBoxWrap {
		justify-content: center;
	}

	.companyPage .philosophySec .photoBox {
		width: 100%;
		height: auto;
		flex: auto;
	}

	.companyPage .philosophySec .marqueeInner {
		flex-direction: row;
		width: max-content;
	}

	.companyPage .philosophySec .photo {
		flex-shrink: 0;
		width: 60vw;
	}

	.companyPage .philosophySec .photo img {
		width: 100%;
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}

	.companyPage .philosophySec .photoBox.left .photo img {
		border-radius: 12px;
	}

	.companyPage .philosophySec .photoBox.right .photo img {
		border-radius: 12px;
	}

	.up .marqueeInner {
		animation: marqueeLeft 35s linear infinite;
	}

	.down .marqueeInner {
		animation: marqueeRight 45s linear infinite;
	}

	.companyPage .sec {
		margin-bottom: 0px;
	}

	.companyPage .messageSec .txtBox {
		width: 100%;
	}

	.companyPage .messageSec .photoBox {
		width: 85%;
		margin: 40px -24px 0 auto;
	}

	.companyPage .messageSec .photoBox img {
		width: 100%;
		height: auto;
		position: relative;
	}

	.companyPage .overviewSec dl {
		padding: 0 5%;
	}

	.companyPage .overviewSec dt {
		width: 150px;
	}

	.companyPage .overviewSec dd {
		width: calc(100% - 150px);
	}

	.companyPage .accsessSec .inner {
		gap: 40px 10%;
	}

	.companyPage .accsessSec .mapBox {
		flex: unset;
		width: 100%;
	}

	.companyPage .accsessSec iframe {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
	}
}

@media (width < 540px) {
	.companyPage .accsessSec .inner {
		gap: 40px 0;
	}

	.companyPage .overviewSec dl {
		padding: 0;
	}

	.companyPage .overviewSec dt,
	.companyPage .overviewSec dd {
		padding: 18px 0;
	}

	.companyPage .overviewSec dt {
		width: 30%;
	}

	.companyPage .overviewSec dd {
		width: 70%;
	}
}

@keyframes marqueeLeft {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@keyframes marqueeRight {
	from {
		transform: translateX(-50%);
	}

	to {
		transform: translateX(0);
	}
}

/*------------------------------------------------------------
	bushinessPage
------------------------------------------------------------*/
.businessPage.comVisual .glassTxt::before {
	content: "BUSINESS";
}

.businessPage .Sec {
	margin-bottom: 100px;
}

.businessPage .solutionTxt {
	text-align: center;
}

.businessPage .solutionTxt h3 {
	margin-bottom: 0.75em;
	font-size: clamp(2rem, 3vw, 4rem);
	font-weight: 800;
}

.businessPage .businessWrapper {
	position: relative;
}

.businessPage .businessFixed {
	padding: 100px 5%;
	display: flex;
	flex-wrap: wrap;
	position: sticky;
	top: 68px;
	max-height: 800px;
	height: calc(100vh - 68px);
}

.businessPage .txtWrap {
	width: 50%;
	max-height: 800px;
	padding-right: 40px;
	position: relative;
}

.businessPage .businessNum {
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 0 12px;
}

.businessPage .businessNum .num {
	font-size: clamp(1.4rem, 1.8vw, 2rem);
	font-family: var(--font-ttl);
	color: #ACACAC;
}

.businessPage .businessNum .num.is-active {
	font-size: clamp(3rem, 5vw, 15rem);
	color: var(--color-main);
}

.businessPage .businessNum .num.is-active::first-letter {
	color: var(--color-dark);
}

.businessPage .txtArea,
.businessPage .imgArea {
	max-height: 800px;
	position: relative;
}

.businessPage .imgArea {
	width: 50%;
}

.businessPage .txtBox,
.businessPage .image {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: .5s;
}

.businessPage .txtBox h3 {
	margin-bottom: 1.25em;
	font-size: clamp(3rem, 3vw, 4rem);
	font-weight: 900;
	line-height: 1.1;
}

.businessPage .txtBox h3 span {
	display: block;
	font-size: 0.6em;
	font-weight: 300;
	font-family: var(--font-ttl);
}

.businessPage .txtBox p {
	max-width: 530px;
}

.businessPage .txtBox.is-active,
.businessPage .image.is-active {
	opacity: 1;
}

.businessPage .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.businessPage .businessTrigger {
	height: 100vh;
}

.businessPage .scrollBar {
	position: absolute;
	right: 0;
	bottom: 100px;
}

.businessPage .scrollBar span {
	display: flex;
	align-items: center;
	gap: 1em;
	font-size: clamp(1rem, 1vw, 1.2rem);
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	position: relative;
}

.businessPage .scrollBar span::before {
	content: "";
	width: 1px;
	height: 60px;
	background-color: var(--color-dark);
}

.businessPage .scrollBar span::after {
	content: "";
	width: 7px;
	height: 7px;
	background-color: var(--color-dark);
	border-radius: 50%;
	position: absolute;
	top: 0;
	/* left: 50%;
	transform: translateX(-50%); */
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

@keyframes circlemove {
	0% {
		top: -4px;
	}

	100% {
		top: 57px;
	}
}

@keyframes cirlemovehide {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	80% {
		opacity: 0.9;
	}

	100% {
		opacity: 0;
	}
}

@media (min-width: 1600px) and (min-height: 1000px) {
	.businessPage .businessFixed {
		top: calc(50% - 400px);
	}
}

@media (width < 896px) {
	.businessPage .Sec {
		/* margin-bottom: 0; */
	}

	.businessPage .businessFixed {
		padding: 40px 8% 40px;
		top: 30px;
		height: calc(100vh - 60px);
		/* height: auto; */
	}

	.businessPage .txtWrap {
		width: 100%;
		padding-right: 0;
	}

	.businessPage .txtBox p {
		max-width: 530px;
	}

	.businessPage .imgArea {
		width: 100%;
	}

	.businessPage .image {
		inset: unset;
		bottom: 0;
		aspect-ratio: 1.6 / 1;
	}
}

@media (width < 580px) {
	.businessPage .solutionTxt p {
		text-align: left;
	}

	.businessPage .solutionTxt p br {
		display: none;
		text-align: left;
	}

	.businessPage .businessFixed {
		/* max-height: 660px; */
		max-height: unset;
	}

	.businessPage .txtArea,
	.businessPage .imgArea {
		max-height: unset;
	}

	.businessPage .scrollBar {
		bottom: 40%;
	}
}


/*------------------------------------------------------------
	servicePage
------------------------------------------------------------*/
.servicePage.Page {

	padding-bottom: 0;
	overflow-x: clip;
}

.servicePage.comVisual .glassTxt::before {
	content: "SERVICE";
}

.servicePage .Sec {
	overflow-x: clip;
}

.servicePage .Sec .serviceWrap {
	padding: 100px 5% 128px;
}

.servicePage section+section {
	padding: 128px 5%;
}

/* ---service 01オウンドメディア--- */
.servicePage .mediaSec {
	padding-bottom: 50vh;
}

.servicePage .Sec .ttlBox {
	display: flex;
	gap: 24px;
	line-height: 1;
}

.servicePage .Sec .ttlBox .num {
	font-size: 14rem;
	font-size: clamp(7rem, 14vw, 14rem);
	font-weight: 900;
	font-family: var(--font-ttl);
}

.servicePage .Sec .ttlBox .ttlTxt p {
	font-size: 1.2em;
	font-weight: 700;
}

.servicePage .Sec .ttlBox.on .ttlTxt p .bound {
	animation: bound 2.6s forwards;
	animation-delay: 1s;
}

.servicePage .Sec .ttlBox.on .ttlTxt p .bound:nth-child(2) {
	animation-delay: 1.1s;
}

.servicePage .Sec .ttlBox.on .ttlTxt p .bound:nth-child(3) {
	animation-delay: 1.2s;
}

.servicePage .Sec .ttlBox .ttlTxt h2 {
	margin-top: 6px;
	/* font-size: 6rem; */
	font-size: clamp(3rem, 6vw, 6rem);
	font-weight: 900;
	line-height: 1.1;
}

.servicePage .Sec .ttlBox .ttlTxt h2 span {
	font-size: 0.5em;
	display: block;
}

.servicePage .Sec .innerBox {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	justify-content: space-between;
	gap: 5%;
	margin-top: 64px;
}

.servicePage .Sec .innerBox .flexWrap {
	width: 50%;
	/* width: 48%; */
}

.servicePage .mediaSec .innerBox .flexWrap {
	padding-bottom: 20vh;
}

.servicePage .Sec .innerBox .flexWrap .txtBox:not(:last-child) {
	margin-bottom: 88px;
}

.servicePage .Sec .innerBox .flexWrap .txtBox h3 {
	font-size: 3rem;
	margin-bottom: 0.75em;
}

.servicePage .Sec .innerBox .flexWrap .txtBox p {
	line-height: 1.7;
}

.servicePage .Sec .innerBox .photoBox {
	width: 47%;
	position: sticky;
	top: 20vh;
	align-self: flex-start;
	opacity: 1;
}

.servicePage .Sec .innerBox .photoBox .photoInner {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.servicePage .Sec .innerBox .photoBox .photoInner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
}

.servicePage .Sec .innerBox .photoBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photoFixed {
	position: fixed;
	left: 0;
	top: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 100;
}

.photoFixedInner {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.photoFixedInner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.servicePage .Sec .innerBox:has(.photoFixed.is-active) .photoBox {
	opacity: 0;
}

/* ---service 02CCMP--- */

.servicePage .ccmpSec {
	width: 100%;
	padding-top: 20vh;
	background: #fff;
	backdrop-filter: blur(12px);
	text-shadow: 1px 1px 2px #ffffffa8, 0 0 12px #ffffff80;
	position: relative;
	z-index: 0;
	overflow: clip;
}

.servicePage .ccmpSec .content {
	position: relative;
	z-index: 3;
}

.servicePage .ccmpSec .ttlBox {
	justify-content: right;
}

.servicePage .ccmpSec .ttlBox .ttlTxt h2 {
	font-size: 12rem;
	font-size: clamp(6.4rem, 12vw, 12rem);
	margin-top: 0;
	line-height: 0.8;
	            @media (max-width: 896px) {
	font-size: clamp(4.4rem, 12vw, 12rem);

				}

}

.servicePage .ccmpSec .ttlBox .ttlTxt p {
	padding-left: 10px;
	font-weight: 600;
}

.servicePage .ccmpSec .innerBox {
	flex-direction: row;
}

.servicePage .ccmpSec .innerBox .flexWrap {
	width: 55%;
	/* margin-top: -80px; */
}

.servicePage .ccmpSec .innerBox .flexWrap .txtBox p {
	font-weight: 600;
}

.servicePage .ccmpSec .innerBox .photoBox {
	width: 45%;
	opacity: 0;
	scale: 4;
	transition: .8s ease;
}

.servicePage .ccmpSec.on .innerBox .photoBox {
	opacity: 1;
	scale: 1;
}

/* bg */
.servicePage .ccmpSec .bgImage {
	width: 100%;
	height: 100%;
	/* background: #fff; */
	background-color: #c5c5c533;
	background-image: url(img/page/com_visual_bg.jpg);
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	background-blend-mode: color;
	filter: blur(12px);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}


/* ---service 03RCMP--- */

.servicePage .rcmpSec {
	overflow: clip;
}

.servicePage .rcmpSec .ttlBox .ttlTxt h2 {
	font-size: 12rem;
	font-size: clamp(4rem, 11vw, 12rem);
	margin-top: 0;
	line-height: 0.8;
}

.servicePage .rcmpSec .serviceWrap {
	position: relative;
	z-index: 1;
}

.servicePage .rcmpSec .serviceWrap .fixedSvg {
	width: 50vw;
	height: 0;
	margin-left: 70%;
	position: sticky;
	top: 3%;
	z-index: 0;
}

.servicePage .rcmpSec .serviceWrap:nth-child(2) .fixedSvg {
	margin-left: -50%;
	z-index: -1;
}

.servicePage .rcmpSec .serviceWrap svg {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	opacity: 0.1;
}

.servicePage .rcmpSec .serviceWrap .cls-1 {
	fill: transparent;
}

.servicePage .rcmpSec .serviceWrap [class*="svg-elem-"] {
	fill: transparent;
}

.servicePage .rcmpSec .serviceWrap.on [class*="svg-elem-"] {
	animation: svgFill .6s cubic-bezier(.47, 0, .745, .715) forwards;
}

@keyframes svgFill {
	from {
		fill: transparent;
	}

	to {
		fill: #ea5514;
	}
}

.servicePage .rcmpSec .serviceWrap .rcSubTtl {
	font-size: 3.2rem;
	margin-top: 24px;
}

.servicePage .rcmpSec .innerBox {
	position: relative;
}

.servicePage .rcmpSec .innerBox .flexWrap {
	width: 55%;
	padding: 0 24px 0 0;
	display: flex;
	flex-wrap: wrap;
}

.servicePage .rcmpSec .innerBox .flexWrap .txtBox {
	width: 100%;
}

.servicePage .rcmpSec .innerBox .photoBox {
	width: 45%;
	top: 40vh;
}

.servicePage .rcmpSec .rcmpWrap {
	padding: 80px 5% 0;
}

.servicePage .rcmpSec .rcmpWrap .rcmpBox01 {
	margin-bottom: 168px;
}


.servicePage .rcmpSec .rcmpWrap .rcmpTtlBox {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	position: relative;
	margin-bottom: 64px;
}

.servicePage .rcmpSec .rcmpWrap .rcmpTtlBox h3 {
	font-size: 4rem;
	line-height: 1.4;
}

.servicePage .rcmpSec .rcmpWrap .rcmpTtlBox .subTtl {
	color: #787878;
	font-size: 8rem;
}

.servicePage .rcmpSec .rcmpWrap .rcmpTtlBox .ttlInner {
	position: relative;
	font-weight: bold;
}

.servicePage .rcmpSec .rcmpWrap .rcmpTtlBox .ttlInner>p {
	line-height: 2.3;
}

.servicePage .rcmpSec .rcmpWrap .rcmpTtlBox .ttlInner .rcmpNum {
	position: absolute;
	font-size: 8.8rem;
	left: -152px;
	top: 50%;
	transform: translateY(-50%);
}

.servicePage .rcmpSec .rcmpWrap .rcmpTtlBox .ttlInner .ttlInnerWrap {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.servicePage .rcmpSec .rcmpWrap .rcmpFlexBox {
	display: flex;
	justify-content: center;
	gap: 2%;
}

.servicePage .rcmpSec .rcmpWrap .rcmpFlexBox .txtBox {
	width: 48%;
	padding: 40px;
	background: #fff;
	border-radius: 24px;
}

.servicePage .rcmpSec .rcmpWrap .rcmpFlexBox .txtBox:last-child {
	transition-delay: 0.1s;
}

.servicePage .rcmpSec .rcmpWrap .rcmpFlexBox .txtBox h3 {
	font-size: 3.2rem;
	margin-bottom: 24px;
}

.servicePage .rcmpSec .rcmpWrap .rcmpBox02 {
	margin-bottom: 144px;
}

.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rmpBoxWrap {
	display: flex;
	justify-content: center;
	gap: 5%;
}

.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rcmpTtlBox {
	display: block;
	width: 53%;
	margin-bottom: 0;
}

.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rcmpTtlBox .ttlInner .ttlInnerWrap {
	justify-content: flex-start;
	margin-bottom: 56px;
}

.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rcmpTtlBox .ttlInner .rcmpNum {
	top: -16px;
	left: calc(100% - 90px);
	/* transform: translateX(-50%); */
	z-index: -1;
}

.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rcmpTtlBox .txtBox {
	font-weight: bold;
	line-height: 2.3;
}

.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rmpBoxWrap .photoBox {
	width: 42%;
	position: sticky;
	top: 20%;
	align-self: flex-start;
}


.servicePage .rcmpSec .rcmpWrap .rcmpBox03 {
	margin-bottom: 104px;
}

.servicePage .rcmpSec .rcmpWrap .rcmpBox03 .rcmpFlexBox .txtBox {
	padding: 32px;
}


/* ---service 04動画コンテンツ制作--- */
.serviceBgWrap {
	position: relative;
	z-index: 0;
	overflow: clip;
}

.serviceBgWrap .bgImage {
	width: 100vw;
	height: 0;
	position: sticky;
	top: 0;
	z-index: -1;
}

.serviceBgWrap .bgImage .bgInner {
	width: 100%;
	height: 100vh;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: auto 100%;
	background-color: #ffffffc7;
	background-blend-mode: screen;
	filter: blur(8px);
}

.serviceBgWrap .bgImage video {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	mix-blend-mode: soft-light;
	position: absolute;
	top: 0;
}

.servicePage .videoProSec {
	padding: 0;
	padding-bottom: 50vh;
	/* background: #fff; */
	position: relative;
	z-index: 0;
}

.servicePage .videoProSec .content {
	padding-top: 128px;
	padding-bottom: 128px;
}


.servicePage .videoProSec .ttlBox {
	justify-content: right;
	text-align: end;
}


.servicePage .videoProSec .innerBox {
	flex-direction: row;
}

.servicePage .videoProSec .innerBox .flexWrap {
	padding-bottom: 20vh;
}

.servicePage .videoProSec .innerBox .photoBox {
	overflow: hidden;
	clip-path: circle(150% at 50% 50%);
	transition: clip-path .8s cubic-bezier(.65, 0, .35, 1);
	will-change: clip-path;
}

.servicePage .videoProSec .innerBox .photoBox.on {
	clip-path: circle(0 at 50% 50%);
}

.servicePage .videoProSec .innerBox .photoBox img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.servicePage .circleTrigger {
	padding-top: 20vh;
}

/* ---service 05MEO--- */
/* .circleTransition {
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 0;
	z-index: 10;
} */

.servicePage .meoSec {
	min-height: 150vh;
	background-color: var(--color-bg);
	position: relative;
	clip-path: circle(100% at 50% 50%);
}

.servicePage .meoSec .content {
	min-height: 100vh;
	display: flex;
	align-items: center;
	position: sticky;
	top: 0;
}

.servicePage .meoSec .meoWrap {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14%;
}

.servicePage .meoSec .ttlBox {
	display: flex;
	align-items: center;
	gap: 24px;
	line-height: 1;
}

.servicePage .meoSec .ttlBox .ttlTxt h2 {
	/* font-size: 12rem; */
	font-size: clamp(7rem, 11vw, 12rem);
	margin-top: 0;
	line-height: 0.8;
}

.servicePage .meoSec .meoWrap .btn {
	display: flex;
	justify-content: center;
	align-items: center;
}

.servicePage .meoSec .meoWrap .btn a {
	font-size: 2.8rem;
	padding: 40px 64px;
	background-color: #fff;
	border-radius: 80px;
}

.servicePage .meoSec .meoWrap .btn a:hover {
	background-color: var(--color-main);
	color: #fff;
}

/* 
.servicePage .meoSec.on {
	animation: clipPath 3s cubic-bezier(.220, .60, .350, 1) 0s 1 forwards;
}

@keyframes clipPath {
	0% {
		clip-path: circle(0 at 50% 50%);
	}

	100% {
		clip-path: circle(100% at 50% 50%);
	}
} */

@media all and (min-width:1200px) and (max-width:1439px) {
	.servicePage .rcmpSec .rcmpWrap .rcmpFlexBox .txtBox {
		padding: 16px;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rmpBoxWrap {
		gap: 3%;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rcmpTtlBox {
		width: 60%;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rmpBoxWrap .photoBox {
		width: 40%;
	}

	.servicePage .meoSec .meoWrap {
		gap: 8%;
	}
}

@media all and (min-width:1600px) and (max-width:2560px) {
	.servicePage .ccmpSec .innerBox .photoBox {
		width: 48%;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpFlexBox .txtBox,
	.servicePage .rcmpSec .rcmpWrap .rcmpBox03 .rcmpFlexBox .txtBox {
		width: 40%;
		padding: 40px 48px;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rcmpTtlBox .ttlInner .rcmpNum {
		left: 50%;
	}

	.servicePage .meoSec .meoWrap {
		gap: 27%;
	}
}

@media all and (max-width: 896px) {
	.servicePage section+section {
		padding: 80px 0;
	}

	.servicePage .Sec .serviceWrap {
		padding: 80px 5% 40px;
	}

	.servicePage .Sec .serviceWrap .content {
		padding: 0;
	}

	.servicePage .Sec .ttlBox {
		gap: 16px;
	}

	.servicePage .Sec .innerBox {
		display: block;
		position: relative;
		margin: 24px auto 0;
	}

	.servicePage .Sec .innerBox .flexWrap {
		margin-top: -80px;
		position: relative;
		z-index: 1;
		width: 100%;
	}

	.servicePage .Sec .innerBox .flexWrap .txtBox {
		max-width: 400px;
		width: fit-content;
		padding: 3% 5%;
		margin-bottom: 64px;
		background-color: #ffffff70;
		backdrop-filter: blur(8px);
		border-radius: 24px;
		border: 1px solid #ffffff20;
		text-shadow: 1px 1px 2px #ffffffa8, 0 0 12px #ffffff80;
	}

	.servicePage .Sec .innerBox .photoBox {
		width: 65%;
		margin: 0 0 0 auto;
		position: sticky;
		top: 20vh;
		z-index: -1;
	}

	.servicePage .Sec .innerBox .flexWrap .txtBox h3 {
		font-size: 2.4rem;
	}

	.servicePage .Sec .innerBox .flexWrap .txtBox p {
		font-weight: 600;
	}

	.servicePage .mediaSec {
		padding-bottom: 200vh;
	}

	.servicePage .mediaSec .innerBox .flexWrap {
		margin-top: -80px;
	}

	.servicePage .ccmpSec {
		padding-top: 30vh;
	}

	.servicePage .ccmpSec .ttlBox {
		justify-content: flex-start;
	}

	.servicePage .ccmpSec .innerBox .photoBox {
		z-index: 0;
	}

	.servicePage .rcmpSec .innerBox .flexWrap {
		/* margin-top: -80px; */
		padding: 0;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpTtlBox {
		margin-bottom: 32px;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpTtlBox .ttlInner .rcmpNum {
		font-size: 6rem;
		left: -75px;
		top: 15%;
		z-index: -1;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpTtlBox .subTtl {
		font-size: 3.6rem;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpTtlBox h3 {
		font-size: 2.4rem;
		line-height: 1.1;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpFlexBox {
		flex-direction: column;
		gap: 16px;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpFlexBox .txtBox {
		width: 100%;
		padding: 24px;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpFlexBox .txtBox h3 {
		font-size: 2.4rem;
		margin-bottom: 16px;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rmpBoxWrap {
		flex-direction: column-reverse;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rcmpTtlBox {
		width: 100%;
		margin: -80px 0 120px;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rcmpTtlBox .ttlInner .ttlInnerWrap {
		margin-bottom: 32px;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rmpBoxWrap .photoBox {
		width: 65%;
		margin: 0 0 0 auto;
		opacity: .2;
		z-index: -1;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rcmpTtlBox .ttlInner .rcmpNum {
		top: -32px;
		left: 0;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpBox03 .rmpBoxWrap .photoBox {
		width: 100%;
		opacity: .4;
		z-index: -1;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpBox03 .rcmpTtlBox .ttlInner .rcmpNum {
		top: 0;
		left: 240px;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpBox03 .rcmpFlexBox .txtBox {
		padding: 24px;
	}

	.servicePage .videoProSec .content {
		padding: 120px 16px;
	}

	.servicePage .videoProSec .ttlBox .ttlTxt h2 {
		font-size: 2.8rem;
	}

	.servicePage .videoProSec .innerBox .flexWrap {
		width: 65%;
		margin: -120px 0 120px auto;
	}

	.servicePage .videoProSec .innerBox .photoBox {
		margin: 0 auto 0 0;
		top: 60vh;
		z-index: 0;
	}

	.servicePage .circleTrigger {
		padding-top: 80vh;
	}

	.servicePage .meoSec .meoWrap {
		flex-direction: column;
		gap: 24px;
	}

	.servicePage .meoSec .ttlBox .ttlTxt h2 {
		margin-bottom: 0.25em;
	}

}

@media (width < 640px) {
	.servicePage .Sec .serviceWrap {
		padding: 0 0 40px;
	}

	.servicePage .Sec .innerBox .photoBox {
		width: 90%;
		margin: 0 -24px 0 auto;
	}

	.servicePage .Sec .innerBox .photoBox img {
		aspect-ratio: 1.2 / 1;
		object-fit: cover;
		opacity: 0.3;
	}

	.servicePage .Sec .innerBox .flexWrap .txtBox {
		padding: 30px 16px;
		background-color: #ffffff20;
		backdrop-filter: blur(1px);
	}

	.servicePage .mediaSec .innerBox .flexWrap {
		width: 100%;
		margin-top: -24px;
	}

	.servicePage .ccmpSec {
		padding-top: 50vh;
	}

	.servicePage .rcmpSec .serviceWrap .rcSubTtl {
		font-size: 2.6rem;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpTtlBox .ttlInner .rcmpNum {
		font-size: 5.6rem;
		top: 34%;
		left: 0;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpTtlBox .ttlInner .ttlInnerWrap {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding-left: 80px
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpBox01 {
		margin-bottom: 80px;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpBox02 {
		margin-bottom: 80px;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rcmpTtlBox {
		margin-top: -24px;
	}

	.servicePage .rcmpSec .rcmpWrap .rcmpBox02 .rcmpTtlBox .ttlInner .rcmpNum {
		top: 50%;
	}


	.servicePage .rcmpSec .rcmpWrap .rcmpBox03 .rcmpTtlBox .ttlInner .rcmpNum {
		top: 40px;
		left: 0;
	}

	.servicePage .videoProSec .innerBox .flexWrap {
		width: 100%;
		margin-top: -24px;
	}

	.servicePage .Sec .innerBox .flexWrap .txtBox h3 {
		font-size: 2.2rem;
	}

	.servicePage .meoSec .meoWrap .btn a {
		font-size: 1.8rem;
		padding: 32px 48px;
	}
}

/*------------------------------------------------------------
	recruitPage
------------------------------------------------------------*/
.recruitPage {
	padding: 80px 0;
}

.recruitPage.comVisual .mediaBox {
	justify-content: center;
	background-position: right center;
	left: unset;
	right: 0;
}

.recruitPage.comVisual .glassTxt {
	background-position: left 59% top 50%;
}

.recruitPage.comVisual .glassTxt::before {
	content: "RECRUIT";
}

.recruitPage .Sec .catchTxt {
	text-align: center;
}

.recruitPage .bento-grid {
	margin-top: 80px;
	padding: 24px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 120px;
	gap: 16px;
}

.recruitPage .bento-item {
	padding: 20px 16px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), inset 0 0 4px rgba(0, 0, 0, 0.1);
	border-radius: 40px;
	background-color: #00000090;
	border: 1px solid var(--color-main);
	overflow: hidden;
	cursor: pointer;
	transition: padding .4s ease;
	position: relative;
}

.recruitPage .item-1 {
	margin: 0;
	grid-column: span 2;
	grid-row: span 3;
	padding: 20px 5% 30px;
}

.recruitPage .item-2,
.recruitPage .item-3,
.recruitPage .item-4,
.recruitPage .item-5,
.recruitPage .item-6,
.recruitPage .item-7 {
	grid-column: span 1;
	grid-row: span 1;
}

.recruitPage .image01 {
	background: radial-gradient(at 30% 40%, rgba(255, 255, 255, 0.9) 0%, rgba(244, 241, 234, 0.7) 100%), url(img/page/recruit01.jpg);
	background-size: cover;
}

.recruitPage .image02 {
	background: radial-gradient(at 30% 40%, rgba(255, 255, 255, 0.9) 0%, rgba(244, 241, 234, 0.5) 100%), url(img/page/recruit02.jpg);
	background-size: cover;
}

.recruitPage .image03 {
	background: radial-gradient(at 30% 40%, rgba(255, 255, 255, 0.9) 0%, rgba(244, 241, 234, 0.5) 100%), url(img/page/recruit03.jpg);
	background-size: cover;
}

.recruitPage .image04 {
	background: radial-gradient(at 30% 40%, rgba(255, 255, 255, 0.9) 0%, rgba(244, 241, 234, 0.5) 100%), url(img/page/recruit04.jpg);
	background-size: cover;
}

.recruitPage .image05 {
	background: radial-gradient(at 30% 40%, rgba(255, 255, 255, 0.9) 0%, rgba(244, 241, 234, 0.5) 100%), url(img/page/recruit05.jpg);
	background-size: cover;
	background-position: center bottom;
}

.recruitPage .image06 {
	background: radial-gradient(at 30% 40%, rgba(255, 255, 255, 0.9) 0%, rgba(244, 241, 234, 0.5) 100%), url(img/page/recruit06.jpg);
	background-size: cover;
}

.recruitPage .image07 {
	background: radial-gradient(at 30% 40%, rgba(255, 255, 255, 0.9) 0%, rgba(244, 241, 234, 0.5) 100%), url(img/page/recruit07.jpg);
	background-size: cover;
}

.itemWrapper {
	height: 100%;
	display: grid;
}

.innerBox {
	margin: 0;
	height: fit-content;
	align-self: center;
}

.item-1 .innerBox {
	margin: auto 0 0;
}

.recruitPage .bento-item h3 {
	height: 3em;
	font-size: clamp(1.2rem, 1.8vw, 2.2rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	transition: height .7s ease;
}

.recruitPage .bento-item h3 span {
	display: block;
	width: fit-content;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	transition:
		font-size .7s ease,
		left .7s ease,
		transform .7s ease;
}

.recruitPage .bento-item.is-large h3 {
	height: 5em;
	margin-bottom: 40px;
}

.recruitPage .bento-item.is-large h3 span {
	font-size: 1.6em;
	left: 0;
	transform: translateX(0);
}

.recruitPage .bento-item p {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition:
		max-height .6s ease,
		opacity .6s ease;
}

.recruitPage .bento-item.item-1 p {
	animation: showText .6s ease forwards, changeHight .6s ease forwards;
}

.recruitPage .bento-item.is-large p {
	animation: showText .6s ease forwards, changeHight .6s ease forwards;
}

@keyframes showText {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes changeHight {
	0% {
		max-height: 0;
	}

	60% {
		max-height: 0;
	}

	80% {
		max-height: 500px;
	}

	100% {
		max-height: 500px;
	}
}

@media (width < 992px) {
	.recruitPage .bento-grid {
		padding: 0;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 100px;
		gap: 16px;
	}

	.recruitPage .item-1 {
		grid-column: span 2;
		grid-row: span 3;
	}

	.recruitPage .item-2,
	.recruitPage .item-3,
	.recruitPage .item-4,
	.recruitPage .item-5,
	.recruitPage .item-6,
	.recruitPage .item-7 {
		grid-column: span 1;
		grid-row: span 1;
	}
}

@media (width < 640px) {
	.recruitPage .bento-grid {
		grid-auto-rows: 80px;
		gap: 8px;
	}

	.recruitPage .bento-item {
		border-radius: 20px;
	}

	.recruitPage .item-1 {
		padding: 20px 13px;
		grid-column: span 2;
		grid-row: span 4;
	}

	.recruitPage .bento-item p {
		font-size: 1.3rem;
	}

	.recruitPage .bento-item.is-large h3 {
		margin-bottom: 20px;
	}

	.recruitPage .image03 {
		background-position: center right;
	}

}


/*------------------------------------------------------------
		paymentPage
------------------------------------------------------------*/
.paymentPage.comVisual .mediaBox {
	justify-content: center;
	background-position: right center;
	left: unset;
	right: 0;
}

.paymentPage.comVisual .glassTxt {
	background-position: left 59% top 50%;
}

.paymentPage.comVisual .glassTxt::before {
	content: "PAYMENT";
}

.paymentPage h3 {
	margin-bottom: 2em;
	font-size: clamp(2rem, 2.8vw, 3rem);
	text-align: center;
}

/* パスワード認証前 */
.paymentPage .authenticationSec h4,
.paymentPage .authenticationSec p {
	text-align: center;
}

.paymentPage .authenticationSec h3 small {
	display: block;
	font-size: 0.8em;
	font-weight: 400;
}

.paymentPage .formBox {
	max-width: 900px;
	width: 80%;
	margin: 20px auto;
}

.paymentPage .formBox .notes {
	text-align: justify;
}

.paymentPage .formBox input {
	display: block;
	width: 100%;
	line-height: 2.6;
}

.paymentPage .formBox button {
	width: 120px;
	margin: 20px auto 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 2.6;
	color: #fff;
	background-color: #2E8BC0;
	border: unset;
}

/* パスワード認証後 */
.paymentPage .paySec {}



/*------------------------------------------------------------
	contact
------------------------------------------------------------*/
.contactPage.comVisual .glassTxt::before {
	content: "CONTACT";
}

.contactPage .topTxt {
	margin: 0 0 68px 3px;
	letter-spacing: 0.06em;
}

.contactPage table {
	margin-bottom: 158px;
	width: 100%;
	border-collapse: collapse;
	word-break: break-all;
}

.contactPage th,
.contactPage td {
	padding: 28px 0 28px 58px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid #D1CFCF;
}

.contactPage th {
	padding: 20px 50px 20px 0;
	width: 29%;
	font-weight: 500;
}

.contactPage td {
	font-size: 1.3rem;
	position: relative;
}

.contactPage th .must {
	float: right;
	width: 44px;
	color: #fff;
	height: 23px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	font-weight: 500;
	background: #212836;
	text-align: center;
}

.contactPage td:before {
	position: absolute;
	left: 0;
	top: 27px;
	width: 1px;
	bottom: 27px;
	background: #D1CFCF;
	content: "";
}

.contactPage td input[type="text"],
.contactPage td input[type="email"],
.contactPage td input[type="number"],
.contactPage td input[type="tel"],
.contactPage td select,
.contactPage td textarea {
	width: 100%;
	height: 58px;
	color: #212836;
	font-size: 1.3rem;
	padding: 5px 10px 5px 23px;
	-webkit-appearance: none;
	box-sizing: border-box;
	background: #F4F4F4;
	border: 1px solid #F4F4F4;
	border-radius: 4px;
}

.contactPage td .wid01 {
	width: 98px !important;
}

.contactPage td .ico {
	display: inline-block;
	margin-right: 10px;
	font-size: 1.6rem;
}

.contactPage td .add {
	margin-bottom: 20px;
}

.contactPage td textarea {
	height: 265px;
	resize: vertical;
	padding: 20px 10px 20px 23px;
}

.contactPage .txtP {
	margin-bottom: 45px;
	line-height: 1.9;
	text-align: center;
}

.contactPage .txtP a {
	text-decoration: underline;
}

.contactPage .txtP a:hover {
	opacity: 0.7;
}

.contactPage .agreeTxt {
	width: 460px;
	margin: 0 auto 100px;
	padding: 12px 10px 16px 80px;
	box-sizing: border-box;
	border: 1px solid #CCC;
}

.contactPage .agreeTxt input[type="checkbox"] {
	display: none;
}

.contactPage .agreeTxt input[type="checkbox"]~span {
	background: url("img/common/check_box_bg02.png") no-repeat left top 9px;
	background-size: 16px 16px;
	display: block;
	min-height: 16px;
	padding: 4px 0 6px 26px;
}

.contactPage .agreeTxt input[type="checkbox"]:checked~span {
	background: url("img/common/check_box_bg01.png") no-repeat left top 9px;
	background-size: 16px 16px;
}

.contactPage .submit {
	text-align: center
}

.contactPage .submit li {
	margin: 0 6px;
	display: inline-block;
	vertical-align: top;
}

.ajax-loader {
	display: none !important;
}

.contactPage .submit li .info01 {
	display: block;
	position: relative;
	background: #212836;
	border: 1px solid #212836;
}

.contactPage .submit li .info02 {
	position: relative;
	z-index: 2;
}

.contactPage .submit li .info01:before {
	margin-top: -5px;
	position: absolute;
	right: 10px;
	top: 50%;
	width: 21px;
	height: 11px;
	background: url("img/common/icon05.png") no-repeat left center;
	background-size: 21px 11px;
	content: "";
	z-index: 3;
	transition: .3s;
	-webkit-transition: .3s;
}

.contactPage .submit li .info01:after {
	content: " ";
	position: absolute;
	top: 0;
	height: 100%;
	width: 0;
	left: auto;
	right: 0;
	background-color: #fff;
	transition-duration: 0.5s;
	transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	-ms-transition-duration: 0.5s;
	-ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	-moz-transition-duration: 0.5s;
	-moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.contactPage .submit .back .info01:before {
	margin-top: -5px;
	position: absolute;
	right: auto;
	left: 10px;
	top: 50%;
	width: 21px;
	height: 11px;
	background: url("img/common/icon07.png") no-repeat left center;
	background-size: 21px 11px;
	content: "";
}

.contactPage .submit li input {
	color: #fff;
	width: 258px;
	height: 48px;
	font-size: 1.6rem;
	border: 0;
	-webkit-appearance: none;
	cursor: pointer;
	background: none;
}

.contactPage .submit li input:disabled {
	cursor: default;
	pointer-events: none;
}

.contactPage .submit .back .info01 {
	background: #919191;
	border-color: #919191;
}

.contactPage .submit li.disabled .info01 {
	background: #CECECE;
	border-color: #CECECE;
}

.contactPage .submit li.disabled .info01:after {
	display: none;
}

.contactPage .errTop {
	margin-bottom: 16px;
	padding: 18px 10px;
	color: #C1272D;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	border: 3px solid #C1272D;
	background: #FCDEDD;
	text-align: center;
}

.contactPage .errTop img {
	margin: -3px 10px 0 0;
	display: inline-block;
	vertical-align: middle;
}

.contactPage .error td input,
.contactPage .error td select,
.contactPage .error td textarea {
	background: #FCDEDD;
	border: 1px solid #C1272D;
}

.contactPage .error td .errorTxt {
	margin: 2px 0 -22px;
	display: block;
	color: #DE2B2B;
	font-weight: 500;
	letter-spacing: 0.03em;
	font-size: 1.4rem;
}

.contactPage .confirmTab th,
.contactPage .confirmTab td {
	height: 60px;
}

.contactPage .confirmTab td .add {
	margin-bottom: 4px;
}

.thanks .title {
	margin-bottom: 32px;
	font-size: 3rem;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.06em;
}

.thanks .thanksTxt {
	margin-bottom: 180px;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 2;
	letter-spacing: 0.06em;
	text-align: center;
}

.thanks .linkBtn a {
	margin: 0 auto;
	display: flex;
	height: 50px;
	justify-content: center;
	align-items: center;
	width: 256px;
	color: #fff;
	text-align: center;
	position: relative;
	background: #212836;
	border: 1px solid #212836;
	box-sizing: border-box;
}

.thanks .linkBtn a:before {
	margin-top: -4px;
	position: absolute;
	left: 11px;
	top: 50%;
	width: 21px;
	height: 11px;
	background: url("img/common/icon07.png") no-repeat left center;
	background-size: 21px auto;
	content: "";
	z-index: 3;
	transition: .3s;
	-webkit-transition: .3s;
}

.thanks .linkBtn .info {
	position: relative;
	z-index: 2;
}

.thanks .linkBtn a:after {
	content: " ";
	position: absolute;
	top: 0;
	height: 100%;
	width: 0;
	left: auto;
	right: 0;
	background-color: #fff;
	transition-duration: 0.5s;
	transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	-ms-transition-duration: 0.5s;
	-ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
	-moz-transition-duration: 0.5s;
	-moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

@media all and (min-width: 897px) {
	.contactPage .submit li:hover .info01:after {
		width: 100%;
		right: auto;
		left: 0;
	}

	.contactPage .submit li:hover .info01:before {
		right: -21px;
		background-image: url("img/common/icon08.png");
	}

	.contactPage .submit li.disabled:hover .info01:before {
		right: 10px;
		background-image: url("img/common/icon05.png");
	}

	.contactPage .submit li:hover input {
		color: #212836;
	}

	.contactPage .submit li.disabled:hover input {
		color: #fff;
	}

	.contactPage .submit li.back:hover .info01:before {
		left: -21px;
		background-image: url("img/common/icon14.png");
	}

	.thanks .linkBtn a:hover {
		color: #212836;
	}

	.thanks .linkBtn a:hover:before {
		background-image: url("img/common/icon14.png");
		left: -21px;
	}

	.thanks .linkBtn a:hover:after {
		width: 100%;
		right: auto;
		left: 0;
	}
}

@media all and (max-width: 896px) {
	.contactPage .topTxt {
		margin: 0 0 17px;
		line-height: 1.9;
		text-align: center;
	}

	.contactPage table {
		margin-bottom: 48px;
	}

	.contactPage th,
	.contactPage td {
		float: left;
		width: 100%;
		padding: 0 0 25px;
		box-sizing: border-box;
	}

	.contactPage th {
		padding: 22px 0 10px;
		width: 100%;
		border: none;
	}

	.contactPage td:before {
		display: none;
	}

	.contactPage td input[type="text"],
	.contactPage td input[type="email"],
	.contactPage td input[type="tel"],
	.contactPage td textarea {
		height: 58px;
		font-size: 1.2rem;
		padding: 5px 10px 5px 25px;
	}

	.contactPage td {
		font-size: 1.4rem;
	}

	.contactPage td .wid01 {
		width: 124px !important;
	}

	.contactPage td .ico {
		margin-right: 7px;
	}

	.contactPage td .add {
		margin-bottom: 20px;
	}

	.contactPage td textarea {
		height: 180px;
		padding: 20px 10px 20px 25px;
	}

	.contactPage .txtP {
		margin-bottom: 23px;
		line-height: 1.85;
	}

	.contactPage .agreeTxt {
		width: auto;
		margin: 0 auto 51px;
		padding: 14px 10px 14px 30px;
	}

	.contactPage .agreeTxt span.wpcf7-list-item {
		margin: 0 !important;
	}

	.contactPage .submit li {
		margin: 0 0 15px;
		display: block;
	}

	.contactPage .submit li:last-child {
		margin-bottom: 0;
	}

	.contactPage .submit li span:before {
		right: 17px;
	}

	.contactPage .submit li input {
		width: 100%;
		height: 60px;
	}

	.contactPage .errTop {
		margin-bottom: 18px;
		padding: 23px 10px 20px;
		font-size: 1.6rem;
		border-width: 2px;
		line-height: 1.9;
	}

	.contactPage .errTop img {
		margin: 0 auto 5px;
		display: block;
	}

	.contactPage .error td .errorTxt {
		margin: 3px 0 -19px;
		font-size: 1.1rem;
	}

	.contactPage .confirmTab th,
	.contactPage .confirmTab td {
		padding: 21px 0 7px;
		height: auto;
		line-height: 2;
	}

	.contactPage .confirmTab td {
		padding: 0 0 20px;
	}

	.contactPage .confirmTab td .add {
		margin-bottom: 4px;
	}

	.thanks .title {
		margin-bottom: 22px;
		font-size: 2.4rem;
	}

	.thanks .thanksTxt {
		margin-bottom: 37px;
		font-size: 1.6rem;
		font-weight: 500;
		line-height: 1.9;
	}

	.thanks .linkBtn a {
		margin: 0 auto;
		height: 60px;
		width: 100%;
		font-size: 1.6rem;
		max-width: 450px;
		letter-spacing: 0.06em;
	}

	.thanks .linkBtn a:before {
		left: 16px;
	}
}

@media all and (max-width: 374px) {
	.contactPage .txtP {
		margin: 0 -17px 23px;
	}

	.contactPage .agreeTxt {
		padding: 14px 5px 14px 10px;
		font-size: 1.3rem;
	}
}

/*------------------------------------------------------------
	thanksPage
------------------------------------------------------------*/
.thanksPage {
	padding: 20vh 0;
}

/*------------------------------------------------------------
	privacy
------------------------------------------------------------*/
.privacy {
	/* margin-bottom: 240px; */
}

.comVisual.privacyPage .ttlBox {
	font-size: clamp(2.6rem, 3.4vw, 6rem);
}

.privacy p {
	margin-bottom: 0.5em;
	line-height: 2.3;
	letter-spacing: 0.06em;
}

.privacy h5 {
	margin-bottom: 6px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.privacy .txt01 {
	margin-bottom: 65px;
}

.privacy .txt02 {
	margin-bottom: 72px;
}

.privacy .txt03 {
	margin-bottom: 35px;
}

.privacy .txt04 {
	margin-bottom: 0;
}

@media all and (max-width: 896px) {

	.privacy .pageTitle {
		padding: 28px 0 30px;
	}

	.privacy .pageTitle .headLine01 .en {
		margin-bottom: 8px;
		font-size: 3.2rem;
	}

	.privacy .pageTitle .headLine01 .jp {
		font-size: 2rem;
	}

	.privacy #pagePath {
		margin-bottom: 56px;
	}

	.privacy p {
		margin-bottom: 3px;
		line-height: 1.85;
		letter-spacing: 0.01em;
	}

	.privacy h5 {
		margin-bottom: 3px;
		letter-spacing: 0.01em;
	}

	.privacy .txt01 {
		margin-bottom: 57px;
	}

	.privacy .txt02 {
		margin-bottom: 60px;
	}

	.privacy .txt03 {
		margin-bottom: 27px;
	}

	.privacy .txt04 {
		margin-bottom: 0;
	}
}

.wpcf7-response-output {
	display: none !important;
}