@charset 'UTF-8';

/* wrapper */
@media screen and (min-width: 1440px) {
  #wrapper {
    max-width: 1400px;
  }
}

/* fv */
#fv h2 {
  flex-direction: column;
}
#fv h2 span {
  display: block;
  font-size: 1.5rem;
}
#wrapper > main #fv .image img {
  -o-object-position: 0 50%;
  object-position: 0 50%;
}

/*  approach  */
#approach {
  padding: 4.4rem calc(50vw - 50%) 0 calc(50vw - 50%);
  margin: 0 calc(50% - 50vw);
  min-height: 110rem;
  box-sizing: border-box;
}
@media screen and (min-width: 1440px) {
  #approach {
    background-image: url(../images/logo_angchair.svg), url(../images/bg_angchair_approach.webp);
    background-position: calc(100% - 6.4rem) 12.6rem, 100% 0%;
    background-repeat: no-repeat;
  }
}
#approach h3 {
  padding: 0.5em 0;
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 2.4rem;
  font-weight: normal;
  line-height: 2;
  letter-spacing: 0.1em;
  color: rgb(53, 53, 53);
}
@media screen and (min-width: 768px) {
  #approach h3 {
    text-align: center;
  }
}
#approach .desc {
  padding: 0.9rem 0;
  font-size: 1.7rem;
  line-height: 2.8;
}
#approach .desc p {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  letter-spacing: calc(0.34 / 17 * 1em);
}
@media screen and (min-width: 768px) {
  #approach .desc p {
    text-align: center;
  }
}

/* approach button */
#approach .button {
  padding: 2.4rem 0;
}
#approach .button a {
  padding: 0 1.4rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 47rem;
  min-height: 7rem;
  border: solid 6px rgb(254, 254, 254);
  box-sizing: border-box;
  outline: 1px solid rgb(96, 96, 96);
  font-family: "Noto Serif JP", serif;
  font-size: 1.7rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  background-image: linear-gradient(to right, rgb(204, 204, 255, 0.4), rgb(72, 173, 241, 0.4));
}
#approach .button a::before,
#approach .button a::after {
  content: "";
  display: inline-block;
  width: 1.8rem;
}
#approach .button a::after {
  height: 1.8rem;
  border-radius: 50%;
  background: rgb(255, 255, 255, 0.6) url(../images/ico_arrow2_bk.svg) no-repeat 50% 50%;
}
#approach .button .notes {
  padding: 1.5em 0;
  font-size: 1.5rem;
  line-height: 2;
}
#approach .button .notes p {
  margin: 0;
  font-weight: 100;
  letter-spacing: calc(0.3 / 15 * 1em);
}
@media screen and (min-width: 768px) {
  #approach .button .notes p {
    text-indent: calc(0.3 / 15 * 1em);
    text-align: center;
  }
}

/* approach brand */
#approach .brand {
  margin: 0 calc(50% - 50vw) 0 auto;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (min-width: 1440px) {
  #approach .brand {
    display: none;
  }
}
#approach .brand .logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}
#approach .brand .image img {
  aspect-ratio: 450 / 750;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 100%;
  object-position: 50% 100%;
}

/* approach .concern */
#approach .concern {
  padding-top: 4.3rem;
  padding-bottom: 4.3rem;
  margin-top: 4.3rem;
  border-top: 1px solid rgb(192, 192, 192);
}
@media screen and (min-width: 768px) {
  #approach .concern {
    padding-top: 8.6rem;
    padding-bottom: 8.6rem;
    margin-top: 8.6rem;
    display: flex;
  }
  #approach .concern h4 {
    flex-basis: 39.5rem;
  }
  #approach .concern ul {
    flex-basis: 80.5rem;
  }
}
@media screen and (min-width: 1440px) {
  #approach .concern {
    padding-left: calc(50vw - 50%);
    padding-left: calc(50vw - 50% + 100px);
    margin-left: calc(50% - 50vw);
    margin-right: 100px;
  }
}
#approach .concern h4 {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 0.2em;
  padding-right: 1em;
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 3rem;
  font-weight: normal;
  line-height: 2;
  letter-spacing: 0.2em;
  text-align: center;
  text-align: justify;
  box-sizing: border-box;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  #approach .concern h4 {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -0.5em;
  }
}
#approach .concern ul {
  padding: 1.2em 0;
  margin: 0;
  list-style: none;
  font-size: 1.6rem;
  line-height: 1.4;
  counter-reset: conum;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  #approach .concern ul {
    padding: 0 0 0 3.6rem;
    border-left: 1px solid rgb(192, 192, 192);
  }
}
@media screen and (min-width: 1024px) {
  #approach .concern ul {
    padding-left: calc(120 / 1200 * 100%);
  }
}
#approach .concern li {
  padding: 1em 0;
  display: flex;
  letter-spacing: calc(2.56 / 16 * 1em);
  counter-increment: conum;
}
@media screen and (min-width: 768px) {
  #approach .concern li:first-of-type {
    padding-top: 0;
  }
  #approach .concern li:last-of-type {
    padding-bottom: 0;
  }
}
#approach .concern li::before {
  content: counter(conum);
  margin-right: 1em;
  display: inline-block;
  width: 1em;
  font-family: "Noto Serif JP", serif;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  flex-shrink: 0;
}
@media screen and (min-width: 1024px) {
  #approach .concern li::before {
    margin-right: 2em;
  }
}

