/* CSS Document */
/* div.hd-wrapper header div h1 a */

div.hd-wrapper {
	height:40px;
	width: auto;
	display:block;
	overflow:hidden;

	transition: 0.5s;
}

header {
	height:40px;
	width: auto;
	display:block;
	/*background-image: linear-gradient(0deg, #edededcc, #ffffffcc);*/
	background-color:rgb(0,0,0,0.3);
	transition: 0.5s;
}

header div {
	float:left;
	height:40px;
	width: 550px;
	width:55%;
	margin:0;
	display:block;
	overflow:hidden;
	background-color:rgb(0,0,0,0.3);
	float:left;

	transition: 0.5s;
}

header div a {
	height:26px;
	width: 210px;
	margin:6px 10px 0px 10px;
	display:block;
	overflow:hidden;
	background: url("https://cms.711css.com/wp-content/themes/711CSS_CoLtd/images/common_sitetitle.svg") no-repeat;
	float:left;
}

header div p {
	color:#fff;
	display:block;
	overflow:hidden;
	font-size:16px;
	margin:8px 0px 0px 10px;
	height:26px;
	width: auto;
}


/* ■　検索ボタン search_btn.php　■ */

header form.search-form {
	width:40%;
	display:block;
	overflow:hidden;
}


header form input.search-field {
	width: calc(100% - 130px);
	height:31px;
	font-size:16px;
	line-height:100%;
	margin:5px 3px 3px 3px;
	display:block;
	float:left;
}

header form button.search-submit {
	padding:0px 10px 0px 10px;
	text-align:right;
	color:#0f7dff;
    width:105px;
    height:31px;
    margin:5px 3px 3px 3px;
    background: url("https://cms.711css.com/wp-content/themes/711CSS_CoLtd/images/header_search_btn_defo.svg") no-repeat;
	background-size:105px 31px;
    border:none;
    cursor:pointer;
    transition: 0.3s;
	display:block;
	float:left;
}

header form button.search-submit:hover {
    background: url("https://cms.711css.com/wp-content/themes/711CSS_CoLtd/images/header_search_btn_hover.svg") no-repeat;
	background-size:105px 31px;
	color:#ff66bb;
}





































	

	
	
	
	
/* ●●●　レスポンシブデザイン　●●● */
	
	
	
	
	

/* ■■　ブレイクポイント1280px PC　■■ */
@media screen and (min-width:1281px) {

}/* 1281px以上で反映 end */


@media screen and (max-width:1280px) {
	
div.hd-wrapper {height:80px;}
header {height:80px;}
header div {
	height:40px;
	width:auto;
	float:none;
	clear:both;
}
header div a{
	margin:6px 40px 0px 40px;
	float:left;
	}


header form.search-form {
	width:90%;
	margin:0px 5% 0px 5%;
}

header form input.search-field {
	width: calc(100% - 130px);
}

}/* 1280px以下で反映 end */


/* ■■　ブレイクポイント960px タブレット　■■ */
@media screen and (min-width:961px) {

}/* 961px以上で反映 end */


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

div.hd-wrapper {height:120px;}
header {height:120px;}
header div {
	height:80px;
}
header div p {
	margin:0px auto 8px auto;
	text-align:center;
}
header div a{
	margin:10px auto 10px auto;
	float:none;
	}

}/* 960px以下で反映 end */






/* ■■　ブレイクポイント768px タブレット　■■ */
@media screen and (min-width:769px) {

}/* 769px以上で反映 end */


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

div.hd-wrapper {height:120px;}
header {height:120px;}

}/* 768px以下で反映 end */






/* ■■　ブレイクポイント428px SmartPhone　■■ */
@media screen and (min-width:429px) {

}/* 429px以上で反映 end */

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

}/* 428px以下で反映 end */