@charset "utf-8";




/*===================================================
  NEWS
====================================================*/
#news .news_list { overflow: hidden;}
.news_list .box {
    float: left;
    display: flex; align-items: center; gap:30px;
    margin: 0 2% 40px;
    width: 46%;
}
.news_list .box:nth-child(2n + 1) { clear: both;}
.news_list .box  a { color: #000;}
.news_list .box .pic { width: 150px;}
.news_list .box .cont { width: calc(100% - 30px - 150px);}
.news_list .box  .day {
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
    font-family: "Roboto", sans-serif;
    font-weight: 800;
    font-size:clamp(125%, 2vw, 162.5%);
}
.news_list .box  .cate {
    float: left;
    width: 85px;
    font-size: 75%; line-height: 24px;
    text-align: center;
    color: #fff;
    background: #E60012;
}
.news_list .box  .come {
    clear: both;
    width: 100%;
    line-height: 150%;
}
@media only screen and (max-width:768px){
    .news_list .box { float: none; align-items: flex-start; width: 96%; gap:20px;}
    .news_list .box .pic { width: 100px;}
    .news_list .box .cont { width: calc(100% - 20px - 100px);}
}

/*===================================================
  ABOUT
====================================================*/
#about h3 {
    margin:0 2% 80px;
    text-align: center;
    color: #000;
}
#about h3 b {
    display: block;
    font-family: "Roboto", sans-serif;
    font-style: italic;
    font-size: clamp(250%, 7vw, 475%);
    line-height: 110%;
}
#about h3 small {
    font-size: 125%;
    font-weight: 400;
}
#about h3 span { color: #E60012; }



#about .intro h3 { margin-bottom: 40px;}
#about .intro .come {
    margin: 0 2%;
    font-size:clamp(100%, 1.9vw, 112.5%);
    text-align: center;
}
@media only screen and (max-width:468px){
    #about .intro .come { text-align: left;}
}


#about .vishion {
    position: relative;
    padding: 7% 0;
    background: url("../../image/about_bg.png") no-repeat;
    background-size: cover;
}
#about .vishion::before,
#about .vishion::after {
    position: absolute; left: 0;
    display: block; clear: both; content:"";
    width: 100%; height:auto; aspect-ratio: 2800 / 238;
    background-size: 100% auto !important;
}
#about .vishion::before {
    top: -1px;
    background: url("../../image/slash_top.png") no-repeat;
}
#about .vishion::after {
    bottom: -1px;
    background: url("../../image/slash_bottom.png") no-repeat;
}
#about .vishion h3 { color: #fff;}
#about .vishion .vishion_list {
    display: flex; flex-direction: column; gap:80px;
    margin:0 2%;
    color: #fff;
    text-align: center;
}
#about .vishion .vishion_list dl { display: flex; flex-direction: column; gap:10px;}
#about .vishion .vishion_list dt { font-size:clamp(137.5%, 3vw, 225%); font-weight:800;}
#about .vishion .vishion_list dd { font-size:clamp(100%, 1.9vw, 112.5%);}
@media only screen and (max-width:768px){
    #about .vishion .vishion_list { gap:60px;}
}
@media only screen and (max-width:468px){
    #about .vishion .vishion_list { gap:40px;}
}






#about .about {
    margin: 0 auto; max-width: 630px;
}
#about .about .about_list { margin:0 2%;}
#about .about dl {
    display: flex; flex-wrap: wrap;
    padding-bottom: 10px;
}
#about .about dl dt { padding: 10px 0;}
#about .about dl dd { padding: 10px 10px;}
#about .about dl dt { width: 200px; font-weight: 600; border-bottom: 1px solid #E60012;}
#about .about dl dd { width: calc(100% - 200px); border-bottom: 1px solid #ddd;}
@media only screen and (max-width:768px){
    #about .about {flex-direction: column;}
    #about .about dl { width: 100%;}
}
@media only screen and (max-width:468px){
    #about .about dl { flex-direction: column;}
    #about .about dl dt { width: 100% !important;}
    #about .about dl dd { padding: 10px 0; width: 100% !important; border-bottom:none;}
}




/*===================================================
  TEAM
====================================================*/

