@charset "UTF-8";
/* CSS Document */

/*=============
loading
===============*/
.is-scroll-locked {
  overflow: hidden;
  height: 100vh; /* 高さ固定でスクロールを無効化 */
}
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 要素を縦に並べる */
  z-index: 9999;
}

/* 卵のデザイン（ここに画像を入れてもOK） */
.egg-wrap {
   position: relative;
}
.egg {
  width: 100px;
  height: 120px;
  background-image: url("../img/loding-egg.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.egg-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5%;
  width: 80px;      /* 卵より少し小さい幅 */
  height: 15px;     /* 影の厚み */
  background-color: #d8d8d8; /* 送っていただいた画像の濃いグレー */
  border-radius: 50%; /* 楕円形にする */
  z-index: -1;      /* 卵の裏に隠す */
}
.ball {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  pointer-events: none; /* ボールが邪魔にならないようにする */
}
.loading-text {
  margin-top: 20px;
  font: var(--heading-sub);
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/*=============
top-section
===============*/
.top {
  position: relative;
  padding-bottom: min(260px, 10%);
  margin-top: 8vh;
}
.top-wrap {
  position: relative;
}
.shape {
  position: absolute;
  z-index: 5;
}
.top-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  place-items: center;
  width: min(1500px, 95%);
  margin: 0 auto;
  position: relative;
  padding-top: 2%;
}
.tc-item01 {
  grid-area: 1 / 1 / 3 / 6;
  justify-self: end;
}
.tc-title,
.tc-txt,
.tc-item03,
.top-description{
  opacity: 0;
  transform: translateY(20px);
}
.tc-item02 {
  grid-area: 1 / 1 / 2 / 4;
  text-align: left;
  position: relative;
  z-index: 10;
}
.tc-title {
  width: min(750px,95%);
  aspect-ratio: 748 / 343;
  opacity: 0;
}
.tc-item03 {
  grid-area: 2 / 1 / 3 / 3;
  justify-self: start;
  position: relative;
  z-index: 10;
  aspect-ratio: 445 / 300;
}
.tc-txt {
  background-image: var(--orn-grad);
  color: #fff;
  padding: 1% 4%;
  display: inline-block;
  font-size: clamp(16px, calc(1vw + 9px), 26px);
  letter-spacing: 0.15em;
  margin-top: -20px;
}
.top-description {
  line-height: 1.5;
  font-weight: 700;
  text-align: right;
  margin-top: -80px;
  margin-bottom: 30px;
  position: relative;
  z-index: 10;
}
@media (min-width: 769px) {
  .top-description {
    margin-top: clamp(-80px, calc(92px - 11.9vw), 0px);
  }
}
.top-description span {
  font-size: clamp(32px, calc(1vw + 25px), 38px);
}
.top-description p {
 font-size: clamp(14.0px, calc(0.9vw + 10.5px), 24.0px);
  font-weight: 500;
}
.top-slide-wrap {
  position: relative;
  z-index: 10;
  white-space: nowrap;
}
.top-slide {
  font-family: var(--accent-font);
  font-size: 7.8rem;
  font-weight: 700;
  display: inline-block;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: var(--top-slide-grad);
  animation: letter-slide 20s linear infinite;
}
@keyframes letter-slide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.top::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 350;
  background: url("../img/top.svg") center / contain no-repeat;
  z-index: 50;
}


/*=============
wwd-section
===============*/
.wwd-contents img,
.wwd-text-wrap p:not(.wwd-text),
.wwd-tab-menu,
.wwd-item-wrap,
.wwd-btm {
  opacity: 0;
  transform: translateY(50px);
}
.wwd-text-wrap h1 span,
.wwd-text span{
  opacity: 0;
  transform: translateY(80px);
}

.wwd {
  background-color: #fff;
  position: relative;
  padding-bottom: 50px;
  z-index: 50;
}
.wwd-contents {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 5%;
  margin-bottom: 50px;
  align-items: center;
}
.wwd-contents img {
  width: min(500px,40%);
  aspect-ratio: 125 / 132;
}
.wwd-contents h1 {
  font-size: clamp(36.0px, calc(6.5vw + -14.3px), 80.0px);
  font-weight: 700;
  margin-bottom: 10px;
}
.wwd-text-wrap {
  text-align: left;
}
.wwd-text-wrap p {
  font-size: clamp(18.0px, calc(1.0vw + 10.0px), 25.0px);
}
.wwd-text {
  font-weight: 700;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: var(--orn-grad);
}
.wwd-text span {
  display: inline-block; /* これがないと transform が効きません */
  /* グラデーションを適用 */
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: var(--orn-grad);
}
.wwd-tab-menu {
  display: none;
}

