/* common.css
*/

.centring, .centring * {
  text-align: center;
}
/* Centring text contents expect readers to reach semantics,
とくに日本語の定型スタイルは内容を読む前に思考停止を誘導する */
.text, .text * {
  text-align: left;
  margin:0 auto;
}

.centring ul {list-style: none;} /* No Marker */
.text ul {list-style: disc; margin: 0.5em 1em;}

body {
  width: 100%;
  height: 100%;
  font-size: 16px;
}
/** {font-size: 16px;}*/
h1, h2, h3, h4, h5, p, i, table {display: block;}


* p, * ul, * ol {padding-top:0.7em;}

.italic {font-style: italic;}

nav, footer, main, article {
/*  width: calc(460px + calc(calc(100vw - 512px) * 820 / 1536));*/
}
nav {
  border-bottom: solid #666 0.5px;
  margin: 0 auto;
  padding: .5em;
}
footer, article {
  border-top: solid #666 0.5px;
  margin: 1em auto;
  padding: 1em;
}
footer {
/*  margin-top: 2em;*/
  font-weight: 100;
}

.dialogue {
  width: 45em;
  margin: 0.7em auto;
}
.dialogue p {
  text-align: left;
  margin: 0.5em auto;
}

iframe {
  border:none;
  width:100%;
  height:100%;
}

/* Default/Large screen */
.wide {display: inline;}
.narrow {display: none;}

nav, footer, main {
  width: 80%;
  margin: 0 auto;
/*  border: dashed black 0.5px;*/
}
main {
  margin-bottom: 2em;
}
section {
  width: 100%;
  margin: 0 auto;
  padding: 0 0.7em;
/*  border: dashed red 0.5px;*/
}

img {width:100%;}

/* Desktop */
@media screen and (max-width: 1280px) {
  nav, footer, main {
    width: 1024px;
  }
}

/* iPad */
@media screen and (max-width: 1034px) { 
  /* 1034px * 99% = 1024px*/
  nav, footer, main {
    width: 99%;
  }
}
@media screen and (max-width: 580px) { 
  .full {display: none;}
}

/* iPhone portrait */
@media screen and (max-width: 430px) and (orientation: portrait) {
  .wide {display: none;}
  .narrow {display: block;}
}

/*@media screen and (max-width: 820px) {
  main {width:90%;}
  .narrow {display:inline;}
  .wide {display:none;}
}
@media screen and (min-width: 820px) {
  main {width:75%;}
  .narrow {display:none;}
  .wide {display:inline;}
}
*/
h1 {margin-top:1em; letter-spacing:-0.05em;}
h2 {margin-top:0.75em; letter-spacing:-0.02em;}
h3,h4,h5 {margin-top:0.5em;}

img.cover-top {
  width: 36em;
  margin: 1em auto;
}

img.inline-middle {
	width: 1.1em;
	vertical-align: middle;
}

.pict-list li {clear: both;}
.pict-list img {
  width: 2em; 
  float: left;
  margin: 0 0.5em 0.5em 0;
}

/* Tricks
*/

/* more and less ver2
長いコンテンツの続きを "more" をクリックして出し "less" で引っ込める
HTML で checkbox と label の間に続きの要素をはさんでおく
空の label に CSS の ::after を使って "more" または "less" をつける
id で区別すればいくつでも置ける
<input id="id001" type="checkbox">
<div>..following content..</div>
<label for="id001"></label>
Click "more" to continue the long content following and retract with "less".
In HTML, put the following content between checkbox and label.
Add "more" or "less" to an empty label using CSS's ::after.
Distinguishing by id, we can put as many as we like.
*/
input.more-less,
input.more-less + * {display:none;}
input.more-less + * + label::after {content:"+ more";}
input.more-less:checked + * {display:block;}
input.more-less:checked + * + label::after {content:"- less";}

label.more-less {
  color: #09f;
  cursor: pointer;
  display: block;
  text-align: center;
  margin: 0; padding: 0;
}
label.more-less:hover {opacity: .75;}