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

a:hover img {
opacity: 1;
animation: flash 1.5s;
}
@keyframes flash {
0% {
opacity: .3;
}
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%;
}

/************************* 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{
text-align: center;
width:50%;
margin:6% auto;
clear: both;
h2{margin:5% auto 0;}
p{
font-size: 1rem;
line-height: 2rem;}
}
@media screen and (max-width: 30rem) {
.text-container{
width:80%;
padding:10% 0 0 0;
h2{margin:5% auto 0;
font-size:1rem;}
p{margin:5% auto 0;
font-size:0.9rem;}
}
}


/************************* item-list ***************************/
/* 全体のスタイル */
.item-container{
display: flex;
position: relative;
flex-wrap: wrap;
}

.item-box{
osition: relative;
width: calc(20% - 1.5px);
padding: 2.5%;
cursor: pointer;
border: 1px solid #EFEFEF;
margin: -1px -1px 0 0;
}
@media screen and (max-width: 30rem) {
.item-box{
width: calc(45% - 2px);
}
}
.swiper-container{

}
.swiper-wrapper {
}
/* 全スライド共通スタイル */
.swiper-slide {
color: #ffffff;
text-align: center;
padding-bottom:40px;

img{width:100%;
object-fit: cover;}
}
/* 4の倍数＋1枚目のスライドのスタイル（1枚目、5枚目…） */
.swiper-slide:nth-child(4n+1) {
}
/* 4の倍数＋2枚目のスライドのスタイル（2枚目、6枚目…） */
.swiper-slide:nth-child(4n+2) {
}
/* 4の倍数＋3枚目のスライドのスタイル（3枚目、7枚目…） */
.swiper-slide:nth-child(4n+3) {
}
/* 4の倍数＋4枚目のスライドのスタイル（4枚目、8枚目…） */
.swiper-slide:nth-child(4n+4) {
}

.swiper-pagination-bullet-active {
opacity: 1;
background-color:$dark-gray;
}

@media screen and (max-width: 30rem) {
.swiper-pagination-bullet {
width: 4px;
height: 4px;
}
}

.item-text{
display: block;
span{
display: block;
text-align: left;
font-size:0.7rem;
line-height: 1rem;
font-weight: 600;
}
}


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

/*************************
各セクション看板
***************************/
.contents_kanban_pc{
display: block;
width:100%;
padding:100px 0 0 0;
margin: 0 auto;
text-align: left;
.kanban_img_container{
display: flex;
margin: 5% 2%;
h2{
width: 90%;
font-family: "Montserrat";
font-style: normal;
position: relative;
font-size: 5rem;
letter-spacing: 2px;
padding: 20px 5% 5% 2%;
margin: 0 auto;
text-align: left;
p{
padding:5% 5% 5% 2%;
font-size: 1rem;
font-weight: normal;
margin:0 auto;
line-height: 2rem;
}
}
img{
width:50%;
object-fit: cover;
}
}
}
.contents_kanban_sp{
display: none;
}

@media screen and (max-width: 30rem) {
.contents_kanban_pc{
display: none;
}
.contents_kanban_sp{
display: block;
width:100%;
padding:50px 0 10px 0;
text-align: center;
h2{
font-family: "Montserrat";
font-style: normal;
letter-spacing: 2px;
font-size: 3rem;
margin:1% auto;
}
.kanban_img_container{
display: block;
img{
width:100%;
}
}
p{
text-align: left;
width: 90%;
margin:0% auto 5%;
padding-top:20px;
font-size: 0.8rem;
line-height: 1.6rem;
}
}
}

/*************************
menu
***************************/
#menu{
text-align: center;
}
#menu ul{
width: 465px;
margin:5% auto 0;
display: flex;
position: relative;}
#menu li{
position: relative;
list-style-type: none;
border-right: 2px solid #000;
}
#menu li:last-child{
border-right: none;
}
#menu li a{
width:47%;
text-align: center;
@include MON;
font-weight: 900;
position: relative;
text-align: center;
font-size: 3.2rem;
letter-spacing: 2px;
padding: 30px;
margin: 0 1%;
}

#menu li a:hover {
opacity: 0.5 ;
}
@media screen and (max-width:30rem) {
#menu{
}
#menu ul {
width: 80%;
margin:20% auto 5%;
}
#menu li{
font-size: 1rem;
padding: 30px 0 30px;
}
#menu li a{
width:60%;
font-size: 1.4rem;
margin: 0;
}
}


/************************* footer ***************************/
footer {
background:$dark-gray;
padding: 40px;
margin:20% 0 0 0;}
footer ul {
list-style-type: none;
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; } }