@charset "UTF-8";

/************************************************************************
* 光幻堂（アートギャラリー）
* 数値は PSD 保存値・カンプ実測（実寸 = カンプ@2x ÷ 2、画面幅 2046px で等倍）
************************************************************************/

/* 本文・見出しの左端はカンプで x=63〜67。共通の 30px インセットではなく 5px を使う */
.fantasia-gallery-main {
  --fantasia-sub-inset: clamp(2px, 0.244vw, 5px);
}

/* 段落の間隔はカンプ上で 1 行ぶんの空き行 */
.fantasia-gallery-main .fantasia-sub-text + .fantasia-sub-text {
  margin-top: 1.74em;
}

/* 見出し（50px）は本文まで 24px。共通値（42px）を上書き */
.fantasia-gallery-main .fantasia-sub-heading + .fantasia-sub-text {
  margin-top: clamp(11px, 1.173vw, 24px);
}

.fantasia-gallery-main .fantasia-sub-block {
  position: relative;
}

/*------------------------------------------------------------------
見出し（花・クリエイターのアイコン付き）
--------------------------------------------------------------------*/

/* アイコンはテキストの左外に置くので、見出しの字下げぶんを padding で確保する
   （x=138 − 本文左端 64 = 74 ＝ 見出し 50px の 1.48em） */
.fantasia-gallery-heading {
  position: relative;
  padding-left: 1.48em;
  font-weight: 600;
}

.fantasia-gallery-heading__icon {
  position: absolute;
  left: 0.05em;
  height: auto;
}

/*------------------------------------------------------------------
ヒーロー
--------------------------------------------------------------------*/

/* コンテンツ開始（y=248）から見出し・MV とも 17px 下がる。
   h1 の margin だとブロック外へ相殺され MV の基準がずれるので padding で持つ */
.fantasia-gallery-hero .fantasia-sub-block {
  padding-top: clamp(8px, 0.831vw, 17px);
}

/* 「光幻堂」の字送りの起点は本文左端より 58px 内側（カンプの字面 x=127） */
.fantasia-gallery-hero__title {
  margin: 0;
  padding-left: clamp(26px, 2.835vw, 58px);
  font-size: clamp(64px, 6.842vw, 140px);
  font-weight: 600;
  line-height: 1;
}

.fantasia-gallery-hero__en {
  display: block;
  margin-left: 4.62em;
  font-size: var(--fantasia-sub-fz-heading);
  letter-spacing: 0.03em;
}

.fantasia-gallery-hero__ja {
  display: block;
  margin-top: clamp(12px, 1.32vw, 27px);
  color: var(--fantasia-sub-purple);
  letter-spacing: 0.2em;
  white-space: nowrap;
}

/* 読み仮名は「光幻堂」の字送りの直後に続き、ベースラインは下寄せ */
.fantasia-gallery-hero__yomi {
  position: relative;
  top: 2.17em;
  display: inline-block;
  color: var(--fantasia-ink);
  font-size: clamp(15px, 1.564vw, 32px);
  letter-spacing: 0.25em;
  vertical-align: top;
}

.fantasia-gallery-hero__lead {
  max-width: 46.2%;
  margin: clamp(18px, 1.955vw, 40px) 0 0;
  font-size: var(--fantasia-sub-fz-subheading);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.67;
}

