//@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:#fafafa;
text-align: center;
}

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

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

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


table {
border-collapse:collapse;
}

td,input {
font-family:"Noto Sans JP";
}

button {
background:transparent;
border:0;
}

button:hover {
cursor:pointer;
}

// 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;
$light-gray:#cccccc;
$soft-gray:#eeeeee;
$orange:#ba360a;
$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}
}








article{
//*visibility: hidden;*//
text-align:left;
max-width: calc(1280px - 60px);
margin: 0 auto;
padding: 0 30px;
}
@media screen and (max-width:30rem) {
article{
text-align:center;
max-width:98%;
padding: 0;
margin:0 auto;
}
}









//ヘッダー
h1{
position: fixed;
top:1.2vh;
left: 5%;
z-index: 999999999999;
width:100%;
}
h1.brand-name{
@include DM;
font-size:4rem;
width: 36%;
text-align: center;
img{
max-width:440px;
width:100%;
}
}
@media screen and (max-width:30rem) {
h1{
position: relative;
top:1vh;
left: auto;
margin:0 auto;
padding:0 0 5px 0;
}
h1.brand-name{
width: 100%;
img{
max-width:80%;
width:100%;
}
}
}







//看板
.kanban{
width:36%;
position: fixed;
left:5%;
top:13vh;
max-height:70vh;
img{
max-width: 100%;
object-fit: cover;
object-position: top right;
height: 100%;
}
a{
@include DM;
font-size:0.8rem;
display: block;
}
}
@media screen and (max-width:30rem) {
.kanban{
width:100%;
position: inherit;
margin: 10px auto 80px;
img{
width:100%;
object-fit: cover;
}
a{
font-size:0.6rem;
}
}
}




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


.item_container{
max-width: 47%;
padding: 13vh 0 100px 3.5%;
position: absolute;
right :5%;
border-left: 1px solid #143d81;
min-height: 100%;
}
.grid{
}
.grid-item{
width:calc(50% - 6px);
padding:0 3px 2px 3px;
float: left;
cursor: pointer;
position: relative;
img{width:100%;}
.js-modal-open{
@include MON;
position: absolute;
top:12px;
right:12px;
font-weight: normal!important;
font-size:3rem;
    padding: 0 0 120% 95%;
}
}
.x2{
width:calc(100% - 6px);
padding:0 3px;
}
.yoko{
width:calc(50% - 6px);
padding:0 3px;
}
@media screen and (max-width:30rem) {
.item_container{
max-width: 100%;
padding:5% 0 120px 0;
margin:10px auto;
position:inherit;
border-top: 1px solid #143d81;
border-left:none;
min-height: 100%;
overflow: hidden;
}
.grid{
}
.grid-item{
width:calc(50% - 6px);
padding:0 3px;
float: left;
img{width:100%;}
}
.x2{
width: 100%;
padding: 0;
}
.yoko{
width:calc(100% - 6px);
padding:0 3px;
}
}









/* モーダルCSS */
.modalArea {
display: none;
position: fixed;
z-index: 9999999999;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.modalBg {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.1);
}

.modalWrapper {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
width: 70%;
max-width: 960px;
padding: 2%;
background-color: #fff;
}
@media screen and (max-width:30rem) {
.modalWrapper {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
width: 80%;
max-width:100%;
padding: 2%;
background-color: #fff;
}
}




.modalContents{
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.4rem;
    line-height: 1.6rem;
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;}
}



@media screen and (max-width:30rem) {
.modalContents{
display: block;
img{
width:100%;
}
.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;}
}
}



.js-modal-close {
position: absolute;
top: 20px;
right: 10px;
cursor: pointer;
font-size: 3rem;
z-index: 999999;
}

//BUY
a.btn_04 {
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: #fff;
font-size: 16px;
letter-spacing: 0.1em;
line-height: 1.3;
text-align: left;
text-decoration: none;
transition-duration: 0.3s;
z-index: 999999;
}
a.btn_04:before {
content: '';
width: 8px;
height: 8px;
border: 0;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 25px;
margin-top: -6px;
}
a.btn_04:hover {
background: #fff;
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) {
footer {
display: none;
padding:120px 0 50px 0;
}
}
footer {
position: fixed;
bottom:0;
left:5%;
padding:0 0 10px 0;
font-size:0.6rem;
z-index: 999999;
@media screen and (max-width:30rem) {
left:0;
}
ul {
display:flex;
flex-wrap:wrap;
justify-content:center;
}
li {
margin:0 10px 0 0;
}
@media screen and (max-width:30rem) {
li {
margin:5px 10px;
&:first-child {
margin:auto;
width:100%;
}
}
}
a {
@include DM;
&:hover {
color:$orange;
}
i {
margin:0 0.25rem 0 0;
}
}
}
#footer-logo {
width:160px;
}
@media screen and (max-width:30rem) {
#footer-logo {
width:160px;
margin:0 auto;
display:block;
}
}