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

/* common class
---------------------------------------------------------------------------- */

/* calc(px / 3.75 * 1vw) */

* {
  box-sizing: border-box;
}
main{
	min-height: 100vh;
}

body {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: unset;
  word-wrap: break-word;
  min-width: 100%;
  background: #fff;
  color: #00418e;
  word-break: break-word;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  position: relative;
}

img {
  width: auto;
  max-width: 100%;
}

ul li, ol li {
  list-style-type: none;
}

@media screen and (min-width: 768px) {
  .pc-none {
    display: none;
  }
}
@media screen and (max-width: 767.99px) {
  .sp-none {
    display: none;
  }

}

/* header -------------------------------------------------------------------------*/
header {
	background: url(../../images/header_bg.png) center top / auto 150px no-repeat ;
	height: 150px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	@media screen and (max-width: 1280px) {
		background: url(../../images/header_bg.png) center top / auto calc(150 / 12.8 * 1vw) no-repeat ;
		height: calc(150 / 12.8 * 1vw);
	}
	@media screen and (max-width: 767.99px) {
		background: url(../../images/header_bg.png) center top / auto calc(124 / 3.75 * 1vw) no-repeat ;
		height: calc(124 / 3.75 * 1vw);
	}
	.header-inner{
		width: 100%;
		max-width: 1280px;
		margin: 0 auto;
		padding: calc(20 / 12.8 * 1vw) 0 0 calc(30 / 12.8 * 1vw);
		@media screen and (max-width: 1280px) {
			padding: calc(20 / 12.8 * 1vw) 0 0 calc(30 / 12.8 * 1vw);
		}
		@media screen and (max-width: 767.99px) {
			padding: calc(14 / 3.75 * 1vw) 0 0 calc(12 / 3.75 * 1vw);
		}
		h1{
			width: 318px;
			@media screen and (max-width: 1280px) {
				width: calc(318 / 12.8 * 1vw);
			}
			@media screen and (max-width: 767.99px) {
				width: calc(217 / 3.75 * 1vw);
			}
		}
	}
}

