/* ▼ スマホ(767px以下)の場合 */ 
@media screen and (max-width: 767px) {

/* リセット
================================================== */
.pc_no{display:block !important;}
.sp_no{display:none !important;}

/* フォント・文字装飾
================================================== */
.fs_20{font-size:18px}
.fs_24{font-size:18px}
.fs_30{font-size:24px}
.fs_34{font-size:24px}

.vertical_title{letter-spacing: 0.1em;}

/* レイアウト
================================================== */
.sp_w88{width:88%; margin-right:auto; margin-left:auto;}
.fl_right, .fl_left{float: none;}

.flex_wp{display:block;}
.flex_wrp_sp{flex-wrap: wrap;}

@media screen and (max-width: 459px) {
	.flex_wp_spmd{display:block;}
}
.txt_center{text-align:left;}

.box_w25, .box_w30, .box_w35, .box_w40, .box_w45, .box_w48, .box_w50, .box_w55, .box_w60, .box_w65, .box_w70{width:100%}

.br_right{border-radius: 0 20px 20px 0;}
.br_left{border-radius: 20px 0 0 20px;}
.br_all,
.br_all_side{border-radius: 20px}
.br_all_side{border-radius: 0 20px 20px 0}

/* SP用
================================================== */
.mt15, .mt20, .mt30, .mt50, .mt70{margin-top:0}
.mb70{margin-bottom:0}
.pt50, .pt70, .pt100{padding-top:0}
.pb20, .pb50, .pb70, .pb100{padding-bottom:0}

.ptb70{padding:30px 0}
.ptb80{padding:50px 0}	
.ptb100{padding:70px 0}

.spmt15{margin-top:15px}
.spmt20{margin-top:20px}
.spmt30{margin-top:30px}
.spmt40{margin-top:40px}
	
.spmb20{margin-bottom:20px}
.spmb30{margin-bottom:30px}
.spmb40{margin-bottom:40px}

.sppt15{padding-top:15px}
.sppt30{padding-top:30px}
.sppt50{padding-top:50px}
.sppt70{padding-top:70px}

.sppb10{padding-bottom:10px}
.sppb30{padding-bottom:30px}
.sppb50{padding-bottom:50px}
	
/* 全体
================================================== */
body {
	font-weight: 400;
	line-height: 2.0em;
}
/* レイアウト
================================================== */
.contents_w87{width:90%;}
/* リンクボタン
================================================== */
.linkbtn_wp{
	margin:25px auto 20px;
}
.linkbtn_right{
	margin:40px auto 20px;
	text-align:center;
}
/* 白ボタン */	
a.bs_btn{
	padding:1.4em 4.3em 1.4em 3em;
	background : url("images/arrow.png") #fff no-repeat right 1.8em center;
	background-size: 20px auto;
	font-size:14px;
}
a.bs_btn:hover{
	background : url("images/arrow_wt.png") #333 no-repeat right 1.8em center;
	background-size: 20px auto;
}
a.bs_btn span{padding-right:1.5em;}
	
/* 黒ボタン */	
a.bk_btn{
	padding:1.4em 4.3em 1.4em 3em;
	background : url("images/arrow_wt.png") #333 no-repeat right 1.8em center;
	background-size: 20px auto;
	font-size:14px;
}
a.bk_btn:hover{
	background : url("images/arrow_wt.png") #000 no-repeat right 1.8em center;
	background-size: 20px auto;
}
a.bk_btn span{padding-right:1.5em;}

/* 黒ボタン-小 */
a.bk_btn_s{
	padding:1.4em 4.3em 1.4em 3em;
	background : url("images/arrow_wt.png") #333 no-repeat right 1.8em center;
	background-size: 20px auto;
	font-size:14px;
}
a.bk_btn_s:hover{
	background : url("images/arrow_wt.png") #000 no-repeat right 1.8em center;
	background-size: 20px auto;
}
/* ヘッダー
================================================== */
.sp_navi{display:block;}
.pc_navi {display:none}
#header_bk{padding:0 0 15px;}	
.header_wp{
	width:100%;
	display:block;
}
.header_logo{width:150px; float:left; padding:25px 23px 0}	
.sp_navi nav{
	display:none;
	position: absolute;
	top:0;
	width: 100%;
	height: 100vh;
	background:rgba(51,51,51,0.95); 
	left: 0;
	z-index: 1000;
}
.sp_navi nav .sp_naviwp{
	display: block;
	width: 85%;
	height: 550px;
	position: absolute;
	top: 90px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	margin: auto;
}
	ul.sp_navimenu{
		max-width:285px;
		margin:0 auto;
	}
ul.sp_navimenu li{
	margin: 0 auto;
	text-align: left;
}

ul.sp_navimenu li.navi_list a{
	display:block;
	background : url("images/sp_line_white.png") no-repeat left bottom 25px;
	letter-spacing:0.07em;
	padding:15px 0 15px 30px;
	font-size: 12px;
	color:#fff!important;
}
ul.sp_navimenu li.navi_list a span{
	font-size:20px;
	margin-right:13px;
	color:#ccc;
	}
ul.sp_navimenu li.navi_btn{margin-top:30px}
ul.sp_navimenu li.navi_btn a{
	background: linear-gradient(45deg, #8d9093, #b49d58);
	background-image: url("images/mail_wt.png"), linear-gradient(45deg, #8d9093, #b49d58);
	background-repeat: no-repeat;
	background-position: left 2.2em center, center;
	background-size: 20px auto, cover;
	padding:1.5em 2.5em 1.5em 5em;
	color:#fff;
	border-radius:50px;	
	font-size:13px;
}
ul.sp_navimenu li.navi_btn a span{
	font-size:20px;
	margin-right:13px;	
}
#nav_toggle{
	display: block;
	width: 35px;
	height: 35px;
	position: relative;
	top: 18px;
	float:right;
	margin-right:25px;
	z-index: 9999;
	text-align:center;
}
#nav_toggle p{
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	color:#333;
	font-size: 11px;
	letter-spacing:0.05em;
}
#nav_toggle div {
	position: relative;
}
#nav_toggle span{
	display: block;
	height: 3px;
	background:#333;
	position:absolute;
	width: 100%;
	left: 0;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;	
}
#nav_toggle span:nth-child(1){
	top:0px;
}
#nav_toggle span:nth-child(2){
	top:10px;
}
#nav_toggle span:nth-child(3){
	top:20px;
}
.open #nav_toggle span{
	background: #fff;
}
.open #nav_toggle span:nth-child(1) {
	top: 12px;
   -webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	transform: rotate(135deg);
}
.open #nav_toggle span:nth-child(2) {
	width: 0;
	left: 50%;
}
.open #nav_toggle span:nth-child(3) {
	top: 12px;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
