@charset "UTF-8";


@keyframes loop {
  0% {
    transform: translateX(0);
  }
  33.3333% {
    transform: translateX(-100%);
  }
  33.3334% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  66.6666% {
    transform: translateX(-200%);
  }
  66.6667% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes loop3 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-300%);
  }
}
@keyframes appear {
  0% {
    opacity: 0;
  }
  99.9%, to {
    opacity: 1;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  99.9%, to {
    transform: rotate(360deg);
  }
}
@keyframes circle {
  0% {
    stroke-dasharray: 464.9568;
    stroke-dashoffset: 464.9568;
  }
  99.9%, to {
    stroke-dasharray: 464.9568;
    stroke-dashoffset: 0;
  }
}
@keyframes circle02 {
  0% {
    stroke-dasharray: 238.7616;
    stroke-dashoffset: 238.7616;
  }
  99.9%, to {
    stroke-dasharray: 238.7616;
    stroke-dashoffset: 0;
  }
}
@keyframes fade-large {
  0% {
    opacity: 1;
    transform: translate(0, -50%);
  }
  50% {
    opacity: 0;
    transform: translate(50%, -50%);
  }
  50.1% {
    opacity: 0;
    transform: translate(-70%, -50%);
  }
  100% {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@keyframes fade-large-static {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  50% {
    opacity: 0;
    transform: translateX(50%);
  }
  50.1% {
    opacity: 0;
    transform: translateX(-70%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fade-up {
  0% {
    opacity: 1;
    transform: translate(-50%, 0) rotate(-90deg);
  }
  50% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
  50.1% {
    transform: translate(-50%, 80%) rotate(-90deg);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) rotate(-90deg);
  }
}
@keyframes fade-down {
  0% {
    opacity: 1;
    transform: translateY(-50%) rotate(90deg);
  }
  50% {
    opacity: 0;
    transform: translateY(20%) rotate(90deg);
  }
  50.1% {
    transform: translateY(-150%) rotate(90deg);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) rotate(90deg);
  }
}
@keyframes fade-large_45deg {
  0% {
    opacity: 1;
    transform: translate(0, -50%) rotate(-45deg);
  }
  50% {
    opacity: 0;
    transform: translate(50%, -100%) rotate(-45deg);
  }
  50.1% {
    opacity: 0;
    transform: translate(-70%, 20%) rotate(-45deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, -50%) rotate(-45deg);
  }
}
@keyframes fade-small {
  0% {
    opacity: 1;
    transform: translate(0, -50%);
  }
  50% {
    opacity: 0;
    transform: translate(40%, -50%);
  }
  50.1% {
    transform: translate(-40%, -50%);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@keyframes fade-top-right {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(-45deg);
  }
  50% {
    opacity: 0;
    transform: translate(40%, -60%) rotate(-45deg);
  }
  50.1% {
    opacity: 0;
    transform: translate(-50%, 75%) rotate(-45deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(-45deg);
  }
}
@keyframes border_hover {
  0% {
    width: 0;
  }
  99.9%, to {
    width: 100%;
  }
}
p, h1, h2, h3, h4 {
  text-align: left;
}

section {
  padding: 0;
}

.global_mainVisual {
  margin-bottom: 0;
  background-color: unset;
}

.not-tab {
  display: none;
}

@media screen and (max-width: 1250px) {
  .tab-only {
    display: block;
  }
}
.font-01 {
  color: #333;
  font-family: "kozuka-mincho-pro";
  font-style: normal;
  font-weight: 500;
}
.font-01.key-ph {
  font-size: 60px;
  line-height: 77px; /* 128.333% */
  letter-spacing: 15px;
  margin-bottom: 20px;
}
.font-01.sub-ph {
  font-size: 30px;
  line-height: 55px;
  letter-spacing: 6px;
  margin-bottom: 26px;
}
.font-01.sub-title {
  color: #222;
  font-family: "kozuka-mincho-pro";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px; /* 222.222% */
  letter-spacing: 2px;
  padding-left: 10px;
}
.font-01.h2 {
  font-size: 34px;
  line-height: 60px; /* 176.471% */
  letter-spacing: 4.76px;
  margin-bottom: 40px;
}
.font-01.h3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 24px; /* 100% */
  letter-spacing: 3.36px;
}

.font-02 {
  color: #222;
  font-family: "zen-kaku-gothic-new";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px; /* 222.222% */
  margin-bottom: 20px;
  letter-spacing: 2px;
}
.font-02 span.bold {
  font-weight: 600;
}
.font-02.commit-h3 {
  color: #00AEBB;
  font-size: 24px;
  font-weight: 400;
  line-height: 35px; /* 145.833% */
  letter-spacing: 1.44px;
}
.font-02.commit-p, .font-02.features-p {
  font-size: 15px;
  font-weight: 400;
  line-height: 28px; /* 186.667% */
  letter-spacing: 0.6px;
}
.font-02.point-text {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px; /* 150% */
  letter-spacing: 0.84px;
}
.font-02.h2 {
  color: #444444;
  font-size: 34px;
  font-style: normal;
  font-weight: 400;
  line-height: 60px; /* 176.471% */
  letter-spacing: 3.06px;
}
.font-02.h3 {
  color: #444444;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 100% */
  letter-spacing: 3.36px;
  margin-bottom: 40px;
}
.font-02.h3-blue {
  color: #00AEBB;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.54px;
}

@media screen and (max-width: 1250px) {
  .font-01.key-ph {
    font-size: 4.8vw;
  }
  .font-01.sub-ph {
    font-size: 2.37vw;
  }
  .font-01.sub-title {
    font-size: 1.44vw;
  }
  .font-01.h2 {
    font-size: 2.7vw;
    line-height: 4.7vw;
  }
  .font-01.h3 {
    font-size: 1.92vw;
  }
  .font-02 {
    font-size: 1.4vw;
  }
  .font-02.commit-h3 {
    font-size: 1.92vw;
  }
  .font-02.commit-p, .font-02.features-p {
    font-size: 1.2vw;
  }
  .font-02.point-text {
    font-size: 1.1vw;
  }
  .font-02.h2 {
    font-size: 2.68vw;
  }
  .font-02.h3 {
    font-size: 1.92vw;
  }
  .font-02.h3-blue {
    font-size: 1.44vw;
  }
}
p.bold, span.bold {
  font-weight: bold;
}
p.blue, span.blue {
  color: #00AEBB;
}

.global_mainVisual {
  display: block;
}

.global_mainVisual .global_inner {
  width: 100%;
  height: auto;
  padding: 0;
  display: block;
  margin: 0;
  max-width: unset;
}

.content_wrap {
  width: 100%;
  height: auto;
  position: relative;
}
.content_wrap .skip {
  display: inline-block;
  position: fixed;
  top: 90vh;
  right: 5%;
  z-index: 5;
}
.content_wrap .skip a {
  padding-top: 10px;
  display: block;
}
.content_wrap .skip.hidden {
  visibility: hidden;
  animation: fadeOut 2s ease-in-out forwards;
  pointer-events: none; /* 重要 */
}
.content_wrap .skip.visible {
  visibility: visible;
  animation: fade 2s ease-in-out forwards;
  pointer-events: all; /* 重要 */
}

.trigger-area {
  width: 100%;
  min-height: 900vh;
  height: auto;
}

.frame {
  max-width: 1320px;
  width: 100%;
  padding: 0 60px;
  margin: 0 auto;
  height: 120vh;
  display: flex;
  margin-bottom: 30px;
}
.frame .parag-wrap {
  height: calc(100vh - 88px);
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4vw;
}
.frame .parag-wrap.m-40 {
  margin-top: 40px;
}
.frame .parag-wrap .mv-wrap {
  text-align: center;
  width: 16px;
  position: relative;
}
.frame .parag-wrap .logo {
  width: 16px;
  height: 16px;
}
.frame .parag-wrap .move-line {
  position: absolute;
  top: 100%;
  left: 39.5%;
  width: 2px;
  animation: linescale 6s infinite;
}

@keyframes linescale {
  0% {
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
  }
  50% {
    transform: scaleY(0.25);
    transform-origin: top;
    opacity: 1;
  }
  100% {
    transform-origin: top;
    opacity: 0;
    transform: scale(0.5);
  }
}
@keyframes circle-expand {
  0% {
    right: 20%;
    top: 50vh;
    filter: blur(180px);
  }
  50% {
    right: 80%;
    top: 65vh;
    filter: blur(220px);
  }
  100% {
    right: 20%;
    top: 50vh;
    filter: blur(180px);
  }
}
@keyframes circle-expand2 {
  0% {
    right: -1%;
    top: 30vh;
    filter: blur(180px);
  }
  50% {
    right: 60%;
    top: 45vh;
    filter: blur(220px);
  }
  100% {
    right: -1%;
    top: 30vh;
    filter: blur(180px);
  }
}
.trigger-area {
  position: relative;
}

.bg {
  position: absolute;
  top: 50vh;
  right: 20%;
  --color-b: 0 174 187;
  aspect-ratio: 1/1;
  background: radial-gradient(circle, rgb(var(--color-b)), rgb(var(--color-b)/0%));
  border-radius: 50%;
  filter: blur(180px);
  width: min(100%, 400px);
  z-index: -10;
}

.bg.is-active {
  position: fixed;
  top: 50vh;
  right: 20%;
  animation: circle-expand 160s infinite forwards;
}

.bg2 {
  position: absolute;
  top: 30vh;
  right: -1%;
  --color-b: 252 200 0;
  aspect-ratio: 1/1;
  background: radial-gradient(circle, rgb(var(--color-b)), rgb(var(--color-b)/0%));
  border-radius: 50%;
  filter: blur(180px);
  width: min(100%, 400px);
  z-index: -10;
}

.bg2.is-active {
  position: fixed;
  top: 30vh;
  right: -1%;
  animation: circle-expand2 160s infinite forwards;
}

#commitment {
  background-color: #ffffff;
  padding-top: 140px;
  padding-bottom: 100px;
}

.commit.content_wrap {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  margin-bottom: 180px;
  padding: 0 60px;
}
.commit .commit-wrapper {
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.commit .commit-wrapper .left {
  flex-basis: 45%;
  position: relative;
}
.commit .commit-wrapper .left h2 {
  position: sticky;
  top: 30%;
  margin-bottom: 140px;
}
.commit .commit-wrapper .right {
  flex-basis: 50%;
}
.commit .commit-wrapper .right .commit-block {
  margin-bottom: 60px;
}
.commit .commit-wrapper .right .commit-block p {
  margin-bottom: 8px;
}
.commit .commit-wrapper .right .commit-block h3 {
  margin-bottom: 24px;
}

.movie-wrap {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 0 60px;
}

#features {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 0 60px;
  margin-bottom: 80px;
}
#features .feature-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 80px;
}
#features .feature-wrapper .feature-outline {
  flex-basis: 45%;
}
#features .point-wrapper {
  flex-basis: 50%;
  position: relative;
}
#features .point-wrapper .point-text {
  padding: 14px 14px;
  border: #00AEBB 1px solid;
  background-color: white;
  position: relative;
}
#features .point-wrapper .point-text:first-child {
  margin-bottom: 8px;
}
#features .point-wrapper .line-dec {
  position: absolute;
  bottom: -390px;
  right: 2vw;
}
#features .point-wrapper .line-dec svg {
  z-index: -2;
  width: 2px;
  height: 400px;
}
#features .point-wrapper .line-dec svg .line {
  stroke: #00AEBB;
  stroke-width: 2;
  stroke-dasharray: 2 2;
}
#features .step4 {
  min-width: 1000px;
}
#features .step4 .graph-area {
  position: relative;
}
#features .step4 .graph-area .level-wrap .level-block {
  display: flex;
  column-gap: 28px;
  border-bottom: 1px solid #b8b8b8;
  width: 42vw;
  max-width: 560px;
  margin-bottom: 50px;
}
#features .step4 .graph-area .level-wrap .level-block.h32 {
  margin-bottom: 38px;
}
#features .step4 .graph-area .level-wrap .level-block.grad {
  border-image: linear-gradient(to right, #00AEBB, #FFD650) 1;
}
#features .step4 .graph-area .level-wrap .level-block.grad.h85 {
  margin-bottom: 85px;
}
#features .step4 .graph-area .level-wrap .level-block .level {
  color: #222222;
  font-family: "zen-kaku-gothic-new";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
