/* =========================================================
   CAMERA BtoB PICKUP — STYLE
   株式会社にっこにこ太陽古美術店
   ========================================================= */

:root{
  --bg:           #FAF5EA;
  --bg-soft:      #F2E9D6;
  --bg-dark:      #1F1B16;
  --ink:          #1F1B16;
  --ink-soft:     #4A4239;
  --ink-mute:     #7A6F61;
  --line:         #D9CCAF;
  --line-soft:    #E8DEC6;

  --sun:          #C0392B;   /* メイン赤（沈む太陽 / カメラ革） */
  --sun-deep:     #8B2218;
  --sun-soft:     #E08775;
  --gold:         #B58B3F;

  --font-jp-serif: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", serif;
  --font-jp-sans:  "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-en-serif: "DM Serif Display", serif;

  --maxw: 1120px;

  --shadow-card: 0 1px 0 var(--line) inset, 0 24px 60px -28px rgba(31,27,22,.18);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family: var(--font-jp-sans);
  font-weight:400;
  color: var(--ink);
  background: var(--bg);
  line-height:1.8;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font: inherit; cursor: pointer; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

.container{
  width: min(100% - 2.5rem, var(--maxw));
  margin-inline:auto;
}

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(250,245,234,.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding: 14px 0;
}
.brand{ display:flex; align-items:center; gap:.7rem; color: var(--ink); }
.brand__mark{
  width:34px; height:34px; color: var(--sun);
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .6s ease;
}
.brand:hover .brand__mark{ transform: rotate(45deg); }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__name{
  font-family: var(--font-jp-serif);
  font-weight:700;
  font-size: 1.05rem;
  letter-spacing:.04em;
}
.brand__sub{
  font-size:.7rem;
  color: var(--ink-mute);
  letter-spacing:.16em;
}

.header-tel{
  display:flex; flex-direction:column; align-items:flex-end;
  line-height:1.1;
  padding: 6px 14px 8px;
  border-left: 2px solid var(--sun);
}
.header-tel__label{
  font-size:.68rem;
  color: var(--ink-mute);
  letter-spacing:.14em;
}
.header-tel__num{
  font-family: var(--font-en-serif);
  font-size: 1.45rem;
  color: var(--sun-deep);
  letter-spacing:.02em;
}

@media (max-width: 640px){
  .header-tel__num{ font-size:1.15rem; }
  .brand__name{ font-size:.95rem; }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 9vw, 130px) 0 clamp(70px,10vw,140px);
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 82% 18%, rgba(192,57,43,.18), transparent 42%),
    radial-gradient(circle at 12% 95%, rgba(181,139,63,.12), transparent 45%),
    linear-gradient(180deg, var(--bg) 0%, #F4EAD4 100%);
}
.hero__bg::after{
  /* 紙のような微細ノイズ */
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(31,27,22,.045) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  opacity:.55;
}
.hero__inner{ position:relative; }

.eyebrow{
  font-family: var(--font-en-serif);
  font-size:.85rem;
  letter-spacing:.32em;
  color: var(--sun-deep);
  margin-bottom: 1.8rem;
  position:relative;
  padding-left: 46px;
}
.eyebrow::before{
  content:"";
  position:absolute; left:0; top:50%;
  width: 32px; height:1px;
  background: var(--sun-deep);
}

.hero__title{
  font-family: var(--font-jp-serif);
  font-weight:800;
  font-size: clamp(2.2rem, 6.4vw, 5rem);
  line-height:1.14;
  letter-spacing:.01em;
}
.hero__title > span{ display:block; }
.hero__title-accent{
  color: var(--sun);
  position:relative;
  display:inline-block;
}
.hero__title-accent::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:.08em;
  height:.18em;
  background: rgba(192,57,43,.18);
  z-index:-1;
}

.hero__lead{
  margin-top: 1.8rem;
  max-width: 38em;
  font-size: 1.05rem;
  line-height:2.1;
  color: var(--ink-soft);
}

.hero__cta{
  margin-top: 2.5rem;
  display:flex; flex-wrap:wrap; gap: 1rem;
}
.hero__note{
  margin-top: 1.6rem;
  font-size:.8rem;
  color: var(--ink-mute);
}

/* ---------- Buttons ---------- */
.btn{
  --pad-y: 1rem;
  --pad-x: 1.8rem;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem;
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--font-jp-sans);
  font-weight:700;
  font-size: 1.02rem;
  letter-spacing:.06em;
  border: 1.5px solid transparent;
  border-radius: 999px;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  text-align:center;
}
.btn b{ font-family: var(--font-en-serif); font-weight:400; font-size:1.18em; letter-spacing:.01em; }
.btn__icon{ font-size:1.1em; }

