@charset "UTF-8";

/* ========================================
  制作の流れ（flow）
  body#flow 配下のみ
======================================== */
#flow {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 共通 blob が本文より前面に来ないように（このページのみ） */
#flow .ais-common-blob,
#flow .ais-common-blob--01.pc {
  z-index: 0;
}
#flow .ais-subpage__content {
  position: relative;
  z-index: 1;
}

/* ページ内リンクのアンカー（レイアウトはずらさずスクロール位置だけ調整） */
#flow .c-anchor {
  display: block;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px), print {
  #flow {

    /* ページ内リンクのアンカー */
    .c-anchor {
      padding-top: 40px;
      margin-top: -40px;
    }

    /* 共通 blob
    -------------------------------------*/
    .c-blob {
      position: absolute;
      z-index: 0;
      display: block;
      line-height: 0;
      pointer-events: none;
    }
    .c-blob svg {
      display: block;
      width: 100%;
      height: auto;
    }

    /* 共通 c-section-title
    -------------------------------------*/
    .c-section-title {
      margin-bottom: 48px;
      font-size: clamp(26px, 22.000px + 0.521vw, 32px); /* 768px ~ 1920px */
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.1em;
      text-align: center;
    }
    .c-section-title span {
      display: inline-block;
      margin-bottom: 15px;
      padding: 5px 30px;
      line-height: calc(40 / 32);
      letter-spacing: 0.1em;
      color: #FFF;
    }

    /* 共通 c-list
    -------------------------------------*/
    .c-list {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 70px;
      width: min(95%, 1200px);
      margin-inline: auto;
    }
    .c-list__item {
      position: relative;
    }
    .c-list__item:not(:last-child)::after {
      position: absolute;
      z-index: 2;
      bottom: 10px;
      left: 50%;
      width: 128px;
      height: auto;
      aspect-ratio: 127.27 / 50;
      content: "";
      transform: translate(-50%, 100%);
    }
    .c-list__step-title {
      position: relative;
      z-index: 2;
      width: 320px;
      margin-inline: auto;
      padding: 10px;
      font-size: 20px;
      font-weight: 700;
      line-height: calc(40 / 20);
      letter-spacing: 0.1em;
      text-align: center;
      background-color: #FFF;
      border: 1px solid currentColor;
      border-radius: 999px;
    }
    .c-list__step-title--m {
      width: 400px;
    }
    .c-list__step-title--l {
      width: 460px;
    }
    .c-list__media {
      position: relative;
      z-index: 1;
      margin-top: -31px;
      padding-block: 70px 50px;
      padding-inline: clamp(30px, -6.456px + 4.747vw, 60px); /* 768px ~ 1400px */
      border-radius: 30px;
    }
    .c-list__media-head {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: clamp(20px, -4.304px + 3.165vw, 40px); /* 768px ~ 1400px */
    }
    .c-list__text-area {
      flex-shrink: 0;
      width: clamp(320px, 101.266px + 28.481vw, 500px); /* 768px ~ 1400px */
    }
    .c-list__media-title {
      margin-bottom: 23px;
      font-size: clamp(16px, 8.709px + 0.949vw, 22px); /* 768px ~ 1400px */
      font-weight: 700;
      line-height: calc(36 / 22);
      letter-spacing: 0.1em;
    }
    .c-list__media-desc-wrap {
      display: flex;
      flex-direction: column;
      gap: clamp(12px, -9.873px + 2.848vw, 30px); /* 768px ~ 1400px */
    }
    .c-list__media-desc {
      font-size: clamp(13px, 9.354px + 0.475vw, 16px); /* 768px ~ 1400px */
      font-weight: 400;
      line-height: calc(30 / 16);
      letter-spacing: 0;
    }
    .c-list__media-desc span {
      font-weight: 500;
    }
    .c-list__image-area {
      flex-shrink: 0;
      width: clamp(330px, 74.810px + 33.228vw, 540px); /* 768px ~ 1400px */
      height: auto;
    }
    .c-list__image-area img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
    .c-list__btm-area {
      display: flex;
      align-items: center;
      gap: 30px;
      margin-top: 38px;
      padding-top: 30px;
      background-position: left top;
      background-size: 14px 1px;
      background-repeat: repeat-x;
    }
    .c-list__btm-label {
      flex-shrink: 0;
      padding-block: 10px;
      padding-inline: clamp(20px, -4.304px + 3.165vw, 40px); /* 768px ~ 1400px */
      color: #FFF;
      font-size: clamp(13px, 9.354px + 0.475vw, 16px); /* 768px ~ 1400px */
      font-weight: 500;
      line-height: calc(34 / 16);
      letter-spacing: 0;
      border-radius: 999px;
    }
    .c-list__btm-desc {
      font-size: clamp(13px, 9.354px + 0.475vw, 16px); /* 768px ~ 1400px */
      font-weight: 500;
      line-height: calc(30 / 16);
      letter-spacing: 0;
    }
    .c-list__media-desc-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      list-style: none;
    }
    .c-list__media-desc-list li {
      position: relative;
      padding-left: 30px;
      font-size: clamp(13px, 9.354px + 0.475vw, 16px); /* 768px ~ 1400px */
      font-weight: 400;
      line-height: calc(34 / 16);
      letter-spacing: 0;
    }
    .c-list__media-desc-list li::before {
      position: absolute;
      top: 50%;
      left: 0;
      width: 18px;
      height: auto;
      aspect-ratio: 1;
      content: "";
      background: url(../images/flow/media-list-icon.svg) no-repeat center / contain;
      transform: translateY(-50%);
    }


    /* fv
    -------------------------------------*/
    .fv__inner {
      padding-top: 113px;
      padding-bottom: 81px;
    }
    .fv__list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      width: min(95%, 1000px);
      margin-inline: auto;
      margin-bottom: 49px;
    }
    .fv__item {
      width: clamp(354px, 267.333px + 11.285vw, 484px); /* 768px ~ 1920px */
      padding-block:clamp(8px, 2.000px + 0.781vw, 17px); /* 768px ~ 1920px */
      font-size: clamp(14px, 11.333px + 0.347vw, 18px); /* 768px ~ 1920px */
      font-weight: 700;
      line-height: calc(44.1 / 18);
      letter-spacing: 0;
      text-align: center;
      background-color: #fff;
      border-radius: 999px;
      filter: drop-shadow(0 4.71px 18.82px rgba(61, 61, 61, 0.2));
    }
    .fv__desc {
      margin-bottom: 30px;
      font-size: clamp(14px, 11.333px + 0.347vw, 18px); /* 768px ~ 1920px */
      font-weight: 500;
      line-height: calc(38 / 18);
      letter-spacing: 0;
      text-align: center;
    }
    .fv__note {
      font-size: 16px;
      font-weight: 500;
      line-height: calc(32 / 16);
      letter-spacing: 0;
      text-align: center;
    }
    .fv__note span {
      font-size: 14px;
      line-height: calc(32 / 14);
    }

    
    /* 制作フェーズナビ */
    .ais-mv__nav {
      position: relative;
      width: min(95%, 1600px);
      height: 298px;
      margin-inline: auto;
      border-radius: 40px;
      background: linear-gradient(95deg, #FDAC30 1.75%, #AECB85 100%);
      z-index: 1;
    }
    .ais-mv__nav::before {
      position: absolute;
      content: "";
      border: 1px solid #FFF;
      border-radius: 30px;
      inset: 10px;
      pointer-events: none;
    }
    .ais-mv__nav-list {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40px;
      height: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .ais-mv__nav-item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 3px;
      width: 380px;
      height: 90px;
      padding: 15px 44px 15px 30px;
      color: inherit;
      text-decoration: none;
      background-color: #FFF;
      border: 2px solid currentColor;
      border-radius: 200px;
      box-shadow: 0 4px 16px rgba(61, 61, 61, 0.2);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .ais-mv__nav-item::after {
      position: absolute;
      top: 50%;
      right: 15px;
      width: 28px;
      height: 28px;
      content: "";
      background: url(../images/common/btn-arrow-b.svg) no-repeat center / contain;
      transform: translateY(-50%) rotate(90deg);
    }
    .ais-mv__nav-item:hover {
      opacity: 0.88;
      text-decoration: none;
      transform: translateY(-1px);
    }
    .ais-mv__nav-item--before {
      color: #ED6C00;
    }
    .ais-mv__nav-item--before .ais-mv__nav-label {
      background-color: #ED6C00;
    }
    .ais-mv__nav-item--production {
      color: #72C576;
    }
    .ais-mv__nav-item--production .ais-mv__nav-label {
      background-color: #72C576;
    }
    .ais-mv__nav-item--after {
      color: #3DB4B7;
    }
    .ais-mv__nav-item--after .ais-mv__nav-label {
      background-color: #3DB4B7;
    }
    .ais-mv__nav-label {
      font-size: 16px;
      font-weight: 500;
      line-height: calc(28 / 16);
      letter-spacing: 0.1em;
      color: #FFF;
    }
    .ais-mv__nav-txt {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: 0.1em;
      text-align: center;
    }

    /* deco-img */
    .ais-mv__nav-deco-img {
      position: absolute;
      top: 0;
      transform: translateY(-100%);
      height: auto;
      object-fit: contain;
    }
    .ais-mv__nav-deco-img:nth-of-type(1) {
      left: clamp(-6px, -217.333px + 27.517vw, 311px);/* 768px ~ 1920px */
      width: clamp(157px, 123.667px + 4.34vw, 207px); /* 768px ~ 1920px */
    }
    .ais-mv__nav-deco-img:nth-of-type(2) {
      right: clamp(0px, -220.000px + 28.646vw, 330px); /* 768px ~ 1920px */
      width: clamp(144px, 110.667px + 4.34vw, 194px); /* 768px ~ 1920px */
    }
    .ais-mv__nav-deco-img img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }


    /* contract
    -------------------------------------*/
    /* blob */
    .contract__blob--01 {
      top: clamp(-100px, -166.667px + 8.681vw, 0px); /* 768px ~ 1920px */
      left: calc(50% - min(50vw, 960px));
      width: clamp(360px, 295.333px + 8.42vw, 457px); /* 768px ~ 1920px */
    }
    .contract__blob--02 {
      top: 50px;
      right: calc(50% - min(50vw, 960px));
      width: clamp(400px, 264.667px + 17.622vw, 603px); /* 768px ~ 1920px */
      transform: translateY(-50%);
    }
    .contract__blob--03 {
      top: clamp(-210px, -296.667px + 11.285vw, -80px); /* 768px ~ 1920px */
      left: calc(50% - min(50vw, 960px));
      width: clamp(400px, 262px + 17.969vw, 607px); /* 768px ~ 1920px */
    }
    .contract__blob--04 {
      top: clamp(230px, 380.000px + -7.813vw, 320px);
      right: calc(50% - min(50vw, 960px));
      width: clamp(400px, 262.667px + 17.882vw, 606px); /* 768px ~ 1920px */
    }

    .contract {
      margin-top: clamp(-234px, -17.333px + -11.285vw, -104px); /* 768px ~ 1920px */
    }
    .contract__bg-wave {
      position: relative;
      line-height: 0;
    }
    .contract__bg-wave img {
      display: block;
      width: 100%;
      height: auto;
    }
    .contract__inner {
      margin-top: -1px;
      padding-top: 34px;
      padding-bottom: 213px;
      background-color: #FFE6B7;
    }
    .contract__title {
      color: #ED6C00;
    }
    .contract__title span {
      background-color: #ED6C00;
    }

    .contract .c-list__item:not(:last-child)::after {
      background: url(../images/flow/contract-media-arrow.svg) no-repeat center / contain;
    }
    .contract .c-list__step-title {
      color: #ED6C00;
    }
    .contract .c-list__media {
      background-color: #FFF3DB;
    }
    .contract .c-list__btm-area {
      background-image: repeating-linear-gradient(
        90deg,
        #ED6C00 0 7px,
        transparent 7px 14px
      );
    }
    .contract .c-list__btm-label {
      background-color: #ED6C00;
    }


    /* creation
    -------------------------------------*/
    /* blob */
    .creation__blob--01 {
      top: clamp(-100px, -166.667px + 8.681vw, 0px); /* 768px ~ 1920px */
      left: calc(50% - min(50vw, 960px));
      width: clamp(360px, 295.333px + 8.42vw, 457px); /* 768px ~ 1920px */
    }
    .creation__blob--02 {
      top: 320px;
      right: calc(50% - min(50vw, 960px));
      width: clamp(400px, 264.667px + 17.622vw, 603px); /* 768px ~ 1920px */
    }
    .creation__blob--03 {
      top: clamp(-350px, -166.667px + -9.549vw, -240px);
      left: calc(50% - min(50vw, 960px));
      width: clamp(400px, 262px + 17.969vw, 607px); /* 768px ~ 1920px */
    }
    .creation__blob--04 {
      z-index: 1;
      top: clamp(-180px, -246.667px + 8.681vw, -80px); /* 768px ~ 1920px */
      right: calc(50% - min(50vw, 960px));
      width: clamp(400px, 262.667px + 17.882vw, 606px); /* 768px ~ 1920px */
    }

    .creation {
      margin-top: clamp(-134px, -34.000px + -5.208vw, -74px); /* 768px ~ 1920px */
    }
    .creation__bg-wave {
      position: relative;
      line-height: 0;
    }
    .creation__bg-wave img {
      display: block;
      width: 100%;
      height: auto;
    }
    .creation__inner {
      position: relative;
      margin-top: clamp(-160px, 40.000px + -10.417vw, -40px);/* 768px ~ 1920px */
      padding-bottom: clamp(0px, 66.667px + -3.472vw, 40px); /* 768px ~ 1920px */
      background-color: #FFEFCD;
    }

    .creation__title {
      color: #7BC87C;
    }
    .creation__title span {
      background-color: #7BC87C;
    }
    .creation .c-list__item:not(:last-child)::after {
      background: url(../images/flow/creation-media-arrow.svg) no-repeat center / contain;
    }
    .creation .c-list__step-title {
      color: #7BC87C;
    }
    .creation .c-list__media {
      background-color: #FFF7E6;
    }
    .creation .c-list__btm-area {
      background-image: repeating-linear-gradient(
        90deg,
        #7BC87C 0 7px,
        transparent 7px 14px
      );
    }
    .creation .c-list__btm-label {
      background-color: #7BC87C;
    }

    .creation__btm-wave {
      position: relative;
      z-index: 1;
      width: 100%;
      margin-top: -45px;
      line-height: 0;
      pointer-events: none;
    }
    .creation__btm-wave img {
      display: block;
      width: 100%;
      height: auto;
    }


    /* release
    -------------------------------------*/
    .release__inner {
      position: relative;
      margin-top: clamp(-150px, -66.667px + -4.34vw, -100px);
      padding-top: 230px;
      padding-bottom: 30px;
      background-color: #FEE8B8;
    }

    .release__title {
      color: #3EB7B9;
    }
    .release__title span {
      background-color: #3EB7B9;
    }
    .release .c-list__item:not(:last-child)::after {
      background: url(../images/flow/release-media-arrow.svg) no-repeat center / contain;
    }
    .release .c-list__step-title {
      color: #3EB7B9;
    }
    .release .c-list__media {
      background-color: #FFF3DB;
    }

    .release .c-list__btm-label {
      background-color: #3EB7B9;
    }
    .release__wave {
      position: relative;
      z-index: 0;
      width: 100%;
      margin-top: -80px;
      line-height: 0;
      overflow: hidden;
      pointer-events: none;
    }
    .release__wave-svg {
      display: block;
      width: 100%;
      height: auto;
    }
    .release__wave-static {
      display: none;
      width: 100%;
      height: auto;
    }
    @media (prefers-reduced-motion: reduce) {
      .release__wave-svg--motion {
        display: none;
      }
      .release__wave-static {
        display: block;
      }
    }


    /* end-msg
    -------------------------------------*/
    .end-msg__inner {
      position: relative;
      padding-top: 73px;
      padding-bottom: clamp(112px, 12.000px + 13.021vw, 262px);
      background-color: #fffbf1;
    }

    .end-msg__title {
      margin-bottom: 52px;
      font-size: clamp(26px, 22.000px + 0.521vw, 32px); /* 768px ~ 1920px */
      font-weight: 700;
      line-height: calc(72 / 32);
      letter-spacing: 0.1em;
      text-align: center;
    }
    .end-msg__title span:not(.pc) {
      font-size: clamp(36px, 26.667px + 1.215vw, 50px); /* 768px ~ 1920px */
      line-height: calc(72 / 72);
      color: #F2486D;
      letter-spacing: 0.1em;
    }
    .end-msg__title .pc {
      display: inline !important; /* .pc の block を打ち消し（読点の出し分け用） */
    }

    .end-msg__media {
      display: flex;
      justify-content: center;
      gap: clamp(20px, -16.456px + 4.747vw, 50px); /* 768px ~ 1400px */
      width: min(95%, 1280px);
      margin-inline: auto;
    }
    .end-msg__image-area {
      flex-shrink: 0;
      width: clamp(360px, 68.354px + 37.975vw, 600px); /* 768px ~ 1400px */
    }
    .end-msg__image-area img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
    .end-msg__text-area {
      flex-shrink: 0;
      width: clamp(350px, 9.747px + 44.304vw, 630px); /* 768px ~ 1400px */
    }
    .end-msg__text-title {
      width: max-content;
      margin-top: 20px;
      margin-bottom: clamp(16px, -1.013px + 2.215vw, 30px); /* 768px ~ 1400px */
      font-size: clamp(24px, 17.924px + 0.791vw, 29px); /* 768px ~ 1400px */
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.1em;
      transform: translateX(clamp(-70px, 5.316px - 5.380vw, -36px)); /* 768px ~ 1400px */
    }
    .end-msg__text-title span {
      display: inline-block;
      padding: 8px;
      background-color: #fff;
    }
    .end-msg__text-title span .em {
      margin: 0;
      padding: 0;
      color: #ED6C00;
    }
    .end-msg__text-desc-wrap {
      display: flex;
      flex-direction: column;
      gap: clamp(16px, -1.013px + 2.215vw, 30px); /* 768px ~ 1400px */
    }
    .end-msg__text-desc {
      font-size: clamp(13px, 9.354px + 0.475vw, 16px); /* 768px ~ 1400px */
      font-weight: 400;
      line-height: calc(30 / 16);
      letter-spacing: 0;
      color: #000;
    }
    .end-msg__text-desc span {
      font-size: clamp(15px, 11.354px + 0.475vw, 18px); /* 768px ~ 1400px */
      font-weight: 700;
      line-height: calc(30 / 18);
      letter-spacing: 0;
      color: #ED6C00;
    }


  }
} /* end min-width: 768px */