.fantasia-gallery-hero__address {
  position: relative;
  margin: clamp(11px, 1.173vw, 24px) 0 0;
  padding-left: 1.771em;
  color: var(--fantasia-sub-purple);
  font-size: clamp(17px, 1.711vw, 35px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.43;
}

.fantasia-gallery-hero__pin {
  position: absolute;
  top: -0.877em;
  left: 0;
  width: 1.229em;
  height: auto;
}

.fantasia-gallery-hero__note {
  max-width: 46.2%;
  margin-top: clamp(8px, 0.88vw, 18px);
  font-weight: 600;
}

.fantasia-gallery-hero__figure {
  position: absolute;
  top: clamp(8px, 0.831vw, 17px);
  right: 0;
  width: 50%;
  margin: 0;
}

.fantasia-gallery-hero__figure img {
  width: 100%;
  height: auto;
}

/* 2026-10 完全版カンプ：写真は画面の右端まで伸び、左の 2 角が丸い（半径 32）。
   カンプ x=963〜2046 / 幅 1083（画面の 52.93%）/ 縦横比 1524:878。
   100vw はスクロールバーを含むため、はみ出しはセクションで切る */
.fantasia-gallery-hero {
  overflow-x: clip;
}

.fantasia-gallery-hero__figure {
  right: calc((100% - 100vw) / 2);
  width: 52.93vw;
  aspect-ratio: 1524 / 878;
  overflow: hidden;
  border-radius: clamp(14px, 1.564vw, 32px) 0 0 clamp(14px, 1.564vw, 32px);
}

.fantasia-gallery-hero__figure picture,
.fantasia-gallery-hero__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fantasia-gallery-hero .fantasia-sub-block--ruled {
  padding-bottom: clamp(33px, 3.666vw, 75px);
}

/*------------------------------------------------------------------
デジタルサイネージギャラリー
--------------------------------------------------------------------*/

.fantasia-gallery-signage {
  margin-top: clamp(27px, 2.933vw, 60px);
}

.fantasia-gallery-signage .fantasia-gallery-heading__icon {
  top: 0.34em;
  width: 0.94em;
}

.fantasia-gallery-signage .fantasia-sub-text {
  max-width: 58.7%;
  font-weight: 600;
}

.fantasia-gallery-signage .fantasia-sub-block--ruled {
  padding-bottom: clamp(44px, 4.888vw, 100px);
}

.fantasia-gallery-signage__figure {
  position: absolute;
  top: clamp(47px, 5.034vw, 103px);
  right: 1.815%;
  width: 35.53%;
  margin: 0;
}

.fantasia-gallery-signage__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(14px, 1.564vw, 32px);
}

/*------------------------------------------------------------------
アーティスト・クリエイターの皆さまへ
--------------------------------------------------------------------*/

.fantasia-gallery-creator {
  margin-top: clamp(27px, 2.933vw, 60px);
}

.fantasia-gallery-creator .fantasia-gallery-heading__icon {
  top: 0.14em;
  width: 0.9em;
}

.fantasia-gallery-creator .fantasia-sub-text {
  max-width: 62.9%;
  font-weight: 600;
}

/* 2026-10：カンプでは下に罫線が入る（本文の字面下端 → 罫線 109） */
.fantasia-gallery-creator .fantasia-sub-block--ruled {
  padding-bottom: clamp(44px, 4.888vw, 100px);
}

.fantasia-gallery-creator__figure {
  position: absolute;
  top: clamp(48px, 5.132vw, 105px);
  right: 1.867%;
  width: 30.71%;
  margin: 0;
}

.fantasia-gallery-creator__figure img {
  width: 100%;
  height: auto;
}

/*------------------------------------------------------------------
利用案内（料金・展示できる作品・お断り / 2F 販売・盗難 / 会員特典 / DISPLAY & SELL）
2026-10 完全版カンプ（KF_official_Gallery_260915）。値はカンプ@2x × 0.7104（2046px で等倍）
--------------------------------------------------------------------*/

.fantasia-gallery-guide {
  margin-top: clamp(30px, 3.47vw, 71px);
}

/* 区切り罫線の上（字面 → 罫線 116）・下（罫線 → 見出しの字面 111〜121） */
.fantasia-gallery-guide .fantasia-sub-block--ruled {
  padding-bottom: clamp(37px, 4.546vw, 93px);
}

.fantasia-gallery-guide .fantasia-sub-block + .fantasia-sub-block {
  margin-top: clamp(36px, 4.497vw, 92px);
}

.fantasia-gallery-guide .fantasia-sub-block + .fantasia-gallery-sell {
  margin-top: clamp(30px, 3.666vw, 75px);
}

.fantasia-gallery-guide .fantasia-sub-text {
  font-weight: 600;
}

/* 見出しアイコン（PSD 実寸。見出し 50px に対する比） */
.fantasia-gallery-heading--price .fantasia-gallery-heading__icon {
  top: 0.18em;
  width: 0.85em;
}

.fantasia-gallery-heading--works .fantasia-gallery-heading__icon,
.fantasia-gallery-heading--decline .fantasia-gallery-heading__icon {
  top: 0.17em;
  width: 0.87em;
}

.fantasia-gallery-heading--shop .fantasia-gallery-heading__icon {
  top: 0.05em;
  left: -0.1em;
  width: 1em;
}

.fantasia-gallery-heading--lock .fantasia-gallery-heading__icon {
  top: 0.12em;
  width: 0.85em;
}

.fantasia-gallery-heading--member .fantasia-gallery-heading__icon {
  top: 0.14em;
  width: 0.84em;
}

/* ブロック内 2 つ目以降の見出し（表・本文の下端 → 見出しの字面 約 130px） */
.fantasia-gallery-guide .fantasia-sub-block > * + .fantasia-sub-heading {
  margin-top: clamp(48px, 5.67vw, 116px);
}

