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

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

/************************************
** すべてのページのタイトルを非表示にする
************************************/
.entry-title {
display: none;
}

/*固定ページの日付非表示*/
.page .date-tags,
.page .author-info {
display: none;
}

/************************************
** サイドバーにリンクにカーソルを合わせると背景色設定
************************************/
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.navi-in a:hover,
.navi-footer-in a:hover,
.a-wrap:hover,
.comment-reply-link:hover,
.recent-comments .a-wrap:hover .recent-comment-content,
.pagination a:hover,
.pagination-next-link:hover, .comment-btn:hover,
.pager-links a:hover span,
.pager-links a:hover span,
.mobile-menu-buttons .menu-button:hover,
.menu-drawer a:hover,
.bp-login-widget-register-link a:hover{
background-color: #c9c9c9; /*サイドメニューカーソル持って行った際の背景色*/
color: #000000; /*カーソルをもっていった際のフォントカラー*/
transition: all 0.1s ease;/*色変更速度*/
}
/*ヘッダーの色変更*/
#navi .navi-in a:hover {
  background-color: #e9e9e9;/*サイドメニューカーソル持って行った際の背景色*/
  transition: all 0.1s ease-in-out;/*色変更速度*/
  color: #f5f5f5;/*カーソルをもっていった際のフォントカラー*/
}
/*固定ページ背景色、文字色変更*/
.main{
    background-color: #ffffff;
}

.a-wrap {
    color: #ffffff;/*トップページに表示される固定ページ一覧の背景*/
}

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

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

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

.wp-caption-text {
	margin: 0 0 5px;
}
/* トップのWANCOAT帯（アピールエリア全体）を消す */
#appeal{
  display:none !important;
}
/* 作業内容ページ 吹き出しを男前オレンジに */
.page-id-20 pre.wp-block-code.has-background {
  background: linear-gradient(
    135deg,
    #ff6a00 0%,
    #ff3c00 50%,
    #cc2b00 100%
  ) !important;

  border-radius: 50px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35) !important;
  padding: 18px 35px !important;
}

/* 文字を白で太く */
.page-id-20 pre.wp-block-code code {
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: 1px;
}

.page-id-20 pre.wp-block-code.has-background {
  position: relative;
  overflow: hidden;
}

.page-id-20 pre.wp-block-code.has-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.25) 50%,
    rgba(255,255,255,0) 100%
  );
}

.page-id-20 pre.wp-block-code code {
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.page-id-20 pre.wp-block-code.has-background {
  border: 3px solid #2b2b2b;
}

.page-id-20 pre.wp-block-code.has-background {
  background: linear-gradient(
    135deg,
    #ff6a00 0%,
    #ff3c00 40%,
    #b82000 100%
  ) !important;

  border-radius: 40px !important;

  box-shadow:
    inset 0 3px 8px rgba(255,255,255,0.25),
    0 12px 30px rgba(0,0,0,0.4);

  padding: 20px 35px !important;
}

.page-id-20 pre.wp-block-code.has-background {
  background: linear-gradient(
    135deg,
    #ff6a00 0%,
    #e13a00 100%
  ) !important;

  border-radius: 40px !important;

  box-shadow: 0 8px 20px rgba(0,0,0,0.18);

  padding: 18px 32px !important;
}

.page-id-20 pre.wp-block-code code {
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* =========================
   WANCOAT：職人×親しみ
   1) フォント統一
   2) ボタンホバー
   3) 画像カードの立体感
   ========================= */

/* 1) フォント統一（読みやすく男前） */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

body,
button,
input,
select,
textarea {
  font-family: "Zen Kaku Gothic New","Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  letter-spacing: .02em;
}

/* 見出しは少しだけ締める */
h1,h2,h3,.entry-title{
  font-weight: 700;
  letter-spacing: .03em;
}

/* 2) ボタン：ホバー演出（押したくなるやつ） */
a.wp-block-button__link,
button,
input[type="submit"],
input[type="button"],
.cocoon-btn a,
.btn,
.button {
  border-radius: 999px !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

a.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.cocoon-btn a:hover,
.btn:hover,
.button:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}

a.wp-block-button__link:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
.cocoon-btn a:active,
.btn:active,
.button:active {
  transform: translateY(0px) scale(.99);
  box-shadow: 0 8px 16px rgba(0,0,0,.14);
}

/* 3) 画像カード：立体感＋ホバー（Cocoonのボックスメニュー想定）
   ※クラスが違っても効くようにフォールバックも入れてる */
.page-id-20 .box-menus .box-menu,
.page-id-20 .box-menu,
.page-id-20 .wp-block-image,
.page-id-20 .wp-block-gallery .blocks-gallery-item {
  border-radius: 22px !important;
  overflow: hidden;
  background: rgba(255,255,255,.55);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* 画像の上にうっすら艶（職人っぽい） */
.page-id-20 .box-menus .box-menu::before,
.page-id-20 .box-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(0,0,0,0));
  pointer-events: none;
  opacity: .9;
}

/* ホバーで“浮く” */
.page-id-20 .box-menus .box-menu:hover,
.page-id-20 .box-menu:hover,
.page-id-20 .wp-block-image:hover,
.page-id-20 .wp-block-gallery .blocks-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(0,0,0,.20);
  filter: brightness(1.02);
}

/* カード内テキスト（白く読みやすく＋影） */
.page-id-20 .box-menu-title,
.page-id-20 .box-menu-label,
.page-id-20 .wp-block-image figcaption {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
  font-weight: 700;
}

/* ついで：リンクも“ぬるっ”と気持ちよく */
a {
  transition: filter .18s ease;
}
a:hover {
  filter: brightness(1.05);
}

/* =========================
  画像カード：ホバーで浮かせる（トップページ含む）
========================= */

/* 画像をクリックできる <a> を動かす（重要） */
.home .entry-content .wp-block-image a,
.home .entry-content .wp-block-columns a {
  display: inline-block;              /* ←これが超重要 */
  transition: transform .18s ease, filter .18s ease;
  will-change: transform;
}

/* ふわっと上へ */
.home .entry-content .wp-block-image a:hover,
.home .entry-content .wp-block-columns a:hover {
  transform: translateY(-8px);
  filter: brightness(1.03);
}

/* 画像自体の立体感（影・丸み） */
.home .entry-content .wp-block-image img,
.home .entry-content .wp-block-columns img {
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  transition: box-shadow .18s ease;
}

/* ホバー時は影を強く */
.home .entry-content .wp-block-image a:hover img,
.home .entry-content .wp-block-columns a:hover img {
  box-shadow: 0 18px 34px rgba(0,0,0,.32);
}

/* トップページ セクションタイトル男前化 */

.home .entry-content strong {
  background: linear-gradient(
    135deg,
    #ff6a00 0%,
    #ff3c00 40%,
    #cc2b00 100%
  ) !important;

  color: #ffffff !important;
  padding: 22px 40px !important;
  border-radius: 60px !important;

  display: block !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 40px auto !important;

  text-align: center;
　box-shadow:
  0 0 0 6px #ffffff,
  0 14px 30px rgba(0,0,0,0.35);
	 border: 6px solid #ffffff;
  
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}
/* ここまでできている */