@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://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css");

// 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:14px;
letter-spacing:1px;
}

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

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

100% {
opacity:1;
}
}

// Montserrat
@mixin MON {
font-family:"Montserrat";
}

// 全体のデザイン
$white:#ffffff;
$gray:#999999;
$dark-gray:#303030;
$red:#D64D31;

/* 画面外にいる状態 */
.fadein {
opacity : 0;
transform : translate(0, 50px);
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
}
}

/************************* logo ***************************/
h1{
text-align: center;
z-index: 999999;
img{
max-width:207px;
width:100%;
margin:1.5% auto 1%;
}
}
@media screen and (max-width: 30rem) {
h1{
text-align: center;
z-index: 999999;
img{
width:40%;
margin:1.5% auto 1%;
}
}
}

/************************* container ***************************/
.container {
width:100%;
overflow: hidden;
}

/************************* kanban ***************************/
.kanban{
.pc{
display: block;
img{width:100%;}
}
.sp{display: none;}
}
@media screen and (max-width: 30rem) {
.kanban{
.pc{display: none;}
.sp{
display: block;
img{
width: 100%;
height: 460px;
margin: 0 auto;
display: block;
overflow: hidden;
position: relative;
}
}
}
}

.text-container{
width:50%;
margin:10% auto;
h2{margin:5% auto 0;}
p{margin:5% auto 0;}
}
@media screen and (max-width: 30rem) {
.text-container{
width:80%;
margin:10% auto;
h2{margin:5% auto 0;
font-size:1rem;}
p{margin:5% auto 0;
font-size:0.7rem;}
}
}

/************************* item-container ***************************/
.item-container{
display: -webkit-flex;
display: flex;
.link{
overflow: hidden;
width:45.1%;
position:relative;
img{
width:100%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: block;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
z-index: 0;}
p{z-index: 999999;}
p.big{
position: absolute;/*絶対配置*/
top: 5%;
right: 0%;
@include MON;
font-size:5rem;
font-weight: 900;
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-webkit-writing-mode:vertical-rl;   
}
p.view{
position: absolute;/*絶対配置*/
bottom:2%;
right:2%;
@include MON;
font-size:0.8rem;
font-weight: 900;
}
p.springsummer{
position: absolute;/*絶対配置*/
bottom:4%;
left:1%;
@include MON;
font-size:0.8rem;
font-weight: 900;
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-webkit-writing-mode:vertical-rl;   
}
}
.text{
width: 20%;
background-color: #EEEEEE;
margin: 6px 0.25% 6px 0.25%;
p{padding:8%;}
}
.sublink{
width:34.9%;
div.sublink_div{
position:relative;
a{
display: block;
&:hover{opacity:0.6;}
}
img{width:100%;
object-fit: fill;}
p.big{
position: absolute;/*絶対配置*/
top:6%;
right:2%;
@include MON;
font-size:3rem;
font-weight: 900;
}
p.view{
position: absolute;/*絶対配置*/
bottom:2%;
right:2%;
@include MON;
font-size:0.8rem;
font-weight: 900;
}
}
div.sublink_div:first-child{
margin: 6px 0 -1px 0;
}
div.comingsoon{
position:relative;
a{
display: block;
&:hover{opacity:0.6;}
}
img{width:100%;
object-fit: fill;}
p.big{
position: absolute;/*絶対配置*/
top:6%;
right:2%;
@include MON;
font-size:3rem;
font-weight: 900;
}
p.view{
position: absolute;/*絶対配置*/
bottom:2%;
right:2%;
@include MON;
font-size:0.8rem;
font-weight: 900;
}
}
}
}


@media screen and (max-width: 30rem) {
.item-container{
display: block;
.link{
width:100%;
position:relative;
height: 330px;
img{top:60%;}
p.big{
top:2%;
right:0%;
font-size:3rem;
font-weight: 900;  
}
p.springsummer{
left: 0;
right: 15%;
top: 2%;
font-size: 0.6rem;
}
p.view{
font-size:0.7rem;
}
}
.text{
width:100%;
p{font-size:0.7rem;}
}
.sublink{
width:100%;
div.sublink_div{
width:100%;
height: 50px;
border-top: 1px solid #EFEFEF;
border-bottom: 1px solid #EFEFEF;
margin-bottom:-1px;
a{display:block;}
p.big{
font-size: 1.4rem;
padding: 2% 6% 1% 0;
top: -2%;
}
p.view{
font-size:0.6rem;
font-weight: 900;
padding: 0 6% 0 0;
}
img{display: none;}
.arrow {
width: 0;
height: 0;
border-top: solid 5px transparent;
border-right: solid 5px transparent;
border-bottom: solid 5px transparent;
border-left: solid 5px #333333;
position: absolute;
right: 2%;
top: 40%;
}
}
div.comingsoon{
width:100%;
height: 50px;
border-top: 1px solid #EFEFEF;
border-bottom: 1px solid #cccccc;
margin-bottom:0;
a{display:block;}
p.big{
font-size: 1.4rem;
padding: 2% 6% 1% 0;
top: -2%;
}
p.view{
font-size:0.6rem;
font-weight: 900;
padding: 0 6% 0 0;
}
img{display: none;}
.arrow {
width: 0;
height: 0;
border-top: solid 5px transparent;
border-right: solid 5px transparent;
border-bottom: solid 5px transparent;
border-left: solid 5px #333333;
position: absolute;
right: 2%;
top: 40%;
}
}
}
}
}


.comingsoon{
opacity:0.2;
}

/************************* item-list ***************************/

.item-list-container{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 10% auto;
.btn {
width: 14.46%;
position: relative;
height: 100%;
padding: 0% 1.045% 28% 1.045%;
cursor: pointer;
border: 1px solid #EFEFEF;
margin: -1px -1px 0 0;
img {
margin: 0;
position: absolute;
top: 45%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 80%;
display: block;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
span{
display: block;
text-align: left;
font-size:0.7rem;
line-height: 1rem;
font-weight: 600;
}
.name_container{
padding: 5%;
position: absolute;
top: 80%;
.brand{
font-size:0.4rem;
}
}
}
}
.btn:hover img:nth-of-type(2) {
opacity: 0;
}
.item-list-container::after {
display: block;
content:"";
width:16%;
}

@media screen and (max-width: 80rem) {
.item-list-container{
.btn {
    width: 17.8%;
    padding: 2% 1.045% 32% 1.045%;
}
}
}
@media screen and (max-width: 70rem) {
.item-list-container{
.btn {
    width: 22.7%;
    padding: 0% 1.045% 44% 1.045%;
}
}
}
@media screen and (max-width: 30rem) {
.item-list-container{
.btn {
width: 47.6%;
padding: 60% 1.045% 28% 1.045%;
img {
top: 40%;
}
span{
font-size:0.6rem;
line-height: 0.8rem;
}
.name_container{
padding: 8%;
position: absolute;
top: 75%;
.brand{
display: none;
}
}
}
}
}


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