@charset "utf-8";
@import url("../css/button.css");
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://use.fontawesome.com/releases/v6.7.2/css/all.css');
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css);
body {
 border-top: solid #0071BA 5px;
 background: #ECFEFE url("../img/index_bg.png") no-repeat top center;
}
.container {
 width: 1280px;
 margin-left: auto;
 margin-right: auto;
}
@media (max-width: 1680px) {
 .container {
  width: 80%;
 }
}
@media (max-width: 1280px) {
 .container {
  width: 86%;
 }
}
@media (max-width: 750px) {
 .container {
  width: 94%;
 }
}
/* ------------------------
---------------------------
　▼ header
------------------------ */
header {
 margin-bottom: 20px;
}
#h-logo {
 margin-top: 24px;
}
/* -- header_box */
.h-cont {
 display: flex;
 justify-content: space-between;
 font-family: "Kosugi Maru", sans-serif;
 font-optical-sizing: auto;
 font-weight: 500;
}
.h-item {
 width: 50%;
}
#h-menu {
 width: 60%;
 margin-left: auto;
 margin-right: auto;
 padding: 30px 0;
 background-color: lightblue;
 border-radius: 0 0 20px 20px;
}
#h-menu p {
 color: #0071BD;
 font-size: 24px;
 text-align: center;
 font-weight: 500;
}
#h-menu ul {
 width: 80%;
 margin-left: auto;
 margin-right: auto;
 padding-top: 20px;
 text-align: center;
 display: flex;
 justify-content: space-between;
}
#h-menu li {
 font-size: 18px;
 width: 45%;
 padding: 10px;
 border: solid #0071BD 2px;
 border-radius: 8px;
}
#h-menu li:nth-child(1) {
 background: #fff;
 color: #0071BD;
}
#h-menu li:nth-child(2) {
 background: #0071BD;
 color: #fff;
}
#h-menu li:nth-child(2) a{
 color: #fff;
}
@media (max-width: 1280px) {
 #h-menu {
  width: 80%;
 }
}
@media (max-width: 980px) {
 #h-menu {
  width: 80%;
 }
 #h-menu ul {
  flex-direction: column;
 }
 #h-menu li {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
 }
 #h-menu li:nth-child(1) {
  margin-bottom: 16px;
 }
}
@media (max-width: 750px) {
 .h-cont {
  flex-direction: column;
 }
 .h-item {
  width: 100%;
  text-align: center;
 }
 #h-menu {
  width: 85%;
  margin-top: 30px;
  padding: 30px 0;
  background-color: lightblue;
  border-radius: 20px 20px;
 }
 #h-menu p {
  font-size: 20px;
 }
}
/* ------------------------
---------------------------
　▼ information
------------------------ */
.info {
 margin-top: 24px;
}
.info-cont {
 display: flex;
}
.info-item:nth-child(1) {
 width: 20%;
}
.info-item:nth-child(2) {
 width: 100%;
 height: 150px;
 padding: 20px;
 background: #fff;
 color: #000;
 border-radius: 8px;
 overflow-y: scroll;
}
.info-img {
 padding-right: 16px;
}
@media (max-width: 980px) {
.info-item:nth-child(2) {
 height: 120px;
}
}
@media (max-width: 750px) {
 .info-cont {
  flex-direction: column;
 }
 .info-img {
  padding: 0 0 16px 0;
 }
}
/*
　information text　*/
#info-txt-box {
 text-align: center;
}
#info-txt {
 font-size: 32px;
 font-weight: 500;
 color: #0071BD;
 margin: 36px 0;
}
@media (max-width: 750px) {
 #info-txt {
  font-size: 24px;
  margin: 36px 0 24px;
  text-align: left;
  display: inline-block;
 }
}
@media (max-width: 480px) {
 #info-txt {
  font-size: 18px;
  margin: 36px 0 14px;
  letter-spacing: 0rem;
 }
}
/* ------------------------
---------------------------
　▼ title
------------------------ */
.index_ttl {
 width: 100%;
 font-family: "Kosugi Maru", sans-serif;
 font-size: 32px;
 font-weight: 600;
 color: #0071BD;
 display: inline-block;
}
.index_ttl .border {
 border-bottom: dotted #0071BD 5px;
 padding-bottom: 15px;
}
@media (max-width: 480px) {
 .index_ttl {
  font-size: 24px;
 }
}
/* ------------------------
---------------------------
　▼ ranking
------------------------ */
.rank_txt {
 padding-top: 80px;
}
.rank_txt-cont {
 display: flex;
 font-optical-sizing: auto;
}
.rank_txt-item:nth-child(1) {
 width: 25%;
}
.rank_txt-item:nth-child(2) {
 width: 75%;
 position: relative;
}
@media (max-width: 1280px) {
 .rank_txt {
  padding-top: 10px;
 }
 .rank_txt-cont {
  flex-direction: column;
 }
 .rank_txt-item:nth-child(1) {
  width: 100%;
  margin-bottom: 40px;
 }
 .rank_txt-item:nth-child(2) {
  width: 100%;
  padding-bottom: 50px;
 }
}
@media (max-width: 772px) {
 .rank_txt-item:nth-child(2) {
  padding-bottom: 80px;
 }
}
.rank_txt-item p {
 position: absolute;
 top: 0;
 left: 0;
}
/*
rank -------------------- */
.rank {
 padding-top: 80px;
}
.rank-cont {
 display: flex;
 font-optical-sizing: auto;
}
.rank-item {
 text-align: center;
}
/* rank-item 1 */
.rank-item:nth-child(1) {
 width: 50%;
 padding: 0 30px 0 0;
}
/* rank-item 2 */
.rank-item:nth-child(2) {
 width: 50%;
 padding: 0 0 0 30px;
}
@media (max-width: 750px) {
 .rank-cont {
  display: flex;
  flex-direction: column;
 }
 /* rank-item 1 */
 .rank-item:nth-child(1) {
  width: 100%;
  padding: 0;
  margin-bottom: 50px;
 }
 /* rank-item 2 */
 .rank-item:nth-child(2) {
  width: 100%;
  padding: 0;
 }
}
/* ------------------------
---------------------------
　▼ BOX3（参加者向け）
------------------------ */
.index_box3 {
 margin-top: 100px;
}
.index_box3-cont {
 margin-top: 100px;
 display: flex;
 font-optical-sizing: auto;
}
.index_box3-item {
 font-family: "Kosugi Maru", sans-serif;
 font-size: 32px;
 text-align: center;
}
.index_box3-item:nth-child(1) {
 width: 50%;
 padding: 0 50px 0 0;
}
.index_box3-item:nth-child(2) {
 width: 50%;
 padding: 0 0 0 50px;
}
@media (max-width: 980px) {
 .index_box3-cont {
  margin-top: 60px;
 }
 .index_box3-item:nth-child(1) {
  width: 50%;
  padding: 0 30px 0 0;
 }
 .index_box3-item:nth-child(2) {
  width: 50%;
  padding: 0 0 0 30px;
 }
}
.index_box3-btn1 {
 color: #0071BD;
 font-weight: 600;
 background: #fff;
 border-radius: 50px;
 padding: 30px 0;
 border: solid 2px #0071BD;
}
.index_box3-btn1 a {
 color: #0071BD;
}
.index_box3-btn2 {
 color: #fff;
 font-weight: 500;
 background: #0071BD;
 border-radius: 50px;
 padding: 30px 0;
 border: solid 2px #0071BD;
}
.index_box3-btn2 a {
 color: #fff;
}
@media (max-width: 750px) {
 .index_box3-item:nth-child(1) {
  width: 50%;
  padding: 0 10px 0 0;
 }
 .index_box3-item:nth-child(2) {
  width: 50%;
  padding: 0 0 0 10px;
 }
 .index_box3-btn1 {
  font-size: 20px;
  padding: 20px 0;
  border: solid 2px #0071BD;
 }
 .index_box3-btn2 {
  font-size: 20px;
  font-weight: 500;
  padding: 20px 0;
  border: solid 2px #0071BD;
 }
}
@media (max-width: 480px) {
 .index_box3-btn1 {
  font-size: 18px;
  padding: 10px 0;
  border: solid 2px #0071BD;
 }
 .index_box3-btn2 {
  font-size: 18px;
  padding: 10px 0;
  border: solid 2px #0071BD;
 }
}
#gifu-boe {
 text-align: center;
 margin: 50px 0;
}
/* ------------------------
---------------------------
　▼ 背景設定
------------------------ */
#index_bg2 {
 background: url("../img/index_bg-02.jpg") no-repeat center center;
 background-size: cover;
 height: 100px;
}
#index_bg3 {
 background: url("../img/index_bg-03.jpg") no-repeat top center;
 background-size: cover;
 height: 350px;
 margin-top: 70px;
}
@media (max-width: 980px) {
 #index_bg3 {
  height: 200px;
  margin-top: 30px;
 }
}
#index_box2 {
 background: #DAF7FB;
 width: 100%;
}
/* ------------------------
---------------------------
　▼ footer
------------------------ */
footer {
 padding: 80px 0 20px;
}
footer a {
 color: #0071BD;
}
footer .F-cont {
 padding: 20px 0;
 display: flex;
 border-top: solid 2px #ddd;
 border-bottom: solid 2px #ddd;
}
footer .F-item {
 color: #0071BD;
 font-size: 14px;
 letter-spacing: -0.02rem;
}
footer .F-item:nth-child(1) {
 width: 50%;
 text-align: center;
}
footer .F-item:nth-child(2) {
 width: 50%;
 padding: 0 0 0 50px;
}
@media (max-width: 1090px) {
 footer .F-item:nth-child(2) {
  padding: 0 0 0 10px;
 }
}
@media (max-width: 980px) {
 footer .F-cont {
  flex-direction: column;
 }
}
footer .F-item:nth-child(1) {
 width: 100%;
 text-align: center;
}
footer .F-item:nth-child(2) {
 width: 100%;
 padding: 0;
 text-align: center;
}
footer .F-txt {
 padding-top: 20px;
 display: inline-block;
 text-align: left;
}
/* ------------------------
---------------------------
　▼ copyright
------------------------ */
#copyright {
 color: #0071BD;
 font-size: 13px;
 letter-spacing: 0rem;
 text-align: center;
 font-family: Verdana, “Droid Sans”;
}
#copyright a {
 color: #0071BD;
}
@media (max-width: 480px) {
 #copyright {
  font-size: 11px;
 }
}