@charset "UTF-8";

/* ========================================================
PC版・SP版専用設定(PCファースト用)
=========================================================*/
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

.sp {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .sp {
    display: initial !important;
  }
}

/* ========================================================
横幅
=========================================================*/
@media screen and (max-width: 767px) {
  body {
    width: 100vw;
    overflow-x: hidden !important; /* 横方向のはみ出しを強制的に隠す */
    min-width: 320px; /* 最小幅を設定し、極端な縮小を防ぐ */
  }
}

body {
	background-color: #fcf6ee;
	font-size: 1.3em;
}

a:hover {
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  color: #009FE8 !important;
}

/*#########################################################

要素関連（リセットCSSの種類によっては不要）

#########################################################*/
html {
  height: 100%;
  font-size: 62.5%;
}

h1 {
  font-size: 3.6rem;
}

h2 {
  font-size: 2.2em;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  h2 {
    font-size: 2.4rem;
  }
}

h3 {
  font-size: 2em;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  h3 {
    font-size: 2rem;
  }
}

h4 {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  h4 {
    font-size: 1.6rem;
  }
}

h5 {
  font-size: 2rem;
  line-height: 1.4;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  h5 {
    font-size: 1.6rem;
  }
}

h6 {
  font-size: 1.6rem;
  line-height: 1.4;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  h6 {
    font-size: 1.6rem;
  }
}

table {
  border-collapse: collapse;
}

ul {
  list-style: none;
}

html,
body {
  padding: 0;
  margin: 0;
  -webkit-print-color-adjust: exact;
  -webkit-tap-highlight-color: transparent;
}
html.modal-open,
body.modal-open {
  overflow: hidden;
}

body {
  line-height: 1.3;
  font-family: "Noto Sans JP", sans-serif !important;
  color: #000;
  letter-spacing: 0.1rem;
  font-weight: 500;
}

h1,
h2,
h3 {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  overflow: hidden;
}

/* ========================================================
パーツ
=========================================================*/

ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}

p {
  margin: 0;
  padding: 0;
  letter-spacing: 0.05em;
  font-weight: 400;
}

a {
  text-decoration: none;
  color: #000;
}
a:hover {
  opacity: 0.7;
}

img,
video {
  max-width: 100%;
  vertical-align: bottom;
}

