@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.2rem;
  }
}

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: 90%;
  margin: min(15.9302325581vw, 10px) 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;
    font-size: 32px;
}

.meta-info {
    display: grid;
    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%; /* モバイルでは高めに */
		height: 30px;
        border-radius: 15px;
        background-image: url('/img/recruit/top_sp.png'); /* 添付された画像のファイル名に置き換えてください */
    }

    .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: 10px;
        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: 90px;
    }
    
    .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: 10.5px;
        padding: 5px;
    }
}

/* パンくずリストのスマホ調整を上記メディアクエリ内に追記 */
@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) {
	.footer-actions {
	  display: flex;
	  flex-direction: column;
	  text-align: center;
	}

    .main-article-card {
        margin: 10px;
        padding: 20px;
        border-radius: 15px;
    }

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

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

/* 既存の交互配置のメディアブロック (変更なし) */
.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: 100%; /* モバイルでの画像高さ */
        width: 100%; /* モバイルでの画像高さ */
    }

    .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;
		width: 88%;
	}
    .interview-section {
        padding: 40px 0;
    }
    .section-title {
        font-size: 2.1rem;
        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;
	}
}

@media screen and (max-width: 768px) {
	#school {
    font-family: "Noto Sans JP", sans-serif;
    text-align: center;
    padding: 30px 0 15px;
  }
  #school .title {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  #school .bg {
    background: #fff;
    padding: 25px 6% 15px;
  }
  #school .bg .name {
    font-size: 17px;
    font-weight: bold;
  }
  #school .bg .parking {
    font-size: 16px;
    font-weight: 500;
    color: #01aded;
	margin: 10px 0 20px;
  }
  #school .bg .car-type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 6%;
    margin: 15px 0;
  }
  #school .bg .car-type li {
    list-style: none;
    width: 29%;
    font-size: 15px;
    color: #000;
    background: #d5f4ff;
    padding: 3px 0;
    border-radius: 4px;
    font-weight: 400;
    text-align: center;
  }
  #school .bg .evaluation-title {
    font-size: 18px;
    font-weight: 500;
  }
  #school .bg .evaluation {
    display: block;
  }
  #school .bg .evaluation .star .material-symbols-sharp {
    color: #ebbf5a;
    font-size: 16px;
    margin-right: -6px;
    margin-top: 4px;
  }
  #school .bg .reviews-average {
	display: block;
  }
  #school .bg .reviews {
  	text-align: left;
  	padding-bottom: 10px;
  }
  #school .bg .reviews .reviews-img img {
  	width: 24%;
  }
  #school .bg .school-comment {
  	text-align: left;
  	background-color: #ffefcc;
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
  }
  #school .bg .evaluation .number {
    font-size: 24px;
    font-weight: 500;
  }
  #school .bg .evaluation .number .small {
    font-size: 16px;
    font-weight: 400;
    margin-left: 5px;
  }
  #school .bg .baloon {
    font-size: 13px;
    background: #eff4f6;
    padding: 10px;
    position: relative;
    width: 90%;
    margin: auto;
  }
  #school .bg .baloon::after {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 10px 0 10px;
    border-color: #eff4f6 transparent transparent transparent;
  }
  #school .bg .btn {
    font-size: 14px;
    font-weight: bold;
    padding: 20px 0;
    color: #01aded;
    border-radius: 30px;
    border: 1px solid #01aded;
    width: 90%;
    margin: 20px auto 30px;
    -webkit-box-shadow: 0 4px 0 0 rgba(51, 51, 51, 0.2);
            box-shadow: 0 4px 0 0 rgba(51, 51, 51, 0.2);
  }
  #school .bg .address-title {
    font-size: 14px;
    font-weight: 700;
    background: #01aded;
    color: #fff;
    border-radius: 4px;
    padding: 2px 0;
  }
  #school .bg .address {
    font-size: 14px;
    margin: 5px 0 10px;
    text-align: left;
  }
  #school .bg iframe {
    width: 100%;
    height: 275px;
    margin-top: 10px;
  }
  #school .bg .tel-text {
    font-size: 16px;
    margin: 20px 0 5px;
  }
  #school .bg .tel {
    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;
    gap: 8px;
  }
  #school .bg .tel .tel-icon {
    width: 15px;
  }
  #school .bg .tel .tel-number {
    font-size: 30px;
    font-weight: bold;
  }
  #school .bg .tel-time {
    font-size: 16px;
  }
}

