@charset "utf-8";
/* CSS Document */

/** ボックスタイトル設定
---------------------------------------------------------------------------------*/



/*--------------------  ボックスタイトル設定 左  --------------------*/


.box-title-or-l,
.box-title-or-l2 {
	color: #fff;
}
.box-title-or-l h3 span,
.box-title-or-l2 h3 span {
	font-weight: normal;
}


/*--------------------  ボックスタイトル設定 左1  --------------------*/

@media screen and (max-width: 639px) {
	.box-title-or-l h3 span {
		display: block;
		font-size: 15px;
		color: #fff;
		text-align: center;
	}
	.box-title-or-l h3 {
		display: block;
		color: #fff;
	}
}

@media screen and (min-width:640px) and  (max-width: 1239px){
	.box-title-or-l {
		position: absolute;
		width: 250px;
		height: 110px;
		padding: 10px 10px 30px;
		box-shadow: 0 0 8px gray;
		top:0px;
		left:0px;
		background-color: rgba(0,112,184, 0.76);

	}
	.box-title-or-l h3 {
        font-size: 15px;
		font-weight: 600;
		line-height: 1.2;
		margin-bottom: 10px;
		color: #FFF;
	}
	.box-title-or-l h3 span {
		display: block;
		font-size: 11px;
		text-align: center;
	}
	section#front-works div.button-wrap a:hover,
	section#front-link div.button-wrap a:hover,
	section#front-orners div.button-wrap a:hover {
		color:#0070b8;
		background-color:#fff;
		background-image: url( "../img/arrow_o.png" );
	}
}



@media screen and (min-width: 1240px) {
	.box-title-or-l {
		position: absolute;
		width: 350px;
		height: 150px;
		padding: 20px 10px 30px;
		box-shadow: 0 0 8px gray;
		top:0;
		left:0;
		background-color: rgba(0,112,184, 0.76);

	}
	.box-title-or-l h3 {
        font-size: 25px;
		font-weight: 600;
		line-height: 1.2;
		margin-bottom: 10px;
		color: #fff;
	}
	.box-title-or-l h3 span {
		display: block;
		font-size: 15px;
		text-align: center;
	}
	section#front-works div.button-wrap a:hover,
	section#front-link div.button-wrap a:hover,
	section#front-orners div.button-wrap a:hover {
		color:#0070b8;
		background-color:#fff;
		background-image: url( "../img/arrow_o.png" );
	}
}


/*--------------------  ボックスタイトル設定 左2  --------------------*/

@media screen and (max-width: 639px) {
	.box-title-or-l2 h3 span {
		display: block;
		font-size: 15px;
	}
}

@media screen and (min-width: 640px) {
	.box-title-or-l2 {
		position: absolute;
		width: 150px;
		height:300px;
		padding: 20px 10px 30px;
		box-shadow: 0 0 8px gray;
		top:0;
		left:0;
		background-color: rgba(0,112,184, 0.76);
	}
	.box-title-or-l2 h3 {
		font-size: 10px;
		font-weight: 600;
		line-height: 1.2;
		margin-bottom: 10px;
	}
	.box-title-or-l2 h3 span {
		display: block;
		font-size: 10px;
	}
	section#front-works div.button-wrap a:hover,
	section#front-link div.button-wrap a:hover,
	section#front-orners div.button-wrap a:hover {
		color:#0070b8;
		background-color:#fff;
		background-image: url( "../img/arrow_o.png" );
	}
}

@media screen and (min-width: 1240px) {
	.box-title-or-l2 {
		position: absolute;
		width: 300px;
		height: 250px;
		padding: 5px 5px 5px 5px;
		box-shadow: 0 0 8px gray;
		top:0;
		left:0;
		background-color: rgba(0,112,184, 0.76);
	}
	.box-title-or-l2 h3 {
		font-size: 25px;
		font-weight: 600;
		margin-bottom: 10px;
	}
	.box-title-or-l2 h3 span {
		display: block;
		font-size: 15px;
	}
}
/*--------------------  ボックスタイトル設定 右  --------------------*/

.box-title-or-r,
.box-title-or-r2 {
	color: #fff;
}
.box-title-or-r h3 span , .box-title-or-r2 h3 span {
	font-weight: normal;
}


/*--------------------  ボックスタイトル設定 右  --------------------*/

.box-title-or-r,
.box-title-or-r2 {
	color: #fff;
}
.box-title-or-r h3 span , .box-title-or-r2 h3 span {
	font-weight: normal;
}

/*--------------------  ボックスタイトル設定 右1  --------------------*/

@media screen and (max-width: 639px) {
	.box-title-or-r h3 span {
		display: block;
		font-size: 15px;
	}
}

@media screen and (min-width:640px) and  (max-width: 1239px) {
	.box-title-or-r {
		position: absolute;
		width: 250px;
		height: 100px;
		padding: 5px 10px 30px;
		box-shadow: 0 0 8px gray;
		top:　0px;
		right: 0px;
		background-color: rgba(0,112,184, 0.76);
	}
	.box-title-or-r h3 {
		font-size: 15px;
		margin-bottom: 10px;
		line-height: 1.2;/*行高は1.2に*/
		padding: 10px 10px 0px;/*文字周りの余白*/
	}
	.box-title-or-r h3 span {
		display: block;
		font-size: 11px;
	}
	section#front-works div.button-wrap a:hover,
	section#front-link div.button-wrap a:hover,
	section#front-orners div.button-wrap a:hover {
		color:#0070b8;
		background-color:#fff;
		background-image: url( "../img/arrow_o.png" );
	}
}


@media screen and (min-width: 1400px) {
	.box-title-or-r {
		position: absolute;
		width: 330px;
		height: 150px;
		padding: 20px 10px 30px;
		box-shadow: 0 0 8px gray;
		top:0;
		right:-100px;
		background-color: rgba(0,112,184, 0.76);
	}
	.box-title-or-r h3 {
		font-size: 25px;
		margin-bottom: 10px;
		line-height: 1.2;/*行高は1.2に*/
		padding: 10px 10px 0px;/*文字周りの余白*/
	}
	.box-title-or-r h3 span {
		display: block;
		padding-top:5px;
		font-size: 15px;
	}
	section#front-works div.button-wrap a:hover,
	section#front-link div.button-wrap a:hover,
	section#front-orners div.button-wrap a:hover {
		color:#0070b8;
		background-color:#fff;
		background-image: url( "../img/arrow_o.png" );
	}
}

/*--------------------  ボックスタイトル設定 右2  --------------------*/

@media screen and (max-width: 639px) {
	.box-title-or-r2 h3 span {
		display: block;
		font-size: 15px;
	}
}

@media screen and (min-width: 640px) {
	.box-title-or-r2 {
		position: absolute;
		width: 180px;
		height:80px;
		padding: 5px 5px 5px 5px;
		box-shadow: 0 0 8px gray;
		top:0;
		right:0;
		background-color: rgba(0,112,184, 0.76);
	}
	
	.box-title-or-r2 h3 {
		font-size: 25px;
		font-weight: 600;
		margin-bottom: 10px;
		line-height: 1;/*行高は1に*/
		padding: 10px 10px 0px;/*文字周りの余白*/

	}
	.box-title-or-r2 h3 span {
		display: block;
		padding-top:5px;
		font-size: 15px;
	}
}