@charset "UTF-8";
html, body {
  overflow-x: hidden; /*水平スクロールの防止*/
  overflow-y: visible; /*水平スクロールの防止*/
}
html {
  font-size: 18px; /*ルート要素サイズ指定（remのベースの値）*/
}
body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  font-family: 'Noto Sans JP', sans-serif; /*サイトの基本となるフォント（ゴシックフォント）*/
  color: #362e2b;
  line-height: 2; /*行間調整*/
  font-weight: normal;
  font-style: normal;
  font-feature-settings: "palt"; /* プロポーショナル仮名 */
  text-align: center;
}
.mincho {
  font-family: 'Noto Serif JP', serif;
}
a, a:link, a:visited, a:hover, a:active {
  text-decoration: none; /*テキスト装飾をすべて取り除く*/
  color: #949494;
}
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.red {
  color: #e60012;
}
.blue {
  color: #0000ff;
}
.black {
  color: #000;
}
.normal {
  font-weight: normal !important;
}
.bgy {
  background-color: #fff100;
}
.ul {
  text-decoration: underline;
}
.p0 {
  padding: 0 !important;
}
.p5 {
  padding: 5% 0 !important;
}
.p8 {
  padding: 8% 0 !important;
}
.p10 {
  padding: 10% 0 !important;
}
.pt0 {
  padding-top: 0 !important;
}
.pt1 {
  padding-top: 1% !important;
}
.pt3 {
  padding-top: 3% !important;
}
.pt5 {
  padding-top: 5% !important;
}
.pt8 {
  padding-top: 8% !important;
}
.pt10 {
  padding-top: 10% !important;
}
.pb0 {
  padding-bottom: 0 !important;
}
.pb1 {
  padding-bottom: 1% !important;
}
.pb3 {
  padding-bottom: 3% !important;
}
.pb5 {
  padding-bottom: 5% !important;
}
.pb8 {
  padding-bottom: 8% !important;
}
.pb10 {
  padding-bottom: 10% !important;
}
.mt0 {
  margin-top: 0 !important;
}
.mt1 {
  margin-top: 1% !important;
}
.mt3 {
  margin-top: 3% !important;
}
.mt5 {
  margin-top: 5% !important;
}
.mt8 {
  margin-top: 8% !important;
}
.mt10 {
  margin-top: 10% !important;
}
.mb0 {
  margin-bottom: 0 !important;
}
.mb1 {
  margin-bottom: 1% !important;
}
.mb3 {
  margin-bottom: 3% !important;
}
.mb5 {
  margin-bottom: 5% !important;
}
.mb8 {
  margin-bottom: 8% !important;
}
.mb10 {
  margin-bottom: 10% !important;
}
/* font（親要素に対して大きくなる） */
.font07 {
  font-size: 0.7em;
  font-weight: inherit;
}
.font08 {
  font-size: 0.8em;
  font-weight: inherit;
}
.font09 {
  font-size: 0.9em;
  font-weight: inherit;
}
.font11 {
  font-size: 1.1em;
  font-weight: inherit;
}
.font12 {
  font-size: 1.2em;
  font-weight: inherit;
}
.font13 {
  font-size: 1.3em;
  font-weight: inherit;
}
.font14 {
  font-size: 1.4em;
  font-weight: inherit;
}
.font15 {
  font-size: 1.5em;
  font-weight: inherit;
}
.font16 {
  font-size: 1.6em;
  font-weight: inherit;
}
.font17 {
  font-size: 1.7em;
  font-weight: inherit;
}
.font18 {
  font-size: 1.8em;
  font-weight: inherit;
}
.font19 {
  font-size: 1.9em;
  font-weight: inherit;
}
.font20 {
  font-size: 2.0em;
  font-weight: inherit;
}
.bold {
  font-weight: 700;
}
/* text-align */
.txt_l {
  text-align: left;
}
.txt_c {
  text-align: center;
}
.txt_r {
  text-align: right;
}
.w_50 {
  width: 50%;
  margin: 0 auto;
}
.w_60 {
  width: 60%;
  margin: 0 auto;
}
.w_70 {
  width: 70%;
  margin: 0 auto;
}
.w_80 {
  width: 80%;
  margin: 0 auto;
}
.w_90 {
  width: 90%;
  margin: 0 auto;
}
/*-------------------------------------------
ここからサイトの個別のcss
-------------------------------------------*/
h1, h2, h3, h4, h5 {
  font-weight: bold;
}
h2 {
  font-size: 2.8rem;
  margin-bottom: 0;
}
h3 {
  font-size: 2.2rem;
  margin-bottom: 1em;
}
h4 {
  font-size: 1.8rem;
}
#home h4 {
  font-size: 1.3rem;
}
h5 {
  font-size: 1.4rem;
  margin-bottom: 1em;
}
h6 {
  font-family: 'Noto Serif JP', serif; /*明朝体*/
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}
p {
  margin-bottom: 2em;
  letter-spacing: 0.01em;
}
p:last-child {
  margin-bottom: 0;
}
.image {
  margin-bottom: 2rem;
  text-align: center;
}
.image:last-child {
  margin-bottom: 0;
}
.highlight {
  background: linear-gradient(transparent 70%, #FFFF00 0%);
}
.inner {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 0;
}
a.button {
  display: inline-block;
  padding: 0.5em 2em 0.7em;
  color: #fff;
  background: #171c60;
  box-shadow: 0 0.3em 0px rgba(54, 46, 23, 0.5), 0 -4px 5px -3px rgba(255, 255, 255, 0.9) inset;
  border-radius: 2px;
  transition: .3s;
  opacity: 0.8;
  border-radius: 100px;
}
a.button:hover {
  opacity: 1;
}
.yellow {
  font-size: 1.2em;
  font-weight: inherit;
  color: #ffff00;
}
.half-bg {
  display: inline-block;
  background: linear-gradient(to bottom, transparent 70%, yellow 70%);
  line-height: 1.2em;
}
/*-------------------------------------------
ヘッダー用
-------------------------------------------*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* 上に表示されるようにする */
  background: #fff;
  opacity: 0.9;
}
header .inner {
  text-align: left;
  max-width: 90%;
  padding: 1.5rem 0;
  display: flex;
  align-items: center; /* 垂直方向中央揃え */
  justify-content: space-between; /* ロゴとメニューを両端に配置 */
}
header img {
  max-width: 15rem;
}
/*-------------------------------------------
キャッチ用
-------------------------------------------*/
section#catch {
  padding-top: 124px;
}
section#catch .slider-wrap {
  position: relative;
  width: 100%;
  height: calc(100dvh - 124px);
  max-height: 900px;
  overflow: hidden;
  border-radius: 8px;
}
section#catch .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  /* テキスト中央寄せのためのFlexbox設定は維持 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* active クラスが付与されたスライドのスタイル */
section#catch .slide01.active {
  opacity: 1; /* active クラスが付与されたら表示 */
  background: url("../images/home/header-bg-01.png") no-repeat calc(50% + 400px) top / cover; /* 背景画像の設定 */
}
/* 左下の男性の画像 */
section#catch .slide01 .man-image {
  position: absolute;
  bottom: 0; /* 下端に合わせる */
  left: 11%; /* 左からの位置を調整 */
  height: 63%; /* ★画像の高さを調整。親のheightに対しての割合 */
  width: auto; /* 幅は自動調整 */
  object-fit: contain; /* 画像全体を表示 */
  z-index: 20; /* テキストや青い帯より手前に */
}
/* 中央の青い帯とテキストのコンテナ */
section#catch .slide01 .text-overlay-container {
  position: absolute;
  top: 8%; /* 垂直方向の中央を基準に */
  left: 0%; /* 水平方向の中央を基準に */
  transform: translate(0%, 0%); /* 自身の中心を基準点に移動 */
  width: 90%; /* 幅を調整 */
  max-width: 1200px; /* 最大幅 */
  height: auto; /* 高さを調整 */
  z-index: 15; /* 最前面に配置 */
  display: flex;
  align-items: center; /* 垂直中央揃え */
  justify-content: center; /* 水平中央揃え */
}
/* 青い帯の形状 */
section#catch .slide01 .blue-band-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #171c60; /* 指定された青色 */
  border-top-right-radius: 150px;
  z-index: 1; /* テキストより奥に */
  opacity: 0.8; /* 透過 */
}
/* 青い帯の中のテキスト */
section#catch .slide01 .text-content {
  position: relative; /* z-indexを適用するため */
  text-align: center;
  padding: 2rem 6vw 2rem 20vw; /* 内側の余白 */
  z-index: 100;
}
section#catch .slide02.active {
  opacity: 1; /* active クラスが付与されたら表示 */
  background: url("../images/home/header-bg-02.png") no-repeat calc(50% + 400px) top / cover; /* 背景画像の設定 */
}
/* 左下の女性の画像 */
section#catch .slide02 .man-image {
  position: absolute;
  bottom: 0; /* 下端に合わせる */
  left: 10%; /* 左からの位置を調整 */
  height: 65%; /* ★画像の高さを調整。親のheightに対しての割合 */
  width: auto; /* 幅は自動調整 */
  object-fit: contain; /* 画像全体を表示 */
  z-index: 10; /* テキストや青い帯より手前に */
}
/* 中央の青い帯とテキストのコンテナ */
section#catch .slide02 .text-overlay-container {
  position: absolute;
  bottom: 5%; /* 垂直方向の中央を基準に */
  right: 0%; /* 水平方向の中央を基準に */
  transform: translate(0%, -0%); /* 自身の中心を基準点に移動 */
  width: 90%; /* 幅を調整 */
  max-width: 1300px; /* 最大幅 */
  height: auto; /* 高さを調整 */
  z-index: 15; /* 最前面に配置 */
  display: flex;
  align-items: center; /* 垂直中央揃え */
  justify-content: center; /* 水平中央揃え */
}
/* 青い帯の形状 */
section#catch .slide02 .blue-band-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #171c60; /* 指定された青色 */
  border-top-left-radius: 120px;
  z-index: 1; /* テキストより奥に */
  opacity: 0.8; /* 透過 */
}
/* 青い帯の中のテキスト */
section#catch .slide02 .text-content {
  position: relative; /* z-indexを適用するため */
  text-align: center;
  padding: 2rem 18vw 2rem 8vw; /* 内側の余白 */
  z-index: 100;
}
section#catch .slide01.fade-out,
section#catch .slide02.fade-out {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}
/* 初期状態（非表示＋下にちょっとズラす） */
section#catch .slide01 .text-content,
section#catch .slide01 .blue-band-shape,
section#catch .slide01 .man-image {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

