@charset "UTF-8";
/*
  /pages/ai 専用CSS（PC）
  スコープ: main.func_ai 配下のみ（例外: <main> の外にあるパンくずは body の id で #page-ai にスコープ）
  共通CSS(destyle.css / common.css)は layouts/top_base.html.erb で自動読み込み
  ページごとのCSSリンクは app/views/pages/ai.html.erb にまとめて記述
*/

/* ---------

パンくず下の余白（このページだけ）

------------*/
/*
  他の機能ページは func_common2.css の .main_image { margin-top: 24px } でパンくずとの間隔を取っているが、
  このページの最初のセクション .fv には margin がないため、同じ 24px をパンくず側に付ける。
  .pankuzuArea は <main class="func_ai"> の外なので、PagesController が付ける body の id(#page-ai)でスコープする。
  SP は common_sp.css:52 で .pankuzuArea 自体が display: none なので影響しない
*/
#page-ai .pankuzuArea {
  margin-bottom: 24px;
}

/* ---------

fv

------------*/
.func_ai .fv {
  position: relative;
  /* .fv_shape の z-index: -1 が背景の下に潜らないよう、ここでスタッキングコンテキストを作る */
  z-index: 0;
  /* 装飾シェイプ(.fv_shape)がはみ出すので横スクロール防止のため必須 */
  overflow: hidden;
  padding: 88px 0 80px;
  background: linear-gradient(82deg, #EDF7F9 1.93%, #F3FDF3 98.83%);
}
.func_ai .fv_inner {
  width: 1148px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 632px 445px;
  grid-template-rows: auto auto;
  justify-content: space-between;
  align-items: center;
  row-gap: 48px;
}
.func_ai .fv_head {
  grid-column: 1;
  grid-row: 1;
  /* 見出し・リードのトリム用マイナスマージンが相殺されないよう flex + gap で間隔をとる */
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.func_ai .fv_cta {
  grid-column: 1;
  grid-row: 2;
}
.func_ai .fv_logo {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}
.func_ai .fv_title {
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: #384D4D;
  /* Figma の垂直トリム（キャップハイト〜ベースライン）を再現し、行の上下余白を削る */
  text-box: trim-both cap alphabetic;
}
.func_ai .fv_title_accent {
  background: linear-gradient(90deg, #87C288 25%, #298AC1 65.385%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.func_ai .fv_lead {
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: #384D4D;
}
.func_ai .fv_lead p {
  text-box: trim-both cap alphabetic;
}
/* text-box 非対応ブラウザ向けの保険: トリムで削られる分（line-height − キャップハイト0.7em）を上下半分ずつ詰める */
@supports not (text-box: trim-both cap alphabetic) {
  .func_ai .fv_title {
    margin-top: -18px;
    margin-bottom: -18px;
  }
  .func_ai .fv_lead p {
    margin-top: -7px;
    margin-bottom: -7px;
  }
}
.func_ai .fv_logo img {
  display: block;
  width: 445px;
  height: auto;
}
.func_ai .fv_cta {
  display: flex;
  align-items: center;
  gap: 32px;
}
.func_ai .fv_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 72px;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.03em;
  color: #fff;
  box-shadow: 0 0 6.5px rgba(255, 255, 255, 0.3);
  transition: 0.2s ease;
}
/*
  ホバーの動きは common.css:85-91 の .second-button:hover に合わせる。
  影は色（rgba(255,255,255,…)）を保ったまま、.second-button と同じ変化のさせ方
  （縦オフセットを 0 に / ぼかしを約2.2倍 / 不透明度を約0.83倍）で算出:
    0 0 6.5px 0.3 → 0 0 14.4px 0.25
  opacity は common.css:38 の a:hover { opacity: 0.6 } を
  :hover 側の 1 で上書きして打ち消す（薄くならないようにする）
*/
.func_ai .fv_btn:hover {
  opacity: 1;
  box-shadow: 0 0 14.4px 0 rgba(255, 255, 255, 0.25);
  transform: scale(1.03);
  transition: 0.2s ease;
}
.func_ai .fv_btn img {
  width: 30px;
  height: 30px;
}
.func_ai .fv_btn_document {
  width: 345px;
  border-radius: 11px;
  background: linear-gradient(86deg, #F20066 5.14%, #F27400 92.89%);
}
.func_ai .fv_btn_meeting {
  width: 255px;
  border-radius: 8px;
  background: linear-gradient(88deg, #2AC3AC 1.67%, #B3D120 99.47%);
}
/*
  amane_shape.svg は Figma の回転(176.66°)を焼き込んだ見た目で書き出されているので CSS の rotate は不要。
  Figma の fv 枠(1400×534)内でのシェイプ実体の位置は left 872 / top 123 / 737×722。
  画面幅が 1400 より広くても中央基準で留まるよう left は 50% からのオフセットで指定する。
  left: 872 − 700(枠中央) = +172px
  bottom: 534 − (123 + 722) = −311px
*/
.func_ai .fv_shape {
  position: absolute;
  left: calc(50% + 172px);
  bottom: -311px;
  z-index: -1;
  width: 737px;
  height: 722px;
  pointer-events: none;
}
.func_ai .fv_shape img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------

concept

------------*/
.func_ai .concept {
  padding: 96px 0;
  background: #fff;
}
.func_ai .concept_inner {
  /* 見出し・リード・注記のマイナスマージンを使わない代わりに、間隔はすべて gap でとる */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 1148px;
  margin: 0 auto;
  color: #296767;
  text-align: center;
}
.func_ai .concept_head {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}
/*
  fv と違い、このセクションの Figma テキストには垂直トリムがかかっていない
  （箱の高さ = 行数 × font-size × line-height と一致）ため text-box は指定しない
*/
.func_ai .concept_title {
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 1.75;
  letter-spacing: 0.14em;
}
/*
  Figma の色停止位置(PC 58.173%→70.673% / SP 38.462%→68.269%)は変化する距離が短く
  切り替わりが急に見えるので、両端に単色を残したまま 20%→80% まで伸ばしている。
  文字幅に対する比率で指定しているので PC / SP で同じ値を使える
*/
.func_ai .concept_title_accent {
  background: linear-gradient(90deg, #87C288 20%, #298AC1 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.func_ai .concept_lead {
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.5;
  letter-spacing: 0.12em;
}
.func_ai .concept_lead_accent {
  font-weight: bold;
  color: #1C9898;
}
.func_ai .concept_note {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 954px;
  padding: 32px 0;
  border-radius: 20px;
  background: #F6F9F9;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

/* ---------

ai-func

------------*/
.func_ai .ai_feature {
  padding: 88px 0 136px;
  background: #F6F9F9;
}
/*
  ai-func-head と各機能セクションの間隔(Figma実測 PC/SP とも 88px)は
  inner の gap ではなく .ai_feature_block 側の margin-top で付けている
*/
.func_ai .ai_feature_inner {
  width: 1148px;
  margin: 0 auto;
}
.func_ai .ai_feature_head {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.func_ai .ai_feature_section_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
/*
  index.css:17-23 の .section_title からコピー（全プロパティそのまま）。
  index.css は読み込まないのでスタイルだけを複製している
*/
.func_ai .ai_feature_section_title {
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-align: center;
  /* ロゴと見出しの間隔を Figma 実測の 24px にするため、行送りの影響を受けない flex + gap で組む */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
/*
  index.css:25-34 の .section_title::before からコピー。
  margin は上の gap: 24px で余白を取るため 0 に変更（コピー元は margin: 0 auto 12px）
*/
.func_ai .ai_feature_section_title::before {
  content: '';
  display: inline-block;
  background-image: url(https://s3.ap-northeast-1.amazonaws.com/img.kireini.me/connect/web/top/sectionttl_logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 33px;
  height: 36px;
  margin: 0;
}
.func_ai .ai_feature_section_title h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.func_ai .ai_feature_section_title h2 span {
  /* Figma の垂直トリム（キャップハイト〜ベースライン）を再現し、行の上下余白を削る */
  text-box: trim-both cap alphabetic;
}
.func_ai .ai_feature_amane_logo {
  display: block;
  width: 203.5px;
  height: auto;
}
.func_ai .ai_feature_section_txt {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #384D4D;
  text-align: center;
}
.func_ai .ai_feature_section_txt p {
  text-box: trim-both cap alphabetic;
}
.func_ai .ai_feature_list_wrap {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
/* align-items は既定の stretch のまま。2枚のカードの高さが揃わなくなっても崩れないようにする */
.func_ai .ai_feature_list {
  display: flex;
  gap: 32px;
}
.func_ai .ai_feature_card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 558px;
  /* 右パディングは Figma 通り 0。中身(最大442px)が枠に触れないので見た目は変わらない */
  padding: 48px 0 48px 44px;
  border: 1px solid #7BB6B6;
  border-radius: 26px;
  background: #FEFEFE;
}
.func_ai .ai_feature_card_body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.func_ai .ai_feature_card_txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 35px;
}
.func_ai .ai_feature_card_ttl {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: #384D4D;
  text-box: trim-both cap alphabetic;
}
.func_ai .ai_feature_card_desc {
  align-self: stretch;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #384D4D;
  text-box: trim-both cap alphabetic;
}
/* text-box 非対応ブラウザ向けの保険: トリムで削られる分（line-height − キャップハイト0.7em）を上下半分ずつ詰める */
@supports not (text-box: trim-both cap alphabetic) {
  .func_ai .ai_feature_section_title h2 span {
    margin-top: -13px;
    margin-bottom: -13px;
  }
  .func_ai .ai_feature_section_txt p {
    margin-top: -8px;
    margin-bottom: -8px;
  }
  .func_ai .ai_feature_card_ttl {
    margin-top: -10px;
    margin-bottom: -10px;
  }
  .func_ai .ai_feature_card_desc {
    margin-top: -6px;
    margin-bottom: -6px;
  }
}
.func_ai .ai_feature_badge_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 14px;
  width: 442px;
}
.func_ai .ai_feature_badge {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 44px;
  padding-left: 16px;
  border-radius: 100px;
  background: #F6F9F9;
  font-size: 1.4rem;
  font-weight: 400;
  color: #296767;
}
.func_ai .ai_feature_badge span {
  line-height: 1.15;
}
.func_ai .ai_feature_badge_icon {
  flex-shrink: 0;
  width: 29px;
  height: 24px;
}
.func_ai .ai_feature_badge_icon_voice_1 {
  width: 20px;
}
/*
  ai_carousel.css:265-285 の #about .ai_carousel_about_btn からコピー。
  - margin-top: 12px はカード側の gap: 40px で取るため除外
  - padding-right / box-shadow は Figma 実測値に変更（コピー元は 32px / 0 0 20px 0 rgba(189,218,212,0.3)）
*/
.func_ai .ai_feature_btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 318px;
  height: 58px;
  padding-right: 10px;
  background: #fff;
  border: 1px solid #519999;
  border-radius: 8px;
  box-shadow: 0 0 30px 0 rgba(189, 218, 212, 0.35);
  color: #1C9898;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  transition: 0.2s ease;
}
/* ホバーの動きは TOP の #feature .index_btn:hover（index.css:744）に合わせる（拡大はしない） */
.func_ai .ai_feature_btn:hover {
  opacity: 0.85;
  box-shadow: 0px 2px 24px 0px #15787833;
  border: 1px solid #85caca;
  transition: 0.2s ease;
}
/* ai_carousel.css:286-296 からコピー。right / width / height は Figma 実測値に変更（コピー元は 15px / 22px / 22px） */
.func_ai .ai_feature_btn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 24px;
  width: 24.609px;
  height: 24.609px;
  background: #1C9898;
  border-radius: 50%;
  transform: translateY(-50%);
}
/*
  ai_carousel.css:297-308 からコピー。width / height は円の拡大に比例させ（コピー元は 6px）、
  right と transform は円の中心基準の配置に変更（コピー元は right: 24px / translateY(-50%) rotate(45deg)）。

  right は円の中心＝ボタン右端から 36.3px（= ::after の right 24px + 直径 24.609px の半分）に合わせ、
  transform の translate(50%, -50%) でその点に要素の中心を重ねる。
  ただし45度回転した山括弧は、描画される墨（上辺と右辺の2本）が正方形の中心より
  右へ「1辺 ÷ 2√2」＝ 6.7 ÷ 2.828 ≒ 2.37px 寄るので、その分だけ左へ戻して見た目を中心に合わせる
*/
.func_ai .ai_feature_btn::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 36.3px;
  width: 6.7px;
  height: 6.7px;
  border: 2px solid #fff;
  border-width: 2px 2px 0 0;
  transform: translate(calc(50% - 2.37px), -50%) rotate(45deg);
  z-index: 1;
}
.func_ai .ai_feature_note {
  font-size: 1.6rem;
  line-height: 1.85;
  color: #384D4D;
}
.func_ai .ai_feature_note_accent {
  font-weight: 500;
  color: #1C9898;
}

/* ---------

ai-func 各機能セクションの共通骨格
（ai_voice_medicalrecord_func / ai_Analysis_func で共用）

------------*/
/*
  #F6F9F9 の .ai_feature の上に載る白い角丸カード。
  ai-func-head や隣の機能セクションとの間隔 88px はここで持つ
*/
.func_ai .ai_feature_block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  margin-top: 88px;
  padding: 88px 0 112px;
  border-radius: 26px;
  background: #FEFEFE;
  /* ヘッダーが position: fixed / height: 114px (common.css:313-319) なので、その分だけ手前で止める */
  scroll-margin-top: 120px;
}
.func_ai .ai_feature_block_ttl {
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: #384D4D;
  text-align: center;
  /* Figma の垂直トリム（キャップハイト〜ベースライン）を再現し、行の上下余白を削る */
  text-box: trim-both cap alphabetic;
}
.func_ai .ai_feature_content {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 986px;
}
.func_ai .ai_feature_func {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.func_ai .ai_feature_num {
  display: flex;
  align-items: center;
  gap: 32px;
}
.func_ai .ai_feature_num_txt {
  font-size: 3rem;
  line-height: 1.5;
  letter-spacing: 0.15em;
  color: #7BB6B6;
  text-box: trim-both cap alphabetic;
}
/* Figma実測の幅 912.961px は「986 − 数字41 − gap32」なので flex: 1 で一致する */
.func_ai .ai_feature_num_line {
  flex: 1;
  border-top: 1px solid #7BB6B6;
}
.func_ai .ai_feature_wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
/* func_1 だけ画像が exp より低く、Figma上で縦中央に置かれている */
.func_ai .ai_feature_wrap_center {
  align-items: center;
}
.func_ai .ai_feature_exp {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 40px;
  width: 468px;
}
.func_ai .ai_feature_exp_ttl {
  font-size: 2.6rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: #384D4D;
  text-box: trim-both cap alphabetic;
}
.func_ai .ai_feature_exp_ttl_accent {
  color: #1C9898;
}
.func_ai .ai_feature_exp_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}
/* diagram を含む func 用。diagram を中央に置くため items を center にする */
.func_ai .ai_feature_exp_body_diagram {
  align-items: center;
  gap: 32px;
}
/* diagram 内の p (.ai_feature_diagram_txt) に効かないよう直下の子だけに限定する */
.func_ai .ai_feature_exp_body > p {
  align-self: stretch;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #384D4D;
  text-box: trim-both cap alphabetic;
}
.func_ai .ai_feature_shot {
  display: block;
  flex-shrink: 0;
  height: auto;
}
/* text-box 非対応ブラウザ向けの保険: トリムで削られる分（line-height − キャップハイト0.7em）を上下半分ずつ詰める */
@supports not (text-box: trim-both cap alphabetic) {
  .func_ai .ai_feature_block_ttl {
    margin-top: -11px;
    margin-bottom: -11px;
  }
  .func_ai .ai_feature_num_txt {
    margin-top: -12px;
    margin-bottom: -12px;
  }
  .func_ai .ai_feature_exp_ttl {
    margin-top: -10px;
    margin-bottom: -10px;
  }
  .func_ai .ai_feature_exp_body > p {
    margin-top: -6px;
    margin-bottom: -6px;
  }
}

/* diagram（PC: ステップ横並び・ラベルの下にアイコン / SP: ステップ縦並び・ラベルの右にアイコン） */
.func_ai .ai_feature_diagram {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 8px;
}
.func_ai .ai_feature_diagram_step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 145px;
  height: 120px;
}
.func_ai .ai_feature_diagram_label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
/*
  番号バッジは書き出しアセットがないのでCSSで描く。
  Figma の書き出しSVGは 21.417px の #EAF4F5 単色塗り（線なし）だった。
  数字は text-box が効かない（flexコンテナ自身の無名テキストにはトリムが適用されない）ため、
  line-height: 1 の行ボックスを flex で中央に置いて代用している
*/
.func_ai .ai_feature_diagram_num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #EAF4F5;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #296767;
}
.func_ai .ai_feature_diagram_txt {
  font-size: 1.4rem;
  line-height: 1.26;
  letter-spacing: 0em;
  color: #296767;
}
.func_ai .ai_feature_diagram_img {
  display: block;
  flex-shrink: 0;
  width: 115px;
  height: 68.317px;
}

/*
  カード見出しの下にリード文が付くパターン（ai_Analysis_func）。
  voice はカード見出しが単独テキストなのでこの器を使わない
*/
.func_ai .ai_feature_block_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 986px;
}
/* 本文(.ai_feature_exp_body > p)とは行間・字送り・寄せがすべて違うので別クラスにしている */
.func_ai .ai_feature_block_lead {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  font-size: 1.8rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: #384D4D;
  text-align: center;
}
.func_ai .ai_feature_block_lead p {
  text-box: trim-both cap alphabetic;
}
/* .ai_feature_exp_ttl_accent は色だけなので、太字も要るリード用は分けている */
.func_ai .ai_feature_block_lead_accent {
  font-weight: bold;
  color: #1C9898;
}
/*
  exp の直下に「本文グループ」と「diagram＋質問例グループ」の2つが並ぶときの外側の器。
  voice は本文と diagram が1段に並ぶのでこの器を使わない
*/
.func_ai .ai_feature_exp_group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  width: 100%;
}
/*
  3ステップ版の diagram。2ステップ版は gap:16px の塊を親が中央寄せするが、
  3ステップ版は exp の全幅(468px)に散らす。gap:16px を残したまま space-between にすると
  余り 468 − 145×3 − 16×2 = 1px が2箇所に配分されて Figma実測の 16.5px と一致する。
  2ステップ版にあった下パディング8pxは3ステップ版にはない
*/
.func_ai .ai_feature_diagram_spread {
  width: 100%;
  justify-content: space-between;
  padding-bottom: 0;
}
.func_ai .ai_feature_questions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  /* 右パディングは Figma 通り 0。リストが枠に触れないので見た目は変わらない */
  padding: 26px 0 24px 32px;
  border: 1px solid #7BB6B6;
  border-radius: 8px;
}
.func_ai .ai_feature_questions_ttl {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #296767;
  text-box: trim-both cap alphabetic;
}
.func_ai .ai_feature_questions_list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #416363;
}
/*
  SPでは1項目目が2行に折れる。Figmaは2行目を全角スペースで字下げしているが、
  全角スペースはHTML側で消せずPCに残ってしまうので、ぶら下げインデントで同じ見た目にする
*/
.func_ai .ai_feature_questions_list li {
  padding-left: 1em;
  text-indent: -1em;
}
@supports not (text-box: trim-both cap alphabetic) {
  .func_ai .ai_feature_block_lead p {
    margin-top: -10px;
    margin-bottom: -10px;
  }
  .func_ai .ai_feature_questions_ttl {
    margin-top: -9px;
    margin-bottom: -9px;
  }
}

