@charset "utf-8";

.lineup{
	background:var(--color_bg);
	margin-top:10rem;
	padding:10rem 0;
	text-align: center;
}
.lineup .title{
	color:var(--color_an);
}
.lineup .price dt {
	font-size: 1.4rem;
	padding: 0.25rem 1rem;
	display: inline-block;
	color: #fff;
}
.lineup .price dt:not(:first-child) {
	margin-top: 1.5rem;
}
.lineup .price dd{
	font-size:1.6rem;
	margin-top:0.5rem;
}
.lineup .price dd span{
	font-size:1.4rem;
}
.lineup .btn_shopping {
	margin: 8rem auto 0;
}
.lineup .image {
    width: 50%;
    text-align: right;
}
.lineup img{
	margin:2rem;
}
.material .title {
	margin-top: 10rem;
}
.material .heading {
    font-size: 2.2rem;
	line-height: 1.5;
	margin-bottom: 1rem;
}
.material .wrap {
    padding: 3rem 2rem;
}
.material li{
	width: 49%;
	background-position: center;
	background-size: cover;
	color: #fff;
}
.material li:not(:first-child){
	margin-top: 2rem;
}
.material li.kinako{
	background-image:url(../img/bg_material_kinako_pc.jpg);
}
.material li.salt{
	background-image:url(../img/bg_material_salt_pc.jpg);
}
.material li.caramel{
	background-image:url(../img/bg_material_caramel_pc.jpg);
}
.material li.macha{
	background-image:url(../img/bg_material_macha_pc.jpg);
}
.material li.wasanbon{
	background-image:url(../img/bg_material_wasanbon_pc.jpg);
}
.material .kinako .wrap{
	background:rgba(105,90,54,0.8);
}
.material .salt .wrap{
	background:rgba(128,90,106,0.8);
}
.material .caramel .wrap{
	background:rgba(88,60,23,0.8);
}
.material .macha .wrap{
	background:rgba(62,74,35,0.8);
}
.material .wasanbon .wrap{
	background:rgb(103 103 103 / 80%);;
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
	.material li {
		width: 50%;
	}
}
@media screen and (max-width:479px) {
    /*SP*/
	.lineup{
		margin-top:5rem;
	}
	.lineup img,
	.lineup .price{
		width:100%;
	}
	.lineup img{
		margin:2rem 0;
	}
	.material .kinako .wrap{
		background:#695A36;
	}
	.material .salt .wrap{
		background:#8096B1;
	}
	.material .caramel .wrap{
		background:#AF782F;
	}
	.material .macha .wrap{
		background:#5E7036;
	}
	.material .wasanbon .wrap{
		background:#676767;
	}
	.material li {
		width: 90%;
		margin-top:: 3rem;
		margin-left: auto;
		margin-right: auto;
		line-height: 0;
	}
}


/*----------------------------------
	Main
----------------------------------*/
#main{
	margin-top:50px;
	background-image: url(../img/bg_main_pc.jpg);
	background-size:cover;
	background-position: center;
	position: relative;
	text-align: center;
	padding: 5rem 0;
}
#main:before{
	content:"";
	display: inline-block;
	background-color: #000;
	position:absolute;
	top: 0;
    left: 0;
	width:100%;
	height:100%;
	opacity: 0.3;
}
#main h1{
	font-size:3rem;
	color: #fff;
	width: 100%;
	position:relative;
	z-index: 1;
	font-weight: 500;
	letter-spacing: 0.5rem;
}
#main .category{
	width: 100%;
	color: #fff;
	position:relative;
	z-index: 1;
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	#main{
		/* margin-top:0; */
		background-image: url(../img/bg_main_sp.jpg);
	}
}


