/* * { line-height: calc(1em + .5rem);} */
body { font-size: 16px; background: #dfdfdf; line-height: calc(1em + .5rem); font-family: 'Noto Sans JP', sans-serif;}
a { transition: all ease .3s;}
a:hover { opacity: .8;}

/* フレーム */
.inner { margin: 0 auto; width: calc(100% - 30px); max-width: 1200px;}

#contents { display: flex; flex-wrap: wrap; margin: 3em auto;}
#main { flex: 1; padding: 2em 1em; background: #fff; box-shadow: 0 0 5px #999;}
#side { align-self: baseline; padding: 2em 1em; width: 100%; background: #fff; box-shadow: 0 0 5px #999;}

/* 便利クラス */
.center { text-align: center;}

.mt-3 { margin-top: 3em;}

/* タイトル */
.site-post-ttl { margin-bottom: 1em; padding-bottom: .5em; font-size: 1.5em; line-height: 1.4; border-bottom: 2px solid #00A2A4;}
.site-archive-ttl { margin: 0 0 1em; padding: .5em 0 .5em 1em; color: #fff; font-size: 1.25em; background: #00A2A4;}

/* ボタン */
.site-btn { display: inline-block; padding: .75em 2em; min-width: 300px; color: #fff; text-decoration: none; text-align: center; background: #00A2A4; position: relative;}
.site-btn::before { display: block; position: absolute; right: 3px; bottom: 3px; width: 0; height: 0; border-style: solid; border-width: 0 0 .625em .625em; border-color: transparent transparent #fff transparent; content: "";}

/* ヘッダー */
#header { padding: .85em 0 0; background: #fff; border-bottom: 2px solid #00A2A4;}
#header .site-logo { width: clamp(200px, 27%, 300px);}

/* フッター */
.site-copyright { text-align: center;}

/* サイドバー */
#side .side-ttl { margin-bottom: 1em; padding: .5em .8em; background: #00A2A4; color: #fff; font-size: 1.2em;}
#side .side-list { margin-bottom: 2em;}
#side .side-list > li { padding: .4em 0; border-bottom: 1px solid #dfdfdf;}
#side .side-list > li:not(:first-of-type){ margin-top: .5em ;}
#side .side-list > li > a { display: block; padding-left: 1em; line-height: 1.4; position: relative;}
#side .side-list > li > a::before { display: block; position: absolute; left: 0; top: .5em; transform: rotate(45deg); width: .5em; height: .5em; background: #00A2A4; content: "";}

/* 一覧ページ */
.post-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1em;}
.post-list > li { box-shadow: 0 0 3px #ddd;}
.post-list > li > a { display: block; height: 100%; border: 1px solid #dfdfdf; position: relative;}
.post-list > li > a::before { display: block; position: absolute; right: 3px; bottom: 3px; width: 0; height: 0; border-style: solid; border-width: 0 0 .625em .625em; border-color: transparent transparent #00A2A4 transparent; content: "";}
.post-list-thumbnail { margin: 0; position: relative;}
.post-list-thumbnail::before { display: block; padding-top: 75%; content: "";}
.post-list-thumbnail > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.post-list-ttl { padding: .8em 1em; font-size: 1em; line-height: 1.4;}

/* 詳細ページ */
.toc { display: inline-block; padding: 2em 1em; margin: 1em 0; min-width: 300px; background: #f7f7f7; border: 1px solid #dfdfdf; counter-reset: parts-no;}
.toc > li:not(:first-of-type) { margin-top: .3em;}
.toc > li > a { line-height: 1.3;}
.toc > li > a::before { margin-right: .5em; counter-increment: parts-no 1; content: counter(parts-no)".";}
.toc > li > a:hover { color: red;}

.parts-list-item:not(:first-of-type) { margin-top: 3em;}
.parts-name { margin: 3em 0 1em; padding: .5em 0 .5em 1em; font-size: 1.25em; background: #f7f7f7; border-left: 3px solid #00A2A4;}
.parts-frame { margin: 0 0 2em; padding: 2em 1em; background: #fff; border: 1px solid #ccc; }
.src-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; }
.src-wrap > label { display: block; width: 100%; }
.src-wrap > label > textarea { padding: 1em; width: 100%; background: #fff; border: 1px solid #dfdfdf;}

/* PC以上 */
@media screen and (min-width: 960px){
  /* フレーム */
  #side { margin-left: 2%; width: clamp(250px, 27%, 300px); }

  /* 詳細ページ */
  .src-wrap > label { width: 48%; }
  .src-wrap > label:nth-of-type(n+3){ margin-top: 4%;}
}

/* タブレット以上 */
@media screen and (min-width: 600px){
  
}

/* タブレット以下 */
@media screen and (max-width: 959px){
  /* フレーム */
  #side { margin-top: 3em;}
}

/* スマホ以下 */
@media screen and (max-width: 600px){
  /* フレーム */
  #contents { margin: 1em 0; width: 100%;}

  /* 一覧ページ */
  .post-list { grid-template-columns: 1fr;}
  .post-list > li > a { display: flex; align-items: center;}
  .post-list-thumbnail { width: 33%;}
  .post-list-ttl { flex: 1;}
  
}