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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* 見出しカスタマイズ */
/* H1 */
.article h1{
font-size: 32px;
background: none;
position: relative;
padding: 0.25em 0;
}

/* H2 */
.article h2{
background:none;
position: relative;
padding: 0;
border-bottom: solid 3px #c8c8c8;
}

/* H3 */
.article h3{
font-size: 16px;
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
width:100%;
text-align:center;
position: relative;
color: white;
background: #c8c8c8;
line-height: 1.4;
padding: 0.5em;
border-radius: 25px;/*左右の角を丸く*/
}

/* H4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}
 
/* H5 */
.article h5{
border-bottom:none;
padding: 0;
}
 
/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}

/*グローバルメニュー高さ*/
#navi .navi-in > ul li{
height: 60px;
line-height: 60px;
}

.page .entry-title,
.single .entry-title {
text-align: center;
}

/*フッターロゴサイズ*/
.footer-bottom-logo .logo-image {
max-width: 180px;
}

.footer-bottom-logo img {
height: auto;
}

#navi-footer li {
border: none;
}

.navi-footer-in a:hover {
background: none;
}

/*icomoon設定*/
@font-face {
font-family: 'icomoon';
src:  url('fonts/icomoon.eot?ef5pz4');
src:  url('fonts/icomoon.eot?ef5pz4#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?ef5pz4') format('truetype'),
url('fonts/icomoon.woff?ef5pz4') format('woff'),
url('fonts/icomoon.svg?ef5pz4#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-i-md:before {
content: "\e900";
font-size: 2em;
color: #ffffff;
}

.icon-i-email:before {
content: "\e901";
font-size: 2em;
color: #ffffff;
}

.asterisk {
margin-left: 0.2em;
color: #ff0000;
}

/*おすすめカード外部リンク*/
a.mocodog{
background-image:url(https://akirasfactory.com/wp/wp-content/uploads/2021/11/t-card04.png);
background-position: center;
background-size: cover;
}

a.mocodog img{
opacity: 0;
}

/*** FppGalleryタイトルフォント、サイズ調整 ***/
.fbx-caption-title {
font-family: メイリオ, Meiryo, “ＭＳ Ｐゴシック”, “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro W3”, sans-serif !important;
font-size: 16px !important;
font-weight:  bold;
}

/*** FppGalleryキャプションフォント、サイズ調整 ***/
.fbx-caption-desc {
font-family: メイリオ, Meiryo, “ＭＳ Ｐゴシック”, “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro W3”, sans-serif !important;
font-size: 14px !important;
}

/* — コンタクトフォーム7　送信ボタンのカスタマイズ — */
input.wpcf7-submit {
padding:0.5em !important;/* ボタン内の余白 */
margin:1em 0em !important;/* ボタンの上下の余白 */
background-color: #8ec31f !important;/* 背景の色 */
border-radius: 5px !important;/* 角を丸く*/
color: #fff !important;/* 文字の色*/
font-size: 15px !important;/* 文字の大きさ */
font-weight: bold !important;/* 文字の太さ*/
width: 30%;/* ボタンの横幅*/
transition:0.5s;/* 背景色が変わるまでの時間*/
}

input.wpcf7-submit:hover {
background-color:#f2d500 !important;/* マウスを乗せたときの背景色 */
color: #fff !important;/* マウスを乗せたときの文字の色 */
}

.btn-submit {
width: 100%;
text-align: center;
}

/*プロフィールカスタマイズ*/
/* アイコン */
.nwa .author-box .author-thumb{
width: 110px;
}

.nwa .author-box .author-thumb img{
box-shadow: 0 1px 3px rgba(0,0,0,.18)
}

/* 下側 */
.nwa .author-box .author-content {
padding: 1em 0;
}


/* 名前 */
.author-box .author-name {
margin-bottom: 1em;
}

.author-box .author-content .author-name a{
color: #757575; /* リンク色にしない */
font-size: 1.2em;
font-weight: normal; /* 太字にしない */
text-decoration: none; /* 下線をなくす */
letter-spacing: 0.2em; /* 字間を広く */
}

/* プロフィール文 */
.author-description{
margin-bottom: 15px;
}

.author-description p{
margin: 0 0 0.5em 0;
text-align: left;
line-height: 1.5;
}

/* SNSボタン */
.author-follows{
padding: 12px 0;
background-color: black;
}

/*
.author-follows::before{
content: 'Follow Me';
color: #fff;
font-family: お好きなフォント(設定する場合);
letter-spacing: 0.2em;
}
*/

.author-box .sns-follow-buttons a.follow-button{
width: 40px;
height: 40px;
margin: 6px 10px 2px 2px;
border-radius: 20px;
color: #fff;
border-color: #fff;
font-size: 24px;
line-height: 1.6;
}

.author-box a.follow-button span::before {
font-size: 22px;
}

/* SNSボタン マウスオーバーしたとき */
.author-box .sns-follow-buttons a.follow-button:hover{
background-color: transparent;
opacity: 0.6; /* 薄く */
transform: scale(1.1); /* 1.1倍の大きさに */
}

/*サイドバー見出し*/
.sidebar h3 {
background: transparent;/*背景を透明に*/
padding: 0.5em;/*見出しの内側の余白を調整する*/
font-size: 16px;
width: 100%;
text-align: center;
position: relative;
color: white;
background: black;
line-height: 1.4;
border-radius: 25px;/*左右の角を丸く*/	
}

.sidebar h3:before {
font-family: "Font Awesome 5 Free";
content: "\f055";
font-weight: 900;
position: absolute;
left : 0.5em;
}

.sidebar h3:after {
font-family: "Font Awesome 5 Free";
content: "\f055";
font-weight: 900;
position: absolute;
right : 0.5em;
}

body{
background-color: #fff;
}

body .page-id-8{
background-color: #000 !important;
}

/*プロフィール下ボタン非表示*/
a.follow-button.feedly-button.feedly-follow-button-sq{
display:none;
}
a.follow-button.rss-button.rss-follow-button-sq{
display:none;
}

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

/*834px以下*/
@media screen and (max-width: 834px){
.navi-footer-in>.menu-footer {
flex-wrap: nowrap;/*フッターメニューを一列に*/
}
.navi-footer-in a{
font-size: ◯◯%;/*フッターメニューの文字の大きさを変更*/
}
}

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

/*アピールエリアの高さを調整*/
#appeal {
    height: calc(100vw * 0.68);
}

  
/* --- 横長（1カラム）ブログカードのラベル位置をサムネイル上に --- */
.blogcard.internal-blogcard {
  position: relative; /* サムネイルとラベルの基準 */
  overflow: hidden;
}

/* --- 横長（1カラム）ブログカードのサムネイル部分 */
.blogcard.internal-blogcard .blogcard-thumbnail {
  position: relative;
  overflow: hidden;
}

/* --- 横長（1カラム）ブログカードのラベルをサムネイル左上に重ねる */
.blogcard.internal-blogcard .blogcard-label {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: rgba(0, 115, 170, 0.75); /* 青色＋透過 */
  color: #fff;
  font-size: 0.8em;
  padding: 0.3em 0.7em;
  border-radius: 3px;
  z-index: 2;
}

/* --- カラム内のブログカードだけ縦型に --- */
.wp-block-column .blogcard {
  display: block;
  flex-direction: column;
  padding: 0.8em;
  border: none !important;       /* 外側の枠線を消す */
  border-radius: 0 !important;
  overflow: hidden;
}

/* サムネイルを上部に大きめ配置 */
.wp-block-column .blogcard-thumbnail {
  width: 100%;
  margin: 0 0 0.6em 0;
  float: none;
  position: relative;   /* ラベル配置の基準 */
  overflow: hidden;
}
.wp-block-column .blogcard-thumbnail img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

/* タイトル・スニペットをサムネイル下に */
.wp-block-column .blogcard-content {
  width: 100%;
  margin: 0;
}

/* タイトル強調 */
.wp-block-column .blogcard-title {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 0.3em;
  line-height: 1.4;
}

/* スニペット（抜粋） */
.wp-block-column .blogcard-snippet {
  font-size: 0.9em;
  color: #555;
  line-height: 1.5;
}

/* サイト名・日付を非表示 */
.blogcard .blogcard-footer,
.blogcard .internal-blogcard-footer,
.blogcard .blogcard-site,
.blogcard .internal-blogcard-site,
.blogcard .blogcard-date {
  display: none !important;
}

/* ラベルを左上に重ねる */
.wp-block-column .blogcard .blogcard-label {
  position: absolute;
  top: 8px;
  left: 8px;
/*  background-color: rgba(0, 115, 170, 0.7);*/
  color: #fff;
  font-size: 0.8em;
  padding: 0.2em 0.6em;
  border-radius: 3px;
  max-width: 90%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  z-index: 2;
}

/* ラベル内 fa アイコンを非表示 */
.blogcard .blogcard-label .fa {
  display: none !important;
}

/* ラベル表記変更 */
.bct-related .blogcard-label::after { content: "宣伝広告"; }
.bct-reference .blogcard-label::after { content: "書籍"; }
.bct-together .blogcard-label::after { content: "イラスト・カット"; }
.bct-prev .blogcard-label::after { content: "キャラクターデザイン"; }
.bct-next .blogcard-label::after { content: "フィギュア・ゲーム"; }

/* --- 共通: 縦型ブログカード --- */
.wp-block-column .blogcard-type {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;      /* 枠線はここだけ */
  border-radius: 6px;
  overflow: hidden;
}

/* 横長ラベル共通 */
.blogcard-label-horizontal {
    background-color: rgba(0, 115, 170, 0.7); /* デフォルト青系 */
    color: #fff;
    padding: 0.3em 0.6em;
    border-radius: 3px;
    font-size: 0.85em;
    display: inline-block;
    border: none !important; /* 枠線を消す */
}

/* --- ブログカード全体ホバーアクション --- */
.wp-block-column .blogcard-type,
.blogcard-type { /* 縦型・横型両対応 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* 初期の薄い影 */
}

/* マウスオーバー時 */
.wp-block-column .blogcard-type:hover,
.blogcard-type:hover {
  transform: translateY(-5px);             /* 軽く浮かせる */
  box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* 影を強く出す */
}

/* サムネイルの軽いズーム */
.wp-block-column .blogcard-type .blogcard-thumbnail img,
.blogcard-type .blogcard-thumbnail img {
  transition: transform 0.3s ease;
}

.wp-block-column .blogcard-type:hover .blogcard-thumbnail img,
.blogcard-type:hover .blogcard-thumbnail img {
  transform: scale(1.05); /* 少し拡大 */
}

/* タイトル色変化（任意） */
.wp-block-column .blogcard-type:hover .blogcard-title,
.blogcard-type:hover .blogcard-title {
  color: #ff6600; /* ホバー時の色 */
}

/* ラベル色変化（任意） */
.wp-block-column .blogcard-type:hover .blogcard-label,
.blogcard-type:hover .blogcard-label {
  background-color: rgba(255,102,0,0.8);
}

/* カード本体と内部リンクの背景を透明に */
.wp-block-cocoon-blocks-blogcard,
.wp-block-cocoon-blocks-blogcard a,
.wp-block-cocoon-blocks-blogcard .internal-blogcard,
.wp-block-cocoon-blocks-blogcard .internal-blogcard-title,
.wp-block-cocoon-blocks-blogcard .internal-blogcard-title::before,
.wp-block-cocoon-blocks-blogcard .internal-blogcard-title::after {
    background-color: transparent !important;
}

/* ホバー時も透明 */
.wp-block-cocoon-blocks-blogcard:hover,
.wp-block-cocoon-blocks-blogcard a:hover,
.wp-block-cocoon-blocks-blogcard .internal-blogcard:hover {
    background-color: transparent !important;
}

/* ============================================
   🟦 横長ブログカード（外部リンク）整理版＋サムネイル余白
   ============================================ */

/* --- 横長カード全体ラップ --- */
.external-blogcard-wrap {
  display: flex !important;
  width: 100% !important;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: #fff !important;
  margin: 1em 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: box-shadow 0.3s ease;
}

.external-blogcard-wrap:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* --- 内部カードリセット --- */
.external-blogcard {
  display: flex !important;
  align-items: stretch !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  position: relative; /* ラベル位置基準 */
}

/* --- サムネイル --- */
.external-blogcard-thumbnail {
  flex: 0 0 35% !important;
  margin: 0.5em !important;       /* 上下左右に余白を追加 */
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  border-radius: 4px;             /* 角丸でカードに馴染む */
}

.external-blogcard-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.3s ease;
  border-radius: 4px;             /* 画像も角丸 */
}

