@charset "UTF-8";
/* ============================= 共通パーツレイアウト ============================= */
@media screen {
   :root {
      --color-text: #000;
      --color-red: #E90004;
      --color-red2: #FFE5E5;
      --color-red3: #BE0003;
      --color-gray1: #878787;
      --color-gray2: #D2D2D2;
      --color-gray3: #EFEFEF;
      --color-gray4: #AAAAAA;
      --color-olive: #856800;

      --font-default: 'Noto Sans JP', sans-serif;
      --font-en: 'Akshar', 'Noto Sans JP', sans-serif;
   }

   html,
   body {

      width: 100%;
      overflow-x: hidden;
   }

   body {
      font-family: var(--font-default);
      font-weight: 600;
      color: var(--color-text);
      font-size: 16px;
      line-height: 1.7;
      letter-spacing: .05em;
      background-color: var(--color-red);
      letter-spacing: .05em;
      position: relative;
   }

   a {
      transition: opacity .3s;
   }

   a:hover {
      opacity: 0.7;
   }

   img {
      width: 100%;
   }

   .sp,
   .tb,
   .ssp {
      display: none;
   }

   .innerWrap {
      margin: 0 auto;
      width: 100%;
      max-width: 1200px;
   }

   .font-en {
      font-family: var(--font-en);
      font-weight: 600;
      letter-spacing: .06em;
   }

   h2 {
      font-weight: 500;
   }

   .tag-list {
      font-size: 26px;
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      width: 100%;
      max-width: 1200px;
   }

   .tag-list li {
      background-color: #fff;
      border: 2px solid #000;
      border-radius: 16px;
      padding: 10px 24px 7px;
      box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.25);
   }
}

