@charset "utf-8";

/* ヘッダー
-------------------------------------*/
header {
  width: 100%;
  position: -webkit-sticky;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: transparent;
  color: var(--white);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.site-header {
  background:
    url(../images/common/bg-blue-gradation.webp) center bottom / cover no-repeat;
  padding-bottom: 0;
}

.bg-site-top {
  background:
    url(../images/top/bg-sitetop-header-b.png) center top / auto no-repeat;
  padding-top: clamp(110px, 8vw, 170px);
}

header.active .bg-site-top {
  background: none
}

.site-header.scrolled .bg-site-top,
.site-header.active .bg-site-top {
  background: none;
  padding-top: 1rem;
}

/* ★ 1400px以下で、1400px時点の左端位置に固定 */
@media screen and (max-width: 1400px) {
  .bg-site-top {
    background-position: -800px top;
  }
}

@media screen and (min-width: 2980px) {
  .site-header {
    background-size: contain;
  }
}


header.scrolled, header.active {
  background: rgba(255, 255, 255, 0.9);
  color: #707070;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}


header.scrolled .hamburger span {
  background-color: #707070;
}

header.scrolled.active .hamburger span {
  background-color: var(--white);
}


header .head-area {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  padding: 1rem 1.5rem;
}

.site-header .head-area {
  padding-bottom: 0;
}

.head-logo {
  width: clamp(110px, 25vw, 140px);
}

header .head-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-area {
  padding: 0 1rem 14px;
}

.nav-area ul {
  display: flex;
  justify-content: center;
  font-size: clamp(14px,1.6vw,16px);
}

.nav-area ul li {
  padding: 0 0.8em;
  position: relative;
}

/* ==================================================
   通常時：塗りつぶしの直角三角（▲）
   ================================================== */
.site-header .nav-area ul li {
  position: relative;
}

.site-header .nav-area ul li:after {
  content: "";
  position: absolute;
  bottom: -1.5em;
  left: 50%;
  transform: translateX(-50%);

  /* 直角三角（90度） */
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid #fff;

  /* ★ 角を丸くする（塗りつぶし三角でも有効） */
  border-radius: 0 2px 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ★ ホバー時は表示しない（削除） */
/* .site-header .nav-area ul li:hover:after { } */

/* ★ 現在のページ（カレントページ）のみ表示 */
.site-header .nav-area ul li.current-menu-item:after,
.site-header .nav-area ul li.current_page_item:after {
  opacity: 1;
}

/* ==================================================
   スクロール後：線だけの直角三角（△）上向き
   ================================================== */
.site-header.scrolled .nav-area ul li:after {
  /* 塗りつぶしをリセット */
  border: none;

  /* 正方形を作って2辺だけにborderをつける */
  width: 14px;
  height: 14px;
  border-top: 1px solid #707070;
  /* ★ 1px、グレー */
  border-right: 1px solid #707070;
  /* ★ 1px、グレー */

  /* 45度回転で上向き三角に */
  transform: translateX(-50%) rotate(-45deg);

  /* 角を丸くする */
  border-radius: 0 2px 0 0;
  /* 位置微調整 */
  bottom: -1.5em;
}

.head-contact-btn {
  display: flex;
  background-color: var(--sub-color_01);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  color: var(--white);
  padding: .5rem 2rem;
}

.head-contact-btn img {
  max-width: 20px;
}

.head-contact-btn p {
  margin: 0;
  white-space: nowrap;
}

.head-contact-btn:hover {
  color: var(--white);
  opacity: .8;
}

.head-contact-btn img:hover {
  opacity: 1;
}

/* ハンバーガーボタン */
.hamburger {
  display: none;
}

#mobile-nav {
  display: none;
}

/* オーバーレイ */
.overlay {
  display: none;
}

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

  header h1 {
    margin-bottom: 0;
  }

  header .head-nav {
    padding-bottom: 1rem;
  }

  #mobile-nav {
    display: block;
  }

  .nav-area {
    display: none;
    /* クローン使用しない時はblockにする */
    position: fixed;
    left: 0;
    /*top: 0;*/
    /* クローン使用しない時に使う */
    width: 100%;
    padding: 0;
    transform: translateY(-200%);
    transition: transform 0.3s ease;
    z-index: 9;
    /* クローン使用しない時は削除する */
  }

  .nav-area.is-open {
    transform: translateY(0);
  }

  .head-contact-btn {
    display: none;
  }

  .nav-area ul {
    display: block;
    /* background-color: var(--sub-color_01); */
  }

  .nav-area ul li {
    border-bottom: 1px solid var(--white);
    text-align: center;
    padding: 1rem;
  }

  .nav-area li.sp-view {
    display: block;
  }

  .nav-area ul li:last-of-type {
    border-bottom: none;
  }

  .nav-area ul li a {
    color: var(--white);
  }

  /* ハンバーガーボタン */
  .hamburger {
    display: block;
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border-radius: 50%;
    cursor: pointer;
    width: 50px;
    height: 50px;
  }

  .hamburger span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
  }

  .hamburger span:nth-of-type(1), .hamburger span:nth-of-type(2), .hamburger span:nth-of-type(3) {
    height: 2px;
    background-color: var(--white);
    width: 62%;
    left: 10px;
  }

  .hamburger span:nth-of-type(1) {
    top: 12px;
  }

  .hamburger span:nth-of-type(2) {
    top: 22px;
  }

  .hamburger span:nth-of-type(3) {
    top: 32px;
  }

  .hamburger.active {
    background-color: var(--main-color);
  }

  .hamburger.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
  }

  .hamburger.active span:nth-of-type(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
  }

  /* オーバーレイ */
  .overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(31, 41, 55, 0.9);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 8;
  }

  .overlay.active {
    opacity: 1;
    visibility: visible;
  }

  body.menu-open {
    overflow: hidden;
  }
}

/* フッター
-------------------------------------*/
footer {
  color: var(--text-color);
  position: relative;
  margin-top: 230px;
}

.bg-footer {
  background: url(../images/common/bg-footer-1920.webp) no-repeat center center / auto;
  height: 1380px;
  width: 100vw;
  position: absolute;
  top: -20%;
  left: 0;
  z-index: -1;
}