/* ========================================
  @media screen and (min-width: 768px) and (max-width: 1919px)
======================================== */
@media screen and (min-width: 768px) and (max-width: 1919px) {
  #flow {
    .ais-mv__nav {
      width: min(95%, 83.333vw);
      height: 15.521vw;
      border-radius: 2.083vw;
    }
    .ais-mv__nav::before {
      border-radius: 1.563vw;
      inset: 0.521vw;
    }
    .ais-mv__nav-list {
      gap: clamp(8px, -13.333px + 2.778vw, 40px); /* 768px ~ 1920px */
    }
    .ais-mv__nav-item {
      gap: 0.156vw;
      width: clamp(200px, 80.000px + 15.625vw, 380px); /* 768px ~ 1920px */
      height: clamp(53px, 28.333px + 3.212vw, 90px); /* 768px ~ 1920px */
      padding: 0.781vw 2.292vw 0.781vw 1.563vw;
      border-radius: 10.417vw;
      box-shadow: 0 0.208vw 0.833vw rgba(61, 61, 61, 0.2);
    }
    .ais-mv__nav-item::after {
      right: 0.781vw;
      width: clamp(16px, 8.000px + 1.042vw, 28px);
      height: auto;
      aspect-ratio: 1 / 1;
    }
    .ais-mv__nav-label {
      padding: 0.104vw 0.677vw;
      font-size: clamp(10px, 7.333px + 0.347vw, 14px); /* 768px ~ 1920px */
    }
    .ais-mv__nav-txt {
      font-size: clamp(11px, 7.667px + 0.434vw, 16px); /* 768px ~ 1920px */
    }
  }
}




