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

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

.wpcf7 input[type="submit"] {
width:100%;
padding:15px;
border-radius:10px;
-webkit-border-radius: 10px;  
-moz-border-radius: 10px;
border: none;
box-shadow: 0 3px 0 #ddd;
background: #98dd6c;
transition: 0.3s;
}
.wpcf7-submit:hover {
background: #a4dd6c;
transform: translate3d(0px, 3px, 1px);
-webkit-transform: translate3d(0px, 3px, 1px);
-moz-transform: translate3d(0px, 3px, 1px);
}

/*見出し変更「文字の背景に円を配置」*/
h1 {
  position: relative;
  color: #333;
  display: inline-block;
  margin: 47px 0;
  text-shadow: 0 0 2px white;
}
h1:before {
  content: "";
  position: absolute;
  background: #ffd69d;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: -1;
}


/*お知らせ欄スクロール化*/
.scroll{
overflow: auto;
height: 200px;
width: 100%;
}

/*TOPのカバー動画を背景動画フルサイズに*/
.main-visual {
	width: 100vw !important;
	margin: 0 calc(50% - 50vw);
	margin-top: -90px;
	min-height: 800px;
}


@media screen and (max-width: 960px){
.main-visual {
	margin-top: -80px;
	min-height: 700px;
}
}
@media screen and (max-width: 600px){
.main-visual {
	margin-top: -10px;
	min-height: 300px;
}
}

/*TOPカバー画像上部の余白をなくす*/
.content,
.content-in,
.main,
.entry-content {
	  margin-top: 0px;
	  padding-top: 0px;
}


/*TOPカバー要素の重なり順の調整*/
.logo {
	z-index:1;
}
.menu-item {
	z-index:2;
}
.menu-button {
	z-index:3;
}

/*スマホでも2カラムを横表示にする*/
.wp-block-columns {
	flex-wrap: nowrap;important!
}

/スマホ横並び維持/
.wp-block-columns {
flex-wrap: nowrap;
}

/*ヘッダーの文字と背景の色を変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #ffffff;
	color: #044066;
    height: 60px;
}

.logo-menu-button.menu-button{
	background-color: #ffffff;
    height: 60px;
}

/* フッターモバイルボタン透明背景色（スマホ） */
.mobile-menu-buttons {
background: rgba(112,82,64,0.5); /* RGBA形式で半透明にする */
color: #FFFFFF;
}



/*768px以下でロゴの大きさ変更*/
@media screen and (max-width: 768px){
img.site-logo-image{
	width: 250px;
	margin: 1px auto 0;
}
}
/*スライドインメニューをカスタマイズ*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: rgba(112,82,64,0.5);
	transform: translateX(101%);
}

.menu-drawer a{
	font-size: 1.1em;/*文字の大きさ*/
	color: #fff;/*文字の色*/
	height: 3em;/*行の高さ*/
}

.menu-drawer a:hover{
	color: rgba(255,255,255,0.7);
	background-color: rgba(30,124,209,0);
}

#navi .navi-in > ul li{
	height: 40px;
	line-height: 40px;
}

.content { 
margin-top: 0; 
}

.header {
  background-size: contain;
}
.header div.header-in {
  min-height: calc( ( 100vw - var( --scrollbar-width, 17px)) * 480 / 1920);
}

.footer{
	font-size :12px;
}

.appeal-content {
background-color: rgba(230, 188, 135, 0.5);
color:#560d04;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
#main, #footer {
  background: transparent;
}

.entry-title{
	display: none;
}

.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
display: none;
}

/*1023px以下でロゴを消す*/
@media screen and (max-width: 1023px){
	img.site-logo-image{
		visibility: hidden;
	}
}

/*1023px以下でモバイル用のロゴ表示*/
@media screen and (max-width: 1023px){
	.logo-menu-button.menu-button{
		background-image: url(https://petsym.com/wp-content/uploads/2026/05/b7d327ae2bc6fed7a2f4bfcc57168260.png);
		background-size: auto 50px;
		background-position: center;
		background-repeat: no-repeat;
}
}