@media screen and (min-width: 769px) {
  #school {
    font-family: "Noto Sans JP", sans-serif;
    text-align: center;
    padding: 30px 0 50px;
    width: 940px;
    margin: 0 auto;
  }
  #school .title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  #school .bg {
    background: #fff;
    padding: 30px 130px;
  }
  #school .bg .name {
    font-size: 24px;
    font-weight: bold;
  }
  #school .bg .parking {
    font-size: 20px;
    font-weight: 500;
    color: #01aded;
    margin: 10px 0 20px;
  }
  #school .bg .car-type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    margin: 15px 0;
  }
  #school .bg .car-type li {
    width: 116px;
    list-style: none;
    font-size: 15px;
    color: #000;
    background: #d5f4ff;
    padding: 3px 0;
    border-radius: 4px;
    font-weight: 400;
    text-align: center;
  }
  #school .bg .evaluation-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 530px;
    margin: 0 auto 40px;
  }
  #school .bg .evaluation-title {
    font-size: 24px;
    font-weight: 500;
  }
  #school .bg .evaluation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: block;
    text-align: left;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 10px;
    margin: 5px 0 0;
  }
  #school .bg .reviews {
  	text-align: left;
  	padding-bottom: 10px;
  }
  #school .bg .reviews .reviews-img img {
  	width: 24%;
  }
  #school .bg .reviews-average {
	display: flex;
  }
  #school .bg .reviews-average .star {
	width: 120px;
  }
  #school .bg .evaluation .star .material-symbols-sharp {
    color: #ebbf5a;
    font-size: 16px;
    font-variation-settings: "FILL" 1;
    margin-right: -6px;
    margin-top: 4px;
  }
  #school .bg .reviews {
  	text-align: left;
  	padding-bottom: 10px;
  }
  #school .bg .school-comment {
  	text-align: left;
  	background-color: #ffefcc;
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
  }
  #school .bg .evaluation .number {
    font-size: 24px;
    font-weight: 500;
  }
  #school .bg .evaluation .number .small {
    font-size: 16px;
    font-weight: 400;
    margin-left: 5px;
  }
  #school .bg .evaluation-block .evaluation-right {
    width: 280px;
  }
  #school .bg .baloon {
    font-size: 13px;
    background: #eff4f6;
    padding: 10px;
    position: relative;
  }
  #school .bg .baloon::after {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 10px 0 10px;
    border-color: #eff4f6 transparent transparent transparent;
  }
  #school .bg .btn {
    font-size: 14px;
    font-weight: bold;
    padding: 20px 0;
    color: #01aded;
    border-radius: 35px;
    border: 1px solid #01aded;
    margin: 20px 0;
    -webkit-box-shadow: 0 4px 0 0 rgba(51, 51, 51, 0.2);
            box-shadow: 0 4px 0 0 rgba(51, 51, 51, 0.2);
  }
  #school .bg .address-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  #school .bg .address-list .address-block {
    width: 300px;
  }
  #school .bg .address-list .address-block .address-title {
    font-size: 14px;
    font-weight: 700;
    background: #01aded;
    color: #fff;
    border-radius: 4px;
    padding: 2px 0;
  }
  #school .bg .address-list .address-block .address {
    font-size: 16px;
    margin: 5px 0 10px;
    text-align: left;
  }
  #school .bg iframe {
    width: 100%;
    height: 354px;
    margin: 5px 0 10px;
  }
  #school .bg .tel-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 500px;
    margin: auto;
  }
  #school .bg .tel-block .tel-text {
    font-size: 18px;
    text-align: left;
  }
  #school .bg .tel-block .tel-info .tel {
    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;
    gap: 8px;
  }
  #school .bg .tel-block .tel-info .tel .tel-icon {
    width: 15px;
  }
  #school .bg .tel-block .tel-info .tel .tel-number {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.2;
  }
  #school .bg .tel-block .tel-info .tel-time {
    font-size: 16px;
	letter-spacing: 2px;
	margin-left: 30px
  }
}

/* 教習料金アコーディオン */
.plans-accordion-container {
  max-width: 600px;
  margin: 0 auto;
}

.plans-accordion-item {
  margin-bottom: 10px;
}

.plans-accordion-toggle {
  display: none;
}

.plans-accordion-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #00A3E0;
  color: #fff;
  padding: 15px 20px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
  position: relative;
}

.plans-accordion-label::after {
  content: "▶";
  font-size: 1rem;
  margin-left: 10px;
  transition: transform 0.3s;
}

.plans-accordion-toggle:checked + .plans-accordion-label::after {
  content: "▼";
}

.plans-accordion-label:hover {
  background-color: #00A3E0;
}

.plans-accordion-content {
  max-height: 0;
  overflow: hidden;
  background-color: #fffaf0;
  border: 1px solid #B3E5F6;
  border-radius: 5px;
  padding: 0 15px;
  transition: max-height 0.4s ease, padding 0.4s ease;
  box-sizing: border-box;
}

.plans-accordion-toggle:checked + .plans-accordion-label + .plans-accordion-content {
  max-height: 5000px;
  padding: 10px 15px;
}

.plans-accordion-content .fee-box {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #fef7e0;
  border-radius: 5px;
  border-left: 5px solid #d4a017;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.plans-accordion-content .license-type {
  font-weight: 600;
  margin-bottom: 5px;
  color: #5b4a00;
  text-align: left;
}

.plans-accordion-content .fee-info .fee {
  /*font-size: 1.2rem;*/
  font-weight: bold;
  color: #d9534f;
  margin-right: 10px;
}

.plans-accordion-content .fee-info .tax {
  font-size: 0.9rem;
  color: #777;
  margin-left: 5px;
}

.plans-accordion-content .fee-info .detail-link {
  padding: 5px 10px;
  background-color: #6d5900;
  color: #fff;
  text-decoration: none;
  /*font-size: 0.85rem;*/
  border-radius: 5px;
  transition: background-color 0.3s;
  white-space: nowrap;
}

.plans-accordion-content .fee-info .detail-link:hover {
  background-color: #8c7200;
}

@media (max-width: 480px) {
  .plans-accordion-content .fee-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .plans-accordion-content .fee-info .fee {
    margin-bottom: 5px;
  }

  .plans-accordion-content .fee-info .detail-link {
    margin-top: 5px;
  }
}

@media (max-width: 325px) {
	.plans-accordion-content .fee-box {
		padding: 5px;
	}
}

@media screen and (min-width: 769px) {
	.bnr_opcp {
		margin-left: 110px;
	}
}

@media screen and (max-width: 768px) {
	.bnr_opcp {
		margin-bottom: 25px;
	}
}

#footer .mod-contact-info .openingHours dd dl dd, .wbr, span[class*=ico-] {
	display: inline-block;

}

#footer {
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	background: #d5f4ff;
	font-family: initial;

}

