//@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500&display=swap');
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP");
@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Murecho');
@import url("https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css");

* {
padding:0;
margin:0;
outline:none;
font-family: 'Noto Sans JP', sans-serif;
-webkit-appearance:none;
border-radius:0;
}

html,body {
width:100%;
height:100%;
color:#303030;
font-family: 'Noto Sans JP', sans-serif;
font-size:16px;
letter-spacing:1px;
line-height:1.5em;
padding:0;
margin:0;
background:#FFFFFF;
text-align: center;
}


// 全体の読み込みをふわっと //
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
}
}

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


body{overflow-x: hidden;
-webkit-overflow-scrolling: touch;}

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

// Font Awesome 
@mixin ICON {
//font-family:"Font Awesome 5 Free","Font Awesome 5 Brands";
font-family:"Line Awesome Free","Line Awesome Brands";
font-weight:900;
}
// DM+Sans
@mixin DM {
font-family: "DM Sans";
font-weight:600;
}
// Noto
@mixin Noto {
font-family: 'Noto Sans JP', sans-serif;
}
// Murecho
@mixin Murecho {
font-family: "Murecho", sans-serif;
font-weight: 600;
}

// Barlow
@mixin Barlow {
font-family: "Barlow Condensed","sans-serif";
}
// 全体のデザイン //
$white:#ffffff;
$gray:#999999;
$dark-gray:#303030;
$black:#000000;
$light-gray:#cccccc;
$soft-gray:#eeeeee;
$orange:#fa8231;
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;
}
}


h1{display: none;}



// HEADER //
// HEADER //
// HEADER //
#fixed_position_content {
position: fixed;
background: #FFFFFF;
overflow: hidden;
width: 96%;
padding: 10px 2% 0 2%;
z-index: 9999;
box-shadow: rgba(113, 135, 164, 0.129412) 0px 10px 4px -7px;
-webkit-box-shadow: rgba(113, 135, 164, 0.129412) 0px 10px 4px -7px;
-moz-box-shadow: rgba(113, 135, 164, 0.129412) 0px 10px 4px -7px;
filter: alpha(opacity=80);
-moz-opacity: 0.5;
opacity: 0.8; }
#fixed_position_content #header {
text-align: center; }
#fixed_position_content #header img {
max-width: 207px; }

#header-logo {
width:220px;
padding:12px 0;
fill:$black;
}
@media screen and (max-width:70rem) {
#header-logo {
width:160px;
fill:$black;
margin:0 auto 12px auto;
display:block;
}
}




// RIGHT NAVI //

#right-text {
font-size:1.4rem;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: mixed;
z-index: 1000000;
width: 10%;
position: fixed;
display: none; /*最初は非表示に設定*/
top: 10%;
right: 1%;
@include Barlow;
a{@include Barlow;}
}
@media screen and (max-width:30rem) {
#right-text {
top: 10%;
}
}



// KANBAN //
// KANBAN //
// KANBAN //

.kanban-container{
width:100%;
margin:0 auto;
}
@media screen and (max-width:30rem) {
.kanban-container{}
}
.kanban-pc{
width:100%;
margin:0 auto;
display:block;
text-align: center;
img{width:100%;}
p.title{
position: relative;
width:100%;
margin:-30% auto 25%;
@include DM;
font-size:5rem;
letter-spacing: 0.3rem;
color:$white;
	img{width:60%;
	margin: 0 20%;}
span.sub-title{
@include DM;
font-size:1rem;
padding-top:30px;
display: block;
}
}
}
.kanban-sp{display: none;}
@media screen and (max-width:30rem) {
.kanban-sp{
display:block;
text-align: left;
img{max-width:100%;}
p.title{
position: relative;
width:80%;
margin:-80% auto 70%;
@include DM;
font-size:2rem;
letter-spacing: 0.3rem;
line-height: 2.4rem;
color:$white;
span.sub-title{
@include DM;
font-size:0.7rem;
display: block;
}
}
}
.kanban-pc{display: none;}
}


// CONTAINER //
// CONTAINER //
// CONTAINER //
.CONTAINER{
width: 80%;
max-width:1080px;
margin:5% auto;
}
@media screen and (max-width:70rem) {
.CONTAINER{
width: 90%;
margin:12% auto;
}
}

// DAY //
.DAY{
font-size:0.8rem;
font-weight: 500;
text-align: left;
}
@media screen and (max-width:70rem) {
.DAY{font-size:0.7rem;}
}

// h2 //
h2{
margin:20px 0 0;
line-height: 2.2rem;
text-align: left;
@include Noto;
}
@media screen and (max-width:70rem) {
h2{
margin:10px 0 0;
font-size:1rem;
line-height: 1.6rem;
}
}

