html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
ul,
ol {
	padding-left: 0;
	list-style: none;
	margin: 0;
}
div,a,ul,ol,li,img,table,th,td,p{
	box-sizing: border-box;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img,picture {
	vertical-align: bottom;
	max-width:100%;
}

figure {
	margin: 0;
}


/*=====================================================
					共通スタイル
=======================================================*/

/*---- web fonts ----*/
@font-face {
	font-family: "noto-sans-jp";
	src: url("/special/jp/construction-starlink/font/NotoSansJP-Regular.woff") format("woff");
	font-weight: normal;
}
@font-face {
	font-family: "noto-sans-jp";
	src: url("/special/jp/construction-starlink/font/NotoSansJP-Bold.woff") format("woff");
	font-weight: bold;
}
/* ----------------------- */

sup {
	vertical-align: text-top;
	font-size: smaller;
}
#contents {
	max-width: none;
	margin: 0;
	width: 100%;
}
.contentsWrap{
	font-size: 16px;
	line-height: 1.8;
	color: #1b1b1b;
	font-family: "noto-sans-jp";
}

/*メインビジュアル*/
.mainImgWrap picture,
.mainImgWrap img,
.mainImgWrap h1{
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
}

/*ページ内ナビ*/
.pageLinkWrap {
	width: 100%;
	background: #005bac;
	position: sticky;
	top: 0;
	z-index: 1;
}
.navTitle{
	color: #FFFFFF;
	position: absolute;
	left: 10px;
	height: 45px;
	display: none;
}
.pageLinkWrap.fixed {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
}
.pageLinkWrap nav ul {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-block-start: 0;
	margin-block-end: 0;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.pageLinkWrap nav ul li a {
	display: block;
	padding: 26px 1.4em;
	color: #ffffff;
	font-size: 16px;
	line-height: 1;
}
.pageLinkWrap nav ul li a:hover,
.pageLinkWrap nav ul li a:not(.pageTop).current {
	background-color: rgba(0, 17, 44, 0.3);
}
.pageLinkWrap nav ul li a.pageTop{
	text-indent: -99999px;
	width: 68px;
	padding: 26px 0;
	position: relative;
}
.pageLinkWrap nav ul li a.pageTop:before{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.21' height='14.639'  version='1.1'%3E%3Cdefs%3E%3Cstyle%3E.st1%7Bisolation:isolate%7D%3C/style%3E%3C/defs%3E%3Cg id='_' class='st1'%3E%3Cpath d='M4.08 14.64H0L8.34 0h1.53l8.34 14.64h-4.08l-5.04-9.3-5.01 9.3Z' class='st1' style='fill:%23fff'/%3E%3C/g%3E%3C/svg%3E");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 16px;
}
.pageLinkWrap .toggleBtn{
	display: none;
}

@media  screen and (max-width: 900px) and (min-width: 880px){
	.pageLinkWrap nav ul li a{
		padding: 26px 0.5em;
	}
	.pageLinkWrap nav ul li a.pageTop{
		width: 42px;
	}
}
@media screen and (max-width: 880px){
	.navTitle{
		display: flex;
		align-items: center;
	}
	.pageLinkWrap .toggleBtn{
		color: #FFFFFF;
		height: 45px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding:  0 20px;
	}
	.pageLinkWrap .toggleBtn .icon{
		display: inline-block;
		width: 1.125em;
		height: 0.875em;
		margin: 0.188em 0 0 0.438em;
		position: relative;
	}
	.pageLinkWrap .toggleBtn .icon .line{
		display: block;
		width: 100%;
		height: 0.125em;
		background: #FFFFFF;
		position: absolute;
		left: 0;
	}

	.pageLinkWrap .toggleBtn .icon .line:nth-child(1){
		top: 0;
	}
	.pageLinkWrap .toggleBtn .icon .line:nth-child(2){
		top: calc((100% - 0.125em) / 2);
	}
	.pageLinkWrap .toggleBtn .icon .line:nth-child(3){
		bottom: 0;
	}

	.pageLinkWrap .toggleBtn + .toggleMenu{
		display: none;
	}
	.pageLinkWrap .toggleBtn + .toggleMenu.open{
		display: block;
	}
	.pageLinkWrap .toggleMenu ul{
		display: flex;
		flex-wrap: wrap;
	}
	.pageLinkWrap .toggleMenu ul li{
		width: 50%;
		padding: 5px;
	}
	.pageLinkWrap .toggleMenu ul li a{
		padding: 7px 1.4em;
		border-radius: 5px;
		display: block;
	}
	.pageLinkWrap nav ul li a.pageTop{
		text-indent: inherit;
		width: auto;
		padding: 7px 1.4em;
	}

	.pageLinkWrap nav ul li a.pageTop:before{
		content: "";
		display: none;
	}
}

/*レイアウト*/
.contentsWidth{
	max-width: 1230px;
	margin-left: auto;
	margin-right: auto;
}
.contentsInner{
	padding-left: 15px;
	padding-right: 15px;
}
@media screen and (max-width: 1230px){
	.contentsInner{
		width: 90%;
		padding-left: 0;
		padding-right: 0;
	}
}
.alignCenter{
	text-align: center;
}
.alignRight{
	text-align: right;
}
.boxWhite{
	background: #FFFFFF;
	padding: 30px 30px 40px 30px;
}
.noViewPc{
	display: none;
}
@media screen and (max-width: 520px){
	.noViewPc{
		display: block;
	}
}

/*テキスト*/
.annotationTxt{
	font-size: 14px!important;
	margin-top: 15px;
}
.txtBold{
	font-weight: bold;
}
.iconArrow:before{
	content: "＞ ";
}


/* 新着情報
---------- */
#News {
	padding-top: 65px;
	padding-bottom: 6em ;
	h2 {
		font-size: 1.875em ;
		color: #005bac ;
		font-weight: bold ;
		text-align: center ;
		margin-bottom: 54px;
		@media screen and (max-width: 880px) {
			font-size: 24px;
			margin-bottom: 18px;
		}
		@media screen and (max-width: 600px) {
				font-size: 1.5em ;
		}
	}
	
	@media screen and (max-width: 640px) {
		padding-bottom: 2em ;
	}
}
.newstopics ul,
.newstopics li,
section.categories ul,
section.categories li {
	margin:0;
	padding:0;
	list-style:none;
}
.newstopics{
	ul {
		border-top:1px solid #c4c4c4 ;
	}
	li {
		border-bottom:1px solid #c4c4c4 ;
	}
	a {
		color: #161616 ;
		display: flex ;
		align-items: center ;
		padding:1em 0 ; 
	}
	a:hover {
		background:#c9d8e8;
	}
	.category {
		color: #FFF ;
		width: auto ;
		padding-right: 1em ;
	}
	.date {
		width: 13em ;
	}
	.title {
		width: 100%;
	}
	@media screen and (max-width: 640px) {
		padding: 30px 0 40px;
		h2 {
			margin-bottom: 18px ;
		}
		ul {
			border: none ;
		}
		ul li {
			font-size: 87% ;
			margin-bottom: 0.5em ;
		}
		li a {
			padding: 0.5em 0.25em 1em ;
			flex-wrap: wrap ;
		}
		.date {
			width: auto ;
		}
		.title {
			width: 100% ;
		}
	}
}
/* --タイトル-- */
.markerTitle{
	padding-top: 120px;
	color: #005bac;
	font-size: 40px;
	text-align: center;
	margin-bottom: 40px;
	line-height: 1.8;
	span{
		display: inline;
		padding: 0 4px 2px 4px;
		background: linear-gradient(transparent 60%, #ffff00 0%);
	}
	&.txtWhite{
		color: #FFFFFF;
		span{
			padding: 0 4px 4px 4px;
			background: linear-gradient(transparent 84%, #ffff00 0%);
		}
	}
}
.tagTitle{
	padding: 10px 40px;
	background: #4d6183;
	color: #FFFFFF;
	display: inline-block;
	margin-bottom: 25px;
	font-size: 22px;
}
.imgTitle{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	color: #005bac;
	margin-bottom: 45px;
}
.SquareIconTitle{
	font-size: 20px;
	margin-bottom: 15px;
	&:before{
		content: "■ ";
		color: #005bac;
	}
}
@media screen and (max-width: 880px){
	.markerTitle{
		font-size: 24px;
		padding-top: 35px;
		margin-bottom: 20px;
	}
	.tagTitle{
		margin-bottom: 17px;
		font-size: 18px;
	}
	.imgTitle{
		font-size: 24px;
		margin-bottom: 20px;
	}
	.imgTitle img{
		max-height: 50px;
	}
	.SquareIconTitle{
		font-size: 18px;
		margin-bottom: 10px;
	}
}

/*概要*/
#About{
	.aboutInfo .img{
		margin-top: 75px;
		margin-bottom: 35px;
	}
	.aboutInfo .txt{
		font-size: 20px;
	}
	.sceneArea{
		margin-top: 60px;
		margin-bottom: 100px;
	}
	.sceneImgContent{
		display: flex;
		justify-content: space-between;
		gap: 50px 4.16%;
	}
	.sceneImgContent .item{
		width: calc((100% - 8.32%) / 3);
	}
	.sceneImgContent .item img{
		width: 100%;
	}
	.bgSlash{
		background-image:
				url("/special/jp/construction-starlink/imgs/slash.svg"), /* スラッシュ画像 */
				linear-gradient(90deg,rgba(20, 63, 180, 0.6) 0%, rgba(22, 196, 206, 0.6) 100%);
		background-repeat: repeat, no-repeat;
		background-size: auto, 100% 100%;
		background-position: top left, center;
		background-blend-mode: normal, overlay;
		padding: 45px 0;
	}
	.aboutStarlink .boxInner{
		max-width: 980px;
		margin-left: auto;
		margin-right: auto;
	}
	.aboutStarlink .layoutFlex{
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 990px;
		margin-left: auto;
		margin-right: auto;
	}
	.aboutStarlink .layoutFlex .txt{
		line-height: 2;
		width: 62%;
		font-size: 16px;
	}
	.aboutStarlink .layoutFlex .img{
		width: 30%;
		height: auto;
	}
	.aboutStarlink .layoutFlex .img img{
		width: 100%;
	}
}
@media screen and (max-width: 880px){
	#About{
		.aboutInfo .img{
			margin-top: 35px;
			margin-bottom: 30px;
		}
		.aboutInfo .txt{
			font-size: 16px;
		}
		.sceneArea{
			margin-top: 36px;
			margin-bottom: 52px;
		}
		.aboutStarlink .layoutFlex{
			display: block;
		}
		.aboutStarlink .layoutFlex .txt{
			width: 100%;
		}
		.aboutStarlink .layoutFlex .img{
			width: 100%;
			text-align: center;
			margin-bottom: 34px;
		}
		.aboutStarlink .layoutFlex .img img{
			max-width: 300px;
		}
	}
}
@media screen and (max-width: 640px){
	#About{
		.sceneImgContent{
			display: block;
		}
		.sceneImgContent .item{
			width: 100%;
			text-align: center;
			&:not(:first-child){
				margin-top: 40px;
			}
		}
		.sceneImgContent .item img{
			max-width: 340px;
		}
	}
}
@media screen and (max-width: 520px){
	#About{
		.annotationTxt.alignRight{
			text-align: left;
		}
	}
}

