//@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: "游ゴシック体", 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:#eeeeee;
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;
}

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


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


// h1を消すやつ
h1{display: none;}









// KANBAN
// KANBAN
// KANBAN
.KANBAN-CONTAINER{
width:100%;
display: flex;
flex-wrap: wrap;
overflow: hidden;
.PHOTO{width:100%;
margin:0 auto;
overflow: hidden;
position: relative;
img{width:100%;
}
}
.PC{display: block;}
.SP{display: none;}
.KANBAN{width:33.333%;
overflow: hidden;
position: absolute;
top:0;
padding:20% 33.333% 0;
z-index: 999999;
.logo{width:100%;
font-size:4rem;
color: $white;
line-height: 5rem;
margin:0 auto 3%;
img{width:100%;}}
.title{
color: $white;
@include DM;}
.subtitle{
color: $white;
@include DM;}
}
}
@media screen and (max-width:30rem) {
.KANBAN-CONTAINER{
width: 100%;
display: block;
.PHOTO{width:100%;
overflow: hidden;
position: relative;
img{width:100%;}
}
.PC{display: none;}
.SP{display: block;}
.KANBAN{width:80%;
overflow: hidden;
position: absolute;
top:0;
padding:45% 10% 0;
z-index: 999999;
.logo{width:100%;
font-size:1.6rem;
color: $white;
line-height: 2rem;
margin:0 auto 3%;
img{width:100%;}}
.title{
font-size:0.9rem;
color: $white;
line-height: 1rem;
@include DM;}
.subtitle{
font-size:0.6rem;
line-height: 1rem;
color: $white;
@include DM;}
}
}
}










// ATAMAGAKI
// ATAMAGAKI
// ATAMAGAKI
.ATAMAGAKI{
width:45%;
margin:10% auto 15%;
p{
font-size:0.9rem;
line-height: 2rem;
text-align:left;}
}
@media screen and (max-width:30rem) {
.ATAMAGAKI{
width:80%;
margin:15% auto 10%;
p{
font-size:0.75rem;
line-height: 1.6rem;
text-align:left;}
}
}













// PHOTO
// PHOTO
// PHOTO
.IMG-CONTAINER{
width: 100%;
background-color:$soft-gray;
display: flex;
flex-direction: reverse;
flex-wrap: wrap;
overflow: hidden;
margin:-7px 0 0 0;
.PHOTO{width:50%;
margin:0;
overflow: hidden;
position: relative;
img{width:100%;}
}
.COMMENT-CONTAINER{width:50%;
margin:0;
overflow: hidden;
position: relative;
img{width:100%;}
.COMMENT{
width:60%;
padding:50% 20% 0;
text-align: left;
.copy{font-size:1.6rem;font-weight:600;
line-height: 2.4rem;padding-bottom:5%;}
.text{font-size:0.8rem;}
.text-container{
@include DM;
display: block;
padding:5% 0;
font-size:0.8rem;
line-height: 1.6rem;
}
div.buy{
@include DM;
display: inline;
background-color: $dark-gray;
color:$white;
padding:3px 5px;}
}
}
}
.PHOTO-LEFT{flex-direction: row-reverse;}
@media screen and (max-width:30rem) {
.IMG-CONTAINER{
display: block;
flex-wrap: wrap;
overflow: hidden;
.PHOTO{width:100%;
margin:15% auto 5%;
img{width:100%;}
}
.COMMENT-CONTAINER{width:100%;
margin:0;
overflow: hidden;
position: relative;
img{width:100%;}
.COMMENT{
width: 90%;
padding: 5% 5% 15%;
text-align: left;
.copy{font-size:1rem;font-weight:600;
line-height: 1.8rem;padding-bottom:3%;}
.text{font-size:0.7rem;}
.text-container{
@include DM;
display: block;
padding:5% 0;
font-size:0.8rem;
line-height: 1.6rem;
}
div.buy{
@include DM;
display: inline;
background-color: $dark-gray;
color:$white;
padding:3px 5px;}
}
}
}
}




















