@charset "UTF-8";

/*リセットのcss*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video,address {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	border-collapse: collapse;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}


/*共通スタイルおよびトップページ*/
html, body {
  color: #0a2239;
  font-family:YuMincho,"Yu Mincho",serif;
}

header{
	background-color:rgba(238,238,238,0.9);
	padding-left:30px;
	position:fixed;
	width:100%;
	z-index:99999;
	height:100px;
}
h1{
	padding-top:20px;
	font-size:12px;
	font-weight:normal;
}
.header_wrap{
	display:flex;
	justify-content:flex-start;
	align-items:center;

}
header nav{
	display:flex;
	padding-left:40px;
}
header nav ul{
	display:flex;
}
header nav ul li{
	padding-right:30px;
}
header nav a{
	text-decoration:none;
	color:#000;
}
header nav ul li:hover{
	transform: translate(1px,1px);
}
header nav a:hover{
	text-decoration:none;
	color:#aaa;
}

#slider_area{
	padding-top:100px;
	position:relative;
}

#slider_area p{
	background:rgba(255,255,255,0.5);
	width:55vw;
	font-size:3vw;
	padding:5vw 0 5vw 10vw;
	line-height:150%;
	z-index:99997;
	position:absolute;
	right:0px;
	bottom:5vw;
}
#slider_area p a{
	color:#000;
	text-decoration: none;
}
.slick02{
	display: none !important;
}
.smp_image{
	display:none;
}

@media screen and (max-width: 768px){
	.slick01{display:none !important;}
	.slick02{display: block !important;}
	.smp_image{display:inline;}
	.pc_image{display:none;}

}
#products_area{
	margin:100px 0px;
	background: url(common_img/introduction.jpg) top center/cover;
    background-attachment: fixed;
}
@media screen and (max-width: 768px){
	#products_area{background: url(common_img/introduction.jpg) top left/cover;}
}
#products_area h2,#blog_area_banner h2,#coordinates_area h2,#sns_area h2{
	background:#fff;
	padding-bottom:80px;
}
#products_area h2 a,#blog_area_banner h2 a,#coordinates_area h2 a,#sns_area h2 a{
	text-align:center;
	font-size:24px;
	padding-bottom:10px;
	width:220px;
	border-bottom:1px solid #000;
	margin:0 auto;
	display:block;
}
#products_area ul{
	display:flex;
	justify-content:space-around;
	width:900px;
	margin:0 auto;
	padding:180px 0px;
}

#products_area ul li{
	width:250px;
	height:250px;
	border:1px solid #fff;
	display:flex;
}

#products_area ul li a{
	text-align:center;
	background:tranceparent;
	font-size:20px;
	text-decoration:none;
	display:flex;
	align-items:center;
	justify-content:center;
	width:250px;
	height:250px;
	color:#fff;
	transition: background .5s;

}
#products_area ul li a:hover{
	background:#fff;
	opacity:50%;
	transition: background .5s;
	color:#000;
}
#blog_area_banner,#coordinates_area,#sns_area{
	padding-bottom:100px;
}
#sns_area ul{
	display:flex;
	justify-content:space-around;
	padding:0 30px;
}
footer{
	background:#EEE;
}
footer div{
	display:flex;
	padding:60px 0 50px 0;	
}
address{
    font-style:normal;
    line-height:120%;
    display:block;
    width:50%;
    padding-left:50px;
}
footer nav{
	display:flex;
	margin-left:100px;
	width:50%;
}

footer nav ul{
	margin-left:50px;
}
footer nav ul li {
	padding-bottom:10px;
}
footer nav ul li:hover {
	transform: translate(1px,1px);
}
footer nav ul li::before {
	content:"> ";
}
footer nav ul li a{
	color:#000;
	text-decoration:none;
}
footer nav ul li a:hover{
	color:#aaa;
}
small{
	display:block;
	text-align:center;
	font-size:12px;
	background:#333;
	height:50px;
	color:#fff;
	line-height:50px;
}


@media screen and (min-width: 767px){
.ddmenu_hv .ddmenu{
	position: absolute;
	background-color:rgba(225,208,209,0.5);
	display: none;
}
.ddmenu_hv:hover .ddmenu{
	display: block;
}
}
.ddmenu li{
	padding-right: 0;
}
.ddmenu li a{
	width:200px;
	display:block;
	border: 1px solid #eee;
	padding:20px 20px;
}
.ddmenu li a:hover{
	background:#fff;
	transition: all .5s;
}
#aco0,#aco1{
	display: none;
}




