/*
Theme Name: 服部建築事務所採用サイト
Text Domain: 
Author: R-design
*/

.sp {
  display: none;
}
/*.en{
	font-family: "century-gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}*/

#head{
	padding:5px;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
}
#head h1{
	width:35%;
	max-height:80px;
	align-content: center;
}
#head h1 img{
	width:100%;
	max-width:450px;
	height:auto;
}
.navi{
	width:65%;
	display:flex;
	flex-wrap:wrap;
	justify-content: flex-end;
	font-weight:600;
}
.navi .gnavi{width:75%;}


.navi ul{
	display:flex;
	justify-content: space-around;
}


.navi .entry-bt{
	width:25%;
	max-height:80px;
	display:flex;
	flex-wrap:wrap;
	padding:10px;
}
.navi .entry-bt a{
	width:50%;
	display:block;
	text-align: center;
	line-height:60px;
}

a.new{
	background-color: #1a2f5d;
	transition: 0.5s;
	color:#fff!important;
}
a.car{
	background-color: #ffff00;
	transition: 0.5s;
	color:#000;
}
a.new:hover, a.car:hover{
	background-color: #FBD01D;
	
}
a.new:hover{
	color:#000!important;
}
/**********ドロップダウンメニュー*****************/
.navi ul ul{
	display: block;
}
.navi ul li{
	position: relative;
	align-self: center;
}
/*ナビゲーションのリンク設定*/
.navi ul li a{
	display: block;
	text-decoration: none;
	transition:all .3s;
	padding:7px 0;
}
.navi ul li a:hover{
	border-bottom:1px solid #FBD01D;
}
.navi ul li li a{
	padding:10px;
	text-align: left;
}
/*下の階層を持っているulの指定*/
.navi li.has-child ul{
    /*絶対配置で位置を指定*/
	position: absolute;
	left:0;
	top:62px;
	z-index: 4;
    /*形状を指定*/
	background:#1a2f5d;
	width:180px;
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
}

/*hoverしたら表示*/
.navi li.has-child:hover > ul,
.navi li.has-child ul li:hover > ul,
.navi li.has-child:active > ul,
.navi li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
.navi li.has-child ul li a{
	color: #fff;
	border-bottom:solid 1px rgba(255,255,255,0.6);
}

.navi li.has-child ul li:last-child > a{
 border-bottom:none;
 }

.navi li.has-child ul li a:hover,
.navi li.has-child ul li a:active{
	background:#ffff00;
	color:#1a2f5d;
}



/*main{
	width:100%;
}
main img{
	width:100%;
	height:auto;
}*/
main{
	position:relative;
}
.topslider li img{
	width:100%;
	height:auto;
}
main p{
	position:absolute;
	top:0;
	left:0;
}
main p img{
	width:100%;
	height:auto;
}

.more{
	max-width:1200px;
	margin:40px auto;
}
.more a{
	display:block;
	color:#fff;
}
.more .top-bt{
	position:relative;
	width:220px;
	display:flex;
	flex-wrap:wrap;
	background-color: #1a2f5d;
	font-size:24px;
	font-weight:600;
	padding:0 60px 0 20px;
	line-height:60px;
	border-radius: 30px;
	transition: 0.8s;
	margin-left:auto;
}
.more .top-bt::after{
	position: absolute;
	content: '';
	background: url("image/top/circle-ya-w.svg") no-repeat center / cover;
	width:40px;
	height:40px;
	top:calc(50% - 20px);
	right:10px;
	transition: 0.8s;
}
.more .top-bt:hover{
	background-color: #FBD01D;
	color:#1a2f5d;
}
.more .top-bt:hover::after{
	background: url("image/top/circle-ya.svg") no-repeat center / cover;
}
.midashi-y, .midashi-b{
	max-width:1200px;
	margin-inline:auto;
}

.midashi-y h2{
	font-size:clamp(2.5rem, 1.684rem + 4.08vw, 5rem);
	font-weight:900;
	color:#ffff00;
	padding:20px 0;
	line-height:80%;
}
.midashi-b h2{
	font-size:clamp(2.5rem, 1.684rem + 4.08vw, 5rem);;
	font-weight:900;
	color:#1a2f5d;
	padding:20px 0;
	line-height:80%;
}
.midashi-y h2 span, .midashi-b h2 span{
	display:block;
	font-size:clamp(1.125rem, 1.003rem + 0.61vw, 1.5rem);
	font-weight:500;
}




/***********cntactset**************************/

.contact-set{
	max-width:1200px;
	margin-inline:auto;
	padding:50px 20px;
	display:flex;
	flex-wrap:wrap;
}

.contact-set .box{
	width:50%;
	background-color: #1a2f5d;
	display:flex;
	flex-wrap:wrap;
	color:#fff;
	font-size:clamp(1rem, 0.714rem + 1.43vw, 1.875rem);
	font-weight:900;
	text-align: center;
	padding:30px;
	transition: 0.5s;
}
.contact-set .box-apply{
	background-color: #ffff00;
	color:#000;
}
.contact-set .box figure{
	width:20%;
	height:auto;
	align-self: center;
	margin:0;
}
.contact-set p{
	width:80%;
	height:auto;
}

