@charset "utf-8";

/*----------------------------------------------------
	base
----------------------------------------------------*/


@font-face {
	font-family: "Onest";
	src: url("../font/onest-bold.woff2") format("woff2"),
		url("../font/onest-bold.woff") format("woff");
}

@font-face {
	font-family: "Noto Sans JP";
	src: url("../font/notosansjp-regular.woff2") format("woff2"),
		url("../font/notosansjp-regular.woff") format("woff");
}

@font-face {
	font-family: "Noto Sans JP Bold";
	src: url("../font/notosansjp-bold.woff2") format("woff2"),
		url("../font/notosansjp-bold.woff") format("woff");
}


body,
html {
	min-width: 1240px;
	height: 100%;
	scroll-behavior: smooth;
}

body {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: #77717c;
	font-size: 16px;
	font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight: 400;
	text-align: center;
	line-height: 1.8em;
	letter-spacing: .05em;
	background-color: #fafafa;
}

table {
	color: #77717c;
	font-size: 16px;
	font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	line-height: 1.8em;
	letter-spacing: 0em;
}

h1,
h2,
h3,
h4,
h5,
h6 em,
strong,
dt,
th,
.bo {
	font-weight: 400;
	font-family: "Noto Sans JP Bold", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.reg {
	font-weight: 400;
	font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

a {
	color: #7515ff;
	text-decoration: none;
}

a.linkBk {
	color: #241A2C;
}

a {
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}

a:hover {
	filter: alpha(opacity=85);
	-moz-opacity: 0.85;
	opacity: 0.85;
}

a .nonHover:hover {
	filter: alpha(opacity=100);
	-moz-opacity: 1.00;
	opacity: 1.00;
}

#wrapper {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	background-color: transparent;
}

.clear {
	clear: both;
}

.clear:after {
	content: url("../images/common/pixel.gif");
	display: block;
	clear: both;
	height: 0;
}

.re {
	color: #F23038;
}

.bi {
	font-size: 120%;
}

.sma {
	font-size: 85%;
}

/*
.bo {
	font-weight: 800;
}
*/
.bl {
	color: #241a2c;
}

.gr {
	color: #77717c;
}

.blu {
	color: #7515ff;
}

.tab {
	display: none;
}

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

.pc.tab {
	display: inherit;
}

img {
	height: auto;
	max-width: 100%;
	vertical-align: bottom;
	border-radius: 10px;
}

.onest {
	font-family: "Onest", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.btnMore {
	display: block;
	width: 280px;
	height: 64px;
	margin: 0 auto;
	padding: 0 0 0 32px;
	color: white;
	text-align: left;
	line-height: 64px;
	background-color: #241a2c;
	border-radius: 32px;
	background-image: url('/images/common/icon_circle.svg');
	background-repeat: no-repeat;
	background-position: right 22px top 22px;
	background-size: 20px 20px;
}

.btnMore02 {
	display: block;
	width: 280px;
	height: 64px;
	margin: 45px auto 0;
	padding: 0 0 0 32px;
	color: white;
	text-align: left;
	line-height: 64px;
	background-color: #241a2c;
	border-radius: 4px;
	background-image: url('/images/common/icon_circle.svg');
	background-repeat: no-repeat;
	background-position: right 22px top 22px;
	background-size: 20px 20px;
}

.btnMore03 {
	width: 400px;
}


/*----------------------------------------------------
	HEADER
----------------------------------------------------*/

header {
	z-index: 10000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 96px;
	background-color: transparent;
	transition: background-color 0.3s linear;
}

header .logo {
	position: absolute;
	display: block;
	width: 160px;
	height: 96px;
	top: 0;
	left: 0;
}

header .logo img {
	width: 100px;
	margin-top: 25px;
	border-radius: 0;
}

header nav {
	position: absolute;
	right: 25px;
	top: 0;
	font-size: 15px;
}

header nav ul:not(.sub-menu) {
	display: flex;
	/*width: 900px;*/
	/*justify-content: space-between;*/
	/*column-gap: 10px;*/
	justify-content: flex-end;
}

header nav ul li {
	position: relative;
}

header nav ul li a {
	display: block;
	width: auto;
	height: 96px;
	padding: 30px 20px;
	color: #241A2C;
	position: relative;
}

header nav ul li:nth-child(1) a {
	/*width: 150px;*/
}

header nav ul li li a {
	/*
	width: 100px;
	/*
}

header nav ul li:nth-child(2) li:nth-child(1) a {
	/*
	width: 100px;
	*/
}

header nav>ul>li:not(:last-child)>a::before {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background-color: #7515ff;
	position: absolute;
	left: 0;
	bottom: 0;
	opacity: 0;
	transition: opacity .3s ease;
}

@media (max-width: 1270px) {

	/*
	header nav ul li a {
		width: 80px;
	}
	*/

	header nav ul li a {
		padding: 30px 10px;
	}
}

/*
header nav ul li:nth-child(4) a {
	width: 140px;
}
*/
@media (hover: hover) and (pointer: fine) {

	header nav>ul>li:hover>a {
		color: #7515ff;
	}

	header nav>ul>li:not(:last-child):hover>a::before {
		opacity: 1;
	}

}

header nav ul li a span {
	/*
	padding-top: 5px;
	*/
	display: flex;
	justify-content: center;
	width: fit-content;
	white-space: nowrap;
	/*
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	*/
	transition: opacity .2s ease;
}

header nav ul li.menu-parent a span {
	display: flex;
	column-gap: 8px;
	padding: 1px 0 0;
}

header nav ul li.menu-parent a span::after {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	background: url(../images/common/nav_icon_arrow.svg) center top 2px / contain no-repeat;
}

header nav ul li.menu-parent a:hover span::after {
	background-image: url(../images/common/nav_icon_arrow_over.svg);
}

header nav ul li a .ja {
	position: absolute;
	opacity: 0;
	display: none;
	top: 30px;
	left: 0;
	width: 100%;
	text-align: center;
}

@media (hover: hover) and (pointer: fine) {
	header nav ul li a:hover .en {
		opacity: 0;
	}

	header nav ul li a:hover .ja {
		display: flex;
		justify-content: center;
		opacity: 1;
	}
}

header nav ul li.navContact a {
	width: 140px;
	height: 52px;
	padding: 0;
	margin-top: 18px;
	margin-left: 30px;
	line-height: 52px;
	background-color: #7515ff;
	color: white;
	border-radius: 26px;
}

header nav ul li.navContact a .en,
header nav ul li.navContact a .ja {
	width: 100%;
	top: 0;
	padding-top: 0;
}

header nav ul li.navContact a .ja {}

@media (hover: hover) and (pointer: fine) {

	header nav ul li.navContact:hover a {
		background-color: #7515ff;
	}

}

header nav ul .sub-menu {
	visibility: hidden;
	opacity: 0;
	top: 96px;
	left: calc(calc(200px - 100%) / 2 * -1);
	position: absolute;
	width: 200px;
	font-size: 13px;
	background-color: #fff;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
	transition: opacity .5s ease, visibility .5s ease;
}

header nav ul li.menu-parent:hover .sub-menu {
	visibility: visible;
	opacity: 1;
}

.sub-menu li a {
	display: block;
	height: auto;
	padding: 22px 0;
	line-height: 14px;
	border-bottom: solid 1px #eeeeee;
	transition: background-color .3s ease;
}

header nav ul li.menu-parent .sub-menu li a span {
	display: block;
	width: 100%;
	margin: 2px 0 0;
	font-size: 11px;
	text-align: center;
}

header nav ul li.menu-parent .sub-menu li a span::after {
	display: none;
}

@media (hover: hover) and (pointer: fine) {

	.sub-menu li:hover a {
		background-color: #fafafa;
	}

}

header nav ul li:hover ul a {
	color: #241A2C;
	border-bottom: solid 1px #eeeeee;
}

.openbtn {
	display: none;
}



/*
@media (max-width: 1200px) {

	header nav ul li a {
		width: 100px;
	}
}


@media (max-width: 950px) {

	header nav ul li a {
		width: 80px;
	}

	header nav ul li.menu-parent a::after {
		display: none;
	}

}
*/

/*----------------------------------------------------
	CONTENTS
----------------------------------------------------*/

.cont {
	width: 1200px;
	margin: 0 auto 0;
	padding: 100px 0;
	border-top: solid 1px #d1d1d1;
}

.subTitle {
	text-align: center;
	font-size: 28px;
}

.subTitle span {
	display: inline-block;
	padding-right: 25px;
}

.subTitleArrow {
	margin: 60px 0 0;
	padding-top: 50px;
	text-align: center;
	line-height: 1.4em;
	font-size: 22px;
	background-image: url('/images/common/subtitle_arrow.svg');
	background-position: center top;
	background-repeat: no-repeat;
}

.subtitleBold {
	margin: 24px 0 0;
	text-align: center;
	line-height: 1.4em;
	font-size: 19px;
}

.text {
	margin: 40px 0 0;
	text-align: center;
}

.subtitleLink {
	font-size: 17px;
	line-height: 1.5;
}

.subtitleLink a {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	column-gap: 12px;
}

.subtitleLink a::after {
	content: "";
	width: 14px;
	height: 14px;
	background-image: url("../images/common/icon_arrow.svg");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
}

.subtitleLink a::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background-color: #3A13D6;
	transition: width .5s;
}

.subtitleLink a:hover::before {
	width: 100%;
}

.btnLink a {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 384px;
	margin: 20px 0 0;
	padding: 20px 0 14px 20px;
	color: white;
	font-size: 15px;
	background-color: #241A2C;
	border-radius: 2px;
	transition: background-color .4s ease, text-decoration .4s ease;
}

.btnLink a::after {
	content: "";
	position: absolute;
	top: 17px;
	right: 10px;
	width: 30px;
	height: 30px;
	background-image: url("../images/common/icon_arrow_03.svg");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.btnLink a:hover {}

.subContent {
	position: relative;
	width: 1200px;
	margin: 170px auto 0;
	text-align: left;
}

.titleEn {
	width: auto;
	margin: 0 auto;
	text-align: center;
	font-size: 52px;
	line-height: 1.3em;
}

.titleEn span {
	color: #241a2c;
	position: relative;
	z-index: 1000;
}

.titleEn span::before {
	z-index: -1;
	content: '';
	position: absolute;
	top: -5px;
	left: -12px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: #7515ff;
}

.titleEn02 {
	font-size: 38px;
}

.titleJa {
	font-size: 40px;
	line-height: 1.5em;
}

.title {
	width: auto;
	margin: 0 auto;
	color: #77717c;
	text-align: center;
	font-size: 20px;
}

.title02 {
	margin-top: 48px;
	font-size: 40px;
	letter-spacing: .012em;
}

.title03 {
	width: 1200px;
	margin: 48px auto;
	font-size: 32px;
	line-height: 1.5em;
}

.pageBack,
.topBack {
	width: 920px;
	margin: 50px auto 32px auto;
}

.pageBack a,
.topBack a {
	display: flex;
	align-items: center;
}

.pageBack a::before,
.topBack a::before {
	content: '';
	display: block;
	width: 15px;
	height: 35px;
	background: url(../images/common/icon_back_arrow.svg) left 0 top 13px / contain no-repeat;
	background-size: 6px 12px;
}

.pageBack a span,
.topBack a span {
	padding-top: 5px;
	font-size: 17px;
	color: #7515ff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.note-embed {}

.contContact {
	padding-top: 100px;
	width: 1200px;
	margin: 0 auto 0;
	border-top: solid 1px #d1d1d1;
}

.contactBlock {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 80px;
	background-color: #111111;
}

.contactBlock div {
	width: 600px;
	color: white;
}

.contactBlock h2 {
	font-size: 48px;
}

.contactBlock p {
	padding-top: 25px;
	font-size: 12px;
	line-height: 1.8em;
}

.contactBlock p span {}

.contactBlock a {
	display: block;
	width: 320px;
	margin-top: 40px;
	padding: 25px 0 25px 0;
	text-indent: 30px;
	color: white;
	text-align: left;
	font-size: 18px;
	line-height: 1em;
	background-color: #7515ff;
	background-image: url('../images/common/icon_contact.svg');
	background-position: right 30px center;
	background-repeat: no-repeat;
	border-radius: 4px;
}

section {
	scroll-margin-top: 176px;
}

section:last-child {
	padding-bottom: 176px;
}

/*----------------------------------------------------
	FOOTER
----------------------------------------------------*/

.pageTopScroll {
	display: none;
	position: fixed;
	right: 0;
	bottom: 0;
	cursor: pointer;
	z-index: 99;
}

.footBread {
	margin-top: 50px;
	color: white;
	background-color: #241A2C;
}

.footBread div {
	border-bottom: solid 1px #6b4d82;
}

.footBread ul {
	width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	padding: 12px 0 14px 0;
	text-align: left;
}

.footBread li {
	display: flex;
}

.footBread li:last-child {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.footBread li:not(:last-child)::after {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 12px;
	background: url(../images/common/icon_bread_arrow.svg) center center no-repeat;
}

.footBread li a,
.footBread li span {
	width: 100%;
	color: white;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.footBread li a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.footBread li a:hover {
	text-decoration: none;
}

footer {
	text-align: left;
	background-color: #241A2C;
}

.footCont {
	display: grid;
	grid-template-columns: 575px 1fr;
	width: 1200px;
	margin: 0 auto 0;
	padding: 80px 0;
}

.footContactText {
	color: white;
}

.footContact {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-right: solid 1px #412f4f;
}

.footContactTitle {
	color: white;
	font-size: 30px;
}

a.footContactBtn {
	position: relative;
	display: block;
	box-sizing: border-box;
	border-radius: 4px;
	width: 320px;
	margin-top: 20px;
	padding: 20px 0 20px 20px;
	color: white;
	font-size: 18px;
	background-color: #7515ff;
}

a.footContactBtn::after {
	content: "";
	position: absolute;
	top: calc(50% - 15px);
	right: 25px;
	width: 24px;
	height: 24px;
	background-image: url("../images/common/icon_food_circle.svg");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

a.footContactBtn:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.footMenu {
	padding: 25.5px 0 25.5px 48px;
}

.footMenu ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.footMenu ul li {
	/*width: 120px;*/
	width: calc(calc(100% - 60px) / 4);
}

.footMenu ul li:nth-child(4n+1) {
	/*width: 156px;*/
}

.footMenu ul li a {
	font-size: 17px;
	color: white;
}

.footMenu ul li a span:nth-child(1) {
	display: inline-block;
	transition: text-decoration .5s ease;
}

.footMenu ul li a span:nth-child(2) {
	display: block;
	color: #867f8a;
	font-size: 12px;
	line-height: 1.2em;
}

.footMenu ul li a:hover span:nth-child(1) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.footMenu ul li a:hover span:nth-child(2) {
	text-decoration: none;
}

.footBtm {
	position: relative;
	width: 1200px;
	margin: 0 auto;
	padding-bottom: 30px;
}

.footBtm ul {
	display: flex;
	position: absolute;
	right: 0;
	bottom: 25px;
}

.footBtm ul li {
	width: 56px;
	margin-left: 15px;
}

.footBtm ul li img {
	width: 100%;
	height: auto;
}

.footCopy {
	color: white;
	font-size: 12px;
}

/*----------------------------------------------------
	index
----------------------------------------------------*/

.index .title {
	margin-top: 10px;
	font-size: 16px;
	line-height: 1em;
}

.indexMain {
	position: relative;
	text-align: left;
}

.indexMainScroll {
	position: absolute;
	bottom: 0;
	right: 0;
}

.indexMainMov {
	position: relative;
	width: 100%;
	height: 80vh;
	min-height: 720px;
	/*aspect-ratio: 2 / 1;*/
}

.indexMainMov div {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

.indexMainMov video {
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	width: 101%;
	height: 100%;
}

.indexTitle {
	position: relative;
	z-index: 5000;
	width: 1200px;
	margin: -125px auto 0;
	text-align: center;
}

.indexTitle .first-line {
	position: relative;
	font-size: 108px;
	color: white;
	text-align: center;
	line-height: 1.2;
}

.indexTitle .first-line::before {
	z-index: -1;
	content: '';
	position: absolute;
	top: 15px;
	left: -25px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #7515ff;
}

.indexTitle .second-line {
	display: block;
	font-size: 56px;
	line-height: 1.5em;
	margin-top: 12px;
	padding-top: 5px;
}

.indexTitleEn {
	width: auto;
	margin: 40px 0 0;
	text-align: center;
	font-size: 20px;
}

.indexTitleEn span {
	display: inline-block;
	padding-bottom: 30px;
	font-size: 44px;
	letter-spacing: 0.1em;
}

.indexTitleEn span span {
	padding-bottom: 0;
	font-size: 54px;
}

.indexContent {
	margin: 0 0 0;
	text-align: left;
}

.indexValue {
	margin-top: 140px;
}

#indexValue .valueImage {
	margin-top: -5px;
}

#indexValue .valueTitle {
	margin-top: 170px;
}

#indexValue .valueContentText {
	text-decoration: underline;
	font-size: 16px;
	line-height: 2.4em;
}

.indexSubtitle {
	font-size: 52px;
	line-height: 1.3em;
	margin-bottom: 5px;
}

.indexvalueDetail {
	display: flex;
	justify-content: space-between;
	width: 715px;
	margin: 100px auto 0;
}

.indexvalueDetail p {
	font-size: 26px;
	line-height: 1.6em;
}

.indexvalueDetail a {
	display: block;
	width: 250px;
	margin-top: 10px;
}

.index .valueContent02Index {
	margin-top: 140px;
}

.indexValue1stText {
	margin: 80px 0 0;
	font-size: 40px;
	line-height: 1.5em;
}

.indexValue1stText span {
	font-size: 80px;
}

.indexValueText {
	width: 576px;
	margin: 30px auto 0 0;
}

.indexValue ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
	margin: 48px 0 0 0;
	border: solid 1px #1713D6;
	border-right: none;
}

.indexValue ul li {
	border-right: solid 1px #1713D6;
}

.indexValue ul li a {
	position: relative;
	box-sizing: border-box;
	display: block;
	height: 220px;
	padding: 20px 20px 0 20px;
	color: #241A2C;
	font-size: 30px;
	line-height: 1.3em;
	transition: color .4s ease, background-color .4s ease;
}

.indexValue ul li a::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	outline: 1px solid #1713D6;
	outline-offset: -1px;
	left: 0;
	top: 0;
	opacity: 0;
	transition: opacity .4s ease;
}

.indexValue ul li a:hover {
	color: #3A13D6;
	background-color: #fff;
}

.indexValue ul li a:hover::before {
	opacity: 1;
}

.indexValue ul li a span {
	display: block;
	color: #756f7a;
	font-size: 15px;
	line-height: 1.8em;
	margin-top: 4px;
	transition: color .4s ease;
}

.indexValue ul li a:hover span {
	color: #3A13D6;
}

.indexValue ul li a::after {
	content: "";
	position: absolute;
	bottom: 20px;
	left: 20px;
	width: 32px;
	height: 32px;
	background-image: url("../images/common/icon_arrow_02.png");
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.indexValue ul li a:hover::after {
	background-position: 0 -50px;
}

.indexWorks {
	margin: 200px 0 0;
}

.indexWorksText {
	width: 576px;
	margin: 30px auto 0 0;
}

.indexWorksText01 {
	margin: 80px 0 0;
	font-size: 32px;
	text-align: center;
}

.indexWorksText02 {
	margin: 30px 0 80px;
	font-size: 18px;
	text-align: center;
}

.indexWorks #js-worksList {
	margin-bottom: 100px;
}

.indexWorksLink {
	margin: 800px auto 0;
}

.indexWorksData {
	display: flex;
	margin: 48px auto 0;
}

.indexWorksData01,
.indexWorksData02 {
	font-size: 17px;
	line-height: 1.5;
}

.indexWorksData01 {
	width: 210px;
	border-right: solid 1px #ebebeb;
}

.indexWorksData02 {
	padding-left: 48px;
}

.indexWorksData01 span,
.indexWorksData02 span {
	display: inline-block;
	font-size: 64px;
	line-height: 1em;
	letter-spacing: -.05em;
	margin-top: 12px;
	margin-right: 6px;
}

.indexWorks .worksCont {
	width: 1120px;
	margin: 50px auto 0;
}

.indexWorks02 .cards-container {
	width: 800px;
	margin-left: 400px;
}

.indexWorks02 .scrollAnim {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.indexWorks02 .postListItem .card-contents {
	width: auto;
	height: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}

.indexWorks02 .postListItemImg {
	display: block;
	width: 400px;
}

.indexWorks02 .postItemImg img {
	opacity: 1;
}

.indexWorks02 .postItemImg::before {
	content: none;
}

.indexWorks02 .postListItemImg .postItemImg {
	aspect-ratio: 400 / 280;
}

.indexWorks02 .postItemContent {
	opacity: 1;
	width: calc(100% - 400px - 50px);
	transform: translateY(0);
	transition: opacity .0s ease, transform .0s ease;
	transition-delay: .0s;
}

.indexWorks02 .postItemTags a {
	font-size: 14px;
}

.indexWorks02 .postListItem .postItemTags {
	margin-top: 0;
}

.indexWorks02 .worksCont .postItemClient {
	margin-top: 5px;
	font-size: 20px;
}

.indexWorks02 .postItemContent .worksListTitle {
	font-weight: 400;
}






/*----------------------------------------------------
	POST LIST
----------------------------------------------------*/

.pagePostList {
	display: grid;
	gap: 10px 160px;
	margin-top: 80px;
}

.column2 {
	width: 1120px;
	margin: 80px auto 0;
	grid-template-columns: repeat(2, 1fr);
}

.column3 {
	width: 1200px;
	margin: 80px auto 0;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px 48px;
}

.pagePostList.column2 li {
	width: 480px;
}

.pagePostList.column3 li {
	width: 368px;
}

.pagePostList.column2 li:nth-child(2n) {
	margin-top: 110px;
}

.pagePostList.column2 li a {
	text-decoration: none;
}

.pagePostList.column3 li a:hover {
	/*text-decoration: underline;*/
}

.postItemImg {
	display: block;
	overflow: hidden;
	width: 100%;
	height: auto;
	aspect-ratio: 480 / 548;
	margin-bottom: 12px;
	position: relative;
	border-radius: 10px;
}

.postItemImg::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fafafa;
	position: absolute;
	left: 0;
	top: 0;
	transition: transform .5s cubic-bezier(0.63, 0, 1, 1);
	z-index: 100;
}

.active .postItemImg::before {
	transform: translateX(100%);
}

.pagePostList.column3 .postItemImg {
	aspect-ratio: 368 / 260;
}

.postItemImg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
	transform: scale(1.0, 1.0);
	opacity: 0;
}

.active .postItemImg img {
	opacity: 1;
}

a:hover .postItemImg img {
	transform: scale(1.2, 1.2);
}

.postItemContent {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .5s ease, transform .5s ease;
	transition-delay: .25s;
}

.active .postItemContent {
	opacity: 1;
	transform: translateY(0);
}

.postItemContent h2,
.postItemContent .worksListTitle {
	margin-top: 15px;
	font-size: 16px;
	line-height: 1.5em;
	color: #77717c;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .4s ease;
	margin-bottom: 5px;
}

.pagePostList.column3 .postItemContent .postItemClient h2,
.pagePostList.column3 .postItemContent .postItemClient h3,
.worksList .pagePostList.column3 .postItemContent .postItemClient h3 {
	width: 368px;
	padding-top: 0px;
	color: black;
	font-size: 22px;
	line-height: 1.6em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	white-space: normal;
}

.pagePostList.column3 .postItemContent .postItemClient a:hover h2,
.pagePostList.column3 .postItemContent .postItemClient a:hover h3 {
	text-decoration: none;
}

.postItemContent .contentEx {
	margin-top: 15px;
	color: #77717c;
	font-size: 16px;
}

.postFooter {
	display: flex;
	column-gap: 16px;
	align-items: baseline;
}

.postItemDate {
	color: rgba(36, 26, 44, 0.62);
}

.postItemContent a:hover h2 {
	color: #1713D6;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.postItemClient {
	margin-top: 0px;
	font-size: 25px;
	line-height: 1.5em;
}

.postItemClient a {
	color: black;
}

.postItemTags {
	display: flex;
	flex-wrap: wrap;
	column-gap: 16px;
}

.postItemTags.postItemTagsTopics {
	display: inline;
}

.postListItem .postItemTags {
	margin-top: 30px;
}

.pagePostList.column3 .postListItem .postItemTags {
	margin-top: 15px;
}

.postItemTags a {
	font-size: 16px;
	line-height: 1.5em;
	text-decoration: none;
	text-underline-offset: 3px;
}

.pagePostList.column3 li .postItemTags a:hover {
	text-decoration: underline;
}

.postItemTags.postItemTagsTopics a {
	display: inline-block;
	margin-right: 15px;
}

.postItemTags a:hover {
	text-decoration: none;
}

.indexWorks .pagePostList {
	/*margin-top: 80px;*/
	margin-top: 0px;
}

.indexSubtitleText {
	font-size: 17px;
	line-height: 1.5;
}

.indexRecruit {
	position: relative;
	min-height: 800px;
	margin: 200px 0 0;
	padding-top: 160px;
	background-image: url('../images/index/recruit_back.jpg');
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.indexRecruit .titleEn span,
.indexRecruit .title {
	color: white;
}

.indexRecruitBox {
	width: 1120px;
	margin: 80px auto 0;
	padding: 50px 0px 50px;
	text-align: center;
	background-color: white;
	border-radius: 24px;
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
}

.indexRecruitSubtitle {
	margin: 0 auto 0;
	font-size: 32px;
	line-height: 1.5em;
}

.indexRecruitText {
	margin: 32px 0 0;
	line-height: 2.2em;
}

.indexRecruitLink {
	margin: 48px auto 0;
}

.contentLink {
	margin-top: 20px;
}

.contentLink a {
	display: inline-flex;
	column-gap: 20px;
	font-size: 15px;
	position: relative;
}

.contentLink a::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background-color: #3A13D6;
	transition: width .5s;
}

.contentLink a:hover::before {
	width: 100%;
}

.contentLink a::after {
	content: '';
	display: block;
	width: 18.67px;
	height: 30px;
	background: url(../images/common/icon_arrow.svg) left 2px/ contain no-repeat;
}

.indexRecruit .btnLink a {
	margin-top: 36px;
}

.indexCompany {
	position: relative;
	width: 1120px;
	margin: 200px auto 0;
	padding-top: 20px;
}

.indexCompany .titleEn {
	text-align: left;
	margin: 0 auto 0 0;
}

.indexCompany .title {
	text-align: left;
}

.indexCompanyImage {
	position: absolute;
	top: 0;
	right: 0;
}

.indexCompanyText {
	width: 590px;
	margin: 35px auto 0 0;
	font-size: 15.2px;
	line-height: 2.0em;
}

.indexCompany ul {
	width: 385px;
	margin: 40px auto 0 0;
}

.indexCompany ul li {
	margin: 0 auto 20px 0;
}

.indexCompany ul li a {
	display: block;
	height: 40px;
	font-size: 18px;
	line-height: 40px;
	background-image: url('/images/index/company_arrow.svg');
	background-position: right 0 top 0;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

.indexCompany ul li a span {
	display: inline-block;
	color: #7515ff;
	padding-right: 15px;
}

.indexNews {
	width: 1120px;
	margin: 200px auto 0;
}

.indexNews ul {
	margin-top: 45px;
}

.indexNews li {}

.indexNews li a {
	display: flex;
	flex-wrap: wrap;
	padding: 40px 50px 40px 25px;
	border-top: solid 1px #d1d1d1;
	background-image: url('/images/index/company_arrow.svg');
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 36px 36px;
}

.indexNews li:last-child a {
	border-bottom: solid 1px #d1d1d1;
}

.indexNews li .indexNewsDate {
	display: block;
	width: 90px;
	color: #77717c;
	font-size: 15px;
}

.indexNews li .indexNewsCategory {
	display: block;
	width: 930px;
	font-size: 15px;
	color: #3a13d6;
}

.indexNews li .indexNewsText {
	display: block;
	width: 100%;
	font-size: 16px;
}

.indexNewsLink {
	margin: 45px 0 0;
}

.indexTopics {
	margin: 200px 0 0;
}

.indexTopicsText {
	width: auto;
	margin-top: 48px;
}

.indexTopics .pagePostList {
	margin-top: 48px;
}

.indexTopicsLink {
	margin: 45px auto 0;
}

.worksCont {
	position: relative;
}

.worksData {
	position: absolute;
	top: 0;
	left: 0;
}

.worksData.fixed {
	position: fixed;
	top: 100px;
	left: calc(100% - 1200px - (100% - 1200px) / 2);
	width: 360px;
}

.worksData.fixed.none {
	position: absolute;
	top: auto;
	left: 0;
	bottom: 0;
}

.worksData.fixed p {
	width: 360px;
}

.worksDataCLient {
	width: 360px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin: 20px auto 0 0;
	padding-top: 30px;
	color: #7515ff;
	border-top: solid 1px #d1d1d1;
}

.worksData .worksDataCLient h2 {
	font-size: 16px;
	line-height: 1.4em;
}

.worksData .worksDataCLient p {
	font-size: 80px;
	line-height: 1.0em;
	text-align: right;
}

.worksData p {
	font-size: 13px;
	line-height: 1.6em;
}

.worksData p.worksDataTxt01 {
	margin-top: 20px;
}

.worksCont .worksContList {
	width: 800px;
	margin-left: 400px;
}

.worksCont .worksContList .column2 {
	width: 800px;
	gap: 10px 60px;
}

.worksCont .worksContList .column2 li {
	width: 370px;
}

.worksCont .postItemClient {
	font-size: 22px;
}


/*----------------------------------------------------
	WORKS / TOPICS
----------------------------------------------------*/

.postTagsContainer {
	margin-top: 48px;
}

.postTags {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 12px;
	justify-content: center;
}

.postTags li a {
	display: block;
	padding: 5px 15px 4px 15px;
	color: #7515ff;
	border: solid 1px #7515ff;
	border-radius: 46px;
	transition: color .4s ease, background-color .4s ease;
}

.postTags li a:hover {
	color: white;
	background-color: #7515ff;
}

.pagenation {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 48px;
	column-gap: 21px;
}

.pagenation li a,
.pagenation li span {
	font-family: 'Noto Sans JP';
	display: flex;
	width: 40px;
	height: 40px;
	justify-content: center;
	align-items: center;
}

.pagenationHere span {
	color: white;
	background-color: #241A2C;
	border-radius: 3px;
}

.pagenationNum a {
	color: #241A2C;
}

.pagenationLeft a,
.pagenationRight a,
.pagenationLeft span,
.pagenationRight span {
	display: block !important;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 24px;
}

.pagenationLeft a {
	background-image: url(../images/common/pagenation_left.svg);
}

.pagenationLeft span {
	background-image: url(../images/common/pagenation_left_off.svg);
}

.pagenationRight a {
	background-image: url(../images/common/pagenation_right.svg);
}

.pagenationRight span {
	background-image: url(../images/common/pagenation_right_off.svg);
}

.worksList .pagePostList.column3 .postItemContent h3 {
	color: #77717c;
	font-size: 16px;
	width: auto;
	line-height: 1.5em;
	margin-bottom: 11px;
}

/*----------------------------------------------------
	POST DETAIL
----------------------------------------------------*/

.postDetail {
	width: 1200px;
	margin: 170px auto 0 auto;
	color: #241a2c;
	text-align: left;
}

.recruit .jobDetailBody p,
.recruit .jobDetailBody h4 {
	color: #77717c;
}

.postHeader {
	width: 920px;
	margin: 0 auto;
	display: flex;
	align-items: baseline;
	column-gap: 16px;
}

.postTitle {
	width: 920px;
	margin: 0 auto 7px;
	font-size: 35px;
	line-height: 1.5em;
	text-align: left;
}

.postDetailContent {
	width: 920px;
	margin: 68px auto 0;
	text-align: left;
}

.postMainImage {
	width: 100%;
	margin-bottom: 32px;
}

.postMainImage img {
	width: 100%;
	/*border-radius: 0;*/
}

.postDetailContent h1 {
	margin-bottom: 48px;
	padding-left: 14px;
	font-size: 32px;
	line-height: 1.5em;
	border-left: solid 2px #4E17AD;
}

.postDetailContent h2 {
	margin-bottom: 48px;
	padding-left: 15px;
	font-size: 35px;
	line-height: 1.5em;
	border-left: solid 2px #4e17ad;
}

.postDetailContent h3 {
	margin-bottom: 15px;
	font-size: 17px;
	line-height: 1.5em;
}

.postDetailContent .smallEn {
	display: block;
	margin-top: 120px;
	margin-bottom: -20px;
	padding-left: 15px;
	color: #4e17ad;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.5em;
}

.postDetailContent p {
	margin-bottom: 48px;
}

.postDetailContent img {
	margin-bottom: 48px;
}

.postSubImage {
	display: grid;
	gap: 32px 48px;
	margin-bottom: 48px;
}

.postSubImage.column2 {
	width: auto;
	grid-template-columns: 1fr 1fr;
}

.postSubImage.multiple div:first-child {
	grid-column: 1 / 3;
}

.postSubImage img {
	width: 100%;
	height: auto;
}

.postListHeader {
	margin-bottom: 48px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.postListHeader h4 {
	color: rgba(36, 26, 44, 0.62);
}

.postListHeader p {
	margin-bottom: 20px;
}

.postDetailContent ul {
	margin-bottom: 48px;
}

.postDetailContent li {
	list-style-type: disc;
	margin-left: 1em;
	margin-bottom: 8px;
}

.postDetailContent .btnLink {
	margin-bottom: 48px;
}

.relatedPosts {
	margin-top: 96px;
	padding-top: 48px;
	border-top: solid 1px #dcdcdc;
	text-align: left;
}

.relatedPostsTitle {
	font-size: 24px;
	line-height: 1.5em;
	text-align: left;
	margin-bottom: 20px;
}

.relatedPosts .pagePostList {
	margin-top: 0;
}

.postDetailClient {
	width: 920px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.5em;
}

.worksDetail .postItemTags a {
	font-size: 15px;
	color: #241A2C;
}

.introductionBox {
	padding: 20px 20px 15px 20px;
	border: 1px solid rgba(0, 0, 0, .18);
	margin-bottom: 48px;
}

.introductionBox dt {
	font-size: 17px;
	line-height: 1.5;
	margin-bottom: 12px;
}

.recruitBox {
	padding: 20px 48px;
	border: 1px solid rgba(0, 0, 0, .18);
}

.recruitBox dt {
	font-size: 17px;
	line-height: 1.5em;
	margin-bottom: 12px;
	padding-top: 5px;
}

.recruitBox .btnLink {
	margin-bottom: 0;
}

.recruitBox .btnLink a {
	width: 288px;
}

.recruitBox a {
	margin: 20px auto 0 0;
}

/*----------------------------------------------------
	VALUE
----------------------------------------------------*/

.value .subContent {
	width: 100%;
}

.value .subContent .titleEn02,
.value .subContent .title02 {
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5;
}

.value .subContent .title02 {
	margin-top: 32px;
	position: relative;
	z-index: 2;
}

.valueTitle {
	color: #241a2c;
	margin: 100px 0 0;
	text-align: center;
}

.valueTitle p {
	font-size: 64px;
	line-height: 1em;
}

.valueTitle h2,
.valueTitle h3 {
	margin-top: 30px;
	font-size: 30px;
	line-height: 1em;
}

.valueContent {}

.valueContentText {
	margin: 40px auto 0;
	text-align: center;
}

.valueImage {
	position: relative;
	width: 1200px;
	margin: 60px auto 0;
	text-align: center;
}

.valueImage ul {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	border: none;
}

.valueImage ul li {
	position: absolute;
	top: 310px;
	left: 75px;
	width: 300px;
	line-height: 42px;
	color: #7515ff;
	font-size: 22px;
	text-align: center;
	font-weight: 800;
	border: none;
}

.valueImage ul li:nth-child(2) {
	top: 65px;
	left: 450px;
}

.valueImage ul li:nth-child(3) {
	top: 310px;
	left: 827px;
}

.valueImageTxt01 {
	position: absolute;
	left: 385px;
	top: 435px;
	width: 420px;
	line-height: 48px;
	color: white;
	font-size: 26px;
	text-align: center;
	font-weight: 800;
}

.valueImageTxt02 {
	position: absolute;
	left: 385px;
	top: 520px;
	width: 420px;
	color: #241a2c;
	font-size: 22px;
	text-align: center;
	font-weight: 800;
}

.valueContent02 {
	margin-top: 176px;
}

.valueList {
	background-color: #fff;
	padding-top: 120px;
}

.valueContent02 h2 {
	width: 1200px;
	margin: 0 auto;
	font-size: 24px;
}

.valueContent02 ul {
	margin: 35px 0 0;
	counter-reset: number;
}

.valueContent02 ul li {
	padding: 0 0 0;
	border-bottom: solid 1px #d1d1d1;
	counter-increment: number;
}

.valueContent02 ul li:first-child {
	border-top: solid 1px #d1d1d1;
}

.valueContent02 ul li a {
	display: block;
	padding: 80px 0;
}

.valueContent02 ul li a:hover {
	opacity: 0.7;
}

.valueContent02 ul li .valueContent02In {
	display: flex;
	width: 1120px;
	margin: 0 auto;
}

.valueContent02Left {
	position: relative;
	width: 390px;
	padding-left: 80px;
	font-size: 20px;
}

.valueContent02Left p {
	font-size: 12px;
}

.valueContent02 ul li .valueContent02In h3 {
	position: relative;
	font-size: 32px;
	line-height: 1.4em;
}

.valueContent02 ul li .valueContent02In .valueContent02Left::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 56px;
	background-image: url('/images/common/icon_arrow_value.svg');
	background-size: 100% 100%;
}

.valueContent02 ul li .valueContent02In .subtitleLink {
	margin-top: 8px;
	font-size: 15px;
	color: #77717c;
}

.valueContent02Text {
	width: 730px;
	font-size: 15px;
	line-height: 1.9em;
}

.valueContent02Text span {
	display: block;
	margin-bottom: 15px;
	font-size: 22px;
}

.valueClientImage {
	margin: 70px 0 0;
}

.valueClientImage img {
	width: 100%;
	height: auto;
}

.valueIntro {
	padding: 100px 0 100px;
	text-align: center;
}

.valueIntro .valueIntroEn {
	padding: 0 0;
	font-size: 64px;
}

.valueIntro h1 {
	padding: 25px 0 0;
	font-size: 20px;
}

.valueIntro h2 {
	padding: 40px 0 0;
	line-height: 1.4em;
	font-size: 32px;
}

.valueIntro p {
	padding: 40px 0 0;
}

.valueClient {
	width: 1200px;
	margin: 176px auto 0 auto;
}

.valueClient h2 {
	display: inline-block;
	padding: 25px 48px 21px 48px;
	color: #4E17AD;
	font-size: 32px;
	line-height: 1.5em;
	border-right: solid 2px #4E17AD;
	border-bottom: solid 2px #4E17AD;
}

.valueClientSubtitle {
	margin: 120px 0 0 48px;
	font-size: 24px;
	line-height: 1.5em;
}

.valueClientSubtitle02 {
	width: 348px;
	margin: 120px auto 0 48px;
}

.valueClientSubtitle::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin-bottom: 15px;
	background-image: url("../images/common/icon_arrow_05.svg");
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.valueClientTextImg {
	display: flex;
	justify-content: space-between;
	margin: 48px 0 0 48px;
}

.valueClientTextImg p {
	width: 340px;
}

.valueClientTextImg div {
	width: 768px;
}

.valueCont01Image {
	margin: 60px 0 0;
	text-align: center;
}

.valueCont02Merit {
	margin: 60px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 45px;
}

.valueCont02Merit li:not(:nth-child(3n)) {
	padding-right: 45px;
	border-right: 1px solid #d1d1d1;
}

.valueCont02Merit h4 {
	font-size: 14px;
	line-height: 1.5;
	position: relative;
}

.valueCont02Merit p {
	width: auto !important;
	margin-top: 5px;
	padding-bottom: 20px;
	font-size: 11px;
	line-height: 1.8;
}

.noteContent {
	height: 230px;
	padding: 0 48px;
	margin-top: 60px;
}

.noteContent iframe {
	margin: 0 auto !important;
}

.valueClientText {
	width: 720px;
	margin: 48px 0 0 48px;
}

.valueClientText02 {
	margin: 48px 0 0 48px;
}

.valueClientFlow {
	margin-top: 60px;
	padding: 48px 48px 20px;
	border: solid 1px #d6d6d6;
}

.valueClientFlow ul {
	background-color: #fff;
}

.valueClientFlow li {
	position: relative;
	display: grid;
	grid-template-columns: 270px 1fr;
	margin-left: 24px;
	padding-bottom: 31px;
	border-left: dashed 1px #7515ff;
	counter-increment: number;
}

.valueClientFlow li::before {
	content: counter(number);
	position: absolute;
	top: 0;
	left: -23px;
	width: 24px;
	height: 24px;
	font-family: "Onest", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	color: white;
	font-size: 17px;
	text-align: center;
	line-height: 1.7em;
	background-color: #7515ff;
}

.in-house .valueClientFlow li {
	grid-template-columns: 264px 1fr;
}

.valueClientFlow li:last-child {
	border-left: none;
	padding-bottom: 0;
}

.valueClientFlow li h4 {
	display: flex;
	justify-content: space-between;
	white-space: nowrap;
	padding-left: 10px;
	font-size: 17px;
}

.valueClientFlow li h4::after {
	content: "";
	display: block;
	width: 48px;
	background: url("../images/common/icon_arrow_06.svg") center .5em / 3px 6px no-repeat;
	flex-shrink: 0;
}

.valueClientFlow li p {
	display: flex;
	padding-bottom: 27px;
	font-size: 14px;
	border-bottom: solid 1px #e0e0e0;
}

.valueClientDx {
	margin-top: 60px;
}

.valueClientDx ul {
	display: flex;
	flex-wrap: wrap;
	row-gap: 45px;
}

.valueClientDx li {
	display: grid;
	grid-template-rows: repeat(2, fit-content(100%)) 1fr;
	width: 320px;
	padding: 0 50px 0 0;
	border-right: solid 1px #d1d1d1;
}

.valueClientDx li:nth-child(3n+2) {
	width: 365px;
	padding: 0 48px 0 48px;
}

.valueClientDx li:nth-child(3n) {
	width: 370px;
	padding: 0 0 0 48px;
}

.valueClientDx li:nth-child(3n) {
	border-right: none;
}

.valueClientDx li h4 {
	font-size: 24px;
	line-height: 1.4em;
}

.valueClientDx li h4 .sub {
	display: block;
	font-size: 13px;
	line-height: 1.4em;
	color: #77717c;
}

.valueClientDx li h5 {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5em;
}

.valueClientDx li:first-child h5 {
	letter-spacing: -.02em;
}

.valueClientDx li p {
	font-size: 11px;
	line-height: 1.8em;
	margin-top: 5px;
}

.valueClientDx li:nth-child(4) p {
	align-self: flex-end;
}

.valueClientPartner {
	width: 1200px;
	margin: 100px auto 0;
	padding: 100px 50px 100px;
	border-top: solid 1px #d1d1d1;
}

.valueClientPartner ul li {
	display: flex;
	justify-content: space-between;
	margin-bottom: 60px;
	padding-bottom: 0;
}

.valueClientPartner ul li:last-child {
	margin-bottom: 0;
}

.valueClientPartnerContent {
	width: 625px;
	margin: 0 auto auto 0;
	padding-top: 60px;
}

.valueClientPartnerContent h2 {
	font-size: 24px;
	line-height: 1.5em;
}

.valueClientPartnerContent p {
	margin-top: 20px;
}

.valueClientPartnerContent p a {
	text-decoration: underline;
}

.valueClientPartnerImg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 384px;
	height: 269px;
	background-color: #fafafa;
}

.valueClientPartner ul li:nth-child(1) .valueClientPartnerImg img {
	width: 128px;
}

.valueClientPartner ul li:nth-child(2) .valueClientPartnerImg img {
	width: 278px;
}

/*----------------------------------------------------
	added 24.07.18
----------------------------------------------------*/

.valueWorks {
	width: 1200px;
	margin: 120px auto 0;
}

.valueWorksTitle {
	text-align: center;
	font-size: 36px;
	line-height: 1.5em;
	margin-bottom: -30px;
}

.valueWorks .subtitleLink a {
	font-size: 15px;
	column-gap: 25px;
	align-items: center;
}

.valueWorks .subtitleLink a::after {
	width: 18.65px;
	height: 30px;
	background-position-y: 2px;
}

.valueWorks .worksList {
	margin-bottom: 48px;
}

.valueWorks .worksList li {
	width: 368px;
	padding-top: 0;
	margin: 0;
}

.valueWorks .worksListImg {
	width: 100%;
	height: auto;
	aspect-ratio: 1.77 / 1;
}

.valueWorks .worksList li img {
	width: 100%;
	height: 100%;
}

.valueSupportCards {
	display: flex;
	column-gap: 48px;
	margin-top: 60px;
	padding-left: 48px;
}

.valueSupportCards h4 {
	text-align: center;
	font-size: 18px;
	line-height: 1.5em;
	color: #4E17AD;
}

.valueSupportCards .notePost iframe {
	margin-bottom: 0 !important;
}

.valueWorks .contentLink {
	margin-top: 48px;
}

/*----------------------------------------------------
	RECRUIT
----------------------------------------------------*/

.contRecruit01 {
	margin-top: 100px;
}

.recruit .subContent {
	width: 100%;
}

.recruit .contRecruit01 .btnMore02 {
	margin-top: 25px;
}

.recruitTitleContainer {
	position: relative;
}

.recruitPdf {
	display: flex;
	width: 1200px;
	padding: 50px;
	margin: 60px auto;
	justify-content: space-between;
	align-items: center;
}

.recruitPdf p {
	width: 670px;
}

.recruitPdf a {
	display: block;
	width: 384px;
	height: 64px;
	margin: 0;
	padding: 0 0 0 32px;
	color: white;
	text-align: left;
	line-height: 64px;
	background-color: #241a2c;
	border-radius: 4px;
}

.recruitTitle {
	position: absolute;
	height: 100%;
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	grid-template-rows: repeat(2, fit-content(100%)) 1fr;
}

.recruitTitle .title03 {
	align-self: center;
}

.recruitIndexImage {
	width: 100%;
	display: flex;
	justify-content: flex-end;
}

.recruitIndexImage img {
	width: 54.86%;
}

.recruitIndex {
	margin: 176px auto 0 auto;
	width: 1200px;
}

.recruitIndex h2 {
	font-size: 32px;
	line-height: 1.5em;
	margin-bottom: 48px;
}

.recruitIndexText {
	display: grid;
	column-gap: 48px;
}

.recruitIndexTextImage {
	margin-top: 48px;
	display: flex;
	column-gap: 48px;
	justify-content: space-between;
	align-items: center;
}

.recruitIndexTextImage div {
	border-left: 1px solid #241A2C;
	padding-left: 48px;
}

.recruitIndex:not(.memberList) h3 {
	font-size: 24px;
	line-height: 1.5em;
	margin-bottom: 20px;
}

.recruitIndexTextImage figure {
	width: 672px;
	flex-shrink: 0;
	border: 1px solid rgba(0, 0, 0, 0.18);
}

.downloadBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	margin-top: 48px;
	padding: 48px;
}

