/* mobile.css */
@layer responsive.mobile {
  @media (max-width: 768px) {

  footer .p-nav_link {
    color: #000;
    padding: 10px;
  }
	.info_news {
	  margin: 2em auto;
	  padding: 2em;
	  font-size: .8em;
	  background: #fff;
	}

    /* === 1) モバイル用トークン上書き（全UIが自然に縮む） === */
    :root{
      --fs-sm:12px; --fs-md:14px; --fs-lg:16px; --fs-2xl:18px;
      --h-45:40px; --h-50:42px;
      --radius-sm:.4rem;
    }

    /* === 2) ナビ（オーバーレイ） === */
    .p-header_hamburger{display:block; position:fixed; top:0; left:0; width:50px; height:50px; z-index:100}
    .p-header_nav{
      position:fixed; inset:0; background:var(--brand);
      display:flex; align-items:flex-start; justify-content:center;
      opacity:0; pointer-events:none; transform:translateX(-100%);
      transition:transform .3s ease, opacity .3s ease; z-index:10;
    }
    .p-header_nav.is-active{opacity:1; pointer-events:auto; transform:translateX(0)}
    .p-nav_list{flex-direction:column; gap:1rem; margin:0; padding:0; font-size:var(--fs-md)}

    /* === 3) フォーム：1カラム化 === */
    .form-row, .form-row-3{grid-template-columns:1fr; gap:.5rem}
    .label{justify-content:flex-start}

    /* === 4) サイドメニュー === */
    .side-menu{
      position:fixed; top:140px; left:3%;
      width:95%; max-width:400px; height:83vh; overflow:auto;
      transform:translateX(-100%); transition:transform .3s;
      visibility:hidden; pointer-events:none; background:var(--brand); z-index:1000;
    }
    .side-menu.active{transform:translateX(0); visibility:visible; pointer-events:auto}

    /* === 5) よく使う UI のモバイル縮尺 === */
    .button-position,.button-position_sub{
      width:28%; height:36px; font-size:12px; padding:8px 12px; margin-top:.8rem;
    }
    .button-position_userinfo{width:200px; height:44px; font-size:14px}

    /* 入力の最大幅をデバイス幅に寄せる（任意） */
    .input--xl,.input--lg,.input--md,.input--sm{max-width:100%}

    /* 単位つき入力の並び間隔が詰まりすぎないよう補正 */
    .input-group{gap:0}

     /* 大きめの自由入力欄 */
  .limited-textbox{
    width:380px; height:500px; padding:10px; font-size:12px; border:1px solid #ccc; border-radius:20px; resize:vertical; line-height:1.6; box-sizing:border-box;
  }
  .head-label{font-size:12px;}

  .input-group-text {font-size: 10px !important;padding: 0.25rem 0.5rem !important; height:30px !important;}
  .form-control.col-2{width:50px !important;}
  .form-control{font-size: 10px !important;}

  .unit_center{font-size:10px;}

  .text-nowrap{font-size:12px;}

  .unit_center{display: block; white-space: normal !important; word-wrap: break-word; max-width: 100%;}

  .etc-textbox{ width:360px; height:200px; font-size:10px !important;}

  .section-line-blue{margin-top: 15px;}

  .input-group {height:30px;}

  .input-group .form-control.col-1{width:100px !important;}

  .btn.btn-light.b_frame{ font-size: 10px !important; padding: 2px 6px !important; line-height: 1.2;}

  .input-group + .pad-1em {display: block;margin-top: 1em;}

  .page-hero.hero-bar{
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    row-gap: .5rem;
  }
  .hero-bar .step_title_sub{
    grid-column: 1 / -1;  /* 1行目いっぱいを中央表示 */
    justify-self: center;
  }
  .hero-bar .hero-logout{
    grid-column: 2;       /* 2行目の右端 */
    justify-self: end;
  }

  }
}