@charset "utf-8";

.section {
}

.product__list {
	
}

.product-block {
/*
	height: 100vh;
	max-height: 720px;
	padding: 100px 0 60px;
*/
	-ms-grid-rows: 100px (auto)[4] 60px !important;
	grid-template-rows: 100px repeat(4, auto) 60px !important;
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
}

.s_product:nth-child(odd) {
	background-color: rgba(230,225,211,.4);
}

.s_product:nth-child(even) {
	background-color: rgba(255,255,255,1);
}

.product-block p {
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

.product-block .ttl {
	-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-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.product-block .ttl .name {
	
}

.product-block .ttl .details {
	font-size: 1.3rem;
	margin-top: 2em;
}

.product-block .desc {
	-ms-grid-row: 3;
	grid-row: 3;
	-ms-grid-column: 1;
	-ms-grid-column-span: 12;
	grid-column: 1 / 13;
	-ms-grid-column-align: center;
		justify-self: center;
	margin-top: 100px;
}

.product-block .product__img {
/*    grid-row: 3 / 4;*/
	-ms-grid-row: 4;
	grid-row: 4;
	-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;
}

.online-link {
/*    grid-row: 3 / 5;*/
	-ms-grid-row: 5;
	grid-row: 5;
	-ms-grid-column: 2;
	-ms-grid-column-span: 1;
	grid-column: 2 / 3;
	-ms-grid-column-align: start;
		justify-self: start;
	-ms-grid-row-align: end;
		align-self: end;
/*    line-height: 1;*/
}

.online-link-block {
	-ms-grid-row: 5;
	grid-row: 5;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-column: 2 / 5;
	-ms-grid-column-align: start;
	justify-self: start;
	-ms-grid-row-align: end;
	align-self: end;
/*    line-height: 1;*/
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
			flex-direction: row-reverse;
}

/*
.online-link-block .online-link + .online-link {
	margin-right: 1em;
}
*/

.online-link__anchor {
	text-decoration: none;
	position: relative;
}

.online-link__anchor:before {
	position: absolute;
	content: "";
	width: 1px;
	height: 30px;
	background: rgba(0,0,0,1);
	top: -40px;
	right: 0;
	left: 0;
	margin: auto;
}

/* other */

.s_other {
	margin-top: 100px;
}

.s_other .section-body {
	-ms-grid-columns: auto;
	grid-template-columns: auto;
}

.other-block {
	-ms-grid-template-rowss: 60px repeat(5, auto) 60px !important;
	grid-template-rows: 60px repeat(5, auto) 60px !important;
}

.other-block .ttl {
	-ms-grid-row: 2;
	-ms-grid-row-span: 1;
	grid-row: 2 / 3;
	-ms-grid-column: 10;
	-ms-grid-column-span: 1;
	grid-column: 10 / 11;
}

.other-block .product__img {
	-ms-grid-row: 2;
	-ms-grid-row-span: 5;
	grid-row: 2 / 7;
}

.other-block .online-link {
	-ms-grid-row: 6;
	-ms-grid-row-span: 1;
	grid-row: 6 / 7;
}

.other-block:nth-child(1) { 
	-ms-grid-row: 1;
}

.other-block:nth-child(2) { 
	-ms-grid-row: 2;
}

.other-block:nth-child(3) { 
	-ms-grid-row: 3;
}

.other-block:nth-child(4) { 
	-ms-grid-row: 4;
}

.other-block:nth-child(5) { 
	-ms-grid-row: 5;
}

.other-block:nth-child(6) { 
	-ms-grid-row: 6;
}


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

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

@media screen and (min-width: 375px) {
	
/*
	.product-block .product__img {
		min-width: 350px;
	}
*/

}


@media screen and (min-width: 414px) {
	
/*
	.product-block .product__img {
		min-width: 400px;
	}
*/

}

@media screen and (orientation:landscape) {
	
	.product-block .product__img {
		-ms-grid-column: 2;
		-ms-grid-column-span: 10;
		grid-column: 2 / 12;
	}

}

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


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

@media screen and (min-width: 768px) {
	
	.product-block .product__img {
		max-width: 800px
	}
	
/*
	.product-block .product__img {
		grid-row: 3 / 6;
		grid-column: 1 / 9;
	}
*/

}


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

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


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

@media screen and (min-width: 1280px) {
	
	.page-header .ttl {
		-ms-grid-column: 5;
		-ms-grid-column-span: 2;
		grid-column: 5 / 7;
	}
	
	.intro {
		font-size: 1.6rem;
		padding: 100px 0;
	}
	
	.intro p {
		line-height: 4;
	}
	
	.intro .product__img {
		-ms-grid-row: 3;
		-ms-grid-row-span: 4;
		grid-row: 3 / 7;
		-ms-grid-column: 7;
		-ms-grid-column-span: 3;
		grid-column: 7 / 10;
	}
	
	.product-block {
		-ms-grid-rows: (1fr)[6] !important;
		grid-template-rows: repeat(6, 1fr) !important;
		height: 100vh;
		min-height: 800px;
	}

	.product-block .ttl {
		-ms-grid-row: 2;
		-ms-grid-row-span: 3;
		grid-row: 2 / 5;
		-ms-grid-column: 9;
		-ms-grid-column-span: 1;
		grid-column: 9 / 10;
/*        align-self: center;*/
		-ms-grid-column-align: center;
		justify-self: center;
		margin: 0;
		flex-direction: inherit;
		align-items: center;
	}

	.product-block .ttl .name {
		font-size: 2.6rem;
	}
	
	.product-block .ttl .details {
		font-size: 1.6rem;
		margin-top: 45px;
	}
	
	.product-block .desc {
		-ms-grid-row: 1;
		-ms-grid-row-span: 6;
		grid-row: 1 / 7;
		-ms-grid-column: 6;
		-ms-grid-column-span: 4;
		grid-column: 6 / 10;
		-ms-grid-row-align: center;
		align-self: center;
		margin: 0;
		font-size: 1.6rem;
	}

	.product-block .product__img {
		-ms-grid-row: 2;
		-ms-grid-row-span: 5;
		grid-row: 2 / 7;
		-ms-grid-column: 2;
		-ms-grid-column-span: 5;
		grid-column: 2 / 7;
		max-width: 100%;
	}
	
	.online-link {
		-ms-grid-row: 4;
		-ms-grid-row-span: 3;
		grid-row: 4 / 7;
		-ms-grid-column: 2;
		-ms-grid-column-span: 1;
		grid-column: 2 / 3;
		-ms-grid-column-align: left;
		justify-self: left;
		-ms-grid-row-align: center;
		align-self: center;
		font-size: 1.6rem;
	}
	
	.online-link__anchor:before {
		height: 50px;
		top: -65px;
	}
	
	.online-link-block {
		-ms-grid-row: 4;
		-ms-grid-row-span: 3;
		grid-row: 4 / 7;
		-ms-grid-column: 2;
		-ms-grid-column-span: 1;
		grid-column: 2 / 3;
		-ms-grid-column-align: left;
		justify-self: left;
		-ms-grid-row-align: center;
		align-self: center;
	}
	
	.online-link-block .online-link {
		-ms-flex-item-align: start;
		-ms-grid-row-align: start;
		align-self: start;
	}
	
	/* monaka */

	.monaka-block .ttl {
		-ms-grid-column: 5;
		-ms-grid-column-span: 1;
		grid-column: 5 / 6;
	}

	.monaka-block .desc {
		-ms-grid-column: 2;
		-ms-grid-column-span: 4;
		grid-column: 2 / 6;
	}

	.monaka-block .product__img {
		-ms-grid-column: 5;
		-ms-grid-column-span: 5;
		grid-column: 5 / 10;
	}
	
	
	/* local-sweets */
	
	.local-sweets-block .product__img {
		-ms-grid-row: 1;
		-ms-grid-row-span: 6;
		grid-row: 1 / 7;
	}
	
	/* other */

	.s_other {
		margin-top: 0;
	}
	
	.s_other .section-body {
	}
	
	.s_other .product-block {
		height: auto;
	}

	.other-block {
		min-height: 600px;
	}
	
	.other-block .product__img {
		-ms-grid-row: 1;
		-ms-grid-row-span: 6;
		grid-row: 1 / 7;
	}
	
	.other-block .online-link {
		-ms-grid-row: 5;
		-ms-grid-row-span: 2;
		grid-row: 5 / 7;
		-ms-grid-column-align: center;
			justify-self: center;
		-ms-grid-row-align: start;
			align-self: start;
	}
	
	.other-block:nth-child(1) { 
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
		grid-row: 1 / 3; 
	}
	
	.other-block:nth-child(2) { 
		-ms-grid-row: 2;
		-ms-grid-row-span: 2;
		grid-row: 2 / 4;
	}
	
	.other-block:nth-child(3) { 
		-ms-grid-row: 3;
		-ms-grid-row-span: 2;
		grid-row: 3 / 5;
	}
	
	.other-block:nth-child(4) { 
		-ms-grid-row: 4;
		-ms-grid-row-span: 2;
		grid-row: 4 / 6; 
	}
	
	.other-block:nth-child(5) { 
		-ms-grid-row: 5;
		-ms-grid-row-span: 2;
		grid-row: 5 / 7;
	}
	
	.other-block:nth-child(6) {
		-ms-grid-row: 6;
		-ms-grid-row-span: 2;
		grid-row: 6 / 8; 
	}
	
	.other-block:nth-child(odd) {
		-ms-grid-column: 6;
		-ms-grid-column-span: 5;
		grid-column: 6 / 11;
	}
	
	.other-block:nth-child(odd) .ttl {
		-ms-grid-column: 7;
		-ms-grid-column-span: 2;
		grid-column: 7 / 9;
	}
	
	.other-block:nth-child(odd) .product__img {
		-ms-grid-column: 1;
		-ms-grid-column-span: 8;
		grid-column: 1 / 9;
	}
	
	.other-block:nth-child(odd) .online-link {
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
		grid-column: 1 / 3;
	}
	
	.s_other .product-block:nth-child(even) {
		-ms-grid-column: 1;
		-ms-grid-column-span: 5;
		grid-column: 1 / 6;
	}
	
	.other-block:nth-child(even) .ttl {
		-ms-grid-column: 8;
		-ms-grid-column-span: 2;
		grid-column: 8 / 10;
	}
	
	.other-block:nth-child(even) .product__img {
		-ms-grid-column: 2;
		-ms-grid-column-span: 8;
		grid-column: 2 / 10;
	}
	
	.other-block:nth-child(even) .online-link {
		-ms-grid-column: 2;
		-ms-grid-column-span: 2;
		grid-column: 2 / 4;
	}
	

}


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