@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

html,body{
	font: 16px/150% 'source-han-serif-japanese', serif;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

img{
	display: block;
}

ul,
ul li,
ol,
ol li{
	position: static;
	left: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.ofi{
	object-fit: cover;
	object-position: center top;
	font-family: 'object-fit: cover; object-position: center top;'
}

@keyframes fadeIn {
	0% {opacity: 0.5}
	100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
	0% {opacity: 0.5}
	100% {opacity: 1}
}

@media screen and (min-width:481px){
	a[href^="tel:"]{
		text-decoration: none;
		color: @colorText1;
		cursor: default;
	}
}

/* ****************************** LESS ****************************** */

@color1: #eeeed8;
@color2: #fafafa;
@color3: #f39800;
@color4: #ec6d71;

@colorText1: #444;
@colorText2: #c9171e;
@colorText3: #b55233;
@colorText4: #339933;

@width1: 1000px;
@width2: 800px;
@textXXL: 3rem;
@textXL: 2rem;
@textL: 1.5rem;
@textM: 1.25rem;
@textS: 0.75rem;

.a_hover(){
	@media screen and (min-width:768px){
		a:hover{
			-webkit-animation: fadeIn 2s ease 0s 1 normal;
			animation: fadeIn 2s ease 0s 1 normal;
		}
	}
}

.box1(@width: @width1,@padding: 20px){
	width: 100%;
	max-width: @width + (@padding * 2);
	margin: 0 auto;
	padding: 0 @padding;
}

.box2(){
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0 4%;
	box-sizing: border-box;
}

.button(
	@width: 100%,
	@border: @color3,
	@arrow: #fff,
	@background: @color3,
	@text: #fff,
	@rotate: 45deg,
	@left: auto,
	@right: 0.5rem
){
	width: @width;
	margin-left: auto;
	margin-right: auto;
	
	a{
		text-align: center;
		display: block;
		color: @text;
		text-decoration: none;
		position: relative;
		border: 1px solid @border;
		padding: 1rem 0;
		background: @background;
	}
	
	a::after{
		position: absolute;
		top: 50%;
		left: @left;
		right: @right;
		display: block;
		content: '';
		margin-top: -0.25rem;
		width: 0.5rem;
		height: 0.5rem;
		border-top: 1px solid @arrow;
		border-right: 1px solid @arrow;
		-webkit-transform: rotate(@rotate);
		transform: rotate(@rotate);
	}
}

.flex(){
	display: -webkit-flex;
	display: flex;
}

.flex_wrap(){
	.flex();
	-webkit-flex-wrap :wrap;
	flex-wrap: wrap;
}

/* ******************************
header
****************************** */

header{
	padding-top: 1.5rem;
	
	>p{
		text-align: center;
		font-size: @textL;
		line-height: 100%;
	}
	
	>p::after{
		display: block;
		content: 'Chukoureika';
		font-size: @textS;
		padding-bottom: 1.5rem;
	}
	
	>div{
		position: relative;
		width: 100%;
		
		>div#catch{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			overflow: hidden;

			> h1{
				font-weight: normal;
				font-family: "Noto Sans JP", serif;
				height: 0;
				padding-top: 100%;
				position: relative;
				width: 100%;

				&:nth-of-type(1){background-color: #ff1e08;background-image: url('../images/catch_bg_apple.png');background-position: center 35%;background-size: 20%;}
				&:nth-of-type(2){background-color: #92bf06;background-image: url('../images/catch_bg_grape.png');background-position: center 35%;background-size: 20%;}
				&:nth-of-type(3){background-color: #8800bf;background-image: url('../images/catch_bg_grape.png');background-position: center 35%;background-size: 20%;}

				/*
				> span{
					color: #fff;
					font-family: "Noto Sans JP", serif;
					position: absolute;
					text-align: center;
					top: 50%;
					transform: translate(-50%, -50%);
					left: 50%;
					width: 100%;
					
					&:nth-child(1){
						font-size: 1rem;
						font-weight: normal;
						margin-top: -1rem;
					}

					&:nth-child(2){
						font-weight: bold;
						margin-top: 1rem;
					}
				}
				*/

				svg{
					position: absolute;
					text-align: center;
					top: 50%;
					transform: translate(-50%, -50%);
					left: 50%;
					width: 100%;
					height: 100%;

					>text:nth-child(2){
						font-weight: bold;
					}
				}
			}
		}
	}
}

/* ******************************
nav
****************************** */

nav{
	background: @color1;
	
	ul{
		.box1();
		.flex();
		
		li{
			width: 20%;
			border-left: 1px solid #fff;
			
			a{
				display: block;
				text-align: center;
				padding: 1rem 0;
				text-decoration: none;
				color: @colorText1;
			}
			
			a::before{
				font-family: 'FontAwesome';
				content: '\f18e\ ';
			}
			
			.a_hover();
		}
		
		li:last-child{
			border-right: 1px solid #fff;
		}
	}
}

/* ******************************
#about
****************************** */

#about{
	padding-top: 3rem;
	overflow: hidden;
	
	>div.detail{
		.box1();
		display: grid;
		grid-template-rows: 1fr 1fr;
		grid-gap: 4rem;
		margin-bottom: 4rem;
		
		>div{
			width: 100%;
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-areas: "A B";
			grid-gap: 4rem;

			&:nth-child(even){
				> div:nth-of-type(1){ grid-area: B;}
				> div:nth-of-type(2){ grid-area: A;}
			}

			> div{
				&:nth-of-type(1){
					align-self: center;
 
					h2{
						padding-bottom: 3rem;
						color: @colorText3;
						font-weight: lighter;
						font-size: @textL;
					}	

					p{			
						margin-bottom: 3rem;
						color: @colorText1;
					}
				}
					
				&:nth-of-type(2){
					p {
						&:nth-of-type(1){
							img{
								color: @colorText1;
								width: 100%;
								height: auto;
								border-radius: 50%;
								margin-bottom: 1rem;
							}
						}

						&:nth-of-type(2){
							text-align: center;
						}
					}
				}
			}
		}
	}
	
	>div.flyer{
		.box1();
		margin-bottom: 4rem;

		> p{
			margin: 0 auto;
			width: 62%;

			> a{
				background: #1981dd;
				border-radius: .5rem;
				color: #fff;
				display: block;
				padding: 1rem 0;
				text-align: center;
				text-decoration: none;
			}
		}
	}

	>div.story{
		position: static;
		
		>div{
			.flex();
		
			>div:nth-of-type(1){
				width: 50%;
				max-width: 640px;
				margin: 0 auto;
				align-self: center;
				padding: 2rem 0 2rem 2rem;
				
				h3{
					margin: 0 0 1rem;
					padding: 0 0 1rem;
					font-size: @textM;
					font-weight: lighter;
					border-bottom: 3px double #fff;
					color: #fff;
				}
				
				p{
					color: #fff;
				}
			}
			
			>div:nth-of-type(2){
				width: 50%;
				max-width: 640px;
				position: relative;
				
				div{
					width: 100%;
					height: 0;
					padding-top: 66.7%;
					
					img{
						width: 100%;
						height: 100%;
						object-fit: cover;
						position: absolute;
						top: 50%;
						left: 50%;
						-webkit-transform: translate(-50%, -50%);
						transform: translate(-50%, -50%);
					}
				}
			}
		}
	}
	
	>div:nth-of-type(5){
		>div{
			>div:nth-of-type(1){
				h3{
					border-color: @colorText1;
					color: @colorText1;
				}
				
				p{
					color: @colorText1;
				}
			}
		}
	}
	
	>div:nth-of-type(3){background: url('../images/about/image2_background.jpg');}
	>div:nth-of-type(4){background: url('../images/about/image3_background.jpg');}
	>div:nth-of-type(5){background: url('../images/about/image4_background.jpg');}
}

/* ******************************
#process
****************************** */

#process{
	.box1();
	padding-top: 3rem;
	padding-bottom: 3rem;

	h2{
		text-align: center;
		margin-bottom: 3rem;
		font-size: @textL;
		font-weight: lighter;
		color: @colorText3;
	}
	
	>div{
		.flex();
		-webkit-justify-content: space-between;
		justify-content: space-between;
		
		>div{
			width: 24%;
			background: @color2;
			padding: 1rem;
			
			h3{
				text-align: center;
				margin: 0 0 0.5rem;
				font-size: 1rem;
				font-weight: lighter;
				line-height: 150%;
				color: @colorText1;
			}
			
			p:nth-of-type(1){
				width: 100%;
				height: 0;
				padding-top: 100%;
				position: relative;
				margin: 0 0 0.5rem;
					
				img{
					width: 100%;
					height: 100%;
					object-fit: cover;
					position: absolute;
					top: 50%;
					left: 50%;
					-webkit-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
				}
			}
			
			p:nth-of-type(2){
				font-size: @textS;
				line-height: 125%;
				color: @colorText1;
			}
		}
	}
}

/* ******************************
#order
****************************** */

#order{
	background: url('../images/order/background.jpg');
	padding: 3rem 0;
	position: relative;
	
	>div{
		.box1();
	
		h2{
			margin-bottom: 3rem;;
			border: 1px solid #000;
			padding: 0.5rem 0;
			text-align: center;
			margin-bottom: 3rem;
			font-size: @textL;
			font-weight: lighter;
			color: @colorText3;
		}
		
		>div:nth-of-type(1){
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr;
			grid-gap: 4rem;
			margin-bottom: 4rem;
			
			>div{
				position: relative;
				padding-bottom: 44px;
				
				p{
					&:nth-of-type(1){
						text-align: center;
						margin: 0 0 1rem;
					}
					
					&:nth-of-type(2){
						margin: 0 0 1rem;
						
						img{
							width: 100%;
						}
					}
				}
				
				iframe{
					position: absolute;
					left: 50%;
					margin-left: -100px;
				}
			}
		}
		
		>div:nth-of-type(2){
			
			p+p{
				margin-top: 1rem;
			}
			
			ul li{
				list-style-type: disc;
				margin-left: 1.5rem;

				&.stores{
					list-style-type: "\BB";
					margin-left: .75rem;
					padding-left: .75rem;
				}
			}
		}
	}
}

/* ******************************
#shop
****************************** */

#shop{
	.box1();
	padding-top: 3rem;
	padding-bottom: 3rem;
	
	h2{
		text-align: center;
		margin-bottom: 3rem;
		font-size: @textL;
		color: @color4;
		font-weight: lighter;
	}
	
	>div{
		margin-bottom: 3rem;

		input{
			display: none;
		}
				
		input#area1_ctrl:checked~ul li#area1_tab,
		input#area2_ctrl:checked~ul li#area2_tab,
		input#area3_ctrl:checked~ul li#area3_tab,
		input#area4_ctrl:checked~ul li#area4_tab,
		input#area5_ctrl:checked~ul li#area5_tab,
		input#area6_ctrl:checked~ul li#area6_tab,
		input#area7_ctrl:checked~ul li#area7_tab{
			background: @color4;
			color: #fff;
		}
			
		input#area1_ctrl:checked~div#area1,
		input#area2_ctrl:checked~div#area2,
		input#area3_ctrl:checked~div#area3,
		input#area4_ctrl:checked~div#area4,
		input#area5_ctrl:checked~div#area5,
		input#area6_ctrl:checked~div#area6,
		input#area7_ctrl:checked~div#area7{
			display: block;
		}
		
		ul{
			.flex();
			justify-content: center;
			border-bottom: 1px solid @color4;
			margin: 0 0 2rem;
			
			li{
				border-left: 1px solid @color4;
				border-right: 1px solid @color4;
				border-top: 1px solid @color4;
				margin: 0 0.25rem;
				width: 30%;
				text-align: center;
				margin-bottom: -1px;
				color: @color4;
				
				
				label{
					display: block;
					padding: 1rem 0;
					cursor: pointer;
				}
			}
		}
		
		>div{
			display: none;
			max-height: 15rem;
			overflow-y: scroll;
			
			h3{
				margin: 0 0 2rem;
				color: @color4;
				font-size: 1rem;
				font-weight: lighter;
			}
			
			p{
				margin: 0 0 2rem;
				color: @colorText1;
				font-size: 1rem;
			}
			
			table{
				width: 100%;
				border-top:1px dotted #ccc;
				border-collapse: collapse;
				table-layout: fixed;
				
				tr{
					td{
						border-bottom: 1px dotted #ccc;
						padding: 0.25rem 0;
						color: @colorText1;
					}
				}
				
				tr:nth-of-type(1){
					td:nth-of-type(1){
						width: 20%;
						border: none;
						vertical-align: top;
					}
					
					td:nth-of-type(2){
						width: 40%;
					}
					
					td:nth-of-type(3){
						width: 40%;
					}
				}
				
				tr:last-of-type{
					td{
						border-bottom: none;
					}
				}
				
			}
			
			table:last-of-type{
				border-bottom:1px dotted #ccc;
			}
		}
	}
	
	>p{
		text-align: center;
		font-size: @textL;
		color: @colorText1;
		
		span{
			margin-right: 1rem;
		}
	}
}