.external-blogcard:hover .external-blogcard-thumbnail img {
  transform: scale(1.05);
}

/* --- テキストエリア --- */
.external-blogcard-content {
  flex: 1 !important;
  padding: 0.8em 1em !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important; /* ← 左揃えを確実に */
  box-sizing: border-box !important;
  min-width: 0 !important;           /* 重要: 子要素が右にはみ出すのを防ぐ */
}

/* --- タイトル --- */
.external-blogcard-title {
  font-size: 1.35em !important;
  font-weight: 700 !important;
  color: #222 !important;
  line-height: 1.4 !important;
  margin: 0 0 0.4em 0 !important;
  text-align: left !important;
  width: 100% !important;
  min-width: 0 !important;           /* ← ここも追加 */
  word-break: break-word;
  transition: color 0.3s ease;
}


.external-blogcard-wrap:hover .external-blogcard-title {
  color: #ff6600 !important;
}

/* --- スニペット --- */
.external-blogcard-snippet {
  font-size: 0.95em !important;
  color: #555 !important;
  line-height: 1.5 !important;
  text-align: left !important;
  margin: 0 !important;
  width: 100% !important;
}

/* --- ラベル（左上帯） --- */
.external-blogcard-label {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background-color: rgba(0,115,170,0.85) !important;
  color: #fff !important;
  font-size: 0.75em !important;
  font-weight: 600 !important;
  padding: 0.25em 0.6em !important;
  border-radius: 3px !important;
  z-index: 2 !important;
  border: none !important;
}

