/* CSS Document */

/* reset
--------------------------------------*/
body,div,td,p,ul,ol,dl,dd,img,form,h1,h2,h3,h4,h5{
	margin: 0;
	padding: 0;
	border: none;
	font-style: normal;
	text-align: left;
	zoom: 1;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "sans-serif";
    box-sizing: border-box;
}
a{
    text-decoration:none;
    color: #000;
}
li{
    list-style: none;
}
img{
    width: 100%;
}
.wrapper {
    width: 100%;
    display: block;
}
.pc{
    display: block;
}
.sp{
    display: none;
}

/* header
--------------------------------------*/
#header .headerIn
{
	width:960px;
	margin:0 auto;
}
.headerIn h1
{
	width:500px;
	float:left;
	position:relative;
	top:25px;
}
#headerContact
{
	width:345px;
	height:32px;
	float:right;
	position:relative;
	top:35px;
}
#headerContact .headerBtn
{
	float:right;
	width:140px;
	position:relative;
	top:26px;
	text-align:right;
}
#headerContact .headerBtn a
{
	display:block;
	width:140px;
	height:0;
	padding-top:17px;
	overflow:hidden;
}
#headerContact .headerBtn a:link
{
	background-color:#831B1D;
}
#headerContact .headerBtn a:hover
{
	background-color:#2E499E;
}

/* footer
--------------------------------------*/

#footer{
    padding: 20px 5%;
	margin:0 auto;
	overflow:hidden;
	background:#949494;
	font-size:13px;
	line-height:1.6;
    color: #fff;
    clear:both;
}
#copyright{
	text-align:right;
    bottom: 5%;
    right: 5%;
    position: absolute;
    display: inline-block;
}
#footer .footer-t{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 100%;
    margin-bottom: 2em;
}
#footer .footer-t ul{
    width: calc(100% / 5 - 20px * 2 / 3);
    padding: 20px;
    box-sizing: border-box;
}
#footer .footer-t ul .f-title a{
    font-size: 30px;
}
#footer .footer-t ul li a{
    color: #fff;
    font-size: 18px;
}
#footer .footer-t ul li a:hover{
    color: #6c6c6c;
}
#footer .footer-t .f-title{
    padding-bottom: 5%;
}
#footer .footer-t li{
    padding: .5em 0;
}
#footer .footer-b .sc-left,#footer .footer-b .sc-right{
    display: inline-block;
    color: #fff;
}
#footer .footer-b .sc-left a,#footer .footer-b .sc-right a{
    color: #fff;
}
#footer .footer-b .sc-left{
    float: left;
    padding-left: 4%;
    padding-right: 5px;
}
.add {
    display: inline-block;
    float: left;
    width: 50%;
}
.copyr{
    display: inline-block;
    width: 50%;
}
.fb {
    position: relative;
    top: .2rem;
}
.fb img{
    width: 10%;
    padding-right: .3rem;
}

/*========= スクロールダウンのためのCSS ===============*/
/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
.scrolldown4{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  top:92%;
  right:5%;
    /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
  position: absolute;
  left: -11px;
  bottom:-3px;
    /*テキストの形状*/
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    right: -12px;
    /*矢印の形状*/
    width: 2px;
    height: 20px;
    background: #fff;
    transform: skewX(-31deg);
}

.scrolldown4:after{
  content:"";
    /*描画位置*/
  position: absolute;
  right:0;
    /*矢印の形状*/
  width:2px;
  height: 20px;
  background:#fff;
  transform: skewX(-151deg);
}

/*========= レイアウトのためのCSS ===============*/

h1 {
    font-size: 2.3rem;
    font-weight: 500;
    position: absolute;
    bottom: 3%;
    right: 3%;
    color: #fff;
}

h2{
  font-size: 1.5rem;
  margin-bottom: 30px;
  color: #707070;
}
h3{
  color: #707070;
  font-weight: normal;
}
h4 {
    color: #707070;
    margin-top: 2rem;
}
h5 {
    border-bottom: 5px solid #ccc;
    font-size: 1.3rem;
    font-weight: 400;
}
p{
  margin-top:20px;  
  color: #707070;
}
small{
  background:#333;
  color:#fff;
  display: block;
  text-align: center;
  padding:20px;
}

#header{
  text-align: center;
}

section{
  padding: 100px 0;
    width: 85%;
    margin: 0 auto;
}

