@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1023px以下*/
@media screen and (max-width: 1023px) {

  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px) {

  /*必要ならばここにコードを書く*/
  /* モバイルでもフッターウェジェットを表示する */
  .footer-widgets {
    display: block;
  }
}

/*480px以下*/
@media screen and (max-width: 480px) {

  /*必要ならばここにコードを書く*/
}

/* 
* 共通
*/
.text-center {
  text-align: center;
}

/* margin-bottom0 */
p.margin-bottom0 {
  margin-bottom: 0;
}

/* インデント4文字 */
p.indent4 {
  padding-left: 4em;
  text-indent: -4em;
}

/* 
* 背景のグラデーション
*/
.content {
  background: -webkit-linear-gradient(to bottom,
      rgb(229, 245, 247) 0%,
      rgb(253, 175, 87) 75%,
      rgb(9, 88, 168) 100%);
  background: linear-gradient(to bottom,
      rgb(229, 245, 247) 0%,
      rgb(253, 175, 87) 75%,
      rgb(9, 88, 168) 100%);
}

/* 
* ヘッダーロゴの調整
*/
.logo-image {
  padding-bottom: 0;
}

/* 
* ヘッダーメニューホバー時の色
*/
#navi .navi-in a:hover {
  background-color: rgb(251, 251, 126);
  color: #ff7272;
  transform: scale(1.2);
}

/* 
* ヘッダーロゴ左寄せ
*/
.logo {
  text-align: left;
}

/* 
* ヘッダーロゴの反対側に問い合わせボタン表示
*/
div#header-in {
  flex-direction: row;
}

.header-in .logo-header {
  margin-right: auto;
}

.header-contact {
  padding-top: 15px;
}

@media screen and (max-width: 480px) {
  .header-contact a.btn {
    padding: 14px 20px;
    font-size: 16px;
  }
}

/* 
* ヘッダーのテキストのフォント
*/
.site-name {
  font-family: 'M PLUS 1p';
}

/* 
* ヘッダーの現在のページのデザインを変える
*/
#navi .current_page_item {
  background-color: rgb(251, 251, 126);
  color: #ff7272;
  /* transform: scale(1.2); */
}

/*
* 固定ページの投稿日、更新日を非表示
*/
.page .date-tags {
  display: none;
}

/*
* ヘッダーのロゴの後にテキストを表示
*/
.logo-header .site-name::after {
  content: 'くれよん会';
  font-size: 40px;
  margin-top: 10px;
  position: absolute;
}

/*
* ホームの固定ページ用の設定
*/
.page-id-2 .entry-title {
  display: none;
}

.page-id-2 .post ul {
  padding: 0px;
}

.page-id-2 .article .slide-items {
  padding: 0px;
}

.page-id-2 .slide-items {
  max-width: 100vw;
  max-height: 80vh;
}

.page-id-2 .slide-items img {
  margin-left: auto;
  margin-right: auto;
  width: 100vw;
  height: 60vh;
  object-fit: cover;
}

.page-id-2 .article .slide-items {
  padding: 0px;
  max-width: 100vw;
  max-height: 80vh;
  object-fit: cover;
}

.page-id-2 iframe#twitter-widget-0,
.page-id-2 iframe.facebook-timeline {
  height: 500px;
}

/*
* お知らせの記事には関連記事を表示させない
*/
.single-news #related-entries {
  display: none;
}

/*
* slick-sliderの戻るボタンの表示
*/
.slick-prev {
  z-index: 10;
}

/************************************
** 画像を親要素を無視して横いっぱいに広げる
************************************/
.page-id-2 .slick-list {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}

/************************************
** お知らせ一覧、イベント一覧に投稿日を表示（更新日は非表示）
************************************/
.page-id-2 .colum-center .new-entry-card-thumb.widget-entry-card-thumb.card-thumb {
  display: none;
}

.page-id-2 .colum-center .new-entry-card-content.widget-entry-card-content.card-content {
  margin-left: 0;
}

/************************************
** 新着記事のサムネイル画像の大きさ変更
************************************/
.page-id-2 .is-list-horizontal.large-thumb .widget-entry-card-link,
.page-id-2 .is-list-horizontal.large-thumb-on .widget-entry-card-link {
  max-width: 400px;
}

/************************************
** twitterなどの3カラム部分をレスポンシブの際に順番を変える（3カラムから1カラムになるとき）
************************************/
@media (max-width: 781px) {
  .page-id-2 .colum-left {
    order: 2;
  }

  .page-id-2 iframe#twitter-widget-0,
  .page-id-2 iframe.facebook-timeline {
    height: 300px !important;
  }

  .page-id-2 .colum-center {
    order: 1;
  }

  .page-id-2 .colum-right {
    order: 3;
  }
}


.page-id-2 .new-entry-card-date {
  display: block;
}

.page-id-2 .new-entry-card-date .new-entry-card-update-date {
  display: none;
}

/************************************
** 新着記事の戻るボタンの表示
************************************/
.page-id-2 .is-list-horizontal .swiper-button-prev {
  display: flex;
}

