@charset "utf-8";

.navi {
	width: 100%;
	background: #f4f4f4;
}

.navi ul {
	list-style: outside none none;
	padding: 10px 0;
	position: relative;
	max-width: 980px;
	margin: 0 auto;
	background: #333;
	overflow: hidden;
}

.navi li {
	float: left;
	height: 20px;
	padding: 0 20px;
	vertical-align: middle;
}

.navi li + li {
	border-left:1px solid #CCC;
}

.navi a {
	display: block;
	color: #ffffff;
	font-weight: bold;
	overflow: auto;
}

.navi a:link {
	color: #ffffff;
}

.navi a:hover{
	color: #24B9B3;
}

.navi .active {
	color: #24B9B3 !important;
}

@media screen and (max-width: 480px) {

.navi {
	width: 100%;
	margin-bottom: 5px;
	padding: 5px 0px 45px;
	background-color: #f4f4f4;
}

.navi ul {
	width:100%;
}

}


@media screen and (max-width: 280px) {
	
.navi {
	width: 100%;
	margin-bottom: 5px;
	padding: 5px 0px 60px;
	background-color: #333333;
}
}


.cf a {
	overflow: visible;
}

* {
	margin: 0;
	padding: 0;
	list-style-type: none;
	border: none;
}

.cf:before,
.cf:after {
    content: "";
    display: table;
}
 
.cf:after {
    clear: both;
}

#wrapper {
	width: 100%;
}

#title_block {
	width: 100%;
	padding: 10px 0;
	background: #F3F3F3;
}

#title_block h1 {
	max-width: 980px;
	margin: 0 auto;
	padding: 10px;
	box-sizing: border-box;
	font-size: 22px;
	font-weight: bold;
	color: #FFF;
	background-color: #1DBFB9;
	border-bottom: 2px solid #BED2EB;
}

#news_panel {
	width: 100%;
	padding: 20px 0;
	background: #F3F3F3;
}

#panel_list {
	max-width: 984px;
	margin: 0 auto;
}

#panel_list ul {
	width: 100%;
	margin: 0 auto;
}

#news_panel li {
	width: 156px;
	height: 156px;
	margin: 0 4px 8px 4px;
	box-sizing: border-box;
	float: left;
	text-align: center;
	background-image: url(http://image.pia.jp/images2/gallery/bg_panel.gif);
	background-image: none\9;
	background-size: 156px 156px;
	background-position: left top;
	background-repeat: no-repeat;
	box-shadow: 0 2px 0 0 rgba(215,215,215,1);
}

#news_panel a li img {
	position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@-webkit-keyframes wobble {
  16.65% {
    -webkit-transform: translate(5px, -5px);
    transform: translate(5px, -5px);
  }

  33.3% {
    -webkit-transform: translate(-4px, 4px);
    transform: translate(-4px, 4px);
  }

  49.95% {
    -webkit-transform: translate(3px, -3px);
    transform: translate(3px, -3px);
  }

  66.6% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }

  83.25% {
    -webkit-transform: translate(1px, -1px);
    transform: translate(1px, -1px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes wobble {
  16.65% {
    -webkit-transform: translate(5px, -5px);
    transform: translate(5px, -5px);
  }

  33.3% {
    -webkit-transform: translate(-4px, 4px);
    transform: translate(-4px, 4px);
  }

  49.95% {
    -webkit-transform: translate(3px, -3px);
    transform: translate(3px, -3px);
  }

  66.6% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }

  83.25% {
    -webkit-transform: translate(1px, -1px);
    transform: translate(1px, -1px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

.wobble {
    display: block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble:hover, .wobble:focus, .wobble:active {
    -webkit-animation-name: wobble;
    animation-name: wobble;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@media screen and (max-width: 480px) {
#title_block h1 {
	font-size: 17px;
}

#news_panel li {
	margin: 0 2px 4px 2px;
}

#news_list li {
	font-size: 11px;
}
}

#headerBtm {
	margin : 35px 0 0;
}