@charset "utf-8";


/* --------------------------------------------


						工場見学中止のお知らせ


---------------------------------------------- */ 

.news_factrytour {
	width: 90%;
	max-width: 1200px;
	margin: 5em auto 1em;
	padding: 3em 0;
	border-radius:6px;
	border: 5px solid #0B4FAA;
}
.news_factrytour > img {
	display: block;
	max-width: 202px;
	width: 45%;
	margin: 0 auto 1em;	
}
.news_factrytour p {
	font-size: 18px; font-size: 1.8rem;
	text-align: center;
	margin: 0 auto;
}
@media screen and (max-width: 768px) {
	
.news_factrytour {
	padding: 1em ;
	border: 2px solid #0B4FAA;
	}
.news_factrytour p {
	font-size: 14px; font-size: 1.4rem;
}
.news_factrytour br {
	display: none;
}
}


/* --------------------------------------------


						factry


---------------------------------------------- */ 
#factry {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d2d2d2+0,f0f0f0+15,ffffff+30,e6e6e6+50,ffffff+70,f0f0f0+85,d2d2d2+100 */
  background: #d2d2d2; /* Old browsers */
  background: -moz-linear-gradient(left, #d2d2d2 0%, #f0f0f0 15%, #ffffff 30%, #e6e6e6 50%, #ffffff 70%, #f0f0f0 85%, #d2d2d2 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #d2d2d2 0%,#f0f0f0 15%,#ffffff 30%,#e6e6e6 50%,#ffffff 70%,#f0f0f0 85%,#d2d2d2 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #d2d2d2 0%,#f0f0f0 15%,#ffffff 30%,#e6e6e6 50%,#ffffff 70%,#f0f0f0 85%,#d2d2d2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d2d2', endColorstr='#d2d2d2',GradientType=1 ); /* IE6-9 */
}

#factry #contents {
  background: none;
}

/* --------------------------------------------
						タイトル
---------------------------------------------- */ 
.factryTitle {
  width: 90%;
  max-width: 831px;
  margin: 0 auto 3.5em;
  padding-top: 4.5em;
} 
.factryTitle h1 {
	position: relative;
	width: 100%; max-width: 307px;
	margin: auto;
	background: url(../img/factryTitle_ribbonBg.png) no-repeat center;
	animation-duration: 0.8s;
	animation-name: factryTitleBg;
}
.factryTitle img {
	display: block; margin: auto;
	width: 100%;
}
.factryTitle h1:before ,
.factryTitle h1:after {
	content: "";
	display: block;
	width: 100%; height: 100%;
	position: absolute; top: 0;
	animation-duration: 0.8s;
}
.factryTitle h1:before {
	background: url(../img/factryTitle_ribbonR.png) right no-repeat;
	animation-name: factryTitleBefore;
}
.factryTitle h1:after {
	background: url(../img/factryTitle_ribbonL.png) left no-repeat;
	animation-name: factryTitleAfter;
}

@keyframes factryTitleBg {
	0% {background-size: 0% 100%;}
	100% {background-size: 100% 100%;}
}
@keyframes factryTitleBefore {
	0% {left: -34.5%;}
	100% {left: 0%;}
}
@keyframes factryTitleAfter {
	0% {right: -34.5%;}
	100% {right: 0%;}
}

.factryTitle_sub {
	animation-delay: 1s;
}
.factryTitle_title {
	animation-delay: 1s;
}

@media screen and (max-width:540px){
.factryTitle {
  width: 90%;
  max-width: 831px;
} 
}



/* --------------------------------------------
						説明文
---------------------------------------------- */ 
.factryDescription {
  width: 90%;
  max-width: 573px;
  margin: 0 auto 5em;
	animation-name: factryDescription;
	animation-duration:2s;
}

@keyframes factryDescription {
	0% {opacity: 0;}
	80% {opacity: 0;}
	100% {opacity: 1;}
}

.factryDescription > img {
  display: block;
  width: 100%;
  max-width: 302px;
  margin: -2.5em 0 0 auto;
}

.factryDescription p {
  width: 100%;
  max-width: 326px;
}

.factryDescription p img {
  display: block;
  width: 100%;
}
@media screen and (max-width:780px){
.factryDescription > img {
  max-width: 280px;
  margin: 0 auto;
}
.factryDescription p {
  margin: 0 auto 1em;
}
}




/* --------------------------------------------
					ナビゲーション
---------------------------------------------- */ 
.factryNav {
  width: 90%;
  max-width: 987px;
  margin: 0 auto 5em;
  text-align: center;
}

