@charset "utf-8";

/* 全ページ共通　*/

body {
  font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif /*"ヒラギノ角ゴ", "hiragino", sans-serif*/;  
  font-size:15px;
  color: #5e5e5e;
  line-height:1.9;
  letter-spacing:.5px;
}

a {
  text-decoration: none;
}

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


header {
  background-color: black;
}

.header_content {
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  width:100%;
  height:335px;
}

h1 a img{
  display:block;
  margin: 20px 0 20px 20px;
  width:80px;
  float:left;
}

nav ul{
  display:flex;
  justify-content: flex-end;
  margin-right:20px;
}

nav li {
  font-size:14px;
  font-weight:bolder;
  margin: 55px 25px 0 0;
}

nav li a{
  color: #ffffff;
}

nav li a:hover {
  color:#dd1c23;
}

nav li a.active {
  color:#e31019;
}

nav li.shop a {
  display: block;
  width:84px;
  border:1px solid #ffffff;
  border-radius: 3px;
  text-align:center;
  line-height:3;
  margin: -10px -25px 0 0;
}

nav li.shop a:hover {
  color:#000000;
  background-color:#ffffff;
}

.main {
  width:956px;
  margin:100px auto;
}



.footer_sns {
 background-color:#e8e8e8;
 padding: 20px 0;
}

.sns_icon {
  width:90px;
  margin:0 auto;
  padding: 16px;
  display:flex;
  justify-content:space-around;
}

.sns_icon a {
  display:inline-block;
  height:0;
  overflow: hidden;
  Padding-top:20px;
}

.sns_icon a.facebook{
  background-image: url("../images/facebook_icon_black.png");
  background-repeat:no-repeat;
  background-position: center center;
  transition:0.2s;
}

.sns_icon a.youtube{
  background-image: url("../images/youtube_icon_black.png");
  background-repeat:no-repeat;
  background-position:center center;
  transition:0.2s;
}

.sns_icon a.instagram{
  background-image: url("../images/instagram_icon_black.png");
  background-repeat:no-repeat;
  background-position:center center;
  transition:0.2s;
}

.sns_icon:hover a.facebook{
  background-image: url("../images/facebook_icon_grey.png");
  transition:0.2s;
}

.sns_icon a.facebook:hover {
  background-image: url("../images/facebook_icon_black.png");	
  transition:0.2s;
}

.sns_icon:hover a.youtube{
  background-image: url("../images/youtube_icon_grey.png");
  transition:0.2s;
}

.sns_icon a.youtube:hover {
  background-image: url("../images/youtube_icon_black.png");
  transition:0.2s;
}

.sns_icon:hover a.instagram{
  background-image: url("../images/instagram_icon_grey.png");
  transition:0.2s;
}

.sns_icon a.instagram:hover {
  background-image: url("../images/instagram_icon_black.png");	
  transition:0.2s;
}

footer p{
 font-size:11.2px;
 color:#ececec;
 background-color:#3d3d3d;
 padding:68px 0;
 text-align:center;
 letter-spacing:2.1px;
}


/* 全ページ共通終わり　*/

/* トップページ　*/

#index .header_content {
  background-image:url(../images/index/index_main_vidual.jpg);
  height:587px;
}

#index h2 img{
  display:block;
  width:100%;
  max-width:100%;
  margin:0 0 30px;
  text-align:center;
}

#index .content img.image{
  width:100%;
  margin:0 auto 25px;	
}

#index .content .center {
  text-align:center;
}

#index .content .button {
  background-color:#e31019;
  color:#fff;
  border:1px solid #e31019;
  border-radius:3px;
  box-shadow: 0 2px 0 0 #bd0d15;
  line-height:0.9;
  font-size:18px;
  letter-spacing:.92px;
  padding:13px 25px;  
  margin:0 auto;
  margin-bottom:100px;
}

#index .content .afterslide {
  margin-top: 35px;
}

#index .content a.button {
  display:inline-block;
  text-align:center;
  color:#fff;
}

#aspslide {
  position: relative;      
  width: 956px;
  height: 379px;
  overflow:hidden;
  padding:0!important;
}

.asnakami{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding:0!important;
}   

