/* html, body の基本スタイル */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box; /* ボックスモデルの調整 */
    background: rgba(0, 0, 0, 0); /* 完全に透明 */; /* ページ全体の背景色 */
    color: #333; /* ページ全体の文字色 */
    overflow-x: hidden;
}
/* Google FontsのRobotoをインポート */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');

/* 全体のデフォルトフォント設定（Bootstrapデフォルトフォント） */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

/* Robotoを適用する部分 */
h1, h2, h3, h4, h5, h6, /* 見出し */
.header-sp, .header-pc, /* ヘッダー */
.pr-block h1, .pr-block p, /* PRブロック */
.timeline-section h2,.how-to-block h2,.pricing-section h2,.timeline-item .item-text, /* タイムライン */
.news-block h1, .news-block .news-title, .news-block .news-date, /* ニュースブロック */
.surf-map-header .header-title h1, .surf-cam-header .cam-header-title h1, /* サーフマップとライブカメラヘッダー */
button, .btn, /* ボタン */
.footer, .footer p /* フッター */
{
    font-family: 'Roboto', sans-serif;
}

/* Bootstrapデフォルトフォントを適用する部分 */
input, textarea, select, /* フォーム要素 */
.navbar, .dropdown-menu, /* ナビゲーションバーとドロップダウン */
.modal-content /* モーダル */
{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Ionicons（アイコンフォント）を適用する部分 */
.icon, .bi, i[class*="icon"], i[class*="bi"] {
    font-family: 'Ionicons', sans-serif !important;
}


* {
    font-weight: bold;
  }

/* //////////////////// ホームポイント //////////////////// */
/* 共通スタイル */
.homepoint-section {
    width: 100%;
    max-width: 1700px;
    padding: 0 20px;
    margin: 20px auto;
}

/* SP版のデザイン */
.homepoint-sp {
    display: flex; /* テキストとアイコンを横並びに */
    align-items: center; /* 垂直方向で中央揃え */
    justify-content: center; /* 水平方向で中央揃え */
    background-color: #09153C;
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
}

.homepoint-sp span {
    margin-right: 10px; /* アイコンとの間隔を空ける */
}

.homepoint-sp .icon {
    width: 18px; /* アイコンの幅 */
    height: 12px; /* アイコンの高さ */
}

/* SP版のホバー効果 */
.homepoint-sp:hover {
    background-color: #0B1D4A; /* ホバー時の色変更 */
}

/* PC版のデザイン */
.homepoint-pc {
    display: flex; /* Flexboxで横並び */
    background-color: #09153C; /* 背景色 */
    color: white;
    padding: 20px;
    border-radius: 0;
    text-align: left;
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: 100px; /* 高さを固定 */
    z-index: 1000;
    align-items: center; /* 垂直方向で中央揃え */
    gap: 20px; /* h4とiframeの間隔 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 影を追加 */
}


/* PC用のテキストスタイル */
.homepoint-pc h4 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap; /* テキストを1行で表示 */
    flex-shrink: 0; /* h4が縮まないようにする */
}

.homepoint-pc p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    flex-grow: 1; /* 説明文が余白を埋める */
}
.homepointIframe {
    flex-grow: 1; /* 残りのスペースを占有 */
    height: 100px; /* 高さを指定 */
    overflow: hidden;
    display: flex; /* Flexboxで配置 */
    justify-content: flex-start; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    box-sizing: border-box;
    margin: 0;
}
@media (max-width: 1024px) {
    .homepointIframe {
        width: 100%;
        height: 200px;
        /* align-items: unset; */
        flex-direction: column; 
        gap: 10px;
    }
}

.homepoint-pc .highlight {
    color: #FFD700; /* ゴールド (強調テキスト) */
    font-weight: bold;
}

.homepoint-pc .star {
    color: #FFD700; /* ⭐の色 */
    font-size: 16px;
}

/* レスポンシブ対応: 768px以上でPC版を表示、SP版を非表示 */
@media (max-width: 1003px) {
    .homepoint-sp {
        display: block; /* PCではSPデザインを非表示 */
    }

    .homepoint-pc {
        display: none; /* PCではPCデザインを表示 */
    }
}
@media (min-width: 1004px) {
    .homepoint-sp {
        display: none; /* PCではSPデザインを非表示 */
    }

    .homepoint-pc {
        display: flex; /* PCではPCデザインを表示 */
    }
}

/* //////////////////// ホームポイント //////////////////// */
@media (min-width: 769px) {
    .body-container {
        width: 100%;
        max-width: 1700px;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
    }
}
@media (max-width: 768px) {
    .body-container {
        padding: 0;
        margin: 0;
        width: 100%;
    }
}

.pr-block {
    position: relative; /* レイヤー管理のために相対配置 */
    display: flex;
    flex-direction: column; /* 上下に並べる */
    justify-content: center; /* 縦方向中央揃え */
    align-items: center; /* 横方向中央揃え */
    /* width: 100vw; */
    height: 100vh;
    margin: 0;
    padding: 0;
    text-align: center;
    overflow: hidden; /* 動画の余分な部分を非表示 */
    color: black; /* テキストの色 */
    width: 100%; /* 画面幅が狭い場合に対応 */
    margin: 0 auto; /* 中央揃え */
}

