@charset "UTF-8";

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

/* ------------------------------------------------------------------ */
/* a. General and Common Styles
/* ------------------------------------------------------------------ */

.clearfix::after {
    content: " ";
    display: block;
    clear: both;
}

body {
background: #fff;
font-size: 18px;
}

a:hover{
opacity: 0.7;
}

/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */

header {
margin: 0 auto;
position: fixed;
width: 100%;
height: 100px;
z-index: 990;
background: #fff;
}

header .inner {
margin: 0 auto;
width: 1000px;
height: 100px;
z-index: 990;
}

/* header logo */
header .logo {
margin-top: 20px;
float: left;
width: auto;
z-index: 991;
}

header .logo a {
width: 250px;
display: block;
margin: 0;
padding: 0;
border: none;
outline: none;
wxidth: 250px;
hxeight: 60px;
}

/* primary navigation
--------------------------------------------------------------------- */
.inquiry_btn {
display: none;
}

#nav-wrap,
#nav-wrap ul,
#nav-wrap li,
#nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}

/* nav-wrap */
#nav-wrap {
margin-top: 10px;
font-size: 18px;
letter-spacing: 1.1px;
float: right;
}

#nav-wrap .spnavi {
display: none;
}

#nav-wrap .inquiry a span {
color: #fff;
}

ul#nav {
min-height: 90px;
width: auto;

/* left align the menu */
text-align: left;
}

ul#nav li {
position: relative;
list-style: none;
display: inline-block;
}

/* Links */
ul#nav li a {
margin-left: 10px;
display: inline-block;
padding: 20px 8px;
line-height: 38px;
text-decoration: none;
text-align: right;
color: #333;
}

ul#nav li a:hover {
color: #ff8800;
}

ul#nav .inquiry {
text-align: center;
}

ul#nav .inquiry a {
display: block;
padding: 5px 15px;
color: #fff;
background: #ff8800;
border-radius: 30px;
}

ul#nav .inquiry a:after {
content: "";
margin-left: 0;
}

ul#nav .inquiry a:hover {
color: #fff;
}

/*
ul#nav li a:active {
}*/

ul#nav li.current a {
color: #ff8800;
}

ul#nav li a span {
color: #ff8800;
}


/* ------------------------------------------------------------------ */
/* c. Hero Section
/* ------------------------------------------------------------------ */

#hero {
background: #fff;
margin-bottom: -15px;
}

/* For high-res devices */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

#hero {
background: #fff;
background-size: 200px 200px;
}

}

#hero .row img {
border-radius: 10px;
}

.spacer {
height: 90px;
}

/* ------------------------------------------------------------------ */
/* d. Features Section
/* ------------------------------------------------------------------ */

.features {
overflow: hidden;
}

.features .right {
float: right;
}

.features .left {
padding-right: 20px;
float: left;
}

/* ------------------------------------------------------------------ */
/* d. title Section
/* ------------------------------------------------------------------ */

.title {
width: 95%;
height: 250px;
border-radius: 10px;
margin-bottom: 20px;
}

h4 {
font-size: 22px;
margin: 20px 0;
color: #ff8800;
}

.center {
clear: both;
margin: 20px 0;
text-align: center;
}

.h4center {
clear: both;
border-bottom: solid 20px #fff;
text-align: center;
}

/* ------------------------------------------------------------------ */
/* d. Localnavi Section
/* ------------------------------------------------------------------ */

#localnavi {
width: 960px;
margin: 20px auto;
}

#localnavi ul li a {
width: 210px;
margin: 0 10px;
display: inline-block;
float: left;
color: #fff;
text-align: center;
background: #ff8800;
border-radius: 5px;
padding: 10px 20px;
}

/* ------------------------------------------------------------------ */
/* global_bnr
/* ------------------------------------------------------------------ */

#global_bnr {
clear:both;
width: 680px;
margin: 10px auto;
}

#global_bnr li {
float: left;
margin: 0 10px 20px;
}

#global_bnr li:nth-of-type(2) {
margin-right: 0px;
}

#global_bnr li img {
width: 320px;
}

.link {
text-align: center;
clear: both;
width: 100%;
}

.link h4 {
margin-bottom: 10px;
}

.link p {
margin-bottom: 20px;
}

.link a {
width: 320px;
display: block;
margin: 0 auto;
}

#btt {
text-align: center;
}

/* ------------------------------------------------------------------ */
/* Footer
/* ------------------------------------------------------------------ */

footer {
width: 1000px;
margin: 10px auto 0;
text-align: center;
padding: 35px 0 70px;
font-size: 18px;
border-top: dashed 2px #333;
}