//ITEM
//ITEM
//ITEM
.item-title{
@include DM;
font-size:1.4rem;
display: block;
margin:10% auto 0;
padding: 0 0 60px 0;
}
@media screen and (max-width:30rem) {
.item-title{
padding: 100px 0 30px 0;
}
}
.item-link-container{
display: flex;
justify-content:flex-start;
flex-wrap: wrap;
max-width:1260px;
margin:0 auto;
}
.item-link{
max-width: 18%;
margin:0 1% 100px;
position: relative;
text-align: left;
img{width:100%;}
ul.styling_list{
padding:0;
text-align: left;
font-size: 0.7rem;
li{margin:10px 0;
a{@include DM;}
span.brand{
@include DM;
padding:0 6px 0 0;
}
}
}
}
@media screen and (max-width:30rem) {
.item-link-container{
flex-wrap: wrap;
justify-content:flex-start;
max-width:100%;
margin:0 8%;
}
.item-link{
max-width: 42%;
margin:0 4%;
padding:20px 0;
ul.styling_list{
font-size: 0.7rem;
li{margin:0 0 5px 0;
line-height: 0.8rem;
}
}
}
}
//BUY
.btn_04 {
margin:10px 0 10px 15px;
justify-content: center;
align-items: center;
width: 20%;
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.5rem;
letter-spacing: 0.1em;
line-height: 1.3;
text-align: left;
text-decoration: none;
transition-duration: 0.3s;}
.btn_04 span{@include DM;}
.btn_04:before {
content: '';
width: 4px;
height: 4px;
border: 0;
border-top: 1px solid $soft-gray;
border-right: 1px solid $soft-gray;
transform: rotate(45deg);
position: absolute;
top: 4px;
left: 5px;
}
.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: 40px;
font-size: 12px;
}
.btn_04:before {
content: '';
width: 4px;
height: 4px;
top: 4px;
left: 5px;
}
}












//LINK
//LINK
//LINK
.link-container{
margin:10% auto;
position: relative;
}
a.btn-border {
border: 2px solid #000;
border-radius: 0;
background: $soft-gray;;
padding:1% 10%;
position: relative;
}
a.btn-border:before {
content: '';
width: 10px;
height: 10px;
border: 0;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: rotate(45deg);
position: absolute;
top: 35%;
left: 5%;
}
a.btn-border:hover{
color: #fff;
background: #000;}
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 #000;
border-radius: 0;
background: $soft-gray;;
padding:5% 5%;
position: relative;
font-size:0.8rem;
}
a.btn-border:before {
content: '';
width: 10px;
height: 10px;
border: 0;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: rotate(45deg);
position: absolute;
top: 35%;
left: 5%;
}
a.btn-border:hover{
color: #fff;
background: #000;}
a.btn-border:hover:before {
border-top:2px solid #fff;
border-right: 2px solid #fff;
}
}




.animation-top,.animation-bottom,.animation-right,.animation-left{
opacity: 0;
overflow: hidden;
will-change: opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.animation-t,.animation-b,.animation-r,.animation-l{
opacity: 1;
display: block;
overflow: hidden;
position: relative;
will-change: opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
img{perspective: 1000;
}
}

.animation-t:before,.animation-b:before,.animation-r:before,.animation-l:before {
background: $soft-gray;
bottom: 0;
content: '';
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}

.animation-t:before {animation: animation-t 1s cubic-bezier(.4, 0, .2, 1) forwards;}
@keyframes animation-t {100% {transform: translateY(100%);perspective: 1000;}}
.animation-b:before {animation: animation-b 1s cubic-bezier(.4, 0, .2, 1) forwards;}
@keyframes animation-b {100% {transform: translateY(-100%);perspective: 1000;}}

.animation-r:before {animation: animation-r 1s cubic-bezier(.4, 0, .2, 1) forwards;}
@keyframes animation-r {100% {transform: translateX(100%);perspective: 1000;}}
.animation-l:before {animation: animation-l 1s cubic-bezier(.4, 0, .2, 1) forwards;}
@keyframes animation-l {100% {transform: translateX(-100%);perspective: 1000;}}












// FOOTER
// FOOTER
// FOOTER
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:$red;}
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;}}