@charset "utf-8";

header{
	background: none;
	height: 88px;
}

header.active,
header.navIn{
	background: #fff;
}

#mainBlock{
	margin-top: 0;
}

.hd01 {
	font-size: 2rem;
}
.hd01 span{
	display: inline-block;
	margin-top: 10px;
	color: #414040;
	letter-spacing: 0.01em;
}

#mainBlock .btn{
	padding: 0 18px;
	border-radius: 30px;
	max-width: 268px;
	line-height: 60px;
	width: 100%;
}

@media screen and (max-width: 767px){
	header{
		height: 50px;
	}
	.hd01 {
		font-size: 1.6rem;
	}
	.hd01 span{
		margin-top: 11px;
	}
	#mainBlock .btn{
		max-width: 250px;
		line-height: 53px;
	}
}


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

/* MAIN

/* ------------------------------------------------------------------------ */
#sec_main{
	background: #F1F1F1;
	position: relative;
}
#sec_main::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: #F1F1F1;
	transform: skewY(8.5deg);
	transform-origin: top left;
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
}

#sec_main .polygon{
	width: 52%;
	height: 146px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#sec_main .polygon::after{
	content: "";
	display: block;
	background-color: #fff;
	clip-path: polygon(0 0, 0 100%, 100% 0);
	width: 100%;
	height: 100%;
}

.swiper-main{
	position: relative;
	padding: 170px 0 21px;
}

.swiper-main .swiper-slide{
	max-width: 316px;
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.8s;
}
.swiper-main .swiper-slide-active{
	transform: scale(1.31961);/*417px*/
	z-index: 1;
}
.swiper-main .swiper-slide-prev{
	transform: translateX(-24px);
}
.swiper-main .swiper-slide-next{
	transform: translateX(24px);
}

.swiper-main .hd{
	transition-delay: inherit;
	position: relative;
	z-index: 1;
}

.swiper-main .img-txt{
	position: absolute;
	bottom: -101px;
	left: 51.19%;
	transform: translateX(-50%);
	z-index: 10;
	max-width: 600px;
	width: 66%;
}

.swiper-main .swiper-button-wrap{
	max-width: 1047px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	height: 41px;
}

.swiper-main .swiper-button-wrap button{
	font-family: "Montserrat", serif;
	font-weight: 600;
	font-size: 1.8rem;
	color: #032E83;
	background: none;
	border-bottom: solid 1px #032E83;
	padding: 0 0 5px;
	position: absolute;
	bottom: 0;
	z-index: 1;
}

.swiper-main .swiper-button-wrap button.swiper-button-prev{
	left: 13px;
}
.swiper-main .swiper-button-wrap button.swiper-button-prev::before{
	content: "";
	display: inline-block;
	background: url("/common/img/icon_arrow_og.svg") no-repeat center / contain;
	width: 30px;
	height: 15px;
	transform: scale(-1,1);
	margin-right: 10px
}

.swiper-main .swiper-button-wrap button.swiper-button-next{
	right: -13px;
}
.swiper-main .swiper-button-wrap button.swiper-button-next::after{
	content: "";
	display: inline-block;
	background: url("/common/img/icon_arrow_og.svg") no-repeat center / contain;
	width: 30px;
	height: 15px;
	margin-left: 10px;
}

