@charset "UTF-8";

/******************
スライド画像[共通]
******************/
.mainVisualWrapper {
  	width: 100%;
	overflow: hidden;
	position:relative;
	z-index:1;
}
.mainVisual {
  	width: 100%;
	height:100vh;
	overflow: hidden;
	position:relative;
}
.mainVisual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mainVisualSp{
	display:none;
}
.swiper,
.swiper-wrapper,
.swiper-slide {
  height: 100%;
}
.mainTxtWrapper{
	position:absolute;
	left:5%;
	top: 50%;
  	transform: translateY(-50%);
	z-index:10;
}
.mainTxtUpTxt{
	position:relative;
	display:inline-block;
	padding:3px 20px;
	color:#042352;
	z-index:1;
	font-size:clamp(1.1rem, 0.991rem + 0.55vw, 1.4rem);
	letter-spacing:0.2rem;
	margin:0 0 15px 0;
}
.mainTxtUpTxt::before{
	content:"";
	position:absolute;
	inset:0;
	background:#fff;
	transform:skewX(-20deg);
	z-index:-1;
}
.mainTxtMiddle{
	
}
.mainTxtMiddleTxt1{
	font-size:clamp(3rem, 2.273rem + 3.64vw, 5rem);
	font-weight:300;
	letter-spacing:0.6rem;
	line-height:1;
	margin:0 0 5px 0;
}
.mainTxtMiddleTxt1 span{
	font-size:clamp(2rem, 1.273rem + 3.64vw, 4rem);
}
.mainTxtMiddleTxt2{
	font-size:clamp(4rem, 3.273rem + 3.64vw, 6rem);
	font-weight:300;
	letter-spacing:0.6rem;
	line-height:1;
	margin:0 0 30px 0;
	color:#042352;
}
.mainTxtMiddleTxt3{
	font-size:clamp(1rem, 0.943rem + 0.14vw, 1.05rem);
	margin:0 0 30px 0;
	line-height:1.7;
}
.mainTxtUnderTxt{
	font-size:clamp(1rem, 0.943rem + 0.14vw, 1.05rem);
}
@media screen and (max-width: 1100px) {
.mainVisualWrapper {
  	margin:60px 0 0 0;
}
}
@media screen and (max-width: 800px) {
.mainVisual {
  	display:none;
}
.mainVisualSp{
	width: 100%;
	margin:0 auto;
  	height: auto;
	display:block;
	padding:0;
        margin-bottom: 0;
}
.mainVisualSp figure {
    margin: 0;
}
.mainVisualSp img {
    display: block;
    width: 100%;
    height: auto;
}
.mainTxtWrapper{
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	bottom:unset;
	top:22%;
	width:90%;
}
.mainTxtMiddleTxt1 {
    color: var(--basecolor);
    letter-spacing: 0.4rem;
	text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9);
}
.mainTxtMiddleTxt2 {
	letter-spacing: 0.4rem;
	text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9);
}
.mainTxtMiddleTxt3 {
    color: var(--basecolor);
    margin: 0 0 15px 0;
	text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9);
}
.mainTxtUnderTxt {
    color: var(--basecolor);
	text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9);
}
}
@media screen and (max-width: 500px) {
	.mainTxtWrapper{
    position: absolute;
    z-index: 10;
    padding: 20px 30px;
}

.mainTxtWrapper::before{
    content: "";
    position: absolute;
    top: -30px;
    left: -40px;
    right: -120px;
    bottom: -30px;
    z-index: -1;

    background: rgba(255,255,255,.35);
    filter: blur(40px);
    opacity: .9;
}
.mainTxtUpTxt{
	font-size: 1.05rem;
    letter-spacing: 0.05rem;
	padding: 3px 15px;
}
.mainTxtMiddleTxt1{
	font-size: 2.4rem;
    font-weight: 400;	
}
.mainTxtMiddleTxt1 span{
	font-size: 1.8rem;
}
.mainTxtMiddleTxt2{
	 font-size: 3rem;
    font-weight: 400;
	margin: 0 0 20px 0;
}
.mainTxtMiddleTxt3{
	font-weight: 500;
	margin: 0 0 5px 0;
}
.mainTxtUnderTxt{
	font-weight: 500;	
}
}



