@charset "utf-8";
/*
Theme Name: 10デザLP01
*/

/*** 共通 ***/
:root {
  --color-gold: #dbdb7e;
  --color-mint: #22fdd3;
  --color-yellow: #fbfc00;
  --color-green: #06c755;
  --color-white: #fff;
  --font-weight-black: 900;
  --font-weight-light: 300;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
}
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  font-family: Jost, "Noto Sans JP";
  font-size: 62.5%;
  scroll-behavior: smooth;
}
body {
  min-width: 375px;
}
a {
  color: #000;
  text-decoration: none;
}
a:hover {
  opacity: 0.7;
  transition: opacity 0.3s;
}
img {
  vertical-align: middle;
  width: 100%;
}
ul {
  list-style: none;
}
.sp-only {
  display: none;
}
.tb-only {
  display: none;
}
.common__inner {
  margin: 0 auto;
  max-width: 118rem;
  width: 100%;
}

/*** 共通：ボタン ***/
.common-button__outer {
  position: relative;
  text-align: center;
  z-index: 2;
}
.common-button__background {
  background-color: #fff;
  border-radius: 0.5rem;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: calc(932 / 1440 * 100vw);
}
.common-button {
  border-radius: 0.5rem;
  display: inline-block;
  margin: 0 auto;
  padding: calc(14 / 1440 * 100vw) calc(13 / 1440 * 100vw)
    calc(27 / 1440 * 100vw);
  position: relative;
  width: 100%;
}
.common-button::before {
  aspect-ratio: 1;
  bottom: calc(17.32 / 1440 * 100vw);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  content: "";
  position: absolute;
  right: calc(13 / 1440 * 100vw);
  width: calc(63.36 / 1440 * 100vw);
}
.common-button::after {
  aspect-ratio: 23 / 18;
  bottom: calc(40 / 1440 * 100vw);
  content: "";
  display: inline-block;
  position: absolute;
  right: calc(33.36 / 1440 * 100vw);
  width: calc(23 / 1440 * 100vw);
}
.common-button__session {
  border-radius: 0.2rem;
  font-size: calc(30 / 1440 * 100vw);
  font-weight: var(--font-weight-black);
  padding: calc(16 / 1440 * 100vw) 0;
  width: 100%;
}
.common-button__text {
  align-items: center;
  display: flex;
  font-weight: var(--font-weight-medium);
  justify-content: center;
  padding-top: calc(27 / 1440 * 100vw);
}
.common-button__easy {
  font-size: calc(35 / 1440 * 100vw);
}
.common-button__brackets {
  margin-left: calc(48.62 / 1440 * 100vw);
  position: relative;
}
.common-button__brackets::before {
  content: "『";
  font-size: calc(35 / 1440 * 100vw);
  font-weight: var(--font-weight-medium);
  left: calc(-49 / 1440 * 100vw);
  position: absolute;
  top: calc(-7 / 1440 * 100vw);
}
.common-button__brackets::after {
  bottom: calc(-7 / 1440 * 100vw);
  content: "』";
  font-size: calc(35 / 1440 * 100vw);
  font-weight: var(--font-weight-medium);
  position: absolute;
  right: calc(-49 / 1440 * 100vw);
}
.common-button__line {
  /*font-size: calc(50 / 1440 * 100vw);*/
  font-size: calc(40 / 1440 * 100vw);
}
.common-button__image {
  margin-left: calc(12.5 / 1440 * 100vw);
  vertical-align: baseline;
  width: calc(40.99 / 1440 * 100vw);
}
.common-button__regist {
  font-size: calc(43 / 1440 * 100vw);
  margin-left: calc(14.3 / 1440 * 100vw);
}
.common-button__hither {
  font-size: calc(30 / 1440 * 100vw);
  margin-left: calc(48.73 / 1440 * 100vw);
}

/*** ヘッダー ***/
.header__menu {
  height: 10rem;
  left: 0;
  letter-spacing: 0.05em;
  padding-inline: 6rem;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}
