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

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

/************************************
****　お問い合わせフォーム contact form7
************************************/
.haveto{
font-size:9px;
padding:2px 5px;
background:#523c32;/*必須 色の変更はこちら*/
color:#fff;
border-radius:20px;
margin-right:5px;
position:relative;
bottom:2px;
}
#formbtn{
display: block;
padding:10px;
width:300px;
background:#f7f7f7;
color:#545454;
font-size:17px;
border:none;
border-radius:50px;
margin:25px auto 0;
transition:0.3s;
}
#formbtn:hover{
background:#523c32;/*送信 色の変更はこちら*/
color:#fff;
border-radius:50px;
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}
.wpcf7 p{
margin-bottom: 0em;
}

/************************************
****　アピールエリア（ハートビート ＋ アロー）
************************************/
.appeal{
padding:0 0 .1em !important;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1) !important;
}
div#appeal-in.appeal-in.wrap{
padding:0 !important;
min-height:0px !important;
max-height:30px !important;
}
.appeal-content{
background-color:#523c32 !important; 
margin:auto !important;
padding:0 !important;
max-width:100% !important;
opacity:1 !important;
line-height:1.6 !important;
}

/* ====================================
   ハートビート ＋ アロー
==================================== */

/* ハートビート（ドクンドクン）アニメーションの定義 */
@keyframes heartbeat-animation {
  0%   { transform: scale(1); }
  8%   { transform: scale(1.05); } /* 1回目の鼓動で少し大きく */
  16%  { transform: scale(1); }
  24%  { transform: scale(1.05); } /* 2回目の鼓動で少し大きく */
  32%  { transform: scale(1); }
  100% { transform: scale(1); } /* 残りの時間は止まって待機 */
}

/* 矢印が右にツンツン動くアニメーションの定義 */
@keyframes slide-arrow-animation {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(6px); } /* 6px右へ動く */
  100% { transform: translateX(0); }
}

#appeal-in a.appeal-button {
color: #fff!important;
font-size:.90em !important; /* ★変更：気持ち大きく（.85em → .95em） */
font-weight: bold !important; /* ★追加：文字を太く */
padding:0 23em 0 !important;
margin:0 !important;
max-width:100% !important;
white-space: nowrap !important;
box-shadow: none !important;

/* アニメーションを適用させるための設定 */
display: inline-block !important;
animation: heartbeat-animation 3s infinite ease-in-out !important; /* 3秒ごとにドクンドクンと脈打つ */

/* 文字を上下中央に配置 */
line-height: 30px !important; 

/* 念のためボタン背景を透明化（四角い枠対策） */
background: transparent !important;
border: none !important;
}

/* ボタンテキストの右に矢印(>)を追加 */
#appeal-in a.appeal-button::after {
  content: '\003E' !important;
  display: inline-block !important;
  margin-left: 10px !important;
  font-weight: bold !important;
  animation: slide-arrow-animation 1s infinite ease-in-out !important; /* 1秒間隔でずっと動く */
}

/* スマホ等での余白調整（元の設定） */
@media screen and (max-width: 1023px){
#appeal-in a.appeal-button { padding:0 18em 0 !important; }
}
@media screen and (max-width: 834px){
#appeal-in a.appeal-button { padding:0 13em 0 !important; }
.appeal{ padding:.1em 0 .25em !important; }
}
@media screen and (max-width: 652px){
#appeal-in a.appeal-button { padding:0 8em 0 !important; }
}
@media screen and (max-width: 500px){
#appeal-in a.appeal-button { padding:0 6em 0 !important; }
}
@media screen and (max-width: 420px){
#appeal-in a.appeal-button { padding:0 3em 0 !important; }
}

#appeal-in a.appeal-button:hover {
transform: scale(1.02) !important; /* マウスを乗せたときは少しだけ大きくなって固定 */
box-shadow: none !important;
animation: none !important; /* マウスを乗せたときは本体のアニメーションを止める */
}

#appeal-in a.appeal-button:hover::after {
animation: none !important; /* マウスを乗せたときは矢印のアニメーションも止める */
}