footer .footerlogo img {
float: left;
position: relative;
top: -15px;
width: 250px;
height: 60px;
}

/* copyright */
footer .copyright {
float: right;
}


/* ------------------------------------------------------------------ */
/* data
/* ------------------------------------------------------------------ */

#data{
margin: 0 auto;
padding: 0;
width: 760px;
text-align: center;
}

/* ページ全体（ファーストビュー） */
#data .firstview {
  width: 100%;
  height: 100dvh; /* アドレスバーの高さ変動に対応 */
  display: flex;
  justify-content: center; /* 横方向の中央揃え */
  align-items: center;     /* 縦方向の中央揃え */
  overflow: hidden;            /* はみ出し保険 */
  padding-top: 1em; /* 親にパディングを入れる */
}

/* ロゴ画像 */
#data .firstview h1 {
  max-width: 100%;  /* スマホ画面でのはみ出し防止 */
  height: auto;
  max-width: 100vw;             /* 縦向きは幅基準で縮む */
  max-height: 100vh;            /* どちら向きでも縦に収める上限 */
  display: block;
}

/* 横向き（ランドスケープ）用：縦に合わせる */
@media (orientation: landscape) {
#data .firstview h1 {
  max-width: 90vh;            /* どちら向きでも縦に収める上限 */
  }
}

#data h2 {
display: block;
width: 100%;
font-weight: normal;
font-size: 36px;
line-height: 1.2;
padding: 53px;
height: fit-content;
text-align: left;
color: #ff8800;
border-bottom: solid 1px #ff8800;
}

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

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

#data h4{
clear: both;
font-weight: bold;
color: #ff8800;
}

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

#data .number p{
position: absolute;
top :-10px;
}

#data span {
color:#ff8800;
}

#data table{
margin: 40px auto;
width: 80%;
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;
border-radius: 50%;
}

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

#data section{
margin: 0 0 80px;
padding: 0 0 50px;
border: solid 1px #ff8800;
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;
}

/* key */

#data #key .keyvisual {
position: fixed;
top: -12px;
left: 0px;
width: 100%;
height: 100vh;
z-index: -1;
opacity: 0.4;
}

#data #key .keyvisual li {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
background-image: url(../images/data/10thbg.png);
}

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

#data .fukidashi {
position: relative;
top: 120px;
right: -200px;
vertical-align: middle;
float: left;
padding: 60px 0;
display: inline-block;
width: fit-content;
width: 150px;
height: 150px;
background: #ff8800;
border-radius: 50%;
color: #fff;
}

#data .fukidashi:before {
content: "";
position: absolute;
top: 50%;
right: -24px;
margin-top: -15px;
border: 15px solid transparent;
border-left: 15px solid #ff8800;
z-index: 0;
}

#data .scroll {
position: relative;
left: -80px;
margin: 50px 0;
}

#data .scroll img {
width: 50px;
}

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

#data iframe{
width: 660px;
height: 373px;
margin: 50px auto 0;
border: solid 1px #fff;
}

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

/* tabChange */

#data #tabChange{
width: 650px;
}

#data #tabChange ul{
margin-bottom: 12px !important;
}

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

#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;
}

#data footer {
width: 100%;
margin: 20px auto;
text-align: center;
border: none;
}

/* screenwidth less than or equal 667px - mobile wide
-------------------------------------------------------------------------- */
@media only screen and (max-width: 667px) {
	
#data{
width: 95%;
}
	
#data h2 {
font-size: 35px;
padding: 54px;
}

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

#data .fukidashi {
right: -120px;
}
	
#data #tabChange{
width: 90%;
}

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

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

#data {
font-size: 16px;
}

#data h2 {
font-size: 22px;
padding: 27px;
}

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

#data table{
width: 90%;
}

#data table th{
padding: 10px;
}

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

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

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

#data section{
margin: 0 0 80px;
padding: 0 0 10px;
border: solid 1px #ff8800;
background: #fff;
}

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

#data .img img {
width: 160px;
margin-top: 40px;
}

#data .fukidashi {
top: 160px;
right: -30px;
padding: 50px 0;
width: 120px;
height: 120px;
}

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

#data p{
width: 90%;
}

#data iframe{
margin: 20px auto 0;
width: 90%;
height: 199px;
}

#data .button{
width: 90%;
}

#data #tabChange{
width: 90%;
}

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

#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 h3{
font-size: 20px;
padding: 30px 0 0 0;
}

#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{
font-size: 14px;
}

#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: 12px;
}

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

#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;
}

}