/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[0]!./node_modules/import-glob-loader/index.js!./src/assets/sass/houhou.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
  Object
--------------------------------- */
/* =================================================================================


  color.scss


================================================================================= */
/* サイトで全体で使うカラーコードの変数を指定 */
/* 各大会のキーカラー */
/* 色指定 */
/* ソーシャル系 */
/* =================================================================================


  font.scss


================================================================================= */
/* 上マージン
----------------------------------------------- */
/* 下マージン
----------------------------------------------- */
/*
  Settings
--------------------------------- */
/*
  Media Queries
--------------------------------- */
/*
  wrap
--------------------------------- */
/* =================================================================================


  Project - houhou.scss


================================================================================= */
.p-houhou-container {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}

/*
  ストリートダンス検定の概要
--------------------------------- */
.p-houhou-overview-date__title {
  margin-bottom: 1rem;
  font-weight: 500;
  font-size: clamp(2rem, 2.2vw, 2.4rem);
  text-align: center;
}
.p-houhou-overview-date__image {
  margin: 0 calc((100vw - 100%) / 2 * -1) 2rem;
}

/*
  試験科目
--------------------------------- */
.p-houhou-exam-subject__subtitle {
  display: flex;
  justify-content: center;
  color: #1e6aba;
  font-weight: 700;
  font-size: 2rem;
}

.p-houhou-exam-subject-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 2rem;
  gap: 0.8rem;
}
.p-houhou-exam-subject-list__item {
  padding: 0.2em 0.5em;
  border-radius: 99rem;
  background-color: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  font-weight: 700;
  font-size: clamp(2rem, 1.8vw, 2rem);
  text-align: center;
}
.p-houhou-exam-subject-list__item.-hip-hop {
  color: #223f8e;
}
.p-houhou-exam-subject-list__item.-jazz {
  color: #de007d;
}
.p-houhou-exam-subject-list__item.-lock {
  color: #01943b;
}
.p-houhou-exam-subject-list__item.-pop {
  color: #ea8d25;
}
.p-houhou-exam-subject-list__item.-breaking {
  color: #a24d1e;
}
.p-houhou-exam-subject-list__item.-house {
  color: #aa2f86;
}

.p-houhou-exam-subject-notes {
  padding-left: 1.8em;
  font-size: 1.4rem;
}

.p-houhou-exam-subject-table {
  width: 100%;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 10px;
  font-size: clamp(1.3rem, 1.6vw, 1.8rem);
  text-align: center;
}
.p-houhou-exam-subject-table th,
.p-houhou-exam-subject-table td {
  padding: 0.4em 0.5em;
  font-weight: 500;
  vertical-align: middle;
}
.p-houhou-exam-subject-table th {
  background-color: #efefef;
}
.p-houhou-exam-subject-table th:nth-child(3), .p-houhou-exam-subject-table th:nth-child(4) {
  border-left: 1px solid #fff;
}
.p-houhou-exam-subject-table td {
  border: 1px solid #fff;
  background-color: #f3f8ff;
}

/*
  受験方法
--------------------------------- */
.p-houhou-exam-content {
  margin-bottom: 2rem;
  text-align: center;
}
.p-houhou-exam-content__title {
  display: block;
  z-index: 2;
  position: relative;
  width: 226px;
  max-width: 100%;
  margin: 0 auto -20px;
  padding: 0.2em 1em;
  border-radius: 99rem;
  background-color: #1e6aba;
  color: #fff;
  font-size: 2rem;
  text-align: center;
}
.p-houhou-exam-content__list {
  display: grid;
  background-color: #f3f8ff;
  counter-reset: item;
}
.p-houhou-exam-content__list li {
  display: flex;
  z-index: 1;
  position: relative;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 1.5em 1em;
  padding-left: 16%;
  gap: 0.5rem;
  font-weight: 500;
  font-size: clamp(1.8rem, 1.8vw, 2rem);
}
.p-houhou-exam-content__list li:first-child {
  padding-top: 4.8rem;
  padding-bottom: 4rem;
}
.p-houhou-exam-content__list li:first-child::before {
  color: #fff;
}
.p-houhou-exam-content__list li:first-child::after {
  -webkit-clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
  z-index: -2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 105%;
  background-color: #dcebff;
  content: "";
          clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
}
.p-houhou-exam-content__list li:last-child::before {
  color: #dcebff;
}
.p-houhou-exam-content__list li::before {
  z-index: -1;
  position: absolute;
  left: 6%;
  content: counter(item);
  font-weight: 400;
  font-size: clamp(9rem, 10vw, 15rem);
  font-family: "Barlow Semi Condensed", "BIZ UDGothic", "游ゴシック体", yugothic, "游ゴシック", "Hiragino Kaku Gothic ProN", meiryo, メイリオ, sans-serif;
  counter-increment: item;
}
.p-houhou-exam-content__list li span.label {
  min-width: 200px;
  padding: 0.2em 0.5em;
  border-radius: 99rem;
  background-color: #fff;
  color: #1e6aba;
  text-align: center;
}

/*
  次回検定の課題
--------------------------------- */
.p-houhou-challenge__lead {
  display: flex;
  justify-content: center;
  margin-bottom: 1em;
  font-weight: 500;
  font-size: clamp(1.6rem, 1.7vw, 1.8rem);
}

