@charset "utf-8";

/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*==ナビゲーション全体の設定*/
nav ul{
	list-style: none;
	text-align: center;
}


/*下の階層のulや矢印の基点にするためliにrelativeを指定*/


/*ナビゲーションのリンク設定*/
nav ul li a{
	padding: 0 0 0px 0;
	display: block;
	text-decoration: none;
	color: #ffffff;
	transition:all .3s;
	font-size: max(0.98vw, 0.9rem);
}

nav ul li a:hover{
	color:#0f0cc7;	
}
span#view_today {
	font-size: max(1.5vw, 1.2rem);
	color: #0d8fdac9;
}
span#view_clock {   
	font-size: max(1.5vw, 1.2rem);
	color: #0d8fdac9;
}

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul{
    /*絶対配置で位置を指定*/
	position: absolute;
	right:100%;
	left: -270px;
	top: -120px;
	z-index: 4;

    /*形状を指定*/
	background: #ffffff00;
	width:250px;
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
	box-shadow: 0 0 2rem var(--brown);
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/


nav li.has-child ul li:last-child a{
	border-bottom:none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
	background:#030e1d;
}

/*==3階層目*/

/*3階層目の位置*/
nav li.has-child ul ul{
	top:0;
	left:182px;
	background:#0281ff;
}

nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active{
	background:#027ef1;
}

/*==768px以下の形状*/

@media screen and (max-width:768px){
	nav{
		background:#333;
		color: #fff;
	}
	
	nav li.has-child ul,
	nav li.has-child ul ul{
  	position: relative;
	left:0;
	top:0;
	width:100%;
	visibility:visible;/*JSで制御するため一旦表示*/
	opacity:1;/*JSで制御するため一旦表示*/
	display: none;/*JSのslidetoggleで表示させるため非表示に*/
	transition:none;/*JSで制御するためCSSのアニメーションを切る*/
}
nav ul li a{
	border-bottom:1px solid #484747;
	color: #fff;
}




/*========= レイアウトのためのCSS ===============*/

#container{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#header{
	width:17%;
	background:#f3f3f3;
}

#main-area{
	width:78%;
}

@media screen and (max-width:768px){
#header,
#main-area{
	width:100%;

}	
}


h1{
	font-size:2rem;
	text-align: center;
	text-transform: uppercase;
	padding: 20px;
}

h2{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 30px 0;
}

p{
	margin-top:20px;	
}

small{


	display: block;
	text-align: center;
	padding:20px;
}


section{
	padding:30px;
}

span #view_clock {
    font-size: 7.5rem;
    color: #eb1a1a;
  }