/* ---------

ai_voice_medicalrecord_func 固有

------------*/
/* スクリーンショットは縦横比がPC/SPで同じなので、PCだけ幅を指定すれば高さは自動で合う */
.func_ai .ai_feature_shot_voice_1 {
  width: 438px;
}
.func_ai .ai_feature_shot_voice_2 {
  width: 431px;
}
.func_ai .ai_feature_shot_voice_3 {
  width: 431px;
}

/* ---------

ai_Analysis_func 固有

------------*/
/* スクリーンショットは縦横比がPC/SPで同じなので、PCだけ幅を指定すれば高さは自動で合う */
.func_ai .ai_feature_shot_analysis_1 {
  width: 436px;
}
.func_ai .ai_feature_shot_analysis_2 {
  width: 437px;
}

/* ---------

ai_Analysis_func > func_3 の活用例カード

------------*/
/* func_1・2 の func_wrap は横2カラムだが、func_3 は PC でも縦積みにする */
.func_ai .ai_feature_wrap_stack {
  flex-direction: column;
  gap: 48px;
}
/* 473 × 2 + gap 40 = 986 で Figma の flex-wrap + space-between と同じ並びになる */
.func_ai .ai_feature_usecase {
  display: grid;
  grid-template-columns: repeat(2, 473px);
  gap: 40px;
  width: 986px;
}
.func_ai .ai_feature_usecase_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 左右パディングは Figma 通り 0。内側(370px)が items: center で中央に来る */
  padding: 32px 0 24px;
  border: 1px solid #7BB6B6;
  border-radius: 12px;
  background: #FEFEFE;
}
.func_ai .ai_feature_usecase_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 370px;
  height: 176px;
}
.func_ai .ai_feature_usecase_ttl {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #296767;
  /* Figma の垂直トリム（キャップハイト〜ベースライン）を再現し、行の上下余白を削る */
  text-box: trim-both cap alphabetic;
}
.func_ai .ai_feature_usecase_ttl_accent {
  font-weight: bold;
  color: #1C9898;
}
.func_ai .ai_feature_usecase_diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 370px;
  height: 104px;
}
/* usecase_1 のアイコン名も usecase_2 の凡例文字も同値なので1クラスにまとめている */
.func_ai .ai_feature_usecase_label {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #416363;
  text-box: trim-both cap alphabetic;
}
/* text-box 非対応ブラウザ向けの保険: トリムで削られる分（line-height − キャップハイト0.7em）を上下半分ずつ詰める */
@supports not (text-box: trim-both cap alphabetic) {
  .func_ai .ai_feature_usecase_ttl {
    margin-top: -8px;
    margin-bottom: -8px;
  }
  .func_ai .ai_feature_usecase_label {
    margin-top: -6px;
    margin-bottom: -6px;
  }
}

