/* Armadillo Plate – responsive site CSS */
:root{
  --bg:#0b0b0b;
  --bg-olive:#1f2214;
  --fg:#f5f5f5;
  --muted:#c9c9c9;
  --accent:#d7d7d7;
  --line:rgba(255,255,255,.08);
  --container:1200px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", Meiryo, "ＭＳ ゴシック", sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
.container{ width:clamp(88%, 92vw, var(--container)); margin-inline:auto; }

/* ---------- Header ---------- */
header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  z-index: 20;
  border-bottom: 1px solid #666;
  height: 100px; /* ← 高さを80px→100pxにアップ */
  display: flex;
  align-items: center;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px; /* ← 横の余白も少し広げてバランス調整 */
  width: 100%;
}

.brand{ display:flex; align-items:center; gap:14px; font-weight:700; letter-spacing:.04em; }
.brand img {
  height: 42px;            /* ヘッダー高さに合わせて調整 */
  width: auto;             /* 比率維持 */
  display: block;
  object-fit: contain;
}

.brand .title{ font-size:18px; }

nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:26px; }
nav a{ font-size:14px; color:var(--muted); transition:opacity .2s ease; }
nav a:hover{ color:var(--fg); opacity:.95; }

/* Hamburger */
.hamburger{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:10px; align-items:center; justify-content:center; cursor:pointer; }
.hamburger span, .hamburger::before, .hamburger::after{
  content:""; display:block; width:22px; height:2px; background:#fff; margin:3px 0;
}

@media (max-width: 980px){
  nav{ position:fixed; inset-inline:0; top:64px; background:rgba(0,0,0,.88); border-top:1px solid var(--line); display:none; }
  nav.open{ display:block; }
  nav ul{ flex-direction:column; gap:0; }
  nav li{ border-bottom:1px solid var(--line); }
  nav a{ display:block; padding:16px 18px; font-size:15px; }
  .hamburger{ display:flex; }
}

.media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;           /* ← 角を丸く */
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15); /* 軽い影 */
  filter: saturate(0.7) brightness(1.05);     /* ← 彩度を70%、やや明るめに */
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 100px); /* ヘッダー分を差し引く */
  margin-top: 100px; /* ヘッダー下から開始 */
  display: grid;
  align-items: start;
  justify-items: end;
  background:
    /* 下方向へのフェード（黒になじませ） */
    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.6) 85%, #000 100%),
    /* 明るめのトーン調整 */
    url("../img/photo_topmain.jpg") center center / cover no-repeat;
  background-color: #000;
  text-align: right;
  padding: 6% 5% 0 5%;
  filter: brightness(1.4) contrast(1.05); /* ← 画像全体を少し明るく＆くっきり */
}


.hero-inner{ text-align:right; padding:120px 18px 72px; }
.hero-kicker{
  letter-spacing:.24em; font-size:13px; color:#e9e9e9; opacity:.9;
}
.hero-title{
  font-family:"Oswald", system-ui, sans-serif;
  font-size:clamp(28px, 5.4vw, 54px);
  line-height:1.12; letter-spacing:.15em; margin:.25em 0 .35em;
  text-transform:uppercase; font-weight:700;
}
.hero-sub{
  text-align: right; gap:22px; justify-content:center; flex-wrap:wrap;
  font-family:"Oswald", system-ui, sans-serif;
  font-size:clamp(18px, 2.6vw, 28px); letter-spacing:.28em;
}
.hero-badges{
  margin-top:16px;text-align: right; gap:10px; flex-wrap:wrap; justify-content:center;
}
.badge{
  border:1px solid var(--line); padding:8px 10px;
  font-size:11px; color:#e5e5e5; background:rgba(0,0,0,.2); border-radius:999px;
}



