@charset "UTF-8";
/* CSS Document */

.lead{ margin: 0;  padding: 0; background: url("img/bg01.jpg") no-repeat center top / cover;}
.lead .mb{ display: flex; justify-content:space-between; align-items: center; width: 800px;}
.lead figure{ margin: 0; flex: 0 0 50%;}
.lead .text{ margin: 0; flex: 45%; text-align: center; color: #754F38;}
.lead .text h1{ margin: 0;  font-size: 300%; letter-spacing: 0.1em; line-height: 1.5; font-weight: bold;}
.lead .text p{ font-size: 108%; font-weight: bold;}
@media screen and ( max-width: 480px ) {
  .lead .mb{ display: block; width: auto;}
}

.billboard{ margin:0 0 3.0em 0; padding: 0;}
.billboard .slides{ margin:2.0em auto 0 auto; padding: 0;}
.billboard .slides *{ margin-top: 0;}
.billboard .slides article{ display: block; width: 600px;}
.billboard .slides figure{ display: block; margin: 0 1.0em; padding: 66.66% 0 0 0; background: no-repeat center center / cover; border-radius: 1.0em; overflow: hidden; position: relative;}
.billboard .slides article h3{ display: block; position: absolute; top: 0; left: 0; background: rgba(245,162,0,0.7); color: #FFFFFF; font-size: 136%; padding: 0.3em 1.0em; line-height: 1.3; border-radius: 0 0 0.5em 0;}
.billboard .slides article p{ display: block; position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.5); color: #FFFFFF; line-height: 1.5; padding: 1.0em; text-align: left; font-size: 86%;}
@media screen and ( max-width: 480px ) {
  .billboard .slides article{ width:375px; height: auto;}
  .billboard .slides article p{ font-size: 86%;}
}

.event{}
.event h2{ text-align:center; display: flex; justify-content: center; align-content: center; color: #754F38; font-size: 150%;}
.event h2 span{ margin: 0 1.0em; font-weight: bold;}
.event ul{ width: 800px; margin: 2.0em auto 0 auto;}
.event ul *{ margin-top: 0;}
.event ul li{ display: flex; padding: 1.0em 0; align-items:flex-start; position: relative; background: url("img/event-border.png") no-repeat center bottom / contain; line-height: 1.5;}
.event ul li p{ flex: 0 0 100px; background: #F5A200; color: #FFFFFF; text-align: center; border-radius: 0.5em; font-size: 86%;}
.event ul li p[data-category="動物関連"]{ background: #00BCFF;}
.event ul li p[data-category="会員限定"]{ background: #5AC649;}
.event ul li p[data-category="20周年"]{ background: #F5A200; color: #FFFFFF;}
.event ul li h3{ margin: 0 0 0 1.5em; /*white-space: nowrap; overflow: hidden; text-overflow: ellipsis;*/}
.event ul li h3 a:hover{ text-decoration: underline;}
.event nav{ text-align: center; margin: 2.0em 0 0 0;}
@media screen and ( max-width: 480px ) {
  .event .mb{ padding: 0;}
  .event ul{ width: auto; margin: 1.0em 0 0 0;}
  .event ul li p{ width: fit-content; padding: 0.1em 1.0em;}
  .event ul li{ display: block;}
  .event ul li h3{ margin: 0.5em 0 0 0;}
}


.content{}
.content article{}
.content a{ display: block; width: 100%; position: relative;}
.content a.disabled{ filter:grayscale(100%); opacity: 0.7;}
.content figure{ display: block; position: relative; margin:0 auto; width: 95%; padding: 0; padding: 95% 0 0 0; background: no-repeat center center / cover; border-radius: 50%; box-shadow: 0 0 0 6px #FFFFFF inset, 0 0 0 1px #CCCCCC;}
.content h3{ text-align: center; color: #754F38; line-height: 1.5; font-size: 150%; font-weight: bold; height: 3.0em; display: flex; align-items: center; justify-content: center;}
.content p{ text-align: center; line-height: 1.5;}
@media screen and ( max-width: 480px ) {
  .content article{ margin:2.0em 0 0 0;}
  .content h3{ margin: 0.5em 0 0 0; line-height: 1.3;}
  .content p{ margin: 0;}
  .content p br{ display: none;}
}

.content_flex{ display: flex; justify-content: center; flex-wrap: wrap;}
.content_flex article{ flex: 0 0 27%; padding: 0 10px;}

@media screen and ( max-width: 480px ) {
  .content_flex article{ flex: 0 0 49%;}
}