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


/* ----------------------------------------------------------------------
 common
---------------------------------------------------------------------- */
img { width:100%; }
p { margin:0 0 20px 0; padding:0; }

/* ----------------------------------------------------------------------
 レイアウト
---------------------------------------------------------------------- */
.inner { margin:0 auto; }
.inner:after { content: ""; clear: both; display: block; }

/* ----------------------------------------------------------------------
 header
---------------------------------------------------------------------- */
#top-head {  }
#top-head #logo { width:60%; padding:0 0 0 4%; display: table-cell; vertical-align: middle;}
#top-head .link {display: none;}

#top-head .headerinner .inner { background: #fff; width: 100%; z-index: 999; position: relative; height:60px; padding:10px 0; display: table;}

/* ナビゲーション */
#top-head { margin: 0 auto 0; line-height: 1; z-index: 999; position:relative; }
#top-head { width: 100%; padding: 0; }
#top-head a,
#top-head { color: #fff; text-decoration: none; }
#global-nav { position: absolute; top: -500px; background: #CCCCCC; width: 100%; text-align: center; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; }
#top-head #global-nav ul li { border-bottom: 1px solid #ffffff; line-height:1; }
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a { width: 100%; display: block; color: #fff; padding: 18px 0; }
#top-head #global-nav ul li:hover {  background: #00aecb; }

/* Fixed */
#top-head.fixed { margin-top: 0; top: 0; height: 55px; transition: top 0.65s ease-in; -webkit-transition: top 0.65s ease-in; -moz-transition: top 0.65s ease-in; }


/* Toggle Button */
#nav-toggle { position: absolute; right: 2.34%; top: 15%; background: #007cbd; padding:15px; width: 25px; height: 25px; cursor: pointer; z-index: 101; border-radius: 50%; }
#nav-toggle div { position: relative; }
#nav-toggle span { display: block; position: absolute; height: 4px; width: 100%; background: #ffffff; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#nav-toggle span:nth-child(1) { top: 0; }
#nav-toggle span:nth-child(2) { top: 11px; }
#nav-toggle span:nth-child(3) { top: 22px; }

/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) { top: 11px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); }
.open #nav-toggle span:nth-child(2) { width: 0; left: 50%; }
.open #nav-toggle span:nth-child(3) { top: 11px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); }

/* #global-nav スライドアニメーション */
.open #global-nav { -moz-transform: translateY(580px); -webkit-transform: translateY(580px); transform: translateY(580px); }

/* ----------------------------------------------------------------------
 breadcrumb
---------------------------------------------------------------------- */
#breadcrumb { background-color:#f2f2f2; font-size:75%; padding:5px 2.5%; }

/* ----------------------------------------------------------------------
 footer
---------------------------------------------------------------------- */
#footer { background-color:#f2f2f2; padding:1% 0 0 0; border-bottom:7px solid #00aecb; margin:10% 0 0 0; }
#footernavi { border-bottom:1px solid #dbdbdb; padding:0 2.5%; }
#footernavi ul { letter-spacing:-.40em; }
#footernavi li { display:inline-block; letter-spacing:normal; width:48%; margin:0 2% 0 0; border-bottom: 1px solid #dbdbdb;}
#footernavi li:nth-child(even) { margin:0 0 0 2%;}
#footernavi li:last-child { border: none;}
#footernavi li a {  padding:5% 3% 5% 3%; position: relative; display: block; color: #000; vertical-align: middle; text-decoration: none; }
#footernavi li a::before,
#footernavi li a::after{ position: absolute; top: 0; bottom: 0; right: 0; margin: auto; content: ""; vertical-align: middle; }
#footernavi li a::before{ right: 3%; width: 5px; height: 5px; border-top: 2px solid #b3b3b3; border-right: 2px solid #b3b3b3; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#footernavi li a:hover { color:#007cbd;}
#footernavi li a:hover::before { border-color: #007cbd;}

.footerleft { font-size: 75%; margin:4% 2.5%;  }
.footerleft .logo { width:59%; margin:0 0 3% 0; }
.footerleft .address { padding:0; }
.footerleft .address p { margin:12px 0 0 0; }
.footerleft .access { margin:2% 0 0 0; }
.footerleft .access a { background: url(../images/common/footer/icon_access.gif) no-repeat left center; padding:0 0 0 15px; }
.footerright { margin:3% 2.5% 0 2.5%; overflow:hidden; }
.footerright li { margin:0 2% 0 0; width:48%; float:left; }
.footerright li:nth-child(even) { margin:0 0 0 2%;}

