@charset "UTF-8";
html {font-size: 62.5%;}
#Wrap {width: 100%;}
#contentsAll {font-feature-settings: 'palt'; text-align: justify; text-justify: inter-ideograph;} 
#contentsAll p {font-family: '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic', 'メイリオ', sans-serif;}
#contentsAll a:hover {cursor: pointer; opacity: .7;}
#contentsAll ul li {list-style: none;}
#contentsAll .imgMaxWidth {width: 100%;}
#contentsAll .relativeArea {position: relative;}
#contentsAll .futuraFont {font-family: futura-pt, sans-serif;font-weight: 400;font-style: normal;}
#contentsAll .scrollFade {opacity: 0; transform: translateY(100px); transition: all 2s;}
#contentsAll .scrollFade.done {opacity : 1; transform : translate(0, 0);}
#contentsAll .loadFade {opacity : 0; transform: translateY(100px); transition : all 2s;}
#contentsAll .loadFade.done {opacity : 1; transform : translate(0, 0);}

#contentsAll .slick-dots li.slick-active button:before {width: 1rem;height: 1rem;}
#contentsAll .slick-dots li button:before {width: 1rem;height: 1rem;}
#contentsAll .slick-dots li.slick-active button:before {background-color: #90b7a5;content: "";border-radius: 5px;}
#contentsAll .slick-dots li button:before {background-color: #d3e2db;content: "";border-radius: 5px;opacity: 1 !important;}
#contentsAll .slick-dots li button:before {width: 1rem;height: 1rem;}
#contentsAll .slick-dots {bottom: -3rem !important;}
#contentsAll .slick-dots li {width: 1rem !important;height: 1rem !important;margin: 0 .5rem !important;}
.slider img{height: auto;width: 100%;}





