/*トップページここから*/
/* リセット：余計な余白を消す */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* body の設定（背景色・フォントなど） */
body {
    background-color: rgb(70, 234, 176);
    font-family: fot-tsukubrdgothic-std, sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #6f756f;
}

/* 背景エリア（中央寄せ＋背景画像） */
.background {
    width: 100%;
    max-width: 1478px;
    margin: 0 auto;
    text-align: center;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}

/*トップロゴの位置調整*/
.top {
    text-align: center;
    padding: 60px 0 30px;
    margin-top: 40vh;
}
.nav-title-text{
    font-size: 150%;
}
/*タイトル画像のサイズ調整*/
.title {
    max-width: 250px;
    height: auto;
}

/* ナビゲーションの外枠（上下の線＋背景の透過） */
#index {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    margin: 20px 0; 
}

/* ナビゲーションの横並び設定 */
.main-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    height: 60px;
}

/*ナビ項目の縦線（区切り）*/
.main-nav li {
    display: flex;
    align-items: center;
}

/* 左側の縦線 */
.main-nav li::before {
    content: "|";
    color: #6f756f;
    font-weight: 100;
}

/* 右側の縦線（最後の項目のみ） */
.main-nav li:last-child::after {
    content: "|";
    color:#6f756f;
    font-weight: 100;
}

/* ナビゲーションのリンク設定 */
.main-nav li a {
    text-decoration: none;
    color: #6f756f;
    padding: 0 40px;
    font-size: 16px;
    letter-spacing: 0.05em;
    transition: opacity 0.3s;
}

/* ナビリンクのホバー効果 */
.main-nav li a:hover {
    opacity: 0.5;
}

/* メインイラストの配置 */
.main-illustration {
    text-align: center;
    margin-top: 300px;
}

/* メインイラストのサイズと影 */
.main-illustration img {
    max-width: 300px;
    width: 90%;
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

/* スクロールアニメーション（初期状態） */
.js-scroll-fade {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 3s, transform 3s;
}

/* スクロールで表示される状態 */
.js-scroll-fade.is-show {
    opacity: 1;
    transform: translateY(0);
}

/* フッターのデザイン */
footer {
    text-align: center;
    padding: 40px 0;
    color: #6f756f;
    font-size: 14px;
    font-weight:400;
}

/* 戻るボタンのデザイン */
.back-to-top {
    margin: 20px;
    text-align: center; /* 中央寄せ */
}

.back-to-top a {
    text-decoration: none;
    color: #6f756f;
    border: 1px solid #6f756f;
    padding: 8px 16px;
    border-radius: 20px; /* 角を丸くする */
    font-size: 14px;
    transition: all 0.3s;
}

/* ホバーした時（マウスを乗せた時）の色を変える */
.back-to-top a:hover {
    background-color: #6f756f;
    color: white;
}

/*トップページここまで*/

/*kunrenページここから*/
/* --- 1. 画面全体に色を広げる --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 余白を含めてサイズを計算する設定 */
}

/* --- 2. 画面全体（端から端まで）の設定 --- */
html, body {
    width: 100%;
    overflow-x: hidden; /* 横スクロールバーが出るのを防ぐ */
    background-color: #34548b; /* ★ここに好きな背景色を入れてください */
    
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #6f756f;
}

/* --- 3. コンテンツを囲むエリアの設定 --- */
.background {
    width: 100%;         
    padding: 40px 5%;   
    background-color: transparent; 
}

/* タイトルのデザイン */
h1 {
    text-align: center;
    font-size: 50px;
    margin: 40px 0 30px;
    border-bottom: 2px solid #c9f407;
    display: table;      /* 文字幅に合わせる */
    margin-left: auto;   /* 中央寄せ */
    margin-right: auto;  /* 中央寄せ */
    padding-bottom: 5px;
}

/* --- 4. テーブルを中央に配置 --- */
table {
    width: 100%;
    max-width: 1000px;   /* テーブルが広がりすぎないように制限 */
    margin: 0 auto 60px; /* 左右中央に配置し、下に隙間を作る */
    border-collapse: collapse;
    background-color: whitesmoke;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
    vertical-align: middle;
}

/* 画像の設定 */
table img {
    display: block;
    margin: 0 auto;
    max-width: 150px;
    height: auto;
}

/* フッターを画面端まで広げる */
footer {
    width: 100%;
    text-align: center;
    padding: 40px 0;
    background-color: #eee;
    margin-top: 50px;
}

/* 各セクションを囲むエリア */
.background {
    /* width: 90%;
    max-width: 900px;
    margin: 40px auto;    
    text-align: center;    */
    background-image: url(../images/neko_haikei_3.png);
    /* background-repeat: no-repeat;
    background-position: center -150px; */
    /* background-size: 50% ; */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.main-illustration{
    position: relative;
    top: 75px;
}