/* ==================================================
   SERVICE ANCHOR
================================================== */

.service-anchor {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 16px;

  width: min(
    calc(100% - 80px),
    720px
  );

  margin:
    2rem
    auto;
}


/* ==================================================
   ANCHOR LINK
================================================== */

.service-anchor__link {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;

  padding:
    10px
    18px;

  border-radius: 8px;

  text-decoration: none;

  transition:
    color var(--transition),
    background-color var(--transition),
    border-color var(--transition),
    opacity var(--transition);
}

.service-anchor__link p {
  margin: 0;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;

  white-space: nowrap;
}


/* ==================================================
   01 私たちの強み
================================================== */

.service-anchor__link:nth-child(1) {
  color: #FFFFFF;

  background-color: #00549C;

  border: 1px solid #00549C;
}


/* ==================================================
   02 商品一覧
================================================== */

.service-anchor__link:nth-child(2) {
  color: #FFFFFF;

  background-color: #087CC6;

  border: 1px solid #087CC6;
}


/* ==================================================
   03 納品までの流れ
================================================== */

.service-anchor__link:nth-child(3) {
  color: #FFFFFF;

  background-color: #078FE5;

  border: 1px solid #078FE5;
}


/* ==================================================
   04 よくある質問
================================================== */

.service-anchor__link:nth-child(4) {
  color: var(--color-button);

  background-color: #FFFFFF;

  border: 1px solid var(--color-button);
}


/* ==================================================
   ANCHOR ARROW
================================================== */

.service-anchor__arrow {
  position: absolute;

  left: 50%;
  bottom: -13px;

  width: 16px;
  height: 8px;

  background-color: currentColor;

  clip-path: polygon(
    1px 0,
    15px 0,
    16px 1px,
    9px 7px,
    8px 8px,
    7px 7px,
    0 1px
  );

  font-size: 0;
  line-height: 0;

  transform: translateX(-50%);

  transition: transform var(--transition);
}


/* ==================================================
   ARROW COLOR
================================================== */

/* 01 */
.service-anchor__link:nth-child(1)
.service-anchor__arrow {
  color: #00549C;
}


/* 02 */
.service-anchor__link:nth-child(2)
.service-anchor__arrow {
  color: #087CC6;
}


/* 03 */
.service-anchor__link:nth-child(3)
.service-anchor__arrow {
  color: #078FE5;
}


/* 04 */
/* 04 よくある質問：枠線だけの三角 */
.service-anchor__link:nth-child(4)
.service-anchor__arrow {
  color: var(--color-button);

  width: 16px;
  height: 8px;

  background: transparent;

  clip-path: none;

  border: 0;

  transform: translateX(-50%);
}


/* 外枠 */
.service-anchor__link:nth-child(4)
.service-anchor__arrow::before {
  content: "";

  position: absolute;
  inset: 0;

  background-color: var(--color-button);

  clip-path: polygon(
    0 0,
    16px 0,
    8px 8px
  );
}


/* 中抜き */
.service-anchor__link:nth-child(4)
.service-anchor__arrow::after {
  content: "";

  position: absolute;

  left: 2px;
  top: 1px;

  width: 12px;
  height: 6px;

  background-color: #FFFFFF;

  clip-path: polygon(
    0 0,
    12px 0,
    6px 6px
  );
}

/* ==================================================
   HOVER
================================================== */

@media (hover: hover) {

  .service-anchor__link:hover {
    opacity: 0.8;
  }

  .service-anchor__link:nth-child(1):hover
  .service-anchor__arrow,
  .service-anchor__link:nth-child(2):hover
  .service-anchor__arrow,
  .service-anchor__link:nth-child(3):hover
  .service-anchor__arrow,
  .service-anchor__link:nth-child(4):hover
  .service-anchor__arrow
  {
    transform:
      translateX(-50%)
      translateY(3px);
  }

}


/* ==================================================
   TABLET
================================================== */

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

  .service-anchor {
    width: min(
      calc(100% - 60px),
      680px
    );

    margin-bottom: 90px;
  }

}


