:root{
    --cream:#f7f2e7;
    --paper:#fffdf8;
    --ink:#332c24;
    --moss:#46604a;
    --moss-deep:#2f4234;
    --terracotta:#c1764f;
    --gold:#d6ab5c;
    --gold-glow:rgba(214,171,92,.35);
    --line:#cfc3ab;
    --line-light:#e3d8c4;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Noto Sans JP',sans-serif;
    background:var(--cream);
    color:var(--ink);
    line-height:1.7;
    padding:0 0 80px;
  }
  .wrap{max-width:920px;margin:0 auto;padding:0 24px;}

  /* ---------- HERO ---------- */
 header.hero{
  padding:48px 24px 36px;
  text-align:center;
  background:
    radial-gradient(circle at 50% -10%, var(--gold-glow), transparent 60%),
    var(--hero-color);
  color:var(--cream);
  border-bottom:6px solid var(--gold);
}
:root{
  --hero-color:#5c4534;
}
  header.hero .eyebrow{
    letter-spacing:.25em;
    font-size:12px;
    color:var(--gold);
    margin-bottom:10px;
    text-transform:uppercase;
  }
  header.hero .eyebrow a{
    color:var(--gold);
    text-decoration:none;
    border-bottom:1px solid var(--gold);
  }
  header.hero h1{
    font-family:'Shippori Mincho',serif;
    font-weight:700;
    font-size:clamp(26px,5vw,38px);
    margin:0 0 12px;
    letter-spacing:.08em;
  }
  header.hero p{
    font-size:13px;
    color:#e7e2d4;
    max-width:520px;
    margin:0 auto;
  }

  /* ---------- FORM ---------- */
  .panel{
    background:var(--paper);
    border:1px solid var(--line-light);
    border-radius:18px;
    padding:28px clamp(18px,4vw,40px);
    margin:-26px auto 32px;
    max-width:680px;
    box-shadow:0 10px 30px -18px rgba(50,40,20,.4);
    position:relative;
    z-index:2;
  }
  .panel h2{
    font-family:'Shippori Mincho',serif;
    font-size:18px;
    margin:0 0 18px;
    color:var(--moss-deep);
    display:flex;align-items:center;gap:10px;
  }
  .panel h2::before{
    content:"";
    display:inline-block;width:10px;height:10px;border-radius:50%;
    background:var(--terracotta);
  }
  label{
    display:block;
    font-size:13px;
    color:#6e6354;
    margin-bottom:6px;
    letter-spacing:.05em;
  }
  .field{margin-bottom:18px;}
  input[type="text"],
  input[type="number"]{
    font-family:'Noto Sans JP',sans-serif;
    font-size:16px;
    padding:12px 14px;
    border:1px solid var(--line-light);
    border-radius:10px;
    background:#fffefb;
    color:var(--ink);
    box-sizing:border-box;
  }

  input[type="text"]{
    width:100%;
}
/* 数値入力共通 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

input[type="number"]{
    appearance:textfield;
    -moz-appearance:textfield;
}

  input:focus{outline:2px solid var(--moss);outline-offset:1px;}
  .hint{font-size:12px;color:#9a8d77;margin-top:6px;}
  button.calc{
    width:100%;
    padding:14px;
    border:none;
    border-radius:12px;
    background:var(--hero-color);
    color:var(--cream);
    font-size:16px;
    font-weight:500;
    letter-spacing:.08em;
    cursor:pointer;
    transition:background .2s ease, transform .1s ease;
  }
  button.calc:hover{background:var(--moss);}
  button.calc:active{transform:scale(.99);}
  .error{
    color:#a23b2e;
    font-size:13px;
    margin-top:10px;
    display:none;
  }
/* 生年月日入力 */
  .birth-row{
    display:flex;
    align-items:center;
    gap:4px;
}

.birth-row input{
    height:48px;
    padding:0 12px;
    font-size:18px;
    border:1px solid var(--line);
    border-radius:10px;
    box-sizing:border-box;
    text-align:center;
}

.birth-row span{
    font-size:18px;
    font-weight:600;
    color:var(--moss-deep);
}
#year{
    width:110px;
    text-align:center;
}

