@charset "utf-8";
/* つくろうデザイン 自前調整CSS（BiNDup離脱後の変更はこのファイルに追記する） */

/* 2026-10-02 冒頭ブロック（#bk8591 縦書き）：文字を大きく、幅1300px以下では本文を2段組に。
   天地の余白は上75px／下100px（元は上5%+30px／下75px）。下は幅に連動させず固定 */
@media only screen and (min-width: 642px) {
  #bk8591 > div { padding-top: 0; padding-bottom: 0; } /* 中身が回り込み要素だけなので下パディングは効かない。下の余白は margin-bottom で付ける */
  .-dress_b15004Tategaki .c-title { font-size: 2.2em; letter-spacing: 0.12em; line-height: 1.84; /* 3行で本文4行分（22.4px×1.9×4≒170px）の幅 */ height: 660px; /* 字間0.12emで3行目（18字）が621pxになり620pxでは折り返したため */ margin-top: 75px; margin-bottom: 100px; }
  .-dress_b15004Tategaki .c-body { font-size: 1.6em; line-height: 1.9; height: 620px; margin-top: 75px; margin-bottom: 100px; }
}
@media only screen and (min-width: 642px) and (max-width: 1300px) {
  .-dress_b15004Tategaki .c-body { height: 1180px; column-count: 2; column-gap: 3em; }
}

/* 2026-10-02 冒頭ブロック本文の書体：Noto Sans JP Light（Google Fonts。200は細すぎたため300に）。従来は無指定で端末の標準ゴシック表示だった */
.-dress_b15004Tategaki .c-body { font-family: 'Noto Sans JP', sans-serif; font-weight: 300; }
.-dress_b15004Tategaki .c-body .d-underline { text-decoration-thickness: 1px; text-underline-offset: 0.1em; } /* 2026-10-02 PCの傍線（縦書きの下線）を細く。スマホ側の指定と同じ */

/* 2026-10-02 冒頭ブロック見出しの書体：しっぽり明朝 Medium（Google Fonts）。従来の指定「FOT-UD明朝 Pro L」はBiNDup専用で読み込まれず、端末の標準明朝で表示されていた。欧文はEB Garamondのまま */
.-dress_b15004Tategaki .c-title { font-family: "EB Garamond", "Shippori Mincho", serif; font-weight: 500; }

/* 2026-10-02 スマホ（641px以下）の冒頭見出し：従来19.6px・折り返し禁止で幅390pxでは1行目が切れていた。22.4pxにし、スマホだけ5行に組む（sp-brの改行はPCでは非表示） */
.sp-br { display: none; }
@media only screen and (max-width: 641px) {
  .sp-br { display: inline; }
  .pc-br { display: none; } /* スマホでは最初の3行分を改行なしで流し、幅に合わせて自然に折り返す */
  .-dress_b15004Tategaki .c-title { white-space: normal; }
  .-dress_b15004Tategaki .c-body .d-underline { text-underline-offset: 0.18em; text-decoration-thickness: 1px; } /* 下線を文字から少し離す（0.3emは離しすぎだった） */
  .-dress_b15004Tategaki .c-body { text-align: justify; text-justify: inter-character; } /* 右端を揃える（字ごとの折り返しで右端が凸凹し、余白が不揃いに見えていた） */
  .-dress_b15004Tategaki .c-title { font-size: 1.95em; line-height: 1.6; } /* 27.3px */
  .-dress_b15004Tategaki .c-body { font-weight: 300; font-size: 1.4em; line-height: 1.9; } /* 19.6px。ウエイトはPCと同じ300（文字を大きくしたため400から戻した） */ /* スマホは小さい文字で線が痩せるため、PCの300より一段太く */
  /* 左右の余白を均一に26px（左の余白に右を揃えた。従来は左40px／右20px。本文・見出し側の内側余白をなくし、ブロックの余白だけで揃える） */
  #bk8591 > div { padding-left: 26px; padding-right: 26px; }
  .-dress_b15004Tategaki .c-body { padding-left: 0; padding-right: 0; }
  .-dress_b15004Tategaki .c-title { padding-left: 0; padding-right: 0; }
}

