﻿body { margin: 0; padding: 0;word-break:break-all; font-family: Meiryo,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", sans-serif;
       /*background-color:#d7e8d3;*/
}
.container { /*border: 1px solid #2d750a;*/position: relative; width: 100%; min-width:320px; padding-bottom:80px;/* background-image:url('../images/bgpict02.png');*/
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
    -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
    -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;
}
#title{ /*border: 1px solid #ff0000;*/ width:auto; text-align:center; font-size:1.8em; padding:0 5px 0 5px;
    -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;
 }
 #title span{ font-size:0.6em;}
 h2{text-align: center;font-size:0.875em; font-weight:200; margin-top:-20px; margin-bottom:20px;}
#titlebox{ position:relative; width: auto; max-width:800px; border: 1px solid #b5cbaa;text-align: left; padding:20px 10px 20px 10px;
         border-radius:6px 6px 6px 6px / 6px 6px 6px 6px ; /*background-color:#ffffff;*/ 
         
        -moz-box-shadow: 2px 2px 4px 2px rgba(71, 94, 79, 0.79);
        -webkit-box-shadow: 2px 2px 4px 2px rgba(71, 94, 79, 0.79);
        -ms-box-shadow: 2px 2px 4px 2px rgba(71, 94, 79, 0.79);
        box-shadow: 2px 2px 4px 2px rgba(71, 94, 79, 0.79);

    -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;
}
   #titlebox_cild{ position: relative; width:auto;height:auto; margin:15px 0 -10px 0; text-align:center; top:-20px; font-size:1.25em;}
  
   #peace{position: absolute;width:100%; height:120px; top:110px; left:0}
   .Wish{background-image:url('../images/Ukraine.png'); background-size:contain;opacity:0.3;}
   
 .ads_Horizon{position:relative;/*border: 1px solid #b5cbaa;*/width:90%; min-height:90px; height:auto; text-align:center; margin: 80px 5% 30px 5%;
    -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: flex-start; align-self: flex-start;
 }


 .adstitle{position: absolute; width: 188px; 
text-align:center; height:20px; z-index: 1; top: -40px; left:50%; margin-left:-94px; font-size:1.25em; font-weight:bolder; /*color:#c1c1c1;*/ }

