@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@700&display=swap');

/*====================================================
COMMON
====================================================*/
body {
  background-color: #320000;
  background-image: url(../img/bg.png);
  background-size: 2766px;
  background-position: center top 24px;
}

#container {
  max-width: 430px;
  width: 100%;
  margin: 0 auto !important;
  font-size: 24px;
  line-height: 1.5;
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-style: normal;
  color: #320000;
  font-feature-settings: 'palt';
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;

  .flex {
    display: flex;
  }

  a:focus-visible {
    outline: auto;
  }

  img {
    width: auto;
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
  }
  @media (hover: hover) {
    button,
    a:where([href]) {
      transition: opacity 0.3s;
      img {
        transition: inherit;
      }
      &:hover {
        opacity: 0.7;
      }
    }
  }
  @media screen and (max-width: 430px) {
    font-size: 5.58139535vw;
  }
}

/*====================================================
EXPERIENCE
====================================================*/
#experience {
  background-image: url(../img/experience_bg.jpg);
  background-size: 100%;
  background-position: left top 0.3em;
  background-color: #230000;
  background-repeat: no-repeat;
  aspect-ratio: 8600/10074;
  height: auto;
  width: 100%;
  padding-top: 0.2em !important;

  .experience__title {
    margin-bottom: 0.3em;
  }
  .experience__title_image {
    width: 96.51162791%;
  }
  .experience__text {
    text-align: center;
    font-size: 0.83333333em;
    line-height: 1.8;
  }
}

