@charset "UTF-8";

/* サブページの共通のレイアウトはsub_page.cssに記述 */

/* --------------------------------------------------------------------------------

  目次

  1.ふるさと納税
  5.家族の思いを、具体的な支援に変える。
  6.通院だけでなく、大切な時間にも。
  7.動画で見る、まち看の支援。
  8.まち看の３つのこだわり。
  9.まち看のメンバー
  10.利用の流れ・FAQ
  11.サービス・料金
  12.まち看を利用されたお客様の声
  13.よくあるご質問
  14.お問い合わせ

-------------------------------------------------------------------------------- */



/* 共通のまち看CSS
-------------------------------------------- */

/* Debug */
/* * {
  outline: 1px solid red;
} */

/* 共通の文字の大きさ */
#machikan h2 {
  font-size: 1.5rem;
  font-weight: 700;
}
#machikan h3,
#machikan h4 {
  font-size: 1.2rem;
  font-weight: 600;
}

/* 各セクションの余白一括設定 */
#machikan .sub_page_section {
  padding: 5rem 0;
}

/* 各セクションの幅一括設定 */
#machikan .section5, #machikan .section7, #machikan .section9,
#machikan .section11, #machikan .section13 {
  background-color: #fafafa;
}
#machikan .furusato_tax_inner,
#machikan .section5_inner, #machikan .section7_inner, #machikan .section9_inner,
#machikan .section11_inner, #machikan .section12_inner, #machikan .section13_inner {
  display: block;
  width: 80%;
  margin: 0 auto !important;
}
#machikan .section6_inner, #machikan .section8_inner,
#machikan .section10_inner, #machikan .section14_inner {
  display: block;
  width: 100%;
}

/* セクションの見出し */
#machikan h2.sub_section_title {
  position: relative;
  padding-bottom: 2rem;
  line-height: 1.5;
}
#machikan h2.sub_section_title span {
  display: block;
  color: #ee534f;
  font-size: 1.08rem;
  padding-bottom: .5rem;
  font-weight: 500;
}
#machikan h2.sub_section_title span::before { /* 車のアイコン */
  display: inline-block;
  content: "";
  width: 3rem;
  aspect-ratio: 291 / 150;
  margin-right: .5rem;
  flex-shrink: 0;
  background: url("../img/machikan/machikan_car_left.png")
              center/contain no-repeat;
}

/* 見出しをセンタリングにカスタムする用 */
#machikan .center_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 下線のメッセージ */
#machikan .message {
  text-align: center;
}
#machikan .message span {
  line-height: 2.2rem;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0 .2em;
  border-radius: 4px;
  background: linear-gradient(transparent 60%,rgb(255, 224, 218) 60%);
}

/* 共通で使える基本のカード */
#machikan .sub_card_box {
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
}
#machikan .sub_card {
  padding-bottom: 2rem;
}
#machikan .sub_card > div {
  position: relative;
  border-radius: .5rem;
  padding: 2rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #ececec;
  box-shadow: 0 8px 24px rgba(29, 138, 223, .06);
}
#machikan .sub_card > div h3 {
  position: relative;
  text-align: center;
  margin-bottom: 3.5rem;
}
#machikan .sub_card > div h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.5rem;
  transform: translateX(-50%);
  width: 3rem;
  border-bottom: 5px dotted #ee534f;
}
#machikan .sub_card > div h3 span {
  display: block;
  color: #ee534f;
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.2;
  padding-bottom: 1rem;
}
#machikan .sub_card > div img {
  border-radius: .5rem;
  margin-bottom: 1rem;
}
#machikan .sub_card > div p {
  text-align: center;
}

/* 5カラムの際の基本のカード（w100%） */
/* h3は各ページで設定 */
#machikan .w100_card_box {
  padding-top: 3rem;
  padding-bottom: 1.5rem;
}
#machikan .w100_card {
  padding-bottom: 2rem;
}
#machikan .w100_card > div {
  position: relative;
  border-radius: .5rem;
  padding: 1.5rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  border: 1px solid #ececec;
  box-shadow: 0 8px 24px rgba(29, 138, 223, .06);
}
#machikan .w100_card > div img {
  border-radius: .5rem;
  margin-bottom: 1rem;
}
#machikan .w100_card > div p {
  line-height: 1.8;
  text-align: center;
}

/* 改行しない */
#machikan .tablet_br {
  display: none;
}



/* タブレット（pro横向き以外） */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #machikan h2 {
    font-size: 1.3rem;
  }
  #machikan h3,
  #machikan h4 {
    font-size: 1.1rem;
  }
  /* 下線のメッセージ */
  #machikan .message span {
    font-size: 1.08rem;
  }
  /* 改行する */
  #machikan .tablet_br {
    display: block;
  }
}

