@charset "UTF-8";


/* reset ---------------------------------------*/

div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,
h6,pre,code,form,fieldset,legend,
input,textarea,p,blockquote,
th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;word-break: break-all;font-size:inherit;width:100%;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q::before,q::after{content:'';}
abbr{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{font-size:100%;}
legend{color:#000;}
select,input,button,textarea{font-size:inherit;font-family:inherit;box-sizing: border-box;}
pre,code,kbd,samp{font-family:monospace;font-size:108%;line-height:100%;}
figure{padding:0;margin:0;}
input[type="submit"],
input[type="button"],
button {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration,
button::-webkit-search-decoration {display: none;}
input[type="submit"]::focus,
input[type="button"]::focus,
button::focus {outline-offset: -2px;}


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

*{box-sizing:border-box;}

html,body{height:100%;}

body{
	-webkit-text-size-adjust: 100%;
	padding:0;
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-feature-settings: "palt" 1;
	-webkit-font-feature-settings: "palt" 1;
	color: #fff;
	background: #1C1C1C;
}

a{
	text-decoration: none;
	color:inherit;
	transition: all .3s ease;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

a:hover{opacity: 0.8;}

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


/* common item ---------------------------------------*/

.clearfix::after,
.inner::after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.ov-h{overflow: hidden;}

.font-notoserif {font-family: "Noto Serif JP", serif;}
.font-abhaya {font-family: "Abhaya Libre", serif;}


/* layout ---------------------------------------*/

.inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 min(calc(64 / 1440 * 100vw), 64px) 0 min(calc(228 / 1440 * 100vw), 228px);
}

.overlay{display: none;}


/* header ---------------------------------------*/

header {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	width: 100%;
	height: 0;
}

#openmenu {
	display:block;
	width:32px;
	height:32px;
	text-indent: -99em;
	overflow: hidden;
	position:absolute;
	right: 20px;
	top: 24px;
	z-index: 101;
	transition: all .25s ease;
}

#openmenu span {
	content:'';
	display: block;
	width:24px;
	height:2px;
	background: #fff;
	position: absolute;
	left:4px;
	transition: all .25s ease;
}
#openmenu span:nth-child(1) {top:7px;}
#openmenu span:nth-child(2) {top:15px;}
#openmenu span:nth-child(3) {top:23px;}

#openmenu.is-open span {
	top: 15px;
}
#openmenu.is-open span:nth-child(1) {transform:rotate(45deg);}
#openmenu.is-open span:nth-child(2) {opacity:0;}
#openmenu.is-open span:nth-child(3) {transform:rotate(-45deg);}


/* gnav ---------------------------------------*/

.gnav {
	background: #000;
	overflow:auto;
	z-index:100;
	left:0;
	top:0;
	width:100%;
	height: 100vh;
	transition: all .25s ease;
	transform:translate3d(0, -100% ,0);
	padding: 40px 72px;
}

.gnav.is-active {
	position: fixed;
	transform:translate3d(0,0,0);
	opacity:1;
}

.gnav-logo {
	display: block;
	width: 268px;
	margin-bottom: 48px;
}

.gnav-logo:hover {opacity: 1;}


.gnav-logo img {
	width: 100%;
}

.gnav-list > li {
	display: block;
}

.gnav-list > li + li {
	margin-top: 10px;
}

.gnav-list > li a {
	display: inline-block;
	width: auto;
	height: 43px;
}

.gnav-list > li a img {
	width: auto;
	height: 100%;
}

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


