@charset "utf-8";

/* ページ内スクロールを滑らかにする */
html {
    scroll-behavior: smooth;
}

/* 基本レイアウト（開始） */
* {
    text-align: center;

    /* border: 1px solid #ff0000; */

}

body {
    color: #5f5038;
    position: relative; /* 擬似要素の位置基準にする */
    min-height: 100vh;  /* 画面全体の高さを確保 */
}

/* 背景画像専用のレイヤーをつくる */
body::before {
    content: "";
    position: fixed;    /* 画面全体に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url(../images/logo-kurasas.png);
    background-position: center;
    background-repeat: no-repeat;

    /* ここで背景画像だけを透過させます */
    opacity: 0.1;       /* 0.1〜0.5くらいでお好みの薄さに調整してください */

    z-index: -1;        /* 文字や表の裏側に配置する */
}

/* タイトル行 */
.daimoku {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    background-color: #5f5038;
    background-attachment: fixed;
    color: aliceblue;
    font-size: 36px;
    /* text-align: center; */
    width: 70%;
    /* height: auto; */

    /* ▼ スクロール上部固定用の設定 ▼ */
    top: 0;
    /* padding-top: 20px; */
    z-index: 100;

    /* ▼ <p> タグの余白を文字サイズにフィットさせる調整 ▼ */
    p {
        margin: 0;           /* ブラウザ標準の不要な上下余白を消去 */
        padding: 12px 0;     /* 文字の上下にほんの少し余白をつける（お好みで変更可） */
        line-height: 1.2;    /* 行の高さを文字サイズにフィットさせる */

    }
}

/* タイトルがコンパクトになった分、全体の上の余白も調整 */
#main {
    padding-top: 90px;   /* タイトルが被らない程度の高さに調整 */

}

/* パンくずリスト */
#breadcrumb {
    width: 70%;          /* タイトルと同じ幅を指定 */
    margin: 10px auto 0; /* 中央に枠を配置 */

}

#breadcrumb ul {
    display: flex;
    justify-content: flex-start; /* 左寄せ */
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
}

#breadcrumb li a {
    text-decoration: underline;
}

/* 2つ目以降の li の前に区切り文字（>）を追加 */
#breadcrumb li + li::before {
    content: ">";
    padding: 0 8px; /* 区切り文字の左右余白 */
    color: #888;    /* 区切り文字の色 */

}

/* タイトル行の下のロゴ */
/* ロゴの上下余白（パンくずリストとの間隔調整） */
.logo-kurasas img {
    margin: 40px auto 60px auto; /* 上40px、下60px に調整するとバランスが良いです */
    width: 100px;

}

/* 表組み */
table {
    margin: auto;

    /* 表内の重複する罫線を消去する */
    border-collapse: collapse;

    th, td {
        /* 表内の罫線を定義する */
        border: 1px solid #6c5f45;
    }

}

/* バナー */
.hyo td img {
    width: 200px;
      
}

/* 電話番号 */
.tel-link {
    color: inherit;     /* 文字色を他のテキスト文字と同じ色にする */
    /* text-decoration: none; */      /* 下線キャンセル */

}

/* 特典内容 */
.hyo td:last-child {
    max-width: 250px;    /* 特典内容の最大幅 */
    text-align: left;
    font-size: 14px;

}

/* 表内の logo-kurasas.png 画像だけ透過度を変更 */
.hyo td img[src*="logo-kurasas.png"] {
    opacity: 0.4; /* 0.0（完全透明）〜 1.0（不透明）の間で調整 */
    width: 70px;

}

/* シックな特典バッジ */
/* バッジの右側の余白調整（バッジ側の margin-right は 0 または削除） */
.badge {
    flex-shrink: 0;            /* 文章が長くなってもバッジが潰れないように設定 */
    background-color: #5f5038;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;        /* 角丸 */
    margin-right: 6px;         /* バッジと文字の間隔 */
    display: inline-block;
}

/* 特典アイテムの並び設定 */
.tokuten-item {
    display: flex;             /* バッジと文章を横並びにする */
    align-items: flex-start;   /* 上端揃え */
    text-align: left;          /* テキスト左寄せ */
}

/*  { text-align: center; } を上書き打ち消す */
.tokuten-item span {
    text-align: left;
}

/* 特典が複数（特典1・特典2）ある場合の上下の間隔 */
.tokuten-item + .tokuten-item {
    margin-top: 6px;           /* 2つ目の特典との隙間 */
}

/* フッター */
footer {
    margin-top: 100px;
    margin-right: 20px;
    float: right;
    width: 100px;

    /* （上に／ホームページに）戻るボタン */
    .float-bottons {
        position: fixed;
        right: 20px;
        bottom: 20px;
        display: flex;         /* フレックスボックスを使用 */
        flex-direction: column;/* 中のボタンを「縦方向（上下）」に並べる */
        gap: 10px;             /* ボタン同士の上下の間隔 */
        z-index: 9999;         /* 他のコンテンツより最前面に表示 */

        /* ツールチップ */
        img {
            padding: 20px;
            opacity: 0.4;
            width: 50px;
            transition: opacity 0.3s; /* 0.3秒かけて滑らかに変化させる */

            &:hover {          /* マウスカーソルがポイントされている時の動作 */
                opacity: 0.7;
                cursor: pointer;

            }

        }

    }
}
/* 基本レイアウト（終了） */

/* レスポンシブデザイン対応 */
@media screen and (max-width:480px) {
    /* ▼ スマホ表示の時だけ背景画像のサイズを自動調整 ▼ */
    body::before {
        background-size: contain; /* または 80% auto など（下記参照） */
    }

    .daimoku {
        font-size: 18px;
        width: 90%; /* スマホではタイトルの幅を少し広くすると見やすいです */

    }

    header {
        margin: 0 auto;
        width: 95%;
    
    }

    /* スマホ用に上下の余白を少し小さく調整 */
    .logo-kurasas img {
        margin: 30px auto;
        width: 100px;

    }

    /* バナー */
    .hyo td img {
        width: 100px;
        
    }

}