@charset "utf-8";

/* 共通のスタイル */
html {
  scroll-behavior: smooth;
}

body {
  /* 源ノ角 */
  font-family: "Noto Sans JP", system-ui;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
  color: #0B4E77;
  background-color: #fff;
  font-size: 1.2rem;

}

/* コンテンツが少なくてもfooterを最下部に固定 */
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#wrap {
  overflow: hidden;
  /* はみだしたペンキを消す */
}

main {
  width: 80%;
  margin: 0 auto;
  /* min-width: 1000px; */
  max-width: 1200px;
}


p {
  line-height: 2.5;
  font-weight: 600;
  font-size: 1.2rem;
}

/* =====================
  　　 top以外　共通
====================== */

/* RE:CREATION ロゴ */
#headTitle {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 45px;
  width: auto;
}

.left-logo:hover{
  opacity: 0.5;
  transition: all 0.5s;
}

div#wrapper {
  position: relative;
  overflow: hidden;
}

div#wrapper div.rellax {
  position: absolute;
  opacity: 0.2;
  z-index: -2;
  width: auto;
  height: 43vw;
}

/* top以外ページのペンキの位置指定 */
/* about */
div.aboutPage div.bg-r-blue {
  top: 0;
  right: -10%;
}

div.aboutPage div.bg-r-pink {
  top: 50%;
  left: -10%;
}

#rec-explanation {
  margin-top: 5rem;
}

/* programPage */
div.programPage div.bg-r-blue {
  top: 5%;
  right: -10%;
}

div.programPage div.bg-r-pink {
  top: 40%;
  left: -10%;
  height: 40vw;
}

div.programPage div.bg-r-green {
  bottom: -10%;
  right: -10%;
  height: 30vw;
}

div.programPage div.bg-r-yellow {
  display: none;
}

/* playerPage */
div.playerPage div.bg-r-blue {
  top: 0;
  right: -10%;
}

div.playerPage div.bg-r-pink {
  top: 20%;
  left: -10%;
}

div.playerPage div.bg-r-green {
  top: 45%;
  right: -10%;
}

div.playerPage div.bg-r-yellow {
  bottom: 10%;
  left: -10%;
}

/* placePage */
div.placePage div.bg-r-blue {
  top: 0;
  right: -10%;
}

div.placePage div.bg-r-pink {
  top: 20%;
  left: -10%;
}

div.placePage div.bg-r-green {
  top: 45%;
  right: -10%;
}

div.placePage div.bg-r-yellow {
  bottom: 10%;
  left: -10%;
}

div.placePage div.bg-r-purple {
  right: -10%;
  bottom: 0;
}

/* cosplayPage */
div.cosplayPage div.bg-r-blue {
  top: 10%;
  right: -10%;
}

div.cosplayPage div.bg-r-pink {
  top: 30%;
  left: -10%;
}

div.cosplayPage div.bg-r-green {
  top: 55%;
  right: -10%;
}

div.cosplayPage div.bg-r-yellow {
  bottom: -5%;
  left: 0;
}


div.cosplayPage div.bg-r-purple {
  top: 0;
  left: 0;
}




/* accessPage */
div.accessPage div.bg-r-blue {
  top: 0;
  right: -10%;
}

div.accessPage div.bg-r-pink {
  top: 40%;
  left: -10%;
}

/*programExplainPage */
div.programExplainPage div.bg-r-blue {
  top: 0;
  right: -10%;
}

div.programExplainPage div.bg-r-pink {
  top: 20%;
  left: -10%;
}

div.programExplainPage div.bg-r-green {
  top: 45%;
  right: -10%;
}

div.programExplainPage div.bg-r-yellow {
  bottom: 15%;
  left: -10%;
}

div.programExplainPage div.bg-r-purple {
  right: -10%;
  bottom: -10%;
}
/* rankingPage */
div.rankingPage div.bg-r-blue {
  top: 0;
  right: -10%;

}
div.rankingPage div.bg-r-pink {
  top: 40%;
  left: -10%;

}
div.rankingPage div.bg-r-green {
  top: 70%;
  right: -10%;
}
div.rankingPage div.bg-r-yellow {
  display: none;
}
/* precautionPage */
div.precautionPage div.bg-r-blue {
  top: 0%;
  right: 0%;
}

div.precautionPage div.bg-r-pink {
  opacity: 0.5;
  top: 52%;
  left: 0%;
}
div.precautionPage div.bg-r-green {
  bottom: -15%;
  right: -10%;
}
/* comingSoonPage */
div.comingSoonPage div.bg-r-blue {
  top: -15%;
  right: -8%;
}
div.comingSoonPage div#comingBlue{
  height: 50vw;

}

div.comingSoonPage div.bg-r-pink {
  opacity: 0.5;
  bottom: -20%;
  left: -10%;
}
div.comingSoonPage div#comingPink{
  height: 47vw;

}
/* コンテンツ幅の指定 */
main#bg-blur section {
  width: 1000px;
  margin: 0 auto;
}

/* 背景全体 */
main#bg-blur {
  padding-bottom: 5rem;
  /*footer上の余白*/
}

main#bg-blur section h1 {
  text-align: center;
  margin-bottom: 4rem;
  /*大見出し下の余白*/
}

main#bg-blur section h1 div.sub-title {
  font-size: 1.5rem;
}



main#bg-blur {
  font-size: 22px;
  line-height: 2.0;
}

/* 説明文小見出し◎ */
section.textContent h2,
div.textContent h2,
div.text h2 {
  font-size: 28px;
  margin-bottom: 1rem;
}

/* 説明文各段落 */
section.textContent div.text {
  margin-bottom: 3rem;
}

/* 説明文本文 */
section.textContent p,
section.textContent ul,
section.textContent ol,
div.textContent {
  font-weight: normal;
}

section.textContent ul,
section.textContent ol,
div.textContent ul,
div.caution-box ul {
  /* リストタグを左にずらす */
  padding-left: 2rem;
}

/* top以外のsection */
main#bg-blur section {
  margin: 8rem 0 5rem 0;
}

/* top以外のp */
#bg-blur p {
  line-height: 1.8;
}

/* 英字 */
/* font-family: "parlare", sans-serif;
font-weight: 400;
font-style: normal; */