.contact-set figure img{width:36px;height:auto;}
.contact-set .box:hover{
	background-color: #FBD01D;
	color:#000;
}
/***********募集要項**************************/
#recruit{
	background: url("image/top/recruit_bg.webp") no-repeat center ;
	padding:50px 0;
}
.recruit-slider{
	max-width:1100px;
	margin-inline:auto;
}
.recruit-flex{
	max-width:1100px;
	display:flex!important;
	flex-wrap:wrap;
	margin-inline:auto;
}
.recruit-flex .left{
	width:30%;
}
.recruit-flex .left img{
	width:100%;
	height:auto;
}
.recruit-flex .right{
	width:70%;

}

#recruit .top-bt{
	margin:10px auto;
	background-color: #ff5144;
}
#recruit .bgchuto{
	background-color: #e52e50;
}
#recruit .top-bt:hover, #recruit .bgchuto:hover{
	background-color: #f2f2f2;
}
#recruit .recruit-flex .sp{
	display:none;
}
.recruit-box{
	width:100%;
	background-color: #fff;
	padding:30px;
}


.recruit-box h3{
	font-size:clamp(1.25rem, 1.168rem + 0.41vw, 1.5rem);
	font-weight:600;
	border-bottom:3px solid #1a2f5d;
	padding:0 10px 10px;
	color:#1a2f5d;
}
.recruit-box .day{
	padding:7px;
	font-size:14px;
	text-align: right;
}
.recruit-box .text{
	padding:0 10px;
}

.entry-flex{
	display:flex;
	flex-wrap:wrap;
	margin-top:20px;
	justify-content: flex-end;
	gap:10px;
}
.entry-flex .entry{
	width:180px;
	background-color: #ffff00;
	border-radius: 10px;
	font-weight:700;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	padding:7px 10px;
	align-content: center;
	transition: 0.5s;
}
.entry-flex .entry:hover{
	background-color: #1a2f5d;
	color:#fff;
}
.entry-flex .ap{
	width:180px;
	background-color: #1a2f5d;
	color:#fff;
	border-radius: 10px;
	font-weight:700;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	padding:7px 10px;
	align-content: center;
	transition: 0.5s;
}
.entry-flex .ap:hover{
	background-color: #ffff00;
	color:#000;
}

/*********************************************
設計実績
****************************************************/

#works{
	padding:50px 10px;
}
.top-works{
	max-width:1200px;
	margin:0 auto 50px;
}

/*works　スライダー矢印の設定*/

ul, li {list-style: none;}


.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 40%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    height: 40px;
    width: 40px;
	background:url("image/top/circle-ya.svg") no-repeat center / cover; 
	z-index:1;
}
.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.0%;
	transform: rotate(-180deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.0%;

}




/*ドットナビゲーションの設定*/

.slick-dots {
	display:none!important;
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:12px;/*ドットボタンのサイズ*/
    height:12px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
	font-size:0;
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}
/**************************************************
 * 設計実績　下層
 * ************************************************/

.works-title{
	font-size:24px;
	text-align:center;
	font-weight:700;
	padding:10px;
	border-bottom:5px solid #f7f459;
}

.works-detail .main{
	margin-bottom: 25px;
	overflow:hidden;
	margin-top:45px;
}
.works-detail .main img{
	width:100%;
	height:auto;
}

.works-detail .main-l{
	width:30%;
	float:left;
}
.works-detail .main-l img{
	width:100%;
	height:auto;
}
.works-detail .main .main-r{
	width:65%;
	float:right;
}
.works-detail .main .main-r img{
	width:100%;
	height:auto;
}


.works-detail .main2{
	display: flex;
}

.works-detail .main2 .box{
	width: 31.333333333%;
	margin: 1%;
	box-sizing: border-box;
	padding: 10px;
	background-color: #fff;
	
}

.works-detail .main2 .box img{
	width: 100%;
	height: auto;
}


.works-detail .main3{
	margin-top: 50px;
	overflow: hidden;
	text-align: left;
}

.works-detail .main3-l{
	width: 48%;
	float: left;
	font-size:16px;
	line-height:170%;
}

.works-detail .main3-l h3{
	font-size: 30px;
	margin-bottom: 50px;
	line-height:140%;
}

.works-detail .main3-r{
	width: 48%;
	float: right;
}



.table-a	{
	color:#000;
	border: 1px solid #ccc;
	width: 100%;
	border-collapse: collapse;	border-spacing: 0;
	margin-bottom: 10px;
	background-color: #fff;
	text-align: left;
	font-size:16px;

}
.table-a th	{
	border: 1px solid #ccc;
	padding: 10px 10px;

}
.table-a td	{
	border: 1px solid #ccc;
	padding: 10px 10px;
	font-weight:normal;
}

.table-a tr:nth-child(odd) td {
	background: #f7f7f7;
}



/**************************************************
 * TOP　メッセージ
 * ************************************************/


#message{
	padding:50px 10px;
	background-color: #ffff00;
}