/* ==================================================
   SP
================================================== */

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

  .service-anchor {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      22px
      10px;

    width: calc(100% - 40px);

    margin:
      40px
      auto
      80px;
  }

  .service-anchor__link {
    width: 100%;

    min-height: 42px;

    padding:
      10px
      12px;
  }

  .service-anchor__link p {
    font-size: 11px;
  }

}

/* ==================================================
   SERVICE STRENGTH
================================================== */

.service-strength {
  position: relative;

  width: 100%;

  padding:
    130px
    0
    170px;

  isolation: isolate;
}


/* ==================================================
   BACKGROUND
================================================== */

.service-strength__bg {
  position: absolute;
  z-index: -1;

  inset: 0;

  /*
    添付の ser-st-back.png
    CMSへアップしたURLに変更してください
  */
  background-image: url("https://marinebase.jp/system_panel/uploads/images/ser-st-back.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;

  overflow: hidden;

  pointer-events: none;
}


/*
  下側だけ白く湾曲させる
---------------------------------------- */

.service-strength__bg::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -115px;

  width: max(1800px, 165vw);
  height: 185px;

  background-color: #FFFFFF;

  border-radius: 50%;

  transform: translateX(-50%);
}


/* ==================================================
   INNER
================================================== */

.service-strength__inner {
  position: relative;
  z-index: 2;

  width: min(
    calc(100% - 80px),
    900px
  );

  margin: 0 auto;
}


/* ==================================================
   SECTION TITLE
================================================== */

.service-section-title {
  display: flex;
  align-items: center;

  gap: 10px;

  width: min(100%, 760px);

  margin:
    0
    auto
    48px;
}


/* Mark
---------------------------------------- */

.service-section-title__mark {
  width: 12px;
  height: 12px;

  flex-shrink: 0;

  background-color: var(--color-button);

  border-radius: 50%;
}


/* Title
---------------------------------------- */

.service-section-title h2 {
  margin: 0;

  color: var(--color-button);

  font-family: var(--font-base);
  font-size: 28px;
  font-weight: 600;

  line-height: 1.5;
}


/* ==================================================
   STRENGTH LIST
================================================== */

.service-strength__list {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap: 60px;
  row-gap: 72px;

  width: min(100%, 800px);

  margin: 0 auto;
}


/* ==================================================
   STRENGTH ITEM
================================================== */

.service-strength__item {
  width: 100%;
}


/*
  右列を少し下げる
  01  ─────
       02  ─────

  03  ─────
       04  ─────
---------------------------------------- */

.service-strength__item:nth-child(even) {
  transform: translateY(45px);
}


/* ==================================================
   IMAGE
================================================== */

.service-strength__image {
  width: 100%;

  aspect-ratio: 1.45 / 1;

  overflow: hidden;

  border-radius: 16px;
}

.service-strength__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform
    0.8s
    cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==================================================
   ITEM TITLE
================================================== */

.service-strength__title {
  margin:
    18px
    0
    0;

  color: var(--color-button);

  font-family: var(--font-base);
  font-size: 24px;
  font-weight: 600;

  line-height: 1.5;
  letter-spacing: 0.01em;
}


/* ==================================================
   ITEM TEXT
================================================== */

.service-strength__text {
  margin:
    13px
    0
    0;

  color: var(--color-text);

  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 400;

  line-height: 1.85;
  letter-spacing: 0.01em;
}

/* ==================================================
   TABLET
================================================== */

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

  .service-strength {
    padding:
      110px
      0
      145px;
  }


  /* Background
  ---------------------------------------- */

  .service-strength__bg {
    background-size: 100% 100%;
  }

  .service-strength__bg::after {
    bottom: -90px;

    width: 190vw;
    height: 150px;
  }


  /* Inner
  ---------------------------------------- */

  .service-strength__inner {
    width: min(
      calc(100% - 60px),
      820px
    );
  }


  /* Section Title
  ---------------------------------------- */

  .service-section-title {
    width: min(100%, 680px);

    margin-bottom: 44px;
  }


  /* List
  ---------------------------------------- */

  .service-strength__list {
    width: min(100%, 650px);

    column-gap: 42px;
    row-gap: 60px;
  }


  /* Stagger
  ---------------------------------------- */

  .service-strength__item:nth-child(even) {
    transform: translateY(32px);
  }


  /* Title
  ---------------------------------------- */

  .service-strength__title {
    font-size: 16px;
  }

}


