@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-container {
	background-color: transparent;
	position: relative;
	padding-top:24px;
}
/* タイトル横アイコン */
/* #header .site-name-text:after {
	content: '';
	display: inline-block;
	width: 70px;
	height: 70px;
	background-image: url("https://jeunessewhite.com/wp-content/uploads/2025/11/pain_icon_jw.png");
	background-size: contain;
	vertical-align: middle;
	background-repeat: no-repeat;
} */

/*フッターを最下部へoriginal*/
#footer {
	background-color: transparent;
	margin-top:0;
}
.footer-bottom {
	margin-top:0;
}
#content {
	min-height:calc(100vh - 175px);
}

/*ナビゲーションメニュー背景透明化*/
#header-container .navi {
	background-color: transparent;
}

/*サブメニュー背景透明化*/
#navi .navi-in > .menu-header .sub-menu {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}
#navi .sub-menu a {
	padding: 0 22.4px;
}
#navi .navi-in a:hover {
	background-color: rgba(0, 0, 0, 0.4);
	color: #fffd7f;
	border-radius: 10px;
	transition: all 0.5s ease; */
 }  
.front-top-page .main {
	background-color: transparent;
}

/* サブメニューあるときの矢印位置 */
.navi-in .has-icon { 
	right: 10px;
}

/* 記事背景 */
.main {
	background-color: #f1f1f1;
	border-radius: 5px;
}
#main .article {
	padding: 0 7px;
}
.archive .content-in, .category .content-in {
	width:860px;
}
.entry-title{
	margin-top: 0;
}

/*アーカイブのタイトル変更*/
.archive-title {
/* 	font-size: 28px; */
	margin-top: 0;
/* 	margin-bottom: 25px; */
	letter-spacing: 1px;
/* 	padding-left: 8px; */
}
.archive-title span {
	display: none;
}
.cf .widget-index-top-title {
	font-size: 0;
}
.cf .widget-index-top-title:before {
	font-size: 14px;
	content: "Category";
	padding-left: 10px;
	margin-bottom: 5px;
	font-weight: 700;
	letter-spacing: 1px;
}
.category-content {
	display: flex;
	align-items: flex-end;
}
.cf .category-page-content {
	margin: 0;
}
.category-page-content p {
	font-size: 19px;
	letter-spacing: 1px;
	margin: 0;
	margin-left: 10px;
}
#archive-title {
	margin: 0;
	padding-bottom: 4px;
}

/* インデックスページカスタマイズ */
.cf .widget .textwidget {
	margin: 0 10px;	
}
.cf .widget .atelier-title {
	font-size:26px;
	font-weight: bold;
	transform: translateY(-20%);
}
.atelier-wrap {
	display: flex;
	justify-content: space-between;
}
.atelier-image {
	height: 300px;
	width: auto;
}
.atelier-wrap {
	margin-bottom: 30px;
}
.atelier-line hr {
	border:none;
	border-top: dotted 15px #ffbba6;
	height:20px;
	width:35%;
	margin: 0 auto;
}
/* アトリエの郵便受カテゴリ画像変更 */
.category-mailbox-post img {
	display: none;
} 
.category-mailbox-post .entry-card-thumb {
	text-align: center;
	background-color: #ffffff;
	border-radius: 7px;
 	background-image: repeating-linear-gradient(-45deg,#fff, #fff 7px,transparent 0, transparent 14px); 
}
.category-mailbox-post .entry-card-thumb:before {
	font-family: "Font Awesome 5 Free";
	font-size: 40px;
	content: '\f0e0';
	margin: 20px 0; 
}

/* ウィジェットのカスタムhtmlのCSS */
.atelier-caption {
	display:flex;
	flex-direction: column;
}
.atelier-caption a {
	letter-spacing: 1px;
	font-weight: bold;
	padding: 3px 5px;
	margin-bottom: 3px;
	background-color: rgba(255, 255, 255, 1);
	text-decoration:none;
	border-radius: 2px;
}
.atelier-caption a:before {
	font-family: "Font Awesome 5 Free";
	font-size: 15px;
	content: '\f105';
	padding:0 3px; 
}
.atelier-caption a:hover {
	background-color: #fcffc7;
	text-decoration:none;
}


/* カテゴリーリストに非表示 */
/* 机 */
.widget_categories .cat-item-5 a {
	display:none; 
}

/* 固定ページタイトル横カスタマイズ */
/* 玄関 */
#post-38 .entry-title:after {
	content:'/ Flowers';
	font-size: 19px;
	letter-spacing: 1px;
	margin-left: 10px;
}
/* 机 */
#post-246 .entry-title:after {
	content:'/ Notes';
	font-size: 19px;
	letter-spacing: 1px;
	margin-left: 10px;
}
/* 郵便受け */
#post-318 .entry-title:after {
	content:'/ Mail';
	font-size: 19px;
	letter-spacing: 1px;
	margin-left: 10px;
}
/* 六角堂 */
#post-464 .entry-title:after {
	content:'/ Rokkakudo';
	font-size: 19px;
	letter-spacing: 1px;
	margin-left: 10px;
}

