#PRODETAILBOX.basic #HOWTITLEBOX {padding: 0;}

#PRODETAILBOX.howTROPICALnew #bubbles { width: 100vw; overflow: hidden; top: 0; left: 0; }
#PRODETAILBOX.howTROPICALnew .bubble { position: absolute; bottom: -30vh; background-color: transparent; border: 1px solid #fff; border-radius: 50%; }
#PRODETAILBOX.howTROPICALnew #HOWTITLEBOX{ position: relative; }

#PRODETAILBOX.basic #HOWTITLE {
display: flex;
justify-content: center;
align-items: center;
margin-top: 4rem;
}

#PRODETAILBOX.basic #HOWTITLE .title01 {
width: 60%;
position: relative;
}

#PRODETAILBOX.basic #HOWTITLE .title01 img {
  max-width: 59rem; 
  width: 100%;
}

#PRODETAILBOX.basic #HOWTITLE .title02 {
width: 30%;
margin-left: -2rem;
}

#PRODETAILBOX.basic #HOWTITLE .title02 img {max-width: 30rem; margin-left: 1%; width: 100%;}



#PRODETAILBOX.basic #TITLEBOX {
  position: relative;
  background:
    linear-gradient(to bottom, rgba(115, 202, 220, 0) 80%, #73cadc 100%),
    url(../how/img/webp/tr_about_08_backimg01.webp) no-repeat center top;
  background-size: cover, cover; /* ←両方 cover に */
  background-repeat: no-repeat;
  background-position: center top;
  background-color: #73cadc;
}


#PRODUCT.hownew #PRODETAILBOX.basic ol.howmenu li a {background-color: #005bac;}
#PRODUCT.hownew #PRODETAILBOX.basic ol.howmenu li.navi01 a:before {
background: url(/how/img/webp/tr_about_08_icon01.webp) no-repeat;
background-size: contain;
}
#PRODUCT.hownew #PRODETAILBOX.basic ol.howmenu li.navi02 a:before {
background: url(/how/img/webp/tr_about_08_icon02.webp) no-repeat;
background-size: contain;
}
#PRODUCT.hownew #PRODETAILBOX.basic ol.howmenu li.navi03 a:before {
background: url(/how/img/webp/tr_about_08_icon03.webp) no-repeat;
background-size: contain;
}
#PRODUCT.hownew #PRODETAILBOX.basic ol.howmenu li.navi04 a:before {
background: url(/how/img/webp/tr_about_08_icon04.webp) no-repeat;
background-size: contain;
}

#PRODUCT.hownew #PRODETAILBOX.basic section#H01 .inner {
background: rgba(255, 255, 255, 0.9);
padding: 6rem 2rem;
border-radius: 1rem;
}

#PRODETAILBOX.basic #H01 {
  background: linear-gradient(0deg, rgb(121 203 221) 0%, rgb(223 247 252) 50%, rgb(116 201 220) 100%);
  padding-top: 50px;
  margin-top: -1px;
}


#PRODETAILBOX #H01 .image01  {
display: flex;
justify-content: space-between;
margin: 3rem auto;
max-width: 69rem;
}

#PRODETAILBOX #H01 .image01 img,
#PRODETAILBOX #H01 .image02 img  {
    width: 40%;
}

#PRODETAILBOX #H01 .image02 {
display: flex;
justify-content: space-between;
margin: 3rem auto 0rem;
max-width: 69rem;
}






#PRODETAILBOX #H01 .tr08_purple {
color: #8f82bc;
font-size: 20px;
font-weight: 600;
}

#PRODETAILBOX #H01 .tr08_recommendation {
display: flex;
align-items: center;
gap: 3rem;
margin: 2rem 0;
}

#PRODETAILBOX #H01 .tr08_recommendation .tr08_white {
color:white;
background-color:#8f82bc ;
padding: 1rem;
border-radius: 1rem;
}

#PRODETAILBOX #H01 .tr08_recommendation .tr08_black {
color: black;
background-color: #f4b4d0;
padding: 1rem;
border-radius: 1rem;
}

#PRODETAILBOX #H01 .image03 {
display: flex;
gap: 4rem;
margin-bottom: 4rem;
}

#PRODETAILBOX #H01 .image03 li img,
#PRODETAILBOX #H01 .image04 li img {
margin-bottom: 2rem;
}

