@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

body,header,div,section,h1,h2,h3,h4,p,span,nav,ul,li,table,tr,td,dl,dt,dd,video {
	margin: 0;
	padding: 0;
}

html {
	font-size: 62.5%;
}

body {
	font-size: 1.6rem;
	font-family: 'Noto Sans Japanese', sans-serif;
	color: #151515;
	font-weight: 300;
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
}

p {
	font-size: 1.5rem;
    line-height: 1.8em;
}


.column {
	margin-bottom: 12%;
}

.sp_only {
	display: none;
}

.out {
	display: none;
}

/*--- トップへ戻る ---*/

.pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 20px;
}

.pagetop a {
	display: block;
	background-color: #a9a9a9;
	text-align: center;
	color: #000000;
	font-size: 1.8rem;
	text-decoration: none;
	padding: 10px 14px;
	opacity: 0.5;
	transition: 0.7s;
}

.pagetop a:hover {
	opacity: 0.3;
}


/*--- button各種 ---*/

.a_btn a {
	display: block;
	width: 320px;
	padding: 14px 0;
	text-align: center;
	color: #ffffff;
	font-weight: bold;
	position: relative;
	transition: 0.8s;
	z-index: 0;
}

.a_btn a:hover {
	color: #e61e1e;
}

.a_btn a::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	transition: 0.8s;
	z-index: -1;
	border: 2px solid #e61e1e;
}

.a_btn a::after {
	content: "";
	display: block;
	position: absolute;
	left: 2px;
	top: 2px;
	bottom: 2px;
	right: 2px;
	transition: 0.8s;
	background-color: #e61e1e;
	z-index: -1;
}

.a_btn a:hover::after {
	left: 100%;
	top: 100%;
	bottom: 100%;
	right: 100%;
}


.b_btn p {
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
	padding: 20px 0 10px;
}

.b_btn a {
	display: block;
	text-align: center;
	width: 230px;
	padding: 14px 0;
	margin: 0 auto;
	background-color: #e61e1e;
	color: #ffffff;
	font-weight: bold;
	position: relative;
	transition: 0.7s;
}

.b_btn a:hover {
	background-color: #999;
}

.b_btn a::before {
	content: "";
	position: absolute;
	background-color: #999;
	width: 230px;
	height: 52px;
	z-index: -1;
	margin-left: -30px;
	transition: 0.7s;
}

.b_btn a:hover::before {
	background-color: #e61e1e;
}


/*--- title各種 ---*/

.mark_title {
	text-align: center;
	font-size: 2.6rem;
	margin-bottom: 20px;
	font-weight: bold;
}

.mark_title::before {
	content:url(../img/mark.jpg);
	display: inline-block;
	vertical-align: middle;
	font-size: 0;
	padding: 0 5px 5px 0;
}

.mark_title span {
	display: block;
	font-size: 1.4rem;
	font-weight: bold;
}



/*--- header ---*/

.header_wrap {
	position: fixed;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.6);
	z-index: 999;
}

.main_nav {
	display: flex;
	align-items: center;
	padding: 12px 20px;
	flex-wrap: wrap;
}

.main_nav ul {
	display: flex;
	margin-left: auto;
}

.main_nav ul li {
	padding: 0 20px;
}

.main_nav ul li a {
	color: #3e2020;
	font-weight: bold;
	transition: 0.6s;
	position: relative;
	padding: 4px 0;
}

.main_nav ul li a::before {
	top: 0;
	right: 0;
}

.main_nav ul li a::after {
	bottom: 0;
	left: 0;
}

.main_nav ul li a::before,.main_nav ul li a::after {
	content: "";
	display: block;
	height: 2px;
	width: 0%;
	transition: 0.4s;
	background-color: #e61e1e;
	position: absolute;
}

.main_nav ul li a:hover::before,.main_nav ul li a:hover::after {
	width: 100%;
}


/*--- top_image ---*/

.main_title {
	font-size: 8rem;
	color: #ffffff;
	text-align: right;
	text-shadow: 5px 5px 5px #000000;
	padding-right: 20px;
}

.main_title span {
	display: block;
	font-size: 2rem;
}

/*--- works ---*/

