:root { --main-tone-color: #5A413B; --main-select-color: #E8DBC9; --main-bg-color: #F5F4EF; --main-gray-color: #D2E0E3; --main-red-color: #FF0000; --main-blue-color: #00A0C6; --main-yellow-color: #FFCC00; --main-h2-size: 48px; --main-h3-size: 28px; --main-h3-size2: 20px; --main-h4-size: 20px; --main-text-size: 20px; --main-text-size2: 16px; --main-text-size3: 12px; --main-text-size4: 12px; --main-accordion-size: 24px; --main-line-height: 1.6; --main-h3-height: 1.2; }

@font-face { font-family: 'LINE Seed JP_OTF Thin'; src: url('../font/OTF/LINESeedJP_OTF_Th.otf'); font-weight: thin; font-style: normal; }
@font-face { font-family: 'LINE Seed JP_OTF Reguler'; src: url('../font/OTF/LINESeedJP_OTF_Rg.otf'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'LINE Seed JP_OTF Bold'; src: url('../font/OTF/LINESeedJP_OTF_Bd.otf'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'LINE Seed JP_OTF ExtraBold'; src: url('../font/OTF/LINESeedJP_OTF_Eb.otf'); font-weight: extra-bold; font-style: normal; } 

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
h1,h2,h3,h4,h5,h6 { margin: auto 0; padding: auto 0; font-family: 'LINE Seed JP_OTF ExtraBold'; line-height: var(--main-line-height); letter-spacing: -1px; }
h2 { margin: 0 0 40px 0; text-align: center; font-size: var(--main-h2-size); color: var(--main-tone-color); letter-spacing: -3px; }
h3 { margin: 0 0 20px 0; text-align: center; font-size: var(--main-h3-size); line-height: var(--main-h3-height); color: var(--main-tone-color); }
h3 span { font-size: var(--main-h3-size2); display: block; }
h4 { margin: 0 0 20px 0; text-align: center; font-size: var(--main-h4-size); color: var(--main-tone-color); }
p { margin: 0 0 10px 0; }
a { color: var(--main-blue-color); opacity: 1; transition: 0.3s; }
a:hover { opacity: 0.5; transition: 0.3s; }
strong { font-family: 'LINE Seed JP_OTF ExtraBold'; color: var(--main-red-color); }
img { vertical-align: bottom;}
li { list-style: none; }

::selection { background: var(--main-blue-color); color: #fff; }

table { width: 100%; text-align: center; }
table span { font-size: var(--main-text-size3); }
th { padding: 10px 9px; font-size: var(--main-text-size2); font-weight: bold; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(248, 248, 248, 1))); border: 1px solid var(--main-gray-color); white-space: nowrap; border-collapse: collapse; }
td { padding: 10px 9px; font-size: var(--main-text-size2); border: 1px solid var(--main-gray-color); white-space: nowrap; border-collapse: collapse; }

.box table { width: 100%; text-align: left; table-layout: fixed; word-wrap: break-word; }
.box table span { font-size: var(--main-text-size3); }
.box th { width: 150px; padding: 20px 10px; background: inherit; border-width: 0 0 1px 0; border-style: solid; border-color: var(--main-tone-color); white-space: nowrap; border-collapse: collapse; }
.box td { width: 100%;padding: 20px 10px; border-width: 0 0 1px 0; border-style: solid; border-color: var(--main-tone-color); word-break: break-word; white-space: normal; }

.md { font-size: var(--main-text-size2); }
.sm { font-size: var(--main-text-size3); }

.pc { display: block; }
.sp { display: none; }

.button { position: relative; }
.buy { text-align: center; font-weight: bold; }
.buy p { margin: 0px; }
.buy p a { height: 80px; margin-bottom: 40px; font-size: var(--main-h3-size); color: #FFF; background-color: var(--main-yellow-color); display: block; border-radius: 40px; text-decoration: none; line-height: 80px; box-shadow: rgb( 0, 0, 0, 0.1) 0 3px 1px; opacity: 1; transform: 0.3s ease; }
.buy p a:hover { opacity: 0.5; transform: scale(1.05); }
.buy p a::before { content: ""; display: inline-block; width: 20px; height: 20px; background-image: url('../img/arrow.png'); background-size: contain; background-repeat: no-repeat; position: absolute; top: 29px; }
.buy p a span { padding-left: 30px; }

#container { overflow: hidden; }
#container *{ box-sizing: border-box; }

section { margin-bottom: 160px; }
section { font-size: var(--main-text-size); line-height: var(--main-line-height); }

.content-area { width: 1280px; margin: 0 auto; }
.content-area-hirf { width: 630px; margin-right: 20px; float: left; }
.content-area-hirf-right { width: 630px; float: right; }

.flex-container { display: flex; justify-content: space-between; }
.flex-swiper { display: flex; justify-content: space-between; }
.flex-zero { display: flex; justify-content: space-between; }
.flex-sim { display: flex; justify-content: space-between; }
.flex-footer { display: flex; justify-content: center; }
.flex-link { display: flex; justify-content: center; }

.accordion summary { padding: 0; font-size: var(--main-accordion-size); font-weight: bold; line-height: 80px; text-align: center; border: 1px solid #000; border-radius: 40px; display: flex; justify-content: center; align-items: center; position: relative; cursor: pointer; opacity: 1; transition: 0.3s; }
.accordion summary:hover { opacity: 0.5; }
.accordion summary img { margin: 0 20px 0 0; display: inline-block; vertical-align: middle; } 
.accordion summary span { margin: 0 20px 0 0; display: block; } 
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { transform: translateY(-25%) rotate(45deg); width: 12px; height: 12px; margin-left: 10px; border-bottom: 3px solid #000; border-right: 3px solid #000; content: ''; transition: transform .3s; }
.accordion[open] summary::after { transform: rotate(225deg); }
.accordion .open { transform: translateY(-40px); opacity: 0; transition: 0.5s; }
.accordion[open] .open { transform: none; opacity: 1; }
.accordion table { margin-top: 40px; text-align: left; word-wrap: break-word; overflow-x: hidden; }
.accordion tbody th { width: 150px; padding: 20px 10px; white-space: nowrap; border-collapse: collapse; }
.accordion tbody td { padding: 20px 10px; word-break: break-word; white-space: normal; }

/* Animation */
.target { animation: floating-y 1.8s ease-in-out infinite alternate-reverse; }
.target01 { animation: floating-y 1.8s ease-in-out infinite alternate-reverse; }
.target02 { animation: floating-y 1.9s ease-in-out infinite alternate-reverse; }
.target03 { animation: floating-y 2.0s ease-in-out infinite alternate-reverse; }
.target04 { animation: floating-y 2.1s ease-in-out infinite alternate-reverse; }
@keyframes floating-y {
    0% { transform: translateY(-5%); }
    100% { transform: translateY(5%); }
}

.header-00 { position: relative; margin: 0 auto; }
.header-00 .logo { position: absolute; top: 30px; z-index: 4; }
.header-00 .logo img { height: 50px; }
.header-00 .conversion { position: fixed; width: 1280px; right: 0; left: 0; top: 0; margin: auto; text-align: right; z-index: 5; }
.header-00 .conversion p a { display: inline-block; text-decoration: none; font-weight: bold; color: #fff; background: var(--main-blue-color); box-shadow: rgb( 0, 0, 0, 0.1) 0 3px 1px ; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; transition: all 0.3s; padding: 30px; font-size: 18px; transition: 0.3s; }
.header-00 .conversion p a:hover { padding: 35px 30px 30px 30px; }
.header-00 .conversion p a:hover::before { top: 33px; }
.header-00 .conversion p a::before { content: ""; display: inline-block; width: 20px; height: 20px; background-image: url('../img/arrow.png'); background-size: contain; background-repeat: no-repeat; position: absolute; top: 28px; transition: 0.3s; }
.header-00 .conversion p a span { padding-left: 30px; }

.keyvisual-01 { height: 1280px; padding: 120px 0 0 0; background-image: url('../img/01_main.jpg'); background-position: center; background-repeat: no-repeat; position: relative; }
.keyvisual-01 h2 { margin-top: 120px; text-align: left;}
.keyvisual-01 img.catch { width: 677px;}
.info { width: 1280px; height: 400px; padding: 80px; background: rgba(90,65,59,0.75); border-radius: 20px 20px 0 0; position: absolute; bottom: 0; }
.keyvisual-01 .box:first-child { margin-right: 80px; }
.keyvisual-01 .box:nth-child(2) { width: 583px; }
.keyvisual-01 .pop { position: absolute; top: -30px; left: 80px; }
.keyvisual-01 .pop img { width: 100px; }
.keyvisual-01 .na01 img { width: 457px;}
.keyvisual-01 p { color: #fff; }
.keyvisual-01 .superscript1 { font-size: var(--main-text-size2); font-weight: bold; vertical-align: top; line-height: 28px; } 
.keyvisual-01 .superscript2 { font-size: var(--main-text-size2); font-weight: bold; vertical-align: middle; line-height: 28px; } 
.keyvisual-01 .dropcap1 { font-size: 72px; font-family: 'LINE Seed JP_OTF bold'; vertical-align: middle; line-height: 72px; letter-spacing: -2px; }
.keyvisual-01 .dropcap2 { font-size: 48px; font-family: 'LINE Seed JP_OTF bold'; vertical-align: bottom; line-height: 48px; letter-spacing: -2px; }
.keyvisual-01 p.message { padding: 10px 0; border-bottom: .99px solid #FFF; }
.keyvisual-01 .service-name img { width: 460px; padding-top: 20px; }

.answer-02 .girl { text-align: center; position: relative; }
.answer-02 .cloud { width: 100%; height: 490px; position: absolute; top: 0; }
.answer-02 .cloud img { filter: drop-shadow(4px 4px 4px #eee); }
.answer-02 .cloud li:nth-child(1) { position: absolute; top: 0px; left: 120px; }
.answer-02 .cloud li:nth-child(2) { position: absolute; top: 200px; left: 40px; }
.answer-02 .cloud li:nth-child(3) { position: absolute; top: 0; right: 120px; }
.answer-02 .cloud li:nth-child(4) { position: absolute; top: 200px; right: 40px; }
.answer-02 .list { margin-bottom: 40px; background: transparent; }
.answer-02 .list li { width: 305px; margin-bottom: 5px; padding: 40px 20px 20px 20px; text-align: center; background-color: var(--main-bg-color); border-radius: 20px; flex-shrink: 0; }
.answer-02 .list p { text-align: left; }
.answer-02 .zero li { width: 420px; border: 2px solid var(--main-tone-color); border-radius: 20px; flex-shrink: 0; }
.answer-02 .zero h3 { padding: 20px; color: #FFF; background-color: var(--main-tone-color); border-radius: 20px 20px 0 0; }
.answer-02 .zero .yen { width: 160px; margin-top: -60px; padding: 20px; font-size: var(--main-h3-size); font-weight: bold; text-align: left; float: left; }
.answer-02 .zero .yen img { width: 91px; }
.answer-02 .zero p { width: 250px; padding: 0 20px 0 0; float:right; }

.payment-03 .box { margin-bottom: 40px; padding: 80px; background-color: var(--main-bg-color); border-radius: 20px; position: relative; }
.payment-03 .box .read { text-align: center; }
.payment-03 .box-pc img { width: 100%; margin-bottom: 40px; }
.payment-03 .box-sp { display: none; }
.payment-03 .box-sp img { width: 100%; margin-bottom: 40px; }
.payment-03 .pop { position: absolute; top: 200px; left: 200px; z-index: 10; }
.payment-03 .pop img { width: 100px; }

.guarantee-04 .box { height: 700px; padding: 80px; background-color: var(--main-bg-color); border-radius: 20px; }
.guarantee-04 strong { font-size: var(--main-h3-size); }

.overseas-05 .box { height: 700px; margin-bottom: 40px; padding: 80px; background-color: var(--main-bg-color); border-radius: 20px; background-image: url('../img/05_world.png'); background-position: center; background-repeat: no-repeat; background-size: 100%; }
.overseas-05 .accordion { clear: both; }
.overseas-05 strong { font-size: var(--main-h3-size); }

.area-06 .box { height: 480px; margin-bottom: 40px; padding: 80px; text-align: center; background-color: var(--main-bg-color); border-radius: 20px; background-image: url('../img/06_japan.png'); background-position: center; background-repeat: no-repeat; background-size: 100%; }
.area-06 ul { margin-top: 80px; font-weight: bold; }
.area-06 img { width: 78px; display: block; }
.area-06 li:nth-child(1) { color: #cc0033; }
.area-06 li:nth-child(2) { color: #eb5505; }
.area-06 li:nth-child(3) { color: #bbbcbe; }
.area-06 li:nth-child(4) { color: #ff008c; }

.sequence-07 .box { height: 480px; margin-bottom: 160px; padding: 80px; background-color: var(--main-bg-color); border-radius: 20px; }
.sequence-07 .step { width: 470px; margin: 40px auto 0 auto; }
.sequence-07 img { width: 470px; }

.spec-08 { padding: 80px 0; color: #FFF; text-align: center; background-image: url('../img/08_bg.jpg'); background-size: cover; clear: both; }
.spec-08 h2 { margin-bottom: 0px; color: #FFF; }
.spec-08 h3 { margin-bottom: 0px; color: #FFF; }
.spec-08 img { width: 530px; transition: transform 0.3s ease; }
.spec-08 img:hover { transform: scale(1.05); }
.spec-08 .info { height: 100%; background-color: rgb( 0, 160, 198, 0.75); border-radius: 20px; position: relative; }
.spec-08 .flex-container { margin-top: 40px; }
.spec-08 .box { width: 530px; }
.spec-08 .router { margin-bottom: 40px; }
.spec-08 dl { font-size: var(--main-text-size2); }
.spec-08 dt { width: 180px; margin-right: 20px; font-weight: bold; text-align: right; float: left; }
.spec-08 dd { text-align: left; }

.purpose-09 .list li { width: 413px; margin-bottom: 5px; padding: 80px 40px; text-align: center; background-color: var(--main-bg-color); border-radius: 20px; flex-shrink: 0; }
.purpose-09 .list p { text-align: left; }
.purpose-09 .image  { float: left; }
.purpose-09 .image p { text-align: left; }
.purpose-09 strong { font-size: var(--main-h3-size); }

.comparison-10 strong { font-size: var(--main-h3-size); }
.comparison-10 .box { margin-bottom: 40px; padding: 80px 40px; background-color: var(--main-bg-color); border-radius: 20px; position: relative; }
.comparison-10 table { height: 100%; }
.comparison-10 thead th span { font-size: var(--main-h4-size); }
.comparison-10 th { height: 100%; padding: 20px 0; font-size: var(--main-h3-size); }
.comparison-10 td { padding: 20px 0; font-size: var(--main-text-size); }
.comparison-10 th .pick { height: 100%; padding: 20px 0 20px 20px; background-color: var(--main-select-color); border-radius: 20px 0 0 20px; }
.comparison-10 td .pick { height: 100%; padding: 20px 0 20px 0; background-color: var(--main-select-color); }
.comparison-10 td .last { height: 100%; padding: 20px 0 20px 0; background-color: var(--main-select-color); border-radius: 0 20px 20px 0; }
.comparison-10 td span { font-size: var(--main-text-size2); }

.giga-11 strong { font-size: var(--main-h3-size); }
.giga-11 .box { margin-bottom: 40px; padding: 80px 40px; background-color: var(--main-bg-color); border-radius: 20px; position: relative; }
.giga-11 table { width: 1280px; }
.giga-11 thead th { font-size: var(--main-text-size); }
.giga-11 th { width: 120px; padding: 20px 0; font-size: var(--main-h3-size); }
.giga-11 th:first-child { width: 360px; }
.giga-11 td { padding: 20px 0; font-size: var(--main-text-size2); }
.giga-11 td span { font-size: var(--main-text-size); }
.giga-11 img { height: 24px; margin-right: 20px; vertical-align: middle; }

.average-12 strong { font-size: var(--main-h3-size); }
.average-12 .box { margin-bottom: 40px; padding: 80px 40px; background-color: var(--main-bg-color); border-radius: 20px; position: relative; }
.average-12 table { width: 1280px; }
.average-12 thead th { font-size: var(--main-text-size); }
.average-12 th { padding: 20px 0; font-size: var(--main-h3-size); }
.average-12 th:first-child { width: 360px; }
.average-12 td { padding: 20px 0; font-size: var(--main-text-size2); }
.average-12 td span { font-size: var(--main-text-size); }
.average-12 img { height: 24px; margin-right: 20px; vertical-align: middle; }

.faq-13 .accordion { margin-bottom: 20px; }
.faq-13 .open { margin-top: 20px; padding: 80px; text-align: left; background-color: var(--main-bg-color); border-radius: 20px; }
.faq-13 h3:first-child { margin-top: 0px; }
.faq-13 h3 { margin-top: 80px; }

footer .last { margin: 0 auto; padding: 80px 0 0 0; background-color: var(--main-bg-color); }
footer .link { margin: 0 auto; padding: 160px 0; font-size: var(--main-text-size); line-height: var(--main-line-height); color: #FFF; text-align: center; background-color: var(--main-tone-color); }
footer a { color: #FFF; }
footer .box { width: 530px; }
footer .router { margin-bottom: 40px; }
footer .router img { width: 530px; transition: transform 0.3s ease; }
footer .router img:hover { transform: scale(1.05); }
footer .girl img { width: 530px; margin-left: 40px; }
footer li { padding:0 20px; border-right: 1px solid #FFF; }
footer li:last-child { padding: 0 0 0 20px; border-right: none; }
footer .link p { padding: 20px; }

@media (max-width: 1280px) {
table { width: 100%; margin-bottom: 5px; display: block; overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch; }
table::-webkit-scrollbar { height: 10px; }
table::-webkit-scrollbar-track { background-color: var(--main-gray-color); border-radius: 5px; }
table::-webkit-scrollbar-thumb { background-color: var(--main-tone-color); border-radius: 5px; }
table::-webkit-scrollbar-thumb:hover { background-color: var(--main-blue-color); }

.box table { overflow-x: hidden; }

.content-area-hirf { width: 100%; margin-right: 0; float: inherit; }
.content-area-hirf-right { width: 100%; float: inherit; }

section { margin-bottom: 80px; }
section:first-of-type { margin-bottom: 160px; }

.content-area { width: 100%; padding: 0 20px; }

.flex-container { flex-direction: column; align-items: center; }
.flex-swiper { justify-content: flex-start; overflow-x: scroll; }
.flex-zero { overflow-x: scroll; }
.flex-sim { justify-content: center; }
.flex-footer { flex-direction: column; align-items: center; }
.flex-link { flex-direction: column; }

.header-00 .logo { display: none; }
.header-00 .conversion { width: auto; top: initial; bottom: 0; z-index: 5; }
.header-00 .conversion p a { display: block; text-align: center; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 20px 0; }
.header-00 .conversion p a:hover { padding: 20px 0; }
.header-00 .conversion p a:hover::before { top: 18px; }
.header-00 .conversion p a::before { top: 18px; }
.header-00 .conversion p a span { padding-left: 30px; }

.keyvisual-01 { height: 1200px; background-image: url('../img/01_main_s.jpg'); background-position: right; }
.keyvisual-01 h2 { position: absolute; top: 120px; }
.keyvisual-01 img.catch { width: 48vw; }
.info { width: 100%; height: 640px; margin-top: 600px; border-radius: 20px; position: relative; }
.keyvisual-01 .box:first-child { margin-right: 0; }
.keyvisual-01 .box:nth-child(2) { width: inherit; }
.keyvisual-01 .pop { left: 20vw; }
.keyvisual-01 .na01 img { width: 360px; margin-bottom: 20px; }

.answer-02 { margin-top: 320px; position: relative; }
.answer-02 .cloud img { width: 24vw; }
.answer-02 .cloud li:nth-child(1) { top: 0; left: 10%; }
.answer-02 .cloud li:nth-child(2) { top: 30%; left: 0; }
.answer-02 .cloud li:nth-child(3) { top: 0; right: 10%; }
.answer-02 .cloud li:nth-child(4) { top: 30%; right: 0; }
.answer-02 .list li { margin-bottom: 5px; }
.answer-02 .list::-webkit-scrollbar { height: 10px; }
.answer-02 .list::-webkit-scrollbar-track { background-color: var(--main-gray-color); border-radius: 5px; }
.answer-02 .list::-webkit-scrollbar-thumb {  background-color: var(--main-tone-color); border-radius: 5px; }
.answer-02 .list::-webkit-scrollbar-thumb:hover { background-color: var(--main-blue-color); }
.answer-02 .list li { margin-right: 20px; }
.answer-02 .list li:last-child { margin-right: 0px; }
.answer-02 .zero li { margin-right: 10px; margin-bottom: 5px; }
.answer-02 .zero li:last-child { margin-right: 0px; }
.answer-02 .zero::-webkit-scrollbar { height: 10px; }
.answer-02 .zero::-webkit-scrollbar-track { background-color: var(--main-gray-color); border-radius: 5px; }
.answer-02 .zero::-webkit-scrollbar-thumb {  background-color: var(--main-tone-color); border-radius: 5px; }
.answer-02 .zero::-webkit-scrollbar-thumb:hover { background-color: var(--main-blue-color); }

.payment-03 .pop { top: 24%; left: 14%; z-index: 10; }
.payment-03 .pop img { width: 100px; }

.guarantee-04 .box { height: 100%; }

.overseas-05 .box { height: 100%; }

.area-06 .box { height: 100%; }
.area-06 img { margin: 0 20px; }

.sequence-07 .box { height: 100%; margin-bottom: 80px; }
.sequence-07 .step { max-width: 640px; width: 100%; }
.sequence-07 img { width: 100%; }

.spec-08 img { width: 100%; }
.spec-08 .info { width: 100%; margin-top: 0px; }
.spec-08 .box { width: 100%; }
.spec-08 dl { width: 560px; margin: 0 auto; }

.purpose-09 .list li { margin-bottom: 5px; }
.purpose-09 .list::-webkit-scrollbar { height: 10px; }
.purpose-09 .list::-webkit-scrollbar-track { background-color: var(--main-gray-color); border-radius: 5px; }
.purpose-09 .list::-webkit-scrollbar-thumb {  background-color: var(--main-tone-color); border-radius: 5px; }
.purpose-09 .list::-webkit-scrollbar-thumb:hover { background-color: var(--main-blue-color); }
.purpose-09 .list li { margin-right: 20px; }
.purpose-09 .list li:last-child { margin-right: 0px; }

.comparison-10 table { width: 1280px; display: table; overflow-x: hidden; white-space: inherit; -webkit-overflow-scrolling: inherit; }
.comparison-10 th { width: 240px; }
.comparison-10 th:first-child { width: 320px; }
.comparison-10 .box { margin-bottom: 5px; }
.comparison-10 .box::-webkit-scrollbar { height: 10px; }
.comparison-10 .box::-webkit-scrollbar-track { background-color: var(--main-gray-color); border-radius: 5px; }
.comparison-10 .box::-webkit-scrollbar-thumb {  background-color: var(--main-tone-color); border-radius: 5px; }
.comparison-10 .box::-webkit-scrollbar-thumb:hover { background-color: var(--main-blue-color); }

.giga-11 table { width: 1280px; display: table; overflow-x: hidden; white-space: inherit; -webkit-overflow-scrolling: inherit; }
.giga-11 .box { margin-bottom: 5px; }
.giga-11 .box::-webkit-scrollbar { height: 10px; }
.giga-11 .box::-webkit-scrollbar-track { background-color: var(--main-gray-color); border-radius: 5px; }
.giga-11 .box::-webkit-scrollbar-thumb {  background-color: var(--main-tone-color); border-radius: 5px; }
.giga-11 .box::-webkit-scrollbar-thumb:hover { background-color: var(--main-blue-color); }

.average-12 table { width: 1280px; display: table; overflow-x: hidden; white-space: inherit; -webkit-overflow-scrolling: inherit; }
.average-12 .box { margin-bottom: 5px; }
.average-12 .box::-webkit-scrollbar { height: 10px; }
.average-12 .box::-webkit-scrollbar-track { background-color: var(--main-gray-color); border-radius: 5px; }
.average-12 .box::-webkit-scrollbar-thumb {  background-color: var(--main-tone-color); border-radius: 5px; }
.average-12 .box::-webkit-scrollbar-thumb:hover { background-color: var(--main-blue-color); }

footer .last { margin: 0 auto; padding: 80px 0 0 0; text-align: center; background-color: var(--main-bg-color); }
footer .router { margin-bottom: 40px; }
footer .router img { width: 100%; }
footer .girl img { width: 100%; margin-left: 0; }
footer .box { width: 100%; padding: 0 80px; }

footer .link { margin: 0 auto; padding: 0 0 80px 0; font-size: var(--main-text-size); line-height: var(--main-line-height); color: #FFF; text-align: center; background-color: var(--main-tone-color); }
footer .link a { padding: 20px 0; display: block; color: #FFF; text-decoration: none; }
footer .link li { padding: 0; border-right: none; border-bottom: 1px solid rgb(255, 255, 255, 0.5); position: relative; }
footer .link li:last-child { padding: 0; border-right: none; }
footer .link li::after { transform: translateY(-25%) rotate(315deg); width: 12px; height: 12px; margin-left: 10px; border-bottom: 3px solid rgb(255, 255, 255, 0.5); border-right: 3px solid rgb(255, 255, 255, 0.5); content: ''; position: absolute; top: 32px; right: 20px; }
}



@media (max-width: 768px) { :root { --main-h2-size: 1.5rem; --main-h2-size2: 1.5rem; --main-h3-size: 1.2rem; --main-h3-size2: 1.0rem; --main-text-size: 0.8rem; --main-text-size2: 0.8rem; --main-text-size3: 0.8rem; --main-text-size4: 0.8rem; --main-accordion-size: 1.2rem; }
h2 { letter-spacing: -1px;  }
p.sm { font-size: var(--main-text-size4)!important; }

section { margin-bottom: 40px; }

.box th { padding: 10px 10px; }
.box td { padding: 10px 10px; }

.content-area { width: 100%; padding: 0 2%; }

.sp { display: block; }
section:first-of-type { margin-bottom: 320px; }
.flex-zero { flex-direction: column; align-items: center; overflow-x: visible; }

.accordion summary img { height: 39px; }
.accordion tbody th { width: 100px; padding: 10px; }
.accordion tbody td { padding: 10px; }

.keyvisual-01 { height: 480px; background-image: url('../img/01_main_768.jpg'); background-size: cover; }
.keyvisual-01 h2 { top: 0px; }
.info { height: 600px; margin-top: 280px; padding: 40px 40px 0px 40px; }
.keyvisual-01 .pop { left: 10vw; }
.keyvisual-01 .superscript2 { vertical-align: top; } 
.keyvisual-01 .service-name img { width: 60vw; padding-top: 20px; }

.answer-02 { margin-top: 560px; }
.answer-02 .girl img { width: 100% }
.answer-02 .cloud { height: 40vh; background-size: 100%;}
.answer-02 .cloud img { width: 24vw; }
.answer-02 .list img { width: 100%; }
.answer-02 .list li { width: 180px; margin-right: 10px; }
.answer-02 .zero li { width: 100%; margin: 0 0 10px 0; }
.answer-02 .zero h3 { padding: 10px; border-radius: 18px 18px 0 0; }
.answer-02 .zero .yen { margin-top: -60px; }
.answer-02 .zero p { width: calc(100% - 160px) ; }

.payment-03 .box { padding: 40px 20px; }
.payment-03 .box-pc { display: none; }
.payment-03 .box-sp { display: block; }
.payment-03 .box-sp img { margin-bottom: 20px; }
.payment-03 .pop { top: 20%; left: 2%; }
.payment-03 .pop img { width: 75px; }

.guarantee-04 .box { padding: 40px 20px; }

.overseas-05 .box { padding: 40px 20px; }
.overseas-05 table { width: 100%; }
.overseas-05 td { white-space: normal; }

.spec-08 dl { width: 100%; margin: 0 auto; }
.spec-08 dt { width: 100%; margin: 10px 0 0 0; padding: 8px; text-align: center; background:rgb( 90, 65, 59, 0.25); border-radius: 10px; float: inherit; }
.spec-08 dd { padding: 8px 0 10px 0; text-align: center; word-wrap: break-word; }

.purpose-09 .list li { width: 290px; margin-right: 10px; padding: 40px 20px; }
.purpose-09 img  { width: 125px; }
.purpose-09 strong { font-size: var(--main-h3-size); }

.comparison-10 table { width: 100%; min-width: 480px; display: table; table-layout: fixed; }
.comparison-10 thead th span { font-size: var(--main-text-size); }
.comparison-10 th { width: auto; padding: 0; }
.comparison-10 td { padding: 10px 0; }
.comparison-10 th:first-child { width: auto; }
.comparison-10 .box { padding: 40px 20px; }
.comparison-10 .box td { width: auto; }
.comparison-10 thead th { padding: 0 10px; }
.comparison-10 th { font-size: var(--main-text-size); line-height: 28px; }
.comparison-10 td { line-height: 24px; }
.comparison-10 th .frame { height: 80px; padding: 10px 10px 10px 10px; }
.comparison-10 td .frame { height: 80px; padding: 10px 10px 10px 10px; }
.comparison-10 th .pick { height: 100px; padding: 10px 10px 10px 10px; border-radius: 10px 0 0 10px; }
.comparison-10 td .pick { height: 100px; padding: 10px 10px 10px 10px; }
.comparison-10 td .last { height: 100px; padding: 10px 10px 10px 10px; border-radius: 0 10px 10px 0; }
.comparison-10 td span { font-size: var(--main-text-size2); }
.comparison-10 .space { padding-right: 10px; }

.giga-11 table { width: 100%; min-width: 480px; display: table; table-layout: fixed; }
.giga-11 .box { margin-bottom: 40px; padding: 40px 20px 40px 20px; }
.giga-11 thead th { font-size: var(--main-text-size); }
.giga-11 th { width: 100px; padding: 10px 10px; font-size: var(--main-text-size); }
.giga-11 th:first-child { width: 200px; }
.giga-11 td { padding: 10px 10px; font-size: var(--main-text-size2); }
.giga-11 td .sm { font-size: var(--main-h3-size4)!important; }

.average-12 table { width: 100%; min-width: 480px; display: table; table-layout: fixed; overflow-x: hidden; white-space: inherit; -webkit-overflow-scrolling: inherit; }
.average-12 strong { font-size: var(--main-text-size); }
.average-12 .box { padding: 40px 20px 40px 20px; }
.average-12 thead th { font-size: var(--main-text-size); }
.average-12 th { width: auto; padding: 10px 10px; font-size: var(--main-text-size); }
.average-12 th:first-child { width: 200px; }
.average-12 td { width: auto; padding: 10px 10px; font-size: var(--main-text-size2); }
.average-12 td span { font-size: var(--main-text-size); }
.average-12 img { height: 24px; margin-right: 20px; vertical-align: middle; }
.average-12 td .sm { font-size: var(--main-h3-size4)!important; }

.faq-13 .open { padding: 20px; }
.faq-13 h3 { margin-top: 40px; }

footer .message img { width: 100%; }
footer .box { padding: 0 40px; }
footer .router { margin-bottom: 20px; }
footer .link  { font-size: var(--main-h3-size2) }
footer .last { padding: 40px 0 0 0; }
footer .link li::after { top: 28px; }
}



@media (max-width: 500px) { :root { --main-accordion-size: 0.8rem; }
h2 { margin: 0 0 20px 0; }
.accordion summary img { height: 26px; margin: 0 10px 0 0; }
.accordion summary span { margin: 0 10px 0 0; }
.keyvisual-01 .na01 img { width: 60vw; }
.info { height: 540px; margin-top: 180px; padding: 40px 40px 0px 40px; }
.answer-02 { margin-top: 400px; }
.answer-02 .cloud { background-size: 100%;}
.answer-02 .zero .yen { margin-top: -60px; }
.answer-02 .zero .yen img { width: 66%; }
.area-06 .box { padding: 40px 20px; }
.area-06 ul { margin-top: 40px; }
.area-06 img { width: 60px; margin: 0 10px; }
.sequence-07 .box { padding: 40px 20px; }
.sequence-07 .step { width: 100%; }
.spec-08 { padding: 40px 0; }
.spec-08 .flex-container { margin-top: 20px; }
.spec-08 .router { margin-bottom: 20px; }
.spec-08 .info { padding: 40px 20px 20px 20px; }
.spec-08 dt { margin: 10px 0 0 0; padding: 4px; }
.spec-08 dd { padding: 4px 0 0 0; }
footer .box { padding: 20px 20px 0 20px; }
}