.menu-open #footer {
	-webkit-transition-duration: .4s;
	transition-duration: .4s;
	-webkit-filter: blur(4px);
	filter: blur(4px);

}

@media screen and (min-width: 769px) {
	#footer .wrap {
		display: inline-block;
	}
}

#footer .contact {
	font-size: .875em;

}

#footer .copyright {
	font-size: .625em;

}

#footer #commonFooter {
	padding-top: 30px;

}

#footer #commonFooter ul {
	list-style: none;

}

#footer #commonFooter li {
	margin-bottom: .6em;

}

#footer #commonFooter .button a .ico {
	position: relative;
	top: -.15em;
	display: inline-block;
	width: 1.429em;
	height: 1.429em;
	margin-right: 10px;

}

#footer #commonFooter .button a .ico svg {
	vertical-align: middle;
	fill: #fff;

}

#footer .mod-sitemap {
	padding: 20px;
	letter-spacing: -.4em;

}

#footer .mod-sitemap .item {
	display: inline-block;
	width: 100%;
	margin-bottom: .5em;
	padding: 0 4px;
	text-align: left;
	vertical-align: top;
	letter-spacing: 0;

}

#footer .mod-sitemap .item .item-wrap {
	padding-left: 1em;
	padding-top: 10px;

}

#footer .mod-sitemap h3 {
	font-weight: 100;
	padding: .5em .75em .4em;
	text-align: left;
	letter-spacing: .1em;
	color: #fff;
	border-radius: .3em;
	background-color: #00a0e9;
	font-size: 1.5em;

}

#footer .mod-sitemap h3:before, #footer .mod-sitemap li:before {
	content: '';
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;

}

#footer .mod-sitemap h3:before {
	font-size: 1.143em;
	display: inline-block;
	margin-right: .5em;
	border-radius: 1em;
	position: relative;
	top: .16em;
	width: 1em;
	height: 1em;
	background-image: url(../img/svg/ico-check-outline.svg);

}

#footer .mod-sitemap li {
	position: relative;
	padding-left: 1em;

}

#footer .mod-sitemap li:before {
	position: absolute;
	top: .2em;
	left: 0;
	width: .429em;
	height: .857em;
	background-image: url(../img/svg/ico-triangle.svg);

}

#footer .mod-sitemap li li:before {
	position: absolute;
	top: 0;
	left: 0;
	content: '・';
	background: 0 0;

}

#footer .mod-contact-info {
	padding: 20px 8px;
	margin-bottom: 100px;

}

#footer .mod-contact-info .item {
	position: relative;
	padding: 4em;
	border-radius: .5em;
	background: #fff;

}

@media screen and (max-width: 768px) {
	#footer .mod-contact-info .item {
		padding: 1em;

	}
}

#footer .mod-contact-info .item:before {
	position: absolute;
	z-index: -1;
	top: 6px;
	left: 6px;
	width: 100%;
	height: 100%;
	content: '';
	border-radius: .5em;
	background-color: #9bdcf3;
	background-image: url(../img/svg/bg-slash-2.svg);
	background-size: 18px;

}

#footer .mod-contact-info h2 {
	font-size: 2.5em;
	line-height: 1;
	position: relative;
	display: block;
	margin: 0 auto .3em;
	/*padding-left:1.125em;*/

}

#footer .mod-contact-info h2 img {
	height: .929em;

}

#footer .mod-contact-info .access [class*=link-] a:after, #footer .mod-contact-info h2:before {
	width: 1em;
	height: 1em;
	content: '';
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

}

#footer .mod-contact-info address {
	margin-bottom: .75em;

}

#footer .mod-contact-info .access {
	margin-bottom: 2em;
	text-align: center;
	letter-spacing: -.4em;

}

#footer .mod-contact-info .access [class*=link-] {
	display: inline-block;
	width: 50%;
	max-width: 15em;
	letter-spacing: 0;

}

#footer .mod-contact-info .access [class*=link-] a {
	display: block;
	padding: .6em .5em .4em;
	color: #00a0e9;
	border: 2px solid;
	border-radius: .5em;
	background-color: #fff;

}

#footer .mod-contact-info .access [class*=link-] a:after {
	position: relative;
	top: -.1em;
	display: inline-block;
	margin-left: .3em;
	vertical-align: middle;
	border-radius: 1em;
	background-color: #00a0e9;
	background-image: url(../img/svg/ico-arrow-right.svg);

}

#footer .mod-contact-info .access [class*=link-]:nth-child(odd) {
	padding-right: .5em;

}

#footer .mod-contact-info .access [class*=link-]:nth-child(even) {
	padding-left: .5em;

}

#footer .mod-contact-info .button {
	font-size: 1.286em;
	margin-bottom: 1.75em;

}

#footer .mod-contact-info .button h3 {
	font-weight: 100;
	margin-bottom: .5em;

}

#footer .mod-contact-info .button h3:after, #footer .mod-contact-info .button h3: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;

}

#footer .mod-contact-info .button h3:after {
	left: .5em;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);

}

#footer .mod-contact-info .button [class*=link-] {
	max-width: 24.222em;
	margin: 0 auto .75em;

}

#footer .mod-contact-info .button [class*=link-] a {
	display: block;
	padding: .5em;
	color: #fff;
	border-radius: .3em;
	background-color: #fa436e;

}

#footer .mod-contact-info .button .link-request a {
	background-color: #00a0e9;
}

#footer .mod-contact-info .button .link-application a {
	background-color: #fa436e;
}

#footer .mod-contact-info .button .link-lodge a {
	background-color: #00cc00;
}

#footer .mod-contact-info .button .link-line-attend a {
	background-color: #F58E7E;
}