#month,
#day{
    width:70px;
    text-align:center;
}
.birth-row span{
    font-size:18px;
    font-weight:600;
    color:var(--moss-deep);
}

  /* ---------- KARTE ---------- */
  #karte{display:none;}

  .sheet{
    background:var(--paper);
    border:1px solid var(--line-light);
    border-radius:18px;
    box-shadow:0 10px 30px -18px rgba(50,40,20,.35);
    padding:30px clamp(14px,3vw,34px);
    margin-bottom:36px;
    overflow-x:auto;
  }
  .sheet-title{
    text-align:center;
    margin-bottom:18px;
  }
  .sheet-title .jp{
    font-family:'Shippori Mincho',serif;
    font-size:13px;
    letter-spacing:.4em;
    color:#9a8d77;
  }
  .sheet-title h2{
    font-family:'Shippori Mincho',serif;
    font-size:22px;
    margin:4px 0 0;
    color:var(--moss-deep);
    letter-spacing:.1em;
  }
  .sheet-page-label{
    text-align:right;
    font-size:11px;
    color:#bdb09a;
    letter-spacing:.2em;
    margin-bottom:6px;
  }

  /* header row : name / dob */
  .head-row{
    display:flex;
    flex-wrap:wrap;
    gap:14px 28px;
    border:1px solid var(--line-light);
    border-radius:12px;
    padding:14px 18px;
    margin-bottom:16px;
    font-size:14px;
  }
  .head-row .item{display:flex;align-items:baseline;gap:8px;flex:1 1 200px;}
  .head-row .lbl{
    font-family:'Shippori Mincho',serif;
    font-size:12px;
    color:var(--moss-deep);
    background:#efe7d6;
    padding:3px 8px;
    border-radius:6px;
    white-space:nowrap;
  }
  .head-row .v{font-size:15px;font-weight:500;}

  /* hrader */
  /*
  .head-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.head-middle{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:8px;
}

.head-bottom{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-top:14px;
}

 .name-item{
    text-align:center;
    flex: 1;
}

.roman-row{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}
.head-row .item:nth-child(4){
    min-width:160px;
}
.roman-name{
    white-space:nowrap;
    flex:0 0 auto;
}

.name-sum{
    white-space:nowrap;
}

.name-memo{
    align-self:center;
    margin-top:0;
    font-size:11px;
    color:#8a7f6d;
     min-width: 90px;
}
.birth-item{
    flex:none;
}

.birth-item .v{
    white-space:nowrap;
}

#outNameRoman{
    white-space:nowrap;
}
    */
/* ===== Header ===== */

.head-row{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "top top"
        "name name"
        "birth birth"
        "number number";

    row-gap:12px;

    border:1px solid var(--line-light);
    border-radius:12px;
    padding:16px 20px;
    margin-bottom:16px;
    background:#fffefb;
}

/* ---------- 1段目 ---------- */

