@charset 'UTF-8';
/* ==========================================================================
   CUSTOM STYLESHEET
   ==========================================================================
   1. Reset & Base Styles
      1.1 Bootstrap
      1.2 WorPress
   2. Components
   3. Utilities
   4. Layout
      4.1 Header
      4.2 Navigation
      4.3 Footer
      4.4 Main Content
   ========================================================================== */

/* ==========================================================================
   1. Reset & Base Styles
   ========================================================================== */

html {
  box-sizing: border-box;
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.7;
  color: #333;
  background-color: #f7f7f9;
}
@media (max-width: 376px) {
  body {
    font-size: 13px;
    letter-spacing: -1px;
  }
  p {
    font-size: 13px;
    letter-spacing: -1px;
  }
}

p {
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem;
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  line-height: 1.25;
}

h1 {
  font-size: clamp(1.3rem, 4vw, 2rem);
}
h2 {
  font-size: clamp(1.25rem, 3vw, 1.8rem);
}
h3 {
  font-size: clamp(1.2rem, 2.75vw, 1.6rem);
}
h4 {
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
}
h5 {
  font-size: clamp(1.1rem, 2.25vw, 1.3rem);
}
h6 {
  font-size: clamp(1.05rem, 2vw, 1.15rem);
}

.fc-0{ color: #cf3696 !important; }
.fc-1{ color: #335e60 !important; }
.fc-2{ color: #567d7a !important; }
.fc-3{ color: #799d94 !important; }
.fc-4{ color: #9dbdaf !important; }
.fc-5{ color: #ebf7df !important; }

.fs-8 { font-size: 0.8rem; }
.fs-9 { font-size: 0.9rem; }
.fs-10{ font-size: 1.0rem; }
.fs-11{ font-size: 1.1rem; }
.fs-12{ font-size: 1.2rem; }
.fs-13{ font-size: 1.3rem; }
.fs-14{ font-size: 1.4rem; }
.fs-15{ font-size: 1.5rem; }
.fs-16{ font-size: 1.6rem; }
.fs-17{ font-size: 1.7rem; }
.fs-18{ font-size: 1.8rem; }
.fs-19{ font-size: 1.9rem; }
.fs-20{ font-size: 2.0rem; }

.bgc-0{ background-color: #cf3696 !important; }
.bgc-1{ background-color: #335e60 !important; }
.bgc-2{ background-color: #567d7a !important; }
.bgc-3{ background-color: #799d94 !important; }
.bgc-4{ background-color: #9dbdaf !important; }
.bgc-5{ background-color: #ebf7df !important; }

blockquote {
  position: relative;
  padding: 1rem 2rem;
  background-color: #f7f7f9;
  border-radius: 1rem;
}
blockquote::before {
  content: "\f10d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solidアイコンの場合は900 */
  position: absolute;
  left: .5rem;
  top: .5rem;
  color: #DDD;
}
blockquote::after {
  content: "\f10e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solidアイコンの場合は900 */
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  color: #DDD;
}
blockquote p:last-child {
  margin-bottom: 0;
}
ol, ul {
  padding-left: 1.5rem;
}
li p:last-child {
  margin-bottom: 0;
}

hr {
  opacity: 0.15;
}

.centered-list {
  display: table;
  margin: 0 auto 1.5rem; 
  padding: 0;
  list-style-position: inside;
}
.centered-list li {
  text-align: left;
  padding-left: .25rem;
}

.centered-dl {
  display: table;
  margin: 0 auto;
  text-align: left;
}

.centered-dl dt {
  font-weight: bold;
  margin-top: 1rem;
}
.centered-dl dd {
  margin-left: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed #DDD;
}

a {
  text-decoration: none;
}
a.text-underline {
  text-decoration: underline;
}
a.text-underline:hover {
  text-decoration: none;
}

ul.kome-mark {
  list-style: none; /* デフォルトのマーカーを消す */
  padding-left: 1em; /* 左余白を調整 */
}

ul.kome-mark li {
  position: relative;
  padding-left: 1.2em; /* テキストと※の間隔 */
}

ul.kome-mark li::before {
  content: "※";
  position: absolute;
  left: 0;
}

.tac {
  text-align: center;
}
.vam {
  vertical-align: middle;
}

.badge-style-01 {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .5rem 1.5rem;
  text-align: center;
  color: #325c5e;
  background-color: #FFF;
  box-shadow: 0px 5px 5px 0px rgba(100, 100, 100, 0.15);
  border-radius: 10rem;
}
.badge-style-01 p {
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: 0;
  color: #325c5e;
  font-size: clamp(14px, 1.9vw, 20px);
  font-weight: 700;
  letter-spacing: 1px;
}
.sub-copy-style-01 p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 700;
}
.sub-copy-style-01 .text-strong {
  padding: .1rem .2rem;
  color: #FFF;
  background: linear-gradient(transparent 0%, #333 0%);
}

.balloon-style-01 {
  position: relative;
  display: inline-block;
  margin-bottom: .75rem;
  padding: .5rem 1rem;
  text-align: center;
  color: #FFF;
  background-color: #567d7a;
  border-radius: .75rem;
  line-height: 1.25;
}
.balloon-style-01 p {
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: 0;
  color: #FFF;
  font-size: clamp(15px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.25;
}
.balloon-style-01 strong {
  font-size: 130%;
  line-height: 1;
  font-weight: 700;
}
.balloon-style-01::after {
  position: absolute;
  right: 32px;
  bottom: -10px;
  content: "";
  width: 16px;
  height: 20px;
  background-image: url("../img/balloon-style-01.png");
  background-repeat: no-repeat;
  /* z-index: -1; */
}
@media (min-width: 992px) {
  .balloon-style-01 {
    margin-bottom: 1rem;
  }
  .balloon-style-01::after {
    bottom: -20px;
  }
}
.main-copy-style-01 {
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.main-copy-style-01 p {
  font-family: "Noto Serif JP", serif;
  margin-bottom: 0;
  color: #cf3696;
  text-align: center;
  font-size: clamp(17px, 2.1vw, 24px);
  font-weight: 700;
}
.main-copy-style-01 h1 {
  font-size: clamp(26px, 3.2vw, 48px);
  color: #325c5e;
}
.page-package-header .lead {
  font-weight: 600;
}
.page-package-header .lead {
  font-size: clamp(14px, 2vw, 16px);
}

.lp-header-box {
  display: table;
  margin-left: auto;
  text-align: center;
}
@media (max-width: 991.98px) {
    .lp-header-box {
      margin-right: auto;
    }
}

.sub-copy-style-02 p {
  margin-bottom: .5rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
}
.sub-copy-style-02 .text-strong {
  padding: .1rem .2rem;
  color: #FFF;
  background: linear-gradient(transparent 0%, #333 0%);
}
.main-copy-style-02 p {
  margin-bottom: 0;
  color: #325c5e;
  font-size: clamp(17px, 2.1vw, 24px);
  font-weight: 700;
}
.main-copy-style-02 h1 {
  font-size: clamp(27px, 2.9vw, 46px);
  color: #325c5e;
  letter-spacing: -1px;
}

.main-copy-style-03 {
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.main-copy-style-03 p {
  font-family: "Noto Serif JP", serif;
  margin-bottom: 0;
  color: #cf3696;
  font-size: clamp(18px, 2.1vw, 30px);
  font-weight: 700;
  text-align: center;
}
.main-copy-style-03 h1 {
  font-size: clamp(26px, 3.1vw, 53px);
  color: #325c5e;
  letter-spacing: -1.5px;
}

.page-website-header .lead {
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 700;
}
.page-website-header .lead strong {
  color: #cf3696;
  font-weight: 700;
}

.large {
  font-size: 120%;
}
.vertical-text {
  writing-mode: vertical-rl; /* 縦書き（右から左） */
}

/* --------------------------------------------------------------------------
   1.1 Bootstrap
   -------------------------------------------------------------------------- */

/* 
   Buttons
   -------------------------- */
.btn {
  font-weight: 700;
  border-width: 2px;
}

.btn-primary {
  background-color: #567d7a;
  border-color: #567d7a;
  box-shadow: 0 4px 0 #325c5e;
  transition: none;
}
.btn-primary:hover {
  box-shadow: none;
  transform: translateY(4px);
}
.card:hover .btn-primary {
  box-shadow: none;
  transform: translateY(4px);
}

.btn-secondary {
  background-color: #e35db1;
  border-color: #e35db1;
  box-shadow: 0 4px 0 #cf3696;
  transition: none;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}
.btn-secondary:hover {
  box-shadow: none;
  transform: translateY(4px);
}
.card-blog:hover .btn-secondary {
  box-shadow: none;
  transform: translateY(4px);
}

.btn-outline-secondary {
  background-color: #FFF;
  border-color: #e35db1;
  box-shadow: 0 4px 0 #cf3696;
  transition: none;
}
.btn-outline-secondary:hover {
  box-shadow: none;
  transform: translateY(4px);
}

.btn-secondary-light {
  background-color: #f5d6ea;
  border-color: #f5d6ea;
  color: #333;
  box-shadow: 0 4px 0 #cf3696;
  transition: none;
}
.btn-secondary-light:hover {
  background-color: #eab5d7;
  border-color: #eab5d7;
  color: #333;
  box-shadow: none;
  transform: translateY(4px);
}

/* 
   Cards
   -------------------------- */
.card {
  border: none;
  border-radius: .5rem;
}
.card figure {
  margin: 0;
}
.card-img-top {
  height: auto;
}

.card-img-overlay-top {
  position: absolute;
  top: 0;
  left: 0;
  padding: .5rem;
  background: #325c5e;
  color: #fff;
  font-weight: bold;
  font-size: .75rem;
  border-bottom-right-radius: 0.5rem;
}

.card-footer {
  padding-top: 0;
  padding-bottom: 1rem;
  background-color: #FFF;
  border: none;
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;
}
.card-footer:last-child {
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;
}

.card-blog {
  position: relative;
  height: 100%;
}
.card-blog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 30px rgba(49, 49, 49, .3);
  opacity: 0;
  transition: opacity .3s cubic-bezier(.4,.1,.3,1);
  border-radius: .5rem;
}
.card-blog:hover::before { opacity:1; }

.card-blog .card-img-top {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.card-blog-media {
  padding-top: 56.25%;
  background-position: 50%;
  background-size: cover;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

.card-blog .card-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.25rem;
}
.card-blog-link::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
  z-index: 2;
}

.card-blog .card-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: .95rem;
  line-height: 1.25rem;
}
.card-blog .card-footer .btn {
  font-size: .8rem;
}

.card-icon {
  margin-left: auto;
  margin-right: auto;
  max-width: 100px;
}

.card-faq {
  position: relative;
  height: 100%;
}
.card-faq .card-img-top {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
.card-faq .card-body .card-title {
  margin-top: 0 !important;
  font-size: 1.25rem;
  color: #325c5e;
  border-bottom: 1px solid #799d94;
  padding-bottom: 0.4rem;
}
.card-faq .card-body p:last-child {
  margin-bottom: 0;
}

.card-problem {
  height: 100%;
  font-weight: 700;
  border-radius: 0;
}
.card-problem .card-body::before {
  font-size: 125%;
}
.card-problem .card-body .card-text {
  line-height: 1.25;
}
@media (max-width: 767.98px) {
  .card-problem .card-body {
    padding: .5rem .5rem;
    border-bottom: 1px solid #999999;
  }
  .card-problem .card-body {
    position: relative;
    padding-left: 2rem;
  }
  .card-problem .card-body::before {
    content: "\f14a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* solidアイコンの場合は900 */
    position: absolute;
    left: .75rem;
    top: 50%;
    color: #cf3696;
    transform: translateY(-50%);
  }
}
@media (min-width: 768px) {

  .card-problem {
    border-radius: 1rem;
  }
  .card-problem .card-body {
    position: relative;
    padding-left: 4rem;
  }
  .card-problem .card-body::before {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* solidアイコンの場合は900 */
    position: absolute;
    left: 1rem;
    top: 50%;
    font-size: 2rem;
    color: #799d94;
    transform: translateY(-50%);
  }
  .card-problem .card-text {
    position: relative;
    padding: .75rem;
    font-size: .9rem;
    background-color: #ebf7df;
    border-radius: .5rem;
  }
  .card-problem .card-text::after {
    content: "";
    position: absolute;
    top: 50%;                    /* 矢印の縦位置。調整可能 */
    left: -9px;                 /* 要素の右外側に配置 */
    border-width: 10px 10px 10px 0;  /* 上・右・下・左の三角形サイズ */
    border-style: solid;
    border-color: transparent #ebf7df transparent transparent;  /* 左側のみ背景色に */
    transform: translateY(-50%);
  }

  .col:nth-child(2n) .card-problem .card-body::before {
    color: #99b6af;
  }
  .col:nth-child(2n) .card-problem .card-text {
    background-color: #f2f8ea;
  }
  .col:nth-child(2n) .card-problem .card-text::after {
    border-color: transparent #f2f8ea transparent transparent;  /* 左側のみ背景色に */
  }
}

.card-service {
  position: relative;
  height: 100%;
  border-radius: 1rem;
}
.card-service::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 30px rgba(49, 49, 49, .3);
  opacity: 0;
  transition: opacity .3s cubic-bezier(.4,.1,.3,1);
  border-radius: .5rem;
}
.card-service:hover::before { opacity:1; }
.card-service .card-header {
  background-color: #FFF;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.card-service .card-title {
  color: #325c5e;
  text-align: center;
  font-size: clamp(1.2rem, 2.75vw, 1.6rem);
}
.card-service .card-text {
  text-align: center;
}
.card-service .badge {
  font-size: .9rem;
  position: relative;
  top: -0.25rem; /* 必要に応じて調整 */
}
.card-service .list-group i {
  color: #cf3696;
}

.card-step .card-body {
  text-align: left;
}
.card-step .card-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.1rem;
  color: #325c5e;
  text-align: center;
}
.card-step .card-text {
  font-size: .9rem;
  font-weight: 500;
  text-align: left;
}
.card-merit .card-img-merit {
  position: relative;
}
.card-merit .card-img-merit img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;
  height: auto;
}
@media (min-width: 992px) {
  .card-merit .card-img-merit img {
    max-width: 75%;
    height: auto;
  }
}
.card-merit .card-title {
  margin-bottom: .75rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.25rem;
  color: #325c5e;
  text-align: center;
  text-decoration-line: underline;
  text-decoration-color: #799d94;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.card-merit .card-text {
  font-size: .9rem;
  font-weight: 500;
  text-align: center;
}

/* 
   List
   -------------------------- */
.list-group-flush {
  margin-bottom: 1.5rem;
}
.list-group-item i {
  color: #cf3696;
}

/* 
   Navs
   -------------------------- */

/* dropdowns */
.dropdown-menu {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
}
.dropdown-menu .dropdown-item {
  padding: .75rem;
}
.nav-item .nav-link, .dropdown-menu .dropdown-item {
  font-weight: 700;
}
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
}
.nav-item.dropdown:hover .nav-link {
  cursor: pointer;
}

/* 
   Forms
   -------------------------- */

.form-box {
  padding: 0 1.5rem 3rem;
  background-color: #f7f7f9;
}

.no-label-text .mwform-checkbox-field-text {
  display: none;
}

.text-red {
  color: #c00e0e;
}
.row-group {
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px dotted rgba(0,0,0,.15);
}
.col-form-label {
  font-size: 16px;
  font-weight: 700;
}
.form-check-input:checked {
  background-color: #335e60;
  border-color: #335e60;
}

@media(hover: hover) {
  .row-group .agreement a:hover {
    background-size:0 1px
  }
}

.form-control, .form-check-input {
  margin-top: .35rem;
  background-color: #FFF;
}

.btn-submit {
  padding: .5rem 3rem;
  color: #FFF;
  font-size: 125%;
  background-color: #e35db1;
  border-color: #e35db1;
  box-shadow: 0 4px 0 #cf3696;
  transition: none;
}
.btn-submit:hover {
  color: #FFF;
  background-color: #e35db1;
  border-color: #e35db1;
  box-shadow: none;
  transform: translateY(4px);
}

.btn-back {
  padding: .5rem 3rem;
  color: #FFF;
  font-size: 125%;
  background-color: #232823;
  border-color: #232823;
  box-shadow: 0 4px 0 #131413;
  transition: none;
}
.btn-back:hover {
  color: #FFF;
  background-color: #232823;
  border-color: #232823;
  box-shadow: none;
  transform: translateY(4px);
}

.mw_wp_form_confirm .small {
  display: none;
}
 
/* 
   Position
   -------------------------- */
@media (max-height: 500px) {
  .sticky-top {
    position: static; /* sticky を解除 */
    top: 0;
  }
}

/* 
   Sizing
   -------------------------- */
.w-30 {
  width: 30% !important;
}
.w-40 {
  width: 40% !important;
}

.img-w-50 {
  max-width: 50%;
  height: auto;
}
.img-w-75 {
  max-width: 75%;
  height: auto;
}
@media (max-width: 767.98px) {
  .img-md-w-50 {
    max-width: 50%;
    height: auto;
  }
  .img-md-w-75 {
    max-width: 75%;
    height: auto;
  }
}

@media (max-width: 991.98px) {
  .mw-lg-w60 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 60vw;
    height: auto;
  }
}

.w-6r {
  width: 6rem;
}
.w-9r {
  width: 9rem;
}
.w-10r {
  width: 10rem;
}
.w-11r {
  width: 11rem;
}
.w-12r {
  width: 12rem;
}
.w-13r {
  width: 13rem;
}
.w-14r {
  width: 14rem;
}
.w-15r {
  width: 15rem;
}


/* 
   Tables
   -------------------------- */
.table>:not(caption)>*>* {
  padding: .5rem .75rem;
  color: #333;
}
.table .price {
  white-space: nowrap;
}
.table th {
  color: #325c5e;
  background-color: #ebf7df;
}

.table thead th {
  color: #FFF;
  background-color: #325c5e !important;
  vertical-align: middle;
}

.table .center-middle {
  text-align: center;
  vertical-align: middle;
}

.table td {
  background-color: #FFF;
}
.table td p {
  margin-bottom: .5rem;
}
.table td ol:last-of-type,
.table td ul:last-of-type,
.table td p:last-of-type {
  margin-bottom: 0;
}
.table thead th {
  text-align: center;
  background-color: #dddcd6;
}
@media (min-width: 992px) {
  .table th {
    white-space: nowrap;
  }
  .table tbody th {
    min-width: 10vw;
  }
}
.table .price .out-tax {
  color: #111;
  font-weight: 900;
  font-size: 1.25rem;
}
.table-bordered>:not(caption)>* {
  border-width: 1px 0;
}
.table-bordered>:not(caption)>*>* {
  border-width: 0 1px;
}
.table-striped>tbody>tr:nth-of-type(odd)>* {
  --bs-table-bg-type: rgba(150,150,150,0.05);
}
@media (max-width: 991.98px) {
  .table-responsive-lg .table {
    min-width: 1200px;
  }
}

@media (max-width: 991.98px) {
  .table-responsive-block th {
    display: block;
    padding: .75rem;
    width: 100% !important;
  }
  .table-responsive-block td {
    display: block;
    padding: .75rem;
    width: 100% !important;
  }
  .main-content .table .price {
    vertical-align: middle;
  }
}

.table td a {
  text-decoration: underline;
}
.table td a:hover {
  text-decoration: none;
}

/* 
   Typography
   -------------------------- */
.lead {
  font-size: 1rem;
  font-weight: 500;
}


/* --------------------------------------------------------------------------
   1.2 Bootstrap
   -------------------------------------------------------------------------- */

/* 
   Addtoany
   -------------------------- */
.addtoany_content {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0,0,0,.15);
}

/* 
   Breadcrumbs
   -------------------------- */
.breadcrumbs {
  padding: .75rem;
  font-size: .8rem;
  color: #325c5e;
  background-color: #FFF;
}
.breadcrumbs a {
  font-size: .8rem;
  color: #325c5e;
  text-decoration: underline;
}
.breadcrumbs a:hover {
  text-decoration: none;
}
.breadcrumbs span {
  color: #799d94;
}
.breadcrumbs i {
  font-size: .6rem;
  color: #9dbdaf;
}

/* 
   WP-PageNavi
   -------------------------- */
.wp-pagenavi {
  clear: both;
  margin: 1.5rem 0;
  font-size: 1rem;
  text-align: center;
}
.wp-pagenavi a {
  color: #FFF !important;
  text-decoration: none !important;
}
 .wp-pagenavi span {
  display: inline-block;
  margin: 2px 5px;
  padding: .75rem 1rem;
  text-decoration: none;
  background: none #FFF;
  color: #325c5e;
  border-radius: 4px;
}
.wp-pagenavi a {
  display: inline-block;
  margin: 2px 5px;
  padding: .75rem 1rem;
  text-decoration: none;
  background: none #325c5e;
  color: #FFF;
  border-radius: 4px;
}
.wp-pagenavi .current,
.wp-pagenavi a:hover {
  color: #FFF !important;
  background: none #567d7a;
}

/* --------------------------------------------------------------------------
   1.3 Swiper Slider
   -------------------------------------------------------------------------- */

.modal {
  max-height: 100vh;
}
.modal-backdrop.show {
  background-color: #000 !important;
  opacity: 0.9 !important;
}

/* スライダーの左右に余白をつけて、矢印が画像に被らないようにする */
.mySwiper {
  padding-left: 40px;
  padding-right: 40px;
}

@media (min-width: 768px) {
  .mySwiper img {
    width: auto;
    max-height: 314px;
  }
}

.swiper-slide img {
  animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  display: none;
}

/* 矢印の位置調整：スライダーの外に出す */
.swiper-button-prev,
.swiper-button-next {
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px; /* 矢印を中央揃え */
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
  border-radius: 50%;
  color: #fff !important;
  z-index: 10;
}

/* prev を左にオフセット */
.swiper-button-prev {
  left: 10px;
}

/* next を右にオフセット */
.swiper-button-next {
  right: 10px;
}

/* ホバー時の強調表示（任意） */
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: rgba(255, 255, 255, 0.8);
  color: #000;
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.1 Header
   -------------------------------------------------------------------------- */
.header {
  background-color: #FFF;
}
.navbar-brand {
  max-width: 240px;
}
.navbar-brand img {
  max-width: 100%;
  height: auto;
}
@media (min-width: 992px) {
  .navbar-brand {
    max-width: 300px;
  }
}

.header .site-overview {
  display: none;
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
}
@media (min-width: 1200px) {
  .header .site-overview {
    display: block;
  }
}

@media (max-width: 991.98px) {
  .header .btn {
    padding: 0.375rem 0.5rem;
    font-size: .9rem;
  }
}

/* --------------------------------------------------------------------------
   4.2 Navigation
   -------------------------------------------------------------------------- */
/* 
   4.2.1 Main (header)
   -------------------------- */
.main-navigation {
  color: #FFF;
  background-color: #335e60;
}
.main-navigation {
  display: none;
}
.main-navigation .navbar-brand {
  display: none;
}
.main-navigation .nav-link {
  position: relative;
  padding: .5rem .5rem;
  color: #FFF;
  font-size: .9rem;
}
.main-navigation .nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background-color: #ebf7df;
  transition: width 0.3s ease;
}
.main-navigation .nav-link:hover {
  color: #ebf7df;
}
.main-navigation .nav-link:hover::before {
  width: 100%;
}

.fadeDown {
  position: fixed !important;
  width: 100%;
  top: 0;
  z-index: 1020;
  opacity: 0;
  animation-name: fadeDown;
  animation-duration: .5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  box-shadow: 0px 5px 10px 0px rgba(100, 100, 100, 0.15);
}
@media (min-width: 1400px) {
  .main-navigation .nav-link {
	padding: .5rem .75rem;
	font-size: 1rem;
  }
}
@media (min-width: 1200px) {
  .main-navigation {
    display: block;
  }
  .main-navigation .navbar-toggler {
    display: none;
  }
}

@keyframes fadeDown {
  0% {
     opacity: 0;
     transform: translateY(-100px);
  }
  100% {
     opacity: 1;
     transform: translateY(0);
  }
}
.main-navigation.fadeDown {
  display: block;
}
.main-navigation.fadeDown .navbar-brand {
  display: block;
}
.main-navigation.fadeDown .navbar-brand {
  max-width: 160px;
}
.main-navigation.fadeDown .nav-link {
  padding: .5rem .25rem;
  font-size: .85rem;
  font-weight: 500;
}
.main-navigation.fadeDown .dropdown-menu {
  padding: .5rem .25rem;
  font-size: .85rem;
  font-weight: 500;
}

/* dropdowns */
.dropdown-menu {
  color: #FFF;
  background-color: rgba(50,92,94,0.9);
}
.dropdown-menu .dropdown-item {
  position: relative;
  padding-left: 1.75rem;
  display: inline-block;
  color: inherit;
}
.dropdown-menu li:not(:first-child) .dropdown-item {
  border-top: 1px dotted rgba(255,255,255,0.25);
}
.dropdown-menu .dropdown-item:hover {
  background-color: rgba(50,50,50,0.9); 
}
.dropdown-menu .dropdown-item::before {
  content: "\f101";
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solidアイコンの場合は900 */
  position: absolute;
  left: .5rem;
  top: 50%;
  transform: translateY(-50%);
  color: inherit;
}


/* --- toggle button --- */
.navbar-toggler {
  overflow: hidden;
  position: relative;
  padding: 0px;
  width: 90px;
  height: 36px;
  color: #FFF;
  border: none;
  outline: none;
  box-sizing: border-box;
  border-radius: 0;
  background-color: #567d7a;
  box-shadow: 0 4px 0 #325c5e;
  border-radius: .375rem;
}
.navbar-toggler:focus {
  box-shadow: 0 4px 0 #325c5e;
}
.navbar-toggler:hover {
  color: #FFF;
  background-color: #111;
  box-shadow: none;
  transform: translateY(4px);
}
.navbar-toggler:hover .navbar-toggler-icon {
  background-color: #FFF;
}
.navbar-toggler-icon {
  position: absolute;
  display: block;
  left: 10px;
  width: 23px;
  height: 3px;
  background-image: none!important;
  background-color: #FFF;
  /* transition: ease .5s; */
}
.navbar-toggler-icon:nth-of-type(1) {top:9px;}
.navbar-toggler-icon:nth-of-type(2) {top:17px;}
.navbar-toggler-icon:nth-of-type(3) {top:25px;}

.navbar-toggler-title {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #FFF;
  font-size: .7rem;
  font-weight: bold;
  letter-spacing: -1px;
}
.navbar-toggler:hover .navbar-toggler-title {
  color: #FFF;
}

/* 
   4.2.2 Footer
   -------------------------- */
.footer .navbar-brand {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
}
.footer-navigation .nav-link {
  position: relative;
  padding-left: 1.5rem;
  display: inline-block;
  color: #FFF;
  font-size: .9rem;
}
.footer-navigation .nav-link::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solidアイコンの場合は900 */
  position: absolute;
  left: .5rem;
  top: 50%;
  transform: translateY(-50%);
  color: inherit;
}
.footer-navigation .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background-color: #ebf7df;
  transition: width 0.3s ease;
}
.footer-navigation .nav-link:hover {
  color: #ebf7df;
}
.footer-navigation .nav-link:hover::after {
  width: 100%;
}

/* 
   4.2.3 Offcanvas
   -------------------------- */
.offcanvas.offcanvas-end {
  width: 420px;
}
.offcanvas-body .nav-link {
  position: relative;
  padding-left: 1.25rem;
  display: block;
  color: #FFF;
  font-size: .85rem;
}
.offcanvas-body .nav-link::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solidアイコンの場合は900 */
  position: absolute;
  left: .5rem;
  top: 50%;
  transform: translateY(-50%);
  color: inherit;
}
.offcanvas-body .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background-color: #EEE;
  transition: width 0.3s ease;
}
.offcanvas-body .nav-link:hover {
  color: #EEE;
}
.offcanvas-body .nav-link:hover::after {
  width: 100%;
}

.offcanvas-body ul ul {
  list-style: none;
  padding-left: 1rem;
}
.offcanvas-body ul ul li {
  list-style: none;
}
.offcanvas-body ul ul .nav-link {
  padding-left: 1.75rem;
}
.offcanvas-body ul ul .nav-link::before {
  content: "\f101";
}

.two-columns {
  display: grid;
  grid-template-columns: repeat(2, auto); /* 2列表示に設定 */
  column-gap: 1rem; /* 列間の間隔を調整 */
}


/* --------------------------------------------------------------------------
   4.3 Footer
   -------------------------------------------------------------------------- */
/* 
   4.3.1 Footer Top
   -------------------------- */
.footer-top {
  padding: 3rem 0;
  color: #FFF;
  background-color: #567d7a;
}

/* 
   4.3.2 Footer Bottom
   -------------------------- */
.footer-bottom {
  padding: .75rem 0;
  color: #FFF;
  background-color: #335e60;
}
.copyright {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: .8rem;
}

/* 
   4.3.3 Back to TOP
   -------------------------- */
.back-to-top {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #FFF;
  background-color: rgba(50,92,94,0.9);
  border-radius: 0;
  z-index: 100;
  opacity: 0;
  transition: opacity .5s ease-out;
}
.back-to-top.view {
  opacity: 1;
}
.back-to-top:hover {
  color: #FFF;
  background-color: rgba(0,0,0,0.6);
}


/* --------------------------------------------------------------------------
   4.4 Main Content
   -------------------------------------------------------------------------- */

.text-marker {
  padding: .1rem;
  background: linear-gradient(transparent 60%, #ffff00 0%);
}

.text-marker-green {
  padding: .1rem;
  background: linear-gradient(transparent 60%, #ebf7df 0%);
}

.text-marker-strong {
  padding: .1rem;
  background: linear-gradient(transparent 0%, #ffff00 0%);
}
@media (min-width: 768px) {
  .text-adjust-50 {
    padding-right: 5.0rem !important;
  }
  .text-adjust-70 {
    padding-right: 7.0rem !important;
  }
  .text-adjust-100 {
    padding-right: 10.0rem !important;
  }
  .text-adjust-115 {
    padding-right: 11.5rem !important;
  }
  .text-adjust-1325 {
    padding-right: 13.25rem !important;
  }
}

.text-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.text-underline-01 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.text-wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #9dbdaf;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.text-dashed {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: #9dbdaf;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.text-double {
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-color: #9dbdaf;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* 
   4.4.1 Home
   -------------------------- */

/* hero */
.home .hero-content {
  background-image: url("../img/home/hero-main.webp?ver=1.0.0");
  background-size: cover;
  background-repeat: no-repeat;
}
.home .hero-text {
  padding: 3rem 1.5rem;
  text-align: center;
}
@media (min-width: 768px) {
  .home .hero-content {
    height: 50vw;
    background-image: url("../img/home/hero-main-md.webp?ver=1.0.0");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .home .hero-text {
    padding: 0;
    height: 50vw;
  }
}
@media (min-width: 992px) {
  .home .hero-content {
    height: 41vw;
    background-image: url("../img/home/hero-main-lg.webp?ver=1.0.0");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .home .hero-text {
    padding: 0;
    height: 41vw;
  }
}

/* about */
.about-content {
  padding-top: clamp(1.5rem, 6vw, 5rem);
  background-image: url("../img/home/about-bg.webp?ver=1.0.0");
  background-position: center center;
  background-repeat: no-repeat;
}
.about-content-box {
  margin: 0 .75rem;
  padding: 1rem;
  text-align: center;
  background-color: #FFF;
  border-top-left-radius: 6vw;
  border-top-right-radius: 6vw;
}
.about-content-box p {
  text-align: center;
  font-weight: 500;
}
.about-strong-box {
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
  background-color: #ebf7df;
  border-radius: 1.5rem;
}
.about-strong-box p {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 120%;
  font-weight: 700;
  line-height: 1.75;
}
@media (min-width: 992px) {
  .about-content-box {
    padding: 2rem 3rem;
  }
  .about-content-box p {
    font-size: 115%;
  }
}

/* services */
.services-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  /* background-color: #FFF; */
}
.services-content .section-header {
  padding: 1.5rem 0;
  z-index: 5;
}
@media (min-width: 992px) {
  .services-content .section-header {
    top: 80px;
  }
}
.services-content .section-footer {
  padding-top: 1.5rem;
}

/* problems */
.problems-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  color: #FFF;
  background-color: #325c5e;
}
.problems-content .section-header .english-headline, 
.problems-content .section-header h1 {
  color: #FFF;
}
.problems-content .section-footer {
  text-align: center;
}
.problems-content .section-footer hr {
  margin: 3rem 0;
}

/* faq */
.faq-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  background-color: #FFF;
}
.faq-content .section-header {
  padding: 1.5rem 0;
  z-index: 5;
}
.faq-content .section-header h2 {
  color: #325c5e;
}
@media (min-width: 992px) {
  .faq-content .section-header {
    top: 80px;
  }
}
@media (min-width: 1200px) {
  .faq-content {
    background-image: url("../img/bg-left-corner-02.png"), url("../img/bg-right-corner-01.png");
    background-position: left bottom, right top;
    background-repeat: no-repeat, no-repeat;
  }
}

/* voc */
.voc-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  background-color: #f5faef;
}

/* media */
.media-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  background-color: #FFF;
}

/* blog */
.blog-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
}

/* news */
.news-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  /* background-color: #FFF; */
}
.news-content .section-header {
  padding: 1.5rem 0;
  z-index: 5;
}
@media (min-width: 992px) {
  .news-content .section-header {
    top: 80px;
  }
}
@media (min-width: 1200px) {
  /*
  .news-content {
    background-image: url("../img/bg-left-corner-01.png"), url("../img/bg-right-corner-02.png");
    background-position: left bottom, right top;
    background-repeat: no-repeat, no-repeat;
  }
  */
}

/* case study */
.case-study-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  background-color: #f5faef;
}
.case-study-content .section-header h2 {
  color: #325c5e;
}
.case-study-box {
  padding: 1.5rem;
  background-color: #FFF;
  box-shadow: 0px 5px 10px 0px rgba(100, 100, 100, 0.15);
}
.case-study-box p {
  font-weight: 700;
}

.case-study-box .case-study-box-header {
  position: relative;
  margin-bottom: 1rem;
  padding: .5rem 0;
  text-align: center;
  height: 4.2rem;
  vertical-align: middle;
  background-color: #ebf7df;
  border-radius: 4px;
}
.case-study-box .case-study-box-header p {
  white-space: nowrap;
  font-size: .9rem;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .case-study-box .case-study-box-header {
    height: 4.5rem;
  }
  .case-study-box .case-study-box-header p {
    font-size: 1rem;
  }
}
.case-study-box .case-study-box-header::after {
  position: absolute;
  left: 12px;
  bottom: -8px;
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #ebf7df;
}

.case-study-box .case-study-name {
  padding: 1rem 0 0;
  border-top: 1px dotted #DDD;
}
.case-study-box .case-study-name p {
  margin-bottom: 0;
  text-align: right;
  font-size: .9rem;
  font-weight: 700;
  color: #325c5e;
}
@media (min-width: 768px) {
  .case-study-box .case-study-name p {
    font-size: 1rem;
  }
}
.case-study-box a img {
  display: inline-block; /* box-shadowを扱いやすくするため */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  color: inherit;
}
.case-study-box a:hover img {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* results */
.results-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
}
.results-content .section-header h2 {
  color: #325c5e;
}
.results-box {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background-color: #FFF;
  box-shadow: 0px 5px 10px 0px rgba(100, 100, 100, 0.15);
}
.results-box h3 {
  padding-bottom: .25rem;
  font-size: 1.3rem;
  color: #325c5e;
  border-bottom: 3px solid #325c5e;
}
.results-box h4 {
  margin-top: 1.5rem;
  margin-bottom: .25rem;
  padding-bottom: .25rem;
  font-size: 1.15rem;
  color: #325c5e;
  border-bottom: 1px dotted #567d7a;
}
.results-box .results-meta {
  padding: .5rem 1.5rem;
  background-color: #f7f7f9;
  border-radius: 10rem;
}
.results-box .results-meta p {
  margin-bottom: 0;
}
.results-box .results-meta a {
  text-decoration: underline;
}
.results-box .results-meta a:hover {
  text-decoration: none;
  color: #333;
}
.results-box a img {
  display: inline-block; /* box-shadowを扱いやすくするため */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  color: inherit;
}
.results-box a:hover img {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

@media (max-width: 991.98px) {
  .results-box .results-img {
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 60vw;
    height: auto;
  }
}
.results-box .results-text p {
  font-size: 1rem;
  font-weight: 700;
}

/* merit */
.merit-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
}
.merit-content .section-header h2 {
  color: #325c5e;
}

/* service-details */
.service-details-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  background-color: #FFF;
}
.service-details-content .section-header h2 {
  color: #325c5e;
}
.service-details-content .table th {
  font-size: .9rem;
}
.service-details-content .table td {
  font-size: .85rem;
  font-weight: 500;
}

