@charset "UTF-8";
/*
$gray:#808080;
$purple:#805380;
$pink:#d4456e;
$blue:#507aba;
$y_green:#adb23d;
$orange:#cd8b4c;

//bg color
$header_scroll_bg:rgba(255,255,255,1);
*/
/*
@include animation(anime-opening_face 4s ease 0.5s);
@include keyframes(anime-opening_face){
    0%  { transform: translate(-50%,100%); }
    30% { transform: translate(-50%,0); }
    70% { transform: translate(-50%,0); }
    100%{ transform: translate(-50%,100%); }
}
*/
/*! Lity - v2.4.1 - 2020-04-26
* http://sorgalla.com/lity/
* Copyright (c) 2015-2020 Jan Sorgalla; Licensed MIT */

/* レスポンシブ */
.show768{
    display: none!important;
}
.show600{
    display: none!important;
}
.show640{
    display: none!important;
}
.show520{
    display: none!important;
}
.show480{
    display: none!important;
}
.show1000{
    display: none!important;
}
.show950{
    display: none!important;
}
.show900{
    display: none!important;
}
.show860{
    display: none!important;
}
.show800{
    display: none!important;
}
@media screen and (max-width: 1000px) {
    .hide1000{
        display: none!important;
    }
    .show1000{
        display: block!important;
    }
}
@media screen and (max-width: 950px) {
    .hide950{
        display: none!important;
    }
    .show950{
        display: block!important;
    }
}
@media screen and (max-width: 900px) {
    .hide900{
        display: none!important;
    }
    .show900{
        display: block!important;
    }
}
@media screen and (max-width: 768px) {
    .hide768{
        display: none!important;
    }
    .show768{
        display: block!important;
    }
}
@media screen and (max-width: 860px) {
    .hide860{
        display: none!important;
    }
    .show860{
        display: block!important;
    }
}
@media screen and (max-width: 800px) {
    .hide800{
        display: none!important;
    }
    .show800{
        display: block!important;
    }
}
@media screen and (max-width: 600px) {
    .hide600{
        display: none!important;
    }
    .show600{
        display: block!important;
    }
}
@media screen and (max-width: 640px) {
    .hide640{
        display: none!important;
    }
    .show640{
        display: block!important;
    }
}
@media screen and (max-width: 520px) {
    .hide520{
        display: none!important;
    }
    .show520{
        display: block!important;
    }
}
@media screen and (max-width: 540px) {
    .hide540{
        display: none!important;
    }
    .show540{
        display: block!important;
    }
}
@media screen and (max-width: 480px) {
    .hide480{
        display: none!important;
    }
    .show480{
        display: block!important;
    }
}
@media screen and (min-width: 768px) {
    .none{
        display: visible;
    }
}

/* ========================================
    共通スタイル
========================================*/
.mod-freeHTML {
padding-bottom:7%;
font-family: 'Noto Sans JP', sans-serif;
}
.mod-freeHTML .inner {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    color: #000000;
}
.mod-freeHTML.js-page_loaded {
    opacity: 1;
}
.mod-freeHTML ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mod-freeHTML p {
    font-size: 16px;
    margin: 0;
}
.mod-freeHTML img {
    height: auto;
    max-width: 100%;
    width: auto;
}
.mod-freeHTML a { 
    color: inherit!important;
}
.respd{
    max-width: 100%;
    height: auto;
    width /***/:auto;
}
/* ========================================
    共通パーツ
========================================*/
.title_label{
    background-color: #0d2ea1;
    width: 100%;
}
.title_label .inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-family: 'Kosugi Maru', sans-serif;
    font-size: 2.0rem;
}
    /* 線 */
.sol{
    border-top: 1px solid #000000;
    margin-top: 70px;
    margin-bottom: 70px;
}
.dot{
    border:none; border-top: 1px dashed #000000;
    margin-top: 50px;
    margin-bottom: 50px;
}
    /* aw_box */