/*----------------------------------
	Kyo-france
----------------------------------*/
#kyo-france{
	margin-top: 10rem;
}
/* #kyo-france > .flex{
	justify-content: space-between;
} */
#kyo-france .grid{
	grid-template:
	"image logo" auto
	"image text" auto/
	50% 45%;
    row-gap: 3rem;
    column-gap: 5%;
}
#kyo-france .image{
	width:100%;
	grid-area: image;
}
#kyo-france .logo{
	width:100%;
	justify-content: center;
	grid-area: logo;
}
#kyo-france .logo img{
	width:246px;
	margin-left: 10%;
}
#kyo-france .text{
	width:100%;
	grid-area: text;
	line-height: 2;
}
#kyo-france .text a{
	display: inline-block;
	color: #fff;
	background: var(--color_chaya);
	border: 1px solid var(--color_chaya);
	margin-top: 20px;
	padding: 10px 35px;
	font-size: 1.8rem;
	letter-spacing: 0.1rem;
	border-radius: 8px;
	transition: 0.3s;
}
#kyo-france .text a:hover {
	background: transparent;
	color: var(--color_chaya);
	transition: 0.3s;
}
#kyo-france .supervision{
	background:var(--color_bg);
	margin-top:10rem;
	padding-bottom: 5rem;
}
#kyo-france .supervision .title{
	background-image:url(../img/bg_kyo-france_supervision.jpg);
	background-size:cover;
	background-position: center;
	position:relative;
	padding:5rem 0 25rem;
}
#kyo-france .supervision .title:before{
	content:"";
	display: inline-block;
	background-color: #000;
	position:absolute;
	top: 0;
    left: 0;
	width:100%;
	height:100%;
	opacity: 0.3;
}
#kyo-france .supervision .title h2{
	color:#fff;
	z-index: 2;
	position: relative;
}
#kyo-france .supervision .person{
	margin-top:-25rem;
	z-index: 1;
	position:relative;
}
#kyo-france .supervision .pascal,
#kyo-france .supervision .suda{
	width:50%;
}
#kyo-france .supervision .person .wrap{
	width:80%;
	margin:3rem auto 0;
}
#kyo-france .supervision .person .pascal .wrap{
	justify-content: flex-end;
}
#kyo-france .supervision .country{
	font-weight: bold;
	font-size: 1.4rem;
	padding:0.3rem 1rem;
	color:#fff;
	display: inline-block;
}
#kyo-france .supervision .pascal .country{
	background:#E3941C;
}
#kyo-france .supervision .suda .country{
	background:#5E7036;
}
#kyo-france .supervision .name{
	font-size:2rem;
	margin-top:1rem;
	width:100%;
	position: relative;
}
#kyo-france .supervision .name span{
	font-size:1.6rem;
}
#kyo-france .supervision .pascal .name{
	text-align: right;
}
#kyo-france .supervision .pascal .name:before{
	content:"";
	background:url(../img/img_sign_morines_pc.png) no-repeat;
	background-size: contain;
	display: inline-block;
	width:113px;
	height:74px;
	position:absolute;
	left:0;
}
#kyo-france .supervision .suda .name:before{
	content:"";
	background:url(../img/img_sign_suda_pc.png) no-repeat;
	background-size: contain;
	display: inline-block;
	width:72px;
	height:71px;
	position:absolute;
	right:0;
}
#kyo-france .supervision .text{
	margin-top:2rem;
	border-top:1px solid #000;
	padding-top:2rem;
}
#kyo-france .supervision .cross{
	justify-content: center;
	align-items: center;
	position: absolute;
	left:50%;
	bottom:15%;
}
#kyo-france .supervision .cross:before,
#kyo-france .supervision .cross::after{
	content:"";
	display: inline-block;
	background:#000;
	width:1px;
	height:30px;
}
#kyo-france .supervision .cross:before{
	transform:rotate(135deg);
}
#kyo-france .supervision .cross::after{
	transform:rotate(-135deg);
}
#kyo-france .material{
	margin-top:10rem;
}
#kyo-france .material > .flex{
    align-items: center;
}
#kyo-france .material img,
#kyo-france .material .text{
	width:50%;
}
#kyo-france .material .text{
	color:#fff;
	padding: 0 4rem;
}
#kyo-france .material .butter{
	background:#E29F3A;
}
#kyo-france .material .macha{
	background:#5E7036;
}
#kyo-france .material .macha img{
	order:2;
}
#kyo-france .material .macha .text{
	order:1;
}
#kyo-france .lineup img{
	width:364px;
}
#kyo-france .lineup .price{
	justify-content: center;
	align-items: flex-start;
}
#kyo-france .lineup .price dl{
	width:auto;
	text-align: left;
	margin:0 3rem;
}
#kyo-france .lineup .price dt{
	background:var(--color_an);
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
	#kyo-france .material .text {
		/* padding: 0 2rem; */
	}
	#kyo-france .material.box{
		width:100%;
	}
}
@media screen and (max-width:479px) {
    /*SP*/
	#kyo-france .grid{
		grid-template:
		"logo" auto
		"image" auto
		"text" auto/
		100%;
		gap:5%;
	}
	#kyo-france .text a{
		width: 100%;
		text-align: center;
		margin-top: 2rem;
		padding: 1rem 0;
		font-size: 5vw;
		letter-spacing: 0.5vw;
		border-radius: 3vw;
	}
	#kyo-france .supervision {
		margin-top:15rem;
	}
	#kyo-france .supervision .title {
		padding: 5rem 0 5rem;
		margin-bottom:0;
	}
	#kyo-france .supervision .person {
		margin-top: 0rem;
		width:100%;
		max-width: 100%;
	}
	#kyo-france .supervision .pascal,
	#kyo-france .supervision .suda {
		width: 100%;
	}
	#kyo-france .supervision .suda {
		margin-top:5rem;
	}
	#kyo-france .supervision .person .wrap {
		width: 90%;
		margin: 3rem auto 0;
	}
	#kyo-france .supervision .person .pascal .wrap {
		justify-content: flex-start;
	}
	#kyo-france .supervision .pascal .name {
		text-align: left;
	}
	#kyo-france .supervision .pascal .name:before,
	#kyo-france .supervision .suda .name:before {
		content: none;
	}
	#kyo-france .supervision .cross:before, 
	#kyo-france .supervision .cross::after {
		content: none;
	}
	#kyo-france .material img, 
	#kyo-france .material .text {
		width: 100%;
	}
	#kyo-france .material .text {
		padding: 3rem 2rem;
	}
	#kyo-france .material .macha img{
		order:1;
	}
	#kyo-france .material .macha .text{
		order:2;
	}
	#kyo-france .material .macha {
		margin-top:3rem;
	}
	#kyo-france .lineup .price {
		justify-content: flex-start;
	}
	#kyo-france .lineup .price dl:not(:first-child){
		margin-top: 1.5rem;
	}
	#kyo-france .lineup .image,
	#kyo-france .lineup img,
	#kyo-france .lineup .price {
		width: 100%;
	}

}