.w_wrap {
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.w_box {
	width: 300px;
	margin: 0px 10px 56px;
	transition: 0.7s;
	box-shadow: 3px 3px 10px #9e9d9d;
}

.w_box:hover {
	opacity: 0.6;
}

.w_box video {
	width: 100%;
}

.w_box p {
	font-weight: bold;
	background-color: #1f1f1f;
	color: #ffffff;
	font-size: 1.3rem;
	padding: 2px 0 0 5px;
}

.w_image {
	height: 200px;
}

.w_image img {
	width: 300px;
	height: 200px;
}


/*--- consluting ---*/

.conslut {
	display: flex;
	background-color: #f1f1f1;
}

.c_title {
	margin-bottom: 15px;
	font-size: 2.6rem;
}

.c_title span {
	display: block;
	font-size: 2rem;
}

.c_image {
	width: 66%;
	transform: skewX(-8deg);
	background-image: url(../img/index/style_02.jpg);
	background-size: cover;
	margin-left: -10%;
}

.c_wrap {
	width: 44%;
	text-align: center;
}

.c_txt {
	padding: 12% 10%;
}

.c_txt p {
	text-align: left;
	margin-bottom: 36px;
}

.c_txt .a_btn a {
	margin: 0 auto;
	width: 220px;
}


/*--- contact ---*/

.con_txt {
	text-align: center;
	line-height: 5rem;
}

.con_txt span {
	display: block;
	font-size: 2.8rem;
	font-weight: bold;
	margin-bottom: 18px;
}


/*--- map ---*/

.map_wrap iframe {
	width: 100%;
	height: 450px;
}

.map_txt {
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
}


/*--- footer ---*/

.footer_wrap {
	background-color: #eeeeee;
}

.f_logo {
	display: flex;
	justify-content: center;
	padding: 50px 0 58px;
}

.f_nav {
	margin-bottom: 80px;
}

.f_nav ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.f_nav ul li {
	margin: 0 20px 25px;
}

.f_nav ul li a {
	font-weight: bold;
	color: #000000;
	padding: 4px 0;
	position: relative;
}

.f_nav ul li a::before {
	top: 0;
	right: 0;
}

.f_nav ul li a::after {
	bottom: 0;
	left: 0;
}
.f_nav ul li a::before,.f_nav ul li a::after {
	content: "";
	display: block;
	height: 2px;
	width: 0%;
	transition: 0.4s;
	background-color: #e61e1e;
	position: absolute;
}

.f_nav ul li a:hover::before,.f_nav ul li a:hover::after {
	width: 100%;
}

.f_menu {
	font-size: 1.2rem;
}

.footer_wrap small {
	text-align: center;
	display: block;
}


@media screen and (max-width: 960px) {

	/*--- 共通 ---*/

	.column {
		margin-bottom: 24%;
	}
	
	.a_btn a {
		width: 100%;
	}

	.b_btn a::before {
		margin-left: -30px;
	}

	.w_wrap {
		justify-content: space-around;
	}


	/*--- header ---*/

	.main_nav {
    	justify-content: center;
	}

	.main_nav ul {
		margin-left: 0;
	}

	.main_title {
    	font-size: 6.5rem;
	}


	/*--- consluting ---*/

	.c_image {
    	width: 90%;
	}

	.c_wrap {
		width: 100%;
	}

	.c_txt {
		padding: 6% 10%;
	}



	/*--- map ---*/

	.map_wrap iframe {
		height: 286px;
	}

	.map_txt {
		font-size: 1rem;
	}


}

@media screen and (max-width: 480px) {

	/*--- 共通 ---*/

	.sp_only {
		display: block;
	}

	.pc_only {
		display: none;
	}


	/*--- ハンバーガーメニュー ---*/

	.top_logo img {
		width: 80%;
	}

	.toggle {
		display: block;
		position: fixed;
		width: 42px;
		height: 40px;
    	right: 12px;
    	top: 10px;
		cursor: pointer;
		z-index: 9999;
		background-color: #5f5f5f;
	}

	.toggle span {
		display: block;
		position: absolute;
		width: 30px;
		border-bottom: 3px solid #ffffff;
		transition: 0.35s;
		left: 6px;
	}

	.toggle span:nth-child(1) {
		top: 9px;
	}

	.toggle span:nth-child(2) {
		top: 18px;
	}

	.toggle span:nth-child(3) {
		top: 27px;
	}

	.toggle.active span:nth-child(1) {
		top: 18px;
		left: 6px;
		transform: rotate(-45deg);
	}

	.toggle.active span:nth-child(2),.toggle.active span:nth-child(3) {
		top: 18px;
		transform: rotate(45deg);
	}



	/*--- header ---*/

	.header_wrap {
	    right: -400px;
		transition: 0.8s;
		height: 100vh;
		width: 68%;
		background-color: rgba(255, 255, 255, 0.8);
	}

	.header_wrap.active {
	    right: 0px;
	}

  	.main_nav {
	    display: block;
	}

	.main_nav ul {
		display: block;
	}

	.main_nav ul li {
		padding: 20px 70px;
	}




	/*--- top_image ---*/

	.main_title {
    	font-size: 4rem;
		padding-right: 10px;
	}



	/*--- consluting ---*/

	.conslut {
		display: block;
	}

	.c_image {
		width: 100%;
		transform: none;
		height: 200px;
		margin: 0;
	}

	.c_wrap {
		width: 100%;
	}

	.c_txt {
		padding: 6% 10%;
	}



	/*--- map ---*/

	.map_wrap iframe {
		height: auto;
	}

	.map_txt {
		font-size: 1rem;
	}

}