/*NEWニホンアマガエルの飼い方202212*/

#PRODETAILBOX.howTURTLEnew {
position: relative;
}

#PRODETAILBOX.howTURTLEnew .back-img01 {
position: absolute;
right: -20rem;
bottom: -10rem;
width: 42rem;
z-index: 2;
  animation: frogFlyFromTopRight 12s infinite ease-in-out;
filter: drop-shadow(-2px 4px 4px #3e3e3e);
}


@keyframes frogFlyFromTopRight {

  0%   { transform: translate(200%, -200%) scale(0.8); opacity: 0; }
  10%  { transform: translate(100%, -100%) scale(0.9); opacity: 1; }
  15%  { transform: translate(0, 0) scale(1); }
  20%  { transform: translate(0, 0); }
  25%  { transform: translate(0, -3.75em); }
  30%  { transform: translate(0, 0); }
  35%  { transform: translate(0, -1.875em); }
  40%  { transform: translate(0, 0); }
  45%  { transform: translate(0, 0); }
  50%  { transform: translate(0, 0) scale(1); opacity: 1; }
  60%  { transform: translate(200%, -200%) scale(0.8); opacity: 0; }
  100% { transform: translate(200%, -200%) scale(0.8); opacity: 0; }
}


#PRODETAILBOX.howTURTLEnew #HOWTITLEBOX .howbackimg .inner {
position: relative;
z-index: 1;
}

#PRODETAILBOX.howTURTLEnew #HOWTITLEBOX .howbackimg .element img:nth-last-of-type(2){ 
width: 22rem;
right: 0;
position: absolute;
top: -5rem;
}

#PRODETAILBOX.howTURTLEnew #HOWTITLEBOX .howbackimg .element img:nth-last-of-type(1) {
width: 21rem;
position: absolute;
top: 10rem;
left: 0;
}

#PRODUCT.hownew #PROCONTENTS {
background-color: #bfea97;
position: relative;
}

#PRODUCT.hownew #PROCONTENTS::before {
content: "";
width: 100vw;
height: 100%;
position: absolute;
background: url(../how/img/tu_about_03_backimg05.svg);
background-repeat: repeat-y;
background-size: auto 45%;
background-position: left top;
}

#PRODUCT.hownew #PROCONTENTS::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
background: url(../how/img/tu_about_03_backimg06.svg);
background-size: auto 45%;
background-repeat: repeat-y;
background-position: right top;
}


#PRODUCT.hownew ul li p,
#PRODUCT.hownew p.txt {
padding: 0.5rem 0 1.5rem;
}

#PRODUCT.hownew #PROCONTENTS #PRODETAILBOX.howTURTLEnew #HOWTITLEBOX .inner {overflow: inherit;}

#PRODETAILBOX.howTURTLEnew h1{ position: relative; max-width:80rem; margin: 0 auto; z-index: 100; }

#PRODETAILBOX.howTURTLEnew #HOWTITLE .title01 img {
  filter: drop-shadow(-1px 3px 2px #3e3e3e);
}

#PROCONTENTS{ width: 96%; max-width: 98rem; margin:0 auto 30px auto; overflow:hidden;}


#PRODUCT.hownew #PRODETAILBOX.howTURTLEnew ol.howmenu li a{background-color: #00734F; font-weight: bold;}


#PRODUCT.hownew #PRODETAILBOX.howTURTLEnew ol.howmenu li.navi01 a:before   { background:  url("../how/img/tu_about_03_icon01.avif") no-repeat ; background-size:contain; }
#PRODUCT.hownew #PRODETAILBOX.howTURTLEnew ol.howmenu li.navi02 a:before   { background:  url("../how/img/tu_about_02_icon03.avif") no-repeat ; background-size:contain; }


#PRODETAILBOX.howTURTLEnew #HOWTITLEBOX{
   position: relative; }