/* ******************************
#company
****************************** */

#company{
	background: #fafafa;
	padding-bottom: 3rem;
	
	>h2{
		padding: 3rem 0;
		text-align: center;
		font-size: @textL;
		font-weight: lighter;
		color: @colorText1;
	}
	
	>div:nth-of-type(1){
		.flex();
		margin-bottom: 3rem;
		
		p{
			width: 50%;
			
			img{
				width: 100%;
			}
		}
	}
	
	>div:nth-of-type(2){
		.box1();
		.flex();
		-webkit-justify-content: space-between;
		justify-content: space-between;
		border-bottom: 1px dotted #ccc;
		padding-bottom: 1.5rem;
		margin-bottom: 1.5rem;
		
		>div:nth-of-type(1){
			width: 68%;
			
			h3{
				margin-bottom: 1rem;
				font-size: 1rem;
				font-weight: lighter;
				color: @colorText1;
				
				&::before{
					content: '【';
				}
				
				&::after{
					content: '】';
				}
			}
			
			dl{
				dt{
					color: @colorText1;
					font-size: @textS;
				}
				
				dd{
					margin-bottom: 1rem;
					color: @colorText1;
				}
				
				dd:last-of-type{
					margin: 0;
				}
			}
		}
		
		>div:nth-of-type(2){
			width: 30%;
			
			p{
				margin: 0 0 0.5rem;
			
				img{
					width: 100%;
					height: auto;
				}
				
				span{
					display: block;
					margin: 0.5rem 0 0;
					font-size: @textS;
					line-height: 125%;
					color: @colorText1;
				}
			}
			
			/*
			div{
				.flex();
				-webkit-justify-content: space-between;
				justify-content: space-between;
				
				p{
					width: 48%;
				}
			}
			*/
		}
	}
		
	>h3{
		text-align: center;
		margin-bottom: 1.5rem;
		font-size: 1rem;
		font-weight: lighter;
		color: @colorText1;
		
		&::before{
			content: '【';
		}
		
		&::after{
			content: '】';
		}
	}
	
	>div:nth-of-type(3){
		.box1();
		.flex();
		-webkit-justify-content: space-between;
		justify-content: space-between;
		
		
		>div{
			width: 48%;
			background: #fff;
			padding: 1rem;
		}
		
		>div:nth-of-type(1){
			p{
				color: @colorText1;
			}
			
			h4{
				margin-top: 1rem;
				font-size: 1rem;
				font-weight: lighter;
				color: @colorText1;
				font-size: @textS;
				line-height: 150%;
			}
			
			ul{
				line-height: 125%;
				font-size: @textS;
				margin: 0 0 0.5rem;
				
				li{
					display: inline;
					color: @colorText1;
					
					&::after{
						content: '／';
					}
				}
				
				li:last-child::after{
					content: '';
				}
			}
			
			p:nth-of-type(2){
				border-top: 1px solid #ccc;
				padding-top: 0.5rem;
			}
			
			p:nth-of-type(3){
				line-height: 125%;
				font-size: @textS;
			}
		}
		
		>div:nth-of-type(2){
			p{
				color: @colorText1;
				
				img{
					width: 100%;
					height: auto;
					margin: 1rem 0 0;
				}
			}
		}
	}
	
	>dl{
		.box1();
		.flex_wrap();
		border-top: 1px dotted #ccc;
		padding-top: 1.5rem;
		margin-top: 1.5rem;
		margin-bottom: 3rem;
		
		dt{
			width: 20%;
			border-bottom: 1px solid #ccc;
			padding: 0.25rem 0;
			color: @colorText1;
		}
		
		dd{
			width: 80%;
			border-bottom: 1px solid #ccc;
			padding: 0.25rem 0;
			color: @colorText1;
		}
	}
	
	>div:nth-of-type(4){
		.box1(600px);
		background: #fff;
		padding: 1rem;
		
		h2{
			text-align: center;
			margin: 0 0 1rem;
			font-size: 1rem;
			font-weight: lighter;
			color: @colorText1;
		}
		
		div{
			.flex();
			
			p{
				width: 50%;
				text-align: center;
				color: @colorText1;
				line-height: 200%;
			}
			
			p:nth-of-type(1){
				border-right: 1px dotted #ccc;
			}
		}
	}
}