.downloadBtn {
	display: block;
	box-sizing: border-box;
	width: 384px;
	padding: 20px 20px 14px 20px;
	color: white;
	font-size: 15px;
	background-color: #241A2C;
	border-radius: 2px;
	text-align: center;
	transition: background-color .4s ease, text-decoration .4s ease;
}

.downloadBtn:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	background-color: #3A13D6;
}

.recruitIndex .pagePostList {
	margin-top: 20px;
}

.supportContent {
	margin-top: 48px;
}

.supportContent h3 {
	line-height: 1 !important;
	border-left: 2px solid #6B4D82;
	padding: 8px 0 4px 20px;
}

.skillList {
	margin-top: 25px;
}

.skillList ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.skillList li {
	text-align: center;
	font-size: 14px;
	border: 1px solid #d1d1d1;
	padding: 10px 0 10px 0;
}

.benefitsList {
	background-color: #fff;
	padding: 48px;
}

.benefitsList ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.benefitsList li {
	font-size: 14px;
	padding: 11px 32px 5px 0;
}

.benefitsList li:not(:nth-child(3n)) {
	border-right: 1px solid #d1d1d1;
}

.contRecruit04 h2 {
	margin-top: 24px;
	font-size: 28px;
}

.recruitCareerTextImage {
	display: flex;
	justify-content: space-between;
	margin: 40px auto 0;
}

