/*NEWグッピーの飼い方202309*/
#PRODETAILBOX.howAKAHIRE #HOWTITLEBOX{ 
background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 27%, #e7f5fe 100%), url(../how/img/tr_about_05_backimg02.avif) no-repeat center top;
background-size: 100% auto; background-color: #C7E8FB;    
background-size: cover, cover;
background-repeat: no-repeat;
background-position: center top;
 }
#PRODETAILBOX.howAKAHIRE #HOWTITLEBOX .howbackimg{ background: url("../how/img/tr_about_05_backimg01.avif") no-repeat center top; background-size: 113rem auto;  background-position-y: -2rem;}


#PROCONTENTS {
  margin: 0;
}

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

#PRODUCT.hownew #PRODETAILBOX.howAKAHIRE ol.howmenu li a{ background-color: #108b96; font-weight: 400; transform: rotate(0.05deg);}

#PRODUCT.hownew #PRODETAILBOX.howAKAHIRE ol.howmenu li.navi01 a:before   { background:  url("/how/img/tr_about_05_icon01.avif") no-repeat ; background-size:contain; }
#PRODUCT.hownew #PRODETAILBOX.howAKAHIRE ol.howmenu li.navi02 a:before   { background:  url("/how/img/tr_about_05_icon02.avif") no-repeat ; background-size:contain; }
#PRODUCT.hownew #PRODETAILBOX.howAKAHIRE ol.howmenu li.navi03 a:before   { background:  url("/how/img/tr_about_05_icon02.avif") no-repeat ; background-size:contain; }
#PRODUCT.hownew #PRODETAILBOX.howAKAHIRE ol.howmenu li.navi04 a:before   { background:  url("/how/img/tr_about_05_icon03.avif") no-repeat ; background-size:contain; }

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

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



#PRODETAILBOX.howAKAHIRE #H01 p,
#PRODUCT.hownew section#H02 p {
font-size: 16px;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 400;
transform: rotate(0.05deg);
}

#PRODETAILBOX.howAKAHIRE section#H01 .inner {
background: rgba(255,255,255,0.9);
padding: 60px 20px;
border-radius: 10px;  
}
body.how .dot,
body.how ol.number li em {
font-size: 16px;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 400;
transform: rotate(0.05deg);
}

body.how ol.number li strong {
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: bold;
transform: rotate(0.05deg);
}

body.how ol.number li:after {
 top: 5px; 
}

body.how .dot::after {
  display: none;
}

#PRODETAILBOX.howAKAHIRE #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.howAKAHIRE #H02 .image03 {
position: absolute;
top: 0;
right: 0;
max-width: 20rem;
}

#PRODETAILBOX.howAKAHIRE #H03,
#PRODETAILBOX.howAKAHIRE #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 1rem;
    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: auto;
}



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

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

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

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

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

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

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

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

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

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

#PRODETAILBOX.howAKAHIRE .image09 {
      max-width: 71rem;
    margin: 3rem auto;
    background: #feecd2;
    padding: 1rem;
    border-radius: 2rem;
}

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

#PRODETAILBOX.howAKAHIRE .image06 {
  display: flex;
  gap: 2rem;
  align-items: end;
  width: 50%;
}

#PRODETAILBOX.howAKAHIRE .image07 {
  display: flex;
  gap: 2rem;
  align-items: end;
  width: 42%;
}

#PRODETAILBOX.howAKAHIRE .image07-02 {
     width: 37%; 
}

#PRODETAILBOX.howAKAHIRE .image07-03 {
      width: 62%;
}

#PRODETAILBOX.howAKAHIRE .image06-02 {
    width: 100%;
}

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

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

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

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

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


#PRODETAILBOX.howAKAHIRE  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.howAKAHIRE span.red { color:#E60012;}
#PRODETAILBOX.howAKAHIRE span.green { color:#009C8C;}


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





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

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

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


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

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

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

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

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

  #PRODETAILBOX.howAKAHIRE #HOWTITLEBOX {
        background-size: contain;
  }

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



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

  #PRODETAILBOX.howAKAHIRE .image06-02 {
width: 50%;
max-width: unset;
}

  #PRODETAILBOX.howAKAHIRE .image06-05 {
        width: 90%;
  }

  #PRODETAILBOX.howAKAHIRE .image07 {
        margin: auto;
        width: unset;
  }
}

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

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

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


}

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


@media only screen and (min-width: 1px) and (max-width: 500px) {
  #PRODUCT.hownew #PRODETAILBOX.howAKAHIRE ol.howmenu {padding: 15px 0 0 0;}
  

  
  #PRODETAILBOX.howAKAHIRE #HOWTITLEBOX .howbackimg{background-position-y: 5rem; background-size: 121% auto; }
  
  #PRODETAILBOX.howAKAHIRE section#H01 {padding-top: 20px;}
  
  #PRODETAILBOX.howAKAHIRE section#H01 .inner {padding: 60px 20px 30px;}
  
  #PRODETAILBOX.howAKAHIRE #H02 {
    background-image:  url(../how/img/tr_about_02_backimg02.avif);
    background-position: center -8px, center -10px;
    background-size: 100% auto, 100% auto;
  }

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

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

  
}


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

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