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

/* !Slideshow
---------------------------------------------------------- */

#vegas {
    width: 100%;
    height: 680px;
    position: relative;
}

#vegas div#mainCopy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    z-index: 0;
    width: 100%;
    max-width: 500px;
}

#vegas div#mainCopy img {
    width: 100%;
}

#vegas div#insta {
    position: absolute;
    bottom:50px;
    right:20px;
}

@media screen and (max-width: 79.99em) {
    #vegas {
        /*margin-top: 128px;*/
    }
}

@media screen and (max-width: 63.99em) {
    #vegas {
        height: 550px;
        /*margin-top: 75px;*/
    }
    
    #vegas div#mainCopy {
        width: 65%;
    }
    
    #vegas div#insta {
        width: 20%;
        /*bottom:30px;
        right:10px;*/
        
    }
    #vegas div#insta img {
        width: 100%;
    }
}

@media screen and (max-width: 47.99em) {
    #vegas {
        height: 380px;
    }
    
    #vegas div#mainCopy {
        width: 45%;
    }
}

@media screen and (max-width: 35.49em) {
    #vegas {
        height: 220px;
    }
    
    #vegas div#mainCopy {
        width: 40%;
    }
    #vegas div#insta {
        width: 28%;
        top:10px;
        right: 10px;
        
    }
}

@media screen and (max-width: 24.0em) {
    #vegas {
        height: 170px;
    }
    
    #vegas div#mainCopy {
        width: 30%;
    }
}

/* !Bg
---------------------------------------------------------- */

.bg01 {
    background-image: url("../img/pic_index01.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
}

.bg02 {
    background: #ABC85D;
    position: relative;
}

/* !News
---------------------------------------------------------- */

#news {
    background: #FFF;
    border-radius: 5px;
    font-size: 1.8rem;
    padding: 20px;
    position: absolute;
    z-index: 100;
    width: 100%;
    top: -1.5em;
    box-sizing: border-box;
}

#news #newsTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    color: #8CB703;
    font-weight: 100;
}

#news #newsList {
    text-align: left;
}

#news #newsList .date,
#news #newsList .title{
    padding: 4px 5px;
    box-sizing: border-box;
}

#news a.link01 {
    color: #72A503;
}

@media screen and (max-width: 35.49em) {
    #news {
        top: 1em;
    }
    
    #news #newsList li:last-child {
        display: none;
    }
}

/* !About
---------------------------------------------------------- */

#about {
    text-align: left;
    color:#FFF;
    padding: 280px 0 20px;
    position: relative;
}

#about::before {
    content: url("../img/ico01.png");
    position: absolute;
    right: -50px;
    top: 250px;
}

#about h2 {
    font-size: 4.9rem;
    margin-bottom: 15px;
    font-weight: normal;
}

#about p {
    font-size: 1.7rem;
    line-height: 180%;
}

@media screen and (max-width: 63.99em) {
    #about {
        padding: 200px 0 20px;
    }
    
    #about::before {
        top: 170px;
    }
}

@media screen and (max-width: 47.99em) {
    #about {
        padding: 250px 0 20px;
    }
    
    #about::before {
        top: 220px;
    }
}

@media screen and (max-width: 35.49em) {
    #about {
        padding: 320px 0 20px;
    }
    
    #about::before {
        top: 320px;
    }
    
    #about h2 {
        font-size: 250%;
    }
}

/* !Works
---------------------------------------------------------- */

#works {
    margin-bottom: 110px;
}

#works h2 {
    font-size: 4.9rem;
    font-weight: normal;
    text-align: center;
    line-height: 110%;
    margin-bottom: 20px;
}

#works h2:before {
    content: "";
    display: block;
    margin-bottom: 10px;
    background: url(../img/h2_01.svg) no-repeat;
    background-size: contain;
    width: 48px;
    height: 60px;
    margin: 0 auto 20px;
}

#works h2:after {
  content: attr(data-subtitle)"";
  display: block;
  color: #8CB703;
  font-size: 4.0rem;
  letter-spacing: 10px;
}

#works ul li {
    padding: 25px 70px;
    box-sizing: border-box;
}

#works ul li:first-child {
    border-right: 1px dotted #666666;
    border-bottom: 1px dotted #666666;
}

#works ul li:nth-child(2) {
    border-bottom: 1px dotted #666666;
}

