/* 2015.01.05 R.Yoshikawa */
@charset "utf-8";

@media (max-width: 768px) {

	/**-----------------------------------------------
	基本
	-----------------------------------------------**/
	html {
		font-size:13px;
	}
	.sp {
		display:block;
	}
	.pc {
		display:none;
	}
	img {
		max-width:100%;
		height:auto;
	}


	/**-----------------------------------------------
	汎用
	-----------------------------------------------**/
	/* ボタン */
	.btn a {
		display:block;
		width:auto;
		padding:10px;
	}

	/**-----------------------------------------------
	ヘッダー
	-----------------------------------------------**/
	#header {
		position:fixed;
		top:0;
		left:0;
		right:0;
		z-index:99;
		padding:0;
		margin:0;
		box-shadow:0 0px 30px -10px rgb(0,0,0,0.1);
	}
	#header .inner {
		padding:0 20px;
		height:60px;
	}
	#header .logo img {
		width:140px;
		height:auto;
	}
	#header .menu {
		display:block;
		border:none;
		width: 312px;
		height: 100vh;
		transition: all 0.2s;
		transform: translate(312px);
		position: fixed;
		top:60px;
		right: 0;
		padding:10px 0;
		z-index: 1000;
		background-color:#88C9E4;
	}
	#header .menu.open {
		transform: translate(0);
	}
	#header .menu li {
		border:none;
	}
	#header .menu li a {
		display:block;
		color:#FFF;
		padding:20px;
		font-size:1.4rem;
		border:none;
	}
	/* --- */
	.sp_menu_btn {
		display: block;
		position: absolute;
		top:0;
		right:0;
		width: 60px;
		height: 60px;
		text-align: center;
		letter-spacing: 1px;
		cursor: pointer;
		border:none;
		color:#FFF;
		background-color:#88C9E4;
	}
	.sp_menu_btn span {
		display: block;
		position: absolute;
		left: 0;
		right:0;
		margin:0 auto;
		width: 32px;
		height: 2px;
		transition: all 0.2s;
		transform-origin: 0% 0%;
		transform: translateY(-50%);
		background-color:#FFF;
	}
	.sp_menu_btn span:nth-child(1) { top: 15px;}
	.sp_menu_btn span:nth-child(2) { top: 25px; }
	.sp_menu_btn span:nth-child(3) { top: 35px; }
	.sp_menu_btn.active span {
		width: 36.77px;
		left: 10px
	}
	.sp_menu_btn.active span:nth-child(1) {
		transform: rotate(0.7853981633974483rad) translateY(-50%);
	}
	.sp_menu_btn.active span:nth-child(2) { opacity: 0; }
	.sp_menu_btn.active span:nth-child(3) {
		transform: rotate(-0.7853981633974483rad) translateY(-50%);
		top: calc(100% - 20px)
	}
	.sp_menu_btn.active small {
		display: none;
	}
	.sp_menu_btn small {
		width: 100%;
		position: absolute;
		bottom: 10px;
		left: 0;
		right:0;
		margin:0 auto;
		text-align: center;
		font-size: 10px;
	}
	
	
	/**-----------------------------------------------
	メインエリア
	-----------------------------------------------**/
	#content {
		padding-top:60px;
		margin-bottom:30px;
	}
	.section {
		padding:0 5%;
	}
	/* 見出し */
	.page_title {
		padding:0 5%;
		min-height:90px;
	}
	.page_title .title {
		width:100%;
		font-size:6vw;
	}

	/**-----------------------------------------------
	フッター
	-----------------------------------------------**/
	.footer {
		padding:20px 0;
	}
	.footer .menu {
		margin-bottom:10px;
	}

	/**-----------------------------------------------
	index
	-----------------------------------------------**/
	/* MV */
	.topmv .catch {
		position:relative;
		top:-50px;
		left:0;
		width:auto;
		height:auto;
		padding:30px ;
		border-radius:0;
	}
	.topmv .catch p {
		margin:0;
	}

	/* 何かコンテンツ */
	.nanika {
		padding:50px 0;
	}
	
	/* 強み */
	.strength {
		padding:50px 0;
	}
	.strength ul {
		flex-wrap:wrap;
	}
	.strength li {
		margin-bottom:30px;
	}
	
	/* 新着情報 */
	.news {
		padding:50px 0;
	}
	.news_list li a {
		display:block;
		padding:10px;
	}
	.news .btn a {
		width:auto;
		padding:10px;
	}

	/**-----------------------------------------------
	会社概要
	-----------------------------------------------**/
	/* 会社概要 */
	.company_detail {
		padding:30px 0 50px;
	}
	.company_detail dl {
		display:block;
		padding:20px;
		border-bottom:1px solid #CCC;
	}
	.company_detail dt {
		color:#888;
		padding:0;
		margin:0 0 10px;
	}
	.company_detail dd {
		padding:0 10px;

	}

	/**-----------------------------------------------
	業務内容
	-----------------------------------------------**/
	.service_list {
		padding:40px 0;
	}
	.service_list .detail {
		display:block;
	}
	.service_list .detail figure {
		margin:0 0 20px 0;
	}
	.service_list .detail .list p {
		margin-left:0;
	}

	/**-----------------------------------------------
	お問い合わせ
	-----------------------------------------------**/
	.form_style dl {
		padding:10px 0;
	}
	.form_style .form_btn input {
		max-width:50%;
	}
}