@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
  */

  /************************************
  ** 子テーマ用のスタイルを書く
  ************************************/
  /* body---------------------------------------------- */
span.br-sp {display: none; }
.grecaptcha-badge { visibility: hidden; }

  body.public-page {
    background-position: bottom;
    background-size: cover;
  }

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

  body .is-layout-flow>*+* {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
  }

  body.home.public-page {
    background-color: initial;
  }

  .home .entry-content>*,
  .body .widget,
  .body .article {
    margin-bottom: 0;
  }

  /*スムーズにスクロール*/
  html {
    scroll-behavior: smooth;
  }

  .scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
  }

  .scroll_up {
    will-change: transform;
    transition: .8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
  }

  /* .home---------------------------------------------- */
  .breadcrumb {
    margin: 1em 0.4em;
    color: #777;
    font-size: 13px;
  }
  .breadcrumb .fa-file:before {
    content: "";
}
  .breadcrumb .fa-fw {
    display: none;
}
  .breadcrumb a, .breadcrumb-caption {
    padding: 3px 10px;
    background-color: var(--color-7);
    color: var(--cocoon-text-color);
    border-radius: 1px;
  }

  .breadcrumb .fa-home,
  .breadcrumb .fa-folder,
  .breadcrumb .fa-file-o {
    display: none;
  }

  .home .top-bak {
    width: 100%;
    background-color: var(--sub-color);
  }

  /* トップページ非表示項目*/
  .home .toc,
  .home .breadcrumb,
  .home .eye-catch,
  .home .entry-title,
  .home .sns-share,
  h2.widget-content-bottom-title,
  .home header .post-date,
  .home header .post-update,
  .home .author-info {
    display: none;
  }

  .home .article h2 {
    background-color: transparent;
  }

  /*見出し*/
  .home h2 {
    text-align: center;
    /*中央寄せ*/
    font-size: 2rem;
    /*文字の大きさ*/
    color: #555;
    /*文字色*/
    letter-spacing: .1rem;
    /*文字間の余白*/
    line-height: 2;
    /*行の高さ*/
    margin: 1rem;
    /*外側余白*/
    padding: 0;
    /*内側余白*/
  }

  .home .content .wrap {
    width: 100%;
  }

  .home .content {
    margin-top: -2em;
  }

  .home .newpost {
    padding: 6em 0 2em;
    background-image: url(/wp-content/uploads/2023/03/001.png);
    background-repeat: no-repeat;
    background-size: 250px;
    background-position: bottom 0px right 5%;
    position: relative;
  }

  .home .main {
    padding: 0;
  }

  .home .entry-content {
    margin-bottom: 0;
  }

  .home .popular {
    background-color: var(--main-color);
    max-width: 100%;
    padding: 10em 0 5em 0;
    margin: -10px 0 !important;
    position: relative;
  }

  .home .sub-img {
    margin-bottom: -2em !important;
    font-size: small;
    text-align: center;
    color: var(--accent-color);
  }

  .home .category,
  .newpost {
    background-color: var(--sub-color);
  }

  /*カテゴリー見出し写真*/

  .home figure img {
    max-height: 400px;
    object-fit: cover;
    /*画像トリミング*/
  }

  .home .category {
    margin-bottom: -10px !important;
    padding: 5em 0;
    position: relative;
  }

  .home .category .cat-ttl {
    display: flex;
    justify-content: space-between;
    margin-bottom: -50px;
    gap: 2em;
  }

  .home .new-entry-card-link {
    background-color: #fff;
    border-radius: 20px;
    margin-bottom: 15px;
    padding: 15px;
  }

  .home .profile-in img {
    width: auto;
    margin: 0 auto;
  }

  .home .wrapin {
    width: 1056px;
  }

  .porofile {
    margin-top: 2em;
  }



  .popular .wp-block-button__link {
    border: 2px solid var(--cocoon-white-color);
  }

  .page-numbers {
    border: 0;
    background-color: var(--cocoon-current-background-color);
    border-radius: 0%;
    transition: all 500ms;
    box-shadow: 0 1px 1px var(--shadow-color);
  }

  .pagination .current {
    background-color: var(--bg-color);
  }

  .pagination-next-link {
    border-radius: 1px;
    font-size: .9em;
    border: 1px solid var(--bg-color);
    color: var(--bg-color);
  }

  /* #sidebar---------------------------------------------- */
  #sidebar .widget_nav_menu ul li a::before,
  #sidebar .widget_categories ul li a::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
    font-weight: bold;
    margin-right: 10px;
    color: var(--accent-color);
  }

  #sidebar .widget_nav_menu ul li ul li a::before,
  #sidebar .widget_categories ul li ul li a::before {
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    font-weight: bold;
    margin-right: 10px;
  }

  #sidebar .widget_categories ul li a .post-count {
    display: block;
    float: right;
    padding: 3px 1em;
    font-size: 12px;
    border-radius: 30px;
    background-color: var(--sub-color);
  }

  .sidebar h3 {
    margin: 1rem 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    background: transparent;
    font-weight: normal;
    font-size: 2rem;
    text-align: left;
    color: var(--main-color);
  }

  .sidebar h3:after {
    background-color: var(--main-color);
    border-radius: 50%;
    content: '';
    margin-left: 15px;
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    box-shadow: 20px 0 0 var(--sub-color), 40px 0 0 var(--accent-color), 60px 0 0 var(--main-color), 80px 0 0 var(--sub-color), 100px 0 0 var(--accent-color), 120px 0 0 var(--main-color), 140px 0 0 var(--sub-color), 160px 0 0 var(--accent-color), 180px 0 0 var(--main-color), 200px 0 0 var(--sub-color), 220px 0 0 var(--accent-color);
  }

  /* アピールエリア---------------------------------------------- */
  /*全体*/
  #header-in,
  .navi {
    animation: fade-in 3s ease 1 normal;
  }
