/************* grid layout css ver 1.01 ******************/

/* 見た目調整 */
body {
  /* フォントの種類を指定 */
  font-family: -apple-system, BlinkMacSystemFont, 游ゴシック, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;

  /* 字間(プロポーショナルメトリクス)を指定 */
  font-feature-settings: "palt";
}

/* ====================
  グリッドコンテナ
==================== */
.container {
  	display: grid;

  /* 1列目から順番に200px、600px、200pxの幅 */
 	 grid-template-columns: 200px 600px 200px;

  /* 1行目から順番に行の高さを100px 300px 250pxにする */
 	 grid-template-rows: 44px 300px 30px 250px;


}

/* ====================
  グリッドアイテム
==================== */
.header {
  /* 列の1本目から4本目のグリッドラインまで */
  	grid-column: 1 / 4;
  /* 行の1本目から2本目のグリッドラインまで */
 	grid-row: 1;
	z-index: 10; /*ヘッダーメニューのプルダウンメニューがメインコンテンツのopacityに影響されないように階層を上にした */
	position: relative;

}

.main {
  /* 列の2本目から3本目のグリッドラインまで */
	 grid-column: 2 / 3;
  /* 行の2本目から3本目のグリッドラインまで */
	 grid-row: 2;
 	 padding: 0;
	 background-color: #fff;

}

.aside {
  /* 列の2本目から3本目のグリッドラインまで */
 	 grid-column: 1 / 2;
  /* 行の2本目から3本目のグリッドラインまで */
 	 grid-row: 2;
 	 background-color: #ffc47f;

}

.nav {
  /* 列の3本目から4本目のグリッドラインまで */
	  grid-column: 3 / 4;
  /* 行の2本目から3本目のグリッドラインまで */
 	 grid-row: 2;
 	 background-color: #ffc47f;

}

.message{
  /* 列の1本目から4本目のグリッドラインまで */
 	grid-column: 1 / 4;
  /* 行の3本目から4本目のグリッドラインまで */
  	grid-row: 3;
  	background-color: #fffffe;

}

.histry {
  /* 列の1本目から4本目のグリッドラインまで */
 	 grid-column: 1 / 4;
  /* 行の3本目から4本目のグリッドラインまで */
 	 grid-row: 4;
 	 background-color: #fffffe;
}

.footer {
  /* 列の1本目から4本目のグリッドラインまで */
 	 grid-column: 1 / 4;
  /* 行の4本目から5本目のグリッドラインまで */
 	 grid-row: 5;
 	 background-color: #fffffe;

}

/**********ヘッダー　 ナビゲーション ***********************/

#dropmenu{
  position:relative; top:0px; left:0px;
  list-style-type: none;
  width: 1000px;
  height: 42px;
  margin: 0px  0px;
  padding: 0;
  background: #8a9b0f;
  border-bottom: 2px solid #535d09;
  border-radius: 3px 3px 0 0;
}
#dropmenu li{
  position: relative;
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
}
#dropmenu li ul{
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  border-radius: 0 0 3px 3px;
}
#dropmenu li:last-child ul{
  left: -100%;
  width: 100%
}
#dropmenu li ul li{
  overflow: hidden;
  width: 200%;
  height: 0;
  color: #fff;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: .3s;
}
#dropmenu li ul li a{
  padding: 13px 15px;
  background: #6e7c0c;
  text-align: left;
  font-size: 1　px;1
  font-weight: normal;
}
#dropmenu li:hover > a{
  background: #6e7c0c;
  color: #eff7b1;
}
#dropmenu > li:hover > a{
  border-radius: 3px 3px 0 0;
}
#dropmenu li:hover ul li{
  overflow: visible;
  height: 38px;
  border-top: 2px solid #7c8c0e;
  border-bottom: 2px solid #616d0b;
}
#dropmenu li:hover ul li:first-child{
  border-top: 0;
}
#dropmenu li:hover ul li:last-child{
  border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
  border-radius: 0 0 3px 3px;
}


/************************ メイン・コンテンツ ***************/

#main_contents{

    padding: 0 0;
    
	}

/************** メイン・コンテンツ内の画像表示 ***************/
.img_info{
　　
	z-index: 0;
	position: relative;
    padding: 0 0;
	width:600px;                              /* 横幅のサイズを指定    */
	height:300px;                             /* 縦幅のサイズを指定    */
	border-radius: 0.1em;      /* 角丸 */
	transition-duration:  2s;

}


#video{
    position:absolute; top:52px; left: 210px;
	width:600px;  height:300px;                   /* サイズを指定    */
    visibility: hidden;
}

/************** メイン・コンテンツ　正月版  ***************/

#main_others{
    padding: 0 0;
    visibility: hidden; 
}

.bg_img_style{

    position:absolute; top:52px;
    width:600px;                              /* 横幅のサイズを指定    */
	height:300px;     				          /* 縦幅のサイズを指定    */
	border-radius: 0.1em;      /* 角丸 */
    opacity: 0.8;
}

.daofu_img{
  	position:absolute; top:200px; left: 450px;
	width: 100px;  height: 100px;
 	background: url('index_folder/new_year/daofu.gif');
	animation-name: animation_daofu;
	animation-duration: 4s;
 	animation-iteration-count: infinite;
 	transform-origin: 50% 50%;
}
@keyframes animation_daofu {
	0% {
		transform:rotate(0deg);
	}
	50% {
		transform:rotate(180deg)
	}
	100% {
		transform:rotate(360deg)
	}
}

.plate_img{
	 position:absolute; top:100px; left: 350px;
 	 width: 312px;  height:73px ;
 	 background: url('index_folder/new_year/letterNewYear.gif');
}