#PRODUCT.hownew #PRODETAILBOX.howTURTLEnew h2 {border-top: dotted #5E945C 7px; border-bottom: dotted #5E945C 7px; position: relative; font-size: 23px; text-align: center; padding: 15px 0; margin-bottom: 40px;     font-weight: bold;}
#PRODUCT.hownew #PRODETAILBOX.howTURTLEnew h2 strong {color: #5E945C; font-size: 28px;}

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



#PRODETAILBOX.howTURTLEnew #H01{
position: relative;
padding-top: 50px;
margin-top: -1px;
z-index: 1;
}

#PRODUCT.hownew section#H02 {
position: relative;
z-index: 5;
}

#PRODETAILBOX.howTURTLEnew .back-img02 img {
position: absolute;
max-width: 21rem;
top: -3rem;
left: 0;
z-index: 3;
filter: drop-shadow(4px 3px 3px #3e3e3e);
}

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


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


#PRODETAILBOX.howTURTLEnew .image01 {
display: flex;
width: 100%;
gap: 2rem;
align-items: flex-start;
margin-bottom: 3rem;
}

#PRODETAILBOX.howTURTLEnew .image01.tu_about_02-txt > img{
object-fit: contain;
max-width: 26rem;
border-radius: 50%;
}

#PRODETAILBOX.howTURTLEnew .image01 strong{
font-size: 2rem;
}

#PRODETAILBOX.howTURTLEnew .image01-02 {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 2rem;
}

#PRODETAILBOX.howTURTLEnew .image01-02 img {
width: 22rem;
}

#PRODETAILBOX.howTURTLEnew .tu_about_02-txt {
color: #5ab657;
margin-top: 3rem;
}

#PRODUCT.hownew .tu_about_02-txt2 {
background: #feeed1;
border-radius: 1rem;
padding: 2rem;
margin: 3rem 0;
}

#PRODUCT.hownew .tu_about_02-txt2 dt {
display: block;
font-weight: bold;
}

#PRODETAILBOX.howTURTLEnew .image02 {
display: flex;
gap: 2rem;
}

#PRODETAILBOX.howTURTLEnew .image02-02 {
width: 60%;
}

#PRODETAILBOX.howTURTLEnew .image02-03 {
width: 40%;
}

#PRODETAILBOX.howTURTLEnew .breeding-img {
  max-width: 70rem;
  margin: auto;
}

#PRODETAILBOX.howTURTLEnew .breeding-img p {
      margin-left: 27%;
  margin-bottom: 1rem;
}

#PRODETAILBOX.howTURTLEnew .tu_about_02-txt3 {
  width: 60%;
}

#PRODETAILBOX.howTURTLEnew .image02-05 {
  width: 40%;
  position: relative;
}

#PRODETAILBOX.howTURTLEnew .tu_about_02-txt3 dt {
font-weight: bold;
}



#PRODETAILBOX.howTURTLEnew .image02-04 {
background: #fadeeb;
padding: 2rem;
border-radius: 2rem;
margin-top: 3rem;
display: flex;
gap: 2rem;
}

#PRODETAILBOX.howTURTLEnew .image02-04 img:nth-last-of-type(2) {
width: 22rem;
}

#PRODETAILBOX.howTURTLEnew .image02-04 img:nth-last-of-type(1) {
width: 45%;
position: absolute;
bottom: 0;
right: 1rem;
animation: squashStretch 2s infinite ease-in-out;
filter: drop-shadow(-2px 4px 4px #3e3e3e);
}

@keyframes squashStretch {
  0%   { transform: scale(1, 1); }
  25%  { transform: scale(1.1, 0.9); } 
  50%  { transform: scale(0.95, 1.05); } 
  75%  { transform: scale(1.05, 0.95); }
  100% { transform: scale(1, 1); }
}

#PRODETAILBOX.howTURTLEnew .image03 {
background: #fadeeb;
padding: 2rem;
border-radius: 2rem;
margin-top: 3rem;
display: flex;
gap: 2rem;
}

