@charset "UTF-8";
/* ページ全体の設定 */
/* 緑の色は color: #00aa00; 右上のタイトルの緑色微調整 */
body {
   margin: 0px;
   /* text-size-adjust: none;  * ANDROID Chrome文字サイズ自動拡大無効化 */
   /* -webkit-text-size-adjust: none;   * iOS Safari文字サイズ自動拡大無効化 */
   /* background-image:url("backimage1.png");  あとで検討 */
}

.contents {
   background-color: #29abe2;
   padding: 25px 15px;
}

h1 {
  font-size:30px;
}

p {
  font-size:16px;
  line-height:1.4;    /* line-heightには単位を付けない　*/
}

figure{   /* headerのlistulだけで使用中 */
   margin:0;
}


/*===========================================*/
/* header            　　　　　　　　　　　　*/
/* 上部タイトル部分　　　　　　　　　　　　　*/
/* headerの中にリンクとタイトル写真          */
/*===========================================*/
header {
   top:0px;  /* scroll固定するときはこれも一緒に指定 */
   /* position: fixed;  * scroll omitted */
   width:90%;           /* 100%にするとoverflowになる*/
   padding: 2px 15px 0px 15px; /* ↑→↓← */
   background-color: #eeeeee;
   color: #00aa00; /* 右上のタイトルの緑色微調整 */
   font-weight:bold;
   text-align:center;
   margin-left:auto;
   margin-right:auto;
}

   /*---  listul 一番上のタイトル左右配分 --- */
header .listul {
  list-style-type:none;
  padding:0;
  display:flex;
  justify-content:space-around;
       /* space-around; spaceを均等割但し左右端は半分 */
       /* space-between; spaceを均等割り、左右端は無し */
  margin-top:0px ;    /* 勝手に広げられるので明示的宣言 */
  margin-bottom:0px;
}
      /* 一番上の会社アイコンやトップタイトル、連絡先番号 */
header .topleft {
   width:90%;
   max-width:140px;
   margin-left:20px;
}
header .topcenter {    /* 中板橋旬菜おばんざい */
   width:90%;
   max-width:600px;
}
header .topright {    /* mail add , 電話番号 */
   font-size:80%;
   width:90%;
   max-width:290px;
   margin-right:20px;
}


   /*---  listul1 各ページへのリンク --- */
   /* リンクメニューの左右配分  等倍に配置 */
header .listul1 {
  width:80%;
  margin-left:auto;  /* 中央寄せ */
  margin-right:auto;  /* 中央寄せ */
  margin-top:0px ;    /* 勝手に広げられるので明示的宣言 */
  margin-bottom:10px;
  list-style-type:none;
  justify-content:space-around;
  padding:0;
  color:#220000;
  font-size:20px;
  display:flex;
}
header .sm {  /* 改行する長いタイトル */
  font-size:14px;
  line-height:14px;
}


   /* 大きなタイトル写真 */
.titleimage {
   width:95% ;
   max-width:1100px;
}


/*===========================================*/
/* toppost           　　　　　　　　　　　　*/
/* この中に、TOPICSとCATEGORYセクションが入る*/
/*===========================================*/
.toppost div {  /* 横並びにして領域不足なら折り返す */
   display: flex;
   flex-wrap: wrap;
   margin-left: auto;  /* 効いてない */
   margin-right: auto;  /* 効いてない */
}
.toppost {
    padding:0px;
   margin-left: auto;
   margin-right: auto;
}