.aw_box{
    width: 60%;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: 'Kosugi Maru', sans-serif;
}
.aw_box .flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.aw_box .work{
    text-align: center;
    display: block;
    width: 100%;
    font-weight: bold;
    font-size: 1.8rem;
}
.aw_box hr{
    background-color: #fff;
    border:none; border-top: 2px dashed #db8843;
    width: 100%;
}
.aw_box .work_country,.aw_box #work_country{
    font-size: 1.5rem;
    width: 50%;
    display: block;
}
.aw_box .work_name,.aw_box #work_name{
    display: block;
    font-size: 1.5rem;
    width: 50%;
    text-align: right;
}
.cr_tag {
    position:relative;
    background:#0d2ea1;
    display:inline-block;
    height:36px;
    color:#fff;
    line-height:35px;
    padding-left: 15px;
    padding-right: 11px;
    text-decoration:none;
    font-size:1.0rem;
    margin-bottom:10px
}

.cr_tag:before {
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 19px solid #0d2ea1;
    content: '';
    display: block;
    position: absolute;
    right: -15%;
}

/* 個別CSS */
/* section1 */
#section1{
    margin-bottom: 100px;
}
#section1 .h1{
    margin-bottom: 20px;
}
#section1 p{
    margin-top: 30px;
    margin-bottom: 30px;
}
#section1 .sdgs {
    text-align: center;
    width: 100%;
}
#section1 .theme {
    font-family: 'Kosugi Maru', sans-serif;
    margin-top: 30px;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    padding: 1rem 2rem;
    color: #0d2ea1;
    background: rgb(255, 255, 255);
    -webkit-box-shadow: 5px 5px 0 #0d2ea1;
    border: solid 2px #0d2ea1;
    box-shadow: 5px 5px 0 #0d2ea1;
}
#section1 .theme span{
    display: inline-block;
}
#section1 .comment {
    position: relative;
    padding: 1rem 2rem;
    background-color: #0d2ea1;
    color: #ffffff;
    border-radius: 10px;
    font-size: 1.4rem;
    text-align: center;
    margin: 0 auto;
    max-width: 300px;
}
#section1 .comment::before {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border:none; border-right: 3px dashed #0d2ea1;
    border:none;border-bottom: 3px dashed #0d2ea1;
    transition: .3s;
    content: '';
    z-index: -1;
}

/* section2 */
#section2  .label {
    display: block;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
}
#section2 .work_img{
    text-align: center;
    width: 100%;
}
    /* d2 */
#section2 .d2 .flex_d2{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#section2 .d2 .flex_d2 .flexitem:nth-of-type(1){
    width: 40%;
}
#section2 .d2 .flex_d2 .flexitem:nth-of-type(2){
    width: 55%;
}
#section2 .d2 .aw_box{
    margin-bottom: 10px;
    width: 100%;
}
/* d3 */
#section2 .d3 .flex_d3{
    display: flex;
    justify-content: space-between;
}
#section2 .d3 .aw_box{
    margin-bottom: 10px;
    width: 100%;
}
#section2 .d3 .flex_d3 .flexitem{
    width: 48%;
}

/* section3 */
#section3{
    background-color:#f4eee1 ;
    margin-top: 70px;
    padding-top: 30px;
    padding-bottom: 40px;
}
#section3 img{
    cursor: pointer;
}
#section3 .jp,#section3 .c,#section3 .bctl,#section3 .t{
    margin-top: 80px;
    width: 100%;
    text-align: center;
}
#section3  .lavel{
    font-family: 'Kosugi Maru', sans-serif;
    font-size: 1.5rem;
    border-bottom: double 5px #000000;
    margin-bottom: 50px;
    display: inline-block;
}
/* 日本  台湾*/
#section3 .jp .flex,#section3 .t .flex{
    background-color:#ffff ;
    padding: 10px 25px 25px 25px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#section3 .jp .inner_flex,#section3 .t .inner_flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 10px;
}
#section3 .jp .flexitem,#section3 .t .flexitem{
    width: 23%;
    margin-top: 15px;
}
/* 中国 */
#section3 .c .flexitem{
    width: 23%;
    margin: 0  auto;
    background-color:#ffff ;
    padding: 25px 25px 25px 25px;
    border-radius: 10px;
}
/* タイ */
#section3 .bctl  .inline{
    display: inline-block;
    border-radius: 10px;
    background-color:#ffff ;
    padding: 10px 25px 25px 25px;
    width: 50%;
}
#section3 .bctl .flexitem{
    width: 47%;
    margin-top: 10px;
}
#section3 .bctl .flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* section4 */
#section4 .theme{
    margin-top: 30px;
    font-size: 1.4rem;
    display: block;
    font-weight: bold;
    margin-bottom: 20px;
}
#section4 .pdfbutton{
    padding: 2px 11px 2px 11px;
    background-color: #e84125;
    border-radius: 5px;
    font-size: 0.9rem;
    margin-left: 5px;
    color: #fff;
    display: inline-block;
}

