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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/*フロント固定頁全てをまとめて非表示*/
.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}
/*固定ページでシェア・フォローボタンまとめて非表示*/
.page .sns-share,
.page .sns-follow {
    display: none;
}
/************************************
全体のバランス
************************************/
.entry-content {
padding:1em;
padding-top:0;
margin: 0 auto;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}
/*img{/*すべてのイメージに影を*/
/*box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}
/************************************
**ヘッダーロゴ
************************************/
@media screen and (max-width: 834px){/*トップページモバイルボタンの真下にスペースを作る*/
.container {
margin-top:50px;
}
}
.logo-image {
padding:0;
margin-left:0;
margin-top:1em;
margin-bottom:1em;
max-height:60px;
}
.logo {
text-align: left;
}
.logo-header img {
box-shadow: none!important;
}
/************************************
**ヘッダー　モバイル表示
************************************/
@media screen and (max-width: 1023px) and (min-width: 835px){/*835px以上で非表示にすると空白ができるので埋める*/
.admin-bar.mblt-header-mobile-buttons, .admin-bar.mblt-header-and-footer-mobile-buttons {
margin-top: 0;
}}
@media (min-width:835px){
ul.mobile-header-menu-buttons.mobile-menu-buttons{/*835px以上でモバイルヘッダーを非表示*/
display:none;
}
}
@media (max-width:834px){/*835px以上でヘッダーを非表示*/
.header-container {
display:none;
}
img.site-logo-image{/*モバイル表示ロゴ*/
max-height:35px;
padding:2px 0 0 5px;
box-shadow:none;
}
}
/************************************
**　ヘッダーメニュー
************************************/
}
.navi-in > ul{
justify-content:flex-start;
}
.navi-in > ul .sub-menu a {
padding: 0;
}
.sub-menu{/*サブメニュー*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
.sub-menu .caption-wrap {/*サブメニューを仕切る点線*/
border-top: dotted #dddddd;
background:#fff;
padding:0 0 0 2em;
margin:0;
}
.navi-in > ul .sub-menu a:hover {
transform: none!important;
}
div#header-container {/*ヘッダー下の影を非表示*/
box-shadow: none;
}
div.item-label{
font-weight:bold;
}
.post-3 .date-tags,
.post-36 .date-tags {
display: none;
}

/* 固定ページの日付を削除 */
.post-3 .date-tags,
.post-28 .date-tags {
display: none;
}

一応CSSは以下です。

あとCocoon設定の高さは指定なしでいける？のであれば、指定なしでいきましょっ！

/* #appeal,
.appeal .appeal-in {
	min-height: 24vw;
}
@media screen and (min-width: 1260px) {
	#appeal,
	.appeal .appeal-in {
		min-height: 252px;
	}
} */
.appeal {
	background-size: contain;
}

/* アピールエリア */
.appeal .appeal-in {
	width: 100%;
	/* background-color: rgba(0, 128, 128, .25); */
}
.appeal-content {
	background-color: transparent;
}
.appeal-title {
	color: #fff;
}

.appeal-message {
	color: #fff;
}
.appeal-title {
	text-shadow: 2px 2px 0 #3f3f3f;
}
@media screen and (max-width:767px) {
  .appeal-title {
    font-size: 20px;
  }
}