/* ========================================================
共通パーツ
=========================================================*/
.site-header {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 200;
  /* ========================================================
  スクロールしたら
  =========================================================*/
}
@media screen and (max-width: 767px) {
  .site-header {
    background-color: #fff;
  }
}
.site-header .header-inr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 min(2.6041666667vw, 50px) 0 min(1.5625vw, 30px);
  height: min(5.7291666667vw, 110px);
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .site-header .header-inr {
    padding: min(3.3333333333vw, 40px) min(4.1666666667vw, 50px) 0 min(2.75vw, 30px);
  }
}
@media screen and (max-width: 767px) {
  .site-header .header-inr {
    background-color: #fff;
    padding: 0 min(4.6511627907vw, 10px);
    height: min(20.9302325581vw, 180px);
  }
}
.site-header .header-inr .logo-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  line-height: 0;
  margin-top: 10px;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .site-header .header-inr .logo-box {
    margin-top: 0;
    padding-top: 15px;
  }
}
@media screen and (max-width: 767px) {
  .site-header .header-inr .logo-box {
    margin-top: 0;
  }
}
.site-header .header-inr .logo-box h1 {
  width: min(51.3vw, 713px);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .site-header .header-inr .logo-box h1 {
    width: min(20.80078125vw, 213px);
  }
}
@media screen and (max-width: 767px) {
  .site-header .header-inr .logo-box h1 {
    width: min(69.1395348837vw, 628px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .site-header .header-inr .logo-box h1 a svg {
    width: min(20.80078125vw, 213px);
  }
}
@media screen and (max-width: 767px) {
  .site-header .header-inr .logo-box h1 a svg {
    width: min(69.1395348837vw, 628px);
  }
}
.site-header .header-inr .logo-box h1 a svg .color-white {
  -webkit-transition: 0.3s ease 0.3s;
  transition: 0.3s ease 0.3s;
}
.site-header .header-inr .logo-box.add-cc h1 a svg .color-white {
  fill: #fff;
}
.site-header .header-inr .nav-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}
.site-header .header-inr .nav-list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.site-header .header-inr .nav-list ul li {
  margin-right: min(5.5vw, 55px);
}
.site-header .header-inr .nav-list ul li:last-child {
  margin-right: 0;
}
.site-header .header-inr .nav-list ul li a {
  -webkit-transition: font-size 0.3s;
  transition: font-size 0.3s;
  font-size: 1.5rem;
  font-size: 1.5rem;
  font-weight: 400;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .site-header .header-inr .nav-list ul li a {
    font-size: 1.4rem;
  }
}
.site-header .header-inr .nav-list.add-cc ul li a {
  color: #fff;
}
@media screen and (max-width: 767px) {
  .site-header .header-inr .hamburger-container {
    position: relative;
    width: min(12.3255813953vw, 106px);
    height: min(12.3255813953vw, 106px);
    cursor: pointer;
  }
  .site-header .header-inr .hamburger-container span {
    display: inline-block;
    -webkit-transition: all 0.4s;
    transition: all 0.4s; /*アニメーションの設定*/
    position: absolute;
    left: 9px;
    height: 2px;
    background-color: #000;
  }
}
@media screen and (max-width: 767px) and (max-width: 376px) {
  .site-header .header-inr .hamburger-container span {
    left: 7px;
  }
}
@media screen and (max-width: 767px) {
  .site-header .header-inr .hamburger-container span:nth-of-type(1) {
    top: 20px;
    width: min(8.3720930233vw, 72px);
  }
}
@media screen and (max-width: 767px) and (max-width: 376px) {
  .site-header .header-inr .hamburger-container span:nth-of-type(1) {
    top: 15px;
  }
}
@media screen and (max-width: 767px) {
  .site-header .header-inr .hamburger-container span:nth-of-type(2) {
    top: 31px;
    width: min(8.3720930233vw, 72px);
  }
}
@media screen and (max-width: 767px) and (max-width: 376px) {
  .site-header .header-inr .hamburger-container span:nth-of-type(2) {
    top: 26px;
  }
}
.site-header .header-inr .hamburger-container.is-active span:nth-of-type(1) {
  top: 14px;
  left: 7px;
  -webkit-transform: translateY(6px) rotate(-30deg);
          transform: translateY(6px) rotate(-30deg);
}
.site-header .header-inr .hamburger-container.is-active span:nth-of-type(2) {
  top: 26px;
  left: 8px;
  -webkit-transform: translateY(-6px) rotate(30deg);
          transform: translateY(-6px) rotate(30deg);
}
.site-header .header-inr .hamburger-container.add-cc span {
  background-color: #fff;
}
.site-header .header-inr .hamburger-container.js-modal-close span:nth-child(1) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  top: 1.6vw;
}
.site-header .header-inr .hamburger-container.js-modal-close span:nth-child(2) {
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
  bottom: 1.3333333333vw;
}
.site-header .header-inr .nav-modal-container {
  background: #fff;
  position: fixed;
  left: 0;
  top: min(18.6046511628vw, 160px);
  width: 100%;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  overflow-y: auto;
  z-index: -1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.site-header .header-inr .nav-modal-container.is-active {
  opacity: 1;
  visibility: visible;
}
.site-header .header-inr .nav-modal-container .modal-inr {
  width: min(69.7674418605vw, 600px);
  margin: min(15.9302325581vw, 137px) auto min(34.8837209302vw, 300px);
}
.site-header .header-inr .nav-modal-container .modal-inr .nav1 {
  border-bottom: solid 1px #E6E6E6;
  padding-bottom: min(9.3023255814vw, 80px);
}
.site-header .header-inr .nav-modal-container .modal-inr .nav2 {
  padding-top: min(6.976744186vw, 60px);
}
.site-header .header-inr .nav-modal-container .modal-inr .modal-list-item li:not(:last-child) {
  margin-bottom: min(6.976744186vw, 60px);
}
.site-header .header-inr .nav-modal-container .modal-inr .modal-list-item li a {
  font-size: 1.6rem;
  font-weight: 400;
}
.site-header.current {
  background-color: #fff;
  -webkit-transition: all, 0.3s;
  transition: all, 0.3s;
  -webkit-box-shadow: 0px 5px 10px -6px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 5px 10px -6px rgba(0, 0, 0, 0.2);
}
.site-header.current .header-inr {
  height: min(4.1666666667vw, 80px);
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .site-header.current .header-inr {
    padding: 10px 30px 10px 20px;
    height: min(9vw, 90px);
  }
}
@media screen and (max-width: 767px) {
  .site-header.current .header-inr {
    height: min(18.6046511628vw, 160px);
  }
}
.site-header.current .header-inr .logo-box {
  margin-top: 0;
  padding-top: 0;
}
.site-header.current .header-inr .logo-box h1 {
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .site-header.current .header-inr .logo-box h1 {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@media screen and (max-width: 767px) {
  .site-header.current .header-inr .logo-box h1 {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
.site-header.current .header-inr .nav-list ul li {
  margin-right: min(6.2vw, 62px);
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .site-header.current .header-inr .nav-list ul li {
    margin-right: min(4.2vw, 42px);
  }
}
.site-header.current .header-inr .nav-list ul li:last-child {
  margin-right: 0;
}
.site-header.current .header-inr .nav-list ul li a {
  color: #000;
  font-size: 1.4rem;
  font-weight: 400;
}

/* ========================================================
サイトのフッタ
=========================================================*/
.site-footer {
  padding-bottom: 18px;
}
@media screen and (max-width: 767px) {
  .site-footer {
    margin: 0 auto;
  }
}
.site-footer .footer-menu .menu-inr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: min(4.5833333333vw, 88px);
  margin-bottom: min(4.0625vw, 78px);
}
@media screen and (max-width: 767px) {
  .site-footer .footer-menu .menu-inr {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding-top: min(12.7906976744vw, 110px);
    margin-bottom: min(13.2558139535vw, 114px);
  }
}
.site-footer .footer-menu .menu-inr li {
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .site-footer .footer-menu .menu-inr li {
    font-size: 1.6rem;
  }
}
.site-footer .footer-menu .menu-inr li:not(:last-child) {
  margin-right: min(3.6458333333vw, 70px);
}
@media screen and (max-width: 767px) {
  .site-footer .footer-menu .menu-inr li:not(:last-child) {
    margin-right: 0;
    margin-bottom: min(7.5581395349vw, 65px);
  }
}
.site-footer .footer-menu .menu-inr li a {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.08rem;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .site-footer .footer-menu .menu-inr li a {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 767px) {
  .site-footer .footer-menu .menu-inr li a {
    font-size: 1.5rem;
  }
}
.site-footer p {
  text-align: center;
}
.site-footer p small {
  display: block;
  text-align: center;
  font-size: 1.2rem;
  color: #999;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .site-footer p small {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 767px) {
  .site-footer p small {
    font-size: 1rem;
  }
}

.header-container {
    padding: 20px 20px 0;
}

.header-image-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 38%;
    max-height: 400px;
    background-image: url('/img/recruit/main.png');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    overflow: hidden;
}

/* 2. キャプションボックス (薄いベージュの部分) */
.caption-box {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70%; /* 画像のサイズに合わせて調整 */
    max-width: 700px;
    padding: 30px;
    
    /* 薄いベージュ色を再現 */
    background-color: #fcf6ee; 
    
    /* 角丸を再現 (左上のみ丸く、他は直線) */
    border-top-left-radius: 40px; 
    border-bottom-right-radius: 20px; /* 全体ラッパーの角丸と合わせる */
    height: 150px;
}

/* 3. テキスト要素のスタイル */
.service-title {
    /*font-size: 1.8rem;*/
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.4;
}

.meta-info {
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    align-items: center;
    gap: 10px;
    font-size: 1.6em;
}

.date {
    color: #888;
    margin-right: 10px;
}

.tags-container {
    display: flex;
    gap: 8px;
}

.tag {
    display: inline-block;
    padding: 6px 15px;
    border-radius: 5px;
    font-weight: 700;
    color: white;
    text-decoration: none;
    white-space: nowrap; /* テキストが折り返されないように */
}

/* タグの色を再現 */
.tag-person {
    background-color: #f97155; /* ご本人・ご家族 (オレンジ系) */
}

.tag-law {
    background-color: #e6a88b; /* 法制度の紹介 (薄いオレンジ系) */
}


/* レスポンシブ調整（スマートフォン対応） */
@media (max-width: 768px) {
    .header-container {
        padding: 10px;
    }
    
    .header-image-wrapper {
        padding-bottom: 75%; /* モバイルでは高めに */
        border-radius: 15px;
        background-image: url('/img/recruit/top_sp.jpg'); /* 添付された画像のファイル名に置き換えてください */
    }

    .caption-box {
        width: 90%; /* モバイルでは幅いっぱい */
        padding: 20px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 15px;
    }
    
    .service-title {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    .meta-info {
        flex-direction: column; /* 縦並びにして */
        align-items: flex-end; /* 右寄せ */
        gap: 5px;
    }
    
    .date {
        margin-right: 0;
        margin-bottom: 5px;
    }
    
    .tag {
        font-size: 0.75rem;
        padding: 4px 10px;
    }
}

/* パンくずリストセクションのスタイル */
.breadcrumbs-section {
    padding: 15px 20px;
    text-align: right; /* テキスト全体を右寄せ */
    margin: 0 auto;
    width: 900px;
}

.breadcrumbs-container {
    max-width: 900px; /* メインコンテンツと幅を合わせる */
    width: 100%;
    margin: 0 auto;
}

.breadcrumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end; /* 右端に配置 */
    font-size: 0.9rem;
}

.breadcrumb-list li {
    margin-left: 10px;
    display: flex;
    align-items: center;
    color: #666; /* 現在のページの色 */
}

/* リンクと区切り矢印のスタイル */
.breadcrumb-list a {
    text-decoration: none;
    color: #333; /* リンクの色 */
    white-space: nowrap; /* 折り返し防止 */
}

/* 矢印の区切り（<li>の前に配置） */
.breadcrumb-list li:not(:first-child)::before {
    /* 画像の右向き三角を再現 */
    content: "〉"; 
    font-size: 0.8rem;
    color: #39b38d; /* 緑色の矢印を再現 */
    margin-right: 10px;
}

/* 現在のページ（最後の項目）のスタイル */
.breadcrumb-list li[aria-current="page"] {
    font-weight: 700;
    color: #333;
}

/* メインコンテンツ */
.content-wrapper {
    /*display: flex;*/
    justify-content: center;
    padding: 20px;
    font-size: 16px;
	line-height: 1.8;
}

.main-content-card {
    width: 100%;
    max-width: 900px; /* コンテンツの幅を制限 */
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px 5%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
	.content-wrapper {
		font-size: 15px;
	}
	.main-content-card {
		width: 92%;
	}
}

/* シェアボタンエリア */
.social-share {
    text-align: right;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #777;
}

.social-share a {
    text-decoration: none;
    color: #555;
    margin-left: 8px;
    font-weight: bold;
}

/* セクションと見出し */
.section-container {
    margin-bottom: 30px;
}

.main-content-card h2 {
    /*font-size: 1.5rem;*/
    font-weight: 700;
    padding-bottom: 5px;
    margin-bottom: 15px;
    color: #333;
    border-bottom: 2px solid #ddd; /* セクションの区切り線 */
}

.main-content-card h3 {
    /*font-size: 1.2rem;*/
    font-weight: 700;
    margin-top: 25px;
    margin-bottom: 10px;
    color: #333;
}

.main-content-card h4 {
    /*font-size: 1.1rem;*/
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 8px;
    color: #333;
}

.main-content-card p {
    margin-bottom: 1em;
    /*font-size: 1rem;*/
}

.main-content-card ul {
    margin-left: 20px;
    padding-left: 0;
    list-style: none; /* リストマークを消去 */
}

.main-content-card ul li {
    position: relative;
    margin-bottom: 5px;
    padding-left: 15px;
}

.main-content-card ul li::before {
    content: "・"; /* リストマークを「・」にする */
    position: absolute;
    left: 0;
    color: #333;
}

/* 区切り線 */
.section-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 40px 0;
}

/* 画像プレースホルダー */
.image-placeholder {
    text-align: center;
    margin-top: 30px;
    padding: 20px 0;
    border: 1px dashed #ccc; /* 枠線を模倣 */
    border-radius: 10px;
}

.placeholder-caption {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 10px;
}

.table-image-mockup {
    width: 90%; /* 画像の幅を調整 */
    height: auto;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* モバイル対応の調整 */
@media (max-width: 600px) {
    .main-content-card {
        padding: 30px 4%;
    }
}

/* レスポンシブ調整（スマートフォン対応） */
@media (max-width: 768px) {
    .header-container {
        padding-top: 20px; /* スマホでは画面いっぱいに広げる */
    }
    
    .header-image-wrapper {
    	position: relative;
        border-radius: 0; /* スマホでは角丸をなくすか、トップのみにする */
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding-bottom: 75%; /* モバイルでは高めに (例: 4:3) */
        max-height: none; /* 最大高さを解除 */
    }

    /* キャプションボックスを画像の下端全体を覆うように調整 */
    .caption-box {
        position: absolute; /* 絶対配置を解除して通常フローに戻す */
        width: 90%; /* 幅いっぱい */
        max-width: none;
        /*padding: 30px 20px 20px;*/ /* パディングを調整 */
        
        /* 角丸の変更 */
        border-top-left-radius: 40px; 
        border-top-right-radius: 40px; /* 上部を大きく丸める */
        border-bottom-right-radius: 0; /* 下部は角丸にしない */
        border-bottom-left-radius: 0;
        margin-top: 0; /* 画像と重なる部分を調整 */
        text-align: left; /* テキストを左寄せにする */
        height: 50px;
    }
    
    .service-title {
        font-size: 1.5rem;
        margin-bottom: 15px;
        text-align: left; /* タイトルを左寄せ */
    }
    
    .meta-info {
        flex-direction: row; /* 日付とタグを横並びに維持 */
        justify-content: flex-start; /* 左寄せ */
        align-items: center;
        gap: 10px;
    }
    
    .date {
        font-size: 0.85rem;
        order: -1; /* 日付を左端に移動 */
        margin-right: 5px; /* スペース調整 */
    }
    
    .tags-container {
        display: flex;
        flex-wrap: wrap; /* タグが多すぎる場合に折り返す */
        gap: 8px;
    }
    
    .tag {
        font-size: 0.75rem;
        padding: 5px 10px;
    }
}

/* パンくずリストのスマホ調整を上記メディアクエリ内に追記 */
@media (max-width: 768px) {
    /* ... ヘッダー調整に続けて以下を追加 ... */

    .breadcrumbs-section {
        padding: 10px 20px;
        width: 100%;
    }

    .breadcrumb-list {
        /* 右寄せから左寄せに変更 */
        justify-content: flex-start; 
        font-size: 0.8rem;
        /* スマホで1行に収まらない場合は、折り返しを許可 */
        flex-wrap: wrap; 
    }

    .breadcrumb-list li {
        margin-left: 0; 
        margin-right: 8px; /* li間のスペース調整 */
    }

    /* 矢印を左に配置し、li間の間隔を調整 */
    .breadcrumb-list li:not(:first-child)::before {
        margin-right: 8px;
    }

    .breadcrumb-list a {
        color: #666; /* リンクの色を少し薄く */
    }

    .breadcrumb-list li[aria-current="page"] {
        color: #333;
        font-weight: 700;
    }
}

/* 問い合わせ窓口・関連リンクセクションのスタイル追記 */

.section-contact-links h3.contact-title {
    /*font-size: 1rem;*/
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 5px;
}

.section-contact-links .contact-info {
    /*font-size: 0.95rem;*/
    margin-bottom: 25px;
}

.link-description {
    /*font-size: 0.95rem;*/
    margin-bottom: 20px;
}

.link-source-name {
    /*font-size: 0.9rem;*/
    color: #666;
    margin-bottom: 5px;
    margin-top: 15px;
}

/* リンクURLのボックススタイル */

.link-url a {
    color: #39b38d; /* 標準的なリンクの色 */
    text-decoration: none;
    margin-right: auto; /* リンクアイコンを右に寄せる */
}

.link-icon {
    font-size: 0.8em;
    color: #39b38d; /* 緑色のアイコンを再現 */
    font-weight: bold;
    margin-left: 10px;
}

.pdf-icon::after {
    content: 'PDF'; /* PDFアイコンのテキスト */
    font-size: 0.6em;
    font-weight: 700;
    color: white;
    background-color: #f97155; /* オレンジ色の背景 */
    padding: 2px 4px;
    border-radius: 3px;
    margin-left: 5px;
}

/* ==================================== */
/* 5. 非固定フッターボタン */
/* ==================================== */
.page-footer {
    position: relative; /* 固定解除 */
    /*background-color: #fcf6ee; */
    padding: 40px 0 20px; /* 上部のスペースを大きく取る */
}

.footer-actions {
    display: flex;
    justify-content: center;
    gap: 15px; 
    padding: 10px 10px;
}

.footer-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 25px;
    border-radius: 12px;
    font-size: 1.52rem;
    font-weight: 700;
    width: 48%; 
    max-width: 250px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}

.list-back-button {
    background-color: #00a88e; 
    color: white;
}

.top-button {
    background-color: #00a88e; 
    color: white;
}

.list-back2-button {
    background-color: #2c2c2c; 
    color: white;
}

.top2-button {
    background-color: #2c2c2c; 
    color: white;
}

.list-back3-button {
    background-color: #f97155; 
    color: white;
}

.top3-button {
    background-color: #f97155; 
    color: white;
}

.driver-button {
    background-color: #fa436e; 
    color: white;
}

.button-icon {
    width: 24px;
    height: 24px;
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    background-color: white; /* 白い丸の背景 */
}

.arrow-right-icon::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(45deg);
}

.list-back-button .arrow-right-icon::after {
    border-color: #00a88e; 
}

.top-button .arrow-right-icon::after {
    border-color: #00a88e; 
}

.list-back2-button .arrow-right-icon::after {
    border-color: #2c2c2c; 
}

.top2-button .arrow-right-icon::after {
    border-color: #2c2c2c; 
}

.list-back3-button .arrow-right-icon::after {
    border-color: #FA9983; 
}

.top3-button .arrow-right-icon::after {
    border-color: #FA9983; 
}

.driver-button .arrow-right-icon::after {
    border-color: #fa436e; 
}


/* ==================================== */
/* 6. モバイル調整 (768px以下) */
/* ==================================== */
@media (max-width: 768px) {
    .main-article-card {
        margin: 10px;
        padding: 20px;
        border-radius: 15px;
    }

    .service-title {
        font-size: 1.4rem;
    }

    .footer-button {
        padding: 14px 15px;
        font-size: 0.9rem;
    }
}

/* 既存の交互配置のメディアブロック (変更なし) */
.media-block {
    display: flex;
    align-items: center;
    min-height: 400px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden; /* 子要素の食み出しを隠す */
    max-width: 1000px;
	margin: 0 auto;
}

.image-right {
    flex-direction: row;
}

.image-left {
    flex-direction: row-reverse;
}

.block-image {
    flex: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.block-content {
    flex: 1;
    position: relative;
    padding: 40px;
    z-index: 2;
}

.content-inner {
    background-color: white;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.image-right .block-content {
    margin-right: -15%;
    text-align: left;
}

.image-left .block-content {
    margin-left: -15%;
    text-align: left;
}

.block-content h3 {
    /*font-size: 1.8em;*/
    font-weight: bold;
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
}

h3.ttl:before {
	content: url("/img/recruit/icon_d.png");
	margin-right:20px;  /*画像右の余白*/
	position:relative;
	top:5px;      /*上からの位置*/
	left:0;       /*左からの位置*/
	width: 23px;
	height: 30px;
}

.block-content .icon {
    font-size: 1.2em;
    color: #E91E63;
    margin-right: 10px;
}

.block-content p {
    line-height: 1.8;
    margin-bottom: 30px;
}

.view-more-link {
    display: flex;
    align-items: center;
    width: fit-content; /* 内容の幅に合わせる */
    color: #333; /* テキストの色を黒系に */
    font-weight: bold;
    font-size: 1.1em; /* フォントサイズを少し大きく */
    transition: color 0.3s;
}

.view-more-link:hover {
    color: #E91E63; /* ホバーでテキストの色変更 */
}

.view-more-text {
    margin-right: 15px; /* テキストとボタンの間に余白 */
    white-space: nowrap; /* テキストが改行されないように */
    font-size: 2.8rem;
}

.view-more-arrow-button {
    display: flex; /* 矢印を中央に配置するためにFlexboxを使用 */
    align-items: center;
    justify-content: center;
    width: 50px; /* ボタンの幅 */
    height: 50px; /* ボタンの高さ */
    background-color: #E91E63; /* ピンク色の背景 */
    color: white; /* 矢印の色 */
    border-radius: 50%; /* 円形にする */
    font-size: 1.5em; /* 矢印のサイズ */
    transition: background-color 0.3s, transform 0.3s;
}

.view-more-link:hover .view-more-arrow-button {
    background-color: #C2185B; /* ホバーで少し濃いピンクに */
    transform: translateX(5px); /* ホバーで右に少し移動 */
}

/* レスポンシブ対応 (既存のメディアクエリ内にも調整が必要な場合は適用) */
@media (max-width: 992px) {
    .view-more-arrow-button {
        width: 45px; /* モバイルでは少し小さく */
        height: 45px;
        font-size: 1.3em;
    }
    .view-more-text {
        font-size: 1em; /* モバイルでのフォントサイズ */
        margin-right: 10px;
    }
}

/* --- レスポンシブ対応 (モバイル・タブレット) --- */
@media (max-width: 992px) {
    .media-block {
        flex-direction: column !important;
        min-height: auto;
        margin-bottom: 20px; /* モバイルでの間隔調整 */
    }
    
    .block-image {
        order: 1;
        height: 250px; /* モバイルでの画像高さ */
    }

    .block-content {
        order: 2;
        width: 100%;
        padding: 15px; /* モバイルでのパディング調整 */
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: translateY(-40px); /* 被せる量を調整 */
    }

    .content-inner {
        padding: 25px 15px; /* モバイルでのパディング調整 */
    }
}

/* テーブル全体を囲むコンテナ */
.company-table-container {
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

/* 会社概要テーブルの基本スタイル */
.company-table-container table {
    width: 100%;
    border-collapse: collapse; /* セルの境界線を重ねる */
    background-color: white;
}

/* すべてのセル（thとtd）の共通スタイル */
.company-table-container th,
.company-table-container td {
    padding: 15px 20px;
    border-bottom: 1px solid #eee; /* 薄い水平罫線 */
    text-align: left;
    vertical-align: top; /* 縦方向の上揃え */
    line-height: 1.6;
}

/* テーブルヘッダー（左側の項目名）のスタイル */
.company-table-container th {
    width: 30%; /* 項目名の列幅 */
    min-width: 120px;
    background-color: #f9f9f9; /* わずかに灰色がかった背景色 */
    font-weight: 700;
    color: #333;
}

/* テーブルデータ（右側の内容）のスタイル */
.company-table-container td {
    width: 70%;
    color: #444;
}

/* プロフィールなどのデータが多いセルの内側の段落 */
.company-table-container td p {
    margin-bottom: 1em;
}

.company-table-container td p:last-child {
    margin-bottom: 0;
}

/* 沿革の見出し（<th>）スタイル */
.table-row-history th {
    width: 30%; /* 項目名の列幅 */
    min-width: 120px;
    background-color: white; /* 左側は白（画像では他の行と異なり背景なしに見える） */
    font-weight: 700;
    color: #333;
    /* 縦ラインを<td>側に寄せるため、ここでは右側の罫線を削除 */
    border-bottom: none;
}

/* 沿革のデータセル（<td>）スタイル */
.table-row-history td {
    width: 70%;
    color: #444;
    padding: 0; /* 沿革の項目自体がパディングを持つため、ここではリセット */
    border-bottom: none; /* 最終的な罫線は不要 */
}

/* 沿革の各項目 (history-item) の内部レイアウト */
.history-item {
    display: flex; /* 年と出来事を横並びにする */
    margin-bottom: 15px; /* 各項目の間のスペース */
    padding-left: 10px; 
}

.history-item:first-child {
    margin-top: 15px; /* テーブルセルの上部パディング分を補う */
}

.history-item:last-child {
    margin-bottom: 15px; /* テーブルセルの下部パディング分を補う */
}

/* 沿革の「年」の列 */
.history-year {
    width: 100px; 
    flex-shrink: 0; 
    font-weight: 700;
    color: #444;
}

/* 沿革の「出来事」の列 */
.history-event {
    flex-grow: 1;
    padding-left: 20px; /* 年号と出来事の間のスペース */
    border-left: 1px solid #ccc;
}

/* 最後の行の罫線を消す (画像には最後の罫線がないため) */
.company-table-container table tr:last-child {
    border-bottom: none;
}


/* レスポンシブ調整（モバイル向け） */
@media (max-width: 600px) {
	.company-table-container {
		padding: 0;
	}

    .company-table-container th,
    .company-table-container td {
        display: block; /* thとtdを縦に積み重ねる */
        width: 91%; /* 幅をいっぱいに広げる */
        padding: 10px 15px;
    }
    
    .company-table-container th {
        background-color: #f0f0f0; /* 見出しを少し暗く */
        border-bottom: none; /* thとtdの間の罫線はなし */
        padding-bottom: 5px;
    }

    .company-table-container td {
        border-bottom: 1px solid #eee; /* データの下に罫線 */
        padding-top: 5px;
    }

    /* 沿革セクションのレイアウト調整 */
    .table-row-history th {
        /* thとtdが分かれるため、「沿革」の見出しと内容も分かれる */
        border-bottom: none;
    }
    
    .table-row-history td {
        border-bottom: 1px solid #eee; 
    }

    .table-row-history .history-item {
        flex-direction: column; /* 縦積み */
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px dashed #ddd; /* 沿革項目間の点線 */
    }

    .table-row-history .history-item:last-child {
        border-bottom: none; /* 最後の点線はなし */
    }

    .history-year {
        width: auto;
        margin-bottom: 5px;
    }
}

/* --------------------------
 * 2. モーダル本体 (初期設定: 非表示)
 * -------------------------- */
.modal-overlay {
    /* 最前面に固定表示 */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000; /* 確実に最前面に来るよう高い値を設定 */
    
    /* 画面全体を覆う */
    width: 100%;
    height: 100%;
    
    /* 背景を半透明の黒にする */
    background-color: rgba(0, 0, 0, 0.6);
    
    /* 初期状態は非表示 */
    display: none; 
    
    /* 中身の要素を中央に配置するための設定 */
    align-items: center;
    justify-content: center;
}

/* JavaScriptで付与され、モーダルを表示させるクラス */
.modal-overlay.is-active {
    display: flex;
}

/* --------------------------
 * 3. モーダルの白い枠 (コンテンツラッパー)
 * -------------------------- */
.modal-wrapper {
    position: relative;
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 30px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh; /* 画面の高さの90%に制限 */
    overflow-y: auto; /* コンテンツがはみ出したら縦スクロール可能にする */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* --------------------------
 * 4. 閉じるボタン
 * -------------------------- */
.modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    color: #999999;
    text-decoration: none;
    cursor: pointer;
    line-height: 1; /* 高さを調整 */
}

.modal-close-button:hover {
    color: #333333;
}

/* --------------------------
 * 5. コンテンツのスタイル
 * -------------------------- */
.modal-content h1 {
    font-size: 28px; /* 大きすぎるフォントサイズを修正 */
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.modal-content p {
    line-height: 1.6;
    margin-bottom: 10px;
}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);backdrop-filter:saturate(130%) blur(4px)}
.nav{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.brand img{height:24px;width:auto}
.nav-primary,.nav-secondary{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nav-spacer{flex:1}
.nav a{font-size:14px;color:#242633}
.cta{background:var(--primary);color:#fff;border:none;padding:12px 18px;border-radius:12px;font-weight:700;display:inline-flex;align-items:center;gap:.4em}
.cta svg{width:16px;height:16px;fill:currentColor}
.cta:hover{background:var(--primary-2)}

/* ---------- Hero（PC） ---------- */
.hero{position:relative;padding:0 0 8px}
.hero-wrap{position:relative;overflow:visible;padding:0;background:transparent;box-shadow:none;border-radius:0}

/* 横スクロール（PC/SP共通） */
.reel{position:relative;overflow:hidden;border-radius:0}
.reel::after{display:none}
.reel-track{display:flex;animation:reel-scroll var(--duration,36s) linear infinite;will-change:transform}
.reel:hover .reel-track{animation-play-state:paused}

.mosaic{
  flex:0 0 100%;
  padding:24px 18px;
  display:grid;gap:12px;
  grid-template-columns:1.8fr 1fr 1fr;
  grid-template-rows:minmax(220px,32vh) minmax(220px,32vh);
}
.mosaic>figure,.mosaic .hero-d figure{margin:0;overflow:hidden;border-radius:14px;background:#e9ebf7}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block}

.hero-a{grid-column:1/2;grid-row:1/3}
.hero-b{grid-column:2/3;grid-row:1/2}
.hero-c{grid-column:3/4;grid-row:1/2}
.hero-d{grid-column:2/4;grid-row:2/3;display:block}
.hero-d figure+figure{display:none}

@keyframes reel-scroll{from{transform:translateX(0)} to{transform:translateX(-100%)}}

/* 見出し（PC）：2行の白帯＋左下配置 */
.speech{
  position:absolute;left:28px;bottom:28px;top:auto;
  max-width:min(680px,58%);z-index:2;background:transparent;border-radius:0;box-shadow:none;padding:0;
}
.speech:after{display:none}
.headline{display:flex;flex-direction:column;gap:14px;margin:0 0 14px}
.headline .line{
  display:inline-block;font-weight:900;font-size:clamp(26px,3.6vw,44px);
  letter-spacing:.02em;line-height:1.2;color:#111;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(120%) blur(4px);
  border-radius:18px;padding:18px 22px;box-shadow:0 6px 24px rgba(22,24,35,.08),0 1px 2px rgba(22,24,35,.06);
}

/* CTAボタン（ヒーロー内） */
.btn-entry{
  display:inline-flex;align-items:center;gap:16px;
  padding:14px 16px 14px 18px;border-radius:16px;
  background:linear-gradient(180deg,#6e66ff 0%,#5a4be7 100%);
  color:#fff;font-weight:800;
  box-shadow:0 8px 24px rgba(68,54,201,.28),0 2px 4px rgba(68,54,201,.18);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.btn-entry .icon-circle{width:36px;height:36px;border-radius:999px;background:#fff;color:#5a4be7;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(90,75,231,.12)}
.btn-entry:hover{transform:translateY(-1px);filter:saturate(110%);box-shadow:0 10px 28px rgba(68,54,201,.34),0 2px 6px rgba(68,54,201,.2)}
.btn-entry:active{transform:translateY(0)}
.btn-entry:focus-visible{outline:3px solid color-mix(in srgb,#ffd15c 60%,white);outline-offset:2px}

/* ---------- Notice ---------- */
.notice{margin-top:18px}
.notice-inner{
  background:#fff;border-radius:14px;box-shadow:var(--shadow-soft);
  padding:14px 18px;display:grid;grid-template-columns:110px 1fr auto;gap:14px;align-items:center;border:1px solid var(--line)
}
.notice .label{font-weight:700}
.notice .date{font-variant-numeric:tabular-nums;color:var(--muted)}
.notice .link{display:inline-flex;align-items:center;gap:.4em;font-weight:700}
.notice .link svg{width:16px;height:16px;fill:currentColor}

/* ---------- About ---------- */
.section{padding:64px 0}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:700}
.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:#7c80ff}
.h2{font-weight:900;font-size:clamp(22px,3vw,36px);line-height:1.3;margin:.3em 0 .6em}
.lead{color:#3a3d4a;max-width:760px}
.cards{display:grid;gap:18px;grid-template-columns:1fr 1fr 1fr;margin-top:22px}
.card{background:#fff;border-radius:16px;box-shadow:var(--shadow-soft);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column}
.card .ph{aspect-ratio:16/9;background:#e9ebf7}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;font-weight:700;color:#111}
.card a svg{width:18px;height:18px;fill:currentColor}
.about-cta{margin-top:18px;display:inline-flex;align-items:center;gap:.6em;padding:12px 18px;background:var(--primary);color:#fff;border-radius:12px;font-weight:700;box-shadow:var(--shadow-soft)}
.about-cta:hover{background:var(--primary-2)}

/* ---------- A11y & 操作性 ---------- */
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:16px;top:16px;z-index:1000;background:#fff;padding:10px 14px;border-radius:10px;box-shadow:var(--shadow);outline:2px solid var(--primary)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.cta,.ghost,.notice .link,.card a{min-height:44px}
.cta:focus-visible,.ghost:focus-visible,.notice .link:focus-visible,.card a:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 60%,white)}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .mosaic{grid-template-rows:minmax(200px,30vh) minmax(200px,30vh)}
}
@media (max-width:900px){
  .nav-primary{display:none}
  .notice-inner{grid-template-columns:90px 1fr auto}
}

/* ===== SP（参考サイト準拠） ===== */

@media (max-width: 768px){
  .mosaic{
  	grid-template-rows: minmax(10px,10vh) minmax(10px,15vh);
  }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion:reduce){
  .reel-track{animation:none}
}

.representative {
	text-align: center;
}

.representative span {
	font-weight: 700;
	font-size: 2.4em;
}

.recruit-order-accordion {
	display: block;
	text-align: center;
	margin: 20px;
}

.recruit-order-accordion button {
	font-size: 1.286em;
	width: 700px;
	height: 2.666em;
	white-space: nowrap;
	letter-spacing: .05em;
	background: #FA436E;
	padding: .3em 3.5em;
	border-radius: 10em;
}

.recruit-order-accordion button, [class*="btn-link"] a {
	line-height: 1;
	position: relative;
	display: inline-block;
	color: #fff;
	border: 0;
}

.recruit-order-accordion button::after, .recruit-order-accordion button::before, [class*="btn-link"] a::after {
	display: inline-block;
	content: '';
	vertical-align: middle;
	background-repeat: no-repeat;
	background-position: center;
}

.recruit-order-accordion button::before {
	position: absolute;
	top: calc(50% - .5em);
	left: 1.85em;
	width: 1em;
	height: 1em;
	-webkit-transition-duration: .4s;
	transition-duration: .4s;
	background-image: url(/img/svg/ico-chevron-right.svg);
	background-size: contain;
}

.recruit-order-accordion button {
	font-size: 1.286em;
	white-space: nowrap;
	letter-spacing: .05em;
}

.recruit-order-accordion button, [class*="btn-link"] a {
	line-height: 1;
	color: #fff;
}

.recruit-order-accordion button:hover {
	opacity: 0.7;
}

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

	.recruit-order-accordion {
		margin: 20px 0;
	}

	.recruit-order-accordion button {
		width: 100%;
		white-space: normal;
	}
}

/* 1. 画像のフル幅表示 */
.hero-image-top {
    /* 画像を囲むラッパーが必要なら */
    overflow: hidden; 
}
.hero-image-top img {
    width: 50%; /* 画像を親要素（画面幅）いっぱいに広げる */
    height: auto;
    display: block;
}

/* 2. コンテンツの最大幅制限と中央寄せ */
.interview-section .container {
    max-width: 900px; /* コンテンツエリアの最大幅を設定 */
    margin: 0 auto;    /* 左右マージンをautoにして中央寄せ */
    padding: 0 20px 20px;   /* 画面端に余裕を持たせる */
    background: #fff;
  	position: relative;
}

/* 3. セクション全体の中央揃えと余白 */
.interview-section {
    padding: 40px 0;   /* 上下に大きな余白を確保 */
    text-align: center; /* タイトルと、コンテナ内の要素を中央寄せ */
    /* 注: content-body のテキストは左寄せに戻す */
}

.section-1 {
  z-index: 9999;
  position: relative;
  background: #fff;
  width: 900px;
  margin: 0 auto;
  padding: 0;
}

/* セクションタイトル */
.section-title {
    font-weight: bold;
    margin-top: -60px;  /* **重要: 画像に少し被せるための調整** */
    margin-bottom: 40px;
    line-height: 1.4;
    color: #333;
    /* 背景色を白にして、画像に被った部分の文字が見えるようにする */
    padding: 30px 20px;
    background-color: white;
    border-radius: 8px; /* 角丸でデザイン性を出す */
    text-align: center;
}

/* 本文エリアの調整 */
.content-body {
    max-width: 800px; /* 本文の最大幅をコンテナより少し狭くして読みやすくする */
    margin: 0 auto;   /* 中央寄せ */
    text-align: left; /* **重要: 本文のテキストを左寄せに戻す** */
}

/* 本文段落のスタイル */
.content-body p {
    margin-bottom: 80px;
}

@media screen and (max-width:767px) {
	.content-body p {
	    margin-bottom: 40px;
	}
}

.section-3 .section-image-wrapper {
	text-align: right;
}

.section-3 img {
	width: 50%;
}

/* スケジュールセクション */
.schedule-section {
    padding: 80px 0;
    background-color: #fff; /* 薄い灰色背景を再現 */
}

/* スケジュールセクション全体の設定 */
.schedule-section {
    padding: 80px 0;
    background-color: #fff; 
}

/* 画像とリストを並べるコンテナに Flexbox を適用 */
.schedule-flex-container {
    display: flex; /* ★画像をリストを横並びにする */
    gap: 40px; /* 画像とリストの間の隙間 */
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
    flex-wrap: wrap; /* 説明文を下に折り返すため */
    position: relative;
}

/* 画像エリアの設定 */
.schedule-image {
}

/* リストエリアの設定 */
.schedule-list {
    position: absolute;
	right: 20px;
	top: 250px;
	background: #fff;
	padding: 20px;
}

.schedule-list ul {
    list-style: none;
    padding-left: 0; /* paddingをリセット */
    margin: 0;
}

.schedule-list li {
    display: flex;
    position: relative; /* 擬似要素の位置の基準にする */
    border-left: 2px solid #ddd; /* ★垂直線（リスト全体を囲む線） */
    padding: 10px 0 10px 30px; /* 左側にタイムライン用の余白を確保 */
    margin-bottom: 5px;
}

/* ★各リスト項目の左側にある丸い点を追加 */
.schedule-list li::before {
    content: '';
    position: absolute;
    left: -11px; /* 線の中心にくるように調整 */
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: white; /* 内側の色 */
    border: 3px solid #0076a3; /* 外側の枠（青色） */
    z-index: 1;
}

/* 時刻と活動内容のスタイル */
.schedule-list .time {
    font-weight: bold;
    color: #333;
    margin-right: 20px;
    flex-shrink: 0; 
    width: 60px; /* 時刻の幅を固定 */
}

.schedule-list .activity {
    color: #333;
}

/* 説明文のエリア設定 */
.schedule-description {
    /* ★Flexboxで次の行に移動させる */
    flex-basis: 100%; 
    order: 3; /* 一番下に配置する */
    
    /* ★回り込みのように見せるため、画像と同じ幅に収まるように制限 */
    max-width: 500px; /* 画像の flex: 50% に合わせた具体的な最大幅を設定 */
    
    padding-left: 20px; /* 左側への余白調整 */
}

/* レスポンシブデザイン（モバイル対応） */
@media (max-width: 768px) {
	.hero {
		padding: 0;
	}
	.hero-image-top img {
	    width: 100%; /* 画像を親要素（画面幅）いっぱいに広げる */
	}
	.section-1 {
		width: 100%;
	}
	.interview-section .container {
		padding: 10px 20px;
	}
    .interview-section {
        padding: 40px 0;
    }
    .section-title {
        font-size: 24px;
        margin-bottom: 20px;
        margin-top: 0;
    }
    .section-3 img {
	  width: 100%;
	}
    
    .schedule-section {
    	padding: 0;
    }

    .schedule-flex-container {
        flex-direction: column; /* 要素を縦に並べる */
    }
    .schedule-image, .schedule-list {
        flex-basis: 100%; /* 幅を100%に */
        margin-top: 0;
    }
    
    .schedule-list {
    	position: unset;
    }
    
    .schedule-description {
    	margin-top: 0;
    	padding-bottom: 20px;
    }
}

/* お申込みボタンお知らせ */
.orderBox {
	margin-top:50px;
	text-align: center;
}

.order_info::before {
	position: relative;
	top: .2em;
	left: -.5em;
	display: inline-block;
	width: 1px;
	height: 1.125em;
	content: '';
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	background: #000;
}

.order_info::after {
	position: relative;
	top: .2em;
	left: .5em;
	display: inline-block;
	width: 1px;
	height: 1.125em;
	content: '';
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	background: #000;
}

.orderBox p {
	font-weight: bold;
}

@media screen and (max-width:767px) {
	.order_info::before,
	.order_info::after {
		display: none;
	}
}