/*------------------------------
new Re・De Pot
COMMON スタイルシート
------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body .mv{opacity: 0;}
body.is_loaded .mv {opacity: 1;transition: opacity 0.4s 0.2s linear;}
.potNew {
	font-size: 1.6rem;
}
.en {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}
h1, .h1, h2, .h2, h3, .h3 {
	line-height: 1.6;
	text-align: center;
}
.footer_container-box h3 {
	line-height: 1.8;
}
.text-info, .text-info * {
	color: var(--color-d-grey);
	font-size: 80%;
	line-height: 1.8;
	margin-top: 1em;
}
.potNew footer {
    z-index: 2;
    position: relative;
	margin-top: 0;
}

[data-name="fade"] {
	opacity: 0;
}
[data-name="fade"].isShow {
	animation-name: fadeIn;
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*------------------------------見出し*/
.ttl {
	font-size: 162.5%;
	letter-spacing: 0.065em;
}
.ttl.sps {
	margin-bottom: 10vw;
}
.ttl em {
	font-weight: 600;
	font-style: normal;
}
.ttl_s {
	font-size: 131%;
	letter-spacing: 0.065em;
}
.leftTxt {
	text-align: left;
}
.maxweight {
	font-weight: 600;
}

.ttl_sub {
	font-size: 1.2rem;
	display: block;
	margin-bottom: 0.5em;
}
.heading-sub {
	display: block;
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: .1em;
}
/*------------------------------Flex*/
.flx {
	display: flex;
}
.flx.al-c {
    align-items: center;
}
.flx.al_center {
	align-items: center;
}
.flx.al_end {
	align-items:flex-end;
}
.flx.jsf_center {
	justify-content: center;
}
.flx.jsf_sbeen {
	justify-content: space-between;
}
.flx.col2 .col47{
	width: 47%;
}
.flx.col2 .col50{
	width: 50%;
}

.button {
	margin: 2em auto;
}
.button a {
	min-width: 160px;
	padding: .4em 1em;
	position: relative;
}
.button a:after {
	border-bottom: 2px solid #333333;
	content: "";
	position: absolute;
		bottom: 0;
		left: 0;
	width: 100%;
	transition: transform 0.2s 0s ease;
}
	[class^="button"]:hover {
		opacity:.5;
	}
	.button:hover a:after {
		transform: scaleX(.8);
	}
/*--------------Btn*/
a.moerBtn {
	display: inline-block;
	position: relative;
	margin-top: 2vw;
	font-size: 1.4rem;
	padding: 0 0.5rem 0 0.5rem;
}
a.moerBtn.r {
	padding: 0 0.2rem 0 0.2rem;
}
a.moerBtn::after {
	width: 100%;
	height: 1px;
	display: inline-block;
	content: '';
	background: #000;
	position: absolute;
	left: 0;
	bottom: 0;
	transform: scaleX(1.2);
	transition: transform 0.2s 0s ease;
}
a.moerBtn.r::after {
	transform: scaleX(1);
}
a.moerBtn:hover {
	opacity: 0.5;
}
a.moerBtn:hover::after {
	transform: scaleX(0.5);
	transition: transform 0.2s 0s ease;
}
/*------------------------------width*/
.inner {
	width: 56%;
	min-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}
.inner_sps {
	margin-bottom: calc(var(--spacing-common) * 5);
}
.cntBx {
	text-align: center;
}
.bg_gr {
	background: #E8E8E8;
	padding: 8vw 0;
}
.bg_gr + .bg_gr {
	padding: 0 0 8vw;
}

@media screen and (max-width:1200px) {
.inner {
	width: 90%;
	min-width: auto;
	}
}

@media screen and (max-width:768px) {
	.inner {
	width: 92%;
	min-width: auto;
	margin-left: auto;
	margin-right: auto;
	}
	.bg_gr {
	padding: 16vw 0;
	}
	.potNew {
	font-size: 1.4rem;
	}
	.flx.spcolm {
	flex-direction: column;
	}
	.flx.spcolm-rv {
	flex-direction: column-reverse;
	}
}


#main_area {
	background: #FFF;
	padding: 6vw 0;
	position: relative;
	z-index: 4;
}
.mv {
	position: sticky;
    top: 0;
}
.mv.lower {
  width: 100%;
  height: 100%;
  aspect-ratio: 960 / 241;
}
.readArea .ttl {
	line-height: 1.8;
	margin-bottom: 4vw;
}
.readArea .ttl span {
	display: inline-block;
	position: relative;
	font-size: 80%;
	margin-bottom: 2vw;
}
.readArea .ttl span::after {
	width: 98%;
	height: 1px;
	display: block;
	content: '';
	background: #707070;
}

#pot_top .mvInner {
	position: relative;
}
#pot_top .mv .mvInner h1{
	width: 26%;
	max-width: 420px;
	position: absolute;
	top: 45%;
	left: 60%;
	transform: translateY(-60%);
	margin-top: 0;
}
#pot_top .mv .mvInner h1 img {
	width: 100%;
	height: auto;
}