.bg-back {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* スクロールを無効化 */
    z-index: -1; /* 背景として設定 */
    pointer-events: none; /* 背景は操作不可 */
}
.bg-back iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300vh; /* 9:16 のアスペクト比 (16:9の逆バージョン) */
    height: 150vh; /* 縦方向いっぱいに表示 */
    pointer-events: none; /* 背景クリック無効 */
}

/* PRコンテンツ（上部ヘッダー） */
.pr-content {
    max-width: 600px; /* 最大幅を設定 */
    width: 100%; /* 幅を100%に */
    margin: 0 auto 20px auto; /* 下部に余白を追加 */
    text-align: center;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2; /* 必要なら背景との重なりを調整 */
}

.pr-content h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.2; /* 行間調整 */
}

.pr-content p {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

/* 検索ブロックのスタイル */
.search-block {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 2px solid #007bff; /* 青い枠線 */
    border-radius: 30px; /* 角を丸くする */
    padding: 10px 20px; /* 内側の余白 */
    max-width: 650px; /* 幅を制限 */
    gap: 10px;
    width: 90%;
    margin: 20px auto 0; /* 中央揃えと上部余白 */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
    position: relative;
    top: -20px; /* 上に移動 */
    background-color: rgba(232, 240, 254, 1);
}

/* 検索アイコンのスタイル */
.search-block i {
    font-size: 1.5rem;
    color: #007bff; /* アイコンの色を青に設定 */
    margin-right: 10px;
    font-weight: bold;
}

#searchForm {
    max-width: 600px;
    width: 100%;
}

/* 検索ボックスのスタイル */
.search-block input {
    border: none; /* 枠線を削除 */
    outline: none; /* フォーカス時の青枠を削除 */
    font-size: 16px;
    width: 100%; /* 入力欄の幅を最大化 */
    color: #333; /* テキストの色 */
    background-color: transparent !important; /* 背景色を完全に透明に */
    padding: 5px 0; /* 上下の余白 */
    font-weight: bold;
}

/* フォーカス時のスタイル */
.search-block input:focus {
    outline: none;
    box-shadow: none;
    background-color: transparent; /* 背景色を透明に */
}
input::placeholder {
    font-size: 13px; /* フォントサイズを指定 */
    color: gray;    /* 色も変更可能 */
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
    .pr-content {
        max-width: 90%; /* スマートフォンの画面幅に対応 */
    }

    .search-block {
        max-width: 100%; /* スマートフォンの画面幅に対応 */
    }
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
    .pr-content {
        max-width: 90%; /* スマートフォンの画面幅に対応 */
    }

    .search-block {
        max-width: 100%; /* スマートフォンの画面幅に対応 */
    }
}

/* 吹き出しのデザイン */
.chat-bubble {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 80%;
    height: 80%;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: none; /* 初期状態は非表示 */
    z-index: 1000;
}

.chat-bubble iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/****************************** priceセクション全体 ******************************/

/****************************** pricing-section ******************************/
.pc-price-container {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 100px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    flex-direction: column;
}
.pricing-section {
    flex: 3; /* PCでの横幅比率 */
    padding: 0;
    text-align: center;
    padding: 20px 40px;
}
.header-text h2 {
    font-size: 1.6rem; /* 統一フォントサイズ */
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: left; /* 左揃え */
}
@media (max-width: 768px) {
    .header-text h2 {
        text-align: center; 
    }
}

/****************************** unkown ******************************/
.unkown {
    flex: 1; /* PCでの横幅比率 */
    margin-top: 73px;
    padding:10px;
}

.unkown2 {
    flex: 1; /* PCでの横幅比率 */
    margin-top: 35px;
    padding:10px;
}

 /* PC用広告を表示、SP用広告を非表示 */
 .pc-only {
    display: block;
}
.sp-only {
    display: none;
}

/* PC広告のスタイル */
 .pc-only ins.adsbygoogle {
     display: block !important;
     width: 100% !important;
     height: auto !important; /* PC広告の高さを自動調整 */
     min-height: 250px !important; /* PC広告の高さを確保 余白を防ぐため最低の高さを設定 */
}

