@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/*!
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: #FCFCFA;
  --orig-base-sub: #E8ECF7;
  --orig-accent: #3D4FB5;
  --orig-accent-sub: #C2D0F2;
  --orig-text: #14171F;
  --orig-text-sub: #8A92A3;
  --orig-border: #8A92A3;
  --orig-caution: #EC8B3C;
  --orig-mouseover-bg: #3D4FB5;
}

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

/* 全体 */

* {
  font-family: "Noto Sans JP", sans-serif;
}

*::selection {
  color: var(--orig-base);
  background: var(--orig-accent);
}

body.public-page {
  background-color: var(--orig-base);
}

/* ヘッダー */
.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;
      }
    }
  }
}
#header-container, #header-container .navi, #navi .navi-in>.menu-header .sub-menu {
  background-color: var(--orig-base);
}
#navi .navi-in a, #navi .navi-in a:hover {
  color: var(--orig-text);
}


/* トップメニュー */
nav {
  .item-label {
    transition: 0.1s !important;
    font-weight: 700;
    &:hover {
      background-color: var(--orig-mouseover-bg);
      color: var(--orig-base);
    }
  }
}

/* メインカラム */
#main {
  border: 2px solid var(--orig-border);
  border-radius: 0;;
  @media screen and (max-width: 834px){
    border-width: 2px 0;
  }
}

/* フッター */
footer {
  padding: 8px 0px !important;
  background: none !important;
  color: var(--orig-text);
  .footer-bottom {
    padding: 8px 0px !important;
  }
  .navi-footer-in {
    .menu-item {
      border-left: 1px solid var(--orig-border);
      &:last-child {
         border-right: 1px solid var(--orig-border);
      }
    }
    a {
      transition: 0.1s !important;
      &:hover {
        background-color: var(--orig-mouseover-bg) !important;
        color: var(--orig-base) !important;
      }
    }
  }
}
#footer, #footer a, .footer-title {
  color: var(--orig-text);
  font-weight: 700;
}

/* リンクボタン */
.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: 2px 10px 4px;;
    color: var(--orig-text);
    border: solid var(--orig-accent);
    border-width: 0 0 0 3px;
    font-size: 16px;
    line-height: 16px;
    &::before, &::after {
      display: none;
    }
  }
  .widget-sidebar {
    padding: 36px 29px;
    border: 2px solid var(--orig-border);
    &.widget_new_entries {
      margin-top: -1px;
    }
    &.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 var(--orig-border);
        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 var(--orig-border);
            & img {
              transition: 0s;
            }
          }
          .widget-entry-card-content {
            .widget-entry-card-title {
              font-size: 14px;
              color: var(--orig-text);
            }
          }
        }
        &:hover {
          background-color: var(--orig-mouseover-bg);
          color: var(--orig-base);
          & img {
            transform: unset;
          }
          .widget-entry-card-thumb {
            border: 1px solid var(--orig-mouseover-bg);
          }
          .widget-entry-card-content {
            .widget-entry-card-title {
              color: var(--orig-base);
            }
          }
        }
      }
    }
    .cat-item {
      /* margin-bottom: 10px; */
      padding: 0;
      border: solid var(--orig-border);
      border-width: 0 0 1px 0;
      transition: 0.1s;
      &>a {
        padding: 10px;
        border-bottom: none;
        box-shadow: none;
        color: var(--orig-text);
        transition: 0.1s !important;
        .post-count {
          color: var(--orig-text-sub);
        }
      }
      &:last-of-type {
        border-width: 0;
      }
      &:hover {
        background-color: var(--orig-mouseover-bg);
        &>a {
          color: var(--orig-base);
          .post-count {
            color: var(--orig-base);
          }
        }
      }
    }
    .tagcloud {
      display: block;
      & a {
        display: inline-block;
        margin: 2px;
        padding: 3px 3px;
        text-decoration: none;
        font-size: 12px;
        color: var(--orig-text);
        border: transparent;
        border-radius: 0;
        transition: 0.1s;
        .tag-caption {
          padding: 0 2px;
        }
        &:hover {
          background-color: var(--orig-mouseover-bg);
          .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;
      }
    }
  }
}

#header-container, #header-container .navi, #navi .navi-in>.menu-header .sub-menu, .article h2, .sidebar h2, .sidebar h3, .cat-link, .cat-label, .appeal-content .appeal-button, .demo .cat-label, .blogcard-type .blogcard-label, #footer {
  background-color: var(--orig-base);
}