@media screen and (max-width:960px) {
	#pot_top .mv .mvInner h1{
	width: 70%;
	top: 14%;
	left: 50%;
	transform: translate(-50%, 0);
	margin-top: 0;
	}
}
	
@media screen and (max-width:768px) {
	#main_area {
	padding: 14vw 0;
	}
	.readArea .ttl {
	font-size: 2.2rem;
	margin-bottom: 4vw;
	}
	.readArea .ttl span {
	font-size: 60%;
	margin-bottom: 2vw;
	}
	.readArea p{
	font-size: 1.3rem;
	}
	.mv.lower {
	aspect-ratio: 195 / 293;
	}
	.mv.lower .ttl.sp {
	width: 100%;
	text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #FFF;
    line-height: 1.6;
    font-size: 2rem;
    }
}


.productColors .colorImg {
	margin-bottom: var(--spacing-common);
}
.productColors .colorImg li  {
	width: 24%;
}
.colorName li {
	margin: 0 1rem;
}
.featuresArea h3.en {
	color:#969696;
	font-size: 120%;
	margin-bottom: 3rem;
}
.featuresArea .features_menu.flx.inner_sps {
	flex-wrap: wrap;
	align-items:stretch;
	margin-bottom: calc(var(--spacing-common) * 8);
}
.featuresArea .features_menu li {
	width: 48%;
}
.featuresArea .features_menu li:nth-child(-n+2) {
	margin-bottom: calc(var(--spacing-common)*3);
}
.featuresArea .features_menu li:nth-child(2n) {
	margin-left: 4%;
}
.featuresArea .features_menu li section {
	position: relative;
	height: 100%;
	background: rgb(67,67,67);
	padding: 60px 40px 0 40px;
	box-sizing: border-box;
	color: #FFF;
	text-align: center;
	cursor: pointer;
}
.featuresArea .features_menu li section:hover {
	background: rgb(0,0,0);
	transition: background 0.4s 0s linear;
}
.featuresArea .features_menu li section h2.ttl {
	margin: 0 0 calc(var(--spacing-common)*1);
}
.featuresArea .features_menul li section p {
	margin-top: 0; 
	letter-spacing: 0.25em;
}
.featuresArea .features_menu li:nth-child(2) section p {
	padding-bottom: 1rem;
}
.featuresArea .features_menu li img {
	width: 36px;
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-40%, -50%);
}
.featuresArea .features_menu li:nth-child(1) img {
	width: 30px;
}
.textArea h2.ttl {
	margin: 0 0 2rem;
}
.textArea .numTxt {
	margin: 0 0 3rem;
	text-align: center;
}
.textArea .numTxt svg {
	width: auto;
	height: 54px;
}
.textArea .numTxt p {
	margin: 0 0 1rem;
}
#features1.img {
	width: 100%;
	height: 100%;
	aspect-ratio: 160 / 47;
}
#features1 .textArea  {
	transform: translateY(-18%);
}
#features2 ul.flx {
    justify-content: space-between;
    margin: calc(var(--spacing-common)* 3) 0 calc(var(--spacing-common)* 4);
}
#features2 ul.flx li {
	width: 30%;
}
#features2 ul.flx li h3 {
	margin-bottom: 1rem;
}
#features2 ul.flx li img {
	margin:0 0 2rem 0;
}
#features1 .textArea .numTxt .en,
#features2 .textArea .numTxt .en{
	color:#969696;
}
#features3 .textArea .numTxt .en,
#features4 .textArea .numTxt .en{
	color:#FFF;
}

@media screen and (max-width:768px) {
	.productColors .colorImg + .ttl + ul {
	margin-top: 0;
	}
	.productColors .colorImg li {
    width: 48%;
	}
	.ttl {
    font-size: 1.8rem;
    font-weight: 600;
	}
	.featuresArea .features_menu li section {
    padding: 40px 5% 0 5%;
    height: 86%;
	}
	.featuresArea .features_menu li section h2.ttl{
	font-size: 1.54rem;
	line-height: 1.6;
	}
	.featuresArea .features_menu li section h2.ttl + p {
	font-size: 1.25rem;
	margin-top: 0;
	}
	.featuresArea h3.en {
    font-size: 1.6rem;
    margin-bottom: 2rem;
	}
	.featuresArea .features_menu li:nth-child(-n+2) {
    margin-bottom: calc(var(--spacing-common) * 2);
	}
	#features1 {
	position: relative;
	padding-top: 8vw;
	}
	#features1 .textArea.cntBx {
	padding: 3rem 4% 0;
	 transform: translateY(0);
	}
	#features1 .textArea.cntBx .ttl + p {
	text-align: left;
	}
	#features1 .textArea.cntBx p br{
	display: none;
	}
	#features1 .numTxt.sp {
	width: 100%;
	margin: 0 ;
	text-align: center;
	position: absolute;
	z-index: 2;
	top: 60px;
	transform: translateY(0);
	}
	#features2 .inner {
	width: 100%;
	margin-bottom: 10vw;
	}
	#features2 .sp_scroll {
	overflow-x: auto;
	padding-bottom: 4vw;
	}
	#features2 ul.flx{
	width:calc((163px * 3) + 9%);
	margin-bottom: 0;
	}
	#features2 ul.flx li {
	width: 163px;
	margin-left: 3%;
	}
	#features2 ul.flx li h3 {
	font-size: 1.6rem;
	}
	#features2 ul.flx li img +p {
	line-height: 1.5;
	}
}