.factryNav li {
  display: inline-block;
  width: 30%;
  margin: 0 1.35%;
  transition: .3s;
}
.factryNav li img {
	display:block;
	position:relative;
  width: 100%;
}
.factryNav li:nth-child(1) img {
	animation-duration: 3s;
	animation-name: factryNav1;
}
.factryNav li:nth-child(2) img {
	animation-duration: 3s;
	animation-name: factryNav2;
}
.factryNav li:nth-child(3) img {
	animation-duration: 3s;
	animation-name: factryNav3;
}
@keyframes factryNav1 {
	0% { top:-1em; opacity:0;}
	80% { top:-1em; opacity:0;}
	100% { top:0; opacity:1;}
}
@keyframes factryNav2 {
	0% { top:-1em; opacity:0;}
	85% { top:-1em; opacity:0;}
	100% { top:0; opacity:1;}
}
@keyframes factryNav3 {
	0% { top:-1em; opacity:0;}
	90% { top:-1em; opacity:0;}
	100% { top:0; opacity:1;}
}

/* ナビゲーション ホバー用指定 */
.factryNav li img:hover { 
	background: url(../img/factryNav_hover.png) ;
	background-size: contain;
}

@media screen and (max-width:980px){
.factryNav {
  max-width: 620px;
  margin-bottom: 2em;
}
.factryNav li {
  width: 44.2%;
}
}
@media screen and (max-width:540px){
.factryNav {
  width: 80%;
  max-width: 320px;
  margin-bottom: 2em;
}
.factryNav li {
  display: block;
  width: 100%;
  margin-bottom: 1em;
}
}


/* --------------------------------------------
					「アルミ缶」ものがたり。
---------------------------------------------- */ 
.story {
  overflow-y: hidden;
}
.story .story__inner {
  overflow: hidden;
  max-width: 830px;
	width: 80%;
}
.story .story__heading {
  padding: 2em 0;
  border-radius: 25px 25px 0 0;
  background: url(../img/storyBack.png) top left;
}

.story .story__heading img {
  display: block;
  width: 95%;
  max-width: 504px;
  margin: 0 auto;
}

.story ul {
  margin-bottom: 5em;
  background: url(../img/story_borderY.png) top center repeat-y, url(../img/story_borderX.png) center left repeat-x;
  background-color: #fff;
}

.story ul li {
  float: left;
  position: relative;
  width: 50%;
  padding: 3em 0 2em;
}

.story ul li img {
  display: block;
  width: 90%;
  max-width: 359px;
  margin: 0 auto;
}

.story ul li::before {
  display: block;
  content: "";
  position: absolute; top: -.25em; left: -.25em;
  width: 39px;
  height: 38px;
}

.story ul li:nth-of-type(1)::before {
  background: url(../img/story_head01.png) top center no-repeat;
  background-size: contain;
}

.story ul li:nth-of-type(2)::before {
  background: url(../img/story_head02.png) top center no-repeat;
  background-size: contain;
}

.story ul li:nth-of-type(3)::before {
  background: url(../img/story_head03.png) top center no-repeat;
  background-size: contain;
}

.story ul li:nth-of-type(4)::before {
  background: url(../img/story_head04.png) top center no-repeat;
  background-size: contain;
}
@media screen and (max-width:780px){
.story ul {
  width: 100%;
  margin: 0 auto 3em;
  background-image: none;
}

.story ul li {
  float: none;
  width: 100%;
  padding: 1em 0 2em;
  background: url(../img/story_borderX.png) bottom left repeat-x;
}

.story ul li:nth-last-of-type(1) {
  background: none;
}

.story ul li::before {
  position: static;
  margin: 0 auto 2em;
}
}

/* --------------------------------------------
				　キャラクター誘導
---------------------------------------------- */ 
.story .story__box {
  position: relative;
  max-width: 548px;
  margin: 0 auto;
}

.story .story__box > p {
  width: 90%;
  max-width: 350px;
  margin: 0 0 0 auto;
}

.story .story__box > p img {
  display: block;
  width: 100%;
}

.story .story__box {
  opacity: 0;
}

.story .story__box.scrollin {
  opacity: 1;
  animation-delay: 1s;
}

.story .story__box .storyAnime01 {
  opacity: 0;
}

