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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* PC時メインビジュアルの表示位置を調整したい場合は以下を変更する */

/*フルワイドにした時の横スクロールバー対策*/
body {
  overflow-x: clip;
}

.logo-footer {
display: none;
}

/***** 全体 *****/

body {
	background-color: #ffffff;
}


/***** ヘッダー *****/

.header-container {
	padding: 10px 0;
	background-color: #1C1C1C;
}

.navi {
    background-color: #1C1C1C;
}

.navi-in a {
	color: #ffffff;
    font-size: 14px;
}

.navi-in a:hover {
	color: #cccccc;
	background-color: #1C1C1C;
}

.navi-in a::after {
	content: '';
    position: absolute;
    bottom: -1px;
    left: 0%;
    width: 100%;
    height: 1px;
    background: #749678;
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;
}

.navi-in a:hover::after {
    transform: scale(1, 1);
}

.site-name-text-link {
    color: #ffffff;

}


/***** アピールエリア *****/

.appeal {
	background-image: url(https://itsuka-aruhi.net/wp/wp-content/uploads/2022/11/DSCF2035-2.jpg);
	min-height: calc(100vh - 80px);
	position: relative;
	background-size: cover;

}

.appeal::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(69, 69, 69, .3); /* 画像の明るさ設定 */
}