.service-details-headline {
  margin-bottom: 1rem;
  border-bottom: 5px solid #325c5e;
}
.service-details-headline h3 {
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  color: #325c5e;
}

/* environment */
.environment-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
}
.environment-content h2::before {
  display: none;
}

/* course-pricing */
.course-pricing-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  background-color: #f5faef;
}
.course-pricing-content .section-header h2 {
  color: #325c5e;
}
.course-pricing-content .table th {
  text-align: center;
  vertical-align: middle;
  font-size: .9rem;
}
.course-pricing-content .table td {
  text-align: center;
  vertical-align: middle;
  font-size: .9rem;
  font-weight: 500;
}

/* usage-flow */
.usage-flow-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
}
.usage-flow-content .section-header h2 {
  color: #325c5e;
}

/* section */
.section-header {
  text-align: center;
}
.section-header .english-headline,
.english-headline {
  position: relative;
  display: inline-block;
  margin-bottom: .25rem;
  padding-left: 1rem;
  font-family: "Comfortaa", sans-serif;
  font-weight: 500;
  color: #325c5e;
  letter-spacing: 1px;
}
.section-header .english-headline::before,
.english-headline::before {
  position: absolute;
  top: 50%;
  left: 0;
  content: "\f192";
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solidアイコンの場合は900 */
  color: #cf3696;
  font-size: .5rem;
  transform: translateY(-50%);
}
.section-header h1 {
  color: #325c5e;
}
.section-content {
  padding: 1.5rem 0;
}

