@charset "UTF-8";

.innerFrame{
	display:block;
	margin:0 auto;
	padding:0 80px;
	width: min(100%,1160px);
	position:relative;
}
.spOnly {
	display: none;
}

sup {
	font-size: .7em;
}

h1 {
	font-size:clamp(1.9rem,3.9vw,8.3rem);
	font-weight:900;
	line-height:125%;
	position: absolute;
	top: clamp(40px, 11vw, 11vw);
	left: clamp(15px, 9vw ,9vw);
}
h2 {
	overflow:hidden;
	text-align:center;
	font-size: 3.4rem;
	font-weight:900;
	line-height:155%;
}

#cover {
	display:block;
	overflow:hidden;
	width:100%;
	aspect-ratio:16/9;
	position:relative;
	background: url("../images/bg_main.webp") no-repeat; 
	background-position: top center;
	background-size: cover;
}

#cover p{
	display: inline-block;
	overflow:hidden;
	font-weight:900;
	line-height:125%;
	position:absolute;
	bottom: unset;
	left: unset;
}
#cover p.logo {
	top:3.2vw;
	left:4vw;
	width:10vw;
}
#cover p.logo img {
	width: 100%;
	height: auto;
}
#cover p.mainLead {
	font-size:clamp(1.3rem,2.1vw,4.3rem);
	top: clamp(100px, 21vw, 21vw);
	left: clamp(40px, 9.3vw, 9.3vw);
}
#cover p.mainzero {
	top: clamp(150px, 30vw,30vw);
	left:clamp(40px, 9.3vw,9.3vw);
	width: clamp( 150px, 25vw,25vw);
}
#cover p.mainzero img {
	width: 100%;
	height: auto;
}

#cover a.contact{
	display:inline-block;
	overflow:hidden;
	min-width:330px;
	padding:.7em 1.4em;
	font-size:2.4rem;
	font-weight:900;
	line-height:125%;
	color:#ffffff;
	text-decoration:none;
	text-align:center;
	top: 43vw;
	left:9.3vw;
	position: absolute;

	-webkit-border-radius: 50px;
	border-radius:50px;
	background: linear-gradient(to right,  rgb(0,163,151) 0%,rgb(30,220,255) 100%);
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

#cover a.contact::before{
	display:inline-block;
	overflow:hidden;
	position:relative;
	font-size:1.1em;
	line-height:125%;
	vertical-align:middle;
	margin-right:0.75em;
}

.pc #cover  a.contact:hover{
	color:#ffffff;
	filter: brightness(1.5);
}

#cover a.contact > *{
	position:relative;
	vertical-align:middle;
}

a.logoLink {
	filter: unset;
}

/* About */
#about {
	padding: 1em 0 3em;
	color: #fff;
	background:
		url("../images/txt_0_speed.svg"),
		linear-gradient(
			135deg,
			#19c3d6 0%,
			#a5e7f7 100%
		);
		background-repeat: no-repeat, no-repeat;
		background-position: center 60px, center; /* 画像だけ少し下にずらす */
		background-size: 430px auto, cover;      /* 画像を小さく、グラデーションは全体に */
}
#about h2 {
	margin: 2.5em 0;
}
#about article {
	max-width: 810px;
	margin: auto;
	font-size: 1.8rem;
	line-height: 2.2;
}
#about article p {
	font-weight: 600;
}
#about .graph {
	text-align: center;
	margin: 3em 0;
}
#about .graph p {
	margin-top: 1em;
}

.contact a{
	display:inline-block;
	overflow:hidden;
	min-width:390px;
	padding:1em 2em;
	font-size:2.4rem;
	font-weight:900;
	line-height:125%;
	color:#ffffff;
	text-decoration:none;
	text-align:center;

	-webkit-border-radius: 50px;
	border-radius:50px;
	background: linear-gradient(to right,  rgb(0,163,151) 0%,rgb(30,220,255) 100%);
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.contact a::before{
	display:inline-block;
	overflow:hidden;
	position:relative;
	font-size:1.1em;
	line-height:125%;
	vertical-align:middle;
	margin-right:0.75em;
}

.pc .contact a:hover{
	color:#ffffff;
	filter: brightness(1.5);
}

.contact a > *{
	position:relative;
	vertical-align:middle;
}

/* Example */
.sp #example .innerFrame {
	overflow: hidden;
}

#example h2 {
	color: #00aebb;
	position: relative;
	margin-top: 3em;
	padding-bottom: 16px;
}
#example h2::after {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	content: " ";	
	width: 100%;
	background: linear-gradient(
		to right,
		#ffffff 0%,
		#ffffff 15%,
		#00aebb 50%,
		#ffffff 85%,
		#ffffff 100%
	);
}

.supTxt {
	text-align: center;
	margin: 1em 0 5em;
}

ul.exList li {
	display: flex;
	gap: 30px;
	background-repeat: no-repeat;
	background-size: 25%;
	background-position: 100% 100%;
	margin-bottom: 6em;
}
ul.exList li .photo {
}
ul.exList li .photo img {
	width: clamp(30vw,550px,50vw);
	height: auto;
}

