@charset "UTF-8";

/* ================================
  メインセクション (p-hero)
================================ */
.p-hero {
  background: url('../img/bg_hero.png') center right / cover no-repeat;
  padding: 60px 5%;
}

.p-hero__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  gap: 40px;
}

.p-hero__left {
  width: 55%;
}

.p-hero__left img {
  display: block;
  margin-bottom: 10px;
}

.p-hero__right {
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.p-hero__right h1 {
  font-size: 32px;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.4;
  font-weight: bold;
}


.p-hero__bottom-bar {
  text-align: center;
  margin-top: 50px;
}

/* 画像のはみ出し対策 */
.p-hero__bottom-bar img {
  max-width: 900px;
  width: 100%;
  height: auto;
}

.c-btn-cv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 単色ではなく微かなグラデーションで立体感を出す */
  background: linear-gradient(90deg, #FFB700 0%, #FFA000 100%);
  color: #ffffff !important;
  font-size: 18px;
  font-weight: bold;
  padding: 18px 40px;
  margin-top: 25px;
  border-radius: 50px;
  /* ピル型（完全な角丸） */
  text-decoration: none;
  /* オレンジ色の影をつけて発光しているように見せる */
  box-shadow: 0 8px 20px rgba(255, 160, 0, 0.4);
  transition: all 0.3s ease;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
}

/* 矢印アイコンの調整 */
.c-btn-cv__icon {
  width: 12px;
  height: 12px;
  fill: #ffffff;
  margin-left: 15px;
  transition: transform 0.3s ease;
}

/* マウスホバー時のリッチなエフェクト */
.c-btn-cv:hover {
  background: linear-gradient(90deg, #FFA000 0%, #FF8C00 100%);
  transform: translateY(-3px);
  /* 少し上に浮き上がる */
  box-shadow: 0 12px 25px rgba(255, 160, 0, 0.5);
  /* 影が広がる */
}

/* ホバー時に矢印が右へスッと動く */
.c-btn-cv:hover .c-btn-cv__icon {
  transform: translateX(5px);
}

/* ================================
  P-CUBE+gの特長セクション (.p-feature)
================================ */
.p-feature {
  padding: 50px 0;
  /* 上下に80pxの余白 */
  background: #ffffff;
}

/* P-CUBE+gの特長+内容 */
.p-feature__header {
  text-align: center;
  margin-bottom: 40px;
  /* 5列にすると詰まるので、隙間を少し調整 */
}

/* P-CUBE+gの特長 */
.p-feature__title {
  font-size: 40px;
  color: #189cc5;
  margin-bottom: 20px;
}

/* 内容 */
.p-feature__lead {
  font-size: 17.5px;
  color: #333333;
  line-height: 1.8;
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
}

/* クラウドを採用～フォローアップ機能 */
.p-feature__list {
  display: grid;
  /* Gridを使って「横に5列」に並べる */
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}

.p-feature__item {
  text-align: center;
}

/* クリックできるリンクエリアの設定 */
.p-feature__link {
  display: block;
  padding: 20px 0px;
  border-radius: 8px;
}

/* アイコン画像を入れる枠 */
.p-feature__icon {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

/* リンク全体にマウスが乗った時、中の【アイコンだけ】を上に動かす */
.p-feature__link:hover .p-feature__icon {
  transform: translateY(-8px);
  /* アイコンだけが上に8px移動して浮き上がる */
}

.p-feature__icon img {
  max-height: 100%;
  /* 高さは枠（140px）を超えないように制限 */
  width: auto;
  /* 横幅は元の比率を保つ */
  max-width: none;
  /* 箱の横幅が狭くなっても、勝手に画像を縮小させない魔法 */
}

.p-feature__item-title {
  font-size: 19px;
  color: #333333;
  margin-bottom: 10px;
  font-weight: bold;
}

.p-feature__item-text {
  font-size: 14px;
  color: #666666;
  line-height: 1.4;
  white-space: nowrap;
}

/* ================================
  詳細セクション、01 クラウドを採用 (.p-detail)
================================ */
.p-detail {
  padding: 40px 0 80px;
  background: #f5f5f5;
  /* 背景をほんのりグレーにして、上のセクションと区別する */
}

/* 各機能のブロック（01, 02...） */
.p-detail-block {
  background: #ffffff;
  padding: 60px;
  margin-bottom: 40px;
  /* ブロック同士の隙間 */
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  /* ほんのり影をつける */
}

/* 大見出しエリア（01 + タイトル） */
.p-detail-block__header {
  display: flex;
  align-items: center;
  border-bottom: 1px dotted #cccccc;
  /* 下に点線を引く */
  padding-bottom: 20px;
  margin-bottom: 40px;
}

/* 数字（01など） */
.p-detail-block__num {
  font-size: 80px;
  font-weight: bold;
  font-style: italic;
  color: #dddddd;
  line-height: 1;
  margin-right: 30px;
}

/* タイトル（クラウドを採用など） */
.p-detail-block__title {
  font-size: 40px;
  color: #333333;
  font-weight: bold;
  margin-bottom: 5px !important;
}

/* 小ブロック間の余白 */
.p-detail-block__section {
  margin-bottom: 50px;
}

.p-detail-block__section:last-child {
  margin-bottom: 0;
}

/* 青い小見出し */
.p-detail-block__sub-title {
  font-size: 28px;
  color: #189cc5;
  margin-bottom: 20px;
  font-weight: bold;
}

/* テキスト */
.p-detail-block__text {
  font-size: 16px;
  color: #333333;
  line-height: 1.8;
  margin-bottom: 30px;
}

/* 画像エリア */
.p-detail-block__img {
  text-align: center;
  /* 基本は中央揃え */
}

/* 左寄せにしたい画像用の追加クラス（もし以前のものを残していれば上書き） */
.p-detail-block__img--sm {
  text-align: center;
  /* PCでは中央揃え */
}

.p-detail-block__img--sm img {
  max-width: 400px;
  /* PCでの標準サイズ */
  width: 100%;
  height: auto;
}

/* ================================
  02. AI薬歴機能 専用スタイル (.p-ai-features)
================================ */
/* 図解エリア全体 */
.p-ai-features {
  text-align: center;
  margin: 40px 0;
}

/* 「特長」という青枠のタイトル */
.p-ai-features__title {
  display: inline-block;
  border: 2px solid #0069b9;
  color: #0069b9;
  font-size: 30px;
  font-weight: bold;
  padding: 10px 80px;
  border-radius: 8px;
  background: #ffffff;
  margin-bottom: 20px;
}

/* 3つの青い箱を並べる枠 */
.p-ai-features__cards {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* 青い箱 */
.p-ai-card {
  background: #0069b9;
  color: #ffffff;
  flex: 1;
  /* 3つの箱の幅を均等にする */
  padding: 20px 10px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 下向き矢印 */
.p-ai-features__arrow {
  margin-bottom: 15px;
}

/* 結論テキスト */
.p-ai-features__result {
  font-size: 26px;
  font-weight: bold;
  color: #333333;
}

/* ================================
  03. かんたん・便利 専用スタイル
================================ */

/* サポート機能 */
.p-support-title span {
  display: block;
  font-size: 26px;
  color: #189cc5;
  font-weight: normal;
  margin-bottom: 5px;
}

/* サポート機能の小見出し（青い丸付き） */
.p-support-title {
  font-size: 30px;
  color: #333333;
  margin-bottom: 20px;
  font-weight: bold;
}


/* サポート機能②：タブレット入力の特殊レイアウト */
.p-support-tablet-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  margin: 40px 0;
}

.p-support-tablet-img1 {
  width: 30%;
}

/* 左側の長い図 */
.p-support-tablet-sub {
  width: 40%;
  position: relative;
}

/* 右側のセット */
.p-support-tablet-img2 {
  width: 100%;
  margin-bottom: 20px;
}

/* スクリーンショット */
.p-support-tablet-img3 {
  width: 80%;
}

/* 悩む人のイラスト */

/* チェックリスト（サポート機能③） */
.c-check-list {
  margin-bottom: 30px;
}

.c-check-list li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 10px;
  color: #333;
}

/* チェックアイコンの作成（FontAwesomeなしでも擬似要素で表現） */
.c-check-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #189cc5;
  font-weight: bold;
  font-size: 20px;
}

/* 便利な共通クラス：PC/スマホの出し分け */
.u-pc-only {
  display: block !important;
}

.u-sp-only {
  display: none !important;
}

/* ================================
  05. フォローアップ機能(Followcare)
================================ */
/* ※P-CUBE+gのオプション機能となります。 */
.p-detail-block__option-label {
  font-size: 18px;
  color: #666;
  margin-top: 0px;
  margin-bottom: 10px;
}

/* --- 文章の左詰めを分かりやすくする --- */
.p-follow-desc {
  display: inline-block;
  text-align: left;
  max-width: 800px;
  width: 100%;
  line-height: 1.8;
}

.p-follow-main {
  text-align: center;
  margin-bottom: 50px;
}

/* フォロケアロゴ */
.p-follow-logo {
  max-width: 650px;
  margin: 0 auto 30px;
}

/* 6つの機能を並べるグリッド（PCは3列） */
.p-follow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 50px;
}

/* 各カード */
.p-follow-item {
  background: #ffffff;
  padding: 30px 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* 処方箋送信～電子お薬手帳 */
.p-follow-item__title {
  color: #228B22;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 15px;
  min-height: 2.8em;
  /* 2行になっても高さが揃うように */
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-follow-item__icon {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.p-follow-item__icon img {
  max-height: 100%;
  width: auto;
}

/* 説明部分 */
.p-follow-item__text {
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  color: #333;
}

/* ボタンエリア */
.p-follow-footer {
  text-align: center;
  margin-top: 30px;
}

/* ボタンのデザイン */
.p-follow-footer .c-btn {
  display: inline-block;
  background-color: #228B22;
  color: #ffffff;
  font-size: 22px;
  font-weight: bold;
  padding: 10px 90px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* ホバー時の挙動 */
.p-follow-footer .c-btn:hover {
  background-color: #007932;
  transform: translateY(-2px);
  /* マイナスをつけると上にフワッと浮きます */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  /* 浮いた分の影をつける */
}

/* ================================
  06 ご利用料金セクション (.p-price)
================================ */
/* 各セクションの大見出し（ご利用料金） */
.c-section-title {
  text-align: center;
  font-size: 32px;
  color: #333333;
  margin-bottom: 40px;
}

.p-price {
  padding: 10px 0;
  background: #f5f5f5;
  /* 前後のセクションと区別するための背景色 */
}

/* 料金表の1行ごとの枠 */
.p-price__item {
  display: flex;
  /* 左（タイトル）と右（内容）を横並びにする */
  background: #ffffff;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  /* 角丸を適用するため */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 左側の水色のタイトル部分 */
.p-price__item-title {
  width: 250px;
  background: #eef7ff;
  color: #189cc5;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  margin-left: 10px;
}

/* 右側の内容部分 */
.p-price__item-content {
  flex: 1;
  /* 余った幅をすべて使う */
  padding: 30px;
  color: #333333;
  font-size: 15px;
  line-height: 1.8;
}

/* --- パッケージ構成のリスト（画像の代わり） --- */
.p-price__package-list {
  display: flex;
  flex-wrap: wrap;
  /* 画面幅に合わせて自動で改行させる */
  gap: 12px 10px;
  /* 上下の隙間12px、左右の隙間10px */
  margin: 20px 0 15px;
  /* 上下の余白 */
  padding: 0;
  list-style: none;
}

.p-price__package-list li {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #e88b32;
  /* 画像に合わせたオレンジの枠線 */
  color: #e88b32;
  border-radius: 50px;
  /* 丸みを持たせる */
  padding: 6px 16px;
  font-size: 14px;
  font-weight: bold;
  background-color: #ffffff;
  line-height: 1.4;
}

/* （※）の部分を調整 */
.p-price__package-list li small {
  font-size: 10px;
  font-weight: normal;
  margin-left: 4px;
}

/* --- 注釈エリア（上の余白をなくす） --- */
.p-price__note {
  font-size: 14px;
  color: #666;
  margin-top: 0;
  /* 変更：15px から 0 に変更 */
}

/* 注釈内の段落（行）同士の隙間を狭くする */
.p-price__note p {
  margin-top: 0;
  margin-bottom: 0px;
  line-height: 1.5;
}

.p-price__note p:last-child {
  margin-bottom: 0;
}

/* ================================
  ノートPC対応 (1265px以下)
================================ */
@media screen and (max-width: 1265px) {

  /* 特徴セクション */
  /* ※画面が少し狭くなってきたら、はみ出しを防ぐ */
  .p-feature__item-text {
    white-space: normal;
  }

  .p-feature__icon img {
    max-width: 100%;
  }

  /* イラスト画像を左寄せにして小さくする★ */
  .p-detail-block__img--sm {
    text-align: right;
  }

  .p-detail-block__img--sm img {
    max-width: 300px;
  }
}

/* ================================
  タブレット対応 (1024px以下)
================================ */
@media screen and (max-width: 1024px) {

  /* 特徴セクション */
  /* タブレットは画面が狭いので「3列」に変更する */
  .p-feature__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 20px;
    padding: 0 20px;
  }

}

/* ================================
  スマホ対応 (768px以下)
================================ */
@media screen and (max-width: 768px) {

  /* == メインセクション == */
  .p-hero {
    padding: 40px 5%;
    background-position: center right 20%;
  }

  .p-hero__inner {
    flex-direction: column;
    gap: 20px;
  }

  .p-hero__left,
  .p-hero__right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .p-hero__left img {
    width: 90%;
    margin: 0 auto 15px auto;
  }

  .p-hero__right h1 {
    font-size: 22px;
    margin-bottom: 15px;
    line-height: 1.5;
  }

  .p-hero__right img {
    width: 85%;
    margin: 0 auto;
  }

  .p-hero__bottom-bar {
    display: none;
  }

  .c-btn-cv {
    font-size: 15px;
    padding: 16px 20px;
    width: 100%;
    max-width: 340px;
  }

  /* == 特長セクション＝ == */
  .p-feature {
    padding: 50px 0;
  }

  .p-feature__title {
    font-size: 28px;
  }

  .p-feature__lead {
    font-size: 15px;
    text-align: left;
    /* スマホではリード文を左揃えに */
    padding: 0 15px;
  }

  /* スマホはスクロールを減らすために「2列」に変更する */
  .p-feature__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 0 15px;
  }

  /* 5つのうち、最後の1つだけは幅を2列分使って中央に大きく表示する */
  .p-feature__item:last-child {
    grid-column: span 2;
  }

  .p-feature__item-title {
    font-size: 18px;
  }

  .p-feature__item-text {
    font-size: 14px;
    white-space: normal;
  }

  /* アイコンをスマホ用に小さくする */
  .p-feature__icon {
    height: 110px;
    margin-bottom: 10px;
  }

  /* == 詳細セクション、01 クラウドを採用 == */
  .p-detail-block {
    padding: 30px 20px;
    /* スマホは内側の余白を狭くする */
  }


  .p-detail-block__num {
    font-size: 45px;
    margin-right: 20px;
  }

  .p-detail-block__title {
    font-size: 30px;
  }

  .p-detail-block__sub-title {
    font-size: 22px;
  }

  .p-detail-block__text {
    font-size: 15px;
  }

  .p-detail-block__img img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* 特定の画像（イラストなど）をスマホで小さくする */
  .p-detail-block__img--sm img {
    max-width: 220px;
  }


  /* == 02. AI薬歴機能 == */
  /* 「特長」ラベルの調整 */
  .p-ai-features__title {
    font-size: 23px;
    padding: 8px 0;
    /* 横のパディングをなくし、幅を指定する */
    width: 100%;
    /* 横幅いっぱいにする */
    max-width: 250px;
    /* ただし、広がりすぎないように制限 */
    margin: 0 auto 20px;
    /* 中央寄せ */
    display: block;
  }

  /* カードを縦に並べる設定 */
  .p-ai-features__cards {
    flex-direction: column;
    /* 縦並びにする */
    align-items: center;
    /* 中央に揃える */
    gap: 15px;
    /* カード同士の隙間 */
    max-width: 100%;
  }

  /* 青いカードの調整 */
  .p-ai-card {
    width: 100%;
    /* 幅をいっぱいにする */
    max-width: 250px;
    /* 画像のイメージに合わせて少し絞る */
    min-height: 50px;
    /* 高さを揃えて見栄えを良くする */
    padding: 15px 10px;
    font-size: 15px;
    margin: 0 auto;
    /* 中央寄せ */
  }

  /* 矢印の調整 */
  .p-ai-features__arrow {
    margin: 20px 0;
    /* 前後の余白 */
  }

  .p-ai-features__arrow img {
    width: 150px;
    /* 矢印をスマホでも目立たせる大きさ */
    height: auto;
  }

  /* 結果テキストの調整 */
  .p-ai-features__result {
    font-size: 20px;
    line-height: 1.4;
  }

  /* == 03. かんたん・便利 専用スタイル == */
  /*  出し分け設定の切り替え */
  .u-pc-only {
    display: none !important;
  }

  .u-sp-only {
    display: block !important;
  }

  /* サポート機能タイトルのスマホ調整 */
  .p-support-title {
    font-size: 20px;
  }

  /* スマホ時に画像を2枚横に並べるグリッド */
  .p-support-img-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 20px;
  }

  /* タブレットレイアウトを縦並びに */
  .p-support-tablet-layout {
    flex-direction: column;
    align-items: center;
  }

  .p-support-tablet-img1 {
    width: 60%;
  }

  .p-support-tablet-sub {
    width: 80%;
  }

  /* == 05. フォローアップ機能 === */
  .p-detail-block__title-group {
    width: 100%;
  }

  /* フォロケアロゴ */
  .p-follow-logo {
    max-width: 450px;
  }

  /* スマホでは2列に並べる（1列だと長すぎるため） */
  .p-follow-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .p-follow-item {
    padding: 20px 10px;
  }

  .p-follow-item__title {
    font-size: 20px;
  }

  .p-follow-item__text {
    font-size: 15px;
  }

  /* 「Followcare(フォロケア)を見てみる」ボタン */
  .p-follow-footer .c-btn {
    padding: 15px 30px;
    width: auto;
    max-width: 280px;
    display: inline-block;
    font-size: 16px;
  }

  /* == 06 ご利用料金 == */

  /* ご利用料金 */
  .c-section-title {
    font-size: 30px;
    margin-bottom: 30px;
  }

  .p-price,
  .p-faq {
    padding: 50px 0;
  }

  /* 料金表の横並びを解除して縦並びにする */
  .p-price__item {
    flex-direction: column;
  }

  .p-price__item-title {
    width: 80%;
    margin: 20px auto 0;
    padding: 10px;
    /* 上下のパディングを少し詰めるとよりスマートです */
  }

  .p-price__item-content {
    padding: 20px 15px;
    text-align: left;
  }

  /* パッケージ構成リストのスマホ調整 */
  .p-price__package-list {
    gap: 8px;
    /* スマホでは隙間を少し詰める */
    margin: 15px 0;
  }

  .p-price__package-list li {
    font-size: 13px;
    /* 文字サイズを少し小さく */
    padding: 5px 12px;
  }

}