@charset "utf-8";
/* CSS Document */
/*** base **************************/ 	
:root{
--txt12: 0.75rem;		
--txt14: 0.875rem;	
--txt15: 0.938rem;	
--txt16: 1rem;
--txt17: 1.063rem;
--txt18: 1.125rem;
--txt19: 1.188rem;	
--txt20: 1.25rem;
--txt22: 1.375rem;
--txt23: 1.438rem;	
--txt24: 1.5rem;
--txt25: 1.563rem;	
--txt26: 1.625rem;
--txt27: 1.688rem;
--txt28: 1.75rem;
--txt30: 1.875rem;	
--txt32: 2rem;	
--txt35: 2.188rem;
--txt39: 2.438rem;	
--txt50: 3.125rem;
--container:1080px;	
	}
.content__wrapper__all{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;	
	}
.font_notosans_bold{
	font-weight: 700;
	font-family: "Noto Sans JP", sans-serif;
	}
.font_notosans_medium{
	font-weight: 500;
	font-family: "Noto Sans JP", sans-serif;
	}	
	
.content-width-1080{
	margin-inline: auto;
	width:min(var(--container), 100%);
	}
.txt__orange{
	color:#E87D12;
	}
	.txt__pink{
	color:#F83662;	
	}
.align__center {
    margin-inline: auto;
    display: flex;
    justify-content: center;
}
.link_pink_border{
	color:#F12375;
	border-bottom:solid 1px #F12375;
}
.nowrap{white-space: nowrap;}

@media (hover: hover) and (pointer: fine) {
a:hover{
	opacity: 0.6;
	text-decoration: none;}	
}

@media screen and (min-width: 811px) {
/*** PC **************************/ 
html {
    scroll-padding-top: 90px;
	scroll-behavior: smooth;  
	}

.txt_12{font-size: var(--txt12, 0.75rem);	}	
.txt_14{font-size: var(--txt14, 0.875rem);	}
.txt_15{font-size: var(--txt15, 0.938rem);	}
.txt_16{font-size: var(--txt16, 1rem);	}	
.txt_17{font-size: var(--txt17, 1.063rem);	}
.txt_18{font-size: var(--txt18, 1.125rem);	}
.txt_19{font-size: var(--txt19, 1.188rem);	}	
.txt_20{font-size: var(--txt20, 1.25rem);	}
.txt_23{font-size: var(--txt23, 1.438rem);	}	
.txt_24{font-size: var(--txt24, 1.5rem);	}
.txt_25{font-size: var(--txt25, 1.563rem);	}
.txt_27{font-size: var(--txt27, 1.688rem);	}
.txt_28{font-size: var(--txt28, 1.75rem);	}
.txt_30{font-size: var(--txt30, 1.875rem);	}		
.txt_32{font-size: var(--txt32, 2rem);	}	
.txt_35{font-size: var(--txt35, 2.188rem);	}	
.txt_40{font-size: var(--txt40, 2.5rem);	}
.txt_50{font-size: var(--txt50, 3.125rem);	}	
.txt_80{font-size: var(--txt80, 5rem);	}		

.pc_none{display: none;}
.only_sp{display: none;}	
.br_sp{display:none;}		
/**** layout *********************/
	
@scope (#content__kv) {
  /* #content__kv クラスを持つ要素の内部のみ適用 */
	.title_product{
	font-size: var(--txt22, 1.375rem);
	font-weight: 600;	
	text-align: center;
	line-height: 1.5;
	margin-bottom:4rem;	
	color:#362D2D;
	margin-top:8px;	
	}
	h1{
		padding:0;
		& img{
			width:100%;
			height:auto;
		}
	}
	
}

/*** content__recommended **************************/	
#content__recommended{
		background-color:#FBF7EF;
	}
.content__recommended__middle{
   background-image:url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/bg_recommended_lead.jpg);
	background-repeat:no-repeat;
	background-position: center top;
	padding-top:6rem;
	padding-left:3.938rem;
	margin-top: 1.944rem;
	background-size: cover;
	aspect-ratio: 1059 / 328; 
	}
	.recommended__recommended__top{
	background-image:url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/bg_recommended.png);
	background-repeat: no-repeat;
	background-position:right top;	
	display: grid;
    grid-template-columns: 33.5rem 1fr;
	padding-left:25px;
	}

ul.list__recommended{
	margin-top: 1.888rem;	
	}
	ul.list__recommended li{
	background-color:#fff;
	padding:0.75rem 1.781rem 0.75rem 5.844rem;
	box-shadow: 0px 3px 6px 0px #ddd;
	position:relative;
	font-weight:500;
	}
	ul.list__recommended li:not(:last-child){
	margin-bottom: 2.125rem;	
	}
	ul.list__recommended li:before{
	position:absolute;
	width:39px;
	height:40px;
	content:url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_check.png);
	top: 50%;
    left: 25.8px;
    transform: translateY(-50%); 
	}
.content__recommended__middle p{
   line-height: 36px;
	letter-spacing: 1.8px;
	font-size: var(--txt23, 1.438rem);
	font-weight: 600;
	}
ul.list__grid__img {
    display: grid;
    gap: 27px;
    grid-template-columns: repeat(4, 1fr);
    padding-block: 2.5rem;
    padding-inline: 25px;
}
@scope (#content__recommended) {
  /* #content__recommended の内部のみ適用 */
	.content__inner__left{
	width:33.5rem;	
	}
	h2{
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;	
	font-size: var(--txt80, 5rem);
	font-weight: 600;
	margin-top:2.875rem;	
	}
	span.title__inner__txtl{
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;	
	font-size: var(--txt80, 5rem);
	font-weight: 600;
	line-height: 0.375;
	}
	span.title__inner__txts{
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;	
	font-size: var(--txt40, 2.5rem);
	font-weight: 600;
	}
	
}
/*** content__topic__lead **************************/
.content__topic__lead {
    background-color: #FCFBF9;
}	
.area__pruduct_info {
    padding-inline: 1.313rem;
    padding-top: 0.75rem;
    padding-bottom: 3.438rem;
}
p.txt__notice__right {
    font-size: 15px;
    text-align: right;
    padding-inline: 1.313rem;
}	
.area__accepting {
    text-align: center;
    font-weight: 700;
    font-size: var(--txt28, 1.75rem);
    color: #fff;
    background-color: #F24B6D;
    padding-block: 0.5rem;
	margin-bottom: 1.25rem;
}
.advance__reservation__info {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: max-content 1fr;
    gap: 19px 85px;
}
.advance__reservation__img {
    grid-row: span 3 / span 3;
}
.advance__ingredients {
    grid-column-start: 2;
}
.price__wrapper {
    grid-column-start: 2;
    grid-row-start: 3;
	display: flex;
    align-items: center;
}
@scope (.content__topic__lead) {
  /* .content__topic__leadの内部のみ適用 */
	.txt__lead{
	font-size: var(--txt20, 1.375rem);
    font-weight: 500;
    line-height: 2;
    padding-inline: 1.313rem;
    letter-spacing: 1.5px;
	padding-top: 1.25rem;	
	}
	.txt__note{
	font-size: var(--txt22, 1.25rem);
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;	
	font-weight: 700;
	}
	h2 {
    font-weight: 700;
    font-size: 2.188rem;
	}
	dl.dl__ingredients div {
    display: flex;
	align-items: center;
    margin-bottom: 1.75rem;	
	}
	dt {
    font-weight: normal;
    font-size: var(--txt20, 1.25rem);
    color: #000;
    display: inline-block;
    width: calc(1.25rem * 4);
    margin-right: 2.5rem;
	text-align: justify;
  	text-align-last: justify;	
	}
	dd {
    flex: 1;
}
	.price__wrapper{
		& .price__txt{
			font-size: var(--txt22, 1.375rem);
    		margin-right: 1.188rem;
		}
		& .price__cocoa{
			font-size: var(--txt50, 3.125rem);
			font-weight: 700;
			margin-right: 0.75rem;
		}
		& .price__yen{
			font-size: var(--txt20, 1.25rem);
			font-weight: 700;
		}
	}
	.btn__price__reservation{
		    background-color: #44674C;
			color: #fff;
			font-size: var(--txt22, 1.375rem);
			font-weight: 700;
			padding: 0.625rem 2.25rem 0.625rem 1.25rem;
			border-radius: 15px;
		    position: relative;
		    width: min(514px, 90%);
            text-align: center;
		    margin-top: 28px;
		
	}
	.btn__price__reservation::before{
		    position: absolute;
			content: '';
			width: 10px;
			height: 10px;
			border: 0;
			border-top: solid 2px #FFF;
			border-right: solid 2px #FFF;
			transform: rotate(45deg);
			position: absolute;
			top: 0;
			right: 22px;
			bottom: 0;
			margin: auto;     
	}
	}
