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

/* ===========================================
   amaoffry.com — Premium Shopping Design v2
   ukisystem
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Inter:wght@400;600;700;800&display=swap');

:root {
  --ama-bg: #f7f7fa;
  --ama-white: #ffffff;
  --ama-text: #1a1a2e;
  --ama-text-dim: #6e6e80;
  --ama-accent: #ff9500;
  --ama-accent-light: #fff3e0;
  --ama-accent-dark: #e68600;
  --ama-blue: #0071e3;
  --ama-green: #28cd41;
  --ama-red: #ff3b30;
  --ama-border: #e8e8ed;
  --ama-radius: 12px;
  --ama-shadow-sm: 0 1px 4px rgba(0,0,0,.04);
  --ama-shadow: 0 2px 12px rgba(0,0,0,.06);
  --ama-shadow-lg: 0 8px 30px rgba(0,0,0,.1);
  --ama-font: 'Noto Sans JP','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --ama-transition: 0.25s cubic-bezier(.4,0,.2,1);
}

/* --- Base --- */
body {
  background: var(--ama-bg) !important;
  color: var(--ama-text) !important;
  font-family: var(--ama-font) !important;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ama-blue); text-decoration: none; transition: color var(--ama-transition); }
a:hover { color: var(--ama-accent); }
img { border-radius: 6px; }

/* --- Header --- */
.header, #header {
  background: var(--ama-white) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--ama-border), 0 2px 8px rgba(0,0,0,.03) !important;
  backdrop-filter: blur(10px);
}
.header-in { background: transparent !important; }
.site-name-text, .site-name-text a {
  color: var(--ama-text) !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  letter-spacing: -0.02em;
}
.tagline {
  color: var(--ama-text-dim) !important;
  text-shadow: none !important;
  font-size: 0.85rem !important;
}

/* --- Navigation --- */
.navi, .navi-in, #navi {
  background: var(--ama-white) !important;
  border-bottom: 1px solid var(--ama-border) !important;
  box-shadow: none !important;
}
.navi-in a {
  color: var(--ama-text) !important;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6em 1em !important;
  border-radius: 8px;
  transition: all var(--ama-transition);
}
.navi-in a:hover {
  color: var(--ama-accent) !important;
  background: var(--ama-accent-light) !important;
}
.navi-in ul.sub-menu {
  background: var(--ama-white) !important;
  border: 1px solid var(--ama-border) !important;
  box-shadow: var(--ama-shadow-lg) !important;
  border-radius: var(--ama-radius) !important;
  padding: 0.5em 0 !important;
}
.navi-in ul.sub-menu a { border-radius: 0 !important; }
.notice-area {
  background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%) !important;
  color: #fff !important;
  font-weight: 600;
}

/* --- Content --- */
.content, #content, .wrap { background: var(--ama-bg) !important; }
.main, #main { background: transparent !important; }

/* --- Article / Post --- */
.article, article.post, .post {
  background: var(--ama-white) !important;
  border: 1px solid var(--ama-border) !important;
  border-radius: var(--ama-radius) !important;
  box-shadow: var(--ama-shadow) !important;
  padding: 2.5em !important;
  margin-bottom: 2em !important;
  transition: box-shadow var(--ama-transition);
}

