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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
a,h3 {
	line-height:1.5;
}

ol, ul {
    padding-left: unset; 
}

img {
	width:100%;
}

a {
	text-decoration:none;
}

ul {
	list-style: none;
	font-size:16px;
}


body {
	font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
}

.content {
	margin-top:unset;
}

main {
	border-radius:unset !important;
	box-sizing: border-box;
}

.sidebar {
	display:none !important;
}

.header-container,.site-content {
	max-width:1280px;
	margin:0 auto;
}

.header {
	padding-top:8px;
	background-color:#111111;
}

/* 折り返し */
.sp-tab {
	display:none;
}

/* サイドバー */
.menu-trigger {
	background-image: url("/wp-content/uploads/2026/05/moubile-menu2.png");
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	background-color:unset;
    display: block !important;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: none !important;
    padding: 0;
    z-index: 10001;
    cursor: pointer;
    outline: none;
	animation: Switch 0.5s ease-in forwards;
}
	
.menu-trigger.is-active {
	background-image: url("/wp-content/uploads/2026/05/mobiel-menu3.png");
		animation: Switch 0.5s ease-in forwards;
}
	
@keyframes Switch {
  0% {
    opacity: 0;
  }
	50% {
		opacity: 0.1;
	}
  100% {
    opacity: 1; 
  }
}

.custom-direct-menu {
	position: fixed;
    top: 0;
	right: 0;
	opacity:0;
	display:block;
	width:0;
	height:auto;
	padding: 80px 12px 12px;
	animation: slideFadeOut 0.5s ease-in forwards;
	visibility: hidden;
	background-color:black;
	font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
	font-size:16px;
	color:#d8d8d8;
	z-index: 10000;
}

@keyframes slideFadeOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(280px); 
  }
}

.custom-direct-menu.is-active {
	display:block;
	animation: FadeIn 0.5s ease-in forwards;
	width:280px;
	height:auto;	
	visibility: visible;
}
	
@keyframes FadeIn {
  from {
    opacity: 0;
    transform: translateX(280px); 
  }
  to {
    opacity: 1;
    transform: translateX(0);  
  }
}

.search-edit, input[type="text"] {
	width:256px;
}

.widget_recent_entries ul li a,.widget_categories ul li a{
	font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
	font-size:16px;
	color:#d8d8d8;
}

/* ヘッダーロゴ　*/
.header-logo1 {
	width: 600px;
	margin: 200px auto 0;	
}

.header-logo2 {
	display:none;
}

.middle-box {
	width: 100%;
	background-image: url("/wp-content/uploads/2026/05/middle-img1-scaled.png");
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	height:300px;
	margin-top :-12px!important;
}
/* body */
body {
	background-color: #dddddd;
}

body.categoryid-4 {
	background-color:white;
}

/* メイン */
.site-main {	
	padding:0 40px;
}

.category-main {
	max-width:880px;
	width:100%;
	padding:40px 40px 0;
	margin: 0 auto;
	background-color: white;
}

/* トップページ */

/* 個別投稿ページ　アイキャッチ */
.single .header-logo1 {
	margin: 54px auto 0;	
}

.middle-box1 {
	background-image:unset;
	background-color:#111111;
	height:auto;
	padding-bottom:16px;
	margin-top:-20px;
}

.hero-tagline,.log-tagline  {
  	font-size: 12px;
	color:white;	
	text-align:center;
	line-height:3.2;
	font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
    font-weight: 500; 
}

.log-tagline {
	font-size: 15px;
	font-family: "EB Garamond", serif;
	font-weight:bold;
	margin-bottom:8px;
	display: flex;
    align-items: center;
    gap: 8px;
	justify-content:center;
}

.log-tagline::before,.log-tagline::after {
	content: "";
    width:72px;
    height: 2px;
    background: #999;
}

.log-img {
	width:72px;
	margin:0 auto;
	display:block;
}

.single article .entry-title {
	font-size:24px;
	margin:32px 0 ;
}

.single  .entry-eyecatch-wrapper {
	max-width:680px;
/* 	margin-bottom:80px; */
}

.single .entry-eyecatch {
	width:100%;
	display:none;
}

.single .entry-date {
	font-size:12px;
	text-align:right;
	font-weight:bold;
}

/* 個別投稿ページ　パンクズリスト */
.breadcrumb {
	width:100%;
}

.breadcrumb,.breadcrumb-caption {
	color:#333!important;
	font-size:14px;
}

.breadcrumb.sbp-main-before {
	padding: 0;
}

.breadcrumb.sbp-main-before {
	background-color:unset;
}

.breadcrumb .fa-home {
    display: none;
}

.breadcrumb-home a::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("/wp-content/uploads/2026/06/home-ikon.png") center/contain no-repeat;
    margin-right:2px;
}

.fa-folder {
    display: none;
}

.breadcrumb-item a[href*="cat=4"]::before {
    content: "";
    display: inline-block;
    width: 15px;
	height:15px;
    background: url("/wp-content/uploads/2026/06/log-ikon.png") center/contain no-repeat;
    margin-right:2px;
}

