@charset "utf-8";


#logo img {
    max-width: 80%;
}
/*ロゴ画像*/
header #logo {
	width: 28%;		/*ロゴ画像の幅*/
	float: left;		/*左に回り込み*/
	margin-top: 1.5vh;	/*ロゴの上にあける余白。ヘッダー内の上下の配置バランスをここで調整して下さい。*/
	margin-left: 3%;	/*ロゴの左側にあける余白。*/
}

#menubar {
	width:100%;
	height:auto;
    background: #fff;
    border-bottom: 0px solid #fff;
}

#menubar li a {
    color: #000;
	line-height: 1.4;
}


#menubar li a:hover, #menubar li.current a {
    background: #e5e5e5;
}
#menubar .lastchild a {
	border: 0px!important;
}
/*
#maincontents {
	width:80%;
	margin-left: auto;
	margin-right: auto;
}
*/
#main h2 {
    padding: 0px 20px;
    color: #fff;
    background: #818181;
}
#sub h2, #side h2 {
    padding: 2px 0px;
    color: #fff;
    background: #000;
    background: linear-gradient(#959595, #b7b7b7);
}
#main h3 {
    padding: 2px 20px;
}
#main h3::first-letter {
    border-left: 3px solid #666;
}
footer {
    background: #858585;
}

.inner {
    max-width: initial;
    margin: 0 auto;
}

/*お問い合わせ用の設定
---------------------------------*/
#main .inquiry_title{	/*お問い合わせタイトル部*/
    clear: both;
    font-size: 1.5rem;
    margin-bottom: 20px;/*下の空白調整*/
    margin-top:10px;	/*上の空白調整*/
    max-width:6em;	/*背景色の範囲。設定しないと見栄えが悪くなる*/
    padding: 5px 15px 0;
    color: #fff;
    background: #717072;
}

#main .announce{	/*会社宣伝部*/
    font-size: 1.8rem;	/*文字サイズ。調整必須*/
    font-weight:bold;	/*太字*/
	margin-left:200px;
    color: #000000;
}

#main .inquiry_company{
    clear: both;	/*floatを使用している箇所があるため設定*/
}

#main span.inquiry_company{	/*電話番号・Emailの書式設定*/
    font-size: 0.9em;	/*ちょっとだけ小さくする*/
}

#main img.inquiry {	/*イメージ用。
イメージ挿入が終わり次第borderを削除して下さい*/
    width:300px;
    max-width:40%;
    float:right;
    border:1px solid #000000;
}

#main .rightside {	/*文字を右寄せにするために設定*/
    display:block;
    text-align:center;
}
.mtop20{
	margin-top:60px!important;
}
.mtop10{
	margin-top:15px!important;
}
.mbtm20{
	margin-bottom:20px;
}
/*実績本社支社表示の設定
---------------------------------*/
#map .company {
    font-weight:bold;	/*太字*/
}
/*メール用css*/
#formWrap {
	width:700px;
	color:#555;
	line-height:120%;
	font-size:90%;
}
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;
}
/*　簡易版レスポンシブ用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;
}
form input[type="text"], form textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
}
form input[type="submit"], form input[type="reset"], form input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}
}

/*ドロップメニュー操作*/
#ddmenu li ul li{
	margin-bottom:2.3vh;
	overflow: hidden;
	height: 0;
	transition: .5s;
}
#ddmenu li:hover ul li{
	overflow: visible;
	height: 38px;
}
@media screen and (max-width:1300px){
	#menubar ul.ddmenu { width:8.3vw; }
	#menubar li { margin-top:0px; }
	#menubar ul.ddmenu li a { padding:3.5vh 0px; }

}
#sub summary {
	background-color:#818181;
	color:#fff;
	padding-left: 1em;
}
/*detailアニメーション*/
details[open] .details-content {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0; /* 透明 */
    transform: translateY(-10px); /* 上から表示 */
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.float-right1{
	width:25%;
	float:left;
}

.float-right2{
	width:25%;
	float:left;
}
.float-right3{
	width:25%;
	float:left;
}
.float-right4{
	width:25%;
	float:left;
}
.anchor {
	clear:both;
}