@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
@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");
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');

* {
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:#000000;
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 {
scroll-behavior: smooth;
-webkit-overflow-scrolling:touch;
}

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

// Josefin
@mixin Josefin {
font-family: 'Josefin Sans', sans-serif;
font-weight:400;
}

// Zen Maru Gothic
@mixin ZenMaru {
font-family: 'Zen Maru Gothic', sans-serif;
}

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

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-container{
max-width:100%;
margin:0 auto 8%;
}
@media screen and (max-width:30rem) {
.kanban-container{
margin:0 auto 12%;}
}
.kanban-pc{
margin:0 auto;
display:block;
text-align: left;
position: relative;
img{max-width:100%;
width:100%;}
.title-logo-container{
position: absolute;
top:25%;
left:6%;}
h2{
@include Josefin;
text-align: center;
font-size: 5rem;
letter-spacing: 20px;
margin:0 auto;}
}
.kanban-sp{display: none;}

@media screen and (max-width:30rem) {
.kanban-sp{
display:block;
text-align: left;
img{max-width:100%;}
.title-logo-container{
width:84%;
margin:0 8%;
position: absolute;
left:auto;
top:10%;
}
h2{
@include Josefin;
font-size: 2.8rem;
letter-spacing: 10px;
}
}
.kanban-pc{display: none;}
}


.link{
padding: 12% 0 0 0;
width:12rem;
li a{
@include ZenMaru;
padding: 7% 0;
font-size:1.6rem;
line-height:2.5rem;
	letter-spacing: 5px;
}}
.icon::before {
content: '\f105';
font-size:1.8rem;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
padding:0 8px 0 0;
}
@media screen and (max-width:30rem) {
.link{
padding: 10% 0 0 3%;
margin:0 auto;
width:33%;
li a{
@include ZenMaru;
padding: 2% 0;
font-size:0.9rem;
line-height:2rem;
}}
.icon::before {
content: '\f105';
font-size:1rem;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
padding:0 2px 0 10px;
}
}






.contant-container{
text-align:left;
max-width:86%;
width:100%;
margin: 0 auto 10%;
p{
@include ZenMaru;
font-weight: 600;
max-width:1000px;
font-size: 0.9rem;
line-height:1.7rem;
margin:10% auto ;}
}
@media screen and (max-width:30rem) {
.contant-container{
max-width:100%;
p{
width:100%;
max-width:88%;
font-size: 0.8rem;
font-weight: 600;
margin:15% auto;
padding-bottom:10%;}
}
}



.item-container{
text-align: center;
position: relative;
max-width:100%;
width:100%;
margin:15% auto;
padding:5% 0;
.title{
@include ZenMaru;
font-size:2rem;
z-index: 999999;
}
.title:after{
background-color: $black; /* 線色 */
border-radius: 1px; /* 線幅の半分 */
content: "";
display: block;
height: 2px; /* 線幅 */
width: 2%;
margin: 5% auto;
}

img{width:100%;
margin:5% auto;}
.copy{
text-align: left;
z-index: 99999;
@include ZenMaru;
font-weight: 600;
font-size: 0.8rem;
padding:1% 0 3% 0;
}
.item-link-container{display: flex;
flex-wrap: wrap;}
.item-link{
width:11%;
margin:1% 0.5%;
display: flex;
color:#585858;
text-align: left;
a{@include Josefin;
img{width:100%;}
.text-container{display: block;
font-size:0.6rem;
line-height: 1rem;
@include Josefin;}
}
div.buy{
display: inline;
background-color: $dark-gray;
color:$white;
@include Josefin;
padding:3px 5px;}
}
.slider-container{display: flex;}
}
@media screen and (max-width:30rem) {
.item-container{
padding: 10% 0 20%;
.title{
@include ZenMaru;
font-size:1.2rem;
}
.title:after{
margin: 10% auto;
}
img{padding:5% 0;}
.copy{
display: block;
font-weight: 100;
position:inherit;
font-size: 0.8rem;
bottom:inherit;
left:inherit;
padding: 5% 3% 8%;
}
.item-link-container{padding:0 3%;}
.item-link{
width:32%;
margin:1% 0.5%;
}
}
}


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






.other-item-container{
padding:10% 0;
.title{
@include Josefin;
font-size:2rem;
z-index: 999999;
}
.title:after{
background-color: $black; /* 線色 */
border-radius: 1px; /* 線幅の半分 */
content: "";
display: block;
height: 2px; /* 線幅 */
width: 2%;
margin: 5% auto 0;
}
}
@media screen and (max-width:30rem) {
.other-item-container{
.title{
font-size:1.2rem;
}
}
}
.js-flickity{
li{padding:5% 0.5%;
width:24%;
line-height: 1rem;
img{width:100%;
min-height:300px;
padding-bottom: 3%;
}
a .item-link{
@include Josefin;
font-size:0.6rem;
padding:3% 0;
div.buy{
display: block;
background-color: $dark-gray;
color:$white;
@include Josefin;
font-size:0.8rem;
width:25%;
padding:5px 5px 4px;
margin:2% auto}
}
}
}
@media screen and (max-width:30rem) {
.js-flickity{
li{padding:10% 0.5%;
width:49%;
img{width:100%;
min-height:auto;}
.item-link{font-size:0.5rem;}
}
}
}



// フッター
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;
}
}