@charset "utf-8";

/*------------------------------------------------------

	グローバル

------------------------------------------------------*/

body { min-width: 0px; font-size: 0.9em;}

.container, .container02 { width: 100%;}

.ta_right-s_center { text-align: center;}
.ta_left-s_center { text-align: center;}
.ta_center-s_left { text-align: left;}

/* ボックス */
.box50, .box30 { float: none; width: 100% !important;}

.hidden_s { display: none !important;}

/* margin */
.mb40-20 { margin-bottom: 20px !important;}
.mb60-30 { margin-bottom: 30px !important;}
.mb80-40 { margin-bottom: 40px !important;}
.mb100-50 { margin-bottom: 50px !important;}
.mb120-60 { margin-bottom: 60px !important;}
.mb160-80 { margin-bottom: 80px !important;}


/* ------------------------
	ヘッダー
------------------------ */

.header { padding-right: 65%;}
.header .left { float: none !important;}


/* ------------------------
	グローバルナビ
------------------------ */

.humberger {
	background: #000;
	cursor: pointer;
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	z-index: 10000;
}
.humberger span {
	background: #fff;
	position: absolute;
	left: 50%;
	width: 25px;
	height: 2px;
	transform: translateX(-50%);
	transition: 0.4s;
}
.humberger span:nth-of-type(1) { top: 15px;}
.humberger span:nth-of-type(2) { top: 50%; transform: translate(-50%, -50%);}
.humberger span:nth-of-type(3) { bottom: 15px;}
.is-open .humberger span:nth-of-type(1) { transform: translate(-50%, 9px) rotate(-45deg);}
.is-open .humberger span:nth-of-type(2) { opacity: 0;}
.is-open .humberger span:nth-of-type(3) { transform: translate(-50%, -9px) rotate(45deg);}
.overlay {
	background: transparent;
	position: fixed;
	pointer-events: none;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 10;
	transition: 0.2s;
}
.is-open .overlay {
	background: rgba(0, 0, 0, 0.7);
	pointer-events: auto;
}