#works ul li:nth-child(3) {
    border-right: 1px dotted #666666;
}

#works ul li h3 {
    font-size: 250%;
    font-weight: normal;
    margin-bottom: 30px;
    text-align: center;
}

#works ul li figure {
    margin-bottom: 20px;
}

#works ul li p {
    text-align: left;
    font-size: 1.6rem;
    line-height: 180%;
}

#works ul li img {
    width: 100%;
}

@media screen and (max-width: 63.99em) {
    #works ul li {
        padding: 20px 40px;
    }
}

@media screen and (max-width: 47.99em) {
    #works ul li {
        padding: 20px 0;
        border-top: none!important;
        border-right: none!important;
        border-bottom: 1px dotted #666;
        border-left: none!important;
    }
}

@media screen and (max-width: 35.49em) {
    #works h2 {
        font-size: 250%;
        margin-bottom: 0;
    }
    
    #works h2:before {
        width: 35px;
        height: 44px;
    }
    
    #works ul li h3 {
        font-size: 3.6rem;
        margin-bottom: 10px;
    }
}

/* !Product
---------------------------------------------------------- */

/*#product {
    background-image: url("../img/img_product01.png"),
                        url("../img/img_product02.png"),
                        url("../img/img_product03.png");
    background-repeat: no-repeat,
                        no-repeat,
                        no-repeat;
    background-position: left top,
                            left bottom,
                            right top;
    background-color: #FCF3EA;
}*/

#product {
    background: url("../img/img_product01.png") 8% 90% no-repeat,url("../img/img_product02.png") 23% 25% no-repeat,url("../img/img_product03.png") 10% 40% no-repeat,url("../img/img_product03.png") 93% 90% no-repeat,#FCF3EA;
}

#product .sankaku {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50vw 160px 50vw;
    border-color: transparent transparent #FCF3EA transparent;
    background: #FFF;
}

#product h2 {
    font-size: 4.9rem;
    font-weight: normal;
    text-align: center;
    line-height: 110%;
    margin-bottom: 20px;
}

#product h2:after {
  content: attr(data-subtitle)"";
  display: block;
  color: #BF7C56;
  font-size: 4.0rem;
  letter-spacing: 10px;
}

#product .productPic01 img {
    width: 100%;
    max-width: 596px;
    position: relative;
    z-index: 1;
}

#product .productPic02 img {
    transform: translate(0, -10px) scale(0.95,0.95);
}

#product .productCopy {
    font-size: 4.0rem;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-indent: -2em;
    transform: translate(0, -200px);
    color: #754C24;
    letter-spacing: 5px;
    position: relative;
}

#product .productCopy::before {
    content: url("../img/ico_product01.png");
    position: absolute;
    top: -120px;
    right: -25px;
}

#product .productCopy .txtColor_top01 {
    font-size: 150%;
    color:#F27804;
}

#product .productCopy .txtColor_top02 {
    font-size: 150%;
    color:#0367A5;
}

#product .productDesc {
    padding-top: 1.5em;
}

#product .productDesc p {
    line-height: 1.8;
    text-align: left;
}

@media screen and (max-width: 63.99em) {
    #product {
        padding-bottom: 80px;
    }
    
    #product .sankaku {
        border-width: 0 50vw 120px 50vw;
    }
    
    #product .productPic02 img {
        transform: translate(0, 0) scale(1,1);
    }
    
    #product .productCopy {
        font-size: 3.8vw;
        padding-left:2em;
        -webkit-writing-mode: lr-tb;
        -ms-writing-mode: lr-tb;
        writing-mode: lr-tb;
        transform: none;
        order: 1;
        line-height: 1.3;
    }
    
    #product .productCopy::before {
        display: none;
    }
    
    #product .productDesc {
        order: 2;
    }
}

@media screen and (max-width: 63.99em) {
    #product .productCopy {
        text-align: center;
    }
}

@media screen and (max-width: 47.99em) {
    #product .sankaku {
        border-width: 0 50vw 100px 50vw;
    }
    
    #product .productCopy {
        font-size: 3.7rem;
    }
}

@media screen and (max-width: 35.49em) {
    #product .sankaku {
        border-width: 0 50vw 80px 50vw;
    }
    
    #product .productCopy {
        font-size: 3rem;
    }
    
    #product h2 {
        font-size: 250%;
    }
}