@charset "UTF-8";

#news {
	color:white;
}
#news dl {
	width:80%;
	margin:20px auto;
	padding:20px 20px 150px;
}
#news dd {
	text-align:left;
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size: 95%;
	font-weight:600;
	line-height: 1.7em;
	margin-top:20px;
}

.belt {
	width:100%;
	height:80px;
	vertical-align: middle;
	font-size:1em;
	color:white;
	background: #525252;
}


/*メディアクエリ*/
/*******************************************************************************desk top PC　無限大*/
@media screen and (min-width: 1081px) {
#main_img {
	width: 851px;
	height: 283px;
	margin-top:100px;
}
#main_img_area {
	width:100%;
	height:490px;
	background-color:rgba(82,82,82,1.00)
}
#main_img_area p {
	position:absolute;
	margin:200px auto auto 460px ;
	font-size:4em;
	color:lightgray;
	text-shadow: 0px 0px 15px rgba(11,11,11,0.6);
}

/*スライディングレイヤー関係　ここ以降****************************************/
#accordion {/*ハンバーガーアイコン*/
	text-align:center;
	margin-top:0;
  	padding:0;
  	background: white;
}	
#nav-drawer2 {
 position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown2 {
  display:none;
}

/*アイコンのスペース*/
#nav-open2 {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
  text-align:right;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open2 span, #nav-open2 span:before, #nav-open2 span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
//#nav-open2 span{background-color:#aaa;}
//#nav-open2 span:befor{background-color:#eee;}
//#nav-open2 span:after {background-color:#333;}

#nav-open2 span:before {
  bottom: -8px;
}
#nav-open2 span:after {
  bottom: -16px;
}
/*カバー*/
#nav-close2 {
  display: inherit;/*はじめ*/
  position: absolute;
  z-index: 9;
  top: -36px;
  left: 0;
  width: 100%;
  height: 500px;
  background: black;
  opacity: 0;
  transition: 2s ease-in-out;
}
/*スライドするシート（旧「中身」）*/
#nav-content2 {
  overflow: auto;
  position: absolute;
  top: 37px;/*シート上位置　※ここ注意※*/
  left: 0;
  z-index: 99;/*最前面に*/
  width: 100%;/*右側に隙間を作る*/
  max-width: 100%;/*最大幅（調整してください）*/
  //height: 500px;/*シート天地　※これは設定せずとも中身の量に合わせて拡張することを期待※*/
  background: #555;
  transition: 1.0s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateY(0px);/*スライド移動の方向と距離　※ここ注意※*/
  transform: translateY(0px);/**/
}
#nav-content2 h2 {
	color:#ddd;
}
/*チェックが入ったらもろもろ表示*/
#nav-input2:checked ~ #nav-close2 {
  display: block;/*上にスライドする半透明黒カバーを表示*/
  top:-672px;
  height:714px;
  opacity: .5;/*カバーの透過度*/
  transition:3s ease-in-out;
}
/*チェックが入ったら実績が現れる*/
#nav-input2:checked ~ #news {
	color:#333;
	background-color:#eee;
	text-shadow:1px 1px 1px #aaa;
	transition: 3s ease-in-out;
}
	
#nav-input2:checked ~ #nav-content2 {
  -webkit-transform: translateY(319px);
  transform: translateY(319px);/*中身を表示（下へスライドするレイヤー）*/
  box-shadow: 0 -5px 5px 5px rgba(0,0,0,.2);
}
/*スライディングレイヤー関係　ここまで****************************************/

/*A Day in the Lifeのdl*/
#nav-content2 dl {
	margin:20px auto;
	width: 80%;
	text-align:left;
	color:#ccc;
	background-color:rgba(43,43,43,1.00)
}
}

/*******************************************************************************note PC*/
@media screen and (min-width : 801px ) and ( max-width : 1080px ){
#main_img {
	width: 600px;
	height: 200px;
	margin-top:100px;
}
#main_img_area {
	width:100%;
	height:400px;
	background-color:rgba(82,82,82,1.00)
}
#main_img_area p {
	position:absolute;
	margin:170px auto auto 380px ;
	font-size:3.5em;
	color:lightgray;
	text-shadow: 0px 0px 15px rgba(11,11,11,0.70);
}

/*スライディングレイヤー関係　ここ以降****************************************/
#accordion {/*ハンバーガーアイコン*/
	text-align:center;
	margin-top:0;
  	padding:0;
  	background: white;
}	
#nav-drawer2 {
 position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown2 {
  display:none;
}

