/* 共通レイアウト */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* TOPページ */
/* ヘッダー */
header {
  background-color: #fff;
  padding: 10px 10px;
  position: relative;
}

/* ヘッダーロゴ */
.logo-header img {
  width: 200px;       /* 好きなサイズに調整 */
  height: auto;
  display: block;
}
/* .header-inner は flexbox で左右に分けているので左寄せはデフォルトでOK */


/* ハンバーガーメニューボタンを右上に固定 */
/* ハンバーガーメニュー全体 */
#hamburger {
  position: fixed;
  display: flex;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #999; /* 灰色背景 */
  border: none;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 0;
  z-index: 1100;
}

/* 白い3本線 */
#hamburger .bar {
  width: 30px;
  height: 3px;
  background-color: #fff;
  display: block;
  border-radius: 1px;
}

/* メニューは初期非表示 */
#full-menu.hidden {
  display: none;
}

/* 初期状態は非表示（スマホ向け） */
.pc-menu {
  display: none;
}


/* ハンバーガーメニュー全体 */
#full-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(226, 195, 209, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1000;
  transition: opacity 0.3s ease;
}

/* メニュー内全体コンテナ */
.menu-content {
  display: flex;
  flex-direction: column;
  align-items: center;        /* 中央寄せ */
  text-align: center;
  width: 100%;                /* 幅制限しない */
  max-width: 600px;           /* 必要なら上限を設定 */
}

/* ロゴ画像 */
#full-menu .logo {
  width: 300px;
  height: auto;
  margin-bottom: 20px;
}

/* メニューリストは縦並び */
.hamburger-menu-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.hamburger-menu-list li a {
  font-family:  "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  color: white;                         /* テキスト色を白に固定 */
  font-size: 20px;
  text-decoration: none;               /* 下線消す */
  font-weight: normal;
  transition: opacity 0.2s ease;
}

/* リンク既読後も色を変えない */
.hamburger-menu-list li a:visited {
  color: white;                         /* 紫にならないように */
}

/* ホバー時のスタイル */
.hamburger-menu-list li a:hover {
  opacity: 0.7;                         /* 透明度だけでもOKですが */
  text-decoration: none;               /* ホバー時も下線出さない */
  color: #f0f0f0;                       /* 白より少し明るくしてもいい */
}

/* SNSアイコン横並び */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.social-icons a {
  display: inline-block;
}
.social-icons img {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.3));
  transition: opacity 0.2s ease;
}
.social-icons a:hover img {
  opacity: 0.7;
}



/* TOP画像＋コピー */
/* 画面高さ600px固定 */
.header-area {
  height: 600px;              /* 高さ600px固定 */
  display: flex;
  justify-content: center;    /* 横方向は中央寄せ */
  align-items: center;        /* 縦方向は中央揃え */
  background-color: #fff;
  padding: 0 20px;
  box-sizing: border-box;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px; /* レイアウト調整用 */
  margin: 0 auto;
  padding: 10px 20px;            /* 縦中央揃え */
}


/* ハンバーガーメニューをスマホで固定表示 */
@media (max-width: 768px) {
  #hamburger {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1100; /* 他要素より上に */
  }
}

/* ヘッダーレスポンシブ対応 */
@media screen and (min-width: 1110px) {
  header {
  padding: 25px 20px;
  }
  
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 1200;
    background-color: #fff; /* 必要に応じて背景色追加 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 軽い影で浮かせる */
  }

  .header-inner {
    max-width: 1200px; /* レイアウト調整用 */
    margin: 0 auto;
    height: 100%;
  }

  .pc-menu {
    display: block !important; /* 確実に表示させるためにimportant */
    position: static !important; /* positionが原因の可能性排除 */
    opacity: 1 !important;       /* 透明化している可能性排除 */
    visibility: visible !important; /* 非表示設定排除 */
    z-index: 1300 !important;    /* ハンバーガーメニューより前面に */
  }

  .pc-menu-list {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

  .pc-menu .pc-menu-list li a {
    display: flex;
    color: #6F6F6F;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: opacity 0.2s ease;
  }

  .pc-menu .pc-menu-list li a:hover {
    opacity: 0.7;
  }

  /* PC以上はメニューを常に表示、ハンバーガー非表示 */
   #hamburger {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    margin: 0;
    display: none;
}

