@charset "utf-8";

.intro {
/*    height: 100vh;*/
	max-height: 900px;
/*    padding: 100px 0;*/
	-ms-grid-rows: 100px auto 100px;
	grid-template-rows: 100px auto 100px;
}

.intro p {
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	-ms-grid-row: 2;
	grid-row: 2;
	-ms-grid-column: 1;
	-ms-grid-column-span: 12;
	grid-column: 1 / 13;
	-ms-grid-column-align: center;
	justify-self: center;
	-ms-grid-row-align: center;
	align-self: center;
}

.intro p .type {
	margin: .2em 0;
}

.intro p .type:first-of-type {
	margin-top: 0;
}

.intro p .type svg.logo_txt {
	width: 10px;
	height: 160px;
	fill: #fff;
}

.intro-bg {
	color: rgba(255,255,255,1);
	background: url(../img/about/about.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}

.section {
	margin-top: 150px;
}

.about__img {
/*    grid-row: 1 / 2;*/
	-ms-grid-row: 1;
	-ms-grid-column: 2;
	-ms-grid-column-span: 10;
	grid-column: 2 / 12;
/*    max-width: 574px;*/
	-ms-grid-column-align: center;
	justify-self: center;
}

.section-header {
	margin-top: 70px;
/*    grid-row: 2 / 3;*/
	-ms-grid-row: 2;
	-ms-grid-column: 2;
	-ms-grid-column-span: 10;
	grid-column: 2 / 12;
	-ms-grid-column-align: center;
	justify-self: center;
	width: 100%;
	text-align: center;
}

.section-header .ttl {
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	display: inline-flex;
	align-items: center;
	height: max-content;
}

.section-header .ttl .main {
	font-size: 2.6rem;
	letter-spacing: 0.27em;
}

.section-header .ttl .sub {
	font-size: 1.3rem;
	margin-top: 30px;
}

.section-body {
	margin-top: 45px;
/*    grid-row: 3 / 4;*/
	-ms-grid-row: 3;
	-ms-grid-column: 1;
	-ms-grid-column-span: 12;
	grid-column: 1 / 13;
	-ms-grid-column-align: center;
	justify-self: center;
	width: 100%;
	text-align: center;
}

.section-body p {
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	display: inline-block;
	text-align: left;
	height: max-content;
}

.fadein p, 
.fadein .about__img,
.fadein .section-header,
.fadein .section-body {
	transition: opacity 1.5s cubic-bezier(.77,0,.18,1);
	opacity: 0;
}

.display p,
.display .about__img,
.display .section-header,
.display .section-body {
	opacity: 1;
}

.display .section-header {
	transition-delay: 0.5s;
}

.display .section-body {
	transition-delay: 1.0s;
}


/* ============================================================================================== */
/* Media query                                                                                    */
/* ============================================================================================== */

/* ----------------------------------------------------------------------- */
/* SmartPhone */

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

}


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

}

@media screen and (orientation:landscape) {
	
	.about__img {
		max-width: 300px;
	}

}

/* over iphone 6 plus landscape */
@media screen and (orientation:landscape) and (min-width: 736px) {

}


/* ----------------------------------------------------------------------- */
/* Tablet */

@media screen and (min-width: 768px) {
	
	.intro {
		height: 100vh;
	}
	
	.about__img {
		-ms-grid-column: 3;
		-ms-grid-column-span: 8;
		grid-column: 3 / 11;
		max-width: 574px
	}

}


/* ----------------------------------------------------------------------- */
/* over ipad landscape */

@media screen and (orientation:landscape) and (min-width: 1024px) {

}


/* ----------------------------------------------------------------------- */
/* Desktop */

@media screen and (min-width: 1280px) {
	
	.intro p {
		line-height: 5;
		font-size: 1.6rem;
	}

	.intro p .type svg.logo_txt {
		height: 180px;
	}
	
	.section {
		margin-top: 300px;
	}
	
	.about__img {
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
		grid-row: 1 / 3;
		-ms-grid-column: 2;
		-ms-grid-column-span: 4;
		grid-column: 2 / 6;
		max-width: 574px;
	}
	
	.section-header {
		-ms-grid-row: 1;
		-ms-grid-row-span: 1;
		grid-row: 1 / 2;
		-ms-grid-column: 9;
		-ms-grid-column-span: 1;
		grid-column: 9 / 10;
		-ms-grid-row-align: center;
		align-self: center;
		height: auto;
		margin: 0;
	}
	
	.section-header .ttl .main {
		font-size: 3.4rem;
	}
	
	.section-body {
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		grid-row: 2 / 3;
		-ms-grid-column: 6;
		-ms-grid-column-span: 4;
		grid-column: 6 / 10;
		-ms-grid-row-align: end;
		align-self: end;
		min-height: auto;
		text-align: center;
		margin: 0;
	}
	
	.section-body p {
		font-size: 1.6rem;
	}

	/* .display .about__img {
		transition-delay: 0.5s;
	}

	.display .section-header {
		transition-delay: 0s;
	}
	
	.display .section-body {
		transition-delay: 0.5s;
	} */

}


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

}