/* ============================= 各セクション ============================= */
@media screen {
   .fv {
      position: relative;
      overflow: hidden;
   }

   .fv::before {
      content: "";
      position: absolute;
      top: 55px;
      left: max(60px, calc(50% - 720px + 60px));
      width: 2758px;
      height: 890px;
      background: url('../img/bg_fv01.svg') no-repeat center;
      background-size: 100% 100%;
      z-index: -2;
   }

   .fv::after {
      content: "";
      position: absolute;
      top: min(-75px, calc(1.5625vw - 97.5px));
      right: max(150px, calc(50% - 720px + 150px));
      width: 2758px;
      height: 890px;
      background: url('../img/bg_fv02.svg') no-repeat center;
      background-size: 100% 100%;
      z-index: -3;
   }

   .fv .innerWrap {
      padding: 140px 50px 240px;
      position: relative;
   }

   .fv .innerWrap::before {
      content: "";
      position: absolute;
      top: 70px;
      right: 24px;
      width: 546px;
      height: 463px;
      background: url('../img/img_fv01@2x.png') no-repeat center/contain;
      z-index: -1;
   }

   .fv .innerWrap::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: -120px;
      width: 1440px;
      height: 453px;
      background: url('../img/img_fv02_pc@2x.png') no-repeat center/contain;
      z-index: -2;
   }

   .fv h1 {
      width: 100%;
      max-width: 308px;
      margin-bottom: 46px;
   }

   .fv .mainCatch {
      max-width: 560px;
      width: 100%;
   }

   .fv .subCatch {
      font-size: 30px;
      line-height: 1.8;
      margin-bottom: 30px;
      letter-spacing: .06em;
   }

   .about .innerWrap {
      padding: 60px 0 80px;
   }

   .about .innerWrap h2 {
      color: #fff;
      text-align: center;
      font-size: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      margin-bottom: 54px;
   }

   .about .innerWrap h2>span:last-child {
      font-size: 56px;
      display: flex;
      align-items: center;
      gap: 16px;
   }

   .about .innerWrap h2>span:last-child span {
      display: inline-block;
      border: 1px solid #fff;
      padding: 10px 54px 16px;
      line-height: 1;
   }

   .about .innerWrap>div {
      padding: 54px 0 80px;
      position: relative;
   }

   .about .innerWrap>div::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: #fff;
      transform: skewX(-8deg);
      z-index: -2;
   }

   .about .innerWrap>div>p {
      text-align: center;
      font-size: 24px;
      margin-bottom: 32px;
   }

   .about .innerWrap>div>p span {
      color: var(--color-red);
   }

   .about .innerWrap>div>div {
      padding: 0 150px;
      position: relative;
   }

   .about .innerWrap>div>div::before {
      content: "";
      position: absolute;
      right: 260px;
      top: -10px;
      width: 199px;
      aspect-ratio: 199 / 218;
      background: url(../img/img_about01@2x.png) no-repeat center/contain;
      z-index: -1;
   }

   .about .innerWrap>div>div p {
      font-size: 32px;
      display: inline;
      background-color: var(--color-red);
      color: #fff;
      padding: 3px 12px 6px;
      line-height: 2.1;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      font-weight: 500;
   }

   .menu .innerWrap {
      max-width: 1440px;
      border: 15px solid var(--color-red);
      background-color: #fff;
      padding: 60px 0 100px;
   }

   .menu h2 {
      text-align: center;
      margin-bottom: 40px;
      font-size: 48px;
      color: var(--color-red);
      display: flex;
      flex-direction: column;
   }

   .menu h2 img {
      display: inline-block;
      width: 205px;
      transform: translateY(-35px);
      margin-right: 12px;
   }

   .menu h2>span:first-child span {
      display: inline-block;
      font-size: 72px;
      transform: translateY(3px);
      letter-spacing: .1em;
   }

   .menu h2>span:last-child {
      font-size: 56px;
      line-height: 1.2;
   }

   .menu .innerWrap>div {
      display: flex;
      justify-content: center;
      gap: 24px;
      padding-left: 40px;
      padding-right: 40px;
   }

   .menu .innerWrap>div ul {
      background-color: var(--color-red2);
      border-radius: 40px;
      padding: 24px;
      position: relative;
   }

   .menu .innerWrap>div ul.patternA {
      padding-left: 52px;
   }

   .menu .innerWrap>div ul::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 90%;
      aspect-ratio: 57 / 325;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 1;
   }

   .menu .innerWrap>div ul.patternA::after {
      left: -25px;
      background-image: url(../img/img_menu01@2x.png);
   }

   .menu .innerWrap>div ul.patternB {
      padding-right: 52px;
   }

   .menu .innerWrap>div ul.patternB::after {
      right: -25px;
      background-image: url(../img/img_menu02@2x.png);
   }

   .menu .innerWrap>div ul li {
      z-index: 2;
   }

   .menu .tag-list {
      font-size: 22px;
      max-width: 480px;
   }

   .solution {
      background-color: #fff;
   }

   .solution h2 {
      font-size: 40px;
      background-image: url(../img/bg_solution.png);
      background-size: 100% 100%;
      padding: 32px 0 44px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      margin-bottom: 24px;
   }

   .solution h2>span:first-child {
      color: #fff;
   }

   .solution h2>span:last-child {
      font-size: 56px;
      display: flex;
      gap: 8px;
   }

   .solution h2>span:last-child span {
      background-color: #fff;
      line-height: 1;
      width: 79px;
      aspect-ratio: 1/1;
      display: flex;
      justify-content: center;
      align-items: center;
   }

   .solution .innerWrap {
      max-width: 860px;
      padding-bottom: 32px;
   }

   .solution .innerWrap>div>p:first-child {
      text-align: center;
      font-size: 24px;
      margin-bottom: 12px;
   }

   .solution .innerWrap>div>p:first-child span {
      color: var(--color-red);
   }

   .marketing {
      background-color: var(--color-red2);
   }

   .marketing .innerWrap {
      padding: 60px 0;
      background-image: url(../img/bg_marketing01.svg);
      background-size: 790px auto;
      background-position: top center;
      background-repeat: no-repeat;
   }

   .marketing h2 {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 40px;
      margin-bottom: 56px;
      position: relative;
      z-index: 1;
      gap: 12px;
   }

   .marketing h2::after {
      content: "";
      position: absolute;
      width: 100%;
      max-width: 540px;
      height: 18px;
      background-color: #fff;
      bottom: 6px;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
   }

   .marketing h2>span:last-child {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      color: var(--color-red);
      font-size: 56px;
   }

   .marketing h2>span:last-child img {
      width: 268px;
      transform: translateY(-14px);
   }

   .marketing ul {
      padding: 0 32px;
      display: flex;
      gap: 40px;
   }

   .marketing ul li {
      flex: 1;
      border-radius: 36px;
      border: 2px solid var(--color-red);
      background-color: #fff;
      overflow: hidden;
   }

   .marketing ul li h3 {
      font-size: 24px;
      color: var(--color-red);
      padding: 12px 0;
      text-align: center;
   }

   .marketing ul li p:last-child {
      padding: 0 14px 32px;
   }

   .marketing ul li p span {
      background: linear-gradient(transparent 60%, #fffcad 60%);
      display: inline;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      padding: 0 2px;
   }

   .onestop .sec1 {
      position: relative;
   }

   .onestop .sec1::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80px;
      background-color: #fff;
      z-index: -1;
   }

   .onestop .sec1 .innerWrap {
      padding-top: 18px;
      max-width: 1080px;
   }

   .onestop .sec1 h2 {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 40px;
      margin-bottom: 16px;
   }

   .onestop .sec1 h2>span:first-child {
      color: var(--color-red);
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 56px;
   }

   .onestop .sec1 h2>span:last-child {
      color: #fff;
      text-align: center;
   }

   .onestop .sec1 h2>span:last-child>span {
      font-size: 48px;
   }

   .onestop .sec1 h2>span:last-child>span>span {
      display: inline-block;
      position: relative;
   }

   .onestop .sec1 h2>span:last-child>span>span::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 10px;
      background-image: url(../img/line_wave.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
   }

   .onestop .sec1 h2>span:last-child>span>span>span {
      font-size: 56px;
   }

   .onestop .sec1 .innerWrap>div {
      background-image: url(../img/bg_onestop01.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      padding: 32px 75px 80px 110px;
   }

   .onestop .sec1 .innerWrap>div>p {
      width: 100%;
      max-width: 580px;
      text-align: center;
      margin: 0 auto 36px;
   }

   .onestop .sec1 .innerWrap>div>div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24px;
      line-height: 2.2;
      margin-top: -32px;
   }

   .onestop .sec1 .innerWrap>div>div ul {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: .4em;
   }

   .onestop .sec1 .innerWrap>div>div::after {
      content: "";
      width: 248px;
      aspect-ratio: 248 / 271;
      background-image: url(../img/img_onestop02@2x.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      flex-shrink: 1;
   }

   .onestop .sec1 .innerWrap>div>div li {
      display: flex;
      justify-content: flex-start;
      gap: 12px;
      align-items: center;
      line-height: 1.4;
   }

   .onestop .sec1 .innerWrap>div>div li::before {
      content: "";
      width: 36px;
      height: 36px;
      background-image: url(../img/icon_x.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
   }

   .onestop .sec1 .innerWrap>p {
      width: 100%;
      max-width: 512px;
      margin: -70px auto 0;
   }

   .onestop .sec2 {
      background-color: #fff;
   }

   .onestop .sec2 .innerWrap {
      padding: 18px 20px 54px;
      max-width: 720px;
   }

   .onestop .sec2 .innerWrap>p {
      font-size: 32px;
      margin-bottom: 32px;
      text-align: center;
      color: var(--color-red);
   }

   .onestop .sec2 .innerWrap>ul {
      display: flex;
   }

   .onestop .sec2 .innerWrap>ul li:nth-child(2) {
      flex-basis: 236px;
      margin-right: 4px;
   }

   .onestop .sec2 .innerWrap>ul li:first-child,
   .onestop .sec2 .innerWrap>ul li:last-child {
      flex-basis: 218px;
   }

   .plan .sec1 .innerWrap {
      max-width: 1440px;
      border: 15px solid var(--color-red);
      background-color: #fff;
      padding: 24px 110px 56px;
   }

   .plan .sec1 .innerWrap h2 {
      font-size: 56px;
      color: var(--color-red);
      margin-bottom: 40px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 8px;
      line-height: 1;
   }

   .plan .sec1 .innerWrap h2>span {
      font-size: 44px;
   }

   .plan .sec1 .innerWrap h2>span>span {
      font-size: 110px;
      font-weight: 700;
      transform: translateY(10px);
      display: inline-block;
   }

   .plan .sec1 .innerWrap ul {
      display: flex;
      gap: 16px;
   }

   .plan .sec1 .innerWrap ul li {
      flex: 1;
      box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.25);
      border-radius: 0 0 18px 18px;
      overflow: hidden;
   }

   .plan .sec2 .innerWrap {
      padding: 110px 0 40px;
   }

   .plan .sec2 .innerWrap ul {
      display: flex;
      gap: 0;
   }

   .plan .sec2 .innerWrap ul li {
      flex: 1;
   }

   .flow h2 {
      font-size: 40px;
      background-image: url(../img/bg_solution.png);
      background-size: 100% 100%;
      padding: 32px 0 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #fff;
      z-index: 1;
      position: relative;
   }

   .flow h2 span {
      font-size: 56px;
   }

   .flow .innerWrap {
      max-width: 1440px;
      border: 15px solid var(--color-red);
      border-top: none;
      background-color: #fff;
      padding: 160px 210px 56px 180px;
      margin-top: -100px;
      display: flex;
      justify-content: flex-end;
      gap: 48px;
   }

   .flow .innerWrap::before {
      content: "";
      width: clamp(40px, 5.06vw + 1.14px, 74px);
      aspect-ratio: 74 / 390;
      background-image: url(../img/bg_flow01_pc.svg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      flex-shrink: 0;
   }

   .flow .innerWrap ul {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 18px;
      max-width: 925px;
      width: 100%;
   }

   .flow .innerWrap ul li {
      width: calc((100% - 18px) / 2);
   }

   .faq {
      background-color: var(--color-gray3);
   }

   .faq .innerWrap {
      padding: 32px 20px 64px;
      max-width: 800px;
   }

   .faq h2 {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 32px;
   }

   .faq h2>span:first-child {
      font-size: 72px;
   }

   .faq h2>span:first-child span {
      font-size: 60px;
   }

   .faq h2>span:last-child {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32px;
      background-color: #fff;
      padding: 8px 40px 4px;
   }

   .faq .faq-list {
      display: flex;
      flex-direction: column;
      gap: 24px;
   }

   .faq .faq-item {
      background-color: #fff;
      padding: 24px 32px;
      border-radius: 32px;
      border: 4px solid #000;
      font-size: 26px;
   }

   .faq .faq-answer-main {
      color: var(--color-red);
   }

   .faq .faq-answer-content {
      font-size: 20px;
      padding-left: 1.3em;
   }

   .contact {
      background-color: #fff;
   }

   .contact .innerWrap {
      padding: 64px 20px 56px;
      max-width: 600px;
   }

   .contact h2 {
      color: var(--color-red);
      text-align: center;
      font-size: 64px;
      margin-bottom: 48px;
   }

   .contact .form-item {
      margin-bottom: 32px;
   }

   .contact label {
      display: block;
      font-size: 18px;
      margin-bottom: 8px;
   }

   .contact .label-required {
      color: var(--color-red);
      border: 1px solid var(--color-red);
      font-size: 16px;
      padding: 1px 12px;
      margin-right: 8px;
      display: inline-block;
      line-height: 1.4;
   }

   .contact input[type="text"],
   .contact input[type="email"],
   .contact input[type="tel"],
   .contact textarea {
      width: 100%;
      padding: 16px;
      border: 2px solid #000;
      font-size: 16px;
      background-color: #fff;
      transition: border-color 0.3s, box-shadow 0.3s;
   }

   .contact input:focus,
   .contact textarea:focus {
      outline: none;
      border-color: var(--color-red);
   }

   .contact textarea {
      min-height: 160px;
      resize: vertical;
   }

   .contact ::placeholder {
      color: var(--color-gray4);
      font-size: 16px;
   }

   .contact .form-submit {
      margin-top: 56px;
      text-align: center;
   }

   .contact .form-submit button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
      padding: 22px 20px;
      color: var(--color-red);
      font-size: 16px;
      border: 3px solid var(--color-red);
      border-radius: 80px;
      cursor: pointer;
      position: relative;
      transition: all 0.3s;
      letter-spacing: .1em;
   }

   .contact .form-submit button:hover {
      background-color: var(--color-red);
      color: #fff;
      transform: translateY(-2px);
   }














   footer {
      background-color: var(--color-gray3);
      padding: 40px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
   }

   footer .ft_logo {
      width: 90px;
      height: 90px;
   }

   footer .ft_address {
      margin-bottom: 24px;
   }
}

