@charset "utf-8";

/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html {
    color: #221815;
    background: #FFF
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset,
img {
    border: 0
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal
}

ol,
ul {
    list-style: none
}

caption,
th {
    text-align: left
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal
}

q:before,
q:after {
    content: ''
}

abbr,
acronym {
    border: 0;
    font-variant: normal
}

sup {
    vertical-align: text-top
}

sub {
    vertical-align: text-bottom
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    *font-size: 100%
}

legend {
    color: #000
}

/* Global Styles
------------------------------------------------------------- */

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6em;
    font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
    color: #333;
    background: #fff;
}

a {
    color: #333;
    text-decoration: none;
}

a:link,
a:visited {
    color: #333;
}

a:focus,
a:active {
    color: #333;
}

a:hover {
    opacity: 0.7;
}

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

.pcOnly {
    display: inherit;
}

.spOnly {
    display: none;
}

#mv {
    width: 100%;
    height: 100vh;
    background: url("../images/bg_mv.jpg") no-repeat center center;
    background-size: cover;
}

#mv h1 {
    margin: 0 auto 50px;
    padding-top: 44.81vh;
    text-align: center;
    line-height: 0;
}

#mv ul {
    margin: 0 auto;
    text-align: center;
}

#mv ul li {
    margin-bottom: 27px;
}

#mv ul li a {
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    line-height: 0;
    margin: 0 auto;
}

#mv ul li a:hover {
    opacity: 1;
}

#mv ul li#hNavWorks a {
    background: url("../images/txt_nav01.png") no-repeat 0 0;
    width: 83px;
    height: 13px;
}

#mv ul li#hNavBrands a {
    background: url("../images/txt_nav02.png") no-repeat 0 0;
    width: 224px;
    height: 13px;
}

#mv ul li#hNavAbout a {
    background: url("../images/txt_nav03.png") no-repeat 0 0;
    width: 80px;
    height: 13px;
}

#mv ul li#hNavContact a {
    background: url("../images/txt_nav04.png") no-repeat 0 0;
    width: 113px;
    height: 13px;
}

#mv ul li#hNavWorks a:hover {
    background: url("../images/txt_nav01_on.png") no-repeat 0 0;
}

#mv ul li#hNavBrands a:hover {
    background: url("../images/txt_nav02_on.png") no-repeat 0 0;
}

#mv ul li#hNavAbout a:hover {
    background: url("../images/txt_nav03_on.png") no-repeat 0 0;
}

#mv ul li#hNavContact a:hover {
    background: url("../images/txt_nav04_on.png") no-repeat 0 0;
}

#works > div {
    width: 100%;
    height: 59.06vw;
}

#works .inner {
    margin: 0 auto;
    max-width: 1920px;
}

#works h2 {
    line-height: 0;
    padding-top: 5.31vw;
    margin-bottom: 5.31vw;
    text-align: center;
}

#works h3 {
    line-height: 0;
    width: 75vw;
    margin: 0 auto 1.4vw;
}

#works p {
    width: 75vw;
    margin: 0 auto;
    font-size: 1.0rem;
    line-height: 1.8em;
}

#works .img a,
#works .img span {
    display: block;
    line-height: 0;
    width: 100%;
    text-indent: -9999px;
    overflow: hidden;
    margin-bottom: 61px;
}

#worksDirectionDesign {
    max-height: 1512px;
}

#worksDirectionDesign .img a,
#worksDirectionDesign .img span {
    height: 28.55vw;
    max-height: 731px;
    background: url("../images/img_works01.png") no-repeat center top;
    background-size: cover;
}

#worksWoodPrinting {
    max-height: 1512px;
    background-color: #f5f2ec;
}

#worksWoodPrinting .img {
    padding-top: 11.33vw;
}

#worksWoodPrinting .img a,
#worksWoodPrinting .img span {
    height: 28.67vw;
    max-height: 734px;
    background: url("../images/img_works02.png") no-repeat center top;
    background-size: cover;
}