/* 
   4.4.2 Page
   -------------------------- */
.page-content {
  margin: .75rem auto;
  padding: .75rem;
  background-color: #FFF;
}
@media (min-width: 992px) {
  .page-content {
    margin: 3rem auto;
    padding: 3rem;
  }
}

.page-content a {
  text-decoration: underline;
}
.page-content a:hover {
  text-decoration: none;
}
.page-content .btn {
  text-decoration: none;
}
.page-content .btn:hover {
  text-decoration: none;
}

/* 見出し共通装飾 */
.page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6 {
  margin-top: 3rem;
  margin-bottom: .75rem;
  position: relative;
}

/* h1 - メインタイトル */
.page-content h1 {
  color: #325c5e;
  border-bottom: 4px solid #325c5e;
  padding-bottom: 0.4rem;
}

/* h2 - セクションタイトル */
.page-content h2 {
  position: relative;
  color: #325c5e;
  padding-left: 0.8rem;
}
.page-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 90%;
  background-color: #325c5e;
  transform: translateY(-45%);
}

/* h3 - サブセクション */
.page-content h3 {
  position: relative;
  color: #325c5e;
  padding-left: 0.8rem;
}
.page-content h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 70%;
  background-color: #567d7a;
  transform: translateY(-45%);
}

.page-content h4 {
  position: relative;
  color: #325c5e;
  padding-left: 0.6rem;
}
.page-content h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 50%;
  background-color: #799d94;
  transform: translateY(-45%);
}

