/**
 * カスタムスタイル (custom.css)
 * このファイルはWordPressの標準要素のカスタマイズや、
 * サイト全体で使用される共通UIコンポーネントのスタイルを定義します。
 * 特定のページに依存しない共通要素のみを含みます。
 */

/*--------------------------------------------------------------
# WordPressコア要素のカスタマイズ
--------------------------------------------------------------*/

/* 管理バー調整 */
body.admin-bar {
  padding-top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar {
    padding-top: 46px;
  }
}

/* エントリーコンテンツ */
.entry-content {
  line-height: 1.8;
}
.entry-content h1, 
.entry-content h2, 
.entry-content h3, 
.entry-content h4, 
.entry-content h5, 
.entry-content h6 {
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  line-height: 1.4;
}
.entry-content p {
  margin-bottom: 1.5em;
}
.entry-content ul,
.entry-content ol {
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}
.entry-content ul li {
  list-style: disc outside;
}
.entry-content ol li {
  list-style: decimal outside;
}
.entry-content img {
  max-width: 100%;
  height: auto;
}
.entry-content table {
  width: 100%;
  border-collapse: collapse;
}
.entry-content table th,
.entry-content table td {
  padding: 10px;
  border: 1px solid #ddd;
}
.entry-content table th {
  background-color: #f5f5f5;
}

/*--------------------------------------------------------------
# 共通UIコンポーネント
--------------------------------------------------------------*/

/* メインビジュアルスライダー */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  max-width: 1000px;
}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
}

/* コンテンツエリア */
#contents {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* innerクラスはcontactInnerなどのページ固有クラスが優先されるように低い優先度に設定 */
#contents .inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ギャラリー */
.gallery {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px 1.5em;
}
.gallery-item {
  padding: 5px;
  text-align: center;
}
.gallery-columns-1 .gallery-item {
  width: 100%;
}
.gallery-columns-2 .gallery-item {
  width: 50%;
}
.gallery-columns-3 .gallery-item {
  width: 33.333%;
}
.gallery-columns-4 .gallery-item {
  width: 25%;
}
.gallery-columns-5 .gallery-item {
  width: 20%;
}
.gallery-item img {
  width: 100%;
  height: auto;
  border: 1px solid #ddd;
  padding: 5px;
}

/* アライメント */
.alignleft {
  float: left;
  margin: 0 20px 20px 0;
}
.alignright {
  float: right;
  margin: 0 0 20px 20px;
}
.aligncenter {
  display: block;
  margin: 0 auto 20px;
}

/* キャプション */
.wp-caption {
  max-width: 100%;
  margin-bottom: 1.5em;
}
.wp-caption img {
  display: block;
  width: 100%;
  height: auto;
}
.wp-caption-text {
  margin: 5px 0 0;
  font-size: 0.9em;
  text-align: center;
  color: #666;
}

