/*
Theme Name: 10design
*/

/*
----------------------------------------
全般
----------------------------------------
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
input,
button,
select,
textarea {
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: inherit;
}
button {
  width: 100%;
  cursor: pointer;
}
textarea {
  resize: none;
}
select::-ms-expand {
  display: none;
}
ul {
  list-style: none;
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #2e2e2e;
  letter-spacing: 0.02em;
}
a,
a:visited {
  text-decoration: none;
  color: inherit;
  word-wrap: break-word;
}
img {
  display: block;
}
.flex {
  display: flex;
}
.text-center {
  text-align: center;
}
.white,
a.white {
  color: white;
}
.yellow {
  color: #fdfe02;
}
.green {
  color: #06c755;
}
.for-max-735,
.for-sp {
  display: none;
}
.hover-opacity {
  transition: all 0.3s;
}
@media (hover: hover) {
  .hover-opacity:hover {
    opacity: 0.8;
  }
}
@media (hover: none) {
  .hover-opacity:active {
    opacity: 0.8;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInText {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.0786;
  }
}
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInLeftText {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 0.0786;
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeUpText {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 0.0786;
    transform: translateY(0);
  }
}
@keyframes enlargement {
  0% {
    opacity: 0;
    scale: 0.4;
  }
  20% {
    opacity: 0.2;
    scale: 0.6;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
/*
----------------------------------------
ヘッダー
----------------------------------------
*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  min-height: 60px;
  background: rgb(51, 51, 51);
  align-items: center;
}
h1,
header img {
  width: 100%;
}
.header-line {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 10.47dvw;
}
.header-line img {
  width: 22%;
  height: auto;
  margin: 0.73dvw auto 0;
}
.header-line p {
  line-height: 1.05;
  text-align: center;
}
.m30 {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 2.2dvw;
  transform: translateY(0.44dvw);
  display: inline-block;
}
.minute {
  font-weight: bold;
  font-size: 1.1dvw;
  display: inline-block;
}
.free {
  font-size: 2dvw;
}
.session {
  font-size: 1.3dvw;
}
/*
----------------------------------------
メイン 背景など
----------------------------------------
*/
.to-youtube {
  position: relative;
}
main::before,
main::after {
  position: fixed;
  content: "";
  top: 0;
  height: 100%;
  width: 15px;
  background-color: rgb(253, 254, 2);
  z-index: 90;
}
main::before {
  left: 0;
}
main::after {
  right: 0;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bg::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 95.1dvw;
  height: calc(95.1dvw * 1.03);
  background: rgb(219, 219, 219);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: -10;
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
}
.bg::after {
  position: absolute;
  content: "";
  top: min(80dvw, 900px);
  right: 0;
  width: 100dvw;
  height: max(calc(100% - 900px), calc(100% - 80dvw));
  background: linear-gradient(
    -49.36deg,
    rgb(253, 254, 2),
    #eaebc4 30%,
    rgb(219, 219, 219) 50%,
    rgb(219, 219, 219)
  );
  clip-path: polygon(0 116.5dvw, 100% 0, 100% 100%, 0 100%);
  z-index: -10;
  opacity: 0;
}
.sessionInView .bg::after {
  animation: fadeIn 0.6s ease-out forwards;
}
.bg img {
  position: absolute;
  top: min(80dvw, 900px);
  right: 0;
  object-fit: cover;
  width: 51.68dvw;
  height: calc(51.68dvw * 1.165);
  clip-path: polygon(100% 0, 100% 100%, 0 calc(51.68dvw * 1.165));
  z-index: -8;
  object-position: bottom;
  opacity: 0;
}
.bg div {
  position: absolute;
  top: min(
    calc(51.68dvw * 1.165 + 80dvw - 50px),
    calc(51.68dvw * 1.165 + 850px)
  );
  right: 0;
  width: 51.68dvw;
  height: 100px;
  background: rgb(253, 254, 2);
  opacity: 0;
}
/*
----------------------------------------
メインビジュアル
----------------------------------------
*/
.main-visual img {
  width: 100%;
  height: auto;
  animation: fadeIn 0.6s ease-out forwards;
  opacity: 0;
}
.fv-max-735 {
  display: none;
}
/*
----------------------------------------
セッション・受講生の声
----------------------------------------
*/
.session-voice {
  position: relative;
  min-height: min(
    calc(51.68dvw * 1.165 + 80dvw - 50px - 49.04dvw),
    calc(51.68dvw * 1.165 + 850px - 49.04dvw)
  );
  padding-top: 118px;
}
.session-voice::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 34.04dvw;
  height: 6.66dvw;
  max-height: 91px;
  background: rgb(253, 254, 2);
  animation: fadeIn 0.6s ease-out forwards;
  opacity: 0;
}
.bg-text {
  position: absolute;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  opacity: 0.0786;
  top: 71px;
  left: 8.78dvw;
  font-size: 17.8dvw;
  z-index: -3;
  line-height: 1.02;
  opacity: 0;
}
.session-bg {
  position: relative;
  width: 100%;
}
.session-bg::before {
  position: absolute;
  content: "";
  top: -118px;
  left: 0;
  width: 34.04dvw;
  height: 34.04dvw;
  background: linear-gradient(
    135.85deg,
    rgb(253, 254, 2),
    rgb(253, 254, 2) 10%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0)
  );
  z-index: -2;
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
}
.line-top {
  position: relative;
  margin: 0 auto;
  width: 46.05dvw;
  height: auto;
  display: block;
  opacity: 0;
}
.line-top::after {
  position: absolute;
  content: "";
  top: calc(8 * 46.05dvw / 629);
  left: 0;
  width: calc(227 * 46.05dvw / 629);
  height: calc(207 * 46.05dvw / 629);
  background: #06c755;
  z-index: -1;
}
.line-top img {
  width: 100%;
  height: auto;
}
.voice {
  margin: min(16.6dvw, 227px) 0 0 10.47dvw;
  opacity: 0;
}
.voice-heading {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  margin-bottom: 6px;
  font-weight: bold;
  font-size: 4rem;
  letter-spacing: 0.08em;
}
.voice-heading span {
  font-size: 1.5rem;
  background: rgb(46, 46, 46);
  padding: 2px 7px;
  margin: 19px 0 16px 8px;
  display: block;
  width: fit-content;
}
.voice-text {
  font-size: 1.7rem;
  line-height: calc(41 / 17);
}
/*
----------------------------------------
youtube
----------------------------------------
*/
.youtube {
  margin-top: clamp(0px, calc(7.32dvw + 109px), 156px);
  position: relative;
  padding-bottom: 100px;
}
.youtube::before {
  content: "10DESIGN\00a0 RESEARCH\00a0 INSTITUTE";
  position: absolute;
  top: calc(-8.4dvw * 0.68);
  left: 0;
  width: 100%;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  opacity: 0;
  font-size: 8.4dvw;
  text-align: center;
  line-height: 1.48;
}
.youtubeInView .youtube::before {
  animation: fadeUpText 0.6s ease-out forwards;
}
.youtube-heading {
  color: #3b4043;
  font-size: 6.5rem;
  margin: 0 0 65px calc(10.47dvw - 32px);
  opacity: 0;
}
.youtube-heading span {
  margin-left: 32px;
}
.youtube-text {
  font-size: 1.7rem;
  line-height: calc(41 / 17);
  margin-left: 10.47dvw;
  opacity: 0;
}
#channel {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 3.1rem;
  line-height: 1;
  margin: 62px 0 0 10.47dvw;
  opacity: 0;
}
.channel-name {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 8.5rem;
  letter-spacing: 0.08em;
  margin: 20px 0 50px 10.47dvw;
  padding-left: 58px;
  line-height: 1;
  border-bottom: 5px solid #2e2e2e;
  width: fit-content;
  opacity: 0;
}
.swiper {
  z-index: 91;
  opacity: 0;
}
.swiper-slide {
  width: 36.6dvw;
}
.swiper-slide img {
  width: 100%;
  height: auto;
}
.swiper-button-prev,
.swiper-button-next {
  display: none;
}
/*
.swiper-button-prev,
.swiper-button-next {
  width: 37px;
  height: 37px;
  transform: translateY(-50%);
  margin: 0;
}
.swiper-button-prev {
  left: 10.47dvw;
}
.swiper-button-next {
  right: 10.47dvw;
}
.swiper-button-prev::before,
.swiper-button-next::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 33px;
  height: 33px;
  background: rgb(46, 46, 46);
  border: 2px solid white;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -64%);
  width: 18px;
  height: 8px;
  background: rgb(253, 254, 2);
}
.swiper-button-prev::after {
  clip-path: polygon(100% 6px, 50% 6px, 50% 0, 0 100%, 100% 100%);
}

.swiper-button-next::after {
  clip-path: polygon(0 6px, 50% 6px, 50% 0, 100% 100%, 0 100%);
}
*/
.youtube > a {
  font-size: 2.5rem;
  padding: 22px 81px 22px 37px;
  background: rgb(255, 64, 86);
  border: 1px solid white;
  border-radius: 43px;
  position: relative;
  display: block;
  width: fit-content;
  margin: 99px auto 0;
  opacity: 0;
}
.youtube > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 36px;
  transform: translateY(-50%);
  width: 36px;
  height: 16px;
  background: white;
  clip-path: polygon(0 12px, 50% 12px, 50% 0, 100% 100%, 0 100%);
  transition: all 0.3s;
}
@media (hover: hover) {
  .youtube > a:hover::after {
    transform: translateY(-50%) translateX(5px);
  }
}
@media (hover: none) {
  .youtube > a:active::after {
    transform: translateY(-50%) translateX(5px);
  }
}
/*
----------------------------------------
お悩み・お約束
----------------------------------------
*/
.concerns-promises {
  background: rgb(46, 46, 46);
  padding: 129px 10.25dvw 97px;
  position: relative;
  z-index: -5;
  min-height: calc(89.75dvw * 2311 / 2406);
  opacity: 0;
}
.concerns-promises > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 89.75dvw;
  height: auto;
  z-index: -2;
  opacity: 0;
}
.concerns-promises::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 51.68dvw;
  height: 30px;
  background: rgb(253, 254, 2);
  z-index: -1;
  opacity: 0;
}
.concernsInView .concerns-promises::before {
  animation: fadeIn 0.6s ease-out forwards;
}
.concerns {
  max-width: 100%;
  width: 575px;
  margin-left: auto;
  position: relative;
  opacity: 0;
}
.concerns h2 {
  margin: 0 36px 50px 58px;
}
.concerns h2 span {
  display: block;
  padding: 6px 12px;
  background: rgb(253, 254, 2);
  color: #4a4a4a;
  font-size: 4rem;
  width: fit-content;
}
.concerns h2 span:last-child {
  margin-left: auto;
}
.concerns p {
  padding: 20px;
  font-size: 1.7rem;
  line-height: calc(30 / 17);
  position: relative;
  width: fit-content;
}
.concerns p::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 1px solid white;
  border-radius: 10px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    0 calc(50% + 9.7px),
    10px calc(50% + 9.7px),
    10px calc(50% - 11.6px),
    1px calc(50% - 11.6px),
    0 calc(50% - 10.5px)
  );
}
.concerns p::after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  left: -21.3px;
  width: 22px;
  height: 22px;
  background: white;
  clip-path: polygon(
    100% 0,
    0 100%,
    100% 100%,
    100% calc(100% - 0.67px),
    1.67px calc(100% - 0.67px),
    calc(100% + 0.67px) 0.47px
  );
}
.concerns p:first-child {
  margin-left: 22px;
}
.concerns p:last-child {
  margin: 30px 0 110px auto;
}
.promises {
  position: relative;
}
.promises h2 {
  font-size: 6.5rem;
  letter-spacing: 0.1em;
  font-weight: bold;
  margin-bottom: 36px;
  opacity: 0;
}
.promise {
  padding: 14px 13.5dvw;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  letter-spacing: 0.08em;
  font-size: 2.9rem;
  font-weight: bold;
  background: linear-gradient(to right, #dbdbdb, #eaebc4, #fdfe02);
  width: fit-content;
  margin: 0 auto 36px;
  opacity: 0;
}
.promise1,
.promise2,
.promise3 {
  opacity: 0;
}
.left {
  position: relative;
  height: calc(0.59 * 18.08dvw);
}
.left::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 18.08dvw;
  border-top: 2px solid #fdfe02;
  transform: rotate(36deg);
  transform-origin: left top;
  display: block;
}
.left p:first-child {
  writing-mode: vertical-lr;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: max(2.34dvw, 18px);
  line-height: 1;
  margin-left: calc(0.81 * 18.08dvw);
}
.left p:last-child {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 3.4rem;
  margin: 0 11px 0 5px;
}
.promise-text h3 {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  letter-spacing: 0.08em;
  font-size: 4rem;
  font-weight: bold;
  border-bottom: 2px solid #fdfe02;
  margin-bottom: 13px;
}
.promise-text p {
  font-size: 2rem;
  line-height: 2.05;
  color: #dbdbdb;
}
.promise-text p span {
  display: inline-block;
}
.promise2 {
  margin: 33px 0 0 7.32dvw;
}
.promise3 {
  margin: 33px 0 0 14.64dvw;
}
/*
----------------------------------------
何が違うのか・学習の流れ
----------------------------------------
*/
.diff-flow {
  background: rgb(231, 231, 231);
  padding-top: 95px;
  position: relative;
  z-index: -10;
}
.diff-flow::before {
  width: 100%;
  height: calc(100% - 325px);
  position: absolute;
  content: "";
  top: 325px;
  left: 0;
  background: linear-gradient(
    -139.14deg,
    #dbdbdb,
    #dbdbdb 50%,
    #eaebc4 85%,
    rgba(253, 254, 2, 0.5)
  );
  clip-path: polygon(0 0, 100% 115.6dvw, 100% 100%, 0 100%);
  z-index: -5;
  opacity: 0;
}
.diffInView .diff-flow::before {
  animation: fadeIn 0.6s ease-out forwards;
}
.diff,
.flow {
  position: relative;
  padding: 0 10.47dvw;
}
.diff::before {
  content: "DIFFERENCES\00a0 AND\00a0 COMPARISONS";
  position: absolute;
  top: -61px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  opacity: 0;
  font-size: 7.9dvw;
}
.diffInView .diff::before {
  animation: fadeInText 0.6s ease-out forwards;
}
.diff h2,
.flow h2 {
  font-size: 6.5rem;
  opacity: 0;
}
.diff img {
  width: 100%;
  height: auto;
  margin: 68px auto 72px;
  opacity: 0;
}
.flow {
  padding-bottom: 89px;
}
.flow::before {
  position: absolute;
  content: "";
  top: 9px;
  right: 0;
  width: 51.68dvw;
  height: 56px;
  background: rgb(253, 254, 2);
  opacity: 0;
}
.flowInView .flow::before,
.flowInView .flow img {
  animation: fadeIn 0.6s ease-out forwards;
}
.flow img {
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  width: 60.4dvw;
  max-width: 870px;
  height: calc(60.4dvw * 1.165);
  max-height: calc(870px * 1.165);
  background: rgb(231, 231, 231);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0;
}
.flow ul {
  margin-top: 56px;
  padding-left: min(5.4dvw, 75px);
  counter-reset: listnum;
  opacity: 0;
}
.flow h3 {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  letter-spacing: 0.08em;
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 4px;
  position: relative;
}
.flow h3::before {
  counter-increment: listnum;
  content: "0" counter(listnum);
  position: absolute;
  left: max(-5.4dvw, -75px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 4.4rem;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
}
.flow p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 1.7rem;
  line-height: calc(41 / 17);
  color: #4a4a4a;
}
.flow ul > li + li {
  margin-top: 45px;
}
/*
----------------------------------------
よくある質問
----------------------------------------
*/
.faq {
  position: relative;
  padding: 0 10.47dvw;
}
.faq::before {
  content: "FREQUENTLY\00a0 ASKED\00a0 QUESTIONS";
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  opacity: 0;
  font-size: 8.4dvw;
}
.faqInView .faq::before {
  animation: fadeInText 0.6s ease-out forwards;
}
.faq h2 {
  font-size: 6.5rem;
  margin: 112px 0 56px;
  opacity: 0;
}
.faq ul {
  border-top: 1px solid #707070;
  margin-bottom: 100px;
  opacity: 0;
}
.faq li {
  border-bottom: 1px solid #707070;
}
.question {
  padding: 20px 0;
  justify-content: space-between;
  align-items: center;
  position: relative;
  letter-spacing: inherit;
}
.question-mark {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 35px;
  height: 35px;
  width: 35px;
  background: rgb(46, 46, 46);
  position: absolute;
  top: 20px;
  left: 0;
}
.question-text {
  font-size: 2.4rem;
  font-weight: bold;
  color: #4a4a4a;
  max-width: calc(100% - 60px - 55px);
  text-align: left;
  margin-left: 55px;
}
.question-btn {
  margin-left: auto;
  background: rgb(46, 46, 46);
  border-radius: 50%;
  height: 30px;
  width: 30px;
  position: relative;
}
.question-btn::before,
.question-btn::after {
  content: "";
  background: #fdfe02;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1px;
}
.question-btn::before {
  height: 2px;
  width: 15px;
}
.question-btn::after {
  height: 15px;
  width: 2px;
  transition: all 0.4s;
}
.faq li p {
  border-top: 1px solid #707070;
  padding: 12px 5px 12px 60px;
  font-size: 1.7rem;
  line-height: calc(41 / 17);
  color: #4a4a4a;
  position: relative;
  display: none;
}
.faq li p::before {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 35px;
  height: 35px;
  width: 35px;
  color: #2e2e2e;
  background: #fdfe02;
  position: absolute;
  content: "A";
  top: 20px;
  left: 0;
  text-align: center;
}
.open .question-btn::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
/*
----------------------------------------
フッター
----------------------------------------
*/
#js__scroll-top-btn {
  position: fixed;
  right: 35px;
  bottom: 20px;
  width: 41px;
  height: 41px;
  border: 1px solid #fdfe02;
  background: rgb(46, 46, 46);
  z-index: 99;
}
#js__scroll-top-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 19px;
  height: 14px;
  background: rgb(253, 254, 2);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  z-index: 100;
}
footer {
  padding: 60px 10.47dvw 17px;
  background: rgb(46, 46, 46);
}
.line {
  position: relative;
  margin: 0 auto 86px;
  width: 46.05dvw;
  height: auto;
  display: block;
}
.line::after {
  position: absolute;
  content: "";
  top: calc(3 * 46.05dvw / 629);
  left: 0;
  width: calc(215 * 46.05dvw / 629);
  height: calc(200 * 46.05dvw / 629);
  background: #06c755;
}
.line img {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}
.footer-menu {
  justify-content: space-between;
  align-items: center;
}
.footer-menu img {
  width: 27.8dvw;
  height: auto;
}
.footer-menu ul {
  gap: 30px;
}
.footer-menu li a {
  font-size: 1.7rem;
  line-height: calc(50 / 17);
  position: relative;
}
.footer-menu li + li a::before {
  position: absolute;
  height: 17px;
  top: 50%;
  left: -14.5px;
  transform: translateY(-50%);
  border-left: 1px solid white;
  content: "";
}
footer p {
  text-align: right;
  font-size: 1.7rem;
  line-height: 1;
  margin-top: 7px;
}
/*
----------------------------------------
レスポンシブ（タブレット）
----------------------------------------
*/
@media screen and (max-width: 1022px) {
  /* 全般 */
  html {
    font-size: 50%;
  }
  /* メイン 背景など */
  .bg div {
    height: 60px;
    top: calc(51.68dvw * 1.165 + 80dvw - 30px);
  }
  /* セッション・受講生の声 */
  .session-voice {
    min-height: calc(51.68dvw * 1.165 + 80dvw - 30px - 49.04dvw);
    padding-top: 90px;
  }
  .session-bg::before {
    top: -90px;
  }
  .bg-text {
    top: 50px;
  }
  .voice-text {
    line-height: 2;
  }
  .voice-text-under {
    max-width: 49%;
  }
  .voice-text-under br {
    display: none;
  }
  .voice-text-under span {
    display: inline-block;
  }
  /* youtube */
  .youtube {
    margin-top: clamp(0px, calc(7.32dvw + 109px), 100px);
  }
  .youtube-heading {
    margin-bottom: 45px;
  }
  #channel {
    margin-top: 40px;
  }
  .channel-name {
    margin: 15px 0 30px 10.47dvw;
  }
  .swiper-slide {
    width: 50dvw;
  }
  .youtube > a {
    margin-top: 70px;
  }
  /* お悩み・お約束 */
  .concerns-promises {
    padding: 90px 10.25dvw 70px;
  }
  .concerns {
    width: 460px;
  }
  .concerns h2 {
    margin-bottom: 30px;
  }
  .concerns p:last-child {
    margin: 20px 0 60px auto;
  }
  .promises h2,
  .promise {
    margin-bottom: 30px;
  }
  .promise {
    padding: 14px 10dvw;
  }
  .left p:last-child {
    font-size: 3.2rem;
  }
  .promise-text {
    max-width: 42.2dvw;
  }
  .promise-text h3 {
    font-size: 3.5rem;
  }
  .promise-text p br {
    display: none;
  }
  .promise2,
  .promise3 {
    margin-top: 30px;
  }
  /* 何が違うのか・学習の流れ */
  .diff-flow {
    padding-top: 50px;
  }
  .diff::before {
    top: -36px;
  }
  .diff img {
    margin: 40px auto;
  }
  .flow {
    padding-bottom: 50px;
  }
  .flow img {
    width: 50.4dvw;
    height: calc(50.4dvw * 1.165);
  }
  .flow ul {
    margin-top: 40px;
    padding-left: 50px;
  }
  .flow h3::before {
    left: -50px;
  }
  .flow ul > li + li {
    margin-top: 30px;
  }
  /* よくある質問 */
  .faq h2 {
    margin: 50px 0 30px;
  }
  .faq::before {
    top: -50px;
  }
  /* フッター */
  footer {
    padding-top: 50px;
  }
  .line {
    margin-bottom: 60px;
  }
  .footer-menu ul {
    gap: 20px;
  }
  .footer-menu li + li a::before {
    left: -9.5px;
  }
  .footer-menu li a,
  footer p {
    font-size: 1.5rem;
  }
}
/*
----------------------------------------
レスポンシブ（~500px）
----------------------------------------
*/
@media screen and (max-width: 735px) {
  /* 全般 */
  html {
    font-size: 37.5%;
  }
  .no-max-735 {
    display: none;
  }
  .for-max-735 {
    display: block;
  }
  /* ヘッダー */
  .header-line img {
    position: absolute;
    top: 3px;
    left: 3px;
    margin: 0;
    width: 25%;
  }
  .header-line {
    width: 9.3dvw;
  }
  .header-line p {
    text-align: right;
    margin-right: 3px;
  }
  .m30 {
    font-size: 2.93dvw;
  }
  .minute {
    font-size: 2.66dvw;
  }
  .free {
    display: block;
    font-size: 3.6dvw;
  }
  /* メイン 背景など */
  .bg::before {
    width: 100%;
    height: 51.7dvw;
    clip-path: none;
  }
  .bg::after {
    top: calc(120dvw + 600px);
    width: 100dvw;
    height: calc(100% - 120dvw - 600px);
  }
  .bg img {
    top: calc(120dvw + 600px);
    width: 70dvw;
    height: calc(70dvw * 1.165);
    clip-path: polygon(100% 0, 100% 100%, 0 calc(70dvw * 1.165));
  }
  .bg div {
    top: calc(70dvw * 1.165 + 120dvw + 600px - 20px);
    height: 40px;
    width: 70dvw;
  }
  /* メインビジュアル */
  .fv-max-735 {
    display: block;
  }
  .fv-pc {
    display: none;
  }
  /* セッション・受講生の声 */
  .session-voice {
    min-height: calc(70dvw * 1.165 + 120dvw + 600px - 20px - 151.46dvw);
    padding-top: 80px;
  }
  .session-bg::before {
    top: -80px;
  }
  .session-bg::after {
    position: absolute;
    content: "";
    top: -80px;
    left: 0;
    width: 50dvw;
    height: 50dvw;
    background: rgb(219, 219, 219);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: -4;
  }
  .line-top {
    width: 60dvw;
  }
  .line-top::after {
    top: calc(8 * 60dvw / 629);
    width: calc(227 * 60dvw / 629);
    height: calc(207 * 60dvw / 629);
  }
  .voice {
    margin-right: 10.47dvw;
  }
  .voice-heading {
    font-size: 6.5rem;
  }
  .voice-heading span {
    font-size: 2rem;
  }
  .voice-text {
    font-size: 2.2rem;
  }
  .voice-text-under {
    max-width: 75%;
  }
  /* youtube */
  .youtube-text {
    font-size: 2.5rem;
    margin-right: 10.47dvw;
  }
  /* お悩み・お約束 */
  .concerns-promises > img {
    width: 80dvw;
  }
  .concerns {
    width: 340px;
  }
  .concerns h2 {
    margin-right: 0;
  }
  .concerns p {
    max-width: 80%;
    padding: 10px 20px;
    font-size: 2.4rem;
  }
  .concerns p:nth-child(2) {
    margin-left: auto;
    margin-right: 10%;
  }
  .promise {
    padding: 12px 6dvw;
  }
  .promise-text {
    max-width: 100%;
  }
  .promise-text h3 {
    font-size: 3.2rem;
  }
  .promise-text p {
    font-size: 2.4rem;
  }
  .promise2,
  .promise3 {
    margin-left: 0;
  }
  /* 何が違うのか・学習の流れ */
  .diff-flow::before {
    height: calc(100% - 225px);
    top: 225px;
  }
  .diff h2,
  .flow h2 {
    font-size: 5.7rem;
  }
  .diff::before {
    top: -26px;
  }
  .flow {
    padding-bottom: 150px;
  }
  .flow img {
    width: calc(50.4dvw - (30px / 1.165));
    height: calc(50.4dvw * 1.165 - 30px);
  }
  .flow::before {
    width: 48dvw;
    height: 40px;
  }
  .flow ul {
    padding-left: 40px;
  }
  .flow h3::before {
    left: -40px;
  }
  .flow li p {
    font-size: 2.4rem;
  }
  /* よくある質問 */
  .faq::before {
    top: -26px;
  }
  .faq ul {
    margin-bottom: 60px;
  }
  .question-mark,
  .faq li p::before {
    font-size: 2.8rem;
  }
  .faq li p {
    font-size: 2.4rem;
  }
  /* フッター */
  #js__scroll-top-btn {
    width: 36px;
    height: 36px;
  }
  footer {
    padding-top: 30px;
  }
  .line {
    margin-bottom: 40px;
    width: 60dvw;
  }
  .line::after {
    top: calc(3 * 60dvw / 629);
    width: calc(215 * 60dvw / 629);
    height: calc(200 * 60dvw / 629);
  }
  .footer-menu {
    flex-direction: column;
  }
  .footer-menu img {
    width: 60dvw;
  }
  .footer-menu li a,
  footer p {
    font-size: 2.2rem;
  }
  .footer-menu > a {
    margin-bottom: 20px;
  }
  footer p {
    text-align: center;
  }
}
/*
----------------------------------------
レスポンシブ（スマートフォン）
----------------------------------------
*/
@media screen and (max-width: 499px) {
  /* 全般 */
  .for-sp {
    display: block;
  }
  /* メイン 背景など */
  main::before,
  main::after {
    width: 10px;
  }
  .bg::after {
    top: calc(100dvw + 720px);
    width: 100dvw;
    height: calc(100% - (100dvw + 720px));
  }
  .bg img {
    top: calc(100dvw + 720px);
  }
  .bg div {
    top: calc(70dvw * 1.165 + 100dvw + 720px - 20px);
  }
  /* ヘッダー */
  .m30 {
    font-size: 2.5dvw;
  }
  .minute {
    font-size: 2.4dvw;
  }
  /* セッション・受講生の声 */
  .session-voice {
    min-height: calc(70dvw * 1.165 + 100dvw + 720px - 20px - 151.46dvw);
    padding-top: 80px;
  }
  .voice-heading {
    flex-direction: column;
    font-size: 6rem;
  }
  .voice-text br {
    display: none;
  }
  /* youtube */
  .youtube {
    margin-top: 80px;
    padding-bottom: 80px;
  }
  .youtube-heading {
    font-size: 4rem;
    margin-left: 18px;
    margin-bottom: 25px;
  }
  .youtube-heading span {
    margin-left: 18px;
  }
  .youtube-text {
    font-size: 2.4rem;
  }
  .youtube-text br {
    display: none;
  }
  .channel-name {
    padding-left: 20px;
    font-size: 6rem;
  }
  .swiper-button-prev,
  .swiper-button-next {
    width: 30px;
    height: 30px;
  }
  .swiper-button-prev::before,
  .swiper-button-next::before {
    width: 26px;
    height: 26px;
  }
  .swiper-button-prev::after,
  .swiper-button-next::after {
    width: 15px;
    height: 6px;
  }
  .swiper-button-prev::after {
    clip-path: polygon(100% 4.5px, 50% 4.5px, 50% 0, 0 100%, 100% 100%);
  }
  .swiper-button-next::after {
    clip-path: polygon(0 4.5px, 50% 4.5px, 50% 0, 100% 100%, 0 100%);
  }
  .youtube > a {
    padding: 12px 60px 12px 20px;
    font-size: 2.4rem;
    margin-top: 50px;
  }
  .youtube > a::after {
    right: 20px;
    width: 30px;
    height: 12px;
    clip-path: polygon(0 9px, 50% 9px, 50% 0, 100% 100%, 0 100%);
  }
  /* お悩み・お約束 */
  .concerns-promises {
    padding: 70px 10.25dvw 50px;
  }
  .concerns {
    width: 230px;
  }
  .concerns h2 span {
    padding: 3px 9px;
    font-size: 2.6rem;
  }
  .concerns p::before {
    clip-path: polygon(
      0 0,
      10px 0,
      10px 2px,
      29px 2px,
      29px 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }
  .concerns p::after {
    top: -8.3px;
    left: 8px;
    width: 22px;
    height: 18px;
    clip-path: polygon(
      0 0,
      100% 100%,
      calc(100% - 1px) 100%,
      1px 2px,
      3px 100%,
      2px 100%
    );
  }
  .concerns p:last-child {
    margin-top: 45px;
  }
  .promises h2 {
    font-size: 5.5rem;
  }
  .promise {
    text-align: center;
  }
  .left::before {
    display: none;
  }
  .left p:first-child {
    margin: 0;
  }
  .promise-text h3 {
    font-size: 3rem;
  }
  /* 何が違うのか・学習の流れ */
  .diff-flow {
    padding-top: 30px;
  }
  .diff::before {
    top: -18px;
  }
  .diff h2,
  .flow h2 {
    font-size: 3.8rem;
  }
  .flow::before {
    height: 30px;
    top: 6px;
  }
  .flow ul {
    margin-top: 30px;
    padding-left: 30px;
  }
  .flow h3 {
    font-size: 3.4rem;
  }
  .flow h3::before {
    left: -30px;
    font-size: 3.4rem;
  }
  .flow ul > li + li {
    margin-top: 20px;
  }
  /* よくある質問 */
  .faq::before {
    top: -16px;
  }
  .faq h2 {
    font-size: 6rem;
    margin-top: 30px;
  }
  .question-text {
    max-width: calc(100% - 50px - 55px);
    font-size: 2.4rem;
  }
  /* フッター */
  #js__scroll-top-btn {
    right: 30px;
  }
  .footer-menu ul {
    flex-direction: column;
    gap: 0;
    text-align: center;
  }
  .footer-menu li + li a::before {
    display: none;
  }
  .footer-menu li a,
  footer p {
    font-size: 2.3rem;
  }
  footer p {
    margin-top: 15px;
  }
}
/*
----------------------------------------
特商法 プライバシーポリシー
----------------------------------------
*/
.page-policy {
  background: rgb(231, 231, 231);
  position: relative;
  padding-bottom: 50px;
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
}
.policy-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100dvw;
  height: calc(213px + 116.5dvw);
  background: linear-gradient(
    -139.36deg,
    #f7f933,
    #eaebc4 12%,
    #ddddd8 22%,
    #dbdbdb
  );
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 213px);
}
.notation h2,
.policy h2 {
  font-size: 6.5rem;
}
.notation {
  position: relative;
  overflow: hidden;
  padding: 0 10.47dvw;
}
.notation::after {
  content: "NOTATION\00a0 BASED\00a0 ON\00a0 THE\00a0 SPECIFIED\00a0 COMMERCIAL\00a0 TRANSACTIONS\00a0 LAW";
  font-size: 8.4dvw;
  line-height: calc(172 / 116);
  position: absolute;
  top: 106px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.0786;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
}
.notation h2 {
  margin-top: 196px;
}
.notation dl {
  margin-top: 144px;
  color: #4a4a4a;
  font-size: 1.7rem;
  line-height: calc(50 / 17);
}
.notation dl div {
  border-bottom: 1px solid #707070;
  align-items: center;
}
.notation dt {
  width: 237px;
  font-weight: bold;
}
.notation dd {
  width: calc(100% - 237px);
  position: relative;
  min-height: 50px;
}
.notation dd.line2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  border-bottom: 1px solid #707070;
}
.notation dd.line3::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100px;
  width: 100%;
  border-bottom: 1px solid #707070;
}
.policy {
  position: relative;
  padding: 212px 10.47dvw 0;
  opacity: 0;
}
.policy::after {
  content: "PRIVACY\00a0 POLICY";
  font-size: 8.4dvw;
  line-height: calc(172 / 116);
  position: absolute;
  top: 122px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.0786;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
}
.policy p {
  margin: 157px auto 32px;
  font-size: 1.7rem;
  line-height: calc(25 / 17);
  color: #4a4a4a;
}
a.to-top-link {
  padding: 22px 36px 22px 86px;
  font-size: 2.5rem;
  background: rgb(46, 46, 46);
  border-radius: 43px;
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto;
  color: #fdfe02;
}
.to-top-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 26px;
  transform: translateY(-50%);
  width: 36px;
  height: 16px;
  background: rgb(253, 254, 2);
  clip-path: polygon(0 100%, 50% 0, 50% 12px, 100% 12px, 100% 100%);
  transition: all 0.3s;
}
@media (hover: hover) {
  a.to-top-link:hover::before {
    transform: translateY(-50%) translateX(-5px);
  }
}
@media (hover: none) {
  a.to-top-link:active::before {
    transform: translateY(-50%) translateX(-5px);
  }
}
/* レスポンシブ（タブレット） */
@media screen and (max-width: 1022px) {
  .notation h2,
  .policy h2 {
    font-size: 6rem;
  }
  .notation h2 {
    margin-top: 144px;
  }
  .notation::after {
    top: 96px;
  }
  .notation dl {
    margin-top: 100px;
    font-size: 2rem;
  }
  .notation dt {
    width: 190px;
  }
  .notation dd {
    width: calc(100% - 190px);
    min-height: 47px;
  }
  .notation dd.line2::before {
    top: 47px;
  }
  .notation dd.line3::after {
    top: 94px;
  }
  .policy {
    padding-top: 169px;
  }
  .policy p {
    margin-top: 120px;
    font-size: 2rem;
  }
  a.to-top-link {
    padding: 18px 36px 18px 86px;
  }
}
/* レスポンシブ（~500px） */
@media screen and (max-width: 735px) {
  .notation::after {
    top: 60px;
  }
  .notation h2 {
    margin-top: 100px;
  }
  .notation h2,
  .policy h2 {
    font-size: 5.4rem;
  }
  .notation dl {
    margin-top: 80px;
    font-size: 2.4rem;
  }
  .notation dl div {
    flex-direction: column;
  }
  .notation dt,
  .notation dd {
    width: 100%;
  }
  .notation dt {
    border-bottom: 1px solid #707070;
  }
  .notation dd {
    min-height: 42.3px;
  }
  .notation dd.line2::before {
    top: 42.3px;
  }
  .notation dd.line3::after {
    top: 84.6px;
  }
  .notation dd.line4 span {
    position: absolute;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #707070;
    top: 126.9px;
  }
  .policy {
    padding-top: 144px;
  }
  .policy::after {
    top: 108px;
  }
  .policy p {
    margin-top: 100px;
    font-size: 2.4rem;
  }
}
/* レスポンシブ（スマートフォン） */
@media screen and (max-width: 499px) {
  .notation h2,
  .policy h2 {
    font-size: 3.4rem;
  }
  .notation::after {
    top: 55px;
  }
  .notation h2 {
    margin-top: 80px;
  }
  .notation dl {
    margin-top: 50px;
  }
  .policy {
    padding-top: 100px;
  }
  .policy::after {
    top: 75px;
  }
  .policy p {
    margin-top: 60px;
  }
  a.to-top-link {
    padding: 12px 20px 12px 60px;
  }
  a.to-top-link::before {
    left: 20px;
    width: 30px;
    height: 12px;
    clip-path: polygon(0 100%, 50% 0, 50% 9px, 100% 9px, 100% 100%);
  }
}

/* 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 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;
  }
}

@media screen and (max-width: 768px) {
  .under__link img {
    width: 140px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 640px) {
  .under__link img {
    width: 95px;
  }
}

@media screen and (max-width: 768px) {
  footer {
    padding-bottom: 130px;
  }
}
@media screen and (max-width: 640px) {
  footer {
    padding-bottom: 110px;
  }
}