/*************************************SP****************************************/
@media screen and ( max-width:560px ) {
    /* #contentsAll {background-position-y: -111px;background-image: url(../img/sp.jpg);background-size: 100%;} */
    #contentsAll {width: calc(750*(100vw/750)); margin: 0 auto;}
    #contentsAll .pcOnly {display: none;}
    #contentsAll .flexItem_sp {display: flex;flex-wrap: wrap;justify-content: center;}

    #contentsAll .slick-dots li button:before {width: calc(12*(100vw/750));height: calc(12*(100vw/750));}
    #contentsAll .slick-dots li.slick-active button:before {width: calc(12*(100vw/750));height: calc(12*(100vw/750));}
    #contentsAll .slick-dots li {width: calc(12*(100vw/750)) !important;height: calc(12*(100vw/750)) !important;margin: 0 calc(9*(100vw/750)) !important;}
    #contentsAll .slick-dots {bottom: calc(-40*(100vw/750)) !important;}
    #contentsAll .slick-prev.slick-arrow {display: none !important;}
    #contentsAll .slick-next.slick-arrow {display: none !important;}

    


    /*==========================
    Font
    ==========================*/
    #contentsAll .contentsCredit {
        font-size: calc(22*(100vw/750));
        line-height: 2.3;
        letter-spacing: .03rem;
    }
    /*==========================
    mainTextArea
    ==========================*/
    #contentsAll .contentsTxt {
        font-size: calc(28*(100vw/750));
        line-height: 1.86;
        letter-spacing: .025em;
        text-align: center;
    }
    /*==========================
    mainTextArea
    ==========================*/
    #contentsAll .mainTextArea .contentsTxt:nth-of-type(1) {
        margin-top: calc(139*(100vw/750));
    }
    #contentsAll .mainTextArea .contentsTxt:nth-of-type(2) {
        margin: calc(12*(100vw/750)) 0;
    }
    /*==========================
    Contents1
    ==========================*/
    #contentsAll .c1Block1 {
        width: calc(650*(100vw/750));
        margin: calc(141*(100vw/750)) 0 0 calc(80*(100vw/750));
    }
    #contentsAll .c1Block2 {
        width: calc(496*(100vw/750));
        margin: calc(60*(100vw/750)) 0 0 calc(172*(100vw/750));
    }
    #contentsAll .Contents1 .contentsCredit {
        margin-top: calc(36*(100vw/750));
    }
    #contentsAll .Contents1 .c1Block1 .textCenter {
        margin-top: calc(57 *(100vw/750));
    }
    #contentsAll .Contents1 .c1Block1 .textCenter .contentsTxt{
        text-align: justify;
        width: calc(588 *(100vw/750));
    }
    #contentsAll .Contents1 .c1Block1 .textCenter .contentsTxt:nth-child(2){
        margin-top: calc(18 *(100vw/750));
        text-align: justify;
        width: calc(588 *(100vw/750));
    }
    
    /*==========================
    Contents2
    ==========================*/
    #contentsAll .c2Block1 {
        width: calc(600*(100vw/750));
        margin: calc(190*(100vw/750)) 0 0 0;
    }
    #contentsAll .c2Block2 {
        width: calc(473*(100vw/750));
        margin: calc(-25*(100vw/750)) 0 0 calc(275*(100vw/750));
    }
    #contentsAll .Contents2 .contentsCredit {
        margin-top: calc(36*(100vw/750));
    }
    #contentsAll .Contents2 .textCenter{
        margin-top: calc(60 *(100vw/750));
        margin-left: calc(80 *(100vw/750));
    }
    #contentsAll .Contents2 .contentsTxt:nth-child(1){
        text-align: justify;
        width: calc(591 *(100vw/750));
    }
    #contentsAll .Contents2 .contentsTxt:nth-child(2){
        text-align: justify;
        width: calc(585 *(100vw/750));
        margin-top: calc(21 *(100vw/750));
    }
    #contentsAll .Contents2 .c2Img3{
        width: calc(463 *(100vw/750));
        margin-top: calc(65 *(100vw/750));
        margin-left: calc(80 *(100vw/750));
    }
    #contentsAll .Contents2 .contentsCredit{
        margin-top: calc(35*(100vw/750));
        margin-left: calc(80 *(100vw/750));
    }
    /*==========================
    Contents3
    ==========================*/
    #contentsAll .c3Img1 {
        width: calc(600*(100vw/750));
        margin-top: calc(189*(100vw/750));
        margin-left: calc(131*(100vw/750));
        margin-bottom: calc(67*(100vw/750));
    }
    #contentsAll .c3Img2 {
        width: calc(463*(100vw/750));
        margin-left: calc(39*(100vw/750));
    }
    #contentsAll .c3Img3 {
        width: calc(463*(100vw/750));
        margin: calc(60*(100vw/750)) auto 0;
    }
    #contentsAll .Contents3 .contentsCredit {
        margin-top: calc(76*(100vw/750));
        text-align: center;
    }
    #contentsAll .Contents3 .contentsTxt:nth-child(2){
        text-align: justify;
        width: calc(588 *(100vw/750));
        margin-top: calc(57 *(100vw/750));
        margin-left: calc(80 *(100vw/750));
    }
    #contentsAll .Contents3 .contentsTxt:nth-child(3){
        text-align: justify;
        width: calc(588 *(100vw/750));
        margin-top: calc(18 *(100vw/750));
        margin-left: calc(80 *(100vw/750));
    }
    #contentsAll .Contents3 .text-center{
        margin: auto;
        width: calc(515*(100vw/750));
    }
    /*==========================
    Contents4
    ==========================*/
    #contentsAll .c4Block1 {
        width: calc(650*(100vw/750));
        margin: auto;
        margin-top: calc(207*(100vw/750));
        position: relative;
    }
    #contentsAll .c4Block2 {
        width: calc(463*(100vw/750));
        margin: calc(110*(100vw/750)) 0 0 calc(287*(100vw/750));
    }
    #contentsAll .Contents4 .contentsCredit {
        margin-top: calc(34*(100vw/750));
    }
    #contentsAll .Contents4 .c4Img3{
        width: calc(563 *(100vw/750));
        margin-top: calc(69 *(100vw/750));
        margin-left: calc(19 *(100vw/750));
    }
    #contentsAll .Contents4 .contentsTxt{
        text-align: justify;
        width: calc(584 *(100vw/750));
        margin-top: calc(58 *(100vw/750));
        margin-left: calc(85 *(100vw/750));
    }
    #contentsAll .Contents4 .contentsTxt.text2{
        margin-top: calc(19 *(100vw/750));
        letter-spacing: .025em;
    }
    #contentsAll .Contents4 .c4Block1 .position{
        position: absolute;
        width: calc(39*(100vw/750));
        top: 25px;
        left: 15px;
        z-index: 4;
    }
     /*==========================
    Contents5
    ==========================*/
    #contentsAll .Contents5 .c5Block1{
        width: calc(463 *(100vw/750));
        margin-top: calc(56 *(100vw/750));
        margin-left: calc(81 *(100vw/750));
    }
    #contentsAll .Contents5 .c5Block2{
        width: calc(550 *(100vw/750));
        margin-top: calc(68 *(100vw/750));
        margin-left: calc(160 *(100vw/750));
    }
    #contentsAll .Contents5 .contentsCredit{
        margin-top: calc(33 *(100vw/750));
    }
    #contentsAll .staffText{
        text-align: center;
        font-size:calc(24 *(100vw/750));
        margin-bottom: calc(120 *(100vw/750));
        line-height: 1.833;
        letter-spacing: .025em;
        color: #90b7a5;
    }

    /*==========================
    View All
    ==========================*/
    #contentsAll .checkItemAll {
        width: calc(355*(100vw/750));
        margin: calc(108*(100vw/750)) auto calc(110*(100vw/750));
        text-align: center;
        border: 1px solid #333333;
    }
    #contentsAll .checkItemAll a {
        display: inline-block;
        width: 100%;
        font-size: calc(24*(100vw/750));
        line-height: 2.45;
        letter-spacing: .03rem;
    }

    .footer .footer-inner {
        margin: 0 !important;
    }

    .slick-dots li.slick-active button {
        background: none;
    }
}
/*************************************PC****************************************/
@media screen and (max-width: 1200px) and (min-width: 561px) {
    html {font-size: calc(10* (100vw / 1200)) !important;}
}
@media only screen and (min-width: 561px) {
    /* #contentsAll {background-position-y: -178px;background-image: url(../img/pc.jpg);background-size: 100%;} */
    #contentsAll {width: 120rem;margin: 8rem auto 0;}
    #contentsAll .spOnly {display: none;}
    #contentsAll .flexItem_pc {display: flex;flex-wrap: wrap;justify-content: space-between;
                                flex-direction: row-reverse;width: 101rem;margin: auto;}
    #contentsAll .flexItemReverce_pc {flex-direction: row-reverse;}


    .main-area {
        overflow-x: hidden;
    }
    
    /*==========================
    Font
    ==========================*/
    #contentsAll .contentsCredit {
        font-size: 1.1rem;
        line-height: 1.8;
        letter-spacing: .025em;
    }
    /*==========================
    Mv
    ==========================*/
    #contentsAll .mainVisualArea {
        width: 55rem;
        margin: 0 auto;
    }
    /*==========================
    mainTextArea
    ==========================*/
    #contentsAll .contentsTxt {
        font-size: 1.5rem;
        line-height: 2;
        letter-spacing: 0.025em;
        text-align: center;
    }
    #contentsAll .mainTextArea .contentsTxt:nth-of-type(1) {
        margin-top: 11.3rem;
    }
    #contentsAll .mainTextArea .contentsTxt:nth-of-type(2) {
        margin: 1.8rem 0;
    }
    /*==========================
    Contents1
    ==========================*/
    #contentsAll .mainVisualArea{
        position: relative;
    }
    #contentsAll .mainVisualArea::before{
        content: '';
        display: block;
        position: absolute;
        width: 100vw;
        height: 70rem;
        background-color: #c8e1d5;
        z-index: -10;
    }
    #contentsAll .mainVisualArea::after{
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 100vw;
        height: 70rem;
        background-color: #c8e1d5;
        z-index: -10;
    }
    #contentsAll .Contents1 {
        margin-top: 11.4rem;
    }
    #contentsAll .c1Block1 {
        width: 54rem;
    }
    #contentsAll .c1Block2 {
        width: 45rem;
        margin: 24rem 0 0 0;
    }
    #contentsAll .Contents1 .contentsCredit {
        margin-top: 24.4rem;
        text-align: right;
    }
    #contentsAll .Contents1 .c1Block1 .textCenter{
        margin-top: 7.5rem;
        margin-left: 7rem;
        text-align: left;
    }
    #contentsAll .Contents1 .c1Block1 .textCenter .contentsTxt{
        text-align: left;
    }
    #contentsAll .Contents1 .c1Block1 .textCenter .contentsTxt:nth-child(2){
        margin-top: 1.5rem;
    }
    #contentsAll .Contents1 .c1Block1 .textCenter .contentsCredit{
        margin-top: 2.2rem;
        text-align: left;
    }
    /*==========================
    Contents2
    ==========================*/
    #contentsAll .Contents2 {
        margin-top: 15.8rem;
    }
    #contentsAll .c2Block1 {
        width: 49.8rem;
        margin-left: 5.1rem;
    }
    #contentsAll .c2Block2 {
        width: 43.1rem;
        top: 355px;
        left: 530px;
        position: absolute;
        z-index: 3;
    }
    #contentsAll .Contents2 .contentsCredit {
        text-align: center;
        margin-top: 2.5rem;
    }
    #contentsAll .Contents2 .flexItem_pc{
        flex-direction: inherit;
        position: relative;
    }
    #contentsAll .Contents2 .c2Block1 .contentsTxt:nth-child(2){
        text-align: left;
        margin-top: 7.4rem;
    }
    #contentsAll .Contents2 .c2Block1 .contentsTxt:nth-child(3){
        text-align: left;
        margin-top: 1.7rem;
    }
    #contentsAll .Contents2 .c2Img3{
        width: 42rem;
        margin: auto;
        margin-top: 10rem;
    }
    /*==========================
    Contents3
    ==========================*/
    
    #contentsAll .c3Img1 {
        width: 49.8rem;
    }
    #contentsAll .c3Img2 {
        width: 42rem;
        margin-top: 28rem;
    }
    #contentsAll .Contents3 .contentsCredit {
        margin-top: 5.5rem;
        text-align: center;
    }
    #contentsAll .Contents3{
        margin-top: 15.8rem;
    }
    #contentsAll .Contents3 .flexItem_pc{
        width: 96rem;
    }
    #contentsAll .Contents3 .c3Img1 .contentsTxt:nth-child(2){
        text-align: left;
        margin-top: 7.4rem;
        margin-left: 10.6rem;
    }
    #contentsAll .Contents3 .c3Img1 .contentsTxt:nth-child(3){
        text-align: left;
        margin-top: 1.7rem;
        margin-left: 10.6rem;
    }
    #contentsAll .Contents3 .c3Img3{
        width: 42rem;
        margin: auto;
        margin-top: 7.6rem;
    } 
    #contentsAll .Contents3 .c3Img3 .slider{
        margin: 0 auto;
        width: 42rem;     
    }
    /*==========================
    Contents4
    ==========================*/
    #contentsAll .Contents4 {
        margin-top: 16rem;
    }
    #contentsAll .c4Block1 {
        width: 54rem;
        position: relative;
    }
    #contentsAll .c4Block2 {
        width: 42rem;
        margin: 32rem 0 0 4rem;
    }
    #contentsAll .Contents4 .flexItem{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100rem;
        margin: auto;
    }
    #contentsAll .Contents4 .c4Img3{
        width: 46.8rem;
        margin: auto;
        margin-top: 6rem;
    }
    #contentsAll .Contents4 .text1{
        margin-top: 7.3rem;
    }
    #contentsAll .Contents4 .text2{
        margin-top: 1.7rem;
    }
    #contentsAll .Contents4 .c4Block1 .position{
        position: absolute;
        width: 3.2rem;
        top: 25px;
        left: 15px;
        z-index: 4;
    }
     /*==========================
    Contents5
    ==========================*/
    #contentsAll .Contents5 {
        margin-top: 7.6rem;
    }
    #contentsAll .c5Block1 {
        width: 42rem;
    }
    #contentsAll .c5Block2 {
        width: 49.8rem;
        margin: 16rem 0 0 6rem;
    }
    #contentsAll .Contents5 .flexItem{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 98rem;
        margin: auto;
    }
    #contentsAll .Contents5 .contentsCredit{
        margin-top: 2.6rem;
    }
     /*==========================
    StaffText
    ==========================*/
    #contentsAll .staffText{
        text-align: center;
        font-size: 1.2rem;
        margin-bottom: 9rem;
        line-height: 1.833;
        letter-spacing: .025em;
        color: #90b7a5;
    }

    /*==========================
    View All
    ==========================*/
    #contentsAll .checkItemAll {
        width: 22rem;
        margin: 8.7rem auto;
        text-align: center;
        border: 1px solid #333333;
    }
    #contentsAll .checkItemAll a {
        display: inline-block;
        width: 100%;
        font-size: 1.5rem;
        line-height: 2.3;
        letter-spacing: .02rem;
    }

}