/* ******************************
#regal
****************************** */

#regal{
	padding: 3rem 0;

	> div {
		.box1();

		> div{
			max-height: 50vh;
			overflow-y: scroll;
			border: 1px solid #ccc;
			padding: 3rem;

			h3{
				margin-top: 1rem;
			}

			h4{
				margin-top: 1rem;
			}

			p{
				margin-top: 1rem;
			}

			ol{
				margin-top: 1rem;

				li{
					list-style-type: decimal;
					margin-left: 1.5rem;

				}
			}
		}
	}
}

/* ******************************
#footer
****************************** */

footer{
	padding: 3rem 0;
	
	address{
		text-align: center;
		color: @colorText1;
		font-style: normal;
	}
}



@media screen and (max-width:480px){
/* ****************************** start smartphone ****************************** */

html,body{
	font: 12px/150% 'source-han-serif-japanese', serif;
}

/* ******************************
header
****************************** */

header{
	padding-top: 0.5rem;
	
	>p::after{
		padding-bottom: 0.5rem;
	}
	
	>div{
		position: relative;
		width: 100%;
	}
}

/* ******************************
nav
****************************** */

nav{
	ul{
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		
		li{
			width: 100%;
			border: none;
			border-top: 1px solid #fff;
			
			a{
				position: relative;
				font-size: @textL;
				padding: 1rem 4%;
			}
			
			a::before{
				content: '';
			}
	
			a::after{
				position: absolute;
				top: 50%;
				right: 0.5rem;
				display: block;
				content: '';
				margin-top: -0.25rem;
				width: 0.5rem;
				height: 0.5rem;
				border-top: 1px solid @colorText1;
				border-right: 1px solid @colorText1;
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}
		}
	}
}

/* ******************************
#about
****************************** */

#about{
	>div.detail{
		.box2();
		display: block;
		padding-bottom: 4rem;
		
		>div{
			display: block;
			width: 100%;

			&+div{
				margin-top: 4rem;
			}

			> div:nth-of-type(1) > h2{
				text-align: center;
			}

			> div:nth-of-type(2) > p:nth-of-type(1) > img{
				margin: 0 auto 2rem;
				width: 62%;
			}
		}
	}
	
	>div.flyer{
		.box2();
		margin-bottom: 4rem;

		> p{
			width: 100%;
		}
	}

	>div.story{
		position: static;
		
		>div{
			display: block;
			
			>div:nth-of-type(1){
				width: 100%;
				max-width: auto;
				margin: 0;
				padding: 1.5rem 4%;
				
				h3{
					text-align: center;
				}
			}
			
			>div:nth-of-type(2){
				width: 100%;
				max-width: auto;
				margin: 0;
			}
		}
	}
}

