@charset "UTF-8";
#Wrap {width: 100%;}
#Contents-All a {display: block;}
#Contents-All .img-width {width: 100%;}
#Contents-All a:hover {cursor: pointer; opacity: 0.5;}
#Contents-All {font-feature-settings: 'palt'; text-align: justify; text-justify: inter-ideograph;} 
#Contents-All p {font-family: '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic', 'メイリオ', sans-serif;}
#Contents-All .futura-font {font-family: futura-pt, sans-serif;font-weight: 400;font-style: normal !important;}
#Contents-All img {display: block;}
#Contents-All .credit a {display: inline-block !important;}
#Contents-All .relative-area {position: relative;}
#Contents-All .fade-in{opacity: 0; transition: all 2s;}
#Contents-All .fade-in.done2{opacity : 1;}
#Contents-All .scroll-up{opacity: 0; transform: translateY(100px); transition: all 2s;}
#Contents-All .scroll-up.done1{opacity : 1; transform : translate(0, 0);}
/*************************************SP****************************************/
@media screen and ( max-width:560px ) {
    /* #Contents-All {
        background-image: url(../img/sp.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position-y: -111px;
    } */
    #Contents-All {width: calc(750*(100vw/750)); margin: 0 auto;}
    #Contents-All .pc-only {display: none;}
    #Contents-All .item-flex-sp {display: flex;flex-wrap: wrap;justify-content: center;}
    /*==========================
    共通項目
    ==========================*/
    #Contents-All .size540 {width: calc(540*(100vw/750));}
    #Contents-All .size570 {width: calc(570*(100vw/750));}
    #Contents-All .size625 {width: calc(625*(100vw/750));}
    #Contents-All .size685 {width: calc(685*(100vw/750));}
    #Contents-All .size750 {width: calc(750*(100vw/750));}
    /***********フォント *************/
    #Contents-All .c-txt {
        font-size: calc(28*(100vw/750));
        line-height: 1.9;
        letter-spacing: 0.5px;
        text-align: center;
    }
    #Contents-All .credit {
        font-size: calc(22*(100vw/750));
        line-height: 2.3;
        letter-spacing: 0.3px;
        text-align: center;
    }
    /*==========================
    Contents1
    ==========================*/
    #Contents-All .c1-block1 {
        margin-top: calc(152*(100vw/750));
    }
    #Contents-All .c1-txt {
        margin-top: calc(48*(100vw/750));
    }
    #Contents-All .img3 {
        margin: calc(166*(100vw/750)) auto 0;
    }
    /*==========================
    Contents2
    ==========================*/
    #Contents-All .c2-txt {
        margin-top: calc(48*(100vw/750));
    }
    #Contents-All .c2-block2 {
        margin: calc(112*(100vw/750)) 0 0 calc(146*(100vw/750));
    }
    #Contents-All .c2-block2::before {
        content: '';
        display: block;
        width: calc(530*(100vw/750));
        height: calc(646*(100vw/750));
        position: absolute;
        top: calc(-60*(100vw/750));
        left: calc(-112*(100vw/750));
        background-color: #c7d9df;
        z-index: -999;
    }
    #Contents-All .c2-credit {
        margin-top: calc(46*(100vw/750));
    }
    /*==========================
    Contents3
    ==========================*/
    #Contents-All .c3-block1 {
        margin-top: calc(166*(100vw/750));
    }
    #Contents-All .c3-block2 {
        margin: calc(58*(100vw/750)) 0 0 calc(210*(100vw/750));
    }
    #Contents-All .c3-block2::before {
        content: '';
        display: block;
        width: calc(684*(100vw/750));
        height: calc(604*(100vw/750));
        position: absolute;
        top: calc(-232*(100vw/750));
        left: calc(-178*(100vw/750));
        background-color: #c7d9df;
        z-index: -999;
    }
    #Contents-All .c3-txt {
        margin-top: calc(50*(100vw/750));
    }
    /*==========================
    Contents4
    ==========================*/
    #Contents-All .c4-block {
        margin: calc(52*(100vw/750)) auto 0;
    }
    #Contents-All .c4-credit {
        margin-top: calc(46*(100vw/750));
    }
    /*==========================
    Contents5
    ==========================*/
    #Contents-All .c5-block1 {
        margin: calc(166*(100vw/750)) auto 0;
    }
    #Contents-All .c5-txt {
        margin-top: calc(46*(100vw/750));
    }
    #Contents-All .img8 {
        margin: calc(54*(100vw/750)) auto 0;
    }
    #Contents-All .c5-credit {
        margin-top: calc(44*(100vw/750));
    }
    #Contents-All .Contents5::before {
        content: '';
        display: block;
        width: 100%;
        height: calc(762*(100vw/750));
        position: absolute;
        top: calc(738*(100vw/750));
        left: 0;
        background-color: #c7d9df;
        z-index: -999;
    }
    /*==========================
    check-all-items
    ==========================*/
    #Contents-All .check-item-all {
        width: calc(355*(100vw/750));
        border: 1px solid #333333;
        text-align: center;
        margin: calc(138*(100vw/750)) auto calc(158*(100vw/750));
    }
    #Contents-All .check-item-all a {
        display: inline-block;
        font-size: calc(24*(100vw/750));
        line-height: 2.45;
        letter-spacing: 0.3px;
    }
}
/**********************************タブレット*************************************/
@media only screen and (min-width: 561px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    #Contents-All {width: calc(1200*(100vw/1200));margin: calc(80*(100vw/1200)) auto 0;}
    #Contents-All .item-flex {display: flex;justify-content: center;}
    #Contents-All .item-flex-reverce {flex-direction: row-reverse;}
    #Contents-All .sp-only {display: none;}
    .main-area::after {margin: 0 auto !important;}
    /*==========================
    ipad size
    ==========================*/
    @media screen and (min-width: 561px) and (max-width: 768px) {
        #Contents-All .c-txt {font-size: calc(14*(100vw/1200)) !important;}
        #Contents-All .credit {font-size: calc(11*(100vw/1200)) !important;}
    }
    /*==========================
    共通項目
    ==========================*/
    #Contents-All .size320 {width: calc(320*(100vw/1200));}
    #Contents-All .size360 {width: calc(360*(100vw/1200));}
    #Contents-All .size395 {width: calc(395*(100vw/1200));}
    #Contents-All .size396 {width: calc(396*(100vw/1200));}
    #Contents-All .size450 {width: calc(450*(100vw/1200));}
    #Contents-All .size560 {width: calc(560*(100vw/1200));}
    #Contents-All .size900 {width: calc(900*(100vw/1200));}
    /****************** フォント *******************/
    #Contents-All .c-txt {
        font-size: 14px;
        line-height: 2;
        letter-spacing: 0.4px;
    }
    #Contents-All .credit {
        font-size: 11px;
        line-height: 1.8;
        letter-spacing: 0.3px;
    }
    /*==========================
    main-visual
    ==========================*/
    #Contents-All .main-visual {
        margin: 0 auto;
        padding-top: calc(30*(100vw/1200));
    }
    #Contents-All .main-visual-area::before {
        content: '';
        display: block;
        width: 100vw;
        height: calc(660*(100vw/1200));
        position: absolute;
        top: 0;
        left: 0;
        background-color: #c7d9df;
        z-index: -999;
    }
    #Contents-All .main-visual-area::after {
        content: '';
        display: block;
        width: 100vw;
        height: calc(660*(100vw/1200));
        position: absolute;
        top: 0;
        right: 0;
        background-color: #c7d9df;
        z-index: -999;
    }
    /*==========================
    Contents1
    ==========================*/
    #Contents-All .c1-block1 {
        margin: calc(130*(100vw/1200)) auto 0;
    }
    #Contents-All .c1-txt {
        margin-top: calc(33*(100vw/1200));
        text-align: center;
    }
    /*==========================
    Contents2
    ==========================*/
    #Contents-All .c2-flex-area {
        margin-top: calc(120*(100vw/1200));
    }
    #Contents-All .c2-block2 {
        margin: calc(200*(100vw/1200)) calc(40*(100vw/1200)) 0 0;
    }
    #Contents-All .c2-txt {
        margin-top: calc(35*(100vw/1200));
        text-align: right;
    }
    #Contents-All .c2-credit {
        margin: calc(17*(100vw/1200)) calc(175*(100vw/1200)) 0 0;
        text-align: right;
    }
    #Contents-All .c2-block2::before {
        content: '';
        display: block;
        width: 100vw;
        height: calc(340*(100vw/1200));
        position: absolute;
        top: calc(-98*(100vw/1200));
        right: calc(92*(100vw/1200));
        background-color: #c7d9df;
        z-index: -999;
    }
    /*==========================
    Contents3
    ==========================*/
    #Contents-All .c3-flex-area {
        margin-top: calc(125*(100vw/1200));
    }
    #Contents-All .c3-block2 {
        margin: calc(197*(100vw/1200)) 0 0 calc(122*(100vw/1200));
    }
    #Contents-All .c3-txt {
        margin: calc(-64*(100vw/1200)) 0 0 calc(181*(100vw/1200));
    }
    #Contents-All .c3-block2::before {
        content: '';
        display: block;
        width: 100vw;
        height: calc(446*(100vw/1200));
        position: absolute;
        top: calc(205*(100vw/1200));
        left: calc(-60*(100vw/1200));
        background-color: #c7d9df;
        z-index: -999;
    }
    /*==========================
    Contents4
    ==========================*/
    #Contents-All .c4-block {
        margin: calc(80*(100vw/1200)) auto 0;
    }
    #Contents-All .c4-credit {
        margin: calc(21*(100vw/1200)) 0 0 calc(376*(100vw/1200));
    }
    /*==========================
    Contents5
    ==========================*/
    #Contents-All .c5-flex-area {
        margin-top: calc(123*(100vw/1200));
    }
    #Contents-All .c5-block2 {
        margin-left: calc(100*(100vw/1200));
    }
    #Contents-All .c5-txt {
        margin-top: calc(95*(100vw/1200));
    }
    #Contents-All .img8 {
        margin-top: calc(30*(100vw/1200));
    }
    #Contents-All .c5-credit {
        margin: calc(-96*(100vw/1200)) 0 calc(177*(100vw/1200)) calc(145*(100vw/1200));
    }
    #Contents-All .Contents5::before {
        content: '';
        display: block;
        width: 100vw;
        height: calc(340*(100vw/1200));
        position: absolute;
        top: calc(340*(100vw/1200));
        left: 0;
        background-color: #c7d9df;
        z-index: -999;
    }
    #Contents-All .Contents5::after {
        content: '';
        display: block;
        width: 100vw;
        height: calc(340*(100vw/1200));
        position: absolute;
        top: calc(340*(100vw/1200));
        right: 0;
        background-color: #c7d9df;
        z-index: -999;
    }
    /*==========================
    check-all-items
    ==========================*/
    #Contents-All .check-item-all {
        width: calc(218*(100vw/1200));
        border: 1px solid #333333;
        text-align: center;
        margin: calc(76*(100vw/1200)) auto;
    }
    #Contents-All .check-item-all a {
        display: inline-block;
        width: 100%;
        font-size: 15px;
        line-height: 2.3;
        letter-spacing: 0.35px;
        font-weight: 400 !important;
    }
}
/*************************************PC****************************************/
@media screen and ( min-width:1025px ) {
    /* #Contents-All {
        background-image: url(../img/pc.jpg);
        background-size: 1200px;
        background-position-y: -178px;
    } */
    #Contents-All {width: 1200px;margin: 80px auto 0;}
    #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;}
    .main-area::after {margin: 0 auto !important;}
    /*==========================
    共通項目
    ==========================*/
    #Contents-All .size320 {width: 320px;}
    #Contents-All .size360 {width: 360px;}
    #Contents-All .size395 {width: 395px;}
    #Contents-All .size396 {width: 396px;}
    #Contents-All .size450 {width: 450px;}
    #Contents-All .size560 {width: 560px;}
    #Contents-All .size900 {width: 900px;}
    /****************** フォント *******************/
    #Contents-All .c-txt {
        font-size: 14px;
        line-height: 2;
        letter-spacing: 0.4px;
    }
    #Contents-All .credit {
        font-size: 11px;
        line-height: 1.8;
        letter-spacing: 0.3px;
    }
    /*==========================
    main-visual
    ==========================*/
    #Contents-All .main-visual {
        margin: 0 auto;
        padding-top: 30px;
    }
    #Contents-All .main-visual::before {
        content: '';
        display: block;
        width: 100vw;
        height: 660px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #c7d9df;
        z-index: -999;
    }
    #Contents-All .main-visual::after {
        content: '';
        display: block;
        width: 100vw;
        height: 660px;
        position: absolute;
        top: 0;
        right: 0;
        background-color: #c7d9df;
        z-index: -999;
    }
    /*==========================
    Contents1
    ==========================*/
    #Contents-All .c1-block1 {
        margin: 130px auto 0;
    }
    #Contents-All .c1-txt {
        margin-top: 33px;
        text-align: center;
    }
    /*==========================
    Contents2
    ==========================*/
    #Contents-All .c2-flex-area {
        margin-top: 120px;
    }
    #Contents-All .c2-block2 {
        margin: 200px 40px 0 0;
    }
    #Contents-All .c2-txt {
        margin-top: 35px;
        text-align: right;
    }
    #Contents-All .c2-credit {
        margin: 17px 175px 0 0;
        text-align: right;
    }
    #Contents-All .c2-block2::before {
        content: '';
        display: block;
        width: 100vw;
        height: 340px;
        position: absolute;
        top: -98px;
        right: 92px;
        background-color: #c7d9df;
        z-index: -999;
    }
    /*==========================
    Contents3
    ==========================*/
    #Contents-All .c3-flex-area {
        margin-top: 125px;
    }
    #Contents-All .c3-block2 {
        margin: 197px 0 0 122px;
    }
    #Contents-All .c3-txt {
        margin: -64px 0 0 181px;
    }
    #Contents-All .c3-block2::before {
        content: '';
        display: block;
        width: 100vw;
        height: 446px;
        position: absolute;
        top: 205px;
        left: -60px;
        background-color: #c7d9df;
        z-index: -999;
    }
    /*==========================
    Contents4
    ==========================*/
    #Contents-All .c4-block {
        margin: 80px auto 0;
    }
    #Contents-All .c4-credit {
        margin: 21px 0 0 376px;
    }
    /*==========================
    Contents5
    ==========================*/
    #Contents-All .c5-flex-area {
        margin-top: 123px;
    }
    #Contents-All .c5-block2 {
        margin-left: 100px;
    }
    #Contents-All .c5-txt {
        margin-top: 95px;
    }
    #Contents-All .img8 {
        margin-top: 30px;
    }
    #Contents-All .c5-credit {
        margin: -96px 0 177px 145px;
    }
    #Contents-All .Contents5::before {
        content: '';
        display: block;
        width: 100vw;
        height: 340px;
        position: absolute;
        top: 340px;
        left: 0;
        background-color: #c7d9df;
        z-index: -999;
    }
    #Contents-All .Contents5::after {
        content: '';
        display: block;
        width: 100vw;
        height: 340px;
        position: absolute;
        top: 340px;
        right: 0;
        background-color: #c7d9df;
        z-index: -999;
    }
    /*==========================
    check-all-items
    ==========================*/
    #Contents-All .check-item-all {
        width: 218px;
        border: 1px solid #333333;
        text-align: center;
        margin: 76px auto;
    }
    #Contents-All .check-item-all a {
        display: inline-block;
        width: 100%;
        font-size: 15px;
        line-height: 2.3;
        letter-spacing: 0.35px;
        font-weight: 400 !important;
    }
}