/*
Theme Name: beautyfrontier
Theme URI: https://beauty-frontier.com
Author: SAT
Author URI: https://beauty-frontier.com
Description: 美容情報特化SEOメディア向け超軽量WordPressテーマ。Classic Editor前提、LLMO最適化、セマンティックHTML徹底。
Version: 1.0.0
License: Proprietary
License URI: All rights reserved. This theme is proprietary software of SAT.
Text Domain: beautyfrontier
*/

/* ========================================
   CSS Variables — 余白スケール統一
   ======================================== */
:root{
  /* Colors */
  --color-primary:#1a6b8a;
  --color-primary-light:#e8f4f8;
  --color-primary-dark:#0e4a5f;
  --color-accent:#c4836c;
  --color-accent-light:#fdf0eb;
  --color-text:#2c2c2c;
  --color-text-light:#6b6b6b;
  --color-text-muted:#999;
  --color-bg:#ffffff;
  --color-bg-soft:#f8f9fb;
  --color-bg-warm:#faf9f7;
  --color-border:#e5e5e5;
  --color-border-light:#f0f0f0;
  /* Fonts */
  --font-heading:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --font-body:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  /* Spacing scale (8px base) */
  --sp-xs:4px;
  --sp-sm:8px;
  --sp-md:16px;
  --sp-lg:24px;
  --sp-xl:32px;
  --sp-2xl:48px;
  --sp-3xl:64px;
  /* Misc */
  --radius:6px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 2px 8px rgba(0,0,0,.08);
  --transition:180ms ease;
}

/* ========================================
   Reset & Base
   ======================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-body);line-height:1.8;color:var(--color-text);background:var(--color-bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--color-primary-dark)}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--color-primary-light);color:var(--color-primary-dark)}

/* ========================================
   Skip Link (a11y)
   ======================================== */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;top:0;left:0;width:auto;height:auto;padding:var(--sp-sm) var(--sp-md);background:var(--color-primary);color:#fff;z-index:100000;font-size:.9rem}

/* ========================================
   Layout
   ======================================== */
.site-container{max-width:1100px;margin:0 auto;padding:0 var(--sp-lg)}
.site-content{display:flex;gap:var(--sp-2xl);padding:var(--sp-2xl) 0}
.content-area{flex:1;min-width:0}
.sidebar{width:300px;flex-shrink:0}

/* ========================================
   Header
   ======================================== */
.site-header{
  border-bottom:1px solid var(--color-border);
  padding:var(--sp-lg) 0;
  background:var(--color-bg);
}
.site-header .site-container{display:flex;align-items:center;justify-content:space-between}
.site-branding a{
  font-family:var(--font-heading);
  font-size:1.6rem;
  font-weight:600;
  color:var(--color-text);
  text-decoration:none;
  letter-spacing:.04em;
}
.main-nav ul{display:flex;gap:var(--sp-lg)}
.main-nav a{
  color:var(--color-text-light);
  font-size:.88rem;
  letter-spacing:.02em;
  padding:var(--sp-xs) 0;
  border-bottom:2px solid transparent;
  transition:all var(--transition);
}
.main-nav a:hover{color:var(--color-primary);border-bottom-color:var(--color-primary)}

/* ========================================
   Breadcrumb
   ======================================== */
.breadcrumb{padding:var(--sp-md) 0;font-size:.78rem;color:var(--color-text-muted)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--sp-xs)}
.breadcrumb li:not(:last-child)::after{content:"›";margin-left:var(--sp-sm);color:var(--color-border)}
.breadcrumb a{color:var(--color-text-light)}
.breadcrumb a:hover{color:var(--color-primary)}

/* ========================================
   Article — Entry Header
   ======================================== */
.entry-header{
  margin-bottom:var(--sp-xl);
  padding-bottom:var(--sp-lg);
  border-bottom:1px solid var(--color-border-light);
}
.entry-title{
  font-family:var(--font-heading);
  font-size:1.7rem;
  line-height:1.5;
  font-weight:600;
  color:var(--color-text);
  letter-spacing:.02em;
}
.entry-meta{margin-top:var(--sp-sm);font-size:.8rem;color:var(--color-text-muted)}
.entry-meta span+span::before{content:"·";margin:0 var(--sp-sm);color:var(--color-border)}

