/* 変数の定義 */
:root {
    --clr-main: #866862;
    --clr-submain: #c5a088;
    --clr-accent: #f3e9dc;
    --clr-log: #999999;
    --clr-sublog: #e6e6e6;
}

/*================= 全体のスタイル =================*/
main { color: var(--clr-main);}

/*================= 開閉  =================*/
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { display: none; }
summary {
    list-style: none;
    outline: none;
    position: relative;
}

/*  memo    */
.memo {
    margin: 0.7rem 3rem 0.3rem;
    padding: 0.2rem 0;
    border-left: medium double var(--clr-accent);
}
.memo p { 
    margin: 0.2rem 0;
    font-size: 95%;
}
.memo-list {
    margin: 0.35rem 0;
    list-style-type: none;
}
.memo-list li { 
    padding: 0.2rem 0 0;
    font-size: 90%;
    border-bottom: 1px dotted var(--clr-accent);
}

/*  log.HTML    */
.log {
    margin: 0 auto;
    color: var(--clr-log); 
}
.log h2{ font-size: 110%; }

.log-list,
.log-year { font-size: 90%; }
.log-list li { 
    margin-top: 0.2rem;
    border-bottom: 1px dotted var(--clr-sublog);
    list-style-type: none;
}
.log summary{
    margin-top: 1rem;
    padding-left: 1.5rem;
    border-bottom: 1px dotted var(--clr-sublog);
}
.log-year::before {
    content: '+';
    position: absolute;
    top: 0.7rem;
    left: 0;
    transform: translateY(-50%);
}
.log[open] > .log-year::before { content: '-'; }

/*================= contents =================*/
/*    guide-header   */
.guide { margin: 1rem 0;}
.guide-header {
    padding-top: 1rem;
    padding-left: 3rem;
    border-bottom: 2px solid var(--clr-accent);
    font-weight: bold;
}
.guide-header::before {
    content: '▶';
    position: absolute;
    top: 1.8rem;
    left: 1rem;
    transform: translateY(-50%);
    color: var(--clr-accent);
}
.guide[open] > .guide-header::before {
    content: '▼';
    color: var(--clr-submain);
}

/*    contents   */
.cont-table { 
    margin: 0.3rem 0;
    width: 100%;
}
.cont-table caption { 
    margin: 0.3rem;
    padding: 0.7rem 0 0.7rem 1rem; 
    text-align: left;
    border-left: 30px solid rgba(243, 233, 220, 0.3);
}
.cont-table th,
.cont-table td {
    padding: 0.8rem 0 0.2rem;
    border-bottom: 1px solid var(--clr-accent);
    text-align: left;
    vertical-align: top;
}
.cont-table td { border-bottom: 1px dotted var(--clr-accent); }
.cont-table td:nth-child(1),
.cont-table th:nth-child(1) { min-width: 8rem;}

/*================= 装飾 =================*/
/*    文字   */
a,
a:visited,
a:hover { color: var(--clr-main);}

/*================= スマホ画面限定 =================*/
@media (max-width: 768px) {
  /* メインコンテンツの横幅の余白を少し狭くする */
  main { 
    margin: 80px 15px;
    font-size: 1rem;
 }

  /* 更新履歴などのリストのインデントを調整 */
  .memo { margin: 0.7rem 0.5rem 0.3rem;  }

  /* ガイドヘッダーの左余白を調整 */
  .guide-header { padding-left: 2rem; }
  .guide-header::before { left: 0.5rem; }

  /* テーブルをブロック要素に変更して縦積みにする */
  .cont-table, 
  .cont-table thead, 
  .cont-table tbody, 
  .cont-table th, 
  .cont-table td, 
  .cont-table tr { 
    display: block; 
    width: 100%; 
  }

  .cont-table thead tr { display: none;  }
  .cont-table td { 
    border-bottom: none;
    padding: 0.2rem 0; /* 上下の隙間を詰める */
  }

  .cont-table td:nth-child(1) {
    font-weight: bold;
    padding-top: 1rem;
    color: var(--clr-submain);
  }
  .cont-table td:nth-child(2) {
    border-bottom: 1px dotted var(--clr-accent);
    padding-bottom: 0.8rem;
    margin-bottom: 0.5rem;
  }
  .cont-table caption {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-left: 10px solid rgba(243, 233, 220, 0.3);
    padding: 0.5rem 0.5rem 0.5rem 1rem;
  }
    /*  log.HTML    */
  .log h2 { font-size: 1rem; }
  .log-list,
  .log-year { font-size: 0.9rem; }
  .log summary { padding-left: 1.2rem; }
}