@charset "utf-8";

/* スライドショー */
/* =========================================
			1. スライダー全体のコンテナ
========================================= */
.cs-manual-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.cs-manual-slider input[type="radio"] {display: none;}

/* =========================================
			2. スライド本体（横並びと移動の設定）
========================================= */
.cs-slider-viewport {
	width: 100%;
	overflow: hidden;
}

:root {
	/* スライド枚数 */
--count: 3;
}
.cs-slider-track {
	display: flex;
	/* width: 300%; スライド3枚分（100% × 3） */
	width: calc(100% * var(--count));
	height: 900px;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-slide-item {
	width: 33.3333%; /* 300%のうちの3分の1 */
	width: calc(100% / var(--count));
	height: 100%;
}

.cs-slide-item img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
}

/* =========================================
			3. ラジオボタンの状態に応じたスライドの移動
========================================= */
#cs-slide-1:checked ~ .cs-slider-viewport .cs-slider-track {
				transform: translateX(0%);
}
#cs-slide-2:checked ~ .cs-slider-viewport .cs-slider-track {
				transform: translateX(calc(-100% / var(--count)));
}
#cs-slide-3:checked ~ .cs-slider-viewport .cs-slider-track {
				transform: translateX(calc(-100% / var(--count) * 2));
}

/* =========================================
			4. 左右の矢印ナビゲーション
========================================= */
.cs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 60px;
	height: 60px;
	background-color: rgb(0 0 0 / 20%);
	color: #ffffff;
	border-radius: 0%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 4.2rem;
	cursor: pointer;
	transition: background-color 0.3s, opacity 0.3s;
	opacity: 0;
	pointer-events: none;
	z-index: 10;
}

.cs-arrow:hover {
				background-color: rgba(0, 0, 0, 0.5);
}

.cs-arrow-prev { left: 20px; }
.cs-arrow-next { right: 20px; }

/* ラジオボタンの状態に応じて、対応する矢印だけを表示する */
#cs-slide-1:checked ~ .cs-arrow-nav .cs-nav-1,
#cs-slide-2:checked ~ .cs-arrow-nav .cs-nav-2,
#cs-slide-3:checked ~ .cs-arrow-nav .cs-nav-3 {
				opacity: 1;
				pointer-events: auto; /* クリックを有効化 */
}

/* =========================================
			5. 下部のドットナビゲーション
========================================= */
.cs-dot-nav {
				position: absolute;
				bottom: 16px;
				left: 0;
				width: 100%;
				display: flex;
				justify-content: center;
				gap: 12px;
				z-index: 10;
}

.cs-dot {
				width: 12px;
				height: 12px;
				background-color: rgba(255, 255, 255, 0.5);
				border-radius: 50%;
				cursor: pointer;
				transition: background-color 0.3s, transform 0.3s;
}

.cs-dot:hover {
				background-color: rgba(255, 255, 255, 0.8);
}

/* ラジオボタンの状態に応じて、対応するドットの色を変える */
#cs-slide-1:checked ~ .cs-dot-nav .cs-dot:nth-child(1),
#cs-slide-2:checked ~ .cs-dot-nav .cs-dot:nth-child(2),
#cs-slide-3:checked ~ .cs-dot-nav .cs-dot:nth-child(3) {
				background-color: #ffffff;
				transform: scale(1.2); /* アクティブなドットを少し大きくする */
}


@media screen and (max-width: 768px) {
	.cs-slider-track {
		max-height: 600px;
	}
}


body{
	background: #fff;
}

	.header .header-in {
/* display: flex;
background: rgba(0, 0, 0, 0.515); */
}
.header ul.gnav li{
	/* display: flex;
	align-items: center; */
}
.header ul.gnav li.gnav-drop{
	/* position: relative; */
}
.header ul.gnav li .submenu{
	
}

.header ul.gnav>li.gnav-drop a div{
	/* padding: 0; */
	padding: 0.45rem 0.8rem 0.45rem 0;
}

.header ul.gnav>li a>div {
				padding: 0.45rem 0;
				margin: 0.8rem 0.8rem;
				
				/* padding: 0;
				margin: 0; */
}

.footer-box .left .flex .exp ul li {
	white-space: normal;
}

/* TOP */
	
	.header .header-outline{
		display: none;
	}
.header .submenu{
	/* margin-top: 10px; */
}
	
	.header .logo{
		width: auto;
		height: auto;
	}
	.header .header-gnav{
		box-shadow: none;
	}
	.header .header-gnav .logo a img{
		content: url('../images/logo_bluetec.svg');
		max-width: 100px;
		height: 36px;
	}
	


section.mv{
	background: #61ABD4;
	background: #1294DE;
	height: 900px;
	height: 90vh;
	height: auto;
	width: 100%;
	top: 0;
}