/* モーダル */
.all{
    width: 40%;
    background-color: #ffffff;
    text-align: center;
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translateX(-50%)translateY(-50%);
}
.xbutton {
    font-family: 'Noto Sans JP', sans-serif;
    position: absolute;
    top: 9px;
    right: 10px;
    cursor: pointer;
    font-size: 3.8rem;
    font-weight: 100;
    color: #fff;
    display: block;
    z-index: 10;
    line-height: 0.9em;
}

.all .mvp,.all2 .mvp{
    font-family: 'Kosugi Maru', sans-serif;
    display: block;
    width: 100%;
    background-color: #0d2ea1;
    padding: 20px;
    color: #fff;
    font-size: 1.5rem;
    text-align: center;
    box-sizing: border-box;
    position: relative;
}
.review{
    margin-bottom: 30px;
}
/* モーダル */
.all2 .name {
    text-align: left;
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.aw_box{
    width: 80%;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: 'Kosugi Maru', sans-serif;
}
.aw_box .flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
} 
.aw_box #works{
    text-align: center;
    display: block;
    width: 100%;
    font-weight: bold;
    font-size: 1.8rem;
} 
.aw_box hr{
    background-color: #fff;
    width: 100%;
    border:none; border-bottom:2px dashed #db8843;
}
.aw_box .work_country, .aw_box #work_country{
    font-size: 1.5rem;
    width: auto;
    display: block;
    text-align: left;
}
.aw_box .work_name, .aw_box #work_name{
    display: block;
    font-size: 1.5rem;
    width: auto;
    text-align: right;
}
@media screen and (max-width: 1000px) {
    .aw_box .work{
        font-size: 1.4rem!important;
    }
    .aw_box .work_name, .aw_box .work_country {
        font-size: 1.3rem!important;
    }
    .aw_box .work_name, .aw_box .work_country {
        font-size: 1.3rem!important;
    }
}
@media screen and (max-width: 860px) {
/* ========================================
    共通パーツ
========================================*/
    .aw_box .work{
        font-size: 1.2rem!important;
    }
    .aw_box .work_name, .aw_box .work_country {
        font-size: 1.1rem!important;
    }
    .aw_box .work_name, .aw_box .work_country {
        font-size: 1.1rem!important;
    }
    .title_label .inner{
        font-size: 1.7rem!important;
    }
    /* モーダル */
    .all{
        width: 80%;
    }
}


@media screen and (max-width: 640px) {
    .aw_box .work{
        font-size: 1.3rem!important;
    }
    .aw_box .work_name, .aw_box .work_country {
        font-size: 1.2rem!important;
    }
    .aw_box .work_name, .aw_box .work_country {
        font-size: 1.2rem!important;
    }
/* ========================================
    共通パーツ
========================================*/
    .xbutton {
        position: absolute;
        font-size: 2.8rem;
        top: 13px;
        right: 13px;
    }
    .title_label .inner{
        font-size: 1.5rem!important;
    }
    .aw_box{
        width: 100%;
    }
    .aw_box .work{
        font-size: 1.5rem!important;
    }
    .all .mvp{
        font-size: 1.5rem;
    }
    .aw_box #works {
        font-size: 1.3rem;
        line-height: 1.1;
    }
    .aw_box .work_country,.aw_box .work_name, .aw_box #work_country,.aw_box #work_name{
        font-size: 1.1rem!important;
    }
    #section2 .d2 .flex_d2{
        flex-wrap: wrap;
    }
    #section2 .d2 .flex_d2 .flexitem:nth-of-type(1){
        width: 100%;
    }
    #section2 .d2 .flex_d2 .flexitem:nth-of-type(2){
        width: 100%;
    }
    #section2 .d3 .flex_d3{
        display: block
    }
    #section2 .d3 .flex_d3 .flexitem{
        width: 100%;
    }
    #section3 .jp .flexitem,#section3 .t .flexitem{
        width: 48%;
    }
    #section3 .c .flexitem{
        width: 43%;
    }
    #section3 .bctl .inline{
        width: 85%;
    }
    .cover{
        padding: 5px;
    }
    .all .mvp,.all2 .mvp{
        font-size: 1.2rem;/
    }
}
/* ////////////////////////////////////////////////
///////////////////// 共通部分 /////////////////////
//////////////////////////////////////////////// */

