/* section title */

.section__title {
  padding-top: 18rem;
  margin-top: -14rem;
  background-image: url(../images/pc/service/02/top-visual.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.section__title h2 {
  font-size: 3.4rem
}

.title__header {
  padding-bottom: 4rem;
  padding-right: 4rem;
  padding-left: 4rem;
}

/* section intro */
.section__description {
  padding-bottom: 6rem;
}
.blank-1 {
  height: 10rem;
  background-color: #f7f7f7;
  background-color: var(--color-smoke);
}

.description__container {
  padding-bottom: 5rem;
  width: 80%;
  margin: 0 auto;
}

.description__container h2.text-primary {
  padding: 4rem;
  background-color: #e3ddcc;
  background-color: var(--color-brownlight);
  max-width: 40rem;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.description__container ul {
  list-style-type: square;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.description__container ul li {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 46%;
          flex: 0 1 46%;
  display: block;
  margin-top: 1.25rem;
}

/* section M&A */
.section__service {
  background-color: #f7f7f7;
  background-color: var(--color-smoke);
  /* padding-top: 6rem; */
  padding-bottom: 12rem;

}

.service__title__wrapper {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.service__title__wrapper h2 {
  display: inline-block;
  text-align: left;
  padding: 4rem 10rem;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          background-color: #f7f7f7;
  background-color: var(--color-smoke);
}

.services {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6rem;
  grid-row-gap: 4rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 4rem 1fr 4rem 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.services > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.services > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.services > *:nth-child(3) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.services > *:nth-child(4) {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
}

.services > *:nth-child(5) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}

.services > *:nth-child(6) {
  -ms-grid-row: 5;
  -ms-grid-column: 2;
}



.service__wrapper {
  padding: 4rem;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: white;
}

.service {
  margin-top: -8rem;
}

.service .text-paragraph {
  margin-top: 2rem;
}

/* section merit */
.section__merit {
  padding-bottom: 4rem;
}

.section__merit > h2 {
  text-align: center;
  width: 90%;
  margin: 0 auto;
}

.section__merit > h2 > span {
  background-color: #e3ddcc;
  background-color: var(--color-brownlight);
  padding: 4rem 10rem;
  margin: 0 auto;
  display: inline-block;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.merit__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  padding: 4rem 0;
  width: 75%;
  margin: auto;
}

.merit__box {
  -ms-flex-preferred-size: 45%;
      flex-basis: 45%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.merit__left {
  margin-right: 1rem
}

.merit__right {
  margin-left: 1rem
}

.merit__box > h2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.image__wrapper {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.8rem;
}

.image__wrapper img {
  width: 100%;
  height: auto;
}

.image__wrapper + span {
  margin-left: 2rem;
}

.merit__container ul {
  list-style: none;
}

.merit__container ul li {
  margin-top: 1rem;
}

/* section M&A role */
.section__role {
  background-color: #f7f7f7;
  background-color: var(--color-smoke);
  padding-top: 4rem;
  padding-bottom: 10rem;
  position: relative;
}

.section__role h2 {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 4rem;
}

.role__container {
  position: relative;
  background: -o-linear-gradient(left, #ccc 0%, #ccc 50%, #e3ddcc 50%, #e3ddcc 100%);
  background: -webkit-gradient(linear, left top, right top, from(#ccc), color-stop(50%, #ccc), color-stop(50%, #e3ddcc), to(#e3ddcc));
  background: linear-gradient(to right, #ccc 0%, #ccc 50%, #e3ddcc 50%, #e3ddcc 100%);
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.role__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.role__title > h3 {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  text-align: center;
}

.timeline__container {
  position: relative;
}

.timeline {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  position: relative;
  padding-bottom: 10rem;
  padding-top: 8rem;
    padding-bottom: 16rem;
    margin-top: 5rem;
}
.test {
  width: 100%;
  height: 1px;
  background-color: white;
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  border: 1px solid black;
  visibility: hidden;
}

.highlight {
  /* color:#ff4974; */
}
.ruler__wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  /* border: 1px solid red; */
  width: 100%;
  height: 100%;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 1px;
  background-color: black;
  top: 0;
  bottom: 5rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.right-1 {
  -ms-grid-row-span: 5;
  grid-row: span 5;
  -ms-grid-column: 2;
  grid-column: 2;
}

.timeline p,
.timeline-2 p {
  width: 60%;
  margin-top: 2rem;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  font-size: 1.6rem;
}

.timeline p span,
.timeline-2 p span {
  padding: 1.5rem 2rem;
  display: block;
  width: 100%;
  height: 100%;
}

.timeline p.row.right span {
      -webkit-transform: skewX(35deg);
          -ms-transform: skewX(35deg);
              transform: skewX(35deg);
}

.timeline p.left span {
      -webkit-transform: skewX(-35deg);
          -ms-transform: skewX(-35deg);
              transform: skewX(-35deg);
}
.timeline p.left {
  -webkit-transform: skewX(35deg);
      -ms-transform: skewX(35deg);
          transform: skewX(35deg);
}

.timeline p.row.right {
  -webkit-transform: skewX(-35deg);
      -ms-transform: skewX(-35deg);
          transform: skewX(-35deg);
}

.timeline-2 {
  overflow: hidden;
}

.col-1 {
  -ms-grid-column: 1;
}

.col-2 {
  -ms-grid-column: 2;
}

.row-1 {
  -ms-grid-row: 1;
}

.row-2 {
  -ms-grid-row: 2;
}

.row-3 {
  -ms-grid-row: 3;
}

.row-4 {
  -ms-grid-row: 4;
}

.row-5 {
  -ms-grid-row: 5;
}

.row-6 {
  -ms-grid-row: 6;
}

.row-7 {
  -ms-grid-row: 7;
}

.row-8 {
  -ms-grid-row: 8;
}

.row-9 {
  -ms-grid-row: 9;
}

.row-10 {
  -ms-grid-row: 10;
}

.row-11 {
  -ms-grid-row: 11;
}

.index__box span {
  background-color: white;
  text-align: center;
}

p.row.left::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 2%;
  height: 55%;
  width: calc(34% - 4.5rem);
  opacity: 0;
  -webkit-transition: all .8s ease;
  -o-transition: all .8s ease;
  transition: all .8s ease;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  overflow: hidden;
          display: inline-block;
}


p.highlight.right::after {
  -webkit-animation-name: arrowToLeft;
          animation-name: arrowToLeft;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
}

p.highlight.left::after {
  -webkit-animation-name: arrowToRight;
          animation-name: arrowToRight;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
}

@-webkit-keyframes arrowToLeft {
  0% {
    -webkit-transform: translate(0%, 25%);
            transform: translate(0%, 25%);
      opacity: 0;
  }

  100% {
      opacity: 1;
      -webkit-transform: translate(-100%, 25%);
              transform: translate(-100%, 25%);
  }
}

@keyframes arrowToLeft {
  0% {
    -webkit-transform: translate(0%, 25%);
            transform: translate(0%, 25%);
      opacity: 0;
  }

  100% {
      opacity: 1;
      -webkit-transform: translate(-100%, 25%);
              transform: translate(-100%, 25%);
  }
}

@-webkit-keyframes arrowToRight {
  0% {
    -webkit-transform: translate(0%, 25%);
            transform: translate(0%, 25%);
      opacity: 0;
  }

  100% {
      opacity: 1;
      -webkit-transform: translate(100%, 25%);
              transform: translate(100%, 25%);
  }
}

@keyframes arrowToRight {
  0% {
    -webkit-transform: translate(0%, 25%);
            transform: translate(0%, 25%);
      opacity: 0;
  }

  100% {
      opacity: 1;
      -webkit-transform: translate(100%, 25%);
              transform: translate(100%, 25%);
  }
}

p.row.right::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 2%;
  height: 55%;
  width: calc(34% - 4.5rem);
  opacity: 0;
  -webkit-transition: all .8s ease;
  -o-transition: all .8s ease;
  transition: all .8s ease;
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  overflow: hidden;
  display: inline-block;
}

.moveInLeft {
  -webkit-animation-name: moveLeft;
          animation-name: moveLeft;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-duration: .8s;
          animation-duration: .8s;
}

.moveInRight {
  -webkit-animation-name: moveRight;
          animation-name: moveRight;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-duration: .8s;
          animation-duration: .8s;
}

.moveInCenter {
  -webkit-animation-name: moveUp;
          animation-name: moveUp;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-duration: .8s;
          animation-duration: .8s;
  -webkit-animation-delay: .1s;
          animation-delay: .1s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.center {
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
      opacity: 0;
}

@-webkit-keyframes moveLeft {
  0% {
    -webkit-transform: translateX(-100%) skewX(35deg);
            transform: translateX(-100%) skewX(35deg);
      opacity: 0;
  }

  100% {
      opacity: 1;
      -webkit-transform: translateX(0) skewX(35deg);
              transform: translateX(0) skewX(35deg);
  }
}

@keyframes moveLeft {
  0% {
    -webkit-transform: translateX(-100%) skewX(35deg);
            transform: translateX(-100%) skewX(35deg);
      opacity: 0;
  }

  100% {
      opacity: 1;
      -webkit-transform: translateX(0) skewX(35deg);
              transform: translateX(0) skewX(35deg);
  }
}

@-webkit-keyframes moveRight {
  0% {
    -webkit-transform: translateX(100%) skewX(-35deg);
            transform: translateX(100%) skewX(-35deg);
      opacity: 0;
  }

  100% {
      opacity: 1;
      -webkit-transform: translateX(0) skewX(-35deg);
              transform: translateX(0) skewX(-35deg);
  }
}

@keyframes moveRight {
  0% {
    -webkit-transform: translateX(100%) skewX(-35deg);
            transform: translateX(100%) skewX(-35deg);
      opacity: 0;
  }

  100% {
      opacity: 1;
      -webkit-transform: translateX(0) skewX(-35deg);
              transform: translateX(0) skewX(-35deg);
  }
}

@-webkit-keyframes moveUp {
  0% {
    -webkit-transform: translateY(3em);
            transform: translateY(3em);
      opacity: 0;
  }

  100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
  }
}

@keyframes moveUp {
  0% {
    -webkit-transform: translateY(3em);
            transform: translateY(3em);
      opacity: 0;
  }

  100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
  }
}


.box__center {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / span 2;
  width: 30% !important;
}


.left-3 {
  -ms-grid-row-span: 3;
  grid-row: span 3;
}

.logo__ruler {
  width: 9rem;
  height: 9rem;
  background-color: white;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 50%;
  left: calc(50% - 4.5rem);
  /* -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);; */
          -webkit-animation-fill-mode: forwards;
                  animation-fill-mode: forwards;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.top__ruler,
.bot__ruler {
  width: 100%;
  height: 9rem;
  display: block;
  position: absolute;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  visibility: hidden;
}

.bot__ruler {
  bottom: 0;
}

.anim-logo {
  -webkit-animation-name: logoAnimation;
          animation-name: logoAnimation;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-duration: .8s;
          animation-duration: .8s;
}

@-webkit-keyframes logoAnimation {
  0% {
    -webkit-transform: translate(0%, 10rem);
        -ms-transform: translate(0%, 10rem);
            transform: translate(0%, 10rem);
    /* -webkit-transform: translate(-50%, 10rem);
        -ms-transform: translate(-50%, 10rem);
            transform: translate(-50%, 10rem); */
      opacity: 0;
  }

  100% {
    -webkit-transform: translate(0%, -50%);
        -ms-transform: translate(0%, -50%);
            transform: translate(0%, -50%);
      opacity: 1;
      /* -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); */
  }
}

@keyframes logoAnimation {
  0% {
    -webkit-transform: translate(0%, 10rem);
       -ms-transform: translate(0%, 10rem);
           transform: translate(0%, 10rem);
    /* -webkit-transform: translate(-50%, 10rem);
        -ms-transform: translate(-50%, 10rem);
            transform: translate(-50%, 10rem); */
      opacity: 0;
  }

  100% {
      opacity: 1;
      -webkit-transform: translate(0%, -50%);
          -ms-transform: translate(0%, -50%);
              transform: translate(0%, -50%);
      /* -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); */
  }
}

.logo__ruler img {
  width: 52%;
  height: auto;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/* M&A schedule */
/* service 1 content */
.service__content-1, .service__content-2, .service__content-3 {
  background-color: #e3ddcc;
  background-color: var(--color-brownlight);
  padding-bottom: 6rem;
}

.service__content-1 > h2.text-primary {

  width: 80%;
  margin: 0 auto;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.service__content-1 > h2.text-primary span {
  background-color: white;
  padding: 4rem 10rem;
  display: inline-block;
  max-width: 90rem;
  margin-right: auto;
  text-align: center;
}
/* flow box */
.flow__box {
  position: relative;
  border-left: 1px solid black;
  padding-left: 4rem;
  padding-bottom: 4rem;
  padding-right: 4rem;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.flow__box:not(:first-child) {
  margin-top: 4rem;
}

.flow__box h2 {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate(-35%, -30%);
      -ms-transform: translate(-35%, -30%);
          transform: translate(-35%, -30%);
          background-color: var(--color-brownlight);
  background-color: #e3ddcc;
}

.flow__box p.text-primary {
  position: relative;
}

.flow__box p.text-paragraph {
  margin-top: 2rem;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .logo__ruler {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 9rem;
    height: 9rem;
    background-color: white;
    border-radius: 50%;
    z-index: 1;
    top: 0;
  }

  .logo__sticky {
    position: fixed;
    top: 50%;
  }

  .logo__unstickybot {
    position: absolute;
    top: auto;
    bottom: 0;
  }
  /* .logo__unstickybot {
    position: fixed;
    bottom: 0;
  } */
}

@media only screen and (max-width: 1024px) {

  .services {
    width: 90%;
  }
  /* footer */
  .contact__buttons a.text-paragraph.text-center:last-child {
    width: 100%;
  }
}

@media only screen and (max-width: 768px) {
  .section__title {
    background-image: url(../images/sp/service/02/top-visual.jpg);
  }
}

@media only screen and (max-width: 640px) {
  .service__title__wrapper h2  {
    padding: 2rem 4rem;
  }
  /* section description */
  .description__container {
    width: 90%;
    padding-bottom: 4rem;
  }

  .description__container h2.text-primary {
    margin: 0 auto;
    padding: 2rem;
  }

  .description__container ul li {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
  }

  /* section M&A */
  .services {
    -ms-grid-rows: (1fr)[4];
    grid-template-rows: repeat(4, 1fr);
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -webkit-transform: translateY(-4rem);
        -ms-transform: translateY(-4rem);
            transform: translateY(-4rem);
  }
  .services > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .services > *:nth-child(2) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  .services > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .services > *:nth-child(4) {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
  }

  .service__wrapper {
    padding: 4rem 2rem;
  }

  .section__service {
    padding-bottom: 6rem;
  }
  .box__center {
    width: 60% !important;
  }
  .service__content-1 > h2.text-primary span {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  /* M&A merit */
  .section__merit > h2 > span {
    padding: 4rem 8rem;
  }
  .merit__container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-line-pack: center;
        align-content: center;
    padding: 0;
  }
  .merit__left {
    margin-right: initial;
  }
  .merit__right {
    margin-left: initial;
    margin-top: 6rem;
  }

  /* M&A schedule */
  .timeline {
    overflow-x: hidden;
  }
  .timeline p {
    margin-right: initial;
    margin-left: initial;
  }
  p.left {
    margin-left: 2rem;
  }
  p.right {
    margin-right: 2rem;
    margin-left: auto;
  }

  p.row.left::after,
  p.row.right::after {
    width: calc(67% - 6.5rem);
  }
  /* flow box */
.service__content-1 > h2.text-primary {
  width: 90%;
}
.flow__box {
  width: 90%;
  padding-top: 2rem;
  /*  BUG: mobile cant read var(--color-) for border */
  border-left: 1px solid black;
}

.flow__box h2 {
  -webkit-transform: translate(-35%, -63%);
      -ms-transform: translate(-35%, -63%);
          transform: translate(-35%, -63%);
  padding-left: 4rem;
}

.flow__box .text-paragraph {
  margin-top: 2rem;
}

.section__title h2 {
  font-size: 2.25rem
}

}

/* flow box - デスクトップ用 */
.flow__box {
  padding-top: 2rem;
}

/* CTA帯 */
.cta-row{
  background: var(--color-smoke, #f5f5f5);
  padding: 22px 0 60px;   /* 下に多めの余白を確保 */
  position: relative;
  z-index: 1;
}
.cta-row__inner{ position: relative; }

/* CTAボタン（子）を上に食い込ませる */
.cta-red{
  position: absolute;
  right: 10%;
  top: -50px;             /* ← ここで上にずらす。-20〜-40px目安で調整 */
  display: inline-flex;
  align-items: center;
  gap: 24px;
  background: #c64545;
  color: #fff;
  padding: 16px 24px 16px 28px;
  font: normal normal 500 16px/27px YuMincho;
  letter-spacing: 1.6px;
  text-align: center;
  text-decoration: none;
  border-radius: 2px;
  transition: filter .2s ease, transform .06s ease;
}
.cta-red:hover{ filter: brightness(1.05); transform: translateY(-1px); }


/* 矢印ライン */
.cta-arrow{
  display: inline-block;
  width: 6rem;
  margin: 0;
  /* -webkit-clip-path: polygon(0 78%, 100% 78%, 82% 28%, 79% 28%, 96% 73%, 0 73%);
          clip-path: polygon(0 78%, 100% 78%, 82% 28%, 79% 28%, 96% 73%, 0 73%); */
          border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: skewX(35deg);
-ms-transform: skewX(35deg);
        transform: skewX(35deg);
height: 1.8rem;
  -webkit-transition: all ease-in .2s;
  -o-transition: all ease-in .2s;
  transition: all ease-in .2s;
  overflow: hidden;
}

/* スマホ表示時のCTA調整 */
@media (max-width: 640px) {
  .cta-red {
    position: static;
    right: auto;
    top: auto;
    display: block;
    text-align: center;
    margin: 0 auto;
    width: 90%;
    max-width: 300px;
    margin-top: -50px;
  }
  
  .cta-arrow {
    display: none;
  }
}

/* ▼ CTA直下の見出しがつぶれる対策：transform を解除して正常描画に */
.section__service .service__title__wrapper h2{
  -webkit-transform: none !important;
  transform: none !important;
  margin: 24px auto 0;       /* 上に少し余白を足す（数値は微調整可） */
  display: inline-block;     /* 既存と合わせて明示 */
  background-color: var(--color-smoke); /* 既存の背景を維持 */
}

/* もし .cta-row の直後でのみ効かせたい場合はこちらでもOK */
.cta-row + .section__service .service__title__wrapper h2{
  -webkit-transform: none !important;
  transform: none !important;
  margin-top: 24px;
}