/* ==================================================
   SP
================================================== */

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

  .service-strength {
    padding:
      90px
      0
      105px;
    background-color: #E5F2FF;
    border-top: 1rem solid #0474C7;
  }


  /* Background
  ---------------------------------------- */

  .service-strength__bg {
    /*
      SPでは高さが大きくなるので
      セクション全体に背景を合わせる
    */
    display: none;
  }

  .service-strength__bg::after {
    bottom: -48px;

    width: 230vw;
    height: 85px;
  }


  /* Inner
  ---------------------------------------- */

  .service-strength__inner {
    width: calc(100% - 40px);
  }


  /* Section Title
  ---------------------------------------- */

  .service-section-title {
    width: 100%;

    margin-bottom: 36px;
  }

  .service-section-title__mark {
    width: 10px;
    height: 10px;
  }

  .service-section-title h2 {
    font-size: 20px;
  }


  /* List
  ---------------------------------------- */

  .service-strength__list {
    grid-template-columns: 1fr 1fr;

    width: 100%;

    row-gap: 30px;
  }


  /*
    SPでは段違いを解除
  ---------------------------------------- */

  .service-strength__item:nth-child(even) {
    transform: none;
  }


  /* Image
  ---------------------------------------- */

  .service-strength__image {
    aspect-ratio: 1.5 / 1;

    border-radius: 14px;
  }


  /* Title
  ---------------------------------------- */

  .service-strength__title {
    margin-top: 14px;

    font-size: 16px;
  }


  /* Text
  ---------------------------------------- */

  .service-strength__text {
    margin-top: 10px;

    font-size: 13px;
    line-height: 1.8;
  }

}


/* ==================================================
   SMALL SP
================================================== */

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

  .service-strength__inner {
    width: calc(100% - 32px);
  }

  .service-strength__bg::after {
    width: 250vw;
  }
  
  /* List
  ---------------------------------------- */

  .service-strength__list {
    grid-template-columns: 1fr;

    width: 100%;

    row-gap: 42px;
  }


}


/* ==================================================
   SERVICE PRODUCTS
================================================== */

.service-products {
  position: relative;

  width: 100%;

  padding:
    90px
    0
    140px;

  background-color: #FFFFFF;
}


/* ==================================================
   INNER
================================================== */

.service-products__inner {
  width: min(
    calc(100% - 80px),
    900px
  );
}


/* ==================================================
   SECTION TITLE
================================================== */

.service-products .service-section-title {
  width: min(100%, 800px);

  margin:
    0
    auto
    65px;
}


/* ==================================================
   GROUP
================================================== */

.service-products__group {
  width: min(100%, 700px);

  margin: 0 auto;
}

.service-products__group + .service-products__group {
  margin-top: 70px;
}


/* ==================================================
   GROUP HEAD
================================================== */

.service-products__group-head {
  display: flex;
  align-items: center;

  width: 100%;

  margin-bottom: 20px;
}


/* ==================================================
   NUMBER
================================================== */

.service-products__number {
  flex-shrink: 0;

  margin: 0 12px 0 0;

  color: var(--color-button);

  font-size: 24px;
  font-weight: 500;

  line-height: 1;
}


/* ==================================================
   GROUP TITLE
================================================== */

.service-products__group-title {
  flex-shrink: 0;

  margin: 0 18px 0 0;

  color: var(--color-button);

  font-family: var(--font-base);
  font-size: 20px;
  font-weight: 600;

  line-height: 1.5;
}


/* ==================================================
   LINE
================================================== */

.service-products__line {
  width: 100%;
  height: 1px;
  margin-bottom: 2rem;

  background-color: var(--color-border);
}


/* ==================================================
   LIST
================================================== */

.service-products__list {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;

  gap: 14px;

  width: 100%;
}


/* ==================================================
   ITEM
================================================== */

.service-products__item {
  width: 200px;
}


/* ==================================================
   IMAGE
================================================== */

.service-products__image {
  width: 100%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background-color: #F5F5F5;

  border-radius: 14px;
}

