@charset "utf-8";

/*********** KV SETTING ***********/

.fv {
	position: relative;
	width: 100%;
	height: 100vh;
	background: url("../images/top/kv_pc.png") no-repeat center / cover;
}
.fv .fv-cc {
	position: absolute;
	width: 800px;
	bottom: 150px;
	left: 5%;
	z-index: 99;
}
.fv .colorbox-01 {
	position: absolute;
	width: 332px;
	top: 0;
	left: 0;
	z-index: 9;
}
.fv .colorbox-02 {
	position: absolute;
	width: 445px;
	top: 0;
	right: 0;
	z-index: 9;
}
.fv .colorbox-03 {
	position: absolute;
	width: 222px;
	bottom: 0;
	left: 0;
	z-index: 9;
}
.fv .colorbox-04 {
	position: absolute;
	width: 333px;
	bottom: 0;
	right: 0;
	z-index: 9;
}


/*********** MESSAGE ***********/

.message_box {
	position: relative;
	padding: 200px 0 100px;
}
.message_box dl {
	position: relative;
	z-index: 10;
}
.message_box dl dt {
	font-size: 2.25em;
	background: #fff;
	display: inline;
	letter-spacing: 0.1em;
}
.message_box dl dd {
	width: 80%;
	font-size: 1.2em;
	line-height: 2.0;
	margin: 3.0em 0 0 auto;
}
.message_box .colorbox-01 {
	position: absolute;
	width: 222px;
	top: -1px;
	left: 0;
	z-index: 1;
}
.message_box .colorbox-02 {
	position: absolute;
	width: 222px;
	top: -1px;
	right: 0;
	z-index: 1;
}
.message_box .colorbox-03 {
	position: absolute;
	width: 222px;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.message_box .colorbox-04 {
	position: absolute;
	width: 112px;
	bottom: 0;
	right: 0;
	z-index: 1;
}

/*********** COMPANY ***********/

.compnay_box {
	position: relative;
	background: url("../images/top/company_bg.png") center / cover;
	color: #fff;
}
.compnay_box .content {
	width: 520px;
}
.compnay_box .colorbox-01 {
	position: absolute;
	width: 222px;
	top: -1px;
	left: 0;
	z-index: 1;
}
.compnay_box .colorbox-02 {
	position: absolute;
	width: 222px;
	top: -1px;
	right: 0;
	z-index: 1;
}


/*********** MEMBER ***********/

 /* スライダーのスタイル */
.slider-container {
	width: 100%;
	padding: 50px 0;
	overflow: hidden;
	position: relative;
}

.slider-track {
	display: flex;
	width: max-content;
	animation: scroll 45s linear infinite;
	gap: 60px;
}

.slider-track:hover {
	animation-play-state: running; /* ホバーしても止まらない */
}

.slide {
	flex-shrink: 0;
	margin-right: 0;
}

.slide img {
	height: 385px;
	width: auto;
	display: block;
}

@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}


/*********** WORK STYLE ***********/