/*** content__next__one **************************/	
	.next__one__shaker{
	background-image:url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/bg_next_one.png);
	background-repeat: no-repeat;
	background-position:left bottom;	
	padding-left:3.625rem;
	padding-bottom: 48px;	
	}
	.shaker__detail__wrapper {
    display: flex;
    gap: 0 5.313rem;
    margin-top: 2.75rem;
	}
	.shaker__img {
    padding-left: 4.188rem;
	}
	.cocoa__tasting {
    border: solid 1px #008DCC;
    border-radius: 48px;
    background-color: #fff;
    padding: 30px 47px;
	margin-right: 3.563rem;
	justify-content: space-between;
	display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content 1fr;
    gap: 0 25px;	
}
@scope (.content__next__one) {
  /* .content__next__oneの内部のみ適用 */
	.title_green{
		background-color: #F4F8CB;
		border-bottom: solid 8px #AECF5C;
		border-right:solid 8px #AECF5C;
		text-align: center;
        padding-block: 13.5px;
	}
	h2{
		color:#E91B3E;
		font-size: var(--txt35, 2.188rem);
		position: relative;
		text-align: center;
		padding-inline: 67px;
		display: inline-block;
		font-weight: 700;
	}
	h2::before{
		content: '';
		  position: absolute;
		  top: 50%;
		  display: inline-block;
		  width: 44px;
		  height: 2px;
		  background-color: #E91B3E;
		  -webkit-transform: rotate(60deg);
		  transform: rotate(60deg);
		  left:0;
	}
	h2::after{
		content: '';
		  position: absolute;
		  top: 50%;
		  display: inline-block;
		  width: 44px;
		  height: 2px;
		  background-color: #E91B3E;
		  -webkit-transform: rotate(-60deg);
		  transform: rotate(-60deg);
		  right: 0;
	}
	.shaker__detail{
		& h3{
			font-size: var(--txt28, 1.75rem);
			font-weight: 700;
			margin-bottom: 25px;
		}
		& p{
			font-size: var(--txt25, 1.563rem);
			font-weight: 500;
			line-height: 1.6;
			margin-bottom: 1.563rem;		
		}
		& p.txt__notice{
			font-size: var(--txt20, 1.25rem);
			font-weight: 400;
			margin-bottom: 0;		
		}
	}
		.cocoa__tasting{
			
				& h3{
					color: #34867D;
					font-weight: 700;
					font-size: var(--txt24, 1.5rem);
					}
				& p{
					margin-top: 21px;
					font-size: var(--txt21, 1.313rem);
					line-height: 1.4;
					letter-spacing: 1px;
					grid-column-start: 1;
    				grid-row-start: 2;
					}
				
			& .content__right{
				align-items: center;
    			display: flex;
				grid-row: span 2 / span 2;
				grid-column-start: 2;
				grid-row-start: 1;
				}
			}
		.txt__red{
			    color: #F01340;
				font-weight: 700;
				font-size: var(--txt24, 1.313rem);
				text-align: center;
				padding-block: 0.25rem;
			    margin-top: 1.563rem;
			    background-color: rgba(255, 255, 255, 0.55);
		}
		}
	

/*** content__commitment **************************/	
#content__commitment {
    background-color: #E5E3E0;
	padding-bottom: 1.375rem;
}	
.commitment__detail__01 {
    background-color: #FDF5E7;
    margin-left: 33.3px;
    display: flex;
    clip-path: polygon(0 0, 100% 0, 100% 81%, 0 100%);
    padding-bottom: 5.938rem;
}
.commitment__detail__02 {
    background-color: #F5DCCD;
    clip-path: polygon(0 11%, 100% 0%, 113% 93%, 0% 100%);
    margin-top: -37px;
    margin-right: 33.3px;
    display: flex;
    padding-top: 10.25rem;
    padding-left: 105px;
    padding-right: 37.2px;
    padding-bottom: 62px;
}
.commitment__detail__03 {
    background-color: #DAE0DA;
    margin-left: 33.3px;
    display: flex;
    clip-path: polygon(0 9%, 100% 0%, 100% 87%, 0% 100%);
    padding-bottom: 5.938rem;
	padding-top: 8.875rem;
}
.commitment__detail__04 {
    background-color: #F8F9EA;
    clip-path: polygon(0 11%, 100% 0%, 113% 93%, 0% 100%);
    margin-top: -37px;
    margin-right: 33.3px;
    /*display: flex;*/
    padding-top: 10.25rem;
    padding-left: 105px;
    padding-right: 37.2px;
    padding-bottom: 62px;
}
.commitment__flex__wrap{
	display: flex;	
	}
.commitment__kv{
	position: relative;
	
	}
.title_position{
	position: absolute;
	right:5.313rem;
	bottom:0;
	}	
.title_position > h2{
	font-size: var(--txt40, 2.5rem);
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	position: relative;
	display: inline-block;
	padding-left: 7.5rem;
	margin-bottom: 4.188rem;
    padding-right: 1.375rem;

	}
.title_position > h2::before{
	position: absolute;
	content: "";
	background-image: url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_01.png);
	left: 0;
	top: -50%;
	width: 97px;
	height: 98px;
	}	
	
@scope (#content__commitment) {
  /* #content__commitmentの内部のみ適用 */
	.commitment__detail__01{
		& .commitment__txt__left{
				width: 28.25rem;
			padding-inline: 2.169rem!important;
		}
		& .commitment__txt__right{
				padding-top: 0rem;
				padding-right: 4.375rem;
				width: 48.61vw;
			& h2{
				font-size: var(--txt40, 2.5rem);
				font-family: "Noto Serif JP", serif;
				font-weight: 700;
				position: relative;
				display: inline-block;
				padding-left: 7.5rem;
				margin-bottom: 4.188rem;
			}
			& h2::before{
				position: absolute;
    			content: "";
				background-image: url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_01.png);
				left: 0;
				top: -50%;
				width: 97px;
				height: 98px;
			}
			& article p{
				font-size: var(--txt25, 1.563rem);
				line-height: 1.6;
				margin-bottom: 2rem;
				font-weight: 500;
			}
		}
	}
	.commitment__detail__02 {
		& .commitment__txt__left{
			    width: 45.46vw;
			& h2{
				font-size: var(--txt40, 2.5rem);
				font-family: "Noto Serif JP", serif;
				font-weight: 700;
				position: relative;
				display: inline-block;
				padding-left: 8rem;
				margin-bottom: 4.188rem;
			}
			& h2::before{
				position: absolute;
				content: "";
				background-image: url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_02.png);
				left: 0;
				top: calc(-50% - 12px);
				width: 115px;
				height: 108px;
			}
			& article p{
				font-size: var(--txt25, 1.563rem);
				line-height: 1.6;
				margin-bottom: 2rem;
				font-weight: 500;
			}
		}
		& .commitment__txt__right{
			    display: flex;
				align-items: center;
				margin-left: 21px;
				margin-top: 3rem;
		}
	}
.commitment__detail__03{
		& .commitment__txt__left{
			/*width: 26.438rem;*/
			padding-left: 93.7px;
                padding-right: 83px;
			padding-top: 3rem;

		}
		& .commitment__txt__right{
				padding-top: 0rem;
				padding-right: 4.375rem;
				width: 39.625rem;
			& h2{
				font-size: var(--txt40, 2.5rem);
				font-family: "Noto Serif JP", serif;
				font-weight: 700;
				position: relative;
				display: inline-block;
				padding-left: 7.5rem;
				margin-bottom: 4.188rem;
			}
			& h2::before{
				position: absolute;
    			content: "";
				background-image: url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_03.png);
				left: 0;
				top: -50%;
				width: 102px;
				height: 101px;
			}
			& article p{
				font-size: var(--txt25, 1.563rem);
				line-height: 1.6;
				margin-bottom: 2rem;
				font-weight: 500;
			}
		}
	}
	
	.commitment__detail__04 {
		& h2{
				font-size: var(--txt40, 2.5rem);
				font-family: "Noto Serif JP", serif;
				font-weight: 700;
				position: relative;
				display: inline-block;
				padding-left: 8rem;
				margin-bottom: 4.188rem;
			}
			& h2::before{
				position: absolute;
				content: "";
				background-image: url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_04.png);
				left: 0;
				top: calc(-50% - 12px);
				width: 115px;
				height: 108px;
				background-repeat: no-repeat;
			}
		& .commitment__txt__left{
			    width: 26.46vw;;
			& article p{
				font-size: var(--txt25, 1.563rem);
				line-height: 1.6;
				margin-bottom: 2rem;
				font-weight: 500;
			}
		}
		& .commitment__txt__right{
			    display: flex;
				align-items: center;
				margin-left: 21px;
				margin-top: 3rem;
		}
	}
	}
	
/*** content__product__detail **************************/
#content__product__detail {
    background-color: #FCFBF9;
	padding-bottom: 3.438rem;
}
#content__product__detail .lead__txt {
		text-align: center;
		font-size: var(--txt26, 1.625rem);
		line-height: 1.538;
		margin-top: 35px;
	   font-weight: 500;
	}	
/*** content__product__detail **************************/
#content__product__detail {
    background-color: #FCFBF9;
	padding-bottom: 3.438rem;
}
#content__product__detail .lead__txt {
		text-align: center;
		font-size: var(--txt26, 1.625rem);
		line-height: 1.538;
		margin-top: 35px;
	   font-weight: 500;
	}	
@scope (#content__product__detail) {
  /* #content__product__detailの内部のみ適用 */
	h2{
		font-family: "Noto Serif JP", serif;
		font-size: var(--txt32, 2rem);
		text-align: center;
		background-color: #729128;
		color: #FFF;
		font-weight: 700;
		padding-block: 29px;
	}
	.content__area__cocoa,.content__area__plain {
    padding-inline: 62px;
	}

	.detail__grid__plain {
		display: grid;
		grid-template-columns: max-content 1fr;
		grid-template-rows: max-content 1fr;
		gap: 0 52px;
			p.txt__detail {
				font-size: var(--txt23, 1.438rem);
				margin-block: 32px;
				line-height: 1.739;
				font-weight: 500;
				}
			.title__inner__grid {
			border-bottom: solid 2px #97AA64;
			grid-column: span 2 / span 2;
			& h3{
				background-color: #97AA64;
				font-size: var(--txt22, 1.375rem);
				color: #fff;
				padding: 9px 112px;
				display: inline-block;
				margin-top: 47px;
			}
			}
    }
	
	.img__inner__grid {
		grid-row-start: 2;
		padding-top: 39px;
	}
	button.btn__inner__grid {
		background-color: #44674C;
		color: #fff;
		font-size: var(--txt22, 1.375rem);
		font-weight: 700;
		padding: 19px 2.25rem 19px 1.25rem;
		border-radius: 15px;
		position: relative;
		height: max-content;
		margin-top: 45px;
		text-align: center;
		grid-column-start: 1;
    	grid-row-start: 3;
	}
	button.btn__inner__grid::before {
		content: '';
		width: 10px;
		height: 10px;
		border: 0;
		border-top: solid 2px #FFF;
		border-right: solid 2px #FFF;
		transform: rotate(45deg);
		position: absolute;
		top: 0;
		right: 22px;
		bottom: 0;
		margin: auto;
	}
	.txt__inner__grid {
    grid-column-start: 2;
    grid-row-start: 2;
    padding-top: 39px;
		& h4 {
				font-size: var(--txt30, 1.875rem);
				font-weight: 700;
			}
	}
	
	.img__inner__grid__plain {
    grid-row-start: 3;
	}
	/***cocoa******************/
	.detail__grid__cocoa {
		display: grid;
		grid-template-columns: max-content 1fr;
		grid-template-rows: max-content 1fr;
		gap: 0 52px;
		p.txt__detail__cocoa {
				font-size: var(--txt23, 1.438rem);
				margin-block: 32px;
				line-height: 1.739;
			    font-weight: 500;
				}
		.title__inner__grid {
			border-bottom: solid 2px #C3997B;
			grid-column: span 2 / span 2;
				& h3{
					background-color: #C3997B;
					font-size: var(--txt22, 1.375rem);
					color: #fff;
					padding: 9px 112px;
					display: inline-block;
					margin-top: 47px;
				}
		}
		.btn__inner__grid {
			background-color: #924C1B;
			color: #fff;
			font-size: var(--txt22, 1.375rem);
			font-weight: 700;
			padding: 19px 2.25rem 19px 1.25rem;
			border-radius: 15px;
			position: relative;
			height: max-content;
			margin-top: 45px;
			text-align: center;
			grid-column-start: 1;
			grid-row-start: 3;
		}
		.btn__inner__grid::before {
			content: '';
			width: 10px;
			height: 10px;
			border: 0;
			border-top: solid 2px #FFF;
			border-right: solid 2px #FFF;
			transform: rotate(45deg);
			position: absolute;
			top: 0;
			right: 22px;
			bottom: 0;
			margin: auto;
		}
    }
	}
	