/* ---------- About ---------- */
section{ padding:80px 0; }
#about{ background:#0e0e0e; }
.about-grid{ display:grid; gap:38px; align-items:center; }
.about-grid .text{ font-size:15px; color:#ddd; }
.about-title{
  font-family:"Oswald", system-ui, sans-serif;
  font-size:clamp(22px, 3.2vw, 28px); letter-spacing:.2em; margin:0 0 12px;
}
.spec-card{
  border:1px solid var(--line); background:rgba(255,255,255,.02);
  border-radius:14px; padding:16px; font-size:14px; color:#d7d7d7;
}

.warning {background: yellow;color:red;padding:5px 10px;font-weight: bold;}

h4 {font-size: 120%;}

p.txt_blue {color:lightblue;}

@media (min-width: 920px){
  .about-grid{ grid-template-columns: 1.05fr .95fr; }
}



/* ---------- Instagram ---------- */
#instagram{ background:var(--bg-olive); }
.section-head{
  text-align:center; margin-bottom:28px; letter-spacing:.18em; color:#e7e7d7;
  font-family:"Oswald", system-ui, sans-serif; font-size:clamp(18px, 2vw, 22px);
}
.insta-header{ display:flex; justify-content:center; gap:14px; align-items:center; margin-bottom:24px; flex-wrap:wrap; }
.insta-header .handle{ font-weight:600; color:#eaeada; }
.grid{
  display:grid; gap:22px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 740px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px){
  .grid{ grid-template-columns: repeat(4, 1fr); }
}
.card{
  position:relative; overflow:hidden; border-radius:12px;
  border:1px solid rgba(255,255,255,.08); background:#111;
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
}
.card img{ width:100%; height:100%; object-fit:cover; }
.more-wrap{ text-align:center; margin-top:18px; }
.btn{
  display:inline-flex; gap:8px; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:999px; background:#0c0c0c; color:#efefef;
  border:1px solid var(--line); font-size:14px;
}
.btn:hover{ opacity:.9; }

/* ---------- Footer ---------- */
footer{ background:#000; }

#contact { position: relative; background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.4) 100%), url("../img/bg_contact.jpg") left center / cover no-repeat; 
color: #fff; border-top: 1px solid var(--line); }

.contact-wrap {
  display: grid;
  gap: 20px;
  padding: 60px 0 80px;
  position: relative;
  z-index: 1;
    text-align: right;
}

.footer-brand {
  font-weight: 700;
  letter-spacing: .08em;
}

.contact-info {
  color: #e0e0e0;
  font-size: 14px;
}

.contact-info a {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #fff;
}


/* Utilities */
.muted{ color:var(--muted); }
.spacer{ height:42px; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
main{ display:block; }


/* =========================================
   Full-width Page Title Hero
   （横いっぱい写真＋タイトル）
========================================= */
:root{
  --header-height: 72px;                              /* あなたのヘッダー高に合わせる */
  --ph-height: clamp(60px, 9vw, 100px);             /* 高さの既定値 */
  --ph-overlay: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.72) 70%);
}

.page-hero-full{
  position: relative;
  width: 100%;
  margin-top: var(--header-height);
  min-height: var(--ph-height);
  color: #fff;
  background:
    var(--ph-overlay),
    var(--ph-img, radial-gradient(circle at 50% 40%, #333, #111));
  background-position:
    center center,                                      /* overlay */
    var(--ph-align, center) center;                     /* image align: left/center/right */
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  filter: saturate(.9);                                  /* 低彩度で統一感 */
}

.page-hero-full::after{                                  /* 微ノイズで質感 */
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' opacity='0.06'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

/* 中身の余白と立ち上がり */
.page-hero-content{
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(36px, 8vw, 100px) 0;
}
.page-hero-text{
  position: relative;
}

.page-hero-kicker{
  font: 600 13px/1 "Oswald", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: .9;
  display: block;
  margin-bottom: .5em;
}
.page-hero-title{
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 4vw, 50px);
  line-height: 1.2;
  margin: 0 0 .3em;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.page-hero-sub{
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.8;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}

/* 背景の固定（デスクトップのみ微パララックス） */
@media (hover:hover){
  .page-hero-full{ background-attachment: fixed; }
}
@media (max-width: 768px){
  .page-hero-full{ background-attachment: scroll; text-align: center; }
  .page-hero-text.container{ padding-inline: 16px; }
}

/* 左寄せ/中央/右寄せの整列（テキスト位置も合わせる） */
.page-hero-full[style*="--ph-align:left"]  .page-hero-text{ text-align: left; }
.page-hero-full[style*="--ph-align:center"] .page-hero-text{ text-align: center; }
.page-hero-full[style*="--ph-align:right"] .page-hero-text{ text-align: right; }

/* バリエーション：高さ違いをクラスで指定したいとき */
.page-hero-full--sm{ --ph-height: clamp(200px, 28vw, 320px); }
.page-hero-full--lg{ --ph-height: clamp(320px, 48vw, 640px); }

.spec-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: clamp(16px, 3vw, 32px);
  margin: clamp(24px, 4vw, 40px) 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.spec-title {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  border-left: 3px solid rgba(255,255,255,0.3);
  padding-left: 0.6rem;
}

/* 本文＋画像を横並びに（PC時のみ） */
.spec-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* ← 上揃え */
  gap: clamp(16px, 3vw, 32px);
}

.spec-content .text {
  flex: 1;
  min-width: 280px;
}

.spec-media {
  flex: 0 0 40%; /* ← 画像の幅（調整可） */
  text-align: right; /* ← 右寄せ */
}

.spec-media img {
  width: 100%;
  height: auto;
  border-radius: 14px; /* ← 角丸 */
  filter: saturate(0.85) brightness(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.spec-media figcaption {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin-top: 0.4rem;
  text-align: right; /* ← キャプションも右寄せ */
}

/* スマホ時は縦並びに */
@media (max-width: 680px) {
  .spec-content {
    flex-direction: column;
  }
  .spec-media {
    flex: 1 1 100%;
    text-align: center;
  }
  .spec-media figcaption {
    text-align: center;
  }
}

h2.ta_center{
    text-align: center;
}

/* ===== Products: 一覧 ===== */
section#item {
    padding-top:0;
}

section#item h3 {
    font-size: 160%;
}

section.product {
    padding-top:20px;
}

.products-section { margin: clamp(32px, 6vw, 80px) auto; }
.products-grid {
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
  grid-template-columns: repeat(2, minmax(0,1fr));
}

@media (max-width: 900px){ .products-grid{ grid-template-columns: 1fr; } }

.product-card{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  transition: transform .3s ease, box-shadow .3s ease;
}
.product-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.25); }

.product-thumb{ position: relative; margin: 0; }
.product-thumb img{
  width: 100%; height: auto; display: block;
  filter: saturate(.9) brightness(1.03);
}
.badge-wrap{
  position: absolute; left: 12px; bottom: 12px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.badge{
  font-size: 12px; line-height: 1;
  padding: 6px 8px; border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  backdrop-filter: blur(4px) saturate(120%);
}

.product-body{ padding: clamp(16px, 3vw, 28px); }
.product-title{
  font-weight: 700; color: #fff;
  font-size: clamp(18px, 2vw, 22px); margin: 0 0 .4rem;
}
.product-desc{ color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.7; margin: 0 0 .8rem; }

.product-specs{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 14px; margin: 0 0 1rem;
}
.product-specs dt{ color: rgba(255,255,255,.7); font-size: 13px; }
.product-specs dd{ margin: 0; color: rgba(255,255,255,.95); font-size: 14px; }
@media (max-width: 520px){ .product-specs{ grid-template-columns: 1fr; } }

.btn-link{
  display: inline-block; padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px; color: rgba(255,255,255,.95);
  text-decoration: none; transition: background .25s ease;
}
.btn-link:hover{ background: rgba(255,255,255,.06); }

/* ===== Product: 詳細 ===== */
.product{display:grid;grid-template-columns:minmax(300px,620px)1fr;gap:48px;align-items:start}
.visual{background:#0a0a0a;border-radius:12px;padding:18px;display:flex;align-items:center;justify-content:center}
.visual img{width:100%;height:auto;border-radius:10px;filter:brightness(0.95)}

.sku-list{display:flex;flex-direction:column;gap:22px}
.sku-item{display:grid;grid-template-columns:1fr 92px;gap:16px;align-items:center;padding:16px 14px;border-radius:14px;background:#0b0b0b;outline:1px solid rgba(255,255,255,.06)}
.logo{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;padding:8px;justify-self:end}
.logo img{max-width:100%;border-radius:50%}

.size{font-weight:800;font-size:16px;margin-bottom:8px;padding-bottom:10px;border-bottom: 1px dotted #333;}
.meta{display:grid;gap:6px}
.row{display:grid;grid-template-columns:120px 1fr;gap:8px}
.label{color:var(--muted)}
.val{font-variant-numeric:tabular-nums}
.price .val{font-weight:900;font-size:20px;color:var(--accent)}
.tax{color:var(--muted);margin-left:.5em;font-size:.95em}
.price-line{display:flex;align-items:baseline;gap:10px}

@media(max-width:980px){
  .product{grid-template-columns:1fr;gap:28px}
  .sku-item{grid-template-columns:1fr 80px}
  .logo{width:80px;height:80px}
}

@media(max-width:520px){
  .page-head{flex-direction:column;align-items:flex-start;gap:6px}
  .page-head h1{font-size:28px}
  .row{grid-template-columns:96px 1fr}
}

/* お問い合わせフォーム */
.contact-section{
  max-width:700px;
  margin:0 auto;
  padding:40px 0;
}
.contact-section p{
  color:#ccc;
  margin-bottom:30px;
  line-height:1.8;
}

.contact-form{display:flex;flex-direction:column;gap:22px}
.form-group{display:flex;flex-direction:column;gap:6px}
label{font-weight:600;letter-spacing:.05em}

input,textarea{
  background:#111;
  color:#fff;
  border:1px solid #444;
  border-radius:6px;
  padding:10px 12px;
  font-size:16px;
  font-family:inherit;
}
input:focus,textarea:focus{
  outline:none;
  border-color:#ffd277;
  background:#151515;
}

button{
  background:#ffd277;
  color:#000;
  font-weight:700;
  border:none;
  border-radius:8px;
  padding:12px 24px;
  font-size:16px;
  cursor:pointer;
  transition:.2s;
  align-self:flex-start;
}
button:hover{
  opacity:.85;
}