@charset "utf-8";


/* top～info */
#top-info{
width: 100%;
overflow: hidden;
position: relative;
padding: 0 0 100px;
}
/* top */
#top{
width: 100%;
min-height: 100vh;
position: relative;
padding: 0 5%;
}
#top .bg{
width: 100%;
display: flex;
align-items: top;
justify-content: center;
position: relative;
}
#top .bg > div{
width: 100%;
min-width: 1600px;
position: relative;
}
#top .bg img{
width: 100%;
position: relative;
}
#top > .load > .item{
width: 100%;
position: relative;
margin: -40% 0 0 0;
padding: 0 5%;
}
#top .item > div{
width: 100%;
max-width: 1400px;
position: relative;
margin: 0 auto;
}
#top .item h1{
width: 100%;
position: relative;
margin: 0 0 5px;
}
#top .item .day{
width: 100%;
position: relative;
margin: 0 0 10px;
}
#top .item h1 img,
#top .item .day img{ width: 100%; }
#top .item .bt-base a{
width: 100%;
max-width: 500px;
overflow: hidden;
background: linear-gradient(-10deg, rgba(0,185,202) 0%,rgba(0,65,178) 100%);
display: block;
font-size: 20px;
text-align: center;
padding: 0;
}
#top .item .bt-base a img{
width: 100%;
position: relative;
}


/* インフォ */
#info{
width: 100%;
position: relative;
padding: 100px 0 0;
}
/* インフォ ニュース */
#info #news{
width: 100%;
position: relative;
margin: 0 0 30px;
padding: 0 5%;
}
#info #news > div{
width: 100%;
max-width: 1400px;
background: linear-gradient(-10deg, rgba(0,185,202,0.7) 0%,rgba(0,65,178,0.7) 100%);
display: flex;
align-items: center;
position: relative;
margin: 0 auto;
padding: 10px;
border: 1px #00e5d2 solid;
}
#info #news .min-frame{
width: 100%;
display: flex;
justify-content: space-between;
position: absolute;
top: -11px;
left: 0;
}
#info #news .min-frame img:nth-child(2){
transform: scale(-1,1);
}
#info #news h2{
width: 150px;
flex-shrink: 0;
position: relative;
padding: 10px;
}
#info #news h2 *{ font-weight: 800; }
#info #news h2 p{
width: 100%;
font-size: 40px;
position: relative;
margin: 0 0 -10px;
}
#info #news h2 span{
width: 100%;
display: block;
font-size: 18px;
position: relative;
}
#info #news .item{
width: 100%;
background: #fff;
position: relative;
padding: 20px;
clip-path: polygon(20px 0, 0% 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 100%, 0 20px);
}
#info #news .item hr{
width: 100%;
display: none;
position: relative;
border-bottom: 1px rgba(0,0,0,0.15) dashed;
}
#info #news .item dl{
width: 100%;
display: flex;
position: relative;
}
#info #news .item dl:nth-child(n+2){ display: none; }
#info #news .item dl dt{
width: 130px;
flex-shrink: 0;
font-size: 20px;
font-weight: 700;
position: relative;
}
#info #news .item dl dd{
width: 100%;
position: relative;
margin: 0 0 -5px;
}
#info #news .item dl dd > div{
width: 100%;
font-size: 20px;
position: relative;
margin: 0 0 5px;
}
#info #news .bt-old{
width: 30px;
position: relative;
margin: 0 10px 0 15px;
}
#info #news .bt-old img{
width: 33px;
position: relative;
}


/* インフォ トピック */
#topic{
width: 100%;
position: relative;
padding: 0 calc(5% - 15px);
}
#topic ul{
width: 100%;
max-width: calc(1400px + 30px);
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
margin: 0 auto -30px;
}
#topic ul li{
width: calc(50% - 30px);
position: relative;
margin: 0 15px 30px;
}
#topic ul li.large{ width: calc(100% - 30px); }
#topic ul li a{
width: 100%;
background: linear-gradient(-10deg, rgba(0,185,202,0.7) 0%,rgba(0,65,178,0.7) 100%);
display: block;
position: relative;
padding: 10px;
border: 1px #00e5d2 solid;
}
#topic ul li a img{
width: 100%;
clip-path: polygon(20px 0, 0% 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 100%, 0 20px);
}


/* ホップアップ */
.pop-up{
width: 100%;
max-width: 1000px;
background: #fff;
position: relative;
padding: 20px;
border-radius: 15px;
}
.pop-up h3{
width: 100%;
position: relative;
margin: 0 0 20px;
}
.pop-up h3 img{
width: 100%;
border: 1px #eee solid;
border-radius: 10px;
}
.pop-up p{
width: 100%;
position: relative;
margin: 0 0 20px;
}
.pop-up > img{
width: 100%;
border: 1px #eee solid;
border-radius: 10px;
}