/*** content__astraea **************************/
#content__astraea {
    background-color: #DB8899;
    padding: 25px 35px;
}	
.astraea__detail {
    background-color: #fff;
    border-radius: 30px;
    padding: 23px 45px 18px 45px;
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: max-content 1fr;
    gap: 0px 37px;
}
.astraea__img__main {
    grid-row: span 2 / span 2;
    padding-top: 2rem;
}
.astraea__txt {
    font-size: var(--txt18, 1.125rem);
    font-weight: 500;
    line-height: 1.556;
}
.astraea__btn__wrapper {
    grid-column-start: 2;
    position: relative;
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: max-content 1fr;
    position: relative;
    margin-top: 29px;
}
button.btn__astraea {
    grid-row-start: 2;
    background-color: #BB4860;
    color: #fff;
    font-size: var(--txt22, 1.375rem);
    font-weight: 700;
    padding: 13px 2.25rem 13px 1.25rem;
    border-radius: 15px;
    position: relative;
    height: max-content;
    margin-top: 21px;
    text-align: center;
    grid-column-start: 1;
    grid-row-start: 3;
    width: 232px;
    margin-inline: auto;
}
button.btn__astraea::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 2px #FFF;
    border-right: solid 2px #FFF;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 22px;
    bottom: 0;
    margin: auto;
}
.astrea__img {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 1;
    position: absolute;
    top: -58px;
    right: 0;
    padding: 1rem;
}
@scope (#content__astraea) {
  /* #content__astraeaの内部のみ適用 */
	h2 {
    color: #fff;
    font-weight: 700;
   font-size: var(--txt30, 1.875rem);
    text-align: center;
    margin-bottom: 15px;
	}
	.astraea__btn__wrapper{
		& p.txt_detail{
			font-size: var(--txt20, 1.25rem);
			font-weight: 600;
			line-height: 1.5;
		}
	}
	
	}
	
/*** content__set **************************/
.content__set {
    background-color: #EDF5E7;
    padding: 2.125rem 4.063rem;
}	
.set__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.set__detail {
    background-color: #fff;
    padding: 18px 25px;
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.set__detail p {
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 32px;
}
button.btn__set {
    background-color: #44674C;
    color: #fff;
    font-size: var(--txt22, 1.375rem);
    font-weight: 700;
    padding: 13px 2.25rem 13px 1.25rem;
    border-radius: 15px;
    position: relative;
    height: max-content;
    margin-top: 27px;
    text-align: center;
}
button.btn__set::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 2px #FFF;
    border-right: solid 2px #FFF;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 22px;
    bottom: 0;
    margin: auto;
}
@scope (.content__set) {
  /* #content__setの内部のみ適用 */
	.set__wrapper{
		& h2{
			font-size: var(--txt30, 1.875rem);
			text-align: center;
			font-weight: 700;
		}
		& p.txt__lead{
			margin-block: 25px;
			text-align: center;
			font-size: var(--txt22, 1.375rem);
			font-weight: 600;
		}
	}
	}
	
/*** content__product__info **************************/	
#content__product__info{
	background-color: #FFFBF6;
    padding-inline: 5.5rem;
	padding-bottom: 0.938rem;
	}	
.info__ingredients {
    padding: 17px 70px 28px;
    background-color: #fff;
}
/*いずれかのクラスを持つ場合*/
:is(.ingredients_01, .ingredients_02, .ingredients_03, .ingredients_04) {
  border-bottom: solid 1px #000;
  margin-bottom: 15px;
}
.ingredients_01 p {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.11;
    margin-block: 15px;
}
.ingredients_02 p {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.11;
    margin-bottom: 25px;
}
.ingredients_03 p {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 33px;
    margin-top: 17px;
}
.ingredients_04 p {
    font-size: 18px;
    margin: 17px 0 33px;
    font-weight: 500;
}
ul.list_note {
		margin-top: 17px;
		font-size: 1rem;
		font-weight: 500;
		}

@scope (#content__product__info) {
    /* #content__product__infoの内部のみ適用 */
		h3{
		font-size: var(--txt20, 1.25rem);
		font-weight: 700;
		text-align: center;
		}
	.txt__notice {
		font-size: 15px;
		font-weight: 500;
		line-height: 1.333;
		}
	}
/*** download button **************************/
.btn__download{
	margin-top: 55px;
    margin-bottom: 247px;
    background-color: #743118;
    color: #fff;
    font-size: var(--txt25, 1.563rem);
    font-weight: 700;
    padding: 0.625rem 2.25rem 0.625rem 1.25rem;
    border-radius: 34px;
    position: relative;
    width: min(634px, 90%);
    text-align: center;
		}
.btn__download::before{
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 2px #FFF;
    border-right: solid 2px #FFF;
    transform: rotate(45deg);
    top: 0;
    right: 22px;
    bottom: 0;
    margin: auto;
		}
}
	

/***コンテナクエリ *****************************/
	
/* コンテナの定義 */
#container_inline_product_container {
  container-type: inline-size;
  container-name: product_container;	
}
	
@container product_container (max-width: 706px) {
		.product_container {
		  display: flex;
		  flex-direction: column;
		  flex-direction: column-reverse;	
		}
	  }

@container product_container (min-width: 707px) {
  .product_container {
	 display: flex;  
  }
}
/* コンテナの定義 */
.container_inline_fragrance_details {
  container-type: inline-size;
  container-name: fragrance;
}
@container fragrance (max-width: 985px) {
	.fragrance_box {
    display: flex;
    justify-content: center;
}

	  }

/*****  ************************************************/


/***** PC middle ************************************************/
@media screen and (max-width: 810px) and ( min-width:500px){
html {
    scroll-padding-top: 90px;
	scroll-behavior: smooth;  
	}	
.txt_12{font-size: var(--txt12, 0.75rem);	}	
.txt_14{font-size: var(--txt14, 0.875rem);	}
.txt_15{font-size: var(--txt15, 0.938rem);	}
.txt_16{font-size: var(--txt16, 1rem);	}	
.txt_17{font-size: var(--txt17, 1.063rem);	}
.txt_18{font-size: var(--txt18, 1.125rem);	}
.txt_19{font-size: var(--txt19, 1.188rem);	}	
.txt_20{font-size: var(--txt20, 1.25rem);	}
.txt_23{font-size: var(--txt23, 1.438rem);	}	
.txt_24{font-size: var(--txt24, 1.5rem);	}
.txt_25{font-size: var(--txt25, 1.563rem);	}
.txt_27{font-size: var(--txt27, 1.688rem);	}
.txt_28{font-size: var(--txt28, 1.75rem);	}
.txt_30{font-size: var(--txt30, 1.875rem);	}		
.txt_32{font-size: var(--txt32, 2rem);	}	
.txt_35{font-size: var(--txt35, 2.188rem);	}	
.txt_40{font-size: var(--txt40, 2.5rem);	}
.txt_50{font-size: var(--txt50, 3.125rem);	}	
.txt_80{font-size: var(--txt80, 5rem);	}
.only_pc{display: none;}	
.sp_none{display: none;}
.br_sp{display:block;}	
	picture.picture img {
    width: 100%;
}	
/**** layout *********************/
	
@scope (#content__kv) {
  /* #content__kv クラスを持つ要素の内部のみ適用 */
	.title_product{
	font-size: var(--txt22, 1.375rem);
	font-weight: 600;	
	text-align: center;
	line-height: 1.5;
	margin-bottom:4rem;	
	color:#362D2D;
	margin-top:8px;	
	}
	h1{
		padding:0;
		& img{
			width:100%;
			height:auto;
		}
	}
	
}

/*** content__recommended **************************/	
#content__recommended{
		background-color:#FBF7EF;
	}
.content__recommended__middle{
   background-image:url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/bg_recommended_lead.jpg);
	background-repeat:no-repeat;
	background-position: center top;
	padding-top:clamp(1rem, -2.226rem + 10.32vw, 3rem);
	padding-left:1.313rem;
	/*margin-top: 1.944rem;*/
	background-size: cover;
	aspect-ratio: 1059 / 328; 
	}
	.recommended__recommended__top{
	background-image:url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/bg_recommended.png);
	background-repeat: no-repeat;
	background-position:right top;	
	display: flex;
	padding-inline:25px;
	justify-content: center;
	position: relative;
	padding-bottom: 1.944rem;	
	}
