@charset "UTF-8";
@media screen and (max-width: 767px) {
    .pc{ display: none !important; }
    .sp{ display: block !important; }
    .pc1{ display: none !important; }
    .pc2{ display: none !important; }

    #contents{
        padding-top: 0;
    }

    img{
        height: auto;
    }

    .sec01{
        background-color: #000;
        position: sticky;
        top: 53px;
    }
    .sec01::before{
        content: "";
        position: absolute;
        width: 100%;
        height: 3vw;
        background-color: #cc0000;
    }
    .sec01_con{
        width: 100vw;
        display: block;
        margin: 0 auto;
    }
    .main_copy{
        width: 100vw;
        height: calc(33vh - 4vh);
        position: relative;
        color: #FFF;
        padding-left: 0;
    }
    .main_title{
        position: absolute;
        bottom: 0;
        top: auto;
        left: 10vw;
        z-index: 1;
    }
    .main_title p{
        font-size: 3.6vw;
        margin-bottom: 2.5vw;
    }
    .main_title .en{
        font-size: 11vw;
        line-height: 1.2;
        margin-bottom: 5vw;
    }
    .main_img{
        width: 100vw;
        height: 80vh;
        margin-left: auto; /* 右寄せ */
    }
    .main_img .slick-track{
        width: 100vw;
        height: 70vh;
    }

    .slider3 .slick-track img {
        width: 100vw!important;
        height: 70vh;
        object-fit: cover;
        object-position: left top;
      }
    .sec02{
        position: relative;
        width: 100vw;
        height: auto;
        margin: 0 auto;
    }
    .sec02_con{
        position: absolute;
        display: flex;
        justify-content: space-between;
        width: 100vw;
        top: 0;
        right: 0;
        left: 0;
        margin: auto;
        padding-bottom: 150vw;
    }
    .sec02_img{
        position: static;
    }
    .sec02 h2{
        position: absolute;
        top: 15vw;
        left: 0;
        right: 0;
        margin: auto;
        width: 70vw;
        font-size: 6.5vw;
        border-bottom: solid 0 #000;
        text-align: center;
        z-index: 1;
    }
    .sec02 h2 span{
        border-bottom: solid 1px #000;
        margin-bottom: 8vw;
        padding-bottom: 4vw;
        width: 70vw;
        display: block;
    }
    .sec02 p{
        position: absolute;
        top: 35vw;
        left: 0;
        right: 0;
        margin: auto;
        width: 80vw;
        font-size: 3.1vw;
        white-space: normal;
        z-index: 1;
    }
    .sec02_con_p{
        top: 115vw !important;
    }
    .sec02_copy{
        position: absolute;
        top: 66vw;
        left: 0;
        right: 0;
        width: 80vw;
        border: solid 1px #000;
        padding: 4vw;
        z-index: 1;
        margin: 15vw auto 0;
    }
    .sec02_copy p{
        position: static;
        padding-left: 3vw;
        font-size: 2.4vw !important;
        line-height: 1.5 !important;
        width: 73vw;
        white-space: normal;
    }
    .sec02_copytytle{
        padding-left: 0!important;
    }
    .sec02_copy_{
        padding-left: 0!important;
        font-size: 2.6vw !important;
        line-height: 1.5 !important;
        width: 0!important;
        white-space: normal;
        margin-right: 2vw;
    }
    .sec02_copy div{
        display: flex;
    }
    .sec02_con_img{
        position: absolute;
        top: 140vw;
        left: 0;
        right: 0;
        margin: auto;
        width: 80vw;
        z-index: 1;
    }
    .co2 sup {
        font-size: 0.7em;
        vertical-align: -0.5em;
      }
    .sec03{
        display: block;
        width: 100vw;
        height: auto;
        margin: 0 auto;
        background: linear-gradient(135deg, #b08b66, #b48f68, #e4c37d);
    }
    .sec03::before{
        content: "";
        position: absolute;
        width: 100vw;
        height: 3vw;
        top: 0;
        left: 0;
        background-color: #cc0000;
        z-index: 1;
    }
    .sec03_con{
        width: 100vw;
        display: block;
        margin: 0 auto;
    }
    .sec03_copy{
        position: relative;
        width: 100vw;
        height: auto;
        padding: 10vw 5vw 15vw;;
        color: #FFF;
        background: linear-gradient(135deg, #b08b66, #b48f68, #e4c37d);
    }
    .sec03_copy h2{
        position: static;
        font-size: 22vw;
        line-height: 1.2;
    }
    .sec03_copy h3{
        font-size: 3.7vw;
        margin-bottom: 6vw;
    }
    .sec03_copy p{
        font-size: 3.7vw;
        line-height: 1.9;
    }
    .sec03_img{
        position: static;
        width: 100vw;
    }
    .sec03_img img{
        width: 100vw;
        height: auto;
    }

.sec04 {
    width: 100vw;
    margin: 0 auto;
    padding: 0 0 15vw;
    position: relative;
    top: 0;
    background: #000;
}
.sec04::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3vw;
    background-color: #cc0000;
}
.sec04_con {
    color: #FFF;
    width: 100vw;
    padding: 15vw 0 0;
}
.sec04_con h2 {
    font-size: 14vw;
    line-height: 0.7;
    margin: 0 7.5vw 5vw;
}
.sec04_con h2 span {
    font-size: 8vw;
}
.sec04_con h3 {
    font-size: 3.7vw;
    margin: 0 7.5vw 10vw;
}
.sec04_con p {
    width: 86vw;
    font-size: 3.7vw;
    margin: 0 auto 10vw;
    line-height: 1.9;
}
.sec04_con img {
    width: 86vw;
    margin: 0 auto;
    display: block;
    position: static;
}

.sec05{
    width: 100vw;
    height: auto;
    background: linear-gradient(135deg, #b08b66, #b48f68, #e4c37d);
    color: #FFF;
    margin: 0 auto;
    padding: 10vw 0 18vw;
}
.sec05::before{
    position: absolute;
    content: "";
    position: absolute;
    width: 100%;
    height: 3vw;
    right: 0;
    top: 0;
    background-color: #cc0000;
}
.sec05_img{
    width: 100vw;
}
.sec05_con{
    width: 100vw;
    height: 113vw;
    position: relative;
}
.sec05_con ul{
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 13.333vw;
}
.sec05_con ul li{
    width: 100vw;
    height: 38.667vw;
}
.sec05_con ul li img{
    width: 100vw;
    height: auto;
    margin-bottom: 15vw;
}
.sec05_con .slick-dotted{
    width: auto;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0vw;
}
.sec05_con .slick-dotted li{
    width: auto;
    height: auto;
}
.sec05_con .slick-dotted .slick-dots li{
    width: 20px;
    height: 20px;
}
.sec05 .slick-dots{
    position: absolute;
    display: flex;
    justify-content: normal !important;
    bottom: -10vw;
    left: 0;
    right: 0;
    margin: 0;
    display: block;
}
.sec05_copy{
    position: absolute;
    top: 0;
    right: 21.333vw;
    color: #FFF;
    text-align: right;
}
.sec05 h2{
    font-size: 16.5vw;
    line-height: 1;
    margin: 0 5vw 5vw;
    text-align: left;
}
.sec05 h3{
    font-size: 3.7vw;
    line-height: 1;
    margin: 0 5vw 11vw;
    text-align: left;
}
.sec05 p{
    position: relative;
    z-index: 100;
    width: 86vw;
    font-size: 3.7vw;
    text-align: left;
    margin: 0 auto;
    line-height: 1.9;
}


.sec06 {
    width: 100%;
    position: relative;
    top: 0;
    background: #000;
}
.sec06_con {
    position: relative;
    width: 86vw;
    margin: 0 auto;
    padding: 13vw 0 16vw;
    color: #FFF;
}
.sec06_img01{
    width: 100%;
    margin-bottom: 10vw;
}
.sec06_img02{
    width: 100%;
}
.sec06_con h2 {
    font-size: 16.5vw;
    line-height: 0.7;
    margin-bottom: 7vw;
    margin-left: 6vw;
}
.sec06_con h2::before {
    content: "";
    position: absolute;
    width: 2.5vw;
    height: 12vw;
    top: 13vw;
    left: 0;
    background-color: #cc0000;
}
.sec06_con h3 {
    font-size: 3.7vw;
    margin-bottom: 12vw;
    margin-left: 0;
}
.sec06_con2 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6.519vw;
}
.sec06_copy {
    width: 86vw;
    font-size: 3.6vw;
    margin-bottom: 9vw;
    line-height: 1.9;
}
.sec06_copytitle {
    font-size: 5vw;
    margin-bottom: 4vw;
    line-height: 1;
}
.sec06_annotation {
    font-size: 2.086vw;
}
.sec06_annotation .indent {
    display: inline-block;
    text-indent: 3.52vw;
}
.sec07 {
    width: 100%;
    position: relative;
    top: 0;
    background: linear-gradient(135deg, #b08b66, #b48f68, #e4c37d);
}

.sec07::before {
    content: "";
    position: absolute;
    width: 100vw;
    height: 3vw;
    background-color: #cc0000;
}

.sec07_con {
    position: relative;
    width: 86vw;
    margin: 0 auto;
    padding: 15vw 0 15vw;
    color: #FFF;
}

.sec07_img01 {
    position: absolute;
    width: 16.85vw;
    top: 25.641vw;
    right: 0;
}

.sec07_img02 {
    margin-bottom: 6.593vw;
}

.sec07_con h2 {
    font-size: 15vw;
    line-height: 0.7;
    margin-bottom: 6vw;
}

.sec07_con h3 {
    font-size: 3.7vw;
    margin-bottom: 12vw;
}

.sec07_con2 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3.663vw;
}

.sec07_copy {
    width: 86vw;
    font-size: 3.4vw;
    line-height: 1.9;
    margin-bottom: 15vw;
}

.sec07_copytitle {
    font-size: 5vw;
    margin-bottom: 5vw;
    line-height: 1;
}
.sec07_img01{
    position: static;
    width: 40vw;
    margin:0 auto 10vw;
    display: block;
}
.sec07_img02 {
    margin-bottom: 5vw;
}

.sec08 {
    width: 100%;
    position: relative;
    background-color: #000;
    color: #FFF;
    padding: 11vw 0 15vw;
}
.sec08::before {
    position: absolute;
    content: "";
    width: 100vw;
    height: 3vw;
    top: 0;
    right: 0;
    background-color: #cc0000;
    z-index: 2;
}
.sec08_con {
    display: block;
    width: 100vw;
    margin: 0 auto;
}
.sec08_con img {
    width: 40%;
    height: 100%;
}
.sec08_copy {
    width: 86vw;
    margin: 2vw auto 0;
}
.sec08_copy h2 {
    font-size: 15vw;
    line-height: 1;
    margin: 0 0 3vw;
    text-align: left;
}
.sec08_copy h2::before {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    right: 0;
    background-color: #cc0000;
    z-index: 2;
}
.sec08_copy h3 {
    font-size: 3.7vw;
    line-height: 1;
    text-align: left;
    margin-bottom: 10vw;
}
.sec08_copy p {
    width: 86vw;
    font-size: 3.5vw;
    line-height: 1.9;
    margin: 18vw AUTO 0;
}
.sec08 ul {
    display: flex;
    width: 100vw;
    margin: 0 auto;
}
.sec08 ul li {
    width: 10vw;
}
.sec08 .slick-dots {
    margin-left: 25vw!important;
}
.sec08 .slick-dots li {
    margin-right: 0;
}

.sec09 {
    width: 100vw;
    margin: 0 auto;
    background-color: #9d876e;
    padding: 18vw 7.5vw 0;
    color: #FFF;
}
.sec09_con {
    width: 100%;
    margin: 0 auto;
    padding: 0vw 0 30vw;
    color: #FFF;
}
.sec09 h2 {
    font-size: 5.3vw;
    text-align: center;
    margin-bottom: 8vw;
}
.sec09 .access{
    margin-bottom: 4vw;
}
.sec09 h3 {
    font-size: 3vw;
    width: 30%;
    padding-left: 0;
}
.sec09 p {
    font-size: 2.8vw;
    width: 70%;
}
.sec09 ul {
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    margin-bottom: 20vw;
}
.sec09 ul li {
    display: flex;
    align-items: center;
    font-size: 3vw;
    padding: 2.5vw 0;
    border-bottom: solid 1px #fff;
}
.sec09 ul li:last-child {
    border-bottom: 0;
    padding-top: 0;
}
.sec09 ul li div {
    width: 60vw;
}
.sec09 ul li div p {
    border-bottom: solid 1px #fff;
    padding: 2.5vw 0;
    width: 100%;
}
.sec09 ul li div p:first-child {
    padding: 2.5vw 0;
}
.sec09 ul li div p:last-child {
    padding: 2.5vw 0 0;
    border-bottom: 0;
}
.sec09_map {
    position: relative;
    width: 86vw;
    height: auto;
}
.sec09_map img {
    width: 100%;
    margin: 0 auto;
    display: block;
}



    iframe{
        width: 100%;
        height: 100%;
        border: 0;
        filter: grayscale(100%) sepia(30%);
        display: block;
        margin-bottom: 4vw;
    }
    
    /*==================================================
    スライダーのためのcss
    ===================================*/
    
    .slider {
        width: 100vw;
        margin: 0 auto;
    }
    
     .slider img {
        width: 100vw;
         height:auto;
     }
    
    .slider p{
        width: 50vw; 
        font-size: 2.5vw;
        padding-top: 2vw;
        margin: 0 auto;
    }
     
     /*slickのJSで書かれるタグ内、スライド左右の余白調整*/
     
     .slider .slick-slide {
        margin: 0; /* スライドを中央揃え */
        width: 100vw !important; /* スライド幅を調整 */
        height: auto; /* 高さを自動調整 */
    }
     
     /*矢印の設定*/
     
     /*戻る、次へ矢印の位置*/
     .slick-prev, 
     .slick-next {
         position: absolute;/*絶対配置にする*/
         top: 35%;
         cursor: pointer;/*マウスカーソルを指マークに*/
         outline: none;/*クリックをしたら出てくる枠線を消す*/
         border-top: 0px solid #666;/*矢印の色*/
         border-right: 0px solid #666;/*矢印の色*/
         height: 2vw;
         width: 2vw;
     }
     
     .slick-prev {/*戻る矢印の位置と形状*/
        /* background-image: url("../images/article_img/slick-prev.png"); */
        background-size: cover;
        top: -9.333vw;
        right: 12vw;
         width: 5.333vw;
         height: 5.333vw;
        transition: 0.5s;
    
     }
    
    .slick-prev:hover {
        transition: 0.5s;
        right: 13.333vw;
    }
    
     .slick-next {/*次へ矢印の位置と形状*/
        /* background-image: url("../images/article_img/slick-next.png"); */
        background-size: cover;
        top: -9.333vw;
        right: 4vw;
         width: 5.333vw;
         height: 5.333vw;
            transition: 0.5s;
     }
     
    .slick-next:hover {
        transition: 0.5s;
        right: 20px
    }
    .slick-slider{
        position: relative;
    }
     /*ドットナビゲーションの設定*/
     
     .slick-dots {
        position: absolute;
        display: none;
        text-align: center;
        margin: 0;
        z-index: 5;
        margin-left: 1vw!important;
    }
    .sec01 .slick-dots{
        display: none!important;
    }
    .slick-dots li {
        display: none;
        display:inline-block;
        margin:0 1.333vw;
        cursor: pointer;
    }
    
    .slick-dots button {
        display: none!important;
        color: transparent;
        outline: none;
        width:1.333vw;/*ドットボタンのサイズ*/
        height:1.6vw;/*ドットボタンのサイズ*/
        display:block;
        border-radius:50%;
        background:#000c17;/*ドットボタンの色*/
        border: none;
    }
    
    .slick-dots .slick-active button{
        display: none;
        background:#20374A;/*ドットボタンの現在地表示の色*/
    }
    
    
    .slick-track{
        display: flex!important;
    }
    
    
    /* スライダー */
    button {
        all: unset;
        display: inline-block;
        cursor: default;
      }
      .slick-prev,.slick-next{
      display: none;
      position: absolute;
      z-index: 10;
      font-size: 0;
      }
      .slick-next{
        top: 38.667vw;
        left: 64.667vw;
      }
      .slick-prev{
        top: 38.667vw;
        left: 28vw;
      }
      .slick-prev::before {
        content: "";
        display: block;
        width: 6vw;
        height: 6vw;
        background-image: url('../images/prev.png');
        background-size: contain;
        background-repeat: no-repeat;
      }
      .slick-next::before {
        content: "";
        display: block;
        width: 6vw;
        height: 6vw;
        background-image: url('../images/next.png');
        background-size: contain;
        background-repeat: no-repeat;
      }
      .slick-dots{
        position: absolute;
        display: flex;
        justify-content: normal !important;
        bottom: -10vw;
        left: 0;
        right: 0;
        font-size: 0;
        margin: auto;
        text-align: center;
        display: block;
      }
      .slick-dots li{
      margin-right: 7vw;
      }
      .slick-dots li::before{
        content: "";
        display: block;
        width: 0.667vw;
        height: 0.667vw;
        background-image: url('../images/dots.jpg');
        background-size: contain;
        background-repeat: no-repeat;
      }
      .slick-dots li::before{
        content: "";
        display: block;
        width: 8.667vw;
        height: 0.667vw;
        background-image: url('../images/dots.jpg');
        background-size: contain;
        background-repeat: no-repeat;
      }
      .slick-dots .slick-active::before{
      content: "";
        display: block;
        width: 8.667vw;
        height: 0.667vw;
        background-image: url('../images/dots_active.jpg');
        background-size: contain;
        background-repeat: no-repeat;
      }
      
      .slick-disabled{
      display: none!important;
      }

}