/*******************************

OUTLINE CSS

**********************************/

.c-parenth::before {
  content: "〔";
  display: inline-block;
  margin-right: 1em;
}
.c-parenth::after {
  content: "〕";
  display: inline-block;
  margin-left: 1em;
}

.under_layer .hero {
  width: 100%;
  margin: 0 auto 60px;
}

.hero .theme {
  width: 100%;
  margin: 0 auto;
}

.hero h1 {
  width: 100%;
  font-size: 4rem;
  line-height: 1.5;
  text-align: center;
  z-index: 1;
  margin: 0 auto 20px;
  letter-spacing: 0.08em;
}

.hero h1 .smaller {
  font-size: 3.2rem;
  display: inline-block;
  margin-bottom: 20px;
}

.hero p.sub {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 10px;
}

.hero p.sub02 {
  font-size: 1.6rem;
  text-align: center;
}

@media all and (max-width: 900px) {
  .hero .theme {
  }
  .hero h1 {
    font-size: 4.4rem;
    margin: 0 auto 20px;
    line-height: 1.4;
  }

  .hero h1 .smaller {
    font-size: 3.2rem;
    margin-bottom: 20px;
  }
}
@media all and (max-width: 600px) {
  .hero .theme {
  }
  .hero h1 {
    font-size: 2.8rem;
    line-height: 1.4;
  }
  .hero h1 .smaller {
    font-size: 2.2rem;
    margin-bottom: 10px;
  }
  .hero p.sub {
    font-size: 1.8rem;
  }

  .hero p.sub02 {
    font-size: 1.4rem;
  }
}

/* theme
---------------------------- */

.info_area {
  margin: 0 auto;
}

.info_area .inner {
  max-width: 800px;
}

.info_area .inner .content01 {
  border-bottom: 1px solid #000;
  width: 100%;
  margin-bottom: 40px;
  padding-bottom: 30px;
}

.info_area .inner .content01 .con_ttl {
  font-size: 2.4rem;
  text-align: center;
  margin: 0 auto 5px;
}

.info_area .inner .content01 .con_ttl .smaller {
  font-size: 2rem;
}

.info_area .inner .content01 time {
  display: block;
  text-align: center;
  width: 100%;
  font-size: 2.4rem;
}

.info_area .inner .content01 time .bigger {
  font-size: 3.2rem;
  display: inline-block;
  padding: 0 0.2em;
}

@media all and (max-width: 900px) {
}
@media all and (max-width: 600px) {
  .info_area .inner .content01 {
    margin-bottom: 25px;
    padding-bottom: 25px;
  }
  .info_area .inner .content01 time {
    font-size: 2.2rem;
  }

  .info_area .inner .content01 time .bigger {
    font-size: 3rem;
  }
}

.info_area .inner .content02 {
  border-bottom: 1px solid #000;
  width: 100%;
  margin-bottom: 60px;
  padding-bottom: 40px;
}

