@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){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}



/* ------------------------------------------------------------
     テーマの見た目変更
------------------------------------------------------------ */

:root {
  /* --orig-base: #0a3190; */
  --orig-base: #0d2971;
  --orig-accent: #00fdff;
  --orig-caution: #ff4100;
  --orig-sub: #d3d3d3;
  --orig-mouseover-background: #00fdff;
}

/* ------------------------------------------------------------
     共通部分
------------------------------------------------------------ */

/* ヘッダー */
.header-container {
  box-shadow: none;
  .header-in {
    flex-direction: column-reverse;
    .logo {
      display: flex;
      justify-content: center;
      align-items: center;
      .site-name-text {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
/* トップメニュー */
nav {
  .item-label {
    transition: 0.1s !important;
    &:hover {
      background-color: var(--orig-mouseover-background);
      color: var(--orig-base);
    }
  }
}

/* メインカラム */
#main {
  border: solid white;
  border-width: 2px;
  border-radius: 0;;
  @media screen and (max-width: 834px){
    border-width: 2px 0;
  }
}
/* フッター */
footer {
  padding: 8px 0px !important;
  background: none !important;
  .footer-bottom {
    padding: 8px 0px !important;
  }
  .navi-footer-in a {
    transition: 0.1s !important;
    &:hover {
      background-color: var(--orig-mouseover-background) !important;
      color: var(--orig-base) !important;
    }
  }
}
/* リンクボタン */
.animebtn {
  margin: 30px auto;
  width: 70%;
  height: 60px;
  line-height: 56px;
  color: var(--orig-accent);
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  background: transparent;
  text-align: center;
  border: 2px solid var(--orig-accent);
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  transition: .3s;
  cursor : pointer;
  &::before,
  &::after {
    content: "";
    width: 100% !important;
    position: absolute !important;
    top: 0 !important;
    z-index: -1 !important;
    transition: transform ease .3s !important;
  }
  &::before {
    right: -60px !important;
    border-right: 60px solid transparent !important;
    border-bottom: 60px solid var(--orig-accent) !important;
    transform: translateX(-100%) !important;
  }
  &::after {
    left: -60px !important;
    border-left: 60px solid transparent !important;
    border-top: 60px solid var(--orig-accent) !important;
    transform: translateX(100%) !important;
  }
  &:hover {
    color: var(--orig-base) !important;
  }
  &:hover::before {
    transform: translateX(-49%) !important;
  }
  &:hover::after {
    transform: translateX(49%) !important;
  }
}

/* サイドバー */
#sidebar {
  padding: 0;
  background-color: var(--orig-base);
  .widget-sidebar-title {
    margin: 0 0 10px;
    padding: 0;
    color: white;
    font-size: 20px;
    line-height: 20px;
    &::before, &::after {
      display: none;
    }
  }
  .widget-sidebar {
    padding: 36px 29px;
    border: 2px solid white;
    &.widget_new_entries,
    &.widget_popular_entries {
      padding: 36px 29px 17px;
    }
    &.widget_categories {
      padding: 36px 29px 22px;
    }
    .widget-entry-cards {
      margin-bottom: 0;
      .widget-entry-card-link {
        margin-bottom: 0;
        padding: 19px 0;
        background-color: transparent;
        color: var(--orig-base);
        border: solid white;
        border-width: 0 0 1px 0;
        transition: 0.1s;
        &:last-of-type {
          margin-bottom: 0;
          border-width: 0;
        }
        .widget-entry-card {
          .widget-entry-card-thumb {
            margin: 0 10px 0 0;
            display: flex;
            border: 1px solid white;
            & img {
              transition: 0s;
            }
          }
          .widget-entry-card-content {
            .widget-entry-card-title {
              font-size: 14px;
              color: white;
            }
          }
        }
        &:hover {
          background-color: var(--orig-mouseover-background);
          color: var(--orig-base);
          & img {
            transform: unset;
          }
          .widget-entry-card-thumb {
            border: 1px solid var(--orig-mouseover-background);
          }
          .widget-entry-card-content {
            .widget-entry-card-title {
              color: var(--orig-base);
            }
          }
        }
      }
    }
    .cat-item {
      /* margin-bottom: 10px; */
      padding: 0;
      border: solid white;
      border-width: 0 0 1px 0;
      transition: 0.1s;
      &>a {
        padding: 10px;
        border-bottom: none;
        box-shadow: none;
        color: white;
        transition: 0.1s !important;
        .post-count {
          color: white;;
        }
      }
      &:last-of-type {
        border-width: 0;
      }
      &:hover {
        background-color: var(--orig-mouseover-background);
        &>a {
          color: var(--orig-base);
          .post-count {
            color: var(--orig-base);
          }
        }
      }
    }
    .tagcloud {
      display: block;
      & a {
        display: inline-block;
        color: white;
        border-radius: 0;
        padding: 3px 0;
        text-decoration: none;
        font-size: 12px;
        margin: 2px;
        transition: 0.1s;
        .tag-caption {
          padding: 0 2px;
        }
        &:hover {
          background-color: var(--orig-mouseover-background);
          .tag-caption {
            color: var(--orig-base);
          }
        }
      }
    }
  }
  @media screen and (max-width: 834px) {
    margin-top: 60px;
    .widget-sidebar {
      margin-bottom: 60px;
      padding: 0 16px !important;
      border-width: 0;
      &.widget_new_entries,
      &.widget_popular_entries {
        margin-bottom: 41px;
      }
    }
  }
}

/* reCAPTCHA */
.recaptcha-pp {
  font-size: 12px;
  & a {
    color: var(--orig-accent);
    text-decoration: none;
    &:hover {
      background-color: var(--orig-mouseover-background);
      color: var(--orig-base)
    }
  }
}
.grecaptcha-badge {
  visibility: hidden;
}


/* ------------------------------------------------------------
     記事一覧ページ
------------------------------------------------------------ */

#archive-title  {
  color: var(--orig-accent);
}

.entry-card-wrap {
  margin: 0;
  padding: 3% 0;
  background-color: var(--orig-base);
  color: white;
  border: solid white;
  border-width: 0 0 1px 0;
  transition: 0.1s !important;
  /* .entry-card-title {
    color: var(--orig-accent);
  } */
  &::before {
    display: none;
  }
  &::after {
    display: none;
  }
  .entry-card-snippet {
    font-size: 14px;
    -webkit-line-clamp: 3;
  }
  .card-content {
    .card-snippet {
      padding-top: 10px;
    }
  }
  .cat-label {
    color: white;
  }
  .entry-card-thumb {
    display: flex;
    margin-top: 0;
    & img {
      border: 1px solid white;
    }
  }
  &:last-of-type {
    border-width: 0;
  }
  &:hover {
    background-color: var(--orig-mouseover-background);
    color: var(--orig-base);
    border: solid white;
    border-width: 0 0 1px 0;
    transition: 0.1s;
    & img {
      border: 1px solid var(--orig-mouseover-background);
    }
    &:last-of-type {
      border-width: 0;
    }
    .entry-card-title {
      color: var(--orig-base);
    }
  }
}
/* ページネーション */
.pagination {
  .page-numbers, .current {
    background-image: none;
    border-radius: 0;
    transition: 0.1s !important;
    &::before {
      display: none;
    }
    &::after {
      display: none;
    }
    &:hover {
      border-radius: 0;
    }
  }
  .page-numbers {
    background-color: var(--orig-base);
    color: white;
    border: solid white;
    border-width: 1px;
    cursor: pointer;
    &:hover {
      background-color: var(--orig-mouseover-background);
      border: solid var(--orig-mouseover-background);
      color: var(--orig-base);
    }
  }
  .current {
    background-color: white;
    color: var(--orig-base);
    border: solid white;
    border-width: 1px;
    font-size: 100%;
  }
  .dots {
    border-width: 0;
    cursor: default;
    &:hover {
      border-width: 0;
      background-color: var(--orig-base);
      color: white;
    }
  }
}


/* ------------------------------------------------------------
     記事詳細ページ
------------------------------------------------------------ */

/* タイトル・見出し関連 */
.article {
  .entry-title, .archive-title {
    color: #00fdff !important;
  }
  .date-tags {
    .post-date, .post-update, .post-author, .amp-back {
      margin: 0 0 0 8px;
    }
  }
  & h2 {
    margin-top: 2.4em;
    padding: 12px 12px;
    color: white;
    border: solid white;
    border-width: 1px 0px;
    border-radius: 0;
    background-image: none;
    box-shadow: none;
    font-size: 24px;
    text-shadow: none;
  }
  & h3 {
    position: relative;
    margin-top: 1.6em;
    padding: 8px 12px;
    background-color: transparent;
    color: white;
    border-radius: 0;
    border: solid var(--orig-accent);
    border-width: 0 0 1px 0;
    box-shadow: none;
    &::after {
      display: none;
    }
  }
  & h4 {
    position: relative;
    margin-top: 1.2em;
    padding: 5px 10px;
    border: solid var(--orig-accent);
    border-width: 0 0 0 3px;
    box-shadow: none;
    &::before, &::after {
      display: none;
    }
  }
}
/* 本文部分 */
.article {
  .eye-catch {
    border: 1px solid white;
  }
  .entry-content {
    & p {
      & a {
        color: var(--orig-accent);
        text-decoration: none;
        &:hover {
          background-color: var(--orig-mouseover-background);
          color: var(--orig-base);
        }
      }
    }
    .marker-under-blue {
      background: linear-gradient(transparent 95%, var(--orig-accent) 5%);
    }
    & code {
      margin: 0 3px;
      padding: 3px 5px;
      background-color: #353535;
      color: white;
      border-radius: 3px;
      /* border: 1px solid white; */
    }
  }
  .article-footer {
    .cat-link, .tag-link {
      text-decoration: none;
      border-radius: 0;
      transition: 0.1s;
      &:hover {
        background-color: var(--orig-mouseover-background);
        color: var(--orig-base);
        opacity: 1;
      }
    }
    .cat-link {
      color: var(--orig-accent);
    }
    .tag-link {
      color: var(--orig-sub);
    }
  }
}

/* 本文  */
.main {
  background-color: var(--orig-base) !important;
  #breadcrumb {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }
  hr {
    margin: 2.8em 0 !important;
    border-width: 1px 0 0 0 !important;
  }
  .blogcard {
    border-radius: 0px;
  }
  span.marker {
    margin: 0 1px;
    padding: 0px 1px;
    color: white !important;
    background-color: #4e5a7a !important;
  }
  span.marker-under {
    color: white;
    background: linear-gradient(transparent 94%, var(--orig-accent) 95%) !important;
  }
  span.marker-red {
    margin: 0 3px;
    padding: 0 6px;
    color: var(--orig-base);
    background-color: white;
    border: 1px solid #4e5a7a;
    border-radius: 4px;
  }
}
.no-scrollable-main .main {
  color: white !important;
}
/* SNSボタン */
.sns-buttons {
  opacity: 1;
  &>a {
    background-color: var(--orig-base);
    color: white;
    border: 1px solid white;
    border-radius: 0px;
    transition: 0.1s;
    &:hover {
      opacity: 1;
      color: var(--orig-base);
      background-color: var(--orig-mouseover-background);
      border: 1px solid var(--orig-mouseover-background);
    }
  }
}
/* カード */
.a-wrap .blogcard, .related-entry-card-wrap, .pager-post-navi a.prev-post, .pager-post-navi a.next-post, .pager-post-navi.post-navi-square a {
  background-color: var(--orig-base);
  color: white;
  border: 1px solid white;
  transition: 0.1s;
  .card-thumb img {
    border: 1px solid white;
  }
  &:hover {
    background-color: var(--orig-mouseover-background);
    color: var(--orig-base);
    border: 1px solid var(--orig-mouseover-background);
    transition: 0.1s;
    .card-thumb img {
      border: 1px solid var(--orig-base);
    }
  }
  .cat-label {
    color: white;
  }
}

/* 関連記事 */
.article,
.related-entries {
  margin-bottom: 3.6em !important;
  .related-entry-card-title {
    font-size: 14px;
  }
}

.search-edit,
input[type=text],
input[type=password],
input[type=date],
input[type=datetime],
input[type=email],
input[type=number],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
textarea,
select {
  background-color: white;
  border-radius: 0px;
}
textarea {
  resize: vertical;
}

/* コメント */
#commentform {
  input[type=text],
  input[type=password],
  input[type=date],
  input[type=datetime],
  input[type=email],
  input[type=number],
  input[type=search],
  input[type=tel],
  input[type=time],
  input[type=url],
  textarea,
  select {
    border-radius: 0px;
  }
}
.comment-reply-title, .comment-form-email, .comment-form-url, .comment-notes, .logged-in-as, .required {
  display: none;
}
.comment-form-author, .comment-form-comment {
  margin-bottom: 1.4em;
  & input[type=text], textarea {
    margin-top: 6px;
  }
}



/* ------------------------------------------------------------
     Contact Form 7
------------------------------------------------------------ */

/* 角丸を葬る */
.wpcf7-text,
.wpcf7-select,
.wpcf7-textarea,
.wpcf7-submit {
  margin-top: 6px;
  border-radius: 0px !important;
}
.wpcf7-textarea {
  margin-bottom: -7px;
  resize: vertical;
}
/* バリデーションメッセージ */
.wpcf7-not-valid-tip {
  margin-top: 0.6em;
  color: var(--orig-caution);
  font-weight: bold;
}
/* 送信成功 */
.wpcf7 form.sent .wpcf7-response-output {
  display: none;
}
/* 送信失敗 */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
  margin: 0px auto;
  padding: 10px;
  background: var(--orig-caution);
  color: white;
  border: 1px solid var(--orig-caution);
}