/* 2026-10-02 BRANDING〜HANKO の5エリア（-dress_b15004TategakiRightBlock）：書体を冒頭ブロックと同じ組み合わせに。
   見出し（日本語）＝しっぽり明朝 Medium、本文＝Noto Sans JP Light。英字の大見出し（BRANDING等）はEB Garamondのまま、日本語（組版）だけしっぽり明朝で補う。
   従来は見出し＝源ノ明朝 Bold、本文＝源ノ角ゴシック Light（いずれもBiNDup配信） */
.-dress_b15004TategakiRightBlock { font-family: 'Noto Sans JP', sans-serif; font-weight: 300; }
.-dress_b15004TategakiRightBlock .c-body { font-family: 'Noto Sans JP', sans-serif; font-weight: 300; font-size: 20.3px; text-align: justify; text-justify: inter-character; padding-left: 42px; padding-bottom: 36px; } /* 冒頭本文22.4pxより一回り小さく（従来16.4px）。均等割り付け（縦書きなので行末＝下端が揃う）。左余白は従来30pxから42pxへ（右は30pxのまま）。下余白は30px→36px（上は30px） */
.-dress_b15004TategakiRightBlock .c-large_headline { font-family: "Shippori Mincho", serif; font-weight: 500; font-size: 28.7px; padding-left: 26px; padding-right: 28px; } /* 冒頭見出し30.8pxより一回り小さく（従来21.8px）。左右余白は従来18px／20pxから少し広げた */
.-dress_b15004TategakiRightBlock .c-title { font-family: "EB Garamond", "Shippori Mincho", serif; }
@media only screen and (min-width: 642px) {
  .-dress_b15004TategakiRightBlock .c-title { margin-top: -3px; } /* 英字大見出しの天を上の白いエリアに接するまで引き上げる（実測の隙間約2px） */
  #bk8691 .c-title { margin-top: 20px; } /* 組版欄の3行全体を下げ、「組版」の天の横画が上端にわずかに（約5px）掛かる位置に */
  #bk8691 .kumi-en { position: relative; top: 14px; } /* TYPOGRAPHY・LAYOUTだけ14px下げて「組版」との重なりを約26px→約12pxに。「組版」の位置は元のまま（上が欠けるのは意図どおり） */
}

/* 2026-10-02 PCのInstagramアイコン（右上・#bk8661）を少し左へ：右余白10px→16px */
@media only screen and (min-width: 642px) {
  #bk8661 > div { padding-right: 16px; }
}

/* 2026-10-02 禁則処理：長音「ー」や小書き仮名を行頭に置かない（line-break: strict）。冒頭ブロック・5エリアの本文と見出しに適用 */
.-dress_b15004Tategaki .c-body, .-dress_b15004Tategaki .c-title,
.-dress_b15004TategakiRightBlock .c-body, .-dress_b15004TategakiRightBlock .c-large_headline { line-break: strict; }

/* 2026-10-03 COFFEE欄：末尾リンク2行（文化とコミュニティの相乗効果。／しましま ＣＯＦＦＥＥ ＳＴＡＮＤ）の行間だけ狭く（本文2.0→1.4） */
.-dress_b15004TategakiRightBlock .c-body a { display: inline-block; line-height: 1.4; vertical-align: top; } /* 2026-10-03 全エリア共通に（当初はCOFFEEのみ） */

/* 2026-10-03 BRANDING〜HANKO 5エリアの本文2段化：本文は縦書きで横に伸びるため、見出し（黄）と本文（緑）の幅の合計が
   画面幅の95%（列の右余白5%を除いた幅）を超えると本文が下へ落ちて見出しと分離する。各エリアで1段のまま並ぶ最小幅を実測し、約25pxの余裕（スクロールバー分）を足して境界とした。
   それ未満では本文を上下2段（column-count: 2、高さ600px→1180px）にし、見出しの帯も1180pxに揃える。見出し文の行長は1段分（570px）のまま */