/* ******************************
#process
****************************** */

#process{
	.box2();
	padding-top: 3rem;
	padding-bottom: 3rem;
	
	>div{
		.flex_wrap();
		
		>div{
			width: 49%;
			margin-bottom: 2%;
		}
	}
}

/* ******************************
#order
****************************** */

#order{
	padding: 1.5rem 0;
	
	>div{
		.box2();
		
		h2{
			margin-bottom: 1.5rem;
		}
		
		>div:nth-of-type(1){
			display: block;
			
			>div+div{
				margin-top: 2rem;
				border-top: 1px solid #000;
				padding-top: 2rem;
			}
		}
	}
}

/* ******************************
#shop
****************************** */

#shop{
	.box2();
	padding-top: 3rem;
	padding-bottom: 3rem;
	
	>div{
		ul{
			margin: 0 0 1rem;
			li{
				width: 30%;
				margin: 0 2px;
				
				label{
					padding: 0.5rem;
					font-size: @textS;
				}
			}
		}
		
		>div{
			h3{
				margin: 0 0 1rem;
			}
			
			table{
				tr{
					td{
						display: block;
						border: none;
					}
				}
				
				tr:nth-of-type(1){
					td:nth-of-type(1){
						width: 100%;
						background: @color4;
						color: #fff;
						padding-left: 1rem;
					}
					
					td:nth-of-type(2){
						width: 100%;
					}
					
					td:nth-of-type(3){
						width: 100%;
					}
				}
				
				tr:nth-of-type(n+2){
					td:nth-of-type(1){
						border-top: 1px dotted #ccc;
					}
				}
			}
		}
		
		>div::-webkit-scrollbar{
			background: #ccc;
			width: 0.5rem;
		}
		
		>div::-webkit-scrollbar-thumb{
			background: #aaa;
		}
	}
	
	p{
		font-size: @textM;
		
		span{
			display: block;
			margin: 0;
		}
	}
}

