/* ============================================================
   BRADIO FPP★CLUB Anniversary Sunset Live in OKINAWA
   common.css（2026年リニューアル版）
   ------------------------------------------------------------
   デザイン方針：
   ・白ベース＋夕焼け（サンセット）グラデーションを差し色に使用
   ・角丸カードUI／控えめなシャドウ／広めの余白と行間
   ・カラー／フォントはCSS変数化し、他ツアーへの流用を容易に
   ・HTML構造は既存のまま極力維持し、装飾（見た目）のみを刷新
   ============================================================ */

@import url(font-awesome.min.css); /* 現ページでは未使用だが、他ページとの共通利用のため維持 */
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Cormorant+Garamond:ital,wght@0,500;1,500;1,600&display=swap");

/* ------------------------------------------------------------
   デザイントークン（このブロックの値を変更するだけで
   他ツアーページへの展開が可能）
------------------------------------------------------------ */
:root {
	/* カラー：夕焼けグラデーション基調 */
	--color-paper:        #ffffff;   /* 背景（白ベース） */
	--color-paper-warm:   #fff8f2;   /* 淡いウォームホワイト（表組みヘッダー等） */
	--color-ink:          #2b2430;   /* 本文テキスト（暖かみのある黒） */
	--color-ink-soft:     #6b6470;   /* 補助テキスト */
	--color-line:         #ece2da;   /* ヘアラインボーダー */
	--color-line-strong:  #d8cabf;   /* やや強めのボーダー */

	--color-sunset-purple:#3a2050;   /* 空の最深部（紫） */
	--color-sunset-plum:  #6f2f66;   /* 紫〜赤紫 */
	--color-sunset-coral: #ff6f61;   /* コーラル */
	--color-sunset-orange:#ff9a56;   /* オレンジ */
	--color-sunset-gold:  #e8ac4d;   /* ゴールド（アクセントライン） */
	--color-sunset-pink:  #ff8fa3;   /* ピンク（グロー用） */

	/* フォント */
	--font-serif: 'Shippori Mincho', "游明朝体", "Yu Mincho", serif;      /* 見出し用（上品・和） */
	--font-sans:  'Noto Sans JP', "メイリオ", Meiryo, sans-serif;         /* 本文用 */
	--font-en:    'Cormorant Garamond', serif;                            /* 英文タイトル用アクセント */

	/* 角丸・シャドウ */
	--radius-lg: 16px;
	--radius-md: 12px;
	--radius-sm: 8px;
	--shadow-soft:  0 10px 30px rgba(58, 32, 80, 0.09);
	--shadow-softer: 0 4px 16px rgba(58, 32, 80, 0.06);
}

/* ------------------------------------------------------------
   リセット
------------------------------------------------------------ */
html, body, div, span, h4, p, a, img, strong, ol, ul, li, table, tbody, thead, tr, th, td, article, header, section {
	margin: 0;
	border: 0;
	font-size: 100%;
	font-weight: 300;
	font: inherit;
	vertical-align: baseline;
}
article, header, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
body { -webkit-text-size-adjust: none; }

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

@-ms-viewport { width: device-width; }
body { -ms-overflow-style: scrollbar; }

@media screen and (max-width: 480px) {
	html, body { min-width: 320px; }
}

/* ------------------------------------------------------------
   タイポグラフィ 基本
------------------------------------------------------------ */
html { font-size: 14pt; }

@media screen and (max-width: 1680px) { html { font-size: 12pt; } }
@media screen and (max-width: 1280px) { html { font-size: 11pt; } }
@media screen and (max-width: 360px)  { html { font-size: 10pt; } }

body {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 1rem;
	line-height: 2;               /* 行間広め */
	color: var(--color-ink);
	background-color: var(--color-paper); /* 白ベース（旧・全面背景画像は廃止） */
}

a {
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	color: var(--color-ink);
	border-bottom: dotted 1px rgba(43, 36, 48, 0.4);
	text-decoration: none;
}
a:hover {
	border-bottom-color: transparent;
	color: var(--color-sunset-coral) !important;
}

