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

@media only screen and (max-width: 640px)
{
	
	body {
		min-width: inherit;
	}
    
	/* -------------------------------------------------------- common */

    div.inner
    {
        box-sizing: border-box;
        width: 100%;
        min-width: 100%;
        padding: 0 1em;
    }
    .fl
    {
        float: none;
    }
    .fr
    {
        float: none;
    }
    .default
    {
        display: none;
    }
    .responsive
    {
        display: block;
    }

    /* -------------------------------------------------------- header */

    header
    {
        width: 100%;
    }
	
    header div.bottom
    {
        /* border: none; */
		/* height: 65px;
	    max-height: 65px; */
		height: auto;
		max-height: inherit;
    }
	
	header div.bottom.fixed
    {
        position: relative;
        z-index: 9999;
        top: 0;

        width: auto;

        background: #fff;
    }
    /*
	header div.logo a img,
	footer div.logo a img {
		height: auto;
		width: 100%;
	}
	*/
	
	header div.top {
		display: none;
	}
	
	header div.logo {
		width: 160px;
	}
	
	header div.logo a {
		padding: 10px 10px;
	}
	
	header div.logo a img,
	footer div.logo a img {
		height: 45px;
		width: 240px;
	}
	
	footer div.logo a img {
		height: 45px;
		width: 240px;
		margin: 0 auto;
		display: block;
	}	
	
    /* -------------------------------------------------------- header div.responsiveNav */

	header nav.default {
		display: none;
	}
	
	header div.bottom div.inner
    {
        padding: 0;
    	position: relative;
	}
	
    header div.responsiveNav
    {
		width: 100%;
        z-index: 1000;
		/* position: absolute; */
		position: relative;
		top: 0;
		left: 0;
    }
	
	header div.responsiveNav nav.responsive
    {
		position: relative;
		/* top: 65px; */
    }

    header div.responsiveNav nav.responsive ul
    {
        display: block;
        overflow: hidden;

        width: 100%;
        max-height: 0;
        margin: 0 auto;

        transition: all .5s ease-in-out;
    }

    header div.responsiveNav nav.responsive ul.active
    {
        max-height: 1000px;
    }
	
	header div.responsiveNav nav.responsive ul.gnav
    {
	    border-top: 1px solid #d6d5d5;
    }

	header div.responsiveNav nav.responsive ul.utility
    {
		clear: both;
    }

    header div.responsiveNav nav.responsive ul li
    {
        font-size: 1.6rem;

        display: block;

        border-bottom: 1px solid #262626;
    }

	header div.responsiveNav nav.responsive ul.utility li
    {
        width: 50%;
		float: left;
    }
	
	header div.responsiveNav nav.responsive ul.utility li a
    {
		padding: 8px 20px;
		background: #444;
    }

    header div.responsiveNav nav.responsive ul li a
    {
        font-weight: bold;

        position: relative;

        display: block;

        box-sizing: border-box;
        width: 100%;
        padding: 12px 20px;

        text-align: left;
		background: #333;
		color: #fff;
    }

    header div.responsiveNav nav.responsive ul li a:after
    {
        position: absolute;
        top: 50%;
        right: 15px;
		left: inherit;

        display: block;

        width: 5px;
        height: 5px;
        margin-top: -5px;

        content: '';
        transition: all .2s ease-in-out;
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
                transform: rotate(45deg);

        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        background: none;
    }

    header div.responsiveNav ul li:first-child a::before
    {
        position: relative;
        top: auto;
        left: 0;

        width: auto;
        height: auto;
        margin-top: 0;

        content: '';

        background: none;
    }

    header div.responsiveNav ul li:last-child
    {
        width: 100%;
    }

    header>div.responsiveNav>div.inner>ul>li::after
    {
        position: relative;
        z-index: 9999;
        bottom: 0;
        left: 0;

        width: 0;
        height: auto;

        content: '';

        background: none;
    }

    div.responsiveNav>div.inner>ul>li>a:hover::after {
        left: inherit;

        width: 5px;
    }
	
	header div.responsiveNav ul li div.sub {
		display: none !important;
    }

    /* -------------------------------------------------------- menuButton */

    header div.menuButton
    {

        display: block;

        width: 40px;
        height: 28px;

		position: absolute;
		top: -55px;
		right: 10px;
    }

    header div.menuButton div.menu-trigger
    {
        display: block;

        cursor: pointer;
    }

    header div.menuButton div.menu-trigger > div
    {
        position: relative;

        display: block;

        width: 40px;
        height: 28px;
        margin: 0 auto;
    }

    header div.menuButton div.menu-trigger > div div.label
    {
        font-size: 1.3rem;
        font-weight: bold;

        position: absolute;

        box-sizing: border-box;
        width: 40px;

        color: #333;
		top: 28px;
		text-align: center;
    }

    header div.menuButton div.menu-trigger > div div.label::before
    {
        content: 'MENU';
    }

    header div.menuButton div.menu-trigger > div div.label.open::before
    {
        content: 'CLOSE';
    }
    
	header div.menuButton div.menu-trigger > div div.hamburger
    {
        position: relative;


        width: 40px;
        height: 28px;
    }

    header div.menuButton span
    {
        position: absolute;
        left: 0;

        display: inline-block;

        box-sizing: border-box;
        width: 40px;
        height: 6px;

        transition: all .4s;

        background-color: #ffb600;
    }

    header div.menuButton span:nth-of-type(1)
    {
        top: 0;
        left: 0;
    }

    header div.menuButton span:nth-of-type(2)
    {
        top: 11px;
        left: 0;
    }

    header div.menuButton span:nth-of-type(3)
    {
        bottom: 0;
        left: 0;
    }

    header div.menuButton.active span:nth-of-type(1)
    {
        -webkit-transform: translateY(11px) rotate(-45deg);
           -moz-transform: translateY(11px) rotate(-45deg);
            -ms-transform: translateY(11px) rotate(-45deg);
             -o-transform: translateY(11px) rotate(-45deg);
                transform: translateY(11px) rotate(-45deg);
    }

    header div.menuButton.active span:nth-of-type(2)
    {
        opacity: 0;
    }

    header div.menuButton.active span:nth-of-type(3)
    {
        -webkit-transform: translateY(-11px) rotate(45deg);
           -moz-transform: translateY(-11px) rotate(45deg);
            -ms-transform: translateY(-11px) rotate(45deg);
             -o-transform: translateY(-11px) rotate(45deg);
                transform: translateY(-11px) rotate(45deg);
    }

    /* ie9 */
	/*
    html.ie9 header div.menuButton
    {
        position: relative;

        display: block;

        width: 100%;
        height: 36px;

        background: #003e6c;
    }

    html.ie9 header div.menuButton div.menu-trigger > div div.hamburger
    {
        background: url(../img/menubutton.png) no-repeat;
        background-position: center;
        background-size: 20px 20px;
    }

    html.ie9 header div.menuButton.active div.menu-trigger > div div.hamburger
    {
        background: url(../img/menubutton_active.png) no-repeat;
        background-position: center;
        background-size: 20px 20px;
    }

    html.ie9 header div.menuButton span
    {
        display: none;
    }
	*/
	/* -------------------------------------------------------- mainVisual */
	
	section.mainVisual {
		height: auto;
	}
	
	section.mainVisual div.inner {
    	height: 250px;
    	position: relative;
	}
	section.mainVisual div.inner h2.copy {
		font-size: 2.8rem;		
	}
	
	section.mainVisual div.movie {
		position: relative;
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
	
	section.mainVisual div.movie a.iframe {
    	position: absolute;
        background: url("../img/btn_play.png") no-repeat scroll right bottom / 50px auto, rgba(0, 0, 0, 0) url("../img/bg_movie.png") repeat scroll 3px center;
	}
	
	section.mainVisual div.movie iframe {
		height: 100% !important;
		margin: 0 auto;
		position: relative;
		right: 0;
		top: 0;
		width: 100% !important;
	}
	
	section.mainVisual div.movie div {
		margin: 0 auto;
		width: 100%;
		height: 250px;
		display: block;
	}
	
	section.mainVisual div.movie iframe {
		height: auto;
		position: relative;
	}
		
	/* -------------------------------------------------------- targetLink */
	
	div.targetLink ul li {
    	float: left;
	    width: 50%;
	}
		
    /* -------------------------------------------------------- section */
	
	section div.title h2 {
		font-size: 4.0rem;
	}
	
	section div.panel div.caption {
		position: relative;		
	    display: block;
    	height: auto;
	    text-align: center;
	    width: 100%;
		padding: 0.5em 0;
		line-height: 1;
	}
	
	section div.panel div.caption span {
	    display: inline;
	}
	
	section div.panel div.wrap {
		padding: 0.5em;
	}
	
	section div.panel div.wrap div.headline,
	section div.panel div.wrap div.headline h2 {
		font-size: 1.8rem;
		margin-bottom: 0.2em;
	}	
	
	/* -------------------------------------------------------- introduction */
	
	section.introduction {
		padding: 20px 0;
	}
	
	section.introduction div.course div.panel {
    	width: 50%;
		float: left;
	}
	
	
	section.introduction div.course div.panel div.wrap {
		top: 0;
		position: relative;
		min-height: 110px;
	}
	
	section.introduction div.course div.panel.graduate {
    	width: 100%;
		float: none;
		max-height: inherit;
	}
	
	section.introduction div.course div.panel.graduate div.spot {
		float: none;
		width: 100%;
	}
	
	
	section.introduction div.course div.panel.graduate div.wrap {
    	width: 100%;
		min-height: inherit;
	}
	
	
	section.introduction div.course div.panel div.wrap div.sub {
		line-height: 1.2;
		font-size: 1.6rem;
	}
	
	section.introduction div.course div.panel div.wrap div.headline span {
    	font-size: 1.2rem;
		display: block;
	}
	
	section.introduction div.panel div.description {
		display: none;
	}	
	
	/* -------------------------------------------------------- specialBnr */
	
	div.specialBnr div.link {
		padding-top: 3.5em;
		text-align: center;
	}
	
	div.specialBnr div.link span {
		font-size: 3.0rem;
	}	
		
	div.specialBnr div.link span::after {
		background: none;
		border: none;
		content: "";
		display: block;
		height: 0;
		left: inherit;
		margin-top: 0;
		position: relative;
		right: 0;
		top: 0;
		width: 0;
	}
	
	/* -------------------------------------------------------- section.topics */
	
	section.topics ul {
		width: 100%;
	}
	
	section.topics ul li a div.update {
		float: none;
	}
	
	/* -------------------------------------------------------- aboutTop */
		
	section.aboutTop div.panel.message {
    	width: 100%;
	}
	
	/* section.introduction div.panel.message img {
    	width: 200%;
		height: auto;
		margin-left: -50%;
	} */
	
	section.aboutTop div.panel.vision,
	section.aboutTop div.panel.history {
   		width: 50%;
		float: left;
	}
	
	section.aboutTop div.panel div.description {
		display: none;
	}	
	
	/* -------------------------------------------------------- admissions */
	
	section.admissions div.title h2 {   	
    	text-align: center;
	}
	
	section.admissions div.inner {
		padding: 0;
	}
	
	section.admissions div.link {
		text-align: center;
	}
	
	section.admissions div.fl {		
		margin-right: 0;
		position: relative;
		width: 100%;
		height: auto;
		padding: 20px 0;
	}
	
	section.admissions div.fl div.point {
    	padding: 20px;
	}
	
	section.admissions div.fl div.details {
		
		display: none;
	}

	section.admissions div.fl div.details ul {
		float: none;
		width: 100%;
	}
	
	section.admissions div.fr {
		height: auto;
	}
	
	section.admissions div.fr div.spot {
		display: block;
		height: 200px;
		margin-left: 0;
		background-position: center;
	}
	
	/* -------------------------------------------------------- forAdmissions */
	
	div.forAdmissions section div.inner {
		position: relative;
		width: 100%;
	}
		
	div.forAdmissions section.opencampus {
	    width: 100%;
	}
	
	div.forAdmissions section.access {		
		width: 100%;
	}
	
	/* -------------------------------------------------------- campusLife */
	
	section.campusLife ul {
    	width: 100%;
		padding: 0 1em;
		box-sizing: border-box;
	}
		
	section.campusLife ul li {
		float: none;
		position: relative;
		width: 100%;
		max-width: 280px;
		margin: 0 auto 20px;
	}
		
	section.campusLife ul li div.headline {
		bottom: 0;
		font-size: 2.8rem;
		margin: auto;
		position: relative;
	}
	
	section.campusLife ul li div.headline span {
		padding: 0.5em;
		width : 90%;
		margin: 0 auto;
		display: block;
		box-sizing: border-box;
	}
	
	/* -------------------------------------------------------- research */
	
	section.research div.fl div.link {
    	margin: 0 0 0;
	}
	
	section.research > div.inner > div.clearfix > div.panel.pickup.fl {
    	width: 100%;
	}
	
	section.research > div.inner > div.clearfix > div.panel.pickup.fl > div.clearfix > div.fl {
		height: auto;
		padding: 20px;
		width: 100%;
	}
	
	section.research > div.inner > div.clearfix > div.panel.pickup.fl > div.clearfix > div.fr.spot {
		display: none;
	}
	
	section.research > div.inner > div.clearfix div.panel.social {
		min-height: inherit;
		max-height: inherit;
	}
		
	section.research > div.inner > div.clearfix div.panel.social div.fr {
		min-height: inherit;
		width: 100%;
		padding: 10px 20px !important;
		box-sizing: border-box;
	}
	
	section.research > div.inner > div.clearfix div.panel.social div.spot {
		display: none;
	}
	
	section.research > div.inner > div.clearfix div.panel.social div.fr div.headline {
		font-size: 2.4rem;
	}

	section.research > div.inner > div.clearfix > div.fr {
    	width: 100%;
	}
	
	section.research > div.inner > div.clearfix > div.fr > div.panel {
		max-height: none;
		overflow: hidden;
		min-height: inherit;
	}
	
	section.research > div.inner > div.clearfix > div.fr > div.panel:first-child div.fl {
       width: 100%;
	   padding: 0;
	}
	
	section.research > div.inner > div.clearfix > div.fr > div.panel div.spot {
		display: none;
	}
	
	section.research > div.inner > div.clearfix > div.fr > div.panel:last-child div.fr {
    	padding: 10px 20px;
    	width: 100%;
	}
	
	section.research > div.inner > div.clearfix > div.fr > div.panel:nth-child(2n) div.fr {
	    padding: 10px 20px;
   		width: 100%;
		min-height: inherit;
	}
	
	section.research > div.inner > div.clearfix > div.fr > div.panel:nth-child(odd) div.fl {		
		padding: 10px 20px;
		width: 100%;
		min-height: inherit;
	}    
	
	/* -------------------------------------------------------- footer */
	
	footer div.inner {
    	padding: 0 1em 0;
		box-sizing: border-box;
	}
	
	footer div.inner div.fl {
		padding-left: 0;
		width: 100%;
		text-align: center;
	}
		
	footer div.inner div.fl::after {
		background: none;
		content: "";
		display: block;
		height: 0;
		position: relative;
		right: 0;
		top: 0;
		width: 0;
	}
	
	footer div.information {
		margin-bottom: 40px;
		padding-left: 0;
		text-align: center;
	}
	
	footer div.information table {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		white-space: nowrap;
	}
	
	footer div.fl:first-child div.banner {
		padding-left: 0;
	}
	
	footer div.fl div.banner {
		width: 100%;
		margin-bottom: 10px;
		padding-left: 0;
		float: none;
		margin-right: 0;
	}
	
	footer div.fl:nth-child(2) ul {
    	margin: 20px 0;
	}
	
	footer div.fl div.banner:nth-child(2n) {
		width: 100%;
		margin-right: 0;
	}
	
	footer div.banner img {
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
	}
	
	footer div.inner div.fl:nth-child(3) {
		display: none;
	}
	
	/* -------------------------------------------------------- category */
	
	div.categoryList ul li {
		width: 100%;
		margin: 0 0 10px 0;
		float: none;
	}
	
	div.categoryList div.article {
    	padding: 10px;
	}
	
	div.categoryList div.article div.headline {
		margin-bottom: 0;
	}
	
	div.categoryList div.article div.headline h2 {
		font-size: 1.4rem;
		margin-bottom: 0;
	}

	div.categoryList div.article div.description {
		display: none;
	}
	
	div.categoryList div.article div.spot {
		height: auto;
		margin-right: 20px;
		width: 100px;
	}
	
	div.categoryList div.article div.spot span {
		height: 60px;
		width: 100px;
	}
	
	div.categoryList div.article div.spot span img {
		height: 60px;
		max-height: 60px;
		max-width: 100px;
		width: auto;
	}
	
	
	/* subtop */
	
	section.other div.panel.small.data {
		min-height: inherit;
	}
	
	section.other div.panel.small.data div.spot {
		position: relative;
	}
		
	div.subtop section div.panel {
		margin-bottom: 20px;
	}
	
	section.about div.panel div.fl.spot {
	    width: 100%;
	}
	
	section.about div.panel div.fr.wrap {
		box-sizing: border-box;
		padding: 20px;
		width: 100%;
	}
	
	section.other div.panel.large {
    	width: 100%;
	}
		
	section.other div.panel.large div.details ul {
		float: none;
		width: 100%;
	}
	
	section.other div.panel.small {
    	width: 100%;
	}
	
	section.about div.details ul {
		float: none;
		width: 100%;
	}
	
	section.movie div#slider {
    	overflow: visible;
	}
	
	/* banner */

	div.wrapper.subtop div.banner {
	}
	
	div.wrapper.subtop div.banner ul {
		padding: 0 0;
	}
	
	div.wrapper.subtop div.banner ul li {
		float: none;
		width: 100%;
		max-width: 300px;
		margin: 0 auto 10px;
	}
	
	div.wrapper.subtop div.banner ul li img {
		display: block;
		width: 100%;
	}
	
	div.wrapper.subtop div.banner ul li:last-child {
		margin: 0 auto 10px;
	}

	
	/* -------------------------------------------------------- categoryVisual */

	div.categoryVisual {
		
	}	
	
	div.categoryVisual div.inner {
		padding: 0;		
	}
	
	div.categoryVisual img {
		width: 200%;
		display: block;	
	}	
	
	/* -------------------------------------------------------- div.detail */
	
	div.detail
    {
        width: 100%;
	    padding: 0 1em;
		box-sizing: border-box;
    }
		
	div.detail div.main {
    	float: none;
    	margin: 0 auto;
    	width: 100%;
	}
	
	div.detail aside {
		float: none;
		width: 100%;
	}
}