.message-flex{
	display:flex;
	flex-wrap:wrap;
	max-width:1200px;
	margin:20px auto 30px;
	gap: 0 5%;
}
.message-flex .img{
	width:25%;
}
.message-flex .img img{
	width:100%;
	heiht:auto;
}
.message-flex .text{
	width:70%;
	font-size:clamp(1rem, 0.918rem + 0.41vw, 1.25rem);
	line-height:170%;
}
.message-flex .text p{
	padding:30px 0 20px;
	font-size:clamp(1.125rem, 1.003rem + 0.61vw, 1.5rem);
	text-align: right;
}


/**************************************************
 * TOP　インタビュー
 * ************************************************/

#interview{
	padding:50px 10px;
}
.interview-flex{
	max-width:1200px;
	display:flex;
	flex-wrap:wrap;
	gap:50px 3%;
	margin:0 auto 80px;
}

.interview-flex li{
	width:31%;
	padding:0 20px;
}
.interview-flex li img{
	width:100%;
	height:auto;
	aspect-ratio: 3 / 4;
    object-fit: cover;
}
.interview-flex p{
	font-size:18px;
	padding:10px 0;
}
.interview-flex p span{
	padding-bottom:20px;
	display: block;
	font-size:16px;
}


/**************************************************
 * TOP　仕事を知る
 * ************************************************/

#occupation{
	padding:50px 10px;
	background-color: #1a2f5d;
}
.occupation-flex{
	max-width:1380px;
	display:flex;
	flex-wrap:wrap;
	gap:0 3%;
	margin:80px auto 80px;
}

.occupation-flex li{
	width:31%;
}
.occupation-flex li img{
	width:100%;
	height:auto;
}
.occupation-flex li h3{
	display:inline;
	font-size:clamp(1.5rem, 1.378rem + 0.61vw, 1.875rem);
	color:#fff;
}

.occupation-flex li span{
	font-size:clamp(3.75rem, 3.138rem + 3.06vw, 5.625rem);
	font-weight:900;
	padding-right:20px;
	color:#fff;
	line-height:100%;
}

/**************************************************
 * TOP　DATA
 * ************************************************/
#data {
	background-color: #ffff00;
	padding:50px 10px;
}
#job #data {
	padding:50px 10px;
}
#data #data-s{
	background-color: #ffff00;

}

.data-flex{
	max-width:1200px;
	margin-inline:auto;
	display:flex;
	flex-wrap:wrap;
	
}
.data-flex .text{
	width:30%;
}
.data-box-flex{
	width:70%;
	display:flex;
	flex-wrap:wrap;
	gap: 20px 4%;
}
.data-box-flex li{
	width:48%;
	background-color: #fff;
	padding:20px;
	text-align: center;
	color: #1a2f5d;
}
.data-box-flex li h3{
	font-size:clamp(1.25rem, 1.046rem + 1.02vw, 1.875rem);
	font-weight:900;
}
.data-box-flex li h3 span{
	font-size:clamp(2.625rem, 2.013rem + 3.06vw, 4.5rem);
}
.data-box-flex li img{
	width:90%;
	max-width:200px;
	height:auto;
}

#data .more .top-bt{
	margin-right:auto;
	margin-left:0;
	margin-top:20px;
}

/**************************************************
 * TOP　イベント
 * ************************************************/


#event{
	padding:80px 10px;
}

.event-flex{
	max-width:1200px;
	margin-inline:auto;
	display:flex;
	flex-wrap:wrap;
	gap : 0 4%;
}
.event-flex .img{
	width:30%;
}
.event-flex .img img{
	width:100%;
	height:auto;
}
.event-flex .text{
	width:66%;
	padding:20px;
	
}

.event-flex .text h3{
	font-size:clamp(1.25rem, 1.168rem + 0.41vw, 1.5rem);
	font-weight:600;
	border-bottom:3px solid #1a2f5d;
	padding:0 10px 10px;
	color:#1a2f5d;
}
.event-flex .text .day{
	padding:7px;
	font-size:14px;
	text-align: right;
}
.event-flex .text .text-s{
	padding:7px;
	font-size:16px;
}

/**************************************************
 * TOP　NEWS
 * ************************************************/


#news{
	padding:80px 10px;
	box-shadow: 0px 0px 15px -5px #777777;
}

.news-flex{
	max-width:1200px;
	margin-inline:auto;
	display:flex;
	flex-wrap:wrap;
	
}
.news-flex .text{
	width:30%;
}

.news-line{
	width:70%;
	padding:30px 0;
}
.news-line a{
	display:block;
	transition: 0.5s;
}
.news-line a:hover{
	background-color: #f2f2f2;
}
.news-line-flex{
	display:flex;
	flex-wrap:wrap;
	padding:20px 10px;
	gap: 0 4%;
	border-bottom:dotted 1px #217fc4;
}

.news-line-flex dt{
	width:26%;
	color:#217fc4;
}

.news-line-flex dd{
	width:70%;
}
#news .more .top-bt{
	margin-right:auto;
	margin-left:0;
}

/**************************************************
 * TOP　インスタグラム
 * ************************************************/


#insta{
	padding:80px 10px;
}

.insta-flex{
	max-width:1200px;
	margin-inline:auto;
	display:flex;
	flex-wrap:wrap;
	
}
.insta-flex .text{
	width:35%;
}

