* {margin: 0; padding: 0;}
html {
  scroll-behavior: smooth;
}

body{margin: 0; padding: 0; background: url("/images/zeimu-oh/Bg.png"); scroll-behavior: smooth; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
a {text-decoration: none;}
img{width: 100%;}
ul,li{list-style:none; padding:0; margin:0;}
button{background: none; border: 0;} 

header.header{position: absolute; width: 100%; z-index: 1;}
header .header-inner{display: flex; justify-content: space-between; margin: 0 auto; width: 90%; height: 70px; max-width: 1240px;}
.Container{position: relative; width: 90%; margin: 0 auto;}
.logo-mitsukaru{position: absolute; top: 10px; left: 20px; width: 130px;}
.header-btn{width: 160px; height: 44px; border-radius: 6px; text-align: center; line-height: 42px; font-size: 16px; font-weight: bold; box-shadow: 0 2px 10px rgba(0,0,0,.15);}
.header-mitsumori-btn{background: linear-gradient(90deg, rgba(255, 145, 0, 1) 0%, rgba(255, 70, 0, 1) 100%); margin-right: 15px; color: #fff;}
.header-contact-btn{background: #fff; border: solid 2px #E95513; color: #E95513; line-height: 40px;}
header input{position: absolute; top: 0; right: 20px; width: 50px; height: 50px; opacity: 0;}
header label{position: absolute; top: 0; right: 20px; padding: 7px; box-sizing: border-box; width: 50px; height: 50px; background: #333; z-index: 2;}
header label div{display: block}
header label.active .Rect1{display: none;}
header label.active .Rect2{position: absolute; top: 16px; transform: rotate(45deg);}
header label.active .Rect3{position: absolute; top: 16px; transform: rotate(-45deg);}
header label div{background: #fff; height: 2px; width: 35px; margin-top: 7px;}
.logo-header-txt{display: none;}
.header-btnarea{display: none}
.HeaderNavmain{display: none; visibility: hidden; position: absolute; right: -80%; width: 80%; background: #333; color: #fff; box-sizing: border-box; padding: 60px 15px 10px; transition: .3s;}
.HeaderNavmain.active{display: block; visibility: visible; position: absolute; right: 0; width: 80%; background: #333; color: #fff;}
.HeaderNavmain a { 
  color: #FFF;
  font-family: "Zen Antique" !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
}
.HeaderNavmainLi{padding: 20px 0; background: url("/images/zeimu-oh/navli.png") no-repeat; background-position: bottom; background-size: contain;}
ul .HeaderNavmainLi:last-child{margin-bottom: 30px;}

.FvArea {
  position: relative; 
  padding: 35px 16px 40px; 
}
.BtnFlex{display: flex; flex-wrap: wrap;}

.BtnFlex .inquiry-badge {
  width: 100%;
  margin: 8px 6px 0;
  text-align: center;
}

.HeaderNavmain .BtnFlex .inquiry-badge__icon svg path {
  stroke: #fff !important;
}

.HeaderNavmain .BtnFlex .inquiry-badge__label {
  color: #fff;
}

@media (min-width: 768px) {
  .HeaderNavmain .BtnFlex .inquiry-badge {
    display: flex !important;     
    box-sizing: border-box;
    height: auto;                  
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.60);  
    border: 1px solid #555;        
    border-radius: 2px;
    text-decoration: none;  
    margin: 8px 15px;
    grid-column: 1 / -1;
    width: 334px !important;       
  }

  .HeaderNavmain .BtnFlex .inquiry-badge__icon {
    width: 16px;
    height: 20px;
    flex: 0 0 auto;
    bottom: 1px;
  }

  .HeaderNavmain .BtnFlex .inquiry-badge__label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;               
    color: #fff;
    white-space: nowrap;
  }
}

.Btn50{display: flex; flex-direction: column; justify-content: center; width: 46%; height: 60px; margin: 0 2%; color: #0E0F3B; background: url("/images/zeimu-oh/Btn50.png") no-repeat; background-size: contain; text-align: center;}
.Btn50 b,.Btn50 span{font-size: 14px;}
.Btn100{display: block; width: 100%; height: 80px; background: url("/images/zeimu-oh/Btn100.png") no-repeat; background-size: contain; text-align: center; font-size: 20px; color: #E6452F; line-height: 61px;}
.HeaderNavmain a.Btn100{background: url("/images/zeimu-oh/NavBtn100.png") no-repeat; background-size: contain; height: 72px; color: #E6452F;}
.HeaderNavmain a.Btn50{background: url("/images/zeimu-oh/NavBtn50.png") no-repeat; background-size: contain; height: 45px; color: #fff; font-weight: 500;}
.HeaderNavmain a.BtnBottom{background: url("/images/zeimu-oh/BtnBottom.png") no-repeat; background-size: contain; width: 100%; height: 55px; margin: 15px 6px; text-align: center; line-height: 45px; color: #fff; font-weight: 500;}
.FvTxtArea {
  box-sizing: border-box; 
  bottom:0; 
  width: 100%; 
  font-weight: bold; 
  overflow: hidden;
} 
.FvTxtSmall{text-align: end; font-size: 12px;}
section{position: relative; padding: 0 20px; overflow: hidden;}
.author{position: absolute; right: -5px; bottom: 5px; width: 75%; height: auto;}
.faq-box img{display: none; margin: 18px 0;}
.faq-box img.active{display: block;}

/* ---- 共通：オーバーレイ ---- */
.MenuOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9998;
  display: none;
}
.HeaderNavmain.active + .MenuOverlay { display: block; }

/* ---- PC時は“中央モーダル”で固定（モバイルの見た目を再現） ---- */
@media (min-width: 768px){
  .HeaderNavmain{
    width: min(92vw, 30%) !important;              /* スライドではなく中央固定 */
  }

  

  /* メニュー項目は縦積み・100%幅に（モバイルと同じ見え方） */
  .HeaderNavmainUl{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0 0 20px 0;
    list-style: none;
  }
  .HeaderNavmainLi{ 
    padding: 20px 0;
    background: url("/images/zeimu-oh/navli.png") no-repeat;
    background-position: bottom;
    background-size: contain;
  }
  .HeaderNavmainLiAnc{ display: inline-block; width: 100%; }



  .BtnFlex{
    display: grid;
    grid-template-columns: auto auto;   /* 2列を内容幅で */
    justify-content: center;            /* 中央へ寄せる */
    column-gap: 4px;                    /* ここが2つの間の隙間 */
    row-gap: 12px;
  }

  /* 1段目（問題に挑戦!!）は全幅 */
  .BtnFlex > a.Btn100{ grid-column: 1 / -1; }

  /* 2段目（マイページ／ランキング）の幅を少し狭める */
  .BtnFlex > a.Btn50{
    width: clamp(180px, 44vw, 180px);   /* 好みで調整。例: 220〜240px など */
    margin: 0 !important;
  }

  /* 3段目（ログアウト）は全幅 */
  .BtnFlex > a.BtnBottom{ grid-column: 1 / -1; }

  .HeaderNavmain a.Btn100,
  .HeaderNavmain a.Btn50,
  .HeaderNavmain a.BtnBottom{
    display: block;
    line-height: normal;
  }

  /* 既存の高さ指定を尊重しつつ画像ボタンの見切れ防止 */
  .HeaderNavmain a.Btn100{ background-size: contain; height: 72px; }
  .HeaderNavmain a.Btn50 { background-size: contain; height: 45px; }
  .HeaderNavmain a.BtnBottom{
    background-size: contain;
    height: 55px;
    margin: 15px 6px 0;
    text-align: center;
    line-height: 45px;
  }

  .HeaderNavmain a.Btn100 {
    background: url("/images/zeimu-oh/NavBtn100.png") no-repeat;
    background-size: 355px;
    height: 72px;
    color: #E6452F;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center center;   /* ← これが無いと左上寄せ */
    font-family: "Corporate Logo ver2" !important;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  
  .HeaderNavmain a.Btn50 {
    background: url("/images/zeimu-oh/NavBtn50.png") no-repeat;
    background-size: contain;
    height: 45px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center center;   /* ← これが無いと左上寄せ */
    font-family: "Corporate Logo ver2" !important;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  
  .HeaderNavmain a.BtnBottom {
    background: url("/images/zeimu-oh/BtnBottom.png") no-repeat;
    background-size: 332px;
    width: auto;
    height: 55px;
    margin: 15px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center center;   /* ← これが無いと左上寄せ */
    
    font-family: "Corporate Logo ver2" !important;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  
}
.HeaderNavmain a.BtnBottom.not-logged-in {
  color: rgba(255, 255, 255, 0.60);
}
:root { --header-h: 72px; }           /* ←実際のヘッダー高さに調整 */
section[id] { scroll-margin-top: var(--header-h); }

/* ハンバーガー内で label が a を覆っていてもクリックできるように */
.HeaderNavmain label { pointer-events: none; }
.HeaderNavmain a { pointer-events: auto; }


footer {
  display: flex; 
  justify-content: center; 
  flex-wrap: wrap; 
  padding: 20px; 
  background: #333; 
  color: #fff;
}

footer a{width: 50%; margin-bottom: 10px; font-size: 15px; text-align: center; color: #fff;}
footer small{width: 100%; text-align: center;}

.footer-cta-prompt {
  color: #fff;
  font-family: "Noto Sans JP";
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  margin: 0 auto 4px;
  display: flex;
  justify-content: center;
}

.score-ranking-induce {
  margin-top: 16px;
}

/* zeimuoh画面 */
/* ===== CTA ===== */
.FvArea .cta {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  padding: 0;
}

.stretch {
  width:auto;
  display: flex;
  height: 48px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

/* ===== ボタン ===== */
.FvArea .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; border-radius:2px; padding:8px 16px; user-select:none; text-decoration:none;
}
/* 共通：ボタン本体と装飾の基本 */
.FvArea .btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;           
}
.FvArea .btn-decor{
  position: absolute;
  width: 18px;                
  height: 19px;
  pointer-events: none;
}
.FvArea .btn-decor svg{ display:block; } 
.FvArea .decor-br{ transform: rotate(0deg); } 
.FvArea .decor-tl{ transform: rotate(180deg); } 

/* ===== ① 上の「登録して詳細を確認する」用（.btn-primary） ===== */
.FvArea .btn-primary{
  --decor-offset: -1px;       
}
.FvArea .btn-primary .decor-tl{ top: var(--decor-offset); left:  var(--decor-offset); }
.FvArea .btn-primary .decor-br{ bottom: var(--decor-offset); right: var(--decor-offset); }

/* ===== ② 左の「再挑戦する！」用（.btn-ghost） ===== */
.FvArea .btn-ghost{
  --decor-offset: -1px;
}

.FvArea .btn-ghost .btn-text {
  color: #0E0F3B;
  text-align: center;
  text-shadow: 1px 2px 3px rgba(255, 255, 255, 0.25);
  font-family: "Noto Sans JP";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.FvArea .btn-ghost .decor-tl{ top: var(--decor-offset); left:  var(--decor-offset); }
.FvArea .btn-ghost .decor-br{ bottom: var(--decor-offset); right: var(--decor-offset); }

/* 参考：見た目の枠（あなたの既存スタイルに合わせて） */
.FvArea .btn-primary{
  width:auto;
  height:29px;
  padding:8px 8px;
  background:#fff;
  border:1.5px solid #E6452F;
  box-shadow:2px 4px 8px rgba(0,0,0,.15);
  color:#E6452F; font:700 18px/1 "Corporate Logo ver2",sans-serif;
}
.FvArea .btn-ghost{
  height:30px; 
  padding:8px 16px;
  border:1px solid #555;
  color:#333; font:700 18px/1 "Corporate Logo ver2",sans-serif;
  width: 100%;
}

.FvArea .row {
  display:flex; 
  gap:8px; 
  align-items:flex-start;  
  width:100%;
}

/* ====== シェアするボタンのレイアウト調整 ====== */
.FvArea .btn-share{
  /* 既存の .btn の display / align-items / overflow を継承 */
  gap: 4px;                       
  height: 30px;                   /* 再挑戦ボタンと高さを揃えるなら 40px */
  padding: 8px 16px;              
  border:1px solid var(--gray, #555);
  color: var(--navy, #0E0F3B);
  font-size: 14px;
  font-weight: 700;
  text-shadow: 1px 2px 3px rgba(255,255,255,.25);
  box-shadow: 0 2px 3px rgba(0,0,0,.15);
  min-width: 120px;
  width: 100%;
}


/* アイコンの見た目調整（ライン高さと位置が揃うように） */
.FvArea .btn-share .btn-icon{
  display:inline-flex;
  width:20px; height:20px;
  line-height:0;
}
.FvArea .btn-share .btn-icon svg{ width:20px; height:20px; display:block; }

/* 右下だけに装飾を置く（左上は置かない） */
.FvArea .btn-share .decor-br{
  bottom: -1px;   /* ボーダーに少し潜らせるとFigmaに近い */
  right:  -1px;
}
/* 念のため、他のボタン向けの .decor-tl が混ざっても非表示に */
.FvArea .btn-share .decor-tl{ display:none; }


.apology-img {
  margin: 40px 0 16px;
}

/* CSS */
.review-campaign{
  width: auto;
  height: 100%;
  padding: 6px;
  background: #fff;
  outline: 1px #4B2600 solid;
  outline-offset: -1px;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  display: none;
}

.review-card{
  width: auto;
  background: #fff;
  border-radius: 2px;
  outline: 1px #555555 solid;
  outline-offset: -0.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
}

.review-title{
  width: 100%;
  color: #2D3748;
  font-size: 16px;
  font-family: "Corporate Logo ver2", system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 19.2px;
}

.review-desc{
  width: 100%;
  color: #2D3748;
  font-size: 14px;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;
  line-height: 21px;
}

.review-link{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  background: #fff;
  border-radius: 2px;
  outline: 1px #555555 solid;
  outline-offset: -1px;
  text-decoration: none;
}

.review-link__text{
  text-align: center;
  color: #666666;
  font-size: 14px;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  text-shadow: 1px 2px 3px rgba(255, 255, 255, 0.25);
  white-space: nowrap;
}

/* 右に伸びる小さな菱形（元デザインの outline 四角を傾けたもの） */
.review-link__chevrons{
  display: inline-flex;
  bottom: 18px;
  position: absolute;
  right: 125px;
}

.review-link .chevron{
  width: 17px;
  height: 8px;
  border: 1px #555555 solid;    /* 元の outline を border で再現 */
  transform: rotate(45deg);
  transform-origin: top left;
  display: inline-block;
}

@media (max-width: 768px){
  .review-link__chevrons{
    right: 72px;
  }

}

/*　アバウトセクション　*/
/* フォントはサイト側で読み込み済み想定（Zen Antique / Zen Antique Soft） */
.zeimuoh-about{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 16px 50px;
}

.zeimuoh-about .cap {
  margin: 0;
}

.title-main {
  position: relative;
  z-index: 2;
  color: #fff;
  font-family: "Zen Antique";
  font-weight: 400;
  font-size: 30px;
  line-height: 36px;
  text-align: center;
  padding: .2em .6em;
  grid-area: 1 / 1;
  margin-left: -0.3em;
}

.title-sub {
  color: #FFF;
  font-family: "Zen Antique";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -2.4px;
  grid-area: 1 / 2;
  margin-left: -3.4em;
  position: relative;
  z-index: 2;
  top: 2px;
}

/* リード文 */
.zeimuoh-lead{
  color: #333;
  font: 400 14px/21px "Zen Antique Soft", system-ui, sans-serif;
  text-align: center;
  margin: 0;
}

/* 本文レイアウト（画像 + ランク表） */
.zeimuoh-content{
  width: 100%;
  max-width: 720px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  align-items: start;
}

/* 左のビジュアル（ダミー） */
.zeimuoh-visual{
  width: 194px;
  height: 168px;
  background: #d9d9d9;
  border-radius: 4px;
}

/* 右側：バー列 + テキスト列を2カラムで */
.zeimuoh-ranks{
  display: grid;
  grid-template-columns: 228px 1fr; /* 左:色バー, 右:文言 */
  gap: 12px 16px;
  align-items: center;
}

.rank-bar{
  width: 228px;
  height: 24px;
  border-radius: 2px;
}

/* パレット（Figma値に近い段階色） */
.bar-king     { background: #FF5500; } /* 税務王 */
.bar-diamond  { background: #FFA579; }
.bar-platinum { background: #FFBF9F; }
.bar-gold     { background: #FFD5C1; }
.bar-silver   { background: #FFECE3; }
.bar-bronze   { background: #FFF4EE; }
.bar-standard { background: #FFFDFC; border: 1px solid #f1e9e6; }

.rank-note{
  color: #333;
  font: 400 14px/21px "Zen Antique Soft", system-ui, sans-serif;
  white-space: nowrap;
}

/* フッター説明 */
.zeimuoh-foot{
  width: 343px;
  max-width: 100%;
  margin: 0;
  text-align: center;
  color: #333;
  font: 400 14px/21px "Zen Antique Soft", system-ui, sans-serif;
}

/* レスポンシブ（タブレット以下は縦積み） */
@media (max-width: 767px){
  .zeimuoh-content{
    grid-template-columns: 1fr;
  }
  .zeimuoh-visual{
    margin: 0 auto;
  }
  .zeimuoh-ranks{
    grid-template-columns: 1fr; /* バーの下にテキスト列 */
  }

}

/* ▼ 重ね置き用の変数（好みで微調整） */
:root{
  --rank-width: 228px;   /* SVG内の横幅（rectのwidthに合わせる） */
  --rank-height: 168px;  /* SVGの高さ */
  --bar-h: 24px;         /* 各バーの高さ（rectのheightに合わせる） */
  --avoid-triangle: 130px;/* 左側の三角形を避けるためのパディング量 */
}

/* 右側：SVGとテキストを重ねる */
.zeimuoh-ranks{
  position: relative;
  display: grid;
  grid-template-areas: "stack";
  height: var(--rank-height);
}

/* SVG側（下の層） */
.rank-bars{
  grid-area: stack;
}
.rank-bars svg{
  display: block;
  width: var(--rank-width);
  height: var(--rank-height);
}

/* 各行の左右配置 */
.rank-row{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: auto;             /* クリック必要ならON */
}

.rank-name{
  color: #333;
  font: 400 16px/24px "Zen Antique Soft", system-ui, sans-serif;
  grid-column: 1; 
  justify-self: start; 
  text-align: left;
}
.rank-note{
  color: #333;
  font: 400 14px/21px "Zen Antique Soft", system-ui, sans-serif;
  white-space: nowrap;
  grid-column: 2; 
  justify-self: end;   
  text-align: right; 
  white-space: nowrap;
}

/* SVGと重ねるのはそのまま */
.rank-list{
  grid-area: stack;
  position: relative;
  display: grid;

  /* 左列=名前 / 右列=注記。列幅は全行で共有される */
  grid-template-columns: max-content max-content;
  grid-template-rows: repeat(7, var(--bar-h));
  align-items: center;

  /* 左は三角を避けるぶん、右に少しだけ余白（好みで） */
  padding-left: var(--avoid-triangle);
  padding-right: 6px;

  column-gap: 8px;   /* 名前と注記の間隔 */
  margin: 0;
  list-style: none;
}

/* li 自体を“器”にせず、中の span をグリッドに参加させる */
.rank-row{ display: contents; }


/* ルールセクション　*/
.rules {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rules .cap-text {
  font-size: 18px;
}


/* card */
.rule-card{
  position: relative;
  background: rgba(255,255,255,.70);
  border-radius: 2px;
  border: 1px solid #444;         /* outline-offset:-1px の代替として内側に近い見た目 */
  overflow: hidden;
}



/* head */
.rule-card__head{
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rule-card__title{
  margin: 0;
  color: #FF5500; /* var(--Primary-01-5) があれば置換可 */
  font-family: "Corporate Logo ver2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
  text-align: center;
}

/* body */
.rule-card__body{
  padding: 0 20px 16px;
}
.rule-card__body p{
  margin: 0;
  color: #222;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16.8px; /* Figma値 */
  word-break: break-word;
}

.rule-card{ position: relative; }

.rules .btn-decor{
  position: absolute;
  width: 18px;   /* SVGに合わせて */
  height: 19px;
  pointer-events: none;
  z-index: 2;    /* 文字より上に出したい場合 */
}
.rules .btn-decor svg{ display:block; width:100%; height:100%; }

/* 右下固定（45°装飾なら -45deg が自然） */
.rules .btn-decor.decor-br{
  right: -1px;
  bottom: -2px;
  transform: rotate(0deg);
  transform-origin: top left;
}

/* ===== ボタン ===== */
.rules .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; border-radius:2px; padding:8px 16px; user-select:none; text-decoration:none;
}

/* 参考：見た目の枠（あなたの既存スタイルに合わせて） */
.rules .btn-primary{
  width:auto;
  height:29px;
  padding:8px 8px;
  background:#fff;
  border:1.5px solid #E6452F;
  box-shadow:2px 4px 8px rgba(0,0,0,.15);
  color:#E6452F; font:700 18px/1 "Corporate Logo ver2",sans-serif;
}
/* 共通：ボタン本体と装飾の基本 */
.rules .btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;           
}
.rules .btn-decor{
  position: absolute;
  width: 18px;                
  height: 19px;
  pointer-events: none;
}
.rules .btn-decor svg{ display:block; } 
.rules .decor-br{ transform: rotate(0deg); } 
.rules .decor-tl{ transform: rotate(180deg); } 

/* ===== ① 上の「登録して詳細を確認する」用（.btn-primary） ===== */
.rules .btn-primary{
  --decor-offset: -1px;       
}
.rules .btn-primary .decor-tl{ top: var(--decor-offset); left:  var(--decor-offset); }
.rules .btn-primary .decor-br{ bottom: var(--decor-offset); right: var(--decor-offset); }


/* スピーカーセクション */
/* 外枠（背景白＋枠） */
.speaker{
  padding: 6px;
  background: #fff;
  border: 1px solid #4B2600;
}

/* カード本体 */
.speaker-card{
  position: relative;
  padding: 12px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #555;
  display: grid;
  gap: 8px;
  align-content: start;
}

/* 見出し：登壇者 */
.speaker-card__cap{
  margin: 0;
  color: #0E0F3B;
  font: 700 14px/1 "Corporate Logo ver2", system-ui, sans-serif;
}

/* 名前行 */
.speaker-card__name{
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.name-role{
  color: var(--Primary-01-5, #FF5500);
  font: 700 16px/1 "Noto Sans JP", system-ui, sans-serif;
}
.name-main{
  color: var(--Primary-01-5, #FF5500);
  font: 700 24px/1 "Noto Sans JP", system-ui, sans-serif;
}
.name-alias{
  color: var(--Primary-01-5, #FF5500);
  font: 700 20px/1 "Noto Sans JP", system-ui, sans-serif;
}

/* プロフィール文 */
.speaker-card__bio{
  margin: 0;
  max-width: 313px;           /* Figma値 */
  color: #323232;
  font: 500 14px/21px "Noto Sans JP", system-ui, sans-serif;
  word-break: break-word;
}

/* SNSバッジ（小さなスクエア＋四隅45°装飾） */
.sns-badge{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 16px;
  border: 1px solid #555;
  border-radius: 2px;
  text-decoration: none;
}
.sns-badge__icon{
  position: relative;
  width: 16px;
  height: 16px;
}
.sns-badge__icon::before,
.sns-badge__icon::after{
  content: "";
  position: absolute;
  inset: 2.67px;
  border: 1px solid #333;
}
.sns-badge__text{
  color: #333;
  font: 400 12px/1 "DIN Condensed VF", system-ui, sans-serif;
  text-shadow: 1px 2px 3px rgba(255,255,255,.25);
}

/* 角の45°装飾（4隅） */
.sns-badge::before,
.sns-badge::after,
.sns-badge span::before,
.sns-badge span::after{
  content: "";
  position: absolute;
  width: 17px; height: 8px;
  border: 1px solid #555;
  transform-origin: top left;
  pointer-events: none;
}
.sns-badge::before{ top: 4px; left: 4px; transform: rotate(45deg); }
.sns-badge::after { top: 4px; right: 4px; transform: rotate(-45deg); }
.sns-badge span::before{ bottom: 4px; left: 4px; transform: rotate(45deg); }
.sns-badge span::after { bottom: 4px; right: 4px; transform: rotate(-45deg); }

/* グリッドは残してOK。img と p を同じ“1アイテム”内で回り込ませる */
.speaker-card{
  display: grid;
  gap: 8px;
  position: relative;
  overflow: visible;
}

/* ★ グリッドアイテムではなく“普通のブロック”にするラッパー */
.speaker-card__flow{
  display: block;      /* 重要：grid/flex にしない */
  overflow: visible;
}

/* パラメータ（Figmaに合わせて微調整） */
.speaker-card{
  --float-w: 260px;     /* 画像の横幅（240〜280で調整） */
  --float-top: 150px;   /* どこから回り込み開始するか（上マージン） */
  --float-right: -8px;  /* 右へはみ出す量（負値可） */
  --float-bottom: -12px;/* 下へはみ出す量（負値可） */
  --gap-left: 16px;     /* テキストと画像の間隔 */
}



/* 段落は回り込みに従って自動で細くなる。固定幅にしないこと */
.speaker-card__bio{
  margin: 0;
  max-width: 313px;      /* ←“最大幅”だけ指定（固定幅はNG） */
  width: auto;           /* 念のため明示 */
  clear: none !important;/* 既存CSSで clear が入っていた場合の保険 */
}

/* この要素から回り込みを解除（次の行に落とす） */
.sns-badge{
  clear: both;
  margin-top: 8px;
  position: relative;
  z-index: 2;
}

/* タイトルや名前は画像の上層に（重なり順の安定化） */
.speaker-card__cap,
.speaker-card__name{ position: relative; z-index: 2; }


.introduction .cap-text {
  font-size: 18px;
}

.introduction .cap {
  padding-top: 32px;
}

.introduction .btn-share {
  height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--gray, #555);
  color: var(--navy, #555);
  font-size: 8px;
  font-weight: 700;
  text-shadow: 1px 2px 3px rgba(255, 255, 255, .25);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .15);
}

.introduction .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.introduction .btn-share .btn-icon {
  display: inline-flex;
  width: 14px;
  height: 20px;
  line-height: 0;
}

.introduction .btn-share .btn-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.introduction .btn-share .decor-br {
  bottom: -1px;
  right: -1px;
}

.introduction .decor-br {
  transform: rotate(0deg);
}

.introduction .btn-decor {
  position: absolute;
    width: 18px;
    height: 19px;
    pointer-events: none;
}

/* 画像コンテナを相対配置に（重ね先の基準点） */
.introduction .section-img{
  position: relative;
}

/* シェアボタン本体（小さめ・重ね） */
.introduction .section-img .share-btn{
  position: absolute;
  right: 191px;
  bottom: 21px;
  width: 92px;
  height: 6px;
  border-radius: 2px;
  background: #FFF;
}

/* アイコンサイズ */
.introduction .section-img .share-btn svg,
.introduction .section-img .share-btn img{
  width: 20px;
  height: 20px;
}

.introduction .cta {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  padding: 0;
  margin: 16px 0;
}


.stretch {
  width:auto;
  display: flex;
  height: 48px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

/* ===== ボタン ===== */
.introduction .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; border-radius:2px; padding:8px 16px; user-select:none; text-decoration:none;
}
/* 共通：ボタン本体と装飾の基本 */
.introduction .btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;           
}
.introduction .btn-decor{
  position: absolute;
  width: 18px;                
  height: 19px;
  pointer-events: none;
}
.introduction .btn-decor svg{ display:block; } 
.introduction .decor-br{ transform: rotate(0deg); } 
.introduction .decor-tl{ transform: rotate(180deg); } 

/* ===== ① 上の「登録して詳細を確認する」用（.btn-primary） ===== */
.introduction .btn-primary{
  --decor-offset: -1px;       
}
.introduction .btn-primary .decor-tl{ top: var(--decor-offset); left:  var(--decor-offset); }
.introduction .btn-primary .decor-br{ bottom: var(--decor-offset); right: var(--decor-offset); }

/* ===== ② 左の「再挑戦する！」用（.btn-ghost） ===== */
.introduction .btn-ghost{
  --decor-offset: -1px;
}

.introduction .btn-ghost .btn-text {
  color: #0E0F3B;
  text-align: center;
  text-shadow: 1px 2px 3px rgba(255, 255, 255, 0.25);
  font-family: "Noto Sans JP";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.introduction .btn-ghost .decor-tl{ top: var(--decor-offset); left:  var(--decor-offset); }
.introduction .btn-ghost .decor-br{ bottom: var(--decor-offset); right: var(--decor-offset); }

/* 参考：見た目の枠（あなたの既存スタイルに合わせて） */
.introduction .btn-primary{
  width:auto;
  height:29px;
  padding:8px 8px;
  background:#fff;
  border:1.5px solid #E6452F;
  box-shadow:2px 4px 8px rgba(0,0,0,.15);
  color:#E6452F; font:700 18px/1 "Corporate Logo ver2",sans-serif;
}
.introduction .btn-ghost{
  height:30px; 
  padding:8px 16px;
  border:1px solid #555;
  color:#333; font:700 18px/1 "Corporate Logo ver2",sans-serif;
  width: 100%;
}

.introduction .row {
  display:flex; 
  gap:8px; 
  align-items:flex-start;  
  width:100%;
}

/* ====== シェアするボタンのレイアウト調整 ====== */
.introduction .btn-share{
  /* 既存の .btn の display / align-items / overflow を継承 */
  gap: 4px;                       
  height: 30px;                   /* 再挑戦ボタンと高さを揃えるなら 40px */
  padding: 8px 16px;              
  border:1px solid var(--gray, #555);
  color: var(--navy, #0E0F3B);
  font-size: 14px;
  font-weight: 700;
  text-shadow: 1px 2px 3px rgba(255,255,255,.25);
  box-shadow: 0 2px 3px rgba(0,0,0,.15);
  min-width: 120px;
  width: 100%;
}


/* アイコンの見た目調整（ライン高さと位置が揃うように） */
.introduction .btn-share .btn-icon{
  display:inline-flex;
  width:20px; height:20px;
  line-height:0;
}
.introduction .btn-share .btn-icon svg{ width:20px; height:20px; display:block; }

/* 右下だけに装飾を置く（左上は置かない） */
.introduction .btn-share .decor-br{
  bottom: -1px;   /* ボーダーに少し潜らせるとFigmaに近い */
  right:  -1px;
}
/* 念のため、他のボタン向けの .decor-tl が混ざっても非表示に */
.introduction .btn-share .decor-tl{ display:none; }

@media (min-width: 768px) {
  .introduction .section-img .share-btn {
    right: 252px;
    bottom: 27px;
    width: 132px;
    height: 13px;
  }

  .introduction .btn-share {
    font-size: 12px;
  }
}







/* 詳細セクション */
.detail-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  padding-bottom: 16px;
}

.detail .cta {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  padding: 0;
  margin: 16px 0;
}


.stretch {
  width:auto;
  display: flex;
  height: 48px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

/* ===== ボタン ===== */
.detail .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; border-radius:2px; padding:8px 16px; user-select:none; text-decoration:none;
}
/* 共通：ボタン本体と装飾の基本 */
.detail .btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;           
}
.detail .btn-decor{
  position: absolute;
  width: 18px;                
  height: 19px;
  pointer-events: none;
}
.detail .btn-decor svg{ display:block; } 
.detail .decor-br{ transform: rotate(0deg); } 
.detail .decor-tl{ transform: rotate(180deg); } 

/* ===== ① 上の「登録して詳細を確認する」用（.btn-primary） ===== */
.detail .btn-primary{
  --decor-offset: -1px;       
}
.detail .btn-primary .decor-tl{ top: var(--decor-offset); left:  var(--decor-offset); }
.detail .btn-primary .decor-br{ bottom: var(--decor-offset); right: var(--decor-offset); }

/* ===== ② 左の「再挑戦する！」用（.btn-ghost） ===== */
.detail .btn-ghost{
  --decor-offset: -1px;
}

.detail .btn-ghost .btn-text {
  color: #0E0F3B;
  text-align: center;
  text-shadow: 1px 2px 3px rgba(255, 255, 255, 0.25);
  font-family: "Noto Sans JP";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.detail .btn-ghost .decor-tl{ top: var(--decor-offset); left:  var(--decor-offset); }
.detail .btn-ghost .decor-br{ bottom: var(--decor-offset); right: var(--decor-offset); }

/* 参考：見た目の枠（あなたの既存スタイルに合わせて） */
.detail .btn-primary{
  width:auto;
  height:29px;
  padding:8px 8px;
  background:#fff;
  border:1.5px solid #E6452F;
  box-shadow:2px 4px 8px rgba(0,0,0,.15);
  color:#E6452F; font:700 18px/1 "Corporate Logo ver2",sans-serif;
}
.detail .btn-ghost{
  height:30px; 
  padding:8px 16px;
  border:1px solid #555;
  color:#333; font:700 18px/1 "Corporate Logo ver2",sans-serif;
  width: 100%;
}

.detail .row {
  display:flex; 
  gap:8px; 
  align-items:flex-start;  
  width:100%;
}

/* ====== シェアするボタンのレイアウト調整 ====== */
.detail .btn-share{
  /* 既存の .btn の display / align-items / overflow を継承 */
  gap: 4px;                       
  height: 30px;                   /* 再挑戦ボタンと高さを揃えるなら 40px */
  padding: 8px 16px;              
  border:1px solid var(--gray, #555);
  color: var(--navy, #0E0F3B);
  font-size: 14px;
  font-weight: 700;
  text-shadow: 1px 2px 3px rgba(255,255,255,.25);
  box-shadow: 0 2px 3px rgba(0,0,0,.15);
  min-width: 120px;
  width: 100%;
}


/* アイコンの見た目調整（ライン高さと位置が揃うように） */
.detail .btn-share .btn-icon{
  display:inline-flex;
  width:20px; height:20px;
  line-height:0;
}
.detail .btn-share .btn-icon svg{ width:20px; height:20px; display:block; }

/* 右下だけに装飾を置く（左上は置かない） */
.introduction .btn-share .decor-br{
  bottom: -1px;   /* ボーダーに少し潜らせるとFigmaに近い */
  right:  -1px;
}
/* 念のため、他のボタン向けの .decor-tl が混ざっても非表示に */
.detail .btn-share .decor-tl{ display:none; }

@media (max-width: 768px) {
  .detail {
    padding-bottom: 0 !important;
  }
}

/* CSS */
.campaign-info{
  width: 100%;
  color: #2D3748;
  font-size: 14px;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;
  line-height: 21px;
  word-wrap: break-word;
}

/* 余白整形 */
.campaign-info p{ margin: 0 0 12px; }
.campaign-steps,
.prize-list{
  margin: 0 0 12px 1.25em; /* デフォルトの箇条書き余白 */
  padding: 0;
}

/* 手順は番号付き */
.campaign-steps{ list-style: decimal !important; }
.campaign-steps li{ margin: 0 0 8px; }

/* 景品は黒丸 */
.prize-list{ list-style: disc !important; }
.prize-list li{ margin: 0 0 6px; }

.hashtags{
  display: inline-block;
  margin-top: 4px;
  white-space: nowrap;
}

/* 期限を少し強調 */
.campaign-deadline{
  font-weight: 700;
}

/* ===== リストのマーカーを復元（強制版） ===== */
.campaign-steps,
.prize-list{
  list-style-position: outside !important;
  margin: 0 0 12px 0 !important;
  display: block !important;
}

.campaign-steps{
  list-style-type: decimal !important; /* 番号付き */
}

.prize-list{
  list-style-type: disc !important;    /* 黒丸 */
}

/* li が flex/grid の影響を受けても出るように保険 */
.campaign-steps li,
.prize-list li{
  display: list-item !important;
  margin: 0 0 6px !important;
}

/* マーカー色（必要なら） */
.campaign-steps li::marker,
.prize-list li::marker{
  color: #2D3748 !important;
}


.detail .cap {
  padding-top: 32px;
}

.detail .qa{
  width: 100%;
  height: 100%;
  padding: 6px;
  background: #fff;
  outline: 1px solid #4B2600;   /* 指定：#4B2600 */
  outline-offset: -1px;
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

/* ====== カード本体 ====== */
.detail .qa-item{
  margin: 0;
  align-self: stretch;
  background: #fff;
  border-radius: 2px;
  outline: 1px solid #555;      /* 指定：#555555 */
  outline-offset: -0.5px;
  padding: 0;                   /* 内側はsummaryで管理 */
  box-sizing: border-box;
  flex-direction: column;
  gap: 0;
}

/* ====== 見出し行（クリック領域） ====== */
.qa-summary{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  cursor: pointer;
  user-select: none;
  width: 100%;
}
.qa-summary::-webkit-details-marker{ display: none; } /* デフォルトの三角を非表示 */

/* タイトル（指定のタイポグラフィ） */
.detail .qa-title{
  flex: 1 1 auto;
  color: #2D3748;                /* 指定：#2D3748 */
  font-size: 16px;               /* 指定：16px */
  font-family: "Corporate Logo ver2", system-ui, sans-serif;
  font-weight: 700;              /* 指定：700 */
  line-height: 19.2px;           /* 指定：19.20px */
  word-wrap: break-word;
}

/* 右端のアイコン（24px枠にCSS矢印） */
.detail .qa-icon{
  width: 24px;
  height: 24px;
  position: relative;
  overflow: hidden;
  flex: 0 0 24px;
  right: 16px;
}
.qa-icon::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid #2D3748;
  border-bottom: 2px solid #2D3748;
  transform: rotate(-45deg);     /* ▼ 風アイコン */
  transition: transform .2s ease;
}

/* ====== 本文（ドロップダウン） ====== */
.qa-content{
  padding: 0 12px 12px 12px;
  display: grid;
  grid-template-rows: 0fr;       /* 閉じる */
  transition: grid-template-rows .24s ease;
}
.qa-content > *{
  overflow: hidden;              /* gridアニメのため */
  margin: 0;
  color: #2D3748;                /* 指定：#2D3748 */
  font-size: 14px;               /* 指定：14px */
  font-family: "Noto Sans JP", system-ui, -apple-system, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 500;              /* 指定：500 */
  line-height: 21px;             /* 指定：21px */
  word-wrap: break-word;
}

/* ====== 開閉時のスタイル ====== */
.qa-item[open] .qa-content{
  grid-template-rows: 1fr;       /* 開く */
}
.qa-item[open] .qa-icon::before{
  transform: rotate(45deg);      /* ▲ 風に回転 */
}

/* 触り心地（任意） */
.qa-summary:focus-visible{
  outline: 2px solid #0E0F3B;
  outline-offset: 2px;
  border-radius: 2px;
}





/*  instruction画面　*/
.instruction{padding-top: 30px;}
.instruction-form{padding-top: 20px;}
.instruction-form input {
  width: 100%; 
  height: 45px; 
  margin: 5px 0 20px; 
  padding: 0 10px; 
  box-sizing: border-box; 
  border: solid 1px #4B2600; 
  border-radius: 5px;
  /* color: rgba(30, 41, 59, 0.40); */
  font-family: "Noto Sans JP";
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 22.5px */
}

.loading img{display: none; padding: 80px 20px 0; padding: 140px 0 0; box-sizing: border-box;
}
.loading img.loading-active{display: block;}
.exam{position: relative; padding-top: 20px;}
/* ===== 質問カード（テキスト版） ===== */
.exam-qcard{
    margin-top: 24px;          /* ←これだけでOK */
    position: relative;
    background: #fff;
    border: 1px solid #4B2600;    /* 外枠 */
    padding: 34px 18px;             /* 中枠ぶんの余白を少し確保 */
    box-sizing: border-box;
  }

  .exam-qcard::before{
    content: "";
    position: absolute;
    inset: 10px;               /* 外枠からの内側オフセット（お好みで調整） */
    border: 1px solid #555;    /* 中枠の線 */
    border-radius: 2px;        /* 外枠より少し小さく */
    pointer-events: none;      /* クリック等の邪魔をしない */
  }
  
  /* 右上の黒い帯「第1問 /10」を再現 */
  .exam-qbadge{
    position: absolute;
    top: -14px;
    left: 14px;
    height: 28px;                 /* 42pxのSVGを28pxに縮小して表示 */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 0 16px;       /* 左の飾りに文字がかぶらないよう少し余白 */
    color: #fff;
    background: url("/images/zeimu-oh/question_title.svg") no-repeat left center;
    background-size: 110% 140%;   /* 高さに合わせて等比縮小（横は自動） */
    border-radius: 0;
    box-shadow: none;
    line-height: 28px;
    font-size: 14px;
  }
  .exam-qbadge > span{
    font-weight: 500;
  }
  
  /* 質問テキスト本体 */
  .exam-qtext{
    color: #1a1a1a;
    font-size: 16px;
    line-height: 24px;
    white-space: pre-wrap;         /* 念のため */
    word-break: break-word;
}
.correct-img,.incorrect-img{position: absolute; top: 50px; left: 20%; width: 60%; z-index: 2;}
.exam-time{display: flex;}
.exam-time span{padding-right: 10px;}
.exam-time-bar{position: relative; height: 20px; width: 100%; border: solid 1px #000; background: #fff; overflow: hidden; border-radius: 8px;}
.exam-time-bar::after {
    content:"";
    position:absolute;
    top:0; bottom:0;
    right:auto;           /* ★右基準 */
    left:0;         /* ★左基準を無効化 */
    width:100%;
    background:#FFC6AA;
    border-radius:inherit;
    border:2px solid #fff;
    transform-origin:left;
}
@keyframes examShrink{
    from{ transform: scaleX(1); }
    to  { transform: scaleX(0); }
}
.exam-form{margin-top: 15px;}
.exam-time-bar.timer::after {
    animation: examShrink 60s linear forwards;
}
.exam-btn{position: relative; display: flex; align-items: center; border-radius: 80px; box-sizing: border-box; background: #fff; border: solid 1px #8A8A8A; padding: 10px 18px; width: 100%; height: 60px; margin: 10px 0; text-align: left;cursor: pointer;}
.exam-btn span{display: block; height: 32px; width: 32px; line-height: 32px; text-align: center; background: #fff; border-radius: 50px; color: #000; margin-right: 8px;}
.exam-btn.active{background: #FF5500; border: solid 1px #FF5500; color: #fff; font-weight: bold; padding: 10px 18px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); font-size: 16px; width: 100%; height: 60px; margin-bottom: 10px; text-align: left;}
.exam-btn.active span,.exam-btn.correct.open span{display: block; height: 32px; width: 32px; line-height: 32px; text-align: center; background: #fff; border-radius: 50px; color: #FF5500; margin-right: 8px;}
.exam-btn.correct.open{background: #fff !important; color: #FF5500; border: 3px solid #FF5500; font-weight: 700; position: relative;}
.exam-btn.incorrect.active.open{background: #999 !important; color: #fff; border: 3px solid #999; font-weight: 700; position: relative;}
.exam-btn.incorrect.active.open span{color: #999;}
.exam-btn.correct.open::after {content: ""; position: absolute; inset: 4px; border: 1.5px solid #FF5500; border-radius: inherit; pointer-events: none;}

.exam-form input{position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%;cursor: pointer;}
.exam-submit{margin-top: 15px;cursor: pointer;
width: 100%;
}

.inquiry-badge{
  /* 見た目（元のバッジと同等） */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 2px;
  background: rgba(255,255,255,.60);
  /* ボタンの素の装飾を消す */
  border: 1px solid #ddd;
  appearance: none;
  cursor: pointer;
}

.inquiry-badge:hover{ background: rgba(255,255,255,.8); }
.inquiry-badge:focus-visible{
  outline: 2px solid #12ABB1;
  outline-offset: 2px;
}

.inquiry-badge__icon{ width: 16px; height: 16px; display: block; }
.inquiry-badge__label{
  color: #7F7F7F;
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.inquiry-badge{
  width: auto;
  height: 100%;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.60);
  overflow: hidden;
  border-radius: 2px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  display: block;
  width: fit-content;
  margin: 8px auto 0;
}

/* アイコン */
.inquiry-badge__icon{
  width: 16px;
  height: 16px;
  position: relative;
  overflow: hidden;
  display: inline-block;
  bottom: -1px;
}


/* ラベル */
.inquiry-badge__label{
  text-align: center;
  color: #7F7F7F;
  font-size: 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 16px;
  word-wrap: break-word;
  position: relative;
  bottom: 2px;
}




/* ボタン画像のスムーズな切り替え効果 */
.exam-submit img {
  transition: opacity 0.2s ease;
}

.register {
  position: relative; 
  padding: 80px 16px 0px;
}

.register02{padding: 80px 20px 25px;}
.register-area {
  position: static; 
  top: 68vw; 
  width: -webkit-fill-available; 
  height: auto;
  overflow: visible;
}

.register-area label{display: block; padding-bottom: 5px; font-size: 15px;}
.register-area label span{font-size: 12px; padding-left: 3px; color: #505968;}
.register-area select,.register-area input {
  display: block; 
  height: 35px; 
  width: 100%; 
  margin-bottom: 8px; 
  padding: 0 3px; 
  box-sizing: border-box; 
  border: solid 1px #333; 
  border-radius: 3px;
  font-family: 'Noto Sans JP';
  font-weight: 500;
  font-size: 15px;
}

.register-next {
  padding: 40px 0 0;
}
.register-submit{padding: 0 32px;}

/* ------ base tokens ------ */
:root{
  --qs-brown: #4B2600;
  --qs-orange: #FF5500;
  --qs-text:   #1E293B;
  --qs-bg:     #FFFFFF;
}

/* ルートコンテナ（インラインの position:relative; border-radius:4px 相当） */
.qs{
  position: relative;          /* パネルの基準にする */
  width: 100%;
  border-radius: 4px;
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  margin-bottom: 12px;
}

/* 1段目：通常表示（茶枠） */
.qs-display{
  position: static;
  width: 100%;                           
  padding: 8px 12px;
  background: var(--qs-bg);
  border-radius: 4px;
  outline: 1px solid var(--qs-brown);
  outline-offset: -1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}


.qs.is-open .qs-display__icon {
  transform: rotate(180deg); 
  color: #FF5500 !important;           
}

/* 2段目：アクティブ風（オレンジ枠） */
.qs-display.is-active{
  /* ← absolute / top をやめて縦積み・間隔だけ */
  position: static;
  margin-top: 8px;             
  outline-color: var(--qs-orange);
}

/* 表示テキスト共通 */
.qs-display__text{
  flex: 1 1 0;
  color: var(--qs-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22.5px;
  word-wrap: break-word;
}

/* 3段目：ドロップダウンパネル（選択肢一覧） */
.qs-panel{
  position: absolute;         
  left: 0;
  top: calc(100% + 8px);      
  width: 100%;
  max-width: 319px;           
  padding: 8px 12px;
  background: var(--qs-bg);
  border-radius: 4px;
  border: 1px solid var(--qs-orange);
  display: none;               
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  box-sizing: border-box;
  z-index: 10;
}

/* 開いたときだけ出す */
.qs.is-open .qs-panel{
  display: inline-flex;
}

/* 選択肢行 */
.qs-option{
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  /* インライン同様：未選択は濃紺 */
  color: var(--qs-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 22.5px;
  word-wrap: break-word;
}

/* ラベルだけに色を当てたいとき用（構造を保つため分離） */
.qs-option__label{
  flex: 1 1 0;
}

/* 選択状態（オレンジ色） */
.qs-option.is-selected,
.qs-option.is-selected .qs-option__label{
  color: var(--qs-orange);
  font-weight: 500;
}

/* 右側の小さなチェック（18x18 の箱に、11.25x7.5 のV字アウトラインをCSSで再現） */
.qs-check{
  width: 18px;
  height: 18px;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

/* V字チェック（枠線だけ・回転で表現） */
.qs-check::before{
  content: "";
  position: absolute;
  left: 3.75px;
  top: 5.25px;
  width: 11.25px;
  height: 7.5px;
  border-left: 1.5px solid var(--qs-orange);
  border-bottom: 1.5px solid var(--qs-orange);
  transform: rotate(-45deg);
  transform-origin: left bottom;
}

/* 端末幅が狭い場合の保険 */
@media (max-width: 786px){
  .qs-display,
  .qs-display.is-active,
  .qs-panel{
    width: 100%;
  }
}

/* ▼開閉制御：最初は閉じる */
.qs-panel{ display: none; }
.qs.is-open .qs-panel{ display: inline-flex; }

/* 開いている間は枠をオレンジに（前回の “アクティブ表示用ダミー枠” を実挙動に転用） */
.qs.is-open .qs-display{ outline-color: var(--qs-orange); }

/* 前回のモック用「2つ目の .qs-display（.is-active）」は見た目の複製だったので非表示にします */
.qs-display.is-active{ display:none; }

/* コンテナ（縦並び・中央寄せ） */
.register-head{
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

/* ===== リボン見出し（画像なし） ===== */
/* ベースの帯（少し傾ける） */
.ribbon-title{
  --orange: #FF5500;
  --shadow: #000;      /* 背景の黒い“のし紙”風 */
  position: relative;
  display: inline-block;
  padding: 8px 18px;
  color: #fff;
  font-family: "Zen Antique", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  background: var(--orange);
  border-radius: 4px;
  transform: skew(-6deg);
  /* アンチエイリアス対策で will-change を指定（任意） */
  will-change: transform;
}

/* skew した分、文字だけ元に戻す */
.ribbon-title > span{
  display: block;
  transform: skew(6deg);
}

.register-hero {
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.40);
  padding: 32px 12px 16px;
}

/* ===== リード文 ===== */
.register-lead{
  width: 286px;                 /* デザイン幅に合わせる（必要なら 100% に） */
  text-align: center;
  color: #1E293B;
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  margin: 0;
}

@supports (width: min(100%, 286px)) {
  .register-lead { width: min(100%, 286px); }
}




/* 見出し本体：中央寄せ＆重ね用のグリッド */
.cap{
  display: grid;
  place-items: center;       /* 水平・垂直とも中央 */
  position: relative;        /* 何かあっても基準はここ */
  margin: 0 0 16px;
  /* 見出し一行分の横幅に合わせたいなら inline-grid でもOK */
  /* display: inline-grid; */
}

/* 2つとも同じセルに重ねる */
.cap-text,
.cap-brush{
  grid-area: 1 / 1;
}

/* テキストは上 */
.cap-text{
  position: relative;
  z-index: 2;
  color: #fff;               /* デザインに合わせて */
  font-family: "Zen Antique", serif;
  font-weight: 400;
  font-size: clamp(18px, 6vw, 28px);  /* モバイル〜PCで伸縮 */
  line-height: 1.2;
  text-align: center;
  padding: .2em .6em;        /* 多少の余白で見やすく */
}

/* ブラシは下・中央 */
.cap-brush{
  z-index: 1;
  pointer-events: none;      /* クリックを邪魔しない */
}

/* SVGのサイズと傾きをここで調整（テキストに追従して中央） */
.cap-brush-svg{
  display: block;
  width: clamp(180px, 60vw, 340px);   /* 画面幅に応じて伸縮 */
  height: auto;
  transform: rotate(-3deg)translateY(4px);
  /* 色を変えるなら fill を currentColor にして cap-brush に color 指定でもOK */
}

/* ラッパー（任意） */
.support-opt{
  width: 100%;
  height: 100%;
  padding-top: 8px;
}

:root { --primary: #FF5500; }

/* ラベル全体：横並び */
.support-opt2{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

/* 本体のcheckboxは見えなくする（操作はラベルで） */
.support-opt2__input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.support-opt2__icon .check{
  position: absolute;
  width: 12px;
  height: 9px;
  left: 50%;
  top: 50%;
  transform: translate(25%, 50%);
  display: block;
  opacity: 0;        /* 初期は非表示(既存と同じ) */
}

.support-opt2__input:checked + .support-opt2__icon .check{
  opacity: 1;
}

/* 18x18のキャンバスにSVGを重ねる */
.support-opt2__icon{
  position: relative;
  width: 18px; height: 18px;
  display: inline-block;
}

/* すべて重ねる */
.support-opt2__icon .box,
.support-opt2__icon .check{
  position: absolute;
  inset: 0;           /* 親(18x18)にフィット */
  display: block;
}

/* 初期状態：枠のみ表示、塗り＆チェックは非表示 */
.box--filled { opacity: 0; }
.check      { opacity: 0; }

/* チェック時：塗りとチェックを表示、枠のみは非表示 */
.support-opt2__input:checked + .support-opt2__icon .box--filled { opacity: 1; }
.support-opt2__input:checked + .support-opt2__icon .check      { opacity: 1; }
.support-opt2__input:checked + .support-opt2__icon .box--empty  { opacity: 0; }

/* テキスト */
.support-opt2__text{
  color: #4D4D4D;
  font: 500 14px/1 "Noto Sans JP", system-ui, -apple-system, sans-serif;
}

/* フォーカス可視化（キーボード操作時） */
.support-opt2__input:focus-visible + .support-opt2__icon{
  outline: 2px solid color-mix(in oklab, var(--primary), #000 20%);
  outline-offset: 2px;
}


.king{background: linear-gradient(to bottom, #0F114A 0%, #070807 100%); color: #fff;}
.king .score .score-item .score-item50:nth-child(1){background: url("/images/zeimu-oh/king-item50-01.png") no-repeat; width: 48%; background-size: contain; text-align: center; line-height: 115px; height: 90px;}
.king .score .score-item .score-item50:nth-child(2){background: url("/images/zeimu-oh/king-item50-02.png") no-repeat; width: 48%; background-size: contain; text-align: center; line-height: 115px; height: 90px; margin-bottom: 10px;}
.king .score .score-item100{background: url("/images/zeimu-oh/king-item100.png") no-repeat; background-size: contain; text-align: center; line-height: 115px; height: 100px; width: 100%;}
.king .score-retry{display: none;}
.king .score .score-share{width: 100%; margin-top: 5px;}
.king .score .score-share img:first-child{display: none;}
.king .score .score-share img:last-child{display: block;}
.king .score .score-item100 strong{font-size: 30px; filter: blur(15px); color: #fff;}
.king .score-item100 b{font-size: 22px; color: #fff;}

.score .score-fv div{position: relative; padding: 40px 0 0;}
.score .score-fv div img{display: block; width: -webkit-fill-available; margin: 0 auto;}
.score .score-fv div.fv-king img{height: auto; width: -webkit-fill-available;}
.score .score-fv div.fv-king::before{content:""; position:absolute; top:-40px; left:-50px; width: 90%; height: auto;}
.score-item {
  display: flex; 
  justify-content: space-between; 
  flex-wrap: wrap;
  width: 94%;
  margin: 0 auto;
}
.score-item-right{display: flex; justify-content: end; margin: 15px 0; width: 100%; text-align: end;}
.score-item-right a{display: block; width: 45%;}
.score-item-right a img:first-child{display: block;}
.score-item-right a img:last-child{display: none;}
.king .score-item-right a img:first-child{display: none;}
.king .score-item-right a img:last-child{display: block;}
.score-retry{width: 64%;}
.score-share{width: 36%; margin-top: 5px;}
.score-share img:first-child{display: block;}
.score-share img:last-child { 
  display: none;
  margin-bottom: 24px;
}
.score .score-item .score-item50:nth-child(1){background: url("/images/zeimu-oh/score-item50-01.png") no-repeat; width: 48%; background-size: contain; text-align: center; line-height: 115px; height: 90px;}
.score .score-item .score-item50:nth-child(2){background: url("/images/zeimu-oh/score-item50-02.png") no-repeat; width: 48%; background-size: contain; text-align: center; line-height: 115px; height: 90px; margin-bottom: 10px;}
.score .score-item .score-item50 strong{font-size: 30px; filter: blur(15px);}
.score .score-item .score-item50 b{font-size: 18px; filter: blur(15px);}
.score-item100 { 
  background: url("/images/zeimu-oh/score-item100.png") no-repeat; 
  background-size: contain; 
  text-align: center; 
  line-height: 115px; 
  width: 100%;
}
.score .score-item100 strong{font-size: 30px; filter: blur(15px); color: #FF5500;}
.score-item100 b{font-size: 22px; color: #FF5500;}

/* ===== パネル ===== */
.panel {
  color: #FFFB00;
}
.value-blur {
  filter: blur(7px);
}

.king .value-big {
  color: #FFFB00;
}

.value-big {
  color:var(--navy); 
  font-size:40px; 
  font-weight:700; 
  line-height:40px; 
  display:inline-block;
  font-family: "DIN 2014";
}

.value-big-blur {
  color:var(--navy); 
  font-size:40px; 
  font-weight:700; 
  line-height:40px; 
  display:inline-block;
  font-family: "DIN 2014";
}

.king .value-unit {
  color: #FFFB00;
}

.value-unit { 
  color:var(--navy); 
  font-size:28px; 
  font-weight:700; 
  line-height:40px; 
  display:inline-block; 
  margin-left:2px;
  font-family: "Noto Sans JP";
}

.king .value-slash {
  color: #FFFB00;
}

.value-slash {
  color:var(--navy); 
  font-size:24px; 
  font-weight:500; 
  line-height:40.89px; 
  display:inline-block; 
  margin-left:2px;
  font-family: DIN;
}

/* ランキング用着色 */

.king .rank-box .value-big-blur {
  color: #FFFB00;
}

.king .rank-box .value-unit {
  color: #FFFB00;
}

.rank-box .value-big { 
  color:var(--primary);
  font-family: "Noto Sans JP";
}

.rank-box .value-big-blur { 
  color:var(--primary);
  font-family: "Noto Sans JP";
  filter: blur(7px);
}

.rank-box .value-unit{color:var(--primary)}


.rank-summary .value-blur {
  padding:15px 8px 8px;
  filter: none; 
}

.detail{position: relative; overflow: hidden; padding-bottom: 30px;}
/* ぼかし用ラッパ：blurで端が切れないように余白を与える */
.detail-blur{
    position: relative;
    padding: 8px;         
    margin: -8px;         
    overflow: hidden;     
    isolation: isolate;   
    contain: paint;       
  }
  
  /* 実際にぼかすのは中のUL本体 */
  .detail-blur.is-blurred > .detail-ul{
    filter: blur(7px);    
    will-change: filter;  
    transform: translateZ(0); 
    pointer-events: none; 
  }
  
  .detail-blur.is-blurred::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    mix-blend-mode: normal;   
  }
  
  /* iOS系での安全寄りフォールバック（負荷をさらに下げる） */
  @supports (-webkit-touch-callout: none) {
    .detail-blur.is-blurred > .detail-ul{
      filter: blur(4px);      
    }
  }
  
  /* 端末が極端に非力/高負荷時の逃がし（任意）*/
  @media (max-width: 768px) {
    .detail-blur.is-blurred > .detail-ul{
      filter: blur(4px);
    }
  }
.detail .detail-ttl{display: block; width: 180px; margin: 22px auto 18px;}
.detail .detail-ttl:nth-child(1){display: block;}
.detail .detail-ttl:nth-child(2){display: none;}
.king .detail .detail-ttl{display: block; width: 180px; margin: 22px auto 18px;}
.king .detail .detail-ttl:first-child{display: none;}
.king .detail .detail-ttl:last-child{display: block;}
.detail-ul{display: block;}
.detail-li{display: flex; justify-content: space-between; background: url("/images/zeimu-oh/detail-li.png") no-repeat; background-size: contain; width: 100%; height: 46px; padding:4px 8px; margin-bottom: 10px;}
.detail-li p{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
 overflow: hidden; text-overflow: ellipsis; width: 85%; height: 45px; color: #0E0F3B; }
.king .detail-li p{color: #fff;}
.detail-li p span{display: block; font-weight: bold;}
.detail-li div{width: 15%;}
.detail-li div img{display: none; width: 40px; height: 40px; padding: 3px 0;}
.score-btn{position: relative; display: block; width: 100%; z-index: 3;}
.popup{display: none; top: 0; height: calc(100vh - 100px); overflow-y: scroll; width: auto; background: #F8FAFC; border-radius: 5px; margin: 18px; padding: 25px 18px; z-index: 4;}
.popup-inner{height: 100%;}
.popup-question{position: relative;}
.popup-correct,.popup-incorrect{position: absolute; top: -20px; right: 40px; width: 45px; height: 45px;}
.popup-flex{margin-top:10px; padding-bottom: 30px; display: flex; justify-content: space-between; flex-wrap: wrap;}

.popup-flex .inquiry-badge {
  margin: 0 auto;
}

.popup-prev,.popup-next{width: 35%; margin: 0 8px;}
.popup-close{width: 100%; margin-top: 10px;}

.ranking-ttl{display: block; width: 200px; margin: 80px auto 30px;}

.ranking-li{position: relative; display: flex; justify-content: space-between; align-items: center; padding: 5px 0 8px 10px; background: url("/images/zeimu-oh/ranking-li.png") no-repeat; background-size: contain; background-position: bottom;}
.ranking-txt{font-size: 18px; font-weight: bold; padding-right: 8px;}
.ranking-txt span{font-size: 26px; padding-right: 8px;}
.ranking-li:nth-child(1){position: relative; height: 38px; padding: 18px 0 32px 10px; background: url("/images/zeimu-oh/ranking-bg01.png") no-repeat; background-size: contain;}
.ranking-li:nth-child(1) .ranking-txt{font-size: 22px;}
.ranking-li:nth-child(1) .ranking-txt span{font-size: 52px; line-height: 52px; padding-right: 8px; color: #FF5500;}
.ranking-li:nth-child(1) .ranking-txt img{position: absolute; top: 18px; left: 48px; width: auto; height: 17px;}
.ranking-li:nth-child(2){position: relative; height: 32px; padding: 10px 0 25px 10px; background: url("/images/zeimu-oh/ranking-bg02.png") no-repeat; background-size: contain;}
.ranking-li:nth-child(2) .ranking-txt{font-size: 22px;}
.ranking-li:nth-child(2) .ranking-txt span{font-size: 46px; line-height: 46px; padding-right: 8px; color: #182B47;}
.ranking-li:nth-child(3){position: relative; height: 30px; padding: 5px 0 10px 10px; background: url("/images/zeimu-oh/ranking-bg03.png") no-repeat; background-size: contain;}
.ranking-li:nth-child(3) .ranking-txt{font-size: 22px;}
.ranking-li:nth-child(3) .ranking-txt span{font-size: 40px; line-height: 40px; padding-right: 8px; color: #174100;}
.ranking-correct{width: 60px; text-align: end; font-weight: bold;}
.ranking-correct span{font-size: 28px;}

.ranking .row {
  display:flex; 
  gap:8px; 
  align-items:flex-start; 
  justify-content:center; 
  width:100%;
  padding: 24px 0px;
}

.ranking .grow {
  flex:1 1 0
}

/* 共通：ボタン本体と装飾の基本 */
.ranking .btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;           
}

.ranking .btn-text {
  color: #E6452F;
}

.ranking .btn-decor{
  position: absolute;
  width: 18px;                
  height: 19px;
  pointer-events: none;
}
.ranking .btn-decor svg{ display:block; } 
.ranking .decor-br{ transform: rotate(0deg); } 
.ranking .decor-tl{ transform: rotate(180deg); } 

/* ===== ① 上の「登録して詳細を確認する」用（.btn-primary） ===== */
.ranking .btn-primary{
  --decor-offset: -1px;       
}
.ranking .btn-primary .decor-tl{ top: var(--decor-offset); left:  var(--decor-offset); }
.ranking .btn-primary .decor-br{ bottom: var(--decor-offset); right: var(--decor-offset); }

/* ===== ② 左の「再挑戦する！」用（.btn-ghost） ===== */
.ranking .btn-ghost{
  --decor-offset: -1px;
}
.ranking .btn-ghost .decor-tl{ top: var(--decor-offset); left:  var(--decor-offset); }
.ranking .btn-ghost .decor-br{ bottom: var(--decor-offset); right: var(--decor-offset); }

/* 参考：見た目の枠（あなたの既存スタイルに合わせて） */
.ranking .btn-primary{
  width:100%;
  height:48px;
  padding:8px 16px;
  background:#fff;
  border:1.5px solid #E6452F;
  box-shadow:2px 4px 8px rgba(0,0,0,.15);
  color:#E6452F; font:700 18px/1 "Corporate Logo ver2",sans-serif;
}
.ranking .btn-ghost{
  height:40px; padding:8px 16px;
  background:#fff;
  border:1px solid #555;
  color:#333; font:700 18px/1 "Corporate Logo ver2",sans-serif;
}



/* ====== シェアするボタンのレイアウト調整 ====== */
.ranking .btn-share{
  /* 既存の .btn の display / align-items / overflow を継承 */
  gap: 4px;                       
  height: 40px;                   /* 再挑戦ボタンと高さを揃えるなら 40px */
  padding: 8px 16px;              
  border:1px solid var(--gray, #555);
  color: var(--navy, #0E0F3B);
  font-size: 14px;
  font-weight: 700;
  text-shadow: 1px 2px 3px rgba(255,255,255,.25);
  box-shadow: 0 2px 3px rgba(0,0,0,.15);
  min-width: 120px;
}


/* アイコンの見た目調整（ライン高さと位置が揃うように） */
.ranking .ranking .btn-share .btn-icon{
  display:inline-flex;
  width:20px; height:20px;
  line-height:0;
}
.ranking .btn-share .btn-icon svg{ width:20px; height:20px; display:block; }

/* 右下だけに装飾を置く（左上は置かない） */
.ranking .btn-share .decor-br{
  bottom: -1px;   /* ボーダーに少し潜らせるとFigmaに近い */
  right:  -1px;
}
/* 念のため、他のボタン向けの .decor-tl が混ざっても非表示に */
.ranking .btn-share .decor-tl{ display:none; }

.mypage-ttl{display: block; width: 200px; margin: 80px auto 30px;}
.mypage-flex{position: relative; width: 100%; display: flex; align-items: center; margin-bottom: 20px;}
.mypage-flex img{display: block; width: auto; height: 48px; margin-right: 25px;}
.mypage-flex div{display: block; width: auto}
.mypage-flex div span{display: block; font-size: 16px; color: #999;}
.mypage-flex div strong{font-size: 28px; color: #1A3261;}
.mypage-flex img.mypage-flex-svg{position: absolute; bottom: 5px; right: 0; width: 15px; height: 15px; margin: 0;}
.mypage-history-ttl {
  display: block; 
  width: 150px; 
  margin: auto;
}

.mypage .score-item .score-item50:nth-child(1){background: url("/images/zeimu-oh/mypage-item50-01.png") no-repeat; width: 48%; background-size: contain; text-align: center; line-height: 115px; height: 90px;}
.mypage .score-item .score-item50:nth-child(2){background: url("/images/zeimu-oh/mypage-item50-02.png") no-repeat; width: 48%; background-size: contain; text-align: center; line-height: 115px; height: 90px; margin-bottom: 10px;}
.mypage .score-item .score-item50 strong{font-size: 30px;}
.mypage .score-item .score-item50 b{font-size: 18px;}
.mypage .score-item100 strong{font-size: 30px; color: #FF5500;}

/* ===== popup ===== */
.popup{display: none; position: fixed; top: 0; height: calc(100vh - 100px); overflow-y: scroll; width: auto; background: #F8FAFC; border-radius: 5px; margin: 18px; padding: 25px 18px; z-index: 4;}
.popup-inner{height: 100%;}
.popup-question{position: relative;}
.popup-correct,.popup-incorrect{position: absolute; top: -20px; right: 40px; width: 45px; height: 45px;}
.popup-flex{margin-top:10px; padding-bottom: 30px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.popup-prev,.popup-next{width: 35%; margin: 0 8px;}
.popup-close{width: 100%; margin-top: 10px;}

.popup{ display: none; }
.popup.is-open { 
  display: block; 
}
@media (min-width: 768px){
  .popup.is-open { 
    display: block; 
    max-width: 480px;
    display: grid;
    max-width: 480px;
    align-items: center;
    margin: auto;
    inset: 0;
    position: fixed;
    place-items: center;
    width: auto;
  }
}
#popup01 [data-field="qtotal"] { display: none !important; }

/* 親：必ず左寄せで横並び */
.nickline{
  align-items: center;
  position: relative;             
  padding-bottom: 2px;
  border-bottom: none;
}

/* デフォルトで縦線も非表示 */
.nickline__bar{
  display: none;
}

/* 編集モードのときだけ表示 */
.nickline.is-editing{
  border-bottom: 1px #0E0F3B solid;
}
.nickline.is-editing .nickline__bar{
  flex: 0 0 1px !important;   /* 幅 1px に固定 */
  width: 1px !important;
  height: 24px;
  background: #0E0F3B;
  display: inline-block !important;
  align-self: center;
  position: relative;
  z-index: 2;
  top: 3px;
}

/* テキストはコンテンツ幅だけ。伸びない・広がらない */
.nickline__text{
  display: inline-block !important; /* 汎用 block を打ち消す */
  flex: 0 0 auto !important;        /* 伸長/縮小しない */
  color: #1A3261 !important;
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 24px !important;
  line-height: 1.2;
  cursor: text;
}



/* 入力欄は重ねる（レイアウトに影響させない） */
.nickline__input{
  position: absolute;
  left: 0;
  bottom: 2px;                  
  width: calc(100%);     
  border: 0;
  outline: none;
  background: transparent;
  padding: 0;
  z-index: 1;
  font-size: 24px;
  color: #1A3261 !important;
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  font-weight: 700;
}
.nickline__input.is-editing{
  background: #ffffff66;        
}

:root{
  --primary:#FF5500;
  --accent:#E95513;
  --navy:#0E0F3B;
  --ink:#1E293B;
  --paper:#F8FAFC;
  --text:#222222;
  --gray:#555555;
}

.mypage .row { 
  display:flex; 
  gap:8px; 
  align-items:flex-start; 
  justify-content:center; 
  width:100%;
  padding: 16px 0px;
}
.mypage .col{flex:1 1 0; display:flex; flex-direction:column; gap:8px; align-items:flex-start}

.mypage .cap{
  position:relative; 
  width:135px; 
  height:10px;
}

.mypage .cap span {
  position:absolute;  
  top:4px; 
  color:#fff; 
  font-size:16px; 
  font-weight:900; 
  line-height:19.2px;
}

.mypage .cap-text{
  top:7px !important; 
  left: -12px;
}

.mypage .cap {
  position: relative;
  display: inline-flex;
  align-items: center;
  font: 700 20px/1.2 "Corporate Logo ver2", sans-serif;
  color: #FF5500;
  z-index: 1;
  left: 20px;
}

/* SVGブラシ装飾 */
.mypage .cap-brush {
  position: absolute;
  right: 61px;    /* ← 数字の後ろからの位置を微調整 */
  bottom: -8px;   /* ← 下にはみ出させる感じに */
  width: 90px;    /* サイズ調整 */
  height: auto;
  z-index: -1;    /* 文字の背面に送る */
  color: #FF5500; /* SVGのfill="currentColor"なのでここで色変えられる */
  pointer-events: none;
  overflow: visible;
}

.mypage .cap-brush .brush-svg {
  display: flex;
  width: 100%;
  height: auto;
  color: var(--navy);
  transform: rotate(-3deg);
  flex-shrink: 0;
}

.mypage .panel{
  align-self:stretch; padding:6px; background:#fff; outline:1px solid #4B2600; outline-offset:-1px;
  display:flex; flex-direction:column; gap:8px;
}
.mypage .value {
  align-self:stretch; 
  padding:11px 8px 8px; 
  background:#fff; 
  border-radius:2px; 
  outline:1px solid #555;
  display:flex; 
  align-items:center; 
  justify-content:center;
}


.mypage .value-big {
  color:var(--navy); 
  font-size:40px; 
  font-weight:700; 
  line-height:40px; 
  display:inline-block;
  font-family: "DIN 2014";
}


.mypage .value-unit { 
  color:var(--navy); 
  font-size:28px; 
  font-weight:700; 
  line-height:40px; 
  display:inline-block; 
  margin-left:2px;
  font-family: "Noto Sans JP";
}
.mypage .value-slash {
  color:var(--navy); 
  font-size:24px; 
  font-weight:500; 
  line-height:40.89px; 
  display:inline-block; 
  margin-left:2px;
  font-family: DIN;
  position: relative;
  top: 5px;
}

/* ===== QA ===== */
.qa{display:flex; flex-direction:column; align-items:center; gap:16px; padding-bottom: 24px;}
.qa-heading{display:flex; flex-direction:column; align-items:center; gap:1px}
.qa-title {
  color: #FFFB00;
  font-family: "Zen Antique";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}
.qa-underline{width:174.72px; height:10px; background:#0D1881}
.qa-list{display:flex; flex-direction:column; gap:4px; width:100%}
.qa-item {
  align-self:stretch; 
  padding:8px; 
  border-radius:2px; 
  border:1px solid #555;
  gap:8px; 
  align-items:center; 
  justify-content: space-between;
  --decor-offset: -1px;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}

.qa-item-blur {
  align-self:stretch; 
  padding:8px; 
  border-radius:2px; 
  border:1px solid #555;
  display:flex; 
  gap:8px; 
  align-items:center; 
  justify-content: space-between;
  --decor-offset: -1px;
  position: relative;
  box-sizing: border-box;         
  overflow: hidden;  
  filter: blur(7px);              
}



.qa-item .decor-br{ 
  bottom: var(--decor-offset); 
  right: var(--decor-offset);
}
.qa-body {
  flex:1 1 0; 
  display:flex; 
  flex-direction:column;
  min-width: 0px;
}
.qa-num {
  color: #0E0F3B;
  font-family: "Noto Sans JP";
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
  line-height: 19.2px;
  align-self: stretch;
}
.qa-text {
  overflow: hidden;
  color: #1E293B;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  height: 24px;
  min-height: 24px;
  align-self: stretch;
  min-width: 0px;
}
.qa-icon {
  width:33px; 
  height:32px; 
  object-fit:cover
}

  /* ===== ① 上の「登録して詳細を確認する」用（.btn-primary） ===== */
  .btn-primary{
    --decor-offset: -1px;       
  }
  .btn-primary .decor-tl{ top: var(--decor-offset); left:  var(--decor-offset); }
  .btn-primary .decor-br{ bottom: var(--decor-offset); right: var(--decor-offset); }
  
  /* 参考：見た目の枠（あなたの既存スタイルに合わせて） */
  .btn-primary{
    width:100%;
    height:48px;
    padding:8px 16px;
    background:#fff;
    border:1.5px solid #E6452F;
    box-shadow:2px 4px 8px rgba(0,0,0,.15);
    color:#E6452F; font:700 18px/1 "Corporate Logo ver2",sans-serif;
  }

  .btn-decor{
    position: absolute;
    width: 18px;                
    height: 19px;
    pointer-events: none;
  }
  .btn-decor svg{ display:block; } 
  .decor-br{ transform: rotate(0deg); } 
  .decor-tl{ transform: rotate(180deg); } 





/* ルートを固定し、外付け要素の影響を遮断 */
html, body { height: 100%; margin: 0; }

/* 実際にスクロールするのは #page だけ */
#page {
  position: fixed;
  inset: 0;                 /* top/right/bottom/left: 0 */
  overflow: auto;
  min-height: 100dvh;       /* モバイルのアドレスバー変動にも追随 */
}
#page > main { flex: 1 0 auto; }
#page > footer { margin-top: auto; }

main{position: relative; width: 100%; max-width: 480px; margin: 0 auto;}

/* テキスト選択を無効化するクラス */
.no-select {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}