@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/css2?family=Crimson+Pro:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css");
@import url('https://fonts.googleapis.com/css2?family=TIMES+Display:wght@600&display=swap');
@import url("slick-theme.css");
@import url("slick.css");


* {
padding:0;
margin:0;
outline:none;
border-radius:0;
}

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

html,body {
width:100%;
height:100%;
color:#303030;
background-color: #f7f7f7;
font-family: "YuGothic", "Yu Gothic", "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: 500;
letter-spacing: 0.03em;
font-size:16px;
letter-spacing:1px;
line-height:1.5em;
padding:0;
margin:0;

}

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

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

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

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

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";
font-weight:900;
}

// Noto Sans JP
@mixin YG {
font-family:-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
font-weight:400;
}

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

// Josefin
@mixin Josefin {
font-family:"Josefin Sans","sans-serif";
}

// Crimson
@mixin Crimson {
font-family: 'Crimson Pro', serif;
font-weight: 600;
}

// DM+Sans
@mixin DM {
font-family: "DM Sans";
}

// TIMES
@mixin TIMES {
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-weight:900;
}

// 全体のデザイン
$white:#ffffff;
$black:#303030;
$light-gray:#cccccc;
$soft-gray:#eeeeee;
$gray:#303030;
$red:#eb3b5a;
$orange:#fa8231;
$yellow:#f7b731;
$green:#20bf6b;
$purple:#8854d0;
$blue :#bac4cc;

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

/* 画面外にいる状態 */
.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;
overflow-x: hidden !important;
}
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}



// 看板
.kanban-container{
background-color:#efeae4;
padding:130px 0 150px;
text-align: center;
h1 img{width:50%;
margin:0 auto;}
}
@media screen and (max-width:30rem) {
.kanban-container{
padding-bottom:60px;
padding:50px 0 30px;
h1 img{width:100%;
}
}
}


.main_title{
width:100%;
max-width:820px;
margin:0 auto;
text-align: left;
font-size:0.9rem;
line-height: 1.6rem;
letter-spacing: 6px;
padding:10% 0 0 0;
}
@media screen and (max-width:50rem) {
.main_title{
width:90%;
font-size:0.6rem;
line-height: 1.2rem;
letter-spacing: 2px;
padding:20% 0 16% 0;
}
}


////////// ALL //////////
////////// ALL //////////
////////// ALL //////////
.ALL_container{
max-width: 100%;
width: 100%;
margin: 0 auto;
text-align: center;
}
@media screen and (max-width:50rem) {
.ALL_container{
overflow-x: hidden;
max-width: 95%;
}
}