/* --- Headings --- */
.entry-title, .article h1 {
  color: var(--ama-text) !important;
  font-weight: 900 !important;
  font-size: 1.6rem !important;
  border: none !important;
  background: transparent !important;
  padding: 0 0 0.6em 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border-bottom: 3px solid var(--ama-accent) !important;
  letter-spacing: -0.02em;
  line-height: 1.4;
}
.article h2 {
  color: var(--ama-text) !important;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
  background: var(--ama-accent-light) !important;
  border-left: 4px solid var(--ama-accent) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 0.7em 1em !important;
  text-shadow: none !important;
  box-shadow: none !important;
  margin: 2em 0 1em !important;
}
.article h2::after { display: none !important; }
.article h3 {
  color: var(--ama-blue) !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  background: rgba(0,113,227,.04) !important;
  border-left: 3px solid var(--ama-blue) !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 0.5em 1em !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.article h4, .article h5 {
  color: var(--ama-text) !important;
  font-weight: 700 !important;
  background: transparent !important;
  border-bottom: 2px solid var(--ama-border) !important;
  border-left: none !important;
  padding: 0.3em 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.article h4::before, .article h5::before, .article h6::before { content: none !important; }

/* --- Entry Cards (top page grid) --- */
.entry-card, .e-card {
  background: var(--ama-white) !important;
  border: 1px solid var(--ama-border) !important;
  border-radius: var(--ama-radius) !important;
  box-shadow: var(--ama-shadow-sm) !important;
  transition: transform var(--ama-transition), box-shadow var(--ama-transition) !important;
  overflow: hidden;
}
.entry-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ama-shadow-lg) !important;
  border-color: var(--ama-accent) !important;
}
.entry-card-title a { color: var(--ama-text) !important; font-weight: 700 !important; line-height: 1.4 !important; }
.entry-card-title a:hover { color: var(--ama-accent) !important; }
.entry-card-snippet { color: var(--ama-text-dim) !important; font-size: 0.85rem !important; line-height: 1.6 !important; }
.cat-label {
  background: var(--ama-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 0.2em 0.6em !important;
  letter-spacing: 0.03em;
}
.card-thumb img { border-radius: var(--ama-radius) var(--ama-radius) 0 0 !important; }

/* --- WP Show Posts (product grid) --- */
.wp-show-posts-single {
  background: var(--ama-white) !important;
  border: 1px solid var(--ama-border) !important;
  border-radius: var(--ama-radius) !important;
  box-shadow: var(--ama-shadow-sm) !important;
  overflow: hidden;
  transition: transform var(--ama-transition), box-shadow var(--ama-transition);
}
.wp-show-posts-single:hover {
  transform: translateY(-4px);
  box-shadow: var(--ama-shadow-lg) !important;
  border-color: var(--ama-accent) !important;
}
.wp-show-posts-entry-title { font-size: 0.95rem !important; }
.wp-show-posts-entry-title a { color: var(--ama-text) !important; font-weight: 700; line-height: 1.4; }
.wp-show-posts-entry-title a:hover { color: var(--ama-accent) !important; }
.wp-show-posts-entry-summary { color: var(--ama-text-dim) !important; font-size: 0.85rem !important; }

/* --- Sidebar --- */
.sidebar, aside { background: transparent !important; }
.sidebar aside, .widget {
  background: var(--ama-white) !important;
  border: 1px solid var(--ama-border) !important;
  border-radius: var(--ama-radius) !important;
  box-shadow: var(--ama-shadow-sm) !important;
  margin-bottom: 1.5em !important;
  overflow: hidden;
}
.sidebar h3, .widget-title, .widgettitle {
  color: var(--ama-text) !important;
  font-weight: 800 !important;
  background: var(--ama-bg) !important;
  border-bottom: none !important;
  text-shadow: none !important;
  padding: 0.8em 1em !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.02em;
  margin: 0 !important;
  position: relative;
}
.sidebar h3::after, .widget-title::after, .widgettitle::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1em;
  width: 30px;
  height: 3px;
  background: var(--ama-accent);
  border-radius: 2px;
}
.sidebar aside > div { padding: 1em !important; }
.sidebar a { color: var(--ama-text-dim) !important; font-size: 0.9rem; }
.sidebar a:hover { color: var(--ama-accent) !important; }