/************************************
****　リンクカラー
************************************/
a {
    color: #0066c0;
}

/************************************
****　もしも　かんたんリンク
************************************/
/* 枠 */
div.easyLink-box{
margin: 0 auto !important;
padding: 1em 1.5em !important;
background-color: #fafafa!important;
border:none!important;
border-radius: 4px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.40);
line-height: 1.5;
max-width:100%!important;
}
@media screen and (max-width: 703px){
div.easyLink-box {
text-align:center;
max-height:none!important;
padding: 10px!important;
}}
@media screen and (max-width: 620px){
div.easyLink-box{
display:block!important;	
}
}
/* 商品名 */
div.easyLink-box div.easyLink-info p.easyLink-info-name{
text-align:center;
}
div.easyLink-box div.easyLink-info p.easyLink-info-name a {
font-size:14px;
color: #565656!important;
}
div.easyLink-box div.easyLink-info p.easyLink-info-name a:hover {
color:#337AB7!important; 
}
@media screen and (max-width: 703px){
div.easyLink-box div.easyLink-info p.easyLink-info-name a {
font-size:14px;
}
}
/* 画像 */
@media screen and (min-width: 704px){
div.easyLink-box div.easyLink-img {
margin-top: 1em;
}
div.easyLink-box div.easyLink-img p.easyLink-img-box {
align-items: start!important;
}}
@media screen and (min-width:481px) and (max-width: 620px){
div.easyLink-box div.easyLink-img{   
display:inline-block!important;
}
}
div.easyLink-box div.easyLink-img a.easyLink-arrow-left img, 
div.easyLink-box div.easyLink-img a.easyLink-arrow-right img {/*左右矢印の影非表示*/
box-shadow:none;
}
/* ボタン */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
border-radius: 20px!important;	
line-height:40px!important;
width:75%!important;
font-size:.8em!important;
}
@media screen and (min-width: 704px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn {
margin-top: .5em!important;
justify-content: center!important;
}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
margin: .5em 0 0 0 !important;
}
}
@media screen and (max-width: 703px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn {
margin-top: .2em!important;
}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
display: inline-block!important;
margin-top: .5em!important;
margin-bottom: 0!important;
}}
@media screen and (max-width: 620px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
width:85%!important;
}}
p.easyLink-info-maker{/*メーカーを非表示にしたい場合*/
display:none;
}
p.easyLink-info-model{/*モデルを非表示にしたい場合*/
display:none;
}

/************************************
****　ボタンの影とホバー
************************************/
/* −−ボタンを浮かして影をつける−−*/
.btn{
    box-shadow: 0 7px 0px #808080;
    transition: .5s ease-in-out;
}
/*−−−ボタンが重なったときに沈む−−−*/
.btn:hover{
    box-shadow: 0 1px 0 #808080 ;
    transform: translateY(6px);
    -webkit-transform: translateY(6px);
}

/* −−囲みボタンを浮かして影をつける−−*/
.btn-wrap>a {
    box-shadow: 0 7px 0 #808080;
    transition: .5s ease-in-out;
}
/*−−−囲みボタンが重なったときに沈む−−−*/
.btn-wrap>a:hover {
    box-shadow: 0 1px 0 #808080 ;
    transform: translateY(6px);
    -webkit-transform: translateY(6px);
}

/************************************
****　見出し
************************************/
/* Googleフォントの読み込み（大きな数字用） */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&display=swap');

/* --- 1. 記事全体のカウンターを準備 --- */
.article {
  counter-reset: heading-counter;
}

/* --- 2. Cocoonデフォルトの徹底的な打ち消し --- */
/* 茶色い線や背景色が残るのを防ぐため、全て透明化・線を消去します */
.article h2,
.article h2::before,
.article h2::after {
  background-color: transparent !important;
  border: none !important;
}

