@charset "utf-8";
.text-blue {
	color: #00A3E0;
}
.color-apple {
	color: #CDC600;
}
.color-peach {
	color: #EB6DA5;
}
.color-grape {
	color: #5BB430;
}
.section-about, .section-about_white {
	position: relative;
	overflow: hidden;
	padding-top: 67vw;
	padding-bottom: 3rem;
}
.section-about::before, .section-about_white::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 90%;
	height: 63vw;
	z-index: -1;
}
.section-about::before {
	background: url(../images/products/rakuna_jelly/content-image.jpg) no-repeat top right/contain;
}
.section-about_white::before {
	background: url(../images/products/rakuna_jelly/white/content-image-min.jpg) no-repeat top right/contain;
}
.photo-image {
	position: absolute;
	top: 54vw;
	right: 5%;
	line-height: 1.375;
}
.about-text {
	font-size: 1.25rem;
	line-height: 1.875;
	font-weight: 500;
}
.w-max-center {
	width: max-content;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}
@media all and (min-width: 576px) {
	.section-about, .section-about_white {
		padding: 4rem 0 7rem;
	}
	.section-about::before, .section-about_white::before {
		width: 50%;
		height: 100%;
	}
	.photo-image {
    top: 75%;
    right: 1%;
	}
}
@media all and (min-width: 768px) {
	.section-about, .section-about_white {
	  padding: 6rem 0 9rem;
	}
	.about-text {
	  font-size: 1.5rem;
	}
	.photo-image {
	    top: 70%;
	    right: 6%;
	}
}
@media all and (min-width: 992px) {
	.about-text {
		font-size: 2.22rem;
	}
	.section-about, .section-about_white {
	    padding: 6rem 0 11rem;
	}
	.photo-image {
    top: 29vw;
	}
}
@media all and (min-width: 1200px) {
}
@media all and (min-width: 1400px) {
	.section-about, .section-about_white {
	  padding: 6rem 0 12rem;
	}
}
@media all and (min-width: 1500px) {
	.photo-image {
	    top: 80%;
	}
}
/* ３つのＳ */
.three-s-section {
	background: rgb(228,239,246);
	background: linear-gradient(180deg, rgba(228,239,246,1) 0%, rgba(255,255,255,1) 100%);
}
.three-s-ttl {
	font-size: 3.33rem;
	letter-spacing: -.02em;
	line-height: 1;
	font-weight: 400;
}
.three-s-center_1_sp, .three-s-center_2_sp {
	color: #595757;
	display: block;
	letter-spacing: -0.05em;
}
.three-s-center_1_sp {
	font-size: 20px;
}
.three-s-center_2_sp {
	font-size: 34px;
	line-height: 1.1;
}
.three-s-ttl_safety {
	color: #6FB22C;
}
.three-s-ttl_smooth {
	color: #E0326E;
}
.three-s-ttl_save {
	color: #796BA8;
}
.three-s-ttl_sub {
	font-size: 1.2rem;
	font-weight: 500;
}
.three-s-text {
	font-size: 1.2rem;
	line-height: 1.5;
	max-width: 300px;
	margin-right: auto;
	margin-left: auto;
}
@media all and (min-width: 576px) {
	.three-s-center_1_sp {
		font-size: 32px;
	}
	.three-s-center_2_sp {
		font-size: 54px;
	}

}
@media all and (min-width: 768px) {
	.three-s-section {
		background: transparent url(../images/products/rakuna_jelly/three-s-bg.svg) no-repeat center top/cover;
		margin-top: -5rem;
	}
	.three-s-rounds-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		row-gap: 2.5rem;
		position: relative;
		margin-top: 7rem;
	}
	.three-s-round {
		width: 36%;
		height: 251px;
		border-radius: 50%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: .75rem;
		position: relative;
		z-index: 20;
	}
	.three-s-safety {
		border: 3px solid #6FB32C;
	}
	.three-s-smooth {
		border: 3px solid #E0326E;
	}
	.three-s-save {
		border: 3px solid #796BA8;
		margin-right: auto;
		margin-left: auto;
	}
	.three-s-ttl {
		font-size: 2rem;
		position: relative;
		padding-bottom: .75rem;
	}
	.three-s-ttl::after {
		content: '';
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: 3.5rem;
		height: 2px;
	}
	.three-s-safety .three-s-ttl::after {
		background-color: #6FB32C;
	}
	.three-s-smooth .three-s-ttl::after {
		background-color: #E0326E;
	}
	.three-s-save .three-s-ttl::after {
		background-color: #796BA8;
	}
	.three-s-ttl_sub {
		font-size: 1.06rem;
	}
	.three-s-text {
		font-size: 14px;
		text-align: center;
	}
	.three-s-center {
		display: flex;
		justify-content: center;
		padding: 2.25rem;
		text-align: center;
		position: absolute;
		top: 1.5rem;
		right: 0;
		left: 0;
		margin: auto;
		border-radius: 50%;
    border: 2px solid #BFE0F2;
    width: 42%;
    height: 292px;
    z-index: 10;
	}
	.three-s-center_1, .three-s-center_2 {
		display: block;
		color: #595757;
	}
	.three-s-center_1 {
		font-size: 1.25rem;
	}
	.three-s-center_2 {
		font-size: 2rem;
		line-height: 1;
		margin-bottom: 1rem;
	}
	.three-s-center-img {
		width: 130px;
	}
}
@media all and (min-width: 992px) {
	.three-s-rounds-wrap {
	  width: 698px;
	  margin-right: auto;
	  margin-left: auto;
	}
	.three-s-center_1 {
		font-size: 1.5rem;
	}
	.three-s-center_2 {
		font-size: 2.25rem;
	}
	.three-s-center-img {
		width: 140px;
	}
	.three-s-center {
	    width: 48%;
	    height: 335px;
	}
}
@media all and (min-width: 1200px) {
	.three-s-rounds-wrap {
    width: 53.6rem;
  }
  .three-s-round {
    width: 18.5rem;
    height: 18.5rem;
  }
  .three-s-ttl {
    font-size: 3.11rem;
  }
  .three-s-ttl::after {
    width: 4.4rem;
    height: 3px;
  }
  .three-s-ttl_sub {
  	font-size: 1.38rem;
  }
  .three-s-text {
  	font-size: 1rem;
  }
  .three-s-center {
      width: 25.72rem;
      height: 25.72rem;
  }
	.three-s-center_1 {
		font-size: 1.66rem;
	}
	.three-s-center_2 {
		font-size: 2.77rem;
	}
	.three-s-center-img {
		width: 160px;
	}
}
@media all and (min-width: 1400px) {
	.three-s-section {
	  margin-top: -6rem;
	}
	.three-s-center-img {
		width: 180px;
	}
}
/* //３つのＳ */