/* --- Footer --- */
.footer, #footer {
  background: #1d1d1f !important;
  color: #a1a1a6 !important;
  border-top: none !important;
  padding: 2em 0 !important;
}
.footer-in { background: transparent !important; }
.footer a { color: #a1a1a6 !important; }
.footer a:hover { color: var(--ama-accent) !important; }
.copyright { background: #1a1a1c !important; color: #6e6e73 !important; }

/* --- Tables --- */
.article table {
  border: none !important;
  border-collapse: collapse !important;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--ama-shadow-sm);
}
.article th {
  background: var(--ama-accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  border: none !important;
  padding: 0.7em 1em !important;
  font-size: 0.9rem;
}
.article td {
  border: none !important;
  border-bottom: 1px solid var(--ama-border) !important;
  color: var(--ama-text) !important;
  padding: 0.7em 1em !important;
  font-size: 0.9rem;
}
.article table tr:nth-child(even) { background: var(--ama-bg) !important; }
.article table tr:last-child td { border-bottom: none !important; }

/* --- Buttons --- */
.btn, .btn-primary, .comment-btn, input#submit {
  background: linear-gradient(135deg, var(--ama-accent), var(--ama-accent-dark)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ama-radius) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(255,149,0,.25) !important;
  padding: 0.7em 1.5em !important;
  transition: all var(--ama-transition);
}
.btn:hover, input#submit:hover {
  background: linear-gradient(135deg, var(--ama-accent-dark), #d47600) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,149,0,.35) !important;
}

/* --- Pagination --- */
.pagination .page-numbers {
  background: var(--ama-white) !important;
  color: var(--ama-text) !important;
  border: 1px solid var(--ama-border) !important;
  border-radius: 8px !important;
  font-weight: 600;
  transition: all var(--ama-transition);
}
.pagination .page-numbers:hover {
  border-color: var(--ama-accent) !important;
  color: var(--ama-accent) !important;
}
.pagination .current {
  background: var(--ama-accent) !important;
  color: #fff !important;
  border-color: var(--ama-accent) !important;
  box-shadow: 0 2px 8px rgba(255,149,0,.25) !important;
}

/* --- Breadcrumbs --- */
.breadcrumb {
  background: transparent !important;
  color: var(--ama-text-dim) !important;
  font-size: 0.8rem !important;
  padding: 0.5em 0 !important;
}
.breadcrumb a { color: var(--ama-text-dim) !important; }
.breadcrumb a:hover { color: var(--ama-accent) !important; }

/* --- TOC --- */
.toc {
  background: var(--ama-white) !important;
  border: 1px solid var(--ama-border) !important;
  border-radius: var(--ama-radius) !important;
  box-shadow: var(--ama-shadow-sm) !important;
}
.toc-title {
  background: linear-gradient(135deg, var(--ama-accent), #ffb347) !important;
  color: #fff !important;
  border-radius: var(--ama-radius) var(--ama-radius) 0 0 !important;
  font-weight: 700;
}
.toc a { color: var(--ama-text) !important; }
.toc .toc-content { border-color: var(--ama-border) !important; }

/* --- Blog cards --- */
.blogcard, .blogcard-wrap {
  background: var(--ama-white) !important;
  border: 1px solid var(--ama-border) !important;
  border-radius: var(--ama-radius) !important;
  box-shadow: var(--ama-shadow-sm) !important;
  transition: all var(--ama-transition);
}
.blogcard:hover { box-shadow: var(--ama-shadow) !important; }
.blogcard-title { color: var(--ama-text) !important; font-weight: 700; }
.blogcard-snippet { color: var(--ama-text-dim) !important; }

/* --- Sale/Price --- */
.price, .sale-price { color: var(--ama-red) !important; font-weight: 800 !important; }
.original-price { color: var(--ama-text-dim) !important; text-decoration: line-through !important; }

/* --- Search --- */
.search-edit {
  background: var(--ama-bg) !important;
  border: 2px solid var(--ama-border) !important;
  border-radius: 24px !important;
  padding: 0.6em 1.2em !important;
  transition: border-color var(--ama-transition);
}
.search-edit:focus { border-color: var(--ama-accent) !important; }

/* --- Go to top --- */
.go-to-top-button {
  background: var(--ama-accent) !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(255,149,0,.3) !important;
}

/* --- Mobile --- */
.mobile-menu-buttons {
  background: var(--ama-white) !important;
  border-top: 1px solid var(--ama-border) !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,.04) !important;
}
.sidebar-menu-content { background: var(--ama-white) !important; }

/* --- Eye catch --- */
.eye-catch img { border: none !important; border-radius: var(--ama-radius) !important; }

/* --- Meta info --- */
.entry-date, .post-date { color: var(--ama-text-dim) !important; font-size: 0.8rem !important; }
.entry-categories a, .entry-tags a {
  background: var(--ama-bg) !important;
  color: var(--ama-text-dim) !important;
  border-radius: 6px !important;
  padding: 0.15em 0.5em !important;
  font-size: 0.75rem !important;
  font-weight: 600;
  transition: all var(--ama-transition);
}
.entry-categories a:hover, .entry-tags a:hover {
  background: var(--ama-accent-light) !important;
  color: var(--ama-accent) !important;
}

/* --- SNS share --- */
.sns-share-message { color: var(--ama-text-dim) !important; }

/* --- Forms --- */
input[type="text"], input[type="email"], textarea, select {
  background: var(--ama-bg) !important;
  border: 2px solid var(--ama-border) !important;
  border-radius: 8px !important;
  padding: 0.6em 1em !important;
  transition: border-color var(--ama-transition);
}
input:focus, textarea:focus { border-color: var(--ama-accent) !important; outline: none; }

/* --- Scroll animation --- */
.ama-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.ama-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Responsive --- */
@media screen and (max-width: 834px) {
  .article, article.post { padding: 1.2em !important; }
  .entry-title, .article h1 { font-size: 1.3rem !important; }
  .sidebar h3::after, .widget-title::after { display: none; }
}

@media screen and (max-width: 480px) {
  .article, article.post { padding: 1em !important; border-radius: 8px !important; }
  .wp-show-posts-single { border-radius: 8px !important; }
}