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

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

/*アピールエリア*/
 

/*白い背景を透明に*/
.appeal-content{
color:#fff;
background-color:transparent;
padding: 0;
}
/*文字変更*/
.appeal-message{
font-size:1.3em;
margin-bottom: 0.5em;
color: #1e3333;
}
/* アピールエリアの親要素を基準に設定 */
.appeal-in {
  position: relative;
}

/* メッセージの位置を中央から「少し上・少し左」にずらす */
.appeal-message {
  position: absolute;
  top: 50%;    
  left: 40%;  
  transform: translate(-50%, -50%);
  width: 100%; /* 横幅いっぱいに広げてテキストの折り返しを防ぐ */
  max-width: 500px; /* 必要に応じてメッセージの最大幅を制限 */
}

/* セクション背景色変更*/
.bg-change {
    background: #F9F8F4;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
}
/*ストライプボックスデザイン変更*/
.is-style-stripe-box {
    background-image: repeating-linear-gradient(-45deg, #ECE9DE 0, #ECE9DE 3px, transparent 3px, transparent 6px);
	margin: 0 18px;
	padding: 28px 20px;

	}

/*テーブル色変更*/
table {
  border-collapse: collapse; /* 💡 枠線を1本にまとめる */
}
table, th, td {
  border: 1px solid #666633!important; /* 線を「太さ」「種類」「色」で指定 */
}


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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
.appeal-content .appeal-message {
    font-size: 0.9em ;
}
}