/* 画面幅1921px以上の時*/
@media screen and (min-width: 1921px) {
  .bg-footer {
    background: url(../images/common/bg-footer.webp) no-repeat center center / 100% 100%;
    height: 1890px;
    top: -45%;
  }
}

.footer-contact-container {
  justify-content: space-between;
  gap: 20%;
  align-items: stretch;
  padding-top: 140px;
  color: var(--white);
  margin-bottom: 100px;
  padding-bottom: 170px;
}

.footer-contact-container>div {
  flex: 1 1 40%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-contact-container h2 {
  font-size: clamp(24px, 5vw, 50px);
  font-weight: bold;
  margin: 0;
  line-height: 1.2;
}

.footer-contact-container hr {
  margin: 2em auto;
  width: 3em;
  border: 2px solid var(--white);
}

.footer-contact-container p {
  line-height: 1.6;
  margin: 0 0 2em 0;
  font-size: clamp(16px, 3vw, 18px);
}

.footer-contact-container a {
  background-color: var(--white);
  padding: 0 2em;
  border-radius: 50px;
  display: flex;
  align-items: center;
  font-size: clamp(16px, 2vw, 18px);
  width: 16em;
  height: 4em;
  margin: 0 auto;
  border: 4px solid var(--white);
}

.footer-contact-container .footer-contact-l a {
  color: var(--green);
}

.footer-contact-container .footer-contact-r a {
  color: var(--blue);
}

.footer-contact-container .footer-contact-l a:hover {
  background-color: var(--green);
  color: var(--white);
  opacity: 1;
}

.footer-contact-container .footer-contact-r a:hover {
  background-color: var(--blue);
  color: var(--white);
  opacity: 1;
}

.footer-contact-container img {
  width: 30vw;
  max-width: 360px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.foot-logo {
  max-width: clamp(160px, 25vw, 250px);
}

.footer-info {
  justify-content: space-between;
  align-items: flex-start;
  gap: 2em;
}

.num {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
}

footer p {
  line-height: 1.2;
}

.footer-sns {
  gap: 2em;
  justify-content: flex-start;
}

.footer-sns a {
  flex: 1 1 calc(100% / 3);
  max-width: 50px;
}

.footer-hr-box .flex-certification {
  width: 100%;
  justify-content: flex-start;
  gap: 1em;
}

.footer-hr-box {
  border-top: 1px solid #707070;
  margin-top: 3em;
  padding: 2em 0;
}

.footer-hr-txt {
  position: absolute;
  left: 0;
  top: -1.6em;
  background: #fff;
  padding-right: 1em;
}

.footer-hr-box .flex {
  gap: 2em;
  justify-content: flex-start;
}

.footer-hr-box .flex a img {
  max-height: 50px;
  width: auto;
}

.footer-hr-box .flex-certification {
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0;
}

.flex-certification li {
  width: calc(100% / );
  min-width: 60px;
}

.flex-certification li img {
  padding: 6px;
}


.copyright-container {
  background: url(../images/common/bg-blue-gradation.webp) no-repeat top center / cover;
}

.copyright {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  line-height: 1.8;
  margin: 0;
  color: var(--white);
}

@media screen and (max-width: 960px) {
  .footer-contact-container img {
    top: -55%;
    bottom: unset;
    width: unset;
  }

  .footer-contact-container {
    gap: 0 2em;
    justify-content: space-around;
  }
}

@media screen and (max-width: 768px) {
  footer {
    padding: 260px 0 0;
    overflow-x: hidden;
    margin-top: 0;
  }

  .bg-footer {
    display: none;
  }

  .footer-contact-container .footer-contact-l {
    background-color: var(--green);
    padding: 2em 0;
  }

  .footer-contact-container .footer-contact-r {
    background-color: var(--blue);
    padding: 2em 0;
  }

  .footer-contact-container::before {
    content: "";
    position: absolute;
    height: 300px;
    width: 150vw;
    left: 50%;
    transform: translateX(-50%);
    top: 0;

    background: radial-gradient(ellipse at 50% 100%, var(--green) 65%, transparent 60%);
    z-index: -1;
  }

  .footer-contact-container img {
    top: clamp(-220px, calc(-40vw - 45px), -130px);
    width: 70vw;
    max-width: 280px;
  }
}

/* トップページ
-------------------------------------*/
/* header-top */
.l-hero-wrapper {
  background:
    url(../images/common/bg-blue-gradation.webp) center bottom / cover no-repeat;
  color: var(--white);
}

.top-hero-container {
  justify-content: space-between;
  padding: 140px 2em 0;
}

.top-hero {
  font-size: clamp(30px, 5vw, 50px);
  font-weight: bold;
  margin: 0 0 0.5em 0;
  line-height: 1.2;
}

.top-txt {
  font-size: clamp(16px, 2vw, 18px);
  font-weight: bold;
  line-height: 1.6;
}

.top-img-area {
  flex: 1 1 40%;
}

.hero-img {
  object-fit: contain;
  max-height: 300px;
}

.to-contact-btn {
  position: fixed;
  top: 55%;
  right: 0;
  z-index: 10;
}

.bg-greenwave {
  background: url(../images/top/bg-top-header-b.png) no-repeat center / auto;
  height: 470px;
  padding-top: 100px;
}

.news-tabs {
  display: flex;
  gap: clamp(5px, 1vw, 10px);
  justify-content: flex-end;
  padding-right: 10px;
}

.news-content {
  display: none;
  background-color: white;
  padding: 0.5em 2em;
  border: 6px solid #ccc;
  border-radius: 10px;
  color: #707070;
  position: relative;
}

.news-content .news-img {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-110%);
  max-width: 108px;
  width: 25vw;
}

.news-content.active {
  display: block;
}

.news-content .news-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.news-item .news-date {
  font-family: "Oswald", sans-serif;
  font-weight: 200;
  padding-right: 2em;
}

/* --- 色別スタイル設定 --- */
.news-tab {
  color: #fff;
  font-size: clamp(12px, 2vw, 14px);
  padding: 5px 10px;
  border-radius: 6px 6px 0 0;
}

/* 1. お知らせ（News）：青 (#2c8be3) */
.news-tab.tab-news {
  background: #2c8be3;
}

.news-content.content-news {
  border-color: #2c8be3;
}

/* 2. サービス（Service）：緑 (例: #4caf50) */
.news-tab.tab-service {
  background: #7dc547;
}

.news-content.content-service {
  border-color: #7dc547;
}

/* 3. 取り組み（Work）：水色 (例: #00bcd4) */
.news-tab.tab-work {
  background: #59b9eb;
}

.news-content.content-work {
  border-color: #59b9eb;
}

/* FV */
.fv {
  text-align: center;
  position: relative;
}

.l-main h2 {
  font-size: clamp(30px, 5vw, 50px);
  font-weight: bold;
  color: var(--main-color);
  line-height: 1.2;
  margin-bottom: 1rem;
  display: inline-block;
}

.l-main h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 10px;
  background-color: var(--blue);
  margin-top: 0.5em;
}