#PRODETAILBOX.howTURTLEnew .image03 img {
max-width: 10rem;
}

#PRODETAILBOX.howTURTLEnew .image03-02 img {
max-width: 35rem;
}

#PRODETAILBOX.howTURTLEnew .image03-02 {
display: flex;
flex-direction: column;
justify-content: space-evenly;
gap: 2rem;
}

#PRODETAILBOX.howTURTLEnew .image01-01 {
width: 100%;
}
#PRODETAILBOX.howTURTLEnew .image01 strong {
text-align: center;
}

#PRODETAILBOX.howTURTLEnew .image04-2 {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}

#PRODUCT.hownew .image04-2 li {
width: calc(33% - 1.5rem);
}

#PRODETAILBOX.howTURTLEnew .image04 p {
text-align: center;
font-weight: bold;
}

#PRODETAILBOX.howTURTLEnew .image04 {
margin-top: 5rem;
border: solid 2px #ed7238;
background-color:#fffde6 ;
border-radius: 1rem;
padding: 2rem;
}

#PRODETAILBOX.howTURTLEnew .image04 .image02-txt02 {
font-weight: bold;
font-size: 2.5rem;
text-align: center;
margin: 2rem 0;
color: #000000;
}


#PRODUCT.hownew .image09 {
display: flex;
margin-bottom: 2rem;
width: 100%;
justify-content: space-between;
}

#PRODUCT.hownew .image09 li {
display: flex;
align-items: end;
gap: 2rem;
}

#PRODUCT.hownew .image09-01 {
width: 37%;
position: relative;
}

#PRODUCT.hownew .leopa-image01 {
display: flex;
align-items: end;
justify-content: left;
gap: 2rem;
width: 48%;
}

#PRODUCT.hownew .leopa-image02{
display: flex;
align-items: end;
justify-content: right;
gap: 2rem;
width: 48%;
}

#PRODUCT.hownew .image09-02,
#PRODUCT.hownew .image09-03 {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
}

#PRODUCT.hownew .image09-03 p {
color: #6d265b;
font-weight: bold;
padding: 0;
}

#PRODUCT.hownew .image09-02 img {
display: block;
width: 82%;
}

#PRODUCT.hownew .image09-03 img {
display: block;
width: 100%;
}


#PRODUCT.hownew .leopa td {
border: solid 1px #000000;
background: #d7d4e8;
    width: 40%;
}

#PRODUCT.hownew .leopa td+td {
background: #feeed1;
width: 20%;
}

#PRODUCT.hownew .leopa tr td:nth-child(3) {
background: #ea5514;
color: #fff;
    width: 40%;
}

#PRODUCT.hownew .leopa-txt {
font-weight: bold;
font-size: 1.5rem;
margin: 3rem 0 1rem;

}

#PRODUCT.hownew .image10 {
display: flex;
justify-content: center;
gap: 1rem; 
flex-wrap: wrap;
}

#PRODUCT.hownew .image10 li {
width: calc(33% - 1.5rem);
}

#PRODUCT.hownew .image10 li p {
text-align: center;
}

#PRODUCT.hownew .image11 {
max-width: 60rem;
margin: 3rem auto 0;
}

#PRODETAILBOX.howTURTLEnew #H02 .back-img03 img {
    position: absolute;
    max-width: 29rem;
    top: 1rem;
    right: 11%;
display: inline-block;
animation: sway 2s infinite step-end; 
}



#PRODUCT.hownew .leopa-sp {
display: none;
}

#PRODUCT.hownew #H02 table {
border-radius: 0;
}

#PRODETAILBOX.howTURTLEnew #H02 {
  position: relative;
}

#PRODETAILBOX.howTURTLEnew #HOWTITLEBOX .howbackimg #H02 .back-img03 img {
display: inline-block;
animation: sway 2s infinite step-end; 
}

#PRODUCT.hownew table td+td {
  border-left: none;
}