/* ドロワメニュー */
#nav-toggle {
  position: fixed;
  /* トグルボタンの位置指定 */
  top: 20px;
  right: 20px;
  height: 53.5px;
  cursor: pointer;
  padding: 12px 10px 12px 10px;
  z-index: 999;

}

#nav-toggle>div {
  position: relative;
  width: 36px;
}

#nav-toggle span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 5px;
  border-radius: 23px;
  background-color: #0B4E77;
  /* ドロワの三本線の色 */
  transition: transform .6s ease-in-out, top .5s ease;
}

#nav-toggle span:nth-child(1) {
  top: 0;
}

#nav-toggle span:nth-child(2) {
  top: 14px;
}

#nav-toggle span:nth-child(3) {
  top: 28px;
}

#nav-toggle:hover span:nth-child(1) {
  top: 4px;
}

#nav-toggle:hover span:nth-child(3) {
  top: 23px;
}

.open #nav-toggle span {
  background: #0B4E77;
  /* タップした後のドロワのバッテン線の色 */
}

.open #nav-toggle span:nth-child(1) {
  top: 15px;
  transform: rotate(45deg);
}

.open #nav-toggle span:nth-child(2) {
  width: 0;
  top: 15px;
  left: 50%;
}

.open #nav-toggle span:nth-child(3) {
  top: 15px;
  transform: rotate(-45deg);
}


#container {
  z-index: 900;
}

#drawer-nav {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30vw;
  /*メニューの幅を指定*/
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  /* 右から出てくるドロワーナビ全体の背景 */
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
}

#drawer-nav a {
  display: block;
  width: 100%;
  padding: 5px 0;
  text-align: left;
  text-decoration: none;
  color: #0B4E77;
  font-weight: 600;
  font-size: 1.5rem;
  transition: color .6s ease;
}

#drawer-nav a:hover {
  opacity: 0.5;
  transition: all 0.5s;
}

#drawer-nav ul {
  list-style: none;
}

#drawer-nav ul li {
  margin: 25px 0 25px 0;
  transform: translateX(200px);
}


/* open */
.open {
  overflow: hidden;
}

.open #drawer-nav {
  opacity: 1;
  visibility: visible;
}

.open #drawer-nav li {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1s ease, opacity .9s ease;
}



/* main-visual */
section#main-visual {
  /* メインビジュアル背景 */
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(../images/main_pc.png);
  background-size: cover;
  background-position: center center;
}

section#main-visual img {
  position: absolute;
}

/* pcロゴ */
section#main-visual img#pc-vis {
  display: block !important;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  width: 50vw;
  height: auto;
}

/* spロゴ */
section#main-visual img#sp-vis {
  display: none !important;
  /* 非表示 */
}

/* top section(共通の設定) */
section.top-section {
  /* 見出し＋コンテンツ＋ボタン */
  position: relative;
  margin: 200px 0 0 0;
  text-align: center;
}

h1.section-title {
  /*タイトル*/
  margin-bottom: 2.2rem;
  position: relative;
  font-size: 2rem;
  z-index: 6;
  letter-spacing: 0.1rem;
}

h1.section-title  span{
  font-size: 1rem;
  position: absolute;
  bottom: -1.5rem;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
}

h1.section-title div.sub-title {
  /* 英字部分 */
  position: absolute;
  top: -2.5rem;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  font-family: "parlare", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.3rem;
}

/* テキスト */
section.top-section p {}

/* ボタン */
a.vm-btn {
  margin: 3rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.4rem 3rem;
  width: fit-content;
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff
}

a.vm-btn:hover {
  background-color: #ffffff;
  transition: all 0.5s;
  /*動きの滑らかさをいれる*/
}

a.btn-blue {
  background-color: #3ECEFF;
  border: #3ECEFF 1px solid;
}

a.btn-blue:hover {
  border: #3ECEFF 1px solid;
  color: #3ECEFF;
}

a.btn-pink {
  background-color: #E27DEA;
  border: #E27DEA 1px solid;
}

a.btn-pink:hover {
  border: #E27DEA 1px solid;
  color: #E27DEA;
}

a.btn-green {
  background-color: #5DCA60;
  border: #5DCA60 1px solid;
}

a.btn-green:hover {
  border: #5DCA60 1px solid;
  color: #5DCA60;
}

a.btn-yellow {
  background-color: #FED94B;
  border: #FED94B 1px solid;
}

a.btn-yellow:hover {
  border: #FED94B 1px solid;
  color: #FED94B;
}

a.btn-red {
  background-color: #EC7D7E;
  border: #EC7D7E 1px solid;
}

a.btn-red:hover {
  border: #EC7D7E 1px solid;
  color: #EC7D7E;
}

a.btn-purple {
  background-color: #999EDB;
  border: #999EDB 1px solid;
}

a.btn-purple:hover {
  border: #999EDB 1px solid;
  color: #999EDB;
}

/* タイトル英字の色 */
h1.section-title div.st-blue {
  color: #3ECEFF;
}

h1.section-title div.st-pink {
  color: #E27DEA;
}

h1.section-title div.st-green {
  color: #5DCA60;
}

h1.section-title div.st-yellow {
  color: #FED94B;
}

h1.section-title div.st-red {
  color: #EC7D7E;
}

h1.section-title div.st-purple {
  color: #999EDB;
}

/*ペンキオブジェクト（rellax） */
section.top-section div.rellax {
  position: absolute;
  z-index: -1;
  opacity: 0.5;
  width: auto;
  height: 43vw;
}

/* 個別でサイズ＆位置指定 */
section.top-section div.r-blue {
  top: -5%;
  right: -30%;
}

section.top-section div.r-pink {
  top: 20%;
  left: -30%;

}

section.top-section div.r-green {
  top: 20%;
  right: -40%;
}

section.top-section div.r-yellow {
  top: 20%;
  left: -30%;
}

section.top-section div.r-blue2 {
  bottom: 70%;
  right: -30%;
}

section.top-section div.r-red {
  top: 60%;
  left: -30%;
}

.rellax img {
  /* 画像を要素一杯に */
  width: auto;
  height: 100%;
}




/* アイコン＋ボタン */
div#top-section-box {
  margin: 100px 0;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}

div.icon-box {
  padding: 140px 2rem 4rem 2rem;
  width: 50%;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: solid 0.8px #3E6F8D;
  background-color: rgba(255, 255, 255, 0.8);
}