/******************
トップ　見出し
******************/
.topMidashi{
	font-family:var(--enLg);
	font-size:clamp(2rem, 0.909rem + 5.45vw, 5rem);
	font-weight:300;
	line-height:1.4;
	letter-spacing:0.1rem;
	margin:0 auto 40px auto;
}
.topMidashi span{
	display:block;
	font-family:var(--enJp);
	font-size:clamp(0.9rem, 0.614rem + 0.71vw, 1.15rem);
	font-weight:400;
	letter-spacing:0;
}
.tmCen{
	text-align:center;
}
.tmWh{
	color:#fff;
}
@media screen and (max-width: 1400px) {
.tmWh{
	margin:0 auto 30px auto;
}
}
@media screen and (max-width: 1200px) {
.topMidashi{
	margin:0 auto 30px auto;
}
}
@media screen and (max-width: 1000px) {
.topMidashi{
	margin:0 auto 30px auto;
	line-height:1.3;
}
}
@media screen and (max-width: 640px) {
.topMidashi{
	margin:0 auto 30px auto;
	font-weight:400;
}
}
@media screen and (max-width: 480px) {

}



/******************
トップ　私たちについて
******************/
.topUp{
	width:100%;
}
.topAbout{
	width:100%;
	padding:100px 0 0 0;
	display:flex;
	justify-content:space-between;
}
.topAboutL {
	width:30%;
	margin:0 11%;
}
.topAboutR {
	width:48%;
	overflow:hidden;
}
.topAboutR img{
    width:100%;
    display:block;
    height:auto;
}
.topAboutRPicUnder{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:0;
}
.topAboutRPicUnderOne{
	overflow:hidden;
}
.topAboutRPicUnderOne img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.topAboutTtl{
	font-size:clamp(1.2rem, 1.091rem + 0.55vw, 1.5rem);
	margin:0 auto 15px auto;
	line-height:1.7;
}
.topAboutTxt{
	position:relative;
	margin-top:100px;
}
.topAboutTxt::before{
	content:"";
	position:absolute;
	top:-50px;
	left:0;
	width:60px;
	height:2px;
	background:#111;
}

@media screen and (max-width: 1500px) {
.topAboutL {
	width:36%;
	margin:0 5%;
}
.topAboutR {
    width: 54%;
}
}
@media screen and (max-width: 1280px) {
.topAboutTxt br{
    display:none;
}
}
@media screen and (max-width: 1200px) {
.topAbout {
    padding: 80px 0 0 0;
}
.topAboutL {
	width:36%;
	margin:0 3%;
}
.topAboutR {
    width: 58%;
}
.topAboutTtl {
    margin:0 auto;
}
.topAboutTxt{
    margin-top: 50px;
}
.topAboutTxt::before {
    top: -25px;
}
}
@media screen and (max-width:1000px) {
.topAbout {
    padding: 50px 0 0 0;
	display:block;
}
.topAboutL {
	width:90%;
	margin:0 auto 30px auto;
}
.topAboutR {
    width:100%;
	margin:0 auto;
}
}
@media screen and (max-width: 640px) {
.topAbout {
    padding: 40px 0 0 0;
}
}

/******************
トップ　対応
******************/
.topTaiou{
	width:100%;
	max-width:1600px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	padding:40px 0;
}
.topTaiouOne{
	flex:1;
	box-sizing:border-box;
	border-right:1px solid #111;
	padding:20px 3%;
	text-align:center;
}
.topTaiouOne:last-child{
	border-right:none;
}
.topTaiouImg{
	width:100px;
	margin:0 auto 20px auto;
}
.topTaiouTtl{
	font-size:clamp(1.1rem, 1.045rem + 0.27vw, 1.25rem);
	display:inline-block;
	border-bottom:1px solid #111;
	margin:0 auto 15px auto;
}
@media screen and (max-width: 1450px) {
.topTaiouOne {
    padding: 20px 1%;
}
}
@media screen and (max-width: 1240px) {
.topTaiouTxt{
	font-size:0.9rem;		
}
}
@media screen and (max-width: 1080px) {
.topTaiouTxt br{
	display:none;
}
}
@media screen and (max-width: 1000px) {
.topTaiou{
        flex-wrap: wrap;
}
.topTaiouOne{
        flex: 0 0 calc(100% / 2);
	position: relative;
	padding:30px 4%;
}
.topTaiouOne:nth-child(2) {
    border-right: none;
}
.topTaiouOne:nth-child(-n+2)::after{
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 0;
    height: 1px;
    background: #111;
}
.topTaiouTxt{
	font-size:1rem;		
}
.topTaiouTxt br{
	display:unset;
}
}
@media screen and (max-width: 700px) {
.topTaiouTxt br{
	display:none;
}
}
@media screen and (max-width: 640px) {
.topTaiouTtl {
    font-weight:600;
}
.topTaiouTxt {
    text-align:left;
}
.topTaiouImg {
    width: 80px;
}
}
@media screen and (max-width: 360px) {
.topTaiouTtl {
    font-size: 1rem;
	letter-spacing:-0.05rem;
}
}