#footer{
  position: relative;
  z-index: 600;
}
.n-mt{
    margin-top: 0;
}
.b-m{
    margin-bottom: 20px;
}
.float-left {
    float: left;
}
.s-top {
    position: relative;
    display: block;
}
.President-box .float-left.president-img{
    width: 20%;
    padding: 0 4% 0 2%;
}
.author{
    margin-top: 7%;
}
.author p {
    text-align: right;
}
.fp-img {
    width: 40%;
    margin: 0 auto;
    padding-bottom: 3%;
}
.reserch-btn {
    text-align: center;
}
.organization-box {
    display: inline-flex;
    width: 24%;
    padding: 0 .2rem;
}
.AF-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.facility-box {
    display: block;
    position: relative;
    width: calc(100% / 3 - 20px * 2 / 3);
    padding: 20px 0;
    box-sizing: border-box;
}
.facility-box p {
    margin-top: 0;
}
.af-title {
    color: #000;
    font-size: 1.1rem;
    font-weight: bold;
}
.access{
    width: 80%;
    margin: 2% auto 0;
}
.city-box {
    margin-top: 5rem;
    display: inline-block;
    vertical-align: top;
    margin-right: 3rem;
    width: calc(100% / 3 - 36px * 3 / 3);
}
.n-mr{
    margin-right: 0;
}
.city-box:nth-child(3) {
    padding: 0;
}
.course-box {
    display: block;
    margin-bottom: 3rem;
}
.course-inner {
    margin-bottom: 1rem;
}
.course-inner:first-child {
    margin-top: 1rem;
}
.course-box img {
    width: 20%;
    display: inline-block;
    padding-right: 1rem;
}
.course-box .course-inner p {
    display: inline-block;
    width: 77%;
    vertical-align: top;
    margin-top: 0;
}
#FacultyNursing {
    padding-top: 0;
}
.table-title {
    display: block;
}
.table-title span {
    width: 15%;
    float: right;
}
.table-title b{
    width: 79%;
}
.gs-table{
    border-spacing: 0;
    margin-bottom: 4rem;
    clear: both;
}
.gs-table td {
    border-top: 1px solid;
    padding: .7rem .5rem;
}
.gs-table td:nth-child(1){
    font-weight: bold;
    width: 20%;
}
.gs-table tr:last-child td{
    border-bottom: 1px solid;
}
.DS-course {
    display: flex;
    margin-bottom: 10%;
}
.DS-course li {
    border-right: 1px solid;
    padding: .5rem 2.5rem;
    font-weight: bold;
    text-align: center;
}
#GraduateSchool h3 {
    margin-bottom: 1rem;
}
#CampusLife h3{
    margin-top: 3rem;
    border-bottom: 2px solid;
    display: inline-block;
    margin-bottom: 1rem;
}
.campuslife-box img {
    width: 30%;
    display: inline-block;
}
.campuslife-box .img-rm {
    padding-right: 1.2rem;
}
.campuslife-box p {
    width: 67%;
    display: inline-block;
    vertical-align: top;
    margin-top: 0;
}
#CampusMap .map-img{
    width: 100%;
    margin: 0 auto;
}
span.map-cont {
    display: inline-block;
    margin: 2px 5px;
    background-color: red;
    padding: 2px 3px;
    border-radius: 50px;
    width: 1.25em;
    text-align: center;
    color: #fff;
}
span.map-br {
    padding-left: 2.25em;
}
.map-explain {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}
.osp-inner{
    display: flex;
}
.osp-inner div{
    width: calc(100% / 2);
}

/*========= レイアウトのためのCSS ===============*/

/*スクロールに追従するサイドメニュー*/
#top-headbar {
   /* ▼上端に固定するCSS */
    position: absolute;
    right: 0%;
    background-color: #fff;
    width: 40%;
}
/*スクロールに追従するサイドメニュー デザイン*/
.menu-title a{
    color: #707070;
    font-size: 3rem!important;
}
.clearfix li a{
    color: #707070;
    font-size: 30px;
}
.clearfix li a:hover{
    color: #464646;
}
#top-headbar  {
    display: flex;
    flex-wrap: wrap;
    flex-flow: column;
    justify-content: space-around;
    align-items: stretch;
    height: 400vh;
    padding: 10% 4%;
    z-index: 500;
}
.n-pt{
    padding-top: 0!important;
}
.h-mt{
    padding-top: 13vh; 
}
.clearfix li {
    display: flex;
}

.top-menu-inner {
    flex-grow: 1;
    height: 100vh;
}
.clearfix {
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding-top: 20vh;
}

.menu-img1 {
    padding-bottom: 2vh;
}
.menu-img2 {
    width: 40%;
    padding-top: 5%;
}
.menu-img3{
    display: inline-block;
    float: right;
    position: relative;
    margin-right: 0;
    width: 40%;
}
.menu-img4 {
    padding-top: 5%;
}
li{
    clear: both;
}

/*パララックス表示*/
.img {
    height: 100vh ;
    background: url("../img/AU-top1.jpg");
    background-position: center center;  /* 縦横中央 */
    background-size: cover;
    background-repeat: no-repeat;   
    background-attachment: fixed!important;
}
.img.b {
    background-image: url("../img/AU-top2.jpg");
}
.img.c {
    background-image: url("../img/AU-top3.jpg");
}
.img.d {
    background-image: url("../img/AU-top4.jpg");
}

/*パララックスデザイン*/
.logo{
    position: fixed;
    top: 5%;
    left: 2%;
    width: 20%;
    z-index: 100;
}
.s-top .logo {
    position: absolute;
}
.logo-j {
    font-size: 8rem;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    color: #fff;
    position: absolute;
    bottom: 10%;
    left: 5%;
    z-index: 100;
}
#FacultyEngineering h3,#FacultyNursing h3 {
    border-bottom: 2px solid;
}