@media screen and (max-width: 1024px){
	#sec_main .polygon{
		width: 82%;
		height: 18%;
	}
	.swiper-main .img-txt{
		bottom: -13%;
	}
	.swiper-main .swiper-button-wrap button.swiper-button-prev{
		left: 20px;
	}
	.swiper-main .swiper-button-wrap button.swiper-button-next{
		right: 20px;
	}
}
@media screen and (max-width: 767px){
	#sec_main::before{
		transform: skewY(10.8deg);
	}
	#sec_main .polygon{
		width: 138%;
		height: 15%;
	}
	
	.swiper-main .img-txt{
		max-width: 350px;
		bottom: -17px;
		width: 71%;
	}
	
	.swiper-main{
		padding: 92px 0 39px;
	}
	
	.swiper-main .swiper-slide{
		max-width: 208px;
	}
	
	.swiper-main .swiper-slide-active{
		transform: scale(1.3);
	}
	.swiper-main .swiper-slide-prev{
		transform: translateX(-13px);
	}
	.swiper-main .swiper-slide-next{
		transform: translateX(13px);
	}
	.swiper-main .swiper-button-wrap button{
		border: none;
		width: 36px;
		height: 36px;
		display: block;
		background: #F85B00;
		border-radius: 50%;
		bottom: -6px;
		padding: 0;
	}
	.swiper-main .swiper-button-wrap button span{
		display: none;
	}
	
	.swiper-main .swiper-button-wrap button.swiper-button-prev{
		left: 10px;
	}
	.swiper-main .swiper-button-wrap button.swiper-button-prev::before{
		background-image: url("/common/img/icon_arrow_wh.svg");
		margin-right: 0;
		width: 20px;
	}
	.swiper-main .swiper-button-wrap button.swiper-button-next{
		right: 7px;
	}
	.swiper-main .swiper-button-wrap button.swiper-button-next::after{
		background-image: url("/common/img/icon_arrow_wh.svg");
		margin-left: 0;
		width: 20px;
	}
}

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

/* SERVICE

/* ------------------------------------------------------------------------ */
#sec_service{
	padding: 188px 0 169px;
	background: #032E83 url("../img/line_bingo.svg") repeat-x center bottom;
	position: relative;
}
#sec_service > .contents{
	position: relative;
	z-index: 5;
}
#sec_service .txtBox{
	text-align: left;
	color: #fff;
	font-weight: 700;
	width: 49.5%;
}

#sec_service .txtBox .hd01{
	font-size: 5.4rem;
	line-height: 1.333;
}

#sec_service .txtBox .lead{
	font-size: 1.8rem;
	line-height: 2;
	margin-top: 25px;
	max-width: 446px;
}

#sec_service .btn{
	margin-top: 23px;
	border: solid 2px #F85B00;
	line-height: 56px;
}

#sec_service figure{
	margin-top: 6px;
	width: 50.2%;
}

@media screen and (max-width: 800px){
	#sec_service > .contents{
		flex-direction: column-reverse;
	}
	#sec_service figure{
		margin: 0 auto;
		width: calc(100% + 5px);
	}
	#sec_service .txtBox{
		margin-top: 14px;
		padding: 0 16px;
		width: 100%;
	}
	#sec_service .txtBox .lead{
		width: 100%;
		max-width: inherit;
	}
}

@media screen and (max-width: 767px){
	#sec_service{
		padding: 41px 0 86px;
		background-image: url("../img/line_bingo_sp.svg");
	}
	#sec_service .txtBox .hd01{
		font-size: 3.4rem;
		line-height: 1.412;
	}
	#sec_service .txtBox .lead{
		font-size: 1.4rem;
		margin-top: 15px;
	}
	#sec_service .btn{
		line-height: 49px;
	}
}


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

/* MEDIA

/* ------------------------------------------------------------------------ */
#sec_media{
	padding: 0 0 100px;
}
#sec_media .firstBox{
	background: #F1F1F1;
	border-radius: 20px;
	margin-top: -40px;
	padding: 40px 35px;
	position: relative;
	z-index: 10;
}
#sec_media .firstBox .lead{
	font-size: 3.6rem;
	font-weight: 700;
	color: #414040;
	line-height: 1.333;
}
	#sec_media .firstBox .lead .orange{
		color: #F85B00;
	}

#sec_media .firstBox ul{
	margin: 28px -10px 0;
}
#sec_media .firstBox ul li{
	background: #fff;
	border-radius: 10px;
	padding: 9px 25px 24px;
	width: calc(100% / 3 - 20px);
	margin: 0 10px;
}

#sec_media .firstBox .hdBox{
	position: relative;
	line-height: 1.2;
	min-height: 115px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 -10px;
}
#sec_media .firstBox .hdBox::before{
	content: "";
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-right: 10px;
	width: 72px;
	height: 72px;
	flex-shrink: 0;
}
#sec_media .firstBox li:first-child .hdBox::before{
	background-image: url("../img/icon_client.svg");
}
#sec_media .firstBox li:nth-child(2) .hdBox::before{
	background-image: url("../img/icon_pc.svg");
}
#sec_media .firstBox li:last-child .hdBox::before{
	background-image: url("../img/icon_seisaku.svg");
}