.open #nav_toggle p{color:#fff;font-size: 12px; letter-spacing:0.05em;}

.top_catch{
	clear:both;
	width:100%;
	margin:0 auto;
	padding-top:35px;
	padding-left:6%;
}
.js-split span {font-size:30px;}
@media screen and (max-width: 350px) {
	.js-split span {font-size:28px;}
	}
/* TOPスライダー
================================================== */
#viewer_wp{
	padding-bottom:50px;
}
.slider_msg{
	left:5%;
	top:-5px;
	min-width:230px;
	padding:5px 25px 40px 0;
	border-radius:0 0 50px 0;
}
.slider_msg p.slider_title{
	font-size:20px;
	line-height:1.9em;
	margin-bottom:0;
	text-indent: -0.5em;
  	padding-left: 0.5em;
}
/* 伸びるライン */
.line-animation{
	top:90px;	
	width:calc(5% + 190px);
}
.sliderwp{width: 80%;}
.fadeslider li{	height: 400px;}
.fadeslider img.slider_img{	border-radius:0 0 0 5px;}
.slider_sideimg{
	width:18%;
	top:250px;
	left:0;
}
.slider_sideimg img{
	width:100%;
	height: 230px;
	object-fit: cover;	
	border-radius:0 5px 5px 0;
}
@media screen and (max-width: 498px) {
	.fadeslider li{	height: 350px;}
	.slider_sideimg img{height: 170px;}
	}
