@charset "UTF-8";
/* CSS Document */
/*==================================================
　ヘッダー
===================================*/
header {
  position: relative;
  max-width: 1065px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -1rem;
}
header .logo-photo {
  /*position: relative;*/
  width: 100%;
  height: auto;
}
header .logo_space {
  background-color: rgba(0, 0, 0, 0.65);
  width: 18%;
  aspect-ratio: 1/1.628; /*h300pxの場合*/
  /*aspect-ratio: 1/1.735;*/ /*h320pxの場合*/
  position: absolute;
  left: 0px;
  top: 0px;
}
header .logo_space img {
  width: 100%;
  height: auto;
  margin-left: 10%;
  margin-top: 12%;
}
/*header .photo_space {}*/
header .photo_space img {
  width: 100%;
  height: auto;
}
header .photo_space .photo_credit {
  position: absolute;
  right: 0px;
  bottom: 0px;
  padding-bottom: 3.3%; /*←クレジット位置の微調整*/
  margin-right: 0.5%;
  font-size: 0.7rem;
  font-style: italic;
  color: whitesmoke;
}
/*==================================================
　ナビゲーション・メニュー
===================================*/
header #global-nav {
  position: static;
  /*left: 0;
    bottom: -2rem;*/
  max-width: 1065px;
  height: 2rem;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.65);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  z-index: 20;
}
/* 松本深志高校26回生 Official WebSite */
/*header #global-nav h2 {
  font-size: 0.8rem;
  width: fit-content;
  color: #fff;
  margin-left: 3rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  border-radius: 0.8rem;
  border: thin dotted #65A684;
}*/
header #global-nav p {
  color: #FFFFFF;
  font-style: italic;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
  /*font-weight: bold;*/
  font-size: 0.7rem;
  padding-left: 3.5%;
  margin-top: -6%;
  z-index: 10;
}
header #global-nav ul {
  display: flex;
  /*margin-left: auto;*/
  /*padding-right: clamp(0.5rem, -0.732rem + 5.26vw, 3rem);*/
}
header #global-nav ul li {
  font-weight: 700;
  font-size: 0.8rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  border-right: thin dotted #65A684;
}
header #global-nav ul li:last-child {
  padding-right: 0rem;
  border-right: none;
}
header #global-nav ul li a {
  color: #FFF;
}
/*////////////////////////////////////////////*/
@media screen and (max-width:1024px) {
  header #global-nav h2 {
    font-size: 0.7rem;
    margin-left: 1rem;
  }
}
/*////////////////////////////////////////////*/
@media screen and (max-width:768px) {
  header #global-nav p {
    font-size: 0.6rem;
    margin-bottom: 2%;
    padding-left: 3%;
    /*display: none;*/
  }
  header #global-nav ul {}
  header #global-nav ul li {
    font-size: 0.78rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
/*////////////////////////////////////////////*/
@media (max-width:480px) {
  header {
    margin-bottom: -1.4rem;
  }
  header #global-nav {
    height: 1.5rem;
    margin: 0 auto;
  }
  header #global-nav p {
    font-size: 0.35rem;
    margin-bottom: 3.5%;
    padding-left: 2.5%;
  }
  header #global-nav ul li {
    font-size: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  /*.main_left //////////////////////////////*/
  .left_contents {
    position: sticky;
    top: 1.5rem;
  }
  /*.main //////////////////////////////*/
  main .contents {
    display: grid;
  }
  main .contents .photo {
    width: 100%;
    height: auto;
  }
  main .contents .text {
    width: 100%;
    height: auto;
  }
  /*.main_right //////////////////////////////*/
  .right_contents {
    position: sticky;
    top: 1.5rem;
  }
}
/*////////////////////////////////////////////*/
@media screen and (max-width : 398px) {
  header #global-nav p {
    font-size: 0.35rem;
    margin-bottom: 4%;
    padding-left: 2.2%;
  }
  header #global-nav ul li {
    font-size: 0.5rem;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
}