@charset "utf-8";
/* CSS Document */
#breadcrumb {display:none;}

#contents img {display:block;width:100%;}

#main {position:relative;background:#e3e7f0;}
#main .image,
#main .text {width:auto;height:100%;}
#main .image,
#main .text {position:absolute;top:0;left:50%;
transform:translate(-50%,0);
-moz-transform:translate(-50%,0);
-ms-transform:translate(-50%,0);
-webkit-transform:translate(-50%,0);
-o-transform:translate(-50%,0);
}
#main .text {opacity:0;transition:0.5s ease 1s;}
#main.on .text {opacity:1;}
#main.on {opacity:1;}

#scroll_icon {position:absolute;left:50%;margin-left:-15px;bottom:18%;}
#scroll_icon p {text-align:center;color:#fff;font-size:0.7em;font-weight:bold;letter-spacing:1px;position:absolute;bottom:62px;left:50%;margin-left:-2.2em;}
#scroll_icon > div {width:26px;height:36px;border:solid 2px #fff;border-radius:50px;position:relative;top: -85px;}
#scroll_icon > div > div {width:2px;height:10px;background:#fff;position:absolute;left:50%;margin-left:-1px;top:15px;border-radius:4px;
animetion:mouseAnime 0.5s ease-in -2s infinite alternate;
-moz-animation:mouseAnime 0.5s ease-in -2s infinite alternate;
-webkit-animation:mouseAnime 0.5s ease-in -2s infinite alternate;
-o-animation:mouseAnime 0.5s ease-in -2s infinite alternate;
-ms-animation:mouseAnime 0.5s ease-in -2s infinite alternate;
}

#scroll_icon::before{
  content: "";
  display:block;
  width: 80px;
  height: 80px;
  background: #333;
  border-radius: 50%;
  position: absolute;
  bottom: 235%;
  right: 50%;
  transform: translate(50%,50%);
}

@keyframes mouseAnime {
	0% {top:5px;}
	100% {top:10px;}
}

#anchor {border-bottom:solid 1px #fff;}
#anchor ul {display:table;width:100%;table-layout:fixed;}
#anchor ul li {display:table-cell;width:25%;border-left:solid 1px #fff;}
#anchor ul li:first-child {border:none;}
#anchor ul li img {width:100%;position:relative;top:-30px;opacity:0;}
#anchor.on {display:1;}
#anchor ul li:nth-child(1) img {transition: 0.3s cubic-bezier(0,0,0.8,1);}
#anchor ul li:nth-child(2) img {transition: 0.3s cubic-bezier(0,0,0.8,1) 0.2s;}
#anchor ul li:nth-child(3) img {transition: 0.3s cubic-bezier(0,0,0.8,1) 0.4s;}
#anchor ul li:nth-child(4) img {transition: 0.3s cubic-bezier(0,0,0.8,1) 0.6s;}
#anchor.on ul li:nth-child(1) img {opacity:1;top:0;}
#anchor.on ul li:nth-child(2) img {opacity:1;top:0;}
#anchor.on ul li:nth-child(3) img {opacity:1;top:0;}
#anchor.on ul li:nth-child(4) img {opacity:1;top:0;}
#anchor>p {padding:50px 10%;font-size:2em;line-height:1.5em;color:#27bd38;text-align:center;}
#anchor>p span {font-size:1.7em;line-height:1.5em;}


#lede p {padding:50px 10%;font-size:2em;line-height:1.5em;color:#27bd38;text-align:center;}
#lede span {font-size:1.7em;line-height:1.5em;}