.l-main p {
  line-height: 1.8;
}

.link-btn a {
  border: 3px solid var(--main-color);
  padding: 1em 2em;
  border-radius: 50px;
  display: inline-block;
  font-size: clamp(16px, 2vw, 18px);
  width: 16em;
  margin: 0 auto;
  color: var(--main-color);
  text-align: center;
  background-color: var(--white);
  transition: all 0.5s;
}

.link-btn a:hover {
  background-color: var(--main-color);
  color: var(--white);
  opacity: 1;
  transition: all 0.5s;
}

.bg-wave1 {
  background: url(../images/top/bg-marimo-slide-top1920.png) center top / auto no-repeat,
    url(../images/top/bg-marimo-slide-bt1920.png) center bottom / auto no-repeat,
    url(../images/common/bg-blue-gradation.webp) center bottom / cover no-repeat;
  padding-top: 220px;
  padding-bottom: 200px;
  font-weight: bold;
  font-size: 20px;
  color: var(--white);
  text-align: center;
}

/* 画面幅1921px以上の時*/
@media screen and (min-width: 1921px) {
  .bg-wave1 {
    background: url(../images/top/bg-marimo-slide-top.png) no-repeat center top / auto,
      url(../images/top/bg-marimo-slide-bt.png) no-repeat center bottom / auto,
      url(../images/common/bg-blue-gradation.webp) center bottom / cover no-repeat;
    padding-top: 400px;
    padding-bottom: 400px;
  }
}

/* ========================================================
   スライダー全体
   ======================================================== */
.marimo-slider-wrap {
  position: relative;
  padding: 2vw 0 20px;
}

.marimo-slider {
  width: 100%;
  margin: 0 auto;
}

.marimo-slider li {
  position: relative;
  /* 重ねの基準 */
  padding: 0 2em 4em 3em;
  /* スライド間の隙間 ← 元のまま保持 */
}

/**** 吹き出し・人物表示制御 ****/
.slide-bg {
  width: 100%;
  height: auto;
  z-index: 1;
}

.top-slide-human {
  position: absolute;
  bottom: -1%;
  /* 吹き出しとの重なり具合 ← 元のまま */
  left: -2%;
  width: 30%;
  /* サイズ調整 ← 元のまま保持 */
  z-index: 2;
}

/* サイドスライド（丸枠だけ見せる） */
.marimo-slider .slick-slide:not(.slick-center) .top-slide-human {
  opacity: 0;
  /* 人物＋三角を非表示 ← 元のまま */
}

.marimo-slider .slick-slide:not(.slick-center) .slide-bg-triangle {
  display: none;
  /* 三角非表示 ← 元のまま */
}

.marimo-slider .slick-slide:not(.slick-center) .slide-bg {
  opacity: 0.8;
  /* 吹き出しを薄く ← 元のまま */
}

/* センタースライド（全部見せる） */
.marimo-slider .slick-center .top-slide-human {
  opacity: 1;
  transition: opacity 0.3s ease;
  /* スムーズにフェードイン ← 元のまま */
}

.marimo-slider .slick-center .slide-bg-triangle {
  display: block;
}

.marimo-slider .slick-center .slide-bg {
  display: none;
}

/**** 固定装飾（slide-under.png）****/
.marimo-slider::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 52%;
  background: url(../images/top/slide-under.png) no-repeat right bottom / contain;
  height: 40%;
  width: 21%;
  z-index: 0;
  pointer-events: none;
}

.marimo-slider li.slick-center {
  z-index: 2;
  /* slide-under.png より上 ← 元のまま */
}

/* 1600px 以上の場合 */
@media screen and (min-width: 1600px) {
  .marimo-slider::after {
    left: 58%;
    height: 186px;
    width: 190px;
  }
}

/**** 矢印（白丸＋青三角）****/
.marimo-arrow {
  position: absolute;
  top: 30%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background-color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.marimo-prev::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--blue) transparent transparent;
  margin-right: 5px;
}

.marimo-next::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--blue);
  margin-left: 5px;
}

.marimo-arrow:hover {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .marimo-arrow {
    width: 40px;
    height: 40px;
  }
}

/**** ドット（中央下の青／白） ****/
.slick-dots {
  bottom: 0;
}

.marimo-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
}

.marimo-dots .slick-dots {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.marimo-dots .slick-dots li button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0;
}

.marimo-dots .slick-dots li.slick-active button {
  background-color: var(--main-color);
}

.marimo-dots .slick-dots li button:hover {
  background-color: var(--main-color);
  opacity: 0.7;
}

@media screen and (max-width: 768px) {
  .marimo-slider-wrap {
    margin-bottom: 100px;
  }

  .marimo-slider li {
    padding: 0 2em 6em 3em;
  }

  .top-slide-human {
    bottom: 8%;
  }

  .marimo-slider::after {
    width: 160px;
    left: unset;
    right: 2%;
    bottom: -8%;
  }

  .marimo-dots {
    bottom: -8%;
  }
}

/* ============== スライダー終わり==============*/


