#contents img { width: 100%; height: auto; line-height: 0; vertical-align: middle; }
#contents a { display: block; width: 100%; transition: .4s all; }
@media screen and (max-width: 700px) { #contents .js-scrollable { padding-bottom: 8px; }
  #contents .js-scrollable > img { width: auto; } }

.bg { background-color: #f4f1f4; }

.sec_maincopy { font-size: 2.4rem; line-height: 1.44; text-align: center; margin-bottom: 2.4rem; }
.sec_maincopy .em { color: #7c5271; }
.sec_maincopy .sub { font-size: 64%; }
.sec_maincopy img { width: 64%; max-width: 336px; }
.sec_maincopy + .lead { text-align: center; }

.midashi { margin-bottom: 2.4rem; }

.pickup-area .inner { text-align: center; }
.pickup-area .point-ttl { margin-bottom: 1.6rem; }
.pickup-area .point-ttl + .midashi { margin-bottom: 2.4rem; }

.top-main .page-name { max-width: 48%; left: auto; right: -6%; transform: translateY(-50%); }
.top-main .page-name .en { width: 48%; margin: auto auto 4rem; }
.top-main .page-name .kana { font-size: clamp(2rem, 2vw, 4rem); }
@media screen and (max-width: 700px) { .top-main .page-name { left: -2%; }
  .top-main .page-name .en { width: 64%; max-width: 204px; } }

#Sec01 > .inner { padding-top: 4rem; }
#Sec01 .scene-samples { max-width: 1400px; margin: auto; padding-top: 5.6rem; }
#Sec01 .scene-samples .sample-slider-body .sample-conts { padding: 6.4rem calc((64/1400)*100%); }
#Sec01 .scene-samples .sample-slider-body .schedule { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem 4%; }
#Sec01 .scene-samples .sample-slider-body .schedule > li { display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: 0; }
#Sec01 .scene-samples .sample-slider-body .schedule > li:last-of-type { grid-template-rows: initial; align-items: center; }
#Sec01 .scene-samples .sample-slider-body .schedule .image { margin-bottom: 0.8rem; }
#Sec01 .scene-samples .sample-slider-body .schedule .title { font-size: clamp(18px, 1.2vw, 2rem); text-align: left; letter-spacing: .05em; line-height: 1.28; }
#Sec01 .scene-samples .sample-slider-body .schedule .lead { font-size: clamp(13px, 1vw, 1.4rem); line-height: 1.44; }
#Sec01 .scene-samples .sample-slider-body .schedule .label > li { display: inline-block; width: 100%; color: #fff; font-size: clamp(11px, 0.9vw, 1.2rem); text-align: center; line-height: 1.12; padding: 4px; margin-top: 0.8rem; }
#Sec01 .scene-samples .sample-slider-body #woman-day { background: #dfd6b8 url("../img/life/scene01-bg.jpg") center top/100% auto no-repeat; }
#Sec01 .scene-samples .sample-slider-body #woman-day .schedule .label > li { background-color: #9e8c6b; }
#Sec01 .scene-samples .sample-slider-body #woman-holiday { background: #fadbda url("../img/life/scene02-bg.jpg") center top/100% auto no-repeat; }
#Sec01 .scene-samples .sample-slider-body #woman-holiday .schedule .label > li { background-color: #d18784; }
#Sec01 .scene-samples .sample-slider-body #man-day { background: #002d4d url("../img/life/scene03-bg.jpg") center top/100% auto no-repeat; }
#Sec01 .scene-samples .sample-slider-body #man-day .schedule { color: #fff; }
#Sec01 .scene-samples .sample-slider-body #man-day .schedule .label > li { background-color: #d3d3d4; color: #231815; }
#Sec01 .scene-samples .slick-dots { position: absolute; bottom: auto; top: -5.6rem; }
#Sec01 .scene-samples .slick-dots li { width: 32%; height: 5.6rem; font-size: 0; }
#Sec01 .scene-samples .slick-dots li button { width: 100%; height: 100%; border-radius: 8px 5px 0 0; text-align: center; position: relative; opacity: 0.48; }
#Sec01 .scene-samples .slick-dots li button::before { display: block; margin: auto; font-size: 0; width: 100%; max-width: 200px; height: 88%; position: static; opacity: 1; }
#Sec01 .scene-samples .slick-dots li.slick-active button { opacity: 1; }
#Sec01 .scene-samples .slick-dots li:nth-of-type(1) button { background-color: #dfd6b8; }
#Sec01 .scene-samples .slick-dots li:nth-of-type(1) button::before { background: url("../img/life/scene01-head.png") center bottom/contain no-repeat; }
#Sec01 .scene-samples .slick-dots li:nth-of-type(2) button { background-color: #fadbda; }
#Sec01 .scene-samples .slick-dots li:nth-of-type(2) button::before { background: url("../img/life/scene02-head.png") center bottom/contain no-repeat; }
#Sec01 .scene-samples .slick-dots li:nth-of-type(3) button { background-color: #efefef; opacity: 1; }
#Sec01 .scene-samples .slick-dots li:nth-of-type(3) button::before { background: url("../img/life/scene03-head.png") center bottom/contain no-repeat; filter: brightness(0) saturate(100%) invert(87%) sepia(26%) saturate(0%) hue-rotate(236deg) brightness(89%) contrast(90%); }
#Sec01 .scene-samples .slick-dots li:nth-of-type(3).slick-active button { background-color: #002d4d; }
#Sec01 .scene-samples .slick-dots li:nth-of-type(3).slick-active button::before { filter: none; }
#Sec01 .scene-samples .slick-prev, #Sec01 .scene-samples .slick-next { z-index: 3; opacity: 0.64; }
#Sec01 .scene-samples .slick-prev::before, #Sec01 .scene-samples .slick-next::before { font-size: 0; display: block; width: 34px; aspect-ratio: 1/1; }
#Sec01 .scene-samples .slick-prev { left: 1%; }
#Sec01 .scene-samples .slick-prev::before { background: url("../img/life/arrow.png") center center/100% 100% no-repeat; }
#Sec01 .scene-samples .slick-next { right: 2%; }
#Sec01 .scene-samples .slick-next::before { background: url("../img/life/arrow.png") center center/100% 100% no-repeat; transform: scale(-1, 1); }
#Sec01 .pickup-area { background: #f6f4f6 url("../img/life/culture-bg.jpg") center 25rem/100% auto no-repeat; }
#Sec01 .video-box { position: relative; width: 100%; max-width: 860px; margin: 0 auto; padding-top: 1.6rem; }
#Sec01 .video-box::before { content: ""; display: block; width: 100%; padding-bottom: 56.25%; }
@keyframes fadeOutMotion { 0% { opacity: 1; }
  100% { opacity: 0; } }
#Sec01 .video-box video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
#Sec01 .video-box .img.movie { margin-top: 0; position: absolute; top: 0; left: 0; }
#Sec01 .video-box .movie-play { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; }
#Sec01 .video-box .movie-play .movie-arrow { width: 20%; max-width: 150px; }
#Sec01 .video-box .movie-play .movie-arrow img { width: 100%; height: auto; }
#Sec01 .video-box.js-movie-play .img.movie, #Sec01 .video-box.js-movie-play .movie-play { pointer-events: none; animation: fadeOutMotion 0.3s linear 0s forwards; }
#Sec01 .video-box + .note { width: 100%; max-width: 860px; margin: 4px auto 0; text-align: left; }
#Sec01 #culture .detail { max-width: 960px; margin: 0 auto; padding-top: 1.6rem; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: flex-start; }
#Sec01 #culture .detail .lead { width: 40%; text-align: left; }
#Sec01 #culture .detail .events-container { width: 56%; background-color: #fff; padding: 2% 0; display: flex; flex-direction: column; justify-content: center; }
#Sec01 #culture .detail .events-container > ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
#Sec01 #culture .detail .events-container > ul li { padding: 1rem 8%; border-right: thin solid #231815; }
#Sec01 #culture .detail .events-container > ul li:last-of-type { border-right: none; }
#Sec01 #culture .detail .events-container > ul li .image { margin-bottom: 1.6rem; }
#Sec01 #culture .detail .events-container > ul li .summary { margin: auto; }
#Sec01 #culture .detail .events-container > ul li .summary + .note { margin-top: 0.8rem; text-align: left; }
#Sec01 #pet .detail { max-width: 960px; margin: 0 auto; }
#Sec01 #pet .pet-mv { margin: 4rem auto; }
#Sec01 #pet .facilities > ul { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: stretch; align-content: flex-start; }
#Sec01 #pet .facilities > ul li { width: 47%; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; align-content: flex-start; }
#Sec01 #pet .facilities > ul li .head { width: 100%; text-align: center; position: relative; }
#Sec01 #pet .facilities > ul li .head .txt { width: 100%; text-align: center; font-size: clamp(12px, 1.2vw, 1.4rem); line-height: 1.2; padding: 4px; border: thin solid #231815; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
#Sec01 #pet .facilities > ul li .head .wappen { width: calc((82/440)*100%); max-width: 82px; margin: 0 -4px 0 auto; position: relative; z-index: 2; }
#Sec01 #pet .facilities > ul li .image { width: calc((210/440)*100%); }
#Sec01 #pet .facilities > ul li .text-box { width: calc((210/440)*100%); text-align: left; padding-right: 8px; }
#Sec01 #pet .facilities > ul li .text-box .name { font-size: clamp(18px, 1.2vw, 2rem); text-align: left; line-height: 1.12; }
#Sec01 #pet .facilities > ul li .text-box .lead { line-height: 1.44; padding-top: 8px; }
#Sec01 #pet .facilities > ul li .text-box .label { margin-top: 1.2rem; }
@media screen and (max-width: 1024px) { #Sec01 .scene-samples .sample-slider-body .schedule { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 640px) { #Sec01 .scene-samples .sample-slider-body { margin-bottom: 0; }
  #Sec01 .scene-samples .sample-slider-body .schedule { grid-template-columns: 1fr; }
  #Sec01 .scene-samples .sample-slider-body .schedule > li { grid-template-rows: initial; }
  #Sec01 .scene-samples .slick-dots { display: flex; flex-direction: row; }
  #Sec01 .scene-samples .slick-dots li { width: calc(100% / 3); }
  #Sec01 .scene-samples .slick-next { right: 4.5%; }
  #Sec01 #culture .detail { padding-top: 0; }
  #Sec01 #culture .detail .lead { width: 100%; text-align: center; }
  #Sec01 #culture .detail .events-container { width: 100%; margin-top: 16px; padding-top: 12px; padding-bottom: 12px; }
  #Sec01 #pet .facilities > ul li { width: 100%; margin-bottom: 24px; }
  #Sec01 #pet .facilities > ul li:last-of-type { margin-bottom: 0; }
  #Sec01 #pet .facilities > ul li .head { margin-bottom: 0; }
  #Sec01 #pet .facilities > ul li:nth-of-type(2n) .head { order: 1; }
  #Sec01 #pet .facilities > ul li:nth-of-type(2n) .head .wappen { margin-left: -8px; margin-right: auto; }
  #Sec01 #pet .facilities > ul li:nth-of-type(2n) .image { order: 3; }
  #Sec01 #pet .facilities > ul li:nth-of-type(2n) .text-box { order: 2; }
  #Sec01 #pet .facilities > ul li:nth-of-type(2n) .text-box .name { text-align: right; } }

#Sec02 #area-guide .point-ttl .p-txt01 { font-size: clamp(16px, 1vw, 2rem); }
#Sec02 #area-guide .point-ttl .p-txt02 { font-size: clamp(24px, 1.6vw, 3.2rem); }
#Sec02 #area-guide .point-ttl + .midashi { font-size: clamp(18px, 1vw, 2rem); }
#Sec02 #area-guide .map { max-width: 1400px; margin: 0 auto; padding: 0; background: url("../img/life/area-img-bg.jpg") left top/100% auto no-repeat; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: flex-end; }
#Sec02 #area-guide .map .cont { padding: 4rem calc((64/466)*100%) 4rem 0; }
#Sec02 #area-guide .map .cont .spot-list > ul { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; align-content: flex-start; }
#Sec02 #area-guide .map .cont .spot-list > ul li { width: calc((218/460)*100%); margin-bottom: 2rem; }
#Sec02 #area-guide .map .cont .spot-list > ul li:nth-last-of-type(-n+2) { margin-bottom: 0; }
#Sec02 #area-guide .map .cont .spot-list > ul li .img .note { font-size: clamp(12px, 1.1vw, 1.3rem); right: 4px; bottom: 4px; text-align: right; }
#Sec02 #area-guide .map .cont:nth-of-type(1) { align-self: flex-start; position: relative; }
#Sec02 #area-guide .map .cont:nth-of-type(1) .fig { width: 100%; position: absolute; left: 0; top: 0; }
#Sec02 #area-guide .map .cont:nth-of-type(3) .spot-list > ul li:first-of-type { width: 100%; }
@media screen and (max-width: 1200px) { #Sec02 #area-guide .map .cont .spot-list > ul li { margin-bottom: 1.6rem; } }
@media screen and (max-width: 960px) { #Sec02 #area-guide .map .cont { padding-right: calc((40/466)*100%); } }
@media screen and (max-width: 834px) { #Sec02 #area-guide .map { background-size: 100% 40%; display: block; }
  #Sec02 #area-guide .map .cont { max-width: 600px; margin: auto; padding: 4rem 4%; position: relative; z-index: 2; }
  #Sec02 #area-guide .map .cont:nth-of-type(1) { max-width: none; padding: 0; margin-bottom: -32%; z-index: 1; }
  #Sec02 #area-guide .map .cont:nth-of-type(1) .fig { max-width: 400px; position: static; margin: 0 auto 0 0; } }