.point {position:relative;overflow:hidden;border-bottom:solid 1px #fff;}
.point h2 {width:14.3%;position:absolute;left:/*14%*/100px;top:100px;z-index:5;}
.point p {font-size:1.3em;line-height:1.7em;color:#333;padding:40px;box-shadow:2px 2px 4px rgba(0,0,0,0.2);background:rgba(255,255,255,0.5);position:absolute;z-index:4;opacity:0;
transition:opacity 0.8s ease 0.8s,
top 0.5s ease 0.8s,
bottom 0.5s ease 0.8s;
}
.point.on p {opacity:1;}

.point p:before,
.point p:after {content:"";display:block;width:20%;height:61%;position:absolute;}
.point p:before {background:url(https://www.glsciences.com/about_images/dc_t.png) no-repeat center center;left:-30px;top:-80px;opacity: 0.5;background-size: 100%;}
#food p:before {top: -47px;}
#medicine p:before {top: -32px;}
#air .p01:before {top: -55px;}
.point p:after {background:url(https://www.glsciences.com/about_images/dc_u.png) no-repeat center center;right:-30px;bottom:-50px;opacity: 0.5;background-size: 100%;}
.point .item {display:block;position:absolute;z-index:3;}
.point .item img {width:100%;}

.position {opacity:0;transition:0.8s cubic-bezier(0,0,0.5,0.3);}
.position.on {opacity:1;}

#water p {width:48.57%;right:3%;top:/*120px*/11.14%;}
#water.on p {top: 14%;}
#water .item {width:36.35%;right:-9.28%;top:-7.14%;}

#food p {width:40.41%;top:/*20px*/34.857%;left:30%;
transform:translate(-50%,0);
-moz-transform:translate(-50%,0);
-ms-transform:translate(-50%,0);
-webkit-transform:translate(-50%,0);
-o-transform:translate(-50%,0);
}
#food.on p {top:/*40px*/36.714%;}
#food .item {width:37.8%;left:/*-15.7%*/-18.7%;top:-17.14%;}

#medicine p {width:41.24%;top:/*60px*/34%;left:29%;
transform:translate(-47%,0);
-moz-transform:translate(-47%,0);
-ms-transform:translate(-47%,0);
-o-transform:translate(-47%,0);
-webkit-transform:translate(-47%,0);
}
#medicine.on p {top:/*40px*/31%;}
#medicine .item {width:43.9%;left:7.14%;top:67.14%;}

#air p.p01 {width:36%;right:/*300px*/5.4%;top:/*120px*/1.14%;}
#air.on p.p01 {top:/*140px*/4%;}
#air p.p02 {width:38.14%;right:/*300px*/49.8%;bottom:/*120px*/4%;}
#air.on p.p02 {bottom:/*140px*/7%;}
#air .item {width:35.7%;right:-7.14%;top:-14.28%;}

#endding {width:100%;overflow:hidden;}
#endding > div {position:relative;}
#endding .text {text-align:center;width:90%;padding:0 5%;position:absolute;z-index:3;}
#endding .base {width:100%;}
#endding p {font-size:1.45em;line-height:2em;}
#endding p strong {font-size: 1.5em;}
#endding > div .text p:first-child {margin-bottom:2.5em;}
#endding .sp {display:none;}

#endding > div {position:relative;}
#endding .text01 {padding-top:300px;}
#endding .text01 b {font-size:1.6em;line-height:2em;}
#endding .text01 .text {top:100px;}
#endding .text01 .itemtop {width:100%;position:absolute;left:0;bottom:0;}

#endding .text02 .text {width:550px;bottom:/*250px*/55.9%;left:5%;}
#endding .text02 .itemtop {width:52.42%;position:absolute;right:0;top:0;z-index:2;}
#endding .text02 .itemtop > svg {display:block;width:100%;height:43.47%;position:absolute;top:-4%;z-index:2;}
#endding .text02 .itemtop > img {display:block;width:100%;}
#endding .text02 .itemtop #pointRing {
	fill:#168422;
	opacity:0;
	/*transition:0.5s ease 2s;*/
}
#endding .text02.on .itemtop #pointRing {
	opacity:1;
}
#endding .text02 .itemtop #passLine{
	fill:none;
	stroke:#168422;
	stroke-width:1;
	stroke-dasharray:5000;
	stroke-dashoffset:5000;
	/*transition:6s cubic-bezier(0.5,0.1,1,1) 0.8s;*/
}
#endding .text02.on .itemtop #passLine{
	stroke-dashoffset:0;
}
#endding .text02 .base {opacity:0.55;}

