:root  {
  --ink:  #292a27;
  --muted:  #6b6c65;
  --accent:  #946816;
  --line:  #e4e3db;
  --paper:  #faf9f5
}

*  {
  box-sizing:  border-box
}

html  {
  scroll-behavior:  smooth;
  scroll-padding-top:  30px
}

body  {
  margin:  0;
  background:  #fff;
  color:  var(--ink);
  font-family:  "Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:  15px;
  line-height:  1.95;
  -webkit-font-smoothing:  antialiased
}

a  {
  color:  inherit;
  text-underline-offset:  5px
}

a:  hover  {
  color:  var(--accent)
}

a:  focus-visible  {
  outline:  2px solid var(--accent);
  outline-offset:  5px
}

img  {
  max-width:  100%;
  display:  block;
  height:  auto
}

.wrap  {
  width:  min(100% - 64px,1000px);
  margin-inline:  auto
}

.site-header  {
  display:  flex;
  align-items:  center;
  justify-content:  space-between;
  gap:  24px;
  padding-block:  27px;
  border-bottom:  1px solid var(--line)
}

.wordmark  {
  font-family:  Georgia,"Times New Roman",serif;
  font-size:  29px;
  letter-spacing:  .16em;
  text-decoration:  none;
  font-weight:  400
}

.site-header nav  {
  display:  flex;
  gap:  28px;
  font-size:  12px
}

.site-header nav a  {
  text-decoration:  none
}

.eyebrow  {
  margin:  0 0 20px;
  color:  var(--accent);
  font:  500 11px/1.6 Arial,sans-serif;
  letter-spacing:  .19em
}

h1,h2,h3,p,figure  {
  margin-top:  0
}

h1  {
  font-size:  clamp(26px,3vw,37px);
  line-height:  1.7;
  letter-spacing:  .04em;
  font-weight:  500;
  margin-bottom:  14px
}

h1 span  {
  font: 74px/1.3 Georgia,"Times New Roman",serif;
  letter-spacing:  -.05em
}

h2  {
  font-size:  27px;
  font-weight:  500;
  line-height:  1.7;
  letter-spacing:  .04em;
  margin-bottom:  23px
}

h3  {
  font-size:  17px;
  font-weight:  600;
  line-height:  1.8;
  margin-bottom:  9px
}

p  {
  margin-bottom:  16px
}

.hero  {
  display:  grid;
  grid-template-columns:  1fr .95fr;
  align-items:  center;
  gap:  60px;
  padding-block:  65px 70px
}

.hero .reading  {
  font-size:  12px;
  color:  var(--muted);
  margin-bottom:  25px
}

.lead  {
  line-height:  2.1;
  margin-bottom:  30px
}

.text-link  {
  font-size:  13px;
  text-decoration:  none;
  border-bottom:  1px solid var(--accent);
  padding-bottom:  7px
}

.text-link span  {
  padding-left:  20px;
  color:  var(--accent)
}

.hero-art  {
  margin:  0;
  align-self:  center
}

.art-window {
  background: #fff;
}


.art-window img {
  display: block;
  width: 100%;
  height: auto;
}


.hero-art figcaption  {
  text-align:  center;
  margin-top:  15px;
  font:  11px Arial,sans-serif;
  color:  var(--muted);
  letter-spacing:  .12em
}

.section  {
  padding-block:  56px;
  border-top:  1px solid var(--line)
}

.intro  {
  max-width:  790px;
  margin-bottom:  35px
}

.timeline  {
  padding:  0;
  margin:  35px 0 20px;
  list-style:  none
}

.timeline li  {
  display:  grid;
  grid-template-columns:  140px 1fr;
  gap:  30px;
  padding-block:  25px;
  border-top:  1px solid var(--line)
}

.timeline-label  {
  color:  var(--accent);
  font-size:  14px;
  letter-spacing:  .03em
}

.timeline p  {
  margin-bottom:  10px
}

.source-links  {
  display:  flex;
  gap:  22px;
  flex-wrap:  wrap;
  font-size:  12px;
  padding-top:  5px
}

.small  {
  font-size:  11px;
  color:  var(--muted);
  line-height:  1.9
}

.source-note  {
  margin-top:  12px
}

.biotics  {
  display:  grid;
  grid-template-columns:  repeat(3,1fr);
  gap:  30px;
  margin-block:  35px
}

.biotics article+article  {
  border-left:  1px solid var(--line);
  padding-left:  30px
}

.number  {
  font:  italic 29px Georgia,serif;
  color:  var(--accent);
  margin-bottom:  14px
}

.biotics h3  {
  font-size:  16px
}

.biotics p  {
  font-size:  13px
}

.biotics .ingredient  {
  font-size:  11px;
  color:  var(--muted);
  margin-bottom:  16px
}

.research  {
  background:  var(--paper);
  padding:  26px 30px;
  margin-block:  32px
}

.research h3  {
  font-size:  16px
}

.research p  {
  font-size:  13px;
  margin-bottom:  9px
}

.research p.small  {
  font-size:  11px;
  margin:  0
}

.specs  {
  margin:  35px 0 16px
}

.specs>div  {
  display:  grid;
  grid-template-columns:  140px 1fr;
  gap:  30px;
  padding-block:  13px;
  border-bottom:  1px solid var(--line);
  font-size:  13px
}

.specs dt  {
  color:  var(--muted)
}

.specs dd  {
  margin:  0
}

.caution  {
  max-width:  800px
}

