/* CSS Document */

#heroImg {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
margin-left:auto;
margin-right:auto;
}

.page-content h2, #concept section h4, #news h4 {
text-align: center;
}
.page-content h2, #news h4 {
font-weight: bold;
}
.page-content p, #news p {
margin: 0 auto;
}

#concept section h3 {
border: 1px solid #555;
display: table;
font-weight: bold;
margin-left:auto;
margin-right:auto;
position: relative;
}
#concept section h3 span:before , #concept section h3 span:after {
position: absolute;
left: 50%;
top: 100%;
border: solid transparent;
content: '';
height: 0;
width: 0;
border-width: 10px;
margin: 0 0 0 -10px;
}
#concept section h3 span:before {
border-top-color: #000000;
margin-left: -10px;
}
#concept section h3 span:after {
border-top-color: #FFFFFF;
margin: -1px 0 0 -10px;
}
#concept section ul li {
background: #8A918A;
color: #fff;
text-align: center;
border-radius: 50%; 
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
#concept section h4 {
color: #EE8180;
font-weight: bold;
}

#sterilized > div > img {
width: 96%;
max-width: 960px;
display: block;
margin: 0 auto;
}
#sterilized section h3:before {
content: "【"
}
#sterilized section h3:after {
content: "】"
}
#sterilized section img {
width: 90%;
display: block;
margin-left: auto;
margin-right: auto;
}

#plant ul {
display: table;
margin-left: auto;
margin-right: auto;
border-bottom:1px solid #555;
}
#plant ul li {
border-top:1px solid #555;
}
#plant ul li span {
display: block;
float: left;
}

.sky {
background: url(../image/sky_bg.jpg) no-repeat center bottom;
background-size: contain;
}

#organization, #about, #history, #news {
width: 96%;
max-width: 768px;
margin-left: auto;
margin-right: auto;
}
#organization h2, #about h2, #history h2{
color: #fff;
background: #595757;
}
#about table {
border-bottom: 1px solid #292929;
width: 100%;
}
#about table tr {
border-top: 1px solid #292929;
}
#about table th, #about table td {
vertical-align: middle;
}
#about p a {
color: #FF0004;
}
.switch {
visibility: hidden;
}

#news h4 time {
display: block;
}
#news p {
text-align: center;
}


@media screen and (max-width:480px){
#heroImg {
margin-top: 20px;
margin-bottom:40px;
padding: 0 20px;
}
.page-content h2 {
font-size: 1.2em;
margin-bottom: 20px;
}
.page-content p {
font-size: 0.9em;
}
.page-content p {
padding-bottom:15px;
}
#concept section {
padding-top: 30px;
}
#concept section h3 {
padding: 3px 5px;
font-size: 0.75em;
}
#concept section ul {
margin-top: 30px;
}
#concept section ul li {
width: 50vw;
height: 50vw;
margin: 0 auto 20px auto;
font-size: 0.8em;
}
	
#plant {
background: url(../image/plant_bottom.jpg) no-repeat center bottom;
background-size: 480px auto;
padding-bottom: 535px;
}
#plant ul {
margin-top: 10px;
margin-bottom: 30px;
}
#plant ul li {
padding: 5px 0;
}
#plant ul li span {
width: 70px;
}
#plant ul li, .page-content dt, .page-content dd, #about table, #history table {
font-size: 0.8em;
}

#sky {
padding-bottom: 200px;
}
#sky div {
background: url(../image/sky_bottom.png) no-repeat center bottom;
background-size: 480px auto;
padding-bottom: 340px;
}

#organization, #about {
margin-bottom: 50px;
}
#organization h2, #about h2, #history h2{
padding: 8px 0;
}
#about p {
margin: 10px 0 40px;
}
#about table caption img {
height: 30px;
width: auto;
padding-bottom: 10px;
}
#about table td, #history table td {
padding: 5px 0;
}
#history table td:nth-of-type(1) {
width: 60px;
}
#history table td[rowspan] {
width: 55px;
}
}
@media screen and (min-width:481px){
#concept section ul {
margin: 0 auto;
}
#concept section ul li {
float: left;
}
#concept section ul li:nth-last-of-type(1) {
margin-right: 0;
}
	
