/* =====================
RESPONSIVE
===================== */

@media screen and (max-width:768px){

  body{
    overflow-x:hidden;
  }

  /* =====================
  HEADER
  ===================== */

  .site-header{
    padding:18px 20px;
  }

  .header-inner{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }

  .logo{
    font-size:20px;
  }

  /* ハンバーガー */

  .menu-toggle{
    display:block !important;
    position:relative;
    z-index:1001;
  }

  /* メニュー */

  .nav-menu{

    display:flex;

    position:absolute;

    top:72px;
    left:0;

    width:100%;

    background:#fff;

    flex-direction:column;

    gap:20px;

    padding:30px 20px;

    text-align:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    opacity:0;

    visibility:hidden;

    transform:
    translateY(-12px);

    transition:
    opacity .35s ease,
    transform .35s ease,
    visibility .35s ease;
  }

  .nav-menu.active{

    opacity:1;

    visibility:visible;

    transform:
    translateY(0);
  }

  /* =====================
  HERO
  ===================== */

  .hero{
    min-height:85vh;
    padding:120px 20px 70px;
    text-align:center;
  }

  .hero-bg{

    top:0;
    left:0;
    right:auto;

    width:100%;
    height:100%;

    background-image:
    linear-gradient(
      rgba(255,255,255,.55),
      rgba(255,255,255,.55)
    ),
    url("https://mahora-corp.com/wp-content/uploads/2026/05/fv.png");

    background-size:cover;
    background-position:center;
  }

  .hero-title{
    font-size:42px;
  }

  .hero-text{
    font-size:16px;
  }

  .hero-btn{
    width:100%;
    box-sizing:border-box;
    text-align:center;
  }

  /* =====================
  SERVICE
  ===================== */

  .service{
    padding:80px 20px;
  }

  .service-inner{
    grid-template-columns:1fr;
    gap:20px;
  }

  .service-card h3{
    font-size:28px;
  }

  /* =====================
  ABOUT
  ===================== */

  .about{
    padding:80px 20px;
  }

  .about-inner{
    grid-template-columns:1fr;
    gap:30px;
  }

  .about h2{
    font-size:34px;
  }

  /* =====================
  NEWS
  ===================== */

  .news{
    padding:80px 20px;
  }

  .news h2{
    font-size:34px;
  }

  .news-item{
    flex-direction:column;
    gap:10px;
  }

  /* =====================
  SINGLE
  ===================== */

  .single-main{
    padding:120px 20px 80px;
  }

  .single-title{
    font-size:30px;
  }

  .single-content h2{
    font-size:26px;
  }

  .single-content h3{
    font-size:22px;
  }

}