ul.exList li .title {
	font-size: 2.2rem;
}
ul.exList li .lead {
	color: #00aebb;
	font-size: 1.8rem;
	font-weight: 700;
	margin: 1em 0;
}
ul.exList li .lead span {
	font-size: 1.2rem;
	font-weight: 400;
	margin-left: 1.5em;
}
ul.exList li .lead::before {
	content: "▶ ";
	font-size: 1.4rem;
}
ul.exList li .text {
	font-size: 1.6rem;
	line-height: 1.6;
}
ul.exList li:nth-child(even) {
	flex-direction: row-reverse;
	background-position: 0% 100%;
}
ul.exList li:nth-child(even) .txtwrap {
	flex:1;
	text-align: left;
}
ul.exList li:nth-child(1) { background-image: url("../images/no_01.svg"); }
ul.exList li:nth-child(2) { background-image: url("../images/no_02.svg"); }
ul.exList li:nth-child(3) { background-image: url("../images/no_03.svg"); }
ul.exList li:nth-child(4) { background-image: url("../images/no_04.svg"); }
ul.exList li:nth-child(5) { background-image: url("../images/no_05.svg"); }
ul.exList li:nth-child(6) { background-image: url("../images/no_06.svg"); }


#products {
	background-image: url("../images/bg_prduct.webp");
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	padding-bottom: 2em;
}
#products h2 {
	position: relative;
	margin-top: 3em;
	padding-bottom: 16px;
}
#products h2::after {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	content: " ";	
	width: 100%;
	background: linear-gradient(
		to right,
		transparent 0%,
		transparent 15%,
		#000 50%,
		transparent 85%,
		transparent 100%
	);
}

#products .tableWrap p {
	text-align: center;
	margin: 1.5em 0 3em;
}

.specList {
	width: 556px;
	margin: 1em auto;
	border-top: 1px solid;
}
.specList td ,
.specList th {
	border-bottom: 1px solid;
	padding: .5em 0;
}
.specList th {
	font-weight: 600;
	vertical-align: top;
}


#endBlock {
	aspect-ratio: 960 / 221;
	background: url("../images/bg_bottom.webp") no-repeat;
	background-size: cover;
}
@media screen and (max-width:1000px){
	#example .innerFrame {
		padding: 0;
	}
}
/* for Sp --------------------*/
@media screen and (max-width:768px){
	main {
	}
	img {
		max-width: 100%;
	}
	.spOnly { display: block; }
	.innerFrame{
		padding:0 6vw 1em;
	}
	#cover {
		width: 100%;
		max-width: 100vw;
		min-width: 390px;
		aspect-ratio:375/523;
		background: url("../images/bg_sp.webp") no-repeat; 
		background-position: top center;
		background-size: cover;
	}
	#cover p.logo {
		top: 4%;
		left: 5%;
		width: 25%;
	}
	#cover a.contact{
		font-size:clamp(1.7rem,4.2vw,3.3rem);
		min-width: unset;
		top: unset;
		bottom: 11%;
		left: 5%;
	}
	h1 {
		font-size: clamp(4.2rem, 11vw, 8rem);
		top: 17%;
		left: 5%;
		line-height: 110%;
	}
	#cover p.mainLead {
		font-size:clamp(1.9rem,4.8vw,4.5rem);
		top: 46%;
		left: 5%;
	}
	#cover p.mainzero {
		top: 61%;
		left:5%;
		width: clamp(210px, 52vw,800px);
	}
	#about {
		background-size: 90vw auto, cover;
		padding-bottom: 0;
	}
	#about article {
		width: 100%;
	}
	#about article img {
		height: auto;
	}
	#about h2 {
		margin: 1.5em 0;
		line-height: 1.2;
	}

	#example h2 {
		margin-top: 1em;
		line-height: 1.2;
	}

	#example .innerFrame {
		padding: 0;
		overflow: hidden;
	}
	ul.exList li {
		margin-bottom: 1em;
	}
	ul.exList li ,
	ul.exList li:nth-child(even) {
		flex-direction: column;
		padding-top:8vw;
		background-position-y: 0;
		background-size: 32%;
	}
	ul.exList li:nth-child(odd) .photo {
	}
	ul.exList li:nth-child(even) .photo {
		text-align: right;
	}
	ul.exList li .photo img {
		mix-blend-mode: multiply;
		width: clamp(30vw,550px,80vw);
		height: auto;
	}
	ul.exList li .txtwrap {
		padding: 5vw;	
	}

	#products h2 {
		margin-top: 1em;
	}
	#products .tableWrap p {
		text-align: left;
		margin-bottom: 1em;
	}


	.specList {
		width: 100%;
	}
	.specList th {
		white-space: nowrap;
		padding-right: .5em;
	}

	#endBlock {
		aspect-ratio: 2/1;
		background-position: center;
	}

}


/* Animation */
.fadeImg img{
  position:relative;
  opacity:0.0;
  top:50px;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}


.fadeImg.scon img{
  opacity:1.0;
  top:0;
}

.fadeMe {
  position:relative;
  opacity:0.0;
  top:50px;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}


.fadeMe.scon {
  opacity:1.0;
  top:0;
}


.decoImg img {
	position:relative;
	top:0;
	-webkit-transition: all 0.8s ease-out;
	transition: all 0.8s ease-out;

}
ul.exList li:nth-child(odd) .decoImg img {
	opacity: 0.0;
	left: -50%;
}
ul.exList li:nth-child(even) .decoImg img {
	opacity: 0.0;
	left: 50%;
}

ul.exList li:nth-child(odd) .decoImg.scon img ,
ul.exList li:nth-child(even) .decoImg.scon img {
	opacity:1.0;
	left: 0;
}