.recommended__recommended__top::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.55);
    z-index: 0;
}
ul.list__grid__img.only_pc {
    display: none;
}
.only_sp img {
    width: 100%;
}
ul.list__recommended{
	margin-top: 1.888rem;	
	}
	ul.list__recommended li{
	background-color:#fff;
	padding:0.75rem 1.781rem 0.75rem 5.844rem;
	box-shadow: 0px 3px 6px 0px #ddd;
	position:relative;
	font-weight:500;
	}
	ul.list__recommended li:not(:last-child){
	margin-bottom: 2.125rem;	
	}
	ul.list__recommended li:before{
	position:absolute;
	width:39px;
	height:40px;
	content:url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_check.png);
	top: 50%;
    left: 25.8px;
    transform: translateY(-50%); 
	}
.content__recommended__middle p{
   line-height: 36px;
	letter-spacing: 1.8px;
	font-size: var(--txt18, 1.125rem);
	font-weight: 600;
	}
ul.list__grid__img {
    display: grid;
    gap: 27px;
    grid-template-columns: repeat(4, 1fr);
    padding-block: 2.5rem;
    padding-inline: 25px;
}
@scope (#content__recommended) {
  /* #content__recommended の内部のみ適用 */
	.content__inner__left{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-inline: auto;
	align-items: center;
	}
	h2{
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;	
	font-size: clamp(3.125rem, 1.548rem + 6.82vw, 5rem);
	font-weight: 600;
	margin-top:2.875rem;
	line-height: 1.2;
	z-index: 10;	
	}
	span.title__inner__txtl{
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;	
	font-size: var(--txt80, 5rem);
	font-weight: 600;
	line-height: 0.375;
	}
	span.title__inner__txts{
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;	
	font-size: var(--txt40, 2.5rem);
	font-weight: 600;
	}
	
}
/*** content__topic__lead **************************/
.content__topic__lead {
    background-color: #FCFBF9;
}	
.area__pruduct_info {
    padding-inline: 1.313rem;
    padding-top: 1.75rem;
    padding-bottom: 3.438rem;
}
p.txt__notice__right {
    font-size: 15px;
    text-align: right;
    padding-inline: 1.313rem;
}
.area__accepting {
    text-align: center;
    font-weight: 700;
    font-size: 22px;
    color: #fff;
    background-color: #F24B6D;
    padding-block: 0.2rem;
	margin-bottom: 1.25rem;
	padding-inline: 0.5rem;
}
.advance__reservation__txt {
    margin-top: 1rem;
}
.advance__reservation__info {
    
}
.advance__reservation__img {
   display: flex;
   justify-content: center;
   width: 40%;
   margin-inline: auto;	
}
.advance__ingredients {
    
}
.price__wrapper {
    grid-column-start: 2;
    grid-row-start: 3;
	display: flex;
    align-items: center;
}
@scope (.content__topic__lead) {
  /* .content__topic__leadの内部のみ適用 */
	.txt__lead{
	font-size: var(--txt20, 1.375rem);
    font-weight: 500;
    line-height: 2;
    padding-inline: 1.313rem;
    letter-spacing: 1.5px;
	padding-top: 1.25rem;	
	}
	.txt__note{
	font-size: clamp(1.125rem, 0.915rem + 0.91vw, 1.375rem);
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;	
	}
	h2 {
    font-weight: 700;
    font-size:clamp(1.438rem, 0.807rem + 2.73vw, 2.188rem);
	}
	dl.dl__ingredients div {
    display: flex;
	align-items: center;
    margin-bottom: 1.75rem;	
	}
	dt {
    font-weight: normal;
    font-size: var(--txt20, 1.25rem);
    color: #000;
    display: inline-block;
    width: calc(1.25rem * 4);
    margin-right: 2.5rem;
	text-align: justify;
  	text-align-last: justify;	
	}
	dd {
    flex: 1;
}
	.price__wrapper{
		& .price__txt{
			font-size: var(--txt22, 1.375rem);
    		margin-right: 1.188rem;
		}
		& .price__cocoa{
			font-size: clamp(2rem, 1.054rem + 4.09vw, 3.125rem);
			font-weight: 700;
			margin-right: 0.75rem;
		}
		& .price__yen{
			font-size: var(--txt20, 1.25rem);
			font-weight: 700;
		}
	}
	.btn__price__reservation{
		    background-color: #44674C;
			color: #fff;
			font-size: var(--txt22, 1.375rem);
			font-weight: 700;
			padding: 0.625rem 2.25rem 0.625rem 1.25rem;
			border-radius: 15px;
		    position: relative;
		    width: min(514px, 90%);
            text-align: center;
		    margin-top: 28px;
		
	}
	.btn__price__reservation::before{
		    position: absolute;
			content: '';
			width: 10px;
			height: 10px;
			border: 0;
			border-top: solid 2px #FFF;
			border-right: solid 2px #FFF;
			transform: rotate(45deg);
			position: absolute;
			top: 0;
			right: 22px;
			bottom: 0;
			margin: auto;     
	}
	}
/*** content__next__one **************************/	
	.next__one__shaker{
	background-image:url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/bg_next_one.png);
	background-repeat: no-repeat;
	background-position:left bottom;	
	padding-inline:clamp(1rem, 0.159rem + 3.64vw, 2rem);
	padding-bottom: 48px;	
	}
	.shaker__detail__wrapper {
    display: flex;
    gap: 0 2rem;
    margin-top: 2.75rem;
	flex-direction: column;	
	}
	.shaker__img {
    display: flex;
    justify-content: center;
	}
	.shaker__img img {
    width: 30%;
}
	.cocoa__tasting {
    border: solid 1px #008DCC;
    border-radius: 48px;
    background-color: #fff;
    padding: 18px 22px;
	margin-top:2rem;
	display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: max-content 1fr;
        gap: 0 clamp(0rem, 4.083rem + -8.06vw, 1.563rem);	
	
}
@scope (.content__next__one) {
  /* .content__next__oneの内部のみ適用 */
	.title_green{
		background-color: #F4F8CB;
		border-bottom: solid 8px #AECF5C;
		border-right:solid 8px #AECF5C;
		text-align: center;
        padding-block: 13.5px;
	}
	h2{
		color:#E91B3E;
		font-size: clamp(0.875rem, -0.071rem + 4.09vw, 2rem);
		position: relative;
		text-align: center;
		padding-inline: 67px;
		display: inline-block;
		font-weight: 700;
	}
	h2::before{
		content: '';
		  position: absolute;
		  top: 50%;
		  display: inline-block;
		  width: 44px;
		  height: 2px;
		  background-color: #E91B3E;
		  -webkit-transform: rotate(60deg);
		  transform: rotate(60deg);
		  left:0;
	}
	h2::after{
		content: '';
		  position: absolute;
		  top: 50%;
		  display: inline-block;
		  width: 44px;
		  height: 2px;
		  background-color: #E91B3E;
		  -webkit-transform: rotate(-60deg);
		  transform: rotate(-60deg);
		  right: 0;
	}
	.shaker__detail{
		& h3{
			font-size: var(--txt28, 1.75rem);
			font-weight: 700;
			margin-bottom: 25px;
		}
		& p{
			font-size: clamp(1.125rem, 0.757rem + 1.59vw, 1.563rem);
			font-weight: 500;
			line-height: 1.6;
			margin-bottom: 1.563rem;		
		}
		& p.txt__notice{
			font-size: var(--txt20, 1.25rem);
			font-weight: 400;
			margin-bottom: 0;		
		}
	}
		.cocoa__tasting{
			
				& h3{
					color: #34867D;
					font-weight: 700;
					font-size: var(--txt24, 1.5rem);
					}
				& p{
					margin-top: 21px;
					font-size: clamp(1.125rem, 0.967rem + 0.68vw, 1.313rem);
					line-height: 1.8;
					letter-spacing: 1px;
					grid-column-start: 1;
    				grid-row-start: 2;
					}
			
			& .content__right{
				
                margin-block: auto;
				grid-row: span 2 / span 2;
    			grid-column-start: 2;
    			grid-row-start: 1;
				}
			}
		.txt__red{
			    color: #F01340;
				font-weight: 700;
				font-size: clamp(1.125rem, 0.81rem + 1.36vw, 1.5rem);
				text-align: center;
				padding-block: 0.25rem;
			    margin-top: 1.563rem;
			    background-color: rgba(255, 255, 255, 0.55);
		}
	
	}
/*** content__commitment **************************/		
#content__commitment {
    background-color: #E5E3E0;
	padding-bottom: 1.375rem;
}	
.commitment__detail__01 {
    background-color: #FDF5E7;
    margin-left: clamp(1.081rem, -0.532rem + 5.16vw, 1.601rem);
    display: flex;
    /*clip-path: polygon(0 0, 100% 0, 100% 81%, 0 100%);*/
    padding-bottom: 3.938rem;
	flex-direction: column;
    justify-content: center;
    align-items: center;
}
.commitment__detail__02 {
    background-color: #F5DCCD;
   /* clip-path: polygon(0 11%, 100% 0%, 113% 93%, 0% 100%);*/
    margin-top: 37px;
    margin-right: clamp(1.081rem, -0.532rem + 5.16vw, 1.601rem);
    display: flex;
    padding-top: 5.25rem;
    padding-left: 3rem;
    padding-right: 37.2px;
    padding-bottom: 62px;
    flex-direction: column;	
}
.commitment__detail__03 {
    background-color: #DAE0DA;
    margin-left: clamp(1.081rem, -0.532rem + 5.16vw, 2.081rem);
    display: flex;
    /*clip-path: polygon(0 9%, 100% 0%, 100% 87%, 0% 100%);*/
    padding-bottom: 5.938rem;
	padding-top: 5.25rem;
	margin-top: 37px;
	flex-direction: column-reverse;
	padding-inline: 3rem;
	align-items: center;
}
.commitment__detail__04 {
    background-color: #F8F9EA;
    /*clip-path: polygon(0 11%, 100% 0%, 113% 93%, 0% 100%);*/
    margin-top: 37px;
    margin-right: clamp(1.081rem, -0.532rem + 5.16vw, 2.081rem);
    /*display: flex;*/
    padding-top: 5.25rem;
    padding-inline: 3rem;
    padding-bottom: 62px;
}
.commitment__flex__wrap{
	display: flex;
	flex-direction: column;
	}
.commitment__kv{
	position: relative;
	
	}
.title_position{
	position: absolute;
	bottom:0;
	display: flex;
        justify-content: center;
        width: 100%;
	}	
