@charset "UTF-8";

/*--------------------------------------------*/
body,input,textarea {
	font-family: "游ゴシック","Yu Gothic","游ゴシック体","YuGothic","メイリオ", meiryo, Osaka, "ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック", sans-serif;
	/*
	font-family: "ヒラギノ明朝 Pro","HiraMinPro","ＭＳ 明朝","ＭＳ Ｐ明朝","HG明朝E","MS PMincho",serif;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
	*/
}
* { box-sizing:border-box; }
body {
	margin:0px;
	padding:0px;
	font-size:100%;
	line-height:1em;
	color:#333;
	min-width:1040px;
}
header a { color:#333; text-decoration:none; display:inline-block; }
footer a { color:#FFF; text-decoration:none; display:inline-block; }

h1 { font-size:150%; }
h2 { font-size:140%; }
h3 { font-size:130%; }
h4 { font-size:120%; }
h5 { font-size:100%; }
h6 { font-size:100%; }
h1,h2,h3,h4,h5,h6,div,dl,dt,dd,p,a,table,tr,td,address,img,
header ul, footer ul{
	margin:0px;
	padding:0px;
	line-height:1.5em;
	text-align:left;
	font-style:normal;
	list-style:none outside;
}
ul { margin:1em 0;  } li { line-height:1.3em; margin:0 0 .5em; }
header li, footer li { line-height:1em; margin:0; }
i,em { font-style:normal; } u { text-decoration:none; } sup,sub { font-size:60%; }
/*************/
#clear, .clear { clear:both; }
.c { margin-left:auto; margin-right:auto; }
.l { float:left; }
.r { float:right; }
.t_c { text-align:center; }
/*img.l { margin:0 10px 10px 0; }
img.r { margin:0 0 10px 10px; }*/

/* table */
table { width:100%; border-collapse:collapse; border-spacing:0; }
thead th, thead td { background:#9166a9; color:#FFF; font-weight:normal; white-space:normal; }
th,td { border:1px solid #DDD; padding:10px; }
th { width:25%; white-space:nowrap; background-color:#CECECE; color:#000; }
table , tr , td , th { border-color:#C1C1C1; }

/* * */
.aster li:before { content:"※"; }
.aster li { padding-left:1em; text-indent:-1em; font-size:90%; }

/*
.ph img,
img.ph {
	border:3px solid #FFF;
	box-shadow:2px 2px 3px 2px #CCCCCC;
	-moz-box-shadow:2px 2px 3px 2px #CCCCCC;
	-webkit-box-shadow:2px 2px 3px 2px #CCCCCC;
}

/* -------------------------------------------- */
a 			{ text-decoration:none; }
a:hover     { opacity:.50; text-decoration:none; }
/* nav a:hover { opacity:1; }
/* --------------------------------------------*/


/* wrapper /
header, footer, main { min-width:1000px; }

/* inner */
#infomation,
#inquiry,
#work,
.buysel
.construction,
header .headBox,
.pagetop,
.example,
.inner { display:block; clear:both; margin-left:auto; margin-right:auto; width:1000px; padding:0 20px; position:relative; }

/* flexBox */
.flexBox , #products li , .b2a { display:flex; justify-content:space-between; flex-wrap:wrap; }
#products li:nth-of-type(2n) { display:flex; justify-content:space-between; flex-wrap:wrap; flex-flow:row-reverse; }
.flexBoxbtn { display:flex; justify-content:center; flex-wrap:wrap; }

/* header ********** */
header img, header a  { display:block; }

h1 img { width:300px; height:100%; }

header .headBox       { display:flex; align-items:flex-end; justify-content:space-between; padding:20px 20px 30px; }
header .headBox div   { display:flex; align-items:baseline; padding-top:20px; }
header .headBox div strong { font-size:16px; margin:0 1em 0 0; color:#0068b7; }
header .headBox div a { 
	display:block; padding:1px 1em;
	background-color:#0068b7;
	border-radius:10px;
	text-align:center; font-size:24px; color:#fff;
}

header .headBox .flexBox { width:42%; }
header .headBox .tel { font-size:18px; line-height:14px; }
header .headBox .tel a { font-size:28px; }
header .headBox .mail {
	display:flex;
	align-items:center;
	font-size:20px;
	color:#FFF;
	background-color:#1D2033;
	border-radius:10px;
	padding:0 20px;
}
header .headBox .mail p::before {
	content:url(../img/mail.png);
	margin-right:10px;
	width:26px; height:30px;
}

#mv img { max-width:100%; width:100%; }

header nav      { width:100%; background-color:#1D2033;}
header nav ul   { display:flex; justify-content:space-around; }
header nav li   { width:20%; font-size:24px; }
header nav li a { text-align:center; padding:15px 0; color:#FAF554; }
.act a,
header nav li a:hover,
footer li a:hover { opacity:.5; }



/* main ********** */
header { margin-bottom:40px; }
section { margin-bottom:60px; }

article.title { background-color:#CECECE; }
article.title h2 {
	font-size:34px;
	padding:10px 20px;
	position:relative;
}
article.title h2::after {
	content:"";
	display:block;
	width:80%;
	border-bottom:1px solid #000;
	border-image:linear-gradient(to right, #000 0%, #CECECE 100%);
	border-image-slice:1;
	position:absolute;
	top:50%; right:3%;
}

h3.subtitle { 
	color:#1D2033;
	font-size:28px;
	margin-top:30px;
	margin-bottom:30px;
}
h3.subtitle::after {
	content:"";
	display:block;
	width:100%;
	border-bottom:1px solid #000;
	border-image:linear-gradient(to right, #000 0%, #FFF 100%);
	border-image-slice:1;
}


.btn a { 
	display:block;
	width:30%; height:55px;
	font-size:24px;
	border-radius:25px;
	background-color:#0091db;	
	color:#FFF;
	padding:10px 0;
	text-align:center;
}

#ph {
	display:block;
	clear:both;
	margin-left:auto;
	margin-right:auto;
	max-width:100%;
	position:relative;
}
#ph img { width:100% }

#inquiry { display:flex; justify-content:space-between; }
#inquiry div { width:48%; }
#inquiry a {
	display:inline-block; width:100%;
	color:#FFF;
	font-size:22px;
	border-radius:10px; padding:10px;
}
#inquiry .tel a {
	padding-left:20px;
	background-color:#B9C4ED;
}
#inquiry .tel a span::before {
	content:url(../img/tel.png);
	margin-right:10px;
	width:26px;
}
#inquiry .mail a {
	height:100%;
	background-color:#1D2033;
	padding-left:50px;
}
#inquiry .mail a span::before {
	content:url(../img/mail2.png);
	padding-top:10px;
	margin-right:10px;
	width:46px;
}
#inquiry .mail p { position:absolute; }
#inquiry .mail p::after {
	content:url(../img/arrow.png);
	position:relative;
	top:-10px; right:-15%;
	width:38px;
}
#inquiry div p { line-height:50px; }
#inquiry div span {
	font-size:56px;
}
#inquiry .mail span {
	font-size:38px;
}


#products p a ,
.b2a + p a { margin:40px auto 0; }

#footBox { background-color:#dbdbda; padding:60px 0; margin-bottom:60px; }
#footBox h2 { background-color:#FFF; }
#footBox h3 { color:#000; text-align:center; margin-bottom:20px; }



/* footer ********** */
footer { background-color:#7B86B7; color:#FFF; }
footer .logo     { display:flex; justify-content:space-between; padding-top:20px; }
footer .logo div { width:45%; }
footer .logo div h2 { font-size:28px; background-color:#7b86b7; }
footer .logo div p { font-size:18px; }
footer .logo div p:nth-of-type(2) { font-size:24px; margin-top:10px; }

footer nav	  { width:60%; }
footer nav ul { width:100%; display:flex; justify-content:flex-end; }
footer li     { width:auto; margin-bottom:10px; font-size:20px; }
footer ul:nth-of-type(2) li { font-size:16px; }
footer ul:nth-of-type(2) a { color:#DDD; }
footer li a   { padding:5px .5em; }

footer .tel { margin-right:40px; }
footer .tel a , footer .mail a { 
	display:flex;
	width:100%;
	font-size:24px;
	border-radius:25px;
	background-color:#0091db; color:#FFF;
	padding:10px 20px;
	justify-content:center;
	align-items:center;
}
footer .tel a::before {
	content:url(../img/tel.svg);
	margin-right:10px;
	width:26px; height:30px;
}

/* pagetop */
.pagetop   { text-align:right; }
.pagetop a {
	display:inline-block; padding:5px 10px 0;
	background-color:#1D2033; border-radius:10px 10px 0 0; color:#FAF554;
}

/* copyright */
footer article {
	color:#FAF554;
	background-color:#1D2033;
}
.copyright { padding:20px 0px; }

/* --------------------------------------------*/

/* clearfix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* ¥*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
/* */
.clearfix:after { content:""; }

/* --------------------------------------------*/



/*------------------------------------------------------------
	レスポンシブ

	master.cssの18行目消す
	master.htmlの17行目と19行目を入れ替える
------------------------------------------------------------*/
#hmbCheck,#menuBtn { display:none; }
.sp { display:none; }
@media (max-width: 768px){
/*
	#infomation,
	#inquiry,
	#work,
	.buysel
	.construction,
	header .headBox,
	.pagetop,
	.example,
	.inner { width:100%; }

	h1 { width:50%; }
	#inquiry { display:block; }
	#inquiry div { width:100%; }
	#inquiry .mail a { height:133px; }
	article.title h2::after { width:62%; }
*/
}