@charset "UTF-8";
/*import*/
@import url(./reset.css);
@import url(./font.css);
/*--------*/
body {
    background: #ffffff;
}

.clearfix:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

.sp {display: block;}
.pc {display: none;}

#wrapper
{
    overflow: hidden;

    font-size: 62.5%;
    width: 100%;
    max-width: 750px;
    color: #000000;

    margin: 0 auto;
    position: relative;
    z-index: 999;

    -webkit-text-size-adjust: 100%;
    font-family: 'Noto Sans JP', 'Noto Sans', sans-serif,;
}

.content1,
.content2
{
    width: 81%;
    max-width: 608px;
    background: rgba(0,0,0,.7);
}
.content1 {
    margin: 13.333333% auto 0 0;
}
.content1:nth-of-type(1){
    margin: 24% auto 0 0;
}
.content2:nth-last-of-type(1){
    margin: 13.333333% 0 24% auto;
}
.content2 {
    margin: 13.333333% 0 0 auto;
}
.content1 .inner,
.content2 .inner
{
    padding: 8.223% 5%;
}

.content1 .inner h1,
.content2 .inner h1
{
    color: #ffffff;
    font-family: 'Playfair Display';
    font-style: italic;
    margin: 0 0 5% 0;
}
.content1 .inner .detail,
.content2 .inner .detail
{
    color: #ffffff;
    font-family: 'Noto Sans JP', 'Noto Sans';
    line-height: 1.875;
}

.content1 .inner .detail a,
.content2 .inner .detail a
{
    color: #ffffff;
    text-decoration: underline;
}

.content2 ul {
    width: 100%;
    text-align: center;
    margin: 10% 0 0 0;
}
.content2 ul li {
    width: 14.3%;
    margin: 0 10% 0 0;
    display: inline-block;
    vertical-align: middle;
}
.content2 ul li:nth-last-child(1){
    margin: 0;
}


.content2 ul li a {
    display: block;
}
.content2 .fb {
    width: 100%;
    background: transparent url(../img/icon_fb.png) 0 0 no-repeat;
    background-size: contain;
    padding-top: calc((86/87)*100%);
}
.content2 .insta {
    width: 100%;
    background: transparent url(../img/icon_insta.png) 0 0 no-repeat;
    background-size: contain;
    padding-top: calc((87/87)*100%);
}


/* craft */
.head_img {
    position: relative;
    z-index: 1;
    margin: 13.333333% auto 0 auto;
}
.head_img .inner {
    position: relative;
    width: 100%;
    padding-top: calc((298/960)*100%);
}
.head_img .inner .caption {
    line-height: 1;
    position: absolute;
    z-index: 3;
    top: 36%;
    left: 10%;
}
.head_img .inner .cap_img {
    position: fixed;
    z-index: 1;
    top: 6%;
}

#craft_content {
    position: relative;
    z-index: 2;
    background: #ffffff;
}
#craft_content .inner {
    width: 96%;
    margin: 0 auto;
    padding: 5% 0;
}
#craft_content .inner h1 {
    line-height: 1.5;
    text-align: center;
    margin: 0 0 5% 0;
}

#craft_content .inner .ga_box  {
    text-align: center;
    width: 100%;
    margin: -7.16% 0 0 0;

    display: flex;
    justify-content: space-between;
}
#craft_content .inner .ga_box:nth-of-type(1)  {
    margin: 0;
}
#craft_content .inner .ga_box:nth-last-of-type(1)  {
    margin: -7.16% 0 0 0;
}

#craft_content .inner .ga_box li {
    width: 31.333333%;
}
#craft_content .inner .ga_box li.pad {
    padding: 9% 0 0 0;
}
#craft_content .inner .ga_box li .area {
    overflow: hidden;
}
#craft_content .inner .ga_box li .area img {
    transform: scale(1);
    transition-duration: 0.3s;
    cursor: pointer;
}
#craft_content .inner .ga_box li .area img:hover {
    transform: scale(1.2);
    transition-duration: 0.3s;
}

#modal_content {
    opacity: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    transition-duration: 0.25s;
}
#modal_content .inner {
    position: absolute;
    z-index: 100002;
    width: 100%;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}