/* guide */
#guide {
  padding: 12.4rem calc(50vw - 50%);
  margin: 0 calc(50% - 50vw);
  background-image: linear-gradient(to right, rgb(255, 255, 255, 0.5), rgb(240, 248, 249, 0.5) 33%, rgb(200, 230, 233, 0.5) 97%, rgb(199, 230, 233, 0.5));
}
@media screen and (min-width: 768px) {
  #guide > section {
    padding: 5.6rem 0 0 0;
  }
}
#guide .container .photo {
  padding-bottom: 6.2rem;
}
#guide .container {
  margin: 0 auto;
  max-width: 140rem;
}
@media screen and (min-width: 768px) {
  #guide .container {
    display: flex;
  }
  #guide .container .photo {
    flex-basis: 49.7rem;
    padding-bottom: 0;
  }
  #guide .container .text {
    padding-left: calc(82 / 1400 * 100%);
    flex-basis: 90.3rem;
    box-sizing: border-box;
  }
}
#guide .photo .image {
  margin: 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 767px) {
  #guide .photo .image img {
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
    object-fit: cover;
  }
}
#guide .text h3 {
  padding: 1.15em 0;
  margin: 0;
  border-top: 1px solid rgb(192, 192, 192);
  border-bottom: 1px solid rgb(192, 192, 192);
  font-family: "Noto Serif JP", serif;
  font-size: 2.1rem;
  font-weight: normal;
  line-height: 1.4;
  letter-spacing: 0.2em;
}
#guide .text .desc {
  padding: 0.75em 0;
  font-size: 1.5rem;
  line-height: 2.5;
}
#guide .text h3 + .desc {
  margin: 1.2em 0;
}
#guide .text .desc:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
}
#guide .text .desc p {
  margin: 0;
  /* font-weight: normal; */
  font-weight: 300;
  font-feature-settings: normal;
  letter-spacing: calc(0.6 / 15 * 1em);
}
#guide .text .desc h4 {
  margin: 1.5rem 0 0 0;
  font-size: 1.7rem;
  /* font-weight: normal; */
  font-weight: 500;
  letter-spacing: calc(0.34 / 17 * 1em);
}