.header__top {
  position: relative;
}
.header__menu--scroll {
  background-color: #e6e6e6;
  transition: background-color 0.3s;
}
.header__inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}
.header__company {
  align-items: flex-end;
  display: flex;
}
.header__logo {
  display: inline-block;
  width: 23rem;
}
.header__name {
  font-size: 1.4rem;
  font-weight: var(--font-weight-light);
  margin-left: 3.1rem;
}
.header-line__text {
  border-bottom: 1px solid #000;
  padding-bottom: 0.48rem;
  text-align: center;
  color: var(--color-green);
}
.header-line__text:nth-child(2) {
  margin-top: 0.48rem;
}
.header-line__text--small {
  font-size: 1.4rem;
}
.header-line__text--large {
  font-size: 2.5rem;
  font-weight: var(--font-weight-medium);
}
.header-line__image {
  margin-inline: 0.45rem 0.1rem;
  vertical-align: baseline;
  width: 3rem;
}
.header-line__image.--header {
  margin-inline: 0.4rem 0.1rem;
  width: 1.6rem;
}
.header-line__text--medium {
  font-size: 2rem;
  font-weight: var(--font-weight-medium);
  margin-left: 0.629rem;
}
.header__overwrap {
  z-index: 101;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: min(calc(18.2rem / 192rem * 100vw), 18.2rem);
  background: #000;
  display: grid;
  place-items: center;
}
.header__overwrap-text {
  width: min(calc(101rem / 192rem * 100vw), 101rem);
  height: auto;
  aspect-ratio: 1010 / 113;
}
.header__overwrap-text img {
  width: 100%;
}
.header__overwrap-image {
  position: absolute;
  bottom: calc(-10rem / 192rem * 100vw);
  right: calc(5.9rem / 192rem * 100vw);
  width: calc(32.7rem / 192rem * 100vw);
  height: auto;
}

/*** ヘッダー ビジュアル ***/
.header-visual {
  background-color: #f8f8f8;
  position: relative;
  background: url(assets/images/fv-bg.webp) no-repeat center / cover;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1092;
  margin-top: -18.2rem;
}
.header-visual__book {
  position: absolute;
  top: 21.4rem;
  left: 50%;
  transform: translateX(-50%);
  /* width: 91%; */
  width: calc(174.7rem / 192rem * 100vw);
  height: auto;
  aspect-ratio: 1747 / 935;
}
.header-visual__book img {
}
.header-visual__worry {
  position: absolute;
  top: calc(-5.5rem / 192rem * 100vw);
  left: calc(-10rem / 192rem * 100vw);
  width: calc(67rem / 192rem * 100vw);
  height: auto;
  aspect-ratio: 670 / 197;
}
.header-visual__designer {
  position: absolute;
  top: calc(10.1rem / 192rem * 100vw);
  left: calc(0.6rem / 192rem * 100vw);
  width: calc(28rem / 192rem * 100vw);
  height: auto;
  aspect-ratio: 280 / 677;
}
.header-visual__quotation {
  position: absolute;
  top: calc(18.8rem / 192rem * 100vw);
  right: calc(9.6rem / 192rem * 100vw);
  width: calc(17.3rem / 192rem * 100vw);
  height: auto;
  aspect-ratio: 173 / 107;
}

