.js-header { top: -200px; transition: top .5s; }
.js-header.is-show { top: 0; }
@media screen and (max-width: 600px) { .js-header { background-color: #fff; box-shadow: none; top: 0; } }

.menu-button { top: 8px; }

.action { width: 90%; max-width: 1100px; margin-left: auto; margin-right: auto; padding: 2rem 0; text-align: center; font-size: 2rem; letter-spacing: .1em; line-height: 1.5; }
.action b { color: #a28037; }
.action b sup { color: #333; font-size: 8px; letter-spacing: 0; }
.action .txt-l, .action .num { color: #a28037; font-size: 137%; }
@media screen and (max-width: 834px) { .action { font-size: 1.8rem; } }
@media screen and (max-width: 600px) { .action { font-size: 1.6rem; } }
@media screen and (max-width: 500px) { .action { font-size: 1.5rem; } }

.merit { background: #ddd8d4; padding: 1.5rem 0; }
.merit ul { width: 90%; max-width: 1100px; margin-left: auto; margin-right: auto; max-width: 1400px; display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); }
.merit ul img { display: block; width: 100%; height: auto; }
.merit ul li { display: grid; place-content: center; position: relative; padding: 0 20px; }
.merit ul li::after { content: ""; width: 1px; height: 100%; display: block; background: #3e5059; position: absolute; top: 0; right: 0; }
.merit ul li:last-of-type::after { display: none; }
.merit ul li.merit01 img { width: 100%; }
.merit ul li.merit02 img { width: calc(699 / 755 * 100%); }
.merit ul li.merit03 img { width: calc(668 / 755 * 100%); }
@media screen and (max-width: 768px) { .merit ul { max-width: 400px; margin-right: auto; margin-left: auto; grid-template-columns: 1fr; }
  .merit ul li { padding: 20px 0; }
  .merit ul li::after { width: 100%; height: 1px; top: auto; bottom: 0; } }

.info { width: 90%; max-width: 1100px; margin-left: auto; margin-right: auto; padding: 3rem 0; }
.info .info-ttl { text-align: center; font-size: 1.4rem; line-height: 1; letter-spacing: .1em; padding-bottom: 2rem; }
.info p { font-size: 1.5rem; line-height: 1.4; text-align: center; }
.info p + p { margin-top: 2rem; }
.info p .txt-ll { font-size: 150%; }
.info p .txt-l { font-size: 140%; }
.info p .red { color: #88310b; font-size: 120%; }
.info .note.note-l { font-size: 1.1rem; }
.info .conversion { padding-top: 2rem; }

.top-entrystep { background: #F5F6F6; width: 100%; margin: 0; padding: 0 0 30px 0; }
.top-entrystep .top-entry-ttl { font-size: 1rem; text-align: center; padding: 5px; background: #3e5059; color: #fff; line-height: 1.2; }
.top-entrystep .top-entry-ttl + ul { width: 90%; max-width: 1100px; margin-left: auto; margin-right: auto; margin-top: 30px; /*display: grid;
gap: 30px;
grid-template-columns: repeat(3,1fr);*/ display: flex; gap: 20px; }
.top-entrystep .top-entry-ttl + ul li.step01, .top-entrystep .top-entry-ttl + ul li.step02 { width: calc(510 / 1670 * 100%); }
.top-entrystep .top-entry-ttl + ul li.step03 { position: relative; width: calc(650 / 1670 * 100%); }
.top-entrystep .top-entry-ttl + ul li.step03 .step_plan { position: absolute; bottom: 3%; right: -5%; width: 36%; }
.top-entrystep .top-entry-ttl + ul li a:hover { filter: brightness(110%); }
.top-entrystep .conversion { padding-top: 2rem; padding-bottom: 20px; }
.top-entrystep .conversion li.request { width: 90%; max-width: 416px; margin: 0 auto; }
.top-entrystep .conversion li.limited { display: none; }
@media screen and (max-width: 768px) { .top-entrystep .top-entry-ttl + ul { /*grid-template-columns: 1fr;*/ flex-direction: column; }
  .top-entrystep .top-entry-ttl + ul li.step01, .top-entrystep .top-entry-ttl + ul li.step02 { width: 100%; }
  .top-entrystep .top-entry-ttl + ul li.step03 { width: 100%; } }

.top-front { width: 100%; margin: 0; padding: 5rem 0; background: #E6F0F9; background: -webkit-linear-gradient(0deg, #e6f0f9 100%, #f2f7fb 0%); background: -moz-linear-gradient(0deg, #e6f0f9 100%, #f2f7fb 0%); background: linear-gradient(0deg, #e6f0f9 100%, #f2f7fb 0%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#E6F0F9", endColorstr="#F2F7FB", GradientType=0); color: #333; }
.top-front b { color: #a28037; font-weight: normal; }
.top-front .num { font-size: 120%; color: #a28037; }
.top-front img { display: block; width: 100%; height: auto; }
.top-front .f-inner { width: 90%; max-width: 1100px; margin-left: auto; margin-right: auto; text-align: center; }
.top-front .ttl { width: 100%; max-width: 600px; margin: 0 auto; }
.top-front .f-copy { font-size: 1.2rem; line-height: 1.6; letter-spacing: .1em; margin-top: 3rem; }
.top-front .f-copy2 { font-size: 2rem; letter-spacing: .1em; line-height: 1.6; margin-top: 1rem; }
.top-front .f-lead { margin-top: 1rem; font-size: 1rem; letter-spacing: .1em; line-height: 1.8; }
.top-front .f-copy3 { max-width: 1200px; margin: 3rem auto 0 auto; }
.top-front .img-box { width: 100%; max-width: 1000px; margin: 5rem auto 0 auto; padding-bottom: 5rem; }
@media screen and (max-width: 768px) { .top-front { padding-bottom: 0; }
  .top-front .f-copy3 { max-width: 400px; }
  .top-front .img-box { max-width: 100%; }
  .top-front .img-box .img01_sp_txt { width: 64.75%; margin: 1rem auto 0 auto; } }