/* ============================= レスポンシブ〜1440px ============================= */
@media screen and (max-width:1440px) {
   .about .innerWrap>div::after {
      width: 90%;
      left: 5%;
      transform: skewX(-6deg);
   }
}

/* ============================= レスポンシブ〜1240px ============================= */
@media screen and (max-width:1240px) {
   .fv .innerWrap {
      padding-left: 90px;
      padding-right: 20px;
   }

   .about .innerWrap>div>div::before {
      right: clamp(60px, 42.37vw - 265.42px, 260px);
   }

   .marketing ul {
      gap: 16px;
   }

   .onestop .sec1 .innerWrap>div {
      padding: 32px 40px 80px;
   }

   .plan .sec1 .innerWrap {
      padding: 24px 40px 56px;
   }

   .flow .innerWrap {
      padding: 160px 70px 56px 40px;
   }
}

/* ============================= レスポンシブ〜1024px ============================= */
@media screen and (max-width:1024px) {
   .tb {
      display: revert;
   }

   .fv .innerWrap::before {
      right: -80px;
   }

   .marketing ul {
      flex-direction: column;
      align-items: center;
      gap: 40px;
   }

   .marketing ul li {
      width: 100%;
      max-width: 600px;
   }
}

/* ============================= レスポンシブ〜768px ============================= */
@media screen and (max-width:768px) {
   .pc {
      display: none;
   }

   .sp {
      display: revert;
   }

   .fv .innerWrap::before {
      top: 360px;
      right: 0;
      width: 255px;
      aspect-ratio: 255 / 394;
      background: url('../img/img_fv01_sp.png') no-repeat center/contain;
   }

   .fv .innerWrap {
      padding: 124px 20px 156px 100px;
   }

   .fv h1 {
      margin-bottom: 32px;
   }

   .fv .subCatch {
      font-size: 40px;
   }

   .tag-list {
      font-size: 24px;
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
   }

   .tag-list li {
      padding: 8px 18px 5px;
   }

   .fv .innerWrap::after {
      left: 0;
      width: 100%;
      aspect-ratio: 750 / 595;
      background: url('../img/img_fv02_sp@2x.png') no-repeat center top/cover;
   }

   .fv::before {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('../img/bg_fv01_sp.png') no-repeat left 60px top 54px;
      background-size: calc(100% - 60px) calc(100% - 60px);
   }

   .fv::after {
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: url('../img/bg_fv02_sp.png') no-repeat right 186px top -20px;
      background-size: calc(100% - 60px) calc(100% - 60px);
   }

   .about .innerWrap h2 {
      font-size: 32px;
      margin-bottom: 40px;
   }

   .about .innerWrap h2>span:last-child {
      font-size: 40px;
   }

   .about .innerWrap h2>span:last-child span {
      padding: 8px 32px 12px;
   }

   .about .innerWrap>div {
      padding: 32px 0;
   }

   .about .innerWrap>div>p {
      margin-bottom: 16px;
   }

   .about .innerWrap>div>div {
      padding: 0 60px;
   }

   .about .innerWrap>div::after {
      width: 86%;
      left: 7%;
      transform: skewX(-4deg);
   }

   .about .innerWrap>div>div::before {
      width: 135px;
   }

   .menu h2>span:first-child {
      line-height: 1;
      margin-bottom: 8px;
   }

   .menu h2 {
      font-size: 40px;
   }

   .menu h2 img {
      width: 180px;
      transform: translateY(-5px);
   }

   .menu h2>span:first-child span {
      font-size: 64px;
      transform: translateY(3px);
   }

   .menu h2>span:last-child {
      font-size: 48px;
   }

   .menu .innerWrap>div {
      flex-direction: column;
      align-items: center;
      gap: 32px;
   }


   .menu .tag-list li {
      font-size: 18px;
   }

   .solution h2 {
      font-size: 32px;
      margin-bottom: 40px;
   }

   .solution .innerWrap>div>p:first-child {
      margin-bottom: 24px;
      font-size: 20px;
   }

   .solution .innerWrap>div>p:first-child span {
      font-size: 24px;
   }

   .marketing .innerWrap {
      background-size: 100% auto;
   }

   .marketing h2 {
      font-size: 28px;
      gap: 8px;
      margin-bottom: 32px;
   }

   .marketing h2::after {
      width: 70%;
   }

   .marketing h2>span:last-child {
      gap: 6px;
      font-size: 50px;
   }

   .marketing h2>span:last-child img {
      width: 218px;
   }

   .marketing ul {
      padding: 0 20px;
   }

   .marketing ul li {
      font-size: 24px;
   }

   .marketing ul li h3 {
      font-size: 32px;
   }

   .onestop .sec1 .innerWrap {
      padding-top: 0;
   }

   .onestop .sec1 h2 {
      margin-bottom: 16px;
   }

   .onestop .sec1 h2>span:first-child {
      margin-bottom: 16px;
   }

   .onestop .sec1 h2>span:last-child {
      text-align: center;
   }

   .onestop .sec1 h2>span:last-child>span {
      display: inline-block;
      transform: translateY(-16px);
   }

   .onestop .sec1 .innerWrap>div>div {
      position: relative;
      display: block;
      font-size: 18px;
   }

   .onestop .sec1 .innerWrap>div {
      background-size: 120% 120%;
      background-position: center top;
      z-index: 5;
      padding: 56px 20px 80px;
   }

   .onestop .sec1 .innerWrap>div>div ul {
      z-index: 2;
      position: relative;
   }

   .onestop .sec1 .innerWrap>div>div::after {
      position: absolute;
      right: 0;
      bottom: -110px;
      z-index: 1;
      width: 170px;
   }

   .onestop .sec1 .innerWrap>p {
      position: relative;
      z-index: 2;
      padding: 0 20px;
   }

   .onestop .sec2 .innerWrap>p {
      font-size: 24px;
   }

   .plan .sec1 .innerWrap h2 {
      font-size: 48px;
      margin-bottom: 32px;
      gap: 6px;
   }

   .plan .sec1 .innerWrap h2>span {
      font-size: 40px;
   }

   .plan .sec1 .innerWrap h2>span>span {
      font-size: 96px;
      transform: translateY(10px);
   }

   .plan .sec1 .innerWrap ul {
      flex-direction: column;
      gap: 32px;
   }

   .plan .sec2 .innerWrap {
      padding: 0;
   }

   .plan .sec2 .innerWrap ul {
      flex-direction: column;
   }

   .flow h2 {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.2;
   }

   .flow .innerWrap ul {
      flex-direction: column;
      gap: 16px;
   }

   .flow .innerWrap ul li {
      width: 100%;
   }

   .flow .innerWrap {
      padding: 130px 0px 32px;
      justify-content: space-between;
   }

   .flow .innerWrap::before {
      width: min(96px, 11.5vw);
      aspect-ratio: 96 / 1049;
      background-image: url(../img/bg_flow01_sp.svg);
   }

   .faq .faq-item {
      padding: 24px;
      font-size: 20px;
   }

   .faq .faq-answer-content {
      font-size: 16px;
   }

   .contact input[type="text"],
   .contact input[type="email"],
   .contact input[type="tel"],
   .contact textarea {
      padding: 8px;
   }

   .contact h2 {
      font-size: 48px;
   }

   .contact .innerWrap {
      padding: 48px 20px;
   }










   footer {
      padding: 24px 0 32px;
   }
}