/* 個別投稿ページ　メイン */

.single footer {
	background-color:white;
}

.wp-block-paragraph {
	font-size:16px;
	line-height: 1.75;
	color:#1f2c2c;
}

/* 執筆用css */
.wp-block-list {
	margin-bottom:unset;	
}

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

.toc {
	display:none;
}

.ttl2 {
	position:relative;
	background: url("/wp-content/uploads/2026/06/title3-1.png") center/contain no-repeat;
	background-size:100% 100%;
	width:330px;
	height:121px;
	gap:unset!important;
	justify-content:center!important;
	align-items:center!important;
	text-align:center;
	margin-bottom:-30px!important;
}

.ttl2 h2 {
	width:90%;
	padding-top: 6px;
}

.list-ttl {
	width:96%;
	text-align:center;
	border-bottom:1px solid black;
	margin:0 auto!important;
	padding:16px 0;
}

.single h3 {
	font-size:20px;
	margin-bottom:8px;
}

.waku1 {
	background: url("/wp-content/uploads/2026/06/waku1-scaled.png") center/contain no-repeat;
	background-size:100% 100%;
	padding:48px 48px 96px;	
}

.rectan {
	background: url("/wp-content/uploads/2026/06/waku1-scaled.png") center/contain no-repeat;
	background-size:100% 100%;
}

.yumin {
	font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}

.s-mbottom {
	margin-bottom:12px;
}

.zero-mbottom {
	margin-bottom:0!important;
}

.kakoi {
	border-bottom:1px solid black;
    padding: 12px;
	font-size:14px;
	width:96%;
	margin:0 auto!important;
}

.kakoi:last-of-type {
	border-bottom:none;
}

.wp-block-group.rectan h3 {
	margin-bottom:20px;
}

.wp-block-group.rectan .wp-block-paragraph  {
	margin-bottom:28px;
}

/* 記事一覧 */
.article-list {
	display: grid; 
	gap: 20px; 
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	width:100%;
	margin:0 auto;
}

.article-list-title {
	padding-left:16px;
	margin-bottom:12px;
}

.article-list-title .log-ikon {
	width:24px;
}

.article-list-title h2{
	font-family: "EB Garamond", serif;
	font-size:24px;
	font-weight:bold;
}

.article-list-title p{
		font-size:15px;
}

.log-entry {
	padding:16px;
	font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
	margin-bottom:16px;
}

.log-entry::after {
    clear: both;
    content: "";
    display: block;
}

.log-entry h3 {
	font-size:15px;
	font-weight:bold;
	color:black;
	margin:8px 0;
	letter-spacing:1px;
}

.excerpt {
	font-size:12px;
	color:black;
	margin-bottom:12px;
}

.log-date {
	font-size:12px;	
	text-align:right;
	color:black;
}

.attachment-medium.size-medium.wp-post-image {
	width:100%;
}

/* 投稿記事 */
.article-header {

}

.entry-title {

}

/* フッター */
.custom-footer {
	max-width:1280px;
	width: 100%;
	height:220px;
	margin:0 auto;
	background-image: url("/wp-content/uploads/2026/05/footer-bg-scaled.png"); 
	background-size:100% 100%; 
	background-repeat:no-repeat; 
 	background-position: bottom; 
	text-align: center;
	font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
	color:white;
}

.footer-copyright {
	padding-top:160px;	
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1060px以下*/
@media screen and (max-width: 1060px){
  /*必要ならばここにコードを書く*/

}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
.custom-footer {
	background-size:contain;
}

.footer-copyright {
	padding-top:180px;
}
/* 執筆用 css */
.tab-column {
	flex-direction:column;
}

.header-logo1 {
	display:none;
}
	
.header-logo2 {
	display:block;
	width:372px;
	margin: 140px auto 0;
}
	
.single .header-logo2 {
	margin: 80px auto 0;	
}

.middle-box {
	background-size: cover;
    background-repeat: no-repeat;
}
	
.article-list {
	gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(222px, 1fr));
}	
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
#main {
	padding:20px 20px 0;	
}
	
.custom-footer {
	height:100px;
	background-image: url("/wp-content/uploads/2026/06/sp-footer-bg.png"); 
	background-size:100%;
}

.footer-copyright {
	padding-top:60px;
}
	
.single .entry-eyecatch-wrapper {
	margin-bottom:24px;	
}
	
.single h2{
	font-size:20px;
}

.wp-block-paragraph,.wp-block-list {
	font-size:14px;
}
	
.sp-tab {
	display:block;		
}
/* 執筆用 css */
.ttl2 {
	width:264px;
	height:100px;
}
	
.sp-column {
	flex-direction:column;
}
	
.rectan {
	padding:12px;		
}
	
.header-logo2 {
	margin: 100px auto 0 !important;
	width:300px;
}
	
.middle-box {
	background-position: bottom;
    background-size: contain;
	height:188px;
}
	
.hero-tagline {
	background-color: #111111;	
}
	
.log-tagline {
	margin-bottom:unset;	
	background-color: #111111;	
}

}