//@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=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@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;
}

// Noto
@mixin Barlow {
font-family: "Barlow Semi Condensed", sans-serif;
font-style: normal;
font-weight: 500;
}

@mixin ZEN {
    font-family: "zen-kaku-gothic-new", sans-serif;
    font-weight: 500;
    font-style: normal;
}
// 全体のデザイン //
$white:#ffffff;
$gray:#999999;
$dark-gray:#303030;
$black:#000000;
$light-gray:#cccccc;
$soft-gray:#eeeeee;
$orange:#cb7e36;
$green:#2f6030;
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;}



#menu {
z-index: 1000000;
width: 100px;
position: fixed;
display: none; /*最初は非表示に設定*/
top: 30%;
left:0;
div{margin: 5%;padding:5%;}
div a{
display: block;
width:80px;
height:80px;
img{width:100%;border-radius: 50%;}
}
div a:hover{
  transform:scale(1.2,1.2);
  transition:0.5s all;
}
}
@media screen and (max-width:30rem) {
#menu {
top: 30%;
width: 40px;
div{padding:5%;}
div a{
display: block;
width:40px;
height:40px;
border-radius: 30px;}
}
}

// CONTAINER //
// CONTAINER //
// CONTAINER //
.CONTAINER-CONTAINER{
width: 100%;
margin:0 auto;
padding: 5% 0 20% 0;
background-color: $orange;
}
@media screen and (max-width:70rem) {
.CONTAINER-CONTAINER{
}
}

#CONTAINER{visibility:hidden;}

// KANBAN //
// KANBAN //
// KANBAN //
.kanban-container{
width:60%;
    margin: 0 auto -5%;
}
@media screen and (max-width:30rem) {
.kanban-container{
width:95%;
margin:8% auto 0;
}}
.kanban{
width:100%;
margin:0 auto;
display:block;
text-align: center;
line-height: 6rem;
img{width:100%;
max-width:1080px;
}
}
@media screen and (max-width:30rem) {
.kanban{
display:block;
text-align: center;
line-height: 3rem;
img{max-width:100%;}
}
}




.OPENING{
	width:100%;
	max-width:1080px;
	height:700px;
	margin: 0 auto 8%;
	position: relative;
	overflow: hidden;
	.OPENING-kanban{position: absolute;bottom:59%;left:60%;width:158px;}
	.OPENING-car{position: absolute;bottom:15%;left:27%;width:474px;}
	.OPENING-denim{position: absolute;bottom:0%;left:50%;width:128px;}
	.OPENING-takibi{position: absolute;bottom:10%;left:62%;width:275px;}
	.OPENING-hi{position: absolute;bottom:22%;left:65%;width:70px;}
	.OPENING-meta{position: absolute;bottom:0%;left:86%;width:152px;}
	.OPENING-hana{position: absolute;bottom:-4%;left:0;width:146px;}
	.OPENING-sougankyou{position: absolute;bottom:30%;left:5%;width:182px;}
	.OPENING-flag{position: absolute;bottom:75%;left:90%;width:95px;}
	.OPENING-vintage{position: absolute;bottom:30%;left:72%;width:238px;}
	.OPENING-meta-waw{position: absolute;bottom:8%;left:6%;width:291px;}
	.OPENING-shaka{position: absolute;bottom:1%;left:36%;width:77px;}
	.OPENING-meta-mini{position: absolute;bottom:30%;left:0;width:80px;}
	.OPENING-sharts{position: absolute;bottom:5%;left:40%;width:128px;}
	.OPENING-bird{position: absolute;top:0%;left:0;width:89px;}
	.OPENING-yashi{position: absolute;top:0%;left:26%;width:232px;}
	img{width:100%}
}
@media screen and (max-width:30rem) {
.OPENING{
	width:100%;
	max-width:1080px;
	height:340px;
	margin: 0 auto 5%;
	position: relative;
	overflow: hidden;
	.OPENING-car{position: absolute;bottom:15%;left:23%;width:55%;}
	.OPENING-denim{position: absolute;bottom:0%;left:50%;width:12%;}
	.OPENING-takibi{position: absolute;bottom:10%;left:62%;width:27%;}
	.OPENING-hi{position: absolute;bottom:19%;left:65%;width:7%;}
	.OPENING-meta{position: absolute;bottom:0%;left:86%;width:15%;}
	.OPENING-kanban{position: absolute;bottom:59%;left:60%;width:15%;}
	.OPENING-hana{position: absolute;bottom:-4%;left:0;width:14%;}
	.OPENING-sougankyou{position: absolute;bottom:30%;left:5%;width:18%;}
	.OPENING-flag{position: absolute;bottom:75%;left:90%;width:9%;}
	.OPENING-vintage{position: absolute;bottom:30%;left:72%;width:23%;}
	.OPENING-meta-waw{position: absolute;bottom:8%;left:6%;width:29%;}
	.OPENING-shaka{position: absolute;bottom:1%;left:36%;width:7%;}
	.OPENING-meta-mini{position: absolute;bottom:30%;left:0;width:8%;}
	.OPENING-sharts{position: absolute;bottom:5%;left:40%;width:12%;}
	.OPENING-bird{position: absolute;top:0%;left:0;width:8%;}
	.OPENING-yashi{position: absolute;top:0%;left:24%;width:23%;}
	img{width:100%}
}}
.OPENING-car,.OPENING-01 img{
width:100%;
}