/* 固定ページ郵便受けカスタマイズ */
#post-318 .entry-content {
	margin-top: 30px;
	margin-bottom: 30px;
}
#post-318 .entry-content .wp-block-latest-posts__post-title {
	font-size: 19px;
	font-weight: 600;
	text-decoration: none;
	display: flex;
	align-items: flex-start;
	line-height: 1.5;
	color: transparent;
	background-image: linear-gradient(to right, #ff8d6b 0%, #ff8d6b 50%, #7764af 50%, #7764af 100%);
	background-size: 200% 100%;
	background-position: 100% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	transition: background-position 0.4s linear;
/* 	color: transparent; 波の動き
	background-image:
    linear-gradient(
      110deg,
      #ff8d6b 30%,
      #7764af 45%,
      #ff8d6b 60%
    );
	background-size: 200% 200%;
	background-position: 0% 50%;
	background-clip: text;
	-webkit-background-clip: text;
	animation: wave 3s linear infinite; */
}

/* テキスト選択時の文字色変更 */
#post-318 .entry-content .wp-block-latest-posts__post-title::selection {
  color: #7764af;
}

#post-318 .entry-content .wp-block-latest-posts__post-title:hover {
	background-position: 0 100%;
}

#post-318 .wp-block-latest-posts__post-date:before {
	font-family: "Font Awesome 5 Free";
	font-size: 19px;
	content: '\f0e0';
	font-weight: 600;
	padding-right: 10px; 
	display: inline-block!important;
	flex-shrink: 0!important;
	transform: translateY(0.05em); 
}

#post-318 .wp-block-latest-posts__list li {
	display: flex;
	flex-direction: column-reverse; /* 下の要素を上に、上の要素を下に */
}

/* 郵便受けページ日付 */
#post-318 .wp-block-latest-posts__post-date {
	font-size: 15px;
	font-weight: 500;
}
/* 郵便受け各ページ日付 */
.category-mailbox-post .post-date {
	display: block!important;
	font-size:12px;
}

/* 最新の投稿カスタマイズ */
.wp-block-latest-posts__post-full-content {
	border-left: 6px dotted #c5c5c5; 
	padding-left: 15px; 
	margin-left: 18px;
	margin-top: 8px;
}
#post-246 .wp-block-latest-posts__post-title {
	/* 机タイトルリンク無効 */
	pointer-events: none;
	cursor: default;
	text-decoration:none;
}
.article .wp-block-latest-posts__list li {
	margin-bottom: 18px;
}

/* トグル */
.toggle-checkbox:checked ~ .toggle-content {
	padding-bottom: 25px;
	padding-top: 10px;
}
.toggle-button {
	text-align: left;
	padding: 5px 12px;
}
.toggle-button::before {
	opacity: 0.6;
	margin-bottom: 2px;
}

/* エントリーカード */
.cat-label {
	margin: 3px;
	font-size: 12px;
	border-radius: 3px;
	border: none;
}
.ect-3-columns .entry-card-wrap {
	padding: 10px;
	border-radius: 5px;
}
.entry-card-thumb img {
	border-radius: 7px;
}
.entry-card-thumb {
	margin-top: 0;
}