.page-content h2 br {
display: none;
}
}
@media (min-width:481px) and (max-width:768px){
#heroImg {
margin-top: 30px;
margin-bottom: 50px;
width: 85%;
}
.page-content h2 {
font-size: 1.5em;
margin-bottom: 30px;
}
.page-content p, .page-content dt, .page-content dd, #about table, #history table {
font-size: 0.7em;	
}
.page-content p {
padding-bottom: 20px;
}
#concept section {
padding-top: 40px;
}
#concept section h3 {
padding: 4px 8px;
font-size: 0.9em;
}
#concept section ul {
padding: 35px 0 35px 2vw;
}
#concept section ul li {
width: 18vw;
height: 18vw;
font-size: 0.7em;
margin-right: 1.5vw;
}
	
#plant {
background: url(../image/plant_bottom.jpg) no-repeat center bottom;
background-size: 768px auto;
padding-bottom: 874px;
}
#plant ul {
margin-top: 20px;
margin-bottom: 40px;
}
#plant ul li {
padding: 8px 0;
}
#plant ul li span {
width:  120px;
}

#sky {
padding-bottom: 300px;
}
#sky div {
background: url(../image/sky_bottom.png) no-repeat center bottom;
background-size: 768px auto;
padding-bottom: 546px;
}

#organization, #about {
margin-bottom: 60px;
}
#organization h2, #about h2, #history h2{
padding: 10px 0;
}
#about p {
margin: 15px 0 50px;
}
#about table caption img {
height: 35px;
width: auto;
padding-bottom: 15px;
}
#about table td, #history table td {
padding: 8px 0;
}
#history table td:nth-of-type(1) {
width: 100px;
}
#history table td[rowspan] {
width: 70px;
}
}
@media screen and (max-width:768px){
.page-content p {
width: 96%;
}
#concept section h4 {
padding-bottom: 15px;
}
#sterilized > div > img {
margin-bottom: 40px;
}
#sterilized section {
width: 96%;
margin: 0 auto 25px auto;
padding-bottom: 30px;
}
#sterilized section h3 {
font-size: 1em;
text-align: center;
}
#sterilized section img {
margin-bottom: 15px;
}
}
@media screen and (min-width:769px){
#heroImg {
margin-top: 40px;
margin-bottom: 60px;
}
.page-content h2 {
font-size: 1.3em;
margin-bottom: 24px;
}
.page-content p, .page-content dt, .page-content dd, #about table, #history table{
font-size: 0.8em;	
}
.page-content p {
padding-bottom: 16px;
width: 768px;
}
#concept section {
padding-top: 50px;
width: 768px;
margin: 0 auto;
}
#concept section h3 {
padding: 5px 10px;
font-size: 0.95em;
}
#concept section ul {
width: 768px;
padding: 40px 0 30px;
}
#concept section ul li {
width: 148px;
height: 148px;
font-size: 0.7em;
margin-right: 7px;
}
#concept section h4, #news h4 {
padding-bottom: 20px;
}

#sterilized > div > img {
margin-bottom: 60px;
}
#sterilized section {
width: 768px;
margin: 0 auto 30px auto;
padding-bottom: 40px;
}
#sterilized section h3 {
font-size: 1.05em;
}
#sterilized section img {
margin-bottom: 20px;
}

#plant {
background: url(../image/plant_bottom.jpg) no-repeat center bottom;
background-size: 1024px auto;
padding-bottom: 1150px;
}
#plant ul {
margin-top: 30px;
margin-bottom: 50px;
}
#plant ul li {
padding: 10px 0;
}
#plant ul li span {
width:  130px;
}

#sky {
padding-bottom: 400px;
}
#sky div {
background: url(../image/sky_bottom.png) no-repeat center bottom;
background-size: 960px auto;
padding-bottom: 670px;
}

#organization, #about {
margin-bottom: 80px;
}
#organization h2, #about h2, #history h2{
padding: 15px 0;
}
#about p {
margin: 20px 0 60px;
}
#about table caption img {
height: 60px;
width: auto;
padding-bottom: 20px;
}
#about table td, #history table td {
padding: 10px 0;
}
#history table td:nth-of-type(1) {
width: 120px;
}
#history table td[rowspan] {
width: 80px;
}
}
@media (min-width:769px) and (max-width:1024px){
#heroImg {
width: 80%;
}
}
@media screen and (max-width: 1024px){
#main p {
width: 90%;
}
}
@media screen and (min-width:1025px){
#heroImg {
width: 70%;
}
.page-content h2 {
font-size: 1.5em;
margin-bottom: 40px;
}
.page-content p, #plant ul li, .page-content dt, .page-content dd {
font-size: 0.9em;
}
}