@charset "Shift_JIS";
body,div,h1,h2,h3,h4,h5,h6,pre,p,select,header,nav,main,section,footer,ul,li{
    
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body{
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container{

	padding: 10px;
	border: #fff 1px solid;
}
.container > div{
	height: 230px;
}
.container > div p{
	padding-top: 35vh;
	text-align: center;
}

/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* ドロップダウンメニューの設定 */
nav{
	background: #242;
	color: #fff;						/* メニュー部の背景色 */
	text-align: center;
	-webkit-appearance: none;
}

nav ul{
	max-width: 100%;					/* メニュー部の最大幅 */
	margin: 0 auto;
	list-style: none;
	display: flex;
	justify-content: center;
	-webkit-appearance: none;
    
}

nav ul li{
	width: calc(100% /5);				/* 親メニューの項目幅（親メニューの個数） */
	position: relative;
	background: #171;					/* 親メニューの背景色 */
	border-left: 1px #fff solid;		/* 親メニューの区切り線（左） */
	-webkit-appearance: none;
}
nav ul li:last-child{
	border-right: 1px #fff solid;		/* 親メニューの区切り線（最後の右） */
	-webkit-appearance: none;
}
nav ul li a{
	display: block;
	text-decoration: none;
	color:  #fff;						/* 親メニューの文字色 */
	padding: 15px 0;					/* 親メニューの上下余白 */
	transition:all .3s;
	-webkit-appearance: none;
}
@media screen and (max-width: 760px) {
	nav ul li a{
		font-size: 0.6rem;
		line-height: 2.5;
	-webkit-appearance: none;
	}
}
nav ul li a:hover{
	color: #ccc; 						/* 親メニューの文字色（オンマウス時） */
	-webkit-appearance: none;
}



@media screen and (max-width: 760px) {
	nav ul li.child::before{
		border: none;
	-webkit-appearance: none;
	}
}
nav ul li ul{
	display: none;
	width: 100%;
	position: absolute;
	left: 0;					/* 子メュウーの横位置（親メニューの左部から） */
	top: 56px;					/* 子メニューの縦位置（親メニューの上部から） */
	z-index: 4;
	transition: all .3s;
	-webkit-appearance: none;
}
nav ul li.child:hover > ul,
nav ul li.child ul li:hover > ul,
nav ul li.child:active > ul,
nav ul li.child ul li:active > ul{
	display: block;
}
nav ul li ul li{
	width: 100%;
	background: #484;					/* 子メニューの背景色 */
	border-left: none;
	border-right: none;
	border-bottom: #fff 1px solid;
	-webkit-appearance: none;
		/* 子メニュー・孫メニューの区切り線（下） */
}
nav ul li ul li:last-child{
	border-right: none;
	-webkit-appearance: none;
}
nav ul li ul li a{
	padding: 10px 0;					/* 子メニューの上下余白 */
	color: #fff;
	-webkit-appearance: none;						/* 子メニューの文字色 */
}
nav ul li.child ul li.child::before{
	/* 子メニュー（孫メニューあり）の右矢印 */
	content: '';
	position: absolute;
	left: 15px;
	top: 17px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right:2px solid #fff;
	transform: rotate(45deg);
	-webkit-appearance: none;
}
nav ul li ul li a:hover,
nav ul li ul li a:active{
	background: #696;
	-webkit-appearance: none;
					/* 子メニューの背景色（オンマウス時） */
}
nav ul li ul li ul{
	left: 100%;							/* 孫メニューの横位置（子メニューの左部から） */
	top: 0;								/* 孫メニューの縦位置（子メニューの上部から） */
	-webkit-appearance: none;
}
nav ul li ul li ul li{
	background: #797;
					/* 孫メニューの背景色 *	/
	-webkit-appearance: none;
}
nav ul li ul li ul li a:hover,
nav ul li ul li ul li a:active{
	background: #444;					/* 孫メニューの背景色（オンマウス時） */
}