/* Standalone global header/nav styles for pages that don't load common/css/base.css
   (e.g. admissions/opencampus/ microsite, which uses its own bootstrap-based reset).
   Extracted from base.css's header/nav.globalnav/.nav-wrap rules; rem values converted
   to px (1rem -> 10px) so appearance matches every other page regardless of this
   page's own root font-size. */
header{display:flex; justify-content: flex-start; flex-wrap:wrap; position: relative; z-index: 9999; top:0; left:0; width:100%; padding:30px 0 0 30px; height:115px;}
header h1{display:block; margin:0; padding:0; width:365px; height:auto;}
/* base.css's header.fixed uses position:absolute because the homepage's tall
   video hero has room to sit behind it. This microsite's hero sections are
   much shorter and not guaranteed dark, so overlapping them the same way would
   cover the hero heading. The header stays in normal flow here and instead
   gets the same white-on-dark look via its own background, so both OC pages
   share one consistent, always-legible header bar. */
header.fixed{ background:linear-gradient(180deg, rgba(10,20,34,.92) 0%, rgba(10,20,34,.86) 100%);}

    @media (max-width: 1100px) {
 header{display:flex; justify-content: flex-start; flex-wrap:wrap; position: relative; z-index: 9999; top:0; left:0; width:100%; padding:20px 30px 20px 20px; height:auto; max-height:115px; z-index: 12000; background: #FFFFFF;}
    header h1{display:block; margin:0; padding:0; width: calc(100% - 60px); max-width:365px; height:auto;}
   }

nav.globalnav{ display:flex; justify-content:flex-end; flex-wrap: wrap; margin:0; padding:0; box-sizing:border-box; width:100%; max-width:calc(100% - 400px)}
nav.globalnav ul.nav{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 20px 0 0; padding:0; list-style:none; }
nav.globalnav ul.nav li{ display:block; margin:0; padding:34px 0 0 0; box-sizing:border-box;  }
nav.globalnav ul.nav li a,
nav.globalnav ul.nav li .globalnav-trigger{ display:flex; align-items:center; margin:0 10px 0 10px; padding:0; font-size:16px; color:#333333; text-decoration:none; box-sizing:border-box; position:relative;cursor: pointer; }

header.fixed nav.globalnav ul.nav li > a,
header.fixed nav.globalnav ul.nav li > .globalnav-trigger{ color:#FFFFFF; }

nav.globalnav ul.nav li a:after,
nav.globalnav ul.nav li .globalnav-trigger:after {
	content: '';
	width: 0;
	transition: all 0.3s ease;
	border-bottom: 2px solid #333333;
	display: block;
	position:absolute;
	bottom:-8px;
	left:0;
}
nav.globalnav ul.nav li a:hover:after,
nav.globalnav ul.nav li .globalnav-trigger:hover:after {
	width: 100%;
	border-bottom: 2px solid #333333;
	position:absolute;
	bottom:-8px;
	left:0;
}
header.fixed nav.globalnav ul.nav li > a:after,
header.fixed nav.globalnav ul.nav li > .globalnav-trigger:after {border-bottom: 2px solid #FFFFFF;}
header.fixed nav.globalnav ul.nav li > a:hover:after,
header.fixed nav.globalnav ul.nav li > .globalnav-trigger:hover:after {border-bottom: 2px solid #FFFFFF;}



nav.globalnav > ul.nav > li > .globalnavinner{ display:none; }
nav.globalnav > ul.nav > li:hover > .globalnavinner,
nav.globalnav > ul.nav > li:focus-within > .globalnavinner{ display:flex; }
.globalnavinner{ justify-content: flex-start; flex-wrap:wrap; background:rgba(255,255,255,0.95); width:90vw;   position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); padding:40px; margin-top:40px; }


.gnav_title{ width:370px; padding:0 50px 0 0; border-right:1px solid #E2E2E2;}
.gnav_title img{ display:block; max-width:100%; height:auto; }
.gnav_title h3{ font-size:28px; font-family: 'Zen Old Mincho', serif; color:#595757; font-size:30px; font-weight:500; margin-bottom:30px; }
.gnav_title h3::first-letter { color:#5B87BC; }
.gnav_title h3 span{ display:block; font-size:26px; font-family: 'Jost', sans-serif; font-weight:normal; color:#5B87BC; font-size:12px; font-weight:500; margin:10px 0 0 0; }


.gnav_contents{ width:calc(100% - 370px);}
nav.globalnav .gnav_contents ul{ display:flex; justify-content: flex-start; flex-wrap:wrap; padding:0 0 0 40px; margin:0; }
nav.globalnav .gnav_contents ul li{ display:block; margin:0 40px 0 0; padding:0; box-sizing:border-box; width:calc((100% / 3) - 40px ); text-align: left;  }
.gnav_contents ul li h4{ font-family: 'Zen Old Mincho', serif; color:#333333; font-size:16px; font-weight:500;
background:url('../img/arrow05.png') top 3px left no-repeat ; padding:0 0 20px 26px; margin:0 0 20px 0; border-bottom:1px solid #E2E2E2; position: relative;}
.gnav_contents ul li h4.denki { background:url('../img/arrow05a.png') top 3px left no-repeat ;}
.gnav_contents ul li h4.kikai { background:url('../img/arrow05b.png') top 3px left no-repeat ;}
.gnav_contents ul li h4.zairyou { background:url('../img/arrow05c.png') top 3px left no-repeat ;}
.gnav_contents ul li h4.chinou { background:url('../img/arrow05d.png') top 3px left no-repeat ;}
.gnav_contents ul li h4.kagaku { background:url('../img/arrow05e.png') top 3px left no-repeat ;}

nav.globalnav .gnav_contents ul li  h4 a{ font-family: 'Zen Old Mincho', serif; color:#333333; font-size:16px; padding:0;  }
nav.globalnav .gnav_contents ul li a:after, nav.globalnav .gnav_contents ul li a:hover:after {
	content: none; border:0;
}
nav.globalnav .gnav_contents ul li a{ display:block; margin:0; padding:0; font-size:16px; color:#333333; text-decoration:none; box-sizing:border-box; position:relative;cursor: pointer; }
nav.globalnav .gnav_contents ul li ul{ display:block; padding:0; margin:0; }
nav.globalnav .gnav_contents ul li ul li{ display:block; padding:0 0 0 26px; margin:0 0 20px 0; font-family: 'Zen Old Mincho', serif; color:#595757; font-size:16px; background:url('../img/dash01.png') top 11px left no-repeat; width:100%;}
nav.globalnav .gnav_contents ul li ul li a{ ont-family: 'Zen Old Mincho', serif; color:#333333 !important; font-size:16px; }

nav.globalnav .gnav_contents ul li ul li.pdf a:after { width: 20px; height: 27px; display: inline-block; position: relative; right: 0; top: 1px;content: ""; background:url('../img/icon_pdf.png') top 2px right no-repeat;  margin-left: 5px;}

.gnav_contents ul li h5{ font-family: 'Zen Old Mincho', serif; color:#B2B2B2; font-size:14px; font-weight:normal; padding:0; margin-bottom:20px;}

nav.globalnav .gnav_contents ul li a.external:after { width: 20px; height: 21px; display: inline-block; position: relative; right: 0; bottom: -5px;
    content: ""; background:url('../img/icon_external.png') bottom right no-repeat; margin-left: 5px; }
nav.globalnav .gnav_contents ul li a.pdf:after { width: 20px; height: 25px; display: inline-block; position: relative; right: 0; bottom: -5px;
    content: ""; background:url('../img/icon_pdf.png') bottom right no-repeat;  margin-left: 5px;}
nav.globalnav .gnav_contents ul li  a.word:after { width: 20px; height: 25px; display: inline-block; position: relative; right: 0; bottom: -5px;
    content: ""; background:url('../img/icon_word.png') bottom right no-repeat; margin-left: 5px; }
nav.globalnav .gnav_contents ul li  a.excel:after { width: 20px; height: 25px; display: inline-block; position: relative; right: 0; bottom: -5px;
    content: ""; background:url('../img/icon_excel.png') bottom right no-repeat; margin-left: 5px; }
nav.globalnav .gnav_contents ul li  a.zip:after { width: 20px; height: 25px; display: inline-block; position: relative; right: 0; bottom: -5px;
    content: ""; background:url('../img/icon_zip.png') bottom right no-repeat; margin-left: 5px; }
 	@media (max-width: 1315px){
        nav.globalnav{display:none;}
    }




.nav-button {
		appearance: none;
		-webkit-appearance: none;
		border: 0;
		background: transparent;
		font: inherit;
		color: inherit;
}
.nav-button {
		display:none;
}

/* Accessible nav triggers: <a> -> <button> conversion (Issue #3) */
.globalnav-trigger,
.nav-wrap-trigger {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: none;
	margin: 0;
	padding: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.globalnav-trigger:focus-visible,
.nav-wrap-trigger:focus-visible,
.nav-button:focus-visible {
	outline: 3px solid #333333;
	outline-offset: 2px;
}
header.fixed .globalnav-trigger:focus-visible {
	outline-color: #FFFFFF;
}

.nav-wrap {
  display: none;
}
 	@media (max-width: 1315px){
	.nav-wrap {
	  display: none;
	}
	.nav-wrap.open {
	  display: block;
	}

	.nav-wrap.close {
	  display: none;
	}
	  .nav-button {
		display: block;
		cursor: pointer;
	  }

	  .nav-wrap {
		position: fixed;
		left: 0;
		top: 0;
		display: none;
		z-index: 12000;
		background-color: #FFFFFF;
		width: 100%;
		height: 100%;
        padding-top:115px;
          z-index: 10000;
	  }
	  .nav-wrapinner {
		display: block;
		margin:0 auto;
		z-index: 10;
		padding:0 20px 20px 20px;
		width: 100%;
		height: 100%;
		overflow: auto;
		box-sizing:border-box;
		-webkit-overflow-scrolling: touch;
	  }

        .nav-wrapinner > ul > li{ display:block; padding:0; margin-bottom:20px; }
        .nav-wrapinner ul li a,
        .nav-wrapinner ul li .nav-wrap-trigger{ display:block; padding:0 0 5px 10px; font-size:18px; color:#333333; border-bottom: 2px solid #5B87BC; width:100%; text-decoration: none; position: relative;}
        .nav-wrapinner > ul > li > a::after,
        .nav-wrapinner > ul > li > .nav-wrap-trigger::after {
          content: "";
          display: block;
          width: 10px;
          height: 10px;
          position: absolute;
          right: 10px;
          top: 8px;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          border-bottom: 1px solid #5B87BC;
          border-right: 1px solid #5B87BC;
          transition: transform .3s;
        }

        .nav-wrapinner > ul > li > a.active::after,
        .nav-wrapinner > ul > li > .nav-wrap-trigger.active::after {
          -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
        }
      .nav-wrapinner ul li ul li a::after { content: none;}
      .nav-wrapinner > ul > li > ul{ display:none; padding:15px 20px 25px 20px; }
      .nav-wrapinner ul li ul li{ display:block; padding:0; }
      .nav-wrapinner ul li ul li a,
      .nav-wrapinner ul li ul li .nav-wrap-trigger{ display:block; padding:10px 0 10px 20px; margin:0; border-bottom: 1px solid #333;font-size:16px; background:url('../img/arrow05.png') center left no-repeat ; }
      .nav-wrapinner ul li ul li.denki a{ background:url('../img/arrow05a.png') center left no-repeat ; }
      .nav-wrapinner ul li ul li.kikai a{ background:url('../img/arrow05b.png') center left no-repeat ; }
      .nav-wrapinner ul li ul li.ouyou a{ background:url('../img/arrow05c.png') center left no-repeat ; }





      .nav-wrapinner ul li ul li ul{ display:block; padding:0 10px 10px 10px; }
      .nav-wrapinner ul li ul li ul li{ display:block; padding:10px 0 0 0; }
      .nav-wrapinner ul li ul li ul li a{ display:block; padding:0 0 0 16px; margin:0; border-bottom: 0;font-size:14px; background:none;background:url('../img/dash02.png') center left no-repeat ; }


   .nav-wrapinner ul li a.external:after { width: 16px; height: 20px; display: inline-block; position: relative; right: 0; bottom: -5px;
        content: ""; background:url('../img/icon_external.png') bottom right no-repeat; margin-left: 5px; background-size: contain;}
    .nav-wrapinner ul li a.pdf:after { width: 16px; height: 20px; display: inline-block; position: relative; right: 0; bottom: -5px;
        content: ""; background:url('../img/icon_pdf.png') bottom right no-repeat;  margin-left: 5px; background-size: contain;}
    .nav-wrapinner ul li  a.word:after { width: 16px; height: 20px; display: inline-block; position: relative; right: 0; bottom: -5px;
        content: ""; background:url('../img/icon_word.png') bottom right no-repeat; margin-left: 5px; background-size: contain;}
    .nav-wrapinner ul li a.excel:after { width: 16px; height: 20px; display: inline-block; position: relative; right: 0; bottom: -5px;
        content: ""; background:url('../img/icon_excel.png') bottom right no-repeat; margin-left: 5px; background-size: contain;}
    .nav-wrapinner ul li a.zip:after { width: 16px; height: 20px; display: inline-block; position: relative; right: 0; bottom: -5px;
        content: ""; background:url('../img/icon_zip.png') bottom right no-repeat; margin-left: 5px; background-size: contain;}


    .nav-wrapinner ul.else{ display:flex; justify-content: center; flex-wrap:wrap;}
    .nav-wrapinner ul.else li{ display:inline-block; margin:0 0 5px 0; }
    .nav-wrapinner ul.else li a{ display:block; margin:0; padding: 0 8px; font-size: 13px; text-align: center; text-decoration: none; border:none; border-right: 1px solid #333;  }
    .nav-wrapinner ul.else li:last-of-type a{ border:none;  }
    .nav-wrapinner ul.else li a:hover{ text-decoration: underline;  }
        .nav-wrapinner ul.else  li  a::after{ content:none;
        }

	.nav-wrap.close{}
	  /*メニューボタン*/
	  .nav-button,
	  .nav-button span {
		display: inline-block;
		transition: all 0.4s;
		box-sizing: border-box;
	  }

	  .nav-button {
		z-index: 12001;
		width: 60px;
		height: 65px;
		padding:10px 10px 0 10px;
		box-sizing:border-box;
		position:fixed; top:5px; right:5px; }

	  .nav-button span {
		position: relative;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #5B87BC;
		border-radius: 0;

	  }
	  .nav-button.active span {

		background-color: #5B87BC;
	  }

	  .nav-button span:nth-of-type(1) {
		top: -5px;
	  }

	  .nav-button span:nth-of-type(2) {
		top: -5px;
	  }

	  .nav-button span:nth-of-type(3) {
		bottom: 9px;
	  }

	  .nav-button span:nth-of-type(4) {
		background:none;
		color:#333333; text-align:center;
		bottom: 5px;
		font-size:11px;
		font-weight:bold;
	  }

	  /* header.fixed always shows its dark scrim here (see above), unlike
	     base.css where it can sit over a light video frame, so the MENU
	     label needs to flip to white to stay legible against it. */
	  header.fixed .nav-button span:nth-of-type(4) {
		color:#FFFFFF;
	  }

	}