/* style.css
*/

body, nav,
h1, h2, h3, h4, h5, p, span,
ul, li, img, div {
  margin: 0;
  padding: 0;
  text-align: center;
	vertical-align: top;
}
/* Centring text contents expect readers to reach semantics,
とくに日本語の定型スタイルは内容を読む前に思考停止を誘導する */
ol li {text-align: left;} /* just except ordered list. */
.text {
  text-align: left;
  margin:0 auto;
}
.text * {text-align:left;}

body {
  background-image: linear-gradient(to right, #edb, #fed, #edb);
  background-color: #edb;
  color: #333;
  width: 100%;
  height: 100%;
  font-size: 16px;
}

h1, h2, h3, h4, h5, p, i {display: block;}
* {box-sizing: border-box;} /* width and height include padding */
a {text-decoration: none;} /* No Underline */
ul {list-style: none;} /* No Marker */

.text ul {list-style: disc; margin: 0.5em 1em;}

.fw100, .hair {font-weight:100;}
.fs60, .smaller {font-size:60%;}
.fs80, .small {font-size:80%;}
.fs90 {font-size:90%;}
.fs110, .big {font-size:110%;}
.fs120, .bigger {font-size:120%;}

/* Some item like to hide. 隠したい要素 */
.nodisplay {display:none;}

a {color:#084;}
a:hover {color:#3be;}
.disable {color: #666;}

.italic {font-style: italic;}

.header {
	height: 3em;
  width: 100%;
	opacity: 0.3;
	background-image: url('https://tafuku.world/Images/scroll-head.jpg');
	background-repeat: repeat-x;
	background-size: contain;
}
.header h1 {
  position: absolute;
  top: 36vw;
  width: 100%;
  font-size: 4vw;
  text-shadow: #111 0.2em 0.2em 0.2em;
}

nav {
  margin: 0 auto;
  padding: .5em;
  width: calc(460px + calc(calc(100vw - 512px) * 820 / 1536));
  border-bottom: solid #666 0.5px;
}

/*.header nav {
	display: flex;
	flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  grid-gap: 2em;
  margin: 2em auto;
	position: absolute;
  width: 100%;
	top: 4em;
  left: 50%;
  transform: translateX(-50%);
	font-size: 1.1em;
  text-shadow: black 0.1em 0.1em 0.2em;
}
.header nav ul {

}*/


.introduction,
.description {
	margin-top:1em;
	margin-bottom: 1em;
}
.introduction p {margin-top: 0.5em;}


/* 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;}
.question {font-weight: bold;}
.answer p {margin: 0.3em 0 0 0 ;}
.answer ol {margin: 0.3em auto;}

article .box,
.join,
.about,
.member {
  display: flex;
  justify-content: space-around;
  align-content: center;
  grid-gap: 2%;
  margin: 2em auto;
}

article .box,
.join,
.about {grid-template-columns: auto;}
.about p {margin-bottom: 0.8em;}
.about h4 {margin-top: 0.5em;}
.link {
  padding: 1em;
  border-radius: 1em;
}
#echo {background-color:#120;}
#mynet {background-color:#012;}
#kcs {background-color:#021;}
#popolo {background-color:#210;}
#encom {background-color:#102;}
#tojoin, #joinus, #supporter, #hisys, #tosample,
#tostudy {background-image: linear-gradient(to right, #003, #225 50%, #003);}
/*#hisys h3,*/
#hisys p {margin: 1em;}
#tostudy,
#tojoin {width: 16em;} /* Otherwise, block would be broken on safari */
#tosample {width:22em;}
.icon {
  width: 1.2em;
  margin-right: 0.3em;
  margin-bottom: -0.3em;
}
a:hover .icon {opacity: 0.7;}

h2, h3 {margin:1em;}

.document {color: #9f9;}
article,
aside {
  margin: 3em auto;
  padding-top: 2em;
  text-align: center;
  border-top: solid #666 0.5px;
}
/*article:last-of-type {
  border-bottom: solid #666 0.5px;
  margin-bottom: 1em;
}
*/

#sdgs-poster {
	width: 57em;
	height: 38em;
	position: relative;
	margin: 1em auto;
	background-image: url('../Images/SDG-Poster.png');
	background-size: cover;
	background-position: center;
}
img.overlay {
	width: 9em;
	height: 9em;
	position: absolute;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.2s ease;
}
img.overlay:hover {opacity: 1;}
img#goals0 {top: 5em; left: 32.8em; width: 3.8em; height:    3.8em;}
img#goal01 {top: 13em; left: 6em;}
img#goal02 {top: 13em; left: 15em;}
img#goal03 {top: 13em; left: 24em;}
img#goal04 {top: 13em; left: 33em;}
img#goal05 {top: 13em; left: 42em;}
img#goal06 {top: 13em; left: 51em;}
img#goal07 {top: 22em; left: 6em;}
img#goal08 {top: 22em; left: 15em;}
img#goal09 {top: 22em; left: 24em;}
img#goal10 {top: 22em; left: 33em;}
img#goal11 {top: 22em; left: 42em;}
img#goal12 {top: 22em; left: 51em;}
img#goal13 {top: 31em; left: 6em;}
img#goal14 {top: 31em; left: 15em;}
img#goal15 {top: 31em; left: 24em;}
img#goal16 {top: 31em; left: 33em;}
img#goal17 {top: 31em; left: 42em;}
img#goals {top: 31.05em; left: 51em; width: 5.5em; height: 5.5em;}


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


@media screen and (max-width: 767px) and (orientation: portrait) {
  .member {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
  }
}
@media screen and (min-width: 767px), (orientation: landscape) {
  .member {grid-template-columns: auto auto auto auto;}
}
@media screen and (max-width: 820px) {
  .narrow {display:inline;}
  .wide {display:none;}
}
@media screen and (min-width: 820px) {
  .narrow {display:none;}
  .wide {display:inline;}
}
article {
  width: calc(460px + calc(calc(100vw - 512px) * 820 / 1536));
  font-size: calc(12px + calc(calc(100vw - 512px) * 8 / 1536));
}
.introduction{font-size: calc(12px + calc(calc(100vw - 512px) * 8 / 1536));}
@media screen and (min-width: 2048px) {
  article {
    width: 1280px;
    font-size: 20px;
  }
  .introduction{font-size: 20px;}
}
article ul, article li, article img {width:100%;}
article#study img {
  width:50%;
  opacity: 0.7;
}
article .box,
article p {
  width:100%;
  margin:1em auto;
}

.bx-wrapper {
  border: none;
  background: none;
  box-shadow: none;
  margin: 0 auto;
  padding: 0;
}

footer {
  font-weight: 100;
  margin: 1em auto;
  width: calc(460px + calc(calc(100vw - 512px) * 820 / 1536));
  padding-top: 1em;
  border-top: solid #666 0.5px;
}