@charset "UTF-8";
/* ==========================================================================
   260819 利用事例紹介ページ（/case/）
   トップの「ユーザーの声」3枚と、「介護・見守りの現場でも」のチップから遷移する。
   ご家庭ごとに使い方が違うことを見てもらい、自分に近いケースを見つけてもらうためのページ。
   写真は既存の /voice/ 用アイコンを流用している。
   ========================================================================== */
.un_caseHead {
  padding: 18.6vw 7.34vw 0;
  text-align: center;
}

.un_caseHead_ttl {
  margin: 0;
  color: #3c3227;
  font-size: 5.6vw;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.un_caseHead_en {
  display: block;
  margin-top: 1.6vw;
  color: #d0782c;
  font-size: 3.2vw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.un_caseHead_lead {
  margin: 4.26vw 0 0;
  color: #6b6353;
  font-size: 3.2vw;
  line-height: 1.8;
}

.un_caseItem {
  margin-top: 6vw;
  padding-top: 5.33vw;
  border-top: 1px solid #ece6c4;
  /* 目次から飛んだときに固定ヘッダーの下に隠れないようにする */
  scroll-margin-top: 22vw;
}

/* 折りたたみ。JSに頼らない <details> を使い、矢印で開閉する。
   summary の既定マーカーは消して、右端に自前の矢印を置いている。 */
.un_caseItem_summary {
  display: block;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.un_caseItem_summary::-webkit-details-marker {
  display: none;
}

.un_caseItem_summary:focus-visible {
  outline: 2px solid #e54813;
  outline-offset: 4px;
}

/* 開閉ボタンはバーにして、押せる場所であることを分かりやすくする。
   バーは2つある。
     __open  … summary の中。閉じているときだけ出る「続きを読む」
     __close … 本文の末尾。読み終えた位置で閉じられるようにするための「閉じる」
   __close は summary の外なのでクリックしても details は閉じない。
   ページ末尾のスクリプトで閉じている。JSが無いと動かないボタンになるので、
   スクリプトが body に .js-case を付けたときだけ表示する。 */
.un_caseItem_toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.13vw;
  width: 100%;
  margin-top: 3.46vw;
  padding: 3.2vw 4.26vw;
  border: 1px solid #f3cdbc;
  border-radius: 999px;
  background: #fdf1ea;
  color: #e54813;
  font-family: inherit;
  font-weight: 700;
  font-size: 3.46vw;
  line-height: 1;
  transition: background-color 0.25s ease;
}

.un_caseItem_summary:hover .un_caseItem_toggle,
.un_caseItem_toggle__close:hover {
  background: #fbe4d8;
}

/* 開いているあいだは「続きを読む」を引っ込める。閉じるのは本文末尾のバーの役目 */
.un_caseItem_detail[open] .un_caseItem_toggle__open { display: none; }

.un_caseItem_toggle__close {
  display: none;
  margin-top: 5.33vw;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.js-case .un_caseItem_toggle__close { display: flex; }

.un_caseItem_toggle__close:focus-visible {
  outline: 2px solid #e54813;
  outline-offset: 4px;
}

.un_caseItem_arw {
  width: 2.13vw;
  height: 2.13vw;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-0.4vw, -0.4vw);
}

.un_caseItem_arw__up {
  transform: rotate(-135deg) translate(-0.4vw, -0.4vw);
}

/* 閉じていても冒頭の数行は見せる。ここで内容が想像できると
   「続きを読む」を押すかどうかを決められる */
.un_caseItem_lead {
  margin-top: 3.46vw;
}

.un_caseItem_detail:not([open]) .un_caseItem_lead .un_caseBody_p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .un_caseItem_toggle { transition: none; }
}

.un_caseItem_head {
  display: flex;
  align-items: center;
  gap: 2.66vw;
}

.un_caseItem_icon {
  flex: none;
  width: 10.6vw;
}

.un_caseItem_icon img {
  display: block;
  width: 100%;
  height: auto;
}

.un_caseItem_who {
  margin: 0;
  color: #3c3227;
  font-weight: 700;
  font-size: 3.33vw;
  line-height: 1.4;
}

.un_caseItem_sub {
  margin: 0.8vw 0 0;
  color: #8a7f5c;
  font-size: 3.2vw;
  line-height: 1.5;
}

.un_caseItem_ttl {
  margin: 3.2vw 0 0;
  color: #3c3227;
  font-size: 4.53vw;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.un_caseBody {
  margin-top: 5.33vw;
}

.un_caseBody_p {
  margin: 0;
  color: #4a443b;
  font-size: 3.33vw;
  line-height: 2;
}

.un_caseBody_p + .un_caseBody_p {
  margin-top: 4.8vw;
}

/* 本文が長いので、読み飛ばしても要点が拾えるように強調する。
   どこを強調するかは、インタビュー素材のスプレッドシート（C3〜C5）で
   太字になっている箇所に合わせている（計19か所）。
   → https://docs.google.com/spreadsheets/d/1_PIPcPKdT-b8KEmvxAcveiY6jVvw0hSjLvfOFDUHNTM/
      edit?gid=557422185 の C列
   元原稿の強弱がそのまま出るよう、強調は1種類だけにしている */
.un_caseBody_em {
  font-weight: 700;
  color: #3c3227;
}

/* 使い方のまとめ。ページの一番上に置いて「いろんな使い方がある」ことを先に見せる。
   件数が多いので、縦に長くならないよう SP でも2列に並べる。 */
.un_caseUse {
  margin-top: 6.4vw;
  padding: 5.86vw 4.26vw;
  border-radius: 3.2vw;
  background: #fefbdc;
}

.un_caseUse_head {
  margin: 0;
  color: #3c3227;
  text-align: center;
  font-size: 3.86vw;
  line-height: 1.4;
}

.un_caseUse_lead {
  margin: 1.6vw 0 0;
  color: #8a7f5c;
  text-align: center;
  font-size: 3.06vw;
  line-height: 1.6;
}

.un_caseUse_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.66vw;
  margin: 4.26vw 0 0;
  padding: 0;
  list-style: none;
}

.un_caseUse_item {
  padding: 3.46vw;
  border-radius: 2.13vw;
  background: #fff;
}

/* イラストは見出しの左。SPはカードが2列で幅が狭いので、
   イラストを小さめにして余白も詰め、見出しが3行に割れないようにしている */
.un_caseUse_ttl {
  display: flex;
  align-items: center;
  gap: 1.6vw;
  margin: 0;
  color: #d0782c;
  font-weight: 700;
  font-size: 3.46vw;
  line-height: 1.45;
}

.un_caseUse_icon {
  flex: none; /* 見出しが2行になってもイラストは縦に伸ばさない */
  width: 7.46vw;
  height: auto;
}

.un_caseUse_txt {
  margin: 1.06vw 0 0;
  color: #6b6353;
  font-size: 3.06vw;
  line-height: 1.65;
}

.un_caseBack {
  margin: 8vw 0 13.3vw;
  text-align: center;
}

.un_caseBack a {
  color: #e54813;
  font-weight: 700;
  font-size: 3.73vw;
  text-decoration: underline;
}

@media (min-width: 768px) {
  .un_caseHead { padding-top: clamp(96px, 12.6vw, 172px); }
  .un_caseHead_ttl { font-size: clamp(24px, 2.5vw, 34px); }
  .un_caseHead_en {
    margin-top: clamp(6px, 0.66vw, 9px);
    font-size: clamp(12px, 1.02vw, 14px);
  }
  .un_caseHead_lead {
    margin-top: clamp(14px, 1.61vw, 22px);
    font-size: clamp(13px, 1.1vw, 15px);
  }
  .un_caseItem {
    margin-top: clamp(28px, 3.07vw, 42px);
    padding-top: clamp(24px, 2.63vw, 36px);
    scroll-margin-top: clamp(80px, 8.7vw, 120px);
  }
  .un_caseItem_toggle {
    gap: clamp(8px, 0.88vw, 12px);
    margin-top: clamp(14px, 1.53vw, 21px);
    padding: clamp(11px, 1.2vw, 16px) clamp(20px, 2.19vw, 30px);
    font-size: clamp(13px, 1.14vw, 16px);
  }
  .un_caseItem_toggle__close { margin-top: clamp(20px, 2.19vw, 30px); }
  .un_caseItem_lead { margin-top: clamp(14px, 1.53vw, 21px); }
  .un_caseItem_arw {
    width: clamp(7px, 0.66vw, 9px);
    height: clamp(7px, 0.66vw, 9px);
    transform: rotate(45deg) translate(-2px, -2px);
  }
  .un_caseItem_arw__up {
    transform: rotate(-135deg) translate(-2px, -2px);
  }
  .un_caseItem_head { gap: clamp(10px, 1.09vw, 15px); }
  .un_caseItem_icon { width: clamp(42px, 4.1vw, 56px); }
  .un_caseItem_who { font-size: clamp(15px, 1.39vw, 19px); }
  .un_caseItem_sub {
    margin-top: clamp(3px, 0.29vw, 5px);
    font-size: clamp(12px, 1.02vw, 14px);
  }
  .un_caseItem_ttl {
    margin-top: clamp(12px, 1.32vw, 18px);
    font-size: clamp(18px, 1.75vw, 24px);
  }
  .un_caseBody { margin-top: clamp(20px, 2.19vw, 30px); }
  .un_caseBody_p { font-size: clamp(14px, 1.14vw, 16px); line-height: 2.1; }
  .un_caseBody_p + .un_caseBody_p { margin-top: clamp(18px, 1.9vw, 26px); }
  .un_caseUse {
    margin-top: clamp(28px, 3.07vw, 42px);
    padding: clamp(24px, 2.63vw, 36px) clamp(24px, 2.63vw, 36px);
    border-radius: clamp(12px, 1.32vw, 18px);
  }
  .un_caseUse_head { font-size: clamp(18px, 1.68vw, 23px); }
  .un_caseUse_ttl { gap: clamp(8px, 0.88vw, 12px); }
  .un_caseUse_icon { width: clamp(34px, 3.5vw, 48px); }
  .un_caseUse_lead {
    margin-top: clamp(8px, 0.88vw, 12px);
    font-size: clamp(13px, 1.1vw, 15px);
  }
  /* 縦を短くするため多列にする。ただし列を増やしすぎると
     1枚あたりが細くなって文章が改行だらけになるので、画面幅に応じて増やす */
  .un_caseUse_list {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1.1vw, 14px);
    margin-top: clamp(16px, 1.75vw, 24px);
  }
  .un_caseUse_item {
    padding: clamp(12px, 1.32vw, 18px);
    border-radius: clamp(8px, 0.88vw, 12px);
  }
  .un_caseUse_ttl { font-size: clamp(13px, 1.17vw, 16px); }
  .un_caseUse_txt {
    margin-top: clamp(4px, 0.44vw, 6px);
    font-size: clamp(12px, 1.02vw, 14px);
    line-height: 1.6;
  }
  .un_caseBack { margin: clamp(32px, 3.5vw, 48px) 0 clamp(56px, 6.14vw, 84px); }
  .un_caseBack a { font-size: clamp(13px, 1.05vw, 15px); }
}

