@charset "UTF-8";
/* ---------------------------------------------------------------------------------------------

　   メインコンテンツ

--------------------------------------------------------------------------------------------- */
#main {
float: none;
width:100%;
text-align: left;
overflow: hidden
}
.hidden {
width: 100%;
overflow: hidden;
}
.br_hidden{
  display: none;
}
@media screen and (min-width: 981px) {
.br_hidden{
display: block;
}
}

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

　   video

--------------------------------------------------------------------------------------------- */
.wrap-video-box {
max-width: 100%;
margin: 0 auto;
overflow:hidden;
}	
.wrap-video {
max-width: 100%;
}
.wrap-video video{
max-width: 100%;
width: 100%;
height:400px;
object-fit: cover;
font-family: 'object-fit: cover;'; /*IE対策*/
display: block;
margin:auto;
}

@media screen and (min-width: 768px) {
.wrap-video video{
height: auto;
}}

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

　   About Us

--------------------------------------------------------------------------------------------- */
.message {
  padding: 0;
  width:100%;
  box-sizing:border-box;
	text-align: left;
	overflow: hidden;
  }
.message h4 {
	font-weight: normal;
	font-size: 150%;
	line-height: 1.5;
	margin: 0 0 3% 0;
	letter-spacing:.1em;
}
.message p {
font-weight: normal;
font-size: 100%;
text-align: left;
line-height: 2;
margin-bottom: 30px
}
.about_img {
position: relative;
display: inline-block;
padding: 0;
width:100%;
height:400px;
}
.about_img img{
display: block;
max-width: 100%;
height: auto;
}
.about_img img:first-of-type {
position: absolute;
right:0;
bottom: 0;
width: 90%;
height: 90%;
}

.about_img img:nth-of-type(2){
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    height: 150px;
		object-fit: cover;
}

@media screen and (min-width: 768px) {
.about_img {
height:550px;
}
.about_img img:first-of-type {
height:450px;
}
} 
@media screen and (min-width: 981px) {
.message p {
text-align: left;
line-height: 2.1;
}
.about_img {
width:750px;
height:500px;
}
.about_img img:nth-of-type(2){
width: 200px;
height: 200px;
}
}


/*	 message　2等分
/* ------------------------------------- */
.column-wrapper {
  width: 100%;
  display: flex;
	margin: 50px 0;
	overflow:hidden
}
.column1{
  width: 50%;
  display: flex;
  align-items: center;
}
.column2 {
  width: 50%;
  display: flex;
  align-items: start;
	height: 600px;
}
.column1 {
  padding: 0 5%;
  box-sizing: border-box;
}

.column2 img {
max-width: 100%;
height: auto;
object-fit: cover
}

@media screen and ( max-width:767px ){
  .column-wrapper {
    flex-direction: column;
		margin: 5% 0;
  }
  .column1, .column2 {
  width: 100%;
	height: auto;
}
  .column1 {
  padding: 0 3% 6% 3%;
} 
}

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

　   read-more

--------------------------------------------------------------------------------------------- */
/* 紺色 */

a.btn_read_more {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 160px;	
	padding: 0.5rem 0;
	border: 1px solid #004098;
	color: #004098;
	transition: 0.5s;
	
	font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
	font-weight: 200;
}
a.btn_read_more:hover {
	color: #fff;
	background: #004098;
	border: 1px solid #004098;}

/* 白色 */
a.btn_read_more_w {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 160px;	
	padding: 0.5rem 0;
	border: 1px solid #fff;
	color: #004098;
	transition: 0.5s;
	float: right;
	background: #fff;
	
	font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
	font-weight: 200;
}
a.btn_read_more_w:hover {
	color: #fff;
	background: #004098;
}


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

　   セクション1 works

--------------------------------------------------------------------------------------------- */
.section-two-h3 {
text-align:center;
font-size: 30px;
line-height: 1.5;
font-weight: bold;
letter-spacing:.05em;
margin: 10px 0
}
.section-two-h3-left {
text-align:left;
font-size: 40px;
line-height: 1.5;
font-weight: bold;
letter-spacing:.05em;
margin: 0 0 2% 0;
}
.section-two-h3 span,
.section-two-h3-left span{
font-size: 11px;
  display: block;
  margin-top: 0;
	font-weight: normal;
}

/*	 works　2等分
/* ------------------------------------- */
.two-title-pc:after	{content: "";
	display: block;
	clear: both}

.two-title-l	{float: left;
	width: 50%}
.two-title-r	{float: right;
	width: 50%;
	text-align: right}


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

　   お知らせ

--------------------------------------------------------------------------------------------- */
.two-news-pc:after	{content: "";
	display: block;
	clear: both}
@media screen and (min-width: 981px) {
.two-news-l	{float: left;
	width: 25%}
.two-news-r	{float: right;
	width: 70%;
}
}
/*	 two-news-l
/* ------------------------------------- */
@media only screen and (max-width: 980px) {
.two-news-l:after	{content: "";
	display: block;
	clear: both}
.two-news-l-l{float: left;
	width: 50%}
.two-news-l-r{float: right;
	width: 30%;
	text-align: right}
	.two-news-l-r a.btn_read_more{
float: right
}}

/*	 News
/* ------------------------------------- */
.info_box {
width: 100%;
margin: 0 21px 0 0;
padding: 15px 0;
border-bottom: #808080 1px solid;
text-align: left;
}
.info_box a {
display: block;
width: 100%;
height: 100%;
}
.info_box a p {
float: left;
font-size: 85%;
margin: 3px 0 0 0;
color: #555;
font-weight: normal;
padding:0;
}
.info_box a h5 {
text-decoration: none;
font-weight: normal;
font-size: 100%;
line-height: 150%;
color: #555;
padding:5px 0;
}
.info_box a h5:hover {
text-decoration: underline;
}
@media screen and (max-width: 981px) {
.info_box a h5{
clear: both
}}

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

　   おしらせ　カテゴリの設定

--------------------------------------------------------------------------------------------- */
.info_box span{
width:100px;height:auto;float:left;margin:0 10px 5px 10px;z-index:9999;
padding: 1px;
text-align: center;
font-size: 75%;
color:#fff;
background: #004098;
line-height: 2em;
}
.info_box:after {    
  content: "";
  display: block;
  clear: both;
}

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

　   Works

--------------------------------------------------------------------------------------------- */
.work_box_list a {
	text-decoration: none;
	color: #fff;
}
.catebl {
	padding: 3px 8px;
	color: #fff;
	border: solid 1px #fff
}

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

} 
@media screen and (min-width: 981px) {

}
@media screen and (min-width: 1200px) {

}