/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/mokuteki.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
  Object
--------------------------------- */
/* =================================================================================


  color.scss


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


  font.scss


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


  Project - mokuteki.scss


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

.p-mokuteki-about {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-image: url("../img/mokuteki/about-bg.svg");
  background-position: right top;
  background-size: 30%;
  background-repeat: no-repeat;
}

.p-mokuteki-list-primary {
  max-width: 646px;
  margin-right: auto;
  margin-left: auto;
}
.p-mokuteki-list-primary__item {
  margin-bottom: 1em;
  padding-left: 4rem;
  background-image: url("../img/mokuteki/list-primary.svg");
  background-position: left 6px;
  background-size: 25px;
  background-repeat: no-repeat;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.4vw, 1.8rem);
}

.p-mokuteki-guideline {
  display: grid;
  margin-top: 12rem;
  gap: 8rem 1.6rem;
}
.p-mokuteki-guideline__item {
  position: relative;
  padding: 0 1.6rem 1.6rem;
  border-radius: 15px;
  background-color: #f3f8ff;
}
.p-mokuteki-guideline__header {
  display: grid;
  place-items: center;
  margin-top: -7rem;
  margin-bottom: 1.6rem;
}
.p-mokuteki-guideline__title {
  order: 3;
  font-weight: 500;
  font-size: clamp(2rem, 2.2vw, 2.4rem);
  text-align: center;
}
.p-mokuteki-guideline__label {
  order: 2;
  min-width: 164px;
  margin-bottom: 0.8em;
  padding: 0.3em 1.2em;
  border-radius: 99rem;
  background-color: #1e6aba;
  color: #fff;
  font-size: 2rem;
  text-align: center;
}
.p-mokuteki-guideline__thumbnail {
  order: 1;
  margin-bottom: 1rem;
  text-align: center;
}
.p-mokuteki-guideline__thumbnail img {
  max-height: 200px;
}
.p-mokuteki-guideline__content {
  color: #333;
  line-height: 2;
}

.p-mokuteki-data {
  display: grid;
  margin-top: 4rem;
  gap: 4rem;
}
.p-mokuteki-data__item figcaption {
  margin-bottom: 1em;
  font-weight: 500;
  font-size: 2rem;
  text-align: center;
}

.p-mokuteki-advisor-list {
  display: grid;
  gap: 4px;
}
.p-mokuteki-advisor-list__item {
  display: grid;
  grid-template-columns: 8rem 1fr;
  padding: 1.6rem;
  gap: 2.4rem;
  border-radius: 5px;
  background-color: #f3f8ff;
}
.p-mokuteki-advisor-list__name {
  margin-bottom: 0.5em;
  font-weight: 700;
}
.p-mokuteki-advisor-list__description {
  font-size: 1.4rem;
}
.p-mokuteki-advisor-list__content {
  order: 2;
}
.p-mokuteki-advisor-list__icon {
  order: 1;
}
@media print, screen and (min-width: 744px) {
  .p-mokuteki-about {
    padding-top: 8rem;
    padding-bottom: 8rem;
    background-position: right 6rem;
    background-size: 24%;
  }
  .p-mokuteki-list-primary__item {
    background-position: left center;
  }
  .p-mokuteki-guideline {
    grid-template-columns: repeat(2, 1fr);
    gap: 9rem 1.6rem;
  }
  .p-mokuteki-guideline__item {
    padding: 0 6rem 6rem;
  }
  .p-mokuteki-guideline__header {
    margin-top: -16%;
  }
  .p-mokuteki-data {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-mokuteki-advisor-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-mokuteki-advisor-list__item {
    padding: 4rem;
    gap: 4rem;
  }
}