/* active になったときの表示状態 */
section#catch .slide01.active .text-content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}
section#catch .slide01.active .blue-band-shape {
  opacity: 0.8;
  transform: translateY(0);
  transition-delay: 0.2s;
}
section#catch .slide01.active .man-image {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}
section#catch .slide02 .text-content,
section#catch .slide02 .blue-band-shape,
section#catch .slide02 .man-image {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

section#catch .slide02.active .blue-band-shape {
  opacity: 0.8;
  transform: translateY(0);
  transition-delay: 0.2s;
}
section#catch .slide02.active .text-content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}
section#catch .slide02.active .man-image {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

/*-------------------------------------------
サブキャッチ用
-------------------------------------------*/
section#subcatch {
  background: #f4f1f0; /*背景ベージュ*/
}
/*-------------------------------------------
ニュース用
-------------------------------------------*/
section#news-section h3 {
  background: url("../images/home/news-title.png") no-repeat center bottom/contain;
  padding-top: 1em;
}
section#news-section ul {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}
section#news-section ul li {
  padding: 1rem;
  box-shadow: 0 0 15px #d7d5d5;
  border-top-left-radius: 100px;
}
section#news-section ul li img {
  border-top-left-radius: 90px;
  aspect-ratio: 1 / 1;
    object-fit: cover;
  margin-bottom: 1em;
}
section#news-section ul li p {
  text-align: left;
}
section#news-section ul li .day {
  font-size: 0.8rem;
  margin-bottom: 0;
}
section#news-section ul li h4 {
  margin-bottom: 0.5em;
  border-bottom: 1px solid #d7d5d5;
}
section#news-section ul li .description {
  margin-bottom: 1em;
}
section#news-section .wrap > a.button {
  background: #362e2b;
  font-size: 1.2rem;
  font-weight: bold;
}
/* PC（1025px以上）: 3列固定 */
@media screen and (min-width: 1025px) {
  section#news-section ul {
    flex-wrap: wrap; /* 折り返す */
    overflow-x: visible;
  }
  section#news-section ul li {
    width: calc((100% - 2rem) / 3); /* gap:1rem*2=2rem */
    flex: 0 0 auto;
  }
}

/* タブレット（768〜1024px）: 横スクロール1.8枚見せる */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  section#news-section ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  section#news-section ul li {
    width: 55%; /* 約1.8枚 */
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* スマホ（767px以下）: 横スクロール1.2枚見せる */
@media screen and (max-width: 767px) {
  section#news-section ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  section#news-section ul li {
    width: 80%; /* 約1.2枚 */
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/*-------------------------------------------
サービス用
-------------------------------------------*/
section#service-section {
  background: #f4f1f0; /*背景ベージュ*/
}
section#service-section h3 {
  background: url("../images/home/service-title.png") no-repeat center bottom/contain;
  padding-top: 1em;
}
section#service-section .wrap {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
section#service-section .wrap .service-group {
  flex: 1 1 47%;
  position: relative; /* 子要素（h4）の絶対位置指定の基準 */
  text-align: left; /* テキストのデフォルトを左揃えに */
}
section#service-section .service-group img {
  position: relative; /* h4のz-indexより下にするため */
  z-index: 1;
  padding-left: 1rem;
  border-top-left-radius: 150px;
  margin-bottom: 1rem;
}
section#service-section .service-group h4 {
  position: absolute; /* .service-group を基準に絶対位置指定 */
  top: 2rem; /* ★画像の下からの位置を調整してください★ (画像のheight-少し下) */
  left: 0;
  background-color: rgba(23, 28, 96, 0.8); /* 濃い青色の背景（スクリーンショットから推測） */
  color: #ffffff; /* テキストの色 */
  z-index: 2; /* 画像より手前に配置 */
  border-top-right-radius: 50px;
  padding: 0.5em 1em;
}
section#service-section .service-group:nth-child(2) h4, section#service-section .service-group:nth-child(4) h4 {
     bottom: 6rem;
        top: auto;
}