/*導入事例*/
#Case{
	.layoutFlex {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}
	.layoutFlex .imgArea {
		width: 24%;
	}
	.layoutFlex .textArea{
		width: 70%;
	}
	.layoutFlex .textArea h3 {
		border-bottom: 1px solid #004ea2;
		padding-bottom: 0.25em;
		margin-bottom: 0.75em;
		font-size: 1.5em;
		color: #005bac;
		line-height: 1.4;
	}
	.layoutFlex .textArea h4 {
		font-size: 1.125em;
		color: #004ea2;
		padding: 0.5em 0 0.25em;
		line-height: 1.4;
	}
	.layoutFlex .textArea p:not(:last-child) {
		padding-bottom: 1.5em;
	}
	.layoutFlex .textArea p strong {
		color: #f87000;
		font-weight: bold;
	}
}
@media screen and (max-width: 880px){
	#Case{
		padding-top: 20px;
		.layoutFlex {
			justify-content: inherit;
			flex-direction: column-reverse;
		}
		.layoutFlex .imgArea{
			width: 100%;
			text-align: center;
		}
		.layoutFlex .imgArea img{
			max-width: 340px;
			width: 100%;
			margin-top: 24px;
		}
		.layoutFlex .textArea{
			width: 100%;
		}
		.layoutFlex .textArea h3 {
			font-size: 1.25em;
		}
	}
}

