@import url('../../cssjs/burger_menu3.css');

body { margin: 0; padding: 0;word-break:break-all; font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", sans-serif;}
.container { position:relative; top:0px; width: 100%; height:auto; min-width:320px;padding-bottom:50px;
    /*親-01*/
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
    -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;
    -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start;
    -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch;
    -webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
#header{/*border: 1px solid #ff0000;*/  width: auto; height:auto; margin-top:10px;
      /*子-1*/
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    /*親-2*/
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

    h1{/*border: 1px solid #b5cbaa;*/ font-size:1.25em; text-align: center; margin:0;
    /*子-2*/
    -webkit-order: 0; -ms-flex-order: 0; order: 0;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
    }
    h2{/*border: 1px solid #b5cbaa;*/ text-align: center;font-size:0.875em; font-weight:200; margin: 5px 0 0 0;
    /*子-2*/
    -webkit-order: 1; -ms-flex-order: 1; order: 1;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
    }
#sub{border: 1px solid #b5cbaa;  width:90%; max-width:800px; margin: 15px 0 20px 0; word-break:break-all;
    padding:20px 10px 20px 10px;border-radius:6px 6px 6px 6px / 6px 6px 6px 6px ;
    /*子-1*/
    -webkit-order: 1; -ms-flex-order: 1; order: 1;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
.ads_Horizon{/*border: 1px solid #b5cbaa;*/ width:90%; min-height:90px; height:auto; text-align:center; margin: 60px 5% 30px 5%;
	-webkit-flex: 0 0 auto;	-ms-flex: 0 0 auto;	flex: 0 0 auto;
	-webkit-align-self: auto;	-ms-flex-item-align: auto; align-self: auto;
}
#ads01{ /*子-1*/ -webkit-order: 2; -ms-flex-order: 2; order: 2;}
#ads02{ /*子-1*/ -webkit-order: 4; -ms-flex-order: 4; order: 4;}

    .adstitle{/*border: 1px solid #b5cbaa;*/ position: relative; width: 150px; text-align:center; height:20px; z-index: 1; top:-20px; left:50%; margin-left:-75px; font-size:0.75em;color:#c1c1c1;
     }


#cbox{/*border: 1px solid #b5cbaa;*/ width:100%;height:auto; margin:40px 0 0 0;
    /*子-1*/
    -webkit-order: 3; -ms-flex-order: 3; order: 3;
	-webkit-flex: 0 0 auto;	-ms-flex: 0 0 auto;	flex: 0 0 auto;
	-webkit-align-self: auto;	-ms-flex-item-align: auto; align-self: auto;
	/*親-3*/
	display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
    -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
    -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch;
    -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;
}
#cbox2{/*border: 1px solid #b5cbaa;*/ width:100%;height:auto; margin:40px 0 0 0;
    /*子-1*/
    -webkit-order: 5; -ms-flex-order: 5; order: 5;
	-webkit-flex: 0 0 auto;	-ms-flex: 0 0 auto;	flex: 0 0 auto;
	-webkit-align-self: auto;	-ms-flex-item-align: auto; align-self: auto;
	/*親-3*/
	display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
    -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
    -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch;
    -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;
}
  .cboxtitle{ position:relative;border: 1px solid #b5cbaa; width: auto; text-align:center; margin:-30px -200px 0 0; padding:3px 15px 0 15px; border-radius:6px; background-color:#cde8cb;
  }
  .citem{border: 1px solid #b5cbaa; width:470px;height: auto; min-height: 400px; margin:1%;
    /*子-3*/
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;
    /*親-4*/
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
    -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;
    -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start;
    -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch;
    -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;
  }
    .citemchildetitle{border: 1px solid #e9e9e9; background-color:#e2ebf8; width:96%;height:auto; margin: 5px 0 5px 5px;border-radius: 0px 15px 15px 0px;
    /*子-4*/
    -webkit-order: 0; -ms-flex-order: 0; order: 0;    
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;
    /*親-5*/
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    }
    .citemchildeA{/*border: 1px solid #e9e9e9;*/ width:96%;height:auto; min-height:230px; margin: 5px 2% 0 2%;
    /*子-4*/
    -webkit-order: 1; -ms-flex-order: 1; order: 1;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;
    }
    .citemchildeB{/*border: 1px solid #b5cbaa;*/ width:96%;height:auto; margin:2%;
    /*子-4*/
    -webkit-order: 2; -ms-flex-order: 2; order: 2;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;
    /*親-6*/
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    }
     .cimage{ background-repeat:no-repeat;background-size:contain; width:170px;height:170px;float:left; margin:5px;}
     .cimagesub{border: 1px solid #e9e9e9;background-repeat:no-repeat;background-size:contain; width:100px;height:100px; }
     #cimg0100{ background-image:url('../../images/02/02_04_01.jpg');}
       #cimg0101{ background-image:url('../../images/02/02_04_02.jpg');}
       #cimg0102{ background-image:url('../../images/02/02_04_03.jpg');}
       #cimg0103{ background-image:url('../../images/02/02_04_04.jpg');}
       #cimg0104{ background-image:url('../../images/02/02_04_05.jpg');}
     #cimg0200{ background-image:url('../../images/02/02_04_07.jpg');}
       #cimg0201{ background-image:url('../../images/02/02_04_08.jpg');}
       #cimg0202{ background-image:;}
       #cimg0203{ background-image:;}
       #cimg0204{ background-image:;}
     #cimg0300{ background-image:url('../../images/02/02_04_09.jpg');}
       #cimg0301{ background-image:url('../../images/02/02_04_10.jpg');}
       #cimg0302{ background-image:;}
       #cimg0303{ background-image:;}
       #cimg0304{ background-image:;}
     #cimg0400{ background-image:url('../../images/02/02_04_11.jpg');}
       #cimg0401{ background-image:url('../../images/02/02_04_12.jpg');}
       #cimg0402{ background-image:;}
       #cimg0403{ background-image:;}
       #cimg0404{ background-image:;}
     #cimg0500{ background-image: url('../../images/02/02_04_13.jpg');}
       #cimg0501{ background-image: url('../../images/02/02_04_14.jpg');}
       #cimg0502{ background-image:;}
       #cimg0503{ background-image:;}
       #cimg0504{ background-image:;}
/*       
     #cimg0600{ background-image:;}
       #cimg0601{ background-image:;}
       #cimg0602{ background-image:;}
       #cimg0603{ background-image:;}
       #cimg0604{ background-image:;}
     #cimg0700{ background-image:;}
       #cimg0701{ background-image:;}
       #cimg0702{ background-image:;}
       #cimg0703{ background-image:;}
       #cimg0704{ background-image:;}
     #cimg0800{ background-image:;}
       #cimg0801{ background-image:;}
       #cimg0802{ background-image:;}
       #cimg0803{ background-image:;}
       #cimg0804{ background-image:;}
     #cimg0900{ background-image:;}
       #cimg0901{ background-image:;}
       #cimg0902{ background-image:;}
       #cimg0903{ background-image:;}
       #cimg0904{ background-image:;}
     #cimg1000{ background-image:;}
       #cimg1001{ background-image:;}
       #cimg1002{ background-image:;}
       #cimg1003{ background-image:;}
       #cimg1004{ background-image:;}
     #cimg1100{ background-image:;}
       #cimg1101{ background-image:;}
       #cimg1102{ background-image:;}
       #cimg1103{ background-image:;}
       #cimg1104{ background-image:;}
*/
/*  
     #c2img0100{ background-image:;}
       #c2img0101{ background-image:;}
       #c2img0102{ background-image:;}
       #c2img0103{ background-image:;}
       #c2img0104{ background-image:;}
     #c2img0200{ background-image:;}
       #c2img0201{ background-image:;}
       #c2img0202{ background-image:;}
       #c2img0203{ background-image:;}
       #c2img0204{ background-image:;}
     #c2img0300{ background-image:;}
       #c2img0301{ background-image:;}
       #c2img0302{ background-image:;}
       #c2img0303{ background-image:;}
       #c2img0304{ background-image:;}
*/
     
    .popimg{ border: 1px solid #0009ff;}        
    .popimg:hover,.popimg:focus, .popimg:active{ cursor: pointer ;border-radius: 6px;
    -moz-box-shadow: 3px 3px 6px -1px rgba(0, 0, 0, 1);-webkit-box-shadow: 3px 3px 6px -1px rgba(0, 0, 0, 1);
    -ms-box-shadow: 3px 3px 6px -1px rgba(0, 0, 0, 1);box-shadow: 3px 3px 6px -1px rgba(0, 0, 0, 1);
    /*box-shadow: 3px 3px 6px -1px rgba(0, 0, 0, 1);      9px 9px 6px -7px rgba(0, 0, 0, 0.8)*/
    transform: translateY(-5px) translateX(2px);
    }
       
       
       
     
  .itemnumber{ position:relative;border: 1px solid #e9e9e9; font-size:16px; width:30px;height:26px;top:0;left:0; text-align:center;border-radius: 50%; padding-top:3px;
               background-color:#7e7e7e;color:#ffffff;float:left;
    /*子-5*/
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;   
               
  }
  .itemmsg{ margin:5px 0 0 5px;
    /*子-5*/
	-webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
  }
  
  #citem01{	-webkit-order: 0; -ms-flex-order: 0; order: 0;}
  #citem02{	-webkit-order: 1; -ms-flex-order: 1; order: 1;}
  #citem03{	-webkit-order: 2; -ms-flex-order: 2; order: 2;}
  #citem04{	-webkit-order: 3; -ms-flex-order: 3; order: 3;}
  #citem05{	-webkit-order: 4; -ms-flex-order: 4; order: 4;}
/*  
  #citem06{	-webkit-order: 5; -ms-flex-order: 5; order: 5;}
  #citem07{	-webkit-order: 6; -ms-flex-order: 6; order: 6;}
  #citem08{	-webkit-order: 7; -ms-flex-order: 7; order: 7;}
  #citem09{	-webkit-order: 8; -ms-flex-order: 8; order: 8;}
  #citem10{	-webkit-order: 9; -ms-flex-order: 9; order: 9;}
  #citem11{	-webkit-order: 10; -ms-flex-order: 10; order: 10;}
  #citem12{	-webkit-order: 11; -ms-flex-order: 11; order: 11;}
  #citem13{	-webkit-order: 12; -ms-flex-order: 12; order: 12;}
  #citem14{	-webkit-order: 13; -ms-flex-order: 13; order: 13;}
  #citem15{	-webkit-order: 14; -ms-flex-order: 14; order: 14;}
  #citem16{	-webkit-order: 15; -ms-flex-order: 15; order: 15;}
*/
  #c2item01{	-webkit-order: 0; -ms-flex-order: 0; order: 0;}
  #c2item02{	-webkit-order: 1; -ms-flex-order: 1; order: 1;}
  #c2item03{	-webkit-order: 2; -ms-flex-order: 2; order: 2;}
  #c2item04{	-webkit-order: 3; -ms-flex-order: 3; order: 3;}
  #c2item05{	-webkit-order: 4; -ms-flex-order: 4; order: 4;}




  #toolbox{	/*border: 1px solid #b5cbaa;*/ width:100%;height:auto; min-height:400px; margin:40px 0 0 0;
    /*子-1*/
    -webkit-order: 6; -ms-flex-order: 6; order: 6;
	-webkit-flex: 0 0 auto;	-ms-flex: 0 0 auto;	flex: 0 0 auto;
	-webkit-align-self: auto;	-ms-flex-item-align: auto; align-self: auto;
	
	/*親-7*/
	display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
    -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
    -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch;
    -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;
  }
    .toolitem{border: 1px solid #b5cbaa; width:470px;height: auto; min-height: 270px; margin:1%;
      /*子-7*/
      -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
      -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;
      /*親-8*/
      display: -ms-flexbox; display: -webkit-flex; display: flex;
      -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
      -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;
      -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start;
      -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch;
      -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;
    }  
    .toolnumber{ position:relative;border: 1px solid #e9e9e9; font-size:16px; width:30px;height:26px;top:0;left:0; text-align:center;border-radius: 50%; padding-top:3px;
               background-color:#68826a;color:#ffffff;float:left;
      /*子-5*/
      -webkit-order: 0; -ms-flex-order: 0; order: 0;
      -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
      -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;   
               
  }
    #tool01{  -webkit-order: 0; -ms-flex-order: 0; order: 0;}
    #tool0200{-webkit-order: 1; -ms-flex-order: 1; order: 1;}
    #tool02{  -webkit-order: 2; -ms-flex-order: 2; order: 2;}
    #tool03{  -webkit-order: 3; -ms-flex-order: 3; order: 3;}
    #tool04{  -webkit-order: 4; -ms-flex-order: 4; order: 4;}
    #tool05{  -webkit-order: 5; -ms-flex-order: 5; order: 5;}
    #tool06{  -webkit-order: 6; -ms-flex-order: 6; order: 6;}
    #tool07{  -webkit-order: 7; -ms-flex-order: 7; order: 7;}
    
    
    
    
    
    .toolchildetitle{border: 1px solid #e9e9e9;background-color:#e2f8f1; width:96%;height:auto; margin: 5px 0 5px 5px;border-radius: 0px 15px 15px 0px;
      /*子-8*/
      -webkit-order: 0; -ms-flex-order: 0; order: 0;    
      -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
      -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;
      /*親-9*/
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
      align-content: flex-start;
      -webkit-align-items: flex-start;
      -ms-flex-align: start;
      align-items: flex-start;
    }
    .toolchildeA{/*border: 1px solid #b5cbaa;*/ width:96%;height:auto; min-height:200px; margin: 5px 2% 10px 2%;
      /*子-4*/
      -webkit-order: 1; -ms-flex-order: 1; order: 1;
      -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
      -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;
    }
    .toolchildeADS{/*border: 1px solid #b5cbaa;*/ width:100%;height:auto; min-height:220px; margin: 5px 0 0 0; text-align:center;
      /*子-4*/
      -webkit-order: 1; -ms-flex-order: 1; order: 1;
      -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
      -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;
    }
    .toolimage{background-repeat:no-repeat;background-size:contain; width:170px;height:170px;float:left; margin:5px;}
      #toolimg0101{ background-image: ;}
      #toolimg0201{ background-image: url('../../images/02/02_01_04.jpg');}
      #toolimg0301{ background-image: url('../images/bk_1011.jpg');}
      #toolimg0401{ background-image: url('../../images/02/02_03_12.jpg');}
      #toolimg0501{ background-image: url('../../images/02/02_03_13.jpg');}
      #toolimg0601{ background-image:;}
      #toolimg0701{ background-image: url('../../images/02/02_04_15.jpg');}

  #photobox{ position: fixed; z-index:802; display:none;width: 100px; height: 100px; top: 80px; left: 170px; background-repeat:no-repeat;background-size:contain;}
  #photoclose{position: absolute; width: 31px; height: 32px; z-index: 805; top: -33px; left:50%; margin-left:-15.5px; background-image: url('../../images/close.png');
  }
  #photoclose:hover{ cursor:pointer;}
  #footer{ width:100%; height: 50px; left:0px; z-index: 5; bottom:0px; background-color:#000000;/*#999999;*/ color:#ffffff;
  border-radius:467px 467px 0px 0px / 50px 50px 0px 0px;/*←→↑↓半径の値を、左上・右上・右下・左下*/ 
  }
  #footertitle{ position:relative; width: 160px; height: 25px; z-index: 1; top: 8px; left:50%; margin-left:-80px;padding:0 0 7px 0; text-align: center;}
  #footertitle a{ font-size: 0.875em; text-decoration:none; color:#ffffff;}
  #footertitle:hover{cursor:pointer;border-radius:3px 3px 3px 3px / 3px 3px 3px 3px;box-shadow:-1px -1px 1px #f2f2f2, 1px 1px 1px #4e4e4e;}

@media screen and (max-width: 480px){
  .citem{width:100%;}
  .cboxtitle{ margin:-30px 0 0 0; }
  .toolitem{ width:100%;}
  h1{ font-size:4.3vw;} 
}