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

/************************************
 * ** 
 * ************************************/

/* =====  ===== */
.cs-purpose {
	  background: var(--cs-light-bg);
	  padding: 80px 40px;
}

.cs-purpose-grid {
	  max-width: 1000px;
	  margin: 0 auto;
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  gap: 20px;
}

.cs-purpose-item {
	  background-color: #fff;
	  background-size: cover;
	  background-position: center;
	  border: 1px solid #dfe1e6;
	  padding: 32px 20px;
	  text-align: center;
	  text-decoration: none !important;
	  color: var(--cs-text) !important;
	  transition: border-color 0.2s, box-shadow 0.2s;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  min-height: 200px;
	  position: relative;
}

.cs-purpose-item::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background: rgba(9, 10, 69, 0.5);
	  z-index: 1;
}

.cs-purpose-label {
	  font-size: 0.85rem;
	  line-height: 1.5;
	  position: relative;
	  z-index: 2;
	  color: white;
	  font-weight: 500;
}

.cs-purpose-item:hover {
	  border-color: var(--cs-silver);
	  box-shadow: 0 4px 20px rgba(174,180,192,0.15);
}

/*  */
/************************************
 * ** 
 * ************************************/
/*1023px*/
@media screen and (max-width: 1023px){
	.cs-purpose-grid {
		    grid-template-columns: repeat(2, 1fr);
	}
}

/*834px*/
@media screen and (max-width: 834px){
	.cs-purpose-grid {
		    grid-template-columns: repeat(2, 1fr);
	}
	.cs-purpose-item {
		    min-height: 180px;
	}
}

/*480px*/
@media screen and (max-width: 480px){
	.cs-purpose-grid {
		    grid-template-columns: 1fr;
	}
	.cs-purpose {
		    padding: 60px 24px;
	}
}

/* ===== CTAgallery ===== */
.cs-cta-box {
	  background: var(--cs-navy);
	  border: 1px solid var(--cs-silver);
	  text-align: center;
	  padding: 40px 24px;
	  margin-top: 48px;
}
.cs-cta-text {
	  color: rgba(255,255,255,0.8);
	  font-size: 0.9rem;
	  margin-bottom: 20px;
}
.cs-cta-btn {
	  display: inline-block;
	  background: var(--cs-silver);
	  color: var(--cs-navy) !important;
	  padding: 14px 48px;
	  font-size: 0.92rem;
	  font-weight: 600;
	  letter-spacing: 0.08em;
	  text-decoration: none !important;
	  transition: opacity 0.2s;
}
.cs-cta-btn:hover { opacity: 0.85; }

/* =====  ===== */
.cs-hero-quick {
	  display: flex;
	  gap: 16px;
	  flex-wrap: wrap;
	  margin-top: 20px;
}
.cs-hero-quick a {
	  color: rgba(255,255,255,0.72) !important;
	  font-size: 0.82rem;
	  text-decoration: none !important;
	  border-bottom: 1px solid rgba(174,180,192,0.4);
	  padding-bottom: 2px;
	  transition: color 0.2s, border-color 0.2s;
}
.cs-hero-quick a:hover {
	  color: var(--cs-silver) !important;
	  border-color: var(--cs-silver);
}

