@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");

// https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css
// at https://icons8.com/line-awesome

* {
padding:0;
margin:0;
outline:none;
font-family:"Noto Sans JP";
-webkit-appearance:none;
border-radius:0;
}

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

html,body {
width:100%;
height:100%;
}

body {
color:#303030;
font-family:"Noto Sans JP";
font-size:16px;
letter-spacing:1px;
line-height:1.5rem;
box-sizing : border-box;
background-color:#fcf76b;
}

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

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

@keyframes delay {
0% {
opacity:0.5;
}

100% {
opacity:1;
}
}

// Font Awesome 
@mixin ICON {
font-family:"Font Awesome 5 Pro","Font Awesome 5 Brands";
}

// Line Awesome
@mixin LINE-AWESOME {
font-family:"Line Awesome Free","Line Awesome Brands";
}

// 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:#fcf76b;
$soft-gray:#eeeeee;
$red:#D64D31;

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



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

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


// 看板
.kanban-container{
max-width:100%;
margin:0 auto 8%;
}
@media screen and (max-width:30rem) {
.kanban-container{
margin:0 auto 12%;}
}
.kanban-pc{
max-width:1960px;
margin:0 auto;
display:block;
text-align: left;
position: relative;
img{max-width:100%;
width:100%;}
span{
width:33.3333%;
margin:0 auto;
display: block;
position:absolute;
top:45%;
left:33.3333%;
}
}
.kanban-sp{display: none;}

@media screen and (max-width:30rem) {
.kanban-sp{
display:block;
text-align: left;
img{max-width:100%;}
span{
width:70%;
margin:0 auto;
display: block;
position:absolute;
top:45%;
left:15%;
}
}
.kanban-pc{display: none;}
}

.atamagaki{
text-align: left;
font-size: 0.9rem;
margin:5% auto 2%;
padding:0 5%;
max-width:800px;
width:100%;}
@media screen and (max-width: 70rem) {
.atamagaki{
text-align: left;
font-size: 0.7rem;
padding:0 5%;
max-width:90%;
width:100%;}
}

h1{display: none;}


div.GAIYOU{
width:100%;
max-width:800px;
margin: 0 auto;
padding:5% 0;
	h2{font-size:0.9rem;line-height: 1.8rem;}
p{padding:1rem 0;
font-size: 0.9rem;
	span.KADOMARU{display: block;
	background-color:#000000;
	color:#FFFFFF;
	border-radius: 20px;
	width: 240px;
	text-align: center;
	padding:1% 0;
	margin:5% 0 2% 0;}
	span.RED{color:#DF0000;
	font-weight:bold;}
}
}
@media screen and (max-width:50rem) {
div.GAIYOU{
padding:10% 5% 5%;
max-width:90%;
width:100%;
	p{font-size: 0.7rem;}
}
}
/************************* item-list ***************************/
/* 全体のスタイル */
.item-container{
padding:100px 0 0 0;
display: flex;
position: relative;
flex-wrap: wrap;
width:70%;
margin: 0 auto;
}
@media screen and (max-width: 70rem) {
.item-container{
width:96%;
padding:50px 0 0 0;
}
}

.item-box{
osition: relative;
width: 30%;
padding:0 1.1% 10% 1.1%;
cursor: pointer;
margin: -1px -1px 0 0;

.brand{
margin:3% 15%;
text-align: center;
font-size: 2rem;
z-index: 9999999;
img{
width:100%;
}
}

a.monokuro{
display: block;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
-ms-filter: grayscale(0%);
filter: grayscale(0%);
transition:0.5s;
}

a.monokuro:hover{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}


}
@media screen and (max-width: 70rem) {
.item-box{
width: 46%;
text-align: center;
margin: 0 auto;
padding:4% 2% 10%;

a{
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
-ms-filter: grayscale(0%);
filter: grayscale(0%);
.brand{
margin:0 15%;
left: 0;
z-index: 999999;
text-align: center;
font-size:1rem;
transition: 1.0s;
span{
@include MON;
font-weight: 900;
background-color: $light-gray;
padding: 10%;
}
}
}

}
}



/* 全スライド共通スタイル */
.swiper-slide {
img{width:102%;
height:102%;
object-fit: cover;
margin: -6px;
}
}
@media screen and (max-width: 70rem) {
.swiper-slide {
img{width:102%;
height:102%;
object-fit: cover;
margin: -6px;
}
}
}



@media screen and (max-width: 70rem) {
.item-text{
padding-bottom:10px;
span{
font-size:0.5rem;
letter-spacing: 1px;
line-height: 0.8rem;
}
}
}



////////////////////////////////////// FOOTER
footer {
background:$dark-gray;
padding: 40px;
margin: 10% 0 0 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: 70rem) {
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: $gray; }
@media screen and (max-width: 70rem) {
#footer-logo {
width: 160px;
fill: $gray;
margin: 0 auto 24px auto;
display: block; } }