#PRODETAILBOX #H01 .image03 li,
#PRODETAILBOX #H01 .image04 li {
width: 50%;
}

#PRODETAILBOX #H01 .image03 li p,
#PRODETAILBOX #H01 .image04 li p {
padding: 0;
}

#PRODETAILBOX #H01 .image04 {
display: flex;
gap: 4rem;
}

#PRODETAILBOX #H01 .image04-txt {
margin: 1rem 0rem 4rem;
}


#PRODETAILBOX #H01 .notice-list{
background: #FFF9E0;
padding: 10px 20px;
border-radius: 8px;
}

#PRODETAILBOX #H01 .notice-list li {
margin: 0 0 0.5em 1.5em;
position: relative;
margin: 0 0 1em 1.5em;
padding: 0;
list-style: none;
font-size: 1.6rem;
line-height: 1.6;
text-align: left;
}



#PRODETAILBOX #H01 .notice-list li:last-child {
  margin-bottom: 0;
}

#PRODETAILBOX.basic #H02, #PRODETAILBOX.basic #H04{
background-image: url(../how/img/webp/tr_about_08_backimg02.webp);
background-repeat: no-repeat, no-repeat;
background-position: center -27px, center top;
    background-color: #67c5da;
background-size: 100% auto, 100% auto;
padding-top: 50px;
margin-top: -1px;
}

#PRODETAILBOX.basic #H03 {
    background: linear-gradient(0deg, rgb(121 203 221) 0%, rgba(206, 242, 251, 1) 25%, rgba(191, 238, 250, 1) 50%, rgba(173, 234, 249, 1) 75%, rgb(103 197 218) 100%);
}

#PRODETAILBOX .step1 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#PRODETAILBOX .number-pink {
position: relative;
padding: 1rem 0 1rem 0;
font-weight: bold;
}

#PRODETAILBOX .number-pink::before{
content: "1";
display: inline-block;
background-color: #f4b4d0;
color: white;
border-radius: 50%;
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
margin-right: 0.5em;
font-size: 1em;
vertical-align: middle;
}


#PRODETAILBOX .step1 li {
width: 48%;
padding-bottom: 1rem;
display: flex;
flex-direction: column;
}

#PRODETAILBOX .image05 {
display: flex;
flex-grow: 1; 
align-items: flex-end;
width: 100%;
justify-content: center;
}

#PRODETAILBOX .number-pink-2::before {
  content: "2";
}
#PRODETAILBOX .number-pink-3::before {
  content: "3";
}
#PRODETAILBOX .number-pink-4::before {
  content: "4";
}

#PRODETAILBOX .image05 img {
  object-fit: contain;
}

#PRODETAILBOX #H02 .step1 li:nth-child(1) .image05 img:nth-of-type(1){
  max-width: 16rem;
width: 50%;
}
#PRODETAILBOX #H02 .step1 li:nth-child(1) .image05 img:nth-of-type(2){
  max-width: 16rem;
width: 50%;
}
#PRODETAILBOX #H02 .step1 li:nth-child(2) .image05 img:nth-of-type(1){
  max-width: 16rem;
width: 50%;
}
#PRODETAILBOX #H02 .step1 li:nth-child(2) .image05 img:nth-of-type(2){
max-width: 16rem;
width: 50%;
}

#PRODETAILBOX #H02 .step1 li:nth-child(3) .image05 img  {
max-width: 16rem;
}

#PRODETAILBOX #H02 .step1 li:nth-child(4) .image05 img {
max-width: 16rem;
}

#PRODETAILBOX #H02 .aquatic-plantscontainer {
margin-top: 5rem;
border: solid 2px #bcd64f;
border-radius: 2rem;
}

#PRODETAILBOX #H02 .aquatic-plantscontainer p {
font-weight: 700;
}

#PRODETAILBOX #H02 .plants-recommend {
background: #bcd64f;
border-top-left-radius: 1.7rem;
border-top-right-radius: 1.7rem;
padding: 2rem;
color: white;
font-size: 2rem;
}

#PRODETAILBOX #H02 .aquatic-plantscontainer ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
padding: 2rem;
margin: 0;
gap: 1rem;
}

#PRODETAILBOX #H02 .aquatic-plantscontainer ul .aquatic-plants-light {
width: 32%;
margin-bottom: 1rem;
display: flex;
align-items: center;
}

