@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://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css");

@import url("slick-theme.css");
@import url("slick.css");

// https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css
// at https://icons8.com/line-awesome

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

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

html,body {
width:100%;
height:100%;
}

body {
color:#303030;
font-family:"Noto Sans JP";
font-size:16px;
letter-spacing:1px;
line-height:1.5rem;
box-sizing : border-box;
}

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

a {
text-decoration:none;
transition:all 0.1s linear;
color:#303030;
}

@keyframes delay {
0% {
opacity:0.5;
}

100% {
opacity:1;
}
}

// Font Awesome 
@mixin ICON {
font-family:"Font Awesome 5 Pro","Font Awesome 5 Brands";
}

// Line Awesome
@mixin LINE-AWESOME {
font-family:"Line Awesome Free","Line Awesome Brands";
}

// Noto Sans JP
@mixin SANS {
font-family:"Noto Sans JP";
font-weight:400;
}

// Noto Serif JP
@mixin SERIF {
font-family:"Noto Serif JP";
font-weight:400;
}

// Montserrat
@mixin MON {
font-family:"Montserrat";
}

// 全体のデザイン
$white:#ffffff;
$gray:#999999;
$dark-gray:#303030;
$light-gray:#cccccc;
$soft-gray:#eeeeee;
$red:#D64D31;

/* 画面外にいる状態 */
.fadein {
opacity : 0;
transform : translate(0, 20px);
transition: all 0.5s;
}
/* 画面内に入った状態 */
.fadein.scrollin {
opacity : 1;
transform : translate(0, 0);
}


/* 全体の読み込みをふわっと */
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
}
}

/* LOGO */
@keyframes fadein_logo {
0% {
opacity: 0;/* 透明 */
}
100% {
opacity: 1;/* 不透明 */
}
}
.fadein_logo {
opacity: 0;/* ここを追加 */
animation-duration: 1s;/* アニメーション時間 */
animation-delay : 1s;/* 変化開始の時間 */
animation-name: fadein_logo;/* アニメーション名 */
animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
animation-fill-mode: forwards; /*これで値を保持*/
}

// マウスホバーでちょっと大きくなるやつ
a.zoom{display: inline-block;
&:hover {-webkit-animation: zoom .3s;
animation: zoom .3s;}
@-webkit-keyframes zoom {50% {
-webkit-transform: scale(1.05);}}
@keyframes zoom {50% {transform: scale(1.05);}}
.cp_link:hover::after {width: 100%;}
}


// 全体
.container {
width:100%;
}


// KANBAN
.kanban {
width:100%;
height:890px;
margin:0 0 6% 0;
text-align: center;
position: relative;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
div.pc{
display: block;
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
z-index: 0;
img{
top: 0;
left: 0;
position: absolute;
}}
div.sp{display: none;}
}
img.logo{
width:30%;
height: auto;
position:absolute;
top:30%;
left:35%;
z-index: 1;
}

@media screen and (max-width:30rem) {
.kanban {
margin:0 0 4rem 0;
height: auto;
img {
margin:0 auto;
padding:0;
}
img.logo{
width:60%;
top:40%;
left:20%;
z-index: 21;
}
div.pc{
display: none;
}
div.sp{
width: 100%;
height: 460px;
margin: 0 auto;
display: block;
overflow: hidden;
position: relative;
img{
top: 0;
left: 0;
position: absolute;
}
}
}
}




// ATAMAGAKI
.atamagaki {
max-width: 1080px;
margin:6% auto;
p {
@include SERIF;
line-height:2rem;
text-align:center;
margin:0 0 1rem 0;
}
}
@media screen and (max-width:30rem) {
.atamagaki {
max-width:100%;
width:calc(100% - 2rem);
p {
font-size:0.8rem;
letter-spacing: 1px;
line-height: 1.5rem;
text-align:center;
margin:0 0 4rem 0;
}
}
}






// CONTENT
.content {
width:100%;
text-align: center;
padding:6% 0 0 0;
}
@media screen and (max-width:30rem) {
.content {
padding:2rem 0 0 0;
}
}




//カテゴリのタイトル
.category-title{
max-width:1080px;
position: relative;
top: 0;
z-index: 1;
text-align: center;
margin:0 auto;
img{
max-width:400px;
width:100%;
}
}
@media screen and (max-width:30rem) {
.category-title{
width:100%;
top: 0;
img{
width:50%;
}
}
}