.wwd-item-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3%;
  width: min(1200px, 95%);
  margin: 0 auto 80px;
  font-weight: 400;
}
.wwd-item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--blk);
  border-radius: 20px;
  text-align: center;
  padding: 40px 20px;
  box-shadow: var(--shadow01);
}
.wwd-item h2 {
  font-size: clamp(15.0px, calc(1.4vw + 7.2px), 28.0px);
  font-weight: 700;
  margin-bottom: 30px;
}
.wwd-img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 155px;
  margin-bottom: 7%;
}
.wwd-img01 {
  aspect-ratio: 171 / 108;
  width: min(170px, 75%);
}
.wwd-img02 {
  aspect-ratio: 170 / 119;
  width: min(170px, 75%);
}
.wwd-img03 {
  aspect-ratio: 152 / 151;
  width: min(152px, 70%);
}
.wwd-item-detail {
  text-align: left;
  flex-grow: 1;
  margin: 0 auto 40px;
  width: 100%;
  max-width: 260px;
}
.wwd-item-detail li {
  flex-grow: 1;
  padding-left: 7%;
  font-size: clamp(16.0px, calc(0.6vw + 11.4px), 20.0px);
  position: relative;
}
.wwd-item-detail li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.8em;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background-color: var(--blk);
  border-radius: 50%;
}
.wwd-item p {
  border-top: 1px solid #333;
  margin-top: auto;
  padding-top: 40px;
  text-align: center;
  min-height: 95px;
  font-size: clamp(13.0px, calc(0.8vw + 8.8px), 20.0px);
  width: 95%;
  margin: 0 auto;
}
.detail-price {
  font-size: clamp(12.0px, calc(0.4vw + 9.6px), 16.0px);
}
.wwd-btm-subheading {
  font-weight: 700;
  font-size: clamp(18.0px, calc(1.1vw + 13.8px), 30.0px);
  margin-bottom: 20px;
}
.wwd-btm-wrap {
  display: flex;
  justify-content: center;
  gap: 5%;
}
.wwd-btm-wrap p {
  text-align: left;
  align-self: center;
}
.wwd-btm-txt-box {
  margin-top: 30px;
  width: min(750px, 100%);
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--gry);
  border-radius: 4px;
  overflow: hidden;
  text-align: center;
}
.wwd-btm-txt-heading {
  background-color: var(--gry);
  font-weight: 700;
  font-size: clamp(15.0px, calc(0.4vw + 12.6px), 18.0px);
  padding: 14px 20px;
}
.wwd-btm-txt-body {
  padding: 16px 20px;
  font-size: clamp(13.0px, calc(0.3vw + 11.2px), 15.0px);
  line-height: 1.8;
}
.wwd-btm-wrap img {
  aspect-ratio: 120 / 88;
  width: min(120px, 20%);
  height: 100%;
}

/*=============
works-section
===============*/


.worksText span,
.works-sub span {
  opacity: 0;
  transform: translateY(80px);
}
.works-swiper,
.works-bgWrap,
.btn-more {
  opacity: 0;
  transform: translateY(20px);
}
.works {
  position: relative;
  background-color: var(--gry);
  padding-bottom: 150px;
}
.works-wrap {
  padding-top: 20%;
}
.works::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 308;
  background: url("../img/works_top.svg") center / contain no-repeat;
  z-index: 1;
}

.line {
  flex: 1; 
  height: 1px; 
  background-color: #333;
  margin-top: -30px;
}
.worksLine, .aboutLine {
  display: block;
  width: 100%; /* あるいは固定幅 */
  transform-origin: left;
  transform: scaleX(0);
  opacity: 0;
}
.sub-title {
  font: var(--heading-sub);
  display: inline-block;
}