#footer .mod-contact-info .button .link-line-lodge a {
	background-color: #8DCF3F;
}

#footer .mod-contact-info .telephone .link-telephone {
	font-size: 35px;

}

@media (max-width: 767px) {
	#footer .mod-contact-info .telephone .link-telephone {
		font-size: 30px;

	}
}

#footer .mod-contact-info .openingHours {
	margin-top: 1em;

}

#footer .mod-contact-info .openingHours dt {
	font-size: .857em;
	display: inline-block;
	padding: 0 .5em;
	vertical-align: top;

}

#footer .mod-contact-info .openingHours dd {
	display: inline-block;
	text-align: left;
	vertical-align: top;

}

#footer .mod-contact-info .openingHours dd dl dt {
	font-size: 1em;
	display: inline-block;
	width: 6em;

}

@media (min-width: 768px) {
  #footer #commonFooter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media (min-width: 425px) {
  #footer .mod-sitemap .item-1 .item-wrap ul, #footer .mod-sitemap .item-2, #footer .mod-sitemap .item-3 {
    width: 60%;
  }
}

@media (min-width: 425px) {
  #footer .mod-sitemap .item-1 .item-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 20px;
  }
}

.plans-detail-accordion {
	display: block;
	text-align: center;
	margin: 20px;
}

.plans-detail-accordion button {
	font-size: 1.286em;
	width: 80%;
	height: 2.666em;
	white-space: nowrap;
	letter-spacing: .05em;
	background: #4CBCEF;
	padding: .3em 3.5em;
	border-radius: 10em;
}

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

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

.plans-detail-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;
}

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

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

.plans-detail-accordion button:hover {
	opacity: 0.7;
	cursor : pointer;
}

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

	.plans-detail-accordion {
		margin: 20px 0;
	}

	.plans-detail-accordion button {
		width: 100%;
		white-space: normal;
	}
}

.fade-in-heading {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 45px;
  font-weight: bold;
  text-align: center;
  margin: 0 0 50px 0;
}