.container{
display: flex;
width:100%;
height:95hv;
padding-top:10%;
div.photo{max-width:45%;
img{
object-fit: cover;
width:100%;
height: 100%;}}
.number{
position: relative;
z-index: 999999;
margin:20px 0 -20px 20px;
text-align: left;
display:block;
@include Crimson;
font-size:6.5rem;}
div.cut{
max-width:45%;
width:100%;
min-height: 90%;
padding: 5%;
position: relative;
.text-box{
width:25%;
text-align: left;
line-height: 1.2rem;
color:$gray;
.title{
padding:5% 0;
text-align: center;
display:block;
@include Crimson;
font-size:1.4rem;
border-top: 1px solid $gray;
border-bottom: 1px solid $gray;}
.subtitle{display: block;
padding: 5% 0 0 0;
font-weight:900;
font-size:0.9rem;
line-height: 1.4rem;
}
.text{
font-size:0.8rem;
display: block;
padding:5% 0;
ul{li{font-size:0.6rem;
@include DM;
color:#585858;}}
}
}
.img-box img{width:100%;}}
}
@media screen and (max-width:50rem) {
.container{
display: block;
width:100%;
height:95hv;
div.photo{max-width:100%;}
.number{
margin:0 auto -10px auto;
text-align: center;
@include Crimson;
font-size:3.5rem;}
div.cut{
max-width:100%;
width: 100%;
min-height: 120vh;
padding: 20% 0;
position: relative;
.text-box{
width:20%;
text-align: left;
line-height: 1.2rem;
color:$gray;
.title{
padding:5% 0;
text-align: center;
display:block;
@include Crimson;
font-size:1.4rem;
border-top: 1px solid $gray;
border-bottom: 1px solid $gray;}
.subtitle{display: block;
padding: 5% 0 0 0;
font-weight:900;
font-size:0.9rem;
line-height: 1.4rem;
}
.text{
font-size:0.6rem;
display: block;
padding:5% 0;
width:200px;
ul{li{font-size:0.6rem;
letter-spacing: 0px;}}
}
}
.img-box img{width:100%;}}

}
}


.sub{
display: block;
font-weight:900;
font-size:0.8rem;
line-height: 1.2rem;
width: 90%;
padding: 5% 5%;
height: auto;   
display: inline-flex;
justify-content: center;
align-items: center;
color: #000;
border: 1px solid;
cursor: pointer;
}
@media screen and (max-width:50rem) {
.sub{
display: block;
font-weight:900;
font-size:0.6rem;
line-height: 1.2rem;
width: 200px;
padding: 5% 5%;
height: auto;   
display: inline-flex;
justify-content: center;
align-items: center;
color: #000;
border: 1px solid;
cursor: pointer;
}
}

.yazirusi-right{
display: inline-flex;
margin-left: 10px;
width: 10%;
height: 5px;
position: absolute;
right: -6%;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
-webkit-transform: skew(45deg);
transform: skew(45deg);
top: 20%;
}
@media screen and (max-width:50rem) {
.yazirusi-right{
display: none;}
}
.yazirusi-left{
display: inline-flex;
margin-left: 10px;
width: 10%;
height: 5px;
position: absolute;
left: -10%;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
-webkit-transform: skew(320deg);
transform: skew(320deg);
top: 20%;
}
@media screen and (max-width:50rem) {
.yazirusi-left{
display: none;}
}

.yazirusi-top{
position: absolute;
top: -10%;
left:30%;
  display: inline-flex;
  transform: rotate(0deg);
}
.yazirusi-top::before {
  content: '';
  width: 4px;
  height: 25px;
  border-top: solid 1px;
  border-right: solid 1px;
transform: skewY(120deg);
}
@media screen and (max-width:50rem) {
.yazirusi-top{
display: none;
}
}


@media screen and (max-width:50rem) {
.outer-img-02{width:35% !important;top:2% !important;right:3% !important;}
.outer-img-03{width:30% !important;top:35% !important;left:2% !important;}
.outer-img-04{width:33% !important;top:65% !important;left:63% !important;}
.outer-text-02{top:20% !important;left:3% !important;}
.outer-text-03{top:45% !important;left:38% !important;}
.outer-text-04{top:80% !important;left:2% !important;}

.knit-img-08{width:28% !important;top:2% !important;left:3% !important;}
.knit-img-09{width:40% !important;top:26% !important;right:0% !important;}
.knit-img-10{width:38% !important;top:62% !important;left:3% !important;}
.knit-text-08{top:12% !important;right:40% !important;}
.knit-text-09{top:45% !important;left:3% !important;}
.knit-text-10{top:80% !important;left:40% !important;}

.sweat-img-05{width:32% !important;top:5% !important;left:2% !important;}
.sweat-img-11{width:34% !important;top:34% !important;right:3% !important;}
.sweat-img-07{width:32% !important;top:65% !important;left:3% !important;}
.sweat-text-05{top:13% !important;right:40% !important;}
.sweat-text-11{top:50% !important;left:3% !important;}
.sweat-text-07{top:75% !important;left:40% !important;}
}

/*商品画像*/
.item-container{
display: flex;
flex-wrap: wrap;
width:70%;
margin:5% auto;
.item{
width:27%;
margin:3%;
img{width: 100%;
max-width:600px;
}
.text-container{
font-size:0.8rem;
margin:2% 0;
p{text-align: center;
font-weight: 900;}
a{font-size:0.7rem;
@include DM;
color:#585858;
}
}
}
}
@media screen and (max-width:50rem) {
.item-container{
display: flex;
width: 95%;
margin:20% auto;
.item{
width:46%;
margin:2%;
.text-container{
font-size:0.6rem;
margin:1% 0;
line-height: 1rem;
p{text-align: center;
line-height: 1rem;
font-size:0.7rem;
padding:4% 0 2% 0;}
a{font-size:0.6rem;}
}
}
}
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}




/*ブランドコンセプト*/
.brand-comment{
text-align: center;
background-color:#efeae4;
padding:10% 0;
width:100%;
letter-spacing:3px;
h2 img{max-width:300px;}
h3{padding:10px 0;font-size: 1.2rem;@include Crimson;}
h4{padding:0 0 10px 0;font-size: 1rem;@include Crimson;}
p{
width:40%;
margin:20px auto;
font-size: 0.8rem;
text-align: left;
letter-spacing:1px;
}
}
@media screen and (max-width:30rem) {
.brand-comment{
padding:20% 0;
letter-spacing:3px;
h2 img{max-width:200px;}
h3{padding:5px 0;font-size: 0.8rem;}
h4{padding:0 0 5px 0;font-size: 0.6rem;}
p{
width:80%;
margin:10px auto;
font-size: 0.6rem;
text-align: left;
letter-spacing:1px;
}
}
}
.btn-animation {
display: inline-block;
width: 200px;
text-align: center;
background-color: $gray;
border: 2px solid $gray;
font-size: 16px;
color: $gray;
text-decoration: none;
font-weight: bold;
padding: 10px 24px;
border-radius: 4px;
position: relative;
margin:20px auto 0;
}
@media screen and (max-width:30rem) {
.btn-animation {
font-size: 12px;
}
}
.btn-animation span {
position: relative;
z-index: 1;
}
.btn-animation::before,
.btn-animation::after {
content: "";
display: block;
background-color:#efeae4;
width: 51%;
height: 100%;
position: absolute;
top: 0;
}
.btn-animation::before {
left: 0;
}
.btn-animation::after {
right: 0;
}
.btn-animation:hover:before,
.btn-animation:hover:after {
width: 0;
background-color: #efeae4;
}
.btn-animation:hover {
color: #efeae4;
}

.v_line_fix {
margin:40px auto;
width: 1px;
height: 14px;
background-color: $gray;
}
@media screen and (max-width:30rem) {
.v_line_fix {
margin:20px auto;
height: 10px;
}
}



////////// FOOTER //////////
////////// FOOTER //////////
////////// FOOTER //////////
footer {
clear: both;
padding:3% 0 2%;
font-size:0.6rem;
margin:0;
background-color:$gray;
ul {
display:flex;
padding:0 5%;
flex-wrap:wrap;
justify-content:center;
}
li {
margin:0 10px 0 0;
&:first-child {
margin:0 auto 0 0;
}
a{color:$white;}
}
}
@media screen and (max-width:50rem) {
footer {
margin:0 0 10px 0;
padding:10% 0 4%;
li {
margin:5px 10px;
&:first-child {
margin:auto;
width:100%;
}
}

a {
@include DM;
&:hover {
color:$orange;
}
i{
margin:0 0.25rem 0 0;
}
}
}
}
#footer-logo {
width:160px;
fill:$white;
}
@media screen and (max-width:30rem) {
#footer-logo {
width:160px;
margin:0 auto 24px auto;
display:block;
}
}