.insta-line{
	width:65%;
	display:flex;
	flex-wrap:wrap;
	gap:10px 1%;
}
.insta-line li{
	width:24%;
}

#insta .midashi-b h2{
	font-size:clamp(2.5rem, 2.01rem + 2.45vw, 4rem);
}
#insta .more .top-bt{
	margin-right:auto;
	margin-left:0;
}


/***********footer**************************/

footer{
	background-color: #e1e1e1;
}

.footer-waku{
	max-width:1300px;
	margin:0 auto;
	padding:30px 80px;
	display:flex;
	flex-wrap:wrap;
	gap:4%;
}
.footer-waku .logo{
	width:28%;
	height:auto;
	text-align: left;
}
.footer-waku .logo img{
	width:100%;
	max-width:300px;
	padding-bottom:30px;
}
.footer-waku .logo .co{
	color:#1a2f5d;
	padding:10px;
}
.footer-waku .list{
	width:20%;
	padding-top:30px;
	text-align: left;
	font-weight:600;
}
.footer-waku .list a{
	color:#1a2f5d;
	line-height: 200%;
}
.footer-waku .list a:hover{
	color:#217fc4;
}

.copy{
	font-size:14px;
	color:#1a2f5d;
	text-align: center;
	padding:10px;
}
.footer-waku .entry-bt, .g-nav-list .entry-bt{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	padding:10px;
}
.footer-waku .entry-bt a,  .g-nav-list .entry-bt a{
	width:50%;
	display:block;
	text-align: center;
	line-height:60px;
}
.fix-btn {
    position: fixed;
    top: 53%;
    right: 0;
    transform: translateY(-50%);
    z-index: 100;
}
.fix-btn li{
	list-style:none;

}

.fix-btn_text img{
	width:80px;
	height:auto;
	padding-top:10px;
	transition:box-shadow 0.3s, transform 0.3s;
}
.fix-btn img:hover{
    transform:translate(0, -7px);
}

/*********************
下層ページ
*********************/
#subtitle{
	position:relative;
	width:100%;
	background-color: #ffff00;
	background:#ffff00 url(image/base/bg_subtitle.png) no-repeat right bottom;
}

#subtitle-box{
	padding:4vw 10vw 1vw ;
	z-index:2;
}
#subtitle-box h2{
	font-size:clamp(2.5rem, 1.847rem + 3.27vw, 4.5rem);
	font-weight:900;
	color:#1a2f5d;
	text-align: left;
	padding-bottom:30px;
}
#subtitle-box h2 span{
	display:block;
	font-size:clamp(1.25rem, 0.886rem + 1.82vw, 2.25rem);
	font-weight:900;
}
#sublink{
	padding:7px 0;
	text-align: left;
	font-size:clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem);
}

#sub-img{
	max-width:1300px;
	height:auto;
	margin:0 auto;
}
#sub-img img{
	width:100%;
	height:auto;
	border-radius:20px;
}


/*********************
働き方を知る
*********************/


.job-flex{
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
}
.job-flex .img, .job-flex .text{
	width:50%;
	display:flex;
	flex-wrap:wrap;
	position: relative;
}
.job-flex .text::after{
	content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
	border-bottom:15px solid #1a2f5d;
    box-sizing: border-box;
}
.job-flex .box img{
	width:100%;
	max-width:800px;
}
.job-flex .box-text{
	padding:3vw 3vw 0 3vw;
	max-width:800px;
	color:#1a2f5d;
}
.job-flex .box-text h3{
	text-align: center;
	font-size:clamp(1.875rem, 1.263rem + 3.06vw, 3.75rem);
	font-weight:900;
	padding-bottom:50px;
}
.job-flex .box-text p{
	font-size:clamp(1rem, 0.837rem + 0.82vw, 1.5rem);
	font-weight:500;
}

.job-flex .kara{
	flex:1;
}

#job-work{
	background-color: #ffff00;
	padding:2vw;
}

.job-work-flex{
	display:flex;
	flex-wrap:wrap;
	max-width:1300px;
	margin-inline:auto;
}

.midashi-waku h3{
	display:inline-block;
	background-color: #1a2f5d;
	color:#fff;
	font-size:clamp(1.5rem, 1.173rem + 1.63vw, 2.5rem);
	font-weight:900;
	padding:7px 20px;;
	margin-bottom:50px;
	min-width:300px;
	text-align: center;
}


.job-work-flex .job-work-box{
	background-color: #fff;
	color:#1a2f5d;
	margin:10px;
	min-height:510px;
}
.job-work-flex .job-work-box h4{
	font-size:24px;
	font-weight:700;
	padding:1vw 1vw 20px;
}
.job-work-flex .job-work-box p{
	font-size:16px;
	font-weight:500;
	padding:0 1vw 1vw;
}
.job-work-flex .job-work-box img{
	width:100%;
	height:auto;
}

#sch{
	max-width:1300px;
	margin-inline:auto;
	padding:80px 10px;
}

.sch-waku{
	margin:0 auto 50px;
}

