@charset "UTF-8";

/* ==========================================================================
   全般的なリセットと基本設定
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-index: border-box; /* paddingやborderを幅に含める設定 */
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    line-height: 1.7;
    background-color: #fff;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}


footer {
    background-color: #1a1a1a; /* 💡 背景色：少し高級感のあるダークグレー */
    color: #ffffff;            /* 💡 文字の色：白 */
    padding: 20px 20px;        /* 💡 上下に40px、左右に20pxのゆったりした余白 */
    text-align: center;        /* 💡 中の文字をきれいに中央寄せ */
    font-size: 15px;           /* 💡 コピーライトなので、少し小さめの文字サイズに */
    letter-spacing: 0.05em;    /* 💡 文字の間隔を少し広げて洗練された印象に */
}

/* ==========================================================================
   ここから下に、あなた好みのクールなデザインを書いていきます
   ========================================================================== */
header {
/* --- 💡 ここからヘッダー固定の魔法の2行 --- */
    position: sticky;  /* 💡 画面の特定の場所に吸い付かせる命令 */
    top: 0;            /* 💡 画面の「一番上（0ピクセル）」の位置で吸い付くように指定 */
    /* -------------------------------------- */

    /* 固定したときに後ろのコンテンツが透けないように、背景色を必ず指定します */
    background-color: #ffffff; 
    
    /* スクロールしたときに、他の画像やコンテンツより必ず「手前（上）」に表示させるお守り */
    z-index: 100; 

    /* 見た目の調整用（お好みで） */
    padding: 20px;
    background-color: #1a1a1a; /* 💡 背景色：少し高級感のあるダークグレー */
    color: #ffffff;            /* 💡 文字の色：白 */
    padding: 10px 20px;        /* 💡 上下に40px、左右に20pxのゆったりした余白 */
    text-align: center;        /* 💡 中の文字をきれいに中央寄せ */
    font-size: 20px;           /* 💡 文字サイズに */
    letter-spacing: 0.05em;    /* 💡 文字の間隔を少し広げて洗練された印象に */
}

.container {
    background-image: url('../images/book5.png');
    background-size: cover;    /* 💡 写真を歪ませず箱全体を覆う命令 */
    background-position: center; /* 💡 写真の真ん中を見せる */
    min-height: 70vh; 
    padding: 60px 20px; 
    box-sizing: border-box;
    border: 0px solid #ccc;
}

.visi {
    font-size: 25px;           /* 💡 文字サイズに */
    padding: 200px 20px 0px 20px;     /* 💡 上下に40px、左右に20pxのゆったりした余白 */
    text-align: center;        /* 💡 中の文字をきれいに中央寄せ */
    color: #ffffff;            /* 💡 文字の色：白 */
    font-weight: bold;   
}

.visi2 {
    font-size: 50px;           /* 💡 文字サイズに */
    text-align: center;        /* 💡 中の文字をきれいに中央寄せ */
    color: #ffffff;            /* 💡 文字の色：白 */
    font-weight: bold;   
}




.about {
    width: 90%;            /* スマホ画面などのために、画面幅の90%を基本とする */
    max-width: 1000px;     /* パソコンなどの大画面でも、これ以上は広がらない「枠の最大幅」 */
    margin-left: auto;     /* 左右の余白を自動計算して均等にする（中央寄せ） */
    margin-right: auto;    /* 左右の余白を自動計算して均等にする（中央寄せ） */
    font-size: 20px;           /* 💡 文字サイズに */
    padding: 10px 0px;  
}




.rogo {
    width: 90%;            /* スマホ画面などのために、画面幅の90%を基本とする */
    max-width: 1000px;     /* パソコンなどの大画面でも、これ以上は広がらない「枠の最大幅」 */
    margin-left: auto;     /* 左右の余白を自動計算して均等にする（中央寄せ） */
    margin-right: auto;    /* 左右の余白を自動計算して均等にする（中央寄せ） */
    font-size: 30px;           /* 💡 文字サイズに */
    text-align: center;        /* 💡 中の文字をきれいに中央寄せ */
    padding: 20px 20px;        /* 💡 上下に40px、左右に20pxのゆったりした余白 */
    display: flex;         /* 💡 中身（ロゴと文字）を横並びにする */
    align-items: center;   /* 💡 横並びにしたものの「上下中央」を揃える（最重要！） */
    gap: 15px;
    font-weight: bold;
    /* 💡 枠の境界線を分かりやすく確認したい場合は、一時的に以下を足してみてください */
    /* border: 1px solid #ccc; */
    /* padding: 20px; */
}




/* 表を囲むコンテナ（全体の横幅を中央寄せに合わせる） */
.table-container {
    width: 100%;
    max-width: 1000px; /* 他のコンテンツの横幅と合わせます */
    margin: 20px auto; /* 上下にゆったりとした余白 */
}

/* テーブル全体の共通設定 */
.minimal-table {
    width: 100%;
    border-collapse: collapse; /* 線の隙間をなくして綺麗な1本線にする */
    font-size: 16px;
    text-align: left; /* 文字を左寄せ */
    
    /* 💡 一番上の横線 */
    border-top: 1px solid #ccc; 
}

/* 各行（tr）の「下側」だけに横線を引く（縦線はなし） */
.minimal-table tr {
    border-bottom: 1px solid #ccc; 
}

/* マス目（th、td）の内側の余白 */
.minimal-table th,
.minimal-table td {
    padding: 18px 20px; /* 上下に広めの余白をとるのが美しく見せるコツです */
    vertical-align: middle; /* 文字の縦方向を中央に揃える */
}

/* 左側の列（th：見出し）の調整 */
.minimal-table th {
    width: 25%; /* 左側の列の横幅を30%に固定（お好みで調整してください） */
    font-weight: bold;
    color: #111;
}

/* 右側の列（td：中身）の調整 */
.minimal-table td {
    color: #444;
}