.service-products__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform
    0.7s
    cubic-bezier(0.22, 1, 0.36, 1);
}


/* Placeholder
---------------------------------------- */

.service-products__image--placeholder {
  background-color: #D5D5D5;
}


/* ==================================================
   PRODUCT NAME
================================================== */

.service-products__name {
  margin: 8px 0 0;

  color: var(--color-text);

  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 400;

  line-height: 1.5;
}

/* ==================================================
   TABLET
================================================== */

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

  .service-products {
    padding:
      80px
      0
      120px;
  }


  /* Inner
  ---------------------------------------- */

  .service-products__inner {
    width: min(
      calc(100% - 60px),
      820px
    );
  }


  /* Width
  ---------------------------------------- */

  .service-products .service-section-title,
  .service-products__group {
    width: min(100%, 680px);
  }


  /* Group
  ---------------------------------------- */

  .service-products__group + .service-products__group {
    margin-top: 60px;
  }

}


/* ==================================================
   SP
================================================== */

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

  .service-products {
    padding:
      70px
      0
      90px;
  }


  /* Inner
  ---------------------------------------- */

  .service-products__inner {
    width: calc(100% - 40px);
  }


  /* Section Title
  ---------------------------------------- */

  .service-products .service-section-title {
    width: 100%;

    margin-bottom: 50px;
  }


  /* Group
  ---------------------------------------- */

  .service-products__group {
    width: 100%;
  }

  .service-products__group + .service-products__group {
    margin-top: 52px;
  }


  /* Group Head
  ---------------------------------------- */

  .service-products__group-head {
    margin-bottom: 16px;
  }


  /* Number
  ---------------------------------------- */

  .service-products__number {
    margin-right: 8px;

    font-size: 20px;
  }


  /* Title
  ---------------------------------------- */

  .service-products__group-title {
    margin-right: 12px;

    font-size: 14px;
  }


  /* List
  ---------------------------------------- */

  .service-products__list {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      22px
      12px;
  }


  /* Item
  ---------------------------------------- */

  .service-products__item {
    width: 100%;
  }


  /* Image
  ---------------------------------------- */

  .service-products__image {
    border-radius: 12px;
  }


  /* Name
  ---------------------------------------- */

  .service-products__name {
    margin-top: 7px;

    font-size: 14px;
  }

}


/* ==================================================
   SMALL SP
================================================== */

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

  .service-products__inner {
    width: calc(100% - 32px);
  }

}


/* ==================================================
   FLOW
================================================== */

.service-flow {
  position: relative;

  width: 100%;

  padding:
    110px
    0
    140px;

  overflow: hidden;
  isolation: isolate;
}

.service-flow::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -2;

  background-image: url("https://marinebase.jp/system_panel/uploads/images/flow-back.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* 下側をより強く湾曲に切り取る */
.service-flow::after {
  content: "";

  position: absolute;
  left: 50%;
  bottom: -240px;
  z-index: -1;

  width: max(1900px, 180vw);
  height: 360px;

  background-color: #FFFFFF;

  border-radius: 50%;

  transform: translateX(-50%);
}

.service-flow__inner {
  width: min(
    calc(100% - 80px),
    980px
  );
}

.service-flow .service-section-title {
  width: fit-content;

  margin:
    0
    auto
    60px;
}

.service-flow .service-section-title h2 {
  margin: 0;

  color: var(--color-button);

  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}


/* List
---------------------------------------- */

.service-flow__list {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    18px
    minmax(0, 1fr)
    18px
    minmax(0, 1fr)
    18px
    minmax(0, 1fr);

  align-items: start;
  gap: 18px;
}


/* Item
---------------------------------------- */

.service-flow__item {
  text-align: left;
}

.service-flow__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 64px;
  height: 64px;

  margin: 0 auto 18px;
}

