@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 !important;
  box-shadow: none !important; /* 全体の影を消す */
  background-color: #f6f2f0 !important; /* ★変更：タイトルとメッセージ部分の背景色を設定 */
  position: relative !important; /* 帯の配置基準にする */
  z-index: 1 !important;
}

/* マーキー部分だけを覆う全幅の茶色い帯 */
.appeal::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 44px !important; /* マーキー部分の高さ */
  background-color: #523c32 !important;
  z-index: -1 !important;
  box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1) !important; /* 帯の下に影をつける */
}

div#appeal-in.appeal-in.wrap {
  padding: 1.5em 0 0 0 !important; /* メッセージ上の余白。下は0にして帯に揃える */
  min-height: 0px !important;
  max-height: none !important; 
  overflow: hidden !important; /* 枠外にはみ出した文字を隠す */
}

.appeal-content {
  background-color: transparent !important; /* 背景色は.appealで設定しているためここは透明に */
  margin: auto !important;
  padding: 0 !important;
  max-width: 100% !important;
  opacity: 1 !important;
  line-height: 1.6 !important;
  overflow: hidden !important;
  text-align: center !important; 
  color: #333 !important; /* メッセージの文字色（濃いグレー） */
}

/* ====================================
   右から左へ流れるアニメーション（マーキー）
==================================== */
/* アニメーションの定義 */
@keyframes marquee-animation {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); } /* 要素の幅分だけ左へ移動して消える */
}

#appeal-in a.appeal-button {
  color: #fff !important; 
  font-size: .95em !important; 
  font-weight: bold !important;
  margin: 5px 0 0 0 !important; /* ★変更：メッセージと帯の距離を狭く調整（15px → 5px） */
  max-width: none !important;
  white-space: nowrap !important; /* 文字を折り返さない */
  box-shadow: none !important;
  height: 44px !important; /* 高さを固定 */
  line-height: 44px !important; /* 文字を上下中央に */
  background: transparent !important;
  border: none !important;

  /* 右端からスタートさせるための余白 */
  padding: 0 0 0 100% !important; 

  /* 流れるアニメーションを適用（20秒で一定速度で無限ループ） */
  display: inline-block !important;
  animation: marquee-animation 20s linear infinite !important; 
}

/* マウスホバー時の挙動 */
#appeal-in a.appeal-button:hover {
  /* PCでマウスを乗せた時は読みやすいように少し透かして止める */
  animation-play-state: paused !important; 
  opacity: 0.8 !important;
  transform: none !important;
  box-shadow: 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);
}

/************************************
****　H2 見出し
************************************/

/* --- 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 {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;

  /* ★ Safari対策 */
  overflow: visible !important;

  background-image: none !important;
  margin-top: 10rem !important; 
  margin-bottom: 2.25em !important;
  
  /* ★ 右側だけ余白を増やす（ここが本質） */
  padding: .3em 2em 0 .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: -17px;
  left: 0; /* ← 動かさない！ */

  z-index: -1;
  font-style: italic; 
  line-height: 1;
  
  font-size: 8rem; 
  
  /* ★ ここも触らない */
  transform: scale(0.7, 1.2) skewX(-15deg);
  transform-origin: bottom left; 
  
  letter-spacing: .1em; 

  background-image: linear-gradient(180deg, #bba294 0%, #f6f2f0 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important; 
  
  font-family: "Helvetica Neue", Arial, 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. レスポンシブ表示時の調整 --- */
@media screen and (max-width: 1024px) {
  .article h2 {
    margin-top: 8rem !important; 
  }
  .article h2::before {
    font-size: 7rem; 
  }
}

@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;
  
  /* 調整：ストライプとの隙間（下余白） */
  padding: 0 0 .9em 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;
  
  /* 調整：グラデーション (角度, 開始色 位置, 終了色 位置) */
  background-color: #A47864 !important;
  background-image: linear-gradient(135deg, #bba294 50%, #f1edeb 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; 
  
  /* 調整：文字との隙間 */
  bottom: -.1em !important; 
  
  width: 100% !important;
  height: .6em !important; 
  z-index: -2 !important; 
  
  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;
  
  /* 調整：角の丸み */
  border-radius: 4px !important;
  
  /* 調整：右と下の細い線の色・太さ */
  border-right: 2px solid #EEEEEE !important;
  border-bottom: 2px solid #EEEEEE !important;
  
  /* 調整：左側のアクセント線の色・太さ */
  border-left: 5px solid #bba294 !important; 
  
  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: 1.5px solid #EEEEEE !important; 
}

/* --- 3. 左側の重なる円（共通設定） --- */
.article h5::before,
.article h5::after {
  content: '' !important;
  position: absolute !important;
  
  /* 調整：円のベースカラー */
  background-color: #A47864 !important; 
  
  border-radius: 50% !important;
  
  /* 調整：円の透明度（0に近づくほど薄く、1に近づくほど濃くなる） */
  opacity: .5 !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;
}

/************************************
****　H6 見出し（先頭にチェックマーク）
************************************/

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

/* --- 2. 見出し本体の設定 --- */
.article h6 {
  position: relative !important;
  margin-top: 2em !important;
  margin-bottom: 1.2em !important;
  
  /* 調整：下部の余白（下線用）と、左にチェックマーク分のスペース（1.5em）を確保 */
  padding: 0 0 .5em 1.5em !important; 
  
  color: #523c32 !important; /* 他の見出しと共通の文字色 */
  font-size: 1em !important; /* H5(1.1em)より一回り小さく設定 */
  line-height: 1.6 !important;

  /* 調整：H5と同じ太さ・カラーの破線（下線） */
  border-bottom: 1.5px dashed #EEEEEE !important;
}

/* --- 3. 先頭のチェックマーク装飾 --- */
.article h6::before {
  content: '' !important;
  position: absolute !important;
  
  /* 調整：上下の位置（文字の中央付近にくるように微調整） */
  top: .45em !important; 
  left: 0 !important;
  
  /* 調整：チェックマークの横幅と縦幅 */
  width: .7em !important;
  height: .3em !important;
  
  /* 調整：チェックマークの色（H5の丸と同じカラー）と線の太さ */
  border-bottom: 3px solid #A47864 !important;
  border-left: 3px solid #A47864 !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;
  }
	
}