/* guide effect */
#guide .effect {
  padding: 11.8rem 0 0 0;
}
#guide .effect h3 {
  padding: 0.3em 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 10.5rem;
  font-family: "Noto Serif JP", serif;
  font-size: 3rem;
  font-weight: normal;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-align: center;
  color: rgb(20, 182, 201);
  border-top: 1px solid rgb(20, 182, 201);
  border-bottom: 1px solid rgb(20, 182, 201);
  box-sizing: border-box;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(254, 255, 255, 0.53) 13%,
    rgba(254, 255, 255, 0.87) 23%,
    rgb(254, 255, 255) 27%,
    rgb(254, 255, 255) 76%,
    rgba(254, 255, 255, 0.93) 78%,
    rgba(254, 255, 255, 0.76) 83%,
    rgba(254, 255, 255, 0.47) 90%,
    rgba(254, 255, 255, 0.09) 98%,
    rgba(254, 255, 255, 0)
  );
}
#guide .effect ul {
  padding: 4.8rem 0;
  margin: 0 auto;
  list-style: none;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  max-width: 128rem;
}
@media screen and (min-width: 768px) {
  #guide .effect ul {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}
#guide .effect li {
  flex-basis: 45%;
}
@media screen and (min-width: 768px) {
  #guide .effect li {
    flex-basis: calc(206 / 1280 * 100%);
  }
}
#guide .effect li:nth-of-type(n + 3) {
  padding-top: 2rem;
}
@media screen and (min-width: 768px) {
  #guide .effect li:nth-of-type(n + 3) {
    padding-top: 0;
  }
}
#guide .effect h4 {
  padding: 0.21em 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  font-size: calc(18 / 390 * 100vw);
  font-weight: 100;
  line-height: 1.42;
  letter-spacing: calc(0.52 / 26 * 1em);
  text-indent: calc(0.52 / 26 * 1em);
  text-align: center;
  color: rgb(255, 255, 255);
}
@media screen and (min-width: 768px) {
  #guide .effect h4 {
    font-size: min(26 / 1280 * 100vw, 2.6rem);
  }
}
#guide .effect li:nth-of-type(1) h4 {
  background-color: rgb(227, 192, 205);
}
#guide .effect li:nth-of-type(2) h4 {
  background-color: rgb(150, 201, 201);
}
#guide .effect li:nth-of-type(3) h4 {
  background-color: rgb(195, 193, 217);
}
#guide .effect li:nth-of-type(4) h4 {
  background-color: rgb(227, 192, 205);
}
#guide .effect li:nth-of-type(5) h4 {
  background-color: rgb(150, 201, 201);
}
#guide .effect li h4 .no {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Lato, Arial, sans-serif;
  font-size: calc(12 / 390 * 100vw);
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-align: center;
  color: rgb(255, 255, 255, 0.6);
  min-height: calc(50% - 18.46 / 15 * 1em);
}
@media screen and (min-width: 768px) {
  #guide .effect li h4 .no {
    font-size: min(15 / 1280 * 100vw, 1.5rem);
  }
}
#guide .effect li h4 .no .num {
  display: block;
  font-size: calc(37 / 15 * 100%);
}
#guide .effect li .desc {
  padding: 0.385em 0;
  margin: 0 auto;
  font-size: calc(12 / 390 * 100vw);
  line-height: 1.77;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (min-width: 768px) {
  #guide .effect li .desc {
    font-size: min(16 / 1280 * 100vw, 1.6rem);
  }
}
#guide .effect li .desc p {
  margin: 0;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  #guide .effect li .desc p {
    padding-left: 0.05em;
    text-align: center;
  }
}

/* guide .detail */
#guide .detail {
  padding: 0;
}
#guide .detail .cont .txt {
  display: flow-root;
}
@media screen and (min-width: 1440px) {
  #guide .detail .cont {
    display: flex;
  }
  #guide .detail .cont .txt {
    flex-basis: 78rem;
  }
  #guide .detail .cont .ill {
    flex-basis: 62rem;
  }
}
#guide .detail .desc {
  padding: 0.59em 0;
  font-size: 1.7rem;
  line-height: 2.18;
}
@media screen and (min-width: 768px) {
  #guide .detail .cont .desc {
    margin-right: calc(200 / 780 * -100%);
  }
}
#guide .detail .desc p {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.1em;
  word-break: break-all;
}
#guide .detail h3 {
  padding: 0.3em 0;
  margin: 4rem 0 0 0;
  font-family: "Noto Serif JP", serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: rgb(20, 182, 201);
}
#guide .detail dl {
  margin: 0;
  border-bottom: 1px solid rgb(20, 182, 201);
}
#guide .detail dl > div {
  border-top: 1px solid rgb(20, 182, 201);
}
@media screen and (min-width: 768px) {
  #guide .detail dl > div {
    display: flex;
    background: #000;
  }
  #guide .detail dl > div > dt {
    flex-basis: 28rem;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  #guide .detail dl > div > dd {
    flex-grow: 1;
    box-sizing: border-box;
  }
}
#guide .detail dt {
  padding: 0.413em 0.826em;
  font-family: "Noto Serif JP", serif;
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1.826;
  letter-spacing: calc(6.9 / 23 * 1em);
  text-indent: calc(6.9 / 23 * 1em);
  text-align: center;
  color: rgb(20, 182, 201);
  background-color: rgb(242, 242, 242);
}
@media screen and (min-width: 768px) {
  #guide .detail dt {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
#guide .detail dd {
  padding: 0.5em 0.9em;
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-align: center;
  background-color: rgb(255, 255, 255);
}
@media screen and (min-width: 768px) {
  #guide .detail dd {
    padding-top: 2.9rem;
    padding-bottom: 2.9rem;
  }
}
#guide .detail .fee .term {
  padding-right: 0.25em;
  display: inline-block;
  min-width: calc(250 / 21 * 1em);
  -moz-text-align-last: justify;
  text-align-last: justify;
  box-sizing: border-box;
}
#guide .detail .fee .term span {
  letter-spacing: normal;
}
#guide .detail .fee .price {
  font-weight: bold;
  letter-spacing: 0.1em;
  color: rgb(20, 182, 201);
  text-align: right;
  line-height: 1;
  display: inline-block;
}
#guide .detail .fee .num {
  font-size: 2.9rem;
}
#guide .detail .notes {
  padding: 1.5em 0 0.5em 0;
  margin-bottom: 4rem;
  font-size: 1.5rem;
  line-height: 2;
}
#guide .detail .notes p {
  margin: 0;
  font-weight: 100;
  letter-spacing: calc(0.45 / 15 * 1em);
  font-feature-settings: normal;
}
#guide .detail .ill {
  padding-bottom: 4rem;
}
@media screen and (min-width: 1440px) {
  #guide .detail .ill {
    padding-bottom: 0;
  }
}
#guide .detail .ill .image {
  margin: 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (min-width: 1440px) {
  #guide .detail .ill .image {
    margin: 4.6rem -4rem 0 auto;
  }
}

