@charset "UTF-8";
/* ルート指定 */
:root {
  --main-color-1: #1D1C1A;
  --sec-color-1: #F8EAD4;
  --sec-color-2: #CDE3E6;
  --sec-color-3: #B7CBE0;
  --sec-color-4: #F3EEC2;
  --sec-color-5: #DECABA;
  --sec-color-6: #E8E6E6;
  --sec-color-7: #DBE9DA;
  --sec-color-8: #E4D5BB;
  --sec-color-9: #F9E7E7;
  --sec-color-10: #CDD6EF;
  --bg-color-1: #ffffff; /* 背景色 */
  --text-color-1: #1D1C1A; /* テキスト色 */
  --main-font-1: "halyard-display", sans-serif; /* フォント */
  --main-font-2: "meno-banner-condensed", serif;
  --main-font-3: "bigmoore", serif;
  --jp-font: "noto-sans-cjk-jp", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}

html {
  font-size: 62.5%; /* 1remを10px相当に指定 */
  color: var(--text-color-1);
}
@media screen and (max-width: 767px) {
  html {
    font-size: 2.666vw;
  }
}

body {
  position: relative;
  font-family: var(--main-font-1), var(--jp-font), "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}

#wrapper, html {
  background-color: var(--bg-color-1);
  font-family: var(--jp-font), var(--main-font-1);
  width: 100vw;
  margin-inline: auto;
}

/* loading */
#loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--bg-color-1);
  z-index: 4;
}
#loading .logo {
  width: 180px;
}
@media screen and (max-width: 767px) {
  #loading .logo {
    max-width: 25vw;
  }
}
#loading .progressBar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 0;
  overflow: hidden;
}
#loading .progressBar__inner {
  height: 100%;
  background: #000000;
  width: 0%;
  border-radius: 0;
  -webkit-transition: width 0.5s ease-in-out;
  transition: width 0.5s ease-in-out;
}

header {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  font-family: var(--main-font-1);
  color: var(--main-color-1);
  position: fixed;
  z-index: 4;
  top: 0;
  right: 0;
  top: env(safe-area-inset-top);
}
header ul {
  margin: 2rem;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 767px) {
  header ul {
    padding-right: 4vw;
  }
}
header li:first-child {
  /* .visualの中では白色に */
}
header li:first-child::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1px;
  background-color: var(--main-color-1);
  margin: 1rem;
}
header li:first-child.active::after {
  background-color: #ffffff;
}

