/*==================== メイン ====================*/

/* back */
#concept .back {
	overflow: hidden;
	position: fixed;
	z-index: -1;
	left: 0;
	top: 0;
	width: 100%;
	background: black;
}
#concept .back .body {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#concept .back .body > div {
	overflow: hidden;
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background: no-repeat center center;
	background-size: cover;
}
#concept .back .body > div#back1,
#concept .back .body > div#back3 {
	top: 0;
}
#concept .back .body > div#back2 {
	bottom: 0;
}

#concept .back .body > div::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 100vw;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

#back1::before,
#back3::before {
	top: 0;
}
#back2::before {
	bottom: 0;
}

@media all and (max-width: 640px) {
	#concept .back {
		height: 375px; /* for Android4.4 */
		height: calc(90vw + 5rem);
	}
	#concept .back .body > div::before {
		height: 375px; /* for Android4.4 */
		height: calc(90vw + 5rem);
	}
	#back1::before {
		background-image: url(../images/concept/visual_sp1.png);
	}
	#back2::before {
		background-image: url(../images/concept/visual_sp2.png);
	}
	#back3::before {
		background-image: url(../images/concept/visual_sp3.png);
	}
}

@media all and (min-width: 641px) {
	#concept .back {
		height: calc(33.35rem + 4rem); /* calc(667px + 70px); */
	}
	#concept .back .body > div::before {
		height: calc(33.35rem + 4rem); /* calc(667px + 70px); */
	}
	#back1::before {
		background-image: url(../images/concept/visual_pc1.png);
	}
	#back2::before {
		background-image: url(../images/concept/visual_pc2.png);
	}
	#back3::before {
		background-image: url(../images/concept/visual_pc3.png);
	}
}

/* main */
#concept .main {
	display: inline-table;
	overflow: visible;
	width: 100%;
	color: white;
}
#concept h1 {
	display: table-cell;
	vertical-align: middle;
	font-family: 'Hiragino Kaku Gothic W1 JIS2004';
	letter-spacing: 0.1em;
	white-space: nowrap;
}
#concept h1 span {
	display: block;
}

@media all and (max-width: 640px) {
	#concept .main {
		height: 375px; /* for Android4.4 */
		height: 90vw;
	}
}

@media all and (min-width: 641px) {
	#concept .main {
		width: 50rem;
		height: 33.35rem;
	}
	#concept .main h1 {
		font-size: 2.25rem;
	}
}

/* text */
#concept .text {
	color: #ddd;
	letter-spacing: 0.1em;
}
#concept .text p:nth-of-type(n+2) {
	margin-top: 1.5em;
}
#concept .text p span {
	font-family: 'Hiragino Kaku Gothic W4 JIS2004';
}
#concept .text strong {
	font-weight: normal;
}

@media all and (max-width: 640px) {
	#concept .text {
		padding: 0 5%;
	}
	#concept .text p {
		text-align: justify;
	}
}

@media all and (min-width: 641px) {
	#concept .text p span {
		display: block;
	}
	#concept .text p {
		text-align: center;
		line-height: 2;
	}
}

/*---------- アニメーション ----------*/

#concept {
	-webkit-transition: opacity 0.6s ease;
	transition: opacity 0.6s ease;
	opacity: 0;
}
#concept.loaded {
	opacity: 1;
}

#concept .back .body > div {
	-webkit-animation-name: showBackImages_and;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-play-state: paused;
	animation-name: showBackImages;
	animation-fill-mode: both;
	animation-play-state: paused;
}
#concept.loaded .back .body > div {
	animation-play-state: running;
	animation-duration: 400ms;
	animation-timing-function: ease;
}

@-webkit-keyframes showBackImages_and {
	0% {
		opacity: 0;
		height: 0%;
	}
	100% {
		opacity: 1;
		height: 100%;
	}
}
@keyframes showBackImages {
	0% {
		opacity: 0;
		height: 0%;
	}
	100% {
		opacity: 1;
		height: 100%;
	}
}
#concept.loaded .back .body > div#back1 {
	-webkit-animation-delay: 600ms;
	animation-delay: 600ms;
}
#concept.loaded .back .body > div#back2 {
	-webkit-animation-delay: 900ms;
	animation-delay: 900ms;
}
#concept.loaded .back .body > div#back3 {
	-webkit-animation-delay: 1200ms;
	animation-delay: 1200ms;
}

#concept .back .body {
	-webkit-animation-name: blackOutBack_and;
	-webkit-animation-fill-mode: both;
	-webkit-animation-play-state: paused;
	animation-name: blackOutBack;
	animation-fill-mode: both;
	animation-play-state: paused;
}
#concept.loaded .back .body {
	-webkit-animation-play-state: running;
	-webkit-animation-delay: 1ms;
	-webkit-animation-duration: 1ms;
	-webkit-animation-timing-function: ease-out;
	animation-play-state: running;
	animation-delay: 2000ms;
	animation-duration: 600ms;
	animation-timing-function: ease-out;
}

@-webkit-keyframes blackOutBack_and {
	from {
		opacity: 1;
	}
	to {
		opacity: 0.4;
	}
}
@keyframes blackOutBack {
	from {
		opacity: 1;
	}
	to {
		opacity: 0.4;
	}
}

#concept h1 {
	-webkit-animation-name: showTitle;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-play-state: paused;
	animation-name: showTitle;
	animation-fill-mode: both;
	animation-play-state: paused;
}
#concept.loaded h1 {
	animation-delay: 2200ms;
	animation-duration: 1200ms;
	animation-play-state: running;
	animation-timing-function: ease;
}
@-webkit-keyframes showTitle {
	from {
		opacity: 0;
		filter: blur(32px);
	}
	to {
		opacity: 1;
		filter: blur(0);
	}
}
@keyframes showTitle {
	from {
		opacity: 0;
		filter: blur(32px);
	}
	to {
		opacity: 1;
		filter: blur(0);
	}
}

