/*NEWグッピーの飼い方202309*/
#PRODETAILBOX.howKARA #HOWTITLEBOX{ background: url("../how/img/tr_about_02_backimg01.avif") no-repeat center -45px; background-size: 100% auto; background-color: #C7E8FB; }
#PRODETAILBOX.howKARA #HOWTITLEBOX .howbackimg{ background: url("../how/img/tr_about_01_backimg01.avif") no-repeat center top; background-size: 1326px auto; }


#PROCONTENTS {
  margin: 0;
}

#PRODETAILBOX.howKARA h1{ max-width:540px; margin: 0 auto; }

#PRODUCT.hownew #PRODETAILBOX.howKARA ol.howmenu li a{ background-color: #108b96; font-weight: 400;}

#PRODUCT.hownew #PRODETAILBOX.howKARA ol.howmenu li.navi01 a:before   { background:  url("/how/img/tr_about_01_icon01.avif") no-repeat ; background-size:contain; }
#PRODUCT.hownew #PRODETAILBOX.howKARA ol.howmenu li.navi02 a:before   { background:  url("/how/img/tr_about_01_icon02.avif") no-repeat ; background-size:contain; }
#PRODUCT.hownew #PRODETAILBOX.howKARA ol.howmenu li.navi03 a:before   { background:  url("/how/img/tr_about_02_icon03.avif") no-repeat ; background-size:contain; }
#PRODUCT.hownew #PRODETAILBOX.howKARA ol.howmenu li.navi04 a:before   { background:  url("/how/img/tr_about_01_icon04.avif") no-repeat ; background-size:contain; }

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

#PRODETAILBOX.howKARA #H01{
  background: rgb(199,232,251);
  background: linear-gradient(0deg, rgba(239,249,251,1) 0%, rgba(199,235,251,1) 50%, rgba(199,232,251,1) 100%);
	padding-top:50px;
	margin-top: -1px;
}

#PRODETAILBOX.howKARA section#H01 .inner {
  background: rgba(255,255,255,0.9);
  padding: 60px 20px;
  border-radius: 10px;  
}

#PRODETAILBOX.howKARA #H02{ 
	background-image: url("../how/img/tr_about_01_backimg02.avif"), url("../how/img/tr_about_02_backimg02.avif");
	background-repeat: no-repeat, no-repeat;
	background-position: center -10px, center top;
	background-color: #C7E8FB;
	background-size: 100% auto, 2000px auto ;
  padding-top:50px;
	margin-top: -1px;
}

#PRODETAILBOX.howKARA #H03,
#PRODETAILBOX.howKARA #H04{
  background: rgb(219,246,255);
  background: linear-gradient(0deg, rgb(199,232,251) 0%, rgba(224,237,251,1) 50%, rgba(224,237,251,1) 75%, rgb(199,232,251) 100%);
}

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

#PRODUCT.hownew .image02 {
position: relative;
font-family: 'M PLUS Rounded 1c', sans-serif;
transform: rotate(0.05deg);
max-width: 61rem;
margin: auto;
}





#PRODUCT.hownew #PRODETAILBOX.howKARA h2 {border-top: dotted #108b96 7px; border-bottom: dotted #108b96 7px; margin-bottom: 40px; padding: 15px 0; text-align: center; font-size: 23px; font-weight: 400;}
#PRODUCT.hownew #PRODETAILBOX.howKARA h2 strong { color: #108b96; font-size: 28px;}

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

#RELATION.contents-section .section-title {
font-weight: 400;
font-family: 'M PLUS Rounded 1c', sans-serif;
}

#PRODETAILBOX.howKARA .image01 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 3rem;
margin-top: 2rem;
}

#PRODETAILBOX.howKARA .image01 li p {
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 400;
}

#PRODETAILBOX.howKARA .image01 strong {
color: #108b96;
font-weight: bold;
font-size: 1.2em;
letter-spacing: -0.02em;
display: block;
}

#PRODETAILBOX.howKARA .image01 strong em {
font-weight: bold;
font-size: 0.8em;
}

#PRODETAILBOX.howKARA p.howimg04 {
width: 100%;
max-width: 31rem;
margin: 3rem auto 0;
}