.sch-list-flex{
	display: flex;
	flex-wrap: wrap;
}
.sch-list-flex .box{
	width: 29%;
	margin: 1% 2%;
	padding:20px;
	box-sizing: border-box;
	margin-bottom: 55px;
	background-color:#f2f2f2;
}
.sch-list-flex .box .case{
	background-color:#596787;
	color:#fff;
	font-weight:600;
	text-align:center;
	padding:5px;
}
.sch-waku .box .timeline{
	border-bottom:1px solid #1a2f5d;
	display:flex;
	flex-wrap:wrap;
	gap:0 2%;
	font-size:16px;
	padding:20px 0 5px ;
}
.sch-waku .box .timeline h4{
	width:28%;
	font-size:16px;
	font-weight:600;
	padding-left:30px;
	position:relative;
}
.sch-waku .box .timeline h4::before{
	content:'';
	position:absolute;
	top:3px;
	left:0;
	background: url("image/job/time.png") no-repeat center / cover;
	width:19px;
	height:22px;
}
.sch-waku .box .timeline .title{
	width:67%;
}

section#job-recruit{
	padding:50px 10px 80px;
	max-width:1300px;
	margin-inline:auto;
}
.job-recruit-flex{
	display:flex;
	flex-wrap:wrap;
	max-width:1300px;
	margin:0 auto;
	border-top:solid 1px #999;
}
.job-recruit-flex dt{
	width:20%;
	padding:20px 10px 20px;
	border-bottom:solid 1px #999;
	font-weight:600;
	background-color: #f2f2f2;
}
.job-recruit-flex dd{
	width:80%;
	padding:20px 10px 20px;
	border-bottom:solid 1px #999;
}

#flow{
	max-width:1300px;
	margin-inline:auto;
	padding:50px 10px;
}

.flow-waku{
	max-width:1000px;
	margin-inline:auto;
	padding-bottom:80px;
}
.flow-waku dl{
	border:solid 1px #1a2f5d;
	color: #1a2f5d;
	padding:10px;
	margin: 24px 0;
	display:flex;
	flex-wrap:wrap;
	position:relative;
}
.flow-waku dt{
	width:30%;
	font-size:20px;
	font-weight:900;
	align-content: center;
}
.flow-waku dt span{
	background-color: #ffff00;
	margin-left:10px;
	font-size:24px;

}
.flow-waku dd{
	align-content: center;
	width:70%;
	font-size:18px;
}
.flow-waku dl::after{
	content:'';
	position:absolute;
	bottom:-24px;
	left: calc(50% - 24px);
	display: inline-block;
	border-style: solid;
	border-width: 24px 24px 0 24px;
	border-color: #1a2f5d transparent transparent transparent;
}
.flow-waku dl:last-child::after{
	border:none;
}

.flow-waku img{
	width:100%;
	height:auto;
}
.career-waku{
	max-width:1300px;
	margin-inline:auto;
}
.career-waku img{
	width:100%;
	height:auto;
}

/*.career-waku .w50{
	width:50%;
	height:auto;
	margin:10px 25%;
}*/

/*****新卒*****************/

.jobimg-flex{
	max-width:1300px;
	margin:50px auto;
	display:flex;
	fkex-wrap:wrap;
	gap:0 1%;
}
.jobimg-flex img{
	width:32%;
	height:auto;
}
#job-occupation{
	padding:50px 10px;
	background-color: #1a2f5d;
	margin-inline:auto;
}
.midashi-waku-y h3{
	display:inline-block;
	background-color: #ffff00;
	color:#1a2f5d;
	font-size: clamp(1.5rem, 1.173rem + 1.63vw, 2.5rem);
	font-weight:900;
	padding:7px 20px;;
	margin-bottom:10px;
	min-width:300px;
	text-align: center;
}
.w1300{
	max-width:1300px;
	margin-inline:auto;
}
#job-event{
	max-width:1300px;
	margin-inline:auto;
	background-color: #FFFCE8;
	padding-bottom:30px;
}
#job #interview .more .top-bt{
	/*position:relative;
	width:220px;
	display:flex;
	flex-wrap:wrap;
	background-color: #1a2f5d;
	font-size:24px;
	font-weight:600;
	padding:0 60px 0 20px;
	line-height:60px;
	border-radius: 30px;
	transition: 0.8s;*/
	margin:0 auto;
}
.care-midashi{
	font-size:18px;
	line-height:180%;
	padding:0 20px;
}
.care-text{
	max-width:1100px;
	display:flex;
	flex-wrap:wrap;
	font-size:16px;
	line-height:150%;
	border-bottom:dotted 1px #555;
	margin-inline:auto;
}
.care-text span{
	display:inline-block;
	width:28%;
	background-color:#E5FFFF;
	font-size:18px;
	text-align:center;
	margin-right:2%;
	align-self:center;
	color:#324096;
	padding:10px 10px;
}
.care-text p{width:70%;padding:10px 0;}

/*********************
強み
*********************/

#features{
	padding:80px 10px ;
}