/* ボタン全体 */
.marimo-btn {
  display: inline-block;
  /* インラインで自然な配置 */
  position: relative;
  /* ::before の基準 */
  transition: opacity 0.3s ease;
}

/* off画像（通常） */
.marimo-btn img {
  display: block;
  width: 100%;
  height: auto;
}

/* ホバー時：off画像を透明に */
.marimo-btn:hover img {
  opacity: 0;
}

/* on画像（::before で重ねる） */
.marimo-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/top/marimo-btn-on.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* ホバー時：on画像を表示 */
.marimo-btn:hover::before {
  opacity: 1;
}

a.marimo-btn:hover, a.marimo-btn img:hover {
  opacity: unset;
}

.l-main .sec-top-work h2::after {
  height: 6px;
  width: 80%;
  margin: 1em auto;
}

.top-works-list li {
  /* 画像のように、行と行の間に点線を入れる */
  border-bottom: 1px dotted #ccc;
  padding: 16px 0;
}


/* 1行全体をリンクにする */
.top-works-item {
  align-items: center;
  gap: 5px 20px;
  justify-content: flex-start;
}

.top-works-item:hover {
  opacity: 0.8;
}

.top-works-catchphrase {
  display: inline-block;
  background-color: var(--blue);
  color: var(--white);
  padding: 0.8em;
  border-radius: 30px;
  text-align: center;
  flex: 1 1 40%;
  min-width: 15em;
}

.top-works-company {
  font-size: 24px;
  flex: 1 1 60%;
}


@media screen and (max-width: 768px) {
  .top-hero-container {
    padding: 80px 1em 0;
  }

  .to-contact-btn {
    top: unset;
    bottom: 0;
  }

  .bg-greenwave {
    background: url(../images/top/bg-top-header-b.png) no-repeat top center / 2000px auto;
    height: 234px;
    padding-top: 60px;
  }

  .to-contact-btn div {
    background-color: var(--main-color);
    text-align: center;
    width: 100vw;
    vertical-align: middle;
    padding: 1.5em;
    position: relative;
    color: var(--white);
  }

  .to-contact-btn div p {
    display: inline-block;
    margin: 0 0 0 -80px;
  }

  .to-contact-btn div::after {
    content: "";
    background: url(../images/common/contact-man-sp.png) no-repeat center / contain;
    display: block;
    width: 100px;
    height: 95px;
    position: absolute;
    bottom: 0;
    left: calc(50% + 7em);
    transform: translateX(-50%);
  }

  .sec-top-about .flex img {
    max-width: 200px;
  }

  .link-btn {
    text-align: center;
  }

}


/* ページトップへ戻るボタン */
#page-top {
  position: fixed;
  right: 15px;
  bottom: -70px;
  z-index: 4;
  transition: bottom 0.3s ease-in-out;
}

#page-top.show {
  bottom: 20px;
  /* 表示時の位置 */
}

#page-top a {
  display: block;
  width: 50px;
  font-weight: bold;
  background-color: var(--sub-color_01);
  color: var(--white);
  text-align: center;
  padding: 15px 5px;
  border-radius: 5px;
  transition: background-color 0.3s;
}


/* page.css
-------------------------------------*/
.top-ttl {
  position: relative;
  z-index: 12;
}

body:has(header.active, header.scrolled) main .top-ttl {
  z-index: auto;
}

.top-ttl h1 {
  color: #004c93;
  font-weight: bold;
  font-size: clamp(24px, 3vw, 43px);
  border-bottom: solid 1px #004c93;
}

.page-ttl img {
  max-width: 500px;
  position: absolute;
  right: 0;
  bottom: 1%;
  z-index: -1;
}

.page-ttl-sol img {
  max-width: 578px;
  position: absolute;
  right: 0;
  bottom: 1%;
  z-index: -1;
}

.page-inner {
  margin: 4rem auto;
}

.position-ttl {
  max-width: 170px;
  text-align: start;
}

.position-sub-ttl {
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 500;
  margin-bottom: 1rem;
  text-align: left;
}

.link-btn__round-border_blue {
  display: inline-flex;
  align-items: center;
  border: 3px solid #004c93;
  padding: 1.5rem 4rem;
  border-radius: 100px;
  margin-bottom: 1rem;
  color: #004c93;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: bold;
}

a.link-btn__round-border_blue:hover {
    background: var(--main-color);
    opacity: 1;
    color: var(--white);
}

su [class*="link-btn__"]::after {
  content: "";
}

.history-ttl {
  color: #004c93;
  font-weight: bold;
  font-size: clamp(24px, 3vw, 43px);
  border-bottom: solid 1px #004c93;
}


.bg-wrapper {
  margin: 0 auto 8rem;
}



.com-bg-top {
  z-index: 2;
  background-image: url("../images/company/com_bg-top.webp");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  height: min(100vw, 300px);
  margin-top: -0.676471vw;
  white-space: nowrap;
  position: relative;
  padding: 2rem 1rem;
}

.com-bg-middle {
  z-index: 2;
  background-image: url("../images/company/com_bg-middle.webp");
  background-position: center top;
  background-size: cover;
  background-repeat: repeat-y;
  /* height: min(100vw, 1000px);*/
  /* white-space: nowrap;*/
  position: relative;
  padding: 2rem 1rem;
}

.com-bg-bottom {
  z-index: 2;
  background-image: url("../images/company/com_bg-bottom.webp");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  height: min(100vw, 945px);
  white-space: nowrap;
  position: relative;
  padding: 2rem 1rem;
}

.com-bg-top-ttl {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);

}

.three-s-ttl {
  font-size: clamp(24px, 3vw, 43px);
  color: #fff;
  font-weight: bold;
  text-align: center;
}

.three-s-line {
  max-width: 168px;
  border: 6px solid #fff;
  margin: 0 auto;
}

.three-s-list {
  margin: 0 auto;
}

.three-s-list li {
  font-size: clamp(18px, 2vw, 20px);
  color: #fff;
  line-height: 4em;
}

.three-s-img img {
  max-width: 743px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: clamp(3rem, 9vw, 8rem);
}


.greeting-ttl {
  font-size: clamp(24px, 3vw, 32px);
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 6px solid #e1e1e1;
  color: #707070;
}

