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

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:#cccccc;
$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;}



/************************* item-list ***************************/
/* 全体のスタイル */
.item-container{
padding:100px 0 0 0;
display: flex;
position: relative;
flex-wrap: wrap;
width:80%;
margin: 0 auto;
}
@media screen and (max-width: 70rem) {
.item-container{
padding:50px 0 0 0;
}
}

.item-box{
osition: relative;
width: 45%;
padding:2.5% 2.5%;
cursor: pointer;
margin: -1px -1px 0 0;

a{
display: block;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
-ms-filter: grayscale(0%);
filter: grayscale(0%);
transition:0.5s;
.brand{
display: inline;
position: absolute;
top: 30%;
width: 50%;
margin:0 25%;
text-align: center;
font-size: 2rem;
z-index: 9999999;
img{
width:100%;
}
}
}

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


}
@media screen and (max-width: 70rem) {
.item-box{
width: 96%;
text-align: center;
margin: 0 1%;
padding:4% 2.5%;

a{
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
-ms-filter: grayscale(0%);
filter: grayscale(0%);
.brand{
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;
border-radius: 50px;
border:1.5px solid $dark-gray;
}
}
@media screen and (max-width: 70rem) {
.swiper-slide {
img{width:102%;
height:102%;
object-fit: cover;
margin: -6px;
border-radius: 30px;
border:1.5px solid $dark-gray;
}
}
}



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