@charset "utf-8";

/*********************
 window resize 767px
*********************/
@media screen and (max-width: 767px) {

	/*********************
	 sub_top
	*********************/
	#sub_top #top_image{
		height: auto;
		width:100%;
	}
	#sub_top #top_image_blog{
		margin-top:0;
		height: auto;
		width:100%;
	}
	#sub_top .imgBox img{
		width: 65vw;
		max-width: 65%;
	}
	#sub_top h1 font{
		font-size:1.2em;
		line-height:2em;
	}
	/*********************
	 reform
	*********************/
	#reform article{
		padding:120px 15px 0px;
	}
	#reform article .box_s:before {
		position: absolute;
		content: "";
		width: 2px;
		height: calc( 100% - 30px);
		background-color:#d3d3d3;
		left:14px;
		top: 30px;
	}
	#reform article .box:before {
		position: absolute;
		content: "";
		width: 2px;
		height: 100%;
		background-color:#d3d3d3;
		left:14px;
		top: 0;
	}
	#reform article .box_e:before {
		position: absolute;
		content: "";
		width: 2px;
		height: 30px;
		background-color:#d3d3d3;
		left:14px;
		top: 0;
	}
	#reform article .image{
		width:130px;
	}
	#reform article .num{
		width:30px;
	}
	#reform article .icon{
		width:75px;
		margin:0 5px 0 10px;
	}

	#reform article .text{
		font-size:0.9em;
		width:calc(100% - 130px);
	}
	/*********************
	 about
	*********************/
	#about article h2{
		padding:50px 0 50px;
	}
	#about article .box{
		display:block;
	}
	#about article .box p{
		text-align:center;
	}
	#about article .box img.logo{
		margin-right:0;
		margin-bottom:30px;
	}
	#about article .box .center{
		text-align:left;
	}

	/*********************
	 about/worker
	*********************/
	article .worker,
	article .worker div{
		display:block;
		margin-left:0;
	}
	article .worker .image{
		margin-right:0;
		text-align:center;
	}
	article .worker h1{
		text-align:center;
		margin:10px 0 10px 0;
	}
	article .worker p{
		display:none;
	}


	/*********************
	 Q&A
	*********************/
	#qa #detail h1{
		font-size: 1.6em;
		padding: 60px 0 40px;
	}
	#qa #detail .qa_box p{
		padding:15px 40px 15px 20px;
		font-weight:normal;
		letter-spacing: .2em;
		position: relative;
		background:#fff;
		cursor:pointer;
	}
	#qa #detail .qa_box p:after,
	#qa #detail .qa_box p.active:after{
		right:10px;
	}
	#qa #detail .qa_box .content{
		padding:20px 20px;
		display: none;
	}

	/*********************
	 blog
	*********************/
	#blog .pageNum{
		padding:0 15px 15px;
		display: inline-block;
		width: 100%;
		text-align: center;
	}
	#blog .formlink{
		text-align:center;
		margin-bottom:15px;
	}
	#blog .blogList{
		margin:0;
		padding-left:15px;
	}
	#blog .blogList a{
		width:calc((100% / 2) - 15px);
		margin:15px 15px 35px 0;
	}
	/* ページング */
	#blog .pager{
		margin:30px 0 0;
	}
	#blog .pager li{
		border-top:1px solid #bebebe;
		border-bottom:1px solid #bebebe;
		width:50%;
	}
	#blog .pager li a{
		border:0;
		padding:20px 0;
		color: #666;
		text-align:center;
	}
	#blog .pager li a.none{
		color: #dedede;
	}
	#blog .pager li:first-child a{
		margin-right:0;
	}
	#blog .pager li:last-child a{
		margin-left:0;
	}
	#blog .pager li a.none:hover{
		color: #dedede;
		background:#fff;
	}
	#blog .pager li.left a:first-child{
		width:25%;
		border-right:1px solid #bebebe;
	}
	#blog .pager li.right a:last-child{
		width:25%;
		border-left:1px solid #bebebe;
	}
	#blog .pager li.left a:last-child span{
		border-right:1px solid #bebebe;
		width:100%;
		display:block;
	}
	#blog .pager li.left a:last-child,
	#blog .pager li.right a:first-child{
		width:75%;
	}

	/*********************
	 blog_page
	*********************/
	#blog_page .blogTitle{
		padding:30px 15px 20px;
		display: inline-block;
	}
	#blog_page .blogTitle .time{
		margin-bottom:4px;
	}
	#blog_page .pager div{
		margin:50px 15px 0;
	}
	#blog_page .pager a{
		padding:8px 13px;
		font-size:0.9em;
	}
	#blog_page .blogBody{
		padding:30px 15px 50px;
	}

	/* ページング */
	#blog_page .pager{
		margin:0;
	}
	#blog_page .pager li{
		border-bottom:1px solid #bebebe;
		width:50%;
	}
	#blog_page .pager li:first-child,
	#blog_page .pager li:last-child{
		width:25%;
	}
	#blog_page .pager li a{
		border:0;
		padding:20px 0;
		color: #666;
		text-align:center;
		display:block !important;
	}
	#blog_page .pager li a span{
		border-left:1px solid #bebebe;
		border-right:1px solid #bebebe;
		width:100%;
		display:block;
	}
	#blog_page .pager li a.none{
		color: #dedede;
	}
	#blog_page .pager li a.none:hover{
		color: #dedede;
		background:#fff;
	}
}