#features h3{
	max-width:1400px;
	margin-inline:auto;
	color:#1a2f5d;
	font-size:clamp(1.625rem, 0.931rem + 3.47vw, 3.75rem);
	font-weight:900;
	padding-bottom:30px;
}
#features h3 span{
	color:#FBD01D;
	padding-right:10px;
}
.features-flex{
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	margin-bottom:80px;
	position: relative;
}
.features-flex .img, .features-flex .text{
	width:50%;
	display:flex;
	flex-wrap:wrap;
}
.features-flex::after{
	content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
	border-bottom:1px solid #1a2f5d;
    box-sizing: border-box;
	z-index: -1;
}
.features-flex .box img{
	width:100%;
	max-width:800px;
	height:auto;
}
.features-flex .box-text{
	padding:3vw 3vw 0 3vw;
	max-width:800px;
	color:#1a2f5d;
}

.features-flex .box-text p{
	font-size:clamp(0.938rem, 0.869rem + 0.34vw, 1.125rem);
	font-weight:500;
	line-height:180%;
}

.features-flex .kara{
	flex:1;
}
.features-flex .img .kara{
	background-color: #fff;
}
@media screen and (max-width:1600px) 
{
.features-flex .kara{
	display:none;
}
}
.re{
	flex-direction: row-reverse;
}


.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}



/*****company*****************/
#company{
	padding:50px 10px;
	background: url("image/company/bg_company.webp") no-repeat center top;
}
.company-flex{
	display:flex;
	flex-wrap:wrap;
	max-width:1200px;
	margin:0 auto 80px;
}
.company-flex .img{
	width:30%;
	padding:50px;
}
.company-flex .img img{
	width:100%;
}
.company-flex .text{
	width:70%;
	padding:10px 0;
	line-height:180%;
	font-size:16px;
}
.company-flex .text .name{
	display:block;
	text-align: right;
	padding:50px 0 30px;
}
.company-flex .text .name span{
	font-size:22px;
	padding-left:10px;
}

.midashi2{
	max-width:1200px;
	margin:0 auto;
	padding:50px 10px;
}
.midashi2 h3{
	/*border-left:solid 10px #ff5144;*/
	font-size:clamp(1.5rem, 1.214rem + 1.43vw, 2.375rem);
	font-weight:900;
	padding-left:20px;
	position: relative;
	border-left:20px solid #ffff00;
}


.company-flex dt{
	width:20%;
	padding:20px 10px 20px;
	border-bottom:solid 1px #1a2f5d;
	font-weight:700;
}
.company-flex dd{
	width:80%;
	padding:20px 10px 20px;
	border-bottom:solid 1px #999;
}
.map iframe{
    width:100%;
	height:400px;
}


#data-s  {
    background-color: #f2f2f2;
    padding: 50px 10px;
}

#media{
	padding:50px 10px;
}
table.media{width:100%;max-width:1100px;margin-inline:auto;margin-bottom:50px;}
table.media {background-color:#ffffff;}
table.media td {border-style:solid;}
table.media td {border-width:1px;}
table.media td {border-color:#777777;}
table.media td.xl63 {
	padding:10px;
	background-color:#1F1F1F;
	color:#FFFFFF;
	font-size:16px;
	text-align-last:center;
}
table.media td.xl64 {
	padding:10px;
	background-color:#ffffff;
	color:#000000;
	font-size:14px;
}
table.media {
 border-collapse: collapse;
}
table.media td {
 font-family: sans-serif;
}



/*******スタッフ*************************/


#staff-s{
	padding-bottom:180px;
}

.staffbox-flex{
	max-width:1300px;
	display:flex;
	flex-wrap:wrap;
	margin:50px auto;
}
.staffbox-flex .box{
	width:50%;
}
.staffbox-flex .box img{
	width:100%;
	height:auto;
	aspect-ratio:65 /40;
	object-fit:cover;
}
.staffbox-flex .text{
	width:50%;
	padding:10px 3%;
}
.staffbox-flex .text h3{
	font-size:clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
	font-weight:900;
}
.staffbox-flex .text p{
	font-size:clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
	padding:20px 0 10px;
}
.staffbox-flex .text h4{
	font-size:clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
	color: #1a2f5d;
	font-weight:700;
}

.ffbox-text-left{
	width:70%;
	background: url("image/staff/ff_bg.webp") repeat  center / cover;
	padding:50px 0 80px 15%;
	position: relative;
	margin:50px 30% 150px 0;
}

.ffbox-title{
	font-size:clamp(1.25rem, 0.977rem + 1.36vw, 2rem);
	padding-bottom:80px;
	display: flex;
    align-items: center;
	line-height:120%;
	font-weight:900;
	color:#1a2f5d;
}
.ffbox-title span{
	font-size:clamp(3.125rem, 1.696rem + 7.14vw, 7.5rem);
	padding-right:20px;
}
.ffbox-text-left p{
	margin-right:30%;
	line-height:220%;
	max-width:650px;
	min-height:300px;
	font-size:16px;
}

.ffbox-text-left .img-right{
	position: absolute;
	left:80%;
	top:200px;
	max-height:450px;
	width:auto;
}

.ffbox-text-right{
	width:70%;
	background: url("image/staff/ff_bg.webp") repeat  center / cover;
	padding:50px 10% 80px 30px;
	position: relative;
	margin:50px 0 150px 30%;
}
.ffbox-text-right p{
	margin-left:30%;
	line-height:220%;
	max-width:650px;
	min-height:300px;
	font-size:16px;
}

.ffbox-text-right .img-left{
	position: absolute;
	right:80%;
	top:200px;
	max-height:450px;
	width:auto;
}

/*******プライバシーポリシー*************************/

#privacy{
	max-width:1100px;
	padding:80px 10px;
	margin-inline:auto;
}