/* h5以下は軽めに */
.page-content h5 {
  color: #325c5e;
  border-bottom: 1px solid #799d94;
  padding-bottom: 0.4rem;
}
.page-content h6 {
  color: #325c5e;
  border-bottom: 1px dotted #799d94;
  padding-bottom: 0.4rem;
}

/* 
   4.4.3 Post
   -------------------------- */
.post-content {
  margin: .75rem auto;
  padding: .75rem;
  background-color: #FFF;
}
@media (min-width: 992px) {
  .post-content {
    margin: 3rem auto;
    padding: 3rem;
  }
}

/*
.post-content i {
  color: #cf3696;
}
*/

.post-content a {
  text-decoration: underline;
}
.post-content a:hover {
  text-decoration: none;
}
.post-content .btn {
  text-decoration: underline;
}
.post-content .btn:hover {
  text-decoration: none;
}

/* 見出し共通装飾 */
.post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
  margin-top: 3rem;
  margin-bottom: .75rem;
  position: relative;
}

.post-content hr {
  margin-top: 3rem;
}

/* h1 - メインタイトル */
.post-content h1 {
  color: #325c5e;
  border-bottom: 4px solid #325c5e;
  padding-bottom: 0.4rem;
}

/* h2 - セクションタイトル */
.post-content h2 {
  position: relative;
  color: #325c5e;
  padding-left: 0.8rem;
}
.post-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 90%;
  background-color: #325c5e;
  transform: translateY(-45%);
}

/* h3 - サブセクション */
.post-content h3 {
  position: relative;
  color: #325c5e;
  padding-left: 0.8rem;
}
.post-content h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 70%;
  background-color: #567d7a;
  transform: translateY(-45%);
}

.post-content h4 {
  position: relative;
  color: #325c5e;
  padding-left: 0.6rem;
}
.post-content h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 50%;
  background-color: #799d94;
  transform: translateY(-45%);
}

/* h5以下は軽めに */
.post-content h5 {
  color: #325c5e;
  border-bottom: 1px solid #799d94;
  padding-bottom: 0.4rem;
}
.post-content h6 {
  color: #325c5e;
  border-bottom: 1px dotted #799d94;
  padding-bottom: 0.4rem;
}

/* post-navigation */
.post-navigation {
  clear: both;
  margin-bottom: 3rem;
}
.post-navigation .card {
  height: 100%;
  border-radius: 0;
}
.post-navigation .small {
  font-size: .65rem;
  color: #9dbdaf;
}
.post-navigation .card-body {
  padding: .5rem;
}
.post-navigation .card-title {
  margin-bottom: 0;
  font-size: .8rem;
  color: #325c5e;
}
.post-navigation a:hover .small {
  color: #333;
}
.post-navigation a:hover .card-title {
  color: #333;
}


/* 
   4.4.4 Sidebar
   -------------------------- */