#sec_media .firstBox .hdBox p{
	font-size: 2.6rem;
	font-weight: 900;
	color: #032E83;
	line-height: 1;
}
#sec_media .firstBox .hdBox .ttl{
	font-size: 2rem;
	font-weight: 700;
	color: #414040;
}
#sec_media .firstBox .hdBox .num{
	font-family: "Montserrat", serif;
	font-size: 6rem;
	font-weight: 600;
}
#sec_media .firstBox .hdBox .min{
	font-size: 1.4rem;
	font-weight: 700;
}

#sec_media .firstBox li:last-child .hdBox .min{
	display: block;
	margin-top: -5px;
}

#sec_media .firstBox .txt{
	text-align: left;
	color: #414040;
	font-weight: 500;
	line-height: 1.75;
	margin-top: 8px;
}


#sec_media .secondBox .hd01{
	font-size: 4.2rem;
	color: #032E83;
	line-height: 0.92;
	margin-top: 70px;
}
#sec_media .secondBox .hd01 span{
	font-family: "Montserrat", serif;
	font-size: 2rem;
	font-weight: 500;
	color: #414040;
	margin-top: 0;
}

#sec_media .mediaList{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 8px -12.5px 0;
}
#sec_media .mediaList li{
	background: #F1F1F1;
	border-radius: 10px;
	padding: 25px 35px;
	margin: 25px 12.5px 0;
	width: calc(100% / 3 - 25px);
}

#sec_media .mediaList h3{
	font-size: 2rem;
	color: #032E83;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
#sec_media .mediaList p{
	margin-top: 20px;
	text-align: left;
	font-weight: 700;
	color: #414040;
	line-height: 1.75;
	letter-spacing: 0.01em;
}

#sec_media .mediaList h3::before{
	content: "";
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-right: 7px;
	width: 29px;
	height: 29px;
}
#sec_media .mediaList .traffic h3::before{
	background-image: url("../img/icon_train.svg");
}
#sec_media .mediaList .internet h3::before{
	background-image: url("../img/icon_earth.svg");
}
#sec_media .mediaList .tv h3::before{
	background-image: url("../img/icon_tv.svg");
}
#sec_media .mediaList .radio h3::before{
	background-image: url("../img/icon_radio.svg");
}
#sec_media .mediaList .newspaper h3::before{
	background-image: url("../img/icon_newspaper.svg");
}

@media screen and (max-width: 1180px){
	#sec_media .firstBox ul li{
		padding-left: 12px;
		padding-right: 12px;
	}
	#sec_media .firstBox .hdBox{
		min-height: inherit;
	}
	#sec_media .firstBox .hdBox::before{
		width: 52px;
		height: 52px;
		margin-right: 10px;
	}
	#sec_media .firstBox .hdBox p{
		font-size: 1.4rem;
		line-height: 1.2;
	}
	#sec_media .firstBox .hdBox .ttl{
		font-size: 1.5rem;
	}
	#sec_media .firstBox .hdBox .num{
		font-size: 3.5rem;
	}
	#sec_media .firstBox li:last-child .hdBox .min{
		margin-top: 0;
	}
	
	#sec_media .mediaList li{
		padding: 25px;
	}
}

