@charset"utf-8";

/*=======================================
全般的なスタイル
=======================================*/
* {
          margin:0; padding:0;           /*全要素のマージン・パディングをリセット*/
}
body{
     background-color:#ecffb3;                     /*ページ全体の背景色*/
     background-image:url("images/bg_body.jpg");   /*ウェブページ全体の背景画像*/
     font-size:150%;                          /*フォントサイズを150%にする*/ 
     font-family: 'Georgia','Trebuchet MS','MS PGothic',sans-serif;   /* フォントの種類 */
     line-height:1.5;                         /*行の高さを1.5倍にする*/
     color:#333333;                           /*文字色を濃い目のグレーにする*/ 
}
div#pagebody{
            width:1000px; 
            margin:0 auto;    /*内容全体をセンタリング*/
            background-image:url("images/page-body_hp.jpg");
            background-repeat:repeat;
}
img {border:0;}        /*画像のボーダーを0にする*/

p {
     width:970px;      /*幅の指定*/
     margin:15px;      /*マージン*/
     text-indent:1em;  /*インデント幅*/
}

/*==================================
ヘッダ
==================================*/

h1 {
          width:950px; height:237px;
          padding:100px 0 0 50px;     /*見出しの位置調整*/
          background-image:url(images/head.png);    /*背景画*/
          background-repeat:no-repeat; 
          font-size:100px; 　                     /*フォントのサイズ*/
}

h1 a {text-decoration:none;      /*リンクの下線を無くす*/}

.loading {
  perspective: 1000px;
  color:#00cc66;
          font-family: 'Arial',sans-serif;
}
.loading span {
  display: inline-block;
  margin: 0 .05em;
  transform-origin: 50% 50% -25px;
  transform-style: preserve-3d;
  animation: loading 6s infinite;
}
.loading span:nth-child(2) {
  animation-delay: .1s;
}
.loading span:nth-child(3) {
  animation-delay: .2s;
}
.loading span:nth-child(4) {
  animation-delay: .3s;
}
.loading span:nth-child(5) {
  animation-delay: .4s;
  color:#cc3399;
}
.loading span:nth-child(6) {
  animation-delay: .5s;
}

@keyframes loading {
  0% {
    transform: rotateX(-360deg);
  }
  70% {
    transform: rotateX(0);
  }
}

/*==================================
メインメニュー
==================================*/
ul#menu{
        width:1000px;height:60px;     /*メインメニュー部分の幅と高さ*/
        margin-left: 3px;               /*マージン*/
}
#menu li{
        font-size:110%;			/*フォントサイズ*/
        list-style-type:none;     /*リストマーカー無しにする*/
        display:inline;           /*リスト項目をインライン表示にする*/
        float:left;               /*リスト項目を横に並べる*/
        padding-right: 3px;
}
#menu li a{
          background-color:#ffff66;    /*背景色*/
          color:#663300;            /*文字色*/  
          display:block;            /*リンク部分をブロック表示にする*/
          width:246px;height:60px;  /*幅と高さ*/
          padding-top: 15px  ;            /*パディング*/
          text-align:center;        /*テキストをセンター揃えにする*/
          text-decoration:none;     /*リンク部分を下線無しにする*/
          background-image:url(images/bg_menu1.png);   /*背景画像を指定*/　
          background-repeat:repeat;                 /*背景画像を繰り返す*/
}
#menu li a:hover{
          background-color:#ff9933;     /*背景色*/
          background-image:url(images/bg_menu2.png);   /*リンクにマウスが乗ったら背景画像を変更する*/
}

/*===========================================
サブメニュー
===========================================*/
h2 {
      width:300px; height:40px;         /*幅と高さ*/
      margin:30px 0px 10px 10px;
      font-size:30px;                   /*フォントサイズ*/
     padding:18px 0;
     text-align:center;
     background-image:url(images/bg_h2_d.gif);   /*背景画像*/
      background-repeat:no-repeat;            /*背景画像を繰り返さない*/
      background-color:#ffffcc;         /*背景色*/
      color:#806000;                    /*文字色*/
}
.tkc {
        width:360px; height:252px;     /*画像の表示サイズを指定*/
        margin-left:10px;              /*左マージン*/
        float:right;                   /*画像を右寄せにする*/
}

/*====================================
インフォメーション
====================================*/
h3 {
       font-size:30px;     /*文字サイズ*/
       width:300px;   height:50px;
       padding-top:10px;          /*パディング*/
      margin:30px 0px 10px 10px;
       text-align:center;
       background-color:#cccc00;  /*背景色*/
       color:#ffffff;             /*文字色*/
       border-radius:3px;         /*角丸にする*/
}

.fday {
        width:500px; height:354px;     /*画像の表示サイズを指定*/
        margin:0 20px 5px 0;              /*マージン*/
        float:left;                   /*画像を左寄せにする*/
}

.tb {
        width:300x; height:262px;     /*画像の表示サイズを指定*/
        margin:0 0 5px 10px;              /*マージン*/
        float:right;                   /*画像を右寄せにする*/
}

.dd {
        width:300x; height:400px;     /*画像の表示サイズを指定*/
        margin:0 150px 5px 80px;              /*マージン*/
        float:right;                   /*画像を右寄せにする*/
}

/* 横並び */

.flex {
  display: flex; /*横並び*/
}
.flex .video {
  width: 500px; /*画像サイズ指定*/
  margin: 10px 10px 0 30px;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.flex .text {
  margin: 0 20px 0 10px ;
  padding: 0;
}



/*===========================
フッタ
===========================*/
div#footer {
         clear:both;         /*回り込みを解除する*/
         height:40px;        /*高さの指定*/
         padding:10px 0 0 0; /*パディング*/
         text-align:center;  /*センタリング*/
}