@charset "utf-8";
/* ========TEMPLATE LAYOUT======== */
body {
    font-size: 13px;
    overflow-x: hidden;
}

#contents {
    width: 1000px;
    margin: 0 auto;
}

div#footerwrap {
}

#footer {
    width: 1000px;
    margin: 0 auto;
}
a {
    color: #444;
    text-decoration: none;
}
a:hover {
    color: #61a588;
}
.themecolor {
}
.themecolor2 {
}

a img:hover{opacity:0.8;}
a img{transition: all .3s ease;}

img.responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ========HEADER LAYOUT======== */
#headerwrap {
    border-top: 5px solid #62A78A;
}
#header {
    width: 1000px;
    height: 100px;
    margin: 0 auto;
    position: relative;
}
#header .logo {
    position: absolute;
    top: 5px;
    left: 10px;
}
#header .topglobalmenu1 {
    position: absolute;
    top: 0;
    right: 0;
}
#header .topglobalmenu2 {
    position: absolute;
    bottom: 15px;
    right: 0;
}

#header ul li {
	float: left;
	border-left: 1px solid #333;
	padding: 0 7px;
	font-size: 12px;
}
#header ul li a {
    padding: 3px 7px;
    color: #444;
    text-decoration: none;
    border-radius: 10px;
}
#header ul li a:hover {
    background: url(../images/common/cmn_menueachbg.jpg);
}
/* ========EYECATCh LAYOUT======== */
#top_eyecatch {
    text-align: center;
    padding: 20px 500%;
    margin: 0 -500%;
    background-image:
url(../images/common/cmn_animalbg1.png) ,
url(../images/top/top_bg1.jpg);
    background-repeat:
        no-repeat,
        repeat-x;
    background-position:
        center bottom,
        0 0;
}
.top_bg2area .bx-wrapper .bx-viewport {
    box-shadow: none;
    border: none;
    background: none;
}
#top_eyecatch .bx-wrapper img {
    display: inline;
}
#top_eyecatch .bx-wrapper .bx-viewport {
    border: none;
    box-shadow: none;
    background: none;
}
#top_eyecatch .bx-wrapper {
    margin-bottom: 0;
}
#childtoparea .animalbgarea {
    height: 170px;
}
#childtoparea {
    box-shadow: 0 4px 5px #ddd;
    padding-bottom: 15px;
}
#childtoparea .animalbgarea {
    background-image:
url(../images/common/cmn_animalbg3.png) ,
url(../images/top/top_bg1.jpg);
    background-repeat:
        no-repeat,
        repeat-x;
    background-position:
        center bottom,
        0 0;
}
#childtoparea .h2images {
    margin: -140px auto 0;
    width: 1000px;
}
.otherseriesarea {
    padding: 20px 500%;
    margin: 0 -500% 40px;
    background: rgba(0,0,0,0.1);
    box-shadow: 0 4px 5px #ddd;
}

.top_bg2area .bx-wrapper .bx-viewport,
.otherseriesarea .bx-wrapper .bx-viewport {
    box-shadow: none;
    border: none;
    background: none;
}
.top_bg2area .bx-wrapper .bx-prev,
.otherseriesarea .bx-wrapper .bx-prev {
    background: url(../images/common/cmn_slide_toleft.png) 0 0 no-repeat;
    left: -40px;
}
.top_bg2area .bx-wrapper .bx-next,
.otherseriesarea .bx-wrapper .bx-next {
    background: url(../images/common/cmn_slide_toright.png) 0 0 no-repeat;
    right: -30px;
}
.top_bg2area .bx-wrapper .bx-next:hover,
.otherseriesarea .bx-wrapper .bx-next:hover {
    background-position: 0 0;
}
.top_bg2area  .bx-wrapper .bx-controls-direction a,
.otherseriesarea .bx-wrapper .bx-controls-direction a {
    width: 24px;
    height: 44px;
}
.otherseries li span {
    display: block;
    margin-top: 5px;
}
.otherseries_voice li {
    background: #fff;
    padding: 2px;
}
.otherseries_voice li .inner {
    position: relative;
}
.otherseries_voice .panelbelt {
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}
.otherseries_voice .panelbelt.cl_green {
    background: rgba(88,172,138, 0.8);
}
.otherseries_voice .panelbelt.cl_pink {
    background: rgba(239,118,107, 0.8);
}
.otherseries_voice .panelbelt.cl_orange {
    background: rgba(255,166,77, 0.8);
}
.otherseries_voice .panelbelt.cl_blue {
    background: rgba(77,210,255, 0.8);
}
.otherseries_voice .smallthumb {
    float: left;
    margin: 0 5px 0 0;
}
.otherseries_voice .thumbdtl {
    overflow: hidden;
    color: #fff;
}
.otherseries_voice .thumbdtl .name {
    font-weight: bold;
}
.top_bg2area .bx-wrapper .bx-prev {
    background: url(../images/common/cmn_slide_toleft.png) 0 0 no-repeat;
    left: -40px;
}
.top_bg2area .bx-wrapper .bx-next {
    background: url(../images/common/cmn_slide_toright.png) 0 0 no-repeat;
    right: -30px;
}
.top_bg2area .bx-wrapper .bx-next:hover {
    background-position: 0 0;
}
.top_bg2area .bx-wrapper .bx-controls-direction a {
    width: 24px;
    height: 44px;
}


