@charset "UTF-8";

/*
Theme Name: uujtk 2023
Text Domain: uujtk-2023
Description: デジタルハーツ2023専用テーマ
Tags: single,
Author: ONZE
Author URI: https://on-ze.com
Theme URI: https://www.digitalhearts.com
Version: 0.9
*/




/******************/
/******************/
/* ONZE RESET CSS */

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

* {
border:0;
margin:0;
outline:0;
padding:0;
font:inherit;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
text-decoration:none;
vertical-align:baseline;
/*	all:unset;
	display:revert;*/
}


article, aside, dialog, figure, footer, header, main, nav, section {display:block;}
img, picture, audio, canvas, video, svg {display:inline-block; max-width:100%;}

h1, h2, h3, h4, h5, h6 {
overflow-wrap:break-word;
}

br,
hr {display:block;}

ol,
ul {list-style:none;}

blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:none;}

input,
select {vertical-align:middle;}


/******************/
/******************/
/* html format ****/

html {
	font-size:62.5%;
	font-size:calc(100vw / 144);
}
html {font-size:clamp(7px, calc(100vw / 1600 * 4 + 7px), 11px);}
html.is-fixrem {font-size:62.5%;}


body {
background-color:#fff;
color:#000000;
font-family:'Zen Kaku Gothic New', 'Noto Sans Japanese', 'Meiryo', 'メイリオ', 'YuGothic', 'Yu Gothic', '游ゴシック', Arial, Verdana, sans-serif;
font-size:18px;
font-size:1.8rem;
line-height:1;
position:relative;
text-align:center;
-webkit-text-size-adjust:100%;
-moz-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-o-text-size-adjust:100%;
text-size-adjust:100%;
font-feature-settings:"palt";
-webkit-font-smoothing:antialiased;
/*-moz-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
-o-font-smoothing:antialiased;*/
font-smoothing:antialiased;
/* text-rendering:optimizeLegibility; まだ使わないほうが無難 */
-webkit-tap-highlight-color:transparent;
width:100%;
height:auto;
}

html:lang(en) body {font-family: 'Montserrat', sans-serif;}

a,
a:link,
a:visited,
a:hover,
a:active {
color:inherit;
	-webkit-tap-highlight-color:transparent rgba(0,0,0,0);
	-moz-tap-highlight-color:transparent rgba(0,0,0,0);
	-ms-tap-highlight-color:transparent rgba(0,0,0,0);
	-o-tap-highlight-color:transparent rgba(0,0,0,0);
	tap-highlight-color:transparent rgba(0,0,0,0);
text-decoration:none;
-webkit-text-decoration-skip:objects;
cursor:pointer;
}


a:hover {}

h1,
h2,
h3,
h4,
h5,
h6 {display:block;}

b {}
i {
	font-style:normal;
	font-family: 'Josefin Sans', sans-serif;
}
u {text-decoration:underline;}
em {font-weight:bold;}
strong {font-size:1.4em;}
mark {background:transparent;}

q {}
q:before,
q:after {content:'"';}
s {text-decoration:underline;}
del {text-decoration:line-through;}

ins {}
iframe {}

ruby {}
rt {font-size:0.5em;}

sup {vertical-align:super; font-size:smaller;}
sub {vertical-align:sub; font-size:smaller;}

details {margin:0 0 40px 0;}

hr {margin:80px 0; border:0; border-top:1px solid rgba(255,255,255,0.5); border-color:rgba(255,255,255,0.5); height:0;}

table {
	border-collapse:collapse; border-spacing:0; empty-cells:show; border:0; width:100%; margin:0 0 3em 0; border-top:1px solid #cccccc; border-color:var(--oz-color-light);
}
table th,
table td {
	padding:2em 1em; vertical-align:top;
	border-bottom:1px solid #cccccc; border-color:var(--oz-color-light);
	position:relative;
}
table th {padding:2em 3em 2em 1em;}
table td {padding:2em 1em 2em 3em;}
table th::after {
content:"";
display:block;
position:absolute;
right:0;
top:50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border-right:1px solid rgba(0,0,0,0.2);
width:1px;
height:calc(100% - 4em);
}
table caption {
	text-align:left; padding:8px;
}

/*
::-moz-selection {background-color:#1c3b24; background-color:var(--oz-color-red); color:#ffffff;}
::selection {background-color:#1c3b24; background-color:var(--oz-color-red); color:#ffffff;}
*/

/******************/
/******************/
/* shortcodes *****/

.pc {display:block;}
.tb {display:none;}
.sp {display:none;}
.pc.tb {display:block;}
.pc.sp {display:block;}
.tb.sp {display:none;}

@media screen and (max-width:1000px) {
	.pc {display:none;}
	.tb {display:block;}
	.sp {display:none;}
	.pc.tb {display:block;}
	.tb.sp {display:block;}
	.pc.sp {display:none;}
}
@media screen and (max-width:700px) {
	.pc {display:none;}
	.tb {display:none;}
	.sp {display:block;}
	.pc.tb {display:none;}
	.tb.sp {display:block;}
	.pc.sp {display:block;}
}

.alignright,
.align-right,
.textright,
.text-right {text-align:right;}
.alignleft, .align-left, .textleft, .text-left {text-align:left;}
.center, .aligncenter, .align-center, .textcenter, .text-center {text-align:center; margin-left:auto; margin-right:auto;}
.clear {clear:both;}
.clearfix:after {content:""; clear:both; display:block; height:0; visibility:hidden;}
.empty {visibility:hidden;}
.hide,
.none {display:none;}
.hidden {overflow:hidden;}
.left, .floatleft, .float-left {float:left;}
.right, .float-right, .float-right {float:right;}
.relative {position:relative;}
.absolute {position:absolute;}
.nowrap {white-space:nowrap;}
.small,
.text-small {font-size:0.8em;}

img.left,
img.alignleft,
img.align-left {margin:0 20px 20px 0; float:left;}
img.right,
img.alignright,
img.align-right {margin:0 0 20px 20px; float:right;}

img.full {max-width:100%; width:100%; height:auto;}