/* スマートフォン */
@media (max-width: 767px) {
  /* 共通の文字の大きさ */
  #machikan h2 {
    font-size: 1.2rem;
  }
  #machikan h3, #machikan h4 {
    font-size: 1.1rem;
  }

  /* 各セクションの幅一括設定 */
  #machikan .section5_inner, #machikan .section7_inner, #machikan .section9_inner,
  #machikan .section11_inner, #machikan .section12_inner, #machikan .section13_inner {
    width: 90%;
  }
  #machikan .section6_inner, #machikan .section8_inner,
  #machikan .section10_inner, #machikan .section14_inner {
    width: 90%;
    margin: 0 auto !important;
  }

  /* セクションの見出し */
  #machikan h2.sub_section_title span {
    font-size: .9rem;
    padding-bottom: 0;
  }
  #machikan h2.sub_section_title span::before { 
    width: 2.5rem;
  }

  /* 下線のメッセージ */
  #machikan .message span {
    font-size: 1.08rem;
  }

  /* 共通で使える基本のカード */
  #machikan .sub_card {
    padding: .5rem;
  }
  #machikan .sub_card > div {
    padding: 1rem;
  }
  #machikan .sub_card > div h3 span {
    font-size: 2.2rem;
    padding-bottom: 1rem;
  }
  /* 5カラムの際の基本のカード（w100%） */
  /* h3は各ページで設定 */
  #machikan .w100_card_box {
    padding-top: 3rem;
    padding-bottom: 1.5rem;
  }
  #machikan .w100_card {
    padding: .5rem;
  }
}




/* ===================================================
	1.ふるさと納税。
=================================================== */

#machikan .furusato_tax .row {
  border-radius: .5rem;
  border: 1px solid #ececec;
  box-shadow: 0 8px 24px rgba(29, 138, 223, .06);
}

#machikan .furusato_tax .row h2 {
  font-size: 1.8rem;
  padding-bottom: 2.5rem;
  color: #00a755;
}
#machikan .furusato_tax .row h2 span {
  display: block;
  color: #03200a;
  font-size: .9rem;
  font-weight: 600;
  margin-left: 5px;
}

#machikan .furusato_tax .furusato_text_col {
  padding: 3rem;
}
#machikan .furusato_tax .furusato_img_col {
  padding: 0;
}
#machikan .furusato_tax .furusato_img_col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 .5rem .5rem 0;
}

#machikan .furusato_tax .furusato_text_col .furusato_banner {
  padding-top: 2.5rem;
}

#machikan .furusato_tax .furusato_text_col .furusato_banner a {
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#machikan .furusato_tax .furusato_text_col .furusato_banner a:hover {
  transform: translateY(-5px); /* 上に5ピクセル移動 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* ipad縦・Air縦 */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
  #machikan .furusato_tax .furusato_img_col img {
    border-radius: 0 0 .5rem .5rem;
  }
}

/* スマートフォン */
@media (max-width: 767px) {
  #machikan .furusato_tax .furusato_text_col {
    padding: 2rem 1.5rem;
    padding-bottom: 3rem;
  }
  #machikan .furusato_tax .furusato_img_col img {
    border-radius: 0 0 .5rem .5rem;
  }
}



/* ===================================================
	5.家族の思いを、具体的な支援に変える。
=================================================== */



/* ===================================================
	6.通院だけでなく、大切な時間にも。
=================================================== */

/* 見出しのみ左右に余白 */
#machikan .section6 .sub_section_title,
#machikan .section6_inner p:nth-of-type(1) {
  display: block;
  width: 80%;
  margin: 0 auto !important;
}

/* カードは基本系からカスタム */
#machikan .section6 .w100_card > div h3 {
  position: relative;
  text-align: center;
  margin-bottom: 3.5rem;
}
#machikan .section6 .w100_card > div h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.5rem;
  transform: translateX(-50%);
  width: 3rem;
  border-bottom: 5px dotted #ee534f;
}
#machikan .section6 .w100_card > div h3 span {
  display: block;
  color: #ee534f;
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.2;
  padding-bottom: 1rem;
}

#machikan .section6 .w100_card p span {
  font-weight: 700;
  color: #ee534f;
}

#machikan .section6 .w100_card img {
  width: auto;
  height: 120px;
  object-fit: contain;
}


/* タブレット（pro横向き以外） */
@media (min-width: 768px) and (max-width: 1199.98px) {
  /* 余白をセクション全体が80%に変更する */
  #machikan .section6_inner {
    display: block;
    width: 80%;
    margin: 0 auto !important
  }
  #machikan .section6 .sub_section_title,
  #machikan .section6_inner p:nth-of-type(1) {
    width: 100%;
  }
}

/* スマートフォン */
@media (max-width: 767px) {
  #machikan .section6 .sub_section_title,
  #machikan .section6_inner p:nth-of-type(1) {
    width: 100%;
  }
  #machikan .section6 .w100_card > div h3 span {
    font-size: 2.2rem;
    padding-bottom: 1rem;
  }
}



/* ===================================================
	7.動画で見る、まち看の支援。
=================================================== */