.title_position > h2{
	font-size: clamp(1.688rem, 0.377rem + 4.19vw, 2.5rem);
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	position: relative;
	display: inline-block;
	padding-left: 7.5rem;
	margin-bottom: 1rem;
    padding-right: 1.375rem;

	}
.title_position > h2::before{
	position: absolute;
	content: "";
	background-image: url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_01.png);
	left: 0;
	bottom: 0%;
	width: 97px;
	height: 98px;
	}	
	
@scope (#content__commitment) {
  /* #content__commitmentの内部のみ適用 */
	.commitment__detail__01{
		& .commitment__txt__left{
				width: 28.25rem;
			padding-inline: 2.169rem!important;
		}
		& .commitment__txt__right{
				padding-top: 2rem;
				padding-inline: 2.375rem;
				
			& h2{
				font-size: var(--txt40, 2.5rem);
				font-family: "Noto Serif JP", serif;
				font-weight: 700;
				position: relative;
				display: inline-block;
				padding-left: 7.5rem;
				margin-bottom: clamp(0.188rem, -6.264rem + 20.65vw, 4.188rem);
			}
			& h2::before{
				position: absolute;
    			content: "";
				background-image: url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_01.png);
				left: 0;
				top: -50%;
				width: 97px;
				height: 98px;
				background-repeat: no-repeat;
			}
			& article p{
				font-size: var(--txt18, 1.125rem);
				line-height: 1.6;
				margin-bottom: 2rem;
			}
		}
	}
	.commitment__detail__02 {
		& .commitment__txt__left{
			    
			& h2{
				font-size: clamp(1.688rem, 0.377rem + 4.19vw, 2.5rem);
				font-family: "Noto Serif JP", serif;
				font-weight: 700;
				position: relative;
				
				padding-left: 8rem;
				margin-bottom: 4.188rem;
				display: flex;
                align-items: center;
			}
			& h2::before{
				position: absolute;
				content: "";
				background-image: url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_02.png);
				left: 0;
				/*top: calc(-50% - 12px);*/
				width: 115px;
				height: 108px;
				transform: translateY(-15%);
			}
			& article p{
				font-size: var(--txt18, 1.125rem);
				line-height: 1.6;
				margin-bottom: 2rem;
			}
		}
		& .commitment__txt__right{
			    display: flex;
				align-items: center;
				margin-left: 21px;
				margin-top: 3rem;
			    justify-content: center;
		}
	}
.commitment__detail__03{
		& .commitment__txt__left{
				

		}
		& .commitment__txt__right{
				padding-top: 0rem;
				
				
			& h2{
				font-size: clamp(1.688rem, 0.377rem + 4.19vw, 2.5rem);
				font-family: "Noto Serif JP", serif;
				font-weight: 700;
				position: relative;
				
				padding-left: 7.5rem;
				margin-bottom: 4.188rem;
				display: flex;
                    align-items: center;
			}
			& h2::before{
				position: absolute;
    			content: "";
				background-image: url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_03.png);
				left: 0;
				
				width: 102px;
				height: 101px;
				transform: translateY(-15%);
			}
			& article p{
				font-size: var(--txt18, 1.125rem);
				line-height: 1.6;
				margin-bottom: 2rem;
			}
		}
	}
	
	.commitment__detail__04 {
		& h2{
				font-size: clamp(1.688rem, 0.377rem + 4.19vw, 2.5rem);
				font-family: "Noto Serif JP", serif;
				font-weight: 700;
				position: relative;
				
				padding-left: 8rem;
				margin-bottom: 4.188rem;
			    display: flex;
                align-items: center;
			}
			& h2::before{
				position: absolute;
				content: "";
				background-image: url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_04.png);
				left: 0;
				transform: translateY(-15%);
				width: 115px;
				height: 108px;
				background-repeat: no-repeat;
			}
		& .commitment__txt__left{
			    
			& article p{
				font-size: var(--txt18, 1.125rem);
				line-height: 1.6;
				margin-bottom: 2rem;
			}
		}
		& .commitment__txt__right{
			    display: flex;
				align-items: center;
				margin-left: 21px;
				margin-top: 3rem;
			    justify-content: center;
		}
	}
	}
	
/*** content__product__detail **************************/
#content__product__detail {
    background-color: #FCFBF9;
	padding-bottom: 3.438rem;
}
#content__product__detail .lead__txt {
		text-align: center;
		font-size: clamp(1.25rem, 1.04rem + 0.91vw, 1.5rem);
		line-height: 1.538;
		margin-top: 35px;
	   font-weight: 500;
	}	
@scope (#content__product__detail) {
  /* #content__product__detailの内部のみ適用 */
	h2{
		font-family: "Noto Serif JP", serif;
		font-size: clamp(1.375rem, 0.482rem + 3.86vw, 2.438rem);
		text-align: center;
		background-color: #729128;
		color: #FFF;
		font-weight: 700;
		padding-block: 29px;
	}
	.content__area__cocoa,.content__area__plain {
    padding-inline: clamp(1rem, -1.418rem + 10.45vw, 3.875rem);
	}

	.detail__grid__plain {
		display: grid;
		grid-template-columns: 1fr;
			p.txt__detail {
				font-size: clamp(1.125rem, 0.862rem + 1.14vw, 1.438rem);
				margin-block: 32px;
				line-height: 1.739;	
				}
			.title__inner__grid {
			border-bottom: solid 2px #97AA64;
			grid-column: span 2 / span 2;
			& h3{
				background-color: #97AA64;
				font-size: var(--txt22, 1.375rem);
				color: #fff;
				padding: 7px clamp(3rem, -0.364rem + 14.55vw, 7rem);
				display: inline-block;
				margin-top: 47px;
			}
			}
    }
	
	.img__inner__grid {
		grid-row-start: 2;
		padding-top: 39px;
		margin-inline: auto;
        width: 45%;
	}
	button.btn__inner__grid {
		background-color: #44674C;
		color: #fff;
		font-size: var(--txt22, 1.375rem);
		font-weight: 700;
		padding: 19px 2.25rem 19px 1.25rem;
		border-radius: 15px;
		position: relative;
		height: max-content;
		margin-top: 15px;
		text-align: center;
    	grid-row-start: 3;
	}
	button.btn__inner__grid::before {
		content: '';
		width: 10px;
		height: 10px;
		border: 0;
		border-top: solid 2px #FFF;
		border-right: solid 2px #FFF;
		transform: rotate(45deg);
		position: absolute;
		top: 0;
		right: 22px;
		bottom: 0;
		margin: auto;
	}
	.txt__inner__grid {
    grid-row-start: 4;
    padding-top: 39px;
		& h4 {
				font-size: clamp(1.563rem, 1.3rem + 1.14vw, 1.875rem);
				font-weight: 700;
			}
	}
	
	.img__inner__grid__plain {
    grid-row-start: 5;
	}
	/***cocoa******************/
	.detail__grid__cocoa {
		display: grid;
		grid-template-columns:1fr;
		p.txt__detail__cocoa {
				font-size: clamp(1.125rem, 0.862rem + 1.14vw, 1.438rem);
				margin-block: 32px;
				line-height: 1.739;	
				}
		.title__inner__grid {
			border-bottom: solid 2px #C3997B;
				& h3{
					background-color: #C3997B;
					font-size: var(--txt22, 1.375rem);
					color: #fff;
					padding: 9px clamp(3rem, -0.364rem + 14.55vw, 7rem);
					display: inline-block;
					margin-top: 47px;
				}
		}
		.btn__inner__grid {
			background-color: #924C1B;
			color: #fff;
			font-size: clamp(0.938rem, 0.57rem + 1.59vw, 1.375rem);
			font-weight: 700;
			padding: 19px 2.25rem 19px 1.25rem;
			border-radius: 15px;
			position: relative;
			height: max-content;
			margin-top: 0px;
			text-align: center;
			grid-row-start: 3;
			margin-top: 1rem;
		}
		.btn__inner__grid::before {
			content: '';
			width: 10px;
			height: 10px;
			border: 0;
			border-top: solid 2px #FFF;
			border-right: solid 2px #FFF;
			transform: rotate(45deg);
			position: absolute;
			top: 0;
			right: 22px;
			bottom: 0;
			margin: auto;
		}
    }
	}
	
/*** content__astraea **************************/
#content__astraea {
    background-color: #DB8899;
    padding: 25px clamp(0.938rem, -0.114rem + 4.55vw, 2.188rem);
}	
.astraea__detail {
    background-color: #fff;
    border-radius: 30px;
    padding: 23px clamp(1.375rem, 0.166rem + 5.23vw, 2.813rem) 18px clamp(1.375rem, 0.166rem + 5.23vw, 2.813rem);
    display: grid;
    grid-template-columns: 1fr;
}
.astraea__img__main {
	margin-inline: auto;
}
.astraea__txt {
    font-size: var(--txt18, 1.125rem);
    font-weight: 500;
    line-height: 1.556;
	grid-row-start: 2;
	margin-top: 1rem;
}
.astraea__btn__wrapper {
    position: relative;
    display: grid;
    margin-top: 29px;
	grid-row-start: 3 !important;
}
button.btn__astraea {
    background-color: #BB4860;
    color: #fff;
    font-size: var(--txt22, 1.375rem);
    font-weight: 700;
    padding: 13px 2.25rem 13px 1.25rem;
    border-radius: 15px;
    position: relative;
    height: max-content;
    margin-top: 21px;
    text-align: center;
    grid-row-start: 3;
    width: 232px;
    margin-inline: auto;
}
button.btn__astraea::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 2px #FFF;
    border-right: solid 2px #FFF;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 22px;
    bottom: 0;
    margin: auto;
}
.astrea__img {
    padding: 1rem;
	margin-top: 1rem;
	margin-inline: auto;
}
@scope (#content__astraea) {
  /* #content__astraeaの内部のみ適用 */
	h2 {
    color: #fff;
    font-weight: 700;
   font-size: clamp(1.25rem, 0.724rem + 2.27vw, 1.875rem);
    text-align: center;
    margin-bottom: 15px;
	}
	.astraea__btn__wrapper{
		& p.txt_detail{
			font-size: var(--txt20, 1.25rem);
			font-weight: 600;
			line-height: 1.5;
		}
	}
	
	}
	
