.pickup-area { background: #eae2e7; }
.pickup-area .inner { text-align: center; }
.pickup-area .category-name { font-size: 4rem; color: #7c5271; margin-top: 1rem; }

.graf > .title { font-size: 1.5rem; padding-left: 1.7rem; text-align: left; position: relative; }
.graf > .title::before { position: absolute; left: 0; top: 1px; display: inline-block; content: ''; width: 1.3rem; height: 1.3rem; background-color: #000; }
.graf > .title + .img { margin-top: 1rem; }

.section { position: relative; }
.section .wappen { width: calc((200/1100)* 100%); max-width: 200px; aspect-ratio: 1/1; border-radius: 50vh; background-color: #7c5271; position: absolute; right: 0; top: 6rem; }
.section .wappen img { width: 100%; height: auto; line-height: 0; vertical-align: middle; }
.section .midashi { font-size: 3.6rem; max-width: calc(100% - 400px); margin: auto; }
@media screen and (max-width: 834px) { .section .midashi { font-size: 2.8rem; max-width: calc(100% - 240px); } }
@media screen and (max-width: 600px) { .section .inner { padding-top: 10rem; }
  .section .wappen { width: 40%; right: -8%; top: 0; }
  .section .midashi { max-width: none; } }

#charm .inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8rem 6rem; padding-top: 0; }
#charm .sub-title { text-align: center; font-size: 2rem; font-feature-settings: "palt"; letter-spacing: 0.05em; border-bottom: 1px solid #000000; padding-bottom: 1rem; }
#charm .img { margin-top: 2rem; margin-inline: auto; }
#charm .img .note { padding-top: 1.5rem; }
#charm .detail01 .img { max-width: 455px; }
#charm .detail02 .img { max-width: 461px; }
#charm .detail02 .img .note { text-align: left; }

#resale .detail { max-width: 860px; margin-inline: auto; display: grid; grid-template-columns: 0.83fr 1fr; align-items: center; gap: 4rem 2rem; margin-top: 5rem; }

#near .midashi { margin-top: 1rem; }
#near .item-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2.2rem; margin-top: 3rem; }
#near .item { display: grid; grid-template-columns: 0.8fr 1fr; column-gap: 2rem; align-items: flex-start; text-align: left; }
#near .item .img { grid-row: span 2; }
#near .item .title { font-size: 1.8rem; font-feature-settings: "palt"; letter-spacing: 0.05em; }
#near .item .text { font-size: 1.4rem; margin-top: 1rem; line-height: 1.4; }

#rarity .detail { max-width: 860px; margin-inline: auto; display: grid; grid-template-columns: 0.75fr 1fr; align-items: center; gap: 4rem 2rem; margin-top: 5rem; }
#rarity .lead + .note { grid-column-start: 1; }
#rarity .graf { grid-row-start: 1; grid-row-end: 3; grid-column-start: 2; }
#rarity .graf .img { margin-top: 2rem; }
#rarity .graf .note { text-align: right; }

#future .midashi { margin-top: 2rem; }
#future .detail { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 3rem; margin-inline: auto; text-align: left; margin-top: 3rem; align-items: flex-start; max-width: 600px; margin-inline: auto; }
#future .detail .text { font-size: 1.5rem; line-height: 1.6; }

#comfort-section .lead { text-align: center; margin-top: 3rem; }
#comfort-section .detail { margin-top: 6rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem 6rem; }
#comfort-section .graf .note { text-align: left; }

@media screen and (max-width: 1024px) { #near .item-list { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 600px) { #charm .inner { grid-template-columns: 1fr; }
  #resale .detail { grid-template-columns: 1fr; margin-top: 3rem; }
  #resale .detail .lead { text-align: center; }
  #near .item-list { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  #near .item-list .item { grid-template-columns: 1fr 0.8fr; }
  #near .item-list .item:nth-child(even) { grid-template-columns: 0.8fr 1fr; }
  #near .item-list .item:nth-child(even) .img { order: 2; }
  #near .item-list .item:nth-child(even) .text-block { order: 1; }
  #rarity .detail { grid-template-columns: 1fr; margin-top: 3rem; }
  #rarity .detail .lead { text-align: center; order: 1; }
  #rarity .detail .lead + .note { order: 3; }
  #rarity .detail .graf { order: 2; grid-row: span 1; grid-column-start: 1; }
  #rarity .detail .graf .img { max-width: 367px; margin-inline: auto; }
  #future .detail { width: 100%; gap: 2rem; }
  #future .detail .text br { display: none; }
  #future .detail .text .aw { display: inline; }
  #comfort-section .detail { margin-top: 4rem; grid-template-columns: 1fr; } }
#comparison-section .midashi { max-width: none; }
#comparison-section .fig { padding-top: 6.4rem; }
#comparison-section .fig table { width: 100%; margin: auto; border-collapse: collapse; }
#comparison-section .fig table th, #comparison-section .fig table td { font-size: 1.6rem; text-align: center; line-height: 1.28; vertical-align: middle; padding: 2rem 4%; }
#comparison-section .fig table td { width: 38%; font-size: 1.6rem; }
#comparison-section .fig table .item-point { background-color: #eae2e7; color: #7c5271; font-size: 1.6rem; }
#comparison-section .fig table .item-point .icon { width: 40%; max-width: 48px; margin: 0.4rem auto 0; mix-blend-mode: multiply; }
#comparison-section .fig table .item-point .icon img { width: 100%; height: auto; line-height: 0; vertical-align: middle; }
#comparison-section .fig table .us, #comparison-section .fig table .lease { position: relative; }
#comparison-section .fig table .us::before, #comparison-section .fig table .lease::before { content: ""; display: block; width: calc(100% - 10px); height: calc(100% - 10px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
#comparison-section .fig table .us p, #comparison-section .fig table .lease p { position: relative; z-index: 2; }
#comparison-section .fig table .us { color: #7c5271; }
#comparison-section .fig table .us::before { background-color: #fef3f1; }
#comparison-section .fig table .lease { color: #666; }
#comparison-section .fig table .lease::before { background-color: #fafafa; }
#comparison-section .fig table thead th { border-bottom: thin solid #666; }
#comparison-section .fig table thead .us::before, #comparison-section .fig table thead .lease::before { height: 100%; top: 0; transform: translateX(-50%); }
#comparison-section .fig table tbody th { width: 24%; border-bottom: thin solid #f5f5f5; }
#comparison-section .fig table tbody td { border-bottom: thin solid #ccc; position: relative; }
#comparison-section .result { margin: 1rem auto 0; padding: 2rem; border: 2px solid #7c5271; }
#comparison-section .result p { font-size: 2.4rem; text-align: center; line-height: 1.36; color: #7c5271; }
@media screen and (max-width: 600px) { #comparison-section .fig table th, #comparison-section .fig table td { padding: 1.5rem 2%; }
  #comparison-section .fig table td { text-align: left; }
  #comparison-section .fig table td .aw { display: inline; }
  #comparison-section .fig table .us::before, #comparison-section .fig table .lease::before { width: calc(100% - 4px); height: calc(100% - 4px); }
  #comparison-section .fig table tbody th, #comparison-section .fig table tbody td { font-size: 1.5rem; }
  #comparison-section .fig table tbody th { width: 26%; }
  #comparison-section .result p { font-size: 2rem; } }