/*==================== 3つのバックアップ ====================*/
#features {
	margin-top: 4em;
	background: white;
}
#features h2 {
	margin: 0;
	background-image: linear-gradient(0deg, rgba(255,196,0,0.7), rgba(255,196,0,1));
}
#features h2 span {
	font-family: 'UD Shin Go Light';
}
#features h3 {
	font-family: 'Hiragino Kaku Gothic W1 JIS2004';
	line-height: 1.2;
}
#features h3 span {
	display: block;
}
#features p {
	text-align: justify;
}
#features hr {
	height: 1px;
	border: none;
	margin: 0;
	background-color: #fbd499;
}

@media all and (max-width: 640px) {
	#features h2 {
		font-size: 140%;
		line-height: 1.2;
		padding: 0.75em 0;
	}
	#features h2 span {
		display: block;
	}
	#features > div {
		display: table;
		margin: 2em 0;
	}
	#features h3 {
		margin: 0;
		font-size: 160%;
	}
	#features p {
		margin: 1em 3% 0;
	}
	#features .image {
		display: table-header-group;
	}
	#features .image img {
		display: inline-block;
		margin-bottom: 1em;
		width: 50%;
	}
	#features a {
		display: block;
		margin: 1em auto 0;
		width: 50%;
	}
}

@media all and (min-width: 641px) {
	#features h2 {
		padding: 1em 0;
		font-size: 1.4rem;
	}
	#features > div {
		display: inline-table;
		width: 1000px;
		table-layout: fixed;
		border-spacing: 50px;
	}
	#features > div > div {
		display: table-cell;
		vertical-align: middle;
	}
	#features h3 {
		margin: 0;
		font-size: 1.4rem;
	}
	#features p {
		margin: 2em 0;
		font-size: 90%;
	}
	#features a {
		display: inline-block;
		width: 13.2rem;
	}
	#features .image img {
		width: 14.6rem;
	}
}

/*==================== 提案レポート ====================*/

#report .head {
	color: #B3B3B3;
}
#report .head h2 {
	font-weight: normal;
	font-family: 'UD Shin Go Light';
	line-height: 1;
	margin: 0;
	padding: 1.5em 0;
}
#report .body {
	background: white;
}

#report .body a {
	display: table;
	position: relative;
	table-layout: fixed;
	border-spacing: 0.5em;
	border: 1px solid #CCCCCC;
	background: linear-gradient(0deg, rgba(255,255,255,1) 55%, rgba(255,255,255,0.95) 70%, rgba(255,255,255,0.7));
	color: inherit;
	text-decoration: none;
	text-align: left;
}
#report .body a::after {
	content: '';
	display: block;
	position: absolute;
	right: 0.5em;
	bottom: 1em;
	width: 2.5em;
	height: 2.5em;
	background: url(../images/concept/report_arrow.png) no-repeat center center;
	background-size: contain;
}

#report .body a > div {
	display: table-cell;
	vertical-align: top;
}
#report .text {
	padding-left: 0.5em;
}
#report h3 {
	margin: 0;
	font-family: 'UD Shin Go Light';
	line-height: 1.3;
}
#report h3 span {
	display: block;
}
#report h3 small {
	display: block;
	margin-bottom: 0.25em;
	font-size: 70%;
}
#report p {
	margin: 1em 0 0;
}
#report .purpose {
	display: inline-block;
	margin: 0.5em 0 0;
}
#report .purpose img {
	display: inline-block;
	width: auto;
	height: 1.7em;
}
#report .purpose img:nth-of-type(n+2) {
	margin-left: 0.5em;
}

#report .body > p {
	margin: 0 0 1em;
	text-align: center;
}

@media all and (max-width: 640px) {
	#report h2 {
		font-size: 180%;
	}
	#report .body {
		padding: 1em 0;
	}
	#report .body > div:not(:first-child) {
		margin: 1em;
	}
	#report .body a .pic {
		width: 35%;
	}
	#report .text h3 {
		font-size: 125%;
	}
	#report .text p {
		font-size: 95%;
	}
}

@media all and (min-width: 641px) {
	#report h2 {
		margin-bottom: 0;
		font-size: 250%;
	}
	#report .body {
		padding: 2em calc((100% - 1000px) / 2);
	}
	#report .body > p {
		font-size: 120%;
	}
	#report .body > p br {
		display: none;
	}
	#report .body > div {
		box-sizing: border-box;
		padding: 1%;
		width: 50%;
		float: left;
	}
	#report .body::after {
		content: '';
		clear: both;
		display: block;
	}
	#report .body a .pic {
		width: 30%;
	}
	#report .body a .pic img {
		width: 100%;
	}
	#report h3 {
		font-size: 150%;
	}
	#report .body > div p {
		font-size: 90%;
	}
}

/*==================== お申し込み ====================*/

#entry {
	position: relative;
	padding: 2em 0 4em;
	background: white;
}
#entry .body {
	background-image: linear-gradient(0deg, rgba(255,196,0,0.7), rgba(255,196,0,1));
}
#entry .body a {
	display: block;
}

@media all and (max-width: 640px) {
	#entry .body {
		padding: 5% 0;
	}
	#entry .body a img {
		width: 90%;
	}
}

@media all and (min-width: 641px) {
	#entry .body {
		padding: 3% 0;
	}
	#entry .body a img {
		width: 30rem;
	}
}