/* toppage */

/* COMMON */
.site-body {
    padding-top: 0 !important;
}
h2.slogan {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    font-size: 40px !important;
    line-height: 1.6em;
}
h2.slogan span {
    display: block;
    letter-spacing: .1em;
}
.mv-slider {
	padding-bottom: 0 !important;
}
@media (min-width: 1920px) {
	.mv-slider {
		width: 100vw !important;
		margin: 0 calc(50% - 50vw) !important;
	}
	.mv-slider .wp-block-group__inner-container {
		width: 100% !important;
		max-width: unset !important;
	}
	.mv-slider .alignfull {
		max-width: 1920px;
		margin: auto;
	}
}
.mv-slider .vk_slider {
	aspect-ratio: 3/2;
	height: calc(100lvh - 120px) !important;
	max-height: 700px;
	width: auto;
	margin-right: 2%;
}
.mv-slider .vk_slider_item {
	background-position: left !important;
}
.mv-slider .mv-slide-title-block {
	display: none;
}
.mv-slider .movie-style {
	position: relative;
}
.mv-slider .movie-style::before {
	/*content: "";*/
	top: 0;
	width: 100%;
	height: calc(100% - 40px);
	position: absolute;
	background-image: url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/06/heroarea-test.jpg');
	background-position: bottom right;
	background-repeat: no-repeat;
	z-index: 2;
	mix-blend-mode: luminosity;
	opacity: .15;
}
.swiper-pagination {
	bottom: 4% !important;
}
.swiper-pagination-bullet {
	width: 8px !important;
	height: 8px !important;
	border-radius: 100% !important;
	margin: 0 10px !important;
	outline: none !important;
	background: #ccc !important;
}
.swiper-pagination-bullet-active {
	background: #1b71b7 !important;
	outline: 2px solid #1b71b7 !important;
}
.heroarea {
	font-size: 1.3em;
	font-weight: 800;
	letter-spacing: .05em;
}
.heroarea p {
	line-height: 1.8em;
}
@media (min-width: 1280px) {
	.heroarea .readmore-content::after{
		content: "";
		aspect-ratio: 1/1;
		width: 250px;
		display: block;
		background-color: #fff;
		mask-image: url("https://corpdraft.kk-isj.com/wp-content/themes/isj_corp/img/heroarea-logo2.svg");
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: contain;
		-webkit-mask-image: url("https://corpdraft.kk-isj.com/wp-content/themes/isj_corp/img/heroarea-logo2.svg");
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		-webkit-mask-position: center;
		margin-bottom: 1em;
		position: absolute;
		right: 50px;
		top: 50px;
	}
}
section {
	position: relative;
}
/* section::before{
	font-size: 4em;
	font-weight: 900;
	letter-spacing: .1em;
	transform: rotate(90deg);
	transform-origin: left;
	position: absolute;
	left: 1.5em;
	top: 0em;
	color: #006FB9;
	text-align: left;
	display: block;
}
section#about::before {
	content: "ABOUT";
}
section#business::before {
	content: "BUSINESS";
	color: #fff;
	top: var(--vk-margin-xl);
	z-index: 1;
}
section#recruit::before {
	content: "RECRUIT";
} */
section::after{
	content: "";
	height: 6px;
	width: 15%;
	position: absolute;
	left: 0;
	top: -2em;
	background: linear-gradient(90deg, #006FB9 60%, transparent);
}
section#business::after {
	top: calc(var(--vk-margin-xl) - 2em);
	background: linear-gradient(90deg, #fff 60%, transparent);
}
section > div:first-child::before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	left: 0;
	top: -2em;
	border-style: solid;
	border-width: 5em 5em 0 0;
	border-color: #006FB9 transparent transparent transparent;
}
section#business > div:first-child::before {
	top: 4em;
	border-color: #fff transparent transparent transparent;
}
section .more-button{
	position: absolute;
	right: 2em;
	top: 0;
}
.w1400 {
	max-width: 1400px;
	width: 100%;
	margin: auto;
	position: relative;
}
section {
	position: relative;
}
.section-sub-title {
	z-index: 1;
}
.section-sub-title strong {
	display: block;
	transform: rotate(90deg) !important;
	transform-origin: left !important;
	font-weight: 900;
}
.fadeDownAnime{
	font-size: 4em;
	font-weight: 900;
	letter-spacing: .1em;
	position: absolute;
	left: 1.5em;
	top: 0em;
	color: #006FB9;
	text-align: left;
	display: block;
}

