@charset "UTF-8";
#Wrap {width: 100%;}
#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 p,
#Contents-All a,
#Contents-All h3 {color: #595757;}
@font-face {
    font-family: 'amiri';
    src: url(../font/Amiri-Regular.ttf );
}
@font-face {
    font-family: 'noto';
    src: url(../font/NotoSerifJP-Medium.otf );
}
/*************************************SP****************************************/
@media screen and ( max-width:560px ) {
    /* #Contents-All {
        background-image: url(../img/sp1.png);
        background-image: url(../img/sp2.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position-y: -134px;
        background-position-y: 6000px;
    } */
    #Contents-All {margin: calc(60*(100vw/750)) auto calc(160*(100vw/750));}
    #Contents-All .pc-only {display: none;}
    #Contents-All .item-flex-sp {display: flex;flex-wrap: wrap;justify-content: center;}
    /*==========================
    共通項目
    ==========================*/
    #Contents-All .item-size240 {width: calc(240*(100vw/750));}
    #Contents-All .img-size540 {width: calc(540*(100vw/750));}
    #Contents-All .img-size600 {width: calc(600*(100vw/750));}
    #Contents-All .contents-credit {margin-top: calc(35*(100vw/750));text-align: center;}
    #Contents-All .item-flex-area-m-top1-sp {margin-top: calc(57*(100vw/750));}
    #Contents-All .item-flex-area-m-top2 {margin-top: calc(59*(100vw/750));}
    #Contents-All .contents1-txt a {border-bottom: 1px solid #333333;padding-bottom: calc(3*(100vw/750));}
    #Contents-All .contents3-credit2 a:nth-of-type(2) {margin-right: calc(20*(100vw/750));}
    /***********フォント *************/
    #Contents-All .contents1-txt {
        font-family: 'noto' !important;
        font-weight: 400;
        font-style: normal;
        font-size: calc(20*(100vw/750));
        line-height: 1.75;
        letter-spacing: 1.2px;
        text-align: center;
        margin-top: calc(53*(100vw/750));
    }
    #Contents-All .credit a {
        font-family: 'amiri';
        font-size: calc(24*(100vw/750));
        letter-spacing: 1.1px;
    }
    /*==========================
    top-tittle
    ==========================*/
    #Contents-All .top-tittle {
        position: relative;
    }
    #Contents-All .top-tittle1,
    #Contents-All .top-tittle2,
    #Contents-All .top-tittle3 {font-family: 'amiri';}
    #Contents-All .top-tittle1 {
        font-size: calc(22*(100vw/750));
        letter-spacing: 1.1px;
        text-align: center;
    }
    #Contents-All .top-tittle2 {
        font-size: calc(34*(100vw/750));
        margin-top: calc(21*(100vw/750));
        letter-spacing: 1.8px;
        text-align: center;
    }
    #Contents-All .top-tittle3 {
        font-size: calc(25*(100vw/750));
        margin-top: calc(38*(100vw/750));
        letter-spacing: 1.3px;
        text-align: center;
    }
    #Contents-All .top-tittle::before {
        content: '';
        display: block;
        width: calc(519*(100vw/750));
        height: calc(1*(100vw/750));
        position: absolute;
        top: calc(91*(100vw/750));
        left: calc(116*(100vw/750));
        background-color: rgb(114,113,113);
    }
    /*==========================
    Contents1
    ==========================*/
    #Contents-All .contents1-1-img {
        margin: calc(65*(100vw/750)) 0 0 calc(76*(100vw/750));
    }
    #Contents-All .contents1-2-img {
        margin: calc(57*(100vw/750)) 0 0 calc(40*(100vw/750));
    }
    #Contents-All .contents1-3-img {
        margin: calc(60*(100vw/750)) 0 0 calc(170*(100vw/750));
    }
    /*==========================
    Contents2
    ==========================*/
    #Contents-All .contents2-1-img {
        margin: calc(178*(100vw/750)) 0 0 calc(75*(100vw/750));
    }
    #Contents-All .contents2-3-img {
        margin: calc(56*(100vw/750)) 0 0 calc(170*(100vw/750));
    }
    #Contents-All .contents2-2-img {
        margin: calc(64*(100vw/750)) 0 0 calc(40*(100vw/750));
    }
    /*==========================
    Contents3
    ==========================*/
    #Contents-All .contents3-1-img {
        margin: calc(180*(100vw/750)) 0 0 calc(75*(100vw/750));
    }
    #Contents-All .contents3-2-img {
        margin: calc(60*(100vw/750)) 0 0 calc(40*(100vw/750));
    }
    #Contents-All .contents3-slide {
        margin: calc(56*(100vw/750)) 0 0 calc(170*(100vw/750));
    }
    #Contents-All .contents3-item-flex-area1 {
        margin-top: calc(102*(100vw/750)) !important;
    }
    #Contents-All .contents3-credit2 {
        margin-top: calc(17*(100vw/750));
        line-height: 2.4;
        text-align: center;
    }
    /*==========================
    Video
    ==========================*/
    #Contents-All .video-area {
        width: calc(720*(100vw/750));
        margin: calc(166*(100vw/750)) 0 0 calc(13*(100vw/750));
    }
    /*==========================
    Contents4
    ==========================*/
    #Contents-All .contents4-1-img {
        margin: calc(111*(100vw/750)) 0 0 calc(75*(100vw/750));
    }
    #Contents-All .contents4-2-img {
        margin: calc(60*(100vw/750)) 0 0 calc(170*(100vw/750));
    }
    #Contents-All .contents4-3-img {
        margin: calc(60*(100vw/750)) 0 0 calc(40*(100vw/750));
    }
    #Contents-All .contents4-credit1 {
        margin-top: calc(20*(100vw/750));
        line-height: 2.4;
        text-align: center;
    }
    /*==========================
    Contents5
    ==========================*/
    #Contents-All .contents5-1-img {
        margin: calc(165*(100vw/750)) 0 0 calc(75*(100vw/750));
    }
    #Contents-All .contents5-2-img {
        margin: calc(58*(100vw/750)) 0 0 calc(40*(100vw/750));
    }
    #Contents-All .contents5-3-img {
        margin: calc(60*(100vw/750)) 0 0 calc(170*(100vw/750));
    }
    #Contents-All .contents5-item-flex-area1 {
        margin-top: calc(100*(100vw/750)) !important;
    }
    #Contents-All .contents5-item-flex-area3 {
        margin-top: calc(56*(100vw/750));
    }
    #Contents-All .contents5-credit3 {
        margin-top: calc(13*(100vw/750));
        line-height: 2.6;
        text-align: center;
    }
    /*==========================
    Check-Item-All
    ==========================*/
    #Contents-All .Check-All-Item {
        width: calc(319*(100vw/750));
        text-align: center;
        margin: calc(111*(100vw/750)) auto;
        border: 1px solid #727171;
    }
    #Contents-All .Check-All-Item a {
        font-family: 'amiri';
        display: inline-block;
        width: 100%;
        font-size: calc(24*(100vw/750));
        line-height: 2.9;
        letter-spacing: 1px;
    }
    /*==========================
    Slider
    ==========================*/
    #Contents-All .slick-dots li.slick-active button:before {
        background-color: rgb(49,86,118);
        content: "";
        width: calc(12*(100vw/750));
        height: calc(12*(100vw/750));
        border-radius: 5px;
      }
      #Contents-All .slick-dots li button:before {
        background-color: rgb(173,187,200);
        content: "";
        width: calc(12*(100vw/750));
        height: calc(12*(100vw/750));
        border-radius: 5px;
        opacity: 1 !important;
      }
      .slick-dots li {
        width: calc(12*(100vw/750)) !important;
        height: calc(12*(100vw/750)) !important;
        margin: 0 calc(9*(100vw/750)) !important;
      }
      .slick-dots {
        left: calc(1*(100vw/750)) !important;
        bottom: calc(-41*(100vw/750)) !important;
    }
    .slick-dots li button {
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
    }
    /*==========================
    side-txt
    ==========================*/
    #Contents-All .side-txt1 {
        font-family: 'amiri';
        font-size: calc(22*(100vw/750));
        position: fixed;
        top: calc(50% + calc(146*(100vw / 750)) - calc(26*(100vw / 750)));
        left: calc(-94*(100vw/750));
        transform: rotate(-90deg);
        letter-spacing: 1.1px;
        z-index: 3;
    }
    #Contents-All .side-txt2 {
        font-family: 'amiri';
        font-size: calc(22*(100vw/750));
        position: fixed;
        top: calc(50% + calc(146*(100vw / 750)) - calc(26*(100vw / 750)));
        right: calc(12*(100vw/750));
        transform: rotate(-90deg);
        letter-spacing: 1.2px;
        z-index: 3;
    }
}
/**********************************タブレット*************************************/
@media only screen and (min-width: 561px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    #Contents-All {width: calc(1024*(100vw/1024));margin: calc(80*(100vw/1024)) auto calc(140*(100vw/1024));}
    #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 .slick-dots {margin-bottom: calc(-9*(100vw/750)) !important;}
        #Contents-All .top-tittle1 {
            font-size: calc(17*(100vw/1024)) !important;
        }
        #Contents-All .top-tittle2 {
            font-size: calc(25*(100vw/1024)) !important;
        }
        #Contents-All .top-tittle3 {
            font-size: calc(19*(100vw/1024)) !important;
        }
    }
    /*==========================
    共通項目
    ==========================*/
    #Contents-All .item-size215 {width: calc(215*(100vw/1024));}
    #Contents-All .img-size380 {width: calc(380*(100vw/1024));}
    #Contents-All .img-size420 {width: calc(420*(100vw/1024));}
    #Contents-All .contents-img-span {margin-right: calc(38*(100vw/1024));}
    #Contents-All .contents-m {margin: calc(123*(100vw/1024)) 0 0 calc(305*(100vw/1024));}
    #Contents-All .img-flex-area-m-top1 {margin-top: calc(39*(100vw/1024));}
    #Contents-All .item-flex-area-m-top1 {margin-top: calc(39*(100vw/1024));}
    #Contents-All .item-flex-area-m-top2 {margin-top: calc(42*(100vw/1024));}
    #Contents-All .contents-credit {margin-top: calc(28*(100vw/1024));text-align: center;}
    #Contents-All .contents1-txt a {border-bottom: 1px solid #333333;padding-bottom: calc(3*(100vw/1024));}
    #Contents-All .contents3-credit2 a:nth-of-type(2), 
    #Contents-All .contents5-credit3 a:nth-of-type(2) {margin-right: calc(10*(100vw/1024));}
    /***********フォント *************/
    #Contents-All .contents1-txt {
        font-family: 'noto' !important;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        line-height: 1.7;
        letter-spacing: 1.7px;
        text-align: center;
        margin-top: 37px;
    }
    #Contents-All .credit a {
        font-family: 'amiri';
        font-size: 14px;
        letter-spacing: 1.4px;
    }
    /*==========================
    top-tittle
    ==========================*/
    #Contents-All .top-tittle {
        position: relative;
    }
    #Contents-All .top-tittle1,
    #Contents-All .top-tittle2,
    #Contents-All .top-tittle3 {font-family: 'amiri';}
    #Contents-All .top-tittle1 {
        font-size: 16px;
        letter-spacing: 1.1px;
        text-align: center;
    }
    #Contents-All .top-tittle2 {
        font-size: 24px;
        margin-top: calc(9*(100vw/1024));
        letter-spacing: 2.5px;
        text-align: center;
    }
    #Contents-All .top-tittle3 {
        font-size: 20px;
        margin-top: calc(23*(100vw/1024));
        letter-spacing: 2px;
        text-align: center;
    }
    #Contents-All .top-tittle::before {
        content: '';
        display: block;
        width: calc(390*(100vw/1024));
        height: calc(1*(100vw/1024));
        position: absolute;
        top: calc(57.7*(100vw/1024));
        left: calc(321*(100vw/1024));
        background-color: rgb(114,113,113);
    }
    /*==========================
    Contents1
    ==========================*/
    #Contents-All .contents1-1-img {
        margin: calc(43*(100vw/1024)) 0 0 calc(305*(100vw/1024));
    }
    #Contents-All .contents1-3-img {
        margin-top: calc(120*(100vw/1024));
    }
    #Contents-All .contents1-item-flex-area1 {
        margin-top: calc(77*(100vw/1024));
    }
    /*==========================
    Contents2
    ==========================*/
    #Contents-All .contents2-2-img {
        margin-top: calc(79*(100vw/1024));
    }
    /*==========================
    Contents3
    ==========================*/
    #Contents-All .contents3-2-img {
        margin-top: calc(77*(100vw/1024));
    }
    #Contents-All .contents3-credit2 {
        margin: calc(18*(100vw/1024));
        line-height: 2.3;
        text-align: center;
    }
    #Contents-All .contents3-credit2 a:nth-of-type(2) {
        margin-right: 10px;
    }
    /*==========================
    Video
    ==========================*/
    #Contents-All .video-area {
        width: calc(315*(100vw/1024));
        margin: calc(96*(100vw/1024)) 0 0 calc(357*(100vw/1024));
    }
    /*==========================
    Contents4
    ==========================*/
    #Contents-All .contents4-2-img {
        margin-top: calc(77*(100vw/1024));
    }
    #Contents-All .contents4-credit1 {
        margin-top: calc(16*(100vw/1024));
        line-height: 2.4;
        text-align: center;
    }
    /*==========================
    Contents5
    ==========================*/
    #Contents-All .contents5-1-img {
        margin-top: calc(114*(100vw/1024)) !important;
    }
    #Contents-All .contents5-2-img {
        margin-top: calc(78*(100vw/1024));
    }
    #Contents-All .contents5-item-flex-area2 {
        margin-top: calc(83*(100vw/1024)) !important;
    }
    #Contents-All .contents5-item-flex-area3 {
        margin-top: calc(82*(100vw/1024));
    }
    #Contents-All .contents5-credit3 {
        margin-top: calc(20*(100vw/1024));
        line-height: 2;
        text-align: center;
    }
    /*==========================
    Check-Item-All
    ==========================*/
    #Contents-All .Check-All-Item {
        width: calc(200*(100vw/1024));
        text-align: center;
        margin: calc(95*(100vw/1024)) auto 0;
        border: 1px solid #727171;
    }
    #Contents-All .Check-All-Item a {
        font-family: 'amiri';
        display: inline-block;
        width: 100%;
        font-size: 13px;
        line-height: 2.5;
        letter-spacing: 0.5px;
    }
    /*==========================
    Slider
    ==========================*/
    #Contents-All .slick-dots li.slick-active button:before {
        background-color: rgb(49,86,118);
        content: "";
        width: calc(10*(100vw/1024));
        height: calc(10*(100vw/1024));
        border-radius: 5px;
      }
      #Contents-All .slick-dots li button:before {
        background-color: rgb(173,187,200);
        content: "";
        width: calc(10*(100vw/1024));
        height: calc(10*(100vw/1024));
        border-radius: 5px;
        opacity: 1 !important;
      }
      .slick-dots li {
        width: calc(10*(100vw/1024)) !important;
        height: calc(10*(100vw/1024)) !important;
        margin: 0 calc(6*(100vw/1024)) !important;
      }
      .slick-dots {
        left: calc(1*(100vw/1024)) !important;
        bottom: calc(22*(100vw/1024)) !important;
    }
    /*==========================
    side-txt
    ==========================*/
    #Contents-All .side-txt1 {
        font-family: 'amiri';
        font-size: calc(12*(100vw/1024));
        position: fixed;
        top: calc(50% - 14px);
        left: calc(-20*(100vw/1024));
        transform: rotate(-90deg);
        letter-spacing: 1.2px;
        z-index: 3;
    }
    #Contents-All .side-txt2 {
        font-family: 'amiri';
        font-size: calc(12*(100vw/1024));
        position: fixed;
        top: calc(50% - 14px);
        right: calc(50*(100vw/1024));
        transform: rotate(-90deg);
        letter-spacing: 1.2px;
        z-index: 3;
    }
}
/*************************************PC****************************************/
@media screen and ( min-width:1025px ) {
    /* #Contents-All {
        background-image: url(../img/pc.png);
        background-size: 100%;
        background-position-y: -180px;
    } */
    #Contents-All {width: 1200px;margin: 80px auto 140px;}
    #Contents-All .item-flex {display: flex;justify-content: center;}
    #Contents-All .item-flex-reverce{flex-direction: row-reverse;}
    #Contents-All .sp-only {display: none;}
    /*==========================
    共通項目
    ==========================*/
    #Contents-All .item-size215 {width: 215px;}
    #Contents-All .img-size380 {width: 380px;}
    #Contents-All .img-size420 {width: 420px;}
    #Contents-All .contents-img-span {margin-right: 38px;}
    #Contents-All .contents-m {margin: 123px 0 0 390px;}
    #Contents-All .img-flex-area-m-top1 {margin-top: 39px;}
    #Contents-All .item-flex-area-m-top1 {margin-top: 39px;}
    #Contents-All .item-flex-area-m-top2 {margin-top: 42px;}
    #Contents-All .contents-credit {margin-top: 28px;text-align: center;}
    #Contents-All .contents1-txt a {border-bottom: 1px solid #333333;padding-bottom: 3px;}
    #Contents-All .contents3-credit2 a:nth-of-type(2), 
    #Contents-All .contents5-credit3 a:nth-of-type(2) {margin-right: 10px;}
    /***********フォント *************/
    #Contents-All .contents1-txt {
        font-family: 'noto' !important;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        line-height: 1.7;
        letter-spacing: 1.7px;
        text-align: center;
        margin-top: 37px;
    }
    #Contents-All .credit a {
        font-family: 'amiri';
        font-size: 14px;
        letter-spacing: 1.4px;
    }
    /*==========================
    top-tittle
    ==========================*/
    #Contents-All .top-tittle {
        position: relative;
    }
    #Contents-All .top-tittle1,
    #Contents-All .top-tittle2,
    #Contents-All .top-tittle3 {font-family: 'amiri';}
    #Contents-All .top-tittle1 {
        font-size: 16px;
        letter-spacing: 1.1px;
        text-align: center;
    }
    #Contents-All .top-tittle2 {
        font-size: 24px;
        margin-top: 9px;
        letter-spacing: 2.5px;
        text-align: center;
    }
    #Contents-All .top-tittle3 {
        font-size: 20px;
        margin-top: 23px;
        letter-spacing: 2px;
        text-align: center;
    }
    #Contents-All .top-tittle::before {
        content: '';
        display: block;
        width: 390px;
        height: 1px;
        position: absolute;
        top: 57.7px;
        left: 405px;
        background-color: rgb(114,113,113);
    }
    /*==========================
    Contents1
    ==========================*/
    #Contents-All .contents1-1-img {
        margin: 43px 0 0 389px;
    }
    #Contents-All .contents1-3-img {
        margin-top: 120px;
    }
    #Contents-All .contents1-item-flex-area1 {
        margin-top: 77px;
    }
    /*==========================
    Contents2
    ==========================*/
    #Contents-All .contents2-2-img {
        margin-top: 79px;
    }
    /*==========================
    Contents3
    ==========================*/
    #Contents-All .contents3-2-img {
        margin-top: 77px;
    }
    #Contents-All .contents3-credit2 {
        margin: 18px;
        line-height: 2.3;
        text-align: center;
    }
    #Contents-All .contents3-credit2 a:nth-of-type(2) {
        margin-right: 10px;
    }
    /*==========================
    Video
    ==========================*/
    #Contents-All .video-area {
        width: 315px;
        margin: 96px 0 0 441px;
    }
    /*==========================
    Contents4
    ==========================*/
    #Contents-All .contents4-2-img {
        margin-top: 77px;
    }
    #Contents-All .contents4-credit1 {
        margin-top: 16px;
        line-height: 2.4;
        text-align: center;
    }
    /*==========================
    Contents5
    ==========================*/
    #Contents-All .contents5-1-img {
        margin-top: 114px !important;
    }
    #Contents-All .contents5-2-img {
        margin-top: 78px;
    }
    #Contents-All .contents5-item-flex-area2 {
        margin-top: 83px !important;
    }
    #Contents-All .contents5-item-flex-area3 {
        margin-top: 82px;
    }
    #Contents-All .contents5-credit3 {
        margin-top: 20px;
        line-height: 2;
        text-align: center;
    }
    /*==========================
    Check-Item-All
    ==========================*/
    #Contents-All .Check-All-Item {
        width: 200px;
        text-align: center;
        margin: 95px auto 0;
        border: 1px solid #727171;
    }
    #Contents-All .Check-All-Item a {
        font-family: 'amiri';
        display: inline-block;
        width: 100%;
        font-size: 13px;
        line-height: 2.5;
        letter-spacing: 0.5px;
    }
    /*==========================
    Slider
    ==========================*/
    #Contents-All .slick-dots li.slick-active button:before {
        background-color: rgb(49,86,118);
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 5px;
      }
      #Contents-All .slick-dots li button:before {
        background-color: rgb(173,187,200);
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 5px;
        opacity: 1 !important;
      }
      .slick-dots li {
        width: 10px !important;
        height: 10px !important;
        margin: 0 6px !important;
      }
      .slick-dots {
        left: 1px !important;
        bottom: 22px !important;
    }
    /*==========================
    side-txt
    ==========================*/
    #Contents-All .side-txt1 {
        font-family: 'amiri';
        font-size: 12px;
        position: fixed;
        top: calc(50% - 14px);
        left: -6px;
        transform: rotate(-90deg);
        letter-spacing: 1.2px;
        z-index: 3;
    }
    #Contents-All .side-txt2 {
        font-family: 'amiri';
        font-size: 12px;
        position: fixed;
        top: calc(50% - 14px);
        right: 50px;
        transform: rotate(-90deg);
        letter-spacing: 1.2px;
        z-index: 3;
    }
}