/* usecase_1: 流入経路のアイコン3つ */
.func_ai .ai_feature_usecase_icons {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 34.08px;
}
/*
  中身の実高は 80.22px だが Figma の枠は 89px あり、その差がそのまま
  図全体の縦位置に効くので高さを固定する
*/
.func_ai .ai_feature_usecase_icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19.225px;
  width: 65px;
  height: 89px;
}
.func_ai .ai_feature_usecase_icon_img {
  display: block;
  width: 65px;
  height: 50px;
}
.func_ai .ai_feature_usecase_icon_img_narrow {
  width: 57px;
}

/* usecase_2: 売上トレンドのグラフと凡例 */
.func_ai .ai_feature_usecase_diagram_2 {
  gap: 30px;
}
.func_ai .ai_feature_usecase_chart {
  display: block;
  flex-shrink: 0;
  width: 157px;
  height: 84.354px;
}
/*
  Figma の枠は123px だが、gap: 11px だと「前年同月比」が 125.4px 必要で収まらない。
  幅は中身なりにして、いちばん長い行に合わせる
*/
.func_ai .ai_feature_usecase_legend {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.func_ai .ai_feature_usecase_legend_item {
  display: flex;
  align-items: center;
  gap: 11px;
}
/* 凡例のラベルは折り返さない */
.func_ai .ai_feature_usecase_legend_item .ai_feature_usecase_label {
  white-space: nowrap;
}
/*
  Figma は 13×25 の矩形を90度回転させた書き出しSVGだが、単色の長方形なのでCSSで描く。
  幅は Figma の 25px ではなく下の線と同じ 28px にして、2つのラベルの開始位置を揃えている
*/
.func_ai .ai_feature_usecase_legend_bar {
  flex-shrink: 0;
  width: 28px;
  height: 13px;
  background: #296767;
}
/*
  Figma の書き出しSVGは「太さ3pxの横線」と「直径9.693pxの円」を同色(#D7EDED)で重ねたもの。
  ::before で線、::after で円を描く
*/
.func_ai .ai_feature_usecase_legend_line {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 9.693px;
}
.func_ai .ai_feature_usecase_legend_line::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background: #D7EDED;
  transform: translateY(-50%);
}
.func_ai .ai_feature_usecase_legend_line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9.693px;
  height: 9.693px;
  border-radius: 50%;
  background: #D7EDED;
  transform: translate(-50%, -50%);
}

