.collagen_drink_wrap{
	font-family: "Noto Sans TC", sans-serif;
}
.text-color-1{
	color: #16A7E6;
}
.text-color-2{
	color: #89ade6
}
.text-color-3{
	color: #f96daa
}
.text-color-4{
	color: #5f312f
}
.text-color-5{
	background: linear-gradient(to top, yellow 10%, white 35%);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}
.text-color-6{
	background: linear-gradient(to top, yellow 10%, white 70%);
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
}
.text-color-7{
	color: yellow;
}
.text-color-8{
	color: #79a6eb;
}
.text-color-9{
	color: #d3306b ;
}
.text-shadow-1{
	text-shadow: 0 0 5px #e27497, 
	0 0 20px #e27497, 
	0 0 30px #e27497, 
	0 0 25px #e27497, 
	0 0 25px #e27497;
}
.text-shadow-2{
	text-shadow: 0 0 0px #df5b89, 
	0 0 0px #df5b89, 
	0 0 5px #df5b89, 
	0 0 10px #df5b89, 
	0 0 30px #df5b89;
}
.bg-color-1{
	background: #df2e6c;
}
.bg-color-2{
	background: #ebeaf0;
}
.bg-color-3{
	background: #b32459;
}
.border-style-1{
	border: 2px solid #16A7E6;
}
.storke-1::before{
	position: absolute;
	content: attr(data-storke);
	z-index: -1;
	-webkit-text-stroke: 10px #16A7E6;
	white-space:nowrap;
}
.sec_1 .div-1{
	position: absolute;
	width: 50%;
	right: 0;
	top: 4%;
}
.sec_1 .div-2{
    position: absolute;
    width: 50%;
    right: 0;
    top: 38%;
}
.sec_1 .div-3{
	position: absolute;
	width: 63%;
	left: 0;
	top: 10%;
}
.sec_1 .div-3 p{
	font-size: 30px;
	width: 100%;
	padding-left: 60px;
}
.sec_1 .div-4{
	position: absolute;
    width: 38%;
    left: 12%;
    top: 38%;
}
.sec_1 .div-5{
	position: absolute;
    width: 60%;
    left: 3.5%;
    top: 15%;
}
.sec_1 .div-6{
	position: absolute;
	width: 29%;
	left: 0;
	top: 48%;
}
.sec_1 .div-7{
	position: absolute;
	width: 27%;
	left: 30%;
	top: 48%;
}
.sec_1 .div-8{
	position: absolute;
	top: 60%;
	left: 0;
	width: 100%;
}
.sec_1 .div-8 h3{
	margin-bottom: 0;
}
.sec_1 .div-9 > div{
	border-radius: 50%;
    width: 20%;
    aspect-ratio: 1 / 1;
}
.sec_1 .div-9 > div img{
	width: 60%;
	margin: auto;
	display: block;
}
.sec_1 .div-10{
	position: absolute;
	top: 5%;
	right: 1%;
	font-size: 35px;
}
.sec_1 .div-10 p{
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr ;
}
.sec_1 .text-1-1{
	position: relative;
	z-index: 10;
}
.sec_1 .text-1-1::after{
	position: absolute;
	left: 0;
	top: 14%;
	content: '自然光澤';
	text-shadow: 0 0 5px #e27497, 
	0 0 20px #e27497, 
	0 0 30px #e27497, 
	0 0 25px #e27497, 
	0 0 25px #e27497;
    z-index: -1;
}
.sec_1 .text-2{
	position: relative;
	z-index: 10;
	background: linear-gradient(to top, yellow 10%, white 70%);
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
}