/**********************************************
** 新着記事一覧(new_list)を3カラム表示にする（ブログの新着記事ブロックのみに適用）
** ２列表示にしてスクロール
**********************************************/
.page-id-2 .blog-new-entry-cards {
  height: 500px;
  overflow-y: scroll;
  background: #f0f0f0;
}

.page-id-2 .blog-new-entry-cards .new-entry-cards {
  display: flex;
  flex-wrap: wrap;
}

.page-id-2 .blog-new-entry-cards .new-entry-card-link {
  width: 33%;
}

.page-id-2 .blog-new-entry-cards .widget-entry-cards .a-wrap {
  margin-bottom: 30px;
}

@media (max-width: 781px) {
  .page-id-2 .blog-new-entry-cards .new-entry-card-link {
    width: 100%;
  }

  .page-id-2 .blog-new-entry-cards {
    height: 300px;
  }

  .page-id-2 .blog-new-entry-cards .widget-entry-cards .a-wrap {
    margin-bottom: 10px;
  }
}

/* ヒストリーページのトグルの＋ボタンの配置 */
.page-id-241 .toggle-button-programming strong,
.page-id-241 .toggle-button-christmas strong,
.page-id-241 .toggle-button-bowling strong,
.page-id-241 .toggle-button-sportsday strong,
.page-id-241 .toggle-button-Farming strong,
.page-id-241 .toggle-button-flowerbed strong {
  width: min(100%, 200px);
  display: inline-block;
}

.page-id-241 .toggle-button-programming-1 strong {
  width: min(100%, 600px);
}

.page-id-241 .toggle-button-programming-2021-1 strong {
  width: min(100%, 270px);
}

/*599px以下*/
@media screen and (max-width: 599px) {
  .page-id-241 .toggle-button-programming-1 strong {
    display: inline;
  }
}

/*
* 問い合わせページの送信ボタンのレイアウト
*/
.wpcf7 .wpcf7-submit {
  width: 50%;
  padding: 10px;
  border-radius: 10px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border: none;
  box-shadow: 0 6px 2 #ddd;
  background: #ff0000;
  color: #ffffff;
  transition: 0.6s;
  font-size: 35px;
}

/* 送信ボタンの横のスピナーの配置を下にし、送信ボタンが中央になるようにする */
div.wpcf7 .wpcf7-spinner {
  display: block;
}

/*
* お知らせ、イベント一覧ショートコード用
*/
.news-list .news-list-inner,
.events-list .events-list-inner {
  padding: 20px 5px;
  border: 2px solid #f5f5f5;
}

.archive .news-list .news-list-inner,
.archive .events-list .events-list-inner {
  background: #fff;
  padding: 20px;
}

.news-list ul,
.events-list ul {
  list-style: none;
  margin: 0 0 20px;
}

.news-list li,
.events-list li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.news-list a,
.events-list a {
  color: #333;
  text-decoration-line: none;
}

.news-list a:hover,
.events-list a:hover {
  opacity: 0.6;
}

.news-list a.wp-block-button__link,
.events-list a.wp-block-button__link {
  color: #fff;
}

.news-list a.wp-block-button__link:hover,
.events-list a.wp-block-button__link:hover {
  color: #F87474;
}

.news-list .news_date,
.events-list .events_date {
  margin: 0;
  font-size: 14px;
}

.news-list .news_title,
.events-list .events_title {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 
* SNSアイコンデフォルトデザイン
*/
.follow-me {
  list-style: none;
  margin: 0 0 -8px;
  overflow: hidden;
  padding: 0;
}

.follow-me li {
  float: left;
  margin: 0 8px 8px 0;
  padding: 0;
}

.follow-me li a::before {
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  font-family: FontAwesome;
  font-size: 16px;
  height: 42px;
  /* Button height */
  line-height: 42px;
  /* Button height */
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  text-align: center;
  width: 42px;
  /* Button width */
}

.follow-me li a[href*="facebook.com"]::before {
  border-color: #3b5998;
  background-color: #3b5998;
  content: "\f09a";
}

.follow-me li a[href*="instagram.com"]::before {
  color: #fff;
  background: radial-gradient(at 20% 120%, orange, #f15a4d 25%, #f13f79 55%, #9933ff 100%) no-repeat;
  border-radius: 20%;
  content: "\f16d";
}

.follow-me li a[href*="twitter.com"]::before {
  border-color: #55acee;
  background-color: #55acee;
  content: "\f099";
}

.follow-me li a[href*="youtube.com"]::before {
  border-color: #cd201f;
  background-color: #cd201f;
  content: "\f16a";
}


.follow-me li a:hover::before {
  background-color: #fff;
}

.follow-me li a[href*="facebook.com"]:hover::before {
  color: #3b5998;
}

.follow-me li a[href*="instagram.com"]:hover::before {
  background: #fff;
  color: #125688;
}

.follow-me li a[href*="twitter.com"]:hover::before {
  color: #55acee;
}

.follow-me li a[href*="youtube.com"]:hover::before {
  color: #cd201f;
}