/*** content__set **************************/
	
.content__set {
    background-color: #EDF5E7;
    padding: 2.125rem clamp(1rem, -1.576rem + 11.14vw, 4.063rem);
}	
.set__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.set__detail {
    background-color: #fff;
    padding: 18px 25px;
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.set__detail p {
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 32px;
}
button.btn__set {
    background-color: #44674C;
    color: #fff;
    font-size: clamp(1.125rem, 0.915rem + 0.91vw, 1.375rem);
    font-weight: 700;
    padding: 13px 2.25rem 13px 1.25rem;
    border-radius: 15px;
    position: relative;
    height: max-content;
    margin-top: 27px;
    text-align: center;
}
button.btn__set::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 2px #FFF;
    border-right: solid 2px #FFF;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 22px;
    bottom: 0;
    margin: auto;
}
@scope (.content__set) {
  /* #content__setの内部のみ適用 */
	.set__wrapper{
		& h2{
			font-size: clamp(1.563rem, 1.3rem + 1.14vw, 1.875rem);
			text-align: center;
			font-weight: 700;
		}
		& p.txt__lead{
			margin-block: 25px;
			text-align: center;
			font-size: var(--txt22, 1.375rem);
			font-weight: 600;
		}
	}
	}
	
/*** content__product__info **************************/	
#content__product__info{
	background-color: #FFFBF6;
    padding-inline: clamp(0.5rem, -3.705rem + 18.18vw, 5.5rem);
	padding-bottom: 0.938rem;
	}	
.info__ingredients {
    padding: 17px clamp(1rem, -1.838rem + 12.27vw, 4.375rem) 28px;
    background-color: #fff;
}
/*いずれかのクラスを持つ場合*/
:is(.ingredients_01, .ingredients_02, .ingredients_03, .ingredients_04) {
  border-bottom: solid 1px #000;
  margin-bottom: 15px;
}
.ingredients_01 p {
    font-size: clamp(1rem, 0.895rem + 0.45vw, 1.125rem);
    font-weight: 600;
    line-height: 1.5;
    margin-block: 15px;
}
.ingredients_02 p {
    font-size: clamp(1rem, 0.895rem + 0.45vw, 1.125rem);
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 25px;
}
.ingredients_03 p {
    font-size: clamp(1rem, 0.895rem + 0.45vw, 1.125rem);
    font-weight: 500;
    margin-bottom: 33px;
    margin-top: 17px;
}
.ingredients_04 p {
    font-size: clamp(1rem, 0.895rem + 0.45vw, 1.125rem);
    margin: 17px 0 33px;
    font-weight: 500;
}
ul.list_note {
		margin-top: 17px;
		font-size: 1rem;
		font-weight: 500;
		}

@scope (#content__product__info) {
    /* #content__product__infoの内部のみ適用 */
		h3{
		font-size: var(--txt20, 1.25rem);
		font-weight: 700;
		text-align: center;
		}
	.txt__notice {
		font-size: 15px;
		font-weight: 500;
		line-height: 1.333;
		}
	}
/*** download button **************************/
.btn__download{
	margin-top: 55px;
    margin-bottom: 247px;
    background-color: #743118;
    color: #fff;
    font-size: clamp(1.25rem, 0.987rem + 1.14vw, 1.563rem);
    font-weight: 700;
    padding: 0.625rem 2.25rem 0.625rem 1.25rem;
    border-radius: 34px;
    position: relative;
    width: min(634px, 90%);
    text-align: center;
		}
.btn__download::before{
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 2px #FFF;
    border-right: solid 2px #FFF;
    transform: rotate(45deg);
    top: 0;
    right: 22px;
    bottom: 0;
    margin: auto;
		}	
	
}






/***** SP ************************************************/
	
@media screen and (max-width: 499px) {
  html {
    scroll-padding-top: 60px;
  }
.txt_12{font-size: var(--txt12, 0.75rem);	}	
.txt_14{font-size: var(--txt14, 0.875rem);	}
.txt_15{font-size: var(--txt15, 0.938rem);	}
.txt_16{font-size: var(--txt16, 1rem);	}	
.txt_17{font-size: var(--txt17, 1.063rem);	}
.txt_18{font-size: var(--txt18, 1.125rem);	}
.txt_19{font-size: var(--txt19, 1.188rem);	}	
.txt_20{font-size: var(--txt20, 1.25rem);	}
.txt_23{font-size: var(--txt23, 1.438rem);	}	
.txt_24{font-size: var(--txt16, 1rem);	}
.txt_25{font-size: var(--txt25, 1.563rem);	}
.txt_27{font-size: var(--txt18, 1.125rem);	}
.txt_28{font-size: var(--txt28, 1.75rem);	}
.txt_30{font-size: var(--txt30, 1.875rem);	}		
.txt_32{font-size: var(--txt32, 2rem);	}	
.txt_35{font-size: var(--txt35, 2.188rem);	}	
.txt_40{font-size: var(--txt40, 2.5rem);	}
.txt_50{font-size: var(--txt50, 3.125rem);	}	
.txt_80{font-size: var(--txt80, 5rem);	}		
.sp_none{display: none;}
.br_sp{display:block;}	
.only_pc{display: none;}
/**** layout *********************/
	
@scope (#content__kv) {
  /* #content__kv クラスを持つ要素の内部のみ適用 */
	.title_product{
	font-size: var(--txt22, 1.375rem);
	font-weight: 600;	
	text-align: center;
	line-height: 1.5;
	margin-bottom:4rem;	
	color:#362D2D;
	margin-top:8px;	
	}
	h1{
		padding:0;
		& img{
			width:100%;
			height:auto;
		}
	}
	
}

/*** content__recommended **************************/	
#content__recommended{
		background-color:#FBF7EF;
	}
.content__recommended__middle{
   background-image:url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/bg_recommended_lead.jpg);
	background-repeat:no-repeat;
	background-position: right top;
	padding-block:clamp(1rem, -2.226rem + 10.32vw, 3rem);
	padding-left:1.313rem;
	
	background-size: cover;
	aspect-ratio: 1059 / 328; 
	}
	.recommended__recommended__top{
	background-image:url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/bg_recommended.png);
	background-repeat: no-repeat;
	background-position:right top;	
	display: flex;
	padding-inline:25px;
	justify-content: center;
	position: relative;
	padding-bottom: 1.944rem;	
	}
.recommended__recommended__top::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.55);
    z-index: 0;
}
ul.list__grid__img.only_pc {
    display: none;
}
.only_sp img {
    width: 100%;
}
ul.list__recommended{
	margin-top: 1.888rem;	
	}
	ul.list__recommended li{
	background-color:#fff;
	padding:0.75rem 1.781rem 0.75rem 4.3rem;
	box-shadow: 0px 3px 6px 0px #ddd;
	position:relative;
	font-weight:500;
	}
	ul.list__recommended li:not(:last-child){
	margin-bottom: 2.125rem;	
	}
	ul.list__recommended li:before{
	position:absolute;
	width:28px;
	height:29px;
	content:url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_check_sp.png);
	top: 50%;
    left: 14.8px;
    transform: translateY(-50%); 
	}
.content__recommended__middle p{
   line-height: 36px;
	letter-spacing: 1.8px;
	font-size: var(--txt16, 1rem);
	font-weight: 600;
	}
ul.list__grid__img {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    padding-block: 1rem;
    padding-inline: 1rem;
}
@scope (#content__recommended) {
  /* #content__recommended の内部のみ適用 */
	.content__inner__left{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-inline: auto;
	align-items: center;
	}
	h2{
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;	
	font-size: clamp(3.375rem, -4.804rem + 30.43vw, 4.688rem);
	font-weight: 600;
	margin-top:4rem;
	line-height: 1.2;
    text-align: center;
	/*text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);*/
	z-index: 10;	
	}
	span.title__inner__txtl{
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;	
	font-size: var(--txt80, 5rem);
	font-weight: 600;
	line-height: 0.375;
	}
	span.title__inner__txts{
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;	
	font-size: var(--txt30, 1.875rem);
	font-weight: 600;
	}
	
}
/*** content__topic__lead **************************/
.content__topic__lead {
    background-color: #FCFBF9;
}	
.area__pruduct_info {
    padding-inline: 1.313rem;
    padding-top: 1.75rem;
    padding-bottom: 3.438rem;
	margin-top:1rem;
}
p.txt__notice__right {
    font-size: 14px;
    text-align: right;
    padding-inline: 1.313rem;
}	
.area__accepting {
    text-align: center;
    font-weight: 700;
    font-size: 22px;
    color: #fff;
    background-color: #F24B6D;
    padding-block: 0.2rem;
	margin-bottom: 1.25rem;
	padding-inline: 0.5rem;
}
.advance__reservation__txt {
    margin-top: 1rem;
}
.advance__reservation__info {
    
}
.advance__reservation__img {
   display: flex;
   justify-content: center;
   width: 40%;
   margin-inline: auto;	
}
.advance__ingredients {
    
}
.price__wrapper {
    grid-column-start: 2;
    grid-row-start: 3;
	display: flex;
    align-items: center;
}
@scope (.content__topic__lead) {
  /* .content__topic__leadの内部のみ適用 */
	.txt__lead{
	font-size: var(--txt16, 1rem);
    font-weight: 500;
    line-height: 2;
    padding-inline: 1.313rem;
    letter-spacing: 1.5px;
	padding-top: 1.25rem;	
	}
	.txt__note{
	font-size: clamp(1.125rem, 0.915rem + 0.91vw, 1.375rem);
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;	
	}
	h2 {
    font-weight: 700;
    font-size:clamp(1.438rem, 0.807rem + 2.73vw, 2.188rem);
	}
	dl.dl__ingredients div {
    display: flex;
	align-items: center;
    margin-bottom: 1.75rem;	
	}
	dt {
    font-weight: normal;
    font-size: var(--txt15, 0.938rem);
    color: #000;
    display: inline-block;
    width: calc(1.25rem * 4);
    margin-right: 2.5rem;
	text-align: justify;
  	text-align-last: justify;	
	}
	dd {
    flex: 1;
	font-size: var(--txt15, 0.938rem);	
}
	.price__wrapper{
		& .price__txt{
			font-size: var(--txt20, 1.25rem);
    		margin-right: 1.188rem;
		}
		& .price__cocoa{
			font-size: clamp(2rem, 1.054rem + 4.09vw, 3.125rem);
			font-weight: 700;
			margin-right: 0.75rem;
		}
		& .price__yen{
			font-size: var(--txt20, 1.25rem);
			font-weight: 700;
		}
	}
	.btn__price__reservation{
		    background-color: #44674C;
			color: #fff;
			font-size: var(--txt22, 1.375rem);
			font-weight: 700;
			padding: 0.625rem 2.25rem 0.625rem 1.25rem;
			border-radius: 15px;
		    position: relative;
		    width: min(514px, 90%);
            text-align: center;
		    margin-top: 28px;
		
	}
	.btn__price__reservation::before{
		    position: absolute;
			content: '';
			width: 10px;
			height: 10px;
			border: 0;
			border-top: solid 2px #FFF;
			border-right: solid 2px #FFF;
			transform: rotate(45deg);
			position: absolute;
			top: 0;
			right: 22px;
			bottom: 0;
			margin: auto;     
	}
	}