section#service-section .inner > a.button {
  background: #362e2b;
  font-size: 1.2rem;
  font-weight: bold;
}
/*-------------------------------------------
特徴用
-------------------------------------------*/
section#point-section h3 {
  background: url("../images/home/point-title.png") no-repeat center bottom/contain;
  padding-top: 1em;
}
section#point-section .wrap {}
section#point-section .point-group {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  background: linear-gradient(to right, #d7d5d5 70%, #171c60 70%) no-repeat bottom / 100% 2px;
}
section#point-section .point-group .number {
  display: flex;
  align-items: center;
  gap: 2rem;
}
section#point-section .point-group:first-child .number {
  background: url("../images/home/number-01.png") no-repeat right bottom / auto 40%;
}
section#point-section .point-group:nth-child(2) .number {
  background: url("../images/home/number-02.png") no-repeat right bottom / auto 40%;
}
section#point-section .point-group:nth-child(3) .number {
  background: url("../images/home/number-03.png") no-repeat right bottom / auto 40%;
}
section#point-section .point-group:nth-child(4) .number {
  background: url("../images/home/number-04.png") no-repeat right bottom / auto 40%;
}
section#point-section .point-group:last-child .number {
  background: url("../images/home/number-05.png") no-repeat right bottom / auto 40%;
}
section#point-section .point-group img {
  width: 30%; /* ★基準となる幅を30%に設定★ */
  border-top-left-radius: 100px;
}
section#point-section .point-group .txt-area {
  flex-grow: 1; /* ★利用可能な残りのスペースを全て占める★ */
  display: flex;
  flex-direction: column;
  text-align: left;
}
section#point-section .point-group .txt-area h4 {
  background-color: #171c60;
  border-top-right-radius: 50px;
  color: #fff;
  width: 23em;
  padding: 0.5em 1em;
  border-left: 10px solid #d7d5d5;
  margin-bottom: 1rem;
}
/*-------------------------------------------
コンタクト用
-------------------------------------------*/
#contact-section {
  width: 100%;
  height: auto;
}
.background-panel {
  top: 0;
  left: 0;
  height: 100%;
  background-color: #f4f1f0;
  border-top-right-radius: 150px;
  box-shadow: 18px 0 0 0 #8b8daf;
  z-index: 1;
}
/* 画面幅が1200px以上の場合のみ幅を調整 */
@media screen and (min-width: 1200px) {
  .background-panel {
    width: calc(50% + 600px); /* 中心より右に600px */
  }
}
/* 画面幅が1200px未満の場合は全幅にする */
@media screen and (max-width: 1199.98px) {
  .background-panel {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
}
section#contact-section .inner {
  margin-right: 50px;
}
section#contact-section h3 {
  background: url("../images/home/contact-title.png") no-repeat center bottom/contain;
  padding-top: 1em;
}
section#contact-section .wrap {
  display: flex;
  gap: 2rem;
  margin-bottom: 24vw;
}
section#contact-section .wrap .image {
  flex: 1 1 30%;
  margin-bottom: 0;
}
/*-------------------------------------------
共通コード用
-------------------------------------------*/
section#top {
  margin-top: 125px;
}
.section-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #fff; /* 任意のベース背景 */
}
/* 背景1: #f4f1f0 */
.background1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #f4f1f0;
  border-top-right-radius: 170px;
  z-index: 1;
}
@media screen and (min-width: 1200px) {
  .background1 {
    width: calc(50% + 700px);
  }
}
@media screen and (max-width: 1199.98px) {
  .background1 {
    width: 100%;
    border-radius: 0;
  }
}
/* 背景2: #171c60, 透過 80% */
.background2 {
  position: absolute;
  top: 2rem; /* 背景1より20px下に配置 */
  right: 0;
  height: 100%;
  background-color: rgba(23, 28, 96, 0.7); /* 透過指定 */
  border-top-left-radius: 170px;
  z-index: 2;
}
@media screen and (min-width: 1200px) {
  .background2 {
    width: calc(50% + 550px);
  }
}
@media screen and (max-width: 1199.98px) {
  .background2 {
    width: 100%;
    border-radius: 0;
  }
}
/* コンテンツ層 */
.content {
  position: relative;
  z-index: 3;
  padding: 4rem 0 2rem;
  color: #fff; /* 適宜変更 */
}
/*-------------------------------------------
サービスページ用
-------------------------------------------*/
#service #service-01 {
  box-shadow: inset 0 -30px 30px -5px rgba(166, 147, 124, 0.08);
}
#service .title-group {
  background: linear-gradient(to right, #d7d5d5 70%, #171c60 70%) no-repeat bottom / 100% 2px;
  margin-bottom: 2rem;
}
#service .title-group h3 {
  margin-bottom: 0.5rem;
}
#service .title-group p {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.2em 2em;
  background: #f4f1f0;
}
#service h4 {
  background: url("../images/service/speech-line.png") no-repeat bottom center/ 40% auto;
  padding-bottom: 1em;
  margin-bottom: 1em;
}
#service .offer {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
#service .offer .offer-group {
  flex: 1 1 48%;
}
#service .offer .offer-group img {
  border-top-left-radius: 50px;
  margin-bottom: 1rem;
}
#service .offer .offer-group h5 {
  margin-bottom: 1rem;
}
#service .offer .offer-group p {
  text-align: left;
}
#service .merit {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
#service .merit .merit-group {
  flex: 1 1 48%;
  background-color: #171c60; /*背景色：ダークブルー*/
  border-top-right-radius: 50px;
  padding: 8rem 1rem 1rem;
}
#service .merit .merit-group:first-child {
  background: url("../images/service/merit01-01.png")no-repeat center 6% / 90% auto, #171c60;
}
#service .merit .merit-group:nth-child(2) {
  background: url("../images/service/merit01-02.png")no-repeat center 8% / 90% auto, #171c60;
}
#service .merit .merit-group:nth-child(3) {
  background: url("../images/service/merit01-03.png")no-repeat center 3% / 90% auto, #171c60;
}
#service .merit .merit-group:last-child {
  background: url("../images/service/merit01-04.png")no-repeat center 0% / 90% auto, #171c60;
}
#service .merit .merit-group img {
  padding: 0 2rem 1rem;
}
#service .merit .merit-group p {
  text-align: left;
  color: #fff;
}
#service .achieve {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
}
#service .achieve-group {
  flex: 1 1 30%;
}
#service .achieve-group .text-group {
  padding: 1rem;
  background-color: #362e2b; /*背景色：ダークブラウン*/
  border-top-right-radius: 50px;
}
#service .achieve-group h5 {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 0;
}
#service .achieve-group p {
  text-align: left;
}
#service .support {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}
#service .support-group {
  flex: 1 1 48%;
  background: #f4f1f0; /*背景色：ベージュ*/
  padding: 2rem;
  border-top-right-radius: 50px;
}
#service .support-group h5 {
  color: #171c60;
  padding-bottom: 1rem;
  border-bottom: 5px dotted #171c60;
  margin-bottom: 1rem;
}
#service .merit2 {
  display: flex;
  gap: 2rem;
  margin-bottom: 3rem;
}
#service .merit2 .merit2-group {
  background: linear-gradient(to right, #171c60 80%, transparent 80%); /*背景色：ダークブルー*/
  border-top-left-radius: 50px;
  display: flex;
  align-items: center;
  gap: 2rem;
}
#service .merit2 .merit2-group .txt-area {
  width: 70%;
  margin: 3rem 1rem;
}
#service .merit2 .merit2-group h5 {
  padding-left: 33%;
}
#service .merit2 .merit2-group h5.merit01 {
  background: url("../images/service/merit02-01.png")no-repeat center left / contain;
}
#service .merit2 .merit2-group h5.merit02 {
  background: url("../images/service/merit02-02.png")no-repeat center left / contain;
}
#service .merit2 .merit2-group h5.merit03 {
  background: url("../images/service/merit02-03.png")no-repeat center left / contain;
}
#service .merit2 .merit2-group .txt-area p {
  color: #fff;
}
#service .merit2 .merit2-group .image {
  width: 45%;
}
#service .merit2 .merit2-group .image img {
  width: 100%;
}
#service #service-03 {
  background-color: #F4F1F0; /*背景色：ベージュ*/
}
#service #service-03 .title-group p {
  background: #171c60; /*背景色：ダークブルー*/
  color: #fff;
}
#service #service-03 .support-wrap {
  height: 100%;
  background-color: #fff;
  border-top-left-radius: 150px;
  box-shadow: -18px 0 0 0 #8b8daf;
  z-index: 1;
  padding: 2rem;
  margin-bottom: 3rem;
}
#service #service-03 h4 {
  background: none;
  padding-bottom: 0;
}
#service #service-03 .support {
  align-items: center;
  margin-bottom: 0;
}
#service #service-03 .support-group {
  height: 10rem;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
