/* common body 2025.01.09 */
html {
     font-size:16px;
}
body {
  width:80%;
  margin:auto;
  background-image : linear-gradient(to bottom ,  #726250 , #413125  );
  background-repeat:repeat; 
} 
/* ------ header -------------  */
.header {
    margin: 10px auto;
    height: 80px;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
    "return title  name"
    "return subtitle   sub";
    column-gap: 16px;
    row-gap: 0;        /* 行間を詰める */
}
h2 {
    /* margin: 1rem auto; は不要になるので削除または調整 */
    margin: 0;
    font-size: 2.5vw;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    letter-spacing: 0.2rem;
    text-align: center; /* 文字を中央に */
    color: brown;
    text-shadow: 0 1px 0 #aaf, 0 3px 0 #aaf, 0 4px 10px rgba(0, 0, 0, .2);
    white-space: nowrap; /* 改行を防ぐ */s
    grid-area: title;
    line-height: 1.2;   /* 行の高さも詰めておくとより密着する */
 }

h4 {
   color:black;
   font-size:1.5vw ;
   text-shadow: 1px 1px 0px aliceblue;
   grid-area: subtitle;
   margin: 0;
   text-align:center;
   line-height: 1.2;   /* 行の高さも詰めておくとより密着する */
}

h6 {
   text-align: right;
   width: auto; /* 30%固定を解除 */
   margin: 0;
   color: black;
   font-size: clamp(10px, 1.0vw, 28px);
   text-shadow: 1px 1px 0px aliceblue;
   grid-area: name;
   align-self: start;
   justify-self: end;
   margin: 0;
}
.modoru {
    grid-area: return;
    text-align: left;
    margin-top:10px;
}

.videoframe {
      margin:0px auto;
      width:80%;
      }
.videoframe video  {
      border:5px groove #f0f8ff50;
      width:100%;
       }
.modoru a {
      color:aliceblue;
}
.modoru a:link , #modoru a:visited  { 
      text-decoration:none; 
      border:2px ridge ivory;
      color:ivory;
      text-shadow:1px 1px 0px black; 
      border-radius:5px;
      }
.modoru a:hover  {
     color:red;
     background-color:lime;
     }

.modoru a:link , #modoru a:visited  { 
      text-decoration:none; 
      border:2px ridge ivory;
      color:ivory;
      text-shadow:1px 1px 0px black; 
      border-radius:5px;
      }
.modoru a:hover  {
     color:red;
     background-color:lime;
     }
/*-------------- mobile responsive -----iphone6s --------------------*/
@media screen and  (max-width: 768px) { 
        body {
            width:90%;
        }
        .modoru , h6  {
                } 
         h2 {    
             font-size:4.0vw ;
         }
         h4 {    
             font-size:2.5vw ;
         }
   
       .videoframe {
             margin:0px auto;
             width:98%;
      }

}
/* --------------------------------------------------------------------- */