/* ============================= レスポンシブ〜540px ============================= */
@media screen and (max-width:540px) {
   .ssp {
      display: revert;
   }

   .fv .innerWrap {
      padding: 124px 20px 156px 60px;
   }

   .fv h1 {
      max-width: 240px;
   }

   .fv .subCatch {
      font-size: 24px;
   }

   .fv .innerWrap::before {
      top: 150px;
      width: 120px;
   }

   .fv::before {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('../img/bg_fv01_sp.png') no-repeat left 40px top 54px;
      background-size: calc(100% - 40px) calc(100% - 60px);
   }

   .fv::after {
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: url('../img/bg_fv02_sp.png') no-repeat right 40px top 0;
      background-size: calc(100% - 40px) calc(100% - 60px);
   }



   .tag-list {
      font-size: 18px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
   }

   .tag-list li {
      padding: 6px 14px 3px;
   }

   .about .innerWrap h2 {
      font-size: 24px;
   }

   .about .innerWrap h2>span:last-child {
      font-size: 32px;
   }

   .about .innerWrap h2>span:last-child span {
      padding: 6px 24px 9px;
   }


   .about .innerWrap>div>p {
      font-size: 20px;
   }

   .about .innerWrap>div>div {
      padding: 0 40px;
   }

   .about .innerWrap>div>div p {
      font-size: 24px;
   }

   .about .innerWrap>div::after {
      width: 90%;
      left: 5%;
      transform: skewX(-2deg);
   }


   .about .innerWrap>div>div::before {
      right: 40px;
   }

   .menu h2 {
      font-size: 32px;
   }

   .menu h2 img {
      width: 150px;
      transform: translateY(-5px);
   }

   .menu h2>span:first-child span {
      font-size: 56px;
      transform: translateY(3px);
   }

   .menu h2>span:last-child {
      font-size: 36px;
   }

   .menu .tag-list {
      font-size: 14px;
   }

   .menu .tag-list li {
      padding: 3px 8px 2px;
   }

   .solution .innerWrap>div>p:first-child {
      font-size: 16px;
   }

   .solution .innerWrap>div>p:first-child span {
      font-size: 20px;
   }

   .marketing h2 {
      font-size: 24px;
      gap: 7px;
   }

   .marketing h2::after {
      width: 80%;
   }

   .marketing h2>span:last-child {
      gap: 5px;
      font-size: 40px;
   }

   .marketing h2>span:last-child img {
      width: 200px;
   }

   .marketing ul li {
      font-size: 16px;
   }

   .marketing ul li h3 {
      font-size: 24px;
   }

   .onestop .sec1 .innerWrap>div>div {
      font-size: 16px;
   }

   .onestop .sec1 .innerWrap>div>div::after {
      right: -55px;
      bottom: -40px;
      width: 140px;
   }

   .onestop .sec1 .innerWrap>div {
      background-size: 150% 100%;
   }

   .onestop .sec2 .innerWrap>p {
      font-size: 16px;
      margin-bottom: 16px;
   }

   .plan .sec1 .innerWrap {
      padding: 24px 20px 32px;
   }

   .plan .sec1 .innerWrap h2 {
      font-size: 32px;
      gap: 5px;
   }

   .plan .sec1 .innerWrap h2>span {
      font-size: 24px;
   }

   .onestop .sec1 h2>span:last-child {
      font-size: 24px;
   }

   .onestop .sec1 h2>span:last-child>span {
      font-size: 32px;
   }

   .onestop .sec1 h2>span:last-child>span>span>span {
      font-size: 36px;
   }

   .plan .sec1 .innerWrap h2>span>span {
      font-size: 72px;
   }

   .plan .sec1 .innerWrap ul {
      flex-direction: column;
      gap: 32px;
   }

   .faq .faq-item {
      padding: 20px;
      font-size: 18px;
   }

   .faq .faq-answer-content {
      font-size: 14px;
   }

}