/* ロゴ */
.logo img {
  width: 40px;
  height: auto;
  display: block;
  top: 30px;
}
}

/* TOPページ - KV部分（スマホ表示） */
/* 画像とコピーを横並びにする */
/* TOPセクション全体 */
.top-area {
  height: 600px;  /* 元々指定していた高さ */
  display: flex;
  padding:3px;
  background-color: #fff;
  box-sizing: border-box;
}

/* === 共通 === */
.main-content {
  display: flex;
  flex-direction: column; /* スマホは縦並び */
  align-items: center;
  justify-content: center;
  gap: 3px;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}

.main-logo {
  display: none; /* スマホではロゴ非表示 */
}

.illustration {
  width: 200px;
}

.copy {
  font-family: "ヒラギノ明朝 ProN", serif;
  font-size: 18px;
  color: #333;
  line-height: 1.6;
  text-align: center;
  white-space: pre-line;
  padding: 0 10px;
}

/* === タブレットサイズの時もロゴ表示 === */
@media screen and (min-width: 830px) {
  .main-content {
    flex-direction: row; /* 横並び */
  }
  .main-logo {
    display: flex; /* タブレットサイズ時もロゴ表示 */
  }

  .logo-img-main {
    width: 200px; /* ロゴサイズアップ */
  }

.illustration {
    width: 300px; /* イラストサイズアップ */
    flex: 1;
  }

  .copy {
    font-size: 20px; /* コピーサイズアップ */
    text-align: left;
  }
}

/* === PCサイズのみ === */
@media screen and (min-width: 1110px) {
  .main-content {
    flex-direction: row; /* 横並び */
    max-width: 1100px;
    padding-top: 200px;
  }

  .main-logo {
    display: flex; /* PCではロゴ表示 */
  }

  .logo-img-main {
    width: 300px; /* ロゴサイズアップ */
  }

  .illustration {
    width: 400px; /* イラストサイズアップ */
    flex: 1;
  }

  .copy {
    font-size: 25px; /* コピーサイズアップ */
    text-align: left;
    flex: 1;
  }
}


/* 私たちについて＋企業理念セクション */
/* スマホ時 */
  .about-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 684px; /* スマホ用の高さ */
    background-image: url('images/background_phone.png');
  }

@media screen and (min-width: 768px) {
.about-section {
  height: 1037px; /* PC用の高さ */
  background-image: url('images/background_pc.png');
}
}

/* about-content を上下左右中央に配置 */
.about-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;  /* 横幅は調整可能 */
  max-width: 1000px; /* 最大幅を制限する場合 */
  color: white; /* 背景に合わせて調整 */
  text-align: center;
  margin-top: 30px;
  padding: auto;
  box-sizing: border-box;
  z-index: 2; /* 背景より前面に表示 */
}


/* 必要に応じてテキストサイズや余白も調整 */
.about-title-en {
  font-size: 30px;
  font-family: "Telugu MN", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: bold;
  color: #BC84A0;
  margin-bottom: 3px;
}

.about-title-ja {
  font-size: 11px;
  font-family: "Telugu MN", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: bold;
  color: #BC84A0;
  margin-bottom: 20px;
}

.about-us-text {
  font-size: 15px;
  line-height: 2;
}

.philosophy-top-text {
  font-family:"ヒラギノ明朝 ProN", serif;
  font-size: 14px;
  line-height: 2;
  margin-bottom: 25px;
}