/* カードは基本系からカスタム */
#machikan .section7 .sub_card_box {
  padding-top: 3rem;
}
#machikan .section7 .sub_card > div h3 {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}
#machikan .section7 .sub_card > div h3::after { /* ドットは消す */
  display: none;
}
#machikan .section7 .sub_card > div p {
  text-align: left;
}
#machikan .section7 .sub_card > div img {
  margin-top: 1rem;
}

/* ラベル */
#machikan .section7 .sub_card .video_label {
  position: absolute;
  top: -.8rem;
  left: -.6rem;
}
#machikan .section7 .sub_card .video_label p {
  position: relative;
  display: inline-block;
  font-size: .9rem;
  padding: 0 2em 0 1em;
  border-radius: 4px 2rem 2rem 4px;
  color: #fff;
}

#machikan .section7 .sub_card:nth-of-type(1) .video_label p {
  background-color: #1d8adf;
}
#machikan .section7 .sub_card:nth-of-type(2) .video_label p {
  background-color: #ffa425;
}
#machikan .section7 .sub_card:nth-of-type(3) .video_label p {
  background-color: #66bb6a;
}

/* スマートフォン */
@media (max-width: 767px) {
  /* カードは基本系からカスタム */
  #machikan .section7 .sub_card > div {
    padding: 1.5rem;
    padding-bottom: 2.5rem;
  }
    #machikan .section7 .sub_card {
      padding-bottom: 2rem;
  }
}




/* ===================================================
	8.まち看の３つのこだわり。
=================================================== */

/* sectionの見出し */
#machikan .section8 h2.sub_section_title {
  padding-bottom: 3rem;
}


/* ３つのこだわり
-------------------------------------------- */

#machikan .section8 .commitment {
  position: relative;
  padding-top: 4rem;
}

/* テキスト・画像共通 */
#machikan .section8 .text_col,
#machikan .section8 .img_col {
  margin-bottom: 8rem;
}
/* 3段目のみ調整 */
#machikan .section8 .text_col.text_col_3,
#machikan .section8 .img_col.img_col_3 {
  margin-bottom: 4rem;
}
/* 画像colは非表示 */
#machikan .section8 .img_col {
  display: block;
}
/* スマホ表示用の画像は非表示 */
#machikan .section8 .mobile_img {
  display: none;
  object-fit: cover;
  object-position: center;
}

/* テキスト */
#machikan .section8 .text_col {
  position: relative;
  padding-top: 0;
}
#machikan .section8 .text_col.text_col_1,
#machikan .section8 .text_col.text_col_3 {
  padding-left: 10%;
  padding-right: 5%;
}
#machikan .section8 .text_col.text_col_2 {
  padding-right: 10%;
  padding-left: 5%;
}

/* テキストの背景 */
#machikan .section8 .text_col::before {
  z-index: -1;
  content :"";
  position: absolute;
  top: -2rem;
  bottom: 10%;
  background: #f3f0e9;
  border-radius: 1rem;
}
#machikan .section8 .text_col.text_col_1::before,
#machikan .section8 .text_col.text_col_3::before {
  left: 10%;
  right: -10%;
}
#machikan .section8 .text_col.text_col_2::before {
  right: 10%;
  left: -10%;
}

/* テキストのタイトル */
#machikan .section8 .text_col h3 {
  margin-bottom: 1.5rem;
  padding-left: .5rem;
  padding-bottom: 8px;
  border-left: solid 3px #952223;
}
#machikan .section8 .text_col h3 span {
  display: block;
  font-size: .7rem;
  color: #952223;
}

/* 強調 */
span.bold_font {
  font-weight: 700;
  color: #ee534f;
}

/* 画像 */
#machikan .section8 .img_col {
  padding-right: 0;
  padding-left: 0;
}
#machikan .section8 .img_col img {
  object-fit: cover;
  max-height: 400px;
  display: block
}
#machikan .section8 .img_col.img_col_1 img,
#machikan .section8 .img_col.img_col_3 img {
  border-radius: 1rem 0 0 1rem;
}
#machikan .section8 .img_col.img_col_2 img {
  border-radius: 0 1rem 1rem 0;
}

/* タブレット（pro横向き以外） */
@media (min-width: 768px) and (max-width: 1199.98px) {
  /* テキストの背景 */
  #machikan .section8 .text_col::before {
    top: -2rem;
    bottom: -10%;
  }
  #machikan .section8 .commitment {
    padding-bottom: 1rem;
  }
}

