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


#PROCONTENTS {
  margin: 0;
}

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

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

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

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

#PRODETAILBOX.howCORY #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.howCORY #H01 p {
      font-family: 'M PLUS Rounded 1c', sans-serif;
          font-weight: 400;
          font-size: 16px;
}

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

#PRODETAILBOX.howCORY #H02{ 
	background-image: 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;
  position: relative;
}

#PRODETAILBOX.howCORY #H02 .image03 {
position: absolute;
top: 0;
right: 0;
max-width: 20rem;
}

#PRODETAILBOX.howCORY #H03,
#PRODETAILBOX.howCORY #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 {
    font-weight: 400;
    margin: 0 0 4rem;
    position: relative;
    padding: 0 0 0 2rem;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

#PRODUCT.hownew .image02 dt {
      color: #3071b9;
    font-size: 2rem;
    font-weight: 400;
    position: relative;
    transform: rotate(0.05deg);
}

#PRODUCT.hownew .image02 dt::after {
  background-color: #3071b9;
    display: block;
    content: '';
    position: absolute;
    top: 1.1rem;
    left: -2rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 5rem;
}

#PRODUCT.hownew .image02 dd {
      font-weight: 400;
      transform: rotate(0.05deg);
      font-size: 16px;
}

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



#PRODUCT.hownew #PRODETAILBOX.howCORY 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.howCORY h2 strong { color: #108b96; font-size: 28px;}

#PRODETAILBOX.howCORY 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.howCORY .image01 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 3rem;
margin-top: 2rem;
}

#PRODETAILBOX.howCORY .image01 li p {
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 400;
transform: rotate(0.05deg);
font-size: 16px;
}

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

#PRODETAILBOX.howCORY #H03 p,
#PRODETAILBOX.howCORY #H04 p {
 font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 400;
transform: rotate(0.05deg); 
font-size: 16px;
}

#PRODETAILBOX.howCORY .clearfix p {
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 400;
transform: rotate(0.05deg);
}

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

#PRODETAILBOX.howCORY p.howimg04 {
width: 150px;
float: right;
margin-left: 10px;
}

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

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



#PRODETAILBOX.howCORY .leadTXT4 {
  display: block;
  color: #00833f;
  text-align: center;
      font-size: 2rem;
}

#PRODETAILBOX.howCORY .image06,
#PRODETAILBOX.howCORY .image07 {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  width: 50%;
}

#PRODETAILBOX.howCORY .image06-02,
#PRODETAILBOX.howCORY .image07-02 {
    width: 120px;
    flex-shrink: 0;
}

#PRODETAILBOX.howCORY .image06-02 img,
#PRODETAILBOX.howCORY .image07-02 img {
    width: 100%;
height: 17.6rem;
    object-fit: contain;
}

/* 中身画像を統一 */
#PRODETAILBOX.howCORY .image06-05 img {
    width: 8rem;
    height: 8rem;
    object-fit: contain;
}

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

#PRODETAILBOX.howCORY .image06-04 p {
color: #00833f;
    font-size: 2rem;
}

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

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

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


#PRODETAILBOX.howCORY  p.leadTXT3 {
      background-color: #09b7cc;
    color: white;
    font-weight: bold;
    padding: 0.5rem;
    border-radius: 5rem;
    max-width: 31rem;
    text-align: center;
    font-size: 1.3em;
    margin-bottom: 1rem;
}

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


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





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

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

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


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

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

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

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

@media only screen and (min-width: 1px) and (max-width: 899px) {
  #PRODETAILBOX.howCORY #HOWTITLEBOX .howbackimg{background-position-y: 5rem; background-size: 100% auto; }
  
  #PRODETAILBOX.howCORY #H02 {
    background-image:  url(../how/img/tr_about_02_backimg02.avif);
    background-position: center -8px, center -45px;
    background-size: 100% auto, 100% auto;
  }

  #PRODETAILBOX.howCORY #H02 .image03 {
        top: -2rem;
  }
  
  #PRODUCT.hownew #PRODETAILBOX.howCORY 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.howCORY .br-sp {display: none;}


}


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


}

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

@media screen and (max-width: 768px) {
#PRODETAILBOX.howCORY .image05 {
  flex-direction: column;
}

#PRODETAILBOX.howCORY .image06 {
  max-width: 42rem;
  width: auto;
  margin: auto;
}
#PRODETAILBOX.howCORY .image07 {
  max-width: 42rem;
  width: auto;
  margin: auto;
}
}


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

  #PRODETAILBOX.howCORY #H02 .image03 {
  top: -2rem;
max-width: 16rem;
  }
  
  #PRODETAILBOX.howCORY section#H02 {padding-top: 90px;}
  #PRODETAILBOX.howCORY section#H03 {padding-top: 50px;}
  
  
  #PRODETAILBOX.howCORY #H01 p.leadTXT2 {font-size: 15px;}
  #PRODETAILBOX.howCORY #H01 p.leadTXT2 strong {font-size: 17px;}

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

  
}


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

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

  #PRODETAILBOX.howCORY .image06{
    flex-direction: column;
        flex-direction: column;
    align-items: center;
  }
  #PRODETAILBOX.howCORY .image06-03 {
    width: 100%;
  }

    #PRODETAILBOX.howCORY .image07 {
      margin: unset;
          flex-direction: column;
        flex-direction: column;
    align-items: center;
    }

  #PRODETAILBOX.howCORY .image06-02,
  #PRODETAILBOX.howCORY .image07-02 {
        width: 100%;
    max-width: 10rem;
  }
}