.l-cont-inner-wrap{
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

/* main-visu -------------------------------------------------------------------------*/
.main-visu{
	background: 
		url(../../images/mv_btm_bg.png) center bottom / auto 150px no-repeat,
		url(../../images/main_bg.jpg) center center / cover no-repeat;
	padding-top: 150px;
	height: 700px;
	@media screen and (max-width: 1280px) {
		background: 
			url(../../images/mv_btm_bg.png) center bottom / auto calc(150 / 12.8 * 1vw) no-repeat,
			url(../../images/main_bg.jpg) center center / cover no-repeat;
		padding-top: calc(150 / 12.8 * 1vw);
		height: calc(700 / 12.8 * 1vw);
	}
	@media screen and (max-width: 767.99px) {
		background: 
			url(../../images/mv_btm_bg.png) center bottom / auto calc(124 / 3.75 * 1vw) no-repeat,
			url(../../images/main_bg.jpg) center center / cover no-repeat;
		padding-top: calc(90 / 3.75 * 1vw);
		height: auto;
	}
	.flx-box{
		display: flex;
		justify-content: space-between;
		padding: 0 0 0 150px;
		height: 550px;
		@media screen and (max-width: 1280px) {
			padding: 0 0 0 calc(150 / 12.8 * 1vw);
			height: calc(550 / 12.8 * 1vw);
		}
		@media screen and (max-width: 767.99px) {
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			padding: 0 0 0 calc(30 / 3.75 * 1vw);
			height: calc(519 / 3.75 * 1vw);
		}
		.left-box{
			h2{
				width: 462px;
				margin-bottom: 35px;
				@media screen and (max-width: 1280px) {
					width: calc(462 / 12.8 * 1vw);
					margin-bottom: calc(35 / 12.8 * 1vw);
				}
				@media screen and (max-width: 767.99px) {
					width: calc(292 / 3.75 * 1vw);
					margin-bottom: calc(24 / 3.75 * 1vw);
				}
			}
			p{
				font-size: 20px;
				line-height: 37px;
				font-weight: 900;
				@media screen and (max-width: 1280px) {
					font-size: calc(20 / 12.8 * 1vw);
					line-height: calc(37 / 12.8 * 1vw);
				}
				@media screen and (max-width: 767.99px) {
					font-size: calc(13 / 3.75 * 1vw);
					line-height: calc(26 / 3.75 * 1vw);
				}
			}
		}
		.right-box{
			position: relative;
			flex: 1;
			padding: 0 140px 0 0;
			@media screen and (max-width: 1280px) {
				padding: 0 calc(140 / 12.8 * 1vw) 0 0;
			}
			@media screen and (max-width: 767.99px) {
				padding: 0 ;
				width: 100%;
			}
			p{
				font-size: 27px;
				line-height: 43px;
				font-weight: 900;
				position: absolute;
				right: 156px;
				top: 248px;
				@media screen and (max-width: 1280px) {
					font-size: calc(27 / 12.8 * 1vw);
					line-height: calc(43 / 12.8 * 1vw);
					right: calc(156 / 12.8 * 1vw);
					top: calc(248 / 12.8 * 1vw);
				}
				@media screen and (max-width: 767.99px) {
					position: static;
					font-size: calc(20 / 3.75 * 1vw);
					line-height: calc(30 / 3.75 * 1vw);
					margin-top: calc(20 / 3.75 * 1vw);
				}
			}
			figure{
				position: absolute;
				bottom: 0;
				right: 228px;
				@media screen and (max-width: 1280px) {
					right: calc(228 / 12.8 * 1vw);
				}
				@media screen and (max-width: 767.99px) {
					right: calc(8 / 3.75 * 1vw);
				}
				img{
					height: 680px;
					width: auto;
					@media screen and (max-width: 1280px) {
						height: calc(680 / 12.8 * 1vw);
					}
					@media screen and (max-width: 767.99px) {
						height: calc(354 / 3.75 * 1vw);
					}
				}
			}
		}
	}
}

/* section -------------------------------------------------------------------------*/
.link-wrap{
	padding: 60px 0 45px;
	@media screen and (max-width: 1280px) {
		padding: calc(60 / 12.8 * 1vw) 0 calc(45 / 12.8 * 1vw);
	}
	@media screen and (max-width: 767.99px) {
		padding: calc(40 / 3.75 * 1vw) 0 calc(20 / 3.75 * 1vw);
	}
	h2{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto 45px;
		font-size: 26px;
		font-weight: 700;
		@media screen and (max-width: 1280px) {
			margin: 0 auto calc(45 / 12.8 * 1vw);
			font-size: calc(26 / 12.8 * 1vw);
		}
		@media screen and (max-width: 767.99px) {
			margin: 0 auto calc(24 / 3.75 * 1vw);
			font-size: calc(22 / 3.75 * 1vw);
			line-height: calc(34 / 3.75 * 1vw);
			text-align: center;
		}
		&::before,&::after{
			content: "";
			display: block;
			height: 0;
			width: 110px;
			border-bottom: 1px solid #00418e;
			margin: 0 16px;
			@media screen and (max-width: 1280px) {
				width: calc(110 / 12.8 * 1vw);
				margin: 0 calc(16 / 12.8 * 1vw);
			}
			@media screen and (max-width: 767.99px) {
				content: none;
			}
		}
	}
	.flx-link-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		row-gap: 24px;
		width: 872px;
		margin: 0 auto 30px;
		@media screen and (max-width: 1280px) {
			row-gap: calc(24 / 12.8 * 1vw);
			width: calc(872 / 12.8 * 1vw);
			margin: 0 auto calc(30 / 12.8 * 1vw);
		}
		@media screen and (max-width: 767.99px) {
			justify-content: center;
			row-gap: 0;
			width: 100%;
			margin: 0 auto calc(15 / 3.75 * 1vw);
			padding: 0 calc(24 / 3.75 * 1vw);
		}
		a{
			display: block;
			transition: .2s ease;
			&.katch img{ width: 101px; }
			&.medias img{ width: 60px; }
			&.ccnc img{ width: 73px; }
			&.ccnet img{ width: 103px; }
			&.hima-net img{ width: 211px; }
			&.oribe img{ width: 51px; }
			&.ctk img{ width: 52px; }
			&.ccn img{ width: 63px; }
			&.mika-net img{ width: 150px; }
			&.starcat img{ width: 144px; }
			&.g-city img{ width: 195px; }
			&.mics img{ width: 49px; }
			&:nth-child(-n + 5){
				margin-right: 45px;
			}
			@media screen and (max-width: 1280px) {
				&.katch img{ width: calc(101 / 12.8 * 1vw); }
				&.medias img{ width: calc(60 / 12.8 * 1vw); }
				&.ccnc img{ width: calc(73 / 12.8 * 1vw); }
				&.ccnet img{ width: calc(103 / 12.8 * 1vw); }
				&.hima-net img{ width: calc(211 / 12.8 * 1vw); }
				&.oribe img{ width: calc(51 / 12.8 * 1vw); }
				&.ctk img{ width: calc(52 / 12.8 * 1vw); }
				&.ccn img{ width: calc(63 / 12.8 * 1vw); }
				&.mika-net img{ width: calc(150 / 12.8 * 1vw); }
				&.starcat img{ width: calc(144 / 12.8 * 1vw); }
				&.g-city img{ width: calc(195 / 12.8 * 1vw); }
				&.mics img{ width: calc(49 / 12.8 * 1vw); }
				&:nth-child(-n + 5){
					margin-right: calc(45 / 12.8 * 1vw);
				}
			}
			@media screen and (max-width: 767.99px) {
				&.katch img{ width: calc(75 / 3.75 * 1vw); }
				&.medias img{ width: calc(44 / 3.75 * 1vw); }
				&.ccnc img{ width: calc(54 / 3.75 * 1vw); }
				&.ccnet img{ width: calc(77 / 3.75 * 1vw); }
				&.hima-net img{ width: calc(156 / 3.75 * 1vw); }
				&.oribe img{ width: calc(38 / 3.75 * 1vw); }
				&.ctk img{ width: calc(39 / 3.75 * 1vw); }
				&.ccn img{ width: calc(46 / 3.75 * 1vw); }
				&.mika-net img{ width: calc(114 / 3.75 * 1vw); }
				&.starcat img{ width: calc(107 / 3.75 * 1vw); }
				&.g-city img{ width: calc(144 / 3.75 * 1vw); }
				&.mics img{ width: calc(36 / 3.75 * 1vw); }
				&:nth-child(-n + 5){
					margin-right: 0;
				}
				&:nth-child(-n + 2){
					margin-right: calc(40 / 3.75 * 1vw);
				}
				&:nth-child(n + 4):nth-child(-n + 5){
					margin-right: calc(20 / 3.75 * 1vw);
				}
				&:nth-child(n + 7):nth-child(-n + 8){
					margin-right: calc(20 / 3.75 * 1vw);
				}
				&:nth-child(n + 10):nth-child(-n + 11){
					margin-right: calc(10 / 3.75 * 1vw);
				}
				&:nth-child(n + 1):nth-child(-n + 3){
					margin-bottom: calc(8 / 3.75 * 1vw);
				}
				&:nth-child(n + 4):nth-child(-n + 9){
					margin-bottom: calc(18 / 3.75 * 1vw);
				}
			}

			&:hover{
				@media screen and (min-width: 768px) {
					opacity: .7;
				}
			}
		}
	}
	p{
		text-align: center;
		a img{
			width: 127px;
			@media screen and (max-width: 1280px) {
				width: calc(127 / 12.8 * 1vw);
			}
			@media screen and (max-width: 767.99px) {
				width: calc(93 / 3.75 * 1vw);
			}
		}
		
	}
	small{
		display: block;
		color: #646464;
		font-weight: 200;
		font-size: 14px;
		text-align: center;
		margin-top: 50px;
		@media screen and (max-width: 1280px) {
			font-size: calc(14 / 12.8 * 1vw);
			margin-top: calc(50 / 12.8 * 1vw);
		}
		@media screen and (max-width: 767.99px) {
			font-size: calc(10 / 3.75 * 1vw);
			margin-top: calc(20 / 3.75 * 1vw);
			line-height: calc(17 / 3.75 * 1vw);
		}
	}
}

