@charset "utf-8";
/* CSS Document */

/*==================================================
 common
==================================================*/
:root {
  --height_header: 0px;
  --height_fix_footer: 0px;

  --base_width: 375px;
  --base_color: "var(--black);";
  --base_bg: var(--white);

  --font_jp: "Noto Sans JP", sans-serif;
  --font_en: Impact, "Arial Black", Gadget, sans-serif;
  --icons: "Material Symbols Outlined";

  --transition: 0.3s;

  --black: #000000;
  --gray: #626262;
  --Rightgray: #f3f3f3;
  --white: #ffffff;

  --Red: #e21818;
  --RedOrange: #ff4200;
  --Orange: #ff6600;
  --RightOrange: #fff6f2;
  --Yellow: #ffff00;
  --Amber: #fad400;

  --gradRed: linear-gradient(
    135deg,
    rgba(226, 24, 24, 1) 0%,
    rgba(160, 6, 6, 1) 33%,
    rgba(226, 24, 24, 1) 66%,
    rgba(160, 6, 6, 1) 100%
  );
}
@media (max-width: 520px) {
  :root {
    --base_width: 100%;
    --base_width: min(100%, 520px);
  }
}

/*==================================================
 main
==================================================*/

body {
  padding-top: var(--height_header);
  padding-left: 0;
  padding-right: 0;
  background: url(../images/pc_bg.webp) no-repeat center / cover;
  background-attachment: fixed;
}

@media (max-width: 520px) {
  body {
    padding-bottom: var(--height_fix_footer);
  }
}

main {
  position: relative;
  z-index: 5;
  overflow: visible;
  width: var(--base_width);
  min-height: 100vh;
  padding: 0;
  margin: 0 auto;
  background: var(--white);
  color: var(--base_color);
}

section {
  width: 100%;
  margin: 1px auto;
}

strong {
  font-weight: 700;
}

.w_base {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/*----------------------------------------
  base control
----------------------------------------*/

/* objedt-fit */
img {
  object-fit: cover;
}
.of_cont img,
img.of_cont {
  object-fit: contain;
}

/* opacity */
@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*----------------------------------------
  box control
----------------------------------------*/

/* [class*="grid_"] 等分 */
[class*="grid_"] {
  --grid: 3;
  --gap: 50px;
  display: grid;
  grid-template-columns: repeat(var(--grid), 1fr);
  gap: var(--gap);
}
@media (max-width: 520px) {
  [class*="grid_"] {
    --gap: 30px;
    --grid: 1;
  }
}

/* [class*="grid_"] 等分 auto-fit*/
[class*="gridfit_"] {
  --grid: 3;
  --gap: 50px;
  --width: calc((100% - var(--gap) * (var(--grid) - 1)) / var(--grid));
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--width));
  justify-content: center;
  gap: var(--gap);
}

/* [class*="flexnum_"] 等分 */
[class*="flexnum_"] {
  --num: 3;
  --gap: 60px;
  --width: calc((100% - var(--gap) * (var(--num) - 1)) / var(--num));
  display: flex;
  flex-flow: wrap;
  gap: var(--gap);
}

[class*="flexnum_"] > * {
  width: var(--width);
}

@media screen and (max-width: 520px) {
  [class*="flexnum_"] {
    --num: 1;
    --gap: 20px;
  }
}

/*==================================================
 this site specific
==================================================*/

/*----------------------------------------
  title
----------------------------------------*/
[class*="tit_"] {
  margin: 0 0 20px;
  color: var(--base_color);
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: left;
}

/*
  _Modifier
----------------------------------------*/
.tit_A {
  width: 100%;
  margin: 20px auto;
  padding: 8px;
  padding: 10px 5%;
  background: var(--Orange);
  color: var(--white);
  text-align: center;
}

.tit_B {
  padding: 0.5em;
  border-top: solid 2px var(--Orange);
  border-bottom: solid 2px var(--Orange);
  background: repeating-linear-gradient(
    -45deg,
    var(--white),
    var(--white) 3px,
    var(--RightOrange) 3px,
    var(--RightOrange) 7px
  );
  color: var(--Orange);
  text-align: center;
}

.tit_C {
  padding: 0.5em;
  background: var(--Rightgray);
  text-align: center;
}

.tit_D {
  padding: 15px;
  border: 2px solid var(--RedOrange);
  border-radius: 5px;
  background: var(--RightOrange);
  color: var(--RedOrange);
  text-align: center;
}

.tit_E {
  margin: 0 0 15px;
  padding: 5px;
  background: var(--gray);
  color: var(--white);
  font-size: 1.3rem;
  text-align: center;
}

/*----------------------------------------
  button
----------------------------------------*/

