/*reset CSS*/
*{box-sizing:border-box}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}


 
/*基礎*/
html {
  font-size:100%;
  font-family:sans-serif;
  line-height: 1;
}

img{
  max-width: 100%;
}

.disable-scroll {
  overflow: hidden;
}

.tahoma {
  font-family: Tahoma;
}

/*記事ヘッダ*/
.article-header {
  padding-bottom: 10px;
  margin-bottom: 10px;
  & .article-title {
    border-bottom: 2px solid black;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    & h1 {
      margin: 0;         
      margin-right: auto;
      }
    }
  & .article-info {
    font-size: small;
    color: #666;
    padding-right: 5px;
    display: flex;
    justify-content: space-between;
    & .author-name{
      color: #666;
      &:hover {
        color: #00e;
      }
    }
  }
}

/*リンク*/
a{
  text-decoration: none;
  color: #1a0dab;
  &:hover {
    text-decoration: none;
    color: #00e;
  }
}

#top-page {
  line-height: 1.7;
}

table {
  border-collapse: collapse;
}

table th {
  border: solid 1px rgb(170, 170, 170);
  background-color: #aaa;
}

table td {
  border: solid 1px rgb(170, 170, 170);
}

.border-bottom {
  border-bottom: solid 2px black;
}

/* --- Markdown画像調整用CSS --- */

/* --- サイズ調整 --- */
img[src*="#w10"] { width: 10%; }
img[src*="#w20"] { width: 20%; }
img[src*="#w30"] { width: 30%; }
img[src*="#w40"] { width: 40%; }
img[src*="#w50"] { width: 50%; }
img[src*="#w60"] { width: 60%; }
img[src*="#w70"] { width: 70%; }
img[src*="#w80"] { width: 80%; }
img[src*="#w90"] { width: 90%; }
img[src*="#w100"] { width: 100%; }

/* --- 配置調整 --- */

/* 中央寄せ */
img[src*="#center"],
img[src*="-center"] { 
  display: block;
  margin: 0 auto;
}

/* 右寄せ */
img[src*="#right"],
img[src*="-right"] {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

/* 左寄せ */
img[src*="#left"],
img[src*="-left"] {
  display: block;
  margin-right: auto;
  margin-left: 0;
}

img[src*="#half"],
img[src*="-half"] {
  display: inline-block;   /* ★重要: 横並びを許可する */
}

/* (任意) スマホでは強制的に大きくしたい場合 */
@media (max-width: 768px) {
  img[src*="#w"] {
    width: 100% !important;
  }
}

/* --- テキストと画像の横並び用レイアウト --- */

/* 外枠（フレックスコンテナ） */
.layout-row {
  display: flex;
  gap: 20px;          /* 画像とテキストの間隔 */
  align-items: flex-start; /* 上端揃え */
  margin-bottom: 20px;
}

/* 中身（画像とテキスト）は等分、または中身に応じて伸縮 */
.layout-row > * {
  flex: 1;
  min-width: 0; /* flexアイテムのはみ出し防止のおまじない */
}

/* 画像側の調整（ちょっと幅を固定したい場合などはここをいじる） */
.layout-row img {
  max-width: 100%;     /* 親枠に合わせて最大化 */
}

/* スマホ対応：縦並びに戻す */
@media (max-width: 768px) {
  .layout-row {
    flex-direction: column; /* 縦並び */
  }
}

/* --- カラムの比率設定 --- */

/* 基本の箱 (強さ1) */
.layout-row > div.flex-1 { flex: 1; }

/* ちょっと広い箱 (強さ2) -> 相手が1なら 2:1 の比率になる */
.layout-row > div.flex-2 { flex: 2; }

/* かなり広い箱 (強さ3) -> 相手が1なら 3:1 の比率になる */
.layout-row > div.flex-3 { flex: 3; }

/* 圧倒的に広い箱 (強さ4) -> 相手が1なら 4:1 の比率になる */
.layout-row > div.flex-4 { flex: 4; }


/* (オプション) プレビュー画面で見やすくするために、
   エディタのプレビュー時だけ枠線を表示するCSSもあると便利です */
.editor-preview .layout-row > div {
  outline: 1px dashed #ddd; /* 薄い点線 */
  padding: 5px;
}

/* --- レイアウト選択ポップアップ --- */
#layout-popup {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  z-index: 10000;
  width: 220px;
}

/* グリッド配置 */
.layout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列 */
  gap: 8px;
}

/* 各選択肢ボタン */
.layout-option {
  border: 1px solid #eee;
  border-radius: 4px;
  background: #f9f9f9;
  cursor: pointer;
  padding: 5px;
  transition: all 0.2s;
}
.layout-option:hover {
  background: #eef;
  border-color: #ccf;
}

/* ボタンの中のミニチュア図形（Flexで比率を表現） */
.mini-layout {
  display: flex;
  gap: 2px;
  height: 20px;
  margin-bottom: 4px;
}
.mini-block {
  background: #bbb;
  height: 100%;
  border-radius: 2px;
}
/* ミニチュアの比率設定 */
.mini-layout .f1 { flex: 1; }
.mini-layout .f2 { flex: 2; }
.mini-layout .f3 { flex: 3; }

/* ラベル文字 */
.layout-label {
  display: block;
  text-align: center;
  font-size: 10px;
  color: #666;
}