@charset "utf-8";

/* ============================================
   ジャンカラWi-Fi 業界最速訴求ページ 専用スタイル
   ※ index.html 内のインライン <style> / style 属性を
     すべて本ファイルへ統合（2026-07 保守性改善）
   読み込み順: /common/css/peta → /header_footer/multi/css/peta
             → /css/33/common → css/shoplist → css/style（本ファイル）
   ============================================ */

/* --------------------------------------------
   1. 既存共通パーツ（wifiWrap / attentionNote）
   -------------------------------------------- */
div#wifiWrap {
	margin: 3% auto;
}
div#wifiWrap img {
	max-width: 100%;
	height: auto;
}
div#wifiWrap h2 {
	color: #e60012;
	border-bottom: 3px solid #e60012;
	font-size: 150%;
}
div#wifiWrap figure {
	margin-bottom: 3%;
}
div#wifiWrap ol {
	max-width: 800px;
	padding: 0 15px;
	margin: 0 auto;
}
div#wifiWrap div.wifiInner {
	width: 94%;
	margin: 0 auto;
}
ul.attentionNote {
	list-style: none;
	padding-left: 0;
}
ul.attentionNote li {
	text-indent: -1em;
	padding-left: 1em;
}

/*追加CSS*/
h1 img {
	width: 100%;
}
/* --------------------------------------------
   2. コンテンツ本文ブロック
   ※ 旧: <div class="description_contents" style="...">
        → クラス description_contents--wifi へ置換
   -------------------------------------------- */

.description_contents.description_contents--wifi {
	text-align: center;
	margin-bottom: 20px;
}

.description_contents p.txt {
	margin: 1em 0 1.2em;
	text-align: left;
}

/* --------------------------------------------
   3. 見出し / サブコピー
   ※ 共通CSSの p 指定に負けないよう詳細度アップ＋!important
   -------------------------------------------- */
.description_contents p.wifi_headline,
p.wifi_headline {
	text-align: center;
	font-size: 32px !important;
	font-weight: 700;
	color: #1a2188;
	margin: 1.4em 0 0.2em;
	line-height: 1.5;
}

.description_contents p.wifi_subcopy,
p.wifi_subcopy {
	text-align: center;
	font-size: 22px !important;
	color: #1a2188 !important;
	margin: 0 0 1.8em;
	line-height: 1.7;
}

/* --------------------------------------------
   4. ご利用方法ボックス（listは左寄せ・16px）
   -------------------------------------------- */
.howto_use {
	max-width: 640px;
	margin: 1.6em auto 2em;
	padding: 1.4em 1.6em;
	background: transparent;
	border: none;
	border-radius: 0;
}
.howto_use h3 {
	text-align: center;
	font-size: 1.6rem;
	color: #1a2188;
	margin: 0 0 0.8em;
	letter-spacing: 0.05em;
}
.howto_use ol {
	margin: 0;
	padding-left: 1.4em;
	line-height: 1.9;
	text-align: left;
	font-size: 16px;
}
.howto_use ol li {
	margin-bottom: 0.3em;
	text-align: left;
}
.howto_use ol li b {
	color: #1a2188;
}

/* --------------------------------------------
   5. 汎用ボタン（.description_contents 直下）
   -------------------------------------------- */
.description_contents > .btn {
	padding: 0.4em;
	margin: 0 0 0.4em;
	text-align: center;
	display: inline-block;
	vertical-align: top;
}
.description_contents > .btn a {
	display: inline-block;
	font-size: 1.4rem;
	font-weight: bold;
	background: #004386;
	color: #fff;
	border: 2px solid #004386;
	border-radius: 30px;
	padding: 0.4em 1.8em;
	transition: all 0.2s ease;
	min-width: 220px;
	width: auto;
	text-align: center;
	box-sizing: border-box;
	text-decoration: none;
	white-space: nowrap;
}
.description_contents > .btn a:hover,
.description_contents > .btn a:focus,
.description_contents > .btn a:active {
	background: #fff;
	color: #004386;
	border-color: #004386;
	box-shadow: none;
	text-decoration: none;
	transform: translateY(0);
}
.description_contents > .btn a:active {
	transform: translateY(1px);
}

/* --------------------------------------------
   6. サッカー関連（既存踏襲）
   -------------------------------------------- */
.soccer_title {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	margin: 2.8em 0 0.4em !important;
}
.soccer_title br {
	display: none;
}
.soccer_info {
	text-align: center;
	line-height: 1.6;
	margin-bottom: 0.8em;
	white-space: pre-line;
}

/* --------------------------------------------
   7. 注意事項（左寄せ）
   ※ 旧: <dt style="background: #e94d59;"> → 本CSSへ移設
   -------------------------------------------- */
.notice_notes {
	margin-bottom: 2em;
	text-align: left;
}
.notice_notes dt {
	background: #e94d59;
}
.notice_notes ul.attentionNote {
	text-align: left;
}

/* --------------------------------------------
   8. フローティング予約ボタン
      （1.6rem / 角丸8px / #1D2C5F）
   -------------------------------------------- */
.floating-reserve {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 9999;
	text-align: center;
	width: 100%;
	max-width: 100%;
	padding: 0 16px;
	pointer-events: none;
	box-sizing: border-box;
	transform: none;
}
.floating-reserve__link {
	pointer-events: auto;
	display: inline-block;
	font-size: 1.6rem;
	font-weight: 700;
	background: #FFE001;
	color: #1D2C5F;
	border: 2px solid #FFE001;
	border-radius: 8px;
	padding: 0.6em 2em;
	transition: all 0.2s ease;
	min-width: 200px;
	width: auto;
	text-align: center;
	box-sizing: border-box;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 2.8px 8.4px rgba(0, 0, 0, 0.2);
}
.floating-reserve__link:hover,
.floating-reserve__link:focus,
.floating-reserve__link:active {
	background: #1D2C5F;
	color: #FFE001;
	border-color: #1D2C5F;
	box-shadow: none;
	text-decoration: none;
	transform: translateY(0);
}
.floating-reserve__link:active {
	transform: translateY(1px);
}

/* --------------------------------------------
   9. モバイル最適化（768px以下）
      ※ 分散していたメディアクエリを1か所へ集約
   -------------------------------------------- */
@media screen and (max-width: 768px) {

	/* 見出し */
	.wifi_headline__prefix {
		display: block;
	}

	/* ご利用方法 */
	.howto_use {
		padding: 1.1em 1.1em;
	}
	.howto_use h3 {
		font-size: 1.3rem;
	}

	/* 汎用ボタン */
	.description_contents > .btn {
		display: block;
		margin: 0 0 0.8em;
	}
	.description_contents > .btn a {
		display: block;
		width: 100%;
		box-sizing: border-box;
		min-width: 0;
		padding: 0.8em;
		white-space: normal;
	}

	/* サッカー関連 */
	.soccer_title br {
		display: block;
	}

	/* フローティング予約ボタン */
	.floating-reserve {
		left: 0;
		right: 0;
		bottom: 12px;
		padding: 0 12px;
		text-align: center;
	}
	.floating-reserve__link {
		display: block;
		width: 80%;
		max-width: none;
		box-sizing: border-box;
		min-width: 0;
		padding: 0.7em;
		white-space: normal;
		margin: 0 auto;
	}
}