@charset "utf-8";
html {
	--body-min-width: 340px;
  --main-section-max-width:500px;
  --header-bd-width: 6px;
  --header-bd-radius:1rem;

	/*	background:linear-gradient(rgba(255,255,255,1), rgba(155,155,155,1)); */
	--body-bg-color:   			#eee;
	--main-bg-color:        #eee;
  --header-color:         #000;
  --header-bg-color:      #ddd;
  --header-bd-color:      #555;
	--main-section-color:   #000;
	--main-section-bg-color:#fed;
	--main-section-bd-color:#fff;
	--a-color:              #00f;
  --a-hover-bg-color:     #eee;
	--section-Flow-bg-color:#eee;
}

*, *::before, *::after{
  box-sizing: border-box;
  text-decoration: none;
  margin: 0 0 1em 0;
  padding: 0;
  font-family: Verdana, Geneva, sans-serif;
}
/* --min-width-pc */
@media (min-width: 1101px){
  header h1{
    letter-spacing: 4px;
  }
	header img{
    max-width: 136px;
  }
	main {
	  --img-scale:1;
      --line-height:1.2;
	}
}

/*  i P h o n e  width about 385px*/
/* --max-width-tablet */
@media (max-width: 1100px){

	header *, footer *{
		margin-bottom: .4em;
  }

  header img{
    width: 110px;
  }

	main {
	  --img-scale:.5;
      --line-height:1;
	}
}

@media screen{
  html{
    --body-max-width:1200px;
  }
}

@media print {
	html {
		--img-scale:.5;
		--font-size-scale:1;
		--line-height-scale:1;
	}
	body {
		--body-max-width: 10in;
		--body-bg-color:#fff;
		--body-color:   #000;
	}
}

a, a:visited {
	color:var(--a-color);
	background-color: transparent;

}
a:hover {
	background-color:var(--a-hover-bg-color);
	text-decoration:underline;
}

body {
 	max-width:var(--body-max-width);
	margin: 0 auto 1rem auto;
}
header{
  color:            var(--header-color);
  background-color: var(--header-bg-color);
	border:  solid var(--header-bd-width) var(--header-bd-color);
	border-radius: var(--header-bd-radius);
	padding:1rem;
}
header > div{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
  text-align: center;
}
header div {
	margin-bottom: 0;
}
header > div > div{
	min-width: 330px;
}
header img{
  border-radius: 15px;
	margin: 0 1em 0 0;
}
header a{
	background-color: var(--header-a-bg-color);
}

main   {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	background-color:var(--main-bg-color);
	border-radius: var(--header-bd-radius);
}
main section {
	flex: 0 1  var(--main-section-max-width);
	min-width: var(--body-min-width);
	margin:1rem;
	padding:1rem;
  color:            var(--main-section-color);
  background-color: var(--main-section-bg-color);
	border:  solid var(--header-bd-width) var(--header-bd-color);
	border-radius: var(--header-bd-radius);
}

footer{
	text-align: center;
	font-size: .9rem;
	border:  solid var(--header-bd-width) var(--header-bd-color);
	border-radius: var(--header-bd-radius);
	padding:1rem;
  color:            var(--header-color);
  background-color: var(--header-bg-color);
}

dd {margin-left: 1em;}
dt {margin: 0; font-weight: bold;}

#section-Overview {
	text-align: center;
}