/* ========MENU LAYOUT======== */
.allwrapgray {
    padding: 15px 500%;
    margin: 5px -500% 0px;
    background: rgba(0,0,0,0.4);
}
.allwrapgray .title {
    color: #fff;
    font-size: 140%;
    padding-left: 10px;
    border-left: 10px solid #fff;
}
.allwrapbg1 {
    padding: 5px 500% 0;
    margin: 5px -500% 0px;
    background: url(../images/common/cmn_bgstripe.jpg);
}
.allwrapbg1 h2.spons{
	font-weight: bolder;
	font-size: 18px;
	margin-top: 0px;
}

/* ========MAIN LAYOUT======== */
#contentswrap {
    background: url(../images/common/cmn_animalbg2.png) 0 bottom repeat-x;
    padding-bottom: 180px
}
.breadcrumb {
    margin-bottom: 20px;
}
.breadcrumb ul {
    overflow: hidden;
}
.breadcrumb ul li {
    float: left;
    padding: 0 3px;
}
.breadcrumb ul li:before {
    content: ">";
    padding-right: 3px;
}
.breadcrumb ul li:first-child:before {
    content: none;
    padding: 0;
}
.breadcrumb ul li a {
    color: #444;
}
.cmnmorebtn {
    clear: both;
    background: url(../images/common/cmn_bgstripe.jpg);
    text-align: center;
    padding: 5px 0;
}
.cmnmorebtn2 {
    clear: both;
    background: rgba(94,171,138,0.5);
    text-align: center;
    padding: 5px 0;
}
.cmnmorebtn2 a {
    display: block;
}
/* ========SIDEBAR LAYOUT======== */

/* ========FOOTER LAYOUT======== */
.bnrarea .each {
    display: inline-block;
    margin: 0 4px 0 0;
}
.bnrarea .each:nth-child(4n) {
    margin-right: 0;
}
#footer .foottopwrap {
    padding: 20px 500%;
    margin: 0 -500% 0px;
    background: url(../images/common/foot_btmbg1.jpg) 0 0 repeat-x;
}
#footer .foottop {
    position: relative;
    padding: 40px 0 20px;
    overflow: hidden;
}
#footer .foottop .footmenu {
    display: inline-block;
    width: 600px;
}
#footer .foottop .footmenu ul.colarea {
    display: inline-block;
    width: 48%;
}
#footer .foottop .footmenu ul li {
    margin: 5px 0;
    padding: 3px 5px;
    background: rgba(255,255,255,0.2);
}
#footer .foottop .footmenu ul li a {
    background: url(../images/common/cmn_footli.png) 0 center no-repeat;
    text-decoration: none;
    padding: 3px 0 3px 30px;
    color: #fff;
}
#footer .foottop .footmenu ul li.child a {
    background: none;
    padding-left: 0;
    margin-left: 40px;
}
#footer .foottop .footmenu ul li.child a:before {
    content: "▶";
    font-size: 10px;
    padding-right: 5px;
}
#footer .foottop .footinfo {
    display: inline-block;
    width: 340px;
    vertical-align: top;
    color: #fff;
    font-size: 13px;
    float: right;
}
#footer .foottop .footinfo ul li:before {
    content: "＊";
}
#footer .footbtm {
    padding: 5px 500%;
    margin: 0 -500% 0px;
    background: url(../images/common/foot_btmbg2.jpg) 0 0 repeat-x;
    text-align: center;
}

/* ========PRODUCT SEARCH======== */

.searchpanelarea {
    text-align: center;
    padding: 20px 500%;
    margin: 0 -500% 40px;
    font-size: 0;
    box-shadow: 0 4px 5px #ddd;
}
.searchpanelarea .title {
    text-align: center;
}
.searchpanelarea .panellist {
    margin: 15px 0;
	font-size:0
}
.searchpanelarea .panellist .each {
	 position: relative;
    display: inline-block;
	 width: 80px;
    height: 80px;
    font-size: 14px;
    margin: 1px;
}

.searchpanelarea .panellist .each .moff {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: all .3s ease;
}
.searchpanelarea .panellist .each .mo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .3s ease;
}
.searchpanelarea .panellist .each:hover .mo {
    opacity: 1;
    transition: all .3s ease;
}
.searchpanelarea .panellist .each:hover .moff {
    opacity: 0;
    transition: all .3s ease;
}


/* ========RESPONSIVE PAGE LAYOUT======== */
@media (min-width: 1200px) {
    /*フル最大幅レイアウト*/
}
@media (max-width: 1200px) {
    /*通常最大幅レイアウト*/
}
@media (max-width: 990px) {
    /*PC通常幅レイアウト*/
}
@media (max-width: 768px) {
    /*タブレットレイアウト*/
}
@media screen and (max-width: 480px) {
    /*スマホレイアウト*/
}