.recruitCareerTextImage p {}

.recruitCareerTextImage h3 {
	margin-top: 20px;
}

.recruitCareerTextImage .btnMore02 {
	margin-top: 10px;
	margin-left: 0;
}

.recruitCareerTextImage img {
	width: 430px;
}

.postItemProfile {
	width: 920px;
	margin: 0 auto;
	display: flex;
	column-gap: 8px;
	color: #241A2C;
}

.memberList .postItemProfile {
	width: auto;
	font-size: 12px;
	color: rgba(36, 26, 44, 0.62);
}

.postItemProfile div:not(:last-child)::after {
	content: '・';
	margin-left: 8px;
}

.memberMainImg {
	margin-top: 68px;
}

.interview .postDetailContent h3 {
	font-size: 17px;
	margin-bottom: 20px;
}

.relatedPosts.memberList {
	border-top: none;
	padding-top: 0;
}

/*----------------------------------------------------
	JOBS
----------------------------------------------------*/

.recruitJobs {
	width: 1200px;
	margin: 48px auto 0 auto;
}

.recruitJobs h2 {
	font-size: 24px;
	line-height: 1.5em;
	margin-bottom: 20px;
}

.jobList {
	margin-bottom: 48px;
}

.jobList li {
	border: 1px solid #77717c;
}

