@charset "UTF-8";
section { color: #222; }

.breadcrumbs { background: #fff; }
.breadcrumbs ul li { color: #222; }
.breadcrumbs ul li + li::before { color: #222; }
.breadcrumbs ul li a { color: #222; }

section.plan-detail-main .inner { max-width: 800px; }
section.plan-detail-main .plan-category { font-size: 1rem; text-align: center; color: #9e7c1d; padding: 1rem 0; }
section.plan-detail-main .plan-copy { color: #fff; text-align: center; padding: .5rem; font-size: 1.2rem; line-height: 1.4; background: #A88F43; background: -webkit-linear-gradient(29deg, #a88f43 8%, #856814 72%, #695103 100%); background: -moz-linear-gradient(29deg, #a88f43 8%, #856814 72%, #695103 100%); background: linear-gradient(29deg, #a88f43 8%, #856814 72%, #695103 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#A88F43", endColorstr="#695103", GradientType=0); }
section.plan-detail-main .type { padding: 1rem 0; }
section.plan-detail-main .type img { display: block; max-width: 400px; margin: auto; }
section.plan-detail-main .menseki { padding: 1rem 0; background: #E7E8E9; background: -webkit-linear-gradient(90deg, #e7e8e9 0%, #d1d3d5 80%); background: -moz-linear-gradient(90deg, #e7e8e9 0%, #d1d3d5 80%); background: linear-gradient(90deg, #e7e8e9 0%, #d1d3d5 80%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#E7E8E9", endColorstr="#D1D3D5", GradientType=1); }
section.plan-detail-main .menseki .menseki-inner { display: grid; gap: 0 1rem; grid-template-columns: 45% 1fr; }
section.plan-detail-main .menseki .menseki-inner .senyu { text-align: right; font-size: .6875rem; line-height: 1; align-self: center; }
section.plan-detail-main .menseki .menseki-inner .senyu .num { font-size: 1.5rem; }
section.plan-detail-main .menseki .menseki-inner .senyu .num b { font-weight: normal; font-size: 170%; }
section.plan-detail-main .menseki .menseki-inner .senyu .num .tani { font-size: .6875rem; }
section.plan-detail-main .menseki .menseki-inner .other-menseki { font-size: .75rem; line-height: 1.4; align-self: end; }
section.plan-detail-main .menseki img { display: block; max-width: 400px; margin: auto; }
section.plan-detail-main .merit { margin-top: 1.5rem; display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
section.plan-detail-main .merit li { background: #F1F1F1; padding: .5rem; font-size: 1rem; line-height: 1.4; color: #9e7c1d; text-align: center; display: grid; place-content: center; /*display: grid;
place-content: center;*/ }
section.plan-detail-main .merit li .note { width: 100%; display: block; text-align: center; }
section.plan-detail-main .zu { margin-top: 1.5rem; position: relative; }
section.plan-detail-main .zu img { display: block; width: 100%; height: auto; }
section.plan-detail-main .zu .zoom { position: absolute; bottom: 0; right: 0; z-index: 2; display: block; width: 8.4577114428%; max-width: 40px; margin: 0 0 0 auto; }
section.plan-detail-main .img-box { margin: 1.5rem auto 0 auto; }
@media screen and (max-width: 768px) { section.plan-detail-main .merit { grid-template-columns: 1fr; } }

section.plan-detail-footer { padding-bottom: 0; }
section.plan-detail-footer .inner { max-width: 800px; }
section.plan-detail-footer .hanrei { padding-top: 3rem; line-height: 1.8; }
section.plan-detail-footer .hanrei .aw { margin-right: 1rem; line-height: 1; }
section.plan-detail-footer .hanrei .aw img { display: inline-block; height: 10px; width: auto; margin-right: .2rem; }
section.plan-detail-footer .backtoplan { margin: 3rem auto 0 auto; }
section.plan-detail-footer .backtoplan a { display: block; background: #c9bc9c; color: #fff; max-width: 400px; margin: auto; font-size: 1rem; text-align: center; padding: 1rem .5rem; position: relative; transition: .3s; }
section.plan-detail-footer .backtoplan a:hover { filter: brightness(80%); }
section.plan-detail-footer .backtoplan a::after { content: ""; display: block; width: .5rem; height: .5rem; border-top: solid 1px #fff; border-left: solid 1px #fff; transform: translateY(-50%) rotate(-45deg); position: absolute; top: 50%; left: .5rem; z-index: 1; }
@media screen and (max-width: 768px) { section.plan-detail-footer .hanrei .aw { margin-right: 5px; }
  section.plan-detail-footer .hanrei .aw img { height: 6px; margin-right: 2px; } }

/* 黒背景オーバーレイ */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 9999; cursor: zoom-out; opacity: 0; transition: opacity .25s ease; padding: 2rem; /* スクロール時に上下余白確保 */ overflow-y: auto; /* 画面が狭い時にスクロールできるように */ }

/* 白背景のボックス */
.lightbox-content { background: #fff; padding: 1rem; border-radius: 6px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.4); transform: scale(0.95); opacity: 0; transition: all .25s ease; max-width: 90vw; max-height: 90vh; /* ボックスの高さ制限 */ overflow: auto; /* 中身（画像）が大きい場合スクロール */ }

/* 表示時 */
.lightbox-overlay.show { opacity: 1; }

.lightbox-overlay.show .lightbox-content { opacity: 1; transform: scale(1); }

/* 画像 */
.lightbox-content img { width: 100%; height: auto; /* 画像が縦長でもはみ出さず、スクロール可能に */ max-width: 100%; display: block; }

/* スマホ用：横スクロールで画像を見る */
@media (max-width: 767px) { .lightbox-overlay { padding: 1rem; overflow-y: hidden; /* 縦スクロールさせない */ display: flex; justify-content: center; align-items: center; }
  .lightbox-content { max-width: 100vw; max-height: 100vh; /* 画面に収まるように */ overflow-x: auto; /* 横スクロールを有効に */ overflow-y: hidden; /* 縦スクロールを無効に */ white-space: nowrap; /* 横並び表示を強制（画像を横方向に大きく） */ }
  .lightbox-content img { height: 60vh; /* 高さを画面いっぱいに */ width: auto; /* 幅は自動で横に長くなる */ max-width: 10000px; display: block; } }
.zoom-target { cursor: pointer; }