@charset "utf-8";

.intro p {
	-webkit-writing-mode: horizontal-tb;
	-ms-writing-mode: lr-tb;
	writing-mode: horizontal-tb;
	-ms-grid-column: 2;
	-ms-grid-column-span: 10;
	grid-column: 2 / 12;
	-ms-grid-row-align: center;
	align-self: center;
	-ms-grid-column-align: center;
	justify-self: center;
	line-height: 2;
}

.product-block {
	-ms-grid-rows: 70px auto auto 70px;
	grid-template-rows: 70px auto auto 70px;
}

.product-block .ttl {
	-ms-grid-row: 3;
	grid-row: 3;
	-ms-grid-column: 2;
	-ms-grid-column-span: 9;
	grid-column: 2 / 11;
	-ms-grid-column-align: auto;
	justify-self: auto;
	-ms-grid-row-align: end;
	align-self: end;
	-webkit-writing-mode: horizontal-tb;
	-ms-writing-mode: lr-tb;
	writing-mode: horizontal-tb;
}

.product-block .ttl .details {
	display: block;
	margin-top: 10px;
}

.product-block .ttl .period {
	-webkit-writing-mode: horizontal-tb;
	-ms-writing-mode: lr-tb;
	writing-mode: horizontal-tb;
	display: block;
	margin-top: 1em;
}

.product-block .product__img {
	-ms-grid-row: 2;
	-ms-grid-row-span: 1;
	grid-row: 2;
	-ms-grid-column: 1;
	-ms-grid-column-span: 10;
	grid-column: 1 / 11;
}


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

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

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


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

@media screen and (orientation:landscape) {
}

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


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

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

	.product-block {
		max-height: 100%;
		height: auto;
	}
}


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

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


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

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

	.intro {
		-ms-grid-rows: 100px auto 100px;
		grid-template-rows: 100px auto 100px;
	}

	.intro p {
		-ms-grid-row: 2;
		-ms-grid-row-span: 1;
		grid-row: 2;
		-ms-grid-column: 2;
		-ms-grid-column-span: 8;
		grid-column: 2 / 10;
		text-align: center;
		line-height: inherit;
	}

	.product-block .ttl {
		-ms-grid-row: 2;
		-ms-grid-row-span: 2;
		grid-row: 2 / 4;
		-ms-grid-column: 7;
		-ms-grid-column-span: 3;
		grid-column: 7 / 10;
		-ms-grid-row-align: center;
		align-self: center;
		margin: 0;
	}

	.product-block .ttl .name {
		font-size: 2rem;
	}

	.product-block .ttl .period {
		margin-top: 20px;
	}

	.product-block .product__img {
		-ms-grid-column: 2;
		-ms-grid-column-span: 5;
		grid-column: 2 / 7;
	}

}


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