@charset "UTF-8";

/*!
Theme Name: friends
Description: friends
Author URI: https://nelog.jp/
Template:   cocoon

*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 18px;
  color: #333;
  line-height: 1.8;
  margin: 0;
  overflow-x: hidden;
  overflow-wrap: break-word;
  background-color: #fff;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  background-attachment: fixed;
}

ul {
  list-style-type: disc;
  padding: 0;
}

.fw-400 {
  font-weight: 500;
}

.fz-18px {
  font-size: inherit;
}

.eye-catch,
.ect-vertical-card .entry-card-wrap .entry-card-thumb {
  width: 100%;
}

.eye-catch img {
  height: 300px;
  width: 100%;
  object-fit: cover;
}

.ect-vertical-card .entry-card-wrap .entry-card-thumb img {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

.type-post,
.under-entry-content,
.breadcrumb,
#sidebar,
#archive-title,
.list,
.search-box,
.pagination-next,
.pagination {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

.pagination {
  margin: 24px auto;
  text-align: center;
  max-width: inherit;
}

.fa-folder-open:before {
  content: "";
}

.entry-card .admin-pv {
  display: none;
}

.ect-vertical-card.ect-tile-card .entry-card-content {
  min-height: 150px;
}

.open header.article-header,
.open header.category-header {
  position: inherit;
}

.entry-content img {
  width: 100%;
}

.breadcrumb-page {
  width: 100%;
  margin: 0 auto;
  padding: 0 30px;
  max-width: inherit;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
  /*必要ならばここにコードを書く*/
}

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

  /*必要ならばここにコードを書く*/
  .ect-vertical-card .entry-card-wrap .entry-card-thumb img {
    height: 160px;
  }

  .ect-vertical-card.ect-tile-card .entry-card-content {
    min-height: 90px;
  }

  #breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }

  .breadcrumb div {
    display: flex;
    align-items: center;
  }

  .eye-catch img {
    height: 175px;
    width: 100%;
    object-fit: cover;
  }

  /*news_list*/
  /*------------------------------------------------------------------------------*/
  .news_list {
    overflow: scroll;
    white-space: nowrap;
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  .news_item {
    width: 320px !important;
    white-space: normal;
  }

  .news_text {
    width: 320px;
    padding: 0 10px;
  }

  .news_img img {
    height: 150px;
    object-fit: cover;
    width: 90%;
  }

  .news_title p {
    white-space: normal;
  }

  .news_item:nth-of-type(3n) {
    margin: 0;
  }

}

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

  /*必要ならばここにコードを書く*/
  .ect-vertical-card .entry-card-wrap .entry-card-thumb img {
    height: 140px;
  }

  .ect-vertical-card.ect-tile-card .entry-card-content {
    min-height: 60px;
  }

  .breadcrumb div {
    font-size: 10px;
  }
}

/* スライダー用CSS */
.slideshow1 {
  display: flex;
  margin: 0 calc(50% - 50vw) 50px;
  width: 100vw;
  height: 370px;
  /* 高さを変更 */
  overflow: hidden;
}

.slideshow1 ul {
  display: flex;
  padding: 10px 0 10px;
  margin: 0;
}

.slideshow1 li {
  width: 500px;
  /* 横幅を変更 */
  list-style: none;
  transition: all 0.2s;
}

.slideshow1 li:hover {
  transform: translateY(-5px);
  box-shadow: 0 3px 10px 0 #333;
  opacity: 0.8;
  cursor: pointer;
}

.slideshow1 ul:first-child {
  animation: slideshow1 60s -30s linear infinite;
}

.slideshow1 ul:last-child {
  animation: slideshow2 60s linear infinite;
}

@keyframes slideshow1 {
  0% {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes slideshow2 {
  0% {
    transform: translateX(0);
  }

  to {
    transform: translateX(-200%);
  }
}

/* お問い合わせ
--------------------------------------------- */
table.CF7_table {
  width: 100%;
  margin: 0 auto;
  border: 3px solid #e5e5e5;
}

table.CF7_table tr {
  border-top: 1px solid #e5e5e5;
}

table.CF7_table td {
  padding: 2%;
}

.checkbox-list {
  padding-top: 3%;
  padding-bottom: 2%;
}

.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table {
  display: table;
}

/*入力欄*/
.CF7_table input,
.CF7_table textarea {
  border: 1px solid #d8d8d8;
}

.CF7_table ::placeholder {
  color: #797979;
}

/*「必須」文字*/
.CF7_req {
  font-size: .9em;
  padding: 5px;
  color: #ec7293;
  /*ピンク*/
  background: #fff;
  border-radius: 3px;
  margin-right: 1em;
}

/*「任意」文字*/
.CF7_unreq {
  font-size: .9em;
  padding: 5px;
  background: #bdbdbd;
  /*グレー*/
  color: #fff;
  border-radius: 3px;
  margin-right: 1em;
}

/* ドロップダウンメニュー */
.cf7__select {
  position: relative;
}

.cf7__select:before {
  position: absolute;
  top: 50%;
  right: 28%;
  z-index: 10;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid #000;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  pointer-events: none;
  content: '';
}

.cf7__select select {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* タイトル列 */
@media screen and (min-width: 768px) {
  .CF7_table th {
    width: 30%;
    /*横幅*/
    background: #fdf2f2;
    text-align: left;
    padding-left: 3%;
  }
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
  background: #fdf2f2;
  border: 0;
  color: #ec7293;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0 auto;
}

.CF7_btn {
  text-align: center;
  margin-top: 20px;
}

.wpcf7-spinner {
  width: 0;
  margin: 0;
}

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

  table.CF7_table {
    width: 100%;
  }

  table.CF7_table tr,
  table.CF7_table td,
  table.CF7_table th {
    display: block;
    width: 100%;
    line-height: 2.5em;
  }

  table.CF7_table th {
    background: #fdf2f2;
  }

  .wpcf7-form input {
    width: 100%;
  }

  .wpcf7-form textarea {
    width: 100%;
  }

  .wpcf7 input.wpcf7-submit {
    width: 70%;
  }

  /* ドロップダウンメニュー */
  .cf7__select:before {
    top: 40%;
    right: 16%;
  }

  .cf7__select select {
    width: 100%;
    line-height: 1.6;
  }


}