//////////600//////////////////
// IMG 600_Right 
div.img_600_Right{
max-width: 600px;
margin:0 10% 10% auto;
position: relative;
img{width:100%;}
.text-tategaki{max-width:200px;
position: absolute;
top:120px;
left:-60%;}
}
@media screen and (max-width:30rem) {
div.img_600_Right{
width:60%;
margin:0 0 6rem 5%;
.text-tategaki{
max-width: none;
width: 30%;
position: absolute;
top: -10px;
left: -40%;}
}
}
// IMG 600_Left
div.img_600_Left{
max-width: 600px;
margin:0 auto 10% 10%;
position: relative;
img{width:100%;}
.text-tategaki{max-width:200px;
position: absolute;
top:120px;
right:-60%;}
}
@media screen and (max-width:30rem) {
div.img_600_Left{
width:60%;
margin:0 5% 2rem 0;
.text-tategaki{
max-width: none;
width: 30%;
position: absolute;
top: -10px;
right: -40%;}}
}



//////////900//////////////////
// IMG 900_Right 
div.img_900_Right{
max-width: 900px;
margin:0 10% 10% auto;
img{width:100%;}
.text-tategaki{max-width:200px;
position: absolute;
top:80px;
left:-30%;}
}
@media screen and (max-width:30rem) {
div.img_900_Right{
width:80%;
margin:0 0 2rem 20%;
.text-tategaki{
max-width: none;
width: 20%;
position: absolute;
top: -10px;
left: -18%;}}
}

// TXT 900_Right
div.text_900_Right{
max-width: 900px;
margin:0 10% 10% auto;
text-align: left;
h2{
font-size:1.2rem;
margin:-9% auto 1rem;
}
p{font-size:0.9rem;}
}
@media screen and (max-width:30rem) {
div.text_900_Right{
margin:0 5% 4rem;
width:90%;
h2{
font-size:0.9rem;
margin: -6% auto 0.2rem;
}
p{font-size:0.7rem;}
}
}
// IMG 900_Left
div.img_900_Left{
max-width: 900px;
margin:0 auto 10% 10%;
img{width:100%;}
.text-tategaki{max-width:200px;
position: absolute;
top:80px;
right:-30%;}
}
@media screen and (max-width:100rem) {
div.img_900_Left{
.text-tategaki{
right:-20%;}
}
}
@media screen and (max-width:80rem) {
div.img_900_Left{
.text-tategaki{
right:-5%;}
}
}
@media screen and (max-width:70rem) {
div.img_900_Left{
.text-tategaki{
right:0%;}
}
}

@media screen and (max-width:30rem) {
div.img_900_Left{
width:95%;
margin:0 5% 2rem 0;
.text-tategaki{
max-width: none;
width: 20%;
position: absolute;
top: -10px;
right: 0;}
}
}
// TXT 900_Left
div.text_900_Left{
max-width: 900px;
margin:0 auto 6% 10%;
text-align: left;
h2{
font-size:1.2rem;
margin:-9% auto 1rem;
}
p{font-size:0.9rem;}
}
@media screen and (max-width:30rem) {
div.text_900_Left{
margin:0 5% 4rem;
width:90%;
h2{
font-size:0.9rem;
margin: -6% auto 0.2rem;
}
p{font-size:0.7rem;}
}
}


//////////1080//////////////////
// IMG 1080 
div.img_1080{
max-width: 1080px;
margin:0 auto 10%;
position: relative;
img{width:100%;}
.text-tategaki{max-width:200px;
position: absolute;
top:-80px;
right:-15%;}
}
@media screen and (max-width:30rem) {
div.img_1080{
margin:0 auto 2rem;
.text-tategaki{
max-width: none;
width: 20%;
position: absolute;
top: -10px;
right: 0%;}
}
}

// TXT 1080
div.text_1080{
max-width: 1080px;
margin:0 auto 8%;
text-align: left;
h2{
font-size:1.2rem;
margin:-9% auto 1rem;
}
p{font-size:0.9rem;}
}
@media screen and (max-width:30rem) {
div.text_1080{
margin:0 auto 4rem;
padding:0 4%;
h2{
font-size:0.9rem;
margin: -6% auto 0.2rem;
}
p{font-size:0.7rem;}
}
}

//////////1500//////////////////
// IMG 1500 
div.img_1500{
max-width: 1500px;
margin:0 auto 10%;
img{width:100%;}
}
@media screen and (max-width:30rem) {
div.img_1500{
width:95%;
margin:0 auto 2rem;}
}

// TXT 1500
div.text_1500{
max-width: 1500px;
margin:0 auto 8%;
text-align: left;
h2{
font-size:1.2rem;
margin:-6% auto 1rem;
}
p{
font-size:0.9rem;
}
}
@media screen and (max-width:30rem) {
div.text_1500{
margin:0 auto 4rem;
padding:0 4%;
h2{
font-size:0.9rem;
margin: -3% auto 0.2rem;
}
p{
font-size:0.7rem;
}
}
}

