@charset "UTF-8";
#page_sec #header{background: #0080c7;padding: 20px 0}
#page_sec #header h1{width: 200px;position: static}
#page_sec #header nav li{margin-left: 30px}
#page_sec #header nav a{font-size: 18px;font-weight: bold;color: #fff}

.pan{background: #ddeaf7;padding: 20px 0;}
.pan .breadcrumb{font-size: 1.2rem}
.pan h2{font-size: 4rem;font-weight: bold;color: #0080c7}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
#page_sec #header{padding: 15px 0px 15px 10px}
#page_sec #header .inner--base{width: 100%;max-width: 100%}
#page_sec #header h1{width: 25%;}
#page_sec #header nav{right: 10px;top:-5px;}
#page_sec #header nav{width: 75%}
#page_sec #header nav li{margin-left: 4px}
#page_sec #header nav a{font-size: 13px;}
.pan{background: #ddeaf7;padding: 20px;}
.pan h2{font-size: 2.2rem;}
}

#news_area{padding: 60px 0;width: 80%;margin: auto}
#news_area .ichiran li{width: 30%; border: 1px solid #ccc;border-radius: 10px;margin-bottom: 30px;}
#news_area .ichiran li .photo{   position: relative;   overflow: hidden;   padding-top: 60%;}
#news_area .ichiran li .photo img{border-radius: 10px 10px 0 0;   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%,-50%);   width: 100%;   height: 100%;   object-fit: cover;}


#news_area .ichiran li a{display: block;position: relative;color: #000;}
#news_area .ichiran li .box{padding: 16px;}
#news_area .ichiran li .box .date{margin-bottom: 8px}
#news_area .ichiran li .box h3{font-size: 1.6rem;line-height: 1.7}
#news_area .ichiran::after {display: block;content:"";width: 30%;}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
#news_area{padding: 40px 0;width: 90%;margin: auto}
#news_area .ichiran li{width: 48%; }
}


#news_detail{padding: 60px 0;width: 80%;margin: auto}
#news_detail .date{margin-bottom: 10px;}
#news_detail .title{background: #ececec;padding: 20px;font-size: 2rem;border-bottom: 3px solid #0080c7;font-weight: bold; margin: 20px 0}
#news_detail .news_contents h2.wp-block-heading{
font-size: 2rem;
line-height: 1.7;
padding-bottom: 20px;
font-weight: bold;
padding-top: 20px;
}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
#news_detail{padding: 40px 0;width: 90%;margin: auto}
#news_detail .title{font-size: 1.6rem;line-height: 1.7}
}

}




.btback{text-align: center;padding-bottom: 60px}
.btback a{display: inline-block;position: relative;padding: 12px 80px;border: 1px solid #666;border-radius: 40px; color: #000;text-align: center;}
.btback a::after{
    content: '';
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border-top: solid 1px #0080c7;  /* 好みで色を変えてください */ 
    border-right: solid 1px #0080c7;   /* 好みで色を変えてください */  
    transform: rotate(225deg);
    position: absolute;
    top: 50%;
    left:20px;
}

h3.title1{font-size: 2.6rem;letter-spacing: 0.1;font-weight: bold;margin-top: 40px;margin-bottom: 16px}
.txt1{line-height: 2;letter-spacing: 0.05em}

.btP{width: 500px;margin:40px  auto 0}
.btP a{display: block;text-align: center; background: #fc3ea1;color: #fff;font-size: 2rem;border-radius: 10px;font-weight: bold; padding: 20px 0;position: relative}
.btP a:before {width: 20px;height: 20px;content: "";background: url("../images/icon_arow.svg") no-repeat center center;background-size:auto 20px;    position: absolute;
top: 50%;right: 3%;margin: auto;transform: translate(0%, -50%);}
.btP a:hover{opacity: 0.7}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
h3.title1{font-size: 1.8rem;}
.btP a{font-size: 1.4rem;}
.btP{width: 80%;margin:40px  auto 0}
}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
#about_area .inner--base{width: 90%;min-width: 90%;}
#info_area .inner--base{width: 90%;min-width: 90%;}
#entry_area .inner--base{width: 90%;min-width: 90%;}
}


#about_area{padding: 60px 0;}
#about_area .p1{margin: 40px 0}
#about_area h2{position: relative;text-align: center; font-size: 2.6rem;font-weight: bold;padding: 30px 0;margin-bottom: 40px}
#about_area h2:before {width: 230px;height: 140px;content: "";background: url("../about/images/txt_profie.svg") no-repeat center center;background-size: 100%;    position: absolute;
top: 0px;left: 0;right: 0;margin: auto}
#about_area .concept{margin-top: 60px}
#about_area .concept dt{width: 26%;}
#about_area .concept dd{width: 70%}
#about_area .sdgs{margin-top: 60px;text-align: center}
#about_area .sdgs .logo{width: 60%;margin: auto}
#about_area .sdgs .col6{width: 74%;text-align: left}
#about_area .sdgs dd ul{margin-bottom: 20px}
#about_area .profile .col2{margin-bottom: 40px}


@media screen and (max-width: 768px) {/*スマホのスタイル*/
#about_area{padding: 30px 0;}
#about_area h2{font-size: 2rem}
#about_area .col3,
#about_area .col3_2{width: 100%;margin-bottom: 20px}
#about_area .concept dt{width: 60%;margin: auto; margin-bottom: 30px}
#about_area .concept dd{width: 100%}
#about_area .profile .col2{width: 100%;margin: auto; margin-bottom: 40px}
#about_area .sdgs .logo{width: 100%;margin: auto}
#about_area .sdgs dt{margin-bottom: 20px}
#about_area .sdgs .col2{width: 100%}
#about_area .sdgs .col6{width: 74%;text-align: left}
}

#info_area .outline{padding: 60px 0;}
#info_area .outline h2{position: relative;text-align: center; font-size: 2.6rem;font-weight: bold;padding: 30px 0;margin-bottom: 40px}
#info_area .outline h2:before {width: 230px;height: 140px;content: "";background: url("../info/images/txt_outline.svg") no-repeat center center;background-size: 100%;    position: absolute;
top: 0px;left: 0;right: 0;margin: auto}
#info_area th{font-weight: bold; width: 20%;padding: 8px 0;border-bottom: 1px solid #ccc}
#info_area td{padding: 8px 0;border-bottom: 1px solid #ccc}
#info_area .course{padding: 60px 0;}
#info_area .course h2{position: relative;text-align: center; font-size: 2.6rem;font-weight: bold;padding: 30px 0;margin-bottom: 40px}
#info_area .course h2:before {width: 230px;height: 140px;content: "";background: url("../info/images/txt_course.svg") no-repeat center center;background-size: 100%;    position: absolute;
top: 0px;left: 0;right: 0;margin: auto}


@media screen and (max-width: 768px) {/*スマホのスタイル*/
#info_area .outline,
#info_area .course{padding: 30px 0;}
}



#entry_area{padding: 60px 0;}
#entry_area dd p {margin-left: 1em;text-indent: -1em;padding: 8px 0}
#entry_area dt{font-weight: bold;font-size: 2.6rem;letter-spacing: 0.1; }
#entry_area dd{margin: 10px 0 20px 0px;padding-left: 20px;padding-bottom: 20px; border-bottom: 1px solid #ccc}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
#entry_area{padding: 30px 0;}
#entry_area dt{font-size: 1.8rem}
}

.douga{text-align: center;width: 70%;margin: auto;}
.youtube-variable{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube-variable iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}