@charset "UTF-8";


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




/* =========================
   Loader (cover + fade)
   ========================= */
.loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #fff;          /* ここはブランド色でもOK */
  opacity: 1;
  transition: opacity .6s ease, visibility .6s linear;
  animation: loaderIn .6s ease both;   /* 読み込み時に“じわっ” */
}
.loader img{
  min-width: 80vw;           /* お好みで */
}

/* ローダー退場 */
.loader.is-hidden{
  opacity: 0;
  visibility: hidden;
}

/* 本体は最初は隠す → ローダー終了で表示 */
.main{
  opacity: 0;
  transition: opacity .6s ease;
}
.main.is-visible{
  opacity: 1;
}

/* ふわっと入り用のキーフレーム */
@keyframes loaderIn{
  from{ opacity: 0 }
  to{   opacity: 1 }
}

/* ユーザーが動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce){
  .loader, .main{ transition: none; animation: none; }
}






.main{
	width: 100%;
  height: 100vh;       
  height: 100svh; 
}


/* =========================
   Hero (full screen + overlay + fade)
   ========================= */
.hero-fade {
  position: absolute;
  bottom:0;
  right: 0;
  width: calc(100% - 60px);
  height: calc(100vh - 110px);        /* fallback */
  height: calc(100svh - 110px);        /* iOS等の安全なvh */
  overflow: clip;
  isolation: isolate;   /* ::before のブレンドを独立 */
}

/* 透明黒オーバーレイ（全スライド共通） */
.hero-fade::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30,20,15,.5); /* 濃さはここで調整 */
  pointer-events: none;
  z-index: 1;
}

.main-slide{
	width: 100%;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 画像の重ね＆フェード */
.main-slide .bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.4s ease;
  will-change: opacity;
  backface-visibility: hidden;
}
.main-slide .bg.is-active{ opacity: 1; }

/* アニメ軽減ユーザー配慮 */
@media (prefers-reduced-motion: reduce){
  .main-slide .bg{ transition: none; }
}


.top-copy{
	position: absolute;
	bottom:30px;
	left: 90px;
	z-index: 3;
	color:#fff;
	text-align:left;
	padding-right: 21px;
}

.top-copy-jp{
	font-size:30px;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 21px;
}
.top-copy-jp span{
	display: block;
}
.top-copy-en{
	font-size:14px;
	font-weight: 600;
	line-height: 1;
}
.top-copy-compnay{
	font-size:45px;
	font-family: 'Impact', sans-serif;
	font-weight: 400;
	line-height: 1;
	margin-top: 21px;
}


.top-blue-bg{
	position: absolute;
	bottom: 0;
	left: 0;
	width:60px;
	height: 100px;
	background: #0080cb;
	z-index: -1;
}

.scroll-text{
	width: 60px;
	position: absolute;
	bottom: 180px;
	left: 0;
	font-size:10px;
	font-weight: 600;
	color:#0080cb;
	text-align: center;
}

.mainVisual__scroll{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	align-items: center;
	position:absolute;
	bottom:100px;
	left:-10px;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
	z-index: 10;
	padding: 30px 0 0 0;
	}
	
	.mainVisual__scrollLine{
	position:relative;
	width:100px;
	height:1px;
	background:#0080cb;
	margin-bottom: 12px
	}
	.mainVisual__scrollLine:after{
	display:block;
	position:absolute;
	top:-3px;
	left:0;
	width:7px;
	height:7px;
	border-radius:50%;
	background:#0080cb;
	-webkit-animation:scroll 2s linear infinite;
	animation:scroll 2s linear infinite;
	content:'';
	}