footer {
  /* ページトップ */
}
footer .pageTop {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s ease, visibility 0.5s ease;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  position: fixed;
  right: 2rem;
  bottom: 2.2rem;
  width: 4.2rem;
  height: 4.2rem;
  background: hsla(0, 0%, 100%, 0.9);
  border-radius: 3px;
  border: 1px solid var(--main-color-1);
  z-index: 3;
}
footer .pageTop::after {
  content: "";
  position: absolute;
  top: 1.8rem;
  left: 1.6rem;
  width: 1rem;
  height: 1rem;
  border-left: 2px solid var(--main-color-1);
  border-top: 2px solid var(--main-color-1);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
@media screen and (max-width: 767px) {
  footer .pageTop {
    display: none;
  }
}

#mainWrapper {
  /* フェードイン */
}
#mainWrapper .fadeIn {
  opacity: 0;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition: all 1.5s;
  transition: all 1.5s;
}
#mainWrapper .fadeIn.active {
  opacity: 1 !important;
  -webkit-transform: translate(0, 0) !important;
          transform: translate(0, 0) !important;
}
#mainWrapper .visual img {
  width: 100vw;
}
@media screen and (max-width: 767px) {
  #mainWrapper .visual img {
    width: 100%;
  }
}
#mainWrapper .visual__pc {
  display: block;
}
@media screen and (max-width: 767px) {
  #mainWrapper .visual__pc {
    display: none;
  }
}
#mainWrapper .visual__sp {
  display: none;
}
@media screen and (max-width: 767px) {
  #mainWrapper .visual__sp {
    display: block;
  }
}
#mainWrapper .read {
  padding: 12rem 0;
  text-align: center;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  #mainWrapper .read {
    padding: 10rem 2rem;
    text-align: left;
    font-size: 1.3rem;
  }
}
#mainWrapper .anchor {
  margin-inline: 0 auto;
}
#mainWrapper .anchor__title {
  text-align: center;
  font-family: var(--main-font-1);
  font-size: 5rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.1rem;
  line-height: 1.5;
  padding-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper .anchor__title {
    font-size: 3.5rem;
  }
}
#mainWrapper .anchor__title::after {
  content: "";
  display: block;
  height: 1px;
  background-color: var(--main-color-1);
  width: 100vw;
}
#mainWrapper .anchor__links {
  max-width: 106rem;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  -webkit-column-gap: 4rem;
     -moz-column-gap: 4rem;
          column-gap: 4rem;
  row-gap: 6rem;
  font-size: 1.6rem;
  font-family: var(--main-font-1);
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
  padding-bottom: 28rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper .anchor__links {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 2.75rem 22rem;
  }
}
#mainWrapper .anchor__links li {
  border-bottom: solid 1px var(--main-color-1);
  padding-bottom: 0.5rem;
  position: relative;
}
#mainWrapper .anchor__links li a {
  display: block;
  width: 100%;
}
#mainWrapper .anchor__links li img {
  max-width: 12rem;
  max-height: 15rem;
  height: auto;
  display: block;
  margin: auto;
  padding-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper .anchor__links li img {
    max-width: 10rem;
  }
}
#mainWrapper .anchor__links li::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1rem;
  display: inline-block;
  vertical-align: middle;
  color: var(--main-color-1);
  line-height: 1;
  width: 1rem;
  height: 1rem;
  border: 0.1rem solid currentColor;
  border-left: 0;
  border-bottom: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transform: translateY(-25%) rotate(135deg);
          transform: translateY(-25%) rotate(135deg);
}
#mainWrapper .anchor__links li .number {
  display: inline-block;
  font-size: 2.6rem;
  font-family: var(--main-font-2);
  font-style: italic;
  font-weight: 300;
}
#mainWrapper .anchor__links li .number::before {
  content: "(";
  font-family: var(--main-font-3);
  padding-right: 1rem;
}
#mainWrapper .anchor__links li .number::after {
  content: ")";
  font-family: var(--main-font-3);
  font-size: 2.6rem;
  padding-left: 0.5rem;
}
#mainWrapper .anchor__links li .number__dec {
  font-size: 1.5rem;
  margin-left: -0.5rem;
}
#mainWrapper .anchor__links li .number__dec::before {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 1px;
  background-color: var(--main-color-1);
  margin-bottom: 8px;
  -webkit-transform: rotate(-60deg);
          transform: rotate(-60deg);
}
#mainWrapper .content {
  width: 86rem;
  margin: auto;
}
@media screen and (max-width: 767px) {
  #mainWrapper .content {
    width: 100%;
  }
}
#mainWrapper .content .titleBlock .textBlock {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
#mainWrapper .content .titleBlock .textBlock__image {
  padding: 2rem 0;
}
#mainWrapper .content .titleBlock .textBlock__image img {
  width: 15rem;
}
#mainWrapper .content .titleBlock .textBlock__credit::after, #mainWrapper .content .titleBlock .textBlock__credit::before {
  content: "";
  display: block;
  height: 1px;
  background-color: var(--main-color-1);
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}
#mainWrapper .content .titleBlock .textBlock .midashiBlock {
  font-family: var(--main-font-1);
  font-weight: 700;
  font-style: normal;
  font-size: 6rem;
}
#mainWrapper .content .titleBlock .textBlock .midashiBlock__number {
  font-family: var(--main-font-2);
  font-size: 7.6rem;
  font-style: italic;
  font-weight: 300;
}
@media screen and (max-width: 767px) {
  #mainWrapper .content .titleBlock .textBlock .midashiBlock__number {
    font-size: 6rem;
  }
}
#mainWrapper .content .titleBlock .textBlock .midashiBlock__number::before {
  content: "(";
  font-family: var(--main-font-3);
  padding-right: 2rem;
}
#mainWrapper .content .titleBlock .textBlock .midashiBlock__number::after {
  content: "";
  display: inline-block;
  width: 7rem;
  height: 2px;
  background-color: var(--main-color-1);
  margin-left: -1rem;
  margin-bottom: 2.4rem;
  -webkit-transform: rotate(-60deg);
          transform: rotate(-60deg);
}
@media screen and (max-width: 767px) {
  #mainWrapper .content .titleBlock .textBlock .midashiBlock__number::after {
    width: 5rem;
    height: 1.5px;
    margin-bottom: 2rem;
  }
}
#mainWrapper .content .titleBlock .textBlock .midashiBlock span:last-child {
  font-size: 4.3rem;
  font-family: var(--main-font-2);
  margin-left: -1.5rem;
  font-style: italic;
  font-weight: 300;
}
@media screen and (max-width: 767px) {
  #mainWrapper .content .titleBlock .textBlock .midashiBlock span:last-child {
    font-size: 3.4rem;
  }
}
#mainWrapper .content .titleBlock .textBlock .midashiBlock span:last-child::after {
  content: ")";
  font-family: var(--main-font-3);
  font-size: 7.6rem;
  padding-left: 1rem;
  font-style: italic;
  font-weight: 300;
}
@media screen and (max-width: 767px) {
  #mainWrapper .content .titleBlock .textBlock .midashiBlock span:last-child::after {
    font-size: 6rem;
  }
}
#mainWrapper .content .images {
  width: 86rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper .content .images {
    width: 100%;
  }
}
#mainWrapper .content .images img {
  width: 100%;
}
#mainWrapper .content .images__comment {
  font-family: var(--jp-font);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper .content .images__comment {
    text-align: left;
    padding: 0 2rem 4rem;
    font-size: 1.2rem;
    line-height: 1.6;
  }
}
#mainWrapper .content .images__main {
  padding: 4rem 0;
}
@media screen and (max-width: 767px) {
  #mainWrapper .content .images__main {
    padding: 3rem 0;
  }
}
#mainWrapper .content .images__2column {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 767px) {
  #mainWrapper .content .images__2column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