@media screen and (max-width:480px) {
	.fade-in-heading {
	  font-family: 'Noto Sans JP', sans-serif;
	  font-size: 3rem;
	  font-weight: bold;
	  text-align: center;
	  margin: 0 0 50px 0;
	}
}
span.star { color: #fbbc04; }

.cases-section {
  padding: 80px 20px;
  background: #fff;
  text-align: center;
}

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

.cases-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.case-box {
  width: 100%;
  max-width: 460px;
  background: #f7f9fb;
  border-radius: 8px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.case-header {
  display: flex;
  align-items: center;
  padding: 20px;
  gap: 16px;
  background: #e6f8fb;
  border-radius: 8px 8px 0 0;
}

.case-header img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.case-tag {
  background: #00abc9;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
}

.case-body {
  padding: 20px 20px 30px;
}

.case-heading {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 10px;
}

.case-text {
  font-size: 14px;
  line-height: 1.7;
  color: #444;
}

.cstmTbl {
	width: 60%;
	margin: 0 auto;
	border-top: 1px solid #ddd;
}

@media screen and (max-width:767px) {
	.cstmTbl {
		width: 98%;
		margin: 10px 0 30px;
		margin-left: 5px;
		border-top: 1px solid #ddd;
	}
}

.cstmTbl th {
	background: #eee;
	text-align: left;
	border-bottom: 1px solid #ddd;
	vertical-align: middle;
	padding: 10px;
	font-weight: bold;
}

.cstmTbl td {
	border-bottom: 1px solid #ddd;
	vertical-align: middle;
	padding: 10px;
	background: #fff;
}

.fRed {
  color: #f03838;
}

.yellow_line {
	background: -webkit-linear-gradient(transparent 60%, #ffc926 60%);
	background: -o-linear-gradient(transparent 60%, #ffc926 60%);
	background: linear-gradient(transparent 60%, #ffc926 60%);
}

.line {
	background: linear-gradient(transparent 50%, #ffe4e1 0%);
}

.blue_line {
	font-size:350%;
	font-weight: bold;
	background: linear-gradient(transparent 50%, #c8e7fa 0%);
}

.line2 {
	background: -webkit-linear-gradient(transparent 60%, #ffc926 60%);
	background: -o-linear-gradient(transparent 60%, #ffc926 60%);
	background: linear-gradient(transparent 60%, #ffc926 60%);
}

.lnk a {
	text-decoration: underline;
	color: #3E7CC9;
}
.lnk a:hover {
	text-decoration: none;
}

.btn-wrap .btn {
  display: block;
  border-radius: 30px;
  color: #fff;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.55;
  text-align: center;
  padding: 14px 20px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  position: relative;
}

.btn-wrap .btn.callback {
  background: #00A0E9;
  border: 2px solid #00A0E9;
}

.btn-wrap .btn.order {
  background: #fa436e;
  border: 2px solid #fa436e;
}

.btn-wrap .btn.student {
  background: #ff8a00;
  border: 2px solid #ff8a00;
}

.btn-wrap .btn .icon {
    position: absolute;
	top: 10px;
	left: 30px;
	width: 20px;
}

@media screen and (min-width: 769px) {
  .btn-wrap .btn {
    font-size: 20px;
    padding: 10px;
    min-width: 200px;
    position: relative;
	padding-left: 20px;
  }
  
  .btn-wrap .btn .icon {
    position: absolute;
	top: 5px;
	left: 20px;
	width: auto;
  }
}

.telephone .txt {
	font-size: .857em;
}

.telephone .link-telephone {
	font-weight: 900;
	line-height: 1;
	display: inline-block;
	margin-bottom: 0;
	white-space: nowrap;

}

.telephone .link-telephone a {
	position: relative;
	padding-left: 1em;

}

.telephone .link-telephone a .ico {
	font-size: .775em;
	position: absolute;
	top: .15em;
	left: 0;
	width: 1em;
	height: 1em;
	border-radius: 1em;
	background-color: #00a0e9;

}

.telephone .link-telephone a .ico svg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: .6em;
	margin: auto;
	fill: #fff;

}

.telephone .link-telephone a .txt {
	font-family: 'Questrial', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
	display: inline-block;
	overflow: hidden;
	vertical-align: text-top;
	color: #333;

}

.telephone .link-telephone a .txt .kerning {
	letter-spacing: -.1em;

}

.orange {
  color: #ff6600;
}

.bl {
  font-weight: bold;
}

.mod-qa{
font-family:'Noto Sans JP',sans-serif;
font-size:1.043em;
margin:10px 0;
text-align: left;

}
.mod-qa dd,.mod-qa dt{
position:relative;
margin-bottom:1em;
padding-top:.4em;
padding-bottom:.4em;
padding-left:3.125em;
font-weight: 700;

}
.mod-qa dd:before,.mod-qa dt:before{
font-size:1.275em;
line-height:1.727;
position:absolute;
top:0;
left:0;
width:1.727em;
height:1.727em;
text-align:center;
color:#fff;
border-radius:100px;

}
.mod-qa dt:before{
background:#fa436e;
content:'Ｑ';

}
.mod-qa dd:before{
content:'A';
background:#6accf0;

}

/* --- 共通設定 --- */
.floating-nav {
    position: fixed;
    z-index: 9999;
    display: flex;
}

.nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff !important;
    font-weight: bold;
}

.nav-btn:hover {
    opacity: 0.8;
    color: #fff;
}

/* 各ボタンの色 */
.nav-btn.tel { background-color: #00A0E9; }
.nav-btn.web { background-color: #fa436e; }
.nav-btn.line_contract { background-color: #00cc00; }

/* --- スマホ版のスタイル (767px以下) --- */
@media screen and (max-width: 767px) {
    .floating-nav {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px; /* スマホ時の高さ */
    }

    .nav-btn {
        flex: 1;
        flex-direction: column; /* アイコンと文字を上下に */
        font-size: 11px;
    }

    .nav-btn .icon {
        width: 20px;
        margin-bottom: 10px;
    }
}

/* --- PC版のスタイル (768px以上) --- */
@media screen and (min-width: 768px) {
    .floating-nav {
        /* 配置場所を右下に変更 */
        top: auto;
        bottom: 10px;
        right: 20px;
        left: auto;
        
        /* 縦並びにするための設定 */
        width: 800px; /* ボタンの横幅を固定 */
        gap: 12px;    /* ボタン同士の隙間 */
        background: transparent; /* 背景を透明に */
        box-shadow: none;        /* 外枠の影を消す */
    }

    .nav-btn {
        height: 55px;         /* ボタンの高さ */
        border-radius: 8px;   /* 角を丸くする */
        flex-direction: row;  /* アイコンと文字を横並びに */
        padding: 0 15px;      /* 内側の余白 */
        justify-content: flex-start; /* 左寄せ（中央ならcenter） */
        box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* ボタン単体に影をつける */
    }

    .nav-btn .icon {
        margin-right: 12px;   /* アイコンと文字の間隔 */
        font-size: 30px;
    }

    .nav-btn .label {
        font-size: 24px;      /* 文字サイズ */
    }
    
    .icon {
    	margin-bottom: 15px;
    }
    .icon img {
    	width: 20px;
    }
    
    .nav-btn.line_contract {
    	width: 190px;
    }
    
    .nav-btn.line_contract .icon {
    	margin: 0 10px 15px 50px;
    }
}

@media screen and (max-width: 768px) {
	#reason {
    font-family: "Noto Sans JP", sans-serif;
    padding: 50px 10px 20px;
    background: #fff;
  }
  #reason .title {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
  }
  #reason .title .large {
    font-size: 38px;
  }
  #reason .reason-list li {
    list-style: none;
    margin-bottom: 40px;
  }
  #reason .reason-list li .reason-box {
    width: 100%;
    padding: 10px 0 7px;
    background: #01aded;
    color: #fff;
    border-radius: 4px;
    text-align: center;
  }
  #reason .reason-list li .reason-box .reason-title {
    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;
    gap: 10px;
  }
  #reason .reason-list li .reason-box .reason-title .number {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 24px;
    color: #000;
    width: 32px;
    height: 32px;
    background: #fffd03;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #reason .reason-list li .reason-box .reason-title .type {
    font-size: 16px;
  }
  #reason .reason-list li .reason-box .reason-text {
    font-size: 22px;
    font-weight: bold;
  }
  #reason .reason-list li .reason-box .reason-text .large {
    font-size: 32px;
    margin: 0 5px;
    line-height: 1;
  }
  #reason .reason-list li p {
    line-height: 2;
    padding: 12px 0 0 10%;
  }
  #reason .reason-list li p .blue {
    color: #01aded;
    font-weight: bold;
    position: relative;
  }
  #reason .reason-list li p .blue::before {
    content: url(/img/top/check.png);
    font-weight: 900;
    position: absolute;
    left: -1.5em;
    color: #01aded;
  }
  #reason .reason-list li .image.second {
    margin-top: -41vw;
  }
  #reason .reason-list li .image.third {
    width: 80%;
    margin: auto;
  }
  #reason .reason-list li .btn {
    font-size: 18px;
    font-weight: 500;
	color: #01aded;
    padding: 7px 0;
    border: 1px solid #01aded;
    border-radius: 30px;
    position: relative;
    width: 230px;
    margin: 20px auto 0;
	-webkit-box-shadow: 0 4px 0 0 rgba(51, 51, 51, 0.2);
	box-shadow: 0 4px 0 0 rgba(51, 51, 51, 0.2);
	text-align: center;
  }
  #reason .reason-list li .btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: #01aded;
    border-radius: 50%;
  }
  #reason .reason-list li .btn::before {
    content: "→";
    position: absolute;
    top: 50%;
    right: 22px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    color: #fff;
    font-size: 12px;
    z-index: 1;
  }
  #reason .reason-list li:first-child .box .reason-title .icon {
    width: 40px;
  }
  #reason .reason-list li:nth-child(2) .box .reason-title .icon {
    width: 25px;
  }
  #reason .reason-list li:last-child .box .reason-title .icon {
    width: 24px;
  }
}

