/******************************************************

contents

******************************************************/
.w800 { max-width: 80rem; margin: auto; }

.midashi-m.border { margin: auto; border: 1px solid #000; max-width: 680px; box-sizing: border-box; padding: 0.5rem 0.5rem; }

.page-l-copy { margin-bottom: 2rem; }
.page-l-copy b { font-size: 260%; line-height: 0.8; color: #776000; }

.mt-2rem { margin-top: 2rem; }

.en-name-ttl { text-align: center; margin-bottom: 5rem; }
.en-name-ttl span { font-family: "bebas-neue-pro", sans-serif; font-weight: 600; font-style: normal; font-size: 2.4rem; color: #c0b66b; letter-spacing: 1rem; display: inline-block; border-bottom: 2px solid #c0b66b; white-space: nowrap; }
.en-name-ttl span:after { content: ""; margin-right: -1rem; }

.point-top { padding-bottom: 3rem; }

.point-bottom { padding-top: 3rem; }

.val-btn { margin-top: 4rem; }
.val-btn a { display: block; margin: auto; width: 90%; max-width: 420px; position: relative; overflow: hidden; background: linear-gradient(to right, #776324 0%, #c7ac62 50%, #776324 100%); border-radius: 1rem; padding: 1.5rem 0; color: #fff; text-align: center; transition: 0.5s filter; }
.val-btn a .txt-l { display: block; text-align: center; font-size: 3rem; letter-spacing: 0.4rem; white-space: nowrap; }
.val-btn a .txt-s { margin: auto; display: inline-block; font-size: 1.3rem; line-height: 1; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.4); padding: 0.4rem 3rem; margin-top: 0.3rem; position: relative; }
.val-btn a .txt-s::after { content: ""; display: block; position: absolute; background-color: #fff; width: 0.6rem; height: 1rem; clip-path: polygon(0 0, 0% 100%, 100% 50%); transform: translateY(-50%) rotate(0deg); top: 50%; right: 0.6rem; }
.val-btn a:hover { filter: brightness(1.3); }

.val-list01 { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 3rem; margin-bottom: 2rem; }
.val-list01 li { width: 15%; margin-top: 4%; }
@media screen and (max-width: 768px) { .val-list01 li { width: 30%; margin-top: 5%; } }

.val00-img01 { max-width: 600px; margin: auto; margin-top: 4rem; margin-bottom: 4rem; }
.val00-img01 .img { margin-bottom: 1rem; }
.val00-img01 .note { text-align: center; }

.val00-img03 { margin: auto; max-width: 600px; }

.val00-colm { display: grid; justify-content: space-between; align-items: flex-start; grid-template-columns: 40% 55%; grid-template-rows: 1fr 1fr 1fr; }
.val00-colm .page-l-copy { grid-column: 1 / 2; grid-row: 1 / 2; }
.val00-colm .img { grid-column: 2 / 3; grid-row: 1 / 4; }
.val00-colm .lead { grid-column: 1 / 2; grid-row: 2 / 3; }
.val00-colm .note { grid-column: 1 / 2; grid-row: 3 / 4; }
@media screen and (max-width: 768px) { .val00-colm { display: block; }
  .val00-colm .page-l-copy { width: 100%; text-align: center; }
  .val00-colm .img { width: 100%; margin: 3rem 0; }
  .val00-colm .lead { width: 100%; }
  .val00-colm .note { width: 100%; } }

.val-photo-list1 { display: grid; justify-content: space-between; align-items: flex-start; grid-template-columns: 61.7% 37.3%; grid-template-rows: 1fr 1fr; margin: auto; max-width: 1100px; }
.val-photo-list1 li:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; }
.val-photo-list1 li:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
.val-photo-list1 li:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; margin-top: 1%; }
@media screen and (max-width: 768px) { .val-photo-list1 { grid-template-columns: 49% 49%; grid-template-rows: 1fr auto; }
  .val-photo-list1 li:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 2; }
  .val-photo-list1 li:nth-child(2) { grid-column: 1 / 2; grid-row: 2 / 3; margin-top: 3%; }
  .val-photo-list1 li:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; margin-top: 3%; } }

.val-photo-list2 { display: grid; justify-content: space-between; align-items: flex-start !important; grid-template-columns: 65.3% 33.7%; grid-template-rows: auto 1fr; margin: auto; max-width: 1100px; }
.val-photo-list2 li:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; }
.val-photo-list2 li:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
.val-photo-list2 li:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; margin-top: 3%; }
@media screen and (max-width: 768px) { .val-photo-list2 { grid-template-columns: 49% 49%; grid-template-rows: 1fr auto; }
  .val-photo-list2 li:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 2; }
  .val-photo-list2 li:nth-child(2) { grid-column: 1 / 2; grid-row: 2 / 3; margin-top: 3%; }
  .val-photo-list2 li:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; margin-top: 3%; } }