.sidebar {
  top: 80px;
  margin: 3rem auto;
  z-index: 5;
}
.sidebar .widget {
  margin-bottom: 1.5rem;
}
.sidebar .widget-title {
  margin: 0;
  padding: .75rem .5rem;
  font-size: 1.15rem;
  color: #FFF;
  background-color: #325c5e;
}
.sidebar .widget ul, .sidebar .widget ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar .widget ul li {
  position: relative;
}
.sidebar .widget ul li:not(:first-child) {
  border-top: 1px dotted rgba(0,0,0,0.25);
}
.sidebar .widget ul li a {
  position: relative;
  display: block;
  padding: .75rem .75rem .75rem 1.25rem;
  font-size: .9rem;
  font-weight: 500;
  background-color: #FFF;
  text-decoration: none;
}
.sidebar .widget ul li a:hover {
  background-color: #ebf7df;
}
.sidebar .widget ul li a::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solidアイコンの場合は900 */
  position: absolute;
  left: .5rem;
  top: 50%;
  transform: translateY(-50%);
  color: inherit;
}
.sidebar .widget ul li li a::before {
  content: "\f101";
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solidアイコンの場合は900 */
  position: absolute;
  left: .5rem;
  top: 50%;
  transform: translateY(-50%);
  color: inherit;
}

.sidebar .widget .searchform {
  padding: 1rem;
  background-color: #FFF;
  text-align: center;
}
.sidebar .widget .searchform #s {
  width: 100%;
}
.searchform #s {
  margin-bottom: .75rem;
  padding: .375rem .75rem;
  border: 1px solid #d2d3d4;
  border-radius: .375rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-clip: padding-box;
}
#searchsubmit {
  display: block;
  margin: 0 auto;
  padding: .25rem .75rem;
  color: #FFF;
  font-size: .9rem;
  font-weight: 500;
  background-color: #567d7a;
  border-color: #567d7a;
  border-radius: .375rem;
  border: none;
  box-shadow: 0 4px 0 #325c5e;
  transition: none;
}
#searchsubmit:hover {
  box-shadow: none;
  transform: translateY(4px);
}

/* 
   4.4.5 Archive
   -------------------------- */
.archive-content {
  margin: 3rem auto;
}
/* h1 - メインタイトル */
.archive-content h1 {
  color: #325c5e;
  border-bottom: 4px solid #325c5e;
  padding-bottom: 0.4rem;
  margin-bottom: 1.5rem;
}

/* 
   4.4.6 LP:website
   -------------------------- */

.page-website-header {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  text-align: center;
}
@media (min-width: 1200px) {
  .page-website-header {
    background-image: url("../img/bg-left-corner-03.png"), url("../img/bg-right-corner-03.png");
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;
  }
}


.page-website-about-content {
  padding: clamp(1.5rem, 5vw, 4rem) 0;
  background-color: #ebf7df;
}

.website-about-box ul li {
  padding: .5rem 0;
  font-weight: 700;
}
@media (min-width: 768px) {
  .website-about-box ul li {
    padding: .5rem;
  }
}
.website-about-box ul li i {
  font-size: 125%;
}

.page-website-price-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
}

.website-price-note {
  display: table;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  padding: .75rem;
  border: 3px solid #325c5e;
  background-color: #FFF;
  border-radius: 1rem;
}
.plan-07 .website-price-note {
  border-color: #799d94;
}

@media (min-width: 768px) {
  .website-price-note {
    padding: 1.5rem;
  }
}

.website-price-note h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.25rem;
  color: #325c5e;
}
.website-price-note h4 {
  font-family: "Noto Sans JP", sans-serif;
  color: #325c5e;
}
.website-price-note ul {
  display: table;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  text-align: left;
}
.website-price-note ul li {
  font-size: .9rem;
  font-weight: 700;
}

.website-environment {
  background-color: #FFF;
  border-radius: 1rem;
  border: 2px solid #DDD;
}
.website-environment-header {
  padding: 1rem;
  border-bottom: 2px solid #DDD;
}
.website-environment-body {
  padding: 1rem;
}

.website-environment i {
  color: #567d7a;
}
.website-environment ul {
  padding-left: 1rem;
  text-align: left;
}
.website-environment ul li {
  font-size: .8rem;
}

.website-environment p {
  text-align: left;
  font-size: .8rem;
}

.website-environment h3 {
  font-family: "Noto Sans JP", sans-serif;
  margin: 0;
  font-size: 1.25rem;
}
.website-environment h4 {
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: .75rem;
  text-align: left;
  font-size: 1.15rem;
}
.website-environment h5 {
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: .75rem;
  text-align: left;
  font-size: 1rem;
}

.website-price-plan-box {
  margin-bottom: 3rem;
  background-color: #FFF;
  border-radius: 1.5rem;
}
.website-price-plan-box .website-price-plan-box-header {
  position: relative;
  padding: 1.5rem 1rem 1.75rem ;
  overflow: hidden;
}
.website-price-plan-box .website-price-plan-box-header h3 {
  margin-bottom: 0;
  font-family: "Noto Sans JP", sans-serif;
}
.website-price-plan-box .website-price-plan-box-header p {
  margin-bottom: 0;
  font-weight: 700;
}
.website-price-plan-box .website-price-plan-box-header .badge {
  margin: .15rem;
  font-weight: 700;
}
.website-price-plan-box .website-price-plan-box-body {
  padding: 1rem;
  border-radius: 1rem;
}

.price-detail-box {
  margin: 0 0 1.5rem;
  padding: 0;
}
.price-detail-box table {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.price-detail-box table .initial {
  border-bottom: 1px dotted #799d94;
}
.price-detail-box table .initial td {
  padding-bottom: .75rem;
}
.price-detail-box table td {
  padding: .5rem .25rem;
}
.price-detail-box span {
  line-height: 1;
}
.price-detail-box .tax-ex {
  margin-bottom: .25rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}
.price-detail-box .tax-ex .amount {
  font-size: 150%;
}
.price-detail-box .tax-in {
  margin-bottom: 0;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
}

.website-price-plan-box.spot-option .table p {
  line-height: 1.1;
}
.website-price-plan-box.spot-option .tax-in {
  margin-bottom: 0;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1;
}

.website-deliverables .table-bordered>:not(caption)>*,
.website-deliverables-detail .table-bordered>:not(caption)>*,
.website-operation-detail .table-bordered>:not(caption)>*,
.website-maintenance-detail .table-bordered>:not(caption)>* {
  border-width: 3px 0;
}
.website-deliverables .table-bordered>:not(caption)>*>*,
.website-deliverables-detail .table-bordered>:not(caption)>*>*,
.website-operation-detail .table-bordered>:not(caption)>*>*,
.website-maintenance-detail .table-bordered>:not(caption)>*>* {
  border-width: 0 3px;
}
.website-price-plan-box .website-deliverables-detail .table ul,
.website-price-plan-box .website-operation-detail .table ul,
.website-price-plan-box .website-maintenance-detail .table ul {
  text-align: left;
}
@media (max-width: 767.98px) {
  .website-price-note ul,
  .website-price-plan-box .website-deliverables-detail .table ul,
  .website-price-plan-box .website-operation-detail .table ul,
  .website-price-plan-box .website-maintenance-detail .table ul {
    padding-left: 1rem;
  }
}

.website-price-plan-box .website-deliverables-detail .table,
.website-price-plan-box .website-operation-detail .table,
.website-price-plan-box .website-maintenance-detail .table {
  font-size: .9rem;
}
.website-price-plan-box .website-deliverables .table {
  font-size: 1.25rem;
}

.website-price-plan-box.plan-01 .website-deliverables .table,
.website-price-plan-box.plan-01 .website-deliverables-detail .table,
.website-price-plan-box.plan-01 .website-operation-detail .table,
.website-price-plan-box.plan-01 .website-maintenance-detail .table {
  border-color: #ebf7df;
}

.website-price-plan-box.plan-02 .website-deliverables .table,
.website-price-plan-box.plan-02 .website-deliverables-detail .table,
.website-price-plan-box.plan-02 .website-operation-detail .table,
.website-price-plan-box.plan-02 .website-maintenance-detail .table {
  border-color: #325c5e;
}
.website-price-plan-box.plan-02 .website-deliverables .table th,
.website-price-plan-box.plan-02 .website-deliverables-detail .table th,
.website-price-plan-box.plan-02 .website-operation-detail .table th,
.website-price-plan-box.plan-02 .website-maintenance-detail .table th {
  color: #FFF;
  background-color: #325c5e;
}

.website-price-plan-box.plan-03 .website-deliverables .table,
.website-price-plan-box.plan-03 .website-deliverables-detail .table,
.website-price-plan-box.plan-03 .website-operation-detail .table,
.website-price-plan-box.plan-03 .website-maintenance-detail .table {
  border-color: #cf3696;
}
.website-price-plan-box.plan-03 .website-deliverables .table th,
.website-price-plan-box.plan-03 .website-deliverables-detail .table th,
.website-price-plan-box.plan-03 .website-operation-detail .table th,
.website-price-plan-box.plan-03 .website-maintenance-detail .table th {
  color: #FFF;
  background-color: #cf3696;
}

.website-price-plan-box.plan-04 .website-deliverables .table,
.website-price-plan-box.plan-04 .website-deliverables-detail .table,
.website-price-plan-box.plan-04 .website-operation-detail .table,
.website-price-plan-box.plan-04 .website-maintenance-detail .table {
  border-color: #ecf8e0;
}
.website-price-plan-box.plan-04 .website-deliverables .table th,
.website-price-plan-box.plan-04 .website-deliverables-detail .table th,
.website-price-plan-box.plan-04 .website-operation-detail .table th,
.website-price-plan-box.plan-04 .website-maintenance-detail .table th {
  color: #333;
  background-color: #f5fded;
}

.website-price-plan-box.plan-05 .website-deliverables .table,
.website-price-plan-box.plan-05 .website-deliverables-detail .table,
.website-price-plan-box.plan-05 .website-operation-detail .table,
.website-price-plan-box.plan-05 .website-maintenance-detail .table {
  border-color: #c9e5d9;
}
.website-price-plan-box.plan-05 .website-deliverables .table th,
.website-price-plan-box.plan-05 .website-deliverables-detail .table th,
.website-price-plan-box.plan-05 .website-operation-detail .table th,
.website-price-plan-box.plan-05 .website-maintenance-detail .table th {
  color: #333;
  background-color: #daf0e7;
}

.website-price-plan-box.plan-06 .website-deliverables .table,
.website-price-plan-box.plan-06 .website-deliverables-detail .table,
.website-price-plan-box.plan-06 .website-operation-detail .table,
.website-price-plan-box.plan-06 .website-maintenance-detail .table {
  border-color: #f5d6ea;
}
.website-price-plan-box.plan-06 .website-deliverables .table th,
.website-price-plan-box.plan-06 .website-deliverables-detail .table th,
.website-price-plan-box.plan-06 .website-operation-detail .table th,
.website-price-plan-box.plan-06 .website-maintenance-detail .table th {
  color: #333;
  background-color: #f9e0f0;
}

.website-price-plan-box.plan-07 .website-deliverables .table,
.website-price-plan-box.plan-07 .website-deliverables-detail .table,
.website-price-plan-box.plan-07 .website-operation-detail .table,
.website-price-plan-box.plan-07 .website-maintenance-detail .table {
  border-color: #ebf7df;
}
.website-price-plan-box.plan-07 .website-deliverables .table th,
.website-price-plan-box.plan-07 .website-deliverables-detail .table th,
.website-price-plan-box.plan-07 .website-operation-detail .table th,
.website-price-plan-box.plan-07 .website-maintenance-detail .table th {
  color: #333;
  background-color: #f1fce5;
}

.website-price-plan-box.spot-option .website-deliverables .table,
.website-price-plan-box.spot-option .website-deliverables-detail .table,
.website-price-plan-box.spot-option .website-operation-detail .table,
.website-price-plan-box.spot-option .website-maintenance-detail .table {
  border-color: #dceeea;
}
.website-price-plan-box.spot-option .website-deliverables .table th,
.website-price-plan-box.spot-option .website-deliverables-detail .table th,
.website-price-plan-box.spot-option .website-operation-detail .table th,
.website-price-plan-box.spot-option .website-maintenance-detail .table th {
  color: #333;
  background-color: #eaf8f5;
}

.website-deliverables-detail h4,
.website-operation-detail h4,
.website-maintenance-detail h4 {
  margin-top: 3rem;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
}

.website-price-plan-box.plan-03 .website-deliverables-detail h4,
.website-price-plan-box.plan-03 .website-operation-detail h4,
.website-price-plan-box.plan-03 .website-maintenance-detail h4 {
  color: #cf3696;
}

.website-price-plan-box.plan-01 {
  border: 10px solid #ebf7df;
}
.website-price-plan-box.plan-01 .website-price-plan-box-header {
  color: #325c5e;
  background-color: #ebf7df;
}
.website-price-plan-box.plan-01 .website-price-plan-box-header .badge {
  color: #325c5e;
  font-size: .9rem;
  background-color: #FFF;
}

.website-price-plan-box.plan-02 {
  border: 10px solid #325c5e;
}
.website-price-plan-box.plan-02 .website-price-plan-box-header {
  color: #FFF;
  background-color: #325c5e;
}
.website-price-plan-box.plan-02 .website-price-plan-box-header .badge {
  color: #325c5e;
  font-size: .9rem;
  background-color: #FFF;
}

.website-price-plan-box.plan-03 {
  border: 10px solid #cf3696;
}
.website-price-plan-box.plan-03 .website-price-plan-box-header {
  color: #FFF;
  background-color: #cf3696;
}
.website-price-plan-box.plan-03 .website-price-plan-box-header .badge {
  color: #cf3696;
  font-size: .9rem;
  background-color: #FFF;
}

.website-price-plan-box.plan-04 {
  border: 10px solid #ecf8e0;
}
.website-price-plan-box.plan-04 .website-price-plan-box-header {
  color: #333;
  background-color: #ecf8e0;
}
.website-price-plan-box.plan-04 .website-price-plan-box-header .badge {
  color: #325c5e;
  font-size: .9rem;
  background-color: #FFF;
}

.website-price-plan-box.plan-05 {
  border: 10px solid #c9e5d9;
}
.website-price-plan-box.plan-05 .website-price-plan-box-header {
  color: #333;
  background-color: #c9e5d9;
}
.website-price-plan-box.plan-05 .website-price-plan-box-header .badge {
  color: #325c5e;
  font-size: .9rem;
  background-color: #FFF;
}

.website-price-plan-box.plan-06 {
  border: 10px solid #f5d6ea;
}
.website-price-plan-box.plan-06 .website-price-plan-box-header {
  color: #333;
  background-color: #f5d6ea;
}
.website-price-plan-box.plan-06 .website-price-plan-box-header .badge {
  color: #cf3696;
  font-size: .9rem;
  background-color: #FFF;
}

.website-price-plan-box.plan-07 {
  border: 10px solid #ebf7df;
}
.website-price-plan-box.plan-07 .website-price-plan-box-header {
  color: #333;
  background-color: #ebf7df;
}
.website-price-plan-box.plan-07 .website-price-plan-box-header .badge {
  color: #325c5e;
  font-size: .9rem;
  background-color: #FFF;
}

.website-price-plan-box.spot-option {
  border: 10px solid #dceeea;
}
.website-price-plan-box.spot-option .website-price-plan-box-header {
  background-color: #dceeea;
}

.page-website-process-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  background-color: #FFF;
}