/* ========================================
   Article — Entry Content
   ======================================== */
.entry-content{font-size:1rem;line-height:2}

.entry-content h2{
  font-family:var(--font-heading);
  font-size:1.35rem;
  font-weight:600;
  margin:var(--sp-3xl) 0 var(--sp-lg);
  padding:14px 20px;
  background:var(--color-primary-light);
  border-left:4px solid var(--color-primary);
  border-radius:0 var(--radius) var(--radius) 0;
  letter-spacing:.02em;
}

.entry-content h3{
  font-size:1.15rem;
  font-weight:700;
  margin:var(--sp-2xl) 0 var(--sp-md);
  padding-bottom:var(--sp-sm);
  border-bottom:2px solid var(--color-border-light);
  color:var(--color-text);
}

.entry-content h4{
  font-size:1.05rem;
  font-weight:700;
  margin:var(--sp-xl) 0 var(--sp-sm);
  color:var(--color-text);
  padding-left:12px;
  border-left:3px solid var(--color-accent);
}

.entry-content p{margin-bottom:var(--sp-lg)}

.entry-content ul,
.entry-content ol{margin:var(--sp-md) 0 var(--sp-lg) var(--sp-lg)}
.entry-content ul{list-style:disc}
.entry-content ol{list-style:decimal}
.entry-content li{margin-bottom:var(--sp-sm);line-height:1.9}

.entry-content blockquote{
  margin:var(--sp-xl) 0;
  padding:20px var(--sp-lg);
  background:var(--color-bg-warm);
  border-left:4px solid var(--color-accent);
  color:var(--color-text-light);
  border-radius:0 var(--radius) var(--radius) 0;
}

.entry-content table{
  margin:var(--sp-xl) 0;
  box-shadow:var(--shadow-sm);
  border-radius:var(--radius);
  overflow:hidden;
}
.entry-content th,
.entry-content td{padding:14px var(--sp-md);border:1px solid var(--color-border);text-align:left}
.entry-content th{background:var(--color-bg-soft);font-weight:700;color:var(--color-text)}

.entry-content a{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}
.entry-content a:hover{color:var(--color-primary-dark)}

/* ========================================
   TOC (Table of Contents)
   ======================================== */
.toc{
  margin:var(--sp-xl) 0 var(--sp-2xl);
  padding:var(--sp-lg);
  background:var(--color-bg-soft);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.toc-title{
  font-family:var(--font-heading);
  font-size:.95rem;
  font-weight:600;
  margin-bottom:var(--sp-md);
  padding-bottom:var(--sp-sm);
  border-bottom:1px solid var(--color-border);
  color:var(--color-text);
}
.toc ol{list-style:decimal;margin-left:20px}
.toc li{margin-bottom:var(--sp-sm);font-size:.9rem;line-height:1.6}
.toc a{color:var(--color-text-light);transition:color var(--transition)}
.toc a:hover{color:var(--color-primary)}

/* ========================================
   FAQ Section
   ======================================== */
.faq-section{margin:var(--sp-2xl) 0}

.faq-item{
  margin-bottom:var(--sp-sm);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:box-shadow var(--transition);
}
.faq-item:hover{box-shadow:var(--shadow-sm)}

.faq-item summary{
  padding:var(--sp-md) 20px;
  font-weight:700;
  cursor:pointer;
  font-size:.95rem;
  color:var(--color-text);
  list-style:none;
  display:flex;
  align-items:center;
  gap:12px;
}
.faq-item summary::before{
  content:"Q";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  background:var(--color-primary);
  color:#fff;
  border-radius:50%;
  font-size:.75rem;
  font-weight:700;
  flex-shrink:0;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--color-bg-soft)}
