//@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500&display=swap');
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP");
@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap');
@import url("https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css");

* {
padding:0;
margin:0;
outline:none;
font-family: 'Noto Sans JP', sans-serif;
-webkit-appearance:none;
border-radius:0;
}

html,body {
width:100%;
height:100%;
color:#303030;
font-family: 'Noto Sans JP', sans-serif;
font-size:16px;
letter-spacing:1px;
line-height:1.5em;
padding:0;
margin:0;
background:#FFFFFF;
text-align: center;
}


// 全体の読み込みをふわっと //
body {
-webkit-animation: fadeIn 1.5s ease 0s 1 normal;
animation: fadeIn 1.5s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}

// スマホのスクロールをスムーズに //
html {-webkit-overflow-scrolling:touch;}


body{overflow-x: hidden;
-webkit-overflow-scrolling: touch;}

ul {
list-style:none;
padding:0;
}

// Font Awesome 
@mixin ICON {
//font-family:"Font Awesome 5 Free","Font Awesome 5 Brands";
font-family:"Line Awesome Free","Line Awesome Brands";
font-weight:900;
}
// DM+Sans
@mixin DM {
font-family: "DM Sans";
font-weight:600;
}
// Noto
@mixin Noto {
font-family: 'Noto Sans JP', sans-serif;
}

// 全体のデザイン //
$white:#ffffff;
$gray:#999999;
$dark-gray:#303030;
$black:#000000;
$light-gray:#cccccc;
$soft-gray:#eeeeee;
$orange:#fa8231;
a {
color:#303030;
text-decoration:none;
transition:all 0.1s linear;
&:hover {
animation-name:delay;
animation-duration:0.2s;
transition:all 0.2s linear;
}
}
@keyframes delay {
0% {
opacity:0.5;
}
100% {
opacity:1;
}
}


h1{display: none;}



// HEADER //
// HEADER //
// HEADER //
#fixed_position_content {
position: fixed;
background: #FFFFFF;
overflow: hidden;
width: 96%;
padding: 10px 2% 0 2%;
z-index: 9999;
top: 0;
box-shadow: rgba(113, 135, 164, 0.129412) 0px 10px 4px -7px;
-webkit-box-shadow: rgba(113, 135, 164, 0.129412) 0px 10px 4px -7px;
-moz-box-shadow: rgba(113, 135, 164, 0.129412) 0px 10px 4px -7px;
filter: alpha(opacity=80);
-moz-opacity: 0.5;
opacity: 0.8; }
#fixed_position_content #header {
text-align: center; }
#fixed_position_content #header img {
max-width: 207px; }


#header-logo {
width:220px;
fill:$black;
padding: 10px 0;
}
@media screen and (max-width:70rem) {
#header-logo {
width:160px;
fill:$black;
margin:0 auto 12px auto;
display:block;
}
}