/* .header-visual__freedom {
  color: var(--color-yellow);
  font-size: calc(210 / 1440 * 100vw);
  font-weight: var(--font-weight-medium);
  left: calc(39 / 1440 * 100vw);
  letter-spacing: 0.05em;
  position: absolute;
  text-transform: uppercase;
  top: calc(25 / 1440 * 100vw);
}
.header-visual__freedom--gold {
  color: var(--color-gold);
}
.header-visual__box--yellow1 {
  aspect-ratio: 735 / 151;
  background-color: var(--color-yellow);
  display: inline-block;
  position: absolute;
  right: 0;
  top: calc(185 / 1440 * 100vw);
  width: calc(735 / 1440 * 100vw);
}
.header-visual__box--yellow2 {
  aspect-ratio: 1440 / 195;
  background-color: var(--color-yellow);
  bottom: 0;
  display: inline-block;
  position: absolute;
  right: 0;
  width: 100%;
}
.header-visual__box--line1 {
  background-color: var(--color-yellow);
  display: inline-block;
  height: calc(205 / 1440 * 100vw);
  position: absolute;
  right: calc(49 / 1440 * 100vw);
  top: 0;
  width: 0.3rem;
}
.header-visual__box--line2 {
  background-color: var(--color-yellow);
  display: inline-block;
  height: 0.3rem;
  left: calc(435.5 / 1440 * 100vw);
  position: absolute;
  top: calc(237 / 1440 * 100vw);
  width: calc(491 / 1440 * 100vw);
}
.header-visual__box--line3 {
  background-color: var(--color-yellow);
  display: inline-block;
  height: 0.3rem;
  position: absolute;
  right: calc(416.5 / 1440 * 100vw);
  top: calc(410 / 1440 * 100vw);
  width: calc(85 / 1440 * 100vw);
}
.header-visual__image {
  position: absolute;
  right: 0;
  top: calc(51 / 1440 * 100vw);
  width: 100%;
}
.header-visual__ten {
  color: var(--color-yellow);
  font-size: calc(300 / 1440 * 100vw);
  font-weight: var(--font-weight-medium);
  left: calc(69 / 1440 * 100vw);
  letter-spacing: 0.05em;
  position: absolute;
  top: calc(274 / 1440 * 100vw);
}
.header-visual__des {
  color: #fff;
  font-size: calc(230 / 1440 * 100vw);
  font-weight: var(--font-weight-medium);
  left: calc(305 / 1440 * 100vw);
  letter-spacing: 0.05em;
  position: absolute;
  top: calc(435 / 1440 * 100vw);
}
.header-visual__name--black {
  font-size: calc(20 / 1440 * 100vw);
  font-weight: var(--font-weight-semibold);
  left: calc(755 / 1440 * 100vw);
  letter-spacing: 0.05em;
  position: absolute;
  top: calc(568 / 1440 * 100vw);
}
.header-visual__topic1 {
  left: calc(485.98 / 1440 * 100vw);
  position: absolute;
  top: calc(125.8 / 1440 * 100vw);
  width: calc(452.02 / 1440 * 100vw);
}
.header-visual__topic2 {
  left: calc(182.54 / 1440 * 100vw);
  position: absolute;
  top: calc(449.43 / 1440 * 100vw);
  width: calc(1097.06 / 1440 * 100vw);
}
.header-visual__box--black {
  aspect-ratio: 60 / 700;
  background-color: #000;
  display: inline-block;
  left: 0;
  position: absolute;
  top: 0;
  width: calc(60 / 1440 * 100vw);
}
.header-visual__name--white {
  color: #fff;
  font-size: calc(15 / 1440 * 100vw);
  font-weight: var(--font-weight-medium);
  left: calc(35 / 1440 * 100vw);
  letter-spacing: 0.05em;
  position: absolute;
  top: calc(200 / 1440 * 100vw);
  writing-mode: sideways-lr;
}
.header-visual__scroll {
  background-color: #fff;
  bottom: calc(56.5 / 1440 * 100vw);
  display: inline-block;
  height: calc(98 / 1440 * 100vw);
  left: calc(30 / 1440 * 100vw);
  position: absolute;
  width: 1px;
  animation: scroll 2s infinite;
}
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
} */

/*** ヘッダーボタン ***/
.header-button__background {
  top: calc(-100 / 1440 * 100vw);
  z-index: 1;
}
.header-button {
  /* background-color: #313131; */
  background-color: var(--color-green);
}
.header-button::before {
  background-color: var(--color-white);
}
.header-button::after {
  background: url(assets/images/arrow-right-black.webp) no-repeat center / cover;
}
.header-button__session {
  background-color: var(--color-white);
  color: var(--color-green);
  font-size: calc(25 / 1440 * 100vw);
}
.header-button__text {
  color: var(--color-white);
}

/*** FRONT ***/
.front {
  position: relative;
  z-index: 1;
}