.faq-item[open] summary{border-bottom:1px solid var(--color-border-light)}
.faq-item .faq-answer{
  padding:var(--sp-md) 20px var(--sp-md) 60px;
  line-height:1.9;
  color:var(--color-text-light);
}

/* ========================================
   Related Posts
   ======================================== */
.related-posts{
  margin:var(--sp-3xl) 0 var(--sp-2xl);
  padding-top:var(--sp-xl);
  border-top:2px solid var(--color-border-light);
}
.related-posts-title{
  font-family:var(--font-heading);
  font-size:1.15rem;
  font-weight:600;
  margin-bottom:var(--sp-lg);
  color:var(--color-text);
}
.related-posts-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-md)}

.related-post-item a{
  display:block;
  padding:20px;
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  color:var(--color-text);
  transition:all var(--transition);
  box-shadow:var(--shadow-sm);
}
.related-post-item a:hover{
  border-color:var(--color-primary);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.related-post-item .rp-title{font-weight:700;font-size:.9rem;line-height:1.6}
.related-post-item .rp-date{font-size:.75rem;color:var(--color-text-muted);margin-top:var(--sp-sm)}

/* ========================================
   Author Box
   ======================================== */
.author-box{
  margin:var(--sp-2xl) 0;
  padding:var(--sp-lg);
  background:var(--color-bg-warm);
  border-radius:var(--radius);
  display:flex;
  gap:20px;
  align-items:flex-start;
  border:1px solid var(--color-border-light);
}
.author-info .author-name{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:1.05rem;
  color:var(--color-text);
}
.author-info .author-desc{
  font-size:.85rem;
  color:var(--color-text-light);
  margin-top:var(--sp-sm);
  line-height:1.8;
}

/* ========================================
   Sidebar
   ======================================== */
.sidebar section{
  margin-bottom:var(--sp-lg);
  padding:var(--sp-lg);
  background:var(--color-bg-soft);
  border-radius:var(--radius);
  border:1px solid var(--color-border-light);
}
.sidebar .widget-title{
  font-family:var(--font-heading);
  font-size:.95rem;
  font-weight:600;
  padding-bottom:var(--sp-sm);
  margin-bottom:var(--sp-md);
  border-bottom:2px solid var(--color-primary);
  color:var(--color-text);
}
.sidebar ul li{
  padding:10px 0;
  border-bottom:1px solid var(--color-border-light);
  font-size:.88rem;
}
.sidebar ul li:last-child{border-bottom:none;padding-bottom:0}
.sidebar a{color:var(--color-text-light);transition:color var(--transition)}
.sidebar a:hover{color:var(--color-primary)}

/* ========================================
   Footer
   ======================================== */
.site-footer{
  margin-top:var(--sp-3xl);
  padding:var(--sp-2xl) 0;
  background:var(--color-bg-soft);
  border-top:1px solid var(--color-border);
  font-size:.8rem;
  color:var(--color-text-muted);
  text-align:center;
}
.footer-nav{margin-bottom:var(--sp-md)}
.footer-nav a{
  color:var(--color-text-light);
  margin:0 var(--sp-md);
  transition:color var(--transition);
}
.footer-nav a:hover{color:var(--color-primary)}
.footer-widgets{margin:var(--sp-lg) 0;text-align:left}

/* ========================================
   Archive / Search — List
   ======================================== */
.archive-header{margin-bottom:var(--sp-xl)}
.archive-title{
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:600;
  color:var(--color-text);
}
.archive-description{margin-top:var(--sp-sm);color:var(--color-text-light);font-size:.9rem}

.post-list .post-item{
  padding:var(--sp-lg) 0;
  border-bottom:1px solid var(--color-border-light);
  transition:background var(--transition);
}
.post-item:first-child{padding-top:0}
.post-item:hover{background:var(--color-bg-soft)}
.post-item .post-title{font-size:1.1rem;font-weight:700}
.post-item .post-title a{color:var(--color-text);transition:color var(--transition)}
.post-item .post-title a:hover{color:var(--color-primary)}
.post-item .post-excerpt{margin-top:var(--sp-sm);font-size:.9rem;color:var(--color-text-light);line-height:1.8}
.post-item .post-meta{margin-top:var(--sp-sm);font-size:.78rem;color:var(--color-text-muted)}

/* ========================================
   No Results / Search
   ======================================== */
.no-results{text-align:center;padding:var(--sp-3xl) 0;color:var(--color-text-light)}
.no-results p{margin-bottom:var(--sp-md)}
.no-results .search-form{margin-top:var(--sp-lg);display:flex;gap:var(--sp-sm);justify-content:center}
.no-results .search-field{
  padding:12px var(--sp-md);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  font-size:.9rem;
  width:280px;
}
.no-results .search-submit{
  padding:12px var(--sp-lg);
  background:var(--color-primary);
  color:#fff;
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
  font-size:.9rem;
  transition:background var(--transition);
}
.no-results .search-submit:hover{background:var(--color-primary-dark)}

/* ========================================
   HowTo Steps
   ======================================== */
.howto-section{
  margin:var(--sp-xl) 0;
  padding:var(--sp-lg);
  background:var(--color-bg-soft);
  border-radius:var(--radius);
  border:1px solid var(--color-border);
  counter-reset:howto-counter;
}
.howto-step{
  padding:var(--sp-md) 0 var(--sp-md) var(--sp-2xl);
  position:relative;
  border-bottom:1px solid var(--color-border-light);
}
.howto-step:last-child{border-bottom:none;padding-bottom:0}
.howto-step::before{
  content:counter(howto-counter);
  counter-increment:howto-counter;
  position:absolute;
  left:0;
  top:var(--sp-md);
  width:32px;
  height:32px;
  background:var(--color-primary);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  font-weight:700;
}

/* ========================================
   404
   ======================================== */
.error-404{text-align:center;padding:var(--sp-3xl) 0 var(--sp-2xl)}
.error-404 h1{
  font-family:var(--font-heading);
  font-size:2.2rem;
  margin-bottom:var(--sp-lg);
  color:var(--color-text);
}
.error-404 p{color:var(--color-text-light);margin-bottom:var(--sp-lg)}
.error-404 a{
  display:inline-block;
  padding:14px var(--sp-xl);
  background:var(--color-primary);
  color:#fff;
  border-radius:var(--radius);
  transition:background var(--transition);
}
.error-404 a:hover{background:var(--color-primary-dark);color:#fff}

/* ========================================
   Pagination
   ======================================== */
.pagination{margin:var(--sp-2xl) 0;display:flex;justify-content:center;gap:var(--sp-sm)}
.pagination a,
.pagination span{
  display:inline-block;
  padding:10px var(--sp-md);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  font-size:.85rem;
  color:var(--color-text);
  transition:all var(--transition);
}
.pagination .current{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.pagination a:hover{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary)}

/* ========================================
   Contact Form 7 — Refined Minimal
   ======================================== */

/* Page wrapper */
.page-template-default .entry-content{
  max-width:640px;
  margin:0 auto;
}

/* Form layout */
.wpcf7-form{
  display:flex;
  flex-direction:column;
  gap:var(--sp-lg);
}
.wpcf7-form p{
  margin-bottom:0;
}

/* Labels */
.wpcf7-form label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  color:var(--color-text);
  margin-bottom:var(--sp-sm);
  letter-spacing:.03em;
}

/* Required badge */
.wpcf7-form .required-badge{
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  color:#fff;
  background:var(--color-accent);
  padding:2px 6px;
  border-radius:3px;
  margin-left:var(--sp-sm);
  vertical-align:middle;
  letter-spacing:.04em;
}

/* Text inputs, email, tel, url */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea{
  width:100%;
  padding:14px var(--sp-md);
  font-family:var(--font-body);
  font-size:.95rem;
  line-height:1.6;
  color:var(--color-text);
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  transition:border-color var(--transition),box-shadow var(--transition);
  appearance:none;
  -webkit-appearance:none;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(26,107,138,.1);
}

/* Textarea */
.wpcf7-form textarea{
  min-height:180px;
  resize:vertical;
}

/* Select dropdown arrow */
.wpcf7-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b6b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--sp-md) center;
  padding-right:var(--sp-2xl);
}

