* { font-family: 'Courier New', Courier, monospace; }
:root {
--primary-red: #DA0000;
--primary-dark: #1a1a1a;
--primary-white: #FFFFFF;
--gray-light: #F5F5F5;
--gray-medium: #E8E8E8;
--text-primary: #262425;
--text-secondary: #626060;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* ============================================
ツアー ヒーロー セクション
============================================ */
.tours-hero {
position: relative;
color: white;
height: 350px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-bottom: 80px;
}

.tours-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}

.tours-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 100%);
z-index: 1;
}

.tours-hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 800px;
}

.tours-hero h1 {
font-size: 48px;
margin-bottom: 15px;
font-weight: 700;
letter-spacing: -1px;
line-height: 1.2;
}

.tours-hero p {
font-size: 18px;
opacity: 0.95;
line-height: 1.6;
}

/* ============================================
ツアー グリッド
============================================ */
.tours-container {
margin-bottom: 100px;
}

.tours-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}

.tour-card {
background: white;
border: 1px solid var(--gray-medium);
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
}

.tour-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}

.tour-image-container {
position: relative;
width: 100%;
height: 220px;
background: linear-gradient(135deg, var(--primary-red) 0%, #b30000 100%);
overflow: hidden;
}

.tour-image {
width: 100%;
height: 100%;
object-fit: cover;
}

.tour-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 80px;
color: white;
}

.tour-card-body {
padding: 30px;
text-align: center;
}

.tour-name {
font-size: 22px;
font-weight: 700;
margin-bottom: 12px;
color: var(--text-primary);
letter-spacing: -0.5px;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}

.tour-specs {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 25px;
line-height: 1.6;
}

.tour-specs-row {
display: flex;
justify-content: space-around;
margin-bottom: 10px;
}

.tour-spec-item {
display: flex;
flex-direction: column;
gap: 4px;
}

.tour-spec-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
color: var(--text-secondary);
letter-spacing: 0.5px;
}

.tour-spec-value {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
}

.tour-price-section {
margin-bottom: 20px;
}

.tour-price-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: var(--text-secondary);
letter-spacing: 0.5px;
margin-bottom: 4px;
}

.tour-price {
font-size: 28px;
font-weight: 700;
color: var(--primary-red);
}

.tour-price-note {
font-size: 12px;
color: var(--text-secondary);
margin-top: 4px;
}

.tour-action-btn {
display: inline-block;
background: transparent;
color: var(--text-primary);
border: 2px solid var(--gray-medium);
padding: 12px 40px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
}

.tour-action-btn:hover {
border-color: var(--primary-red);
color: var(--primary-red);
}

/* ============================================
空状態
============================================ */
.empty-state {
text-align: center;
padding: 100px 20px;
}

.empty-state-icon {
font-size: 80px;
color: var(--gray-medium);
margin-bottom: 20px;
}

.empty-state p {
font-size: 18px;
color: var(--text-secondary);
}

/* ============================================
レスポンシブ
============================================ */
@media (max-width: 1024px) {
.tours-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
}

@media (max-width: 768px) {
.tours-hero {
height: 250px;
margin-bottom: 50px;
}

.tours-hero h1 {
font-size: 32px;
}

.tours-hero p {
font-size: 16px;
}

.tours-grid {
grid-template-columns: 1fr;
gap: 30px;
}

.tour-image-container {
height: 180px;
}

.tour-image-placeholder {
font-size: 60px;
}

.tour-name {
font-size: 18px;
}

.tour-specs-row {
flex-wrap: wrap;
gap: 15px;
}
}