@media screen and (min-width: 769px) {
  .min_sp {
  	display: none;
  }
  #reason {
    font-family: "Noto Sans JP", sans-serif;
    padding: 30px;
    background: #fff;
    
  }
  #reason .inner {
    width: 900px;
    margin: 0 auto;
  }
  #reason .title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
  }
  #reason .title .large {
    font-size: 56px;
  }
  #reason .reason-list li {
    list-style: none;
    margin-bottom: 50px;
  }
  #reason .reason-list li .reason-box {
    width: 96%;
    padding: 15px 20px;
    background: #01aded;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #reason .reason-list li .reason-box .reason-title {
    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;
    gap: 10px;
    margin-right: 30px;
  }
  #reason .reason-list li .reason-box .reason-title .number {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 24px;
    color: #000;
    width: 32px;
    height: 32px;
    background: #fffd03;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #reason .reason-list li .reason-box .reason-title .type {
    font-size: 18px;
  }
  #reason .reason-list li .reason-box .reason-text {
    font-size: 26px;
    font-weight: bold;
    margin: 5px 0;
  }
  #reason .reason-list li .reason-box .reason-text .large {
    font-size: 40px;
    margin: 0 4px;
    line-height: 1;
  }
  #reason .reason-list li .reason-content {
    padding: 20px 0 0 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  #reason .reason-list li .reason-content p {
    font-size: 20px;
    line-height: 1.7;
  }
  #reason .reason-list li .reason-content p .blue {
    color: #01aded;
    font-weight: bold;
    position: relative;
  }
  #reason .reason-list li .reason-content p .blue::before {
    content: url(/img/top/check.png);
    font-weight: 900;
    position: absolute;
    left: -1.5em;
    color: #01aded;
  }
  #reason .reason-list li .reason-content .image {
    width: 315px;
  }
  #reason .reason-list li .reason-content .image.second {
    width: 344px;
    margin-top: -80px;
  }
  #reason .reason-list li .reason-content .image.third {
    width: 254px;
  }
  #reason .reason-list li .btn {
    font-size: 18px;
    font-weight: 500;
	color: #01aded;
    padding: 10px 0;
    border: 1px solid #01aded;
    border-radius: 30px;
    position: relative;
    width: 260px;
    margin: 20px auto 0;
    text-align: left;
    padding-left: 60px;
	-webkit-box-shadow: 0 4px 0 0 rgba(51, 51, 51, 0.2);
	box-shadow: 0 4px 0 0 rgba(51, 51, 51, 0.2);
  }
  #reason .reason-list li .btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 45px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: #01aded;
    border-radius: 50%;
  }
  #reason .reason-list li .btn::before {
    content: "→";
    position: absolute;
    top: 50%;
    right: 50px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    color: #fff;
    font-size: 12px;
    z-index: 1;
  }
  #reason .reason-list li:first-child .box .reason-title .icon {
    width: 40px;
  }
  #reason .reason-list li:nth-child(2) .box .reason-title .icon {
    width: 25px;
  }
  #reason .reason-list li:last-child .box .reason-title .icon {
    width: 24px;
  }
}

.instagram-post iframe {
	margin-left: auto!important;
	margin-right: auto!important;
}

/* 隠すための設定 */
.is-hidden {
  display: none;
}

/* ボタンのデザイン（サイトに合わせて調整してください） */
.more-btn-wrap {
  text-align: center;
  margin-top: 20px;
}

.more-btn {
  padding: 10px 40px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.more-btn:hover {
  background-color: #e0e0e0;
}

.cnt {
	text-align: center;
}

.text-slate-400 {
  --tw-text-opacity:1;
  color:rgb(148 163 184 / var(--tw-text-opacity, 1))
}

.plan_info {
    padding-bottom: 4rem;
    padding-left: 1rem;
	padding-right: 1rem;
	/*max-width: 88rem;*/
	margin-left: auto;
	margin-right: auto;
}

.plan_info_title {
	text-align: center;
	margin-bottom: 2rem;
}

@media screen and (max-width: 768px) {
	.plan_info {
		padding: 0;
	}
}

/* --- 2. タブシステム (ロジック) --- */
.tab-system {
    position: relative;
}

/* ラジオボタンは非表示 */
.tab-system input[type="radio"] {
    display: none;
}

/* タブの外枠 */
.tab-wrapper {
    position: relative;
    display: flex;
    background: #ddd;
    padding: 4px;
    border-radius: 100px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
    width: 500px;
    height: 54px;
    align-items: center;
    margin: 0 auto 30px;
}

@media screen and (max-width: 768px) {
	.tab-wrapper {
		width: 100%;
	}
}

.tab-label {
    flex: 1;
    position: relative;
    z-index: 10;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    color: var(--text-sub);
    transition: color 0.3s ease;
    line-height: 54px;
    user-select: none;
}

/* 動く白背景 (インジケーター) */
.selection-bar {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: var(--white);
    border-radius: 100px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.5s var(--easing);
    z-index: 5;
}

/* --- 3. 切り替えアクション --- */
/* 学生選択時 */
#tab-gakusei:checked ~ .tab-wrapper .selection-bar { transform: translateX(0); }
#tab-gakusei:checked ~ .tab-wrapper label[for="tab-gakusei"] { color: blue; background: #fff; border-radius: 30px; }
#tab-gakusei:checked ~ .content-group #content-gakusei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ★追加：学生の5枚目のカードを中央へ */
#content-gakusei .card:nth-child(5) {
    grid-column: 1 / -1; /* 2列分ぶち抜き */
    justify-self: center; /* 横方向中央 */
    width: calc(100% - 40px); /* 他のカードと余白感を合わせる */
    max-width: 800px; /* 必要に応じて上のカードと幅を揃える（任意） */
}