/* Checkbox & Radio */
.wpcf7-form .wpcf7-list-item{
  display:block;
  margin-bottom:var(--sp-sm);
}
.wpcf7-form .wpcf7-list-item label{
  display:flex;
  align-items:center;
  gap:var(--sp-sm);
  font-weight:400;
  cursor:pointer;
}
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"]{
  width:18px;
  height:18px;
  accent-color:var(--color-primary);
  flex-shrink:0;
}

/* File upload */
.wpcf7-form input[type="file"]{
  padding:var(--sp-sm);
  font-size:.85rem;
  color:var(--color-text-light);
}

/* Submit button */
.wpcf7-form input[type="submit"]{
  display:inline-block;
  padding:16px var(--sp-2xl);
  font-family:var(--font-body);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.06em;
  color:#fff;
  background:var(--color-primary);
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background var(--transition),transform var(--transition);
  align-self:center;
  min-width:220px;
}
.wpcf7-form input[type="submit"]:hover{
  background:var(--color-primary-dark);
  transform:translateY(-1px);
}
.wpcf7-form input[type="submit"]:active{
  transform:translateY(0);
}

/* Spinner */
.wpcf7-spinner{
  margin-left:var(--sp-sm);
}

/* Validation — error */
.wpcf7-not-valid{
  border-color:var(--color-accent) !important;
  box-shadow:0 0 0 3px rgba(196,131,108,.12) !important;
}
.wpcf7-not-valid-tip{
  display:block;
  margin-top:var(--sp-xs);
  font-size:.78rem;
  color:var(--color-accent);
  font-weight:500;
}