/* --- 3. 見出し本体のベース設定（参考サイトの数値反映） --- */
.article h2 {
  background-image: none !important;
  
  /* 参考サイトのレイアウト設定 */
  margin-top: 10rem !important; 
  margin-bottom: 2.25em !important;
  padding: .3em .5em !important;
  position: relative;
  counter-increment: heading-counter;
  z-index: 1;
  color: #523c32 !important; /* ①見出しの文字色を変更 */
  font-size: 1.4em !important; /* 参考サイトの文字サイズ */
  line-height: 1.4 !important;
}

/* --- 4. 背景の大きな数字（01, 02...） --- */
.article h2::before {
  /* 参考サイトのコードをそのまま反映 */
  content: counter(heading-counter, decimal-leading-zero);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  font-style: italic; /* 元々のフォントのイタリック体 */
  line-height: 1;
  
  /* ③数字の大きさ、縦長、傾き、間隔を調整 */
  font-size: 8rem; /* サイズ（高さのベース） */
  
  /* ★変更：数字の横幅と縦幅、傾きの調整
     scale(横幅の倍率, 縦幅の倍率) です。横幅を 0.7 にしてスリムにしています。
     もっと細くしたい場合は 0.6、少し戻したい場合は 0.8 などに調整してください */
  transform: scale(0.7, 1.2) skewX(-5deg); 
  transform-origin: bottom left; /* 引き伸ばす・傾ける基準点を左下に */
  
  /* ★変更：数字同士の間隔調整
     横幅を細くした分、2桁の数字がくっつきすぎないように間隔を少し広げました。
     もっと離したい場合は .15em や .2em に増やしてください */
  letter-spacing: .1em; 

  color: #dbc9c1; /* ①数字の色を変更 */
  font-family: "Ubuntu Condensed", sans-serif;
  white-space: nowrap; /* スマホで数字が縦に改行されるのを防ぐ */
}

/* --- 5. 下部の斜線ストライプ --- */
.article h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -.8em; /* 位置を少し調整 */
  width: 100%;
  height: .7em; /* ストライプの太さ（縦幅） */
  z-index: -2;
  
  /* ②ストライプの細かさを目次と同じくらいに調整 */
  background: linear-gradient(
    135deg,
    transparent 25%,
    #f6f2f0 25%, /* ①ストライプの色を変更 */
    #f6f2f0 50%,
    transparent 50%,
    transparent 75%,
    #f6f2f0 75%,
    #f6f2f0
  );
  background-size: 6px 6px; /* この数値で細かさを制御（大きくすると荒くなる） */
}

/* --- 6. レスポンシブ表示時の調整（タブレット・スマホ） --- */

/* タブレット用の調整（画面幅1024px以下） */
@media screen and (max-width: 1024px) {
  .article h2 {
    margin-top: 8rem !important; /* 上の余白を少し詰める */
  }
  .article h2::before {
    font-size: 7rem; /* 数字のサイズを少し小さく */
  }
}

/* スマホ用の調整（画面幅768px以下） */
@media screen and (max-width: 768px) {
  .article h2 {
    margin-top: 7rem !important; /* スマホではさらに上の余白を詰める */
  }
  .article h2::before {
    font-size: 6rem; /* スマホではさらに数字のサイズを小さく */
  }
}

/************************************
****　H3 見出し（重なる円 ＋ ストライプ）
************************************/