#privacy h3{
	font-size:24px;
	font-weight:700;
	padding:20px 0 10px;
	border-bottom:1px solid #555;
	margin-bottom:20px;
}
#privacy p{
	padding-bottom:20px;
}

/*******会社を知る*************************/

#about{
	padding:80px 10px;
}
.about-flex{
	display:flex;
	flex-wrap:wrap;
	max-width:1200px;
	margin-inline:auto;
	gap:30px 4%;
}
.about-flex .about-box{
	width:48%;
	position:relative;
}
.about-flex .about-box a{
	display:inline-block;
	color:#fff;
	width:100%;
}
.about-box img{
	width:100%;
	height:auto;
}

.more2{
	position:absolute;
	min-width:70%;
	margin:10px auto;
	bottom:10px;
	right:10px;
}

.more2 .about-bt{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	background-color: #1a2f5d;
	font-size:clamp(1rem, 0.837rem + 0.82vw, 1.5rem);
	font-weight:600;
	padding:0 60px 0 20px;
	line-height:60px;
	border-radius: 30px;
	transition: 0.8s;
	margin-left:auto;
}
.more2 .about-bt::after{
	position: absolute;
	content: '';
	background: url("image/top/circle-ya-w.svg") no-repeat center / cover;
	width:40px;
	height:40px;
	top:calc(50% - 20px);
	right:10px;
	transition: 0.8s;
}
.more2 .about-bt:hover{
	background-color: #FBD01D;
	color:#1a2f5d;
}
.more2 .about-bt:hover::after{
	background: url("image/top/circle-ya.svg") no-repeat center / cover;
}

/*******施工実績*************************/

#works-s{
	padding:80px 10px;
	max-width:1200px;
	margin-inline:auto;
}
.works-s-flex{
	display:flex;
	flex-wrap:wrap;
	gap: 30px 2%;
}
.works-s-box{
	position:relative;
	width:32%;
	padding:0 5px;
}
.works-s-box img{
	width:100%;
	height:auto;
}

.works-s-box h3{
	font-size:18px;
	padding:10px 0;
	text-align: center;
}
.works-s-box .kind{
	position: absolute;
	display:inline-block;
	min-width:100px;
	text-align: center;
	padding:7px;
	background-color: #ffff00;
}
.works-s-waku{
	max-width:1000px;
	margin-inline:auto;
}
.works-s-waku img{
	width:100%;
	height:auto;
}
#works-s-flex{
	display:flex;
	flex-wrap:wrap;
	margin:50px 0;
	gap: 0 3%;
}
#works-s-flex .text{
	width:57%;
}
#works-s-flex .text h3{
	font-size:clamp(1.063rem, 0.858rem + 1.02vw, 1.625rem);
	padding:10px 0;
	margin:0 0 50px;
	border-bottom:1px solid #1a2f5d;
	color:#1a2f5d;
	font-weight:700;
}
#works-s-flex .text p{
	margin: 0 20px;
}

#works-s-flex .works-data{
	width:40%;
	margin-top:16px;
	color:#1a2f5d;
	font-size:15px;
}
#works-s-flex .works-data li{
	border-bottom:1px solid #aaa;
	padding:10px;
}
#works-s-flex .works-data li:nth-child(odd){
	background-color:#F3FFFF;
}
#works-s-flex .works-data li span{
	display:inline-block;
	width:100px;
}


/*******ReCRUIT*************************/

section#recruit-s{
	padding:80px 10px;
	margin-inline:auto;
	background-color: #f2f2f2;
}
section#recruit-s .recruit-flex{
	margin-bottom:30px;
	padding:20px;
	background-color: #fff;
}

section#recruit-ss{
	padding:80px 10px;
	margin-inline:auto;
}
.recruit-s-flex{
	display:flex;
	flex-wrap:wrap;
	max-width:1100px;
	margin:0 auto;
	border-top:solid 1px #999;
}
.recruit-s-flex dt{
	width:20%;
	padding:20px 10px 20px;
	border-bottom:solid 1px #999;
	font-weight:600;
	background-color: #f2f2f2;
}
.recruit-s-flex dd{
	width:80%;
	padding:20px 10px 20px;
	border-bottom:solid 1px #999;
}
/*********************************
 お問い合わせ
*********************************/

#apply{
	padding:30px 0 80px;
    
}
  
#apply-box{
    max-width:1200px;
    margin-inline:auto;
	padding:50px;
    display:flex;
    flex-wrap:wrap;
	font-size:18px;
	background-color:  #f2f2f2;
	border-radius: 20px;
}   
#apply-box .apply-box-l{
    width:35%;
    color:#171c60;
    border-bottom:1px solid #ccc;
    padding:20px 10px;
}
#apply-box .apply-box-l span{
    background-color:#DB626E;
    color:#fff;
    padding:5px 10px;
    margin-right:10px;
    border-radius: 5px;
    font-size:14px;
}
#apply-box .apply-box-l .nini{
	background-color:#999;
}
#apply-box .apply-box-r{
    width:65%;
    border-bottom:1px solid #ccc;
	padding:20px 10px;
	font-family:  'Noto Sans JP',
	"Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "BIZ UDPGothic",
    Meiryo,
    sans-serif;
}
 /* テキストフォームの設定 */