@keyframes logo-animation {
0% {
fill: transparent;
filter: blur(5px); }
100% {
fill: #303030; } }
@media screen and (max-width:70rem) {
#logo {
width: 120px; } }


@media screen and (max-width: 70rem) {
	h2 {
	  margin: 10px 0 0;
	  font-size: 1rem;
	  line-height: 1.6rem; } }

// KANBAN //
// KANBAN //
// KANBAN //
.KANBAN{
	width: 100%;
	margin-top:63px;
	position: relative;
	display: inline-block;
	height: 810px;
	overflow: hidden;
	}
	@media screen and (max-width:70rem) {
	.KANBAN{
	margin-top:55px;
	height: auto;
	}
	}
	.KANBAN img{
	position: relative;
	margin: 0 auto;
	display: block;
	width: 100%;
	z-index: 999;
	max-width: 1080px;
	}
	.KANBAN img:nth-of-type(2){
	position: absolute;
	bottom: -25%;
	object-fit: cover;
	max-width: 150%;
	-ms-filter: blur(10px);
	filter: blur(10px);
	z-index: 1;
	}


// CONTAINER //
// CONTAINER //
// CONTAINER //
.CONTAINER{
width: 80%;
max-width:1080px;
margin:5% auto;
}
@media screen and (max-width:70rem) {
.CONTAINER{
width: 90%;
margin:12% auto;
}
}

// h3 //
h3{
margin-top: 60px;
margin-bottom: 20px;
text-align: left;
line-height: 1.7rem;
font-size: 1.2rem;
}
@media screen and (max-width:70rem) {
h3{
margin-top: 40px;
font-size: 1.1rem;
line-height: 1.6rem;
}
}
.TEXT{
margin-top:30px;
text-align: left;
line-height: 1.6rem;
font-size: 0.9rem;
h3{font-size: 1rem;margin-top:0;margin-bottom: 10px;}
}
@media screen and (max-width:70rem) {
.TEXT{
margin-top: 40px;
padding:0 1%;
line-height: 1.8rem;
font-size: 0.8rem;

}
}

.takasa{
	h2{
		margin-top: 50px;		
	}

}

// LINE //
.LINE{
height: 1px;
border-bottom: 1px solid $black;
margin:6% auto 0;
}
@media screen and (max-width:70rem) {
.LINE{
margin:10% auto 0;
}
}

// STYLING-1 //
.STYLING-1{
	display: flex;
	margin:80px auto 0;
	.LEFT{width:60%;
	padding-right:2%;}
	.RIGHT{width:38%;}
	.single-item {
	margin:0 auto 0;
	}
	img{width:100%;}
	.slick-prev:before {display: none;}
	.slick-next:before {display: none;}
	}
	@media screen and (max-width:70rem) {
	.STYLING-1{
	display: block;
	margin:60px auto 0;
	.LEFT{width:100%;
	padding-right:0;}
	.RIGHT{width:100%;}
	}
	}

// IMG 1枚 //
.IMG{
margin-top:60px;
img{width:100%;}
}
@media screen and (max-width:50rem) {
.IMG{
margin-top:40px;
}
}



// IMG 複数くるくる //
// IMG 複数くるくる //
// IMG 複数くるくる //
.single-item {
max-width: 1080px;
height:auto;
margin: 60px auto 0;
}
.single-item img {
width: 100%;
height: auto;
}
.slick-prev:before,
.slick-next:before {
color: #999;
font-size: 2rem;
font-weight: 600;
font-family: "Font Awesome 5 Free";
}
.slick-prev,
.slick-next {
display: inline-block;
width: 50px!important;
height: 50px!important;
}
.slick-prev{left: -60px!important;}
.slick-next{right: -40px!important;}
.slick-prev:before {
font-size: 0.7rem!important;
content: 'PREV'!important;
color:$black!important;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
text-orientation: sideways;
transform: rotate(-180deg);
@media screen and (max-width: 50rem)
{  color: white !important;}

}
.slick-next:before {
font-size: 0.7rem!important;
content: 'NEXT'!important;
color:$black!important;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: sideways;

@media screen and (max-width: 50rem)
{  color: white !important;}
}
.slick-dots li button:before {
font-size: 28px;
}

@media screen and (max-width:50rem) {
.single-item {
max-width: 100%;
height:50%;
margin:40px auto 0;
}
.slick-prev{left: -18px !important;z-index: 999;}
.slick-next {right:0px!important;z-index: 999;}
.slick-dots li {margin:0;}
}



// STYLING-1 //
.STYLING-1{
display: flex;
margin:80px auto 0;
.LEFT{width:60%;
padding-right:2%;}
.RIGHT{width:38%;}
.single-item {
margin:0 auto 0;
}
img{width:100%;}
.slick-prev:before {display: none;}
.slick-next:before {display: none;}
}
@media screen and (max-width:70rem) {
.STYLING-1{
display: block;
margin:60px auto 0;
.LEFT{width:100%;
padding-right:0;}
.RIGHT{width:100%;}
}
}


// アイテムリスト //
.ITEM-LIST{
padding:1rem 0 0 0;
text-align: left;
font-size: 0.8rem;
li{margin: 1rem 0;
line-height: 1.4rem;
span.brand{font-weight: 500;
display: block;}
span.japan{font-size: 0.7rem;}
span.buy{
background-color: $black;
color:$white;
padding:2px 5px 3px;
margin:3px;
}
color: #fff;
}
}
@media screen and (max-width:70rem) {
.ITEM-LIST{
font-size: 0.6rem;
li{margin: 0.6rem 0;
line-height: 1.2rem;
span.japan{font-size: 0.5rem;}
span.buy{
font-size:0.6rem;
}
}
}
}

// BUY
a.buy {
display: block;
width:100%;
max-width:1000px;
@include DM;
justify-content: space-evenly;
align-items: center;
text-align: center;
text-decoration: none;
margin:6% auto 10%;
padding: 3% 0;
size:2rem;
font-weight: bold;
background: $dark-gray;
color: $white;
border-radius: 100vh;
position: relative;
transition: 0.5s;
i{padding-right:5%;}
}
@media screen and (max-width:30rem) {
a.buy {
size:1.4rem;
max-width: 90%;
padding: 5% 0;
margin: 8% auto 0;
}
}


// CULMNx2 //
.CULMNx2{
display: flex;
flex-wrap: wrap;
.BOX{
width: 49%;
margin:60px 0.5% 0 0.5%;
img{width:100%;}
}
}
@media screen and (max-width:50rem) {
.CULMNx2{
.BOX{
margin:40px 0.5% 0 0.5%;
}
}
}


// CULMNx2 //
.CULMNx1{
justify-content: center;
display: flex;
flex-wrap: wrap;

.BOX{
width: 49%;
margin:60px 0.5% 0 0.5%;
img{width:100%;}
}
}
@media screen and (max-width:50rem) {
.CULMNx1{
.BOX{
margin:40px 0.5% 0 0.5%;
}
}
}


/* FOOTER */
/* FOOTER */
/* FOOTER */
footer {
	background: #303030;
	padding: 40px;
	margin: 10% 0 0 0; }
	
	footer ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; }
	
	footer li {
	margin: 0 10px 0 0; }
	footer li a {
	font-size: 0.8rem;
	fill:#999999;
	}
	footer li:first-child {
	margin: 0 auto 0 0; }
	
	@media screen and (max-width: 70rem) {
	footer {
	margin: 20% 0 0 0; }
	
	footer li {
	margin: 5px 10px; }
	
	footer li:first-child {
	margin: auto;
	width: 100%; } }
	footer a {
	font-family: "DM Sans";
	color: #999999; }
	
	footer a:hover {
	color: #D64D31; }
	
	footer a i {
	margin: 0 0.25rem 0 0; }
	
	#footer-logo{
	width: 160px;
	}
	#footer-logo .st0{fill: #999999 !important;}
	
	@media screen and (max-width: 70rem) {
	#footer-logo {
	width: 160px;
	fill: #999999;
	margin: 0 auto 24px auto;
	display: block; } }


.special-item .slick-prev:before {
  color: black !important; /* 特定のアイテムに対する色 */
}

/* メディアクエリ */
@media screen and (max-width: 50rem) {
  .slick-prev:before {
    color: white !important; /* メディアクエリ内での基本的な色 */
  }
}

.special-item .slick-next:before {
  color: black !important; /* 特定のアイテムに対する色 */
}

/* メディアクエリ */
@media screen and (max-width: 50rem) {
  .slick-next:before {
    color: white !important; /* メディアクエリ内での基本的な色 */
  }
}