table.table-border,
table.table-border th,
table.table-border td {border:1px solid #cccccc; border-color:var(--oz-color-light);}

table.table-hover tbody tr:hover,
table.table-hover tbody tr:nth-child(odd):hover,
table.table-hover tbody tr:nth-child(even):hover {background-color:#1c3b24; background-color:var(--oz-color-red); color:#ffffff; cursor:text;
}

table.table-stripe tbody tr:nth-child(odd) {background-color:#cccccc; background-color:var(--oz-color-light);}
table thead th {vertical-align:bottom;}

:root {
--oz-color-black:#1C2227;
--oz-color-dark:#1C2227;
--oz-color-red:#FC0242;
--oz-color-border:#E9E9E9;
--oz-color-offwhite:#F5F5F5;

--oz-color-gray:#999999;
--oz-color-light:#cccccc;
--oz-color-brown:#B29E85;
}



.inner {clear:both; display:block; margin:0 auto; position:relative; max-width:1260px; width:100%;
padding:0 30px;
padding-left:calc( 30px + constant(safe-area-inset-left) );
padding-right:calc( 30px + constant(safe-area-inset-right) );
}
.inner[data-width="max"] {max-width:100%;}
.inner[data-width="mid"] {max-width:1200px;}
.inner[data-width="min"] {max-width:900px;}

@media screen and (max-width:700px) {
	.inner {
		padding:0 15px;
		padding-left:calc( 15px + constant(safe-area-inset-left) );
		padding-right:calc( 15px + constant(safe-area-inset-right) );
	}
}

.color-black {color:#1C2227; color:var(--oz-color-black);}
.color-gray {color:#999999; color:var(--oz-color-gray);}
.color-light {color:#cccccc; color:var(--oz-color-light);}
.color-green {color:#1c3b24; color:var(--oz-color-red);}
.color-white {color:#ffffff; color:var(--oz-color-white);}
.color-brown {color:#B29E85;}

.color-success {color:blue;}
.color-error {color:red;}
.color-warning {color:yellow;}

/******************/
/******************/



.site-header {
	position:fixed;
	top:0; left:0; right:0;
	width:100%; background-color:#fff; border-bottom:1px solid #E9E9E9;
	padding:0;
	z-index:999;
	display: flex;
    align-items: center;
}
.site-header .inner {display:flex; justify-content:space-between; align-items:center;height: 90px;}

.header-logo {
	width:360px; height:auto;padding-left: 30px;
	position: absolute;
    top: 2px;
    left: 0;
    background: transparent url(images/header-logo-background.png) 0 0 no-repeat;
    background-size: 360px 130px;
    width: 360px;
    height: 130px;
    padding: 20px 0 0 20px;
}
.header-logo h1 {width:287px; height:60px; overflow:hidden;}
.header-logo h1 a {
	background:url("images/logo-color.svg") 0 0 no-repeat;
	display:block; cursor:pointer;
	padding:80px 0 0 0;
}
.header-logo h1 a:hover {opacity:0.5;}

.header-navi {margin:0 0 0 auto;max-width: 1000px;}
.header-navi ul {display:table; vertical-align:middle; font-weight:bold; text-align:center; width:100%; table-layout: fixed;}
.header-navi ul li {display:table-cell;padding: 0 0.4em;transition: 0.3s;}
.header-navi ul li a {}

.header-navi ul li:hover {transform: translateY(-5px);}
.header-navi ul li a:hover::after {}




.navi-toggle {
	width:90px; height:90px;
	cursor:pointer;
	background-color: var(--oz-color-red);
	background-image: url(images/navi-toggle.png);
	background-repeat: no-repeat;
	background-size: 60%;
	background-position: center;
	margin: 0 0 0 2rem;
}
.navi-toggle:hover {}
.navi-toggle span {display:none;}


.top-recruit-bunner{
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	width: 26rem;
	z-index: 99;
	transition: opacity 0.3s;
}
.top-recruit-bunner:hover{
	scale: 1.05;
}





body.is-navi{
overflow: hidden;
}
.navi-toggle.on {
	background-image:url("images/webp/navi-close.webp");
}
.navi-toggle+.sp-navi {
	position: fixed;
	top: 90px;
	right: -100vw;
	/* right: 0; */
	transition: 0.3s;
	background-color: #F5F5F5;
	height: 100vh;
	width: fit-content;
	padding: 5rem 10rem 15rem 5rem;
	overflow-y: scroll;
	z-index: 999;
}
.navi-toggle+.sp-navi .main-list li{
	border-bottom: 1px solid #FC0242;
}
.navi-toggle+.sp-navi .main-list li a,
.navi-toggle+.sp-navi .main-list li>span{
	padding-bottom: 1.5em;
	font-size: 2rem;
	font-weight: bold;
	padding-top: 1.5em;
	text-align: left;
	display: block;
	transition: 0.3s;
}
.navi-toggle+.sp-navi .main-list li a:hover,
.navi-toggle+.sp-navi .main-list li>span:hover{
	color: var(--oz-color-red);
}
.navi-toggle+.sp-navi .title {
	width: 20rem;
	margin: 6rem auto 0.5rem auto;
}
.navi-toggle+.sp-navi .text {
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
}
.navi-toggle+.sp-navi .recruit-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 35rem;
	row-gap: 1rem;
	margin: auto;
	margin-top: 2rem;
}
.navi-toggle+.sp-navi .recruit-list li{
	max-width: 48%;
	cursor: pointer;
	transition: 0.3s;
}
.navi-toggle+.sp-navi .recruit-list li:hover{
	transform: translateY(-5px);
}
.navi-toggle+.sp-navi .sns a {
	display: block;
	margin-top: 3rem;
	margin-bottom: 1rem;
}
.navi-toggle+.sp-navi .sns a img{
	width: 8rem;
	height: auto;
}
.navi-toggle+.sp-navi .list_pv {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 20rem;
	row-gap: 1rem;
	margin: auto;
	margin-top: 2rem;
}
.navi-toggle+.sp-navi .list_pv li{
	max-width: 48%;
	cursor: pointer;
	transition: 0.3s;
}
.navi-toggle+.sp-navi .list_pv li:hover{
	transform: translateY(-5px);
}
.navi-toggle+.sp-navi .sns a {
	display: block;
	margin-top: 3rem;
	margin-bottom: 1rem;
}
.navi-toggle+.sp-navi .sns a img{
	width: 8rem;
	height: auto;
}



.navi-toggle+.sp-navi .navi-accordion span{
	position: relative;
	transition: 0.3s;
	cursor: pointer;
}
.navi-toggle+.sp-navi .navi-accordion span.js-navi-accordion-active{
	color: var(--oz-color-red);
}
.navi-toggle+.sp-navi .navi-accordion span::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.5em;
	transform: translateY(-50%);
	width: 0.7em;
	height: 2px;
	background-color: var(--oz-color-red);
}
.navi-toggle+.sp-navi .navi-accordion span::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.5em;
	transform: translateY(-50%) rotate(90deg);
	width: 0.7em;
	height: 2px;
	background-color: var(--oz-color-red);
	transition: 0.3s;
}
.navi-toggle+.sp-navi .navi-accordion span.js-navi-accordion-active::before {
	transform: rotate(0deg);
}

.navi-toggle+.sp-navi .navi-accordion .sub-list{
	margin-bottom: 3rem;
	padding-left: 2rem;
}
.navi-toggle+.sp-navi .navi-accordion .sub-list li{
	border: none;
}
.navi-toggle+.sp-navi .navi-accordion .sub-list li a{
	padding: 1em 0 1em 1.2em;
	position: relative;
}
.navi-toggle+.sp-navi .navi-accordion .sub-list li a::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%) rotate(45deg);
	width: 0.5em;
	height: 0.5em;
	border-top: 2px solid var(--oz-color-red);
	border-right: 2px solid var(--oz-color-red);
	transition: 0.3s;
}
.navi-toggle.on+.sp-navi {
	right: 0;
}












@media screen and (max-width:1670px) {
	.header-navi {width:calc(100% - 650px);}
}
@media screen and (max-width:1600px) {
	.header-navi ul {font-size:16px; font-size:1.6rem;}
}
@media screen and (max-width:1100px) {
	.site-header {height:52px;}
	.header-logo {background-size:180px 75px; width:180px; height:75px; padding:5px 0 0 20px;}
	.header-logo h1 {width:191px; height:40px; overflow:hidden;}
	.header-logo h1 a {background-size:140px 50px;}
	.header-navi {
		width: calc(100% - 440px);}
	.header-navi ul {font-size:14px; font-size:1.4rem;}
	.navi-toggle {width: 52px;height: 52px;}
	.navi-toggle+.sp-navi{
		top: 52px;
	}
}

/* @media screen and (max-width:800px) {
	.navi-toggle {display:block;}
	.header-navi {display:none;}
	.sp-navi {
		display:block;
		background-color:#F5F5F5; width:100%; height:100%; z-index:997; position:fixed; opacity:0; top:52px;pointer-events:none;
		padding:0 50px 100px;
		overflow-y:scroll;
		-webkit-overflow-scrolling:touch;
		overflow-scrolling:touch;
	}
	.sp-navi-header {margin:0 -50px 25px -50px;}
	.sp-navi p {margin:0 auto 1em; font-weight:bold;}
	.sp-navi p.small {font-size:11px; font-size:1.1rem; margin:0 auto 3em;}
	.sp-navi p.sp-navi-top {font-size:20px; font-size:2.0rem;}
	.sp-navi p.sp-navi-top a {
		border:1px solid #FC0242;
		background-color:#FFE8EE;
		display:block;
		padding:0.5em 0;
		border-radius:5px;
	}
	.sp-navi p.sp-navi-about {margin:0 auto 50px;}
	.sp-navi p.sp-navi-about a {display:block; background-color:#fff;
		border:1px solid #E9E9E9;
		padding:2em 1em;
		border-radius:10px;
	}
	.sp-navi p.sp-navi-about img {max-width:170px;}
	.sp-navi > ul {display:block; text-align:left;}
	.sp-navi > ul > li {
		display:block; margin:0 0 50px 0; padding:50px 25px 25px; background-color:#fff;
		border:1px solid #D26EC5; border-radius:10px;
		display:flex; justify-content:space-between;
		position:relative;
	}
	.sp-navi > ul > li:nth-child(2) {border-color:#0266FC;}
	.sp-navi > ul > li:nth-child(3) {border-color:#02CFCA;}
	.sp-navi ul li .label {position:absolute; top:-15%; left:-5%; width:45%;}
	.sp-navi ul li .label img {width:100%; height:auto;}
	.sp-navi ul li .thumbnail {flex-basis:28%; margin-top:0;}
	.sp-navi ul li .thumbnail img {width:100%;}
	.sp-navi ul li .link {flex-basis:65%;}
	.sp-navi ul li .link ul li {margin:0 0 2% 0;}
	.sp-navi a:hover {opacity:0.5;}
	.header-navi ul li a {display:block; background-color:#000; color:#fff; padding:1em 2em 1em 3em;}
	.header-navi ul li a br.tb {display:none;}
	.sp-navi.is-active {opacity:1; pointer-events:auto;}
	.sp-navi.is-active ul {}
	body.is-navi {overflow:hidden;}
	body .site-main {}
	body.is-navi .site-main {}
}

@media screen and (max-width:600px) {
	.sp-navi {padding:0 25px 50px;}
	.sp-navi > ul > li {padding:25px 20px 20px; margin:0 0 35px 0;}
} */
@media screen and (max-width:800px) {
	.header-navi{
		display: none;
	}
	.header-logo{
		background: none;
	}
	.navi-toggle{
		margin: 0 0 0 1rem;
		height: 60px;
		width: 60px;
	}
	.site-header{
		height: 60px;
		justify-content: flex-end;
	}
	.navi-toggle+.sp-navi{
		top: 60px;
	}
	.header-logo h1 a {background-size:160px 40px;}
}
@media screen and (max-width:600px) {
	.navi-toggle+.sp-navi{
		width: 100vw;
		padding: 5rem 10% 28rem 10%;
	}
	.navi-toggle+.sp-navi .recruit-list{
		max-width: 100%;
	}

.top-recruit-bunner{
    bottom: 8.5rem;
    right: 0.5rem;
    width: 20rem;
}

}

@media screen and (max-width:424px) {
	.header-logo h1 a {background-size:145px 40px;}
}
@media screen and (max-width:374px) {
	.header-logo h1 a {background-size:115px 40px;}
}
		


.language-select-box {
	position: relative;
	width: 162px;
	height: 38px;
	margin-left: 2rem;
	z-index: 9999;
}
.language-select-box dl {
	position: absolute;
	top: 0;
	left: 0;
	border: 1px solid var(--oz-color-red);
	border-radius: 19px;
	width: 100%;
	height: fit-content;
	background-color: #ffffff;
	overflow: hidden;
}
.language-select-box dt {
	background-image: url("images/navi-language-select-down.svg");
	background-repeat: no-repeat;
	background-size: 90%;
	background-position: center;
	width: 100%;
	height: 38px;
	cursor: pointer;
}
.language-select-box dt.is-active {
	background-image: url("images/navi-language-select-up.svg");
}
.language-select-box dt span{
	display: none;
}
.language-select-box dd li a {
	padding: 13px 0;
    font-weight: bold;
    border-top: 1px solid var(--oz-color-red);
    display: block;
    font-size: 1.4rem;
	font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR";
}
.language-select-box dd li a:hover {
	background-color: var(--oz-color-red);
	color: var(--oz-color-offwhite);

}

@media screen and (max-width: 1100px) {
	.language-select-box{
		width: 35%;
		max-width: 170px;
	}
	.language-select-box dt {
		height: 30px;
	}
	.language-select-box {
		height: 30px;
	}
}





.work-link-list{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: none;
	will-change: transform;
	-webkit-backface-visibility:hidden;
backface-visibility:hidden;
overflow:hidden;
z-index: 9999;
}
.work-link-list ul{
	width: 100%;
	display: flex;
}
.work-link-list ul li{
	flex-basis: 34%;
	border-left: 0.5px solid #ffffff;
	border-right: 0.5px solid #ffffff;
}
.work-link-list ul li a{
	padding: 0.5em 0;
	font-size: 12px;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 100%;
	flex-wrap: wrap;
}
.work-link-list ul li a small{
	font-size: 0.7em;
	display: block;
	width: 100%;
}
.work-link-list ul li:nth-child(1) a{
	background-color: #70FC62;
}
.work-link-list ul li:nth-child(2) a{
	background-color: #FDC93A;
}
.work-link-list ul li:nth-child(3) a{
	background-color: #FF9ECB;
}
.work-link-list ul li:nth-child(4) a{
	background-color: #FF9ECB;
}
.work-link-list p{
	color: #ffffff;
	font-size: 10px;
	text-align: center;
	padding: 0.5em;
	background-color: #1C2227;
	font-weight: bold;
	letter-spacing: 0.2em;
}

@media screen and (max-width:800px) {
	.work-link-list{
		display: block;
	}
}









.site-footer {
	background-color:#F3F3F3;
	padding:60px 0 40px 0; position:relative; z-index:9;
}

.footer-logo .title {margin:0 0 2em 0; color:#FC0242; text-align:left;
	font-size: 24px;
	font-size: 2.4rem;
}
.footer-logo .flex-container {
	display:flex;
	justify-content:space-between;
	text-align:left; line-height:1.75;
}
.footer-logo .thumbnail {flex-basis:45%;}
.footer-logo .thumbnail img {width:100%; height:auto;}
.footer-logo .text {flex-basis:50%;}


.footer-logo dl dt {font-weight:bold; color:#FC0242; color:var(--oz-color-red); font-size:20px; font-size:2.0rem;}
.footer-logo dl dd {margin:0 0 0.5em 0; font-size:16px; font-size:1.6rem;}

.site-copy {
	display:block; text-align:center; font-size:14px; font-size:1.4rem;
	padding:50px 0;
}


@media screen and (max-width:600px) {
	.footer-logo .flex-container {display:block;}
	.footer-logo .thumbnail {flex-basis:100%; margin:0 0 1em 0;}
	.footer-logo .text {flex-basis:100%;}
	.footer-logo dl dd {margin:0 0 1em 0;}
}


.site-main {
line-height:1.75;
overflow:hidden;
padding:80px 0 0 0;
}

.site-main img{
max-width:100%;
height:auto;
}
@media screen and (max-width: 1100px) {
    .site-main {
		padding:52px 0 0 0;
		}
}
@media screen and (max-width: 800px) {
    .site-main {
		padding:60px 0 0 0;
		}
}



/******************/
/******************/


.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {margin:0 auto 1em auto;}

.article-content h1 {font-size:50px; font-size:5.8rem;}
.article-content h2 {font-size:36px; font-size:3.6rem;}
.article-content h3 {font-size:19px; font-size:1.9rem;}
.article-content h4 {font-size:32px; font-size:3.2rem; margin:0 auto 2em auto;}
.article-content h5 {font-size:32px; font-size:3.2rem; font-weight:bold; text-align:center;}
.article-content h6 {font-size:20px; font-size:2.0rem; font-weight:bold; text-align:center;}

@media screen and (max-width:700px) {
	.article-content h4 {font-size:24px; font-size:2.4rem;}
	.article-content h5 {font-size:22px; font-size:2.2rem;}
}

.article-content .text a {text-decoration:underline; color:#dfc905;}
.article-content .text a:hover {color:#987b11;}
.article-content .text a[target="_blank"] {
	padding-right:1.5em;
	background:url("images/icon-link-lightgold.svg") right center no-repeat;
	background-size:16px 16px;
}
.article-content .text a[target="_blank"]:hover {
	background-image:url("images/icon-link-darkgold.svg");
}




.article img {max-width:100%; height:auto;}



/******************/
/******************/

.section {
	position:relative; padding:100px 0 50px;
	background-color:rgba(255,255,255,0.9);
	transition: 0.7s background-color;
	z-index:1;
}

body.is-scrolled .section {background-color:rgba(255,255,255,1);}


.section-title {
	padding:0 0 3em 2em; margin:0 0 3em 0;
	display:flex; justify-content:flex-start;
	align-items:center;
	text-align:left;
	line-height:1.3;
	border-bottom:1px solid #FC0242;
}
.section-title .title {
	padding:0 3em 0 0; margin:0; line-height:1;
}
.section-title .title i {
	font-size:150px; font-size:15.0rem;
	font-weight:bold;
}
.section-title .text {margin:0;}
.section-title .text img {margin:0 0 1em 0;}
.section-title .text .label {
	background-color:#FC0242;
	color:#fff;
	display:block;
	width:fit-content;
	font-size:16px; font-size:1.6rem; padding:0.2em 1em 0 1em;
}

@media screen and (max-width:1000px) {
	.section-title {padding:0 0 2em 0;}
	.section-title .title i {font-size:120px; font-size:12.0rem;}
	.area_label {display:block !important; }
	.area_label_txt {margin: 0 !important;}
}
@media screen and (max-width:600px) {
	.section-title {display:block;}
	.section-title .text img {height:32px; width:auto;}
	.section-title .title i {font-size:100px; font-size:10.0rem;}
	.area_label {display:block !important; }
	.area_label_txt {margin: 0 !important;}
}
@media screen and (max-width:500px) {
	.section-title .text img {height:26px; width:auto;}
	.section-title .title i {font-size:80px; font-size:8.0rem;}
	.area_label {display:block !important; }
	.area_label_txt {margin: 0 !important;}
}
@media screen and (max-width:460px) {
	.section-title .title i {font-size:70px; font-size:7.0rem;}
	.area_label {display:block !important; }
	.area_label_txt {margin: 0 !important;}
}


.section-content {text-align:left; padding:0;}
.section-content .title {
	display:block;
}
.section-content .subtitle {font-weight:bold; font-size:38px; font-size:3.8rem;
	margin:0 0 0.5em 0;
}

.title-image {margin:0 auto; text-align:center;}
.title-image span {display:block;}
.title-image span img {max-width:114px;}
.title-image img {
	max-width:100%; margin:0 auto;
}

.title,
.subtitle {font-weight:bold; line-height:1.3;}



/******************/

.site-background {
	position:fixed; width:110%; height:100vh; min-height:640px; top:0; left:-2.5%; padding:0;
	margin:0;
	background:transparent url("images/top-slider-background.svg") center center repeat;
	background-size:40px 40px;
	z-index:0;
}

.site-background-list {position:absolute; top:0; right:0; width:100%; height:100%;}
.site-background-list .layer {display:block; width:100%; height:100%;}
.site-background-list .layer span {
	display:block; width:100%; height:100%;
	background-image:url("images/webp/top-slider-01.webp");
	background-size:cover; background-position:center;
}
.site-background-list .layer:nth-of-type(1) {z-index:3;}
.site-background-list .layer:nth-of-type(2) {z-index:2;}
.site-background-list .layer:nth-of-type(3) {z-index:1;}
.site-background-list .layer:nth-of-type(1) span {
	background-image:url("images/webp/top-slider-03.webp"); background-repeat:no-repeat; animation:wave 12s 4s both infinite linear;
}
.site-background-list .layer:nth-of-type(2) span {
	background-image:url("images/webp/top-slider-02.webp"); background-repeat:no-repeat; animation:wave 12s 2s both infinite linear;
}
.site-background-list .layer:nth-of-type(3) span {
	background-image:url("images/webp/top-slider-01.webp"); background-repeat:no-repeat; /*animation:wave 12s 0s both infinite linear;*/
}

@media screen and (max-width:100vh) {
	.site-background {}
	.site-background-list .layer {
		width:120%;
		margin:20px 0 0 0;
	}
	.site-background-list .layer:nth-of-type(1) span {
		background-image:url("images/webp/top-slider-03-sp.webp");
	}
	.site-background-list .layer:nth-of-type(2) span {
		background-image:url("images/webp/top-slider-02-sp.webp");
	}
	.site-background-list .layer:nth-of-type(3) span {
		background-image:url("images/webp/top-slider-01-sp.webp");
	}
}


@keyframes wave {
	0% {-webkit-transform: rotateZ(0deg) translate3d(0,2%,0) rotateZ(0deg);}
	100% {-webkit-transform: rotateZ(360deg) translate3d(0,2%,0) rotateZ(-360deg);}
}

.section-top-slider {
	position:relative; width:100%; height:calc(100vh - 80px); min-height:640px; padding:0;
	margin:0;
	background:transparent;
}

.top-slider-title {
	position:absolute;
	width:fit-content; max-width:100%;
	background-color:#fff;
	box-shadow:0 3px 9px rgba(0,0,0,0.2);
	top:43%; left:50%;
	padding:0 40px;
	transform:translate(-50%,-50%);
	z-index:9;
}
.top-slider-title .title {margin:0;}
.top-slider-title img {
	display:block; max-width:668px; width:100%;
	transform:translateY(-25px);
}

@media screen and (max-width:900px) {
	.top-slider-title {width:90%; max-width:600px;}
}
@media screen and (max-width:800px) {
	.section-top-slider {min-height:100vw;}
}
@media screen and (max-width:760px) {
	.section-top-slider {min-height:120vw;}
}

.top-slider-widget {
	position:absolute;
	bottom:12px;
	width:100%; padding:0 48px;
	z-index:90;
}
.top-slider-widget .box {
	max-width:1152px; width:100%; height:200px; margin:0 auto; padding:0 40px;
	background:url("images/webp/footer-widget-background.webp") center top repeat-x;
	background-size:1152px 200px;
	position:relative;
}
.top-slider-widget .box::before,
.top-slider-widget .box::after {
	content:"";
	position:absolute; width:24px; height:200px; display:block;
	top:0;
	background:url("images/webp/footer-widget-left.webp") 0 0 no-repeat;
	background-size:24px 200px;
	z-index:3;
}
.top-slider-widget .box::before {background-image:url("images/webp/footer-widget-left.webp"); left:-24px;}
.top-slider-widget .box::after {background-image:url("images/webp/footer-widget-right.webp"); right:-24px;}

.top-slider-widget p {width:300px; margin:0 auto 20px; padding:15px 0 0 0;}
.top-slider-widget ul {
	display:flex;
	justify-content:space-between;
}
.top-slider-widget ul li {
	flex-basis:28%; max-width:280px;
	text-align:left;
}
.top-slider-widget ul li img.subtitle {display:block; margin:0 0 6px 0;}
.top-slider-widget ul li span {
	display:block;
	background:none left center no-repeat;
	background-size:auto 60%;
	padding:0 0 0 1.5em;
	line-height:1;
}
.top-slider-widget ul li span img {height:26px; width:auto;}
.top-slider-widget ul li img.sp {display:none;}
.top-slider-widget ul li a:hover span {background-image:url("images/arrow-right-white.svg");}


.top-slider-twitter {position:fixed; right:12px; bottom:3rem; z-index:99;}
.top-slider-twitter img {width:90px; height:auto;}
.top-slider-twitter a:hover img {opacity:0.5;}


@media screen and (max-width:1940px) {
	.top-slider-widget {}
	.top-slider-widget .box {width:100%; max-width:1000px; height:160px;
		background-size:921px 160px;
	}
	.top-slider-widget .box::before,
	.top-slider-widget .box::after {background-size:19px 160px;}
	.top-slider-widget .box::before {left:-19px;}
	.top-slider-widget p {width:240px;}
	.top-slider-widget ul li {flex-basis:30%;}
}

@media screen and (max-width:1000px) {
	.top-slider-widget {padding:0 24px;}
	.top-slider-widget .box {width:92%;}
	.top-slider-widget ul li span img {height:22px;}
}
@media screen and (max-width:800px) {
	.top-slider-widget .box {width:96%;}
	.top-slider-twitter {display:none;}
}
@media screen and (max-width:700px) {
	.top-slider-title {width:70%; padding:0 20px;}
	.top-slider-widget .box {
		background:url("images/webp/widget-background-sp.webp") center top no-repeat;
	background-size:contain;
	height:auto;
	padding:9% 40px 20px 40px;
	}
	.top-slider-widget .box::before,
	.top-slider-widget .box::after {display:none;}
	.top-slider-widget p {display:none;}
	.top-slider-widget ul {display:block;}
	.top-slider-widget ul li {width:100%; max-width:100%; margin:0 0 2% 0;}
	.top-slider-widget ul li img.subtitle,
	.top-slider-widget ul li span {display:none;}
	.top-slider-widget ul li img.sp {display:block; width:100%; height:auto;}
	
}
@media screen and (max-width:600px) {
	.section-top-slider {min-height:140vw;}
	.top-slider-title {width:90%; max-width:500px;}
	.top-slider-widget {padding:0;}
	.top-slider-widget .box {padding:8% 36px 20px 36px; max-width:500px;}
}





.section-top-about {margin:0 0 0;}
.section-top-about .flex-container {
	align-items:flex-start;
	margin:0 0 100px 0;
}
.section-top-about .item {
	background-color:#F5F5F5;
	padding:30px;
}
.section-top-about .item:nth-child(2) {margin-top:80px;}
.section-top-about .item .title {
	font-size:24px; font-size:2.4rem; font-weight:bold; transform:translateX(-30px); background-color:#fff; width:fit-content;
	padding:0.2em 1em 0.2em 2em;
	margin:0 0 1em 0;
	position:relative;
}
.section-top-about .item img {width:100%; height:auto;}
.section-top-about .item .title::before {
	content:"";
	display:inline-block;
	width:44px; height:86px;
	position:absolute;
	background:url("images/webp/top-about-icon-q.webp") 0 0 no-repeat;
	background-size:44px 86px;
	left:0.2em; bottom:-0.2em;
}
.section-top-about .item .subtitle {font-weight:bold; font-size:32px; font-size:3.2rem;}
.section-top-about .item .text b {font-weight:bold; color:#FC0242;}
.section-top-about .item .note {background-color:#FFE2EF; display:block;
	padding:1em; margin:0.5em 0 0 0;
}
.section-top-about .item .note .note-title {text-align:center; font-weight:bold; display:block;}
.section-top-about .item .note .note-text {font-size:16px; font-size:1.6rem;}

@media screen and (max-width:900px) {
	.section-top-about .flex-container-2 {display:block;}
	.section-top-about .item,
	.section-top-about .item:nth-child(2) {margin-top:0; margin:0 0 50px 0;}
	.section-top-about .thumbnail img {width:100%;}
	.section-top-about .item .title::before {width:1.5em; height:3em; background-size:contain;}
}

@media screen and (max-width:700px) {
	.section-top-about .flex-container {margin:0 0 50px 0;}
	.section-top-about h4 img {width:100px;}
	.section-top-about .title-image {max-width:70%; margin:0 auto 2em;}
	.section-top-about .title-image span img {max-width:80px;}
}

@media screen and (max-width:600px) {
	.section-top-about .item .title {padding:0.2em 0 0.2em 2em; width:100%;}
	.section-top-about .item .subtitle {font-size:24px; font-size:2.4rem; line-height:1.3;}
}



.look-list {
	background-color:#F5F5F5; padding:80px 0; margin:0 0 80px 0;
	position:relative;
}
.look-list::before,
.look-list::after {
	content:"";
	display:block;
	position:absolute;
	width:50%; height:100%;
	top:0; bottom:0;
	background-color:#F5F5F5;
}
.look-list::before {right:100%;}
.look-list::after {left:100%;}
.look-list h5 {font-size:24px; font-size:2.4rem;}
.look-list h5 br {display:none;}
.look-list .flex-item dt img {width:100%;}
.look-list .flex-item dd {position:relative; line-height:1;}
.look-list .flex-item dd img.background {position:relative; width:100%; height:auto;}
.look-list .flex-item .content {position:absolute; top:6%; left:6%; right:6%; height:auto; line-height:1.75;}
.look-list .flex-item .content span {display:block;}
.look-list .flex-item .thumbnail {margin:0 0 6% 0;}
.look-list .flex-item .thumbnail img {width:100%; height:auto;}
.look-list .flex-item .subtitle {padding:0 25px; text-align:center;}
.look-list .flex-item .link img {width:100%;}
.look-list .flex-item .link a:hover {opacity:0.5;}
/*
.look-list .look-list-03 .thumbnail {margin-bottom:2%;}
.look-list .look-list-03 .subtitle {margin:0;}
.look-list .look-list-03 .link {padding:0 22px;}
*/
@media screen and (max-width:900px) {
	.look-list .flex-container-3 {flex-wrap:wrap;}
	.look-list .flex-container-3 .flex-item {flex-basis:48%; margin:0 0 4% 0;}
}
@media screen and (max-width:600px) {
	.look-list {padding:80px 20px 10px;}
	.look-list h5 br {display:block;}
}
@media screen and (max-width:520px) {
	.look-list .flex-container-3 {display:block; padding:0 60px;}
	.look-list .flex-container-3 .flex-item {flex-basis:100%; margin:0 0 6% 0;}
}
@media screen and (max-width:440px) {
	.look-list .flex-container-3 {display:block; padding:0;}
}

.portfolio-box {
	background-color:#F5F5F5;
	padding:50px;
}
.portfolio-box .box {
	background-color:#fff;
	padding:100px 50px 20px;
	position:relative;
	margin:0 0 50px 0;
	overflow:hidden;
}

.portfolio-box .box .title {
	background-color:#02CFCA; color:#fff;
	width:fit-content;
	font-size:32px; padding:0.2em 1em;
	position:absolute; top:0; left:0;
}

.portfolio-list {overflow:hidden;}
.portfolio-list ul {}
.portfolio-list .swiper-container {width:100%;}
.portfolio-list .swiper-slide {width:260px;}
.portfolio-list span {display:block;}
.portfolio-list .name {text-align:center; font-weight:bold; font-size:20px; margin:0 0 0.5em 0; line-height:1.5;}
.portfolio-list .company {font-size:16px; margin:0 0 0.5em 0;}
.portfolio-list .thumbnail img {width:100%; height:auto;}
.portfolio-list .tags {font-size:16px;}
.portfolio-list .tags b {background:#f5f5f5; margin:0 0.5em 0.5em 0; color:#1C2227; padding:0.2em 0.5em; display:inline-block;}

.portfolio-list .swiper-button-prev,
.portfolio-list .swiper-button-next {width:30px; height:30px;
	background:transparent 0 0 no-repeat;
	background-size:30px 30px;
}
.portfolio-list .swiper-button-prev:after,
.portfolio-list .swiper-button-next:after {display:none;}
.portfolio-list .swiper-button-prev {background-image:url("images/arrow-left-red.svg");}
.portfolio-list .swiper-button-next {background-image:url("images/arrow-right-red.svg");}


@media screen and (max-width:500px) {
	.portfolio-list .swiper-slide {width:220px;}
}


@media screen and (max-width:800px) {
	.portfolio-box {padding:20px;}
	.portfolio-box .box {padding:60px 50px 20px;}
	.portfolio-box .box.data-list {padding:60px 20px 20px;}
	
}

@media screen and (max-width:800px) {
	.portfolio-box .box .title {font-size:24px; font-size:2.4rem;}
}
.data-list ul {
	display:flex; justify-content:flex-start; gap:2%;
	flex-wrap:wrap;
	line-height:1;
}
.data-list ul li {
	flex-basis:32%;
	margin:0 0 2% 0;
	background-color:#F5F5F5;
}
.data-list ul li:nth-child(4),
.data-list ul li:nth-child(5) {flex-basis:49%;}
	

@media screen and (max-width:720px) {
	.data-list ul {display:block;}
	.data-list ul li,
	.data-list ul li:nth-child(4),
	.data-list ul li:nth-child(5) {flex-basis:100%;}
}

.section-top-works {
	background-color:#F5F5F5;
	padding:80px 0 1px 0;
}
.section-top-works .section-title {margin-bottom:0;}

.works-content {padding:100px 0 50px;}
.works-content .box {background-color:#fff; padding:25px;}

.staff-list {
	background:transparent url("images/background-striped-purple.svg") center center repeat;
	background-size:10px 18px;
	padding:0 25px 80px 25px; margin:0 0 0;
	position:relative;
}
.staff-list h4.title {color:#fff; text-align:center; margin:0 auto 1em; transform:translateY(-0.5em);
	background-color:#1C2227;
	width:fit-content; padding:0.2em 2em;
}
.staff-list h4.title br.sp {display:none;}
.staff-list ul {text-align:left;}
.staff-list ul li {
	position:relative;
	background-color:#fff;
	padding:20px;
	border-top:8px solid;
	border-bottom:8px solid;
	border-color:#70FC62;
}
.staff-list .thumbnail {}
.staff-list .thumbnail img {width:100%; height:auto;}
.staff-list .name {border-bottom:1px solid #D26EC5; margin:0 0 12px 0; padding:0 0 4px 0;}
.staff-list .name dl {display:flex; justify-content:space-between; align-items:center;}
.staff-list .name dl dt {
	font-weight:bold; font-size:26px; white-space:nowrap; vertical-align:middle;
	display:flex;
	justify-content:flex-start;
	align-items:center;
}
.staff-list .name dl dt b {background-color:#D26EC5; color:#fff; font-size:12px; margin:0 0 0 1em; padding:0 0.5em;}
.staff-list .name dl dd.note {text-align:right; font-size:12px;}
.staff-list span {display:block;}
.staff-list .comment {color:#B55CA9; font-size:20px; font-weight:bold; line-height:1.5;}
.staff-list .text {font-weight:bold; font-size:16px; margin:0 0 1em 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow:hidden;
}
.staff-list .swiper-slide.is-active .text {display: block;}
.staff-list .point {display:none;}
.staff-list .swiper-slide.is-active .point {display:block;}
.staff-list .point dl {
	background-color:#F5F5F5; background-color:var(--oz-color-offwhite);
	margin:0 0 1em 0;
	font-size:16px;
	padding:0.5em 1em;
	font-weight:bold;
}
.staff-list .point dl dt {
	color: #B55CA9; font-weight:bold;
}

.staff-list .button-open {
	display:block;
	width:25px; height:19px;
	margin:0 auto; background:url("images/button-bottom-purple.svg") 0 center no-repeat;
	background-size:25px 19px;
	cursor:pointer;
}
.staff-list .button-open:hover {opacity:0.5;}
.staff-list .swiper-slide.is-active .button-open {
	background-image:url("images/button-top-purple.svg");
}

.staff-list .staff-list-navigation {
	position:relative; display:flex; justify-content:center;
padding:1em 0 0 0;}
.staff-list .swiper-button-prev,
.staff-list .swiper-button-next {position:relative; margin:0 12px; left:inherit; right:inherit;}

@media screen and (max-width:600px) {
	.staff-list .point dl {font-size:14px;}
}

.swiper-button-prev,
.swiper-button-next {width:60px; height:60px;
	background:transparent 0 0 no-repeat;
	background-size:60px 60px;
}
.swiper-button-prev:after,
.swiper-button-next:after {display:none;}
.swiper-button-prev {background-image:url("images/arrow-leftcircle-black.svg");}
.swiper-button-next {background-image:url("images/arrow-rightcircle-black.svg");}


.staff-list-purple .button-open.is-active {background-image:url("images/button-top-purple.svg");}

.staff-list-blue {background-image:url("images/background-striped-blue.svg");}
.staff-list-blue ul li {border-color:#FDAF3A;}
.staff-list-blue .comment {color:#0266FC;}
.staff-list-blue .point dl dt {color:#0266FC;}
.staff-list-blue .name {border-color:#0266FC;}
.staff-list-blue .button-open {background-image:url("images/button-bottom-blue.svg");}
.staff-list-blue .swiper-slide.is-active .button-open {background-image:url("images/button-top-blue.svg");}

.staff-list-green {background-image:url("images/background-striped-green.svg");}
.staff-list-green ul li {border-color:#FD78B4;}
.staff-list-green .comment {color:#02CFCA;}
.staff-list-green .point dl dt {color:#02CFCA;}
.staff-list-green .name {border-color:#02CFCA;}
.staff-list-green .button-open {background-image:url("images/button-bottom-green.svg");}
.staff-list-green .swiper-slide.is-active .button-open {background-image:url("images/button-top-green.svg");}

@media screen and (max-width:1200px) {
	.staff-list .comment {font-size:18px;}
	.staff-list .text {font-size:14px;}
}
@media screen and (max-width:800px) {
	.staff-list .name dl {display:block;}
	.staff-list .name dl dd.note {text-align:left;}
}
@media screen and (max-width:600px) {
	.staff-list h4.title br.sp {display:block;}
	.staff-list .comment {font-size:14px;}
	.staff-list .swiper-button-prev,
	.staff-list .swiper-button-next {width:40px; height:40px; background-size:40px 40px;}
}


.faq-list dl {text-align:left;}
.faq-list dl dt {
	padding:1.5em 2em; color:#fff; margin:0 0 0.5em 0; overflow:hidden;
	cursor:pointer;
	border-radius:10px;
	font-weight:bold; font-size:20px;
	background:url("images/arrow-bottom-white.svg") right 2em center no-repeat;
	background-size:1em 1em;
}
.faq-list dl dt:nth-of-type(odd) {background-color:#FC0242;}
.faq-list dl dt:nth-of-type(even) {background-color:#BE6B80;}
.faq-list dl dt:hover {opacity:0.5;}
.faq-list dl dd {display:none; padding:0 1em 1em;}

.faq-list dl dd a {padding:0 1.2em 0 0; display:inline-block;
	background:url("images/icon-external-black.svg") right center no-repeat;
	background-size:1em 1em;
	text-decoration: underline;
}
.faq-list dl dd a.career-link {background:none;padding:0;}
.faq-list dl dd a:hover {
	color:#FC0242;
	background-image:url("images/icon-external-red.svg");
}
.faq-list dl dd a.career-link:hover {background:none;}
@media screen and (max-width:600px) {
	.faq-list dl dt {padding:1em 1.5em; font-size:18px; font-size:1.8rem;}
}

.section-top-access h4 {
	background-color:#02CFCA; width:fit-content; padding:0.2em 4em 0.2em 2em; font-weight:bold;
	text-align:left; margin:2em 0 1em 0;
	position:relative;
}
.section-top-access h4::before {
	content:""; position:absolute; top:0; left:0; bottom:0;
	display:inline-block;
	width:30px; height:100%;
	background:url("images/webp/top-access-title-striped.webp") no-repeat;
	background-size:cover;
}

.access-title {
	background-color:#F5F5F5; border:1px solid; border-color:#FC0242; padding:1em 1.5em;
	color:#FC0242;
	font-size:20px; font-size:2.0rem;
	font-weight:bold;
	margin:0.5em 0 0 0;
	cursor:pointer;
}
.access-title:hover {background-color:#FC0242; color:#fff;}
.access-content {
	display:none;
	border:1px solid; border-color:#FC0242; border-top:0; padding:2em 4em;
	margin:0;
}
.access-content .maps {
	width:100%; height:300px; position:relative; overflow:hidden;
	margin:0 0 1em 0;
}
.access-content .maps iframe {
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	width:100%;
	height:100%;
}

.access-content dl dt {
	color:#FC0242;
	display:block;
}
.access-content dl dd {
	font-size:16px; font-size:1.6rem; margin:0 0 1em 0;
}

.access-content .access-subtitle {font-weight:bold; margin:0 0 0.5em 0;}


@media screen and (max-width:600px) {
	.section-top-access h4 {font-size:24px; font-size:2.4rem;}
	.access-content {padding:2em;}
	.access-title {font-size:18px; font-size:1.8rem;}
}

body.is-scrolled .section-top-last,
.section-top-last {background-color:transparent; padding:100px 0;}

/******************/

.button {line-height:1; font-size:16px; font-size:1.6rem;position: relative;}
.button a {
	
}
.button a::after {
	
}

.button.-center {text-align:center;}
.button.-small {font-size:12px; font-size:1.2rem;}
.button.-small a {background-size:14px 14px;}

.button a:hover {}


.flex-container {display:flex; justify-content:space-between;}
.flex-container .flex-item {}
.flex-container-3 .flex-item {flex-basis:30.6666%;}
.flex-container-2 .flex-item {flex-basis:48%;}


/******************/

@media screen and (max-width:640px) {
}



/******************/
/* plugins ********/

.js-inview {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .6s, transform .4s;
}
.js-inview.is-inview {
	opacity: 1;
	transform: translateY(0);
	transition-delay:0.6s;
}



/******************/ 
/* 装飾 decoration */

.section-top-about .flex-item.deco {
	position:relative;
}
.section-top-about .flex-item.deco::before {
	content:""; position:absolute; width:134px; height:14px;
	background:url("images/webp/deco-04.webp") 0 0 no-repeat;
	background-size:cover;
	bottom:0px; left:0;
}

.portfolio-box {position:relative;}
.portfolio-box::before {
	content:""; position:absolute; width:266px; height:24px;
	background:url("images/webp/deco-05.webp") 0 0 no-repeat;
	background-size:cover;
	top:-24px; left:0;
}

.portfolio-box .box.deco {position:relative;}
.portfolio-box .box.deco::before {
	content:""; position:absolute; width:130px; height:43px;
	background:url("images/webp/deco-06.webp") 0 0 no-repeat;
	background-size:cover;
	top:0; right:0;
	
}

#works-tester {
	background:url("images/webp/deco-works-tester.webp") center top no-repeat;
	background-size:100% auto;
}
#works-localization {
	background:url("images/webp/deco-works-localization.webp") center top no-repeat;
	background-size:100% auto;
}
#works-support {
	background:url("images/webp/deco-works-support.webp") center top no-repeat;
	background-size:100% auto;
}

.staff-list .title.deco {position:relative;}
.staff-list .title.deco::before {
	content:""; position:absolute; width:60px; height:43px;
	background:url("images/webp/deco-01.webp") 0 0 no-repeat;
	background-size:cover;
	top:-43px; left:-60px;
}
.staff-list .title.deco::after {
	content:""; position:absolute; width:74px; height:34px;
	background:url("images/webp/deco-02.webp") 0 0 no-repeat;
	background-size:cover;
	top:-0; right:-70px;
}

.staff-list ul li::before {
	content:""; position:absolute; width:72px; height:12px;
	background:url("images/webp/deco-03.webp") 0 0 no-repeat;
	background-size:72px 12px;
	top:-20px; left:0;
}

.site-footer::before {
	content:""; position:absolute; width:110%; height:120%;
	top:-20%; left:-10%; right:0; bottom:0;
	background:url("images/webp/deco-footer.webp") center top no-repeat;
	background-size:cover;
	pointer-events:none;
}

/******************/

#load {}
#load .logo-title {position:absolute; top:50%; left:50%;
	transform:translate(-50%,-50%);
	max-width:900px;
	width:80%;
	z-index:99999;	
}
#load .logo-title img.spacer {position:relative; display:block; width:100%; max-width:900px; height:auto;}
#load .logo-title img.load-logo {
	position:absolute; top:0; left:0; right:0;
	width:100%; height:auto;
	transform:translateX(-200%);
	transition:0.2s;
}
#load .logo-title img.load-logo-02 {
	transition-delay:0.4s;
}

#load span {position:absolute; top:0; left:0; width:100%; height:100%; transition:0.9s;}
#load .layer-1 {
	background-color:#fc0242; width:200%; z-index:9996;
	transition-delay:1.5s;}
#load .layer-2 {
	background-color:#d8c6ca; z-index:9997; width:200%;
	clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0 100%);
	left:100%;
 transition-delay:1.2s;
}
#load .layer-3 {background-color:#fff3f6; z-index:9998; width:200%;
	clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0 100%);
	left:100%;
	transition-delay:1.3s;
}
/*
#load .layer-2::before {content:""; position:absolute; right:100%;
width:100vh; height:100vh;
background:url("images/load-layer-2.svg") 0 0 no-repeat;
}
#load .layer-3::before {content:""; position:absolute; right:100%;
width:100vh; height:100vh;
background:url("images/load-layer-3.svg") 0 0 no-repeat;
}
*/
#load.is-active {pointer-events:none;}
#load.is-active span.layer-1 {transform:translateX(-200%);}
#load.is-active span.layer-2 {transform:translateX(-200%);}
#load.is-active span.layer-3 {transform:translateX(-200%);}

#load.is-active .logo-title img.load-logo {transform:translateX(0);}
/*#load.is-active img {opacity:0;}*/

/* end ************/
/******************/
/******************/