#worksWedding {
    max-height: 1512px;
}

#worksWedding .img {
    padding-top: 11.33vw;
}

#worksWedding .img a,
#worksWedding .img span {
    height: 28.63vw;
    max-height: 733px;
    background: url("../images/img_works03.png") no-repeat center top;
    background-size: cover;
}

#brands {
    width: 100%;
    background-color: #f5f2ec;
}

#brands h2 {
    line-height: 0;
    padding-top: 5.31vw;
    margin-bottom: 5.31vw;
    text-align: center;
}

#brands h3 {
    line-height: 0;
    margin-bottom: 2.64vw;
    text-align: center;
}

@media screen and (max-width: 1280px) {
    #brands h3 img {
        max-width: 100%;
    }
}

#brands ul {
    display: flex;
    justify-content: space-around;
    max-width: 1920px;
    margin: 0 auto;
    padding-bottom: 6.25vw;
}

#brands ul li {
    width: 30.1%;
    position: relative;
}

#brands ul li p.img img {
    width: 100%;
    margin-bottom: 3.33vw;
}

#brands ul li p.txt {
    font-size: 1.2rem;
    line-height: 2.1em;
    text-align: center;
    margin-bottom: 80px;
}

#brands ul li p.instagram {
    position: absolute;
    bottom: 0;
    left: 50%;
    text-align: center;
    margin-left: -21px;
}

#brands ul li p.instagram a {
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    line-height: 0;
    width: 42px;
    height: 45px;
    background: url("../images/ico_instagram.png") no-repeat 0 0;
    margin: 0 auto;
}

#about {
    max-width: 1920px;
    margin: 0 auto;
}

#about h2 {
    line-height: 0;
    padding-top: 5.31vw;
    margin-bottom: 5.31vw;
    text-align: center;
}

#aboutStory {
    width: 100%;
    height: 46.35vw;
    background: url("../images/bg_about.jpg") no-repeat left top;
    background-size: auto 100%;
    position: relative;
}

#aboutStory .txtBlock {
    position: absolute;
    bottom: 95px;
}

#aboutStory h3 {
    line-height: 0;
    margin-left: 45.52vw;
    margin-bottom: 2.73vw;
}

#aboutStory ul {
    margin-left: 45.52vw;
}

#aboutStory ul li {
    color: #3d3d3d;
    font-size: 1.2rem;
    line-height: 2.1em;
}

#contact {
    margin-left: 45.52vw;
    padding-top: 55px;
    padding-bottom: 230px;
}

#contact h3 {
    font-size: 1.2rem;
    line-height: 1.33em;
    color: #3d3d3d;
    padding-top: 35px;
}

#contact p {
    font-size: 1.2rem;
    line-height: 1.33em;
    color: #3d3d3d;
}

#contact p.tel {
    padding-top: 35px;
    margin-bottom: 80px;
}

#contact p.copyright {
    font-size: 1.0rem;
    line-height: 1em;
}



/* Responsive Styles
============================================================= */

