@charset "UTF-8";
/*
  /pages/ai 専用CSS（SP: max-width 768px）
  media属性(<link ... media="(max-width:768px)">)で分岐しているので、SP用の指定にメディアクエリは不要。
  ただしタブレット幅（768px ちょうど＝iPad mini 縦）だけは、SP(375px)前提の指定だと間延びするので
  例外的に末尾へ @media (min-width: 768px) を置いている（TOP の index_sp.css と同じ考え方）。
  コンテンツ幅は各セクションの器(inner)に max-width: 600px を付けて止めている（375px では器の内寸が 327px なので効かない）。
  器の中でパーツだけ狭くする指定や 768px 用の余白・並びは、375px では効かないものも含めてすべて末尾の分岐に置く
  共通CSS(common_sp.css)は layouts/top_base.html.erb で自動読み込み
*/

/* ---------

fv

------------*/
.func_ai .fv {
  padding: 56px 24px 64px;
  background: linear-gradient(88deg, #EDF7F9 1.93%, #F3FDF3 98.83%);
}
/* タブレット幅でもコンテンツ幅を 600px に揃える。中央寄せは PC 側の margin: 0 auto が効く */
.func_ai .fv_inner {
  display: block;
  width: 100%;
  max-width: 600px;
}
.func_ai .fv_title {
  font-size: 2.8rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.func_ai .fv_lead {
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}
.func_ai .fv_lead {
  gap: 28px;
}
@supports not (text-box: trim-both cap alphabetic) {
  .func_ai .fv_title {
    margin-top: -11px;
    margin-bottom: -11px;
  }
  .func_ai .fv_lead p {
    margin-top: -6px;
    margin-bottom: -6px;
  }
}
.func_ai .fv_logo {
  margin-top: 32px;
  text-align: center;
}
.func_ai .fv_logo img {
  width: 290px;
  margin: 0 auto;
}
.func_ai .fv_cta {
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  margin-top: 38px;
}
.func_ai .fv_btn {
  height: 56px;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
}
.func_ai .fv_btn_document,
.func_ai .fv_btn_meeting {
  width: 100%;
}
/*
  Figma の SP 枠(375×607.5)内でのシェイプ実体の位置は left 139 / top 279 / 370×362（PC の 0.502 倍）。
  left: 139 − 187.5(枠中央) = −49px
  bottom: 607.5 − (279 + 362) = −34px
*/
.func_ai .fv_shape {
  left: calc(50% - 49px);
  bottom: -34px;
  width: 370px;
  height: auto;
}

/* ---------

concept

------------*/
.func_ai .concept {
  padding: 64px 24px 72px;
}
/* fv_inner と同じく 600px で止める。中央寄せは PC 側の margin: 0 auto が効く */
.func_ai .concept_inner {
  width: 100%;
  max-width: 600px;
}
.func_ai .concept_title {
  font-size: 2rem;
  line-height: 1.6;
}
.func_ai .concept_lead {
  font-size: 1.6rem;
  line-height: 2.1;
  letter-spacing: 0.06em;
}
.func_ai .concept_note {
  width: 100%;
  padding: 32px 24px;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
}

/* ---------

ai-func

------------*/
.func_ai .ai_feature {
  padding: 72px 24px 104px;
}
/* fv_inner と同じく 600px で止める。白いカード(.ai_feature_block)もこの中なので一緒に 600px に収まる */
.func_ai .ai_feature_inner {
  width: 100%;
  max-width: 600px;
}
.func_ai .ai_feature_head {
  gap: 48px;
}
.func_ai .ai_feature_section_head {
  gap: 48px;
}
.func_ai .ai_feature_section_title {
  font-size: 2.4rem;
  gap: 20px;
}
/* index_sp.css:13-17 の .section_title::before からコピー。margin は PC 側で 0 にしてあるので写さない */
.func_ai .ai_feature_section_title::before {
  width: 24.27px;
  height: 26.607px;
}
.func_ai .ai_feature_section_title h2 {
  gap: 10px;
}
.func_ai .ai_feature_amane_logo {
  width: 152px;
}
.func_ai .ai_feature_section_txt {
  gap: 28px;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  text-align: left;
}
.func_ai .ai_feature_list_wrap {
  gap: 40px;
}
.func_ai .ai_feature_list {
  flex-direction: column;
  gap: 24px;
}
.func_ai .ai_feature_card {
  gap: 32px;
  width: 100%;
  padding: 44px 16px 36px;
  border-radius: 16px;
}
.func_ai .ai_feature_card_body {
  gap: 24px;
}
/* 見出しだけ中央寄せ。本文は align-self: stretch (PC側で指定) が効いて全幅・左寄せのまま */
.func_ai .ai_feature_card_txt {
  align-items: center;
}
.func_ai .ai_feature_card_ttl {
  font-size: 1.8rem;
  letter-spacing: 0.08em;
}
@supports not (text-box: trim-both cap alphabetic) {
  .func_ai .ai_feature_section_title h2 span {
    margin-top: -10px;
    margin-bottom: -10px;
  }
  .func_ai .ai_feature_section_txt p {
    margin-top: -7px;
    margin-bottom: -7px;
  }
  .func_ai .ai_feature_card_ttl {
    margin-top: -8px;
    margin-bottom: -8px;
  }
}
.func_ai .ai_feature_badge_list {
  gap: 12px;
  width: 100%;
}
.func_ai .ai_feature_badge {
  gap: 3px;
  height: 40px;
  padding-left: 9px;
  font-size: 1.4rem;
}
.func_ai .ai_feature_badge_icon {
  width: 21.75px;
  height: 18px;
}
.func_ai .ai_feature_badge_icon_voice_1 {
  width: 15px;
}
.func_ai .ai_feature_badge_icon_analysis_2 {
  width: 21px;
}
/* ボタンは Figma 通りカード内で左寄せ（カード内側293pxに対して279px） */
.func_ai .ai_feature_btn {
  width: 279px;
  height: 52px;
  padding-right: 5px;
  font-size: 1.6rem;
}
/* ai_carousel.css には SP 用の ::after / ::before 指定がないので Figma 実測値で新規に上書きする */
.func_ai .ai_feature_btn::after {
  right: 25px;
  width: 22.15px;
  height: 22.15px;
}
/*
  PC と同じ考え方。円の中心＝ボタン右端から 36.08px（= ::after の right 25px + 直径 22.15px の半分）に置き、
  45度回転で右へ寄る「1辺 ÷ 2√2」＝ 6 ÷ 2.828 ≒ 2.12px を左へ戻す
*/
.func_ai .ai_feature_btn::before {
  right: 36.08px;
  width: 6px;
  height: 6px;
  transform: translate(calc(50% - 2.12px), -50%) rotate(45deg);
}
.func_ai .ai_feature_note {
  font-size: 1.4rem;
  line-height: 1.5;
}

/* ---------

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

------------*/
.func_ai .ai_feature_block {
  gap: 56px;
  padding: 72px 20px 80px;
  border-radius: 16px;
  /* ヘッダーが position: fixed / height: 64px (common_sp.css:142-146) なので、その分だけ手前で止める */
  scroll-margin-top: 70px;
  margin-top: 64px;
}
.func_ai .ai_feature_block_ttl {
  font-size: 2.2rem;
  letter-spacing: 0.08em;
}
.func_ai .ai_feature_content {
  gap: 72px;
  width: 100%;
}
.func_ai .ai_feature_func {
  gap: 48px;
}
.func_ai .ai_feature_num {
  gap: 16px;
}
.func_ai .ai_feature_num_txt {
  font-size: 2.4rem;
}
/* PCの2カラムをやめて縦積みにする。func_1 用の中央揃え修飾もここで打ち消す */
.func_ai .ai_feature_wrap,
.func_ai .ai_feature_wrap_center {
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.func_ai .ai_feature_exp {
  gap: 32px;
  width: 100%;
}
.func_ai .ai_feature_exp_ttl {
  font-size: 2rem;
  letter-spacing: 0.08em;
}
.func_ai .ai_feature_exp_body {
  gap: 22px;
}
/* SPは diagram も全幅なので、PCの中央揃えは打ち消す */
.func_ai .ai_feature_exp_body_diagram {
  align-items: flex-start;
  gap: 24px;
}
@supports not (text-box: trim-both cap alphabetic) {
  .func_ai .ai_feature_block_ttl {
    margin-top: -9px;
    margin-bottom: -9px;
  }
  .func_ai .ai_feature_num_txt {
    margin-top: -10px;
    margin-bottom: -10px;
  }
  .func_ai .ai_feature_exp_ttl {
    margin-top: -8px;
    margin-bottom: -8px;
  }
}

/* diagram: ステップを縦積みにし、1ステップ内は［番号＋ラベル］の右にアイコンを置く */
.func_ai .ai_feature_diagram {
  flex-direction: column;
  gap: 7px;
  width: 100%;
  padding: 0 12px;
}
.func_ai .ai_feature_diagram_step {
  flex-direction: row;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  height: 87px;
}
/* 横並びの中では width: 100% が行を占有してしまうので必ず解除する */
.func_ai .ai_feature_diagram_label {
  width: auto;
  align-items: center;
}
.func_ai .ai_feature_diagram_txt {
  letter-spacing: 0.04em;
}

.func_ai .ai_feature_block_head {
  gap: 44px;
  width: 100%;
}
.func_ai .ai_feature_block_lead {
  gap: 28px;
  font-size: 1.6rem;
  line-height: 1.65;
  letter-spacing: 0.04em;
  text-align: left;
}
.func_ai .ai_feature_exp_group {
  gap: 16px;
}
/*
  図グループの gap は voice が 24px、ai_Analysis が 28px。
  4pxの差のためにクラスを増やさず、外側の器の中にあるときだけ子孫セレクタで上書きする
*/
.func_ai .ai_feature_exp_group .ai_feature_exp_body_diagram {
  gap: 28px;
}
/* SPの .ai_feature_diagram は padding のショートハンドで下8pxを引き直しているので、ここでも消す */
.func_ai .ai_feature_diagram_spread {
  padding-bottom: 0;
}
.func_ai .ai_feature_questions {
  padding: 24px 20px 20px;
}
.func_ai .ai_feature_questions_ttl {
  font-size: 1.6rem;
  letter-spacing: 0.03em;
}
.func_ai .ai_feature_questions_list {
  font-size: 1.4rem;
  letter-spacing: normal;
}
@supports not (text-box: trim-both cap alphabetic) {
  .func_ai .ai_feature_block_lead p {
    margin-top: -8px;
    margin-bottom: -8px;
  }
  .func_ai .ai_feature_questions_ttl {
    margin-top: -6px;
    margin-bottom: -6px;
  }
}

/* ---------

ai_voice_medicalrecord_func 固有

------------*/
.func_ai .ai_feature_shot_voice_1,
.func_ai .ai_feature_shot_voice_2,
.func_ai .ai_feature_shot_voice_3 {
  width: 100%;
}

/* ---------

ai_Analysis_func 固有

------------*/
.func_ai .ai_feature_shot_analysis_1,
.func_ai .ai_feature_shot_analysis_2 {
  width: 100%;
}

/* ---------

ai_Analysis_func > func_3 の活用例カード

------------*/
.func_ai .ai_feature_wrap_stack {
  gap: 36px;
}
.func_ai .ai_feature_usecase {
  grid-template-columns: 1fr;
  gap: 32px;
  width: 100%;
}
.func_ai .ai_feature_usecase_card {
  padding: 24px 16px 16px;
}
/* PCの固定高＋space-between をやめ、高さ auto ＋ gap に切り替える */
.func_ai .ai_feature_usecase_body {
  gap: 20px;
  width: 100%;
  height: auto;
}
.func_ai .ai_feature_usecase_ttl {
  font-size: 1.6rem;
}
.func_ai .ai_feature_usecase_diagram {
  width: 100%;
  height: 80px;
}
.func_ai .ai_feature_usecase_label {
  font-size: 1.4rem;
}
@supports not (text-box: trim-both cap alphabetic) {
  .func_ai .ai_feature_usecase_ttl {
    margin-top: -6px;
    margin-bottom: -6px;
  }
}
/* SPは幅も高さも中身なりでよい（PCの65×89固定を解除する） */
.func_ai .ai_feature_usecase_icon {
  width: auto;
  height: auto;
}
.func_ai .ai_feature_usecase_icon_img {
  width: 45.5px;
  height: 35px;
}
.func_ai .ai_feature_usecase_icon_img_narrow {
  width: 39.9px;
}
/* 図の gap は SP ではどのカードも 14px */
.func_ai .ai_feature_usecase_diagram_2,
.func_ai .ai_feature_usecase_diagram_3,
.func_ai .ai_feature_usecase_diagram_4 {
  gap: 14px;
}
.func_ai .ai_feature_usecase_chart {
  width: 102px;
  height: 54.803px;
}
.func_ai .ai_feature_usecase_column {
  padding-bottom: 8px;
}
.func_ai .ai_feature_usecase_bars {
  gap: 11.32px;
}
.func_ai .ai_feature_usecase_donut {
  width: 80px;
  height: 80.134px;
}
/* ドーナツの穴(直径約45px)に収めるため、このラベルだけ小さくする */
.func_ai .ai_feature_usecase_donut .ai_feature_usecase_label {
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}
@supports not (text-box: trim-both cap alphabetic) {
  .func_ai .ai_feature_usecase_donut .ai_feature_usecase_label {
    margin-top: -5px;
    margin-bottom: -5px;
  }
}
.func_ai .ai_feature_usecase_img_3_1 {
  width: 45px;
}
.func_ai .ai_feature_usecase_img_3_2 {
  width: 80px;
}
.func_ai .ai_feature_usecase_img_4_1 {
  width: 130.177px;
}

/* ---------

ai-security

------------*/
.func_ai .ai_security {
  padding: 64px 24px 88px;
}
/* fv_inner と同じく 600px で止める。中央寄せは PC 側の margin: 0 auto が効く */
.func_ai .ai_security_inner {
  gap: 40px;
  width: 100%;
  max-width: 600px;
}
/* PCは［文章｜画像］の横並び、SPは画像を文章の上に出す縦並び（順序は下の .ai_security_img で入れ替える） */
.func_ai .ai_security_content {
  flex-direction: column;
  gap: 32px;
  padding: 0;
}
.func_ai .ai_security_exp {
  gap: 24px;
  width: 100%;
}
.func_ai .ai_security_ttl {
  font-size: 2rem;
  letter-spacing: 0.08em;
}
/*
  SP本文だけ字間を持たせない（Figma も未設定）。
  ページ内の他のSP本文と同じ 0.04em にすると2つ目の段落が
  Figma の4行(箱96px)に収まらず5行になってしまう
*/
.func_ai .ai_security_txt {
  gap: 16px;
  font-size: 1.6rem;
  letter-spacing: normal;
}
.func_ai .ai_security_img {
  order: -1;
  width: 100%;
}

/* ==========================================================

タブレット（768px ちょうど＝iPad mini 縦）

========================================================== */
/*
  375px の見え方（Figma）を変えないため、SP用の指定は触らずにここで上書きする。
  max-width など 375px では効かない指定も、768px のための指定だと分かるようにここへ置く
*/
@media (min-width: 768px) {
  /* 器は 600px だが、ボタンが横に長くなりすぎるのでこのパーツだけ 480px で止める */
  .func_ai .fv_btn_document,
  .func_ai .fv_btn_meeting {
    max-width: 480px;
    margin-inline: auto;
  }
  /* 枠が横に広いぶん、SP(Figma)の位置のままだとシェイプが中央に寄って見えるので、右へ枠幅の 20%・下へ 30px ずらす */
  .func_ai .fv_shape {
    left: calc(70% - 49px);
    bottom: -64px;
  }

  .func_ai .ai_feature_card {
    padding: 44px 48px 36px;
  }
  /* SP は Figma 通りカード内で左寄せだが、カードが広がると右側が大きく空くので中央に置く */
  .func_ai .ai_feature_btn {
    align-self: center;
  }

  .func_ai .ai_feature_block {
    padding: 72px 36px 80px;
  }
  /*
    器は 600px だが、ステップ内は space-between なので広がるとラベルとアイコンが離れすぎる。このパーツだけ 284px で止める。
    中央寄せは PC 側 .ai_feature_diagram の align-items: center が SP の縦並びでもそのまま効く（spread 版も同じ要素に付いている）
  */
  .func_ai .ai_feature_diagram_step {
    max-width: 284px;
  }

  /* 活用例カードが横長になるので［見出し｜図］の横並びにし、図は残りの幅の中央に置く */
  .func_ai .ai_feature_usecase_body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .func_ai .ai_feature_usecase_diagram {
    flex: 1;
    width: auto;
  }
  /* 横並びにした見出しがカードの左端に寄りすぎないよう、左だけ余白を広げる */
  .func_ai .ai_feature_usecase_card {
    padding: 24px 16px 16px 32px;
  }

  /* 画像が全幅だと大きすぎるので 70% に縮めて中央に置く */
  .func_ai .ai_feature_shot_voice_1,
  .func_ai .ai_feature_shot_voice_2,
  .func_ai .ai_feature_shot_voice_3,
  .func_ai .ai_feature_shot_analysis_1,
  .func_ai .ai_feature_shot_analysis_2 {
    align-self: center;
    width: 70%;
  }
  /* 親の .ai_security_content は PC 側の align-items: center が残っているので、幅だけで中央に来る */
  .func_ai .ai_security_img {
    width: 70%;
  }

  /*
    見出しは 600px あれば「…患者プライバシー保護を／両立する安全設計」の2行に収まるので、改行はその1か所だけにする。
    HTML の <br> は「データ活用と<br>」「保護を<br class="pc_none">」の2つで、1つ目だけを消す。
    pc_none / sp_none は PC と SP の切り替えしかできず 768px だけの指定には使えないので、位置で指定している。
    HTML の <br> の並びを変えたらここも見直すこと
  */
  .func_ai .ai_security_ttl br:first-of-type {
    display: none;
  }
}