/* --- 1. Cocoonデフォルトの徹底的な打ち消し --- */
.article h3,
.article h3::before,
.article h3::after {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- 2. 見出し本体のベース設定 --- */
.article h3 {
  display: block !important; 
  position: relative !important;
  
  /* H2に合わせた余白設定 */
  margin-top: 4em !important; 
  margin-bottom: 2em !important;
  padding: .3em .5em !important;
  
  color: #523c32 !important;
  line-height: 1.4 !important; 
  font-size: 1.3em !important; 
  z-index: 1;
}

/* --- 3. 背景の重なる円（ダブルサークル） --- */
.article h3::before {
  content: '' !important;
  position: absolute !important;
  
  /* H2の数字のように文字の足元に配置 */
  bottom: 0 !important;
  /* 文字に対して少し左にずらすことで、円の中心付近に文字が来るように調整 */
  left: -0.5em !important;
  
  z-index: -1 !important;
  /* ★変更：円の全体サイズを大きくしました */
  width: 3.5em !important; 
  height: 3.5em !important; 
  
  /* 2つの円を1つの要素で描画（カンマ区切りで複数指定） */
  background-image: 
    /* 小さい丸（手前・少し濃いめ） */
    radial-gradient(circle, rgba(218, 201, 193, 0.9) 50%, transparent 51%),
    /* 大きい丸（奥・半透明） */
    radial-gradient(circle, rgba(218, 201, 193, 0.5) 50%, transparent 51%) !important;
  
  /* ★変更：それぞれの円のサイズを大きくしました */
  background-size: 
    1.6em 1.6em,   /* 小さい丸のサイズ */
    2.8em 2.8em !important; /* 大きい丸のサイズ */
    
  /* それぞれの円の位置 */
  background-position: 
    bottom right, /* 小さい丸を右下に */
    top left !important; /* 大きい丸を左上に */
    
  background-repeat: no-repeat !important;
}

/* --- 4. 下部の斜線ストライプ（H2と統一） --- */
.article h3::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; 
  bottom: -.5em !important; /* 円（bottom: 0）と被らないように少し下に離す */
  width: 100% !important;
  height: .4em !important; /* H2(.7em)より少し細め */
  z-index: -2 !important; 
  
  /* H2と同じストライプ模様 */
  background: linear-gradient(
    135deg,
    transparent 25%,
    #f6f2f0 25%, 
    #f6f2f0 50%,
    transparent 50%,
    transparent 75%,
    #f6f2f0 75%,
    #f6f2f0
  ) !important;
  background-size: 6px 6px !important; 
}

/************************************
****　H4 見出し（ストライプ塗りつぶし）
************************************/

/* --- 1. Cocoonデフォルトの徹底的な打ち消し --- */
.article h4,
.article h4::before,
.article h4::after {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- 2. 見出し本体と背景の設定 --- */
.article h4 {
  position: relative !important;
  margin-top: 3em !important;
  margin-bottom: 1.5em !important;
  padding: .8em 1em !important; /* 背景が帯になるよう余白を確保 */
  color: #523c32 !important;
  font-size: 1.2em !important;
  line-height: 1.4 !important;
  
  /* H2・H3と同じストライプ模様で背景を塗りつぶし */
  background: linear-gradient(
    135deg,
    transparent 25%,
    #f6f2f0 25%, 
    #f6f2f0 50%,
    transparent 50%,
    transparent 75%,
    #f6f2f0 75%,
    #f6f2f0
  ) !important;
  background-size: 6px 6px !important; 
}

/************************************
****　H5 見出し（チェックマーク＋アンダーバー）
************************************/

/* --- 1. Cocoonデフォルトの徹底的な打ち消し --- */
.article h5,
.article h5::before,
.article h5::after {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- 2. 見出し本体の設定 --- */
.article h5 {
  position: relative !important;
  margin-top: 2.5em !important;
  margin-bottom: 1.5em !important;
  
  /* ★変更：下部余白を .3em から .5em に広げ、下線と文字が近すぎないように調整 */
  padding: .3em .3em .5em 1.8em !important; 
  
  color: #523c32 !important;
  font-size: 1.1em !important;
  line-height: 1.4 !important;
  
  /* ★追加：チェックマークと同じ色のアンダーバー（下線） */
  border-bottom: 2px solid #dac9c1 !important; 
}

/* --- 3. 左側のチェックマーク --- */
.article h5::before {
  content: '' !important;
  position: absolute !important;
  top: .5em !important; /* 縦位置の調整（文字の高さに合わせる） */
  left: .3em !important; /* 左からの位置 */
  width: .4em !important; /* チェックの横幅 */
  height: .8em !important; /* チェックの縦幅 */
  
  /* L字の枠線を作って45度回転させることでチェックマークにする */
  border-right: 3px solid #dac9c1 !important; /* 右側の線（テーマカラー） */
  border-bottom: 3px solid #dac9c1 !important; /* 下側の線（テーマカラー） */
  transform: rotate(45deg) !important; 
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
 .body {
   font-size: 15px !important;
  }
	
}