/* スマートフォン */
@media (max-width: 767px) {
  #machikan .section8 .commitment {
    padding-top: 0;
  }
  /* テキスト・画像共通 */
  #machikan .section8 .text_col {
    margin-bottom: 3rem;
  }
  /* 画像colは非表示 */
  #machikan .section8 .img_col {
    display: none;
  }
  /* スマホ表示用の画像を表示 */
  #machikan .section8 .mobile_img {
    display: block;
    border-radius: .5rem;
    padding-top: 1rem;
  }
  #machikan .section8 .mobile_img img {
    border-radius: .5rem;
  }
  /* 内側の余白を調整 */
  #machikan .section8 .text_col.text_col_1,
  #machikan .section8 .text_col.text_col_2,
  #machikan .section8 .text_col.text_col_3 {
    padding: 2rem;
  }

  /* テキストの背景 */
  #machikan .section8 .text_col::before  {
    top: 0;
    bottom: 0;
  }
  #machikan .section8 .text_col.text_col_1::before,
  #machikan .section8 .text_col.text_col_3::before,
  #machikan .section8 .text_col.text_col_2::before {
    right: 0;
    left: 0;
  }
}



/* ケアマネが見た、まち看の価値
-------------------------------------------- */

#machikan .section8 .care_manager {
  display: block;
  width: 65%;
  margin: 0 auto !important;
  padding-top: 5rem;
}

#machikan .section8 .care_manager > .row {
  border-radius: 1rem;
  border: 1px solid #ececec;
  box-shadow: 0 8px 24px rgba(29, 138, 223, .06);
}

/* テキスト部分 */
#machikan .section8 .care_manager > .row > div:nth-of-type(1) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem;
}
#machikan .section8 .care_manager h3 {
  padding-bottom: 1rem;
  line-height: 1.5;
}

/* 動画部分 */
#machikan .section8 .care_manager > .row > div:nth-of-type(2) {
  padding: 0;
}
#machikan .section8 .care_manager > .row > div:nth-of-type(2) img {
  object-fit: cover;
  border-radius: 0 1rem 1rem 0;
  width: 100%;
  height: 100%;
}

/* ボタンの下寄を解除 */
#machikan .section8 .care_manager .color_btn {
  margin-top: 0;
}


/* タブレット（pro横向き以外） */
@media (min-width: 768px) and (max-width: 1199.98px) {
    #machikan .section8 .care_manager {
    display: block;
    width: 80%;
  }
}

/* ipad縦・Air縦 */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
  #machikan .section8 .care_manager {
    display: block;
    width: 90%;
  }
}

/* スマートフォン */
@media (max-width: 767px) {
  #machikan .section8 .care_manager {
    width: 100%;
  }
  #machikan .section8 .care_manager > .row > div:nth-of-type(2) img {
    border-radius: 0 0 1rem 1rem;
  }
}



/* ===================================================
	9.まち看のメンバー
=================================================== */

#machikan .section9 .machikan_member {
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}
#machikan .section9 .machikan_member .text_col,
#machikan .section9 .machikan_member .img_col {
  padding-bottom: 2rem;
}

/* 文章カラム */
#machikan .section9 .machikan_member .text_col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#machikan .section9 .machikan_member .text_col:nth-of-type(1) {
  padding-right: 5rem;
}
#machikan .section9 .machikan_member .text_col:nth-of-type(4) {
  padding-left: 5rem;
}

/* 見出し */
#machikan .section9 .machikan_member .text_col h3 {
  margin-bottom: 2rem;
  padding-left: .5rem;
  padding-bottom: 8px;
  border-left: solid 3px #952223;
}
#machikan .section9 .machikan_member .text_col span {
  font-size: .8rem;
  display: block;
  color: #952223;
}

/* 画像カラム */
#machikan .section9 .machikan_member .img_col {
  position: relative;
}
#machikan .section9 .machikan_member .img_col .blob {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#machikan .section9 .machikan_member .img_col .blob_1 {
  overflow: hidden;
  border-radius: 41% 59% 39% 61% / 56% 44% 56% 44%;
}
#machikan .section9 .machikan_member .img_col .blob_2 {
  overflow: hidden;
  border-radius: 54% 46% 57% 43% / 46% 49% 51% 54%;
}

/* スマートフォン */
@media (max-width: 767px) {
  #machikan .section9 .machikan_member {
    padding-bottom: 2.5rem;
  }
  /* 文章カラム */
  #machikan .section9 .machikan_member .text_col:nth-of-type(1) {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-bottom: 2rem;
  }
  #machikan .section9 .machikan_member .text_col:nth-of-type(4) {
    padding-left: calc(var(--bs-gutter-x) * .5);
  }
  /* 画像カラム */
  #machikan .section9 .machikan_member .img_col {
    padding-bottom: 2rem;
  }
}



/* ===================================================
	10.利用の流れ
=================================================== */

#machikan .section10 .sub_section_title,
#machikan .section10_inner > p:nth-of-type(1) {
  display: block;
  width: 80%;
  margin: 0 auto !important;
}

/* カードは基本系からカスタム */
/* STEP */
#machikan .section10 .w100_card_box {
  position: relative;
  padding-top: 5.5rem; 
  padding-bottom: 1.5rem;
}
#machikan .section10 .w100_card > div img {
  border-radius: 0;
  width: 45%;
  height: auto;
}
#machikan .section10 .w100_card > div p {
  text-align: left;
}