.featuresAreaBx {
  width: 100%;
  height: 100%;
  aspect-ratio: 64 / 21;
  position: relative;
}
.featuresAreaBx .bg{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.featuresAreaBx .textArea {
	width:calc(100vw/3.5);
	text-align: left;
	position: absolute;
}
.featuresAreaBx .textArea h2{
	text-align: left;
	margin-bottom: 0;
}
.featuresAreaBx .textArea a.en {
	display: inline-block;
	position: relative;
	margin-top: 2vw;
}
.featuresAreaBx .textArea a.en::after {
	width: 100%;
	height: 1px;
	display: inline-block;
	content: '';
	background: #FFF;
	padding: 0 0.2rem;
	position: absolute;
	left: 0;
	bottom: 0;
	transform: scaleX(1);
	transition: transform 0.2s 0s ease;
}
.featuresAreaBx .textArea a.en:hover::after {
	transform: scaleX(0.6);
	transition: transform 0.2s 0s ease;
}
.featuresAreaBx .textArea .numTxt {
	text-align: left;
	margin-bottom: 3vw;
}
#features3.featuresAreaBx .textArea {
	top: 60px;
	right: 14%;
	color: #FFF;
	padding: 2.6vw 0 0;
}
#features4.featuresAreaBx .textArea {
	bottom: 0;
	left: 14%;
	color: #FFF;
	padding: 0 0 4vw;
}
#design_color section .textArea {
	padding: 0 3% 2% 7%;
}
#design_color section:first-of-type .textArea {
	padding: 5% 8% 0 4%;
}
#design_color section:last-of-type .imageArea {
	margin-top: -10%;
}
.section_read {
	margin-bottom: 6vw;
}
#recipes .recipes_list {
	padding-top: 1.6rem;
}
#recipes .recipes_list li {
	width: 23%;
	line-height: 1.4;
	font-size: 112%;
	font-weight: 600;
}
a.opLink {
	opacity: 1;
	transition: opacity 0.4s 0s ease;
}
a.opLink:hover{
	opacity: 0.5;
}
a.imgLink {
	display: block;
	overflow: hidden;
}
a.imgLink img {
	transform: scale(1);
	transition: all 0.4s 0s ease;
}
a.imgLink:hover img {
	transform: scale(1.15);
	transition: all 0.4s 0s ease;
}
#recipes .recipes_list li div {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin-bottom:1rem;
	
}
#recipes .recipes_list li img {
	aspect-ratio: 1 / 1;
	height: auto;
}
#recipes h3.ttl.leftTxt {
	font-size: 150%;
	font-weight: 600;
}
#recipes h3.ttl.leftTxt +p {
	margin: 1rem 0 1.5rem;
}
#recipes p a.moerBtn {
	margin-top: 0;
	margin-left: 1rem;
}
#reviews {
	padding-bottom: 10vw;
}
/*------------------------------REVIEW*/
.slider-review {
	margin-bottom: calc(var(--spacing-common) * 3)!important;
}
.slider-review_item{
	border-left: 2px solid var(--color-grey);
	display: block;
	margin: 32px 0 0 16px;
	padding: 0 16px;
	position: relative;
}
.slider-review_item:before {
	background: url(../img/icon-quote.svg) no-repeat;
	background-size: contain;
	content: "";
	display: block;
	position: absolute;
	top: -16px;
	left: -8px;
	width: 16px;
	height: 12px;
}
.other_recipe_list li {
    margin: 0 8px;
}
@media screen and (max-width: 1360px) {
	.featuresAreaBx {
    aspect-ratio: 64 / 30;
	}
	.featuresAreaBx .textArea {
	    width: calc(100vw / 2.5);
	}
	.featuresAreaBx .textArea h2.ttl {
    font-size: 2rem;
	}
	#features3.featuresAreaBx .textArea {
	right: 5%;
	}
	#features4.featuresAreaBx .textArea {
	left: 5%;
	}
}
@media screen and (max-width: 768px) {
	.ttl span + svg {
	height: 24px;
	width: auto;
	}
	.featuresAreaBx {
	aspect-ratio: 195 / 224;
	}
	.featuresAreaBx .textArea {
    width: 80% ;
	}
	#features4.featuresAreaBx .textArea,
	#features3.featuresAreaBx .textArea {
    top: auto;
    right: 10%;
    color: #FFF;
    padding: 0 0 0;
    bottom: 40px;
    left: 10%;
	}
	.featuresAreaBx .numTxt{
	width: 100%;
	text-align: center;
	position: absolute;
	top: 80px;
	color: #FFF;
	}
	.featuresAreaBx .numTxt .en {
	margin-bottom: 0.8em;
	}
	#design_color .flx {
	flex-direction: column;
	align-items: center;
	}
	#design_color  .flx.al_end {
	flex-direction: column-reverse;
	}
	#design_color section .textArea {
	width: 86%;
	padding: 0 0;
	}
	#design_color section .imageArea {
	width: 86%;
	}
	#design_color section:last-of-type .imageArea {
    margin-top: 0;
	}
	#design_color section:last-of-type .textArea {
	padding: 6rem 0 3rem
	}
	#design_color section:first-of-type .textArea {
    padding: 0 0 3rem 0;
	}
	#recipes .recipe_header {
	display: flex;
	flex-direction: column-reverse;
	}
	#recipes .imageArea {
	width: 100%;
	height: 100%;
	aspect-ratio: 390 / 259;
	box-sizing: border-box;
	margin-bottom: 2rem;
	}
	#recipes .recipes_list.flx {
	flex-wrap: wrap;
	}
	#recipes .recipes_list li {
	width: 48%;
	font-size: 1.3rem;
	}
	#recipes .recipes_list li:nth-child(n+3) {
	margin-top: 1.6rem;
	}
	.section_read {
    font-size: 1.3rem;
	}
	#reviews {
	margin-bottom:calc(var(--spacing-common) * 8);
	}
	#recipes p a.moerBtn {
	margin-left: 0;
	}
}
.gallery_link {
	padding: 0 var(--spacing-common);
}
.gallery_link :is(.popup_movie_area, .popup_image_area) {
	width: calc(calc(100% - calc(var(--spacing-common) * 2)) / 4);
}
@media screen and (max-width: 769px) {
	.gallery_link {
	padding: 0 0;
	}
	#gallery.inner {
	width: 100%;
	}
	#gallery .slick-slide {
	margin: 0 12px;
	}
	h2 .heading-sub + svg {
	width: auto;
	height: 24px;
	}
	#gallery .slick-dots {
	position: static;
	}
}




