.plan { padding: 8rem 0; }
.plan:not(:first-child) { border-top: 3px solid #bdaf89; }

.plan-inner { max-width: 1100px; width: 90%; margin-inline: auto; display: grid; grid-template-columns: 0.84fr 1fr; grid-template-rows: repeat(3, auto) 1fr; column-gap: 2.2rem; position: relative; }
.plan-inner.include-btn { grid-template-rows: repeat(4, auto) 1fr; }
.plan-inner.include-btn .figure-list { grid-row: span 5 / span 5; }

.plan-illust-sec { position: absolute; left: 5%; bottom: 0%; width: 34%; }
.plan-illust-sec img { width: 100%; height: auto; }

.global-nav .plan { padding: 0rem 0 !important; }
.global-nav .plan:not(:first-child) { border-top: none !important; }

.spec { order: 1; position: relative; }
.spec .icon { position: absolute; left: -8rem; top: -1rem; width: 9.6rem; height: 9.6rem; }
.spec .icon img { width: 100%; height: auto; }

.figure-list { order: 2; grid-row: span 4 / span 4; }
.figure-list .tab { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1rem; }
.figure-list .tab li { cursor: pointer; color: #ffffff; padding: 1.5rem 1rem; text-align: center; position: relative; font-size: 16px; line-height: 1; transition: filter 0.2s linear; }
.figure-list .tab li:hover { filter: brightness(110%); }
.figure-list .tab li:nth-child(1) { background-color: #b87865; }
.figure-list .tab li:nth-child(2) { background-color: #8e9db7; }
.figure-list .tab li.current::after { font-size: 10px; width: 100%; content: '\025bc'; color: #fff; position: absolute; bottom: calc((1rem + 2px) * -1); left: 0; }
.figure-list .tab li.current:nth-child(1)::after { background-color: #b87865; }
.figure-list .tab li.current:nth-child(2)::after { background-color: #8e9db7; }
.figure-list .figure { display: none; margin-top: 5rem; text-align: center; }
.figure-list .figure > img { width: 100%; max-width: 100%; height: auto; }
.figure-list .figure.show { display: block; }

.point { order: 3; font-size: 1.6rem; display: flex; flex-direction: column; row-gap: 2rem; margin-top: 5rem; }
.point li { padding-left: 1.8rem; position: relative; line-height: 1.4; }
.point li::before { position: absolute; left: 0; top: 0; content: '\025cf'; color: #9a854c; }

.print { order: 4; margin-top: 4rem; width: 100%; max-width: 220px; position: relative; }
.print::after { content: ''; background: url(../img/plan/arrow_print.png); background-size: 100% auto; width: 9px; height: 10px; display: block; position: absolute; right: 1rem; top: 50%; translate: 0 -50%; }
.print a { font-family: "bebas-neue-pro", sans-serif; font-weight: 600; font-style: normal; letter-spacing: 0.5em; background-color: #9a854c; border-radius: 1rem; color: #ffffff; display: flex; align-items: center; font-size: 1.7rem; padding: 1.5rem; transition: filter 0.2s linear; }
.print a:hover { filter: brightness(110%); }
.print a::before, .print a::after { content: ""; background-color: #ffffff; flex-grow: 1; height: 1px; }
.print a::before { margin-right: 1.5rem; }
.print a::after { margin-left: 0.5rem; }

.btn { order: 5; margin-top: 10rem; }
.btn a { background: #756122; background: linear-gradient(15deg, #756122 0%, #ae9758 47%, #ae9758 53%, #756122 100%); color: #fff; padding: 2rem 1rem 1.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 1rem; }
.btn a .text { font-size: 2.6rem; font-feature-settings: "palt"; }
.btn a .more { border: 1px solid #ffffff; font-size: 1.4rem; padding: 0.5rem 3rem; }
.btn a .more::after { content: '\025b6'; margin-left: 1rem; font-size: 1.2rem; }
.btn a:hover { filter: brightness(110%); }

.legend { font-size: 10px; display: flex; justify-content: center; gap: 2rem; }
.legend li { display: flex; align-items: center; gap: 5px; }

.other .topic { max-width: 720px; margin-inline: auto; background-color: #e5e5e5; padding: 6rem 2rem 7rem; }
.other .topic .en-title { font-family: "bebas-neue-pro", sans-serif; font-weight: 600; font-style: normal; color: #9a854c; font-size: 2rem; border-bottom: 1px solid currentColor; letter-spacing: 1rem; line-height: 1; width: fit-content; margin-inline: auto; text-wrap: nowrap; }
.other .topic .en-title::after { content: ''; margin-right: -1rem; }
.other .topic .page-l-copy { margin-top: 4rem; }
.other .topic .lead { margin-top: 2rem; text-align: center; }
.other .environmental-performance { max-width: 380px; margin-inline: auto; margin-top: 6rem; }

@media screen and (max-width: 1024px) { .spec .icon { left: -6rem; top: -0.5rem; width: 7.5rem; height: 7.5rem; } }
@media screen and (max-width: 768px) { .inner:has(.to-hanare) { width: 80%; }
  .to-hanare { max-width: 420px; }
  .plan { padding: 6rem 0; }
  .plan-inner { grid-template-columns: 1fr; grid-template-rows: inherit; width: 80%; max-width: 420px; }
  .plan-inner.include-btn { grid-template-rows: 1fr; }
  .plan-inner.include-btn .figure-list { grid-row: inherit; }
  .spec .icon { left: -5rem; top: -0.5rem; width: 6.5rem; height: 6.5rem; }
  .figure-list { order: 3; grid-row: inherit; margin-top: 6rem; }
  .figure-list .tab li.current::after { bottom: calc((1rem + 4px) * -1); }
  .plan-illust-sec { position: inherit; left: inherit; bottom: inherit; width: 70%; margin-left: 15%; margin-top: 5rem; display: block; order: 4; }
  .point { order: 2; font-size: 11px; row-gap: 1.5rem; }
  .print { max-width: 160px; margin-inline: auto; margin-top: 6rem; }
  .print a { padding: 1rem; }
  .btn { margin-top: 6rem; }
  .other .topic { padding: 5rem 2rem 4rem; }
  .other .topic .lead { text-align: left; } }