.p-houhou-challenge-item {
  display: grid;
  margin-bottom: 1.2rem;
  padding: 2rem;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
}
.p-houhou-challenge-item__title {
  align-content: center;
  font-weight: 900;
  font-size: clamp(2.4rem, 2vw, 2.7rem);
  text-align: center;
}
.p-houhou-challenge-item__title.-hip-hop {
  color: #223f8e;
}
.p-houhou-challenge-item__title.-jazz {
  color: #de007d;
}
.p-houhou-challenge-item__title.-lock {
  color: #01943b;
}
.p-houhou-challenge-item__title.-pop {
  color: #ea8d25;
}
.p-houhou-challenge-item__title.-breaking {
  color: #a24d1e;
}
.p-houhou-challenge-item__title.-house {
  color: #aa2f86;
}
.p-houhou-challenge-item__level {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2em 1.5em;
}
.p-houhou-challenge-item__level li a {
  border-bottom: 1px solid currentcolor;
  color: #17438f;
  font-weight: 500;
  font-size: 2rem;
}
.p-houhou-challenge-item__level li a:hover {
  border-bottom-color: transparent;
}
.p-houhou-challenge-item__bpm {
  margin-top: 1rem;
  text-align: center;
}
.p-houhou-challenge-item__bpm span.value {
  margin-left: 2em;
}

.vbox-title {
  padding: 24px 54px;
  background-color: #fff;
  color: #383838;
  font-size: 1.6rem;
}

.vbox-close {
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: #383838;
  color: #fff;
  opacity: 1;
}
.vbox-close:hover {
  opacity: 0.8;
}

/*
  申込み手続き
--------------------------------- */

.c-exam-note.center {
  display: block;
  text-align: center;
  font-size: 2rem;
　font-weight: 500;
  color: red;
  margin-bottom: 1em;
	padding: 0 3rem;
}

.p-houhou-application-check {
  padding: 2em;
  background-color: #f3f8ff;
}
.p-houhou-application-check__title {
  margin-bottom: 1em;
  color: red;
  font-weight: 500;
  font-size: 2rem;
  text-align: center;
}

.p-houhou-application-item {
  counter-reset: item;
}
.p-houhou-application-item__title {
  margin-bottom: 1.5em;
  padding: 0.5em 1em;
  background-color: #1e6aba;
  color: #fff;
  font-size: 2rem;
  text-align: center;
}

.p-houhou-application-flow {
  position: relative;
  margin: 0 5% 2.4rem;
  padding-bottom: 5rem;
}
.p-houhou-application-flow:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}
.p-houhou-application-flow:last-of-type::after {
  display: none;
}
.p-houhou-application-flow::after {
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: -1;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 106px;
  height: 34px;
  transform: translateX(-50%);
  background-color: #dcebff;
  content: "";
          clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.p-houhou-application-flow__title {
  position: relative;
  margin-bottom: 1em;
  padding-bottom: 1rem;
  border-bottom: 3px solid #dbdbdb;
  color: #1e6aba;
  font-weight: bold;
  font-size: 1.8rem;
  vertical-align: bottom;
}
.p-houhou-application-flow__title::before {
  display: inline-block;
  margin-right: 1.6rem;
  transform: translateY(2px);
  content: counter(item) ".";
  font-size: 5rem;
  line-height: 1;
  font-family: "Barlow Semi Condensed", "BIZ UDGothic", "游ゴシック体", yugothic, "游ゴシック", "Hiragino Kaku Gothic ProN", meiryo, メイリオ, sans-serif;
  counter-increment: item;
}
.p-houhou-application-flow__body {
  max-width: 940px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 1.6rem;
}
/*
  LINE友達追加ボタン
--------------------------------- */
.line-button {
    text-align: center; /* ボタンを中央寄せ */
    margin-top: 10px; /* テキストとボタンの間に余白を作る */
}

/*
  受験当日の注意点
--------------------------------- */
.p-houhou-application-notice {
  padding: 2em;
  background-color: #f3f8ff;
}
.p-houhou-application-notice__title {
  margin-bottom: 0.5em;
  font-weight: 500;
  font-size: 2.4rem;
  text-align: center;
}
.p-houhou-application-notice__subtitle {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
  color: red;
  font-weight: 500;
  font-size: 2rem;
}
.p-houhou-application-notice__list {
  display: flex;
  position: relative;
  justify-content: center;
}

.p-houhou-application-notice-cross {
  padding-top: 8rem;
  background-image: url("../img/houhou/icon-cross.svg");
  background-position: center top;
  background-size: 60px;
  background-repeat: no-repeat;
}

.p-houhou-application-notice-notes {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
  padding: 2rem 5%;
  border-top: 1px solid #dcebff;
}

/*
  申込みボタン
--------------------------------- */
.p-houhou-application-button {
  gap: 1.2rem;
  font-size: 1.6rem;
}
@media print, screen and (min-width: 744px) {
  .p-houhou-overview-date__image {
    margin: 0 0 2rem;
  }
  .p-houhou-exam-subject-list {
    grid-template-columns: repeat(6, 1fr);
    flex-wrap: nowrap;
  }
  .p-houhou-exam-content__list {
    grid-template-columns: 1fr 1fr;
  }
  .p-houhou-exam-content__list li {
    min-height: 216px;
    padding-left: 10%;
  }
  .p-houhou-exam-content__list li:first-child::after {
    -webkit-clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0 100%, 0 0);
    width: 105%;
    height: 100%;
            clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0 100%, 0 0);
  }
  .p-houhou-exam-content__list li::before {
    left: 12%;
  }
  .p-houhou-challenge-item {
    grid-template-columns: 25% 1fr;
  }
  .p-houhou-challenge-item__level {
    gap: 1em;
  }
  .p-houhou-application-item__title {
    border-radius: 99rem;
  }
  .p-houhou-application-flow {
    margin: 0 5%;
  }
  .p-houhou-application-flow__body {
    padding: 0;
  }
  .p-houhou-application-notice__subtitle {
    justify-content: center;
  }
  .p-houhou-application-notice-cross {
    padding-top: 0;
    padding-left: 15rem;
    background-position: left center;
    background-size: 100px;
  }
  .p-houhou-application-button {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}