// h3 //
h3{
margin-top: 60px;
margin-bottom: 20px;
text-align: left;
line-height: 1.7rem;
font-size: 1.2rem;
}
@media screen and (max-width:70rem) {
h3{
margin-top: 40px;
font-size: 1.1rem;
line-height: 1.6rem;
}
}
.TEXT{
margin-top:10%;
text-align: center;
line-height: 1.6rem;
font-size: 0.9rem;
h3{font-size: 1rem;margin-top:0;margin-bottom: 10px;}
}
@media screen and (max-width:70rem) {
.TEXT{
margin-top: 40px;
padding:0 1%;
line-height: 1.8rem;
font-size: 0.8rem;

}
}

// LINE //
.LINE{
height: 1px;
border-bottom: 1px solid $black;
margin:6% auto 0;
}
@media screen and (max-width:70rem) {
.LINE{
margin:10% auto 0;
}
}


// NAVI //
// NAVI //
// NAVI //
.NAVI-CONTAINER{padding:10% 0;}
.NAVI {margin:1px auto;
a{display: flex;padding:10% 10% 10% 5%;background-color: rgba(0, 0, 0, 0.3);}}
.NAVI-TITLE{
	@include Barlow;
	font-size: 4rem;
	padding: 10px 10% 0;
    width: 45%;
color:$white;}
.NAVI-TEXT{
	font-size: 0.9rem;
	text-align: left;
color:$white;}

h2{	@include Barlow;
	text-align: center;
	font-size: 4rem;
	padding:10% 0 0 0;}

@media screen and (max-width:70rem) {
.NAVI {a{display: block;padding:8% 5%;}}
.NAVI-TEXT{
	font-size: 0.7rem;
	line-height: 1rem;
	text-align: left;}
.NAVI-TITLE{
	text-align: left;
	font-size: 3rem;
	padding: 10px 0 5%;
    width: 90%;}
h2{	@include Barlow;
	text-align: center;
	font-size: 3rem;
	padding:25% 0 20%;}
}





////////////SECTION-BORDER///////////
////////////SECTION-BORDER///////////
////////////SECTION-BORDER///////////
.SECTION-BORDER-BOX {margin: 15% auto 0;}
.SECTION-BORDER{
width: 80%;
max-width: 1080px;
margin: 10% auto 0;
position: relative;
text-align: center;
font-size: 2.6rem;
line-height:6rem;
letter-spacing:0.6rem;
}
@media screen and (max-width:30rem) {
.SECTION-BORDER{
width: 90%;
line-height:4rem;
font-size:1.6rem;
letter-spacing:0.4rem;
}
}
.SECTION-BORDER-active:before{
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0;
border-bottom: solid 1px #ccc;
transform: translateX(-50%);
animation: border_anim 0.5s linear forwards;
}
@keyframes border_anim {
0%{
width: 0%;
}
100%{
width: 100%;
}
}




// 画像（PC左）
// 画像（PC左）
// 画像（PC左）
.IMG-CONTAINER-LEFT{
width: 100%;
background-color: $white;
.PHOTO{width:70%;
margin:6% 30% 6% 0;
position: relative;
img{width:100%;}
}
}
@media screen and (max-width:30rem) {
.IMG-CONTAINER-LEFT{
.PHOTO{width:100%;
margin:0 auto 15% auto;
img{width:100%;}
}
}
}

// 画像（PC右）
// 画像（PC右）
// 画像（PC右）
.IMG-CONTAINER-RIGHT{
width: 100%;
background-color: $white;
.PHOTO{width:70%;
margin:6% 0 6% 30%;
position: relative;
img{width:100%;}
}
}
@media screen and (max-width:30rem) {
.IMG-CONTAINER-RIGHT{
.PHOTO{width:100%;
margin:0 auto 15% auto;
img{width:100%;}
}
}
}

// 画像（PC中央横長）
// 画像（PC中央横長）
// 画像（PC中央横長）
.IMG-CONTAINER-CENTER-YOKO{
width: 100%;
background-color: $white;
.PHOTO{width:70%;
margin:5% auto;
position: relative;
img{width:100%;}
}
}
@media screen and (max-width:30rem) {
.IMG-CONTAINER-CENTER-YOKO{
.PHOTO{width:100%;
margin:0 auto 15% auto;
img{width:100%;}
}
}
}

