/* =============================================
  共通
============================================= */
/* 使用カラー */
body {
  --color1: #ff99cc;
  /* 線、よくある質問Q */
  --color2: #ffe3ef;
  /* サービス開始までの流れ */
  --color3: #ff7db6;
  /* タイトル */
  --color4: #ffeaf4;
  /* 背景色 */
}

body:has(.homehelp) {
  --color1: #CCFF99;
  /* 線、よくある質問Q */
  --color2: #E1FDC8;
  /* サービス開始までの流れ */
  --color3: #87D33B;
  /* タイトル */
  --color4: #f2ffe6;
  /* 背景色 */
}

body:has(.respi) {
  --color1: #FFD966;
  /* 線、よくある質問Q */
  --color2: #FFECB1;
  /* サービス開始までの流れ */
  --color3: #FFC619;
  /* タイトル */
  --color4: #fff4d2;
  /* 背景色 */
}

body:has(.prune) {
  --color1: #CCCCFF;
  /* 線、よくある質問Q */
  --color2: #E5E5FF;
  /* サービス開始までの流れ */
  --color3: #AAAAEA;
  /* タイトル */
  --color4: #f1f1fc;
  /* 背景色 */
}


.single_office_wrap {
  width: 100%;
  padding-left: 29.6rem;
  background-color: var(--color4);
}

.loop_section {
  margin-top: 6rem;
}

/* 暫定処理 */
.side_fixed_content {
  z-index: 10;
}

/* header.css部分の画像差し替え */
.side_image_wrap {
  background-image: url(../img/respicare_nurse.jpg);
  background-position: 89%;
}

/* =============================================
  事業所名
============================================= */

.office_name_sec {
  padding: 12.5rem;
  padding-left: 19.2rem;
  /* width: 72.2rem; */
  padding: 9rem 10rem 0rem 19.2rem;
}

.office_nametop {
  font-size: min(2rem,20px);
  font-weight: 500;
  line-height: 1em;
  color: #202124;
}

.office_name {
  margin-top: min(1.5rem,15px);
  width: 100%;
  padding-bottom: 0.65rem;
  font-size: min(4.5rem,45px);
  font-weight: 500;
  line-height: 1em;
  color: var(--color3);
  border-bottom: solid 0.1rem #202124;
}

/* =============================================
  H2タイトル
============================================= */

.main_title {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 1.5rem 0;
  padding-left: 19.3rem;
  background-color: var(--color3);
  color: #ffffff;
  font-size: min(3rem,30px);
  font-weight: 500;
  line-height: 1em;
}

.main_title.looped {
  margin-top: min(6rem,60px);
}

.main_text {
  width: 100%;
  margin-top: min(4rem,40px);
  padding-left: 19.3rem;
  padding-right: 6.8rem;
  font-size: min(1.5rem,15px);
  font-weight: 500;
  line-height: calc(30em/15);
  color: #202124;
}

.main_img {
  margin-top: min(7rem,70px);
  margin-left: 19.3rem;
  /* padding-right: 6.8rem; */
  width: 72.3rem;
  height: 39.9rem;
  overflow: hidden;
}

/* =============================================
  サービス開始までの流れ
============================================= */

.service_flow_list {
  width: 100%;
  margin-top: 4rem;
}

.service_flow_item {
  padding: min(3rem,30px) 7rem min(3rem,30px) 19.2rem;
  display: flex;
  gap: 3.6rem;
  background-color: var(--color2);
  width: 100%;
  align-items: start;
}

.service_flow_item:nth-of-type(even) {
  background-color: #f2f2f2;
}