@-webkit-keyframes scroll{0%{left:0;opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}
@keyframes scroll{0%{left:0;opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}




.top-business{
	width: 100%;
	display: block;
	justify-content: space-between;
}

.top-business-left{
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.top-business-left img{
	width: 32%;
	height: auto;
}

.top-business-right{
	width: 100%;
	margin-top: 21px;
}

.top-business-h2{
	width: 100%;
	font-size:20px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	padding:12px 0 12px 0;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	margin: 0 0 21px 0;
}


.top-business-text{
	width: 100%;
	font-size: 15px;
	line-height: 2;
	color:#fff;

}




.link-to-business{
	text-align: right;
	margin-top: 36px;	
}




.top-product{
	width: 100%;
	display: block;
	justify-content: space-between;
}


.top-product-col{
	width: 100%;
	margin-bottom: 60px;
}

.top-product-photo{
	width: 100%;
}
.top-product-photo img{
	width: 100%;
}


.top-product-h3{
	font-size:20px;
	margin: 21px 0 21px 0;
}
.top-product-h3 span{
	display: block;
	font-size:15px;
	color:#0080cb;
	margin-top: 3px;
}

.link-to-business{
	margin-top: 12x;	
}







a.link-to-page{
	position: relative;
	text-align: center;
	display: inline-block;
	width: 130px;
	height: 40px;
	background: #333;
	color:#fff;
	text-decoration: none;
	font-size:13px;
	font-weight: 500;
	padding: 10px 0 0 0;
	margin: 15px auto 0 auto;
	border-radius: 15px;
	}

a.link-to-page:hover{
	opacity: 0.8;
	}




/* =========================
   Loader (cover + fade)
   ========================= */
.loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #fff;          /* ここはブランド色でもOK */
  opacity: 1;
  transition: opacity .6s ease, visibility .6s linear;
  animation: loaderIn .6s ease both;   /* 読み込み時に“じわっ” */
}
.loader img{
  max-width: 40vw;           /* お好みで */
  max-height: 40vh;
}

/* ローダー退場 */
.loader.is-hidden{
  opacity: 0;
  visibility: hidden;
}

/* 本体は最初は隠す → ローダー終了で表示 */
.main{
  opacity: 0;
  transition: opacity .6s ease;
}
.main.is-visible{
  opacity: 1;
}

/* ふわっと入り用のキーフレーム */
@keyframes loaderIn{
  from{ opacity: 0 }
  to{   opacity: 1 }
}

/* ユーザーが動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce){
  .loader, .main{ transition: none; animation: none; }
}






}



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




/* =========================
   Loader (cover + fade)
   ========================= */
.loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #fff;          /* ここはブランド色でもOK */
  opacity: 1;
  transition: opacity .6s ease, visibility .6s linear;
  animation: loaderIn .6s ease both;   /* 読み込み時に“じわっ” */
}
.loader img{
  max-width: 40vw;           /* お好みで */
  max-height: 40vh;
}

/* ローダー退場 */
.loader.is-hidden{
  opacity: 0;
  visibility: hidden;
}

/* 本体は最初は隠す → ローダー終了で表示 */
.main{
  opacity: 0;
  transition: opacity .6s ease;
}
.main.is-visible{
  opacity: 1;
}

/* ふわっと入り用のキーフレーム */
@keyframes loaderIn{
  from{ opacity: 0 }
  to{   opacity: 1 }
}

/* ユーザーが動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce){
  .loader, .main{ transition: none; animation: none; }
}






.main{
	width: 100%;
  height: 100vh;       
  height: 100svh; 
}


/* =========================
   Hero (full screen + overlay + fade)
   ========================= */
.hero-fade {
  position: absolute;
  bottom:0;
  right: 0;
  width: calc(100% - 156px);
  height: calc(100vh - 110px);        /* fallback */
  height: calc(100svh - 110px);        /* iOS等の安全なvh */
  overflow: clip;
  isolation: isolate;   /* ::before のブレンドを独立 */
}

/* 透明黒オーバーレイ（全スライド共通） */
.hero-fade::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30,20,15,.5); /* 濃さはここで調整 */
  pointer-events: none;
  z-index: 1;
}

.main-slide{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 画像の重ね＆フェード */
.main-slide .bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.4s ease;
  will-change: opacity;
  backface-visibility: hidden;
}
.main-slide .bg.is-active{ opacity: 1; }

/* アニメ軽減ユーザー配慮 */
@media (prefers-reduced-motion: reduce){
  .main-slide .bg{ transition: none; }
}


.top-copy{
	position: absolute;
	bottom: 54px;
	left: 226px;
	z-index: 3;
	color:#fff;
	text-align:left;
}