#end {padding:200px 10% 185px;}
#end p {font-size:1.8em;line-height:1.5em;margin-bottom:25px;text-align:center;}
#end img {width:400px;margin:0 auto;}

@media screen and (max-width:1040px){
.point p {font-size:1em;line-height:2em;padding:25px !important;}
#endding p {font-size:1.15em;line-height:3em;}

.point h2 {top:50px;left:50px;}

}
@media screen and (min-width:701px){
#lede {display:none;}
}
@media screen and (max-width:700px){
#main image {overflow:hidden;}
#contents #main {height:auto !important;}
#contents #main img {width:140%;margin-left:-20%;height:auto !important;left:0;
transform:translate(0,0);
-moz-transform:translate(0,0);
-ms-transform:translate(0,0);
-webkit-transform:translate(0,0);
-o-transform:translate(0,0);
}
#contents #main .image {position:static;}

#scroll_icon {
transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-webkit-transform:scale(0.5,0.5);
-o-transform:scale(0.5,0.5);
bottom: 13%;
}

#anchor {display:none !important;}
/*
#anchor ul li,
#anchor ul li:first-child {display:block;width:calc(50% - 2px);border:solid 1px #fff;}
#anchor ul li:nth-child(odd) {float:left;}
#anchor ul li:nth-child(even) {float:right;}*/

#lede {opacity:1 !important;}
#lede p {font-size:/*1.2*/1.2em;padding:100px 10%;}
#lede span {font-size:1.4em;}

.point {font-size:0.8em;line-height:1.5em;padding-bottom:60px;}
.point h2 {width:auto;position:static;border-top:solid 1px #ccc;}
.point h2:before {content:"";display:block;width:calc(50% - 99px);height:100px;background:#fff;position:absolute;left:0;top:1px;}
#contents .point h2 img {width:200px;margin:0 auto;}
.point image {overflow:hidden;}
#contents .point .image img {width:130%;}
.point p {font-size:1.3em;line-height:2em;position:static;width:auto !important;box-shadow:none;padding:50px !important;
transform: translate(0, 0px) !important;
-moz-transform: translate(0, 0px) !important;
-ms-transform: translate(0, 0px) !important;
-webkit-transform: translate(0, 0px) !important;
-o-transform: translate(0, 0px) !important;
}
.point p:before,
.point p:after {width:55px;height:45px;background-size:100% auto;opacity:0.5;}
.point p:before {left:5px;top:5px; background: none;}
.point p:after {right:5px;bottom:5px; background: none;}
.point .item {display:none;}

#water h2 {background:#74b5f1;}
#water .image img {margin-right:-20%;}

#food h2 {background:#f3c045;}
#food .image img {margin-left:-15%;}

#medicine h2 {background:#58c38f;}
#medicine .image img {margin-left:-20%;}

#air h2 {background:#f67a85;}
#air .image img {margin-left:0;}

#endding .text {width:90% !important;left:0;top:0;position:static;text-align:left;}
#endding p {font-size:1.04em;line-height:2em;padding:0;}
#endding > div .text p:first-child {margin-bottom:0;}
#endding .base {display:none;}
#endding .sp_hide {display:none;}

#endding .text01 {padding-top:0;}
#endding .text01 .itemtop,
#endding .text02 .itemtop {position:static;}

#endding .text01 p:first-child {padding:50px 0;}
#endding .text01 b {font-size:1.3em;line-height:2em;}

#endding .text02 p:first-child {padding:0 0 50px;}
#endding .text02 .itemtop {width:100%;position:relative;top:0 !important;}
#endding .text02 .itemtop svg {position:absolute;}
#endding .text02 .itemtop #pointRing {opacity:1;}
#endding .text02 .itemtop #passLine{stroke-dashoffset:0;}

#end p { font-size:1.04em;}
#end img {width:200px;}



}