@charset "UTF-8";
/* CSS Document */

/* =========================
   Base
========================= */
:root{
  --orange:#ff7a00;
  --orange2:#ff8a1a;
  --black:#111;
  --gray-bg:#e9e9e9;
  --gray-2:#d9d9d9;
  --line:#cfcfcf;
  --white:#fff;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --wrap: 1100px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  color:var(--black);
  background:#fff;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{
  width:min(var(--wrap), calc(100% - 32px));
  margin:0 auto;
}

@media (max-width: 768px){
  .wrap{ width:calc(100% - 24px); }
}


.pc {
	display: block!important;
}
.sp {
	display: none!important;
}

@media screen and (max-width: 767px) {

	.pc {
        display: none!important;
    }
    .sp {
        display: block!important;
    }
}


/* =========================
   Header
========================= */
.siteHeader{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid #eee;
}
.siteHeader__inner{
  height:8vh;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand__main{
  font-weight:900;
  font-style: italic;
  letter-spacing:.02em;
  font-size:3em;
}
.brand__kana{
  font-weight:700;
  font-size:14px;
  font-style: normal;
  margin-left:10px;
}
.brand__badge{
  background:#111;
  color:#fff;
  font-weight:700;
  font-size:12px;
  padding:8px 10px;
  border-radius:4px;
}

@media (max-width:768px){
  .siteHeader__inner{ height:60px; }
  .brand__main{ font-size:22px; }
  .brand__kana{ display:none; }
  .brand__badge{ font-size:11px; padding:7px 9px; }
}

/* =========================
   Hero
========================= */
.hero{
  background:#fff;
  padding:0;
}
.hero__visual{
  position:relative;
  border:1px solid #eee;
  background:#fff;
}
.hero__img{
  width:100%;
  object-fit:cover;
}
.hero__copy{
  text-align:center;
  padding:28px 0 34px;
}
.hero__title{
  margin:0;
  font-size:4em;
  font-style: italic;
  letter-spacing:.02em;
}
.hero__lead{
  margin:14px auto 0;
  max-width:780px;
  font-size:18px;
  line-height:1.9;
  font-weight:700;
}
.hero__lead strong{ font-weight:900; }

@media (max-width:768px){
  .hero__title{ font-size:34px; }
  .hero__lead{ font-size:15px; }
}

/* =========================
   About
========================= */
.about{
  padding:0 0 28px;
}
.about__img{ width:100%; }

/* =========================
   Section Head
========================= */
.section{ padding:56px 0; }
.sectionHead{
  text-align:center;
  margin-bottom:26px;
}
.sectionHead__title{
  margin:0;
  font-size: 4em;
  font-style: italic;
  letter-spacing:.04em;
}
.sectionHead__sub{
  margin:10px 0 0;
  font-size:18px;
  /* font-weight:800; */
}

@media (max-width:768px){
  .section{ padding:44px 0; }
  .sectionHead__title{ font-size:34px; }
  .sectionHead__sub{ font-size:15px; }
}

/* =========================
   WORKS
========================= */
.section--works{ background:var(--gray-bg); }
.worksGrid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:14px;
}
.workCard{
  display:block;
  background:#fff;
  border:1px solid #ddd;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.workCard__ph{
  aspect-ratio: 3 / 4;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#777;
  /* font-weight:800; */
  background: linear-gradient(135deg, rgba(0,0,0,.05), rgba(0,0,0,0));
}

@media (max-width:1000px){
  .worksGrid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:600px){
  .worksGrid{ grid-template-columns: repeat(2, 1fr); }
}