/* nextprevカード */
.prev-post-thumb img, .next-post-thumb img {
	border-radius: 7px;
}
/* 記事下カテゴリー */
.entry-categories-tags .cat-link {
	border-radius: 4px;
}
/* 記事内ボックス調整 */
.entry-content .wp-block-quote, .wp-block-verse {
	border-radius: 10px;
	padding: 1.5em;
	border: none;
}

/*カテゴリーウィジェットのデザインのカスタマイズ（アイコン）*/
.cf .widget_categories {
	margin-top: 10px;
}

.cf .widget_categories ul {
	font-size: 14px;
	display: flex;
}

.cf .widget_categories > ul > li > ul {
	padding-left: 1.75em;
}

.cf .widget_categories > ul > li > ul > li ul {
	padding-left: 1.55em;
}

.cf .widget_categories a {
	padding: 0;
	font-weight: 600;
	letter-spacing: 1px;
	transition: all 0.3s ease-in-out;
}

.cf .widget_categories a:hover {
	color: #ababab;
	background-color: transparent;
}

.cf .widget_categories > ul > li > a {
	margin-top: 6px;
/* 	font-size: 1.1em; */
	margin-left: 1.5em;
}

.cf .widget_categories > ul > li > ul > li > a {
	padding-top: 5px;
	font-size: 1em;
	padding-left: 2em;
}

.cf .widget_categories > ul > li > ul > li > ul li a {
	font-size: 0.9em;
	padding-left: 2em;
}

/*アイコン管理*/
.cf .widget_categories .cat-item a:before {
	font-family: "Font Awesome 5 Free";
	font-size: 15px;
	content: '\f105';
	padding-right: 5px; 
}

.cf .widget_categories a::after {
	position: absolute;
	top: 0;
	left: 0;
	font-family: "Font Awesome 5 Free";
	font-weight: 700;
}

/* top madori */
#home-area a {
	padding:2px 3px;
	background-color: rgba(255, 255, 255, 0.7);
	text-decoration:none;
	color: #202020;
}
#home-area a:hover {
	background-color: #fcffc7;
/* 	text-decoration:none; */
	color: #ff642b;
	transition: 0.3s ease;
}

.home .article, .home .entry-content {
	margin: 0;
}
#home-area {
	position: relative;
	width: 100%;
	height: calc(100vh - 290px);
	display: flex;
	flex-direction: column;
	align-items: center;    /* 水平中央 */
	justify-content: center; /* 垂直中央 */
	color: #212121;
	margin: 0;
}
.top-bg-ct {
	height: calc(100vh - 290px);
	width: auto;
	max-width: 100%;  /* 画面外に飛び出し防止 */
}
#home-area .image-container {
	position: relative;
	display: inline-block;   /* 画像サイズに合わせる */
}
#board {
	position: absolute;
	top: -5%;
	left: 33%;	
}
#mailbox {
	position: absolute;
	top: -1%;
	left: 15.5%;
}
#entrance {
	position: absolute;
	top: 16%;
	left: 9%;
}
#rokkakudo {
	position: absolute;
	top: 31%;
	left: 4.5%;
}
#roundtable {
	position: absolute;
	top: 49%;
	left: 5%;
}
#kitchen {
	position: absolute;
	top: 67%;
	left: 9%;
}
#porch {
	position: absolute;
	bottom: 10%;
	left: 24%;
}
#field {
	position: absolute;
	bottom: 5%;
	left: 40%;
}
#bookshelf {
	position: absolute;
	top: -4%;
	right: 19%;
}
#desk {
	position: absolute;
	top: 9%;
	right: 10%;
}
#underground {
	position: absolute;
	top: 25%;
	right: 3%;
}
#tatami {
	position: absolute;
	top: 44%;
	right: 1%;
}
#laundry-pole {
	position: absolute;
	top: 63%;
	right: 4%;
}
#hut {
	position: absolute;
	top: 78%;
	right: 12%;
}

