@charset "UTF-8";
/* --------------------------------------------------
Contents
-------------------------------------------------- */
body #wrapper .contents .section-title { font-size: 2rem; display: flex; align-items: center; column-gap: 1.4rem; margin: 0 0 1rem; }
body #wrapper .contents .section-title span { font-family: var(--font-family); font-size: 1.3rem; }
body #wrapper .contents dl { display: flex; flex-wrap: wrap; font-size: 1.3rem; }
body #wrapper .contents .intro { margin: 0 0 7.5rem; }
body #wrapper .contents .intro .inner { padding: 0 var(--contents-pd); }
body #wrapper .contents .intro .inner .text + .text { margin: 3rem 0 0; }
body #wrapper .contents .steps { display: flex; flex-direction: column; row-gap: 7.5rem; margin: 0 0 15rem; }
body #wrapper .contents .steps .step#step01 .inner { padding: 0 var(--contents-pd); }
body #wrapper .contents .steps .step#step01 .inner .imagearea { overflow: auto; margin: 2.5rem -7.7% 0; padding: 0 var(--contents-pd); }
body #wrapper .contents .steps .step#step01 .inner .imagearea img { width: 290.8vw; max-width: none; aspect-ratio: 1200 / 726; }
body #wrapper .contents .steps .step#step02 .inner { padding: 0 var(--contents-pd); }
body #wrapper .contents .steps .step#step02 .inner dl.links { font-family: var(--font-system); line-height: 2.31; margin: 2.5rem 0 4rem; }
body #wrapper .contents .steps .step#step02 .inner dl.links dt { width: 4rem; }
body #wrapper .contents .steps .step#step02 .inner dl.links dd { width: calc(100% - 4rem); }
body #wrapper .contents .steps .step#step02 .inner .link-btn a::after { background-image: url("../images/common/icon-dl.svg"); width: 1.9rem; }
body #wrapper .contents .steps .step#step02 .inner .sizechart-container { margin: 11.5rem -7.7% 0 0; display: flex; flex-direction: column; row-gap: 3.5rem; }
body #wrapper .contents .steps .step#step02 .inner .sizechart-container .sizechart-group .chart-title { font-family: var(--font-family); font-size: 1.3rem; margin: 0 0 1rem; }
body #wrapper .contents .steps .step#step02 .inner .sizechart-container .sizechart-group .sizechart { display: flex; column-gap: 0.1rem; font-family: var(--font-system); font-size: 1.3rem; }
body #wrapper .contents .steps .step#step02 .inner .sizechart-container .sizechart-group .sizechart .column { flex: none; width: 9.7rem; display: flex; flex-direction: column; row-gap: 0.1rem; }
body #wrapper .contents .steps .step#step02 .inner .sizechart-container .sizechart-group .sizechart .column .field { height: 3rem; display: flex; justify-content: center; align-items: center; column-gap: 0.7rem; }
body #wrapper .contents .steps .step#step02 .inner .sizechart-container .sizechart-group .sizechart .column .field:nth-child(1) { font-family: var(--font-family); }
body #wrapper .contents .steps .step#step02 .inner .sizechart-container .sizechart-group .sizechart .column .field:nth-child(2n-1) { background: #F7F6F6; }
body #wrapper .contents .steps .step#step02 .inner .sizechart-container .sizechart-group .sizechart .column .field:nth-child(2n) { background: #ECEDED; }
body #wrapper .contents .steps .step#step02 .inner .sizechart-container .sizechart-group .sizechart .chart-data { flex: none; width: calc(100% - 9.8rem); display: flex; column-gap: 0.1rem; overflow: auto; padding: 0 var(--contents-pd) 0 0; }
body #wrapper .contents .steps .step#step02 .inner .sizechart-container .sizechart-group .sizechart .chart-data .column .field .long { transform: scale(0.8, 1); transform-origin: left; white-space: nowrap; width: 4.8em; }
body #wrapper .contents .steps .step#step02 .inner .sizechart-container .sizechart-group .sizechart .chart-data .column .field:nth-child(1) .number { width: 1.6rem; aspect-ratio: 1; border-radius: 50%; background: var(--primary-color); color: var(--white-color); font-family: var(--font-en); font-size: 1.1rem; display: flex; justify-content: center; align-items: center; }
body #wrapper .contents .steps .step#step03 .inner { padding: 0 var(--contents-pd); }
body #wrapper .contents .steps .step#step03 .inner dl.links { line-height: 1.77; margin: 6rem 0 0; }
body #wrapper .contents .steps .step#step03 .inner dl.links dt { width: 100%; }
body #wrapper .contents .steps .step#step03 .inner dl.links dd { width: 100%; font-family: var(--font-system); }
body #wrapper .contents .steps .step#step03 .inner .btnarea { margin: 10rem 0 0; display: flex; flex-direction: column; row-gap: 2.5rem; }
body #wrapper .contents .details { padding: 6rem 0 0; border-top: 1px solid #000; display: flex; flex-direction: column; row-gap: 6rem; margin: 0 0 12.5rem; }
body #wrapper .contents .details .detail .inner { padding: 0 var(--contents-pd); }
body #wrapper .contents .details .detail#detail01 .inner ul li { display: flex; }
body #wrapper .contents .details .detail#detail01 .inner ul li::before { display: block; content: "・"; }
body #wrapper .contents .details .detail#detail02 .inner .text + .text { margin: 3rem 0 0; }
body #wrapper .contents .details .detail#detail02 .inner dl.links dt { width: 6rem; }
body #wrapper .contents .details .detail#detail02 .inner dl.links dd { width: calc(100% - 6rem); }
body #wrapper .contents .details .detail#detail03 .inner ul { margin: 2rem 0 0; }
body #wrapper .contents .details .detail#detail03 .inner ul li { display: flex; }
body #wrapper .contents .details .detail#detail03 .inner ul li::before { display: block; content: "・"; }
body #wrapper .contents .closing { background: var(--primary-color); color: var(--white-color); padding: 7.5rem 0 0; margin: 0 0 -5rem; text-align: center; font-family: var(--font-en); font-weight: 700; }
body #wrapper .contents .closing .inner .text-line1 { font-size: 2.5rem; margin: 0 0 6rem; }
body #wrapper .contents .closing .inner .logo { width: 15.5rem; margin: 0 auto 6rem; }
body #wrapper .contents .closing .inner .logo img { aspect-ratio: 371 / 250; }
body #wrapper .contents .closing .inner .text-line2 { font-size: 2.25rem; }
body #wrapper .footer { background: var(--primary-color); color: var(--white-color); }