//////////img_box/////////////////
.img_box_Left{
max-width: 900px;
margin:0 auto 10% 10%;
position: relative;
img{width:100%;}
.img_600_Left{
max-width: 600px;
overflow: hidden;
position: relative;
img{width:100%;}
}
.img_400_Left{
max-width: 400px;
margin: -50% 0 0 50%;
overflow: hidden;
position: relative;
img{width:100%;}
}
.text-tategaki{max-width:200px;
position: absolute;
top:80px;
right:-40%;}
}

@media screen and (max-width:100rem) {
.img_box_Left{
.text-tategaki{
img{width:100%;}
right:-20%;}
}
}
@media screen and (max-width:80rem) {
.img_box_Left{
.text-tategaki{
img{width:100%;}
right:0%;}
}
}

@media screen and (max-width:30rem) {
.img_box_Left{
width: 95%;
margin: 0 5% 4rem 0%;
.img_600_Left{
width:60%;}
.img_400_Left{
width:50%;
}
.text-tategaki{
max-width: none;
width: 20%;
position: absolute;
top: 10px;
right:0;}
}
}



.img_box_Right{
max-width: 900px;
margin:0 10% 15% auto;
text-align: right;
position: relative;
img{width:100%;}
.img_600_Right{
max-width: 600px;
margin: 0% 0 0 34%;
img{width:100%;}
}
.img_400_Right{
max-width: 400px;
margin: -50% 50% 0 0;
img{width:100%;}
}
.text-tategaki{max-width:200px;
position: absolute;
top:80px;
left:-40%;}
}

@media screen and (max-width:30rem) {
.img_box_Right{
width: 80%;
    margin: 4rem -20% 6rem 20%;
max-width: 100%;
.img_600_Right{
max-width: none;
width:60%;
}
.img_400_Right{
width:50%;
}
.text-tategaki{
max-width: none;
width: 20%;
position: absolute;
top: -10px;
left:0%;}
}
}



////////////// スタイリングのところ
.styling{
overflow: hidden;
padding:4rem 0 8rem 0;
max-width:1200px;
width:50%;
margin:0 auto;
img{width:100%;}
.text{width:40%;
float:left;
p{padding:1rem 0 0 0;font-size:0.75rem;font-weight: 600;}}
.title{text-align: center;
font-weight:600;
@include MON;
font-size:1.8rem;
padding-bottom:1rem;
}
.styling-comment{
    font-size: 1.6rem;
    text-align: left;
    padding: 2rem 0;
    line-height: 2.4rem;
letter-spacing: 0.2rem;
@include SERIF;
}
}
@media screen and (max-width:50rem) {
.styling{
width:100%;
margin:-4rem auto 0;
padding:4rem 0;
img{width:100%;}
.text{width:100%;
float:right;
p{padding:1rem 0 0 0;font-size:0.75rem;font-weight: 600;}}
.title{text-align: center;
font-weight:600;
@include MON;
font-size:1.4rem;
}
.styling-comment{
    font-size: 1rem;
    line-height: 1.6rem;
    padding: 2rem 1rem;
@include SERIF;
}
}
}


.item{
padding:1rem 1rem 0 0;
text-align: left;
font-size: 0.6rem;
li{margin: 0.25rem 0;
span.brand{
}
span.buy{
background-color: $dark-gray;
color:$white;
padding:3px 5px;
margin: 0 4px;
}
color: #fff;
}
}
@media screen and (max-width:50rem) {
.item{
padding:1rem 0 0 1rem ;
}
}





////////////// お店情報
.shop_container{
max-width:1080px;
width:100%;
margin:6% auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.shop_container_inner{
width:38%;
padding:3% 5%;
margin:1% 1%;
box-shadow: 0 0 8px rgba(0,0,0,0.05);
div.title{
font-size:1.2rem;
font-weight: 600;
padding: 0 0 1rem 0;
}
}
}

@media screen and (max-width:50rem) {
.shop_container{
padding:10% 5%;
width:90%;
.shop_container_inner{
width: 100%;
padding:10% 10%;
div.title{
font-weight: 600;
padding: 0 0 2rem 0;
}
i{
width:12%;
}
}
}
}

iframe{
margin-top:20px;
width:100%;
border:0;
max-width:600px;
height: 400px;}

@media screen and (max-width:50rem) {
iframe{
margin-top:10px;
width:100%;
max-width:100%;
height: 200px;}
}

.address{
width:100%;
}
.address dt,.address dd {
@include SANS;
margin-left:0;
}
.address dt {
font-size:0.9rem;
font-weight:600;
letter-spacing:2px;
line-height:2em;
}
.address dd {
font-size:0.8rem;
font-weight: normal;
margin-bottom:6px;
padding-left:10px;
border-left:2px solid #cccccc;
-webkit-transition:all 0.1s linear;
-moz-transition:all 0.1s linear;
-ms-transition:all 0.1s linear;
transition:all 0.1s linear;
}
.address dd:hover {
border-left:2px solid #000000;
}

