*{margin:0;padding:0;}
body{
    height: 100%; margin: 0;
    font-family: "Noto Sans JP", sans-selif;
    background-image: url(../bg-image/sakurakai.png);
    background-repeat: no-repeat; background-attachment: fixed;
    background-size: cover; background-position: center;
}
header.video-header{
    position: relative;  width: 100%; height:200px;
    overflow: hidden; /* 動画のはみ出しを隠す */
    display: flex; justify-content: center;
}
.bg-video {position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; /* アスペクト比を保ったまま隙間なく表示 */
    z-index: -1; /* コンテンツの後ろに配置 */
}
img.logo{ 
    width:64%; margin:40px; 
    z-index: 1;
}
a.top{
    font-size:16px; color: white; 
    text-align:right; 
}
.contents{width:82%; margin: 40px 8% ;
    display:grid;
    grid-template-columns : minmax(0, 1fr) minmax(0, 0.16fr) minmax(0, 1fr) minmax(0, 0.16fr) minmax(0, 1fr);
    grid-template-rows :1fr 24px 1fr 24px 1fr 24px 1fr;
}
.item3{ grid-column: 3 / span 2; grid-row: 1 ; }
.item6{ grid-column: 2 / span 2; grid-row: 2 / span 2; }
.item12{ grid-column: 1 / span 2; grid-row: 4 / span 2; }
.item17{ grid-column: 4 / span 2; grid-row: 5 / span 2; }
.item22{ grid-column: 2 / span 2; grid-row: 7; }
P.intro{width:100%; text-align: left; font-weight:650;
}
main img{max-width: 100%; height: auto;
}
/* スマホ対応 */
/* @media screen and (max-width: 1024px){} */
@media screen and (max-width: 780px){
    .contents{
        display:grid;
        grid-template-columns : 1fr 0.2fr 1fr 0.2fr 0.2fr;
        /* minmax(0, 1fr) minmax(0, 0.16fr) minmax(0, 1fr); */
        grid-template-rows :auto;
        /* 1fr 0.1fr 1fr 0.1fr 1fr 0.1fr 1fr minmax(0, 0.1fr) 1fr; */
    }
    .item3{ grid-column: 3 / span 2; grid-row: 1; }
    .item6{ grid-column: 2 / span 2; grid-row: 2 / span 2; }
    .item8{ grid-column: 5 ; grid-row: 2 / span 2; }
    .item12{ grid-column: 2 / span 2 ; grid-row: 4 / span 2; }
    .item14{ grid-column: 5 ; grid-row: 4 / span 2; }
    .item17{ grid-column: 1; grid-row: 6 / span 2; }
    .item18{ grid-column: 2; grid-row: 6 / span 2; }
    .item21{ grid-column: 5 ; grid-row: 6 / span 2; }
    P.intro{ width:100%; text-align: left; font-weight:650;}
    main img{ max-width: 100%; height: auto;}
}
/* @media screen and (max-width: 480px){} */