@media screen and (min-width: 768px) { body #wrapper .contents .section-title { font-size: 2.5rem; column-gap: 1.5rem; margin: 0 0 1.5rem; }
  body #wrapper .contents .section-title span { font-size: 1.4rem; }
  body #wrapper .contents dl { font-size: 1.4rem; }
  body #wrapper .contents .text a, body #wrapper .contents .links a { transition: opacity 0.4s var(--ease) 0s; }
  body #wrapper .contents .text a:hover, body #wrapper .contents .links a:hover { opacity: 0.5; }
  body #wrapper .contents .intro { margin: 0 0 12rem; }
  body #wrapper .contents .intro .inner { padding: 0; width: var(--contents-w); max-width: var(--contents-mw); margin: 0 auto; }
  body #wrapper .contents .steps { row-gap: 12rem; }
  body #wrapper .contents .steps .step#step01 .inner { padding: 0; width: var(--contents-w); max-width: var(--contents-mw); margin: 0 auto; }
  body #wrapper .contents .steps .step#step01 .inner .imagearea { overflow: hidden; margin: 3rem 0 0; padding: 0; }
  body #wrapper .contents .steps .step#step01 .inner .imagearea img { width: 100%; }
  body #wrapper .contents .steps .step#step02 .inner { padding: 0; width: var(--contents-w); max-width: var(--contents-mw); margin: 0 auto; }
  body #wrapper .contents .steps .step#step02 .inner dl.links { line-height: 1.79; margin: 3rem 0 5rem; }
  body #wrapper .contents .steps .step#step02 .inner dl.links dt { width: 4.5rem; }
  body #wrapper .contents .steps .step#step02 .inner dl.links dd { width: calc(100% - 4.5rem); }
  body #wrapper .contents .steps .step#step02 .inner .link-btn { width: 36.4rem; font-size: 2.5rem; }
  body #wrapper .contents .steps .step#step02 .inner .link-btn a::after { width: 2.3rem; }
  body #wrapper .contents .steps .step#step02 .inner .sizechart-container { margin: 10rem calc((120rem - calc(var(--vw) * (1 * 100))) / 2) 0 0; row-gap: 6rem; } }
@media screen and (min-width: 768px) and (max-width: 1250px) { body #wrapper .contents .steps .step#step02 .inner .sizechart-container { margin-right: calc(var(--vw) * (-0.02 * 100)); } }
@media screen and (min-width: 768px) { body #wrapper .contents .steps .step#step02 .inner .sizechart-container .sizechart-group .chart-title { font-size: 1.4rem; margin: 0 0 1.7rem; }
  body #wrapper .contents .steps .step#step02 .inner .sizechart-container .sizechart-group .sizechart { font-size: 1.3rem; }
  body #wrapper .contents .steps .step#step02 .inner .sizechart-container .sizechart-group .sizechart .chart-data { padding: 0 calc((calc(var(--vw) * (1 * 100)) - 120rem) / 2) 0 0; -ms-overflow-style: none; scrollbar-width: none; } }
@media screen and (min-width: 768px) and (max-width: 1250px) { body #wrapper .contents .steps .step#step02 .inner .sizechart-container .sizechart-group .sizechart .chart-data { padding-right: calc(var(--vw) * (0.02 * 100)); } }
@media screen and (min-width: 768px) { body #wrapper .contents .steps .step#step02 .inner .sizechart-container .sizechart-group .sizechart .chart-data::-webkit-scrollbar { display: none; }
  body #wrapper .contents .steps .step#step03 .inner { padding: 0; width: var(--contents-w); max-width: var(--contents-mw); margin: 0 auto; }
  body #wrapper .contents .steps .step#step03 .inner dl.links { line-height: 1.71; margin: 3rem 0 0; }
  body #wrapper .contents .steps .step#step03 .inner dl.links dt { width: 12rem; }
  body #wrapper .contents .steps .step#step03 .inner dl.links dd { width: calc(100% - 12rem); }
  body #wrapper .contents .steps .step#step03 .inner .btnarea { flex-direction: row; align-items: center; justify-content: center; column-gap: 6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; background: var(--bg-color); height: 8rem; transform: translate(0, 101%); transition: transform 0.4s var(--ease) 0s; }
  body #wrapper .contents .steps .step#step03 .inner .btnarea .link-btn { width: 36.4rem; height: 5.4rem; font-size: 2.5rem; }
  body #wrapper .contents .steps .step#step03 .inner .btnarea.is-show { transform: none; }
  body #wrapper .contents .details { padding: 9rem 0 0; row-gap: 5rem; }
  body #wrapper .contents .details .detail .inner { padding: 0; width: var(--contents-w); max-width: var(--contents-mw); margin: 0 auto; }
  body #wrapper .contents .details .detail#detail02 .inner dl.links dt { width: 6.5rem; }
  body #wrapper .contents .details .detail#detail02 .inner dl.links dd { width: calc(100% - 6.5rem); }
  body #wrapper .contents .details .detail#detail03 .inner ul { margin: 2.4rem 0 0; }
  body #wrapper .contents .closing { padding: 10rem 0 0; margin: 0; }
  body #wrapper .contents .closing .inner .text-line1 { font-size: 3.5rem; margin: 0 0 10rem; }
  body #wrapper .contents .closing .inner .logo { width: 28rem; margin: 0 auto 12rem; }
  body #wrapper .contents .closing .inner .text-line2 { font-size: 3rem; } }