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

main{
	background: url("../image/common/bg/bg-dog.jpg") top / cover;
}

/*===== トップイメージ =====*/
h2{
	margin-bottom:20px;
}

h3{
	font-family: var(--font-ja);

}

li{
	font-size: clamp(14px, 3.5vw, 16px);
}

.fv-lower-img {
  width: 100%;
  height: clamp(80px, 32vw, 300px);
  object-fit: cover;
  display: block;

  /* 上下左右ぼかし */
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%),
    linear-gradient(to right,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;

  mask-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%),
    linear-gradient(to right,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
}

/* =========================
   ドッグラン
========================= */
/* クリック対象の見た目はそのまま */
.modal img { 
	aspect-ratio:16 / 9;
	cursor: zoom-in; 
	border-radius:20px;
}

/*===== モーダル全体  =====*/
/* 常に最前面・画面中央 */
.modal-container{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}

.modal-container.active{ 
	display: grid; 
	place-items: center; 
}

/* 背景暗幕 */
.modal-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
}

/* 本体は中央寄せ。サイズは既存方針に準拠 */
.modal-body{
  position: relative;
  max-width: 960px;
  width: min(100vw, 960px);
  margin: 0;
}

.modal-img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* altテキストの代替表示は消す（非表示） */
.modal-caption{ 
	display: none; 
}

/* 閉じるボタン */
.modal-close{
	text-align: center;
	padding: 5px 0;
	color: var(--white);
	width: 100%;
	background-color: rgba(0, 0, 0, .4);
	cursor: pointer;
}

/* 背景スクロールロック用（JSで付与） */
.body--lock{
  position: fixed; 
  overflow: hidden;
  width: 100%;
}

/* 表示時にアニメーションを適用 */
.modal-container.active .modal-body {
  animation: modalZoomIn 0.3s ease-out forwards;
}

/* ズームアップアニメーション */
@keyframes modalZoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}



/* =========================
   ご利用料金（fee）
========================= */
.fee table{
	max-width: 400px;
	width:100%;
}

.fee table th,
.fee table td{
  font-family: var(--font-ja);
  border: 1px solid #ccc;
  text-align: center;
  padding: 2px 10px;
}


.fee table th{
  background: var(--main);
  color: #fff;
  font-weight: 400;
}

.fee li{
	list-style: disc;
	margin-left: 1.2em;
}

/* =========================
   注意事項（attention）
========================= */
/* 数字 */
.attention .number{
  display:grid;
  place-items:center;
  inline-size:1.8em;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--main);
  color:#fff;
  font-weight:400;
  line-height:1;
}

/* ★ トップレベルのLIのみグリッド化（ネストしたliには当てない） */
.attention .inner > ul > li{
  display:grid;
  grid-template-columns:2em 1fr; /* [丸数字] [本文] */
  column-gap:.5em;
  align-items:start;
}
.attention .inner > ul > li + li{ 
	margin-top:5px; 
}

.attention .li-body p + p{ 
	margin-top:.4em; 
}

/* サブリスト：余白ゼロ＋文字小さめ */
.attention .li-body .sub{
  list-style: disc outside;
  padding-left: 2em;
  margin: .3em 0 0;
  line-height: 1.6;
}

.attention .li-body .sub li{
	font-size: .9em;
}

/* 項目間の余白をゼロに */
.attention .li-body .sub > li{ 
	margin: 0; 
}
.attention .li-body .sub > li + li{ 
	margin-top: 0; 
}