@charset "UTF-8";
 /* --- リセット & 基本設定 --- */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: "Noto Sans JP", sans-serif;
            background-color: #f9f8f4; /* ホテルのような温かみのあるオフホワイト */
            color: #333;
            line-height: 1.8;
            -webkit-font-smoothing: antialiased;
        }

        h1, h2, h3, .serif-font {
            font-family: "Zen Old Mincho", serif;
            letter-spacing: 0.05em;
        }

        a { text-decoration: none; transition: opacity 0.3s, transform 0.3s; }
        a:hover { opacity: 0.8; }
        img { max-width: 100%; height: auto; vertical-align: bottom; }

        /* --- レイアウトユーティリティ --- */
        .full-wide {
            width: 100%;
            position: relative;
        }

        .inner-container {
            max-width: 1080px;
            margin: 0 auto;
            padding: 80px 20px;
            position: relative;
        }

        .text-center { text-align: center; }
        .text-accent { color: #b48a5f; font-weight: bold; } /* 高級感のあるゴールドベージュ */
        .text-emphasis { font-weight: bold; background: linear-gradient(transparent 60%, #fff3cd 60%); }

        /* --- ボタンデザイン --- */
        .btn-cta {
            display: inline-block;
            background-color: #ff7f00; /* 信頼感のあるネイビー */
            color: #fff;
            padding: 18px 40px;
            font-size: 1.1rem;
            font-weight: 500;
            letter-spacing: 0.1em;
            border: 1px solid #ff7f00;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(26, 44, 78, 0.3);
        }
        .btn-cta:hover {
            background-color: #fff;
            color: #ff7f00;
            transform: translateY(-2px);
        }
        .btn-sub-text {
            display: block;
            font-size: 0.8rem;
            margin-bottom: 5px;
            font-family: "Noto Sans JP", sans-serif;
            opacity: 0.9;
        }

        /* --- 1. FV (フルワイド) --- */
        .hero {
            height: 85vh;
            min-height: 700px;
            background-image: url('images/main.jpeg'); /* いわきの食イメージ */
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.4); /* 画像を暗くして文字を読ませる */
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: #fff;
            max-width: 1080px;
            padding: 0 20px;
        }

        .hero-catch {
            font-size: 3.2rem;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 60px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }
        .hero-sub {
            font-size: 1.2rem;
            margin-bottom: 40px;
            font-weight: 500;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(5px);
            display: inline-block;
            padding: 15px 30px;
            border: 1px solid rgba(255,255,255,0.4);
        }
        
        /* FV内の画像レイアウト */
        .hero-visuals {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 40px;
            align-items: center;
        }
        .ticket-visual {
            width: 300px;
            transform: rotate(-5deg);
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            border: 2px solid #fff;
        }

        /* --- セクション共通タイトル --- */
        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }
        .section-title {
            font-size: 2.4rem;
            color: #1a2c4e;
            margin-bottom: 15px;
        }
        .section-subtitle {
            font-size: 1rem;
            color: #b48a5f;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            font-weight: bold;
        }

        /* --- 2. 導入・背景 --- */
        .intro-text {
            max-width: 800px;
            margin: 0 auto 50px;
            text-align: justify;
        }
        
        .portal-sites {
            background-color: #fff;
            padding: 40px;
            border: 1px solid #e0e0e0;
            text-align: center;
        }
        .portal-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        .portal-tag {
            border: 1px solid #ccc;
            padding: 10px 20px;
            font-size: 0.9rem;
            color: #555;
            font-weight: 600;
            background: #fff;
        }

        /* --- 3. メリット (3カラム) --- */
        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        .benefit-card {
            background: #fff;
            padding: 40px 30px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
            transition: transform 0.3s;
            border-top: 3px solid #b48a5f;
        }
        .benefit-card:hover { transform: translateY(-5px); }
        .benefit-num {
            font-family: "Zen Old Mincho", serif;
            font-size: 3rem;
            color: #f2f2f2;
            font-weight: 900;
            line-height: 1;
            margin-bottom: -20px;
            position: relative;
            z-index: 1;
        }
        .benefit-title {
            font-size: 1.3rem;
            color: #1a2c4e;
            margin-bottom: 20px;
            position: relative;
            z-index: 2;
        }
        .benefit-title.special { color: #c0392b; } /* 無料特典は赤系で強調 */

        /* --- 4. 手順 (ステップ) --- */
        .steps-wrapper {
            max-width: 900px;
            margin: 0 auto;
        }
        .step-item {
            display: flex;
            gap: 30px;
            margin-bottom: 40px;
            align-items: flex-start;
        }
        .step-num {
            font-family: "Zen Old Mincho", serif;
            font-size: 1.5rem;
            color: #b48a5f;
            border: 1px solid #b48a5f;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .step-content { flex: 1; padding-top: 5px; }
        .step-title {
            font-size: 1.2rem;
            color: #1a2c4e;
            margin-bottom: 10px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            display: inline-block;
        }

        /* --- 5. 注意事項 --- */
        .caution-box {
            background-color: #fff5f5;
            border-left: 5px solid #c0392b;
            padding: 30px;
            margin: 40px auto;
        }
        .caution-title {
            color: #c0392b;
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }

        /* --- 6. クロージング --- */
        .closing-section {
            background-color: #fff;
            border-top: 1px solid #eee;
        }
        .closing-content {
            max-width: 700px;
            margin: 0 auto;
            text-align: center;
        }

        /* --- フッター --- */
        footer {
            background-color: #1a2c4e;
            color: #8a9bb5;
            text-align: center;
            padding: 30px;
            font-size: 0.8rem;
        }

        /* --- レスポンシブ --- */
        @media (max-width: 768px) {
            .hero-catch { font-size: 2rem; }
            .hero-sub { font-size: 0.9rem; padding: 10px; }
            .ticket-visual { width: 200px; }
            .benefits-grid { grid-template-columns: 1fr; gap: 20px; }
            .step-item { gap: 15px; }
            .section-title { font-size: 1.8rem; }
            .inner-container { padding: 50px 20px; }
        }