.service_flow_number {
  aspect-ratio: 1/1;
  width: min(8.5rem,85px);
  background-color: var(--color3);
  padding: 2.1rem 3.4rem 2.4rem 3.4rem;
  border-radius: 50%;
  color: #ffffff;
  font-size: min(3rem,30px);
  font-weight: 500;
  line-height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service_flow_title {
  font-size: min(1.5rem,15px);
  font-weight: 500;
  line-height: 1em;
  color: #202124;
}

.service_flow_text {
  margin-top: min(1.5rem,15px);
  font-size: min(1.5rem,15px);
  font-weight: 400;
  line-height: calc(25em/15);
  color: #202124;
}

/* =============================================
  H3タイトル
============================================= */

.h3title_img_outer {
  position: relative;
  aspect-ratio: 984/600;
  width: 98.4rem;
  overflow: hidden;
  padding: 7rem 0;
  margin-top: 6rem;
}

.h3title_img {
  top: 0;
  left: 0;
  position: absolute;
}


.h3title_text_wrap {
  position: relative;
  z-index: 2;
  width: 72.3rem;
  margin: 0 7rem 0 auto;
  padding: 3.2rem 3.6rem 3rem 3.6rem;
  background-color: #ffffffB3;
  overflow: auto;
  height: 100%;
}

.h3title {
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: min(2.5rem,25px);
  font-weight: 500;
  line-height: 1em;
  color: #202124;
}

.h3title_text {
  width: 100%;
  margin-top: 2.5rem;
  font-size: min(1.5rem,15px);
  font-weight: 500;
  /* line-height: calc(30em/15); */
  color: #202124;
}

/* =============================================
  写真ギャラリー
============================================= */
.gallery_wrap {
  margin-top: 8rem;
  padding-left: 19.3rem;
}

.gallery_bigimg {
  aspect-ratio: 721/399;
  width: 72.1rem;
  overflow: hidden;
}

.gallery_bigimg_inner {
  display: flex;
  height: 100%;
}

.gallery_big_content {
  aspect-ratio: 721/399;
  width: 72.1rem;
  height: auto;
  overflow: hidden;
  border: solid 0.2rem var(--color1);
}

.gallery_imgs {
  margin-top: 1.5rem;
  overflow: hidden;
  width: 72.1rem;
}

.gallery_imgs_inner {
  display: flex;
  align-items: start;
}

.gallery_smallimg {
  flex-shrink: 0;
  aspect-ratio: 164/121;
  width: 16.4rem;
  height: auto;
  overflow: hidden;
  margin-right: 2.2rem;
  border: solid 0.2rem var(--color1);
}

/* =============================================
  Q&A
============================================= */
.faq_inner {
  width: 100%;
  margin-top: 4rem;
}

.qa_box {
  margin-bottom: 1.5rem;
}

.qa_box .qa_q {
  background-color: var(--color1);
  border: 1px solid var(--color1);
  padding: 2rem 0 1.8rem 19.3rem;
  position: relative;
  cursor: pointer;
  color: #202124;
  display: flex;
}

.toggle_icon {
  position: absolute;
  top: 3rem;
  right: 8.8rem;
  width: 2rem;
  height: 1.7rem;
  /* margin-top: -15px; */
  color: #ffffff;
  top: 50%;
  transform: translateY(-50%);
}

.toggle_icon:before {
  position: absolute;
  content: "▼";
  margin: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

.qa_q.open .toggle_icon:before {
  position: absolute;
  content: "▲";
  margin: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

.qa_box .qa_a {
  display: none;
  padding: 3rem 7rem 3.1rem 19.3rem;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  background: #fff;
}

.q_txt {
  display: block;
  padding-left: 3.1rem;
  position: relative;
  font-size: min(1.8rem,18px);
  font-weight: 700;
  line-height: 1em;
  color: #202124;
}

.q_txt::before {
  position: absolute;
  left: 0;
  content: "Q";
  color: #202124;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1em;
}

.a_txt {
  display: block;
  padding-left: 3.1rem;
  position: relative;
  color: #202124;
  font-size: min(1.5rem,15px);
  font-weight: 500;
  line-height: calc(30em/15);
}

.a_txt::before {
  position: absolute;
  left: 0;
  content: "A";
  color: #202124;
  line-height: 1em;
  font-size: 1.8rem;
  font-weight: 500;
}

/* =============================================
  お知らせ
============================================= */
.news_sec {
  margin-top: 4.4rem;
}

.news_wrap {
  width: 72.4rem;
  margin: 4rem 6.7rem 0 19.3rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 7rem;
  row-gap: 7.4rem;
}

.news_content {
  width: 32.7rem;
}

.news_img {
  aspect-ratio: 327/204;
  width: 32.7rem;
  overflow: hidden;
}

.news_detail {
  margin-top: 1.1rem;
}

.news_date {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1em;
  color: #202124;
}

.news_cat {
  display: flex;
  gap: 0.474rem;
  margin-top: 0.6rem;
}

.news_cat_name {
  width: fit-content;
  height: 2.3rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1em;
  color: #ffffff;
  padding: 0.4rem 1.4rem 0.3rem 1.4rem;
  background-color: #ec6d65;
}

.news_cat_name2 {
  width: fit-content;
  height: 2.3rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1em;
  color: #ffffff;
  padding: 0.4rem 1.4rem 0.3rem 1.4rem;
  background-color: var(--color1);
}

.news_title {
  width: 100%;
  margin-top: 1rem;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: calc(26em/18);
  color: #202124;
}

/* お知らせ一覧へ */
.to_arcive {
  margin-top: 5.8rem;
  margin-right: 7rem;
  display: flex;
  justify-content: end;
  align-items: center;
  cursor: pointer;
}

.to_arcive_text {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: calc(30em/15);
  color: #202124;
}

.arrow {
  margin-left: 2rem;
  width: 3.7rem;
  height: 3.7rem;
  background-color: #202124;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow_img {
  width: 1.672rem;
  height: 1.76rem;
}

/* =============================================
  情報開示
============================================= */
.info_sec {
  position: relative;
  margin-top: 6rem;
}

.info_con {
  margin: 4.4rem 7rem 0 19.3rem;
  padding-bottom: 32.6rem;
  display: flex;
  gap: 2.7rem;
}

.info_text {
  width: 28.2rem;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: calc(30em/18);
  color: #202124;
}

.info_box {
  width: 41.2rem;
  padding: 4rem 3.4rem 4rem 3.4rem;
  background-color: #ffffff;
  border: solid 0.2rem var(--color1);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.file_item {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: calc(30em/15);
  color: #202124;
}

.info_img {
  aspect-ratio: 416.11/344.59;
  width: 41.611rem;
  position: absolute;
  top: 16rem;
  left: 19rem;
}

/* =============================================
  スマホ版
============================================= */
@media (max-width: 699.98px) {

  .single_office_wrap {
    position: relative;
    width: 100%;
    margin-top: 33.4rem;
    padding: 5.6rem 0 10rem;
    z-index: 1;
  }

  .loop_sec {
    margin-top: 5.5rem;
    width: 100%;
  }

  .other_sec {
    margin-top: 6rem;
  }

  /* 暫定処理 */
  .side_fixed_content {
    z-index: 0;
  }

  /* =============================================
  事業所名
============================================= */

  .office_name_sec {
    padding: 0 2rem;
    width: 100%;
  }

  .office_nametop {
    font-size: 1.5rem;
    line-height: 1em;
    color: #202124;
  }

  .office_name {
    width: 100%;
    padding-bottom: 0.8rem;
    font-size: 2.8rem;
    line-height: 1em;
  }

  /* =============================================
  H2タイトル
============================================= */

  .main_title {
    width: 100%;
    align-items: left;
    padding: 1.5rem 2rem;
    font-size: 2rem;
    line-height: 1em;
  }

  /* 
  .main_title.looped{

  } */

  .main_text {
    width: 100%;
    margin-top: 0;
    padding: 3rem 2rem 0;
    font-size: 1.2rem;
    line-height: calc(33em/12);
  }

  .main_img_outer {
    width: 100%;
    overflow: hidden;
  }

  .main_img {
    margin-top: 6rem;
    margin-left: -3.8rem;
    /* padding-right: 6.8rem; */
    aspect-ratio: 481/200;
    width: 48.1rem;
    height: auto;
  }

  /* =============================================
    サービス開始までの流れ
  ============================================= */
  .service_flow_list {
    width: 100%;
    margin-top: 2.8rem;
  }

  .service_flow_item {
    padding: 2rem;
    display: flex;
    gap: 1rem;
  }

  .service_flow_item:nth-of-type(even) {
    background-color: #f2f2f2;
  }

  .service_flow_number {
    width: 5rem;
    padding: 0;
    font-size: 2rem;
    line-height: 1em;
  }

  .service_flow_text {
    margin-top: 1rem;
    font-size: 1.2rem;
    line-height: calc(25em/12);
  }

  /* =============================================
    H3タイトル
  ============================================= */
  .h3title_sec {
    overflow: hidden;
  }


  .h3title_img_outer {
    position: relative;
    width: 100%;
    height: 34.7rem;
    overflow: hidden;
    padding: 4.5rem 0;
  }

  .h3title_img {
    aspect-ratio: 633/347;
    width: 63.3rem;
    left: -12.9rem;
  }

  .h3title_text_wrap {
    margin: 0 auto;
    width: 33.5rem;
    padding: 1.8rem 1.5rem 1.3rem;
    background-color: #ffffffB3;
  }

  .h3title {
    font-size: 1.7rem;
    line-height: 1em;
  }

  .h3title_text {
    margin-top: 1.9rem;
    font-size: 1.2rem;
    /* line-height: calc(30em/12); */
  }

  /* =============================================
    写真ギャラリー
  ============================================= */

  .gallery_wrap {
    margin-top: 6rem;
    padding: 0;
  }

  .gallery_bigimg {
    width: 100%;
  }

  .gallery_bigimg_inner {
    display: flex;
    height: 100%;
  }

  .gallery_big_content {
    width: 100%;
  }

  .gallery_imgs {
    margin-top: .7rem;
    width: 100%;
  }

  .gallery_imgs_inner {
    display: flex;
  }

  .gallery_smallimg {
    aspect-ratio: 85/63;
    width: 8.5rem;
    margin-right: 1.1rem;
  }

  /* =============================================
    Q&A
  ============================================= */

  .inner {
    margin-top: 3rem;
  }

  .qa_box {
    margin-bottom: 1.4rem;
  }

  .qa_box .qa_q {
    padding: 1.2rem 2rem;
  }

  .toggle_icon {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    width: 1.5rem;
    height: 1.3rem;
    /* margin-top: -15px; */
    color: #ffffff;
  }

  .qa_box .qa_a {
    display: none;
    padding: 1.6rem 2rem;
    ;
  }

  .q_txt {
    padding: 0 2rem;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: calc(20em/14);
  }

  .q_txt::before {
    font-size: 1.4rem;
    line-height: 1em;
  }

  .a_txt {
    display: block;
    padding-left: 1.5rem;
    font-size: 1.2rem;
    line-height: calc(30em/12);
  }

  .a_txt::before {
    top: .7rem;
    font-size: 1.4rem;
    line-height: 1em;
  }

  /* =============================================
    お知らせ
  ============================================= */
  .news_sec {
    margin-top: 4.4rem;
  }

  .news_wrap {
    width: 100%;
    margin: 0;
    padding: 3rem 2rem 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    column-gap: 7rem;
    row-gap: 3.5rem;
  }

  .news_content {
    width: 30.5rem;
    margin: 0 auto;
  }

  .news_img {
    width: 100%;
  }

  .news_cat {
    gap: 0.98rem;
    margin-top: 1rem;
  }

  .news_cat_name {
    width: fit-content;
    height: unset;
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
    background-color: #ec6d65;
  }

  .news_title {
    width: 100%;
    margin-top: 1rem;
    font-size: 1.3rem;
    line-height: calc(26em/13);
  }

  /* お知らせ一覧へ */
  .to_arcive {
    margin: 3rem 1.5rem 0 auto;
    width: fit-content;
  }

  /* =============================================
    情報開示
  ============================================= */
  .info_con {
    margin: 0;
    padding: 3rem 2rem 0;
    flex-direction: column;
    align-items: center;
    gap: 29.9rem;
  }

  .info_text {
    width: 100%;
    font-size: 1.6rem;
    line-height: calc(30em/16);
  }

  .info_box {
    width: 30.5rem;
    padding: 2rem 1.5rem;
    gap: 1.3rem;
  }

  .file_item {
    font-size: 1.3rem;
    line-height: 1em;
  }

  .info_img {
    width: 30.5rem;
    top: 13.9rem;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

}