/* 矢印 */
#machikan .section10 .w100_card_box .w100_card {
  position: relative;
}
#machikan .section10 .w100_card_box .w100_card::after {
  content: '\f0da';
  font-family: 'Font Awesome 5 Free';
  position: absolute;
  color: #404040;
  font-weight: 900;
  top: 50%;
  right: -4px;
  transform: translateY(-50%);
}
#machikan .section10 .w100_card_box .w100_card:nth-of-type(5):after {
  content: '';
}

/* 数字 */
#machikan .section10 .w100_card_box h3 span {
  z-index: 1;
  position: absolute;
  color: #fff;
  font-size: .8rem;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
}
#machikan .section10 .w100_card_box h3 span::before {
  z-index: -1;
  content: '';
  position: absolute;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%);
}
/* 色変え */
#machikan .section10 .w100_card:nth-of-type(1) h3 span::before {
  background-color: #1d8adf;
}
#machikan .section10 .w100_card:nth-of-type(2) h3 span::before {
  background-color: #66bb6a;
}
#machikan .section10 .w100_card:nth-of-type(3) h3 span::before {
  background-color: #5e3a92;
}
#machikan .section10 .w100_card:nth-of-type(4) h3 span::before {
  background-color: #ee534f;
}
#machikan .section10 .w100_card:nth-of-type(5) h3 span::before {
  background-color: #ffa425;
}

/* 見出し */
#machikan .section10 .w100_card_box h3 {
  padding-top: 1.5rem;
  padding-bottom: .5rem;
  text-align: center;
}

/* あんしん通院ノート（カルテ）とは */
#machikan .section10 .karte {
  width: 80%;
  margin: 0 auto !important;
  border-radius: .5rem;
  border: 1px solid #ececec;
  box-shadow: 0 8px 24px rgba(29, 138, 223, .06);
}
#machikan .section10 .karte > div:nth-of-type(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: .5rem 0 0 .5rem;
  background-color: #66bb6a;
}
#machikan .section10 .karte > div:nth-of-type(2) {
  padding: 2rem;
}
#machikan .section10 .karte h3 {
  line-height: 2;
  color: #fff;
}

/* messageをずらす */
#machikan .section10 .message {
  padding-top: 3rem;
}


/* ipad縦・Air縦 */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {

  /* 余白をセクション全体が80%に変更する */
  #machikan .section10_inner {
    display: block;
    width: 80%;
    margin: 0 auto !important
  }
  #machikan .section10 .sub_section_title,
  #machikan .section10_inner p:nth-of-type(1) {
    width: 100%;
  }
  /* STEP2,STEP4は下矢印に変更 */
  #machikan .section10 .w100_card_box .w100_card:nth-of-type(3):after {
    content: '\f0dd';
    top: auto;
    bottom: 1rem;
    right: auto;
    left: -50%;
    transform: translateX(-50%);
  }
  /* あんしん通院ノート（カルテ）とは */
  #machikan .section10 .karte {
    width: 100%;
  }
}

/* スマートフォン */
/* ipad縦・Air縦 */
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
  #machikan .section10 .w100_card_box .w100_card {
    padding-bottom: 3.5rem;
  }
  /* 横矢印の位置調整 */
  #machikan .section10 .w100_card_box .w100_card::after {
    top: 40%;
  }
}

/* スマートフォン */
@media (max-width: 767px) {
  #machikan .section10 .sub_section_title,
  #machikan .section10_inner > p:nth-of-type(1) {
    width: 100%;
  }
  /* STEP2,STEP4は下矢印に変更 */
  #machikan .section10 .w100_card_box .w100_card:nth-of-type(2):after,
  #machikan .section10 .w100_card_box .w100_card:nth-of-type(4):after {
    content: '\f0dd';
    top: auto;
    bottom: 1rem;
    right: auto;
    left: -5px;
  }
  #machikan .section10 .w100_card_box .w100_card:nth-of-type(5) {
    padding-bottom: 2rem;
  }
  /* あんしん通院ノート（カルテ）とは */
  #machikan .section10 .karte {
    width: 90%;
  }
  #machikan .section10 .karte > div:nth-of-type(1) {
    padding: 1rem;
    border-radius: .5rem .5rem 0 0;
  }
}



/* ===================================================
	11.サービス・料金
=================================================== */

#machikan .section11 .service_1,
#machikan .section11 .service_2 {
  position: relative;
  border-radius: .5rem;
  background-color: #fff;
  margin-bottom: 3rem;
}
#machikan .section11 .service_1 {
  margin-top: 3rem ;
}
#machikan .section11 .service_2 {
  margin-top: 5rem ;
}

/* 空白の設定 */
#machikan .section11 .service_1 > div:nth-of-type(1),
#machikan .section11 .service_2 > div:nth-of-type(1) {
  padding: 2rem;
}
#machikan .section11 .service_2 > div:nth-of-type(1) {
  padding-right: 3rem;
}
#machikan .section11 .service_1 > div:nth-of-type(2),
#machikan .section11 .service_2 > div:nth-of-type(2) {
  padding: 0;
}