@media screen and (max-width: 767px){
	#sec_media{
		padding: 0 0 60px;
	}
	#sec_media .firstBox{
		margin-top: -20px;
		border-radius: 10px;
		padding: 18px 5px;
	}
	#sec_media .firstBox .lead{
		font-size: 1.8rem;
		line-height: 1.556;
	}
	#sec_media .firstBox ul{
		display: block;
		margin: 0 auto;
	}
	#sec_media .firstBox ul li{
		max-width: 300px;
		width: calc(100% - 40px);
		margin: 12px auto 0;
		padding: 8px 13px;
	}
	#sec_media .firstBox ul li + li{
		margin-top: 9px;
	}
	#sec_media .firstBox .hdBox{
		margin: 0 auto;
		justify-content: flex-start;
	}
	#sec_media .firstBox .hdBox::before{
		width: 72px;
		height: 72px;
		margin-right: 20px;
	}
	#sec_media .firstBox .hdBox p{
		font-size: 2.6rem;
		line-height: 1;
	}
	#sec_media .firstBox .hdBox .ttl{
		font-size: 1.6rem;
	}
	#sec_media .firstBox .hdBox .num{
		font-size: 5rem;
	}
	#sec_media .firstBox .txt{
		display: none;
	}
	
	#sec_media .secondBox .hd01{
		font-size: 2.8rem;
		margin-top: 48px;
	}
	#sec_media .secondBox .hd01 span{
		font-size: 1.6rem;
	}
	
	#sec_media .mediaList{
		display: block;
		margin: 0 auto;
	}
	#sec_media .mediaList li{
		width: 100%;
		margin: 20px auto 0;
		padding: 25px 20px 21px;
	}
	#sec_media .mediaList li + li{
		margin-top: 9px;
	}
}

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

/* STRENGTH

/* ------------------------------------------------------------------------ */
#sec_strength{
	background: #032E83;
	padding: 100px 0;
}

#sec_strength > .contents{
	width: calc(100% - 57px);
}

#sec_strength .leftBox{
	position: relative;
	width: 47%;
}
	#sec_strength .leftBox::before{
		content: "";
		display: block;
		background: url("../img/strength_img_kv.png") no-repeat center / contain;
		aspect-ratio: 1043/388;
		max-width: 1043px;
		width: 201.7409%;
		position: absolute;
		top: 8px;
		right: -11px;
	}

#sec_strength .txtBox{
	margin-top: 10px;
	margin-left: 80px;
	text-align: left;
	width: calc(53% - 80px);
}
#sec_strength .hd01 span{
	color: #fff;
}
#sec_strength .lead{
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: 0.01em;
	margin-top: 22px;
	color: #fff;
}

#sec_strength .btn{
	border: solid 2px #F85B00;
	margin-top: 40px;
	line-height: 56px;
}

#sec_strength .swiper-strength{
	margin-top: 86px;
}

#sec_strength .swiper-wrapper{
	transition-timing-function: linear;
}

#sec_strength .swiper-wrapper .swiper-slide{
	max-width: 235px;
	width: 100%;
}
#sec_strength .swiper-wrapper .swiper-slide img{
	border-radius: 10px;
}

@media screen and (max-width: 1919px){
	#sec_strength .txtBox{
		margin-left: 0;
	}
	#sec_strength .leftBox{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#sec_strength .leftBox::before{
		width: 55vw;
		top: auto;
		bottom: auto;
	}
}
@media screen and (max-width: 1024px){
	#sec_strength > .contents{
		flex-direction: column-reverse;
	}
	
	#sec_strength .leftBox{
		margin-top: 30px;
		width: 100%;
	}
	#sec_strength .leftBox::before{
		position: relative;
		right: auto;
		left: -55px;
		width: 100%;
	}
	
	#sec_strength .txtBox{
		margin: 0 auto;
		width: auto;
	}
	
	#sec_strength .swiper-strength{
		margin-top: 37px;
	}
}

@media screen and (max-width: 767px){
	#sec_strength{
		padding: 60px 0;
	}
	#sec_strength .leftBox{
		display: block;
		margin-top: 21px;
	}
	#sec_strength .leftBox::before{
		width: calc(100% + 57px);
		top: 0;
		left: -29px;
		background-image: url("../img/strength_img_kv_sp.png");
		aspect-ratio: 375 / 169;
	}
	#sec_strength .lead{
		font-size: 2.4rem;
		line-height: 1.5;
		margin-top: 17px;
	}
	#sec_strength .btn{
		margin-top: 20px;
		line-height: 49px;
	}
}

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