/* ページネーション */
.pagination,
.nav-links {
  clear: both;
  padding: 20px 0;
  text-align: center;
  position: relative;
  font-size: 14px;
  line-height: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-numbers,
.pagination a, 
.pagination span,
.pagination .page-numbers {
  display: inline-block;
  margin: 0 5px;
  padding: 10px 12px;
  background: #fff;
  color: #655346;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.page-numbers.current,
.pagination .current,
.pagination .page-numbers.current {
  background: #f0a732;
  color: #fff;
  border-color: #f0a732;
}

.page-numbers:hover,
.pagination a:hover,
.pagination .page-numbers:hover {
  background: #f8f8f8;
}

/*--------------------------------------------------------------
# コメント関連
--------------------------------------------------------------*/
.comment-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.comment {
  margin-bottom: 20px;
  padding: 15px;
  background: #f9f9f9;
  border: 1px solid #eee;
}
.comment-author {
  margin-bottom: 10px;
}
.comment-author img {
  float: left;
  margin-right: 10px;
  border-radius: 50%;
}
.comment-metadata {
  font-size: 0.9em;
  margin-bottom: 10px;
  color: #666;
}
.comment-content {
  clear: both;
}
.comment-respond {
  margin-top: 20px;
}
.comment-form label {
  display: block;
  margin-bottom: 5px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
}
.comment-form textarea {
  height: 150px;
}
.comment-form input[type="submit"] {
  padding: 10px 20px;
  background: #655346;
  color: #fff;
  border: none;
  cursor: pointer;
}
.comment-form input[type="submit"]:hover {
  background: #534538;
}

/*--------------------------------------------------------------
# お知らせセクション
--------------------------------------------------------------*/
.news-section {
  margin-top: 30px;
  margin-bottom: 30px;
}

.news-section .headline {
  margin-bottom: 20px;
  text-align: center;
  font-size: 24px;
  color: #67534d;
}

.news-list {
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
  background: #fff;
}

.news-item {
  padding: 10px 0;
  border-bottom: 1px dotted #ccc;
}

.news-item:last-child {
  border-bottom: none;
}

.news-item a {
  display: flex;
  align-items: center;
  color: #333;
  text-decoration: none;
}

.news-item a:hover {
  opacity: 0.7;
}

.news-item time {
  min-width: 90px;
  color: #766659;
  font-weight: bold;
}

.news-item h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.more-link {
  text-align: right;
}

.more-link a {
  display: inline-block;
  padding: 5px 15px;
  background: #f0a732;
  color: #fff;
  text-decoration: none;
  border-radius: 3px;
}

/*--------------------------------------------------------------
# イベントリスト
--------------------------------------------------------------*/
.event-list {
  margin-top: 30px;
}
.event-list article {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #ddd;
}
.event-list article:last-child {
  border-bottom: none;
}
.event-title {
  margin-bottom: 15px;
  font-size: 20px;
  color: #655346;
}
.event-thumbnail {
  margin-bottom: 15px;
}
.event-content {
  line-height: 1.8;
}

/*--------------------------------------------------------------
# フォーム要素
--------------------------------------------------------------*/
/* お問い合わせフォーム */
.wpcf7-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
}
.wpcf7-form textarea {
  height: 150px;
}
.wpcf7-form input[type="submit"] {
  padding: 10px 30px;
  background: #655346;
  color: #fff;
  border: none;
  cursor: pointer;
}
.wpcf7-form input[type="submit"]:hover {
  background: #534538;
}
.wpcf7-not-valid-tip {
  color: #f00;
  font-size: 0.9em;
  margin-top: 5px;
}
.wpcf7-response-output {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
}
.wpcf7-validation-errors {
  background: #fff3f3;
  border-color: #f00;
  color: #f00;
}
.wpcf7-mail-sent-ok {
  background: #f3fff3;
  border-color: #090;
  color: #090;
}

/* 検索フォーム */
.search-form {
  margin-bottom: 30px;
}
.search-form-inner {
  display: flex;
  max-width: 500px;
}
.search-field {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-right: none;
}
.search-submit {
  padding: 10px 20px;
  background-color: #655346;
  color: #fff;
  border: none;
  cursor: pointer;
}
.search-submit:hover {
  background-color: #534538;
}
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/*--------------------------------------------------------------
# 検索結果ページ
--------------------------------------------------------------*/
.search-results-count {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}
.search-item {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
}
.search-item:last-child {
  border-bottom: none;
}
.search-item .entry-title {
  margin-bottom: 10px;
}
.search-item .date {
  color: #666;
  margin-bottom: 10px;
}
.search-item .entry-thumbnail {
  float: left;
  margin: 0 20px 10px 0;
  max-width: 150px;
}
.no-results {
  padding: 30px 0;
}

/*--------------------------------------------------------------
# エラーページ
--------------------------------------------------------------*/
/* 404ページ */
.error-404 {
  padding: 30px 0;
}

/*--------------------------------------------------------------
# サイトマップ
--------------------------------------------------------------*/
.sitemap {
  margin-top: 30px;
}
.sitemap h3 {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}
.sitemap-section {
  margin-bottom: 30px;
}
.sitemap-section h4 {
  margin-bottom: 15px;
  color: #655346;
}
.sitemap-section ul {
  margin-left: 20px;
}
.sitemap-section li {
  margin-bottom: 10px;
}

/*--------------------------------------------------------------
# ページ固有スタイル
--------------------------------------------------------------*/
/* イベントページ */
.event-page .event-list {
  margin-top: 40px;
}
.event-page .event-title {
  font-size: 22px;
  color: #655346;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #ccc;
}

/* 園の概要ページ */
.overview-page h3:not(.secHd) {
  color: #655346;
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #ccc;
}
.overview-page table {
  width: 100%;
  margin: 20px 0;
  border-collapse: collapse;
}
.overview-page th {
  width: 25%;
  background: #f5f5f5;
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}
.overview-page td {
  padding: 10px;
  border: 1px solid #ddd;
}

/* 1日の流れページ */
.schedule-page .time-table {
  width: 100%;
  margin: 20px 0;
  border-collapse: collapse;
}
.schedule-page .time-table th {
  width: 20%;
  background: #f5f5f5;
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
}
.schedule-page .time-table td {
  padding: 10px;
  border: 1px solid #ddd;
}
.schedule-page .note {
  font-size: 0.9em;
  color: #666;
  margin-top: 10px;
}

/* 情報公開ページ */
.disclosure-page .document-list {
  margin: 20px 0;
}
.disclosure-page .document-list dt {
  font-weight: bold;
  margin-top: 15px;
}
.disclosure-page .document-list dd {
  margin-left: 20px;
  margin-bottom: 10px;
}
.disclosure-page .pdf-link {
  display: inline-block;
  padding: 5px 10px;
  background: #f5f5f5;
  color: #333;
  text-decoration: none;
  border-radius: 3px;
  margin-top: 5px;
}
.disclosure-page .pdf-link:hover {
  background: #e5e5e5;
}

/*--------------------------------------------------------------
# ナビゲーションと共通UI要素
--------------------------------------------------------------*/

/* PCナビゲーション */
#pcNavi ul.clearfix,
#gNavi ul.clearfix {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

#pcNavi ul.clearfix li,
#gNavi ul.clearfix li {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* モバイルメニューのスタイル */
@media screen and (max-width: 560px) {
  #gNavi ul.clearfix {
    display: block;
    flex-direction: column;
  }
  
  #gNavi ul.clearfix li {
    width: 100%;
    display: block;
  }
  
  #gNavi ul.clearfix li a {
    padding: 0;
    color: #fff;
    line-height: 40px;
  }
}