/* wrapper ---------------------------------------*/
.wrapper {
  background-image: linear-gradient(0deg, #000000, #1C1C1C);
}


/* kv ---------------------------------------*/
.kv {
	position: relative;
	z-index: 1;
	height: 100vh;
}

.kv-video {
	width: 100%;
	aspect-ratio: 1440 / 866;
}

.kv-video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kv-title {
	position: absolute;
	margin: auto;
	height: calc(680 / 1440 * 100vw);
	top: 0;
	bottom: 0;
	right: 4%;
	z-index: 3;
	font-size: 0;
	white-space: nowrap;
	writing-mode: vertical-rl;
}

.kv-title span {
	font-size: calc(126 / 1440 * 100vw);
	font-weight: 900;
	line-height: 1.09;
	letter-spacing: 0;
	color: #fff;
}

.kv-title span:first-of-type {margin-bottom: calc(-18 / 1440 * 100vw);}
.kv-title span:nth-of-type(2) {margin-bottom: calc(-22 / 1440 * 100vw);}
.kv-title span:nth-of-type(3) {margin-bottom: calc(-14 / 1440 * 100vw);}
.kv-title span:nth-of-type(4) {margin-bottom: calc(-18 / 1440 * 100vw);}
.kv-title span:nth-of-type(5) {margin-bottom: calc(-18 / 1440 * 100vw);}
.kv-title span:nth-of-type(7) {margin-bottom: calc(-24 / 1440 * 100vw);}
.kv-title span:nth-of-type(8) {margin-bottom: calc(-10 / 1440 * 100vw);}
.kv-title span:nth-of-type(9) {margin-bottom: calc(-23 / 1440 * 100vw);}

.kv-text {
	position: absolute;
	margin: auto;
	height: calc(636 / 1440 * 100vw);
	top: 0;
	bottom: 0;
	left: 1.9%;
	font-size: calc(236 / 1440 * 100vw);
	z-index: 1;
	font-weight: 800;
	line-height: 0.699;
	color: #B70000;
}

.kv-logo {
	position: absolute;
	top: 54%;
	left: 50.4%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: calc(513 / 1440 * 100vw);
}

.kv-logo img {
	width: 100%;
}


/* section ---------------------------------------*/
.section {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
}

.section-title {
	position: absolute;
	left: calc(14 / 1440 * 100vw);
	z-index: 1;
	transform: rotate(90deg);
	transform-origin: 0 100%;
}

.section-subtitle {
	font-size: min(calc(82 / 1440 * 100vw), 82px);
	font-weight: 900;
	line-height: 1.333;
	color: #fff;
	margin-bottom: min(calc(63 / 1440 * 100vw), 63px);
}

.section-subtitle strong {
	display: block;
	font-size: min(calc(128 / 1440 * 100vw), 128px);
	font-weight: 900;
	line-height: 1;
	margin-bottom: max(calc(-14 / 1440 * 100vw), -14px);
}

.section-subtitle span {
	font-size: min(calc(60 / 1440 * 100vw), 60px);
	font-weight: 900;
	line-height: 1;
}

.section-subtitle b {
	display: block;
	font-size: min(calc(106 / 1440 * 100vw), 106px);
	font-weight: 900;
	line-height: 1;
}

.section-text {
	font-size: min(calc(20 / 1440 * 100vw), 20px);
	font-weight: 700;
	line-height: 2.25;
	letter-spacing: 0.08em;
	color: #fff;
}

.section-list > li {
	position: relative;
	padding-left: min(calc(30 / 1440 * 100vw), 30px);
	font-size: min(calc(20 / 1440 * 100vw), 20px);
	font-weight: 700;
	line-height: 2.25;
	letter-spacing: 0.08em;
	color: #fff;
}

.section-list > li::before {
	position: absolute;
	top: 0;
	left: min(calc(10 / 1440 * 100vw), 10px);
	font-size: min(calc(20 / 1440 * 100vw), 20px);
	content: '・';
}

.section-text + .section-text,
.section-text + .section-list,
.section-list + .section-text {
	margin-top: min(calc(30 / 1440 * 100vw), 30px);
}


/* philosophy ---------------------------------------*/
.philosophy {
	padding: min(calc(100 / 1440 * 100vw), 100px) 0 0;
	margin-bottom: min(calc(156 / 1440 * 100vw), 156px);
}

.philosophy-title {
	top: max(calc(-67 / 1440 * 100vw), -67px);
	width: calc(589 / 1440 * 100vw);
}


/* mission ---------------------------------------*/
.mission {
	margin-bottom: min(calc(56 / 1440 * 100vw), 56px);
}

.mission-title {
	top: max(calc(-95 / 1440 * 100vw), -95px);
	width: calc(410 / 1440 * 100vw);
}


/* vision ---------------------------------------*/
.vision {
	margin-bottom: min(calc(122 / 1440 * 100vw), 122px);
}

.vision-title {
	top: max(calc(-120 / 1440 * 100vw), -120px);
	width: calc(336 / 1440 * 100vw);
}

.vision .section-subtitle {
	margin-right: max(calc(-40 / 1440 * 100vw), -40px);
}


/* value ---------------------------------------*/
.value {
	margin-bottom: min(calc(126 / 1440 * 100vw), 126px);
}

.value-title {
	top: max(calc(-87 / 1440 * 100vw), -87px);
	width: calc(302 / 1440 * 100vw);
}

.value-block + .value-block {
	margin-top: min(calc(62 / 1440 * 100vw), 62px);
}

.value .section-subtitle {
	margin-bottom: min(calc(58 / 1440 * 100vw), 58px);
}


/* company ---------------------------------------*/
.company {
	margin-bottom: min(calc(178 / 1440 * 100vw), 178px);
}

.company-title {
	top: max(calc(-126 / 1440 * 100vw), -126px);
	width: calc(494 / 1440 * 100vw);
}

.company-inner {
	padding: 0 min(calc(64 / 1440 * 100vw), 64px) 0 min(calc(180 / 1440 * 100vw), 180px);
}

.company-image {
	position: relative;
	width: calc(1142 / 1196 * 100%);
	aspect-ratio: 1142 / 829;
	margin-bottom: calc(-154 / 1196 * 100%);
}

.company-image-inner {
	width: calc(954 / 1142 * 100%);
	margin: 0 0 auto auto;
}

.company-image-inner img {
	width: 100%;
}

.company-image-inner::before {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: calc(902 / 1142 * 100%);
	aspect-ratio: 902 / 675;
	background: #818181;
	content: '';
}

.company-list {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
	padding-left: calc(56 / 1196 * 100%);
}

.company-list dt {
	width: calc(125 / 1140 * 100%);
	font-size: min(calc(20 / 1440 * 100vw), 20px);
	font-weight: 700;
	line-height: 2.25;
	color: #fff;
}

.company-list dd {
	width: calc(100% - calc(125 / 1140 * 100%));
	font-size: min(calc(20 / 1440 * 100vw), 20px);
	font-weight: 700;
	line-height: 2.25;
	color: #fff;
}


/* topmessage ---------------------------------------*/
.topmessage {
	margin-bottom: min(calc(82 / 1440 * 100vw), 82px);
}

.topmessage-title {
	top: max(calc(-118 / 1440 * 100vw), -118px);
	width: calc(725 / 1440 * 100vw);
}

.topmessage-inner {
	padding: 0 min(calc(64 / 1440 * 100vw), 64px) 0 min(calc(236 / 1440 * 100vw), 236px);
}

.topmessage-image {
	position: relative;
	width: calc(1041 / 1140 * 100%);
	aspect-ratio: 1041 / 855;
	margin-bottom: calc(-156 / 1140 * 100%);
}

.topmessage-image-inner {
	width: calc(584 / 1041 * 100%);
}

.topmessage-image-inner::before {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -1;
	width: calc(572 / 1041 * 100%);
	aspect-ratio: 572 / 675;
	background: #818181;
	content: '';
}

.topmessage-image-inner img {
	width: 100%;
}

.topmessage .section-text {
	width: calc(944 / 1140 * 100%);
}


/* service ---------------------------------------*/
.service {
	margin-bottom: min(calc(182 / 1440 * 100vw), 182px);
}

.service-title {
	top: max(calc(-120 / 1440 * 100vw), -120px);
	width: calc(400 / 1440 * 100vw);
}

.service-inner {
	padding: 0 min(calc(163 / 1440 * 100vw), 163px) 0 min(calc(236 / 1440 * 100vw), 236px);
}

.service-block + .service-block {
	margin-top: min(calc(44 / 1440 * 100vw), 44px);
}

.service .section-subtitle {
	margin-bottom: min(calc(48 / 1440 * 100vw), 48px);
	margin-right: max(calc(-40 / 1440 * 100vw), -40px);
}

.service .section-text + .section-subtitle {
	margin-top: min(calc(62 / 1440 * 100vw), 62px);
}


/* recruit ---------------------------------------*/
.recruit {
	/* margin-bottom: max(calc(-110 / 1440 * 100vw), -110px); */
	padding-bottom: min(calc(110 / 1440 * 100vw), 110px);
}

.recruit-title {
	top: max(calc(-110 / 1440 * 100vw), -110px);
	width: calc(386 / 1440 * 100vw);
}

.recruit-inner {
	max-width:1440px;
	margin:0 auto;
	padding: 0 min(calc(186 / 1440 * 100vw), 186px) 0;
}

.recruit-block {
	margin-bottom: min(calc(58 / 1440 * 100vw), 58px);
}

.recruit .section-subtitle {
	margin-right: max(calc(-40 / 1440 * 100vw), -40px);
}

.recruit .section-text {
	width: calc(944 / 1068 * 100%);
}

.recruit-banner {
	display: block;
	width: 100%;
}

.recruit-banner + .recruit-banner {
	margin-top: calc(60 / 1068 * 100%);
}

.recruit-image {
	width: 100%;
	position: relative;
	z-index: 1;
	margin-top: min(calc(58 / 1068 * 100%), 58px);
}

.recruit-image-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 60%;
}