.jobList li:not(:last-child) {
	border-bottom: none;
}

.jobList li a {
	display: flex;
	align-items: center;
	column-gap: 20px;
	padding: 25px 48px 25px 48px;
	outline: 2px solid transparent;
	outline-offset: -1px;
	transition: outline-color .4s ease;
	background: url(../images/common/icon.svg) right 48px center / 24px 24px no-repeat;
}

.jobList li a:hover {
	outline-color: #7515ff;
}

.jobList li a:hover h3 {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jobList .location {
	display: block;
	font-size: 13px;
	line-height: 1.5em;
	color: #241A2C;
}

.jobDetailHeader h1 {}

.jobDetailHeader h2 {
	font-size: 32px;
}

.recruit .jobDetailHeader h2 {
	padding-left: 0;
	border-left: none;
}

.jobDetailBody h3 {
	color: rgba(36, 26, 44, 0.62);
}

.jobDetailBody h4 {
	margin-bottom: 15px;
}

.jobDetailBody p {
	padding-bottom: 15px;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.jobDescription+p {
	padding-bottom: 48px;
}

.relatedJobs {
	width: 1200px;
	margin: 96px auto 0 auto;
}

.relatedJobs h2 {
	font-size: 24px;
	line-height: 1.5em;
	margin-bottom: 20px;
}

/*----------------------------------------------------
	ABOUT
----------------------------------------------------*/

.about .subContent {
	width: 100%;
}

.about .titleEn,
.about .title {
	width: 1058px;
}

.aboutIndex {
	margin: 70px 0 0;
}


.aboutTitle {
	color: #241a2c;
	margin: 0 0 0;
	text-align: center;
}

.aboutTitle p {
	font-size: 64px;
	line-height: 1em;
}

.aboutTitle h2,
.aboutTitle h3 {
	margin-top: 20px;
	font-size: 30px;
	line-height: 1em;
}

.abtouImage {
	margin: 70px 0 0;
}

.abtouImage img {
	width: 100%;
}

.aboutSubtitle {
	font-size: 56px;
	line-height: 1.5em;
	margin-bottom: 120px;
}

.aboutIndexTitle {
	font-size: 32px;
	line-height: 1.5em;
	margin-bottom: 48px;
}

.aboutCont01 {
	margin-top: 100px;
}

.aboutTopTextImage {
	margin: 60px auto 0;
	display: grid;
	grid-template-columns: 1fr 312px;
	column-gap: 48px;
	place-content: center;
	place-items: center;
}

.aboutTopTextImage .aboutIndexTitle {
	margin-bottom: 20px;
}

.aboutTopTextImage img {
	width: 312px;
	height: auto;
}

.socialIssues {
	margin-top: 20px;
	padding: 0 45px;
}

.socialIssues h3 {
	width: fit-content;
	border: 1px solid #241A2C;
	border-radius: 4px;
	background-color: #fff;
	font-size: 17px;
	line-height: 1.5em;
	padding: 23.5px 48px 15px 48px;
	margin-bottom: 20px;
}

.socialIssues dl {}

.socialIssues dt {
	padding-left: 25px;
	font-size: 16px;
	line-height: 1.5em;
	margin-bottom: 8px;
	position: relative;
}

.socialIssues dt::before {
	content: '';
	display: block;
	width: 15px;
	height: 15px;
	background: url(../images/about/icon_arrow.svg) left -2px / contain no-repeat;
	position: absolute;
	left: 0;
	top: 7px;
}

.socialIssues dd {
	padding-left: 25px;
}

.socialIssues dd:not(:last-child) {
	margin-bottom: 20px;
}

.managerProfile {
	display: grid;
	grid-template-columns: 1fr 400px;
	column-gap: 48px;
	margin-top: 48px;
}

.managerProfile figure {
	order: 1;
}

.managerProfile h3 {
	display: flex;
	align-items: center;
	column-gap: 32px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.5em;
	margin-bottom: 20px;
}

.managerProfile h3 span {
	font-size: 17px;
}

.managerProfile h4 {
	margin-top: 20px;
	font-size: 12px;
}

.managerProfileText {
	font-size: 14px;
	line-height: 1.8em;
}

.managerProfileBio {
	font-size: 12px;
	line-height: 1.8em;
}

.historyTable {
	font-family: 'Noto Sans JP';
	width: 100%;
	margin-top: 60px;
	padding: 0 12px;
	font-size: 15px;
}

.historyTable td {
	padding: 12px 0;
}

.historyTable .year,
.historyTable .month {}

.historyTable .year {
	padding-left: 12px;
	width: 124px;
}

.historyTable .month {
	width: 112px;
}

.historyTable td:last-child {
	padding-right: 10px;
}

.historyTable tr:nth-child(even) td {
	background-color: #fff;
}

.companyAward {
	margin: 60px 0 0;
	text-align: center;
}

.infografic .companyAward {
	margin: 60px 0 60px;
}

.companyTable {
	font-family: 'Noto Sans JP';
	width: 100%;
	margin: 60px auto 0;
	font-size: 15px;
}

.companyTable th {
	width: 217px;
	color: rgba(36, 26, 44, .62);
	padding: 30px 0 30px 0;
	vertical-align: top;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.companyTable tr:first-child th {
	padding-top: 0;
	1
}

.companyTable td {
	padding: 30px 0 30px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.companyTable tr:first-child td {
	padding-top: 0;
}

.aboutIndex td a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aboutIndex td a:hover {
	text-decoration: none;
}

/*----------------------------------------------------
	STATS
----------------------------------------------------*/

.infografic01 {
	border-top: none;
}

.infograficWorkCont {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 65px;
	row-gap: 45px;
	width: 1200px;
	margin: 60px auto 0;
}

.infograficWorkCont li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
}

.infograficWorkCont li img {
	width: 260px;
}

.infograficWorkCont li .infograficWorkContRight {
	width: 260px;
}

.infograficWorkCont li .infograficWorkContRight h3 {
	font-size: 24px;
	text-align: center;
}

.infograficWorkCont li .infograficWorkContRight .infograficWorkContNum {
	margin-top: 30px;
	font-size: 56px;
	text-align: center;
}

.infograficWorkCont li .infograficWorkContRight .infograficWorkContNum span {
	display: inline-block;
	margin-left: 10px;
	font-size: 36px;
}

.infograficWorkCont li .infograficWorkContRight p {
	margin-top: 30px;
	font-size: 14px;
	line-height: 1.8em;
}

.infografic02Cont {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 60px;
	padding-right: 50px;
}

.infografic02Cont img {
	width: 640px;
}

.infografic02Cont .infografic02ContNum {
	width: 400px;
}

.infografic02ContNum li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 10px;
	border-top: solid 1px #d1d1d1;
}

.infografic02ContNum li:last-child {
	border-bottom: solid 1px #d1d1d1;
}

.infografic02ContNum li h3 {
	font-size: 20px;
}

.infografic02ContNum li p {}

.infografic02ContNum li p span {
	display: inline-block;
	font-size: 40px;
	margin-right: 10px;
}

.stats .subContent {
	width: 100%;
}

.stats .title03 {
	font-size: 17px;
	line-height: 1.5em;
	margin-bottom: 80px;
}

.aboutStatsImage img {
	width: 100%;
}

.aboutStats {
	width: 1200px;
	margin: 120px auto 0 auto;
}

.aboutStats:first-of-type,
.aboutStats:last-of-type {
	margin-top: 176px;
}

.aboutStats h2 {
	font-size: 32px;
	line-height: 1.5em;
	margin-bottom: 48px;
	position: relative;
}

.aboutStats h2 .icon {
	display: block;
	margin-bottom: 12px;
}

.aboutStats h2 span:not(.icon) {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 15px;
}

.statsContainer {
	padding: 60px 0 0;
	background-color: #fff;
	display: flex;
	flex-wrap: wrap;
	gap: 48px 32px;
}

.statsContainer h3 {
	font-size: 20px;
	line-height: 1.5em;
	margin-bottom: 13px;
}

.statsContainer>div {
	padding-left: 31px;
	border-left: 1px solid #d1d1d1;
}

.statsContainer>div:first-child,
.dataGroup01>div:nth-child(2),
.dataGroup02>div:nth-child(3),
.dataGroup03>div:nth-child(4) {
	border-left: none;
}

.statsContainer>div:not(.statsTextImage) {
	width: calc((100% - 64px) / 3);
}

.dataGroup02>div:nth-child(-n+2) {
	width: calc((100% - 32px) / 2);
}

.dataGroup03>div:first-child {
	position: relative;
}

.dataGroup02>div:nth-child(-n+2)>* {
	display: inline-block;
	margin-right: 20px;
}

.statsTextImage {
	width: 100%;
	display: flex;
	column-gap: 48px;
	align-items: center;
	margin-bottom: 32px;
}

.statsTextImage div {
	width: 528px;
}

.statsTextImage .statsData {
	margin-bottom: 20px;
}

.statsData p {
	padding-left: 60px;
	font-size: 17px;
	line-height: 52px;
	background-image: url('/images/about/infografic/0301.svg');
	background-position: left 0 top 5px;
	background-repeat: no-repeat;
	background-size: 48px 48px;
}

.statsContainer div:nth-child(2) .statsData p {
	background-image: url('/images/about/infografic/0302.svg');
}

.statsContainer div:nth-child(3) .statsData p {
	background-image: url('/images/about/infografic/0303.svg');
}

.statsContainer div:nth-child(4) .statsData p {
	background-image: url('/images/about/infografic/0304.svg');
}

.statsContainer div:nth-child(5) .statsData p {
	background-image: url('/images/about/infografic/0305.svg');
}

.statsContainer div:nth-child(6) .statsData p {
	background-image: url('/images/about/infografic/0306.svg');
}

.statsData em {
	display: inline-block;
	padding-bottom: 7px;
	vertical-align: bottom;
	font-style: normal;
	font-size: 52px;
}

.statsData em {
	margin-right: 4px;
	letter-spacing: -.012em;
}

.statsTextImage .statsData em {
	margin-right: 12px;
	margin-left: 12px;
}

.statsTextImage .statsData em:nth-of-type(2) {
	margin-left: 0;
}

.statsData .note {
	margin-top: 4px;
}

.dataGroup03 .statsData .note {
	display: inline-block;
	font-size: 12px;
}

/*----------------------------------------------------
	CONTACT
----------------------------------------------------*/

.contact .titleEn,
.contact .title {
	width: 720px;
}

.form {
	width: 1200px;
	margin: 48px auto 0 auto;
}

.form p {
	margin-bottom: 20px;
}

.form .formFinishTxt {
	text-align: center;
}

.formItem {
	margin-bottom: 20px;
	position: relative;
}

.formItem .error {
	color: red;
}

.placeholderText {
	display: block;
	font-size: 15px;
	color: rgba(36, 26, 44, .62);
	/*
	position: absolute;
	left: 16px;
	top: 16px;
	transition: opacity .3s ease;
	*/
}

.required .placeholderText::after {
	content: '必須';
	color: #FF2171;
	font-size: 13px;
	margin-left: 8px;
}

.formItem:focus-within .placeholderText,
.placeholderText.hidden {
	/*
	opacity: 0;
	*/
}

.formItem:focus-within.formRadio .placeholderText {
	opacity: 1;
}

input[type=text],
textarea {
	box-sizing: border-box;
	width: 100%;
	font-size: 15px;
	border: 1px solid rgba(0, 0, 0, .12);
	padding: 18.5px 16px;
	border-radius: 2px;
	position: relative;
	z-index: 3;
}

input[type=radio] {
	appearance: auto;
	vertical-align: middle;
}

.formRadio span {
	position: relative;
	top: auto;
	left: auto;
}

select {
	width: 30%;
	padding: 18.5px 16px;
	border-radius: 2px;
	border: 1px solid rgba(0, 0, 0, .12);
	font-size: 15px;
	color: rgba(36, 26, 44, 0.62);
	background: url(../images/form/icon_select_arrow.svg) right 16px center / 24px 24px no-repeat;
	cursor: pointer;
}

option {
	color: #241A2C;
}

.consentBox {
	margin-top: 48px;
	width: 100%;
	height: 320px;
	border: 1px solid rgba(0, 0, 0, .18);
	overflow-y: scroll;
}

.consentBox div {
	padding: 32px;
}

.consentBox h2 {
	line-height: 1.5em;
	margin-bottom: 20px;
}

.consentBox p,
.consentBox dt {
	margin-bottom: 8px;
}

.consentBox dd:not(:last-child) {
	margin-bottom: 20px;
}

.consentForm {
	text-align: center;
	margin-top: 20px;
}

.consentForm label {
	cursor: pointer;
	display: inline-block;
	position: relative;
	padding-left: 36px;
	padding-top: 5px;
}

.consentForm label::before {
	content: '';
	display: block;
	width: 22px;
	height: 22px;
	border: 1px solid #241A2C;
	border-radius: 2px;
	position: absolute;
	left: 0;
	top: calc(50% - 11px);
}

.consentForm label::after {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	background: url(../images/form/icon_checked.svg) center 7px no-repeat;
	position: absolute;
	left: 0;
	top: calc(50% - 12px);
	opacity: 0;
}

input[type=checkbox]:checked+label::after {
	opacity: 1;
}

.btnArea {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 12px;
}

.submitBtn {
	cursor: pointer;
	width: 336px;
	color: #fff;
	background-color: #241A2C;
	border-radius: 2px;
	padding: 17.5px;
}

.confirmContent {
	margin-top: 48px;
}

.confirmItem {
	padding: 20px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.confirmItem label {
	display: block;
	color: rgba(36, 26, 44, .62);
	margin-bottom: 8px;
}

.confirm .btnArea {
	margin-top: 48px;
}

.editBtn {
	cursor: pointer;
	width: 336px;
	border: 1px solid #241A2C;
	border-radius: 2px;
	padding: 17.5px;
}



/*----------------------------------------------------
	dx
----------------------------------------------------*/

.contDx01 {
	border: none;
}

.dxImage {
	width: 300px;
	margin: 0 auto;
}




/*----------------------------------------------------
	security
----------------------------------------------------*/

.contSecurity01 {
	margin-top: 100px;
}

.securityImage {
	width: 300px;
	margin: 0 auto;
}