/*ヒーローエリア*/
.hero {
	padding: calc(var(--spacing-common) * 2) 0;
	position: relative;
}
.hero + footer {
	margin-top: 0;
}

.hero_image {
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.hero_textbox {
	background: var(--color-white);
	margin: auto;
	max-width: 490px;
	padding: 32px;
}
.hero_textbox.left {
	margin-left: 16px;
}
.hero_textbox.right {
	margin-right: 16px;
}
.hero_textbox > * {
	margin-top: 0;
	margin-bottom: 0;
}
.hero_textbox > *:not(:last-child) {
	margin-bottom: var(--spacing-common);
}
.hero_textbox :is(h1, .h1, h2, .h2, h3, .h3) {
	line-height: 1.3;
}
.hero_textbox:is(.left, .right) *:not(.button, a) {
	text-align: left;
}

@media screen and (max-width: 960px) {
	.hero {
		padding-bottom: 50vh;
	}
	.hero_textbox:is(*, .left, .right) {
		margin: 0;
		max-width: unset;
	}
	.hero_textbox img:not([src*="svg"]) {
		display: block;
		margin: auto;
		max-width: 320px;
	}
}

.slick-dots {
	bottom: unset;
	display: flex;
		gap: 8px;
		justify-content: center;
	margin-top: var(--spacing-common);
}
.slick-dots li, .slick-dots li * {
	margin: 0;
	width: 8px;
	height: 8px;
}
.slick-dots li button:before {
	background-color: var(--color-common);
	border: 0;
	border-radius: 50%;
	color: transparent;
	cursor: pointer;
	font-size: 0;
	opacity: .5;
	outline: none;
	transition: .3s;
	width: 8px;
	height: 8px;
}
.slick-dots li.slick-active button:before {
	opacity: 1;
}

/* rice cooking */

#pot_cooking #cooking01 .textArea.col50 {
	width: 46%;
	padding: 0 2% 0 0;
	margin-left: 4%;
}
#pot_cooking #cooking01 .textArea.r.col50 {
	margin-left: 0;
	margin-right: 4%;
}
#pot_cooking #cooking01 .textArea.r .innerBx  {
	padding: 4rem 0 0 2%;
}
#pot_cooking #cooking01 .bg_gr {
	padding: 0 0;
	border-radius: 6px;
	margin-top: 2rem;
	line-height: 1.6;
}
#pot_cooking #cooking01 .bg_gr > div {
	padding: 2rem 4rem;
	font-size: 87.5%;
}
#pot_cooking #cooking01  h3 {
	padding-bottom: 2rem;
}
#pot_cooking #cooking01  p {
	margin-top: 1rem;
}
#pot_cooking #cooking01 .bg_gr p:first-of-type {
	margin-top: 0;
}
#pot_cooking #cooking02 .imageArea{ 
  width: 100%;
  height: 100%;
  aspect-ratio: 384 / 95;
  margin-bottom: 6vw;
}
@media screen and (max-width: 768px) {
	#pot_cooking #cooking01 .imgArea.col50 {
	width: 100%;
	}
	#pot_cooking #cooking01 .textArea.col50 {
	width: 100%;
	margin-left: 0;
	margin-right: 4%;
	}
	#pot_cooking #cooking01 .spcolm h3 + p,
	#pot_cooking #cooking01 h3 {
	text-align: center;
	}
	#pot_cooking #cooking01 p {
    margin-top: 0;
    margin-bottom: 2rem;
	}
	#pot_cooking #cooking01 .textArea.col50 {
	margin-right: 0;
	padding: 0 0 0 0;
	}
	#pot_cooking #cooking01 .textArea.r.col50 {
    margin-left: 0;
    margin-right: 0;
	}
	#pot_cooking #cooking01 .textArea.r .innerBx {
    padding: 4rem 0 0 0;
	}
	#pot_cooking #cooking01 .bg_gr {
	padding: 2rem 0;
	margin-bottom: 2rem;
	}
	#pot_cooking #cooking02 .imageArea {
    aspect-ratio: 39 / 47;
    margin-bottom: 10vw;
	}
}

