@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://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css");


* {
padding:0;
margin:0;
outline:none;
border-radius:0;
}

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

// ふわっと

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

/* 画面内に入った状態 */
.fadein.scrollin {
opacity : 1;
transform : translate(0, 0);
}

html,body {
width:100%;
height:100%;
color:#303030;
font-family: "YuGothic", "Yu Gothic", "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: 500;
letter-spacing: 0.03em;
font-size:16px;
letter-spacing:1px;
line-height:1.5em;
padding:0;
margin:0;
}

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

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

h1,h2,h3,h4,h5,h6 {
font-weight:bold;
line-height:1.5rem;
}

h1 {
font-size:2.0rem;
line-height:2.0rem;
}

h2 {
font-size:1.5rem;
line-height:2.0rem;
}

h3 {
font-size:1.25rem;
line-height:1.5rem;
}

h4,h5,h6 {
font-size:1.0rem;
line-height:1.5rem;
}

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 Pro","Font Awesome 5 Brands";
font-weight:900;
}

// 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:#eb3b5a;
$orange:#fa8231;
$yellow:#f7b731;
$green:#20bf6b;
$blue:#3867d6;
$purple:#8854d0;
$accent :#45a3bf;


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


/////////////看板
.kanban {
width:100%;
margin:0 0 8rem 0;
img {
width:100%;
}
div.pc{
display: block;
}
div.sp{
display: none;
}
}

@media screen and (max-width:50rem) {
.kanban {
margin:0 0 2rem 0;
img {
width:100%;
margin:0 auto;
}
div.pc{
display: none;
}
div.sp{
display: block;
}
}
}

////////////// 頭がきの設定はココ
.header-text {
max-width:80rem;
padding:0 1rem 6rem;
margin: 0 auto;
img{
max-width:400px;
float: left;
padding:0 20px 20px 0;
}
}

@media screen and (max-width:50rem) {
.header-text {
max-width: 90%;
padding: 0 5%;
margin:10% auto;
font-size: 0.9rem;
img{
max-width:100%;
margin: 0 auto;
float: none;
padding:0 0 5% 0;
}
}
}

////////////// コンテナーの設定はココ
.content_container {
width:100%;
padding:8rem 0;
background:$soft-gray;
&:nth-child(even) {
background:$white;
}
}
.content_inner {
max-width:1500px;
margin:0 auto;
}
@media screen and (max-width:50rem) {
.content_container {
width:100%;
padding:4rem 0;
}
}

////////////// select

.select_container {
width:100%;
display:flex;
margin:0 auto;
padding: 40px 0 0 0;
clear: both;
div.select{
position: relative;
width: 50%;
height: 30vw;
overflow: hidden;
margin: 0 auto;
padding: 0;
background: #fff;
overflow: hidden;
cursor: pointer;
p.text{
width:80%;
color:$white;
position: absolute;
top: 40%;
left: 10%;
padding: 0;
text-align: center;
span.title{
font-size:1.6rem;
display: block;
padding-bottom:12px;
}
.arrow{
width: 20px;
height: 20px;
border: 5px solid;
border-color:  transparent transparent $white $white;
transform: rotate(-45deg);
display: block;
margin:0 auto;
}
}
img{
width:100%;
transform: scale(1);
transition: 1.2s ease-in-out;
}
:hover img {
transform: scale(1.2);
}

}
}
@media screen and (max-width:50rem) {
.select_container {
width:100%;
padding: 40px 0 0 0;
word-wrap:wrap;
display: block;
div.select{
width: 100%;
height: auto;
p.text{
font-size:0.6rem;
line-height: 1.2rem;
bottom: 34%;
left: 10%;
padding: 0;
text-align: center;
width: 80%;
span.title{
font-size:1.2rem;
display: block;
padding-bottom:12px;
}

}
:hover img {
transform: scale(1);
}
.arrow{
width: 14px;
height: 14px;
border: 3px solid;
}
}
}
}

////////////// 写真ボックスの設定はココ

.kanban_photo1500{
width:100%;
img{
width:100%;
object-fit: cover;
}
}
@media screen and (max-width:50rem) {
.kanban_photo1500{
padding-bottom: 60px;
img{
}
}
}
.photo_layout {
max-width: 80rem;
display:flex;
margin:0 auto;
padding: 120px 0 0 0;
}
@media screen and (max-width:50rem) {
.photo_layout {
width:100%;
padding: 0;
word-wrap:wrap;
}
}

.photo_900 {
padding: 0;
width:45%;
margin: 0 1.5%;
img {
width:100%;
object-fit:cover;
}
div.name{
@include MON;
font-size:1.6rem;
padding:16px 0 0 0;
}
div.price{
@include MON;
font-size: 0.8rem;
padding:6px 0;
span.buy{
background-color: $dark-gray;
color:$white;
padding:3px 5px;
margin:0 8px;
}
}
div.jp-name{
font-size:1.2rem;
}
div.discription{
font-size:0.9rem;
padding:0 0 16px 0;
}
}
@media screen and (max-width:50rem) {
.photo_900 {
width: 98%;
margin: 0 1%;
padding:0 0 46px 0;
div.discription{
font-size:0.6rem;
line-height: 1.1rem;
}
div.jp-name{
font-size:0.8rem;
}
}
}


