@charset 'UTF-8';

/*------------------
Vision（ビジョン）
------------------*/

/*----------
Vision メイン
----------*/
.creation-main{
	display: block;
	position: relative;
	width: 100%;
	height: 430px;
	background-color: #25b180;
}

._bkup_creation-main{
	display: block;
	position: relative;
	width: 100%;
	height: 430px;
	background-color: #8A8A8A!important;
	background-image: url("../../images/top/green_bg.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.creation-main-img{
	display: block;
	position: relative;
	max-width: 1000px;
	height: 430px;
	margin: 0 auto;
	bottom: 0px;
	text-align: right;
	vertical-align: bottom;
	background-image: url("../../images/creation/ayumi_main.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: cover;
}

.creation-main-img img{
	display: block;
	position: relative;
	width: 96%;
}
	
.creation-main h2{
	display: block;
	position: absolute;
	top:170px;
	left: 30px;
	width: 300px;
}

.creation-main h2 img{
	width: 350px;
}

.creation-main .copy{
	display: block;
	position: absolute;
	width: 304px;
	font-size: 27px;
	letter-spacing: 0.13em;
	top:212px;
	left: 20px;
	line-height: 1.76em;
	font-weight: 500;
	color: #fff;
	padding: 12px 0 0 0;
	border-top: 1px solid #FFFFFF; 
	text-align: left;
}

	
@media screen and (max-width: 768px){
	
.creation-main{
	display: block;
	position: relative;
	width: 100%;
	height: 330px;
	background-color: #25b180;
}
	
._bkup_.creation-main{
	display: block;
	position: relative;
	width: 100%;
	height: 450px;
	background-image: url("../../images/top/green_bg.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.creation-main-img{
	display: block;
	position: relative;
	max-width: 100%;
	height: 330px;
	margin: 0 auto;
	bottom: 0px;
	text-align: right;
	vertical-align: bottom;
	background-image: url("../../images/creation/ayumi_main_sp.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: contain;
}

.creation-main-img img{
	display: block;
	position: relative;
	width: 40%;
}
	
	.creation-ttl{
		display: block;
		width: 240px;
		height: auto;
		margin: auto;
	}
	
.creation-main h2{
	display: block;
	position: absolute;
	margin: auto;
	width: 250px;
	top: 50px;
	left: 17.2%;
	text-align: center;
}

.creation-main h2 img{
	width: 240px;
}

.creation-main .copy{
	display: block;
	position: absolute;
	width: 250px;
	font-size: 24px;
	letter-spacing: 0.14em;
	top:126px;
	left: 15%;
	line-height: 1.76em;
	font-weight: 500;
	color: #fff;
	padding: 12px 0 0 0;
	border-top: 1px solid #FFFFFF; 
	text-align: left;
}

}


/*----------
歩み - history
----------*/

.timeline {
  list-style: none;
	margin: 30px 0 30px 0;
}

.timeline p{
  font-size: 15px;
	line-height: 1.8em;
	letter-spacing: 0.05em;
	padding: 15px 10px 25px 10px;
	color: #2F2F2F;
	font-weight: 300;
}

.seihin-txt{
	color: #34AF76;
	display: block;
	clear: both;
	width: 100%;
	padding: 5px 0 5px 0;
	text-align: center;
	font-size: 14px;
	margin: -25px 0 10px 0;
	font-weight: 600;
	letter-spacing: 0em;
	line-height: 1.3em;
}

.midori-waku-txt{
	background-color: #34AF76;
	color: #FFFFFF;
	display: block;
	clear: both;
	width: 100%;
	padding: 10px 0 10px 0;
	text-align: center;
	font-size: 14px;
	margin: 10px 0 0 0;
	line-height: 1.22em;
}

.timeline > li {
  margin-bottom: 60px;
}

  .timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .timeline-date {
	display: block;
    width: 190px;
    float: left;
    margin: 20px 0 0 0!important;
	padding: 0!important;
  }
.timeline-date img{
	display: block;
    width: 170px;
  }
  .timeline-content {
    width: 80%;
    float: left;
    border-left: 2px #dddddd solid;
    padding-left: 30px;
	margin: 0px!important;
  }

.timeline-content img{
	margin: 0 0 0 -37px;
	max-width: 780px;
}

.year{
	display: block;
	clear: both;
	width:90%;
	padding: 0 0 10px 8px;
	font-size: 18px;
	font-weight: 600;
	color: #34AF76;
}

@media screen and (max-width: 768px){
	
/*----------
歩み - history（SP）
----------*/

.timeline {
  list-style: none;
	margin: 20px 0 20px 0;
}

.timeline p{
  font-size: 14px;
	line-height: 1.8em;
	letter-spacing: 0.05em;
	padding: 15px 0 25px 0;
	color: #2F2F2F;
	font-weight: 300;
	margin: 0 0 0 -7px;
	width: 97%;
}

.seihin-txt{
	color: #34AF76;
	display: block;
	clear: both;
	width: 100%;
	padding: 5px 0 5px 0;
	text-align: center;
	font-size: 16px;
	margin: 0 0 10px 0;
	font-weight: 600;
}

.midori-waku-txt{
	background-color: #34AF76;
	color: #FFFFFF;
	display: block;
	clear: both;
	width: 100%;
	padding: 5px 0 5px 0;
	text-align: center;
	font-size: 14px;
	margin: 10px 0 0 0;
}

.timeline > li {
  margin-bottom: 60px;
}

  .timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .timeline-date {
	display: block;
    width: 90%;
    float: left;
	border-left: 2px #dddddd solid;
	margin: 0 0 0 0!important;
    padding: 35px 0 0 30px!important;
  }
.timeline-date img{
	display: block;
    width: 95%;
	padding: 0;
	margin: 0 auto;
  }
  .timeline-content {
    width: 100%;
    float: left;
    border-left: 2px #dddddd solid;
    padding: 0 0 0 30px!important;
	margin: 0px!important;
  }

.timeline-content img{
	margin: 0 0 0 -36px;
	max-width:100%;
	z-index: 999;
}

.year{
	display: block;
	clear: both;
	width:90%;
	padding: 15px 0 10px 8px;
	font-size: 18px;
	font-weight: 600;
	color: #34AF76;
}
}