/*アイコンのスペース*/
#nav-open2 {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
  text-align:right;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open2 span, #nav-open2 span:before, #nav-open2 span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
//#nav-open2 span{background-color:#aaa;}
//#nav-open2 span:befor{background-color:#eee;}
//#nav-open2 span:after {background-color:#333;}

#nav-open2 span:before {
  bottom: -8px;
}
#nav-open2 span:after {
  bottom: -16px;
}
/*カバー*/
#nav-close2 {
  display: inherit;/*はじめ*/
  position: absolute;
  z-index: 9;
  top: -36px;
  left: 0;
  width: 100%;
  height: 500px;
  background: black;
  opacity: 0;
  transition: 2s ease-in-out;
}
/*スライドするシート（旧「中身」）*/
#nav-content2 {
  overflow: auto;
  position: absolute;
  top: 37px;/*シート上位置　※ここ注意※*/
  left: 0;
  z-index: 99;/*最前面に*/
  width: 100%;/*右側に隙間を作る*/
  max-width: 100%;/*最大幅（調整してください）*/
  //height: 500px;/*シート天地　※これは設定せずとも中身の量に合わせて拡張することを期待※*/
  background: #555;
  transition: 1.0s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateY(0px);/*スライド移動の方向と距離　※ここ注意※*/
  transform: translateY(0px);/**/
}
#nav-content2 h2 {
	color:#ddd;
}
/*チェックが入ったらもろもろ表示*/
#nav-input2:checked ~ #nav-close2 {
  display: block;/*上にスライドする半透明黒カバーを表示*/
  top:-582px;
  height:624px;
  opacity: .5;/*カバーの透過度*/
  transition:3s ease-in-out;
}
/*チェックが入ったら実績が現れる*/
#nav-input2:checked ~ #news {
	color:#333;
	background-color:#eee;
	text-shadow:1px 1px 1px #aaa;
	transition: 3s ease-in-out;
}
	
#nav-input2:checked ~ #nav-content2 {
  -webkit-transform: translateY(368px);
  transform: translateY(368px);/*中身を表示（下へスライドするレイヤー）*/
  box-shadow: 0 -5px 5px 5px rgba(0,0,0,.2);
}
/*スライディングレイヤー関係　ここまで****************************************/

/*A Day in the Lifeのdl*/
#nav-content2 dl {
	margin:20px auto;
	width: 80%;
	text-align:left;
	color:#ccc;
	background-color:rgba(43,43,43,1.00)
}

}

/*******************************************************************************タブレット*/
@media screen and ( min-width : 376px ) and (max-width : 768px ){
#main_img {
	width: 510px;
	height: 170px;
	margin-top:60px;
}
#main_img_area {
	width:100%;
	height:300px;
	background-color:rgba(82,82,82,1.00)
}
#main_img_area p {
	position:absolute;
	margin:120px auto auto 330px ;
	font-size:2.5em;
	color:lightgray;
	text-shadow: 0px 0px 10px rgba(11,11,11,0.70);
}

/*スライディングレイヤー関係　ここ以降****************************************/
#accordion {/*ハンバーガーアイコン*/
	text-align:center;
	margin-top:0;
  	padding:0;
  	background: white;
}	
#nav-drawer2 {
 position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown2 {
  display:none;
}

/*アイコンのスペース*/
#nav-open2 {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
  text-align:right;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open2 span, #nav-open2 span:before, #nav-open2 span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
//#nav-open2 span{background-color:#aaa;}
//#nav-open2 span:befor{background-color:#eee;}
//#nav-open2 span:after {background-color:#333;}

#nav-open2 span:before {
  bottom: -8px;
}
#nav-open2 span:after {
  bottom: -16px;
}
/*カバー*/
#nav-close2 {
  display: inherit;/*はじめ*/
  position: absolute;
  z-index: 9;
  top: -36px;
  left: 0;
  width: 100%;
  height: 500px;
  background: black;
  opacity: 0;
  transition: 2s ease-in-out;
}
/*スライドするシート（旧「中身」）*/
#nav-content2 {
  overflow: auto;
  position: absolute;
  top: 37px;/*シート上位置　※ここ注意※*/
  left: 0;
  z-index: 99;/*最前面に*/
  width: 100%;/*右側に隙間を作る*/
  max-width: 100%;/*最大幅（調整してください）*/
  //height: 500px;/*シート天地　※これは設定せずとも中身の量に合わせて拡張することを期待※*/
  background: #555;
  transition: 1.0s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateY(0px);/*スライド移動の方向と距離　※ここ注意※*/
  transform: translateY(0px);/**/
}
#nav-content2 h2 {
	color:#ddd;
}
/*チェックが入ったらもろもろ表示*/
#nav-input2:checked ~ #nav-close2 {
  display: block;/*上にスライドする半透明黒カバーを表示*/
  top:-473px;
  height:515px;
  opacity: .5;/*カバーの透過度*/
  transition:3s ease-in-out;
}
/*チェックが入ったら実績が現れる*/
#nav-input2:checked ~ #news {
	color:#333;
	background-color:#eee;
	text-shadow:1px 1px 1px #aaa;
	transition: 3s ease-in-out;
}
	
