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

.pageheadBox h2{font-size:clamp(2rem, 1.313rem + 3.44vw, 2.688rem)}/*32-43*/
.pageheadBox .pageMenuA li{letter-spacing: -1px}
.pageheadBox .pageMenuA li span{font-size: 13px}
.pageheadBox .pageMenuA li:nth-child(4){font-size:14px }

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

meri

--------------------------------------------------------------------*/
.scroll {
    margin: 60px 0 ;
}

.meri{margin: 0 5%; text-align: center ; background: url("../img/bg_dodo.png") no-repeat center 50%; background-size:100% }
.meri h2{position: relative; padding: 40px 20px ; line-height: 1.4; border-radius: 180px;  background:#ffb423; color: #fff; font-size:clamp(1.125rem, 1.063rem + 0.31vw, 1.188rem)  }/*18-19*/
.meri h2 span{font-size:clamp(1.313rem, 1.063rem + 1.25vw, 1.563rem) }/*21-25*/
.meri h2 img{width:66px; margin-bottom: 5px }
.meri h2:before {
  content: "";
  position: absolute;
  top: 98%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #ffb423;
}
.meri ul{text-align: left; max-width: 380px ; margin: 0 auto; position: relative; display: flex; justify-content: space-between; flex-flow: wrap }
.meri li img{width: 53px; position: absolute; right: 0; top: 0}
.meri li{position: relative; padding:76px 0 0 0 ;}
.meri li:first-child{margin:-30px auto 0 20%; width: 200px}
.meri li:last-child{ }
.meri li .meritt{display: flex;
  justify-content: center;  /* 横方向のセンタリング */
  align-items: flex-start;   /* 上揃え */}
.meri li .tate{  writing-mode: vertical-rl; /* 縦書き（右から左） */
  text-orientation: upright; /* 文字を正立させる */}
.meri li span{font-size: 11px}
.meri li .f12{line-height: 1.5; display: inline-block}
.meri li .pt80{padding-top: 80px}
.meri li:nth-child(2){margin:20px 0 0}
.meri li:last-child img{top: 80px}

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

staff

--------------------------------------------------------------------*/
#staff{margin:0 auto; padding: 100px 5% 60px; text-align: center; }
#staff dt{position: relative; max-width: 400px; margin: 0 auto}
#staff dt .p01{ width:262px; margin-left: -50px }
#staff dt .p02{ width:151px; position: absolute; bottom: 0px; left: 50%; }
#staff dt p{text-align: left; line-height: 1.5}
#staff dt p.kata{margin-top: 10px; font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.375rem)}/*18-22*/
#staff dt p.name{font-size:clamp(1.375rem, 0.875rem + 2.5vw, 1.875rem) }/*22-30*/
#staff dt p .en{display: block; font-size: 13px}

#staff dd{text-align: left; margin: 20px 0 0 ;}

#staff dd .wanflex{margin-top: 20px}
#staff dd .wanr {text-align: right; margin-top: 20px}
#staff dd .wanr img{position: relative; bottom: auto; right: auto; max-width:258px; width: 100%}


#staff .keireki{margin-bottom: 10px; color: #ffb423; border: 2px solid #ffb423; border-radius: 10px; display: inline-block; padding: 0px 20px; font-size: 17px}

#staff .textflex{text-align: left; margin: 30px 0 70px; }
#staff .textflex .textl{position: relative}
#staff .textflex img{width: 38%; max-width: 143px ; position: absolute; bottom: 9%; right: -2%}


#staff2{margin:0 auto; text-align: center ;background: url("../img/dodbg.jpg") no-repeat center 50px; background-size: 601px}
#staff2 dl{margin-bottom: 60px; padding: 0px 5%;}
#staff2 dt img{max-width:338px; width: 80% }

#staff2 dd{display: flex;
  justify-content: center;  /* 横方向のセンタリング */
  align-items: flex-start;   /* 上揃え */}
#staff2 dd p{text-align: left; margin-top: 20px; font-size: clamp(1.25rem, 0.875rem + 1.88vw, 1.625rem)}/*20-26*/

.animal{max-width: 500px; margin: 0 auto}
.animal h2{line-height: 1.4}

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

#equipment

--------------------------------------------------------------------*/
#equipment{text-align: center; padding-top: 40px; background: #fff1da; margin-top: 50px}
#equipment ul{padding-bottom: 40px}


#equipment2{text-align: center; padding: 50px 8% 0; max-width: 640px}
#equipment2 .eq1{ text-align: left}
#equipment2 h3{padding: 10px 0; text-align: center; font-size: clamp(1rem, 0.875rem + 0.63vw, 1.125rem)}/*16-18*/
#equipment2 h3 span{font-size: 12px}
#equipment2 li{ font-size:14px; margin-bottom: 30px ; line-height: 1.6}

#equipment2 .eq2{display: flex; justify-content: space-between; flex-flow: wrap}
#equipment2 .eq2 li{width: 48%; text-align: left}

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

#night

--------------------------------------------------------------------*/
#night{ padding-top: 60px; background: #fff1da; margin: 50px 0 0; text-align: center}
#night .plas{ margin-bottom: 0}
#night li{padding: 0 5% 40px}
#night li:last-child{padding-bottom: 80px}
#night P{text-align: left}

