@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 0 !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;
  
  /* ★調整箇所：文字との隙間。広くしたい場合は -1em などに。 */
  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
  );
  
  /* ★調整箇所：ストライプの荒さ。荒くしたい場合は 8px 8px などに。 */
  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;
  margin-top: 4em !important; 
  margin-bottom: 2em !important;
  
  /* ★調整箇所：ストライプを下に下げた場合は、下の余白（.5em）を広げてください */
  padding: 0 0 .8em 0 !important; 
  
  color: #523c32 !important; /* テーマカラー（文字色） */
  line-height: 1.6 !important; /* 先頭文字が大きくなるので行間を少し広げます */
  font-size: 1.3em !important; 
  z-index: 1;
}

/* --- 3. 先頭の1文字目の装飾 --- */
.article h3::first-letter {
  /* 円の大きさと、2文字目との間隔 */
  padding: 0.25em 0.4em !important;
  margin-right: 0.1em !important;
  
  /* ご提示いただいた変形円の形 */
  border-radius: 54% 46% 38% 62%/49% 70% 30% 52% !important;
  
  /* ★変更箇所：グラデーションの調整
     linear-gradient(角度, 開始色 開始位置, 終了色 終了位置)
     開始色（#A47864）から終了色（#dac9c1）へ徐々に色が変化します。
     この部分のカラーコードを変更することで色合いを調整できます。 */
  background-color: #A47864 !important;
  background-image: linear-gradient(135deg, #A47864 10%, #dac9c1 100%) !important;
  
  /* ★変更箇所：白抜き文字にするため色を白に指定 */
  color: #ffffff !important; 
  font-size: 1.6em !important;
  font-weight: bold !important;
}

/* --- 4. 下部の斜線ストライプ（H2と統一） --- */
.article h3::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; 
  
  /* ★調整箇所：文字との隙間。広くしたい場合は -.3em などに。 */
  bottom: -.1em !important; 
  
  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;
  
  /* ★調整箇所：ストライプの荒さ。荒くしたい場合は 8px 8px などに。 */
  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;
  
  /* ★追加：角に少し丸みをつけて優しい印象にする */
  border-radius: 6px !important;
  
  /* ★追加：立体感を出すための右と下の細い線（#EEEEEE） */
  border-right: 1px solid #EEEEEE !important;
  border-bottom: 1px solid #EEEEEE !important;
  
  /* ★追加：左側のテーマカラーの太い線 */
  border-left: 5px solid #dac9c1 !important; /* より濃く引き締めたい場合は #523c32 に変更してください */
  
  /* 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;
  
  /* 左側に円を入れるための余白（2em）と、下線と文字が近すぎないように下部余白（.5em）を確保 */
  padding: .3em .3em .5em 2em !important; 
  
  /* ★変更箇所：見出しの文字色 */
  color: #523c32 !important; 
  font-size: 1.1em !important;
  line-height: 1.4 !important;
  
  /* ★変更箇所：アンダーバー（下線）の色と太さ */
  border-bottom: 2px solid #dac9c1 !important; 
}

/* --- 3. 左側の重なる円（共通設定） --- */
.article h5::before,
.article h5::after {
  content: '' !important;
  position: absolute !important;
  
  /* ★変更箇所：円のベースカラー（他の見出しと統一しています） */
  background-color: #dac9c1 !important; 
  
  border-radius: 50% !important;
  
  /* ★変更箇所：円の透明度。1に近づくほど濃く、0に近づくほど薄くなります。
     半透明にすることで、2つの円が重なった部分の色が濃くオシャレに見えます */
  opacity: .7 !important; 
}

/* --- 大きい丸 --- */
.article h5::before {
  top: .3em !important;
  left: .2em !important;
  width: 1.1em !important;
  height: 1.1em !important;
  z-index: 2 !important;
}

/* --- 小さい丸 --- */
.article h5::after {
  top: .8em !important;
  left: .8em !important;
  width: .7em !important;
  height: .7em !important;
  z-index: 1 !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;
  }
	
}