.appeal-content{
    animation: fade-in 3s ease 1 normal;
}

  .appeal {
    margin: -170px 0 -200px 0;
    background-position: top -50px right 0px;
    background-size: cover;
    width: 100%;
  }

  .appeal-in {
    margin-bottom: -100px;
    min-height: 1155px;
    /*パソコンでの高さ調整*/
    min-width: 100%;
    /*幅を最大に*/
    background-color: rgba(250, 250, 250, .5);
    /*背景色、白を透過させる*/
  }

  /*タイトル*/
  .appeal-title {
    font-weight: normal;
    /*文字の太さ*/
    font-size: 1em;
    /*タイトル文字の大きさ*/
  }

  /*コンテンツエリア*/
  .appeal-content {
    width: 100%;
    margin-bottom: 185px;
    background-image: url(/wp-content/uploads/2023/03/454931.png);
    background-repeat: no-repeat;
    background-size: 150px;
    background-position: top 10px right 10px;
  }

  /*本文*/
  .appeal-message {
    font-size: 1em;
    /*本文文字の大きさ*/
  }

  /*アイコンを追加*/
  .appeal-button:before {
    display: block;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f103";
    /*アイコン指定*/
    font-size: 2em;
    /*アイコンの大きさ*/
    animation: move 1s infinite alternate ease-in-out;
    /*以下、アイコンを動かすアニメーション*/
  }

  /* #footer---------------------------------------------- */

  .content-bottom-in,
  .footer {
    background-color: var(--sub-color);
    color: var(--cocoon-text-color);
  }

  .footer-bottom {
    width: 100%;
    background-color: var(--main-color);
    color: var(--cocoon-white-color);
  }

  .footer-nami {
    margin-top: -2em;
  }

  #footer .widget_nav_menu ul {
    display: flex;
    margin: 0 0 0 auto;
    justify-content: center;
    align-items: center;
  }

  #footer .widget_nav_menu ul li a {
    display: initial;
  }

  #footer .widget_nav_menu ul li::before {
    content: "｜";
  }

  #footer .widget_nav_menu ul li:last-child::after {
    content: "｜";
  }



  @keyframes move {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(10px);
    }
  }



  /* 新着記事を横並びにする---------------------------------------------- */
  .new-entry-cards.large-thumb {
    display: flex;
    /* フレックスボックスにする */
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }


  /*新着記事サムネイル（大）*/
  .new-entry-cards.large-thumb a {
    width: calc((100% - 20px) / 2);
  }

  .new-entry-cards.large-thumb a {
    position: relative;
    z-index: 0;
    overflow: hidden;
  }

  .new-entry-cards.large-thumb a:first-of-type:before {
    content: "NEW";
    position: absolute;
    background-color: var(--accent-color);
    color: #fff;
    padding: 0 40px;
    z-index: 1;
    top: 1em;
    left: -2em;
    transform: rotate(-45deg);
  }

  .content-bottom {
    margin-top: 2em;
  }

  .block1-left {
    position: absolute;
    left: 0%;
    bottom: -25%;
    z-index: 1;
  }

  .new-in {
    position: relative;
  }

  .new-onp {
    position: absolute;
    right: -10%;
    top: -35%;
    z-index: 1;
  }

  .block2-left {
    position: absolute;
    left: 0%;
    bottom: -38%;
    z-index: 1;
  }

  .sub-title {
    position: relative;
    height: 45px;
    width: 150px;
  }

  p.sub-title {
    margin-top: -2em !important;
    font-size: small;
    text-align: center;
    color: var(--accent-color);
  }

  .sub-img-left {
    position: absolute;
    top: -40px;
    left: -45px;
  }

  .profile-in .sub-img-left {
    transform: rotate(-15deg)
  }

  .sub-img-right {
    position: absolute;
    top: 0px;
    right: -35vw;
  }

  .right-img img {
    margin: -20rem -15rem 0 auto;
  }

  .left-img img {
    margin: -20rem 0 0 -10rem;
  }

  /************************************
  **　トップ新着・人気・関連記事ウィジェット 投稿日・更新日表示
  ************************************/
  .widget-entry-card-date {
    display: block;
    position: absolute;
    right: 0;
    /*右寄せ*/
    font-size: 18px;
    /*フォントサイズ*/
  }

  .widget-entry-card-post-date {
    display: none;
  }

  .widget-entry-card-update-date::before {
    /*更新日のアイコンの変更*/
    font-family: "Font Awesome 5 Free";
    content: "\f1da";
    /*fa-historyアイコン*/
    font-weight: 900;
    /*アイコンの種類solid*/
    padding-right: 5px;
    /*右余白*/
    font-size: 14px;
    /*フォントサイズ*/
  }

  /*カテゴリーごとの記事(flex)を横並べする*/
  .widget-entry-card-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 1em;
  }

  .main-widget-label {
    display: none;
  }

  .merumaga input[type='submit'] {
    width: 45%;
    margin: 1rem 0;
    text-align: center;
  }

  /* 人気記事を横並びにする---------------------------------------------- */
  .popular-entry-cards.large-thumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 1em;
  }

  .widget-entry-cards.large-thumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .popular-entry-cards.large-thumb a {
    width: calc((100% - 20px * 2) / 3);
  }

  .widget-entry-cards.card-large-image .a-wrap {
    max-width: 100%;
    min-height: 235px;
  }

  .block3-right {
    position: absolute;
    right: 0%;
    bottom: -25%;
    z-index: 1;
  }

  .cat_01,
  .cat_02,
  .cat_03 {
    position: relative;
  }

  .cat_01 h6,
  .cat_02 h6,
  .cat_03 h6 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    /*上のwidthと合わせる*/
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-style: none;
  }

  .profile {
    position: relative;
  }

  .block4-left {
    position: absolute;
    left: -5%;
    bottom: 0;
    z-index: 1;
  }

  .profile-in {
    background-color: rgba(255, 255, 255, .5);
    padding: 3em 5em;
    position: relative;
    border-radius: 20px;
  }

  .navi {
    background-color: transparent !important;
  }

  .nav_menu-2 {
    display: flex;
    margin: auto;
  }

  #header-container {
    background-color: rgba(250, 250, 250, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
  }

  .is-header-fixed .header-container {
    z-index: 3;
  }

  #navi .navi-in a {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .entry-date,
  .date-tags [class^=fa] {
    color: var(--color-9);
  }

  .wp-block-search__button:hover,
  input[type='submit']:hover,
  a:hover {
    transform: translateY(-2px);
    cursor: pointer;
    transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
  }

  .a-wrap:hover:hover,
  .wp-block-button__link:hover {
    transform: translateY(-2px);
    cursor: pointer;
    transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
    color: var(--main-color);
    background-color: var(--cocoon-white-color);
  }

  .toc {
    padding: 2rem 3rem;
    width: 100%;
    max-width: 700px;
    line-height: 1.8;
    border: 0;
    background-color: #fafafa;
  }

  .toc li>*,
  .under-line li,
  .timeline-item-snippet,
  #sidebar .widget_nav_menu ul li,
  #sidebar .widget_categories ul li,
  .tagcloud a,
  .caption-box ul li,
  .caption-box ol li,
  .iconbox ul li,
  .iconbox ol li {
    border-bottom: 1px dotted #ccc;
  }

  .toc li ol {
    border-style: none;
  }

  .toc-checkbox:checked~.toc-content {
    visibility: visible;
    padding-top: 0.6em;
    height: 100%;
    opacity: 1;
  }

  .toc .toc-list {
    padding-left: 0;
  }

  .toc-content ol,
  .entry-content ol,
  .list-number ol {
    counter-reset: number !important;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
  }

  .toc .toc-list ul,
  .toc .toc-list ol {
    padding-left: 1em;
    margin: 0;
  }

  .toc-title {
    text-align: center;
    font-size: 1.2em;
  }

  .toc-title:before {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f0ca";
    margin-right: 10px;
  }

  .toc-checkbox:checked+.toc-title::after {
    content: '[Close]';
  }

  .toc-title::after {
    content: '[Open]';
    margin-left: 0.5em;
    cursor: pointer;
    font-size: .8em;
  }

  .toc-content ol>li:before,
  .entry-content ol>li:before,
  .list-number li:before {
    counter-increment: number;
    content: counter(number);
    position: absolute;
    border-radius: 50%;
    top: 5px;
    left: 0;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    background-color: var(--main-color);
    color: var(--white-color) !important;
    letter-spacing: 0;
    font-size: .9em;
  }

  .toc-checkbox:checked~.toc-content {
    visibility: visible;
    padding-top: 0.6em;
    height: 100%;
    opacity: 1;
  }

  .toc .toc-list {
    padding-left: 0;
  }

  .toc-content {
    visibility: hidden;
    height: 0;
    opacity: .2;
    transition: all .5s ease-out;
  }

  .toc-content ol,
  .entry-content ol,
  .list-number ol {
    counter-reset: number !important;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
  }

  .toc-checkbox:checked~.toc-content {
    visibility: visible;
    padding-top: 0.6em;
    height: 100%;
    opacity: 1;
  }

  .article ul li,
  .article ol li {
    margin: 0.2em;
  }

  .toc-content ol>li li:before,
  .entry-content ol>li li:before {
    position: absolute;
    content: '';
    top: 11px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 4px;
    background-color: var(--accent-color) !important;
    border: 0;
  }

  .toc-content ol>li li,
  .entry-content ol>li li {
    list-style: none !important;
    position: relative;
    padding-left: 1em;
  }

  .toc-content ol>li,
  .entry-content ol>li,
  .list-number li {
    position: relative;
    padding: 2px 0 2px 2em;
  }

  .space {
    margin-top: 1em !important;
  }

  /*---SNSボタンを丸くする---*/
  .button-caption {
    display: none;
    /*キャプション非表示*/
  }

  /*SNSシェアボタン*/
  .sns-share {
    margin: 2em auto;
    text-align: center;
  }

  .sns-share-message {
    font-weight: bold;
    /*太字*/
    color: #875d5b;
    /*文字色*/
  }

  .sns-share-buttons {
    flex-wrap: nowrap;
    /*折り返さない*/
    justify-content: center;
    /*中央寄せ*/
  }

  .sns-share-buttons a {
    border-radius: 50%;
    /*丸くする*/
    font-size: 20px;
    /*アイコンのサイズ*/
    margin: 0 10px;
    /*ボタン同士の間隔*/
  }

  .sns-share a {
    width: 40px;
    /*ボタンの横幅*/
    height: 40px;
    /*ボタンの高さ*/
  }

  /*SNSフォローボタン*/

  .sns-buttons a {
    transition: all 500ms;
  }

  .sns-follow {
    margin: 0 0 0 auto;
    width: 60%;
    height: 65px;
  }

  .sns-follow-message {
    font-weight: bold;
    /*太字*/
    color: #875d5b;
    /*文字色*/
  }

  .sns-follow-buttons a {
    font-size: 20px;
    /*アイコンのサイズ*/
    margin: 0 10px;
    /*ボタン同士の間隔*/
  }

  .sns-follow a {
    width: 40px;
    /*ボタンの横幅*/
    height: 40px;
    /*ボタンの高さ*/
  }

  @media screen and (max-width: 1280px) {
	  .home .wrapin {
      width: 864px;
      margin: auto;
    }

    .appeal-in {
      min-height: 1092px;
    }

    .navi-in>ul li {
      width: 100px;
    }

    #navi .navi-in a {
      height: 100px;
    }

    .new-onp {
    right: 5%;
    bottom: 0;
    }

    .block1-left {
      left: -10%;
      bottom: -25%;
    }

    .block2-left {
      left: -10%;
      bottom: -20%;
    }

    .block3-right {
    right: 0%;
    bottom: -15%;
    width: 320px;
    }

    .block4-left {
    left: -15%;
    bottom: -2%;
    width: 300px;
    }