.recruit-image-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* footer ---------------------------------------*/
.footer {
	position: relative;
	padding: min(calc(264 / 1440 * 100vw), 264px) 0 min(calc(52 / 1440 * 100vw), 52px);
	background: url('../img/bg_footer.jpg') no-repeat;
    background-position: center;
	background-size: cover;
}

.footer-inner {
	max-width:1440px;
	margin:0 auto;
	padding: 0 min(calc(186 / 1440 * 100vw), 186px) 0;
}

.footer-contact {
	display: block;
	width: 100%;
	margin-bottom: calc(104 / 1068 * 100%);
}

.footer-logo {
	width: calc(404 / 1068 * 100%);
	margin: 0 auto calc(24 / 1068 * 100%);
}

.copyright {
	display: block;
	font-size: min(calc(20 / 1440 * 100vw), 20px);
	font-weight: 500;
	text-align: center;
	letter-spacing: 0;
	text-align: center;
	color: #fff;
}


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

/* large pc */
@media screen and (min-width: 1441px) {
	.footer {
		min-height: 783px;
	}
}

/* small pc */
@media screen and (min-width: 768px) and (max-width: 850px){

}


/* sp only */
@media screen and (max-width: 767px){

	/* common item ---------------------------------------*/

	.pc{display: none !important;}
	.pcbr{display: none;}

	body {
		background: #000;
	}

	a:hover{opacity: 1;}


	/* layout ---------------------------------------*/

	.footer-inner,
	.inner{
		min-width: 0;
		width: 100%;
	}


	/* layout ---------------------------------------*/
	.inner {
		max-width: unset;
		padding: unset;
	}


	/* header ---------------------------------------*/

	#openmenu {
		width: calc(32 / 375 * 100vw);
		height: calc(32 / 375 * 100vw);
		right: calc(20 / 375 * 100vw);
		top: calc(24 / 375 * 100vw);
	}

	#openmenu span {
		width: calc(24 / 375 * 100vw);
		height: calc(2 / 375 * 100vw);
		left: calc(4 / 375 * 100vw);
	}
	#openmenu span:nth-child(1) {top: calc(7 / 375 * 100vw);}
	#openmenu span:nth-child(2) {top: calc(15 / 375 * 100vw);}
	#openmenu span:nth-child(3) {top: calc(23 / 375 * 100vw);}

	#openmenu.is-open span {
		top: calc(15 / 375 * 100vw);
	}

	/* gnav ---------------------------------------*/

	.gnav {
		padding: calc(40 / 375 * 100vw) calc(40 / 750 * 100vw) calc(60 / 375 * 100vw);
	}

	.gnav-logo {
		width: calc(268 / 375 * 100vw);
		margin-bottom: calc(48 / 375 * 100vw);
	}

	.gnav-list {
		margin-bottom: calc(70 / 375 * 100vw);
		margin-left: calc(3 / 375 * 100vw);
	}

	.gnav-list > li + li {
		margin-top: calc(10 / 375 * 100vw);
	}

	.gnav-list > li a {
		height: calc(43 / 375 * 100vw);
	}

	.gnav-contact {
		display: block;
		width: 100%;
		margin-bottom: calc(20 / 375 * 100vw);
	}

	.gnav-contact img {
		width: 100%;
	}

	.gnav-banner {
		display: block;
		width: 100%;
	}

	.gnav-banner + .gnav-banner {
		margin-top: calc(10 / 375 * 100vw);
	}


	/* kv ---------------------------------------*/
	.kv {
		position: relative;
		z-index: 1;
	}

	.kv-video {
		aspect-ratio: 375 / 866;
	}

	.kv-video video {
		object-position: 50% 100%;
	}

	.kv-title {
		margin: auto;
		width: calc(170 / 375 * 100vw);
		top: 12.6%;
		bottom: auto;
		right: 0;
		left: 0;
		height: auto;
	}

	.kv-title span {
		font-size: calc(78 / 375 * 100vw);
	}

	.kv-title span:first-of-type {margin-bottom: calc(-14 / 375 * 100vw);}
	.kv-title span:nth-of-type(2) {margin-bottom: calc(-14 / 375 * 100vw);}
	.kv-title span:nth-of-type(3) {margin-bottom: calc(-9 / 375 * 100vw);}
	.kv-title span:nth-of-type(4) {margin-bottom: calc(-13 / 375 * 100vw);}
	.kv-title span:nth-of-type(5) {margin-bottom: calc(-12 / 375 * 100vw);}
	.kv-title span:nth-of-type(7) {margin-bottom: calc(-17 / 375 * 100vw);}
	.kv-title span:nth-of-type(8) {margin-bottom: calc(-8 / 375 * 100vw);}
	.kv-title span:nth-of-type(9) {margin-bottom: calc(-15 / 375 * 100vw);}

	.kv-text {
		top: 1.8%;
		left: 1.8%;
		font-size: calc(80 / 375 * 100vw);
		line-height: 0.699;
		height: auto;
	}

	.kv-logo {
    top: auto;
    bottom: 8vh;
		left: 52.4%;
		width: calc(308 / 375 * 100vw);
	}


	/* section ---------------------------------------*/
	.section {
		max-width: unset;
	}

	.section-title {
		position: unset;
		transform: unset;
	}

	.section-subtitle {
		font-size: calc(40 / 375 * 100vw);
		margin-bottom: calc(30 / 375 * 100vw);
	}

	.section-subtitle strong {
		font-size: calc(40 / 375 * 100vw);
		line-height: 1;
		margin-bottom: calc(-8 / 375 * 100vw);
	}

	.section-subtitle span {
		display: block;
		font-size: calc(32 / 375 * 100vw);
		line-height: 1;
	}

	.section-subtitle b {
		font-size: calc(33 / 375 * 100vw);		font-weight: 900;
	}

	.section-text {
		font-size: calc(16 / 375 * 100vw);
		line-height: 2;
	}

	.section-list > li {
		padding-left: calc(30 / 375 * 100vw);
		font-size: calc(20 / 375 * 100vw);
		line-height: 2;
	}

	.section-list > li::before {
		left: calc(10 / 375 * 100vw);
		font-size: calc(20 / 375 * 100vw);
	}

	.section-text + .section-text,
	.section-text + .section-list,
	.section-list + .section-text {
		margin-top: calc(30 / 375 * 100vw);
	}


	/* philosophy ---------------------------------------*/
	.philosophy {
		padding: calc(24 / 375 * 100vw) 0 0;
		margin-bottom: calc(92 / 375 * 100%);
	}

	.philosophy-title {
		width: calc(298 / 375 * 100%);
		margin: 0 auto 0 calc(4 / 375 * 100vw);
	}

	.philosophy-inner {
		padding: 0 calc(30 / 375 * 100vw);
	}


	/* mission ---------------------------------------*/
	.mission {
		margin-bottom: calc(100 / 375 * 100%);
	}

	.mission-title {
		width: calc(205 / 375 * 100%);
		margin: 0 auto calc(20 / 375 * 100vw) calc(4 / 375 * 100vw);
	}

	.mission-inner {
		padding: 0 calc(25 / 375 * 100vw);
	}

	/* vision ---------------------------------------*/
	.vision {
		margin-bottom: calc(28 / 375 * 100%);
	}

	.vision-title {
		width: calc(168 / 375 * 100%);
		margin: 0 auto calc(12 / 375 * 100vw) 0;
	}

	.vision-inner {
		padding: 0 calc(25 / 375 * 100vw);
	}

	.vision .section-subtitle {
		margin-right: unset;
	}


	/* value ---------------------------------------*/
	.value {
		margin-bottom: calc(92 / 375 * 100%);
	}

	.value-title {
		width: calc(151 / 375 * 100%);
		margin: 0 auto calc(28 / 375 * 100vw) 0;
	}

	.value-inner {
		padding: 0 calc(21 / 375 * 100vw) 0 calc(8 / 375 * 100vw);
	}

	.value-block + .value-block {
		margin-top: calc(54 / 375 * 100%);
	}

	.value .section-subtitle {
		margin-bottom: calc(32 / 375 * 100%);
	}

	.value .section-text {
		font-size: calc(20 / 375 * 100vw);
		line-height: 2.25;
		padding-left: calc(8 / 375 * 100vw);
	}


	/* company ---------------------------------------*/
	.company {
		margin-bottom: calc(50 / 375 * 100%);
	}

	.company-title {
		width: calc(247 / 375 * 100%);
		margin: 0 auto calc(28 / 375 * 100vw) calc(2 / 375 * 100vw);
	}

	.company-inner {
		padding: 0;
	}

	.company-image {
		width: 100%;
		aspect-ratio: 375 / 297;
		margin-bottom: calc(60 / 375 * 100%);
	}

	.company-image-inner {
		width: calc(340 / 375 * 100%);
	}

	.company-image-inner::before {
		width: calc(290 / 375 * 100%);
		aspect-ratio: 290 / 242;
	}

	.company-list {
		gap: calc(21 / 375 * 100vw) 0;
		padding: 0 calc(8 / 375 * 100vw) 0 calc(21 / 375 * 100vw);
	}

	.company-list dt {
		width: calc(108 / 375 * 100%);
		font-size: calc(16 / 375 * 100vw);
		line-height: 1.5;
	}

	.company-list dd {
		width: calc(100% - calc(108 / 375 * 100%));
		font-size: calc(16 / 375 * 100vw);
		line-height: 1.5;
	}


	/* topmessage ---------------------------------------*/
	.topmessage {
		margin-bottom: calc(84 / 375 * 100%);
	}

	.topmessage-title {
		width: calc(366 / 375 * 100%);
		margin: 0 auto calc(16 / 375 * 100vw) calc(5 / 375 * 100vw);
	}

	.topmessage-inner {
		padding: 0;
	}

	.topmessage-image {
		width: 100%;
		aspect-ratio: 375 / 464;
		margin-bottom: calc(-86 / 375 * 100%);
	}

	.topmessage-image-inner {
		width: calc(317 / 375 * 100%);
	}

	.topmessage-image-inner::before {
		width: calc(141 / 375 * 100%);
		aspect-ratio: 141 / 366;
	}

	.topmessage .section-text {
		width: calc(331 / 375 * 100%);
		margin: 0 auto;
	}


	/* service ---------------------------------------*/
	.service {
		margin-bottom: calc(84 / 375 * 100%);
	}

	.service-title {
		width: calc(200 / 375 * 100%);
		margin: 0 auto calc(20 / 375 * 100vw) calc(2 / 375 * 100vw);
	}

	.service-inner {
		padding: 0 calc(20 / 375 * 100%) 0 calc(21 / 375 * 100%);
	}

	.service-block + .service-block {
		margin-top: calc(22 / 375 * 100%);
	}

	.service .section-subtitle {
		line-height: 1.6;
		margin-bottom: calc(40 / 375 * 100%);
		margin-right: unset;
	}

	.service .section-text {
		font-size: calc(20 / 375 * 100vw);
		line-height: 1.65;
	}

	.service .section-text + .section-subtitle {
		margin-top: calc(31 / 375 * 100%);
	}


	/* recruit ---------------------------------------*/
	.recruit {
		margin-bottom: calc(92 / 375 * 100%);
	}

	.recruit-title {
		width: calc(193 / 375 * 100%);
		margin: 0 auto calc(24 / 375 * 100vw) calc(4 / 375 * 100vw);
	}

	.recruit-inner {
		max-width:unset;
		padding: 0 calc(45 / 750 * 100%);
	}

	.recruit-block {
		margin-bottom: calc(40 / 375 * 100%);
	}

	.recruit .section-subtitle {
		margin-right: unset;
	}

	.recruit .section-text {
		font-size: calc(20 / 375 * 100vw);
		width: unset;
		margin: 0 auto;
	}

	.recruit-banner + .recruit-banner {
		margin-top: calc(10 / 330 * 100%);
	}

	.recruit-image {
		margin-top: calc(20 / 330 * 100%);
	}

	.recruit-image-wrapper {
		padding-bottom: 71%;
	}


	/* footer ---------------------------------------*/
	.footer {
		padding: calc(184 / 375 * 100%) 0 calc(40 / 375 * 100%);
		aspect-ratio: 375 / 296;
	}

	.footer-inner {
		max-width:unset;
		padding: 0 calc(20 / 375 * 100%);
	}

	.footer-contact {
		position: absolute;
		top: calc(-74 / 375 * 100%);
		left: 0;
		right: 0;
		width: calc(330 / 375 * 100%);
		margin: 0 auto;
	}

	.footer-contact img {
		width: 100%;
	}

	.footer-logo {
		width: calc(276 / 335 * 100%);
		margin: 0 auto calc(10 / 335 * 100%);
	}

	.footer-logo img {
		width: 100%;
	}

	.copyright {
		font-size: calc(14 / 375 * 100vw);
	}


}