@media screen and (max-width:50rem) {
.address{
width:100%;
padding-left:0;
float:none;
}
.address dt {
font-size:0.75rem;
}
.address dd {
font-size:0.6rem;
line-height:1rem;
margin-bottom:10px;
}
}





// 動画読み込み中のローディング
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

.pace-inactive {
display: none;
}

.pace .pace-progress {
background: #3d3d3e;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}

.pace .pace-progress-inner {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #3d3d3e, 0 0 5px #3d3d3e;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
display: block;
position: fixed;
z-index: 2000;
top: 15px;
right: 15px;
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: #3d3d3e;
border-left-color: #3d3d3e;
border-radius: 10px;
-webkit-animation: pace-spinner 400ms linear infinite;
-moz-animation: pace-spinner 400ms linear infinite;
-ms-animation: pace-spinner 400ms linear infinite;
-o-animation: pace-spinner 400ms linear infinite;
animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}


div.sp_gif{display: none;}
@media screen and (max-width:50rem) {
video{
display:none;
}
div.sp_gif{
display:block;
img{
width:100%;}
}
}
// フッター
footer {
background:$dark-gray;
padding: 40px;
margin:0;}
footer ul {
display: flex;
flex-wrap: wrap;
justify-content: center; }
footer li {
margin: 0 10px 0 0;
a{
font-size: 0.8rem;
}}
footer li:first-child {
margin: 0 auto 0 0; }
@media screen and (max-width: 30rem) {
footer li {
margin: 5px 10px; }
footer li:first-child {
margin: auto;
width: 100%; } }
footer a {
font-family: "Montserrat";
color: $gray; }
footer a:hover {
color: $red; }
footer a i {
margin: 0 0.25rem 0 0; }
#footer-logo {
width: 160px;
fill: $gray; }
@media screen and (max-width: 30rem) {
#footer-logo {
width: 160px;
fill: $gray;
margin: 0 auto 24px auto;
display: block; } }




/*============
nav
=============*/
nav {
display: block;
position: fixed;
top: 0;
left: -300px;
bottom: 0;
width: 260px;
background: $white;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: all .5s;
z-index: 999999999999999999999999;
opacity: 0;
}
.open nav {
left: 0;
opacity: 1;
}
nav .inner {
padding: 25px;
}
nav .inner ul {
list-style: none;
margin: 0;
padding: 0;
}
nav .inner ul li {
position: relative;
margin: 0;
font-weight: 600;
}
nav .inner ul li a svg{
padding:0 6px 0 0;
}
nav .inner ul li a {
display: block;
color: $dark-gray;
font-size: 1.1rem;
padding: 1em;
text-decoration: none;
transition-duration: 0.2s;
i{
img{
width:16%;
margin:0 6px -6px 0;;
}
}
}
nav .inner ul li a:hover {
background: $soft-gray;
}
@media screen and (max-width: 767px) {
nav {
left: -220px;
width: 180px;
}
nav .inner {
padding: 10px;
}
nav .inner ul li a {
font-size: 0.8rem;
}
}
/*============
.toggle_btn
=============*/
.toggle_btn {
display: block;
position: fixed;
top: 30px;
left: 30px;
width: 30px;
height: 30px;
transition: all .5s;
cursor: pointer;
z-index: 9999;

}
.open .toggle_btn {
left: 330px;
}
.toggle_btn span {
display: block;
position: absolute;
left: 0;
width: 30px;
height: 2px;
background-color: $dark-gray;
border-radius: 4px;
transition: all .5s;
}
.toggle_btn span:nth-child(1) {
top: 4px;
}
.toggle_btn span:nth-child(2) {
top: 14px;
}
.toggle_btn span:nth-child(3) {
bottom: 4px;
}
.open .toggle_btn span {
background-color: $white;
}
.open .toggle_btn {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.open .toggle_btn span:nth-child(1), .open .toggle_btn span:nth-child(3) {
width: 16px;
}
.open .toggle_btn span:nth-child(1) {
-webkit-transform: translate(-1px,4px) rotate(-45deg);
transform: translate(-1px,4px) rotate(-45deg);
}
.open .toggle_btn span:nth-child(3) {
-webkit-transform: translate(-1px,-4px) rotate(45deg);
transform: translate(-1px,-4px) rotate(45deg);
}
@media screen and (max-width: 767px) {
.open .toggle_btn {
left: 250px;
}
}
/*============
#mask
=============*/
#mask {
display: none;
transition: all .5s;
}
.open #mask {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .8;
z-index: 2;
cursor: pointer;
}