div.icon-box:not(#coming-soon) {
  justify-content: space-between;
}

/* coming-soon */
div#coming-soon {
  justify-content: center;
}

.icon-box img {
  margin-top: 3rem;
  height: 100px;
  width: auto;
}

.icon-box p {
  padding: 0 2rem;
}

/* coming-soon */
#coming-soon {
  background-color: #c5c5c5;
}

#coming-soon h1.cs-title {
  font-family: "parlare", sans-serif;
  color: #ffffff;
  font-size: 30px;
}


/* footer */
footer {
  background-color: none;
  text-align: center;
  font-size: 1.1rem;
  margin-top: auto;

}

footer small {
  display: block;
  padding: 1.6rem 0;
  color: #0B4E77;
}


/* =====================
        開催方針
====================== */
main#bg-blur section#aboSection {
  text-align: center;
}

/* タイトルのアンダーライン */
main#bg-blur section#aboSection h2 {
  width: fit-content;
  margin: 0 auto 50px auto;
  font-size: 25px;
  padding: 0 0.5rem;
  background: linear-gradient(transparent 65%, #3ECEFF 65%);
}

/* 本文 */
main#bg-blur section#aboSection p {
  text-align: left;
}

/* =====================
      競技一覧
====================== */


main#bg-blur section#proSection {
  text-align: center;
}

main#bg-blur section#proSection img#timeSchedule {
  width: 100%;
  height: auto;
  margin-bottom: 5rem;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
}

main#bg-blur section#proSection div#program-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;/*リンクボタンが1列でも２列でも真ん中にくるようにする*/
  gap: 30px;
  margin-bottom: 5rem;
}

main#bg-blur section#proSection a.slash-border-bg {
  position: relative;
  display: block;
  text-decoration: none;
  color: #0B4E77;
  width: 330px;/*gapに併せて調整*/
  height: 240px;/*gapに併せて調整*/

}

/* プログラム毎に色の指定 */
/* 〇人〇脚 */
main#bg-blur section#proSection a#marunin {
  background: repeating-linear-gradient(45deg,
      #E27DEA,
      #E27DEA 15px,
      #fff 0,
      #fff 30px);
}

main#bg-blur section#proSection a#marunin div.program-inner-box {
  border: 2px solid #E27DEA;
}

main#bg-blur section#proSection a#marunin div.program-inner-box p.readBtn {
  color: #E27DEA;
}

/* 8人×50mチャレンジ */
main#bg-blur section#proSection a#challenge {
  background: repeating-linear-gradient(45deg,
      #3ECEFF,
      #3ECEFF 15px,
      #fff 0,
      #fff 30px);
}

main#bg-blur section#proSection a#challenge div.program-inner-box {
  border: 2px solid #3ECEFF;
}

main#bg-blur section#proSection a#challenge div.program-inner-box p.readBtn {
  color: #3ECEFF;
}

/* PK合戦 */
main#bg-blur section#proSection a#pk {
  background: repeating-linear-gradient(45deg,
      #FED94B,
      #FED94B 15px,
      #fff 0,
      #fff 30px);
}

main#bg-blur section#proSection a#pk div.program-inner-box {
  border: 2px solid #FED94B;
}

main#bg-blur section#proSection a#pk div.program-inner-box p.readBtn {
  color: #FED94B;
}

/* 四天王 */
main#bg-blur section#proSection a#shitennou {
  background: repeating-linear-gradient(45deg,
      #5DCA60,
      #5DCA60 15px,
      #fff 0,
      #fff 30px);
}

main#bg-blur section#proSection a#shitennou div.program-inner-box {
  border: 2px solid #5DCA60;
}

main#bg-blur section#proSection a#shitennou div.program-inner-box p.readBtn {
  color: #5DCA60;
}

/* HALダービー*/
main#bg-blur section#proSection a#HAL {
  background: repeating-linear-gradient(45deg,
      #EC7D7E,
      #EC7D7E 15px,
      #fff 0,
      #fff 30px);
}

main#bg-blur section#proSection a#HAL div.program-inner-box {
  border: 2px solid #EC7D7E;
}

main#bg-blur section#proSection a#HAL div.program-inner-box p.readBtn {
  color: #EC7D7E;
}

/* 学科リレー */
main#bg-blur section#proSection a#relay {
  background: repeating-linear-gradient(45deg,
      #999EDB,
      #999EDB 15px,
      #fff 0,
      #fff 30px);
}

main#bg-blur section#proSection a#relay div.program-inner-box {
  border: 2px solid #999EDB;
}

main#bg-blur section#proSection a#relay div.program-inner-box p.readBtn {
  color: #999EDB;
}

main#bg-blur section#proSection a.slash-border-bg div.program-inner-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 85%;
  background-color: #fff;
  text-align: center;
  padding: 15px;
  line-height: 1.6;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
}

main#bg-blur section#proSection a.slash-border-bg div.program-inner-box h2 {
  font-size: 1.2rem;
  margin: 0.1rem 0;
}

main#bg-blur section#proSection a.slash-border-bg div.program-inner-box div.program-box-title p {
  font-size: .8rem;
}

main#bg-blur section#proSection a.slash-border-bg div.program-inner-box p.startTime {}

main#bg-blur section#proSection a.slash-border-bg div.program-inner-box p.readBtn {
  font-family: "parlare", sans-serif;
  font-size: 20px;
  margin-top: 10px;
}

/* hover */
main#bg-blur section#proSection a.slash-border-bg:hover {
  transform: translateY(-5px);
  transition: 0.5s;
  opacity: 0.7;

}

/* 昼食についての注意 */
/* タイトル */
div#lunch-attention h2 {
  background: linear-gradient(transparent 65%, #EC7D7E 65%);
  width: fit-content;
  margin: 0 auto 2rem auto;
  font-size: 25px;
  padding: 0 0.5rem;
}

div#lunch-attention p {
  text-align: center;
  font-weight: normal;
  line-height: 2.5;
}

/* =====================
      各競技概要ページ
====================== */
/* div.programExplainPage h1,div.programExplainPage h2{
  text-align: center;
} */
/* div.programExplainPage h1 div.sub-title{
  font-size: 2.8rem;
} */
div.programExplainPage h1 {
  width: fit-content;
  margin: 0 auto 2rem auto;
}

