@charset "utf-8";
/* CSS Document 320-640 */



 
/*--------------------------------------------------------------------

headBox

--------------------------------------------------------------------*/

.headfirex{text-align: left}
.headfirex .text01{text-align: left ;margin:30px 0 10px; line-height: 1.6; font-size:clamp(1.375rem, 1.188rem + 0.94vw, 1.563rem)}/*22-25*/
.headfirex .text02{text-align: left ;}

.pageheadBox .pic{max-width: 560px}

.headfirex .headl{text-align: left; margin: 0 5%}
.headfirex .headl .morebtn{ text-align: center; margin: 20px auto 30px; line-height: 1.4; }
.headfirex .headl .morebtn a{padding: 20px 30px 20px 20px}
.headfirex .headl .morebtn span{font-size:14px }
.headfirex img{padding: 0 5% 60px;}
/*--------------------------------------------------------------------

.symptoms

--------------------------------------------------------------------*/
.symptoms{text-align: center; padding-top: 50px}
.symptoms h2{line-height: 1.6; font-size:clamp(1.375rem, 1.193rem + 0.91vw, 1.875rem) }/*22-30*/
.symptoms .plas{margin-bottom: 0 ; display: inline-block;}
.symptoms .listBox{margin: 0 5%; display: flex; justify-content: space-between; flex-flow: wrap}
.symptoms .listBox li{width: 48%}
.symptoms .listBox .topi{margin: -10px 0 15px}
.symptoms .listBox .topi li{width: 100%; text-align: left; font-size: clamp(0.938rem, 0.869rem + 0.34vw, 1.125rem)}/*15-18*/



/*--------------------------------------------------------------------

disease

--------------------------------------------------------------------*/
#disease{ background: #fff8ed; text-align: center;
  position: relative; margin-top: -20px
}

#disease:before {
  content: "";
  position: absolute;
  top: -1px;  /* 上に矢印が表示されるように */
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  border-width: 10vw 49vw 0 50vw;  /* 上に凹む矢印 */
  border-style: solid;
  border-color: #fff transparent transparent transparent;  
}
#disease:after {
  content: "";
  position: absolute;
  bottom: -10vw;  /* 下側に配置 */
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  /* 下向き（下側に尖った）矢印：上側に色、下側が 0 */
  border-width: 10vw 49vw 0 50vw;
  border-style: solid;
  border-color: #fff8ed transparent transparent transparent;
}

#disease h2{padding-top: 80px; margin: 0 5%}
#disease h2 img{max-height:550px }

#disease .listD{margin:-50px 5% 0;  z-index: 5 ; position: relative}
#disease .fuki{position: relative; background: #fff; border-radius: 10px; border: 2px solid #ffb423; padding-bottom: 5%; text-align: left}
#disease .fuki:after{content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #ffb423;}
#disease .fuki h3{margin: 10px; font-size:clamp(1.25rem, 1.125rem + 0.63vw, 1.375rem)}/*20-22*/
#disease .checklist{padding: 10px 0 0 ; border-top: 1px dashed #ffb423; margin: 0px 10px 0 10px}
#disease .checklist li{margin-right: 10px; background: url("../img/rabbit/check.png") no-repeat left 11px; background-size: 12px 12px; padding-left: 20px; display: inline-block}
#disease li .text{text-align: left; padding: 20px 0 30px}
#disease li:last-child .text{padding-bottom: 60px}

/*--------------------------------------------------------------------

避妊去勢

--------------------------------------------------------------------*/
#neutering {text-align: center; margin: 0 5%}
#neutering .op{text-align: left}
#neutering .op dt{margin-bottom: 30px}
#neutering .kakomiflex{display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 20px}
#neutering .kakomiflex .kakomil{width:26% ; background: #ffb423; color: #fff; padding: 0 10px 0 15px; border-radius: 10px 0 0 10px}
#neutering .kakomiflex .kakomir{width:74% ; padding: 0 10px; border: 2px solid #ffb423; border-radius: 0 10px 10px 0}
#neutering .op dd{text-align: center}
#neutering .op dd .text{text-align: left}
#neutering .op dd img{width:148px; margin: 10px 0 }