/* usecase_3: 患者属性の図2つ */
.func_ai .ai_feature_usecase_diagram_3 {
  gap: 40px;
}
/*
  usecase_1 の列(.ai_feature_usecase_icon)は gap で図とラベルを並べるが、
  こちらは枠の上下いっぱいに離す組み方なので別クラスにしている
*/
.func_ai .ai_feature_usecase_column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 107px;
  height: 100%;
  padding-bottom: 16px;
}

/* usecase_4: 棒グラフとドーナツ */
.func_ai .ai_feature_usecase_diagram_4 {
  gap: 43px;
}
/* 幅は画像なりでよいので指定しない */
.func_ai .ai_feature_usecase_bars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* ラベルをドーナツの穴に重ねるため、器を基準にして中央に置く */
.func_ai .ai_feature_usecase_donut {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 102.421px;
  height: 102.593px;
}
.func_ai .ai_feature_usecase_donut_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* 絶対配置の画像は position なしの要素より前面に来るので、ラベル側も positioned にする */
.func_ai .ai_feature_usecase_donut .ai_feature_usecase_label {
  position: relative;
}
/*
  書き出しSVGの縦横比がFigmaの枠とわずかに違う（例: 3_diagram-3_2 は 102×61 に対し枠が 100.828×61.001）。
  幅だけ指定して高さを成り行きにすることで、画像を歪めずに Figma との差を 1px 未満に収める
*/
.func_ai .ai_feature_usecase_img {
  display: block;
  flex-shrink: 0;
  height: auto;
}
.func_ai .ai_feature_usecase_img_3_1 {
  width: 62px;
}
.func_ai .ai_feature_usecase_img_3_2 {
  width: 100.828px;
}
.func_ai .ai_feature_usecase_img_4_1 {
  width: 184px;
}