/******************
トップ　サービス
******************/
.topServiceUpTxt{
	text-align:center;
}
.topServiceList{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	width:100%;
	margin:70px auto 0 auto;
}
.topServiceOne{
	width:31%;
	margin:0 0 40px 0;
}
.topServiceImg{
	position:relative;
	overflow:hidden;
	margin:0 auto 15px auto;
}
.topServiceImg img{
	width:100%;
	display:block;
	transition:transform .6s ease;
}
.topServiceImg::before{
	content:attr(data-num);
	position:absolute;
	top:0;
	left:0;
	z-index:3;
	background:#333333;
	color:#fff;
	font-size:1.8rem;
	font-weight:300;
	font-family:var(--enLg);
	line-height:1;
	padding:15px;
	transition:.3s;
}
.viewMore{
	position:absolute;
	right:0;
	bottom:0;
	z-index:3;
	background:#333333;
	color:#fff;
	font-size:.9rem;
	font-weight:500;
	display:flex;
	align-items:center;
	gap:5px;
	padding:5px 25px;
	transition:.3s;
}
.topServiceImg::after{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0);
	transition:.4s ease;
	z-index:2;
}
.topServiceLink:hover {
	text-decoration:none;
	color:#111;
}
.topServiceLink:hover .topServiceImg img{
	transform:scale(1.05);
	opacity:1!important;
}
.topServiceLink:hover .topServiceImg::before{
	background:var(--hovercolor);
}
.topServiceLink:hover .viewMore{
	background:var(--hovercolor);
}
.topServiceLink .topServiceImg:hover::after{
	background:rgba(0,0,0,.4);
}
.topServiceTtl{
	font-weight:500;
	font-size:clamp(1.2rem, 1.164rem + 0.18vw, 1.3rem);
	margin:0 auto 5px auto;
}
.tsNakaTxt{
	margin:0 auto 15px auto;
	line-height:1.8;
}
.tsNakaKoumoku{
	width:100%;
	position:relative;
}
.tsNakaKoumoku ul{
	width:100%;
	position:relative;
}
.tsNakaKoumoku ul li{
	width:95%;
	position:relative;
	padding:0 0 0 15px;
}
.tsNakaKoumoku ul li:before{
	position:absolute;
	content:'';
	width:8px;
	height:8px;
	background:#111;
	left:0.1px;
	top:13px;
	border-radius:50%;
}
@media screen and (max-width: 1000px) {
.topServiceList {
    margin: 50px auto 0 auto;
	flex-wrap:wrap;
}
.topServiceOne{
	width:48%;
}
.topServiceOne:nth-child(5) , .topServiceOne:last-child {
	margin: 0;
}
}
@media screen and (max-width: 640px) {
.topServiceList{
	display:block;
	margin:30px auto 0 auto;
}
.topServiceOne{
	width:100%;
	margin:0 auto 40px auto;
}
.topServiceOne:nth-child(5){
	margin:0 auto 40px auto;	
}
.topServiceOne:last-child{
	margin:0 auto;
}
.topServiceUpTxt{
	text-align:left;
}
.topServiceImg {
    margin: 0 auto 10px auto;
}
.tsNakaTxt {
    margin: 0 auto 5px auto;
}
}