/* ******************************
#company
****************************** */

#company{
	>div:nth-of-type(2){
		.box2();
		display: block;
		margin-bottom: 1.5rem;
		padding-bottom: 1.5rem;
		
		>div:nth-of-type(1){
			width: 100%;
			
			h3{
				text-align: center;
			}
		}
		
		>div:nth-of-type(2){
			margin: 1rem 0 0;
			width: 100%;
			.flex_wrap();
			-webkit-justify-content: space-between;
			justify-content: space-between;
			
			>p{
				width: 49%;
			}
		}
	}
	
	>h3{
		padding: 0;
		margin: 0 0 1.5rem;
	}
	
	>div:nth-of-type(3){
		.box2();
		display: block;
		
		>div{
			width: 100%;
		}
		
		>div:nth-of-type(1){
			margin: 0 0 1rem;
		}
	}
	
	>div:nth-of-type(4){
		.box2();
		padding-top: 1rem;
		padding-bottom: 1rem;
		
		div{
			display: block;
			
			p{
				width: 100%;
			}
			
			p:nth-of-type(1){
				border-bottom: 1px dotted #ccc;
				border-right: none;
			}
		}
	}
}

/* ******************************
#company
****************************** */

#regal{
	> div {
		.box2();
	}
}

/* ****************************** end smartphone ****************************** */
}