/* ABOUT */
section#about {
	position: relative;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
}
section#about > div {
	display: flex;
	flex-wrap: wrap;
	position: relative;
}
section#about .wp-block-group__inner-container {
	max-width: unset;
}
section#about h2,
section#about p{
	width: 100%;
}
section#about .vk-cols--fitbnrs{
	width: calc(100% - 150px);
	max-width: 1000px;
	margin: auto;
}

/* BUSINESS */
section#business .more-button {
	top: var(--vk-margin-xl);
}
section#business .technicalsupport .more-button,
section#business .engineering .more-button{
	right: 4em;
}
section#business {
	background: linear-gradient(180deg, #006fb9, #ffffff, #006FB9);
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: var(--vk-margin-xl) 2%;
}
section#business::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(180deg, rgb(255 255 255 / 70%) ,#ffffff, rgb(255 255 255 / 80%)),url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/06/heroarea-test.jpg');
	background-size: contain;
	mix-blend-mode: multiply;
	background-position: top -20% center;
	z-index: 0;
}
@media (max-width: 1400px) {
	section#business::before {
		background-position: top;
	}
}
@media (max-width: 992px) {
	section#business::before {
		background-position: top;
		background: linear-gradient(180deg, rgb(255 255 255 / 100%) 0%,rgb(255 255 255 / 90%) 15%, rgb(255 255 255 / 70%)),url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/06/heroarea-test.jpg');
	}
}
@media (max-width: 781px) {
	section#business::before {
		background-position: bottom;
	}
}
section#business > div {
	max-width: unset;
}
section#business h2,
section#business h3,
section#business h2 + p{
	color: #fff !important;
}
section#business p.section-sub-title{
	top: 6rem;
}
section#business h3 {
	text-align: center;
	padding: 3em 0;
	font-size: 2em !important;
	width: 100%;
	margin: 0;
}
section#business h4 {
	text-align: center;
	color: #002843 !important;
	font-size: 1.5em;
}
section#business p.section-description {
	color: #fff;
	position: relative;
}
section#business .technicalsupport h3::after,
section#business .engineering h3::after{
	display: block;
	font-size: .4em;
	letter-spacing: .3em;
}
section#business .technicalsupport h3::after {
	content: "Technical Support";
}
section#business .engineering h3::after {
	content: "Engineering";
}
section#business .technicalsupport,
section#business .engineering{
	max-width: 1400px;
	margin: auto;
	position: relative;
	box-sizing: border-box;
}
section#business .technicalsupport::before,
section#business .engineering::before{
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: calc(100% - 5em);
	border-radius: 30px;
	background-position: center;
	background-size: cover;
}
section#business .technicalsupport::before {
	background-image: url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/06/technicalsupport-mv-test-scaled.jpg');
}
section#business .engineering::before {
	background-image: url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/06/engineering-mv-test-scaled.jpg');
}
section#business .technicalsupport::after,
section#business .engineering::after{
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, transparent, #ffffff, transparent);
	top: 0;
}
section#business .technicalsupport > div {
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}
section#business .boxes {
	width: 100%;
	margin: auto;
}
section#business .boxes > div {
	display: flex;
	justify-content:center;
	gap: 5em;
	max-width: 1100px;
}
section#business .box01,
section#business .box02{
	width: 50%;
	background: #fff;
	padding: 2em 1.5em;
	position: relative;
	color: #002843;
	font-weight: 600;
	box-shadow: 0 8px 8px rgba(0,0,0,0.1);
}
section#business .box01::before,
section#business .box02::before{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	left: .5em;
	top: .5em;
	border-style: solid;
	border-width: 3em 3em 0 0;
	border-color: #002843 transparent transparent transparent;
}
section#business .technicalsupport ul::after {
	content: "";
	position: absolute;
	width: 40%;
	height: 50%;
	bottom: 2em;
	right: 1.5em;
	background-size: cover !important;
	background-position: right 30% center !important;
	background: #ccc;
}
section#business .technicalsupport .box01 ul::after {
	background-image: url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/06/technicalsupport-title01.jpg');
}
section#business .technicalsupport .box02 ul::after {
	background-image: url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/06/technicalsupport-title02.jpg');
}
section#business .box01::after,
section#business .box02::after{
	content: "";
	position: absolute;
	width: calc(100% - 3em);
	height: 200px;
	bottom: 0;
	left: 0;
	background-size: cover;
	background-position: center;
	margin: 2em 1.5em;
}
section#business .technicalsupport .box01::after {
	background-image: url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/06/technicalsupport-title01.jpg');
}
section#business .technicalsupport .box02::after {
	background-image: url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/11/engineering-title03.jpg');
}
section#business .engineering .box01::after {
	background-image: url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/06/engineering-title01.jpg');
}
section#business .engineering .box02::after {
	background-image: url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/06/engineering-title02.jpg');
}
section#business .engineering .box02.addition::after {
	background-image: url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/06/technicalsupport-title02.jpg');
}
section#business .box01,
section#business .box02{
	padding-bottom: calc(200px + 3.5em) !important;
}
section#business .box01 p,
section#business .box02 p{
	margin: 0;
}
section#business ul ul{
	list-style: none;
	padding: 0;
	font-size: .9em;
	font-weight: 500;
}