#mainWrapper .content .images__itemCredit ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  font-size: 1.2rem;
  font-family: var(--main-font-1), sans-serif;
  font-weight: 400;
  line-height: 1;
  padding-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper .content .images__itemCredit ul {
    padding-top: 1rem;
  }
}
#mainWrapper .content .images__itemCredit li a {
  display: inline-block;
  width: 100%;
  border: solid 1px var(--main-color-1);
  padding: 0.6rem 1.5rem;
}
#mainWrapper .content .creditBlock__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 767px) {
  #mainWrapper .content .creditBlock__inner {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 0 calc(50% - 50vw);
    padding: 1.5rem 0 1.5rem 2rem;
    gap: 1rem;
  }
}
#mainWrapper .content .creditBlock__inner--bold {
  padding: 1.5rem 2rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 767px) {
  #mainWrapper .content .creditBlock__inner--bold {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 0;
    margin: 0;
    width: 100%;
  }
}
#mainWrapper .content .creditBlock__inner--bold span {
  font-family: var(--main-font-1);
  font-size: 1.2rem;
  font-style: normal;
  border-right: solid 1px var(--main-color-1);
  padding-right: 0.8rem;
  margin-right: 0.8rem;
  width: 4rem;
}
#mainWrapper .content .creditBlock__inner--bold ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper .content .creditBlock__inner--bold ul {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: 0.5rem;
  }
}
#mainWrapper .content .creditBlock__inner--bold .shop {
  width: 4.5rem;
}
#mainWrapper .copyright {
  border-top: solid 1px var(--main-color-1);
}
#mainWrapper .copyright p {
  padding: 8rem 0 12rem;
  text-align: center;
  font-family: var(--main-font-1);
  color: var(--main-color-1);
}
@media screen and (max-width: 767px) {
  #mainWrapper .copyright p {
    padding: 5rem 0;
  }
}
#mainWrapper [id^=sec] {
  padding-bottom: 24rem;
}
#mainWrapper [id^=sec] .images__2column {
  padding-bottom: 10rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper [id^=sec] .images__2column {
    padding: 0 2rem 5rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
#mainWrapper [id^=sec] .images__2column--normal {
  padding-top: 15rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper [id^=sec] .images__2column--normal {
    padding-top: 3rem;
  }
}
#mainWrapper [id^=sec] .images__2column--frame {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
#mainWrapper [id^=sec] .images__1column--frame {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
#mainWrapper [id^=sec] .images__1column--right {
  padding-left: 8rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper [id^=sec] .images__1column--right {
    padding-left: 4rem;
  }
}
#mainWrapper [id^=sec] .images__1column--left {
  padding-right: 8rem;
}
#mainWrapper [id^=sec] .images__1column--center {
  padding: 0 11rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper [id^=sec] .images__1column--center {
    padding: 0 2rem;
  }
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec01 .textBlock__image {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}
#mainWrapper #sec01 .images__2column--normal img {
  width: 37.6rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec01 .images__2column--normal img {
    width: 21rem;
  }
}
#mainWrapper #sec01 .images__2column--frame {
  background: var(--sec-color-1);
  width: 41rem;
  height: 54.5rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec01 .images__2column--frame {
    width: 23.5rem;
    height: 31.2rem;
    margin: 0 0 0 auto;
  }
}
#mainWrapper #sec01 .images__2column--frame img {
  width: 27rem;
  height: auto;
  display: block;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec01 .images__2column--frame img {
    width: 15.5rem;
  }
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec02 .images__2column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec02 .images__2column--normal {
    margin-left: calc(100vw - 25rem);
  }
}
#mainWrapper #sec02 .images__2column--normal img {
  width: 37.6rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec02 .images__2column--normal img {
    width: 21rem;
  }
}
#mainWrapper #sec02 .images__2column--frame {
  background: var(--sec-color-2);
  width: 41rem;
  height: 54.5rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec02 .images__2column--frame {
    width: 23.5rem;
    height: 31.2rem;
    margin: 0 auto 0 0;
  }
}
#mainWrapper #sec02 .images__2column--frame img {
  width: 27rem;
  height: auto;
  display: block;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec02 .images__2column--frame img {
    width: 15.5rem;
  }
}
#mainWrapper #sec03 .images__1column--frame {
  background: var(--sec-color-3);
  width: 49rem;
  height: 38.2rem;
  margin-left: 37rem;
  margin-bottom: 10rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec03 .images__1column--frame {
    width: 26.8rem;
    height: 20.9rem;
    margin: auto;
  }
}
#mainWrapper #sec03 .images__1column--frame img {
  width: 35rem;
  height: auto;
  display: block;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec03 .images__1column--frame img {
    width: 19rem;
  }
}
#mainWrapper #sec03 .images__1column--left {
  margin-right: 11rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec03 .images__1column--left {
    margin: 0;
    padding: 5rem 2rem 0 0;
  }
}
#mainWrapper #sec04 .images__1column--frame {
  background: var(--sec-color-4);
  width: 41rem;
  height: 54.5rem;
  margin-left: 38rem;
  margin-bottom: 10rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec04 .images__1column--frame {
    width: 23.5rem;
    height: 31.2rem;
    margin: 0 2rem 0 auto;
  }
}
#mainWrapper #sec04 .images__1column--frame img {
  width: 27rem;
  height: auto;
  display: block;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec04 .images__1column--frame img {
    width: 15.5rem;
  }
}
#mainWrapper #sec04 .images__1column--left {
  margin-right: 11rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec04 .images__1column--left {
    margin: 0;
    padding: 5rem 2rem 0 0;
  }
}
#mainWrapper #sec05 .images__2column {
  gap: 3rem;
}
#mainWrapper #sec05 .images__2column--frame {
  background: var(--sec-color-5);
  width: 49rem;
  height: 37.2rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec05 .images__2column--frame {
    width: 27rem;
    height: 20.6rem;
  }
}
#mainWrapper #sec05 .images__2column--frame img {
  width: 35rem;
  height: auto;
  display: block;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec05 .images__2column--frame img {
    width: 19rem;
  }
}
#mainWrapper #sec05 .images__2column--normal {
  width: 34rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec05 .images__2column--normal {
    width: 20.8rem;
  }
}
#mainWrapper #sec05 .images__2column--right {
  margin-left: 10rem;
  max-width: 75.6rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec05 .images__2column--right {
    margin: 0;
    padding: 5rem 2rem 0 0;
  }
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec05 .images__2column__frame {
    margin: 0 1.2rem 0 auto;
  }
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec06 .images__2column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec06 .images__2column__frame {
    margin: 0 auto 0 0;
  }
}
#mainWrapper #sec06 .images__2column--frame {
  background: var(--sec-color-6);
  width: 41rem;
  height: 54.5rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec06 .images__2column--frame {
    width: 23.5rem;
    height: 31.2rem;
    margin: auto;
  }
}
#mainWrapper #sec06 .images__2column--frame img {
  width: 27rem;
  height: auto;
  display: block;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec06 .images__2column--frame img {
    width: 15.5rem;
  }
}
#mainWrapper #sec06 .images__2column--normal {
  max-width: 37.6rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec06 .images__2column--normal {
    width: 21rem;
    margin: 0 0 0 auto;
  }
}
#mainWrapper #sec06 .images__1column--left {
  margin: 0 auto 0 10rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec06 .images__1column--left {
    margin: 0 4.8rem;
  }
}
#mainWrapper #sec06 .images__1column--left img {
  width: 45rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec06 .images__1column--left img {
    width: 28rem;
  }
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec07 .images__2column__frame {
    margin: 0 0 0 auto;
  }
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec07 .images__2column--normal {
    padding-left: 1rem;
  }
}
#mainWrapper #sec07 .images__2column--normal img {
  width: 37.6rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec07 .images__2column--normal img {
    width: 21rem;
  }
}
#mainWrapper #sec07 .images__2column--frame {
  background: var(--sec-color-7);
  width: 41rem;
  height: 54.5rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec07 .images__2column--frame {
    width: 23.5rem;
    height: 31.2rem;
  }
}
#mainWrapper #sec07 .images__2column--frame img {
  width: 27rem;
  height: auto;
  display: block;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec07 .images__2column--frame img {
    width: 15.5rem;
  }
}
#mainWrapper #sec08 .images__pc {
  display: block;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec08 .images__pc {
    display: none;
  }
}
#mainWrapper #sec08 .images__pc .images__1column--left {
  width: 32rem;
  padding: 0;
  margin: 0 auto 10rem 10rem;
}
#mainWrapper #sec08 .images__pc .images__1column--center {
  width: 75.6rem;
  padding: 0;
  margin: auto;
}
#mainWrapper #sec08 .images__pc .images__2column {
  padding-bottom: 0;
}
#mainWrapper #sec08 .images__pc .images__2column--frame {
  background: var(--sec-color-8);
  width: 41rem;
  height: 54.5rem;
}
#mainWrapper #sec08 .images__pc .images__2column--frame img {
  width: 27rem;
  height: auto;
  display: block;
}
#mainWrapper #sec08 .images__pc .images__2column--normal {
  width: 37.6rem;
}
#mainWrapper #sec08 .images__sp {
  display: none;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec08 .images__sp {
    display: block;
  }
}
#mainWrapper #sec08 .images__sp .images__1column--frame {
  background: var(--sec-color-8);
  width: 23.5rem;
  height: 31.2rem;
  margin: auto;
}
#mainWrapper #sec08 .images__sp .images__1column--frame img {
  width: 15.5rem;
}
#mainWrapper #sec08 .images__sp .images__1column--left {
  width: 33.6rem;
  margin: 5rem auto 5rem 0;
  padding: 0;
}
#mainWrapper #sec08 .images__sp .images__1column--right {
  width: 33.5rem;
  margin: 0 0 0 auto;
  padding: 0;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec09 .images__2column__frame {
    margin: 0 0 0 auto;
  }
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec09 .images__2column--normal {
    padding-left: 1rem;
  }
}
#mainWrapper #sec09 .images__2column--normal img {
  width: 37.6rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec09 .images__2column--normal img {
    width: 21rem;
  }
}
#mainWrapper #sec09 .images__2column--frame {
  background: var(--sec-color-9);
  width: 41rem;
  height: 54.5rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec09 .images__2column--frame {
    width: 23.5rem;
    height: 31.2rem;
  }
}
#mainWrapper #sec09 .images__2column--frame img {
  width: 27rem;
  height: auto;
  display: block;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec09 .images__2column--frame img {
    width: 15.5rem;
  }
}
#mainWrapper #sec10 {
  padding-bottom: 12rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec10 {
    padding-bottom: 5rem;
  }
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec10 .images__2column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec10 .images__2column__frame {
    margin: 0 auto 0 0;
  }
}
#mainWrapper #sec10 .images__2column--frame {
  background: var(--sec-color-10);
  width: 41rem;
  height: 54.5rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec10 .images__2column--frame {
    width: 23.5rem;
    height: 31.2rem;
    margin: auto;
  }
}
#mainWrapper #sec10 .images__2column--frame img {
  width: 27rem;
  height: auto;
  display: block;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec10 .images__2column--frame img {
    width: 15.5rem;
  }
}
#mainWrapper #sec10 .images__2column--normal {
  max-width: 37.6rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec10 .images__2column--normal {
    width: 21rem;
    margin: 0 0 0 auto;
  }
}
#mainWrapper #sec10 .images__2column--together {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 86rem;
}
#mainWrapper #sec10 .images__2column--together .images__2column--normal {
  max-width: 43rem;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec10 .images__2column--together .images__2column--normal {
    max-width: 30rem;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec10 .images__2column--together {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
  }
}
#mainWrapper #sec10 .images__1column--left {
  margin: 0 auto 0 10rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec10 .images__1column--left {
    margin: 0 4.8rem;
  }
}
#mainWrapper #sec10 .images__1column--left img {
  width: 45rem;
}
@media screen and (max-width: 767px) {
  #mainWrapper #sec10 .images__1column--left img {
    width: 28rem;
  }
}/*# sourceMappingURL=style.css.map */