.works-swiper {
  width: min(1200px, 90%);
  margin: 0 auto;
  position: relative;
  z-index: 100;
}
.sliderArea {
  position: relative;
  text-align: left;
  width: min(1200px, 95%);
  margin: 0 auto 70px;
}
.regular_3.slider.swiper-wrapper {
  padding-bottom: 40px;
}
.slider-btn.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}
.works-item {
  flex-shrink: 0;
  width: calc(100% / 3);
}
.wi-info-group {
  grid-row: 3;
  min-height: clamp(90px, 5vw, 110px);
  margin-top: 10px;
}
.wi-category {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--wht);
  padding: 3px 20px;
  border: 1px solid var(--blk);
  border-radius: 30px;
  justify-self: start;
  margin-bottom: 15px;
  display: inline-block;
}
.wi-c-web {
  background-color: #49A15F;
}
.wi-c-movie {
  background-color: #5E89B1;
}
.wi-c-print {
  background-color: #D4823B;
}
.worksLink {
  display: block;
  cursor: pointer;
}
.worksImgWrap {
  position: relative;
  overflow: hidden;
}
.worksImgWrap::before,
.worksImgWrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.worksImgWrap::before {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.worksImgWrap::after {
  content: "VIEW MORE";
  color: var(--wht);
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (hover: hover) and (pointer: fine) {
  .worksLink:hover .worksImgWrap::before,
  .worksLink:hover .worksImgWrap::after {
    opacity: 1;
  }
}
.worksImgWrap {
  width: min(380px, 100%);
  height: min(250px, 100%);
  aspect-ratio: 380 / 250;
  background-color: #F8F8F8;
  border-radius: 10px;
  margin: 0 auto;
}
.worksLink:has(.wi-c-web) .worksImgWrap {
  background-color: color-mix(in srgb, #49A15F 12%, white);
}
.worksLink:has(.wi-c-movie) .worksImgWrap {
  background-color: color-mix(in srgb, #5E89B1 12%, white);
}
.worksLink:has(.wi-c-print) .worksImgWrap {
  background-color: color-mix(in srgb, #D4823B 22%, white);
}
.worksImg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-bottom: 10px;
  transition: transform .5s ease;
  border-radius: 10px;
}
.worksImg-contain {
  object-fit: contain;
}
.works-item-wrap h3 {
  font-size: 2.2rem;
}
.wi-overview {
  font-size: 1.6rem;
  color: #D15145;
}
.wi-tag {
  padding: inherit;
  min-height: 60px;
}
.wi-tag li {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.05em;
  text-decoration: underline;
  margin-right: 1rem;
}
.wi-d-btm {
  font-size: 1.4rem;
  text-align: right;
  grid-row: 5;
  align-self: flex-end;
  margin-right: 0
} 
.works-bgWrap {
  display: flex;
  position: absolute;
  top: 45%;
  width: 2000px;
}

.works_bg {
    width: 100%;
    flex-shrink: 0;
    animation: works-bg 120s linear infinite;
}

@keyframes works-bg {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border: 1px solid #333333;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .slider-btn:hover {
    background-color: #f5f5f5;
  }
}
.slider-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid #333333;
  border-left: 2px solid #333333;
}
.prev-btn { 
  left: -50px; 
}
.prev-btn::after {
  left: 54%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.next-btn {
  right: -50px; 
}
.next-btn::after {
  left: 46%;
  transform: translate(-50%, -50%) rotate(135deg);
}
.btn-more span {
  color: var(--wht);
  font-weight: 400;
}

.about-text, .why-area, .contact-guide, .faq {
  opacity: 0;
  transform: translateY(80px);
}

/*=============
about-section
===============*/

.aboutText span,
.about-sub span,
.about-text,
.why-area,
.contact-guide,
.faq {
  opacity: 0;
  transform: translateY(80px);
}

.about {
  border-radius: 55px 55px 0px 0px;
  background-color: var(--wht);
  margin-top: -50px;
  z-index: 1;
  position: relative;
  text-align: left;
  padding-bottom: 150px;
  background-image: url("../img/about_bg01.svg"),
  url("../img/about_bg02.svg"),
  url('../img/about_bg03.svg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right -20% top -200px,left clamp(-280px, -30vw, -200px) top 550px,right -250px top 2000px;
  background-size: min(750px, 55%),min(650px, 60%),min(650px, 70%);
}
.about-title {
  padding-top: 100px;
}
.about-text {
  text-align: left;
  width: min(1000px, 90%);
  margin-bottom: 80px;
}

.about-text p {
  margin-bottom: 20px;
  font: var(--sectionText);
}
.about-text a {
  width: fit-content;
  margin-left: 0;
}
.about-bm {
  padding: 15px 50px;
  font-size: 2.0rem;
}
.why-area {
  display: flex;
}
.why-text-area {
  width: 40%;
}
.why-text-area h3 {
  font: 700 clamp(50.0px, calc(3.0vw + 27.1px), 70.0px) "Inter", sans-serif;
}
.wta-label {
  background-color: var(--blk);
  color: #fff;
  padding: 5px 20px;
  display: inline-block;
  font-size: 2.2rem;
}

/**スライドカード**/
#card-swiper {
  --fan-step: 12%; /* ファン1段あたりのズレ幅。狭い画面ではカード幅に対して%が大きくなりすぎるので px で上書きする */
  width: 60%;
  padding: 60px 0 80px;
  position: relative;
  margin: 0;
  overflow: visible !important;
}
#card-swiper .swiper-wrapper {
  position: relative;
}
#card-swiper .swiper-slide {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  overflow: visible;
  height: auto !important;
  transition: transform 300ms ease;
}
#card-swiper .swiper-button-prev,
#card-swiper .swiper-button-next {
  position: absolute;
  top: auto;
  bottom: 10px;
  margin-top: 0;
  width: 44px;
  height: 44px;
  border: 1px solid #333;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  z-index: 20;
}
#card-swiper .swiper-button-prev {
  left: 10px;
  right: auto;
}
#card-swiper .swiper-button-next {
  left: 68px;
  right: auto;
}
#card-swiper .swiper-button-disabled {
  opacity: 0.35 !important;
  pointer-events: none;
}
#card-swiper .swiper-button-prev svg,
#card-swiper .swiper-button-next svg {
  display: none !important;
}
#card-swiper .swiper-button-prev::after,
#card-swiper .swiper-button-next::after {
  display: none !important;
}
#card-swiper .swiper-button-prev::before,
#card-swiper .swiper-button-next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
}