@media only screen and (min-width: 642px) and (max-width: 1440px) { /* COFFEE：見出し193px＋本文1144px。1段で収まる最小幅1408px＋余裕 */
  #bk8657 .c-body { height: 1180px; column-count: 2; column-gap: 40px; }
  #bk8657 .c-large_headline { height: 1180px; padding-bottom: 580px; }
}
@media only screen and (min-width: 642px) and (max-width: 1260px) { /* SILKSCREEN：147px＋1006px。最小幅1232px＋余裕 */
  #bk8656 .c-body { height: 1180px; column-count: 2; column-gap: 40px; }
  #bk8656 .c-large_headline { height: 1180px; padding-bottom: 580px; }
}
@media only screen and (min-width: 642px) and (max-width: 900px) { /* 組版：147px＋681px。最小幅872px＋余裕 */
  #bk8691 .c-body { height: 1180px; column-count: 2; column-gap: 40px; }
  #bk8691 .c-large_headline { height: 1180px; padding-bottom: 580px; }
}
@media only screen and (min-width: 642px) and (max-width: 780px) { /* BRANDING：193px＋519px。最小幅750px＋余裕 */
  #bk8655 .c-body { height: 1180px; column-count: 2; column-gap: 40px; }
  #bk8655 .c-large_headline { height: 1180px; padding-bottom: 580px; }
}
@media only screen and (min-width: 642px) and (max-width: 710px) { /* HANKO：193px＋437px。最小幅682px＋余裕 */
  #bk8660 .c-body { height: 1180px; column-count: 2; column-gap: 40px; }
  #bk8660 .c-large_headline { height: 1180px; padding-bottom: 580px; }
}
/* 本文が特に長いCOFFEE・SILKSCREENは、2段でも収まらない幅（タブレット縦など）で3段にする（高さ1760px） */
@media only screen and (min-width: 642px) and (max-width: 880px) { /* COFFEE 2段時：最小幅852px＋余裕 */
  #bk8657 .c-body { height: 1760px; column-count: 3; }
  #bk8657 .c-large_headline { height: 1760px; padding-bottom: 1160px; }
}
@media only screen and (min-width: 642px) and (max-width: 770px) { /* SILKSCREEN 2段時：最小幅744px＋余裕 */
  #bk8656 .c-body { height: 1760px; column-count: 3; }
  #bk8656 .c-large_headline { height: 1760px; padding-bottom: 1160px; }
}
@media only screen and (min-width: 642px) and (max-width: 690px) { /* COFFEE 3段時：最小幅664px＋余裕。642〜690pxは4段（高さ2340px） */
  #bk8657 .c-body { height: 2340px; column-count: 4; }
  #bk8657 .c-large_headline { height: 2340px; padding-bottom: 1740px; }
}

/* 2026-10-03 5エリアの文末リンク：グローバルナビと同じロールオーバー（下線なし、0.2秒で文字色が変わる）。
   ナビは文字色がrgba(51,51,51,.85)→#170901。本文リンクは白地ではないので、白→#170901（ナビのホバー色）に */