.top-memo {
	font-size:11px;
	padding-left: 5px;
	color: #232323;
}
.wp-block-latest-posts__post-title{
	font-size: 20px;
}
#footer .widget-footer-left, .footer-widgets {
	margin: 0;
	white-space: nowrap;
}
#footer-in {
	display: grid;
	grid-template-columns: 1fr auto;
}
#footer .footer-widgets { 
	grid-column: 1; 
/* 	transform: translateX(1%); */
}
#footer .footer-bottom { 
	grid-column: 2; 
	transform: translateY(-5%);
}

/* プラグインmodula */
/* #jtg-40  */
#jtg-40 .modula-item .modula-item-content .figc .jtg-description,
#jtg-470 .modula-item .modula-item-content .figc .jtg-description{
		filter: drop-shadow(1px 1px 6px #000000);
		font-size: 13px;
		font-weight: 600;
/* 		margin: 0; */
}

#jtg-40.modula-gallery .figc,
#jtg-470.modula-gallery .figc {
  position: relative;
}

#jtg-40.modula-gallery .figc .jtg-description,
#jtg-470.modula-gallery .figc .jtg-description {
  position: absolute !important;
  right: 10px;
  bottom: 5px;
  top: auto;
}

/* #footer .footer-bottom{
	display: flex;
	justify-content: flex-end;
} */

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	/* モバイル用背景 */
	#home-area a {
		padding:0 2px;
/* 		background-color: rgba(251, 255, 177, 0.7); */
		background: linear-gradient(transparent 68%, #fffd80cc 68%);
/* 		border-radius: 2px; */
		text-decoration:none;
	}
	#home-area a:hover {
		color: #f86732;
		background-color: #fffd80cc;
		text-decoration:none;
		padding:1px;
	}
	
	.archive .content-in, .category .content-in {
		width:auto
	}
	.entry-title {
		padding:0;
		font-size:26px;
	}
	.top-bg-ct {
		width: 100%;
    	height: auto;
		opacity: 0.7;
	}
	#board {
		position: absolute;
		top: -5%;
		left: 33%;	
	}
	#mailbox {
		position: absolute;
		top: 2.5%;
		left: 18%;
	}
	#entrance {
		position: absolute;
		top: 12%;
		left: 26%;
	}
	 #rokkakudo {
		position: absolute;
		top: 34%;
		left: 30.5%;
	}
	#roundtable {
		position: absolute;
		top: 44%;
		left: 40%;
	}
	#kitchen {
		position: absolute;
		top: 60%;
		left: 27%;
	}
	#porch {
		position: absolute;
		bottom: 21%;
		left: 43%;
	}
	#field {
		position: absolute;
		bottom: 8%;
		left: 33%;
	}
	#bookshelf {
		position: absolute;
		top: 12%;
		right: 40%;
	}
	#desk {
		position: absolute;
		top: 16%;
		right: 28%;
	}
	#underground {
		position: absolute;
		top: 27%;
		right: 38.5%;
	}
	#tatami {
		position: absolute;
		top: 48%;
		right: 35%;
	}
	#laundry-pole {
		position: absolute;
		top: 62%;
		right: 25%;
	}
	#hut {
		position: absolute;
		top: 90%;
		right: 23%;
	}

	
/* メニューカスタム */
	.mobile-header-menu-buttons, .mobile-menu-buttons {
		background: transparent;
		box-shadow: none;
		margin-top: 15px;
	}
	/* ハンバーガーメニュー */
	.navi-menu-icon, .menu-icon {
		color: #efefef;
		opacity: 0.9;
/* 		margin-top: 23px; */
		font-size: 28px!important;
	}
	.navi-menu-caption, .menu-caption {
		display: none!important;
	}
	/* スライドインメニュー */
	.navi-menu-close-button, .menu-close-button{
		padding: 20px;
		text-align: right;
	}
	.navi-menu-close-button span {
		color: black;
		opacity: 0.5;
		padding-right: 10px;
	}
	.navi-menu-content, .menu-content{
		background-color: rgba(255,255,255,0.8);
	}
	.mobile-header-menu-buttons #navi-menu-content .menu-drawer a {
		font-size: 17px;
		padding: 12px
		color: #dfff2d!important;
		font-weight: bold;
		letter-spacing: 1px;
		margin: 10px 6px;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