/*----------------------------------
	Kyo-japone
----------------------------------*/
#kyo-japone{
	margin-top:20rem;
}
#kyo-japone .grid{
	grid-template:
	"image logo" 30%
	"image text" 70%/
	50% 45%;
    row-gap: 3rem;
    column-gap: 5%;
}
#kyo-japone .image{
	width:100%;
	grid-area: image;
}
#kyo-japone .logo{
	width:100%;
	justify-content: center;
	grid-area: logo;
}
#kyo-japone .logo img{
	width:391px;
	margin-left: 0;
}
#kyo-japone .text{
	width:100%;
	grid-area: text;
	line-height: 2;
}
/* #kyo-japone .title{
	width:485px;
	margin: 15rem auto 0;
}
#kyo-japone .lead{
	text-align: center;
	line-height: 2;
	margin-top: 5rem;
} */
#kyo-japone .material .title{
	margin-top:10rem;
}
#kyo-japone .material .flex{
	justify-content: space-between;
	align-items: stretch;
}
#kyo-japone .material li{
	width:49%;
	background-position: center;
	background-size: cover;
	color:#fff;
	margin-top:2rem;
}

#kyo-japone .material .wrap{
	width:50%;
	/* height: 100%; */
	height: 320px;
	margin-left: 50%;
	padding:3rem 2rem;
}
#kyo-japone .material .heading{
	font-size:1.7rem;
	font-weight: bold;
	text-align: center;
}
#kyo-japone .material .text{
	margin-top:1rem;
}
#kyo-japone .lineup .image{
	width:50%;
}
#kyo-japone .lineup img{
	width:370px;
}
#kyo-japone .lineup .price{
	width:50%;
	justify-content: center;
}
#kyo-japone .lineup .price dl{
	width:auto;
	text-align: left;
	margin:0 3rem;
}
#kyo-japone .lineup .price dt{
	background:var(--color_chaya);
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
	#kyo-japone .logo img {
		width: 100%;
	}
	#kyo-japone .material.box{
		width:100%;
	}
	#kyo-japone .material li {
		width: 50%;
	}
	#kyo-japone .material .wrap {
		height: 370px;
	}
	#kyo-japone .lineup img {
		width: 100%;
	}
}
@media screen and (max-width:479px) {
    /*SP*/
	#kyo-japone .grid{
		grid-template:
		"logo" auto
		"image" auto
		"text" auto/
		100%;
		gap: 5%;
	}
	#kyo-japone .logo img {
		width: 100%;
	}
	#kyo-japone .material {
		width:100%;
		max-width: 100%;
	}
	#kyo-japone .material .title {
		margin-top: 15rem;
	}
	#kyo-japone .material .wrap {
		width: 100%;
		margin-left: 0;
		height:auto;
	}
	#kyo-japone .material li {
		width: 90%;
		margin-top: 3rem;
		margin-left: auto;
		margin-right: auto;
	}