/* TAB */
#team .tab { display: flex; flex-wrap: wrap; margin: 0 2%; background: #000;}
#team .tab p { width:16.66%; text-align: center;}
#team .tab p + p { border-left: 1px solid #fff;}
#team .tab p a {
    display: block;
    width: 100%;
    font-size: 125%;
    color: #fff;
    line-height: 60px;
}
#team .team_wrap {}

/* MIDASHI */
#team h3 { margin:60px 2% 40px; border-bottom: 5px solid #E60012;}
#team h3 b {
    position: relative; bottom: -12px;
    font-family: "Roboto", sans-serif;
    font-style: italic;
    font-size: clamp(200%, 6.5vw, 475%);
    line-height: 46px;
    background: #fff;
}
#team h3 small {
    position: relative; left: 20px; bottom: 10px;
    font-size: clamp(75%, 2vw, 125%);
    font-weight: 400;
}
#team h3 span { color: #E60012; }

/* LIST */
#team .team_list {}
#team .team_list::after { display: block; clear: both; content:"";}
#team .box {
    float: left;
    margin: 0 2% 40px;
    width: 21%;
}
#team .box:nth-child(4n+1) { clear: both;}
#team .box .cont { display: flex; align-items: flex-start;}
#team .box .pic { margin-bottom: 10px;}
#team .box .no {
    position: relative; left: -10px;
    width: 50px; height: auto; aspect-ratio: 77 / 56;
    font-family: "Roboto", sans-serif;
    font-style: italic;
    font-weight: 800;
    font-size: clamp(125%, 2.5vw, 187.5%);
    line-height: 46px;
    text-align: center;
    color: #fff;
    background: url("../../image/no_bg.png") no-repeat left center;
    background-size: 100% auto;
}
#team .box .post {
    display: block;
    width: 100%;
    font-weight: 600;
    font-size:87.5%;
    line-height: 20px;
    color:#E60012;
}
#team .box .namae { padding-top: 10px; line-height: 120%;}
#team .box .namae b { 
    font-size: clamp(125%, 2vw, 137%);
}
#team .box .namae small {
    font-size: clamp(75%, 1.5vw, 100%);
}
@media only screen and (min-width:768px){
    #team .tab p a:hover { text-decoration: none; background: #E60012;}
}
@media only screen and (max-width:768px){
    #team .box { width:29.3%;}
    #team .box:nth-child(4n+1) { clear: none;}
    #team .box:nth-child(3n+1) { clear: both;}
    #team .box .no { width: 50px; line-height: 50px;}
}
@media only screen and (max-width:468px){
    #team .tab p { width:33.3%;}
    #team .tab p a { font-size: 100%; line-height:40px;}
    #team h3 b { bottom: -14px; line-height:40px;}
    #team h3 small { left:10px; bottom:3px;}
    #team .box { width:46%;}
    #team .box:nth-child(3n+1) { clear: none;}
    #team .box:nth-child(2n+1) { clear: both;}
    #team .box .pic { margin-bottom:0;}
    #team .box .no { width:40px;}
}

/* DETAIL */
#team-detail {}
#team-detail .inner { display: flex; flex-direction: column; gap:80px;}
#team-detail .profile {
    display: flex; gap: 20px 60px;
    margin: 0 2%;
}
#team-detail .profile .pic { width: 360px;}
#team-detail .profile .cont {
    display: flex; flex-direction: column; gap:30px;
    width: calc(100% - 360px - 60px);
}
#team-detail .profile .number {
    display: flex;
    font-size: clamp(112.5%, 1.9vw, 125%);
    line-height: 56px;
}
#team-detail .profile .no {
    position: relative; left: -10px;
    width: 77px; height: auto; aspect-ratio: 77 / 56;
    font-family: "Roboto", sans-serif;
    font-style: italic;
    font-weight: 800;
    font-size: clamp(125%, 3vw, 250%);
    line-height: 56px;
    text-align: center;
    color: #fff;
    background: url("../../image/no_bg.png") no-repeat left center;
    background-size: 100% auto;
}
#team-detail .profile .namae b {
    margin-right: 15px;
    font-weight: 800;
    font-size: clamp(150%, 1.5vw, 287.5%);
}
#team-detail .profile .namae small {
    font-family: "Roboto", sans-serif;
    font-style: italic;
    font-weight: 800;
    font-size: clamp(125%, 1.5vw, 168.%);
}
#team-detail .profile .prof {
    display: flex; flex-wrap: wrap; gap:20px 40px;
}
#team-detail .profile .prof dl {
    display: flex; flex-wrap: wrap;
    padding-bottom: 10px;
    width: calc(50% - 40px);
    border-bottom: 1px solid #ddd;
}
#team-detail .profile .prof dl dt { width: 120px;}
#team-detail .profile .prof dl dd { width: calc(100% - 120px);}
#team-detail .profile .prof dl:last-child { width: 100%;}