.sec_2{
	background-color: #ebeaf0;
}
.sec_2 .div-1{
	padding: 20px 0;
	border-bottom: 1px dashed #fff;
}
.sec_2 .div-1:last-of-type{
	border-bottom: unset;
}
.sec_2 .img-1{
	position: absolute;
	width: 8%;
	right: 21%;
	top: 2%;
}
.sec_2 .div-1 img{
	width: 5%;
}
.sec_2 .div-1 p{
	color: #fff;
	line-height: 60px;
	font-size: 36px;
	padding-left: 15px;
}
.sec_2 .div-3 img:nth-of-type(2){
	width: 25%;
}
.sec_3 .div-1 img{
	width: 42%;
}
.sec_3 .div-1 .div-3{
	top: 9%;
	left: 7%;
	width: 54%;
}
.sec_3 .div-2{
	width: 50%;
    top: -9%;
    left: 59%;
}
.sec_3 .gradient-bg {
	background: linear-gradient(to top, rgba(235, 234, 240, 1), rgba(235, 234, 240, 0));
	height: 150px;
	width: 100%;
	position: absolute;
	z-index: 10;
	bottom: 0;
	left: 0;
}
.sec_5 .div-1{
	width: 32%;
	margin: auto;
}
.sec_5 .div-2{
	width: 86%;
	margin: auto;
	padding-top: 15%;
	margin-bottom: -12%;
}
.sec_5 .div-4{
	padding-top: 110px;
}
.sec_6 .div-1{
	padding-top: 110px;
}
.sec_6 .div-2{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 850px;
}
.sec_6 .div-3{
	width: 32%;
	position: absolute;
}
.sec_6 .div-3:nth-of-type(1){
	top: 0%;
	left: 17%;
}
.sec_6 .div-3:nth-of-type(2){
    top: 0%;
    right: 17%;
}
.sec_6 .div-3:nth-of-type(3){
	top: 34%;
	right: 0%;
}
.sec_6 .div-3:nth-of-type(4){
	top: 34%;
	left: 0%;
}
.sec_6 .div-3:nth-of-type(5){
	top: 68%;
	left: 17%;
}
.sec_6 .div-3:nth-of-type(6){
	top: 68%;
	right: 17%;
}
.sec_6 .div-4{
	margin-top: 60px;
	text-align: center;
	padding: 0 25px;
}
.sec_6 .div-4 p{text-align: center}
.sec_8 {
	background: url('https://img.daikenshop.co.jp/images/goods/collagen_drink/7sec/dots_bg.webp');
}
.sec_8 .div-1{
	width: 65%;/*modify v.1*/
	margin: auto;
	margin-top: 8%;
}
.sec_8 .div-1 h2{
	width: 65%;
    margin: auto;
    color: #fff;
    top: 12%;
    font-size: 50px;
}
.sec_8 .img-1{
	width: 6%;
}
.sec_8 .img-2{
	width: 70%;
}
.sec_8 .img-3{
	width: 84%;
}
.sec_8 .img-4{
	width: 6%;
}
.sec_8 .img-5{
	width: 56%;
}
.sec_8 .img-6{
	width: 70%;
}
.sec_8 .img-7{
	width: 85%;
}
.sec_8 .img-8{
	width: 80%;
}
.sec_8 .img-9{
	width: 80%;
}
.sec_9 .div-1{
	width: 75%;
	position: absolute;
	left: 26%;
	top: 39%;
	z-index: 10;
}
.sec_9 .div-2{
	width: 37%;
    position: absolute;
    top: 49%;
    left: 0%;
}
.sec_9 .div-3{
	bottom: 5%;
}
.sec_9 .div-4{
	padding: 10px 0;
}
.sec_9 .div-4 img{
	width: 5%;
	margin-right: 15px;
}
.sec_9 .text-1{
	-webkit-writing-mode: vertical-lr;
    writing-mode: vertical-rl;
    position: absolute;
    right: 10%;
    top: 5%;
    font-size: 50px;
}
.sec_9 .text-2{
	border: 1px solid #918e8e;
	width: 75%;
	margin: auto;
}
.sec_10{
	background: #fff4f7;
}
.sec_10 .img-1{
	width: 36%;
}
.sec_10 .img-2{
	width: 85%;
}
.sec_10 .div-1{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -75px;
}
.sec_10 .div-1 img:nth-of-type(1){
	width: 4%;
	margin-right: 10px;
}
.sec_10 .div-1 img:nth-of-type(2){
	width: 4%;
	margin-left: 10px;
}
.sec_10 .div-2{
	color: #706669;
	padding: 15px 0;
	border-bottom: 1px dashed #706669;
}
.sec_10 .div-2 img{
	width: 5%;
	margin-right: 15px;
}
.sec_10 .div-3{
	width: 72%;
	margin: auto;
}
.sec_11 { margin-top: 70px; }
.sec_11 .div-1{
	position: absolute;
    top: 34%;
    left: 0%;
    width: 100%;
}
.sec_11 .div-1 table svg{
    width: 32%;
}
.sec_11 .div-1 table{
	text-align: center;
	position: absolute;
	top: 25%;
	left: 0%;
	width: 100%;
	margin: auto;
	font-size: 30px;
}
.sec_11 .div-1 table td,.sec_11 .div-1 table th{
	width: 23.5%;
	border: 0;
	vertical-align: middle;
}
.sec_11 .div-1 table th:nth-of-type(1) {
    height: 156px;
}
.sec_11 .div-2{
	width: 47%;
	position: absolute;
	top: 12%;
	left: 41%;
}
.sec_11 .div-2 p{
	top: 50%;
}
.sec_11 .text-1{
	color: #fff;
	font-size: 28px;
	position: absolute;
	left: 59%;
	top: 14%;
}
.sec_11 .text-2{
	color: #fff;
	font-size: 28px;
	position: absolute;
	left: 85%;
	top: 14%;
}
.sec_12{
	background: #ffd4e0;
}

.sec_12 .div-2 {
	background: #fff4f8;
	display: flex;
	align-items: start;
	justify-content: space-between;
}
.sec_12 .div-2 h3 span{
	line-height: 42px;
	font-size: 50px;
	margin-right: 10px;
}
.sec_12 .div-2 h3{
	font-size: 34px;
	font-weight: 700;
}
.sec_12 .div-2 p span{
	font-size: 50px;
	margin-right: 10px;
	line-height: 32px;
}
.sec_12 .div-2 p{
	font-size: 28px;
}
.sec_12 .div-2 a{
	border-radius: 50%;
	border: 0;
	background: unset;
	display: block;
	width: 45px;
}
.sec_12 .div-2 .img-1{
	display: none;
	width: 100%;
}
.sec_12 .div-2 .img-2{
	display: block;
	width: 100%;
}
.sec_12 .div-2 .collapsed .img-1{
	display: block !important;
}
.sec_12 .div-2 .collapsed .img-2{
	display: none !important;
}
/*jp and tw compare*/
:root {--font-size-compare: 16px;}