#nav-input2:checked ~ #nav-content2 {
  -webkit-transform: translateY(393px);
  transform: translateY(393px);/*中身を表示（下へスライドしたときの位置）*/
  box-shadow: 0 -5px 5px 5px rgba(0,0,0,.2);
}
/*スライディングレイヤー関係　ここまで****************************************/

/*A Day in the Lifeのdl*/
#nav-content2 dl {
	margin:20px auto;
	width: 80%;
	text-align:left;
	color:#ccc;
	background-color:rgba(43,43,43,1.00)
}
}


/*******************************************************************************スマホサイズ*/
@media screen and (max-width : 375px ){
#main_img {
	width: 330px;
	height: 110px;
	margin-top:45px;
}
#main_img_area {
	width:100%;
	height:200px;
	paddng-top:100px;
	background-color:rgba(82,82,82,1.00)
}
#main_img_area p {
	position:absolute;
	margin:90px auto auto 160px ;
	font-size:1.8em;
	color:lightgray;
	text-shadow: 0px 0px 10px rgba(11,11,11,0.70);
}

/*スライディングレイヤー関係　ここ以降****************************************/
#accordion {/*ハンバーガーアイコン*/
	text-align:center;
	margin-top:0;
  	padding:0;
  	background: white;
}	
#nav-drawer2 {
 position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown2 {
  display:none;
}

/*アイコンのスペース*/
#nav-open2 {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
  text-align:right;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open2 span, #nav-open2 span:before, #nav-open2 span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
//#nav-open2 span{background-color:#aaa;}
//#nav-open2 span:befor{background-color:#eee;}
//#nav-open2 span:after {background-color:#333;}

#nav-open2 span:before {
  bottom: -8px;
}
#nav-open2 span:after {
  bottom: -16px;
}
/*カバー*/
#nav-close2 {
  display: inherit;/*はじめ*/
  position: absolute;
  z-index: 9;
  top: -36px;
  left: 0;
  width: 100%;
  height: 500px;
  background: black;
  opacity: 0;
  transition: 2s ease-in-out;
}
/*スライドするシート（旧「中身」）*/
#nav-content2 {
  overflow: auto;
  position: absolute;
  top: 37px;/*シート上位置　※ここ注意※*/
  left: 0;
  z-index: 99;/*最前面に*/
  width: 100%;/*右側に隙間を作る*/
  max-width: 100%;/*最大幅（調整してください）*/
  //height: 500px;/*シート天地　※これは設定せずとも中身の量に合わせて拡張することを期待※*/
  background: #555;
  transition: 1.0s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateY(0px);/*スライド移動の方向と距離　※ここ注意※*/
  transform: translateY(0px);/**/
}
#nav-content2 h2 {
	color:#ddd;
}
/*チェックが入ったらもろもろ表示*/
#nav-input2:checked ~ #nav-close2 {
  display: block;/*上にスライドする半透明黒カバーを表示*/
  top:-334px;
  height:376px;
  opacity: .5;/*カバーの透過度*/
  transition:3s ease-in-out;
}
/*チェックが入ったら実績が現れる*/
#nav-input2:checked ~ #news {
	color:#333;
	background-color:#eee;
	text-shadow:1px 1px 1px #aaa;
	transition: 3s ease-in-out;
}
	
#nav-input2:checked ~ #nav-content2 {
  -webkit-transform: translateY(493px);
  transform: translateY(493px);/*中身を表示（下へスライドしたときの位置）*/
  box-shadow: 0 -5px 5px 1px rgba(0,0,0,.3);
}
/*スライディングレイヤー関係　ここまで****************************************/

/*A Day in the Lifeのdl*/
#nav-content2 dl {
	margin:20px auto;
	width: 80%;
	text-align:left;
	color:#ccc;
	background-color:rgba(43,43,43,1.00)
}
}