@charset "UTF-8";
header {
background-color: transparent;
box-shadow: none;
position: absolute;
}
header.fixed{
background-color: #fff;
box-shadow: 0px 3px 26px 0px rgba(0, 0, 0, 0.16);
position: fixed;
}
.drawer-menu{display: none!important;}
.drawer-open .drawer-menu{display: flex!important;}
header.fixed .drawer-menu{display: flex!important;}
h2{font-size: 28px;}
h2:before {margin-bottom: 8px;}
section:nth-of-type(even){background-color: inherit;}
.page-wrapper{max-width: 1048px;}

#fv{
width: 100%;
height: auto;
overflow: hidden;
background-color:inherit;
padding: 0;
position: relative;
}
#fv img{width: 100%;height: auto;display: block;}
#fv__layer_animation{
width: 100%;
height: 765px;
position: relative;
overflow: hidden;
}
#fv__layer_animation img{
width: auto;
height: 765px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
display: block;
}
.fv__layer_1{
width: 100%;
height: 100%;
background-image: url("../images/top/fv__layer_1.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
transition: opacity 1s ease;
}
.fv__layer_2,.fv__layer_3,.fv__layer_4{display: none;opacity: 0;transition: opacity 0.5s ease;}
.fv__layer_2{z-index: 2;}
.fv__layer_3{z-index: 3;}
.fv__layer_4{z-index: 4;}

#cv{
width: 100%;
display: flex;
justify-content: space-between;
background-color: #fff;
position: absolute;
bottom: 0;
z-index:1000;
}
#cv .btn {
width: calc(50% - 2px);
min-width:inherit;
box-shadow: none;
border-radius: 0;
}