@media screen and (max-width: 768px) {
	#tab-gakusei:checked ~ .content-group #content-gakusei { display: block; }
	
	#content-gakusei .card:nth-child(5) {
		display: block;
	    width: 100%;
	}
}

/* 社会人選択時 */
#tab-ippan:checked ~ .tab-wrapper .selection-bar { transform: translateX(100%); }
#tab-ippan:checked ~ .tab-wrapper label[for="tab-ippan"] { color: blue; background: #fff; border-radius: 30px; }
#tab-ippan:checked ~ .content-group #content-ippan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ★追加：社会人の5枚目のカードを中央へ */
#content-ippan .card:nth-child(5) {
    grid-column: 1 / -1; /* 2列分ぶち抜き */
    justify-self: center; /* 横方向中央 */
    width: calc(100% - 40px); /* 他のカードと余白感を合わせる */
    max-width: 800px; /* 必要に応じて上のカードと幅を揃える（任意） */
}

@media screen and (max-width: 768px) {
	#tab-ippan:checked ~ .content-group #content-ippan { display: block; }
	
	#content-ippan .card:nth-child(5) {
		display: block;
	    width: 100%;
	}
}

/* --- 4. コンテンツ表示 --- */
.tab-content {
    display: none; /* 初期状態は非表示 */
    animation: slideUp 0.5s var(--transition) forwards;
}

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

/* --- 5. カードデザイン (マガジンスタイル) --- */
.card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
    margin: 20px;
}

@media screen and (max-width: 768px) {
	.card {
		margin: 20px 0;
	}
}

.card-image-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #eef2f3 0%, #8e9eab 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.card-image-placeholder::after {
    content: "SMART DRIVER SCHOOL";
    font-weight: 900;
    font-style: italic;
    color: rgba(255,255,255,0.4);
    font-size: 1.2rem;
    letter-spacing: 0.1em;
}

.card-body {
    padding: 30px;
}

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