.info_area .inner .content02 dl {
  width: 100%;
  margin: 0 auto 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.info_area .inner .content02 dl dt {
  font-size: 1.8rem;
  width: 50%;
  text-align: center;
}

.info_area .inner .content02 dl dd {
  font-size: 1.5rem;
  width: 50%;
  text-align: center;
  line-height: 1;
}

.info_area .inner .content02 dl dd .bigger {
  font-size: 2.4rem;
  display: inline-block;
  padding: 0 0.2em;
}

.info_area .inner .content02 p.note {
  font-size: 1.3rem;
  text-align: center;
}

@media all and (max-width: 900px) {
  .info_area .inner .content02 dl {
    width: 90%;
  }
}
@media all and (max-width: 600px) {
  .info_area .inner .content02 {
    margin-bottom: 50px;
    padding-bottom: 25px;
  }

  .info_area .inner .content02 dl {
    width: 100%;
    display: block;
    margin-bottom: 25px;
  }
  .info_area .inner .content02 dl dt {
    width: 100%;
  }

  .info_area .inner .content02 dl dd {
    width: 100%;
  }
}

.info_area .inner .content03,
.info_area .inner .content04,
.info_area .inner .content05 {
  width: 100%;
  /* display: flex;
  justify-content: space-between;
  align-items: flex-start; */
  position: relative;
}

.info_area .inner .content03,
.info_area .inner .content04,
.info_area .inner .content05 {
  border-bottom: 1px solid #000;
  margin-bottom: 70px;
  padding-bottom: 70px;
}

.info_area .inner .ttl-block > dt {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* flex-direction: column; */
  text-align: center;
  line-height: 1.2;
  padding-top: 5px;
  margin-bottom: 30px;
  /* position: sticky;
  position: -webkit-sticky; */
  /* top: 20px;
  left: 0; */
}

.info_area .inner .ttl-block > dt .ja {
  font-size: 2.1rem;
  display: inline-block;
  margin-right: 20px;
  /* margin-bottom: 10px; */
}

.info_area .inner .ttl-block > dt .en {
  font-size: 1.3rem;

  /* margin-bottom: 10px; */
}
.info_area .inner .content04 > dt .smaller {
  font-size: 1.3rem;
}

.info_area .inner .ttl-block > dd {
  width: 100%;
  padding: 0 10px;
  text-align: left;
}

@media all and (max-width: 900px) {
}
@media all and (max-width: 600px) {
  .info_area .inner .ttl-block {
    display: block;
  }

  .info_area .inner .content03,
  .info_area .inner .content04,
  .info_area .inner .content05 {
    margin-bottom: 50px;
    padding-bottom: 50px;
  }
  .info_area .inner .ttl-block > dt {
    width: 100%;
    margin-bottom: 30px;
    position: static;
  }

  .info_area .inner .ttl-block > dt .ja {
    font-size: 2.1rem;
    display: inline-block;
    margin-bottom: 10px;
  }

  .info_area .inner .ttl-block > dt .en {
    font-size: 1.3rem;
    margin-bottom: 10px;
  }

  .info_area .inner .ttl-block > dd {
    width: 100%;
    padding: 0 10px;
  }
}

.info_area .inner .content03 > dd p {
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  margin-bottom: 2em;
}

/* .info_area .inner .content03 > dd p:last-of-type {
  margin-bottom: 0;
} */

.info_area .inner .content03 > dd a {
  display: block;
  text-align: center;
  padding-top: 25px;
  font-size: 1.5rem;
}
.info_area .inner .content03 > dd a:hover {
  color: #d36d6d;
}
.info_area .inner .content03 > dd a::before {
  content: "〉〉";
  letter-spacing: -0.65em;
  display: inline-block;
  margin-right: 0.5em;
  transition: 0.3s ease-in;
}
.info_area .inner .content03 > dd a:hover:before {
  transform: translateX(3px);
  color: #d36d6d;
  transition: 0.3s ease-in-out;
}

.info_area .inner .content04 > dd p {
  text-align: left;
}

.info_area .inner .content04 > dd .block:not(:last-of-type),
.info_area .inner .content05 > dd .block {
  margin-bottom: 30px;
}

.info_area .inner .content04 > dd ul.type li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.info_area .inner .content04 > dd ul.type li::before {
  content: "・";
}

.info_area .inner .content05 .blo_ttl {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.info_area .inner .content05 .blo_ttl::before {
  content: "○";
  margin-right: 3px;
}
.info_area .inner .content05 .detail {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.info_area .inner .content05 .detail dt {
  width: auto;
  white-space: nowrap;
  padding-right: 0.5em;
}
.info_area .inner .content05 .detail dd {
  width: auto;
  text-align: left;
}
.info_area .inner .content05 .note {
  font-size: 1.3rem;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.info_area .inner .content05 .note::before {
  content: "※";
}

@media all and (max-width: 900px) {
}
@media all and (max-width: 600px) {
  .theme_area {
    margin: 0 auto 80px;
  }

  .theme_area .main_ttl {
    font-size: 3.7rem;
    line-height: 1.4;
  }

  .theme_area .detail {
    font-size: 2.2rem;
  }

  .theme_area .btn-wrapper {
    padding-top: 60px;
  }

  .info_area .inner .content05 .note {
    font-size: 1.1rem;
  }
}
.info_area .content06 p.logo {
  width: 35%;
  margin: 0 auto 20px;
  transition: 0.3s ease-in;
}
.info_area .content06 p.logo:hover {
  opacity: 0.5;
  transition: 0.3s ease-in-out;
}

.info_area .content06 p:not(.logo) {
  width: 100%;
  text-align: left;
  line-height: 2;
  margin-bottom: 5px;
  /* flex-wrap: wrap; */
}
.info_area .content06 p.cooperation {
}

.info_area .content06 .cooperation span {
  display: inline-block;
}

.info_area .content06 dd dl {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 10px;
}
.info_area .content06 dd dl dt {
  white-space: nowrap;
}
.info_area .content06 dd dl dd {
  text-align: left;
}
.info_area .content06 dd dl dd .sponser_logo {
  height: 1.5em;
  width: auto;
  max-width: 90vw;
  margin-bottom: 0.3em;
}
.info_area .content06 dd dl dd span {
  display: inline-block;
}

@media all and (max-width: 600px) {
  .info_area .content06 dd dl {
    display: block;
    margin-bottom: 20px;
  }
  .info_area .content06 dd dl dt {
    text-align: center;
    margin-bottom: 10px;
  }
  .info_area .content06 dd dl dd {
    width: 100%;
    text-align: center;
  }
}