﻿.grid {
    height:310px;
}

@media (max-width: 767px) {
    .myHpNewInfoArea #container .col-xs-6 {
        height: 470px;
    }
}

@media (max-width: 430px) {
    .myHpNewInfoArea #container .grid {
        height:304px;
    }
}

@media (min-width: 768px) {
    .myHpNewInfoArea #container .col-sm-4 {
        height:358px;
    }
}

@media (min-width: 992px) {
    .myHpNewInfoArea #container .col-md-3 {
        height:354px;
    }
}

@media (min-width: 1200px) {
    .myHpNewInfoArea #container .col-lg-2 {
        height:308px;
    }
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    padding: 10px;
}

.myHpNewInfoArea .col-lg-2,
.myHpNewInfoArea .col-md-3,
.myHpNewInfoArea .col-sm-4{
	padding:0 5px;
	margin-bottom:10px;
    vertical-align: top;
}

.news-post{
	padding:7px;
	background:rgba(255,255,255,1);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.news-post h4{
	font-size:14px;
	margin-bottom:.5em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
    /*margin-top: 10px;*/
    margin-top: 0px;
}

.gyosei h4{
    overflow: inherit;
    text-overflow: inherit;
    white-space: inherit;
}

.news-post p{
	line-height:1.4;
	font-size:12px;
	margin-bottom:.5em;
    /*height: 4em;*/
    height: auto;
    overflow: hidden;
    color: #7b7171;
}

.gridfooter {
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0px;
    padding: 7px;
    overflow: hidden;
    background-color: #ffffff;
}

.news-post .postdate{
	display:block;
	text-align: right;}

.myHpNewInfoBottomArea {text-align:center;margin-top:20px;}
.myHpNewInfoArea .btn-default{padding:5px 30px;border-color:#000;}

/*===================================================*/
/*画像調整*/
.myHpNewInfoArea .thum,
.myHpNewInfoArea .nothum .amacat {
    margin-bottom:10px;
}

.myHpNewInfoArea .thum{
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	width: 100%;
	padding-top:100%;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
	-webkit-background-size: 4px 4px;
}

.myHpNewInfoArea .thum img{
/* 画像を上下左右に中央配置する（絶対指定） */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* 画像の最大サイズは枠の1.5倍まで */
  max-width: 150%;
  max-height: 150%;
  width:initial;
}
/*===================================================*/

.shoptitle{
	background:#edecea;
	display:block;
	padding:3px 10px;
	font-size:90%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

}
.shoptitle:before{
	content:"\f041";
	font-family: FontAwesome;
	padding-right:4px;
}

.postdate{font-size:11px;}
.postdate:before{
	font-family: FontAwesome;
	padding-right:3px;
	content:"\f017";
}

/*===================================================*/
/*カテゴリ別配色*/
.myHpNewInfoArea .thum .amacat{
	position:absolute;
	width:100%;
	bottom:0;
	left:0;
	padding:2px 5px;
	background:#070707;
	color:#FFF;
	font-size:11px;
	text-align:center;
}

.myHpNewInfoArea .nothum .amacat{
	display:block;
	padding:2px 5px;
	background:#070707;
	color:#FFF;
	font-size:11px;
	text-align:center;
}

#container .cat0{background-color:#3fbaf5}
#container .cat1{background-color:#de840c}
#container .cat2{background-color:#2b5e95}
#container .cat3{background-color:#c13033}
#container .cat4{background-color:#5e9d32}
#container .cat5{background-color:#d4a60a}
#container .cat6{background-color:#6087cc}
#container .cat7{background-color:#ef3e2c}
#container .cat8{background-color:#2db09e}
#container .cat9{background-color:#aa8953}
#container .cat10{background-color:#86becb}
#container .cat001{background-color:#d45500}
/*===================================================*/

#container {
  margin: 0px -15px 0px -15px;
  position: relative;
}

#container .bottomArea{
     position:absolute;
     text-align:center;
     padding:10px;
     width:40%;
     display:block;
 }

#container .loading{
    display:none;
}

.newsicon {
    margin: 0 auto 20px;
}

.newsicon a {
    cursor:pointer;
}

.grid .ana {
  border: 6px solid #E06160;
}

.grid .anzen {
  border: 6px solid #FF0000;
}

.grid .shuro {
  border: 6px solid #DCB962;
}

.grid .amaLife {
  border: 6px solid #71C3BD;
}

.grid .amaGenki {
  border: 6px solid #93A94B;
}

.myHpNewInfoArea .menu div.menu_bun0{
    background-color:#0F9516;
}                 
.myHpNewInfoArea .menu div.menu_bun1{
    background-color:#ED8500;
}                 
.myHpNewInfoArea .menu div.menu_bun2{
    background-color:#336699;
}                 
.myHpNewInfoArea .menu div.menu_bun3{
    background-color:#CC3333;
}                 
.myHpNewInfoArea .menu div.menu_bun4{
    background-color:#60A700;
}                 
.myHpNewInfoArea .menu div.menu_bun5{
    background-color:#D5AB00;
}                 
.myHpNewInfoArea .menu div.menu_bun6{
    background-color:#648BD8;
}                 
.myHpNewInfoArea .menu div.menu_bun7{
    background-color:#FE3F27;
}                 
.myHpNewInfoArea .menu div.menu_bun8{
    background-color:#30B9A5;
}                 
.myHpNewInfoArea .menu div.menu_bun9{
    background-color:#AE8A56;
}                 
.myHpNewInfoArea .menu div.menu_bun10{
    background-color:#89C4D3;
}                 
.myHpNewInfoArea .menu div.menu_bunGYOUSEI{
    background-color:#FE8C7D;
}