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


:root{
    --container: 1280px;
    --gutter: max(20px, calc((100vw - var(--container)) / 2));
}
.fv .bg_img_wrap2{
	height: 650px;  
	overflow: visible;
}
.fv h1{
	font-size: 46px;
}
.fv .txtbox{
	align-items: flex-start;
	position: relative;
	transform: translateY(100px);
}

.cate1{
	position: relative;
    gap: 0;
    align-items: flex-start;
	margin-bottom: 150px;
}
.cate1 .leftbox{
    width: 44%;
    position: relative;
    z-index: 2; 
}
.cate1 .rightbox{
    width: 56%;
    border-radius: 8px 0 0 8px;
    padding: 150px 80px 150px 150px;
    position: relative;
    z-index: 1;
}
.cate1 .leftbox .imgbox{
    margin-top: 50px;
    width: 100%;
    transform: translateX(40px); 
}
.cate1 .leftbox .imgbox img{
    width: 100%;
    display: block;
    border-radius: 8px;
    object-fit: cover;
}
.cate1 .rightbox .more{
    justify-content: flex-start;
}
.cate1 .leftbox .title-style1{
    margin-left: var(--gutter);
}

.cate2 .more2 a{
	width: 100%;
}
.cate2 .more2 a > .flex{
	justify-content: center;
}
.cate2 .box_wrap{
	gap: 80px 40px;
}
.cate2 .box_wrap .box-item{
	width: calc(50% - 20px);
}
.cate2 .box_wrap .box-item .txtbox{
	background-color: #fff;
	padding: 40px 30px;
	border-radius: 0 0 8px 8px;
}
.cate2 .box_wrap .box-item .txtbox .txt-item{
	width: 100%;
	gap: 10px;
	margin-bottom: 20px;
	margin-top: 30px;
}
.cate2 .box_wrap .box-item .txtbox .txt-item .line{
	border: #143F914D 1px solid;
	flex: 1
}
.cate2 .box_wrap .box-item .txtbox .item-wrap{
	gap: 10px 30px;
	justify-content: flex-start;
}
.cate2 .box_wrap .box-item .txtbox .item-wrap .dot-blue{
	position: relative;
    display: inline-block;
    padding-left: 18px;
}
.cate2 .box_wrap .box-item .txtbox .item-wrap .dot-blue::before{
	content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #143F91;
    border-radius: 50%;
    left: 0;
    top: 50%;
	transform: translateY(-50%);
}
.cate2 .box_wrap .box-item .imgbox{
	position: relative;
}
.cate2 .box_wrap .box-item .imgbox .num{
	position: absolute;
	top: 20px;
	left: 20px;
}
.cate2 .box_wrap .box-item .imgbox img{
	border-radius: 8px 8px 0 0;
}

.cate3 .box_wrap{
	gap: 20px;
}
.cate3 .box_wrap .boxitem{
	width: calc(50% - 10px);
	border: #E6E6E6 2px solid;
	border-radius: 8px;
	padding: 30px;
}
.cate3 .box_wrap .boxitem .bottombox{
	gap: 20px;
}
.cate3 .box_wrap .boxitem .bottombox .bottom-left{
	width: calc(20% - 10px);
}
.cate3 .box_wrap .boxitem .bottombox .bottom-right{
	width: calc(80% - 10px);
}
.cate3 .box_wrap .boxitem .bottombox .bottom-right .line{
	padding-top: 15px;
	margin-top: 15px;
	border-top: #E6E6E6 1px solid;
}

.cate4 .cate4-box{
	gap: 60px;
	align-items: stretch;
}
.cate4 .cate4-box .titlebox{
	width: calc(20% - 30px);
	flex-direction: column;
	justify-content: space-between;
	align-self: stretch; 
}
.cate4 .cate4-box .newstop_b{
	width: calc(80% - 30px);
}
.cate4 .cate4-box .titlebox .more{
    margin-top: auto;
}
.newstop_b .webgene-blog .webgene-item {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: none;
}
.newstop_b .webgene-blog .webgene-item a .catelabel {
    border: #133F91 solid 1px;
    border-radius: 50px;
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.fv h1{
		font-size: 40px;
	}
	.pagetitle_h .bg_img_wrap2 .txtbox {
		padding: 0 60px;
	}
	.cate1 .rightbox{
		width: 56%;
		border-radius: 8px 0 0 8px;
		padding: 100px 80px 100px 80px;
		position: relative;
		z-index: 1;
	}
	.cate1{
		margin-bottom: 100px;
	}
	.cate3 .box_wrap .boxitem .bottombox {
		flex-direction: column;
	}
	.cate3 .box_wrap .boxitem .bottombox .bottom-left {
		width: 30%;
	}
	.cate3 .box_wrap .boxitem .bottombox .bottom-right {
		width: 100%;
	}

}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.fv h1{
		font-size: 36px;
	}
	.cate1{
        flex-direction: column;
        gap: 20px;
    }

    .cate1 .leftbox,
    .cate1 .rightbox{
        width: 100%;
    }
    .cate1 .leftbox .title-style1{
        margin-left: 0;
		margin-left: 60px;
		margin-right: 60px;
    }
    .cate1 .leftbox .imgbox{
        width: 60%;
        margin: 0 auto;
        transform: none; 
    }
    .cate1 .rightbox {
        border-radius: 0;
        padding: 80px 60px;
    }
	.cate1{
		margin-bottom: 80px;
	}
    .cate2 .box_wrap {
		flex-direction: column;
		gap: 50px;
	}
	.cate2 .box_wrap .box-item {
		width: 80%;
	}
	.cate1{
		margin-bottom: 0px;
	}
	.cate3 .box_wrap .boxitem .bottombox .bottom-left {
		width: 35%;
	}
	.cate4 .cate4-box{
		flex-direction: column;
	}
	.cate4 .cate4-box .newstop_b {
		width: 100%;
	}
	.cate4 .cate4-box{
		gap: 30px;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.pagetitle_h .bg_img_wrap2 .txtbox {
		padding: 0 50px;
	}
    .fv h1 {
        font-size: 32px;
    }
    .cate1 .rightbox {
        padding: 80px 50px;
    }
    .cate1 .leftbox .title-style1{
		margin-left: 50px;
		margin-right: 50px;
    }
	.cate3 .box_wrap {
		flex-direction: column;
	}
	.cate3 .box_wrap .boxitem {
		width: 80%;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.pagetitle_h .bg_img_wrap2 .txtbox {
		padding: 0 20px;
	}
    .fv h1 {
        font-size: 28px;
    }
    .cate1 .rightbox {
        padding: 50px 20px;
    }
    .cate1 .leftbox .title-style1{
		margin-left: 20px;
		margin-right: 20px;
    }
    .cate1 .leftbox .imgbox {
        width: 80%;
    }
	.cate2 .box_wrap .box-item {
		width: 100%;
	}
	.cate2 .box_wrap .box-item .txtbox {
		padding: 30px 20px;
	}
    .cate2 .box_wrap {
        gap: 30px;
    }
	.cate3 .box_wrap .boxitem {
		width: 100%;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}