.sns-follow {
    margin: auto;
    width: 200px;
	  }
.content-bottom-in {
    margin: -1rem 0 0 0;
	  }
  }

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

	  .header-container-in.hlt-top-menu{
		  display:none;
	  }
    /*必要ならばここにコードを書く*/
    .appeal {
      background-position: top -130px center;
    }
.container .column-wrap {
    flex-direction: initial;
}
.container .column-wrap>div {
    width: 31.5%;
}
  }

  @media screen and (max-width: 480px) {
	span.br-sp {display: block; }
	  
	.container .column-wrap {
    flex-direction: column;
}
	.container .column-wrap>div {
    width: initial;
}
	  
#footer .widget_nav_menu ul {
    display: block;
    margin-bottom: 20px;
}
	  #footer .widget_nav_menu ul li::after {
    content: "｜";
}
    .appeal-in {
      min-height: 800px !important;
      /*スマホでの高さ調整*/
    }

    .appeal-content {
      margin-bottom: 180px;
      padding: 80px 20px 20px 20px;
      background-size: 100px;
      z-index: 3;
      background-color: transparent;
      background-position: top 35px right 10px;
    }

    .appeal {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center top;
    }

    .appeal {
      background-image: url(/wp-content/uploads/2023/03/25729875_l_mb.png);
    }

    .logo-image span {
      margin-top: 0.3em;
    }

    .appeal-content .logo-header img {
      height: auto;
      display: none;
    }

    .appeal-message {
      font-size: .6em;
      /*スマホ表示する文字の大きさ*/
    }

    .new-entry-cards.large-thumb a {
      width: calc((100% - 20px) / 1);
    }

    .category-list {
      width: 100%;
      /*パソコンで横１列*/
    }

    .popular-entry-cards.large-thumb a {
      width: calc(100% / 2);
      /*スマホで横2列にする*/
    }

    .home figure img {
      max-height: 200px;
    }

    .home .popular {
      padding: 5em 0 5em 0;
      margin: -10px 0 -5px 0 !important;
    }

    .home .category {
      padding: 5em 0 2em 0;
    }

    .widget-entry-cards.large-thumb {
      gap: 0px;
    }

    .widget-entry-cards.card-large-image .a-wrap {
      margin: initial;
      min-height: 185px;
    }

    .widget-entry-cards.card-large-image .e-card {
      margin: 10px;
    }

    .widget-entry-cards .a-wrap {
      background-color: transparent;
    }

    .new-onp {
      right: 5%;
      top: -25%;
    }

    .block1-left {
      left: -20%;
      bottom: -18%;
      width: 240px;
    }

    .block2-left {
      display: none;
    }

    .block1-left {
      display: none;
    }

    .category-list {
      width: 80%;
    }

    .category-list.column-wrap>div {
      margin-bottom: 0em;
    }

    .block3-right {
      display: none;
      bottom: -5%;
      width: 220px;
    }

    .block4-left {
      display: none;
    }

    .footer-widgets {
      display: block;
    }

    .footer-widgets {
      display: block;
    }

    .footer-left {
      display: block;
      padding-top: 10px;
    }

    .footer-right {
      display: block;
    }

    .footer-bottom-logo {
      display: block;
      height: initial;
      margin-bottom: initial;
    }

    .content-bottom-in {
      margin: -1rem 0 0em;
    }

    .sns-follow {
      margin: auto;
      width: 50%;
      height: initial;
    }

    .widget_nav_menu ul li::before {
      content: none;
    }

    .widget_nav_menu ul li:last-child::after {
      content: none;
    }

    .footer-widgets,
    .footer-widgets-mobile {
      height: 100%;
    }

    .widget_nav_menu ul {
      display: block;
      margin-bottom: 20px;
    }

    .widget_nav_menu ul li a {
      display: block;
      padding: 10px 0;
    }

    .home .category .cat-ttl {
      gap: 1em;
    }

    .home .wrapin {
      width: 100%;
    }

    .home figure img {
      margin: auto;
    }

    .eye-catch img {
      max-width: 300px;
    }

    .author-description p,
    .author-description ul li {
      font-size: .8em;
    }

    body.public-page {
      background-color: transparent;
    }

    .home #header-container {
      display: initial;
    }

    .no-scrollable-main .main {
      background-color: initial;
    }

    .ect-vertical-card .entry-card-wrap .entry-card-thumb img {
      height: 100px;
    }

    .logo-menu-button img {
      max-height: 40px;
    }

    .mobile-header-menu-buttons {
      background-color: rgba(250, 250, 250, .7);
    }

    .mblt-header-mobile-buttons {
      margin-top: initial;
    }

    .new-entry-cards.large-thumb a:first-of-type:before {
      padding: 0px 40px;
    }

    .menu-drawer a {
      display: flex;
      padding: 15px;
      width: 250px;
      margin: auto;
    }

    .sub-caption {
      margin-left: 10px;
      margin-top: -5px;
    }

    .menu-content .menu-drawer {
      padding: 2em 1em 30px 1em;
    }
  }