//@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP");
@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";
-webkit-appearance:none;
border-radius:0;
}

html,body {
width:100%;
height:100%;
color:#303030;
font-family:"Noto Sans JP";
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;
}


// 全体のデザイン //
$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;
}
}




#wrapper{}


// LOADING //
// LOADING //
// LOADING //
.start {
background:$white;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: 999999999999;
}
.start div {
width:360px;
margin:40vh auto 0 auto;
display: none;
z-index: 9999;
text-align: center;
img{width:100%;}
}
@media screen and (max-width:70rem) {
.start div {
width:50%;
top:40vh;
left: 25%;
img{width:100%;}
}
}




// WRAPPER //
// WRAPPER //
// WRAPPER //
.wrapper {
padding: 100px 0;
position: relative;
background: $white;
}


.pc{display: block;}
.sp{display: none;}
@media screen and (max-width:70rem) {
.pc{display: none;}
.sp{display: block;}
}



// KANBAN //
// KANBAN //
// KANBAN //
.mv-ttl {
position: absolute;
z-index: 2;
width:360px;
top:40vh;
left:calc(50% - 180px);
margin:0 auto;
}
.mv-area {
height: 100vh;
width: 100vw;
position: relative;
}
.mv-area .kanban {
width: 100vw;
height: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
position: absolute;
margin: auto;
}
.mv-area::before,
.mv-area::after {
content: "";
position: absolute;
width: 100%;
background: #fff;
left: 0;
z-index: 2;
}
.mv-area::before {
top: 0;
}
.mv-area::after {
bottom: 0;
}
.mv-area{
a {
z-index: 9999999;
position: absolute;
bottom: 38vh;
cursor:auto;
span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 2px solid $black;
border-bottom: 2px solid $black;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb 2s infinite;
animation: sdb 2s infinite;
opacity: 0;
box-sizing: border-box;
&:nth-of-type(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
&:nth-of-type(2) {
top: 16px;
-webkit-animation-delay: .15s;
animation-delay: .15s;
}
&:nth-of-type(3) {
top: 32px;
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
}
}
@-webkit-keyframes sdb {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes sdb {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
}

@media screen and (max-width:70rem) {
.mv-ttl{
width:50%;
top:40vh;
left: 25%;
img{
width:100%;
}
}
.mv-area{
a {
bottom: 42vh;
left: 50vw;
}
}
.mv-area img.cover{
object-fit: cover;
width: 100%;
height: 100vh;
}
}

// CONT-WRAP //
// CONT-WRAP //
// CONT-WRAP //
.cont-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 5% 0 0 0;
position: relative;
}
.flex-reverse{flex-flow: row-reverse!important;}
.img-area{
width: 50%;
img{width:100%;}}
.item-area{
width: 100%;
img{width:100%;
padding:20% 0;}
}
.txt-area {
width: 40%;
padding:5%;
text-align: left;
}
.txt-area-right{
width: 40%;
padding:5%;
text-align: left;
}
.ttl {
font-size: 5rem;
font-weight: bold;
margin-bottom: 4rem;
position: absolute;
top:-150px;
left:5%;
}
.ttl-right {
font-size: 5rem;
font-weight: bold;
margin-bottom: 4rem;
position: absolute;
top:-200px;
right:5%;
}
.txt {
font-size: 0.8rem;
line-height: 1.8rem;
}
.img-area .item-area{
position: relative;
}

@media screen and (max-width:70rem) {
.cont-wrap {
display: block;
.img-area{
width:100%;
img{width:100%;
object-fit: cover;
height: 400px;}}
.txt-area {
width: 90%;
margin-top: 5%;
padding-bottom: 25%;
}
.txt-area-right{
width: 90%;
margin-top: 5%;
padding-bottom: 25%;
}
}
.ttl {
z-index: 9999999;
font-size: 2rem;
top: -26%;
left: 30%;
}
.ttl-right{
z-index: 9999999;
font-size: 1.8rem;
top: -20%;
left:10%;
}
}


a.btn--circle {
display: block;
width: 60px;
height: 60px;
margin: 2rem 0;
background: #000;
border-radius: 50%;
}
a.btn--circle i {
font-size: 150%;
color:#FFF;
padding: 30% 0 0 30%;
-webkit-transition: all .3s;
transition: all .3s;
letter-spacing: 0;
}
a.btn--circle:hover{
background: #FFF;
}
a.btn--circle:hover i {
padding: 30% 0 0 50% ;
color: #000;
}




// ITEM //
// ITEM //
// ITEM //

// SWIPER //
.swiper-slide {text-align: center;}
.swiper-pagination-bullet {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: $black;
opacity: 1;
background: rgba(0, 0, 0, 0.2);
}
.swiper-pagination-bullet-active {
color: $white;
}
.swiper-scrollbar-drag {
background: $black !important;
width:200px !important;
}
.swiper-scrollbar{
height: 2px !important;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
color:$dark-gray;
}

@media screen and (max-width:70rem) {
.swiper-scrollbar-drag {
width: 10% !important;
}
}

// POPUP //
.popup {
width: 50%;
margin: auto;
position: relative;
background: #eee;
padding: 20px;
}
.popup-wrapper{
display: flex;
position: relative;
img{
width:56%;
max-width:100%;
}
.right_container{
position: absolute;
bottom:0;
right:2%;
padding-left:2%;
width:40%;
.name{
@include DM;
font-size:1.8rem;
padding:0 0 4px 0;
}
.number{
@include DM;
font-size:1.2rem;
padding:0 0 4px 0;}
}
.price{
@include DM;
font-size:0.6rem;
padding:0 0 20px 0;}
p{
font-size:0.8rem;
line-height: 1.1rem;
padding:0 0 30px 0;}
}
.mfp-close-btn-in .mfp-close {
right: 2.5%;
top: 1%;
font-style: normal;
font-size: 4rem;
font-family: unset;
}
@media screen and (max-width:70rem) {
.popup {
width: 80%;
padding: 5%;
}
.popup-wrapper{
display: block;
img{
width:100%;
object-fit: cover;
height: 50vh;
}
.right_container{
position: inherit;
text-align: left;
padding:2%;
width:96%;
max-width:100%;
.name{
@include DM;
font-size:1.2rem;
padding:0;
}
.number{
@include DM;
font-size:1rem;
padding:0;}
}
.price{
@include DM;
font-size:0.6rem;
padding:0 0 3px 0;}
p{
font-size:0.7rem;
line-height: 1rem;
padding:0 0 15px 0;}
}
.mfp-close-btn-in .mfp-close {
right: 0;
top: 0;
font-size: 2rem;
font-family: unset;
}
}
// ポップアップのフェード //
.mfp-bg {
opacity: 0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.mfp-bg.mfp-ready {opacity: 0.8;}
.mfp-bg.mfp-removing {opacity: 0;}
.mfp-wrap .mfp-content {opacity: 0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;}
.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;}
.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}




// BRAND CONCEPT //
// BRAND CONCEPT //
// BRAND CONCEPT //
.brand-comment{
background-color:$soft-gray;
padding:10% 0;
margin:10% auto 20%;
width:100%;
letter-spacing:3px;
h2{max-width:320px;
margin: 0 auto 40px auto;
img{width:100%;}}
.img-box{
text-align:center;
max-width:900px;
margin:0 auto 40px auto;
img{width:100%;}
}
p{max-width:900px;
margin: 0 auto 40px auto;
font-size: 0.9rem;
text-align: left;
line-height: 1.6rem;
letter-spacing:1px;}
}
@media screen and (max-width:70rem) {
.brand-comment{
letter-spacing:3px;
padding-bottom:20%;
h2{
margin:40px auto;
img{max-width:200px;}}
.img-box{
max-width:80%;
img{
width:100%;
margin:10% auto 0 auto;
}
}
p{
width:80%;
margin:10px auto;
font-size: 0.6rem;
text-align: left;
letter-spacing:1px;
}
.btn-animation {
font-size: 12px;
width: 60%;
}
}
}






// BTN //
// BTN //
// BTN //
.btn-animation {
display: inline-block;
width: 200px;
text-align: center;
background-color: $dark-gray;
border: 2px solid $dark-gray;
font-size: 16px;
color: $dark-gray;
text-decoration: none;
font-weight: bold;
padding: 10px 24px;
border-radius: 4px;
position: relative;
margin:20px auto 0;
}
.btn-animation span {
position: relative;
z-index: 1;
}
.btn-animation::before,
.btn-animation::after {
content: "";
display: block;
background-color: $soft-gray;
width: 51%;
height: 100%;
position: absolute;
top: 0;
}
.btn-animation::before {left: 0;}
.btn-animation::after {right: 0;}
.btn-animation:hover:before,
.btn-animation:hover:after {
width: 0;
background-color: $white;
}
.btn-animation:hover {color: $white;}
@media screen and (max-width:70rem) {
.btn-animation {
font-size: 12px;
width: 86%;
}
}





// FOOTER //
// FOOTER //
// FOOTER //
footer {
z-index: 9999999;
font-size:0.6rem;
margin: -60vh 2% 0 2%;
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:$gray;
&:hover {
color:$orange;
}
i {
margin:0 0.25rem 0 0;
}
}
}
@media screen and (max-width:70rem) {
footer {
margin: -30vh 2% -10% 2%;

li {
margin:5px 10px;
&:first-child {
margin:auto;
width:100%;
}
}
}
}

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