@media screen and (max-width: 750px) {
    * {
        box-sizing: border-box;
    }

    html {
        font-size: 2.6666vw;
    }

    img {
        width: 100%;
    }

    .pcOnly {
        display: none;
    }

    .spOnly {
        display: inherit;
    }

    #mv h1 {
        width: 44.67vw;
        margin-bottom: 10vw;
        padding-top: 39vh;
    }

    #mv ul li {
        margin-bottom: 3.6vw;
    }

    #mv ul li#hNavWorks a,
    #mv ul li#hNavWorks a:hover {
        width: 11.07vw;
        height: 1.73vw;
        background-size: 100%;
    }

    #mv ul li#hNavBrands a,
    #mv ul li#hNavBrands a:hover {
        width: 29.87vw;
        height: 1.73vw;
        background-size: 100%;
    }

    #mv ul li#hNavAbout a,
    #mv ul li#hNavAbout a:hover {
        width: 10.67vw;
        height: 1.73vw;
        background-size: 100%;
    }

    #mv ul li#hNavContact a,
    #mv ul li#hNavContact a:hover {
        width: 15.07vw;
        height: 1.73vw;
        background-size: 100%;
    }

    #works > div {
        height: auto;
    }

    #works h2 {
        width: 18.13vw;
        margin: 0 0 23.07vw 7.33vw;
        padding-top: 23.07vw;
    }

    #works h3 {
        margin: 0 0 2.5vw 7.33vw;
    }

    #worksDirectionDesign h3 {
        width: 47.29vw;
    }

    #worksWoodPrinting h3 {
        width: 36.67vw;
    }

    #worksWedding h3 {
        width: 21.88vw;
    }

    #works p {
        width: 85.34vw;
        font-size: 1.2rem;
        line-height: 1.8em;
    }

    #works .img a {
        margin-bottom: 4vw;
    }

    #works .imgList {
        line-height: 0;
        padding-top: 11vw;
    }

    #worksDirectionDesign {
        max-height: none;
        padding-bottom: 31.33vw;
    }

    #worksDirectionDesign .imgList {}

    #worksWoodPrinting {
        max-height: none;
        padding-bottom: 31.33vw;
    }

    #worksWoodPrinting h3 {
        padding-top: 11vw;
    }

    #worksWedding {
        max-height: none;
        padding-bottom: 31.33vw;
    }

    #worksWedding h3 {
        padding-top: 11vw;
    }

    #brands h2 {
        width: 47.71vw;
        margin: 0 0 23.07vw 7.33vw;
        padding-top: 23.07vw;
    }

    #brands ul {
        display: block;
        max-width: auto;
        padding-bottom: 0;
    }

    #brands ul li {
        width: 100%;
        position: relative;
        padding-bottom: 30vw;
    }

    #brands ul li h3 {
        width: 79.38vw;
        margin: 0 auto 2.64vw;
    }

    #brands ul li p.img {
        padding: 0;
    }

    #brands ul li p.img img {
        margin-bottom: 3.33vw;
    }

    #brands ul li p.txt {
        padding: 0 7.33vw;
        margin-bottom: 4vw;
        text-align: left;
        line-height: 1.8em;
    }

    #brands ul li p.instagram {
        position: relative;
        bottom: auto;
        left: auto;
        margin-left: 0;
    }

    #brands ul li p.instagram a {
        width: 8.75vw;
        height: 9.38vw;
        background-size: 100%;
    }

    #about {
        max-width: 1920px;
        margin: 0 auto;
    }

    #about h2 {
        width: 26.25vw;
        margin: 0 0 23.07vw 7.33vw;
        padding-top: 23.07vw;
    }

    #aboutStory {
        height: auto;
        background-position: center top;
        background-size: cover;
        position: relative;
        padding: 30vw 0;
    }

    #aboutStory .txtBlock {
        position: relative;
        bottom: auto;
    }

    #aboutStory h3 {
        width: 14.38vw;
        margin: 0 0 10vw 7.33vw;
    }

    #aboutStory ul {
        margin-left: 0;
        padding: 0 7.33vw;
    }

    #contact {
        margin-left: 0;
        padding: 30vw 7.33vw;
    }

    #contact h3 {
        padding-top: 10vw;
    }

    #contact p.tel {
        padding-top: 10vw;
        margin-bottom: 10vw;
    }

    aside {
        position: fixed;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.5);
        left: 0;
        top: -100vh;
        width: 100%;
        height: 100vh;
        transition: 0.5s;
    }

    aside nav {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    ul#spNav {
        margin: 0 auto;
        text-align: center;
    }

    ul#spNav li {
        margin-bottom: 8vw;
    }

    ul#spNav li:last-child {
        margin: 0;
    }

    ul#spNav li a {
        display: block;
        text-indent: -9999px;
        overflow: hidden;
        line-height: 0;
        margin: 0 auto;
    }

    ul#spNav li a:hover {
        opacity: 1;
    }

    ul#spNav li#spNavWorks a {
        background: url("../images/txt_nav01.png") no-repeat 0 0;
        width: 17.29vw;
        height: 2.71vw;
        background-size: 100%;
    }

    ul#spNav li#spNavBrands a {
        background: url("../images/txt_nav02.png") no-repeat 0 0;
        width: 46.67vw;
        height: 2.71vw;
        background-size: 100%;
    }

    ul#spNav li#spNavAbout a {
        background: url("../images/txt_nav03.png") no-repeat 0 0;
        width: 16.67vw;
        height: 2.71vw;
        background-size: 100%;
    }

    ul#spNav li#spNavContact a {
        background: url("../images/txt_nav04.png") no-repeat 0 0;
        width: 23.54vw;
        height: 2.71vw;
        background-size: 100%;
    }

    ul#spNav li#spNavWorks a:hover {
        background: url("../images/txt_nav01_on.png") no-repeat 0 0;
        background-size: 100%;
    }

    ul#spNav li#spNavBrands a:hover {
        background: url("../images/txt_nav02_on.png") no-repeat 0 0;
        background-size: 100%;
    }

    ul#spNav li#spNavAbout a:hover {
        background: url("../images/txt_nav03_on.png") no-repeat 0 0;
        background-size: 100%;
    }

    ul#spNav li#spNavContact a:hover {
        background: url("../images/txt_nav04_on.png") no-repeat 0 0;
        background-size: 100%;
    }

    #spMenuBtn {
        position: fixed;
        z-index: 20;
        right: 0px;
        top: 0px;
        outline: none;
    }

    aside.active {
        top: 0;
    }

    .hamburger {
        padding: 9px 9px;
        display: inline-block;
        cursor: pointer;
        transition-property: opacity, filter;
        transition-duration: 0.15s;
        transition-timing-function: linear;
        font: inherit;
        color: inherit;
        text-transform: none;
        background-color: transparent;
        border: 0;
        margin: 0;
        overflow: visible;
    }

    .hamburger:hover {
        opacity: 0.7;
    }

    .hamburger.active:hover {
        opacity: 0.7;
    }

    .hamburger.active .hamburger-inner,
    .hamburger.active .hamburger-inner::before,
    .hamburger.active .hamburger-inner::after {
        background-color: #333;
    }

    .hamburger-box {
        width: 60px;
        height: 64px;
        display: inline-block;
        position: relative;
    }

    .hamburger-inner {
        display: block;
        top: 50%;
        margin-top: -1px;
        margin-left: 20px;
    }

    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
        width: 20px;
        height: 2px;
        background-color: #333;
        position: absolute;
        transition-property: transform;
        transition-duration: 0.15s;
        transition-timing-function: ease;
    }

    .hamburger-inner::before,
    .hamburger-inner::after {
        content: "";
        display: block;
    }

    .hamburger-inner::before {
        top: -5px;
    }

    .hamburger-inner::after {
        bottom: -5px;
    }

    /* Squeeze */
    .hamburger--squeeze .hamburger-inner {
        transition-duration: 0.075s;
        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    .hamburger--squeeze .hamburger-inner::before {
        transition: top 0.075s 0.12s ease, opacity 0.075s ease;
    }

    .hamburger--squeeze .hamburger-inner::after {
        transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    .hamburger--squeeze.active .hamburger-inner {
        transform: rotate(45deg);
        transition-delay: 0.12s;
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .hamburger--squeeze.active .hamburger-inner::before {
        top: 0;
        opacity: 0;
        transition: top 0.075s ease, opacity 0.075s 0.12s ease;
    }

    .hamburger--squeeze.active .hamburger-inner::after {
        bottom: 0;
        transform: rotate(-90deg);
        transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
    }
}