.gift  {
  border-top:  1px solid var(--line);
  display:  flex;
  align-items:  center;
  gap:  32px;
  padding-block:  35px 50px
}

.gift>img  {
  width:  140px;
  height:  140px;
  object-fit:  cover
}

.gift h2  {
  font-size:  20px;
  line-height:  1.6;
  margin-bottom:  10px
}

.gift p  {
  font-size:  12px;
  margin-bottom:  0
}

.gift .eyebrow  {
  font-size:  10px;
  margin-bottom:  12px
}

.site-footer  {
  border-top:  1px solid var(--line);
  padding-block:  28px 35px;
  display:  flex;
  align-items:  flex-end;
  justify-content:  space-between
}

.site-footer>div  {
  display:  flex;
  align-items:  center;
  gap:  30px
}

.site-footer p  {
  font-size:  12px;
  margin:  0
}

.site-footer .wordmark  {
  font-size:  23px
}

@media(max-width:700px)  {
  .wrap  {
    width:  calc(100% - 40px)
  }

  .site-header  {
    padding-block:  20px
  }

  .wordmark  {
    font-size:  25px
  }

  .site-header nav  {
    gap:  15px;
    font-size:  11px
  }

  .hero  {
    grid-template-columns:  1fr;
    gap:  30px;
    padding-block:  40px
  }

  .hero-art  {
    width:  min(100%,390px);
    margin-inline:  auto
  }

  .hero h1  {
    font-size:  29px
  }

  .hero h1 span  {
    font-size:  68px
  }

  .hero .lead  {
    font-size:  14px
  }

  .hero .reading  {
    margin-bottom:  20px
  }

  .hero .eyebrow  {
    margin-bottom:  15px
  }

  .section  {
    padding-block:  35px
  }

  h2  {
    font-size:  23px
  }

  .desktop-break  {
    display:  none
  }

  .intro  {
    font-size:  14px
  }

  .timeline  {
    margin-top:  25px
  }

  .timeline li  {
    grid-template-columns:  1fr;
    gap:  7px;
    padding-block:  22px
  }

  .timeline h3  {
    font-size:  16px
  }

  .timeline p  {
    font-size:  14px
  }

  .source-links  {
    gap:  12px 20px
  }

  .biotics  {
    grid-template-columns:  1fr;
    gap:  0
  }

  .biotics article  {
    padding-block:  18px;
    display:  grid;
    grid-template-columns:  40px 1fr;
    column-gap:  12px
  }

  .biotics article+article  {
    border-left:  0;
    border-top:  1px solid var(--line);
    padding-left:  0
  }

  .biotics .number  {
    grid-row:  1/4
  }

  .biotics h3  {
    margin-bottom:  3px
  }

  .biotics .ingredient  {
    margin-bottom:  7px
  }

  .biotics article p:last-child  {
    margin:  0
  }

  .research  {
    padding:  23px 20px
  }

  .specs>div  {
    grid-template-columns:  95px 1fr;
    gap:  15px
  }

  .gift  {
    gap:  20px;
    padding-block:  27px 35px
  }

  .gift>img  {
    width:  105px;
    height:  105px
  }

  .gift h2  {
    font-size:  17px
  }

  .site-footer>div  {
    display:  block
  }

  .site-footer .wordmark  {
    display:  block;
    margin-bottom:  7px
  }

}

@media(prefers-reduced-motion:reduce)  {
  html  {
    scroll-behavior:  auto
  }

}

@media print  {
  .wrap  {
    width:  100%
  }

  .site-header nav,.text-link  {
    display:  none
  }

  .hero  {
    padding-block:  25px;
    gap:  20px
  }

  .section  {
    padding-block:  20px
  }

  .timeline li  {
    break-inside:  avoid
  }

  .gift  {
    break-inside:  avoid
  }

  .research  {
    background:  #fff;
    border:  1px solid var(--line)
  }

  a  {
    color:  inherit
  }

  .hero-art  {
    max-width:  300px
  }

  .biotics  {
    break-inside:  avoid
  }

}


/* お問い合わせフォーム */
.contact-page {
  max-width: 720px;
  padding-block: 50px 70px;
}

.contact-page h1 {
  font-size: 28px;
}

.contact-form {
  margin-top: 35px;
}

.form-field {
  margin-bottom: 24px;
}

.form-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
}

.required {
  color: var(--accent);
  font-size: 11px;
  margin-left: 8px;
}

.form-field input,
.form-field textarea {
  display: block;
  width: 100%;
  border: 1px solid #bdbdb4;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  padding: 11px 12px;
  font: inherit;
  font-size: 16px;
  line-height: 1.7;
}

.form-field textarea {
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.contact-button {
  display: inline-block;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 10px 27px;
  color: #fff;
  background: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.contact-button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.contact-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.form-errors {
  border-left: 3px solid #a13422;
  padding: 12px 18px;
  background: #fdf5f2;
  margin-block: 25px;
}

.form-errors ul {
  margin: 0;
  padding-left: 20px;
}

.form-notice {
  margin-block: 30px;
  padding: 24px;
  background: var(--paper);
}

.form-notice h2 {
  font-size: 21px;
}

.form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* 必須・任意の文字サイズを統一 */
.form-field label .required,
.form-field label .small {
  font-size: 11px;
  font-weight: normal;
  margin-left: 8px;
}

/* 迷惑メール対策の欄を非表示 */
.form-trap {
  display: none;
}

/* 見出しに添える肉球 */
.heading-paw {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.35em;
  vertical-align: -0.05em;
}