@charset "UTF-8";
main section#scndSystemSct { padding: 8em 0 7em; }
@media screen and (max-width: 480px) { main section#scndSystemSct { padding-bottom: 6em; } }
main section#scndSystemSct h2 span { letter-spacing: .1em; }
@media screen and (max-width: 480px) { main section#scndSystemSct h2 span { letter-spacing: .03em; } }
main section#scndSystemSct h2 span::before { width: 26vw; }
@media screen and (max-width: 480px) { main section#scndSystemSct h2 span::before { width: 10vw; } }
main section#scndSystemSct h2 span::after { width: 26vw; }
@media screen and (max-width: 480px) { main section#scndSystemSct h2 span::after { width: 10vw; } }
main section#scndSystemSct .ttl { position: relative; display: block; text-align: center; }
main section#scndSystemSct .ttl span { position: relative; display: inline-block; border: 1px solid #fff; padding: .8em 1.3em .7em; margin: 2em auto; font-size: 120%; line-height: 1.2; }
@media screen and (max-width: 480px) { main section#scndSystemSct .ttl span { font-size: 150%; margin: 1.5em auto 1em; } }
main section#scndSystemSct .howto { position: relative; display: block; width: 70%; margin: 0 auto 5em; }
@media screen and (max-width: 480px) { main section#scndSystemSct .howto { width: 92%; } }
main section#scndSystemSct .howto .sys { position: relative; }
main section#scndSystemSct .howto .sys li { position: relative; padding: 2em 1em; border-bottom: 1px dotted #fff; margin: 1em auto; }
@media screen and (max-width: 480px) { main section#scndSystemSct .howto .sys li { padding: 1.5em 0 1.5em 1em; margin: .5em auto; } }
main section#scndSystemSct .howto .sys li.s1 { padding-left: 20vw; background: url("../img/system_img-01.svg") no-repeat left center; background-size: 19vw auto; }
@media screen and (max-width: 480px) { main section#scndSystemSct .howto .sys li.s1 { padding-left: 3vw; background-size: 25vw auto; } }
@media screen and (max-width: 480px) { main section#scndSystemSct .howto .sys li.s1 p span { padding-left: 24vw; display: inline-block; } }
main section#scndSystemSct .howto .sys li.s1 p::before { content: "1"; }
main section#scndSystemSct .howto .sys li.s2 { padding-left: 20vw; background: url("../img/system_img-02.svg") no-repeat left center; background-size: 19vw auto; }
@media screen and (max-width: 480px) { main section#scndSystemSct .howto .sys li.s2 { padding-left: 3vw; background-size: 24vw auto; background-position: 2% 70%; } }
@media screen and (max-width: 480px) { main section#scndSystemSct .howto .sys li.s2 p span { padding-left: 24vw; display: inline-block; } }
main section#scndSystemSct .howto .sys li.s2 p::before { content: "2"; }
main section#scndSystemSct .howto .sys li.s3 { padding-left: 17vw; background: url("../img/system_img-03.svg") no-repeat left center; background-size: 15vw auto; }
@media screen and (max-width: 480px) { main section#scndSystemSct .howto .sys li.s3 { padding-left: 3vw; background-size: 23vw auto; background-position: 2% 70%; } }
@media screen and (max-width: 480px) { main section#scndSystemSct .howto .sys li.s3 p span { padding-left: 24vw; display: inline-block; } }
main section#scndSystemSct .howto .sys li.s3 p::before { content: "3"; }
main section#scndSystemSct .howto .sys li.s4 { border-bottom: none; text-align: center; }
main section#scndSystemSct .howto .sys li.s4 p { text-align: left; }
main section#scndSystemSct .howto .sys li.s4 p::before { content: "4"; }
main section#scndSystemSct .howto .sys li.s4 .imgB { width: 90%; margin: 1em auto 2em; background: #fff; padding: .5em; }
@media screen and (max-width: 480px) { main section#scndSystemSct .howto .sys li.s4 .imgB { width: 98%; margin: 1em auto 3em; } }
main section#scndSystemSct .howto .sys li.s4 img { width: 100%; height: auto; }
main section#scndSystemSct .howto .sys li p { position: relative; }
main section#scndSystemSct .howto .sys li p::before { z-index: 5; display: inline-block; font-weight: 700; font-size: 160%; background: #f00; border-radius: 50%; line-height: 1; padding: .05em .3em .13em; margin-right: .3em; }
main section#scndSystemSct .howto .sys li p strong { color: #f00; font-size: 140%; }
main section#scndSystemSct .howto .sys li p strong small { font-size: 70%; }
main section#scndSystemSct .howto .sys li p > small { display: inline-block; font-size: 80%; }
main section#scndSystemSct .pic { position: relative; z-index: 1; left: 44%; overflow: hidden; width: 56%; height: 30vw; object-fit: cover; }
@media screen and (max-width: 480px) { main section#scndSystemSct .pic { width: 86%; height: 40vw; left: 14%; margin-bottom: 15em; } }
main section#scndSystemSct .pic2 { position: relative; z-index: 1; overflow: hidden; width: 44%; height: 22vw; object-fit: cover; margin: 20em 0 16em; }
@media screen and (max-width: 480px) { main section#scndSystemSct .pic2 { width: 80%; height: 40vw; margin: 17em 0 32em; } }
main section#scndSystemSct .price { position: relative; margin-bottom: 5em; }
main section#scndSystemSct .price .priceBox { position: absolute; z-index: 5; left: 2%; display: inline-block; background: #fff; color: #000; width: 50%; padding: 2em 1vw 1em; font-weight: 700; text-align: center; margin: 3em 0 2em; }
main section#scndSystemSct .price .priceBox.preB { z-index: 4; left: inherit; right: 2%; }
@media screen and (max-width: 480px) { main section#scndSystemSct .price .priceBox.preB { margin-top: 30em; } }
main section#scndSystemSct .price .priceBox.preB .plan { line-height: 1.1; margin-top: .8em; }
@media screen and (max-width: 480px) { main section#scndSystemSct .price .priceBox.preB .plan { margin-top: 1.5em; } }
main section#scndSystemSct .price .priceBox.preB .plan span { line-height: 1.2; }
@media screen and (max-width: 480px) { main section#scndSystemSct .price .priceBox { width: 90%; margin: 11em 0 3em; } }
main section#scndSystemSct .price .priceBox .planT { display: inline-block; background: #f00; color: #fff; line-height: 1.2; margin-bottom: .5vw; padding: 2px; }
@media screen and (max-width: 480px) { main section#scndSystemSct .price .priceBox .planT { margin-bottom: 1em; } }
main section#scndSystemSct .price .priceBox .planT b { display: block; border: 2px solid #fff; font-size: 220%; padding: .1em 1em; }
main section#scndSystemSct .price .priceBox .planT.pre { background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); }
main section#scndSystemSct .price .priceBox .course { color: #f00; font-size: 200%; font-weight: 700; }
main section#scndSystemSct .price .priceBox .course.pre { color: #a58041; }
@media screen and (max-width: 480px) { main section#scndSystemSct .price .priceBox .course { font-size: 220%; line-height: 1.2; margin-bottom: 2vw; } }
main section#scndSystemSct .price .priceBox .p500 { display: inline-block; margin: 0 auto .2em; border: 3px solid #f00; padding: 0 .8em; color: #f00; font-size: 140%; font-weight: 900; }
main section#scndSystemSct .price .priceBox .p500setu { display: block; width: 70%; margin: 0 auto 1.2em; font-size: 70%; text-align: left; line-height: 1.5; }
main section#scndSystemSct .price .priceBox .p500setu strong { font-weight: 900; color: #f00; }
main section#scndSystemSct .price .priceBox .plan { position: relative; font-weight: 700; line-height: 1; margin-bottom: .4em; }
main section#scndSystemSct .price .priceBox .plan.jnor { display: inline-block; font-size: 80%; }
@media screen and (max-width: 480px) { main section#scndSystemSct .price .priceBox .plan.jnor { font-size: 70%; } }
main section#scndSystemSct .price .priceBox .plan span { position: relative; display: inline-block; color: #fff; font-size: 120%; background: #f00; padding: .3em .5em; bottom: .3em; }
main section#scndSystemSct .price .priceBox .plan span.toku { background: #c9a059; }
main section#scndSystemSct .price .priceBox .plan span.prem { background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); border: 2px solid #c9a059; color: #333; font-size: 140%; }
@media screen and (max-width: 480px) { main section#scndSystemSct .price .priceBox .plan span { font-size: 150%; } }
main section#scndSystemSct .price .priceBox .plan b { display: inline-block; font-size: 260%; font-weight: 400; padding-left: .2em; }
@media screen and (max-width: 480px) { main section#scndSystemSct .price .priceBox .plan b { font-size: 300%; } }
main section#scndSystemSct .price .priceBox .plan small { display: inline-block; }
main section#scndSystemSct .price .priceBox .atn1 { display: inline-block; font-size: 100%; line-height: 1.1; margin-bottom: .9em; }
main section#scndSystemSct .price .priceBox .atn1 small { padding-left: .3em; font-size: 80%; }
main section#scndSystemSct .price .priceBox .atn2 { display: inline-block; font-size: 100%; margin-bottom: .5em; line-height: 1.6; }
main section#scndSystemSct .price .priceBox .atn2 span { color: #f00; }
main section#scndSystemSct .price .priceBox .otoku { display: inline-block; border: 3px solid #f00; margin-bottom: .5em; padding: 0 1em; font-size: 110%; }
@media screen and (max-width: 480px) { main section#scndSystemSct .price .priceBox .otoku { font-size: 140%; line-height: 1.3; padding: 2vw 1vw; } }
main section#scndSystemSct .price .priceBox .otoku strong { color: #f00; font-size: 130%; }
main section#scndSystemSct .price .other { position: absolute; left: 4%; bottom: 2em; width: 41%; font-size: 90%; line-height: 1.6; text-align: justify; /*左右両端揃え*/ text-justify: inter-ideograph; }
@media screen and (max-width: 480px) { main section#scndSystemSct .price .other { position: relative; left: 2%; bottom: inherit; width: 84%; margin: 1em 0 3em; } }
main section#scndSystemSct .price .other .nonal { display: block; margin-bottom: 1vw; background: #fff; color: #000; text-align: center; font-weight: 700; padding: 1.5vw 0 1vw; }
@media screen and (max-width: 480px) { main section#scndSystemSct .price .other .nonal { padding: 1.5em 0 1em; } }
main section#scndSystemSct .price .other .nonal .ttl { display: block; font-size: 80%; line-height: 1.3; margin-bottom: .1em; }
main section#scndSystemSct .price .other .nonal .ttl strong { font-size: 200%; color: #f00; }
main section#scndSystemSct .price .other .nonal .plan { position: relative; font-weight: 700; line-height: 1; margin-bottom: .3em; }
main section#scndSystemSct .price .other .nonal .plan span { position: relative; display: inline-block; color: #c9a059; font-size: 80%; border: 2px solid #c9a059; padding: .1em .3em; line-height: 1.3; }
main section#scndSystemSct .price .other .nonal .plan b { display: inline-block; font-size: 260%; font-weight: 400; padding-left: .2em; }
@media screen and (max-width: 480px) { main section#scndSystemSct .price .other .nonal .plan b { font-size: 300%; } }
main section#scndSystemSct .price .other .nonal .plan small { display: inline-block; }
main section#scndSystemSct .price .other .nonal .atn1 { font-size: 110%; }
main section#scndSystemSct .price .other .nonal .atn1 small { padding-left: .3em; font-size: 80%; }
main section#scndSystemSct .center { padding-top: 5vw; text-align: center; }
main section .menu { position: relative; width: 80%; margin: 0 auto; }
main section .menu .box { display: block; padding: 1em 1.5em; border: 1px solid #fff; border-radius: 1em; margin-bottom: 1em; }
@media screen and (max-width: 480px) { main section .menu .box { margin: 2em auto; } }