//@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://fonts.googleapis.com/css2?family=Bebas+Neue&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: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-weight:600;
-webkit-appearance:none;
border-radius:0;
}

html,body {
width:100%;
height:100%;
color:#111111;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-size:16px;
letter-spacing:1px;
line-height:1.5em;
padding:0;
margin:0;
background:#FFFFFF;
text-align: center;
}

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

a {
color:#111111;
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;
}
}

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;
}

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

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

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

// DM+Sans
@mixin DM {
font-family: "DM Sans";
font-weight:600;
}

// Bebas
@mixin Bebas {
font-family: 'Bebas Neue', cursive;
}

// 全体のデザイン
$white:#ffffff;
$gray:#999999;
$dark-gray:#303030;
$light-gray:#cccccc;
$soft-gray:#eeeeee;
$orange:#ff6633;
$blue:#2d98da;
$green:#0fb9b1;


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;
}
}

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

/* じわっと画像が表示される */
@keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
0% {opacity: 0} /* 始め */
100% {opacity: 1} /* 終わり */
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

// マウスホバーでちょっと大きくなるやつ
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%;}
}


h1{display: none;}




















// KANBAN //
// KANBAN //
// KANBAN //

.kanban-container{
width:100%;
margin:0 auto 10%;
}
@media screen and (max-width:30rem) {
.kanban-container{}
}
.kanban-pc{
width:100%;
margin:0 auto;
display:block;
text-align: center;
img{width:100%;}
p.title{
position: relative;
width:100%;
margin:-30% auto 25%;
@include DM;
font-size:5rem;
letter-spacing: 0.3rem;
color:$white;
img{width:60%;
margin: 0 20%;}
span.sub-title{
@include DM;
font-size:1rem;
padding-top:30px;
display: block;
}
}
}
.kanban-sp{display: none;}
@media screen and (max-width:30rem) {
.kanban-sp{
display:block;
text-align: left;
img{max-width:100%;}
p.title{
position: relative;
width:80%;
margin:-80% auto 70%;
@include DM;
font-size:2rem;
letter-spacing: 0.3rem;
line-height: 2.4rem;
color:$white;
span.sub-title{
@include DM;
font-size:0.7rem;
display: block;
}
}
}
.kanban-pc{display: none;}
}











.contant-container{
text-align:left;
max-width:1260px;
width:100%;
margin: 0 auto;
p{
margin: 0 auto 10%;
width:800px;
font-size:0.9rem;
line-height: 2rem;
text-align:left;}
}
@media screen and (max-width:30rem) {
.contant-container{
max-width:95%;
p{font-size: 0.8rem;
margin:15% auto;
padding:0;
width:95%;}
}
}



.item-container-container{
display: flex;
flex-wrap:wrap;
justify-content:flex-start; 
}







.item-container{
border-bottom:1px dashed $dark-gray;
text-align: center;
position: relative;
max-width:750px;
width:40%;
padding:5% 4.9%;
img{width:100%;
margin:5% auto 0;}
span{
z-index: 99999;
@include Bebas;
font-size: 1.2rem;
color:$dark-gray;
width: 80px;
height: 80px;
padding: 4.6% 0 0 0;
background-color:#ffff00;
border-radius: 50%;
text-align: center;
box-sizing: border-box;
position: absolute;
top:5%;
left:3%;
}
.catchcopy{
font-size:0.9rem;
padding: 5% 0 0 0;
}
.discription{
width:100%;
font-size: 0.8rem;
font-weight: 500;
line-height: 1.3rem;
padding:5% 0;
}
.color{
	font-size:0.8rem;
	border: 1px solid #333;
	padding: 2% 0;
	margin: 2% auto;
}
.name{
@include DM;
font-size: 0.8rem;
font-weight: 500;
line-height: 1.3rem;
padding:0 0 4% 0;
}
.item-link{
text-align: center;
div.buy{
font-size: 0.9rem;
display: inline;
background-color: $dark-gray;
color:$white;
@include DM;
padding:10px 12px;}
}
}

.item-container:nth-child(2n+1) {
border-right:1px dashed $dark-gray;
}

@media screen and (max-width:30rem) {
.item-container{
max-width:100%;
width:90%;
padding:20% 4.9%;
span{
font-size: 1.5rem;
width: 80px;
height: 80px;
padding: 7.5% 0 0 0;
}
.discription{
font-size: 0.7rem;
text-align: left;
padding:5% 0 10% 0;
}
.name{
@include DM;
font-size: 0.6rem;
font-weight: 500;
line-height: 1.2rem;
padding:0 0 4% 0;
}
}
.item-container:first-child{
border-top:1px dashed $dark-gray;
}
.item-container:nth-child(2n+1) {
border-right:none;
}
}


.kakukaku{
width:45%;
position: absolute;
background-color: #000000;
color:#FFFFFF;
font-size:0.8rem;
padding:2% 1%;
line-height: 0.9rem;
}
@media screen and (max-width:30rem) {
.kakukaku{
width:32%;
font-size:0.6rem;
}
}

.animation{
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 2s;
}

.keyframe2{
animation-name: anim_s2;
transform: rotate(1deg);
animation-duration: 2s;
}

@keyframes anim_s2 {
0% {
transform: rotate(0deg);
}
80% {
transform: rotate(0deg);
}
90% {
transform: rotate(3deg);
}
100% {
transform: rotate(0deg);
}
}

.keyframe3{
animation-name: anim_s;
transform: rotate(1deg);
animation-duration: 2s;
}

@keyframes anim_s {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(-3deg);
}
15% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}