//ATAMAGAKI
.ATAMAGAKI{
font-size:0.95rem;
max-width:1000px;
line-height: 1.9rem;
margin:5% auto;
color:#FFFFFF;
}

@media screen and (max-width:30rem) {
.ATAMAGAKI{
font-size:0.8rem;
max-width:90%;
text-align: left;
line-height: 1.3rem;
margin:20% auto;
color:#FFFFFF;
}
}

//MEMO
.MEMO{
width:100%;
max-width:600px;
padding: 10% 0;
margin:0 auto;
background: url("../img/GW-memo.png") no-repeat center;
background-size:100%;
.title{width:100%;max-width:75%;}
a img{width:100%;
max-width:75%;
padding:0 12.5%;
margin:0 auto;}
a i{width:10%;
display: block;
margin: 0 0 -12% 10%;
	img{width:100%;}}
}

.pc-slider{display: block;}
.sp-slider{display: none;}
@media screen and (max-width:30rem) {
.pc-slider{display: none;}
.sp-slider{display: block;
	img{width:100%;}}
}

//画像が切り替わる
.ANIMATION-IMGKIRIKAE {
  position: relative;
  width:100%;
  max-width:1000px ;
  padding:0;
  margin-bottom: 5%;
}
@media screen and (max-width:30rem) {
.ANIMATION-IMGKIRIKAE {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
}}

//slider
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }
 
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }
 
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }
 
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

.SECTION-CONTAINER{
width:50%;
max-width:1000px;
margin:0 auto;
padding:5% 0;
.BIG-TITLE{
font-size: 0.8rem;
@include DM;
font-weight: 900;
line-height: 1rem;
color:white;
margin:0 auto 20px;}
.TITLE{margin:0 auto 50px;
    font-size: 3rem;
    font-weight: 900;
	color:white;
	line-height: 4rem;
span{@include DM;
font-size:3rem;
letter-spacing: 5px;}}
.IMG{margin:0 auto 20px; img{width:100%;}}}
@media screen and (max-width:30rem) {
.SECTION-CONTAINER{
width:100%;
padding:10% 0;
.TITLE{margin:0 auto 25px;
    font-size: 1.4rem;
    font-weight: 900;
	color:white;
	line-height: 1.8rem;
span{@include DM;
font-size:1.4rem;
letter-spacing: 5px;}
}
}}
.COMMENT{
	margin: 0 auto 20px;
	position: relative;
    padding: 3%;
    border: 2px solid $white;
	color: white;
	border-radius: 15px;
    background-color: $orange;
	line-height: 1.5rem;
    font-size: 0.9rem;
	text-align: left;}

