@charset "utf-8";
/* CSS Document */

    :root{
      --bg:#fff; --card:#fff; --text:#222; --muted:#666; --line:#e6e6e8;
      --accent:#c00;
    }

    *{
      box-sizing: border-box; /*全ての要素に同じ計算式*/
      font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
    }

    body {
      margin:0;
      background:var(--bg); color:var(--text);
    }

    .wrap {
      max-width:1080px;
      margin:40px auto;
      padding:0 16px;
    }
	  
    .product {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 32px;
      background: var(--card);
      padding: 24px;
    }

    .gallery-main {
      aspect-ratio: 1/1;
      width: 100%;
      object-fit: cover;
      background: #fafafa;
    }

/* 機能 icon area */
    .thumbs {
      display: grid;
      grid-template-columns: repeat(4,minmax(0,1fr));
      gap: 10px;
      margin-top: 20px;
    }

    .thumbs img {
      display:block;
      width:100%;
      aspect-ratio:1/1;
      object-fit:cover;
      border-radius:6px;
    }

/* icon caption area */
    .thumbs figure {
      margin:0;
    }

    .thumbs figcaption {
      margin-top: 2px;
      font-size: 10px;
      line-height: 1.4;
      color: #222;
      text-align: center;
    }

    .c-title--main {
      font-size: 38px;
      margin: 4px 0 12px;
      line-height: 1.35;
      font-weight: 900;
    }

    #main_column .c-title--feature,
    #main_column .c-title--function {
      font-size: 24px;
      margin: 4px 0 12px;
      line-height: 1.35;
      font-weight: 700;
      padding: 0;
      border-bottom: none;
    }

    .c-desc {
      font-size: 14px;
      line-height: 1.8;
      color: #333;
      margin-bottom: 26px;
    }

    .c-desc--regular {
      font-weight: 400;
    }

    .c-desc--bold {
      font-weight: 500;
    }

/* 仕切り線 divider area */
    .c-divider {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 24px 0 0;
    }

    .c-divider__label {
      color: #222;
      margin-bottom: 0;
      flex: none;
    }

    .c-divider__line {
      flex: 1 1 0;
      min-width: 0;
      height: 1px;
      background: var(--line);
    }

/* 機能 function area */
    .c-gallery-function {
      aspect-ratio: 1/1;
      width: 100%;
      object-fit: cover;
      background: #fafafa;
    }

/* 機能 function area 画像2枚並び */
    .c-function-grid {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
        margin-top: 16px;
    }

/* 商品ライン series area */
	.c-series {
      background: var(--card);
      border-radius: 14px;
      padding: 24px;
      text-align: center;
      margin: 32px 0;
    }

.c-title--series {
  font-size: 12px;
  font-weight: 400;
  margin: 0;
  line-height: 1.6;
  color: #555;
  letter-spacing: 1px;
}

#main_column .c-title--serisemain {
  font-size: 36px;
  margin: 0;
  line-height: 1.35;
  color: #222;
  padding: 0;
  border-bottom: none;
}

/* 商品ラインナップ lineup area */
    .c-lineup {
      background: var(--card);
      padding: 24px;
      margin: 32px 0;
    }

    .c-lineup__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
      margin-top: 16px;
    }

    .c-card {
      border-radius: 12px;
      padding: 16px;
    }

    .c-card__media {
      position: relative;
      background: #fafafa;
      overflow: hidden;
    }

    .c-card__badge-back {
      position: absolute;
      top: 8px;
      left: 8px;
      font-size: 10px;
      color: #555;
    }

    .c-card__img {
      display: block;
      width: 100%;
      aspect-ratio: 1/1;
      object-fit: cover;
    }

    .c-card__color {
      font-size: 12px;
      color: #222;
      margin: 10px 0 4px;
    }

    .c-card__new {
      display: inline-block;
      background: var(--accent);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 3px;
    }

    .c-card__new small {
      font-weight: 400;
      font-size: 9px;
    }

    .c-card__code {
      font-size: 18px;
      font-weight: 900;
      margin: 8px 0 4px;
    }

    .c-card__head {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin: 8px 0 4px;
    }

    .c-card__head .c-card__code {
      margin: 0;
    }

    .c-card__sizes {
      display: flex;
      gap: 4px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .c-card__sizes li {
      border: 1px solid #222;
      border-radius: 3px;
      font-size: 10px;
      line-height: 1;
      padding: 3px 5px;
      color: #222;
    }

    .c-card__name {
      font-size: 13px;
      line-height: 1.5;
      margin: 0 0 10px;
    }

    .c-card__spec {
      margin: 0 0 10px;
      font-size: 11px;
      color: #555;
    }

    .c-card__spec div {
      display: flex;
      gap: 6px;
      margin-bottom: 2px;
    }

    .c-card__spec dt {
      flex: none;
      width: 5em;
    }

    .c-card__spec dt:not(:empty)::before { content: "［"; }
    .c-card__spec dt:not(:empty)::after { content: "］"; }

    .c-card__spec dd {
      margin: 0;
    }

    .c-card__price {
      font-size: 13px;
      font-weight: 700;
      margin: 0;
    }
	  
/* ブランド紹介 brand area */
    .c-brand {
  background: #f5f5f7;
    }

    .c-brand__logo {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .c-brand__line {
      flex: 1 1 0;
      height: 2px;
      background: #111;
    }

    #main_column .c-brand__title {
      font-size: 24px;
      font-weight: 900;
      letter-spacing: 1px;
      margin: 0;
      white-space: nowrap;
      border-bottom: none;
    }

    .c-brand__sub {
      text-align: center;
      font-size: 9px;
      letter-spacing: 1px;
      color: #555;
      margin: 4px 0 16px;
    }

    .c-brand__hero {
      display: block;
      width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
    }

    .c-brand__catch {
      font-size: 18px;
      font-weight: 900;
      line-height: 1.5;
      margin: 10px 0 10px;
    }

    .c-brand__desc {
      font-size: 12px;
      line-height: 1.7;
      color: #333;
      margin: 0 0 18px;
    }

.c-brand__foot {
      display: flex;
      gap: 12px;
      align-items: flex-end;
    }

    .c-brand__thumb {
      flex: none;
      width: 120px;
      height: 80px;
      object-fit: cover;
    }

    .c-brand__note {
      font-size: 11px;
      line-height: 1.6;
      color: #555;
      margin: 0;
    }

/* 表エリア tables area */
    .c-tables {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin: 32px 0;
    }

    .c-table {
      background: var(--card);
      padding: 20px;
    }

    .c-table__title {
      font-size: 16px;
      font-weight: 900;
      margin: 0 0 12px;
    }

    .c-table__title small {
      font-size: 11px;
      font-weight: 400;
      color: var(--muted);
    }

    .c-table table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
    }

    .c-table th,
    .c-table td {
      border: 1px solid var(--line);
      padding: 6px 4px;
      text-align: center;
    }

    .c-table th {
      background: #f2f2f4;
      font-weight: 700;
      white-space: nowrap;
    }

    .c-table--ability th {
      text-align: left;
    }

    .c-table--ability .lv {
      color: var(--muted);
      white-space: nowrap;
    }

    .c-table--ability td.on {
      background: #4169e1;
      color: #fff;
      font-weight: 700;
    }

    .c-table--caption {
      font-size: 9px;
    }