//@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");
@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://fonts.googleapis.com/css2?family=DM+Sans:wght@700&display=swap');
@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";
-webkit-appearance:none;
border-radius:0;
}

html,body {
width:100%;
height:100%;
color:#303030;
font-family:"Noto Sans JP";
font-size:16px;
letter-spacing:1px;
line-height:1.5em;
padding:0;
margin:0;
background:#eae9e5;
text-align: center;
word-break: break-all;

}



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

body{
-webkit-animation: fadeIn 1.5s ease 0s 1 normal;
animation: fadeIn 1.5s ease 0s 1 normal;
overflow-x: hidden;
}


ul {
list-style:none;
padding: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
}
}
// 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;
}

// Noto Sans JP
@mixin SANS {
font-family:"Noto Sans JP";
font-weight:100;
}

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

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


// 全体のデザイン
$white:#ffffff;
$gray:#999999;
$black:#000000;
$dark-gray:#303030;
$light-gray:#cccccc;
$soft-gray:#eeeeee;
$orange:#fa8231;
$yellow:#BAAB28;

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



////////// KANBAN //////////
////////// KANBAN //////////
////////// KANBAN //////////
.slider{
position: relative;
width:100vw;
margin: 0 auto;
}
.slider img{
min-height: 100hv;
width: 100%;
}
h1{
width:30%;
position: absolute;
top:30%;
right:35%;
text-align: center;
img{width:100%;}
}
.comment{
font-size:0.8rem;
color:$black;
padding:10% 0 15%;
span{
@include DM;
display: block;
font-size:1.4rem;
font-weight: 400;
padding:2%;
}
p{
@include DM;
font-weight: 200;
}
}
.endcomment{
font-size:0.8rem;
color:$black;
width:60%;
margin:-5% auto 10%;
text-align: center;
p{
@include DM;
font-weight:normal;
}
}
@media screen and (max-width:50rem) {
h1{
width:70%;
bottom:5%;
right:15%;
}
.comment{
font-size:0.7rem;
color:$black;
text-align: left;
padding:20% 5% 0;
span{
@include DM;
display: block;
font-size:1rem;
font-weight: 200;
padding:4% 0;
}
}
.endcomment{
font-size:0.7rem;
color:$black;
width:90%;
margin:20% auto 15%;
text-align: center;
}
}





////////// MAIN //////////
////////// MAIN //////////
////////// MAIN //////////
.container{
position: relative;
display: flex;
margin:0 auto 20%;
flex-wrap: wrap;
.main-photo{
width:60%;
position: relative;
img{width:100%;}
}
.sub-photo{
position: sticky;
position: -webkit-sticky;
top:0;
width: 30%;
height: 80vh;
text-align: left;
padding:20vh 0 0 10%;
img{width:60%;}
h2{	width:50%;
position: absolute;
top:0;
left:-20%;
img{width:100%;}
}
h2.left{
right:0%;
left:auto;
}
}
}
@media screen and (max-width:50rem) {
.container{
display: block;
margin:30% auto 0;
.main-photo{width:95%;}
.sub-photo{
top:0;
width: 70%;
height: auto;
text-align: right;
padding:5% 0 0 30%;
img{width:100%;}
h2{	width:40%;
position: absolute;
top:-8%;
left:2%;
img{width:100%;}
}
h2.left{
right:0%;
left:auto;
}
}
}
}
.item{
padding:1rem 0 0 0;
text-align: left;
font-size: 0.6rem;
li{margin: 0.25rem 0;
color:#303030;
span.brand{
}
span.buy{
@include DM;
background-color: $dark-gray;
color:$white;
padding:3px 5px;
}
}
}
@media screen and (max-width:50rem) {
.item{
font-size: 0.6rem;
li{
span.brand{
letter-spacing: 1px;
}
span.buy{
padding:2px 3px;
}
}
}
}