/* RECRUIT */
section#recruit {
	width: 100vw;
	margin: 0 calc(50% - 50vw) 110px;
}
section#recruit .wp-block-group__inner-container {
	max-width: 1000px;
}
section#recruit .wp-block-group__inner-container > div > div >div {
	gap: 0;
	
}

/* RESPONSIVE */
@media (max-width: 1400px) {
	section#business .more-button{
		bottom: -35px !important;
	}
	section#business .technicalsupport::before,
	section#business .engineering::before{
		height: 100%;
	}
}
@media (max-width: 1280px) {
	.heroarea .readmore-content::after{
		display: none;
	}
	.heroarea .readmore-content div p:last-of-type {
	}
	.heroarea .readmore-content div p:last-of-type::after{
		content: "";
		aspect-ratio: 1/1;
		width: 250px;
		display: block;
		background-color: #fff;
		mask-image: url("https://corpdraft.kk-isj.com/wp-content/themes/isj_corp/img/heroarea-logo2.svg");
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: contain;
		-webkit-mask-image: url("https://corpdraft.kk-isj.com/wp-content/themes/isj_corp/img/heroarea-logo2.svg");
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		-webkit-mask-position: center;
		margin: 3em auto 0;
	}
}
@media (min-width: 1800px) {
	.mv-slider .vk_slider {
		max-width: 1800px;
		margin: auto !important;
	}
}
@media (min-width: 992px) {
	.slogan-style-mobile {
		display: none;
	}
	.movie-style {
		height: calc(100lvh - 64px);
	}
	.mv-slider .vk_slider {
		height: auto !important;
		margin: 0 calc(50% - 50vw);
		aspect-ratio: 1500/625 !important;
		top: 50%;
		transform: translateY(-50%);
	}
}
@media (max-width: 992px) {
	body {
		overflow: hidden;
	}
	.site-body {
	  margin-top: 0 !important;
	}
	h2.slogan {
		margin: 0 !important;
		color: #fff !important;
		mix-blend-mode: normal;
		text-shadow: 2px 2px 3px rgb(51 51 51 / 90%);
		justify-content:space-between;
		width: 100%;
		max-width: 260px;
	}
	h2.slogan:before,
	h2.slogan:after{
		content: "";
		width: .9px;
		height: 100%;
		background: #fff;
		display: block;
		position: absolute;
		bottom: 0;
		margin: auto;
		right: calc(100%/3 - .2em);
	}
	h2.slogan:after {
		right: unset;
		left: calc(100%/3 - .2em);
	}
	.mv-slider {
		padding-bottom: 0 !important;
		overflow: hidden;
		position: relative;
		z-index: 1 !important;
		height: 100lvh;
	}
	.mv-slider .vk_slider {
		padding-bottom: 0;
		aspect-ratio: unset;
		height: 100lvh !important;
		max-height: unset;
		width: 100%;
	}
	.mv-slider .wp-block-group__inner-container > div {
		padding: 0 !important;
		position: relative;
	}
	.mv-slider .wp-block-group__inner-container > div > .wp-block-column:first-of-type {
		z-index: 1;
		position: absolute;
		bottom: 3em !important;
		display: flex;
		justify-content: center;
		height: auto;
		padding: 0 !important;
		left:0;
		right:0;
		margin: auto;
		width: 50% !important;
	}
	.mv-slider .wp-block-group__inner-container > div > .wp-block-column:first-of-type::before {
		content: "";
		background: #fff;
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		opacity: .1;
		display: none;
	}
	.mv-slider .wp-block-group__inner-container > div > .wp-block-column:nth-of-type(2) {
		z-index: 0;
	}
	.mv-slider .vk_slider_item_container {
	    height: 100svh !important;
		max-height: 700px !important;
		top: -50px;
		position: relative;
	}
	.mv-slider .swiper-pagination {
		position: absolute;
		bottom: 60px;
		display: none;
	}
	.heroarea {
		padding: 0 10% !important;
		overflow: hidden;
		z-index: 0;
	}
	.heroarea::after {
		background: #002843;
	}
	.heroarea .wp-block-cover__image-background::before {
		content: "";
		width: 100%;
		height: 100lvh;
		position: fixed;
		top: 0;
		background-image: url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/06/heroarea-test.jpg');
		background-size: cover;
		background-position: center;
		z-index: -1;
	}
	.heroarea .wp-block-cover__image-background{
		background: none !important;
	}
	.heroarea .is-layout-flex {
		gap: var(--vk-margin-lg);
	}
	.section-sub-title {
		left: 1em;
		right: 0;
		top: -1em;
	}
	section#recruit .section-sub-title {
		top: 2em;
		z-index:2;
	}
	p.section-description {
		padding: 20px !important;
	}
	p.section-description span{
		display: block;
	}
	p.section-description br{
		display: none;
	}
	section#about,
	section#business,
	section#recruit{
		margin-top: 0 !important;
		padding-top: 100px;
		padding-bottom: 60px;
	}
	section#about,
	section#recruit {
		background: #fff;
	}
	section::after{
		height: 3px;
		width: 50%;
		left: 0;
		top: 2em;
	}
	section > div:first-child::before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		left: 0;
		top: -70px;
		border-style: solid;
		border-width: 50px 80px 0 0;
		border-color: #006FB9 transparent transparent transparent;
	}
	section#business > div:first-child::before,
	section#recruit > div:first-child::before {
		top: 30px;
	}
	section#about {
		background: #fff;
	}
	section#about .link-button-bg .wp-block-cover{
		aspect-ratio: 5/3;
	}
	section#about .vk-cols--fitbnrs{
		width: 96%;
	}
	section#about .vk-cols--fitbnrs > div{
		margin: 0 !important;
		padding: 0 !important;
	}
	section#about .more-button {
		margin-top: 3em;
	}
	section#business {
		padding: 100px 2% var(--vk-margin-xl);
	}
	section#business::after {
		top: 2em;
	}
	section#business h3,
	section#business h4{
		padding-left: 1em;
	}
	section#business h4 {
		text-align: left;
	}
	section#business h3 {
		padding: 2em 0 2em .5em;
		text-align: left;
	}
	section#business > div {
		padding-top: 0px;
	}
	section#business .section-sub-title {
		top: calc(80px - 1em / 2 ) !important;
	}
	section#business p.section-description br + span{
		margin-top: 1em;
	}
	section#business .more-button{
		top: 1em;
	}
	section#business .technicalsupport .more-button,
	section#business .engineering .more-button{
		top: 0;
		padding-bottom: 1.5em;
	}
	section#business .boxes > div {
		display: block;
	}
	section#business .box01,
	section#business .box02{
		width: 110%;
		margin: 0 0 3em auto;
		padding-bottom: calc(130px + 1em);
	}
	section#business .box01::before,
	section#business .box02::before{
		border-width: 2em 2em 0 0;
	}
	section#business .technicalsupport,
	section#business .engineering{
		left: -4%;
		width: 100%;
		margin: 0;
	}
	section#business .technicalsupport ul::after {
		width: 100%;
		height: 130px;
		bottom: 0;
		right: 0;
	}
	section#business .technicalsupport,
	section#business .engineering{
		border-radius: 0 30px 30px 0px;
		background: linear-gradient(to bottom, transparent 0%, #000 20%, #002A46 100%);
		z-index: 1;
	}
	section#business .technicalsupport::before,
	section#business .engineering::before{
		background-image: url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/06/technicalsupport-mv-test-scaled.jpg');
		background-size: cover;
		background-repeat: no-repeat; 
		background-position: top;
		height: 400px;
		border-radius: 0 30px 30px 0px;
		z-index: 0;
	}
	section#business .engineering::before {
		background-image: url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/06/engineering-mv-test-scaled.jpg');
	}
	section#business .box01::after,
	section#business .box02::after{
		margin: 0;
		width: 100%;
		height: 130px;
	}
	section#business .box01,
	section#business .box02{
		padding-bottom: calc(130px + 2em) !important;
	}
	section#recruit .wp-block-columns h2 {
		line-height: 1.5em;
	}
	section#recruit h2 span{
		display: block;
	}
	section#recruit figure{
		width: 90%;
		margin-bottom: 3em !important;
	}
	section#recruit {
		margin-bottom: 0;
	}
    .main-section {
        margin-bottom: 0 !important;
    }
	 .site-body {
	  padding-bottom: 0 !important;
	 }
	.more-button {
		position: relative !important;
		width: 100%;
		bottom: unset !important;
		right: unset !important;
		display: flex;
		justify-content: center;
	}
}
@media (max-width: 781px) {
	.mv-slider .vk_slider_item {
		background-position: center !important;
	}
	h2.slogan {
		font-size: 2em !important;
		max-width: 200px;
	}
	p.section-description span{
		display: block;
	}
	p.section-description br{
		display: none;
	}
	.section-sub-title {
		font-size: 2.5em;
		left: .6em;
		right: 0;
		top: -1em;
	}
	.section-sub-title strong{
		font-size: 1.5em;
		white-space: nowrap;
	}
	section#recruit figure img{
		border-radius: 10px;
	}
	section#recruit .wp-block-column p br{
		display: none;
	}
	section#recruit .wp-block-column p span{
		display: block;
	}

}
@media (max-width: 600px) {
	section#business h3 {
		padding: 1.5em 0 .5em 5%;
		max-width: 9em;
	}
	section#business .box01,
	section#business .box02{
		width: 105%;
		left: 5%;
	}
	section#business .technicalsupport,
	section#business .engineering{
		border-radius: 0 50px 50px 0px;
	}
	section#business .technicalsupport::after,
	section#business .engineering::after{
		display: none;
	}
	section#business .technicalsupport::before,
	section#business .engineering::before{
		height: 200px;
		border-radius: 0 50px 50px 0px;
		z-index: -1 !important;
	}
	section#business .technicalsupport > div,
	section#business .engineering > div{
		background: linear-gradient(to bottom, transparent, #000 250px, #002A46 100%) !important;
		border-radius: 0 50px 50px 0px;
	}
	section#business .technicalsupport,
	section#business .engineering{
		border-radius: 0 50px 50px 0px;
	}
	.mv-slider {
		min-height: unset;
	}
	.mv-slider::before {
		content: "";
		top: 0;
		width: 100%;
		height: 100lvh;
		position: absolute;
		background: linear-gradient(-60deg, rgb(255 255 255 / 100%) 40%,transparent),url('https://corpdraft.kk-isj.com/wp-content/uploads/2023/06/heroarea-test.jpg');
		background-position: bottom;
		background-size: cover;
		z-index: 1;
		mix-blend-mode: multiply;
		filter: blur(15px);
		animation: blur-anime 2s linear forwards;
	}
	.mv-slider::after {
		content: "";
		top: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		background:linear-gradient(25deg, rgb(0 111 185 / 50%) 40%,transparent 40%);
		animation: from-left-anime .2s linear forwards;
		animation-delay: 2s;
		right: 100%;
		opacity:0;
	}
	.mv-slider .wp-block-group__inner-container > div > .wp-block-column:nth-of-type(2) {
		filter: blur(15px);
		animation: blur-anime 2s linear forwards;
	}
	.mv-slider .vk_slider_item_container {
	    height: 100lvh !important;
	}
	.mv-slider .wp-block-group__inner-container > div > .wp-block-column:first-of-type {
		bottom: calc(100lvh - 100svh + 1em) !important;
	}
	.mv-slider .slogan-style-mobile {
		animation: smaller-anime .5s linear forwards;
		animation-delay: 2s;
	}
	.mv-slider .movie-style::before {
		display: none;
	}
	@keyframes blur-anime {
		100% {
			filter: blur(0);
		}
	}
	@keyframes from-left-anime {
		100% {
			opacity:1;
			right: 0;
		}
	}
	@keyframes smaller-anime {
		100% {
			transform: scale(80%) translateY(2em);
		}
	}
	.heroarea {
		padding: 0 1.5em !important;
		align-items: flex-start;
	}
	.heroarea .readmore-content p {
		margin-bottom: 2em;
	}
	.heroarea .readmore-content p br:not(.sp) {
		display: none;
	}
	.heroarea .readmore-text {
		padding: 0 !important;
	}
	.heroarea .readmore-content div p:last-of-type::after {
		width: 180px;
	}
	.heroarea .readmore-content {
		max-height: 400px !important;
		transition: max-height 5s linear !important;
	}
}