/* =========================
   FLOW
========================= */
.flow{
  width: 100vw;
  margin: 0 auto;
}
.flow__img{ width:100%; border:0; }
.flowList{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* =========================
   BINDING TYPE
========================= */
.section--binding{ background:#fff; }
.bindingGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 2%;
}
.bindingCard{ border:0; }
.bindingCard__book{
  width:100%;
  border:1px solid #eee;
}
.bindingCard__bar{
  background:var(--orange);
  padding:0;
	margin: -0.5% auto 0 auto;
}
.bindingCard__barInner{
  height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bindingCard__barTitle{
  font-weight:900;
  font-size: 1.2em;
  letter-spacing:.04em;
  color:#111;
}
.bindingCard__body{ padding:26px 10px 0; }
.bindingSpec{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
}
.bindingSpec li{
  padding:16px 10px;
  border-top:1px solid #ddd;
  font-weight:700;
  font-size:18px;
  text-align:left;
}
.bindingSpec li:last-child{ border-bottom:1px solid #ddd; }

@media (max-width:900px){

	.bindingCard__bar {
		margin: -0.5% auto 0 auto;
	}
	.bindingGrid {
	  gap: 1%;
	}
	.bindingCard__barInner{
		height:6vh;
	}
	.bindingCard__barTitle {
		font-size: 1.1em;
	}
	.bindingSpec{
		gap: 0;
	}
	.bindingSpec li{
		padding: 0.8em 0;
		font-weight:normal;
		font-size:1em;
		text-align:left;
	}
}

/* =========================
   PRICE
========================= */
.price__head{
  background:var(--orange);
  padding:38px 0 44px;
}
.price__title{
  margin:0;
  text-align:center;
  font-size:62px;
  font-weight:900;
  letter-spacing:.04em;
  font-style:italic;
}
.price__sub{
  margin:10px 0 0;
  text-align:center;
  font-size:20px;
}

.price__body{
  background:var(--gray-bg);
  padding:42px 0 60px;
}
.price__h3{
  margin:0 0 18px;
  text-align:center;
  font-size:30px;
  font-weight:900;
  letter-spacing:.06em;
}

.pricePanel{ background:transparent; }

.pricePanel__grid{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:14px 18px;
  align-items:center;
  margin:0 auto 16px;
}
.priceRowLabel{
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid #e1e1e1;
  font-weight:900;
}
.priceRow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.seg{
  height:46px;
  width:100%;
  border:1px solid #cfcfcf;
  background:#fff;
  font-weight:900;
  font-size:16px;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
	color:#000;
}
.seg span{
  font-size:12px;
  opacity:.85;
}
.seg:hover{ transform: translateY(-1px); }
.seg.is-active{
  background:var(--orange);
  border-color:var(--orange);
  color:#111;
}
.seg.is-active span{ opacity:.9; }

.priceNoteBox{
  background:#fff;
  border:1px solid #cfcfcf;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  display:grid;
  grid-template-columns: 160px 1fr;
  align-items:center;
  margin:18px 0 0;
}
.priceNoteBox__label{
  padding:16px 18px;
  font-weight:900;
  background:#fff;
  border-right:1px solid #d8d8d8;
}
.priceNoteBox__text{
  padding:16px 18px;
  /* font-weight:800; */
  line-height:1.7;
}

.picked{
  margin-top:18px;
  background:#fff;
  border:1px solid #cfcfcf;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  display:grid;
  grid-template-columns: 150px 1fr;
}
.picked__label{
  background:#bdbdbd;
  color:#111;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.2;
  letter-spacing:.02em;
  padding:18px 10px;
}
.picked__chips{
  padding:16px 18px 0;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.chip{
  background:var(--orange);
  color:#111;
  font-weight:900;
  padding:12px 18px;
  min-width:84px;
  text-align:center;
  border:1px solid rgba(0,0,0,.08);
}
.picked__desc{
  grid-column: 2 / 3;
  padding:10px 18px 16px;
  /* font-weight:800; */
  color:#222;
  line-height:1.7;
  border-top:1px solid #e5e5e5;
}

/* =========================
   PRICE CSV (asset8風)
========================= */
.priceCsv{ margin-top:18px; }

.priceTabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  margin:0 0 12px;
}

.priceTab{
	color: #000;
  appearance:none;
  border:1px solid #cfcfcf;
  background:#fff;
  font-weight:900;
  padding:10px 14px;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
}
.priceTab:hover{ transform: translateY(-1px); }
.priceTab.is-active{
  background:var(--orange);
  border-color:var(--orange);
  color:#111;
}

.priceTableFrame{
  background:#fff;
  border:1px solid #bfbfbf;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  overflow:hidden;
}

.priceTableScroll{
  overflow:auto;
}

.priceTableWrap{
  min-width: 980px;
}

.priceTableLoading{
  padding:20px;
  font-weight:900;
  color:#555;
}

.priceHint{
  margin:10px 0 0;
  font-size:13px;
  color:#111;
  opacity:.9;
}

/* table */
.priceTable{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:0.8em;
}

.priceTable th,
.priceTable td{
  border:1px solid #cfcfcf;
  padding:10px 0; /* 8px */
  text-align:center;
  background:#fff;
}

.priceTable thead th{
  background:#d0d0d0;
}

.th-top-left{
  background:#bdbdbd !important;
}

.th-row{
  background:#d0d0d0 !important;
  white-space:nowrap;
}

/* sticky */
.th-sticky-top{
  position:sticky;
  top:0;
  z-index:2;
}
.th-sticky-left{
  position:sticky;
  left:0;
  z-index:3;
}
.th-sticky-left.th-top-left{
  z-index:4;
}

/* cells */
.td-price{
  cursor:pointer;
}
.td-price:hover{
  background: rgba(255,122,0,.12);
}

/* hover bands（見本の色違い＝ホバー） */
.priceTable tr.is-hover-row td{
  /* background: rgba(255,122,0,.06); */
}
.priceTable .is-hover-col{
  /* background: rgba(255,122,0,.10); */
}

/* picked: オレンジ一点＋縦帯/横帯 */
.td-price.is-picked{
  background: var(--orange);
  color:#111;
  font-weight:900;
}

.priceTable tr.is-picked-row td{
  background: rgba(255,122,0,.08);
}
.priceTable .is-picked-col{
  background: rgba(255,122,0,.12);
}

/* 行選択 + 列選択 が重なったセル */
.priceTable tr.is-picked-row td.is-picked-col {
  background: #ff7a00;
  color: #fff;
}



/* =========================
   OPTION SERVICE（PRICEの続き）
========================= */
.optSection{ margin-top:34px; }

.optTitle{
  text-align:center;
  font-size:28px;
  font-weight:900;
  margin:4vh auto 2vh auto;
  letter-spacing:.04em;
}

.optBox{ position:relative; background:transparent; }

.optTable{
  background:#fff;
  border:1px solid #bfbfbf;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  overflow:hidden;
}

.optRow{
  display:grid;
  grid-template-columns: 220px 1fr;
  border-top:1px solid #bfbfbf;
}
.optRow:first-child{ border-top:0; }

.optCat{
  background:#d2d2d2;
  font-weight:900;
  padding:18px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  border-right:1px solid #bfbfbf;
}
.optDot{
  width:12px;
  height:12px;
  border-radius:999px;
  background:var(--orange);
  flex:0 0 auto;
}

.optCells{ display:grid; }

.optItem{
  display:grid;
  grid-template-columns: 1.5vw 1fr 25vw;
  gap:10px;
  align-items:center;
  padding:14px 16px;
  border-top:1px solid #bfbfbf;
}
.optCells .optItem:first-child{ border-top:0; }

.optCheck{
  width:18px;
  height:18px;
  margin:0 auto;
  accent-color: var(--orange);
}
.optName{ /* font-weight:800; */ line-height:1.5; }
.optPrice{ text-align:left; /* font-weight:800; */ white-space:nowrap; }

.optBadgeArea{
  position:absolute;
  right:18px;
  top:20px;
  width:220px;
  height:260px;
  pointer-events:none;
}
.optArrow{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:0;
  height:100%;
}
.optArrow::before{
  content:"";
  position:absolute;
  left:50%;
  top:22px;
  transform:translateX(-50%);
  width:12px;
  height:190px;
  background:var(--orange);
}
.optArrow::after{
  content:"";
  position:absolute;
  left:50%;
  top:204px;
  transform:translateX(-50%) rotate(45deg);
  width:18px;
  height:18px;
  border-right:6px solid var(--orange);
  border-bottom:6px solid var(--orange);
}
.optFreeBadge{
  position:absolute;
  right:0;
  top:70px;
  width:118px;
  height:118px;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.15;
  letter-spacing:.02em;
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}

.optNote{
  margin:14px 0 0;
  line-height:1.8;
  font-size:14px;
  color:#111;
}

/* 合計 */
.sumBox{
  margin-top:26px;
  border:1px solid #bfbfbf;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.sumBox__bar{
  background:var(--orange);
  color:#111;
  font-weight:900;
  text-align:center;
  padding:14px 12px;
  font-size:22px;
  letter-spacing:.04em;
}
.sumBox__body{
  padding:22px 18px 26px;
  text-align:center;
}
.sumBox__specTitle{
  font-weight:900;
  margin:0 0 10px;
  color:#111;
}
.sumBox__spec{
  /* font-weight:800; */
  line-height:1.8;
  margin:0 auto 14px;
  max-width:900px;
}
.sumBox__price{
  font-weight:900;
  font-size:52px;
  letter-spacing:.02em;
  margin:0 0 6px;
}
.sumBox__tax{
  /* font-weight:800; */
  font-size:14px;
  opacity:.95;
}

/* =========================
   Responsive
========================= */
@media (max-width:900px){
  .pricePanel__grid{ grid-template-columns: 92px 1fr; }
  .priceRow{ grid-template-columns:1fr; }
  .seg{ justify-content:space-between; padding:0 14px; }
  .priceNoteBox{ grid-template-columns: 120px 1fr; }
  .picked{ grid-template-columns: 110px 1fr; }
  .price__title{ font-size:46px; }
  .price__h3{ font-size:22px; }

  .priceTableWrap{ min-width: 820px; }
}
@media (max-width:520px){
  .price__head{ padding:30px 0 36px; }
  .price__title{ font-size:40px; }
  .price__sub{ font-size:16px; }
  .chip{ padding:10px 14px; }

  .priceTabs{ gap:8px; }
  .priceTab{ padding:9px 12px; font-size:13px; }
}

/* オプション表：スマホ */
@media (max-width: 1020px){
  .optBadgeArea{ display:none; }
  .optRow{ grid-template-columns: 190px 1fr; }
  .optItem{ grid-template-columns: 4vw 1fr; }
  .optPrice{ white-space:nowrap; margin-left: 10vw;}   /* normal → nowrap に変更 */
}
@media (max-width: 640px){
  .optRow{ grid-template-columns: 1fr; }
  .optCat{ border-right:0; border-bottom:1px solid #bfbfbf; }
  .optItem{ padding:12px 12px; }
  .sumBox__price{ font-size:40px; }
}

/* =========================
   Footer
========================= */
.siteFooter{
  background:#fff;
  border-top:1px solid #eee;
  padding:22px 0;
}
.siteFooter__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  /* font-weight:800; */
}
.toTop{ font-weight:900; }




/* mail.cssはそのまま。LP側に少しだけ足す */
    .section--contact{ padding:56px 0; background:#f6f6f6; }
    .contactWrap{ width:min(var(--wrap,1100px), calc(100% - 32px)); margin:0 auto; }
    .contactHead{ text-align:center; margin: 0 auto 4vh auto; }
    .contactHead__title{ margin:0; font-size:3em; font-style:italic; letter-spacing:.04em; font-weight:900; }
    .contactHead__sub{ margin:10px 0 0; font-size:16px;}

    /* CONTACT側の見積表示（ここだけ） */
    .estSendBox{ border:1px solid #bfbfbf; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.06); margin:4vh auto 2vh auto; }
    .estSendBox__bar{ background:var(--orange,#ff7a00); padding:18px 12px; text-align:center; font-weight:900; font-size:34px; letter-spacing:.04em; }
    .estSendBox__body{ padding:26px 16px 28px; text-align:center; }
    .estSendBox__label{ font-weight:900; font-size:20px; margin:0 0 12px; }
    .estSendBox__spec{ font-weight:900; font-size:20px; line-height:1.7; margin:0 0 22px; word-break:break-word; }
    .estSendBox__price{ font-weight:900; font-size:72px; margin:0 0 6px; }
    .estSendBox__tax{ font-weight:900; margin:0; opacity:.95; }
    @media (max-width:640px){
      .contactHead__title{ font-size:34px; }
      .estSendBox__bar{ font-size:24px; }
      .estSendBox__spec{ font-size:16px; }
      .estSendBox__price{ font-size:46px; }
    }

    .noticeFail{
      background:#fff3f3; border:1px solid #f1b0b7;
      padding:12px 14px; margin:0 0 14px; font-weight:800;
    }
    .noticeOk{
      background:#f3fff3; border:1px solid #b7f1b7;
      padding:12px 14px; margin:0 0 14px; font-weight:900;
    }
    .fieldError{ color:#c30000; font-weight:900; margin-top:6px; }
    .contactActions{ display:flex; justify-content:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
    .contactBtn{
      width:min(520px, 100%); height:72px; border:0; background:#ff7a00; color:#fff;
      font-weight:900; font-size:22px; letter-spacing:.04em; cursor:pointer; border-radius:6px;
      box-shadow:0 10px 22px rgba(0,0,0,.12);
    }
    .contactBtn--ghost{ background:#777; }
    .contactBtn:hover{ filter:brightness(0.98); transform:translateY(-1px); }

    .resetActions{ display:flex; justify-content:center; margin-top:10px; }
    .resetLink{
      display:inline-flex; align-items:center; justify-content:center;
      width:min(520px, 100%); height:56px;
      background:#444; color:#fff; text-decoration:none;
      font-weight:900; border-radius:6px;
    }



/* =========================
   WORKS Swiper + Modal（差し替え用）
========================= */

/* ---- WORKS slider ---- */
.worksSwiper {
  position: relative;
  width: 100%;
  padding: 10px 0 34px; /* 下にドット分の余白 */
  overflow: visible; /* 端のチラ見せ */
}
/* Swiperの横スワイプを取りやすくする */
.worksSwiper { touch-action: pan-y; }
.workCard { touch-action: manipulation; }
.worksSwiper{ position: relative; }

/* WORKS 矢印がカードに負けないように最優先で前面へ */
.worksNav{
  z-index: 999 !important;
  pointer-events: auto !important;
}

/* Swiperの基本 */
.worksSwiper .swiper-wrapper {
  align-items: stretch;
}
.worksSwiper .swiper-slide {
  height: auto;
  /* ★幅はvw/%で管理（SPでpx固定しない） */
  width: 78vw;
  max-width: 520px;
}

/* ブレイクポイントで「見える枚数感」を調整 */
@media (min-width: 640px){
  .worksSwiper .swiper-slide { width: 42vw; max-width: 420px; }
}
@media (min-width: 900px){
  .worksSwiper .swiper-slide { width: 26vw; max-width: 360px; }
}
@media (min-width: 1200px){
  .worksSwiper .swiper-slide { width: 18vw; max-width: 320px; }
}

/* カード */
.workCard{
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);

  /* ★PCドラッグしやすく */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.workCard:active{ cursor: grabbing; }

/* 画像は枠にフィット */
.workCard img,
.workCard__img{
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Nav arrows（位置ブレ対策） ---- */
.worksNav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  cursor: pointer;
  z-index: 30;
}

.worksNav--prev{ left: 10px; }
.worksNav--next{ right: 10px; }

.worksNav::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width: 11px;
  height: 11px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(225deg);
}
.worksNav--next::before{ transform: rotate(45deg); }

/* SPは矢印を少し内側に */
@media (max-width: 768px){
  .worksNav--prev{ left: 6px; }
  .worksNav--next{ right: 6px; }
}

/* ---- Pagination（ズレ対策：自前bullet） ---- */
.worksPagination{
  margin-top: 12px;
  text-align: center;
  line-height: 1;
}

/* Swiper標準bulletではなく、JSで .worksDot を作ります */
.worksDot{
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 5px;
  border-radius: 999px;
  background: #000;
  opacity: .22;
  cursor: pointer;
  vertical-align: middle;
}
.worksDot.is-active{
  opacity: 1;
  background: #ff7a00;
}

/* =========================
   WORKS Modal（ギャラリー）
========================= */

.worksModal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.worksModal.is-open{ display: block; }

.worksModal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
}

.worksModal__panel{
  position: relative;
  width: min(92vw, 1200px);
  height: min(90vh, 820px);
  margin: 6vh auto 0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
}

.worksModal__head{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
}
.worksModal__title{
  font-weight: 900;
  letter-spacing: .04em;
}
.worksModal__close{
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.worksModal__body{
  flex: 1 1 auto;
  min-height: 0; /* ★重要：画面内に収める */
  display: flex;
}

.worksModalSwiper{
  width: 100%;
  height: 100%;
  position: relative;
  background: #fafafa;
}

.worksModalSwiper .swiper-slide{
  display: flex;
  align-items: center;
  justify-content: center;
}

.worksModalSwiper .swiper-slide img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* モーダル内矢印 */
.worksModalNav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  cursor: pointer;
  z-index: 10;
}
.worksModalNav--prev{ left: 10px; }
.worksModalNav--next{ right: 10px; }
.worksModalNav::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(225deg);
}
.worksModalNav--next::before{ transform: rotate(45deg); }

.worksModalPagination{
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
}

/* =========================
   WORKS モーダル：ドット色
========================= */

/* 通常 */
.worksModalPagination .swiper-pagination-bullet{
  background: #999;     /* 非アクティブ */
  opacity: .4;
}

/* アクティブ */
.worksModalPagination .swiper-pagination-bullet-active{
  background: #ff7a00;  /* ← アクティブ色 */
  opacity: 1;
}