.greeting-name {
  font-size: clamp(16px, 2vw, 18px);
  margin: 2rem 0;
}

.activities-ttl {
  font-size: clamp(18px, 2vw, 22px);
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 6px solid #d4d1cd;
  color: #79726b;
  margin: 0 0 1rem;
}

.activities-name {
  font-size: clamp(18px, 2.5vw, 22px);
  color: #3c3a3b;
  margin-top: 0;
  margin-bottom: 10px;
}

.activities-text {
  font-size: 14px;
}

.gray-line {
  border-bottom: 6px solid #e1e1e1;
}

.holder-ttl {
  font-size: clamp(18px, 2vw, 20px);
  font-weight: bold;
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 6px solid #d4d1cd;
  color: #79726b;
}

.width-box-120 {
  max-width: 120px;
}

.width-box-760 {
  max-width: 760px;
}

.width-box-960 {
  max-width: 960px;
}

.holder-list li {
  font-size: clamp(16px, 2vw, 18px);
  color: #79726b;
  font-weight: bold;
  line-height: 2em;
}

.solution-text {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 2em;
  margin: 4rem auto;
}

.original-box-shadow {
  background-color: #ffffff;
  width: 100%;
  height: auto;
  border-radius: 30px;
  box-shadow: 10px 10px 0px 0px rgba(0, 76, 148, 1);
  border: solid 4px #004c94;
  position: relative;
  padding: 1rem;
  margin-bottom: clamp(4rem, 11vw, 15rem);
}

.box-no {
  max-width: 76px;
  position: absolute;
  left: 5%;
  top: -50px;
}