#PRODETAILBOX.howKARA .image05 {
display: flex;
gap: 2rem;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 16px;
background: #feecd2;
padding: 1rem;
border-radius: 2rem;
flex-wrap: wrap;
}

#PRODETAILBOX.howKARA .image05 p {
font-weight: bold;
}

#PRODETAILBOX.howKARA .image06 {
display: flex;
gap: 2rem;
align-items: flex-start;
width: calc(50% - 1rem);
}

#PRODETAILBOX.howKARA .image06-03 {
  display: flex;
flex-direction: column;
}

#PRODETAILBOX.howKARA .image06-06{
  margin-top: 2rem;
}

#PRODETAILBOX.howKARA .image06-04 p {
color: #00833f;
}

#PRODETAILBOX.howKARA .image06-05 p:nth-child(1),
#PRODETAILBOX.howKARA .image06-06 p:nth-child(1) {
width: 8rem;
float: right;
margin-left: 1rem;
}

#PRODETAILBOX.howKARA .image06-02 {
    width: 12rem;
    flex-shrink: 0;
}

#PRODETAILBOX.howKARA .image06-02 img {
    width: 100%;
    height: 18rem;
    object-fit: contain;
}

#PRODETAILBOX.howKARA .image06-05 img,
#PRODETAILBOX.howKARA .image06-06 img {
    width: 8rem;
    height: 8rem;
    object-fit: contain;
}



#PRODETAILBOX.howKARA ul.howlist li {
 font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 400;
    color: #3071b9; 
}

#PRODETAILBOX.howKARA  p.leadTXT2 { font-size: 16px; font-weight: 400; transform: rotate(0.05deg); margin: 3rem 0 1rem; color: #3071b9;}
#PRODETAILBOX.howKARA  p.leadTXT2 strong { color: #108b96; font-size: 20px; }


#PRODETAILBOX.howKARA span.red { color:#E60012;}
#PRODETAILBOX.howKARA span.green { color:#009C8C;}


#PRODETAILBOX.howKARA p.point { 
  display: inline-block; 
  color: #fff; 
  background: #108b96; 
  margin: 2rem 0 0.5rem; 
  padding: 4px 15px; 
  border-radius: 25px;
}





#PRODUCT.hownew #PRODETAILBOX.howKARA div.howproLINK,
#PRODUCT.hownew #PRODETAILBOX.howKARA div.howproLINK2 { border: 3px solid #108b96; }
#PRODUCT.hownew #PRODETAILBOX.howKARA div.howproLINK p.howproLINKtitle,
#PRODUCT.hownew #PRODETAILBOX.howKARA div.howproLINK2 p.howproLINKtitle { width: 260px; }
#PRODETAILBOX.howKARA div.howproLINK div.howproITEM span { background: #108b96; } 
#PRODETAILBOX.howKARA div.howproLINK div.howproITEM span::after { border-left: 14px solid #108b96; }

#PRODUCT.hownew #PRODETAILBOX.howKARA div.howproLINK2 p.howproLINKtitle.howproLINKtitle2 { width: 300px; }

#PRODETAILBOX.howKARA div.howproLINK p.howproIMG img,
#PRODETAILBOX.howKARA div.howproLINK2 p.howproIMG img {border-radius: 0%;}


#PRODETAILBOX.howKARA .howproLINK2-txt {color: #108b96; font-weight: bold;}

#PRODETAILBOX.howKARA .howproLINK2 ul.howproLINK2-list li {width: 100%;}

#PRODETAILBOX.howKARA .br-sp {display: block;}

#PRODUCT.hownew #PRODETAILBOX.howKARA ol.step {margin-top: 0;}
#PRODUCT.hownew #PRODETAILBOX.howKARA ol.step li p.sttit:before {background-color: #108b96;}
#PRODUCT.hownew #PRODETAILBOX.howKARA ol.step li img {max-width: 410px;}

