@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:16px;
letter-spacing:1px;
line-height:1.5rem;
}

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


/* じわっと画像が表示される */
@keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
0% {opacity: 0} /* 始め */
100% {opacity: 1} /* 終わり */
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

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

h1,h2,h3,h4,h5,h6 {
font-weight:bold;
line-height:1.5rem;
}

h1 {
font-size:2.0rem;
line-height:2.0rem;
}

h2 {
font-size:1.5rem;
line-height:2.0rem;
}

h3 {
font-size:1.25rem;
line-height:1.5rem;
}

h4,h5,h6 {
font-size:1.0rem;
line-height:1.5rem;
}

table	 {
border-collapse:collapse;
}

td,input	 {
font-family:"Noto Sans JP";
}

button {
background:transparent;
border:0;
}

button:hover {
cursor:pointer;
}

// 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";
}

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

// 全体のデザイン
$white:#ffffff;
$gray:#999999;
$dark-gray:#303030;
$light-gray:#cccccc;
$soft-gray:#eeeeee;
$red:#eb3b5a;
$orange:#fa8231;
$yellow:#f7b731;
$green:#20bf6b;
$blue:#3867d6;
$black:#000000;



article{
//*visibility: hidden;*//
}



h1.brand-name{
@include MON;
font-size:3rem;
position: fixed;
top:5%;
left:5%;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
transform: rotate( -180deg );
z-index: 999999999;
span{
display: block;
@include MON;
font-size:0.5rem;
padding:0 2% 0 0;
line-height: 1.2rem;
}
}
@media screen and (max-width: 30rem) {
h1.brand-name{
font-size:1.2rem;
position: fixed;
width: 100%;
top:0;
left:auto;
-ms-writing-mode: horizontal-tb;
writing-mode: horizontal-tb;
transform: rotate( -360deg );
z-index: 999999999;
padding: 0;
span{
display: block;
@include MON;
font-size:0.4rem;
padding:0;
}
background-color:rgba(255,255,255,0.8);
padding: 1% 0;
}
}




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

// ブランド説明
.brand{
background-color:#b0c4de;//ブランド説明んところの背景色ココ！
padding:4% 0;
position: relative;
.inner{
width:64%;
margin:0 auto;
display: flex;
align-items:center;
}
img{
max-width: 60%;
width: 100%;
}
.discription-container{
max-width: 50%;
padding: 40% 0 0 8%;
.title{
font-size:1.8rem;
line-height: 2.4rem;
font-weight: 600;}
.discription{
font-size:0.9rem;
padding: 8% 0 0 0;}
}
}
@media screen and (max-width: 70rem) {
.brand{
.inner{
display:block;
width:90%;
margin:10% auto;
}
img{
max-width: 100%;
}
.discription-container{
position: relative;
max-width: 100%;
right:0;
bottom:0;
padding: 6% 0;
.title{
font-size:1rem;
padding: 6% 0 0 0;}
.discription{
font-size:0.8rem;
padding: 6% 0 0 0;
}
}
}
}

.bgcolor-container{
background-color: #f0f8ff;
padding:12% 0 0 0;
}


// PATTERN-01
.PATTERN-01{
display: flex;
flex-flow: row-reverse;
margin: 0 auto;
padding:0 18% 12% 18%;
align-items: flex-end;
img{
max-width: 58%;
width:100%;}
.discription-container{
padding:0 0 20% 8%;
}
.number{
@include MON;
font-size:3rem;
padding-bottom:12%;
}
.title{
width: 100%;
font-size:1.4rem;
display: inline-block;
position: relative;
&:before {
content: '';
position: absolute;
left: 2rem;
bottom: -20px; /*下線の上下位置調整*/
display: inline-block;
width: 4rem; /*下線の幅*/
height: 1px; /*下線の太さ*/
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translate(-50%); /*位置調整*/
background-color: $gray; /*下線の色*/}
}
.discription{
font-size:0.9rem;
padding:12% 0;}
.link{font-size:0.9rem;}
}
@media screen and (max-width: 70rem) {
.PATTERN-01{
display:block;
padding:0 0 28% 0;
width:90%;
img{
max-width: 100%;
}
.discription-container{
padding:6% 0 12% 0;
}
.number{
font-size:2.4rem;
padding:8% 0;
}
.title{
font-size:1.1rem;
}
.discription{
font-size:0.6rem;
padding:12% 0;}
.link{font-size:0.8rem;}
}
}


