@charset "UTF-8";
    :root{
      --bg:#222;
      --card:#333;
      --text:#fff;
      --sub:#bdbdbd;
      --accent:#50bfff;
      --border:#444;
    }
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
      line-height:1.7;
      padding: 16px 12px 40px;
      font-size: 16px;
    }
    .new-flag{
  	display:inline-block;
  	font-size: 12px;
  	font-weight: 800;
  	padding: 2px 6px;
  	border-radius: 6px;
  	margin-right: 8px;
  	background: #ff5a5a;
  	color: #fff;
  	line-height: 1.2;
  	vertical-align: middle;
	}
    .date{
		font-size: 12px;
		color: var(--sub);
  		margin-left: auto;
}
    header{
      max-width: 780px;
      margin: 0 auto 18px;
      padding: 10px 0;
    }
    h1{
      margin: 0 0 6px;
      font-size: 22px;
      text-align:center;
      letter-spacing: .04em;
    }
    .lead{
      margin:0;
      color:var(--sub);
      font-size: 14px;
      text-align:center;
    }
    main{
      max-width: 780px;
      margin: 0 auto;
    }
    .work-link{
      display:block;
      color:inherit;
      text-decoration:none;
      margin-bottom: 14px;
    }
    .card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius: 10px;
      padding: 14px 14px 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,.25);
    }
    .title-row{
      display:flex;
      align-items:baseline;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }
    .title{
      font-weight: 700;
      font-size: 18px;
      line-height: 1.4;
    }
    .read-flag{
      font-size: 13px;
      color: var(--accent);
      font-weight: 600;
      margin-left: 8px;
    }
    .meta{
      font-size: 13px;
      color:var(--sub);
      margin-bottom: 8px;
    }
    .summary{
      font-size: 15px;
      color:#e6e6e6;
      margin: 0 0 10px;
      word-break: break-word;
    }
    .progress-bar{
      width: 100%;
      height: 7px;
      background:#555;
      border-radius: 999px;
      overflow:hidden;
    }
    .progress-fill{
      height:100%;
      width:0%;
      background: var(--accent);
      transition: width .25s ease;
    }
    .mini{
      margin-top: 8px;
      font-size: 12px;
      color:var(--sub);
      display:flex;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    
    button {
 		padding: 10px 20px;
  		font-size: 16px;
  		background-color: #606060;
  		color: white;
  		border: none;
  		border-radius: 5px;
  		text-align:center;
  		cursor: pointer;
		}

	button:hover {
    	background-color: #0056b3;
    }

    /* PRカード（728×90を置きやすいよう中央寄せ） */
    .affiliate-card .summary{
      display:flex;
      justify-content:center;
      overflow:hidden; /* はみ出しを隠す（スマホは728が入らない前提） */
    }
    .affiliate-card{
      margin: 0 0 1.5rem; /* 前後の余白 */
    }

	@media (max-width: 600px) {
  	body {
   	 font-size: 16px;
  	}
  	.title {
    font-size: 18px;
  	}
  	.meta, .summary {
    font-size: 14px;
  	}
}