.menu__btn_list{
width: 90%;
height: auto;
margin: 20px auto;
display: flex;
gap: 30px;
justify-content: center;
}
.menu__btn_item.btn{
font-size: 16px;
padding: 20px 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
text-align: left;
}
.menu__btn_item:after{content: none;}
.menu__btn_item:before{
content: "";
width: 55px;
height: 55px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
.menu__btn_item:first-of-type:before{background-image: url("../images/top/icon_my-hometown.svg");}
.menu__btn_item:nth-of-type(2):before{background-image: url("../images/top/icon_lecture.svg");}
.menu__btn_item:last-of-type:before{background-image: url("../images/top/icon_quiz.svg");}

#interview{background-color:#FAF1E8;}
#interview h2{display: inline-block;width: auto;}
#interview h2:before{content: "MESSAGE FROM SEEDS ASIA";}
.interview__wrapper{
width: 100%;
max-width: 950px;
height: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap:2%;
margin: 0 auto;
}
.interview__wrapper dt {
width: 43%;
min-width: 300px;
height: auto;
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border-radius: 10px
}
.interview__wrapper dt img {
width: 100%;
height: auto;
display: block;
}
.interview__wrapper dd{
width: 55%;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 25px;
}
.interview__wrapper dd .txt{width: 100%;}
.profile__box .position{
width: 100%;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.01em;
display: flex;
align-items: center;
gap: 10px;
}
.profile__box .name{font-size: 20px;font-weight: 700;}
.profile__box .name span{
font-size: 10px;
letter-spacing: 0.02em;
color: #B45124;
display: inline-block;
}

#news{padding-bottom: 0;}
#news h2:before{content: "NEWS";text-align: center;}
#news .page-wrapper{
width: 90%;
max-width: 1040px;
height: auto;
padding-bottom: 30px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-image : linear-gradient(to right, #FA8907 2px, transparent 2px);
background-size: 15px 2px;
background-repeat: repeat-x;
background-position: left bottom;
}
#news .wp-block-latest-posts__list{width: 80%;}
#news .wp-block-latest-posts__list li:nth-child(odd) .date_cat .cat{background-color:#5F3F30;}
#news .wp-block-latest-posts.wp-block-latest-posts__list li {padding-bottom: 0;margin-bottom: 30px;}
#news .wp-block-latest-posts__post-title {margin-top: 0;}
.news__link{width: 100%;text-align: right;}
.news__link a{text-decoration: none;color: inherit;}
.news__link a:after{
content: "";
width: 15px;
height: 15px;
background-image: url("../images/btn_icon_orange.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-bottom: -2px;
margin-left: 10px;
}

#about h2 {color: #5F3F30;}
#about h2:before{content: "WHAT WE DO AND WHERE WE WORK";}
#about .page-wrapper {text-align: center;}
#about .cap{margin-top: 16px;font-weight: 700;}
#about dl{
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content:center;
gap: 5%;
margin:55px 0 40px 0;
}
#about dl dt{
width: 533px;
height: auto;
position: relative;
}
.participating-nation__title{
width: 214px;
height: 45px;
line-height: 38px;
color: #fff;
background-image: url(../images/my-hometown/country_title.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
text-align: center;
font-size: 14px;
font-weight: 700;
margin: 0 auto;
}
.participating-nation__list{
width: 100%;
height: auto;
position: relative;
margin-top: 40px;
}
.country_back{width: 100%;display: block;}
.flag{
position: absolute;
width: auto;
height: auto;
text-decoration: none;
color: #222;
font-weight: 500;
font-size: 10px;
z-index: 1;
}
    .flag_bangladesh{top:105px;left:160px;}
    .flag_india{top:80px;left:75px;}
    .flag_indonesia {bottom:95px;right:280px;}
    .flag_japan{top:103px;right:57px;}
    .flag_myanmar{top:147px;left:187px;}
    .flag_nepal {top:60px;left:122px;}
    .flag_pakistan {top:50px;left:30px;}
    .flag_philippines{bottom:172px;right:167px;}
    .flag_vietnam {top:188px;left:249px;}
    .flag_maldives {top:170px;left:40px;}
    .flag_thailand{top: 196px;left: 158px;}
.flag img{width: 30px;height: auto;}
.flag span {
margin-bottom: 10px;
border-radius: 4px;
background-color: #fff;
box-shadow: 0px 1px 3px 0px #9f9f9f;
padding: 0 5px;
display: none;
transition: 0.2s;
position: absolute;
width: 80px;
left: -20px;
top: -30px;
}
.flag span:before {
content: "";
position: absolute;
top: 12px;
left: 50%;
border-style: solid;
border-width: 10px 7.5px 0 7.5px;
border-color: #fff transparent transparent;
translate: -50% 100%;
z-index: 0;
}
.flag span:after {
content: "";
position: absolute;
top: 14px;
left: 50%;
border-style: solid;
border-width: 10px 7.5px 0 7.5px;
border-color: #9f9f9f transparent transparent;
translate: -50% 100%;
z-index: -1;
filter: blur(3px);
}
.flag:hover span{display:block;}

#about dl dd{
width: calc(95% - 533px);
min-width: 440px;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-content: center;
gap: 50px;
}
.about__item{
width: 195px;
height: 195px;
display: flex;
flex-wrap: wrap;
justify-content:center;
align-content: center;
background-color:#BBC879;
border-radius: 50%;
}
.about__item:first-of-type{background-color:#578429;}
.about__item:last-of-type {
background-color:#578429;
padding-top: 20px;
}
.about__item p{
width: 100%;
color: #fff;
font-size:18px;
font-weight: 700;
line-height:1.2em;
}
.about__item p:last-of-type{font-size: 23px;}
.about__item img {height: auto;margin: 6px 0 3px 0;}
.about__item:first-of-type img{width: 43px;}
.about__item:nth-of-type(2) img{width: 63px;}
.about__item:nth-of-type(3) img{width: 55px;}
.about__item:last-of-type img{width: 42px;}
#about .btn_list {justify-content: center;gap: 20px;}
#about .btn {font-size: 18px;padding: 15px 60px 15px 40px;}

#approach{background-color:#FAF1E8;}
#approach h2{
font-size: 28px;
font-weight: 700;
text-align: center;
margin-bottom: 24px;
}
#approach h2:before{content: "FIVE PROMISES";}
#approach h2 strong{font-size: 38px;color: #FA8907;}
.approach__list {
width: 100%;
height: auto;
display: flex;
justify-content:space-evenly;
}
.approach__item{
width:auto;
height: auto;
text-align: center;
}
.approach__item img{
width:165px;
height: auto;
border-radius: 0;
margin: 0 auto;
display: block;
}
.approach__item_ttl{
font-size: 20px;
font-weight: 700;
position: relative;
width: auto;
height: auto;
z-index: 1;
letter-spacing: inherit;
text-align: center;
padding: 0 5px;
display: inline-block;
margin: 5px 0;
}
.approach__item_ttl:after{
content: "";
width: 100%;
height:20px;
position: absolute;
bottom:0;
left: 0;
z-index:-1;
background-color: #FDE8CD;
}
.approach__item:nth-child(even) .approach__item_ttl:after{background-color: #DADCAF;}
.approach__item_cap{font-size: 14px;font-weight: 700;}
.approach__item:nth-of-type(2) .approach__item_cap{white-space: nowrap;}

#sns{text-align:center;}
#sns h2:before{content: "SNS UPDATES";}
.sns__list{
width: 100%;
display: flex;
justify-content: center;
margin-top: 40px;
gap: 5%;
}
.sns__item{
width: 45%;
max-width: 360px;
text-align: center;
display: flex;
flex-wrap: wrap;
align-content: flex-end;
justify-content: center;
}
#sb_instagram #sbi_images .sbi_item {box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);}
#sb_instagram{padding-bottom: 0!important;}
.sns__item img{
width: 100%;
height: auto;
display: block;
box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.16);
}
.sns__item p{
width: 100%;
height: auto;
display: block;
margin: 10px 0;
font-weight: 700;
}
.sns__item:first-of-type p {margin: 10px 0 20px 0;}

