/****** Base Style ******/
body {
    font-family: 'Zen Old Mincho', serif;
    margin: 0;
    padding: 0;
    background-size: cover;
    background-position: center;
    overflow: auto;
    /* または overflow-y: auto; で縦スクロールを許可 */
    height: 100vh;
    /* padding-top: 200px; */
}

.background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.8) blur(5px);
    z-index: -1;
    /* コンテンツの背後に配置 */
}

/* リンクのスタイル */
a {
    color: #ff7f50;
    /* リンクの色を薄い黄色に */
    text-decoration: none;
    /* 下線をなしに */
}

a:hover {
    color: #CCCCCC;
    /* ホバー時の色を薄いグレーに */
}

/****** Header ******/
header {

}

#header {
    transition: all 0.5s;
    background-color: transparent; /* 透明 */
    background-size: cover; /* 背景画像を領域全体にぴったりと表示 */
    background-position: center; /* 背景画像を中央に配置 */
    background-repeat: no-repeat; /* 背景画像を繰り返さない */
    color: white;
    text-align: center;
    height: 60px; /* 適切な高さに設定 */
    display: flex; /* flexboxレイアウトを使用 */
    justify-content: space-between; /* 子要素を両端に配置 */
    align-items: center; /* 子要素を垂直方向の中央に配置 */
    position: fixed; /* ヘッダーをページの上部に固定 */
    top: 0; /* 上端から0pxの位置に */
    left: 0; /* 左端から0pxの位置に */
    width: 100%; /* 幅を100%に設定 */
    z-index: 1000; /* 他の要素より前面に表示 */
}

#header.scrolled {
    background-image: url('images/header.jpg');/* 背景画像 */
  }

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 子要素を両端に配置 */
    width: 100%;
    padding: 2px 30px;
    /* 上下10px、左右30pxの余白 */
}

.logo-container img {
    width: 50px;
    height: 50px;
    margin-right: 20px;
}

/****** Navigation ******/
nav {
    /* flex-grow: 1; 余白を利用 */
    margin-left: auto;
}

nav ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin: 0 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

nav ul li a:hover {
    color: #cccccc;
}

nav ul li a span {
    display: block;
    margin-bottom: 2px;
}

/****** Content Section ******/
/* 共通セクションスタイル */
.content-section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw; /* ビューポート全体の幅 */
    min-height: 100vh; /* 最小高さをビューポートの高さに設定 */
    position: relative; /* 追加: 位置指定の基準点となる */
}

.content-section .container {
    max-width: 600px; /* テキストの最大幅 */
    padding: 40px 20px; /* 内側の余白 */
    background-color: transparent; /* 背景は透明に */
    z-index: 2; /* 前面に表示 */
    position: relative; /* 追加: 背景の上に表示されるように */
}

.container h2,
h3 {
    color: white;
    text-align: center;
    margin-bottom: 20px;
}

.container p {
    color: white;
    text-align: justify;
    margin-bottom: 20px;
}

/****** Body Section ******/
section {
    /* display: flex; */
    justify-content: center;
    align-items: center;
}


/****** Contact Form ******/
#contact-form {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px !important; /* 強制的に適用 */
    margin: 0 auto;
    margin-top: 20px;
}

#contact .container {
    width: 90%; /* コンテナの幅を拡大 */
    max-width: 1200px; /* または必要に応じて最大幅を調整 */
    margin: auto; /* 中央寄せ */
}


.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    width: 100%;
    color: white;
    /* ラベルの文字色を白に設定 */
}

input[type="text"],
input[type="email"],
textarea,
button[type="submit"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 5px;
    /* 各入力フィールドの間隔 */
    border: 1px solid #ccc;
    border-radius: 4px;
}

button[type="submit"] {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    /** 送信ボタンのパディングを調整 */
    font-size: 14px;
    /* 送信ボタンのフォントサイズを調整 */
    max-width: 80px;
    /* 送信ボタンの最大幅を150pxに設定 */
    width: 100%;
    /* 送信ボタンの幅を最大幅に合わせる */
}