/******************
トップ　施工事例
******************/
.topWorksWrapper{
	width:100%;
	position:relative;
}
.topWorksWrapper::after{
	content:"";
	position:absolute;
	bottom:0;
	right:0;
	width:225px; 
	height:306px;
	background:url('./images/common/common-decoration2.png') no-repeat;
	background-size:contain;
	pointer-events:none;
	z-index:0;
}
.topWorksPc{
	display:block;
}
.topWorksSp{
	display:none;
}
.topWorksList{
	display:flex;
	justify-content:space-between;
	gap:30px;
	width:100%;
	margin:50px auto ;
}
.topWorksOne{
	width:calc((100% - 60px) / 3);
	display:block;
	text-decoration:none;
	color:#111;
	transition:.3s ease;
}
.topWorksImg{
	overflow:hidden;
	margin-bottom:15px;
	position:relative;
}
.topWorksImg img{
	width:100%;
	height:280px;
	object-fit:cover;
	display:block;
	position:relative;
	transition:.3s ease;
}
.topWorksImg::after{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0);
	transition:.3s ease;
	z-index:2;
}
.topWorksOne:hover{
	text-decoration:none;
}
.topWorksOne:hover .topWorksImg img{
	transform:scale(1.05);
	opacity:1!important;
}
.topWorksOne:hover .topWorksImg::after{
	background:rgba(0,0,0,.4);
}
.topWorksOne:hover .topWorksImg::before{
	background:var(--hovercolor);
}
.topWorksDate{
	font-size:0.9rem;
	margin:0 auto;
}
.topWorksTitle{
	font-size:clamp(1.05rem, 1.014rem + 0.18vw, 1.15rem);
	line-height:1.6;
	transition:.3s ease;
}
.toMore{
	width:100%;
	max-width:320px;
	margin:20px auto 0 auto;
}
.toMore a{
	display:block;
	width:100%;
	background:var(--bkcolor);
	color:#fff;
	padding:10px 6%;
	box-sizing:border-box;
	position:relative;
	transition:.3s;
}
.toMore a::before{
	position:absolute;
	content:'';
	background:url(./images/common/wh-arrow.png) no-repeat left top;
	background-size:21px 6px;
	width:21px;
	height:6px;
	right:7%;
	top:41%;
	transition:.3s;
}
.toMore a:hover{
	background:var(--hovercolor);
	text-decoration:none;
	transform: translateY(-3px);
  	box-shadow: 0 5px 10px rgba(0,0,0,.25);
}
.toMore a:hover::before{
	right:4%;
}
.noSha a:hover{
  	box-shadow: none;
}
.bg33{
	margin:20px 0 0 0;
}
.bg33 a{
	background:#7a7a7a;
}
@media screen and (max-width: 1000px) {
.topWorksImg img{
	height:200px;
}
}
@media screen and (max-width: 800px) {
.topWorksPc{
	display:none;
}
.topWorksSp{
    display: grid;
}
.topWorksFade{
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition:
    opacity 1s ease,
    transform 1s ease;
	margin:0 auto 20px auto;
}
.topWorksFade.active{
    opacity: 1;
    visibility: visible;
}
.topWorksFade .topWorksOne{
	width:100%;
}
.topWorksImg img{
	height:auto;
	object-fit:auto;
}
}