/* ----------------------------------------------------------------------
 共通
---------------------------------------------------------------------- */
#contents { padding:40px 0 0 0;}
#contents h1 { font-size: 187.5%; width:60%; margin:0 auto 8% auto; text-align: center; line-height:1;}
#contents h1 span { display:block; font-size: 47%; border-top: 3px solid #00aecb; color:#737373; margin:3% 0 0 0; padding:3% 0 0 0;}
#contents h2 { margin:0 2.5%; border-top:2px solid #e7ebf0; position: relative; font-weight: normal; font-size:187.5%; line-height: 1; padding: 3% 0 5% 0;}
#contents h2::after { position: absolute; top:-2px; left: 0; border-top:2px solid #007cbd; content:""; width:35%;}
.img { text-align: center;}

#contents .inner h2 { margin:0; }
#contents .section { padding: 0 0 7% 0; }
#contents .inner { margin: 0 2.5%; }

/* ----------------------------------------------------------------------
 TOPページ
---------------------------------------------------------------------- */
/* メインビジュアル */
#mainvisual { width:60%; height:auto; position:relative; overflow:hidden; }
#bg01 { height: auto; }
#img01 { position:absolute; width: 300%; left: 50%; top: 50%; margin: -85% 0 0 -140%; }
#txt01 { position:absolute; background-color: rgba(0,159,223,0.6); width: 100%; top: 40%; }
#txt01 p { width:60%; margin: 0 auto; padding:20px 0; text-align: center; }
#mainvisual02 { position:absolute; top: 0; left: 0; width:100%; }
#img02_01 { position:absolute; top: 0; left: 0; }
#img02_02 { position:absolute; top: 0; left: 0; }
#img02_03 { position:absolute; top: 0; left: 0; }
#img02_04 { position:absolute; top: 0; left: 0; }

/* 新着情報 */
#news { padding:5% 0 3% 0; margin:0 2.5%; }
#news h2 { font-size: 187.5%; width:60%; margin:0 auto 10px auto; text-align: center; line-height:1;}
#news h2 span { display:block; font-size: 47%; border-top: 3px solid #00aecb; color:#737373; margin:13px 0 0 0; padding:13px 0 0 0;}
#news .link { background: url(../images/top/icon_news.gif) no-repeat left center; padding:0 0 0 25px; font-size: 75%; float: right;}

#news .newsinner { clear: both; border-top:1px dotted #c8c7c7; }
#news dl { clear: both; border-bottom:1px dotted #c8c7c7; overflow: hidden; padding: 2% 3%;}
#news dl dt { margin:0 0 1% 0; }

/* ----------------------------------------------------------------------
 学科情報
---------------------------------------------------------------------- */
#about { background: #50bdf8 url(../images/department/bg_about_sp.jpg) no-repeat left bottom 50px; color:#ffffff;}
#about .bgtxt { background-color: rgba( 0,124,189,0.58 ); padding:0 0 10px 0; margin: 0 0 10px 0; }
#about .copy { font-size:150%; padding:5% 0; position: relative;}
#about .copy::after { position: absolute; bottom:-2px; left: 0; border-bottom:2px solid #ffffff; content:""; width:30%;}
#about p { margin:0 0 5% 0;}

#field { margin: 30px 0 0 0; }
#field li { color: #ffffff; padding:5% 5% 3% 5%; overflow: hidden;}
#field li h3 { font-size: 100%; text-align: center; margin:0 0 6% 0;}
#field li h3 span { border-bottom: 1px solid #ffffff; padding:0 5% 3% 5%;}
#field li p { text-align: left;}
#field li .detail { float: right;}
#field li dl { margin: 0 0 5% 0; }
#field li dl dt { display:inline-block; width:100px; vertical-align: middle; margin: 0 20px 0 0;}
#field li dl dd { display:inline-block; font-size: 68.75%; border: 1px solid #ffffff; }
#field li dl dd a { background: url(../images/department/icon_link.png) no-repeat 5px center; width: 80px; padding:3px 5px 3px 23px; display: block; color: #ffffff; }
#field li dl dd a:hover { text-decoration: none; background-color: rgba( 0,0,0,0.1 );  }
#field .field01 { background-color: #85bae5;}
#field .field02 { background-color: #b2a486;}
#field .field03 { background-color: #f29c97;}