/****** Specific Sections ******/
.content-section {
    width: 100vw;
    position: relative;
}

.content-section .container {
    max-width: 600px;
    margin: auto;
    position: relative;
    z-index: 2;
    padding: 40px 20px;
}

#about,
#hotate,
#furusato,
#contact {
    display: flex;
    align-items: center;
    justify-content: center;
}

#about {
    background: url('images/4.jpg') no-repeat center center/cover;
}

#about .container {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

#hotate {
    background: url('images/3.jpg') no-repeat center center/cover;
}

#furusato {
    background: url('images/1.jpg') no-repeat center center/cover;
}

#contact {
    background: url('images/6.jpg') no-repeat center center/cover;
}


/****** Footer ******/
footer {
    background-image: url('images/footer.jpg');
    color: white !important;
    /* テキスト色を白に設定し、!importantで強制適用 */
    background-size: cover;
    /* 背景画像を領域全体にぴったりと表示 */
    text-align: center;
    padding: 20px;
    /* 適宜調整 */
    width: 100%;
}

footer nav,
footer ul {
    justify-content: center;
    /* 中央揃え */
    align-items: center;
    /* アイテムを垂直方向に中央揃え */
}

footer ul li {
    margin: 0 10px;
}

footer .footer-address,
footer .footer-contact {
    margin: 5px 0;
    /* 上下に5pxのマージンを設定 */
    font-size: 14px;
    /* フォントサイズを14pxに設定 */
}

/* スマホ表示用のスタイル */
@media (max-width: 768px) {
    /* ヘッダーのパディングを調整 */
    header {
        padding: 10px 5%;
        position: static;
    }

    /* h1タグのフォントサイズを小さく */
    header h1 {
        font-size: 16px; /* 調整されたサイズ */
    }

    /* アイテムを縦に並べて中央揃え */
    .header-container {
        flex-direction: column;
        align-items: center;
    }

    /* ロゴのサイズを適宜調整 */
    .logo-container img {
        width: 40px;
        margin-bottom: 5px;
    }

    /* ナビゲーションリンクのフォントサイズを調整 */
    nav ul li a {
        font-size: 10px; /* 調整されたサイズ */
    }

    nav ul li a span {
        font-size: 8px; /* 調整されたサイズ */
    }

    /* furusatoセクションの返礼品画像のサイズを調整 */
    #furusato .rewards a img {
        width: 25%; /* 画像の幅を30%に調整 */
        margin: 5px; /* 余白の調整 */
    }

    /* 他のcontent-sectionのスタイルも調整が必要かもしれません */
    .content-section .container {
        padding: 20px; /* 内側の余白の調整 */
        text-align: left; /* テキストを左揃えに */
    }

    /* contact-formの幅を調整 */
    #contact-form {
        width: 65%; /* フォームの幅を90%に */
    }

    /* フォームフィールドのサイズを調整 */
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group textarea {
        padding: 12px; /* 内側のパディングを増やす */
    }

    /* 送信ボタンのサイズとマージンを調整 */
    button[type="submit"] {
        padding: 10px 20px; /* ボタンのパディングを調整 */
        margin-top: 10px; /* トップのマージンを調整 */
    }

    /* テキストのサイズや行間も調整することで、スマートフォンでの読みやすさを向上させる */
    .container p {
        font-size: 14px; /* フォントサイズを調整 */
        line-height: 1.4; /* 行間を調整 */
    }

    /* aboutセクションの縦書きのテキストがスマホで読みづらい場合は、横書きに変更する */
    #about .container {
        writing-mode: horizontal-tb; /* 横書きに変更 */
    }

    /* 画像サイズを画面幅に合わせて調整 */
    img {
        max-width: 100%;
        height: auto;
    }
}



