@charset "utf-8";

/*
 * lakuna-sp.css
 * らくーなクン レスポンシブ対応スタイル
 * 統合元: css/common-s.css / css/style/index-s.css / css/style/lp-improvements.css（SP部分）
 */


/* ============================================================
   タブレット対応（751px〜1200px）
   ============================================================ */
@media only screen and (min-width: 751px) and (max-width: 1200px) {
    html { font-size: 0.8333333333333333vw; }
}


/* ============================================================
   スマートフォン対応（〜750px）
   ============================================================ */
@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) {
        -webkit-transform: translateY(1.9rem) rotate(-155deg);
        transform: translateY(1.9rem) rotate(-155deg);
        width: 5.5rem;
    }
    #btn-menu .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-1.9rem) rotate(155deg);
        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: 17.4rem;
    }
    #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: 3.0rem;
        margin-bottom: 2.0rem;
        position: absolute;
        width: 100%;
        top: -5.0rem;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-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;
    }

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

    /* お悩み解決 */
    #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 img {
        width: 16.2rem;
        height: 11.32rem;
    }
    #ressolution a { padding-top: 2.0rem; }
    #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; }

    /* 中間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;
    }

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

    /* お客様の声 */
    #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;
    }
    #voice .ex { width: 65.0rem; }
    #voice .ex h3 {
        font-size: 2.8rem;
        padding: 2.0rem;
    }
    #voice .ex div.bg-ex {
        padding: 4.0rem 5.0rem;
        flex-wrap: wrap;
    }
    #voice .ex div.bg-ex ul { width: 50%; }
    #voice .ex div.bg-ex ul li {
        font-size: 2.6rem;
        margin-bottom: 2.0rem;
    }
    .btn-prev-next { width: 100%; }
    .swiper-button-next,
    .swiper-button-prev {
        width: 10.0rem;
        height: 10.0rem;
        border-radius: 10.0rem;
    }
    .swiper-button-next { top: -50.0rem; right: 0; }
    .swiper-button-prev { top: -50.0rem; left: 0; }
    .swiper-button-next::after,
    .swiper-button-prev::after { font-size: 3.4rem; }
    .swiper-pagination-bullet {
        width: 2.4rem;
        height: 2.4rem;
    }

    /* 導入までの流れ */
    #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: 6.0rem;
        position: relative;
    }
    #flow2 .flow-in div:after {
        content: '';
        width: 1.0px;
        height: 8.0rem;
        border-right: 1px dotted #2E5E97;
        position: absolute;
        bottom: -8.0rem;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-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: 35.0rem;
        margin: 0 auto;
        padding: 3.0rem 0 5.0rem;
    }
    #flow2 p {
        font-size: 2.6rem;
        width: 50.0rem;
        margin: 0 auto;
    }

    /* サポート体制 */
    #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: 7.0rem;
    }
    #price .free1m {
        width: 65.0rem;
        margin-bottom: 2.0rem;
        padding-left: 20.0rem;
    }
    #price .free1m:before {
        width: 22.0rem;
        height: 22.0rem;
        background: url(../../image/free1m.webp) no-repeat;
        background-size: 22.0rem 22.0rem;
        left: -5.0rem;
    }
    #price .free1m p {
        font-size: 2.8rem;
        line-height: 1;
    }
    #price .free1m p span { font-size: 2.4rem; }
    #price .free1m p strong {
        font-size: 7.2rem;
        color: #0096EA;
        display: inline-block;
        padding-top: 1.0rem;
    }
    #price dl {
        margin-bottom: 1.0rem;
        width: 65.0rem;
    }
    #price dl dt {
        font-size: 2.4rem;
        width: 21.0rem;
        text-align: center;
        margin-right: 1.0rem;
        padding: 2.0rem 0;
        line-height: 1.4;
    }
    #price dl dt span {
        font-size: 2.0rem;
        padding-top: 1.0rem;
    }
    #price dd { font-size: 2.3rem; width: 44.0rem; }
    #price dd span { font-size: 4.4rem; }

    /* 機能一覧 */
    #function { padding: 11.0rem 0 7.0rem; }
    #function .f-list {
        display: block;
        width: 65.0rem;
        padding: 4.0rem;
    }
    #function .f-list li {
        font-size: 2.6rem;
        margin-bottom: 1.0rem;
        padding-left: 2.6rem;
        position: relative;
    }

    /* 画面イメージ */
    #image { padding: 11.0rem 0; }
    #image h2 {
        font-size: 3.0rem;
        margin-bottom: 7.0rem;
    }
    #image ul {
        display: block;
        width: 63.0rem;
        margin: 0 auto;
    }
    #image ul li span {
        font-size: 2.6rem;
        margin-bottom: 3.0rem;
        padding-left: 2.0rem;
    }
    #image ul li {
        width: 63.0rem;
        height: 41.5rem;
        margin-bottom: 10.0rem;
    }
    #image ul li:last-of-type { margin-bottom: 5.0rem; }
    #image p.comment { font-size: 2.2rem; }

    /* よくある質問 */
    #faq { padding: 11.0rem 0; }
    #faq h3 {
        font-size: 3.2rem;
        width: 65.0rem;
        margin: 0 auto 3.0rem;
    }
    #faq dl {
        width: 65.0rem;
        padding: 3.0rem 4.0rem;
        box-sizing: border-box;
    }
    #faq dl dt {
        font-size: 3.0rem;
        padding-left: 3.0rem;
        padding-right: 5.0rem;
    }
    #faq dl dt span.toggle_btn {
        right: -4.0rem;
    }
    #faq dl dt span.toggle_btn:before,
    #faq dl dt span.toggle_btn:after {
        width: 3.0rem;
    }
    #faq dl dt span.toggle_btn:before {
        width: 2px;
        height: 3.0rem;
    }
    #faq dl dd {
        font-size: 2.6rem;
        padding-left: 5rem;
        margin-left: -2rem;
    }
    #faq p {
        font-size: 2.0rem;
        width: 65.0rem;
        padding: 11.0rem 0 0;
    }

    /* 会社概要 */
    #company { padding: 11.0rem 0; }
    #company .company-in {
        width: 65.0rem;
        padding: 5.0rem;
        box-sizing: border-box;
    }
    #company dl {
        padding: 3.0rem 0;
        display: block;
    }
    #company dl dt {
        font-size: 2.8rem;
        margin-bottom: 1.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-lead {
        width: 90%;
        font-size: 2.6rem;
        padding: 2.4rem 3.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"] { font-size: 2.6rem; }
    #contact form dl dd input.short[type="text"] { width: 40%; }
    #contact form dl dd textarea {
        font-size: 2.6rem;
        height: 30.0rem;
    }

