@charset "utf-8";

/* ============================================================
   kb-sp.css — スマートフォン向けレスポンシブスタイル
   旧: common-s.css + css/style/index-s.css
   ============================================================ */

/* ─────────────────────────────
   共通レイアウト（ヘッダー・ナビ）のSP対応
   旧: common-s.css
───────────────────────────── */
@media only screen and (min-width: 0px) and (max-width: 750px) {

html { font-size: 1.3333333333333335vw; }

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

header {
    position: fixed;
    height: 11.0rem;
    padding-left: 3.0rem;
}
header ul { display: none; }
#logo { width: 40.0rem; }
#logo img { width: 23.0rem; }
#logo a span { font-size: 2.0rem; margin-bottom: 1.0rem; }
#login { width: 6.2rem; position: absolute; right: 12.0rem; top: 2.0rem; }
#menu  { width: 5.5rem; height: 3.8rem; right: 3.0rem; top: 3.5rem; }
#btn-menu { width: 5.5rem; height: 3.8rem; }
#btn-menu .menu-trigger span:nth-of-type(1) { width: 5.5rem; }
#btn-menu .menu-trigger span:nth-of-type(2) { top: 1.9rem; width: 5.5rem; }
#btn-menu .menu-trigger span:nth-of-type(3) { top: 3.8rem; width: 5.5rem; }
#btn-menu .menu-trigger.active span:nth-of-type(1) { transform: translateY(1.9rem) rotate(-155deg); width: 5.5rem; }
#btn-menu .menu-trigger.active span:nth-of-type(3) { transform: translateY(-1.9rem) rotate(155deg); width: 5.5rem; }
#gnavi  { width: 100%; }
#gmenu  { padding-top: 18.0rem; padding-left: 5.0rem; box-sizing: border-box; }
#gmenu ul { margin-bottom: 12.0rem; display: block; }
#gmenu ul li a { font-size: 3.2rem; margin-bottom: 5.0rem; }
#gmenu ul.app { width: 65.0rem; }
#gmenu ul.app li { width: 51%; }
#gmenu ul.app li:first-of-type { width: 42%; }
#gmenu p a { font-size: 3.4rem; line-height: 4.6rem; width: 65.0rem; height: 10.0rem; }
footer p { font-size: 2.0rem; }

/* ── ヒーロー ── */
#mainvisual { position: relative; padding-top: 8.0rem; }
#mainvisual div { position: relative; bottom: 0; left: 0; width: 100%; }
#mainvisual figure { height: 143.0rem; }
#mainvisual p.trial { position: absolute; bottom: 9.0rem; }
#mainvisual p.trial span { font-size: 2.4rem; margin-bottom: 2.0rem; position: absolute; width: 100%; top: -5.0rem; left: 50%; transform: translateX(-50%); }
#mainvisual p.trial em { font-size: 2.0rem; }
#mainvisual p.trial a { font-size: 3.0rem; line-height: 4.6rem; border-radius: 10.0rem; width: 65.0rem; height: 10.0rem; }
#mainvisual p.comment { font-size: 2.0rem; left: 5.0rem; }

/* ── 信頼バッジ帯 ── */
#trust-bar ul { flex-direction: column; }
#trust-bar ul li { padding: 1.2rem 3.0rem; font-size: 2.4rem; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); }
#trust-bar ul li:last-child { border-bottom: none; }
#trust-bar ul li .tb-icon { font-size: 3.2rem; }

/* ── お悩み ── */
#nayami { padding: 11.0rem 0; }
#nayami h2 { font-size: 4.0rem; margin-bottom: 7.0rem; }
#nayami p  { width: 65.0rem; height: 86.8rem; }

/* ── 解決アイコン ── */
#ressolution { padding: 17.0rem 0 11.0rem; }
#ressolution h2 { width: 65.0rem; height: 12.8rem; margin: 0 auto 6.0rem; }
#ressolution ul { width: 58.0rem; }
#ressolution ul li { margin-right: 4.0rem; margin-bottom: 4.0rem; }
#ressolution ul li:nth-of-type(2n) { margin-right: 0; }
#ressolution ul li:nth-of-type(3) { margin-right: 4.0rem; }
#ressolution a { padding-top: 2.0rem; }
#ressolution a img { width: 16.2rem; height: 11.32rem; }
#ressolution a span { font-size: 2.4rem; }

/* ── 特徴 ── */
#charactor { padding: 11.0rem 0; }
#charactor .box { display: block; width: 100%; margin: 0 auto 8.0rem; }
#charactor .box:last-of-type { margin-bottom: 0; }
#charactor .box figure { width: 68.0rem; height: 52.0rem; position: relative; margin-bottom: -26.0rem; }
#charactor .box dl,
#charactor .box.r dl { width: 100%; margin: 0 auto; padding: 32.0rem 5.0rem 10.0rem 5.0rem; box-sizing: border-box; }
#charactor .box.r figure { width: 68.0rem; position: relative; margin-bottom: -26.0rem; margin-left: auto; }
#charactor .box dl dt { font-size: 5.8rem; text-align: center; display: block; margin-bottom: 6.0rem; }
#charactor .box dl dt span { font-size: 2.8rem; border-radius: 16.0rem; width: 16.0rem; height: 16.0rem; margin: 0 auto 5.0rem; padding-top: 4.0rem; }
#charactor .box dl dt span em { font-size: 5.2rem; padding-top: 1.0rem; }
#charactor .box dl dd { font-size: 2.6rem; }
#charactor .box dl .feature-tag { font-size: 2.2rem; margin-top: 3.0rem; }

/* ── CTAバンド ── */
.contact { padding: 10.0rem 0; }
.contact h2 { font-size: 4.8rem; margin-bottom: 6.0rem; }
.contact h2 span { position: relative; z-index: 2; line-height: 1.8; }
.contact p a { font-size: 3.4rem; line-height: 4.6rem; width: 65.0rem; height: 10.0rem; }

/* ── 動画 ── */
#video .youtube { width: 65.0rem; }

/* ── 業務フロー ── */
#flow { padding: 11.0rem 0; }
#flow p { width: 70.0rem; height: 51.8rem; }

/* ── お客様の声 ── */
#voice { padding: 11.0rem 0; }
#voice .voice-in { width: 65.0rem; display: block; padding: 7.0rem; }
#voice .voice-in div { width: 100%; }
#voice .voice-in dt { font-size: 2.8rem; margin-bottom: 4.0rem; }
#voice .voice-in dd { font-size: 2.6rem; }
#voice .voice-in p  { font-size: 2.6rem; margin-top: 4.0rem; padding-top: 4.0rem; }
#voice .voice-in figure { margin-left: auto; margin-top: -2.0rem; }

/* ── 導入フロー ── */
#flow2 { padding: 11.0rem 0; }
#flow2 h2 { margin-bottom: 22.0rem; }
#flow2 .flow-in { display: block; width: 59.0rem; }
#flow2 .flow-in div { width: 100%; border: 1px solid #2e5e97; margin-bottom: 19.0rem; padding-bottom: 10.0rem; position: relative; }
#flow2 .flow-in div:after { content: ''; width: 1px; height: 8.0rem; border-right: 1px dotted #2E5E97; position: absolute; bottom: -8.0rem; left: 50%; transform: translateX(-50%); }
#flow2 dl { border-radius: 22.0rem; width: 22.0rem; height: 22.0rem; margin-top: -11.0rem; padding-top: 4.0rem; }
#flow2 .flow-in div:last-of-type:after,
#flow2 .flow-in div:first-of-type dl:after { display: none; }
#flow2 dl dt { font-size: 5.4rem; margin-bottom: 1.0rem; }
#flow2 dl dd { font-size: 2.8rem; line-height: 1; text-align: center; }
#flow2 dl dd span { font-size: 2.8rem; padding-top: 1.0rem; }
#flow2 figure { width: 36.6rem; height: 21.6rem; margin: 0 auto; padding: 3.0rem 0 5.0rem; }
#flow2 p { font-size: 2.6rem; width: 39.0rem; margin: 0 auto; }
#flow2 .swirching { width: 65.0rem; margin: 0 auto; }
#flow2 .swirching h3 { font-size: 3.6rem; margin-bottom: 6.0rem; }
#flow2 .swirching p { font-size: 2.6rem; width: 100%; }
#flow2 .swirching figure { width: 100%; height: 14.3rem; }

/* ── サポート ── */
#support { padding: 11.0rem 0; }
#support h3 { font-size: 5.8rem; margin-bottom: 9.0rem; }
#support ul { margin-bottom: 7.0rem; }
#support ul li { margin: 0 1.5rem; height: 31.0rem; }
#support p { font-size: 2.6rem; width: 65.0rem; }
#support figure { width: 65.0rem; }
#support p a { font-size: 3.4rem; line-height: 4.6rem; width: 65.0rem; height: 10.0rem; }

/* ── 導入費用 ── */
#price { padding: 11.0rem 0; }
#price h3 { font-size: 5.8rem; margin-bottom: 4.0rem; }
#price .price-free-banner { width: 65.0rem; font-size: 2.6rem; padding: 2.0rem; }
#price .price-free-banner strong { font-size: 3.0rem; }
#price .price-cards { flex-direction: column; width: 65.0rem; gap: 3.0rem; }
.price-card { padding: 3.6rem 2.8rem 4.0rem; }
.price-card__badge { font-size: 2.2rem; top: -1.8rem; padding: 0.8rem 2.4rem; }
.price-card__plan  { font-size: 2.0rem; }
.price-card__name  { font-size: 3.2rem; }
.price-card__limit { font-size: 2.2rem; }
.price-card__amount .yen  { font-size: 2.4rem; vertical-align: 2.0rem; }
.price-card__amount .num  { font-size: 6.0rem; }
.price-card__amount .unit { font-size: 2.0rem; }
.price-card__tax   { font-size: 2.0rem; }
.price-card__daily { font-size: 2.2rem; }
.price-card__free  { font-size: 2.2rem; }
#price .price-note { width: 65.0rem; padding: 3.0rem; }
#price .price-note p { font-size: 2.2rem; }

/* ── 機能一覧 ── */
#function { padding: 11.0rem 0 7.0rem; }
#function .f-list { display: block; width: 65.0rem; }
#function .f-list div { margin-bottom: 10.0rem; }
#function .f-list h3 { font-size: 2.8rem; margin-bottom: 3.0rem; padding: 2.0rem; }
#function .f-list .crient,
#function .f-list .staff,
#function .f-list .other { margin-right: 0; width: 100%; }
#function .f-list ul { padding-left: 3.0rem; }
#function .f-list li  { font-size: 2.6rem; margin-bottom: 3.0rem; padding-left: 2.6rem; }

/* ── 画面イメージ ── */
#image { padding: 11.0rem 0; }
#image h2 { font-size: 3.0rem; margin-bottom: 7.0rem; }
#image ul { display: block; width: 65.0rem; margin: 0 auto; }
#image ul li span { font-size: 2.6rem; margin-bottom: 3.0rem; padding-left: 2.0rem; }
#image ul li:first-of-type { width: 63.0rem; height: 34.0rem; margin-bottom: 7.0rem; }
#image ul li:last-of-type  { width: 47.0rem; height: 79.6rem; margin: 0 auto; }
#image p.comment { font-size: 2.2rem; }
#image .app2 p   { font-size: 2.4rem; }
#image .app2 ul  { width: 65.0rem; height: 11.4rem; }
#image .app2 ul li { width: 51%; }
#image .app2 ul li:first-of-type { width: 42%; padding-top: 1.4rem; }

/* ── FAQ ── */
#faq { padding: 11.0rem 0 4.0rem; }
#faq .faq-list { width: 65.0rem; }
#faq details summary { padding: 2.4rem 2.0rem; font-size: 2.6rem; gap: 1.6rem; }
#faq details summary::before { width: 5.0rem; height: 5.0rem; font-size: 2.6rem; border-radius: 0.8rem; }
#faq details summary::after  { font-size: 4.0rem; }
#faq .faq-answer { padding: 0 2.0rem 3.0rem 8.6rem; font-size: 2.6rem; }

/* ── 会社概要 ── */
#company { padding: 11.0rem 0; }
#company dl { width: 65.0rem; padding: 4.0rem 0; display: block; }
#company dl dt { font-size: 2.8rem; margin-bottom: 2.0rem; padding-left: 0; width: 100%; }
#company dl dd { font-size: 2.8rem; line-height: 1.7; }

/* ── お問い合わせ ── */
#contact { padding: 11.0rem 0; }
#contact p.comment { font-size: 2.6rem; margin-bottom: 4.0rem; }
#contact figure { width: 65.0rem; margin: 0 auto 11.0rem; }
#contact form dl { width: 65.0rem; padding: 4.0rem 0; display: block; }
#contact form dl:last-of-type { margin-bottom: 6.0rem; }
#contact form dl dt { font-size: 2.6rem; margin-bottom: 2.0rem; padding-left: 0; width: 100%; }
#contact form dl dt.need:before   { font-size: 2.2rem; padding: 1.0rem; }
#contact form dl dt.option:before { font-size: 2.2rem; padding: 1.0rem; }
#contact form dl dd { font-size: 2.6rem; width: 100%; padding-right: 0; padding-left: 0; }
#contact form dl dd input[type="text"],
#contact form dl dd input[type="email"] { font-size: 2.6rem; padding: 1.6rem; }
#contact form dl dd input.short[type="text"] { width: 40%; }
#contact form dl dd textarea { font-size: 2.6rem; height: 30.0rem; }

.privacy-agree-wrap { width: 65.0rem; padding: 2.4rem; margin-bottom: 5.0rem; }
.privacy-agree-wrap label { font-size: 2.4rem; gap: 1.6rem; }
.privacy-agree-wrap input[type="checkbox"] { width: 3.2rem; height: 3.2rem; }

div.tel { width: 65.0rem; height: 14.0rem; margin: 0 auto 12.0rem; padding-top: 2.0rem; }
div.tel:before { content: ''; width: 14.0rem; height: 14.0rem; background: url("../image/icon-tel-sp.png") no-repeat center center #228082; background-size: 14.0rem 14.0rem; }
div.tel a dl { padding-left: 20.0rem; }
div.tel a dl dt { font-size: 5.2rem; margin-bottom: 1.0rem; }
div.tel a dl dd { font-size: 2.4rem; }
.send { font-size: 3.4rem; line-height: 4.6rem; width: 65.0rem; height: 10.0rem; }

#contact.complete { padding: 20.0rem 0 10.0rem; }
#contact.complete p.txt-comp { font-size: 2.6rem; width: 65.0rem; padding: 3.0rem; box-sizing: border-box; }
p.btn-top a { font-size: 3.4rem; line-height: 4.6rem; width: 65.0rem; height: 10.0rem; }

/* ── フッター固定CTA ── */
#sticky-cta { flex-direction: column; gap: 1.2rem; padding: 1.6rem; }
#sticky-cta p { font-size: 2.2rem; }
#sticky-cta a { font-size: 2.8rem; padding: 1.6rem 4.0rem; width: 65.0rem; text-align: center; }

} /* end @media */