@charset "utf-8";
body {
    margin: 0;
    min-height: 100vh;
    background-color: #000000;
    color: #ffffff;    

    display: flex;
    flex-direction: column;
}

h1, h3 {
  font-family: Futura , "Century Gothic" , sans-serif;
  margin:  50px 0px 5px -50px; 
}

h3 {
  font-family: Futura , "Century Gothic" , sans-serif , "ヒラギノ角ゴシック W6";
  letter-spacing: 0.05rem
}

/* ヘッダー ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.head {
  width: auto;
  height: 100px;
  background: linear-gradient(rgb(154, 154, 154), rgb(35, 35, 35));
  display: flex;
}
.head-text {
  display: flex;
}
.n {
  margin:  20px 0px 5px 50px;      
}
img[src="images/icon_N_w.png"] {
  width: 50%;

}

/* コンテンツ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */ 
.centor {
  flex: 1;
  margin: 50px 0;
}
.pictuer {
  display: flex;
  justify-content: center;
}
.pictuer img {
  width: 100%;
  max-width: 882px; 
  max-height: 1250px;
}
.title {
  display: flex;
  justify-content: center;
  margin: 50px 0;
}
/* リンクタグ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.border2 {
  border-top: 4px dotted rgb(53, 53, 53);
}
.link {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 40px;
  margin: 35px 0 35px 0;
}
.box {
  background-color: rgb(35, 35, 35);
  width: 180px;
  height: 50px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center; 

  font-family: "ヒラギノ角ゴシック";
}
.box:hover {
  background-color: rgba(75, 75, 75, 0.933);
}
a { 
  color: #ffffff; 
  text-decoration: none;
  text-align:center;
  font-size: 20px   
}

.border3 {
  border-top: 4px dotted rgb(53, 53, 53);
}

/* フッター ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 65px;
  background: linear-gradient(rgb(35, 35, 35),rgb(154, 154, 154));
}
.foot {
font-family: Futura , "Century Gothic" , sans-serif;
margin: 4px 0 0 0;
}



/* モバイル版 375x667 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */  
@media (max-width: 650px) {
  .head {
    height: 90px;
  }
  .n {
    margin:  15px 0px 5px 50px; 
  }
  h1 {
    margin:  45px 0px 5px -50px; 
  }

  .centor {
    margin: 0;
  }
  .pictuer{
    margin: 10px;  
  }
  .title {
    margin: 20px 0;
  }

  .link {
    display: flex;
    flex-direction: column;
    margin: 8px 0 8px 0;
  }
  .box { 
    margin: 8px;
  }
}


/* SE 320x568 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media (max-width: 330px) {
  .n {
    margin:  15px 0px 5px 30px; 
  }
  h1 {
    margin:  45px 0px 5px -50px; 
  }
  h3 {
    margin: 40px 0px 20px 0px;
  }

  .grid img { 
    margin: 15px 8px 30px 8px;
  }
}