.plan-date { color: #7F8C8D; font-weight: 600; }

.badge {
    background: #27AE60;
    color: white;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.card-title {
    margin: 0 0 12px 0;
    line-height: 1.3;
    font-weight: 800;
}

.card-text {
    line-height: 1.7;
    margin-bottom: 25px;
}

/* 特典エリア */
.benefit-box {
    background: var(--primary-blue);
    background: linear-gradient(135deg, #0054A6 0%, #0072FF 100%);
    color: white;
    padding: 20px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.benefit-label { opacity: 0.9; font-weight: 600; }

.benefit-value {
	font-size: 4rem;
    font-weight: 900;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

@media screen and (max-width: 768px) {
	.benefit-value {
		font-size: 3rem;
	}
}

.benefit-value span {
  font-size: 1.5rem;
}

.benefit-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.2);
    display: flex;
    justify-content: space-between;
}

/* 問い合わせリスト */
.contact-list {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #F0F3F5;
    list-style: none;
    padding-left: 0;
}

.contact-list li {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.contact-list li b { color: #7F8C8D; font-weight: 500; }

/* 各アコーディオン項目（カード型） */
.date-accordion-item {
  background: #fff;
  border: 1px solid #d1dce7;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

/* 展開時の枠線を強調 */
.date-accordion-item[open] {
  border: 1px solid #004ea2;
}

/* ヘッダー部分のリセットと調整 */
.date-accordion-header {
  list-style: none; /* デフォルトの矢印を消す */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  cursor: pointer;
  background-color: #eff5fa;
}

.date-accordion-header::-webkit-details-marker {
  display: none; /* iOS/Safari用の矢印消し */
}

.month-label {
  font-weight: bold;
  color: #333333;
}

/* アイコン（＋/－） */
.date-icon-wrap {
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #d1dce7;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0; /* アイコンが潰れるのを防ぐ */
}

.date-icon::before, .date-icon::after {
  content: "";
  position: absolute;
  background: #004ea2;
  transition: transform 0.3s ease;
}

.date-icon::before { width: 12px; height: 2px; } /* 横線 */
.date-icon::after { width: 2px; height: 12px; }  /* 縦線 */

/* 開閉時のアイコン変化 */
.date-accordion-item[open] .date-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* コンテンツ内部 */
.date-accordion-content {
  padding: 20px;
  border-top: 1px solid #d1dce7;
  background-color: #fff;
}

/* 日付グリッド（スマホ2列） */
.date-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.date-card {
  padding: 15px 10px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid #edf2f7;
}

.date-card.sat { background-color: #f0f7ff; border-color: #d0e3ff; }
.date-card.sun { background-color: #fff5f5; border-color: #ffdada; }

.day-num {
  font-weight: 800;
  line-height: 1;
  font-size: 32px;
}

.day-text {
  font-weight: bold;
  margin-left: 2px;
}

.date-card.sat .day-num, .date-card.sat .day-text { color: #007aff; }
.date-card.sun .day-num, .date-card.sun .day-text { color: #ff3b30; }

/* ステータスバッジ：修正ポイント */
.status-badge {
  display: block;
  margin-top: 8px;
  font-weight: bold;
}

.status-badge.available { 
  color: #333333; /* 文字色を黒に修正 */
}

.status-badge.alert { 
  color: #ef6c00; 
}

.status-badge.soldout { 
  color: #999; 
  text-decoration: line-through; 
}

.bg-blue {
  background-color: rgb(239 246 255);
}

.bg-blue .card-title {
  color: rgb(30 58 138);
}

.bg-blue .card-text {
  color: rgb(30 64 175);
}

.bg-green {
  background-color: rgb(236 253 245);
}

.bg-green .card-title {
  color: rgb(6 78 59);
}

.bg-green .card-text {
  color: rgb(6 78 59 / 0.8);
}

.bg-orange {
  background-color: rgb(255 247 237);
}

.bg-orange .card-title {
  color: rgb(124 45 18);
}

.bg-orange .card-text {
  color: rgb(154 52 18);
}

.bg-pink {
  background-color: rgb(255 241 242);
  position: relative;
}

.bg-pink .card-title {
  color: rgb(136 19 55);
}

.bg-pink .card-text {
  color: rgb(159 18 57);
}

.card-no1 {
  position: absolute;
  background-color: rgb(250 204 21);
  padding-left: 2rem;
  padding-right: 2rem;
  color: rgb(113 63 18);
  right: -30px;
  rotate: 45deg;
  top: 18px;
}

.marker-highlight {
  background: linear-gradient(transparent 60%, rgba(255, 255, 255, 0.7) 60%);
  display: inline-block;
}

@media screen and (max-width: 768px) {
	.marker-highlight {
	  background: none;
	}
}

.card-schedule {
  background-color: rgba(255, 255, 255, 0.6);
  padding: 1rem;
  border-radius: 1rem;
  margin-bottom: 3rem;
}

.card-schedule-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 768px) {
	.card-schedule-info {
		font-size: 9px;
	}
}

.card-schedule-icon {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
}

.bg-blue .card-schedule .card-schedule-info .card-schedule-badge {
  color: rgb(30 58 138);
}

.bg-blue .card-schedule .card-schedule-info .card-schedule-aki {
  color: rgb(29 78 216);
  background-color: rgb(219 234 254);
  border-radius: 9999px;
  padding: 0 10px;
}

.bg-green .card-schedule .card-schedule-info .card-schedule-badge {
  color: rgb(6 78 59);
}

.bg-green .card-schedule .card-schedule-info .card-schedule-aki {
  color: rgb(4 120 87);
  background-color: rgb(209 250 229);
  border-radius: 9999px;
  padding: 0 10px;
}

.bg-orange .card-schedule .card-schedule-info .card-schedule-badge {
  color: rgb(124 45 18);
}

.bg-orange .card-schedule .card-schedule-info .card-schedule-aki {
  color: rgb(194 65 12);
  background-color: rgb(255 237 213);
  border-radius: 9999px;
  padding: 0 10px;
}

.bg-pink .card-schedule .card-schedule-info .card-schedule-badge {
  color: rgb(136 19 55);
}

.bg-pink .card-schedule .card-schedule-info .card-schedule-aki {
  color: rgb(190 18 60);
  background-color: rgb(255 228 230);
  border-radius: 9999px;
  padding: 0 10px;
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding-top: 20px;
  text-align: center;
}

.schedule-blue {
  color: rgb(96 165 250);
}

.schedule-green {
  color: rgb(52 211 153);
}

.schedule-orange {
  color: rgb(251 146 60);
}

.schedule-pink {
  color: rgb(251 113 133);
}

.text-gray-400 {
  color: rgb(156 163 175);
}

.schedule-waku {
  background-color: rgb(243 244 246);
  border-radius: 0.5rem;
}

.schedule-waku-blue {
  color: rgb(255 255 255);
  background-color: rgb(59 130 246);
  border-radius: 0.5rem;
}

.schedule-waku-green {
  color: rgb(255 255 255);
  background-color: rgb(16 185 129);
  border-radius: 0.5rem;
}

.schedule-waku-orange {
  color: rgb(255 255 255);
  background-color: rgb(249 115 22);
  border-radius: 0.5rem;
}

.schedule-waku-pink {
  color: rgb(255 255 255);
  background-color: rgb(244 63 94);
  border-radius: 0.5rem;
}

.card-order-box {
  padding: 20px 0 !important;
}

.card-order-box.detail {
  padding-top: 0 !important;
}

.card-order {
  background-color: rgb(15 23 42);
  color: rgb(255 255 255);
  border-radius: 0.75rem;
  width: 100%;
  font-size: 20px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.card-order-box.detail .card-order {
  background-color: #ffab33;
}

.card-order span {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
}

.card-note {
  padding: 20px 0;
  width: 50%;
  margin: 0 auto;
  color: rgb(148 163 184);
  text-align: center;
}

.card-note span {
  color: rgb(17 24 39);
}

@media screen and (max-width: 768px) {
	.card-note {
		width: 98%;
	}
}

.card-date {
  padding: 20px 0;
  width: 50%;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
	.card-date {
		width: 98%;
	}
}

.panel {
	margin: 1em auto;
	padding: 1em 1.5em 1px;
	background: #f6f4e8;
}