.movie_blk {
	position: relative;
				width: 100%;
				height: 900px;
				height: 90vh;
				min-height: calc(100vw * 9 / 16);
}
.movie_blk video {
	position: absolute;
				width: 100%;
				height: 100%;
				object-fit: cover;
				top: 0;
				left: 0;
}
.movie_blk .copy {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				height: 100%;
				/* transform: translate(-50%,-50%); */
}
.movie_blk .copy .page_in{
	height: 100%;
}
.movie_blk .copy .inner{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 20px;
	padding: 50px;
	background-color: rgba(58, 77, 92, 0.3);
	width: 445px;
	width: 40vw;
	width: calc((100vw - 1240px) / 2 + 445px);
	min-width: 445px;
	height: 100%;
	align-items: flex-end;
}

.movie_blk .copy .inner,
.movie_blk .copy .inner a{
	color: #fff;
}
.movie_blk .copy .inner a{
	text-decoration: none;
	font-size: 11px;
	font-size: 1.1rem;
	position: relative;
	padding-right: 60px;
}
.movie_blk .copy .inner a:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	background-repeat: no-repeat;
	/* background-image: url(../images/linkarrowtop.svg); */
	background-color: #fff;
	mask-image: url('../images/linkarrowtop.svg');
	-webkit-mask-image: url('../images/linkarrowtop.svg');
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	/* background-size: inherit;
	background-position: center; */
	margin: auto;
	width: 40px;
	height: 11px;
	transition: all .1s;
}

.movie_blk .copy .inner h2{
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: normal;
	margin-bottom: 40px;
	border-bottom: none;
}
.movie_blk .copy .inner h3{
font-size: 16px;
font-size: 1.6rem;
line-height: 1.8;
	font-weight: normal;
	margin-bottom: 40px;
}

.movie_blk .copy .inner .box{
	width: 345px;
}

.news_block,
.products{
	background-color: #1294DE;
}
.news_block,
.news_block a,
.products,
.products a{
	color: #fff;
}

.wave{
	position: relative;
	display: block;
	content: '';
	width: 100%;
	height: 166px;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-image: url(../images/wave.png);
	background-size: inherit;
	background-size: cover;
	background-position: center;
}


section h2{
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: normal;
	border-bottom: 1px solid #4492D7;
	display: flex;
	justify-content: space-between;
}
section.products h2,
section.news_block h2{
	border-bottom: 1px solid #fff;
}

section.news_block h2 span a,
section.products h2 span a{
	text-decoration: none;
	font-size: 121px;
	font-size: 1.2rem;
	position: relative;
	padding-right: 24px;
}
section.news_block h2 span a:after,
section.products h2 span a:after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	background-repeat: no-repeat;
	/* background-image: url(../images/linkarrow.svg); */
	background-color: #fff;
	mask-image: url('../images/linkarrow.svg');
	-webkit-mask-image: url('../images/linkarrow.svg');
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	background-size: inherit;
	background-position: center;
	margin: auto;
	width: 18px;
	height: 12px;
	transition: all .1s;
}

.news__list dl{
	border: none;
}
.news__list dl dd::before,
.news__list dl dd::after{
	display: none;
}
.news__list dl dt,
.news__list dl dd{
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: normal;
	margin: 0.4rem 0 0;
	padding: 0
}

.business h3,
.technology h3,
.products h3{
	padding: 60px 0;
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: normal;
}
.business p,
.technology p{
	margin-bottom: 0.6rem;
}
.products	h4,
.business h4{
	padding: 0 0 30px;
	text-align: center;
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: 500;
}
.business .col2 p{
	margin-bottom: 30px;
}
.business .col2 .item{
	border: 10px solid #e6f3fe;
	padding: 32px;
	
}

.products .col2 .item{
	background: #fff;
	border-radius: 5px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	text-align: center;
	line-height: 1.4;
	align-items: center;
}
.products .col2 .item,
.products .col2 .item a{
	color: #333;
}
.products .col2 .item a{
width: 100%;
/* height: 100%; */
display: block;
text-decoration: none;
}

.products .col2 .item .btn {
				width: 100%;
				max-width: 300px;
				
				font-size: 14px;
				font-size: 1.4rem;
}

.products .col2 .item .btn__contact a {
				padding: 1rem 2rem;
				color: #fff;
				background: #00a2e8;
				border-radius: 100px;
				margin-bottom: 18px;
}
.products .col2 .item  figure{
				margin: 0 0 18px;
}
.products .col2 .item  figure img{
	height: 28px;
	width: auto;
}
.products .col2 .item  .key{
	font-size: 12px;
	font-size: 1.2rem;
	margin-bottom: 6px;
}
.products .col2 .item  .catch{
	margin-bottom: 12px;
	font-size: 12px;
	font-size: 1.2rem;
	
}

.products .col2 .item .btn__product a{
	font-size: 12px;
	font-size: 1.2rem;
	color: #00a2e8
}

/* --------- 769px以上 */
@media screen and (min-width: 768px) and (max-width: 1280px) {
	section .page_in {
		padding-left: 20px;
		padding-right: 20px;
	}
	.movie_blk .page_in {
		padding: 0;
	}
}
	