/******************
トップ　会社情報
******************/
.topCompanyWrapper{
	width:100%;
	position:relative;
}
.topCompany{
	display:flex;
	justify-content:space-between;
	gap:30px;
	width:100%;
	margin:100px auto 30px auto;
}
.topCompanyL{
	width:47%;
}
.topCompanyR{
	width:47%;
}
.topCompanyMidashi{
	position:relative;
	border-bottom:1px solid #111;
	margin-bottom:30px;
	font-size:clamp(1rem, 0.964rem + 0.18vw, 1.1rem);
	font-weight:400;
}
.topCompanyMidashi::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:1px;
	background:var(--bkcolor);
	z-index:1;
}
.topCompanyMidashi span{
	position:relative;
	z-index:2;
	display:inline-block;
	background:linear-gradient(
		90deg,
		#2b2b2b 0%,
		#262626 100%
	);
	color:#fff;
	padding:5px 70px 5px 20px;
	clip-path:polygon(
		0 0,
		80% 0,
		100% 100%,
		0 100%
	);
}
.topCompanyL table{
	width:100%;
	border-collapse:collapse;
}
.topCompanyL table tr{
	width:100%;
	border-bottom:2px dotted #111;
	overflow:hidden;
	padding:2.5% 0;
	display:inline-flex;
}
.topCompanyL table tr:first-child{
	padding:0 0 2.5% 0;
}
.topCompanyL table th{
	width:24%;
	padding:0 2%;
	font-weight:400;
	text-align:left;
	vertical-align:top;
}
.topCompanyL table td{
	width:68%;
	padding:0 2%;
}
.topCompanyList{
	position:relative;
}
.topCompanyList ul{
	position:relative;
	width:100%;
	margin:0 auto 40px auto;
}
.topCompanyList ul li{
	position:relative;
	width:96%;
	padding:0 0 0 15px;
}
.topCompanyList ul li::before{
	position:absolute;
	content:'';
	width:8px;
	height:8px;
	background:var(--themecolor);
	left:0.1px;
	top:13px;
}
.topArea{
	display:flex;
	width:100%;
	justify-content:space-between;
}
.topAreaL{
	width:100%;
	max-width:100px;
}
.topAreaR{
	width:calc(100% - 140px);
	padding:30px 0 0 0;
}
.topAreaR img{
	width:210px;
	margin:0 auto;
	display:block;
}
@media screen and (max-width: 1000px) {
.topCompany{
	margin:70px auto 30px auto;
}
}
@media screen and (max-width: 900px) {
.topCompany{
	display:block;
	margin:50px auto 30px auto;
}
.topCompanyL{
	width:100%;
	margin:0 auto 50px auto;
}
.topCompanyR{
	width:100%;
	margin:0 auto;
}
.topAreaL {
    max-width: 40%;
}
.topAreaR {
    width: 50%;
    padding: 10px 0 0 0;
}
}
@media screen and (max-width: 700px) {
.topCompanyMidashi {
    margin-bottom: 20px;
}
.topCompanyL table tr {
    padding:4% 0 ;
    display:block;
}
.topCompanyL table th {
	display:block;
    width: 100%;
    padding: 0 2%;
	font-weight:600;
	font-size:0.9rem;
}
.topCompanyL table td {
	display:block;
    width: 100%;
    padding: 0 2%;
}
}
@media screen and (max-width: 480px) {
.topCompanyL table tr {
    padding:5% 0 ;
}
}

/******************
トップ　アクセス
******************/
.topAccessWrapper{
	width:100%;
	position:relative;
}
.topAccessWrapper::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:244px; 
	height:278px;
	background:url('./images/common/common-decoration.png') no-repeat;
	background-size:contain;
	pointer-events:none;
	z-index:0;
}
.topAccess{
	display:flex;
	justify-content:space-between;
	align-items:stretch;
	gap:30px;
	width:100%;
	margin:100px auto 30px auto;
}
.topAccessL{
	width:47%;
	position:relative;
	display:flex;
	flex-direction:column;
}
.topAccessR{
	width:47%;
	position:relative;
	display:flex;
	flex-direction:column;
}
.topGm,
.topAccessRIMg{
	aspect-ratio:16 / 9;
	width:100%;
	min-height:400px;
}
.topGm{
	position:relative;
	overflow:hidden;
}
.topGm iframe, .topGm object, .topGm embed {
    position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
}
.topGm iframe,
.topAccessRIMg img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.topGmUnder,
.topAccessRUnder{
	display:flex;
}
.topGmUnderTxt , .topAccessRUnderTxt{
	background:#333;
	color:#fff;
	padding:10px 4%;
	box-sizing:border-box;
	width:100%;
	display:flex;
	align-items:center;
	min-height:80px;
}
.topGmUnderTxt{
	font-size:1.1rem;
}
.topGmUnderTxt br{
	display:none;
}
.topAccessRUnderTxt img{
	width:80%;
	margin:0 auto;
	display:block;
	padding:10px 0;
}
@media screen and (max-width: 1100px) {
.topGmUnderTxt {
    font-size: 1rem;
}
.topGm,
.topAccessRIMg{
	min-height:300px;
}
}
@media screen and (max-width: 1000px) {
.topAccess{
	margin:70px auto 30px auto;
	gap:20px;
}
.topAccessL{
	width:48%;
}
.topAccessR{
	width:48%;
}
.topGmUnderTxt br{
	display:block;
}
}
@media screen and (max-width: 900px) {
.topAccess{
	display:block;
	margin:50px auto 0 auto;
}
.topAccessL{
	width:100%;
	margin:0 auto 40px auto;
}
.topAccessR{
	width:100%;
	margin:0 auto
}
.topGm{
	min-height:350px;
}
.topAccessRIMg{
	min-height:auto;
}
.topGmUnderTxt {
    font-size: 1.1rem;
}
.topAccessRUnderTxt img {
    width: 65%;
}
}
@media screen and (max-width: 640px) {
.topAccessL{
	margin:0 auto 30px auto;
}
.topAccessRUnderTxt img {
    width: 90%;
}
.topGmUnderTxt{
	line-height:1.6;		
}
}
@media screen and (max-width: 480px) {
.topGm{
	min-height:280px;
}
.topAccessRUnderTxt img {
    width: 96%;
}
}
@media screen and (max-width: 400px) {
.topGm{
	min-height:220px;
}
}

