@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;500&display=swap");
#contents { width: 100%; }
@media screen and (max-width: 768px) { #contents { padding-left: 0; padding-right: 0; } }

.contents-inner { width: 960px; margin: 0 auto; }
@media screen and (max-width: 768px) { .contents-inner { width: 100%; padding-left: 10px; padding-right: 10px; } }

figure { margin: 0; padding: 0; }

.pic { position: relative; padding-bottom: 0; line-height: 1; }
.pic .note { font-size: 11px; line-height: 1; position: absolute; bottom: 3px; right: 3px; }
.pic .note.fff { color: #fff; }
.pic .note.out { position: relative; bottom: auto; right: auto; text-align: right; display: block; }

#contents p { margin-bottom: initial; }

.intro { transform: translateY(-120%); }
.intro p.lead { line-height: 2.4 !important; }
@media screen and (max-width: 960px) { .intro { transform: translateY(-80%); } }
@media screen and (max-width: 768px) { .intro { transform: translateY(-56%); } }
@media screen and (max-width: 480px) { .intro { transform: translateY(-12%); }
  .intro p.lead { line-height: 2 !important; } }

.case-list-wrap { margin-top: -8%; padding-bottom: 8%; }
.case-list-wrap .zoom-about { max-width: 560px; margin: 0 auto 4rem; }
.case-list-wrap .zoom-about > div { padding: 4px 12px; border: thin solid #323232; border-radius: 50vh; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; font-size: clamp(12px, 0.9vw, 0.875rem); text-align: center; line-height: 1.2; }
.case-list-wrap .zoom-about > div .icon { display: inline-block; width: 16px; margin-right: 2px; }
.case-list-wrap .zoom-about > div .icon img { width: 100%; height: auto; vertical-align: bottom; }
@media screen and (max-width: 480px) { .case-list-wrap { margin-top: 0; }
  .case-list-wrap .zoom-about { display: none; } }

.case-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem 6%; }
.case-list > li { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
.case-list > li .case-head { margin-bottom: 1rem; }
.case-list > li .case-head .icon { width: 56%; max-width: 80px; margin: 0 auto 8px; text-align: center; }
.case-list > li .case-head .txt { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; font-size: clamp(14px, 0.9vw, 1.6rem) !important; line-height: 1.2; text-align: center; margin-bottom: 0; }
.case-list > li .case-head .txt .en { font-size: 144%; }
.case-list > li .spec .size { margin-bottom: 8px; }
.case-list > li .spec .other-size { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; font-size: clamp(11px, 0.8vw, 1.2rem) !important; line-height: 1.2; text-align: center; margin-bottom: 0; }
.case-list > li .text { margin-top: 1rem; padding: 0 2%; position: relative; }
.case-list > li .text .lead { font-size: clamp(14px, 1vw, 1.6rem) !important; padding-top: 1.5rem; position: relative; }
.case-list > li .text .lead::before { content: ""; background: url("../img/plan2/icon_point.png") center center/contain no-repeat; width: 15.0943396226%; max-width: 80px; aspect-ratio: 64/32; position: absolute; top: 0; }
.case-list > li .fig figure { pointer-events: auto; cursor: pointer; position: relative; }
.case-list > li .fig figure::after { content: ""; display: block; width: 12%; max-width: 24px; aspect-ratio: 1/1; background: url("../img/plan2/icon_zoom.png") center center/cover no-repeat; position: absolute; right: 8px; top: 8px; z-index: 2; transition: transform 0.4s; }
.case-list > li .fig figure:hover::after { transform: scale(1.2); }
.case-list #Case1 .text .lead::before { left: 8%; }
.case-list #Case2 .text .lead::before { left: 17%; }
.case-list #Case3 .text .lead::before { left: 18%; }
.case-list #Case4 .text .lead::before { left: 13%; }
.case-list #Case5 .text .lead::before { left: 14%; }
.case-list #Case6 .text .lead::before { left: 5%; }
@media screen and (max-width: 480px) { .case-list { grid-template-columns: 1fr; }
  .case-list > li .text { margin-top: 0.5rem; }
  .case-list > li .text .lead::before { width: 16%; max-width: 64px; }
  .case-list > li .fig figure { pointer-events: none; cursor: default; }
  .case-list > li .fig figure::after { content: none; }
  .case-list #Case1 .text .lead::before { left: 3%; }
  .case-list #Case2 .text .lead::before { left: 12%; }
  .case-list #Case3 .text .lead::before { left: 14%; }
  .case-list #Case4 .text .lead::before { left: 7%; }
  .case-list #Case5 .text .lead::before { left: 9%; }
  .case-list #Case6 .text .lead::before { left: -1%; } }

#overraySlide_container { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1000; opacity: 0; pointer-events: none; -webkit-transition: 1s ease 0s opacity; transition: 1s ease 0s opacity; display: none; }
#overraySlide_container.active { opacity: 1; pointer-events: auto; display: block; z-index: 100001; }

.overraySlide_bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.8); }

.overraySlide_inner { width: 64%; max-width: 560px; max-height: 100vh; aspect-ratio: 424/574; background-color: #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
@media screen and (max-width: 768px) { .overraySlide_inner { -webkit-transform: translate(-50%, -50%) scale(0.75, 0.75); transform: translate(-50%, -50%) scale(0.75, 0.75); } }
@media screen and (max-width: 480px) { .overraySlide_inner { width: 96%; max-width: none; -webkit-transform: translate(-50%, -50%) scale(0.5, 0.5); transform: translate(-50%, -50%) scale(0.5, 0.5); } }

.overraySlider { width: 100%; position: relative; text-align: center; margin: 0 auto; border-radius: 4px; overflow: hidden; }
.overraySlider img { width: 100%; height: auto; margin: 0 auto; outline: none; }
.overraySlider .slick-track { display: flex; }
.overraySlider .slick-slide { display: flex; align-items: center; height: auto !important; }

.overraySlider_pic { position: relative; display: block; }
.overraySlider_pic .caption { position: absolute; bottom: 10px; right: 10px; color: #FFFFFF; }

.overraySlider_close { position: absolute; top: 10px; right: 10px; width: 32px; }
.overraySlider_close:hover { cursor: pointer; }
.overraySlider_close img { width: 100%; height: auto; }

.overraySlide_arrow .slick-next, .overraySlide_arrow .slick-prev { width: 32px; height: auto; aspect-ratio: 18/40; z-index: 2; }
.overraySlide_arrow .slick-next img, .overraySlide_arrow .slick-prev img { width: 100%; height: auto; }
.overraySlide_arrow .slick-next::before, .overraySlide_arrow .slick-prev::before { content: ""; display: block; width: 100%; height: 100%; background-image: url("../img/plan2/icon_arrow.png"); background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0.8; }
.overraySlide_arrow .slick-next::after, .overraySlide_arrow .slick-prev::after { content: none; }
.overraySlide_arrow .slick-next { right: -50px; }
.overraySlide_arrow .slick-prev { left: -50px; }
.overraySlide_arrow .slick-prev::before { transform: scale(-1, 1); }
@media screen and (max-width: 768px) { .overraySlide_arrow .slick-next, .overraySlide_arrow .slick-prev { width: 20px; }
  .overraySlide_arrow .slick-next { right: -25px; }
  .overraySlide_arrow .slick-prev { left: -25px; } }