@charset "utf-8";

/********************************************
contact (お問い合わせ) ページ個別
********************************************/

/* FV 背景 */
.subfv{ background-image: url(../images/contact/contact_fv_pc.jpg); }
@media (max-width: 768px){
    .subfv{ background-image: url(../images/contact/contact_fv_sp.jpg); }
}

/********************************************
タブ(個人 / 法人 / 代理店)※JS切替・非アクティブは半透明
********************************************/
.ct-tabs{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 40px auto 0;
    padding: 0 20px;
}
.ct-tab{
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 120px;
    padding: 16px 30px 16px 10px;
    background: #fff;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: opacity .3s, border-color .3s, box-shadow .3s;
}
.ct-tab.is-active{
    border-color: var(--color-primary);
}
.ct-tab:not(.is-active){ opacity: .5; }
@media (min-width: 769px){ .ct-tab:not(.is-active):hover{ opacity: .8; } }
.ct-tab__ico{ flex-shrink: 0; width: 100px; }
.ct-tab__ico img{ width: 100%; display: block; }
.ct-tab__txt{ display: flex; flex-direction: column; line-height: 1.35; font-weight: 700; color: var(--color-primary); }
.ct-tab__txt small{ font-size: 16px; }
.ct-tab__txt b{ font-size: 22px; }
.ct-tab .arrow{
    right: 16px;
    top: 44%;
    transform: rotate(135deg);
    border-color: var(--color-primary);
}

/********************************************
パネル
********************************************/
.ct-panel{ display: none; margin: 120px 0 200px; }
.ct-panel.is-active{ display: block; }

/* ヘッダー帯 */
.ct-head{
    display: flex;
    align-items: center;
    height: 300px;
    background: center / cover no-repeat;
}
.ct-head--person{ background-image: url(../images/contact/sub_ttl_person_bg_pc.jpg); }
.ct-head--corpo{  background-image: url(../images/contact/sub_ttl_corpo_bg_pc.jpg); }
.ct-head--agency{ background-image: url(../images/contact/sub_ttl_agency_bg_pc.jpg); }
.ct-head__ttl{ color: #fff; font-size: 34px; font-weight: 700; letter-spacing: .04em; }

/* 本文 */
.ct-body{ padding-top: 60px; }
.ct-lead{ line-height: 2; margin-bottom: 40px; }

/* CTA */
.ct-cta{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background: var(--color-bg-light);
    padding: 20px 30px;
    margin-bottom: 80px;
}
.ct-cta__label{ color: var(--color-accent); font-size: 22px; font-weight: 700; letter-spacing: .04em; }
.ct-cta__btn{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    height: 60px;
    background: var(--color-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 4px;
}
.ct-cta__btn .arrow{ right: 20px; }

/********************************************
フォーム
********************************************/
.ct-form{ max-width: 1040px;margin: 0 auto; }
.ct-row{ display: flex; gap: 24px; align-items: flex-start; padding: 18px 0; }
.ct-row__label{ flex-shrink: 0; width: 220px; padding-top: 5px; font-size: 20px; font-weight: 700; }
.ct-req{ color: var(--color-accent); margin-left: 5px; }
.ct-field{ flex: 1; }
.ct-field input[type="text"],
.ct-field input[type="email"],
.ct-field textarea{
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cccccc;
    font-size: 15px;
    font-family: inherit;
    color: var(--color-text);
    background: #fff;
}
.ct-field input:focus,
.ct-field textarea:focus{ outline: 2px solid var(--color-primary-light); outline-offset: 0; }
.ct-field textarea{ min-height: 240px; resize: vertical; }
.ct-radios{ display: flex; flex-wrap: wrap; gap: 14px 26px; padding-top: 12px; }
.ct-radio{ display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ct-radio input{ accent-color: var(--color-primary); width: 16px; height: 16px; }
.ct-form__submit{ margin-top: 34px; text-align: center; }
.ct-submit{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 460px;
    height: 56px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
}
@media (min-width: 769px){ .ct-submit:hover, .ct-cta__btn:hover{ opacity: .85; } }
.ct-submit .arrow{ right: 20px; }

/********************************************
店舗ボタン(EC)※共通コンポーネント .store(common.css)を使用。余白のみ調整
********************************************/
.ct-body .store{ margin-top: 100px; }

/********************************************
SP
********************************************/
@media (max-width: 768px){
    .ct-tabs{ gap: 1.33vw; margin-top:6.66vw;padding: 0;}
    .ct-tab{
        padding: 2.666vw 0 0;
        border-radius: 2vw;
        display: block;
        align-items: flex-start;
        text-align: center;
        height: 38vw;
        border-width: 1px;
    }
    .ct-tab__ico{display: block;margin: 0 auto;width:16vw;height: 16vw; }
    .ct-tab__txt small{ font-size: 2.66vw; }
    .ct-tab__txt b{ font-size: 3.2vw; }
    .ct-tab .arrow{ 
        right: auto;
        left: 50%;
        top: auto;
        bottom: 2vw;
     }

    .ct-panel{ margin: 16vw 0; }
    .ct-head{ height: 34vw; }
    .ct-head--person{ background-image: url(../images/contact/sub_ttl_person_bg_sp.jpg); }
    .ct-head--corpo{  background-image: url(../images/contact/sub_ttl_corpo_bg_sp.jpg); }
    .ct-head--agency{ background-image: url(../images/contact/sub_ttl_agency_bg_sp.jpg); }
    .ct-head__ttl{ font-size: 6vw; }

    .ct-body{ padding-top: 8vw; }
    .ct-lead{ font-size: 3.2vw; margin-bottom: 5.6vw; }

    .ct-cta{ padding: 5vw 4vw; margin-bottom: 10vw; gap: 3vw; }
    .ct-cta__label{ font-size: 4.2vw; }
    .ct-cta__btn{ height: 14vw; font-size: 3.8vw; }

    /* フォーム：ラベル上・入力下 */
    .ct-row{ flex-direction: column; gap: 2.5vw; padding: 3vw 0; }
    .ct-row__label{ width: auto; padding-top: 0; font-size: 3.2vw; }
    .ct-field {width: 100%;}
    .ct-field input[type="text"],
    .ct-field input[type="email"],
    .ct-field textarea{ font-size: 3.2vw; padding:2vw 2.5vw; }
    .ct-field textarea{ min-height: 32vw; }
    .ct-radios{ gap: 3vw; padding-top: 0; }
    .ct-radio{ font-size: 2.66vw; gap:1vw; }
    .ct-form__submit{margin-top:6vw;padding: 0 4.66vw 6vw;}
    .ct-submit{ height: 12vw; font-size: 3.8vw; }

    .ct-body .store{ margin-top: 10vw; }
}