/*slow cooking*/
#slow01 .col47.r.imgArea {
	margin-right: 3%;
}
#slow01 .col47.r.textArea {
	margin-left: 3%;
	padding: 0 10% 0 2%;
}
#slow01 .col47.l.imgArea {
	margin-left: 3%;
}
#slow01 .col47.imgArea.nsps {
	margin-top: -4%;
}
#slow01 .col47.l.textArea {
	margin-right: 3%;
	padding: 0 2% 0 10%;
}
#slow02 .linkBannerArea {
	margin-top: 5rem;
}
#slow02 .linkBannerArea li {
	position: relative;
}
#slow02 .linkBannerArea li:first-child {
	margin-bottom: 4rem;
}
#slow02 .linkBannerArea li a h3 {
	color: #FFF;
	margin: 0;
	width: 100%;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
}
@media screen and (max-width: 1260px) {
	#slow01 .col47.imgArea.nsps {
    margin-top: 0;
	}
}
@media screen and (max-width: 840px) {
	#slow01 .col47.l.textArea {
    padding: 0 2% 0 2%;
	}
	#slow01 .col47.r.textArea {
    padding: 0 2% 0 2%;
	}
}
@media screen and (max-width: 768px) {
	#pot_slow .col47 {
	width: 84%;
	}
	#slow01 .flx {
	margin-bottom: 20vw;
	}
	#slow01 .col47.r.textArea {
		margin-left: 0;
    padding: 0 0 0 0;
	}
	#slow01 .col47.l.textArea {
    margin-right: 0;
    padding: 0 0 0 0;
	}
	#slow01 .col47.imgArea.nsps {
    margin-top: 0;
	}
	#slow01 .col47.r.imgArea {
    margin-right: 0;
	}
	#slow01 .col47.l.imgArea{
	margin-left: 0;
	}
	#slow01 .col47.r.imgArea,
	#slow01 .col47.l.imgArea{
	margin-top: 4rem;
	}
	#pot_slow  .flx.al_end {
	align-items: center;
	}
	#pot_slow  #main_area .ttl.sps {
	margin: 10vw 0;
	}
	#slow02 .linkBannerArea li:first-child {
	margin-bottom: 1.5rem;
	}
	#slow02 .linkBannerArea li a h3 {
	font-size: 2.4rem;
	}
}