/*メリット*/
#Merit{
	padding-top: 130px;
	.bgGeometricBlue{
		background: url("/special/jp/construction-starlink/imgs/bg_blue.png") no-repeat center center;
		background-size: cover;
		padding-bottom: 130px;
	}
	.markerTitle{
		margin-bottom: 40px;
	}
	.pointList li{
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #FFFFFF;
		font-size: 24px;
	}
	.pointList li:not(:first-child){
		margin-top: 30px;
	}
	.pointList li .number{
		width: 80px;
	}
	.pointList li .txt{
		width: calc(100% - 120px);
	}
	.contactArea .markerTitle{
		margin-bottom: 50px;
	}
	.contactArea h3 {
		font-size: 1.5em;
		color: #0058aa;
		text-align: center;
		padding-bottom: 1.75em;
		line-height: 1.6;
	}
}
@media screen and (max-width: 880px){
	#Merit{
		padding-top: 60px;
		.bgGeometricBlue{
			padding-bottom: 60px;
		}
		.pointList li{
			font-size: 20px;
		}
		.contactArea h3{
			font-size: 20px;
		}
	}
}
@media screen and (max-width: 520px){
	#Merit{
		.pointList li .number{
			display: none;
		}
		.pointList li .txt{
			width: 100%;
		}
	}
}