/* 写真 */
#machikan .section11 .service_1 > div:nth-of-type(2) img,
#machikan .section11 .service_2 > div:nth-of-type(2) img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  border-radius: 0 .5rem .5rem 0;
}

/* ラベル */
#machikan .section11 .service_nmb {
  position: absolute;
  top: -.9rem;
  left: -.6rem;
}
#machikan .section11 .service_nmb p {
  position: relative;
  display: inline-block;
  font-size: .9rem;
  padding: 0 2em 0 1em;
  border-radius: 4px 2rem 2rem 4px;
  background-color: #ee534f;
  color: #fff;
}

/* 見出し */
#machikan .section11 .service_1 h3,
#machikan .section11 .service_2 h3 {
  margin-top: .5rem;
  margin-bottom: 2rem;
}
#machikan .section11 .service_1 h3 span,
#machikan .section11 .service_2 h3 span {
  display: block;
  font-size: .9rem;
  color: #952223;
  line-height: 1.8;
}

/* 料金表見出し */
#machikan .section11 .fare_heading h4 {
  font-size: 1.08rem;
  margin-bottom: 1rem;
  padding-left: 6px;
  border-left: solid 3px #ee534f; 
}
#machikan .section11 .fare_heading h4 span {
  font-size: .8rem;
}

/* ipad縦・Air縦 */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
  /* 写真 */
  #machikan .section11 .service_1 > div:nth-of-type(2) img,
  #machikan .section11 .service_2 > div:nth-of-type(2) img {
    border-radius: 0 0 .5rem .5rem;
  }
  #machikan .section11 .service_2 > div:nth-of-type(2) img {
    object-fit: cover;
    object-position: center;
    aspect-ratio: 3 / 2;
  }
}

/* スマートフォン */
@media (max-width: 767px) {
  #machikan .section11 .section11_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #machikan .section11 .service_1,
  #machikan .section11 .service_2 {
    width: 100%;
  }
  #machikan .section11 .service_2 {
    margin-top: 3rem ;
  }
  /* 空白の設定 */
  #machikan .section11 .service_1 > div:nth-of-type(1),
  #machikan .section11 .service_2 > div:nth-of-type(1) {
    padding: 2rem 1.5rem 1.5rem;
  }
  #machikan .section11 .service_2 > div:nth-of-type(1) {
    padding-right: 1rem;
  }
  /* 写真 */
  #machikan .section11 .service_1 > div:nth-of-type(2) img,
  #machikan .section11 .service_2 > div:nth-of-type(2) img {
    border-radius: 0 0 .5rem .5rem;
  }
  #machikan .section11 .service_2 > div:nth-of-type(2) img {
    object-fit: cover;
    object-position: center;
    aspect-ratio: 3 / 2;
  }
}


/* お迎え料金 
-------------------------------------------- */
#machikan .section11 .pickup_fee {
  padding-right: 1.5rem;
}
#machikan .section11 .pickup__fee {
  display: flex;
  background: #f3f0e9;
  border-radius: .5rem;
  margin-bottom: .5rem;
}

/* 位置マーク */
#machikan .section11 .pickup__fee .marker_box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: .5rem 0 0 .5rem;
  padding: 0 1rem;
}
#machikan .section11 .pickup__fee .marker_box::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY( -50% );
  border: 8px solid transparent;
}
/* .fa-map-marker-altから変換される */
#machikan .section11 .pickup__fee .svg-inline--fa.fa-location-dot {
  color: #fff;
}

/* 色設定 */
#machikan .section11 .pickup__fee:nth-of-type(1) .marker_box {
  background-color: #4cb0f2;
}
#machikan .section11 .pickup__fee:nth-of-type(2) .marker_box {
  background-color: #1d8adf;
}
#machikan .section11 .pickup__fee:nth-of-type(3) .marker_box {
  background-color: #1676c6;
}
#machikan .section11 .pickup__fee:nth-of-type(4) .marker_box {
  background-color: #115da0;
}
#machikan .section11 .pickup__fee:nth-of-type(1) .marker_box::before {
  border-left-color: #4cb0f2;
}
#machikan .section11 .pickup__fee:nth-of-type(2) .marker_box::before {
  border-left-color: #1d8adf;
}
#machikan .section11 .pickup__fee:nth-of-type(3) .marker_box::before {
  border-left-color: #1676c6;
}
#machikan .section11 .pickup__fee:nth-of-type(4) .marker_box::before {
  border-left-color: #115da0;
}

#machikan .section11 .pickup__fee p {
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: .75rem;
  padding-left: 1.2rem;
}
#machikan .section11 .pickup__fee p span.bold {
  font-weight: 800;
}
#machikan .section11 .pickup__fee p span.small {
  font-size: .8rem;
}

/* スマートフォン */
@media (max-width: 767px) {
  #machikan .section11 .pickup_fee {
    padding-right: .5rem;
  }
}