.page-website-problem-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  background-color: #325c5e;
}
.page-website-problem-content h2 {
  color: #FFF;
}

.page-website-flow-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  background-color: #FFF;
}

.website-flow-header {
  text-align: center;
}
.website-flow-caption {
  text-align: center;
}
.website-flow-box .card .card-header {
  text-align: left;
  font-weight: 700;
}
.website-flow-box .card .card-header .step-number {
  display: inline-block;
  margin-right: .5rem;
  width: 1.5rem;
  height: 1.5rem;
  text-align: center;
  line-height: 1.5rem;
  background-color: rgba(255,255,255,.25);
  border-radius: 4px;
}
.website-flow-box .card .card-body {
  text-align: left;
  font-weight: 700;
  font-size: .9rem;
}
@media (max-width: 575.98px) {
  .website-flow-box .card .card-header,
  .website-flow-box .card .card-body,
  .website-flow-box .card .card-body p {
    text-align: center;
  }
  .website-flow-box .card .card-body ul {
    display: table;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
  }
}

.website-flow-box .card .card-body p:last-of-type {
  margin-bottom: 0;
}
.website-flow-box .card .card-body ul {
  margin-bottom: 0;
}
.website-flow-box .card .card-body i {
  margin-left: 2px;
}

.website-flow-box.step-01 .card {
  background-color: #f9edf5;
}
.website-flow-box.step-01 .card .card-header {
  color: #FFF;
  background-color: #cf3696;
}

.website-flow-box.step-02 .card {
  background-color: #ebf7df;
}
.website-flow-box.step-02 .card .card-header {
  color: #FFF;
  background-color: #325c5e;
}

.website-flow-box.step-03 .card {
  background-color: #ebf7df;
}
.website-flow-box.step-03 .card .card-header {
  color: #FFF;
  background-color: #325c5e;
}
.website-flow-next-box {
  padding: .15rem 0;
}
.website-flow-next-box .next-step {
  position: relative;
  background-color: #dddddd;
}
@media (max-width: 767.98px) {
  .website-flow-next-box .next-step p {
    padding: .25rem 0;
    text-align: center;
    font-weight: 700;
  }
  .website-flow-next-box .next-step::after {
    position: absolute;
    bottom: -11px;
    left: 50%;
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-right: 24px solid transparent;
    border-left: 24px solid transparent;
    border-top: 12px solid #dddddd; /* 矢印の色 */
    transform: translateX(-50%);
  }
}
@media (min-width: 768px) {
  .website-flow-box {
    width: 30%;
  }
  .website-flow-next-box {
    padding: 0 .15rem;
  }
  .website-flow-next-box .next-step {
    position: relative;
    margin-left: auto;
    margin-right: 14px;
    width: 2rem;
    height: 100%;
    background-color: #dddddd;
  }
  .website-flow-next-box .next-step .vertical-text-box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .website-flow-next-box .next-step::after {
    position: absolute;
    right: -11px;
    top: 50%;
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
    border-left: 12px solid #dddddd; /* 矢印の色 */
    transform: translateY(-50%);
  }
  .website-flow-next-box .next-step p {
    margin: 0;
    padding: 0 .5rem;
    font-weight: 700;
    line-height: 1;
    writing-mode: vertical-rl; /* 縦書き（右から左） */
  }
}

.site-operation-support-box {
  position: relative;
  margin-top: 3rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
  border: 5px solid #325c5e;
  background-color: #f5faef;
  max-width: 930px;
}
.site-operation-support-box h4 {
  line-height: 1.1;
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
}
@media (max-width: 767.98px) {
  .site-operation-support-box h4 {
    text-align: center;
  }
}

.process-box {
  margin-bottom: 3rem;
}

.process-box .section-title {
  text-align: center;
}
.process-box .section-title ul {
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.process-box .process-content {
  padding: 1rem;
  background-color: #ebf7df;
  border-radius: 1rem;
}
@media (min-width: 992px) {
  .process-box .process-content {
    padding: 3rem;
  }
}
@media (max-width: 991.98px) {
  .process-box-02 .process-content .card-body {
    padding-left: 0;
  }
  .process-box-03 .process-content .card-body {
    padding-left: 0;
  }
  .process-box-05 .process-content .card-body {
    padding-left: 0;
  }
}
@media (max-width: 575.98px) {
  .process-box-02 .process-content .card-title {
    letter-spacing: -1px;
  }
}


.process-box-01 .process-content .card-header.correct-thinking {
  text-align: center;
  color: #FFF;
  font-weight: 900;
  background-color: #335e60;
}
.process-box-01 .process-content .card-header.wrong-thinking {
  text-align: center;
  color: #FFF;
  font-weight: 900;
  background-color: #CF3696;
}
.process-box-01 .process-content .card-title {
  font-size: 1.2rem;
}
.process-box-01 .process-content .card-text {
  font-size: .9rem;
}


.process-box-02 .process-content .card-title {
  font-size: 1rem;
  text-align: center;
}
.process-box-02 .process-content .card-title strong {
  color: #CF3696;
}

.process-box-02 .process-content li {
  font-weight: 500;
}

.process-box-03 .process-content .card-title {
  font-size: 1rem;
  text-align: center;
}
.process-box-03 .process-content .card-title strong {
  color: #CF3696;
}

.process-box-04 .process-content .card-title {
  font-size: 1rem;
}

.process-box-05 .process-content .card-header {
  color: #FFF;
  background-color: #325c5e;
}
.process-box-05 .process-content .card-header h4 {
  margin-bottom: 0;
  text-align: center;
  color: #FFF;
}
.process-box-05 .process-content .card-header p {
  color: #FFF;
}
.process-box-05 .process-content .card-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  text-align: center;
}

.process-box-06 .process-content .card-header {
  color: #FFF;
  text-align: center;
  background-color: #325c5e;
}
.process-box-06 .process-content .card-header h4 {
  color: #FFF;
}
.process-box-06 .process-content .card-header p {
  color: #FFF;
}
.process-box-06 .process-content .card-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  text-align: left;
}
.process-box-06 .process-content i {
  font-size: 125%;
  width: 1.5rem;
}

.process-box-06 .process-content li {
  font-size: .9rem;
  font-weight: 500;
}
@media (max-width: 767.98px) {
  .process-box-06 .process-content ul {
    padding-left: 1rem;
  }
  .process-box-06 .process-content li {
    font-size: .85rem;
    font-weight: 700;
  }
}

.process-box-07 .process-content .card-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
}
@media (min-width: 992px) {
  .process-box-07 .process-content .card-title {
    font-size: .85rem;
  }
}

