@media only screen and (max-width: 768px) {
	
	.underW768{
		display: inline;
	}

	header.top{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-content: space-between;
		align-items: center;
		
		padding: 8px ;
		padding-left: 12px;
		height: auto;
	}

	header.top h1#shvLogo{
		/* padding-left: 32px; */
		height: 28px;
		
		/* background:  url('/assets/shv/svg/shvLogo.svg') 0 0 no-repeat; */
		
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;	
	}

	header.top h1#shvLogo span{
		
		color: #baa359;
		font-family: 'Poiret One', cursive;
		font-size: 16px;
		font-weight: normal;
		line-height: 12px;
		display: flex;
		flex-flow: column;
		justify-content: center;	
	}


	#container div.headline h1 .jp {
		bottom: -40px;
		font-size: 16px;
		line-height: 20px;
	}

	main{
		display: flex;
		flex-flow: column;
		justify-content: center;	
		
		padding: 20px 8px;
	}

	#primary{
		
		flex: 0 1 auto;
		margin-right: 0;
		width: 100%;
	}

	#secondary{
		
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
			
		position: -webkit-sticky;
		position: sticky;
		z-index: 3;
		z-index: 1;
		top: unset;
		bottom: -8px;
		left: 0;
		width: 100%;
		height: 120px;
		overflow: hidden;
		overflow: auto;
		/* overflow: auto; */
		/* -webkit-overflow-scrolling: touch; */
	}

	#secondary .wrapper.containerItem{
		display: flex;
		flex-flow: row nowrap;/*並びの方向　折り返しのありなし*/
		justify-content: center;
		justify-content: start;

		position: absolute;
		z-index: 1;
		top: unset;
		bottom: 0px;
		left: 0;
		padding: 4px;
		width: auto;
		height: auto;
	}

	aside{
		padding-right: 4px;
	}

	aside>.banner{
		box-shadow: 0 0x 4px 1px rgba(26,26,26,0.2);
	}

	aside:last-child{
		padding-right: 0;
	}

	.wrapper.banner{
		display: flex;
		flex-flow: column;
		justify-content: start;
		
		position: static;
		margin-bottom: 0;
		margin-right: 1%;
		margin-right: 0;
		padding: 4px;
		
		flex: 1 0 200px;
		width: 200px;
		height: auto;
		font-size: 14px;
		line-height: 18px;
		word-break: break-all;
		box-sizing: border-box;
	}

	.wrapper.banner:last-child{
		margin-bottom: 0;
	}

	aside h2{
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	aside p{
		display: none;
	}

	#hmbMn{
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		padding: 0px 4px 0px 4px;
		width: 20px;
		height: 20px;
		box-sizing: content-box;
	}

	#hmbMn:hover{
		cursor: pointer;
	}

	#hmbMn div{
		height: 2px;
		background: #afafaf;
	}


	header.top nav{
		position: absolute;
		z-index: 2;
		top: 45px;
		right: 0;
		width: 100%;
		height: 0;
		overflow: hidden;
		transition: all 1s cubic-bezier(0.42, 0, 0.52, 1) ;
	}

	header.top.on nav{
		position: absolute;
		z-index: 3;
		right: 0;
		height: 240px;
	}

	header.top nav ul{
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		
		padding: 0 16px;
		width: 100%;
		background: #fff;
		
		transition: all 1s cubic-bezier(0.42, 0, 0.52, 1) ;
		transform: translate(0, -240px);
		border: #dadada solid;
		border-width: 0 0 1px 0;
		box-shadow: 0 0px 4px rgba(26,26,26,0.2);
	}

	header.top.on nav ul{
		transform: translate(0, 0);
	}


	header.top nav ul li:last-child,
	header.top nav ul li:first-child,
	header.top nav ul li{
		padding: 8px;
		height: 46px;
		border: #e7e7e7 solid;
		border-width: 0 0 1px 0;
	}
	header.top nav ul li:last-child{
		border: none;
	}

}