@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{
  display: block;
}
html{
  height:100%;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
}
body{
  width : 100%;
  height : 100%;
  padding : 0;
  margin : auto;
  line-height:1;
}
img,video{
  width : 100%;
  height: auto;
}
hr{
  border-width: 0;
  border-style: solid;
  border-color: silver;
  clear : both;
}
a{
  color : #ffffff;
  text-decoration: none;
}
a:hover{
  color: #c0c0c0;
}
ul{
  list-style : none outside;
}
/*ヘッダー部分*/
header{
  width : 100%;
  height : 65%;
  padding : 0;
  margin : auto;
  position: relative;
  background-image : url(bgi_main.jpg);
  background-repeat : no-repeat;
  background-position : left center;
  background-size : cover;
}
@media screen and (max-width: 800px) {
  header{
  background-image : url(bgi_main_r.jpg);
}
}
header.top_p{
  background-attachment : fixed;
}
header div.catch{
  width : 10%;
  padding : 0;
  margin : auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  text-align : center;
}
header div.catch img{
  max-width : 60px;
}
.article header{
  height : 20%;
}
/*メニュー部分*/
nav{
  width: 100%;
  height : 50px;
  position : fixed;
  background : none 0% 0% / auto auto repeat scroll padding-box border-box rgba(0, 64, 128, 0.8);
  top : 0px;
  left : 0px;
  z-index : 500;
}
nav h1{
  margin : 5px 60px 5px 0px;
  background-image : url(img_mark.png);
  background-repeat : no-repeat;
  background-position : left center;
  background-size : contain;
  height : 40px;
}
nav a{
  color : #ffffff;
  text-decoration: none;
}
nav a:hover{
  color: #c0c0c0;
}
nav img{
  margin : auto auto auto 45px;
  object-fit: contain;
  height : 100%;
}
.drawer{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height : 50px;
  padding : 0px 0.5em;
}
.navbar_toggle{
  z-index:9999;
}
.navbar_toggle_icon{
  position: relative;
  display: block;
  height: 2px;
  width: 30px;
  background : none 0% 0% / auto auto repeat scroll padding-box border-box white;
  -webkit-transition: ease .5s;
  transition: ease .5s;
}
.navbar_toggle_icon:nth-child(1){
  top: 0;
}
.navbar_toggle_icon:nth-child(2){
  margin: 8px 0;
}
.navbar_toggle_icon:nth-child(3){
  top: 0;
}
.menu.open{
  -webkit-transform:translateX(0);
  transform:translateX(0);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.navbar_toggle.open .navbar_toggle_icon:nth-child(1){
  top: 10px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 0;
}
.navbar_toggle.open .navbar_toggle_icon:nth-child(3){
  top: -10px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu{
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition:ease .5s;
  transition:ease .5s;
  z-index:1000;
}
.menu ul li{
  padding: 2em;
  border-bottom : 1px solid #cccccc;
  background-color : rgba(0, 64, 128, 0.7);
}
@media screen and (min-width: 930px) {
  nav{
  display: flex;
  flex-direction: row;
}
.navbar_toggle{
  display: none;
}
.menu{
  width: 100%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.menu ul{
  height : 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.menu ul li{
  padding: 0 1em;
  border-bottom : medium none;
  background-color : rgba(0, 64, 128, 0);
}
}
section{
  margin: auto;
  padding : 0;
  width: 100%;
}
section div.intr{
  margin: auto;
  padding : 60px 0px;
  width: 100%;
}
/*------------
  sns
--------------*/
.sns{
  margin: auto;
  padding : 4px;
  background-color : #86c2ff;
}
.sns ul{
  margin : 0;
  padding : 0;
  text-align : right;
  font-size:0;
}
.sns ul li{
  margin : 0px 0px 0px 5px;
  padding : 0;
  display : inline-block;
  width : 80px;
}
.sns ul li img{
  border-radius: 3px;
}
/*------------
  greeting
--------------*/
#greeting{
  }
section#greeting div.intr{
  width : 90%;
  max-width : 750px;
}
#greeting h2{
  font-size : 125%;
  font-weight : bold;
  line-height : 1.4;
  text-align : center;
  margin-bottom : 20px;
}
#greeting h2 span{
  font-size : 75%;
}
img.greet{
  margin: 0px 20px 3px 0px;
  padding : 0;
  max-width : 200px;
  float : left;
  border-radius: 10px;
  width : 35%;
}
p.greet{
  margin : auto auto 10px;
  padding : 0;
  line-height : 1.6;
  font-size : 1.03rem;
}
p.master{
  margin : auto auto 10px;
  padding : 0;
  line-height : 1.6;
  font-size : 1.03rem;
  text-align : right;
  font-weight : bold;
}
p.master span{
  font-size : 125%;
  letter-spacing : 0.3rem;
}
/*------------
  map
--------------*/
#map{
  }
