@charset "utf-8";

/*====================================================================================================

  TOPPAGE

====================================================================================================*/

#toppage {
	margin: 0;
	padding: 0;
}
#toppage h3 { text-align:center; position:relative; }
#toppage h3::after {
	content: "";
	left: 0;
	right: 0;
	bottom: -40px;
	width: 68px;
	height: 10px;
	margin: auto;
	position: absolute;
	background: url(../image/tit_bar.svg) no-repeat;
	background-size: contain;
}
#toppage h3 small {
	color: #286189;
	display: block;
	font-size: 125%;
	font-weight: 700;
}
#toppage h3 b {
	display: block;
	font-size: 300%;
	font-weight: 700;
	line-height: 100%;
	margin-top: 20px;
}
#toppage .b_more { margin:80px auto 0; }

.world {margin-top: 30px;}

.world a{
     background-color: #24A8D5;
    color: #fff;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 30px;
}
.world a:hover{
     background-color: #286189;

}


/*** MAINIMG *******************************************************************/
#toppage .mainimg {
	z-index: 1;
	height: 100vh;
	max-height: 878px;
	position: relative;
	background:linear-gradient(rgba(40, 97, 137, 0.4),rgba(40, 97, 137, 0.4)), url(../image/world_map.jpg) no-repeat;
	background-size: cover;
}
#toppage .mainimg h2 {
	left: 0;
	right: 0;
	top: 50%;
	z-index: 2;
	width: 100%;
	margin: auto;
	max-width: 904px;
	position: absolute;
	transform: translateY(-50%);
}
#toppage .mainimg h2 img { width:100%; }
#toppage .mainimg h2::before,
#toppage .mainimg h2::after {
	content: "";
	width: 37px;
	height: 170px;
	top: 50%;
	position: absolute;
	transform: translateY(-50%);
	background: url(../../image/top/shape.svg) no-repeat;
	background-size: contain;
}
#toppage .mainimg h2::before { left:-87px; }
#toppage .mainimg h2::after { right:-87px; }



/*** ABOUT *******************************************************************/
#toppage .about { background:#E9E9E9; }
#toppage .about .box_main { position:relative; padding-block:380px 100px; }
#toppage .about .box1 {
	left: 0;
	top: -102px;
	z-index: 3;
	width: 770px;
	font-weight: 700;
	background: #FFF;
	position: absolute;
	border-radius: 80px;
	padding: 40px 60px 60px;
}
#toppage .about .box1 .mid {
	top: -61px;
	color: #24A8D5;
	font-size: 500%;
	position: relative;
}
#toppage .about .box1 .catch { font-size:187.5%; }
#toppage .about .box1 .come { font-size:112.5%; margin-top:30px; line-height:200%; }
#toppage .about .box2 { 
	right: 0;
	z-index: 2;
	top: -160px;
	width: 511px;
	text-align: center;
	position: absolute;
	background: #24A8D5;
	border-radius: 80px;
	padding: 70px 57px 103px 83px;
}
#toppage .about .box2 img{
   /*⬇︎⬇︎2秒ごとに画像が動くようになっている*/
 animation: fluffy1 2s ease infinite; 
}
@keyframes fluffy1 {
  0% {
    transform: translateX(0); }
  5% {
    transform: translateX(0); }
  10% {
    transform: translateX(0); }
  20% {
    transform: translateX(-10px); }
  25% {
    transform: translateX(0); }
  30% {
    transform: translateX(-10px); }
  50% {
    transform: translateX(0); }
  100% {
    transform: translateX(0); } }
#toppage .about .numbers {
	display: flex;
	margin-top: 140px;
	justify-content: space-between;
}
#toppage .about dl {
	display:flex;
	width: 580px;
	height: 120px;
	/*background: #FFF;*/
	position: relative;
	border-radius: 80px;
	align-items: center;
	padding: 0 42px 0 48px;
	transform-style: preserve-3d;
	justify-content: space-between;
}
#toppage .about dl::before {
	content: "";
	bottom:0;
	left: 0;
	width: 580px;
	height: 120px;
	background: #FFF;
	border-radius: 80px;
	position: absolute;
	z-index: -1;
}
#toppage .about dl::after {
	content: "";
	bottom:0;
	left: 20px;
	width: 150px;
	height: 150px;
	background: #FFF;
	border-radius: 50%;
	position: absolute;
	border: 2px solid #24A8D5;
	transform: translateZ(-1px);
	z-index: -2;
}


#toppage .about dl dt { text-align: center; }
#toppage .about dl dt b { font-size:250%; font-weight:700; }
#toppage .about dl dt small { display:block; font-size:187.5%; font-weight:700; }
#toppage .about dl dd {}
#toppage .about dl dd b { font-size:375%; font-weight: 700; line-height: 100%; color:#24A8D5; }
#toppage .about dl dd small { font-size:187.5%; font-weight:700; margin-left:5px; }



/*** EVENT *******************************************************************/
#toppage .event { padding-block:120px;scroll-behavior:auto; }
#toppage .event .select-box { text-align: right; margin: 60px 0 30px 0; }
#toppage .event .select-box label { margin-right: 10px; font-weight: 500;}
#toppage .event .select-box select {
	width: 140px;
	cursor: pointer;
	font-size: 100%;
	appearance: none;
	padding: 8px 20px 10px 30px;
	border: 1px solid #000;
	font-family: "Noto Sans JP", sans-serif;
	background: url(../image/arrow_down3.svg) no-repeat 12px;
}
#toppage .event .select-box button[type="submit"] {
	width:80px;
	color: #FFF;
	border: none;
	cursor: pointer;
	font-weight: 500;
	background: #1E374B;
	border: 1px solid #1E374B;
	border-radius: 0;
	padding: 13px 0 12px 0;
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
}
#toppage .event .select-box button:hover { opacity:0.7; }