/*design and color*/
#pot_design.potNew footer {
	margin-top: 0 !important;
}
#pot_design.potNew #main_area {
	padding-bottom: 0;
}
#design01 .col47.r.imgArea {
	margin-left: 3%;
}
#design01 .col50.r.textArea {
	padding: 5% 5% 0 10%;
}
#design01 .col47.imgArea.nsps {
	margin: -14% 3% 0 0;
}
#design01 .col50.l.textArea {
	padding: 0 8% 0 4%;
}
#design02 .col50.r.textArea {
	padding: 0 5% 0 10%;
}
#design02 .col50.l.textArea {
	padding: 6% 5% 0 6%;
}
#design02 .col47.l.imgArea.nsps {
	margin: 0 3% 0 0;
}
#design02 .col47.r.imgArea.nsps {
	margin: -14% 0 0 3%;
}
#design02 .imgArea,
#design01 .imgArea {
	aspect-ratio: 305 / 407;
}
#pot_design .seriesInfo {
	position: relative;
}
#pot_design .seriesInfo h2 {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 3.5vw;
}
#pot_design .seriesInfo h2 img {
	max-width: 217px;
	width: 11%;
}
#pot_design .seriesInfo .bgImg {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 1;
}
#pot_design .seriesInfo .bg_color {
	background: #969696;
	width: 100%;
	padding: 60px 0;
	display: flex;
    flex-direction: column;
    justify-content: center;
	text-align: center;
}
#pot_design .seriesInfo .bg_color h3 {
	padding-bottom: 1.5rem;
}
#pot_design .seriesInfo .bg_color h3 + p{
	margin: 0 0;
}
#pot_design .seriesInfo .bg_color h3 img{
	width: 20.4%;
	max-width: 290px;
}
#pot_design .seriesInfo .bg_color a,
#pot_design .seriesInfo .bg_color {
	color: #FFF;
}
#pot_design .seriesInfo .bg_color ul.flx {
	align-items: center;
	justify-content: center;
	gap: 60px;
	padding-top: 1vw;
}
#pot_design .seriesInfo .bg_color ul.flx li a {
	font-size: 12px;
	letter-spacing: 0;
}
#pot_design .seriesInfo .bg_color ul.flx li a div {
	width: 112px;
	padding-bottom: 0.5rem;
	position: relative;
}
#pot_design .seriesInfo .bg_color ul.flx li a div::after {
	width: 100%;
	height: 1px;
	content:'';
	display: block;
	background: #FFF;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: scale(1);
	transition: all 0.4s 0s ease;
}
#pot_design .seriesInfo .bg_color ul.flx li a:hover div::after {
	transform: scale(0.5);
}
#pot_design .seriesInfo .bg_color ul.flx li a div svg {
	width: 90%;
}
#design02 section h2.ttl {
	padding-bottom: 1rem;
}
@media screen and (max-width: 768px) {
    #pot_design .flx.spcolm {
    align-items: center;
    }
	#pot_design .flx.col2 .col47,
	#pot_design .flx.col2 .col50{
	width: 84%;
	}
	#pot_design #design02 .flx.col2 .col47.l,
	#pot_design #design02 .flx.col2 .col47.r{
	width: 95%;
	margin-right: 5%;
	}
	#design02 .col50.r.textArea,
	#design02 .col50.l.textArea,
	#design01 .col47.imgArea.nsps,
	#design01 .col50.l.textArea,
	#design01 .col50.r.textArea {
    padding: 0 0 0 0;
	}
	#design01 .col47.r.imgArea {
    margin-left: 0;
	}
	#design01 .col47.imgArea.nsps,
	#pot_design .imgArea {
	margin-top: 4rem;
	}
	#design02.inner {
	width: 100%;
	}
	#design02 section,
	#design01 section {
	margin-top: 18vw;
	}
	#design02 .col47.r.imgArea.nsps {
	margin: 0 auto 0;
	}
	#design02 .col50.r.textArea,
	#design02 .col50.l.textArea {
	margin: 2rem auto 0;
	}
	#design02 .imgArea {
	height: 100%;
    aspect-ratio: 37 / 28;
	}
	#design02 .inner_sps {
	margin-bottom: calc(var(--spacing-common) * 2.5);
	}
	 #pot_design .ttl_sub + img {
	 height: 24px;
	 width: auto;
	 }
}



.slide-linkList {
	display: flex;
	gap: 12px;
	align-items: center;
}
.slide-linkList li {
	border-radius: 50%;
	padding: 4px;
	position: relative;
    width: 38px;
	height: 38px;
}
.slide-linkList li.active {
	border: 1px solid #C4C4C4;
}
.slide-linkList li .button{
	border: 1px solid;
	border-radius: 50%;
	color: transparent;
	cursor: pointer;
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0 0;
}
.slide-linkList li:first-child .button{
	background: #000;
}
.slide-linkList li:last-child .button{
	background: #E6E6E6;
}
.slide-linkList {
	margin-bottom: calc(var(--spacing-common) * 2.5) !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
.slider-colors li {
	text-align: center;
}
.slider-colors h3 {
	color: inherit;
	font-weight: bold;
	line-height: 1.6;
	margin-bottom: 1rem;
}
.slider-colors h4 {
	margin-bottom: 1rem;
}
.slider-colors .textArea {
	margin: 0 auto;
}
.slider-colors .textArea p{
	margin: 0 auto;
}
@media screen and (min-width:768px) {
	.slider-colors figure{
		width: 270px;
	}
}

@media screen and (min-width:769px) {
	.slick-slider figure img {
		transition: .3s;
	}
	.slick-slider:not(.slider-colors) li:hover figure img {
		transform: scale(1.1);
	}
}
.productImg {
	gap: 20px;
}
@media screen and (max-width:960px) {
	#pot_design .seriesInfo .bgImg {
	aspect-ratio: 1 / 1;
	}
	#pot_design .seriesInfo .bg_color {
	aspect-ratio: auto;	
	padding: 3.4rem 0 4rem;
	}
	#pot_design .seriesInfo .bg_color ul.flx {
	align-items: center;
    justify-content: center;
    gap: 2rem;
    padding-top: 1vw;
    flex-direction: column;
	}
	#pot_design .seriesInfo .bg_color h3 img {
    width: 70.4%;
	}
	#pot_design .seriesInfo h2 {
	width: 100%;
	top: 18vw;
	}
	#pot_design .seriesInfo h2 img {
	width: 70%;
	height: auto;
	}
}
@media screen and (max-width:840px) {
	.slider-colors figure{
		width: 56%;
		max-width: 270px;
	}
}
@media screen and (max-width:768px) {
	.slider-colors .textArea {
	width: 80%;
	margin:0 auto;
	}
	.slider-colors .textArea p{
	text-align: left;
	}
	.slider-colors .textArea p br {
	display: none;
	}
	.slide-linkList li {
	width: 30px;
	height: 30px;	
	}
	.slide-linkList li::after {
	width: 25px;
	height: 25px;
	}
	.slide-linkList li .button{
	width: 24px;
	height: 24px;
	}
	.productImg {
    gap: 10px;
	}
	#pot_design .seriesInfo h2 img {
	width: 40%;
	height: auto;
	}
}