/*--------------------------------------------------------------------

うさぎの健康チェック

--------------------------------------------------------------------*/
#check{padding: 80px 0 0; text-align: center}
#check h2{line-height: 1.5}
#check .heck{margin: 0 5% ; position: relative; z-index: 2; }
#check .heck dt img{max-width:266px; width: 80% }
#check .heck dd{border-top:2px solid #ffb423 ; border-bottom:2px solid #ffb423; margin-top: -25px; padding: 20px 0; text-align: left}


/*--------------------------------------------------------------------

.exa

--------------------------------------------------------------------*/
.exa{ background: #fff8ed; text-align: center;
  position: relative; margin-top: -20px
}

.exa:before {
  content: "";
  position: absolute;
  top: -1px;  /* 上に矢印が表示されるように */
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  border-width: 10vw 49vw 0 50vw;  /* 上に凹む矢印 */
  border-style: solid;
  border-color: #fff transparent transparent transparent;  
}
.exa:after {
  content: "";
  position: absolute;
  bottom: -10vw;  /* 下側に配置 */
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  /* 下向き（下側に尖った）矢印：上側に色、下側が 0 */
  border-width: 10vw 49vw 0 50vw;
  border-style: solid;
  border-color: #fff8ed transparent transparent transparent;
}
.exa h2{margin-top: 80px; display: inline-block ; line-height: 1.5}
.exa .listBox{width: 90%; margin: 0 5%}
.exa .listBox li.fle{margin-bottom: 15px; display: flex; justify-content: space-between; flex-flow: wrap; text-align: left; align-items:flex-start }
.exa .listBox li img{width: 15%; max-width:71px; margin-top: 10px }
.exa .listBox li .topi{width: 80%; }
.exa .listBox li .topi h3{font-weight: 700; font-size: clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem)}/*18-22*/
.exa .listBox li .com{font-size: 15px;}
.exa .listBox li .com li{list-style: disc; margin-left: 20px; line-height: 1.6; margin-bottom: 8px}


.lastcome{margin: 80px 5%; font-size: clamp(1.125rem, 0.813rem + 1.56vw, 1.438rem)}/*18-23*/


@media (min-width: 640px){
.pageheadBox{background: none}
.pageheadBox .pageMenuA{padding: 20px 40px; width: 1100px ; margin: 20px auto 40px;}
.pageheadBox .pic{position: absolute; left: 50%; top: 300px; width: 298px; margin-left: 240px }
.pageheadBox .headfirex{width: 1100px; margin: 0 auto}
.headfirex .headl{margin: 0}

.symptoms .listBox {margin: 30px auto 0; width: 1100px;}
.symptoms .listBox li{width: 24%}
.symptoms .listBox li img{width: 195px}
.symptoms .listBox .topi {margin: 0px 0 15px;}

#disease h2{padding-top: 200px}
#disease h2 img{width:550px }
#disease .listD {margin: -90px auto 0; width: 1100px; display: flex ; justify-content: space-between; flex-flow: wrap}
#disease .listD li.wow{width: 48%}
#disease .fuki h3 { margin: 10px 30px 10px;}
#disease .checklist { padding: 10px 0 0; margin: 0px 30px 0}
#disease li:last-child .text { padding-bottom: 30px;}


#neutering{margin: 0 auto; width: 1100px; z-index: 2; position: relative; padding-top: 100px}
#neutering .op{display: flex; justify-content: space-between; flex-direction: row-reverse }
#neutering .op dt{width: 467px}
#check .heck dt img{width: 100%}
#neutering .op dd{width:580px}

#neutering .kakomiflex{text-align: left; font-size: 16px ; width: 400px;}
#neutering .op dd img{margin: 10px 30px 0;}
#neutering .op dd span{ top: -80px; position: relative;}

#check .heck { margin: 0 auto; width: 880px; text-align: left; display: flex; justify-content: space-between; align-items: flex-start }
#check .heck dt {width:266px}
#check .heck dd {width:587px; margin-top: 40px}

.exa .listBox {width: 1100px;  margin: 0 auto; display: flex; justify-content: space-between; flex-flow: wrap}
.exa .listBox li.fle{width: 48%}


.lastcome {  margin: 80px auto 100px; width: 1100px; text-align: center; position: relative;  z-index: 2}