@charset "Shift_JIS";

/*--------------------------------------------------------
  フルCSSプロフェッショナルテンプレート部品設定
--------------------------------------------------------*/

.hpb-parts-cnt-style {
    border-color: #dddddd;
}

.hpb-parts-hl-style {
    border-color: #E96E3C;
    padding-left: 20px !important;
}

.hpb-parts-cbox-style {
    border-color: #dddddd;
}

.hpb-parts-hr-style {
    border-color: #dddddd;
}

.hpb-parts-pbox-style {
    border-color: #dddddd;
}
.hpb-parts-pbox-style h4 {
    padding: 0px;
}

.hpb-parts-blist-style {
    border-color: #333333;
    background-color: #f3f3f3;
}
a.hpb-parts-blist-style:link {
    color: #000000;
}
a.hpb-parts-blist-style:visited {
    color: #000000;
}
a.hpb-parts-blist-style:hover {
    color: #E96E3C;
}
a.hpb-parts-blist-style:active {
    color: #E96E3C;
}

/*--------------------------------------------------------
  ユーザー設定スタイル
--------------------------------------------------------*/
/* スマートフォン（画面幅767px以下）向けのコード */
@media screen and (max-width: 767px) {
    /* 記事内の画像を横幅いっぱいにする */
    #content img, 
    .entry-content img,
    div img { /* お使いのテンプレートに合わせて調整 */
        width: 100% !important; /* 横幅を画面いっぱいに */
        height: auto !important; /* 高さは自動調整（歪ませない） */
        max-width: 100% !important; /* 画面からはみ出させない */
        display: block; /* 画像の下に余計な隙間を作らない */
        margin: 10px auto; /* 上下に少し余白を作り、中央に配置 */
    }
}
/* 同じくスマホ向けのコード内に追加 */
@media screen and (max-width: 767px) {
    /* 画像の下の説明文（pタグやspanタグ） */
    .wp-caption-text, 
    .gallery-caption,
    img + p { /* 画像の直後のpタグ */
        font-size: 14px !important; /* 文字を少し小さくして見やすく */
        text-align: center; /* 中央寄せ */
        color: #555; /* 少し薄い色にして本文と区別 */
        margin-top: 5px; /* 画像との間隔を詰める */
        padding: 0 10px; /* 左右に少し余白を作る */
    }
}

/* マップをレスポンシブにするための設定 */
.map-responsive {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9の比率で高さを確保（スマホでも潰れない） */
    overflow: hidden;
    margin: 20px 0;
    border-radius: 10px; /* 角を丸くするとスマホで見栄えが良くなります */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 軽い影で地図の境目をはっきりさせる */
}

.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}




/* --- モバイル用固定ナビゲーション --- */
@media screen and (max-width: 768px) {
    body { 
        padding-bottom: 70px !important; /* メニューの高さ分、下に余白 */
    }
    
    .mobile-nav {
        position: fixed; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        height: 70px;
        display: flex; 
        box-shadow: 0 -3px 12px rgba(0,0,0,0.15);
        z-index: 9999;
    }
    
    .nav-item {
        flex: 1; 
        text-align: center; 
        display: flex; 
        flex-direction: column;
        justify-content: center; 
        align-items: center; 
        font-size: 12px;
        font-weight: bold; 
        text-decoration: none; 
        border-right: 1px solid rgba(255,255,255,0.2);
    }

    /* 1. 海況ログ：明るい水色 */
    .nav-item:nth-child(1) {
        background-color: #e0f7fa; 
        color: #007b9d;
    }

    /* 2. 電話：クリオネブルー */
    .nav-item:nth-child(2) {
        background-color: #0077b6;
        color: #ffffff;
    }

    /* 3. LINE予約：公式グリーン */
    .nav-item.line {
        background-color: #06C755;
        color: #ffffff;
        border-right: none;
    }

    /* アイコンサイズ */
    .nav-item span { 
        font-size: 20px; 
        margin-bottom: 2px; 
    }
}

/* PCでは非表示 */
@media screen and (min-width: 769px) { 
    .mobile-nav { display: none; } 
}