/* ========================================
  @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
  #flow {

    /* 共通 blobのflowページ用に調整 */
    .has-ais-common-blob .ais-common-blob--01.sp {
      top: -2vw;
    }
    .has-ais-common-blob .ais-common-blob--03.sp {
      display: none !important;
    }

    /* ページ内リンクのアンカー */
    .c-anchor {
      padding-top: 9.7vw;
      margin-top: -9.7vw;
 
    }


    /* 共通 blob
    -------------------------------------*/
    .c-blob {
      position: absolute;
      z-index: 0;
      display: block;
      line-height: 0;
      pointer-events: none;
    }
    .c-blob svg {
      display: block;
      width: 100%;
      height: auto;
    }

    /* 共通 c-section-title
    -------------------------------------*/
    .c-section-title {
      margin-bottom: 7.2vw;
      font-size: 5.8vw;
      font-weight: 700;
      line-height: calc(32 / 24);
      letter-spacing: 0.1em;
      text-align: center;
    }
    .c-section-title span {
      display: inline-block;
      margin-bottom: 3.6vw;
      padding: 0 7.2vw;
      font-size: 4.8vw;
      line-height: calc(40 / 20);
      letter-spacing: 0.1em;
      color: #FFF;
    }

    /* 共通 c-list
    -------------------------------------*/
    .c-list {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 12.1vw;
      width: 100%;
      margin-inline: auto;
      padding-inline: 4.1vw;
    }
    .c-list__item {
      position: relative;
    }
    .c-list__item:not(:last-child)::after {
      position: absolute;
      z-index: 2;
      bottom: 2.4vw;
      left: 50%;
      width: 25.6vw;
      height: auto;
      aspect-ratio: 127.27 / 50;
      content: "";
      transform: translate(-50%, 100%);
    }
    .c-list__step-title {
      position: relative;
      z-index: 2;
      width: 67.6vw;
      margin-inline: auto;
      padding: 2.9vw;
      font-size: 3.9vw;
      font-weight: 700;
      line-height: calc(26 / 16);
      letter-spacing: 0.1em;
      text-align: center;
      background-color: #FFF;
      border: 0.2vw solid currentColor;
      border-radius: 999px;
    }
    .c-list__step-title--m {
      width: 67.6vw;
    }
    .c-list__step-title--l {
      width: 77.3vw;
    }
    .c-list__step-title--multiline {
      padding-block: 1.9vw;
      line-height: calc(26 / 16);
    }
    .c-list__step-title--multiline + .c-list__media {
      margin-top: -10.2vw;
      padding-top: 14.2vw;
    }
    .c-list__media {
      position: relative;
      z-index: 1;
      margin-top: -6.5vw;
      padding-block: 10.9vw 9.7vw;
      padding-inline: 6.9vw;
      border-radius: 7.2vw;
    }
    .c-list__media-head {
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
      align-items: flex-start;
      gap: 4.8vw;
    }
    .c-list__text-area {
      width: 100%;
    }
    .c-list__media-title {
      margin-bottom: 4.8vw;
      font-size: 4.3vw;
      font-weight: 700;
      line-height: calc(32 / 18);
      letter-spacing: 0.1em;
    }
    .c-list__media-desc-wrap {
      display: flex;
      flex-direction: column;
      gap: 7.2vw;
    }
    .c-list__media-desc {
      font-size: 3.9vw;
      font-weight: 400;
      line-height: calc(30 / 16);
      letter-spacing: 0;
    }
    .c-list__media-desc span {
      font-weight: 500;
    }
    .c-list__image-area {
      width: 100%;
    }
    .c-list__image-area img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
    .c-list__btm-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4.8vw;
      margin-top: 7.2vw;
      padding-top: 7.2vw;
      background-position: left top;
      background-size: 1.7vw 0.2vw;
      background-repeat: repeat-x;
    }
    .c-list__btm-label {
      width: 100%;
      padding-block: 2.4vw;
      color: #FFF;
      font-size: 3.9vw;
      font-weight: 500;
      line-height: calc(34 / 16);
      letter-spacing: 0;
      text-align: center;
      border-radius: 999px;
    }
    .c-list__btm-desc {
      font-size: 3.9vw;
      font-weight: 500;
      line-height: calc(30 / 16);
      letter-spacing: 0;
    }
    .c-list__media-desc-list {
      display: flex;
      flex-direction: column;
      gap: 3.6vw;
      list-style: none;
    }
    .c-list__media-desc-list li {
      position: relative;
      padding-left: 8.2vw;
      font-size: 3.9vw;
      font-weight: 400;
      line-height: calc(28 / 16);
      letter-spacing: 0;
    }
    .c-list__media-desc-list li::before {
      position: absolute;
      top: 0.7vw;
      left: 0;
      width: 5.8vw;
      height: auto;
      aspect-ratio: 1 / 1;
      content: "";
      background: url(../images/flow/media-list-icon.svg) no-repeat center / contain;
    }


    /* fv
    -------------------------------------*/
    .fv__inner {
      padding-top: 4.3vw;
      padding-inline: 8.9vw;
      padding-bottom: 34.3vw;
    }
    .fv__list {
      display: flex;
      flex-direction: column;
      gap: 4.8vw;
      width: 100%;
      margin-bottom: 7.2vw;
    }
    .fv__item {
      width: 100%;
      padding: 3.6vw;
      font-size: 3.9vw;
      font-weight: 700;
      line-height: calc(28 / 16);
      letter-spacing: 0;
      text-align: center;
      background-color: #fff;
      border-radius: 999px;
      filter: drop-shadow(0 1vw 3.9vw rgba(61, 61, 61, 0.2));
    }
    .fv__item:nth-of-type(2),
    .fv__item:nth-of-type(3) {
     padding: 4.9vw;
    }
    .fv__desc {
      margin-bottom: 7.2vw;
      font-size: 3.9vw;
      font-weight: 700;
      line-height: 2;
      letter-spacing: 0;
    }
    .fv__note {
      font-size: 3.9vw;
      font-weight: 500;
      line-height: calc(30 / 16);
      letter-spacing: 0;
    }
    .fv__note span {
      font-size: 3.4vw;
      line-height: calc(30 / 14);
    }

    /* 制作フェーズナビ */
    .ais-mv__nav {
      position: relative;
      width: min(95%, 82.13vw);
      margin-inline: auto;
      padding-block: 9.5vw;
      border-radius: 4.83vw;
      background: linear-gradient(95deg, #FDAC30 1.75%, #AECB85 100%);
      z-index: 1;
    }
    .ais-mv__nav::before {
      position: absolute;
      content: "";
      border: 0.2vw solid #FFF;
      border-radius: 3.86vw;
      inset: 2.9vw;
      pointer-events: none;
    }
    .ais-mv__nav-list {
      position: relative;
      display: grid;
      gap: 3.86vw;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .ais-mv__nav-item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.72vw;
      width: 67.6vw;
      margin-inline: auto;
      padding-top: 4.8vw;
      padding-bottom: 10.1vw;
      color: inherit;
      text-decoration: none;
      background-color: #FFF;
      border: 0.82vw solid currentColor;
      border-radius: 7.2vw;
      box-shadow: 0 1.9vw 7.5vw rgba(61, 61, 61, 0.2);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .ais-mv__nav-item::after {
      content: "";
      position: absolute;
      bottom: 2.4vw;
      left: 50%;
      width: 6.8vw;
      height: auto;
      aspect-ratio: 1 / 1;
      background: url(../images/common/btn-arrow-b.svg) no-repeat center / contain;
      transform: translateX(-50%) rotate(90deg);
    }
    .ais-mv__nav-item:hover {
      opacity: 0.88;
      text-decoration: none;
      transform: translateY(-1px);
    }
    .ais-mv__nav-item--before {
      color: #ED6C00;
    }
    .ais-mv__nav-item--before .ais-mv__nav-label {
      background-color: #ED6C00;
    }
    .ais-mv__nav-item--production {
      color: #72C576;
    }
    .ais-mv__nav-item--production .ais-mv__nav-label {
      background-color: #72C576;
    }
    .ais-mv__nav-item--after {
      color: #3DB4B7;
    }
    .ais-mv__nav-item--after .ais-mv__nav-label {
      background-color: #3DB4B7;
    }
    .ais-mv__nav-label {
      /* padding: 0.48vw 3.14vw; */
      color: #FFF;
      font-size: 3.9vw;
      font-weight: 500;
      line-height: calc(28 / 16);
      letter-spacing: 0.1em;
    }
    .ais-mv__nav-txt {
      font-size: 4.3vw;
      font-weight: 700;
      line-height: calc(28 / 18);
      letter-spacing: 0.1em;
      text-align: center;
    }

    /* deco-img */
    .ais-mv__nav-deco-img {
      position: absolute;
      top: 0;
      height: auto;
      object-fit: contain;
      transform: translateY(-131%);
    }
    .ais-mv__nav-deco-img:nth-of-type(1) {
      left: 6.8vw;
      width: 30.9vw;
    }
    .ais-mv__nav-deco-img:nth-of-type(2) {
      right: 7.2vw;
      width: 29vw;
    }
    .ais-mv__nav-deco-img img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }


    /* contract
    -------------------------------------*/
    /* blob */
    .contract__blob--01 {
      top: -40vw;
      left: calc(50% - 50vw);
      width: 51.7vw;
    }
    .contract__blob--02 {
      top: -26.6vw;
      right: calc(50% - 50vw);
      width: 40.6vw;
    }
    .contract__blob--03 {
      top: -41.1vw;
      left: calc(50% - 50vw);
      width: 44.4vw;
    }
    .contract__blob--04 {
      right: calc(50% - 50vw);
      bottom: -60.4vw;
      width: 53.9vw;
    }

    .contract {
      margin-top: -116vw;
    }
    .contract__bg-wave {
      position: relative;
      line-height: 0;
    }
    .contract__bg-wave img {
      display: block;
      width: 100%;
      height: auto;
    }
    .contract__inner {
      margin-top: -0.2vw;
      padding-top: 116vw;
      padding-bottom: 19.3vw;
      background-color: #FFE6B7;
    }
    .contract__title {
      color: #ED6C00;
    }
    .contract__title span {
      background-color: #ED6C00;
    }

    .contract .c-list__item:not(:last-child)::after {
      background: url(../images/flow/contract-media-arrow.svg) no-repeat center / contain;
    }
    .contract .c-list__step-title {
      color: #ED6C00;
    }
    .contract .c-list__media {
      background-color: #FFF3DB;
    }
    .contract .c-list__btm-area {
      background-image: repeating-linear-gradient(
        90deg,
        #ED6C00 0 0.8vw,
        transparent 0.8vw 1.7vw
      );
    }
    .contract .c-list__btm-label {
      background-color: #ED6C00;
    }


    /* creation
    -------------------------------------*/
    /* blob */
    .creation__blob--02 {
      top: -38.6vw;
      left: calc(50% - 50vw);
      width: 38vw;
    }
    .creation__blob--03 {
      top: -41.1vw;
      right: calc(50% - 50vw);
      width: 47.8vw;
    }

    .creation .c-list__item:nth-of-type(1) .c-list__step-title,
    .creation .c-list__item:nth-of-type(3) .c-list__step-title,
    .creation .c-list__item:nth-of-type(4) .c-list__step-title {
      width: 67.6vw;
    }

    .creation {
      margin-top: -7.2vw;
    }
    .creation__bg-wave {
      position: relative;
      line-height: 0;
    }
    .creation__bg-wave img {
      display: block;
      width: 100%;
      height: auto;
    }
    .creation__inner {
      position: relative;
      margin-top: -7.2vw;
      padding-top: 12.3vw;
      padding-bottom: 14.5vw;
      background-color: #FFEFCD;
    }

    .creation__title {
      color: #7BC87C;
    }
    .creation__title span {
      background-color: #7BC87C;
    }
    .creation .c-list__item:not(:last-child)::after {
      background: url(../images/flow/creation-media-arrow.svg) no-repeat center / contain;
    }
    .creation .c-list__step-title {
      color: #7BC87C;
    }
    .creation .c-list__media {
      background-color: #FFF7E6;
    }
    .creation .c-list__btm-area {
      background-image: repeating-linear-gradient(
        90deg,
        #7BC87C 0 0.8vw,
        transparent 0.8vw 1.7vw
      );
    }
    .creation .c-list__btm-label {
      background-color: #7BC87C;
    }

    .creation__btm-wave {
      position: relative;
      z-index: 1;
      width: 100%;
      margin-top: -10.9vw;
      line-height: 0;
      pointer-events: none;
    }
    .creation__btm-wave img {
      display: block;
      width: 100%;
      height: auto;
    }


    /* release
    -------------------------------------*/
    /* blob */
    .release__blob--01 {
      top: 0;
      left: 0;
      width: 51.7vw;
    }

    .release__inner {
      position: relative;
      margin-top: -6vw;
      padding-top: 14vw;
      padding-bottom: 2.9vw;
      background-color: #FEE8B8;
    }

    .release__title {
      position: relative;
      z-index: 1;
      color: #3EB7B9;
    }
    .release__title span {
      background-color: #3EB7B9;
    }
    .release .c-list__item:not(:last-child)::after {
      background: url(../images/flow/release-media-arrow.svg) no-repeat center / contain;
    }
    .release .c-list__step-title {
      color: #3EB7B9;
    }
    .release .c-list__media {
      background-color: #FFF3DB;
    }
    .release .c-list__btm-label {
      background-color: #3EB7B9;
    }

    .release__wave {
      position: relative;
      z-index: 1;
      width: 100%;
      margin-top: -0.2vw;
      line-height: 0;
      overflow: hidden;
      pointer-events: none;
    }
    .release__wave-svg {
      display: block;
      width: 100%;
      height: auto;
    }
    .release__wave-static {
      display: none;
      width: 100%;
      height: auto;
    }
    @media (prefers-reduced-motion: reduce) {
      .release__wave-svg--motion {
        display: none;
      }
      .release__wave-static {
        display: block;
      }
    }


    /* end-msg
    -------------------------------------*/
    .end-msg__inner {
      position: relative;
      padding-top: 14.5vw;
      padding-bottom: 34.3vw;
      padding-inline: 4.1vw;
      background-color: #fffbf1;
    }

    .end-msg__title {
      margin-bottom: 7.2vw;
      font-size: 5.8vw;
      font-weight: 700;
      line-height: calc(36 / 24);
      letter-spacing: 0.1em;
      text-align: center;
    }
    .end-msg__title span:not(.pc) {
      font-size: 7.7vw;
      line-height: calc(46 / 32);
      color: #F2486D;
      letter-spacing: 0.1em;
    }

    .end-msg__media {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
      width: 100%;
      margin-inline: auto;
    }
    .end-msg__image-area {
      width: 100%;
    }
    .end-msg__image-area img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
    .end-msg__text-area {
      width: 100%;
    }
    .end-msg__text-title {
      width: 100%;
      margin-top: -4.6vw;
      margin-bottom: 6vw;
      font-size: 4.8vw;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.1em;
    }
    .end-msg__text-title span {
      display: inline-block;
      padding: 1.4vw;
      background-color: #fff;
    }
    .end-msg__text-title span .em {
      margin: 0;
      padding: 0;
      color: #ED6C00;
    }
    .end-msg__text-desc-wrap {
      display: flex;
      flex-direction: column;
      gap: 7.2vw;
    }
    .end-msg__text-desc {
      font-size: 3.9vw;
      font-weight: 400;
      line-height: calc(30 / 16);
      letter-spacing: 0;
      color: #000;
    }
    .end-msg__text-desc span {
      font-size: 4.3vw;
      font-weight: 700;
      line-height: calc(30 / 18);
      letter-spacing: 0;
      color: #ED6C00;
    }


  }
}