.wpcf7-datetime{
  padding: 7px;
  width: 260px;
  color: #636063;
  font-size: 13px;
  background-color:#F9F9F9;
  border:solid 1px #CCCCCC;
  }

 /* テキストフォームの設定 */
.wpcf7-text{
  padding: 7px;
  width: 100%;
  color: #636063;
  background-color:#F9F9F9;
  border:solid 1px #CCCCCC;
  }

.kazukazu input{width:30px!important;
margin-left:3px;
margin-right:3px;}
 
  /* テキストフォームのフォーカス時の設定 */
.wpcf7-text:focus{
  background-color:#FFFFCC;
  }
 
  /* テキストエリアの設定 */
.wpcf7-textarea{
  padding: 7px;
  width: 100%;
  height: 100px;
  color: #636063;
  background-color:#F9F9F9;
  border:solid 1px #CCCCCC;
  }
 
 /* テキストエリアのフォーカス時の設定 */
.wpcf7-textarea:focus{
background-color:#FFFFCC;
}
 
  /* 送信ボタンの設定 */
.wpcf7-form-control.wpcf7-submit{
display: block;
width: 260px;
border: none;
padding:20px;
background-color:#DD1F30;
color:#fff;
	border-radius:5px;
	font-size:24px;
  }
 
/* 送信ボタンのフォーカス時の設定 */
.wpcf7-form-control.wpcf7-submit:hover{
filter: alpha(opacity=80);
 opacity: .6;
 -moz-transition: all 0.7s ease;
 -webkit-transition: all 0.7s ease;
 }
 
/* リストの縦並び（チェックボックス・ラジオ） */
span.wpcf7-list-item {
display: block!important;
	margin-bottom:10px!important;
}
 
/* セレクト */
select{
padding: 5px;
width:420px;
color: #636063;
font-size: 13px;
background-color:#F9F9F9;
border:solid 1px #CCCCCC;
}
input[type=checkbox] {
	transform: scale(2);
	margin: 0 6px 0 0;
}
.apply-check{
	text-align:center;
	display:block;
	width:100%;
	margin-top:20px;
}
.wpcf7-form-control-wrap .waku {
    border: 2px solid #777;
    border-radius: 5px;
}
.center{
	text-align:center;
	display:block;
	margin:10px auto;
}
.form-small {
    width: 100px;
}

#thx{
	max-width:800px;
	margin:60px auto 80px;
	padding:10px;
	color:#000;
	font-size:20px;
	line-height:180%;
	text-align:center;
}
#thx h3{font-size:24px;padding-bottom:50px;	font-weight:700;}

/**************************************************************
ページネーション
**************************************************************/
.wp-navi{
	margin:30px auto ;
	height:50px;
	text-align:center;
}

.wp-pagenavi a, .wp-pagenavi span {
    text-decoration: none;
    border: 1px solid #BFBFBF;
	padding: 10px!important;
	margin: 2px;
}
wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color:  #1a2f5d!important;
	background-color: #1a2f5d!important;
	color:#fff!important;
}
.wp-pagenavi a, .wp-pagenavi span {
    text-decoration: none;
    border: 1px solid #afafaf!important;
	background-color:#afafaf!important;
	color:#fff!important;
}
/**************************************************************
インターンシップ
**************************************************************/

#event-s{
	padding:50px 10px;
}

.event-s-flex{
	max-width:1100px;
	display:flex;
	flex-wrap:wrap;
	margin:0 auto 50px;
	gap:20px 2%;
}
.event-s-img{
	width:49%;
}
.event-s-img img{
	width:100%;
	height:auto;
}

.event-s-box{
	width:49%;
  border-radius: 3px;
  box-shadow: 10px 10px 0px 0px rgba(207, 224, 250, 0.4);
	padding:20px;
	border:solid 1px #aaa;
}
.event-s-box1{
	width:100%;
  border-radius: 3px;
  box-shadow: 10px 10px 0px 0px rgba(207, 224, 250, 0.4);
	padding:20px;
	border:solid 1px #aaa;
}
.event-s-box h3, .event-s-box1 h3{
	font-size:20px;
	font-weight:600;
	padding-bottom:20px;
	color:#217fc4;
}
/**************************************************************
お知らせ
**************************************************************/

#news-s .news-line {
	width:100%;
    max-width: 1100px;
	margin:0 auto;
}
.news-midashi{
	max-width:1100px;
	padding:50px;
	border-radius:30px;
	border:1px solid #aaa;
	margin:50px auto 80px;
}
.news-midashi .day{
	color:#217fc4;
	padding-bottom:50px;
}
.blog-cont{
	line-height:200%;
  	overflow: hidden;
	font-size:16px;
}

.blog-cont img{
	max-width:100%;
	height:auto;
	margin:10px 0;
}

.blog-cont iframe {
  width: 100%;
  max-height: 500px;
	margin:10px auto;
}