.head-top{
    grid-area:top;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.head-name-ja{
    display:flex;
    align-items:center;
    gap:8px;
}
.karte-date{
    font-size:13px;
    color:#8a735c;
    margin-top:-2px;
  }
.head-memo{
    margin-left:62px;   /* NAMEラベルの下から始まる位置 */
    margin-top:2px;
    font-size:12px;
    color:#8a7f6d;
    white-space:nowrap;
}

/* ---------- 2段目 ---------- */

.head-name{
    grid-area:name;
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:6px;
}
.head-name-main{
    display:flex;
    align-items:center;
    gap:8px;
}

.roman-name{
    white-space:nowrap;
}

.name-sum{
    white-space:nowrap;
    font-size:13px;
    color:#8a735c;
    font-weight:700;
    color:var(--moss-deep);
}

/* ---------- 3段目 ---------- */

.head-birth{
    grid-area:birth;

    display:flex;
    align-items:center;
    gap:10px;
}

.head-birth .v{
    white-space:nowrap;
}

/* ---------- 4段目 ---------- */

.head-number{
    grid-area:number;
    display:flex;
    gap:50px;
    align-items:flex-start;
    justify-content:center;
}

.num-item{
    display:flex;
    align-items:center;
    gap:8px;
}

/* 共通 */

.lbl{
    font-family:'Shippori Mincho',serif;
    font-size:12px;
    color:var(--moss-deep);
    /*background:#efe7d6;*/
    padding:3px 8px;
    border-radius:6px;
    white-space:nowrap;
    font-weight: 500;
}

  /* generic value box */
  .vbox{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:46px;height:46px;
    padding:0 6px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fffefb;
    font-family:'Shippori Mincho',serif;
    font-size:20px;
    font-weight:700;
    color:var(--moss-deep);
  }
  .vbox.master{border-color:var(--gold);color:var(--terracotta);box-shadow:0 0 0 3px var(--gold-glow) inset;}
  .vbox.empty{color:#cfc3ab;font-size:14px;}
  .vbox.small{
    min-width:60px;
    height:38px;
    padding:0 8px;
    font-size:16px;
  }
  .vbox.habit{
    min-width:60px;
    height:38px;
    padding:0 8px;
    font-size:16px;
  }
  .soul-box{
    border:2px solid #B3BEA8;
}

  /* row blocks (お宝数 etc.) */
  
  .row-block{
    border:1px solid var(--line-light);
    border-radius:12px;
    padding:14px 18px;
    margin-bottom:12px;
  }
  .row-block2{
    padding:14px 18px;
    margin-bottom:12px;
  }

  .row-block .row-title{
    /*font-family:'Noto Sans JP',sans-serif;*/
    font-weight:500;
    font-size:14px;
    letter-spacing:.03em;
    margin-bottom:10px;
  }
  .row-block2 .row-title{
    /*font-family:'Noto Sans JP',sans-serif;*/
    font-weight:500;
    font-size:14px;
    letter-spacing:.03em;
    margin-bottom:10px;
  }
  .triple{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:40px;
  }
  .triple .cell{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    min-width:100px;
  }
  .triple .cell .name{
    font-size:13px;
    color:var(--moss-deep);
    font-family:'Shippori Mincho',serif;
    letter-spacing:.1em;
    font-weight:500;
  }
  .triple .cell .sub{font-size:10px;color:#9a8d77;}
  .triple .cell .kw{
    /*font-size:11px;
    color:#5b5142;
    text-align:center;
    max-width:130px;
    line-height:1.5;*/
    display:none;
  }

  /* position map */
  .posmap-area{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    margin-top:6px;
  }
  .posmap-block, .cycle-block{
    flex:1 1 360px;
    /*border:1px solid var(--line-light);
    border-radius:12px;*/
    padding:16px;
  }
  .posmap-block h3, .cycle-block h3{
    font-family:'Shippori Mincho',serif;
    font-size:14px;
    color:var(--moss-deep);
    letter-spacing:.15em;
    margin:0 0 12px;
    font-weight:700;
  }

  /* posmap with side axis labels */
  .posmap-layout{
     display:flex;
      align-items:center;
      justify-content:center;
     gap:10px;
  }
  .posmap-grid{
    display:grid;
    grid-template-columns:repeat(3,84px);
    grid-template-rows:repeat(3,84px);
    gap:8px;
  }
  .posmap-grid .pc{

    border:1px solid var(--line-light);
    border-radius:8px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-family:'Shippori Mincho',serif;
    font-size:13px;
    color:#9a8d77;
    background:#fffefb;
    position:relative;
    padding:4px;
    text-align:center;
  }
  .posmap-grid .pc .num{font-size:26px;font-weight:600;color:var(--moss-deep);line-height:1;}
  .posmap-grid .pc .aux{font-size:10px;color:#bdb09a;position:absolute;bottom:3px;right:6px;}
  .posmap-grid .pc{
    position:relative;
  }

  .mark{
    position:absolute;
    top:6px;
    left:6px;
    color:#c54b4b;
    font-size:14px;
    line-height:1;
    letter-spacing:-2px;
    font-weight:bold;
  }
  
  .posmap-right{
    display:grid;
    grid-template-rows:repeat(3,84px);
    align-items:center;
    justify-items:center;
}

.posmap-right div{
    writing-mode:vertical-rl;
    text-orientation:upright;
    font-size:16px;
    color:#6d5d49;
    font-weight:600;
    margin-left:2px;
}

.posmap-bottom{
    display:grid;
    grid-template-columns:repeat(3,84px);
    gap:8px;
    justify-content:center;
    margin-top:10px;
}

.posmap-bottom div{
    text-align:center;
    font-size:16px;
    color:#6d5d49;
    font-weight:700;
}

  .pc.sun{
    background:#fff9ec;
  }

  .pc.moon{
      background:#f3f3f3;
  }

  .pc.center{
      background:#ffffff;
  }

  .posmap-grid .pc .aux{
    font-size:15px;     
    font-weight:bold;
    color:#b89a6d;
    position:absolute;
    bottom:8px;
    right:8px;
    line-height:1;
}

  /* circulation diamond */
  .circ-wrap{
    position:relative;
    width:240px;height:240px;
    margin:20px auto 8px;
  }
  .circ-wrap svg{position:absolute;inset:0;}
  .circ-node{
    position:absolute;
    width:72px;height:72px;
    margin:-36px;
    border:1px solid var(--line-light);
    border-radius:10px;
    background:#fffefb;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
    padding-top:8px;
  }
.circ-node .num{
  font-family:'Shippori Mincho',serif;
  font-size:22px;
  font-weight:700;
  line-height:1;
  color:var(--moss-deep);
  margin-top:0px;
}
  .circ-node.master{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow) inset;}
  .circ-node.master .num{color:var(--terracotta);}
  .circ-node .lbl{
  position:static;
  transform:none;
  left:auto;
  top:auto;

  margin-top:15px;
  font-size:11px;
  line-height:1;
  white-space:nowrap;

  color:var(--moss-deep);
  opacity:.75;
}
 .circ-node .order{
  position:absolute;
  top:-16px;
  left:-4px;

  width:auto;
  height:auto;

  background:none;
  border:none;
  border-radius:0;

  font-size:16px;
  font-weight:600;
  line-height:1;
  color:var(--moss-deep);
}

  /* unsei wave */
  .wave-row{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:center;
    font-size:13px;
  }
  .wave-row .vbox{margin:0 2px;}

  /* table */
  table.kt{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px;}
  table.kt th,table.kt td{
    border:1px solid var(--line-light);
    padding:10px 8px;
    text-align:center;
    vertical-align:middle;
  }
  table.kt th{background:#efe7d6;color:var(--moss-deep);font-weight:500;font-size:12px;}
  table.kt td.label{
    font-family:'Shippori Mincho',serif;
    color:var(--moss-deep);
    font-weight:700;
    background:#faf6ee;
    white-space:nowrap;
  }
  table.kt .num{font-family:'Shippori Mincho',serif;font-size:18px;font-weight:700;color:var(--moss-deep);}
  table.kt .kw{display:block;font-size:10px;color:#9a8d77;font-family:'Noto Sans JP',sans-serif;font-weight:400;margin-top:2px;}

  /* stage table page2 */
  .stage-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }
  .stage-card{
    border:1px solid var(--line-light);
    border-radius:10px;
    padding:12px 14px;
  }
  .stage-card .ttl{
    font-family:'Shippori Mincho',serif;
    font-size:13px;color:var(--moss-deep);margin-bottom:6px;
  }
  .stage-card .age{font-size:13px;
    color:#2f4234;;margin-bottom:8px;}
  .stage-card .pair{display:flex;gap:10px;}
  .stage-card .pair .col{flex:1;text-align:center;}
  .stage-card .pair .col .l{font-size:11px;color:#9a8d77;margin-bottom:4px;}

  .stage-wrap{
    display:flex;
    gap:20px;
  }
   .stage-left{
    flex:2;
  }
  .stage-right{
    flex:1;
  }
    .stage-card .age,
    .inner-card .age{
    color:#2f4234;
    font-size:13px;
    font-weight:500;
    text-align:center;
}
  /* 現在の期・現在の心理区分 */
  .vbox.current{
    box-shadow:0 0 0 1px #8a7452 inset;
  }
  /* ===== 内部（心理）状況 ===== */

  .inner-grid{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .inner-card{
    border:1px solid #d9d1c5;
    border-radius:10px;
    padding:10px;
    text-align:center;
  }

  .inner-card .age{
    font-size:13px;
    color:#2f4234;
    margin-bottom:8px;
  }

  .inner-card .vbox{
    margin:0 auto;
  }
  /*　ターニングポイント*/
  .turning-ages{
    /*border:1px solid var(--line-light);*/
    border-radius:8px;
    padding:10px 12px;
    /*background:#fffefb;*/

    font-family:'Noto Sans JP',sans-serif;   /* または Shippori Mincho */
    font-size:16px;
    color:var(--moss-deep);

    text-align:center;
    line-height:1.7;

    white-space:normal;      /* 折り返しOK */
    word-break:keep-all;     /* 「28歳」で途中改行しない */
}



  /* freq grid */
  .freq-row{
    display:flex;
    flex-wrap:wrap;
    margin-bottom:14px;
    justify-content:center;
    gap:30px;
  }
  .freq-cell{
    width:46px;
    border:1px solid var(--line-light);
    border-radius:8px;
    text-align:center;
    padding:6px 0;
    background:#fffefb;
  }
  .freq-cell .n{font-family:'Shippori Mincho',serif;font-size:15px;color:var(--moss-deep);font-weight:700;}
  .freq-cell .c{font-size:13px;color:#5b5142;margin-top:2px;}
  .freq-cell.zero{background:#f3ece0;color:#bdb09a;}
  .freq-cell.zero .c{color:#bdb09a;}
  .freq-cell.max{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-glow) inset;}

  .sw-row{display:flex;gap:14px;flex-wrap:wrap;}
  .sw-card{
    flex:1 1 160px;
    border:1px solid var(--line-light);
    border-radius:10px;
    padding:12px 14px;
    text-align:center;
  }
  .sw-card .ttl{
    font-family:'Shippori Mincho',serif;
    font-size:13px;color:var(--moss-deep);
    margin-bottom:6px;
    font-weight:600;
  }
  .sw-card .val{font-size:18px;font-weight:700;font-family:'Shippori Mincho',serif;color:var(--terracotta);}

  /* temperament */
.temper{
  display:grid;
  gap:10px;
  margin-top:6px;
}

.temper .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:600;
}

.temper .row .lbl{
  width:120px;
  font-size:13px;
  color:#6e6354;
  font-weight:600;
}

.temper .row .cnt{
  width:50px;
  height:34px;
  border:1px solid #cdbfae;
  border-radius:6px;
  background:#fffefb;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family:'Shippori Mincho',serif;
  font-size:18px;
  font-weight:700;
  color:var(--moss-deep);
}
  /* duplicate badge */
  .dup-badge{
    position:absolute;top:3px;left:6px;
    font-size:11px;
    background:var(--moss-deep);
    color:var(--cream);
    border-radius:8px;
    padding:1px 7px;
    font-family:'Noto Sans JP',sans-serif;
    font-weight:700;
  }
  .dup-badge-br{
    position:absolute;bottom:3px;right:6px;
    font-size:11px;
    background:var(--moss-deep);
    color:var(--cream);
    border-radius:8px;
    padding:1px 7px;
    font-family:'Noto Sans JP',sans-serif;
    font-weight:700;
  }

    /*.posmap-wrap-outer{
    display:flex;
    justify-content:center;
    width:100%;
  }*/
  /* お宝数・導き数・憧れ数 マーカー（★） */
  .star-marks{
  position:absolute;
  top:6px;
  right:6px;
  display:flex;
  flex-wrap:wrap;
  max-width:40px;
  justify-content:flex-end;
  gap:0px;
  font-size:13px;
  color:#e0a430;
  text-shadow:0 0 1px rgba(224,164,48,.5);
  line-height:1.1;
}
  .dot-badge{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);

  width:20px;
  height:20px;

  border-radius:50%;
  background:#d9534f;

  color:#fff;
  font-size:18px;
  font-weight:bold;

  display:flex;
  align-items:center;
  justify-content:center;
  }
  .birthpos-wrap{
    display:flex;
    justify-content:center;
    width:100%;
}

  .pc{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
  .pc.bingo{
  background:#fbf3df;
  }
  .num{
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);
}

  #outMemoRow{
  text-align:right;
  font-size:12px;
  color:#7a6f61;
  margin-top:10px;
  display:none;
  }
  footer{
    text-align:center;
    font-size:12px;
    color:#a59a86;
    margin-top:48px;
  }
.load-panel{
    display:none;
}
.print-only{
  display:none;
}
.save{
    display:none;
}
  @media (max-width:560px){
    .stage-grid{grid-template-columns:1fr;}
    .head-row{flex-direction:column;}
    .posmap-grid{grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px);}
    .posmap-grid .pc .num{font-size:18px;}
  }

  /* ---------- PRINT (A4) ---------- */
  @media print{
    @page{ size:A4; margin:10mm; }
    body{ background:#fff; padding:0; }
    header.hero, .panel, footer, .sheet-page-label, .no-print{ display:none !important; }
    .wrap{ max-width:none; padding:0; }
    #karte{ display:block !important; }
    .sheet{
      box-shadow:none;
      border:none;
      border-radius:0;
      padding:0;
      margin:0;
      overflow:visible;
      page-break-after:always;
      width:190mm;
    }
    .print-only{
    display:block !important;
}
    .sheet:last-child{ page-break-after:auto; }
    .row-block, .head-row, .posmap-area{ break-inside:avoid; }
    .course-guide-print{
        text-align:center;
        margin-top:4mm;
    }

    .course-guide-print{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.course-guide-text{
    flex:1;
    font-size: 12px;
}

.course-guide-print img{
    width:15mm;
    height:auto;
    flex-shrink:0;
}

  .cycle-block{
    flex:1;
    padding:10px;
  }
  }
  @media (max-width:768px){
}

@media (max-width:560px){
 /* 生年月日入力 */
  .birth-row{
      display:flex;
      align-items:center;
      gap:6px;
      padding:10px 6px;
      font-size:20px;
  }

  .birth-row input{
      min-width:0;
      width:auto;
      flex:1;
      text-align:center;
  }

  .birth-row #year{
      flex:1.6;
  }

  .birth-row #month,
  .birth-row #day{
      flex:1;
  }

  .birth-row span{
      flex:0;
      font-size:18px;
      font-weight:600;
      white-space:nowrap;
  }

  .head-row{
    display:flex;
    flex-direction:column;
    gap:14px;
}
  /* head */
  .head-top,
  .head-name,
  .head-birth,
  .head-number{
      width:100%;
  }
  .head-top{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:6px;
  }
  .head-name{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
}
  .head-name-main{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
}

  .name-sum-wrap{
      width:100%;
      text-align:right;
      margin-top:4px;
  }
  .roman-name{
      font-size:18px;
      word-break:break-word;
  }
  .head-birth{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .head-number{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }
  .karte-date{
    display:none;
  }
  .head-name-ja{
    display:flex;
    align-items:flex-start;
    gap:10px;
}
  .head-name-ja .v{
      flex:1;
      line-height:1.4;
      word-break:break-word;
  }
  .name-line{
    display:block;
}

  .name-score{
    display:block;
    margin-top:4px;
    text-align:right;
}
  #outNameRoman{
    display:block;
    font-size:15px;
    line-height:1.3;
    word-break:break-word;
}
  .head-number{
    display:flex;
    justify-content:space-between;
    gap:8px;
}

  .num-item{
      flex:1;
      display:flex;
      flex-direction:column;
      align-items:center;
  }

  .num-item .lbl{
      margin-bottom:6px;
  }
  .num-item .vbox{
    width:60px;
}
  /*転機の年齢*/
  .turning-ages{
    font-size:15px;
    padding:8px 10px;
}
  /*ステージメッセージ*/
  .stage-wrap{
    display:block;
}

.stage-left,
.stage-right{
    width:100%;
}

.stage-right{
    margin-top:20px;
}
  .inner-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}
  .stage-card{
    width:100%;
}
}