/*内容物・仕様*/
#Specification{
	.markerTitle{
		margin-bottom: 60px;
	}
	.img{
		margin-bottom: 50px;
	}
	.txt{
		line-height: 1.6;
	}
	.txt,
	.discList{
		font-size: 18px;
	}
	.txt + .txt{
		margin-top: 30px;
	}
	.discList{
		list-style: disc;
		padding-left: 1.2rem;
	}
	.tableArea{
		margin-top: 70px;
		display: flex;
		justify-content: space-between;
		.item{
			width: 46.747%;
		}
		table {
			width: 100%;
			border-collapse: collapse;
		}
		table th,
		table td {
			border: 1px solid #231815;
			padding: 5px 10px;
		}
		table tbody tr:nth-child(even) {
			background: rgba(209,220,226, 0.2);
		}
	}
	.iconPlus{
		position: relative;
		text-align: center;
		font-size: 22px;
		font-weight: bold;
		color: #005bac;
		padding-top: 60px;
		margin-top: 30px;
		&:before,
		&:after{
			content: "";
			display: block;
			background: #005bac;
			position: absolute;
		}
		&:before{
			height: 40px;
			width: 7px;
			top: 0;
			left: calc((100% - 7px) /2);
		}
		&:after{
			height: 7px;
			width: 40px;
			top: calc((40px - 7px) /2);
			left: calc((100% - 40px) /2);
		}
	}
	.boxBlue{
		margin-top: 40px;
		border: solid 2px #005bac;
		background: rgba(0, 91, 172, 0.05);
		padding: 40px 50px 50px 50px;
	}
	.boxBlue h3{
		text-align: center;
		font-size: 28px;
		color: #005bac;
		margin-bottom: 50px;
	}
	.circleList{
		max-width: 970px;
		margin-left: auto;
		margin-right: auto;
		li{
			padding-left: 1.2rem;
			text-indent: -1.2rem;
			&:before{
				content: "● ";
				color: #0068b7;
			}
		}
	}
	.markerLink{
		background: #005bac;
		color: #FFFFFF;
		padding: 5px 20px;
		text-align: right;
		margin-top: 5px;
		display: inline-block;
	}
	.exampleArea{
		margin-top: 150px;
	}
	.exampleArea .bandTitle{
		color: #FFFFFF;
		padding: 25px 15px;
		font-size: 40px;
		background: #1451B8;
		background: linear-gradient(90deg,rgba(20, 81, 184, 1) 0%, rgba(22, 178, 202, 1) 100%);
		text-align: center;
	}
	.bgGeometricGray{
		padding-top: 40px;
		padding-bottom: 70px;
		background: url("/special/jp/construction-starlink/imgs/bg_gray.png") no-repeat center center;
		background-size: cover;
	}
	.bgGeometricGray{
		.boxWhite{
			margin-top: 40px;
		}
	}
}
@media screen and (max-width: 880px){
	#Specification{
		.markerTitle{
			padding-top: 40px;
			margin-bottom: 30px;
		}
		.img{
			margin-bottom: 35px;
		}
		.txt,
		.discList{
			font-size: 16px;
		}
		.tableArea{
			margin-top: 35px;
			font-size: 14px;
		}
		.iconPlus{
			font-size: 16px;
			padding-top: 30px;
			&:before{
				height: 20px;
				width: 3px;
				left: calc((100% - 3px) /2);
			}
			&:after{
				height: 3px;
				width: 20px;
				top: calc((20px - 3px) /2);
				left: calc((100% - 20px) /2);
			}
		}
		.boxBlue{
			margin-top: 20px;
			padding: 20px 10px 30px 10px;
		}
		.boxBlue h3{
			font-size: 16px;
			margin-bottom: 20px;
		}
		.boxBlue .img{
			text-align: center;
			img{
				max-width: 460px;
				width: 100%;
			}
		}
		.circleList{
			font-size: 14px;
		}
		.markerLink{
			font-size: 14px;
		}
		.exampleArea{
			margin-top: 50px;
		}
		.exampleArea .bandTitle{
			font-size: 20px;
		}
		.bgGeometricGray{
			padding-top: 20px;
			padding-bottom: 20px;
			.boxWhite{
				padding: 30px 10px;
			}

		}
	}

}
@media screen and (max-width: 640px){
	#Specification{
		.tableArea{
			display: block;
			.item{
				width: 100%;
				&:not(:first-child){
					margin-top: 20px;
				}
			}
			th{
				width: 100px;
			}
		}
		.markerLink{
			background: none;
			padding: 0;
			color: #005BAC;
		}
		.boxBlue .img{
			margin-top: 40px;
			margin-bottom: 0;
		}
	}
}