.image-item {
  flex: 1;
  /* 各アイテムが均等な幅（33.33%）になるように */
  text-align: center;
  /* 画像を中央寄せ */
  padding: 10px clamp(14px, 2vw, 40px);
  position: relative;
  /* 縦線の位置調整用 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.image-item p {
  display: inline-block;
  text-align: left;
}

/* 画像自体のスタイル */
.image-item img {
  max-width: 134px;
  height: auto;
  vertical-align: middle;
  margin: 0 auto;
}

/* 縦線の仕切りを入れる（隣接セレクタを使用） */
.image-item:not(:first-child) {
  border-left: 1px solid #ccc;
  /* 左側に薄いグレーの線 */
}

.sol-box-ttl {
  font-size: clamp(24px, 3vw, 28px);
  font-weight: bold;
  text-align: center;
  color: #004c94;
}

.project-area .d-block {
    display: flex;
    flex-direction: column;
}

.tategaki {
  -webkit-writing-mode: vertical-lr;
  /* Safari用 */
  writing-mode: vertical-lr;
  /* 右から左へ（基本） */
  color: #004c94;
  font-size: clamp(18px, 2vw, 21px);
  text-orientation: mixed;
}

.tcy {
  text-combine-upright: all;
}

.d-block img {
  min-width: 28px;
}

.scroll-x {
  overflow-x: auto;
}

.solu-bg-top {
  z-index: 2;
  background-image: url(../images/solution/solution_bg_top.webp);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  height: min(100vw, 1000px);
  margin-top: -0.676471vw;
  white-space: nowrap;
  position: relative;
}

.solu-bg-middle {
  z-index: 2;
  background-image: url(../images/solution/solution_bg_middle.webp);
  background-position: center top;
  background-size: cover;
  background-repeat: repeat-y;
  /* height: min(100vw, 1000px);*/
  white-space: nowrap;
  position: relative;
}

.solu-bg-bottom {
  z-index: 2;
  background-image: url("../images/solution/solution_bg_bottom.webp");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  height: min(100vw, 500px);
  white-space: nowrap;
  position: relative;
}



.solu-list {
  text-align: center;
  padding: 4rem 0 6rem;
}

.marimo-info {
  color: #fff;
  font-weight: bold;
  font-size: clamp(18px, 2vw, 20px);
  text-align: center;
  padding: 10rem 0 1rem;
  margin: 0 auto;
}

.width-box-443 {
  max-width: 443px;
}

.marimo-btn {
  position: relative;
  display: inline-block;
}

.marimo-btn img {
  display: block;
}

.marimo-btn .hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.marimo-btn:hover .hover {
  opacity: 1;
}

.top-ttl h2 {
  color: #004c93;
  font-weight: bold;
  font-size: clamp(24px, 3vw, 43px);
  border-bottom: solid 1px #004c93;
  margin-bottom: 1rem;
}

.ttl-icon01 {
  text-indent: -1.7em;
  padding-left: 1.7em;
}

.ttl-icon01::before {
  content: "";
  display: inline-block;
  background-image: url("../images/service/icon-net.svg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 59px;
  height: 59px;
  position: relative;
  top: 8px;
  margin-right: 10px;
}

.page-ttl01 img {
  max-width: 593px;
  position: absolute;
  right: 0;
  bottom: 1%;
  z-index: -1;
}

.ttl-icon02::before {
  content: "";
  display: inline-block;
  background-image: url("../images/service/icon-sns.svg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 59px;
  height: 59px;
  position: relative;
  top: 8px;
  margin-right: 10px;
}

.page-ttl02 img {
  max-width: 806px;
  position: absolute;
  right: 0;
  bottom: 1%;
  z-index: -1;
}

.ttl-icon03 {
  text-indent: -1.7em;
  padding-left: 1.7em;
}


.ttl-icon03::before {
  content: "";
  display: inline-block;
  background-image: url("../images/service/icon-camera.svg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 59px;
  height: 59px;
  position: relative;
  top: 8px;
  margin-right: 10px;
}

.page-ttl03 img {
  max-width: 906px;
  position: absolute;
  right: 0;
  bottom: 1%;
  z-index: -1;
}

.ttl-icon04::before {
  content: "";
  display: inline-block;
  background-image: url("../images/service/icon-web.svg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 59px;
  height: 59px;
  position: relative;
  top: 8px;
  margin-right: 10px;
}

.page-ttl04 img {
  max-width: 641px;
  position: absolute;
  right: 0;
  bottom: 1%;
  z-index: -1;
}

.ttl-icon05::before {
  content: "";
  display: inline-block;
  background-image: url("../images/service/icon-support.svg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 59px;
  height: 59px;
  position: relative;
  top: 8px;
  margin-right: 10px;
}

.page-ttl05 img {
  max-width: 716px;
  position: absolute;
  right: 0;
  bottom: 1%;
  z-index: -1;
}

.page-sub-ttl {
  font-size: clamp(24px, 3vw, 28px);
  color: #004c93;
  font-weight: bold;
  margin-bottom: 2rem;
}

.se-box-ttl {
  color: #004c93;
  font-weight: bold;
  text-align: center;
  font-size: 21px;
  margin: 1rem auto;
}

.se-box-text {
  color: #004c93;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
  margin: 1rem auto;
}

.height148 {
  height: 148px;
}


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

.col_3 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.col_3>* {
  width: calc(33.33333% - 20px);
  margin-right: 20px;
  margin-bottom: 20px;
}

.col_3>*:nth-child(3n) {
  margin-right: auto;
}

/*.col_3 > * > *{
    height: 148px;
    position: relative;
    overflow: hidden
}*/

.service-bg01 {
  position: absolute;
  bottom: -70px;
  right: -440px;
  z-index: -1;
}

.service-bg02 {
  position: absolute;
  bottom: -200px;
  left: -920px;
  z-index: -1;
}

.service-bg03 {
  position: absolute;
  bottom: -287px;
  right: -850px;
  z-index: -1;
}

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

  .three-s-area {
    min-height: 800px;
    margin: 6rem auto;
  }

  /* 共通（上下画像） */
  .three-s-area::before,
  .three-s-area::after {
    height: 140px;
    /* 上下画像の高さを固定 */
    background-size: auto 140px;
    /* 高さ 277px に収まるよう縮尺 */
  }

  /* 上部画像 */
  .three-s-area::before {
    top: -140px;
  }

  /* 下部画像 */
  .three-s-area::after {
    bottom: -140px;
  }


  .three-s-list li {
    font-size: clamp(18px, 2vw, 20px);
    color: #fff;
    line-height: 1.5em;
    text-indent: -2em;
    padding-left: 2em;
    margin-bottom: 1rem;
  }

  .col_3>* {
    width: calc(50% - 20px);
  }

  .col_3>*:nth-child(3n) {
    margin-right: 12px;
  }

  .col_3>*:nth-child(2n) {
    margin-right: auto;
  }
}



.tbl-border-c tr {
  border-bottom: 1px solid var(--light-gray);
  line-height: 2em;
}

/*.tbl-border-c tr:first-of-type {
	border-top: 1px solid var(--light-gray);
}*/
.tbl-border-c th {
  vertical-align: text-top;
  font-size: 1.13em;
  text-align: left;
  color: #004c93;
  width: 20%;
}

.tbl-border-c td {
  font-size: 1.13em;
}

@media screen and (max-width: 768px) {
  .com-bg-top {
    height: min(100vw, 150px);
  }
}

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

  .tbl-border-c.table560 th {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .three-s-area {
    min-height: 630px;
  }

  .image-item:not(:first-child) {
    border-left: none;
    /* 左側に薄いグレーの線 */
  }

  .image-item {
    padding: 10px;
  }

  .marimo-info {
    padding: 1rem 0;
  }

  .width-box-443 {
    max-width: 220px;
  }

  .ttl-icon01::before, .ttl-icon02::before, .ttl-icon03::before, .ttl-icon04::before, .ttl-icon05::before {
    width: 30px;
    height: 30px;
    top: 5px;
  }



  .col_3>* {
    width: 100%;
    margin-right: auto;
  }

  .col_3>*:nth-child(3n) {
    margin-right: auto;
  }

}

/* =============================
   お知らせ一覧
   ============================= */
.l-newslist {
  padding-top: 100px;
  padding-bottom: 100px;
}

.newslist-container {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 20px;
}

.newslist-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 40px;
  border-left: 5px solid var(--main-color);
  padding-left: 15px;
}

.newslist-items {
  margin-bottom: 40px;
}

.newslist-item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #e6e6e6;
  flex-wrap: wrap;
}

.newslist-date {
  min-width: 90px;
  color: #777;
  font-size: 14px;
  white-space: nowrap;
}

.newslist-titleline {
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.newslist-link {
  color: inherit;
  text-decoration: none;
}

.newslist-link:hover {
  color: var(--main-color);
}

/* カテゴリバッジ */
.news-badge {
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: #eee;
  color: #333;
  white-space: nowrap;
}

.news-badge--news {
  background: var(--main-color);
  color: var(--white);
}

.news-badge--service {
  background: var(--green);
  color: var(--white);
}

.news-badge--work {
  background: #59b9eb;
  color: var(--white);
}

/* ページネーション */
.newslist-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.newslist-pagination .page-numbers {
  padding: 6px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
}

.newslist-pagination .current {
  background: var(--main-color);
  color: #fff;
  border-color: var(--main-color);
}


/* =============================
   投稿詳細
   ============================= */
.l-single {
  padding-top: 100px;
  padding-bottom: 100px;
}

.single-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.single-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.single-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 32px;
  line-height: 1.5;
}

.single-content {
  line-height: 1.8;
  margin-bottom: 60px;
  border-top: 1px solid #e6e6e6;
  padding-top: 32px;
}

/* 前後ナビ */
.post-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid #e6e6e6;
  color: var(--main-color);
}

.post-nav__prev {
  justify-self: start;
}

.post-nav__archive {
  justify-self: center;
}

.post-nav__next {
  justify-self: end;
}

.post-nav a {
  text-decoration: none;
  color: inherit;
  font-size: 14px;
}

.post-nav a:hover {
  color: var(--main-color);
}

/* ==========================
　　導入事例（一覧）
　　========================== */

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  margin: 3em 0 4em;
  font-size: 14px;
  color: var(--gray);
  justify-content: center;
  letter-spacing: -0.5px;
}

.category-tabs li {
  padding: 0 1em;
  margin: 0.5em 0;
}

.category-tabs li:last-child {
  border-right: none;
}

.category-tabs li.active a {
  color: var(--main-color);
  font-weight: bold;
  border-bottom: 3px solid var(--main-color);
}

.works-list {
  display: grid;
  /* 最小240px、最大は1fr（余白を埋める） */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  /* 1列になった時にカードが画面いっぱいに伸びるのを防ぎ、中央に寄せる */
  justify-items: center;
}

.work-card {
  width: 100%;
  max-width: 340px;
  /* ここがカードの最大幅。デザインに合わせて調整してください */
  position: relative;
  border: 2px solid var(--main-color);
  border-radius: 10px;
  background: var(--white);
  padding: 10px !important;
  margin-bottom: 2em;
}


.works-list a:hover {
  opacity: 0.8;
}

.works-archive .work-card::after {
  content: url(../images/works/triangle-blue.svg);
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 8px;
  height: 16px;
}

.date-top {
  margin: 5px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
  text-align: left;
  /* 左寄せ */
}

.card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 10px;
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 縦横比を保ちつつ、枠を埋めるようにトリミングされる [web:386] */
  display: block;
}

