html{
        overflow-x: hidden;
    }


    body {
        font-family: 'Arial', sans-serif;
        line-height: 1.6;
        margin: 0;
        padding: 0;
        background: white;
        color: #333;
        overflow-x: hidden;
    }

    main {
    max-width: 800px;
    margin: 2em auto;
    padding: 0 1em;
    background: white;
    border-radius: 8px;
    }

    /*日付*/
    .news_days {
    margin-bottom: 0.5rem; /* 日付とタイトルの間を少しだけ空ける */
    font-size: 0.9rem;     /* 小さめで控えめに見せたい場合 */
    color: #666;           /* 薄めのグレーで日付らしさを出す */
    }

    /*タイトル*/
    .news_h1{
    margin-top: 0;         /* 日付との間の隙間をなくす */
    margin-top: 26.560px;
    margin-bottom: 26.560px;
    
    }

    .heading{
        margin-top: 200px;
    }

    /*===================================写真===================================*/

    /*section内のpの上に配置する写真*/
    .top-photo{
    width: 800px;
    height: auto;
    }

    /*section内のpの間に配置する写真*/
    .center-photo-wrap{
        display: flex;
        justify-content: center;  
        margin-right: 10%;
        max-width: 800px;
    }

    /*section内のpの下に配置する写真*/
    .down-photo{
    margin: 16px 0 0;
    }

    /*========================================================================*/


    
    .news_p{
        margin: 16px 0 0;
    }
    .news_h3{
        margin: 16px 0 0;

    }
    
    .news_section{
        margin: 50px 0 0;
    }
    

    h1, h2, h3 {
        color: black;
    }

    h2 {
    position: relative;
    padding-left: 1rem; /* テキストがバーと重ならないように */
    font-size: 1.5rem;
    }

    h2::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px; /* 太さ */
        height: 100%;
        background-color: #d60000; /* 赤色 */
    }
    ul {
        padding-left: 20px;
    }


    ul li{
        line-height: 2;
    }

    .ul_0416{
        margin: 16px 0 0;

    }
    
    /*=============================================================*/

    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    p, li, a {
        font-size: 16px;
    }
    /*=============================================================*/

    /*-----------------------------------
    sakura_block
    -----------------------------------*/
    #sakura_block{
        width: 100%;
    }
    #sakura_block .sakura_parts_box{
        position: relative;
    }
    #sakura_block .sakura_parts_box img{
        position: absolute;
    }
    #sakura_block .sakura_parts_box img:nth-child(2n+1){
        width: 13px;/*花びらのサイズ*/
    }
    #sakura_block .sakura_parts_box img:nth-child(2n){
        width: 15px;/*花びらのサイズ*/
    }
    
    /*-----------------------------------
    桜の花びらパーツの表示位置
    -----------------------------------*/
    img.parts_01{top: 0; left: 5%;}
    img.parts_02{top: 0; left: 12%;}
    img.parts_03{top: 0; left: 15%;}
    img.parts_04{top: 0; left: 22%;}
    img.parts_05{top: 0; left: 25%;}
    img.parts_06{top: 0; left: 28%;}
    img.parts_07{top: 0; left: 35%;}
    img.parts_08{top: 0; left: 40%;}
    img.parts_09{top: 0; left: 43%;}
    img.parts_10{top: 0; left: 50%;}
    img.parts_11{top: 0; left: 55%;}
    img.parts_12{top: 0; left: 60%;}
    img.parts_13{top: 0; left: 63%;}
    img.parts_14{top: 0; left: 70%;}
    img.parts_15{top: 0; left: 75%;}
    img.parts_16{top: 0; left: 81%;}
    img.parts_17{top: 0; left: 85%;}
    img.parts_18{top: 0; left: 90%;}
    img.parts_19{top: 0; left: 93%;}
    
    
    /*-----------------------------------
    舞い散るアニメーション
    回転しつつ上から下へ
    -----------------------------------*/
    @keyframes sakura {
        0% {
            opacity: 0;
        }
        20% {
            transform:translate(3px,30px) rotate(20deg);
            opacity: 1;
        }
        30% {
            transform:translate(0,50px) rotate(50deg);
        }
        50% {
            transform:translate(-20px,100px)  rotate(150deg);
        }
        70% {
            transform:translate(-40px,150px) rotate(-50deg);
            opacity: .8;
        }
        90% {
            transform:translate(-60px,200px) rotate(-180deg);
        }
        100% {
            transform:translate(-70px,230px);
            opacity: 0;
        }
    }
    
    .sakura_parts_box img {
        animation: sakura linear 6s infinite;
        /*アニメーションが始まるまで画像を見えなくしておく*/
        opacity: 0;
    }
    
    /*-----------------------------------
    アニメーションが始まるまでの時間
    -----------------------------------*/
    img.parts_01,img.parts_04,img.parts_07,img.parts_10,img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
    }
    img.parts_02,img.parts_05{
        -webkit-animation-delay: 1.5s;
        animation-delay: 1.5s;
    }
    img.parts_03,img.parts_06,img.parts_09,img.parts_12{
        -webkit-animation-delay: 4s;
        animation-delay: 4s;
    }
    img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }
    img.parts_14,img.parts_17{
        -webkit-animation-delay: 2s;
        animation-delay: 2s;
    }
    img.parts_15,img.parts_18{
        -webkit-animation-delay: 5s;
        animation-delay: 5s;
    }

    /*=============================================================*/


    .gradation01 {
    width: 600px;
    height: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    }

    /* ホバーでふわっと浮く */
    .link-button:hover .gradation01 {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    }

    /* クリック時に少し沈む */
    .link-button:active .gradation01 {
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    .gradation-warap {
    text-align: center;
    padding: 20px;
    }

    /*=====================各サイズ 横並びのやつ========================================*/

    .size01 {
    font-family: sans-serif;
    margin: 20px;
    }

    .size02 {
    font-family: sans-serif;
    margin: 20px;
    }

    .size03 {
    font-family: sans-serif;
    margin: 20px;
    }

    .box-wrap {
    width: 800px;
    display: flex;
    gap: 0; /* 子要素間の隙間なし（必要なら変更） */
    margin: 0 auto; /* 中央寄せしたい場合 */
    align-items: center;
    }

    .text-wrap {
    width: 400px;
    padding: 10px 20px; 
    box-sizing: border-box;
    }

    .img-wrap01 {
    width: 400px;
    padding: 10px;
    box-sizing: border-box;
    }

    .flex-img {
    width: 80%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .all-size-img{
    width: 800px;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    }
    /*=============================================================*/
    @media (max-width: 768px) {

        .gradation01{
        width: 90%;      
        height: auto;
        
    }


    /*=============================================================*/
    .top-photo{
    width: 800px;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;  
    }
    
    .down-photo{
        width: 800px;
        height: auto;
        max-width: 100%;
        display: block;
        margin: 0 auto;  
        }
    
    
    h1 {
        font-size: 24px;
    }

    h2 {
        margin-top: 10px;
        margin-bottom: 10px;      /* ----------------250425修正箇所---------------- */
        font-size: 20px;
    }

    h3 {
        font-size: 16px;
    }

    p, li, a {
    font-size: 14px;     /* ----------------250425修正箇所---------------- */
    }

    .text-1inch{
        margin-top: 40px;
    }

    main {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    section {
    margin-top: 30px;
    }

    /*=============================================================*/

    .img-wrap img{
    width: 40%;

    }

    .box-wrap {
        display: block; /* flex解除 → 縦並びに */
        width: 100%;
        padding: 0 10px; /* 画面端との余白を確保 */
    }

    .text-wrap,
    .img-wrap01 {
        width: 100%;
        padding: 10px 0;
    }

    .flex-img {
        width: 80%; /* 少し広げてもOK */
        margin: 0 auto; /* 中央揃え */
    }

    .all-size-img {
        width: 100%;
    }



    }