@charset "UTF-8";
/* CSS Document */

* {
margin:0;
padding:0;
}

.clearfix:after {
content:"";
clear:both;
display:block;
}

a:link {color:#fff; text-decoration:none;}
a:visited {color:#fff; text-decoration:none;}
a:hover {color:#ef90a2; text-decoration:none;}

img {vertical-align:bottom;}

body {
background:#82817d;
color:#fff;
font-family:"Midashi Go MB1";
margin:0;
padding:0;
}

/*==============================
For Smartphone
==============================*/

@media (max-width:640px) {

header {
background:url("../images/header_image.jpg") no-repeat;
background-size:cover;
background-position: center top;
height:650px;
}

#header_content {
background:rgba(0 ,0, 0,0.2);
height:100%;
text-align:center;
vertical-align:middle;
position:relative;
}

header h1 {
display:inline-block;
position: absolute;
left:0;
top:50%;
transform: translateY(-50%) translateX(0%);
}

header h1 img {width:50%;}

#nav_pc {display:none;}

.sns_icon img {width:20px;}





#works {
margin:50px auto 0;
width:90%;
}

#works h2 {
margin:0 0 20px;
}

#works .intro {
font-family:"Gothic Medium BBB";
font-size:14px;
letter-spacing:0.05em;
line-height:27px;
margin:0 auto;
width:90%;
text-align:justify;
}

#slide {
margin:50px 0 0;
}

#works .swiper-slide {
position:relative;
text-align:center;
}

#works .swiper-slide img {width:100%;}

#works .swiper-slide p {
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
position:absolute;
font-size:14px;
text-align:center;
bottom:0;
width:100%;
padding:30px 0 10px;
}

#works .swiper-pagination {
text-align:center;
width:90%;
padding:10px 0 0;
}

.swiper-pagination-bullet {
margin:0 7px 0 0;
}

.swiper-pagination-bullet:last-child {
margin:0;
}




#instagram {
margin:100px auto 0;
width:90%;
}

#instafeed .instafeed_post {
list-style:none;
float:left;
width:48%;
margin:4% 4% 0 0;
}

#instafeed .instafeed_post:nth-child(2n) {margin:4% 0 0 0;}

#instagram li img {
width:100%;
}

#instagram .more {
margin:20px auto 0;
text-align:center; 
}

#instagram .more a {
display:inline-block;
border:1px #fff solid;
padding:0.5em 3em;
font-size:14px;
line-height:21px;
}

#instafeed .instafeed_image {
margin:0;
width:100%;
height:150px;
object-fit:cover;
}

#instafeed .caption {
font-family:"Gothic Medium BBB";
font-size:12px;
line-height:21px;
margin:10px 0 0;
text-align:justify;
width: 100%;
position: relative;
height: 6.2em;
overflow: hidden;
}

#instafeed .caption::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 3em;
  content: "";
  background: linear-gradient(to bottom, rgba(130,129,125,0) 0%, rgba(130,129,125,1) 50%, rgba(130,129,125,1) 100%);
}

#instafeed .instafeed_image img {
width:100%;
height:100%;
object-fit:cover;
}

#shop {
margin:100px auto 0;
width:90%;
}

#shop ul {
margin:15px 0 0;
}

#shop li {
font-size:14px;
line-height:21px;
list-style:none;
padding:5px 0 0;
}

#shop_image img {
width:100%;
height:300px;
object-fit:cover;
}

footer {
background:#45443e;
margin:100px 0 0;
}

footer li {list-style:none;}

#footer_content {
margin:0 auto;
padding:50px 0;
width:90%;
}

.footer_logo {
text-align:center;
width:100%;
}

.footer_nav {
margin:30px 0 0;
text-align:center;
width:100%;
}

.footer_nav li {
margin:10px 0 0;
}

.footer_sns {
margin:10px 0 0;
text-align:center;
width:100%;
}

.footer_sns li {
display:inline-block;
margin:0 10px 0 0;
}

.footer_sns li:last-child {
margin:0;
}

.footer_logo img {width:35%;}

}

/*==============================
For PC
==============================*/

