/* // フェードイン前 */
.js-fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

/* // フェードイン後 */
.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
.designer{
        overflow: hidden;
}
.slidein{
	/* 装飾に関わるスタイルは省略 */
	margin: 50px auto;
	transition: 1s cubic-bezier(0.75, 0, 0.25, 1);
}
.designerarea{
	transform: translateX(calc(-50vw - 50%));
}
.shoparea{
	transform: translateX(calc(50vw + 50%));
}
.show{
	transform: translateX(0);
}
.main{
    margin: 0 auto;
}

/* ビデオ装飾 */

.video-play-button {
    position: absolute;
    z-index: 10;
    top: 42%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: content-box;
    display: block;
    width: 32px;
    height: 44px;
    /* background: #fa183d; */
    border-radius: 50%;
    padding: 18px 20px 18px 28px;
  }
  
  .video-play-button:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    background: #ba1f24;
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite;
  }
  
  .video-play-button:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    background: #fa183d;
    border-radius: 50%;
    transition: all 200ms;
  }
  
  .video-play-button:hover:after {
    background-color: darken(#fa183d, 10%);
  }
  
  .video-play-button img {
    position: relative;
    z-index: 3;
    max-width: 100%;
    width: auto;
    height: auto;
  }
  
  .video-play-button span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 32px solid #fff;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
  }
  
  @keyframes pulse-border {
    0% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
      opacity: 1;
    }
    100% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
      opacity: 0;
    }
  }
  
  
  
  .video-overlay {
    position: fixed;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.80);
    opacity: 0;
    transition: all ease 500ms;
  }
  
  .video-overlay.open {
    position: fixed;
    z-index: 1000;
    opacity: 1;
  }
  
  .video-overlay-close {
    position: absolute;
    z-index: 1000;
    top: 15px;
    right: 20px;
    font-size: 36px;
    line-height: 1;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: all 200ms;
  }
  
  .video-overlay-close:hover {
    color: #fa183d;
  }
  
  .video-overlay iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    /* width: 90%; */
    /* height: auto; */
    box-shadow: 0 0 15px rgba(0,0,0,0.75);
  }
.video {
    width: 100%;
    position: relative;
    padding-top: 56.25%;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ロゴ流れる */
.bbs{
    background: #101010;
    display: flex;
    height: 100%;
    line-height: 40px;
    overflow:hidden;
    width: 100%;
    white-space:nowrap;
    margin-top: 100px;
    z-index: 1;
    margin: 0 auto;
  }
  .bbs ul {
    animation: flowing 20s linear infinite;
    font-size: 20px;
    transform:translateX(100%);
    margin: 0;
    padding: 0;
  }
  .bbs ul li{
    display: inline-block;
    padding-right: 10px;
  }
.bbs-logo{
    max-width: none;
}
  @keyframes flowing {
    0% { transform:translateX(0); }
    100% { transform:translateX(-100%); }
  }

  /* スマホの記述 */
@media(max-width: 768px){
.section-video{

    padding-top: 407px;
    padding-bottom: 27px;
    padding-left: 18px;
    padding-right: 18px;
}
.title{

    padding-top: 130px;
}
}
.about{
    text-align: center;
    }

.about h2{
    font-size: 24px;
    display: inline;
    background:linear-gradient(transparent 68%,red 80%);
    font-weight:bold; 
    line-height: 1.2;
}
.br::after {
    content: "\A";
    white-space: pre;
}
.about p{
    font-size: 16px;
    font-weight: bold;
    color: #e30011;
    padding-top: 18px;
    padding-bottom: 48px;
}
.aboutbox{

    font-size: 12px;
    padding-left: 18px;
    padding-right: 18px;
}
}
.br::before {
    content: "\A";
    white-space: pre;
}
.deco_signarea{
    display: flex;
    width: 54%;
    margin-right: 10px;
    margin-top: -28px;
}
.about-en{

    padding-bottom: 5.333vw;
    margin-bottom: 5.333vw;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: .08em;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: bold;
}
.about-ja{    
    font-size: 12px;
    line-height: 2.1;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 100%;
    vertical-align:baseline;
    
}
.designerarea,.shoparea{
    padding-left: 18px;
    padding-right: 18px;
}
.decoimg , .shopimg{
    padding-top: 60px;
    padding-bottom: 25px;
}
.bbs-logo{
    width: none;
    margin: 0 auto;
}
.designer h2{
    font-size: 24px;
    padding-bottom: 10px;
    line-height: 1.1;
    padding-top: 25px;
}
.designer h3{
    font-size: 16px;
    padding-bottom: 10px;
}
.deco_sign{
    width: 101%;
    margin-left: 64px;
}
.designer-en,.message-en{
    font-size: 12px;
    line-height: 1.7;
    text-align: left;
    margin-bottom:8vw;
}
.designer-ja,.message-ja{
    padding-bottom: 60px;
    font-size: 12px;
    line-height: 1.8;
    text-align: left;
}
.message-ja{
    padding-bottom: 30px;
}
.footer{
    background-color: black;
    height: 40px;
    padding-top: 40px;
    text-align: center;
}
.footer__copyright{
    font-size: 14px;
    margin-top: 20px;
    color: #ffffff;
}