div.programExplainPage .program-txt {
  font-weight: 400;
  font-size: 1.5rem !important;
  width: fit-content;
  margin: 0 auto 3rem auto;
}

div.programExplainPage img.expImg {
  width: 100%;
  height: auto;
  margin-bottom: 5rem;
}

div.programExplainPage section.textContent h2 {
  text-align: center;
  font-weight: bold;
  width: fit-content;
  margin: 0 auto 3.5rem auto;
  padding: 0 0.5rem;
  background: linear-gradient(transparent 65%, #FED94B 65%);
}

 div.program-c {
  text-align: left;
  width: 90%;
  margin: 0 auto;
}

div.programExplainPage section.textContent h3 {
  font-size: 28px;
  margin-bottom: 1rem;
}

div.programExplainPage div.text p,
div.programExplainPage div.text ul li,
div.programExplainPage div.text ol li
div.programExplainPage div.text dl {
  line-height: 1.9;
  font-size: 22px;
}

.redText {
  color: #EC7D7E;
  margin-top: 2rem;
}

div.programExplainPage section.textContent div.rank_wrap {
  display: flex;

}

div.programExplainPage section.textContent div.rank_wrap div {
  margin-right: 2rem;
}
/* table */
.text table{
  width: 100%;
  background-color: #ffffff;
  margin-bottom: 2rem;
  text-align: center;
  border-collapse: collapse;
}
.dodge-table,.relay-example,.relay-table{
  font-size: 1rem;
  border-collapse: collapse;
}
.text table:not(.dodge-table) th,.text table:not(.dodge-table) td{
  border: 2px #0B4E77 solid;
  text-align: center;
  border-collapse: collapse;
}
.text table th,.text table td{
  padding: 5px 10px;
}
.text table:not(.dodge-table) th{
  width: 12%;
  min-width: 100px;
  /* background-color: #c7c7c7; */
}


.relay-table td,.dodge-table td{
  width: 22%;
  font-weight: bold;
}
.relay-example td{
  width: 22%;
  font-weight: bold;
}

/* 四天王ドッジ対戦表 */
.dodge-table{
  border: 2px #0B4E77 solid;
  border-collapse:collapse;
}
.dodge-table th,.dodge-table td{
  border: #0B4E77 2px solid;
}

.dodge-table tr:nth-of-type(1) td{
  background-color: #CDE7FF;
}
.dodge-table tr:nth-of-type(2) td{
  background-color: #DAF2DA;
}
.dodge-table tr:nth-of-type(3) td{
  background-color: #F8F8D4;
}
.dodge-table tr:nth-of-type(4) td{
  background-color: #F7DBD5;
}
/* 学科リレー例 */
.relay-example{
  border: 2px #0B4E77 solid;
}
.relay-example th{
  background-color: #DAF2DA;
}
.relay-example .first-tr th:nth-of-type(5),.relay-example td:nth-of-type(4),.relay-example .first-tr th:nth-of-type(6),.relay-example td:nth-of-type(5){
  width: 100px;
}
.relay-example td:nth-of-type(4),.relay-example tr:not(.first-tr) td:nth-of-type(5){
  background-color: #CDE7FF;
}
.relay-example td:nth-of-type(6){
  background-color: #F8F8D4;
}
/* 学科リレー対戦表 */
.relay-table tr:nth-of-type(1) th:not(.null-cell){
  background-color: #F7DBD5;
}
.relay-table tr:not(.first-tr) th{
  background-color: #CDE7FF;
}

/* =====================
      アクセス
====================== */
main#bg-blur section#accSection div#map-flex-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

main#bg-blur section#accSection div#map-flex-wrap div.map-iframe-box {
  width: 65%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 30px;
}

main#bg-blur section#accSection div#map-flex-wrap div.text p {
  margin-bottom: 2rem;
  line-height: 1.8;
  font-weight: 400;
}

main#bg-blur section#accSection div#map-flex-wrap div.text span{
  font-size: 1rem;
}

main#bg-blur section#accSection div#map-flex-wrap div.text {
  width: 35%;
}

main#bg-blur section#accSection div#map-flex-wrap div.text h2 {
  font-size: 1.5rem;
  line-height: 1.3;
}

/* =====================
      注意事項
====================== */
div.caution-box h2{

}
div.caution-box{
  background-color: #ffffff;
  border: 5px #5DCA60 solid;
  padding: 30px;
  font-size: 1.2rem;
}
div.main-caution div.textContent{
  width: 80%;
  margin: 0 auto 3rem auto;
}
div.caution-box h2{
  width: fit-content;
  margin: 0 auto 30px auto;
  font-size: 25px;
  padding: 0 0.5rem;
  background: linear-gradient(transparent 65%, #5DCA60 65%);
}
div.caution-flex{
  display: flex;
  justify-content: space-between;
}
div.caution-flex div.caution-box{
  width: 48%;
}
div.caution-flex div.caution-box ul{
  margin-bottom: 3rem;
}
div.main-caution{
  margin-bottom: 3rem;
}
div.main-caution div.textContent ul a{
  text-decoration: underline;
  color: #EC7D7E;
  font-weight: bold;
  
}
div.main-caution div.textContent ul a:hover{
  opacity: 0.5;
  transition: all 0.5s;
}
div.sub-caution{}


/* =====================
      集合場所
====================== */
main#bg-blur section#placSection h2 {
  width: fit-content;
  margin: 2rem auto;
  font-size: 25px;
  padding: 0 0.5rem;
  background: linear-gradient(transparent 70%, #5DCA60 70%);
}

main#bg-blur section#placSection div#plaBtn {
  width: fit-content;
  margin: 4rem auto;
}

main#bg-blur section#placSection div#plaBtn a#site-link {
  display: block;
  background-color: #5DCA60;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  width: fit-content;
  height: fit-content;
  padding: 15px 25px;
  border: 1px solid #5DCA60;
  transition: 0.5s;
  line-height: 1.4;
  text-align: center;
}

main#bg-blur section#placSection div#plaBtn a#site-link:hover {
  background-color: #fff;
  color: #5DCA60;
}

section#placSection img:not(#headTitle) {
  width: 100%;
  height: auto;
  margin-bottom: 3rem;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}
/* モーダル */
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}



