/*文字の基本設定、文字コード。基準の大きさ*/
@charset "UTF-8";

/* Reset some default styles */
*{
 padding: 0;
 margin: 0;
 box-sizing: border-box
}

/*ここからbody*/

html{
    font-size: 100%;
}

/*カーソル*/
body{
    cursor: url('https://tamakodempoya.com/images/cursor1.cur'), auto;
}

button:hover, a:hover {
    cursor: url('https://tamakodempoya.com/images/cursor2.cur'), auto;
}

/*カーソルを事前読み込み*/
.preload {
    display: none;
}




p {
    line-height: 1.7;
    font-coor: rgba(255, 255, 255, 0.4);
}


/*header*/
html, body {
    height: 100%;
    margin: 0;
}



/*ヘッダー*/

header {
    
    width: 295px; /* 幅を100%に設定 */
    background-color: rgba(255, 255, 255, 0.4); /* 白色の20%透明 */
    color: white; /* 文字色を白に設定 */
    margin: 25px 5px;
    padding: 20px 20px; /* 内側の余白 */
    
}

nav ul {
    list-style: none; /* リストのスタイルを消す */
    padding: 0; /* 内側の余白を消す */
    margin: 0; /* 外側の余白を消す */
    /*display: flex; */
}

nav li {
    margin-right: 20px; 
    font-size: 110%;
    line-height: 2.2;
}

nav a {
    color: white; /* リンクの色を白に設定 */
    text-decoration: none; /* 下線を消す */
}

nav a:hover {
    text-decoration: underline; /* ホバー時に下線を表示 */
}


.custom-line {
    border: none; /* デフォルトの境界線を消す */
    height: 1.3px; /* 線の太さ */
    background-color: #fff; /* 線の色 */
    margin: 10px 0; /* 上下の余白 */
}




/*🟥＿＿＿＿＿＿＿＿＿メイン*/
main {
    flex: 1; /* 残りのスペースを埋める */
    display: flex;
    justify-content: center; /* 中央寄せ */
    align-items: center; /* 中央寄せ */
    color: white; /* テキストの色（必要に応じて変更） */
    text-align: center; /* 中央寄せ */
}

h1{
    font-size: 135%;
}

h2{
    font-size: 120%;
}


/*🟥＿＿＿＿＿＿＿＿＿ ボディ全体に背景画像 */
body {
    position: relative; /* 相対位置に設定 */
    font-family: 'Klee+One', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* ビューポートの高さに合わせる */
    line-height: 1.6;
    background-image: url('images/photos/2021/home.jpg'); /* 背景画像 */
    background-size: cover; /* 画像を全体にカバー */
    background-position: center; /* 画像を中央に配置 */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    overflow: hidden; /* コンテンツがはみ出さないように */
}



/* 🟥＿＿＿＿＿＿＿＿＿＿コメント画像を中央に配置 */
.message {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 600px;
    text-align: center;
}

/* 画像のスタイル */
.message img {
    width: 70%;
    height: auto;
}

/* フェードアウトアニメーション */
.fade-out {
    animation: fadeOut 1s ease-out forwards;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}





/*🟥＿＿＿＿＿＿＿＿＿＿＿フッター*/

footer {
    position: absolute; /* 絶対位置に設定 */
    bottom: 0; /* 画面の下部に配置 */
    width: 100%; /* 幅を100%に設定 */
    background-color: rgba(255, 255, 255, 0.3); /* 白色の20%透明 */
    color: #fff;
    padding: 10px 0;
    text-align: center;
    z-index: 1; /* 背景画像より前面に表示 */
}

footer .container {
    padding: 0 20px;
}

/* Media Query for small screens */
@media (max-width: 700px) {
    
    body {
    min-height: 100vh; /* ビューポートの高さに合わせる */
    
    
}

    
    
    footer {
    position: absolute; /* 絶対位置に設定 */
    bottom: 0; /* 画面の下部に配置 */
    width: 99%; /* 幅を100%に設定 */
    background-color: rgba(255, 255, 255, 0.3); /* 白色の20%透明 */
    color: #fff;
    padding: 10px 0;
    text-align: center;
    z-index: 1; /* 背景画像より前面に表示 */
}
}