﻿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;
    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{ font-size:1.25em;}
#title{text-align: center; margin-bottom:0;
    -webkit-order: 0;-ms-flex-order: 0;order: 0;
    -webkit-flex: 0 1 auto;-ms-flex: 0 1 auto;flex: 0 1 auto;
    -webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;
}
h2{text-align: center;font-size:0.875em; font-weight:200; margin-top:5px; margin-bottom:20px;
}
.ads_Horizon{position:relative;/*border: 1px solid #b5cbaa;*/width:100%; min-height:90px; height:auto; text-align:center; margin: 20px 5% 0 5%;
    -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;
}
.adstitle{position: absolute; width: 150px; text-align:center; height:20px; z-index: 1; top: -20px; left:50%; margin-left:-75px; font-size:0.75em;color:#c1c1c1; }

  .ctg{ position: relative; border: 1px solid #9b9b9b; width:300px; height:400px; margin:20px 10px 10px 10px;
        -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;
}
  .ctg_ads{ position: relative; border: 1px solid #9b9b9b; width:300px; height:400px; margin:20px 10px 10px 10px;
        -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;
}
 .ctg:hover, .ctg:focus, .ctg: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);
 }

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

    .sec_title{border: 1px solid #9b9b9b/*007b06*/; 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;
}      






.flat{ border: 1px solid #919191;width: auto;/* 90%; margin:15px 5% 20px 5%;*/
    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: flex-start; -ms-flex-line-pack: start; align-content: flex-start;
    -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;
}
#summary{
    -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: auto;-ms-flex-item-align: auto;align-self: auto;
}






#footer{ width:100%; height: 50px; left:0px; z-index: 5; bottom:0px; background-color:#999999; color:#ffffff;
  border-radius:467px 467px 0px 0px / 50px 50px 0px 0px;/*←→↑↓半径の値を、左上・右上・右下・左下*/ 
 }
  #footertitle{ position:relative; width: 220px; height: 23px; z-index: 1; top: 10px; left:50%; margin-left:-110px;padding: 3px 0 3px 0; text-align: center;}
  #footertitle a{ font-size: 14px; 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){
 h1{ font-size:1.125em;}
}
@media screen and (max-width: 440px){
 h1{ font-size:1em;}
}
@media screen and (max-width: 400px){
 h1{ font-size:0.875em;}
 h2{ font-size:0.75em;}
}
