/* ========================================
// 上部　navigation
=========================================== */
.sub-nav-wrap {
    --sub-nav-bg: var(--color-pink);
    --sub-nav-h: 60px;
}
.sub-nav::before { display: none; }
.sub-nav ul { height: inherit; }
.sub-nav li {
    width: 173px;
    height: 50%;
    border-right: var(--border-base);
    border-width: 1px;
}
.sub-nav li a {
    display: block;
    width: 100%;
    height: 100%;
}
.sub-nav li a:hover { color: var(--color-white); }


main h3 { font-size: clamp(2em, 3vw, 2.25em); font-weight: 900; }
.text-large { font-size: clamp(1.15em, 1.5vw, 1.25em); }
.text-small { font-size: 14px; }
.text-medium { font-size: clamp(1rem, 1.3vw, 1.125em); }

#contact main { background-color: var(--color-lightgray);}
/* ========================================
// #fv
=========================================== */
#fv { padding-top: var(--pad-9);}
#fv .title-group figure {
    --figure-w: 113px;
    --figure-h: 110px;
}
#fv .title-group .section-title .en { --title-en: 1.5em;}
#fv .title-group .section-title .ja { --title-ja: clamp(2em, 4vw, 2.75em); }
#fv .bubble {
    --bubble-w: fit-content;
    padding-inline: 1em;
    left: 280px;
    top: -20px !important;
}
#fv + section { padding-top: 0;}

/* 共通のフッターフォーム */
article#main-form { 
    background-color: var(--bgc);
    padding-block: var(--pad-9);
}
#main-form .form-inner { 
    background-color: var(--color-white); 
    padding: var(--pad-7);
}


@media (max-width: 1420px) {
    .sub-nav-wrap { padding-block: calc(var(--header-offset) + 1rem) 0; }
}

@media (max-width:920px) {
    #fv { padding-top: calc(var(--header-offset) + 4rem); }
    #fv .bubble {
        left: 230px;
        top: 20px !important;
    }

}
@media (max-width:786px) {
    #fv .bubble {
        left: 70px;
        top: -20px !important;
    }

   #fv .title-group { 
        flex-direction: column-reverse;
        gap: var(--gap-2);
    }
}

@media (max-width: 520px) {
    .sub-nav li:last-of-type { border-left: var(--border-base); border-width: 1px;}

    /* ===== 共通ヘッダー部分 520 ===== */

   #fv { padding-bottom: var(--pad-6);}
   #fv div:has( > .bubble ) { gap: var(--gap-2);}
   #fv .bubble {
        left: 30px !important;
        --bubble-h: 80px;
    }
   #fv .title-group figure { align-self: center; }
   #fv .title-group .ja {  font-size: 1.98em; }

   
    /* ===== 共通フォーム部分 520 ===== */
    #main-form .form-inner { padding: var(--pad-3) var(--pad-2);}
 

}