//////////900//////////////////
// IMG 900_Right 
div.img_900_Right{
max-width: 900px;
margin:10% 0 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 4rem 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:-13% 2% 10% auto;
text-align: left;
h2{
font-size:2rem;
margin:-9% auto 1rem;
}
}
@media screen and (max-width:30rem) {
div.text_900_Right{
margin:0 5% 4rem;
width:90%;
h2{
font-size: 1.4rem;
margin:0 auto 1rem;
}
p{font-size:0.9rem;}
}
}

.text_900_Righ-top{
margin:-25% 2% 20% auto !important;
}
@media screen and (max-width:30rem) {
.text_900_Righ-top{
margin: 0 auto 10% auto !important
}
}

.top-img{
width:90%;
img{
width:100%;
margin:0 auto;
}

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


// TXT 900_Left
div.text_900_Left{
max-width: 900px;
margin:-13% auto 6% 10%;
text-align: left;
h2{
font-size:2rem;
margin:-9% auto 1rem;
}
}
@media screen and (max-width:30rem) {
div.text_900_Left{
margin:0 5% 4rem;
width:90%;
h2{
font-size:1.2rem;
margin:0 auto 1rem;
}
p{font-size:0.9rem;}
}
}

.text_900_Left-top{
margin:-50% auto 30% 10% !important;
}
@media screen and (max-width:30rem) {
.text_900_Left-top{
margin: -10% auto 20% !important;
}
}

div.text_900_Right h2.tate1{
@include SERIF;
font-size: 1.4rem;
margin: -150% 0 100% -10% !important;
letter-spacing: 5px;
line-height: 2.4rem;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
@media screen and (max-width:30rem) {
div.text_900_Right h2.tate1{
font-size: 0.8rem;
line-height: 1.6rem;
letter-spacing: 2px;
margin: -140% 0 70% -3% !important;
}
}
div.text_900_Right h2.tate2{
@include SERIF;
font-size: 1.4rem;
margin: -84% 0 0 -10% !important;
letter-spacing: 5px;
line-height: 2.4rem;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
@media screen and (max-width:30rem) {
div.text_900_Right h2.tate2{
font-size: 0.8rem;
line-height: 1.6rem;
letter-spacing: 2px;
margin: -80% 0 0 0% !important;
}
}

div.text_900_Right h2.tate3{
@include SERIF;
font-size: 1.4rem;
margin: -150% 0 70% -10% !important;
letter-spacing: 5px;
line-height: 2.4rem;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
@media screen and (max-width:30rem) {
div.text_900_Right h2.tate3{
font-size: 0.8rem;
line-height: 1.6rem;
letter-spacing: 2px;
margin: -150% 0 70% -10% !important;
}
}

div.text_900_Left h2.tate1{
@include SERIF;
font-size: 1.4rem;
margin: -76% 0 0 88% !important;
letter-spacing: 5px;
line-height: 2.4rem;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
@media screen and (max-width:30rem) {
div.text_900_Left h2.tate1{
font-size: 0.8rem;
line-height: 1.6rem;
letter-spacing: 2px;
margin: -72% 0 10% 88% !important;
}
}

div.text_900_Left h2.tate2{
@include SERIF;
font-size: 1.4rem;
margin: -142% 0 80% 88% !important;
letter-spacing: 5px;
line-height: 2.4rem;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
@media screen and (max-width:30rem) {
div.text_900_Left h2.tate2{
font-size: 0.8rem;
line-height: 1.6rem;
letter-spacing: 2px;
margin: -132% 0 60% 88% !important;
}
}


/*************************
footer
***************************/
footer {
background: white;
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: $dark-gray; }
@media screen and (max-width: 30rem) {
#footer-logo {
width: 160px;
fill: $dark-gray;
margin: 0 auto 24px auto;
display: block; } }
#page_top{
width: 50px;
height: 50px;
position: fixed;
right: 0;
bottom: -50px;
opacity: 0.6;
margin:0 20px 0 0 ;
}
#page_top a{
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
}
#page_top a::before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f102';
font-size: 25px;
color: $dark-gray;
position: absolute;
width: 30px;
height: 30px;
top: -15px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

/*============
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: 3;
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;
}
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: 1rem;
}
}
/*============
.toggle_btn
=============*/
.toggle_btn {
display: block;
position: fixed;
top: 30px;
left: 30px;
width: 30px;
height: 30px;
transition: all .5s;
cursor: pointer;
z-index: 3;
}
.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: .2;
z-index: 2;
cursor: pointer;
}