/* 概要 */
#intro{
width: 100%;
position: relative;
}
#intro .frame{
position: relative;
margin: -100px 0 0 0;
}
#intro > .bg{
width: 100%;
height: 100vh;
background: #000 url(../img/_bg.jpg) no-repeat center;
background-size: cover;
position: sticky;
top: 0;
}
#intro > .bg .particle-box{
width: 110%;
height: 100%;
opacity: 0.5;
overflow: hidden;
position: absolute;
top: 0;
left: -10%;
/*mix-blend-mode: screen;*/
}
.particle{
aspect-ratio: 4 / 3;
position: absolute;
bottom: 0; /* -150px 画面下部の外側からスタート */
pointer-events: none; /* パーティクルがクリックイベントを妨げないようにする */
background-size: cover;
background-position: center;
opacity: 0;
/* アニメーションを適用 */
animation: bubble-rise linear forwards;
will-change: transform, opacity; /* ブラウザにアニメーションを最適化させるヒント */
--rotation-end: 0deg; /* 回転角度のカスタムプロパティ（初期値） */
--sway-x: 0px; /* 左右の揺れの大きさ（初期値） */
}
@keyframes bubble-rise {
	0% {
		transform: translateY(0) rotate(0) translateX(0);
		opacity: 0;
	}
	10% {
		opacity: 1.0;
	}
	25% {
		transform: translateY(-30vh) translateX(var(--sway-x));
	}
	50% {
		transform: translateY(-60vh) translateX(0);
	}
	75% {
		transform: translateY(-90vh) translateX(calc(var(--sway-x) * -1));
	}
	90% {
		opacity: 1.0;
	}
	100% {
		transform: translateY(-120vh) translateX(0);
		opacity: 0;
	}
}
/* 概要 はじめに  */
#intro #comment{
width: 100%;
position: relative;
margin: calc(-100vh + 100px) 0 0;
padding: 0 5% 100px;
}
#intro #comment .text{
width: 100%;
position: relative;
margin: 0 0 -80px;
}
#intro #comment .text p{
width: 100%;
text-align: center;
font-size: 24px;
font-weight: 700;
color: #fff;
position: relative;
margin: 0 0 60px;
}
/* 概要 ヒストリー  */
#intro #history{
width: 100%;
overflow: hidden;
position: relative;
padding: 0 5% 100px;
}
#intro #history .text{
width: 100%;
max-width: 1400px;
text-align: center;
font-size: 24px;
color: #fff;
font-weight: 700;
position: relative;
margin: 0 auto 30px;
}
#intro #history .text p{
width: 100%;
text-align: center;
font-size: 18px;
color: #ff3380;
position: relative;
}
#intro #history .swiper{
width: 100%;
max-width: 1400px;
overflow: visible !important;
position: relative;
margin: 0 auto;
}
#intro #history .swiper ul{
width: 100%;
position: relative;
}
#intro #history .swiper ul li{
width: auto;
height: auto;
overflow: hidden;
display: inline-block;
position: relative;
padding: 30px;
border: 1px rgba(255,255,255,0.15) solid;
clip-path: polygon(45px 0, 0% 0%, 100% 0%, 100% calc(100% - 45px), calc(100% - 45px) 100%, 0% 100%, 0% 100%, 0 45px);
}
	#intro #history .swiper ul li:nth-child(1){ background: linear-gradient(-10deg, rgba(85,240,255,0.7) 0%,rgba(27,110,255,0.7) 100%); }
	#intro #history .swiper ul li:nth-child(2){ background: linear-gradient(-10deg, rgba(255,157,85,0.7) 0%,rgba(255,27,86,0.7) 100%); }
	#intro #history .swiper ul li:nth-child(3){ background: linear-gradient(-10deg, rgba(255,174,134,0.7) 0%,rgba(255,166,27,0.7) 100%); }
	#intro #history .swiper ul li:nth-child(4){ background: linear-gradient(-10deg, rgba(85,255,240,0.7) 0%,rgba(27,150,255,0.7) 100%); }
	#intro #history .swiper ul li:nth-child(5){ background: linear-gradient(-10deg, rgba(255,85,215,0.7) 0%,rgba(113,27,255,0.7) 100%); }
	#intro #history .swiper ul li:nth-child(6){ background: linear-gradient(-10deg, rgba(255,157,85,0.7) 0%,rgba(255,27,86,0.7) 100%); }
	#intro #history .swiper ul li:nth-child(7){ background: linear-gradient(-10deg, rgba(85,240,255,0.7) 0%,rgba(27,110,255,0.7) 100%); }