@media screen and (min-width: 768px) {
  .about-content {
  max-width: 1500px; /* 最大幅を制限する場合 */
  width: 100%;  /* 横幅は調整可能 */
  padding: 0;
  }

/* 英語タイトル */
.about-title-en {
  font-size: 45px;
  letter-spacing: 0.05em;
  font-weight: bold;
}

/* 日本語サブタイトル */
.about-title-ja {
  font-size: 20px;
  margin-bottom: 30px;
}

.about-us-text,
.philosophy-top-text {
  display: block;
  font-size: 20px;
  color: #6E6E6E;
  line-height: 2;
  font-family: "Kokonor", serif;
  margin-bottom: 30px;
}
}

/* リードモアボタン */
.read-more {
  display: inline-block;
  background-color: transparent;
  color: #6F6F6F;
  font-size: 14px;
  text-decoration: none;
  padding: 7px 35px; /* 矢印分の右余白多め */
  border-top: 1px solid #6F6F6F;
  border-bottom: 1px solid #6F6F6F;
  border-left: 1px solid #6F6F6F;
  border-right: 1px solid #6F6F6F;
  font-weight: normal;
  transition: background 0.3s ease;
  cursor: pointer;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.read-more:hover {
  color: #fff;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  background-color: #BC84A0;
  opacity: 0.5;
}

@media screen and (min-width: 768px) {
  .read-more { 
  font-size: 20px;         /* ← テキストサイズを倍に（元:13px） */
  padding: 10px 40px;      /* ← 上下10px / 左右60px に変更（元:5px 30px） */
  gap: 12px;               /* ← アイコンとテキストの間隔も広げる（元:6px） */
  }
  }


/* ブロックの上下スペース */
.about-block,
.philosophy-block {
  margin-bottom: 60px;
}

@media screen and (min-width: 768px) {
/* ブロック間の隙間調整用 */
.spacer {
  height: 100px;
}
}


/* TOP-事業内容説明 */
.business-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px; /* ← gap を 12px に変更 */
  width: max-content; /* コンテンツに合わせて幅を調整 */
  margin: 0 auto; /* 中央寄せ */
}

/* 必要に応じてテキストサイズや余白も調整 */
.business-title-en {
  font-family:"Telugu MN", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 30px;
  color: #BC84A0;
  margin-bottom: 3px;
  text-align: center;
}

.business-title-ja {
  font-family:"Telugu MN", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: #BC84A0;
  margin-bottom: 11px;
  text-align: center;
}

.business-item {
  width: 100px;
}

.item-frame {
  position: relative;
  height: 120px;
}

.frame-image {
  width: 100%;
  height: 100%;
  display: block;
}

.item-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.inner-image {
  width: 40px; /* 全体が小さくなったので縮小 */
  height: auto;
  margin-bottom: 4px;
}

.item-content p {
  font-family: Noto Sans Oriya;
  font-size: 10px; /* ← サイズを10pxに変更 */
  color: #BC84A0;
  font-weight: 500;
  margin: 0;
  white-space: nowrap; /* ← 改行させない！ */
  overflow: hidden;     /* はみ出したら非表示（必要なら） */
  text-overflow: ellipsis; /* はみ出しに省略記号をつけたい場合 */
}