/* チェックボックス */
.form-check-row { width: 65.0rem; padding: 2.0rem 1.0rem; }

    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 #0096EA;
        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;
    }

    /* 任意バッジ */
    .option-badge {
        font-size: 2.0rem;
        padding: 0.4rem 1.0rem;
        margin-left: 1.0rem;
    }

    /* 信頼バッジ */
    #trust-bar {
        font-size: 2.4rem;
        padding: 1.8rem 3.0rem;
        line-height: 1.8;
    }

    /* タッチデバイスはホバー効果をリセット */
    #mainvisual p.trial a:hover,
    .contact p a:hover,
    #support p a:hover,
    p.btn-top a:hover,
    .send:hover {
        transform: none !important;
        box-shadow: 0 6px 0 #FFAF50 !important;
    }

    /* -------------------------------------------------------
       スティッキーCTAバー SP
    ------------------------------------------------------- */
    #sticky-cta {
        padding: 1.4rem 2.0rem;
        gap: 0;
        justify-content: center;
    }
    .sticky-text {
        display: none;
    }
    #sticky-cta a {
        font-size: 3.0rem;
        padding: 1.6rem 4.0rem;
        width: 90%;
        max-width: 60.0rem;
        text-align: center;
        box-shadow: 0 5px 0 #FFAF50;
    }
    #sticky-cta a:hover {
        transform: none !important;
        box-shadow: 0 5px 0 #FFAF50 !important;
    }

    /* -------------------------------------------------------
       業種フィールド SP
    ------------------------------------------------------- */
    .radio-label {
        font-size: 2.6rem;
        margin-bottom: 1.8rem;
    }
    #other-input input[type="text"] {
        font-size: 2.6rem;
        padding: 1.5rem 2.0rem;
    }

    /* -------------------------------------------------------
       FAQアコーディオン SP 調整
    ------------------------------------------------------- */
    #faq dl dd.faq-open {
        padding-top: 2.0rem !important;
        padding-bottom: 2.0rem;
    }

    /* -------------------------------------------------------
       プライバシーポリシー SP
    ------------------------------------------------------- */
    .privacy-agree-wrap {
        font-size: 2.4rem;
    }
    #privacy-hint {
        font-size: 2.2rem;
        margin-bottom: 3.0rem;
    }

} /* end @media */


/* ============================================================
   SP 追加スタイル（trust-bar / フォームバッジ / タップ領域）
   ============================================================ */
@media only screen and (min-width: 0px) and (max-width: 750px) {

    /* trust-bar SP */
    #trust-bar {
        gap: 1.4rem 2.0rem;
        padding: 1.6rem 3.0rem;
        font-size: 2.2rem;
        justify-content: center;
    }
    .tb-icon {
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.7rem;
    }

    /* フォーム申込バッジ SP */
    .form-trial-badge {
        width: 90%;
        font-size: 2.8rem;
        padding: 2.0rem 2.0rem;
        margin-bottom: 4.0rem;
    }

    /* CTAボタンタップ領域保証 SP
       送信・中間CTA・スティッキー等すべてに min-height を明示 */
    .send,
    .contact p a,
    #support p a,
    p.btn-top a,
    #sticky-cta a {
        min-height: 10.0rem;
        -webkit-appearance: none;
        appearance: none;
    }

    /* スクロールアニメーション: SPでは変位を小さく */
    .anim-target {
        transform: translateY(14px) !important;
    }

}