/*動画表示のモーダル*/
/* .modaal-video .modaal-inner-wrapper{
	padding:0;
}
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
} */


.top__mv {
    position: relative;
    margin-bottom: 0.2%;
}
.mv__play_btn {
    position: absolute;
    bottom: 15px;
    right: 20px;
    width: 15%;
    z-index: 10;
}
.top__mv video {
    width: 100%;
}
/* .top__mv_inner {
    padding-top: 50%;
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}
.top__mv_inner iframe {
    width: 100% !important;
    height: 55.6vw !important;
    position: absolute !important;
    top: -10% !important;
} */
.top__slider_list {
    position: relative;
}
.top__slider_list .slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    z-index: 10;
    cursor: pointer;
}
.top__slider_list .prev-arrow {
    left: 10px;
}
.top__slider_list .next-arrow {
    right: 10px;
}
.top__bg {
    background: url(/data/feature/ethical_travel/img/top/bg-sp.png) no-repeat;
    background-size: cover;
}
.cont01 {
    margin: 5% 0 15%;
}
.cont01__ttl_area {
    margin-bottom: 10%;
}
.top__cmn_ttl {
    width: 25%;
    margin: 0 auto;
}
.cont01__ttl {
    width: 37%;
}
.top__txt {
    font-size: 89%;
    line-height: 2.2;
}
.cont01 .note_txt {
    font-size: 70%;
    line-height: 1.8;
    color: #808080;
    margin: 8% 0 5%;
}
.cont01__sdgs_logo {
    text-align: center;
    width: 65%;
    margin: 0 auto;
}
.cont01__travel {
    margin-top: 20%;
}

.item01_ttl {
    width: 90px;
    margin: 0 auto;
}
.travel__box_area {
    margin-top: 8%;
}
.travel__box {
    margin-bottom: 5%;
}
.travel__box:last-child {
    margin-bottom: 0;
}
.is-open-list {
    cursor: pointer;
    position: relative;
}
.is-open-list::before {
    display: block;
    content: "";
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%) rotate(-180deg);
    transition: transform 1s;
    width: 30px;
    height: 30px;
}
.is-open-list.active::before {
    transform: translateX(-50%) rotate(0);
}
.travel__box_list01::before {
    background: url(/data/feature/ethical_travel/img/top/link_icon01.svg) no-repeat;
    background-size: contain;
}
.travel__box_list02::before {
    background: url(/data/feature/ethical_travel/img/top/link_icon02.svg) no-repeat;
    background-size: contain;
}
.travel__box_list03::before {
    background: url(/data/feature/ethical_travel/img/top/link_icon03.svg) no-repeat;
    background-size: contain;
}
.travel__box:last-child {
    margin-bottom: 0;
}
.travel__box_link_list {
    display: none;
}
.travel__box_link_list li {
    max-width: 287px;
    margin: 0 auto;
    font-size: 80%;
    padding: 9px 20px;
    background: url(/data/feature/ethical_travel/img/top/bg_s.png) no-repeat;
    background-size: cover;
}
.travel__box_link_list .link_txt01 {
    color: #d37a80;
}
.travel__box_link_list .link_txt02 {
    color: #ccca39;
}
.travel__box_link_list .link_txt03 {
    color: #db9c80;
}
.cont02__ttl_area {
    margin-bottom: 10%;
}
.item02_ttl {
    width: 190px;
    margin: 0 auto;
}
.cont02 .cmn__item_ttl_area {
    margin-bottom: 5%;
}
.cont02__box_area {
    text-align: center;
}
.cont02__box {
    margin-bottom: 30px;
}
.cont02__box:last-child {
    margin-bottom: 0;
}
.cont02__box_img {
    width: 255px;
}
.cont02__box_btm_txt {
    text-align: center;
    margin-top: 10px;
    color: #919192;
    position: relative;
    font-size: 90%;
}
.cont02__box_btm_txt::after {
    display: block;
    content: "";
    border-bottom: 1px solid rgba(62, 58, 57, 0.3);
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
}
.cont02__box_txt {
    text-align: center;
    margin-top: 10px;
    font-size: 125%;
    line-height: 1.3;
    font-family: 'Zen Maru Gothic', sans-serif;
}
.campaign {
    margin-top: 50px;
}
.item03_ttl {
    width: 135px;
    margin: 0 auto;
}
.cont02 .campaign .cmn__item_ttl_area {
    margin-bottom: 1%;
}
.cont02__insta {
    width: 100%;
    height: 500px;
    background-color: #c8dbe4;
}
.kari_txt {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 500px;
    color: #0080bf;
    line-height: 2;
    font-size: 94%;
}
.cont03 {
    margin-top: 20%;
    background: url(/data/feature/ethical_travel/img/top/top_bg_img04.png) no-repeat;
    background-size: 85%;
    background-position: center 20%;
}
.cont03__ttl_area {
    margin-bottom: 10%;
}
.cont03 .top__txt {
    text-align: center;
}
.style {
    margin-top: 10%;
}
.cont03__link_list {
    margin-top: 5%;
}
.cont03__link_list li {
    margin-bottom: 3%;
}
.cont03__link_list li:last-child {
    margin-bottom: 0;
}
.travel__box_link_list > li a {
    color: #333;
}
.cont03__link_list_area li {
    border: 10px solid;
    border-image-source: url(/data/feature/ethical_travel/img/top/border.png);
    border-image-slice: 15%;
    border-image-repeat: repeat;
    border-image-width: 10px 40px;
    padding: 0 10px;
    margin: 0 20px;
    background-color: #fff;
}
.cont03__link_list_area li:first-child {
    border: 10px solid;
    border-image-source: url(/data/feature/ethical_travel/img/top/border-top.png);
    border-image-slice: 15%;
    border-image-repeat: repeat;
    border-image-width: 10px 40px;
    padding-top: 8px;
    text-align: center;
    font-size: 80%;
}
.cont03__link_list_area li:last-child {
    border: 10px solid;
    border-image-source: url(/data/feature/ethical_travel/img/top/border-bottom.png);
    border-image-slice: 15%;
    border-image-repeat: repeat;
    border-image-width: 10px 40px;
    padding-bottom: 8px;
}
.cont03__link_list > li:nth-of-type(1) .cont03__link_list_area li:first-child {
    color: #00b9ef;
}
.cont03__link_list > li:nth-of-type(2) .cont03__link_list_area li:first-child {
    color: #aac351;
}
.cont03__link_list > li:nth-of-type(3) .cont03__link_list_area li:first-child {
    color: #f08300;
}
.cont03__link_list > li:nth-of-type(4) .cont03__link_list_area li:first-child {
    color: #1e8739;
}
.cont03__link_list > li:nth-of-type(5) .cont03__link_list_area li:first-child {
    color: #d7a600;
}
.cont03__link_list_area li a {
    font-size: 80%;
    color: #333;
}
.cont03__link_list_area {
    display: none;
}