/*ここからポリシー*/
#policy_1{
    padding-top: 150px;
    text-align:center; 
    padding-bottom: 50px;
}
#policy_1 h2{
    font-size: 35px;
    padding: 50px 0 50px 0;
}
#policy_2{
    padding: 100px 0px 100px 0px;
    background:url("policy/img_polisy-001.jpg");
	background-size: cover;
    background-attachment: fixed;
}
#policy_2 h3{
    font-size: 27px;
    padding: 20px 0px 80px 0px;
}
#policy_2 p{
    line-height: 150%;
    margin-bottom:30px;
    font-size: 22px;
}
/*ここからショップ*/
#shop_1{
    width:70%;
    margin: 0 auto;
    padding-bottom: 60px;
}
#shop_1 div{
    padding-top: 150px;
    padding-bottom: 50px;
    display:flex;
	justify-content:flex-start;
    align-items:center;
}
#shop_1 h2{
    margin-left:50px;
    line-height:120%;
    font-size:35px;
    height:135px;
    width:50%;
    padding-top: 20px;
}
#shop_1 h2 span{
    font-size:25px;
}
#shop_1 h2 a {
    text-align:right;
    border-top:1px solid #000;
    display: block;
    color:#000;
    font-size:18px;
    text-decoration: none;
}
#shop_2{
    background: url("shop/img-shop-002.jpg") no-repeat;
	background-size: cover;
    padding:120px 90px;
}
#shop_2 p{
    line-height: 150%;
    margin-bottom:30px;
    font-size: 22px;
    text-align: center;
}

/*ここからカンパニー*/
#company{
    padding-top: 150px;
	text-align:center; 
    padding-bottom: 50px;	
}
#company h2{
    font-size: 35px;
    padding: 50px 0 50px 0;
}
#company table{
	width:60%;
	margin:0 auto;
	font-size:20px;
}
#company table th,#company table td{
	padding: 30px;
	border-bottom:1px solid #333;
	text-align:left;
}
#company table th{
	vertical-align: middle;
}
/*ここからビジネス*/
#business_1{
    width:70%;
    margin: 0 auto;
    padding-bottom: 60px;
}
#business_1 div{
    padding-top: 150px;
    padding-bottom: 50px;
    display:flex;
	justify-content:flex-start;
    align-items:center;
}
#business_1 h2{
    margin-left:50px;
    line-height:120%;
    font-size:35px;
    height:120px;
    width:50%;
    padding-top: 20px;
	border-bottom:1px solid #000;
}
#business_1 h2 span{
    font-size:25px;
}
#business_1 p,#business_2 p{
	font-size:22px;
	line-height: 150%;
}
#business_2{
	text-align: center;
    margin:100px auto;
}
#business_2 h3,#business_3 h3{
	font-size:35px;
	margin-bottom:70px
}

#business_3 h3{
	width:100%;
	text-align: center;
}
.gal_wrap{
	margin:0 auto;
	width:90%;
	flex-wrap: wrap;
	display: flex;
	justify-content: space-between;
}
.gal_wrap div{
	width:48%;
}
.gal_wrap img, p{
	width:100%;
}
.gal_wrap p{
	padding:20px 0 50px 0;
	font-size:22px;
}


/*ここからコンサル*/
#consulting{
    background: url("rh/img_rh-002.jpg") top right no-repeat;
	background-attachment: fixed;
    padding:120px 90px;
	background-size: cover;
}
#consulting p{
    line-height: 150%;
    margin-bottom:30px;
    font-size: 22px;
    text-align: center;
}



@media screen and (max-width: 1100px) {
	.br_cl{
		display:none;
	}
	header nav {
	display:block;
	}
	header nav ul{
		padding-bottom:5px;
	}
	#products_area ul li{
		width:20vw;
		height:20vw;
	}

	#products_area ul li a{
		width:20vw;
		height:20vw;
	}
	#products_area ul{
		width:75%;
	}
	#company table{
		width:80%;
	}
	footer div{
		display:flex;
		padding:40px 0 30px 0;	
	}
	footer nav{
		margin-left:0;
	}
	#business_1 h2{
			width:80%;
		}
}



