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

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

/************************************
* header *
************************************/

.header-container {
   border-radius: 6px; 
   background-color: #ffffff;
   margin-top: 30px;
   margin-bottom: 30px;
   padding-top: 16px;
   padding-bottom: 16px;
}

.logo-header img {
    max-height: 60px;
    width: auto;
}

.header .tagline {
   font-size: 20px;
   color: #68699b;
}

.header .site-name-text img {
    margin-top: 8px;
    margin-bottom: -20px;
}

/************************************
* main *
************************************/

.main {
   border-radius: 6px;
   background-color: #ffffff;
}

/************************************
* sidebar _ headline *
************************************/

.sidebar h3 {
   font-size:22px;
   color: #474a4d;
   text-align: center;
   background: transparent;
   border-bottom:1px dashed #706caa;	
   border-radius: 0%;
   margin-top: 0px;
   margin-bottom: 8px;
}

/************************************
* sidebar : profile *
************************************/

.sidebar.nwa .author-box{
   border: 1px solid #706caa;
   border-radius: 6px;
   background-color: #ffffff;
   margin-top: 30px;
   margin-bottom: 30px;
   padding-top: 30px;
   padding-bottom: 28px;
}

.sidebar.nwa .author-box .author-thumb,
.sidebar.nwa .widget_profile .author-thumb {
   margin-bottom: -8px;
}

.sidebar.nwa .author-box .author-description {
   font-size:18px;
   color: #474a4d;
   text-align: center;
}

.sidebar.nwa .author-box .author-name a,
.sidebar.nwa .author-widget .author-name a {
   font-size:22px;
   color: #474a4d;
   text-decoration: none;
   pointer-events: none;
}

.sidebar .author-box .sns-follow-buttons a {
   font-size: 26px;
   color: #ffffff;
   border: 1px solid #474a4d;
   border-radius: 6px;
   background-color: #474a4d;
   height: 36px;
   width: 36px;
   transition-duration: 1s;
}

.sidebar .author-box .sns-follow-buttons a:hover {
   color: #474a4d;
   border: 1px solid #474a4d;
   border-radius: 6px;
   background-color: #ffffff;
   transition-duration: 1s;
   opacity: 1;
}

/************************************
* sidebar : search *
************************************/

.search-box{
   border: 1px solid #706caa;
   border-radius: 6px;
   padding-top: 1px;
   padding-bottom: 1px;
}

.search-box .search-edit{
   border: none;
}

.search-box .search-submit{
   color: #706caa;
   width: 22%;
   transition-duration: 1s;
}

.search-box .search-edit:focus{
   outline:none;
}

.search-box .search-submit:hover {
   color: #bbbcde;
   transition-duration: 1s;
}

/************************************
* sidebar : new-entry-card / 保留 *
************************************/

/************************************
* sidebar : category *
************************************/

.widget_categories {
   font-size:18px;
   color: #474a4d;
   border: 1px solid #706caa;
   border-radius: 6px;
   background-color: #ffffff;
}

.widget_categories ul li a {
   color: #706caa;
   border: 1px solid #706caa;
   border-radius: 6px;
   background-color: #ffffff;
   margin-bottom: 8px;
   margin-left: 8px;
   margin-right: 8px;
   padding-left: 18px;
   padding-right: 18px;
   transition-duration: 1s;
}

.widget_categories ul li a:hover {
   color: #ffffff;
   border: 1px solid #706caa;	
   border-radius: 6px;
   background-color: #706caa;
   transition-duration: 1s;
}

/************************************
* sidebar : tag cloud *
************************************/

.widget_tag_cloud {
   border: 1px solid #706caa;
   border-radius: 6px;
   background-color: #ffffff;
}

.tagcloud a {
   font-size:14px;
   color: #ffffff;
   border: 1px solid #706caa;
   border-radius: 6px;
   background-color: #706caa;
   margin-bottom: 8px;
   margin-left: 8px;
   margin-right: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
   transition-duration: 1s;
}

.tagcloud a:hover { 
   color: #706caa;
   border: 1px solid #706caa;
   border-radius: 6px;
   background-color: #ffffff;
   transition-duration: 1s;
}

