/* ======================================================
   CTA
   お問い合わせ誘導セクション
====================================================== */

/* ==========================
   CTA全体
========================== */
.service-cta{
    width:100%;                              /* 横幅いっぱい */
    padding:60px 0;                      /* 上下・左右余白 */
    background: linear-gradient(
    135deg,
    #a00012  0%,
    #b00014  50%,
    #c00000 100%
);                      /* 背景色 */
}

/* ==========================
   CTA内側
========================== */
.service-cta-inner{
    max-width:1200px;
    width:90%;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
}

/* ==========================
   英語タイトル
========================== */
.service-cta-subtitle{
    margin-top:-40px;                        /* 上へ40px移動 */
    margin-bottom:20px;                      /* 下余白 */
    font-size:16px;                          /* 文字サイズ */
    font-weight:700;                         /* 太字 */
    letter-spacing:4px;                      /* 文字間隔 */
    color:#ffffff;                           /* ブランドカラー */
    text-transform:uppercase;                /* 大文字表示 */
}

/* ==========================
   CTAタイトル
========================== */
.service-cta-title{
    width:100%;                              /* 横幅いっぱい */
    max-width:900px;                         /* 最大横幅 */
    margin:0 0 20px;                         /* 下余白 */
    font-family:"Noto Sans JP","Noto Sans",sans-serif; /* 多言語対応フォント */
    font-size:clamp(30px,3vw,40px);          /* 可変文字サイズ */
    font-weight:700;                         /* 太字 */
    line-height:1.4;                         /* 行間 */
    color:#ffffff;                           /* 文字色 */
    text-align:left;                         /* 左揃え */
    letter-spacing:0;                        /* 文字間隔 */
    word-spacing:0;                          /* 単語間隔 */
    word-break:normal;                       /* 通常改行 */
    overflow-wrap:anywhere;                  /* 長い単語も折り返す */
}

/* ==========================
   説明文
========================== */
.service-cta-text{
    width:100%;                              /* 横幅いっぱい */
    max-width:800px;                         /* 最大横幅 */
    margin:0;                                /* 余白 */
    font-family:"Noto Sans JP","Noto Sans",sans-serif; /* 多言語対応フォント */
    font-size:18px;                          /* 文字サイズ */
    line-height:1.9;                         /* 行間 */
    color:#ffffff;                           /* 文字色 */
    text-align:left;                         /* 左揃え */
    letter-spacing:0;                        /* 文字間隔 */
    word-spacing:0;                          /* 単語間隔 */
    word-break:normal;                       /* 通常改行 */
    overflow-wrap:anywhere;                  /* 長い単語も折り返す */
}

/* ==========================
   ボタン
========================== */

/*
【役割】
お問い合わせボタンを管理します。

【対応内容】
・日本語
・英語
・中国語
・韓国語
・イタリア語
・スペイン語
・ギリシャ語
・ブルガリア語

など、多言語でも文字が崩れにくいようにします。

【変更すると影響する項目】

min-width
→ ボタンの横幅

font-size
→ 文字サイズ

letter-spacing
→ 文字間隔

border-radius
→ ボタンの丸み
*/

.service-cta-button{
    display:inline-flex;                                 /* 横並び */
    justify-content:center;                              /* 横中央 */
    align-items:center;                                  /* 縦中央 */

    min-width:320px;                                     /* 最小横幅 */
    max-width:420px;
    padding:18px 40px;                                   /* 内側余白 */

    background:#ffffff;                                  /* 背景色 */
    color:#c00000;                                       /* 文字色 */

    font-family:"Noto Sans JP","Noto Sans",Arial,sans-serif; /* 多言語対応フォント */
    font-size:18px;                                      /* 文字サイズ */
    font-weight:700;                                     /* 太字 */
    line-height:1.3;                                     /* 行間 */

    letter-spacing:0;                                    /* 文字間隔 */
    word-spacing:0;                                      /* 単語間隔 */

    text-align:center;                                   /* 中央揃え */
    text-decoration:none;                                /* 下線なし */

    white-space:normal;                                  /* 折り返し許可 */
    word-break:normal;                                   /* 通常改行 */
    overflow-wrap:anywhere;                              /* 長い単語も折り返す */

    border:2px solid #ffffff;                            /* 枠線 */
    border-radius:50px;                                  /* 角丸 */

    transition:0.3s;                                     /* アニメーション */
}

/* ==========================
   ボタンホバー
========================== */
.service-cta-button:hover{
    background:#ffffff;                      /* 背景色 */
    color:#c00000;                           /* 文字色 */
    border:2px solid #c00000;                /* 枠線 */
}

/* ==========================================================
   SERVICE CTA
   スマホ表示専用
   ※PC表示には影響しない
========================================================== */

@media screen and (max-width: 768px) {

    /* CTA全体 */
    .service-cta {
        width: 100%;
        box-sizing: border-box;
        padding: 48px 16px 52px;
        overflow: hidden;
    }

    /* CTA内部 */
    .service-cta-inner {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
    }

    /* CONTACT US */
    .service-cta-subtitle {
        margin: 0 0 16px;
        font-size: 13px;
        line-height: 1.4;
        letter-spacing: 3px;
        text-align: center;
    }

    /* メイン見出し */
    .service-cta-title {
        width: 100%;
        max-width: 355px;
        margin: 0 auto 24px;

        font-size: 18px;
        line-height: 1.65;
        font-weight: 700;

        text-align: center;
        letter-spacing: 0;
        word-spacing: 0;

        word-break: normal;
        overflow-wrap: normal;
    }

    /* 説明文 */
    .service-cta-text {
        width: 100%;
        max-width: 350px;
        margin: 0 auto 30px;

        font-size: 15px;
        line-height: 1.9;

        text-align: center;
        letter-spacing: 0;
        word-spacing: 0;

        word-break: normal;
        overflow-wrap: normal;
    }

    /* お問い合わせボタン */
    .service-cta-button {
        width: 100%;
        max-width: 320px;
        min-width: 0;
        box-sizing: border-box;

        padding: 14px 20px;

        font-size: 17px;
        line-height: 1.4;

        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
    }
}


/* ==========================================================
   480px以下
   iPhoneなど小さい画面用
========================================================== */

@media screen and (max-width: 480px) {

    .service-cta {
        padding: 42px 14px 46px;
    }

    .service-cta-subtitle {
        margin-bottom: 14px;
        font-size: 12px;
        letter-spacing: 2.5px;
    }

    .service-cta-title {
        width: 100%;
        max-width: 350px;

        /* 26pxには戻さない */
        font-size: 17px;
        line-height: 1.65;

        margin-bottom: 22px;
    }

    .service-cta-text {
        width: 100%;
        max-width: 345px;

        font-size: 15px;
        line-height: 1.9;

        margin-bottom: 28px;
    }

    .service-cta-button {
        width: 100%;
        max-width: 320px;

        padding: 14px 18px;
        font-size: 17px;
    }
}