/******************
トップ・お知らせ
******************/
.topInfoWrapper{
	width:100%;
	margin:0 auto;
}
.topInfoNaka{
	width:100%;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.topInfoL{
	width:250px;
}
.topInfoBox {
    overflow: hidden;
	width:calc(100% - 350px);
	margin:0 0 0 100px;
}
.topInfoBox ul li{
	width:96%;
	padding:30px 2% 20px 2%;
	border-bottom:2px dotted #111;
	overflow:hidden;
	display:flex;
	justify-content:space-between;
}
.topInfoBox ul li:first-child{
	padding:0 2% 20px 2%;
}
.topInfoBox ul li:last-child{
	padding:30px 2% 0 2%;
	border-bottom:none;
}
.topInfoBox .infoUp {
  width: 15%;
}
.topInfoBox .infoDate{
	font-family:var(--enLg);
	width:90px;
}
.topInfoBox .infoTitle {
  	width:calc(100% - 150px);
	margin:0 0 0 60px;
}
.pcDis{
	display:block;
}
.spDis{
	display:none;
}

@media screen and (max-width: 1000px) {
.topInfoBox ul li {
    display: block;
}
.topInfoBox .infoDate {
    width: 100%;
	display: block;
	font-size:0.9rem;
	font-weight:600;
}
.topInfoBox .infoTitle {
	display: block;
   width: 100%;
    margin: 0 ;
}
}
@media screen and (max-width: 900px) {
.topInfoNaka{
	display:block;
}
.topInfoL{
	width:100%;
	margin:0 auto 30px auto;
}
.topInfoBox {
   width:100%;
	margin:0 auto 50px auto;
	overflow:hidden;
}
.topInfoL .topMidashi{
	text-align:center;
}
.pcDis{
	display:none;
}
.spDis{
	display:block;
}
}

/******************
トップ・採用
******************/
.topRecruitMainWrapper{
	width:100%;
	margin:0 auto;
	position:relative;
}
.topRecruitBg{
	width:100%;
	position:relative;
	z-index:-1;
}
.topRecruitMain{
	position:absolute;
	z-index:1;
	width:40%;
	left:5%;
	top:50%;
	transform:translateY(-50%);
}
.topRecruitTxt{
	color:#fff;
	margin:0 auto 40px auto;
}
.topRecruitImg {
	width:80%;
	margin:0 0 60px 0;
}
.trTegakiPc{
	display:block;
}
.trTegakiSp{
	display:none;
}
.rbPc{
	display:block;
}
.rbTab{
	display:none;
}
.rbSp{
	display:none;
}
@media screen and (max-width: 1400px) {
.topRecruitMain{
	width:45%;
}
.topRecruitTxt {
    margin: 0 auto 20px auto;
}
.topRecruitImg {
    width: 70%;
    margin: 0 0 35px 0;
}
}
@media screen and (max-width: 1240px) {
.topRecruitMain{
	width:50%;
}
}
@media screen and (max-width: 1100px) {
.rbPc{
	display:none;
}
.rbTab{
	display:block;
}
}
@media screen and (max-width: 800px) {
.topRecruitMain{
	position:relative;
	z-index:1;
	width:90%;
	left:unset;
	top:unset;
	transform:unset;
	margin:70px auto 50px auto;
}
.tmWh {
    color: var(--basecolor);
	text-align:center;
}
.topRecruitTxt {
    color: var(--basecolor);
	text-align:center;
	margin:0 auto 30px auto;
}
.trTegakiPc{
	display:none;
}
.trTegakiSp{
	display:block;
}
.topRecruitImg {
    width: 60%;
    margin: 0 auto 50px auto;
}
.bg33 {
    margin: 20px auto 0 auto;
}
.rbPc{
	display:none;
}
.rbTab{
	display:none;
}
.rbSp{
	display:block;
}
}
@media screen and (max-width: 640px) {
.topRecruitMain{
	width:86%;
	margin:50px auto 40px auto;
}
.topRecruitTxt {
	text-align:left;
    margin: 0 auto 20px auto;
}
.topRecruitImg {
    width: 90%;
    margin: 0 auto 30px auto;
}
}
@media screen and (max-width: 480px) {
.topRecruitImg {
    width: 100%;
}
}


/******************
トップ　下部
******************/
.topUnder{
	width:100%;
	max-width:1100px;
	margin:0 auto;
	padding:100px 0;
}
.topUnderUp{
	width:100%;
	margin:0 auto 50px auto;
}
.topUnderUpTxt{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:20px;
}
.topUnderUpTxt::before,
.topUnderUpTxt::after{
	content:"";
	flex:1;
	height:1px;
	background:#333;
}
.topUnderUpTxtInner{
	display:flex;
	flex-direction:column;
	align-items:center;
}
.topUnderUpTxt1{
	font-size:clamp(0.95rem, 0.895rem + 0.27vw, 1.1rem);
}
.topUnderUpTxt1 br{
	display:none;
}
.topUnderUpTxt2{
	font-size:clamp(1.2rem, 1.164rem + 0.18vw, 1.3rem);
	text-align:center;
}
.topUnderUpTxt2 br{
	display:none;
}
.topUnderUnder{
	width:100%;
}
.topUnderUnderNaka{
	width:100%;
	margin:0 auto 30px auto;
	display:flex;
	justify-content:center;
}
.topUnderUnderNakaOne{
	border-right:1px solid var(--themecolor);
	width:25%;
	box-sizing:border-box;
	text-align:center;
}
.topUnderUnderNakaOne:last-child{
	border-right:none;
}
.topUnderUnderNakaOne img{
	width:40%;
	padding:10px 0;
}
.topUnderUnderTxt{
	text-align:center;
}

@media screen and (max-width: 1200px) {
.topUnder{
	width:90%;
	max-width:90%;
	padding:90px 0;
}
}
@media screen and (max-width: 1000px) {
.topUnder{
	padding:70px 0;
}
}
@media screen and (max-width: 800px) {
.topUnder{
	width:86%;
	max-width:86%;
	padding:60px 0;
}
.topUnderUp {
    margin: 0 auto 30px auto;
}
}
@media screen and (max-width: 640px) {
.topUnder{
	padding:50px 0;
}
.topUnderUpTxt {
    display: block;
    gap: unset;
}
.topUnderUpTxt::before, .topUnderUpTxt::after {
   display:none;
}
.topUnderUpTxt1{
	text-align:center;
	line-height:1.6;
}
.topUnderUpTxt1 br{
	display:block;
}
.topUnderUpTxt2{
	text-align:center;
	line-height:1.7;
	font-weight:500;
}
.topUnderUnderNaka {
    flex-wrap:wrap;
}
.topUnderUnderNakaOne{
	width:50%;
}
.topUnderUnderNakaOne:nth-child(even){
	border-right:none;
}
.topUnderUnderNakaOne:nth-child(-n+2){
	border-bottom:1px solid var(--basecolor);	
}
.topUnderUnderNakaOne img {
    width: 50%;
    padding: 30px 0;
}
.topUnderUnderTxt span{
	display:block;		
}
.topUnderUnderTxt br{
	display:none;
}
.topUnderUpTxt2 br{
	display:block;
}
}
@media screen and (max-width: 400px) {
.topUnderUnderTxt{
	text-align:left;
}
.topUnderUnderTxt span{
	display:inline-block;		
}
}