#card-swiper .swiper-button-prev::before {
  transform: translate(-30%, -50%) rotate(-135deg); 
}

#card-swiper .swiper-button-next::before {
  transform: translate(-70%, -50%) rotate(45deg); 
}
.about-card {
  background-color: var(--gry-card);
  border-radius: 50px;
  padding: 30px 20px;       
  position: relative;
  width: min(450px, 85%);
  box-shadow: var(--shadow01);              
  box-sizing: border-box;
  height: 560px;
  margin: 10px;
  justify-content: space-around;
  flex-direction: column;
  display: flex;
}
.about-card h4 {
  font-weight: 700;
  font-size: clamp(20.0px, calc(1.9vw + 0.2px), 28.0px);
  text-align: center;
  text-wrap: balance;
}
.about-card h4 span {
  color: var(--orn);
}
.about-card p {
  font-weight: 400;
  font-size: 1.6rem;
   margin: 0 0 0 10px;
}
.about-card-list {
  font-weight: 400;
  font-size: 1.4rem;
  margin: 10px;
}
.about-card-list li span {
  font-weight: 600;
  background: linear-gradient(transparent 70%, #FCE773 50%);
}
.point-badge {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  background-image: var(--orn-grad);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font: 700 clamp(18.0px, calc(1.4vw + 3.2px), 24.0px) / 1.1 "Inter", sans-serif;
  z-index: 10;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.about-card img {
  display: block;
  margin: 0 auto;
}
.contact-guide {
  padding-top: 80px;
  max-width: 900px;
  margin: 0 auto;
}
.contact-guide-ttl {
  font-size: clamp(19.0px, calc(2.0vw + 11.6px), 40.0px);
  font-weight: 700;
  font-family: "Inter", sans-serif;
  text-align: center;
  margin-bottom: 50px;
  line-height: 1.4;
}
.problem-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 30px;
  list-style: none;
  padding: 0;
  width: max-content;
  margin: 0 auto 40px;
}
.problem-list li {
  position: relative;
  padding-left: 25px;
  font-weight: 500;
}
.problem-list li::before {
  content: "◆";
  position: absolute;
  left: 0;
  color: #ff7e33;
}
.contact-guide__lead {
  margin-bottom: 20px;
  font-size: clamp(16.0px, calc(0.2vw + 15.3px), 18.0px);
}
.cg-tag-group {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
  text-align: left;
}
.cg-tag {
  border: 1px solid #333;
  padding: 5px 20px;
  border-radius: 50px;
  font-size: clamp(10.0px, calc(0.3vw + 8.9px), 13.0px);
  font-weight: 400;
}
.contact-guide__action {
  text-align: center;
}
.cg__action-btn {
  display: inline-block;
  background-image: var(--orn-grad);
  color: #fff;
  padding: 20px 60px;
  border-radius: 50px;
  font-size: clamp(18.0px, calc(0.6vw + 15.9px), 24.0px);
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(241, 90, 36, 0.3);
  transition: transform 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: translateY(-3px);
  }
}

