/**
 * ファーストビューセクション
 * - 背景色はクリーム色(var(--sub-color))
 * - 左右の要素を横並びに配置
 */
.firstview {
  background-color: var(--sub-color);
  padding: 40px 0;
  width: 100%;
}

.firstview__inner {
  max-width: 1400px;
  /* 1200pxから1400pxに拡大 */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 20px;
}

/* 画像エリア（左側） */
.firstview__image {
  width: 55%;
  /* 50%から55%に拡大して画像をより大きく */
  position: relative;
  margin-right: 40px;
  display: flex;
}

.firstview__image::before {
  content: "";
  padding-bottom: 75%;
  /* 4:3のアスペクト比に変更（800x600の画像に合わせる） */
  display: block;
  width: 0;
}

.firstview__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* containからcoverに戻して、画像全体を表示 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* キャッチコピーエリア（画像左下） */
.firstview__caption {
  position: absolute;
  left: 0;
  padding: 25px 35px;
  max-width: 90%;
  background-color: transparent !important;
  z-index: 2;
}

.firstview__heading {
  font-family: 'UD Digi Kyokasho NP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  font-size: clamp(24px, 5vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  color: #333 !important;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8);
}

.firstview__text {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  color: #333;
}

/* ボタンエリア（右側） */
.firstview__content {
  width: 40%;
  /* 45%から40%に縮小して画像エリアを確保 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main-services {
  display: flex;
  justify-content: space-between;
  gap: clamp(15px, 2vw, 20px);
  margin-bottom: 15px;
  width: 100%;
}

.main-service-button {
  flex: 1;
  display: block;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
  /* flexアイテムが親要素を超えないように */
}

.main-service-button:hover {
  transform: translateY(3px);
}

.main-service-button__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  padding: clamp(20px, 2.5vw, 25px) clamp(15px, 2vw, 20px);
  box-shadow: 0 8px 0 var(--main-color);
  height: 100%;
  text-align: center;
  min-height: clamp(180px, 25vw, 200px);
  box-sizing: border-box;
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-service-button:hover .main-service-button__inner {
  box-shadow: 0 5px 0 var(--main-color);
}

.main-service-button__icon {
  margin-bottom: clamp(10px, 1.5vw, 15px);
  width: clamp(75px, 10vw, 90px);
  height: clamp(75px, 10vw, 90px);
  flex-shrink: 0;
}

.main-service-button__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-service-button__text {
  width: 100%;
}

.main-service-button__title {
  font-size: clamp(1.5rem, 2.5vw, 1.7rem);
  font-weight: 700;
  margin: 0 0 clamp(8px, 1vw, 10px);
  color: #000;
}

.main-service-button__description {
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  color: #333;
}

/* レスポンシブ改行制御 */
.main-service-button__description .break-sp {
  display: inline;
}

.main-service-button__description .break-pc {
  display: none;
}

.main-service-button__description .break-pc-only {
  display: inline;
}

/* サービス説明セクション */
.service-description {
  padding: 60px 0;
  background: var(--section-bg-color);
}

.service-description__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.service-description__text {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #333;
  margin: 0;
  text-align: left;
  max-width: 800px;
  margin: 0 auto;
}


/**
 * サブサービスボタン群
 * - 縦に並ぶボタン
 */
.sub-services {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 15px);
  padding-top: clamp(8px, 1vw, 10px);
  margin-top: clamp(8px, 1vw, 10px);
  width: 100%;
}



/* 箱型コンテンツセクション
-----------------------------------------*/
.boxed-content {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}

.boxed-content__title-wrapper {
  text-align: center;
  margin-bottom: 30px;
}

.boxed-content__container {
  max-width: 900px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 40px 20px;
  position: relative;
  border: 15px solid var(--main-color);
  outline: 5px solid white;
  outline-offset: -10px;
  box-sizing: border-box;
}

.boxed-content__main {
  color: #333;
  font-size: 1rem;
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto;
}

.boxed-content__main p {
  margin-bottom: 1em;
}

.boxed-content__main a {
  color: var(--main-color);
  text-decoration: underline;
}

.boxed-content__main a:hover {
  text-decoration: none;
}


.boxed-content__leaf-icon {
  position: absolute;
  bottom: clamp(-50px, -8vw, -90px);
  /* 画面サイズに応じて調整 */
  right: clamp(-30px, -5vw, -60px);
  /* 画面サイズに応じて調整 */
  width: clamp(80px, 12vw, 150px);
  /* 画面サイズに応じてサイズを調整 */
  height: auto;
  z-index: 10;
  pointer-events: none;
  /* アイコンがリンクやボタンの邪魔にならないように */
}

.boxed-content__leaf-icon img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  /* はみ出し防止 */
}

/* スマートフォンサイズでの調整 */
@media (max-width: 480px) {
  .boxed-content__leaf-icon {
    bottom: -40px;
    right: -20px;
    width: 60px;
  }

  .firstview__caption {
    padding: 15px 20px;
  }
}