/* 6つのポイント */
.section-points.lazyloaded {
	background: url(../images/products/rakuna_jelly/points-bg.png) no-repeat top center/cover;
}
.point-box {
	padding: 3.66rem 0;
}
.point-box:not(:last-child) {
	border-bottom: 4px dotted #00A2DF;
}
.br-50 {
	border-radius: 50%;
}
.point-img-wrap {
	width: 250px;
	display: inline-block;
	padding: .77rem;
	border: 2px solid #00A2DF;
	border-radius: 50%;
}
.points-section-ttl {
	font-size: 2.77rem;
	font-style: italic;
	text-align: center;
}
.photo-image-text {
	padding-top: 1em;
}
.point-ttl {
	font-size: 1.5rem;
	line-height: 1.3;
}
.point-text {
	font-size: 1.06rem;
}
@media all and (min-width: 992px) {
	.point-img-wrap {
		width: 300px;
	}
}
@media all and (min-width: 1200px) {
	.point-ttl {
		font-size: 2.33rem;
	}
	.point-text {
		font-size: 1.44rem;
	}
	.point-img-wrap {
		width: 380px;
	}
}
/* //6つのポイント */

/* ラインナップ */
.lineup-ttl img {
	width: 250px;
}
.section-lineup {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.lazyloaded.section-apple {
	background-image: url(../images/products/rakuna_jelly/bg-apple_sp.png);
}
.lazyloaded.section-peach {
	background-image: url(../images/products/rakuna_jelly/bg-peach_sp.png);
}
.lazyloaded.section-grape {
	background-image: url(../images/products/rakuna_jelly/bg-grape_sp.png);
}
.lineup-name {
	font-size: 2.53rem;
	font-weight: 400;
	color: #fff;
	letter-spacing: .02em;
	text-shadow: 5px 5px 1.6px rgba(000,000,000,.1);
}
.content-photo {
	border-radius: 50%;
	border: 2px solid #fff;
}
.image-text {
	font-size: 13px;
	line-height: 1.2;
	position: relative;
	padding-left: 1em;
	width: max-content;
	margin-right: auto;
	margin-left: auto;
}
.image-text::before {
	content: '※';
	position: absolute;
	top: 0;
	left: 0;
}
.section-apple .product-info-btn {
	color: #B1C442;
	border-color: #B1C442;
}
.section-peach .product-info-btn {
	color: #C44980;
	border-color: #C44980;
}
.section-grape .product-info-btn {
	color: #399638;
	border-color: #399638;
}
.content-photo {
	width: 55%;
}

@media all and (max-width: 400px) {
	.lineup-name {
		font-size: 1.9rem;
	}
}

@media all and (min-width: 768px) {
	.lazyloaded.section-apple {
		background-image: url(../images/products/rakuna_jelly/bg-apple.png);
	}
	.lazyloaded.section-peach {
		background-image: url(../images/products/rakuna_jelly/bg-peach.png);
	}
	.lazyloaded.section-grape {
		background-image: url(../images/products/rakuna_jelly/bg-grape.png);
}
	.content-photo {
		border-width: 5px;
	}
	.lineup-name {
    font-size: 4rem;
    text-shadow: 0.83rem 0.83rem 0.28rem rgba(000,000,000,.1);
  }
}
@media all and (min-width: 992px) {
	.lineup-ttl img {
		width: 300px;
	}
	.image-text {
		font-size: 16px;
	}
	.lineup-name {
		font-size: 5.55rem;
	}
	.content-photo {
		width: 14.72rem;
	}
}
@media all and (min-width: 1200px) {
	.lineup-ttl img {
		width: 364px;
	}
}
/* //ラインナップ */



/* 成分一覧表 */
.ingredient-table-wrap tr th:nth-child(1) {
	width: 105px;
	min-width: 105px;
}
.ingredient-table-wrap th, .ingredient-table-wrap td {
	padding: .5rem .75rem;
}
.ingredient-table-wrap th.bg-waterblue {
	background-color: #BAE2F8;
}
.ingredient-table-wrap th:not(.bg-waterblue), .ingredient-table-wrap td {
	background-color: #fff;
}
.ingredient-table-wrap table, .ingredient-table-wrap th, .ingredient-table-wrap td {
	border: 2px solid #BAE2F8;
}
.ingredient-table-wrap small {
  display: block;
  font-weight: 400;
}
.ingredient-table-wrap .td-center td {
	text-align: center;
}
.border-bottom-double_wide {
  border-bottom-width: 6px!important;
  border-bottom-style: double!important;
}
.jan-wrap {
	display: flex;
	justify-content: space-between;
	margin-right: auto;
	margin-left: auto;
	width: 200px;
}
.th-variation span {
	display: inline-block;
	background-color: #fff;
	border-radius: 20px;
	text-align: center;
  padding: 0.2rem 0.6rem;
  margin: 0.15rem;
  line-height: 1.2;
} 
@media all and (min-width: 576px) {
	.ingredient-table-wrap tr th:nth-child(1) {
		width: 17%;
		min-width: 130px;
	}
}
@media all and (min-width: 992px) {
	.jan-wrap {
		width: 250px;
	}
	.ingredient-table-wrap {
		width: 700px;
		margin-right: auto;
		margin-left: auto;
	}
	.ingredient-table-wrap tr th:nth-child(1) {
	  min-width: 170px;
	}
}
@media all and (min-width: 1200px) {
	.th-variation span {
	  margin: 0.25rem;
	}
}
@media all and (min-width: 1400px) {
	.ingredient-table-wrap tr th:nth-child(1) {
    min-width: 190px;
	}
}
/* //成分一覧表 */

/*デスクトップ*/
@media all and (min-width: 992px) and (max-width: 1199px) {
}
/*中デバイス*/
@media all and (min-width: 768px) and (max-width: 991px) {
  
}
/*小デバイス*/
@media all and (min-width: 576px) and (max-width: 767px) {

}

@media all and (max-width: 400px) {

}

/*iPhone5:SE*/
@media all and (max-width: 320px) {

}