#links{background-color:#FAF1E8;}
.link__list{
width: 100%;
height: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: stretch;
gap: 5%;
}
.link__item{
width: 30%;
max-width: 300px;
height: auto;
text-align: center;
border-radius: 10px;
background-color: #fff;
box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.16);
overflow: hidden;
}
.link__item img{
width: 100%;
height: auto;
display: block;
margin-bottom: 20px;
}
.link__item a{text-decoration: none;color: inherit;}
.link__item a:hover{opacity: 0.5;}
.link__item_link{
display: block;
font-size: 16px;
font-weight: 700;
padding: 0 5%;
}
.link__item_link:after{
content: "";
width: 15px;
height: 15px;
background-image: url("../images/btn_icon_orange.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-bottom: -2px;
margin-left: 10px;
}
.link__item ul{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline;
align-content: space-around;
gap: 5px;
margin: 20px 0;
}
.link__item ul li a{font-size: 16px;font-weight: 500;}
.link__item ul li a:before{
content: "";
width: 22px;
height: 22px;
background-image: url("../images/top/link__item_icon.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-bottom: -2px;
margin-left: 10px;
}

@media only screen and (max-width:1280px) {
#fv__layer_animation img{width: 100%;height:auto;}
}

@media only screen and (max-width:1080px) {
header{background-color: #fff;}
#fv{padding: 60px 0 80px 0;}
.approach__list {
flex-wrap: wrap;
justify-content: center;
gap: 5%;
max-width: 800px;
margin: 0 auto;
}
}

@media only screen and (max-width: 950px) {
h2{font-size: 20px;}
.fv__layer_1{background-image: url("../images/top/fv__layer_sp-1.png");height: 100vh;background-position-y: bottom;}
#fv .pc{display: none!important;}
#fv .sp{display: block!important;}
#fv__layer_animation {height: 100vh; max-height: 730px;}
#fv__layer_animation img {width: auto;height: 100vh;}
}

@media only screen and (max-width: 850px) {
.menu__btn_list{gap: 4%;width: 95%;}
.menu__btn_item.btn{
justify-content: center;
padding: 10px;
flex-wrap: wrap;
font-size: 12px;
text-align: center;
border-radius: 20px;
align-items: flex-start;
gap: 5px;
}
.menu__btn_item{min-width: 30%;}
}

@media only screen and (max-width: 600px) {
#fv__layer_animation img {max-height: 670px;object-fit: contain;}
h2{width: 100%;text-align: center;}
#menu{padding: 30px 0 80px 0;}
.menu__btn_item:before{display: block;margin: 0 auto;}
.interview__wrapper dt{width: 210px;}
.interview__wrapper dd{
width: 90%;
max-width: inherit;
gap: 20px;
justify-content: center;
}
.interview__wrapper dd .text{text-align: left;}
.interview__wrapper dd .profile__box{width: 100%;}
#news .wp-block-latest-posts__list{width: 100%;margin-top: 30px;}
#about dl {justify-content: center;}
#about dl dt{width: 335px;}
.participating-nation__list {margin-top: 20px;}
    .flag img{width: 25px;}
    .flag_bangladesh{top:53px;left:103px;}
    .flag_india{top:39px;left:42px;}
    .flag_indonesia {bottom:52px;right:160px;}
    .flag_japan{top:54px;right:27px;}
    .flag_myanmar{top:83px;left:121px;}
    .flag_nepal{top:34px;left:75px;}
    .flag_pakistan {top:19px;left:14px;}
    .flag_philippines{bottom:106px;right:100px;}
    .flag_vietnam{top:105px;left:157px;}
    .flag_maldives{top:90px;left:20px;}
    .flag_thailand{top: 108px;left: 98px;}
#about dl dd{width: 90%;gap:2.5vw;justify-content: center;}
.about__item{width: 155px;height:155px;}
.about__item:last-of-type{padding-bottom: 0;}
.about__item p{font-size: 14px;}
.about__item p:last-of-type{font-size:18px;}

#approach h2{font-size: 18px;}
#approach h2 strong{font-size: 22px;}
.approach__list{gap: 5%;}
.approach__item{width: 45%;}
.approach__item:nth-of-type(2) .approach__item_cap {white-space:inherit;}
.approach__item:last-of-type{width: 100%;}

.sns__list{flex-wrap: wrap;gap: 5vw;}
.sns__item{width: 100%;}
.link__list{gap: 10vw;}
.link__item{width: 100%;}
#fv__layer_animation {height: auto;}
#fv__layer_animation img {width: 100%;}
}