.sec_table{
	font-family:"Noto Sans TC", sans-serif;
	position: relative;
	height: 1900px;
	z-index: 10;
}
.sec_table .text-shadow-2{text-shadow: 0 0 10px rgb(177 73 0);}
#table_compare_jptw { background-color: #03224d;padding-bottom:4rem}
#table_compare_jptw table {
  width: 94%;
  text-align: center;
  border: 2px solid #01092e;
  margin: auto;
}
#table_compare_jptw table td.text-left {text-align: left;}

#table_compare_jptw td,#table_compare_jptw th {
  border-bottom: 1px solid #b2b2b2;
  background-color: #ffffff;
  padding: calc(0.5 * var(--font-size-compare));
  font-size: calc(1.3 * var(--font-size-compare));
}
#table_compare_jptw td:nth-of-type(1){background-color: #f7f7f9;}
#table_compare_jptw th:nth-of-type(1),#table_compare_jptw td:nth-of-type(2){width: 44%;background-color: #fff0f0;}
#table_compare_jptw td.tcjw_w{background-color: #ffffff;text-align: left}
#table_compare_jptw th:nth-of-type(2),#table_compare_jptw td:nth-of-type(3) {width: 44%;background: #dbf9fd;}
#table_compare td:nth-of-type(1) {font-weight: 700;color: #0e6bb6;}
#table_compare_jptw .component~tr>td:nth-of-type(2) {
  font-size: calc(1.3 * var(--font-size-compare));
}
#table_compare_jptw .PD_01 img, 
#table_compare_jptw .PD_02 img {
  margin: auto;
}
#table_compare_jptw .PD_01_tit>span,#table_compare_jptw .PD_02_tit>span {
  color: #333333;
  font-size: calc(2 * var(--font-size-compare));font-weight: 400;padding-top:1rem;padding-bottom:1rem;display: block
}
#table_compare_jptw .PD_01>span,#table_compare_jptw .PD_02>span {
  color: #0e6bb6;
  font-size: calc(1.3 * var(--font-size-compare));font-weight: 700;
  text-shadow: -3px -3px 3px #fff,
              3px -3px 3px #fff,
              -3px 3px 3px #fff,
              3px 3px 3px #fff;
padding-top:1rem;padding-bottom:1rem;display: block
}


#table_compare_jptw .component td {
  color: #0e6bb6;
}
#table_compare_jptw td{padding:1rem;padding-top:2rem;padding-bottom:2rem;}
#table_compare_jptw .component td>span {
  font-size: calc(1.5 * var(--font-size-compare));
  font-weight: 700;
}

#table_compare_jptw .highlight {
  color: #333333;
  font-weight: 600;
  font-size: calc(1.5* var(--font-size-compare)) !important;
}
.compareTag{background-color:#fffa69;color:#000000;border-radius: 10rem;
	font-size: calc(1.6* var(--font-size-compare));
    width: calc(10 * var(--font-size-compare));
	height: calc(10 * var(--font-size-compare));
    left: 60%;
	top:-40%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
  position: absolute;
  transform: translateX(-50%);
}

@media (max-width: 991px) {
#table_compare_jptw .highlight {font-size: calc( 2 * var(--font-size-compare)) !important;}
	}

@media (max-width: 450px) {
.sec_table{height: 2310px;}
 #table_compare_jptw td {
    font-size: calc(1.8 * var(--font-size-compare));
  }
#table_compare_jptw .PD_01>span,#table_compare_jptw .PD_02>span {font-size: calc(1.8 * var(--font-size-compare));}
#table_compare_jptw th:nth-of-type(1),#table_compare_jptw td:nth-of-type(2),
#table_compare_jptw th:nth-of-type(2),#table_compare_jptw td:nth-of-type(3){font-size: calc(1.8 * var(--font-size-compare));}
#table_compare_jptw .component td>span {
  font-size: calc(1.8 * var(--font-size-compare));
  font-weight: 700;
}
#table_compare_jptw .component~tr>td:nth-of-type(2) {
  font-size: calc(1.8 * var(--font-size-compare));
}
}

@media (max-width: 375px) {
#table_compare_jptw td {font-size: calc(1.3* var(--font-size-compare));}
	.LP04_03{top:3%;letter-spacing: -0.2px}
}
@media (max-width: 320px) {
 #table_compare_jptw td {
    font-size: calc(1.35* var(--font-size-compare));
  }
	}
.sec_table .highlight {
    background: linear-gradient(0deg, #fcff00 40%, transparent 40%);
    font-size: calc(2.3 * var(--font-size-fishOil));
}