#team-detail .profile2 {
    margin: 0 2%; padding: 50px;
    background: rgba(228,228,228,0.15);
}
#team-detail .profile2 dl {
    display: flex; flex-wrap: wrap;
    padding-bottom: 10px;
}
#team-detail .profile2 dl dt { padding: 10px 0;}
#team-detail .profile2 dl dd { padding: 10px 10px;}
#team-detail .profile2 dl dt { width: 300px; font-weight: 600; border-bottom: 1px solid #E60012;}
#team-detail .profile2 dl dd { width: calc(100% - 300px); border-bottom: 1px solid #ddd;}

@media only screen and (max-width:1200px){
    #team-detail .profile { gap:30px;}
    #team-detail .profile .pic { width: 40%;}
    #team-detail .profile .cont { width: calc(100% - 40% - 30px);}
}
@media only screen and (max-width:968px){
    #team-detail .profile .pic { width: 30%;}
    #team-detail .profile .cont { width: calc(100% - 30% - 30px);}
}
@media only screen and (max-width:768px){
    #team-detail .inner { gap:60px;}
    #team-detail .profile .prof dl { width: 100%;}
    #team-detail .profile .no { width:60px; line-height: 60px;}
    #team-detail .profile2 {flex-direction: column;}
    #team-detail .profile2 dl { width: 100%;}
}
@media only screen and (max-width:468px){
    #team-detail .inner { gap:40px;}
    #team-detail .profile { flex-direction: column;}
    #team-detail .profile .pic { margin: auto; width:80%;}
    #team-detail .profile .cont { margin: auto; width: 100%; gap:20px;}
    #team-detail .profile .number,
    #team-detail .profile .namae { margin: 0 auto; width: 90%;}
    #team-detail .profile .no { left: 0; width:50px;}
    #team-detail .profile .prof { gap:0;}
    #team-detail .profile .prof dl { flex-direction: column;padding: 5%; width: 100%; border-bottom:none;}
    #team-detail .profile .prof dl dt { width: 100% !important; border-bottom: 1px solid #ddd;}
    #team-detail .profile .prof dl dd { padding: 10px 0; width: 100% !important;}
    #team-detail .profile2 { padding: 5%;}
    #team-detail .profile2 dl { flex-direction: column;}
    #team-detail .profile2 dl dt { width: 100% !important;}
    #team-detail .profile2 dl dd { padding: 10px 0; width: 100% !important; border-bottom:none;}
}



/*===================================================
  GAME
====================================================*/


/*===================================================
  SDGs
====================================================*/
#sdgs {}

/* TITLE */
#sdgs h3 {
    margin:0 2%;
    text-align: center;
}
#sdgs h3 span { position: relative;}
#sdgs h3 span::before,
#sdgs h3 span::after {
    position: absolute; top:30px;
    display: block; clear: both; content:"";
    width: 137px; height: auto; aspect-ratio: 137 / 14;
    background: url("../../image/sdgs_tit.png") no-repeat;
    background-size: 100% auto;
}
#sdgs h3 span::before { left:-270px;}
#sdgs h3 span::after { right:-270px;}
#sdgs h3 b {
    display: block;
    font-family: "Roboto", sans-serif;
    font-style: italic;
    font-size: clamp(250%, 7vw, 475%);
    line-height: 110%;
}
#sdgs h3 small {
    font-size: 125%;
    font-weight: 400;
}
#sdgs h3 span.red { color: #E60012; }
@media only screen and (max-width:768px){
    #sdgs h3 span::before { top:20px; left:-230px;}
    #sdgs h3 span::after { top:20px; right:-230px;}
}
@media only screen and (max-width:468px){
    #sdgs h3 span::before,
    #sdgs h3 span::after { width: 70px;}
    #sdgs h3 span::before { top:15px; left:-140px;}
    #sdgs h3 span::after { top:15px; right:-140px;}
}

