@charset "utf-8";
* {
   box-sizing: border-box;
}
body {
   margin: 0;
   padding: 0;
   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background-color: #efefef;
   letter-spacing : 0.2em;
   font-size: 15px;
   color: gray;
}
article{
   position: relative;
}
main {
   position: relative;
}
.block-flex{
   display: flex;
}
.main-content{
   width: 70%;
   margin-left: 25%;
   position: relative;
}
article{
   width: 100%;
}
#content{
   width: 92%;
   margin-left: 5%;
   margin-right: 5%;
   text-align: justify;
   float: left;
}
#top-kv{
   width: 100%;
}
.img-top-kv{
   display: block;
   height: 94vmin;
   width: 94vmin;
   margin-left: auto;
   margin-right: auto;
   margin-top: 2%;
   margin-bottom: 2%;
}
.text-line {
   display: flex;
   align-items: center;
   margin-top: 10%;
   margin-bottom: 10%;
   width: 100%;
}
.text-line:before,
.text-line:after {
  content: "";
  flex-grow: 1;
  height: 0.5px; /* 線の太さ */
  background: gray; /* 線の色 */
}
.text-line:before  {
  margin-right: 5%;
}
.text-line:after {
  margin-left: 5%;
}
.text-line h1{
   font-size: 20px;
   font-weight: normal;
}
h2{
   font-size: 23px;
   font-weight: normal;
   margin-top: 7%;
   margin-bottom: 7%;
}
.sp {
   display: none;
 }
.right-alignment{
   text-align: right;
   display: block;
}
.prof-horizontal{
   display: flex;
}
.profil,
.logo-content{
   width: 50%;
   padding-left: 5%;
   padding-right: 5%;
   padding-bottom: 7%;
   float: left;
}
.logo-content {
   margin-top: 4%;
}
.profil img{
   width: 88%;
   border-radius: 50%;
   margin-right: 6%;
   margin-left: 6%;
}
.logo-content img{
   width: 100%;
   margin-top: 10%;
   margin-bottom: -10%;
}
.logo-cap{
   display: block;
   width: 80%;
   height: 80%;
   margin: 10%;
   background-color: white;
}
.logo-mp4 video{
   width: 100%;
   margin-top: 15%;
   margin-bottom: -16%;
   filter: drop-shadow(0px 0px #fff);
}
.prof-name{
   text-align: center;
   margin-bottom: 5%;
}
.prof-name small{
   display: block;
   text-align: right;
}
footer{
   position: relative;
   text-align: center;
   border-top: 1px solid gray;
   margin-top: 7%;
   margin-left:5%;
   margin-right: 5%;
   padding-top: 4%;
   padding-bottom: 4%;
}
.organization-title{
   margin-bottom: 1.5%;
   text-decoration: underline;
}
.organization-content{
   margin-left: 2.5%;
   margin-bottom: 7%;
}
.organization-content-member{
   margin-left: 2.5%;
}
table{
   width: 100%;
}
.member-pc td{
   width: 40%;
}
.member-sp{
   display: none;
}
/*正方形に近い時*/
@media screen and (max-width: 640px) , (max-height: 600px) {
   main {
      width: 100%;
      margin-left: 0;
      margin-top: 65px;
   }
   .main-content{
      width: 100%;
      margin-left: 0;
      position: relative;
   }
   #content{
      width: 80%;
      margin-left: 10%;
      margin-right: 10%;
      float: none;
   }
}

/*SP*/
@media screen and (max-width: 640px) {
   .img-top-kv{
      height: 98vw;
      width: 98vw;
      margin-left: 1vw;
      margin-right: 1vw;
      margin-top: 20%;
      margin-bottom: 8%;
   }
   .text-line {
      margin-top: 10%;
      margin-left: 0;
      margin-bottom: 10%;
   }
   .sp {
      display: block;
      text-align: center;
    }
    h2{
      text-align: center;
      margin-top: 13%;
      margin-bottom: 10%;
   }
   .profil,
   .logo-content {
      width: 100%;
      float: none;
   }
   .prof-horizontal{
      display: block;
   }
   .member-pc{
      display: none;
   }
   .member-sp{
      display: block;
   }
   .member-subtitle{
      width: 36%;
   }
   table{
      width: 100%;
   }
   footer{
      width: 84%;
      margin-top: 20%;
      margin-left: 8%;
      margin-right: 8%;
      padding-top: 6%;
      padding-bottom: 6%;
   }
}