/*** content__next__one **************************/	
	.next__one__shaker{
	background-image:url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/bg_next_one.png);
	background-repeat: no-repeat;
	background-position:left bottom;	
	padding-inline:clamp(1rem, 0.159rem + 3.64vw, 2rem);
	padding-bottom: 48px;	
	}
	.shaker__detail__wrapper {
    display: flex;
    gap: 0 2rem;
    margin-top: 2.75rem;
	flex-direction: column;	
	}
	.shaker__img {
    display: flex;
    justify-content: center;
	}
	.shaker__img img {
    width: 30%;
}
	.cocoa__tasting {
    border: solid 1px #008DCC;
    border-radius: 48px;
    background-color: #fff;
    padding: 18px 22px;
	margin-top: 2rem;
	display: grid;
    grid-template-columns: 16rem 1fr;
    /*grid-template-rows: max-content 1fr;*/
    gap: 8px 0;	
}
	picture.picture img {
    width: 100%;
}
	
@scope (.content__next__one) {
  /* .content__next__oneの内部のみ適用 */
	.title_green{
		background-color: #F4F8CB;
		border-bottom: solid 8px #AECF5C;
		border-right:solid 8px #AECF5C;
		text-align: center;
        padding-block: 13.5px;
	}
	h2{
		color:#E91B3E;
		font-size: clamp(0.875rem, -0.071rem + 4.09vw, 2rem);
		position: relative;
		text-align: center;
		padding-inline: 57px;
		display: inline-block;
		font-weight: 700;
	}
	h2::before{
		content: '';
		  position: absolute;
		  top: 50%;
		  display: inline-block;
		  width: 44px;
		  height: 2px;
		  background-color: #E91B3E;
		  -webkit-transform: rotate(60deg);
		  transform: rotate(60deg);
		  left:0;
	}
	h2::after{
		content: '';
		  position: absolute;
		  top: 50%;
		  display: inline-block;
		  width: 44px;
		  height: 2px;
		  background-color: #E91B3E;
		  -webkit-transform: rotate(-60deg);
		  transform: rotate(-60deg);
		  right: 0;
	}
	.shaker__detail{
		& h3{
			font-size: var(--txt25, 1.563rem);
			font-weight: 700;
			margin-bottom: 25px;
		}
		& p{
			font-size: clamp(1.125rem, 0.757rem + 1.59vw, 1.563rem);
			font-weight: 500;
			line-height: 1.6;
			margin-bottom: 1.563rem;		
		}
		& p.txt__notice{
			font-size: var(--txt16, 1rem);
			font-weight: 400;
			margin-bottom: 0;		
		}
	}
		.cocoa__tasting{
			
				& h3{
					color: #34867D;
					font-weight: 700;
					font-size: var(--txt24, 1.5rem);
					align-items: center;
                	display: flex;
					
					}
				& p{
					margin-top: 5px;
					font-size: clamp(1.125rem, 0.967rem + 0.68vw, 1.313rem);
					line-height: 1.8;
					letter-spacing: 1px;
					grid-column: span 2 / span 2;
					grid-column-start: 1;
					grid-row-start: 2;
					}
			
			& .content__right{
				justify-content: center;
                display: flex;
                margin-top: 1rem;
				grid-column-start: 2;
    			grid-row-start: 1;
				}
			}
		.txt__red{
			    color: #F01340;
				font-weight: 700;
				font-size: clamp(1.125rem, 0.81rem + 1.36vw, 1.5rem);
				text-align: center;
				padding-block: 0.25rem;
			    margin-top: 1.563rem;
			    background-color: rgba(255, 255, 255, 0.55);
		}
	
	}	
/*** content__commitment **************************/			
#content__commitment {
    background-color: #E5E3E0;
	padding-bottom: 1.375rem;
}	
.commitment__detail__01 {
    background-color: #FDF5E7;
    margin-left: clamp(0.701rem, 0.366rem + 1.68vw, 0.889rem);
    display: flex;
    
    padding-bottom: 3.938rem;
	flex-direction: column;
    justify-content: center;
    align-items: center;
}
.commitment__detail__02 {
    background-color: #F5DCCD;
   
    margin-top: 37px;
    margin-right: clamp(0.701rem, 0.366rem + 1.68vw, 0.889rem);
    display: flex;
    padding-top: 5.25rem;
    padding-inline: 2.375rem;
    padding-bottom: 62px;
    flex-direction: column;	
}
.commitment__detail__03 {
    background-color: #DAE0DA;
    margin-left: clamp(0.701rem, 0.366rem + 1.68vw, 0.889rem);
    display: flex;
    
    padding-bottom: 5.938rem;
	padding-top: 5.25rem;
	margin-top: 37px;
	flex-direction: column-reverse;
	padding-inline: 2.375rem;
	align-items: center;
}
.commitment__detail__04 {
    background-color: #F8F9EA;
    
    margin-top: 37px;
    margin-right: clamp(0.701rem, 0.366rem + 1.68vw, 0.889rem);
    /*display: flex;*/
    padding-top: 5.25rem;
    padding-inline: 2.375rem;
    padding-bottom: 62px;
}
.commitment__flex__wrap{
	display: flex;
	flex-direction: column;
	}
.commitment__kv{
	position: relative;
	
	}
.title_position{
	position: absolute;
	bottom:0;
	display: flex;
        justify-content: center;
        width: 100%;
	}	
.title_position > h2{
	font-size: 1.5rem;
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	position: relative;
	display: inline-block;
	padding-left: 5.5rem;
	margin-bottom: 1rem;
    
	line-height: 1.2;
	display: flex;
    align-items: center;
	margin-inline: clamp(1.5rem, 0.39rem + 5.16vw, 2rem);

	}
.title_position > h2::before{
	position: absolute;
	content: "";
	background-image: url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_01_sp.png);
	left: 0;
	/*bottom: 0%;*/
	width: 68px;
	height: 69px;
	transform: translateY(-15%);
	}	
	
@scope (#content__commitment) {
  /* #content__commitmentの内部のみ適用 */
	.commitment__detail__01{
		& .commitment__txt__left{
				
			padding-inline: 2.169rem!important;
		}
		& .commitment__txt__right{
				padding-top: 2rem;
				padding-inline: 2.375rem;
				
			& h2{
				font-size: var(--txt40, 2.5rem);
				font-family: "Noto Serif JP", serif;
				font-weight: 700;
				position: relative;
				display: inline-block;
				padding-left: 7.5rem;
				margin-bottom: clamp(0.188rem, -6.264rem + 20.65vw, 4.188rem);
			}
			& h2::before{
				position: absolute;
    			content: "";
				background-image: url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_01_sp.png);
				left: 0;
				top: -50%;
				width: 68px;
				height: 69px;
				background-repeat: no-repeat;
			}
			& article p{
				font-size: var(--txt18, 1.125rem);
				line-height: 1.6;
				margin-bottom: 2rem;
			}
		}
	}
	.commitment__detail__02 {
		& .commitment__txt__left{
			    
			& h2{
				font-size: 1.688rem;
				font-family: "Noto Serif JP", serif;
				font-weight: 700;
				position: relative;
				
				padding-left: 5.5rem;
				margin-bottom: 2.188rem;
				display: flex;
                align-items: center;
			}
			& h2::before{
				position: absolute;
				content: "";
				background-image: url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_02_sp.png);
				left: 0;
				/*top: calc(-50% - 12px);*/
				width: 69px;
				height: 65px;
				transform: translateY(-15%);
			}
			& article p{
				font-size: var(--txt18, 1.125rem);
				line-height: 1.6;
				margin-bottom: 2rem;
			}
		}
		& .commitment__txt__right{
			    display: flex;
				align-items: center;
			    justify-content: center;
		}
	}
.commitment__detail__03{
		& .commitment__txt__left{
				

		}
		& .commitment__txt__right{
				padding-top: 0rem;
				
				
			& h2{
				font-size: 1.688rem;
				font-family: "Noto Serif JP", serif;
				font-weight: 700;
				position: relative;
				
				padding-left: 5.5rem;
				margin-bottom: 2.188rem;
				display: flex;
                    align-items: center;
			}
			& h2::before{
				position: absolute;
    			content: "";
				background-image: url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_03_sp.png);
				left: 0;
				
				width: 68px;
				height: 67px;
				transform: translateY(-15%);
			}
			& article p{
				font-size: var(--txt18, 1.125rem);
				line-height: 1.6;
				margin-bottom: 2rem;
			}
		}
	}
	
	.commitment__detail__04 {
		& h2{
				font-size: 1.688rem;
				font-family: "Noto Serif JP", serif;
				font-weight: 700;
				position: relative;
				
				padding-left: 5.5rem;
				margin-bottom: 2.188rem;
			    display: flex;
                align-items: center;
			}
			& h2::before{
				position: absolute;
				content: "";
				background-image: url(https://eceosjwtcom.ecbeing.biz/img/usr/freepage/natra/cocoa/icn_04_sp.png);
				left: 0;
				transform: translateY(-15%);
				width: 69px;
				height: 66px;
				background-repeat: no-repeat;
			}
		& .commitment__txt__left{
			    
			& article p{
				font-size: var(--txt18, 1.125rem);
				line-height: 1.6;
				margin-bottom: 2rem;
			}
		}
		& .commitment__txt__right{
			    display: flex;
				align-items: center;
				margin-left: 21px;
				
			    justify-content: center;
		}
	}
	}
	
