@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126 License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

html { width: 100%; height: initial; scroll-behavior: smooth; }

body { color: #333; font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', '游ゴシック体', YuGothic, 'Yu Gothic Medium', 'メイリオ', meiryo, sans-serif; -webkit-text-size-adjust: 100%; font-size: 4vw; font-weight: bold; line-height: 1.6; padding: 0 0 0; font-feature-settings: "palt"; }
@media (min-width: 769px) { body { font-size: 18px; } }

@media (max-width: 768px) { .pc { display: none; } }

@media (min-width: 769px) { .sp { display: none; } }

img { height: auto; max-width: 100%; vertical-align: bottom; }

a { color: #0575e2; text-decoration: underline; transition: opacity .5s; }
a:hover { opacity: .6; }
a[href^="tel:"] { pointer-events: none; }

p { text-align: justify; text-justify: inter-ideograph; }

.wrap { margin: 0 5vw; }
@media (min-width: 769px) { .wrap { margin: 0 auto; width: 1000px; } }

@media (min-width: 769px) { .kv { align-items: center; background: url("../img/kv-bg.jpg") center bottom no-repeat; background-size: cover; display: flex; height: 650px; justify-content: center; } }

.logo { align-items: center; display: flex; justify-content: center; padding: 10px 0; }
@media (max-width: 768px) { .logo { flex-wrap: wrap; } }
@media (min-width: 769px) { .logo { padding: 25px 0; } }
.logo li { padding: 10px; }
@media (max-width: 768px) { .logo li { max-width: 33.3%; }
  .logo li img { max-height: 40px; } }

.cont-wrap { margin: 0 5vw; }
@media (min-width: 769px) { .cont-wrap { margin: 0 70px; } }

/* .btn { text-align: center; margin: 40px 0 60px; }
.btn a { align-items: center; background-color: #fb9b03; border-radius: 8vw; color: #fff; display: flex; font-size: 6vw; height: 16vw; justify-content: center; line-height: 1; margin: 0 auto; text-decoration: none; width: 80%; }
@media (min-width: 769px) { .btn a { border-radius: 38px; font-size: 26px; height: 76px; width: 340px; } } */

.btn { text-align: center; margin: 20px 0 40px; }
.btn a { align-items: center; background-color: #fb9b03; border-radius: 8vw; color: #fff; display: flex; font-size: 5vw; height: 24vw; justify-content: center; line-height: 1.5; margin: 0 auto; text-decoration: none; width: 85%; }
@media (min-width: 769px) { .btn a { border-radius: 38px; font-size: 26px; height: 86px; width: 380px; line-height: 1.5; } }


@media (max-width: 768px) { .overflow { overflow-x: scroll; } }

table { width: 100%; }
table .none { background-color: #fff; border-left: none; border-right: none; border-top: none; }
table .b-b { background-color: #036ace; color: #fff; }
table .b-g { background-color: #13be6c; color: #fff; }
table .b-y { background-color: #fafe99; font-size: 122%; }
table .b-gr1 { background-color: #eef1f1; }
table .b-gr2 { background-color: #6c7070; color: #fff; }
table .b-sky { background-color: #07a4f6; color: #fff; }
table .b-red { background-color: #fc232d; color: #fff; }

th, td { border: 1px solid #b4c8d8; padding: 10px 5px; text-align: center; vertical-align: middle; white-space: nowrap; }
@media (min-width: 769px) { th, td { padding: 20px 0; } }
th b, td b { color: #036ace; }
th em, td em { color: #13be6c; }
th span, td span { color: #fc232d; }

.c-b { color: #036ace; }

.c-g { color: #13be6c; }

.notice { margin: 20px 0 0; }
@media (max-width: 768px) { .notice { font-size: 3.2vw; } }
.notice b { color: #fc232d; }

.footer { background-color: #036ace; color: #fff; font-size: 4vw; padding: 40px 0 50px; text-align: center; }
@media (min-width: 769px) { .footer { font-size: 14px; } }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .sitename { font-size: 6vw; margin: 20px 0 10px; }
@media (min-width: 769px) { .footer .sitename { font-size: 20px; } }
@media (max-width: 768px) { .footer .copyright { font-size: 3vw; } }

.fnav ul { display: flex; justify-content: center; }
.fnav li { line-height: 1; padding: 0 10px; }
.fnav li + li { border-left: 1px solid #fff; }

.popular { font-weight: bold; margin: 0 0 90px; }
.popular .wrap { border: 4px solid #fb9b03; border-top: none; }
.popular h1 { align-items: center; background-color: #fb9b03; color: #fff; display: flex; font-size: 6vw; height: 12vw; justify-content: center; margin: 0 0 60px; position: relative; }
@media (min-width: 769px) { .popular h1 { font-size: 46px; height: 110px; line-height: 1; } }
.popular h1::after { background: linear-gradient(to bottom left, #fb9b03 50%, transparent 50%) top left/50% 100% no-repeat, linear-gradient(to bottom right, #fb9b03 50%, transparent 50%) top right/50% 100% no-repeat; bottom: -20px; content: ''; display: block; height: 20px; position: absolute; width: 38px; }
@media (min-width: 769px) { .popular h1::after { bottom: -38px; height: 38px; width: 76px; } }
.popular .agree { margin: 20px 0 10px; text-align: center; }
@media (min-width: 769px) { .popular .agree { margin: 60px 0 30px; } }
@media (max-width: 768px) { .popular .agree img { width: 50vw; } }

.popular .check {
  align-items: center; display: flex; font-size: 4vw; margin: 5px 50px;
}
@media (min-width: 769px) {
  .popular .check {
    font-size: 30px; font-weight: bold; margin: 5px 300px;
  }
}
.popular .check-icon {
content: '';
width: 10px;
height: 5px;
border-left: 2px solid #25AF01;
border-bottom: 2px solid #25AF01;
transform: rotate(-45deg);
}

.popular .num { align-items: center; display: flex; font-size: 5vw; margin: 30px 0 0; }
@media (min-width: 769px) { .popular .num { font-size: 40px; font-weight: bold; margin: 50px 0 0; } }
.popular .num i { align-items: center; background: url("../img/num-bg.png") left center no-repeat; background-size: contain; color: #fff; margin: 0 2vw 0 0; padding: 0 0 0 6.9vw; width: 13vw; }
@media (min-width: 769px) { .popular .num i { font-size: 26px; height: 42px; margin: 0 15px 0 0; padding: 0 0 0 36px; width: 66px; } }
.popular h3 { align-items: center; background-color: #aeb5b5; color: #fff; display: flex; font-size: 4.5vw; height: 10vw; justify-content: center; margin: 30px 0 0; }
@media (min-width: 769px) { .popular h3 { font-size: 30px; height: 70px; } }
.popular p { margin: 10px 0 0; }
@media (min-width: 769px) { .popular p { margin: 20px 0 0; } }
.popular ul { border-right: 1px solid #aeb5b5; }
@media (max-width: 768px) { .popular ul { border-left: 1px solid #aeb5b5; } }
@media (min-width: 769px) { .popular ul { border-bottom: 1px solid #aeb5b5; display: flex; } }
.popular li { font-size: 5vw; padding: 10px 0; text-align: center; }
@media (max-width: 768px) { .popular li { border-bottom: 1px solid #aeb5b5; } }
@media (min-width: 769px) { .popular li { align-items: center; border-left: 1px solid #aeb5b5; display: flex; flex-direction: column; font-size: 26px; justify-content: center; padding: 40px 0; width: 50%; } }
.popular li span { font-size: 77%; }
.popular li b { color: #fc232d; display: block; font-size: 10vw; }
@media (min-width: 769px) { .popular li b { font-size: 50px; } }
.popular li b span { font-size: 60%; }
.popular li b sup { font-size: 70%; vertical-align: text-top; }
@media (min-width: 769px) { .popular .trial li { width: calc( 100% / 2 ); } }
.popular .standard h3 { background-color: #07a4f6; }
.popular .standard ul, .popular .standard li { border-color: #07a4f6; }
.popular .business h3 { background-color: #0563be; }
.popular .business h4 { align-items: center; background-color: #eef1f1; border: 1px solid #0563be; border-top: none; display: flex; height: 10vw; justify-content: center; }
@media (min-width: 769px) { .popular .business h4 { font-size: 26px; height: 60px; } }
.popular .business ul, .popular .business li { border-color: #0563be; }

.service { font-weight: bold; margin: 0 0 90px; }
.service h2 { font-size: 7vw; margin: 100px 0 30px; text-align: center; }
@media (min-width: 769px) { .service h2 { font-size: 46px; } }
.service h3 { font-size: 6vw; margin: 30px 0 10px; text-align: center; }
@media (min-width: 769px) { .service h3 { font-size: 34px; margin: 60px 0 20px; } }
.service h3.c-b, .service h3.c-g { align-items: center; display: flex; }
@media (max-width: 768px) { .service h3 b { display: block; } }
.service h3 img { margin: 0 10px 0 0; }
@media (max-width: 768px) { .service h3 img { width: 15vw; } }
.service p { text-align: center; }
@media (min-width: 769px) { .service p { font-size: 16px; } }
.service p b { color: #fc232d; font-size: 125%; }

.figure { border: 1px solid #bcc2c3; margin: 30px 0 0; padding: 0 0 30px; }
@media (min-width: 769px) { .figure { margin: 60px 0 0; padding: 0 0 50px; } }
@media (min-width: 769px) { .figure h3 { margin: 40px 0 20px; } }
.figure picture { display: block; text-align: center; }
@media (max-width: 768px) { .figure picture { margin: 0 5vw; } }

.contract { margin: 50px 0 0; }
@media (min-width: 769px) { .contract { display: flex; justify-content: space-between; } }

@media (min-width: 769px) { .contract-txt { width: 345px; } }
.contract-txt h3 { align-items: center; background-color: #434242; color: #fff; display: flex; font-size: 5vw; height: 10vw; justify-content: center; margin: 0; }
@media (min-width: 769px) { .contract-txt h3 { font-size: 22px; height: 60px; } }
.contract-txt p { font-size: 5vw; padding: 20px 0; }
@media (min-width: 769px) { .contract-txt p { font-size: 18px; } }

.contract02 h3 { background-color: #036ace; }

.contract03 h3 { background-color: #fc232d; }
.contract03 p { border: 2px solid #fc232d; border-top: none; }

.contract-table { text-align: right; }
@media (max-width: 768px) { .contract-table { margin: 40px 0 0; } }
@media (min-width: 769px) { .contract-table { width: 615px; } }
.contract-table th { background-color: #eef1f1; }
.contract-table .none { background-color: #fff; }
.contract-table .paper { background-color: #434242; color: #fff; }
.contract-table .b-b { background-color: #036ace; }

@media (min-width: 769px) { .difference { display: flex; justify-content: space-between; } }
.difference h3 { justify-content: center; margin: 30px 0 20px; }
@media (min-width: 769px) { .difference h3 { margin: 20px 0; } }
.difference .box { background-color: #eef1f1; padding: 20px 20px 5px; }
@media (min-width: 769px) { .difference .box { height: 340px; padding: 30px 35px 10px; width: 475px; } }
.difference .box h4 { color: #036ace; }
.difference .box p { margin: 0 0 20px; text-align: left; }

.difference-table tr:nth-of-type(2n+1) { background-color: #eef1f1; }
.difference-table td:not(.white) { line-height: 1.3; }
.difference-table td:not(.white) b { font-size: 122%; }
.difference-table td:not(.white) b i { font-size: 82%; }
.difference-table .white { background-color: #fff; font-size: 122%; }

.sign-table td { line-height: 1.3; }
.sign-table td b { font-size: 167%; }

.reccomend { margin: 0 0 90px; }
.reccomend h2 { align-items: center; background-color: #fb9b03; color: #fff; display: flex; font-size: 6vw; height: 12vw; justify-content: center; margin: 0 0 60px; position: relative; }
@media (min-width: 769px) { .reccomend h2 { font-size: 46px; height: 110px; line-height: 1; } }
.reccomend h2::after { background: linear-gradient(to bottom left, #fb9b03 50%, transparent 50%) top left/50% 100% no-repeat, linear-gradient(to bottom right, #fb9b03 50%, transparent 50%) top right/50% 100% no-repeat; bottom: -20px; content: ''; display: block; height: 20px; position: absolute; width: 38px; }
@media (min-width: 769px) { .reccomend h2::after { bottom: -38px; height: 38px; width: 76px; } }
.reccomend p { padding: 0 0 40px; }
.reccomend table { font-weight: bold; line-height: 1.3; }
@media (min-width: 769px) { .reccomend table { font-size: 20px; } }
.reccomend table td { width: 165px; }
.reccomend table b { font-size: 150%; }
.reccomend table span { font-size: 80%; }

/*# sourceMappingURL=style.css.map */