boxy{
	overflow-y: hidden;
}
.noScroll {
	overflow-y: hidden;
}
#pot_ease #ease01 .inner_sps {
	margin-bottom: calc(var(--spacing-common) * 2);
}
#pot_ease .ttl + p {
	text-align: center;
}
#pot_ease #ease01 {
	border-top: 1px solid #333;
	padding-top: 160px;
	margin-top: 80px;
}
#pot_ease #ease01  h3.ttl_s {
	margin-bottom: 3rem;
}
#pot_ease #ease01 .flx {
	align-items: center;
}
#pot_ease #ease01 .flx .textArea {
	margin-left: 5%;
}
#pot_ease #ease01 .flx .textArea .note div {
	padding: 0 0 1rem;
}
#graph_Bx {
	width: 100vw;
	height: 100vh;
	background: rgba(255,255,255,1);
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s 0s linear;
}
#graph_Bx.show_chill {
	opacity: 1;
	pointer-events: auto;
	z-index: 11;
	transition: opacity 0.2s 0s linear;
}
#graph_Bx .inner {
	position: relative;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s 0.4s linear;
}
#graph_Bx.show_chill .inner {
    opacity: 1;
	transition: opacity 0.4s 0.4s linear;
}
#graph_Bx .graphImg {
	width: 40%;
}
#graph_Bx .graphImg img{
	width: 100%;
	height: auto;
}
.batsuOuter {
	display: inline-block;
	position: absolute;
	right: 5%;
	top: 5%;
}
.batsu {
	cursor: pointer;
	display: block;
	position: relative;
	width: 30px;
	height: 30px;
	opacity: 1;
	transition: opacity 0.4s 0s linear;
}
.batsu:hover {
	opacity: 0.5;
}
.batsu::before, .batsu::after { 
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px; 
  height: 30px; 
  background: #333;
}
.batsu::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
.batsu::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}

@media screen and (max-width:768px) {
	#pot_ease #ease01 {
	padding-top: 70px;
	margin-top: 70px;
	}
	#pot_ease #ease01.inner {
	width: 100%;
	}
	#pot_ease #ease01 .imgArea {
	width: 95%;
	margin: 0 5% 0 0;
	}
	#pot_ease #ease01 .inner_sps {
	margin-bottom: calc(var(--spacing-common) * 5);
	}
	#pot_ease #ease01 .flx .imgArea {
	margin-bottom: 4rem;
	}
	#pot_ease #ease01 .flx .textArea {
	width: 86%;
	margin: 0 auto ;
	}
	#pot_ease #ease01 .flx .textArea .note {
	margin-top: 2rem;
	}
	#graph_Bx .graphImg {
	width: 86%;
	}
}



