/* guide/
----------------------------------- */
#leadColumn {
  padding-left: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 4vw, 150px);
  padding-left: clamp(2rem, 4vw, 150px);
  padding-right: clamp(2rem, 8.5vw, 8.5vw);
  padding-left: clamp(2rem, 8.5vw, 8.5vw);
}
@media screen and (max-width: 767px) {
  #leadColumn {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
#leadColumn {
  max-width: 1200px;
  margin: 0 auto 20rem auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 2.8vw, 4rem) clamp(2rem, 4.2vw, 6rem);
}
#leadColumn .photo01 {
  margin-bottom: 10rem;
}
#leadColumn .photo02 {
  margin-top: 10rem;
}
#leadColumn h2 {
  font-size: clamp(2.4rem, 1.9vw, 2.8rem);
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  margin-bottom: 3rem;
}
#leadColumn p {
  line-height: 2;
}
@media screen and (max-width: 768px) {
  #leadColumn {
    padding-left: clamp(2rem, 8vw, 12rem);
    padding-right: clamp(2rem, 8vw, 12rem);
    padding-right: clamp(2rem, 4vw, 150px);
    padding-left: clamp(2rem, 4vw, 150px);
    padding-right: clamp(2rem, 8.5vw, 8.5vw);
    padding-left: clamp(2rem, 8.5vw, 8.5vw);
    max-width: 1200px;
    margin: 0 auto 10rem auto;
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 768px) and (max-width: 767px) {
  #leadColumn {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media screen and (max-width: 768px) {
  #leadColumn .sec02 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  #leadColumn .sec02 .photo01 {
    order: 2;
  }
  #leadColumn .sec02 .text {
    order: 1;
  }
  #leadColumn .photo01 {
    margin-bottom: 2rem;
  }
  #leadColumn .photo02 {
    margin-top: 2rem;
  }
}

#concept {
  padding-left: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 4vw, 150px);
  padding-left: clamp(2rem, 4vw, 150px);
  padding-right: clamp(2rem, 8.5vw, 8.5vw);
  padding-left: clamp(2rem, 8.5vw, 8.5vw);
}
@media screen and (max-width: 767px) {
  #concept {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
#concept {
  margin-bottom: 20rem;
}
#concept > hgroup {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5em;
  margin-bottom: 3em;
}
#concept > hgroup .en {
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: clamp(3rem, 4.9vw, 7rem);
  display: grid;
  grid-template-columns: 1fr;
}
#concept > hgroup .en::after {
  margin: 0 auto;
  content: "";
  width: 1px;
  height: 1em;
  display: block;
  background: #101010;
}
#concept > hgroup h2 {
  text-align: center;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}
#concept .conceptContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 2.8vw, 4rem);
}
#concept .conceptContainer > section {
  border: 1px solid;
  padding: clamp(1rem, 2.1vw, 3rem);
}
#concept .conceptContainer > section hgroup {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-areas: "numhead h3" "num h3";
  gap: clamp(1rem, 2.8vw, 4rem) clamp(1rem, 2.8vw, 4rem);
  margin-bottom: 3rem;
}
#concept .conceptContainer > section hgroup .numHead {
  grid-area: numhead;
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: clamp(1.6rem, 2.1vw, 3rem);
}
#concept .conceptContainer > section hgroup .num {
  grid-area: num;
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: clamp(6rem, 9.7vw, 14rem);
  margin-block: calc((1cap - 1lh) / 2);
}
#concept .conceptContainer > section hgroup h3 {
  grid-area: h3;
  align-self: center;
  font-size: clamp(2rem, 1.5vw, 2.2rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}
@media screen and (max-width: 768px) {
  #concept {
    margin-bottom: 10rem;
  }
  #concept .conceptContainer {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 2.8vw, 4rem);
  }
  #concept .conceptContainer > section {
    border: 1px solid;
    padding: clamp(1rem, 2.1vw, 3rem);
  }
  #concept .conceptContainer > section hgroup {
    margin-bottom: 1.5rem;
    gap: clamp(1rem, 2.8vw, 4rem) clamp(2rem, 2.8vw, 4rem);
  }
}

#promise {
  display: grid;
  position: relative;
  grid-template-columns: calc(clamp(2rem, 6.9vw, 10rem) * 1.5) minmax(350px, 1fr) 1fr;
  grid-template-areas: "en detail image" "en concept concept";
  gap: clamp(2rem, 2.8vw, 4rem);
  align-items: start;
  padding-left: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 8vw, 12rem);
  padding-right: clamp(2rem, 4vw, 150px);
  padding-left: clamp(2rem, 4vw, 150px);
  padding-right: clamp(2rem, 8.5vw, 8.5vw);
  padding-left: clamp(2rem, 8.5vw, 8.5vw);
}
@media screen and (max-width: 767px) {
  #promise {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media screen and (max-width: 768px) {
  #promise {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-areas: "en detail" "en image" "en concept";
    gap: 3rem clamp(1rem, 2.8vw, 4rem);
  }
}
#promise .vertical_en {
  position: sticky;
  top: 0;
  grid-area: en;
  z-index: 0;
}
#promise .vertical_en p {
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2rem, 6.9vw, 10rem);
  writing-mode: vertical-rl;
}
#promise .vertical_en.is-stuck {
  top: var(--header-h);
}
#promise .column_sec01 {
  grid-area: detail;
}
#promise .image {
  grid-area: image;
}
#promise .column_sec02 {
  grid-area: concept;
}
#promise .column_sec01 h2 {
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: clamp(4rem, 5.6vw, 8rem) max-content;
  align-items: center;
  gap: 1rem;
}
#promise .column_sec01 h2::before {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background: #101010;
}
#promise .lead, #promise .column_sec02 h3 {
  font-size: clamp(1.8rem, 1.9vw, 2.8rem);
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  margin-bottom: 3rem;
}
#promise .column_sec01 p + p, #promise .column_sec02 p + p {
  margin-top: 1.5rem;
}
#promise .column_sec01 .conceptPhoto, #promise .column_sec02 .conceptPhoto {
  max-width: 900px;
  margin-top: 4rem;
}