/*=============
FAQ-section
===============*/

.faq {
  padding-top: 80px;
  max-width: 900px;
  margin: 0 auto;
}
.faq__header {
  text-align: center;
  margin-bottom: 50px;
}
.faq__title {
  font: 700 clamp(60.0px, calc(1.9vw + 53.0px), 80.0px) "Inter", sans-serif;
  margin: 0;
}
.faq__item {
  background-color: #ebebe6;
  border-radius: 16px;
  margin-bottom: 16px;
  transition: background-color 0.3s ease;
}
.faq__item.is-active {
  background-color: #f2f2ee;
}
.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 24px 20px;
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
  text-align: left;
}
.faq__symbol {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin-right: 15px;
  font-size: 2.0rem;
  font-weight: 600;
  z-index: 1;
  flex-shrink: 0;
  color: var(--blk);
}
.faq__symbol::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
  z-index: -1;
}
.faq__symbol--answer {
  color: #ff7e33; 
}
.faq__question-text {
  font-size: 1.8rem;
  font-weight: 600;
  flex: 1;
  color: var(--blk)
}
.faq__icon {
  width: 20px;
  height: 20px;
  position: relative;
  margin-left: 15px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background-color: #333;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq__icon::before {
  width: 16px;
  height: 2px;
}
.faq__icon::after {
  width: 2px;
  height: 16px;
}
.faq__item.is-active .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.faq__answer {
  height: 0;
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__answer-inner {
  display: flex;
  padding: 24px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 0;
}
.faq__answer-text {
  margin: 0;
}
.faq__answer-text a {
  color: var(--orn);
  text-decoration: underline;
}

/*=============
flow-section
===============*/
.flowText span,
.flow-sub span,
.flowLine,
.flow-lead,
.flow__container,
.mission__container {
  opacity: 0;
  transform: translateY(80px);
}

.flowLine {
  transform: scaleX(0); /* 線は横から伸びる */
  transform-origin: left;
}
.flow {
  position: relative;
  padding-bottom: 200px;
  padding-top: 17%;
  background-image: url(../img/flow_bg01.svg), url(../img/flow_bg02.svg), url(../img/flow_bg03.svg), url(../img/flow_bg04.svg);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: left clamp(-400px, -30vw, -200px) top 350px, right clamp(-200px, -30vw, -100px) top 700px, left -200px top 1500px,right -150px bottom 0;
    background-size: min(750px, 55%), min(600px, 60%), min(650px, 70%), min(700px, 70%);
}
.flow::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 187;
  background: url(../img/flow_top.svg) center / contain no-repeat;
  z-index: 1;
}
.flow-title {
  flex-direction: row-reverse;
}
.flow-lead {
  font: var(--sectionText);
  margin-bottom: 50px;
}
.flow__container {
  background-color: var(--gry);
  box-shadow: var(--shadow01);
  border-radius: 40px;
  padding: 60px 50px;
  max-width: 650px;
  margin: 0 auto;
  width: min(500px, 90%);
}
.flow__item {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 30px;
}
.flow__item:last-child {
  margin-bottom: 0;
}
.flow__item:not(:last-child)::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 22px;
  background-color: var(--blk);
  z-index: 1;
  left: 23px;
  top: calc(100% + 4px);
}
.flow__number {
  width: 46px;
  height: 46px;
  background: var(--orn-grad);
  color: var(--wht);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 2.0rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 3px 8px 0 rgba(51,51,51,0.35);
}
.flow__content {
  margin-left: 10%;
  padding-top: 8px;
  text-align: left;
}
.flow__title {
  font-size: clamp(18.0px, calc(0.2vw + 17.3px), 20.0px);
  font-weight: 700;
  margin: 0 auto;
}
.flow__text {
  font-size: 1.6rem;
  line-height: 1.7;
  font-weight: 400;
  margin: 0;
}
.mission {
  padding: 100px 20px;
  background-color: transparent;
}
.mission__container {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 60px;       /* 大きめの角丸 */
  padding: 80px 60px;
  width: min(900px, 85%);
  margin: 0 auto;
  box-shadow: var(--shadow01);
  text-align: left;
}
.mission__heading {
  font: 700 clamp(24.0px, calc(1.5vw + 18.4px), 40.0px) "Inter", sans-serif;
  line-height: 1.3;
  margin-bottom: 50px;
  text-align: left;
}
.mission__content {
  max-width: 850px;
}
.mission__text {
  margin-bottom: 20px;
}
.mission__highlight {
  font-weight: bold;
  color: var(--orn);
  margin-bottom: 30px;
}
.mission__subheading {
  font-size: clamp(15.0px, calc(1.2vw + 10.4px), 28.0px);
  font-weight: bold;
  margin-bottom: 30px;
}