/* 
	#kyo-japone .lineup {
		margin-top:0;
	} */
	#kyo-japone .lineup .image,
	#kyo-japone .lineup img,
	#kyo-japone .lineup .price {
		width: 100%;
	}
}

/*----------------------------------
	Kyo-tane
----------------------------------*/
#kyo-tane{
	margin-top:20rem;
}
#kyo-tane .grid{
    grid-template:
        "image logo" 50%
        "image text" 45%/ 
		50% 45%;
    row-gap: 3rem;
    column-gap: 5%;
}
#kyo-tane .image{
	width:100%;
	grid-area: image;
}
#kyo-tane .logo{
	width:100%;
	justify-content: center;
	grid-area: logo;
}
#kyo-tane .logo img{
	width: auto;
    margin-left: 0;
    height: 100%;
}
#kyo-tane .text{
	width:100%;
	grid-area: text;
	line-height: 2;
}
/* #kyo-tane .title{
	width:485px;
	margin: 15rem auto 0;
}
#kyo-tane .lead{
	text-align: center;
	line-height: 2;
	margin-top: 5rem;
} */
#kyo-tane .material .title{
	margin-top:10rem;
}
#kyo-tane .material .flex{
	justify-content: space-between;
	align-items: stretch;
}
#kyo-tane .material li{
	background-position: center;
	background-size: cover;
	color:#fff;
	margin-top:2rem;
}
#kyo-tane .material .wrap{
	width:50%;
	/* height: 100%; */
	height: 320px;
	margin-left: 50%;
	padding:3rem 2rem;
}