/* ---------

ai-security

------------*/
/* 背景の白は common.css:8 の html { background: #FFF } を継承するので指定しない */
.func_ai .ai_security {
  padding: 88px 0 128px;
}
.func_ai .ai_security_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  width: 1148px;
  margin: 0 auto;
}
/* 内寸1068px に対し exp 568 + 画像 429 = 997 なので、space-between で Figma 実測の 71px が出る */
.func_ai .ai_security_content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 40px;
}
.func_ai .ai_security_exp {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 40px;
  width: 568px;
}
/*
  見出しと本文は Figma で垂直トリムがかかっていない
  （箱の高さ = 行数 × font-size × line-height と一致）ため text-box は指定しない。
  値は .ai_feature_exp_ttl と同じだが、あちらはトリムありなので流用せず別クラスにしている
*/
.func_ai .ai_security_ttl {
  font-size: 2.6rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: #384D4D;
}
.func_ai .ai_security_txt {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #384D4D;
}
.func_ai .ai_security_txt_accent {
  font-weight: bold;
  color: #1C9898;
}
.func_ai .ai_security_img {
  display: block;
  flex-shrink: 0;
  width: 429px;
  height: auto;
}

/* ---------

シェアボタン（このページだけ背景を白に）

------------*/
/*
  .share-block は shared/_static_footer.html.erb 内で <main class="func_ai"> の外なので、body の id(#page-ai)でスコープする。
  common.css の背景色(#F6F9F9)は media 指定なしで SP にも効いており、common_sp.css に上書きもないため、
  このファイル(media 指定なし)に書くだけで SP にも効く
*/
#page-ai .share-block {
  background-color: #fff;
}