#service #service-03 .support-group h5 {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
  line-height: 1.5em;
}
#service #service-03 .support-group p {
  font-size: 0.8em;
}
#service #service-03 .merit {
  display: flex;
  gap: 1rem;
}
#service #service-03 .merit-group {
  padding: 8rem 1rem 5rem;
  flex: 1 1 30%;
}
#service #service-03 .merit-group.merit01 {
  background: url("../images/service/merit02-01.png")no-repeat 5% 5% / 50%, #171c60;
}
#service #service-03 .merit-group.merit02 {
  background: url("../images/service/merit02-02.png")no-repeat 5% 5% / 50%, #171c60;
}
#service #service-03 .merit-group.merit03 {
  background: url("../images/service/merit02-03.png")no-repeat 5% 5% / 50%, #171c60;
}
#service #service-03 .merit .merit-group img {
  padding: 0;
}
#service #fees h3, #service #flow h3 {
  background: #171c60;
  color: #fff;
  display: inline-block;
  min-width: 80%;
  padding: 1rem;
}
#service #flow ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
#service #flow ul li {
  flex: 1 1 calc(25% - 1.5rem);
  background: #f4f1f0; /*背景色：ベージュ*/
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  padding: 3rem 1rem;
  position: relative;
}
#service #flow ul li::before {
  position: absolute;
  top: 50%;
  left: calc(100% + 5px);
  transform: translateY(-50%);
  /*ここからCSSで三角形を生成するスタイル */
  content: ''; /* 空のcontentにします */
  width: 0; /* 幅を0にする */
  height: 0; /* 高さを0にする */
  border-top: 24px solid transparent; /* 上の辺。数値で三角形の高さを調整 */
  border-bottom: 24px solid transparent; /* 下の辺。数値で三角形の高さを調整 */
  border-left: 15px solid #171c60; /* 左の辺（これが三角形の本体になる）。数値で三角形の幅を調整 */
  /* border-top と border-bottom の数値を調整して縦の長さを変えます。
       例えば、現在の三角形の縦の長さが 8px * 2 = 16px だとしたら、
       これを3倍にするには、8px * 3 = 24px に変更します。*/
}
#service #flow ul li:last-child::before {
  content: none; /* 最後の要素の三角を消す */
}
/*-------------------------------------------
会社概要ページ用
-------------------------------------------*/
#company #mission {}
#company #mission h3 {
  background: url("../images/company/mission-title.png") no-repeat center bottom/contain;
  padding-top: 1.5em;
}
#company #mission .image-bg {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: none;
  background: url("../images/company/mission-bg.png") no-repeat center center / cover;
  margin-bottom: 2rem;
}
#company #mission p {
  font-size: 1.8em;
  font-weight: bold;
}
#company #mission .image {
  max-width: 1100px;
  padding: 5vw 0 10vw 0;
  text-align: left;
  margin: 0 auto;
}
#company #mission .image img {
  width: 70%;
}
#company #mission ul {
  width: 80%;
  flex-direction: column;
  display: flex;
  gap: 1rem;
  margin: 0 auto 2rem;
}
#company #mission ul li {
  background-color: #f4f1f0; /*背景色：ベージュ*/
  border-top-right-radius: 50px; /* カードの角を丸くする */
  border-bottom-left-radius: 10px;
  padding: 1rem 2rem;
}