/************************************
* main & sidebar *
************************************/

.no-scrollable-main .main {
   height: auto;
}

/************************************
* entry-card *
************************************/

.entry-card {
   border: 1px solid #706caa;
   border-radius: 6px;
   background-color: #ffffff;	
   padding-top: 20px;
   padding-bottom: 16px;
   padding-left: 20px;
   padding-right: 20px;
   transition-duration: 1s;
}

.entry-card-title {
   font-size: 18px;
   color: #474a4d;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   overflow: hidden;
   padding-top: 8px;
} 

.entry-card-snippet {
   font-size: 18px;
   color: #474a4d;
   text-align: justify;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 6;
   overflow: hidden;
}

.card-thumb img {
   border-radius: 6px;
   filter: grayscale(100%);
   opacity: 0.8;
   transition-duration: 1s;
}

.cat-label {
   display: none !important;
}

.entry-card-meta {
   color: #706caa;
   margin-bottom: 20px;
   margin-right: 20px;	
}

.entry-card:hover {
   border: 1px solid #706caa;
   border-radius: 5px;
   transform: scale(1.01);
}

.a-wrap:hover .card-thumb img {
   filter: grayscale(0%);
   opacity: 1.0;
   transition-duration: 1s;	
}

/************************************
* entry : title & link & date *
************************************/

.entry-title {
   font-size: 24px;
   color: #474a4d;
   text-align: center;
   border-bottom: 1px solid #706caa;
   padding-bottom: 8px;
}

.cat-link {
   text-decoration: none;
   display: inline-block;
   font-size:14px;
   color: #474a4d;
   background-color: #ffffff;
   border: 1px solid #474a4d;
   border-radius: 6px;
   word-break: break-all;
   margin-right: 3px;
   transition-duration: 1s;
}

.cat-link:hover {
   color: #ffffff;
   background-color: #474a4d;
   transition-duration: 1s;
   opacity: 1;
}

.tag-link {
   text-decoration: none;
   display: inline-block;
   font-size:14px;
   color: #706caa;
   background-color: #ffffff;
   border: none;
   border: 1px solid #706caa;
   border-radius: 6px;
   word-break: break-all;
   margin-right: 8px;
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 8px;
   padding-right: 8px;
   transition-duration: 1s;
}

.tag-link:hover {
   color: #ffffff;
   background-color: #706caa;
   transition-duration: 1s;
}

.article .entry-categories-tags {
   margin-bottom: 30px;
}

.date-tags {
   color: #706caa;
}

.article-header .post-date {
   display: block;
   text-align: right;
   margin-right: 0px;
}

.article-header {
   margin-bottom: 80px;/
}

/************************************
* entry : main text *
************************************/

.entry-content p {
   text-align: justify; 
   letter-spacing: 0.10em; 
   line-height: 2.0;    
}

.wp-block-separator {
    border-top-width: 1px !important;
}

.blank-box {
   border-width: 1px;
   padding-top: 20px !important;
   padding-bottom: 20px !important;
   padding-left: 20px !important;
   padding-right: 20px !important;	
}

.entry-content .blank-box p {
   letter-spacing: normal !important;
   line-height: normal !important;
   text-align: left !important;
}

/************************************
* entry : content *
************************************/

.entry-content a:hover {
   color: #474a4d;
}

/************************************
* sns-share-buttons *
************************************/

.sns-share .sns-buttons a {
   color: #ffffff;
   border: 1px solid #474a4d;
   border-radius: 6px;
   background-color: #474a4d;
   height: 36px;
   width: 36px;
   transition-duration: 1s;
}

.social-icon {
   font-size: 20px;
}

.article-footer .sns-share .sns-share-buttons a .button-caption {
   display: none;
}

.sns-share .sns-buttons a:hover {
   color: #474a4d;
   border: 1px solid #474a4d;
   border-radius: 6px;
   background-color: #ffffff;
   transition-duration: 1s;
   opacity: 1;
}

/************************************
* prev & next *
************************************/