/*お問い合わせ*/
#Contact{
	background: #f8f8f8;
	padding: 120px 0;
	.title {
		border: none;
		color: #333;
		font-size: 32px;
		text-align: center;
		margin-bottom: 50px;
	}
	.txt{
		font-size: 18px;
	}
	.img{
		margin-top: 100px;
	}
	.btn{
		max-width: 532px;
		width: 100%;
		background: #005bac;
		padding: 18px;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;
		font-size: 24px;
		display: block;
		margin: 96px auto 0 auto;
	}
}
@media screen and (max-width: 880px){
	#Contact{
		padding: 80px 0;
		.title {
			font-size: 24px;
			margin-bottom: 30px;
		}
		.txt{
			font-size: 16px;
		}
		.img{
			margin-top: 40px;
		}
		.btn{
			font-size: 20px;
			margin: 50px auto 0 auto;
			padding: 10px;
		}
	}
}

/*カタログ*/
#Brochures{
	padding-top: 85px;
	padding-bottom: 65px;
	.lineIconTitle{
		font-size: 1.875em;
		color: #005bac;
		border-left: 6px solid #005bac;
		padding-left: 0.5em;
		margin-bottom: 54px;
		line-height: 1.4;
	}
	#brochure{
		.brochures-container{
			.list-two-clm{
				display: flex;
				flex-wrap: wrap;
				gap: 30px 4.2%;
			}
			.list-two-clm:before,
			.list-two-clm:after{
				display: none;
			}
			.list-two-clm li{
				font-size: 14px;
				line-height: 1.5;
				float: none;
				width: 30%;
				padding: 0;
				margin: 0;
			}
			.list-two-clm li a{
				color: #161616;
				padding: 10px;
				display: flex;
				justify-content: space-between;
			}
			.list-two-clm a:hover{
				color: #03599b;
				background: #EEE;
			}
			.list-two-clm li a img{
				width: 124px;
				max-width: 100%;
				max-height: 100%;
			}
			.list-two-clm li a .txt{
				width: calc(100% - 139px);
			}
		}
	}
}
@media screen and (max-width: 880px){
	#Brochures{
		padding-top: 50px;
		padding-bottom: 50px;
		.lineIconTitle{
			font-size: 24px;
			margin-bottom: 35px;
		}
		#brochure{
			.brochures-container{
				.list-two-clm{
					gap: 0;
				}
				.list-two-clm li {
					width: 47.9%;
				}
			}
		}
	}
}
@media screen and (max-width: 640px){
	#Brochures{
		#brochure{
			.brochures-container{
				.list-two-clm li {
					width: 100%;
				}
			}
		}
	}
}