/*** VOICE ***/
.voice {
  letter-spacing: 0.05em;
  padding: 2.5rem 3.6rem 0;
  position: relative;
}
.voice::before {
  background: url(assets/images/repeatgrid1.webp) no-repeat center / cover;
  content: "";
  display: inline-block;
  height: 14.2rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 6rem;
  z-index: -3;
}
.voice::after {
  background: url(assets/images/repeatgrid2.webp) no-repeat center / cover;
  bottom: 0;
  content: "";
  display: inline-block;
  height: 32.2rem;
  position: absolute;
  right: 0;
  width: 6rem;
  z-index: -3;
}
.voice__inner {
  align-items: center;
  background-color: var(--color-gold);
  display: flex;
  width: 100%;
  position: relative;
  z-index: -2;
}
.voice__item:nth-child(1) {
  margin-left: -3.6rem;
}
.voice__image {
  width: 44.4vw;
}
.voice__person {
  align-items: flex-end;
  display: flex;
  justify-content: flex-end;
  margin-top: 1.8rem;
}
.voice__department {
  font-size: 1.4rem;
  line-height: 1.8rem;
}
.voice__name {
  font-size: 3rem;
  font-weight: var(--font-weight-light);
  margin-left: 1.7rem;
}
.voice__item:nth-child(2) {
  margin-left: 8rem;
  overflow-x: hidden;
  padding: 15rem 13.9rem 5.3rem 0;
  position: relative;
}
.voice__item:nth-child(2)::before {
  color: #f8f8f8;
  content: "design";
  font-size: 10.2rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  opacity: 0.3013;
  position: absolute;
  right: 8.1rem;
  text-transform: uppercase;
  top: 12.7rem;
  writing-mode: vertical-lr;
  z-index: -1;
}
.voice__item:nth-child(2)::after {
  -webkit-text-stroke: 1px #fff;
  color: transparent;
  content: "10";
  font-size: 39.6rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  position: absolute;
  right: -7.3rem;
  top: 0.4rem;
  z-index: -1;
}
.voice__title {
  font-size: 8rem;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}
.voice__subtitle {
  font-size: 2rem;
  margin-top: 1.5rem;
}
.voice__text {
  font-size: 1.6rem;
  line-height: 3rem;
  margin-top: 4rem;
}

