/* ============================================
   responsive.css - モバイルレスポンシブ対応
   既存のCSSを上書きする形でモバイル用スタイルを適用
   ============================================ */

/* --- 横スクロールヒント用アニメーション --- */

@keyframes scroll-hint-bounce {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(8px); }
}

@media (max-width: 960px) {

	/* ========================================
	   全体: ページ全体の横スクロールを防止
	   ======================================== */

	html, body {
		overflow-x: hidden;
		max-width: 100vw;
	}

	/* ========================================
	   全体: 画像のレスポンシブ化
	   ======================================== */

	img {
		max-width: 100%;
		height: auto;
	}

	/* ========================================
	   ヘッダー
	   ======================================== */

	#header .inner {
		width: 100% !important;
		max-width: 960px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	header #logo_container {
		width: 100% !important;
		max-width: 960px;
		padding: 0 10px;
		box-sizing: border-box;
		height: auto;
		min-height: 50px;
	}

	/* ロゴを少し小さく */
	#header .inner #logo {
		width: 250px;
	}

	#header_menu #right_top {
		width: auto !important;
		padding: 0 2px;
		box-sizing: border-box;
		float: right !important;
	}

	/* 追尾ヘッダーの余白を最小限に + 右寄せ */
	#header_menu #right_top #user_menu {
		padding: 5px 2px;
		float: right;
		text-align: right;
	}

	/* menu-icon の左右マージン統一 */
	#header_menu .menu-icon {
		margin-left: 4px;
		margin-right: 4px;
	}

	/* --- 追尾ヘッダー: ハンバーガーメニュー以外の要素を非表示 ---
	   ご利用の流れ、検索、保存した検索条件、ログイン、新規登録を隠し、
	   ハンバーガーメニュー・お知らせ・ユーザーアイコンのみ表示 */

	#header_menu #right_top #user_menu #top_line > a {
		display: none !important;
	}

	#header_menu #login-link,
	#header_menu #signup-link {
		display: none !important;
	}

	#header_menu #right_top #user_menu #under_line {
		display: none !important;
	}

	/* --- 追尾ヘッダー: モバイルではツールチップを非表示 --- */
	#header_menu .menu-icon .menu-tooltip {
		display: none !important;
	}

	/* --- 追尾ヘッダー: モバイル用カート・ウォッチリスト表示 --- */
	#mobile_cart_watchlist {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 2px 8px 4px;
		width: 100%;
		box-sizing: border-box;
	}

	/* --- ドメイン詳細ページ (domain_data_7.php) --- */

	/* 2カラム → 1カラム: 左右カラムを100%幅に */
	#domain .f_left,
	#domain .f_right {
		float: none !important;
		width: 100% !important;
	}

	/* i470/i306ブロックを100%幅に */
	#domain .item.i470,
	#domain .item.i306 {
		width: 100% !important;
	}

	#domain .item.i470 .inner {
		width: auto !important;
	}

	/* i306の.innerはtableなので100%幅にする */
	#domain .item.i306 .inner,
	#domain .item.i306 table.inner {
		width: 100% !important;
		box-sizing: border-box;
	}

	/* right_data（主要情報内の右カラム）を100%幅に */
	#domain .right_data {
		width: 100% !important;
		float: none !important;
	}

	/* 3カラムの左マージン解除 */
	#domain .f_left.ml20 {
		margin-left: 0 !important;
	}

	/* サブページテーブルも横スクロール対応 */
	#domain .data_table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}

	/* --- バルーンメニュー（ヘッダーアイコンメニュー） --- */

	.balloon-container {
		width: 100% !important;
		max-width: 960px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.balloon {
		position: fixed !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: 2% !important;
		right: 2% !important;
		width: 96% !important;
		max-width: none !important;
		box-sizing: border-box;
		z-index: 9999;
	}

	#balloon-coupon,
	.balloon-service,
	.balloon-notification {
		position: fixed !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: 2% !important;
		right: 2% !important;
		width: 96% !important;
		max-width: none !important;
		box-sizing: border-box;
		z-index: 9999;
	}

	/* ========================================
	   PRバー（パンくず）
	   ======================================== */

	#pr_bar .inner {
		width: 100% !important;
		max-width: 960px;
		padding: 5px 10px 10px;
		box-sizing: border-box;
	}

	#pr_bar .pr_left {
		padding-left: 0;
	}

	/* ========================================
	   メインコンテンツエリア
	   ======================================== */

	#main {
		width: 100% !important;
		max-width: 960px;
		padding: 0 10px;
		box-sizing: border-box;
		margin: 15px auto;
	}

	/* --- 左カラム（メインコンテンツ）: 100%幅、float解除 --- */

	#contents {
		width: 100% !important;
		float: none !important;
	}

	#contents .item .inner {
		width: auto !important;
		box-sizing: border-box;
	}

	/* --- 右カラム（サイドバー）: 100%幅、下に縦積み --- */

	#side {
		width: 100% !important;
		float: none !important;
		margin-top: 20px;
	}

	#side .item .inner {
		width: auto !important;
		box-sizing: border-box;
	}

	/* ========================================
	   ドメインテーブル: 横スクロール対応
	   ======================================== */

	/*
	 * テーブル要素を display: block + overflow-x: auto にして
	 * 画面幅を超える場合に横スクロール可能にする。
	 * ::before 疑似要素で「スクロールできます」ヒントを表示。
	 */

	/* テーブルの親要素をスクロールコンテナにする */
	.tab_content,
	#domain_list + *,
	#contents > .item:has(#domain_list),
	#contents > .item:has(.data_table) {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}

	#domain_list,
	#domain_list1,
	#domain_list2,
	#domain_list3,
	#order_history,
	#wide_table,
	.data_table {
		width: auto !important;
		min-width: 100%;
		display: table;
		table-layout: auto;
	}

	/* テーブルを囲むラッパーがない場合のフォールバック */
	table#domain_list,
	table#domain_list1,
	table#domain_list2,
	table#domain_list3,
	table#order_history,
	table#wide_table,
	table.data_table {
		display: table;
	}

	/* ドメイン詳細ページのテーブル */
	#domain .data_table {
		width: auto !important;
		min-width: 100%;
		display: table;
		table-layout: auto;
	}

	#domain .data_table td.break {
		width: auto;
		min-width: 200px;
	}

	/* --- ドメインテーブル: ドメイン名・備考の最低幅確保 ---
	   横スクロール前提で、各列の視認性を改善 */

	#domain_list td.domain_name,
	#domain_list1 td.domain_name,
	#domain_list2 td.domain_name,
	#domain_list3 td.domain_name,
	#wide_table td.domain_name,
	.data_table td.domain_name {
		min-width: 180px;
		position: relative;
	}

	/* 備考列: 画像がTDを突き抜けないように、内容に合わせて幅が広がる */
	#domain_list th.right,
	#domain_list1 th.right,
	#domain_list2 th.right,
	#domain_list3 th.right {
		white-space: nowrap;
	}

	#domain_list td:last-child,
	#domain_list1 td:last-child,
	#domain_list2 td:last-child,
	#domain_list3 td:last-child {
		white-space: nowrap;
		min-width: 100px;
	}

	/* --- 横スクロールヒント ---
	   テーブル上部に「➡ スクロールできます」テキストを表示し、
	   バウンスアニメーションでスクロール可能であることを伝える */

	.tab_content::before {
		content: "\27A1\FE0E \30B9\30AF\30ED\30FC\30EB\3067\304D\307E\3059";
		/* ➡ スクロールできます */
		display: block;
		text-align: right;
		font-size: 11px;
		color: #888;
		padding: 5px 5px 3px;
		animation: scroll-hint-bounce 1.5s ease-in-out 3;
		pointer-events: none;
	}

	/* ========================================
	   その他テーブル
	   ======================================== */

	#contents .i640 table.inner {
		width: 100% !important;
		box-sizing: border-box;
	}

	#domain .i306 table.inner {
		width: 100% !important;
		box-sizing: border-box;
	}

	#contents table#aiueo {
		width: 100%;
		margin-left: 0;
	}

	/* ========================================
	   ドメイン詳細ページ
	   ======================================== */

	#domain .i470 .inner {
		width: auto !important;
		box-sizing: border-box;
	}

	#domain .right_data {
		width: 100% !important;
		float: none !important;
	}

	#domain .w225 {
		width: 100%;
	}

	/* ========================================
	   wide レイアウト（検索結果等）
	   ======================================== */

	#main .wide {
		width: 100% !important;
	}

	/* ========================================
	   送信ボタン
	   ======================================== */

	#main .submit_640 {
		width: 100% !important;
		max-width: 640px;
		box-sizing: border-box;
	}

	/* ========================================
	   お知らせ欄
	   ======================================== */

	#contents .item .oshirase p.mes {
		width: auto !important;
		float: none;
		clear: both;
	}

	#contents .item .oshirase p.date {
		float: none;
		width: auto;
		margin-bottom: 3px;
	}

	/* ========================================
	   フッター
	   ======================================== */

	#footer .inner {
		width: 100% !important;
		max-width: 960px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	#footer ul.menu {
		float: none !important;
		width: 100% !important;
		padding: 10px 0 10px 0;
		border-bottom: 1px solid #292929;
		background-size: auto 40px;
		background-position: left top 0 !important;
		padding-top: 48px;
	}

	#footer ul.menu li.more {
		padding-right: 0;
	}

	/* --- グループサイト / メディアサイト --- */

	#groupsite .inner,
	#mediasite .inner {
		width: 100% !important;
		max-width: 960px;
		padding: 0 10px;
		box-sizing: border-box;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	/* --- コピーライト --- */

	#copyright .inner {
		width: 100% !important;
		max-width: 960px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	#copyright address {
		float: none !important;
		text-align: center;
		display: block;
		margin-bottom: 10px;
	}

	#toTop {
		float: none !important;
		text-align: center;
		display: block;
		margin-bottom: 10px;
	}

	#product {
		float: none !important;
		text-align: center;
		display: block;
	}

	/* ========================================
	   モーダル（rakko-id）
	   ======================================== */

	.c-modal .modal-container {
		width: 95% !important;
		max-width: 800px;
		box-sizing: border-box;
		padding: 10px 15px;
	}

	/* ========================================
	   ヘルプ誘導
	   ======================================== */

	#help_guidance .help_guidance_content {
		flex-direction: column;
		text-align: center;
	}

	#help_guidance .help_guidance_image {
		margin-right: 0;
		margin-bottom: 10px;
	}

	/* ========================================
	   検索フォーム
	   ======================================== */

	#search label[for='limited_range'],
	#search label[for='exact'],
	#search label[for='attribute_or'],
	#search label[for='outside_and'] {
		float: none;
		display: block;
		margin-bottom: 5px;
	}

	#search .clearForm {
		float: none;
		display: block;
		margin-right: 0;
		margin-bottom: 10px;
		text-align: center;
	}

	/* ========================================
	   カテゴリ next/prev
	   ======================================== */

	p.next_cate,
	p.prev_cate {
		float: none;
		text-align: center;
		margin-bottom: 10px;
	}

	/* ========================================
	   サイドバナー
	   ======================================== */

	#side .item.rakko_service_banner,
	#side .item.rakko_tools_banner {
		padding: 0;
	}

	#side .item.rakko_service_banner img,
	#side .item.rakko_tools_banner img,
	.rakko_service_banner img,
	.rakko_tools_banner img,
	#side .item a img.mask {
		width: 100% !important;
		max-width: 100%;
		height: auto;
		min-height: auto;
		display: block;
	}

	/* ========================================
	   その他の細かい調整
	   ======================================== */

	/* 3分割カラム（カートページ: 合計金額/ドメイン件数/保持限度時刻） */
	#contents .item .box3 {
		float: none;
		width: 100%;
		padding-top: 65px;
		text-align: center;
		background-position: center top !important;
	}

	#contents .item .box3 p {
		text-align: center;
	}

	#contents .item .kensuu,
	#contents .item .gendo {
		margin-left: 0 !important;
	}

	/* --- 画像ボタンリンク（ドメイン検索・新着ドメイン等）--- 
	   1行3個配置でレイアウト崩れを防ぐ */

	#contents > .clearfix.mb20 {
		display: flex;
		flex-wrap: nowrap;
		gap: 4px;
		justify-content: space-between;
	}

	#contents > .clearfix.mb20 > a {
		float: none !important;
		margin-right: 0 !important;
		flex: 1 1 0;
		min-width: 0;
	}

	#contents > .clearfix.mb20 > a img {
		width: 100%;
		height: auto;
	}

	/* その他カテゴリのリスト */
	#contents #other li {
		float: none;
		margin-left: 0;
		margin-bottom: 5px;
	}

	/* サイド内の2分割/3分割 */
	#side .item .double_file,
	#side .item .triple_file {
		float: none;
		width: 100%;
		text-align: center;
		margin-bottom: 5px;
	}

	/* ========================================
	   ドメインテーブル: action_button 表示
	   ======================================== */

	/* ログイン時のカート/ウォッチリストボタン列を表示 */
	.action_button {
		min-width: 40px !important;
		white-space: nowrap;
		text-align: center;
	}

	/* カート/ウォッチリスト画像ボタン: モバイルタッチターゲット確保 */
	.action_button img {
		min-width: 24px;
		min-height: 24px;
		width: 24px;
		height: 24px;
		padding: 4px;
		cursor: pointer;
		-webkit-tap-highlight-color: rgba(0,0,0,0.1);
		touch-action: manipulation;
	}

	/* ========================================
	   ドメイン詳細: カート/ウォッチリストボタン横並び
	   ======================================== */

	/* 主要情報ブロック直後のボタンコンテナのみ対象 */
	#domain .item.i470 + .clearfix.mb20 {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		justify-content: center;
		padding: 0 5px;
	}

	#domain .item.i470 + .clearfix.mb20 > .f_left {
		float: none !important;
		width: auto !important;
		flex: 1 1 0;
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	#domain .item.i470 + .clearfix.mb20 > .f_left img {
		width: 100%;
		height: auto;
		max-height: 50px;
		object-fit: contain;
	}

	/* ========================================
	   ドメイン詳細: 情報ブロック内テーブル100%幅
	   ======================================== */

	#domain .item .inner .table_border {
		width: 100% !important;
	}

	#domain .item.i470 {
		width: 100% !important;
	}

	#domain .item.i306 {
		width: 100% !important;
	}

	/* ========================================
	   ドメイン詳細: Wayback/バックリンクテーブル横スクロール
	   ======================================== */

	/* Waybackテーブル: 横スクロールラッパー化 */
	table#wayback_table {
		display: block !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
		width: 100% !important;
	}

	/* バックリンクテーブル: 横スクロールラッパー化 */
	table#backlink_table {
		display: block !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
		width: 100% !important;
	}

	/* バックリンクテーブル: セル最低幅でスクロール発生を保証 */
	table#backlink_table th:first-child,
	table#backlink_table td.break {
		min-width: 250px;
	}

	table#backlink_table th:last-child,
	table#backlink_table td:last-child {
		min-width: 120px;
		white-space: nowrap;
	}

	table#backlink_table th.w20,
	table#backlink_table th.w30 {
		white-space: nowrap;
	}

	/* 横スクロールヒント: Wayback/バックリンクテーブル前 */
	table#wayback_table::before,
	table#backlink_table::before {
		content: "\27A1\FE0E \30B9\30AF\30ED\30FC\30EB\3067\304D\307E\3059";
		display: block;
		text-align: right;
		font-size: 11px;
		color: #888;
		padding: 5px 5px 3px;
		animation: scroll-hint-bounce 1.5s ease-in-out 3;
		pointer-events: none;
	}

	/* ========================================
	   ユーザーページ/注文履歴: テーブル横スクロール対応
	   ======================================== */

	/* 注文情報テーブルのスクロールコンテナ */
	#app-2 {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}

	/* カート/注文詳細ページのドメインリストテーブル横スクロール */
	#contents > table#domain_list {
		display: block !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
		width: 100% !important;
	}

	/* 注文履歴テーブル横スクロール */
	#contents > table#order_history,
	#app-2 > table#order_history {
		display: block !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
		width: 100% !important;
	}

	/* 注文履歴テーブル: THの改行防止（コンテンツ幅に合わせる） */
	#order_history th {
		white-space: nowrap !important;
	}

	/* 横スクロールヒント: カート/注文詳細/注文履歴テーブル */
	#contents > table#domain_list::before,
	#contents > table#order_history::before,
	#app-2 > table#order_history::before {
		content: "\27A1\FE0E \30B9\30AF\30ED\30FC\30EB\3067\304D\307E\3059";
		display: block;
		text-align: right;
		font-size: 11px;
		color: #888;
		padding: 5px 5px 3px;
		animation: scroll-hint-bounce 1.5s ease-in-out 3;
		pointer-events: none;
	}

	/* ========================================
	   お支払いモーダル: 画面内に収める
	   ======================================== */

	/* display:table/table-cell はoverflow-xを無視するためflexboxに切替 */
	.modal-mask {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		overflow-x: hidden !important;
	}

	.modal-mask .modal-wrapper {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
	}

	.modal-mask .modal-wrapper .modal-container {
		width: calc(100% - 20px) !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: 90vh !important;
		margin: 10px auto !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
		padding: 0 !important;
	}

	.modal-mask .modal-wrapper .modal-container .modal-body {
		max-height: 70vh !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		padding: 10px !important;
		box-sizing: border-box !important;
		word-wrap: break-word;
		word-break: break-word !important;
	}

	/* モーダル内テーブルの幅制限 */
	.paymentsModal .modal-body table {
		width: 100% !important;
		table-layout: fixed;
		word-wrap: break-word;
	}

	/* モーダル内テーブルセルのパディング縮小 */
	.paymentsModal .modal-body #order_history th,
	.paymentsModal .modal-body #order_history td {
		padding: 8px 5px !important;
		font-size: 12px !important;
	}

	/* モーダル内の価格リスト幅を調整 */
	.paymentsModal .price_list {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 3px !important;
		box-sizing: border-box !important;
		flex-direction: column;
	}

	.paymentsModal .price_list h2 {
		display: none;
	}

	.paymentsModal .price_list dl {
		min-width: auto !important;
		width: 100%;
	}

	.paymentsModal .price_list dt {
		min-width: auto !important;
		float: left !important;
		padding-right: 5px !important;
		clear: left;
	}

	.paymentsModal .price_list dd {
		text-align: right;
		overflow: visible !important;
		word-break: keep-all;
	}

	.paymentsModal .price_total {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.paymentsModal .price_total dl {
		min-width: auto !important;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.paymentsModal .price_total dt {
		min-width: auto !important;
		padding-right: 5px !important;
		font-size: 14px;
	}

	.paymentsModal .price_total dd {
		font-size: 22px;
	}

	/* モーダル内タブ（カード/PayPal/銀行振込） */
	.paymentsModal #general_tab {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	.paymentsModal .card_tab,
	.paymentsModal .small_tab {
		margin-right: 5px !important;
		padding: 5px 10px !important;
		font-size: 11px !important;
	}

	/* モーダル内カード選択肢 (#card-selector) */
	.paymentsModal #general_box #card-selector {
		padding: 0 !important;
		margin: 10px 0 0 0 !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.paymentsModal #general_box #card-selector li {
		padding: 8px !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
		word-wrap: break-word !important;
		word-break: break-word !important;
		white-space: normal !important;
		font-size: 12px !important;
	}

	/* カード登録・再読み込みボタン (#card-type-1) */
	.paymentsModal #general_box #card-selector #card-type-1 {
		padding: 8px !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
		justify-content: center !important;
	}

	.paymentsModal #general_box #card-selector #card-type-1 .card-button {
		min-width: auto !important;
		width: auto !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
		padding: 0 10px !important;
		font-size: 12px !important;
		height: 32px !important;
		box-sizing: border-box !important;
		white-space: nowrap !important;
	}

	/* モーダル内カード決済ボタン */
	.paymentsModal #general_box #card-button {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* カード決済推奨メッセージ (.card_warning) */
	.paymentsModal .card_warning {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		padding: 10px !important;
		word-wrap: break-word !important;
		word-break: break-word !important;
		white-space: normal !important;
		font-size: 12px !important;
	}

	.paymentsModal .card_warning p {
		font-size: 12px !important;
		line-height: 1.4 !important;
		white-space: normal !important;
	}

	/* 銀行振込説明 (#bank) */
	.paymentsModal #bank {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		word-wrap: break-word !important;
		word-break: break-word !important;
		overflow-wrap: break-word !important;
	}

	.paymentsModal #bank p {
		white-space: normal !important;
		word-wrap: break-word !important;
		word-break: break-word !important;
		line-height: 1.5 !important;
	}

	/* PayPalタブの注意書き */
	.paymentsModal .paypal_attention {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.paymentsModal .paypal_attention p {
		white-space: normal !important;
		word-wrap: break-word !important;
		word-break: break-word !important;
	}

	/* モーダル内のすべての子要素がはみ出さないように */
	.paymentsModal .modal-body * {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* モーダル内の長いURL */
	.paymentsModal #bank a {
		word-break: break-all;
	}

	/* #general_box全体のはみ出し防止 */
	.paymentsModal #general_box {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	.paymentsModal #general_box .title {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	/* モーダル内フラグ（値下げ等）のはみ出し防止 */
	.paymentsModal .modal-body .flag,
	.paymentsModal .modal-body .red-flag {
		position: static !important;
		display: inline-block !important;
		width: auto !important;
		max-width: 100% !important;
		margin-bottom: 5px;
	}

	.paymentsModal .modal-body .flag::after,
	.paymentsModal .modal-body .red-flag::after {
		display: none !important;
	}

	/* モーダルフッターのボタン配置 */
	.paymentsModal .modal-footer .inner.input-group {
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 5px;
	}

	/* ユーザーデータテーブル（注文詳細の注文情報）*/
	#contents table.user_data td[width] {
		width: auto !important;
	}

	/* ========================================
	   PowerTip ツールチップ: モバイル対応
	   ======================================== */

	/* ツールチップを画面幅に合わせて表示（top/bottomはJSで動的に設定するため!importantを外す） */
	#powerTip {
		position: fixed !important;
		left: 2% !important;
		right: 2% !important;
		width: 96% !important;
		max-width: none !important;
		white-space: normal !important;
		box-sizing: border-box !important;
		z-index: 99999 !important;
		font-size: 11px;
		line-height: 1.4;
		word-wrap: break-word;
		padding: 10px !important;
		background: #333 !important;
		color: #fff !important;
		border-radius: 5px !important;
		max-height: 60vh !important;
		overflow-y: auto !important;
	}

	/* ツールチップ内の2カラムレイアウトを1カラムに */
	#powerTip .f_left {
		float: none !important;
		width: 100% !important;
		margin-left: 0 !important;
	}

	#powerTip .ml10 {
		margin-left: 0 !important;
	}

	#powerTip .mw500 {
		max-width: 100% !important;
	}

	/* ツールチップ内テーブル */
	#powerTip table {
		width: auto;
	}
}