/* =====  ===== */
.cs-page-wrap{max-width:100%}
.cs-inner{max-width:var(--cs-max);margin:0 auto;padding:0 40px}
.cs-dark-bg{background:var(--cs-navy)}
.cs-light-bg{background:var(--cs-light-bg)}
.cs-page-hero{padding:80px 0}
.cs-page-label{color:var(--cs-silver);font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;display:block;margin-bottom:12px}
.cs-page-h1{font-size:clamp(1.4rem,2.5vw,2.2rem);color:#fff;font-weight:400;line-height:1.6;margin-bottom:20px}
.cs-page-lead{color:rgba(255,255,255,.72);font-size:.9rem;line-height:1.9;margin-bottom:32px}
.cs-concern-nav{display:flex;gap:12px;flex-wrap:wrap}
.cs-concern-nav a{background:rgba(174,180,192,.15);border:1px solid rgba(174,180,192,.4);color:var(--cs-silver)!important;padding:8px 16px;font-size:.78rem;text-decoration:none!important;transition:all .2s}
.cs-concern-nav a:hover{background:var(--cs-silver);color:var(--cs-navy)!important}
.cs-market-section{padding:64px 0}
.cs-market-h2{font-size:1.3rem;font-weight:400;color:var(--cs-text);margin-bottom:8px}
.cs-market-h2 span{font-size:.8rem;color:#888;margin-left:8px}
.cs-market-note{color:#666;font-size:.85rem;margin-bottom:24px}
.cs-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.cs-guide-card{background:var(--cs-light-bg);border-left:3px solid var(--cs-silver);padding:24px}
.cs-guide-card h3{font-size:.95rem;font-weight:600;margin-bottom:10px}
.cs-guide-card p{font-size:.85rem;line-height:1.8;color:#555}
.cs-market-cta{background:var(--cs-navy);padding:60px 40px;text-align:center}
.cs-market-cta p{color:rgba(255,255,255,.8);margin-bottom:24px;font-size:.95rem}
.cs-pillar-section{padding:64px 0}
.cs-pillar-section h2{font-size:1.3rem;font-weight:400;color:var(--cs-text);margin-bottom:24px;border-bottom:1px solid #e8e8e8;padding-bottom:12px}
.cs-merit-grid,.cs-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.cs-merit-card,.cs-type-card{background:#fff;border:1px solid #e8e8e8;padding:24px}
.cs-merit-card h3,.cs-type-card h3{font-size:.9rem;font-weight:600;margin-bottom:8px}
.cs-merit-card p,.cs-type-card p{font-size:.82rem;line-height:1.75;color:#555}
.cs-type-icon{font-size:2rem;margin-bottom:12px}
.cs-type-link{display:inline-block;margin-top:12px;color:var(--cs-silver)!important;font-size:.8rem;text-decoration:none!important;border-bottom:1px solid var(--cs-silver)}
.cs-check-list{display:flex;flex-direction:column;gap:16px}
.cs-check-item{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid #e8e8e8;padding:20px}
.cs-check-num{color:var(--cs-silver);font-size:1.2rem;font-weight:700;font-family:var(--cs-font-en);min-width:32px}
.cs-check-item h3{font-size:.9rem;font-weight:600;margin-bottom:6px}
.cs-check-item p{font-size:.82rem;line-height:1.7;color:#555}
.cs-storage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.cs-storage-item{background:#fff;border:1px solid #dfe1e6;padding:16px;font-size:.82rem;text-align:center}
.cs-tax-table{border:1px solid #e8e8e8;margin-top:24px}
.cs-tax-row{display:grid;grid-template-columns:1.5fr 1fr 2fr;padding:14px 16px;border-bottom:1px solid #e8e8e8;font-size:.82rem}
.cs-tax-header{background:var(--cs-navy);color:#fff;font-weight:600}
.cs-tax-note{font-size:.78rem;color:#888;margin-top:12px}
.cs-faq-list{display:flex;flex-direction:column;gap:8px}
.cs-faq-item{background:#fff;border:1px solid #e8e8e8}
.cs-faq-item summary{padding:16px 20px;cursor:pointer;font-size:.88rem;font-weight:500;list-style:none}
.cs-faq-item summary::before{content:'Q. ';color:var(--cs-silver);font-weight:700}
.cs-faq-item p{padding:0 20px 16px;font-size:.82rem;line-height:1.8;color:#555}
.cs-cluster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.cs-cluster-card{background:#fff;border:1px solid #dfe1e6;padding:20px;text-decoration:none!important;color:var(--cs-text)!important;font-size:.85rem;transition:border-color .2s,box-shadow .2s}
.cs-cluster-card:hover{border-color:var(--cs-silver);box-shadow:0 4px 12px rgba(174,180,192,.1)}
@media(max-width:768px){.cs-inner{padding:0 20px}.cs-page-hero{padding:48px 0}.cs-guide-grid,.cs-merit-grid,.cs-type-grid,.cs-cluster-grid{grid-template-columns:1fr}.cs-storage-grid{grid-template-columns:repeat(2,1fr)}.cs-tax-row{grid-template-columns:1fr}}

}
}
}
}
}
}
	}
	}
}
	}
	}
}
	}
}
}
}
}
}
}
}
}
}
}
}
}
}
/* ===== モーション（上品な動き） ===== */
.cs-section-title::after {
  content: '';
  display: block;
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cs-silver), transparent);
  margin: 14px auto 0;
}
.cs-purpose-item, .cs-article-card, .cs-gallery-item {
  transition: border-color .25s ease, box-shadow .35s ease, transform .35s ease;
}
.cs-purpose-item:hover, .cs-article-card:hover, .cs-gallery-item:hover { transform: translateY(-5px); }
.cs-article-card { overflow: hidden; }
.cs-article-card img { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.cs-article-card:hover img { transform: scale(1.05); }
.cs-gallery-item img { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.cs-gallery-item:hover img { transform: scale(1.06); }

@media (prefers-reduced-motion: no-preference) {
  .cs-hero-image { overflow: hidden; }
  .cs-hero-image img { animation: cs-kenburns 18s ease-in-out infinite alternate; }
  @keyframes cs-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }

  body.cs-js .cs-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
  }
  body.cs-js .cs-reveal.is-visible { opacity: 1; transform: translateY(0); }
}
/* ===== 2026-08-25 トップ改修（コンパクトヒーロー・CTA塗り・ロゴ銀・バッジアイコン） ===== */
.cs-hero.cs-hero--compact { min-height: 40vh; }
.cs-hero--compact .cs-hero-inner {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
  padding: 56px 24px;
  gap: 0;
}
.cs-hero--compact .cs-hero-desc { margin-bottom: 28px; }
.cs-hero .cs-hero-btn {
  background: var(--cs-silver);
  border-color: var(--cs-silver);
  color: var(--cs-navy) !important;
}
.cs-hero .cs-hero-btn:hover { background: #fff; border-color: #fff; color: var(--cs-navy) !important; }
.logo-header a, .logo-header .site-name-text { color: var(--cs-silver) !important; }
.cs-trust-icon i { color: var(--cs-silver); }

/* by 恵比寿コイン（ヒーローのブランドリンク） */
.cs-hero-by {
  display: block;
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  margin: -10px 0 18px;
  text-decoration: none !important;
}
.cs-hero-by:hover { color: var(--cs-silver) !important; }
.cs-hero--compact .cs-hero-quick { justify-content: center; }

/* 記事図版のホバー拡大（マウス環境のみ） */
@media (hover: hover) {
  .entry-content figure { overflow: visible; }
  .entry-content figure img {
    transition: transform .25s ease;
    cursor: zoom-in;
  }
  .entry-content figure img:hover {
    transform: scale(1.7);
    position: relative;
    z-index: 20;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    background: #fff;
  }
}

/* トップ: ギャラリーサムネ正方形統一（2026-08-25） */
.cs-gallery-item img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

/* ヒーロー背景画像（2026-08-27。差し替えはURLを hero-eagle.jpg に変えるだけ） */
.cs-hero.cs-hero--compact {
  background:
    linear-gradient(rgba(7,13,34,.66), rgba(11,22,56,.74)),
    url('https://www.ebisu-coin.com/apps/note/wp-content/uploads/2026/08/hero-qb-pile.jpg') center / cover no-repeat;
}