@import url('footor.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; width: 100%; height: auto; min-width:320px;padding-bottom:50px;
 /*flex-cont-01*/
    display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-content: stretch; align-items: center;
}
 #titleimgs{/*border: 1px solid #b5cbaa;*/ position: absolute; width:175px;height:147px; background-size:contain; background-image: url('../../images/01/titleimage0103.png');
              top:40px;left:30px; z-index:6; }
 .head{ /*border: 1px solid #b5cbaa;*/ width:100%; margin:0; height:50px; z-index:5;
	/*flex-item:01-1*/order: 0; flex: 0 0 auto; align-self: auto; 
	/*flex-cont-02*/display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-content: stretch; align-items: center;
 }
   h1{ position:absolute;/* border: 1px solid #b5cbaa;*/ font-size:17px; width: auto; margin:20px 0 0 0;
   /*flex-item:02-1*/order: 0; flex: 0 0 auto; align-self: auto;
   }
   h2{ position: absolute;/* border: 1px solid #b5cbaa;*/ font-size:14px; font-weight:normal; width: auto; margin:50px 0 0 0;   
   /*flex-item:02-2*/order: 1; flex: 0 0 auto; align-self: auto;
   }

 #topmsgbox{border: 1px solid #e9e9e9; width:calc(100% - 450px); height:auto; padding:15px; margin:40px 0 0 0;border-radius:20px;
	/*flex-item:01-2*/order: 1; flex: 0 0 auto; align-self: auto;
 }
 .ads_Horizon{/*border: 1px solid #b5cbaa;*/ width:90%; min-height:90px; height:auto; text-align:center; margin: 70px 0 0 0;
	/*flex-item:01-x*/flex: 0 0 auto; align-self: auto;
 }
   .adstitle{ 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; 
   }

 #ads01{/*flex-item:01-3*/order: 2; }
 #ads02{/*flex-item:01-8*/order: 7; }

