/* 双六ボード用スタイル（HPBでは編集しないでください） */
:root{
  --ink:#1f2937;
  --muted:#475569;
  --max:1100px;
  --headerH:112px;
  --boardAspect:16/9;
  --shadow:0 14px 35px rgba(0,0,0,.10);
  --shadow2:0 10px 24px rgba(0,0,0,.10);
  --tileW:clamp(130px, 16%, 210px);
}
.sugoroku-container{
width:min(var(--max),92vw);
margin-inline:auto;
margin-bottom:2em}
.boardWrap{margin:0}
.boardWrap .board{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  min-height: 480px;
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.08);
  background:#e8f6ff url("img/bg_board.png") top center/cover no-repeat;
}
.boardWrap .board::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/bg_board.png") top center / cover no-repeat;
  transform: scale(1.01); 
  filter:saturate(1.05) contrast(1.02);
}
.boardWrap .boardBg{
  position:absolute;inset:0;
  /*background:url("img/bg_board.png") top center/cover no-repeat;*/
    /*transform:scale(1.01);*/
    /*filter:saturate(1.05) contrast(1.02);*/
}
.boardWrap .boardSkyTitle{
  position:absolute;left:50%;top:5%;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:18px 28px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.10));
  border:none;border-radius:999px;
  backdrop-filter:blur(6px);
  box-shadow:0 30px 60px rgba(0,0,0,.18);
  animation:skyFloat 7s ease-in-out infinite;
  text-align:center;user-select:text;
}
.boardWrap .boardSkyTitle:focus{outline:3px solid rgba(59,130,246,.55);outline-offset:4px}
.boardWrap .skyMain{font-size:clamp(28px,4vw,56px);font-weight:900;letter-spacing:.03em;color:#5a4638;text-shadow:0 2px 6px rgba(255,255,255,.85),0 10px 26px rgba(0,0,0,.25);line-height:1.12;white-space:nowrap;padding-left:0.5em;}
/*.boardWrap .skySub{font-size:clamp(14px,1.6vw,18px);font-weight:750;color:#2f6d3b;opacity:.92;text-shadow:0 1px 6px rgba(255,255,255,.75),0 6px 18px rgba(0,0,0,.18);line-height:1.25;white-space:nowrap}*/
.boardWrap .skySub{font-size:clamp(12px,1.4vw,16px);font-weight:750;color:#2f6d3b;opacity:.92;text-shadow:0 1px 6px rgba(255,255,255,.75),0 6px 18px rgba(0,0,0,.18);line-height:1.25;white-space:nowrap}
@keyframes skyFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-10px)}}
.boardWrap .tiles{position:absolute;inset:0;pointer-events:none;z-index:1000}
.boardWrap .tileWrap{pointer-events:auto;position:absolute;width:var(--tileW);border:0;padding:0;background:transparent;cursor:pointer;z-index:5}
.boardWrap .tileWrap img{width:100%;height:auto;display:block;border-radius:16px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.18))}
.boardWrap .tileLabel{position:absolute;left:10%;right:10%;top:-34px;text-align:center;font-weight:900;font-size:clamp(13px,0.6vw,8px);color:#0f172a;background:rgba(255,255,255,.88);border:2px solid rgba(0,0,0,.20);border-radius:999px;padding:4px 6px;box-shadow:0 10px 20px rgba(0,0,0,.10)}
.boardWrap .tileLabel[contenteditable="true"]:focus{outline:3px solid rgba(59,130,246,.55);outline-offset:2px}
@media (min-width:981px){
.boardWrap .t1 .tileLabel{font-size:12px;line-height:1.15}}
.boardWrap .tooltip{position:absolute;left:50%;bottom:100%;transform:translateX(-50%) translateY(-12px);min-width:220px;max-width:360px;background:rgba(255,255,255,.96);border:2px solid rgba(0,0,0,.18);border-radius:14px;padding:10px 12px;box-shadow:0 14px 30px rgba(0,0,0,.16);font-size:13px;line-height:1.55;text-align:left;opacity:0;pointer-events:none;transition:.18s ease;z-index:1002}
.boardWrap .tooltip::after{content:"";position:absolute;width:14px;height:14px;background:rgba(255,255,255,.96);border-left:2px solid rgba(0,0,0,.18);border-top:2px solid rgba(0,0,0,.18);bottom:-7px;left:50%;transform:translateX(-50%) rotate(225deg)}
.boardWrap .tooltip.tooltip-up::after{top:-7px;bottom:auto;transform:translateX(-50%) rotate(45deg)}
.boardWrap .tileWrap:hover .tooltip,.boardWrap .tileWrap:focus-visible .tooltip,.boardWrap .tileWrap[data-open="1"] .tooltip{opacity:1}
.boardWrap .tileWrap:focus-visible{outline:4px solid rgba(59,130,246,.55);outline-offset:10px;border-radius:14px}
.boardWrap .tileWrap:hover,.boardWrap .tileWrap:focus-visible,.boardWrap .tileWrap[data-open="1"]{z-index:1001}
.boardWrap .t1{left:6%;top:10%}.boardWrap .t2{left:30%;top:37%}.boardWrap .t3{left:10%;top:68%}.boardWrap .t4{left:70%;top:65%}.boardWrap .t5{left:75%;top:15%} 
.sugoroku-container .mobileList{display:none;margin:16px 0 28px}
.sugoroku-container .mCard{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:14px;border-radius:18px;border:1px solid rgba(0,0,0,.10);box-shadow:0 12px 26px rgba(0,0,0,.08);background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,1));margin-bottom:14px}
.sugoroku-container .mCard img{width:120px;border-radius:16px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.15))}
.sugoroku-container .mCard h3{margin:0 0 4px;font-size:16px;font-weight:900}
.sugoroku-container .mCard h3[contenteditable="true"]:focus{outline:3px solid rgba(59,130,246,.55);border-radius:8px}
.sugoroku-container .mCard p{margin:0 0 8px;color:var(--muted);font-size:13px;font-weight:650}
.sugoroku-container details{border-top:1px dashed rgba(0,0,0,.18);padding-top:8px}
.sugoroku-container summary{cursor:pointer;font-weight:900;color:#0f172a;list-style:none}
.sugoroku-container summary::-webkit-details-marker{display:none}
.sugoroku-container .detailText{margin-top:8px;font-size:13px}
.sugoroku-container .mCard[data-href]{cursor:pointer}
@media (max-width:980px){
  .boardWrap .board{aspect-ratio:9/26;min-height:0}
  .boardWrap .boardBg{background:none!important;position:absolute;inset:0;overflow:hidden;transform:none}
  .boardWrap .boardBg::before{content:"";position:absolute;inset:0;background:url("img/bg_board.png") center top/100% auto no-repeat;--bg-stretch-y:5.2;transform:scaleY(var(--bg-stretch-y));transform-origin:top center;will-change:transform}
  :root{--tileW:clamp(120px,42vw,180px)}
  .boardWrap .t1{left:4%;top:22%}.boardWrap .t5{right:4%;left:auto!important;top:30%}
  .boardWrap .t2{left:4%;top:48%}.boardWrap .t4{right:4%;left:auto!important;top:58%}
  .boardWrap .t3{left:4%;top:72%}
  .boardWrap .tileLabel{font-size:10px}
  .boardWrap .tileWrap .tooltip{left:50%;right:auto;transform:translateX(-50%) translateY(-12px);max-width:min(260px,86vw);transform-origin:bottom center}
  .boardWrap .tileWrap .tooltip::after{left:50%;bottom:-7px;top:auto;transform:translateX(-50%) rotate(225deg)}
  .boardWrap .board{position:relative;background:transparent!important;overflow:hidden}
  .boardWrap .boardBg{position:absolute;top:0;left:0;right:0;bottom:0;overflow:visible}
}

/* 特定タイル（スタートプロジェクト t1, 選べるマネジメント研修 t5）は
   上に出すと隠れるため、下に表示する（上書き） */
.boardWrap .tileWrap.t1 .tooltip,
.boardWrap .tileWrap.t5 .tooltip{
  top:100%;
  bottom:auto;
  transform:translateX(-50%) translateY(12px);
  transform-origin:top center;
}
.boardWrap .tileWrap.t1 .tooltip::after,
.boardWrap .tileWrap.t5 .tooltip::after{
  top:-7px;
  bottom:auto;
  transform:translateX(-50%) rotate(45deg);
}

/*印刷用の設定を追記（2026/03/12）*/
@media print,media not screen {
@page {
    size: A4;
    margin: 5mm; /* 用紙の余白を設定 */
  }
 body {
    width: 100% !important; /* A4の幅 */
    max-width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    margin: 0;
    padding: 0;
    zoom: 68%; /* コンテンツがはみ出る場合に強制縮小（Chrome/Safari） */
  }
.site{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}
.sugoroku-container{
    width: 100% !important;
    max-width: 190mm !important;
    min-width: 100% !important;
    height:auto;
    margin: 0 !important;
    padding: 0 !important;
}
.boardWrap .board{
    width: 100%;
    aspect-ratio:16/9!important;
}
.boardWrap .boardBg{
    background: url("img/bg_board.png") top center/cover no-repeat;
    transform: scale(1.01)!important;
}
.boardWrap .boardBg::before{
                                max-height:200mm;
    background: url("img/bg_board.png") top center/cover no-repeat;
--bg-stretch-y: 1.1!important;
    transform: scale(1.0)!important;
}
.boardWrap .t1{left:6%;top:10%}.boardWrap .t2{left:30%;top:37%}.boardWrap .t3{left:10%;top:68%}.boardWrap .t4{left:70%;top:65%}.boardWrap .t5{left:75%;top:15%}
}