@charset "UTF-8";
#Wrap {width: 100%;}
#Contents-All img {display: block;}
#Contents-All ul li {list-style: none;}
#Contents-All .img-width {width: 100%;}
#Contents-All .relative-area {position: relative;}
#Contents-All a:hover {cursor: pointer; opacity: 0.5;}
#Contents-All {font-feature-settings: 'palt'; text-align: justify; text-justify: inter-ideograph;} 
#Contents-All .futura-font {font-family: futura-pt, sans-serif;font-weight: 400;font-style: normal;}
#Contents-All p {font-family: '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic', 'メイリオ', sans-serif;}
#Contents-All .scroll-up {opacity: 0; transition: all 2s;}
#Contents-All .load-fade {opacity : 0; transition : all 2s;}
#Contents-All .scroll-up.done {opacity : 1;}
#Contents-All .load-fade.done {opacity : 1;}
@font-face {
    font-family: 'crim';
    src: url(../font/CrimsonText-Regular.ttf );
}
/*************************************SP****************************************/
@media screen and ( max-width:560px ) {
    /* #Contents-All {
        background-image: url(../img/sp.jpg);
        background-size: 100%;
        background-position-y: -153px;
    } */
    /* #Contents-All {
        background-image: url(../img/sp2.jpg);
        background-size: 100%;
        background-position-y: 2309px;
    } */
    #Contents-All .pc-only {display: none;}
    #Contents-All .item-flex-sp {display: flex;flex-wrap: wrap;justify-content: center;}
    /*==========================
    共通項目
    ==========================*/
    #Contents-All {
        width: calc(750*(100vw/750)); 
        margin: 0 auto;
    }
    #Contents-All .size500 {width: calc(500*(100vw/750));}
    #Contents-All .size580 {width: calc(580*(100vw/750));}
    #Contents-All .size640sp {width: calc(640*(100vw/750));}
    #Contents-All .size750 {width: calc(750*(100vw/750));}
    /***********フォント *************/
    #Contents-All .c-txt {
        font-size: calc(28*(100vw/750));
        line-height: 2;
        letter-spacing: 1.3px;
        text-align: center;
    }
    #Contents-All .credit {
        font-size: calc(22*(100vw/750));
        line-height: 2.3;
        letter-spacing: 0.3px;
        text-align: left;
    }
    /*==========================
    Main_Visual_Area
    ==========================*/
    #Contents-All .Main_Visual_Area {
        margin: 0 auto;
    }
    /*==========================
    Contents1
    ==========================*/
    #Contents-All .c1-block1 {
        margin: calc(150*(100vw/750)) 0 0 calc(216*(100vw/750));
    }
    #Contents-All .c1-block2 {
        margin-top: calc(120*(100vw/750));
    }
    #Contents-All .img4 {
        margin: calc(76*(100vw/750)) 0 0 calc(170*(100vw/750));
    }
    #Contents-All .Contents1 .credit {
        margin: calc(62*(100vw/750)) 0 0 calc(56*(100vw/750));
    }
    /*==========================
    Contents2
    ==========================*/
    #Contents-All .c2-block1 {
        margin: calc(190*(100vw/750)) auto 0;
    }
    #Contents-All .c2-block2 {
        margin-top: calc(122*(100vw/750));
    }
    #Contents-All .Contents2 .credit {
        margin: calc(60*(100vw/750)) 0 0 calc(54*(100vw/750));
    }
    #Contents-All .img5 {
        margin: calc(190*(100vw/750)) auto 0;
    }
    /*==========================
    Contents3
    ==========================*/
    #Contents-All .img11 {
        margin: calc(240*(100vw/750)) auto calc(72*(100vw/750));
    }
    #Contents-All .c3-block2 {
        margin: calc(76*(100vw/750)) 0 0 calc(250*(100vw/750));
    }
    #Contents-All .Contents3 .credit {
        margin: calc(58*(100vw/750)) 0 0 calc(56*(100vw/750));
    }
    /*==========================
    Contents4
    ==========================*/
    #Contents-All .img13 {
        margin: calc(180*(100vw/750)) auto calc(76*(100vw/750));
    }
    #Contents-All .c4-block2 {
        margin: calc(76*(100vw/750)) 0 0 calc(250*(100vw/750));
    }
    #Contents-All .Contents4 .credit {
        margin: calc(60*(100vw/750)) 0 calc(200*(100vw/750)) calc(54*(100vw/750));
    }
    /*==========================
    Contents
    ==========================*/
    #Contents-All .c5-block1 {
        margin-left: calc(54*(100vw/750));
    }
    #Contents-All .c5-block2 {
        margin: calc(124*(100vw/750)) 0 0 calc(170*(100vw/750));
    }
    #Contents-All .img19 {
        margin-top: calc(74*(100vw/750));
    }
    #Contents-All .Contents5 .credit {
        margin: calc(60*(100vw/750)) 0 0 calc(54*(100vw/750));
    }
    /*==========================
    Contents6
    ==========================*/
    #Contents-All .c6-block1 {
        margin: calc(192*(100vw/750)) auto 0;
    }
    #Contents-All .c6-block2 {
        margin-top: calc(122*(100vw/750));
    }
    #Contents-All .Contents6 .credit {
        margin: calc(58*(100vw/750)) 0 0 calc(56*(100vw/750));
    }
    /*==========================
    nav-area
    ==========================*/
    #Contents-All .nav-tittle {
        position: relative;
        font-size: calc(40*(100vw/750));
        letter-spacing: 0.4px;
        text-align: center;
        font-family: 'crim';
        margin-top: calc(140*(100vw/750));
    }
    #Contents-All .nav-tittle::before {
        content: '';
        display: block;
        width: calc(619*(100vw/750));
        height: calc(20*(100vw/750));
        position: absolute;
        top: calc(21*(100vw/750));
        left: calc(65*(100vw/750));
        z-index: -1;
        background-color: #D9CAC8;
    }
    #Contents-All .nav-list {
        margin: calc(43*(100vw/750)) auto calc(134*(100vw/750));
    }
    #Contents-All .nav-list li {
        font-size: calc(24*(100vw/750));
        line-height: 2.6;
        letter-spacing: 0.3px;
        margin: 0 calc(20*(100vw/750));
    }
    /*==========================
    Slider
    ==========================*/
    #Contents-All .slick-dots li.slick-active button:before {
        background-color: #7F4D49;
        content: "";
        width: calc(12*(100vw/750));
        height: calc(12*(100vw/750));
        border-radius: 5px;
    }
    #Contents-All .slick-dots li button:before {
        background-color: #D9CAC8;
        content: "";
        width: calc(12*(100vw/750));
        height: calc(12*(100vw/750));
        border-radius: 5px;
        opacity: 1 !important;
    }
    #Contents-All .slick-dots {
        left: calc(0*(100vw/750)) !important;
        bottom: calc(-48*(100vw/750)) !important;
    }
    #Contents-All .slick-dots li {
        width: calc(12*(100vw/750)) !important;
        height: calc(12*(100vw/750)) !important;
        margin: 0 calc(9*(100vw/750)) !important;
    }
    #Contents-All .slick-dots li button {
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
    }
}
/**********************************タブレット*************************************/
@media only screen and (min-width: 561px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    #Contents-All .item-flex{display: flex;flex-wrap: wrap;justify-content: center;}
    #Contents-All .item-flex-reverce{flex-direction: row-reverse;}
    #Contents-All .sp-only {display: none;}
    /*==========================
    ipad size
    ==========================*/
    @media screen and (min-width: 561px) and (max-width: 768px) {
        #Contents-All .c-txt {font-size: calc(14*(100vw/1400)) !important;}
        #Contents-All .credit {font-size: calc(11*(100vw/1400)) !important;}
        #Contents-All .nav-tittle {font-size: calc(21*(100vw/1400)) !important;}
        #Contents-All .nav-list li {font-size: calc(14*(100vw/1400)) !important;}
    }
    /*==========================
    共通項目
    ==========================*/
    #Contents-All {
        width: calc(1400*(100vw/1400));
        margin: calc(80*(100vw/1400)) auto 0;
    }
    #Contents-All .size300 {width: calc(300*(100vw/1400));}
    #Contents-All .size340 {width: calc(340*(100vw/1400));}
    #Contents-All .size380 {width: calc(380*(100vw/1400));}
    #Contents-All .size420 {width: calc(420*(100vw/1400));}
    #Contents-All .size460 {width: calc(460*(100vw/1400));}
    #Contents-All .size576 {width: calc(576*(100vw/1400));}
    #Contents-All .size640 {width: calc(640*(100vw/1400));}
    #Contents-All .size720 {width: calc(720*(100vw/1400));}
    /***********フォント *************/
    #Contents-All .c-txt {
        font-size: 14px;
        line-height: 2;
        letter-spacing: 1.3px;
        text-align: center;
    }
    #Contents-All .credit {
        font-size: 11px;
        line-height: 2;
        letter-spacing: 0.3px;
    }
    /*==========================
    Main_Visual_Area
    ==========================*/
    #Contents-All .Main_Visual_Area {
        margin: 0 auto;
    }
    /*==========================
    Contents1
    ==========================*/
    #Contents-All .c1-flex-area {
        margin-top: calc(150*(100vw/1400));
    }
    #Contents-All .c1-block2 {
        margin: calc(160*(100vw/1400)) calc(80*(100vw/1400)) 0 calc(-150*(100vw/1400));
    }
    #Contents-All .img4 {
        margin: calc(-130*(100vw/1400)) 0 0 calc(795*(100vw/1400));
    }
    #Contents-All .Contents1 .credit {
        margin: calc(-310*(100vw/1400)) 0 calc(416*(100vw/1400)) calc(225*(100vw/1400));
    }
    #Contents-All .Contents1 .Slide_Area {
        height: calc(374*(100vw/1400));
    }
    /*==========================
    Contents2
    ==========================*/
    #Contents-All .c2-block2 {
        margin: calc(300*(100vw/1400)) 0 0 calc(80*(100vw/1400));
    }
    #Contents-All .Contents2 .credit {
        margin: calc(-235*(100vw/1400)) 0 0 calc(240*(100vw/1400));
    }
    #Contents-All .img5 {
        margin: calc(340*(100vw/1400)) auto 0;
    }
    #Contents-All .Contents2 .Slide_Area {
        height: calc(525*(100vw/1400));
    }
    /*==========================
    Contents3
    ==========================*/
    #Contents-All .img11 {
        margin: calc(150*(100vw/1400)) 0 0 calc(760*(100vw/1400));
    }
    #Contents-All .c3-block1 {
        margin: calc(-175*(100vw/1400)) calc(-40*(100vw/1400)) 0 calc(-160*(100vw/1400));
    }
    #Contents-All .c3-block2 {
        margin-top: calc(150*(100vw/1400));
        mix-blend-mode: multiply;
    }
    #Contents-All .Contents3 .credit {
        margin: calc(35*(100vw/1400)) 0 0 calc(640*(100vw/1400));
    }
    /*==========================
    Contents4
    ==========================*/
    #Contents-All .img13 {
        margin: calc(148*(100vw/1400)) auto calc(80*(100vw/1400));
    }
    #Contents-All .c4-block2 {
        margin: calc(148*(100vw/1400)) 0 0 calc(150*(100vw/1400));
    }
    #Contents-All .Contents4 .credit {
        margin: calc(-165*(100vw/1400)) 0 calc(272*(100vw/1400)) calc(265*(100vw/1400));
    }
    /*==========================
    Contents5
    ==========================*/
    #Contents-All .c5-block2 {
        margin: calc(150*(100vw/1400)) 0 0 calc(40*(100vw/1400));
    }
    #Contents-All .img19 {
        margin: calc(80*(100vw/1400)) 0 0 calc(435*(100vw/1400));
    }
    #Contents-All .Contents5 .credit {
        margin: calc(34*(100vw/1400)) 0 calc(147*(100vw/1400)) calc(436*(100vw/1400));
    }
    #Contents-All .Contents5 .Slide_Area {
        height: calc(425*(100vw/1400));
    }
    /*==========================
    Contents6
    ==========================*/
    #Contents-All .c6-block2 {
        margin: calc(230*(100vw/1400)) calc(80*(100vw/1400)) 0 0;
    }
    #Contents-All .Contents6 .credit {
        margin: calc(-166*(100vw/1400)) 0 0 calc(740*(100vw/1400));
    }
    #Contents-All .Contents6 .Slide_Area {
        height: calc(525*(100vw/1400));
    }
    #Contents-All .img23 {
        margin: calc(100*(100vw/1400)) auto calc(140*(100vw/1400));
    }
    /*==========================
    nav-area
    ==========================*/
    #Contents-All .nav-tittle {
        position: relative;
        font-size: 21px;
        text-align: center;
        font-family: 'crim';
        margin-top: calc(240*(100vw/1400));
    }
    #Contents-All .nav-tittle::before {
        content: '';
        display: block;
        width: calc(310*(100vw/1400));
        height: calc(9*(100vw/1400));
        position: absolute;
        top: calc(12*(100vw/1400));
        left: calc(545*(100vw/1400));
        z-index: -1;
        background-color: #D9CAC8;
    }
    #Contents-All .nav-list {
        width: calc(600*(100vw/1400));
        margin: calc(18*(100vw/1400)) auto;
    }
    #Contents-All .nav-list li {
        font-size: 14px;
        letter-spacing: 0.1px;
        line-height: 4.2;
        margin: 0 calc(16*(100vw/1400));
    }
    /*==========================
    Slider
    ==========================*/
    #Contents-All .slick-dots li.slick-active button:before {
        background-color: #7F4D49;
        content: "";
        width: calc(10*(100vw/1400));
        height: calc(10*(100vw/1400));
        border-radius: 5px;
    }
    #Contents-All .slick-dots li button:before {
        background-color: #D9CAC8;
        content: "";
        width: calc(10*(100vw/1400));
        height: calc(10*(100vw/1400));
        border-radius: 5px;
        opacity: 1 !important;
    }
    #Contents-All .slick-dots li {
        width: calc(10*(100vw/1400)) !important;
        height: calc(10*(100vw/1400)) !important;
        margin: 0 5px !important;
    }
    #Contents-All .slick-dots {
        left: 0px !important;
        bottom: calc(-33*(100vw/1400));
    }
}
/*************************************PC****************************************/
@media screen and ( min-width:1025px ) {
    /* #Contents-All {
        background-image: url(../img/pc.jpg);
        background-size: 100%;
        background-position-y: -178px;
    } */
    #Contents-All .item-flex{display: flex;flex-wrap: wrap;justify-content: center;}
    #Contents-All .item-flex-reverce{flex-direction: row-reverse;}
    #Contents-All .sp-only {display: none;}
    /*==========================
    共通項目
    ==========================*/
    #Contents-All {
        width: 1400px;
        margin: 80px auto 0;
    }
    #Contents-All .size300 {width: 300px;}
    #Contents-All .size340 {width: 340px;}
    #Contents-All .size380 {width: 380px;}
    #Contents-All .size420 {width: 420px;}
    #Contents-All .size460 {width: 460px;}
    #Contents-All .size576 {width: 576px;}
    #Contents-All .size640 {width: 640px;}
    #Contents-All .size720 {width: 720px;}
    /***********フォント *************/
    #Contents-All .c-txt {
        font-size: 14px;
        line-height: 2;
        letter-spacing: 1.3px;
        text-align: center;
    }
    #Contents-All .credit {
        font-size: 11px;
        line-height: 2;
        letter-spacing: 0.3px;
    }
    /*==========================
    Main_Visual_Area
    ==========================*/
    #Contents-All .Main_Visual_Area {
        margin: 0 auto;
    }
    /*==========================
    Contents1
    ==========================*/
    #Contents-All .c1-flex-area {
        margin-top: 150px;
    }
    #Contents-All .c1-block2 {
        margin: 160px 80px 0 -150px;
    }
    #Contents-All .img4 {
        margin: -130px 0 0 795px;
    }
    #Contents-All .Contents1 .credit {
        margin: -310px 0 416px 225px;
    }
    #Contents-All .Contents1 .Slide_Area {
        height: 374px;
    }
    /*==========================
    Contents2
    ==========================*/
    #Contents-All .c2-block2 {
        margin: 300px 0 0 80px;
    }
    #Contents-All .Contents2 .credit {
        margin: -235px 0 0 240px;
    }
    #Contents-All .img5 {
        margin: 340px auto 0;
    }
    #Contents-All .Contents2 .Slide_Area {
        height: 525px;
    }
    /*==========================
    Contents3
    ==========================*/
    #Contents-All .img11 {
        margin: 150px 0 0 760px;
    }
    #Contents-All .c3-block1 {
        margin: -175px -40px 0 -160px;
    }
    #Contents-All .c3-block2 {
        margin-top: 150px;
        mix-blend-mode: multiply;
    }
    #Contents-All .Contents3 .credit {
        margin: 35px 0 0 640px;
    }
    /*==========================
    Contents4
    ==========================*/
    #Contents-All .img13 {
        margin: 148px auto 80px;
    }
    #Contents-All .c4-block2 {
        margin: 148px 0 0 150px;
    }
    #Contents-All .Contents4 .credit {
        margin: -165px 0 272px 265px;
    }
    /*==========================
    Contents5
    ==========================*/
    #Contents-All .c5-block2 {
        margin: 150px 0 0 40px;
    }
    #Contents-All .img19 {
        margin: 80px 0 0 435px;
    }
    #Contents-All .Contents5 .credit {
        margin: 34px 0 147px 436px;
    }
    #Contents-All .Contents5 .Slide_Area {
        height: 425px;
    }
    /*==========================
    Contents6
    ==========================*/
    #Contents-All .c6-block2 {
        margin: 230px 80px 0 0;
    }
    #Contents-All .Contents6 .credit {
        margin: -166px 0 0 740px;
    }
    #Contents-All .Contents6 .Slide_Area {
        height: 525px;
    }
    #Contents-All .img23 {
        margin: 100px auto 140px;
    }
    /*==========================
    nav-area
    ==========================*/
    #Contents-All .nav-tittle {
        position: relative;
        font-size: 21px;
        text-align: center;
        font-family: 'crim';
        margin-top: 240px;
    }
    #Contents-All .nav-tittle::before {
        content: '';
        display: block;
        width: 310px;
        height: 9px;
        position: absolute;
        top: 12px;
        left: 545px;
        z-index: -1;
        background-color: #D9CAC8;
    }
    #Contents-All .nav-list {
        width: 600px;
        margin: 18px auto;
    }
    #Contents-All .nav-list li {
        font-size: 14px;
        letter-spacing: 0.1px;
        line-height: 4.2;
        margin: 0 16px;
    }
    /*==========================
    Slider
    ==========================*/
    #Contents-All .slick-dots li.slick-active button:before {
        background-color: #7F4D49;
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 5px;
    }
    #Contents-All .slick-dots li button:before {
        background-color: #D9CAC8;
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 5px;
        opacity: 1 !important;
    }
    #Contents-All .slick-dots li {
        width: 10px !important;
        height: 10px !important;
        margin: 0 5px !important;
    }
    #Contents-All .slick-dots {
        left: 0px !important;
        bottom: -33px !important;
    }
}