.service-flow__icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.service-flow__title {
  margin: 0 0 12px;

  color: var(--color-button);

  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.service-flow__text {
  margin: 0;

  color: var(--color-text);

  font-size: 13px;
  font-weight: 400;
  line-height: 2;
}


/* Arrow
---------------------------------------- */

.service-flow__arrow {
  position: relative;

  width: 18px;
  height: 18px;

  margin-top: 88px;
}

.service-flow__arrow::before {
  content: "";

  position: absolute;

  top: 4px;
  left: 50%;

  width: 8px;
  height: 12px;

  background-color: var(--color-button);

  clip-path: polygon(0 0, 100% 50%, 0 100%);

  transform: translateX(-50%);
}


/* ==================================================
   FAQ
================================================== */

.service-faq {
  position: relative;

  width: 100%;

  padding:
    10px
    0
    110px;

  background-color: #FFFFFF;
}

.service-faq__inner {
  width: min(
    calc(100% - 80px),
    760px
  );
}

.service-faq .service-section-title {
  width: fit-content;

  margin:
    0
    auto
    42px;
}

.service-faq .service-section-title h2 {
  margin: 0;

  color: var(--color-button);

  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}


/* List
---------------------------------------- */

.service-faq__item {
  border-bottom: 1px solid #D9D9D9;
}


/* Question
---------------------------------------- */

.service-faq__question {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    22px
    0
    18px;

  background: transparent;
  border: none;
  border-radius: 0;

  text-align: left;
  cursor: pointer;
}

.service-faq__question-main {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  min-width: 0;
  flex: 1;
}

.service-faq__q {
  flex-shrink: 0;

  margin: 0;

  color: var(--color-button);

  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}

.service-faq__question-text {
  margin: 0;

  color: var(--color-text);

  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
}


/* Toggle
---------------------------------------- */

.service-faq__toggle {
  position: relative;

  flex-shrink: 0;

  width: 20px;
  height: 20px;
}

.service-faq__toggle::before,
.service-faq__toggle::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  background-color: var(--color-text);

  transform: translate(-50%, -50%);

  transition: opacity var(--transition);
}

.service-faq__toggle::before {
  width: 12px;
  height: 1.5px;
}

.service-faq__toggle::after {
  width: 1.5px;
  height: 12px;
}

.accordion__title.close .service-faq__toggle::after {
  opacity: 0;
}


/* Answer
---------------------------------------- */

.service-faq__answer {
  display: none;

  padding:
    0
    40px
    22px
    36px;
}

.service-faq__answer p {
  margin: 0;

  color: var(--color-text);

  font-size: 14px;
  font-weight: 400;
  line-height: 2;
}

@media screen and (max-width: 1024px) {
  .service-flow {
    padding:
      95px
      0
      120px;
  }

  .service-flow::after {
    bottom: -105px;
    height: 190px;
  }
}

@media screen and (max-width: 768px) {
  .service-flow {
    padding:
      80px
      0
      95px;
  }

  .service-flow::after {
    bottom: -60px;
    width: 220vw;
    height: 110px;
  }
}


/* ==================================================
   TABLET
================================================== */

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

  .service-flow {
    padding:
      95px
      0
      110px;
  }

  .service-flow__inner,
  .service-faq__inner {
    width: min(
      calc(100% - 60px),
      900px
    );
  }

  .service-flow__list {
    gap: 14px;

    grid-template-columns:
      minmax(0, 1fr)
      14px
      minmax(0, 1fr)
      14px
      minmax(0, 1fr)
      14px
      minmax(0, 1fr);
  }

  .service-flow__title {
    font-size: 16px;
  }

  .service-flow__text {
    font-size: 12px;
  }

}