.card-badges {
  position: absolute;
  top: -25px;
  right: 2px;
  display: flex;
}

.badge {
  display: inline-block;
  width: 46px;
  height: 46px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: -10px;
}

.badge:first-child {
  margin-left: 0;
}

.badge:nth-child(1) {
  z-index: 5;
}

.badge:nth-child(2) {
  z-index: 4;
}

.badge:nth-child(3) {
  z-index: 3;
}

.badge:nth-child(4) {
  z-index: 2;
}

.badge:nth-child(5) {
  z-index: 1;
}

/* スラッグ: network (ネットワークインフラ) */
.badge-network {
  background-image: url('../images/works/icon-network.svg');
}

/* スラッグ: wifi (Wi-Fi) */
.badge-wifi {
  background-image: url('../images/works/icon-wifi.svg');
}

/* スラッグ: sns (SNS運用サポート) */
.badge-sns {
  background-image: url('../images/works/icon-sns.svg');
}

/* スラッグ: camera (監視カメラ・映像活用) */
.badge-camera {
  background-image: url('../images/works/icon-camera.svg');
}

/* スラッグ: pc (パソコン運用サポート) */
.badge-pc {
  background-image: url('../images/works/icon-pc.svg');
}

/* スラッグ: web (ホームページ制作・運用) */
.badge-web {
  background-image: url('../images/works/icon-web.svg');
}

.work-card .company-name {
  font-size: 18px;
  font-weight: bold;
  color: var(--main-color);
  border-bottom: 1px solid var(--main-color);
  padding-bottom: 5px;
  margin: 0;
}

.work-card .card-title {
  color: var(--gray);
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
  color: var(--main-color);
}

.detail-text-preview {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* 3行で切る */
  -webkit-box-orient: vertical;
  line-clamp: 3;
  /* 最新ブラウザ対応 */
  box-orient: vertical;
}


/* 共通：前後ボタンのベース */
.pagination .prev.page-numbers,
.pagination .next.page-numbers {
  width: 8px;
  /* アイコンの見た目に合わせて調整 */
  height: 14px;
  display: inline-block;
  text-indent: -9999px;
  /* テキストがあっても見えないように */
  overflow: hidden;
}

/* 次へ（右向き） */
.pagination .next.page-numbers {
  background-image: url('../images/works/triangle-blue.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 前へ（左向き：CSSで反転） */
.pagination .prev.page-numbers {
  background-image: url('../images/works/triangle-blue.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: scaleX(-1);
  /* 左右反転 */
}

.pagination.font-oswald {
  letter-spacing: 0.05em;
  /* 数字の間隔を最適化 */
}

.pagination .page-numbers {
  display: inline;
  padding: 0.5em 0.2em;
  margin: 0 0.2em;
  width: 1em;
  text-align: center;
  color: var(--gray);
  font-size: 18px;
}

.pagination .page-numbers.current {
  color: var(--main-color);
  font-weight: bold;
}

/* ==========================
　　導入事例（詳細）
　　========================== */
.single-works-page {
  padding: 100px 2em 0;
  color: var(--gray);
}

/* 親カードを基準にする */
.single-works-page .work-card {
  position: relative;
  overflow: visible;
  margin-bottom: 0;
}

/* タイトル画像 */
.single-works-page .work-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-100%);
  width: 80%;
  max-width: 350px;
  height: 77px;
  background: url(../images/works/page-ttl.svg) no-repeat right bottom /contain;
  z-index: -1;
}

.single-works-page .work-card {
  padding: 2em !important;
}

.single-works-page .work-card .flex {
  border-bottom: 1px solid rgba(0, 76, 147, 0.5);
}

.single-works-page .company-name {
  font-size: 24px;
  border-bottom: none;
}

/* ギャラリーの画像＋説明文 */
.work-details-gallery {
  margin: 2em 0;
}

.detail-group {
  margin-bottom: 3em;
  padding-bottom: 2em;
}

.detail-group:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.detail-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.detail-text {
  margin-top: 1.5em;
  line-height: 1.8;
  font-size: 1.1em;
}

/* カードのタイトルは少し大きく */
.single-works-page .card-title {
  font-size: 2em;
  margin-top: 1em;
}

.works-category-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 40px 0 60px;
  gap: 12px;
  /* アイコンとテキストの間隔を少し広めに */
  font-size: 14px;
  font-weight: 500;
  color: var(--main-color);
}

.category-nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.category-nav-item:hover {
  opacity: 0.7;
}

.category-nav-icon {
  width: 8px;
  height: 16px;
  flex-shrink: 0;
}


/* ナビゲーション */
.works-navigation {
  margin-top: 4em;
  text-align: center;
  font-size: 14px;
}

.works-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 60px 0;
  padding: 30px 0;
}

/* 前ボタン：常に左端 */
.works-navigation .nav-previous {
  order: 1;
}

/* 次ボタン：常に右端 */
.works-navigation .nav-next {
  order: 2;
  margin-left: auto;
  /* 右端に強制寄せ */
}

