@charset "utf-8";
/* =====================================================================
   Japanese responsive fixes  (JAPANESE SITE ONLY)
   2026-07-02
   Loaded last in /jpn/include/headHtml.jsp so it overrides the shared
   /css/*.css. Only Japanese pages link this file, so the Korean and
   English sites are not affected.

   NOTE on scope vs. the English fix:
   The consultation-bar / footer / quick-menu / pop-banner overlap
   (Issue 2 on the English site) does NOT occur here. The Japanese
   labels are short and there is no forced-width inline style in
   footer.jsp, so at 390px the fixed bar is only ~145px tall — within
   #footer's existing 155px bottom padding. Measured: no footer/quick
   overlap, no form overflow (scrollWidth == clientWidth). So only the
   GNB (Issue 3) and colossus-circle (Issue 4) fixes are needed.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Issue 3) Mobile GNB (#all-menu) sub-titles run together
   Prefix every sub-menu item with a middle dot so consecutive titles
   read as separate items. #all-menu is the mobile hamburger panel, so
   no media query is needed. (Same markup as the English site.)
   --------------------------------------------------------------------- */
#all-menu .gnb_ul ul li .depth02 li a{
    position: relative;
    padding-left: 15px;
}
#all-menu .gnb_ul ul li .depth02 li a::before{
    content: "\00B7";              /* middle dot · */
    position: absolute;
    left: 3px;
    top: 0;
    color: #999;
    font-weight: 700;
}

/* ---------------------------------------------------------------------
   Issue 4) Breast-lift (colossus) circles clip the text sideways
   The circle text is set to the full diameter width at 22px, so the
   longest label (the black circle) spills past the rounded edge and
   looks cut off on both sides. Shrink the font and keep the text inside
   ~78% of the circle width so it stays within the curve. Japanese wraps
   fine with the site's normal word-break; the desktop <br class="only_pc">
   breaks are already hidden on mobile.
   --------------------------------------------------------------------- */
@media all and (max-width:1024px){
    [data-type="colossus"] .circle_alt_list ul li .left_circle .center_circle{
        font-size: 16px;
        line-height: 1.45em;
    }
    [data-type="colossus"] .circle_alt_list ul li .left_circle .center_circle p{
        width: 78%;
        margin: 0 auto;
    }
}
@media all and (max-width:480px){
    [data-type="colossus"] .circle_alt_list ul li .left_circle .center_circle{
        font-size: 15px;
    }
}

/* ---------------------------------------------------------------------
   nose/resurgery highlight span breaks on mobile
   The shared `.common_new_alt span` highlight is drawn with an absolutely
   positioned `::after` bar (height:12px; bottom:0; left:0; right:0). That
   only covers a single line, so when the long Japanese phrase wraps on
   mobile the yellow highlight no longer sits under the text.
   The sister page (.card_layout .txt_check_box span) already handles this:
   at <=1024px it drops its bar and switches to an inline gradient background
   that paints every wrapped line. Mirror the same behaviour here so the
   resurgery highlight wraps correctly. (Only nose/resurgery uses
   .common_new_alt among the live jpn pages.)
   --------------------------------------------------------------------- */
@media all and (max-width:1024px){
    .common_new_alt span::after{ content: none; }
    .common_new_alt span{
        background: linear-gradient(0deg, rgba(254,229,0,1) 0%, rgba(255,255,255,0) 65%);
    }
}

/* ---------------------------------------------------------------------
   eye/middle highlight span disappears on mobile
   `.com_new_txt span` uses the same absolute `::before` bar, but the shared
   CSS only sets `content:none` at <=650px with NO gradient replacement, so
   the yellow emphasis vanishes entirely on phones (and can misalign on the
   2-line spans between 651-1024). Apply the same gradient the sister
   highlights use so the emphasis stays visible and wraps cleanly.
   (Only eye/middle uses .com_new_txt among the live jpn pages.)
   --------------------------------------------------------------------- */
@media all and (max-width:1024px){
    .com_new_txt span::before{ content: none; }
    .com_new_txt span{
        background: linear-gradient(0deg, rgba(254,229,0,1) 0%, rgba(255,255,255,0) 65%);
    }
}