/* インデックスページカスタマイズ */
	.article ul, .article ol {
		padding-left: 0;
	}
/* 	.wp-block-latest-posts__post-full-content {
		border-left: 5px solid #faffaa; 
		padding: 0px 15px; 
		margin-bottom: 15px;
	} */
	
	.cf .widget .textwidget {
		margin: 0 10px;	
	}
	.cf .widget .atelier-title {
		font-size:26px;
		font-weight: bold;
		transform: translateY(-20%);
	}
	.atelier-caption .atelier-content {
		margin-bottom: 4px;
	}
	.atelier-wrap {
		display: flex;
		flex-direction: column;
	}
	.atelier-image {
		width: auto;
		height: auto;
		margin: 15px 0;
	}
	#footer-in {
		display: flex;   
    	justify-content: center;  
	}
	#footer .footer-bottom { 
		transform: translateY(1%);
	}
	
/* 	modula */
	.modula-best-grid-gallery .is-compact .fancybox__footer {
		position: absolute;
		bottom: 30px !important;
	}
}


/*599px以下*/
@media screen and (max-width: 599px){
  /*必要ならばここにコードを書く*/
/* 	.cf .widget_categories ul {
		display: flex;
		flex-direction: column;
	}
	.cf .widget_categories > ul > li > a {
		margin-top: 0;
	}
	.cf .widget-index-top-title {
		margin-bottom: 7px;
	} */
	
	.top-bg-ct {
    	width: 100%;
    	height: auto;
		opacity: 0.7;
	}
	#board {
		position: absolute;
		top: -6%;
		left: 30%;
	}
	#mailbox {
		position: absolute;
		top: -2%;
		left: 3.5%;
	}
	#entrance {
		position: absolute;
		top: 10.5%;
		left: 22%;
	}
	 #rokkakudo {
		position: absolute;
		top: 33%;
		left: 18%;
	}
	#roundtable {
		position: absolute;
		top: 42%;
		left: 36%;
	}
	#kitchen {
		position: absolute;
		top: 60%;
		left: 16%;
	}
	#porch {
		position: absolute;
		bottom: 21%;
		left: 40%;
	}
	#field {
		position: absolute;
		bottom: 4%;
		left: 20%;
	}
	#bookshelf {
		position: absolute;
		top: 11%;
		right: 30%;
	}
	#desk {
		position: absolute;
		top: 15%;
		right: 16%;
	}
	#underground {
		position: absolute;
		top: 26%;
		right: 26%;
	}
	#tatami {
		position: absolute;
		top: 47%;
		right: 19%;
	}
	#laundry-pole {
		position: absolute;
		top: 61%;
		right: 11%;
	}
	#hut {
		position: absolute;
		top: 97%;
		right: 8%;
	}

	.top-memo {
		transform: translateY(-20%);
	}
	

	/* カードカテゴリタグ */
	.cat-label {
		padding: 2px 4px 4px 4px;
		border-radius: 3px;
		border: none;
		color:#ffffff;	
		background-color:rgba(255, 124, 84, 0.9);
	}
	
	/* トグルのなかの最新の記事 */
	.toggle-checkbox:checked ~ .toggle-content .wp-block-latest-posts__post-full-content p {
		font-size:14px;
	}
	#jtg-40 .modula-item .modula-item-content .figc .jtg-description {
	/* 	display: inline-block; */
	/* 	margin: 0;
		padding: 0 3px;
		background-color: rgba(0, 0, 0, 0.4);  */
	/* 	background: linear-gradient(transparent 0%, #000000 30%); */
	/* 	-webkit-box-decoration-break: clone;
		box-decoration-break: clone; */
		filter: drop-shadow(1px 1px 6px #000000);
		font-size: 13px;
		font-weight: 600;
	}
}

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

}