*{box-sizing:border-box}
html{font-size:16px}
@media (max-width:480px){html{font-size:17px}}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",Roboto,"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo",sans-serif;color:#222;background:#fff}
.container{max-width:860px;margin:0 auto;padding:16px}
header{padding:12px 16px;border-bottom:1px solid #e5e7eb}
header .title{font-size:1.6rem;font-weight:700}
.post{padding:16px 0;border-bottom:1px solid #f0f0f0}
.post h2{font-size:1.4rem;margin:0 0 8px}
.post .meta{font-size:0.9rem;color:#666;margin-top:8px}
.post img{max-width:100%;height:auto;border-radius:8px;display:block;margin:8px 0}
.post .content{font-size:1.05rem}
.post .content a{word-break:break-all}
.nav{margin:16px 0;display:flex;gap:8px;flex-wrap:wrap}
.nav a{padding:8px 12px;border:1px solid #e5e7eb;border-radius:8px;text-decoration:none;color:#222}
.form{max-width:680px}
.input, .textarea, .file, .button {
  padding:10px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  font-size:1rem;
}
.textarea{min-height:200px;resize:vertical}
.button{background:#0ea5e9;color:#fff;border:none;cursor:pointer}
.button:disabled{opacity:.6;cursor:not-allowed}
label{display:block;margin:12px 0 6px;color:#333}
.login{max-width:360px;margin:24px auto}
.adminbar{margin:12px 0}
.adminbar a{margin-right:8px}

img.img-small  { max-width:30% !important; height:auto; }
img.img-medium { max-width:50% !important; height:auto; }
img.img-large  { max-width:100% !important; height:auto; }

figure { margin: 12px 0; }
figure.alignleft  { float:left;  margin-right:12px; }
figure.alignright { float:right; margin-left:12px; }
figure img { display:block; }
figcaption { font-size:.9em; color:#666; text-align:center; margin-top:6px; }
@media (max-width:480px){
  figure.alignleft, figure.alignright { float:none; margin:12px 0; }
}

form.form input[type="date"] {
  max-width: 220px;
  width: 100%;
}
@media (max-width:480px){
  form.form input[type="date"] {
    max-width: 100%;
  }
}

form.form input[name="date"]{
  width: auto !important;     
  max-width: 260px !important;
  display: inline-block;
}

@media (max-width:480px){
  form.form input[name="date"]{
    width: 100% !important;
    max-width: 100% !important;
  }
}

form.form input.input-date[name="date"]{
  width: 12em !important;
  max-width: 100%;
  display: inline-block;
}

@media (max-width:480px){
  form.form input.input-date[name="date"]{
    width: 12em !important;
  }
}

.date-wrap{
  display:inline-block;
  width:14em;
  max-width:100%;
}
.date-wrap .input-date{
  width:100% !important;
  min-width:0 !important;
}

@media (max-width:480px){
  .date-wrap{ width:14em; }
}

.date-wrap{
  display:inline-block;
  width: 220px;
  max-width:100%;
}

.date-wrap .input-date{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box;
  -webkit-appearance:none;
  appearance:none;

  font-size:16px;
  height:44px;
  padding:10px 12px;
  line-height:1.2;
}

@media (max-width:480px){
  .date-wrap{ width: 200px; }
}

.input-date::-webkit-datetime-edit { padding:0; }

.back-button {
  background:#0ea5e9;
  color:#fff !important;
}

.back-button {
  color:#fff !important;
}

.back-button {
  background: #7fffd4 !important;
  border: 2px solid #7fffd4 !important;
  color: #333 !important;
  font-weight: normal;
}

.back-button:hover {
  background: #66e6c2 !important;
  border-color: #66e6c2 !important;
  color: #111 !important;
}

.post img{
  max-width:100%;
  height:auto;
  border-radius:8px;
  display:block;
  margin:12px 0;
}

.post .content p { margin: 10px 0 !important; }
.post .content figure { margin: 8px 0 !important; }

.post .content p + img,
.post .content p + figure { margin-top: 6px !important; }

.post .content img + p,
.post .content figure + p { margin-top: 6px !important; }

.post .content p > img { display:block; margin: 6px 0 !important; }

.post .content img { margin: 6px 0 !important; }

.post .meta {
  padding: 25px 0;
  font-size: 1.0rem;
  color: #444;
}

.post .meta::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ddd;
  margin-bottom: 8px;
}

/* ========== Clean Card Pack ========== */
.post{
  border: 1px solid #7fffd4;
  border-radius: 14px;
  padding: 18px;
  margin: 18px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.post h2{
  font-size: 1.35rem;
  line-height: 1.35;
  margin: 0 0 10px;
}

.post .content{
  font-size: 1.06rem;
}

.post .meta{
  color:#556;
}
.post .meta::before{
  content:"";
  display:block;
  border-top:1px solid #eee;
  margin:10px 0 8px;
}

.nav a{
  border-radius: 999px;
  padding: 8px 14px;
  background:#fff;
  transition: .15s ease;
}
.nav a:hover{ background:#f6f8fa; }

.nav a {
  border: 1px solid #ff1493;
  color: #ff1493;
}

.nav a:hover {
  background: #ffe4f1;
  border-color: #ff1493;
  color: #ff1493;
}

.nav a[style*="font-weight:700"] {
  background: #ff1493;
  color: #fff;
  border-color: #ff1493;
}

.post h2 a {
  font-weight: normal;
  color: #32cd32;
  text-decoration: none;
}

.post h2 {
  font-weight: normal;
  color: #32cd32;
}

.post h2 a {
  font-weight: normal;
  color: #32cd32;
  text-decoration: none;
}

/* === Header Styling === */
:root{
  --brand-green: #15803d;
  --brand-bg:    #ecfdf5;
  --brand-line:  #b7e4c7;
}

header{
  background: var(--brand-bg);
  padding: 14px 16px;
  border-bottom: 1px solid var(--brand-line);
  box-shadow: 0 2px 6px rgba(0,0,0,.03);
}

.site-title{
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand-green);
  text-decoration: none;
  display: inline-block;
  line-height: 1.2;
}

.site-title:hover{ opacity:.92; }

.adminbar{
  margin-top: 8px;
}
.adminbar a{
  margin-right: 8px;
  text-decoration: none;
  color: #334155;
  border: 1px solid #e5e7eb;
  padding: 6px 10px;
  border-radius: 8px;
}
.adminbar a:hover{
  background: #f1f5f9;
}

.post .content span[style*="line-height"]{
  line-height: 1.45 !important;
}

.post .content p { margin: 0.45em 0 !important; }

.post .content img {
  display:block;
  margin: 8px 0 !important;
  line-height: normal !important;
}

html body .container article.post .content p {
  line-height: 1.0 !important;
  margin-top: 0.4em !important;
  margin-bottom: 0.4em !important;
}

html body .container article.post h2 {
  margin-bottom: 1.8em; 
}

html body .container article.post .content {
  margin-top: 0.5em;
}

html body .container article.post .content [style*="color"] {
  color: #444444 !important;
}

html body .container article.post .content font[color] {
  color: #444444 !important;
}

.no-save { -webkit-touch-callout: none; user-select: none; }
.img-guard { position: relative; display: inline-block; }
.img-guard img { display: block; -webkit-user-drag: none; user-drag: none; }
.img-guard::after {
  content: "";
  position: absolute; inset: 0;
}

html body .container article.post .content.lh-fix,
html body .container article.post .content.lh-fix * {
  line-height: 1.50 !important;
}

html body .container article.post .content.lh-fix p {
  margin: 0 !important;
  padding: 1 !important;
}


html body .container article.post .content.lh-fix p + p {
  padding-top: 0px !important;
}

html body .container article.post .content.lh-fix li {
  margin: 1 !important;
  padding: 0 !important;
}
html body .container article.post .content.lh-fix li + li {
  padding-top: 0px !important;
}

html body .container article.post .content.lh-fix p > img:only-child {
  display: block;
  margin: 8px 0 !important;
  line-height: normal !important;
}

html body .container article.post .content a {
  color: #ff1493 !important;
  text-decoration: underline;
}
html body .container article.post .content a:visited {
  color: #d10f7a !important;
}
html body .container article.post .content a:hover,
html body .container article.post .content a:focus {
  color: #ff69b4 !important;
  text-decoration: underline;
  outline-offset: 2px;
}

.official-link{
  display:inline-block;
  margin-left:12px;
  padding:6px 10px;
  border:1px solid var(--brand-line, #b7e4c7);
  border-radius:999px;
  background: var(--brand-bg, #ecfdf5);
  color: var(--brand-green, #15803d);
  font-size:.95rem;
  text-decoration:none;
  line-height:1;
  vertical-align:middle;
  transition: background .15s ease, transform .04s ease;
}
.official-link:hover{
  background:#d9f7ea;
  text-decoration:none;
}
.official-link:active{
  transform: translateY(1px);
}

@media (max-width:480px){
  .official-link{ margin-left:8px; padding:6px 9px; font-size:.93rem; }
}

.post h2 .draft-label{
  display:inline-block;
  margin-left:8px;
  padding:4px 10px;
  font-size:1rem;
  font-weight:700;
  color:#b45309;
  background:#fef3c7;
  border:1px solid #f59e0b;
  border-radius:8px;
  line-height:1;
  vertical-align:middle;
}

.adminbar a.admin-preview {
  background: #f59e0b;
  color: #fff !important;
}
.adminbar a.admin-preview:hover {
  background: #d97706;
}

.adminbar{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.adminbar a{
  margin-right: 0 !important;
}

@media (max-width: 480px){
  .adminbar a{
    flex: 1 1 100%; 
    text-align: center; 
  }
}

.post .content {
  color: #666666 !important;
}

html, body { touch-action: manipulation; }

.post .meta,
.post .meta time {
  color: #999999 !important;
}

/* === Post Title: ???? ???? === */
:root{
  --ttl-size-pc: 1.50rem;    /* PC??????? */
  --ttl-size-sp: 1.26rem;    /* SP??????? */
  --ttl-color:   #888888;    /* ??????? */
  --ribbon-w:    6px;        /* ?????????? */
  --ribbon-top:  .18em;      
  --ribbon-btm:  .18em;      
  --ribbon-rad:  999px;
  --ribbon-grad: linear-gradient(#22c55e, #0ea5e9);
  --ttl-weight:  500;        /* ??????normal=400, bold=700? */
  --ttl-gap:     30px;       /* ?????????????12px?20px? */
  --hover-fade:  .92;
}

.post h2{
  position: relative;
  padding-left: calc(var(--ribbon-w) + 8px) !important;
  margin: 0 0 var(--ttl-gap) !important;
  font-weight: var(--ttl-weight);
  font-size: var(--ttl-size-pc) !important;
  line-height: 1.35;
  color: var(--ttl-color) !important;
}

.post h2::before{
  content:"";
  position:absolute;
  left:0;
  top:   var(--ribbon-top);
  bottom:var(--ribbon-btm);
  width: var(--ribbon-w);
  background: var(--ribbon-grad);
  border-radius: var(--ribbon-rad);
}

.post h2 a{
  color: inherit !important;
  text-decoration: none;
  transition: opacity .15s ease;
}
.post h2 a:hover{ opacity: var(--hover-fade); }

@media (max-width:480px){
  .post h2{ font-size: var(--ttl-size-sp) !important; }
}

/* --- Header Blog Title ?????? --- */
.site-title{
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: 1.6rem;          /* ??????? */
  color: #15803d;             /* ??????????OK */
  text-decoration: none;
  padding-bottom: 8px;        /* ?????? */
}

.site-title::after{
  content:"";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;                /* ????? */
  background: #22c55e;        /* ???? */
  border-radius: 2px;
  transition: background .2s ease, opacity .2s ease;
}

.site-title:hover{
  opacity:.9;                 /* hover???????? */
}

/* ???????????????????????? */
header .container{
  display: flex;
  align-items: center;
}

header .container .official-link{
  margin-left: auto;
}