@media (min-width: 769px){
.logo{
    padding-bottom: 30px;
    padding-left: 32px;
    padding-top: 36px;
    height: 55px;
    width: auto;
}
.section-video{
    width: 68%;
    padding-top: 528px;
    padding-bottom: 340px;
    max-width: 1200px;
    margin: 0 auto;
}
.about{
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}
.about h2{
    
    font-size: 54px;
    background: linear-gradient(transparent 58%,red 80%);
    font-weight: bold;
    display: inline-block;
    }
.about p{
    padding-bottom: 120px;
    padding-top: 28px;
    font-size: 30px;
    color: #e60013;
    font-weight: bold;
}

.aboutbox{
    margin: auto;
    display: flex;
}
.about-en{
    font-size: 18px;
    padding-right: 35px;
    text-align: right;
    width: 50%;
    line-height: 1.8;
    letter-spacing: .08em;
}
.about-ja{
    font-size: 17px;
padding-left: 35px;
text-align: left;
width: 50%;
line-height: 2.3;
letter-spacing: .08em;
}
.designerarea,.shoparea{
    margin: auto;
    max-width: 1200px;
}

.deco_sign {
    width: 100%;
    margin-left: 64px;
}
.designer li{
    margin: auto; 
    display: flex;
}
.designer-description{
    width: 50%;
    padding-left: 36px;
}
.shop-description{
    width: 50%;
    padding-right: 36px;
}
.decoimg,.designer-description{

    padding-top: 100px;
    padding-bottom: 180px;
    width: 50%;
}
.shoparea{
    padding-top: 180px;
}
.shopimg,.shop-description{
    padding-bottom: 180px;
    width: 50%;
}
.designer h2{
    font-size: 40px;
    margin-bottom: 8px;
}
.designer h3{
    margin-bottom: 1.5vw;
}
.designer-en,.message-en{
    font-size: 16px;
    line-height: 1.7;
    text-align: left;
    margin-bottom: 2vw;
}
.designer-ja,.message-ja{
    font-size: 16px;
    line-height: 1.8;
    text-align: left;
}
.message-en{
margin-top: 1.5vw;
}
.shoparea{
flex-direction: row-reverse;
}

.footer{
    background-color: black;
    height: 72px;
    padding-top: 110px;
    text-align: center;
}
.footer__copyright{
    margin-top: 20px;
    color: #ffffff;
}
}

@media (width: 280px){
.deco_sign {
    width: 100%;
    margin-left: 32px;
}
}

@media (width: 393px){
    .deco_sign {
        width: 100%;
        margin-left: 32px;
    }
    .title{
            max-width: 380px;
            margin: 0 auto;
        }
    }
    .video-play-button {
        position: absolute;
        z-index: 10;
        top: 37%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        box-sizing: content-box;
        display: block;
        width: 32px;
        height: 44px;
        border-radius: 50%;
    }

    @media (width: 375px){
    .video-play-button {
        position: absolute;
        z-index: 10;
        top: 34%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        box-sizing: content-box;
        display: block;
        width: 32px;
        height: 44px;
        border-radius: 50%;
    }
    }
@media (width: 820px){

    .designerarea,.shoparea{

    max-width: 720px;
    margin: 0 auto;
}
.section-video{
    padding-bottom: 20px;

    max-width: 720px;
    margin: 0 auto;
}
.about{
    padding: 0;
}
.aboutbox{

    max-width: 720px;
    margin: 0 auto;
}
.about h2{

    font-size: 28px;
}
.designer-description {
    padding-top: 120px;
    padding-bottom: 120px;
}
}


@media(width:1024px){
    .title{

    padding-top: 300px;
    }
    .video-play-button {
        position: absolute;
        z-index: 10;
        top: 24%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        box-sizing: content-box;
        display: block;
        width: 32px;
        height: 44px;
        border-radius: 50%;
        padding: 18px 20px 18px 28px;
    }

.section-video {
    width: 68%;
    padding-top: 528px;
    padding-bottom: 0px;
    max-width: 1200px;
    margin: 0 auto;
}
    .about h2 {
        font-size: 38px;
        background: linear-gradient(transparent 58%,red 80%);
        font-weight: bold;
        display: inline-block;
    }
    .about,.designerarea,.shoparea{
        max-width: 864px;
        margin: 0 auto;
    }
    
}