.story .story__box.scrollin .storyAnime01 {
  opacity: 1;
  animation-name: storyAnime01;
  animation-duration: 1s;
}
@keyframes storyAnime01 {
  15% {
    opacity: 1;
    transform:  scale(1.4);
  }
  
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.story .story__box .storyAnime_box {
  overflow: hidden;
  padding-top: 2.5em;
  z-index: 10;
}

.story .story__box .storyAnime02 {
  display: block;
  opacity: 0;
  width: 80%;
  max-width: 328px;
  margin: 0 auto -50px;
}
.story .story__box.scrollin .storyAnime02 {
  opacity : 1;
  animation-name: storyAnime02;
  animation-duration: .6s;
}
@keyframes storyAnime02 {
  0% { 
		transform: translateY(150px); }
  
  50% { 
		transform: translateY(-40px);
  }
  
  100% {
  	transform: translateY(0);
  }
}

.story .story__box .storyAnime03 {
  display: block;
  position: absolute; top: 35%; left: 12%;
  width: 40%;
  max-width: 68px;
}
.story .story__box.scrollin .storyAnime03 {
  animation-name: storyAnime03;
  animation-duration: 1s;
}

@keyframes storyAnime03 {
  0% {
    transform: rotate(-360deg) scale(0);
  }
  
  50% {
    opacity: 1;
    transform: rotate(360deg) scale(1.2);
  }
  
  100% {
   transform: scale(1);
  }
}


.story .story__box .storyAnime04 {
  display: block;
  position: absolute; top: auto; right: 0; bottom: 0; left:0;
  width: 80%;
  margin: 0 auto;
  z-index: -1;
}

.story .story__box.scrollin .storyAnime04 {
  animation-name: storyAnime04;
  animation-duration:0.8s;
}

@keyframes storyAnime04 {
  0% {
    transform: translate(0,150px) scale(0);
  }
  
  50% {
    transform: translate(0,0) scale(1.4);
  }
  
  100% {
   transform: scale(1);
  }
}


@media screen and (max-width:780px){
.story .story__box {
  background-size: 100% auto;
}

.story .story__box > img {
  width: 80%;
  max-width: 300px;
}

.story .story__box > p {
  width: 80%;
  max-width: 300px;
  margin: 0 auto;
}

.story .story__box .storyAnime03 {
  position: absolute; top: 38%; left: 15%;
  width: 20%;
}
}
@media screen and (max-width:480px){
.story .story__box .storyAnime02 {
  margin: 0 auto -80px;
}

.story .story__box .storyAnime03 {
  position: absolute; top: 38%; left: 5%;
}

}



/* --------------------------------------------
					工場見学概要
---------------------------------------------- */ 
.entry {
  padding: 5em 0;
	background-image:url(../../_common/img/share/main_back.png);
  background-position: bottom right;
  background-repeat: no-repeat;
	background-size: 68% auto;
  background-color: #fff;
}

.entry > p {
  width: 90%;
  margin: 0 auto 3em;
  font-size: 19px;
  font-size: 1.9rem;
  text-align: center;
}

.entry .entry__inner {
  max-width: 796px;
  padding-bottom: 5em;
}

.entry .entry__heading {
  margin-bottom: 2em;
  font-size: 21px;
  font-size: 2.1rem;
  color: #1e4c91;
}

.entry .entry__heading::before {
  display: inline-block;
  content: "";
  width: 6px;
  height: 30px;
  margin-right: .5em;
  vertical-align: middle;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6179b4+0,1e4c91+56,233555+100 */
  background: #6179b4; /* Old browsers */
  background: -moz-linear-gradient(45deg, #6179b4 0%, #1e4c91 56%, #233555 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #6179b4 0%,#1e4c91 56%,#233555 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #6179b4 0%,#1e4c91 56%,#233555 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6179b4', endColorstr='#233555',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
@media screen and (max-width:780px){
.entry .entry__heading {
  margin-bottom: 1em;
  font-size: 18px;
  font-size: 1.8rem;
}

.entry > p {
  font-size: 16px;
  font-size: 1.6rem;
  text-align: left;
}
}


.entry .entry__summary table {
  box-sizing: border-box;
  width: 100%;
  font-size: 14px;
  font-size: 1.4rem;
  border: 1px solid #aaa;
}

.entry .entry__summary table tr {
  border-bottom: 1px dashed #aaa;
}

.entry .entry__summary table tr:nth-of-type(5) {
  color: #ea1d13;
}

.entry .entry__summary table th {
  width: 156px;
  padding: .8em 1em;
  font-weight: normal;
  border-right: 1px solid #aaa;
  background-color: #dde9f0;
}

.entry .entry__summary table td {
  padding: .8em 1em;
}
@media screen and (max-width:780px){
.entry .entry__summary table th,
.entry .entry__summary table td {
  display: block;
  width: 100%;
}
.entry .entry__summary table tr,
.entry .entry__summary table th {
  border: none;
}
}