@charset "utf-8";





@media screen and (min-width: 1000px) {

	#about-list {
		position: relative;
		padding-top: 50%;
	}

	#about-list:after {
		clear: both;
		content: "";
		display: block;
		visibility: hidden;
	}
	.slide {
		position: absolute;
		width: 100%;
		padding-top: 50%;
		left: 0;
		top: 0;
		overflow: hidden;
	}
	.slide figure {
		position: absolute;
		width: 50%;
		height: 100%;
		top: 0;
		overflow: hidden;
	}
	.slide figure:nth-child(1) {
		left: 0;
	}
	.slide figure:nth-child(2) {
		right: 0;
	}
	.slide figure img {
		width: 100%;
		height: auto;
	}

	.slide figure:nth-child(1) img {
		-ms-transition:     all 1000ms linear;
		-webkit-transition: all 1000ms linear;
		-moz-transition:    all 1000ms linear;
		transition:         all 1000ms linear;
	}
	.slide figure:nth-child(2) img {
		-ms-transition:     all 1000ms linear;
		-webkit-transition: all 1000ms linear;
		-moz-transition:    all 1000ms linear;
		transition:         all 1000ms linear;
	}
	.slide.direct figure img {
		-ms-transition:     all 0ms linear !important;
		-webkit-transition: all 0ms linear !important;
		-moz-transition:    all 0ms linear !important;
		transition:         all 0ms linear !important;
	}

	.slide.ready figure:nth-child(1) img {
		opacity: 0;

		-ms-transform:     scale(1.05);
		-webkit-transform: scale(1.05);
		-moz-transform:    scale(1.05);
		transform:         scale(1.05);

	}
	.slide.done figure:nth-child(1) img {
		opacity: 1;
	}

	.slide.ready figure:nth-child(2) img {
		opacity: 0;
	}

	.slide.done figure:nth-child(1) img {
		-ms-transform:     scale(1) !important;
		-webkit-transform: scale(1) !important;
		-moz-transform:    scale(1) !important;
		transform:         scale(1) !important;
	}
	.slide.done figure:nth-child(2) img {
		opacity: 1;
	}
	.slide .text-wrap {
		position: absolute;
		width: 50%;
		height: 100%;
		top: 0;
		overflow: hidden;
		right: 0;
	}
	.slide .text-wrap .text-inner {
		padding: 14% 10% 5% 24%;
		background-color: #f1f1f1;
		width: 100%;
		height: 100%;
	}
	.slide .text-wrap .text-inner .text-title {
		font-size: 52px;
    line-height: 58px;
    height: 58px;
    letter-spacing: 5px;
		margin-bottom: 1em;
		color: #595959;
	}
	.slide .text-wrap .text-inner .text-detail {
		font-size: 16px;
    line-height: 2;
		color: #595959;
	}

	.about-intro {
		margin: 85px 10px 10px;
		text-align: center;
	}
	.about-intro .intro-lead{
		margin-bottom: 30px;
		font-size: 1.125rem;
		letter-spacing: 2px;
		color: #595959;
	}
	.about-intro .intro-detail{
		font-size: 1.0rem;
		letter-spacing: 2px;
		line-height: 2;
		color: #595959;
	}
	/*
	.slide.ready figure:nth-child(2) img {
		transform: translateX(100%);
	}
	.slide.done figure:nth-child(2) img {
		transform: translateX(0);
	}
	*/


	#about-list > a {
		position: absolute;
		width: 30px;
		height: 60px;
		top: 50%;
		margin-top: -30px;

		-ms-transition:     all 300ms ease-out;
		-webkit-transition: all 300ms ease-out;
		-moz-transition:    all 300ms ease-out;
		transition:         all 300ms ease-out;
	}
	#about-list > a.prev {
		left: 5px;
		background: url(../../img/arrow_left_mini.png) 50% 50% no-repeat;
		background-size: 60% auto;
	}
	#about-list > a.next {
		right: 5px;
		background: url(../../img/arrow_right_mini.png) 50% 50% no-repeat;
		background-size: 60% auto;
	}
	#about-list > a:hover {
		opacity: 0.5 !important;
	}

	body.slide-changed #about-list > a {
		opacity: 0;
	}
	body.slide-changed #about-list:hover > a {
		opacity: 1;
	}

}
@media screen and (min-width: 1400px) {
	#about-list > a {
		opacity: 1 !important;
	}
	#about-list > a.prev {
		left: -40px;
		background-size: 60% auto;
	}
	#about-list > a.next {
		right: -40px;
		background-size: 60% auto;
	}
}



@media screen and (max-width: 999px) {
	#about-list {
		padding: 0 5px;
	}
	#about-list > a {
		display: none;
	}
	#about-list figure img {
		width: 100%;
		height: auto;
	}
	.slide .text-wrap {
		text-align: center;
		background-color: #f1f1f1;
	}
	.text-inner {
		display: inline-block;
		padding: 45px 0;
		text-align: left;
	}
	.slide .text-wrap .text-inner .text-title {
		font-size: 34px;
		line-height: 36px;
		height: 35px;
		letter-spacing: 5px;
		margin-bottom: 1em;
		color: #595959;
	}
	.slide .text-wrap .text-inner .text-detail {
		font-size: 12px;
		line-height: 2;
		color: #595959;
	}

	.about-intro {
		margin: 45px 10px 10px;
		text-align: center;
	}
	.about-intro .intro-lead{
		margin-bottom: 15px;
		font-size: 1.125rem;
		letter-spacing: 2px;
		color: #595959;
	}
	.about-intro .intro-detail{
		font-size: 10px;
		line-height: 2.5;
		color: #595959;
	}
}