@charset "utf-8";
*{
	flex-basis : auto !important;
}
/* # =================================================================
#### front-page専用
# ================================================================= */
.is-layout-flex{
	gap : 0;
}
.content{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.content .wrap{
	position : relative;
	display : block;
	width : 1100px;
	height : auto;
	margin : 0 auto;
	padding : 50px 0;
}
/****  ****/
.front-headline{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	font-size : 36px;
	margin-bottom : 50px;
}
/****  *****/
.more{
	position : relative;
	display : block;
	width : fit-content !important;
	height : auto;
	margin : 0 auto;
}
.more a{
	display : block;
	width : 100%;
	height : auto;
	line-height : 1;
	text-align : center;
	border-radius : 5px;
	border : 1px solid #0A5774;
	background-color : #0A5774;
	color : #FFF;
	font-size : var(--18px);
	padding : 20px 60px;
}
.more a:hover{
	background-color : #FFF;
	color : #0A5774;
}
.more a::after{
	content : "";
	position : absolute;
	display : block;
	width : 14px;
	height : 14px;
	background : url(../../images/common/arrow_w.png)center / cover no-repeat;
	top : 2px;
	right : 25px;
	bottom : 0;
	left : auto;
	margin : auto auto;
}
.more a:hover::after{
	background : url(../../images/common/arrow_b.png)center / cover no-repeat;
}
.p-front-news__btn{
	position : relative;
	display : block;
	width : 100%;
	height : auto;

}
.p-front-news__btn a{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
	margin : 0 0 15px auto;
	padding-right : 1em;
}
.p-front-news__btn a:after{
	content : "";
	position : absolute;
	display : block;
	width : 14px;
	height : 14px;
	background : url(../../images/common/arrow_b.png)center / cover no-repeat;
	top : 2px;
	right : 0;
	bottom : 0;
	left : auto;
	margin : auto auto;
}
/* # =================================================================
#### main-section
# ================================================================= */
.main-section{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.main-section .is-layout-flex{
	position : relative;
	display : flex;
	flex-wrap : wrap !important;
	justify-content : space-between;
	width : 100%;
	height : auto;
}
.main-section .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow{
	position : relative;
	display : block;
	width : 50%;
	height : auto;
	flex-basis : auto;
}
.main-section .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:nth-child(1){
	background-color : #00769D;
	padding : 50px 100px;
}
.main-section h2{
	position : relative;
	display : block;
	width : 100%;
	color : #FFF;
	font-size : var(--36px);
	margin-bottom : 30px;
}
.main-section h3{
	position : relative;
	display : block;
	width : 100%;
	color : #FFF;
	font-size : var(--22px);
	font-weight : normal;
	margin-bottom : 50px;
}
.main-section p{
	position : relative;
	display : block;
	width : 100%;
	color : #FFF;
	font-size : var(--16px);
	margin-bottom : 30px;
}
.main-section p:nth-oftype(2){
	margin-bottom : 0;
}
.center{
	position : absolute;
	display : flex;
	flex-wrap : wrap;
	flex-direction : column;
	justify-content : center;
	width : 80%;
	height : auto;
	top : 0;
	right : 0;
	bottom : 0;
	left : 0;
	margin : auto auto;
	align-items : center;
}
/* # =================================================================
#### content01
# ================================================================= */
.content01{
	background-color : #FFF;
}
.content01 .wrap{
	
}
.content01 p{
	position : relative;
	display : block;
	width : 100%;
	text-align : center;
	color : #0A5774;
	font-size : var(--22px);
	font-weight : bold;
}
/* # =================================================================
#### content02
# ================================================================= */
.content02{
	position : relative;
	display : block;
	width : 100%;
	background : url(../../images/top/img_background.png) center / cover no-repeat;
}
.content02 .wrap {
	padding-bottom : 30px;
}
.content02 .is-layout-flex{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
}
.content02 .is-layout-flex .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow{
	
}
.content02 .is-layout-flex .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:nth-child(1),
.content02 .is-layout-flex .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:nth-child(3){
	position : relative;
	display : block;
	width : 260px;
	height : auto;
}
.content02 .is-layout-flex .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:nth-child(1) img,
.content02 .is-layout-flex .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:nth-child(3) img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.content02 .is-layout-flex .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:nth-child(2){
	position : relative;
	display : block;
	width : calc(100% - 520px);
	height : auto;
}
.content02 .is-layout-flex .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:nth-child(2) p{
	position : relative;
	display : block;
	width : 100%;
	height :auto;
	text-align : center;
	font-size : var(--20px);
	font-weight : bold;
	margin-bottom : 30px;
}
/* # =================================================================
#### content03 content04
# ================================================================= */
.content03 .is-layout-flex,
.content04 .is-layout-flex{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
	margin-bottom : 150px;
}
.content03 .is-layout-flex .box,
.content04 .is-layout-flex .box{
	position : relative;
	display : block;
	width : 50%;
	height : auto;
}
.content03 .is-layout-flex .box figure,
.content04 .is-layout-flex .box figure
.content03 .is-layout-flex .box img,
.content04 .is-layout-flex .box img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.content04 .is-layout-flex .box.left-box{
	order : 2;
}
.content04 .is-layout-flex .box.right-box{
	order : 1;
}
.content03 .is-layout-flex .box.left-box,
.content04 .is-layout-flex .box.left-box{
	background-color : #0A5774;
	padding : 100px 80px;
}
.content03 .is-layout-flex .box.left-box,
.content04 .is-layout-flex .box.right-box{
	top : 100px;
}
.content03 .is-layout-flex .box.left-box h3,
.content04 .is-layout-flex .box.left-box h3{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	color : #FFF;
	font-size : 26px;
	margin-bottom : 30px;
}
.content03 .is-layout-flex .box.left-box p,
.content04 .is-layout-flex .box.left-box p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : justify;
	color : #FFF;
	font-size : 16px;
}
/* # =================================================================
#### content03
# ================================================================= */
.content03{
	
}
.content03 .front-headline::after{
	content : "Technology";
	position : absolute;
	display : block;
	top : auto;
	right : 0;
	bottom : -20px;
	left : 0;
	margin : auto auto;
	color : #5F6C89;
	font-size : 16px;
	font-weight : normal;
}

/* # =================================================================
#### content04
# ================================================================= */
.content04{
	
}
.content04 .front-headline::after{
	content : "Products";
	position : absolute;
	display : block;
	top : auto;
	right : 0;
	bottom : -20px;
	left : 0;
	margin : auto auto;
	color : #5F6C89;
	font-size : 16px;
	font-weight : normal;
}


/* # =================================================================
#### content05
# ================================================================= */
.content05{
	
}
.content05 .flex{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
}
.content05 .flex .box{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	align-items : flex-end;
	width : 49%;
	height : auto;
	border-radius: 5px;
	border : 1px solid #5F6C89;
	padding : 10px;
	background-color : #FFF;
	transition : 0.5s;
}
.content05 .flex .box:hover{
	background-color : #0A5774;
	transition : 0.5s;
}
.content05 .flex .box h2{
	color : var(--font-color);
	transition : 0.5s;
}
.content05 .flex .box:hover h2{
	color : #FFF !important;
	transition : 0.5s;
}
.content05 .flex .box h2::after{
	content : "Products";
	position : absolute;
	display : block;
	top : auto;
	right : 0;
	bottom : 40px;
	left : 10px;
	margin : auto auto;
	color : #5F6C89;
	font-size : 16px;
	font-weight : normal;
	transition : 0.5s;
}
.content05 .flex .box:hover h2::after{
	color : #FFF !important;
	transition : 0.5s;
}
.content05 .flex .box:nth-of-type(2) h2::after{
	content : "Recruit";
}
.content05 .flex .box figure{
	position : relative;
	display : block;
	width : 50%;
	height : auto;
}
.content05 .flex .box figure img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/* # =================================================================
#### post news
# ================================================================= */
.p-front-news{
	position : relative;
	display : block;
	width : 100%;
	height :auto;
}
.p-front-news__inner.wrp{
	position : relative;
	display : block;
	width : 750px;
	height : auto;
	margin : 0 auto;
	padding : 0 0 50px;
}
.p-front-news .front-headline::after{
	content : "News";
	position : absolute;
	display : block;
	top : auto;
	right : 0;
	bottom : -20px;
	left : 0;
	margin : auto auto;
	color : #5F6C89;
	font-size : 16px;
	font-weight : normal;
}
.p-news-list{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
	border-top : 1px solid #707070;
	border-bottom : 1px solid #707070;
	padding : 25px 0;
}
.p-news-list dt{
	position : relative;
	display : block;
	width : 10em;
	height :auto;
	margin-bottom : 15px;
}
.p-news-list dt time{
	position : relative;
	display : block;
	width : 100%;
	height :auto;
}
.p-news-list dd{
	position : relative;
	display : block;
	width : calc(100% - 10em);
	height :auto;
	margin-bottom : 15px;
}
.p-news-list dd a{
	position : relative;
	display : block;
	width : 100%;
	height :auto;
}
.p-news-list dd span{
	position : relative;
	display : block;
	width : 100%;
	height :auto;
	overflow : hidden;
	text-overflow : ellipsis;
	white-space : nowrap;
}
.p-news-list dt:last-of-type,
.p-news-list dd:last-of-type{
	margin-bottom : 0;
}




/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1366px
# ================================================================= */
@media screen and (max-width: 1366px){
.main-section h2{
	font-size : var(--30px);
	margin-bottom : 25px;
}
.main-section h3{
	font-size : var(--18px);
	margin-bottom : 40px;
}
.main-section p{
	font-size : var(--15px);
	margin-bottom : 25px;
}



}/*** 1366px ***/
/* # =================================================================
#### 1200px
# ================================================================= */
@media screen and (max-width: 1200px){
.content .wrap{
	width : 100%;
	padding : 50px 15px;
}
.center{
	width : 90%;
}
}/*** 1200px ***/
/* # =================================================================
#### 1024px
# ================================================================= */
@media screen and (max-width: 1024px){
.main-section .is-layout-flex{
	margin-bottom : 0;
}
.main-section .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow{
	width : 100%;
}
.main-section .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:nth-child(1){
	width : 100%;
	padding : 30px;
	order : 2;
}
.center{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/* # =================================================================
#### content03 content04
# ================================================================= */
.content03 .is-layout-flex .box.left-box,
.content04 .is-layout-flex .box.left-box{
	padding : 50px;
}



}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){
/* # =================================================================
#### content01
# ================================================================= */
.content01 p{
	font-size : 20px;
}
/* # =================================================================
#### content02
# ================================================================= */
.content02 .is-layout-flex.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{
	flex-grow : 0 !important;
	flex-shrink : 0 !important;
	flex-basis : auto !important;
}
.content02 .is-layout-flex{
	flex-wrap : wrap !important;
	justify-content : center;
	margin-bottom : 0;
}
.content02 .is-layout-flex .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:nth-child(2){
	order : 1;
	width : 100%;
	margin-bottom : 20px;
}
.content02 .is-layout-flex .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:nth-child(1),
.content02 .is-layout-flex .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:nth-child(3){
	width : 30%;
}
.content02 .is-layout-flex .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:nth-child(1){
	order : 2;
}
.content02 .is-layout-flex .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:nth-child(3){
	order : 3;
}
/* # =================================================================
#### content03 content04
# ================================================================= */
.content03 .is-layout-flex,
.content04 .is-layout-flex{
	margin-bottom : 50px;
}
.content03 .is-layout-flex .box.left-box{
	order : 1;
	top : 0;
}
.content03 .is-layout-flex .box.right-box{
	order : 2;
	top : 0;
}
.content04 .is-layout-flex .box.left-box{
	order : 1;
	top : 0;
}
.content04 .is-layout-flex .box.right-box{
	order : 2;
	top : 0;
}
/* # =================================================================
#### content05
# ================================================================= */
.content05 .flex{
	display : block;
}
.content05 .flex .box{
	width : 450px;
	margin : 0 auto 30px;
}
.content05 .flex .box:last-child{
	margin-bottom : 0;
}
/* # =================================================================
#### p-front-news
# ================================================================= */
.p-front-news__inner.wrp{
	width : 100%;
	padding : 0 15px 50px;
}






}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){
.front-headline{
	font-size : 24px;
}



.main-section .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow:nth-child(1){
	padding : 30px 15px;
}
.main-section h2{
	font-size : 24px;
}
.main-section h3{
	margin-bottom : 30px;
}
.main-section p{
	margin-bottom : 15px;
}
/* # =================================================================
#### content01
# ================================================================= */
.content01 .wrap{
	padding : 30px 15px;
}
.content01 p{
	font-size : 18px;
}
/* # =================================================================
#### content03 content04
# ================================================================= */
.content03 .is-layout-flex .box.left-box,
.content04 .is-layout-flex .box.left-box{
	padding : 30px;
}
.content03 .is-layout-flex .box.left-box h3,
.content04 .is-layout-flex .box.left-box h3{
	font-size : 20px;
	margin-bottom : 15px;
}
/* # =================================================================
#### content05
# ================================================================= */

.content05 .flex .box{
	width : 80%;
}

/* # =================================================================
#### p-front-news
# ================================================================= */
.p-news-list{
	border-bottom : none;
}
.p-news-list dt{
	width : 100%;
	margin-bottom : 5px;
}
.p-news-list dt time{
	font-size : 14px;
}
.p-news-list dd{
	width : 100%;
	border-bottom : 1px solid #707070;
	padding-bottom : 15px;
}


}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){

}/*** 480px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){

}/*** 320px ***/