@media only screen and (min-width: 1px) and (max-width: 899px) {
  #PRODETAILBOX.howKARA #HOWTITLEBOX .howbackimg{background-position-y: 5rem; background-size: 100% auto; }
  
  #PRODETAILBOX.howKARA #H02 {
    background-image: url(../how/img/tr_about_01_backimg02.avif), url(../how/img/tr_about_02_backimg02.avif);
    background-position: center -8px, center -45px;
    background-size: 100% auto, 100% auto;
  }
  
  #PRODUCT.hownew #PRODETAILBOX.howKARA ol.howmenu {padding: 50px 0 0 0;}
  
#PRODUCT.hownew ol.howmenu li {
          width: 100%;
        float: inherit;
        margin: 20px 0;
}

#PRODUCT.hownew ol.howmenu li:nth-child(2n) {
          margin-left: 0;
}
  
  #PRODETAILBOX.howKARA .br-sp {display: none;}

  #PRODETAILBOX.howKARA .image05 {
    flex-direction: column;
    gap: 2rem;
  }

    #PRODETAILBOX.howKARA .image06-06 {
      margin: 0;
    }

  #PRODETAILBOX.howKARA .image06 {
align-items: flex-start;
margin: auto;
max-width: 40rem;
width: auto;
}

  #PRODETAILBOX.howKARA .image06-02 {
width: 94%;
max-width: 8rem;
}
}

@media only screen and (min-width: 1px) and (max-width: 700px) {  
  #PRODETAILBOX.howKARA #HOWTITLEBOX .howbackimg{ background-position-y: 8rem; background-size: 100% auto; }


}

@media screen and (max-width: 600px) {
  #PRODETAILBOX.howKARA .image01 {
    grid-template-columns: repeat(2, 1fr);
  }
}


@media only screen and (min-width: 1px) and (max-width: 500px) {
  #PRODUCT.hownew #PRODETAILBOX.howKARA ol.howmenu {padding: 15px 0 0 0;}
  
  #PRODETAILBOX.howKARA #HOWTITLEBOX{ background: url("../how/img/tr_about_02_backimg01_sp.avif") no-repeat center -30px; background-size: 100% auto; background-color: #C7E8FB;}
  
  #PRODETAILBOX.howKARA #HOWTITLEBOX .howbackimg{background-position-y: 5rem; background-size: 121% auto; }
  
  #PRODETAILBOX.howKARA section#H01 {padding-top: 20px;}
  
  #PRODETAILBOX.howKARA section#H01 .inner {padding: 60px 20px 30px;}
  
  #PRODETAILBOX.howKARA #H02 {
    background-image: url(../how/img/tr_about_01_backimg02_sp.avif), url(../how/img/tr_about_02_backimg02.avif);
    background-position: center -8px, center -10px;
    background-size: 100% auto, 100% auto;
  }
  
  #PRODETAILBOX.howKARA section#H02 {padding-top: 90px;}
  #PRODETAILBOX.howKARA section#H03 {padding-top: 50px;}
  
  
  #PRODETAILBOX.howKARA #H01 p.leadTXT2 {font-size: 15px;}
  #PRODETAILBOX.howKARA #H01 p.leadTXT2 strong {font-size: 17px;}

  
  #PRODETAILBOX.howKARA dl.howlist dt {width: 90px;}
  #PRODETAILBOX.howKARA dl.howlist dd {padding: 0 0 2px 100px;}
  #PRODETAILBOX.howKARA dl.howlist dd::after {left: 80px;}
  
  
  #PRODUCT.hownew #PRODETAILBOX.howKARA div.howproLINK p.howproLINKtitle, 
  #PRODUCT.hownew #PRODETAILBOX.howKARA div.howproLINK2 p.howproLINKtitle {
    font-size: 17px;
    width: 200px;
  }
  
  #PRODUCT.hownew #PRODETAILBOX.howKARA div.howproLINK2 p.howproLINKtitle.howproLINKtitle2 { width: 250px; }
  
  #PRODUCT.hownew #PRODETAILBOX.howKARA div.howproLINK ul li:last-child div.howproITEM span {
    padding: 0 10px 0 10px;
  }
  

  
}


@media screen and (max-width: 425px)  {
#PRODETAILBOX.howKARA .image01 {
grid-template-columns: none;
}

  #PRODUCT.hownew ol.howmenu li a {
    font-size: 13px;
  }
}