* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #fffef2; color: #252525;
  font-family: -apple-system, "Helvetica Neue", "Hiragino Sans", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .02em;
}
a { color: inherit; }

#draft {
  background: #252525; color: #fffef2; text-align: center;
  font-size: 12px; letter-spacing: .1em; padding: 12px 16px; line-height: 1.7;
}

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 22px; border-bottom: 1px solid #dcd8c8;
}
.logo {
  font-family: "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 27px; letter-spacing: .04em; color: #252525;
  text-decoration: none;
}
.logo span { font-size: 12px; letter-spacing: .28em; margin-left: 9px; vertical-align: 3px; }
#langs { display: flex; gap: 15px; }
#langs button {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 13px; letter-spacing: .08em; color: #8f8b7c; padding: 3px 0;
  border-bottom: 1px solid transparent;
}
#langs button.active { color: #252525; border-bottom-color: #252525; }

main { max-width: 1060px; margin: 0 auto; padding: 0 22px 100px; }

.crumb { padding: 22px 0 0; }
.crumb a { font-size: 13px; letter-spacing: .06em; color: #8f8b7c; text-decoration: none; }
.crumb a:hover { color: #252525; text-decoration: underline; }

#hero { padding: 64px 0 52px; border-bottom: 1px solid #dcd8c8; }
#hero .eyebrow, .pagehead .eyebrow {
  font-size: 12px; letter-spacing: .22em; color: #9d6b3f; text-transform: uppercase;
}
#hero h1, .pagehead h1 {
  margin-top: 18px; font-size: 30px; font-weight: 400;
  letter-spacing: .03em; color: #252525; line-height: 1.5;
}
#hero p, .pagehead p { margin-top: 20px; font-size: 15px; line-height: 2.1; color: #5c584b; max-width: 580px; }

.pagehead { padding: 46px 0 44px; border-bottom: 1px solid #dcd8c8; }
.pagehead h1 { font-size: 26px; }

#grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 780px) {
  #grid { grid-template-columns: repeat(3, 1fr); gap: 44px; }
  #grid .item { border-bottom: none; padding: 56px 0 0; }
}

.item { padding: 52px 0; border-bottom: 1px solid #dcd8c8; }
.item:last-child { border-bottom: none; }
.photo {
  position: relative; aspect-ratio: 4 / 5; background: #e9e3d3;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo .ph {
  font-size: 10px; letter-spacing: .3em; color: #b0aa95; text-transform: uppercase;
  text-align: center; line-height: 2;
}
.item .eyebrow {
  margin-top: 26px; font-size: 11px; letter-spacing: .2em;
  color: #9d6b3f; text-transform: uppercase;
}
.item h2 {
  margin-top: 12px; font-size: 20px; font-weight: 400;
  letter-spacing: .03em; color: #252525; line-height: 1.6;
}
.item p { margin-top: 14px; font-size: 14px; line-height: 2; color: #5c584b; }
.item .note { margin-top: 12px; font-size: 12px; line-height: 1.9; color: #96917f; }
.cta {
  display: block; margin-top: 26px; text-align: center; text-decoration: none;
  font-size: 14px; letter-spacing: .08em; padding: 17px 12px;
  background: #252525; color: #fffef2;
  transition: background .2s;
}
.cta:hover { background: #000; }
.cta.soon {
  background: transparent; color: #96917f; border: 1px solid #c9c4b2; pointer-events: none;
}

#plist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 18px; padding-top: 44px; }
@media (min-width: 780px) { #plist { grid-template-columns: repeat(3, 1fr); gap: 56px 32px; } }
.p h3 {
  margin-top: 16px; font-size: 15px; font-weight: 400;
  letter-spacing: .03em; color: #252525; line-height: 1.7;
}
.p .price { margin-top: 8px; font-size: 14px; color: #252525; }
.p .jpy { margin-top: 3px; font-size: 11px; color: #96917f; }
.p .formats { margin-top: 8px; font-size: 11.5px; letter-spacing: .06em; color: #96917f; line-height: 1.8; }
.p .cta { margin-top: 16px; font-size: 13px; padding: 13px 8px; }

#making, #license, #contact { margin-top: 64px; padding-top: 42px; border-top: 1px solid #dcd8c8; }
#making .eyebrow, #license .eyebrow, #contact .eyebrow { font-size: 12px; letter-spacing: .22em; color: #9d6b3f; text-transform: uppercase; }
#making h2, #license h2, #contact h2 { margin-top: 16px; font-size: 21px; font-weight: 400; letter-spacing: .03em; color: #252525; }
#msteps { margin-top: 26px; list-style: none; max-width: 640px; counter-reset: step; }
#msteps li {
  counter-increment: step; display: flex; gap: 20px;
  padding: 17px 0; border-bottom: 1px solid #ece8d8;
}
#msteps li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 12px; letter-spacing: .1em; color: #9d6b3f; padding-top: 3px;
}
#msteps .k { font-size: 14px; color: #252525; line-height: 1.8; }
#msteps .v { margin-top: 3px; font-size: 13px; color: #5c584b; letter-spacing: .05em; }
#makingNote { margin-top: 20px; font-size: 12.5px; line-height: 2; color: #96917f; max-width: 640px; }

#licLead { margin-top: 16px; font-size: 14px; line-height: 2; color: #5c584b; max-width: 640px; }
.tablewrap { margin-top: 28px; overflow-x: auto; }
#ltable { width: 100%; max-width: 760px; border-collapse: collapse; font-size: 14px; }
#ltable th {
  text-align: left; font-weight: 400; font-size: 11.5px; letter-spacing: .14em;
  color: #96917f; text-transform: uppercase; padding: 0 0 12px; border-bottom: 1px solid #dcd8c8;
}
#ltable td { padding: 15px 0; border-bottom: 1px solid #ece8d8; color: #252525; line-height: 1.8; vertical-align: middle; }
#ltable th:last-child, #ltable td:last-child {
  text-align: center; white-space: nowrap; padding-left: 18px; width: 84px;
}
#ltable td.mark.ok { font-size: 16px; color: #252525; }
#ltable td.mark.ng { font-size: 16px; color: #9d6b3f; }

#schoolBox { margin-top: 32px; max-width: 760px; border: 1px solid #b04a38; padding: 22px 24px; }
#schoolBox .sb-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
#sbTitle { font-size: 14.5px; color: #252525; line-height: 1.8; }
#sbMark {
  font-size: 12px; letter-spacing: .1em; color: #b04a38;
  border: 1px solid #b04a38; padding: 5px 12px; white-space: nowrap;
}
#sbText { margin-top: 14px; font-size: 13.5px; line-height: 2; color: #5c584b; }

#ctText { margin-top: 16px; font-size: 14px; line-height: 2; color: #5c584b; max-width: 640px; }
#ctLink {
  display: inline-block; margin-top: 22px; font-size: 13px; letter-spacing: .06em;
  color: #252525; border: 1px solid #252525; padding: 14px 26px; text-decoration: none;
  transition: background .2s, color .2s;
}
#ctLink:hover { background: #252525; color: #fffef2; }

.pnote {
  margin-top: 56px; padding-top: 30px; border-top: 1px solid #dcd8c8;
  font-size: 12.5px; line-height: 2; color: #96917f; max-width: 640px;
}

footer {
  border-top: 1px solid #dcd8c8; padding: 40px 22px 70px; text-align: center;
}
footer a { font-size: 14px; letter-spacing: .06em; color: #8f8b7c; text-decoration: none; }
footer a:hover { color: #252525; text-decoration: underline; }