#features .step4 .graph-area .level-wrap .level-block .level.blue {
  color: #00AEBB;
}
#features .step4 .graph-area .level-wrap .level-block .text {
  color: #222;
  font-family: "zen-kaku-gothic-new";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 22.5px */
  letter-spacing: 0.9px;
}
#features .step4 .graph-area .level-wrap :last-child {
  margin-bottom: 0;
}
#features .step4 .graph-area img {
  position: absolute;
  top: 18px;
  right: 8%;
}
#features .step4 .graph-area .point {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  position: absolute;
  bottom: 2vh;
  right: 0;
}
#features .step4 .graph-area .point svg {
  width: 3.9vw;
  max-width: 50px;
  height: 2px;
}
#features .step4 .graph-area .point svg .line {
  stroke: #00AEBB;
  stroke-width: 2;
}
#features .step4 .graph-area .point .white {
  background-color: #00AEBB;
  padding: 22px;
  height: fit-content;
  width: 22.8vw;
  max-width: 288px;
  min-width: 212px;
  color: #FFF;
  font-family: "zen-kaku-gothic-new";
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 133.333% */
  letter-spacing: 1.2px;
}

@media screen and (max-width: 1250px) {
  #features .step4 {
    min-width: unset;
  }
  #features .step4 .graph-area .level-wrap .level-block {
    width: fit-content;
  }
}
#method {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 0 60px;
  margin-bottom: 100px;
}
#method p {
  font-family: "zen-kaku-gothic-new";
}
#method .method-wrapper {
  display: flex;
  justify-content: space-between;
}
#method .method-wrapper .left {
  flex-basis: 50%;
  position: relative;
}
#method .method-wrapper .left .stick {
  position: sticky;
  top: 128px;
  padding-bottom: 80px;
  padding-top: 60px;
}
#method .method-wrapper .left .stick h2 {
  line-height: 1;
  margin-bottom: 30px;
}
#method .method-wrapper .left .stick p {
  color: #222;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 213.333% */
  letter-spacing: 0.45px;
}
#method .method-wrapper .left .stick p .blue {
  color: #00AEBB;
}
#method .method-wrapper .right {
  margin-top: 60px;
  flex-basis: 46%;
}
#method .method-wrapper .right .design-wrapper {
  padding-top: 80px;
}
#method .method-wrapper .right .design-wrapper .design {
  margin-bottom: 40px;
}
#method .method-wrapper .right .design-wrapper .sub {
  color: #444;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  display: inline-block;
  padding: 6px 14px;
  position: relative;
}
#method .method-wrapper .right .design-wrapper .sub::before {
  content: "";
  display: block;
  border-top: 1px solid #00AEBB;
  border-left: 1px solid #00AEBB;
  width: 14px;
  height: 20px;
  position: absolute;
  top: 4px;
  left: 0px;
}
#method .method-wrapper .right .design-wrapper .sub::after {
  content: "";
  display: block;
  border-bottom: 1px solid #00AEBB;
  border-right: 1px solid #00AEBB;
  width: 14px;
  height: 20px;
  position: absolute;
  bottom: 4px;
  right: 0px;
}
#method .method-wrapper .right .design-wrapper .sub.yellow::before {
  border-top: 1px solid #F2C81D;
  border-left: 1px solid #F2C81D;
}
#method .method-wrapper .right .design-wrapper .sub.yellow::after {
  border-bottom: 1px solid #F2C81D;
  border-right: 1px solid #F2C81D;
}
#method .method-wrapper .right .design-wrapper .line-wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 20px;
}
#method .method-wrapper .right .design-wrapper .line-wrap svg .line {
  stroke: #00AEBB;
  stroke-width: 1;
}
#method .method-wrapper .right .design-wrapper .line-wrap svg .line.yellow {
  stroke: #F2C81D;
}
#method .method-wrapper .right .design-wrapper .line-wrap.rv {
  margin-top: -20px;
}
#method .method-wrapper .right .design-wrapper .line-wrap.rv svg {
  margin-bottom: 30px;
}
#method .method-wrapper .right .design-wrapper .line-wrap .paragraph {
  margin-top: 28px;
}
#method .method-wrapper .right .design-wrapper .line-wrap .paragraph .sub-text {
  line-height: normal;
  letter-spacing: 0.9px;
}
#method .method-wrapper .right .design-wrapper .line-wrap .paragraph .sub-text.m14 {
  margin-bottom: 14px;
}
#method .method-wrapper .right .design-wrapper .line-wrap .paragraph .text {
  font-size: 22px;
  line-height: normal;
  letter-spacing: 1.32px;
}
#method .method-wrapper .right .design-wrapper .line-wrap.yellow .paragraph {
  margin-top: 18px;
}
#method .method-wrapper .right .method-point-wrapper {
  margin-left: 2%;
}
#method .method-wrapper .right .method-point-wrapper .method-point {
  border: 1px solid #e1e1e1;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: 14px;
  gap: 1rem;
}
#method .method-wrapper .right .method-point-wrapper .method-point .left {
  flex-basis: 24%;
  display: flex;
}
#method .method-wrapper .right .method-point-wrapper .method-point .left .sub {
  font-size: 10px;
  line-height: 1em;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}