/* =====================
      出場選手
====================== */
main#bg-blur section#playSection div.text {
  margin-bottom: 3rem;
}

main#bg-blur section#playSection div.text p {
  text-align: center;
  font-weight: normal;
  width: 60%;
  margin: 0 auto;
}

/*--アコーディオン--*/
ul#accordion {
  width: 80%;
  margin: 3rem auto;
}

ul#accordion li {
  list-style: none;
}

ul#accordion li.accItem {
  /* accordion間の余白 */
  margin-bottom: 3rem;
}

/*--タイトル部分--*/
.topWrap {
  position: relative;
  z-index: 2;
  font-size: 1.3rem;
  padding: .5em 1.6em;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: #999EDB;
  color: #fff;
  cursor: pointer;
  transition: background-color 1s;
}

.topWrap h2 {
  border-bottom: 2px solid #fff;
  padding: .7rem;
}

.topWrap p {
  position: relative;
  font-size: 1rem;
  padding: .7rem;
}

.topWrap p::after {
  content: '';
  width: 15px;
  height: 15px;
  border: 0;
  border-bottom: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
}

/* 
.topWrap:hover {
  background-color: #fd6158;
  color: #fff;
  transition: background-color 1s;
} */

/*--コンテンツ部分--*/
.details {
  position: relative;
  transform: translateY(-1rem);
  z-index: 1;
  font-size: 1rem;
  font-weight: bold;
  line-height: 2;
  padding: 2rem 1.5em 1.5em 1.5em;
  box-sizing: border-box;
  background-color: #f9f9f9;
  border: 5px solid #999EDB;
  border-radius: 0 0 10px 10px;
}

.details ul li {
  list-style: none;
}

.details ul li a {
  text-decoration: none;
  color: #0B4E77;
  cursor: pointer;
}

.details ul li a:hover {
  color: #999EDB;
  transition: all 0.5s;
}



/* 待機場所 */
main#bg-blur section#waiting-place h2 {
  width: fit-content;
  margin: 0 auto 50px auto;
  font-size: 25px;
  padding: 0 0.5rem;
  background: linear-gradient(transparent 70%, #999EDB 70%);
}

/* =====================
      コスプレ大会
====================== */
/* コスプレページの下部余白の削除 */
main#bg-blur section#cosSection {
  margin-bottom: 0;
}

.cosplayPage main#bg-blur {
  padding-bottom: 0;
}

div.cos_details {
  display: flex;
}

div.cos_details dd {
  width: 1000px;
}

div.cos_caution{
  display: flex;
}

p.cos_caution1 {
  font-size: 1.4rem;
}

p.cos_caution2{
  font-size: 1.4rem;
}
p.deadline{
  font-weight: bold;
  color: #EC7D7E;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 26px;
}

main#bg-blur section#cosSection div#cosBtn a#site-link {
  display: block;
  background-color: #E27DEA;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  width: fit-content;
  height: fit-content;
  padding: 15px 25px;
  border: 1px solid #E27DEA;
  transition: 0.5s;
  line-height: 1.4;
  text-align: center;
  margin:0 auto;
}

main#bg-blur section#cosSection div#cosBtn a#site-link:hover {
  background-color: #fff;
  color: #E27DEA;
}

section#waiting-place img {
  width: 100%;
  height: auto;
  margin-bottom: 3rem;
}

div.cos_details dt{
  min-width: fit-content;
}
/* =====================
      ランキング
====================== */
section#rankSection{
  text-align: center;
}
section#rankSection div.text{
  margin-bottom: 3rem;
}
#ranking-wrap{
  padding: 4rem 1rem;/*白部分の余白*/
  background-color: #ffffff;
  border: #FED94B 20px solid;/*黄色の枠線*/
  width: 65%;
  margin:  0 auto;/*要素を真ん中に配置*/
  min-width: 500px;
}
.rankingParas p {
  display: flex;
  align-items: center; /* 画像とテキストを縦方向で中央揃えにする */
  justify-content: center;
  gap: 50px; /* 画像とテキストの間の隙間 */
  margin-bottom: 2rem;/*順位と順位の余白*/
}
.rankingParas span.rank-class,.rankingParas span.rank-num{
  font-size: 30px;
  min-width: 90px;
}
.rankingParas span.rank-point{
  font-size: 25px;
}
.rankingParas img{
  width: 13%;
  min-width: 45px;
  height: auto;
}

/* =====================
      未公開ページ
====================== */

section#comSection h1{
  font-size: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