/* TOPページ
================================================== */
.top_concept_bk{
	padding:50px 0 30px;
}
.top_concept_text{
	width:88%;
	margin: 0 auto;
	padding-left:0;
	padding-top:0;
}
.top_concept_title{
	display:block;
	margin-bottom:25px;
}
.tcp_tl{width:100%; padding:0; text-align:center}
.tcp_img{
	position:static;
	width:65%;
	max-width:270px;
	margin:0 auto 15px;
	}
.tcp_tl h2{font-size:23px;}
.top_concept_text h3{
	font-size:16px;
	margin-bottom:20px;
}
.top_concept_img{
	width:90%;
	max-width:600px;
	margin:25px auto;
}
.top_concept_img ul li.tpcon_img01{width:30%; padding-top:100px;}
.top_concept_img ul li.tpcon_img02{width:65%;}	
.top_concept_img ul li.tpcon_img01 img{
	width:100%;
	height:170px;
	object-fit: cover;
	border-radius:5px;
}
.top_concept_img ul li.tpcon_img02 img{
	width:100%;
	height:200px;
	object-fit: cover;
	border-radius:5px;
}	

h2.main_title{font-weight:500;}
h2.main_title span{font-size:36px;}
.top_service_bk{
 	padding:50px 0 70px;
}
ul.top_svs-list li{
	width: 45%;
	margin:0 2.5% 60px;
}	
@media screen and (max-width: 498px) {
	.top_service_bk{
 	background: -moz-linear-gradient(top, #8b7b4b 15%, #eeeeee 15%, #eeeeee 100%);
  	background: -webkit-linear-gradient(top, #8b7b4b 15%, #eeeeee 15%, #eeeeee 100%);
  	background: linear-gradient(to bottom, #8b7b4b 15%, #eeeeee 15%, #eeeeee 100%);	
	}	
	ul.top_svs-list{
		display:block;
		margin:25px auto 50px;
	}
	ul.top_svs-list li{
		width: 95%;
		margin:0 auto 35px;
		background:#fff;
		border-radius:5px;		
	}
	ul.top_svs-list li img{
		width:100%;
		height:180px;
		object-fit: cover;
		border-radius:5px 5px 0 0;
		margin-bottom:15px;
	}
	ul.top_svs-list li .sp_tpsvs_pd{padding:0 15px 25px}
	ul.top_svs-list li h3{margin-bottom:0.5em;}
	ul.top_svs-list li p{font-size:14px;}
}

.top_btb_bk{
	background:url("images/top/contractor_img_sp.jpg") #eee no-repeat top center;
	background-size:100% auto;
	padding:38% 0 20px;
}
.top_btb_wp{
	width:93%;
	padding:40px 25px 50px;
	border-radius:5px;
}
h2.btbc_tl{
	font-size:20px;
}
h2.btbc_tl::after {
  width: 20%;
  height: 2px;
  margin-top: 13px;
}
h2.btbc_tl span{
	font-size:12px;
	font-weight:500;
	padding:1em 1em 0.5em;
	border-radius:3px 3px 0 0;
}
p.btbc_tl_en{
	font-size:15px;
}
.top_btb_text p{margin-bottom:1em;}
	
.top_btc_bk{
	padding:20px 0 40px;
}
.top_btc_wp{
	width:93%;
	padding:40px 25px 50px;
	border-radius:5px;
}
.top_btc_text{margin-top:30px;}
ul.top_psn_list{margin-top:20px;}
ul.top_psn_list li{font-size:14px; font-weight:500; line-height:1.9em;}
.top_example{
	width:100%;
	background:url("images/top/example_bk.jpg") no-repeat center;
	background-size:cover;
	padding:50px 0 50px;
}
ul.top_exlist{
	margin:30px auto;
}
ul.top_exlist li{
	width:49%;
	padding:0.5em;
	font-weight: 400;
	font-size:14px;
	margin-bottom:0.7em;
}
/* 固定ページ　タイトル
================================================== */
.page_title_bk{
	clear:both;
	width:100%;
	margin:0 auto;
	padding:30px 0 0 5%;
	position:relative;
}
.page_title_bk img.svs_title_img{
	height: 180px;
}
.page_title{
	position:absolute;
	left:5%;
	bottom:0;
	min-width:200px;
	padding:30px 45px 0 1.5%;
	border-radius:0 50px 0 0;
}
.page_title p.en_tl{font-size:38px; margin-bottom:0.3em}
.page_title p.en_rstl{font-size:34px; margin-bottom:0.3em; letter-spacing:0;}
.page_title h2{font-size:14px}
/* サービス
================================================== */
.page_head_msg{
	width:85%;
	padding:40px 0 20px;
}
.phm_title{width:100%; margin-bottom:20px;}
.phm_text{width:100%;}
.phm_title h1{font-size:24px; line-height:1.6em;}

.page_svs_wp{
	display:block;
	margin:15px auto 0;
	padding-bottom:0;	
}
.page_svs_inner{
	width:100%;
	padding:30px 20px 25px 50px;
	margin-bottom:40px;
}
.svsen_title{
	position:absolute;
	left:7px;
	top:-10px;
}
p.line_entl{font-size:12px;}
.svs_main h2{font-size:18px;}
.svs_exin{
	margin-top:20px;
	display:block;
}
.svs_exin_list{width:100%;}
.svs_exin_list ul li{
	font-size:13px;
	margin-bottom:0.4em;
}
.svs_exin_img{width:100%;}
.svs_exin_img img{
	width:100%;
	height: 170px;
	object-fit: cover;
	border-radius:5px;	
}
.pgwk_title{padding:50px 0 40px;}
.pgwk_title h3{
	font-size: 18px;
	padding: 0.5em 2em 0;
	background-image: url("images/bk_l.png"), url("images/bk_r.png");
	background-size:20px auto, 20px auto;
	margin-top:20px;
	margin-bottom:20px;
}
.pgwk_title p{text-align:left; padding:0 7px}
.page_svswk_wp{
	width:88%;
	margin:10px auto 0;
}	
.pgwk_inner{
	padding:40px 15px 20px;
	margin-bottom:45px;
}
.pgwk_inner img.pgwk_icon{
	width:100px;
	top:-23px;
}
@media screen and (max-width: 598px) {
	.pgwk_inner{
		width:100%;
		padding:40px 20px 20px;
		margin-bottom:60px;
	}
	.pgwk_inner img.pgwk_icon{
		width:120px;
		top:-28px;
	}
}
.pgwk_inner h3{
	font-size:16px;
	padding-bottom:0.7em;
	margin-bottom:1em;
}
.pgwk_inner ul li{
	font-size:14px;
	line-height:1.8em;
	margin-bottom:0.3em;
	margin-left:25px;
}
.svs_bts_bk{
	width:100%;
	background:url("images/service/bts_bkimg.jpg") #eee no-repeat left top;
	background-size:200px auto;
	padding:130px 0 50px;
}
.svs_bts_title{
	width:88%;
	margin:0 auto;
	padding-left:0;
}
.svs_bts_title ul{margin-top:15px;}
.svs_bts_title ul li{
	padding:0.3em 1em;
	border-radius:3px;
	font-size:13px;
	margin-right:10px;
	margin-bottom:7px;
}
.svs_bts_wp{
	width:88%;
	margin:10px auto 0;
	display:block;
}
.svs_bts_text{
	width:100%;
	padding-top:20px;
	padding-left:0;
}
.svs_bts_img{width:100%;}
.svs_bts_img img{border-radius:7px}
ul.page_btb_list{padding-bottom:10px}
ul.page_btb_list li{
	background:url("images/check.png") no-repeat left top 0.5em;
	background-size:20px auto;
	padding-left:30px;
	margin-bottom:1em;
	font-size:14px;
	font-weight:500;
	line-height:1.9em;
}
/* 会社概要
================================================== */
.abmsg_text{width:100%;}
h2.about_subtl{
	font-size:28px;
	margin-bottom:25px;
}
.abmsg_img{width:70%; margin:25px auto 0; max-width:250px;}
.about_wp{padding:20px 0 40px}
.about_img{width:90%;}
.about_img img{
	width:100%;
	height: 200px;
	object-fit: cover;
	border-radius:0 10px 10px 0;
}
.about_info{
	width:85%;
	margin:0 auto;
	padding:50px 0 0;
}
dl.company_list{
	width: 100%;
	margin:20px auto 0;
}
dl.company_list dt{
	width: 100%;
	float: none;
	padding:15px 5px 0;
	font-size:14px;
	font-weight:600;
}
dl.company_list dd{
	padding: 5px 5px 15px 5px;
	letter-spacing:0;
}


/* お問い合わせフォーム
================================================== */
.contact_wp{
	width:85%;
	margin:0 auto;
	padding:50px 0 50px;
	text-align:left;
}
table.contact-form{
	margin: 40px auto 30px;
}
table.contact-form th, table.contact-form td{
	font-size:15px;
}
table.contact-form th{padding: 15px 2px 7px;}
table.contact-form td{padding: 0 2px 15px;}
table.contact-form input,
table.contact-form textarea{
  	padding: 1em 0.8em;
	font-size:15px;
}
table.contact-form input[name="zipcode1"]{width:70px; padding: 0.7em 1em; margin:0 0.3em}
table.contact-form input[name="zipcode2"]{width:80px; padding: 0.7em 1em; margin:0 0.7em 0 0.3em}

.input_items{
	font-size: 12px;
	padding:0.5em 0.5em 0.5em 0.7em;
	letter-spacing:0.3em;
}
	.policy_check{width:100%}
.policy_check p.send_info{text-align:left; margin-bottom:1.8em}
.policy_check input[type=checkbox] {
  width: 20px;
  height: 20px;
}
.policy_check .wpcf7-list-item-label::before {
  width: 20px;
  height: 20px;
  left: -2.2em;
}
.policy_check .wpcf7-list-item-label::after {
  width: 22px;
  height: 22px;
  left: -2.2em;
}
a.policy_link {
	margin-left: 5px;
	background : url("images/link_icon.png") no-repeat right 0.5em center;
	background-size:16px;
	padding-right:30px;
}
.wpcf7-submit{
	width:250px;	
	padding:13px 40px 15px 15px;
	font-size:18px;
}

.thanks_info{
	width:87%;
	margin:0 auto;
	padding:30px 0 100px;
}
.thanks_info h3{font-size:23px; margin-bottom:1.2em;}
.thanks_info p{
	text-align:left;
	font-size:14px;
}
/* プライバシーポリシー
================================================== */
.policy_wp{
	width:88%;
	padding:50px 0 40px;
}
.policy_wp h3{
	font-size:15px;
	font-weight:600;
	margin:2.5em 0 0.5em;
}
.policy_wp p{
	padding:0 0.5em;
	margin-bottom:1em;
	font-weight:400;
}
/* フッター
================================================== */
.footer_bk{
	padding:40px 0 30px;
}
	#footer_wp{padding:30px 0 10px}
.footer_inner{
	width:90%;
	display:block;
}
.ft_about{width:100%; padding:0 0 10px; border-bottom:1px dotted #999;}
.ft_about h2 img{
	width:60%;
	max-width:150px;
	height:auto;
	margin-bottom:0.3em;
}
.ft_about p.add{font-size:13px; font-weight:400;}
ul.ft_navi{margin-top:0.5em; border-top:1px dotted #999; padding-top:20px}
ul.ft_navi li{
	display:inline-block;
	margin:0 10px 5px;
}
ul.ft_navi li a{font-size:14px; font-weight:500;}
.ft_contact{width:100%; padding:10px 0 20px;}
.ft_contact_tlwp{padding-left:0}
p.ft_contact_tl{font-size:26px; margin-bottom:0.2em;}
.ft_contact h3{font-size:13px;}
	
.ft_mail{width:100%;}
.ft_mail a{
	font-size:14px;
	font-weight:500;
}
	.ft_tel{width:220px; padding-left:0.7em}
.ft_tel p{
	background : url("images/footer/tel.png") no-repeat left top 0.15em;
	background-size:25px auto;
	padding:0 0 5px 0;
	font-size:28px;
}
.ft_sns{
	width:100%;
	border-left:none;
	border-top:1px dotted #999;
	padding-top:20px
}
ul.ft_sns_list{margin-top:1em}
ul.ft_sns_list li{
	width:28px;
	display:inline-block;
	margin:10px 15px;
}
.ft_copy{
	font-size:10px;
}

.no-page{
	padding:100px 0;
}
.no-page p{
	font-size:15px;
}

}