@charset "utf-8";
html{
	font-size: 62.5%;
	--en_font: "Overpass", sans-serif;
	--ja_font: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
body{
	letter-spacing: 0.5px;
	color: #323232;
	font-family: var(--ja_font);
}

a{
	text-decoration: none;
}
header{
	width: 100%;
	padding: 1.2rem 0 1.2rem 3rem;
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	align-items: center;
	border-bottom: 1px solid #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	opacity: 1;
	transition: border-color .4s;
}
header h1{
	width: 31.4rem;
}
header h1 img{
	width: 100%;
}

header ol{
	display: flex;
}

header ol a{
	padding: 0 3.8rem;
	font-size: 1.8rem;
	font-weight: bold;
	color: #fff;
	position: relative;
	transition: color .4s;
}

header ol li + li a::before{
	content: '';
	width: 1px;
	height: 5.2rem;
	background: #fff;
	transition: background .4s;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}
header.active img{
	animation: .4s header1;
}
header.noactive img{
	animation: .4s header2;
}
header ol li:last-child a:after{
	border: 0;
}
header.active{
	border-bottom: 1px solid #e1e1e1;
	background: #fff;
}
header.active ol li + li a::before{
	background: #e1e1e1;
}
header.active ol a{
	color: #323232;
}
@keyframes header1{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes header2{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

footer{
	font-size: 1.6rem;
	height: 8rem;
	border-top: 1px solid #979797;
	color: #979797;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 20;
	position: relative;
}

/*共通*/

section.fixed{
	z-index: 2;
}
section{
	display: flex;
	align-items: center;
	background: #fff;
}

section>div{
	width: 120rem;
	padding: 14rem 0 8rem;
	margin: 0 auto;
}
.access>div{
	padding: 6rem 0 8rem;
}

h4{
	margin: 0 0 3rem 0;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1em;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

h4 strong{
	margin: 2.6rem 0 0;
	font-size: 6rem;
	font-weight: 500;
	display: inline-block;
	color: #388eba00;
	font-family: var(--en_font);
	line-height: 1em;
	overflow: hidden;
	position: relative;
	transition: color 2s;
}
h4 strong::after{
	content: '';
	width: 200%;
	height: 100%;
	background: #388eba;
	position: absolute;
	top: -.5rem;
	left: -200%;
	z-index: -1;
	transition: left 1s;
}
h4 strong.active{
	color: #388ebaff;
}
h4 strong.active::after{
	left: 100%;
}
:is(.history,.company) h4{
	color: #fff;
}
:is(.history,.company) h4 strong{
	color: #ffffff00;
}
:is(.history,.company) h4 strong::after{
	background: #fff;
}
:is(.history,.company) h4 strong.active{
	color: #ffffffff;
}

.fixed{
	position: relative;
}
.stickey_active{
	position: sticky;
}


/*主要取扱商品*/
.product ul{
	width: 124rem;
   	margin: 0 calc(50% - 62rem);
}
.product ul .slick-slide{
	display: flex;
	justify-content: space-between;
	padding: 0 2rem;
}

.product ul div h5{
	margin: 0 0 3.8rem;
	font-size: 4rem;
	font-weight: 600;
	line-height: 1em;
}

.product ul div p{
	color: #b9b9b9;
	line-height: 2em;
	font-size: 1.8rem;
	font-weight: bold;
}
.product ul img:first-child{
	width: auto;
	height: 6.7rem;
	margin: 0 0 4.8rem;
}
.product div + img{
	width: 62rem;
	border-radius: 4rem 0 0 0;
}
.product .slick-arrow{
	width: 6rem;
	aspect-ratio: 1/1;
	border-radius: 50%;
	color: rgba(0, 0, 0, 0);
	position: absolute;
	z-index: 5;
	cursor: pointer;
}
.product .slick-next{
	bottom: 0;
	left: 12rem;
	background: url(../images/right-02.png) no-repeat center/contain;
}
.product .slick-prev{
	bottom: 0;
	left: 2rem;
	background: url(../images/right.png) no-repeat center/contain;
}


/*パララックスPG*/
.pagination
	{
	display: none;
	}


/* fv */
.fv{
	height: 100vh;
	background: url(../images/box01.jpg) no-repeat top center/cover;
	opacity: 0;
	transition: opacity .8s;
	position: relative;
	font-size: 10px;
}
.fv h2,.fv h3{
	position: absolute;
	mix-blend-mode: overlay;
}
.fv h2 img,.fv h3 img{
	width: 100%;
}
.fv h2{
	width: 26.6em;
	right: calc(50% - 60em - 17em);
}
.fv h3{
	width: 16.9em;
	left: calc(50% - 60em - 13em);
}
.fv.active h2{
	animation: 1s fv;
	animation-delay: .8s;
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
	animation-fill-mode: forwards;
}
.fv.active h3{
	animation: 1s fv;
	animation-delay: .4s;
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
	animation-fill-mode: forwards;
}
.fv > img{
	width: 60.8em;
	margin: auto;
	mix-blend-mode: overlay;
}
.fv.active{
	opacity: 1;
}
@keyframes fv{
	0%{
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
	}
	100%{
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
}
@media screen and (max-width:1600px) {
	.fv{
		font-size: .6vw;
	}
}

/* 沿革 */
.history, .company {
    background: linear-gradient(150deg,
    #81c6ea, #64b7d7, #096c99,#64b7d7,#81c6ea,#64b7d7, #096c99) repeat;
    background-size: 100% 462%;
    animation: bgslide 20s infinite linear;
}
.history::before,.company::before{
	content: '';
	width: 100%;
	height: 100%;
	background: url(../images/bg_line.png) no-repeat center/cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	mix-blend-mode: overlay;
	opacity: 1;
	animation: 1s fade;
}
@keyframes fade{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes bgslide {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}
/* .history  */
.history .slick-slide{
	display: flex;
	flex-wrap: wrap;
	gap: 3rem 2%;
	padding: 0 2rem;
}
.history .slick-slide li{
	width: 32%;
	background: #fff;
	border-radius: .6rem;
	padding: 3rem;
}
.history ul strong{
	margin: 0;
	font-size: 8rem;
	color: #a9cfdd;
	font-weight: bold;
	font-family: var(--en_font);
	display: block;
	line-height: 1em;
	text-align: right;
}
.history ul small{
	font-size: 1.6rem;
	margin: 0 0 7.5rem;
	line-height: 1em;
	display: block;
	text-align: right;
	font-weight: 500;
}
.history ul p{
	font-size: 2.2rem;
	line-height: 1.4545em;
	font-weight: bold;
}
.history > div > div{
	width: 124rem;
   	margin: 0 calc(50% - 62rem);
	padding-bottom: 9rem;
	position: relative;
}
.history .slick-arrow{
	width: 6rem;
	aspect-ratio: 1/1;
	position: absolute;
	bottom: 0;
	color: rgba(0, 0, 0, 0);
	background: none;
	cursor: pointer;
}
.history .slick-next{
	right: 2rem;
	background: url(../images/right-02.png) no-repeat center/contain;
}
.history .slick-prev{
	right: 12rem;
	background: url(../images/right.png) no-repeat center/contain;
}
.history .slick-dots{
	display: flex;
	gap: 2rem;
	position: absolute;
	bottom: 2.5rem;
	left: 2rem;
}
.history .slick-dots li{
	width: 1rem;
	border-radius: 50%;
	aspect-ratio: 1/1;
	background: #b1b1b1;

}
.history .slick-dots .slick-active{
	background: #fff;
}
.history .slick-dots button{
	width: 100%;
	height: 100%;
	display: block;
	font-size: 0;
	border: none;
	background: none;
	color: rgba(0, 0, 0, 0);
	cursor: pointer;
}

/* 主要取引先 */
.suppliers ul{
	margin: 0 0 2rem;
	padding: 5rem;
	border-radius: .6rem;
	background: #efefef;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2%;
}
.suppliers li{
	width: 32%;
	height: 4rem;
	font-size: 1.5rem;
	font-weight: 500;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.suppliers small{
	font-size: 1.5rem;
	display: block;
	text-align: right;
}
.suppliers small span{
	margin: 0 0 0 2em;
}

/* 会社概要 */
.company h4{
	position: relative;
	z-index: 10;
}
.company div{
	padding-right: 4rem;
	position: relative;
}
.company table{
	width: 100%;
	padding: 4rem;
	border-radius: .6rem;
	font-size: 1.5rem;
	background: #fff;
	display: block;
}
.company tbody{
	width: 100%;
	display: block;
}
.company tr{
	width: 100%;
	padding: 2rem 0;
	display: flex;
}
.company tr + tr{
	border-top: 1px solid #dcdcdc;
}
.company tr:last-child{
	padding: 0;
}
.company tr:last-child th{
	padding: 2rem 0;
}
.company th{
	width: 10%;
	font-weight: 400;
}
.company td{
	width: 90%;
}
.company div > img{
	width: 62.2rem;
	position: absolute;
	right: 0;
	top: 14rem;
	border-radius: .6rem;
	overflow: hidden;
	z-index: 5;
}
.company ul li{
	display: flex;
}
.company ul + ul{
	border-top: 1px solid #dcdcdc;
}
.company ul strong{
	width: 22rem;
	padding: 2rem 0;
	font-weight: 400;
	display: block;
}
.company ul span{
	padding: 2rem 0;
	line-height: 1.75em;
}

.online{
	position: relative;
	z-index: 20;
}
.online ul{
	display: flex;
	justify-content: space-between;
}
.online li{
	width: 23%;
	height: 8rem;
}
.online a{
	width: 100%;
	height: 100%;
	padding: 0 0 0 8rem;
	display: flex;
	align-items: center;
	position: relative;
	border: 1px solid #8b8b8b;
	border-radius: .6rem;
}
.online a::after{
	content: '';
	width: 1.6rem;
	aspect-ratio: 1/1;
	background: url(../images/online_icon.png) no-repeat center/contain;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 3rem;
}
.online img{
	width: 7rem;
}
.online .rakuten{
	width: 7.1rem;
}
.online .qoo10{
	width: 7.1rem;
}
.online .yahoo{
	width: 7.6rem;
}
.online .amazon{
	width: 7.6rem;
}
.access{
	z-index: 20;
	position: relative;
}

.js_fadein{
	opacity: 0;
	transform: translateY(3rem);
	transition: opacity .6s,transform .6s;
}
.js_fadein.active{
	opacity: 1;
	transform: translateY(0);
}

@media screen and (max-width:1280px) {
	html{
		font-size: .9vw;
	}
	header ol a{
		padding: 0 2rem;
		font-size: 1.7rem;
	}
	section>div{
		width: 100rem;
	}
	.product ul,.history > div > div{
		width: 104rem;
		margin: 0 calc(50% - 52rem);
	}
	.product div + img{
		width: 42rem;
	}
}

@media screen and (max-width:768px){
	html{
		font-size: 1.3333vw
	}
	header{
		padding: 2rem;
	}
	header nav{
		display: none;
	}
	.fv{
		align-items: flex-start;
	}
	.fv > img{
		width: 50rem;
		margin: 20rem auto 0;
	}
	.fv h2{
		width: 25.6rem;
		right: 16rem;
		bottom: 11rem;
	}
	.fv h3{
		width: 16.3rem;
		left: 16rem;
		bottom: 18rem;
	}
	section>div{
		width: 92%;
	}
	h4{
		font-size: 2.6rem;
	}
	.product ul, .history > div > div{
		width: calc(100% + 4rem);
		margin: 0 0 0 -2rem;
	}
	.product ul .slick-slide{
		align-items: flex-start;
	}
	.product ul div h5{
		line-height: 1.4em;
	}
	.product ul div p{
		font-size: 2.6rem;
		margin: 0 0 8rem;
	}
	.product div + img{
		width: 40rem;
		margin: 0 0 0 2rem;
	}
	.history .slick-slide li{
		width: 49%;
	}
	.history ul small{
		font-size: 2.2rem;
	}
	.history ul p{
		font-size: 2.6rem;
	}
	.suppliers ul{
		padding: 2rem;
	}
	.suppliers li{
		width: 49%;
		font-size: 2rem;
		height: 6rem;
		letter-spacing: 0;
	}
	.company div{
		padding-right: 0;
	}
	.company div > img{
		width: 40rem;
		right: 4rem;
	}
	.company table{
		padding: 12rem 2rem 2rem;
		font-size: 2.4rem;
	}
	.company th{
		width: 20%;
		line-height: 1.4em;
	}
	.company td{
		width: 80%;
		line-height: 1.4em;
	}
	.company ul li{
		flex-direction: column;
	}
	.company ul strong{
		width: 100%;
		padding: 2rem 0 0;
		line-height: 1.75em;
	}
	.company ul span{
		width: 100%;
		padding: 0 0 2rem;
	}
	.online li{
		width: 49%;
		height: 10rem;
	}
	.online ul{
		flex-wrap: wrap;
		gap: 2rem 0;
	}
	.online a::after{
		width: 2.8rem;
	}
	.online .rakuten{
		width: 14.2rem;
	}
	.online .qoo10{
		width: 14.2rem;
	}
	.online .yahoo{
		width: 15.2rem;
	}
	.online .amazon{
		width: 15.2rem;
	}
	footer{
		font-size: 2rem;
	}
}