/* ==================================================
   SP
================================================== */

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

  .service-flow {
    padding:
      80px
      0
      90px;
  }

  .service-faq {
    padding:
      0
      0
      80px;
  }

  .service-flow__inner,
  .service-faq__inner {
    width: calc(100% - 40px);
  }

  .service-flow .service-section-title,
  .service-faq .service-section-title {
    margin-bottom: 36px;
  }

  .service-flow .service-section-title h2,
  .service-faq .service-section-title h2 {
    font-size: 24px;
  }


  /* Flow
  ---------------------------------------- */

  .service-flow__list {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .service-flow__arrow {
    width: 100%;
    height: 18px;

    margin: -4px 0 0;
  }

  .service-flow__arrow::before {
    top: 50%;
    left: 50%;

    width: 12px;
    height: 8px;

    clip-path: polygon(0 0, 100% 0, 50% 100%);

    transform: translate(-50%, -50%);
  }

  .service-flow__item {
    max-width: 280px;
    margin: 0 auto;
  }

  .service-flow__icon {
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
  }

  .service-flow__title {
    margin-bottom: 10px;

    font-size: 16px;
  }

  .service-flow__text {
    font-size: 12px;
    line-height: 1.9;
  }


  /* FAQ
  ---------------------------------------- */

  .service-faq__question {
    gap: 14px;

    padding:
      18px
      0
      16px;
  }

  .service-faq__question-main {
    gap: 10px;
  }

  .service-faq__q {
    font-size: 18px;
  }

  .service-faq__question-text {
    font-size: 14px;
    line-height: 1.7;
  }

  .service-faq__answer {
    padding:
      0
      28px
      18px
      28px;
  }

  .service-faq__answer p {
    font-size: 12px;
    line-height: 1.9;
  }

}

/* ==================================================
   GrapesJS EDITOR
   編集画面ではFAQ回答を常時表示
================================================== */

.service-faq__answer[data-gjs-type],
.accordion__box[data-gjs-type] {
  display: block !important;
}



/* ==================================================
   MAKER CTA
================================================== */

.service-maker-cta {
  width: 100%;

  padding:
    90px
    0
    120px;

  background-color: #FFFFFF;
}


/* ==================================================
   BOX
================================================== */

.service-maker-cta__box {
  position: relative;

  width: min(100%, 900px);

  margin: 0 auto;

  overflow: visible;

  background-color: #FFFFFF;

  border-radius: 22px;

  box-shadow:
    0 8px 22px
    rgba(0, 0, 0, 0.1);
}


/* ==================================================
   VISUAL
================================================== */

.service-maker-cta__visual {
  width: 100%;
  height: 240px;

  overflow: hidden;

  border-radius:
    22px
    22px
    0
    0;
}

.service-maker-cta__visual img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* ==================================================
   CATCH
================================================== */

.service-maker-cta__catch {
  position: absolute;

  top: -20px;
  left: 50%;

  z-index: 3;

  min-width: 420px;

  padding:
    14px
    30px;

  color: #FFFFFF;
  background-color: #333333;

  border-radius:
    0
    0
    14px
    14px;

  font-size: 20px;
  font-weight: 600;

  line-height: 1.4;
  text-align: center;

  transform: translateX(-50%);
}


/* ==================================================
   MERITS
================================================== */

.service-maker-cta__merits {
  position: absolute;

  top: 70px;
  left: 50%;

  z-index: 3;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 8px;

  width: min(
    calc(100% - 80px),
    530px
  );

  transform: translateX(-50%);
}


/* ==================================================
   MERIT
================================================== */

.service-maker-cta__merit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 115px;

  padding:
    14px
    10px;

  background-color:
    rgba(255, 255, 255, 0.94);

  border-radius: 14px;

  text-align: center;

  box-shadow:
    0 4px 12px
    rgba(0, 0, 0, 0.08);
}


/* ==================================================
   ICON
================================================== */

.service-maker-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  margin-bottom: 5px;
}

.service-maker-cta__icon img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* ==================================================
   MERIT TEXT
================================================== */

.service-maker-cta__merit-title,
.service-maker-cta__merit-text {
  margin: 0;
}

.service-maker-cta__merit-title {
  color: var(--color-button);

  font-size: 13px;
  font-weight: 700;

  line-height: 1.5;
}

.service-maker-cta__merit-text {
  color: var(--color-text);

  font-size: 10px;
  font-weight: 400;

  line-height: 1.5;
}


/* ==================================================
   BOTTOM
================================================== */

.service-maker-cta__bottom {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 35px;

  padding:
    36px
    36px
    32px;
}


/* ==================================================
   CONTENT
================================================== */

.service-maker-cta__content {
  min-width: 0;
}

.service-maker-cta__lead {
  margin: 0 0 8px;

  color: var(--color-button);

  font-size: 14px;
  font-weight: 600;

  line-height: 1.6;
}