.top-copy-jp{
	font-size:45px;
	font-weight: 600;
	line-height: 1;
	margin-bottom: 21px;
}
.top-copy-en{
	font-size:14px;
	font-weight: 600;
	line-height: 1;
}
.top-copy-compnay{
	font-size:55px;
	font-family: 'Impact', sans-serif;
	font-weight: 400;
	line-height: 1;
	margin-top: 21px;
}


.top-blue-bg{
	position: absolute;
	bottom: 0;
	left: 0;
	width:156px;
	height: 100px;
	background: #0080cb;
	z-index: -1;
}

.scroll-text{
	width: 156px;
	position: absolute;
	bottom: 180px;
	left: 0;
	font-size:12px;
	font-weight: 600;
	color:#0080cb;
	text-align: center;
}

.mainVisual__scroll{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	align-items: center;
	position:absolute;
	bottom:100px;
	left:37px;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
	z-index: 10;
	padding: 30px 0 0 0;
	}
	
	.mainVisual__scrollLine{
	position:relative;
	width:100px;
	height:1px;
	background:#0080cb;
	margin-bottom: 12px
	}
	.mainVisual__scrollLine:after{
	display:block;
	position:absolute;
	top:-3px;
	left:0;
	width:7px;
	height:7px;
	border-radius:50%;
	background:#0080cb;
	-webkit-animation:scroll 2s linear infinite;
	animation:scroll 2s linear infinite;
	content:'';
	}

@-webkit-keyframes scroll{0%{left:0;opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}
@keyframes scroll{0%{left:0;opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}




.top-business{
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.top-business-left{
	width: 500px;
	display: flex;
	justify-content: space-between;
}

.top-business-left img{
	width: 150px;
	height: 300px;
}

.top-business-right{
	width: 400px;
}

.top-business-h2{
	width: 100%;
	font-size:20px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	padding:12px 0 12px 0;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	margin: 0 0 21px 0;
}


.top-business-text{
	width: 100%;
	font-size: 15px;
	line-height: 2;
	color:#fff;

}




.link-to-business{
	text-align: right;
	margin-top: 36px;	
}




.top-product{
	width: 100%;
	display: flex;
	justify-content: space-between;
}


.top-product-col{
	width: 450px;
}

.top-product-photo{
	width: 100%;
}
.top-product-photo img{
	width: 100%;
}


.top-product-h3{
	font-size:20px;
	margin: 21px 0 21px 0;
}
.top-product-h3 span{
	display: block;
	font-size:15px;
	color:#0080cb;
	margin-top: 3px;
}

.link-to-business{
	margin-top: 12x;	
}







a.link-to-page{
	position: relative;
	text-align: center;
	display: inline-block;
	width: 130px;
	height: 40px;
	background: #333;
	color:#fff;
	text-decoration: none;
	font-size:13px;
	font-weight: 500;
	padding: 10px 0 0 0;
	margin: 15px auto 0 auto;
	border-radius: 15px;
	}

a.link-to-page:hover{
	opacity: 0.8;
	}


a.link-to-page-blue{
	position: relative;
	text-align: center;
	display: inline-block;
	width: 130px;
	height: 40px;
	background: #333;
	color:#fff;
	text-decoration: none;
	font-size:13px;
	font-weight: 500;
	padding: 10px 0 0 0;
	margin: 15px auto 0 auto;
	border-radius: 15px;
	}

a.link-to-page-blue:hover{
	background-color:#0080cb;

	}




/* =========================
   Loader (cover + fade)
   ========================= */
.loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #fff;          /* ここはブランド色でもOK */
  opacity: 1;
  transition: opacity .6s ease, visibility .6s linear;
  animation: loaderIn .6s ease both;   /* 読み込み時に“じわっ” */
}
.loader img{
  max-width: 40vw;           /* お好みで */
  max-height: 40vh;
}

/* ローダー退場 */
.loader.is-hidden{
  opacity: 0;
  visibility: hidden;
}

/* 本体は最初は隠す → ローダー終了で表示 */
.main{
  opacity: 0;
  transition: opacity .6s ease;
}
.main.is-visible{
  opacity: 1;
}

/* ふわっと入り用のキーフレーム */
@keyframes loaderIn{
  from{ opacity: 0 }
  to{   opacity: 1 }
}

/* ユーザーが動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce){
  .loader, .main{ transition: none; animation: none; }
}



}