/* Response messages */
.wpcf7-response-output{
  margin:var(--sp-lg) 0 0 !important;
  padding:var(--sp-md) var(--sp-lg) !important;
  border-radius:var(--radius) !important;
  font-size:.88rem;
  line-height:1.6;
}
.wpcf7-mail-sent-ok,
.wpcf7 form.sent .wpcf7-response-output{
  border:1px solid #b8dfc8 !important;
  background:#f0faf4 !important;
  color:#2d6a4f !important;
}
.wpcf7-validation-errors,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{
  border:1px solid #f5cac3 !important;
  background:#fdf0eb !important;
  color:#9b4d3a !important;
}
.wpcf7 form.failed .wpcf7-response-output{
  border:1px solid var(--color-border) !important;
  background:var(--color-bg-soft) !important;
  color:var(--color-text-light) !important;
}

/* Acceptance (privacy checkbox) */
.wpcf7-acceptance .wpcf7-list-item{
  margin:0;
}
.wpcf7-acceptance label{
  font-size:.82rem !important;
  font-weight:400 !important;
  color:var(--color-text-light) !important;
}

/* ========================================
   Responsive — Mobile
   ======================================== */
@media(max-width:768px){
  :root{
    --sp-lg:20px;
    --sp-xl:28px;
    --sp-2xl:40px;
    --sp-3xl:56px;
  }
  .site-container{padding:0 var(--sp-md)}
  .site-content{flex-direction:column;gap:var(--sp-xl);padding:var(--sp-xl) 0}
  .sidebar{width:100%}
  .sidebar section{padding:var(--sp-md)}
  .site-header .site-container{flex-direction:column;gap:var(--sp-sm)}
  .main-nav ul{flex-wrap:wrap;justify-content:center;gap:var(--sp-md)}
  .entry-title{font-size:1.35rem}
  .entry-content h2{font-size:1.2rem;padding:12px var(--sp-md)}
  .related-posts-list{grid-template-columns:1fr}
  .author-box{flex-direction:column}
  .no-results .search-form{flex-direction:column;align-items:center}
  .no-results .search-field{width:100%;max-width:300px}
  .faq-item .faq-answer{padding-left:20px}
  .footer-nav a{margin:0 var(--sp-sm)}
}