/*おすすめコンテンツ*/
#Banners{
	padding-top: 67px;
	padding-bottom: 97px;
	background: #f8f8f8;
	h2{
		font-size: 1.875em;
		margin-bottom: 30px;
		font-weight: normal;
	}
	.related_banner a .copy {
		background: linear-gradient(#e8e8e8, #f8f8f8 24px);
		color: #161616;
		display: block;
		margin-top: 2px;
		padding: 24px 0 0 0;
	}
}
@media screen and (max-width: 880px){
	#Banners{
		padding-top: 50px;
		padding-bottom: 50px;
		h2{
			font-size: 24px;
		}
		.related_banner a .copy {
			font-size: 14px;
		}
	}
}
@media screen and (max-width: 640px){
	#Banners{
		.related_banner a .copy {
			padding-left: 1em;
			margin: 0;
		}
	}
}
/* フッターナビ
---------------------------------------*/
#WGL-footer {
	background: linear-gradient(#f7f7f7, #fefefe 280px);
	padding-bottom: 2em ;
	
	& h2 {
		font-size: 2.25em;
		font-weight: normal;
		color: #161616;
		display: flex;
		align-items: center;
		margin: 0 0 54px;
		width: 100%;
		a {
			color: #161616 ;
		}
		a:hover{
			color: #004ea2 ;
		}
	}
	& ul li {
		display: inline-block;
		margin: 0 1.5em 0.5em 0;
		a {
			color: #161616 ;
		}
		a:hover{
			color: #004ea2 ;
		}
	}
	@media screen and (max-width: 680px) {
		& h2 {
			font-size: 1.5em ;
			margin-bottom: 1.5em;
		}
	}
}
#WGL-footer ul li:nth-of-type(3) {
	a{
		color: #004ea2 ;
	}
}


/*フェードイン*/
.fadeIn {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1s ease-out, transform 1s ease-out;
	&.show {
		opacity: 1;
		transform: translateY(0);
	}
}