@media(width:768px){
.about,.designerarea,.shoparea{

    max-width: 640px;
    margin: 0 auto;
}
.video-play-button {
    position: absolute;
    z-index: 10;
    top: 24%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: content-box;
    display: block;
    width: 32px;
    height: 44px;
    border-radius: 50%;
}
.deco_sign {
    width: 101%;
    margin-left: 200px;
}
    .decoimg, .shopimg {
        padding-top: 120px;
        padding-bottom: 24px;
    }
    .message-ja {
        padding-bottom: 120px;
    }
}


@media(width:540px){
    
    .about,.designerarea,.shoparea{
    max-width: 440px;
    margin: 0 auto;
    }
    .video-play-button {
        position: absolute;
        z-index: 10;
        top: 36%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        box-sizing: content-box;
        display: block;
        width: 32px;
        height: 44px;
        border-radius: 50%;
        padding: 18px 20px 18px 28px;
    }
    .about h2 {
        font-size: 24px;
        display: inline;
        background: linear-gradient(transparent 68%,red 80%);
        font-weight: bold;
        line-height: 1.2;
    }
    }

@media(width:820px){
    .about{
    padding-top: 160px;
    }
    .about,.designerarea,.shoparea{
        max-width: 700px;
        margin: 0 auto;
    }
    .video-play-button {
        position: absolute;
        z-index: 10;
        top: 24%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        box-sizing: content-box;
        display: block;
        width: 32px;
        height: 44px;
        border-radius: 50%;
        padding: 18px 20px 18px 28px;
    }
    }


    @media(width:912px){
        .about{
        padding-top: 160px;
        }
        .about,.designerarea,.shoparea{
            max-width: 700px;
            margin: 0 auto;
        }
        .video-play-button {
            position: absolute;
            z-index: 10;
            top: 37%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            box-sizing: content-box;
            display: block;
            width: 32px;
            height: 44px;
            border-radius: 50%;
            padding: 18px 20px 18px 28px;
        }
        .about h2 {
            font-size: 54px;
            background: linear-gradient(transparent 82%,red 88%);
            font-weight: bold;
            display: inline-block;
        }
        }

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

@keyframes checked-anim {
    50% {
        width: 3000px;
        height: 3000px;
    }
    100% {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}
@keyframes not-checked-anim {
    0% {
        width: 3000px;
        height: 3000px;
    }
}
.menulist, a {
/* margin: 75px 0 -55px 0; */
color: #fff;
font: 12pt "Roboto", sans-serif;
font-weight: 700;
line-height: 1.8;
text-decoration: none;
text-transform: none;
list-style: none;
outline: 0;
display: none;
}
.menulist{
    width: 230px;
    text-indent: 56px;}


a:focus {
    display: block;
    color: #333;
    background-color: #eee;
    transition: all .5s;
}
aside {
    position: absolute;
    color: white;
    top: 35%;
    right: 10%;
    text-align: right;
}
h1 {
    line-height: 0;
    font-size: 4vw;
    font-weight: 700;
}
h4 {
    float: left;
    margin-left: -2%;
    font-size: 1.5vw;
    font-weight: lighter;
}

#trigger, #burger, #burger:before, #burger:after {

    position: absolute;
    top: 22px;
    left: 16px;
    background: #fff;
    width: 29px;
    height: 3px;
    transition: .2s ease;
    cursor: pointer;
    z-index: 1;
    }
#trigger {
    height: 25px;
    background: none;
    }
    #burger:before {
    content: " ";
    top: 10px;
    left: 10px;
    }
    #burger:after {
    content: " ";
    top: 20px;
    left: 0;
    }
#menu-toggle:checked + #trigger + #burger {
    top: 35px;
    transform: rotate(180deg);
    transition: transform .2s ease;
}

#menu-toggle:checked + #trigger + #burger:before {
    width: 20px;
    top: -2px;
    left: 18px;
    transform: rotate(45deg) translateX(-5px);
    transition: transform .2s ease;
}
#menu-toggle:checked + #trigger + #burger:after {
    width: 20px;
    top: 2px;
    left: 18px;
    transform: rotate(-45deg) translateX(-5px);
    transition: transform .2s ease;
}
#menu {
position: absolute;
margin: 0; padding: 0;
width: 80px;
height: 80px;
background-color: #ff0000;

border-bottom-right-radius: 100%;
box-shadow: 0 2px 5px rgba(0,0,0,0.26);
animation: not-checked-anim .2s both;
transition: .2s;
}
#menu-toggle:checked + #trigger + #burger + #menu {
    animation: checked-anim 1s ease both;
}
#menu-toggle:checked + #trigger ~ #menu > li, a {
    display: block;
}
[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    display: none;
}


.wapper_box{
    position: relative;
    z-index: 9999999999999999999;
    }