////////// SUB //////////
////////// SUB //////////
////////// SUB //////////
.sub-container{
margin:20% auto;
.sub-main{
width:50%;
margin: 0 auto;
position: relative;
img{width:100%;}
.tategaki-container{
position: absolute;
top:-10%;
right:-10%;
font-size:1.6rem;
width:1rem;
.line{display: block;
margin:1rem 10px;
width: 1px;
height: 100px;
background-color: $black;}
p.tategaki{
letter-spacing: 6px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
}
}
.sub{
width:100%;
.big{margin:10% 15%;
width:70%;
position: relative;
h3{	width:30%;
position: absolute;
top:-5%;
right:-10%;
z-index: 999;
img{width:100%;}
}
}
.left{margin:10% 5% 0 45%;
width:50%;
position: relative;
h3{	width:30%;
position: absolute;
top:-5%;
right:-10%;
z-index: 999;
img{width:100%;}
}}
.right{margin:10% 45% 0 5%;
width:50%;
position: relative;
h3{	width:30%;
position: absolute;
top:-5%;
left:-10%;
z-index: 999;
img{width:100%;}
}}
.mini-left{margin:10% 50% 0 20%;
width:35%;}
.mini-right{margin:-10% 20% 0 50%;
width:35%;}
img{width:100%;}
p.yokogaki{
font-weight: 200;
line-height: 1.4rem;
font-size:0.9rem;
text-align: left;
}

}
}
@media screen and (max-width:50rem) {
.sub-container{
margin:20% auto 0;
.sub-main{
width:85%;
margin:0 10% 0 5%;
.tategaki-container{
top:-8%;
right:-5%;
font-size:1rem;
width:1rem;
.line{
height: 20px;}
p.tategaki{
letter-spacing: 3px;
}
}
}
.sub{
width:100%;
.big{margin:10% 5%;
width:90%;
position: relative;
h3{	width:30%;
position: absolute;
top:-5%;
right:-2%;
z-index: 999;
img{width:100%;}
}
}
.left{margin:10% 35% 0 5%;
width:60%;
position: relative;
h3{	width:50%;
position: absolute;
top:-5%;
right:-30%;
z-index: 999;
img{width:100%;}
}}
.right{margin:10% 5% 0 35%;
width:60%;
position: relative;
h3{	width:50%;
position: absolute;
top:-5%;
left:-10%;
z-index: 999;
img{width:100%;}
}}
.mini-left{margin:10% 45% 0 5%;
width:50%;}
.mini-right{margin:-10% 5% 0 45%;
width:50%;}
img{width:100%;}
p.yokogaki{
font-weight: 200;
line-height: 0.9rem;
font-size:0.6rem;
text-align: left;
}
}
}
}






////////// 撮影協力アイテムボックス
////////// 撮影協力アイテムボックス
////////// 撮影協力アイテムボックス
.cooperation{
background:$soft-gray;
padding:6rem 0 8rem 0;
margin:2rem 0;
}
h3{
font-size: 0.8rem;
padding:1rem 0;
}
.cooperation_layout{
display: flex;
max-width: 35%;
margin:0 auto;
overflow: hidden;
padding:2% 0 0 0;
.cooperation_image{
width: 50%;
img{
width:100%;
}
}
.cooperation_article{
padding: 2% 0 0 4%;
margin: 0;
max-width: 46%;
text-align: left;
p{
font-size: 0.6rem;
padding:1rem 0 0 0;
line-height: 0.9rem;
span{
display:block;
padding:1rem 0 0 0;
font-weight: 900;
font-size:0.9rem;
}
}
}
}
@media screen and (max-width:50rem) {
.cooperation{
background:$soft-gray;
padding:10% 0 15%;
margin:20% 0 10%;
}
.cooperation_layout{
display: flex;
max-width: 80%;
margin:0 auto;
overflow: hidden;
padding:2% 0 0 0;
.cooperation_image{
width: 40%;
img{
width:100%;
}
}
.cooperation_article{
padding: 2% 0 0 4%;
margin: 0;
max-width: 56%;
text-align: left;
p{
font-size: 0.6rem;
padding:0;
line-height: 0.9rem;
span{
display:block;
padding:1rem 0 0 0;
font-weight: 900;
font-size:0.8rem;
}
}
}
}
}






////////// FOOTER //////////
////////// FOOTER //////////
////////// FOOTER //////////
footer {
clear: both;
padding:10% 0 2% 0;
font-size:0.6rem;
margin:0;
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;
}
}
@media screen and (max-width:30rem) {
footer {
margin:200px 0 10px 0;
}
li {
margin:5px 10px;
&:first-child {
margin:auto;
width:100%;
}
}
}
a {
@include DM;
color:$gray;
&:hover {
color:$orange;
}
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;
}
}