.val04-photo01 { max-width: 1100px; margin: auto; }

.point04-colm { display: flex; justify-content: space-between; margin-top: 5rem; }
.point04-colm .left { width: 40%; }
.point04-colm .right { width: 55%; }
@media screen and (max-width: 600px) { .point04-colm { flex-wrap: wrap; justify-content: center; }
  .point04-colm .left { width: 70%; max-width: 260px; }
  .point04-colm .right { width: 100%; margin-top: 3rem; }
  .point04-colm .right .midashi-m { text-align: center; } }

.point5-ilust { display: flex; align-items: center; justify-content: space-between; padding-bottom: 2rem; }
.point5-ilust li:nth-child(1) { width: 50%; }
.point5-ilust li:nth-child(2) { width: 40%; }
.point5-ilust.hanre-close { justify-content: center; }
.point5-ilust.hanre-close li:nth-child(1) { width: 60%; }
@media screen and (max-width: 600px) { .point5-ilust { flex-wrap: wrap; margin: auto; width: 80%; }
  .point5-ilust li:nth-child(1) { width: 100%; }
  .point5-ilust li:nth-child(2) { width: 100%; margin-top: 3rem; }
  .point5-ilust.hanre-close { justify-content: center; }
  .point5-ilust.hanre-close li:nth-child(1) { width: 100%; }
  .point5-ilust.hanre-close li:nth-child(1) .img .cap { bottom: 0; } }

.val06-img01 { margin-top: 4rem; margin-bottom: 1rem; }
@media screen and (max-width: 600px) { .val06-img01 { position: relative; overflow: scroll; }
  .val06-img01 .base { display: block; }
  .val06-img01 .base img { width: auto; height: 25rem; } }

.scroll-icon { text-align: center; display: none; }
.scroll-icon img { width: 100%; height: auto; max-width: 60rem; }
@media screen and (max-width: 600px) { .scroll-icon { display: block; } }

.val06-img02 { max-width: 60rem; margin: auto; margin-top: 5rem; margin-bottom: 5rem; }
.val06-img02 .img { margin-bottom: 1rem; }

.point06-colm { display: flex; justify-content: space-between; padding-top: 2rem; }
.point06-colm li { margin-top: 3rem; width: 47%; }
.point06-colm li .img { margin: 1rem 0; }
@media screen and (max-width: 768px) { .point06-colm { display: block; }
  .point06-colm li { width: 100%; } }

.glass-posi { background: rgba(0, 0, 0, 0.7); height: 4em; width: 4em; position: absolute; right: 0; top: 0; padding: 0.7em; box-sizing: border-box; border-bottom-left-radius: 0.5em; }

.magnifying_glass { display: inline-block; position: relative; width: 1em; height: 1em; color: #fff; font-size: 25px; }

.magnifying_glass::before { position: absolute; top: 0px; left: 0px; width: 0.7em; height: 0.7em; box-sizing: border-box; border: 0.15em solid currentColor; border-radius: 50%; background-color: #000; content: ""; z-index: 2; }

.magnifying_glass::after { position: absolute; top: 0px; left: 50%; z-index: 1; transform: rotate(-45deg); width: 0.15em; height: 1em; box-sizing: border-box; background-color: #fff; content: ""; }