/*** 10デザ研究所 Lab. ***/
.lab {
  background-color: #383838;
  color: #fff;
  padding: 6rem 5rem 5rem;
  position: relative;
}
.lab::before {
  background-color: #383838;
  content: "";
  display: inline-block;
  height: 7.5rem;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateY(-100%);
  width: 100%;
  z-index: -3;
}
.lab__icon {
  margin-right: 2.3rem;
  vertical-align: text-top;
  width: 8rem;
}
.lab__title {
  font-size: 4.8rem;
}
.lab__title--big {
  font-size: 6.7rem;
}
.lab__block {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  margin-top: 3.7rem;
}
.lab__text {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 2.6rem;
}
.lab__name {
  font-size: 2.5rem;
  font-weight: var(--font-weight-medium);
}
.lab__background {
  background: linear-gradient(
      rgba(251, 252, 0, 0.6111),
      rgba(251, 252, 0, 0.6111)
    ),
    url(assets/images/lab.webp) no-repeat center / cover;
  border-radius: 1rem;
  margin-top: 2.7rem;
  padding: 8.6rem 0;
  position: relative;
}
.lab__background::before,
.lab__background::after {
  font-size: 1.5rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.lab__background::before {
  content: "10Des PRO DESIGN SCHOOL";
  left: -3.4rem;
  writing-mode: sideways-lr;
}
.lab__background::after {
  content: "You Tube CHANNEL";
  right: -3.4rem;
  writing-mode: vertical-lr;
}
.lab__movie {
  background-color: #fff;
  margin: 0 auto;
  width: 55rem;
}

/*** このようなお悩みはありませんか？ ***/
.problem {
  background: linear-gradient(rgba(0, 0, 0, 0.5041), rgba(0, 0, 0, 0.5041)),
    url(assets/images/AdobeStock_553373313.webp) no-repeat center / cover;
  color: #fff;
  height: 85rem;
  padding: 8.4rem 3rem 0;
  text-align: center;
}
.problem__title {
  border-bottom: 1px solid #fff;
  display: inline-block;
  font-size: 2.5rem;
  font-weight: var(--font-weight-medium);
  padding-bottom: 1.95rem;
  position: relative;
}
.problem__title::after {
  -webkit-text-stroke: 1px #fff;
  color: transparent;
  content: "?";
  font-size: 25.2rem;
  font-weight: var(--font-weight-medium);
  position: absolute;
  right: -9.7rem;
  top: -7.6rem;
}
.problem__list {
  display: flex;
  justify-content: space-between;
  margin-top: 8.25rem;
}
.problem__item {
  display: inline-block;
}
.problem__item:nth-child(2) {
  padding-top: 5.775rem;
}
.problem__text {
  border: 3px solid #fff;
  border-radius: 1rem;
  display: inline-block;
  font-size: 2.5rem;
  font-weight: var(--font-weight-medium);
  line-height: 4rem;
  padding: 5rem;
  text-align: left;
}
.problem__text--yellow {
  color: var(--color-yellow);
}
.problem__text {
  position: relative;
}
.problem__text::before {
  font-size: 10rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  opacity: 0.099;
  position: absolute;
  text-transform: uppercase;
}
.problem__text::before {
  bottom: -7.5rem;
  content: "freedom";
  left: 2.3rem;
}
.problem__text--money::before {
  content: "money";
  left: 6.9rem;
  top: -6.5rem;
}
.problem__text::after {
  background-color: #fff;
  content: "";
  display: inline-block;
  height: 1px;
  position: absolute;
  width: 7.341rem;
}
.problem__text::after {
  bottom: 0;
  right: 2.8rem;
  transform: rotate(37.81deg);
}
.problem__text--money::after {
  bottom: 0;
  transform: rotate(-37.81deg);
  left: 2.8rem;
}
.problem__message {
  display: inline-block;
  font-size: 7.1rem;
  font-weight: var(--font-weight-black);
  margin-top: 6rem;
  position: relative;
}
.problem__message::before,
.problem__message::after {
  font-size: 11.2rem;
  font-weight: var(--font-weight-black);
  font-family: "Noto Sans JP";
  position: absolute;
  top: -2.5rem;
}
.problem__message::before {
  content: "“";
  left: -7.5rem;
}
.problem__message::after {
  content: "”";
  right: -7.5rem;
}

/*** COMMIT ***/
.commit {
  margin-top: -14rem;
  padding: 0 3.6rem;
}
.commit__inner {
  background: #fff url(assets/images/repeatgrid3.webp) no-repeat right / contain;
  border-radius: 1rem;
  margin: 0 auto;
  max-width: 136.8rem;
  padding: 8rem 9.5rem;
  width: 100%;
}
.commit__title {
  color: var(--color-gold);
  font-size: 15rem;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.commit__subtitle {
  font-size: 2.5rem;
  font-weight: var(--font-weight-medium);
  margin-top: -1rem;
}
.commit__list {
  margin-top: 5.1rem;
}
.commit__item {
  background-color: #313131;
  border-radius: 0.5rem;
  display: flex;
  gap: 8%;
  padding-left: 2.8rem;
  max-width: 92.1rem;
  width: 91%;
  min-width: 85.8rem;
}
.commit__item:nth-of-type(n + 2) {
  margin-top: 3.2rem;
}
.commit__item:nth-of-type(2) {
  margin-inline: auto;
}
.commit__item:nth-of-type(3) {
  margin-inline: auto 0;
}
.commit__number {
  color: var(--color-gold);
  font-size: 5.6rem;
  font-weight: var(--font-weight-semibold);
  padding-top: 3rem;
}
.commit__number--line {
  position: relative;
}
.commit__number--line::after {
  background-color: var(--color-gold);
  content: "";
  display: inline-block;
  height: 1px;
  position: absolute;
  right: -8rem;
  top: 5rem;
  transform: rotate(-58.63deg);
  width: 10.792rem;
}
.commit__text {
  color: #fff;
  font-size: 2.8rem;
  font-weight: var(--font-weight-medium);
  flex-grow: 1;
  line-height: 3.4rem;
  padding: 3.1rem 0 3.6rem;
}

/*** 一般的なWebデザインスクールと何が違うの？ ***/
.difference {
  padding: 0 3rem 0; /**/
  position: relative;
}
.difference::after {
  aspect-ratio: 1440 / 1175;
  background: linear-gradient(to bottom, #fff 0%, #eaeaea 67%, #e0e0e0 100%);
  bottom: -72.8rem;
  content: "";
  left: 0;
  position: absolute;
  width: 100%;
  z-index: -3;
}

/*** FLOW ***/
.flow {
  background-color: var(--color-gold);
  border-top-left-radius: 50rem;
  margin-top: 14rem;
  padding: 7.6rem 3rem 13.9rem;
  position: relative;
}
.flow::before {
  -webkit-text-stroke: #fff 1px;
  color: transparent;
  content: "10";
  font-size: 39.6rem;
  font-weight: var(--font-weight-medium);
  left: 4rem;
  position: absolute;
  top: -12.5rem;
  z-index: -1;
}
.flow::after {
  color: #f8f8f8;
  content: "design";
  font-size: 10.2rem;
  font-weight: var(--font-weight-medium);
  left: 2.5rem;
  opacity: 0.3013;
  position: absolute;
  text-transform: uppercase;
  top: -12.5rem;
  writing-mode: sideways-lr;
  z-index: -2;
}
.flow__inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 119.85rem;
  width: 100%;
}
.flow__name {
  font-size: 2rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
}
.flow__title {
  color: #fff;
  font-size: 15rem;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.05em;
  margin-top: 4.5rem;
  text-transform: uppercase;
}
.flow__subtitle {
  color: #fff;
  font-size: 2.5rem;
  font-weight: var(--font-weight-medium);
}
.flow__list {
  margin-left: 3rem;
}
.flow__item {
  align-items: center;
  border-bottom: 1px solid #fff;
  display: flex;
  padding: 5.1rem 0 4rem;
  position: relative;
}
.flow__item:nth-of-type(n + 2)::before {
  aspect-ratio: 11 / 15;
  background: url(assets/images/arrow-bottom.webp) no-repeat center / cover;
  content: "";
  left: 50%;
  position: absolute;
  top: 2rem;
  transform: translateX(-50%);
  width: 1.1rem;
}
.flow-image {
  width: 10rem;
}
.flow-image__task {
  width: 4.543rem;
}
.flow-image__feedback {
  width: 4.4rem;
}
.flow-image__portfolio {
  width: 4.45rem;
}
.flow-image__challenge {
  width: 4.8rem;
}
.flow-image__acquisition {
  width: 3.55rem;
}
.flow-text__title {
  font-size: 3.5rem;
  font-weight: var(--font-weight-medium);
}
.flow-text__text {
  font-size: 1.8rem;
  font-weight: var(--font-weight-medium);
  margin-top: 1.6rem;
}

/*** FAQ ***/
.faq {
  background-color: #e6e6e6;
  padding: 4rem 3rem 11.9rem;
}
.faq__title {
  color: var(--color-gold);
  font-size: 15rem;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.05em;
}
.faq__subtitle {
  color: var(--color-gold);
  font-size: 2.5rem;
  font-weight: var(--font-weight-medium);
  margin-top: -1rem;
}
.faq__list {
  margin-top: 4.7rem;
}
.faq__item {
  border-bottom: 1px dashed #fff;
  padding-left: 8.1rem;
  position: relative;
}
.faq__item::before {
  color: #fff;
  content: "Q";
  font-size: 6rem;
  font-weight: var(--font-weight-medium);
  left: 0;
  position: absolute;
  top: 4.1rem;
}
.faq__question {
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.5; /**/
  margin: 0 0 0 auto;
  padding-block: 5.8rem 4rem;
  padding-right: 4rem; /**/
  position: relative;
  cursor: pointer;
}
.faq__question.open {
  padding-bottom: 2rem;
  transition: padding-bottom 0.3s;
}
.faq__question::before,
.faq__question::after {
  background-color: #fff;
  content: "";
  display: inline-block;
  height: 3px;
  position: absolute;
  right: 1.2rem;
  top: 5.8rem;
  width: 1.26rem;
}
.faq__question::after {
  transform: rotate(90deg);
}
.faq__question.open::after {
  display: none;
  transition: display 0.3s;
}
.faq__answer {
  background-color: #fff;
  border-radius: 0.5rem;
  display: none;
  font-size: 1.6rem;
  line-height: 2.8rem;
  margin: 0 0 4rem auto;
  padding: 1.9rem 2.4rem 2.5rem 3rem;
}

/* under */
.under {
  display: none;
}
@media screen and (max-width: 768px) {
  .under {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100px;
    opacity: 0;
    transform: translateY(70px);
    overflow: hidden;
  }

  .under::before {
    content: "";
    position: absolute;
    display: block;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.9)
    );
    width: 100px;
    height: 100px;

    top: -120px;
    left: -120px;

    animation-name: shine-run;
    animation-duration: 3s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;

    pointer-events: none;
  }

  .under__line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 100%;
    height: 85%;
    text-align: center;
  }

  .under__line .green {
    color: var(--color-green);
  }

  .under__line img {
    width: max(25px, 5dvw);
    height: auto;
    margin-inline: auto;
  }

  .under__line p {
    line-height: 1.05;
    text-align: center;
    margin-block-start: 0.35dvw;
  }

  .under__m30 {
    font-family: "Oswald", sans-serif;
    font-weight: 300;
    font-size: max(20px, 3.5dvw);
    transform: translateY(0.44dvw);
    display: inline-block;
  }

  .under__minute {
    font-weight: bold;
    font-size: max(12px, 2dvw);
    display: inline-block;
  }

  .under__free {
    font-size: max(18px, 3.2dvw);
  }

  .under__session {
    font-size: max(12px, 2.5dvw);
  }
}
@media screen and (max-width: 640px) {
  .under {
    height: max(70px, 14dvw);
  }

  .under::before {
    width: max(70px, 14dvw);
    height: max(70px, 14dvw);
    top: -80px;
    left: -80px;
  }
}