/* --------- 769px〜 */
@media screen and (min-width: 769px) {
	
	.viewPC{display: block;}
	.viewSP{display: none;}
	
	.header{
		position: absolute;
	}
	.header .header-in {
		max-width: 1240px!important;
		min-width: 980px;
		margin: 25px auto 0;
		padding: 0 50px;
	}
	
	section .page_in {
		width: 100%;
		max-width: 1240px;
		min-width: 980px;
		/* min-width: 1160px; */
		margin: 0 auto;
	}
	
	.movie_blk .page_in {
	position: relative;
	max-width: 1240px;
	max-width: none;
	min-width: 980px;
	/* min-width: 1160px; */
	margin: 0 auto;
	}
	
	section.news_block,
	section.business,
	section.products{
		padding: 120px 0;
	}
	
	section.technology{
		padding: 0 0 60px ;
	}
	
	
	.business .grid,
	.technology	.grid,
	.products	.grid{
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 64px;
	}
	
	.col2{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}
	
	
	

	

	
}


/* --------- 〜768px */
@media screen and (max-width: 768px) {
	
	.viewPC{display: none;}
	.viewSP{display: block;}
	
	#header .header-gnav {
			background: #0099d900;
			transition: background-color 0.3s ease; /* 色が滑らかに変わる設定 */
	}
	
#header.fixed .header-gnav{
			background: #0098d980; /* スクロール後の色 */
	}


	/* .header .header-gnav {
	background: #019bd900;
} */
	
	.header .header-in {
		padding: 50px 20px;
		padding: 13vw 10vw 9vw;
	}
	.header .header-gnav .logo{
		left: 0;
	}
	


	.header .header-gnav .logo a img{
		width: 80px;
	}
	.gnavbtn, .menu-trigger span, .menu-trigger span::after, .menu-trigger span::before, .menu-trigger span.is-open, .menu-trigger span.is-open::after, .menu-trigger span.is-open::before {
		width: 24px;
		height: 2px;
		background: #fff;
	}
	.spHeadNav {
		top: 80px;
	}
	
	.spHeadNav>ul {
		padding: 20px 0;
	}
	
	
	.movie_blk .copy .inner{
		background: none;
	}
		section.mv,
		.movie_blk{
		height: 95vh;
		max-height: 600px;
	}
	.movie_blk .copy .inner{
		padding: 0;
		width: 100%;
		height: 100%;
		min-width: auto;
		justify-content: flex-end;
	}
	.movie_blk .copy .inner .box {
					width: 100%;
					margin-bottom: 16vw;
	}
	.movie_blk .copy .inner h2{
		font-size: 21px;
		font-size: 2.1rem;
		font-size: calc(21 / 375 * 100vw);
		margin-bottom: 1em;
		letter-spacing: 0;
	}
	.movie_blk .copy .inner h3{
		/* font-size: calc(28 / 1200 * 100vw); */
		line-height: 1.8;
	}

.page_in {
		width: 90vw;
		width: 80vw;
		margin: 0 auto;
	}
	section.news_block,
	section.business,
	section.products{
		padding: 40px 0 60px;
	}
	
html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption {
		/* font-size: calc(28 / 1200 * 100vw); */
	}
section h2 {
	font-weight: 400;
		font-size: calc(48 / 1200 * 100vw);
		font-size: calc(21 / 375 * 100vw);
	letter-spacing: 0.2em;
}
.business h3, .technology h3, .products h3 {
	font-weight: 400;
		font-size: calc(48 / 960 * 100vw);
		font-size: calc(21 / 375 * 100vw);
}
	
	section.technology{
		padding: 0 0 30px ;
	}
	
	section.technology .item img{
		margin-top: 20px;
	}
	
	.news__list dl{
		padding: 0 0 10px;
	}
	
	.grid .item{
		display: grid;
		grid-auto-flow: row;
		gap: 10px;
		}	
		.grid .item p{
			margin-bottom: 12px;
		}
		
		.business h3, .technology h3, .products h3 {
						padding: 20px 0 12px 0;
		}
		
		.products h4, .business h4 {
		
			padding: 0 0 12px;
			font-size: 20px;
			font-size: 2rem;
		}
		
		.business .col2 .item {
						padding: 32px 20px;
		}
		.business .col2 .item img {margin:0 auto;
		}
		.wave{
			/* display: none; */
			background-size: contain;
			height: 90px;
		}
		
		.products .col2 .item figure {
						height: auto;
						display: flex;
						justify-content: center;
		}
		.products .col2 .item figure img{
			height: 30px;
		}
		.products .col2 .item {
			gap: 4px;
			padding: 24px 0;
		}
		
		.products .col2 .item .btn {
			display: flex;
			justify-content: center;
			margin-bottom: 0;
		}
		.products .col2 .item a {
			width: fit-content;
		}
}