// PATTERN-02
.PATTERN-02{
display: flex;
flex-flow: row-reverse;
margin: 0 auto;
padding:0 6% 12% 6%;
img{
width:100%;}
.right{
max-width: 58%;
padding:0 4%;
.discription-container{
padding:0 0 10% 0;}
.number{
@include MON;
font-size:3rem;
padding-bottom:12%;}
.discription{
font-size:0.9rem;
padding:12% 0 0 0;}
.title{
width: 100%;
font-size:1.4rem;
display: inline-block;
position: relative;
&:before {
content: '';
position: absolute;
left: 2rem;
bottom: -20px; /*下線の上下位置調整*/
display: inline-block;
width: 4rem; /*下線の幅*/
height: 1px; /*下線の太さ*/
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translate(-50%); /*位置調整*/
background-color: $gray; /*下線の色*/
}
}
}
.left{
max-width: 58%;
padding:0 4%;
.link{font-size:0.9rem;
padding:5% 0 0 0;}
}
}
@media screen and (max-width: 70rem) {
.PATTERN-02{
display:block;
padding:0 0 20% 0;
width:90%;
.right{
max-width: 100%;
padding:0;
.discription-container{
padding:6% 0 12% 0;
}
.number{
font-size:2.4rem;
padding:8% 0;
}
.title{
font-size:1.1rem;
}
.discription{
font-size:0.6rem;
padding:12% 0 0 0;}
}
.left{
max-width: 100%;
padding:0;
.link{padding:6% 0 0 0;
font-size:0.8rem;}
}
}
}





// PATTERN-03
.PATTERN-03{
padding: 0 0 12% 0;
text-align: center;
margin: 0 auto;
max-width: 1000px;
.number-container{
width:100%;
padding:0 0 8% 0;
margin: 0 auto;
text-align: center;
}
.number{
display: inline;
@include MON;
font-size:3rem;
padding:0 2% 0 0;
}
.title{
width: 100%;
display: inline;
font-size:1.4rem;
position: relative;
&:before {
content: '';
position: absolute;
left: 40%;
bottom: -20px; /*下線の上下位置調整*/
display: inline-block;
width: 4rem; /*下線の幅*/
height: 1px; /*下線の太さ*/
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translate(-50%); /*位置調整*/
background-color: $gray; /*下線の色*/
}
}
.img-container{
display: flex;
img{
max-width: 48%;
width:100%;
padding:0 2%;}
}
.discription-container{
padding:4% 0 0 0;}
.discription{
font-size:0.9rem;}
.link{font-size:0.9rem;
padding:2% 0 0 0;}
}
@media screen and (max-width: 70rem) {
.PATTERN-03{
padding:0 0 0 0;
width:90%;
.number-container{
display:block;
width:100%;
padding: 0 0 12% 0;
text-align: left;
}
.number{
display:block;
font-size:2.4rem;
padding:8% 0;
}
.title{
font-size:1.1rem;
margin:0 0 8% 0;
&:before {
left: 2.2rem;
}
}
.img-container{
display:block;
img{
max-width:100%;
padding:0;}
}
.discription-container{
padding:6% 0 12% 0;
text-align: left;}
.discription{
font-size:0.6rem;
padding:6% 0 0 0;}
.link{padding:12% 0;
font-size:0.8rem;}
}
}