@keyframes shine-run {
  0% {
    transform: scale(0) rotate(50deg);
    /* アニメ開始時は大きさ0、50度の傾き */
    opacity: 0;
    /* アニメ開始時は全透過 */
  }
  40% {
    transform: scale(1) rotate(50deg);
    /* 40%まで進む間に大きさを等倍に。傾きは50度のまま*/
    opacity: 1;
    /* 透過しない（しっかり表示される）ように1を設定 */
  }
  100% {
    transform: scale(250) rotate(50deg);
    /* 最後は元の大きさの250倍になるようにする。傾きは50度のまま*/
    opacity: 0;
    /* 全透過になるようにして、徐々に消えるような変化を付ける */
  }
}

@media screen and (max-width: 768px) {
  .under.UpMove {
    -webkit-animation: UpAnime 0.3s forwards;
    animation: UpAnime 0.3s forwards;
  }
}

@media screen and (max-width: 768px) {
  .under.DownMove {
    -webkit-animation: DownAnime 0.5s forwards;
    animation: DownAnime 0.5s forwards;
  }
}

@-webkit-keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(70px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(70px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(70px);
  }
}
@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(70px);
  }
}
@media screen and (max-width: 768px) {
  .under__inner {
    height: inherit;
  }
}

@media screen and (max-width: 768px) {
  .under__item {
    height: inherit;
    background-color: #333333;
  }
}