/* iphone5 iphoneSE用 */
@media screen and (max-width: 370px){

}


/* cta */
section.cta_box {
  margin-bottom: unset !important;
  padding-bottom: unset !important;
  border-bottom: unset !important;
  max-width: unset !important;
  margin: 0 !important;
  background-color: #000;
}
.cta_box .cta_wrap {
	border: 1px solid #fff;
}
@media only screen and (min-width: 768px) {
  .cta_box {
    display: flex;
  }
  .cta_box .cta_wrap {
    padding: min(55px, 2.865vw) 0;

    width: 50%;
  }
  /* .cta_box .cta_recruit {
    padding-left: min(67px, 3.49vw);
  } */
}
/* .cta_box .cta_contact {
  background-color: #ba0802;
}
.cta_box .cta_recruit {
  background-color: #ed1a06;
} */
.cta_box .cta_btn {
  background-color: #ba0802;
  height: 60px;
  width: 332px;
  display: block;
  display: flex;
  align-items: center;
  position: relative;
  color: #fff;
}
.cta_box .cta_btn::before {
  content: "";
  display: inline-block;
  background-image: url(../images/common/ico-arrow-white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 25px;
}
.cta_box .cta_btn span {
  color: #fff;
  font-size: 15px;
  font-weight: 700;

  padding-left: 30px;
}
.cta_box .cta_title {
  font-size: 50px;
  font-weight: bold;
}
.cta_box .cta_title span {
  font-size: 23px;
  margin-left: min(30px, 1.563vw);
}
.cta_box .cta_text {
  margin: 10px 0 30px;
  font-size: 16px;
}
/* .cta_contact .cta_inner {
  max-width: 630px;
  min-width: 350px;
  margin: 0 auto;
  width: 50px;
}
@media (max-width: 1399px) and (min-width: 768px) {
  .cta_contact .cta_inner {
    width: 45.032vw;

  }
} */
.cta_inner {
  max-width: 630px;
  min-width: 350px;
  margin: 0 auto;
  width: 50px;
}
@media (max-width: 1399px) and (min-width: 768px) {
.cta_inner {
    width: 45.032vw;

  }
}
@media only screen and (max-width: 767px) {
  #home #virtual-office {
    padding-bottom: 0;
  }
  .cta_contact .cta_inner {
    max-width: 100%;
          min-width: unset;
  }
  .cta_box .cta_inner {
    width: calc(100% - 40px);
    margin: 0 auto;
  }
  .cta_box .cta_title span {
    font-size: 16px;
    margin-left: 0;
    top: -12px;
    position: relative;
  }
  .cta_box .cta_text {
    font-size: 15px;
    /* margin: 24px 0 30px; */
    margin: 0 0 30px;
  }
  .cta_box .cta_btn {
    height: 52px;
  }
  .cta_box .cta_wrap {
    padding: 60px 0;
  }
  .cta_box .cta_title {
    line-height: 1;
  }
  .cta_box .cta_btn {
    width: min(332px, 88.533vw);
  }
}
.cta_box a {
  transition: all 0.3s;
}
.cta_box a:hover {
  opacity: 0.7;
}



