.structure-conts .contents-wrap { padding-top: 6rem; }
.structure-conts .maincopy { color: #af9c78; margin-bottom: 0; padding: 2rem; }
@media screen and (max-width: 560px) { .structure-conts .contents-wrap { padding-top: 4rem; } }

.local-nav { max-width: 688px; margin-inline: auto; }
.local-nav ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px 1rem; }
.local-nav li { display: grid; }
.local-nav li.current a { background-color: #dcdcdc; }
.local-nav li a { border: 1px solid currentColor; width: 100%; display: flex; justify-content: center; flex-direction: column; position: relative; text-align: center; padding: 0.5rem 1rem; }
.local-nav li a::after { content: ""; display: inline-block; width: 8px; height: 8px; background-color: currentColor; clip-path: polygon(100% 0, 0 0, 50% 100%); position: absolute; right: 8px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.local-nav li a:hover { background-color: #f4f4f4; }

.category-name { font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-style: normal; font-variation-settings: "wdth" 100; font-feature-settings: 'palt'; color: #af9c78; font-size: clamp(18px, calc(1vw + 16px), 22px); display: flex; align-items: center; gap: 1rem; margin-top: 5rem; }
.category-name::after { content: ''; background-color: currentColor; flex-grow: 1; height: 1px; }

.item-list { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(20px, calc(3vw + 9px), 40px); row-gap: 3rem; margin-top: 1.5rem; }

.item .name { font-size: 17px; margin-top: 0.7rem; }
.item .text { font-size: 14px; line-height: 1.8; margin-top: 0.5rem; }
.item .note { margin-top: 0.5rem; }

#tebra-key { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(20px, calc(3vw + 9px), 40px); align-items: flex-start; }
#tebra-key .img { order: 2; grid-row: span 3; }
#tebra-key .name { order: 1; }
#tebra-key .text { order: 3; }
#tebra-key .note { order: 4; }

#entrance-door { background-color: #dcd9d7; margin-top: 3rem; padding: 2.5rem; }
#entrance-door .title { font-size: clamp(16px, calc(1vw + 14px), 20px); font-weight: bold; color: #645a50; text-align: center; }
#entrance-door .item-list { margin-top: 3rem; display: grid; grid-template-columns: 0.4375fr 1fr; column-gap: 2.5rem; row-gap: 1.5rem; align-items: flex-start; }
#entrance-door .item-list .item .name { color: #8a7b59; }
#entrance-door .item-list .item:first-of-type { grid-row: span 7; }
#entrance-door .item-list .item:not(:first-of-type) .name { margin-top: 0; }
#entrance-door .item-list .item:not(:first-of-type):has(.img) { display: grid; grid-template-columns: 1fr 0.2916fr; grid-template-rows: repeat(2, auto) 1fr; column-gap: 20px; }
#entrance-door .item-list .item:not(:first-of-type):has(.img) .img { order: 2; grid-row: span 3; }
#entrance-door .item-list .item:not(:first-of-type):has(.img) .name { order: 1; }
#entrance-door .item-list .item:not(:first-of-type):has(.img) .text { order: 3; }

@media screen and (max-width: 768px) { #tebra-key { grid-template-columns: 1fr; }
  #tebra-key .img { order: 1; grid-row: inherit; }
  #tebra-key .name { order: 2; }
  #entrance-door { padding: 2rem; }
  #entrance-door .item-list { grid-template-columns: 1fr; margin-top: 1.5rem; }
  #entrance-door .item-list .item:first-of-type { grid-row: inherit; }
  #entrance-door .item-list .item:first-of-type .img { max-width: 240px; margin-inline: auto; } }
@media screen and (max-width: 560px) { .local-nav ul { grid-template-columns: 1fr; }
  .category-name { margin-top: 3rem; }
  .item-list { grid-template-columns: repeat(2, 1fr); }
  .item .name { font-size: 16px; }
  .item .text { font-size: 13px; }
  #entrance-door .item-list .item:not(:first-of-type):has(.img) { grid-template-columns: 1fr 100px; column-gap: 10px; } }