/* 記事の見出し */
.toppost h2 {  /* 大見出し 下線付き　*/
   background:linear-gradient(transparent 80%, #00aa00 0%);
   font-size: 20px;
   color: #00aa00;
   text-align:center;
   margin-top:20px;
}
.toppost h3 {  /* 中見出し */
   background:linear-gradient(transparent 90%, #CCCCCC 90%);
   font-size: 20px;
   margin:0 ;
}

/* -- TOPICS セクション -- */
.art0 {
   width: 80%;
   display:flex;
   align-items:start;
   margin-left: auto;
   margin-right: auto;
}
.art0 img {
   width:160px;
   padding:20px;
}

/* -- CATEGORY セクション -- */
/* (箱の一つ一つをarticleで宣言) */

.art1 {
   justify-content:space-around;
}

article {
	flex: none;
}

   /* box 4種類の宣言 */
.box2h {   /* 共通 */
  width:40%;
  max-width:440px;
  margin:8px;
  padding-top: 15px ; /* articleと二重指定になってNG ↑→↓← */
  padding-bottom: 15px ; /* ↑→↓← */
  padding-left: 15px ; /* ↑→↓← */
  padding-right: 15px ; /* ↑→↓← */
  border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */
}
.box2hyellow {
  border: 5px solid yellow;
  background-color:#f0e68c;
}
.box2hblue {
  border: 5px solid blue;
  background-color:#f0f8ff;
}
.box2hgreen {
  border: 5px solid green;
  background-color:#adff2f;
}
.box2hred {
  border: 5px solid red;
  background-color:#ffa07a;
}
   /* boxの中からリンク */
.toppost .refferh a {  /* もっと詳しく青 */
   margin-left:40px;
   border: solid 2px #00bbdd;
   padding: 4px 7px ;
   border-radius: 8px;
   background-color: rgba(81,231,255,0.7);
   font-size: 18px;
}
.toppost .refferc a {  /* もっと詳しく緑 */
   border: solid 2px #00bbdd;
   padding: 4px 7px ;
   border-radius: 8px;
   background-color: rgba(177,255,47,0.7);
   font-size: 18px;
}


   /* アクセスカウンタ */
.accessc {
   font-size:13px;
   text-align:center;
   margin-top: 20px;
   margin-left: auto;
   margin-right: auto;
}


/*===========================================*/
/* footer            　　　　　　　　　　　　*/
/*===========================================*/

footer {
   background-color: #6ac4eb;
   padding: 15px 15px;
}
footer .big {
   width:90%;
   margin-left:auto;
   margin-right:auto;
   margin-top:0px;
   margin-bottom:0px;
   font-size: 18px;
}
footer .small {
   font-size: 10px;
   width:80%;
   margin-left:auto;
   margin-right:auto;
   margin-top:10px;
   margin-bottom:0px;
   text-align:center;
}
   /* 項目を横並びにする */
footer nav {   
   display: flex;
   padding: 0px;
   color: #ffffff;
   font-size: 12px;
}
footer .container {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 60px; /* 電話とメアド分確保 */
  width: 90% ;
  max-width: 903px;
}
footer ul { 
   list-style-type: none; /* 箇条書き・を消す */
   justify-content: space-around; /* UL全体Boxを中央へ */

   width:80%;
   text-align:center;
   margin-left:auto;
   margin-right:auto;
}
footer li { 
   display: inline;    /* 横並び liに対して指定 */
}




   /* MOBILE用 
.MenuMOBILE {
   display:flex;
   float-direction:column;
   float:left;
} */
   /* PC用
.MenuPC {
   width:100%;
   margin-left: auto;
   margin-right: auto;
} */



/************************************
 ************************************
 ************************************
 MOBILE スマホ明記の必要あり　追加部分   
*/
@media (max-width:680px) {

body {
  font-size:10px;
}


/* 動作変なため停める コメントのネストに注意！
.MenuMOBILE .globasMenuSp li {
   font-size: 8px;   * ハンバーガの文字の大きさ *
   text-align: left;  * levelを示すため頭位置を揃える *
   margin-left: 170px;
   margin-top: 0px;
   margin-bottom: 0px;
}
*/

header .topright {
   display:none;
}

      /* 一番↓の会社アイコンやトップタイトル、連絡先番号 small */
header .topleft {
   width:80%;
   max-width:180px;
   margin-left:0px;
}
header .topcenter {
   width:80%;
   max-width:500px;
}
header .topright {  /* 上のdisplay:none で消しているので無意味な指定 */
   font-size:80%;
   width:99%;
   max-width:630px;
   margin-right:0px;
}
footer .big {
   font-size: 15px;
}

   /*---  listul1 各ページへのリンク small --- */
   /* 携帯だけ一番下に電話番号を */
header .bottomtel a {
  color:#006600;
}
/* header .bottomtel a:visited { */
/*   color:#44ff44;              */
/* }                             */
header .bottomtel {
  width:100%;
  position:fixed;   /* 画面再下部固定 */
  bottom:0;
  text-align:center;
  font-size:18px;
  color:#008600;
  background-color: #6ac4eb;  /* 色は元々のフッタに揃える */
}

   /* リンクメニューの左右配分  等倍に配置 small */
header .listul1 {
  width: 98%;
  margin-left:auto;  /* 中央寄せ */
  margin-right:auto;  /* 中央寄せ */
  margin-top:0px ;    /* 勝手に広げられるので明示的宣言 */
  margin-bottom:10px;
  list-style-type:none;
  justify-content:space-around;
  padding:0;
  color:#220000;
  font-size:10px;
  display:flex;
}
header .sm {  /* 改行する長いタイトル small */
  font-size:8px;
  line-height:8px;
}

/* -- CATEGORY セクション small -- */
   /* box 4種類の宣言 */
.box2h {   /* 共通 */
  width:85%;
  max-width:600px;
  margin:5px;
  padding-top: 10px ; /* articleと二重指定になってNG ↑→↓← */
  padding-bottom: 10px ; /* ↑→↓← */
  padding-left: 10px ; /* ↑→↓← */
  padding-right: 10px ; /* ↑→↓← */
  border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */
}

.toppost .refferh a {  /* もっと詳しく青 小さくする*/
   border: solid 2px #00bbdd;
   padding: 2px 3px ;
   border-radius: 4px;
   font-size: 10px;
}
.toppost .refferc a {  /* もっと詳しく緑 小さくする*/
   border: solid 2px #00bbdd;
   padding: 2px 3px ;
   border-radius: 4px;
   font-size: 10px;
}

}


/************************************
 ************************************
 ************************************
 PC版　追加部分   680pxより広いとき
*/
@media (min-width:680px) {


  /* 最下部のメアド、電話はPCでは表示しない */
.bottomtel {
  display:none;
}

}    /* @media 680px */


/************************************
 ************************************
 ************************************
 PC版(大)　追加部分  1025pxより広いとき 
*/
@media (min-width:1025px) {


}    /* @media 1025px */