/* ナビ本体 */
.sp-navi {
	-webkit-text-size-adjust: 100%;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
}
.sp-navi.is-open .sp-navi-inner { transform: translate3d(0, 0, 0);}
.sp-navi .sp-navi-inner {
	background: #fff;
	position: fixed;
	top: 0;
	right: 0;
	overflow: scroll;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 50px 0 0px;
	height: 100%;
	width: 270px;
	transition: .5s;
	transform: translate3d(100%, 0, 0);
	z-index: 10;
}
.sp-navi .sp-navi-inner .navi-main > li {
	border-bottom: 1px solid #ddd;
	position: relative;
}
.sp-navi .sp-navi-inner .navi-main > li:before {
	background: #000;
	content: "";
	height: 3px;
	width: 8px;
	position: absolute;
	left: 10px;
	top: 23px;
}
.sp-navi .sp-navi-inner .navi-main > li:first-child { border-top: 1px solid #ddd;}
.sp-navi .sp-navi-inner .navi-main > li > a {
	display: block;
	font-weight: 500;
	letter-spacing: 2.5px;
	padding: 15px 10px 15px 30px;
	overflow: hidden;
	line-height: 1.3em;
	text-decoration: none;
}
.sp-navi .sp-navi-inner .navi-main > li > ul > li { border-top: 1px dashed #ddd; width: 100%;}
.sp-navi .sp-navi-inner .navi-main > li > ul > li > a {
	display: block;
	font-size: 14px;
	line-height: 1.3em;
	padding: 15px 10px 15px 50px;
	position: relative;
	text-decoration: none;
}
.sp-navi .sp-navi-inner .navi-main > li > ul > li > a:before {
	background: #000;
	content: "";
	height: 1px;
	width: 10px;
	position: absolute;
	left: 26px;
	top: 50%;
}
.sp_tel { padding: 20px 50px 0px 15px;}


/* ------------------------
	フッター
------------------------ */

.footer_contact li { margin: 0px 1%;}
.footer_contact li:first-child { width: 34%; margin-bottom: 20px;}

.footer_nav li:before { letter-spacing: 0.1em;}
.footer_nav li:last-child:after { letter-spacing: 0.1em;}

.footer .back_black h2 { padding: 0px 25%;}

@media only screen and (max-width: 640px) {	
	.footer_contact li:last-child { font-size: 2.5vw; text-align: center;}
	
	.footer .back_black .fo09 { font-size: 0.85em !important;}
	.footer .back_black .show_sp { display: inline;}
}

@media only screen and (max-width: 480px) {	
	.footer_contact li:first-child { display: block; width: 100%; margin: 0px 0px 15px; padding: 0px 20% 15px}
	.footer_contact li:last-child { display: block; width: 100%; font-size: 0.9em;}
	.footer_contact li:last-child p:not(:nth-child(2)) { padding: 0px 17%;}
}


/*------------------------------------------------------

	トップページ

------------------------------------------------------*/

.top_sec02 { padding: 80px 15px 60px;}
.top_sec02 h2 { padding: 0px 15%;}
.top_sec02 a { width: 90%;}

.top_bnr, .top_bnr li { display: block; width: 100%;}
.top_bnr li { height: auto; background-size: cover !important;}
.top_bnr li:hover { background-size: cover !important;}
.top_bnr a { padding: 80px 25%;}

@media only screen and (max-width: 640px) {	
	.top_sec01 h2 { letter-spacing: 1px;}
	.top_sec01 .show_sp { display: inline;}

	.top_sec01-01 li { width: 48%;}
	
	.top_sec03 ul { display: block;}
	.top_sec03 li { width: 100%; margin: 0px 0px 20px;}
	.top_sec03 .box { max-width: 320px; margin: auto;}
}

@media only screen and (max-width: 480px) {
	.top_sec01 h2.fo15 { font-size: 1.3em !important;}
}


/*------------------------------------------------------

	下層ページ

------------------------------------------------------*/

.more_btn a { min-width: 200px; max-width: 320px; width: 100%;}
.more_btn a:after { background-size: 100% 100%; width: 8px; height: 15px;}

.pagettl { padding: 30px 0px;}
.pagettl .fo_abel { font-size: 0.9em; letter-spacing: 0.3em;}


@media only screen and (max-width: 640px) {
	.sp_listlayout, .sp_listlayout tbody, .sp_listlayout tr, .sp_listlayout th, .sp_listlayout td { display: block; width: 100%; border-bottom: none;}
	.sp_listlayout { border-bottom: solid 1px #00499d;}
}


/* ------------------------
	company
------------------------ */

.com_sec01 { background: #fafafa; padding: 50px 0px;}
.com_sec01 .box { width: 100%;}
.com_sec01 h3 { font-size: 4em;}
.com_sec01 .text01 { font-size: 1.5em; letter-spacing: 0.1em;}
.com_sec01 .img { padding-top: 30px;}

.com_sec04 section { width: 48%;}

@media only screen and (max-width: 640px) {
	.com_sec03 table th { width: 6.5em; padding-right: 1em;}

	.com_sec04 section { float: none !important; width: 100%;}
}

@media only screen and (max-width: 480px) {
	.com_sec01 h3 { font-size: 13vw;}
	.com_sec01 .text01 { font-size: 4.8vw; letter-spacing: 0.05em;}
}


/* ------------------------
	business
------------------------ */

.bus_sec01 { padding: 60px 0px;}
.bus_sec01 figcaption { font-size: 1.2em; letter-spacing: 0px;}

.bus_sec02 section { margin-bottom: 60px;}
.bus_sec02 .left { width: 37%;}
.bus_sec02 .right { width: 60%;}
.bus_sec02 h4 { background-size: 30px 30px; border-bottom: dashed 3px #000; font-size: 2.2em; padding: 0px 0px 7px 40px;}

.bus_sec03 { padding: 60px 0px 20px;}
.bus_sec03 ul { justify-content: flex-start; margin: auto -1.5%;}
.bus_sec03 li { margin: 0px 1.5% 40px; width: 30.3333%;}

@media only screen and (max-width: 640px) {
	.bus_sec01 ul { flex-wrap: wrap; justify-content: space-around;}
	.bus_sec01 li { margin-bottom: 20px;}
	.bus_sec01 li:nth-child(odd) { width: 47%;}
	.bus_sec01 li:nth-child(even) { display: none;}
	
	.bus_sec02 .left, .bus_sec02 .right { float: none; width: 100%;}
	.bus_sec02 h4 { background-size: 25px 25px; border-bottom: dashed 2px #000; font-size: 1.8em; padding: 0px 0px 7px 35px;}
	
	.bus_sec03 li { width: 47%;}
	.bus_sec03 li .fo14 { font-size: 1.2em !important;}
}

@media only screen and (max-width: 480px) {
	.bus_sec01 { padding-bottom: 20px;}
	.bus_sec01 .text01 { font-size: 4.5vw;}
}


/* ------------------------
	recruit
------------------------ */

.rec_sec01 { background-image: url("../images/recruit/rec_sec01_bg_sp.jpg"); height: auto; padding: 60px 0px 300px;}
.rec_sec01 h3 { padding: 0px 3%;}
.rec_sec01 .text01 { font-size: 1.4em;}

.rec_sec02 li p:after { width: 10px; height: 15px;}

.rec_sec03 h4 { padding-right: 20%;}
.rec_sec03 section:last-child h4 { padding-right: 30%;}
.rec_sec03 section.mb50 { margin-bottom: 80px !important;}

.rec_sec05 .btn_area { margin-bottom: 80px;}
.rec_sec05 .btn_area a:after { background-size: 100% 100%; width: 8px; height: 17px;}

@media only screen and (max-width: 640px) {
	.rec_sec01 .text01 { font-size: 3vw; line-height: 1.8;}
	.rec_sec01 .text01 .show_sp { display: inline;}

	.rec_sec02 li { width: 47%; margin-bottom: 20px;}

	.rec_sec04 li { width: 48%;}
	
	.rec_sec05 table .hidden_l { display: none;}
}

@media only screen and (max-width: 480px) {
	.rec_sec01 .text01 { font-size: 4vw;}

	.rec_sec02 ul { display: block; margin: auto;}
	.rec_sec02 li { width: 100%; max-width: 310px; margin: auto; margin-bottom: 20px;}
	
	.rec_sec04 { display: block;}
	.rec_sec04 li { width: 100%; max-width: 310px; margin: 0px auto 40px;}
}


/* ------------------------
	interview
------------------------ */

.int_sec section .box_inner { width: 67%;}
.int_sec section figure { width: 30%;}
.int_sec section h4 { line-height: 1.6;}

@media only screen and (max-width: 640px) {
	.int_sec .int_head .num { width: 50px; top: -60px;}
	.int_sec .int_head .text01 .pos_ab { width: 70px;}
	.int_sec .int_head .text01 .show_sp { display: inline;}
	.int_sec .int_head h3 { font-size: 1.8em;}
	
	.int_sec.mb120-60 { margin-bottom: 100px !important;}
	.int_sec section .box_inner, .int_sec section figure { float: none !important; width: 100%;}
	.int_sec section h4 .show_sp { display: inline;}
}

@media only screen and (max-width: 480px) {
	.int_sec .int_head h3 { font-size: 1.6em;}
	.int_sec section h4 { font-size: 1.5em; letter-spacing: 0px;}
}


/* ------------------------
	contact
------------------------ */

.contact_sec01 h3 { font-size: 1.5em; letter-spacing: 0.1em;}
.contact_sec01 li { width: 36%;}
.contact_sec01 li:last-child { width: 55%;}

.contact_sec02 { padding: 60px 0px;}
.contact_sec02 h3 { padding: 0px 15%;}

.contact_box input[type="submit"] { width: 100%; max-width: 600px;}

@media only screen and (max-width: 480px) {
	.contact_sec01 h3 .show_sp { display: inline;}
	
	.contact_box input[type="submit"] { background-size: 8px 17px; font-size: 1.4em;}
}


/* ------------------------
	blog
------------------------ */

/* single */
.blog_single header h1 { font-size: 1.5em; padding-left: 55px; padding-bottom: 8px;}
.blog_single header h1:before { width: 45px; height: 35px;}

.blog_content h1 { font-size: 1.4em;}
.blog_content h2 { font-size: 1.3em;}

/*WP用 投稿表示*/
img.aligncenter, img.alignright, img.alignleft {
	display: block;
	margin: 0px auto 20px;
}
.alignright, .alignleft { float: none;}

.pagination .number { position: static; margin-right: 15px;}

.pagination span.current, .pagination a { min-width: 30px; height: 30px; line-height: 30px;}

@media only screen and (max-width: 640px) {
	.pager li { position: static !important;}
	.pager li a { font-size: 0.8em;}
}


/* ------------------------
	事例一覧
------------------------ */

/* アーカイブ */
.product_archive article, .product_archive article .box { display: block; width: 100% !important;}
.product_archive article figure.box { padding-left: 0px; padding-top: 20px;}
.product_archive article figure.box img { max-width: 100%; width: auto;}
.product_archive article div.mb25 { margin-bottom: 0px !important;}
.product_archive article .more_btn { text-align: center; margin-top: 25px;}