#modal_content #modal_bg {
    position: fixed;
    z-index: 100000;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
}
#modal_content .inner #close {
    cursor: pointer;
    position: absolute;
    z-index: 100003;
    right: 33.5625%;
    width: 6%;
    background: url(../img/close.svg) 0 0 no-repeat;
    background-size: contain;
    padding-top: calc((31/31)*6%);
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

#modal_content .inner #modal_slick {
    width: 100%;
    margin: 0 auto;
}
#modal_content .inner #modal_slick .prev, #modal_content .inner #modal_slick .next {
    cursor: pointer;
    position: absolute;
    z-index: 100003;
    width: 10.666667%;
    top: 45%;
    padding-top: calc((60/60)*10.666667%);
    transition-duration: 0.25s;
}
#modal_content .inner #modal_slick .prev {
    left: 0;
    background: transparent url(../img/prev.svg) 0 0 no-repeat;
    background-size: contain;
}
#modal_content .inner #modal_slick .next {
    right: 0;
    background: transparent url(../img/next.svg) 0 0 no-repeat;
    background-size: contain;
}
#modal_content .inner #modal_slick .popup_box {
    width: 78%;
    max-width: 598px;
    margin: 0 auto;
    padding: 9.6% 0 0 0;
}

/*header footer*/
header {
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
    background: #ffffff;
}
header .inner {
    max-width: 750px;
    margin: 0 auto;
}
header .inner .logo {
    display: block;
    width: 39.5%;
    margin: 4.3% 0 4.3% 2.4%;
    background: transparent url(../img/header.png) 0 0 no-repeat;
    background-size: contain;
    padding-top: calc((35/296)*39.5%);
}

footer {
    width: 100%;
    position: relative;
    z-index: 999;
}
footer .inner {
    width: 100%;
    background: #ffffff;
}
footer .inner p {
    padding: 2% 0;
    text-align: center;
    color: #9f9f9f;
}

#content_bg {
    position: fixed;
    z-index: 998;
    top: 0;
    left: 0;
    right: 0;
    
    width: auto;
    max-width: 960px;
    height: 100%;
    margin: 0 auto;
    
    overflow: hidden;
    background-size: cover;
}

@media screen and (min-width: 751px) {
    .sp {display: none;}
    .pc {display: block;}

    #wrapper {
        max-width: 960px;
        margin: 0 auto;
        padding: 0 0 10% 0;
    }
    header .inner {
        max-width: 960px;
        margin: 0 auto;
    }
    header .inner .logo {
        width: 25%;
        margin: 2.5% 0;
        background: transparent url(../img/header.png) 0 0 no-repeat;
        background-size: contain;
        padding-top: calc((35/296)*25%);
    }
    .content1, .content2 {
        width: 50%;
        max-width: 480px;
    }
    .content1 {
        margin: 5% auto 0 0;
    }
    .content2 {
        margin: 5% 0 0 auto;
    }
    .content1:nth-of-type(1) {
        margin: 20% auto 0 0;
    }
    .content2:nth-last-of-type(1) {
        margin: 5% 0 20% auto;
    }
    .content1 .inner, .content2 .inner {
        padding: 3%;
    }
    .content2 ul {
        margin: 5% 0 0 0;
    }
    .content2 ul li {
        width: 10%;
        margin: 0 5% 0 0;
    }
    footer .inner p {
        line-height: 1;
        padding: 1.5% 0;
    }

    /* craft */
    .head_img {
        margin: 8% auto 0 auto;
    }

    #craft_content .inner {
        width: 66%;
        margin: 0 auto;
        padding: 3% 0;
    }
    #modal_content .inner #modal_slick .prev, #modal_content .inner #modal_slick .next {
        cursor: pointer;
        position: absolute;
        z-index: 100003;
        width: 3.75%;
        top: 46.625%;
        padding-top: calc((60/60)*3.75%);
        transition-duration: 0.25s;
    }
    .slick-slide img {
        width: auto;
        margin: auto;
        max-height: 60vh !important;
    }
    #modal_content .inner #close {
        right: 33.5625%;
        width: 1.9375%;
        background: url(../img/close.svg) 0 0 no-repeat;
        background-size: contain;
        padding-top: calc((31/31)*1.9375%);
    }
    #modal_content .inner #modal_slick .popup_box {
        width: 100%;
        margin: 0 auto;
        padding: 3.75% 0 0 0;
    }
}