.style_box {
	position: relative;
	padding-bottom: 0;
}
.style_box .inner_box-M {
	position: relative;
	z-index: 10;
}
.style_box .col3_box li {
	position: relative;
	padding: 3% 5.5%;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	box-sizing: border-box;
	z-index: 10;
}
.style_box .col3_box li:nth-child(1),
.style_box .col3_box li:nth-child(2) {
	border-right: 1px solid #000000;
}
.style_box .col3_box li h3 {
	padding: 1.5em 0 1.0em;
}
.style_box .col3_box li a {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.style_box .colorbox-01 {
	position: absolute;
	width: 222px;
	top: 70px;
	left: 0;
	z-index: 1;
}
.style_box .colorbox-02 {
	position: absolute;
	width: 333px;
	top: -80px;
	right: 0;
	z-index: 1;
}


/*********** WORK STYLE ***********/

.top_ft {
	position: relative;
	width: 100%;
	height: 650px;
	padding: 0;
	background: url("../images/top/top_ft_img.png") center / cover;
}
.top_ft .colorbox-01 {
	position: absolute;
	width: 222px;
	top: 0;
	left: 0;
	z-index: 1;
}



@media screen and (max-width: 999px) {
	
/*********** KV SETTING ***********/

.fv .fv-cc {
	position: absolute;
	width: 80%;
	top: 50%;
	bottom: auto;
	left: 5%;
	transform: translateY(-50%);
	z-index: 99;
}
.fv .colorbox-01 {
	position: absolute;
	width: 270px;
	top: 0;
	left: 0;
	z-index: 9;
}
.fv .colorbox-02 {
	position: absolute;
	width: 360px;
	top: 0;
	right: 0;
	z-index: 9;
}
.fv .colorbox-03 {
	position: absolute;
	width: 180px;
	bottom: 0;
	left: 0;
	z-index: 9;
}
.fv .colorbox-04 {
	position: absolute;
	width: 270px;
	bottom: 0;
	right: 0;
	z-index: 9;
}
	
/*********** MESSAGE ***********/

.message_box {
	position: relative;
	padding: 200px 0 100px;
}
.message_box .colorbox-01 {
	position: absolute;
	width: 180px;
	top: -1px;
	left: 0;
	z-index: 1;
}
.message_box .colorbox-02 {
	position: absolute;
	width: 180px;
	top: -1px;
	right: 0;
	z-index: 1;
}
.message_box .colorbox-03 {
	position: absolute;
	width: 180px;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.message_box .colorbox-04 {
	position: absolute;
	width: 90px;
	bottom: 0;
	right: 0;
	z-index: 1;
}
	
	
/*********** COMPANY ***********/

.compnay_box .content {
	width: 60%;
}
.compnay_box .colorbox-01 {
	position: absolute;
	width: 180px;
	top: -1px;
	left: 0;
	z-index: 1;
}
.compnay_box .colorbox-02 {
	position: absolute;
	width: 180px;
	top: -1px;
	right: 0;
	z-index: 1;
}
	
	
/*********** WORK STYLE ***********/

.style_box .colorbox-01 {
	position: absolute;
	width: 180px;
	top: 70px;
	left: 0;
	z-index: 1;
}
.style_box .colorbox-02 {
	position: absolute;
	width: 270px;
	top: -80px;
	right: 0;
	z-index: 1;
}
.style_box .col3_box li {
	position: relative;
	padding: 4%;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	box-sizing: border-box;
	z-index: 10;
}
	

/*********** WORK STYLE ***********/

.top_ft {
	position: relative;
	width: 100%;
	height: 450px;
	padding: 0;
	background: url("../images/top/top_ft_img.png") center / cover;
}
.top_ft .colorbox-01 {
	position: absolute;
	width: 180px;
	top: 0;
	left: 0;
	z-index: 1;
}

	

}


@media screen and (max-width: 767px) {
    
.pc_disp {display: none;}
.sp_disp {display: block;}
.pc_img {display: none;}
.sp_img {display: inline-block;}
	
	
/*********** COMMON settng ***********/
html {font-size: 13px;}
body {
	font-size: 13px;
	line-height: 1.8;
}
	
section {
	margin: auto;
	padding: 20% 0;
}
	
/*********** KV SETTING ***********/

.fv {
	position: relative;
	width: 100%;
	height: 600px;
	background: url("../images/top/kv_pc.png") no-repeat center / cover;
}
.fv .fv-cc {
	position: absolute;
	width: 80%;
	top: 50%;
	bottom: auto;
	left: 5%;
	transform: translateY(-50%);
	z-index: 99;
}
.fv .colorbox-01 {
	position: absolute;
	width: 150px;
	top: 0;
	left: 0;
	z-index: 9;
}
.fv .colorbox-02 {
	position: absolute;
	width: 200px;
	top: 0;
	right: 0;
	z-index: 9;
}
.fv .colorbox-03 {
	position: absolute;
	width: 100px;
	bottom: 0;
	left: 0;
	z-index: 9;
}
.fv .colorbox-04 {
	position: absolute;
	width: 150px;
	bottom: 0;
	right: 0;
	z-index: 9;
}
	
/*********** MESSAGE ***********/

.message_box {
	position: relative;
	padding: 100px 0 100px;
}
.message_box dl dt {
	font-size: 1.7rem;
	background: #fff;
	display: inline;
	letter-spacing: 0.1em;
}
.message_box dl dd {
	width: 100%;
	font-size: 1.0em;
	line-height: 2.0;
	margin: 3.0em 0 0 auto;
}
.message_box .colorbox-01 {
	position: absolute;
	width: 100px;
	top: -1px;
	left: 0;
	z-index: 1;
}
.message_box .colorbox-02 {
	position: absolute;
	width: 100px;
	top: -1px;
	right: 0;
	z-index: 1;
}
.message_box .colorbox-03 {
	position: absolute;
	width: 100px;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.message_box .colorbox-04 {
	position: absolute;
	width: 50px;
	bottom: 0;
	right: 0;
	z-index: 1;
}
	
/*********** COMPANY ***********/

.compnay_box {
	position: relative;
	background: url("../images/top/company_bg.png") center / cover;
	color: #fff;
}
.compnay_box .content {
	width: 100%;
}
.compnay_box .colorbox-01 {
	position: absolute;
	width: 100px;
	top: -1px;
	left: 0;
	z-index: 1;
}
.compnay_box .colorbox-02 {
	position: absolute;
	width: 100px;
	top: -1px;
	right: 0;
	z-index: 1;
}
	
	
/*********** MEMBER ***********/

 /* スライダーのスタイル */
.slider-container {
	width: 100%;
	padding: 50px 0;
	overflow: hidden;
	position: relative;
}
.slider-track {
	display: flex;
	width: max-content;
	animation: scroll 45s linear infinite;
	gap: 30px;
}

.slider-track:hover {
	animation-play-state: running; /* ホバーしても止まらない */
}

.slide img {
	height: 220px;
	width: auto;
	display: block;
}
	

/*********** WORK STYLE ***********/

.style_box {
	position: relative;
	padding-bottom: 0;
}
.style_box .inner_box-M {
	position: relative;
	z-index: 10;
}
	
.style_box .col3_box li {
	position: relative;
	width: 100%;
	padding: 8% 10%;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	box-sizing: border-box;
	z-index: 10;
}
.style_box .col3_box li:nth-child(1),
.style_box .col3_box li:nth-child(2) {
	border-right: none;
	border-bottom: none;
}
.style_box .colorbox-01 {
	position: absolute;
	width: 100px;
	top: 50px;
	left: 0;
	z-index: 1;
}
.style_box .colorbox-02 {
	position: absolute;
	width: 150px;
	top: -50px;
	right: 0;
	z-index: 1;
}

/*********** WORK STYLE ***********/

.top_ft {
	position: relative;
	width: 100%;
	height: 300px;
	padding: 0;
	background: url("../images/top/top_ft_img.png") left center / cover;
}
.top_ft .colorbox-01 {
	position: absolute;
	width: 100px;
	top: 0;
	left: 0;
	z-index: 1;
}

	
	
}