#kyo-tane .material .heading{
	font-size:1.7rem;
	font-weight: bold;
	text-align: center;
}
#kyo-tane .material .text{
	margin-top:1rem;
}
#kyo-tane .lineup .image{
	width:50%;
}
#kyo-tane .lineup img{
	width:155px;
}
#kyo-tane .lineup .price{
	width:50%;
	justify-content: center;
}
#kyo-tane .lineup .price dl{
	width:auto;
	text-align: left;
	margin:0 3rem;
}
#kyo-tane .lineup .price dt{
	background:var(--color_tane);
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
	#kyo-tane .logo img {
		width: 100%;
	}
	#kyo-tane .material.box{
		width:100%;
	}

	#kyo-tane .material .wrap {
		height: 370px;
	}
	#kyo-tane .lineup img {
		width: 100%;
	}
}
@media screen and (max-width:479px) {
    /*SP*/
	#kyo-tane .grid{
		grid-template:
		"logo" auto
		"image" auto
		"text" auto/
		100%;
		gap:5%;
	}
	#kyo-tane .logo img {
		width: 80%;
	}
	#kyo-tane .material {
		width:100%;
		max-width: 100%;
	}
	#kyo-tane .material .title {
		margin-top: 15rem;
	}
	#kyo-tane .material .wrap {
		width: 100%;
		margin-left: 0;
		height:auto;
	}
	#kyo-tane .lineup .image{
		width:100%;
		text-align: center;
	}
	#kyo-tane .lineup .image img{
		width:50%;
		margin-left: 10%;
	}
	#kyo-tane .lineup .price{
		width:100%;
		justify-content: center;
	}
}


