/**********************************************************************/
		*{/* 初期化 */
			margin:0px;padding:0px;
		}

html {
  font-size: 100%;
}
body {
  background-color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
}
ul {
  list-style: none;
}

header {
  width: 100%;
  background-color: #fff;
}
h1 {
  height: 140px;
  line-height: 140px;
  font-size: 1.625rem;
  text-align: center;
}
nav {
  background-color: #126612;
}

/*
グローバルナビゲーション
「position: relative;」で、サブメニュー（Wide）の基準位置として設定
*/
.menu {
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  position: relative;

}
.menu > li {
  width: 25%;
  height: 50px;
  line-height: 50px;
  text-align: center;


}
.menu > li:r {
  background-color: #128812;

}
/*
「display: block;」でリンク範囲を親要素と同じ範囲まで広げる
*/
.menu > li a {
  display: block;

}
/*
ドロップダウン用のメニュー
初期状態は表示しないため、「visibility: hidden;」で非表示にしておく
*/
.menu-second {
  visibility: hidden;
  
}

/*
Menu Single
「position: relative;」で、サブメニュー（Single）の基準位置として設定
*/
.menu > .single {
  position: relative;

}
/*
「position: absolute;」で、singleクラスを基準に所定の位置に配置する
*/
.single .menu-second {
  width: 200px;
  background-color: #22aa22;
  position: absolute;
  top: 50px;
  left: 0;
  text-align:left;
  padding: 1px;  
        font-size: 0.9rem;
}
.single .menu-second li a:hover {
  opacity: 0.7;
  background-color: #128812;
    color:#fff;

}
/*
ホバー時にサブメニュー（Single）を表示する
*/
.single:hover .menu-second {
  visibility: visible;
  
}

/*
Menu Wide
「position: absolute;」で、menuクラスを基準に所定の位置に配置する
*/
.wide .menu-second {
  width: 100%;
  background-color: #22aa22;/*セカンドの色*/
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  position: absolute;
  top: 50px;
  left: 0;
     /* margin-left:3px;
                     white-space:nowrap;*/

     width: 600px; /*要素の横幅を指定    */
        white-space: nowrap; /* 横幅のMAXに達しても改行しない */
        overflow: hidden; /* ハミ出した部分を隠す */
        text-overflow: ellipsis; /* 「…」と省略 */
        -webkit-text-overflow: ellipsis; /* Safari */
        -o-text-overflow: ellipsis; /* Opera */


}
.wide .menu-second li {
  width: 25%;

}
.wide .menu-second li a:hover {
  opacity: 0.7;
    background-color: #128812;
    color:#fff;
    
}
/*
ホバー時にサブメニュー（Wide）を表示する
*/
.wide:hover .menu-second {
  visibility: visible;
    color:#ffffff;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 600px) {
  body {
    font-size: 0.75rem;
  }
}
/****************************************************************/



/****************************************************************/


.balloonoya {
  position   : relative;                /* 指定した分だけ相対的に移動 */
  
}
.balloonoya:hover .balloon {
  display: inline;                /* インライン要素として表示 */
}
.balloon {
  position   : absolute;                /* 親要素を基準 */
  display: none;                        /* 要素を非表示 */
  padding: 1px;                         /* テキストの前後の余白 */
  background-color: rgba(0, 050, 0, 1);       背景色（透明度）#5555ff; /*  */
  width:180px;                          /* 吹き出し全体の幅 */
  left : 10%;                           /* 表示位置 */
  top : 0%;                           /* 表示位置 */
  margin-top : 0px;                    /* 表示位置 */
  font-size: 18px;                       /* 文字サイズ */



  

}
.balloon:after{
  border-bottom: 12px solid rgba(102, 102, 255, 0.50); /* 吹き出し口の高さ・色 */
  border-left: 10px solid transparent;    /* 吹き出し口の幅１／２ */
  border-right: 10px solid transparent;   /* 吹き出し口の幅１／２ */
  top: -12px;                             /* 吹き出し口の位置調整 */
  left : 5%;                              /* 吹き出し口の横位置 */
  content: "";                       /* コンテンツの挿入 */
  position: absolute;                /* 親要素を基準 */
}



/****************************************************************/


    .shortcut {
        width: 180px; /* 要素の横幅を指定 */
        white-space: nowrap; /* 横幅のMAXに達しても改行しない */
        overflow: hidden; /* ハミ出した部分を隠す */
        text-overflow: ellipsis; /* 「…」と省略 */
        -webkit-text-overflow: ellipsis; /* Safari */
        -o-text-overflow: ellipsis; /* Opera */
    }





.iro1 {
   font-weight: bold;
   background-color: #007700;
   padding:0px 10px;
color: #ffffff;
   }
.iro2 {
   font-weight: bold;
   background-color: #008800;
   padding:0px 10px;
color: #ffffff;
   }
 .iro3 {
   font-weight: bold;
   background-color: #009900;
   padding:0px 10px;
color: #ffffff;
   }
 .iro4 {
   font-weight: bold;
   background-color: #00aa00;
   padding:0px 10px;
color: #ffffff;
   }
  .iro5 {
   font-weight: bold;
   background-color: #00bb00;
   padding:0px 10px;
color: #ffffff;
   }

  .iro6 {
   font-weight: bold;
   background-color: #00cc00;
   padding:0px 10px;
color: #ffffff;
   }

  .iro7 {
   font-weight: bold;
   background-color: #00dd00;
   padding:0px 10px;
color: #ffffff;
   }
  .iro8 {
   font-weight: bold;
   background-color: #00ff00;
   padding:0px 10px;
color: #ffffff;
   }


.kuro {
color:#000;
}



p.siro { color: #ffffff; }