strong { font-weight: 600; }

/* お問い合わせ等の中見出し（1. 2. 3.…）：元HTMLの独自タグ <strong2> 用 */
strong2 {
	display: inline-block;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--color-ink);
	padding-bottom: 0.15rem;
	margin-bottom: 0.3rem;
	border-bottom: 2px solid var(--color-sunset-gold);
}

p {
	text-align: justify;
	margin: 0 0 1% 0;
}

.align-center { text-align: center; }
.align-right  { text-align: right; }

.mt20 { margin-top: 20px; }
.mt40 { margin-top: 20px; }

.fade-in {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.fade-in.in-view {
	opacity: 1;
	transform: translateY(0);
}

/* ------------------------------------------------------------ */
h1 {
	margin: 3.2rem 0 1.4rem 0;
	padding: 0.5rem 1.2rem;
	background: linear-gradient(90deg, rgba(230, 126, 92, 0.08), rgba(212, 175, 55, 0.04) 80%);
	border: 0;
	border-left: 5px solid var(--color-sunset-coral);
	border-bottom: 2px solid var(--color-sunset-gold);
	display: block;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: 0.04em;
	color: var(--color-ink);
	position: relative;
}
/* h1の下線の先端をグラデーションでぼかし、夕焼けの水平線を想起させる */
h1::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 5rem;
	height: 2px;
	background: linear-gradient(90deg, var(--color-sunset-coral), var(--color-sunset-gold));
}
h4 { color: var(--color-ink); font-family: var(--font-serif); }

/* qaページへの導線バナー：赤ベタ塗り → サンセットグラデーションのピル型ボタンへ */
.qa {
	margin: 3rem auto 2rem auto;
	padding: 0.9rem 1.75rem;
	max-width: 22rem;
	background: linear-gradient(120deg, var(--color-sunset-plum), var(--color-sunset-coral) 60%, var(--color-sunset-orange));
	border: 0;
	border-radius: 999px;
	box-shadow: var(--shadow-softer);
	font-weight: 600;
	font-size: 100%;
	color: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.qa:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.qa a, .qa a:hover { color: #fff !important; border-bottom: 0; }

.fwb { font-weight: bold; }

/* ------------------------------------------------------------
   リスト
------------------------------------------------------------ */
ol {
	list-style: decimal;
	margin: 0 0 2rem 0;
	padding-left: 1.4rem;
}
ol li { padding-left: 0.3rem; margin-bottom: 0.4rem; }

ul {
	list-style: none;
	margin: 0 0 2rem 0;
	padding-left: 0;
}
ul li {
	position: relative;
	padding-left: 1.1rem;
	margin-bottom: 0.5rem;
}
/* 元の四角マーカー(list-style:square)を、サンセットカラーの小さな菱形アクセントに置き換え */
ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 6px;
	height: 6px;
	background: var(--color-sunset-gold);
	transform: rotate(45deg);
}

ul.tsume { padding-left: 0; }
ul.tsume li { padding-left: 1.1rem; }

/* ------------------------------------------------------------
   ヒーロー（TOP）
   ・夕焼けグラデーション背景／PC:2カラム・SP:縦積み
   ・左：ツアーイメージ画像／右：タイトル＋ツアーポイント
------------------------------------------------------------ */
.hero {
	position: relative;
	overflow: hidden;
	padding: 3.2rem 1.5rem;
	background: linear-gradient(165deg,
		var(--color-sunset-purple) 0%,
		var(--color-sunset-plum) 32%,
		var(--color-sunset-coral) 65%,
		var(--color-sunset-orange) 85%,
		var(--color-sunset-gold) 100%);
}

/* 太陽のグロー（装飾のみ／中身のない演出要素） */
.hero-sun {
	position: absolute;
	right: -6rem;
	bottom: -8rem;
	width: 26rem;
	height: 26rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,225,180,0.28) 45%, rgba(255,225,180,0) 72%);
	pointer-events: none;
}

/* 水の線（水平線）：サンセット×海を想起させるシグネチャーライン */
.hero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22%;
	height: 1px;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255, 224, 178, 0.75) 50%, rgba(255,255,255,0) 100%);
}

