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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.content{
	margin: 0;
}
.date-tags{
	display: none;
}
/*ヘッダーメニュー*/
#header-container>#header-container-in>#navi .menu-top {
	width: 50%;
	justify-content: flex-end;
	flex-wrap: nowrap;
}

#container>#header-container>#header-container-in #navi-in {
	display: flex;
	justify-content: flex-end;
}
.sec-title{
	font-weight: 100!important;
}
.main{
	padding-top: 0;
}

.cocoon-image-overlay {
  position: relative;
  display: inline-block;
  max-width: 100%;
  text-decoration: none; /* リンクの下線を消す */
}

.cocoon-image-overlay img {
  display: block;
  width: 100%;
  height: auto;
}

.cocoon-image-overlay .overlay-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の帯 */
  color: #fff;
  text-align: center;
  padding: 30px 0;
  font-size: 16px;
  font-weight: bold;
  pointer-events: none; /* テキストをクリックしてもリンクが外れないようにする */
}

/* ベース */
.cocoon-image-overlay{
  position: relative;
  display: inline-block;        /* 必要に応じて block に変更可 */
  overflow: hidden;             /* はみ出しを隠す！ */
  line-height: 0;               /* 画像下の隙間対策 */
  
}

/* 画像：スムーズにズーム */
.cocoon-image-overlay img{
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform .45s ease; /* ズーム時の動き */
  will-change: transform;
}

/* 暗くするオーバーレイ（疑似要素） */
.cocoon-image-overlay::after{
  content:""!important;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);    /* 初期は透明 */
  transition: background .35s ease;
  pointer-events: none;
}

/* ホバー・フォーカス時 */
.cocoon-image-overlay:hover img,
.cocoon-image-overlay:focus-visible img{
  transform: scale(1.08);       /* 少し拡大（8%アップ） */
}

.cocoon-image-overlay:hover::after,
.cocoon-image-overlay:focus-visible::after{
  background: rgba(0,0,0,.25);  /* 暗さ調整 */
}

.cocoon-image-overlay:hover .overlay-text,
.cocoon-image-overlay:focus-visible .overlay-text{
  opacity: 1;
  transform: translateY(0);
}


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

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

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