/* ----------------------------------------------------------------------
 カリキュラム
---------------------------------------------------------------------- */
#year { overflow: hidden; width: 100%; }
#year li.curriculumbox{ font-size: 112.5%; font-weight: bold; }
#year .icon_year { height:39px; overflow: hidden;}
#year .icon_year span { float: left; text-decoration: none; color: #444; width:94%; position: relative; background-color: #eaeae9; padding: 5.5px 3%; }
#year li.year01 .icon_year span{ background: #595858 url(../images/curriculum/bg_year01.gif) no-repeat right center; color: #ffffff; background-size: auto 100%; }
#year li.year02 .icon_year span{ background: #8a8a89 url(../images/curriculum/bg_year02.gif) no-repeat right center; color: #ffffff; }
#year li.year03 .icon_year span{ background: #c8c9ca url(../images/curriculum/bg_year03.gif) no-repeat right center;  }
#year li.year04 .icon_year span{ background-color: #eee; }


#year .last { background: none; }

.yearbox { font-size: 88%; font-weight: normal; padding:0 15px;}
.yearbox ul { margin: 10px 0 20px 20px; }
.yearbox li { position: relative; }
.yearbox li::after { display: block; content: ''; position: absolute; top: .3em; left: -1em; width: 10px; height: 10px; background-color: #3c3c3c; }
.yearbox li.square::after {  }
.yearbox li.circle::after { border-radius: 100%; }
.yearbox li.diamond::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }


.yearbox .ttl01 { margin: 0; border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; padding: 5px 0; color: #ffffff; text-align: center; font-weight: bold; }
.yearbox .ttl02 { border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; padding: 5px 0; color: #ffffff; text-align: center; font-weight: bold; }
.statistics { background-color: #65a1cf; }
.calculation { background-color: #afa285; }
.information { background-color: #e89692; }



/* ----------------------------------------------------------------------
 教員紹介
---------------------------------------------------------------------- */
.faculty01 h2::after { border-top:2px solid #85bae5 !important; }
.faculty02 h2::after { border-top:2px solid #b2a486 !important; }
.faculty03 h2::after { border-top:2px solid #f29c97 !important; }

#faculty h3 { padding:0 0 0 13px; font-size:112.5%; margin:0 0 20px 0; }

.faculty01 h3 { border-left:7px solid #85bae5; }
.faculty02 h3 { border-left:7px solid #b2a486; }
.faculty03 h3 { border-left:7px solid #f29c97; }

#faculty .box { overflow: hidden; margin:0 0 30px 0;}
#faculty .box img{ display:inline-block; vertival-align:top; width:92px; height:auto;}
#faculty .box ul { float: right; text-align: right;}
#faculty .box ul li { display: inline-block; border: 1px solid #e6e6e6; background: url(../images/faculty/icon_faculty.gif) no-repeat 15px center;margin: 0 0 0 15px; font-size: 81%;}
#faculty .box ul li:first-child { margin: 0 0 10px 0;}
#faculty .box ul li a { display: block; color: #333333; padding:10px 15px 10px 40px;}
#faculty .box ul li a:hover { color: #00aecb; }

.faculty04 dl { overflow: hidden; border-bottom: 1px dotted #bfbfbf; padding:0 0 10px 0; margin: 0 0 10px 0; }
.faculty04 dt { float:left; padding:10px 0; }
.faculty04 dd { float:right; border: 1px solid #e6e6e6; background: url(../images/faculty/icon_faculty.gif) no-repeat 15px center; margin: 0 0 0 15px; font-size: 81%;}
.faculty04 dd a { display: block; color: #333333; padding:10px 15px 10px 40px;}
.faculty04 dd a:hover { color: #00aecb; }


/* ----------------------------------------------------------------------
 就職・進学
---------------------------------------------------------------------- */
#career p { color: #007cbd; }
#career .box { overflow: hidden; padding:20px 0 0 0; }
#career .box .left { overflow: hidden;}
#career .box .right { overflow: hidden;}
#career .box .left .img { margin:0 0 20px 0; }

#career .box h3 { border-bottom: 1px solid #007cbd; padding: 0 0 5px 0;}
#career .box ul { font-size: 71.875%; }


/* ----------------------------------------------------------------------
 qa
---------------------------------------------------------------------- */
#qa dl { border-bottom: 1px dotted #bfbfbf; margin:0 0 20px 0; }
#qa dt { background: url(../images/qa/icon_q.gif) no-repeat left center; padding:10px 0 10px 60px; font-weight: bold; color:#007cbd; margin: 0 0 20px 0; }
#qa dd { background: url(../images/qa/icon_a.gif) no-repeat left top; padding:10px 0 20px 60px; }
#qa dl.last { border: none; margin: 0;}


/* ----------------------------------------------------------------------
 新着情報
---------------------------------------------------------------------- */
#contents #newsdetail h2 { font-size:150%; }
#contents #newsdetail h2 span { display:block; margin:5px 0 0 0; font-size:75%; text-align: right;}