.hero-inner {
	position: relative;
	z-index: 2;
	max-width: 72rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 3rem;
}

.hero-image {
	flex: 1 1 42%;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(20, 10, 30, 0.35);
}
.hero-image img { display: block; width: 100%; height: auto; }

.hero-content {
	flex: 1 1 58%;
	color: #fff;
}

.hero-eyebrow {
	font-family: var(--font-en);
	font-style: italic;
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	color: #ffe6c2;
	margin-bottom: 0.9rem;
	text-align: left;
}

.hero-title {
	margin: 0 0 1.6rem 0;
	padding: 0;
	border: 0;
	font-family: var(--font-en);
	font-style: italic;
	font-weight: 600;
	font-size: 2.1rem;
	line-height: 1.35;
	color: #fff;
	text-shadow: 0 2px 20px rgba(0,0,0,0.25);
}
.hero-title::after { display: none; } /* 通常h1のゴールド下線は適用しない */
.hero-point {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 0.85rem 1.1rem;
	margin-bottom: 0.7rem;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: var(--radius-md);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 6px 18px rgba(20, 8, 30, 0.18);
	transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.hero-point:hover {
	transform: translateX(4px);
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 213, 140, 0.75);
	box-shadow: 0 10px 26px rgba(20, 8, 30, 0.26);
}

/* アイコンチップ：ゴールドのグラデーション円 */
.hero-point-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-top: 0.1rem;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--color-sunset-gold), var(--color-sunset-coral));
	box-shadow: 0 4px 12px rgba(232, 172, 77, 0.45), inset 0 0 0 1px rgba(255,255,255,0.4);
	color: #fff;
}
.hero-point-icon svg { width: 1.3rem; height: 1.3rem; }

/* タイトル＋説明の2階層テキスト */
.hero-point-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.hero-point-title {
	color: #fff;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 0.98rem;
	line-height: 1.5;
	letter-spacing: 0.01em;
	text-shadow: 0 1px 8px rgba(0,0,0,0.2);
}
.hero-point-desc {
	display: block;
	color: rgba(255, 255, 255, 0.86);
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 0.82rem;
	line-height: 1.7;
}

@media screen and (max-width: 900px) {
	.hero-point { padding: 0.7rem 0.9rem; }
	.hero-point-icon { width: 2.1rem; height: 2.1rem; }
	.hero-point-title { font-size: 0.92rem; }
	.hero-point-desc { font-size: 0.78rem; }
}
@media screen and (max-width: 900px) {
	.hero-inner { flex-direction: column; align-items: stretch; gap: 1.6rem; }
	.hero-title { font-size: 1.6rem; }
}

/* ------------------------------------------------------------
   ラッパー／メインコンテンツ
------------------------------------------------------------ */
#wrapper {
	transition: opacity 0.5s ease;
	position: relative;
	z-index: 1;
	overflow: visible;
	/* 夕焼けの余韻を感じさせる、ごく淡いグラデーション背景 */
	/* 夕焼けの余韻を感じさせる、ごく淡いグラデーション背景 */
	background: linear-gradient(180deg,
		#fff6ee 0%,
		#fffaf5 14%,
		#ffffff 38%,
		#ffffff 100%);
}

#main {
	background-color: var(--color-paper);
	position: relative;
	margin: 0 auto;
	width: calc(100% - 4rem);
	max-width: 72rem;
	z-index: 2;
	overflow: visible;
}

.top {
	/* 旧トップ画像用ラッパー：ヒーローに置き換わったため未使用（互換のため保持） */
	position: relative;
	margin: 0 auto;
	max-width: 72rem;
	z-index: 2;
}

#main > * { padding: 2.2rem 0 1.2rem 0; margin: 0; }
#main > *:first-child { border-top: 0; }
#main > .post { padding: 0; }
#main > .post2 { padding: 1rem 6rem 6rem 6rem; }
#main > .okinawa { padding: 1rem; text-align: right; }
#main > .post header.major > .date { margin-top: -2rem; }
#main > .post.featured { text-align: center; }

