@charset "UTF-8";

/*for SP*/
@media only screen and (max-width:736px){
	body.sp_on {
		position: relative;
		height: 100vh;
		overflow: hidden;
	}
	#access_faqWrapper {
		position: relative;
	}
	#access_faqWrapper > nav {
		position: sticky;
		top: 0;
		background-color: #fff;
		z-index: 10;
	}
	.navi_set {
		position: sticky;
		top: 3.6vw;
		z-index: 10;
		width: 100%;
	}
	
	body.sp_on .navi_set {
		background: #fff;
	}
	
	#spNavi {
		position: absolute;
		/*top: 8.0vw;*/
		top: 3.0vw;
		right: 5.6666vw;
		cursor: pointer;
		transition: top 0.5s ease;
	}
	body.sp_on #spNavi {
		z-index: 100;
	}

	
	.nav_toggle {
		display: block;
		position: relative;
		width: 45px;
		height: 45px;
		background-color: rgb(68, 68, 68);
		box-shadow: 0px 6px 40px 0px rgba(68, 68, 68, 0.3);
		border-radius: 50%;
		z-index: 2;
	}
	
	.nav_toggle i:nth-child(1),
	.nav_toggle i:nth-child(2),
	.nav_toggle i:nth-child(3){
		display: block;
		width: 40%;
		height: 2px;
		background-color: #fff;
		position: absolute;
		transition: transform .5s, opacity .5s;
		left: 30%;
	}
	
	.nav_toggle i:nth-child(1) {
		top: 10px;
	}
	
	.nav_toggle i:nth-child(2) {
		top: 14px;
	}
	
	.nav_toggle i:nth-child(3) {
		top: 18px;
	}
	
	.nav_toggle i:nth-child(4) {
		position: absolute;
		display: block;
		width: 100%;
		text-align: center;
		font-size: 10px;
		top: 26px;
		color: #fff;
	}
	
	body.sp_on .nav_toggle i:nth-child(1) {
		transform: translateY(10px) rotate(-45deg);
	}
	
	body.sp_on .nav_toggle i:nth-child(2) {
		opacity: 0;
	}
	
	body.sp_on .nav_toggle i:nth-child(3) {
		transform: translateY(2px) rotate(45deg);
	}
	
	body.sp_on .nav_toggle i:nth-child(4) {
		display: none;
	}

	body.sp_on .navi_set {

		position: fixed;
		top: 0px;
		/*z-index: 11;*/
		/*z-index: 100;*/
		z-index: 10000;
	
	}
 
	
	.nav {
		z-index: 1;
		position: absolute;
		width: 100%;
		/*
		transform: matrix3d(1,0,0.00,0,0.00,0.17,0.98,0,0,-0.98,0.17,0,0,0,0,1);
		-webkit-transform: matrix3d(1,0,0.00,0,0.00,0,1.00,0,0,-1,0,0,0,0,0,1);
		transition: transform .5s ease;
		transform-origin: left top 0px;
		transition: all 0.2s ease 0s;
		-moz-transform-origin: left top 0px;
		-moz-transition: all 0.2s ease 0s;
		-webkit-transform-origin: left top 0px;
		-webkit-transition: all 0.2s ease 0s;
		-o-transform-origin: left top 0px;
		-o-transition: all 0.2s ease 0s;
		-ms-transform-origin: left top 0px;
		-ms-transition: all 0.2s ease 0s;
		*/
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.5s ease, visibility 0.1s ease;


		padding-bottom: 20em;
	}
	body.sp_on .nav {

		/*
		transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,0,1);
		-webkit-transform: matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,0,0,0,1);
		*/
		opacity: 1;
		visibility: visible;
		position: relative;
		overflow-y: auto;
		height: 100vh;
	}
	
	.nav.zero {
		top: 0;
	}
	
	.nav > div {
		background: #e3e6e8;
		/*padding: 5.333335%;*/
		padding: 3% 5.333335% 5.333335%;
		
	}
	body.sp_on .nav > div {
		padding-bottom: 2em;
	}
	
	.nav h3 {
		font-size: 15px;
		/*margin: 20px 0 25px;*/
		margin: 15px 0 20px;
		font-family: 'HondaGlobalFontJP-Bold', sans-serif;
	}
	
	.nav h3:nth-of-type(2) {
		margin: 35px 0 13px;
	}
	
	.nav ul {
		border-top: 1px solid #959595;
	}
	
	.nav ul li {
		border-bottom: 1px solid #959595;
	}
	
	.nav ul li a {
		display: block;
		/*font-size: 12px;
		padding: 12px 0 8px 10px;*/
		font-size: 14px;
		padding: 15px 0 12px 10px;
		text-decoration: none;
		color: #000;
		/*line-height: 1.3;*/
		line-height: 1.4;
		position: relative;
	}
	
	.nav ul li a::before,
	.nav ul li a::after {
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		content: "";
		vertical-align: middle;
	}
	
	.nav ul li a::after {
		right: 10px;
		width: 6px;
		height: 6px;
		border-top: 2px solid #444;
		border-right: 2px solid #444;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	.nav.show {
		opacity: 1;
		visibility: visible;
	}

	.nav p.sample {
		position: relative;
		display: flex;
		padding: 1em;
		background-color: #fff;
		justify-content: space-between;
		
	}
	.nav p.sample span {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: 4em;
		width: 45%;
		
	}
	.nav p.sample span:first-of-type {
		background-color: yellow;
		
	}
	.nav p.sample span:last-of-type {
		background-color: blue;
		
	}
}


/*for PC*/
	@media print,screen and (min-width:737px){ 
		.nav_toggle,.nav {
			display: none;
		}
	}