/* NEWS

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

#sec_news{
	background: #F1F1F1;
	padding: 100px 0 95px;
}

.newsBox{
	margin-top: 45px;
}

.newsBox li{
	max-width: 405px;
	/* max-width: 100%!important; */
	position: relative;
  padding:0 1.5rem;
}

.newsBox a{
	color: rgba(0, 0, 0, 0.92);
}

.newsBox figure{
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 405 / 251;
}

.newsBox figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.3s;
}

.newsBox a:hover img{
	transform: scale(1.1);
}

.newsBox .label{
	position: absolute;
	z-index: 10;
	top: -11px;
	left: 0;
	display: flex;
	background: #032E83;
	border-radius: 21px;
	color: #fff;
	font-weight: 700;
	padding: 8px 20px 10px;
}

.newsBox .time{
	display: block;
	text-align: left;
	font-family: "Montserrat", serif;
	font-size: 1.4rem;
	margin-top: 15px;
}

.newsBox .txt{
	text-align: left;
	font-weight: 700;
	line-height: 1.75;
}
.newsBox a:hover .txt{
	color: #F85B00;
}


#sec_news .btn{
	margin-top: 38px;
}

.swiper-news{
	position: relative;
}

.swiper-news .swiper-button-wrap{
	max-width: 1341px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.swiper-news .swiper-button-prev,
.swiper-news .swiper-button-next{
	width: 70px;
	height: 57px;
	position: absolute;
	top: -450px;
	bottom: 0;
	margin: auto;
	z-index: 20;
	border-radius: 40px;
	background-color: #F85B00;
	background-repeat: no-repeat;
	background-position: center center;
}
.swiper-news .swiper-button-prev{
	background-image: url("/common/img/icon_arrow_wh.svg");
	left: 0;
	transform: scale(-1, 1);
}
.swiper-news .swiper-button-next{
	background-image: url("/common/img/icon_arrow_wh.svg");
	right: 0;
}
.swiper-news.none .swiper-slide{
	margin: 0 auto;
}
.swiper-news.none .swiper-button-wrap{
	display: none;
}

#sec_news .swiper-news {
  overflow: hidden;
}


@media screen and (max-width: 767px){
	#sec_news{
		padding: 60px 0 55px;
	}
	#sec_news .hd01 img{
		width: 184px;
	}
	
	.newsBox{
		margin-top: 35px;
	}
	.newsBox li{
		max-width: 310px;
	}
	.newsBox .time{
		margin-top: 17px;
	}
	.swiper-news .swiper-button-wrap{
		display: none;
	}
	
	#sec_news .btn{
		margin-top: 19px;
	}
}




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

/* MISSION

/* ------------------------------------------------------------------------ */
#sec_mission{
	padding: 100px 0;
}
#sec_mission > .flex{
	justify-content: center;
}

#sec_mission .txtBox{
	margin-top: 20px;
	margin-left: 80px;
	text-align: left;
}

#sec_mission .lead{
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: 0.01em;
	margin-top: 22px;
}

#sec_mission .btn{
	margin-top: 40px;
}

@media screen and (max-width: 1180px){
	#sec_mission > .flex{
		align-items: center;
	}
	#sec_mission .txtBox{
		margin-top: 0;
		margin-left: 30px;
	}
	#sec_mission .lead{
		font-size: 3rem;
	}
}
@media screen and (max-width: 1024px){
	#sec_mission figure{
		width: 30%;
	}
}
@media screen and (max-width: 767px){
	#sec_mission{
		padding: 60px 0 100px;
	}
	
	#sec_mission .hd01 img{
		width: 232px;
	}
	#sec_mission .hd01 span{
		margin-top: 14px;
	}
	#sec_mission > .flex{
		flex-direction: column-reverse;
	}
	#sec_mission .txtBox{
		margin: 0 auto 35px;
		padding-left: 9px;
	}
	#sec_mission .lead{
		font-size: 2.4rem;
		letter-spacing: -0.06em;
		line-height: 1.5;
		margin-top: 18px;
	}
	
	#sec_mission .btn{
		margin-top: 20px;
	}
	
	#sec_mission figure{
		width: calc(100% + 70px);
		margin: 0 -20px;
	}
}