#asnakami1{
  -moz-animation: fadeinout 30s 0s infinite;
  -webkit-animation: fadeinout 30s 0s infinite;
  -o-animation: fadeinout 30s 0s infinite;
  animation: fadeinout 30s 0s infinite;
}

#asnakami2{
  -moz-animation: fadeinout 30s 5s infinite;
  -webkit-animation: fadeinout 30s 5s infinite;
  -o-animation: fadeinout 30s 5s infinite;
  animation: fadeinout 30s 5s infinite;
}

#asnakami3{
  -moz-animation: fadeinout 30s 10s infinite;
  -webkit-animation: fadeinout 30s 10s infinite;
  -o-animation: fadeinout 30s 10s infinite;
  animation: fadeinout 30s 10s infinite;
}

#asnakami4{
  -moz-animation: fadeinout 30s 15s infinite;
  -webkit-animation: fadeinout 30s 15s infinite;
  -o-animation: fadeinout 30s 15s infinite;
  animation: fadeinout 30s 15s infinite;
}

#asnakami5{
  -moz-animation: fadeinout 30s 20s infinite;
  -webkit-animation: fadeinout 30s 20s infinite;
  -o-animation: fadeinout 30s 20s infinite;
  animation: fadeinout 30s 20s infinite;
}

#asnakami6{
  -moz-animation: fadeinout 30s 25s infinite;
  -webkit-animation: fadeinout 30s 25s infinite;
  -o-animation: fadeinout 30s 25s infinite;
  animation: fadeinout 30s 25s infinite;
}

@-moz-keyframes fadeinout {
  0% { left:0%; opacity:0;}
  5% { left:0%;opacity:1; }
  20% { left:0%; opacity:1;}
  25% { left:0%;opacity:0; }
  26% { opacity:0;left:100%; }
  99.99% { opacity:0;left:100%; }
  100% { opacity:0;left:0%; }
}

@-webkit-keyframes fadeinout {
  0% { left:0%; opacity:0;}
  5% { left:0%;opacity:1; }
  20% { left:0%; opacity:1;}
  25% { left:0%;opacity:0; }
  26% { opacity:0;left:100%; }
  99.99% { opacity:0;left:100%; }
  100% { opacity:0;left:0%; }
}

@-o-keyframes fadeinout {
  0% { left:0%; opacity:0;}
  5% { left:0%;opacity:1; }
  20% { left:0%; opacity:1;}
  25% { left:0%;opacity:0; }
  26% { opacity:0;left:100%; }
  99.99% { opacity:0;left:100%; }
  100% { opacity:0;left:0%; }
}

@keyframes fadeinout {
  0% { left:0%; opacity:0;}
  5% { left:0%;opacity:1; }
  20% { left:0%; opacity:1;}
  25% { left:0%;opacity:0; }
  26% { opacity:0;left:100%; }
  99.99% { opacity:0;left:100%; }
  100% { opacity:0;left:0%; }
}

#index .flex {
  display:flex;
  justify-content:space-between;
}

#index .flexbox {
  width:296px;
  margin-bottom:80px;
}

#index .flexbox .photo {
  margin-bottom:27px; 
}

#index .flexbox .capture {
  height:33px;
  margin-bottom:7px; 
}

#index .flexbox a{
  color:#DD1C23;
}

/* トップページ終わり　*/

/* Create　*/

#create .header_content {
  background-image:url(../images/create/create_header.jpg);
}

#create h2 img{
  display:block;
  width:100%;
  max-width:100%;
  margin:0 0 110px;
  text-align:center;
}

.video_flame {
  padding-bottom:35px;
}

.play_video {
  width:955px;
   height:537px;
  position: relative;
}

.button2 {
  position: absolute;
  z-index: 2;
  width: 2.5%;
  top: 50%;
  left: 50%;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.button1 {
  position: relative;
  z-index: 1;
  width:956px;
    height:537px;
}

.button1:hover {
  cursor:pointer;
}

.box {
  margin-bottom:60px;
}

#create h3 img{
  display:block;
  width:100%;
  max-width:100%;
  margin: 0 0 30px;
  text-align:center;
}

/* Create終わり　*/


/* Play　*/

#play .header_content {
  background-image:url(../images/play/play_header.jpg);
}

#play h2 img{
  display:block;
  width:100%;
  max-width:100%;
  margin:0 0 110px;
  text-align:center;
}