#PRODETAILBOX #H02 .aquatic-plantscontainer ul .aquatic-plants-light img {
width: 52%;
object-fit: contain;
filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
}

#PRODETAILBOX #H02 .aquatic-plantscontainer ul li:nth-child(4) {
width: 31%;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}


#PRODETAILBOX #H02 .aquatic-plantscontainer ul li:nth-child(5) {
width: 31%;
display: flex;
flex-direction: column;
align-items: center;
}

#PRODETAILBOX #H02 .aquatic-plantscontainer ul li:nth-child(6) {
width: 30%;
}

#PRODETAILBOX #H02 .aquatic-plantscontainer ul li:nth-child(6) p {
background-color: #FEEFBD;
border-radius: 50%;
font-weight: bold;
width: 20rem;
height: 20rem;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}

#PRODETAILBOX #H02 .aquatic-plantscontainer ul li:nth-child(6) p {
padding: 0;
}

#PRODETAILBOX #H02 div.howproLINK {
border: 3px solid #e85298;
}
#PRODETAILBOX #H02 div.howproLINK div.howproITEM span {
background: #e85298;
}

#PRODETAILBOX #H02 div.howproLINK div.howproITEM span::after {
  border-left: 14px solid #e85298;
}

#PRODETAILBOX #H03 .image06 {
display: flex;
width: 100%;
align-items: end;
}

#PRODETAILBOX #H03 .image06 li {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
}

#PRODETAILBOX #H03 .image06 li img {
max-width: 30rem;
}

#PRODETAILBOX #H03 .image06 li p {
font-weight: bold;
text-align: center; 
}

#PRODETAILBOX #H03 .step1 li:nth-child(1) .image05 img{
max-width: 28rem;
}
#PRODETAILBOX #H03 .step1 li:nth-child(2) .image05 img  {
max-width: 28rem;
}

#PRODETAILBOX #H03 .step1 li:nth-child(3) .image05 img:nth-of-type(1)  {
width: 50%;
max-width: 16rem;
}

#PRODETAILBOX #H03 .step1 li:nth-child(3) .image05 img:nth-of-type(2) {
width: 50%;
max-width: 16rem;
}

#PRODETAILBOX #H03 .step1 li:nth-child(4) .image05 img {
max-width: 16rem;
width: 50%;
}

#PRODETAILBOX .try-box {
width: 100%;
background-color: #fff3c3;
position: relative;
margin-top: 10rem;
padding: 2rem;
border-radius: 2rem;
}

#PRODETAILBOX .try-box-inner {
width: 46%;
}

#PRODETAILBOX .try-box img {
max-width: 30rem;
position: absolute;
top: -2rem;
right: 0;
}

#PRODETAILBOX .try-box-txt {
border: 2px solid #f39800;
color: #f39800;
text-align: center;
font-size: 2rem;
font-weight: bold;
margin: 2rem;
border-radius: 1rem;
}

#PRODETAILBOX .try-box-txt02 {
margin: 2rem;
}

#PRODETAILBOX #H03 .image07 {
display: flex;
gap: 2rem;
width: 100%;
margin: auto;
justify-content: center;
}

#PRODETAILBOX #H03 .image07 img:nth-child(1) {
  width: 40%;
}
#PRODETAILBOX #H03 .image07 img:nth-child(2)  {
width: 50%;
}

#PRODETAILBOX #H03 .step2 {
background-color: #FEEFBD;
border-radius: 8px;
padding: 2rem 3rem;
margin-top: 5rem;
}

#PRODETAILBOX #H03.step2 li {
padding-bottom: 3px;
}

#PRODETAILBOX #H03.step2 li:last-child {
padding-bottom: 0;
}

#PRODETAILBOX #H03 .image08 {
display: flex;
gap: 2rem;
padding: 0;
margin: 3rem 0;
}

#PRODETAILBOX #H03 .image08 li {
display: flex;
flex-direction: column;
align-items: center;
}

#PRODETAILBOX #H03 .image08 li img {
width: 13rem;
}

#PRODETAILBOX #H03 .image08 li p {
margin: 0;
line-height: 1.4;
}


#PRODETAILBOX #H04 .image09,
#PRODETAILBOX #H04 .image11 {
display: flex;
justify-content: space-between;
gap: 2rem;
}

