@charset "utf-8";

/*=====================================
top.css
=====================================*/

/*-------------------------------------
	mv
-------------------------------------*/
.topMv {
	position: relative;
	z-index: 1;
}
.topMv_pic {
	position: relative;
	overflow: hidden;
}
.topMv_pic .topMv_slide {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	transition: opacity 1s ease;
}
.topMv_pic .topMv_slide:first-child {
	position: relative;
}
.topMv_pic .topMv_slide.is-active {
	opacity: 1;
}
.topMv_pic picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.topMv_pic img {
	width: 100%;
}
.topMv_text {
	position: absolute;
	left: clamp(50px, -118.394px + 21.898vw, 140px);
	bottom: clamp(40px, -72.263px + 14.599vw, 100px);
	color: #fff;
}
.topMv_text h1 {
	margin-bottom: 20px;
	font-family: var(--font-mincho);
	font-size: clamp(40px, 21.290px + 2.433vw, 50px);
	font-weight: 500;
	letter-spacing: 0.1em;
}
.topMv_text p {
	margin-bottom: 25px;
	font-size: clamp(16px, 8.516px + 0.973vw, 20px);
	font-weight: 500;
	letter-spacing: 0.02em;
}
.topMv_text .en {
	font-family: var(--font-inter);
	font-size: clamp(10px, 6.258px + 0.487vw, 12px);
	line-height: var(--height-textB);
}


/*-------------------------------------
	Company
-------------------------------------*/
.topCompany {
	position: relative;
	padding-top: 180px !important;
}
.topCompany_group {
	width: fit-content;
	max-width: 550px;
	margin-inline: auto;
	padding-top: 210px;
	padding-bottom: 336px;
}
.topCompany .sectionText {
	padding-bottom: 25px;
}
.topCompany .sectionText p {
	margin-bottom: 40px;
}
.topCompany_en {
	position: absolute;
	top: 0;
	left: 20px;
	color: #666;
	font-family: var(--font-inter);
	font-size: 13px;
	line-height: 1.85;
}
.topCompany_picA {
	position: absolute;
	top: 180px;
	left: 50%;
	transform: translateX(100%);
}
.topCompany_picA .pic01 {
	width: 400px;
}
.topCompany_picA .pic01 img {
	position: relative;
	z-index: 2;
}
.topCompany_picA .pic01::before {
	content: "";
	position: absolute;
	left: -20%;
	bottom: -46px;
	z-index: 0;
	width: 80%;
	aspect-ratio: 11 / 14;
	background: var(--color-main);
}
.topCompany_picB {
	position: absolute;
	right: 50%;
	bottom: 236px;
	padding-bottom: 220px;
	transform: translateX(-83%);
}
.topCompany_picB .pic01 {
	width: 520px;
}
.topCompany_picB .pic01 img {
	position: relative;
	z-index: 2;
}
.topCompany_picB .pic01::before {
	content: "";
	position: absolute;
	right: 40px;
	bottom: -56px;
	z-index: 0;
	width: 276px;
	aspect-ratio: 1 / 1;
	background: var(--color-main);
}
.topCompany_picB .pic02 {
	position: absolute;
	right: -75px;
	bottom: 0;
	z-index: 3;
	width: 240px;
}
.topCompany_picC {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 20px;
}
.topCompany_picC .pic01 {
	position: absolute;
	right: 0;
	bottom: -80px;
	width: 320px;
}
.topCompany_picC .pic01 img {
	position: relative;
	z-index: 2;
}
.topCompany_picC .pic01::before {
	content: "";
	position: absolute;
	left: -45px;
	bottom: 80px;
	z-index: 0;
	width: 210px;
	aspect-ratio: 1 / 1;
	background: var(--color-main);
}


/*-------------------------------------
	Works
-------------------------------------*/
.topWork_list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 60px 50px;
	margin-bottom: 75px;
}
.topWork_item a {
	display: block;
}
.topWork_item figure {
	margin-bottom: 10px;
	overflow: hidden;
}
.topWork_item figure img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 163 / 109;
}
.topWork_item h3 {
	margin-bottom: 10px;
	color: #000;
	font-family: var(--font-mincho);
	font-size: 16px;
	font-weight: 600;
}
.topWork_item p {
	color: var(--color-main);
}


/*-------------------------------------
	Service
-------------------------------------*/
.topService_wrap {
	display: grid;
	grid-template-columns: 1fr 48%;
	column-gap: 60px;
}
.topService .sectionGroup {
	display: flex;
	flex-direction: column;
}
.topService .sectionHead {
	padding-bottom: 30px;
}
.topService_en {
	margin-top: auto;
	padding-top: 20px;
	color: var(--color-sub02);
	font-family: var(--font-inter);
	font-size: 13px;
	line-height: 1.85;
}
.topService .sectioinPic {
	position: relative;
	display: flex;
	margin-right: calc(-1 * clamp(100px, -524.186px + 51.163vw, 320px));
}
.topService .sectioinPic .pic01 {
	position: relative;
	max-width: 480px;
	padding-top: 80px;
}
.topService .sectioinPic .pic01 img {
	position: relative;
	z-index: 2;
}
.topService .sectioinPic .pic01::before {
	content: "";
	position: absolute;
	right: -30%;
	bottom: clamp(-46px, -3vw, -20px);
	z-index: 0;
	width: 60%;
	aspect-ratio: 1 / 1;
	background: var(--color-main);
}
.topService .sectioinPic .pic02 {
	position: relative;
	max-width: 320px;
	z-index: 3;
}
@media screen and (max-width: 1220px) {

.topService .sectioinPic {
	margin-right: -20px;
}
.topService .sectioinPic .pic01 {
	width: 80%;
	margin-top: auto;
}
.topService .sectioinPic .pic02 {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
}

}

