@charset "UTF-8";
/* COMMON STYLE */
.sa-spot-sm a:hover { opacity: 0.8}
h2 { margin-bottom: 30px; font-size: 20px!important; line-height: 1.5}
h2 strong, h2 big { font-size: 30px}
h3 { margin-bottom: 20px; font-size: 18px; font-weight: 500; text-align: center; line-height: 1.5}
sup { font-size: 10px; vertical-align: super}
@media screen and (min-width: 768px) { 
  h2 { margin-bottom: 40px; font-size: 30px!important}
  h2 strong, h2 big { font-size: 40px}
  h3 { font-size: 25px}
  h3 big { font-size: 40px}
}
.sa-spot-sm { overflow-x: hidden}
.sa-spot-sm p { line-height: 1.8!important}
.kv-inr, .inr { width: 100%; max-width: 1080px; margin: auto; padding: 0 20px}
.co-blue { color: #0062b1}
@media screen and (min-width: 768px) {
  .box-outline { display: flex; justify-content: space-between}
}
/* .btn-area */
.kv-btm.btn-area { position: relative; z-index: 5}
.btn-area { max-width: 670px; margin: auto}
.btn-area .btn { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 60px; margin-bottom: 5px;  font-size: 18px; text-decoration: none; border-radius: 100vh; box-shadow: 5px 5px rgba(1,98,177,.5)}
.btn-area .btn small { display: block; margin-bottom: 5px; font-size: 13px}
.btn-area .btn.contact { color: #fff; background: #0162b1}
.btn-area .btn.download { color: #0162b1; font-weight: bold; background: #fff; border: 2px solid #0162b1}
.btn-area.content { margin-top: 40px}
@media screen and (max-width: 767px) {
  .kv-btm.btn-area { margin-top: -50px; padding-bottom: 30px; background: #ffc000}
  .btn-area .btn { max-width: 90%; margin: auto}
  .btn-area .btn.download { margin-top: 20px}
}
@media screen and (min-width: 768px) {
  .kv-btm.btn-area { margin-top: -30px; position: relative; z-index: 5}
  .btn-area { display: flex; justify-content: space-between}
  .btn-area .btn { width: 322px}
  .btn-area .btn:hover { transform: scale(1.05)}
  .btn-area .btn.contact:hover { color: #0162b1; font-weight: bold; background: #fff; border: 2px solid #0162b1}
  .btn-area .btn.download:hover { color: #fff; background: #0162b1}
  .btn-area.content { margin-top: 80px}
}
/* .kv */
.kv { position: relative; background: #ffc000; overflow: hidden}
.kv h1 { letter-spacing: 0.02em}
.kv h1 span { display: block; margin-bottom: 20px; margin-left: 0.5em; font-size: 16px}
.kv h1 img { width: 80%}
.kv .logo { margin: 25px 0 30px}
.kv .box-image img { filter: drop-shadow(15px 15px 5px rgba(151,101,1,0.3)); pointer-events: none}
@media screen and (max-width: 767px) {
  .kv { padding: 100px 0 50px}
  .kv .kv-inr { text-align: center}
  .kv .logo { width: 90%}
  .kv .box-image img { margin: 30px 0 -1px}
}
@media screen and (min-width: 768px) {
  .kv { padding: 0!important; background: url(../img/sa-spot/bg-kv_sm.png) no-repeat top center/cover}
  .kv .kv-inr { position: relative; min-width: 1080px; height: 500px}
  .kv .box-left { display: flex; align-items: center; height: 500px}
  .kv h1 span { font-size: 16px}
  .kv h1 img { width: 375px}
  .kv .logo { margin: 30px 0}
  .kv .btn-area { margin-top: 30px}
  .kv .btn-area .btn.contact { margin-right: 20px}
  .kv .box-image { position: absolute; right: 0; bottom: -1px}
  .kv .box-image img { width: 620px; height: auto}
}
/* .sec-movie */
.sec-movie { padding: 60px 0}
.sec-movie .text { font-size: 16px; font-weight: bold; text-align: center}
.sec-movie .box-movie { width: 100%; max-width: 600px; margin: 30px auto 0; }
.sec-movie .box-movie iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; padding: 10px; background: #141414; border-radius: 10px}
@media screen and (min-width: 768px) {
  .sec-movie { padding: 60px 0 90px}
  .sec-movie .box-movie iframe { padding: 25px; order-radius: 25px}
}
/* .sec-service */
.sec-service { padding: 50px 0; background: #edebe1}
.sec-service .box-text p { margin-bottom: 10px!important}
.sec-service .box-text p:last-of-type { margin-bottom: 0!important}
@media screen and (max-width: 767px) {
  .sec-service figure { margin-top: 50px; text-align: center}
  .sec-service figure img { width: 90%}
}
@media screen and (min-width: 768px) {
  .sec-service .box-text { width: 43%}
  .sec-service .box-image { width: 48%}
}
/* .sec-notice　.sec-movie  */
.sec-graph { padding: 60px 0; background: #edebe1}
.sec-graph .inr .notes { margin-top: 1em!important}
@media screen and (max-width: 767px) {
  .sec-graph .inr figure { width: 50%; margin: 0 auto 30px}
  .sec-notice .box-center { max-width: 80%}
}
@media screen and (min-width: 768px) {
  .sec-graph { padding: 90px 0 60px}
  .sec-graph .inr { display: flex; justify-content: space-between}
  .sec-graph .inr figure { width: 300px;}
  .sec-graph .inr .box-text { display: flex; justify-content: center; flex-direction: column; width: calc(100% - 350px);}
  .sec-graph .inr h3 { text-align: left!important}
}
/* .sec-features */
.sec-features { padding: 40px 0 60px; background: #ffd555}
.sec-features a { text-decoration: underline}
.sec-features figure { width: 100%; margin: 50px auto 0}
.sec-features .box-features { position: relative; margin-bottom: 40px; padding: 50px 20px 0; background: #fff; border: 2px solid #141414; border-radius: 16px}
.sec-features .box-features:nth-of-type(2), .sec-features .box-features:nth-of-type(3) { padding-bottom: 20px}
.sec-features .box-features:nth-of-type(3) { margin-bottom: 0}
.sec-features .box-features .icon-number { position: absolute; top: -30px; left: -20px; width: 70px; height: 70px; line-height: 70px; padding-left: 0.4em; color: #fff; font-size: 30px; font-style: italic; background: #0062b1; border-radius: 100vh}
.sec-features ul, .sec-fee ul { margin-top: 40px!important; line-height: 1.8}
@media screen and (min-width: 768px) {
  .sec-features { padding-top: 90px}
  .sec-features .box-features { margin: 0 0 80px 7%; padding: 30px 40px 0; border-width: 3px; border-radius: 45px}
  .sec-features .box-features .icon-number { position: absolute; top: -25px; left: -7%; width: 125px; height: 125px; line-height: 125px; padding-left: 0.3em; color: #fff; font-size: 6.25vw}
  .sec-features figure { width: 100%; max-width: 650px}
}
@media screen and (min-width: 768px) {
  .sec-features { padding: 40px 0 85px}
  .sec-features .box-features .icon-number { font-size: 60px}
}
/* .sec-fee */
.sec-fee, .sec-case-study, .sec-flow,.sec-faq { padding: 40px 0 60px}
.sec-fee .box-outline { margin-top: 40px}
.sec-fee .fee { padding: 20px; font-size: 14px; font-weight: bold; border: 2px solid #141414; border-radius: 16px}
.sec-fee .fee b { font-size: 18px}
.sec-fee .fee big { display: inline-block; font-weight: bold}
.sec-fee .fee sup { margin-left: 5px}
.sec-fee .fee.initial big { color: #ffc000; margin-bottom: -8px; font-size: 60px}
.sec-fee .fee.initial big::after { content: "円"; margin-top: -16px; margin-left: 3px; color: #141414; font-size: 26px; font-weight: bold}
.sec-fee .fee.system, .sec-fee .fee.transfer { margin-top: 10px!important}
.sec-fee .fee.system big, .sec-fee .fee.transfer big { font-size: 40px; margin-bottom: -5px}
.sec-fee .fee.system .fukidashi { padding: 10px; color: #fff; text-align: center; line-height: 1.3!important; background: #d62c29; border-radius: 4px; box-shadow: 3px 3px rgba(0,0,0,.3); z-index: 55}
.sec-fee .fee.system .fukidashi span { display: block; position: relative}
.sec-fee .fee.system .del { padding: 0 2px; background-image: linear-gradient(#d62c29, #d62c29); background-position: 0 40%; background-size: 100% 4px; background-repeat: repeat-x; text-decoration: none}
.sec-fee .fee.system .fukidashi small { font-size: 10px}
.sec-fee .fee.system .fukidashi big { margin-top: -10px}
.sec-fee .fee.system .fukidashi big::after { content: "%"; margin-left: 3px; font-size: 18px}
.sec-fee .box-right .ttl { margin-bottom: 20px!important; line-height: 36px; text-align: center; font-weight: bold; background: #ffc000; border-radius: 100vh}
.sec-fee .box-right .text-etc { margin-bottom: 33px!important; font-size: 16px; font-weight: bold; text-align: center}
@media screen and (max-width: 767px) {
  .sec-fee .fee { text-align: center; line-height: 1.3!important}
  .sec-fee .fee b { display: block}
  .sec-fee .fee.system .fukidashi { margin: 20px 0!important}
  .sec-fee .fee.system .fukidashi { width: 55%; margin: 30px auto 0!important}
  .sec-fee .fee.system .fukidashi span::after { content: ""; position: absolute; right: 20%; top: -30px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid #d62c29;}
  .sec-fee .box-right { margin-top: 50px}
}
@media screen and (min-width: 768px) {
  .sec-fee, .sec-case-study, .sec-flow,.sec-faq { padding: 75px 0}
  .sec-fee .inr { min-width: 1030px}
  .sec-fee .box-left, .sec-fee .box-right { width: 48%}
  .sec-fee .fee { display: flex; align-items: flex-end; min-height: 90px; padding: 0 20px 25px; line-height: 1!important}
  .sec-fee .fee.system { position: relative;}
  .sec-fee .fee.system .fukidashi { position: absolute; top: -65px; right: 50px}
  .sec-fee .fee.system .fukidashi span::after { content: ""; position: absolute; left:  20px; bottom: -30px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid #d62c29;}
  .sec-fee .fee.system .del { padding: 0 2px; background-image: linear-gradient(#d62c29, #d62c29); background-position: 0 60%}
}
/* .sec-case-study */
.sec-case-study { background: #ffc000}
.sec-case-study ul li { padding: 20px; background: #fff; border: 2px solid #141414; border-radius: 16px}
.sec-case-study .image { margin-bottom: 30px}
.sec-case-study .image img { width: 100%}
.sec-case-study .logo { text-align: center}
.sec-case-study .logo figcaption { margin: 10px 0 30px; font-size: 18px; font-weight: bold}
.sec-case-study ul li .ttl { font-size: 16px}
.sec-case-study ul li time { display: block; margin-top: 10px; color: #666; font-size: 14px}
.sec-case-study ul li a { display: flex; justify-content: center; align-items: center; height: 40px; margin-top: 30px; color: #fff; background: #141414}
@media screen and (max-width: 767px) {
  .sec-case-study ul li:nth-child(n+2) { margin-top: 20px}
  
}
@media screen and (min-width: 768px) {
  .sec-case-study ul { display: flex; justify-content: center}
  .sec-case-study ul li { display: flex; flex-direction: column; width: 32%; margin: 0 1%}
  .sec-case-study ul li .ttl { flex-grow: 1}
}
/* .sec-flow */
.sec-flow { position: relative; background: #eee}
.sec-flow .inr { max-width: 1120px; padding: 0 20px}
.sec-flow ul li { width: 100%; font-size: 14px}
.sec-flow ul li .arrow-right { display: flex; justify-content: center; align-items: center; height: 40px; color: #fff; background: #141414}
.sec-flow figure { margin: 15px 0 10px; text-align: center}
.sec-flow .notes { margin-top: 20px!important}
@media screen and (max-width: 767px) {
  .sec-flow ul li { position: relative; padding: 20px; background: #fff; border-radius: 16px}
  .sec-flow ul li:nth-child(n+2) { margin-top: 50px}
  .sec-flow ul li::after { content: ""; position: absolute; left: 50%; bottom: -55px; transform: translateX(-50%); border: 20px solid; border-color: #141414 transparent transparent transparent}
  .sec-flow ul li:last-child::after { border: 0}
}
@media screen and (min-width: 768px) { 
  .sec-flow ul { display: flex; justify-content: space-between; padding: 40px 40px 30px; background: #fff; border-radius: 10px}
  .sec-flow ul li { width: 19.5%}
  .sec-flow ul li .arrow-right { position: relative; width: calc(100% - 20px)}
  .sec-flow ul li .arrow-right::after { content: ""; position: absolute; top: 0; left: 100%; display: inline-block;
  border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent transparent transparent #141414}
  .sec-flow ul li .flow-inr { padding-right: 20px}
  .sec-flow ul li:last-child .flow-inr { padding-right: 0}
}
/*.sec-faq */
.sec-faq h3 { margin-bottom: 20px; font-size: 18px; text-align: left; font-weight: bold}
.sec-faq h3:nth-of-type(n+2) { margin-top: 50px}
.sec-faq a { color: #ffc000; text-decoration: underline}
.sec-faq .accordion { margin-bottom: 20px; border: 2px solid #141414}
.sec-faq .toggle { display: none}
.sec-faq .box-faq { position: relative}
.sec-faq .question:hover { cursor:pointer}
.sec-faq .question p { margin: 0 0 0 20px!important; font-size: 16px; font-weight: bold; line-height: 1.3!important}
.sec-faq .question,.sec-faq .answer { backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s}
.sec-faq .question { display: block; padding: 15px 40px}
.sec-faq .question::after,.sec-faq .question::before { content: ""; position: absolute; right: 1.25em; top: 45%; width: 3px; height: 1em; background-color: #ffc000; transition: all 0.3s}
.sec-faq .question::after { transform: rotate(90deg)}
.sec-faq .ic-q { position: absolute; top: 50%; transform: translateY(-50%); left: 10px; width: 40px; height: 40px; line-height: 36px; font-size: 21px; text-align: center; font-style: normal; background: #ffc000}
.sec-faq .ic-a { display: inline-block; width: 40px; height: 40px; line-height: 36px; margin-right: 10px; color: #fff; font-size: 30px; font-style: normal; text-align: center; background: #ffc000}
.sec-faq .answer { max-height: 0; overflow: hidden}
.sec-faq .answer-inr { padding: 15px}
.sec-faq .answer .lead { margin-bottom: 30px!important; padding-bottom: 30px; font-size: 16px; font-weight: 500; border-bottom: 1px dashed #ddd}
.sec-faq .toggle:checked + .question { background: #ffc000}
.sec-faq .toggle:checked + .question + .answer { max-height: 500px; transition: all 1.5s}
.sec-faq .toggle:checked + .question::before { transform: rotate(90deg) !important}
.sec-faq .toggle:checked + .question::after { background-color: #fff}
.sec-faq .toggle:checked + .question .ic-q { color: #fff; background: none}
@media screen and (min-width: 768px) { 
  .sec-faq .question { padding: 20px 40px}
  .sec-faq .question p { font-size: 18px}
  .sec-faq .question::after,.sec-faq .question::before { right: 1.25em; top: 1.25em}
  .sec-faq .answer-inr { padding: 30px}
}
@media print {
  #body {  display: none!important}
}
/* 20250430 add */
.sec-features .box-features:nth-of-type(3) figure { max-width: 90%; margin-top: 30px}
.sec-features .box-features:nth-of-type(3) figure img { width: 100%!important}
.sec-features .marker { display: block; width: fit-content; padding-bottom: 5px; border-bottom: 2.5px solid #ffd555; /*background:linear-gradient(transparent 60%, rgba(255,213,85,0.5) 60%)*/}
.sec-features .mb2em { margin-bottom: 2em!important}
.sec-features small {font-size: 14px}

.sec-fee .fee.system small { font-size: 12px; line-height: 1.3}
.sec-fee .fee.system .fukidashi02 { padding: 10px; text-align: center; line-height: 1.6!important; background: #fff; border-radius: 8px; border: 4.5px solid #dd0033; box-shadow: 3.5px 3.5px rgba(0,0,0,.5); z-index: 55}
.sec-fee .fee.system .fukidashi02 span { display: block; position: relative}
.sec-fee .fee.system .fukidashi02 small { font-size: 10px}
.sec-fee .fee.system .fukidashi02 big { margin-top: -20px; font-size: 38px}
.sec-fee .fee.system .fukidashi02 big::after { content: "%"; margin-left: 3px; font-size: 18px}
.sec-fee .fee.system .logo.baitoru { margin-right: 7.5px}
.sec-fee .fee.system .logo.next { margin-left: 7.5px}
.sec-fee .bg-goodjob { margin-top: 50px; padding: 10px; line-height: 1.8; background: #fff5d5; border-radius: 4px}
.sec-fee ul.notes { margin-top: 20px!important}
@media screen and (max-width: 767px) {
  .sec-fee .fee.system .fukidashi02 { margin: 20px 0!important}
  .sec-fee .fee.system .fukidashi02 { margin: 30px auto 0!important}
  .sec-fee .fee.system .fukidashi02 span::after { content: ""; position: absolute; left: 50%; top: -30px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid #dd0033}
}
@media screen and (min-width: 768px) {
  .sec-features h2 { margin-top: 80px}
  .sec-fee .fee { min-height: 120px; padding: 0 20px 40px}
  .sec-fee .inr { min-width: 1080px}
  .sec-fee .box-outline .box-left { width: 50%}
  .sec-fee .box-outline .box-right { width: 45%}
  .sec-fee .fee.system, .sec-fee .fee.transfer { margin-top: 20px!important}
  .sec-fee .fee.system .fukidashi02 { height: 100px; position: absolute; top: -80px; right: -20px; padding: 15px 25px; font-size: 12px; border-radius: 100vh}
  .sec-fee .fee.system .fukidashi02 span::after { content: ""; position: absolute; left: 5px; bottom: -23px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid #dd0033; transform: rotate(15deg)}
}