/* =========================================================
   Responsive overlay for Twin Oaks Dental
   PC base CSS (style/template/was/low) is fixed-width 1280px+.
   This file aggressively overrides for ≤980px / ≤640px / ≤380px.
   ========================================================= */

/* Always-on guards (regardless of viewport) */
img{max-width:100%;height:auto;}

/* Lang switcher: relocate as a top fixed bar (under demo banner) on mobile */
@media screen and (max-width:980px){
  .lang-switch{
    position:fixed !important;
    top:24px !important;             /* directly under demo-banner */
    left:0 !important;right:0 !important;
    width:100% !important;
    border-radius:0 !important;
    border:none !important;
    border-bottom:1px solid #B8956A !important;
    padding:6px 12px !important;
    font-size:11px !important;
    background:rgba(255,255,255,.96) !important;
    backdrop-filter:blur(10px) !important;
    box-shadow:none !important;
    display:flex !important;
    justify-content:center !important;
    gap:4px !important;
    z-index:9998 !important;
  }
  .lang-switch a{padding:3px 10px !important;}
  /* push body to give room for both demo-banner + lang-switch */
  body.low{padding-top:54px !important;}
}

/* ========================================================
   TABLET / MOBILE (≤980px)
   ======================================================== */
@media screen and (max-width:980px){

  /* ---- Root reset: kill PC fixed width ---- */
  html,body{
    min-width:0 !important;
    max-width:100% !important;
    width:100% !important;
    overflow-x:hidden !important;
  }
  body{font-size:15px !important;}

  /* ---- HEADER (rebuilt for mobile: 2-row compact) ---- */
  /* Row 1: brand (left) + WEB予約 (right) */
  /* Row 2: TEL number centered */
  /* Hide h1 page title text and timetable (footer has it) */
  header{
    position:relative !important;
    width:100% !important;
    background:#fff !important;
    border-bottom:1px solid #EADFCE !important;
    box-shadow:0 1px 4px rgba(93,74,51,.06) !important;
    margin-top:0 !important;
    z-index:5;
  }
  header .inner,
  header > .inner{
    width:100% !important;
    max-width:100% !important;
    padding:10px 14px !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:1fr auto !important;
    grid-template-areas:
      "logo  web"
      "info  info" !important;
    align-items:center !important;
    gap:8px 10px !important;
    box-sizing:border-box !important;
  }

  /* h1 タイトルテキスト＝ヘッダー上では非表示（breadcrumbにある） */
  header .h_logo h1{
    position:absolute !important;
    width:1px !important;height:1px !important;
    overflow:hidden !important;clip:rect(0 0 0 0) !important;
    margin:-1px !important;padding:0 !important;border:0 !important;
  }

  /* h_logo: grid area "logo" / 左寄せ */
  header .h_logo{
    grid-area:logo !important;
    width:auto !important;margin:0 !important;padding:0 !important;
    text-align:left !important;float:none !important;display:flex !important;
    align-items:center !important;
  }
  header .h_logo a{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    justify-content:flex-start !important;
    text-decoration:none !important;
  }
  header .h_logo img{display:none !important;}

  /* h_timetable: ヘッダー上では非表示（footer に同じ表あり） */
  header .h_timetable{
    display:none !important;
  }

  /* h_info: grid area "info" / 2行目のTEL中央 */
  header .h_info{
    grid-area:info !important;
    width:100% !important;
    margin:0 !important;
    padding:6px 0 0 !important;
    border-top:1px dashed #E5DAC4 !important;
    background:transparent !important;
    box-shadow:none !important;
    text-align:center !important;
    float:none !important;
    box-sizing:border-box !important;
  }
  header .h_info .h_tel{
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    display:inline-flex !important;
    align-items:baseline !important;
    gap:8px !important;
    text-align:center !important;
  }
  header .h_info .h_tel .ttl{
    font-size:11px !important;
    margin:0 !important;
    color:#6B5B45 !important;
    line-height:1.4 !important;
  }
  header .h_info .h_tel .number{
    font-size:18px !important;
    margin:0 !important;
    color:#5D4A33 !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    letter-spacing:.02em !important;
  }
  /* h_add（住所）はヘッダー上では非表示（footer にある） */
  header .h_info .h_add{display:none !important;}

  /* h_web: grid area "web" / 右側のWEB予約ボタン */
  header .h_web{
    grid-area:web !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    text-align:right !important;
    float:none !important;
    box-sizing:border-box;
  }
  header .h_web a{display:inline-block !important;}
  header .h_web img{
    width:auto !important;
    max-width:120px !important;
    height:auto !important;
    display:block !important;
  }

  /* ---- KV / mainPhoto ---- */
  .mainPhoto{
    width:100% !important;
    padding:0 !important;
    margin:0 0 18px !important;
  }
  .kv-img-wrap{
    width:100% !important;
    aspect-ratio:16/9 !important;        /* override 16/6 inline */
    border-radius:0 0 16px 16px !important;
  }

  /* ---- GNAV (fix height:48px, padding:0 40px) ---- */
  .gnav{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;            /* override 48px */
    padding:0 !important;              /* override 0 40px */
    margin:0 !important;
    box-sizing:border-box;
  }
  .gnav ul{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    height:auto !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;     /* override space-between */
    border-left:none !important;
    list-style:none !important;
    box-sizing:border-box;
  }
  .gnav ul li,
  .gnav li{
    width:50% !important;
    flex:0 0 50% !important;
    margin:0 !important;
    padding:0 !important;
    float:none !important;
    height:auto !important;
    border-right:1px solid rgba(111,109,105,.25) !important;
    border-bottom:1px solid rgba(111,109,105,.25) !important;
    display:flex !important;
    align-items:stretch !important;
    box-sizing:border-box !important;
  }
  .gnav ul li:nth-child(2n),
  .gnav li:nth-child(2n){border-right:none !important;}
  .gnav ul li a,
  .gnav li a{
    display:flex !important;
    flex-direction:row !important;             /* kill column for .home */
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    padding:13px 8px !important;
    font-size:12.5px !important;
    line-height:1.4 !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }
  .gnav ul li.home a,
  .gnav li.home a{flex-direction:row !important;}    /* override column */
  .gnav ul li.home a i,
  .gnav li.home a i{display:none !important;}        /* hide HOME icon */
  .gnav ul li.home a img,
  .gnav li.home a img{display:none !important;}

  /* ---- BREADCRUMB ---- */
  .breadcrumbs{
    width:100% !important;
    padding:8px 14px !important;
    font-size:11px !important;
    margin:0 !important;
    box-sizing:border-box;
  }

  /* ---- MAIN LAYOUT: 2col → 1col ---- */
  .pc-contents{
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 0 40px !important;
    display:block !important;
    float:none !important;
    box-sizing:border-box;
  }
  .pc-contents .left-contents,
  .pc-contents .right-contents,
  .left-contents,
  .right-contents{
    width:100% !important;
    max-width:100% !important;
    padding:14px !important;
    margin:0 !important;
    float:none !important;
    box-sizing:border-box !important;
  }

  /* ---- SIDEBAR ---- */
  .sidemenu{
    width:100% !important;
    margin:0 0 18px !important;
    background:transparent !important;
    padding-top:0 !important;
  }
  /* original .sidemenu h2 is position:absolute right:7px width:90px ─ undo it */
  .sidemenu h2{
    position:static !important;
    width:auto !important;
    top:auto !important;right:auto !important;left:auto !important;
    font-size:22px !important;
    margin:0 0 14px !important;
    text-align:center !important;
    transform:none !important;
  }
  /* original ::before is a triangle decoration ─ hide on mobile */
  .sidemenu::before{display:none !important;}
  .sidemenu nav ul{
    list-style:none !important;
    padding:0 !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px !important;
  }
  .sidemenu nav ul li{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }
  .sidemenu nav ul li a{
    padding:10px 8px !important;
    font-size:12px !important;
    line-height:1.4 !important;
    display:block !important;
    box-sizing:border-box;
  }
  .sidemenu nav ul li a .en{font-size:9.5px !important;display:block !important;}
  .sidemenu nav ul li a .jp{font-size:12px !important;display:block !important;}

  .sidebnr{margin-top:14px !important;}
  .sidebnr ul{
    list-style:none !important;
    padding:0 !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  .sidebnr ul li{width:100% !important;margin:0 !important;}
  .sidebnr ul li a{display:block !important;}
  .sidebnr img{width:100% !important;height:auto !important;display:block !important;}

  /* ---- PAGE CATCH (Hero callouts) ---- */
  .page-catch{
    padding:18px 14px !important;
    margin:0 0 28px !important;
  }
  .page-catch h2{
    font-size:17px !important;
    line-height:1.7 !important;
    padding:10px 0 !important;
  }
  .page-catch h3{
    font-size:14.5px !important;
    line-height:1.7 !important;
  }
  .page-catch p{font-size:13.5px !important;line-height:1.85 !important;}

  /* page-catch ceramic: 2col flex → 1col */
  .page-catch .ceramic{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
  }
  .page-catch .ceramic li{
    width:100% !important;
    margin:0 0 16px !important;
    float:none !important;
    display:block !important;
  }
  .page-catch .ceramic li a{display:block !important;}
  .page-catch .ceramic_list dt{
    font-size:13px !important;
    line-height:1.7 !important;
    padding:10px !important;
  }
  .page-catch .ceramic_list dd img{width:100% !important;height:auto !important;}

  /* ---- ESTHETICS sections ---- */
  section.esthetics,
  .esthetics{
    width:100% !important;
    padding:8px 0 28px !important;
    box-sizing:border-box;
  }

  /* Headings */
  .ttl-low5,
  .ttl-low5-1,
  .ttl-low5-2,
  .ttl-low4,
  .ttl-low4-1,
  .ttl-low{
    font-size:17px !important;
    line-height:1.6 !important;
    padding:12px 14px !important;
    box-sizing:border-box;
  }
  .ttl-low5-2{font-size:15.5px !important;padding:10px 12px !important;}
  .ttl-low4,.ttl-low4-1{
    padding:10px 12px !important;
    font-size:14.5px !important;
    line-height:1.6 !important;
    flex-wrap:wrap;
  }
  .ttl-low4 span,.ttl-low4-1 span{font-size:13.5px !important;}

  /* Ginza-style float images → block */
  .img-right,
  .img-left,
  p > .img-right,
  p > .img-left{
    float:none !important;
    display:block !important;
    width:100% !important;
    max-width:480px !important;
    height:auto !important;
    margin:0 auto 14px !important;
  }
  .cf > p{margin:0 0 14px !important;}
  .cf > p > img{
    width:100% !important;
    max-width:480px !important;
    margin:0 auto 12px !important;
    display:block !important;
    float:none !important;
  }

  /* FEATURE list: 3col flex → 1col block */
  .esthetics .feature,
  ul.feature{
    display:block !important;
    margin:0 0 18px !important;
    padding:0 !important;
    list-style:none !important;
  }
  .esthetics .feature li,
  ul.feature li{
    width:100% !important;
    margin:0 0 16px !important;
    padding:0 !important;
    float:none !important;
    display:block !important;
  }
  .esthetics .feature_list dt,
  .feature_list dt{
    font-size:14.5px !important;
    padding:10px !important;
    line-height:1.5 !important;
  }
  .esthetics .feature_list dd img,
  .feature_list dd img{width:100% !important;height:auto !important;}

  /* CASE-RECORDS: side-by-side but compact */
  .case-records-wrap{margin:0 0 14px !important;}
  .case-records,
  ul.case-records{
    display:flex !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
  }
  .case-records li,
  ul.case-records li{
    width:50% !important;
    flex:0 0 calc(50% - 3px) !important;
    margin:0 !important;
    padding:0 !important;
    float:none !important;
  }
  .case-records img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    display:block !important;
  }
  .page-catch .case-records img{width:100% !important;}

  /* FLOW: display:table → block */
  .esthetics .flow,
  dl.flow{
    display:block !important;
    width:100% !important;
    padding:0 !important;
    margin:0 0 18px !important;
  }
  .esthetics .flow dt,
  dl.flow dt{
    display:inline-block !important;
    width:auto !important;
    padding:6px 16px !important;
    margin:0 0 8px !important;
    font-size:18px !important;
    vertical-align:baseline !important;
  }
  .esthetics .flow dd,
  dl.flow dd{
    display:block !important;
    width:100% !important;
    padding:0 !important;
    margin:0 0 12px !important;
    box-sizing:border-box;
  }
  .esthetics .flow dd img,
  dl.flow dd img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    display:block !important;
    margin:8px auto !important;
  }
  .static.center img{max-width:100% !important;width:100% !important;}

  /* TABLE */
  table.table-nocolor{
    width:100% !important;
    font-size:12px !important;
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  table.table-nocolor th,
  table.table-nocolor td{
    padding:8px 6px !important;
    font-size:11.5px !important;
    line-height:1.5 !important;
  }
  .esthetics .table-nocolor td:first-child img{
    width:80px !important;
    max-width:80px !important;
  }

  /* Q&A */
  dl.qanda{
    width:100% !important;
    padding:0 !important;
    margin:0 0 18px !important;
  }
  dl.qanda dt{
    font-size:13.5px !important;
    line-height:1.7 !important;
    padding:11px 12px 11px 38px !important;
    background-position:10px 14px !important;
    background-size:18px auto !important;
  }
  dl.qanda dd{
    font-size:13px !important;
    line-height:1.85 !important;
    padding:11px 12px 11px 38px !important;
    background-position:10px 14px !important;
    background-size:18px auto !important;
  }

  /* COLUMN box */
  .colunm{
    padding:18px 14px !important;
    margin:0 0 18px !important;
  }
  .ttl-btn{
    font-size:15px !important;
    line-height:1.6 !important;
    padding:10px !important;
    flex-direction:column;
    align-items:flex-start;
  }
  .ttl-btn .colum,.ttl-btn .column{font-size:11.5px !important;margin-bottom:6px !important;}

  ul.list-dot{padding-left:1.2em !important;font-size:13.5px !important;}
  ul.list-dot li{margin-bottom:4px !important;}

  /* BTN */
  p.btn{text-align:center !important;}
  p.btn a{
    display:inline-block !important;
    width:auto !important;
    max-width:90% !important;
    padding:13px 28px !important;
    font-size:14px !important;
    box-sizing:border-box;
  }
  .esthetics .btn a{width:auto !important;max-width:90% !important;}

  /* YOUTUBE */
  .esthetics .youtube{
    width:100% !important;
    padding:0 !important;
    margin:0 0 18px !important;
  }
  .esthetics .youtube iframe{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    aspect-ratio:16/9;
  }

  /* ---- COUNSELING ---- */
  .counseling{
    margin-top:30px !important;
    padding:24px 14px !important;
    width:100% !important;
    box-sizing:border-box;
  }
  .counseling > p{font-size:13.5px !important;line-height:1.9 !important;}
  .counseling .co_box{
    width:100% !important;
    height:auto !important;            /* override 430px fixed height */
    min-height:0 !important;
    padding:18px !important;
    display:block !important;
    position:static !important;
    box-sizing:border-box;
  }
  .counseling .co_box ul.btn{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    justify-content:center !important;
    width:100% !important;
    padding:0 !important;
    margin:0 0 14px !important;
    list-style:none !important;
    position:static !important;
  }
  .counseling .co_box ul.btn li{
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    float:none !important;
    position:static !important;
  }
  .counseling .co_box ul.btn img{
    max-width:200px !important;
    width:auto !important;
    height:auto !important;
  }
  .counseling .cs_tel,
  .counseling .cs_add{
    width:100% !important;
    margin:14px 0 0 !important;
    padding:14px !important;
    float:none !important;
    text-align:center !important;
    position:static !important;
    box-sizing:border-box;
  }
  .counseling .cs_tel h3,
  .counseling .cs_add h3{font-size:14px !important;margin-bottom:6px !important;}
  .counseling .cs_tel p{font-size:22px !important;line-height:1.3 !important;}
  .counseling .cs_add p{font-size:13px !important;line-height:1.7 !important;}

  /* ---- FOOTER ---- */
  footer{padding:24px 0 0 !important;}
  footer .inner{
    width:100% !important;
    max-width:100% !important;
    padding:0 14px !important;
    margin:0 !important;
    display:block !important;
    box-sizing:border-box;
  }
  footer .f_left,
  footer .f_right{
    width:100% !important;
    margin:0 0 24px !important;
    padding:0 !important;
    float:none !important;
    box-sizing:border-box;
  }
  footer .flex{flex-wrap:wrap;justify-content:center;}
  footer .f_logo{text-align:center !important;width:100% !important;margin-bottom:14px !important;}
  footer .f_logo a{justify-content:center;display:inline-flex !important;align-items:center;flex-wrap:wrap;}
  footer .f_logo img{max-width:160px !important;height:auto !important;}
  footer .f_tel{text-align:center !important;margin:14px 0 !important;}
  footer .f_tel .ttl{font-size:12px !important;}
  footer .f_tel .number{font-size:22px !important;}
  footer .f_add{text-align:center !important;font-size:12px !important;line-height:1.7 !important;}
  footer .f_access{text-align:center !important;}
  footer .f_access ul{padding:0 !important;list-style:none !important;}
  footer .f_access li{font-size:12px !important;}
  footer .f_timetable{margin:14px 0 0 !important;overflow-x:auto;}
  footer .f_timetable table{width:100% !important;font-size:11px !important;}
  footer .f_timetable th,footer .f_timetable td{padding:4px 2px !important;font-size:10.5px !important;}

  footer .f_web{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    justify-content:center !important;
    margin:0 0 14px !important;
  }
  footer .f_web a{display:inline-block !important;}
  footer .f_web img{max-width:200px !important;height:auto !important;}

  footer .f_nav{
    display:block !important;
    width:100% !important;
  }
  footer .f_nav ul{
    width:100% !important;
    margin:0 0 14px !important;
    padding:0 !important;
    float:none !important;
    list-style:none !important;
  }
  footer .f_nav ul li{
    padding:8px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:13px !important;
  }
  footer .f_copy{
    font-size:10px !important;
    padding:14px !important;
    text-align:center !important;
  }

  /* DEMO banner */
  .to-demo-banner{font-size:10px !important;padding:4px 8px !important;letter-spacing:.05em !important;}

  /* Show/hide helpers */
  .pc-none{display:inline !important;}
  .sp-none{display:none !important;}

  /* Brand mark inline (header logo) */
  .brand-mark-inline{
    width:36px !important;height:36px !important;line-height:36px !important;
    font-size:18px !important;margin-right:8px !important;
    flex-shrink:0 !important;
  }
  .brand-text-inline{
    display:inline-block !important;text-align:left !important;line-height:1.2 !important;
  }
  .brand-text-inline .ja{
    font-size:14px !important;font-weight:600 !important;
    letter-spacing:.04em !important;color:#3D2E1F !important;
  }
  .brand-text-inline .en{
    font-size:8.5px !important;letter-spacing:.18em !important;
    color:#8B7355 !important;
  }
}