@media screen and (max-width: 1280px) {
	#main > .post { padding: 0; }
	#main > .post2 { padding: 1rem 2rem 2rem 2rem; }
}
@media screen and (max-width: 736px) {
	#main > .post { padding: 0; }
	#main > .post2 { padding: 1rem 1.25rem 1.25rem 1.25rem; }
	#main > .post header.major > .date { margin-top: -1rem; margin-bottom: 2rem; }
	#main > * { padding: 0 0 0.1rem 0; }
}
@media screen and (max-width: 480px) { #main { width: 100%; } }
@media screen and (min-width: 1300px) { #main { width: 100%; max-width: 1300px; } }

/* ------------------------------------------------------------
   ボタン（申込みボタン等）
------------------------------------------------------------ */
#main .moko,
#main .mokofo {
	transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease;
	display: inline-block;
	pointer-events: auto;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--color-ink-soft), var(--color-ink));
	font-family: var(--font-sans);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 1.1rem 2.4rem;
	color: #fff !important;
	text-transform: none;
	visibility: visible;
	box-shadow: var(--shadow-softer);
}
#main .moko:hover,
#main .mokofo:hover {
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: var(--shadow-soft);
}
#main .mokofo { margin-left: 1%; }

@media screen and (max-width: 736px) {
	#main .moko, #main .mokofo { font-size: 1rem; padding: 1rem 1.6rem; }
}

/* ------------------------------------------------------------
   お申込みSTEPブロック（カードUI）
------------------------------------------------------------ */
#stepnum {
	background: linear-gradient(120deg, var(--color-sunset-plum), var(--color-sunset-coral) 55%, var(--color-sunset-orange));
	padding: 1rem 1.5rem;
	margin-top: 2%;
	color: #fff;
	border: 0;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
}

#step {
	padding: 2.4rem 2rem 2rem 2rem;
	margin: 0 0 2% 0;
	border: 1px solid var(--color-line);
	border-top: 0;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	background: var(--color-paper-warm);
	box-shadow: var(--shadow-softer);
}

.arrow {
	width: 0;
	height: 1.6rem;
	margin: 0 auto;
	border-left: 1px dashed var(--color-sunset-gold);
}

#bank {
	margin-bottom: 4%;
	padding: 1.6rem 1.8rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: #ffffff;
	box-shadow: var(--shadow-softer);
}

/* ------------------------------------------------------------
   表組み（料金表・日程表・取消料表）
------------------------------------------------------------ */
table { margin: 0 0 2rem 0; width: 100%; }
table tbody tr { border: solid 1px var(--color-line); border-left: 0; border-right: 0; }
table td { padding: 0.85rem 0.9rem; }
table th {
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
	padding: 0.7rem 0.9rem;
	text-align: left;
}
@media screen and (max-width: 980px) { table th { font-size: 0.85rem; } }

table thead { border-bottom: 1px solid var(--color-line-strong); }
table tbody tr { border-color: var(--color-line); }
table tbody tr:nth-child(2n + 1) { background-color: var(--color-paper-warm); }
table th { color: var(--color-ink); }

/* 料金表・案内テーブル（table2） */
.table2 {
	border-collapse: collapse;
	border: none;
	margin-top: 0.5rem;
	border-radius: var(--radius-sm);
	overflow: hidden;
}
table.table2 td.table2_bb { border-bottom: none; }
table.table2 td.table2_bt { border-top: none; }
.bb { border-bottom: solid 1px var(--color-line-strong); }

.table2 th {
	padding: 0.6rem 0.6rem 0.8rem;
	font-size: 100%;
	font-weight: 500;
	color: var(--color-ink);
	border: 1px solid var(--color-line);
	background-color: var(--color-paper-warm);
	text-align: center;
}
.table2 td {
	background: #fff;
	font-weight: 400;
	border: 1px solid var(--color-line);
	padding: 0.6rem 0.6rem 0.8rem;
	font-size: 100%;
	text-align: left;
}
.table2 p {
	color: var(--color-ink);
	font-size: 15px;
	font-weight: 300;
	line-height: 23px;
	letter-spacing: 0.2px;
	margin-bottom: 1px;
}