@media screen and (min-width: 768px) {
    .travel__box_area {
        margin-top: 3%;
        display: flex;
        flex-wrap: wrap;
    }
    .travel__box {
        width: calc((100% - 20px)/3);
        margin-right: 10px;
        margin-bottom: 0;
    }
    .travel__box:last-child {
        margin-right: 0;
    }
    .cont02__box_area {
        display: flex;
        background-size: 60%;
        background-position-y: 100%;
    }
    .cont02__box {
        margin-bottom: 0;
    }
    .cont02__box:nth-child(1) {
        width: 1050px;
        margin-top: -185px;
    }
    .cont02__box:nth-child(2) {
        width: 902px;
        margin-top: 50px;
    }
    .cont02__box:nth-child(3) {
        width: 1042px;
        margin-top: -370px;
    }
    .cont02__box_img {
        width: 100%;
    }
    .cont03__link_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 20px;
        margin: 0 auto;
    }
    .cont03__link_list > li {
        width: calc((100% - 80px)/3);
        margin-right: 40px;
        cursor: pointer;
    }
    .cont03__link_list > li:nth-child(3n) {
        margin-right: 0;
    }
    .cont03__link_list > li:last-child {
        margin-right: 0;
    }
    .cont03__link_list_img {
        width: 195px;
        margin: 0 auto;
    }
    .cont03__link_list_area li {
        margin: 0;
    }
    .cont03__link_list_area li,
    .cont03__link_list_area li a {
        font-size: 100% !important;
    }
}

@media screen and (min-width: 1024px) {
    a:hover {
        opacity: 0.8;
    }
    .top__bg {
        background: url(/data/feature/ethical_travel/img/top/bg-pc.png) no-repeat;
        background-size: contain;
    }
    .mv__play_btn {
        width: 145px;
        bottom: 40px;
        right: 70px;
        cursor: pointer;
    }
    .mv__play_btn:hover {
        opacity: 0.8;
    }
    .top__slider_list .slide-arrow {
        width: 45px;
    }
    .top__slider_list .prev-arrow {
        left: 25px;
    }
    .top__slider_list .next-arrow {
        right: 25px;
    }
    .cont01 {
        margin: 60px 0 140px;
    }
    .top__cmn_ttl {
        width: 168px;
    }
    .cont01__ttl_area {
        background-size: 60%;
        background-position-y: 100%;
        margin-bottom: 80px;
    }
    .top__txt {
        font-size: 137%;
        text-align: center;
    }
    .item01_ttl {
        width: 110px;
    }
    .cont01 .note_txt {
        margin: 70px 0 30px;
        font-size: 112%;
        text-align: center;
    }
    .cont01__travel {
        margin-top: 140px;
    }
    .travel__box_link_list li {
        font-size: 100%;
        max-width: 350px;
    }
    .cont01__sdgs_logo {
        width: 398px;
        margin: 0 auto;
    }
    .cont02 .cmn__item_ttl_area {
        margin-bottom: 0;
    }
    .item02_ttl {
        width: 310px;
    }
    .cont02__box_btm_txt {
        font-size: 112%;
    }
    .cont02__box_txt {
        font-size: 200%;
    }
    .campaign {
        margin-top: 120px;
    }
    .item03_ttl {
        width: 224px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .cont03 {
        margin-top: 160px;
        background-size: 45%;
        background-position: center 75%;
    }
    .style {
        margin-top: 0;
    }
    .cont03__bg {
        padding-bottom: 80px;
    }
    .cont03__link_list {
        width: 1000px;
        margin-top: 60px;
    }
}