/* reCAPTCHA */
.recaptcha-pp {
  font-size: 12px;
  & a {
    color: var(--orig-accent);
    text-decoration: none;
    &:hover {
      background-color: var(--orig-mouseover-bg);
      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: #141320;
  border: solid var(--orig-border);
  border-width: 0 0 1px 0;
  transition: 0.1s !important;
  &::before {
    display: none;
  }
  &::after {
    display: none;
  }
  .entry-card-snippet {
    font-size: 14px;
    -webkit-line-clamp: 3;
  }
  .entry-card-snippet, .related-entry-card-snippet, .blogcard-snippet {
    border-top: 1px solid var(--orig-border)
  }
  .card-content {
    .card-snippet {
      padding-top: 10px;
    }
  }
  .cat-label {
    top: 0.3em;
    right: 0.3em;
    left: auto;
    color: var(--orig-text);
    border: 1px solid var(--orig-border);
  }
  .entry-card-thumb {
    display: flex;
    margin-top: 0;
    & img {
      border: 1px solid var(--orig-border);
    }
  }
  &:last-of-type {
    border-width: 0;
  }
  &:hover {
    background-color: var(--orig-mouseover-bg);
    color: var(--orig-base);
    border: solid var(--orig-text);
    border-width: 0 0 1px 0;
    transition: 0.1s;
    & img {
      border: 1px solid var(--orig-mouseover-bg);
    }
    &: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: var(--orig-text);
    border: solid var(--orig-text);
    border-width: 1px;
    cursor: pointer;
    &:hover {
      background-color: var(--orig-mouseover-bg);
      border: solid var(--orig-mouseover-bg);
      color: var(--orig-base);
    }
  }
  .current {
    background-color: var(--orig-text);
    color: var(--orig-base);
    border: solid var(--orig-text);
    border-width: 1px;
    font-size: 100%;
  }
  .dots {
    border-width: 0;
    cursor: default;
    &:hover {
      border-width: 0;
      background-color: var(--orig-base);
      color: var(--orig-text);
    }
  }
}


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

/* タイトル・見出し関連 */
.article {
  .entry-title, .archive-title {
    color: var(--orig-accent);
    font-weight: 900;
  }
  .date-tags {
    .post-date, .post-update, .post-author, .amp-back {
      margin: 0 0 0 8px;
      color: var(--orig-text-sub);
    }
  }
  & h2 {
    margin-top: 2.4em;
    padding: 10px 12px 12px;
    color: var(--orig-text);
    border: solid var(--orig-text);
    border-width: 3px 0px;
    border-radius: 0;
    background-image: none;
    box-shadow: none;
    font-size: 24px;
    font-weight: 700;
    text-shadow: none;
  }
  & h3 {
    position: relative;
    margin: 1.6em auto 22px;
    padding: 8px 12px;
    background-color: transparent;
    color: var(--orig-text);
    border: solid var(--orig-accent);
    border-radius: 0;
    border-width: 0 0 3px 0;
    box-shadow: none;
    font-size: 20px;
    font-weight: 750;
    &::after {
      display: none;
    }
  }
  & h4 {
    position: relative;
    margin: 1.2em auto 10px;
    padding: 1px 10px 3px;
    border: solid var(--orig-accent);
    border-width: 0 0 0 3px;
    box-shadow: none;
    font-size: 16px;
    font-weight: 800;
    &::before, &::after {
      display: none;
    }
  }
}

/* 本文部分 */
.article {
  .eye-catch {
    border: 1px solid var(--orig-border);
  }
  .entry-content {
    .marker-under-blue {
      background: linear-gradient(transparent 95%, var(--orig-accent) 5%);
    }
    & code {
      margin: 0 3px;
      padding: 1px 5px 2px;
      background-color: #353535;
      color: white;
      border-radius: 5px;
    }
  }
  .article-footer {
    .cat-link, .tag-link {
      text-decoration: none;
      border-radius: 0;
      transition: 0.1s;
      &:hover {
        background-color: var(--orig-mouseover-bg);
        color: var(--orig-base);
        opacity: 1;
      }
    }
    .cat-link {
      color: var(--orig-accent);
    }
    .tag-link {
      color: var(--orig-text);
      border: transparent;
    }
  }
}

/* 本文  */
.main {
  background-color: var(--orig-base) !important;
  article {
    .wp-block-paragraph {
      a {
        color: var(--orig-accent);
        &:hover {
          background-color: var(--orig-mouseover-bg);
          color: var(--orig-base);
        }
      }
    }
  }
  #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 5px;
    color: var(--orig-text) !important;
    background-color: var(--orig-accent-sub) !important;
  }
  span.marker-under {
    color: var(--orig-text);
    background: transparent;
    border-bottom: 2px solid var(--orig-accent);
  }
  span.marker-under-red {
    color: var(--orig-text);
    background: transparent;
    border-bottom: 2px solid var(--orig-caution);
  }
  span.marker-red {
    margin: 0 3px;
    padding: 0 4px;
    color: var(--orig-text);
    background-color: white;
    border: 1px solid var(--orig-text);
    border-radius: 5px;
  }
  ol, ul {
    padding-left: 20px;
  }
  a {
    font-weight: 600;
    color: var(--orig-accent);
  }
  table {
    thead {
      border: 1px solid var(--orig-border);
      th {
        color: var(--orig-text);
        padding: 9px 6px;
      }
    }
    tr {
      &:nth-of-type(2n) {
        background-color: var(--orig-accent-sub);
      }
    }
  }
}
.no-scrollable-main .main {
  color: var(--orig-text) !important;
}
/* SNSボタン */
.sns-buttons {
  opacity: 1;
  &>a {
    background-color: var(--orig-base);
    color: var(--orig-text);
    border: 1px solid var(--orig-text);
    border-radius: 0px;
    transition: 0.1s;
    &:hover {
      opacity: 1;
      color: var(--orig-base);
      background-color: var(--orig-mouseover-bg);
      border: 1px solid var(--orig-mouseover-bg);
    }
  }
}
/* カード */
.blogcard-wrap {
  margin-left: 0;
  margin-right: 0;
}
.a-wrap .blogcard, .related-entry-card-wrap, .pager-post-navia.prev-post,
.pager-post-navi a.next-post, .pager-post-navi.post-navi-square a {
  background-color: var(--orig-base);
  border: 1px solid #C8CEDA;
  transition: 0.1s;
  .blogcard-thumbnail {
    padding: 1.0% 0% 2.2% 2.2%;
  }
  .blogcard-content {
    padding: 1.0% 2.2% 2.2% 0%;
  }
  .blogcard-content {
    .blogcard-title {
      color: var(--orig-accent);
    }
    .blogcard-snippet {
      color: var(--orig-text);
    }
  }
  .blogcard-footer {
    padding: 0.7% 2.2%;
    color: var(--orig-accent);
    background-color: #F1F3F9;
    font-size: 14px;
  }
  .blogcard-thumbnail,
  .card-thumb {
    img {
      border: 1px solid var(--orig-border);
    }
  }
  .related-entry-card-title {
    color: var(--orig-text);
  }
  &:hover {
    background-color: var(--orig-accent);
    color: var(--orig-base);
    border: 1px solid var(--orig-accent);
    transition: 0.1s;
    .blogcard-content {
      .blogcard-title {
        color: var(--orig-base);
      }
      .blogcard-snippet {
        color: var(--orig-base);
      }
    }
    .blogcard-footer {
      color: var(--origa-base);
      background-color: transparent;
    }
    .blogcard-thumbnail,
    .card-thumb {
      img {
        border: 1px solid var(--orig-base);
      }
    }
  }
}
.blogcard {
  padding: 1.6% 2.2% 2%;
  padding: 1.6% 0% 0%;
}

/* 目次 */
#rtoc-mokuji-wrapper {
  background-color: var(--orig-base);
  border: 1px solid var(--orig-border);
  #rtoc-mokuji-title {
    .rtoc_open_close, .rtoc_open {
      color: var(--orig-base);
      background-color: var(--orig-accent);
    }
    span {
      color: var(--orig-accent);
      font-weight: 700;
    }
  }
  /* h2 */
  .rtoc-mokuji {
    &>.rtoc-item {
      &>a {
        margin-left: 0;
      }
      /* h3 */
      &>.rtoc-mokuji {
        &>.rtoc-item {
          &>a {
            margin-left: 4px;
          }
        }
      }
      &::before {
        color: var(--orig-accent);
      }
      &::after {
        background-color: var(--orig-accent);
      }
    }
    li {
      a {
        color: var(--orig-text);
      }
    }
  }
}

/* 関連記事 */
.related-entries {
  margin-bottom: 3.6em !important;
  .related-entry-card-title {
    font-size: 13px;
  }
  .main-caption {
    color: var(--orig-text);
  }
  /* a {
    color: var(--orig-base);
  } */
  .related-entry-card-content {
    padding-bottom: 0;
  }
  .related-entry-card-meta {
    display: none;
  }
  &:hover {
    .main-caption {
      color: var(--orig-base);
    }
  }
}

.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;
}

/* コメント */
.comment-title {
  color: var(--orig-text);
}
#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);
}