/* 25.07.30 */
.inline-block {
	display:inline-block;
}
body {
	/* background-image:repeating-linear-gradient(135deg, rgba(0,146,70,0.2), rgba(0,146,70,0.2) 20%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.2) 80%, rgba(206,43,55,0.2) 80%, rgba(206,43,55,0.2)); */
}
.header-container,
.main,
.sidebar,
.footer {
	background-color:transparent;
}
.menu-content {
	max-width:200px !important;
	overflow:auto;
}
.appeal {
	/* mix-blend-mode:multiply; */
	position:relative;
	background-position:bottom center;
	background-position:center;
}
.appeal::after {
	content:"";
	display:block;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.25);
	position:absolute;
	top:0;
	left:0;
	/* z-index:-1; */
}
.appeal-in {
	aspect-ratio:1260 / 397;
	min-height:auto;
	max-height:500px;
	aspect-ratio:16 / 9;
	max-height:800px;
	aspect-ratio:1920 / 1280;
	max-height:calc( 100dvh - 60px );
}
.content {
	margin-top:0 !important;
	position:relative;
}
.front-top-page .content::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-image: url('https://stg.hermanos.jp/wp-content/uploads/2025/07/logo_HERMANOS_v.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.1;
	z-index: -300;
	background-image: url('./bg_pre01.jpg');
	background-size: cover;
}
.content .contents-logo {
	padding:20px 30px;
}
.content .contents-logo img {
	width:100%;
	max-width:400px;
}
.content table td {
	padding:0;
}
.content .article .toc {
	margin-top:4.8em;
}
.content .works-column .column-right p {
	width:100%;
	height:100%;
}
.content .works-column .column-right p img {
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:75% 50%;
}
.footer-bottom {
	margin:0;
}
.cc {
	font-family:"見出ゴMB31";
	line-height:1.3;
}
.logo-image {
	margin-top:0;
}
.go-to-top-button,
.go-to-top-button:hover {
	color:#000;
	border:2px outset #000;
	background:#fff;
}
@media screen and (max-width:1023px) {
	.header-container-in.hlt-top-menu {
		flex-direction:row;
	}
	.header-container-in.hlt-top-menu .navi,
	#navi .navi-in > .menu-mobile li {
		width:auto;
	}
	.appeal {
		background-size:cover;
	}
	.footer-bottom-logo {
		float:left;
	}
	.footer-bottom-content {
		float:right;
	}
}
.no-scrollable-main .main {
	color:#000;
}
@media screen and (min-width:835px) {
	body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
		margin-top:0;
	}
}
@media screen and (max-width:834px) {
	.article h2 {
		font-size:18px;
	}
	.footer-bottom-logo,
	.footer-bottom-content {
		float:none;
		width:fit-content;
		margin:0 auto;
	}
	img.site-logo-image {
		max-height:45px;
		padding:0;
	}
	.navi-footer-in > .menu-footer li.menu-item {
		width:auto;
		border-left:1px solid var(--cocoon-thin-color);
	}
	.navi-footer-in > .menu-footer li:last-child {
		border-right:1px solid var(--cocoon-thin-color);
	}
	.navi-footer-in > .menu-footer li.menu-item a {
		font-size:12px;
		padding:0 10px;
	}
}
.article .toc {
	width:100%;
	max-width:600px;
	min-width:auto;
}
.toc-title {
	color:#fff;
	/* background-image:linear-gradient(135deg, rgba(217,7,61,0.8), rgba(217,7,61,0.8) 50%, rgba(253,205,0,0.8) 50%, rgba(253,205,0,0.8) 100%, transparent 0); */
	border:2px solid #000;
	background-image:none;
	background-color:rgba(217,7,61,1);
	background-color:#D9073D;
	background-color:#D60000;
}
.article .toc .toc-content {
	/* border-image:linear-gradient(to right, rgba(217,7,61,0.8) 0%, rgba(253,205,0,0.8) 100%);
	border-image-slice:1; */
	background-color:rgba(255,255,255,0.75);
	border-image:none;
	border-image-slice:0;
	border-color:#000;
	border-radius:0;
	margin-top:-2px;
}
.article .toc a {
	color:#000;
}
.article .toc .toc-content ol li a:hover {
	color:#D60000;
	background-color:transparent;
}
.article h2 {
	color:#fff;
	text-shadow:none;
	margin-top:2.4em;
	margin-top:3.5em;
	background-image:linear-gradient(135deg, #D9073D, #D9073D 30%, #FDCD00 30%, #FDCD00 70%, #FDCD00 100%, transparent 0);
	box-shadow:none;
	border-color:#000;
	/* border-radius:6px; */
	background-image:linear-gradient(135deg, #D9073D, #D9073D 30%, #000 30%, #000 70%, #000 100%, transparent 0);
	background-image:linear-gradient(135deg, #D60000, #D60000 30%, #000 30%, #000 70%, #000 100%, transparent 0);
}
.footer {
	border-top:1px solid rgba(0,0,0,0.2);
	background-image:repeating-linear-gradient(135deg, rgba(0,146,70,0.2), rgba(0,146,70,0.2) 20%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.2) 80%, rgba(206,43,55,0.2) 80%, rgba(206,43,55,0.2));
}
/* .mobile-menu-buttons {
	background-color:#fff;
}
.mobile-menu-buttons .menu-button:hover {
	background-color:#fff;
}
.mobile-menu-buttons .menu-icon {
	color:#000;
} */
.mobile-menu-buttons .menu-button,
.mobile-menu-buttons .menu-button:hover {
	color:#fff;
}
#sidebar-menu-input:checked ~ #sidebar-menu-content, #search-menu-input:checked ~ #search-menu-content, #share-menu-input:checked ~ #share-menu-content, #follow-menu-input:checked ~ #follow-menu-content {
	background-color:transparent;
}

.page .article h1,
.page article > .entry-content {
	padding:0 18px;
	padding: 0;
}
.page .entry-content p span.must {
	color:#D60000;
}
.page .container input[type='submit'] {
	color:#fff;
	box-shadow:none;
	background-color:#D60000;
	border-color:#000;
}