#PRODETAILBOX #H04 .image09 p,
#PRODETAILBOX #H04 .image11 p {
width: 70%;
margin-top: 2rem;
}

#PRODETAILBOX #H04 .image09 img {
max-width: 24rem;
}

#PRODETAILBOX #H04 .image11 img {
max-width: 19rem;
}

#PRODETAILBOX #H04 .charm02 {
display: flex;
justify-content: space-around;
width: 100%;
}

#PRODETAILBOX #H04 .charm02 ol {
    width: 65%;
}

#PRODETAILBOX #H04 .charm02 .step li {
width: 100%;
float: inherit;
margin-left: 0;
padding-bottom: 2rem;
}

#PRODETAILBOX #H04 .charm02 .step li:first-child, #PRODETAILBOX #H04 .charm02 .step li:nth-child(2n+1) {
margin-left: 0%;
clear: both;
}

#PRODETAILBOX #H04 .charm02 .step li p.sttit {
position: relative;
padding: 10px 0 8px 30px;
font-weight: bold;
}

#PRODETAILBOX #H04 .charm02 .image10 {
width: 35%;
margin-top: 2rem;
display: flex;
flex-direction: column;
align-items: flex-end;
}

#PRODETAILBOX #H04 .charm02 .image10 img {
max-width: 22rem;
}

#PRODETAILBOX #H04 .charm02 .step li p.sttit::before {
background-color: #f4b4d0;
}

#PRODETAILBOX #H04 .try-box-inner {
width: 60%;
}

#PRODETAILBOX #H04 .try-box img {
max-width: 20rem;
position: absolute;
top: -1rem;
right: 0;
}

#PRODETAILBOX #H04 .try-box {
margin-top: 6rem;
}

#PRODETAILBOX #H04 .try-box-txt {
color: #f39800;
font-size: 2.5rem;
font-weight: bold;
margin: 2rem;
border-radius: 1rem;
border: none;
text-align: unset;
}

#PRODETAILBOX #H04 .image12 {
display: flex;
gap: 3rem;
justify-content: center;
margin-top: 2rem;
}

#PRODETAILBOX #H04 .image12 li:first-child {
width: 30%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

#PRODETAILBOX #H04 .image12 li:first-child p {
  text-align: center;
  font-weight: bold;
}

#PRODETAILBOX #H04 .image12 li:last-child {
width: 51%;
}

#PRODUCT.hownew #PRODETAILBOX.basic h2 {
margin-top: 30px;
border-top: dotted #e60012 7px;
border-bottom: dotted #e60012 7px;
position: relative;
font-size: 23px;
text-align: center;
padding: 15px 0;
border-top: dotted #005bac 7px;
border-bottom: dotted #005bac 7px;
margin-bottom: 40px;
}

#PRODUCT.hownew #PRODETAILBOX.basic h2 strong { color: #e85298;}


#PRODETAILBOX.basic h3.hownewTITLE:before {
background: #e85298;
position: absolute;
left: 0;
top: 10px;
content: '';
width: 15px;
height: 15px;
border-radius: 50%;
}

#PRODUCT.hownew h3.hownewTITLE {
position: relative;
padding-left: 20px;
font-size: 20px;
font-weight: 600;
margin: 60px 0 10px;
}


@media screen and (max-width: 768px) {
#PRODETAILBOX #H02 .aquatic-plantscontainer ul {
flex-direction: column;
}
#PRODETAILBOX #H02 .aquatic-plantscontainer ul .aquatic-plants-light {
max-width: 40rem;
margin: auto;
justify-content: center;
width: 100%;
}
#PRODETAILBOX #H02 .aquatic-plantscontainer ul li:nth-child(4),
#PRODETAILBOX #H02 .aquatic-plantscontainer ul li:nth-child(5),
#PRODETAILBOX #H02 .aquatic-plantscontainer ul li:nth-child(6) {
max-width: 40rem;
margin: auto;
width: 100%;
}


}

@media screen and (max-width: 700px) {

#PRODETAILBOX.basic #H01 {
padding-top: 1rem;
margin-top: 0;
}

}


@media screen and (max-width: 425px) {

#PRODETAILBOX.basic #HOWTITLE .title02 img {
display: none;
}

#PRODETAILBOX #H01 .image02,
#PRODETAILBOX #H01 .image01 {
align-items: center;
gap: 3rem;
flex-direction: column;
}

