@charset "utf-8";
/* ==================================================

  愛犬辞典CSS PC

================================================== */
@media screen and (min-width:768px) {
/* --------------------------------------------------
  #vi
-------------------------------------------------- */
#main #vi {
 background: url(/content/dam/sites/jp_unicharmpet_com/bestbalance/dictionary/bak_vi.jpg) no-repeat top center;
 background-size: cover;
 height: 500px;
 text-align: center;
 position: relative;
}
#main #vi .vi-inner {
 width: 1200px;
 margin: 0 auto;
}
#main #vi .vi-inner > h1 {
 background: url(/content/dam/sites/jp_unicharmpet_com/bestbalance/common/tit_back_white_shadow.png) no-repeat center 70px;
 padding-bottom: 27px;
 color: #ffffff;
 font-size: 45px;
 line-height: 1.4;
 letter-spacing: 4px;
 position: absolute;
 top: 50%;
 right: 0;
 left: 0;
 transform: translateY(-50%);
 -moz-text-shadow:2px 2px 1px #4a311c;
 -webkit-text-shadow:2px 2px 1px #4a311c;
 text-shadow:2px 2px 1px #4a311c;
}

/* --------------------------------------------------
  section
-------------------------------------------------- */
#main section {
 margin-top: 120px;
}
#main section > h2 {
 width: 1200px;
 background: url(/content/dam/sites/jp_unicharmpet_com/bestbalance/common/tit_back_black.png) no-repeat center 98px;
 color: #2b0000;
 text-align: center;
 font-size: 30px;
 margin: 0 auto;
 padding-bottom: 79px;
 letter-spacing: 4px;
 line-height: 1.4;
}

/* --------------------------------------------------
  .dictionary
-------------------------------------------------- */
#main .dictionary .dictionary-inner {
 width: 1200px;
 margin: -40px auto 100px;
 padding: 0 30px;
 display:-webkit-box;
 display:-ms-flexbox;
 display: flex;
 -webkit-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
}
#main .dictionary .dictionary-inner .dictionary-box {
 margin-top: 40px;
 padding: 0 22px;
}
#main .dictionary .dictionary-inner .dictionary-box:nth-child(3n+1) { padding-left: 0; }
#main .dictionary .dictionary-inner .dictionary-box:nth-child(3n+2) {
 border-left : 1px solid #ededed;
 border-right : 1px solid #ededed;
}
#main .dictionary .dictionary-inner .dictionary-box:nth-child(3n) { padding-right: 0; }
#main .dictionary .dictionary-inner .dictionary-box > a > .img > img { width: 350px; }
#main .dictionary .dictionary-inner .dictionary-box > a  > h3{
 color: #707070;
 text-align: center;
 padding-top: 30px;
 font-size: 18px;
}


}

/* ==================================================

  愛犬辞典CSS SP

================================================== */
@media screen and (max-width:767px) {
/* --------------------------------------------------
  #vi
-------------------------------------------------- */
#main #vi {
 background: url(/content/dam/sites/jp_unicharmpet_com/bestbalance/dictionary/bak_vi_sp.jpg) no-repeat top center;
 background-size: cover;
 height: 250px;
 text-align: center;
 position: relative;
}
#main #vi .vi-inner {
 padding: 0 20px;
}
#main #vi .vi-inner > h1 {
 background: url(/content/dam/sites/jp_unicharmpet_com/bestbalance/common/tit_back_white_shadow.png) no-repeat center 38px;
 padding-bottom: 19px;
 color: #ffffff;
 font-size: 24px;
 line-height: 1.6;
 position: absolute;
 top: 50%;
 right: 0;
 left: 0;
 transform: translateY(-50%);
 -moz-text-shadow:2px 2px 1px #4a311c;
 -webkit-text-shadow:2px 2px 1px #4a311c;
 text-shadow:2px 2px 1px #4a311c;
}

/* --------------------------------------------------
  section
-------------------------------------------------- */
#main section {
 margin: 30px 0 40px;
}
#main section > h2 {
 text-align: center;
 color: #2b0000;
 font-size: 19px;
 background: url(/content/dam/sites/jp_unicharmpet_com/bestbalance/common/tit_back_black.png) no-repeat center bottom;
 margin-bottom: 20px;
 padding: 0 20px 27px;
 letter-spacing: 3px;
 line-height: 1.5;
}

/* --------------------------------------------------
  .dictionary
-------------------------------------------------- */
#main .dictionary .dictionary-inner {
 width: 100%;
 margin: 0 auto;
 display:-webkit-box;
 display:-ms-flexbox;
 display: flex;
 -webkit-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
}
#main .dictionary .dictionary-inner .dictionary-box { width: 50%; }

#main .dictionary .dictionary-inner .dictionary-box > a { position: relative; }
#main .dictionary .dictionary-inner .dictionary-box > a  > h3{
 width: 100%;
 padding: 0 10px;
 text-align: center;
 position: absolute;
 bottom: 14px;
 font-size: 16px;
 line-height: 1.2;
 font-weight: bold;
 color: #ffffff;
}


}