/* ========================================================
   SMARTPHONE (≤640px)
   ======================================================== */
@media screen and (max-width:640px){
  body{font-size:14px !important;}

  /* HEADER smaller */
  header .inner{padding:8px 10px !important;gap:6px 8px !important;}
  header .h_info .h_tel .ttl{font-size:10px !important;}
  header .h_info .h_tel .number{font-size:16px !important;}
  header .h_web img{max-width:100px !important;}
  .brand-mark-inline{width:32px !important;height:32px !important;line-height:32px !important;font-size:16px !important;margin-right:6px !important;}
  .brand-text-inline .ja{font-size:13px !important;}
  .brand-text-inline .en{font-size:8px !important;letter-spacing:.15em !important;}

  .gnav ul li a{padding:11px 4px !important;font-size:11.5px !important;}

  .sidemenu nav ul{grid-template-columns:1fr !important;}
  .sidemenu nav ul li a{padding:10px 12px !important;}
  .sidemenu nav ul li a .en{font-size:10px !important;}
  .sidemenu nav ul li a .jp{font-size:13px !important;}

  .page-catch{padding:14px 12px !important;}
  .page-catch h2{font-size:15.5px !important;line-height:1.7 !important;}
  .page-catch h3{font-size:13.5px !important;}
  .page-catch .ceramic_list dt{font-size:12px !important;}

  .ttl-low5,.ttl-low5-1{font-size:15.5px !important;padding:10px 12px !important;}
  .ttl-low5-2{font-size:14px !important;padding:8px 10px !important;}
  .ttl-low4,.ttl-low4-1{padding:9px 10px !important;font-size:13.5px !important;}

  table.table-nocolor th,table.table-nocolor td{padding:6px 4px !important;font-size:11px !important;}
  .esthetics .table-nocolor td:first-child img{width:60px !important;max-width:60px !important;}

  dl.qanda dt{font-size:13px !important;padding:10px 10px 10px 36px !important;}
  dl.qanda dd{font-size:12.5px !important;padding:10px 10px 10px 36px !important;}

  .esthetics .flow dt,dl.flow dt{font-size:16px !important;padding:5px 12px !important;}

  .lang-switch{
    top:28px !important;right:6px !important;font-size:10px !important;padding:3px 7px !important;
  }
  .lang-switch a{padding:2px 5px !important;}
  .lang-switch .sep{font-size:9px !important;}

  .case-records,ul.case-records{gap:4px !important;}
}

/* ========================================================
   VERY SMALL (≤380px)
   ======================================================== */
@media screen and (max-width:380px){
  .gnav ul li{
    width:100% !important;
    flex:0 0 100% !important;
  }
  .gnav ul li a{padding:11px 6px !important;font-size:12px !important;}

  .lang-switch{font-size:9.5px !important;padding:2px 6px !important;}
  .lang-switch a{padding:2px 4px !important;}

  /* Very small: keep header inline but compact */
  header .inner{padding:6px 8px !important;}
  header .h_info .h_tel{flex-direction:column;gap:0 !important;align-items:center !important;}
  header .h_info .h_tel .ttl{font-size:9.5px !important;}
  header .h_info .h_tel .number{font-size:15px !important;}
  .brand-text-inline .ja{font-size:12px !important;}
  .brand-text-inline .en{display:none !important;}
  header .h_web img{max-width:90px !important;}
}