@media (min-width:641px) {

header {
background:url("../images/header_image.jpg") no-repeat;
background-size:cover;
background-position: center top;
height:700px;
width:100%;
}

#header_content {
margin:0 auto;
padding:50px 0;
width:960px;
}

header h1 {
float:left;
width:180px;
}

header h1 img {width:180px;}

.sns_icon img {width:28px;}

nav {
float:left;
width:780px;
}

#nav_pc {
text-align:right;
}

#nav_pc li {
display:inline-block;
list-style:none;
font-size:20px;
padding:0 30px 0 0;
}

#nav_sp {display:none;}



#works {
margin:100px auto 0;
width:960px;
}

#works h2 {
margin:0 0 20px;
}

#works .intro {
font-family:"Gothic Medium BBB";
font-size:14px;
letter-spacing:0.1em;
line-height:27px;
margin:0 auto;
width:90%;
text-align:center;
}

#works .intro .line {
display:block;
}

#slide {
margin:30px 0 0;
}

#works .swiper-wrapper,
.swiper-container{
margin:0 auto;
width:500px;
}

#works #slide_frame {
background:#21201e;
width:960px;
}

#works .swiper-slide img {width:500px;}

#works .swiper-slide {position:relative;}

#works .swiper-slide p {
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
position:absolute;
font-size:14px;
text-align:center;
bottom:0;
width:100%;
padding:30px 0 10px;
}

#works .swiper-pagination {
text-align:center;
width:960px;
padding:10px 0 0;
}

.swiper-pagination-bullet {
margin:0 7px 0 0;
}

#instagram {
margin:100px auto 0;
width:960px;
}

#instagram h2 {
margin:0 0 20px;
}

#instagram li {
list-style:none;
margin:0 15px 15px 0;
float:left;
}

#instagram li:nth-child(3n) {margin:0 0 15px 0;}

#instagram li img {
width:310px;
}

#instagram .more {
margin:20px auto 0;
text-align:center; 
}

#instagram .more a {
display:inline-block;
border:1px #fff solid;
padding:0.5em 3em;
font-size:14px;
line-height:21px;
}

#instafeed .instafeed_post {
float:left;
margin:0 15px 15px 0;
width:310px;
}

#instafeed .instafeed_post:nth-child(3n) {
margin:0 0 15px 0;
}

#instafeed .instafeed_post:last-child {display:none;}

#instafeed .caption {
font-family:"Gothic Medium BBB";
font-size:12px;
line-height:1.8em;
margin:10px 0 0;
text-align:justify;
  width: 300px;
    position: relative;
    height: 6.2em;
    overflow: hidden;
}

#instafeed .caption::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 3em;
  content: "";
  background: linear-gradient(to bottom, rgba(130,129,125,0) 0%, rgba(130,129,125,1) 50%, rgba(130,129,125,1) 100%);
}

#instafeed div img {
width:300px;
height:300px;
object-fit:cover;
}

#shop {
margin:100px auto 0;
width:960px;
}

#shop_content {
margin:20px 0 0;
}

#shop_image {
float:right;
width:66%;
}

#shop_image li {
list-style:none;
float:left;
width:50%;
}

#shop_image li img {
width:100%;
}

#shop_info {
background:#75746e;
float:left;
height:317px;
width:34%;
}

#shop_info ul {
padding:20px;
}

#shop_info li {
list-style:none;
font-size:14px;
line-height:21px;
padding:10px 0 0;
}




footer {
margin:100px 0 0;
background:#45443e;
width:100%;
}

#footer_content {
margin:0 auto;
padding:100px 0;
width:960px;
}

.footer_nav {
margin:30px 0 0;
width:100%;
text-align:center;
}

.footer_nav li {
display:inline-block;
list-style:none;
margin:0 20px 0 0;
}

.footer_nav li:last-child {margin:0;}

.footer_sns {
margin:30px 0 0;
text-align:center;
width:100%;
}

.footer_sns li {
display:inline-block;
margin:0 20px 0 0;
}

.footer_sns li:last-child {
margin:0;
}

.footer_sns img {
width:25px;
}

.footer_logo {
text-align:center;
width:100%;
}

.footer_logo img {width:110px;}

}