.conentstitle{/*border: 1px solid #b5cbaa;*/ width:100%;height:30px; margin-top:30px;
	/*flex-item:01-x*/flex: 0 0 auto; align-self: auto;
	/*flex-cont-03*/  display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-content: stretch; align-items: center;
 }
   #conentstitle01{ /*flex-item:01-4*/order: 3;}
   #conentstitle02{ /*flex-item:01-6*/order: 5;}
   #conentstitle03{ /*flex-item:01-9*/order: 8;}
      .line{ height:5px; border: 1px solid #004425; border-radius:2.5px; margin:0 5% 0 5%; background-color:#00a65a;
      }
      .line01{/*flex-item:03-01*/ order: 0; flex: 2 2 auto;}
      .titlemsg{ border: 1px solid #004425;  width: auto; text-align:center;padding:3px 0 0 0; border-radius:20px; background-color:#00a65a; color:#ffffff;
                font-weight: 500; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
              /*flex-item:03-02*/ order: 1; flex: 1 1 auto;}      
   	  .line02{/*flex-item:03-03*/ order: 2; flex: 2 2 auto;}

 .cotentsbox{ /*border: 1px solid #fe3737;*/ width:90%; height:auto; min-height:300px; margin:30px 0 0 0;
	/*flex-item:01-x*/flex: 0 0 auto; align-self: auto;
	/*flex-cont-04*/ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: stretch; align-items: flex-start;	
 }
    #cotentsbox01{/*flex-item:01-5*/order: 4;}
    #cotentsbox02{/*flex-item:01-7*/order: 6;}
    #cotentsbox03{/*flex-item:01-10*/order: 9;}
    
    
      .itemBox{ border: 1px solid #c1c3d8; width:450px; height:auto;margin:10px 10px 10px 10px;
               /*flex-item:04-x*/ flex: 0 0 auto; align-self: auto;
               /*flex-cont-05*/ display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-content: stretch; align-items: center;
	  }
      #itemBox0101{/*flex-item:04-1*/order: 0;}
      #itemBox0102{/*flex-item:04-2*/order: 1;}
      #itemBox0103{ order: 2;}
      #itemBox0104{ order: 3;}
      #itemBox0105{ order: 4;}
      #itemBox0106{ order: 5;}
      #itemBox0107{ order: 6;}
      #itemBox0108{ order: 7;}
      #itemBox0109{ order: 8;}
      #itemBox0110{ order: 9;}
      #itemBox0111{ order: 10;}
      #itemBox0112{ order: 11;}
      #itemBox0113{ order: 12;}
      #itemBox0114{ order: 13;}
      #itemBox0115{ order: 14;}
      #itemBox0116{ order: 15;}
      #itemBox0117{ order: 16;}
      #itemBox0118{ order: 17;}
      #itemBox0119{ order: 18;}
      
      
      #itemBox0201{/*flex-item:06-1*/order: 0;}
      #itemBox0202{/*flex-item:06-2*/order: 1;}
      #itemBox0203{ order: 2;}
      #itemBox0204{ order: 3;}
      #itemBox0205{ order: 4;}
      #itemBox0206{ order: 5;}
      #itemBox0207{ order: 6;}
      #itemBox0208{ order: 7;}
      #itemBox0209{ order: 8;}
  /*    
      #itemBox0210{ order: 9;}
      #itemBox0211{ order: 10;}
      #itemBox0212{ order: 11;}
      #itemBox0213{ order: 12;}
      #itemBox0214{ order: 13;}
      
      #itemBox0301{order: 0;}
      #itemBox0302{order: 1;}
      #itemBox0303{ order: 2;}
      #itemBox0304{ order: 3;}
      #itemBox0305{ order: 4;}
      #itemBox0306{ order: 5;}
      #itemBox0307{ order: 6;}
      #itemBox0308{ order: 7;}
      #itemBox0309{ order: 8;}
      #itemBox0310{ order: 9;}
      #itemBox0311{ order: 10;}
      #itemBox0312{ order: 11;}
      #itemBox0313{ order: 12;}
      #itemBox0314{ order: 13;}
  */    
      
      
    .itemTitle{/*border: 1px solid #fe3737;*/ width:auto;height:auto; margin:8px 0 10px 0; color: #006d98;
    /*flex-item:05-1*/order: 0;flex: 0 0 auto; align-self: auto;}
    /*.itemImage{border: 1px solid #fe3737;width:263px;height:147px; background-repeat:no-repeat;background-size:contain;
    /*flex-item:05-2*/
    /*order: 1;flex: 0 0 auto; align-self: auto;*/
    }
    /*
       #itemImg0101{background-image:;}
       #itemImg0102{background-image: url('../images/01_01_02.png');}
       #itemImg0103{background-image: url('../images/01_01_03.png');}
       #itemImg0104{background-image: url('../images/01_01_04.png');}
       #itemImg0105{background-image: url('../images/01_01_05.png');}
       #itemImg0106{background-image: url('../images/01_01_06.png');}
       #itemImg0107{background-image: url('../images/01_01_07.png');}
       #itemImg0108{background-image: url('../images/01_01_08.png');}
       #itemImg0109{background-image: url('../images/01_01_09.png');}
       #itemImg0110{background-image: url('../images/01_01_10.png');}
       #itemImg0111{background-image: url('../images/01_01_11.png');}
       #itemImg0112{background-image: url('../images/01_01_12.png');}
       #itemImg0113{background-image: url('../images/01_01_13.png');}
       #itemImg0114{background-image: url('../images/01_01_14.png');}
              
       #itemImg0201{background-image: url('../images/01_02_01.png');}
       #itemImg0202{background-image: url('../images/01_02_02.png');}
       #itemImg0203{background-image: url('../images/01_02_03.png');}
       #itemImg0204{background-image: url('../images/01_02_04.png');}
       #itemImg0205{background-image: url('../images/01_02_05.png');}
       #itemImg0206{background-image: url('../images/01_02_06.png');}
       #itemImg0207{background-image: url('../images/01_02_07.png');}
       #itemImg0208{background-image: url('../images/01_02_08.png');}
       #itemImg0209{background-image: url('../images/01_02_09.png');}
     */  
    .itemMsg{/*border: 1px solid #fe3737;*/ width:98%; height:auto; padding:7px;
	/*flex-item:05-3*/order: 2;flex: 0 0 auto; align-self: auto;
    }
    .exampletitle{border: 1px solid #007105; position:relative; top:-5px; left:5px; width:100px; height:22px; font-size:16px; padding-top:1.5px; text-align: center; background-color:#c2e4c6; color:#2b643f;border-radius:13px;
    /*flex-item:05-4*//*order: 2;flex: 0 0 auto; align-self: auto;*/
    }
    .example{/*border: 1px solid #fe3737;*/ width:calc(100% - 20px); height:auto; margin:15px 0 0 0; padding:10px;background-color:#f3f3f3;
    /*flex-item:05-5*/order: 3;flex: 0 0 auto; align-self: auto;
    }
 PRE{white-space: pre-wrap; font-weight:500;}

@media screen and (max-width: 1600px){
 #topmsgbox{ width:calc(100% - 220px); margin:40px 0 0 180px;}
 #titleimgs{ top:40px;left:0px;}
}
@media screen and (max-width: 767px){
 #titleimgs{ top:70px;left:50%; margin-left:-87.5px;}
 #topmsgbox{ width:90%; margin:180px 0 0 0;}
}
@media screen and (max-width: 500px){
 .itemBox{  width:100%; margin:10px 0 10px 0; }
}