/* guide moreinfo */
#guide .moreinfo {
  padding: 4.6rem 0;
}
#guide .moreinfo h3 {
  padding: 0.35em 0;
  margin: 0;
  font-size: 1.8rem;
  font-weight: 100;
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-align: center;
}

#guide .moreinfo h3::before,
#guide .moreinfo h3::after {
  content: " ";
  display: inline-block;
  vertical-align: text-top;
  width: 3.7rem;
  height: 1px;
  background-color: currentColor;
}
#guide .moreinfo h3::before {
  transform-origin: 0% 0%;
  rotate: 59.0628deg;
}
#guide .moreinfo h3::after {
  transform-origin: 100% 0%;
  rotate: -59.0628deg;
}
#guide .moreinfo ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
@media screen and (min-width: 768px) {
  #guide .moreinfo ul {
    display: flex;
    justify-content: center;
  }
}
#guide .moreinfo li {
  margin: 3rem 0;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  #guide .moreinfo li {
    margin: calc(30 / 1400 * 100%);
    box-sizing: border-box;
  }
}
#guide .moreinfo li a {
  padding: 0 1em;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 37.5rem;
  min-height: 6.4rem;
  border: solid 1px rgb(20, 182, 201);
  box-sizing: border-box;
  font-family: "Noto Serif JP", serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  color: rgb(20, 182, 201);
  background-color: rgb(255, 255, 255);
  transition: 0.3s background-color ease-out;
}
@media screen and (min-width: 768px) {
  #guide .moreinfo li a {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: min(375 / 1280 * 100vw, 37.5rem);
  }
}
#guide .moreinfo li a[href*="//www.instagram.com/"]::after
{
  content: "";
  margin-left: 1em;
  display: inline-block;
  width: 3.1rem;
  height: 3.1rem;
  background: url(../images/ico_insta_4c@3x.webp) no-repeat 50% 50% / contain;
}
@media screen and (min-width: 1280px) {
  #guide .moreinfo li a[href*="//www.instagram.com/"]::after
  {
    margin-right: -3.1rem;
  }
}
#guide .moreinfo li a:hover {
  background-color: rgb(255, 255, 255, 0.6);
}

/* guide notice */
@media screen and (min-width: 768px) {
  #guide .notice {
    display: flex;
    justify-content: space-between;
  }
  #guide .notice > section:nth-of-type(1) {
    flex-basis: 53rem;
  }
  #guide .notice > section:nth-of-type(2) {
    padding-left: 7em;
    flex-basis: 87rem;
    box-sizing: border-box;
  }
}
#guide .notice h3 {
  padding: 0.2em 0;
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 2rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: rgb(20, 182, 201);
}
#guide .notice .desc {
  padding: 0.625em 0;
  font-size: 1.6rem;
  line-height: 2.25;
}
#guide .notice .desc p,
#guide .notice .desc li {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.1em;
}
#guide .notice ul {
  margin: 0;
  list-style: none;
}
@media screen and (min-width: 1280px) {
  #guide .notice ul {
    -moz-column-count: 2;
    column-count: 2;
    -moz-column-gap: 3.2rem;
    column-gap: 3.2rem;
  }
}
#guide .notice li {
  padding-left: 1em;
  text-indent: -1em;
}
@media screen and (min-width: 1280px) {
  #guide .notice li {
    -moz-column-break-inside: avoid;
    break-inside: avoid;
  }
}
#guide .notice li::before {
  content: "-";
  display: inline-block;
  width: 1em;
  text-indent: 0;
}