/* CATCH */
#sdgs .catch {
    font-size:clamp(162.5%, 3vw, 287.5%);
    font-weight: 800;
    text-align: center;
    line-height: 130%;
}

/* BUTTON */
#sdgs .b_back { margin:0 auto; width:100%; max-width:300px;}
#sdgs .b_back a {
    display: block;
	padding:10px;
	font-size:clamp(100%, 1.9vw, 125%);
	font-weight:600;
	color:#FFF;
    text-align: center;
    background:#E60012;
    border-radius: 50px;
}
@media only screen and (min-width:768px){
    #sdgs .b_back a:hover { text-decoration: none; opacity: 0.7;}
}

/* MAINIMG */
#sdgs .sdgs_mainimg { position: relative; margin-bottom:10%; padding-top: 20px;}
#sdgs .sdgs_mainimg ul.main_slide { margin:0 auto; width:850px;}
#sdgs .sdgs_mainimg ul.main_slide li { margin: 0 10px;}
#sdgs .sdgs_mainimg ul.main_slide img { max-width:100%; height:auto; aspect-ratio: 850 / 570; border-radius: 30px; object-fit: cover;}
#sdgs .sdgs_mainimg ul.main_slide .slick-list { overflow:visible;}
#sdgs .sdgs_mainimg h2 {
    position: absolute; left: 0; right: 0; bottom: -30%;
    margin: auto;
    width:60%; max-width:720px; height: auto; aspect-ratio: 726 / 421;
}
@media only screen and (max-width:768px){
    #sdgs .sdgs_mainimg ul.main_slide { width:80%;}
}
@media only screen and (max-width:468px){
    #sdgs .sdgs_mainimg ul.main_slide { width:90%;}
    #sdgs .sdgs_mainimg ul.main_slide li { margin: 0 5px;}
}

/* ABOUT */
#sdgs .sdgs_about {
    background:  url("../../image/adgs_about_bg.png") no-repeat center center;
    background-size: auto 100%;
}
#sdgs .sdgs_about .inner {
    display: flex; flex-direction: column; gap:40px;
    padding: 180px 0;
    margin: auto; max-width: 710px;
}
#sdgs .sdgs_about h2 {
    font-size:clamp(87.5%, 162.5%, 225%);
    font-weight: 800;
    line-height: 150%;
    color:#E30011;
    text-align: center;
}
#sdgs .sdgs_about h2 span { border-bottom: 3px solid #E30011;}
#sdgs .sdgs_about .catch b { font-size:clamp(20px, 30px, 46px);}
#sdgs .sdgs_about .catch span { color:#E30011;}
@media only screen and (max-width:768px){
    #sdgs .sdgs_about .inner { padding: 100px 0; max-width: 500px;}
}
@media only screen and (max-width:468px){
    #sdgs .sdgs_about .inner { padding: 40px 0;}
}

/* NEWS */
#sdgs .sdgs_news h3 { margin-bottom: 80px; color: #000;}
#sdgs .sdgs_news .news_cont {
    display: flex; flex-wrap:wrap; gap:40px;
    margin-bottom: 80px;
}
#sdgs .sdgs_news .news_list {
    display: flex; flex-direction: column; gap:20px;
    width: calc(50% - 20px);
    height: 610px;
    overflow:auto;
}
#sdgs .sdgs_news .news_list .box { display: none; margin: 0; width: 100%;}
#sdgs .sdgs_news .news_list .box.cate4 { display:block;}
#sdgs .sdgs_news .report {
    position: relative;
    padding:40px;
    width: calc(50% - 40px);
    background: #FFFDEE;
}
#sdgs .sdgs_news .report::before {
    display: block; clear: both; content:"";
    position: absolute; top: 0; left: 0;
    width:30%; max-width: 115px; height: auto; aspect-ratio: 1 / 1;
    background: url("../../image/report.png") no-repeat;
    background-size: 100% auto;
}
#sdgs .sdgs_news .report .day {
    font-family: "Roboto", sans-serif;
    font-weight: 800;
    font-size:clamp(125%, 2vw, 162.5%);
}
#sdgs .sdgs_news .report .pic { margin-bottom: 20px;}
@media only screen and (max-width:768px){
    #sdgs .sdgs_news h3 { margin-bottom: 40px;}
    #sdgs .sdgs_news .news_cont { flex-direction: column;}
    #sdgs .sdgs_news .news_list,
    #sdgs .sdgs_news .report { 
        display: flex; gap:40px; align-items: center;
        padding: 20px; width: 100%;
    }
    #sdgs .sdgs_news .report::before { width: 80px;}
    #sdgs .sdgs_news .report .pic { margin: 0; width: 150px;}
    #sdgs .sdgs_news .report .cont { width: calc(100% - 150px);}
}
@media only screen and (max-width:468px){
    #sdgs .sdgs_news .news_cont { margin-bottom: 40px; height: 300px;}
    #sdgs .sdgs_news .report { flex-direction: column; gap:10px;}
    #sdgs .sdgs_news .report .pic { width: 200px;}
    #sdgs .sdgs_news .report .cont { width:100%;}
}