body:not(.admin-bar) {
  padding-top: 58px;
}

@media screen and (max-width: 560px) {
  body:not(.admin-bar) {
    padding-top: 25px;
  }
}

.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

#hdLogo img {
  max-width: 100%;
  height: auto;
}

#pcNavi ul.clearfix li a,
#gNavi ul.clearfix li a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  color: #5F4B3B;
  position: relative;
}

#pcNavi ul.clearfix {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1000px;
  flex-wrap: wrap;
}

#pcNavi ul.clearfix li {
  position: relative;
  margin: 0;
  padding: 0;
}

#pcNavi ul.clearfix li a {
  display: block;
  padding: 0px 20px 12px 35px;
  text-decoration: none;
  color: #5F4B3B;
  font-size: 159%;
  line-height: normal;
  height: auto;
  position: relative;
  transition: all 0.3s ease;
}

#pcNavi ul.clearfix li a:hover,
#pcNavi ul.clearfix li a.selected {
  color: #5F4B3B;
}

#pcNavi ul.clearfix li a:before {
  content: "";
  display: block;
  width: 0%;
  height: 5px;
  background: url(../img/bdr-navi-over.png) no-repeat 0 0 / contain;
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  transition: all 0.3s ease;
}

#pcNavi ul.clearfix li a:hover:before,
#pcNavi ul.clearfix li a.selected:before {
  width: 100%;
  opacity: 1;
}

