@charset "utf-8";

/* ==========================================================================
   POINT 8: 会計ソフト連携セクション
   ========================================================================== */

/* 全体コンテナ */
.solutionMedicalPharmacy_stepBox {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin-top: 30px;
  gap: 0;
}

/* 各ステップの基本枠 */
.solutionMedicalPharmacy_stepItem {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ラベル部分（ヘッダー） */
.solutionMedicalPharmacy_stepLabel {
  margin: 0;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ラベル内のアイコン：35度回転 */
.solutionMedicalPharmacy_stepLabel img {
  width: auto;
  height: 1.2em;
  vertical-align: middle;
  transform: rotate(-35deg);
  display: inline-block;
}

/* 各ボックスの中身 */
.solutionMedicalPharmacy_stepInner {
  padding: 20px 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* カラーバリエーション */
.solutionMedicalPharmacy_stepItem.is-before { background: #e3f2fd; }
.solutionMedicalPharmacy_stepItem.is-before .solutionMedicalPharmacy_stepLabel { background: #bbdefb; color: #333; }

.solutionMedicalPharmacy_stepItem.is-solution { background: #fffde7; }
.solutionMedicalPharmacy_stepItem.is-solution .solutionMedicalPharmacy_stepLabel { background: #fff9c4; color: #333; }

.solutionMedicalPharmacy_stepItem.is-after { background: #e8f5e9; }
.solutionMedicalPharmacy_stepItem.is-after .solutionMedicalPharmacy_stepLabel { background: #c8e6c9; color: #333; }

/* 共通：リストスタイル */
.solutionMedicalPharmacy_checkList {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  width: 100%;
}

.solutionMedicalPharmacy_checkList li {
  font-size: 14px;
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 8px;
  line-height: 1.5;
  font-weight: bold;
}

.solutionMedicalPharmacy_checkList li::before {
  content: "・";
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* Before: リストの背景ボックス */
.solutionMedicalPharmacy_stepItem.is-before .solutionMedicalPharmacy_checkList {
  background-color: #b3e5fc;
  padding: 15px;
  border-radius: 10px;
  margin-top: 15px;
  box-sizing: border-box;
}

/* Solution: 吹き出し */
.solutionMedicalPharmacy_bubble {
  background: #ffcc80;
  padding: 15px 10px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 30px;
  width: 100%;
  text-align: center;
  position: relative;
}

/* After: メリット強調エリア */
.solutionMedicalPharmacy_meritBox {
  background-color: #c8e6c9 !important;
  padding: 12px 10px;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.solutionMedicalPharmacy_meritBox .meritTxt {
  color: #333;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  line-height: 1.4;
}

.solutionMedicalPharmacy_meritBox .meritTxt span {
  font-size: 1.1em;
  color: #d32f2f;
  background: linear-gradient(transparent 60%, #ffff00 60%);
  font-weight: 900;
}

.solutionMedicalPharmacy_meritBox .note-text {
  font-size: 11px;
  margin-bottom: 8px;
  color: #666;
}

/* 矢印のデザイン */
.solutionMedicalPharmacy_arrow {
  position: relative;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.solutionMedicalPharmacy_arrow::after {
  content: "";
  width: 16px;
  height: 16px;
  border-top: 4px solid #546e7a;
  border-right: 4px solid #546e7a;
  transform: rotate(45deg);
}

/* 画像サイズ調整 */
.solutionMedicalPharmacy_illust {
  width: 100%;
  display: flex;
  justify-content: center;
}

.solutionMedicalPharmacy_illust img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: contain;
}

/* ==========================================================================
   特徴3選スタイル
   ========================================================================== */

.solutionMedicalPharmacy_featureArea {
    margin: 40px auto;
    max-width: 1000px;
}

.solutionMedicalPharmacy_featureList {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.solutionMedicalPharmacy_featureList li {
    flex: 1;
    text-align: center;
    padding: 25px 20px;
    background: #fff;
    border: 4px solid #78c1d5;
    border-radius: 10px;
    box-sizing: border-box;
}

.solutionMedicalPharmacy_featureList .icon {
    font-size: 40px;
    color: #035fb4;
    margin-bottom: 15px;
}

.solutionMedicalPharmacy_featureList .ttl {
    font-size: 18px;
    font-weight: bold;
    color: #035fb4;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.solutionMedicalPharmacy_featureList .txt {
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
    text-align: center;
}

/* ==========================================================================
   ロゴグリッド
   ========================================================================== */

.solutionMedicalPharmacy_gridArea {
    max-width: 1000px;
    margin: 30px auto;
}

.solutionMedicalPharmacy_gridList {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.solutionMedicalPharmacy_gridItem {
    flex: 0 0 calc(25% - 6px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    background: transparent;
}

.solutionMedicalPharmacy_gridItem img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   ユーティリティ・装飾
   ========================================================================== */

/* マーカー（下線演出） */
.solutionMedicalPharmacy_markerGreen {
  background: linear-gradient(transparent 60%, #a5d6a7 60%);
  padding: 0 4px;
}

/* 強調キャッチコピー */
.solutionMedicalPharmacy_catch {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 20px;
  line-height: 1.6;
}

/* お困りごと：心の声 */
.solutionMedicalPharmacy_troubleVoice {
  display: block;
  font-size: 0.85em;
  font-weight: normal;
  margin-top: 0.5em;
  opacity: 0.9;
  line-height: 1.4;
}

/* ==========================================================================
   メディアクエリ (レスポンス調整)
   ========================================================================== */

/* --- PC表示時 (768px以上) --- */
@media only screen and (min-width: 768px) {
  .solutionMedicalPharmacy_stepItem { height: 450px; }
  .solutionMedicalPharmacy_stepInner {
    padding: 25px 15px;
    justify-content: space-between;
  }
  .solutionMedicalPharmacy_illust img { max-height: 180px; }
  .solutionMedicalPharmacy_stepItem.is-before .solutionMedicalPharmacy_illust { margin-bottom: 30px; }
  .solutionMedicalPharmacy_stepItem.is-solution .solutionMedicalPharmacy_stepInner { padding-top: 40px; }

  /* キャッチコピー強調 */
  .solutionMedicalPharmacy_catch {
    font-size: 24px;
    line-height: 1.8;
    letter-spacing: 0.02em;
  }
}

/* --- スマホ表示時 (767px以下) --- */
@media only screen and (max-width: 767px) {
  .solutionMedicalPharmacy_stepBox { flex-direction: column; align-items: center; }
  .solutionMedicalPharmacy_stepItem { width: 100%; height: auto; }
  .solutionMedicalPharmacy_arrow { width: 100%; height: 40px; margin: 5px 0; }
  .solutionMedicalPharmacy_arrow::after { transform: rotate(135deg); margin-top: -5px; }
  
  .solutionMedicalPharmacy_featureList { flex-direction: column; gap: 20px; }
  .solutionMedicalPharmacy_gridItem { flex: 0 0 calc(50% - 5px); height: 80px; }
  
  .solutionMedicalPharmacy_catch { font-size: 16px; margin-bottom: 20px; }
  .solutionMedicalPharmacy_troubleVoice { font-size: 12px; }
}


/* ==========================================================================
   特徴3選スタイル：アイコンサイズ調整
   ========================================================================== */

.solutionMedicalPharmacy_featureList .icon {
    /* アイコンエリアの高さを固定し、上下中央に配置 */
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 0; /* 隙間防止 */
}

.solutionMedicalPharmacy_featureList .icon img {
    /* 幅を100pxに固定し、高さはエリアに合わせる */
    width: 100px !important;
    height: 100% !important;
    /* 比率を保ちながら枠内に収める */
    object-fit: contain;
    margin: 0 auto;
}

/* スマホ表示時 (767px以下) の調整 */
@media only screen and (max-width: 767px) {
    .solutionMedicalPharmacy_featureList .icon {
        height: 80px; /* スマホでは少し高さを抑える */
    }
    .solutionMedicalPharmacy_featureList .icon img {
        width: 80px !important; /* スマホでは少し小さく */
    }
}

/* ロゴの背景を画像に合わせて調整する場合 */
.solutionMedicalPharmacy_gridItem img {
    background-color: #f5f5f5; /* 画像のような薄いグレー */
    padding: 10px; /* ボックス内の余白 */
    border: 1px solid #e0e0e0; /* 繊細な境界線 */
    border-radius: 4px;
    box-sizing: border-box;
}

/* スマホ表示時の見出しサイズ調整 */
@media only screen and (max-width: 767px) {
    .solutionMedicalPharmacy_gridArea .fs20 { font-size: 18px !important; }
    .solutionMedicalPharmacy_gridArea .fs16 { font-size: 14px !important; }
}


/* ==========================================================================
   ロゴグリッド（テキスト版）
   ========================================================================== */

.solutionMedicalPharmacy_gridArea {
    max-width: 1000px;
    margin: 30px auto;
}

.solutionMedicalPharmacy_gridList {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* カード間の隙間 */
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.solutionMedicalPharmacy_gridItem {
    flex: 0 0 calc(25% - 6px); /* PC4列 */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px; /* テキストに合わせた高さ調整 */
    padding: 10px;
    background-color: #f5f5f5; /* デザイン案の薄いグレー */
    border: 1px solid #e0e0e0; /* 薄い枠線 */
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    word-break: break-all;
}

/* --- メディアクエリ (スマホ対応) --- */
@media only screen and (max-width: 767px) {
    .solutionMedicalPharmacy_gridList {
        gap: 6px;
    }
    .solutionMedicalPharmacy_gridItem {
        flex: 0 0 calc(50% - 3px); /* スマホ2列 */
        min-height: 70px;
        font-size: 12px; /* スマホでは文字を少し小さく */
        padding: 8px;
    }
    
    .solutionMedicalPharmacy_gridArea .fs20 { font-size: 18px !important; }
    .solutionMedicalPharmacy_gridArea .fs16 { font-size: 14px !important; }
}