.animation-top,.animation-bottom,.animation-right,.animation-left{
opacity: 0;
overflow: hidden;
will-change: opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.animation-t,.animation-b,.animation-r,.animation-l{
opacity: 1;
display: block;
overflow: hidden;
position: relative;
will-change: opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
img{perspective: 1000;
}
}

.animation-t:before,.animation-b:before,.animation-r:before,.animation-l:before {
background: $white;
bottom: 0;
content: '';
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}

.animation-t:before {animation: animation-t 1s cubic-bezier(.4, 0, .2, 1) forwards;}
@keyframes animation-t {100% {transform: translateY(100%);perspective: 1000;}}
.animation-b:before {animation: animation-b 1s cubic-bezier(.4, 0, .2, 1) forwards;}
@keyframes animation-b {100% {transform: translateY(-100%);perspective: 1000;}}

.animation-r:before {animation: animation-r 1s cubic-bezier(.4, 0, .2, 1) forwards;}
@keyframes animation-r {100% {transform: translateX(100%);perspective: 1000;}}
.animation-l:before {animation: animation-l 1s cubic-bezier(.4, 0, .2, 1) forwards;}
@keyframes animation-l {100% {transform: translateX(-100%);perspective: 1000;}}






// タブで切り替える方法
.TAB-CONTAINER{
position: relative;
padding:5% 0;
height: 900px;
overflow-y: hidden;
background-color: $light-gray;}

.tab-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tab-links li {
  display: inline-block;
  margin-right: -4px;
}
.tab-links a {
  padding: 9px 15px;
  display:block;
  border-radius: 3px 3px 0 0;
  font-size: 3rem;
	line-height: 2rem;
  @include Barlow;
  color: $gray;
  transition: all 0.2s ease;
}
.tab-links a:hover {
text-decoration: underline;
}
.tab-links .active a {
  color: $black;
text-decoration: underline;
}
.tab {
  display:block;
  
}
.tab.active {
  display: block;
  overflow-y: hidden;
}

.tab.active .activeslick{display: block;}

@media screen and (max-width:50rem) {
.TAB-CONTAINER{
height: 700px;
padding:10% 0;}
.tab-links a {
  padding: 9px 8px;
  display: inline-block;
  border-radius: 3px 3px 0 0;
  font-size: 1.3rem;
}
.big{height: 750px;}
}


.tabs{margin:0 auto;}

// LIST //
.LIST-CONTAINER{
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
	align-items: center;
white-space:nowrap;
padding: 0 0 100px 0;
	.LIST{
	min-width: 0;
	width:300px;
	margin: 0 1%;
	.NAME{
	padding:1% 0;
	text-align: left;
	@include Barlow;
	font-size: 1.2rem;
	clear: both;
	span{
	font-size:0.9rem;
	@include Murecho;}
	i{
	float: left;
	display: block;
	@include Barlow;
	font-size: 0.8rem;
	font-style: normal;
	line-height: 2rem;
	width:25%;}
		.black{color:#333333;}
		.navy{color:#404f63;}
	}
	}}
@media screen and (max-width:50rem) {
.LIST-CONTAINER{
	display: flex;
	flex-wrap:nowrap;
	overflow-x: scroll;
	 justify-content: flex-start;
padding: 0 0 20px 0;
	.LIST{
	min-width: 220px;
    max-width: 220px;
    margin: 0 4%;
    width: 100%;
		.NAME{
	line-height: 1rem;
	font-size: 0.9rem;
			span{font-size: 0.7rem;}
			i{	line-height: 1rem;font-size: 0.6rem;width:25%;}
		}
	}
	}
	.one{justify-content: center;}
}

// IMG 複数くるくる //
// IMG 複数くるくる //
// IMG 複数くるくる //
.single-item {
max-width: 100%;
width:100%;
height:auto;
margin: 60px auto 0;
}
.single-item img {
width: 100%;
height: auto;
}
.slick-prev:before,
.slick-next:before {display:  none;
}
.slick-dots li button:before {
font-size: 28px;
}

@media screen and (max-width:50rem) {
.single-item {
max-width: 100%;
height:50%;
margin:40px auto 0;
}
.slick-dots li {margin:0;}
}


// BUY
a.buy {
opacity:1;
display: block;
width:100%;
max-width:60%;
@include Barlow;
justify-content: space-evenly;
align-items: center;
text-align: center;
text-decoration: none;
margin:5% auto 10%;
padding: 6% 20%;
size:2rem;
font-weight: bold;
background: $dark-gray;
color: $white;
border-radius: 100vh;
position: relative;
transition: 0.5s;
i{padding-right:5%;}
}
@media screen and (max-width:30rem) {
a.buy {
size:1.4rem;
max-width: 94%;
padding: 5% 0;
margin: 3% auto 36%;
}
}









// FOOTER //
// FOOTER //
// FOOTER //
footer {
z-index: 9999999;
font-size:0.6rem;
margin:0;
padding:20% 2% 2%;
background-color: $light-gray;
ul {
display:flex;
flex-wrap:wrap;
justify-content:center;
}
li {
margin:0 10px 0 0;
&:first-child {
margin:0 auto 0 0;
}
}
a {
@include DM;
color:$black;
&:hover {
color:$orange;
}
i {
margin:0 0.25rem 0 0;
}
}
}
@media screen and (max-width:70rem) {
footer {
padding: 20% 0 10% 0;
margin:0;
li {
margin:5px 10px;
&:first-child {
margin:auto;
width:100%;
}
}
}
}

#footer-logo {
width:160px;
fill:$black;
}
@media screen and (max-width:70rem) {
#footer-logo {
width:160px;
fill:$black;
margin:0 auto 24px auto;
display:block;
}
}