/* ボタン */
.my_modal_btn {
    display: block;
    background-color: aliceblue;
    cursor: pointer;
}
.my_modal_btn2 {
    display: block;
    background-color: rgb(255, 255, 255);
    width: 300px;
    margin: 0 auto;
    cursor: pointer;
}
/* モーダルコンテンツ部分 */
.all2 {
    display: none;
    position: fixed;
    z-index: 100000;
    width: 80%;
    max-height: 80%;
    background-color: #ffffff;
    left: 50%;
    top: 50%;
    transform: translateX(-50%)translateY(-50%);
}
@media screen and (max-width: 860px) {
    .all2 {
        width: 80%;
        max-width: 600px;
    }
}
.all {
    display: none;
    position: fixed;
    z-index: 100000;
    width: 40%;
    max-height: 95%;
    background-color: #ffffff;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translateX(-50%)translateY(-50%);
    max-width: 600px;
}
@media screen and (max-width: 860px) {
    .all {
        width: 80%;
        max-width: 600px;
    }
}
.cover {
    padding: 20px;
    max-height: calc(95vh - 100px - 1.5rem);
    max-height: calc(95dvh - 100px - 1.5rem);
    overflow-y: auto;
}
.cover img {
    width: 100%;
}
.cover2 {
    padding: 20px;
    max-height: calc(80vh - 101px - 1.5rem);
    max-height: calc(80dvh - 101px - 1.5rem);
    overflow-y: auto;
}
.aw_box {
    width: 80%;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: 'Kosugi Maru', sans-serif;
}
.work_flex {
    justify-content: space-between;
}
.aw_box .work_name,
.aw_box .work_country{
    font-size: 1.5rem;
    width: auto;
    display: block;
    text-align: left;
}
/* モーダル背景 */
.my_modal_overlay {
    display: none;
    position: fixed;
    z-index: 90000;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #111;
    opacity: 0.6;
}
/* ////////////////////////////////////////////////
///// 追加する場合は以下の通りに増やしていく /////
//////////////////////////////////////////////// */

/* チェックボックスを非表示 */
#my_modal1,#my_modal2,#my_modal4,#my_modal5,
#my_modal6,#my_modal7,#my_modal8,#my_modal9,
#my_modal10,#my_modal11,#my_modal12,#my_modal13,
#my_modal14,#my_modal15,#my_modal16,#my_modal17,
#my_modal18,#my_modal19,#my_modal20,#my_modal21,
#my_modal22,#my_modal23,#my_modal24,#my_modal25,
#my_modal26{
    display: none;
}

/* チェック時オーバーレイとコンテンツを表示 */
#my_modal1:checked ~ .all,
#my_modal1:checked ~ .my_modal_overlay {
    display: block;
}

/* チェック時オーバーレイとコンテンツを表示 */
#my_modal2:checked ~ .all,
#my_modal2:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal4:checked ~ .all,
#my_modal4:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal5:checked ~ .all,
#my_modal5:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal6:checked ~ .all,
#my_modal6:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal7:checked ~ .all,
#my_modal7:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal8:checked ~ .all,
#my_modal8:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal9:checked ~ .all,
#my_modal9:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal10:checked ~ .all,
#my_modal10:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal11:checked ~ .all,
#my_modal11:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal12:checked ~ .all,
#my_modal12:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal13:checked ~ .all,
#my_modal13:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal14:checked ~ .all,
#my_modal14:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal15:checked ~ .all,
#my_modal15:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal16:checked ~ .all,
#my_modal16:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal17:checked ~ .all,
#my_modal17:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal18:checked ~ .all,
#my_modal18:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal19:checked ~ .all,
#my_modal19:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal20:checked ~ .all,
#my_modal20:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal21:checked ~ .all,
#my_modal21:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal22:checked ~ .all,
#my_modal22:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal23:checked ~ .all,
#my_modal23:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal24:checked ~ .all,
#my_modal24:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal25:checked ~ .all,
#my_modal25:checked ~ .my_modal_overlay {
    display: block;
}
/* チェック時オーバーレイとコンテンツを表示 */
#my_modal26:checked ~ .all2,
#my_modal26:checked ~ .my_modal_overlay {
    display: block;
}