.gallery_asset li {
  float:left;
  margin: 0 20px 20px 0;
}

.gallery_asset li:nth-child(4n) {
  margin: 0 0 20px 0;
}

.open {
  cursor: pointer;
}

.open img{
  display:block;
  width:224px;
  height: 224px;
  overflow: hidden;
}

.video {
  display: block;
  width: 224px;
  height: 224px;
}

.open .position {
  width: 100%;
  position: relative;
}

.open .position .under_play_video {
  z-index: 1;
}

.open .position .play_video {
  position: absolute; 
  z-index: 2;
  width: 10%;
  height: auto;
  top:50%;
  left: 50%;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

#mask, #mask2 {
  background: rgba(255, 255, 255, 0.9);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 100%;
}

#mask.hidden, #mask2.hidden{
  display: none;
}

.modal {
  z-index: 2;
}

.modal .close {
  cursor: pointer;
}

.close_icon {
  display: inline-block;
  width: 21px;
  height: 21px;
  position: absolute;
  top: 0;
  right: -5%;
  cursor: pointer;
}

.close_icon span::before,
.close_icon span::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84%;
  height: 10%;
  margin: -8% 0 0 -42%;
  background: rgba(204, 204, 204,.9);
  Z-index:3;
}

.close_icon span::before {
  transform: rotate(-45deg);
}

.close_icon span::after {
  transform: rotate(45deg);
}

#modal1 .image {
  width:640px;
  height:640px;
  margin: 0 auto;
  position: fixed; 
  top: 50%;
  left: 50%;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
  z-index: 3;
}

#modal1 .modal figure {
  position: relative;
  width:640px;
  height:640px;
}

#modal1 .modal figure img{
  width:640px;
  height: 640px;
  overflow: hidden;
  z-index:4;
}

#play #modal2 .image {
  width:860px;
  height:860px;
  margin: 0 auto;
  position: fixed; 
  top: 50%;
  left: 50%;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
  z-index: 3;
}

#modal2 .modal figure {
  position: relative;
  width:860px;
  height:860px;
}

#modal2 .modal figure img{
  width:860px;
  height: 860px;
  overflow: hidden;
  z-index:4;
}

.modal figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5;
  Width:100%;
  background: rgba(0,0,0,.6);
  opacity:0;
  color:#fff;
  line-height: 1.3;
}

.modal figure:hover figcaption {
  opacity:1;
}

.modal Figcaption p {
  padding:23px 20px;
}

.modal.hidden {
  transform: translate(0, -10000px);
}

.gallery_insta {
  margin: 30px 0;
}

.gallery_insta li {
  float:left;
  margin: 0 20px 20px 0;
}

.gallery_insta li:nth-child(4n) {
  margin: 0 0 20px 0;
}

#play .link {
  margin-bottom: 80px;
}

#play .link img {
  float: left;
}

#play .link .award {
  width:224px;
  margin-right: 264px;
}

#play .button {
  background-color:#e31019;
  color:#fff;
  border:1px solid #e31019;
  border-radius:3px;
  box-shadow: 0 2px 0 0 #bd0d15;
  line-height:0.9;
  font-size:18px;
  letter-spacing:.92px;
  padding:13px 25px;  
  margin:0 auto;
  margin-bottom:100px;
}

#play a.button {
  display:inline-block;
  text-align:center;
  color:#fff;
}

/* Play終わり　*/

/* About　*/

#about .header_content {
  background-image:url(../images/about/about_header.jpg);
}

#about h2 img{
  display:block;
  width:100%;
  max-width:100%;
  margin:0 0 110px;
  text-align:center;
}

.text_area {
  margin: 30px 0;
}

.one_column img {
  width:956px;
}

.two_column_inner {
  width:461px;
  float:left;
}

.two_column img{
  width:100%;
}

.float_float {
  margin-top: 30px;
  width:461px;
  float: right;
}

.two_column .link img{
  width:215px;
  margin-left: 30px;
}

.latter {
  margin: 0;
  float: right;
}

.float_float .latter{
  float: none;
}

#about .text_area a {
  color:#DD1C23;
}

#about .text_area .bold {
  font-weight:600;
}

