@charset "UTF-8";

/*=====================================================================
    地域猫活動.info data.css
=====================================================================*/

img:not(table img){
width: 100%;
}

#breadcrumbs {
width: 1160px !important;
padding: 3px 0;
}

#data .page-container{
margin: 0 auto;
width: 850px;
}

body #data{
margin: 0 auto;
padding: 0;
line-height: 2!important;
}

#data .data-intro{
text-align: left;
padding-bottom: 40px;
}

#data .data-intro h1 {
font-size: 38px;
margin: 0;
padding: 30px 0 10px;
}

#data .data-intro p {
margin: 30px 0;
text-align: left;
}

#data h2 {
  margin: 0 0 28px;
  padding: 14px 18px;
  border-left: 4px solid #f58212;
  background: #f2f2f2;
  font-size: 24px;
  text-align: left;
}

#data h3{
clear: both;
font-weight: bold;
text-align:left;
padding: 0;
margin: 30px 0;
}

#data h3:before{
content: "●";
color: #ff8800;
margin: 0 5px 0 0;
}

#data h4{
clear: both;
font-size: 20px;
font-weight: bold;
text-align: left;
margin: 50px 0 0;
color: #ff8800;
}

#data .number{
position: relative;
display: block;
margin: 0 40px 0 0;
padding-top: 20px !important;
width: 150px;
height: 150px !important;
float: left;
color: #ff8800;
font-size: 30px;
}

#data .page-container span {
color:#ff8800;
}

#data table{
margin: 40px auto;
width: 100%;
border: solid 1px #eee;
}

#data table th{
width: 25%;
background: #eee;
padding: 20px;
border: solid 1px #fff;
}

#data table td{
background: #fff;
padding: 20px;
text-align: center;
vertical-align: middle;
}

#data table .count{
color: #ff8800;
font-size: 28px;
}

#data table td span{
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
padding: 10px 0 0;
background: #666;
color: #fff!important;
border-radius: 50%;
}

#data table strong{
color: #ff8800;
font-size: 1em;
display: inline;
}

#data table td img.rank{
  width: 50px;
}

#data table td img.face{
  width: 100px;
}

#data .page-container section{
margin: 0 0 0px;
padding: 0 0 0px;
background: #fff;
}

#data section .diary{
margin-left: 20px;
}

#data section .diary li a{
float: left;
margin: 20px;
padding: 5px 0 5px 30px;
color: #ff8800;
background: url(../images/data/icon.png) no-repeat 0 5px;
background-size: 20px;
}

#data .img img {
width: 180px;
margin-bottom: -8px;
}

#data p{
clear: both;
width: 100%;
margin: 30px auto;
text-align:left;
}

#data iframe{
display: block;
aspect-ratio: 16 / 9;
width: 100%;
height: 100%;
margin: 50px auto 0;
border: 0;
}

#data .button{
display: block;
margin: 50px auto;
padding: 10px;
width: 300px;
background: #ff8800;
color: #fff;
text-align: center;
height:50px;
clear: both;
}

/* chart */

#data .chart {
position: relative;
display: flex;
height: 500px;
margin-left: 38px;
padding-bottom: 5px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}

#data .chart-axis {
position: absolute;
top: -10px;
bottom: 26px;
left: -38px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #555555!important;
font-size: 12px;
}

#data .chart span {
color: #555555!important;
}

#data .bars {
display: flex;
width: 100%;
padding-right: 15px;
padding-left: 15px;
align-items: flex-end;
gap: 8px;
background: repeating-linear-gradient(to bottom, transparent 0, transparent 65px, #eeeeee 66px);
}

#data .bar-column {
position: relative;
display: flex;
height: 100%;
flex: 1;
flex-direction: column;
justify-content: flex-end;
text-align: center;
}

#data .bar {
display: block;
min-height: 22px;
background: #f9a62f;
}

#data .bar-value {
color: #555555;
font-weight: 700;
font-size: 20px;
}

#data .bar-column small {
position: absolute;
bottom: -27px;
width: 100%;
font-size: 10px;
}

#data .decrease-badge {
position: absolute;
right: 0;
bottom: 100px;
display: grid;
width: 80px;
height: 80px;
place-items: center;
color: #ffffff;
background: #ffa12c;
border-radius: 50%;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
text-align: center;
}

/* tabChange */

#data #tabChange{
width: 650px;
margin: 0 auto;
}

#data #tabChange ul{
width: 650px;
display: flex;
margin: 0;
padding: 0;
list-style: none;
}

#data #tabChange li{
text-indent: 0;
}

#data #tabChange li.tab-item {
width: 33%;
text-align: center;
background: #eee;
float: left;
margin-right: 2px;
}

#data #tabChange .tab li.tab-item:nth-of-type(3n) {
margin-right: 0;
}

#data #tabChange .tab li.tab-item a {
padding: 20px;
display: block;
color: #333;
}

#data #tabChange .tab .current {
background: #ff8800;
}

#data #tabChange .tab .current a {
color: #fff !important;
}

/* cat */

#data .cat {
width: 100%;
clear: both;
margin: 0 auto;
padding: 0;
}