.appeal-in {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.appeal-content {
	background-color: transparent;
	width: 100%;
	padding: 2em 1em;
}

.appeal-message p {
	color: #ffffff;
	font-size: 0.9em;
}


/***** スクロール *****/

.skinadd-topmv-scroll {
    display: block;
    color: #ffffff;
    font-size: 12px;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 40px;
    left: 0;
    z-index: 1;
}

@keyframes topmv_scroll {
  0% {
        translate: 0 -50px;
  }
 40% {
    opacity: 1;
  }
  80% {
    translate: 0 0;
  }
  0%, 80%, 100% {
    opacity: 0;
  }
}

.skinadd-topmv-scroll::before {
    display: inline-block;
    content: "";
    border: solid currentcolor;
    border-width: 0 0 1px 1px;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    margin: auto;
    rotate: -45deg;
    z-index: 1;
    animation: topmv_scroll 2.5s infinite;
}

/***** 通知エリア *****/

.notice-area {
    overflow: hidden;
    white-space: nowrap;
	padding: 0.6em;
    font-size: 0.8em;
	background-color: #333333;
}

.notice-area-message {
   display: inline-block;
   padding-left: 100%; /* 初期位置を画面の右端に設定 */
   animation: slideMessage 12s linear infinite; /* アニメーション適用 */
}

@keyframes slideMessage {
   to {
   transform: translateX(-100%); /* 左へ移動 */
   }
}


/***** エントリーカード *****/






















.related-entry-card-title, .entry-card-title {
    -webkit-line-clamp: 2;

}





.front-top-page .front-page-type-category .entry-card-snippet {
	display: block;
}







.mt_name-label {
	display: none;
}

.entry-card-snippet .disc_place {
	margin-left: 10px;
}

.entry-card-snippet .disc_date {
    height: 20px;
    padding: 2px 8px;
	margin-left: 10px;
    line-height: 1;
    background-color: rgb(240, 240, 240);
    border-radius: 10px;
}

.entry-card-snippet dt.date::before {
	content: "\f272";
	font-family: "Font Awesome 5 Free";
	padding-right: 5px;
}

.entry-card-snippet dt.route::before {
	content: "\f279";
	font-family: "Font Awesome 5 Free";
	padding-right: 3px;
}

.entry-card-snippet dt.place::before {
	content: "\f3c5";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	padding-right: 5px;
}

.entry-card-snippet dl {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.entry-card-snippet dt {
	width: 30%;
	padding: 4px 0;
}

.entry-card-snippet dd {
	width: 70%;
	text-align: right;
	padding-right: 5px;
	padding: 4px 0;
}

.list-new-entries .list-title, .front-top-page .front-page-type-category .list-columns .list-column:first-child h1 {
 	margin-top: 1.4em;
 	margin-bottom: .4em;
}

 .navi,  .site-name-text,  .sub-caption,  .mobile-menu-buttons .menu-caption,  .navi-footer,  .menu-drawer,  .logo-menu-button,  .list-new-entries h1,  .list-columns h1,  .list-columns::after,  .related-entry-heading,  .comment-title,  .comment-btn,  .sidebar h3,  .footer h3,  .main-widget-label, .blank-box.bb-tab .bb-label {
 	font-family: "Spectral",YuGothic,"Yu Gothic",Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
 	font-weight: 400;
	letter-spacing: .1rem;
}

.list-new-entries h1, .front-top-page .front-page-type-category .list-columns .list-column:first-child h1 {
	font-size: 48px;
	position: relative;
}

.list-title {
	text-align: center;
  	font-size: 18px;
 	margin-top: 2em;
 	margin-bottom: 1em;
}

.list-new-entries h1::before {
	content: "New Post";
}

.list-new-entries h1::before, .front-top-page .front-page-type-category .list-columns .list-column:first-child h1::before, .front-top-page :where(.front-page-type-category-3-columns, .front-page-type-category-2-columns) .list-columns::after {
	  display: block;
	  content: "New Post";
	  color: var(--skin-grayish-site-main-hover);
		color: #749678;
	  width: -moz-fit-content;
	  width: fit-content;
	  height: 2em;
	  position: absolute;
	  top: -1em;
	  left: 0;
	  right: 0;
	  margin: auto;
	  z-index: 1;
}

.list-new-entries .list-title-in {
	font-size: 20px;
	padding: 0;
	white-space: normal;
}

.list-title-in {
  position: relative;
  display: inline-block;
}

.list-new-entries .list-title-in::before,  .list-columns .list-title-in::before {
  display: block;
  content: "";
  background-color: #749678;

  width: 2ch;
  height: 2px;
  position: absolute;
  bottom: -24px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}

.list-title-in::after {
  height: 0;
  background-color: none;
}

.front-top-page .front-page-type-category .list-columns .list-column:first-child h1::before, .front-top-page :where(.front-page-type-category-3-columns, .front-page-type-category-2-columns) .list-columns::after {
  content: "Category";
}

.list-columns .list-title-in,  .content-bottom .widget-content-bottom-title {
  font-size: 20px;
  font-weight: 400;
  white-space: normal;
  padding: 4px 0;
  border-bottom: none;
}

.front-top-page .list-columns .list-column {
  position: relative;
}

.front-top-page .list-columns:not(.fpt-3-columns, .fpt-2-columns) .list-column:nth-child(2n+1)::before {
	display: block;
	content: "";
	background-color: #f5f4f1;
	background-image: url(https://itsuka-aruhi.net/wp/wp-content/uploads/2025/09/texture.png); 
	width: 100vw;
	height: 100%;
	margin: 0 calc(50% - 50vw);
	position: absolute;
	inset: 0;
	z-index: -110;
}

.front-top-page .list-columns:not(.fpt-3-columns, .fpt-2-columns) .list-column:nth-child(2n)::before {
   background-color: #ffffff;
}

.front-top-page .list-columns .list-column {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.a-wrap:hover {
    background:rgba(214,233,202,0.5);
}

/***** プロフィール *****/

.content-bottom {
    margin: 0;
}

.content-bottom .widget_author_box, .content-top .widget_author_box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 2rem 0 6rem;
	position: relative;
}

.content-top .widget_author_box {
	padding: 2rem 0 2rem;
}

.content-bottom .widget_author_box .author-box {
	margin-top: 5rem;
}

.content-bottom .widget_author_box h2+.author-box {
	margin-top: 0;
}

.content-bottom .widget_author_box::before {
	/*background-image: url(https://itsuka-aruhi.net/wp/wp-content/uploads/2022/11/IMG_0278.jpg);*/
}

.content-bottom .widget_author_box::before,.content-bottom .widget_author_box::after {
                display: block;
                content: "";
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                width: 100vw;
                height: 100%;
                margin: 0 calc(50% - 50vw);
                position: absolute;
                top: 0;
                left: 0;
                z-index: -5;
            }

.content-bottom .widget_author_box::after {
	background-image: none;
	background-color: #ffffff;
	opacity: 0.5;
	z-index: -1;
	display: block;
	content: "";
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100vw;
	height: 100%;
	margin: 0 calc(50% - 50vw);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -5;
}

            :where(.main,.content-bottom,.content-top) .author-box {
                display: grid;
                place-content: center;
                grid-template-rows: auto auto;
                grid-template-columns: minmax(auto,180px) minmax(500px,1fr);
                row-gap: 0;
                -moz-column-gap: 2.5em;
                column-gap: 2.5em;
                background-color: rgba(255, 255, 255, .9);
                width: -moz-fit-content;
                width: fit-content;
                padding: 4em;
                margin-bottom: 0;
                position: relative;
            }

            :where(.content-top) .author-box {
                grid-template-columns: minmax(auto,150px) 1fr;
                width: 100%;
                background-color: rgba(255, 255, 255, .9);
            }

            :where(.main) .author-box {
                grid-template-columns: minmax(auto,150px) 1fr;
                padding: 2em;
                background-color: rgba(255, 255, 255, .9);
                width: 100%;
            }

            :where(.main,.sidebar,.content-top) .author-box::before,.author-box::after {
                display: block;
                content: "";
                width: 2.5rem;
                height: 2.5rem;
                position: absolute;
                z-index: 1;
            }

            :where(.main,.sidebar,.content-top) .author-box::before {
                border-left: solid 1px var(--LtGray_T30);
                border-top: solid 1px var(--LtGray_T30);
                top: 0;
                left: 0;
            }

            :where(.main,.sidebar,.content-top) .author-box::after {
                border-right: solid 1px var(--LtGray_T30);
                border-bottom: solid 1px var(--LtGray_T30);
                bottom: 0;
                right: 0;
            }

            :where(.main,.content-bottom,.content-top) .author-box p {
                padding: 0 0 1.5em 0;
            }

            :where(.main,.content-bottom,.content-top) .author-box .author-follows {
                padding-left: 0rem;
                border-left: 0 dashed var(--skin-grayish-site-main-hover);
                grid-row: 3;
                grid-column: 2;
            }

            :where(.main,.content-bottom,.content-top) .author-box .author-widget-name {
                color: var(--LtGray_T0);
                font-size: 12px;
                grid-column: 1;
                justify-self: center;
                align-self: flex-start;
                margin-top: -1em;
                grid-row: 2 / span 1;
            }

            :where(.main,.content-bottom,.content-top) .author-box .author-thumb {
                width: 100px;
                float: none;
                margin-top: 0;
                margin-right: 0;
                grid-row: 1;
                grid-column: 1;
                justify-self: center;
                align-self: flex-start;
            }

            :where(.main,.content-bottom,.content-top) .author-box .author-content {
                display: contents;
            }

            :where(.main,.content-bottom,.content-top) .author-box .author-content .author-name {
                align-self: flex-start;
                grid-row: 1;
                grid-column: 1;
                text-align: center;
                margin-bottom: 0;
                padding-top: 120px;
                padding-bottom: 0em;
            }

            :where(.main,.content-bottom,.content-top) .author-box .author-content .author-description {
                text-align: left;
                border-top: none;
                border-left: 1px dashed var(--skin-grayish-site-main-hover);
                margin: 0;
                padding-left: 2rem;
                grid-row: 1/3;
                grid-column: 2;
            }

            .content-bottom .widget_author_box+.widget-content-bottom {
                padding-top: 2.5rem;
            }

            .content-bottom .widget_author_box+.widget-content-bottom.widget_popular_entries {
                padding-top: 4.5rem;
            }

            .content-bottom .content-bottom-in .widget-content-bottom:first-child:not(.widget_author_box) {
                padding-top: 2.5rem;
            }

            .content-bottom .content-bottom-in .widget-content-bottom:first-child.widget_popular_entries {
                padding-top: 4.5rem;
            }

            .content-bottom .widget-content-bottom.widget_mobile_text,.skin-grayish .content-bottom .widget-content-bottom.widget_mobile_ad {
                display: none;
            }

:where(.main,.content-bottom,.content-top) .author-box .author-content .author-description {
    text-align: left;
    border-top: none;
    border-left: 1px dashed #cccccc;
    margin: 0;
    padding-left: 2rem;
    grid-row: 1 / 3;
    grid-column: 2;
}

.author-box p {
	
font-size: 14px;
	line-height: 1.7;
    margin-bottom: 0 !important;
    overflow-wrap: anywhere;
}

.author-box .author-follows {
    padding-left: 2rem;
 
}

.author-box .sns-follow-buttons a.follow-button {
   color: #749678;
    border: 1px solid #749678;
    
}

/***** フッター *****/


.footer {
	margin-top: 0;
	background-color: #434343;
	background-image: url(https://itsuka-aruhi.net/wp/wp-content/uploads/2025/09/texture.png); 
	/*background-image: url(https://itsuka-aruhi.net/wp/wp-content/uploads/2024/08/bg_washi_green.jpg);*/
}

.navi-footer-in a {
    color: #ffffff;
}

.navi-footer-in a:hover {
    background-color: transparent;
	    color: #ffffff;
}

.copyright {
margin-top: 24px;
		margin-bottom: 10px;
color: #ffffff;
}
	

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){

.header-container {
	padding: 0;
}

.content-bottom .content-bottom-in {
	padding: 0 28px;
}

    .ect-vertical-card .entry-card-wrap {
        width: 49%;
    }


}/* ←消しちゃダメ

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

:is(.front-page-type-category) .list-columns .list-column .entry-card {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

:is(.front-page-type-category) .list-columns .list-column .entry-card-thumb {
        width: 45%;
    }

:is(.front-page-type-category) .list-columns .list-column .entry-card-content {
        width: 50%;
    }

:is(.front-page-type-category) .list-columns .list-column .entry-card-title {
	font-size: 14px;
}

.content-bottom .content-bottom-in {
	padding: 0 1rem;
}
	
.content-bottom .widget_author_box .author-box {
	margin-top: 5rem;
}

.content-bottom .widget_author_box h2+.author-box {
	margin-top: 0;
}

:where(.main,.content-bottom,.content-top) .author-box {
	grid-template-rows: 100px auto auto auto auto;
	grid-template-columns: 1fr;
	-moz-column-gap: 0em;
	column-gap: 0em;
	padding: 2em 1em;
	width: 100%;
}

:where(.content-bottom) .author-box {
padding: 2em;
}

:where(.main,.content-bottom,.content-top) .author-box .author-content .author-name {
	grid-row: 2;
	grid-column: 1;
	align-self: flex-start;
	justify-self: center;
	padding-top: 0;
	padding-bottom: 0em;
	width: 100%;
	text-align: center;
}

                .skin-grayish :where(.main,.content-bottom,.content-top) .author-box .author-thumb {
                    grid-row: 1;
                    grid-column: 1;
                    justify-self: center;
                    width: 80px;
                }

                :where(.main,.content-bottom,.content-top) .author-box .author-content .author-description {
                    grid-row: 4;
                    grid-column: 1;
                    margin-top: .5em;
                    padding: 1em 0 0 0;
                    border-left: 0;
                    border-top: 1px dashed var(--skin-grayish-site-main-hover);
                }

                :where(.main,.content-bottom,.content-top) .author-box .author-widget-name {
                    grid-row: 3;
                    grid-column: 1;
                    align-self: center;
                    justify-self: center;
                    margin-top: -1em;
                    padding-top: 0;
                    padding-bottom: 1em;
                }

                .skin-grayish .content-top .author-box .author-widget-name {
                    padding-top: 0;
                }

                .skin-grayish .content-bottom .author-box .author-widget-name {
                    padding-top: 0;
                }

                :where(.main,.content-bottom,.content-top) .author-box .author-follows {
                    grid-row: 5;
                    grid-column: 1;
                    justify-self: center;
                    border-left: 0;
                    padding-left: 0rem;
                    width: 100%;
                }

                :where(.main,.content-bottom,.content-top) .author-box .author-follows .sns-follow-buttons,.skin-grayish .article-footer .author-box .sns-follow-buttons {
                    justify-content: center;
                }

                :where(.main,.content-bottom,.content-top) .author-box .author-content .author-name a {
                    display: block;
                    width: 100%;
                }

	
	
}/* ←消しちゃダメ



/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	
.ect-vertical-card .entry-card-wrap {
	width: 100%;
}
	
.footer-bottom.fdt-up-and-down .footer-bottom-content .navi-footer-in > ul {
        flex-direction: column;
        gap: .8em;
        margin-top: 24px;
}
	
.navi-footer-in > .menu-footer li.menu-item {
	width: 100%;
}

	
.list-new-entries h1::before, .front-top-page .front-page-type-category .list-columns .list-column:first-child h1::before, .front-top-page :where(.front-page-type-category-3-columns, .front-page-type-category-2-columns) .list-columns::after {
font-size: clamp(32px, 10vw, 48px);
        min-height: 0vw;
}
	
	
}/* ←消しちゃダメ