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

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

/*box*/
	.yellowbox, /* 黄色ボックス */
	.graybox, /* グレーボックス */
	.redbox, /* 薄赤ボックス */
	 {
		font-size: 16px;
		line-height: 30px;
	}

.yellowbox {
	padding:20px 20px 20px 20px;
	border:solid 1px #ffcc00;
	background-color:#ffffe0;
	margin-bottom:20px;
	font-size: 14px;
}

.redbox {
	padding:20px 20px 20px 20px;
	border:solid 1px #ef5350;
	background-color:#ffebee;
	margin-bottom:20px;
	font-size: 14px;
}

.graybox {
	padding:20px 20px 20px 20px;
	border:solid 1px #ccc;
	background-color:#f3f3f3;
	margin-bottom:20px;
	font-size: 14px;
}

.purplebox {
	padding:20px;
	border:solid 1px #8c1aff;
	background-color:#f2e6ff;
	margin-bottom:20px;
	font-size: 14px;
}

/*CTAボタン*/
/* 既存の .cta-button スタイル（変更なし） */
.cta-button {
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 強調したいCTAボタンの基本スタイル */
.primary-cta {
    background-color: #ff6a1a; /* 目を引くオレンジ色 */
    color: #ffffff;
    border: none;
    font-size: 22px;
    padding: 18px 35px;
    box-shadow: 0 6px 10px rgba(255, 111, 0, 0.4);

    /* --- ここから追加・修正 --- */
    display: block; /* ブロック要素にして幅とマージンを適用 */
    min-width: 50%; /* 最小幅50% */
    max-width: 100%; /* 最大幅100% */
    width: fit-content; /* コンテンツに合わせて幅を調整しつつ、min/maxを尊重 */
    margin: 0 auto; /* 左右マージンをautoにして中央揃え */
    /* --- ここまで追加・修正 --- */
}

.primary-cta:hover {
    background-color: #ff4d4d; /* ホバーで少し暗く */
    transform: translateY(-3px);
    box-shadow: 0 8px 12px rgba(255, 111, 0, 0.6);
}

/* モバイル表示での調整（必要に応じて） */
@media (max-width: 768px) {
    .primary-cta {
        min-width: 90%; /* モバイルではもう少し幅を広くしても良いかもしれません */
        padding: 15px 25px; /* モバイルでのパディング調整 */
        font-size: 18px; /* モバイルでのフォントサイズ調整 */
    }
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

/* 600px以上では画像Bを表示 */
@media (min-width: 601px) {
}

/*600px以下*/
@media (max-width: 600px) {
img.alignleft{min-width:100%;display:block;margin:auto auto 20px auto;}
img.alignright{min-width:100%;display:block;margin:auto auto 20px auto;}
}

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