/* 介助料
-------------------------------------------- */
#machikan .section11 .assistance_fee {
  border-left: solid 1px #afa794;
  padding-left: 1.5rem;
}

#machikan .section11 .assistance_fee p {
  position: relative;
  padding-left: calc( 2.7rem );
  line-height: 1.2;
}
#machikan .section11 .assistance_fee p::before {
  font-family: 'Font Awesome 5 Free';
  position: absolute;
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;

  top: 50%;
  left: 0;
  transform: translateY( -50% );
  background-color: #ee534f;
  width: 2.2rem;
  height: 2.2rem;

  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
#machikan .section11 .assistance_fee p:nth-of-type(1)::before {
  content: '\f193';
}
#machikan .section11 .assistance_fee p:nth-of-type(2)::before {
  content: '\f236';
  font-size: 1rem;
}

#machikan .section11 .assistance_fee p span {
  display: block;
  font-weight: 800;
  line-height: 1.8;
}

/* スマートフォン */
@media (max-width: 767px) {
  #machikan .section11 .assistance_fee {
    border-left: none;
    padding: 2rem 1rem 0 1rem;
  }
}


/* まちパス
-------------------------------------------- */
/* ロゴを追加 */
#machikan .section11 .service_2 h3{
  position: relative;
}
#machikan .section11 .service_2 h3::after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  background-image: url('../img/machikan/machipass_contents_logo.webp');
  width: 150px;
  height: 100%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#machikan .section11 .machi_pass {
  background: #f3f0e9;
  border-radius: .5rem;
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
}

#machikan .section11 .machi_pass h4 {
  font-size: 1.08rem;
  margin-bottom: 1rem;
  padding-left: 6px;
  border-left: solid 3px #ee534f; 
}
#machikan .section11 .machi_pass h4 span {
  font-size: .9rem;
}
#machikan .section11 .machi_pass .machi_pass_icon p,
#machikan .section11 .machi_pass .machi_pass_icon p span {
  margin: 0;
  line-height: 1.8;
}

#machikan .section11 .machi_pass .machi_pass_icon {
  position: relative;
  padding-left: 4rem;
  margin-bottom: 1.5rem;
}
#machikan .section11 .machi_pass_1 .machi_pass_icon::before,
#machikan .section11 .machi_pass_2 .machi_pass_icon::before {
  font-family: 'Font Awesome 5 Free';
  content: '\f017';
  position: absolute;
  font-size: 1.2rem;
  font-weight: 900;
  color: #d1c6ab;

  top: 50%;
  left: 0;
  transform: translateY( -50% );
  background-color: #fff;
  width: 3rem;
  height: 3rem;

  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
#machikan .section11 .machi_pass_2 .machi_pass_icon:nth-of-type(2):before {
  content: '\f004';
  font-size: 1.4rem;
}

#machikan .section11 .machi_pass p span.bold_size {
  font-size: 1.3rem;
  font-weight: 800;
}
#machikan .section11 .machi_pass p span.bold {
  font-weight: 800;
}

#machikan .section11 .machi_pass .fa-caret-right {
  padding-right: .5rem;
}

#machikan .section11 .kome {
  font-size: .9rem;
  text-align: right;
  margin: 0;
}




/* ===================================================
	12.まち看を利用されたお客様の声
=================================================== */

#machikan .section12 .users_voice {
  padding-top: .5rem;
}
#machikan .section12 .users__voice {
  padding: 1.5rem;
}

#machikan .section12 .users__voice .row {
  position: relative;
  padding: 2rem 1.5rem .5rem 1rem;
  border-radius: .5rem;
  background-color: #fff;
  border: 1px solid #ececec;
  box-shadow: 0 8px 24px rgba(29, 138, 223, .06);
}
#machikan .section12 .users__voice .row > div:nth-of-type(2) {
  padding-left: 1.5rem;
}

/* 画像カラム */
#machikan .section12 .users__voice .row img {
  border-radius: 50%;
  width: 100%;
  aspect-ratio: 1 / 1; 
  object-fit: cover;
  margin-bottom: .8rem;
}
#machikan .section12 .users__voice .row > div:nth-of-type(1) {
  display: flex;
  flex-direction: column;
}

/* 本文カラム */
#machikan .section12 .users__voice h3 {
  border-bottom: dotted 3px #ee534f;
  padding-bottom: .8rem;
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

/* お名前 */
#machikan .section12 .users__voice .user_name {
  font-size: .9rem;
  line-height: 1.8;
}
#machikan .section12 .users__voice .user_name span {
  display: block;
  font-weight: 600;
  line-height: 1.8;
}

/* スマホ用のタイトルカラムをOFF */
#machikan .section12 .users_voice .mobile_col {
  display: none;
}
/* PC向け表示をON */
#machikan .section12 .users_voice .off_vertical {
  display: block;
}