/* guide/flow
----------------------------------- */
#flowlist {
  position: relative;
}
#flowlist .arrow_box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0 0;
  position: relative;
  display: grid;
  grid-template-areas: "prev counter next";
  gap: 5rem;
}
#flowlist .arrow_box .prev-arrow {
  grid-area: prev;
}
#flowlist .arrow_box .slide-counter {
  grid-area: counter;
}
#flowlist .arrow_box .next-arrow {
  grid-area: next;
}
#flowlist .arrow_box .prev-arrow,
#flowlist .arrow_box .next-arrow {
  display: block;
  width: clamp(4rem, 5.6vw, 8rem);
  aspect-ratio: 1;
  background: #101010;
  border-radius: 50%;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}
#flowlist .arrow_box .prev-arrow:hover,
#flowlist .arrow_box .next-arrow:hover {
  background: #AAA;
}
#flowlist .arrow_box .prev-arrow {
  transform: rotate(180deg);
}
#flowlist .arrow_box .prev-arrow::before,
#flowlist .arrow_box .next-arrow::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid #FFF;
  border-top: 2px solid #FFF;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: rotate(45deg);
}
#flowlist .link {
  position: absolute;
  right: calc(clamp(2rem, 2.8vw, 4rem) + 2rem);
  top: 2rem;
}
#flowlist .link a {
  display: block;
  width: clamp(4rem, 4.2vw, 6rem);
  aspect-ratio: 1;
  background: #101010;
  border-radius: 50%;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}
#flowlist .link a:hover {
  background: #AAA;
}
#flowlist .link a:before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid #FFF;
  border-top: 2px solid #FFF;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: rotate(45deg);
}
#flowlist .link a.back {
  transform: rotate(180deg);
}
#flowlist .link a.back::before {
  right: 1.5rem;
}
#flowlist .link a.back:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 20px;
  border-right: 2px solid #FFF;
  top: 0;
  bottom: 0;
  right: 2rem;
  margin: auto;
}
@media screen and (max-width: 768px) {
  #flowlist .arrow_box {
    gap: 3rem;
  }
  #flowlist .link {
    right: 1.5rem;
    top: 1rem;
  }
  #flowlist .link a.back::before {
    right: 1.5rem;
  }
  #flowlist .link a.back:after {
    position: absolute;
    content: "";
    width: 2px;
    height: 20px;
    border-right: 2px solid #FFF;
    top: 0;
    bottom: 0;
    right: 1.5rem;
    margin: auto;
  }
}

#flowlist {
  width: 100vw;
}
#flowlist .panel {
  padding: 0 clamp(2rem, 2.8vw, 4rem);
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  position: relative;
  padding-top: calc(53.3333333333% - 80px);
}
#flowlist .panel .photo {
  position: absolute;
  aspect-ratio: 96/60;
  top: 0;
  left: 40px;
  right: 40px;
  z-index: 0;
}
#flowlist .panel .box {
  position: relative;
  z-index: 1;
  background: #FFF;
  width: calc(100% - 4rem - clamp(2rem, 5.6vw, 8rem));
  padding: 0 2rem;
  margin: 0 auto;
}
#flowlist .panel .box hgroup {
  text-align: center;
  margin-bottom: 4rem;
}
#flowlist .panel .box hgroup .step {
  font-family: "Castoro Titling", serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  font-size: clamp(2rem, 2.1vw, 3rem);
}
#flowlist .panel .box hgroup .step span {
  font-size: clamp(4rem, 6.9vw, 10rem);
}
#flowlist .panel .box hgroup h2 {
  font-size: clamp(2rem, 1.4vw, 2rem);
}
@media screen and (max-width: 768px) {
  #flowlist .panel {
    padding: 0;
    padding-top: calc(66.6666666667% - 50px);
  }
  #flowlist .panel .photo {
    left: 5px;
    right: 5px;
  }
  #flowlist .panel .box {
    background: #FFF;
    width: calc(100% - 1rem - clamp(2rem, 5.6vw, 8rem));
    padding: 1rem 1rem;
    margin: 0 auto;
  }
  #flowlist .panel .box hgroup {
    margin-bottom: 2rem;
  }
}

/*# sourceMappingURL=guide.css.map */