.sch-wrap{
	background: url(../../images/sch_bg.png) center bottom / auto 300px no-repeat;
	height: 300px;
	@media screen and (max-width: 1280px) {
		background: url(../../images/sch_bg.png) center bottom / auto calc(300 / 12.8 * 1vw) no-repeat;
		height: calc(300 / 12.8 * 1vw);
	}
	@media screen and (max-width: 767.99px) {
		background: url(../../images/sch_bg.png) center bottom / auto calc(275 / 3.75 * 1vw) no-repeat;
		height: calc(275 / 3.75 * 1vw);
	}
	.l-cont-inner-wrap{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 100%;
		row-gap: 30px;
		@media screen and (max-width: 1280px) {
			row-gap: calc(30 / 12.8 * 1vw);
		}
		@media screen and (max-width: 767.99px) {
			row-gap: calc(30 / 3.75 * 1vw);
		}
	}
	h2{
		font-size: 36px;
		font-weight: 700;
		font-feature-settings: "palt";
		@media screen and (max-width: 1280px) {
			font-size: calc(36 / 12.8 * 1vw);
		}
		@media screen and (max-width: 767.99px) {
			font-size: calc(26 / 3.75 * 1vw);
			line-height: calc(45 / 3.75 * 1vw);
			text-align: center;
		}
		span{
			display: inline-block;
			padding: 0 10px 3px;
			color: #fff;
			background-color: #00418e;
			border-radius: 10px;
			height: 46px;
			margin: 0 12px;
			@media screen and (max-width: 1280px) {
				padding: 0 calc(10 / 12.8 * 1vw) calc(3 / 12.8 * 1vw);
				border-radius: calc(10 / 12.8 * 1vw);
				height: calc(46 / 12.8 * 1vw);
				margin: 0 calc(12 / 12.8 * 1vw);
			}
			@media screen and (max-width: 767.99px) {
				padding: calc(1 / 3.75 * 1vw) calc(10 / 3.75 * 1vw) calc(3 / 3.75 * 1vw);
				border-radius: calc(7 / 3.75 * 1vw);
				height: calc(30 / 3.75 * 1vw);
				margin: 0 calc(8 / 3.75 * 1vw) ;
				line-height: 1;
			}
		}
	}
	.link-box{
		display: flex;
		justify-content: center;
		a{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 70px;
			width: 500px;
			border-radius: 35px;
			background: url(../../images/link_arr.svg) center right 30px / 13px auto no-repeat,
				linear-gradient(to right , #00a0ff 0% , #00a0ff 50% , #00c896 70% , #00c896 100%);
			color: #fff;
			font-weight: 700;
			font-size: 22px;
			transition: .2s ease;
			@media screen and (max-width: 1280px) {
				height: calc(70 / 12.8 * 1vw);
				width: calc(500 / 12.8 * 1vw);
				background: url(../../images/link_arr.svg) center right calc(30 / 12.8 * 1vw) / calc(13 / 12.8 * 1vw) auto no-repeat,
					linear-gradient(to right , #00a0ff 0% , #00a0ff 50% , #00c896 70% , #00c896 100%);
				font-size: calc(22 / 12.8 * 1vw);
			}
			@media screen and (max-width: 767.99px) {
				height: calc(70 / 3.75 * 1vw);
				width: calc(315 / 3.75 * 1vw);
				background: url(../../images/link_arr.svg) center right calc(20 / 3.75 * 1vw) / calc(13 / 3.75 * 1vw) auto no-repeat,
					linear-gradient(to right , #00a0ff 0% , #00a0ff 50% , #00c896 70% , #00c896 100%);
				font-size: calc(19 / 3.75 * 1vw);
				line-height: calc(29 / 3.75 * 1vw);
				text-align: center;
			}
			&:hover{
				background: url(../../images/link_arr.svg) center right 20px / 13px auto no-repeat,
					linear-gradient(to right , #00a0ff 0% , #00a0ff 50% , #00c896 70% , #00c896 100%);
				@media screen and (max-width: 1280px) {
					background: url(../../images/link_arr.svg) center right calc(20 / 12.8 * 1vw) / calc(13 / 12.8 * 1vw) auto no-repeat,
						linear-gradient(to right , #00a0ff 0% , #00a0ff 50% , #00c896 70% , #00c896 100%);
				}
				@media screen and (min-width: 768px) {
					opacity: .7;
				}
			}
		}
	}
}


/* footer -------------------------------------------------------------------------*/
footer{
	background: linear-gradient( to right , #fff 0% , #fff 50% , #00418d 50%, #00418d 100%);
	@media screen and (max-width: 767.99px) {
		background: none;
	}
	.flx-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100px;
		@media screen and (max-width: 1280px) {
			height: calc(100 / 12.8 * 1vw);
		}
		@media screen and (max-width: 767.99px) {
			flex-wrap: wrap;
			height: auto;
		}
		a{
			display: flex;
			align-items: center;
			height: 100%;
			width: 250px;
			transition: .2s ease;
			@media screen and (max-width: 1280px) {
				width: calc(250 / 12.8 * 1vw);
			}
			@media screen and (max-width: 767.99px) {
				width: 100%;
				padding: calc(10 / 3.75 * 1vw) 0;
			}
			img{
				width: 183px;
				@media screen and (max-width: 1280px) {
					width: calc(183 / 12.8 * 1vw);
				}
				@media screen and (max-width: 767.99px) {
					width: calc(183 / 3.75 * 1vw);
					margin: 0 auto;
				}
			}
			&:hover{
				@media screen and (min-width: 768px) {
					opacity: .7;
				}
			}
		}
		p{
			display: flex;
			align-items: center;
			flex: 1;
			height: 100%;
			color: #fff;
			background: #00418d;
			font-weight: 500;
			font-size: 22px;
			padding-left: 24px;
			@media screen and (max-width: 1280px) {
				font-size: calc(22 / 12.8 * 1vw);
				padding-left: calc(24 / 12.8 * 1vw);
			}
			@media screen and (max-width: 767.99px) {
				font-size: calc(15 / 3.75 * 1vw);
				line-height: calc(23 / 3.75 * 1vw);
				padding-left: calc(24 / 3.75 * 1vw);
				height: calc(70 / 3.75 * 1vw);
			}
		}
		span{
			display: flex;
			align-items: center;
			height: 100%;
			background: #00418d;
			transition: .2s ease;
			@media screen and (max-width: 767.99px) {
				height: calc(70 / 3.75 * 1vw);
			}
			img{
				width: 70px;
				margin-right: 30px;
				@media screen and (max-width: 1280px) {
					width: calc(70 / 12.8 * 1vw);
					margin-right: calc(30 / 12.8 * 1vw);
				}
				@media screen and (max-width: 767.99px) {
					width: calc(40 / 3.75 * 1vw);
					margin-right: calc(14 / 3.75 * 1vw);
				}
			}
			&:hover{
				@media screen and (min-width: 768px) {
					opacity: .7;
					cursor: pointer;
				}
			}
		}
	}
}