@charset "UTF-8";
/* line up
--------------------------- */
.introductionArea{
	padding: 160px 0 80px;
}
.introductionInner{
	position: relative;
	display: flex;
	align-items: flex-start;
}
.luInfo{
	width: 530px;
}
.luInfoTxt h2{
	width:340px;
}
.luLead{
	font-size: 2.6rem;
	font-weight: 600;
	line-height: 4.8rem;
	letter-spacing: 0.3rem;
	color: #ba905d;
	margin: 40px 0 0 0;
}
.luTxt {
	line-height: 3.2rem;
	letter-spacing: 0.1rem;
	margin: 45px 0 0 0;
	font-weight: 600;
}
.iTQiAward {
	display: flex;
	align-items: center;
	margin: 40px 0 0 0;
}
.iTQiAward img{
	width: 64px;
	margin: 0 18px 0 0;
}
.iTQiAward p{
	line-height: 2.4rem;
	letter-spacing: 0.1rem;
	font-weight: 600;
}
.luInfoVariation{
	margin: 85px 0 0 0 ;
	padding: 16px 25px;
	background: #fff;
}
.luInfoVariation h3{
	font-size: 1.8rem;
	font-weight: 600;
	letter-spacing: 0.3rem;
	color:#ba905d;
	margin: 0 0 8px 0;
	padding: 0 0 8px 0;
	border-bottom: 1px solid #ba905d;
}
.luImg{
	width:230px;
	position: absolute;
	left: 665px;
	top:0;
}
a.btnA{
	color: #694133;
	padding: 19px;
	position: relative;
	width: 280px;
	height: 56px;
	letter-spacing: 0.3rem;
	transition: 0.3s;
	z-index: 0;
	display: block;
	text-align: left;
	border: 1px solid #694133;
}
a.btnA:hover {
	color: #fff;
}
a.btnA:before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	background: #694133;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
}
a.btnA:hover:before {
	transform-origin: left top;
	transform: scale(1, 1);
}
a.btnA:after{
	width: 7px;
	height: 7px;
	border-top: 1px solid #694133;
	border-right: 1px solid #694133;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	right: 14px;
	content: "";
	vertical-align: middle;
	top: 50%;
	margin-top: -5px;
}
a.btnA:hover:after{
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
@media screen and (max-width:767px){
	.luInfoMain{
		width: 40%;
		margin: 0 auto;
	}
	.luInfoTxt h2 {
		width: 68%;
		position: absolute;
		top: 17%;
		right: -2%;
	}
	.luTxt {
		font-size: 1.4rem;
		line-height: 2.4rem;
		margin: 40px 0 0;
		letter-spacing: 0;
	}
	.iTQiAward {
		margin: 20px 0 0 0;
		flex-direction: column;
	}
	.iTQiAward img {
		width: 20%;
		margin: 0;
	}
	.iTQiAward p{
		text-align: center;
		margin: 5px 0 0;
	}
	.luInfoVariation {
		margin: 30px 0 0 0;
		padding: 10px;
	}
	.luLead {
		font-size: 1.6rem;
		line-height: 2.8rem;
		text-align: center;
		margin: 30px 0 0 0;
	}
	.introductionArea {
		padding: 20px 20px 50px;
		background: url("../images/mainCtsBg.jpg") repeat-x;
		background-size: cover;
	}
	.luInfo {
		width: 100%;
		position: relative;
	}
	.luImg {
		width: 100%;
		position: static;
		left: 0;
	}
	a.btnA {
		width: 80%;
		margin: 50px auto 0;
	}
}
/* materialArea
--------------------------- */
.materialTit{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.materialTit:before{
	content: '';
	width: 100%;
	height: 1px;
	border-top:1px solid #ba905d;
	position: absolute;
	left: 0;
	top: 50%;
	z-index: -1;
}
.materialTit img{
	width: 264px;
	padding: 0 10px;
	background: #fff;
}
.materialinner{
	margin: 45px 0 0 0;
	position: relative;
}
.materialInfo ul{
	width: 630px;
	padding: 55px 40px;
}
.materialInfo ul li:not(:last-child){
	margin:0 0 20px 0;
}
.materialInfo ul li span{
	display: block;
}
.materialInfo ul li span:first-child{
	font-size: 2.2rem;
	line-height: 4.8rem;
	letter-spacing: 0.3rem;
}
.materialInfo ul li span:last-child{
	font-size: 1.4rem;
	line-height: 3.2rem;
	letter-spacing: 0.15rem;
}
.materialInfo a.btnA{
	margin: 25px 0 0 0;
}
.materialInfo .annotation {
	margin: 10px 0 0 0;
	font-size: 1.2rem;
}
.materialImg{
	position: absolute;
	right: 0;
	bottom: 0;
}
.materialImg a > div{
	position: relative;
	width: 484px;
}
.movieBtn{
	width: 80px;
	position: absolute;
	top:50%;
	left: 50%;
	margin: -40px 0 0 -40px;
}
.movieBtn p{
	text-align: center;
	color: #fff;
	font-size: 2rem;
	letter-spacing: 0.3rem;
}
a.btnA.sp {
	display: none;
}
/* materialArea カスタードのみ
--------------------------------- */
.materialInfo_flexBox {
	display: flex;
}
.materialInfo_flexBox div {
  width: 50%;
}
.materialInfoL {
	padding: 55px 40px;
	margin: 0;
	background-color:#FFFFFF;
}
.materialInfoL span:first-child{
	margin: 0 0 30px 0;
	font-size: 2.2rem;
	line-height: 4.8rem;
	letter-spacing: 0.3rem;
	display: block;
}
.materialInfoL span:last-child{
	font-size: 1.4rem;
	line-height: 3.2rem;
	letter-spacing: 0.15rem;
}
.materialInfoR ul{
  width: 100%;
	padding: 55px 40px;
	margin: 0;
}
.materialInfoR ul li:not(:last-child){
	margin:0 0 20px 0;
}
.materialInfoR ul li span{
	display: block;
}
.materialInfoR ul li span:first-child{
	font-size: 2.2rem;
	line-height: 4.8rem;
	letter-spacing: 0.3rem;
}
.materialInfoR ul li span:last-child{
	font-size: 1.4rem;
	line-height: 3.2rem;
	letter-spacing: 0.15rem;
}
.materialInfoR a.btnA{
	margin: 25px 0 0 0;
}
.materialInfoR .annotation {
	margin: 10px 0 0 0;
	font-size: 1.2rem;
}

@media screen and (max-width:767px){
	.materialArea {
		padding: 50px 20px;
	}
	.materialinner {
		margin: 30px 0 0 0;
		display: flex;
		flex-direction: column;
	}
	.materialInfoL {
		width: 100%;
		padding: 20px;
		margin: 0 0 30px 0;
		background-color:#FFFFFF;
	}
	.materialInfo ul {
		width: 100%;
		padding: 20px;
	}
	.materialInfo ul li span:first-child {
		line-height: 3rem;
	}
	.materialInfo ul li span:first-child {
		font-size: 2rem;
		line-height: 3rem;
	}
	.materialImg {
		position: relative;
	}
	.materialInfo ul li span:last-child {
		font-size: 1.4rem;
		line-height: 2.4rem;
	}
	.materialInfo a.btnA {
		margin: 30px auto 0;
	}
	.materialInfo .annotation {
		margin: 2% 0 0 0;
	}
	a.btnA.pc{
		display: none;
	}
	a.btnA.sp {
		display: block;
	}
	.materialImg a > div {
		width: 100%;
	}
	.materialTit img {
		width: 80%;
	}
/* materialInfoR カスタードのみ
--------------------------- */
	.materialInfo_flexBox {
	display:  block;
	}
.materialInfo_flexBox div {
  width:100%;
	}
	.materialInfoR ul {
		width: 100%;
		padding: 20px;
	}
	.materialInfoR ul li span:first-child {
		line-height: 3rem;
	}
	.materialInfoR ul li span:first-child {
		font-size: 2rem;
		line-height: 3rem;
	}
	.materialInfoR ul li span:last-child {
		font-size: 1.4rem;
		line-height: 2.4rem;
	}
	.materialInfoR a.btnA {
		margin: 30px auto 0;
	}
	.materialInfoR .annotation {
		margin: 2% 0 0 0;
	}
}
/* materialArea 抹茶
--------------------------------- */
.luMatcha .materialInfo ul{
	width: 630px;
	padding: 0px 0px;
}
.luMatcha .materialInfo_flexBox {
	display: flex;
}
.luMatcha .materialInfo_flexBox div {
  width: 50%;
}
.luMatcha .materialInfoL {
	padding: 55px 40px;
	margin: 0;
	background-color:#FFFFFF;
}
.luMatcha .materialInfoL span:first-child{
	margin: 0 0 30px 0;
	font-size: 2.2rem;
	line-height: 4.8rem;
	letter-spacing: 0.3rem;
	display: block;
}
.luMatcha .materialInfoL span:last-child{
	font-size: 1.4rem;
	line-height: 3.2rem;
	letter-spacing: 0.15rem;
}
.luMatcha .materialInfoR ul{
  width: 100%;
	padding: 55px 40px;
	margin: 0;
}
.luMatcha .materialInfoR ul li:not(:last-child){
	margin:0 0 20px 0;
}
.luMatcha .materialInfoR ul li span{
	display: block;
}
.luMatcha .materialInfoR ul li span:first-child{
	font-size: 2.2rem;
	line-height: 4.8rem;
	letter-spacing: 0.3rem;
}
.luMatcha .materialInfoR ul li span:last-child{
	font-size: 1.4rem;
	line-height: 3.2rem;
	letter-spacing: 0.15rem;
}
.luMatcha .matcha{
	color: #507142;
}	
@media screen and (max-width:767px){
	.luMatcha .materialInfo_flexBox {
	display:  block;
	}
	.luMatcha .materialInfo_flexBox div {
  		width:100%;
	}
	.luMatcha .materialInfo ul{
		width: 100%;
		padding: 20px 20px;
	}
	.luMatcha .materialInfoL {
		padding: 0px 0px;
	}
	.luMatcha .materialInfoL span:first-child{
		margin: 0 0 0px 0;	
	}
	.luMatcha .materialInfoR ul {
		width: 100%;
		padding: 20px;
	}
	
	.luMatcha .materialInfoR ul li span:first-child {
		line-height: 3rem;
	}
	.luMatcha .materialInfoR ul li span:first-child {
		font-size: 2rem;
		line-height: 3rem;
	}
	.luMatcha .materialInfoR ul li span:last-child {
		font-size: 1.4rem;
		line-height: 2.4rem;
	}
}



/* Award News
--------------------------- */
.awardArea.cts,
.newsArea.cts{
	background: #f6f4f1;
	position: relative;
	margin: 145px auto 0;
}
.awardArea .btnA,
.newsArea .btnA{
	margin: 50px auto 0;
}
.awardArea{
	padding: 150px 110px 110px;
}
.newsArea{
	padding: 130px 30px 100px;
}
.awardTit{
	width: 250px;
	position: absolute;
	top:-50px;
	left: 50%;
	margin: 0 0 0 -125px;
}
.bTit{
	color: #694133;
}
.yTit{
	color: #ba905d;
}
.subTit{
	letter-spacing: 0.3rem;
	position: relative;
	text-align: center;
	display: block;
	margin: 20px 0 0 0;
	font-weight: 600;
}
.subTit.bTit:before{
	content: '';
	width: 60px;
	height: 1px;
	position: absolute;
	top: -15px;
	left: 50%;
	margin: 0 0 0 -30px;
	border-top: 1px solid #694133;
}
.subTit.yTit:before{
	content: '';
	width: 60px;
	height: 1px;
	position: absolute;
	top: -15px;
	left: 50%;
	margin: 0 0 0 -30px;
	border-top: 1px solid #ba905d;
}
.ctsInner{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.txtArea p{
	color:#604337;
	font-weight: 600;
}
.txtArea .tit {
	font-size: 2.2rem;
	line-height: 4.8rem;
	letter-spacing: 0.1rem;
}
.newsArea .txtArea .tit {
	margin: -13px 0 10px 0;
}
.txtArea .txt {
	font-size: 1.6rem;
	line-height: 3.2rem;
	letter-spacing: 0.1rem;
}
.awardArea .ctsInner > img{
	width: 135px
}
.awardArea .txtArea > img {
	display: block;
	width: 65px;
	margin: 15px auto 20px;
}
.newsTit{
	width: 205px;
	position: absolute;
	top:-50px;
	left: 50%;
	margin: 0 0 0 -102px;
}
.newsArea .ctsInner > img{
	width: 35%
}
.newsArea .ctsInner > .txtArea{
	width: 61%
}
@media screen and (max-width:767px){
	.awardArea.cts{
		margin: 0;
	}
	.newsArea.cts{
		margin: 0;
		padding: 50px 20px;
	}
	.awardTit {
		width: 40%;
		position: static;
		margin: 0 auto;
	}
	.ctsInner {
		flex-direction: column;
	}
	.awardArea .ctsInner > img{
		width: 40%;
		margin: 20px auto;
	}
	.newsArea .ctsInner > img{
		width: 100%;
	}
	.awardArea {
		padding: 50px 20px;
	}
	.txtArea .tit {
		font-size: 2rem;
		line-height: 3rem;
	}
	.awardArea .txtArea > img {
		width: 20%;
		margin: 10px auto;
	}
	.txtArea .txt{
		font-size: 1.4rem;
		line-height: 2.4rem;
	}
	.newsTit {
		width: 40%;
		position: static;
		margin: 0 auto 30px;
	}
	.newsArea .txtArea .tit {
		margin: 20px 0 10px;
	}
	.newsArea .ctsInner > .txtArea{
		width: 100%;
	}

}
/* specArea
--------------------------- */
.specArea{
	background:url("../images/materialBg.png") no-repeat;
	background-size: cover;
	margin: 145px 0 0 0;
}
.specInner{
	padding: 105px 0 96px;
}
.specTit{
	width: 496px;
	margin: 0 auto 45px;
}

.specInner table {
	border-collapse: collapse;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	font-weight: 600;
	line-height: 2.4rem;
	letter-spacing: 0.2rem
}
.specInner table tr {
	background-color: #fff;
	border-bottom: 1px solid #a28c62;
	padding: 18px 32px;
}
.specInner table th{
	padding: 1em 10px 1em 1em;
	border-right: 1px solid #fff;
}
.specInner table tbody{
	text-align: left;
}
.specInner table tbody th{
	padding: 18px 32px;
	border-right: 1px solid #a28c62;
}
.specInner table thead td {
	padding: 1em 10px 1em 1em;
	border-right: 1px solid #fff;
}
.specInner table td {
	padding: 18px 32px;
	border-right: 1px solid #a28c62;
}
.specInner table .tableBorderConfig {
	border-left: 1px solid #a28c62;
}

.specInner table th:last-child,
.specInner table td:last-child{
	border-right: none;
}
.specInner table thead tr{
	background-color: #a48e63;
	color:#fff;
	text-align: center;
}
.specInner table:last-of-type{
	margin: 18px 0 9px 0;
}


tbody{
	color: #604337;
}

.number {
	width:160px;
	text-align: center;
}
.price {
	width:470px;
	text-align: left;
}
.price02 {
	width:270px;
	text-align: left;
}
.specInner table td span {
	transform: scale(3, 1);
	display: inline-block;
}
@media screen and (max-width:767px){

	.number {
	width:auto;
	}
	.price {
	width:auto;
}
	.price02 {
	width:auto;
}
	.specTit{
		width: 80%;
	}
	.specInner {
		padding: 50px 20px;
	}
	.specInner table.tableB {
		border: 0;
		width:100%
	}
	.specInner table.tableB th{
		background-color: #eee;
		display: block;
		border-right: none;
	}
	.specInner table{
		display: block;
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		letter-spacing: 0;
	}
	.specInner table tbody th,
	.specInner table thead td,
	.specInner table th,
	.specInner table tr,
	.specInner table td{
		padding: 5px 10px;
	}
	.tableTxt{
		font-size: 1.2rem;
		margin: 5px 0 0 0;
	}
}

/* Cremia
--------------------------- */
.luCremia .introductionArea:before{
	content: '';
	display: block;
	height: 1000px;
	width: 100%;
	min-width: 1100px;
	background: url("../images/mainCtsBg.jpg") repeat-x;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.luCremia .luLead{
	color: #ba905d;
}
.luCremia .materialInfo ul li span:first-child{
	color: #ba905d;
}
.luCremia .materialInfo ul{
	background:url("../images/materialBg.png") no-repeat;
	background-size: cover;
}
@media screen and (max-width:767px){
	.luCremia .introductionArea:before{
		display: none;
	}
}

/* Chocolat
--------------------------- */
.luChocolat .introductionArea:before{
	content: '';
	display: block;
	height: 1040px;
	width: 100%;
	min-width: 1100px;
	background: url("../images/mainCtsBg-Chocolat.jpg") repeat-x;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.luChocolat .luLead,
.luChocolat .luTxt,
.luChocolat .iTQiAward p,
.luChocolat .materialInfo ul li span:first-child,
.luChocolat .materialInfo ul li span:last-child{
	color: #fff;
}
.luChocolat .materialInfo ul{
	background:url("../images/materialBg-Chocolat.png") no-repeat;
	background-size: cover;
}
.luChocolat .txtArea .tit {
	font-size: 2rem;
	line-height: 4.4rem;
}
@media screen and (max-width:767px){
	.luChocolat .introductionArea {
		padding: 20px 20px 100px;
		background: url(../images/mainCtsBg-Chocolat.jpg) repeat-x;
		background-size: cover;
	}
	.luChocolat .introductionArea:before{
		display: none;
	}
	.luChocolat .txtArea .tit {
		font-size: 2rem;
		line-height: 3rem;
	}
}
/* Caramel
--------------------------- */
.luCaramel .introductionArea:before{
	content: '';
	display: block;
	height: 970px;
	width: 100%;
	min-width: 1100px;
	background: url("../images/mainCtsBg-Caramel.png") repeat-x;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.luCaramel .luLead,
.luCaramel .luTxt,
.luCaramel .iTQiAward p,
.luCaramel .materialInfo ul li span:first-child,
.luCaramel .materialInfo ul li span:last-child{
	color: #fff;
}
.luCaramel .materialInfo ul{
	background:url("../images/materialBg-Caramel.png") no-repeat;
	background-size: cover;
}
.luCaramel .specArea{
	margin: 145px 0 0 0;
}
@media screen and (max-width:767px){
	.luCaramel .introductionArea {
		padding: 20px 20px 100px;
		background: url(../images/mainCtsBg-Caramel.png) repeat-x;
		background-size: cover;
	}
	.luCaramel .introductionArea:before{
		display: none;
	}
	.luCaramel .specArea{
		margin: 0 0 0 0;
	}
}
/* Custard
--------------------------- */
.luCustard .introductionArea:before{
	content: '';
	display: block;
	height: 970px;
	width: 100%;
	min-width: 1100px;
	background: url("../images/mainCtsBg-Custard.png") repeat-x;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.luCustard .luLead,
.luCustard .luTxt,
.luCustard .iTQiAward p,
.luCustard .materialInfoR ul li span:first-child,
.luCustard .materialInfoR ul li span:last-child{
	color: #fff;
}
.luCustard .materialInfoR ul{
	background:url("../images/materialBg-Custard.png") no-repeat;
	background-size: cover;
}
.luCustard .specArea{
	margin: 145px 0 0 0;
}
@media screen and (max-width:767px){
	.luCustard .introductionArea {
		padding: 20px 20px 100px;
		background: url(../images/mainCtsBg-Custard.png) repeat-x;
		background-size: cover;
	}
	.luCustard .introductionArea:before{
		display: none;
	}
	.luCustard .specArea{
		margin: 0 0 0 0;
	}
}

/* Matcha
--------------------------- */
.luMatcha .introductionArea:before{
	content: '';
	display: block;
	height: 970px;
	width: 100%;
	min-width: 1100px;
	background: url("../images/mainCtsBg-Matcha.png") repeat-x;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.luMatcha .luLead,
.luMatcha .luTxt,
.luMatcha .iTQiAward p,
.luMatcha .materialInfoR ul li span:first-child,
.luMatcha .materialInfoR ul li span:last-child{
	color: #fff;
}

.luMatcha .materialInfoR ul{
	background:url("../images/materialBg-Custard.png") no-repeat;
	background-size: cover;
}--*/
.luMatcha .specArea{
	margin: 145px 0 0 0;
}
@media screen and (max-width:767px){
	.luMatcha .introductionArea {
		padding: 20px 20px 100px;
		background: url(../images/mainCtsBg-Matcha.png) repeat-x;
		background-size: cover;
	}
	.luMatcha .introductionArea:before{
		display: none;
	}
	.luMatcha .specArea{
		margin: 0 0 0 0;
	}
}

/* languedechat
--------------------------- */
.luLanguedechat .introductionArea:before{
	content: '';
	display: block;
	height: 970px;
	width: 100%;
	min-width: 1100px;
	background: url("../images/mainCtsBg.jpg") repeat-x;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.luLanguedechat .luLead{
	color: #ca925a;
}
.luLanguedechat .materialInfo ul li span:first-child{
	color: #ca925a;
}
.luLanguedechat .materialInfo ul{
	background:url("../images/materialBg.png") no-repeat;
	background-size: cover;
}
.luLanguedechat .luInfoTxt h2 {
	width: 380px;
}
.luLanguedechat .luTxt {
	margin: 15px 0 0 0;
	letter-spacing: 0;
}
.luLanguedechat .luImg {
	width: 490px;
	position: absolute;
	left: 575px;
	top: 0;
}
@media screen and (max-width:767px){
	.luLanguedechat .introductionArea:before{
		display: none;
	}
	.luLanguedechat .luInfoMain {
		width: 80%;
	}
	.luLanguedechat .luInfoTxt h2 {
		width: 65%;
		top: 15%;
	}
	.luLanguedechat .luTxt{
		margin:0 0 0 0;
	}
	.luLanguedechat .specInner table:first-of-type{
		display: block;
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	.luLanguedechat .specInner table:last-of-type{
		display: inline-table;
	}
}
/* movie
--------------------------- */
.onCts {
	margin: 0 0 -50px 0;
}
.noMovie img{
	width: 480px;
}
.noLink{
	pointer-events: none
}
@media screen and (max-width:767px){
	.onCts {
		margin: 0 0 0 0;
	}
}