/*
  A～
----------------------------------------*/
/*背景*/
.btn_A {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  text-decoration: none;
  width: 100%;
  margin: 20px auto;
  padding: 1.5rem 4rem;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 100vh;
  color: var(--Red);
  border: 1px solid #999;
  text-shadow: 0 1px #fff;
  box-shadow: 0 3px 2px 1px #fcfcfc, 0 4px 6px #cecfd1, 0 -2px 2px #cecfd1, 0 -4px 2px #eee, inset 0 0 2px 2px #cecfd1;
  transition: 0.5s;
}
.btn_A:after {
  display: block;
  content: "arrow_circle_right";
  font-family: var(--icons);
  font-size: 1.3em;
  line-height: 1;
  font-weight: normal;
}
.btn_A:hover {
  opacity: 0.5;
}

/*==================================================
header
==================================================*/
header {
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--black);
}

header h1 {
  color: var(--white);
  font-size: 1.4rem;
  text-align: center;
}

/*==================================================
 footer
==================================================*/
footer {
  margin: 15px 0 0;
  padding: 0 0 30px;
  background: var(--black);
  color: var(--white);
  font-size: 1.4rem;
  text-align: center;
}
footer ul {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 0 25px;
}
footer ul li {
  padding: 0 10px;
  margin: 30px 0 5px;
}
footer ul li + li {
  border-left: 1px solid var(--white);
}

.aside {
  padding: 15px 0;
  background: var(--white);
}

.aside ul {
  display: flex;
  flex-flow: column;
  gap: 8px;
  width: 90%;
  margin: 0 auto;
}

.aside a {
  display: block;
  width: 100%;
  padding: 5px 15px;
  border: 1px solid var(--gray);
  border-radius: 3px;
  color: var(--gray);
}
.aside a:hover {
  background: var(--gray);
  color: var(--white);
}

.cooperation {
  padding: 15px 0;
  background: var(--gray);
}

.brand-logo {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  gap: 10px;
  width: 90%;
  margin: 0 auto;
  padding: 15px 0;
}

.brand-logo img {
  display: block;
  width: auto;
  height: 50px;
  border: 5px solid var(--white);
  background: var(--white);
}

/*==================================================
 イベント詳細
==================================================*/
/*----------------------------------------
  メイン告知
----------------------------------------*/
.sec-mv {
  width: 95%;
}

.sec-mv .start {
  position: relative;
  margin: 10px auto;
  padding: 5px 20px;
  background: var(--gradRed);
  color: var(--Yellow);
  font-size: 2.8rem;
  text-align: center;
  font-weight: bold;
}
.sec-mv .start:before,
.sec-mv .start:after {
  content: "";
  position: absolute;
  top: 0;
  --hen: 20px;
  width: var(--hen);
  height: 100%;
  background: #ffffff;
}
.sec-mv .start:before {
  left: -1px;
  clip-path: polygon(0 0, 100% 50%, 0 100%); /*右*/
}
.sec-mv .start:after {
  right: -1px;
  clip-path: polygon(0 50%, 100% 0, 100% 100%); /*左*/
}

.sec-mv dl {
  width: 90%;
  margin: 0 auto;
}

.sec-mv dl dt {
  width: fit-content;
  min-width: 6em;
  margin: 0 auto 5px;
  padding: 5px 10px;
  background: var(--black);
  color: var(--white);
  font-size: 2.2rem;
  font-weight: 900;
  text-align: center;
}
.sec-mv dl dd {
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}

.sec-mv dl dd em {
  display: inline-block;
  margin: 0 0 0 0.5em;
  color: var(--Red);
}

.sec-mv dl dd b {
  display: block;
  font-size: 0.9em;
}

.sec-mv dl dd .p {
  margin: 10px auto;
  padding: 8px 20px;
  border-radius: 50vw;
  background: var(--Red);
  color: var(--white);
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}

.sec-mv .box-news {
  margin: 15px auto;
  padding: 10px;
  border: 3px solid var(--white);
  border-radius: 20px;
  box-shadow: 0 0 5px 1px rgba(30, 30, 30, 0.3);
  background: var(--RedOrange);
  color: var(--white);
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}

.sec-mv .box-news .t1 {
  font-size: 2rem;
}
.sec-mv .box-news .t2 {
  font-size: 2.6rem;
  font-weight: 900;
}
.sec-mv .box-news .t3 {
  color: var(--Yellow);
  font-size: 3rem;
  font-weight: 900;
}

/*----------------------------------------
  開催概要
----------------------------------------*/
.sec-detail {
  padding-top: 10px;
}