@media (max-width: 768px) {
   .unkown {
        /* display: block !important;  */
        margin: 20px auto !important; /* 上下の余白調整　SPアドセンス用-左右をautoにして中央表示 */
        text-align: center !important; /* 広告を中央配置　SPアドセンス用 */
    }

    .unkown2 {
        margin: 0 auto !important; /* 上下の余白調整　SPアドセンス用-左右をautoにして中央表示 */
        text-align: center !important; /* 広告を中央配置　SPアドセンス用 */
    }

    /* アドセンス用のCSS追加 */
    .unkown ins.adsbygoogle,
    .unkown2 ins.adsbygoogle {
        display: block !important;
        width: 100% !important;
        min-height: 100px !important; /* 高さを最低100px確保 */

    }

    /* SP用広告を表示、PC用広告を非表示 */
    .pc-only {
        display: none !important;
    }
    .sp-only {
        display: block;
        text-align: center; /* 広告を中央配置 */
    }

    /* SP用広告のサイズ指定 */
    .sp-only ins.adsbygoogle {
        display: block !important;
        width: 320px !important;
        height: 100px !important;
        max-height: 100px !important; /* 100px以上の広告が表示されないようにする */
        margin: 0 auto; /* 広告を中央配置 */
    }

}

/****************************** plans ******************************/
.plans {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

/* プランブロック */
.plan-block {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    text-align: center;
    width: 100%; /* SPでの横幅 */
    overflow: hidden;
}
.paid-plan,
.free-plan {
    flex: 1;
    max-width: 50%;
}

.plan-header {
    padding: 20px;
    color: white;
    font-weight: bold;
}

.plan-price {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.price-large {
    font-size: 64px;
    font-weight: bold;
    line-height: 1;
}

.price-small {
    font-size: 24px;
    margin-left: 4px;
}

.price-middle {
    font-size: 48px;
    margin-left: 4px;
}

.plan-features {
    display: grid;
    grid-template-columns: 1fr; /* 各リストアイテムを1列に */
    text-align: left;
    gap: 10px;
    padding: 30px;
    font-size: 14px;
    line-height: 1.5;
}

.plan-features li {
    display: grid;
    grid-template-columns: 3fr 2fr; /* 左右の要素比率 */
    gap: 10px;
    align-items: start;
}

.plan-note {
    font-size: 12px;
    color: #666;
    padding: 10px 20px;
    line-height: 1.5;
    text-align: center;
}

/****************************** ボタン ******************************/
.live-page-button {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: #06C755;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 300px;
    margin-bottom: 30px;
}

.live-page-button:hover {
    background-color: #04ad4a;
}

.upgrade-button {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: #FF2E2E;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 300px;
    margin-bottom: 30px;
}

.upgrade-button:hover {
    background-color: #e63946;
}

/****************************** レスポンシブ対応 ******************************/
/* SP表示（スマホ） */
@media (max-width: 768px) {
    .pc-price-container {
        flex-direction: column; /* 縦並び */
        padding: 0 15px; /* 横の余白 */
        background: transparent;
    }

    .pricing-section {
        width: 100%;
        padding: 0;
    }

    .plans {
        flex-direction: column; /* プランを縦並び */
        gap: 20px; /* SPでは余白を広めに */
    }

    .plan-block {
        max-width: 100%; /* SP時に横幅いっぱい */
    }
}

/* PC表示（デスクトップ） */
@media (min-width: 769px) {
    .pc-price-container {
        flex-direction: row; /* 横並び */
        width: 100%;
    }

    .plans {
        flex-direction: row; /* プランを横並び */
        gap: 20px; /* プラン間の余白を10pxに縮める */
    }

    .plan-block {
        flex: 1; /* 各プランの横幅均等 */
        max-width: 45%; /* プランの最大横幅 */
    }
}

/****************************** header-text ******************************/

.header-text.sp-only {
    display: none; /* デフォルト非表示（SP用） */
}

.header-text.pc-only {
    display: none; /* デフォルト非表示（PC用） */
}

/* SP表示 */
@media (max-width: 768px) {
    .header-text.sp-only {
        display: block; /* SP用のヘッダーを表示 */
    }
}

/* PC表示 */
@media (min-width: 769px) {
    .header-text.pc-only {
        display: block; /* PC用のヘッダーを表示 */
    }
}

/****************************** priceセクション全体 ******************************/


/* access-block セクション全体 */
.access-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent; /* 白背景 */
    padding: 40px 10px; /* セクションの上下左右の余白 */
    text-align: center;
}

/* コンテンツ部分 */
.access-content {
    background: transparent; /* 白背景 */
    padding: 20px;
    border-radius: 20px; /* 丸みをつける */
    display: inline-block;
    max-width: 600px; /* 最大幅を指定 */
    width: 100%; /* 横幅を親要素に合わせる */
    margin-bottom: 20px; /* 矢印との間隔 */
}

/* テキスト部分 */
.access-content p {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333; /* テキストの色 */
    line-height: 1.5; /* 行間を調整 */
    margin: 0;
}

/* 矢印部分 */
.access-arrow {
    width: 60px;
    height: 60px;
    background: url('../logo/arrow.png') center/contain no-repeat; /* 画像を背景として設定 */
    border-radius: 50%; /* 丸くする */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
    margin-top: 10px; /* 上部の余白 */
    background-color: rgba(255, 255, 255, 0.87);
}

.surfforecast-section {
    margin: 0;
}

.surfforecast-section iframe {
    width: 100%;
    height: 120vh;
    background-color: transparent;
}