.service-maker-cta__text {
  margin: 0;

  color: var(--color-text);

  font-size: 12px;
  font-weight: 400;

  line-height: 1.9;
}


/* ==================================================
   BUTTON
================================================== */

.service-maker-cta__button {
  display: grid;

  grid-template-columns:
    220px
    58px;

  gap: 10px;

  color: var(--color-text);

  text-decoration: none;
}


/* Text
---------------------------------------- */

.service-maker-cta__button-text {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 58px;

  padding:
    10px
    20px;

  background-color: #FFFFFF;

  border: 1px solid var(--color-border);
  border-radius: 14px;

  font-size: 13px;
  font-weight: 600;

  transition:
    color var(--transition),
    border-color var(--transition);
}


/* Arrow
---------------------------------------- */

.service-maker-cta__button-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 58px;

  background-color: var(--color-button);

  border-radius: 14px;

  box-shadow:
    0 4px 10px
    rgba(0, 78, 152, 0.15);

  font-size: 0;

  transition:
    background-color var(--transition),
    transform var(--transition);
}


/* 矢印画像 */
.service-maker-cta__button-arrow::before {
  content: "";

  display: block;

  width: 18px;
  height: 18px;

  background-image: url("https://marinebase.jp/system_panel/uploads/images/btn-arrow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/* ==================================================
   HOVER
================================================== */

@media (hover: hover) {

  .service-maker-cta__button:hover
  .service-maker-cta__button-text {
    color: var(--color-button);

    border-color: var(--color-button);
  }

  .service-maker-cta__button:hover
  .service-maker-cta__button-arrow {
    background-color: var(--color-blue-dark);

    transform: translateX(3px);
  }

}


/* ==================================================
   TABLET
================================================== */

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

  .service-maker-cta {
    padding:
      80px
      0
      100px;
  }

  .service-maker-cta__box {
    width: min(100%, 820px);
  }

  .service-maker-cta__bottom {
    gap: 25px;

    padding:
      34px
      28px
      30px;
  }

  .service-maker-cta__button {
    grid-template-columns:
      190px
      56px;
  }

}


/* ==================================================
   SP
================================================== */

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

  .service-maker-cta {
    padding:
      65px
      0
      85px;
  }


  /* Box
  ---------------------------------------- */

  .service-maker-cta__box {
    width: 100%;

    border-radius: 18px;
  }


  /* Visual
  ---------------------------------------- */

  .service-maker-cta__visual {
    height: 180px;

    border-radius:
      18px
      18px
      0
      0;
  }


  /* Catch
  ---------------------------------------- */

  .service-maker-cta__catch {
    top: -16px;

    min-width: 0;
    width: calc(100% - 60px);

    padding:
      11px
      18px;

    border-radius:
      0
      0
      12px
      12px;

    font-size: 16px;
  }


  /* Merits
  ---------------------------------------- */

  .service-maker-cta__merits {
    top: 58px;

    width: calc(100% - 30px);

    gap: 6px;
  }

  .service-maker-cta__merit {
    min-height: 105px;

    padding:
      12px
      6px;

    border-radius: 12px;
  }

  .service-maker-cta__icon {
    width: 28px;
    height: 28px;
  }

  .service-maker-cta__merit-title {
    font-size: 11px;
  }

  .service-maker-cta__merit-text {
    font-size: 8px;
  }


  /* Bottom
  ---------------------------------------- */

  .service-maker-cta__bottom {
    grid-template-columns: 1fr;

    gap: 25px;

    padding:
      28px
      20px
      22px;
  }

  .service-maker-cta__lead {
    font-size: 13px;
  }

  .service-maker-cta__text {
    font-size: 11px;
  }

  .service-maker-cta__text br {
    display: none;
  }


  /* Button
  ---------------------------------------- */

  .service-maker-cta__button {
    grid-template-columns:
      minmax(0, 1fr)
      56px;

    width: 100%;

    gap: 8px;
  }

  .service-maker-cta__button-text,
  .service-maker-cta__button-arrow {
    min-height: 54px;
  }

}


/* ==================================================
   SMALL SP
================================================== */

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

  .service-maker-cta__catch {
    width: calc(100% - 40px);

    font-size: 15px;
  }

}