#night li:last-child h2{font-size:clamp(1.25rem, 6.25vw, 2.5rem) }/*20-40*/
#night dl{text-align: left; padding: 20px 0 0}
#night dl img{width: 234px;}
#night dl a{display:inline-block}
#night dl a img{ transition: transform 0.3s ease;}
#night dl a:hover img{transform: translateY(-10px);}
#night dt{padding-bottom: 20px}
#night dd a{display: inline-block}

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

#overview

--------------------------------------------------------------------*/
#overview{text-align: center; padding: 60px 8% }
#overview dl{line-height: 1.5; margin-bottom: 15px; text-align: left}
#overview dt{ background:#ffb423;; color: #fff; padding: 3px 10px }
#overview dd{padding: 3px 10px}
#overview a{color:#22201e }
#overview .morebtn a{color: #fff; padding: 0px 30px 02px 20px; line-height: 1}


#mess .pic img{width: 92px; margin-bottom: 60px; }
#mess{margin: 0 5% 100px; text-align: center}
#mess .plas{background: #fff; margin-top: -40px ; line-height: 1.4; font-size:clamp(1.125rem, 0.813rem + 1.56vw, 1.438rem)}/*18-23*/
#mess .messbox{border: 2px dashed #ffb423; padding: 0 5% 5% ; border-radius: 20px}
#mess .messbox .text{text-align: left;}
#mess span{text-align: right; display: block}

@media (max-width: 639px){
.pageheadBox h2{ line-height: 1.2}


}

@media (min-width: 640px){
.meri{width: 800px; margin: 0 auto; position: relative ;background: url(../img/bg_dodo.png) no-repeat center 50%; background-size: 648px; padding: 20px 0 0}
.meri h2{padding: 30px 0 0; width: 220px; height: 220px; position:absolute; top: -100px; right: 0}
.meri h2 img{margin-bottom: 15px}
.meri ul{width: 740px; margin: 0 auto; max-width:none; display: flex; justify-content: space-between}
.meri li{width: 180px; font-size: 18px;}
.meri li:first-child{margin: 0; width: 200px}
.meri li:nth-child(2) { margin-left:0; margin-top: 90px}
.meri li:last-child { position: relative; right: 0; margin-top:180px}
.meri li .pt80 {padding-top: 0;}
.meri li:last-child img { top: 0px;}

#staff{width: 1100px; margin: 0 auto ; padding: 100px 0 100px}
#staff dl{ display: flex; justify-content: space-between ; width: 1050px; margin: 0 auto}
#staff dt{width:344px ; max-width: none; margin: 0}
#staff dd{width:715px; margin: 0 }
#staff dl:first-of-type dt .p02{bottom:110px }

#staff dd .wanflex{display: flex; justify-content: space-between }
#staff dd .wanl{width: 440px; padding-top: 10px}
#staff dd .wanr {width:258px;  margin: -20px -20px 0 0}
#staff dt .p02{left: 45%}


#staff .textflex{width: 1050px; margin: 30px auto 100px ; display: flex; justify-content: space-between}
#staff .textl{width: 48%}
#staff .textr{width: 48% ; padding-top: 45px;}
#staff .textflex img{bottom: 0}

#staff dl:last-of-type dd{padding-top: 50px}

#staff2 dl{padding: 0; width: 650px; margin: 0 auto ;  flex-direction: row-reverse; display: flex; justify-content: space-between}
#staff2 dt{width:338px }
#staff2 dd{width:300px }
#staff2 dd p{margin: 0}

.animal{max-width: none; width: 100%; padding-top: 60px}
.animal .pic{width:778px; margin: 0 auto}

#equipment{margin-top: 100px; padding-top: 60px}

#equipment2 {
    padding: 50px 0 0;
    max-width: 1100px; margin: 0 auto
}

#equipment2 ul{display:flex; justify-content: space-between}
#equipment2 .eq1 li{width: 32%}
#equipment2 .eq1 li:last-child{margin-bottom: 50px}
#equipment2 .eq2 li{width: 18%}

#night{ margin: 80px 0 0;}
#night .plas{font-size: 36px}
#night li:last-child h2{font-size: 36px}
#night ul{width: 1050px; display: flex; justify-content: space-between; margin: 0 auto}
#night li{width: 48%; padding: 0}
#night li dl{display: flex; justify-content: space-between;}
#night li dt{width:48%; padding: 0 }
#night li dd{width: 48%}

#overview{width: 900px; margin:0 auto; padding: 60px 0;}
#overview dl{display:flex; justify-content: space-between; border-bottom: 2px dashed #ffb423; margin-bottom: 2px}
#overview dl:first-of-type{border-top: 2px dashed #ffb423;}
#overview dt{width: 10% ; padding: 10px 0 10px 20px;}
#overview dd{width: 90%; padding: 10px 0px 10px 20px;}

#mess .messbox{width: 760px; margin: 0 auto ; padding: 0 50px 30px; }
#mess .messbox .text{text-align: center; font-size: 17px}
#mess .messbox span{text-align: center}



}