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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){

}

/*834px以下*/
@media screen and (max-width: 834px){

}

/*480px以下*/
@media screen and (max-width: 480px){
	.header-site-logo-image {
		width: 200px;
	}
	img.speech-icon-image {
		width: 60px;
		height: auto;
	}

/*20260124_ハンバーガーメニュー変更*/
	.menu-content {
		max-width: 85%;
	}
	
	#navi-menu-input:checked ~ #navi-menu-content {
		-webkit-transform: translateX(20%);
		transform: translateX(20%);
	}
	
	.navi-menu-content {
    -webkit-transform: translateX(125%);
    transform: translateX(125%);
	
}
/* ブログ内装飾 */
/* タイトルつきボックス（ピンク） */
.box3-pink {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:800px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 2em 0.5em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px solid #f27398;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.box3-pink .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #f27398; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 20px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box3-pink p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}
/* タイトル付ボックス　赤色 */
.box3-red {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:800px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 2em 0.5em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px solid #B20116;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.box3-red .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #B20116; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 16px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box3-pink p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}
/*  タイトルつきボックス（背景色あり）*/
.box2-pink {
  margin: 2em auto;
  border-radius: 4px;
  max-width: 600px;
  border: 1px solid #f27398;
  padding: 0 0 0.5em; /* ← タイトルの邪魔をしないように左右paddingなし */
}
.box2-pink ul{
	margin: 0
}

.box2-pink .box-title {
  background: #f27398;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  padding: 10px;
  text-align: center;
  border-radius: 4px 4px 0 0;
  width: 100%; /* 枠いっぱいに広がる */
  box-sizing: border-box; /* padding込みで幅を調整 */
}

.box2-pink p {
	margin: 0;/* 文字の余白リセット */
	padding: 0; /* 文字の内側余白リセット*/
}
/* アコーディオン */
.ac {
	width: 99%;
    margin: 24px auto 0;
    box-shadow: 0 0 6px 0.3px rgba(0, 0, 0, 0.2);
}

.ac-content {
  margin-bottom: 24px;
}

.ac-ttl {
  position: relative;
  font-weight: bold;
  color: #801e25;
  background-color: #fff;
  padding: 15px 20px;
  cursor: pointer;
}
.ac-ttl::before,
.ac-ttl::after {
  position: absolute;
  content: "";
  top: 1px;
  right: 20px;
  bottom: 0;
  width: 20px;
  height: 3px;
  margin: auto;
  background: #801e25;
}

.ac-ttl::after {
  transform: rotate(-90deg);
  transition: transform 0.3s;
}

.ac-item {
  display: none;
  position: relative;
  padding: 15px 20px;
}

.ac-item img {
  display: block;
  margin: 8px auto;
}

.ac-item ul,
.ac-item ol {
  padding: 5px 15px;
  margin: 0;
}

.ac-ttl.active::after {
  transform: rotate(0deg);
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.clearfix {
    overflow: hidden;
    zoom: 1;
}

.markCheck {
	position: relative;
	line-height: 1.8;
	padding-left: 1.75em;
	font-weight: bold;
}

.markCheck p {
	margin-bottom: 2em;
}

.markCheck span {
	content: '';
	display: block;
	position: absolute;
	top: .5em;
	left: 0;
	width: 15px;
	height: 8px;
	transform: rotate(-45deg);
}
	
/*  ----------
20260212 口コミリンクカードのショートコード作成
-------------------------------------------------- */
:root{
	--card-border: #b31010; /* 枠の赤 */
	--text-red: #b31010;    /* 下の文字色 */
	--radius: 6px;
	--gap: 22px;
	--card-padding-y: 14px;
	--card-padding-x: 18px;
	}
	
	.wrap{
      max-width: 980px;
      margin: 24px auto;
      padding: 0 16px 40px;
    }

    .grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--gap);
      align-items: stretch;
    }

    @media (max-width: 900px){
      .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 560px){
      .grid{ grid-template-columns: 1fr; }
    }

    .card{
      background:#fff;
      border: 2px solid var(--card-border);
      border-radius: var(--radius);
      overflow:hidden;
      min-height: 120px;
      display:flex;
      flex-direction: column;
      justify-content: center;
      box-sizing: border-box;
      text-decoration:none;
      color: inherit;
      transition: transform .12s ease, box-shadow .12s ease;
    }

    .card:hover{
      transform: translateY(-2px);
      box-shadow: 0 8px 18px rgba(0,0,0,.25);
    }

    .logo{
      display:flex;
      align-items:center;
      justify-content:center;
      padding: var(--card-padding-y) var(--card-padding-x);
      min-height: 70px;
    }

    .logo img{
      max-width: 100%;
      max-height: 56px;
      height:auto;
      width:auto;
      object-fit: contain;
      display:block;
    }

    .caption{
      padding: 8px 10px 12px;
      text-align:center;
      font-weight: 700;
      color: var(--text-red);
      line-height: 1.2;
      font-size: 14px;
    }