.sec-detail dl + dl {
  margin-top: 20px;
}
.sec-detail dl dt {
  width: fit-content;
  min-width: 6em;
  margin: 0 auto 5px;
  padding: 5px 10px;
  background: var(--black);
  color: var(--white);
  font-size: 2.2rem;
  font-weight: 900;
  text-align: center;
}
.sec-detail dl dd {
  font-size: 2.88rem;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}
.sec-detail dl dd .p {
  margin: 15px auto 0;
  color: var(--Red);
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.5;
}

.sec-detail .map {
  aspect-ratio: 4/3;
  height: auto;
  margin: 15px auto;
  border: 1px solid var(--gray);
}
.sec-detail .map iframe {
  display: block;
  width: calc(100% - 1px);
  height: 100%;
}

.sec-detail picture {
  display: block;
  width: 100%;
  margin: 20px auto;
}

/*----------------------------------------
  ゲスト紹介
----------------------------------------*/
.sec-guest picture {
  width: 100%;
  display: block;
  text-align: center;
}
.sec-guest ul li + li {
  margin-top: 40px;
}
.sec-guest .name {
  margin: 10px auto;
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
}
.sec-guest .name small {
  font-size: 0.8em;
  display: block;
}
.sec-guest .p {
  line-height: 2;
  font-size: 0.9em;
}

/*----------------------------------------
  資格＆カテゴリー
----------------------------------------*/
.outline-dl {
  margin-bottom: 30px;
}
.outline-dl dt {
  display: flex;
  gap: 5px;
  margin: 0 0 5px;
  font-weight: 900;
  font-size: 1.1em;
}
.outline-dl dt:before {
  content: "check_circle";
  margin-top: -3px;
  color: var(--Orange);
  font-family: var(--icons);
  font-weight: normal;
  font-size: 1.5em;
}

.outline-dl dd {
  line-height: 1.8;
  padding: 0 0 0 1.6em;
}

.sec-outline .indent {
  font-size: 0.85em;
  margin-top: 0.2em;
}

/*----------------------------------------
  エントリー
----------------------------------------*/
.sec-entry {
  padding-bottom: 40px;
}

.sec-entry .tit_D {
  color: var(--Red);
  border-color: var(--Red);
}

.list-entry li {
  position: relative;
  display: block;
  margin: 40px 0 0;
  padding: 15px;
  background: var(--c);
  color: var(--white);
  font-weight: bold;
  counter-increment: li;
}
.list-entry li:before {
  position: absolute;
  bottom: 98%;
  left: 0;
  content: "STEP" counter(li);
  display: inline-block;
  padding: 5px 10px 0;
  border-radius: 0 10px 0 0;
  background: var(--c);
  color: var(--Amber);
  font-size: 1.3rem;
}
.list-entry li:after {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  content: "";
  display: block;
  --hen: 30px;
  background: var(--c);
  height: calc(tan(60deg) * var(--hen) / 4);
  width: var(--hen);
  clip-path: polygon(0 0, 100% 0, 50% 100%); /*下*/
}
.list-entry li:last-child:after {
  display: none;
}

.list-entry small {
  display: block;
  font-weight: normal;
}

.list-entry dl {
  margin: 20px auto;
  border: 1px solid var(--Red);
  background: var(--white);
  color: var(--black);
}
.list-entry dl dt {
  padding: 10px 15px;
  background: var(--Red);
  color: var(--white);
  font-size: 1.6rem;
}
.list-entry dl dd {
  padding: 15px;
}

.sec-entry p {
  font-size: 1.3rem;
  font-weight: normal;
}

.sec-entry .note {
  background: var(--Rightgray);
  margin: 20px auto;
  padding: 10px;
}

.sec-entry .p {
  margin: 20px auto;
}

/*----------------------------------------
  エントリーチーム
----------------------------------------*/
.sec-team {
  padding-bottom: 10px;
}

.sec-team picture img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 30px;
}

/*----------------------------------------
  入賞者
----------------------------------------*/
.sec-winning {
  padding-bottom: 50px;
}

.sec-winning .tit_A {
  background: var(--Red);
}

.sec-winning .tit_B {
  border-top: solid 2px var(--Red);
  border-bottom: solid 2px var(--Red);
  color: var(--Red);
}

.winning {
  width: 95%;
  margin: 60px auto 30px;
  position: relative;
}

.winning i {
  width: 320px;
  position: absolute;
  top: -40px;
  left: -5px;
  display: block;
}

.winning picture {
  display: block;
  border: 2px solid var(--black);
}

.winning picture img {
  display: block;
  aspect-ratio: 4/3;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.winning p {
  padding: 5px;
  background: var(--black);
  color: var(--white);
  font-weight: bold;
  font-size: 1.4rem;
  text-align: center;
}

.sec-winning .p {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
}