/* ########### 599px以下(smartphone) ########### */
@media (max-width: 599px) {

  /* コンテンツを画面一杯に */
  main {
    width: 100%;
  }

  #drawer-nav {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    /*メニューの幅を指定*/
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 990;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    /* 右から出てくるドロワーナビ全体の背景 */
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s ease;
  }

  #drawer-nav a {
    text-align: center;
    font-size: 1.3rem;
  }

  #nav-toggle:hover span:nth-child(1) {
    top: 0px;
  }
  
  #nav-toggle:hover span:nth-child(3) {
    top: 28px;
  }

  .open #nav-toggle span:nth-child(1) {
    top: 15px;
    transform: rotate(45deg);
  }
  
  .open #nav-toggle span:nth-child(2) {
    width: 0;
    top: 15px;
    left: 50%;
  }
  
  .open #nav-toggle span:nth-child(3) {
    top: 15px;
    transform: rotate(-45deg);
  }

  p {
    line-height: 2.5;
    font-weight: 400;
    font-size: 1rem;
  }

  /* top以外のsection */
  main#bg-blur section {
  margin: 10rem 0 5rem 0;
}

  /* main-visual */
  section#main-visual {
    background-image: url(../images/main_sp.png);
    background-position: center center;
    background-color: white;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .accessPage main#bg-blur {
    padding-bottom: 0;
  }

  /* pcロゴ */
  section#main-visual img#pc-vis {
    display: none !important; /* 非表示 */
  }

  /* spロゴ */
  section#main-visual img#sp-vis {
    display: block !important;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: auto;
  }

    /* RE:CREATION ロゴ */
  #headTitle {
    position: absolute;
    top: 30px;
    left: 20px;
    height: 30px;
    width: auto;
  }

  section#top-cosplay,
  section#top-place,
  section#top-player,
  section#top-program {
    margin: 130px auto 0 auto;
    width: 80%;
  }

  div#lunch-attention h2 {
    font-size: 20px;
    margin-top: 3rem;
  }

  main#bg-blur section h1 div.sub-title {
    font-size: 1rem;
  }

  section.top-section {
    /* 見出し＋コンテンツ＋ボタン */
    margin: 170px auto 0 auto;
  }

  /* 見出し */
  h1.section-title {
    font-size: 1.5rem;
  }
  /* 見出し下の余白 */
  main#bg-blur section h1{
    margin-bottom: 2rem;
  }

  h1.section-title  span{
    font-size: 0.8rem;
  }

  /* 見出し英字 */
  h1.section-title div.sub-title {
    font-size: 1rem;
    top: -2rem;
  }

  main#bg-blur section#placSection h2 {
    font-size: 20px;
    margin-top: 2rem;
  }

  /* 待機場所 */
  main#bg-blur section#waiting-place h2 {
    font-size: 23px;
  }

  main#bg-blur section#waiting-place{
    margin-top: 0;
  }

  a.vm-btn {
    padding: 1.2rem 1.5rem;
    font-size: 1rem;
  }

  main#bg-blur section#placSection div#plaBtn a#site-link {
    font-size: 1rem;
  }

  main#bg-blur section#playSection div.text p {
    width: 100%;
    margin: 0 auto;
  }

  main#bg-blur section#cosSection div#cosBtn a#site-link {
    font-size: 1rem;
  }

  p.deadline{
    font-size: 20px;
  }

  /* ペンキ */
  div#wrapper div.rellax {
    height:50vh;
  }

  /* スマホペンキサイズ＆位置指定 */
  section.top-section div.r-blue {
    top: -3%;
    right: -30%;
  }

  section.top-section div.r-pink {
    top: 40%;
    left: -40%;
  }

  section.top-section div.r-green {
    top: 70%;
    right: -60%;
  }

  section.top-section div.r-yellow {
    top: 75%;
    left: -30%;
  }

  section.top-section div.r-blue2 {
    bottom: 80%;
    right: -20%;
  }

  section.top-section div.r-red {
    top: 100%;
    left: -10%;
  }

  /* =====================
  　　 top以外　共通
====================== */
/* programPage */
div.programPage div.bg-r-blue {
  top: 3%;
  right: -20%;
}

div.programPage div.bg-r-pink {
  top: 20%;
  left: -30%;
}

div.programPage div.bg-r-green {
  top: 50%;
  right: -30%;
}

div.programPage div.bg-r-yellow {
  display: block;
  top: 80%;
  left: -30%;
}

div.programPage div.bg-r-purple  {
  top: 95%;
  right: -20%;
}


/*programExplainPage */
div.programExplainPage div.bg-r-blue {
  top: 0;
  right: -20%;
}

div.programExplainPage div.bg-r-pink {
  top: 25%;
  left: -20%;
}

div.programExplainPage div.bg-r-green {
  top: 45%;
  right: -30%;
}

div.programExplainPage div.bg-r-yellow {
  bottom: 20%;
  left: -20%;
}

div.programExplainPage div.bg-r-purple {
  right: -20%;
  bottom: 0%;
}

/* playerPage */
div.playerPage div.bg-r-blue {
  top: 0;
  right: -20%;
}

div.playerPage div.bg-r-pink {
  top: 25%;
  left: -20%;
}

div.playerPage div.bg-r-green {
  top: 45%;
  right: -30%;
}

div.playerPage div.bg-r-yellow {
  bottom: 10%;
  left: -20%;
}

div.playerPage div.bg-r-purple {
  bottom: -10%;
  right: -20%;
}

/* placePage */
div.playerPage div.bg-r-blue {
  top: 0;
  right: -10%;
}

div.placePage div.bg-r-pink {
  top: 25%;
  left: -20%;
}

div.placePage div.bg-r-green {
  top: 50%;
  right: -20%;
}

div.placePage div.bg-r-yellow {
  bottom: 0;
  left: -20%;
}

div.placePage div.bg-r-purple {
  display: none;
}

/* cosplayPage */
div.cosplayPage div.bg-r-blue {
  top: 0;
  right: -20%;
}

div.cosplayPage div.bg-r-pink {
  top: 20%;
  left: -20%;
}

div.cosplayPage div.bg-r-green {
  top: 45%;
  right: -20%;
}

div.cosplayPage div.bg-r-yellow {
  bottom: -10%;
  left: -10%;
}


div.cosplayPage div.bg-r-purple {
  top: 0;
  left: 0;
}

/* about */
div.aboutPage div.bg-r-blue {
  top: 0;
  right: -20%;
}

div.aboutPage div.bg-r-pink {
  top: 50%;
  left: -20%;
}


/* accessPage */
div.accessPage div.bg-r-blue {
  top: 0;
  right: -20%;
}

div.accessPage div.bg-r-pink {
  top: 70%;
  left: -20%;
}

/* comingSoonPage */
div.comingSoonPage div.bg-r-blue {
  top: 0%;
  right: -8%;
}
div.comingSoonPage div#comingBlue{
  height: 80vw;

}

div.comingSoonPage div.bg-r-pink {
  opacity: 0.5;
  bottom: 5%;
  left: -20%;
}
div.comingSoonPage div#comingPink{
  height: 80vw;

}
/* rankingPage */
div.rankingPage div.bg-r-blue {
  top: 0;
  right: -10%;
}
div.rankingPage div#rankBlue {
  height: 80vw;
}
div.rankingPage div.bg-r-pink {
  top: 30%;
  left: -10%;
}
div.rankingPage div#rankPink {
  height: 80vw;
}
div.rankingPage div.bg-r-green {
  right: -20%;
  bottom: -20%;
}

div.rankingPage div#rankGreen {
  height: 80vw;
}
div.rankingPage div.bg-r-yellow {
  left: -20%;
  bottom: -10%;
}

/* precautionPage */
div.precautionPage div.bg-r-blue {
  top: 0%;
  right: -20%;
}