.one_column img.button2 {
  width: 2.5%;	
}

#about .content {
  padding-bottom: 60px;
}

#about .video_flame {
  padding-bottom:0;
}

/* About終わり　*/

/* contact　*/

#contact .header_content {
  background-image:url(../images/contact/contact_header.jpg);
}

/* #contact .main {
  margin: 96px auto;
}　*/

#contact h2 img{
  width: 100px;
}

#contact .content .container {
  padding: 30px 0;
}

#contact h3 {
  line-height: 2.5;
  font-weight: 600;
  border-bottom: 1px solid #5e5e5e ;
}

#contact .content p {
  margin: 15px;
  line-height: 2.8;
}

#contact .content strong {
  display: block;
  margin: 15px;
}

#contact .content a {
  color:#dd1c23;
}

#contact .content form {
  margin: 40px auto 0;
}

#contact .content .form {
  margin:10px 0;
}

#contact .content label {
  display: inline-block;
  margin: 0 50px;
  width: 200px;
}

#contact .content textarea{
  vertical-align: top;
}

#contact .content .otoiawase p{
  display: inline-block;
  margin: 0 50px;
  width: 200px;
}

#contact .content .otoiawase label{
  display: inline-block;
  margin: 0 10px 0 0;
  width: auto;
}

#contact .content .submit_conditions {
  margin: 50px 0 15px;
}

#contact .content .submit {
  text-align: center;
}

#contact .content .after_filling label {
  display: block;
  font-size: 12px;
}

#contact .content input.submit_button {
  display: inline-block;
  line-height: 2;
  padding: 0px 10px;
  font-size: 25px;
}

#contact .content .inquiry span:after {
  content:" *";
  color:#dd1c23;
}

/* Contact終わり　*/

/* Shop　*/

#shop .header_content {
  background-image:url(../images/shop/shop_header.jpg);
  height:587px;
  background-position:center center;
}

#shop nav li.shop a{
  display: block;
  width:84px;
  border:1px solid #ffffff;
  border-radius: 3px;
  text-align:center;
  line-height:3;
  margin: -10px -25px 0 0;
  color:#000000;
  background-color:#ffffff;
}

#shop .main {
  width:1020px;
/*  margin:100px auto;　*/
}

#shop .main img {
  vertical-align:top;
}

#shop section.overview {
  margin-bottom:80px;
}

#shop section {
  margin-bottom:100px;
  clear:both;
}

#shop h3 {
  font-size:24px;
  font-weight:boler;
  margin-bottom:30px;
}

#shop .color_line h3 {
  margin-bottom:0px;
}

#shop .overview {
  float:left;
}

#shop .overview img {
  margin:0 30px;	
}

#shop .overview .logo {
  width:80px;
}
	
#shop .overview p{
  font-size:18px;
  display:inline-block;
  vertical-align:middle;
  padding:120px 0 120px 60px;
}

#shop section.color_line img {
  width:200px;
  margin:0;
}

#shop section.color_line figure {
  display:inline-block;
  width:200px;
  margin:0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

#shop section.color_line figure figcaption {
  text-align:center;
}

#shop section.color_line figure figcaption span {
  padding-left:10px;
  color:#dd1c23;
}

#shop section.color_line{
  float:left;
}

#shop .shop_link{
  display:flex;
  justify-content:space-between;
}


/* Shop終わり　*/

.insta{
float: left;
padding:0 15px;
width:45%;
}

.enbed {
	width: 100%;
	margin: 0 auto;
	padding-top: 50px;
	overflow: hidden;
}

.title_shoplist{
text-align:center;
margin:0 auto;
background-color:#e31019;
margin-top:50px;
border-radius: 3px;
box-shadow: 0 2px 0 0 #bd0d15;
line-height: 0.9;
font-size: 18px;
letter-spacing: .92px;
padding: 13px 25px;

}
.title_shoplist h3{
font-weight:bold;
color:white;

}
.shoplist{
width:100%;
margin:0 auto;
text-align:center;
}

.shoplist_local{
display:inline-block;
margin:0 auto;
padding:20px 10px;
width:380px;
vertical-align:top;
}
.shoplist_local ul{
float:left;
text-align:left;
vertical-align:top;
}
.shoplist_local ul li{
vertical-align:top;
}