.pager-post-navi a.prev-post {
   font-size:14px;
   color: #474a4d;
   text-align: center;
   border: 1px solid #706caa;
   border-radius: 6px;
   background-color: #ffffff;
   margin-right: 8px;
   transition-duration: 1s;
}

.pager-post-navi .prev-post a:hover {
   transition-duration: 1s;
}

.pager-post-navi a.next-post {
   font-size:14px;
   color: #474a4d;
   border: 1px solid #706caa;
   border-radius: 6px;
   background-color: #ffffff;
   margin-left: 8px;
   transition-duration: 1s;
}

.pager-post-navi .next-post a:hover {
   transition-duration: 1s;
}

.pagination-next,
.pagination-next-link {
   display: none;
}

.prev-next-home {
   pointer-events: none;
}

/************************************
* archive *
************************************/

.archive-title {
   color: #474a4d;
   text-align: center;
}

/************************************
* contact-form *
************************************/

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
   border: 1px solid #706caa;
   border-radius: 6px;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form textarea:focus {
   border: 1px solid #474a4d;
   border-radius: 6px;
   outline: none;
}

.wpcf7-form input[type="submit"] {
   font-size: 18px;
   color: #ffffff;
   border: 1px solid #706caa;
   border-radius: 6px;
   background-color: #706caa;
   transition-duration: 1s;
}

.wpcf7-form input[type="submit"]:hover {
   color: #ffffff;
   border: 1px solid #bbbcde;
   border-radius: 6px;
   background-color: #bbbcde;
   transition-duration: 1s;
}

/************************************
* post date-tags *
************************************/

.page-id-104 .date-tags,
.page-id-216 .date-tags,
.page-id-220 .date-tags {
   display: none;
}

/************************************
* icon *
************************************/

.post-date::before {
   content: "❖";
}

.cat-link .fa-folder {
    display: none;
}

.entry-card-meta .fa-clock {
    display: none;
}

.tag-cloud-link .fa-tag {
    display: none;
}

.entry-categories-tags .fa-tag {
    display: none;
}

.post-date .fa-clock {
    display: none;
}

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

.prev-next-home .fa-home {
   display: none;
}

.archive-title .fa-folder-open,
.archive-title .fa-tags {
    display: none;
}

.page-id-104 .sns-share,
.page-id-216 .sns-share,
.page-id-220 .sns-share {
   display: none;
}

.entry-content a[target="_blank"]::after {
   font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
   font-weight: 800 !important;
   font-size: 14px !important;
   color: #474a4d !important;
   margin-left: 3px !important;
   content: "\f14c" !important;
   display: inline-block !important;
   vertical-align: middle;
}

/************************************
* go-to-top-button *
************************************/

.go-to-top {
   right: 80px;
   bottom: 30px;
}

.go-to-top-button {
   height: 120px;
   width: 120px;
   animation: fuwafuwa 2s ease-in-out infinite alternate;
}

.go-to-top-button:hover {
   animation: furafura 2.5s ease-in-out infinite; 
}

.go-to-top-button.leaving {
   animation: none !important;
   transform: translateY(0) rotate(0deg) !important;
   transition: transform 0.4s ease-out;
}

@keyframes fuwafuwa {
   0% { transform: translateY(0);
}
   100% { transform: translateY(-8px);
}
}

@keyframes furafura {
   0%, 100% {
   transform: translateY(-0px) rotate(0deg);
}
   20% {
   transform: translateY(-8px) rotate(-8deg);
}
   40% {
   transform: translateY(-6px) rotate(6deg);
   }
   60% {
   transform: translateY(-4px) rotate(-4deg);
   }
   80% {
   transform: translateY(-2px) rotate(2deg);
}
}

/************************************
* footer *
************************************/

.footer-container {
   border-radius: 6px; 
   background-color: #ffffff;
   margin-top: 30px;
   margin-bottom: 30px;
   padding-top: 16px;
   padding-bottom: 16px;
}

.footer-bottom {
   margin-top: 0px;
}

.logo-footer img {
   max-height: 60px;
   width: auto;
}