#company #vision {
  background-color: #f4f1f0; /*背景色：ベージュ*/
}
#company #vision .inner {
  background: url("../images/company/vision-bg.png") no-repeat right 2rem / 70% auto;
}
#company #vision h3 {
  background: url("../images/company/vision-title.png") no-repeat left bottom / contain;
  padding-top: 1.5em;
  text-align: left;
}
#company #vision h4 {
  margin: 2em 5% 3em;
}
#company #vision p {
  font-size: 1.8em;
  font-weight: bold;
}
#company #vision p .bluebox {
  font-size: 1.5em;
  font-weight: inherit;
  background: #171c60; /*背景色：ダークブルー*/
  color: #fff;
  padding: 0 1rem;
  margin: 0 1rem;
}
#company #vision .sanpoyoshi {
  margin-bottom: 2rem;
}
#company #vision .merit {
  display: flex; /* 子要素（merit-group）を横並びにする */
  justify-content: center; /* カードを中央に配置 */
  gap: 1rem; /* カード間のスペース */
  flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
}
#company #vision .merit-group {
  background-color: #fff; /* カードの背景色 */
  border-top-right-radius: 50px; /* カードの角を丸くする */
  box-shadow: 0 0 15px #d7d5d5;
  overflow: hidden; /* 角丸と影のために */
  flex: 1; /* 利用可能なスペースを均等に分配 */
  display: flex; /* カード内の要素を縦に並べるためにFlexboxを使う */
  flex-direction: column; /* 縦方向に並べる */
  padding: 2rem 1rem;
}
#company #vision .merit-group img {
  width: 70%;
  margin: 0 auto;
}
#company #vision .merit-group h5 {
  background-color: #fff; /* 白い背景 */
  border-top-right-radius: 50px;
  padding: 0.5rem; /* 内側の余白 */
  border: 1px solid #ddd; /* 薄い枠線 */
  widows: 100%;
  font-size: 1.2em; /* タイトル文字サイズ */
}
#company #vision .merit-group ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* リスト項目間のスペース */
  align-items: center; /* 項目を中央揃え */
}
#company #vision .merit-group ul li {
  background-color: #362e2b; /*背景色：ダークブラウン*/
  color: #fff; /* 文字色 */
  padding: 0.5rem; /* 内側の余白 */
  width: 100%; /* 親要素の幅いっぱいに広げる */
  text-align: center; /* テキスト中央揃え */
  position: relative; /* 疑似要素の位置決め用 */
  box-sizing: border-box; /* paddingを含めて幅を計算 */
}
#company #vision .merit-group ul li.half {
  flex: 1 1 40%;
}
#company #vision .merit-group ul li::before {
  content: '';
  position: absolute;
  left: 1%; /* 左端に配置 */
  top: 50%; /* 垂直方向の中央 */
  transform: translateY(-50%); /* 垂直方向の中央に微調整 */
  width: 5px; /* 線の幅 */
  height: 80%; /* 線の高さ（liの高さに対して） */
  background-color: #ffff00; /* 黄色 */
}
#company #value h3 {
  background: url("../images/company/value-title.png") no-repeat center bottom / contain;
  padding-top: 1.5em;
}
#company #value .value-wrap {
  display: flex;
  gap: 2rem;
  flex-direction: column;
}
#company #value .value-wrap .value-group {
  display: flex;
  align-items: center;
  gap: 2rem;
}
#company #value .value-wrap .value-group img {
  width: 40%;
  border-top-left-radius: 50px;
}
#company #value .value-wrap .value-group .text-group {
  width: 100%;
  text-align: left;
}
#company #value .value-wrap .value-group h4 {
  background: #171c60; /*背景色：ダークブルー*/
  border-top-right-radius: 50px;
  color: #fff;
  position: relative; /* 疑似要素の位置決め用 */
  margin-bottom: 1em;
  padding-left: 1em;
  max-width: 80%;
}
#company #value .value-wrap .value-group h4::before {
  content: '';
  position: absolute;
  left: 1%; /* 左端に配置 */
  top: 50%; /* 垂直方向の中央 */
  transform: translateY(-50%); /* 垂直方向の中央に微調整 */
  width: 5px; /* 線の幅 */
  height: 80%; /* 線の高さ（liの高さに対して） */
  background-color: #ffff00; /* 黄色 */
}
#company #value .value-wrap .value-group p {
  font-size: 1.2em;
}
#company #contribution {
  background-color: #f4f1f0; /*背景色：ベージュ*/
}
#company #contribution .wrap {
  margin-left: -50vw;
  padding: 5rem 3rem;
  top: 0;
  right: 0;
  height: 100%;
  background-color: #fff;
  border-top-right-radius: 150px;
  z-index: 1;
}
#company #contribution .contribution-wrap {
  max-width: 1000px;
  margin-left: auto;
}
#company #contribution .contribution-wrap > p {
  font-size: 1.5em;
}
#company #contribution .contribution-wrap img {
  margin-bottom: 3rem;
}
#company #contribution .text-group {
  border-left: 5px solid #171c60;
  padding: 1rem;
  margin-bottom: 3rem;
  text-align: left;
}
#company #contribution .text-group:last-child {
  margin-bottom: 0;
}
#company #message {
  background: url("../images/company/message-bg.png") no-repeat center center / cover;
}
#company #message .wrap {
  background: url("../images/company/noma.png") no-repeat left bottom /auto 80%;
  margin-bottom: -3rem;
  padding-bottom: 3rem;
}
#company #message .wrap .message {
  background: rgba(255, 255, 255, 0.7);
  margin-left: 30%;
  padding: 3rem;
  box-shadow: 0 0 15px #d7d5d5; /*ぼかしシャドー*/
  border-radius: 50px;
  text-align: left;
}
#company #message .message .txt_r p {
  margin-bottom: 0.5em;
  margin-right: 5rem;
}
#company #message .message .txt_r img {
  width: 10rem;
}
/* 会社概要テーブルのスタイル */
.company-table {
  width: 100%; /* 親要素の幅いっぱいに広げる */
  border-collapse: collapse; /* セルのボーダーを結合する */
  table-layout: fixed; /* カラム幅を固定する（特にthの幅指定のために重要） */
}
/* テーブルの行 */
.company-table tr {
  border-bottom: 0.5px solid #362e2b; /* 行ごとの区切り線 */
}
.company-table tr:first-child {
  border-top: 0.5px solid #362e2b;
}
/* テーブルヘッダーセル（左側の項目名） */
.company-table th {
  width: 250px; /* 画像の見た目に合わせて幅を調整 */
  text-align: left; /* 左寄せ */
  padding: 1.5rem; /* 内側の余白 */
  background-color: #f4f1f0; /*背景色：ベージュ*/
  font-weight: 700; /* 太字 */
  vertical-align: top; /* コンテンツが複数行になっても上揃え */
  box-sizing: border-box; /* paddingを含めて幅を計算 */
}
/* テーブルデータセル（右側の内容） */
.company-table td {
  padding: 1.5rem; /* 内側の余白 */
  text-align: left; /* 左寄せ */
  box-sizing: border-box; /* paddingを含めて幅を計算 */
}
/*-------------------------------------------
コンタクトフォームページ
-------------------------------------------*/
#form {
  margin-bottom: 24vw;
}
.tab-labels {
  display: flex;
  gap: 1rem;
  margin: 0 auto 0.5rem;
  justify-content: flex-start;
}
.tab-btn {
  padding: 1rem 2rem;
  border: none;
  background-color: #f4f1f0; /*背景色：ベージュ*/
  font-size: 1rem;
  border-radius: 0 2rem 0 0;
  cursor: pointer;
  transition: background-color 0.3s;
}
.tab-btn.active {
  background-color: #171c60; /*背景色：ダークブルー*/
  color: #fff;
}
.tab-content {
  display: none;
  background-color: #f4f1f0; /*背景色：ベージュ*/
  border-top: 0.5rem solid #171c60;
  padding: 3rem;
}
.tab-content.active {
  display: block;
}
/* フォーム全体のスタイル */
/* 各フォームグループのスタイル */
.form-group {
  margin-bottom: 20px; /* グループ間の余白 */
  display: flex;
}
/* ラベルのスタイル */
.form-group label {
  display: block; /* ラベルをブロック要素にして、下に要素が回り込まないようにする */
  font-weight: bold; /* 文字を太くする */
  margin-top: 2px; /* ラベルと入力フィールドの間の余白 */
  width: 40%;
  text-align: left;
}
/* 必須マークのスタイル */
.formred {
  color: #e74c3c; /* 赤色で目立たせる */
  font-size: 0.8em; /* 少し小さめに */
  margin-left: 5px; /* ラベルからの余白 */
}
.wpcf7-list-item {
  display: block !important;
}
/* テキスト入力フィールド、メールアドレス、電話番号、URL入力フィールドのスタイル */
.formbox01, .formbox02 { /* Contact Form 7のショートコードで指定されたクラス */
  width: calc(100% - 20px); /* 左右のパディングを考慮した幅 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.5;
  box-sizing: border-box; /* パディングとボーダーを幅に含める */
  transition: border-color 0.3s ease; /* ホバー時のアニメーション */
}
/* テキストエリアのスタイル */
.formbox02 {
  min-height: 100px; /* テキストエリアの最小高さ */
  resize: vertical; /* 垂直方向のみリサイズ可能にする */
}
/* フォーカス時のスタイル */
.formbox01:focus, .formbox02:focus {
  border-color: #007bff; /* フォーカス時に青色のボーダー */
  outline: none; /* デフォルトのアウトラインを消す */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.25); /* 軽い影をつける */
}
/* プレースホルダーのスタイル */ ::placeholder {
  color: #999;
  opacity: 1; /* Firefoxでのデフォルトの不透明度を上書き */
}
:-ms-input-placeholder {
  color: #999;
}
::-ms-input-placeholder {
  color: #999;
}
/* チェックボックスのスタイル */
/* Contact Form 7のデフォルトスタイルを利用することが多いため、ここでは最小限に */
.form-group input[type="checkbox"] {
  margin-right: 8px; /* チェックボックスとラベルの間の余白 */
  transform: scale(1.2); /* チェックボックスを少し大きくする */
}
.form-group input[type="checkbox"] + label {
  display: inline-block; /* ラベルをインラインブロックにしてチェックボックスと横並びにする */
  font-weight: normal; /* 太字を解除 */
  margin-bottom: 0;
  cursor: pointer;
}
/* 個人情報保護などのスクロールボックス */
.scroll-box {
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 20px;
  max-height: 200px; /* 最大高さを設定し、超えたらスクロール */
  overflow-y: auto; /* 垂直方向にスクロール可能にする */
  background-color: #f9f9f9;
  border-radius: 4px;
  text-align: left;
}
.scroll-box h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.1em;
}
.scroll-box p.txt {
  font-size: 0.8em;
  line-height: 1.6;
  margin-bottom: 10px;
}
/* 送信ボタンのラッパーとテキスト */
.txt-wrapper {
  text-align: center; /* テキストを中央寄せ */
  margin-bottom: 20px;
}
.txt-wrapper .txt {
  font-size: 1.2em; /* 文字サイズを少し大きく */
  color: #333;
}
.txt-wrapper .f24 { /* もし特定のフォントサイズが必要なら */
  font-size: 24px;
}
.txt-wrapper .pb5 { /* もし特定のパディングが必要なら */
  padding-bottom: 5px;
}
.txt-wrapper .sp { /* スマートフォン表示時の改行（必要に応じてメディアクエリと併用） */
  display: none; /* デフォルトでは非表示 */
}
/* 送信ボタンのスタイル */
.btn-submit {
  text-align: center; /* ボタンを中央寄せ */
  margin-top: 30px;
}
.btn-submit input[type="submit"] { /* Contact Form 7のsubmitショートコード */
  background-color: rgba(23, 28, 96, 0.8); /*背景色：ダークブルー80％*/
  color: #fff;
  padding: 1rem 5rem;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  width: auto; /* 幅をコンテンツに合わせる */
  font-size: 1.2rem;
  border-bottom: 5px solid #171c60;
}
.btn-submit input[type="submit"]:hover {
  background-color: #171c60;
  border-bottom: none;
  margin-top: 5px;
}
.wpcf7-not-valid-tip {
  text-align: left;
  margin-left: 1rem;
  color: #e74c3c !important;
}
/* スマートフォン表示時の調整（必要に応じて） */
@media (max-width: 768px) {
  form {
    padding: 1rem 0;
  }
  .formbox01, .formbox02 {
    font-size: 15px;
  }
  .txt-wrapper .txt {
    font-size: 1em;
  }
  .txt-wrapper .sp {
    display: inline; /* スマートフォンで改行を表示 */
  }
  .btn-submit input[type="submit"] {
    padding: 10px 25px;
    font-size: 16px;
  }
}
.wpcf7-spinner {
  display: none !important;
}
/* テキストエリアが残りのスペースを埋めるようにする */
.form-group-inline .formbox02 {
  flex-grow: 1; /* 残りのスペースを埋めるように拡張 */
  width: auto; /* width: calc(100% - 20px); の設定を上書き */
}
.wpcf7-form-control-wrap {
  width: 70%
}
/* スマートフォン表示時の調整 */
@media (max-width: 768px) {
  .form-group-inline {
    flex-direction: column; /* スマートフォンでは縦並びに戻す */
    gap: 8px; /* 縦並びになったときの余白 */
  }
  .form-group-inline label {
    width: auto; /* 幅の固定を解除 */
  }
}
/*-------------------------------------------
ニュース　アーカイブ・シングルページ
-------------------------------------------*/
.news-navigation {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.news-navigation a {
      display: inline-block;
    padding: 0.5em 2em 0.7em;
    color: #fff;
    background: #171c60;
      box-shadow: 0 0.3em 0px rgba(54, 46, 23, 0.5), 0 -4px 5px -3px rgba(255, 255, 255, 0.9) inset;
    border-radius: 2px;
    transition: .3s;
    opacity: 0.8;
    border-radius: 100px;
}
#archive-news ul.news-list{
  display: flex;
  column-gap:  2rem;
      flex-wrap: wrap;
}
#archive-news ul.news-list li {
  width: 48%;
  margin-bottom: 2rem;
  padding: 1rem;
    box-shadow: 0 0 15px #d7d5d5;
    border-top-left-radius: 100px;
}
#archive-news ul.news-list li img {
  border-top-left-radius: 90px;
  aspect-ratio: 1 / 1;
  object-fit: cover; 
}
#single-news .news-thumbnail {
  max-width: 700px;
  margin: 0 auto 2rem;
}
#single-news p.news-date {
  margin-bottom: 1em;
}
#single-news .news-content p:last-child {
  margin-bottom: 2em;
}
/*-------------------------------------------
フッター用
-------------------------------------------*/
footer {
  text-align: center;
  background: linear-gradient(to bottom, transparent 24vw, #171c60 24vw);
  z-index: 10;
  color: #fff;
}
footer .bg {
  background: url("../images/home/footer-image.png") no-repeat center top / 100% auto;
  position: relative; /* ★これを追加してください★ */
  z-index: 20;
  margin-top: -24vw;
  padding-top: 30vw;
  padding-bottom: 2rem;
}
footer img {
  width: 300px;
    max-width: 50%;
    margin-bottom: 1rem;
}
/*-------------------------------------------
ハンバーガー用
-------------------------------------------*/
.header .hamburger {
  display: block; /* デフォルトで表示 */
  width: 30px;
  height: 22px;
  position: relative;
  cursor: pointer;
}
.header .hamburger span {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #362e2b; /* ハンバーガーメニューの色 */
  transition: all 0.3s ease;
}
.header .hamburger span:nth-child(1) {
  top: 0;
}
.header .hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.header .hamburger span:nth-child(3) {
  bottom: 0;
}
/* ハンバーガーメニューが開いた時のスタイル */
.header .hamburger.open span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}
.header .hamburger.open span:nth-child(2) {
  opacity: 0;
}
.header .hamburger.open span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}
.header .nav-list {
  position: fixed;
  top: 0;
  right: -70%; /* 初期位置を右端の外に */
  width: 70%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8); /* 透過された黒背景 */
  z-index: 99; /* ハンバーガーメニューより奥に */
  padding-top: 60px; /* ヘッダーの高さ分だけ下げる */
  transition: right 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* メニューを上から配置 */
  gap :2rem;
}
.header .nav-list.open {
  right: 0; /* スライドイン */
}

