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

/* 初めての方へ：犬猫を並べる（スマホ＝縦） */
.begin-list{
  display:flex;
  flex-direction:column;
  gap: 32px;
}

/* 1ブロック */
.begin-item{
  display:flex;
  align-items:center;
  gap: 24px;
  padding: 24px;
  border: 2px solid var(--navy);
  border-radius: 16px;
  background: #fff;
}

/* dt(画像) */
.begin-item dt{
  flex: 0 0 140px;   /* スマホ基準 */
}
.begin-item dt img{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* dd(文) */
.begin-item dd{
  margin:0;
  line-height:1.8;
}

/* タブレット：画像だけ少し大きく */
@media (min-width:768px){
  .begin-item dt{
    flex: 0 0 160px;
  }
  .begin-item dt img{
    max-width: 160px;
  }
}


/* PC以上：ここで初めて2カラム */
@media (min-width:1024px){
  .begin-list{
    flex-direction:row;
    align-items: stretch;
  }
  .begin-item{
    flex: 1;
  }
  .begin-item dt{
    flex: 0 0 180px;
  }
  .begin-item dt img{
    max-width: 180px;
  }
}

/*ーーーーーーーーーーーーーーーーーーーーーー*/
.wannyan {
  display: flex;
  flex-wrap: wrap;
	flex-direction: row;
    align-items: center;
	border: 2px solid var(--navy);
  border-radius: 20px;        /* 角丸 */
  padding: 32px 32px 32px 32px;              /* 内側の余白 */
  list-style: none;
  margin: 40px auto;
}
.wannyan ul{
}
  /* 左：画像 */
  .wannyan li:nth-child(1) {
    flex: 0 0 35%;
  }

  /* 右：文字側（犬＋説明） */
  .wannyan li:nth-child(2),
  .wannyan li:nth-child(3) {
    flex: 0 0 65%;
  }
.card-wan {
  display: block;   /* スマホは縦 */
}
.wannyan .photo img {
  width: 120%;        /* ← ここで大きくする */
  max-width: none;    /* 念のため制限解除 */
  height: auto;
}
@media (min-width: 768px) {
  .card-wan {
    display: flex;
    gap: 24px;              /* 2枚の間隔 */
  }
  .card-wan .wannyan {
    flex: 1;                /* 50%ずつ */
  }
  .wannyan .photo img {
    width: 100%;      /* 通常サイズに戻す */
  }
}




/* ===== 注意ボックス ===== */
.notice-box{
  background: #e60012;           /* 赤 */
  color: #fff;
  border-radius: 16px;
  padding: 24px;
  margin: 0px 0;
}

/* 中身レイアウト */
.notice-inner{
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* アイコン */
.notice-icon img{
  width: 100px;
  height: auto;
  display: block;
}

/* テキスト */
.notice-title{
  font-size: 1.4em;
  font-weight: 700;
  margin: 0 0 8px 0;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(255,255,255,0.8);
}
.notice-box .notice-title{
  color: #fff;
}
.notice-text p{
  margin: 0;
  line-height: 1.8;
}

/* ===== タブレット以上 ===== */
@media (min-width: 768px){
  .notice-box{
    padding: 32px;
  }
  .notice-icon img{
    width: 64px;
  }
}

.inu{
	font-size: 4rem;
}
.jisan{
	width: 80%;
	padding: 2em;
	background-color: #fff;
}

@media (min-width:768px){
.jisan{
	width: 60%;
}
}

/* ------------------------------------ */
/* ▼診察の流れ */
/* ------------------------------------ */
.nagare{
	display: flex;
  flex-wrap: wrap;
	align-items: stretch; /* ← 超重要 */
  gap: 1%;
  position: relative;
	margin-bottom: 2em;
}
.nagare::before{
  content: "";
  position: absolute;
  left: 30%;              /* n_item1 の右端に合わせる */
  top: 0;
  height: 100%;           /* ← 行全体の高さ */
  width: 2px;
  background-color: #0b3a5a; /* ネイビー系 */
}
.n_item1{
	flex-basis: 30%;
	font-size: 2.3rem;
	text-align: center;
	line-height: 1;
	position: relative; 
}
.n_item2{
  flex-basis: 68%;
  display: flex;              /* ← 追加 */
  align-items: center;        /* 縦中央 */
  justify-content: center;    /* 横中央 */
}

.n_item2 img{
  width: 60%;                 /* ← 80%に */
  height: auto;
 margin-bottom: 4px;
}
.n_item3{
	flex-basis: 68%;
	margin-left: 33%
}
.n_num{
	font-size: 6rem;
	padding: 0px 6px 0 0;
	line-height: 1;   
	display: block;
}




/* ▼PC（1024px〜） */
@media (min-width: 1024px) {
  .nagare {
    flex-direction: row;
    align-items: stretch;
    gap: 1%;
    position: relative;
  }

  /* 縦線（PC用：全高） */
  .nagare::before {
    content: "";
    position: absolute;
    left: 15%;
    top: 0;
    height: 100%;
    width: 2px;
    background-color: #0b3a5a;
  }

  .n_item1 {
    flex: 0 0 15%;
    text-align: center;
    padding-bottom: 0;
  }
  .n_item2 {
    flex: 0 0 20%;
    align-items: center;
  }

  .n_item2 img {
    width: 80%;
  }

  .n_item3 {
    flex: 0 0 63%;
	  margin-left: 0%
  }
}