/* responsive.css: Responsive enhancements scaffold for all core styles */

/* 1. Breakpoint definitions */
:root {
  /* Adjust these breakpoints as needed */
  --bp-desktop: 1200px;
  --bp-laptop: 992px;
  --bp-tablet: 768px;
  --bp-mobile: 576px;
}

/* 2. Container scaling */
@media (max-width: 1200px) {
  .container { max-width: 100%; /* fluid to screen */ }
}

/* 3. Header adjustments */
@media (max-width: 768px) {
  
  /* 左：テキスト縦積み */
  .header-left {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .header-left span:first-child {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
    line-height: 1.2;
  }
  .header-left span:last-child {
    font-size: .875rem;
    color: #666;
    margin-top: .25rem;
  }

  /* 右：お問い合わせを小さく */
  .header-right .contact-button {
    font-size: .875rem;
    padding: .5rem .75rem;
    margin-right: .5rem;
  }
  .menu-toggle {
    width: 2.5rem;
    height: 2.5rem;
  }

  .site-header .header-inner {
    align-items: stretch;
  }
  .site-header .site-title,
  .header-center,
  .header-right {
    text-align: center;
  }
  .header-center{
    height: 120px;
  }
  .header-right .contact-icon{
    margin-right: 70px;
    padding: 0.5rem 0 0 0;
  }
  .contactus{
    display:none;
  }
  .header-center .site-title{
    font-size: 75px;
    margin: 1rem 0 0;
  }
  .header-left{
    margin: 15px 0 0 10px;
    max-width: 250px;
  }
  .header-left img{
    width: 230px;
  }
  .header-wave{
    height: 100px;
    background-size: auto 100px; 
  }
  .header-wave.work-wave{
    height: 100px;
    background-size: auto 100px; 
    margin-top: -80px;
    z-index: 1;
  }
  .work-intro {
    padding: 2.5rem 1rem;
  }
  .header-center.work-header {
    margin: auto;
  }
}

@media (max-width: 576px) {
  .header-center .site-title{
    font-size: 50px;
  }
  .header-center{
    height: 90px;
  }
}

/* 3. footer adjustments */
@media (max-width: 992px) {
  .footer-title{
    font-size: 3.5rem;
  }
  .footer-address {
    font-size: 14px;
  }
  .footer-contact {
    font-size: 14px;
  }
  .footer-privacy{
    font-size: 12px;
  }
  .footer-col--right {
    flex: 0 0 250px;
  }
  .footer-col--left {
    margin-left: auto;
    margin-right: 2%;
  }
  #backToTop{
    right: 60px;
  }
  
}
@media (max-width: 768px) {
  .footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;   /* 全カラム中央揃え */
  }
  .footer-col {
    flex: none;
    width: 100%;
    padding: 1rem 0;
    text-align: center;    /* テキストも中央揃え */
  }
  .footer-col--left,
  .footer-col--center,
  .footer-col--right {
    align-items: center;   /* 内部要素も中央寄せ */
  }
  .footer-col--center {
    order: 2;
  }
  .footer-col--right {
    order: 3;
    flex: 0;
  }
  #backToTop{
    right: 50px;
    width: 50px;
    height: 50px;
  }
  .footer-contact-icon{
    width: 1.8em;
  }
  .footer-contact{
    font-size: 16px;
  }
}
@media (max-width: 576px) {
  #backToTop{
    right: 10px;
  }
}

/* 4. Front-case grid (front-page.css) */
@media (max-width: 992px) {
  .front-case-list .case-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .front-intro {
    padding: 0.5rem 1rem 0.5rem;
  }
}
@media (max-width: 576px) {
  .front-case-list .case-list-grid {
    grid-template-columns: 2fr;
  }
  .case-link-wrapper{
    margin: 4rem 0;
  }
}

/* 5. Work-search 2-column layout */
@media (max-width: 768px) {
  .layout-two-column {
    flex-direction: column;
  }
  .layout-two-column aside {
    width: 100%;
  }
}

/* 6. Case-list grid for work-search */
@media (max-width: 768px) {
  .case-thumb img{
    margin:0 0 0.8em 0;
  }
  .section-header .section-title{
    font-size: 30px;
  }
  .header-center.work-header {
    width: 100%;
    position: relative;
    text-align: center;
    z-index: 5;
    top: 0px;
  }
}
@media (max-width: 576px) {
  .case-list-grid {
    grid-template-columns: 1fr; /* single column */
    gap: 0.8rem;
  }
  .case-site-type span,
  .case-site-type .case-type-link,
  .case-categories span,
  .case-categories .case-cat-link{
    padding: 0 1em;
  }
}

/* 7. Drawer width on small screens */
@media (max-width: 768px) {
  .site-drawer {
    width: 100%; /* full width drawer */
    right: -100%;
  }
  .menu-toggle{
    width: 50px;
    height: 50px;
  }
}

/* 8. Font-size scaling */
@media (max-width: 576px) {
  html { font-size: 14px; }
}
@media (min-width: 768px) and (max-width: 992px) {
  html { font-size: 15px; }
}

/* 9. Utility tweaks */
@media (max-width: 576px) {
  /*.case-link { padding-bottom: 2rem; } */
  .front-tax-list { flex-wrap: wrap; justify-content: left; }
  .front-tax-list li { margin: 0.5rem; }
  .front-tax-list li a{
    font-size: 0.9rem;
  }
}

/* End of responsive scaffold */