/* Menu
-------------------------------------*/
.topMenu {
	margin-bottom: 0;
	padding-bottom: 100px;
}
.topMenu_list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 60px 50px;
	margin-bottom: 75px;
}
.topMenu_item a {
	display: block;
}
.topMenu_item figure {
	margin-bottom: 10px;
	overflow: hidden;
}
.topMenu_item figure img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 163 / 109;
}
.topMenu_item h3 {
	color: #000;
	font-family: var(--font-mincho);
	font-size: 16px;
	font-weight: 600;
}


/*-------------------------------------
	Recruit
-------------------------------------*/
.topRecruit {
	padding-top: 255px;
	padding-bottom: 240px;
	background: url(../images/top/recruit_bg.png) no-repeat center center / cover #332e21;
}
.topRecruit .sectionHead {
	color: #fff;
	padding-bottom: 70px;
}
.topRecruit .sectionHead .en {
	color: #fff;
}
.topRecruit .sectionHead .title {
	font-size: 24px;
	line-height: 1.7;
}









/*-------------------------------------------------------------------
 Media Queries
-------------------------------------------------------------------*/



/* SP layout
-------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

/*-------------------------------------
	mv
-------------------------------------*/
.topMv_pic img {
	object-fit: cover;
	height: 500px;
}
.topMv_text {
	left: 20px;
}
.topMv_text h1 {
	margin-bottom: 10px;
	font-size: clamp(26px, 12.641px + 3.562vw, 40px);
}
.topMv_text p {
	margin-bottom: 13px;
	font-size: clamp(11px, 6.229px + 1.272vw, 16px);
}
.topMv_text .en {
	font-size: clamp(7px, 4.137px + 0.763vw, 10px);
	line-height: 1.7;
}


/*-------------------------------------
	Company
-------------------------------------*/
.topCompany {
	padding-top: 80px !important;
	padding-bottom: 0;
}
.topCompany_group {
	max-width: 80%;
	padding-top: 380px;
	padding-bottom: 60px;
}
.topCompany_en {
	left: 70px;
	font-size: 7px;
	transform-origin: left top;
	transform: rotate(90deg);
}
.topCompany_picA {
	top: 80px;
	left: auto;
	right: 0;
	transform: translateX(0);
}
.topCompany_picA .pic01 {
	width: 200px;
}
.topCompany_picA .pic01::before {
	left: -45px;
	bottom: -25px;
	width: 80%;
}
.topCompany_picB {
	position: relative;
	right: auto;
	bottom: auto;
	margin-bottom: 68px;
	padding-bottom: 80px;
	transform: translateX(0);
}
.topCompany_picB .pic01 {
	width: 230px;
}
.topCompany_picB .pic01::before {
	left: 100px;
	right: auto;
	bottom: -28px;
	z-index: 0;
	width: 110px;
}
.topCompany_picB .pic02 {
	position: absolute;
	left: 150px;
	right: auto;
	bottom: 0;
	width: 120px;
}
.topCompany_picC {
	position: relative;
	left: auto;
	right: auto;
	bottom: auto;
	padding-top: 140px;
}
.topCompany_picC .pic01 {
	bottom: -40px;
	width: 140px;
}
.topCompany_picC .pic01::before {
	left: -24px;
	bottom: 40px;
	width: 105px;
}


/*-------------------------------------
	Works
-------------------------------------*/
.topWork_list {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 30px 10px;
	margin-bottom: 50px;
}
.topWork_item h3 {
	margin-bottom: 7px;
	font-size: 14px;
}
.topWork_item p {
	font-size: 11px;
}


/*-------------------------------------
	Service
-------------------------------------*/
.topService_wrap {
	display: block;
}
.topService .sectionGroup {
	margin-bottom: 40px;
}
.topService_en {
	padding-top: 50px;
	font-size: 7px;
	line-height: 1.85;
}
.topService .sectioinPic {
	display: flex;
	margin-inline: -20px;
}
.topService .sectioinPic .pic01 {
	padding-top: 10vw;
}
.topService .sectioinPic .pic02 {
	position: relative;
}

/* Menu
-------------------------------------*/
.topMenu {
	padding-top: 40px;
	padding-bottom: 0;
}
.topMenu_list {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 20px 10px;
	margin-bottom: 50px;
}
.topMenu_list h3 {
	margin-bottom: 7px;
	font-size: 12px;
}


/*-------------------------------------
	Recruit
-------------------------------------*/
.topRecruit {
	padding-top: 120px;
	padding-bottom: 60px;
}
.topRecruit .sectionHead {
	padding-bottom: 40px;
}
.topRecruit .sectionHead .title {
	font-size: 18px;
}
.topRecruit_btn .btnType02 {
	margin-inline: auto;
}


}



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

@media screen and (min-width: 769px) {

/*-------------------------------------
	hover
-------------------------------------*/
.topWork_item a,
.topMenu_item a {
	text-decoration: none;
	transition: opacity 0.2s;
}
.topWork_item a:hover,
.topMenu_item a:hover {
	opacity: 0.8;
	text-decoration: none;
}
.topWork_item a figure img,
.topMenu_item a figure img {
	transition: transform 0.2s;
}
.topWork_item a:hover figure img,
.topMenu_item a:hover figure img {
	transform: scale(1.1);
}

}