#method .method-wrapper .right .method-point-wrapper .method-point .left .text {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 100% */
  letter-spacing: 1.08px;
}
#method .method-wrapper .right .method-point-wrapper .method-point .border {
  width: 1px;
  height: auto;
  background-color: #e1e1e1;
}
#method .method-wrapper .right .method-point-wrapper .method-point > p {
  flex: 1;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.72px;
  margin-left: 8px;
}

@media screen and (max-width: 1250px) {
  #method .method-wrapper .method-point-wrapper .method-point .left .sub {
    font-size: 0.8vw;
  }
  #method .method-wrapper .method-point-wrapper .method-point .left .text {
    font-size: 1.37vw !important;
  }
  #method .method-wrapper .method-point-wrapper .method-point > p {
    font-size: 0.96vw;
  }
}
#document {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 0 60px;
  margin-bottom: 100px;
  padding: 36px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-image: linear-gradient(to right, #00AEBB, #FFD650) 1;
}
#document h3 {
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 20px */
  letter-spacing: 0.6px;
  margin-bottom: 30px;
}
#document .document-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  column-gap: 3vw;
}
#document .document-wrapper .left {
  flex-basis: 40%;
}
#document .document-wrapper .right {
  flex: 2;
}
#document .document-wrapper .right > p {
  color: #222;
  font-family: "zen-kaku-gothic-new";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px; /* 166.667% */
}
#document .document-wrapper .right > p .blue {
  color: #00AEBB;
}
#document .document-wrapper .right .button-area {
  display: flex;
  justify-content: right;
  margin-top: 16px;
}
#document .document-wrapper .right .button {
  display: inline-block;
  padding: 6px 12px 5px 6px;
  border: 1px solid #00AEBB;
  border-radius: 24px;
}
#document .document-wrapper .right .button .blue-button {
  padding: 0 20px;
  color: #00AEBB;
  font-family: "zen-kaku-gothic-new";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  display: inline-block;
  position: relative;
}
#document .document-wrapper .right .button .blue-button::before, #document .document-wrapper .right .button .blue-button::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
#document .document-wrapper .right .button .blue-button:after {
  right: 3px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #00AEBB;
  border-right: 2px solid #00AEBB;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#example {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 0 60px;
  margin-bottom: 120px;
}
#example p {
  color: #222;
  font-family: "zen-kaku-gothic-new";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 213.333% */
  letter-spacing: 0.45px;
}
#example p .blue {
  color: #00AEBB;
}
#example .example-wrapper {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: 1080px;
  margin: 0 auto;
  margin-top: 40px;
}
#example .example-wrapper .sub-w {
  background-color: #F6F6F6;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 25.2px */
  letter-spacing: 1.08px;
  margin-top: 40px;
  flex: none;
  padding: 0 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 40px;
}
#example .example-wrapper .sub-w span {
  display: block;
}
#example .example-wrapper .contents .point {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 40px;
}
#example .example-wrapper .contents .point p {
  margin-top: 0;
}
#example .example-wrapper .contents .point.sub-h p {
  background-color: #F6F6F6;
  text-align: center;
  flex-basis: 46%;
}
#example .example-wrapper .contents .point.detail {
  background-color: unset;
  column-gap: 40px;
  justify-content: space-between;
  border-bottom: 1px solid #e1e1e1;
}
#example .example-wrapper .contents .point.detail .right {
  flex-basis: 46%;
}
#example .example-wrapper .contents .point.detail .right .sub {
  font-family: "Noto Sans JP";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 120% */
  margin-bottom: 4px;
}
#example .example-wrapper .contents .point.detail .right .sub.blue::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #00AEBB;
  display: inline-block;
  margin-right: 4px;
  position: relative;
  top: 2px;
}
#example .example-wrapper .contents .point.detail .right .sub.yellow::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #FFC000;
  display: inline-block;
  margin-right: 4px;
  position: relative;
  top: 2px;
}
#example .example-wrapper .contents .point.detail .right .text {
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 138.462% */
}
#example .example-wrapper .contents .point.detail .left {
  flex-basis: 46%;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 153.846% */
  padding: 40px 0;
  padding-right: 20px;
}