#data .cat img {
margin: 20px 0;
width: 100%;
}

#data .cat p {
text-align: center;
}

#data .cat li {
width: 31%;
display: inline-block;
margin: 0 0;
margin-right: 30px;
}

#data .cat li:nth-of-type(3n) {
margin: 0;
}

/* screenwidth less than or equal 1180px - mobile wide
-------------------------------------------------------------------------- */

@media (max-width: 1180px) {

#breadcrumbs {
width: 95% !important;
}

#data .page-container{
width: 90%;
}
	
	#data .site-footer{
		text-align: center!important;
	}
	
	#data .site-footer p{
		text-align: center!important;
		margin: 0 auto!important;
	}

}

/* screenwidth less than or equal 480px - mobile wide
-------------------------------------------------------------------------- */

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

#data {
width: 100% !important;
padding: 0;
margin: 0;
font-size: 16px;
}

#breadcrumbs {
width: 90% !important;
margin: 0 auto!important;
padding: 0 auto!important;
height: 0;
}

#data .site-header{
  padding: 0;
  margin: 0;
}

#data .page-container{
margin: 0 auto;
width: 90%;
}

#data .data-intro{
text-align: left;
padding-bottom: 0px;
}

#data h1 {
font-size: 24px!important;
margin: 0!important;
padding: auto !important;
}

#data h2 {
font-size: 20px;
margin: 40px 0 20px;
padding: 10px 20px;
}

#data h3{
font-size: 18px;
margin: 20px 0!important;
padding: 0!important;
}

#data h4 {
font-size: 18px;
padding: 20px 0 0;
}

#data .data-intro p{
  margin: 0!important;
  padding: 0!important;
}

#data iframe{
aspect-ratio: 16 / 9; /* 縦横比を維持 */
height: auto;         /* 高さを自動調整 */
margin: 0 auto;
border: solid 1px #fff;
}

#data .fukidashi {
right: -120px;
}

#data #tabChange{
width: 100%;
}

#data #tabChange li.tab-item {
margin-right: 19px;
}

#data .number{
margin: 0 26px 0 0;
padding-top: 23px !important;
width: 80px;
height: 80px !important;
font-size: 40px;
}

#data table th{
padding: 10px;
}

#data table td{
background: #fff;
padding: 10px;
text-align: center;
vertical-align: middle;
}

#data table td img.rank{
  width: 50px;
}

#data table td img.face{
  width: 60px;
}

#data table .count{
font-size: 24px;
}

#data table td span{
width: 40px;
height: 40px;
padding: 5px 0 0;
color: #fff !important;
}

#data section{
margin: 0 0 80px;
padding: 0 0 10px;
background: #fff;
}

#data{
margin: 0 auto;
padding: 0;
width: 95%;
text-align: center;
}

#data .scroll {
top: 0px;
left: -70px;
}

#data p{
width: 95%;
}

#data .button{
width: 50%;
}

/* chart */

#data .chart {
width: 90%;
height: 250px;
margin-left: 28px;
}

#data .chart-axis {
top: 0px;
bottom: 0px;
left: -28px;
}

#data .bars {
padding-right: 5px;
padding-left: 5px;
}

#data .bar {
display: block;
min-height: 22px;
background: #f9a62f;
}

#data .bar-value {
font-size: 12px;
}

#data .bars {
gap: 3px;
}

#data .decrease-badge {
width: 62px;
height: 62px;
bottom: 62px;
font-size: 12px;
}

#data #tabChange ul {
margin: 0 !important;
padding: 0 !important;
width: 100%;
}

#data #tabChange li.tab-item {
margin-right: 10px;
}

#data #tabChange .tab li.tab-item a {
padding: 20px 10px;
display: block;
}

#data #tabChange p{
margin: 0 !important;
padding: 0 !important;
}

#data .number{
padding-top: 12px !important;
}

#data .loop_left_wrap {
height: 30px;
}

#data .loop_leftb_wrap {
height: 30px;
}

#data .loop_right_wrap {
height: 30px;
}

}

/* screenwidth less than or equal 375px - mobile wide
-------------------------------------------------------------------------- */
@media only screen and (max-width: 375px) {

#data h2{
font-size: 20px;
}

#data h3{
font-size: 18px;
}

#data .scroll {
top: -15px;
left: -65px;
}

}

/* screenwidth less than or equal 320px - mobile wide
-------------------------------------------------------------------------- */
@media only screen and (max-width: 320px) {

#data {
font-size: 14px;
}

#data h1{
font-size: 22px!important;
}

#data h2{
font-size: 16px;
padding: 10px;
}

/* chart */

#data .chart {
width: 90%;
}

#data .number{
margin: 0 26px 0 0;
padding-top: 13px !important;
width: 60px !important;
height: 60px !important;
font-size: 36px;
}

#data .scroll {
top: 0px;
left: -50px;
}

#data .fukidashi {
top: 160px;
right: -20px;
padding: 40px 0;
width: 100px;
height: 100px;
}

#data .img img {
width: 150px;
margin-left: 100px;
}

#data iframe{
height: 154px;
}

#data #tabChange li{
	font-size: 14px;
}

}