/*** フッター ***/
footer {
  letter-spacing: 0.05em;
  text-align: center;
}
.footer-button__outer {
  background-color: #000;
  height: calc(195 / 1440 * 100vw);
}
.footer-button__background {
  top: calc(-43 / 1440 * 100vw);
}
.footer-button {
  background-color: var(--color-green);
}
.footer-button::before {
  background-color: #fff;
}
.footer-button::after {
  background: url(assets/images/arrow-right-black.webp) no-repeat center / cover;
}
.footer-button__session {
  background-color: var(--color-white);
  color: var(--color-green);
}
.footer-button__text {
  color: var(--color-white);
}
.footer__money {
  color: var(--color-gold);
  content: "money";
  font-size: calc(114 / 1440 * 100vw);
  font-weight: var(--font-weight-medium);
  position: absolute;
  text-transform: uppercase;
  top: calc(40 / 1440 * 100vw);
  right: calc(85 / 1440 * 100vw);
  writing-mode: vertical-lr;
  line-height: 0;
}
.footer__font {
  aspect-ratio: 1440 / 251;
  position: relative;
}
.footer__box--yellow {
  aspect-ratio: 735 / 151;
  background-color: var(--color-yellow);
  content: "";
  display: inline-block;
  left: 0;
  position: absolute;
  bottom: 0;
  width: calc(735 / 1440 * 100vw);
  z-index: -2;
}
.footer__freedom {
  font-size: calc(210 / 1440 * 100vw);
  font-weight: var(--font-weight-medium);
  left: calc(56 / 1440 * 100vw);
  position: absolute;
  text-align: left;
  text-transform: uppercase;
  top: 0;
  z-index: -1;
}
.footer__freedom--gold {
  color: var(--color-gold);
}
.footer__freedom--yellow {
  color: var(--color-yellow);
}
.footer__topic1 {
  margin: calc(-120.37 / 1440 * 100vw) auto 0;
  width: calc(304.39 / 1440 * 100vw);
}
.footer__topic2 {
  margin: 1.352rem auto 0;
  width: calc(733.71 / 1440 * 100vw);
}
.footer-nav {
  display: flex;
  font-size: 1.4rem;
  font-weight: var(--font-weight-medium);
  justify-content: center;
  margin-top: 6.5rem;
}
.footer-nav__item:nth-child(n + 2) {
  border-left: 1px solid #000;
  margin-left: 2rem;
  padding-left: 2rem;
}
.footer__block {
  border-top: 1px solid #383838;
  margin-top: 5rem;
  padding: 1.5rem 0;
  position: relative;
}
.footer__copyright {
  font-size: 1.4rem;
  font-weight: var(--font-weight-light);
}
.footer__copyright--small {
  font-size: 1.3rem;
}
.footer__top {
  background-color: #000;
  color: #fff;
  display: inline-block;
  font-size: 1.4rem;
  font-weight: var(--font-weight-light);
  height: 100%;
  padding-top: 1.5rem;
  position: absolute;
  right: 0;
  top: 0;
  width: 15rem;
}
.footer__top::after {
  aspect-ratio: 19 / 23;
  background: url(assets/images/arrow-pagetop.webp) no-repeat center / cover;
  content: "";
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.191rem;
}