.works-navigation .nav-previous a,
.works-navigation .nav-next a {
  display: flex;
  align-items: center;
  gap: 12px;
  /* アイコンとタイトルの間隔 */
  font-weight: 500;
  color: var(--main-color);
  text-decoration: none;
}

.works-navigation .nav-previous a:hover,
.works-navigation .nav-next a:hover {
  opacity: 0.8;
}

/* 前へのアイコン（反転） */
.nav-prev-icon {
  width: 8px;
  height: 16px;
  transform: scaleX(-1) translate(5px, 3px);
  display: inline-block;
}

/* 次へのアイコン（通常） */
.nav-next-icon {
  width: 8px;
  height: 16px;
  display: inline-block;
  transform: translate(5px, 3px);
}

/* =========================================================
   Snow Monkey Forms 
   ========================================================= */

.smf-form {
  max-width: 840px;
  margin: 0 auto;
  color: var(--gray);
  padding: 20px;
}

/* 1行ごとのレイアウト (Flexboxで1行に横並び) */
.smf-form .smf-item {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin-bottom: 2em;
  border-top: none;
  padding: 0;
  gap: 1em;
}

form[data-screen="confirm"] .smf-form .smf-item,
form[data-screen="complete"] .smf-form .smf-item {
  border-bottom: 1px solid var(--light-gray);
  margin-bottom: 0;
  padding: 1em;
}

/* 左側のラベルエリア（ラベル名＋必須バッジ） */
.smf-form .smf-item__col--label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 9px 0;
  white-space: nowrap;
  flex: 0 0 29%;
}

form[data-screen="confirm"] .smf-form .smf-item__col--label,
form[data-screen="complete"] .smf-form .smf-item__col--label {
  padding: 0;
}


/* 右側の入力欄エリア */
.smf-form .smf-item__col--controls {
  flex-grow: 1;
  /* 残りのスペースをすべて入力欄にする */
  width: auto;
}

/* スマホ表示の時は縦並びにする */
@media screen and (max-width: 767px) {
  .smf-form .smf-item {
    flex-wrap: wrap;
    /* スマホでは折り返す */
    gap: 10px;
  }

  .smf-form .smf-item__col--label,
  .smf-form .smf-item__col--controls {
    width: 100%;
  }
}

/* =========================================================
   ラベルとバッジ（必須 / 任意）のデザイン
   ========================================================= */
/* デフォルトの「必須」表示（テーマ/SMF側）を消したい場合 */
.smf-form .smf-item__label__text::after {
  display: none !important;
}

/* まず全項目に「任意」を出す */
.smf-form .smf-item__col--label::after {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 4.5em;
  height: 2em;
  border-radius: 15px;
  color: #fff;
  content: "任意";
  background: var(--blue);
  flex: 0 0 4em;
}

/* 必須の項目だけ「必須」に上書き（v8+は data-validations に required が入る） */
.smf-form .smf-item:has([data-validations~="required"]) .smf-item__col--label::after {
  content: "必須";
  background: var(--main-color);
}

/* =========================================================
   確認画面（および完了画面）で必須・任意バッジを非表示にする
   ========================================================= */
form[data-screen="confirm"] .contact-text,
form[data-screen="complete"] .contact-text,
form[data-screen="confirm"] .smf-item__col--label::after,
form[data-screen="complete"] .smf-item__col--label::after {
  display: none !important;
}

/* =========================================================
   入力欄（テキスト・テキストエリア・セレクトボックス）
   ========================================================= */
.smf-form .smf-text-control__control,
.smf-form .smf-textarea-control__control,
.smf-form .smf-select-control__control {
  width: 100%;
  background-color: #ececec;
  border: 3px solid #a7a7a7;
  padding: 12px 15px;
}

/* セレクトボックスの下矢印を「塗りつぶしの横長逆三角（▼）」にする */
.smf-form .smf-select-control__control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  padding-right: 44px;
  /* 矢印と文字がかぶらないようにする余白 */
  /* ↓ここが塗りつぶしの逆三角形を描くSVGデータです↓ */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpolygon points='0,0 14,0 7,8' fill='%23666666'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  /* 矢印の位置（右から15px、上下中央） */
  background-size: 14px 8px;
  /* 矢印のサイズ（横14px、縦8px） */
}



/* =========================================================
   送信・確認ボタンのデザイン
   ========================================================= */
.snow-monkey-form .smf-action {
  text-align: center;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* 送信・確認ボタンの共通スタイル */
.snow-monkey-form .smf-action .smf-button-control__control {
  border: 3px solid var(--main-color);
  padding: 1em 2em;
  border-radius: 50px;
  display: inline-block;
  font-size: clamp(16px, 2vw, 18px);
  width: 16em;
  margin: 0 auto;
  color: var(--main-color);
  text-align: center;
  background: var(--white);
  transition: all 0.5s;
}

.snow-monkey-form .smf-action .smf-button-control__control:hover {
  background: var(--main-color) !important;
  color: var(--white);
  opacity: 1;
}

.snow-monkey-form .smf-action .smf-button-control+.smf-button-control {
  margin-left: 0;
}

/* --------------------------------------------------------
   ボタンブロック用の自作スタイル（標準CSSが読まれない場合の代替）
   -------------------------------------------------------- */
/* ボタンを横並びにするラッパー */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  /* 中央寄せ */
  margin-bottom: 30px;
}

/* リンク（ボタン本体）の基本スタイル */
.wp-block-button__link {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
}

/* === 同意するボタン（塗りつぶし・またはアウトライン） === */
.is-style-outline--1 .wp-block-button__link {
  background-color: #1a4487;
  /* メインカラー */
  color: #ffffff;
  border: 2px solid #1a4487;
}

.is-style-outline--1 .wp-block-button__link:hover {
  background-color: #ffffff;
  color: #1a4487;
}

/* === 同意しないボタン（白背景） === */
.is-style-outline--2 .wp-block-button__link {
  background-color: #ffffff;
  color: #666666;
  border: 2px solid #cccccc;
}

.is-style-outline--2 .wp-block-button__link:hover {
  background-color: #f5f5f5;
}