#pcNavi ul.clearfix li.home a {
  width: 102px;
  padding: 0;
  border-radius: 5px;
  background: #5F4B3B;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

#pcNavi ul.clearfix li.home a:before {
  display: none;
}

@media screen and (max-width: 788px) {
  #pcNavi ul.clearfix {
    max-width: 100%;
  }
  #pcNavi ul.clearfix li {
    text-align: center;
  }
}

@media screen and (max-width: 560px) {
  #pcNavi {
    display: none;
  }
}

/* フッターナビゲーション */
#ftNavi ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

#ftNavi li {
  padding: 0;
  margin-bottom: 1px;
}

#ftNavi li a {
  display: block;
  text-decoration: none;
  color: #5F4B3B;
  padding: 0 10px 0 27px;
  font-size: 117%;
}

#ftNavi li a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 560px) {
  #ftNavi ul {
    flex-direction: column;
    text-align: center;
  }
  #ftNavi li {
    margin-bottom: 1px;
    padding: 0;
  }
  #ftNavi li a {
    font-size: 109%;
  }
}

/*--------------------------------------------------------------
# トップページ要素
--------------------------------------------------------------*/
/* トップページのセクション設定 */
.home section.inner {
  padding: 50px 0;
  margin: 0 auto;
  max-width: 1000px;
  text-align: center;
}

.home section.inner:last-child {
  padding-bottom: 100px;
}

.home .headline {
  margin-bottom: 30px;
}

.home .headline img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

.headline {
  margin-bottom: 30px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #654538;
}

@media screen and (max-width: 768px) {
  .home section.inner {
    padding: 30px 15px;
  }
  .headline {
    font-size: 20px;
    margin-bottom: 20px;
  }
}

/* コンテンツテキスト設定 */
.txt {
  font-size: 117%;
  line-height: 2;
  text-align: center;
  color: #000;
  margin-bottom: 30px;
}

.txt br.sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .txt {
    font-size: 109%;
    line-height: 1.8;
    text-align: left;
  }
  .txt br.sp {
    display: block;
  }
}

@media screen and (max-width: 560px) {
  .tel-link {
    text-decoration: underline;
    color: #0000ff;
  }
}

/* Googleマップ */
#gmap {
  height: 400px;
  width: 100%;
}

/* 現在のメニュー項目ハイライト */
#pcNavi .current-menu-item a,
#gNavi .current-menu-item a {
  color: #5F4B3B;
}

#pcNavi .current-menu-item a:before,
#gNavi .current-menu-item a:before {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  background: url(../img/bdr-navi-over.png) no-repeat 0 0 / contain;
  position: absolute;
  left: 0;
  bottom: 0;
}

#pcNavi .current-menu-item.home a:before,
#gNavi .current-menu-item.home a:before {
  background-image: url(../img/bdr-home-over.png);
}

/* メニューリスト（フロントページ）のスタイル調整 */
/* #menuList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  margin: 30px 0;
  padding: 0;
}

#menuList li {
  width: 24%;
  margin-bottom: 20px;
}

#menuList li img {
  max-width: 100%;
  height: auto;
  transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
  #menuList li {
    width: 48%;
  }
}

@media screen and (max-width: 480px) {
  #menuList {
    justify-content: center;
  }
  #menuList li {
    width: 100%;
  }
} */

/* モバイルメニューのスタイル（最終上書き） */
@media screen and (max-width: 560px) {
  #gNavi ul.clearfix {
    display: block;
    flex-direction: column;
  }
  
  #gNavi ul.clearfix li {
    width: 100%;
    display: block;
  }
  
  #gNavi ul.clearfix li a {
    padding: 0;
    color: #fff;
    line-height: 40px;
  }
  
  #gNavi ul.clearfix li a:hover {
    color: #F7C7D1;
  }
}

@media screen and (max-width: 788px) {
  /* タブレット版（750px以下）向けのヘッダーメニュー調整 */
  body:not(.page-recruit) #pcNavi ul.clearfix li a {
    font-size: 125%;
    padding: 3px 10px 12px 30px;
  }
}