.footer-bottom-logo {
   position: static;
   bottom: auto;
   margin-bottom: 18px;
   float: none;
}

.navi-footer-in > .menu-footer {
   justify-content: center;
   margin-bottom: 12px;
}

.navi-footer-in a {
   font-size: 14px;
   color: #474a4d !important;
}

.navi-footer-in a:hover {
   font-weight: bold;
   color: #474a4d !important;
}

.footer-bottom .fnm-text-width .menu-footer li {
   color: #474a4d !important;
   line-height: 1;
}

.footer-bottom-content {
   text-align: center;
   float: none;
   margin-bottom: -2px;
}

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

/************************************
* 1024px以上 *
************************************/

/* navi none */
@media screen and (min-width: 1024px) {
   nav#navi {
   display: none;
}
}

/************************************
* 1023px以下 *
************************************/

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

/************************************
* 834px以下 *
************************************/

/*mobile body main color*/
@media screen and (max-width: 834px) {
body {
   background-color: #ffffff !important;
}
}

/* mobile shadow none */
@media screen and (max-width: 834px) {
.mobile-header-menu,
.mobile-header-menu-buttons,
#header-container,
#header,
.header,
.navi {
   box-shadow: none !important;
   border-bottom: none !important;
}
}

/* mobile-header-menu */
@media screen and (max-width: 834px) {
.mobile-header-menu-buttons, .mobile-menu-buttons, .menu-button {
   color: #474a4d;
   border-radius: 6px; 
   background-color: #bbbcde;
   margin-top: 6px;
   margin-bottom: 6px;
   margin-left: 6px;
   margin-right: 6px;
}

@media screen and (max-width: 834px){
.mobile-menu-buttons .menu-caption{
   display: none;
}

.menu-close-button {
   text-align: right;
margin-top: 20px;
   padding-right: 20px;
}

/* mobile-header none */
@media screen and (max-width: 834px) {
.header {
   display: none;
}
}

/* mobile-header-container none */
.header-container {
   display: none !important;
}
}
	
/* mobile entry : main text */
@media screen and (max-width: 834px) {
.article-header h1 {
   font-size: 24px;
}
}

@media screen and (max-width: 834px) {
.entry-content > *,
.entry-content p {
   font-size: 16px !important;
}
}

/* mobile sns-share-buttons */
.sns-share-buttons {
   flex-wrap: nowrap;
   justify-content: center;
}

@media screen and (max-width: 834px) {
.sns-share-buttons a {
   color: #ffffff;
   border: 1px solid #474a4d;
   border-radius: 6px;
   background-color: #474a4d;
   height: 36px !important;
   width: 36px !important;
   transition-duration: 1s !important;
}
}

/* go-to-top-button */
@media screen and (max-width: 834px) {
.go-to-top-button {
   position: fixed !important;
   bottom: 6px !important;
   right: 6px !important;
   transform: none !important;
   z-index: 9999 !important;
}
}

/* mobile-footer-menu */
@media screen and (max-width: 834px) {
#footer {
   font-size: 12px;
   color: #474a4d;
   border-radius: 6px; 
   background-color: #bbbcde;
   margin-top: 6px;
   margin-bottom: 6px;
   margin-left: 6px;
   margin-right: 6px;
   padding-top: 0px;
   padding-top: -3px;
   padding-bottom: 3px;
}
}

@media screen and (max-width: 834px){
.navi-footer-in>.menu-footer{
   flex-wrap: nowrap;
   justify-content: center;
}
	
.navi-footer-in a{
   font-size: 80%;
}
}

/* footer-bottom-logo */
.footer-bottom-logo .footer-site-logo-image {
   max-height: 24px;
   width: auto;
}	
	
/* copyright */
@media screen and (max-width: 834px) {
.copyright {
   font-size: 12px;
   color: #474a4d;
}
}	

/************************************
*480px以下*
************************************/

/* mobile entry : main text */
@media screen and (max-width: 480px) {
.article-header h1 {
   font-size: 22px;
	text-align: left;
}
}

@media screen and (max-width: 480px) {
.entry-content > *,
.entry-content p {
   font-size: 15px !important;
}
}