@keyframes sway {
0%, 20% { transform: rotate(-15deg); }
21%, 39% { transform: rotate(30deg); } 
40%, 59% { transform: rotate(-15deg); }
60%, 79% { transform: rotate(30deg); }
80%, 99% { transform: rotate(-15deg); } 
100% { transform: rotate(-15deg); }
}


@media only screen and (min-width: 1px) and (max-width: 1440px) {
#PRODETAILBOX.howTURTLEnew #H02 .back-img03 img {
right: 3%;
}

#PRODETAILBOX.howTURTLEnew .back-img01 {
right: -19rem;
bottom: -20rem;
width: 35rem;
}

}


@media screen and (max-width: 1273px) {
#PRODETAILBOX.howTURTLEnew .back-img02 img {
max-width: 18rem;
top: 0rem;
left: 0;
}
}

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

#PRODETAILBOX.howTURTLEnew .back-img01 {
right: 0;
bottom: -11rem;
width: 16rem;
z-index: 2;
}

#PRODUCT.hownew #PROCONTENTS::before,
#PRODUCT.hownew #PROCONTENTS::after {
      background-size: auto 30%;
}

}

@media only screen and (min-width:899px) and (max-width:1024px) {

#PRODUCT.hownew #PROCONTENTS #PRODETAILBOX.howTURTLEnew .inner {width: 888px !important;}

}


@media only screen and (min-width:1px) and (max-width:899px) {
#PRODETAILBOX.howTURTLEnew #HOWTITLEBOX .howbackimg .element img:nth-last-of-type(1) {
width: 16rem;
top: 10rem;
left: 1rem;
}

#PRODETAILBOX.howTURTLEnew #HOWTITLEBOX .howbackimg .element img:nth-last-of-type(2) {
width: 16rem;
right: 2%;
top: -2rem;
}

#PRODETAILBOX.howTURTLEnew #HOWTITLEBOX .howbackimg {
background-position: center 44%;
background-size: 120% auto;
}


#PRODETAILBOX.howTURTLEnew #H02 .back-img03 img {
max-width: 21rem; 
}


#PRODUCT.hownew #PRODETAILBOX.howTURTLEnew ol.howmenu {padding: 0 0 2rem 0;}  

#PRODETAILBOX.howTURTLEnew .back-img02 img{
max-width: 14rem;
}

}


@media only screen and (min-width: 1px) and (max-width: 700px) {
#PRODUCT.hownew ol.howmenu li {
width: 100%;
float: inherit;
margin: 20px 0;
}

#PRODUCT.hownew ol.howmenu li:nth-child(2n) {
margin-left: unset;
}
}

@media screen and (max-width: 768px) {
#PRODUCT.hownew #PROCONTENTS::before,
#PRODUCT.hownew #PROCONTENTS::after {
        background-size: auto 20%; 
}
}


@media screen and (max-width: 768px) {
#PRODETAILBOX.howTURTLEnew .image01{
flex-direction: column;
align-items: center;
}

#PRODETAILBOX.howTURTLEnew .image01-01 {
display: flex;
flex-direction: column;
align-items: center;
}


#PRODETAILBOX.howTURTLEnew .image02 {
flex-direction: column;
}
#PRODETAILBOX.howTURTLEnew .image02-02 {
max-width: 43rem;
margin: auto;
width: 100%;
}

#PRODETAILBOX.howTURTLEnew .image02-03 {
width: 100%;
}

#PRODUCT.hownew .tu_about_02-txt2 {
margin: 2rem 0;
}




#PRODUCT.hownew .leopa-sp tr:nth-child(8) {
margin-bottom: 4rem;
border: solid 1px #b4b4b4;
}

#PRODUCT.hownew table,
#PRODUCT.hownew table tbody,
#PRODUCT.hownew table tr,
#PRODUCT.hownew table th,
#PRODUCT.hownew table td {
display: block;
width: 100%;
}

#PRODUCT.hownew table tr {
margin-bottom: 1rem;
border: solid 1px #b4b4b4;
}