.COMMENT:before {
    position: absolute;
    top: -15px;
    left: 50px;
    transform: skew(-25deg);
    height: 15px;
    width: 15px;
    border-right: 2px solid $white;
    background-color: $orange;
    content: "";
}
@media screen and (max-width:30rem) {
.COMMENT{
	width:90%;
	margin: 0 auto 20px;
	position: relative;
    padding: 3%;
    border: 2px solid $white;
	color: white;
	border-radius: 15px;
    background-color: $orange;
	line-height: 1.5rem;
    font-size: 0.9rem;
	text-align: left;}

.COMMENT:before {
    position: absolute;
    top: -15px;
    left: 50px;
    transform: skew(-25deg);
    height: 15px;
    width: 15px;
    border-right: 2px solid $white;
    background-color: $orange;
    content: "";
}
}


//蛍光ライン
.c-marker {
background: -webkit-linear-gradient(left, rgb(207,253,30) 50%, transparent 50%);
background: -moz-linear-gradient(left, rgb(207,253,30) 50%, transparent 50%);
background: linear-gradient(left, rgb(207,253,30) 50%, transparent 50%);
background-repeat: no-repeat;
background-size: 200% 1rem; 
background-position: 200% 2.8rem;
transition: 2s;}
.c-marker.is-active{background-position: 0% 2.8rem;}
@media screen and (max-width:30rem) {
	.c-marker {background-size: 200% 0.5rem; 
background-position: 200% 1.4rem;}
.c-marker.is-active{background-position: 0% 1.2rem;}
}

//ITEM
//ITEM
//ITEM
.item-title{
@include DM;
font-size:0.8rem;
display: block;
color:white;
margin:0 auto;
padding: 0 0 10px 0;
}
@media screen and (max-width:30rem) {
.item-title{
padding: 10px 0 0 0;
}
}
.item-link-container{
display: flex;
justify-content:flex-start;
flex-wrap: wrap;
margin:0 auto;
}
.item-link{
max-width: 18%;
margin:0 1% 3%;
position: relative;
text-align: left;
img{width:100%;}
ul.styling_list{
padding:0;
text-align: left;
font-size: 0.7rem;
li{margin:10px 0;
line-height: 1.4rem;
span.brand{
color:white;
@include DM;}
}
}
}
@media screen and (max-width:30rem) {
.item-link-container{
flex-wrap: wrap;
justify-content:flex-start;
max-width:90%;
margin:0 auto;
}
.item-link{
max-width: 30%;
margin:0 1.5%;
padding:20px 0;
ul.styling_list{
font-size: 0.7rem;
li{margin:0 0 5px 0;
line-height: 1rem;
}
}
}
}
//BUY
.btn_04 {
margin:10px 0;
justify-content: center;
align-items: center;
display: block;
width: 100%;
height: 30px;
position: relative;
background: $dark-gray;
border: 1px solid $dark-gray;
box-sizing: border-box;
padding: 0 10px 0 20px;
color: $soft-gray;
font-size: 0.7rem;
@include DM;
letter-spacing: 0.1em;
line-height: 1.8rem;
text-align: center;
text-decoration: none;
transition-duration: 0.3s;}
.btn_04 span{@include DM;}
.btn_04:before {
content: '';
width: 6px;
height: 6px;
border: 0;
border-top: 1px solid $soft-gray;
border-right: 1px solid $soft-gray;
transform: rotate(45deg);
position: absolute;
top: 10px;
left: 10px;
}
.btn_04:hover {
background: $soft-gray;
color: $dark-gray;
}
.btn_04:hover:before {
border-top: 1px solid $dark-gray;
border-right: 1px solid $dark-gray;
}
@media screen and (max-width:30rem) {
.btn_04 {
max-width:100%;
margin:5px 0;
height: 30px;
font-size: 12px;
}
.btn_04:before {
content: '';
width: 4px;
height: 4px;
top: 12px;
left: 5px;
}
}

// FOOTER //
// FOOTER //
// FOOTER //
footer {
z-index: 9999999;
font-size:0.6rem;
margin:0;
background-color: $orange;
ul {
display:flex;
flex-wrap:wrap;
justify-content:center;
}
li {
margin:0 10px 0 0;
&:first-child {
margin:0 auto 0 0;
}
}
a {
@include DM;
color:$black;
&:hover {
color:$orange;
}
i {
margin:0 0.25rem 0 0;
}
}
}
@media screen and (max-width:70rem) {
footer {
padding: 0 0 10% 0;
margin:0;
li {
margin:5px 10px;
&:first-child {
margin:auto;
width:100%;
}
}
}
}

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