.btn--primary{
  background: var(--sun);
  color: #fff;
  box-shadow: 0 12px 28px -10px rgba(192,57,43,.55);
}
.btn--primary:hover{
  background: var(--sun-deep);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(139,34,24,.55);
}
.btn--ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover{
  background: var(--ink);
  color: var(--bg);
}
.btn--block{ width:100%; }

/* ---------- Section common ---------- */
section{ padding: clamp(70px, 9vw, 120px) 0; }

.section-head{ margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.section-head__en{
  font-family: var(--font-en-serif);
  font-size: .9rem;
  letter-spacing:.32em;
  color: var(--sun-deep);
  margin-bottom:.7rem;
}
.section-head__ja{
  font-family: var(--font-jp-serif);
  font-weight:700;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  letter-spacing:.04em;
  line-height:1.3;
}
.section-head__lead{
  margin-top:1rem;
  color: var(--ink-soft);
}
.section-head--center{ text-align:center; }
.section-head--light .section-head__en{ color:#E6BFB0; }
.section-head--light .section-head__ja{ color:#fff; }

/* ---------- Points ---------- */
.points{
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.points__list{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.point{
  position:relative;
  padding: 2.4rem 2rem;
}
.point + .point{ border-left: 1px dashed var(--line); }
.point__num{
  font-family: var(--font-en-serif);
  font-size: 2.6rem;
  color: var(--sun);
  line-height:1;
  margin-bottom:1.2rem;
}
.point__title{
  font-family: var(--font-jp-serif);
  font-weight:700;
  font-size: 1.3rem;
  line-height:1.55;
  margin-bottom:1rem;
  letter-spacing:.04em;
}
.point__text{
  color: var(--ink-soft);
  font-size:.95rem;
}
@media (max-width: 820px){
  .points__list{ grid-template-columns: 1fr; }
  .point + .point{ border-left:none; border-top: 1px dashed var(--line); }
}

/* ---------- Rate card ---------- */
.rate{
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}
.rate__card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(2rem, 4vw, 3.5rem);
  box-shadow: var(--shadow-card);
  position:relative;
}
.rate__card::before{
  /* 角飾り */
  content:""; position:absolute; top:14px; left:14px; right:14px; bottom:14px;
  border: 1px solid var(--line-soft); pointer-events:none;
}
.rate__head{ text-align:center; margin-bottom: 2.5rem; }
.rate__label{
  display:inline-block;
  font-family: var(--font-en-serif);
  font-size:.8rem;
  letter-spacing:.3em;
  color: var(--sun-deep);
  padding: 4px 18px;
  border:1px solid var(--sun-deep);
  border-radius:999px;
  margin-bottom: 1.3rem;
}
.rate__title{
  font-family: var(--font-jp-serif);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height:1.35;
  font-weight:700;
}
.rate__price{
  font-family: var(--font-en-serif);
  color: var(--sun);
  font-size: clamp(3rem, 9vw, 5.2rem);
  font-weight: 400;
  letter-spacing:.02em;
  margin-left:.5rem;
}
.rate__price span{
  font-family: var(--font-jp-serif);
  font-size:.35em;
  color: var(--ink);
  margin-left:.1em;
}
.rate__sub{
  margin-top:.7rem;
  color: var(--ink-soft);
  font-size:.95rem;
}

.rate__body{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 1rem;
}
.rate__col h3{
  font-family: var(--font-jp-serif);
  font-size: 1.15rem;
  margin-bottom: 1rem;
  padding-bottom:.6rem;
  border-bottom: 1px solid var(--line);
  display:flex; align-items:center; gap:.6rem;
}
.rate__col--ok h3::before{
  content:"○"; color: var(--sun); font-size:1.2em; font-weight:bold;
}
.rate__col--ng h3::before{
  content:"×"; color: var(--ink-mute); font-size:1.2em; font-weight:bold;
}
.rate__col ul{ display:flex; flex-direction:column; gap:.4rem; }
.rate__col li{
  padding-left: 1.2rem;
  position:relative;
  font-size:.97rem;
}
.rate__col li::before{
  content:"";
  width:6px; height:6px;
  position:absolute; left:0; top:.75em;
  background: var(--gold);
  border-radius:50%;
}
.rate__col--ng li::before{ background: var(--ink-mute); }
.rate__col-note{
  margin-top:1.2rem;
  padding: .8rem 1rem;
  background: var(--bg);
  font-size:.85rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--gold);
}

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

/* ---------- Methods ---------- */
.methods{ background: var(--bg); }
.methods__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.method{
  background:#fff;
  padding: 2rem 1.8rem 2.2rem;
  border:1px solid var(--line);
  border-top: 3px solid var(--sun);
  transition: transform .35s ease, box-shadow .35s ease;
}
.method:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -22px rgba(31,27,22,.25);
}
.method__tag{
  font-family: var(--font-en-serif);
  font-size:.78rem;
  letter-spacing:.3em;
  color: var(--sun);
  margin-bottom:1rem;
}
.method__title{
  font-family: var(--font-jp-serif);
  font-size: 1.25rem;
  font-weight:700;
  margin-bottom: .9rem;
  line-height:1.5;
}
.method__body{ color: var(--ink-soft); font-size:.95rem; margin-bottom:1.2rem; }
.method__pay{
  display:inline-block;
  font-size:.88rem;
  color: var(--sun-deep);
  font-weight:700;
  padding-top:.8rem;
  border-top:1px dashed var(--line);
  width:100%;
}
@media (max-width: 860px){
  .methods__grid{ grid-template-columns:1fr; }
}

/* ---------- Area (dark section) ---------- */
.area{
  background: var(--bg-dark);
  color: #ECE3CF;
  position:relative;
  overflow:hidden;
}
.area::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 90% 10%, rgba(192,57,43,.25), transparent 35%),
    radial-gradient(circle at 5% 100%, rgba(181,139,63,.15), transparent 40%);
  pointer-events:none;
}
.area .container{ position:relative; }