/*レスポンシブ-ノートpc*/
@media screen and (max-width: 1500px) {
    .menu-title a {
    font-size: 2rem!important;
    padding-bottom: 1.8vh;
}
    .clearfix li a {
    font-size: 1.5rem;
    padding-bottom: 1.2vh;
}
    .w-mt{
    padding-top: 30vh; 
}
    .h-mt{
    padding-top: 7vh; 
}
    .logo-j {
    font-size: 5.5rem;
}
    .osp-inner div:first-child {
    padding-right: 20px;
}
    #footer {
    padding: 20px 3%;
}
    #footer .footer-t .f-title {
    padding-bottom: 3%;
}
    #footer .footer-t .f-title a {
    font-size: 25px!important;
    line-height: 2rem;

}
    #footer .footer-t ul li {
    font-size: 20px;
    line-height: 2rem;
}
}
@media screen and (max-width: 920px) {
    .menu-title a {
    font-size: 1.8rem!important;
}
    .clearfix li a {
    font-size: 20px;
}
    #footer .footer-t ul {
    width: 30%;
}
    #copyright {
    bottom: 2%;
}
    h1 {
    font-size: 2.2rem;
}
    section {
    padding: 70px 0;
}
    .President-box .float-left.president-img {
    width: 22%;
    padding: 0 2%;
}
    .DS-course li {
    padding: .5rem 0.5rem;
}
}
@media screen and (max-width: 520px) {
.pc{
    display: none;
}
.sp{
    display: block;
}
    h1 {
    font-size: 1.2rem;
}
    h2 {
    font-size: 1.1rem;
}
    h3 {
    font-size: 1rem;
}
    p {
    font-size: 14px;
    margin-top: 10px;
}
    section {
    padding: 50px 0;
}
    .logo {
    top: 2%;
    width: 45%;
}
    .s-top .logo {
    top: 3%;
    width: 35%;
}
    .logo-j {
    font-size: 3.5rem;
}
    #copyright {
    position: relative;
    right: 0%;
}
    .scrolldown4{
  right:10%;
}
    /*スクロールするコンテンツ*/
.scrollbox {
  background-color: #fff;
  position: relative;
  z-index: 500;
}
    .sp ul{
        padding: 5rem 1rem;
    }
.sp ul li a{
    font-size: 25px;
    line-height: 33px;
}
    .sp li {
    padding-bottom: 1rem;
}
    .spmenu-title{
    font-size: 2rem;
    line-height: 2.5rem;
}
.sp .img {
    background: url("../img/AU-sptop1.jpg");
}
.sp .img.b {
    background-image: url("../img/AU-sptop2.jpg");
}
.sp .img.c {
    background-image: url("../img/AU-sptop3.jpg");
}
.sp .img.d {
    background-image: url("../img/AU-sptop4.jpg");
}
.sp .img.e {
    background-image: url("../img/AU-sptop5.jpg");
}

    #footer .footer-t {
    padding-bottom: 10%;
}
    #footer .footer-t ul {
    width: 100%;
    padding: 5% 2%;
}
    #footer .footer-t .f-title {
    padding-bottom: 0;
}
.add,.copyr {
    display: block;
    width: 100%;
}
    .President-box .float-left.president-img {
    padding: 1% 3% 1% 0;
    object-fit: cover;
    width: 45%;
    max-height: 195px;
}
    .fp-img {
    width: 80%;
}
    .author p {
    font-size: 12px;
}
    .af-title {
    font-size: .87rem;
}
  .organization-box {
    display: block;
    width: 100%;
    padding: 0 1rem;
    margin-bottom: 2rem;
} 
    .osp-inner{
    display: block;
}
    .osp-inner div{
    width: 100%;
}
    .course-box img {
    width: 100%;
    padding-right: 0;
}
    .course-inner {
    margin: 1rem 0 2rem;
}
    .course-box .course-inner p {
    width: 100%;
}
    .gs-table { 
    overflow-x: scroll;
    display: block;
    margin-bottom: 3rem;
}
    .DS-course {
    display: block;
    margin-bottom: 25%;
}
    .DS-course li {
    border-right: none;
    border-bottom: 1px solid;
}
    .campuslife-box img {
    width: 100%;
    padding-right: 0;
}
    .campuslife-box p {
    width: 100%;
}
    .city-box {
    margin-top: 3rem;
    width: 100%;
    padding-right: 0;
}
    .access {
    width: 100%;
    margin: 0 auto;
}
    #AssociatedFacilities h2{
    margin-bottom: 0;
    }
    .AF-flex {
    margin-top: 2rem;
}
    .facility-box {
    padding: 0;
    width: 100%;
    margin-bottom: 2rem;
}
    .facility-box img{
    width: 100%;
    object-fit: cover;
    max-height: 130px;
    }
}