@charset "UTF-8";
/* CSS Document */

/* ================================
   スマホ料金表（カード型）
================================ */

.price-sp {
  padding: 16px;
}

/* 1グループ＝1カード */
.price-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* --- グループ見出し --- */
.group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.group-header img {
  width: 64px;
  height: auto;
  flex-shrink: 0;
}

.group-title {
  line-height: 1.4;
}

.group-label {
  font-weight: 700;
  display: block;
}

.group-breed {
  color: #666;
}
.group-price {
  color: #666;
}

/* --- 料金リスト --- */
.price-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9f9f9;
  border-radius: 10px;
  padding: 10px 12px;
}

.price-list dt {
  font-weight: 600;
}

.price-list dd {
  font-weight: 700;
  margin: 0;
}

/* --- グループ別カラー（後で調整可能） --- */
.group-a { border-left: 6px solid #b9d8a8; }
.group-b { border-left: 6px solid #eac1a1; }
.group-c { border-left: 6px solid #c7d3e9; }
.group-d { border-left: 6px solid #f2d27a; }
.group-e { border-left: 6px solid #d7b7d8; }




/* --- 健康診断（後で調整可能） --- */
/* 黒文字前提の背景色（調整版） */
.health-course-table .bg-step-1 th,
.health-course-table .bg-step-1 td {
  background: #eef6fa; /* かなり薄い */
}

.health-course-table .bg-step-2 th,
.health-course-table .bg-step-2 td {
  background: #d7eaf2;
}

.health-course-table .bg-step-3 th,
.health-course-table .bg-step-3 td {
  background: #bcdce8;
}

.health-course-table .bg-step-4 th,
.health-course-table .bg-step-4 td {
  background: #a3cddc;
}

.health-course-table .bg-step-5 th,
.health-course-table .bg-step-5 td {
  background: #8bbdcc; /* ★E：黒文字が読める上限 */
}
.health-course-table th,
.health-course-table td {
  color: #333;
}
/* コース名ブロックは太くしない */
.health-course-table .group-label,
.health-course-table .group-breed,
.health-course-table .group-price {
  font-weight: 400; /* = normal */
}
.health-course-table .group-text{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 20px;
  row-gap: 2px;
}

/* A / B / C */
.health-course-table .group-label{
  grid-column: 1;
  grid-row: 1;
  font-weight: 500; /* 必要なら400でもOK */
}

/* コース名 */
.health-course-table .group-breed{
  grid-column: 2;
  grid-row: 1;
}

/* 価格 */
.health-course-table .group-price{
  grid-column: 2;
  grid-row: 2;
  text-align: right;
  font-size: 0.95em; /* 少し控えめにすると上品 */
}
.health-course-table .group-text .group-label,
.health-course-table .group-text .group-breed,
.health-course-table .group-text .group-price {
  color: #000;        /* or #222 */
  font-weight: 400;  /* 太くしない */
}
.health-course-table .group-label{
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  grid-row: 1 / span 2;
  align-self: start;   /* ← center → start に変更 */
}
/* スマホ健診カード：ヘッダー */
.health-course-sp .group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.health-course-sp .group-title {
  display: flex;
  align-items: baseline; /* ← A とコース名を揃える */
  gap: 8px;
}

.health-course-sp .group-label {
  font-size: 3rem;      /* A を目立たせる */
  font-weight: 700;
  line-height: 1;
}

.health-course-sp .group-breed {
  font-size: 1.4rem;
  font-weight: 600;
}

.health-course-sp .group-price {
  font-size: 1.4rem;
  font-weight: 600;
  white-space: nowrap;
}
/* 検査項目リスト */
.health-course-sp .price-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;  /* ← 縦ズレ防止 */
  padding: 10px 14px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.65);
  border-radius: 10px;
}

.health-course-sp .price-list dt {
  font-weight: 600;
}

.health-course-sp .price-list dd {
  font-weight: 700;
}
/* スマホ健診カード共通 */
.health-course-sp .price-card {
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 20px;
}
/* 最下部だけマージンを詰める */
.health-course-sp .price-card:last-of-type {
  margin-bottom: 0px;
}

/* PCと同じ段階色 */
.health-course-sp .bg-step-1 { background: #eef6fa; }
.health-course-sp .bg-step-2 { background: #d7e9f1; }
.health-course-sp .bg-step-3 { background: #bddde8; }
.health-course-sp .bg-step-4 { background: #9fc9d8; }
.health-course-sp .bg-step-5 { background: #7fb3c6; }

/* before after */

.before-after{
  display: flex;
  flex-wrap: wrap;
align-items: flex-end;
	width:100%;
	margin: 0 auto;
}
.image-before{
	flex-basis: 40%;
	text-align: center;
}
.yajirushi{
	flex-basis: 20%;
	text-align: center;
}
.image-after{
	flex-basis: 40%;
	text-align: center;
}
.henbai{
  transform: scaleX(3.0);  /* 横幅を2倍にする */
}
.bf4 {
    display: grid;
    grid-template-columns: 4em 1fr;
    column-gap: 1.6rem;
    row-gap: .8rem;
  }

@media (min-width: 1024px) {
.before-after{
	width:70%;
}
}

/* ================================
   オプション料金
================================ */
.option-sns-wrap {
	display: flex;
  flex-wrap: wrap;
	gap:2%;
	 max-width: 900px;   /* ← 幅を制限 */
  margin: 0 auto;    /* ← 箱そのものを中央 */
	flex-direction: column; /* ← スマホは縦 */
}
.option-price{
	flex: 1;
}
.option-cut {
  display: flex;
  flex-wrap: wrap;            /* 注釈を下に落とすため */
  align-items: baseline;
  border-bottom: 1px solid #000;
  padding: 10px 0;
  margin-bottom: 18px;
}

/* 左：項目名 */
.option-cut dt {
  flex: 0 0 7em;              /* 固定幅 */
  font-weight: 500;
}

/* 右：価格 */
.option-cut dd {
  flex: 1;
  text-align: right;
  margin: 0;                  /* ← 超重要 */
}

/* 注釈テキスト */
.option-cut .note {
  flex-basis: 100%;
  color: #666;
  margin-top: 6px;
}

/* SNSボタン */
.option-sns {
  margin-top: 2em;
}

.line {
  width: 100%;
  display: flex;
  justify-content: center;
}
.line img,
.insta img {
  width: 70px;
  display: block;
  margin: 0 auto;
	padding: 8px 0 0
}
.insta {
  width: 100%;
  display: flex;
  justify-content: center;
	 gap: 50px;          /* ← これだけでOK */
}
.insta ul{

}
.insta li{
	
}

@media (min-width: 768px) {
  .option-sns-wrap {
    flex-direction: row;   /* ← PCで横 */
    gap: 2%;
  }

  .option-price,
  .option-sns {
    flex: 1;
  }
.option-sns {
  margin-top: 0;
}
}

/* ================================
  スタッフ
================================ */

/* スタッフ全体 */
.trim-staff {
  display: flex;
  flex-direction: column;   /* スマホ：縦 */
  gap: 3em;
}

/* 各スタッフカード */
.staff-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 写真＋テキスト */
.staff-main {
  display: flex;
  flex-direction: column;   /* スマホ：縦 */
  align-items: center;
  gap: 1em;
}

/* 写真 */
.staff-main img {
  width: 100%;
  max-width: 350px;
  height: auto;
}

/* テキスト */
.staff-info dt {
  font-weight: 700;
  font-size: 1.1em;
}
.staff-info dd {
  margin: 0.4em 0 0;
}

/* 趣味（常に下） */
.staff-hobby {
  margin-top: 1em;
	text-align: left;
}

@media (min-width: 768px) {
.staff-hobby {
  margin-top: 1em;
}	
}

/* ================================
   PC
================================ */
@media (min-width: 1300px) {
  /* スタッフを横並び */
  .trim-staff {
    flex-direction: row;
  }

  .staff-card {
    flex: 1;                 /* 1:1 */
    text-align: left;
  }

  /* 写真＋テキストを横並び */
  .staff-main {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5em;
  }

  .staff-main img {
    width: 300px;
  }
}



/* ================================
   PCでは非表示
================================ */
@media (min-width: 1024px) {
  .price-sp {
    display: none;
  }
}

/* ================================
   PC料金表（テーブル）PC用テーブル
================================ */
.price-pc {
  display: none;
}
.medical {
  background-color: #d6dce4 !important; /* 背景色を変更 */
}
.medical2 {
  background-color: #5497b0 !important; /* 背景色を変更 */
	color: #fff;
}
.price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.price-table th,
.price-table td {
  padding: 16px;
  text-align: center;
  border-bottom: 1px solid #eee;
}


.price-table thead th {
  background: #f2f2f2;
  font-weight: 700;
}

.price-table tbody th {
  background: #fafafa;
  font-weight: 700;
}

.price-table tbody th span {
  display: block;
  color: #666;
  margin-top: 4px;
}


/* スマホ・タブレット表示切り替え */
.price-sp {
  display: block;
}
.price-pc {
  display: none;
}

/* PC */
@media (min-width: 1024px) {
  .price-sp {
    display: none;
  }
  .price-pc {
    display: block;
  }
}
/* 左列（犬＋グループ） */
.price-table .group-cell {
  text-align: left;
  padding: 16px;
  white-space: normal;
}

/* 横並び */
.group-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 犬画像 */
.group-wrap img {
  width: 64px;          /* ← 原稿感を保つベストサイズ */
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.group-wanwan{
	
}
.group-abc{
  display: flex;
	font-size: 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;   /* 中央寄せ */
  line-height: 1.1;     /* 全体の行間を制御 */
	padding: 0 0px 0 16px;
}
.group-kind{
	text-align: center;
	font-weight: normal;
	width: 11em;

}
.big-abc{
	font-size: 4rem;
	line-height: 1;
}






/* テキスト */
.group-text {
  line-height: 1.4;
}

.group-text .group-label {
  font-weight: 700;
  display: block;
}

.group-text .group-breed {
  font-size: 0.9em;
  color: #666;
  display: block;
  margin-top: 4px;
}
.group-price {
  color: #666;
	text-align: end;
}
.remarks {
  text-align: left !important;  /* <td>の中央揃えを解除 */
}

.medical-text {
  text-align: left !important;  /* pタグ内のテキストを左揃え */
}
.waribiki{
	border: 2px solid #5497b0;
	padding: 6px 12px;
	display: inline-block; 
	border-radius: 10px;	
}


/* ================================
  写真グリッド
================================ */
.trim-photo {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* スマホ：4枚 */
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 768px) {
.trim-photo {
    grid-template-columns: repeat(10, 1fr); /* PC：10枚 */
    gap: 12px;
  }
}

/* 画像 */
.trim-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;   /* 正方形に揃える */
  object-fit: cover;     /* トリミングして美しく */
  border-radius: 8px;    /* お好みで */
  display: block;
}

/* ================================
  利用規約
================================ */
.kiyaku{
	padding: 1em 1.6em;
	color: #333;
}
.kiyaku p{
	font-size: 1.6rem;
}
.kiyaku li{
	font-size: 1.6rem;
}


/* ===============================
  トリミングの特徴
=============================== */
.medical-grid {
  display: grid;
  grid-template-columns: 1fr;   /* スマホ：1列 */
  gap: 24px;
}

/* PC：2列 */
@media (min-width: 768px) {
  .medical-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* カード */
.medical-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
}

/* summary のデフォルト矢印を消す */
.medical-card summary {
  list-style: none;
  cursor: pointer;
}
.medical-card summary::-webkit-details-marker {
  display: none;
}

/* 上段（常に表示） */
.medical-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.medical-head img {
  width: 80px;
  height: auto;
  border-radius: 6px;
}

.medical-title {
  flex: 1;
  font-size: 1.05em;
  line-height: 1.6;
}

/* 矢印 */
.arrow {
  width: 12px;
  height: 12px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

/* 開いたら矢印回転 */
details[open] .arrow {
  transform: rotate(-135deg);
}

/* 下段（にゅるっと出る） */
.medical-body {
  margin-top: 16px;
  animation: slideDown 0.35s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* ================================
  どうして検診が必要なの？
================================ */
.life-stage {
  display: flex;
  align-items: center;
	border: 1px solid #ccc;
  gap: 16px;
}

.life-stage li{
}
/* 左画像：20% */
.life-stage li.img-left {
  width: 20%;
}

/* テキスト：80% */
.life-stage li.stage-text {
  width: 80%;
}

/* 右画像：スマホでは非表示 */
.life-stage li.img-right {
  display: none;
}

/* 画像共通 */
.life-stage img {
  width: 100%;
  height: auto;
  display: block;
}
.life-stage img {
  max-width: 100%;
  height: auto;
}
.life-stage .img-right {
  display: none;
}
.kenshin-title{
	font-size: 1.7rem;
	text-align: left;
}



/* ===== タブレット以上 ===== */
@media (min-width: 768px) {
  .life-stage .img-right {
    display: block;
  }
  .life-stage {
    flex-wrap: nowrap;
    align-items: center;
    gap: 24px;
  }

  /* 左画像 */
  .life-stage li.img-left {
    width: 15%;
  }

  /* テキスト */
  .life-stage li.stage-text {
    width: 70%;
  }
  /* 右画像 */
  .life-stage li.img-right {
    display: block;
    width: 15%;
  }
.kenshin-title{
	font-size: 2.1rem;
	text-align: center;
}
}
	
/* =================================
   血液検査でわかること
================================= */
.wakaru {
  display: flex;
  flex-wrap: wrap;
}

.wakaru .left {
  flex-basis: 70%;
}

.wakaru .right {
  flex-basis: 30%;
}