div.precautionPage div.bg-r-pink {
  display: none;
}
div.precautionPage div.bg-r-green {
  bottom: -10%;
  left: -20%;
}

  /* アイコン＋ボタン */
  .icon-box p {
    /* 文章の幅 */
    padding: 0;
  }

  /* ボックスの横の余白をなくす */
  div.icon-box {
    padding: 80px 0.5rem 2rem 0.5rem;
  }

  /* coming soon */
  #coming-soon h1.cs-title {
    font-size: 20px;
  }

  /* top以外コンテンツ幅 */
  main#bg-blur section {
    width: 100%;
    padding: 10px;
  }

  /* 競技リンク */
  main#bg-blur section#proSection div#program-wrap {
    /* mapを縦並びに */
    justify-content: center;
    gap: 30px;
    width: 85%;
    margin: 0 auto;
  }

  main#bg-blur section#aboSection {
    padding: 0 2rem;
  }

  main#bg-blur section#aboSection h2{
    font-size: 20px;
  }

  div.programExplainPage section.textContent h2 {
    font-size: 20px;
  }
  

  /* =====================
      コスプレ大会
====================== */
  section.textContent h2 {
    font-size: 1.3rem;
  }

  main#bg-blur section#cosSection section.textContent{
    margin-top: 0;
    margin-bottom: 0;
  }
  div.cos_details {
    display: flex;
  }

  div.cos_details dt {
    font-size: .9rem;
  }

  div.cos_details dd {
    width: 68vw;
    font-size: .9rem;
  }
  div.cos_caution{
    display: block;
    margin: 1rem 0;
  }

  p.cos_caution1 {
    font-size: 1.3rem !important;
  }

  p.cos_caution2{
    font-weight: normal !important;
  }

  /* =====================
      競技概要ページ
====================== */
  div.programExplainPage section.textContent h3, div.programExplainPage section.textContent h4{
    font-size: 1rem;
  }

  #bg-blur p.program-txt {
    line-height: 1.8;
    font-weight: 600;
    font-size: .9rem;
  }


  div.programExplainPage section.textContent p,
  div.programExplainPage section.textContent ul li,
  div.programExplainPage section.textContent ol li,.text dl {
    font-size: .9rem;
    font-weight: normal;
  }



  div.text ul li,
  div.text ol li {
    font-size: .9rem;
  }
  /* 対戦表 */

 .relay-example{
    display: block;
    overflow-x: auto;
    width: 1100px;
    border: none;
}
.relay-table{
  display: block;
  overflow-x: auto;
  border: none;
}

.relay-example tr:nth-of-type(1) th:nth-of-type(5),.relay-example tr td:nth-of-type(4),.relay-example tr:nth-of-type(1) th:nth-of-type(6),.relay-example tr td:nth-of-type(5){
  width: 10%;
}

.relay-table{
  width: 100%;
}

.relay-table td{
  width: 20%;
}
.relay-example td{
  min-width: 200px;
  width: 20%;
}
/* .dodge_table */
.dodge-table{
  border:none;
  border-collapse: collapse;
}
.dodge-table tr{
  margin-bottom: 2rem;
  display: block;
  border: 2px solid #0B4E77;

}
.dodge-table th,.dodge-table td{
  display: block;
  width: 100%;
  border: 1px solid #0B4E77;
  
}





  /* =====================
      集合場所
====================== */
div.placePage main#bg-blur{
  padding-bottom: 0;
}
  main#bg-blur section#placSection{
    margin-bottom: 0;
  }
  section#placSection img:not(#headTitle) {
    margin-bottom: 1rem;
  }

  main#bg-blur section#placSection div#plaBtn {
    margin: 2rem auto 4rem auto;
  }
  /* モーダル無効化 */
  .info{
    pointer-events: none;
  }

  /* =====================
      注意事項
====================== */

div.caution-box{
  background-color: #ffffff;
  border: 5px #5DCA60 solid;
  padding: 20px;
  font-size: 10px;
}
div.main-caution div.textContent{
  width: 90%;
  margin: 0 auto 1rem auto;
}
div.caution-box h2{
  width: fit-content;
  margin: 0 auto 25px auto;
  font-size: 20px;
  padding: 0 0.5rem;
  background: linear-gradient(transparent 65%, #5DCA60 65%);
}
div.caution-flex{
  flex-direction: column;
}
div.caution-flex div.caution-box{
  width:90%;
  margin: 0 auto;
  margin-bottom: 3rem;
}
div.caution-flex div.caution-box ul{
  margin-bottom: 1rem;
}
div.main-caution{
  width: 90%;
  margin: 0 auto 3rem auto;
  margin-bottom: 2rem;
}
  
main#bg-blur section#preSection{
  margin-bottom: 0;
}
div.precautionPage main#bg-blur{
  padding-bottom: 0;
}

  /* =====================
      アクセス
====================== */
  main#bg-blur div#map-flex-wrap {
    width: 100%;
    padding: 10px;
    flex-direction: column;
  }
  main#bg-blur section#accSection div#map-flex-wrap div.map-iframe-box {
    width: 90%;
    margin-right: 0;
    margin-bottom: 2rem;
  }
  
  main#bg-blur section#accSection div#map-flex-wrap div.map-iframe-box iframe {
    height: 300px;
  }

  main#bg-blur section#accSection div#map-flex-wrap div.text{
    width: 70%;
    text-align: center;
  }

  main#bg-blur section#accSection div#map-flex-wrap div.text h2{
    font-size: 1.2rem;
  }

  /* =====================
      ランキング
====================== */
section#rankSection{
  text-align: center;
}
section#rankSection div.text{
  margin-bottom: 3rem;
}
#ranking-wrap{
  padding: 2rem 1rem;/*白部分の余白*/
  width: 90%;
  min-width: unset;
}
.rankingParas p {
  gap: 40px; /* 画像とテキストの間の隙間 */
  margin-bottom: 2rem;/*順位と順位の余白*/
}
.rankingParas span.rank-class,.rankingParas span.rank-num{
  /* 順位のフォントサイズ */
  font-size: 22px;
  min-width: 80px;
}
.rankingParas span.rank-point{
  font-size: 22px;
}
.rankingParas img,.rankingParas span.rank-num{
  width: 12%;
  /* font-size: 23px; */
}
/* =====================
      未公開ページ
====================== */

section#comSection h1{
  font-size: 30px;
}

  /* footer */
  footer {
    background-color: none;
    text-align: center;
    font-size: .8rem;
    margin-top: auto;

  }

  footer small {
    display: block;
    padding: 1.6rem 0;
    color: #0B4E77;
  }


}