/*** content__product__detail **************************/
#content__product__detail {
    background-color: #FCFBF9;
	padding-bottom: 3.438rem;
}
#content__product__detail .lead__txt {
		text-align: center;
		font-size: clamp(1rem, 0.553rem + 2.23vw, 1.25rem);
		line-height: 1.538;
		margin-top: 35px;
	   font-weight: 500;
	   padding-inline: 1.5rem; 
	}	
@scope (#content__product__detail) {
  /* #content__product__detailの内部のみ適用 */
	h2{
		font-family: "Noto Serif JP", serif;
		font-size: 1.25rem;
		text-align: center;
		background-color: #729128;
		color: #FFF;
		font-weight: 900;
		padding-block: 29px;
	}
	.content__area__cocoa,.content__area__plain {
    padding-inline: clamp(1rem, -1.418rem + 10.45vw, 3.875rem);
	}

	.detail__grid__plain {
		display: grid;
		grid-template-columns: 1fr;
			p.txt__detail {
				font-size: clamp(1rem, 0.218rem + 3.91vw, 1.438rem);
				margin-block: 18px 32px;
				line-height: 1.739;	
				}
			.title__inner__grid {
			border-bottom: solid 2px #97AA64;
			grid-column: span 2 / span 2;
			& h3{
				background-color: #97AA64;
				font-size: var(--txt22, 1.375rem);
				color: #fff;
				padding: 7px clamp(3rem, -0.364rem + 14.55vw, 7rem);
				display: inline-block;
				margin-top: 47px;
			}
			}
    }
	
	.img__inner__grid {
		grid-row-start: 2;
		padding-top: 39px;
		margin-inline: auto;
        width: 45%;
	}
	button.btn__inner__grid {
		background-color: #44674C;
		color: #fff;
		font-size: clamp(1.25rem, 1.027rem + 1.12vw, 1.375rem);
		font-weight: 700;
		padding: 6px 2.25rem 6px 1.25rem;
		border-radius: 15px;
		position: relative;
		height: max-content;
		margin-top: 15px;
		text-align: center;
    	grid-row-start: 3;
	}
	button.btn__inner__grid::before {
		content: '';
		width: 10px;
		height: 10px;
		border: 0;
		border-top: solid 2px #FFF;
		border-right: solid 2px #FFF;
		transform: rotate(45deg);
		position: absolute;
		top: 0;
		right: 22px;
		bottom: 0;
		margin: auto;
	}
	.txt__inner__grid {
    grid-row-start: 4;
    padding-top: 39px;
		& h4 {
				font-size: clamp(1.25rem, 1.027rem + 1.12vw, 1.375rem);
				font-weight: 700;
			}
	}
	
	.img__inner__grid__plain {
    grid-row-start: 5;
	}
	/***cocoa******************/
	.detail__grid__cocoa {
		display: grid;
		grid-template-columns:1fr;
		p.txt__detail__cocoa {
				font-size: clamp(1rem, 0.218rem + 3.91vw, 1.438rem);
				margin-block: 18px 32px;
				line-height: 1.739;	
				}
		.title__inner__grid {
			border-bottom: solid 2px #C3997B;
				& h3{
					background-color: #C3997B;
					font-size: var(--txt22, 1.375rem);
					color: #fff;
					padding: 9px clamp(3rem, -0.364rem + 14.55vw, 7rem);
					display: inline-block;
					margin-top: 47px;
				}
		}
		.btn__inner__grid {
			background-color: #924C1B;
			color: #fff;
			font-size: clamp(1.25rem, 1.027rem + 1.12vw, 1.375rem);
			font-weight: 700;
			padding: 6px 2.25rem 6px 1.25rem;
			border-radius: 15px;
			position: relative;
			height: max-content;
			margin-top: 0px;
			text-align: center;
			grid-row-start: 3;
			margin-top: 1rem;
		}
		.btn__inner__grid::before {
			content: '';
			width: 10px;
			height: 10px;
			border: 0;
			border-top: solid 2px #FFF;
			border-right: solid 2px #FFF;
			transform: rotate(45deg);
			position: absolute;
			top: 0;
			right: 22px;
			bottom: 0;
			margin: auto;
		}
    }
	}
	
/*** content__astraea **************************/
#content__astraea {
    background-color: #DB8899;
    padding: 25px clamp(0.938rem, -0.114rem + 4.55vw, 2.188rem);
}	
.astraea__detail {
    background-color: #fff;
    border-radius: 30px;
    padding: 23px clamp(1.375rem, 0.166rem + 5.23vw, 2.813rem) 18px clamp(1.375rem, 0.166rem + 5.23vw, 2.813rem);
    display: grid;
    grid-template-columns: 1fr;
}
.astraea__img__main {
	margin-inline: auto;
	width: 45%;
}
.astraea__img__main img {
    width: 100%;
    height: auto;
}	
.astraea__txt {
    font-size: var(--txt18, 1.125rem);
    font-weight: 500;
    line-height: 1.556;
	grid-row-start: 2;
	margin-top: 1rem;
}
.astraea__btn__wrapper {
    position: relative;
    display: grid;
    margin-top: 29px;
	grid-row-start: 3 !important;
}
button.btn__astraea {
    background-color: #BB4860;
    color: #fff;
    font-size: var(--txt22, 1.375rem);
    font-weight: 700;
    padding: 6px 2.25rem 6px 1.25rem;
    border-radius: 15px;
    position: relative;
    height: max-content;
    margin-top: 21px;
    text-align: center;
    grid-row-start: 3;
    width: 232px;
    margin-inline: auto;
}
button.btn__astraea::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 2px #FFF;
    border-right: solid 2px #FFF;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 22px;
    bottom: 0;
    margin: auto;
}
.astrea__img {
	margin-top: 1rem;
	margin-inline: auto;
	width: 45%;
    margin-inline: auto;
}
.astrea__img img {
    width: 100%;
    height: auto;
}	
@scope (#content__astraea) {
  /* #content__astraeaの内部のみ適用 */
	h2 {
    color: #fff;
    font-weight: 700;
   font-size: clamp(1.25rem, 0.724rem + 2.27vw, 1.875rem);
    text-align: center;
    margin-bottom: 15px;
	}
	.astraea__btn__wrapper{
		& p.txt_detail{
			font-size: var(--txt20, 1.25rem);
			font-weight: 600;
			line-height: 1.5;
		}
	}
	
	}
	
/*** content__set **************************/
.content__set {
    background-color: #EDF5E7;
    padding: 2.125rem clamp(1rem, -1.576rem + 11.14vw, 4.063rem);
}	
.set__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.set__detail {
    background-color: #fff;
    padding: 18px 25px;
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.set__detail p {
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 32px;
}
button.btn__set {
    background-color: #44674C;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    padding: 13px 2.25rem 13px 1.25rem;
    border-radius: 15px;
    position: relative;
    height: max-content;
    margin-top: 27px;
    text-align: center;
}
button.btn__set::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 2px #FFF;
    border-right: solid 2px #FFF;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 22px;
    bottom: 0;
    margin: auto;
}
@scope (.content__set) {
  /* #content__setの内部のみ適用 */
	.set__wrapper{
		& h2{
			font-size: clamp(1.375rem, 1.04rem + 1.68vw, 1.563rem);
			text-align: center;
			font-weight: 700;
		}
		& p.txt__lead{
			margin-block: 25px;
			text-align: center;
			font-size: clamp(1rem, 0.33rem + 3.35vw, 1.375rem);
			font-weight: 600;
		}
	}
	}
	
/*** content__product__info **************************/	
#content__product__info{
	background-color: #FFFBF6;
    padding-inline: clamp(0.5rem, -3.705rem + 18.18vw, 5.5rem);
	padding-bottom: 0.938rem;
	}	
.info__ingredients {
    padding: 17px clamp(1rem, -1.838rem + 12.27vw, 4.375rem) 28px;
    background-color: #fff;
}
/*いずれかのクラスを持つ場合*/
:is(.ingredients_01, .ingredients_02, .ingredients_03, .ingredients_04) {
  border-bottom: solid 1px #000;
  margin-bottom: 15px;
}
.ingredients_01 p {
    font-size: 0.938rem;
    font-weight: 600;
    line-height: 1.5;
    margin-block: 15px;
}
.ingredients_02 p {
    font-size: 0.938rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 25px;
}
.ingredients_03 p {
    font-size: 0.938rem;
    font-weight: 500;
    margin-bottom: 33px;
    margin-top: 17px;
}
.ingredients_04 p {
    font-size: 0.938rem;
    margin: 17px 0 33px;
    font-weight: 500;
}
ul.list_note {
		margin-top: 17px;
		font-size: 0.938rem;
		font-weight: 500;
		}

@scope (#content__product__info) {
    /* #content__product__infoの内部のみ適用 */
		h3{
		font-size: var(--txt16, 1rem);
		font-weight: 700;
		text-align: center;
		}
	.txt__notice {
		font-size: 14px;
		font-weight: 500;
		line-height: 1.333;
		}
	}
/*** download button **************************/
.btn__download{
	margin-top: 55px;
    margin-bottom: 247px;
    background-color: #743118;
    color: #fff;
    font-size: clamp(1.25rem, 0.987rem + 1.14vw, 1.563rem);
    font-weight: 700;
    padding: 0.625rem 2.25rem 0.625rem 1.25rem;
    border-radius: 34px;
    position: relative;
    width: min(634px, 90%);
    text-align: center;
		}
.btn__download::before{
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 2px #FFF;
    border-right: solid 2px #FFF;
    transform: rotate(45deg);
    top: 0;
    right: 22px;
    bottom: 0;
    margin: auto;
		}	
		
	}