@media (max-width: 850px) {
	
	body {
		min-width:360px !important;
	}
	
  /******** トップページ ********/
    /* 1. レイアウト全体を縦並びから、背景の上に重なる構成に変更 */
    .toppage-layout {
        position: relative;
        /*flex-direction: column;*/
        /*height: 100vh;*/
        min-height: 100dvh;
        width: 100vw;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        justify-content: center; /* フォームを上下中央に */
         /*align-items: center;     フォームを左右中央に */
        align-items: flex-start;
        padding: 40px 0;
        box-sizing: border-box;
    }

    /* 2. 左側の画像エリアを画面いっぱいの背景に回す */
    .toppage-left {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        justify-content: flex-start; 
        align-items: center;             
    }
    .toppage-left img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 画面比率に合わせて画像をトリミング */
    }
    /* 3. 右側のフォームエリアを背景の上に浮かせる */
    .toppage-right {
        position: relative;
        z-index: 2; /* 背景画像より上に表示 */
        width: 90%;  /* 左右にマージンを持たせる */
        max-width: 360px; /* PC版のコンテンツ幅に合わせる */
        padding: 24px;
        /*background: rgba(255, 255, 255, 0.95);  白背景。少し透かすとおしゃれです */
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        flex: none;      /* PC版のflex設定をリセット */
        align-self: center;
        margin: auto 0;
        height: auto !important;
    }
    .toppage-right.ver02 {
        position: relative;
        flex: none; 
        align-self: center;
    	border: none;
    	width: 90%;
    	max-width: 360px;
    	padding: 24px !important;
    	margin-top: 0px !important;
    	gap: 24px;
    }

    /* 4. 内部要素の幅を100%にしてセンター揃えを維持 */
    .toppage-right-content,
    .toppage-right__button,
    .toppage-right__button2 {
        width: 100% !important;
    }

    /* 5. ロゴや入力項目のマージン調整 */
    .toppage-right img {
        max-width: 80%; /* スマホサイズでロゴが大きすぎないように */
        height: auto;
        margin-bottom: 12px;
    }

    /******** ヘッダー ********/
    .header {
      background-color: var(--color-background-white);
      min-width: 100%;
      /*padding: 8px 16px;*/
      padding:0px !important;
      flex-wrap: wrap;
      gap: 0px !important;
    }
    
   .header__top-group-sp {
		display: flex !important;
    	justify-content: space-between;
    	align-items: center;
    	width: 100%;
    	padding: 12px 16px;		
	}
	.header__bootom-group-sp {
		display: flex !important;
		width: 100%;
		padding: 4px 8px;
		background-color: var(--color-background-sidebar);
		
		font-family: "Noto Sans JP";
		font-size: 14px;
		font-style: normal;
		font-weight: 600;
		line-height: 142%;
	}

    .header__menu {
        display: none;
    }
    .header__buttons {
        display: none;
    }

    .header__buttons-sp {
      display: flex;
      gap: 16px;
    }

    .header__buttons-sp-button {
      background: var(--color-background-white);
      border: 1px solid var(--color-border-primary);
      border-radius: 8px;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .header__buttons-sp-button:hover {
      background: var(--color-background-hover-light);
    }
    .header__buttons-sp-button--cart {
      position: relative;
      background: var(--color-accent);
      border: 1px solid var(--color-accent);
    }
    .header__buttons-sp-button--cart:hover {
      background: var(--color-accent-hover);
      border: 1px solid var(--color-accent-hover);
    }
    .header__buttons-sp-button--cart::after {
      content: "1";
      position: absolute;
      top: -7px;
      right: -7px;
      width: 16px;
      height: 16px;
      padding: 2px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #32383E;
      color: #fff;
      font-weight: bold;
      font-size: 12px;
      border-radius: 999px;
      pointer-events: none;
    }

    /******** メニュー ********/
    .header__menu-container-inner {
    width: 100%;
    container: none;
}
    /* 1. モバイル時のメニューの基本スタイル（右から出てくる設定） */
    .header__menu {
        display: flex; /* noneを解除 */
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;   /* メニューの幅 */
        height: 100dvh;
        overflow-y: hidden;
        background-color: var(--color-background-white);
        flex-direction: column; /* 縦並び */
        padding: 60px 20px;
        z-index: 200;
        transition: transform 0.3s ease; /* アニメーション */
        transform: translateX(100%);
        margin: 0;
    }
    .header__menu-scroll-container{
       display: block;
       width: 100%;
       /* 画面の高さから、ヘッダーや閉じるボタンの分（例: 80px）を引いた値を最大にする */
       max-height: calc(100dvh - 80px); 
       overflow-y: auto !important;
       -webkit-overflow-scrolling: touch; /* iOS用 */
    }
    .header__menu-scroll-container::-webkit-scrollbar {
       display: none;
    }

    /* 表示状態のクラス */
    .header__menu.is-open {
         transform: translateX(0);
    }

    /*  各メニュー項目のスタイル調整 */
    /*  親要素（メニューボタン）の設定 */
    .header__menu-item {
       display: block !important;     /* flexを解除し、縦積みのブロック要素にする */
       width: 100% !important;
       height: auto !important;       /* 固定の32pxを解除して「自動」にする */
       min-height: 50px !important;   /* 最低限の高さだけ保持 */
       padding: 0 !important;         /* 内部の余白をリセット（背景を端まで塗るため） */
       position: relative;
       z-index: auto !important;
       border-right: none !important;
       text-align: left;
     }
    .header__menu-item-text-wrapper {
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .header__menu-item:hover .header__menu-item-list {
        display: none !important;
    }
    .header__menu-item, 
    .header__menu-item:hover, 
    .header__menu-item--active:hover {
      background: transparent !important;
    }
    .header__menu-item.is-open .header__menu-item-list {
        display: flex !important;
        position: static !important; /* 縦に並べるならstatic、浮かせるならabsolute */
        width: 100% !important;
    }
    .header__menu-item {
        cursor: pointer;
    }
    .header__menu-item.is-open .header__menu-item-title-sp img:last-child {
        transform: rotate(180deg);
    }

    .header__menu-item--active {
      height: auto !important;
      max-height: none !important;
      /*background: transparent;*/
    }

    .header__menu-item-title-sp{
        display: flex;
        width: 100%;
        min-height: 40px;
        padding: 4px 16px;
        align-items: center;
        gap: 8px;
        align-self: stretch;
        border-radius: var(--radius-md, 8px);
        background: var(--btn_icon_text-disable_bg, #F0F4F8);
        position: relative;
        z-index: 2;
     }
    .header__menu-item-title-sp img:last-child {
      margin-left: auto;
    }

    .header__menu-item--active .header__menu-item-title-sp{
       background: var(--primary-plain-ActiveBg, #C7DFF7)!important;
       color: var(--primary-plain-Color, #095DB1);
    }

    .header__menu-item--active .header__menu-item-title-sp img{
       filter: brightness(0) saturate(100%) invert(21%) sepia(100%) saturate(1914%) hue-rotate(190deg) brightness(92%) contrast(101%);
    }
    /* ヘッダーメニューアイコンの復活*/
    .header__menu-item-icon {
        display: block !important; /* !important をつけることでコンテナクエリの設定を打ち消します */
        filter: brightness(0) saturate(100%) invert(39%) sepia(8%) saturate(718%) hue-rotate(175deg) brightness(93%) contrast(88%) !important;
        width: 20px;
        height: 20px;
    }
    .header__menu-item-title-sp {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* ドロップダウン（子メニュー）の調整 */
    .header__menu-item-list {
        display: none;    /* JSでクリックして開くようにするならここを調整 */
        padding-left:24px !important;
        padding-top:8px !important;
        padding-bottom:8px !important;
        width: 100% !important;
        box-shadow: none !important;
        position: static !important;
        max-height: none!important;
        border-radius: 0 !important;
        flex-direction: column;
        gap: 8px;
    }

    .header__menu-item.is-open:hover .header__menu-item-list {
      display: flex !important;
    }
    /* 子メニュー内の各項目（li）のスタイル */
    .header__menu-item-list li {
        width: 100% !important;
        display: flex;
        padding: 0px;
        align-items: center;
        gap: 8px;
        align-self: stretch;
        border-radius: 8px;
        background: var(--btn_icon_text-disable_bg, #F0F4F8);
    }

    .header__menu-item-list li a {
      display: block;
      width: 100%;
      padding: 12px 16px !important; /* 押しやすいように内側に余白 */
      background: #F0F4F8; /* キャプチャのような薄いグレー */
      border-radius: 8px;   /* 角丸 */
      text-decoration: none;
      color: var(--color-text-primary);
      box-sizing: border-box;
    }

    .header__menu-item-list li a:hover {
      background: var(--btn_icon_text-blue, #095DB1);
      color: var(--btn_icon_text-white, #FFF);
    }

    .header__menu-item-list li.header__menu-item-list--active,
    .header__menu-item-list li.header__menu-item-list--active a {
        background-color: var(--color-primary) !important;
        color: var(--color-text-white) !important;
    }
    .header__menu-item-list li.header__menu-item-list--active a div {
        color: var(--color-text-white) !important;
    }
    .header__menu-item-list li.header__menu-item-list--active:hover,
    .header__menu-item-list li.header__menu-item-list--active a:hover {
        background-color: var(--color-primary-hover) !important;
    }      

   /* オーバーレイの表示制御 */
    #menu-overlay-sp.is-visible{
      display: block;
      opacity: 1;
      visibility: visible;
      z-index: 90;
    }

    /* 閉じるボタン*/
    .header__menu-close-sp {
      display: block !important;
      position: absolute;
      top: 10px;
      right: 10px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 10px;
      z-index: 210;
    }
    .header__menu.is-open .header__menu-close-sp {
      display: block;
    }
    .header__menu-close-sp:hover {
      opacity: 0.8;
    }

    /* ユーザーボタン*/
    .header__buttons-item--sp-user {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 210;
        display: block !important; 
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        width: auto;
        min-width: 140px;
    }
    .header__buttons-item--sp-user .header__menu-item-title-sp {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 10px; /* タップ領域 */
        background: #FFF;
        border-radius: 8px;
    }
    /* ユーザー名のテキストが長すぎる場合の調整 */
    .header__buttons-item--sp-user .user-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--primary-plain-Color, #095DB1);
    }


    /*フッターボタン*/
    /* リンク項目（.header__menu-item）の表示 */
    div.header__menu-item.is-sp-only::before {
      content: "";
      display: block;
      height: 16px; /* ログアウトボタンのpadding-topと同じ値 */
      width: 100%;
      border-top: 1px solid var(--color-border-light, #DDE7EE);
      margin-top: 16px;
    }

    /* ログアウトボタンの表示 */
    .header__menu-logout-sp.is-sp-only {
      display: block !important; 
      margin-top: 16px;
      padding-top:16px;
      border-top: 1px solid var(--color-border-light, #DDE7EE);   
    }

    /* ログアウトボタンの中身（前回作成したスタイル） */
    .logout-button-inner {
        display: flex;
        width: 100%;
        min-height: 40px;
        padding: 4px 16px;
        justify-content: space-between;
        align-items: center;
        text-decoration: none;
        color: var(--color-text-primary, #171A1C);
        background: #FFF;
        border: 1px solid var(--color-border-primary, #555E68);
        border-radius: 8px;
        font-weight: 600;
        box-sizing: border-box;
    }

    /* ********** ナビゲーション ********** */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100dvh;
      margin: 0;
      border-radius: 0;
      transform: translateX(-100%);
      transition: transform 0.3s ease-in-out;
      z-index: 15; /* overlayより下、headerより上 */
    }

    .navbar.open {
      transform: translateX(0);
      width: 100%;
      margin: 0;
    }

    .navbar__area {
      position: fixed;
      top: 16px;
      left: 16px;
      z-index: 11; /* headerより少し上 */
    }

    .navbar__toggle {
     display: none;
    }

    /* モバイルではプレースホルダーを無効化 */
    .navbar__placeholder {
      display: none;
    }

    /******** モーダル ********/

    /* モーダルダイアログ */
    .modal__container,
    .modal__container-wide{
      min-width: 100% !important;
      min-height: 100% !important;
      width: 100%;
      height:100%;
      padding: 0px !important;
    }
    .modal__content {
      padding: 0px !important;
    }

    /*ヘッダー（非表示） */
    .modal__content .modal__main__top{
      display:none !important;
    }
    
    .modal__content__top {
  		border-bottom:none !important;
	}

    /*ボタン表示 */
    .modal__search {
        flex-direction: column !important; /* フォームとボタンを縦に並べる */
        align-items: stretch !important;
        padding: 8px 16px !important;
    }
    .modal__search__action-button {
        width: 100% !important;
        padding: 8px 0 !important;
    }
    .modal__search__action-button .button{
        max-width: none !important;
        width: 100% !important;
        flex: 0 0 100%; 
    }
    
    .modal__footer {
        padding: 16px !important;
        display: flex !important;
        justify-content: flex-end !important;
    }
    .modal__footer__action-button {
        flex: initial !important;
        /*width: 50% !important;
        display: block !important;*/
        width: 100% !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 8px;
        
    }
    .modal__footer__action-button .button {
        /*width: 100% !important;*/
        max-width: none !important;
        width: 50% !important;
        flex: 0 0 50%; 
    }


    /******** レイアウト ********/

    .layout{
      margin: 8px 16px 8px 16px;
      gap:0px;
    }

    /******** メインエリア ********/
    .layout__main {
      min-width: 100%;
      height:calc(100dvh - 110px);
      overflow-y:auto;
      gap: 4px;
    }

    /******** コンテンツヘッダーエリア ********/
   .content__header {
        height: auto; 
        flex-shrink: 0;
        gap: 8px;
    }
    
	.content__header .header__close-sp {
    	display: block !important; 
  	}
	.header__close-sp button{
    	background: transparent;
    	border: none;
    	cursor: pointer;
    	padding: 10px;
  	}
	.header__close-sp img{
    	width:30px;
    	height:30px;
  	}
    .content__top{
      width: 100%;
       padding:8px 0px;
    }

    .content__title:has(.count-text){
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap:0px;
      padding: 0px 4px 0px 0px;  
    }
    
    /*件数表示の切替*/
    .count-text{
		font-size: 11px;
	}
     .count-text-warning.nomal{
		display: none !important;
	}
	 .count-text-warning.mobile{
	 	display: inline !important;
		color: var(--color-text-secondary);
		font-size: 13px;
		font-weight: 400;
    }
	   
    /*タイトル文字の切替*/
    .title-text.nomal{
		display: none !important;
	}
    .title-text.mobile{
  		display: inline !important;
    	font-size: 16px;      /* 文字を小さくする */
    	white-space: normal;  /* 改行を許可する */
    	line-height: 1.4;     /* 改行時の行間を調整 */ 
    }
    
    .header-subtitle__label.nomal{
		display: none !important;
	}
    .header-subtitle__label.mobile{
  		display: inline !important;
    	font-weight: 600;
		line-height: 142%;
    }
    
    
    /*タイトル文字 切替無し*/
    .title-text {
    	font-size: 16px;      /* 文字を小さくする */
    	white-space: normal;  /* 改行を許可する */
    	line-height: 1.4;     /* 改行時の行間を調整 */      
  	}
    
    .cart_view-text{
      display: none;
    }

	/*アイコン＆カートボタン*/
	.content__controls {
  		gap: 4px; 
	}
	.view-btns-sp{
      display: flex;
      gap: 4px;
    }	
    .content__top .content__controls .cart-relative-container{
      padding: 0px 2px 0px 10px;
    }
    
	/* src属性に "download.svg" という文字列が含まれている img タグのみ非表示 */
    .content__top .content__controls .button img[src*="download.svg"] {
        display: none !important;
    } 
    .cart-badge-position{
 		 top: -7px !important;      /* ボタンの上端から少し上にずらす */
 		 right: -5px !important;    /* ボタンの右端から少し右にずらす */
  		 width: 20px !important;   /* バッジの幅 */
  		 height: 20px !important;  /* バッジの高さ */       
    }  
 
     /*アイコン*/
    .view-btns {
  		gap:4px;
    }
    .view-btn {
  		padding: 6px 8px 3px 8px;
    }   

    .content__second{
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: auto;
      padding: 4px 0;
      gap:4px;
    }

    .content__pagination{
      /*display: none;*/
    }

    .content__second .content__controls{
      width: 100%;
      justify-content: center;
      align-items: center;
    }

    .content__segmented-control{
      display: none;
    }
    .content__second .view-btns{
      display: none;
    }
    .vertical-separator.hidden-mobile{
      display: none;
    }

    .sort-select-field{
      display: flex;
      justify-content: center;
      width: 100%;
    }
    .sort-select-field__container {
      position: relative;
      width: 90%;
      margin: 0 auto;
    }
    
    /******** ボタン ********/    
    
    /*文字の切替*/
    .button_nomal-text{
		display: none !important;
	}
    .button_mobile-text{
  		display: inline !important;
    	white-space: nowrap; /* テキストの折り返しを防ぐ */
    }
    
    .action-button-group{
    	width: 100% !important; /* スマホでは横いっぱいに広げる */
    	flex-direction: column;
    	align-items: normal;
    }
    .action-button-group .button--action {
    	max-width: none !important;
    	width: 100% !important;
    }
    
     /******** ページリンク ********/
     .number-button {
    	padding: 8px 6px !important;
	}
	.icon-button {
		min-width: 30px;
	}
	 .pagination-container {
	 	 gap: 4px;
	 }
	
    /******** セレクタ― ********/
	div.field-input-wrapper.select2_length {
  		width: 100% !important;
  		min-width: 0 !important;
	}
	 .multiselect-field .select2-selection__choice {
   		max-width: 270px !important;
   		overflow: hidden !important;
   		white-space: nowrap !important;
 	}	
 	.navbar .multiselect-field .select2-selection__choice {
   		max-width: 300px !important;
 	}
 	
 	.multiselect-field .select2-results__option {
   		display: block !important;         
  		max-width: 270px !important;     
  		overflow: hidden !important;        
  		text-overflow: ellipsis !important;  
  		white-space: nowrap !important;    
 	}	
 	.navbar .multiselect-field .select2-results__option {
   		max-width: 300px !important;
 	}		
	
    /******** コンテンツ データーエリア ********/
    .content__data_area {
        /* height: calc(100dvh - 160px);
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 20px;*/
       	overflow-y: visible !important;
       	paddng:0px 0px;
        
    }
 /*   
    
    :has(> .content__header .content__second) .content__data_area {
        height: calc(100dvh - 240px);
    }
    :has(> .content__header .content__second):has(.view-btns) .content__data_area {
        height: calc(100dvh - 280px);
    }
    :has(> .content__header .step-list) .content__data_area {
        height: calc(100dvh - 240px);
    }
    :has(> .content__header .completion-message) .content__data_area {
        height: calc(100dvh - 330px);
    }
 */  
    /******** リストエリア ********/
    .content__list.natural-width {
        width: 100% !important; /* スマホでは横いっぱいに広げる */
    }

    /******** カード＆リストエリア ********/
    .content__cards {
      height: auto !important;
      overflow: visible !important;
      padding: 0px;
    }
  
   .cards-list .card {
      min-width: 0 !important;
      display: block;
      width: 100%;
      margin-left: 0;
      padding: 8px 8px;
    }

    .card-title {
      margin: 8px 0;
      max-width: 100%;
    }

    .cards-box .card {
      /*display: block;*/
      display: flex !important;
      flex-direction: column;
      /*width: 47%;*/
      width: 100%;/*20260209 zono upd*/
      height: auto;
    }

    /***リスト***/
    .cards-list .product-header-wrapper-sp{
      display: flex;
      gap: 12px;
      align-items: flex-start;
      width: 100%;
    }

    .cards-list .product-image {
      flex: 0 0 48px;
      height: 48px;
      min-width: 48px;
      display: block;
    }

    .cards-list .product-details-group-sp{
      display: block;
      flex: 1;
      min-width: 0;
    }

    /**画像**/
    .cards-list .product-image img{
      width: 48px;
      height: 48px;
	  object-fit: contain;
	  aspect-ratio: 17/24;
    }
    .no-image-text {
      display: none;
    }

    .cards-list .product-header {
      display: block;
      height: auto;
    }

    /**商品名**/
    .cards-list .card-title {
      margin: 0px;
    }

    /**備考**/
    .cards-list .product-note {
      display: none;
    }

     /**詳細・依頼数入力エリア**/
    .cards-list .product-actions {
      min-height: 42px;
    }
    .cards-list .add-to-cart {
      /*margin-top: 0;*/
      display: flex;             /* flexboxを有効化 */
      justify-content: flex-start; 
      align-items: center;       /* 上下の中央を揃える */
      gap: 12px;                  /* 入力欄とボタンの間の隙間 */
      width: 100%;               /* 親要素の幅いっぱいに広げる */
      margin-top: 0;
    }

    /**依頼数入力**/
    .cards-list .item__suryo-change-box,
    .cards-list .quantity-control {
      justify-content: space-between;
      width: 50%;
      background: var(--background-surface, #FBFCFE);
    }

    /*** カード***/
    .cards-box .product-details-group-sp{
      display: flex !important; /* blockからflexに変更 */
      flex-direction: column;
      flex: 1;
      min-width: 0;
    }
    
      .cards-box .product-details{
      margin: 6px 0px;
      grid-template-columns: 80px 1fr;
    }
    
    /**画像**/
    .cards-box .product-image {
      width: 100%;
      height: 120px; 
    }

    .cards-box .product-image img{
      width: 100%;
      object-fit: cover;
    }
    
    /**商品情報**/
    .cards-box .product-header{
      display: flex;
      flex-direction: column;
      flex: 1; /* 内部でも高さを一杯に広げる */
    }
    
     .cards-box .divider-horizontal {
      margin: 8px 0;
    }
    
    /**備考**/
    .cards-box .product-note {
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
      min-height: 50px;
    }

    .cards-box .product-note p {
      line-clamp: 4;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
      font-size: 12px;
    }

    /**カートに入れるボタン**/
    .cards-box .add-to-cart {
      /*display: block;*//*20260209 zono upd*/
      width: 100%;
      display: flex;/*20260209 zono upd*/
      justify-content: flex-start;/*20260209 zono upd*/
      align-items: center;/*20260209 zono upd*/
    }
     /**依頼数入力**/
    .cards-box .item__suryo-change-box,
    .cards-box .quantity-control {
      justify-content: space-between;
      width: 100%;
      background: var(--background-surface, #FBFCFE);
    }

    /**詳細・依頼数入力エリア**/
    .cards-box .product-actions {
      margin-top: auto;
      width: 100%;
      padding-top: 0px;
    }

    .cards-box .product-header-wrapper-sp,
    .cards-box .product-details-group-sp {
        width: 100%;
    }
    
    /***カード＆リスト共通***/

    /**アイコン**/
    .icon-display {
      display: none;
    }

    /**商品詳細情報**/
    .product-info {
      margin: 8px 0;
    }
    .product-info p {
      display: none;
    }   
    /*表示したい項目を指定する*/
    .product-info .mobile-view {
      display: contents;
    }

    /**詳細ボタン**/
    .details-btn-bef {
      display: none;
    }
    .details-btn {
      display: none;
    }

    /**カートボタン**/
     .cart-btn {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 16px 4px;
    }
    .cards-box .cart-btn {
      /*margin-top: 10px;*//*20260209 zono upd*/
      width: 100%;
    }
    .cart-btn span {
      font-size: 14px;
      display: inline;
    }

    /******** モーダル ********/
	.modal__header .header__modal-close-sp {
    	display: block !important; 
  	}
	.header__modal-close-sp button{
    	background: transparent;
    	border: none;
    	cursor: pointer;
    	padding: 10px;
  	}
	.header__modal-close-sp img{
    	width:30px;
    	height:30px;
  	}  	
  	
    .modal__search {
        flex-direction: column;
        align-items: stretch;
    }
    .modal__input-row-group {
        flex-direction: column;
        gap: 12px; /* 項目間の余白 */
    }
    /* 各入力フィールドの最小幅設定を解除して100%にする */
    .modal__input-row-group .modal__input-field {
        min-width: 100%;
    }
    .modal__input-field .field-input-wrapper {
        gap: 8px;
    }
    .modal__input-field .field-label-wrapper.hidden-mobile {
        display: none !important;
    }

    .modal__search__action-button {
        width: 100%;
        justify-content: center; /* ボタンを中央に配置する場合 */
        padding-top: 8px;
    }
    
    .modal__content__controls {
   		display: none !important; 
	} 
    
    /* 組織選択ボタン */
    .modal__search__soshiki-action-buttons-sp {
		display: flex !important;      /* blockからflexに変更 */
        flex-direction: column;        /* ボタンを縦並びにする */
        gap: 8px;                      /* ボタン同士の上下の隙間 */
        width: 100% !important;
        padding-bottom: 12px;          /* 下の入力項目との余白 */
  	}
  	.modal__search__soshiki-action-buttons-sp .button {
        width: 100% !important;
        margin: 0 !important;          /* 左右の余白をリセット */
        flex: none !important;         /* 親の幅に従わせる */
    }

    
    /******** モーダル(割当詳細画面） ********/
/* 1. 親要素を横並びにする */
    .modal__shohin {
        display: flex !important;
        flex-direction: column !important; 
        align-items: stretch !important;
        gap: 12px !important; /* 画像とテキストの間の隙間 */
        width: 100% !important;
        padding: 8px !important;
    }

    /* 2. 画像エリアの設定 */
    .modal__shohin .product-image {
        flex: 0 0 40% !important; /* 画像を横幅の40%に固定（お好みで調整可能） */
        height: auto !important; /* 高さを自動にして比率を保つ */
        min-width: 100px !important;
        background-color: var(--color-background-main) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* 画像自体のサイズ調整 */
    .modal__shohin .product-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* 枠内で全体が見えるように配置 */
        max-height: 150px !important; /* 高くなりすぎないよう制限 */
    }


    /******** 出荷パネル ********/
    /* 出荷リストと右側パネルの横並びを縦並びにする */
    .shukka__layout {
        flex-direction: column;
    }
    
    /*** 出荷リスト ***/
    .panel.detail-panel_shuka-list{
      background: transparent !important;
      box-shadow: none !important;
      padding: 0 !important;
      gap: 0px !important;
    }
    .detail-panel_shuka-list .panel-header-section .header-indicator,
    .detail-panel_shuka-list .panel-header-section .header-text-group{
      display: none !important;
    }

    /*** 出荷リスト ヘッダー ***/
    .detail-fields-group-shukka{
      gap: 0px;
    }
    .list__shukka__header-group {
        display: flex !important;
        flex-wrap: wrap;    /* 折り返しを許可 */
        gap: 8px;           /* ボタン間の隙間 */
        width: 100%;
        justify-content: space-between !important;
        padding: 8px 0px !important;
    }
    .list__shukka__footer__button__area {
        padding:8px 16px !important;
    }
    .list__shukka__footer__button__area .button {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content:center !important;
        text-align:center !important;
    }

	/* 既存のnth-child(1)等の全幅指定が袋詰めボタンに効かないようにする */
    .fukuro-item:nth-child(n) {
    flex: 1 1 0 !important;
    }
    /** 共通設定 **/
    .list__shukka__header {
        flex: 1 1 calc(50% - 4px); /* 50%を基準にしつつ、要素が1つなら100%になる設定 */
        min-width: 0;
    }
    /* 要素が1個だけの時：幅を50%に固定する */
    /* :first-child かつ :last-child であれば「1個しか存在しない」と判定されます */
    .list__shukka__header:first-child:last-child {
        flex: 0 0 calc(50% - 4px); /* flex-growを0にして広がらないように固定 */
        max-width: calc(50% - 4px);
    }
    /* 要素が3つ以上ある時の1番目：全幅にする */
    .list__shukka__header:nth-child(1):nth-last-child(3) {
        flex: 1 0 100%;
    }
    /* 要素が2つしかない時の1番目と2番目：横並びにする */
    /* :nth-child(1):nth-last-child(2) は「2つ中の1番目」を指します */
    .list__shukka__header:nth-child(1):nth-last-child(2),
    .list__shukka__header:nth-child(2):nth-last-child(1) {
        flex: 1 1 calc(50% - 4px);
    }
    /* ボタン内部のスタイル調整（スマホで見やすくするため） */
    .list__shukka__header__info {
        min-width: 0 !important; /* 既存の240px指定を解除 */
        width: 100%;
        /*justify-content: center; /* 中央寄せ */
        padding: 0 4px; /* 余白を少し詰めて横並びしやすくする */
    }

    /*ヘッダー内にある袋詰め解除のボタンは非表示にする*/
    .list__shukka__header-group #fukurodumeCancel,
    .list__shukka__header-group .unbagging-button {
      display: none !important;
    }
    /* 袋詰め依頼数エリア */
    .panel-header:has(.item__suryo-fukurodume) {
      background-color: var(--color-background-white);
      padding: 12px !important;
      border-radius: 8px 8px 0 0 !important;
    }
    
    /* マイアドレス エリア */
	.field-input-wrapper.is-address-regist-area-sp {
    	flex-direction: column !important;
    	align-items: stretch !important;
	}    
    
    /*** 貸出リスト ***/
	.panel.detail-panel_kasidasi-list{
		gap:0px !important;
    }
    /*** 貸出リスト ヘッダー ***/ 
    .panel.detail-panel_kasidasi-list .list__shukka__header-group {
      justify-content: flex-start !important;  
      flex-wrap: wrap !important;  
    }
    .panel.detail-panel_kasidasi-list .list__shukka__header-group .header-subtitle__label {
        flex: 0 0 100% !important; /* 幅100%を確保 */
        width: 100% !important;
        margin-bottom: 0px;
    }
    .label-wrapper-row{
    	padding-top:8px;
    }
    .panel.detail-panel_kasidasi-list .list__shukka__header-group .label-wrapper-row .header-subtitle__label {
        width: auto !important;
        flex: 0 0 auto !important;
    }    
    .panel.detail-panel_kasidasi-list .list__shukka__header-group .date-field.flatpickr {
        flex: 1 1 calc(50% - 15px) !important; /* 画面幅の約半分を確保 */
        max-width: 140px !important; /* 広がりすぎ防止 */
    }   
    .panel.detail-panel_kasidasi-list .list__shukka__header-group .button {
        justify-content:center !important;
        text-align:center !important;
        margin: 8px 16px !important;
    }
      .list__shukka__header-group .list__shukka__header.rental {
       		flex: 1 0 100% !important;
       		max-width: 100%; 
    }    

    /*** 出荷リスト アイテムエリア ***/
    .list__shukka__item-area{
      background: transparent !important;
      box-shadow: none !important;
    }

    /* 資材明細内の「画像」「名称」「項目群」「数量」の横並びを縦並びにする */
    .list__shukka__item {
        padding: 12px;
        gap: 8px;
        background: #fff;
        border-radius: 8px;
        margin-bottom: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border: 1px solid #DDE7EE;
        width: 100%;
        box-sizing: border-box;
    }
    /* 袋詰めの場合のデザイン*/
    .list__shukka__item-fukurodume .list__shukka__item{
        border-radius: 0px;
        margin-bottom: 0px;
        box-shadow: none;
        border:none;
        border-bottom: 1px solid #DDE7EE;
    }
    .list__shukka__item-fukurodume:last-child .list__shukka__item {
        border-bottom-right-radius: 8px; /* 右下 */
    }
    .fukurodume-naiyo-area {
      border-top: none; 
    }

    /*出荷入力画面のヘッダー情報*/
    .list__shukka__item .product-header-wrapper-sp{
      display: flex;
      gap: 12px;
      align-items: flex-start;
      width: 100%;
    }
    /* checkbox */
    .list__shukka__item .product-header-wrapper-sp input[type="checkbox"]{
      align-self: center;
    }
    
    /* img */
    .list__shukka__item .product-header-wrapper-sp .list__shukka__item-img {
      flex: 0 0 48px;
      height: 48px;
      min-width: 48px;
      display: flex !important;          
      justify-content: center !important; 
      align-items: center !important;
    }
    .list__shukka__item .product-details-group-sp{
      display: block;
      flex: 1;
      min-width: 0;
    }
    .list__shukka__item .product-details-group-sp .list__shukka__item-img img{
      width: 48px;
      height: 48px;
      object-fit: cover;
    }


    /**以下は出荷共通仕様**/
    /* img */
    .list__shukka__item-img {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
        /*float: left;  テキストを回り込ませる 
        margin-right: 12px;*/
    }

    .list__shukka__item-group-sp {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-grow: 1;
        min-width: 0;
    }
      
    /* 各情報ボックスの幅を100%にし、最小幅の制限を解除する */
    .shukka__info__box{
        width: 100%;
        min-width: 0;
        font-size: 14px;
        font-weight: 600;
        line-height: 142%;
    }

    /*詳細ボタンは非表示*/
    .shukka__info__box.shukka-info-head .list__shukka__button__area{
       display: none !important;
    }

    /* 親の中にある「出荷可能数以外（mobile-viewが付いていないもの）」を非表示にする */
    .shukka__info__box.shukka-info-box .shukka__data-field:not(.mobile-view),
    .shukka__info__box.shukka-info-box2 .shukka__data-field:not(.mobile-view) {
        display: none !important;
    }
    /* 出荷可能数（mobile-view）を表示する */
    .shukka__info__box.shukka-info-box .shukka__data-field.mobile-view,
    .shukka__info__box.shukka-info-box2 .shukka__data-field.mobile-view {
        display: flex !important; /* contentsよりflexの方がレイアウトが安定します */
        align-items: center;
        gap: 4px;
    }
    /* 区切り線は不要なので非表示のまま */
    .shukka__divider {
        display: none !important;
    } 

    /* 出荷依頼数エリア */
    .shukka__info__box.shukka-info-end {
        display: flex;
        flex-direction: row; /* 横並び */
        justify-content: space-between;
        align-items: baseline;
        width: 100%;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #f0f0f0;
        gap: 8px;
    }
    .shukka__info__box.shukka-info-end.view-sp {
    	width: 100% !important;
        display: block !important;
        padding-top: 8px;    
    }
	.shukka__info__box.view-sp .button.rental_yoyakuKanou_date {
        width: 100% !important;
        max-width: none !important; 
        min-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    .rental_yoyakuKanou_date {
    	-webkit-appearance: none; /* Safari特有のスタイルをリセット */
    	appearance: none;
   		color: inherit;           /* 親要素（.button）の文字色を強制継承 */
	}
    
    .shukka__irai {
        font-size: 12px;
        font-weight: 600;
        line-height: 166%;
    }
    .shukka__irai_su {
        width: auto;
        text-align: right;
    }
    .item__suryo-change-title{
      display: none !important;
    }

    /*依頼数入力*/
    .shukka__info__box.shukka-info-end {
      min-width: 0 !important;
      width: 100% !important;
      flex-wrap: nowrap;
      gap: 8px;
    }
    .item__suryo{
        width: 50% !important;
        align-items: center;
    }
    .item__suryo-fukurodume{
        width: 100% !important;
        justify-content: space-between;
        align-items: center;
    } 
    .item__suryo-change-box {
        width: 100%; 
        flex-shrink: 0;
    }
    .item__suryo-fukurodume .item__suryo-change-box {
        width: 50%; 
    }
    .suryo__box {
        flex: 0 0 60px; /* 入力欄を140pxで固定し、残りをボタンに割り振る設定（例） */
        box-shadow: none;
    }
   .cards-box .suryo__box {
        flex: 0 0 50px !important;
    }
    .cards-list .suryo__box {
        flex: 0 0 65px !important;
    }
   
    .item__delete-button {
        flex: 1;                     
        width: auto !important;      
        min-width: 0;                
      }

    /* 基本情報・届先情報などのパネル（1枚ずつ）を縦に並べる */
    .content__panels__shukka {
        width: 100%;
    }

    /* 合計金額エリアの幅をスマホサイズに合わせる */
    .list__shukka__footer {
        justify-content: center;
        padding: 8px 0px !important;
    }
    .total-shukka-value__box {
        width: 100%;
        border: none;
    }
     .panel.detail-panel_kasidasi-list .total-shukka-value__box {
        border: 1px solid var(--divider_dark, #9FA6AD);
    }   

    /** 出荷入力について「袋詰めに指定中」設定時は特殊スタイル **/
    /* panerlデザイン*/
     .list__shukka__item:has(.fukurodume-fukuro-shukka-input){
        border-radius: 0px;
        margin-bottom: 0px;
        border: solid 1px white;
        border-top: 1px solid var(--color-border-light);
        border-bottom: 1px solid var(--color-border-light);
    }

    /*サムネイル画像*/
    .list__shukka__item:has(.fukurodume-fukuro-shukka-input) .product-header-wrapper-sp .list__shukka__item-img {
        flex: 0 0 120px !important;
        width: 120px !important;
        height: 120px !important;
        min-width: 120px !important;
    }
    .list__shukka__item:has(.fukurodume-fukuro-shukka-input) .list__shukka__item-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover; /* 画像をアスペクト比を維持して枠いっぱいに表示 */
    }
    /*shukka-info-head項目特別表示*/
    .list__shukka__item:has(.fukurodume-fukuro-shukka-input) .fukurodume-fukuro_mobile-view {
        display: block !important;
        width: 100%;
        margin-top: 8px; /* 要素間の隙間調整 */
    }
    /*袋詰め設定解除ボタン特別表示*/
    .list__shukka__item:has(.fukurodume-fukuro-shukka-input) .fukurodume-fukuro_mobile-view {
        display: block !important;
    }
    .shukka-info-head .fukurodume-fukuro_mobile-view .unbagging-button {
        display: flex !important;
        width: 100%;
        justify-content: center;
    }

    /*info項目については全て非表示とする*/
    .list__shukka__item:has(.fukurodume-fukuro-shukka-input) .shukka__info__box .shukka__data-field {
        display: none !important;
    }
    
    /*フッターは削除*/
    .shukka-info-end:has(.fukurodume-fukuro-shukka-input) {
      display: none !important;
    }

    /** 出荷内容確認について「袋詰めに指定中」設定時は特殊スタイル **/
    /* panerlデザイン*/
     .list__shukka__item:has(.fukurodume-fukuro){
        border-radius: 8px 8px 0 0 !important;
        margin-bottom: 0px;
        border: solid 1px white;
        border-top: 1px solid var(--color-border-light);
        border-bottom: 1px solid var(--color-border-light);
    }
    /* 文字表示の切替（袋詰め） */
    .fukurodume_nomal-text{
      display: none !important;
    }
    .fukurodume_mobile-text{
      display: inline !important;
    }
    .list__shukka__item:has(.fukurodume-fukuro) .fukurodume-fukuro {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100%;
        text-align: center;
    }
  

  /******** ステッパー ********/
    /* ★条件：content__topの中に ol (step-list) が「存在する時だけ」適用 */
    .content__top:has(ol.step-list) {
       /* display: contents !important;*/
        display: flex !important;           /* contentsをflexに変更 */
        flex-direction: column !important;   /* 中身を縦に並べる */
        width: 100% !important;
        background-color:transparent !important;
        padding: 8px 0;
        border-radius: 8px;
        order: 0 !important;        
     }
    
     .completion-message {
        order: 1 !important;
        height: auto !important;
        flex-direction: column !important; /* 縦並びにする */
        gap: 12px !important;
        padding: 16px !important;
        align-items: stretch !important;    /* 子要素（wrapperとbutton）を横幅いっぱいに広げる */
    }
     .completion-message.h-auto {
     	gap: 4px !important;
     }    
    .completion-text-wrapper {
        display: block !important;          /* flexを解除してブロック要素に */
        width: 100% !important;
        text-align: left !important;         /* テキストを左寄せ */
    }
    .completion-text {
        display: block !important;
        text-align: left !important;         /* 念のためテキスト自体も左寄せ */
    }
    /* ボタンのスタイル（横幅いっぱい、または中央寄せを維持） */
    .completion-message .button-header {
        width: 100% !important;             /* スマホで押しやすいよう横幅いっぱいを推奨 */
        margin: 0 auto !important;           /* 中央寄せを維持 */
    }

   /* 2. タイトル行（ラインの土台）の設定 */
    .content__top:has(ol.step-list) .content__title {
        display: flex !important;
        position: relative !important; 
        background-color: var(--color-background-title) !important;
        width: 100% !important;
        /*min-height: 40px !important;  高さを明示的に確保 */
        padding: 8px 16px 8px 8px !important; /* ★左側の余白をライン分確保 */
        border-radius: 8px !important;
        order: 1; 
        align-items: center !important;
    }

    /* 3. 青いライン：タイトルの「中」に浮かせる */
    .content__top:has(ol.step-list) .result-indicator {
        display: block !important;
        /*position: absolute !important;
        left: 32px !important;         
        margin: 8px 4px 0px 4px !important;
        z-index: 2;*/
        position: static !important; 
        margin: 0px 0px 0px 8px !important;
        align-self: center !important;
        
        height: 100% !important;
        width: 4px !important;
        border-radius: 8px !important;
    }
    .content__top:has(ol.step-list) .title-text {
    	/*white-space: nowrap;*/
	}
    

   /* 4. ステップリスト（ステッパー）：2段目に配置 */
    .content__top:has(ol.step-list) .step-list {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        margin: 8px 0 0 0 !important; /* タイトルとの間に隙間を作る */
        padding: 0 8px !important;
        order: 2; /* ★2段目に配置 */
        gap: 0 !important;
    }

    /* ステップ各項目の設定：矢印デザイン（clip-path）を維持 */
    .content__top:has(ol.step-list) .step-list__item {
        /* ★clip-path: none !important; を削除 */
        /* ★width: 100% !important; を削除（PC同様flex:1で均等幅にする） */
        flex: 1 !important;
        margin: 0 -6px !important; /* ★PC版の重なり設定（margin: 0 -6px）を適用 */
        height: 32px !important;
    }

    /* ステップ内のテキスト：折り返しを防いでPCと同じ見た目にする */
    .content__top:has(ol.step-list) .step-list__text {
        white-space: nowrap !important;
        font-size: 12px !important; /* スマホで入り切らない場合は少し小さく調整 */
        padding: 4px 12px !important;
    }
    /* ステップ内のテキスト：文字表示の切替 */
    .step-list__nomal-text{
      display: none !important;
    }
    .step-list__mobile-text{
      display: inline !important;
    }
    
    /** 出荷依頼dialog用 **/
 	.ui-dialog {
		width: 330px !important;
		left:0px !important;
	}
	
    /** 出荷伝票番号エリア **/
 	.detail-fields-group__shukka-denpyou {
    	width: 100% !important;
 	}
 	.shukka-denpyou__List-header {
    	width: 100% !important;
 	}
   /******** パネル ********/
    .content__panels {
        display: flex !important;
        flex-direction: column !important; /* 縦並びにする */
        width:100%;
    }
	.panel.detail-panel{
    	flex: none !important;
    	height: auto !important;
    	min-height: -webkit-max-content;/* Safari互換 */
    	overflow: visible !important;
    	gap: 4px !important; 
	}
    /* パネルヘッダー */
    .panel-header {
        position: relative !important;
        flex-direction: column !important; /* 縦に並べる */
        height: auto !important;          /* 固定の高さを解除 */
        align-items: stretch !important;  /* ボタンを横幅いっぱいに広げる */
        gap: 8px !important;              /* ボタン間の隙間を調整 */
        padding: 8px 0 !important;
    }

    /* ヘッダー内のタイトルグループの調整 */
    .panel-header .header-text-group {
        width: 100% !important;
        margin-bottom: 8px !important;
        padding-left: 8px !important;
    }
    
	.header-text-group:has(.button, .button-action.title) {
        flex-direction: column !important; /* 横並びから縦並びへ */
        align-items: flex-start !important; /* 左寄せ */
        gap: 8px !important;               /* タイトルとボタンの隙間 */
        height: auto !important;
    }
    .header-text-group:has(.button, .button-action.title) .header-title {
        width: 100% !important;
        padding: 0 8px !important;
    }
    .header-text-group:has(.button) .button,
    .header-text-group:has(.button, .button-action.title) .button-action.title {
        width: 100% !important;           /* 画面幅いっぱいに */
        margin-left: 0 !important;        /* PC用の左余白をリセット */
        justify-content: center !important; /* テキストを中央寄せ */
    }    

    /* パネルヘッダー内のボタン調整 */
    .panel-header .button {
        width: 100% !important;           /* ボタンを横幅いっぱいにする */
        margin-left: 0 !important;        /* PC用の余白をリセット */
        justify-content: flex-start !important;
        text-align: left !important;         /* ボタン内のテキストを左寄せにする */
    }

    /* 青いインジケーター（縦線）が崩れないように調整 */
    .panel-header .header-indicator {
        position: absolute;
        height: 32px;
    }

  	/*  親要素を縦並びに変更 */
    .input-row-group {
        flex-direction: column !important; /* 縦並びを強制 */
        gap: 16px !important;              /* ブロック間の上下の隙間 */
    }

    /*  各ブロック（input-field）の横幅を100%にリセット */
    .input-row-group .input-field {
        width: 100% !important;
        flex-basis: auto !important;       /* PC版の横幅指定を解除 */
        min-width: 0 !important;           /* 意図しないはみ出しを防止 */
    }

    /*  特殊なクラス（fixed-3blockなど）の幅指定も解除 */
    .input-row-group .input-field.fixed-1block:not(.visible-mobile) ,
    .input-row-group .input-field.fixed-2block:not(.visible-mobile) ,
    .input-row-group .input-field.fixed-3block:not(.visible-mobile) ,
    .input-row-group .input-field.fixed-4block:not(.visible-mobile) {
        display: none !important;
    }
    
    .input-field .field-label-wrapper.hidden-mobile {
        display: none !important;
    }
    .input-field .field-input-wrapper.hidden-mobile {
        display: none !important;
    }
    
    /* ナビゲーションのアニメを一時的に無しにする */
	.no-transition {
	  transition: none !important;
	  }
	  
	 /* データ行（data-row-group）の縦並び化 */
	.data-row-group {
        flex-direction: column !important; /* 縦並びに変更 */
    }
    
    .data-row-group .data-field {
        width: 100% !important;
        flex-basis: auto !important; 
        min-width: 0 !important;
        display: flex !important;
        border-bottom: 1px solid var(--color-border-light) !important; 
    }
    .data-field.fixed-1block, 
    .data-field.fixed-2block, 
    .data-field.fixed-3block {
        display: none !important;
    }
    .field-label {
        width: 120px !important; 
        flex-shrink: 0;
    }
    .field-value-wrapper {
        flex: 1;
        min-width: 0;
    }
	 
	 /* クラスが付いた要素を消す */
	  .hide-on-mobile {
        display: none !important;
    }
    
	/******** コンテンツフッターーエリア ********/
	.content__footer__buttons {
        flex-direction: column; /* 横並びを解除して縦並びにする */
        width: 100%;            /* コンテナを横幅いっぱいに */
        gap: 12px;              /* ボタン同士の上下の隙間 */
    }

    /* 各ボタンを横幅いっぱいに広げる */
    .button--primary.button-footer {
        width: 100% !important; 
        max-width: none;
        flex: none; 
    }

    /* ナビゲーションがある場合のみ虫眼鏡ボタンを表示する（まずは強制的に非表示にする） */
    #search-button-mobile {
        display: none !important;
    }
    /* ナビゲーションがある場合のみ虫眼鏡ボタンを表示する（検索用のオーバーレイ(navbar-overlay)がHTML内に存在する場合のみ表示） */
    body:has(#navbar-overlay) #search-button-mobile {
        display: flex !important;
    }
    
    /** アップロード **/
 	.upload-iframe {
        height: 100px;
    }
    /**入稿パンくずエリア**/
 	.PANKUZU_OFF, 
    .PANKUZU_YAJIRUSHI {
        display: none;
    }
    /**入稿ステータス**/
   	.nyukou-status {
        display: none;
    }  
     /**チェックボックスエリア**/
	.checkbox-row {
        flex-direction: column; /* 縦並びに変更 */
        align-items: flex-start;  /* 必要に応じて左寄せに調整（centerを解除） */
    } 
    .checkbox.row-sp {
    	display: grid !important;
    	gap: 8px 10px;
    	grid-template-columns: auto 1fr;
    	align-items: start;
	}

	.checkbox.renkei-data {
        flex-wrap: wrap !important;
        gap: 8px 10px !important; 
        width: 100% !important;
    }	

 	.select-field.renkei-data-input {
        flex-basis: 100% !important;
        width: 100% !important;   /* 親の幅いっぱいに広げる */
        display: flex !important;
    }
    .select-field.renkei-data-input .select-field__container {
        width: 100% !important;
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important; 
    }
    .select-field.renkei-data-input select {
        flex: 1 !important;     
        min-width: 0 !important;  
        width:100% !important;
    }   	
	
     /**ラジオボタンエリア**/
     /* 1. 折り返しを許可し、高さを自動にする */
    .radio-row.wide {
        flex-wrap: wrap !important;
        height: auto !important;
        gap: 8px;
    }
    /* 2. 「移動元組織コード」ラベルから後ろを強制的に改行させる */
    .radio-row.wide .field-input-label:nth-of-type(1) {
        flex-basis: 100%; 
        margin-left: 20px;
    }
    /* 3. 入力欄とボタンを適切な幅にする */
    .radio-row.wide #soshiki-code-input {
        flex: 1; /* 入力欄を可能な限り広げる */
        min-width: 150px;
        margin-left: 20px;
    }
    .radio-row.wide .button-action {
        flex: 0 0 auto; /* ボタンは伸縮させない */
    }
    
	.radio-row:has(.breake-sp) {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .radio-row .input-content-row.breake-sp {
        flex: 0 0 100% !important; 
    } 
    
    .radio-row.mobile-column {
        flex-direction: column !important; /* 縦に並べる */
        align-items: flex-start !important; /* 左寄せにする */
    }
    
	.radio-row.soshin-date {
        flex-wrap: wrap !important;
        gap: 8px 10px !important; 
    }
        
    .radio-content.soshin-date-label {
		flex-basis: 100% !important;
        display: flex !important;
        align-items: center !important;
    }
	.radio-content.soshin-date-label .date-field.flatpickr {
        flex: 0 0 160px !important; /* 適切な幅に固定 */
        margin: 0 4px !important;
    }
   
    /**廃棄**/
    .field-input-wrapper:has(.helper-haiki-text-inline) {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .helper-haiki-text-inline {
        flex: 0 0 100% !important; /* 横幅を100%占有させる */
        display: block !important;
        margin-top: 4px;            /* ボタンとの上下間隔 */
        font-size: 13px;            /* スマホで見やすいよう少し小さめに調整 */
    }
    
    /**合計再計算ボタン対応**/    
    .table-btn-container {
        display: flex !important;
        flex-direction: column !important; /* ボタンを縦並び・全幅にする準備 */
        justify-content: center !important;
        width: 100% !important;
    }

    .table-btn-container .button-action {
        width: 100% !important;
        min-width: 0 !important; /* インラインの 200px を上書きして潰れないようにする */
        margin-left: 0 !important;
        justify-content: center !important; /* テキストを中央寄せ */
    }
    
}