/* 
   4.4.7 Page: company
   -------------------------- */
.company-guiding-content h2 {
  margin-top: 0 !important;
  border: none;
  text-align: center;
  font-size: 1rem;
}
.company-guiding-content h2::before {
  display: none;
}

.company-mission {
  margin-bottom: 3rem;
  padding: 1.5rem;
  background-color: #FFF;
  text-align: center;
  border-radius: 1.5rem;
}
.company-mission p {
  margin-bottom: 0;
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  font-weight: 700;
}
.company-vision {
  margin-bottom: 3rem;
  padding: 1.5rem;
  background-color: #FFF;
  text-align: center;
  border-radius: 1.5rem;
}
.company-vision p {
  margin-bottom: 0;
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  font-weight: 700;
}
.company-values {
  margin-bottom: 3rem;
  padding: 1.5rem;
  background-color: #FFF;
  text-align: center;
  border-radius: 1.5rem;
}
.company-values dl dd {
  color: #cf3696;
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  font-weight: 700;
}
.company-values p {
  margin-bottom: 0;
  font-size: clamp(1.05rem, 2vw, 1.15rem);
  font-weight: 700;
}

.about-us-content h2 {
  margin: 1.5rem 0;
  text-align: center;
}
.about-us-content h2::before {
  display: none;
}
.about-us-box {
  margin-bottom: 3rem;
  padding: 1.5rem;
  text-align: center;
  background-color: #FFF;
  border-radius: 1.5rem;
}
.about-us-box p {
  /* font-weight: 500; */
}

.about-us-box ul li {
  /* font-weight: 500; */
}

.our-approach-box h3 {
  margin: 1.5rem 0;
  text-align: center;
}
.our-approach-box h3::before {
  display: none;
}
.our-approach-box {
  margin-bottom: 3rem;
  padding: 1.5rem;
  text-align: center;
  background-color: #FFF;
  border-radius: 1.5rem;
}
.our-approach-box dl dd {
  font-weight: 400;
}
.our-approach-box i {
  color: #cf3696;
}

.introduction-box {
  margin-bottom: 3rem;
  padding: 1.5rem;
  background-color: #FFF;
  border-radius: 1.5rem;
}
.profile-name {
  margin-bottom: 0;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
}
.profile-role {
  margin-bottom: 0;
  font-size: clamp(1.05rem, 2vw, 1.15rem);
  font-weight: 700;
}
.profile-position {
  font-weight: 700;
}
.personal-story p {
  margin-bottom: 3rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 1px;
}

.industry-experience {
  padding: 1rem;
  border-radius: 1rem;
}
.industry-experience p {
  margin-bottom: 0;
  font-size: .9rem;
}


/* 
   4.4.8 Page: features
   -------------------------- */
.business-passion-content h2 {
  padding-left: 0;
  color: #333;
  letter-spacing: 1px;
}
.business-passion-content h2::before {
  display: none;
}
.business-passion-content h3 {
  padding-left: 0;
  color: #333;
  letter-spacing: 1px;
}
.business-passion-content h3::before {
  display: none;
}
.business-passion-content p {
  margin-bottom: 3rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 1px;
}
.business-passion-content p span {
  color: #666;
}


/* 
   4.4.9 LP: package
   -------------------------- */

.page-package-header {
  padding: clamp(1.5rem, 6vw, 3rem) 0 clamp(1.5rem, 6vw, 5rem);
  text-align: center;
}
.package-service-note {
  display: table;
  margin-left: auto;
  margin-right: auto;
  padding: .75rem;
  border-radius: .75rem;
  background-color: #FFF;
}
.package-service-note p {
  text-align: center;
  font-size: .9rem;
  font-weight: 600;
}
.package-service-note p:last-of-type {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .package-service-note p {
    font-size: .95rem;
  }
  .package-service-note {
    padding: 1rem;
    border-radius: 1rem;
  }
}

@media (min-width: 992px) {
  .page-package-header {
    background-image: url("../img/bg-left-corner-03.png"), url("../img/bg-right-corner-03.png");
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;
  }
}

.page-package-about-content {
  padding-bottom: clamp(1.5rem, 6vw, 5rem);
  text-align: center;
}

.page-package-cat-01-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  background-color: #335e60;
}

/* 
   4.4.10 Page: pricing
   -------------------------- */
.plan-header {
  cursor: pointer;
  color: #FFF;
  transition: all 0.3s ease;
}

.one-page-plan .plan-header {
  background-color: #325c5e;
}
.basic-plan .plan-header {
  background-color: #cf3696;
}

.plan-header h3 {
  margin-top: 0;
  margin-bottom: 0;
  color: #FFF;
}
.plan-header h3::before {
  background-color: rgba(255,255,255,.8);
}

.plan-price {
  font-size: 1.5rem;
  font-weight: bold;
}

.plan-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.plan-details.show {
  max-height: 1500px;
}

.plan-details .table th {
  color: #333;
  background-color: rgba(0, 0, 0, 0.03);
}
@media (min-width: 992px) {
  .plan-details .table th {
    width: 25%;
  }
}

.check-icon {
  color: #28a745;
}

/* プランごとの背景色 */
.one-page-plan {
  border-left: 5px solid #325c5e;
}

.basic-plan {
  border-left: 5px solid #cf3696;
}

/* アコーディオンアイコンのアニメーション */
.rotate-icon {
  transition: transform 0.3s ease;
}

.rotate-icon.rotate {
  transform: rotate(180deg);
}

/* 印刷用スタイル */
@media print {
  .plan-details {
    max-height: none !important;
    display: block !important;
  }

  .card {
    break-inside: avoid;
  }
}

.website-works {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: #FFF;
  border-radius: 1.5rem;
}
.website-works-header {
  text-align: center;
}
.website-works-header h3 {
  margin-top: 0;
  text-align: center;
}
.website-works-header h3::before {
  display: none;
}
.website-works-header p {
  text-align: center;
}

.work-field {
  background-color: #ebf7df;
  border-radius: 1rem;
}
.work-field .card-header {
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  color: #325c5e;
}
.work-field .card,
.work-field .card-header,
.work-field .card-footer {
  background-color: transparent;
}
.work-field .card-work {
  height: 100%;
  background-color: #FFF;
}
.work-field .card-body {
  padding: .5rem;
  font-size: .8rem;
  font-weight: 700;
}
.work-field .card-text {
  text-align: center;
}
.work-field .small {
  font-size: .7rem;
}

.website-option {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: #FFF;
  border-radius: 1.5rem;
}
.website-option-header {
  text-align: center;
}
.website-option-header h3 {
  margin-top: 0;
  text-align: center;
}
.website-option-header h3::before {
  display: none;
}
.website-option-header p {
  text-align: center;
}
.website-option .work-field,
.website-option .card-work {
  height: 100%;
}
.website-option .x-mark {
  font-size: 2.5rem;
}
.website-option .card-header small {
  font-size: .8rem;
}
.website-option .card-work .card-text {
  text-align: left;
}
.website-option .card-work .card-text i  {
  width: 2.5rem;
  font-size: 1.5rem;
  color: #567d7a;
  text-align: center;
}


/* 
   4.4.11 LP: package
   -------------------------- */

/* reason */
.reason-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  background-color: #FFF;
}
.reason-content .section-header h2 {
  line-height: 1.5;
  /* color: #325c5e; */
}

.reason-content .reason-guidelines {
  display: table;
  margin: 0 auto 3rem;
  padding: 1.5rem;
  background-color: #FFF;
  border: 1px solid #d2d3d4;
}
.reason-content .reason-guidelines ul li {
  font-weight: 600;
}
.reason-content .reason-box {
  margin-bottom: 3rem;
  background-color: #FFF;
  border: 10px solid #f7f7f9;
}
.reason-content .reason-box .reason-box-header {
  position: relative;
  padding: 1.5rem 1rem 1.5rem 4rem;
  overflow: hidden;
  color: #FFF;
  background-color: #325c5e;
}
.reason-content .reason-box .reason-box-header h3 {
  margin-bottom: 0;
  font-family: "Noto Sans JP", sans-serif;
}
.reason-content .reason-box .reason-box-body {
  padding: 1rem;
}
.reason-content .reason-box .reason-box-header::before {
  position: absolute;
  font-size: 88px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,.25);
  left: 16px;
  bottom: -8px;
}
.reason-box-01 .reason-box-header::before {
  content: "1";
}
.reason-box-02 .reason-box-header::before {
  content: "2";
}
.reason-box-03 .reason-box-header::before {
  content: "3";
}
.reason-box-04 .reason-box-header::before {
  content: "4";
}

/* solutions */
.solutions-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
}
.solutions-content .problem-box h2 {
  font-size: 1.25rem;
  line-height: 2;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #9dbdaf;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.solutions-content .solutions-box {
  margin: 1.5rem 1rem;
  padding: 1.5rem;
  text-align: center;
  font-weight: 700;
  background-color: #FFF;
  border-radius: 1.5rem;
  box-shadow: 0px 5px 10px 0px rgba(100, 100, 100, 0.15);
}
.solutions-content .solutions-box p {
  margin-bottom: 0;
  font-size: 1.25rem;
}
@media (min-width: 768px) {
  .solutions-content .problem-box h2 {
    font-size: 1.5rem;
  }
  .solutions-content .solutions-box p {
    margin-bottom: 0;
    font-size: 1.3rem;
  }
}
@media (min-width: 992px) {
  .solutions-content .solutions-box {
    margin: 3rem 8rem;
  }
}
  
.solutions-content .worried-list-box {
  padding: 1rem;
  background-color: #FFF;
  border-radius: 1rem;
}
.solutions-content .worried-list-box ul {
  margin: 0;
}
.solutions-content .worried-list-box .list-group-item {
  font-weight: 700;
}

.solutions-content .our-helpful {
  display: table;
  margin: 1.5rem auto;
  padding: 1.5rem;
  text-align: center;
  background-color: #FFF;
  border-radius: 1.5rem;
  box-shadow: 0px 5px 10px 0px rgba(100, 100, 100, 0.15);
}
.solutions-content .our-helpful p {
  margin-bottom: 0;
  font-size: 1.15rem;
  font-weight: 700;
}
@media (min-width: 768px) {
  .solutions-content .our-helpful p {
    font-size: 1.25rem;
  }
  .solutions-content .our-helpful span {
    display: inline-block;
    padding: 1rem 70px;
    background-image: url("../img/text-decoration-left.png"), url("../img/text-decoration-right.png");
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;
  }
}