@media screen and (max-width: 768px){
	h1{
		display: none;
	}
	header{
		padding:10px;
		height:80px;
	}
	header nav ul{
		flex-direction: column;
		padding-bottom:0;
	}
	header nav ul li{
		padding:0;
		border:1px solid #fff;
		background:rgba(238,238,238,0.9);
		margin-bottom:20px;
		}
	header nav ul li a{
		display: block;
		padding:10px 20px;
	}
	header nav ul li a:hover{
		color:#000;
	}
	.btn-real {
		position : absolute;
		top : 10px;
		right : 0;
	}
	#g-nav {
		position: absolute;
		right:0;
		top:80px;
		background: rgba(255,255,255,0.9);
		padding:20px 20px 20px 20px;
		z-index: -1;
		width: 100%;
		height: calc(100vh - 100px);
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
		-webkit-transform: translateY(-150vh);
		transform: translateY(-150vh);
	}
	.ddmenu_hv .ddmenu{
		position:static;
		max-height: 0;
		transition: all .5s;
		visibility:hidden;
		overflow: hidden;
	}
	.ddmenu li{
		margin:0;
	}
	.ddmenu li a{
		width:100%;
		padding:10px 20px;
	}
	#aco1:checked + label + .ddmenu{
		max-height: 300px;
		visibility:visible;
		transition: all 1s;
	}
	#aco1 + label + .ddmenu a:before{
		content:"・";
	}
	#aco0:checked + label + #g-nav {
		transform : translateY(0);
	}
	#g-nav #g-nav2 #aco1:checked + label + ul {
		max-height : 500px;
	}
	#g-nav #g-nav2 #aco2:checked + label + ul {
		max-height : 500px;
	}
	#g-nav #g-nav2 #aco3:checked + label + ul {
		max-height : 500px;
	}
	.btn-real {
		display : inline-block;
		overflow : hidden;
		width : 80px;
		height : 80px;
		color : rgba(152, 152, 152, 0.3);
		text-align : center;
		text-decoration : none;
		text-shadow : 1px 1px 1px rgba(255, 255, 255, 0.2);
		font-weight : bold;
		font-size : 40px;
		line-height : 80px;
	}
	.p-m_button {
		position : relative;
		display : block;
		display : flex;
		align-items : center;
		width : 100%;
		padding:10px 20px;
	}
	.p-m_button:before {
		position : absolute;
		top : 12px;
		right : 16px;
		display : inline-block;
		width : 2px;
		height : 14px;
		border-radius : 10px;
		background : black;
		content : "";
		transition : 0.5s;
	}
	.p-m_button:after {
		position : absolute;
		top : 18px;
		right : 10px;
		display : inline-block;
		width : 14px;
		height : 2px;
		border-radius : 10px;
		background : black;
		content : "";
		opacity : 1;
		transition : 0.5s;
	}
	#aco0:checked + .p-m_button:before {
		transform : rotate(90deg);
	}
	#aco0:checked + .p-m_button:after {
		opacity : 0;
	}
	#aco1:checked + .p-m_button:before , #aco2:checked + .p-m_button:before , #aco3:checked + .p-m_button:before {
		transform : rotate(90deg);
	}
	#aco1:checked + .p-m_button:after , #aco2:checked + .p-m_button:after , #aco3:checked + .p-m_button:after {
		opacity : 0;
	}
	.menu-trigger , .menu-trigger span {
		display : inline-block;
		box-sizing : border-box;
		transition : all 0.4s;
	}
	.menu-trigger {
		position : absolute;
		top : 20px;
		right : 0;
		width : 50px;
		height : 44px;
		transform : scale(0.5);
	}
	.menu-trigger span {
		position : absolute;
		left : 0;
		width : 100%;
		height : 4px;
		border-radius : 4px;
		background-color : #000000;
	}
	.menu-trigger span:nth-of-type(1) {
		top : 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top : 20px;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom : 0;
	}
	.menu-trigger span:nth-of-type(1) {
		-webkit-animation : menu-bar01 0.75s forwards;
				animation : menu-bar01 0.75s forwards;
	}
	@-webkit-keyframes menu-bar01 {
		0% {
			-webkit-transform : translateY(20px) rotate(45deg);
		}
		50% {
			-webkit-transform : translateY(20px) rotate(0);
		}
		100% {
			-webkit-transform : translateY(0) rotate(0);
		}
	}
	@keyframes menu-bar01 {
		0% {
			transform : translateY(20px) rotate(45deg);
		}
		50% {
			transform : translateY(20px) rotate(0);
		}
		100% {
			transform : translateY(0) rotate(0);
		}
	}
	.menu-trigger span:nth-of-type(2) {
		opacity : 1;
		transition : all 0.25s 0.25s;
	}
	.menu-trigger span:nth-of-type(3) {
		-webkit-animation : menu-bar02 0.75s forwards;
				animation : menu-bar02 0.75s forwards;
	}
	@-webkit-keyframes menu-bar02 {
		0% {
			-webkit-transform : translateY(-20px) rotate(-45deg);
		}
		50% {
			-webkit-transform : translateY(-20px) rotate(0);
		}
		100% {
			-webkit-transform : translateY(0) rotate(0);
		}
	}
	@keyframes menu-bar02 {
		0% {
			transform : translateY(-20px) rotate(-45deg);
		}
		50% {
			transform : translateY(-20px) rotate(0);
		}
		100% {
			transform : translateY(0) rotate(0);
		}
	}
	#aco0:checked + .menu-trigger  span:nth-of-type(1) {
		-webkit-animation : active-menu-bar01 0.75s forwards;
				animation : active-menu-bar01 0.75s forwards;
	}
	@-webkit-keyframes active-menu-bar01 {
		0% {
			-webkit-transform : translateY(0) rotate(0);
		}
		50% {
			-webkit-transform : translateY(20px) rotate(0);
		}
		100% {
			-webkit-transform : translateY(20px) rotate(45deg);
		}
	}
	@keyframes active-menu-bar01 {
		0% {
			transform : translateY(0) rotate(0);
		}
		50% {
			transform : translateY(20px) rotate(0);
		}
		100% {
			transform : translateY(20px) rotate(45deg);
		}
	}
	#aco0:checked + .menu-trigger span:nth-of-type(2) {
		opacity : 0;
	}
	#aco0:checked + .menu-trigger span:nth-of-type(3) {
		-webkit-animation : active-menu-bar03 0.75s forwards;
				animation : active-menu-bar03 0.75s forwards;
	}
	@-webkit-keyframes active-menu-bar03 {
		0% {
			-webkit-transform : translateY(0) rotate(0);
		}
		50% {
			-webkit-transform : translateY(-20px) rotate(0);
		}
		100% {
			-webkit-transform : translateY(-20px) rotate(-45deg);
		}
	}
	@keyframes active-menu-bar03 {
		0% {
			transform : translateY(0) rotate(0);
		}
		50% {
			transform : translateY(-20px) rotate(0);
		}
		100% {
			transform : translateY(-20px) rotate(-45deg);
		}
	}
	#slider_area{
	padding-top:80px;
	}
	#slider_area p{
		width:75vw;
		font-size:4vw;
	}
	#products_area ul{
		width:90%;
	}
	#products_area ul li a{
		font-size:12px;
	}
	#company table{
	width:90%;
		font-size:14px;
	}
	#company table th,#company table td{
	padding: 20px;
	}
	footer nav{
		display: none;
	}
	address{
		width:100%;
		padding-left:20px;
	}
	footer div {
		padding:10px 0;
	}
	#policy_2 h3{
    font-size: 20px;
    padding: 20px 0px 80px 0px;
	}
	#policy_2 p{
    font-size: 18px;
	}
	#policy_2{
		background-size:auto;
		background-position: top right;
		background-attachment: fixed;
	}
	#shop_1,#business_1{
		width:90%;
		padding-bottom:20px;
	}
	#shop_1 h2{
		font-size:25px;
		margin-left:20px;
	}
	#shop_1 h2 span{
		font-size:18px;
	}
	#shop_1 h2 a,#business_1 h2 a{
		font-size:12px;
	}
	
	#shop_2{
		padding:120px 20px;
		background-position: center center;
	}
	#business_1 h2{
		font-size:24px;
	}
	#business_1 h2 span{
		font-size:12px;
	}
	#business_1 h2{
		margin-left:20px;
	}
	#business_2 h3,#business_3 h3{
		font-size:28px;
	}
	.gal_wrap p{
		font-size:16px;
	}
	#consulting{
		padding:120px 20px;
	}
	#company h2,#policy_1 h2{
		font-size:24px;
	}
	#company table th{
		width:30%;
	}
}




/*お問い合わせ*/

#formWrap {
	width:700px;
	margin:0 auto;
	padding-top:150px;
	padding-bottom:50px;
	color:#555;
	line-height:120%;
	font-size:90%;
}
#formWrap h2{
	font-size:20px;
	text-align: center;
	margin-bottom:20px;
}
#formWrap p{
	text-align: center;
	margin:10px 0;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
	vertical-align: middle;
}
/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {
#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="text"], textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}
}