/*
Theme Name: Twenty Twenty-Two Child
Theme URI: https://wordpress.org/themes/twentytwentytwo/
Template: twentytwentytwo
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Site Editor features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,style-variations,wide-blocks,block-styles,accessibility-ready,blog,portfolio,news
Version: 2.1.1770032575
Updated: 2026-02-02 20:42:55

*/

/* 004 */
/* 004 矢印なし */
.button004 a {
    background: #eee;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 260px;
    padding: 12px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    text-decoration: none;
}

.button004 a:hover {
    background: #313131;
    color: #FFF;
}

/* 固定フッター本体 */
.neco-fixed-footer{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  z-index: 99999 !important;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  align-items: end !important;
  justify-items: center !important;

  background: rgba(47, 159, 175, 0.96) !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  padding: 8px 0 calc(8px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
}

/* WordPressの親ラッパー由来の余白つぶし */
footer:has(.neco-fixed-footer),
.wp-block-template-part:has(.neco-fixed-footer){
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
}

/* 固定フッターの各セル */
.neco-fixed-footer > *{
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* セル内の余白を消す */
.neco-fixed-footer .wp-block-group,
.neco-fixed-footer .wp-block-image,
.neco-fixed-footer figure,
.neco-fixed-footer p{
  margin: 0 !important;
  padding: 0 !important;
}

/* リンクをセルいっぱいに */
.neco-fixed-footer a{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 74px !important;
  padding: 0 2px !important;
  text-decoration: none !important;
  color: inherit !important;
  box-sizing: border-box !important;
}



/* 文字 */
.neco-fixed-footer p{
  font-size: clamp(10px, 2.8vw, 11px) !important;
  line-height: 1.15 !important;
  text-align: center !important;
  color: #fff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 本文が隠れないように */
body{
  padding-bottom: 108px !important;
}

/* PCでは消す */
@media (min-width: 768px){
  .neco-fixed-footer{
    display: none !important;
  }

  body{
    padding-bottom: 0 !important;
  }
}
/* --- ジャンプボタン：スマホで横2列（調整済み） --- */
.jump-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    width: 100%;
}
.jump-buttons a {
    /* 画面の45%（横2列）を使い、隙間をあける */
    width: calc(45% - 5px); 
    max-width: 180px;
    padding: 12px 5px;
    border-radius: 25px;
    text-align: center;
    font-weight: bold;
    text-decoration: none !important;
    color: #fff !important;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.1s;
}
.jump-buttons a:active { transform: scale(0.95); }

/* ボタンの色分け */
.jump-buttons a:nth-child(1) { background: #e74c3c; } /* 赤 */
.jump-buttons a:nth-child(2) { background: #999; }    /* 白 */
.jump-buttons a:nth-child(3) { background: #3498db; } /* 青 */
.jump-buttons a:nth-child(4) { background: #f1c40f; color: #333 !important; } /* 黄 */

/* --- グリッドとカードの基本設定 --- */
.seal-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* PCは5列 */
    gap: 20px !important;
    margin-bottom: 50px !important;
}

.seal-item {
    position: relative; /* No.を浮かせる基準 */
    background: #fff;
    border: 1px solid #f0f0f0;
    padding: 20px !important;
    border-radius: 20px !important;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    overflow: hidden;
}

/* ★画像：丸枠なし・全体表示（トリミングしない） */
.seal-img {
    width: 150px !important;
    max-width: 100%;
    height: auto !important;
    margin: 0 auto 15px !important;
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.08);
    background: #fafafa;
}
.seal-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    vertical-align: bottom;
}

/* --- ★No.（数字）を左上で目立たせる --- */
.seal-no {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(0,0,0,0.05); /* うっすらグレーの背景 */
    color: #999 !important; /* 数字の色 */
    font-weight: bold;
    font-size: 0.8rem !important;
    padding: 2px 10px;
    border-radius: 50px;
    letter-spacing: 0.1em;
}

/* ★紋章名：基本設定 */
.seal-name {
    font-weight: bold;
    font-size: 1.15rem !important;
    margin: 5px 0 15px !important;
    color: #333; /* デフォルトの色（修正前のオレンジを消す） */
}

/* 説明文 */
.seal-desc {
    font-size: 0.8rem !important;
    line-height: 1.6;
    color: #666 !important;
    text-align: left;
    border-top: 1px dotted #eee;
    padding-top: 10px;
    margin-top: 10px;
}

/* --- 色ごとの見出しの装飾（青のネコなど） --- */
.color-title {
    text-align: center;
    border: none !important;
    border-radius: 50px;
    padding: 10px 15px !important;
    font-size: 1.3rem !important;
    margin: 60px 0 30px !important;
}
.title-赤 { background: #fee2e2; color: #e74c3c !important; }
.title-白 { background: #f3f4f6; color: #666 !important; }
.title-青 { background: #e0f2fe; color: #3498db !important; }
.title-黄 { background: #fef9c3; color: #854d0e !important; }

/* ---------------------------------------------------------------------- */
/* --- ★力技で紋章名の色を一致させるCSS --- */
/* スニペットの順番と噛み合っていない場合、ここで手動で修正します。 */
/* ---------------------------------------------------------------------- */

/* 図鑑：紋章名の色（seal-name-赤 など） */
.seal-intro-page .seal-name-赤 { color: #e74c3c !important; }
.seal-intro-page .seal-name-白 { color: #9ca3af !important; }
.seal-intro-page .seal-name-青 { color: #3498db !important; }
.seal-intro-page .seal-name-黄 { color: #d97706 !important; }

/* ---------------------------------------------------------------------- */

/* --- スマホ(Android/iPhone)対応：1列、画像を大きく --- */
@media (max-width: 768px) {
    .jump-btn { font-size: 0.8rem; }
    .seal-grid { grid-template-columns: 1fr !important; }
    .seal-img {
        width: min(220px, 85vw) !important;
        height: auto !important;
    }
    .seal-name { font-size: 1.4rem !important; }
    .seal-desc { font-size: 0.9rem !important; text-align: center; }
}
/* メインカードの装飾 */
.main-result-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 25px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    position: relative;
}

/* メイン画像 */
.main-card-img img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    background: #fdfdfd;
    margin-bottom: 15px;
}

/* KINと音のテキスト */
.main-card-kin { font-size: 0.9rem; color: #aaa; font-weight: bold; }
.main-card-tone { font-size: 1.8rem; font-weight: bold; color: #333; margin-bottom: 15px; }

/* 紋章の並び */
.main-card-seals {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.main-card-seal-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}
.seal-label { font-size: 0.8rem; color: #888; width: 80px; text-align: right; }
.mini-icon { width: 1.2em; height: 1.2em; border-radius: 50%; vertical-align: middle; border: 1px solid #eee; }

/* 特殊KINタグ */
.main-card-tags { margin-top: 20px; display: flex; justify-content: center; gap: 5px; }
.tag { font-size: 11px; padding: 3px 10px; border-radius: 50px; color: #fff; font-weight: bold; }
.tag-black { background: #333; }
.tag-polar { background: #0073aa; }
.tag-ext { background: #d63384; }

/* 関係性の箱を少し整理 */
.relations-box { background: #f9f9f9 !important; border: 1px solid #eee !important; border-radius: 15px !important; }
.rel-title { display: block; text-align: center; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px; }
.rel-line { margin-bottom: 8px; }
/* 保存ボタンのふわっとしたアニメーション */
#download-card-btn {
    transition: all 0.3s ease;
}
#download-card-btn:hover {
    transform: scale(1.05);
    background-color: #ffb6c1 !important;
}