.read-more-end {
  margin-top: 50px;
  display: inline-block;
  background-color: transparent;
  color: #BC84A0;
  font-size: 14px;
  text-decoration: none;
  padding: 7px 35px; /* 矢印分の右余白多め */
  border-top: 1px solid #BC84A0;
  border-bottom: 1px solid #BC84A0;
  border-left: 1px solid #BC84A0;
  border-right: 1px solid #BC84A0;
  font-weight: normal;
  transition: background 0.3s ease;
  cursor: pointer;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 90px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button-wrapper {
  text-align: center;
}

.read-more-end:hover {
  color: #fff;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  background-color: #BC84A0;
  opacity: 0.5;
}

/* ブロック間の隙間調整用 */
.spacer-top {
  height: 100px;
}

@media screen and (min-width: 768px) {
/* 英語タイトル */
.business-title-en {
  font-size: 45px;
  letter-spacing: 0.05em;
  font-weight: bold;
}

/* 日本語サブタイトル */
.business-title-ja {
  font-size: 20px;
  margin-bottom: 10px;
}

.business-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.business-item {
  width: 200px;
}

.item-frame {
  position: relative;
  width: 230px;
  height: 200px;
}

.frame-image {
  width: 100%;
  height: 100%;
  display: block;
}


.inner-image {
  width: 70px; /* 全体が小さくなったので縮小 */
}

.item-content p {
  font-size: 12px; /* ← サイズを10pxに変更 */
}

.read-more-end { 
  font-size: 20px;         /* ← テキストサイズを倍に（元:13px） */
  padding: 10px 40px;      /* ← 上下10px / 左右60px に変更（元:5px 30px） */
  gap: 12px;             /* ← アイコンとテキストの間隔も広げる（元:6px） */
  margin-bottom: 30px;
  margin-top: 80px;
  }

.spacer-1{
  height: 30px;
}
}



/* フッター */
.footer {
  background-color: #E2C3D1;
  padding: 20px 30px;
  font-family: sans-serif;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 40px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 20px;
}

.footer-left {
  flex: 1;
  min-width: 100px;
  color: #fff;
  text-align: left;
}

.company-name {
  font-size: 15px;
  font-weight: normal;

}

.company-info-adress {
  font-size: 10px;
  line-height: 1.6;
  white-space: nowrap;
  padding-top: 10px;
}

.footer-right {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sns-icon {
  width: 24px;
  height: 24px;
  align-items: left;
}

.footer-bottom {
  text-align: right;
  font-size: 8px;
  color: #fff;
  margin-top: 0;
  text-align: right;
}

/* タブレット以上の画面向け */
@media screen and (min-width: 768px) {
  .footer {
    padding: 50px 30px;
    gap: 12px;
    margin-top: 40px;
  }

  .company-name {
    font-size: 30px;
    font-weight: normal;
  }

 .company-info-adress {
    padding-top: 20px;
    font-size: 15px;
    line-height: 1.8;
    white-space: nowrap;
  }

  .sns-icon {
    width: 30px;
    height: 30px;
  }

  .footer-bottom {
    font-size: 12px;
  }
}



/* 会社概要ページ */
.Contact-Title {
  display: flex;
  flex-direction: column;       /* ← 縦に並べる */
  align-items: center;          /* ← 子要素を中央揃え（横方向） */
  width: 100%;
  margin-top: 100px;
  padding: 0 20px;
  box-sizing: border-box;
}

.title-en {
  font-family: "Telugu MN", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: #BC84A0;
  font-size: 25px;
  letter-spacing: 0.05em;
  font-weight: bold;
  padding-top: 40px;
}
.title-ja {
  font-family: "Telugu MN", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: #BC84A0;
  font-size: 15px;
  letter-spacing: 0.05em;
  font-weight: bold;
  padding-top: 0px;
}

.company-info {
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.company-info-row {
  display: flex;
  align-items: flex-start;
  padding: 10px;
}

.Profile-title {
  font-size: 10pt;
  width: 90px;
  text-align: left;
  color: #6F6F6F;
}

.separator {
  width: 12px;
  text-align: center;
  color: #999;
  margin-top: -2px;
}

.Profile {
  font-size: 12px;
  flex: 1;
  text-align: left;
  color: #6F6F6F;
  padding-left:  20px;
}

.sp-only {
  display: inline;
}

@media screen and (min-width: 887px) {
  .Profile-title {
    font-size: 20px;
    font-weight: normal;
    text-align: left;
    margin-right: 40px;
    width: 100px;
  }

  .Profile {
    font-size: 20px;
    font-weight: normal;
    text-align: left;
    margin-left: 40px;
  }

  .sp-only {
  display: none;
}

  .title-en {
  font-size: 30px;
  letter-spacing: 0.05em;
  font-weight: bold;
  padding-top: 180px;
}
.title-ja {
  font-size: 17px;
  letter-spacing: 0.05em;
  font-weight: bold;
}

.company-info {
  max-width: 1000px;
  padding: 40px 40px;
}
.separator {
  margin-top: 4px;
}
}


/* 私たちの想いページ */
/* セクション共通 */
section.mission,
section.vision,
section.values {
  margin-bottom: 60px;
}

section h3 {
  text-align: center;
  font-size: 15px;
  padding-left: 12px;
  margin-bottom: 16px;
  color: #BC84A0;
}

section p {
  font-family:"ヒラギノ明朝 ProN", serif;
  line-height: 2; /* 行の高さを2倍にする（数字を大きくすると行間が広くなる） */
  text-align: center;
  font-size: 12px;
  padding-left: 12px;
  margin-bottom: 16px;
  color: #6E6E6E;
}

.philosophy-text {
  font-size: 20px;
  font-weight: 400;
  color: #555;
  line-height: 1.8;
  margin-top: 100px;
  text-align: center;
  font-family: "ヒラギノ明朝 ProN", serif;
  letter-spacing: 0.1em;
  margin-bottom: 100px;
}

.small-char {
  font-size: 16px; /* 好きな小さめのサイズに調整してください */
}


/* VALUESリスト */
.values-list {
  width: fit-content;       /* 中身に合わせる幅。必要に応じて固定幅でもOK */
  margin-left: auto;
  margin-right: auto;       /* → 左右の余白が自動＝中央寄せ */
  list-style: none;
}

.value-key {
  font-family: "ヒラギノ明朝 ProN", serif;
  font-size: 10px;
  font-weight: normal;
  display: inline-block;
  width: 130px; /* インデントを揃えるために固定幅にしてもOK */
  color: #6E6E6E;
  margin-right: 1px; /* ハイフンとの間を縮める */
  padding-left: 20px;
  text-align: left;
}

.value-desc {
  font-family: "ヒラギノ明朝 ProN", serif;
  font-size: 10px;
  color: #666;
  text-align: left;
}

.value-text {
  font-family: "ヒラギノ明朝 ProN", serif;
  font-size: 10px;
  color: #666;
  text-align: left;
  padding: 0 0 0 5px;

}


/* レスポンシブ対応 */
@media screen and (min-width: 768px) {
  .philosophy-text {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.8;
  margin-top: 150px;
  letter-spacing: 0.1em;
  margin-bottom: 150px;
  }

  .small-char {
  font-size: 26px;
}

  section h3 {
  font-size: 20px;
  padding-left: 12px;
  margin-bottom: 20px;
}

  .value-key {
    font-size: 16px;
    width: 180px;
  }

  .value-desc {
    font-size: 15px;
  }

  .mission-text,
  .vision-text,
  .value-text,
  .value-key {
  font-size: 20px;
  line-height: 2;
}

.value-key {
  width: 200px; 
}
}


/* 事業内容ページ */
.business-text {
  font-family: "Kokonor", serif;
  font-size: 12px;
  text-align: center;
  margin-top: 80px;
  margin-bottom: 80px;
  line-height: 2;
}


.content-box {
  border: 1px solid #ccc;
  background-color: #fff;
  max-width: 300px;
  max-height: 300px;
  margin: 20px auto;
  padding: 10px;
  box-sizing: border-box;
}

.box-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto;
}

.box-left {
  flex: 0 0 25%;
  text-align: center;
}

.box-number {
  font-size: 15px;
  font-weight: bold;
  -webkit-text-stroke: 1px #333; /* 線の色 */
  color: transparent; /* 中を透明にして線だけ見せる */
  padding: 4px 12px;
  display: inline-block;
  background-color: transparent;
  margin-bottom: 8px;
  position: absolute;
  transform: translate(-50%, -50%);
}

.box-title {
  color: #6E6E6E;
  margin-top: 10px;
  font-family: ヒラギノ角ゴ ProN W3;
  font-size: 15px;
  margin-bottom: 8px;
}

.box-line {
  width: 90%;
  height: 1px;
  background-color: #aaa;
  margin: 5px 0;
}

.box-list {
  color: #6E6E6E;
  font-size: 10px;
  list-style: disc inside;
  margin-top: 10px;
  max-width: 100%;
  text-align: left;
}

.box-right {
  text-align: center;
}

.read-more-agency {
  display: inline-block;
  background-color: transparent;
  color: #6F6F6F;
  font-size: 13px;
  text-decoration: none;
  padding: 5px 30px; /* 矢印分の右余白多め */
  border-top: 1px solid #6F6F6F;
  border-bottom: 1px solid #6F6F6F;
  border-left: 1px solid #6F6F6F;
  border-right: 1px solid #6F6F6F;
  font-weight: normal;
  transition: background 0.3s ease;
  cursor: pointer;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: center;
  margin-top: 20px;
}

.button-wrapper {
  text-align: center;
}

.read-more-agency:hover {
  color: #fff;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  background-color: #BC84A0;
  opacity: 0.5;
}

@media screen and (min-width: 768px) {
  .business-text {
  font-size: 15px;
  text-align: center;
  margin-top: 80px;
  margin-bottom: 80px;
  line-height: 2;
}


  
.content-box {
  border: 1px solid #ccc;
  background-color: #fff;
  max-width: 800px;
  max-height: 500px;
  margin: 20px auto;
  padding: 10px;
  box-sizing: border-box;
}

  .box-inner {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
    padding: 30px;
    position: relative;
  }

  .box-left {
    flex: 0 0 25%;
    text-align: center;
  }

  .box-line {
    width: 1px;
    height: 200px;
    background-color: #aaa;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    left: -10px; /* ←ココで左に寄せる */
  }

  .box-list {
    font-size: 15px;
    width: 100%;
  }

  .box-list li {
  line-height: 2; /* 行間調整ここ！ */
}

.read-more-agency {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: center;
  margin-top: 20px;
}

.button-wrapper {
  text-align: center;
}
}


/* 代行業務一覧ページ */
.sabtitle-ja-agency{
  padding-top: 50px;
  font-size: 13px;
}

.agency-wrapper {
  display: flex;
  flex-direction: column;
  padding: 20px;
  flex-direction: column;
  gap: 0; /* ← ここでリスト同士の間を詰める */
}

.agency-list {
  list-style: disc inside;  /* ← 黒丸を表示 */
  padding-left: 1em;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 11px;
  color: #555;
}

.agency-list-1 {
  margin-bottom: 0; /* 下のリストとの間をゼロに */
}

  .agency-list-2 {
  margin-top: 0; /* 上のリストとの間をゼロに */
}

/* PC：横並び */
@media screen and (min-width: 768px) {
  .agency-wrapper {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 800px;
    margin: 0 auto;
  }

  .agency-list {
    width: calc(50% - 20px);
    font-size: 15px;
  }
}





/* 問い合わせページ */
.Form {
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}
@media screen and (max-width: 480px) {
  .Form {
    margin-top: 40px;
  }
}
.Form-Item {
  border-top: 1px solid #ddd;
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .Form-Item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
  }
}
.Form-Item:nth-child(5) {
  border-bottom: 1px solid #ddd;
}
.Form-Item-Label {
  width: 100%;
  max-width: 248px;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
}
.Form-Item-Label.isMsg {
  margin-top: 8px;
  margin-bottom: auto;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label.isMsg {
    margin-top: 0;
  }
}
.Form-Item-Label-Required {
  border-radius: 6px;
  margin-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 48px;
  display: inline-block;
  text-align: center;
  background: #BC84A0;
  color: #fff;
  font-size: 14px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label-Required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 32px;
    font-size: 10px;
  }
}
.Form-Item-Input {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Input {
    margin-left: 0;
    margin-top: 18px;
    height: 40px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Item-Textarea {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 216px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Textarea {
    margin-top: 18px;
    margin-left: 0;
    height: 200px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Btn {
  border-radius: 6px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 280px;
  display: block;
  letter-spacing: 0.05em;
  background: #BC84A0;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  border: none;
  margin-bottom: 100px;
}

.Form-Btn:hover {
  background-color: #c5679b;
}

@media screen and (max-width: 480px) {
  .Form-Btn {
    margin-top: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 160px;
    font-size: 16px;
  }
}