@charset "utf-8";
.BornStory{
	&__breadcrumb{
	margin: 0 auto 4%;
	}
	&__head{
	margin: 0 0 47px;
	@include mq-tab(){
	margin: 0 0 4.7vw;
	}
	@include mq-sp{
	margin: 0 0 3%;
	}
	}
	&__leadText{
	text-align: center;
	line-height: 1.95;
	font-weight: 500;
	margin: 0 0 6%;
		@include mq-sp{
		font-size: 3.85vw;
		line-height: 2;
		margin: 0 0 12%;
		font-weight: 350;
		}
	}
	&Main{
		&__img{
		position: relative;
			&::before{
			content: "";
			position: absolute;
			right: 2.6%;
			top: -25.5%;
			background: url(/common/img/bornstory/gaivota/born_img_01_l.png) left top no-repeat;
			background-size: 100% 100%;
			width: 86px;
			height: 202px;
				@include mq-tab{
				width: 8.6vw;
				height: 20.2vw;
				}
				@include mq-sp{
				background-image: url(/common/img/bornstory/gaivota/born_img_01_sp.png);
				width: 11.6vw;
				height: 29vw;
				right: 6.6%;
				top: -10.2%;
				}
			}
		}
	}
	&Bg{
		&--01{
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9f9f8+1,f9f9f8+99&0+1,1+2,1+98,0+99 */
		background: #f9f9f8;
		background: -moz-linear-gradient(top, rgba(249,249,248,0) 1%, rgba(249,249,248,1) 2%, rgba(249,249,248,1) 98%, rgba(249,249,248,0) 99%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(249,249,248,0) 1%,rgba(249,249,248,1) 2%,rgba(249,249,248,1) 98%,rgba(249,249,248,0) 99%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(249,249,248,0) 1%,rgba(249,249,248,1) 2%,rgba(249,249,248,1) 98%,rgba(249,249,248,0) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f9f9f8', endColorstr='#00f9f9f8',GradientType=0 ); /* IE6-9 */
			@include mq-sp{
			background: #f9f9f8;
			padding: 0 0 17%;
			}
		}
		&--02{
		padding: 9% 0 3% 53.8%;
		background: url(../img/bornstory/gaivota/born_bg_01_l.png) 43% -6.2% no-repeat,
		url(../img/bornstory/gaivota/born_img_02_l.png) 3.1% 24.5% no-repeat,
		url(../img/bornstory/gaivota/born_bg_05_l.png) 40% 90.8% no-repeat,
		url(../img/bornstory/gaivota/born_img_03_l.png) 16.6% 68.9% no-repeat,
		url(../img/bornstory/gaivota/born_border_01_l.png) center bottom no-repeat;
		background-size: 118px 269px,155px 156px,136px 166px,274px 204px,94.5% auto;
			@include mq-tab(){
			background-size: 11.8vw 26.9vw,15.5vw 15.6vw,13.6vw 16.6vw,27.4vw 20.4vw,94.5% auto;
			}
			@include mq-sp{
			padding: 18.5% 0 10.9%;
			background: url(../img/bornstory/gaivota/born_border_01_sp.png) center bottom no-repeat;
			}
		}
		&--03{
		padding: 7.5% 47% 9% 12.7%;
		background: url(../img/bornstory/gaivota/born_img_04_l.png) 93% 21% no-repeat,
		url(../img/bornstory/gaivota/born_bg_02_l.png) 88.4% 95.4% no-repeat;
		background-size: 285px 320px,81px 58px;
			@include mq-tab(){
			background-size: 28.5vw 32vw,8.1vw 5.8vw;
			}
			@include mq-sp{
			background: url(/common/img/bornstory/gaivota/born_bg_02_sp.png) 99% 89.9% no-repeat;
			background-size: 20% auto;
			padding: 12.8% 0 35.5%;
			}
		}
		&--04{
		padding: 7.4% 0 0;
			@include mq-sp{
			padding: 17.8% 0 0;
			}
		}
	}
	&__ttl{
	font-size: 1.6875rem;
	font-weight: 500;
	margin: 0 0 7.4%;
	line-height: 1.7;
		@include mq-tab(){
		font-size: 2.7vw;
		}
		@include mq-sp{
		text-align: center;
		font-size: 6.2vw;
		line-height: 1.65;
		}
		&--01{
			@include mq-sp{
			background: url(../img/bornstory/gaivota/born_img_02_sp.png) left bottom no-repeat,
			url(../img/bornstory/gaivota/born_img_03_sp.png) right bottom no-repeat;
			background-size: 46.7% auto;
			padding: 0 0 53.7%;
			margin: 0 0 6.8%;
			}
		}
		&--02{
		margin: 0 0 10.3%;
			@include mq-sp{
			background: url(../img/bornstory/gaivota/born_img_04_sp.jpg) left bottom no-repeat;
			background-size: 100% auto;
			padding: 0 0 80.7%;
			margin: 0 0 6.8%;
			}
		}
		&--03{
		width: 54.375%;
		margin: 0 auto 6.7%;
			@include mq-sp{
			width: 100%;
			margin: 0 auto 5%;
			}
		}
	}
	&__text{
	line-height: 2.35;
	margin: 0 0 3.7%;
		&--03{
		margin: 0 0 10.9%;
		@include mq-sp{
		margin: 0 0 7.3%;
		}
		}
	}
	&__img{
		&--01{
		width: 80%;
		margin: 0 0 3% -11%;
			@include mq-sp{
			width: 100%;
			margin: 0 auto 3.2%;
			}
		}
		&--02{
		position: relative;
			&::before{
			content: "";
			position: absolute;
			right: 15.1%;
			top: -10.1%;
			background: url(../img/bornstory/gaivota/born_text_04_l.png) left top no-repeat;
			background-size: 100% 100%;
			width: 356px;
			height: 193px;
				@include mq-tab(){
				width: 35.6vw;
				height: 19.3vw;
				}
				@include mq-sp{
				background-image: url(../img/bornstory/gaivota/born_text_04_sp.png);
				background-size: 100% 100%;
				right: 2.7%;
				top: -19.5%;
				width: 85.5vw;
				height: 34.6vw;
				}
			}
		}
		&--03{
		width: 34.79166666666667%;
		margin: 0 auto;
		position: relative;
			@include mq-sp{
			width: 100%;
			}
			&::before,
			&::after{
			content: "";
			position: absolute;
				@include mq-sp{
				display: none;
				}
			}
			&::before{
			background: url(/common/img/bornstory/gaivota/born_text_03_pc.svg) left top no-repeat;
			background-size: 100% 100%;
			width: 170px;
			height: 72px;
			left: -63.6%;
			top: 47%;
				@include mq-tab(){
				width: 17vw;
				height: 7.2vw;
				}
			}
			&::after{
			background: url(/common/img/bornstory/gaivota/born_text_02_pc.svg) left top no-repeat;
			background-size: 100% 100%;
			width: 193px;
			height: 88px;
			right: -55.9%;
			top: 44%;
				@include mq-tab(){
				width: 19.3vw;
				height: 8.8vw;
				}
			}
		}
	}
	&Btn{
	margin: 6.7% auto 0;
	}
}