@charset "UTF-8";
/* ===================================================================
   出張回転寿司ページ
   共通トークンは style.css、見出し帯は page.css、
   ボタン(.page-btn)・注意書き(.draft-note)・表(.outline)は company.css を継承
   =================================================================== */

/* ============ 小見出し（セクションの中の見出し） ============ */
.ct-subhead{
  margin:clamp(44px,5vw,60px) 0 20px;
  font-family:var(--serif);font-weight:600;font-size:17px;
  letter-spacing:.1em;color:var(--ink);
  padding-left:14px;border-left:3px solid var(--gold);
}

/* ============ メインの写真 ============ */
/* タイトルの文字は画像の中に入っています。
   画像は 2172×724（およそ3：1）。切れないように、そのままの比率で出します。 */
.ct-main{margin:0;}
.ct-main img{
  width:100%;aspect-ratio:2172/724;object-fit:cover;object-position:center;
  background:var(--washi-deep);display:block;
}

/* ============ 出張回転寿司とは ============ */
/* 見出しは1行で。説明文はその下に置きます。 */
.ct-lead{margin:clamp(34px,4vw,48px) 0 0;}
.ct-lead__catch{
  margin:0 0 clamp(20px,2.4vw,30px);
  font-family:var(--serif);font-weight:600;
  font-size:clamp(22px,2.9vw,36px);line-height:1.55;letter-spacing:.06em;color:var(--enji);
}
.ct-lead__body{max-width:none;}
.ct-lead__body p{margin:0 0 22px;font-size:14.5px;line-height:2.15;letter-spacing:.04em;}
.ct-lead__body p:last-child{margin-bottom:0;}
.ct-lead__body b{font-weight:700;color:var(--enji);}

/* ============ こんなシーンで ============ */
.ct-scenes{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.ct-scenes li{
  display:flex;align-items:center;gap:9px;
  padding:13px 14px;background:#fff;border:1px solid var(--line);
  font-size:13.5px;letter-spacing:.04em;color:#2f2a22;line-height:1.6;
}
.ct-scenes li::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--gold);
}

/* ============ 動画 ============ */
.ct-movie{
  display:flex;gap:clamp(28px,4vw,56px);align-items:center;
  padding:clamp(26px,3.4vw,40px);
  background:#fff;border:1px solid var(--line);
}
.ct-movie__frame{
  flex:0 0 clamp(240px,30%,330px);
  aspect-ratio:9/16;background:#000;
}
.ct-movie__frame iframe{width:100%;height:100%;border:0;display:block;}
.ct-movie__text{flex:1 1 auto;min-width:0;}
.ct-movie__ttl{
  margin:0 0 18px;font-family:var(--serif);font-weight:600;
  font-size:clamp(19px,2.1vw,24px);letter-spacing:.1em;color:var(--ink);
}
.ct-movie__text p{margin:0 0 16px;font-size:14.5px;line-height:2.1;letter-spacing:.04em;}
.ct-movie__note{margin:0 !important;font-size:12px !important;color:var(--ink-soft);line-height:1.9 !important;}

