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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* ===== プロフィール文 見せ分け（あなたの環境用・確定） ===== */

/* まず全部非表示 */
.author-description p {
  display: none;
}

/* サイドバーのプロフィールウィジェット：1段落目（30字） */
#sidebar .widget_author_box .author-description p:nth-of-type(1) {
  display: block;
}

/* トップページ・記事一覧：2段落目（60字） */
.home .widget_author_box .author-description p:nth-of-type(2),
.archive .widget_author_box .author-description p:nth-of-type(2) {
  display: block;
}

/* 記事下（コメント上に出る著者ボックス）：3段落目以降（全文） */
.above-single-comment-aria .author-description p {
  display: block;
}

/* CTAボタンサイズ修正 */
.wp-block-button.float-btn a{
  padding:16px 28px !important;
  font-size:16px !important;
  border-radius:28px !important;
  line-height:1.2 !important;
}

/* 浮くカード */
.float-card{
  background:#fff;
  border-radius:16px;
  padding:28px 24px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:all .3s ease;
}

.float-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 45px rgba(0,0,0,0.14);
  background:#ffffff;
}

/* 浮くボタン */
.float-btn a{
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
  transition:all .25s ease;
}

.float-btn a:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(0,0,0,0.2);
}
/* 左CTAボタン hover 強制 */
.hasshin-left .wp-block-button__link:hover{
  background-color:#2F6DF6 !important;
  color:#ffffff !important;
  opacity:1 !important;
}
/* 右CTA 通常 */
.hasshin-right .wp-block-button__link{
  background-color:#E5484D;
  color:#ffffff;
  border:none;
}

/* 右CTA hover */
.hasshin-right .wp-block-button__link:hover{
  background-color:#cc3a3f !important;
  color:#ffffff !important;
  border:none !important;
}
/* 左CTA 通常 */
.hasshin-left .wp-block-button__link{
  background-color:#3B82F6 !important;
  color:#ffffff !important;
  border:none !important;
}

/* 左CTA hover */
.hasshin-left .wp-block-button__link:hover{
  background-color:#2563EB !important;
}
/* 右CTA 通常 */
.hasshin-right .wp-block-button__link{
  background-color:#E5484D !important;
  color:#ffffff !important;
  border:none !important;
}

/* 右CTA hover */
.hasshin-right .wp-block-button__link:hover{
  background-color:#CC3A3F !important;
}
.wp-block-button__link{
  padding:15px 30px !important;
  font-size:16px !important;
  font-weight:700;
}
.wp-block-columns{
  gap:48px !important;
}
/* ===============================
   共通：ホバーアニメーション基盤
=============================== */
.hover-card {
  transition: all .35s ease;
}

.hover-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
/* ===============================
   画像リンクホバー（ズーム）
=============================== */

.hover-img {
  overflow: hidden;
  border-radius: 12px;
}

.hover-img img {
  transition: transform .4s ease;
}

.hover-img:hover img {
  transform: scale(1.06);
}
/* ===============================
   3ステップカード
=============================== */

.step-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 22px;
  transition: all .35s ease;
  border: 1px solid #eee;
}

.step-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
  border-color: transparent;
}
/* ===============================
   CTAボタンホバー
=============================== */

.wp-block-button__link {
  transition: all .25s ease;
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  opacity: .9;
}
a:hover img {
  opacity: .95;
}
.wp-block-button__link:hover {
  background: #333;
  color: #fff;
}
html {
  scroll-behavior: smooth;
}
:target {
  scroll-margin-top: 100px;
}