@charset "UTF-8";
/* CSS Document */

/* COMMON */
.content { width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto;}
.subTitle { position: relative; display: block; padding: 0 0 0.25em 1.2em; color: #336699; font-weight: bold; font-size: 24px; margin: 0 0 1em 0; box-sizing: border-box; border-bottom: #336699 dotted 1px; line-height: 1.2; font-feature-settings: "palt";}
.subTitle:after { display: block; content: ''; position: absolute; left: -1px; bottom:-2px; border-bottom: #336699 dotted 1px; width: 100%;}
.subTitle:before { display: block; content: ''; position: absolute; left: 0; bottom:-3px; border-bottom: #336699 dotted 1px; width: 100%;}
.subTitle .material-icons { position: absolute; left: 0; top:calc(50% - 3px); transform: translateY(-50%); }
.middleTitle { font-size: 20px; font-weight: bold; color: #495b85; position: relative; padding: 0 0 0 10px; margin: 0 0 1em 0; font-feature-settings: "palt";}
.middleTitle:before { content: ''; display: block; top:0; left: 0; position: absolute; width: 4px; background: #495b85; height: 100%; }
.smallTitle { font-size: 16px; margin: 0 0 1em 0; font-weight: bold; font-feature-settings: "palt";}
.smallColorTitle { font-size: 16px; margin: 0 0 1em 0; font-weight: bold; color: #336699; font-feature-settings: "palt"; }
.basicText { font-size: 16px; line-height: 1.8; margin: 0 0 0.75em 0;}
.basicTable { }
.basicTable table { width: 100%;}
.basicTable table tr:nth-of-type(even) { background: #f1f1f1;}
.basicTable table tr th { box-sizing: border-box; padding: 1.5em 1em; font-size: 16px; width: 260px; font-weight: bold;}
.basicTable table tr td { box-sizing: border-box; padding: 1.5em 1em; font-size: 16px; }
.basicTable table tr td ul { list-style: disc; padding: 0 0 0 1em; }
.basicTable table tr td ul li { font-size: 16px; margin: 0 0 10px 0;}
.basicTable table tr td ul li:last-of-type { margin: 0;}
.basicTable2 { }
.basicTable2 table { width: 100%;}
.basicTable2 table tr th { box-sizing: border-box; padding: 1.5em 1em; font-size: 16px; width: 25%; font-weight: bold; background: #f1f1f1; border: #ccc solid 1px;}
.basicTable2 table tr td { box-sizing: border-box; padding: 1.5em 1em; font-size: 16px; border: #ccc solid 1px; }
.basic66Table2 table tr td { box-sizing: border-box; padding: 1.5em 1em; font-size: 16px; border: #ccc solid 1px; }
.textInd1em { text-indent: 1em;}
.fSize66 { font-size: 66%;}
.fSize75 { font-size: 75%;}
.fSize100 { font-size: 100%;}
.fSize120 { font-size: 120%;}
.fSize150 { font-size: 150%;}

.bottomDotLine{ border-bottom: #336699 dotted 1px;}
.bottomDashLine {border-bottom: #336699 dashed 2px; margin-bottom: 80px !important; padding-bottom: 40px !important; }

.basicList { }
.basicList ul { list-style: disc; padding: 0 0 0 1.5em; }
.note { display: block; font-size: 12px; margin: 10px 0 0 0;}
.noteList { margin: 0 0 20px 0; }
.noteList ul { }
.noteList ul li { display: block; position: relative; font-size: 12px; padding: 0 0 0 1.5em; }
.noteList ul li:before { display: block; content: '※'; position: absolute; left: 0; top:0;}
.alignRight { text-align: right;}
.alignCenter { text-align: center; }
.documentList { }
.documentList ul { }
.documentList ul li { display: inline-block; margin: 5px 10px 5px 0; }
.documentList ul li a { display: block; padding: 1em 1em; background: linear-gradient(to bottom , #eafcff , #eafcff ,#c6ecff , #c6ecff ); border: #336699 double 3px; color: #336699; text-decoration: none; font-size: 16px;}
.documentList ul li a .material-icons { vertical-align: text-bottom; margin: 0 0 0 0.2em; transform: scale(1.5)}
.documentList ul li a:hover,
.documentList ul li a.active { background: #336699; color: #fff; border: #fff double 3px; text-decoration: none; transition: background 0.5s linear 0s, color 0.5s linear 0s, border 0.5s linear 0s;}
.inlineLink { color: #369; text-decoration: underline; }
.inlineLink:hover { color: #ccc; text-decoration: underline;}
.tabBox { display: none; }
.tabBox.active { display: block;}


/* MATERIAL ICONS SETTING */
.material-icons { font-size: 1em; }


/* HEADER */
#header { background: rgba(0,111,69,1); padding: 20px; }
#header p{ font-size: 1.6rem; padding: 10px; color: #fff; border: 1px solid #fff; margin: 20px 0; background-color: crimson;}
#header .logoBox { flex-basis: calc( 100% - 180px); align-self: center;}
#header .linkBox { flex-basis: 160px; align-self: center;}
#header .linkBox ul { display: block; background: #fff; padding: 10px; box-sizing: border-box; border: #f1f1f1 double 3px;}
#header .linkBox ul li { display: block; font-size: 16px; margin: 0 0 0.5em 0;}
#header .linkBox ul li:last-of-type { margin: 0;}
#header .linkBox ul li a { display: block; padding: 0 0 0 1.2em; position: relative; color: #333; text-decoration: none;}
#header .linkBox ul li a:hover,
#header .linkBox ul li a.active { color: #d33ba4; text-decoration: none; transition: color 0.5s linear 0s;}
#header .linkBox ul li a .material-icons { position: absolute; left: 0; top:50%; transform: translateY(-50%);}
#header .btnBox { display: none; align-self: center;}


/* FOOTER */
#footer { background: rgba(0,111,69,1); padding: 20px; color: #fff; }
#footer .telBox { margin: 0 0 20px 0; }
#footer .telBox h4 { font-size: 16px; font-weight: bold; margin: 0 0 0.5em 0;}
#footer .telBox h4 + p { max-width: none; margin: 0 0 0.5em 0; font-size: 14px;}
#footer .telBox img { width: 100%; max-width: 306px;}
#footer .telBox span{display: inline-block; vertical-align: top; font-size: 14px; margin: 10px 0 0 10px;}
#footer .copyright { text-align: right;}

/* MAIN CONTENTS */
#main { background:linear-gradient( to bottom, #f1f1f1, #ffffff, #ffffff); box-sizing: border-box; margin: 0 auto -10px auto;}
#content { transform: translateY(-10px); background: #fff; padding: 40px; box-sizing: border-box; box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);}

#gNavi { margin: 0 auto 60px auto;}
#gNavi ul { }
#gNavi ul li { flex-basis: calc( ( 100% - 50px ) / 6); display: block; }
#gNavi ul li a { display: block; text-align: center; font-size: 16px; font-weight: bold; padding: 0.5em 0; border-bottom: #336699 solid 3px; color: #336699; text-decoration: none;}
#gNavi ul li a:hover,
#gNavi ul li a.active { color: #d33ba4; text-decoration: none; border-bottom: #d33ba4 solid 3px; transition: color 0.5s linear 0s, border 0.5s linear 0s;}
#gNavi ul li.un{pointer-events: none;}
#gNavi ul li.un a{color: #999; border-bottom: #999 solid 3px;}

/* TOP PAGE */
#mainVisual { margin: 0 auto 40px auto; flex-basis: 100%;}
#information { flex-basis: calc( 60% - 20px); }
#information ul { overflow: auto; width: 100%; height: 240px; overflow-x:hidden;}
#information ul li { margin: 0 0 1em 0; display: block; padding: 0 0 0 7em; position: relative; font-size: 16px;}
#information ul li time { display: block; position: absolute; left: 0; top:0; }
#event { flex-basis: calc( 40% - 20px);}
#event p { margin: 0 0 10px 0; }
#event ul li { margin: 0 0 20px 0;}
#event ul li a { display: block; transition: opacity 0.5s linear 0s; }
#event ul li a:hover { opacity: 0.7; }

/* GREETING PAGE */
.greetingBy { width: 100%; margin: 40px auto 0 auto;}
.greetingBy h4 { font-size: 16px; color: #666; font-weight: bold; margin: 0 0 1em 0;}
.greetingBy .flexBox p { flex-basis:calc( ( 100% - 30px) / 4) ;}
.greetingBy .flexBox .group { display: block; font-size: 16px; margin: 0 0 0.5em 0;}
.greetingBy .flexBox .post { display: inline-block; font-size: 14px; margin: 0 1em 0 0;}
.greetingBy .flexBox .name { display: inline-block; font-size: 24px; margin: 0 0 0 0;}
#greeting ul { list-style: decimal; margin: 0 0 20px 2em; font-size: 16px; line-height: 2; padding: 1em;}
#greeting ul li { margin: 0 0 10px 0;}

/* ABOUT PAGE */
.aboutBox { margin: 0 0 40px 0;}
.aboutList { font-size: 16px;}
.aboutList ul { list-style: decimal; padding: 0 0 0 1.5em; }
.aboutList ul li { margin: 0 0 1.5em 0; font-size: 16px;}
.aboutList ul li ul { list-style: upper-roman; display: block; margin: 1em 0 0 0}
.aboutList ul li ul li { margin: 0 0 1em 0; font-size: 14px; }
.aboutList ul li ul li ul { list-style: lower-roman; }
.aboutList ul li ul li ul li { color: #666; }

.aboutMovie{position: relative;}
.aboutMovie:after{content: ''; display: block; padding-bottom: 56.25%;}
.aboutMovie iframe{position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto;}

#about .iconTel { text-align: center; position: absolute; left: 0; top:50%; transform: translateY(-50%); width: 1.8em; display: block;}
#about .iconFax { text-align: center; position: absolute; left: 0; top:50%; transform: translateY(-50%); width: 2.8em; font-size: 12px; background: #7bccc9; border-radius: 0.5em; line-height: 1; padding: 0.1em 0.3em; color: #fff;}
#aboutSchedule { }
#aboutSchedule table { width: 100%; }
#aboutSchedule table tr { }
#aboutSchedule table tr th { background: #7ecef4; font-size: 16px; box-sizing: border-box; padding: 0.5em 0; font-weight: bold; text-align: center; color: #fff; border: #ccc solid 1px;}
#aboutSchedule table tr td { font-size: 16px; text-align: center; box-sizing: border-box; padding: 0.5em 0; border:#ccc solid 1px;}
#aboutSchedule table tr td.through { border-right: dotted #f1f1f1 1px;}
#aboutSchedule table tr td.through + td { border-left:dotted #f1f1f1 1px;}
#aboutCost { }
#aboutCost table { width: 100%;}
#aboutCost table tr { }
#aboutCost table tr th { box-sizing: border-box; width: 25%; font-size: 14px; border: #ccc solid 1px; background: #7ecef4; color: #fff; text-align: center; padding: 1em 0; font-weight: bold;}
#aboutCost table tr td { text-align: center; font-size: 24px; border: #ccc solid 1px; }
#aboutPhoto .photoBox { flex-basis: calc( ( 100% - 10px ) / 2); }
#aboutPhoto .photoBox figure { }
#aboutSpirit { }
#aboutSpirit .spiritTitle { text-align: center; color: #495b85; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; margin: 0 auto 2em auto; font-size: 32px; line-height: 1.2;}
#aboutSpirit .spiritList { margin: 0 auto 2em auto; font-size: 24px;}
#aboutSpirit .spiritList ul li { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; line-height: 1.2; margin: 0 auto 1em auto;}
#aboutSpirit .flexBox { width: 100%; max-width: 680px; margin: 0 auto;}
#aboutSpirit .flexBox .textBox { flex-basis: 320px; align-self: center; margin: 0 100px 0 0;}
#aboutSpirit .flexBox .photoBox { flex-basis: 240px;}

/* DONATION PAGE */
.donationBox { margin: 0 0 40px 0; }
#donation .contactBox { background: #e2f2f1; border-radius: 20px; border: #77c4c1 solid 2px; box-sizing: border-box; padding: 20px; margin: 0 auto 40px auto;}
#donation .flexBox .photoBox { flex-basis: calc( ( 100% - 10px ) / 2);}
#donation .donationList { }
#donation .donationList ul { font-size: 16px; margin: 0 0 2em 0; }
#donation .donationList ul li { margin: 0 0 1em 0; position: relative; padding: 0 0 0 2em; }
#donation .donationList ul li .num { position: absolute; left: 0; top:0;}
#donation .donationList ul li figure { display: block; margin: 10px 0;}
#donation .donationList .cresitCard { max-width: 320px; }
#donation .donationList .convenientStore { max-width:480px;  }
#donation .donationList .payEasy { max-width: 70px; }
#donation .donationDetail { margin: 0 0 2em 0; }

/* CONTRIBUTOR PAGE */
#contributor{font-size: 16px; line-height: 1.6;}
#contributor .middleTitle{line-height: 1;}
#contributor .middleTitle:before{height: 94%;}
#contributor .middleTitle1{color: #1e6f46;}
#contributor .middleTitle1:before{background: #1e6f46;}
#contributor .middleTitle2{color: #2ea1b6;}
#contributor .middleTitle2:before{background: #2ea1b6;}

.contributorBox{margin: 0 0 40px 0;}

.contactList{display: flex; flex-wrap: wrap;}
.contactList li{width: 49%; margin: 0 2% 15px 0;}
.contactList li:nth-of-type(2n){margin-right: 0;}

.contactName{display: flex; flex-wrap: wrap;}

@media screen and (min-width:1024px) {
  .contactName li{width: 12%; margin: 0 5.6% 15px 0;}
  .contactName li:nth-of-type(6n){margin-right: 0;}
}
@media screen and (max-width: 1023px) and (min-width:768px) {
  .contactName li{width: 15%; margin: 0 2% 15px 0;}
  .contactName li:nth-of-type(6n){margin-right: 0;}
}
.contributorCap{font-size: 10px; line-height: 1.5;}
.contributorCap li{text-indent: -1em; margin-left: 1em;}

/* SUBNAV */
.subNav{display: flex; justify-content: center; margin: 0 -10px 40px;}
.subNav li{width: 200px; margin: 0 10px;}
.subNav a{display: block; text-align: center; padding: 0.65em 0; background: linear-gradient(to bottom , #eafcff , #eafcff ,#c6ecff , #c6ecff );
border: #336699 double 3px; color: #336699; text-decoration: none; font-size: 16px;}
.subNav a:hover,
.subNav a.active{background: #336699; color: #fff; border: #fff double 3px;}


/* REPORT PAGE */
.reportBox { margin: 0 0 40px 0;}
.chartWrapper { position: relative; width: 100%; padding: 60% 0 0 0; }
.chartBox { position: absolute; width:100%; height: 100%; top:0; left: 0; }

.reportTbl{width: 100%; border: 1px solid #000; text-align: center; font-size: 16px;}
.reportTbl th{background: #000;}
.reportTbl td{width: 11.5%; border: 1px solid #000; padding: 0.5em 0;}
.reportTbl td.colBig{width: 18%;}
.reportTbl .bg1{background: #bdd7ee;}
.reportTbl .bg2{background: #d9e1f2;}

/* COLLEGE PAGE */
.collegeBox { margin: 0 0 40px 0;}
.timeLine { }
.timeLine ul { }
.timeLine ul li { display: block; position: relative; font-size: 16px; padding: 0 0 10px 8em; margin: 0 0 10px 0; border-bottom: #ccc dotted 1px;}
.timeLine ul li time { position: absolute; left: 0; top:0; display: block; text-align: right; width: 7em;}
#college .contactBox { background: #e2f2f1; border-radius: 20px; border: #77c4c1 solid 2px; box-sizing: border-box; padding: 20px; margin: 0 auto 40px auto;}
#college .contactBox ul li { display: block; position: relative; padding: 0 0 0 3em; font-size: 16px; margin: 0 10px 10px 0;}
#college .iconTel { text-align: center; position: absolute; left: 0; top:50%; transform: translateY(-50%); width: 1.8em; display: block;}
#college .iconFax { text-align: center; position: absolute; left: 0; top:50%; transform: translateY(-50%); width: 2.8em; font-size: 12px; background: #7bccc9; border-radius: 0.5em; line-height: 1; padding: 0.1em 0.3em; color: #fff;}
#college .photoBox { flex-basis: calc( ( 100% - 10px ) / 2 ) ; margin: 0 0 10px 0;}
#college .photoBox figure { position: relative; display: block;}
#college .photoBox figure figcaption { position: absolute; right:0; bottom:0; display: inline-block; background: rgba(0,0,0,0.8); color: #fff; padding: 5px; line-height: 1.2;}

/* QandA　PAGE */
.qaBox { margin: 0 0 40px 0; padding: 0 0 40px 0; border-bottom: #ccc dotted 1px;}
.qaBox .qTitle { position: relative; padding: 0.5em 0 0.5em 2em; font-size: 16px; margin: 0 0 1em 0; color: #e05a9c; font-weight: bold;}
.qaBox .qTitle:before { display: block; position: absolute; font-size: 150%; left: 0; top:50%; transform: translateY(-50%); content: 'Q.'}
.qaBox .qText { position: relative; padding: 0 0 0 2em; font-size: 16px; line-height: 1.8;}
.qaBox .qText:before { display: block; position: absolute; font-size: 150%; left: 0; top:50%; transform: translateY(-50%); content: 'A.'; font-weight: bold; color: #336699;}

/* CONTACT PAGE */
#contact { }
#contact .contactBox { background: #e2f2f1; border-radius: 20px; border: #77c4c1 solid 2px; box-sizing: border-box; padding: 20px; margin: 0 auto 40px auto;}
#contact .contactBox ul li { display: block; position: relative; padding: 0 0 0 3em; font-size: 16px; margin: 0 10px 10px 0;}
#contact .iconTel { text-align: center; position: absolute; left: 0; top:50%; transform: translateY(-50%); width: 1.8em; display: block;}
#contact .iconFax { text-align: center; position: absolute; left: 0; top:50%; transform: translateY(-50%); width: 2.8em; font-size: 12px; background: #7bccc9; border-radius: 0.5em; line-height: 1; padding: 0.1em 0.3em; color: #fff;}
#contact input[type=text],
#contact input[type=tel],
#contact input[type=url],
#contact input[type=email] { display: block; box-sizing: border-box; padding: 0.5em 1em; width: 100%; font-size: 16px;}
#contact  textarea { display: block; box-sizing: border-box; padding: 0.5em 1em; width: 100% !important; min-height: 140px !important;}
#contact select { font-size: 16px;}
#contact .formField { margin: 0 0 20px 0;}
#contact .nameField { flex-basis: calc( ( 100% - 20px ) / 2 );}
#contact .btnBox { padding: 60px 0; width: 100%; max-width: 480px; margin: 0 auto;}
#contact .btnBox .flexBox li { flex-basis: calc( ( 100% - 10px ) / 2);}
#contact .btnBox input[type=submit] { display: block; background: #336699; color: #fff; text-align: center; padding: 1em; outline: none; border: #336699 solid 1px; width: 100%; font-size: 16px;}

/* SP NAVIGATION */
#modalNavi { display: none;}

/* FIXED MENU */
#fixedMenu { width: 40px; position: fixed; right:20px; bottom:20px; z-index: 99999999; }
#fixedMenu ul { }
#fixedMenu ul li { margin: 0 0 10px 0; position: relative;}
#fixedMenu ul li:last-of-type { margin: 0;}
#fixedMenu ul li a { display: block; position: relative; width: 100%; height: 40px; background: rgba(255,255,255,0.7); color: #369; text-decoration: none; outline: none; border: #fff solid 2px; overflow: hidden; box-shadow: 0 0 5px 5px rgba(0,0,0,0.1); cursor: pointer; border-radius: 50%; box-sizing: border-box;}
#fixedMenu ul li button { display: block;position: relative; width: 100%; height: 40px; background: rgba(255,255,255,0.7); color: #369; text-decoration: none; outline: none; border: #fff solid 2px; overflow: hidden; box-shadow: 0 0 5px 5px rgba(0,0,0,0.1); cursor: pointer; border-radius: 50%; box-sizing: border-box;}
#fixedMenu ul li a:hover,
#fixedMenu ul li button:hover{ background: rgba(218,104,0,1); color: #fff; text-decoration: none; transition: background 0.5s linear 0s, color 0.5s linear 0s; }
#fixedMenu ul li a .material-icons,
#fixedMenu ul li button .material-icons { position: absolute; left: 50%; top:50%; transform: translateX(-50%) translateY(-50%); font-size: 30px;}
#fixedMenu ul li .abText { position: absolute; right:calc(100% + 10px); font-size: 3vw; color: rgba(218,104,0,1); background: rgba(255,255,255,0.8); display: none; top:50%; transform: translateY(-50%); text-align: right; white-space: nowrap; padding: 0.25em; line-height: 1; border-bottom: rgba(218,104,0,1) solid 1px;}

@media screen and (min-width:768px) {
  .spOnly { display: none;}
}
@media screen and (max-width:767px) {
  .pcOnly { display: none;}
  
  
  
  /* HEADER */
  #header { padding: 20px;}
  #header .logoBox { flex-basis: 100%;}
  #header .linkBox { display: none;}  
  
  /* FOOTER */  
  #footer {padding: 20px 20px 240px 20px;}
  #footer .telBox { text-align: center;}
  #footer .telBox p { max-width: none; text-align: center;}
  #footer .telBox span{display: block; margin: 10px 18px 0 0;}
  #footer .copyright { text-align: center;}
  
  /* MAIN CONTENTS */
  #main { margin: 0 auto;}
  #content { transform: none; padding:40px 20px;}
  #gNavi { display: none;}
  
  /* TOP PAGE */
  #information { flex-basis: 100%; margin: 0 auto 40px auto;}
  #information ul { height: auto;}
  #event { flex-basis: 100%;}
  
  /* ABOUT PAGE */
  #about .basicTable table {  display: block; width: 100%; float: none;}
  #about .basicTable table tbody { display: block; width: 100%; float: none;}
  #about .basicTable table tr { display: block; width: 100%; float: none; }
  #about .basicTable table tr th {  display: block; width: 100%; float: none; padding-bottom: 0;}
  #about .basicTable table tr td {  display: block; width: 100%; float: none;}
  #aboutPhoto .photoBox { flex-basis: 100%; margin: 0 0 10px 0;}
  #aboutSpirit .flexBox { width: 100%; max-width: 580px; margin: 0 auto;}
  #aboutSpirit .flexBox .textBox { flex-basis: 100%; margin: 0 auto 20px auto;}
  #aboutSpirit .flexBox .photoBox { flex-basis: 60%; margin: 0 20% 0 20%}

  
  /* GREETING PAGE */
  .greetingBy .flexBox p { flex-basis: 100%; margin: 0 0 20px 0; text-align: center;}
  
  /* DONATION PAGE */
  #donation .basicTable table {  display: block; width: 100%; float: none;}
  #donation .basicTable table tbody { display: block; width: 100%; float: none;}
  #donation .basicTable table tr { display: block; width: 100%; float: none; }
  #donation .basicTable table tr th {  display: block; width: 100%; float: none; padding-bottom: 0;}
  #donation .basicTable table tr td {  display: block; width: 100%; float: none;}
  #donation .flexBox .photoBox { flex-basis: 100%; margin: 0 0 10px 0;}
  
  /* CONTRIBUTOR PAGE */
  #contributor{font-size: 14px;}
  
  .contactList li{width: 100%; margin: 0 0 10px;}
  
  .contactName li{width: calc((100% - 20px) / 3); margin: 0 10px 10px 0;}
  .contactName li:nth-of-type(3n){margin-right: 0;}
  
  /* SUBNAV */
  .subNav{margin: 0 -5px 40px;}
  .subNav li{margin: 0 5px;}
  
  /* REPORT PAGE */
  .chartWrapper { padding: 160% 0 0 0; }
  .basicTable2 table tr th,
  .basicTable2 table tr td { font-size: 2.5vw; padding: 0.5em;}
  
  .reportScroll{width: 100%; overflow-x: auto; padding-bottom: 10px;}
  .reportTbl{width: 810px;}
  .reportTbl tr > td:nth-of-type(1){position: sticky; top: 0; left: 0; z-index: 1; border-left: none; border-right: none;}
  .reportTbl tr:nth-of-type(2) > td:nth-of-type(1){position: static;}
  .reportTbl tr:nth-of-type(2) > td:nth-of-type(1):before{display: none;}
  .reportTbl tr > td:nth-of-type(1):before{content: ''; position: absolute; top: 0; left: -1px; width: 100%; height: 100%; border-left: 1px solid #000;  border-right: 1px solid #000; z-index: 1;}
  
  
  /* COLLEGE PAGE */
  #college .basicTable table {  display: block; width: 100%; float: none;}
  #college .basicTable table tbody { display: block; width: 100%; float: none;}
  #college .basicTable table tr { display: block; width: 100%; float: none; }
  #college .basicTable table tr th {  display: block; width: 100%; float: none; padding-bottom: 0;}
  #college .basicTable table tr td {  display: block; width: 100%; float: none;}
  
  /* CONTACT PAGE */
  #contact .basicTable table,
  #contact .basicTable table tbody,
  #contact .basicTable table tr,
  #contact .basicTable table tr th,
  #contact .basicTable table tr td { display: block; width: 100%; float: none;}
  #contact .basicTable table tr { margin: 0 0 20px 0;}
  #contact .basicTable table tr th { width: 100%; padding: 0.5em 1em;}
  #contact .basicTable table tr td { width: 100%; padding: 0 1em 0.5em 1em;}
  #contact .nameField { flex-basis: 100%; margin: 0 0 20px 0;}
  
  /* SP NAVIGATION */
  #modalNavi { display: block; position: fixed; left: -100%; top:0; z-index: 99999998; background: rgba(255,255,255,0.9); width: 100%; height: 100%; opacity: 0; }
  #modalNavi.active { left: 0; opacity: 1; transition: opacity 0.5s linear 0s; }
  #modalNavi ul { padding: 40px 60px; overflow: auto; overflow-x: hidden; box-sizing: border-box; max-height: 100%; width: 100%; position: absolute; left: 50%; top:50%; transform: translateX(-50%) translateY(-50%);}
  #modalNavi ul li {  font-size: 5vw; margin: 0 0 1em 0; }
  #modalNavi ul li a { display: block; text-align: center; text-decoration: none; color: #336699;}
  #modalNavi ul li a .material-icons { margin: 0 0.2em 0 0; vertical-align: text-bottom;}
  #modalNavi ul li a.active,
  #modalNavi ul li a:hover { color: #da6800; text-decoration: none; transition: color 0.5s linear 0s;}
  #modalNavi ul li.un{pointer-events: none;}
  #modalNavi ul li.un a{color: #999;}
	
  /* FIXED MENU */
  #fixedMenu { width: 60px;}
  #fixedMenu ul li #modalNaviBtn { display: block; }
  #fixedMenu ul li #modalNaviCloseBtn { display: none; }
  #fixedMenu ul li #modalNaviBtn.active { display: none; }
  #fixedMenu ul li #modalNaviCloseBtn.active { display: block; }
  #fixedMenu ul li a { background: rgba(218,104,0,1); color: #fff; height: 60px; }
  #fixedMenu ul li button { background: rgba(218,104,0,1); color: #fff; height: 60px; }
  #fixedMenu ul li a:hover,
  #fixedMenu ul li button:hover{ background: rgba(218,104,0,1); color: #fff; }
  #fixedMenu ul li .abText { display: inline;}
}

.closed-txt {font-size: 1.6rem; padding: 10px; color: #fff; border: 1px solid #fff; margin: 20px 0; background-color: crimson;}
.closed-red {font-size: 1.6rem; padding: 10px; color: crimson; margin: 20px 0;}

#greeting-closed { border: 5px crimson solid; padding: 20px; margin: 20px 20px 50px; text-align: center;}
#greeting-closed h2 { font-size: 2rem; margin: 20px; color: crimson;}
#greeting-closed p { font-size: 16px; line-height: 1.8; margin: 0 0 0.75em 0;}