/* お知らせセクション特有のスタイル (news-section) */
.news-section {
  padding: 40px 15px;
}

.news-section .news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-section .news-list__item {
  padding: 15px 0;
  border-bottom: 1px dotted #ccc;
  display: flex;
  align-items: baseline;
  gap: 15px;
  justify-content: flex-start;
}

.news-section .news-list__item:last-child {
  border-bottom: none;
}

.news-section .news-list__date-unit {
  font-size: 0.8em;
}

.news-section .news-list__title {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0;
  color: #333;
  flex: 1;
}

.news-section .news-list__date {
  font-size: 0.9rem;
  color: #555;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 90px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .news-section .news-list__item {
    display: block;
    padding: 12px 0;
  }

  .news-section .news-list__date {
    display: block;
    margin-bottom: 5px;
    font-size: 0.85rem;
    color: #666;
  }

  .news-section .news-list__title {
    display: block;
    font-size: 1rem;
    line-height: 1.4;
  }
}

/* ===============================================
// index.php (運営者のご紹介セクション)
// =============================================== */
.operator-section {
  padding: 80px 20px;
  background-color: var(--section-background-color);
  /* #F4FBF9; から変更 */
  /* Figma指定のクリーム色 */
}

.operator-section__inner {
  max-width: 1000px;
  /* Figmaのデザイン幅を参考に調整 */
  margin: 0 auto;
}

/* 運営者紹介セクション共通のタイトルラッパー (section-title-wrapper流用) */
.operator-section .section-title-wrapper {
  text-align: center;
  margin-bottom: 50px;
  margin-top: 50px;
}

.operator-section .section-title {
  color: #333;
  /* Figma指定 #EMJTMT */
  /* 必要であればオレンジのアクセント線を疑似要素で追加 */
}

.operator-section__profile {
  display: flex;
  gap: 4%;
  /* 画像とテキストの間隔を %指定に変更 */
  margin-bottom: 20px;
  align-items: flex-start;
}

.operator-section__profile-image {
  flex-basis: 48%;
  /* 幅の基準を48%に */
  /* max-width: 350px; をコメントアウトまたは削除 */
}

.operator-section__profile-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* Figma指定 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.operator-section__profile-text {
  flex-basis: 48%;
  /* 幅の基準を48%に */
}

.operator-section__profile-identity {
  margin-bottom: 30px;
  /* 詳細情報との間隔 */
  text-align: center;
}

.operator-section__org-name,
.operator-section__representative-info {
  font-size: 2rem;
  /* 32px相当 */
  font-weight: 400;
  /* Regular */
  color: #333;
  line-height: 1.4;
  /* 適宜調整 */
  margin: 0;
}

.operator-section__org-name {
  margin-bottom: 10px;
  /* 代表者情報との間隔 */
}

.operator-section__org-name rt {
  /* 事業所名フリガナ */
  font-size: 0.625em;
  /* 親(2rem)に対して20px相当 (20/32 = 0.625) */
  font-weight: 400;
  /* Regular */
  color: #555;
  /* 少し薄めに */
}

.operator-section__representative-info .operator-section__job-title {
  margin-right: 0.5em;
  /* 肩書きと氏名の間隔 */
  color: #333;
}

.operator-section__representative-info .operator-section__name-kana {
  font-size: 0.625em;
  /* 親(2rem)に対して。Figmaの20pxより少し大きめ、本文24pxよりは小さく */
  font-weight: 400;
  color: #555;
  margin-left: 0.25em;
}

/* 詳細項目全体のコンテナ */
.operator-section__profile-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* 各詳細項目間のスペース (Figmaの見た目から調整) */
  /* 既存の p, ul, h4 の直接の子としてのスタイル指定は、新しい構造に移管するため、
     ここでの個別スタイルは削除またはコメントアウトを検討 */
}

/* 各詳細項目 (アクセントバー + コンテンツ) */
.profile-detail-item {
  display: flex;
  align-items: flex-start;
  /* 上揃え */
}

.profile-detail-item--history {
  margin-bottom: 20px;
}

.profile-detail-item--license {
  margin-bottom: 60px;
}

.profile-detail-item__accent-bar {
  width: 8px;
  background-color: #E46C5A;
  /* var(--main-color) から #E46C5A に変更 */
  margin-right: 15px;
  align-self: stretch;
  /* 親要素の高さに合わせる (内容が少ない場合に効果) */
  /* 高さが足りない場合は min-height を指定することも検討 */
}

.profile-detail-item__content {
  flex: 1;
}

/* 詳細項目のタイトル (旧 h4) */
.profile-detail-item__title {
  font-size: 1.3rem;
  /* 24px相当 */
  font-weight: 700;
  /* Bold */
  color: #E46C5A;
  /* 緑色から #E46C5A に変更 */
  margin: 0 0 15px 0;
  /* 下のマージンをFigmaに合わせて調整 */
  /* border-bottom, padding-bottom はデザインにないので削除 */
}