.area__list{
  display:flex; flex-direction:column;
}
.area__item{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:2rem;
  padding: 1.8rem 0;
  border-top:1px solid rgba(236,227,207,.15);
  align-items:start;
}
.area__item:last-child{ border-bottom:1px solid rgba(236,227,207,.15); }
.area__item dt{
  display:flex; flex-direction:column; gap:.4rem;
}
.area__pin{
  display:inline-block;
  font-family: var(--font-jp-serif);
  font-weight:700;
  font-size:1.25rem;
  padding: 4px 14px;
  background: var(--sun);
  color:#fff;
  letter-spacing:.06em;
  width:max-content;
}
.area__pin--sub{ background: transparent; border:1px solid #ECE3CF; color:#ECE3CF; }
.area__sub{
  font-size:.8rem;
  color: rgba(236,227,207,.7);
  letter-spacing:.1em;
}
.area__item dd{
  font-size: 1rem;
  color: #ECE3CF;
  line-height:2;
}
.area__item dd b{ color:#fff; font-weight:700; }
@media (max-width: 760px){
  .area__item{ grid-template-columns: 1fr; gap:.8rem; }
}

/* ---------- About ---------- */
.about__inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items:center;
}
.about__text p{
  margin-top: 1.1rem;
  color: var(--ink-soft);
  line-height:2.05;
}
.about__text p b{ color: var(--ink); font-weight:700; }

.about__visual-frame{
  position: relative;
  aspect-ratio: 4/5;
  background:
    repeating-linear-gradient(45deg, var(--bg-soft) 0 12px, var(--bg) 12px 24px);
  border:1px solid var(--line);
  overflow:hidden;
}
.about__visual-frame img{
  width:100%; height:100%; object-fit:cover;
}
.about__visual-frame--empty::after{
  content:"images/about-camera.jpg";
  font-family: var(--font-en-serif);
  font-size:.9rem;
  color: var(--ink-mute);
  position:absolute; inset:auto 0 1rem 0;
  text-align:center;
}
.about__visual-frame::before{
  content:"";
  position:absolute; top:10px; left:10px; right:10px; bottom:10px;
  border: 1px solid rgba(255,255,255,.45);
  pointer-events:none;
  z-index:2;
}
@media (max-width: 860px){
  .about__inner{ grid-template-columns:1fr; }
  .about__visual-frame{ max-width: 360px; margin: 0 auto; }
}

/* ---------- Contact ---------- */
.contact{
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
}
.contact__cta{
  display:flex; justify-content:center;
  margin: 0 auto 3rem;
}
.contact__tel{
  display:inline-flex; flex-direction:column; align-items:center;
  padding: 1.8rem 3rem;
  background:#fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--sun);
  text-align:center;
  transition: transform .25s ease, box-shadow .25s ease;
  min-width: 340px;
}
.contact__tel:hover{
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -20px rgba(31,27,22,.25);
}
.contact__tel-label{
  font-size:.78rem;
  letter-spacing:.24em;
  color: var(--ink-mute);
}
.contact__tel-num{
  font-family: var(--font-en-serif);
  font-size: clamp(2.2rem, 6vw, 3.3rem);
  color: var(--sun-deep);
  line-height:1.1;
  margin: .4rem 0 .5rem;
  letter-spacing:.02em;
}
.contact__tel-hours{
  font-size:.85rem;
  color: var(--ink-soft);
}

.contact__form-heading{
  max-width: 680px;
  margin: 0 auto .6rem;
  font-family: var(--font-jp-serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  padding-bottom: .8rem;
  position: relative;
}
.contact__form-heading::after{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  width: 36px; height:2px;
  background: var(--sun);
  transform: translateX(-50%);
}
.contact__form-sub{
  max-width: 680px;
  margin: 0 auto 1.6rem;
  text-align: center;
  font-size: .92rem;
  color: var(--ink-soft);
}
.contact__form-sub a{
  color: var(--sun-deep);
  border-bottom: 1px solid var(--sun-soft);
}
.contact__form-sub a:hover{
  color: var(--sun);
  border-bottom-color: var(--sun);
}

.contact__form{
  max-width: 680px;
  margin: 0 auto;
  background: #fff;
  padding: clamp(1.5rem, 4vw, 2.8rem);
  border:1px solid var(--line);
}
.form-row{ margin-bottom: 1.3rem; }
.form-row label{
  display:block;
  font-size:.88rem;
  color: var(--ink);
  margin-bottom:.45rem;
  font-weight:500;
  letter-spacing:.06em;
}
.req{
  display:inline-block;
  margin-left:.4rem;
  font-size:.68rem;
  padding: 1px 7px;
  background: var(--sun);
  color:#fff;
  border-radius:2px;
  font-weight:700;
  letter-spacing:.1em;
}
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing: border-box;
  padding: .85rem 1rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color .2s ease, background .2s ease;
}
.form-row textarea{
  display: block;
  resize: vertical;
  min-height: 130px;
  font-family: var(--font-jp-sans);
  line-height: 1.7;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline:none;
  border-color: var(--sun);
  background:#fff;
}
.form-row--2col{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
@media (max-width: 560px){
  .form-row--2col{ grid-template-columns:1fr; }
}

/* 送信ボタンは入力欄より控えめな幅で中央寄せ */
.contact__form .btn--block{
  width: auto;
  display: block;
  margin: 1.8rem auto .4rem;
  min-width: 220px;
  max-width: 320px;
  padding-left: 2rem;
  padding-right: 2rem;
}
@media (max-width: 560px){
  .contact__form .btn--block{
    width: 100%;
    max-width: none;
  }
}
.form-note{
  margin-top: 1rem;
  font-size:.78rem;
  color: var(--ink-mute);
  text-align:center;
}

/* ---------- Company ---------- */
.company{ background: var(--bg); }
.company__list{
  max-width: 760px;
  margin: 0 auto;
}
.company__list > div{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.company__list dt{
  font-family: var(--font-jp-serif);
  font-weight:700;
  color: var(--sun-deep);
  letter-spacing:.06em;
}
.company__list dd{ color: var(--ink-soft); }
@media (max-width: 600px){
  .company__list > div{ grid-template-columns: 1fr; gap:.2rem; }
}

/* ---------- Footer ---------- */
.site-footer{
  background: var(--bg-dark);
  color: #ECE3CF;
  padding: 3rem 0 2.5rem;
}
.site-footer__inner{ text-align:center; }
.site-footer__brand{
  font-family: var(--font-jp-serif);
  font-size: 1.05rem;
  letter-spacing:.06em;
  margin-bottom:.5rem;
}
.site-footer__license{
  font-size:.85rem;
  color: rgba(236,227,207,.75);
  letter-spacing:.1em;
  margin-bottom: 1.4rem;
}
.site-footer__copy{
  font-family: var(--font-en-serif);
  font-size:.78rem;
  color: rgba(236,227,207,.55);
  letter-spacing:.15em;
}

/* ---------- Reveal animations ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero__title > span,
  .hero__lead,
  .hero__cta,
  .eyebrow{
    opacity:0;
    transform: translateY(14px);
    animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .eyebrow{ animation-delay:.05s; }
  .hero__title > span:nth-child(1){ animation-delay:.18s; }
  .hero__title > span:nth-child(2){ animation-delay:.32s; }
  .hero__lead{ animation-delay:.55s; }
  .hero__cta{ animation-delay:.75s; }
}
@keyframes rise{
  to{ opacity:1; transform:none; }
}