/*----------------------------------
	klv
----------------------------------*/
#klv{
	margin-top: 10rem;
}
/* #klv > .flex{
	justify-content: space-between;
} */
#klv .grid{
	grid-template:
	"image logo" auto
	"image text" auto/
	50% 45%;
    row-gap: 3rem;
    column-gap: 5%;
}
#klv .image{
	width:100%;
	grid-area: image;
}
#klv .logo{
	width:100%;
	justify-content: center;
	grid-area: logo;
}
#klv .logo img{
	width:246px;
	margin-left: 10%;
}
#klv .text{
	width:100%;
	grid-area: text;
	line-height: 2;
}
#klv .text a{
	display: inline-block;
	color: #fff;
	background: var(--color_chaya);
	border: 1px solid var(--color_chaya);
	margin-top: 20px;
	padding: 10px 35px;
	font-size: 1.8rem;
	letter-spacing: 0.1rem;
	border-radius: 8px;
	transition: 0.3s;
}
#klv .text a:hover {
	background: transparent;
	color: var(--color_chaya);
	transition: 0.3s;
}
#klv .supervision{
	background:var(--color_bg);
	margin-top:10rem;
	padding-bottom: 5rem;


}
#klv .supervision .title{
	background-image:url(../img/bg_klv_supervision.jpg);
	background-size:cover;
	background-position: center;
	position:relative;
	padding:5rem 0 25rem;
}
#klv .supervision .title:before{
	content:"";
	display: inline-block;
	background-color: #000;
	position:absolute;
	top: 0;
    left: 0;
	width:100%;
	height:100%;
	opacity: 0.3;
}
#klv .supervision .title h2{
	color:#fff;
	z-index: 2;
	position: relative;
}
#klv .supervision .person{
	margin-top:-25rem;
	z-index: 1;
	position:relative;
	justify-content:  center;
	
}
#klv .supervision .pascal,
#klv .supervision .suda{
	width:50%;
}
#klv .supervision .person .wrap{
	width:80%;
	margin:3rem auto 0;
	
	
}
#klv .supervision .person .pascal .wrap{
	justify-content:  flex-end;
}
#klv .supervision .country{
	font-weight: bold;
	font-size: 1.4rem;
	padding:0.3rem 1rem;
	color:#fff;
	display: inline-block;
	
}
#klv .supervision .pascal .country{
	background:#E3941C;
}
#klv .supervision .suda .country{
	background:#5E7036;
}
#klv .supervision .name{
	font-size:2rem;
	margin-top:1rem;
	width:100%;
	position: relative;
}
#klv .supervision .name span{
	font-size:1.6rem;
}
#klv .supervision .pascal .name{
	text-align: right;
}
#klv .supervision .pascal .name:before{
	content:"";
	background:url(../img/img_sign_morines_pc.png) no-repeat;
	background-size: contain;
	display: inline-block;
	width:113px;
	height:74px;
	position:absolute;
	left:0;
}
#klv .supervision .suda .name:before{
	content:"";
	background:url(../img/img_sign_suda_pc.png) no-repeat;
	background-size: contain;
	display: inline-block;
	width:72px;
	height:71px;
	position:absolute;
	right:0;
}
#klv .supervision .text{
	margin-top:2rem;
	border-top:1px solid #000;
	padding-top:2rem;
}
#klv .supervision .cross{
	justify-content: center;
	align-items: center;
	position: absolute;
	left:50%;
	bottom:15%;
}
#klv .supervision .cross:before,
#klv .supervision .cross::after{
	content:"";
	display: inline-block;
	background:#000;
	width:1px;
	height:30px;
}
#klv .supervision .cross:before{
	transform:rotate(135deg);
}
#klv .supervision .cross::after{
	transform:rotate(-135deg);
}
#klv .material{
	margin-top:10rem;
}
#klv .material > .flex{
    align-items: center;
}
#klv .material img,
#klv .material .text{
	width:50%;
}
#klv .material .text{
	color:#fff;
	padding: 0 4rem;
}
#klv .material .butter{
	background:#52b325;
}
#klv .material .macha{
	background:#5E7036;
}
#klv .material .macha img{
	order:2;
}
#klv .material .macha .text{
	order:1;
}
#klv .lineup img{
	width:364px;
}
#klv .lineup .price{
	justify-content: center;
	align-items: flex-start;
}
#klv .lineup .price dl{
	width:auto;
	text-align: left;
	margin:0 3rem;
}
#klv .lineup .price dt{
	background:var(--color_an);
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
	#klv .material .text {
		/* padding: 0 2rem; */
	}
	#klv .material.box{
		width:100%;
	}
}
@media screen and (max-width:479px) {
    /*SP*/
	#klv .grid{
		grid-template:
		"logo" auto
		"image" auto
		"text" auto/
		100%;
		gap:5%;
	}
	#klv .text a{
		width: 100%;
		text-align: center;
		margin-top: 2rem;
		padding: 1rem 0;
		font-size: 5vw;
		letter-spacing: 0.5vw;
		border-radius: 3vw;
	}
	#klv .supervision {
		margin-top:15rem;
	}
	#klv .supervision .title {
		padding: 5rem 0 5rem;
		margin-bottom:0;
	}
	#klv .supervision .person {
		margin-top: 0rem;
		width:100%;
		max-width: 100%;
	}
	#klv .supervision .pascal,
	#klv .supervision .suda {
		width: 100%;
	}
	#klv .supervision .suda {
		margin-top:5rem;
	}
	#klv .supervision .person .wrap {
		width: 90%;
		margin: 3rem auto 0;
	}
	#klv .supervision .person .pascal .wrap {
		justify-content: flex-start;
	}
	#klv .supervision .pascal .name {
		text-align: left;
	}
	#klv .supervision .pascal .name:before,
	#klv .supervision .suda .name:before {
		content: none;
	}
	#klv .supervision .cross:before, 
	#klv .supervision .cross::after {
		content: none;
	}
	#klv .material img, 
	#klv .material .text {
		width: 100%;
	}
	#klv .material .text {
		padding: 3rem 2rem;
	}
	#klv .material .macha img{
		order:1;
	}
	#klv .material .macha .text{
		order:2;
	}
	#klv .material .macha {
		margin-top:3rem;
	}
	#klv .lineup .price {
		justify-content: flex-start;
	}
	#klv .lineup .price dl:not(:first-child){
		margin-top: 1.5rem;
	}
	#klv .lineup .image,
	#klv .lineup img,
	#klv .lineup .price {
		width: 100%;
	}

}



/*----------------------------------
	Bnr
----------------------------------*/
#bnr{
	margin-top:10rem;
	text-align: center;
}
#bnr a{
	width:40%;
	display: inline-block;
}
@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	#bnr a{
		width:100%;
		display: inline-block;
	}
}


/*----------------------------------
	Sample
----------------------------------*/

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
}