.googlemap{
  position: relative;
  padding-bottom: 20%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.googlemap iframe,
.googlemap object,
.googlemap embed{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 720px) {
  .googlemap{
  padding-bottom: 12%;
}
}
/*------------
  footer
--------------*/
footer{
  margin: auto;
  padding : 20px 0px;
  width: 100%;
  color : white;
  background-color : #004080;
  text-align : center;
}
/*------------
  add
--------------*/
#add{
  }
#add div.intr{
  width : 90%;
  max-width : 1020px;
}
#add div.intr div.box_left,
#add div.intr div.box_right{
  margin: auto;
  padding : 0;
  width : 50%;
  max-width : 500px;
}
#add div.intr div.box_left{
  float: left;
  background-color : #004080;
}
#add div.intr div.box_right{
  float: right;
}
#add div.intr div.box_right p{
  text-align : center;
  font-size : 105%;
  font-weight : bolder;
  line-height : 1.8;
}
@media only screen and (max-width: 720px) {
  #add div.intr{
  max-width : 90%;
}
#add div.intr div.box_left,
#add div.intr div.box_right{
  width : 100%;
  max-width : 100%;
}
#add div.intr div.box_left{
  margin : auto auto 60px;
}
}
button.form{
  width: 100%;
  height: 50px;
  font-size: 1.2em;
  color : white;
  background-color : #004080;
  border : 2px solid #004080;
  border-radius: 3px;
  transition: .4s;
}
button.form_red{
  background-color : #3312ed;
  border : 2px solid #3312ed;
}
button.form:hover{
  background: #7dbeef;
  color: #FFF;
}
button.form_red:hover{
  background:#c8c8ff;
  color: #3312ed;
}
button.school{
  width: 100%;
  height: 50px;
  font-size: 1.2em;
  color : #bb0000;
  background-color : white;
  border : 2px solid #bb0000;
  border-radius: 3px;
  transition: .4s;
  margin-top : 5px;
}
button.school:hover{
  background: #ffbbbb;
  color: #FFF;
}
button.insta{
  width: 100%;
  height: 50px;
  font-size: 1.2em;
  color : #424bf5;
  background-color : white;
  border : 2px solid #424bf5;
  border-radius: 3px;
  transition: .4s;
  margin-top : 5px;
}
button.insta:hover{
  background: #bbbefc;
  color: #FFF;
}
/*------------
  topics
--------------*/
#topics{
  background-image : url(bgi_sub.jpg);
  background-repeat : no-repeat;
  background-position : left center;
  background-size : cover;
  background-attachment : fixed;
}
@media screen and (max-width: 800px) {
  #topics{
  background-image : url(bgi_sub_r.jpg);
}
}
.article #topics{
  background-image : none;
}
section#topics div.intr{
  width : 90%;
  max-width : 750px;
  padding-bottom : 40px;
}
#topics article{
  margin : auto auto 20px;
  padding : 10px;
  border-radius: 10px;
  border : 2px solid #004080;
  background-color : rgba(255, 255, 255, 0.9);
}
#topics article img{
  margin: 0px 20px 3px 0px;
  padding : 0;
  max-width : 200px;
  float : left;
  border-radius: 10px;
  width : 35%;
}
#topics article h4{
  margin : auto auto 15px;
  padding : 5px 5px 5px 10px;
  line-height : 1.4;
  color : white;
  background-color : #004080;
  border-left-width : 10px;
  border-left-style : solid;
  border-left-color : #86c2ff;
  font-weight : bold;
}
#topics article h4::before,
#topics article h4::after{
  content: "□";
  position: absolute;
}
#topics article h4::before{
  left:0;
  top:-3px;
}
#topics article h4::after{
  left: 5px;
  top: 3px;
  color: #A1B8D1;
}
#topics h5{
  margin : auto auto 20px;
  padding : 0;
  color : white;
  font-size : 260%;
  font-weight : bolder;
  text-align : right;
  border-bottom-width : 2px;
  border-bottom-style : solid;
  border-bottom-color : white;
}
.article #topics h5{
  margin : auto;
  color : #004080;
  border-bottom-color : #004080;
}
.article #topics div#sub_menu{
  margin : 20px auto;
  padding : 0px;
}
#topics article h6{
  margin : auto auto 10px;
  padding : 10px 10px 0px 0px;
  line-height : 1.4;
  font-weight : bold;
  text-align : right;
  font-size : 90%;
}
#topics article aside{
  margin : auto auto 10px;
  padding : 10px 10px 0px 0px;
  line-height : 1.4;
  font-weight : bold;
  text-align : right;
  border-top-width : 1px;
  border-top-style : dotted;
  border-top-color : #004080;
  clear : both;
  font-size : 90%;
}
#topics article p{
  margin : auto;
  padding : 0px 10px;
  line-height : 1.7;
}
#topics p a,#meeting li a{
  color : #004080;
  font-weight : bold;
  text-decoration : underline;
}
#topics p a:hover,#meeting li a:hover{
  color : #404040;
}
button.category{
  color : #004080;
  border : 1px solid #004080;
  border-radius: 3px;
  transition: .4s;
  padding : 4px;
  line-height : 1.1;
  font-weight : bold;
  background-color : rgba(255, 255, 255, 0);
}
li.category{
  color : #004080;
  border : 1px solid #004080;
  border-radius: 3px;
  transition: .4s;
  padding : 4px;
  line-height : 1.1;
  font-weight : bold;
  background-color : rgba(255, 255, 255, 0);
  display: inline;
  font-size : 85%;
  margin-right : 5px;
}
li.category:hover{
  background: #7dbeef;
  color: #FFF;
}
li.category a{
  color : #004080;
  text-decoration : none;
  font-size : 85%;
}
li.category_menu{
  color : white;
  border-radius: 3px;
  transition: .4s;
  padding : 4px;
  line-height : 1.1;
  font-weight : bold;
  background-color : #004080;
  display: inline;
  font-size : 85%;
  margin-right : 5px;
}
/*------------
  モーダル
--------------*/
.modal-content{
  position:fixed;
  display:none;
  z-index:2;
  width:80%;
  max-width:700px;
  margin:0;
  padding:0;
  font-size:0;
  text-align : center;
}
.modal-content div{
  margin : 0px 0px 15px;
  padding:0;
  width:100%;
  border : 2px solid #004080;
  border-radius: 6px;
  line-height : 1;
}
.modal-content div img,
.modal-content div video{
  border-radius: 6px;
}
.modal-overlay{
  z-index:1;
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:120%;
  background-color : rgba(0, 64, 128, 0.8);
}
.modal-open{
  }