/*** メディアクエリ ***/
@media screen and (max-width: 1440px) {
  /*** ヘッダー ***/
  .header__overwrap {
    z-index: 101;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(18.2rem / 192rem * 100vw);
    background: #000;
    display: grid;
    place-items: center;
  }
  .header__overwrap-text {
    width: min(calc(101rem / 192rem * 100vw), 101rem);
    height: auto;
    aspect-ratio: 1010 / 113;
  }
  .header__overwrap-text img {
    width: 100%;
  }
  .header__overwrap-image {
    position: absolute;
    bottom: calc(-10rem / 192rem * 100vw);
    right: calc(5.9rem / 192rem * 100vw);
    width: calc(32.7rem / 192rem * 100vw);
    height: auto;
  }

  /*** ヘッダー ビジュアル ***/
  .header-visual {
    background-color: #f8f8f8;
    position: relative;
    background: url(assets/images/fv-bg.webp) no-repeat center / cover;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 1092;
    margin-top: -13.6rem;
  }
  .header-visual__book {
    position: absolute;
    top: 15rem;
    left: 50%;
    transform: translateX(-50%);
    /* width: 91%; */
    width: calc(174.7rem / 192rem * 100vw);
    height: auto;
    aspect-ratio: 1747 / 935;
  }
  .header-visual__book img {
  }
  .header-visual__worry {
    position: absolute;
    top: calc(-6.5rem / 192rem * 100vw);
    left: calc(-4rem / 192rem * 100vw);
    width: calc(62rem / 192rem * 100vw);
    height: auto;
    aspect-ratio: 670 / 197;
  }
  .header-visual__designer {
    position: absolute;
    top: calc(8.1rem / 192rem * 100vw);
    left: calc(0.4rem / 192rem * 100vw);
    width: calc(29rem / 192rem * 100vw);
    height: auto;
    aspect-ratio: 280 / 677;
  }
  .header-visual__quotation {
    position: absolute;
    top: calc(19.2rem / 192rem * 100vw);
    right: calc(9rem / 192rem * 100vw);
    width: calc(16.5rem / 192rem * 100vw);
    height: auto;
    aspect-ratio: 173 / 107;
  }
}