/* アイコン削除 */
.external-blogcard-label .fa {
  display: none !important;
}

/* --- フッター非表示 --- */
.external-blogcard-footer {
  display: none !important;
}

/* 🩵 横型ブログカード専用 左寄せ修正版 */

/* 横型カードだけを指定（.eb-leftまたは.eb-right） */
.external-blogcard.eb-left .external-blogcard-content,
.external-blogcard.eb-right .external-blogcard-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  float: none !important;
  margin: 0 !important;
  padding: 0.8em 1em !important;
  width: auto !important;
  box-sizing: border-box !important;
}

/* 横型カードのタイトル */
.external-blogcard.eb-left .external-blogcard-title,
.external-blogcard.eb-right .external-blogcard-title {
  display: block !important;
  text-align: left !important;
  width: 100% !important;
  margin: 0 0 0.4em 0 !important;
  padding: 0 !important;
  float: none !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

/* 画像float解除（横型だけ） */
.external-blogcard.eb-left .external-blogcard-thumbnail,
.external-blogcard.eb-right .external-blogcard-thumbnail {
  float: none !important;
}

/* 横型カード全体の構造をflex化 */
.external-blogcard.eb-left,
.external-blogcard.eb-right {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}

/* ============================================
   🩵 横長ブログカードタイトル左寄せ最終固定
   ============================================ */

/* 横長カードすべてに共通で適用（eb-left / eb-right / その他） */
.external-blogcard .external-blogcard-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important; /* ← 左寄せを絶対固定 */
  text-align: left !important;
  width: 100% !important;
  padding: 0.8em 1em !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* タイトルを中央寄せになる影響を全除去 */
.external-blogcard .external-blogcard-title {
  display: block !important;
  text-align: left !important; /* ← 左揃え固定 */
  margin: 0 0 0.4em 0 !important;
  width: 100% !important;
  float: none !important;
  min-width: 0 !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
  white-space: normal !important;
  align-self: flex-start !important; /* ← flexの内部でも左に */
}

/* タイトル部分の余白が詰まりすぎる場合は微調整 */
.external-blogcard .external-blogcard-snippet {
  margin-top: 0 !important;
  text-align: left !important;
  width: 100% !important;
}

/* 画像とタイトルのレイアウトが崩れないよう固定 */
.external-blogcard {
  justify-content: flex-start !important;
  align-items: stretch !important;
}

/* =======================================
   🔹 固定ページ用：シンプル・カード送り（アイコン完全消去版）
   ======================================= */
.page-navigation {
    display: flex;
    justify-content: space-between;
    margin: 3em 0;
    gap: 15px;
}

/* 各ボタンの共通設定 */
.page-navigation .page-nav {
    flex: 1;
    background-color: #fff;
    border: 1px solid #eee; 
    border-radius: 8px;      
    overflow: hidden;
    transition: all 0.3s ease;
}

/* ホバー時の動き */
.page-navigation .page-nav:hover {
    transform: translateY(-3px);
    border-color: #E60033; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* リンクエリア */
.page-navigation .page-nav a {
    text-decoration: none !important; /* 下線を消す */
    color: #333;
    font-size: 1em;
    font-weight: 700;
    padding: 20px 15px; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; 
    text-align: center;
    line-height: 1.4;
    min-height: 60px;
}

/* ホバー時の文字色 */
.page-navigation .page-nav a:hover {
    color: #E60033;
}

/* 📱 スマホ対応 */
@media screen and (max-width: 599px) {
    .page-navigation {
        flex-direction: column;
    }
}

/* ---------------------------------------
   🚫 矢印・ラベル・リンクアイコンを完全に消去
   --------------------------------------- */
/* 疑似要素（矢印など）を消す */
.page-navigation .page-nav a::before,
.page-navigation .page-nav a::after,
.page-nav.prev a::before,
.page-nav.next a::after {
    content: none !important;
    display: none !important;
}

/* Cocoonの自動アイコン（Font Awesome等）を消す */
.page-navigation .page-nav a .fa,
.page-navigation .page-nav a .fas,
.page-navigation .page-nav a .far,
.page-navigation .page-nav a span[class*="icon-"],
.page-navigation .page-nav a .external-link-tag {
    display: none !important;
}


/* =====================================
   🔹 外部リンクブログカード：スニペット下切れ防止
   ===================================== */
.external-blogcard-wrap {
    display: flex !important;
    flex-direction: column !important; /* 上から下に並べる */
    align-items: stretch !important;
}

.external-blogcard-content {
    display: flex !important;
    flex-direction: column !important; /* タイトル→スニペット縦方向 */
    justify-content: flex-start !important; /* 上詰め */
    align-items: stretch !important; /* 横幅いっぱい */
    min-height: 0 !important; /* 子要素のflex縮み時に切れない */
}

.external-blogcard-snippet {
    overflow: visible !important;  /* 切れないように */
    display: block !important;
    line-height: 1.4em;
    max-height: none !important; /* 高さ制限解除 */
    text-overflow: unset !important;
    white-space: normal !important; /* 折り返し有効 */
}