@media (max-width: 800px) {
	.table2 th { padding: 0.4rem; font-size: 70%; background: var(--color-paper-warm); }
	.table2 td { padding: 0.4rem; font-size: 70%; }
	.table2 p { font-size: 70%; line-height: 23px; letter-spacing: 0.2px; margin-bottom: 1px; }
}

/* 日程表（sch） */
#main table.sch {
	border-collapse: collapse;
	border-spacing: 0;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	font-size: 105%;
	border-radius: var(--radius-sm);
	overflow: hidden;
}
#main table.sch th {
	padding: 0.6rem 0.6rem 0.8rem;
	font-size: 100%;
	font-weight: 500;
	color: var(--color-ink);
	border: 1px solid var(--color-line);
	background-color: var(--color-paper-warm);
	text-align: center;
}
#main table.sch td {
	padding: 0.6rem 0.9rem;
	border-left: 1px solid var(--color-line);
	border-right: 1px solid var(--color-line);
}

@media screen and (max-width: 580px) {
	#main table.sch { font-size: 80%; }
	#main table.sch th { font-size: 90%; background-color: var(--color-paper-warm); }
	#main table.sch td { padding: 0.5rem 0.75rem; font-size: 100%; font-weight: 600; }
}

.endline { padding-bottom: 10px; border-bottom: 1px solid var(--color-line-strong); }
th.middle { vertical-align: middle; }

/* コース別の淡いカラータグ（羽田＝ゴールド系／伊丹関空＝コーラル系） */
.hnd { background-color: #f0f8ff!important; }
.kix { background-color: #f0fff0!important; }

/* テーブルが画面幅を超える場合の横スクロール対応 */
@media (max-width: 1024px) {
	.table_outer { display: block; overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch; }
	.top { width: 100%; }
}

/* ------------------------------------------------------------
   ロゴ・その他パーツ
------------------------------------------------------------ */
.knt { width: 220px; margin: 0 0 1.5rem 1.5rem; float: right; }

.margin10 { margin-top: 2%; }

/* PC/SP画像出し分け（既存構造を維持） */
.tour_c { display: block; }
.tour_c_sp { display: none; }
@media screen and (max-width: 768px) {
	.tour_c { display: none; }
	.tour_c_sp { display: block; }
}

html, body { overflow-x: hidden; }
.apply-btns{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    margin-top:30px;
}

.apply-btns{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    margin:35px 0 15px;
}

.apply-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:220px;
    height:64px;

    border-radius:999px;
    text-decoration:none;
    font-size:1.4rem;
    font-weight:700;
    letter-spacing:.08em;

    transition:.3s;
}

/* YES */

.apply-btn-yes{
    color:#fff !important;
    border:none;

    background:linear-gradient(
        90deg,
        #6b2b82 0%,
        #a13d76 35%,
        #ef6a67 70%,
        #ff9957 100%
    );

    box-shadow:
        0 12px 30px rgba(255,120,80,.35),
        inset 0 1px rgba(255,255,255,.25);
}

.apply-btn-yes:hover{
    transform:translateY(-4px);
    box-shadow:
        0 18px 40px rgba(255,120,80,.45);
}

/* NO */

.apply-btn-no{
    color:#7d2f69 !important;
    background:#fff;

    border:2px solid #d67aa2;

    box-shadow:
        0 8px 25px rgba(100,40,90,.12);
}

.apply-btn-no:hover{
    background:#fff6fb;
    transform:translateY(-4px);
}

.apply-note{
    text-align:center;
    color:#777;
    font-size:.9rem;
}

.end {
    color: #aaaaaa;
    background-color: #f5f5f5;
    opacity: 0.7;
}

.end-table,
.end-table th,
.end-table td {
    background-color: #d3d3d3 !important;
    color: #888888 !important;
}

.highlight-table {
    border: 4px solid #B52B2B !important;
    box-shadow: 0 0 18px rgba(181, 43, 43, 0.5);
}