/* =========================
   Recruit QR Modal
========================= */
.qrModal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 10000;
}

.qrModal.is-open {
  display: block;
}

.qrModal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.qrModal__dialog {
  position: relative;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  width: min(920px, calc(100% - 32px));
  background: #111;
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.qrModal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: #0b0b0b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.qrModal__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.qrModal__close {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.qrModal__body {
  padding: 18px 20px 22px;
}

.qrModal__lead {
  margin: 0 0 14px;
  font-size: 14px;
  opacity: 0.85;
}

.qrModal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.qrModal__card {
  background: #1b1b1b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}

.qrModal__cardTitle {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}

.qrModal__qr {
  width: min(260px, 100%);
  height: auto;
  border-radius: 12px;
  background: #fff; /* QRが白背景の時に馴染む */
  padding: 10px;
}

.qrModal__cardNote {
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.8;
}

/* ボタンをa→buttonにしたので念のため */
.cta_box .cta_btn {
  border: 0;
  cursor: pointer;
}

/* スマホは縦積み */
@media (max-width: 767px) {
  .qrModal__grid {
    grid-template-columns: 1fr;
  }
}

/* モーダル表示中スクロール禁止 */
/* html.is-modal-open,
body.is-modal-open {
  overflow: hidden;
} */

/* =========================
   Recruit QR Modal (SP only)
========================= */
@media (max-width: 767px) {
  /* 画面からはみ出さないようにする（中央寄せ固定をやめる） */
  .qrModal__dialog {
    margin: 12px auto;
    top: auto;
    transform: none;
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
  }

  /* 中身だけスクロール */
  .qrModal__body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 14px;
  }

  /* 余白とカードを少し詰める */
  .qrModal__header { padding: 14px 14px; }
  .qrModal__grid { gap: 12px; }
  .qrModal__card { padding: 12px; }

  /* QRを少し小さく */
  .qrModal__qr {
    width: min(220px, 100%);
    padding: 8px;
  }
}