#intro #history .swiper .bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
mix-blend-mode: overlay;
}
#intro #history .swiper .bg img{ height: 100%; }
#intro #history .swiper .box{
width: auto;
display: flex;
position: relative;
}
#intro #history .swiper .year{
width: 300px;
display: inline-block;
position: relative;
mix-blend-mode: overlay;
}
#intro #history .swiper .year p{
display: inline;
font-size: 80px;
font-weight: 700;
color: #fff;
}
#intro #history .swiper .item{
width: 450px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin: 0 0 0 30px;
}
#intro #history .swiper .item .box_1{
width: 100%;
position: relative;
}
#intro #history .swiper .item img{
width: 100%;
background: rgba(0,0,0,0.5);
position: relative;
margin: 0 0 10px;
}
#intro #history .swiper .item p{
font-size: 18px;
font-weight: 700;
line-height: 1.5em;
color: #fff;
}
#intro #history .swiper .item span{
width: 100%;
display: block;
font-size: 18px;
line-height: 1.0em;
color: #fff;
position: relative;
margin: 0 0 10px;
}
#intro #history .swiper .item .bt-base{ display: block; }
#intro #history .swiper .item .bt-base a{
background: #fff;
font-size: 14px;
color: #242424;
padding: 8px 15px;
border-radius: 5px;
margin: 0;
}
#intro #history .swiper .swiper-scrollbar{
background: rgba(255,255,255,0.2);
bottom: -30px;
}
#intro #history .swiper .swiper-scrollbar-drag {
background: #ff3380;
opacity: 1;
}
/* 概要 プロジェクト */
#intro #project{
width: 100%;
position: relative;
padding: 0 5% 100px;
}
#intro #project ul{
width: 100%;
max-width: 1400px;
position: relative;
margin: 0 auto -50px;
}
#intro #project ul li{
width: 100%;
position: relative;
margin: 0 0 50px;
}
#intro #project ul li .tag{
width: 100%;
height: 24px;
background: url(../img/project_tag.webp) no-repeat left top;
position: relative;
}
#intro #project ul li .tag p{
width: 200px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
font-weight: 700;
position: relative;
}
#intro #project ul li .item{
width: 100%;
background: linear-gradient(-10deg, rgba(0,185,202,0.7) 0%,rgba(0,65,178,0.7) 100%);
position: relative;
padding: 20px;
border: 1px #00e5d2 solid;
}
#intro #project ul li .item > div:nth-child(1){
width: 50%;
height: 100%;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#intro #project ul li .item > div:nth-child(1) img{
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
}
#intro #project ul li .item > div:nth-child(2){
width: 100%;
min-height: 700px;
background: #fff url(../img/_texture02.gif);
display: flex;
justify-content: flex-end;
position: relative;
border-radius: 20px;
}
#intro #project ul li .item .info{
width: 50%;
display: flex;
align-items: center;
position: relative;
padding: 20px;
}
#intro #project ul li .item .info > div{
width: 100%;
position: relative;
}
#intro #project ul li .item .info h3{
width: 100%;
position: relative;
margin: 0 0 30px;
}
#intro #project ul li .item .info h3 img{ width: 100%; }
#intro #project ul li .item .info h4{
width: 100%;
font-size: 30px;
font-weight: 700;
color: #ff3380;
position: relative;
margin: 0 0 10px;
}
#intro #project ul li .item .info p{
width: 100%;
font-size: 18px;
position: relative;
margin: 0 0 30px;
}
#intro #project ul li .item .info .bt-base{
width: 100%;
flex-wrap: wrap;
margin: 0 auto;
}
#intro #project ul li .item .info .bt-base a{
width: calc(100% - 30px);
display: block;
text-align: center;
margin: 0 10px 20px;
}
#intro #project ul li .item .info .bt-base a.min{
width: calc(50% - 30px);
background: #121212;
}


/* 製品情報 */
#spec{
width: 100%;
position: relative;
/*padding: 100px calc(5% - 20px);*/
padding: 100px calc(5% - 20px) 0;
}
#spec > section{
width: 100%;
max-width: 1440px;
display: flex;
flex-wrap: wrap;
position: relative;
margin: 0 auto 100px;
}
#spec hr{
width: 100%;
opacity: 0.25;
position: relative;
margin: 30px 20px;
border-bottom: 1px #242424 solid;
}
#spec dl{
width: 50%;
display: flex;
flex-wrap: wrap;
align-items: center;
position: relative;
padding: 0 20px;
}
#spec dl.large{ width: 100%; }
#spec dl dt{
width: 100px;
background: #001564;
flex-shrink: 0;
text-align: center;
font-size: 12px;
line-height: 1.0em;
color: #fff;
position: relative;
margin: 10px 10px 10px 0;
padding: 10px;
border-radius: 6px;
text-shadow: none;
}
#spec dl dd{
width: calc(100% - 110px);
font-size: 16px;
line-height: 1.3em;
position: relative;
margin: 10px 0;
}
#spec .bay-link{
width: 100%;
position: relative;
margin: 0 0 100px;
}
#spec .bay-link h1{
width: 100%;
max-width: 1000px;
position: relative;
margin: 0 auto -1.5%;
}
#spec .bay-link h1 img{ width: 100%; }
#spec .bay-link .bt-base a{
width: 350px;
display: block;
font-size: 28px;
text-align: center;
}
#spec #topic{ padding: 0; }


/* レスポンシブ */


@media screen and (min-width: 2561px){



}


@media screen and (max-width: 1920px){



}


@media screen and (max-width: 1600px){



}


@media screen and (max-width: 1400px){

  /* top */
  #top{
  height: auto;
  padding: 0;
  }

}


@media screen and (max-width: 1200px){

	#top{ min-height: auto; }

}


/* end */