@charset "UTF-8";

/* --- ページ全体をまとめるための設定 --- */
.my-care-taxi-page {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #F2E7D0;
  overflow: hidden;
  padding-bottom: 50px;
}

/* --- 文字サイズ設定 --- */
.my-care-taxi-page h1 {
  font-size: 24px !important;
  color: #333333;
}
.my-care-taxi-page h2 {
  font-size: 26px !important;
  color: #333333;
}
.my-care-taxi-page h3,
.my-care-taxi-page h4 {
  font-size: 26px !important;
  line-height: 1.6;
  color: #333333;
}
.my-care-taxi-page p {
  font-size: 20px !important;
  line-height: 1.6;
  color: #333333;
}

/* --- 大見出し（big-title）を幅100%表示に --- */
.my-care-taxi-page .big-title h2 {
  width: 100%;
  box-sizing: border-box;
  display: block;
}

/* --- セクションごとに下の余白を確保 --- */
.my-care-taxi-page .second-section,
.my-care-taxi-page .third-section,
.my-care-taxi-page .fourth-section,
.my-care-taxi-page .fifth-section {
  margin-bottom: 120px;
}

/* --- スマホ時のレイアウト調整 --- */
@media screen and (max-width: 768px) {
  .my-care-taxi-page h1 {
    font-size: 19px !important;
  }
  .my-care-taxi-page h2 {
    font-size: 24px !important;
  }
  .my-care-taxi-page h3,
  .my-care-taxi-page h4 {
    font-size: 20px !important;
  }
  .my-care-taxi-page .big-title h2,
  .my-care-taxi-page .small-title,
  .my-care-taxi-page .features-info,
  .my-care-taxi-page .business-are-text,
  .my-care-taxi-page .features-text {
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 20px !important;
    line-height: 1.8;
    word-wrap: break-word;
    text-align: center;
  }
  .my-care-taxi-page .first-section, 
  .my-care-taxi-page .second-section, 
  .my-care-taxi-page .third-section, 
  .my-care-taxi-page .fourth-section, 
  .my-care-taxi-page .fifth-section {
    padding-left: 0;
    padding-right: 0;
  }
  /* 民間救急マーク・お問い合わせ写真（スマホ用）を中央寄せ */
  .my-care-taxi-page .private-emergency-sp,
  .my-care-taxi-page .contact-photo-sp {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  /* FAQ画像（スマホ用）も他の要素と同じ幅・中央寄せに揃える */
  .my-care-taxi-page .faq-photo-sp {
    width: 90% !important;
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* LINE案内エリアはスマホでは縦積みに */
  .my-care-taxi-page .contact-flex {
    flex-direction: column;
  }
  /* 問い合わせフロー図（スマホ用）も他の要素と同じ幅・中央寄せに揃える */
  .my-care-taxi-page .contact-flow-sp {
    width: 90% !important;
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* --- コンテンツエリア設定 --- */
.my-care-taxi-page .top-photo {
  display: block;
  width: 100%;
  height: auto;
}

.my-care-taxi-page .service-elements {
  display: flex;
  column-gap: 60px;
  margin-top: 50px;
}
@media screen and (max-width: 768px) {
  .my-care-taxi-page .service-elements {
    display: block;
  }
}

/* --- features-elements：横並び50%/50%表示・縦幅を揃える --- */
.my-care-taxi-page .features-elements {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  column-gap: 40px;
  padding: 50px 0;
}

/* テキスト側：上端はブラウザ標準余白をリセットして画像上端と揃える */
.my-care-taxi-page .features-elements .features-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}

.my-care-taxi-page .features-elements .features-text h2,
.my-care-taxi-page .features-elements .features-text h3.features-info {
  margin-top: 0;
}

/* ボタン側：下端の余白を無くして画像下端と揃える */
.my-care-taxi-page .features-elements .features-text .bt-more-care-taxi {
  margin-top: auto;
  margin-bottom: 0;
}

.my-care-taxi-page .features-elements img[class^="features-photo-"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (max-width: 768px) {
  .my-care-taxi-page .features-elements {
    display: block;
  }
  .my-care-taxi-page .features-elements .features-text {
    height: auto;
  }
  .my-care-taxi-page .features-elements .features-text .bt-more-care-taxi {
    margin-top: 35px;
    margin-bottom: 35px;
  }
  .my-care-taxi-page .features-elements img[class^="features-photo-"] {
    height: auto;
    object-fit: initial;
  }
}

/* --- support-elements：3列横並び表示 --- */
.my-care-taxi-page .support-elements {
  display: flex;
  column-gap: 40px;
  align-items: flex-start;
  padding: 30px 0;
}

.my-care-taxi-page .support-contents {
  flex: 1 1 0;
}

.my-care-taxi-page .support-contents img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (max-width: 768px) {
  .my-care-taxi-page .support-elements {
    display: block;
  }
  .my-care-taxi-page .support-contents {
    margin-bottom: 40px;
  }
}

/* --- PC/スマホで画像を出し分け --- */
@media screen and (min-width: 769px) {
  .my-care-taxi-page img[class$="-sp"] {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .my-care-taxi-page .features-photo-01,
  .my-care-taxi-page .features-photo-02,
  .my-care-taxi-page .private-emergency,
  .my-care-taxi-page .contact-photo,
  .my-care-taxi-page .faq-photo,
  .my-care-taxi-page .contact-flow {
    display: none !important;
  }
}

/* --- ボタン：セクション幅に応じて伸縮・文字サイズ・色をトップページのボタンに合わせて統一 --- */
.my-care-taxi-page .bt-more-service,
.my-care-taxi-page .bt-more-care-taxi,
.my-care-taxi-page .bt-more-contact {
  background-color: #9B1B30;
  color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  display: block;
  margin: 35px auto;
  width: 90%;
  box-sizing: border-box;
  text-decoration: none;
  font-size: 19px !important;
}

@media screen and (max-width: 768px) {
  .my-care-taxi-page .bt-more-service,
  .my-care-taxi-page .bt-more-care-taxi,
  .my-care-taxi-page .bt-more-contact {
    width: 90%;
  }
}

/* --- 遷移先ページ未整備のため、一旦非表示（contact） --- */
.my-care-taxi-page .bt-more-care-taxi,
.my-care-taxi-page .bt-more-contact {
  display: none !important;
}

/* 「車両・器材のご案内」ボタンだけ再表示 */
.my-care-taxi-page .bt-more-care-taxi-01 {
  display: block !important;
}
@media screen and (max-width: 768px) {
  .my-care-taxi-page .bt-more-care-taxi-01 {
    display: block !important;
  }
}

/* 「利用料金のご案内」ボタンだけ再表示 */
.my-care-taxi-page .bt-more-care-taxi-02 {
  display: block !important;
}
@media screen and (max-width: 768px) {
  .my-care-taxi-page .bt-more-care-taxi-02 {
    display: block !important;
  }
}

/* 「よくあるご質問はこちら」ボタンだけ再表示 */
.my-care-taxi-page .bt-more-care-taxi-03 {
  display: block !important;
}
@media screen and (max-width: 768px) {
  .my-care-taxi-page .bt-more-care-taxi-03 {
    display: block !important;
  }
}

/* 「ご相談・お申し込み」ボタンだけ再表示 */
.my-care-taxi-page .bt-more-contact-main {
  display: block !important;
}
@media screen and (max-width: 768px) {
  .my-care-taxi-page .bt-more-contact-main {
    display: block !important;
  }
}

/* --- 固定SNSアイコン --- */
.my-care-taxi-page .icon-line,
.my-care-taxi-page .icon_instagram {
  position: fixed;
  z-index: 999;
}

/* LINEアイコン */
.my-care-taxi-page .icon-line {
  top: 300px;
  right: 20px;
  width: 200px;
}

/* Instagramアイコン */
.my-care-taxi-page .icon_instagram {
  top: 460px;
  right: -80px;
  width: 400px;
}

/* スマホ用の調整：Instagram画像は余白が多いためLINEの約2倍の幅にして見た目を揃える */
@media screen and (max-width: 768px) {
  .my-care-taxi-page .icon-line {
    right: 10px;
    width: 60px;
    top: 350px;
  }
  .my-care-taxi-page .icon_instagram {
    right: -23px;
    width: 120px;
    top: 400px;
  }
}

/* --- 車両・器材ページ専用スタイル --- */
.my-care-taxi-page .care-taxi-photo {
  width: 100%;
  height: auto;
  display: block;
  margin: 20px 0;
  border-radius: 8px;
}

.my-care-taxi-page #taxi-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.my-care-taxi-page #taxi-table .tableheader {
  background-color: #9B1B30;
  color: #ffffff;
  padding: 12px;
  text-align: left;
  width: 30%;
  border: 1px solid #ddd;
  font-size: 20px !important;
  line-height: 1.6;
}

.my-care-taxi-page #taxi-table .cell {
  padding: 12px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  font-size: 20px !important;
  line-height: 1.6;
}

.my-care-taxi-page .taxi-photo-elements,
.my-care-taxi-page .equipment-elements {
  display: flex;
  column-gap: 20px;
  margin: 20px 0 40px;
}

.my-care-taxi-page .taxi-photo-elements img,
.my-care-taxi-page .equipment-elements img {
  width: 33.33%;
  height: auto;
  display: block;
}

@media screen and (max-width: 768px) {
  .my-care-taxi-page #taxi-table .tableheader,
  .my-care-taxi-page #taxi-table .cell {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .my-care-taxi-page .taxi-photo-elements,
  .my-care-taxi-page .equipment-elements {
    flex-direction: column;
  }
  .my-care-taxi-page .taxi-photo-elements img,
  .my-care-taxi-page .equipment-elements img {
    width: 100%;
    margin-bottom: 15px;
  }
}

/* お気軽にご連絡ください：写真をコンテナ幅いっぱいに */
.my-care-taxi-page .contact-photo {
  width: 100%;
  height: auto;
  display: block;
}

/* 民間救急マーク（PC用）もコンテナ幅いっぱいに揃える */
.my-care-taxi-page .private-emergency {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 利用料金ページ専用スタイル：均等割りしてテーブル幅と右端を揃える --- */
.my-care-taxi-page .price-photo-elements {
  display: flex;
  column-gap: 20px;
  margin: 20px 0 40px;
}

.my-care-taxi-page .price-photo-elements img {
  flex: 1 1 0;
  width: 0;
  height: 320px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

@media screen and (max-width: 768px) {
  .my-care-taxi-page .price-photo-elements {
    flex-direction: column;
    row-gap: 15px;
  }
  .my-care-taxi-page .price-photo-elements img {
    width: 100%;
    height: 220px;
  }
}

/* --- 動画埋め込み：レスポンシブ対応 --- */
.my-care-taxi-page .video-wrapper {
  max-width: 360px;
  margin: 20px auto 40px;
}

.my-care-taxi-page .video-wrapper iframe {
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  display: block;
}

/* --- よくあるご質問ページ専用スタイル --- */
.my-care-taxi-page .faq-photo,
.my-care-taxi-page .faq-photo-sp {
  width: 100%;
  height: auto;
  display: block;
  margin: 20px 0;
  border-radius: 8px;
}

/* --- ご相談・お申し込みページ専用スタイル --- */
.my-care-taxi-page .counseling-photo {
  width: 100%;
  height: auto;
  display: block;
  margin: 20px 0;
  border-radius: 8px;
}

/* LINE案内エリア：2つのブロックを横並びに */
.my-care-taxi-page .contact-flex {
  display: flex;
  column-gap: 40px;
  align-items: flex-start;
  margin: 20px 0 40px;
}

.my-care-taxi-page .contact-flex-left,
.my-care-taxi-page .contact-flex-right {
  flex: 1 1 0;
  text-align: center;
}

.my-care-taxi-page .contact-flex-left h4,
.my-care-taxi-page .contact-flex-right h4 {
  margin-bottom: 15px;
}

/* 問い合わせフロー図（PC用）もコンテナ幅いっぱいに揃える */
.my-care-taxi-page .contact-flow {
  width: 100%;
  height: auto;
  display: block;
  margin: 20px 0;
  border-radius: 8px;
}

/* 注意書き：赤枠・赤背景で強調 */
.my-care-taxi-page .contact-warning {
  background-color: #FBE9E9;
  border: 2px solid #B22222;
  border-radius: 8px;
  padding: 20px;
  margin: 30px 0;
}

.my-care-taxi-page .contact-warning .warning-text {
  color: #B22222;
  margin: 0;
  font-size: 20px !important;
}

/* 「必須」ラベル：赤塗りつぶし・白文字 */
.my-care-taxi-page .contact-span {
  display: inline-block;
  background-color: #B22222;
  color: #ffffff;
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

/* 送信ボタン：赤塗りつぶし・白文字・左寄せ・トップページのボタンサイズに合わせる */
.my-care-taxi-page .submit-button {
  display: block;
  width: 300px;
  max-width: 90%;
  margin: 30px 0 0 0;
  padding: 16px;
  background-color: #B22222;
  color: #ffffff;
  font-size: 19px !important;
  font-weight: bold;
  text-align: center;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.my-care-taxi-page .submit-button:hover {
  background-color: #941C1C;
}

/* フォーム項目ごとの間隔を広げる */
.my-care-taxi-page .form-continer {
  margin-bottom: 40px;
}

.my-care-taxi-page .contact-heading {
  margin-bottom: 10px;
}

/* --- Thanksページ専用スタイル --- */
.my-care-taxi-page .bt-more-thanks {
  background-color: #9B1B30;
  color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  display: block;
  margin: 35px auto;
  width: 90%;
  box-sizing: border-box;
  text-decoration: none;
  font-size: 19px !important;
}

@media screen and (max-width: 768px) {
  .my-care-taxi-page .bt-more-thanks {
    width: 90%;
  }
}