.header .nav-list li a {
  color: #362e2b;
}
/*-------------------------------------------
アニメーション配置
-------------------------------------------*/
/* 共通の初期スタイル */
.fade-in-up, .fade-in-left, .fade-in-scale, .fade-in-right, .fade-in-down, .fade-in-opacity {
  opacity: 0; /* 初期状態を透明に */
}
/* パターン1：下から上へのフェードイン */
.fade-in-up.show {
  animation: fadeInUp 1s ease-out forwards;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* パターン2：左から右へのフェードイン */
.fade-in-left.show {
  animation: fadeInLeft 1s ease-out forwards;
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* パターン3：スケールアップしながらフェードイン */
.fade-in-scale.show {
  animation: fadeInScale 1s ease-out forwards;
}
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* パターン4：右から左へのフェードイン */
.fade-in-right.show {
  animation: fadeInRight 1s ease-out forwards;
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(30px); /* 右に移動した状態から */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* 元の位置へ */
  }
}
/* パターン5：上から下へのフェードイン */
.fade-in-down.show {
  animation: fadeInDown 1s ease-out forwards;
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-30px); /* 上に移動した状態から */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* 元の位置へ */
  }
}
/* パターン6：透明度のみのフェードイン */
.fade-in-opacity.show {
  animation: fadeInOpacity 1s ease-out forwards;
}
@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*-------------------------------------------
レスポンシブ【パソコン用】
-------------------------------------------*/
@media screen and (min-width: 1025px) {
  .sp {
    display: none;
  }
  br.sp {
    display: none;
  }
  .header .hamburger {
    display: none; /* ハンバーガーメニューを非表示 */
  }
  .header nav {
    display: block; /* ナビゲーションを表示 */
  }
  .header .nav-list {
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    flex-direction: row;
    padding-top: 0;
    transition: none;
    align-items: center;
    gap:1rem;
  }
  .header .nav-list li a {
    font-size: 1em;
  }
  section#catch .slider-wrap {
    min-width: 700px;
  }
}
/*-------------------------------------------
レスポンシブ【タブレット用】
-------------------------------------------*/
@media print, screen and (min-width: 768px) and (max-width: 1024px) {
   html {
    font-size: 16px;
  }
  
  .sp {
    display: none;
  }
 
      .header .nav-list li a {
        color: #fff;
    }
  section#catch {
    padding-top: 114px;}
  section#top {
    margin-top: 114px;
}
  section#catch .slide01 .text-content {
  padding: 2rem 10vw 2rem 5vw; /* 内側の余白 */
  }