/* concept */
.services-package-concept-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  background-color: #325c5e;
}
.services-package-concept-content .section-header h2 {
  color: #FFF;
}
.services-package-concept-content .section-header,
.services-package-concept-content .section-header .english-headline {
  color: #FFF;
}
.services-package-concept-content .theme-box {
  margin-bottom: 3rem;
  background-color: #FFF;
}
.services-package-concept-content .theme-box .number-circle {
  display: inline-block;
  margin-right: .25rem;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #FFF;
  background-color: #cf3696;
  border-radius: 10rem;
}
.services-package-concept-content .theme-box .theme-box-header {
  padding: 1rem;
  text-align: center;
  background-color: #ebf7df;
}
.services-package-concept-content .theme-box .theme-box-header h3 {
  margin-bottom: 0;
  font-size: 1.15rem;
}
.services-package-concept-content .theme-box .list-group-item {
  padding: .5rem .75rem;
  font-size: 1rem;
  font-weight: 700;
}
@media (min-width: 992px) {
  .services-package-concept-content .theme-box .list-group-item {
    padding: 2.25rem .75rem;
  }
}

.services-package-concept-content .concept-box {
  margin-bottom: 3rem;
  background-color: #FFF;
}
.services-package-concept-content .concept-box .concept-box-header {
  padding: 1rem;
  text-align: center;
  background-color: #ebf7df;
}
.services-package-concept-content .concept-box .concept-box-header h3 {
  margin-bottom: 0;
  font-size: 1.15rem;
}
.services-package-concept-content .concept-box .list-group-item {
  padding: .5rem .75rem;
  font-size: 1rem;
  font-weight: 700;
}
.services-package-concept-content .theme-box .list-group-item,
.services-package-concept-content .concept-box .list-group-item {
  font-size: .9rem;
}

@media (min-width: 768px) {
  .services-package-concept-content .theme-box .list-group-item,
  .services-package-concept-content .concept-box .list-group-item {
    font-size: 1rem;
  }
}


/* message */
.services-package-message-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
}
.services-package-message-content .section-header h2 {
  color: #325c5e;
}
.services-package-message-content .message-text {
  text-align: center;
}
.services-package-message-content .message-text p {
  font-weight: 500;
}
.services-package-message-content .message-text strong {
  font-size: 150%;
}
@media (min-width: 992px) {
  .services-package-message-content .message-text .btn {
    padding: 1rem 5rem;
  }
}

.faq-item {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #DDD;
}
.faq-item .faq-item-title {
  position: relative;
  padding-left: 2rem;
  color: #325c5e;
}
.faq-item .faq-item-title::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "Q:";
  color: #325c5e;
  font-weight: bold;
}
.faq-item .faq-item-body {
  position: relative;
  padding-left: 2rem;
}
.faq-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15em;
  background: linear-gradient(0deg, #fff 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}
/* collapse 展開時に overlay を非表示 */
#moreFaq.show + .faq-overlay {
  display: none;
}

/* グラデーションを非表示にする（collapse展開時に） */
#moreFaq.show ~ .more-button .btn[data-bs-toggle="collapse"] {
  display: none;
}
.more-button .btn[aria-expanded="true"] {
  display: none;
}

.curriculum-list li {
  padding: .5rem 1rem;
  font-weight: 700;
}
.curriculum-note li {
  padding: .5rem 1rem;
  font-weight: 700;
}
.curriculum-note h5 {
  color: #c00e0e;
  border-color: #DDD;
}

.website-scope .table {
  font-size: .9rem;
}
.website-scope-note table {
  font-size: .9rem;
}
.website-scope-note table th {
  white-space: nowrap;
}

/* 
   4.4.12 LP:renewal
   -------------------------- */

.page-renewal-header {
  padding: clamp(1.5rem, 6vw, 3rem) 0 clamp(1.5rem, 6vw, 5rem);
  text-align: center;
}
@media (min-width: 1200px) {
  .page-renewal-header {
    background-image: url("../img/bg-left-corner-03.png"), url("../img/bg-right-corner-03.png");
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;
  }
}
@media (max-width: 575.98px) {
  .page-renewal-header .lead {
    font-size: .9rem;
  }
}

/* problem */
.renewal-problem-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  background-color: #325c5e;
}
.renewal-problem-content h2 {
  margin-bottom: 3rem;
  color: #FFF;
  text-align: center;
}
@media (max-width: 575.98px) {
  .renewal-problem-content h2 {
    margin-bottom: 1rem;
  }
}
.renewal-problem-content h2 strong {
  font-size: 125%;
}

/* service flow */
.renewal-service-flow-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  background-color: #FFF;
}
.renewal-service-flow-content h2 {
  color: #325c5e;
}
.card-renewal-step {
  text-align: center;
  border-radius: 0;
}
.card-renewal-step .card-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.25rem;
}
.card-renewal-step .card-text {
  font-weight: 500;
}
.card-renewal-step.step-01 {
  background-color: #ebf7df;
}
.card-renewal-step.step-02 {
  background-color: #9dbdaf;
}
.card-renewal-step.step-03 {
  color: #FFF;
  background-color: #325c5e;
}

.card-renewal-step .number-circle {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: .75rem;
  width: 50px;
  height: 50px;
  font-size: 2rem;
  text-align: center;
  line-height: 50px;
  color: #FFF;
  background-color: #cf3696;
  border-radius: 10rem;
}

.arrow-box {
  width: 30px;
  justify-content: center;
}

/* 共通矢印スタイル */
.arrow-box {
  width: 20px;
  justify-content: center;
}

.arrow {
  width: 0;
  height: 0;
  border: solid transparent;
  position: relative;
}

.arrow.right {
  border-width: 40px 0 40px 20px;
}
.arrow.arrow-01 {
  border-left-color: #ebf7df; /* 緑色矢印 */
}
.arrow.arrow-02 {
  border-left-color: #9dbdaf; /* 緑色矢印 */
}

@media (max-width: 767.98px) {
  .arrow-box {
    display: flex !important;
    width: 100%;
    margin: 1rem 0;
  }
  .arrow.right {
    transform: rotate(90deg); /* 下向き矢印に変更 */
  }
}


/* solution */
.renewal-solution-content {
  padding: 0 0 clamp(1.5rem, 6vw, 5rem);
}
.renewal-solution-content h2 {
  margin-top: 3rem;
  margin-bottom: 3rem;
  color: #325c5e;
  text-align: center;
}
.solution-flow-box {

}
.solution-flow-box-header {
  padding: 1rem;
  background-color: #ebf7df;
}
.solution-flow-box-header h3 {
  margin: 0;
  color: #325c5e;
  text-align: center;
}
.solution-flow-box-body {
  padding: 1.5rem;
  text-align: center;
  background-color: #FFF;
}
.card-solution .card-title {
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  color: #325c5e;
}
.card-solution .card-text {
  text-align: center;
  font-size: .95rem;
  font-weight: 500;
}

/* pricing */
.renewal-pricing-content {
  padding: clamp(1.5rem, 6vw, 5rem) 0;
  background-color: #f5faef;
}
.renewal-pricing-content h2 {
  color: #325c5e;
}
.renewal-pricing-content .table th,
.renewal-pricing-content .table td {
  text-align: center;
  vertical-align: middle;
  font-weight: 500;
}
.renewal-pricing-content .table hr {
  margin: .5rem 0;
}

.renewal-service-flow-note {
  display: table;
  margin-top: 3rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
  text-align: center;
  border-radius: 1rem;
  background-color: #f7f7f9;
}

.renewal-service-flow-box {
  margin-bottom: 3rem;
  text-align: center;
  background-color: #FFF;
  border: 10px solid rgba(100,100,100, .15);
}
.renewal-service-flow-box:last-of-type {
  margin-bottom: 0;
}

.renewal-service-flow-box .renewal-service-flow-box-body h4 {
  font-family: "Noto Sans JP", sans-serif;
  color: #325c5e;
}

.renewal-service-flow-box a {
  text-decoration: underline;
}
.renewal-service-flow-box a:hover {
  text-decoration: none;
}
.renewal-service-flow-box .renewal-service-flow-box-header {
  position: relative;
  padding: 1.5rem;
  overflow: hidden;
  color: #FFF;
  background-color: #325c5e;
}

.renewal-service-flow-box-header.step-01 {
  color: #333;
  background-color: #ebf7df;
}
.renewal-service-flow-box-header.step-02 {
  color: #333;
  background-color: #9dbdaf;
}

.renewal-service-flow-box .renewal-service-flow-box-header .number-circle {
  display: inline-block;
  margin-right: .75rem;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #FFF;
  background-color: #cf3696;
  border-radius: 10rem;
}
.renewal-service-flow-box .renewal-service-flow-box-header h3 {
  margin-bottom: 0;
  font-family: "Noto Sans JP", sans-serif;
}
.renewal-service-flow-box .renewal-service-flow-box-body {
  padding: 1rem;
}
.service-detail-box {
  padding: 1rem;
  text-align: center;
  background-color: #ebf7df;
  border-radius: 1rem;
}
.service-detail-box h5 {
  margin-bottom: 0;
  color: #325c5e;
  font-size: 1.15rem;
  height: 2.5rem;
  line-height: 1.1;
  font-family: "Noto Sans JP", sans-serif;
}
@media (min-width: 576px) {
  .service-detail-box h5 {
    font-size: 1rem;
  }
}
.service-detail-box img {
  max-width: 50%;
  height: auto;
}

/* 
   4.4.13 Page: soudan
   -------------------------- */
.soudan-tel-box {
  padding: 1.5rem;
  background-color: #f5faef;
}
.soudan-tel-box ul {
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.soudan-mail-box {
  padding: 1.5rem;
  background-color: #f7f7f9;
}
.soudan-mail-box p {
  font-weight: 700;
}
.soudan-note-box {
  padding: 1.5rem;
  background-color: #f7f7f9;
}

/* form-step */
.form-step {
  overflow: hidden;
}
.form-step .nav-item {
  margin: 0 !important;
  position: relative;
  padding: 1rem 0;
  color: #FFF;
  background-color: #595757;
}
.form-step .nav-item.active {
  color: #FFF;
  background-color: #325c5e;
}

.form-step .nav-item:last-child{
  padding-right: 1rem;
}
.form-step .nav-item:last-child:before,
.form-step .nav-item:last-child:after{
  display:none;
}
.form-step .nav-item:before,
.form-step .nav-item:after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin: auto;
}
.form-step .nav-item:before{
  top: 50%;
  right: -1em;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  border-width: 3rem 0 3rem 1rem;
  z-index: 10;
  transform: translateY(-50%);
}
.form-step .nav-item:after{
  top: 50%;
  right:-.8rem;
  border-style: solid;
  border-color: transparent transparent transparent #595757;
  border-width: 3rem 0 3rem 1rem;
  z-index: 10;
  transform: translateY(-50%);
}
@media (max-width: 991.98px) {
  .form-step .nav-item:after {
    display: none;
  }
  .form-step .nav-item:last-child{
    padding-right: 0;
  }
}

.form-step .nav-item.active:after{
  top: 50%;
  right:-.8rem;
  border-style: solid;
  border-color: transparent transparent transparent #325c5e;
  border-width: 3rem 0 3rem 1rem;
  z-index: 10;
  transform: translateY(-50%);
}