@import url("init.css");
/* 横幅415px以上の場合(PC・タブレット向け) */
@media only screen and (min-width: 415px) {
    h1 {
        width: 960px;
        background-color: #005287;
        color: #FFFFFF;
        text-align: center;
        margin: 0 auto 30px auto;
    }
    /* ナビ */
    nav {
        overflow: hidden;
        width: 960px;
    }
    #menuButton {
        display: none !important;
    }
    .menu {
        display: block !important;
    }
    nav {
        margin: 0 auto 30px auto;
        background-color: #FFFFFF;
        z-index: 99;
    }
    nav ul {
        width: 800px;
        overflow: hidden;
        margin: 0 auto;
        padding-top: 10px;
    }
    nav ul li {
        float: left;
    }
    nav ul li a {
        display: block;
        font-size: 16px;
        text-align: center;
        padding: 5px 1em;
    }
	nav ul li a:hover {
		opacity: 0.6;
	}
	/* メインビジュアル */
	nav+img{
		display: block;
		width: 960px;
		margin: 0 auto;
	}
	article{
		width: 960px;
		margin: 0 auto;
	}
	article a.textlink{
		font-weight: bold;
	}
	article h2{
		font-size: 26px;
		line-height: 36px;
		font-weight: bold;
		text-align: center;
		margin: 30px 0 15px 0;;
		color: #005287;
	}
	dl{
		margin-top: 30px;
		margin-bottom: 100px;
	}
	dt{
		width: 960px;
		font-size: 20px;
		line-height: 36px;
		background-color: #005287;
		color: #FFFFFF;
		padding-left: 12px;
		margin-bottom: 5px;
	}
	dd{
		margin-bottom: 30px;
		padding-left: 12px;
		padding-right: 12px;
	}
	article ul{
		margin: 30px 0;
	}
	article li{
		margin-bottom: 15px;
	}
	article li a{
		color: #005287;
		text-decoration: underline;
	}
	section{
		margin-bottom: 100px;
	}
	section h3{
		font-size: 26px;
		line-height: 36px;
		font-weight: bold;
		text-align: center;
		margin: 30px 0 15px 0;;
		color: #005287;
	}
	#breadCrumbs{
		width: 960px;
		margin: 0 auto;
	}
	#breadCrumbs ul{
		overflow: hidden;
	}
	#breadCrumbs li{
		float: left;
		margin-right: 10px;
		font-size: 12px;
	}
	#breadCrumbs a:hover{
		opacity: 0.6;
	}
	#breadCrumbs span{
		font-size: 12px;
		line-height: 22px;
	}
    /* フッター */
    footer {
        background-color: #E0E0E0;
        border-top: 1px solid #CCCCCC;
    }
    #address {
        text-align: center;
        padding: 30px 0;
    }
}
/* 横幅414px以下の場合(スマホ向け) */
@media only screen and (max-width: 414px) {
    * {
        font-size: 14px;
        line-height: 24px;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    h1 {
        width: 100%;
        color: #005287;
        text-align: center;
		margin: 10px 0;
    }
    /* ナビゲーション */
    nav ul.menu li a {
        display: block;
        padding: 1em;
        color: #333333;
    }
    nav ul.menu li + li {
        border-top: 1px solid #E2E2E2;
    }
    .fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #FFFFFF;
        box-shadow: 0 2px 10px 3px rgba(0, 0, 0, 0.2);
    }
    .menu {
        display: none;
    }
    /* メニュー開閉ボタン */
    #menuButton {
        display: block;
        width: 100%;
        height: 42px;
        position: relative;
        z-index: 3;
        background-color: #08204A;
    }
    #menuButton span {
        display: block;
        background: #CCCCCC;
        width: 24px;
        height: 2px;
        position: absolute;
        left: 9px;
        transition: all 0.4s;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
    }
    #menuButton span:first-child {
        top: 12px;
    }
    #menuButton span:nth-child(2) {
        margin-top: -1px;
        top: 50%;
    }
    #menuButton span:last-child {
        bottom: 12px;
    }
    #menuButton.active span:first-child {
        -webkit-transform: translateY(8px) rotate(45deg);
        -moz-transform: translateY(8px) rotate(45deg);
        -ms-transform: translateY(8px) rotate(45deg);
        transform: translateY(8px) rotate(45deg);
    }
    #menuButton.active span:nth-child(2) {
        opacity: 0;
    }
    #menuButton.active span:last-child {
        -webkit-transform: translateY(-8px) rotate(-45deg);
        -moz-transform: translateY(-8px) rotate(-45deg);
        -ms-transform: translateY(-8px) rotate(-45deg);
        transform: translateY(-8px) rotate(-45deg);
    }
	/* メインビジュアル */
	nav+img{
		display: block;
		max-width: 100%;
		margin: 0 auto;
	}
	article{
		width: 92%;
		margin: 0 auto;
	}
	article a.textlink{
		font-weight: bold;
	}
	article h2{
		font-size: 20px;
		line-height: 30px;
		font-weight: bold;
		text-align: center;
		margin: 20px 0 10px 0;;
		color: #005287;
	}
	dl{
		margin-top: 20px;
		margin-bottom: 50px;
	}
	dt{
		width: 100%;
		font-size: 16px;
		line-height: 32px;
		background-color: #005287;
		color: #FFFFFF;
		padding-left: 10px;
		margin-bottom: 5px;
	}
	dd{
		margin-bottom: 30px;
		padding-left: 10px;
		padding-right: 10px;
	}
	article ul{
		margin: 30px 0;
	}
	article li{
		margin-bottom: 15px;
	}
	article li a{
		color: #005287;
		text-decoration: underline;
	}
	section{
		margin-bottom: 50px;
	}
	section h3{
		font-size: 20px;
		line-height: 30px;
		font-weight: bold;
		text-align: center;
		margin: 20px 0 10px 0;;
		color: #005287;
	}
	#breadCrumbs{
		width: 96%;
		margin: 0 auto 5px auto;
	}
	#breadCrumbs ul{
		overflow: hidden;
	}
	#breadCrumbs li{
		float: left;
		margin-right: 10px;
		font-size: 12px;
	}
	#breadCrumbs a:hover{
	}
	#breadCrumbs span{
		font-size: 12px;
		line-height: 22px;
	}
    /* フッター */
    footer {
        background-color: #E0E0E0;
        border-top: 1px solid #CCCCCC;
    }
    #address {
        text-align: center;
        padding: 30px 0;
    }
}