/* ########### 600px以上～768px以下(tablet) ########### */
@media (min-width: 600px) and (max-width: 768px) {

  /* コンテンツを画面一杯に */
  main {
    width: 100%;
  }

  #drawer-nav {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    /*メニューの幅を指定*/
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 990;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    /* 右から出てくるドロワーナビ全体の背景 */
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s ease;
  }

  #drawer-nav a {
    text-align: center;
    font-size: 1.3rem;
  }

  #nav-toggle:hover span:nth-child(1) {
    top: 0px;
  }
  
  #nav-toggle:hover span:nth-child(3) {
    top: 28px;
  }
  
  .open #nav-toggle span:nth-child(1) {
    top: 15px;
    transform: rotate(45deg);
  }
  
  .open #nav-toggle span:nth-child(2) {
    width: 0;
    top: 15px;
    left: 50%;
  }
  
  .open #nav-toggle span:nth-child(3) {
    top: 15px;
    transform: rotate(-45deg);
  }
  

  /* main-visual */
  section#main-visual {
    background-image: url(../images/main_tablet.png);
    background-position: center center;
    background-color: white;
    background-repeat: no-repeat;
    background-size: contain;
  }

  /* pcロゴ */
  section#main-visual img#pc-vis {
    display: none !important; /* 非表示 */
  }

  /* spロゴ */
  section#main-visual img#sp-vis {
    display: block !important;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: auto;
  }

  main#bg-blur section#playSection div.text p {
    width: 100%;
    margin: 0 auto;
  }

  main#bg-blur section#proSection div#program-wrap {
    /* mapを縦並びに */
    justify-content: center;
    gap: 30px;
    width: 85%;
    margin: 0 auto;
  }

  
  div#lunch-attention h2 {
    font-size: 20px;
    margin-top: 3rem;
  }


  /*ペンキオブジェクト（rellax） */
  section.top-section div.rellax {
    position: absolute;
    z-index: -1;
    opacity: 0.5;
    width: auto;
    height: 40vw;
  }

  /* タブレットペンキサイズ＆位置指定 */
  section.top-section div.r-blue {
    top: -5%;
    right: -8vw;

  }

  section.top-section div.r-pink {
    top: 20%;
    left: -5vw;

  }

  section.top-section div.r-green {
    top: 20%;
    right: -10vw;

  }

  div.playerPage div.bg-r-yellow {
    bottom: 10%;
    left: -10%;
  }

  section.top-section div.r-blue2 {
    top: 20%;
    right: -10vw;
  }

  section.top-section div.r-red {
    top: 60%;
    left: -10%;
  }

  /* top以外コンテンツ幅 */
  main#bg-blur section {
    width: 100%;
    padding: 10px;
  }

  /* 見出し英字 */
  h1.section-title div.sub-title {
    font-size: 1.2rem;
  }

  section#top-cosplay,
  section#top-place,
  section#top-player,
  section#top-program {
    margin: 170px auto 0 auto;
    width: 80%;
  }

  section.top-section {
    /* 見出し＋コンテンツ＋ボタン */
    margin: 170px auto 0 auto;
  }

  /* =====================
      アクセス
====================== */

  main#bg-blur div#map-flex-wrap {
    width: 100%;
    padding: 10px;
    flex-direction: column;
  }
  main#bg-blur section#accSection div#map-flex-wrap div.map-iframe-box {
    width: 90%;
    margin-right: 0;
    margin-bottom: 2rem;
  }
  
  main#bg-blur section#accSection div#map-flex-wrap div.map-iframe-box iframe {
    height: 300px;
  }

  main#bg-blur section#accSection div#map-flex-wrap div.text{
    width: 60%;
    text-align: center;
  }

  main#bg-blur section#accSection div#map-flex-wrap div.text h2{
    font-size: 1.2rem;
  }

    /* =====================
      集合場所
====================== */
div.placePage main#bg-blur{
  padding-bottom: 0;
}
  main#bg-blur section#placSection{
    margin-bottom: 0;
  }

  main#bg-blur section#placSection div#plaBtn {
    margin: 2rem auto 4rem auto;
  }
  /* モーダル無効化 */
  .info{
    pointer-events: none;
  }
  /* =====================
      ランキング
====================== */
section#rankSection{
  text-align: center;
}
section#rankSection div.text{
  margin-bottom: 3rem;
}
#ranking-wrap{
  padding: 4rem 0;/*白部分の余白*/
  background-color: #ffffff;
  border: #FED94B 20px solid;/*黄色の枠線*/
  width: 65%;
  margin:  0 auto;/*要素を真ん中に配置*/
  min-width: 500px;
}
.rankingParas p {
  display: flex;
  align-items: center; /* 画像とテキストを縦方向で中央揃えにする */
  justify-content: center;
  gap: 50px; /* 画像とテキストの間の隙間 */
  margin-bottom: 2rem;/*順位と順位の余白*/
}
.rankingParas span.rank-class,.rankingParas span.rank-num{
  font-size: 30px;
}
.rankingParas span.rank-point{
  font-size: 25px;
}
.rankingParas img,.rankingParas span.rank-num{
  width: 13%;
  min-width: 66px;
  height: auto;
}
/* =====================
      注意事項
====================== */
div.caution-flex{
  flex-direction: column;
}
div.caution-flex div.caution-box{
  width:90%;
  margin: 0 auto;
  margin-bottom: 3rem;
}
div.main-caution{
  width: 90%;
  margin: 0 auto 3rem auto;
  margin-bottom: 2rem;
}
div.main-caution div.textContent{
  width: 100%;
  margin: 0 auto 3rem auto;
}
/* =====================
      未公開ページ
====================== */

section#comSection h1{
  font-size: 40px;
}

}

/* ########### 769px以上(PC) ###########⇒wrap1000pxより小さい幅で表示する場合 */
@media (min-width: 769px) {



  #drawer-nav {
    font-size: 28px;
  }

  /* top以外コンテンツ幅 */
  main#bg-blur section {
    width: 100%;
    padding: 10px;
  }

  /* =====================
      アクセス
====================== */
  main#bg-blur div#map-flex-wrap {
    width: 100%;
  }
}

/* ########### 1000px以上(PC) ########### */
@media (min-width: 1000px) {}