section#catch .slide02 .text-content {
  padding: 2rem 5vw 2rem 10vw; /* 内側の余白 */
  }
   section#catch .slide02 .man-image {
left: 2%;
    bottom: 8%;
    height: 62%;
  }
section#news-section ul li{
    border-top-left-radius: 60px;
  }
  section#news-section ul li img {
    border-top-left-radius: 40px;
  }section#service-section .wrap {
    
    gap: 1rem;}
  section#service-section .service-group img {border-top-left-radius: 100px;}
section#service-section .service-group h4 {
    font-size: 1.0rem;
  padding: 0.5em ;
   border-top-right-radius: 30px;
  }

  #service .offer {
    gap:1rem;
  }
  #service .merit {
    gap:1rem;
  }
  #archive-news ul.news-list {
    gap:1rem;
  }
  #company #contribution .wrap {
    margin-left: 0;}
  #company #message .wrap {
  background: url(../images/company/noma.png) no-repeat left bottom / 40% auto;
  margin-bottom: -3rem;
  padding-bottom: 3rem;
}
#company #message .wrap .message {
  margin-left: 0;
  margin-bottom: 36rem;
  padding: 3rem 2rem;
}
}
/*-------------------------------------------
レスポンシブ【スマホ用】
-------------------------------------------*/
@media print, screen and (max-width: 767px) {
  html {
    font-size: 14px;
  }
  .pc {
    display: none;
  }
  br.sp {
    display: block;
  }
  #home h4 {
    font-size: 1.08rem;
  }
  h2 {
    font-size: 2.0rem
  }
  h3 {
    font-size: 1.8rem;
  }
  h4 {
    font-size: 1.5rem;
  }
  .header .logo {
    width: 180px;
  }
     .header .nav-list li a {
        color: #fff;
    }
  header .inner {
    padding: 1.5rem 0;
  }
  section#catch .slider-wrap {
  height: calc(100svh - 86px);
  }
  section#catch {
    padding-top: 86px;
  }
  section#catch .slide01.active {background: url("../images/home/header-bg-01-sp.png") no-repeat left -15% top / cover; /* 背景画像の設定 */}
section#catch .slide02.active { background: url("../images/home/header-bg-02-sp.png") no-repeat left -15%  top / cover; /* 背景画像の設定 */}
  section#catch .slide01 .blue-band-shape {
    border-top-right-radius: 80px;
  }
  section#catch .slide02 .blue-band-shape {
    border-top-left-radius: 80px;
  }
  section#catch .slide01 .text-content, section#catch .slide02 .text-content {
    padding: 2rem 4rem; /* 内側の余白 */
  }
  section#catch .slide01 .text-overlay-container {
    top: 5%;
    width: 90%;
  }
  section#catch .slide01 .man-image {
    left: -8%;
    height: 62%;
  }
  section#catch .slide02 .man-image {
    left: -12%;
    bottom: 26%;
    height: 62%;
  }
  section#catch .slide02 .text-overlay-container {
    width: 95%;
  }
  #subcatch img {
    width: 80%;
  }
  section#news-section ul li{
    border-top-left-radius: 60px;
  }
  section#news-section ul li img {
    border-top-left-radius: 40px;
  }

  section#service-section .service-group {
    border-bottom: 1px solid #d7d5d5;
    padding-bottom: 1rem;
  }
  section#service-section .wrap {
    flex-direction: column;
  }
  section#service-section .service-group img {
    border-top-left-radius: 100px;
  }
  section#service-section .service-group h4 {
    border-top-right-radius: 30px;
    padding: 0.5em 1em 0.5em 0.5em;
  }