// IMG 複数くるくる //
// IMG 複数くるくる //
// IMG 複数くるくる //
.single-item {
max-width: 630px;
height:auto;
margin:0 auto;
}
.single-item img {
width: 100%;
height: auto;
}
.slick-prev{display: none !important;}
.slick-next{display: none !important;}
.slick-dots li button:before {
font-size: 0.6rem;
}

@media screen and (max-width:50rem) {
.single-item {
max-width: 100%;
margin:0 auto;
}
.slick-dots li {margin:0;}
}






//LINK
//LINK
//LINK
.link-container{
margin:10% auto;
position: relative;
}
a.btn-border {
border: 2px solid $dark-gray;
border-radius: 0;
padding:1% 10%;
position: relative;
}
a.btn-border:before {
content: '';
width: 10px;
height: 10px;
border: 0;
border-top: 2px solid $dark-gray;
border-right: 2px solid $dark-gray;
transform: rotate(45deg);
position: absolute;
top: 35%;
left: 5%;
}
a.btn-border:hover{
color: #fff;
background:  $dark-gray;}
a.btn-border:hover:before {
border-top:2px solid #fff;
border-right: 2px solid #fff;
}
@media screen and (max-width:30rem) {
.link-container{
width:95%;
margin: 100px 2.5% 30px;
}
a.btn-border {
display: block;
border: 2px solid $dark-gray;
border-radius: 0;
background: $white;
padding:5% 5%;
position: relative;
font-size:0.8rem;
}
a.btn-border:before {
content: '';
width: 10px;
height: 10px;
border: 0;
border-top: 2px solid $dark-gray;
border-right: 2px solid $dark-gray;
transform: rotate(45deg);
position: absolute;
top: 35%;
left: 5%;
}
a.btn-border:hover{
color: #fff;
background:  $dark-gray;}
a.btn-border:hover:before {
border-top:2px solid #fff;
border-right: 2px solid #fff;
}
}





ul.item_list{
width:78%;
margin: 4% auto;
display:flex;
flex-wrap:wrap;
list-style-type: none;
li{
width:23%;
margin:5% 1% 0;
background-color: #FFF;
span{
display: block;
line-height: 1rem;
font-size:0.7rem;}
	.color{
	font-size:0.6rem;
	border: 1px solid #333;
	padding: 3% 0;
	margin: 3% auto;
	}
.name_container{
padding:1% 0 2%;
.point-coupon_container{
width:100%;
margin:0 auto;
display: flex;
.point{
width:48%;
font-size:0.6rem;
display: block;
background-color: #BF0000;
color: #FFFFFF;
padding: 2px 0;
margin: 0 auto;}
.coupon{
width:50%;
font-size:0.6rem;
display: block;
background-color: #6447b6;
color: #FFFFFF;
padding: 2px 0;
margin: 0 auto;}
}}
a .item-link{
text-align: center;
div.buy{
font-size: 0.8rem;
display: inline;
background-color: $dark-gray;
color:$white;
@include DM;
padding:5px 6px;}
}
img{width:100%;}
}
}
@media screen and (max-width: 30rem) {
ul.item_list{
width:94%;
margin:4% 3% 26%;
display:flex;
flex-wrap:wrap;
list-style-type: none;
li{
width:30%;
margin:1.5%;
background-color: #FFF;
span{
display: block;
font-size:0.6rem;
line-height: 1rem;}
.name_container{
padding:6% 0% 10% 0%;
.point-coupon_container{
width:100%;
margin:0 auto;
display: block;
.point{
width:70%;
font-size:0.5rem;
display: block;
background-color: #BF0000;
color: #FFFFFF;
letter-spacing: 0px;
padding: 2px 0;
margin: 2px auto;}
.coupon{
width:70%;
font-size:0.5rem;
display: block;
letter-spacing: 0px;
background-color: #6447b6;
color: #FFFFFF;
padding: 2px 0;
margin: 2px auto;}
}
}
img{width:100%;}
}
}
}
//BUY
a.btn_04 {
max-width:400px;
margin:10px 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
position: relative;
background: $dark-gray;
border: 2px solid $dark-gray;
box-sizing: border-box;
padding: 0 25px 0 40px;
color: $white;
@include DM;
font-size: 16px;
letter-spacing: 0.1em;
line-height: 1.3;
text-align: left;
text-decoration: none;
transition-duration: 0.3s;
}
a.btn_04:before {
content: '';
width: 8px;
height: 8px;
border: 0;
border-top: 2px solid $white;
border-right: 2px solid $white;
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 25px;
margin-top: -6px;
}
a.btn_04:hover {
background: $white;
color: $dark-gray;
}
a.btn_04:hover:before {
border-top: 2px solid $dark-gray;
border-right: 2px solid $dark-gray;
}
@media screen and (max-width:30rem) {
a.btn_04 {
max-width:100%;
margin:5px 0;
height: 40px;
font-size: 12px;
}
a.btn_04:before {
content: '';
width: 6px;
height: 6px;
top: 50%;
left: 50px;
margin-top: -4px;
}
}






// フッター
footer {
clear: both;
background:$dark-gray;
padding:40px;
font-size:0.6rem;
margin:100px 0 0 0;
ul {
display:flex;
flex-wrap:wrap;
justify-content:center;
}
li {
margin:0 10px 0 0;
&:first-child {
margin:0 auto 0 0;
}
}
@media screen and (max-width:30rem) {
footer {
margin:100px 0 0 0;
}
li {
margin:5px 10px;
&:first-child {
margin:auto;
width:100%;
}
}
}
a {
@include DM;
color:$soft-gray;
&:hover {
color:$orange;
}
i {
margin:0 0.25rem 0 0;
}
}
}
#footer-logo {
width:160px;
fill:$soft-gray;
}
@media screen and (max-width:30rem) {
#footer-logo {
width:160px;
fill:$soft-gray;
margin:0 auto 24px auto;
display:block;
}
}