/*** MORE DETAILS *******************************************************************/
#toppage .details { background:#E9E9E9; padding-block:120px; }
#toppage .details h3 { text-align:left; }
#toppage .details h3::after { display:none; }
#toppage .details h3 b { line-height:150%; }
#toppage .details ul {
	display: flex;
	margin-top: 75px;
	justify-content: space-between;
}
#toppage .details ul li { width:540px; position:relative; }
#toppage .details ul li a { text-decoration:none; color:#000; display:block; }
#toppage .details ul li a:hover { opacity:0.7; }
#toppage .details ul li img { width:100%; border-radius:30px; }
#toppage .details ul li .photo {}
#toppage .details ul li .caption {
	left: 0;
	bottom: 0;
	width: 390px;
	height: 60px;
	font-size: 150%;
	font-weight: 700;
	padding-top: 30px;
	position: absolute;
	padding-left: 18px;
	border-top-right-radius: 80px;
	background: #E9E9E9 url(../image/arrow_right1.svg) no-repeat left 40px;
}


/*** FAQ *******************************************************************/
#toppage .faq { padding-block:120px 334px; }
#toppage .faq_list { margin-top:120px; }
#toppage .faq dl {
	border-top: 1px solid #000;
	background: url(../image/arrow_down.svg) no-repeat 98% 30px;
}
#toppage .faq dl.open {
	background: url(../image/arrow_up.svg) no-repeat 98% 30px;
}
#toppage .faq dl:last-child { border-bottom:1px solid #000; }
#toppage .faq dl dt {
	cursor: pointer;
	font-size: 125%;
	font-weight: 700;
	position: relative;
	padding: 40px 120px 40px 60px;
}
#toppage .faq dl dt::before {
	content: "";
	position: absolute;
	left: 20px;
	width: 27px;
	height: 27px;
	background: url(../image/icon_check.svg) no-repeat;
	background-size: contain;
}
#toppage .faq dl dd {
	display: none;
	font-size:112.5%;
	font-weight: 700;
	line-height: 200%;
	padding:0 120px 40px 60px;
}



/*** NEWS *******************************************************************/
#toppage .news { position:relative; background:#E9E9E9; padding-block:240px 120px; }
#toppage .news::before {
	content: "";
	position: absolute;
	top: -50px;
	left: 0;
	width: 100%;
	height: 50px;
	background: url(../../image/top/shape_t.svg) repeat-x;
	background-size: auto 100%;
}
#toppage .news .box_main { position:relative; }
#toppage .news .box_main::before {
	content: "";
	right: 0;
	top: 65px;
	width: 79px;
	height: 97px;
	position: absolute;
	background: url(../../image/top/ghost_illust.svg) no-repeat;
	background-size: contain;
}
#toppage .news .materials {
	width: 100%;
	top: -214px;
	position: absolute;
	background: #F58342;
	padding-block: 120px;
	border-radius: 0 80px 80px 0;
	padding-left: calc(100% - 1200px);
	margin-left: calc(((100% - 1200px) / 2) * -1);
}
#toppage .news .materials ul { display:flex; align-items: center; justify-content:space-between; }
#toppage .news .materials ul li.txt { display:flex; align-items:center; }
#toppage .news .materials ul li small {
	color: #FFF;
	width: 92px;
	height: 92px;
	display: flex;
	font-size: 175%;
	font-weight: 700;
	margin-right: 25px;
	border-radius: 50%;
	align-items: center;
	border: 2px solid #FFF;
	justify-content: center;
}
#toppage .news .materials ul li b { font-size:200%; font-weight:700; line-height:150%; }
#toppage .news .materials ul li.download_btn { width: 400px; margin-right:80px; }


#toppage .news h3 { text-align:left; }
#toppage .news h3::after { display:none; }
#toppage .news h3 b { line-height:140%; }
#toppage .news .news_list { margin-top:70px; }
#toppage .news .news_list ul { display:flex; align-items:center; border-top:1px solid #000; }
#toppage .news .news_list ul:last-child { border-bottom:1px solid #000; }
#toppage .news .news_list ul li a { text-decoration:none; color:#000; display:block; font-weight:700; }
#toppage .news .news_list ul li.date {
	width:165px;
	font-size: 112.5%;
	font-weight: 700;
	text-align:center;
}
#toppage .news .news_list ul li.cate { width:100px; margin-right:40px; }
#toppage .news .news_list ul li.cate a {
	color: #FFF;
	font-size: 87.5%;
	text-align: center;
	background: #286189;
}
#toppage .news .news_list ul li.title { width:74.6%; }
#toppage .news .news_list ul li.title a {
	font-size: 112.5%;
	padding-block: 35px;
	transition: 0.5s ease;
	background: url(../image/arrow_right1.svg) no-repeat 96%;
}
#toppage .news .news_list ul:hover li.title a {
	background-position:98%;
	text-decoration: underline;
	text-underline-offset: 10px;
	text-decoration-thickness: 1px;
}
#toppage .news a:hover { opacity:0.7; }


/*** FOOTER *******************************************************************/
.home #footer .sponsor ul{margin-top: 120px;}