.shape-green {
  width: min(800px,58%);
  height: auto;
  top: -38%;
  right: 3%;
  overflow: visible;
  animation: float-green 14s ease-in-out infinite;
}
@keyframes float-green {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-8px, 10px) scale(1.015); }
}
.sg-content {
  width: 100%;
  height: auto;
  aspect-ratio: 830 / 694; 
  overflow: visible;
}
.sg-content g,
.sg-content path {
  transform-origin: center;
}
.blob-path {
  animation: blob01 8s infinite alternate ease-in-out;
}
@keyframes blob01 {
  0% {
    d: path('M706.99 71.6936C770.124 114.964 800.163 211.687 786.926 295.174C774.197 378.152 718.191 448.912 655.057 510C591.923 571.597 521.152 624.031 442.235 632.685C362.808 641.339 274.727 606.723 197.337 545.126C119.947 484.038 52.2305 395.969 41.5385 297.21C30.8464 198.451 76.6694 89.0019 154.568 45.7312C231.958 2.46052 341.424 25.3685 444.272 31.9864C547.119 38.6043 643.856 28.4229 706.99 71.6936Z');
  }
  100% {
    d: path('M636.458 133.874C709.439 189.343 784.221 261.045 789.627 338.159C795.483 415.273 731.513 498.25 658.082 550.11C585.101 602.421 502.21 624.067 411.21 632.636C320.209 641.204 221.1 636.243 150.822 583.932C80.9952 531.621 40 432.41 40 332.748C40 233.086 80.9952 133.874 150.822 78.4065C221.1 22.9384 320.209 11.6645 405.804 25.1933C491.398 39.173 563.027 78.4065 636.458 133.874Z');
  }
}
.shape-blue {
  width: min(650px,45%);
  height: auto;
  position: absolute;
  bottom: 18%;
  left: -22%;
  overflow: visible;
  animation: float-blue 17s ease-in-out infinite;
  animation-delay: -6s;
}
@keyframes float-blue {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(9px, -7px) scale(1.02); }
}
.sb-content {
  width: 100%;
  height: auto;
  aspect-ratio: 730 / 655; 
  overflow: visible;
}
.blob-path02 {
  animation: blob02 8s infinite alternate ease-in-out;
  animation-delay: -4s;
}
.sb-content g,
.sb-content path {
  transform-origin: center;
}
@keyframes blob02 {
  0% {
    /* 元の形（1つ目のSVGのパス） */
    d: path('M546.33 75.827C614.453 117.094 683.402 184.771 689.596 258.639C695.376 332.093 638.4 411.738 570.276 477.765C502.153 543.792 422.469 596.613 344.436 594.962C266.404 593.724 189.61 537.602 131.808 471.575C74.0065 405.548 34.7838 328.792 40.564 258.226C46.3442 187.66 97.54 122.871 155.342 81.6044C213.144 39.925 277.964 21.355 344.436 20.117C410.495 18.4663 478.206 34.1477 546.33 75.827Z');
  }
  100% {
    /* 変化後の形（2つ目のSVGのパス） */
    d: path('M705.266 264.63C759.498 361.115 797.638 432.586 788.699 494.527C779.164 556.468 723.145 608.879 668.317 660.1C613.49 711.321 561.046 760.754 499.067 769.688C437.684 778.026 367.958 745.865 274.99 694.644C182.618 643.423 67.5992 573.74 44.3571 480.233C21.711 387.321 90.2453 270.586 182.618 174.1C274.99 77.6153 391.796 1.38009 485.36 24.0124C578.925 46.6448 650.439 168.145 705.266 264.63Z');
  }
}
.shape-pink {
  width: min(600px, 50%);
  height: auto;
  bottom: -15%;
  right: -5%;
  animation: float-pink 20s ease-in-out infinite;
  animation-delay: -10s;
}
@keyframes float-pink {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-7px, -9px) scale(1.015); }
}
.sp-content {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 602 / 660; 
  overflow: visible;
}
.blob-path03 {
  animation: blob03 10s infinite alternate ease-in-out;
}
@keyframes blob03 {
  0% {
    /* 元の形（1つ目のSVGのパス） */
    d: path('M446.054 99.9567C494.547 137.641 534.573 188.016 552.277 248.388C569.596 308.76 564.208 378.746 532.649 432.581C500.705 486.416 441.821 524.485 374.854 556.017C307.887 587.165 232.838 612.16 169.335 593.702C105.832 575.244 54.2601 513.718 42.7141 450.27C31.1682 386.437 59.6483 321.065 68.5002 248.772C77.3521 176.48 66.5759 97.6495 99.2895 56.8886C132.003 16.5123 208.207 14.5896 274.404 26.1257C340.986 37.2772 397.561 62.2721 446.054 99.9567Z');
  }
  100% {
    /* 変化後の形（2つ目のSVGのパス） */
    d: path('M490.935 102.463C545.507 160.891 571.736 240.912 568.775 312.465C565.813 384.441 533.239 448.373 494.742 501.297C455.822 554.644 410.557 597.83 363.176 599.947C316.219 601.64 266.723 562.688 219.765 536.861C173.23 511.035 129.234 498.333 94.9676 466.579C60.7012 434.401 36.5878 383.594 40.3952 333.634C44.2026 283.674 75.9307 234.137 118.658 173.593C161.808 113.048 215.958 41.495 284.49 24.136C353.023 7.20043 436.362 44.0354 490.935 102.463Z');
  }
}