/* 詳細項目の内容テキスト (p, ul) */
.profile-detail-item__content p,
.profile-detail-item__content ul {
  font-size: 1.5rem;
  /* 24px相当 */
  font-weight: 400;
  /* Regular */
  color: #333;
  line-height: 1.6;
  /* 160% */
  margin: 0;
  /* .profile-detail-item__title がマージンを持つため、ここでは0に */
}

.profile-detail-item__content ul {
  list-style: disc;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.operator-section__profile-details strong {
  font-weight: 700;
}

.profile-detail-item--history ul {
  padding-left: 0;
}



/* レスポンシブ対応 */
@media screen and (max-width: 1040px) {
  .boxed-content {
    max-width: 100%;
  }

  .boxed-content__container {
    padding: 30px 15px;
  }
}

@media screen and (max-width: 768px) {
  .boxed-content__leaf-icon {
    width: 100px;
    bottom: -70px;
    right: -15px;
  }

  .boxed-content__title {
    font-size: 1.8rem;
  }

  .operator-section {
    padding: 40px 15px;
  }

  .operator-section__profile {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .operator-section__profile-image {
    max-width: 80%;
    margin-bottom: 20px;
  }

  /* .operator-section__profile-name は新しいクラスに置き換えられたため削除 */
  .operator-section__org-name,
  .operator-section__representative-info {
    font-size: 1.75rem;
    /* レスポンシブ時のサイズ調整 */
    text-align: center;
  }

  .operator-section__profile-details {
    font-size: 0.95rem;
  }
}

/* レスポンシブ対応（スマホ表示） */
@media (max-width: 1080px) {
  .firstview__inner {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .firstview__image {
    width: 100%;
    max-width: 800px;
    margin-right: 0;
  }

  .firstview__content {
    margin: 0 auto;
    width: 80%;
  }

  .main-services {
    margin-bottom: 0;
  }

  .main-service-button__inner {
    flex-direction: row;
    text-align: left;
    padding: 15px 20px;
    align-items: center;
    min-height: auto;
    box-shadow: 0 5px 0 var(--main-color);
    gap: 12px;
  }

  .main-service-button__icon {
    margin-bottom: 0;
  }

  .main-service-button__title {
    font-size: 1.1rem;
    margin-bottom: 4px;
  }

  .main-service-button__description {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  /* タブレットサイズでの改行制御 */
  .main-service-button__description .break-sp {
    display: none;
  }

  .main-service-button__description .break-pc {
    display: inline;
  }

  .main-service-button__description .break-pc-only {
    display: inline;
  }

  .sub-services {
    gap: 15px;
  }

  /* 運営者紹介セクションのレスポンシブ対応 */
  .operator-section__profile {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .operator-section__profile-image {
    flex-basis: auto;
    width: 100%;
    max-width: 500px;
  }

  .operator-section__profile-text {
    flex-basis: auto;
    width: 100%;
    max-width: 600px;
  }

  .operator-section__org-name {
    text-align: center;
  }

  .profile-detail-item--history,
  .profile-detail-item--license {
    max-width: 600px;
    margin: 20px auto;
  }

  .profile-detail-item--license {
    margin-bottom: 60px;
  }
}

@media (max-width: 768px) {
  .operator-section__profile {
    gap: 30px;
  }

  .operator-section__profile-image {
    max-width: 100%;
  }

  .operator-section__profile-text {
    max-width: 100%;
  }

  .firstview__content {
    width: 100%;
  }

  .profile-detail-item--history,
  .profile-detail-item--license {
    max-width: 100%;
    margin: 20px auto;
  }

  .profile-detail-item--license {
    margin-bottom: 60px;
  }
}

@media (max-width: 480px) {
  .main-service-button__inner {
    padding: 12px 15px;
  }

  .main-service-button__icon {
    width: 40px;
    height: 40px;
  }

  .main-service-button__title {
    font-size: 1rem;
  }

  .main-service-button__description {
    font-size: 0.85rem;
  }

  /* スマートフォンサイズでの改行制御 */
  .main-service-button__description .break-sp {
    display: none;
  }

  .main-service-button__description .break-pc {
    display: inline;
  }

  .main-service-button__description .break-pc-only {
    display: inline;
  }
}

.service-use-cases__title {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin: 0 10px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.service-use-cases__title-icon {
  width: 32px;
  height: 32px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .service-use-cases__title {
    font-size: 1.8rem;
    display: inline;
    line-height: 1.4;
  }

  .service-use-cases__title-icon {
    width: 28px;
    height: 28px;
  }

  .profile-detail-item__content p,
  .profile-detail-item__content ul {
    font-size: 1.3rem;
  }

  .profile-detail-item__title {
    font-size: 1.2rem;
  }

}

@media (max-width: 480px) {
  .service-use-cases__title {
    font-size: 1.2rem;
  }

  .service-use-cases__title-icon {
    width: 24px;
    height: 24px;
    vertical-align: top;
  }
}