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

@media only screen and (max-width: 768px)
{
    body
    {
        min-width: inherit;
    }

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

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

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

    header
    {
        width: 100%;

        border-bottom: none;
		float: none;
		position: relative;
		height: auto;
		border: none;
    }

    header div.top div.inner
    {
        box-sizing: border-box;
        padding: 0;
    }
	
	header div.top div.logo img {
    	width: 100%;
		max-width: 280px;
		margin: 0 auto 20px;
		display: block;
	}

	header div.bottom
	{
		padding: 0;
	}

	header div.bottom div.logo
	{
		position: relative;
		top: 0;
		left: 0;
	
		width: 100%;
		height: auto;
		padding: 0.5em 0;
		box-sizing: border-box;
	}
	
	header div.bottom div.logo img
	{
		display: block;
	
		height: auto;
		max-width: 100%;
		margin: 0 auto;
	}


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

    header nav
    {
        left: 0;

        overflow: visible;

        width: 100%;
    }

    header nav div.inner
    {
        width: 100%;
        padding: 0;
    }

    header nav ul
    {
        display: block;
        overflow: hidden;

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

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

    header nav ul.active
    {
        max-height: 1000px;
    }

    header div.top nav ul li,
	header.top div.top nav ul li
    {
        font-size: 1.6rem;

        display: block;

        width: 100%;

        border-bottom: 1px solid #dbe2e7;
    }

    header nav ul li a
    {
        text-align: left;
    }
	
	header div.top nav ul li a {    
   		padding: 0.5em 1em;
	}

    header nav ul li a::before
    {
        position: relative;
        top: 0;
        left: 0;

        width: auto;
        height: auto;

        content: '';
        transform: none;

        background: none;
    }

    nav 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 0s;
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
                transform: rotate(45deg);

        border-top: 1px solid #ff6300;
        border-right: 1px solid #ff6300;
    }

    nav ul li:nth-child(5) a::after,
    nav ul li:last-child 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 0s;
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
                transform: rotate(45deg);

        border-top: 1px solid #ff6300;
        border-right: 1px solid #ff6300;
        background: none;
    }

    header div.utility,
	header.top div.utility
    {
        font-size: 1.2rem;
        line-height: 1.5;

        float: none;

        padding: 0.5em 1em 0.5em;
		text-align: center;
		max-width: 100%;
    }

    header div.utility ul li
    {
        text-align: center;
    }

    header div.utility ul li
    {
        display: inline-block;

        white-space: nowrap;
		float: none;
    }

	header div.utility a::before,
	header.top div.utility a::before {
		background: none;
		content: "";
		display: none;
		height: 0;
		position: relative;
		right: 0;
		top: 0;
		transform: none;
	}

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

    header div.bottom div.menuButton
    {
        position: relative;

        display: block;

        width: 100%;
        height: 40px;

        border-top: 1px solid #ff6300;
        border-bottom: 1px solid #ff6300;
        background: #fff;
    }

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

        cursor: pointer;
		background: #eef1f2;
    }

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

        display: block;

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

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

        position: relative;

        float: left;

        box-sizing: border-box;
        width: 50px;
        padding-top: .5em;

        color: #ff6300;
    }

    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;

        float: right;

        width: 40px;
        height: 40px;
    }

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

        display: inline-block;

        box-sizing: border-box;
        width: 20px;
        height: 2px;

        transition: all .4s;

        background-color: #ff6300;
    }

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

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

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

    header div.menuButton.active span:nth-of-type(1)
    {
        -webkit-transform: translateY(6px) rotate(-45deg);
           -moz-transform: translateY(6px) rotate(-45deg);
            -ms-transform: translateY(6px) rotate(-45deg);
             -o-transform: translateY(6px) rotate(-45deg);
                transform: translateY(6px) 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(-6px) rotate(45deg);
           -moz-transform: translateY(-6px) rotate(45deg);
            -ms-transform: translateY(-6px) rotate(45deg);
             -o-transform: translateY(-6px) rotate(45deg);
                transform: translateY(-6px) rotate(45deg);
    }

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

	section.mainVisual div.en {
			width: 100%;
			padding: 0 1em;
			box-sizing: border-box;
	}

    section.mainVisual div.inner h2.panel {
		position: absolute;
		right: inherit;
		top: inherit;
		bottom: 0;
		transform: translate(0px, 0);
		width: 100%;
	}
	
	section.mainVisual div.inner h2.panel span.copy {
		box-sizing: border-box;
		font-size: 2.0rem;
		font-weight: bold;
		padding: 1em;
		text-align: right;
	}
	
	header div.top {
		float: none;
		padding: 20px;
		width: 100%;
	}
	
	header.top div.top {
		float: none;
		padding: 20px;
		width: 100%;
	}
	
	header div.top div.logo {
    	margin-bottom: 0;
	}
	
	section.news {
		border: none;
		box-sizing: border-box;
		float: none;
		min-width: 100%;
		width: 100%;
	}
	
	section.news div.title h2 a {
		color: #484949;
		float: none;
		width: 100%;
		display: block;
		text-align: center;
	}
	
	section.news div.title div.link a {
	
		float: none;
		max-height: 80px;
		width: 100%;
		padding: 0.5em 3em;
	}
	
	section.news ul {
    	padding: 20px;
	}
	
	section.news ul li a div.update {
		float: none;
	}
	
	footer div.inner {
		box-sizing: border-box;
		margin: 0;
		padding: 40px 20px;
		width: 100%;
		min-width: inherit;
	}
	
	footer div.inner.clearfix>div.fl {	width: 100%; }
	footer div.inner.clearfix>div.fr {	width: 100%; }
	
	footer div.information {
		text-align: center;
	}
	
	footer div.copyright {
		margin-bottom: 0.5em;
		text-align: center;
	}
	
	footer div.groupTop {
		margin-bottom: 0.5em;
		text-align: center;
	}
	
	footer div.logo,
	footer div.logo img {
		height: auto;
		margin: 0 auto 10px;
		width: 100%;
		max-width: 340px;
		float: none;
	}
	
	.topicPath ul {    
    	text-align: center;
	}


    /* -------------------------------------------------------- contents */

    div.contents
    {
    }
	
	div.contents {
		border-left: none;
		box-sizing: border-box;
		float: none;
		min-width: inherit;
		width: 100%;
		padding: 0;
	}
	
    div.contents > div.inner
    {
        padding: 0;
    }

    div.main
    {
        float: none;

        width: 100%;
    }

    aside
    {
        float: none;

        box-sizing: border-box;
        width: 100%;
        margin-top: 0;
        padding: 0 1.0em;
    }

    div.categoryheader div.inner
    {
        padding: 0 1.0em;
    }

    div.categoryList
    {
        padding: 1.0em;
    }
		
	div.categoryList ul li
	{
		max-width: inherit;
		width: 100%;
		margin-right: 0;
		float: none;
	}

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

    div.categoryList div.article div.spot
    {
        float: none;

        width: 100%;

        background: #fff;
    }

    div.categoryList div.article div.spot span
    {
        display: block;

        width: 100%;
    }

    div.detail
    {
        width: 100%;
    }
 /* 241010追記 */

    /* -------------------------------------------------------- scrollTop */
}