#PRODETAILBOX #H01 .image02 img,
#PRODETAILBOX #H01 .image01 img {
        width: 28rem;
}

#PRODETAILBOX #H03 .image06 {
flex-direction: column;
}

#PRODETAILBOX #H03 .image06 li {
width: 100%;
}

#PRODETAILBOX #H03 .image07 {
flex-direction: column;
}

#PRODETAILBOX #H03 .image07 img:nth-child(1),
#PRODETAILBOX #H03 .image07 img:nth-child(2) {
  width: 100%;
}

#PRODETAILBOX #H04 .image09,
#PRODETAILBOX #H04 .image11 {
flex-direction: column;
align-items: center;
}

#PRODETAILBOX #H04 .image09 p,
#PRODETAILBOX #H04 .image11 p {
width: 100%;
}
}







@media only screen and (min-width:1px) and (max-width:550px) {


#PRODETAILBOX.basic #HOWTITLE {display: block; margin: 0 auto;}
#PRODETAILBOX.basic #HOWTITLE .title01 {margin: 3rem 0; width: 100%;}
#PRODETAILBOX.basic #HOWTITLE .title01 img {max-width: 32rem;;margin: auto; display: flex;}
#PRODETAILBOX.basic #HOWTITLE .title02 {margin-top: -3rem; width: unset; margin-left: unset;}
#PRODETAILBOX.basic #HOWTITLE .title02 img {max-width: 10rem; position: absolute; top: 0; right: 0;}

#PRODUCT.hownew #PRODETAILBOX.basic ol.howmenu {padding: 0 0 4rem;}


#PRODETAILBOX.basic section#H02,
#PRODETAILBOX.basic section#H03,
#PRODETAILBOX.basic section#H04 {
padding-top: 50px;
}

#PRODETAILBOX #H04 .charm02 {
display: block;
}

#PRODETAILBOX #H04 .charm02 ol {
margin-top: 0;
width: 100%;
}

#PRODETAILBOX #H04 .charm02 .step li {
margin: 0 0 20px 0;
}

#PRODETAILBOX #H04 .charm02 .image10 {
width: 100%;
align-items: center;
margin: 0;
}

}

@media screen and (max-width: 600px) {
#PRODETAILBOX #H01 .tr08_recommendation {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}

#PRODETAILBOX #H01 .image03,
#PRODETAILBOX #H01 .image04 {
flex-direction: column;
}

#PRODETAILBOX #H01 .image03 li,
#PRODETAILBOX #H01 .image04 li {
width: 100%;
height: auto;
}

#PRODETAILBOX #H01 .image03 li img,
#PRODETAILBOX #H01 .image04 li img {
margin-bottom: 0;
}

#PRODETAILBOX .step1 {
flex-direction: column;
width: 100%;
}

#PRODETAILBOX .step1 li {
width: 100%;
}

#PRODETAILBOX #H03 .image08 {
  flex-direction: column;
}

#PRODETAILBOX .try-box img {
position: unset;
margin: auto;
}

#PRODETAILBOX .try-box-inner,
#PRODETAILBOX #H04 .try-box-inner {
  width: 100%;
}

#PRODETAILBOX .try-box-txt {
margin: 0 0 2rem;
}

#PRODETAILBOX #H04 .try-box-txt {
  text-align: center;
}

#PRODETAILBOX #H04 .try-box img {
  position: unset;
}

#PRODETAILBOX .try-box-txt02 {
margin: 0;
}

#PRODETAILBOX #H04 .image12 {
  flex-direction: column;
}

#PRODETAILBOX #H04 .image12 li:first-child {
width: 100%;
gap: 2rem;
flex-direction: unset;
}

#PRODETAILBOX #H04 .image12 li:last-child {
  width: 100%;
}

#PRODETAILBOX .try-box {
padding: 2rem;
display: flex;
flex-direction: column;
}

}

@media only screen and (min-width: 1px) and (max-width: 899px) {
	#PRODETAILBOX section#H02,
	#PRODETAILBOX section#H03,
	#PRODETAILBOX section#H04 {
padding-top: 70px;
}
}

body#PRODUCT.how.hownew #RELATION.contents-section {
background: #fff;
}


#PRODETAILBOX.basic .herb-title {
color: #ac7a2f;
}