@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;
    }
    .default
    {
        display: none;
    }
    .responsive
    {
        display: block;
    }

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

    header
    {
        width: 100%;
        margin-bottom: 0;
    }

    header div.inner
    {
        padding: 0;
    }

    header div.top
    {
		position: relative;
    }

    header div.top div.logo
    {
        padding: .8em .5em;
    }

    header div.top div.logo a img
    {
        width: 250px;
        height: 30px;
    }

    header div.top div.fr
    {
        display: none;
    }

    header div.bottom
    {
        display: none;
    }

    header div.bottom.fixed
    {
        display: none;
    }

    /* -------------------------------------------------------- header div.responsiveNav */

    header nav.default
    {
        display: none;
    }

    header div.responsiveNav
    {
        z-index: 1000;

        display: block;

        width: 100%;
        /* position: absolute; */
    }

    header div.responsiveNav nav.responsive
    {
    }

    header div.responsiveNav nav.responsive ul
    {
		background: #333;
        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 li
    {
        font-size: 1.4rem;

        display: block;

        border-bottom: 1px solid #293983;
    }

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

        float: left;

        width: 50%;

        border-bottom: 1px solid #262626;
    }

    header div.responsiveNav nav.responsive ul.utility li a
    {
        padding: 8px 20px;

        color: #fff;
        background: #333;
    }

    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;

        color: #fff;
        background: #30439b;
    }

    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 nav.responsive ul.utility li a:after
    {
        border-top: 2px solid #808080;
        border-right: 2px solid #808080;
    }

    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;
    }

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

    header div.menuButton
    {
        position: absolute;
        top: 5px;
        right: 12px;

        display: block;

        width: 40px;
        height: 24px;
    }

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

        cursor: pointer;
    }

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

        display: block;

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

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

        position: absolute;
        top: 20px;

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

        text-align: center;

        color: #333;
    }

    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: 20px;
		margin-top: 6px;
    }

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

        display: inline-block;

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

        transition: all .4s;

        background-color: #30439b;
    }

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

    header div.menuButton span:nth-of-type(2)
    {
        top: 8px;
        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(8px) rotate(-45deg);
           -moz-transform: translateY(8px) rotate(-45deg);
            -ms-transform: translateY(8px) rotate(-45deg);
             -o-transform: translateY(8px) rotate(-45deg);
                transform: translateY(8px) 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(-8px) rotate(45deg);
           -moz-transform: translateY(-8px) rotate(45deg);
            -ms-transform: translateY(-8px) rotate(45deg);
             -o-transform: translateY(-8px) rotate(45deg);
                transform: translateY(-8px) 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
    {
        position: relative;

        padding: 0;
    }
	
	section.mainVisual div.inner div.topBnr {
		position: relative;
		width: 100%;
		bottom: 0;
		right: 0;
		height: 100px;
	}
	
	section.mainVisual div.inner div.topBnr a span.icon-list {		
		font-size: 3rem;
	}
	
	section.mainVisual div.inner div.topBnr a div.ja {
		padding: 0;
		font-size: 1.6rem;
	}
	
	section.mainVisual div.inner div.topBnr a span.en {
		font-size: 1.4rem;
	}

    /* -------------------------------------------------------- section */

    section
    {
        padding: 40px 0;
    }

    section div.title h2
    {
        font-size: 2.4rem;

        margin-bottom: 1em;
    }

    section div.link a
    {
        width: 100%;
    }

    /* -------------------------------------------------------- section.research */

    section.research ul li div.article
    {
        height: auto;
    }

    section.research ul li div.spot
    {
        float: none;

        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    section.research ul li div.spot span
    {
        display: block;

        width: 100%;
        height: auto;
    }

    section.research ul li div.spot span img
    {
        width: auto;
        max-width: 100%;
        max-height: none;
        margin: 0 auto;

        filter: none;
    }

    section.research ul li div.wrap
    {
        position: relative;
        top: auto;
        right: auto;

        width: 100%;

        transform: none;
		padding: 1em;
    }

    section.research ul li div.headline h2
    {
        font-size: 1.6rem;

        transition: all .2s ease-in-out 0s;

        color: #333;
    }

    /* -------------------------------------------------------- section.news */

    div.section div.entrylist
    {
        padding: 0;
    }

    section.news ul li
    {
        float: none;

        width: 100%;
        margin: 0 0 20px 0;
    }

    section.news ul li div.spot span
    {
        display: block;

        height: auto;
		width: 100%;
    }

    /* -------------------------------------------------------- section.event */

    div.section section.event,
    div.section section.recruit
    {
        float: none;

        width: 100%;
    }

    div.section div.update
    {
        float: none;

        margin-right: 0;
    }
	
	div.section section.event div.entry div.update {
		font-size: 1.3rem;
		vertical-align: middle;
	}	
	
	div.section div.entrylist div.entry div.headline {
		overflow: visible;
		text-overflow: inherit;
		white-space: normal;
		font-size: 1.4rem;
	}

    /* -------------------------------------------------------- section.introduction */

    section.introduction div.inner
    {
        padding: 0 1em;
    }

    section.introduction div.contentsBox
    {
        float: none;

        width: 100%;
        min-height: inherit;
        margin: 0 0 40px 0;
    }

    section.introduction div.contentsBox.first div.head
    {
        font-size: 3.4rem;
    }

    section.introduction div.contentsBox div.spot img
    {
        display: block;

        width: 100%;
    }

    section.introduction div.contentsBox div.description
    {
        font-size: 1.8rem;
    }

    section.educationResearch ul li a span
    {
        margin-bottom: 10px;
    }

    section.educationResearch ul li
    {
        float: left;

        width: 50%;
        margin-bottom: 20px;
    }

    section.educationResearch ul li a
    {
        font-size: 1.4rem;
    }

    /* -------------------------------------------------------- div.banners ul */

    div.banners ul
    {
        box-sizing: border-box;
        width: 100%;
        padding: 0 1em;
    }

    div.banners ul li
    {
        float: left;

        width: 49%;
        margin: 0 2% 2% 0;
    }

	div.banners ul li:nth-child(5n)
    {
        margin-right: 2%;
    }

    div.banners ul li:nth-child(3n)
    {
        margin-right: 2%;
    }

    div.banners ul li:nth-child(2n)
    {
        margin: 0 0 2% 0;
    }
    div.banners ul li div.title
    {
        display: none;
    }

    div.banners ul li a
    {
        position: relative;

        display: block;
    }

    div.banners ul li:nth-child(7) div.title
    {
        font-size: 1.3rem;

        position: absolute;
        top: 50%;
        right: 0;
        left: 0;

        display: block;

        margin: auto;

        -webkit-transform: translateY(-50%);
           -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
             -o-transform: translateY(-50%);
                transform: translateY(-50%);

        color: #fff;
        background: none;
    }
    /* 
	div.banners ul li div.title {
		font-size: 1.0rem;
	}
	
	div.banners ul li div.title.small {
		font-size: 1.0rem;
	}
	*/
    div.banners ul li a img
    {
        width: 100%;
        height: auto;
    }

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

    div.scroller
    {
        /* display: none; */
    }

    div.scroller
    {
        top: -40px;

        width: 40px;
        height: 40px;
    }

    div.scroller div.button
    {
        width: 40px;
        height: 40px;
    }

    div.scroller div.button a
    {
        width: 40px;
        height: 40px;
    }

    div.scroller div.button a.scrollTop::before
    {
        position: absolute;
        top: 50%;
        right: 14px;
    }

    footer div.logo a img
    {
        width: auto;
        max-width: 100%;
        height: auto;
    }

    footer div.inner div.fl
    {
        float: none;

        width: 100%;
        margin-bottom: 20px;
        padding-left: 0;
    }

    footer div.inner
    {
        padding: 40px 1em;
    }

    footer div.information
    {
        padding-left: 0;
    }

    footer div.fl:nth-child(2n) div.banner ul li
    {
        float: left;

        width: 49%;
        margin: 0 2% 10px 0;
    }

    footer div.fl:nth-child(2n) div.banner ul li:nth-child(2n)
    {
        margin-right: 0;
    }

    footer div.fl:nth-child(2n) div.banner ul li a
    {
        font-size: 1.0rem;

        width: 100%;
        padding: .8em 1em;
    }

    footer div.fl:nth-child(2) div.banner ul li a span
    {
        position: relative;
        top: 0;
        left: 0;

        display: block;

        text-align: center;
    }

    /* -------------------------------------------------------- common */

    div.wrapper div.main,
    div.wrapper div.main.wide
    {
        float: none;

        width: 100%;
    }

    div.wrapper aside
    {
        float: none;

        width: 100%;
    }

    div.categoryTitles div.title
    {
        font-size: 1.8rem;

        padding: .1em 1em;
    }

    div.categoryTitles div.title h1
    {
        font-size: 1.8rem;
    }

    div.categoryTitles div.description
    {
        font-size: 1.0rem;
    }

    .topicPath
    {
        margin: 0 auto 20px;
    }

    /* -------------------------------------------------------- category */

    div.categorySpot ul li
    {
        float: none;

        width: 100%;
        margin: 0 0 10px 0;
    }

    div.categorySpot div.article
    {
        padding: 10px;
    }

    div.categorySpot div.article div.headline
    {
        margin-bottom: .3em;
    }

    div.categorySpot div.article div.headline h2
    {
        font-size: 1.4rem;

        margin-bottom: 0;
    }

    div.categorySpot div.article div.description
    {
        font-size: 1.0rem;
    }

    div.categorySpot div.article div.spot
    {
        width: 100px;
        height: auto;
        margin-right: 20px;
    }

    div.categorySpot div.article div.spot span
    {
        width: 100px;
        height: 60px;
    }

    div.categorySpot div.article div.spot span img
    {
        width: auto;
        max-width: 100px;
        height: auto;
        max-height: 60px;
    }
	
	div.categorySpot div.article div.update {
		font-size: 1.1rem;
	}

    div.categorySpot.topics div.newslist div.entry div.wrap
    {
        float: none;
    }

    div.categorySpot.topics div.newslist div.entry div.update
    {
        float: none;
    }

    div.categorySpot.topics div.newslist div.entry div.tag
    {
        float: none;
    }

    div.categorySpot.topics div.newslist div.entry div.headline
    {
        overflow: inherit;
    }
	
	div.categoryList ul li
	{
		float: none;
		width: 100%;
		margin-right: 0;
	}
	
	div.categoryListResult ul li
	{
		float: none;
		width: 100%;
		margin-right: 0;
	}
	
	div.categoryListResult ul li div.spot span
    {
        display: block;

        height: auto;
		width: 100%;
    }
	
	div.categoryListPress ul li div.spot {
		float: none;
		margin-right: 0;
		width: 100%;
	}
	
	div.categoryListPress ul li div.spot span {
		height: auto;
	}
	
	div.categoryListPress ul li a div.information {
		float: none;
		overflow: hidden;
		width: 100%;
	}
	
	div.relayList ul li
	{
		float: none;
		width: 100%;
		margin-right: 0;
	}
		

    /* -------------------------------------------------------- div.topicsList */
	/*
    div.topicsList ul li div.spot
    {
        float: none;

        margin-bottom: 10px;
    }

    div.topicsList ul li div.spot span
    {
        display: block;

        height: auto;
    }
	*/
	div.topicsList ul li div.spot
	{

		background: #f0f0f0;
		
		height: auto;
		overflow: hidden;
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}

	div.topicsList ul li div.spot span
	{
		display: block;
	
		width: inherit;
		height: auto;
		margin: 0 auto;
	
		text-align: center;
		vertical-align: middle;
	}
	
	div.topicsList ul li div.spot span img {
		display: inline;
		height: auto;
		margin: 0 auto;
		max-height: 236px;
		max-width: 100%;
		vertical-align: middle;
		width: auto;
	}


    div.topicsList ul li div.wrap
    {
        min-height: inherit;
    }

    div.topicsList ul li a div.headline h2
    {
        font-size: 1.6rem;
    }

    div.topicsList ul li a div.description
    {
        font-size: 1.4rem;
    }	

	div.filelist a:before {
		overflow: hidden;
	}
	
	/* -------------------------------------------------------- div.categoryNew */
	
	div.categoryNew div.entry div.wrap {
		float: none;
		margin: 0;
		margin-bottom: 0.5em;
	}
	
	div.categoryNew div.entry div.update {
		/* float: none; */
	}
	
	div.categoryNew div.entry div.label {
		top: 0.5em;
		transform: none;
	}
	
	div.categoryNew div.entry a {	
		padding: 0.5em 0;
	}

    /* -------------------------------------------------------- div.detail */

    div.detail
    {
        box-sizing: border-box;
        width: 100%;
    }
}