/* 自己ホスト書体(SIL OFL 1.1。サブセット化した改変版のため chibe-* に改名。出典と全文は /fonts/LICENSES.md と OFL-*.txt) */
@font-face{font-family:"chibe-jp-brush";src:url("/fonts/chibe-jp-brush-h.ffaa1f72.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+20,U+3001,U+3048,U+304A-304B,U+306E,U+308A,U+30C1,U+30D9,U+30DE,U+5206,U+56FD,U+5BB6,U+5CF6,U+5EAD,U+5F92,U+6599,U+6B69,U+7406,U+8431,U+97D3,U+99C5}
@font-face{font-family:"chibe-jp-brush";src:url("/fonts/chibe-jp-brush-a.e21c6067.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+21,U+28-29,U+2C,U+47,U+49,U+4E,U+53,U+61,U+65,U+67,U+6C-6F,U+72-74,U+A0,U+2014,U+3002,U+300C-300D,U+301C,U+3042,U+3044,U+3046,U+304C-304D,U+304F,U+3053-3054,U+3057-305B,U+305F,U+3061,U+3064,U+3066-3068,U+306A-306B,U+306D,U+306F,U+3072,U+3078-3079,U+307E-3082,U+3084,U+3086,U+3088-3089,U+308B,U+308F,U+3093,U+30A2,U+30A4,U+30A6-30AB,U+30AD-30AF,U+30B2-30B3,U+30B5,U+30B7-30BB,U+30BD,U+30BF-30C0,U+30C2-30C3,U+30C6-30CB,U+30CE-30D7,U+30DA-30DC,U+30DF-30E3,U+30E5,U+30E7,U+30E9-30ED,U+30F3,U+30FB-30FC,U+4E2D,U+4E88,U+4E8C,U+4ECB,U+5165,U+5168,U+5185,U+5199,U+51B7,U+51FA,U+524D,U+539A,U+53E3,U+5408,U+540D,U+54C1,U+554F,U+56F2,U+5802,U+5869,U+5916,U+5927,U+5B50,U+5C0F,U+5E2D,U+5E97,U+5F53,U+6162,U+6255,U+643E,U+652F,U+65B0,U+65B9,U+6700,U+6765,U+677F,U+6839,U+6885,U+6C17,U+6C34,U+6D77,U+6E29,U+713C,U+7389,U+74F6,U+751F,U+7531,U+767D,U+76DB,U+770B,U+771F,U+77E5,U+77F3,U+7D04,U+7D14,U+7D39,U+8089,U+8150,U+81EA,U+828B,U+82D4,U+8336,U+83DC,U+898B,U+8B72,U+8C46,U+8C5A,U+8CEA,U+8FF7,U+9038,U+914E,U+9152,U+91CE,U+9244,U+934B,U+958B,U+968E,U+96F0,U+9727,U+9752,U+98DF,U+98EF,U+9EA6,U+9EBA,U+9ED2,U+FF01,U+FF1F}
@font-face{font-family:"chibe-jp-brush";src:url("/fonts/chibe-jp-brush-b.27279ad2.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+22-27,U+2A-2B,U+2D-2F,U+3A-46,U+48,U+4A-4D,U+4F-52,U+54-60,U+62-64,U+66,U+68-6B,U+70-71,U+75-7E,U+A9,U+B7,U+2039-203A,U+2192,U+2197,U+260E,U+3006,U+300E-300F,U+3012,U+304E,U+3050-3052,U+3055,U+305C-305E,U+3060,U+3063,U+3069,U+3070-3071,U+3073-3077,U+307B-307C,U+3083,U+3085,U+308C-308D,U+3092,U+30B0,U+30C4,U+30DD,U+4E00,U+4E08,U+4E0A,U+4E26,U+4E38,U+4E86,U+4E8B,U+4EAC,U+4EBA,U+4ED5,U+4ED8,U+4EE5,U+4EFB,U+4F11,U+4F1A,U+4F4F,U+4F5C,U+4F7F,U+4F9B,U+4FA1,U+4FE1,U+4FEE,U+5019,U+5074,U+50CD,U+5148,U+5177,U+5186,U+5207,U+521D,U+5236,U+523B,U+529B,U+52A9,U+52D5,U+5317,U+5353-5354,U+53E4,U+53F0,U+540C,U+5473,U+548C,U+5510,U+55B6,U+56E3,U+56F3,U+5730,U+5834,U+58C1,U+591A,U+592B,U+5965,U+597D,U+59CB,U+5B63,U+5B6B,U+5B89,U+5B9A,U+5BA2,U+5BC4,U+5BC6,U+5BDD,U+5C11,U+5C4B,U+5DDD,U+5DEE,U+5DFB,U+5E02-5E03,U+5E0C,U+5E30,U+5E74,U+5E95,U+5E9C,U+5EA6-5EA7,U+5F0F,U+5F15,U+5F85,U+5F8C,U+5FC5,U+601D,U+606F,U+6238,U+623B,U+6240,U+624B,U+6301,U+6307,U+63A2,U+63D0,U+6545,U+6559,U+6570,U+6587,U+65E5,U+65E7,U+6625,U+6642,U+66DC,U+6708-6709,U+671B,U+6728,U+672A,U+672C,U+6731,U+6750,U+6771,U+679A,U+683C,U+6905,U+696D,U+697D,U+6A4B,U+6B21,U+6B62,U+6B73,U+6BB5,U+6C7A,U+6CB9,U+6CD5,U+6CE8,U+6D41,U+6DF7,U+6E80,U+6F2C,U+7092,U+716E,U+71B1,U+7384,U+73FE,U+7518,U+7528,U+7530,U+753A,U+756A,U+75B2,U+76BF,U+76EE,U+76F8,U+78EF,U+793A,U+795D,U+79D8,U+79FB,U+7A0B,U+7A0E,U+7A2E,U+7A7A,U+7B2C,U+7BC0,U+7BC4,U+7C89,U+7D4C,U+7D9A,U+7DD2,U+7DDA,U+7E26,U+7FD2,U+8005,U+805E,U+81D3,U+81E8,U+8272,U+82B1,U+82D7,U+82E6,U+8349,U+84B8,U+8584,U+885B,U+8868,U+88CF,U+88DC,U+8981,U+899A,U+89D2,U+8A00,U+8A08,U+8A71,U+8A9E,U+8ABF,U+8AC7,U+8B1B,U+8CAC,U+8D64,U+8DB3,U+8DEF,U+8ECA,U+8EE2,U+8F9B,U+8FBC,U+8FD1,U+901A,U+9032,U+904E,U+9069,U+9078,U+90F7,U+9178,U+91D1,U+9577,U+9580,U+9593,U+95A2,U+962A,U+9650,U+96C6,U+96E8,U+96FB,U+9858,U+985E,U+98A8,U+9999,U+99D0,U+9B5A,U+9BAE,U+9D8F,U+9DB4,U+FF0F}
@font-face{font-family:"chibe-kr-brush";src:url("/fonts/chibe-kr-brush-k.32936b8f.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+20-21,U+28-29,U+3F,U+2018-2019,U+3001-3002,U+30FB,U+AC00,U+AC04,U+AC08,U+AC11,U+AC1C,U+AC78,U+AC80,U+AC8C,U+ACB0,U+ACB9,U+ACC4,U+ACE0,U+ACF1,U+ACF5,U+ACFC,U+AD6C-AD6D,U+AD7D,U+AE08,U+AE30,U+AE38,U+AE40,U+AE43,U+AE4D,U+AED8,U+B098,U+B09C,U+B0C9,U+B124,U+B150,U+B274,U+B294,U+B2C8,U+B2E4,U+B2ED,U+B300,U+B3C4,U+B3CC,U+B450,U+B460,U+B4DC,U+B530,U+B610,U+B73B,U+B77C,U+B780,U+B798,U+B808,U+B80C,U+B85C,U+B871,U+B8CC,U+B984,U+B9AC,U+B9B0,U+B9C1,U+B9C8-B9C9,U+B9CC,U+B9D0,U+B9E4-B9E5,U+BA39,U+BA3C,U+BA54,U+BA74,U+BAA8,U+BAAC,U+BABB,U+BB34,U+BB38,U+BB3B-BB3C,U+BBF8,U+BC16,U+BC25,U+BC30,U+BC95,U+BCA0,U+BCD1,U+BCF4,U+BCF6,U+BCF8,U+BCFC,U+BD80,U+BD84,U+BDF0,U+BE14,U+BE44,U+BE54,U+C0AC,U+C0B4,U+C0BC,U+C0DD,U+C11C-C11D,U+C138,U+C18C,U+C1A5,U+C218,U+C21C,U+C288,U+C2A4,U+C2AC,U+C2B5,U+C2DC-C2DD,U+C2E0,U+C2E4,U+C544,U+C548,U+C54C,U+C57C-C57D,U+C591,U+C5B4,U+C5C5-C5C6,U+C5D0,U+C5ED,U+C608,U+C624,U+C62C,U+C640,U+C694,U+C6B0,U+C6B4,U+C6CC,U+C704,U+C720-C721,U+C740,U+C74C,U+C758,U+C774,U+C778,U+C77C,U+C784-C785,U+C788,U+C790,U+C7A1,U+C7A5,U+C800,U+C804,U+C813,U+C815,U+C81C,U+C870,U+C88C,U+C8FC,U+C904,U+C911,U+C988,U+C9C0,U+C9C4,U+C9C8,U+C9D1,U+CC0C,U+CC1C,U+CC28,U+CC38,U+CC3D,U+CC44,U+CC98,U+CCA0,U+CCB4,U+CD5C,U+CD94,U+CD9C,U+CE58,U+CE68,U+CE74,U+CE7C,U+CF54,U+CF5C,U+CF69,U+D06C,U+D070,U+D0A4,U+D130,U+D14C,U+D2B8,U+D310,U+D314,U+D37C,U+D45C,U+D488,U+D504,U+D53C,U+D558,U+D55C,U+D574,U+D788,U+D798}
@font-face{font-family:"chibe-jp-sans";src:url("/fonts/chibe-jp-sans-400.a9187720.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+20-7E,U+A9,U+B7,U+2014,U+2039-203A,U+2192,U+2197,U+260E,U+3001-3002,U+3006,U+300C-300F,U+3012,U+301C,U+3042,U+3044,U+3046,U+3048,U+304A-3055,U+3057-3061,U+3063-3064,U+3066-306B,U+306D-3079,U+307B-307C,U+307E-3086,U+3088-308D,U+308F,U+3092-3093,U+30A2,U+30A4,U+30A6-30AB,U+30AD-30B0,U+30B2-30B3,U+30B5,U+30B7-30BB,U+30BD,U+30BF-30C4,U+30C6-30CB,U+30CE-30D7,U+30D9-30E3,U+30E5,U+30E7,U+30E9-30ED,U+30F3,U+30FB-30FC,U+4E00,U+4E08,U+4E0A,U+4E26,U+4E2D,U+4E38,U+4E86,U+4E88,U+4E8B-4E8C,U+4EAC,U+4EBA,U+4ECB,U+4ED5,U+4ED8,U+4EE5,U+4EFB,U+4F11,U+4F1A,U+4F4F,U+4F5C,U+4F7F,U+4F9B,U+4FA1,U+4FE1,U+4FEE,U+5019,U+5074,U+50CD,U+5148,U+5165,U+5168,U+5177,U+5185-5186,U+5199,U+51B7,U+51FA,U+5206-5207,U+521D,U+5236,U+523B,U+524D,U+529B,U+52A9,U+52D5,U+5317,U+5353-5354,U+539A,U+53E3-53E4,U+53F0,U+5408,U+540C-540D,U+5473,U+548C,U+54C1,U+5510,U+554F,U+55B6,U+56E3,U+56F2-56F3,U+56FD,U+5730,U+5802,U+5834,U+5869,U+58C1,U+5916,U+591A,U+5927,U+592B,U+5965,U+597D,U+59CB,U+5B50,U+5B63,U+5B6B,U+5B89,U+5B9A,U+5BA2,U+5BB6,U+5BC4,U+5BC6,U+5BDD,U+5C0F,U+5C11,U+5C4B,U+5CF6,U+5DDD,U+5DEE,U+5DFB,U+5E02-5E03,U+5E0C,U+5E2D,U+5E30,U+5E74,U+5E95,U+5E97,U+5E9C,U+5EA6-5EA7,U+5EAD,U+5F0F,U+5F15,U+5F53,U+5F85,U+5F8C,U+5F92,U+5FC5,U+601D,U+606F,U+6162,U+6238,U+623B,U+6240,U+624B,U+6255,U+6301,U+6307,U+63A2,U+63D0,U+643E,U+652F,U+6545,U+6559,U+6570,U+6587,U+6599,U+65B0,U+65B9,U+65E5,U+65E7,U+6625,U+6642,U+66DC,U+6700,U+6708-6709,U+671B,U+6728,U+672A,U+672C,U+6731,U+6750,U+6765,U+6771,U+677F,U+679A,U+6839,U+683C,U+6885,U+6905,U+696D,U+697D,U+6A4B,U+6B21,U+6B62,U+6B69,U+6B73,U+6BB5,U+6C17,U+6C34,U+6C7A,U+6CB9,U+6CD5,U+6CE8,U+6D41,U+6D77,U+6DF7,U+6E29,U+6E80,U+6F2C,U+7092,U+713C,U+716E,U+71B1,U+7384,U+7389,U+73FE,U+7406,U+74F6,U+7518,U+751F,U+7528,U+7530-7531,U+753A,U+756A,U+75B2,U+767D,U+76BF,U+76DB,U+76EE,U+76F8,U+770B,U+771F,U+77E5,U+77F3,U+78EF,U+793A,U+795D,U+79D8,U+79FB,U+7A0B,U+7A0E,U+7A2E,U+7A7A,U+7B2C,U+7BC0,U+7BC4,U+7C89,U+7D04,U+7D14,U+7D39,U+7D4C,U+7D9A,U+7DD2,U+7DDA,U+7E26,U+7FD2,U+8005,U+805E,U+8089,U+8150,U+81D3,U+81E8,U+81EA,U+8272,U+828B,U+82B1,U+82D4,U+82D7,U+82E6,U+8336,U+8349,U+83DC,U+8431,U+84B8,U+8584,U+885B,U+8868,U+88CF,U+88DC,U+8981,U+898B,U+899A,U+89D2,U+8A00,U+8A08,U+8A71,U+8A9E,U+8ABF,U+8AC7,U+8B1B,U+8B72,U+8C46,U+8C5A,U+8CAC,U+8CEA,U+8D64,U+8DB3,U+8DEF,U+8ECA,U+8EE2,U+8F9B,U+8FBC,U+8FD1,U+8FF7,U+901A,U+9032,U+9038,U+904E,U+9069,U+9078,U+90F7,U+914E,U+9152,U+9178,U+91CE,U+91D1,U+9244,U+934B,U+9577,U+9580,U+958B,U+9593,U+95A2,U+962A,U+9650,U+968E,U+96C6,U+96E8,U+96F0,U+96FB,U+9727,U+9752,U+97D3,U+9858,U+985E,U+98A8,U+98DF,U+98EF,U+9999,U+99C5,U+99D0,U+9B5A,U+9BAE,U+9D8F,U+9DB4,U+9EA6,U+9EBA,U+9ED2,U+FF01,U+FF0F,U+FF1F}
@font-face{font-family:"chibe-jp-sans";src:url("/fonts/chibe-jp-sans-700.e8e58a76.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+20-7E,U+B7,U+2039-203A,U+2192,U+2197,U+260E,U+3001-3002,U+301C,U+3042,U+3044,U+3046,U+304A-304B,U+304D,U+304F,U+3053-3054,U+3057-305B,U+305F,U+3061,U+3067-3068,U+306A-306B,U+306E-306F,U+3078-3079,U+307E-3082,U+3084,U+3086,U+3089-308C,U+308F,U+3092-3093,U+30A2,U+30A4,U+30A6-30AB,U+30AD,U+30AF-30B0,U+30B2-30B3,U+30B5,U+30B7-30BA,U+30BD,U+30BF-30C3,U+30C6,U+30C8-30CB,U+30CE-30D7,U+30D9-30DA,U+30DC,U+30DE-30E3,U+30E5,U+30E9-30ED,U+30F3,U+30FB-30FC,U+4E00,U+4E2D,U+4E88,U+4E8C,U+4EBA,U+4F11,U+4F4F,U+4F9B,U+5165,U+5186,U+51B7,U+524D,U+5353,U+53E3,U+5408,U+54C1,U+55B6,U+56F3,U+56FD,U+5730,U+5802,U+5834,U+5927,U+5B50,U+5B9A,U+5BC4,U+5C0F,U+5CF6,U+5DEE,U+5E2D,U+5E30,U+5FC5,U+623B,U+6240,U+624B,U+6255,U+6301,U+63D0,U+643E,U+652F,U+6570,U+6599,U+65B9,U+65E5,U+6642,U+66DC,U+6700,U+6708,U+672A,U+672C,U+6750,U+6839,U+6885,U+696D,U+6B73,U+6BB5,U+6C34,U+6CD5,U+6D77,U+6E29,U+6E80,U+713C,U+7389,U+73FE,U+7406,U+74F6,U+751F,U+756A,U+767D,U+76DB,U+76F8,U+77F3,U+7D04,U+7D14,U+7D4C,U+8150,U+81EA,U+828B,U+82D4,U+82E6,U+8336,U+83DC,U+8431,U+8981,U+898B,U+8A71,U+8A9E,U+8ABF,U+8AC7,U+8C46,U+8C5A,U+8DEF,U+8ECA,U+8EE2,U+901A,U+914E,U+9152,U+91D1,U+9593,U+968E,U+96FB,U+9727,U+9752,U+97D3,U+985E,U+98DF,U+99C5,U+99D0,U+9EA6,U+9EBA,U+9ED2,U+FF0F}
@font-face{font-family:"chibe-kr-sans";src:url("/fonts/chibe-kr-sans-400-j.8f318040.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+20-7E,U+A9,U+B7,U+2013-2014,U+2018-2019,U+201C-201D,U+2026,U+2039-203A,U+2192,U+2197,U+260E,U+AC00,U+AC08,U+AC11,U+AC1C,U+AC78,U+AC80,U+AC8C,U+ACB9,U+ACC4,U+ACE0,U+ACF1,U+ACF5,U+AD6C-AD6D,U+AE08,U+AE30,U+AE40,U+AE43,U+AE4D,U+B098,U+B09C,U+B0C9,U+B274,U+B294,U+B2C8,U+B2E4,U+B2ED,U+B300,U+B3C4,U+B3CC,U+B450,U+B460,U+B4DC,U+B530,U+B73B,U+B77C,U+B780,U+B808,U+B80C,U+B85C,U+B871,U+B97C,U+B9AC,U+B9B0,U+B9C8-B9C9,U+B9D0,U+B9E4-B9E5,U+BA54,U+BA74,U+BAA8,U+BAAC,U+BB34,U+BB3C,U+BBF8,U+BC25,U+BC30,U+BCD1,U+BCF4,U+BCF6,U+BCFC,U+BD80,U+BE44,U+BE54,U+C0AC,U+C0B4,U+C0BC,U+C0DD,U+C11C,U+C138,U+C18C,U+C1A5,U+C218,U+C21C,U+C288,U+C2A4,U+C2AC,U+C2B5,U+C2DC,U+C2E4,U+C544,U+C54C,U+C5B4,U+C5C6,U+C5D0,U+C624,U+C62C,U+C694,U+C6B0,U+C720-C721,U+C73C,U+C740,U+C744,U+C74C,U+C774,U+C77C,U+C784,U+C790,U+C7A1,U+C800,U+C804,U+C813,U+C870,U+C8FC,U+C904,U+C911,U+C988,U+C9C0,U+C9C4,U+C9D1,U+CC0C,U+CC1C,U+CC28,U+CC38,U+CC3D-CC3E,U+CC44,U+CC98,U+CCA0,U+CD94,U+CE58,U+CE68,U+CE74,U+CE7C,U+CF54,U+CF5C,U+CF69,U+D070,U+D0A4,U+D310,U+D37C,U+D398,U+D53C,U+D558,U+D55C,U+D788,U+D798}
@font-face{font-family:"chibe-kr-sans";src:url("/fonts/chibe-kr-sans-400-k.25d5553a.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+AC01,U+AC04,U+AC15,U+AC19,U+AC70,U+AC81,U+AC83,U+AC89,U+ACA0,U+ACA9,U+ACB0,U+ACBD,U+ACE8,U+ACF3,U+ACFC,U+AD1C,U+AD7D,U+AD81,U+ADF8,U+ADFC,U+AE00,U+AE34,U+AE38,U+AE4C,U+AE54,U+AED8,U+AF2D,U+AFB8,U+B053-B054,U+B05D,U+B0A0,U+B0B4,U+B0B8,U+B118,U+B123-B124,U+B140,U+B144,U+B150,U+B179,U+B193,U+B204,U+B220,U+B298,U+B2A5,U+B2CC,U+B2D8,U+B2E5,U+B2E8,U+B2EB-B2EC,U+B2F4,U+B2F9,U+B354-B355,U+B358,U+B370,U+B3D9,U+B3FC,U+B418,U+B429,U+B451,U+B454,U+B465,U+B4A4,U+B4DD,U+B4E4,U+B4EF,U+B4F1,U+B531,U+B54C,U+B5BB,U+B610,U+B6F0,U+B728,U+B77D,U+B798,U+B7EC,U+B824,U+B834,U+B8CC,U+B8E8,U+B8FD,U+B958,U+B974,U+B978,U+B984,U+B9B4,U+B9BC-B9BD,U+B9C1,U+B9CC,U+B9CE,U+B9DB,U+B9DE,U+BA39,U+BA3C,U+BA48,U+BA70,U+BA85,U+BAA9,U+BABB,U+BB38,U+BB3B,U+BC00,U+BC14,U+BC16,U+BC18,U+BC1C,U+BC29,U+BC31,U+BC84,U+BC88,U+BC94-BC95,U+BCA0,U+BCBC-BCBD,U+BCF8,U+BD10,U+BD24,U+BD59,U+BD81,U+BD84,U+BD88,U+BDF0,U+BE14,U+BE48,U+BE68,U+C0AD,U+C0B6,U+C0C1,U+C0C8-C0C9,U+C11D-C11E,U+C120,U+C12F,U+C131,U+C154,U+C18D,U+C190,U+C1A1,U+C220,U+C26C,U+C27D,U+C2DD,U+C2E0,U+C2F6,U+C36C,U+C370,U+C4F0,U+C500,U+C529,U+C548,U+C54A,U+C558,U+C55E,U+C57C-C57D,U+C587,U+C591,U+C5B5,U+C5B8,U+C5BC,U+C5C5,U+C5C8,U+C5D4,U+C5EC-C5ED,U+C601,U+C608,U+C628,U+C640,U+C644,U+C6A9,U+C6B4,U+C6B8,U+C6C0,U+C6CC,U+C6D0,U+C6D4,U+C704,U+C758,U+C778,U+C785,U+C788,U+C791,U+C794,U+C798,U+C7A5,U+C7AC,U+C801,U+C808,U+C810-C811,U+C815,U+C81C,U+C838,U+C88B-C88C,U+C8FD,U+C90C,U+C918,U+C990,U+C9C1,U+C9C8,U+C9DC-C9DD,U+C9E4,U+C9ED,U+C9F8,U+CA84,U+CABD,U+CAC4,U+CC0D,U+CC2C,U+CC2E,U+CC45,U+CC9C,U+CCAB,U+CCB4,U+CCD0,U+CD08,U+CD5C,U+CD95,U+CD9C,U+CDA7,U+CE5C,U+CE6B,U+CEE4,U+CF1C,U+CF64,U+CFE0,U+D06C,U+D07C,U+D0B5,U+D0C0-D0C1,U+D130,U+D14C,U+D1B5,U+D23C,U+D2B8,U+D2C0,U+D30C,U+D314,U+D33D,U+D3B8,U+D3EC-D3ED,U+D45C,U+D488,U+D48B,U+D504,U+D50C,U+D544,U+D560,U+D568-D569,U+D56D,U+D574,U+D584,U+D588,U+D5A5,U+D604,U+D611,U+D638,U+D63C,U+D64D,U+D654,U+D658,U+D68C,U+D6C4,U+D734}
@font-face{font-family:"chibe-kr-sans";src:url("/fonts/chibe-kr-sans-700-j.20d3d050.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+20-7E,U+B7,U+2192,U+2197,U+260E,U+AC00,U+AC11,U+AC1C,U+AC78,U+AC80,U+AC8C,U+ACC4,U+ACE0,U+ACF5,U+AD6C-AD6D,U+AE30,U+AE40,U+AE43,U+AE4D,U+B098,U+B09C,U+B0C9,U+B274,U+B2C8,U+B2E4,U+B3C4,U+B3CC,U+B450,U+B460,U+B4DC,U+B530,U+B73B,U+B77C,U+B780,U+B808,U+B80C,U+B85C,U+B871,U+B97C,U+B9AC,U+B9B0,U+B9C8-B9C9,U+B9D0,U+B9E4-B9E5,U+BA54,U+BA74,U+BAA8,U+BAAC,U+BB34,U+BB3C,U+BBF8,U+BC25,U+BC30,U+BCD1,U+BCF4,U+BCF6,U+BCFC,U+BD80,U+BE44,U+BE54,U+C0AC,U+C0DD,U+C18C,U+C1A5,U+C218,U+C21C,U+C288,U+C2A4,U+C2AC,U+C2B5,U+C2DC,U+C2E4,U+C544,U+C54C,U+C5B4,U+C5C6,U+C5D0,U+C624,U+C62C,U+C6B0,U+C720-C721,U+C740,U+C744,U+C74C,U+C774,U+C77C,U+C784,U+C790,U+C7A1,U+C800,U+C804,U+C813,U+C870,U+C8FC,U+C911,U+C988,U+C9C0,U+C9C4,U+C9D1,U+CC0C,U+CC1C,U+CC28,U+CC38,U+CC3D-CC3E,U+CC44,U+CC98,U+CD94,U+CE58,U+CE68,U+CE74,U+CE7C,U+CF54,U+CF5C,U+CF69,U+D070,U+D0A4,U+D37C,U+D398,U+D53C,U+D558,U+D55C,U+D788}
@font-face{font-family:"chibe-kr-sans";src:url("/fonts/chibe-kr-sans-700-k.c538ec7e.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+AC04,U+AC08,U+AC70,U+ACB0,U+AE08,U+AE38,U+AE4C,U+B294,U+B2A5,U+B2E8,U+B2F4,U+B354,U+B418,U+B5BB,U+B8CC,U+B958,U+B9C1,U+B9CC,U+BA39,U+BABB,U+BD84,U+BDF0,U+BE14,U+C0C1,U+C11C-C11D,U+C138,U+C2DD,U+C54A,U+C57C-C57D,U+C5C5,U+C5D4,U+C5ED,U+C601,U+C608,U+C694,U+C6B4,U+C73C,U+C778,U+C785,U+C788,U+C794,U+C7A5,U+C7AC,U+C811,U+C815,U+C81C,U+C88C,U+CC9C,U+CCB4,U+D06C,U+D0B5,U+D130,U+D14C,U+D1B5,U+D2B8,U+D2C0,U+D314,U+D3EC,U+D504,U+D544,U+D560,U+D56D,U+D604,U+D63C,U+D654,U+D734}
/* 韓国料理 집에(チベ) 公式サイト。方向: 主 ① 食欲直撃(料理写真が主役)、副 ⑤ チベママが案内。
   スマホを主に作り、PC(1100px 以上)は本文 1 カラム+右端にチベママの縦バー。
   動かすのは transform と opacity だけ。prefers-reduced-motion では止める */
:root {
  --o: #E4784F;      /* 看板の赤オレンジ(主役) */
  --d: #B8461F;      /* 文字・ボタン用の濃い朱(白文字 4.5:1 以上) */
  --ink: #2A1A12;    /* 墨色 */
  --muted: #5B4A3F;
  --cream: #FFF8EF;
  --paper: #fff;
  --line: #EAD9C8;
  --focus: #1F5FBF;
  --sans-ja: "chibe-jp-sans", "chibe-kr-sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  --brush-ja: "chibe-jp-brush", "chibe-kr-sans", var(--sans-ja);  /* 日本語ページの筆文字の中のハングル(「집에」)は標準の形(#34、依頼者 2026-10-16) */
  --sans-ko: "chibe-kr-sans", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --brush-ko: "chibe-kr-brush", var(--sans-ko);
  --sans: var(--sans-ja);
  --brush: var(--brush-ja);
  --side-w: 0px;
  /* 本文の幅(フェーズ 5 #5): ヒーロー・各セクション・札・スライド・フッターを同じ最大幅と左右の余白にそろえる */
  --gut: 16px;
  --cw: 960px;
}
@media (min-width: 720px) { :root { --gut: 24px; } }
.l-ko { --sans: var(--sans-ko); --brush: var(--brush-ko); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 16px/1.85 var(--sans); overflow-wrap: anywhere; line-break: strict; }
.l-ko body, body.l-ko { word-break: keep-all; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
picture { display: contents; }
a { color: var(--d); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 6px; }
.skip:focus { top: 8px; }
.brush, h1, h2, h3 { font-family: var(--brush); font-weight: 400; letter-spacing: .02em; }
.l-ja h1, .l-ja h2, .l-ja h3 { word-break: auto-phrase; }
.l-ko .brush, .l-ko h1, .l-ko h2, .l-ko h3 { letter-spacing: 0; }
.num { font-family: var(--sans); font-weight: 700; }
small { font-size: .875em; }

/* ---------------- ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 48px; padding: 6px 22px; border-radius: 999px;
  font-weight: 700; text-decoration: none; line-height: 1.4; border: 2px solid var(--d); }
.btn-main { background: var(--d); color: #fff; }
.btn-sub { background: var(--paper); color: var(--d); }
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
@media (hover: hover) { .btn:hover { filter: brightness(1.08); } .btn-sub:hover { background: #FFF1E8; } }

/* ---------------- ヘッダー */
.site-header { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--paper); border-bottom: 4px solid var(--o); }
.brand { display: block; flex: 0 0 auto; min-width: 44px; }  /* 指で押しやすい幅(iPhone の目安 44px) */
.brand .logo-img { height: 56px; width: auto; }
@media (min-width: 720px) { .brand .logo-img { height: 72px; } }
.lang { display: flex; margin-left: auto; border: 2px solid var(--d); border-radius: 999px; overflow: hidden; }
.tab { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--d); font-weight: 700; text-decoration: none; font-size: 15px; font-family: var(--sans-ja); }
.tab[lang="ko"] { font-family: var(--sans-ko); }
.l-ko .tab[lang="ja"] { font-family: "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif; }
.tab[aria-current="page"] { background: var(--d); color: #fff; }
.head-tel { min-height: 44px; padding: 4px 12px; }
.head-tel .t { display: none; }
.head-tel .ico { font-size: 18px; }
@media (min-width: 560px) { .head-tel .t { display: inline; } }
/* ページ共通の「動きを止める/再開」(フェーズ 5 #3)。常時の揺れ・暖簾を止める。押した状態(aria-pressed)は止まっている。
   動き抑制の環境では何も動かないので出さない(site.js) */
.mo-btn { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid var(--d); border-radius: 50%;
  background: var(--paper); color: var(--d); cursor: pointer; }
.i-mo { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.mo-btn[aria-pressed="true"] { background: var(--d); color: #fff; }
.mo-btn[aria-pressed="true"] .i-mo { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; margin-left: 4px; }

/* ---------------- 全体の段組み */
.layout { display: block; }
@media (min-width: 1100px) {
  :root { --side-w: 220px; }
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); max-width: 1240px; margin: 0 auto; }
  body.p-404 { --side-w: 0px; }  /* 404 は右の列を出さないので、空きの列も取らない */
}

/* ---------------- ヒーロー(① 料理写真が主役) */
.hero { background: var(--paper); }
.hero-media { position: relative; height: min(78svh, 640px); min-height: 460px; overflow: hidden; background: #2A1A12; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20, 10, 5, .55) 0, rgba(20, 10, 5, 0) 26%, rgba(20, 10, 5, 0) 40%, rgba(20, 10, 5, .82) 100%); }
.hero-logo { position: absolute; top: 14px; left: 16px; }
.hero-logo .logo-img { height: 104px; width: auto; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5)); }
.hero-copy { position: absolute; left: 16px; right: 34%; bottom: 22px; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
.hero-h1 { margin: 0; font-size: clamp(20px, 6.3vw, 46px); line-height: 1.4; }
.hero-sub { margin: 8px 0 0; font-size: clamp(13px, 3.7vw, 18px); line-height: 1.5; color: #FFE6D8; }
.hero-sub .nw { display: block; }  /* 句ごとに 1 行。書体が後から当たっても行数が変わらない(CLS 対策) */
.hp { white-space: nowrap; }  /* 営業時間の句(「○ から営業／」「ラストオーダー ○」)の途中で折り返さない */
.hero-h1 .cl { display: block; white-space: nowrap; height: 1.4em; }  /* 書体が後から当たっても行の高さが変わらない(CLS 対策) */
.h1-name { height: 1.5em; overflow: visible; }
.l-ko .hero-h1 { font-size: clamp(26px, 8vw, 54px); line-height: 1.2; }
.l-ko .hero-h1 .cl { height: 1.2em; }
.h1-name { display: block; margin-bottom: 6px; font: 700 14px/1.5 var(--sans); letter-spacing: .08em; color: #FFE6D8; }
.hero .hero-note { margin: 6px 16px 0; text-align: right; }  /* .note-img(後に書いた余白 0)に負けないよう .hero をつける */
.hero-info { padding: 6px 16px 26px; }
.cat-note { margin: -6px auto 12px; color: var(--d); font-size: 15px; }
.mn-cat .cat-note { margin: 0; padding: 0 16px 2px; }
.hi-hours { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
@media (max-width: 719px) { .hero-info .hi-hours span { flex-basis: 100%; } }  /* 定休日は次の行に固定(書体の幅で折り返しが変わらない) */
.hi-hours strong { font-size: 22px; color: var(--d); }
.hi-sta { margin: 2px 0 0; color: var(--muted); }
.tel-num { font-weight: 700; }

/* おじぎのチベママ(K2)。動き抑制・JS なしの既定は「深いおじぎ+吹き出し」の静止画 */
.greeter { position: absolute; right: 4px; bottom: 4px; width: clamp(100px, 34vw, 200px); }
@media (max-width: 359px) { .greeter { width: 30vw; } .h1-name { font-size: 13px; } }
.g-body { position: relative; aspect-ratio: 1; }
.g-body img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.g-body img.g-b2 { opacity: 1; }
/* 吹き出しは頭の上(キャッチの文字にかぶらないように) */
.g-bubble { position: absolute; z-index: 2; right: 0; bottom: 104%; margin: 0; white-space: nowrap; background: #fff; color: var(--ink); border: 2px solid var(--d);
  border-radius: 16px; padding: 2px 12px; font: 400 clamp(15px, 4.2vw, 22px)/1.5 var(--brush); box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }
.g-bubble::after { content: ""; position: absolute; right: 22%; bottom: -14px; border: 7px solid transparent; border-top-color: var(--d); }
/* おじぎは 5 コマの画像がそろってから始める(site.js が .go を付ける)。そろう前に始めると、遅い回線では途中のコマが
   届かないまま進み、最後のコマ(手を前で組んだ姿)だけが見えて「止まっている」ように見えた(2026-10-13 依頼者の指摘、原因は実装ログ)。
   そろうまでは隠す(.wait)。JS が動かない時は 6 秒後に深いおじぎの静止画を出す */
@media (prefers-reduced-motion: no-preference) {
  .greeter.wait { animation: g-show .01s 6s both; }
  .greeter.go .g-body img.g-w1 { animation: gw1 3s steps(1, end) .2s both; }
  .greeter.go .g-body img.g-w2 { animation: gw2 3s steps(1, end) .2s both; }
  .greeter.go .g-body img.g-b1 { animation: gb1 3s steps(1, end) .2s both; }
  .greeter.go .g-body img.g-b2 { animation: gb2 3s steps(1, end) .2s both; }
  .greeter.go .g-body img.g-up { animation: gup 3s steps(1, end) .2s both; }
  .greeter.go .g-bubble { animation: gbub 3s ease .2s both; }
}
@keyframes g-show { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@keyframes gw1 { 0% { opacity: 1 } 12% { opacity: 0 } 24% { opacity: 1 } 36%, 100% { opacity: 0 } }
@keyframes gw2 { 0% { opacity: 0 } 12% { opacity: 1 } 24% { opacity: 0 } 36% { opacity: 1 } 48%, 100% { opacity: 0 } }
@keyframes gb1 { 0% { opacity: 0 } 48% { opacity: 1 } 58%, 100% { opacity: 0 } }
@keyframes gb2 { 0% { opacity: 0 } 58% { opacity: 1 } 84%, 100% { opacity: 0 } }
@keyframes gup { 0% { opacity: 0 } 84%, 100% { opacity: 1 } }
@keyframes gbub { 0%, 44% { opacity: 0; transform: translateY(6px) scale(.85) } 56%, 100% { opacity: 1; transform: none } }

/* ---------------- セクション共通 */
.sec { --bg: var(--cream); background: var(--bg); padding: 56px var(--gut); }
/* 画面の外のセクションは近づくまで組まない(最初の表示を軽くし、見出しの書体も後から読む) */
.sec { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.sec:nth-of-type(odd) { --bg: var(--paper); }
.sec > * { max-width: var(--cw); margin-left: auto; margin-right: auto; }
.sec-head { margin-bottom: 22px; }
/* 見出しの札(K1 朱の垂れ幕。下の切れ目で暖簾に見せる) */
.tag { position: relative; display: table; margin: 0 0 10px; }
.tag span { display: block; background: var(--o); color: var(--ink); padding: 4px 18px 14px; font: 400 18px/1.4 var(--brush); }
.l-ko .tag span { font-size: 27px; line-height: 1.2; padding-top: 6px; }
.tag::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  background: linear-gradient(90deg, transparent calc(33.3% - 1.5px), var(--bg) calc(33.3% - 1.5px) calc(33.3% + 1.5px), transparent calc(33.3% + 1.5px) calc(66.6% - 1.5px), var(--bg) calc(66.6% - 1.5px) calc(66.6% + 1.5px), transparent calc(66.6% + 1.5px)); }
.sec-head h2 { margin: 0; font-size: clamp(26px, 6.6vw, 36px); line-height: 1.45; text-wrap: balance; }
.l-ko .sec-head h2 { font-size: clamp(34px, 9.2vw, 50px); line-height: 1.2; }
.lead { margin: 10px 0 0; }
/* 長い段落(お店について・チベママのひとこと・FAQ の答え)は、本文の箱(960px)の中で 1 行 40 字前後(約 720px)まで(フェーズ 5 #12) */
.about-txt p, .greet p, .qa p { max-width: 45em; }
.note-img { margin: 6px 0 0; font-size: 16px; color: var(--muted); }
/* セクションの最後のボタン(メニューを見る など)は、スライドの矢印と点と同じ中央線に置く(フェーズ 5 #13) */
.more { margin-top: 22px; text-align: center; }
/* スマホのボタンの組は、幅いっぱいに縦に並べる(中央線・高さ 48px・角丸・間 10px をそろえる。文字の長さで幅がばらばらにならない) */
@media (max-width: 719px) {
  .btns { flex-direction: column; align-items: stretch; }
  .btns > .btn, .more > .btn { width: 100%; }
}

/* ---------------- おすすめ 5 品のスライド(K4) */
.slider { position: relative; max-width: none; }
/* カードの左端は本文の左端(上の当店自慢の札)と同じ線。見切れは右だけ(フェーズ 5 #5 の具体例) */
.track { display: flex; gap: 14px; margin: 0 calc(-1 * var(--gut)); padding: 4px var(--gut) 10px; scroll-padding-inline: var(--gut); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 86%; scroll-snap-align: start; background: var(--paper); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(42, 26, 18, .12); }
.s-fig { margin: 0; }
.s-img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.s-fig .note-img { padding: 0 16px; }
.s-txt { padding: 8px 16px 20px; }
.badge { display: inline-block; background: var(--d); color: #fff; font-weight: 700; font-size: 14px; padding: 0 10px; border-radius: 4px; }
.s-name { margin: 4px 0 0; font-size: 28px; line-height: 1.4; }
.l-ko .s-name { font-size: 34px; }
.s-sub { font: 400 15px var(--sans); color: var(--muted); margin-left: .3em; }
.s-price { margin: 2px 0 0; font-size: 22px; font-weight: 700; color: var(--d); }
.s-price small { color: var(--ink); font-weight: 400; }
.s-desc { margin: 6px 0 0; }
.s-ctrl { display: flex; align-items: center; justify-content: center; gap: 0; margin: 10px auto 0; }
.s-ctrl > button, .dot { flex: 0 0 auto; }
.s-ctrl button { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; color: var(--d); width: 44px; height: 44px; display: grid; place-items: center; font: 700 28px/1 var(--sans); border-radius: 50%; }
.s-prev, .s-next { border: 2px solid var(--d) !important; background: var(--paper) !important; }
.dots { display: flex; justify-content: center; margin: 0 4px; }  /* 矢印と点、点と点の間がそろって見えるように */
.dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--d); }
.dot[aria-current="true"]::before { background: var(--d); }
@media (min-width: 720px) { .slide { flex-basis: calc(50% - 30px); } }
@media (min-width: 1100px) { .slider { max-width: var(--cw); } .track { margin: 0; padding: 4px 0 10px; scroll-padding-inline: 0; } .slide { flex-basis: calc(50% - 40px); } }

/* ---------------- 店内の写真 */
.ph-list { display: flex; gap: 12px; margin: 0 calc(-1 * var(--gut)); padding: 2px var(--gut) 12px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; align-items: flex-start; max-width: none; }
.ph-list > li { flex: 0 0 72%; max-width: 300px; scroll-snap-align: start; }
.ph-list figure { position: relative; margin: 0; }
/* タイルは全部同じ 3:4(写真の下端とラベルの行をそろえる。依頼者の最終確認) */
.ph-list img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; }
/* 説明は写真の左下に重ねた札(フェーズ 5 #31): 生成りの帯+筆文字、左端に朱の縦線(目次・店のしるしと同じ語彙)、番号 01〜。
   1 行に固定して全部の札の高さをそろえる。写真の下の行は無いので、帯の高さは写真だけで決まる */
.ph-tag { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: baseline; gap: 7px; max-width: calc(100% - 16px); margin: 0;
  padding: 2px 10px 2px 8px; background: rgba(255, 248, 239, .95); border-left: 4px solid var(--d); border-radius: 2px 6px 6px 2px;
  color: var(--ink); font: 400 clamp(13px, 3.9vw, 15px)/1.6 var(--brush); white-space: nowrap; box-shadow: 0 2px 8px rgba(42, 26, 18, .22); }
.ph-tag .ph-no { font-size: 11px; line-height: 1; color: var(--d); letter-spacing: .08em; }
.ph-tag .brush { overflow: hidden; text-overflow: clip; }  /* 省略記号「…」は筆文字の -a に無く、出すと -b(約 200KB)を読む。320 幅でも収まる字の大きさにしてある */
@media (min-width: 600px) { .ph-tag { left: 10px; bottom: 10px; padding: 3px 12px 3px 10px; font-size: 17px; } .ph-tag .ph-no { font-size: 12px; } }
/* 「店外、店内の雰囲気です。」は写真の帯の上に筆文字で小さく */
.ph-note { margin: 0 0 10px; font-size: 15px; letter-spacing: .04em; }
/* 開業の日の合成(4:3)は 3:4 の枠で上下を切らずに見せ、左右を切る。絵の 30% の位置から 56% の幅(扉・看板・チベママ・祝い花) */
.scene { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px; }
.scene-in { position: absolute; top: 0; bottom: 0; left: -53.33%; aspect-ratio: 4 / 3; }
.scene-in img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.scene .mascot { position: absolute; left: 46.25%; top: 49.8%; width: 32.25%; height: auto; aspect-ratio: 1; border-radius: 0; }
@media (min-width: 1100px) { .ph-list { max-width: var(--cw); margin: 0 auto; padding: 2px 0 12px; } }

/* ---------------- お品書き(全品) */
.oshina { display: grid; gap: 10px; }
.mn-cat { background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--o); border-radius: 8px; }
.mn-cat summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 6px 16px; cursor: pointer; list-style: none; }
.mn-cat summary::-webkit-details-marker { display: none; }
.mn-cat summary .brush { font-size: 23px; }
.l-ko .mn-cat summary .brush { font-size: 28px; }
.mn-cat summary small { color: var(--muted); display: flex; align-items: center; gap: 8px; flex: 0 0 auto; white-space: nowrap; }
.mn-cat summary small::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--d); border-bottom: 2px solid var(--d); transform: rotate(45deg); margin-top: -4px; }
.mn-cat[open] summary small::after { transform: rotate(225deg); margin-top: 4px; }
.mn-list { list-style: none; margin: 0; padding: 0 16px 12px; }
.mn { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.pp { display: block; white-space: nowrap; }
.mn-p { white-space: nowrap; font-weight: 700; color: var(--d); text-align: right; }
.mn-sub { margin-top: 10px; font-weight: 700; color: var(--muted); font-size: 15px; }
.mn-note { margin-top: 10px; font-size: 15px; }
.tax { margin-top: 14px; }

/* ---------------- お店について・チベママ紹介 */
.about-in { display: grid; gap: 20px; }
.about-txt p { margin: 0 0 12px; }
/* 店のしるし(フェーズ 5 #16): 筆文字の小さな見出し語(席・支払い・予約)と値を、筆の縦線で区切って横一列。スマホは縦に 3 行。
   丸いチップ・薄橙の塗りは使わない(丸い UI を避ける方針) */
.facts { display: grid; gap: 14px; margin: 18px 0 0; padding: 0; }
.fact { position: relative; margin: 0; padding: 2px 0 2px 18px; }
.fact::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px;
  background: linear-gradient(var(--o), var(--o) 62%, rgba(229, 122, 76, 0)); }
.fact dt { margin: 0; color: var(--d); font-size: 17px; line-height: 1.4; letter-spacing: .12em; }
.l-ko .fact dt { font-size: 21px; letter-spacing: .02em; }  /* ハングルの筆文字は細いので大きめに */
.fact dd { margin: 2px 0 0; font-weight: 700; line-height: 1.6; }
@media (min-width: 720px) { .facts { grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; } }
.about-img { display: grid; gap: 12px; }
.about-img figure { margin: 0; }
.about-img img { width: 100%; border-radius: 10px; }
@media (min-width: 720px) { .about-in { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.mama-in { display: grid; gap: 16px; align-items: start; }
.mama-fig { margin: 0 auto; width: 200px; text-align: center; }
.greet { margin: 0; background: var(--paper); border-radius: 14px; padding: 18px 20px; border: 2px solid #F4C9B4; position: relative; }
.greet p { margin: 0 0 10px; }
.greet .sign { text-align: right; font-family: var(--brush); font-size: 22px; margin: 0; }
.cert { margin: 10px 0 0; font-size: 15px; color: var(--muted); }
@media (min-width: 720px) { .mama-in { grid-template-columns: 220px 1fr; } .mama-fig { width: 220px; } }

/* ---------------- FAQ・口コミ */
.faq-list { display: grid; gap: 8px; }
.qa { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.qa summary { min-height: 52px; padding: 12px 16px 12px 48px; cursor: pointer; font-weight: 700; position: relative; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: "Q"; position: absolute; left: 14px; top: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--o); color: var(--ink); display: grid; place-items: center; font-size: 15px; }
.qa p { margin: 0; padding: 0 16px 14px 48px; }
.faq-ask { margin: 14px 0 0; }  /* FAQ の下の「わからないことは電話で」の 1 行(文章修正方針 No.8) */
.faq-ask a { display: inline-block; padding: 3px 0; white-space: nowrap; font-weight: 700; }  /* 押せる高さ 24px 以上 */
.reviews { margin-top: 26px; }
.reviews h3 { margin: 0; font-size: 22px; }

/* ---------------- アクセス */
.access-in { display: grid; gap: 18px; }
.map iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 10px; background: #eee; }
.info { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.info dt { font-weight: 700; color: var(--d); }
.info dd { margin: 0; }
.info small { color: var(--muted); }
@media (min-width: 720px) { .access-in { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---------------- SNS(お孫さんの 3 コマ) */
.sns-in { display: grid; gap: 16px; justify-items: center; text-align: center; }
.koma { position: relative; width: min(300px, 80vw); aspect-ratio: 1; }
.k { position: absolute; inset: 0; opacity: 0; }
.k.k1 { opacity: 1; }
.k img { width: 100%; height: 100%; }
.k-say { position: absolute; left: 50%; top: 0; transform: translateX(-50%); margin: 0; white-space: nowrap; background: #fff; border: 2px solid var(--d); border-radius: 16px; padding: 2px 14px; font: 400 21px/1.5 var(--brush); }
.l-ko .k-say { font-size: 25px; }
/* フッターのお見送り: 「ありがとう」→「またね」を見えた時に 1 回だけ(3 秒)。既定(動き抑制・JS なし)は「またね」の静止 */
.ft-koma { position: relative; flex: 0 0 auto; width: 170px; aspect-ratio: 1; margin: 30px 0 0 auto; }
.ft-koma .k2 { opacity: 0; }
.ft-koma .k3 { opacity: 1; }
/* 吹き出しはコマの上の外に置く(#32: ペア v6 は頭が高く、コマの内側の上端に置くと髪に 13〜26px かぶった)。
   コマの上端から髪までは「ありがとう」で約 8px、「またね」で約 17px(170px 角)なので、吹き出しの下端をコマの上端にそろえる */
.ft-koma .k-say { top: auto; bottom: 100%; color: var(--ink); font-size: 17px; padding: 0 10px; }
.l-ko .ft-koma .k-say { font-size: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .ft-koma.ready .k2 { opacity: 1; }
  .ft-koma.ready .k3 { opacity: 0; }
  .ft-koma.play .k2 { animation: fk2 3s linear both; }
  .ft-koma.play .k3 { animation: fk3 3s linear both; }
}
@keyframes fk2 { 0%, 44% { opacity: 1 } 56%, 100% { opacity: 0 } }
@keyframes fk3 { 0%, 44% { opacity: 0 } 56%, 100% { opacity: 1 } }
@media (max-width: 719px) { .ft-in { flex-wrap: wrap; } .ft-koma { margin: 24px auto 0; } }  /* 上に出した吹き出し(高さ約 34px)が上の行にかからないように */
.sns-btns { justify-content: center; align-items: center; flex-direction: column; }
.btn-ig { min-height: 60px; padding: 8px 28px; font-size: 19px; color: #fff; border: 0; background: linear-gradient(45deg, #A3368A, #6E2FA0); }
.btn-ig { flex-direction: column; gap: 0; line-height: 1.35; }
.btn-ig .ig-mark { display: none; }
.btn-ig small { font-weight: 400; font-size: 14px; }
.ig-mark { width: 22px; height: 22px; border: 2.5px solid #fff; border-radius: 7px; position: relative; }
.ig-mark::after { content: ""; position: absolute; inset: 4px; border: 2.5px solid #fff; border-radius: 50%; }
.btn-x { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 15px; color: var(--muted); }

/* ---------------- メニューページ */
.menu-top { padding: 34px var(--gut) 10px; background: var(--paper); }
.menu-top > * { max-width: var(--cw); margin-left: auto; margin-right: auto; }
.menu-h1 { margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.menu-h1 .brush { font-size: 40px; }
.l-ko .menu-h1 .brush { font-size: 52px; line-height: 1.1; }
.menu-h1 small { font: 700 15px var(--sans); color: var(--muted); }
.intro { margin: 8px auto 0; }
/* 分類へ飛ぶ見出し帯(フェーズ 5 #20): 丸い枠のチップをやめ、筆文字の分類名と小さな品数を、筆の縦線(朱がかすれて消える線。
   お店についての「店のしるし」と同じ)で区切って横一列。スマホは横にめくれる帯(左端は本文の線、見切れは右だけ)。指した所に朱の傍線 */
.jump { display: flex; gap: 0; margin: 16px calc(-1 * var(--gut)) 0; padding: 2px var(--gut) 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.jump::-webkit-scrollbar { display: none; }
.jump a { position: relative; flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 8px 18px; color: var(--ink); text-decoration: none; }
.jump a:first-child { padding-left: 0; }
.jump a + a::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px;
  background: linear-gradient(var(--o), var(--o) 62%, rgba(229, 122, 76, 0)); }
.jump .brush { font-size: 22px; line-height: 1.4; text-decoration: underline 2px transparent; text-underline-offset: .3em; }
.l-ko .jump .brush { font-size: 26px; }
.jump small { color: var(--muted); font-size: 14px; white-space: nowrap; }
.jump a:hover .brush, .jump a:focus-visible .brush { text-decoration-color: var(--o); }
/* PC(1100px 以上)は 1 行に並べる(折り返すと 2 行目の頭に区切りの線が残るため。分類名は途中で折らない)。欄の中は分類名の下に品数。
   それより狭い画面はスマホと同じ横にめくれる帯 */
.jump .brush { white-space: nowrap; }
@media (min-width: 1100px) {
  .jump { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: start; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; overflow: visible; }  /* 本文と同じ 960px の中央寄せ(F1) */
  .jump a { flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 14px; }
  .jump .brush { font-size: 20px; }
  .l-ko .jump .brush { font-size: 23px; line-height: 1.25; }
}
.cat-h { margin: 0 auto 14px; font-size: 32px; border-bottom: 4px solid var(--o); padding-bottom: 4px; }
.l-ko .cat-h { font-size: 38px; }
.cat-img { margin: 0 auto 16px; }
.cat-img img { width: 100%; border-radius: 10px; }
.items { display: grid; gap: 0; }
.it { padding: 12px 0; border-bottom: 1px dashed var(--line); display: grid; grid-template-columns: 1fr auto; gap: 0 12px; }
.it-name { margin: 0; font: 700 18px/1.5 var(--sans); }
h3.it-name { font: 400 26px/1.4 var(--brush); }
.l-ko h3.it-name { font-size: 30px; }
.it-sub { display: block; font: 400 14px/1.5 var(--sans); color: var(--muted); }
.l-ko .it-sub[lang="ja"] { font-family: "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif; }
.it-price { margin: 0; font-weight: 700; color: var(--d); text-align: right; white-space: nowrap; }
.it-price small { display: block; color: var(--ink); font-weight: 400; }
.it-desc { grid-column: 1 / -1; margin: 4px 0 0; }
.grp { margin: 18px 0 2px; font-size: 22px; color: var(--muted); }
.l-ko .grp { font-size: 26px; }
.alcohol { margin: 14px 0 0; font-weight: 700; }
.menu-end .hi-hours { margin-top: 10px; }

/* ---------------- 404 */
.nf { text-align: center; }
.nf-fig { width: 200px; margin: 0 auto; position: relative; }
.nf-say { position: relative; display: inline-block; margin: 2px 0 0; padding: 2px 16px; background: #fff; border: 2px solid var(--d); border-radius: 16px; font-family: var(--brush); font-size: 20px; line-height: 1.5; }
.nf-say::before { content: ""; position: absolute; left: 50%; top: -14px; margin-left: -7px; border: 7px solid transparent; border-bottom-color: var(--d); }
.nf .btns { justify-content: center; }
.nf-ko { margin-top: 26px; font-family: var(--sans-ko); }

/* ---------------- フッター */
.site-footer { background: var(--ink); color: #F6EBE3; padding: 36px var(--gut) 40px; }
.ft-in { max-width: var(--cw); margin: 0 auto; display: flex; gap: 20px; align-items: flex-start; }
.ft-logo { flex: 0 0 auto; }
.ft-logo .logo-img { height: 132px; width: auto; }
.ft-info p { margin: 0 0 4px; }
.ft-name { font-weight: 700; font-size: 18px; }
.site-footer a { color: #FFD3BE; }
.ft-info a { display: inline-block; min-height: 26px; }
.ft-info a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }  /* 電話は指で押す所なので 44px */
.ft-sns a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin-right: 12px; }
.ft-priv { margin: 10px 0; padding-left: 1.2em; font-size: 14px; color: #E2D3C8; }
.ft-copy { font-size: 14px; color: #E2D3C8; }

/* ---------------- スマホ下の固定バー */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1.3fr 1fr 1fr; background: var(--paper); border-top: 3px solid var(--o); padding-bottom: env(safe-area-inset-bottom); }
.bar a { display: flex; align-items: center; justify-content: center; min-height: 54px; font-weight: 700; text-decoration: none; color: var(--d); }
.bar a + a { border-left: 1px solid var(--line); }
.bar .bar-tel { background: var(--d); color: #fff; }
body { padding-bottom: 58px; }
@media (min-width: 1100px) { .bar { display: none; } body { padding-bottom: 0; } }
body.p-404 { padding-bottom: 0; }  /* 404 には固定バーが無い */

/* ---------------- 右のチベママ(K3。PC は右端の縦バー、スマホは右下の小さな枠) */
.side-mama { position: fixed; z-index: 35; right: 6px; bottom: calc(62px + env(safe-area-inset-bottom)); pointer-events: none; }
.sm-box { position: relative; display: flex; align-items: flex-end; gap: 2px; pointer-events: auto; }
.sm-say { order: 0; margin: 0 0 46px; max-width: min(58vw, 240px); background: #fff; border: 2px solid var(--d); border-radius: 14px; padding: 4px 12px; font-size: 15px; line-height: 1.55; box-shadow: 0 3px 10px rgba(0, 0, 0, .16); position: relative; }
.sm-say { text-wrap: balance; }
.sm-say:empty { display: none; }
.sm-say::after { content: ""; position: absolute; right: -9px; bottom: 12px; border: 6px solid transparent; border-left-color: var(--d); }
.sm-fig { order: 1; width: 86px; height: 86px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2)); }
.sm-close { position: absolute; right: -2px; top: -6px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--d); background: #fff; color: var(--d); font: 700 18px/1 var(--sans); cursor: pointer; display: grid; place-items: center; padding: 0; }
.sm-open { pointer-events: auto; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--d); background: #fff; font-size: 20px; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, .16); }
.side-mama.is-closed .sm-box { display: none; }
.side-mama.is-away .sm-box { opacity: 0; visibility: hidden; transform: translateY(12px); }
.sm-fig.swap { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: no-preference) {
  .sm-box { transition: opacity .3s, transform .3s, visibility .3s; }
  .sm-fig { transition: opacity .18s, transform .18s; }
}
.side-mama[data-mode="hide"] .sm-box, .side-mama[data-mode="hide"] .sm-open { opacity: 0; visibility: hidden; }
@media (min-width: 1100px) {
  .side-mama { position: relative; right: auto; bottom: auto; z-index: 1; pointer-events: auto; border-left: 1px solid var(--line); background: linear-gradient(var(--paper), var(--cream)); }
  .sm-box { position: sticky; top: 0; flex-direction: column; align-items: center; padding: 0 14px 20px; }
  .sm-box { padding-top: 32px; }  /* 暖簾の四角は外した(依頼者 2026-10-13「ださい」)。列の設計は筋が決まってから */
  .sm-say { margin: 0 0 12px; max-width: none; width: 100%; font-size: 16px; padding: 8px 12px; }
  .sm-say::after { right: auto; left: 50%; bottom: -12px; margin-left: -6px; border-left-color: transparent; border-top-color: var(--d); }
  .sm-fig { width: 180px; height: 180px; }
  .sm-close { right: 8px; top: 26px; }
  .side-mama.is-away .sm-box { opacity: 1; visibility: visible; transform: none; }
  .sm-open { position: sticky; top: 70px; margin: 70px auto 0; display: block; }
}
/* ================= フェーズ 4: 案 5「チベママの言葉が案内する」(計画書 §2b・§2d)。body.v4 のページだけ */
/* 入口(フェーズ 5 #1・#15、依頼者の決定: 新規の玄関の絵): 玄関の絵を画面いっぱいに出し(0.3 秒)、扉の真ん中へゆっくりズーム(1.2 秒)→
   格子の扉が右の壁へ引き込まれて開く(0.6 秒、奥に店内)→ 店内へ少し入る(0.9 秒)→ ヒーローへクロスフェード(2.7〜3.2 秒)。合計 3.2 秒。
   消え終わったら site.js が取り除く。扉の奥の店内の絵(intro.json の inner)があれば扉の下に重ねる。
   横長・縦長の画面で組を替える(組の寸法・扉の位置は build.py が src/data/intro.json から足す)。絵がそろうまで site.js が止めて待つ。
   タップ・キーで飛ばせる。動き抑制・「動きを止める」中は出さない(すぐヒーロー) */
.entry, .en-set { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .entry { position: fixed; inset: 0; z-index: 60; display: block; overflow: hidden; background: #2A1A12; cursor: pointer;
    animation: en-out .5s ease-in-out 2.7s both; }
  .en-set { position: absolute; inset: 0; place-content: center; }
  .en-stage { position: relative; animation: en-zoom 2.7s linear .3s both; }
  .en-open { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
  .en-door { position: absolute; overflow: hidden; }
  .en-door img { width: 100%; height: 100%; max-width: none; animation: en-door .6s cubic-bezier(.6, 0, .3, 1) 1.5s both; }
  .en-inner img { object-fit: cover; animation: none; }
  .entry.gone { animation: none; opacity: 0; transition: opacity .2s; pointer-events: none; }
  .entry.hold { visibility: hidden; }
}
/* ズーム: 0.3〜1.5 秒で扉へ寄り(ease)、扉が開く間(〜2.1 秒)はほぼ止め、2.1〜3.0 秒で店内へ少し入る(扉が画面いっぱいに近づく) */
@keyframes en-zoom {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  44.4% { transform: scale(var(--en-zoom)); animation-timing-function: linear; }
  66.7% { transform: scale(calc(var(--en-zoom) * 1.02)); animation-timing-function: cubic-bezier(.45, 0, .35, 1); }
  100% { transform: scale(calc(var(--en-zoom) * 2.2)); }
}
/* 扉は右から左へ、左の柱の裏へ引き込む(#24)。斜めの扉(PC)は build.py の intro_css が消失点を中心に拡大する別の動きに替える */
@keyframes en-door { to { transform: translateX(-101%); } }
@keyframes en-out { to { opacity: 0; } }
/* 出迎えのチベママは写真に重ねない(依頼者 2026-10-13)。スマホは写真の下・営業時間の上、PC は営業時間の右。
   戸が開き終わり、5 コマがそろってからおじぎ(site.js)。吹き出し「おかえり」も写真の外 */
/* 幅(フェーズ 5 #5): 720px 以上は、写真と営業時間の組みを本文と同じ最大幅・左右の余白に置く(当店自慢の札などと縁がそろう) */
@media (min-width: 720px) {
  .v4.p-top .hero { padding: var(--gut) var(--gut) 0; }
  .v4 .hero-media { max-width: var(--cw); margin: 0 auto; border-radius: 14px; }
  .v4 .hero .hero-note { max-width: var(--cw); margin: 6px auto 0; }
  .v4 .hero-foot { max-width: var(--cw); margin: 0 auto; }
}
/* 写真は少し低くして、出迎えのチベママと吹き出しが最初の画面に入るようにする */
.v4 .hero-media { height: min(56svh, 520px); min-height: 330px; }
@media (min-width: 720px) { .v4 .hero-media { height: min(62svh, 560px); min-height: 420px; } }
/* 営業時間・行き方・ボタンとおじぎのチベママを 1 つの組みに並べる。スマホも PC も、チベママは右の列に立ち、
   吹き出しは頭の上。ボタンはスマホでは 2 列ぶち抜き、PC では左の列 */
.v4 .hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 10px var(--gut) 24px; }
.v4 .hero-info { display: contents; }
.v4 .hero-info .hi-hours { grid-column: 1; grid-row: 1; align-self: end; }
/* スマホの行き方は 2 列ぶち抜き(チベママの横の狭い列に入れると、書体の読み込みで折り返しが変わり下のボタンがずれる: CLS) */
.v4 .hero-info .hi-sta { grid-column: 1 / -1; grid-row: 2; align-self: start; margin-top: 8px; }
.v4 .hero-info .btns { grid-column: 1 / -1; grid-row: 3; margin-top: 14px; }
/* チベママの列の幅は、吹き出しの字の幅(書体の読み込みで変わる)に任せず決めておく */
.v4 .greeter { position: relative; right: auto; bottom: auto; grid-column: 2; grid-row: 1; align-self: end;
  display: flex; flex-direction: column; align-items: center; width: clamp(108px, 30vw, 124px); margin: 0; }
.v4 .g-body { flex: 0 0 auto; width: clamp(88px, 27vw, 120px); margin-top: 2px; }
.v4 .g-bubble { position: relative; right: auto; bottom: auto; font-size: clamp(18px, 5vw, 24px); padding: 1px 14px; }
.v4 .g-bubble::after { right: auto; left: 50%; margin-left: -7px; }
@media (min-width: 720px) {
  .v4 .hero-foot { column-gap: 32px; padding: 14px 0 26px; }
  .v4 .hero-info .hi-sta { grid-column: 1; margin-top: 4px; }
  .v4 .hero-info .btns { grid-column: 1; margin-top: 16px; }
  .v4 .greeter { grid-row: 1 / span 3; width: 144px; }
  .v4 .g-body { width: 132px; }
}
/* おじぎの始まりは、戸が開き切ってから一呼吸おいて(site.js)、0.35 秒で浮かび上がる */
@media (prefers-reduced-motion: no-preference) {
  .v4 .greeter.go { animation: g-in .35s ease-out both; }
}
@keyframes g-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 見出しの下のチベママの言葉と、その横の静止のチベママ(右の列にはチベママを置かない) */
/* 左右の余白は .sec > * の中央寄せに任せる(margin の一括指定で左に寄っていた) */
.voice { display: flex; align-items: center; gap: 14px; margin-top: 18px; margin-bottom: 6px; }
.v-fig { width: 84px; height: 84px; }
/* 引用の印は、上から下へかすれて消える筆の縦線(枠線の棒にしない) */
.v-q { position: relative; flex: 1; margin: 0; padding: 4px 0 4px 20px; }
.v-q::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: linear-gradient(var(--o), var(--o) 62%, rgba(229, 122, 76, 0)); }
.v-q > p:first-child { margin: 0; font-size: clamp(18px, 4.9vw, 22px); line-height: 1.75; text-wrap: pretty; }
.v-sign { margin: 6px 0 0; color: var(--d); font-size: 17px; line-height: 1.4; letter-spacing: .12em; }
.v-say { align-items: center; }
.v-bub { position: relative; margin: 0; padding: 6px 16px; background: #fff; border: 2px solid var(--d); border-radius: 14px; font-weight: 700; }
.v-bub::before { content: ""; position: absolute; left: -14px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-right-color: var(--d); }
@media (min-width: 720px) { .voice { gap: 18px; } .v-fig { width: 104px; height: 104px; } }

/* 当店自慢の先頭: サムギョプサル 1 枚と「この 4 つは譲らへん」 */
.feat { display: grid; margin: 18px auto 26px; background: var(--paper); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(42, 26, 18, .12); }
.feat-fig { margin: 0; }
.feat-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.feat-fig .note-img { padding: 0 16px; }
.feat-txt { padding: 4px 16px 20px; }
.feat .voice { margin-top: 10px; }
/* 4 つの言葉は 1 行に 1 つ(折り返しで「・」だけ残らないように) */
.four { margin: 0; padding: 0; list-style: none; }
.four li { display: flex; align-items: center; gap: 10px; font-size: clamp(24px, 7vw, 32px); line-height: 1.4; }
.four li::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--o); }
.four-tail { margin: 2px 0 0; font-size: clamp(20px, 5.4vw, 24px); color: var(--d); text-wrap: balance; }
/* 4 語の横のママは、4 語のかたまりと同じくらいの高さに(フェーズ 5 #9、今までの約 1.8〜2 倍) */
.feat .v-four { align-items: flex-start; }
.feat .v-fig { width: clamp(96px, 30vw, 128px); height: auto; aspect-ratio: 1; margin-top: 6px; }
/* スマホは札の幅が狭いので、絵と 4 語を横に並べ、「この 4 つは譲らへん」と署名は札の幅いっぱいに置く(大きい絵の横で細切れに折り返さない)。
   筆の縦線は 4 語の横だけ */
@media (max-width: 719px) {
  .feat .v-four { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .feat .v-four .v-q { display: contents; }
  .feat .v-four .v-q::before { content: none; }
  .feat .v-four .four { grid-column: 2; padding: 4px 0 4px 16px;
    background: linear-gradient(var(--o), var(--o) 62%, rgba(229, 122, 76, 0)) 0 6px / 3px calc(100% - 12px) no-repeat; }
  .feat .v-four .four-tail, .feat .v-four .v-sign { grid-column: 1 / -1; }
  .feat .v-four .four-tail { margin-top: 10px; }
}
.feat-name { margin: 12px 0 0; }
@media (min-width: 720px) {
  .feat { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .feat-fig { align-self: stretch; }
  .feat-img { height: 100%; aspect-ratio: auto; min-height: 320px; }
  .feat-fig { display: flex; flex-direction: column; }
  .feat-fig picture + .note-img, .feat-fig .note-img { padding-bottom: 8px; }
  .feat-txt { padding: 22px 22px 24px; }
  /* 「この 4 つは譲らへん」は 1 行に保つ */
  .feat .voice { gap: 14px; }
  .feat .v-fig { width: 160px; height: 160px; margin-top: 0; }
  .feat .four-tail { font-size: 21px; white-space: nowrap; }
}

/* 最後: お見送りのおじぎ(静止) */
.farewell { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; }
.fw-fig { width: 140px; height: 140px; }
.fw-say { position: relative; margin: 0; padding: 2px 14px; background: #fff; border: 2px solid var(--d); border-radius: 16px; font-size: 22px; line-height: 1.5; }
.fw-say::after { content: ""; position: absolute; right: -14px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left-color: var(--d); }

/* 右の列(PC): 縦書きの筆文字の目次と、今いるセクションの右に朱の 1 本線。チベママ・朱の四角・丸い UI は置かない。
   本の目次のように右から左へ読む。スマホでは出さない(浮かぶのは下の固定バーだけ) */
.side-toc { display: none; }
@media (min-width: 1100px) {
  body.v4 { --side-w: 220px; }
  .side-toc { display: block; border-left: 1px solid var(--line); }
  .st-in { position: sticky; top: 0; }
  .toc { position: relative; padding: 46px 10px 32px; }
  .toc ol { display: flex; flex-direction: row-reverse; justify-content: space-evenly; align-items: flex-start; gap: 0; margin: 0; padding: 0; list-style: none; }
  .toc a { display: block; writing-mode: vertical-rl; min-width: 24px; padding: 8px 3px; color: var(--muted); font-size: 17px; line-height: 1; letter-spacing: .22em; text-decoration: none; }
  .toc a[href="#sns"] { text-orientation: upright; letter-spacing: .06em; }  /* 英字は横に寝かせず立てる */
  .l-ko .toc a { letter-spacing: .1em; }  /* ハングルは字の塊が大きいので、字間を広げるとばらけて見える */
  .toc a[aria-current="true"] { color: var(--d); }
  @media (hover: hover) { .toc a:hover { color: var(--d); } }
  .toc-mark { position: absolute; left: 0; top: 0; width: 2px; height: 100px; background: var(--o); transform-origin: 0 0; opacity: 0; pointer-events: none; }
  .toc-mark.on { opacity: 1; }
  /* しおり(フェーズ 5 #7 イ): 今いる項目の朱の線の上端に、チベママの小さな顔。線と一緒に transform だけで動く */
  .toc-face { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--o); background: var(--cream);
    box-shadow: 0 2px 5px rgba(42, 26, 18, .25); opacity: 0; pointer-events: none; }
  .toc-face.on { opacity: 1; }
  /* 暖簾(フェーズ 5 #7 ア): 竿に掛けた 3 枚の布。真ん中に筆文字のロゴ。布のひだは濃淡、下に影。風でゆっくり揺れる(.mo の時だけ) */
  .noren { position: relative; display: flex; justify-content: center; gap: 3px; height: 172px; padding-top: 8px; margin: 0 14px;
    filter: drop-shadow(0 6px 6px rgba(42, 26, 18, .22)); }
  .nr-rod { position: absolute; left: -8px; right: -8px; top: 2px; height: 8px; border-radius: 4px; z-index: 1;
    background: linear-gradient(#9A6B45, #6B4428); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
  .nr { position: relative; flex: 1; height: 100%; border-radius: 0 0 3px 3px; transform-origin: 50% 0;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .2) 28%, rgba(255, 255, 255, .06) 55%, rgba(0, 0, 0, .16) 82%, rgba(255, 255, 255, .04)),
      linear-gradient(transparent 0 calc(100% - 7px), rgba(0, 0, 0, .25) calc(100% - 7px) calc(100% - 6px), transparent calc(100% - 6px)),
      #3B2416; }
  .nr2 { display: grid; place-items: start center; padding-top: 22px; }
  .nr-logo { height: 100px; width: auto; }
}
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .toc-mark, .toc-face { transition: transform .35s cubic-bezier(.3, .7, .3, 1), opacity .3s; }
  .mo .nr1 { animation: nr-wind 4.6s ease-in-out -1.2s infinite; }
  .mo .nr2 { animation: nr-wind 5.2s ease-in-out -2.6s infinite; }
  .mo .nr3 { animation: nr-wind 4.9s ease-in-out infinite; }
}
@keyframes nr-wind { 0%, 100% { transform: rotate(0) skewX(0); } 30% { transform: rotate(1.6deg) skewX(-1.2deg); } 62% { transform: rotate(-.7deg) skewX(.6deg); } }


/* ================= フェーズ 5: キャラの動き(計画書 フェーズ 5 #2・#3・#4) */
/* 常時のごく小さな横揺れ(足もとを軸に ±1.5°)。3 種の周期・位相で、並んだママがそろって揺れないように。
   site.js が body に .mo を付けた時だけ(動き抑制・JS なし・「動きを止める」中は静止)。ヒーローのおじぎ中は揺らさない(.done から) */
.sw1 { --sd: 2.6s; --sdl: -.4s; }
.sw2 { --sd: 3.1s; --sdl: -1.7s; }
.sw3 { --sd: 3.5s; --sdl: -2.6s; }
@media (prefers-reduced-motion: no-preference) {
  .mo .sw, .mo .greeter.done .g-body { transform-origin: 50% 96%; animation: sway var(--sd, 3s) ease-in-out var(--sdl, 0s) infinite alternate; }
  .mo .greeter.done .g-body { --sd: 2.9s; --sdl: 0s; }
}
@keyframes sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
/* 写真もごく小さく揺らす(依頼者「アニメーションではないすべての静止画」): ±0.5°、4.2/5.0/5.8 秒。角の丸い枠の中で切り抜かれる写真(.psz)は
   回すと角に隙間が出るので 3% 大きくする。transform だけなので配置(CLS)は動かない */
.ps1 { --pd: 4.2s; --pdl: -1.1s; }
.ps2 { --pd: 5s; --pdl: -3.3s; }
.ps3 { --pd: 5.8s; --pdl: -.6s; }
@media (prefers-reduced-motion: no-preference) {
  .mo .ps { animation: psway var(--pd, 5s) ease-in-out var(--pdl, 0s) infinite alternate; }
  .mo .psz { animation-name: psway-z; }
}
@keyframes psway { from { transform: rotate(-.5deg); } to { transform: rotate(.5deg); } }
@keyframes psway-z { from { transform: scale(1.03) rotate(-.5deg); } to { transform: scale(1.03) rotate(.5deg); } }
/* 拡大して揺らす写真の枠は、はみ出しを隠す(札の中の写真と文字の境目で、傾いた縁が見えないように)。下の注記は写真より手前 */
.feat-fig, .s-fig { overflow: hidden; }
.feat-fig .note-img, .s-fig .note-img { position: relative; z-index: 1; background: var(--paper); }

/* もう一度(#2): キャラをタップ/クリック/Enter で頭から。ボタンにするのは site.js(role="button"・tabindex・aria-label) */
.rp { display: block; flex: 0 0 auto; line-height: 0; }
.mama-fig .rp { display: inline-block; }
[data-rp][role="button"] { cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) { .rp.hop { animation: hop .55s ease-out; } }
@keyframes hop { 0%, 100% { transform: none; } 30% { transform: translateY(-12px); } 55% { transform: none; } 75% { transform: translateY(-4px); } }
/* 出迎えのやり直しは、浮かび上がり(g-in)をせずにおじぎだけ */
.v4 .greeter.go.again { animation: none; }

/* SNS: 孫の「フォローしてね」(#4)。見えたら 1 回、スマホを見せるように小さく跳ねて傾き、吹き出しがポンと出る。タップでもう一度 */
.koma .k-in { display: block; }
/* 「フォローしてね」の 2 コマ(スマホを見せる → 上げる)。重ねて、見えた時・タップの時に 2 コマ目へ(既定・動き抑制は 1 コマ目) */
.kfs, .kf { display: block; height: 100%; }
.kfs { position: relative; }
.kf2 { position: absolute; inset: 0; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .koma.ready .k-say { opacity: 0; }
  .koma.pop .k1 { animation: k-hop 1.1s ease-out both; transform-origin: 50% 96%; }
  .koma.pop .k-say { animation: k-bub .45s cubic-bezier(.3, 1.7, .5, 1) .5s both; }
  .koma.pop .kf1 { animation: kf-out 1.1s steps(1, end) both; }
  .koma.pop .kf2 { animation: kf-in 1.1s steps(1, end) both; }
}
@keyframes k-hop { 0% { transform: none; } 18% { transform: translateY(-16px) rotate(-6deg); } 38% { transform: translateY(0) rotate(4deg); }
  56% { transform: translateY(-7px) rotate(-2deg); } 76%, 100% { transform: none; } }
@keyframes kf-out { 0%, 34% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes kf-in { 0%, 34% { opacity: 0; } 35%, 100% { opacity: 1; } }
@keyframes k-bub { from { opacity: 0; transform: translateX(-50%) scale(.3); } to { opacity: 1; transform: translateX(-50%) scale(1); } }

@media print { .side-mama, .side-toc, .bar, .greeter, .entry, .mo-btn { display: none; } }

/* src/data/intro.json から(build.py が足す) */
@media (prefers-reduced-motion: no-preference) and (min-aspect-ratio: 1/1) { .en-wide { display: grid; } }
.en-wide .en-stage { width: max(100vw, calc(100vh * 1.6000)); height: max(100vh, calc(100vw * 0.6250)); transform-origin: 41.281% 47.250%; }
.en-wide .en-door { left: 32.812%; top: 12.700%; width: 16.938%; height: 69.100%; }
.en-wide .en-door { clip-path: polygon(0.000% 0.000%, 100.000% 7.815%, 100.000% 90.883%, 0.000% 100.000%); }
.en-wide .en-door img { transform-origin: 590.598% 46.154%; animation-name: en-door-wide; }
@keyframes en-door-wide { to { transform: scale(1.2159); } }
@media (prefers-reduced-motion: no-preference) and (max-aspect-ratio: 999/1000) { .en-mobile { display: grid; } }
.en-mobile .en-stage { width: max(100vw, calc(100vh * 0.5625)); height: max(100vh, calc(100vw * 1.7778)); transform-origin: 56.778% 41.625%; }
.en-mobile .en-door { left: 37.667%; top: 14.562%; width: 38.222%; height: 54.125%; }
.entry { --en-zoom: 1.6; }