.ctgy{ position:relative;/* border: 2px solid #db5959;*/ width:100%; height:auto; margin-top:30px; padding:3px 3px 3px 3px;
    -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: flex-start;	-ms-flex-item-align: flex-start; align-self: flex-start;
 
    display: -webkit-flex; display: -ms-flexbox; display: flex;
	-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
	-webkit-justify-content: center; -ms-flex-pack: center;	justify-content: center;
	-webkit-align-items: flex-start; -ms-flex-align: start;	align-items: flex-start;
	-webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start;
}
.ctgchild{ position: relative; border: 1px solid #9b9b9b; width:300px; height:400px; margin:30px 10px 10px 30px;
        -webkit-border-radius:6px 6px 6px 6px / 6px 6px 6px 6px; border-radius:6px 6px 6px 6px / 6px 6px 6px 6px;
        box-shadow:-2px -2px 2px #e4fffe, 3px 3px 3px #5c5c5c;
        background-color:#dadde6/*#e6f6f0*/;transition: 0.3s;
        -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; 
}
.ctg_ads{ position: relative; border: 1px solid #9b9b9b; width:300px; height:400px; margin:30px 10px 10px 30px;
        -webkit-border-radius:6px 6px 6px 6px / 6px 6px 6px 6px; border-radius:6px 6px 6px 6px / 6px 6px 6px 6px;
        box-shadow:-2px -2px 2px #e4fffe, 3px 3px 3px #5c5c5c;
        background-color:#dadde6/*#e6f6f0*/;transition: 0.3s;
        -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; 
}

  /*
  .ctgchild:focus {background-color:#99a8ec; cursor:pointer;}
  .ctgchild:active {background-color:#99a8ec; cursor:pointer;}
  .ctgchild:hover {background-color:#99a8ec; cursor:pointer;}
  */
  .ctgchild:focus div.sec_title{color:#ffffff;}
  .ctgchild:focus div.sec_title_sub{color:#ffffff;}
  .ctgchild:active div.sec_title{color:#ffffff;}
  .ctgchild:focus div.sec_title_sub{color:#ffffff;}
  .ctgchild:hover div.sec_title{color:#ffffff;}
  .ctgchild:hover div.sec_title_sub{color:#ffffff;}

  .ctg_ads:focus div.sec_title{color:#ffffff;}
  .ctg_ads:focus div.sec_title_sub{color:#ffffff;}
  .ctg_ads:active div.sec_title{color:#ffffff;}
  .ctg_ads:focus div.sec_title_sub{color:#ffffff;}
  .ctg_ads:hover div.sec_title{color:#ffffff;}
  .ctg_ads:hover div.sec_title_sub{color:#ffffff;}

/*
@-webkit-keyframes ctgchild{0%{-webkit-transform: translateY(-16px);transform: translateY(-16px);}50% {-webkit-transform:translateY(-8px);transform: translateY(-8px);}100% {-webkit-transform: translateY(-16px);transform: translateY(-16px);}}
@keyframes ctgchild{0%{-webkit-transform: translateY(-16px);transform: translateY(-16px);}50%{-webkit-transform: translateY(-8px);transform: translateY(-8px);}100%{-webkit-transform: translateY(-16px);transform: translateY(-16px);}}
@-webkit-keyframes ctgchild-float{100%{-webkit-transform: translateY(-16px);transform:translateY(-16px);}}
@keyframes ctgchild-float{100%{ -webkit-transform: translateY(-16px);transform: translateY(-16px);}}
*/
 .ctgchild:hover, .ctgchild:focus, .ctgchild:active {
    cursor: pointer ;background-color:#99a8ec;
    box-shadow: -1px -1px 0px 0px rgba(0, 255, 251, 1),3px 5px 8px 5px rgba(92, 92, 92, 1);
    transform: translateY(-15px) translateX(3px);}
 .ctg_ads:hover, .ctg_ads:focus, .ctg_ads:active {
    cursor: pointer ;background-color:#99a8ec;
    box-shadow: -1px -1px 0px 0px rgba(0, 255, 251, 1),3px 5px 8px 5px rgba(92, 92, 92, 1);
    transform: translateY(-15px) translateX(3px);}
    
  /*
     -webkit-animation-name: ctgchild-float, ctgchild; animation-name: ctgchild-float, ctgchild;
     -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; 
     -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; 
     -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; 
     -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; 
     -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; 
     -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate;
  */    
 
  .sec_title{border: 1px solid #6a6a6a; width:90%; font-size:1em; text-align:center; margin:10px 5% 0 5%;}
  .adstitle2{ color:#939393; }  

.sec_title_sub{/*border: 1px solid #d5af00;*/ width:100%;font-size:0.875em; color:#939393; text-align:center;}
.contcase{ position:relative; overflow:hidden;
       border: 1px solid #6a6a6a; width: auto/* 280px/*98.778 mm*/;top:15px;height:310px;/*left:10px;*/ padding:5px 5px 5px 5px; margin:0px 5px 0px 5px;
	   -webkit-border-radius: 3px 3px 3px 3px / 3px 3px 3px 3px;
       -o-border-radius: 3px 3px 3px 3px / 3px 3px 3px 3px;
       -ms-border-radius: 3px 3px 3px 3px / 3px 3px 3px 3px;
       border-radius:3px 3px 3px 3px / 3px 3px 3px 3px;

       box-shadow:-2px -2px 2px #6a6a6a/*#909090*/, 1px 1px 2px #d0d0d0;
       background-repeat:no-repeat; background-position:center bottom 0px;/*background-size:contain;*/
}
.contcase_ads{ position: relative; border: 1px solid #9b9b9b; width:300px;top:15px; height:315px; left:0;/* margin: 50px 0px 10px 0px;*/
        background-color:#ffffff
        /*-webkit-border-radius:6px 6px 6px 6px / 6px 6px 6px 6px; border-radius:6px 6px 6px 6px / 6px 6px 6px 6px;
        box-shadow:-2px -2px 2px #e4fffe, 3px 3px 3px #5c5c5c;
       /* background-color:#dadde6/*#e6f6f0;*/
}

   .caption{ position: absolute; z-index:700; left:0; top:315px;background-color: rgba(31, 45, 29, 0.8); opacity:0; /* opacity:は文字も含めて・・　これは背景だけ0.6*/
             font-weight:300; font-size:16px; line-height:150%;
                          color:#ceffdf/*#0aff00*/; width:270px;height:330px; word-break:break-all; padding: 0 10px 10px 10px;
             text-shadow: 1px 1px 0px rgba(0, 0, 0, 1),-1px -1px 0px rgba(28, 21, 3, 1);
}
.fstmsg{color: #FFFF00;}
.adstitle2{ color:#939393; }


    #ctg01{
	-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;
}
    #ctg02{
	-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;
}
    #ctg03{
	-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: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg04{
	-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;
}
    #ctg05{
	-webkit-order: 4; -ms-flex-order: 4; order: 4;
    -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;
}
    #ctg06{
	-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;
}
    #ctg07{
	-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;
}
    #ctg08{
	-webkit-order: 7; -ms-flex-order: 7; order: 7;
    -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;
}
    #ctg09{
	-webkit-order: 8; -ms-flex-order: 8; order: 8;
    -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;
}

#contcase_01{ background-image: url('../images/00_001.jpg'); font-weight:600; font-family:"HG丸ｺﾞｼｯｸM-PRO"; background-color:#ffffff;font-size:1em; line-height:1.3em;
/*color: #007A12;*/
/*text-shadow: 1px 2px 0px rgba(162, 232, 196, 1);*/
}
#contcase_02{ background-image: url('../images/00_002.jpg');/*font-weight:400; font-family:"HG丸ｺﾞｼｯｸM-PRO"; background-color:#ffffff;color: #FFD1F8;text-shadow: 2px 2px 0px rgba(209, 0, 0, 1);*/
}
#contcase_03{ background-image: url('../images/00_003.jpg'); background-color:#00004a;color: #ffffff;font-weight:200; font-family:"HG丸ｺﾞｼｯｸM-PRO"; font-size:1em; line-height:1.3em;
}
#contcase_04{ background-image: url('../images/00_004_001.jpg');}
#contcase_05{ background-image: url('../images/00_005_001.jpg');}
#contcase_06{ background-image: url('../images/00_006.jpg');color: #ffffff;font-weight:600; font-family:"HG丸ｺﾞｼｯｸM-PRO"; font-size:1.375em; line-height:1.3em;
text-shadow: 2px 3px 2px rgba(245, 0, 0, 1),-4px -3px 7px rgba(255, 242, 0, 1),-3px -2px 1px rgba(0, 0, 0, 1);
}

.ctgchild:hover .c_cont{ color:#002e07;text-shadow: 0px 0px 0px ;}
.ctgchild:hover .c_title{ color:#ff8d33;}
#ads_under{ width:auto;height:auto;
	
}

#footer{position: relative; width:100%; height: 50px; left:0px; z-index: 5; bottom:0px; background-color:#b5cbaa; color:#ffffff;
  border-radius:467px 467px 0px 0px / 50px 50px 0px 0px;/*←→↑↓半径の値を、左上・右上・右下・左下*/ 
 }
  #footertitle{position: absolute; width: 230px; height: 27px; z-index: 1; top: 7px; left:50%; margin-left:-115px;padding:0 0 7px 0; text-align: center;}
  #footertitle a{ font-size: 1.3em; 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: 780px){
/*962以下  --1024*/
   #titlebox{ margin: 0 10px 0 10px;}
}
@media screen and (max-width: 419px){
   #title{  font-size:1.25em; padding: 0 5px 0 15px;}
   h2{margin-top:0px; }
}
@media screen and (max-width: 380px){
  .ctgchild{  margin:30px 3px 10px 3px; box-shadow: 0px 0px 0px #e4fffe, 0px 0px 0px #5c5c5c;}
  #title{  font-size:1em;}
    

}



















