@charset "utf-8";
/* CSS Document */

@media screen and (min-width:769px) and (max-width: 1023px) {
   body {
    background-image: url("https://hakumonsai.weblike.jp/2025/01_test/02_Daigo/apibato/img/apiibato_haikei_b.png") !important;
    background-size: 2700px; /* 背景画像を画面全体にフィット */
    background-position: center; /* 背景画像を中央に配置 */
    background-repeat: no-repeat; /* 背景画像を繰り返さない */
}
 
    .article {
        padding: 0% 7%;
        letter-spacing: 0.05em;
        margin-bottom: 7rem;
    } 

    .rogo {
    width: 70%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
 
    .subtitle {
        margin-top: 8rem;
        margin-bottom: 2rem;
        font-family: dnp-shuei-shogomincho-std, serif;
        font-style: normal;
        font-weight: 500;
        font-size: 25px;
        display: inline-block;
        border-left: 5px double #384159;
        padding: 2px 8px;
        color: #384159;
        letter-spacing: 0.05em;
    }

    .apibatonituite {
        margin-top: 4rem;
        text-align: center;
        background-image: url("http://hakumonsai.weblike.jp/2025/01_test/02_Daigo/apibato/img/apibato_tizuaka.png");
        background-size: contain; /* 背景画像を要素内に収める */
        background-position: center; /* 背景画像を中央に配置 */
        background-repeat: no-repeat; /* 背景画像を繰り返さない */
        padding: 50px 10%; /* 横方向の余白を10%に設定 */
        color: #691c2a; /* PCの文字色に変更 */
        min-height: 580px; /* 背景を確実に表示するための最小高さを設定 */
        width: 100%; /* 横幅を全体に広げる */
        max-width: 1200px; /* 必要に応じて最大幅を設定 */
        margin-left: auto; /* 中央揃え */
        margin-right: auto; /* 中央揃え */
        display: flex; /* 子要素を中央揃えするためにFlexboxを使用 */
        flex-direction: column; /* 子要素を縦方向に配置 */
        justify-content: center; /* 縦方向の中央揃え */
        align-items: center; /* 横方向の中央揃え */
      }

    .syousai img,
    .danntai img,
    .rennraku img {
        margin-top: 10px;
        margin-bottom: -30px;
        margin-left: -30px;
        width: 215px;
        height: auto;
        animation: wave-flag 4s ease-in-out infinite; /* 無限ループでアニメーション */
        transform-origin: left center; /* アニメーションの基点を旗の左端に設定 */
        perspective: 1000px; /* 3D効果を強調 */
    }

    .rennraku img {
        margin-top: 10px;
        margin-bottom: -30px;
        margin-left: -30px;
        width: 215px;
        height: auto;
        animation: wave-flag 4s ease-in-out infinite; /* 無限ループでアニメーション */
        transform-origin: left center; /* アニメーションの基点を旗の左端に設定 */
        perspective: 1000px; /* 3D効果を強調 */
    }

    @keyframes wave-flag {
        0% { transform: rotateX(0deg) rotateY(0deg) translateZ(0); }
        10% { transform: rotateX(5deg) rotateY(5deg) translateZ(5px); }
        20% { transform: rotateX(10deg) rotateY(-5deg) translateZ(10px); }
        30% { transform: rotateX(5deg) rotateY(5deg) translateZ(5px); }
        40% { transform: rotateX(0deg) rotateY(0deg) translateZ(0); }
        50% { transform: rotateX(-5deg) rotateY(-5deg) translateZ(-5px); }
        60% { transform: rotateX(-10deg) rotateY(5deg) translateZ(-10px); }
        70% { transform: rotateX(-5deg) rotateY(-5deg) translateZ(-5px); }
        80% { transform: rotateX(0deg) rotateY(0deg) translateZ(0); }
        90% { transform: rotateX(5deg) rotateY(5deg) translateZ(5px); }
        100% { transform: rotateX(0deg) rotateY(0deg) translateZ(0); }
    }
 
      .text {
        font-family:sicselifgothicre, serif; /* PCのフォントに変更 */
        font-style: normal;
        font-weight: 550;
        font-size: 21px;
        color: #691C2A; /* PCの文字色に変更 */
        letter-spacing: 0.05em;
    }

    .text2{
        font-family:sicselifgothicre, serif; /* PCのフォントに変更 */
        font-style: normal;
        font-weight: 550;
        font-size: 16px;
        color: #691C2A; /* PCの文字色に変更 */
        letter-spacing: 0.05em; 
        margin-top: 5rem;
    }
    .text3{
        font-family: sicselifgothicre, serif; /* PCのフォントに変更 */
        font-style: normal;
        font-weight: 550;
        font-size: 16px;
        color: #691C2A; /* PCの文字色に変更 */
        letter-spacing: 0.05em; 
    }

    .text4{
        font-family:sicselifgothicre, serif; /* PCのフォントに変更 */
        font-style: normal;
        font-weight: 550;
        font-size: 14px;
        color: #691C2A; /* PCの文字色に変更 */
        letter-spacing: 0.05em; 
        margin-top: 2rem;
    }

     .text5{
      font-family: sicselifgothicre, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 18px;
        color: 	#c75467;
        letter-spacing: 0.05em; 
    }

    .rennrakutext {
        background-color: #fffef9; /* PCの背景色に変更 */
        border: 2px solid #ca4d4d; /* PCの枠線色に変更 */
        padding:20px; /* 内側の余白を設定 */
        border-radius: 5px; /* 角を少し丸くする（必要に応じて調整） */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影を追加（オプション） */
      }

      .hune {
        width: 145px; /* 画像の幅を調整 */
        height: auto; /* アスペクト比を維持 */
        margin-left:520px;
        margin-top: 15px;
        margin-bottom: -180px;
        opacity: 0; /* 初期状態で透明にする */
        transform: translateY(100px) scale(0.8); /* 初期位置をさらに下にずらす */
        transition: opacity 2s ease, transform 2s ease; /* スムーズなアニメーションをさらに遅く設定 */
      }
      
      .hune.animate {
        opacity: 1; /* 表示 */
        transform: translateY(0) scale(1); /* 元の位置に戻す */
        animation: hune-animation 6s ease-in-out forwards, hune-sway 4s ease-in-out infinite; /* 出現後に揺れ続けるアニメーションをさらに遅く設定 */
      }
      
      @keyframes hune-animation {
        0% {
          transform: translateY(50px) scale(0.8); /* 下にずらし、少し小さく */
        }
        50% {
          transform: translateY(-10px) scale(1); /* 上に移動し、元の大きさに */
        }
        100% {
          transform: translateY(0) scale(1); /* 元の位置に戻す */
        }
      }

      @keyframes hune-sway {
        0% {
            transform: translateY(0); /* 初期位置 */
        }
        50% {
            transform: translateY(-10px); /* 上に移動 */
        }
        100% {
            transform: translateY(0); /* 元の位置に戻る */
        }
      }

      .kaji {
        width: 200px; /* huneと同じ幅に設定 */
        height: auto; /* アスペクト比を維持 */
        opacity: 0; /* 初期状態で透明にする */
        transform: translateY(100px) scale(0.8); /* 初期位置をさらに下にずらす */
        transition: opacity 2s ease, transform 2s ease; /* スムーズなアニメーションをさらに遅く設定 */
        margin-left: 495px; /* 必要に応じて位置を調整 */
        margin-bottom: -190px;
        margin-top: 25px;
      }
      
      .kaji.animate {
        opacity: 1; /* 表示 */
        transform: translateY(0) scale(1); /* 元の大きさに戻す */
        animation: spin 8s linear infinite; /* 回転速度をさらに遅く設定 */
      }
      
      @keyframes spin {
        0% {
          transform: rotate(0deg); /* 初期状態 */
        }
        100% {
          transform: rotate(360deg); /* 360度回転 */
        }
      }

      .custom-link {
    color: #c75467; /* リンクの文字色を赤に設定 */
    text-decoration: none; /* 下線を削除（必要に応じて） */
}
.custom-link:hover {
    color: #F69C9F; /* ホバー時の文字色を緑に設定 */
    text-decoration: underline; /* ホバー時に下線を追加（必要に応じて） */
}
 
 
 
}