/*
  俥屋ななじん
  色は決めない。背景と文字の色は、閲覧する人のOSの明暗設定にブラウザが合わせる。
  12列のグリッドに、写真と文字を非対称に置く。置き場所はHTML側の --col / --row / --mt。
*/

/* ---------- 書体（fonts フォルダに自前で置く。ページで使う文字だけに絞ってある） ---------- */

@font-face {
  font-family: "Shippori Mincho";
  src: url("fonts/ShipporiMincho-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho";
  src: url("fonts/ShipporiMincho-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("fonts/Jost.woff2") format("woff2");
  font-weight: 200 300;
  font-display: swap;
}

/* ---------- 基本 ---------- */

:root {
  color-scheme: light dark;
  --bg: Canvas;       /* ブラウザの地の色（明るい設定なら白、暗い設定なら黒） */
  --fg: CanvasText;   /* その上の文字色 */
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Jost", "Futura", sans-serif;
  --dim: .62;         /* 添え書きの薄さ */
  --rule: 1px solid currentColor;
}
/* 明暗を手動で切り替える仕組みがある環境（プレビューなど）向け。普段は使われない */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mincho);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, hgroup {
  margin: 0;
}
img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .4em;
}
a:hover {
  opacity: .6;
}
a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}
[lang="en"] {
  font-family: var(--sans);
  font-weight: 300;
}
.sub {
  opacity: var(--dim);
}
.jp {
  word-break: auto-phrase;
  text-wrap: pretty;
  line-break: strict;
}

/* ---------- グリッド ---------- */

.g {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 280px 80px 0;
  box-sizing: border-box;
}
.g > * {
  grid-column: var(--col, 1 / -1);
  grid-row: var(--row, auto);
  margin-top: var(--mt, 0);
  min-width: 0;
}
header.g {
  padding-top: 140px;
}
footer.g {
  padding-top: 320px;
  padding-bottom: 64px;
}
figure {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- 各セクション共通の見出し ---------- */

.label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.label h2 {
  font-size: 15px;
  letter-spacing: .06em;
}
.label p {
  font-size: 11.5px;
  letter-spacing: .24em;
  opacity: var(--dim);
}
.lead {
  align-self: end;
  max-width: 24em;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .08em;
}

/* ---------- First View ---------- */

.title {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-right: -24px;
  padding-bottom: 28px;
  border-bottom: var(--rule);
}
.name {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
h1 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .4em;
}
.name p {
  font-size: 12px;
  font-weight: 200;
  letter-spacing: .14em;
  opacity: var(--dim);
}
.statement {
  font-size: 14px;
  letter-spacing: .24em;
}

/* ---------- Philosophy ---------- */

.vertical {
  justify-self: end;
  writing-mode: vertical-rl;
  height: 16em;          /* 縦書き1行の長さ。長い文にしたら、ここを伸ばす */
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: .14em;
}
.vertical p + p {
  margin-block-start: 2.6em;
}
.translation {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 24px;
  font-size: 12.5px;
  font-weight: 200;
  line-height: 1.9;
  letter-spacing: .03em;
  opacity: var(--dim);
}

/* ---------- Town ---------- */

.place {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 12px;
  letter-spacing: .14em;
}
.town-text {
  align-self: start;
  font-size: 14px;
  line-height: 2.2;
  letter-spacing: .1em;
}
.tour {                /* 谷根千観光人力車（三風）への案内。上野の写真の右下に */
  justify-self: end;
  font-size: 12px;
  line-height: 2;
  letter-spacing: .1em;
}

/* ---------- Application ---------- */

.use {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 24px;
  border-bottom: var(--rule);
}
.use.right {           /* 写真の右に置く。罫線を写真の際まで延ばす */
  margin-left: -24px;
  padding-left: 24px;
}
.use.left {            /* 写真の左に置く */
  margin-right: -24px;
  padding-right: 24px;
}
.use h3 {
  font-size: 15px;
  letter-spacing: .05em;
}
.use .sub {
  font-size: 11.5px;
  letter-spacing: .24em;
}
.use .jp {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 2;
  letter-spacing: .06em;
}

/* ---------- Specification ---------- */

.inquiry {
  font-size: 13px;
  line-height: 2.1;
  letter-spacing: .1em;
}
.key {
  margin-right: 1.4em;
}
.inquiry [lang="en"] {
  letter-spacing: .05em;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
tr {
  border-top: var(--rule);
}
tr:last-child {
  border-bottom: var(--rule);
}
th,
td {
  padding: 14px 0;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.spec th {
  width: 34%;
  opacity: var(--dim);
}
.spec th,
.spec td {
  padding: 16px 0;
}

/* ---------- Footer ---------- */

.seal {
  align-self: end;
}
.seal svg {
  display: block;
  width: 48px;
  height: 48px;
}
.seal circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;   /* 円の線は、どの大きさでも罫線と同じ1px */
}
.seal path {
  fill: currentColor;
  fill-rule: evenodd;
}
.colophon {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 2;
  letter-spacing: .1em;
}
.social {
  align-self: end;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.social a {
  font-size: 12px;
  letter-spacing: .06em;
}
.copyright {
  font-size: 11px;
  font-weight: 200;
  letter-spacing: .08em;
  opacity: var(--dim);
}
.vydro {
  justify-self: end;
  text-align: right;
  font-size: 10px;
  letter-spacing: .24em;
  opacity: var(--dim);
}

/* ---------- スマホ幅：1列に縦に並べる ---------- */

@media (max-width: 760px) {
  .g,
  header.g,
  footer.g {
    padding-top: 120px;
    padding-inline: 24px;
    column-gap: 16px;
    row-gap: 24px;
  }
  .g > * {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: min(var(--mt, 0px), 48px);   /* 上の余白は最大48pxまで */
    margin-inline: 0;
    justify-self: stretch;
  }
  .use.right,
  .use.left,
  .translation {
    margin-inline: 0;
    padding-inline: 0;
  }
  .vertical,
  .social {
    justify-self: end;
  }
}