/* ==========================================================================
   768px以下
   ========================================================================== */


@media (max-width: 768px) {
  .line {
    display: none;
  }
  .top {
    margin-top: 10vh;
  }
  .shape-green {
    top: -20%;
    right: -10%;
  }
  .shape-blue {
    bottom: 50%;
    left: -30%;
  }
  .shape-pink {
    bottom: 10%;
    right: -20%;
  }
  .top-container {
    display: block;
    width: 100%;
  }
  .tc-title {
    width: min(550px, 85%);
  }
  .tc-txt {
    font-size: clamp(12.0px, calc(1.0vw + 8.2px), 16.0px);
  }
  .tc-item01 {
    position: absolute;
    top: 0;
    right: 0;
    aspect-ratio: 626 / 723;
    width: min(550px, 95%);
  }
  .tc-item03 {
    width: min(500px, 85%);
    display: block;
    margin-left: 0;
    margin-top: 70px;
  }
  .top-description span {
    font-size: clamp(26.0px, calc(1.5vw + 20.3px), 32.0px);
  }
  .top-slide {
    font-size: clamp(40.0px, calc(2.5vw + 30.5px), 50.0px);
  }
  .wwd-contents {
    display: block;
  }
  .wwd-contents h1 {
    font-size: clamp(32.0px, calc(7.1vw + 5.3px), 60.0px);
  }
  .wwd-contents img {
    width: min(500px, 85%);
    display: block;
    margin-left: 0;
    justify-self: center;
    margin: 30px auto 0;
  }
  .wwd-text-wrap p {
    font-size: clamp(16.0px, calc(1.0vw + 12.2px), 20.0px);
  }
  .wwd-tab-menu {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 0 auto;
    width: min(450px, 90%);
    position: relative;
    z-index: 100;
    box-sizing: border-box;
    border-bottom: 1px solid var(--gry);
    }
  .wwd-tab-btn {
    flex: 1;
    padding: 12px 0.5rem;
    font-size: 1.4rem;
    font-weight: bold;
    background-color: transparent;
    color: var(--blk);
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
  }
  .wwd-tab-btn.is-active {
    background-color: transparent;
    color: var(--orn);
    border-bottom: 3px solid var(--orn);
    }
  .wwd-item-wrap {
    display: block !important;
    width: min(450px, 90%);
    margin: 0 auto 40px;
    position: relative;
    padding: 0;
    z-index: 10;
    box-sizing: border-box;
    }
  .wwd-item {
    display: none;
    position: relative;
    z-index: 0;
    width: min(500px,95%);
    margin: 0 auto;
    }
  .wwd-item.is-active {
    display: flex !important;
    animation: wwd-slide 0.5s ease forwards;
    width: auto;
    margin-top: 20px;
    }
  .wwd-item p {
    font-size: 1.6rem;
  }
  .problem-list {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .works-swiper {
    width: min(1200px, 85%);
  }
  .about-text {
    width: 100%;
  }
  .about-card h4 {
    font-size: clamp(20.0px, calc(0.5vw + 18.1px), 22.0px);
  }
  .about-text a{
    margin: 0 auto;
  }
  .why-area {
    display: block;
  }
  .why-text-area {
    width: 100%;
  }
  #card-swiper {
    --fan-step: 46px;
    width: 66%;
    margin: 0 auto;
  }
  .mission__container {
    width: auto;
    padding: 50px 15px;
    border-radius: 30px;
  }
}
 @keyframes wwd-slide {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ==========================================================================
   540px
   ========================================================================== */
@media (max-width: 540px) {
  .tc-item03 {
    width: 80%;
    margin-left: auto;
    margin-right: 0;
  }
  .top-description {
    margin-top: -50px;
    font-weight: 500;
     text-align: left;
  }
  .wwd-item h2 {
    font-size: clamp(20.0px, calc(2.4vw + 10.9px), 24.0px);
    margin-bottom: 5px;
  }
  .wwd-img {
    margin-bottom: 5px;
  }
  .wwd-item p {
    padding-top: 20px;
    min-height: 70px;
  }
  .wwd-btm-wrap {
    display: block;
  }
  .wwd-btm-wrap img {
    margin-bottom: 20px;
  }
  .works-bgWrap {
    width: 1800px;
    top: 30%;
  }
  .slider-btn {
    display: none;
  }
  #card-swiper {
    --fan-step: 34px;
    width: 70%;
    margin: 0 auto 0 0;
  }
  .point-badge {
    width: 60px;
    height: 60px;
    top: -14px;
    right: -14px;
    font-size: 1.3rem;
  }
  .about {
    padding-bottom: 100px;
    background-position: right -51px top -85px, left -90px top 550px, right -90px top 2100px;
    background-size: min(750px, 65%), min(650px, 60%), min(650px, 75%);
  }
  .about-card {
    width: 100%;
    padding: 20px 10px;
    height: 450px;
  }
  .about-card h4 {
    /* 768px用の clamp(20-22px) だとこの幅では1行が入りきらず、孤立文字が出る行が生まれるため縮小 */
    /* カード幅70%化(375px幅でPOINT04を画面内に収める修正)に合わせてさらに縮小 */
    font-size: clamp(15.0px, calc(0.8vw + 11.8px), 17.0px);
  }
  .about-card img {
    width: min(180px, 40%);
  }
  .about-card-list {
    font-size: clamp(12.0px, calc(2.4vw + 2.9px), 16.0px);
  }
  .faq {
    padding-top: 100px;
  }
  .faq__header {
    text-align: left;
  }
  .faq__question-text {
    font-size: 1.6rem;
  }
  .flow {
    padding-top: 100px;
    padding-bottom: 100px;
    background-position: left -100px top 380px, right -80px top 850px, left -100px top 1620px, right -100px bottom 0;
    background-size: min(750px, 65%), min(600px, 60%), min(650px, 70%), min(700px, 80%);
  }
  .flow-title {
    flex-direction: row;
  }
  .flow__container {
    padding: 40px 15px;
    width: auto;
  }
  .flow__item {
    align-items: flex-start;
  }
  .flow__item:not(:last-child)::after {
    display: none;
  }
  .flow__content {
    margin-left: 20px;
  }
  .mission {
    padding: 100px 0;
  }
}