/* 背景画像のエフェクト用 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
/* 初期状態ではセクションは見えない */
.content-section {
    opacity: 0;
    visibility: hidden;
  }

  /* .animate クラスが追加されたらアニメーションを開始 */
.animate {
    animation: fadeIn 2s ease-out forwards;
    visibility: visible; /* アニメーション開始と同時に要素を表示 */
  }

/** 鳥を飛ばす */

.bird {
    position: absolute;
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    animation: moving 16s linear infinite;
}

.bird.-type_2 {
    animation-delay: 1s;
}

.bird.-type_2:before,
.bird.-type_2:after {
    animation-delay: -2s;
}

.bird.-type_3 {
    animation-delay: 3s;
}

@keyframes moving {
    0% {
        top: 47vh;
        left: -2vw;
    }

    25% {
        top: 51vh;
        left: 23vw
    }

    100% {
        top: 47vh;
        left: 101vw;
    }
}

.bird:before,
.bird:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: black;
    transform: rotate(-30deg);
    transform-origin: right bottom;
}

.bird:before {
    width: 100%;
    height: 1px;
    animation: leftWing 8s linear infinite;
}

.bird:after {
    width: 1px;
    height: 100%;
    animation: rightWing 8s linear infinite;
}

@keyframes leftWing {
    0% {
        transform: rotate(-30deg);
    }

    2% {
        transform: rotate(-110deg);
    }

    4% {
        transform: rotate(-30deg);
    }

    6% {
        transform: rotate(-110deg);
    }

    8% {
        transform: rotate(-30deg);
    }

    10% {
        transform: rotate(-110deg);
    }

    12% {
        transform: rotate(-30deg);
    }

    30% {
        transform: rotate(-30deg);
    }

    42% {
        transform: rotate(-35deg);
    }

    72% {
        transform: rotate(-35deg);
    }

    74% {
        transform: rotate(10deg);
    }

    76% {
        transform: rotate(-30deg);
    }

    78% {
        transform: rotate(-110deg);
    }

    80% {
        transform: rotate(-30deg);
    }

    82% {
        transform: rotate(-110deg);
    }

    84% {
        transform: rotate(-30deg);
    }

    86% {
        transform: rotate(-110deg);
    }

    88% {
        transform: rotate(-30deg);
    }

    90% {
        transform: rotate(-110deg);
    }

    92% {
        transform: rotate(-30deg);
    }

    94% {
        transform: rotate(-110deg);
    }

    96% {
        transform: rotate(-30deg);
    }

    98% {
        transform: rotate(-110deg);
    }

    100% {
        transform: rotate(-30deg);
    }
}

@keyframes rightWing {
    0% {
        transform: rotate(30deg);
    }

    2% {
        transform: rotate(110deg);
    }

    4% {
        transform: rotate(30deg);
    }

    6% {
        transform: rotate(110deg);
    }

    8% {
        transform: rotate(30deg);
    }

    10% {
        transform: rotate(110deg);
    }

    12% {
        transform: rotate(30deg);
    }

    30% {
        transform: rotate(30deg);
    }

    42% {
        transform: rotate(35deg);
    }

    72% {
        transform: rotate(35deg);
    }

    74% {
        transform: rotate(0deg);
    }

    76% {
        transform: rotate(30deg);
    }

    78% {
        transform: rotate(110deg);
    }

    80% {
        transform: rotate(30deg);
    }

    82% {
        transform: rotate(110deg);
    }

    84% {
        transform: rotate(30deg);
    }

    86% {
        transform: rotate(110deg);
    }

    88% {
        transform: rotate(30deg);
    }

    90% {
        transform: rotate(110deg);
    }

    92% {
        transform: rotate(30deg);
    }

    94% {
        transform: rotate(110deg);
    }

    96% {
        transform: rotate(30deg);
    }

    98% {
        transform: rotate(110deg);
    }

    100% {
        transform: rotate(30deg);
    }
}