/* 段落の間（空き行 1 行）は既存の .fantasia-sub-text + .fantasia-sub-text に任せる。
   表・リスト・強調の前後は個別に当てる */
.fantasia-gallery-guide .fantasia-sub-heading + * {
  margin-top: clamp(11px, 1.173vw, 24px);
}

/* 表（共通）：外枠 1px・角丸 19・中の罫線 1px・見出しセルは紫地に白文字 */
.fantasia-gallery-table {
  overflow: hidden;
  border: 1px solid #7f5792;
  border-radius: clamp(10px, 0.929vw, 19px);
  background: #fff;
}

.fantasia-gallery-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fantasia-sub-fz-text);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-align: center;
}

.fantasia-gallery-table th,
.fantasia-gallery-table td {
  height: clamp(40px, 2.933vw, 60px);
  padding: 0.3em 0.6em;
  border: 1px solid #a186b6;
  font-weight: inherit;
}

/* 外周の罫線は枠（.fantasia-gallery-table の border）が担う */
.fantasia-gallery-table tr > :first-child {
  border-left: none;
}

.fantasia-gallery-table tr > :last-child {
  border-right: none;
}

.fantasia-gallery-table thead tr:first-child > *,
.fantasia-gallery-table tbody:first-child tr:first-child > * {
  border-top: none;
}

.fantasia-gallery-table tbody tr:last-child > * {
  border-bottom: none;
}

.fantasia-gallery-table thead th,
.fantasia-gallery-table tbody th {
  background: #836799;
  color: #fff;
}

.fantasia-gallery-table thead th {
  height: clamp(42px, 3.06vw, 62.6px);
}

/* 料金：表 564 + 余白 101 + 本文（カンプ x=729） */
.fantasia-gallery-fee {
  display: grid;
  grid-template-columns: min(29.4%, 564px) 1fr;
  column-gap: 5.27%;
  align-items: start;
}

.fantasia-gallery-table--fee th:nth-child(1) { width: 31.6%; }
.fantasia-gallery-table--fee th:nth-child(2) { width: 39%; }

.fantasia-gallery-guide .fantasia-gallery-heading + .fantasia-gallery-fee {
  margin-top: clamp(14px, 1.515vw, 31px);
}

/* PSD のテキストボックス幅 1176.6（2046px 時）＝右の列（1253）の 93.9% */
.fantasia-gallery-fee__text {
  max-width: 93.9%;
  margin-top: 0;
}

/* キーワード・強調（40px / #763e9f） */
.fantasia-gallery-keywords,
.fantasia-gallery-emphasis {
  margin: clamp(10px, 1.026vw, 21px) 0 0;
  color: #763e9f;
  font-size: clamp(20px, 1.955vw, 40px);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.fantasia-gallery-guide .fantasia-gallery-keywords__after,
.fantasia-gallery-guide .fantasia-gallery-emphasis__after {
  margin-top: clamp(8px, 0.88vw, 18px);
}

/* 作品の種類（アイコン + 名称。カンプ：列間 80・行のピッチ 82） */
.fantasia-gallery-types {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: clamp(24px, 3.91vw, 80px);
  row-gap: clamp(12px, 1.564vw, 32px);
  margin: clamp(8px, 0.831vw, 17px) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fantasia-sub-fz-text);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.fantasia-gallery-types__item {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.173vw, 24px);
}

.fantasia-gallery-types__item img {
  display: block;
  height: auto;
}

.fantasia-gallery-types__item--digital img { width: 2.1em; }
.fantasia-gallery-types__item--hand img { width: 2.03em; }
.fantasia-gallery-types__item--photo img { width: 2.31em; }
.fantasia-gallery-types__item--shodo img { width: 2.19em; }
.fantasia-gallery-types__item--graphic img { width: 2.13em; }

.fantasia-gallery-guide .fantasia-gallery-types__after {
  margin-top: clamp(13px, 1.32vw, 27px);
}

/* 仕様表 2 つ（各 564・間 60）。ラベル列 216 */
.fantasia-gallery-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 564px));
  column-gap: clamp(20px, 2.933vw, 60px);
  row-gap: 16px;
  margin-top: clamp(20px, 2.053vw, 42px);
}

.fantasia-gallery-table--side th {
  width: 38.3%;
}

/* 箇条書き（「・」をぶら下げ） */
.fantasia-gallery-list {
  padding: 0;
  list-style: none;
}