// PATTERN-04
.PATTERN-04{
display: flex;
margin: 0 auto;
padding:0 18% 12% 18%;
align-items: flex-end;
img{
max-width: 58%;
width:100%;}
.discription-container{
text-align: right;
padding:0 8% 20% 0;
}
.number{
@include MON;
font-size:3rem;
padding-bottom:12%;
}
.title{
width: 100%;
font-size:1.4rem;
display: inline-block;
position: relative;
&:before {
content: '';
position: absolute;
right: -2rem;
bottom: -20px; /*下線の上下位置調整*/
display: inline-block;
width: 4rem; /*下線の幅*/
height: 1px; /*下線の太さ*/
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translate(-50%); /*位置調整*/
background-color: $gray; /*下線の色*/
}}
.discription{
font-size:0.9rem;
padding:12% 0 12% 5%;}
.link{font-size:0.9rem;
padding:0 0 0 5%;}
}
@media screen and (max-width: 70rem) {
.PATTERN-04{
display:block;
padding:0 0 20% 0;
width:90%;
text-align: left;
img{
max-width: 100%;
}
.discription-container{
text-align: left;
padding:6% 0 12% 0;
}
.number{
font-size:2.4rem;
padding:8% 0;
}
.title{
font-size:1.1rem;
&:before {
right: auto;
left:2rem;
}
}
.discription{
font-size:0.6rem;
padding:12% 0 0 0;}
.link{padding:6% 0 0 0;
font-size:0.8rem;}
}
}




// PATTERN-05
.PATTERN-05{
display: flex;
margin: 0 auto;
width:100%;
max-width: 1400px;
padding: 0 0 12% 0;
img{width:100%;}
.right{
width: 100%;
padding: 0 0 0 10%;
img{
max-width: 90%;
width:100%;
}
.link{font-size:0.9rem;
padding:5% 0 0 0;}
}
.left{
width:100%;
max-width: 58%;
.img-container{
display: flex;
img{
max-width:340px;
width:100%;
padding:0 2%;}
}
.discription-container{
padding:0 0 10% 0;}
.number{
@include MON;
font-size:3rem;
padding-bottom:12%;
}
.discription{
font-size:0.9rem;
padding:12% 0 0 0;
}
.title{
width: 100%;
font-size:1.4rem;
display: inline-block;
position: relative;
width: 100%;
&:before {
content: '';
position: absolute;
left: 2rem;
bottom: -20px; /*下線の上下位置調整*/
display: inline-block;
width: 4rem; /*下線の幅*/
height: 1px; /*下線の太さ*/
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translate(-50%); /*位置調整*/
background-color: $gray; /*下線の色*/
}
}
}
}
@media screen and (max-width: 70rem) {
.PATTERN-05{
display: block;
padding:0 0 20% 0;
width:90%;
.link{font-size:0.8rem;
padding:5% 0 0 0;}
.right{
padding: 0;
img{
max-width: 100%;
}
.link{font-size:0.8rem;
padding:5% 0 0 0;}
}
.left{
max-width:100%;
.img-container{
img{
max-width:50%;
padding:0 0 2% 0;}
}
.discription{
font-size:0.6rem;
padding:12% 0 0 0;
}
}
}
}

//////各ブランドへ

.item-box {
width: calc(18% - 1.5px) !important;
}
@media screen and (max-width: 70rem) {
.item-box {
width: 46% !important;
}
}
.item-box a .brand{
top: 38% !important;
font-size: 0.9rem !important;
background-color: transparent !important;
span {
margin: 0 5% !important;
}
}


.item-container {
width: 90%!important;
padding: 10% 0 0 10%!important;
}
@media screen and (max-width: 70rem) {
.item-container {
width: 100%!important;
padding: 10% 0 0 0!important;
}
.item-box a .brand{
top: 22% !important;
font-size: 0.6rem !important;
background-color: transparent !important;
span {
   overflow: hidden;
   text-overflow: ellipsis;
    white-space: nowrap;
display: block;
margin: 0 !important;
padding: 10% 5% !important;
font-size: 0.6rem !important;
letter-spacing: 1px !important;
}
}

}

// フッター
footer {
background:$dark-gray;
padding: 40px;
margin: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; } }