/*====================================================
FEATURE
====================================================*/
#feature {
  background-image: url(../img/feature_bg.jpg);
  background-size: 100%;
  color: #fff;
  margin-bottom: -0.1em !important;

  .feature__title {
    transform: translateY(-7em);
    width: 108.8372093%;
    max-width: unset;
    margin-bottom: -7.2em;
  }
  .feature__list {
    flex-direction: column;
    row-gap: 2.7em;
  }
  .feature__list_item {
    position: relative;
    & + .feature__list_item {
      &::after {
        content: '';
        position: absolute;
        display: block;
        width: 91.74418605%;
        height: 0.1875em;
        background-image: url(../img/feature_list_bg.png);
        background-repeat: repeat-x;
        background-size: contain;
        background-position: left top;
        bottom: calc(100% + 0.4em);
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    &::before {
      content: '';
      position: absolute;
      display: block;
      height: auto;
      background-repeat: no-repeat;
      background-size: 100%;
    }
    &:where(:nth-child(1)) {
      &::before {
        background-image: url(../img/feature_list_item_img01.png);
        aspect-ratio: 103/74;
        width: 47.90697674%;
        top: 0;
        right: 0;
      }
    }
    &:where(:nth-child(3)) {
      margin-top: -1.9em;
    }
  }
  .feature__list_item_title {
    font-size: 1.16666667em;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.04em;

    &:where(.feature__list_item:nth-child(1) *) {
      width: fit-content;
      margin-left: 1.2em;
    }
    &:where(.feature__list_item:nth-child(2) *) {
      margin-bottom: 2.6em;
    }
    &:where(.feature__list_item:nth-child(3) *) {
      margin-bottom: 0.8em;
    }
  }
  .feature__list_item_list {
    flex-direction: column;
    row-gap: 0.8em;
  }
  .feature__list_item_list_item {
    position: relative;
    &:where(.feature__list_item:nth-child(2) .feature__list_item_list_item:nth-child(2)) {
      flex-direction: column;
      align-items: center;
    }
    &:where(.feature__list_item:nth-child(3) .feature__list_item_list_item:nth-child(1)),
    &:where(.feature__list_item:nth-child(3) .feature__list_item_list_item:nth-child(2)) {
      &::after {
        content: '';
        position: absolute;
        display: block;
        height: auto;
        background-repeat: no-repeat;
        background-size: 100%;
      }
    }
    &:where(.feature__list_item:nth-child(3) .feature__list_item_list_item:nth-child(1)) {
      &::after {
        background-image: url(../img/feature_list_item_list_item_bg01.png);
        aspect-ratio: 111/85;
        width: 51.62790698%;
        top: 0.4em;
        right: 0;
      }
    }
    &:where(.feature__list_item:nth-child(3) .feature__list_item_list_item:nth-child(2)) {
      &::after {
        background-image: url(../img/feature_list_item_list_item_bg02.png);
        aspect-ratio: 426/322;
        width: 49.53488372%;
        top: 1.2em;
        left: 0;
      }
    }
  }
  .feature__list_item_list_item_image {
    &:where(.feature__list_item:nth-child(2) .feature__list_item_list_item:nth-child(1) *) {
      position: absolute;
      width: 64.88372093%;
      top: -2.6em;
      left: 4%;
    }
    &:where(.feature__list_item:nth-child(2) .feature__list_item_list_item:nth-child(2) *) {
      width: 78.60465116%;
    }
  }
  .feature__list_item_list_item_text {
    font-size: 0.83333333em;
    width: fit-content;
    text-align: center;
    line-height: 1.6;
    position: relative;
    display: block;

    &::before,
    &::after {
      content: '';
      position: absolute;
      height: auto;
      background-repeat: no-repeat;
      background-size: 100%;
    }
    &:where(.feature__list_item:nth-child(2) .feature__list_item_list_item:nth-child(1) *) {
      margin-left: auto;
      margin-top: 4.3em;
      margin-right: 2.4em;
      margin-bottom: 6.6em;
      transform: translateY(0.7em);

      &::before {
        top: -1.3em;
        left: -0.2em;
        background-image: url(../img/feature_list_item_list_item_text_bg01.png);
        width: 6.1912895em;
        aspect-ratio: 29/4;
      }
      &::after {
        bottom: -1em;
        left: -0.4em;
        background-image: url(../img/feature_list_item_list_item_text_bg02.png);
        width: 6.70940171em;
        aspect-ratio: 157/18;
      }
    }
    &:where(.feature__list_item:nth-child(2) .feature__list_item_list_item:nth-child(2) *) {
      margin-inline: auto;
      margin-bottom: -0.6em;

      &::before,
      &::after {
        background-image: url(../img/feature_list_item_list_item_text_bg03.png);
        width: 1.11016225em;
        aspect-ratio: 52/113;
        top: 0.8em;
      }
      &::before {
        left: -1.2em;
      }
      &::after {
        right: -1em;
        transform: rotateZ(226deg);
      }
    }
    &:where(.feature__list_item:nth-child(3) .feature__list_item_list_item:nth-child(2) *) {
      margin-right: 0.4em;
    }
  }
  .feature__list_item_list_item_title {
    height: 1.70833333em;
  }
  .feature__list_item_list_item_title_image {
    height: 100%;
  }
  .feature__list_item_list_item_text_wrap {
    width: fit-content;
    flex-direction: column;
    row-gap: 0.3em;

    &:where(.feature__list_item:nth-child(3) .feature__list_item_list_item:nth-child(1) *) {
      align-items: center;
      margin-left: 1.3em;
    }
    &:where(.feature__list_item:nth-child(3) .feature__list_item_list_item:nth-child(2) *) {
      align-items: flex-end;
      margin-left: auto;
      margin-right: 0.6em;
    }
  }
  .feature__list_item_list_item_text_wrap_image {
    &:where(.feature__list_item:nth-child(3) *) {
      width: 5.41666667em;
    }
    &:where(.feature__list_item:nth-child(3) .feature__list_item_list_item:nth-child(1) *) {
      transform: translate(-0.2em, -0.4em);
    }
    &:where(.feature__list_item:nth-child(3) .feature__list_item_list_item:nth-child(2) *) {
      margin-right: 1.7em;
      transform: translateY(-0.4em);
    }
  }
}

#special {
  background-image: url(../img/special_bg.png);
  background-size: 100%;
  background-position: left top;
  background-repeat: no-repeat;
  padding-top: 1em !important;
  .special__list {
    margin-bottom: 1.5em;
  }
  .special__list_item_title {
    &:where(.special__list_item:nth-child(1) *) {
      margin-left: auto;
      width: 94.88372093%;
      margin-bottom: 1.6em;
    }
    &:where(.special__list_item:nth-child(2) *) {
      width: 83.48837209%;
      margin-left: 0.8em;
      margin-top: -3.6em;
      margin-bottom: 0.6em;
    }
  }
  .special__list_item_list_item_image {
    position: absolute;
    &:where(.special__list_item_list_item:nth-child(1) *) {
      width: 8.1em;
      top: -0.6em;
      right: 1.68em;
    }
    &:where(.special__list_item_list_item:nth-child(2) *) {
      width: 5.85em;
      top: -1.4625em;
      right: 1.08em;
    }
  }
  .special__list_item_list {
    margin-left: 7%;
    flex-direction: column;
    row-gap: 0.86em;
  }
  .special__list_item_list_item {
    text-indent: -1.8em;
    padding-left: 1.8em;
    position: relative;
    font-size: 0.83333333em;
  }
  .special__list_item_list_item_number {
    font-family: 'Crimson Text', serif;
    font-size: 1.19041667em;
    color: #dcc873;
    background-color: #320000;
    border-radius: 50%;
    width: 1.3em;
    height: 1.3em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-indent: 0;
  }
  .special__list_item_image {
    width: 100%;
    margin-top: 0.6em;
  }
  .special__list_item_text {
    font-size: 0.83333333em;
    line-height: 1.8;
    margin-left: 7%;
  }
  .special__links {
    background-image: url(../img/special_links_bg.png);
    background-size: 100%;
    background-position: left top;
    background-repeat: no-repeat;
    aspect-ratio: 430/537;
    width: 100%;
    height: auto;
    padding-block: 2.7em 0;
    color: #dcc873;
  }
  .special__links_title {
    width: 68.60465116%;
    margin-inline: auto;
    margin-bottom: 0.2em;
  }
  .special__links_text {
    font-size: 0.70833333em;
    text-align: center;
  }
  .special__links_list {
    margin-top: 2.4em;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      background-image: url(../img/special_links_list_bg.png);
      background-repeat: no-repeat;
      background-position: center top;
      background-size: 100%;
      width: 55.58139535%;
      height: auto;
      aspect-ratio: 239/227;
      top: -1.9em;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .special__links_list_item {
    flex-direction: column;
    align-items: center;
    width: 50%;
  }
  .special__links_list_item_title {
    flex-direction: column;
    width: 100%;
    margin-bottom: 0.2em;
  }
  .special__links_list_item_image {
    width: 6.625em;
  }
  .special__links_list_item_title_text {
    font-size: 0.91041667em;
    display: block;
    text-align: center;
    line-height: 0.95652174;

    &:where(.special__links_list_item:nth-child(1) *) {
      margin-top: -0.6em;
      padding-right: 1em;
    }
    &:where(.special__links_list_item:nth-child(2) *) {
      margin-top: -0.46em;
      padding-left: 2em;
    }
  }
  .special__links_list_item_title_text_and {
    font-size: 86.956522%;
  }
  .special__links_list_item_title_image {
    &:where(.special__links_list_item:nth-child(1) *) {
      width: 4.75em;
      margin-left: 0.2em;
    }
    &:where(.special__links_list_item:nth-child(2) *) {
      width: 3.45833334em;
      margin-left: auto;
      margin-right: 0.8em;
      margin-top: 0.3em;
    }
  }
  .special__links_list_item_link {
    margin-top: 0.58852379em;
    width: 6.58333333em;
    &:hover {
      text-decoration: none;
    }
  }
}