#voiceArea {
	width: 100%;
	height: 100%;
	aspect-ratio: 240 / 76;
	background: url(../img/cooking/voice_bg.jpg) no-repeat 50% 50%;
	background-size: cover;
}
#voiceArea .inner {
	position: relative;
	max-width: 1280px;
	height: 100%;
	aspect-ratio: 240 / 61;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#voiceArea .voiceList {
	padding-bottom: 2rem;
}
#voiceArea .voiceList .piece {
	width: 40%;
	padding-bottom: 20px;
	position: relative;
	cursor: pointer;
	transform-origin: 50% 50%;
	will-change: opacity, transform;
	opacity: 0;
	transition: 0.4s ease-in-out;
}
#voiceArea .voiceList .piece.show {
	opacity: 1;
}
#voiceArea .voiceList .piece.num01 {
	width: 60%;
	left: 5%;
	transform: scale(1);
}
#voiceArea .voiceList .piece.num01 .textArea p {
	font-size: 2.8rem;
}
#voiceArea .voiceList .piece.num01:hover {
	transform: scale(1.2);
}
#voiceArea .voiceList .piece.num02 {
    width: 40%;
    left: 55%;
    transform: translateY(8%);
}
#voiceArea .voiceList .piece.num02 .textArea p {
	font-size: 2.2rem;
}
#voiceArea .voiceList .piece.num02:hover {
	transform: scale(1.2) translateY(10%);
}
#voiceArea .voiceList .piece.num03 {
	width: 44%;
	left: 11%;
    margin-top: -10%;
}
#voiceArea .voiceList .piece.num03 .textArea p {
	font-size: 1.8rem;
}
#voiceArea .voiceList .piece.num03:hover {
	transform: scale(1.2);
}
#voiceArea .voiceList .piece .piceWrp {
	background: rgba(255,255,255,0.8);
	border-radius: 20px;
	padding: 5% 4% 5%;
	box-sizing: border-box;
	position: relative;
}
#voiceArea .voiceList .piece .piceWrp.right::after {
 content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 50%;
  bottom: -30px;
  border-right: 16px solid rgba(255, 255, 255,0.8);
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  transform: rotate( 124deg);
}
#voiceArea .voiceList .piece .piceWrp.left::after {
 content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 20%;
  bottom: -30px;
  border-right: 16px solid rgba(255, 255, 255,0.8);
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  transform: rotate( 57deg);
}
#voiceArea .voiceList .piece:hover .piceWrp {
	background: rgba(255, 255, 255, 1);
}
#voiceArea .voiceList .piece:hover .piceWrp.left::after,
#voiceArea .voiceList .piece:hover .piceWrp.right::after {
    border-right: 16px solid rgba(255, 255, 255, 1);
}
#voiceArea .voiceList .piece .textArea{
	font-size: 142%;
	font-weight: 600;
	background: url(../img/cooking/voice_mark.svg) no-repeat 0 0;
	background-size: 6% auto;
	padding: 6% 0 0 7%;
}
#voiceArea .voiceList .piece .textArea p{
	line-height: 1.5;
}
#voiceArea .voiceList .piece .infoArea {
	padding-top: 1.5rem;
}
#voiceArea .voiceList .piece .infoArea h3,
#voiceArea .voiceList .piece .infoArea p {
	font-size: 80%;
	text-align: right;
	font-weight: 400;
	margin: 0;
	color: #656565;
}
.lp_checkpoint .textArea {
	width: 50%;
	padding: 0 8%;
	box-sizing: border-box;
}
.lp_checkpoint .textArea h2{
	font-size: 164.3%;
	text-align: left;
}
.lp_checkpoint .textArea p {
	font-size: 114.3%;
}
.lp_checkpoint .fdImg {
	width: 45%;
}
.lp_checkpoint div.flx:last-of-type .fdImg {
	margin-top: -4%;
}
.lp_endImgList {
	margin: 4vw 0 0;
}
.lp_endImgList li {
	width: 31%;
}
.fdImg {
	position: relative;
}
.fdImg li:nth-child(2){
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	animation: slidefd 6s linear infinite;
	animation-delay: -6.5s;
}
@media screen and (max-width: 1800px) {
	#voiceArea {
	    aspect-ratio: 240 / 88;
	}
}
@media screen and (max-width: 1600px) {
	#voiceArea {
	 aspect-ratio: 35 / 16;
	}
}
@media screen and (max-width: 1200px) {
	#voiceArea {
	aspect-ratio: 21 / 12;
	}	
}
@media screen and (max-width: 1024px) {
	#voiceArea {
	aspect-ratio: 21 / 12;
	}
	#voiceArea .inner {
	 aspect-ratio: 21 / 12;
	}
	#voiceArea .voiceList .piece.num02{
	transform: translateY(12%);
	}
}
@media screen and (max-width: 940px) {
	#voiceArea {
	aspect-ratio: 7 / 5;
	}
	#voiceArea .inner {
	 aspect-ratio: 7 / 5;
	 }
	#voiceArea .voiceList .piece.num01 {
    width: 80%;
    left: 0;
	}
	#voiceArea .voiceList .piece.num02 {
    width: 50%;
    left: 50%;
    transform: translateY(0%);
	}
}
@media screen and (max-width: 768px) {
	#voiceArea {
	width: 100%;
	height: 100%;
	min-height: auto;
	aspect-ratio: 393 / 400;
	position: relative;
	overflow: hidden;
	}
	#voiceArea .inner {
	height: 100%;
	aspect-ratio: 39 / 58;
	}
	#voiceArea .voiceList .piece {
	margin-bottom: 4rem;
	}
	#voiceArea .voiceList .piece.num01 {
	width: 100%;
	left: 0;
	transform: translateY(0);
	}
	#voiceArea .voiceList .piece.num02 {
	width: 100%;
	left: 0;
	transform: translateY(0);
	}
	#voiceArea .voiceList .piece.num03 {
	width: 100%;
	left: 0;
    transform: translateY(0);
    margin-top: 0;
	}
	.lp_checkpoint .textArea {
    width: 100%;
    padding: 0 0 10vw;
	}
	.lp_checkpoint .fdImg {
    width: 100%;
    margin: 0 0 16vw;
	}
	.lp_checkpoint .textArea h2 {
    font-size: 146%;
	}
}
@media screen and (max-width: 640px) {
	#voiceArea .inner,
	#voiceArea {
	aspect-ratio: 5 / 7;
	}
	#voiceArea {
	}
	#voiceArea .inner {
	justify-content: center;
	}
	#voiceArea .voiceList {
    padding-bottom: 0;
	}
	#voiceArea .voiceList .piece {
	margin-bottom: 2rem;
	}
	#voiceArea .voiceList .piece.num01 .textArea p {
    font-size: 2.2rem;
	}
	#voiceArea .voiceList .piece.num02 .textArea p {
    font-size: 1.8rem;
	}
	#voiceArea .voiceList .piece.num03 .textArea p {
    font-size: 1.5rem;
	}
	#voiceArea .voiceList .piece.num01 {
	margin-top: 1rem;
	}
	#voiceArea .voiceList .piece.num02 {
	margin-bottom: 0;
	}
}
@keyframes slidefd {
  0% {
    opacity: 0;
  }
  12.5% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  62.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

#pot_top #main_area .features {
	padding-top: 60px;
	margin-top: -68px;
}
@media screen and (max-width:768px) {
	#pot_top #main_area #features1.features {
	padding-top: 100px;
	}
	#pot_top #main_area #features1.features .img {
	margin-top: 20px;
	}
}