/* スマートフォン */
/* ipad縦・Air縦 */
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
  /* スマホ用のタイトルカラムをON */
  #machikan .section12 .users_voice .mobile_col {
    display: block;
  }
  /* PC向け表示をOFF */
  #machikan .section12 .users_voice .off_vertical {
    display: none;
  }
  #machikan .section12 .users_voice .mobile_col p {
    margin: 0;
  }
  #machikan .section12 .users__voice .row {
    padding: 2rem 1rem;
  }
  #machikan .section12 .users__voice .row > div:nth-of-type(2) {
    padding-left: calc(var(--bs-gutter-x) * .5);
  }
  /* お名前 */
  #machikan .section12 .users__voice .user_name span {
    margin-right: .5rem;
    display: inline-block;
  }
}



/* ===================================================
	13.よくあるご質問
=================================================== */

#machikan .section13 .faq__box {
  padding: 1.5rem .8rem;
}

#machikan .section13 .faq__box > div {
  position: relative;
  /* padding: 2rem 1.5rem .5rem 1rem; */
  border-radius: .5rem;
  background-color: #fff;
  border: 1px solid #ececec;
  box-shadow: 0 8px 24px rgba(29, 138, 223, .06);
}


/* 質問 */
#machikan .section13 .question {
  height: 6.5rem;
  padding: 1.2rem 1.5rem 1.5rem;
  border-radius: .5rem .5rem 0 0;
  background-color: #fff7f5;
}
#machikan .section13 .question h3,
#machikan .section13 .question h3 span {
  color: #ee534f;
  line-height: 1.5;
}
#machikan .section13 .question h3 span {
  font-size: 1.5rem;
  padding-right: .5rem;
}

/* 解答 */
#machikan .section13 .answer {
  padding: 1.5rem;
}



/* ===================================================
	14.お問い合わせ
=================================================== */

/* 本文 */
#machikan .section14 .left_col {
  padding-left: 10%;
  padding-right: 3rem;
}
#machikan .section14 .left_col h3 {
  line-height: 1.8;
  padding-top: .5rem;
  padding-bottom: 1.5rem;
}

/* 画像 */
#machikan .section14 .right_col {
  padding: 0;
  max-height: 600px;
}
#machikan .section14 .right_col img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  border-radius: .5rem 0 0 .5rem;
}

/* 相談例 */
#machikan .section14 .example_col {
  margin-top: 4rem;
  padding: 2rem 2.5rem;
  border-radius: .5rem;
  background-color: #feefea;
}
#machikan .section14 .example_col > .row div:nth-of-type(3) {
  display: flex;
  justify-content: center;
  align-items: center;
}
#machikan .section14 .example_col h3 {
  padding-bottom: 1rem;
  text-align: center;
}
#machikan .section14 .example_col h3 span {
  padding-left: 1rem;
}
#machikan .section14 .example_col img {
  width: 100%;
  height: auto;
}

/* ボタンスペース */
#machikan .section14 .btn_col {
  padding-top: 4rem;
}
#machikan .section14 .btn__col {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 3rem;
}

/* ボタンを基本系からカスタム */
#machikan .section14 .btn_col .color_btn {
  padding: 0 1rem;
}

/* ボタンのアイコン */
#machikan .section14 .btn_col .color_btn .btn_col_icon {
  color: #ee534f;
  background-color: #fff;
  border-radius: 50%;
  padding: .5rem;
  margin-right: 2px;
  border: 1px solid #ee534f;
}

/* 電話アイコン */
#machikan .section14 .btn_col .color_btn:nth-of-type(3) .btn_col_icon {
  color: #ffa425;
  border: 1px solid #ffa425;
}

/* LINEアイコン */
#machikan .section14 .btn_col .color_btn:nth-of-type(2) .btn_col_icon {
  color: #1d8adf;
  border: 1px solid #1d8adf;
}


/* ipad縦・Air縦 */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
  #machikan .section14 .btn_col .color_btn {
    padding: 0 .5rem;
  }
}

/* スマートフォン */
@media (max-width: 767px) {
  /* 本文 */
  #machikan .section14 .left_col {
    padding: 0 calc(var(--bs-gutter-x) * .5) 2rem;
  }
  #machikan .section14 .left_col h3 {
    padding-bottom: 2rem;
  }
  #machikan .section14 .right_col img {
    border-radius: .5rem;
  }
  /* 相談例 */
  #machikan .section14 .example_col ul {
    margin-bottom: 0;
  }
  #machikan .section14 .example_col li {
    line-height: 2.2;
  }
  #machikan .section14 .example_col img {
    padding-top: 1.5rem;
    width: 50%;
    display: block;
    margin: 0 auto;
  }

  /* お問い合わせボタンを縦並びに */
  #machikan .section14 .btn__col {
    flex-direction: column;
  }
  /* ボタン*/
  #machikan .section14 .btn_col .color_btn {
    padding: .5rem 0;
  }
  #machikan .section14 .btn_col .color_btn a {
    width: 230px;
  }
}