.-dress_b15004TategakiRightBlock .c-body a { text-decoration: none; transition: color .2s ease; }
.-dress_b15004TategakiRightBlock .c-body a:hover { color: #FFFFFF; } /* 緑地で見分けやすいよう白に（#170901から変更） */

/* 2026-10-03 「詳細はこちらから」の矢印をゆるやかに点滅（3秒周期で不透明度1→0.25→1）。動きを減らす設定の端末では点滅させない */
@keyframes arrow-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.arrow-blink { display: inline-block; animation: arrow-blink 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .arrow-blink { animation: none; } }
/* 2026-10-03 グローバルナビ先頭の「▲」（ページ上部へ）も同じ点滅に。HTMLは変えずリンク先で指定 */
.c-menu li a[href="#top"] { animation: arrow-blink 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .c-menu li a[href="#top"] { animation: none; } }

/* 2026-10-03 スマホ：5エリアの英字大見出し（BRANDING等）をエリアごとに画面幅いっぱいまで拡大（行送り0.7のまま）。
   PCと同じく上を少し欠けさせる：PCは字面の上端が列の上端から-46px（-0.26em）。同じ比率で-23pxになるよう margin-top -25px（列の上余白20pxを相殺して5px食い込ませる） */
@media only screen and (max-width: 641px) {
  /* エリアごとに最長の単語が画面幅いっぱい（左右余白約1.5%）になるサイズ。画面幅に連動させるため vw 単位（左右の内側余白20pxの内側に収める。幅390pxで BRANDING 77px、組版 59px、COFFEE 76px、SILKSCREEN 66px、HANKO 84px）。
     字間は-0.114em（PC・従来と同じ比率）。上の欠けはPC同様に字面の上端がわずかに切れる程度（-0.26emでは欠けすぎたため半分に） */
  .-dress_b15004TategakiRightBlock .c-title { letter-spacing: -0.114em; line-height: 0.628; margin-bottom: 820px; } /* 行送りもPCと同じ0.628（従来0.7）。行間の隙間をなくし重ねる。見出し帯との間隔は80px→820px（文字下端から帯まで約800px。背景の作品を見せる） */
  #bk8655 .c-title { font-size: 19.4vw; margin-top: -3.8vw; }  /* BRANDING */
  #bk8691 .c-title { font-size: 19.4vw; margin-top: -1.1vw; }  /* TYPO-／GRAPHYに分綴。margin-topは「組版」の天が少し欠ける位置（-3.6vwでは動かしすぎ、-1.6vwから2px下げ） */
  #bk8657 .c-title { font-size: 19.4vw; margin-top: -3.8vw; }  /* CULTURAL（最長語。全体のサイズはこれに合わせた） */
  #bk8656 .c-title { font-size: 19.4vw; margin-top: -3.8vw; }  /* SILK-／SCREENに分綴 */
  #bk8660 .c-title { font-size: 19.4vw; margin-top: -3.8vw; }  /* MOCHITE */
}

/* 2026-10-03 スマホ：5エリアの本文（緑）の下から次のエリアまでの余白を40px→200px（5倍）にして背景の作品を見せる */
@media only screen and (max-width: 641px) {
  #bk8655 > div, #bk8691 > div, #bk8657 > div, #bk8656 > div, #bk8660 > div { padding-bottom: 200px; } /* 元の指定がID付き（#bk8655>div{padding-bottom:40px}）のためIDで上書き */
}

/* 2026-10-03 スマホ：5エリアの背景写真。ブロックが縦に長く（2600〜4100px）、cover指定では写真が高さに合わせて拡大され一部しか見えなかった。
   写真の高さをブロックの半分にして縦に2枚（2026-10-03 13:43） */
@media only screen and (max-width: 641px) {
  .bd-webp #bk8655, .bd-webp #bk8691, .bd-webp #bk8657, .bd-webp #bk8656, .bd-webp #bk8660,
  .bd-no-webp #bk8655, .bd-no-webp #bk8691, .bd-no-webp #bk8657, .bd-no-webp #bk8656, .bd-no-webp #bk8660 { background-size: auto 50%; background-repeat: repeat-y; background-position: center top; } /* 写真の高さ＝ブロックの高さの半分、縦に2枚繰り返し（横は中央部分が見える）。元の指定が .bd-webp #bk8655 のため同じ形で上書き */
}

/* 2026-10-03 スマホ：組版欄の「組版」とTYPOGRAPHYの重なりが強いため、TYPOGRAPHY・LAYOUTだけ画面幅の3%（390pxで約12px）下げる。PCの14px下げと同趣旨 */
@media only screen and (max-width: 641px) {
  #bk8691 .kumi-en { position: relative; top: 1.5vw; } /* 「組版」にわずかに重なる位置 */
}

/* 2026-10-03 スマホ：TYPOGRAPHY→TYPO-／GRAPHY、SILKSCREEN→SILK-／SCREENに分綴（ハイフン処理）し、5エリアの大見出しを同じ19.4vwに統一（最長語CULTURALが収まる上限）。PCでは1語のまま */
.sp-hyphen { display: none; }
@media only screen and (max-width: 641px) { .sp-hyphen { display: inline; } }

/* 2026-10-03 スマホ：見出し帯（黄）の左に残っていた白い罫線（PCの縦組み用 border-left）を、黄と緑の境目（下辺）へ移す */
@media only screen and (max-width: 641px) {
  .-dress_b15004TategakiRightBlock .c-large_headline { border-left: none; border-bottom: solid 1px #FFFFFF; }
}

/* 2026-10-03 見出し帯・本文帯の色をエリアごとに（背景写真より明度高め、白抜き文字が読める範囲）。BRANDINGは現行の黄 #D2D80E／緑 #04CDB6 のまま。不透明度は現行と同じ0.95 */
#bk8691 .c-large_headline { background-color: rgba(181, 45, 88, 0.95); }    /* 組版：#B52D58（みうさん指定。#E94B72 から変更） */
#bk8691 .c-body           { background-color: rgba(242, 80, 140, 0.95); }   /* 組版：明るいローズ #F2508C */
#bk8657 .c-large_headline { background-color: rgba(169, 90, 63, 0.95); }    /* COFFEE：#A95A3F（みうさん指定。淡い琥珀 #F2C27A から変更） */
#bk8657 .c-body           { background-color: rgba(217, 125, 80, 0.95); }   /* COFFEE：#D97D50（みうさん指定。テラコッタ #E0875A から変更） */
#bk8656 .c-large_headline { background-color: rgba(255, 213, 42, 0.95); color: #493900; }  /* SILKSCREEN：#FFD52A、文字色 #493900（みうさん指定。#F0D957／#4A3A20 から変更） */
#bk8656 .c-body           { background-color: rgba(244, 200, 61, 0.95); color: #493900; }   /* SILKSCREEN：#F4C83D、文字色 #493900（みうさん指定） */
#bk8656 .c-body a         { color: #493900; }  /* リンクも同じ文字色（ホバーは白のまま） */
#bk8656 .c-body a:hover   { color: #FFFFFF; }  /* ID指定で共通のホバー規則より強くなるため、ホバーの白をここでも指定 */
#bk8660 .c-large_headline { background-color: rgba(200, 149, 84, 0.95); color: #4B3525; }   /* HANKO：#C89554、文字色 #4B3525（みうさん指定。砂色 #F0D39B・白文字から変更） */
#bk8660 .c-body           { background-color: rgba(217, 166, 111, 0.95); color: #4B3525; }  /* HANKO：#D9A66F、文字色 #4B3525（みうさん指定） */
#bk8660 .c-body a         { color: #4B3525; }
#bk8660 .c-body a:hover   { color: #FFFFFF; }
#bk8691 .c-large_headline { border-color: #F3A0B5; }  /* 2026-10-03 組版：見出し帯と本文帯の境目の線（PCは左辺、スマホは下辺）を #F3A0B5 に（他エリアは白） */
#bk8655 .c-large_headline { background-color: rgba(185, 215, 25, 0.95); color: #FFFFFF; }  /* 2026-10-03 BRANDING：#B9D719、文字色 白（みうさん指定。#007F58 から変更） */
#bk8655 .c-body           { background-color: rgba(0, 189, 176, 0.95); color: #FFFFFF; }   /* BRANDING：#00BDB0（#12BFAE から変更） */
#bk8655 .c-body a         { color: #FFFFFF; }
#bk8655 .c-body a:hover   { color: #B9D719; }  /* 文字が白なのでホバーは見出し帯の色に */