/* ============================= お問い合わせフォーム ============================= */
@media screen {

   /* ============================= バリデーションエラー表示 ============================= */
   .contact .error-text {
      color: var(--color-red);
      font-size: 14px;
      margin-top: 8px;
      font-weight: 700;
      display: none;
   }

   .contact .form-item.is-error input,
   .contact .form-item.is-error textarea {
      border-color: var(--color-red);
      background-color: var(--color-red2);
   }

   .contact .form-item.is-error .error-text {
      display: block;
   }

   /* ============================= モーダル（ポップアップ） ============================= */
   .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
   }

   .modal-overlay.is-active {
      opacity: 1;
      visibility: visible;
   }

   /* モーダルウィンドウ本体 */
   .modal-window {
      background: #fff;
      width: 92%;
      max-width: 600px;
      max-height: 90vh;
      /* スマホでも上下に余白を残し、ポップアップだと認識させる */
      border-radius: 12px;
      box-shadow: 0px 0px 18.88px 0px rgba(0, 0, 0, 0.25);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transform: translateY(20px);
      transition: transform 0.3s;
   }

   .modal-overlay.is-active .modal-window {
      transform: translateY(0);
   }

   /* ヘッダー（固定） */
   .modal-header {
      padding: 24px 24px 16px;
      border-bottom: 3px solid var(--color-red);
      text-align: center;
      flex-shrink: 0;
   }

   .modal-header p {
      font-size: 24px;
      font-weight: 700;
      color: var(--color-red);
      line-height: 1.4;
      margin: 0;
   }

   /* スクロールエリア（確認内容） */
   .modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 32px 24px;
   }

   .modal-body dl {
      display: flex;
      flex-direction: column;
      gap: 24px;
   }

   .modal-body dt {
      font-size: 14px;
      color: var(--color-gray1);
      margin-bottom: 8px;
   }

   .modal-body dd {
      font-size: 16px;
      font-weight: 600;
      white-space: pre-wrap;
      /* テキストエリアの改行をそのまま反映 */
      word-break: break-word;
      padding-bottom: 24px;
      border-bottom: 1px dashed var(--color-gray2);
      margin: 0;
   }

   .modal-body dd:last-child {
      border-bottom: none;
      padding-bottom: 0;
   }

   /* フッター（固定） */
   .modal-footer {
      padding: 24px;
      background: var(--color-gray3);
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-shrink: 0;
   }

   .modal-footer button {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 16px 0;
      border-radius: 40px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s;
      width: 100%;
      max-width: 240px;
      font-family: var(--font-default);
      line-height: 1;
   }

   .btn-back {
      background: #fff;
      color: var(--color-red);
      border: 2px solid var(--color-red);
   }

   .btn-back:hover {
      background: var(--color-red2);
   }

   .btn-send {
      background: var(--color-red);
      color: #fff;
      border: 2px solid var(--color-red);
   }

   .btn-send:hover {
      background: var(--color-red3);
   }

   /* 送信完了後のメッセージエリア */
   .success-message {
      text-align: center;
      padding: 20px 0;
   }

   .success-message p {
      font-size: 18px;
      line-height: 1.8;
      margin-bottom: 32px;
   }

   /* SPレイアウト調整（スマホ表示時） */
   @media screen and (max-width: 540px) {
      .modal-footer {
         flex-direction: column;
         align-items: center;
         gap: 12px;
      }

      .modal-footer button {
         max-width: 100%;
      }

      /* スマホでは「送信する」を上に配置して押しやすくする */
      .btn-send {
         order: -1;
      }
   }
}


/* ============================= プライバシーポリシー本文スタイル ============================= */
@media screen {
   .privacy-content {
      color: #333;
   }

   .privacy-content h3 {
      font-size: 18px;
      font-weight: 700;
      color: var(--color-red);
      margin-top: 32px;
      margin-bottom: 12px;
      border-bottom: 2px solid var(--color-red2);
      padding-bottom: 6px;
   }

   .privacy-content p {
      font-size: 14px;
      line-height: 1.8;
      margin-bottom: 16px;
   }

   .privacy-content ol,
   .privacy-content ul {
      margin-left: 20px;
      margin-bottom: 16px;
      font-size: 14px;
      line-height: 1.8;
   }

   .privacy-content ol {
      list-style-type: decimal;
   }

   .privacy-content ul {
      list-style-type: disc;
   }

   .privacy-content ol ol {
      margin-top: 8px;
      list-style-type: lower-latin; /* a. b. c. で表示 */
   }

   .privacy-content li {
      margin-bottom: 8px;
   }

   /* プライバシーポリシー用 黒い閉じるボタン */
   .btn-black {
      background: #000;
      color: #fff;
      border: 2px solid #000;
   }

   .btn-black:hover {
      background: #333;
      border-color: #333;
   }
}