@font-face { font-family: "ItaBrush"; src: url("brush.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "ItaBrush2"; src: url("brush2.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "ItaMaru"; src: url("maru.woff2") format("woff2"); font-display: swap; }
:root { --gold: #C9B691; --ink: #2F2E2E; --red: #e21c21; --pink: #ff6161; --pink2: #fc8b8b; --cream: #f2ebe0;
  --futura: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif; --thin: "Roboto", "Helvetica Neue", sans-serif; --jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; --mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--futura), var(--jp); font-size: 15px; line-height: 1.7; overflow-x: hidden; }
img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } h1,h2,h3,h4,p { margin: 0; font-weight: 400; }
.c { width: min(100% - 32px, 980px); margin-inline: auto; position: relative; }
.center { text-align: center; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.05); } }
/* ---------- header ---------- */
.hd { height: 205px; background: #fff; position: relative; }
.hd .c { height: 100%; }
.hd .logo { position: absolute; left: 2px; top: 44px; width: 404px; }
.hd .line { position: absolute; right: 213px; top: 20px; width: 32px; height: 32px; }
.hd nav { position: absolute; left: 30px; right: 29px; top: 170px; display: flex; justify-content: space-between; }
.hd nav > a, .hd nav .dd > a { position: relative; font-family: var(--futura); font-size: 14px; letter-spacing: .02em; color: var(--gold); white-space: nowrap; padding-bottom: 3px; }
.hd nav > a::after, .hd nav .dd > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .25s ease; }
.hd nav > a:hover, .hd nav .dd:hover > a { color: #a0a09f; }
.hd nav > a:hover::after, .hd nav .dd:hover > a::after, .hd nav a[aria-current="page"]::after { transform: scaleX(1); }
.hd nav a[aria-current="page"] { color: #a0a09f; }
.hd nav .dd { position: relative; }
.hd nav .dd-menu { display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); padding-top: 14px; z-index: 30; }
.hd nav .dd:hover .dd-menu, .hd nav .dd:focus-within .dd-menu { display: block; }
.hd nav .dd-menu .box { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.14); padding: 6px 0; min-width: 150px; }
.hd nav .dd-menu a { display: block; padding: 9px 20px; font-family: var(--futura); font-size: 14px; color: var(--gold); text-align: center; white-space: nowrap; }
.hd nav .dd-menu a:hover { color: #a0a09f; background: #f7f5f0; }
.hd .apply { position: absolute; right: 70px; top: 212px; background: var(--pink); color: #fff; font-family: var(--jp); font-size: 12px; letter-spacing: .1em; padding: 4px 10px; border-radius: 11px; }
.menu-btn { display: none; position: absolute; background: #fff; border: 1px solid #ececec; cursor: pointer; padding: 0; }
.menu-btn span { display: block; background: #d6cbb4; }
.drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; }
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer .bg { position: absolute; inset: 0; background: rgba(0,0,0,.25); opacity: 0; transition: opacity .3s; }
.drawer.is-open .bg { opacity: 1; }
.drawer .panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(92%, 420px); background: #fff; transform: translateX(-100%); transition: transform .35s ease; overflow: auto; padding: 18px 0 40px; }
.drawer.is-open .panel { transform: none; }
.drawer .close { position: absolute; right: 24px; top: 28px; width: 36px; height: 36px; background: #fff; border: 1px solid #ccc; box-shadow: 0 1px 3px rgba(0,0,0,.15); cursor: pointer; padding: 0; }
.drawer .close::before, .drawer .close::after { content: ""; position: absolute; left: 9px; top: 17px; width: 16px; height: 1.5px; background: #333; transform: rotate(45deg); }
.drawer .close::after { transform: rotate(-45deg); }
.drawer nav a { display: block; padding: 15px 36px; font-family: var(--futura); font-size: 16px; color: #4d4d4d; }
.drawer nav a[aria-current="page"] { color: var(--gold); }
.drawer .has-sub { display: flex; align-items: center; }
.drawer .has-sub a { flex: 1; }
.drawer .tg { width: 56px; height: 50px; background: none; border: 0; position: relative; cursor: pointer; margin-right: 20px; }
.drawer .tg::before { content: ""; position: absolute; left: 22px; top: 18px; width: 9px; height: 9px; border-right: 1.5px solid #4d4d4d; border-bottom: 1.5px solid #4d4d4d; transform: rotate(45deg); transition: transform .25s; }
.drawer .tg[aria-expanded="true"]::before { transform: rotate(225deg); top: 23px; }
.drawer .sub { display: none; }
.drawer .sub.is-open { display: block; }
.drawer .sub a { padding-left: 52px; }
/* 公式のスマホヘッダー（Wixは320px基準で拡大表示）: 高さ70、ロゴ152×38を左上、その下に小さく YAKITORI ITADORI、右に白い40×40の三本線 */
@media (max-width: 1000px) {
  .hd { --u: min(0.3125vw, 1.3px); height: calc(70 * var(--u)); }
  .hd .c { width: 100%; }
  .hd .logo { left: calc(2 * var(--u)); top: calc(16 * var(--u)); width: calc(152 * var(--u)); }
  .hd .logo::after { content: "YAKITORI  ITADORI"; position: absolute; left: calc(42 * var(--u)); top: calc(38 * var(--u)); white-space: pre; font-family: var(--futura); font-weight: 300; font-size: calc(6 * var(--u)); letter-spacing: calc(1.2 * var(--u)); color: #000; line-height: 1; }
  .hd .line { display: none; }
  .hd nav { display: none; }
  .menu-btn { display: block; right: calc(3 * var(--u)); top: calc(15 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
  .menu-btn span { width: calc(22 * var(--u)); height: 2px; margin: 0 auto; }
  .menu-btn span:nth-child(1) { margin-top: calc(10 * var(--u) - 1px); }
  .menu-btn span + span { margin-top: calc(9 * var(--u) - 2px); }
  .hd .apply { right: calc(3 * var(--u)); top: calc(74 * var(--u)); }
  .hd:has(.apply) { padding-bottom: 30px; }
}
/* ---------- slideshow (crossfade, 3s) ---------- */
.ss { position: relative; overflow: hidden; background: #111; }
.ss .sl { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.ss .sl img { width: 100%; height: 100%; object-fit: cover; }
.ss .sl.is-active { opacity: 1; }
.ss .sl.is-active img { animation: kb 4s ease-out forwards; }
.ss .arr { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 60px; border: 0; background: none; color: #fff; cursor: pointer; opacity: 0; transition: opacity .3s; z-index: 3; }
.ss:hover .arr { opacity: .9; }
.ss .arr::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border-top: 2px solid #fff; border-left: 2px solid #fff; margin: -9px 0 0 -6px; transform: rotate(-45deg); }
.ss .arr.prev { left: 50px; } .ss .arr.next { right: 50px; } .ss .arr.next::before { transform: rotate(135deg); margin-left: -12px; }
.ss .cnt { position: absolute; right: 24px; bottom: 16px; z-index: 3; color: #fff; font: 13px Arial, sans-serif; opacity: 0; }
.ss:hover .cnt { opacity: 1; }
/* ---------- home ---------- */
.hero { height: 92.1vw; max-height: 1354px; min-height: 320px; }
.tezukuri { height: 64.6vw; max-height: 949px; min-height: 420px; }
.tezukuri .logo { position: absolute; top: 3.2%; left: 57%; width: 24.3%; max-width: 358px; z-index: 2; }
.tezukuri .txt { position: absolute; left: max(16px, calc(50% - 463px)); top: 41%; z-index: 2; color: #fff; }
.tezukuri .en { font-family: var(--futura); font-size: 11px; letter-spacing: .2em; }
.tezukuri h2 { font-family: "Libre Baskerville", var(--mincho); font-size: 50px; letter-spacing: 2px; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; margin: 4px 0 24px; line-height: 1.2; }
.tezukuri p { font-family: var(--futura); font-size: 20px; line-height: 26px; letter-spacing: .8px; }
@media (max-width: 760px) { .tezukuri h2 { font-size: 34px; } .tezukuri p { font-size: 14px; line-height: 22px; } .tezukuri .txt { top: 30%; right: 16px; } .tezukuri .logo { width: 34%; left: 62%; } }
.banner { padding-top: 42px; display: grid; justify-items: center; gap: 68px; }
.banner img { width: min(100%, 975px); }
.banner .btn img { width: min(100%, 958px); }
.banner .btn:hover img { opacity: .8; }
.covid { display: block; width: min(100%, 935px); margin: 68px auto 0; background: #f3efe6; text-align: center; padding: 24px 10px; font-family: var(--jp); font-weight: 700; font-size: clamp(22px, 3vw, 45px); color: #000; line-height: 1.3; }
.recruit-strip { margin-top: 110px; height: 43.4vw; max-height: 638px; min-height: 240px; position: relative; overflow: hidden; }
.recruit-strip .set { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); opacity: 0; filter: blur(0); transition: opacity 1.2s ease, filter 1.2s ease; }
.recruit-strip .set img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.recruit-strip .set.is-active { opacity: 1; }
.recruit-strip .set.is-leaving { filter: blur(12px); }
.recruit-strip a.lbl { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: #fff; font-family: var(--mincho); font-size: clamp(40px, 4.8vw, 70px); letter-spacing: 1px; text-decoration: underline; text-underline-offset: 10px; text-decoration-thickness: 2px; }
.recruit-strip .cnt { position: absolute; right: 28px; bottom: 10px; color: #fff; font: 13px Arial; z-index: 2; }
.t-thin { text-align: center; font-family: var(--thin); font-weight: 100; font-size: 30px; letter-spacing: 6px; color: var(--ink); }
.news-sec { padding-top: 140px; }
.news-sec .new { color: var(--red); font-family: var(--futura); font-size: 15px; margin: 28px 0 8px 67px; }
.news-grid { display: grid; grid-template-columns: repeat(3, 282px); gap: 12px; margin-left: 55px; }
.news-grid a { display: grid; grid-template-columns: 47px 1fr; gap: 10px; align-items: center; border: 1px solid #ddd; padding: 6px 10px 6px 12px; min-height: 66px; }
.news-grid img { width: 47px; height: 66px; object-fit: cover; }
.news-grid .t { font-family: var(--futura); font-size: 14px; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-grid .d { font-family: var(--futura); font-size: 12px; color: var(--ink); margin-top: 8px; }
.news-more { text-align: right; font-family: var(--futura); font-size: 13px; margin: 12px 46px 0 0; }
@media (max-width: 1000px) { .news-grid { grid-template-columns: 1fr; margin-left: 0; } .news-sec .new { margin-left: 0; } }
.ig-sec { padding-top: 120px; }
.ig-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 11px; margin-top: 30px; }
.ig-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 700px) { .ig-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; } }
.collage { margin-top: 120px; }
.collage img { width: 100%; }
.story { position: relative; padding: 24px 0 200px; }
.story .el { width: min(100%, 770px); margin: 0 auto; border: 1px solid #333; border-radius: 50%; padding: 40px 90px 44px; text-align: center; font-family: var(--futura); font-size: 15px; line-height: 1.65; color: #222; }
.story .el h3 { font-family: var(--mincho); font-size: 24px; letter-spacing: .3em; margin-bottom: 12px; }
.story .el p + p { margin-top: 20px; }
.story .man { position: absolute; right: calc(50% - 440px); top: 310px; width: 104px; }
.story .chick { width: 91px; margin: 34px auto 0; }
@media (max-width: 860px) { .story .el { border-radius: 30px; padding: 24px 20px; } .story .man { right: 8px; top: auto; bottom: 110px; width: 70px; } }
.cta { position: relative; height: 710px; overflow: hidden; display: grid; place-items: center; background: #0b1a33 url("../img/itadori-exterior-night.webp") center/cover; background-attachment: fixed; }
.cta.short { height: 478px; background-image: url("../img/ita-banquet-fire.webp"); }
.cta::before { content: ""; position: absolute; inset: 0; background: rgba(0,10,30,.35); backdrop-filter: blur(3px); }
.cta span { position: relative; color: #fff; font-family: "ItaBrush", var(--jp); font-size: clamp(26px, 3.1vw, 46px); letter-spacing: 9px; text-decoration: underline; text-underline-offset: 12px; text-decoration-thickness: 2px; text-align: center; padding: 0 20px; line-height: 1.5; }
@media (max-width: 900px) { .cta { height: 60vw; background-attachment: scroll; } .cta.short { height: 50vw; } }
.ft { background: var(--gold); color: #fff; height: 140px; }
.ft .c { height: 100%; }
.ft .so { position: absolute; right: 45px; top: 66px; display: flex; gap: 14px; }
.ft .so a { width: 24px; height: 24px; display: grid; place-items: center; font-family: var(--futura); font-weight: 700; font-size: 16px; color: #fff; }
.ft .so svg { width: 20px; height: 20px; fill: #fff; }
.ft .cp { position: absolute; right: 18px; top: 102px; font-family: var(--futura); font-size: 13px; letter-spacing: .02em; text-transform: uppercase; }
/* ---------- sub-page hero (menu / takeout) ---------- */
.ph { height: 44.3vw; max-height: 651px; min-height: 300px; position: relative; overflow: hidden; }
.ph img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph .logo { position: absolute; z-index: 2; }
.ph .yr { position: absolute; left: 0; right: 0; top: 39%; z-index: 2; text-align: center; color: #fff; font-family: var(--thin); font-weight: 100; font-size: clamp(40px, 5vw, 72px); letter-spacing: 8px; line-height: 1; }
.ph .box { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); z-index: 2; color: #fff; border: 1px solid #fff; font-family: var(--futura); font-size: 12px; letter-spacing: 2px; padding: 9px 36px; }
.ph .arr { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 60px; border: 0; background: none; z-index: 3; cursor: pointer; opacity: 1; }
.ph:hover .arr { opacity: 1; }
.ph .dots { position: absolute; left: 0; right: 0; bottom: 44px; z-index: 3; display: flex; justify-content: center; gap: 12px; }
.ph .dots button { width: 6px; height: 6px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.45); cursor: pointer; }
.ph .dots button.on { background: #fff; }
.ph .cnt { display: none; }
.ph .arr::before { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; border-top: 1.5px solid #fff; border-left: 1.5px solid #fff; margin: -8px 0 0 -4px; transform: rotate(-45deg); }
.ph .arr.l { left: 90px; } .ph .arr.r { right: 90px; } .ph .arr.r::before { transform: rotate(135deg); margin-left: -12px; }
/* ---------- menu ---------- */
.mascots { position: relative; padding-top: 28px; text-align: center; }
.mascots .ml { position: absolute; left: 69px; top: 159px; width: 104px; }
.mascots .mr { position: absolute; right: 60px; top: 159px; width: 116px; }
.mascots .en { font-family: var(--futura); font-size: 11px; letter-spacing: 2.2px; color: #000; }
.mascots h2 { font-family: "ItaMaru", var(--jp); font-size: clamp(56px, 6.8vw, 100px); letter-spacing: 1.2px; line-height: 1; color: #000; margin-top: 2px; }
.mascots h2 .big { font-size: 1.2em; }
.mascots p { font-family: "ItaMaru", var(--jp); font-size: clamp(22px, 2.45vw, 36px); line-height: 1.2; letter-spacing: -.05em; color: #000; margin-top: 32px; }
@media (max-width: 760px) { .mascots .ml, .mascots .mr { display: none; } }
.menu-list { width: min(100%, 892px); margin: 70px auto 0; display: grid; gap: 28px; }
.menu-list img { width: 100%; border: 1px solid #ddd; }
.menu-note { width: min(100%, 892px); margin: 10px auto 0; text-align: right; font-family: var(--futura); font-size: 12px; }
.menu-link { width: min(100%, 892px); margin: 18px auto 0; text-align: right; font-family: var(--futura); font-size: 22px; text-decoration: underline; text-underline-offset: 6px; }
.menu-txt { text-align: center; font-family: var(--futura); font-size: 15px; line-height: 1.6; margin-top: 50px; }
.chick { width: 91px; margin: 60px auto 90px; }
/* ---------- kodawari ---------- */
.kod-top { padding-top: 90px; text-align: center; }
.kod-top h2 { font-family: "ItaBrush2", var(--jp); font-size: clamp(34px, 4.1vw, 60px); letter-spacing: .08em; line-height: 1.2; color: #000; }
.kod-top p { width: min(100%, 630px); margin: 40px auto 0; text-align: left; font-family: var(--mincho); font-size: 18px; line-height: 1.6; color: #323232; }
.kod-top small { display: block; width: min(100%, 630px); margin: 20px auto 0; text-align: right; font-family: var(--mincho); font-size: 10px; color: #605e5e; }
.kod-top img { width: min(100%, 598px); margin: 56px auto 0; }
@media (max-width: 760px) { .kod-top { padding-top: 40px; } .kod-top p { font-size: 15px; } }
.kod-black { background: #000; color: #fff; width: min(100%, 980px); margin: 70px auto 0; padding: 36px 28px 44px; }
.kod-black .row { display: grid; grid-template-columns: 451px 1fr; gap: 30px; align-items: start; margin-bottom: 50px; }
.kod-black .row:last-child { margin-bottom: 0; }
.kod-black img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }
.kod-black .lbl { display: inline-block; background: var(--red); color: #fff; font-family: var(--mincho); font-size: 24px; letter-spacing: .3em; padding: 0 6px 0 12px; margin: 12px 0 28px; line-height: 1.5; }
.kod-black p { font-family: var(--mincho); font-size: 15px; line-height: 1.75; }
@media (max-width: 860px) { .kod-black .row { grid-template-columns: 1fr; } }
/* ---------- store ---------- */
.st-collage { padding-top: 67px; } .st-collage img { width: min(100%, 920px); margin: 0 auto; }
.st-head { padding-top: 60px; text-align: center; }
.st-head .sm { font-family: var(--futura); font-size: 11px; letter-spacing: 2.2px; text-align: left; margin-left: 27px; }
.st-head h2 { font-family: var(--futura); font-weight: 300; font-size: clamp(30px, 4vw, 55px); letter-spacing: 11px; color: var(--ink); margin-top: 2px; }
.st-head p { font-family: var(--futura); font-size: 15px; letter-spacing: .6px; line-height: 1.5; margin-top: 10px; }
.store { padding-top: 150px; width: min(100%, 924px); margin-inline: auto; position: relative; }
.store .hd2 { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.store h3 { font-family: var(--futura); font-size: 30px; letter-spacing: 1.2px; }
.store .seats { font-family: var(--futura); font-size: 18px; letter-spacing: .6px; } .store .seats b { font-size: 29px; font-weight: 700; } .store .seats b.s { font-size: 20px; }
.store .tel { font-family: var(--futura); font-size: 25px; margin-top: 16px; display: flex; align-items: center; gap: 10px; }
.store .adr { font-family: var(--futura); font-size: 15px; margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.store .adr u { font-size: 14px; letter-spacing: 2.8px; }
.store .adr > a:first-child { display: flex; align-items: center; gap: 10px; }
.store .adr > a:first-child:hover { text-decoration: underline; text-underline-offset: 4px; }
.store .adr .map { margin-left: 6px; font-size: 12px; letter-spacing: .08em; color: #1d2b6b; border: 1px solid #1d2b6b; border-radius: 12px; padding: 2px 10px; white-space: nowrap; }
.store .adr .map:hover { background: #1d2b6b; color: #fff; }
@media (max-width: 600px) { .store .adr { flex-wrap: wrap; } }
.store .gmap { position: relative; margin-top: 0; background: #eee; }
.store .gmap iframe { display: block; width: 100%; height: 340px; border: 0; }
.store .gmap .open { position: absolute; right: 10px; bottom: 10px; background: #fff; color: #1d2b6b; font-family: var(--futura); font-size: 12px; letter-spacing: .06em; padding: 6px 12px; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
@media (max-width: 600px) { .store .gmap iframe { height: 260px; } }
.store .hrs { font-family: var(--futura); font-size: 15px; margin-top: 12px; display: flex; gap: 56px; }
.store .so { position: absolute; right: 2px; top: 210px; display: flex; gap: 11px; }
.store .so img { width: 32px; height: 32px; }
.store .pics { display: grid; gap: 0; margin-top: 40px; }
.store .pics img { width: 100%; height: 400px; object-fit: cover; }
.store .pics.a { grid-template-columns: 600px 324px; }
.store .pics.b { grid-template-columns: 323px 597px; }
@media (max-width: 960px) { .store .pics.a, .store .pics.b { grid-template-columns: 1fr; } .store .pics img { height: auto; aspect-ratio: 3/2; } .store .so { position: static; margin-top: 12px; } .store { padding-top: 80px; } }
/* ---------- takeout ---------- */
.to-en { text-align: center; font-family: var(--futura); font-size: 11px; letter-spacing: 2.2px; color: #000; margin-top: 28px; }
.to { width: min(100%, 861px); margin: 21px auto 0; }
.to img { width: 100%; display: block; }
.to .m16 { margin-top: 16px; } .to .m20 { margin-top: 20px; }
.to .tel-block { display: grid; grid-template-columns: 251px 1fr; margin: 37px 0 0 34px; }
.to .lbl-red { grid-row: 1 / 3; align-self: start; margin-top: 49px; font-family: var(--jp); font-weight: 700; color: #de0000; font-size: clamp(26px, 3.4vw, 50px); line-height: 1; }
.to .nm { font-family: var(--jp); font-weight: 700; font-size: clamp(18px, 2vw, 30px); color: #2f2e2e; line-height: 1.2; }
.to .tel { display: block; font-family: var(--jp); font-weight: 700; font-size: clamp(36px, 4.8vw, 70px); color: #de0000; line-height: 1; letter-spacing: .01em; margin-top: 10px; }
.to .tel:hover { opacity: .8; }
.to .fee { width: 576px; max-width: 100%; margin: 38px auto 0; }
.to .nm2 { margin: 56px 0 0 285px; }
.to .tel2 { margin-left: 285px; }
.to .notes { width: 560px; max-width: 100%; margin: 10px 0 0 286px; }
.to .notice { width: 847px; max-width: 100%; margin: 13px auto 0; }
.to .maps { display: grid; grid-template-columns: 292px 311px; justify-content: space-between; width: min(100%, 696px); margin: 32px 0 0 98px; }
.to .area { width: 836px; max-width: 100%; margin: 28px auto 0; }
.to-end { height: 132px; }
@media (max-width: 900px) { .to .tel-block { grid-template-columns: 1fr; margin-left: 0; } .to .lbl-red { grid-row: auto; margin-top: 0; margin-bottom: 14px; } .to .nm2, .to .tel2, .to .notes { margin-left: 0; } .to .maps { grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; margin-left: 0; } .to .maps img { width: 100%; } .to-end { height: 60px; } }
/* ---------- banquet ---------- */
.bq { background: url("../img/ita-gold.webp") center top / cover; }
.bq-hero { position: relative; height: max(calc(100vh - 205px), 760px); height: max(calc(100svh - 205px), 760px); overflow: hidden; }
.bq-hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bq-hero .utage { position: absolute; left: calc(50% - 520px); top: 4%; height: 90%; width: auto; max-width: none; z-index: 1; }
.bq-hero .logo { position: absolute; left: calc(50% + 185px); top: 99px; width: 235px; max-width: 18vw; z-index: 2; }
.bq-hero .en { position: absolute; left: calc(50% + 95px); top: 52%; z-index: 3; font-family: var(--futura); font-size: clamp(28px, 4vw, 60px); letter-spacing: 2px; color: #222; }
.bq-box { width: min(100%, 777px); margin: 94px auto 0; background: #fff; border: 2px solid var(--red); border-radius: 10px; padding: 22px 20px; text-align: center; font-family: var(--futura); font-size: 22px; line-height: 1.5; color: #333; }
.bq-course { width: min(100%, 777px); margin: 44px auto 0; }
.bq-note { width: min(100%, 777px); margin: 8px auto 0; text-align: right; font-family: var(--mincho); font-size: 12px; }
.bq-tail { position: relative; padding: 110px 0 60px; text-align: center; }
.bq-tail .wm { position: absolute; left: calc(50% + 160px); top: 70px; width: 649px; max-width: 50vw; opacity: .18; }
.bq-tail h2 { font-family: var(--futura); font-weight: 300; font-size: clamp(30px, 4vw, 55px); letter-spacing: 11px; position: relative; }
.bq-tail p { font-family: var(--futura); font-size: 24px; line-height: 1.4; margin-top: 56px; position: relative; }
.bq-tail .chick { margin: 60px auto 0; }
@media (max-width: 1000px) { .bq-hero { height: auto; aspect-ratio: 375 / 265; min-height: 0; } .bq-hero .utage { left: 0; top: 4%; height: 86%; width: auto; } .bq-hero .logo { left: auto; right: 6vw; top: 8%; width: 29vw; max-width: none; } .bq-hero .en { left: auto; right: 8vw; top: 62%; font-size: 9vw; } .bq-tail .wm { left: 50%; max-width: 70vw; } .bq-box { margin-top: 40px; font-size: 17px; } }
/* ---------- recruit ---------- */
.rc-top { padding-top: 86px; text-align: center; }
.rc-top img.gp { width: min(100%, 887px); margin: 0 auto; }
.rc-top h2 { font-family: "ItaBrush2", var(--jp); font-size: clamp(32px, 3.9vw, 57px); color: #605e5e; line-height: 1.3; margin-top: 24px; }
.rc-top .chick { width: 165px; margin: 40px auto 0; }
.rc-top .rc-kid { margin-top: 28px; }
.rc-top .rc-kid a { display: inline-block; background: #e21c21; color: #fff; font-family: var(--futura); font-size: 15px; letter-spacing: .04em; padding: 12px 28px; border-radius: 3px; }
.rc-top .rc-kid a:hover { opacity: .85; }
.rc-jobs { position: relative; margin-top: 55px; height: 660px; background: #ff6161 url("../img/itadori-interior.webp") center/cover; }
.rc-jobs h2 { position: relative; text-align: center; padding-top: 78px; font-family: "ItaBrush2", var(--jp); font-weight: 700; font-size: 50px; letter-spacing: 10px; color: #fff; }
.rc-jobs .ml { position: absolute; left: calc(50% - 442px); top: 22px; width: 127px; }
.rc-jobs .mr { position: absolute; right: calc(50% - 450px); top: 25px; width: 120px; }
.rc-jobs .cards { position: relative; width: min(100%, 980px); margin: 83px auto 0; display: grid; grid-template-columns: 485px 469px; justify-content: space-between; }
.rc-jobs .card { height: 343px; position: relative; overflow: hidden; }
.rc-jobs .card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc-jobs .card::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.75); z-index: 1; }
.rc-jobs .card .in { position: relative; z-index: 2; padding: 69px 56px 0; text-align: center; }
.rc-jobs .card h3 { font-family: var(--futura); font-weight: 300; font-size: 30px; color: #ff4040; text-decoration: underline; text-underline-offset: 6px; line-height: 1.3; }
.rc-jobs .card h3.b { font-weight: 400; }
.rc-jobs .card p { font-family: var(--futura); font-size: 16px; color: #000; line-height: 1.7; margin-top: 22px; }
@media (max-width: 1000px) { .rc-jobs { height: auto; padding-bottom: 40px; } .rc-jobs .cards { grid-template-columns: 1fr; gap: 16px; padding: 0 16px; } .rc-jobs .ml, .rc-jobs .mr { display: none; } .rc-jobs .card { height: auto; } .rc-jobs .card .in { padding: 32px 20px 36px; } }
.rc-cream { background: var(--cream); padding: 50px 0 72px; }
.brush-pink { text-align: center; font-family: "ItaBrush2", var(--jp); font-weight: 700; font-size: clamp(32px, 3.4vw, 50px); letter-spacing: 10px; color: var(--pink2); }
.perks { width: min(100%, 980px); margin: 42px auto 0; display: grid; grid-template-columns: repeat(4, 190px); justify-content: space-between; }
.perk { background: #fff; padding: 30px 18px; min-height: 180px; }
.perk b { display: block; font-family: var(--futura); font-weight: 400; font-size: 18px; color: #ff4040; line-height: 1.3; margin-bottom: 16px; }
.perk b.h { font-weight: 700; color: var(--pink); }
.perk p { font-family: var(--futura); font-size: 13px; line-height: 1.6; }
@media (max-width: 1000px) { .perks { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0 16px; } }
@media (max-width: 500px) { .perks { grid-template-columns: 1fr; } }
.rc-flow { position: relative; padding-top: 50px; }
.rc-flow .ml { position: absolute; left: calc(50% - 477px); top: 0; width: 127px; }
.rc-flow .mr { position: absolute; right: calc(50% - 480px); top: 3px; width: 120px; }
.rc-flow .lead { text-align: center; font-family: var(--futura); font-size: 15px; line-height: 1.7; margin-top: 26px; }
.steps { width: min(100%, 980px); margin: 40px auto 0; display: grid; grid-template-columns: repeat(4, 190px); justify-content: space-between; }
.step { background: var(--cream); padding: 30px 14px 40px; text-align: center; min-height: 270px; }
.step .n { width: 60px; height: 60px; border-radius: 50%; background: #000; color: #fff; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--futura); font-weight: 700; line-height: 1; }
.step .n small { font-size: 13px; letter-spacing: .5px; } .step .n b { font-size: 32px; }
.step h4 { font-family: var(--futura); font-size: 18px; color: var(--pink); margin-top: 22px; line-height: 1.3; }
.step p { font-family: var(--futura); font-size: 13px; line-height: 1.6; text-align: left; margin-top: 18px; }
.rc-flow .mini { width: min(100%, 980px); margin: 16px auto 0; text-align: right; }
.rc-flow .mini a { display: inline-block; background: var(--pink); color: #fff; font-family: var(--jp); font-size: 12px; letter-spacing: .1em; padding: 4px 10px; border-radius: 11px; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0 16px; } .rc-flow .ml, .rc-flow .mr { display: none; } }
@media (max-width: 500px) { .steps { grid-template-columns: 1fr; } }
.rc-ev { padding-top: 60px; }
.rc-ev .lead { width: min(100%, 980px); margin: 26px auto 0; font-family: var(--futura); font-size: 15px; line-height: 1.7; text-align: center; }
.ev3 { width: min(100%, 980px); margin: 40px auto 0; display: grid; grid-template-columns: 316px 307px 307px; justify-content: space-between; }
.ev3 figure { margin: 0; }
.ev3 figcaption { text-align: center; font-family: var(--futura); font-size: 24px; color: var(--pink); margin-bottom: 8px; }
.ev3 figcaption.b { font-weight: 700; }
.ev3 img { width: 100%; height: 235px; object-fit: cover; }
@media (max-width: 1000px) { .ev3 { grid-template-columns: 1fr; gap: 20px; padding: 0 16px; } .ev3 img { height: auto; aspect-ratio: 4/3; } }
.rc-apply { display: block; width: min(100%, 525px); margin: 70px auto 100px; background: #e21c21; color: #fff; text-align: center; padding: 10px; font-family: var(--futura); font-size: 16px; letter-spacing: .05em; }
.rc-apply:hover { opacity: .85; }
/* ---------- news ---------- */
.nw-hero { position: relative; height: 400px; display: grid; place-items: center; overflow: hidden; }
.nw-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(8px); transform: scale(1.1); }
.nw-hero h1 { position: relative; color: #fff; font-family: var(--jp); font-weight: 700; font-size: clamp(28px, 3.4vw, 45px); letter-spacing: .04em; }
.nw-tabs { width: min(100%, 940px); margin: 0 auto; display: flex; gap: 40px; align-items: center; padding: 36px 0 30px; font-family: var(--futura); font-size: 15px; color: #333; }
.nw-tabs button { background: none; border: 0; padding: 0; font: inherit; color: #333; cursor: pointer; }
.nw-tabs button:hover { color: var(--gold); }
.nw-tabs .cur { color: var(--gold); }
.posts-empty { width: min(100%, 940px); margin: 0 auto; padding: 40px 0 120px; text-align: center; font-family: var(--futura); color: #666; }
.nw-tabs .srch { margin-left: auto; width: 18px; height: 18px; border: 1.5px solid #333; border-radius: 50%; position: relative; }
.nw-tabs .srch::after { content: ""; position: absolute; right: -6px; bottom: -5px; width: 7px; height: 1.5px; background: #333; transform: rotate(45deg); }
.posts { width: min(100%, 940px); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 80px; }
.post { border: 1px solid #ddd; background: #fff; }
.post .pic { aspect-ratio: 1 / 1.06; overflow: hidden; background: #f4f4f4; }
.post.nopic .in { padding-top: 34px; }
.post .pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.post .in { padding: 22px 30px 20px; }
.post .meta { font-family: var(--futura); font-size: 13px; color: #555; display: flex; justify-content: space-between; }
.post h3 { font-family: var(--jp); font-weight: 400; font-size: 26px; margin: 10px 0 14px; line-height: 1.4; }
.post p { font-family: var(--jp); font-size: 16px; color: #333; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 76px; }
.post .ft2 { border-top: 1px solid #ddd; margin-top: 60px; padding-top: 14px; display: flex; justify-content: space-between; font-family: var(--jp); font-size: 12px; color: #555; }
.post .ft2 .lk { color: #e21c21; }
@media (max-width: 760px) { .posts { grid-template-columns: 1fr; padding-inline: 16px; } .nw-tabs { padding-inline: 16px; gap: 20px; } }

/* ---------- recruit01: 社員 / パート・アルバイト 詳細 ---------- */
.r1-wrap { width: min(100%, 980px); margin: 0 auto; background: #fff; padding: 20px 36px 70px; }
.r1 + .r1 { margin-top: 70px; }
.r1-bar { background: #000; color: #fff; font-family: var(--futura); font-size: 24px; line-height: 42px; padding: 0 8px; }
.r1-img { width: 100%; margin-top: 24px; }
.r1-h { text-align: center; font-family: var(--futura); font-size: clamp(17px, 1.6vw, 22px); color: #2f2e2e; margin-top: 22px; line-height: 1.4; }
.r1-sub { text-align: center; font-family: var(--futura); font-size: 14px; color: #2f2e2e; margin-top: 22px; }
.r1-lbl { font-family: var(--futura); font-size: 14px; color: #2f2e2e; margin-top: 20px; }
.r1-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; border-top: 1px solid #ddd; }
.r1-t { width: 100%; border-collapse: collapse; font-family: var(--futura); font-size: 14px; color: #605e5e; }
.r1-t th { width: 100px; background: #ededed; color: #2f2e2e; font-weight: 400; text-align: center; vertical-align: middle; padding: 10px 6px; border-bottom: 2px solid #fff; }
.r1-t td { padding: 12px 14px; vertical-align: top; border-bottom: 1px solid #ddd; line-height: 1.5; }
.r1-t td b { font-weight: 700; color: #605e5e; }
.r1-t td i { font-style: normal; display: block; padding-left: 1em; }
.r1-btn { display: block; background: #e60012; color: #fff; text-align: center; font-family: var(--futura); font-size: 16px; letter-spacing: .02em; padding: 8px; margin: 28px 0; }
.r1-btn:hover { opacity: .85; }
.r1-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.r1-body { font-family: var(--futura); font-size: 13px; line-height: 1.7; padding: 14px 10px; color: #2f2e2e; }
.r1-body p + p { margin-top: 14px; }
.r1-body .in1 { padding-left: 1em; }
.r1-wide { margin-top: 40px; }
.r1-t td a { text-decoration: underline; }
/* ---------- phone: keep short headings on one line / break at natural points ---------- */
.sp { display: none; }
@media (max-width: 600px) {
  .sp { display: inline; } .pc { display: none; }
  .cta span { font-size: 22px; letter-spacing: 5px; line-height: 1.6; }
  .kod-top h2 { font-size: 30px; line-height: 1.25; }
  .st-head h2, .bq-tail h2 { font-size: 28px; letter-spacing: 6px; line-height: 1.2; }
  .store .hd2 { flex-direction: column; align-items: flex-start; gap: 4px; }
  .store .seats { white-space: nowrap; }
  .brush-pink { font-size: 26px; letter-spacing: 6px; }
  .rc-top h2 { font-size: 28px; }
  .post h3 { font-size: 20px; }
  .nw-hero h1 { font-size: 24px; }
  .r1-h { font-size: 17px; }
  .menu-note, .menu-link { text-align: center; padding: 0 8px; }
  .menu-link { font-size: 18px; }
}
@media (max-width: 760px) { .r1-wrap { padding: 12px 14px 40px; } .r1-two, .r1-cols { grid-template-columns: 1fr; } .r1-t th { width: 78px; } .r1-bar { font-size: 20px; line-height: 38px; } }