#voice, #training-list {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 0 60px;
  margin-bottom: 120px;
}

#voice .global_inner {
  padding: 0;
}
#voice .global_inner .works p {
  color: #222;
  font-family: "zen-kaku-gothic-new";
}
#voice .global_inner .works h3 span {
  color: #222;
  font-family: "zen-kaku-gothic-new";
}
#voice .global_inner .works_posts .module_button span {
  font-family: "zen-kaku-gothic-new";
  letter-spacing: 2px;
}

#training-list .global_inner {
  padding: 0;
}
#training-list .global_inner .workshop_posts {
  border: unset;
  padding: 0;
  margin-top: 56px;
}
#training-list .global_inner .workshop_posts .workshop p {
  color: #222;
  font-family: "zen-kaku-gothic-new";
}
#training-list .global_inner .workshop_posts .workshop h3 span {
  color: #222;
  font-family: "zen-kaku-gothic-new";
}
#training-list .global_inner .workshop_posts .module_button span {
  font-family: "zen-kaku-gothic-new";
  letter-spacing: 2px;
}

.mobile-only {
  display: none;
}

.pc-only {
  display: block;
}

@media screen and (max-width: 430px) {
  .mobile-only {
    display: block;
  }
  .pc-only {
    display: none;
  }
  .font-01.key-ph {
    font-size: 7.46vw;
    line-height: 11.53vw; /* 128.333% */
    letter-spacing: 2.1vw;
    margin-bottom: 3.33vw;
  }
  .font-01.sub-ph {
    font-size: 4.98vw;
    line-height: 10vw;
    letter-spacing: 0.7vw;
    margin-bottom: 4vw;
  }
  .font-01.sub-title {
    color: #222;
    font-family: "kozuka-mincho-pro";
    font-size: 3.32vw;
    line-height: 3vw; /* 222.222% */
    letter-spacing: 2px;
    padding-left: unset;
  }
  .font-01.h2 {
    font-size: 5.95vw;
    line-height: 10.95vw; /* 176.471% */
    letter-spacing: 1.12vw;
    margin-bottom: 40px;
  }
  .font-01.h3 {
    font-size: 24px;
    font-weight: 400;
    line-height: 24px; /* 100% */
    letter-spacing: 3.36px;
  }
  .font-02 {
    font-size: 3.2vw;
    line-height: 9vw; /* 222.222% */
    margin-bottom: 5.53vw;
    letter-spacing: 0.1vw;
  }
  .font-02.commit-h3 {
    color: #00AEBB;
    font-size: 5.2vw;
    font-weight: 400;
    line-height: 35px; /* 145.833% */
    letter-spacing: 1.44px;
  }
  .font-02.commit-p, .font-02.features-p {
    font-size: 3.7vw;
    font-weight: 400;
    line-height: 6.7vw; /* 186.667% */
    letter-spacing: 0.1vw;
  }
  .font-02.point-text {
    font-size: 3.5vw;
    font-style: normal;
    font-weight: 400;
    line-height: 5.2vw; /* 150% */
    letter-spacing: 0.2vw;
  }
  .font-02.h2 {
    color: #444444;
    font-size: 5.8vw;
    line-height: 10.95vw !important; /* 176.471% */
    letter-spacing: 0.1vw;
    margin-bottom: 40px !important;
  }
  .font-02.h3 {
    color: #444444;
    font-size: 4.9vw !important;
    font-style: normal;
    font-weight: 400;
    line-height: 5vw !important; /* 100% */
    letter-spacing: 0.4vw !important;
    margin-bottom: 30px;
  }
  .font-02.h3-blue {
    color: #00AEBB;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.54px;
  }
  @keyframes linescale {
    0% {
      transform: scaleY(0);
      transform-origin: top;
      opacity: 0;
    }
    50% {
      transform: scaleY(1);
      transform-origin: top;
      opacity: 1;
    }
    100% {
      transform-origin: top;
      opacity: 0;
      transform: scale(1.2);
    }
  }
  @keyframes circle-expand-sp1 {
    0% {
      right: 20%;
      top: 80vh;
      filter: blur(60px);
    }
    50% {
      right: 80%;
      top: 90vh;
      filter: blur(90px);
    }
    100% {
      right: 20%;
      top: 80vh;
      filter: blur(60px);
    }
  }
  @keyframes circle-expand-sp2 {
    0% {
      right: -1%;
      top: 70vh;
      filter: blur(60px);
    }
    50% {
      right: 60%;
      top: 45vh;
      filter: blur(80px);
    }
    100% {
      right: -1%;
      top: 70vh;
      filter: blur(60px);
    }
  }
  .bg {
    position: absolute;
    top: 80vh;
    right: 20%;
    --color-b: 0 174 187;
    aspect-ratio: 1/1;
    background: radial-gradient(circle, rgb(var(--color-b)), rgb(var(--color-b)/0%));
    border-radius: 50%;
    filter: blur(60px);
    width: min(100%, 100px);
    z-index: -10;
  }
  .bg.is-active {
    position: fixed;
    top: 80vh;
    right: 20%;
    animation: circle-expand-sp1 160s infinite forwards;
  }
  .bg2 {
    position: absolute;
    top: 70vh;
    right: -1%;
    --color-b: 252 200 0;
    aspect-ratio: 1/1;
    background: radial-gradient(circle, rgb(var(--color-b)), rgb(var(--color-b)/0%));
    border-radius: 50%;
    filter: blur(60px);
    width: min(100%, 100px);
    z-index: -10;
  }
  .bg2.is-active {
    position: fixed;
    top: 70vh;
    right: -1%;
    animation: circle-expand-sp2 160s infinite forwards;
  }
  .content_wrap .announce-wrap {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    align-items: center;
    height: 18vh;
    position: absolute;
    top: 67vh;
    left: 26px;
  }
  .content_wrap .announce-wrap .scroll-line {
    height: 30vh;
    animation: linescale 2s infinite forwards;
  }
  .trigger-area {
    width: 100%;
    min-height: 900vh;
    height: auto;
  }
  .frame {
    max-width: 100%;
    width: 100%;
    padding: 0 24px;
    margin: 0 auto;
    height: 120vh;
    display: flex;
    margin-bottom: 30px;
  }
  .frame .parag-wrap {
    height: calc(100vh - 88px);
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .frame .parag-wrap .mv-wrap.tab-none {
    display: none;
  }
  .frame .parag-wrap .mv-wrap .move-line {
    display: none;
  }
  #commitment {
    padding-top: 140px;
    margin-top: 0px;
    padding-bottom: 100px;
  }
  .commit.content_wrap {
    width: 100%;
    margin: 0 auto;
    position: relative;
    margin-bottom: 120px;
    padding: 0 24px;
  }
  .commit .commit-wrapper {
    margin: 0 auto;
    width: 100%;
    display: block;
  }
  .commit .commit-wrapper .left {
    flex-basis: 45%;
    position: relative;
  }
  .commit .commit-wrapper .left h2 {
    position: sticky;
    top: 30%;
    margin-bottom: 30px;
  }
  .commit .commit-wrapper .right {
    flex-basis: 50%;
  }
  .commit .commit-wrapper .right .commit-block {
    margin-bottom: 60px;
  }
  .commit .commit-wrapper .right .commit-block p {
    margin-bottom: 8px;
  }
  .commit .commit-wrapper .right .commit-block h3 {
    margin-bottom: 24px;
  }
  .movie-wrap {
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
  }
  #features {
    padding: 0 24px;
    display: block;
    margin-bottom: 40px;
  }
  #features .feature-wrapper {
    display: block;
  }
  #features .feature-wrapper .point-wrapper .line-dec {
    top: 100%;
  }
  #features .feature-wrapper .point-wrapper .line-dec svg {
    height: 38vh;
  }
  #features .step4 {
    min-width: unset;
  }
  #features .step4 .graph-area {
    display: flex;
    flex-direction: column;
  }
  #features .step4 .graph-area .sp-rev {
    position: relative;
    top: unset;
    right: unset;
    margin-right: 5%;
    order: 1;
  }
  #features .step4 .graph-area .level-wrap {
    order: 3;
    margin-top: 30px;
  }
  #features .step4 .graph-area .level-wrap .level-block {
    width: fit-content;
    column-gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    width: 100%;
    justify-content: flex-start;
  }
  #features .step4 .graph-area .level-wrap .level-block .level {
    flex-basis: max-content;
    min-width: 19%;
  }
  #features .step4 .graph-area .level-wrap .level-block .text {
    font-size: 3.4vw;
    line-height: 5vw;
    letter-spacing: 0.12vw;
  }
  #features .step4 .graph-area .level-wrap .level-block.h85, #features .step4 .graph-area .level-wrap .level-block.h32 {
    margin-bottom: 24px !important;
  }
  #features .step4 .graph-area .point {
    order: 2;
    bottom: unset;
    top: 16vh;
    justify-content: right;
  }
  #features .step4 .graph-area .point .white {
    padding: 2vw;
    font-size: 2.9vw;
    line-height: 4vw;
    width: 40vw;
    min-width: unset;
  }
  #method {
    width: 100%;
    padding: 0 24px;
  }
  #method .method-wrapper {
    display: block;
  }
  #method .method-wrapper .left .stick {
    padding-top: unset;
    padding-bottom: 40px;
    position: relative;
    top: unset;
  }
  #method .method-wrapper .right {
    margin-top: unset;
  }
  #method .method-wrapper .right .design-wrapper {
    padding-top: unset;
  }
  #method .method-wrapper .method-point-wrapper .method-point > p {
    font-size: 2.5vw !important;
    letter-spacing: 0.1vw !important;
  }
  #method .method-wrapper .method-point-wrapper .method-point .left .border-wrap .text {
    font-size: 2.7vw !important;
  }
  #document {
    margin-bottom: 60px;
  }
  #document .document-wrapper {
    flex-direction: column;
    row-gap: 16px;
  }
  #example {
    width: 100%;
    padding: 0 24px;
    margin-bottom: 60px;
  }
  #example .overflow-wrap {
    width: 100%;
    padding-bottom: 12px;
    overflow-x: scroll;
  }
  #example .overflow-wrap::-webkit-scrollbar {
    width: 20px;
    height: 4px;
  }
  #example .overflow-wrap::-webkit-scrollbar-track {
    background-color: #e1e1e1;
  }
  #example .overflow-wrap::-webkit-scrollbar-thumb {
    background-color: #00AEBB;
    border-radius: 1px;
  }
  #example .example-wrapper {
    min-width: 1080px;
  }
  #example .example-wrapper .contents .point.detail .left {
    padding: 20px 0;
  }
  #voice {
    width: 100%;
    padding: 0 24px;
    margin-bottom: 60px;
  }
  #voice .global_inner {
    padding: 0;
  }
  #training-list {
    width: 100%;
    padding: 0 24px;
    margin-bottom: 60px;
  }
  #training-list .global_inner {
    padding: 0;
  }
}
@media screen and (min-width: 431px) and (max-width: 821px) {
  #features .feature-wrapper .point-wrapper .line-dec {
    top: 92%;
  }
  #features .feature-wrapper .point-wrapper .line-dec svg {
    height: 38vh;
  }
  #features .step4 {
    min-width: unset;
  }
  #features .step4 .font-02.h3 {
    margin-bottom: 0 !important;
  }
  #features .step4 .graph-area {
    display: flex;
    flex-direction: column;
  }
  #features .step4 .graph-area .sp-rev {
    position: relative;
    top: unset;
    right: unset;
    margin-right: 5%;
    margin-left: 5%;
    order: 1;
  }
  #features .step4 .graph-area .level-wrap {
    order: 3;
    margin-top: 30px;
  }
  #features .step4 .graph-area .level-wrap .level-block {
    width: fit-content;
    column-gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    width: 100%;
    justify-content: flex-start;
    max-width: unset;
  }
  #features .step4 .graph-area .level-wrap .level-block .level {
    flex-basis: max-content;
    min-width: 19%;
  }
  #features .step4 .graph-area .level-wrap .level-block .text {
    font-size: 1.8vw;
    line-height: 2vw;
    letter-spacing: 0.12vw;
  }
  #features .step4 .graph-area .level-wrap .level-block.h85, #features .step4 .graph-area .level-wrap .level-block.h32 {
    margin-bottom: 24px !important;
  }
  #features .step4 .graph-area .point {
    order: 2;
    bottom: unset;
    top: 16vh;
    justify-content: right;
  }
  #features .step4 .graph-area .point .white {
    padding: 2vw;
    font-size: 1.9vw;
    line-height: 3vw;
    width: 40vw;
    min-width: unset;
  }
}/*# sourceMappingURL=workshop-strength.css.map */