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

.category-name { font-family: "cormorant", serif; font-weight: 300; font-style: normal; font-size: 3rem; text-align: center; color: #7c5271; margin-bottom: 2.4rem; }

.completion-cont { padding: 8rem 0 4rem; }
.completion-cont .cont-head { position: relative; }
.completion-cont .cont-head .point-ttl { width: 40%; max-width: 400px; margin: 0 auto; padding: 4px 8px; font-size: 2.8rem; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border: 3px solid #fff; }
.completion-cont .cont-body > .inner { padding-top: 2.4rem; }
.completion-cont .cont-body .midashi { font-size: 3.2rem; color: #7c5271; margin-bottom: 2.4rem; }
.completion-cont .cont-body .images { display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; margin-top: 2.4rem; }
.completion-cont .cont-body .images .image { width: 49.5%; margin-top: 1rem; margin-right: 1%; }
.completion-cont .cont-body .images .image:nth-of-type(2n), .completion-cont .cont-body .images .image:last-of-type { margin-right: 0; }
@media screen and (max-width: 700px) { .completion-cont { padding: 8rem 0 0; }
  .completion-cont .cont-head .point-ttl { font-size: 3rem; }
  .completion-cont .cont-body > .inner { padding-top: 2rem; }
  .completion-cont .cont-body .midashi { font-size: 2.5rem; margin-bottom: 1.5rem; }
  .completion-cont .cont-body .images .image { width: 100% !important; margin-right: 0; } }

.gallery-slider .slide .img .note { font-family: "cormorant", serif; font-weight: 300; font-style: normal; font-size: 2.4rem; letter-spacing: 0.075em; right: 8px; bottom: 8px; }
.gallery-slider .slick-dots { position: static; bottom: 0; display: flex; justify-content: center; flex-wrap: wrap; margin-top: 15px; box-sizing: border-box; }
.gallery-slider .slick-dots * { box-sizing: border-box; }
.gallery-slider .slick-dots li { position: relative; /*width: 75px;
height: 50px;
margin-bottom: 10px;*/ width: calc(91% / 7); height: auto; margin: 0 1.5% 10px 0; /*border: 2px solid #cccccc;*/ }
.gallery-slider .slick-dots li:nth-of-type(7n), .gallery-slider .slick-dots li:last-of-type { margin-right: 0; }
.gallery-slider .slick-dots li::before { content: ""; position: absolute; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.48); top: 0; left: 0; }
.gallery-slider .slick-dots li img { width: 100%; height: auto; vertical-align: top; }
.gallery-slider .slick-dots li.slick-active::before, .gallery-slider .slick-dots li.slick-active::after { content: none !important; }
@media screen and (max-width: 700px) { .gallery-slider .slide .img .note { font-size: 3.8vw; right: 6px; bottom: 8px; }
  .gallery-slider .slick-dots li { width: calc(94% / 4); margin-right: 2%; }
  .gallery-slider .slick-dots li:nth-of-type(4n) { margin-right: 0; } }

.intro .inner { padding-bottom: 2rem; }
@media screen and (max-width: 700px) { .intro .inner { padding-bottom: 0; width: 96%; }
  .intro .lead.head-lead { text-align: left; } }

.local-nav .head { font-family: "cormorant", serif; font-weight: 300; font-style: normal; text-align: center; font-size: 2.4rem; color: #7c5271; line-height: 1.2; margin-bottom: 2.4rem; }
.local-nav .point-menu { margin: auto; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 2px; }
.local-nav .point-menu li a { display: block; padding: 8px; transition: .4s all; position: relative; }
.local-nav .point-menu li a::before { position: absolute; content: ''; width: 10px; height: 10px; right: 8px; top: 50%; translate: 0 -50%; border: 1px solid #666; border-width: 0 1px 1px 0; rotate: 45deg; }
.local-nav .point-menu li a:hover { filter: brightness(106%); }
.local-nav .point-menu li.p01 a { background-color: #e8d8dc; }
.local-nav .point-menu li.p02 a { background-color: #f9ccc3; }
.local-nav .point-menu li.p03 a { background-color: #bcd5b9; }
.local-nav .point-menu li.p04 a { background-color: #fddf9e; }
.local-nav .point-menu li.p05 a { background-color: #d5cabe; }
@media screen and (max-width: 1024px) { .local-nav .point-menu li a::before { width: 10px; height: 10px; right: 10px; } }
@media screen and (max-width: 834px) { .local-nav .point-menu li a::before { width: 8px; height: 8px; right: 8px; } }
@media screen and (max-width: 700px) { .local-nav .point-menu { grid-template-columns: repeat(2, 1fr); } }

#Point01 .cont-head { background-image: linear-gradient(180deg, #fff 0%, #fff 50%, #f4ecf2 50%, #f4ecf2 100%); }
#Point01 .cont-head .point-ttl { background-color: #e8d8dc; }
#Point01 .cont-body { background-color: #f4ecf2; }

#Point02 .cont-head { background-image: linear-gradient(180deg, #fff 0%, #fff 50%, #fef3f1 50%, #fef3f1 100%); }
#Point02 .cont-head .point-ttl { background-color: #f9ccc3; }
#Point02 .cont-body { background-color: #fef3f1; }
#Point02 .cont-body .images { max-width: 880px; margin-left: auto; margin-right: auto; }
#Point02 .cont-body .images .image:nth-of-type(1) { width: 67%; }
#Point02 .cont-body .images .image:nth-of-type(1) .img { height: 100%; }
#Point02 .cont-body .images .image:nth-of-type(1) .img img { height: 100%; object-fit: cover; }
#Point02 .cont-body .images .image:nth-of-type(2) { width: 32%; }

#Point03 .cont-head { background-image: linear-gradient(180deg, #fff 0%, #fff 50%, #eaf2e9 50%, #eaf2e9 100%); }
#Point03 .cont-head .point-ttl { background-color: #bcd5b9; }
#Point03 .cont-body { background-color: #eaf2e9; }

#Point04 .cont-head { background-image: linear-gradient(180deg, #fff 0%, #fff 50%, #fff8e9 50%, #fff8e9 100%); }
#Point04 .cont-head .point-ttl { background-color: #fddf9e; }
#Point04 .cont-body { background-color: #fff8e9; }

#Point05 .cont-head { background-image: linear-gradient(180deg, #fff 0%, #fff 50%, #f3f0ec 50%, #f3f0ec 100%); }
#Point05 .cont-head .point-ttl { background-color: #d5cabe; }
#Point05 .cont-body { background-color: #f3f0ec; }