.modal-open:hover{
  cursor:pointer;
}
.modal-close{
  }
.modal-close:hover{
  cursor:pointer;
}
button.movie_open{
  position : absolute;
  left : 5px;
  top : 55px;
  padding : 0px 0px 0px 35px;
  width : 170px;
  height: 30px;
  font-size : 65%;
  font-weight : bold;
  color : #004080;
  background-color : #ffffff;
  border : 2px solid #004080;
  border-radius: 6px;
  transition: .4s;
  text-align : center;
  background-image : url(img_play.svg);
  background-repeat : no-repeat;
  background-position : 5px center;
  background-size : contain;
  line-height : 1.6;
  text-decoration : none;
}
button.movie_open:hover{
  background: #7dbeef;
  color: #FFF;
  background-image : url(img_play02.svg);
  background-repeat : no-repeat;
  background-position : 5px center;
  background-size : contain;
}
button.close{
  width: 80%;
  height: 40px;
  font-size: 13px;
  color : #004080;
  background-color : #ffffff;
  border : 2px solid #004080;
  border-radius: 3px;
  transition: .4s;
  text-decoration : none;
}
button.close:hover{
  background: #7dbeef;
  color: #FFF;
}
/*------------
  about
--------------*/
#about{
  }
section#about div.intr{
  width : 90%;
  max-width : 750px;
  padding-bottom : 40px;
}
section#about div.intr div{
  width : 95%;
  margin : auto;
}
#about h5{
  position:relative;
  padding:20px 10px;
  font-size:20px;
  border:1px solid #325A8C;
  margin : 0px 0px 15px;
}
#about h5::after{
  content: "同窓会について";
  position: absolute;
  top: -8px;
  left: 10px;
  background: #fff;
  font-size: 12px;
  color: #325A8C;
  padding: 0 10px;
}
#about h4{
  font-size:20px;
  background: linear-gradient(transparent 50%, #86c2ff 50%);
  color : #004080;
  line-height : 1.4;
  font-weight : bold;
  padding:0 10px;
  margin : 0px 0px 15px;
  letter-spacing : 2rem;
}
#about h6{
  margin : 25px 0px 10px;
  font-size : 120%;
  font-weight : bolder;
  clear : both;
  color : #004080;
}
#about h6 span{
  letter-spacing : 0.5rem;
}
section#about #member p.right{
  text-align : right;
  margin : 0px 0px 15px;
  font-size : 85%;
}
#about dl{
  line-height : 1.2;
  font-size : 90%;
}
#about dt{
  float: left ;
  clear: left ;
  margin-right: 10px ;
  width: 100px ;
  margin-bottom : 26px;
}
#about dd{
  float: left ;
  margin-left: 10px ;
  margin-bottom : 25px;
}
#about div#member dt{
  font-weight : bold;
  color : white;
  background-color : #004080;
  padding : 3px;
  border-radius: 3px;
  width: 80px ;
}
#about div#member dd{
  padding : 3px;
  margin-bottom : 5px;
}
#about div#constitution dt{
  width: 60px ;
}
#about div#constitution dd{
  width : -webkit-calc(100% - 80px) ;
  width : calc(100% - 80px);
}
#about div#constitution ol{
  margin-left : 30px;
  list-style : decimal;
  line-height : 1.2;
}
#about div#history dt{
  width: 130px ;
  background-image : url(ico_hist.svg);
  background-repeat : no-repeat;
  background-position : left center;
  background-size : contain;
  padding-left : 20px;
  color : #004080;
  font-size : 95%;
  font-weight : bold;
}
#about div#history dd{
  width : -webkit-calc(100% - 170px) ;
  width : calc(100% - 170px);
}
@media only screen and (max-width: 720px) {
  #about div#history dt{
  margin-bottom : 3px;
}
#about div#history dd{
  width : 100% ;
}
}
/* page-top */
#page-top{
  position: fixed;
  bottom: 20px;
  right: 20px;
}
#page-top a{
  width : 50px;
  height : 50px;
  padding: 0;
  display: block;
}
section#about #member div.left_b{
  float : left ;
  width : 15%;
  padding : 0;
  margin : 0px 0px 10px;
  clear : both;
}
section#about #member div.left_b p{
  font-weight : bold;
  color : white;
  background-color : #004080;
  padding : 3px;
  border-radius: 3px;
  font-size : 90%;
  line-height : 1.6;
  text-align : center;
}
section#about #member div.right_b{
  float : left ;
  padding : 0;
  margin : 0px;
  width : 85%;
}
section#about #member div.right_b p{
  padding : 3px 0px;
  float : left;
  margin : 0px 0px 10px 20px;
  font-weight : bold;
  line-height : 1.6;
  font-size : 90%;
  width : 140px;
}
section#about #member div.right_b p span{
  font-size : 85%;
  padding-left : 1px;
}
section#about #member h6{
  background-color : #ebebeb;
  padding : 5px;
  margin-top : 15px;
  border-radius: 3px;
}
@media only screen and (max-width: 720px) {
  section#about #member div.left_b{
  float : none ;
  width : 100%;
  margin : 0;
}
section#about #member div.left_b p{
  color : #004080;
  background-color : rgba(208, 232, 255, 0.7);
  text-align : left;
  margin : 0px 7px;
}
section#about #member div.right_b{
  float : none ;
  width : 100%;
}
section#about #member div.right_b p{
  margin : 0px 10px;
}
section#about #member h6{
  background-color : #004080;
  color : white;
}
}
/*------------
  entry2023
--------------*/
#entry2023{
  }
section#entry2023 div.intr,section#meeting div.intr{
  width : 90%;
  max-width : 750px;
  padding-bottom : 40px;
}
section#entry2023 div.intr div,section#meeting div.intr div{
  width : 95%;
  margin : 15px auto auto;
}
#entry2023 h5,#meeting h5{
  position:relative;
  padding:20px 10px;
  font-size:20px;
  border:1px solid #325A8C;
  margin : 0px 0px 15px;
}
#entry2023 h5::after,#meeting h5::after{
  content: "Alumni general meeting";
  position: absolute;
  top: -8px;
  left: 10px;
  background: #fff;
  font-size: 12px;
  color: #325A8C;
  padding: 0 10px;
}
#meeting ul{
  list-style : square outside;
  margin: 0;
  padding: 0;
}
#meeting ul li{
  margin-left: 1.5em;
  padding: 0;
  line-height : 1.2;
}