/* =================================================================
   SPメニュー内 CTAエリア調整
   【最終手段】クラス指定なしで強制適用版
================================================================= */

@media screen and (max-width: 767px) {
  
  /* メニュー内のcta_box全体設定 */
  .gnav .cta_box.gnav_cta {
    display: flex !important;       /* 強制横並び */
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
    border: 1px solid #fff;
    box-sizing: border-box;
    background: #000;
    padding: 0 !important;
  }

  /* 左右カラム (Contact / Recruit) */
  .gnav .cta_box.gnav_cta .cta_wrap {
    width: 50% !important;
    min-width: 0 !important;        /* はみ出し防止の要 */
    padding: 15px 0 !important;
    border: none !important;
    border-right: 1px solid #fff !important; /* 真ん中の線 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  /* 右側のRecruitだけ右線を消す */
  .gnav .cta_box.gnav_cta .cta_recruit {
    border-right: none !important;
  }

  /* インナー */
  .gnav .cta_box.gnav_cta .cta_inner {
    width: 100% !important;
    padding: 0 4px !important;
    margin: 0 !important;
  }

  /* タイトル */
  .gnav .cta_box.gnav_cta .cta_title {
    font-size: 20px !important;
    text-align: center;
    line-height: 1.1;
    margin-bottom: 10px;
    width: 100%;
  }

  .gnav .cta_box.gnav_cta .cta_title span {
    font-size: 10px !important;
    display: block;
    margin-left: 0;
    margin-top: 5px;
    top: auto;
  }

  /* 説明文非表示 */
  .gnav .cta_box.gnav_cta .cta_text {
    display: none !important;
  }

  /* ボタン調整 */
  .gnav .cta_box.gnav_cta .cta_btn {
    width: 90% !important;          /* 枠に対して90% */
    max-width: 100% !important;     /* 元の固定幅を解除 */
    height: 40px !important;
    margin: 0 auto !important;
    font-size: 11px !important;
    padding: 0 5px 0 10px !important;
    justify-content: flex-start;
  }
  
  .gnav .cta_box.gnav_cta .cta_btn span {
    padding-left: 0 !important;
    font-size: 11px !important;
  }

  .gnav .cta_box.gnav_cta .cta_btn::before {
    width: 12px !important;
    height: 12px !important;
    right: 5px !important;
  }
}