#PRODUCT.hownew .leopa,
#PRODUCT.hownew .leopa-pc {
display: none;
}


#PRODUCT.hownew .leopa-sp {
display: block;
border: none;
}

#PRODUCT.hownew .leopa-sp tbo

#PRODUCT.hownew .leopa-sp tr td.title {
background: #d7d4e8 !important;
}

#PRODUCT.hownew .leopa-sp tr td:first-child {
background: #feeed1;
}

#PRODUCT.hownew .leopa-sp table {
border: none;
}

#PRODUCT.hownew .leopa-image01,
#PRODUCT.hownew .leopa-image02 {
width: 100%;
justify-content: center;
}

#PRODUCT.hownew .leopa-sp tr td.title2 {
border-top: none;
margin-bottom: 0;
background: #ea5514 !important;
color: #fff;
}

#PRODUCT.hownew .leopa-sp tr:nth-child(n+9) td:nth-child(2) {
background: #ea5514;
color: #fff;
}

#PRODUCT.hownew table tr+tr th,
#PRODUCT.hownew table tr+tr td {
border-top: 1px solid #aaa;
}

#PRODUCT.hownew .leopa-sp td {
background: #d7d4e8;
}



}







@media screen and (max-width: 600px) {
#PRODUCT.hownew #PROCONTENTS::before,
#PRODUCT.hownew #PROCONTENTS::after {
        background-size: auto 10%; 
}

#PRODETAILBOX.howTURTLEnew #HOWTITLEBOX .howbackimg .element img:nth-last-of-type(1) {
width: 25%;
top: 30%;
}

#PRODETAILBOX.howTURTLEnew #HOWTITLEBOX .howbackimg .element img:nth-last-of-type(2) {
width: 25%;
}

#PRODETAILBOX.howTURTLEnew .image02-04 {
flex-direction: column;
}

#PRODETAILBOX.howTURTLEnew .tu_about_02-txt3 {
width: 100%;
}

#PRODETAILBOX.howTURTLEnew .image02-05 {
width: 24rem;
margin: auto;
position: relative;
}

#PRODETAILBOX.howTURTLEnew .image03 {
flex-direction: column;
}

#PRODETAILBOX.howTURTLEnew .image03 img {
max-width: 17rem;
margin: auto;
}

#PRODETAILBOX.howTURTLEnew .image03-02 img {
max-width: 35rem;
}

#PRODUCT.hownew .image04-2 {
flex-direction: column;
}

#PRODUCT.hownew .image04-2 li {
width: 100%;
max-width: 27rem;
margin: auto;
}

#PRODUCT.hownew .image09 {
flex-direction: column;
gap: 2rem;
align-items: center;
}

#PRODUCT.hownew .image09 li:nth-child(1),
#PRODUCT.hownew .image09 li:nth-child(2) {
justify-content: center;
width: 100%;
max-width: 37rem;
}

}


@media screen and (max-width: 425px) {
#PRODETAILBOX.howTURTLEnew .image04 .image02-txt02 {
font-size: 2rem;
}

#PRODUCT.hownew .image10 {
flex-direction: column;
}

#PRODUCT.hownew .image10 li {
width: 100%;
}

#PRODETAILBOX.howTURTLEnew .back-img02 img{
max-width: 12rem;
top: 2rem;
}

}



@media only screen and (min-width:1px) and (max-width:720px) {
#PRODETAILBOX.howTURTLEnew #HOWTITLEBOX .howbackimg {background-position: center 47%; background-size: 100% auto;}  
}

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


#PRODETAILBOX.howTURTLEnew ol.howmenu {padding: 50px 0 10px 0;}

#PRODETAILBOX.howTURTLEnew section#H01 {padding-top: 20px;}
#PRODETAILBOX.howTURTLEnew section#H01 .inner{ padding:60px 20px 20px 20px; }


#PRODETAILBOX.howTURTLEnew .back-img01 {
bottom: -8rem;
width: 12rem;
}
}