/************** aside  ***************/

.gnav {
    font-size: 14px;
    height: 1rem;
    margin: 0 0;
    width: auto;
}

.gnav ul {
	  margin-left: 0px;
}

/*全てのリスト・リンク共通*/
.gnav li {
    margin: 0 -40;
    list-style: none;
    background: #441b34;
    width: 200px;
    color: #fff;
    display: block;
    height: 2rem;
    line-height: 2rem;

    text-align: center;
    text-decoration: none;

}
/*子階層以降共通*/
.gnav li li {

    height: 0rem;
    overflow: hidden;
    transition: .2s;
}
.gnav li li a {

}
.gnav li:hover > ul > li {
    border-top: 1px solid #883b67;
    height: 2rem;
    cursor: pointer;
    overflow: visible;
}
#img_folder1:hover{  color: #fff;height:33px;font-weight: 600; background: #663b67;}
#img_folder2:hover{  color: #fff;height:33px;font-weight: 600; background: #663b67;}
#img_folder3:hover{  color: #fff;height:33px;font-weight: 600; background: #663b67;}
#img_folder4:hover{  color: #fff;height:33px;font-weight: 600; background: #663b67;}

/************** nav  ***************/


#calender_area{

}

#clock_board{
  position:absolute; top:430px; left:850px;
  width:105px; height:33px;
  border: 3px solid #777;/* 枠線 */
  border-radius: 1.5em;
  background:none;
  padding-left: 5px;
  padding-top: 2px;
}
.time_style{
  width:13px;
  background:none;

  border: 1px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  color: #777;

}

#hour_up{


}
#hour_dw{

}
#colon{

  width:10px;

}
#minute_up{

}
#minute_dw{

}

.touch_available{

  	position:absolute; top:320px; left:830px;
	width: 130px;height: 25px;
	border: 0px;
	border-radius: 0.2em;      /* 角丸 */
	font-size:0.9em;
	font-weight:300;
	text-align:center;
	color:#666;
 	background: transparent;
}

/*********************メッセージ***********************/
.hm_style {

}


 /*-----右から左に流れるテキスト-------------------*/

.message_style{

}
.text-ani_sample {
    padding: 5 200px;
    width:500px;
    margin:0 3em 3em;
    border-radius:0.5em;    /*角丸*/
    background:#ffffff;        /*背景色*/
    overflow:hidden;
}

.text-ani_sample p {
    margin:0;
    font-size:1.0em;         /*文字サイズ*/
    color:#111111;              /*文字の色*/
    animation: flowing 10s linear infinite;    /*アニメーション*/
    transform:translateX(100%);                /*最初の位置*/
}

@keyframes flowing {
  100% {
    transform:translateX(-100%);    /*終了の位置*/
  }
}

/************** uodate history  ***************/

.article-title{  /* 履歴タイトルの装飾 */

	position:relative; top:10px; left:5px;
	font-size:0.9em;
	font-weight:800;
	text-align:left;
	color:#555;

}

.scroll_area {
    overflow: scroll;
	overflow-x: hidden; /* 横スクロールを隠す　*/
	overflow-y: auto;/* 【縦だけ】スクロールバー 　　　横だけのときは-xを指定する */
	width: 800px;height: 200px; border: 0px;
	position:relative; top:10px; left: 10px;
}

.article-list-date {
   /* 履歴項目の装飾 */

    background-color: #ffffff;
	font-size:0.9em;
	font-weight:400;
	text-align:left;
	color:#333;
}

/************** video  ***************/



#video_on{
    position:absolute; top:500px; left:860px;
}
#video_off{
    position:absolute; top:500px; left:860px;
    visibility: hidden;
}

/************** image  ***************/

#image_off{
	position:absolute; top:540px; left:860px;
    visibility: hidden;
}

#image_on{
	position:absolute; top:540px; left:860px;
    visibility: hidden;

/************** button  ***************/  
}
.btn_style{
   /* buttonに対して装飾 */

	padding: 0 0;
    width:100px;height: 32px;
    background-color: : #ffffff;
	border: 2px solid #777;/* 枠線 */
	border-radius: 50px;     /* 角丸 */
	font-size:15;
	font-weight:300;
	text-align: center;
	color:#777;

}
.btn_style:hover { /* mouseoverでメニュウ項目の色と大きさを変える */
	font-weight:600;
 	cursor: pointer;
}


/************** footer  ***************/

        .footer {
            padding: 12px 0;
            border-top: #ccd1d9 solid 1px;
            text-align: center;
        }

        .footer-nav {
            margin-bottom: 12px;
            width: 100%;
            text-align: center;
        }

        .footer-nav-group {
            margin: 0;
            padding: 0;
            display: -moz-inline-stack;
            display: inline-block;
            vertical-align: middle;
            *vertical-align: auto;
            zoom: 1;
            *display: inline;
        }

        .footer-nav-group>li {
            margin: 0;
            padding: 0 6px;
            font-size: 0.9em;
            display: -moz-inline-stack;
            display: inline-block;
            vertical-align: middle;
            *vertical-align: auto;
            zoom: 1;
            *display: inline;
        }

        .footer-nav-group>li a {
            color: #555;
            text-decoration: none;
        }

        .footer-nav-group>li a:hover {
            color: #555;
        }

        .footer-text {
            margin-bottom: 6px;
            color: #555;
            font-size: 0.9em;
        }

        .footer-copyright {
            color: #555;
            font-size: 0.9em;
        }

        .date_display{
          position:absolute; top:65px; left:825px;
          width:300px;height: 30px;
          font-size: 12px;
          font-weight: bold;
          color:#666;
        }