
.nav {
	display: none;
}

/* PCではボタン非表示 */
#navbtn{
	display:none;
}

@media screen and (max-width: 900px) {

	#access ul,
	#access.fixed ul {
		display: none;
	}

	#access.fixed {
		display: block;
	}

	.nav.info {
		display: block;
		position: relative;
		z-index: 10;
	}

	.nav {
		display: block;
	}

	#navbtn{
		display:block;
	}

	.nav{
		position: fixed;
		top: 0;
		left: 100%;
		width: 100%;
		height: 100vh;
		z-index: 99;
		background: #e1eff5; /* #308aaf */
		color: #ffffff;
		/*
		display: flex;
		justify-content: center;
		align-items: center;
		*/
		/* 右からスライド */
		transition: left 0.5s;
	}

	nav.nav {
		height: 100%;
		overflow-y: scroll;
	}

	.nav h1 {
		width: 200px;
		margin: 15px;
	}

	.nav h1 a {
		display: block;
		text-decoration: none;
	}

	.nav h1 a img {
		width: 100%;
		height: auto;
	}

	.nav ul {
		list-style:none;
	}

	ul.global-nav li {
		border-top: 1px dashed #308aaf;
	}

	ul.global-nav li:last-child {
		border-bottom: 1px dashed #308aaf;
	}

	.nav ul li a {
		display: block;
		text-decoration: none;
	    color: #308aaf;
	    padding: 15px;
	    font-weight: bold;
	}

	/* ナビゲーションボタン（開く） */
	#navbtn {
		position: fixed;
		top: 12px;
		right: 12px;
		padding: 0;
		outline: none;
		border: none;
		background: none;
		width: 30px;
		height: 30px;
		cursor: pointer;
		z-index: 999;
	}

	#navbtn::before {
		color: #308aaf;
		font-family: 'Font Awesome 5 Free';
	    font-weight: 900;
	    content: '\f0c9';
	    font-size: 1.5rem;
	}

	/* ナビゲーションボタン（閉じる） */
	.open #navbtn{
		z-index: 100;
	}

	.open #navbtn:before {
		color: #308aaf;
		font-family: 'Font Awesome 5 Free';
	    font-weight: 900;
	    content: '\f00d';
	    font-size: 1.5rem;
		z-index: 100;
	}

	/* ナビゲーションメニュー 開いた時*/
	.open .nav{
		left: 0; /* 0 */
	}

	.global-nav__list {
		margin: 25px; /* 0 */
		padding: 0;
		list-style: none;
	}

	/* アコーディオンメニュー */
	.accbox, .accbox2 {
	    padding: 0;
	    width: 100%;
	}

	/*ラベル*/
	.accbox label {
		color: #308aaf;
		font-weight: bold;
	    display: block;
	    padding: 15px;
	    cursor :pointer;
	    transition: all 0.5s;
	}

	.accbox2 label {
		color: #308aaf;
		font-weight: bold;
	    display: block;
	    margin: 0 0 0 30px;
	    padding: 15px 0;
	    cursor :pointer;
	    transition: all 0.5s;
	}

	.accbox2 label:before {
		font-family: 'Font Awesome 5 Free';
	    font-weight: 900;
	    content: '\f068';
	    position: relative;
	    top: 0;
	    left: 5px;
	    margin: 0 10px 0 0;
	}

	.accbox .accshow ul li a,
	.accbox2 .accshow2 ul li a {
		font-weight: bold;
	}

	.accbox label ul li a:first-child,
	.accbox2 label ul li a:first-child {
	    border-top: none;
	}

	/*アイコンを表示*/
	.accbox label:after {
	    font-family: 'Font Awesome 5 Free';
	    font-weight: 900;
	    content: '\f107';
	    float: right;
	    margin: 0 8px 0 0;
	}

	.accbox2 label:after {
	    font-family: 'Font Awesome 5 Free';
	    font-weight: 900;
	    content: '\f107';
	    float: right;
	    margin: 0 20px 0 0;
	}

	/*チェックは隠す*/
	.accbox input,
	.accbox2 input {
	    display: none;
	}

	/*中身を非表示にしておく*/
	.accbox .accshow,
	.accbox2 .accshow2 {
	    height: 0;
	    padding: 0;
	    overflow: hidden;
	    opacity: 0;
	}

	/*クリックで中身表示*/
	.cssacc:checked + label + .accshow,
	.cssacc2:checked + label + .accshow2 {
	    height: auto;
	    opacity: 1;
	}

	.accbox .accshow p {
	    margin: 15px 10px
	}

	.accshow ul li a span {
		margin: 0 0 0 15px;
	}

	.accshow2 ul li a span {
		margin: 0 0 0 40px;
	}

	.accshow ul li a span:before {
	    font-family: 'Font Awesome 5 Free';
	    font-weight: 900;
	    content: '\f068';
	    position: relative;
	    top: 0;
	    left: 5px;
	    margin: 0 10px 0 0;
	}

	.accshow2 ul li a span:before {
	    font-family: 'Font Awesome 5 Free';
	    font-weight: 900;
	    content: '\f105';
	    position: relative;
	    top: 0;
	    left: 5px;
	    margin: 0 10px 0 0;
	}

	.accbox .accshow ul li:first-child a {
	    border-top: none;
	}

	.accbox .accshow ul li:last-child {
		border-bottom: none;
	}

	/*アイコンを入れ替える*/
	.cssacc:checked + label:after,
	.cssacc2:checked + label:after {
	    font-family: 'Font Awesome 5 Free';
	    font-weight: 900;
	    content: '\f106';
	    float: right;
	}

	nav .info {
		width: 100%;
		margin: 30px 0;
		padding: 15px;
		box-sizing: border-box;
		background-color: #308aaf;
	}

	nav .info ul li {
		color: #ffffff;
		line-height: 1.5;
		margin: 0 0 5px;
		box-sizing: border-box;
	}

	nav .info ul li:last-child {
		margin: 0;
	}
}


@media screen and (max-width: 375px) {

	.hamburger {
		top: 4px;
	}

}