/* ============ 特長（3つ） ============ */
.ct-feat{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,38px);
}
.ct-feat figure{margin:0 0 22px;text-align:center;}
.ct-feat figure img{
  width:min(220px,80%);aspect-ratio:1/1;object-fit:cover;border-radius:50%;
  background:var(--washi-deep);display:inline-block;
  box-shadow:0 10px 26px rgba(40,25,10,.12);
}
.ct-feat h3{
  margin:0 0 14px;text-align:center;
  font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.75;
  letter-spacing:.08em;color:var(--ink);
}
.ct-feat p{margin:0;font-size:13.5px;line-height:2;letter-spacing:.03em;color:#4a443b;}

/* ============ 基本料金 ＋ コース料金 ============ */
.ct-base{
  display:flex;align-items:stretch;justify-content:center;gap:clamp(14px,2vw,26px);
  flex-wrap:wrap;
}
.ct-base__card{
  flex:1 1 300px;max-width:420px;
  background:#fff;border:2px solid var(--gold);
  padding:clamp(22px,2.6vw,30px);text-align:center;
  display:flex;flex-direction:column;justify-content:center;
}
.ct-base__label{
  margin:0 0 16px;padding:7px 0;
  background:var(--gold);color:#fff;
  font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:.2em;text-indent:.2em;
}
.ct-base__fig{
  margin:0;font-family:var(--serif);font-weight:700;
  font-size:clamp(34px,4.4vw,50px);line-height:1.1;letter-spacing:.02em;color:var(--enji);
}
.ct-base__fig span{font-size:.4em;margin-left:.2em;letter-spacing:.08em;}
.ct-base__tax{margin:6px 0 0;font-size:13px;letter-spacing:.06em;color:var(--ink-soft);}
.ct-base__coursetxt{
  margin:0;font-family:var(--serif);font-weight:600;
  font-size:clamp(17px,1.9vw,21px);line-height:1.8;letter-spacing:.1em;color:var(--ink);
}
.ct-base__note{margin:14px 0 0;font-size:12.5px;line-height:1.9;letter-spacing:.03em;color:var(--ink-soft);}
.ct-base__plus{
  margin:0;align-self:center;
  font-size:30px;font-weight:700;color:var(--gold);
}

/* ============ コース A〜D ============ */
.ct-courses{
  list-style:none;margin:clamp(30px,3.6vw,44px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px);
}
.ct-course{
  background:#fff;border:1px solid var(--line);padding:0 clamp(18px,2vw,24px) clamp(20px,2.2vw,26px);
  display:flex;flex-direction:column;
}
.ct-course__head{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  margin:0 clamp(-18px,-2vw,-24px) 18px;
  padding:14px clamp(18px,2vw,24px);
  color:#fff;
}
.ct-course__mark{
  display:inline-flex;align-items:center;justify-content:center;flex-direction:column;
  width:48px;height:48px;border-radius:50%;background:#fff;flex:none;
  font-family:var(--serif);font-weight:700;font-size:21px;line-height:1;
}
.ct-course__mark small{font-family:var(--sans);font-weight:500;font-size:8.5px;letter-spacing:.06em;margin-top:2px;}
.ct-course__price{
  font-family:var(--serif);font-size:14px;letter-spacing:.06em;
  display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;
}
.ct-course__price b{font-size:30px;font-weight:700;letter-spacing:.02em;}
.ct-course__price small{font-family:var(--sans);font-size:11.5px;opacity:.9;letter-spacing:.04em;}
.ct-course__rec{
  margin-left:auto;padding:5px 11px;border-radius:999px;
  background:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;
}
.ct-course__neta{margin:0 0 12px;font-size:13px;line-height:2;letter-spacing:.02em;color:#2f2a22;}
.ct-course__pick{margin:auto 0 0;font-size:12.5px;line-height:1.9;letter-spacing:.03em;font-weight:700;}

.ct-course--a .ct-course__head{background:#6b7f3f;}
.ct-course--a .ct-course__mark{color:#6b7f3f;}
.ct-course--a .ct-course__pick{color:#5b6d34;}
.ct-course--b .ct-course__head{background:var(--gold);}
.ct-course--b .ct-course__mark{color:#967f42;}
.ct-course--b .ct-course__pick{color:#967f42;}
.ct-course--c .ct-course__head{background:var(--navy);}
.ct-course--c .ct-course__mark{color:var(--navy);}
.ct-course--c .ct-course__pick{color:var(--navy);}
.ct-course--d .ct-course__head{background:var(--enji);}
.ct-course--d .ct-course__mark{color:var(--enji);}
.ct-course--d .ct-course__pick{color:var(--enji);}
.ct-course--d .ct-course__rec{color:var(--enji);}

.ct-pricenote{
  list-style:none;margin:clamp(26px,3vw,34px) 0 0;padding:clamp(20px,2.4vw,26px);
  background:var(--washi-deep);
}
.ct-pricenote li{
  position:relative;padding-left:20px;margin:0 0 10px;
  font-size:13px;line-height:1.95;letter-spacing:.03em;color:#4a443b;
}
.ct-pricenote li:last-child{margin-bottom:0;}
.ct-pricenote li::before{
  content:"※";position:absolute;left:0;top:0;color:var(--gold);font-size:12px;
}
.ct-pricenote b{font-weight:700;color:var(--enji);}

/* ============ オプション ============ */
.ct-optlead{margin:0 0 26px;font-size:14px;line-height:2;letter-spacing:.04em;color:#2f2a22;}
.ct-opts{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px);
}
.ct-opt{
  background:#fff;border:1px solid var(--line);
  padding:clamp(20px,2.4vw,28px);
  display:flex;gap:clamp(16px,2vw,24px);align-items:flex-start;
}
.ct-opt--wide{grid-column:1 / -1;}
.ct-opt__pics{display:flex;gap:12px;flex:none;}
.ct-opt__pics figure{margin:0;}
.ct-opt__pics img{
  width:clamp(88px,10vw,124px);aspect-ratio:1/1;object-fit:cover;border-radius:50%;
  background:var(--washi-deep);display:block;
}
.ct-opt__pics--one img{width:clamp(78px,8vw,100px);}
/* 背景が切り抜いてある写真（オードブル）は、丸い下地を敷かずにそのまま置く */
.ct-opt__pics--cut img{
  border-radius:0;background:none;object-fit:contain;
  width:clamp(104px,12vw,148px);
  filter:drop-shadow(0 8px 16px rgba(40,25,10,.18));
}

/* 海鮮オードブル：写真とその値段を1組にして並べる
   （2〜3人前のほうを小さく出して、実際の大きさの差も伝わるようにしています） */
.ct-odb-wrap{display:flex;gap:clamp(26px,4vw,60px);align-items:center;flex-wrap:wrap;}
.ct-odb{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:clamp(24px,3.4vw,52px);
}
.ct-odb__txt{flex:1 1 260px;margin:0 !important;}
.ct-odb__item{text-align:center;}
.ct-odb__item figure{margin:0 0 14px;display:flex;align-items:flex-end;justify-content:center;}
.ct-odb__item img{
  width:100%;height:auto;object-fit:contain;display:block;
  filter:drop-shadow(0 10px 20px rgba(40,25,10,.18));
}
.ct-odb__item--s{flex:0 0 clamp(140px,16vw,196px);}
.ct-odb__item--l{flex:0 0 clamp(168px,20vw,248px);}
.ct-odb__size{
  margin:0 0 6px;display:inline-block;
  padding:5px 14px;border-radius:999px;
  background:var(--navy);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.08em;
}
.ct-odb__price{
  margin:0;font-family:var(--serif);font-size:14px;letter-spacing:.04em;color:var(--enji);
  display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:6px;
}
.ct-odb__price b{font-size:clamp(22px,2.4vw,28px);font-weight:700;}
.ct-odb__price small{font-family:var(--sans);font-size:11.5px;color:var(--ink-soft);}

/* 「今なら1万円OFF!」のバッジ */
.ct-opt__off{
  align-self:center;
  padding:8px 15px;border-radius:999px;
  background:var(--enji);color:#fff;
  font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.04em;
  display:inline-flex;align-items:baseline;gap:3px;line-height:1.2;
}
.ct-opt__off b{font-size:15px;font-weight:700;}
.ct-opt__body{flex:1 1 auto;min-width:0;}
.ct-opt__ttl{
  margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--enji);
  font-family:var(--serif);font-weight:600;font-size:clamp(17px,1.9vw,21px);
  letter-spacing:.08em;color:var(--ink);
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
}
.ct-opt__tag{
  padding:4px 10px;background:var(--enji);color:#fff;border-radius:2px;
  font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.04em;
}
.ct-opt__price{margin:0;display:flex;flex-wrap:wrap;gap:8px 28px;}
.ct-opt__price > div{display:flex;align-items:baseline;gap:9px;}
.ct-opt__price dt{font-size:12.5px;letter-spacing:.06em;color:var(--ink-soft);white-space:nowrap;}
.ct-opt__price dd{
  margin:0;font-family:var(--serif);font-size:14px;letter-spacing:.04em;color:var(--enji);
  display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;
}
.ct-opt__price dd b{font-size:26px;font-weight:700;}
.ct-opt__price dd small{font-family:var(--sans);font-size:11.5px;color:var(--ink-soft);}
.ct-opt__txt{margin:14px 0 0;font-size:13px;line-height:2;letter-spacing:.03em;color:#4a443b;}

/* ============ 設置スペース ============ */
.ct-spec__sub{font-size:12.5px;color:var(--ink-soft);}

/* ============ 流れ ============ */
.ct-flow{
  list-style:none;margin:0;padding:0;
  border-left:1px solid var(--line);
}
.ct-flow li{
  position:relative;display:flex;gap:clamp(16px,2.4vw,30px);
  padding:0 0 clamp(30px,3.6vw,44px) clamp(22px,2.6vw,34px);
}
.ct-flow li:last-child{padding-bottom:0;}
.ct-flow li::before{
  content:"";position:absolute;left:-5px;top:9px;
  width:9px;height:9px;border-radius:50%;background:var(--enji);
}
.ct-flow__num{
  flex:none;font-family:var(--serif);font-weight:700;font-size:26px;
  line-height:1;color:var(--gold);letter-spacing:.04em;padding-top:2px;
}
.ct-flow__body{flex:1 1 auto;min-width:0;}
.ct-flow__body h3{
  margin:0 0 6px;font-family:var(--serif);font-weight:600;font-size:17px;
  letter-spacing:.1em;color:var(--ink);
}
.ct-flow__sub{
  margin:0 0 10px;font-size:12.5px;letter-spacing:.06em;color:var(--enji);
}
.ct-flow__body p{margin:0;font-size:13.5px;line-height:2.05;letter-spacing:.03em;color:#4a443b;}
.ct-flow__body b{font-weight:700;color:var(--ink);}

/* ============ エリア ============ */
.ct-areas{display:flex;gap:clamp(18px,2.4vw,28px);flex-wrap:wrap;}
.ct-area{
  flex:1 1 300px;background:#fff;border:1px solid var(--line);
  padding:clamp(20px,2.4vw,26px);
}
.ct-area__head{
  margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-weight:600;font-size:16px;letter-spacing:.16em;color:var(--navy);
}
.ct-area ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.ct-area li{
  padding:6px 14px;border:1px solid var(--gold-soft);border-radius:999px;
  background:var(--washi);font-size:13px;letter-spacing:.06em;color:var(--ink);
}
.ct-area__note{
  margin:22px 0 0;padding:16px 18px;background:var(--washi-deep);
  font-size:12.5px;line-height:2;letter-spacing:.03em;color:#4a443b;
}

/* ============ お客様の声 ============ */
.ct-voices{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,26px);
}
.ct-voices li{
  position:relative;background:#fff;border:1px solid var(--line);
  padding:clamp(26px,2.8vw,34px) clamp(20px,2.4vw,28px) clamp(20px,2.2vw,26px);
}
.ct-voices li::before{
  content:"“";position:absolute;left:16px;top:2px;
  font-family:var(--serif);font-size:44px;line-height:1;color:var(--gold-soft);
}
.ct-voice__txt{
  margin:0 0 14px;font-family:var(--serif);font-size:15px;line-height:2;
  letter-spacing:.05em;color:var(--ink);
}
.ct-voice__who{margin:0;font-size:12px;letter-spacing:.08em;color:var(--ink-soft);text-align:right;}

/* ============ ご利用にあたって ============ */
.ct-notes{list-style:none;margin:0;padding:0;}
.ct-notes li{
  position:relative;padding:0 0 0 22px;margin:0 0 12px;
  font-size:13.5px;line-height:2.05;letter-spacing:.03em;color:#4a443b;
}
.ct-notes li:last-child{margin-bottom:0;}
.ct-notes li::before{
  content:"";position:absolute;left:4px;top:13px;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}
.ct-notes b{font-weight:700;color:var(--enji);}

/* ============ お問い合わせ ============ */
.ct-cta{
  margin-top:clamp(20px,2.4vw,30px);
  padding:clamp(40px,5vw,64px) clamp(24px,3vw,40px);
  background:var(--navy);color:#fff;text-align:center;
}
.ct-cta__en{
  margin:0;font-family:var(--serif);font-weight:600;font-size:12px;
  letter-spacing:.42em;text-indent:.42em;color:var(--gold-soft);
}
.ct-cta__ttl{
  margin:14px 0 0;font-family:var(--serif);font-weight:600;
  font-size:clamp(24px,3vw,34px);line-height:1.7;letter-spacing:.14em;
}
.ct-cta__lead{
  margin:20px 0 0;font-size:13.5px;line-height:2.1;letter-spacing:.04em;color:#dcd8d0;
}
.ct-cta__btn{margin:32px 0 0;}
.ct-cta .page-btn{
  background:#fff;border-color:#fff;color:var(--navy);
}
.ct-cta .page-btn:hover{background:var(--gold);border-color:var(--gold);color:#fff;}
.page-btn--lg{min-width:min(340px,100%);padding:17px 30px;font-size:15px;}
.ct-cta__tel{
  margin:26px 0 0;font-size:13.5px;line-height:2;letter-spacing:.05em;color:#dcd8d0;
}
.ct-cta__tel a{color:#fff;font-family:var(--serif);font-size:17px;letter-spacing:.06em;}
.ct-cta__tel span{font-size:12px;}

/* ============ タブレット ============ */
@media (max-width:1024px){
  .ct-scenes{grid-template-columns:repeat(2,1fr);}
  .ct-feat{grid-template-columns:1fr;gap:34px;}
  .ct-feat li{display:flex;gap:24px;align-items:flex-start;text-align:left;}
  .ct-feat figure{flex:none;margin:0;}
  .ct-feat figure img{width:150px;}
  .ct-feat h3{text-align:left;}
  .ct-courses{grid-template-columns:1fr;}
  .ct-opts{grid-template-columns:1fr;}
}

/* ============ スマホ ============ */
@media (max-width:768px){
  /* スマホでは横長すぎてタイトルが小さくなるので、左右を少し切って縦を稼ぐ */
  .ct-main img{aspect-ratio:2/1;}

  .ct-lead{margin-top:26px;}
  /* スマホでも1行に収まるよう、画面幅に合わせて字を小さくします */
  .ct-lead__catch{font-size:clamp(15px,4.9vw,20px);margin-bottom:18px;}
  .ct-lead__body p{font-size:14px;line-height:2.05;}

  .ct-subhead{margin-top:38px;font-size:16px;}
  .ct-scenes{grid-template-columns:1fr;gap:8px;}
  .ct-scenes li{padding:11px 13px;font-size:13px;}

  .ct-movie{flex-direction:column;gap:22px;padding:20px 16px;}
  .ct-movie__frame{flex:none;width:min(280px,100%);align-self:center;}
  .ct-movie__text p{font-size:13.5px;line-height:2;}

  .ct-feat li{flex-direction:column;gap:16px;align-items:center;text-align:center;}
  .ct-feat figure img{width:160px;}
  .ct-feat h3{text-align:center;font-size:16px;}

  .ct-base{flex-direction:column;align-items:stretch;}
  /* 縦並びのとき flex:1 1 300px が「高さ300px」の意味になってしまうので打ち消す */
  .ct-base__card{flex:0 0 auto;max-width:none;padding:20px 18px;}
  .ct-base__plus{padding:4px 0;}

  .ct-course{padding:0 16px 20px;}
  .ct-course__head{margin:0 -16px 16px;padding:13px 16px;gap:8px 12px;}
  .ct-course__mark{width:42px;height:42px;font-size:18px;}
  .ct-course__price b{font-size:26px;}
  .ct-course__rec{margin-left:0;}
  .ct-course__neta{font-size:12.5px;line-height:1.95;}

  .ct-opt{flex-direction:column;padding:20px 16px;}
  .ct-opt__pics{align-self:center;}
  .ct-opt__ttl{font-size:17px;}
  .ct-opt__price{gap:8px 20px;}
  .ct-opt__price dd b{font-size:23px;}
  .ct-opt__pics--cut img{width:clamp(112px,34vw,150px);}
  .ct-odb-wrap{flex-direction:column;gap:18px;}
  .ct-odb{gap:18px;justify-content:center;}
  .ct-odb__item--s{flex:0 0 min(38%,140px);}
  .ct-odb__item--l{flex:0 0 min(50%,184px);}
  .ct-odb__item figure{margin-bottom:10px;}

  .ct-flow li{flex-direction:column;gap:6px;padding-left:20px;padding-bottom:28px;}
  .ct-flow__num{font-size:22px;}

  .ct-voices{grid-template-columns:1fr;}
  .ct-voice__txt{font-size:14px;}

  .ct-cta{padding:36px 18px;}
  .ct-cta .page-btn{width:100%;}
}