section#service-section .service-group:nth-child(2) h4
 {
   bottom: 8rem;}
  section#point-section .point-group .number {
    flex-direction: column;
  }
  section#point-section .point-group img {
    width: 100%;
    border-top-left-radius: 100px;
  }
  section#point-section .point-group .txt-area h4 {
    border-top-right-radius: 30px;
  }
  section#point-section .point-group:first-child .number {
    background: url("../images/home/number-01.png") no-repeat right bottom / auto 15%;
  }
  section#point-section .point-group:nth-child(2) .number {
    background: url("../images/home/number-02.png") no-repeat right bottom / auto 15%;
  }
  section#point-section .point-group:nth-child(3) .number {
    background: url("../images/home/number-03.png") no-repeat right bottom / auto 15%;
  }
  section#point-section .point-group:nth-child(4) .number {
    background: url("../images/home/number-04.png") no-repeat right bottom / auto 15%;
  }
  section#point-section .point-group:last-child .number {
    background: url("../images/home/number-05.png") no-repeat right bottom / auto 15%;
  }
  section#contact-section .inner {
    margin-right: auto;
  }
  section#contact-section .wrap {
    flex-wrap: wrap;
    justify-content: space-around;
  }
  section#contact-section .wrap .image {
    width: 46%;
    flex: none;
  }
  section#top {
    margin-top: 82px;
  }
  section#contact-section .wrap {
    gap: 1.5rem;}
  #service .offer .offer-group {
    border-bottom: 1px solid #d7d5d5;
    padding-bottom: 1rem;
  }
    #service .achieve {
    flex-direction: column;
          gap: 2rem;
  }
  #service #service-01 .achieve-group {
    border-bottom: 1px solid #d7d5d5;
    padding-bottom: 1rem;
  }
  #service #service-01 .achieve-group:last-child {
    border-bottom: none;
    padding-bottom:0;
  }
  #service #service-01 .achieve-group img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  #service .support {
    flex-direction: column;
  }
  #service .merit2 .merit2-group {
    background: linear-gradient(to bottom, #171c60 85%, transparent 85%);
    flex-direction: column;
  }
  #service .merit2 .merit2-group .image {
    width: 70%;
}
  #service .merit2 .merit2-group h5 {
    padding-left: 0;
    padding-top: 30px;
  }
  #service .merit2 .merit2-group .txt-area {
    width: 90%;
    margin: 1rem 1rem 0;
  }
  #service #service-03 .support-group {
    width: 100%;
  }
  #service #service-03 .support-wrap {
    border-top-left-radius: 75px;
    box-shadow: -10px 0 0 0 #8b8daf;
  }
  #service .merit {
    flex-direction: column;
  }
  #service .merit .merit-group img {
    width: 90%;
  }
  #service .merit2 .merit2-group h5 {
    padding-top: 7rem;
  }
  #service .merit2 .merit2-group h5.merit01 {
    background: url("../images/service/merit02-01.png")no-repeat 5% 5% / 38%;
  }
  #service .merit2 .merit2-group h5.merit02 {
    background: url("../images/service/merit02-02.png")no-repeat 5% 5% / 38%;
  }
  #service .merit2 .merit2-group h5.merit03 {
    background: url("../images/service/merit02-03.png")no-repeat 5% 5% / 38%;
  }
 #service #service-03 .merit-group {
  padding: 7.5rem 1rem 3rem;
}
#service #service-03 .merit-group.merit01 {
  background: url("../images/service/merit02-01.png")no-repeat 7% 7% / 38%, #171c60;
}
#service #service-03 .merit-group.merit02 {
  background: url("../images/service/merit02-02.png")no-repeat 7% 7% / 38%, #171c60;
}
#service #service-03 .merit-group.merit03 {
  background: url("../images/service/merit02-03.png")no-repeat 7% 7% / 38%, #171c60;
}
#service #service-03 .merit .merit-group img {
  padding: 0;
}
  #service #flow ul {
    flex-direction: column; /* リストアイテムを縦に並べる */
    align-items: center; /* 左右中央寄せ */
  }
  #service #flow ul li {
    flex: auto; /* 幅を100%にする */
    margin-bottom: 1.5rem; /* アイテム間の下方向の余白 */
    border-top-right-radius: 0; /* 元の角丸をリセット */
    border-bottom-right-radius: 50px; /* 元の角丸をリセット */
    border-bottom-left-radius: 50px; /* 新しい角丸（左下） */
    border-top-left-radius: 0; /* 新しい角丸（左上） */
    width: 100%;
  }
  #service #flow ul li::before {
    left: 50%; /* 三角形の水平位置を中央に */
    top: calc(100% + 5px); /* 三角形を要素の下に配置 */
    transform: translateX(-50%); /* 水平方向の中央揃え */
    border-top: 15px solid #171c60; /* 上の辺（これが三角形の本体になる） */
    border-right: 24px solid transparent; /* 右の辺 */
    border-left: 24px solid transparent; /* 左の辺 */
    border-bottom: 0; /* 下の辺をなくす */
  }
  #service #flow ul li:last-child {
    margin-bottom: 0; /* 最後の要素の下の余白をなくす */
  }
  #company #mission .image img {
    width: 85%;
  }
  #company #mission p {
    font-size: 1.4em;
  }
  #company #mission ul {
    width: 100%;}
  #company #vision .inner {
    background: url(../images/company/vision-bg.png) no-repeat right 9rem / 90% auto;
  }
  #company #vision h4 {
    margin: 6em 5% 2em;
  }
  #company #vision p {
    font-size: 1.4em;
  }
  #company #vision .merit {
    flex-direction: column;
  }
  #company #vision .merit-group {
    max-width: 80%;
    margin: auto;
  }
  #company #vision .merit-group img {
    width: 40%;
  }
  #company #value .value-wrap .value-group {
    flex-direction: column;
    border-bottom: 1px solid #d7d5d5;
    padding-bottom: 1rem;
  }
  #company #value .value-wrap .value-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  #company #value .value-wrap .value-group img {
    width: 100%;
  }
  #company #value .value-wrap .value-group p {
    font-size: 1em;
  }
#company #contribution .wrap {
  margin-left: 0;
  padding: 3rem 1rem;
  border-top-right-radius: 75px;
}
#company #message .wrap {
  background: url(../images/company/noma.png) no-repeat left bottom / 50% auto;
  margin-bottom: -3rem;
  padding-bottom: 3rem;
}
#company #message .wrap .message {
  margin-left: 0;
  margin-bottom: 26rem;
  padding: 3rem 2rem;
}
.company-table th, .company-table td {
  display: block;
  width: auto;
}
  .tab-btn {
    padding: 1rem 0.5rem;
  }
  .tab-content {
    padding: 3rem 1rem;
  }
  .form-group {
    flex-direction: column;
  }
  .form-group label {
    width: 100%;
  }
  .wpcf7-form-control-wrap {
    width: auto;
  }
  section#news-section ul li {
    padding: 1.5rem;}
  #archive-news ul.news-list li {
    width: 100%;}
}