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



/* Common */
.key-head { width: 100%; padding-bottom: 4em; background: url("../images/index/keycolumn_bg.gif") no-repeat; background-size: 100% 100%; background-position: left 0 top 8em; position: relative; }
.key-head h1 { color: #FFF; width: 16em; height: 16em; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 2em; }
.key-head h1 strong { font-size: 220%; line-height: 1.6; text-align: center; }
.key-head h1 strong span { font-size: 65%; line-height: 1.6; font-weight: normal; display: block; }
.key-head div { width: 88%; height: 380px; margin-left: 12%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.key-head div img { width: 100%; height: auto; }
@media only screen and (max-width: 768px) and (orientation: portrait) {
  .key-head { background-position: left 0 top 5em; }
  .key-head div { height: 300px; }
}
@media only screen and (max-width: 680px) {
  .key-head { padding-bottom: 1em; }
  .key-head h1 { width: 14em; height: 14em; bottom: 0; }
  .key-head h1 strong { font-size: 180%; line-height: 1.6; }
  .key-head div { width: 100%; height: 240px; margin-left: 0; }
}
@media only screen and (max-width: 680px) and (orientation: portrait) {
  .key-head { padding-bottom: 0; }
  .key-head h1 { width: 100%; height: auto; padding: 1.5em 0 1.3em 0; top: 0; bottom: auto; }
  .key-head h1 strong { font-size: 180%; line-height: 1.4; }
  .key-head h1 strong span { line-height: 1.4; }
  .key-head div { height: auto; }
}

#contents-head {}

#pagetitle { width: 100%; padding: 1.8em 0 1.5em 0; }
#pagetitle h1 { font-size: 150%; line-height: 1.2; text-align: center; color: #FFF; }
#pagetitle h1 strong { font-weight: normal;padding: 0 .2em .2em .2em; border-bottom: solid 3px #FFF; }
#pagetitle h2 { font-size: 240%; line-height: 1.2; text-align: center; color: #FFF; padding-top: .4em; }
.breadcrumb { font-size: 93%; line-height: 1.2; width: 94%; margin: 0 auto; padding-top: .5em; zoom: 1; overflow: hidden; }
.breadcrumb:after { content: ""; clear: both; display: block; }
.breadcrumb a { color: #333; }
.breadcrumb a:hover { color: #F60; }
.breadcrumb dt { float: left; }
.breadcrumb dd ul li { padding-left: 1.2em; float: left; position: relative; }
.breadcrumb dd ul li:before { content: ""; width: .5em; height: .5em; margin-top: -.3em; border-top: 1px solid #999; border-right: 1px solid #999; position: absolute; top: 50%; left: .2em; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#contents-head h3 { font-size: 240%; line-height: 1.2; font-weight: bold; text-align: center; padding: .8em 0 .3em 0; position: relative; }
#contents-head h3:after { content: ""; width: 2em; height: 3px; margin-left: -1em; display: block; position: absolute; left: 50%; bottom: 0; }
@media only screen and (max-width: 680px) and (orientation: portrait) {
  .breadcrumb { display: none; }
}

#contents { width: 94%; max-width: 760px; margin: 0 auto; }
.column { padding: 2.5em 0; }
.column h1 { font-size: 170%; line-height: 1.2; }

#submenu { width: 100%; padding: 1.5em 0 2em 0; }
#faculties-top { width: 94%; margin: 0 auto; }
#faculties-top h1 { text-align: right; }
#faculties-top h1 a { color: #333; padding-left: 1em; position: relative; }
#faculties-top h1 a:hover { color: #F60; }
#faculties-top h1 a:before { content: ""; width: 0; height: 0; margin-top: -.4em; border-style: solid; border-width: .4em 0 .4em .5em; border-color: transparent transparent transparent #999; position: absolute; top: 50%; left: .2em; }
#faculties-top h1 a:hover::before { border-color: transparent transparent transparent #F60; }
#submenu ul {/* display: flex; *//* flex-wrap: wrap; *//* justify-content: space-between; */letter-spacing: -1em;}
#submenu ul li {font-size: 105%;line-height: 1.2;width: 33%;margin-top: .5%;margin-left: .25%;display: inline-block;letter-spacing: normal;}
#submenu ul li a { text-align: center; color: #FFF; padding: .8em 0; display: block; }
@media only screen and (max-width: 680px) {
  #faculties-top { width: 100%; }
  #faculties-top h1 { text-align: center; }
  #faculties-top h1 a { padding: .8em 0; background: rgba(0,0,0,0.2); display: block; }
  #faculties-top h1 a:hover { color: #333; background: rgba(0,0,0,0.1); }
  #faculties-top h1 a:before { border: none; }
}
@media only screen and (max-width: 680px) and (orientation: portrait) {
  #submenu ul li { font-size: 100%; line-height: 1.2; }
}


/* 2nd-level */
.sec-lv { width: 100%; padding-bottom: 2em; background: url("../images/index/keycolumn_bg.gif") no-repeat; background-size: 100% 100%; background-position: left 0 top 10em; position: relative; }
.sec-lv div { width: 85%; min-height: auto; padding-left: 15%; }
.sec-lv div img { width: 100%; height: auto; }
.sec-lv h1 { text-align: center; color: #FFF; width: 25%; min-width: 240px; padding: 5.5% 0; display: block; position: absolute; bottom: 2em; }
.sec-lv h1 span { font-size: 160%; line-height: 1.2; padding-bottom: .2em; border-bottom: solid 3px #FFF; }
.sec-lv h1 strong { font-size: 320%; line-height: 1.2; padding-top: .3em; display: block; }
.sec-lv h1 strong em { font-weight: bold; }
.sec-lv h1 strong em:after { content: "\A"; white-space: pre; }
.sec-lv h1#sec-psycho { background: rgba(94,183,232,0.8); }
.sec-lv h1#sec-comm { background: rgba(243,152,28,0.8); }
.sec-lv h1#sec-comm strong { font-size: 220%; line-height: 1.2; letter-spacing: -.1em; }
.sec-lv h1#sec-dietetics { background: rgba(141,194,31,0.8); }
.sec-lv h1#sec-education { background: rgba(236,109,129,0.8); }
.sec-lv h1#sec-clinical-psychology { background: rgba(48,113,183,0.8); }
.sec-lv h2 { font-size: 150%; line-height: 1.2; font-weight: bold; text-align: justify; color: #30505E; padding: 2.5% 15% 1% 27%; }
.sec-lv p { font-size: 115%; line-height: 1.6; text-align: justify; color: #30505E; padding: 0 15% 0 27%; }
@media only screen and (max-width: 769px) and (orientation: portrait), (max-width: 680px) {
  .sec-lv { padding-bottom: 1em; background-position: left 0 top 0; }
  .sec-lv div { width: 100%; padding-left: 0; }
  .sec-lv h1 { top: 0; bottom: auto; }
  .sec-lv h2 { padding: 2% 2% 1% 2%; }
  .sec-lv p { padding: 0 2%; }
}
@media only screen and (max-width: 680px) and (orientation: portrait) {
  .sec-lv h1 { width: 100%; padding: 6% 0 4% 0; position: relative; }
  .sec-lv h1 span { font-size: 135%; line-height: 1.2; }
  .sec-lv h1 strong { font-size: 240%; line-height: 1.2; }
  .sec-lv h1 strong em:after { content: ""; }
  .sec-lv h2 { font-size: 135%; line-height: 1.4;  padding: 3% 3% 1% 3%; }
  .sec-lv p { font-size: 105%; line-height: 1.4;  padding: 0 3%; }
}


/* Intro */
.intro-menu { padding: 2.5em 0; }
.intro-menu h1 { font-size: 240%; line-height: 1.2; font-weight: bold; text-align: center; padding: .8em 0 .3em 0; position: relative; }
.intro-menu h1:after { content: ""; width: 2em; height: 3px; margin-left: -1em; display: block; position: absolute; left: 50%; bottom: 0; }
.intro-menu ul { margin-top: 3em; display: flex; flex-wrap: wrap; justify-content: space-between; }
.intro-menu ul li { width: 49.5%; margin-bottom: 1%; }
.intro-menu ul li a { font-size: 240%; line-height: 1.2; text-align: center; color: #FFF; display: block; }
.intro-menu ul li a strong { padding: 4em 0; display: block; }
@media only screen and (max-width: 680px) and (orientation: portrait) {
  .intro-menu h1 { padding-top: 0; }
  .intro-menu ul { display: block; }
  .intro-menu ul li { width: 100%; margin-bottom: 1%; }
  .intro-menu ul li a { font-size: 180%; line-height: 1.2; }
  .intro-menu ul li a strong { padding: 2em 0; }
}


/* Portal */
.portal-menu { padding: 2.5em 0; }
.portal-menu h1 { font-size: 240%; line-height: 1.2; font-weight: bold; text-align: center; padding: .8em 0 .3em 0; position: relative; }
.portal-menu h1:after { content: ""; width: 2em; height: 3px; margin-left: -1em; display: block; position: absolute; left: 50%; bottom: 0; }
.portal-menu ul { margin-top: 3em; display: flex; flex-wrap: wrap; justify-content: space-between; }
.portal-menu ul li { font-size: 123%; line-height: 1.3; text-align: center; width: 48%; min-height: 3.4em; margin-bottom: 4%; border: solid 1px #30505E; display: flex; align-items: center; justify-content: center; position: relative; }
.portal-menu ul li a {color: #30505E;padding: 0 2em;display: table;width: calc(100% - 4em);height: 100%;vertical-align: middle;z-index: 100;}
.portal-menu ul li a.other-site:after { display: none; }
.portal-menu ul li .fa, .fas {position:relative;left:-.5em;z-index: 1;}
.portal-menu ul li a strong {height:100%;display: table-cell;text-align: center;vertical-align: middle;}
.portal-menu ul li a:after { content: ""; width: .6em; height: .6em; margin-top: -.3em; border-top: 1px solid #30505E; border-right: 1px solid #30505E; position: absolute; top: 50%; right: 1em; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.portal-menu ul li:hover { background: #30505E; }
.portal-menu ul li:hover a { color: #FFF; }
.portal-menu ul li:hover a:after { border-top: 1px solid #FFF; border-right: 1px solid #FFF; }
@media only screen and (max-width: 680px) and (orientation: portrait) {
  .portal-menu h1 { padding-top: 0; }
  .portal-menu ul li { width: 100%; margin-bottom: 2%; }
}