/* MESSAGE */
#sdgs .sdgs_mess {
    position: relative;
    margin:0 auto 100px; width: 94%; max-width: 1300px;
    color: #fff;
    background: #E30011 url("../../image/sdgs_mess_bg.png") no-repeat left bottom;
    background-size: 100% auto;
    border-radius: 50px;
    box-shadow: 20px 20px 0px 0px rgba(0, 0, 0, 0.1);
}
#sdgs .sdgs_mess::after,
#sdgs .sdgs_mess::before {
    display: block; clear: both; content:"";
    position: absolute;
    width:30%; height: auto;
    background-size: 100% auto !important
}
#sdgs .sdgs_mess::after {
    top: -10%; left: -10%;
    max-width:460px; aspect-ratio: 460 / 526;
    background: url("../../image/adgs_mess_kazari1.png") no-repeat;

}
#sdgs .sdgs_mess::before {
    bottom: -10%; right: -10%;
    max-width:472px; aspect-ratio: 472 / 369;
    background: url("../../image/adgs_mess_kazari2.png") no-repeat;
}
#sdgs .sdgs_mess .inner {
    display: flex; flex-direction: column; gap:40px;
    width: 90%; max-width: 710px;
}
#sdgs .sdgs_mess h3 { color: #fff;}
#sdgs .sdgs_mess .namae { text-align: right;}
@media only screen and (max-width:768px){
    #sdgs .sdgs_mess::after { top: -5%; left: -7%;}
    #sdgs .sdgs_mess::before {bottom: -6%; right: -7%;}
}
@media only screen and (max-width:468px){
    #sdgs .sdgs_mess {
        margin: auto;
        width: 100%;
        border-radius:0;
    }
    #sdgs .sdgs_mess::after,
    #sdgs .sdgs_mess::before { width: 40%;}
    #sdgs .sdgs_mess::after { top: -3%; left: -3%;}
    #sdgs .sdgs_mess::before {bottom: -3%; right: -3%;}
}

/* GOALS */
#sdgs .sdgs_goals {
    background:url("../../image/sdgs_line.png") repeat-x top center;
}
#sdgs .sdgs_goals .inner { 
    display: flex; flex-direction: column; gap:40px;
    max-width: 710px;
}
#sdgs .sdgs_goals .mid { margin: auto; width: 96%; max-width: 500px;}
#sdgs .sdgs_goals .mid img { margin-bottom: 20px}
#sdgs .sdgs_goals .mid span {
    display: block;
    padding: 5px;
    text-align: center;
    color: #fff;
    font-size:clamp(100%, 2vw, 162.5%);
    background: #119DDA;
    border-radius: 50px;
}
#sdgs .sdgs_goals .pic { margin: 0 2%;}
#sdgs .sdgs_goals .come {
    margin: 0 2%;
    font-size:clamp(100%, 2vw, 162.5%);
    font-weight: 800;
    text-align: center;
}
#sdgs .sdgs_goals .catch {
    margin: 0 2%;
    color: #E30011;
}


/*===================================================
  SPONSOR
====================================================*/
#sponsor {}
#sponsor .sponsor_bana {
    display: flex; flex-wrap: wrap; justify-content: center; gap:1%;
    overflow: hidden;
}
#sponsor .sponsor_bana p { margin: 0 0 1%; width:calc(16.6% - 0.83%);}
@media only screen and (max-width:768px){
    #toppage .sponsor .inner { gap:60px;}
}
@media only screen and (max-width:468px){
    #sponsor .sponsor_bana { justify-content: flex-start; gap:2%}
    #sponsor .sponsor_bana p { margin: 0 0 2%; width:calc(50% - 1%);}
}