.fantasia-gallery-list li {
  padding-left: 1.25em;
  text-indent: -1.25em;
}

.fantasia-gallery-list li::before {
  content: '・';
  display: inline-block;
  width: 1.25em;
  text-indent: 0;
}

.fantasia-gallery-caution {
  color: #c10000;
}

.fantasia-gallery-nowrap {
  white-space: nowrap;
}

/* 会員特典：①② は 40px #763e9f、その本文は 30px・行送り 60 */
.fantasia-gallery-benefit {
  margin-top: clamp(20px, 2.053vw, 42px);
}

.fantasia-gallery-benefit__title {
  margin: 0;
  color: #763e9f;
  font-size: clamp(20px, 1.955vw, 40px);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.fantasia-gallery-benefit__text + .fantasia-gallery-benefit__title {
  margin-top: clamp(12px, 1.271vw, 26px);
}

.fantasia-gallery-benefit__text {
  margin: 0;
  font-size: var(--fantasia-sub-fz-subheading);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 2;
}

/* 特典の比較表（1446。列 697 / 450 / 299） */
.fantasia-gallery-table--member {
  width: min(100%, 75.4%);
  margin-top: clamp(30px, 3.372vw, 69px);
}

.fantasia-gallery-table--member th:nth-child(1) { width: 48.2%; }
.fantasia-gallery-table--member th:nth-child(2) { width: 31.1%; }

.fantasia-gallery-guide .fantasia-gallery-member__note {
  margin-top: clamp(8px, 0.88vw, 18px);
}

/* DISPLAY & SELL（80px・ls .05em／下の 2 行は 27px Medium #763e9f・行送り 60） */
.fantasia-gallery-sell__title {
  margin: 0;
  color: var(--fantasia-sub-purple);
  font-size: clamp(36px, 3.91vw, 80px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.fantasia-gallery-sell__lead,
.fantasia-gallery-sell__text {
  margin: 0;
  color: #763e9f;
  font-size: clamp(15px, 1.32vw, 27px);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 2.22;
}

.fantasia-gallery-sell__lead {
  margin-top: clamp(8px, 0.88vw, 18px);
}

.fantasia-gallery-sell__lead span {
  display: inline-block;
  margin-right: 1.6em;
}

/*------------------------------------------------------------------
狭い画面
--------------------------------------------------------------------*/

/* ヒーローだけ先に縦積みへ。900px を下回ると読み仮名「（きょうげんどう）」が
   絶対配置の画像の下に潜り込んで欠けるため、衝突する前に落とす */
@media (max-width: 900px) {
  .fantasia-gallery-hero__title {
    padding-left: 0;
  }

  .fantasia-gallery-hero__en {
    margin-left: 0;
  }

  .fantasia-gallery-hero__ja {
    white-space: normal;
  }

  .fantasia-gallery-hero__yomi {
    top: 0;
    display: block;
  }

  .fantasia-gallery-hero__lead,
  .fantasia-gallery-hero__note {
    max-width: none;
  }

  /* 縦積みにすると幅いっぱいまで伸びて主張が強くなりすぎるので上限を持たせる
     （カンプでは画面幅の 54%。SP 幅では 100% になり上限は効かない） */
  .fantasia-gallery-hero__figure {
    position: static;
    width: min(100%, 560px);
    margin: 28px auto 0;
    border-radius: clamp(10px, 2.4vw, 20px);
  }
}

@media (max-width: 760px) {
  .fantasia-gallery-signage .fantasia-sub-text,
  .fantasia-gallery-creator .fantasia-sub-text {
    max-width: none;
  }

  .fantasia-gallery-signage__figure,
  .fantasia-gallery-creator__figure {
    position: static;
    width: auto;
    margin-top: 28px;
  }
}

/* 利用案内の狭い画面 */
@media (max-width: 1050px) {
  .fantasia-gallery-fee {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .fantasia-gallery-table--fee {
    width: min(100%, 564px);
  }

  .fantasia-gallery-fee__text {
    max-width: none;
  }

  .fantasia-gallery-table--member {
    width: 100%;
  }
}

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

  .fantasia-gallery-types {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .fantasia-gallery-table table {
    font-size: 14px;
  }

  .fantasia-gallery-table th,
  .fantasia-gallery-table td {
    padding: 0.4em 0.4em;
  }

  .fantasia-gallery-sell__lead span {
    display: block;
    margin-right: 0;
  }

  .fantasia-gallery-benefit__text {
    line-height: 1.7;
  }

  .fantasia-gallery-table--member table {
    font-size: 13px;
  }
}