@media (min-width: 1100px) {
  .un_caseUse_list {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ------------------------------------------------------------------
   ページ下部のCTA。トップページ（MV下）と同じ見た目にするための指定。
   これらのクラスは top.css にあるが、このページは main.css + case.css しか
   読んでいないため、必要なぶんだけ写している。
   ※ top.css 側を直すときは、ここも合わせて直すこと
   ------------------------------------------------------------------ */
.un_btnFont {
  font-size: 4.8vw !important;
}

.un_btn__renatalCaption {
  display: block;
  font-size: clamp(13px, 3.4vw, 15px);
}

.un_btn__renatalCta {
  display: block;
  width: 100%;
  padding: 0.4em 0.08em;
  border: 2px solid #fff;
  border-radius: 999px;
  outline: 4px solid #d74700;
  background: #d74700 !important;
  box-shadow: 0 10px 0 #fdf8cf;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: clamp(20px, 5.2vw, 22px);
  letter-spacing: -0.05em;
}

.un_btn__renatalCta__conventional {
  border: 2px solid #d70019 !important;
  outline: none !important;
  background: #ffe9e8 !important;
  box-shadow: none !important;
  color: #d70019 !important;
}

.un_btn__renatalCta svg {
  top: 50%;
  transform: translateY(-50%);
}

/* プランの2つとLINEボタンのあいだの区切り線 */
.un_cta_divider {
  width: 90%;
  height: 1px;
  margin: 3px 0;
  background: rgba(0, 0, 0, 0.12);
}

@media (min-width: 768px) {
  .un_mvUnder_cta .bl_cta_txt {
    margin-bottom: clamp(16px, 2.2vw, 24px);
    text-align: center;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.8;
    letter-spacing: 0.02em;
  }
  /* PCはプラン2つを横並び、区切り線とLINEボタンは全幅で下に回す */
  .un_mvUnder_cta .bl_cta_list__col2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
  }
  .un_mvUnder_cta .un_btnFont {
    min-height: auto;
    font-size: clamp(18px, 1.9vw, 24px) !important;
  }
  .un_mvUnder_cta .un_btn__renatalCaption {
    display: block;
    font-size: clamp(12px, 1.4vw, 16px);
  }
  .un_mvUnder_cta .un_cta_divider {
    grid-column: 1/-1;
    height: 1px;
    margin: 10px 0;
    background: #cfcfcf;
  }
  .un_mvUnder_cta .un_lineFriend_btn {
    grid-column: 1/-1;
    justify-self: center;
  }
  .un_mvUnder_cta .el_btn.el_btn__lg {
    min-height: auto;
  }
}