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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*下記追加cssを設定したブロックの幅を全画面にする

.custom-block-fullwidth {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
}
*/

/*固定ページのカラム背景を透明にする*/
#main {
	background:transparent;
	margin-bottom:0px;
	padding-bottom:0px;
}

/*日付時間を非表示にする*/
.page .date-tags {
display: none;
}

/*各固定ページの背景を個別に設定*/
#body{
	background-color:#f8f5f0;
}

/*下記追加cssを設定したブロックの色を白半透明にする*/
.block-background-color{
	background-color:#ffffff80;
}

/*下記追加cssを設定したブロックの背景を透明にする*/
.block-background-transparent{
	background-color:transparent;
}

/*お知らせ一覧のデザイン*/
.news_date_title{
	background-color:transparent;
	padding:3px;
	color:#4b4043;
	font-size:16px;
	width:85vw;
	position:absolute;
	left:50%;
	transform:translatex(-50%);
}

/*追加cssを設定したブロックの文字サイズを変更する*/
.block-font-size{
	font-size:16px!important;
}

/*追加cssを設定したブロックの幅を変更*/
.block-width{
	position:relative;
	left:50%;
	transform:translatex(-50%);
	width:85vw;
}

/*フッターのデザイン変更
#footer{
	height:40px;
}
*/
/*フッターの上の空白を削除*/
#footer{
	margin-top:0px;
	padding-top:0px;
}

/*rechapchaのロゴを消す*/
.grecaptcha-badge { 
	visibility: hidden;
}

/*ヘッダーモバイルボタンの文字色と背景色を変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button,
.mobile-menu-buttons,
.logo-menu-button.menu-button{
	background: #f8f5f070;
	color: #4b4043;
	border-bottom-color:#00000000;
	height:60px;
	box-shadow:none;
}

/*モバイルでハンバーガーメニューを押したら出てくるスライドインメニュー*/
.navi-menu-content{
	background-color:#ffffff99;
	width:50%;
	color:#4b4043;
	font-weight:bold;
}
.navi-menu-close-button .fa.fa-close{
	visibility:hidden;
}

/* MetaSlider on FlexSlider */
.flexslider .slides img{
	padding:0 !important;
	margin:0 calc(50% - 50vw)!important;
	width:100vw !important;
}

/*お知らせ*/
.news_date_title{
	color:#4b4043;
	font-size:18px;
	font-family:'noto serif jp';
}

/*全ページの詩*/
.wp-block-verse{
 border:none;
 background-color:transparent;
}

/*モバイルヘッダーメニューの検索を非表示にする*/
.search-menu-button.menu-button{
	visibility:hidden;
}
/*モバイルヘッダーメニューの画像を中央に寄せたい、けど下記だとうまくいかん笑
.logo-menu-button.menu-button.menu-button-in.site-logo-image{
	margin-right:30px;
}
*/

/*PCで下にスクロールした時に出るヘッダーメニュー
.header-container-in.header-container-in.cl-slim.hlt-top-menu.wrap{
	height:auto;文字には合うけどロゴ画像がちょっとはみ出る、あとまわし
}
*/

/*追加cssを指定した画像を画面幅いっぱいにする*/
@media (min-width: 768px) {
  .hero{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .hero img{
    width: 100%;
    height: auto;
    display: block;
  }
}

/*追加cssにより指定ブロックをフェイドイン*/
/* 初期状態：透明にして少し下に配置する */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
/* 画面に入った時に追加するクラス：表示状態にする */
.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*カスタムテキスト追加（アンダーライン）*/
.cocoon-custom-text-1 {
  text-decoration-line: underline;
  text-decoration-style: solid;
  --custom-text-1-color: currentColor;
  text-decoration-color: var(--custom-text-1-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* モバイル：ハンバーガー（固定ヘッダー含む）を大きくする */
@media (max-width: 1023px){
  /* ボタン本体（label）= 押せる領域 */
  #navi-menu-open.menu-open.menu-button-in{
    padding: 14px 16px !important;   /* タップしやすさ */
    min-width: 52px !important;      /* 指が置ける幅 */
    min-height: 52px !important;     /* 指が置ける高さ */
    display: inline-flex !important;
	flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* ハンバーガーアイコン（fa-bars） */
  #navi-menu-open .fa.fa-bars{
    font-size: 32px !important;
    line-height: 1 !important;
  }
  /* "menu" の文字 */
  #navi-menu-open .navi-menu-caption{
    font-size: 12px !important;
    line-height: 1 !important;
  }
}

/*PCスクロール固定ヘッダー時の高さ変更*/
@media (min-width: 1024px){
  #header-container.fixed-header .header-container-in{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/*コンテンツ末尾の余白を詰める（フッター直前の空き対策）*/
#content-in{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.entry-content{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/*お問い合わせページ*/
/*ファイル選択ボタン*/
.cf7-file-btn{
  background: #4b4038;
  color: #f8f5f0;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
}
/*ファイル選択ボタンのテキスト部分*/
.cf7-file-text{
  font-size: 14px;
  color: #8a8087;
}
/* クリックできるようにするための土台 */
.cf7-file{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  position: relative;
}
/* 本体の file input をボタン上に透明で重ねる */
.cf7-file .cf7-file-input{
  position: absolute;
  left: 0;
  top: 0;
  width: 140px;   /* ←ボタンの幅に合わせる（要調整） */
  height: 34px;   /* ←ボタンの高さに合わせる（要調整） */
  opacity: 0;
  cursor: pointer;
}
/*ファイルを選択ボタン*/
.cf7-file-btn{
  cursor: pointer;
}

/*送信ボタン*/
body .wpcf7 .btn-submit-wrapper .btn-submit input.wpcf7-submit{
  background: #6e7955 !important;
  background-image: none !important;
  color: #f8f5f0 !important;
  border: 1px solid #6e7955 !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 36px !important;
  line-height: 1.2 !important;
  min-height: 44px !important;
  border-radius: 4px !important;
}

/*リンクの装飾*/
a{
  color: #4b4038;
}
/*ホバー時*/
a:hover{
  opacity: 0.75;
  text-decoration: none;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
  /*モバイルヘッダー下メニューの幅をテキストに合わせる
	.navi ul{
		display: flex;
	}
	.navi li{
		flex:1 1;
	}
	*/
}