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



/* ==============================================
reset-setting
============================================== */

* {
margin:0; 
padding:0;
}
h1,h2,h3,h4,h5,h6,p,th,td,dt,dd,li {
font-family:"NotoSansCJKjp", sans-serif;
font-size:100%;
line-height:100%;
font-weight:200;
color:#000;
margin:0;
padding:0;
}
img {
border:none;
vertical-align:top;
}
table {
border-collapse:collapse;
border-spacing:0;
}
ul {
list-style:none;
}
a:link {color:#000; text-decoration:underline;}
a:visited {color:#000; text-decoration:none;}
a:hover {color:#000; text-decoration:none;}
a:active {color:#000; text-decoration:none;}
a{
-webkit-transition: 0.1s ease-out;
transition: 0.1s ease-out;
}
a:hover{
opacity: 0.7;
}
::selection {
background:#A5E8F2;
}
::-moz-selection {
background:#A5E8F2;
}
.center{
text-align:center;
}
.left{
text-align:left;
}
.right{
text-align:right;
}
.pc{
display:none;
}



/* ==============================================
common
============================================== */

body{
min-width: 1060px;
}



header h1{
text-align: center;
font-size: 14px;
line-height: 24px;
z-index: 99;
color: #FFF;
position: absolute;
}
header .offer{
position: fixed;
top:20px;
right: 101px;
width: 80px;
height: 80px;
text-align: center;
background: rgba(0, 0, 0, 0.5);
margin: 0 0 10px 0;
z-index: 9999;
}
header .offer a{
display: block;
padding: 29px 0 31px 0;
}
header .offer a:hover{
opacity: 1;
background: rgba(0, 0, 0, 1);
}
header .offer a img{
width: 20px;
}
header .menu{
position: fixed;
top:20px;
right: 20px;
width: 80px;
height: 80px;
text-align: center;
background: rgba(0, 0, 0, 0.5) url(../img/cmn_gmn_icn_open.png) no-repeat center top 28px;
background-size: 20px auto;
z-index: 9999;
cursor: pointer;
-webkit-transition: 0.1s ease-out;
transition: 0.1s ease-out;
}
header .menu:hover{
background: rgba(0, 0, 0, 1) url(../img/cmn_gmn_icn_open.png) no-repeat center top 28px;
background-size: 20px auto;
}
header .menu.on{
background: rgba(0, 0, 0, 0.5) url(../img/cmn_gmn_icn_close.png) no-repeat center top 28px;
background-size: 20px auto;
}
header .menu.on:hover{
background: rgba(0, 0, 0, 1) url(../img/cmn_gmn_icn_close.png) no-repeat center top 28px;
background-size: 20px auto;
}
header .menu a img{
width: 20px;
}



header #menu{
position: fixed;
top: 0;
height: 100%;
-webkit-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
transition: .2s ease-in-out;
/* overflow-y: scroll; */
right : -400px;
z-index: 9998;
background: rgba(255, 255, 255, 0.9);
width: 400px;
}
header #menu.active{
right : 0px;
}
header #menu .inner{
padding: 0 20px;
}
header #menu .logo{
width: 100px;
padding: 48px 0 24px 0;
}



header #menu #category{
padding: 20px 0;
}
header #menu #category ul{
border-top: 1px #E2E2E2 solid;
border-left: 1px #E2E2E2 solid;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
background: #FFF;
}
header #menu #category ul li{
float: left;
border-right: 1px #E2E2E2 solid;
border-bottom: 1px #E2E2E2 solid;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
header #menu #category ul li a{
display: block;
font-size: 14px;
line-height: 14px;
text-decoration: none;
padding: 9px 0 12px 0;
}
header #menu #category ul li a:hover{
background: #EFEFEF;
opacity: 1;
}
header #menu #category ul li.category-01{
width: 33.33333%;
}
header #menu #category ul li.category-02{
width: 33.33333%;
}
header #menu #category ul li.category-03{
width: 33.33333%;
}
header #menu #category ul li.category-04{
width: 50%;
}
header #menu #category ul li.category-05{
width: 50%;
}
header #menu #category ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html header #menu #category ul { display:inline-block; }
*:first-child+html header #menu #category ul { display:inline-block; }



header #menu #apps{
background: #EFEFEF;
width: 50%;
float: left;
}
header #menu #apps h2{
font-size: 12px;
line-height: 16px;
text-align: center;
}
header #menu #apps h2 img{
width: 44px;
height: 44px;
display: block;
margin: auto;
padding: 10px 0 5px 0;
}
header #menu #apps ul{
padding: 10px 9px 10px 10px;
}
header #menu #apps ul li{
float: left;
width: 50%;
border-right: 1px #E2E2E2 solid;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
header #menu #apps ul li a{
background: #646464;
display: block;
padding: 13px 5px 13px 5px;
}
header #menu #apps ul li a img{
width: auto;
height: 18px;
}
header #menu #apps ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html header #menu #apps ul { display:inline-block; }
*:first-child+html header #menu #apps ul { display:inline-block; }



header #menu #line{
background: #EFEFEF;
width: 50%;
float: left;
border-left: 1px #FFF solid;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
header #menu #line h2{
font-size: 12px;
line-height: 16px;
text-align: center;
}
header #menu #line h2 img{
width: 44px;
height: 44px;
display: block;
margin: auto;
padding: 10px 0 5px 0;
}
header #menu #line p{
text-align: center;
padding: 10px 10px 10px 10px;
}
header #menu #line p a{
display: block;
background: #00B900;
padding: 6px 12px 8px 12px;
}



header #menu #sogojoho{
clear: both;
}
header #menu #sogojoho h2{
padding: 20px 0 10px 0;
}
header #menu #sogojoho h2 a{
font-size: 14px;
line-height: 14px;
letter-spacing: 2px;
text-decoration: none;
font-weight: 600;
}
header #menu #sogojoho h2 a:hover{
text-decoration: underline;
opacity: 1;
}
header #menu #sogojoho ul li a{
display: block;
font-size: 13px;
line-height: 13px;
letter-spacing: 1px;
text-decoration: none;
background: url(../img/cmn_arw_l_s_blck.png) right no-repeat;
background-size: 6px auto;
padding: 5px 0 5px 0;
}
header #menu #sogojoho ul li a:hover{
text-decoration: underline;
opacity: 1;
}



header #menu #members{
margin: 20px 0 0 0;
}
header #menu #members p{
text-align: center;
}
header #menu #members p a{
display: block;
font-size: 14px;
line-height: 14px;
letter-spacing: 1px;
color: #FFF;
text-decoration: none;
background: #646464;
padding: 15px 0 18px 0;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
header #menu #members p a:hover{
background: #000;
opacity: 1;
}



header #menu #follow h2{
font-family: "NotoSerifCJKjp";
font-size: 14px;
line-height: 14px;
letter-spacing: 3px;
text-align: center;
padding: 20px 0 15px 0;
}
header #menu #follow ul{
display: table;
margin: 0 auto;
}
header #menu #follow ul li{
float: left;
margin: 0 5px;
}
header #menu #follow ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html header #menu #follow ul { display:inline-block; }
*:first-child+html header #menu #follow ul { display:inline-block; }



header .change{
text-align: center;
padding: 10px 0 0 0;
}
header .change a{
display: block;
font-size: 14px;
line-height: 14px;
letter-spacing: 1px;
text-decoration: none;
border: solid 1px #DDDD;
padding: 15px 0 18px 0;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
header .change a:hover{
background: #EFEFEF;
opacity: 1;
}



footer{
padding: 0 50px 0 50px;
position: relative;
}



footer #follow h2{
font-family: "NotoSerifCJKjp";
font-size: 14px;
line-height: 14px;
letter-spacing: 3px;
text-align: center;
padding: 0 0 15px 0;
}
footer #follow ul{
display: table;
margin: 0 auto;
}
footer #follow ul li{
float: left;
margin: 0 5px;
}
footer #follow ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html footer #follow ul { display:inline-block; }
*:first-child+html footer #follow ul { display:inline-block; }



footer #category{
padding: 30px 0 50px 0;
}
footer #category ul{
border-top: 1px #E2E2E2 solid;
border-left: 1px #E2E2E2 solid;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
footer #category ul li{
float: left;
border-right: 1px #E2E2E2 solid;
border-bottom: 1px #E2E2E2 solid;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
width: 20%;
}
footer #category ul li a{
display: block;
font-size: 14px;
line-height: 14px;
letter-spacing: 1px;
text-decoration: none;
padding: 18px 0 21px 0;
}
footer #category ul li a:hover{
background: #EFEFEF;
opacity: 1;
}
footer #category ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html footer #category ul { display:inline-block; }
*:first-child+html footer #category ul { display:inline-block; }



footer .inner{
margin: 0 295px 0 0;
}
footer .inner:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* htmlfooter .inner { display:inline-block; }
*:first-child+html footer .inner { display:inline-block; }



footer #apps{
background: #EFEFEF;
width: 50%;
float: left;
position: relative;
}
footer #apps h2{
position: absolute;
top: 0;
left: 0;
font-size: 14px;
line-height: 24px;
padding: 38px 0 0 128px;
}
footer #apps h2 img{
position: absolute;
top:20px;
left: 20px;
}
footer #apps ul{
padding: 19px 20px 20px 287px;
}
footer #apps ul li{
border-top: 1px #E2E2E2 solid;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
footer #apps ul li a{
background: #646464;
display: block;
padding: 9px 0 9px 0;
}
@media screen and (max-width:1260px) { 
footer #apps{
width: 100%;
float: none;
}
footer #apps h2{
padding: 48px 0 0 128px;
}
footer #apps h2 br{
display: none;
}
footer #apps ul{
padding: 20px 20px 20px 430px;
}
}


footer #line{
position: relative;
background: #EFEFEF;
width: 50%;
float: left;
border-left: 1px #FFF solid;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
footer #line h2{
position: absolute;
top: 0;
left: 0;
font-size: 14px;
line-height: 24px;
padding: 38px 0 0 128px;
}
footer #line h2 img{
position: absolute;
top:20px;
left: 20px;
}
footer #line p{
text-align: center;
padding: 20px 20px 20px 287px;
}
footer #line p a{
display: block;
background: #00B900;
padding: 28px 0 31px 0;
}
footer #line p a img{
}
@media screen and (max-width:1260px) { 
footer #line{
width: 100%;
float: none;
border-top: 1px #FFF solid;
border-left: none;
}
footer #line h2{
padding: 48px 0 0 128px;
}
footer #line h2 br{
display: none;
}
footer #line p{
padding: 20px 20px 20px 430px;
}
}



footer #sogojoho{
position: absolute;
top:188px;
right:50px;
width: 265px;
}
footer #sogojoho h2{
padding: 30px 0 0 0;
}
footer #sogojoho h2 a{
font-size: 14px;
line-height: 14px;
letter-spacing: 2px;
text-decoration: none;
font-weight: 600;
}
footer #sogojoho h2 a:hover{
text-decoration: underline;
opacity: 1;
}
footer #sogojoho ul{
padding: 8px 0 0 0;
}
footer #sogojoho ul li a{
display: block;
font-size: 13px;
line-height: 13px;
letter-spacing: 1px;
text-decoration: none;
background: url(../img/cmn_arw_l_s_blck.png) right no-repeat;
background-size: 6px auto;
padding: 8px 0 8px 0;
}
footer #sogojoho ul li a:hover{
text-decoration: underline;
opacity: 1;
}



footer #members{
width: 315px;
float: left;
margin: 50px 30px 0 0;
background: #EFEFEF;
}
footer #members p{
text-align: center;
padding: 22px 20px 0 20px;
}
footer #members p a{
display: block;
font-size: 14px;
line-height: 14px;
color: #FFF;
text-decoration: none;
background: #646464;
padding: 15px 0 18px 0;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
footer #members p a:hover{
background: #000;
opacity: 1;
}
footer #members ul{
display: table;
margin: 0 auto;
padding: 18px 0 11px 0;
}
footer #members ul li{
float: left;
padding: 0 10px;
}
footer #members ul li a{
font-size: 13px;
line-height: 13px;
}
footer #members ul li a:hover{
opacity: 1;
}
footer #members ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html footer #members ul { display:inline-block; }
*:first-child+html footer #members ul { display:inline-block; }



footer .change{
text-align: center;
padding: 10px 0 0 0;
width: 300px;
position: absolute;
bottom:130px;
left: 0;
right: 0;
margin: auto;
}
footer .change a{
display: block;
font-size: 14px;
line-height: 14px;
letter-spacing: 1px;
text-decoration: none;
border: solid 1px #DDDD;
padding: 15px 0 18px 0;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
footer .change a:hover{
background: #EFEFEF;
opacity: 1;
}



footer #ad{
width: 280px;
float: left;
margin: 50px 30px 0 0;
}
footer #ad ul{
border-top: solid 1px #CECECE;
}
footer #ad ul li{
border-right: solid 1px #CECECE;
border-bottom: solid 1px #CECECE;
border-left: solid 1px #CECECE;
}
footer #ad ul li a{
display: block;
font-size: 14px;
line-height: 14px;
letter-spacing: 1px;
text-decoration: none;
background: url(../img/cmn_arw_l_s_blck.png) top 15px right 15px no-repeat;
padding: 13px 0 15px 15px;
}
footer #ad ul li a:hover{
background: #EFEFEF url(../img/cmn_arw_l_s_blck.png) top 15px right 15px no-repeat;
opacity: 1;
}



footer #corporate{
position: absolute;
bottom:120px;
left: 0;
right: 0;
margin: auto;
width: 570px;
}
footer #corporate ul{
float: left;
}
footer #corporate ul li{
float: left;
padding: 0 10px;
}
footer #corporate ul li a{
font-size: 13px;
line-height: 24px;
letter-spacing: 1px;
}
footer #corporate ul li a:hover{
opacity: 1;
}
footer #corporate:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html footer #corporate { display:inline-block; }
*:first-child+html footer #corporate { display:inline-block; }

/*190603追加*/
footer #benesse-footer{ 
overflow:hidden; padding-top:150px; width:100%;}
footer .benesse-footer__inner{max-width:1036px !important;}
footer .benesse-footer__copyright{font: 11px "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;}



footer #links{
padding: 15px 25px 25px 25px;
border: solid 1px #CECECE;
margin: 50px 0 0 655px;
}
footer #links ul li{
padding: 5px 0 0 0;
}
footer #links ul li a{
font-size: 11px;
line-height: 13px;
text-decoration: none;
}
footer #links ul li a:hover{
text-decoration: underline;
opacity: 1;
}



footer .copy{
font-size: 10px;
line-height: 10px;
letter-spacing: 1px;
text-align: center;
clear: both;
padding: 190px 0 0 0;
}



footer:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html footer { display:inline-block; }
*:first-child+html footer { display:inline-block; }



/* ==============================================
.dogcat-top
============================================== */

.dogcat-top #introduction{
height: 800px;
position: relative;
margin: 20px 0 0 0;
}
.dogcat-top #introduction h2{
position: absolute;
top:200px;
left: 70px;
z-index: 101;
}
.dogcat-top #introduction #slider{
height: 120px;
overflow: hidden;
position: absolute;
bottom:0;
z-index: 101;
left: 20px;
right: 20px;
border-right: 1px solid #EEE;
border-bottom: 1px solid #EEE;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.dogcat-top #introduction #slider .slick{
width: 100%;
}
.dogcat-top #introduction #slider .slick li{
background:rgba(0, 0, 0, 0.5);
position: relative;
height: 120px;
overflow: hidden;
}
.dogcat-top #introduction #slider .slick li a{
display: block;
font-size: 13px;
line-height: 20px;
font-weight: 200;
text-align: justify;
color: #FFF;
text-decoration: none;
padding: 17px 20px 200px 137px;
}
.dogcat-top #introduction #slider .slick li img{
position: absolute;
top:0;
left: 0;
width: 120px;
height: 120px;
}
.dogcat-top #introduction #slider .slick-slide{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
.dogcat-top #introduction #slider .slick-initialized .slick-slide{
display: block;
}
.dogcat-top #introduction #slider button{
display: none!important;
}
.dogcat-top #introduction .visual{
height: 800px;
position: absolute;
top:0;
left: 20px;
right: 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 100;
}



.dogcat-top .scroll{
text-align: center;
}
.dogcat-top .scroll a{
font-family: "NotoSerifCJKjp";
font-size: 14px;
line-height: 14px;
letter-spacing: 2px;
font-weight: 200;
display: block;
text-decoration: none;
padding: 16px 0 0 0;
}
.dogcat-top .scroll img{
display: block;
margin: 0 auto;
padding: 19px 0 0 0;
}



.dogcat-top #book{
position: relative;
padding: 0 0 774px 0;
}
.dogcat-top #book h2{
position: absolute;
top: 288px;
right: 0;
z-index: 101;
opacity: 0.8;
}
.dogcat-top #book .catch{
font-family: "NotoSerifCJKjp";
font-size: 16px;
line-height: 16px;
letter-spacing: 2px;
font-weight: 300;
opacity: 0.8;
position: absolute;
top:50px;
left: 0;
width: 480px;
text-align: center;
padding: 44px 0 0 0;
z-index: 102;
}
.dogcat-top #book .catch strong{
display: block;
font-size: 40px;
line-height: 52px;
font-weight: 200;
padding: 13px 0 19px 0;
}
.dogcat-top #book .image{
position: absolute;
top: 150px;
left: 100px;
width: 274px;
text-align: center;
padding: 140px 0 50px 0;
border: solid 1px #FFF;
}
.dogcat-top #book p{
font-size: 15px;
line-height: 28px;
text-align: justify;
position: relative;
z-index: 101;
padding: 143px 0 0 424px;
}
.dogcat-top #book p img{
width: 175px;
}
.dogcat-top #book ul{
width: 380px;
padding: 32px 0 0 424px;
position: relative;
z-index: 101;
}
.dogcat-top #book li.more{
float: left;
width: 50%;
text-align: center;
}
.dogcat-top #book li.more a{
font-size: 14px;
line-height: 16px;
letter-spacing: 1px;
font-weight: 300;
border: 1px solid rgba(0, 0, 0, 0.2);
display: block;
text-decoration: none;
padding: 18px 0 16px 0;
}
.dogcat-top #book li.more a:hover{
opacity: 1;
background: #D9EDF2;
}
.dogcat-top #book li.more a img{
vertical-align: middle;
margin: -1px 0 0 5px;
}
.dogcat-top #book li.offer{
float: left;
width: 50%;
text-align: center;
}
.dogcat-top #book li.offer a{
font-size: 14px;
line-height: 16px;
letter-spacing: 1px;
font-weight: 300;
border-top: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
display: block;
text-decoration: none;
padding: 18px 0 16px 0;
}
.dogcat-top #book li.offer a:hover{
opacity: 1;
background: #D9EDF2;
}
.dogcat-top #book li.offer a img{
vertical-align: middle;
margin: -2px 0 0 3px;
}
.dogcat-top #book ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html header .dogcat-top #book ul { display:inline-block; }
*:first-child+html header .dogcat-top #book ul { display:inline-block; }

.dogcat-top #book .visual{
position: absolute;
bottom:0;
left: 0;
width: 100%;
height: 100%;
}
.dogcat-top #book .bg{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
overflow:hidden;
}



.dogcat-top #hoken{
position: relative;
background: #FFD7D2;
padding: 20px 20px 20px 20px;
}
.dogcat-top #hoken div{
border: solid 0px #FFF;
position: relative;
}
.dogcat-top #hoken .inner{
border: none;
height: 532px;
margin: 0 0 0 50%;
}
.dogcat-top #hoken h2{
position: absolute;
top:0;
left: 0;
right: 0;
padding: 194px 0 0 0;
text-align: center;
}
.dogcat-top #hoken .catch{
font-family: "NotoSerifCJKjp";
font-size: 20px;
line-height: 36px;
letter-spacing: 8px;
font-weight: 300;
text-align: center;
padding: 90px 0 120px 30px;
}
.dogcat-top #hoken ul{
width: 380px;
margin: auto;
}
.dogcat-top #hoken li.more{
width: 50%;
text-align: center;
margin: 0 auto;
}
.dogcat-top #hoken li.more a{
font-size: 14px;
line-height: 16px;
letter-spacing: 1px;
font-weight: 300;
border: 1px solid rgba(0, 0, 0, 0.2);
display: block;
text-decoration: none;
padding: 18px 0 16px 0;
}
.dogcat-top #hoken li.more a:hover{
opacity: 1;
background: #FFF;
}
.dogcat-top #hoken li.more a img{
vertical-align: middle;
margin: -1px 0 0 5px;
}
.dogcat-top #hoken li.offer{
float: left;
width: 50%;
text-align: center;
}
.dogcat-top #hoken li.offer a{
font-size: 14px;
line-height: 16px;
letter-spacing: 1px;
font-weight: 300;
border-top: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
display: block;
text-decoration: none;
padding: 18px 0 16px 0;
}
.dogcat-top #hoken li.offer a:hover{
opacity: 1;
background: #FFF;
}
.dogcat-top #hoken li.offer a img{
vertical-align: middle;
margin: -2px 0 0 3px;
}
.dogcat-top #hoken ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html header .dogcat-top #hoken ul { display:inline-block; }
*:first-child+html header .dogcat-top #hoken ul { display:inline-block; }

.dogcat-top #hoken .note{
font-size: 10px;
line-height: 15px;
color: #705552;
text-align: justify;
width: 380px;
margin: auto;
padding: 50px 0 0 0;
}
.dogcat-top #hoken .visual{
width: 50%;
height: 532px;
border: none;
position: absolute;
top:0;
left: 0;
}
.dogcat-top #hoken .visual span{
font-size: 14px;
line-height: 24px;
letter-spacing: 2px;
font-weight: 300;
position: absolute;
top:30px;
right: 30px;
z-index: 101;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
vertical-align: middle;
}
.dogcat-top #hoken .icon{
position: absolute;
top: -45px;
right: 0;
width: 50%;
text-align: center;
z-index: 101;
}



.dogcat-top #webmag{
position: relative;
height: 798px;
}
.dogcat-top #webmag .inner{
padding: 0 698px 0 0;
}
.dogcat-top #webmag h2{
text-align: center;
padding: 140px 0 0 0;
}
.dogcat-top #webmag .catch{
font-family: "NotoSerifCJKjp";
font-size: 20px;
line-height: 30px;
font-weight: 300;
position: absolute;
top:295px;
right: 545px;
z-index: 101;
}
.dogcat-top #webmag .catch span{
background: #FFF;
display: block;
padding: 20px 18px 10px 18px;
width: 20px;
}
.dogcat-top #webmag .catch img{
position: absolute;
top:-11px;
left: 8px;
}
.dogcat-top #webmag .catch .right{
margin: -12px -12px 12px 12px;
width: inherit;
padding: 0;
}
.dogcat-top #webmag ul{
width: 300px;
margin: auto;
padding: 50px 0 20px 0;
}
.dogcat-top #webmag ul li{
position: relative;
padding: 0 0 0 75px;
text-align: justify;
height: 82px;
}
.dogcat-top #webmag ul li a{
display: block;
font-size: 13px;
line-height: 20px;
text-decoration: none;
}
.dogcat-top #webmag ul li a img{
width: 52px;
position: absolute;
top:4px;
left: 0;
}
.dogcat-top #webmag .more{
width: 300px;
text-align: center;
margin: 0 auto;
}
.dogcat-top #webmag .more a{
font-size: 14px;
line-height: 16px;
letter-spacing: 1px;
font-weight: 300;
border: 1px solid rgba(0, 0, 0, 0.2);
display: block;
text-decoration: none;
padding: 10px 0 10px 3px;
}
.dogcat-top #webmag .more a:hover{
opacity: 1;
background: #ED8793;
}
.dogcat-top #webmag .more a img{
vertical-align: middle;
margin: -1px 0 0 5px;
}
.dogcat-top #webmag .visual{
position: absolute;
top:100px;
right: 100px;
width: 100%;
height: 598px;
}
.dogcat-top #webmag .icon{
position: absolute;
bottom: 95px;
right: 375px;
z-index: 100;
}



.dogcat-top #food{
position: relative;
border-left: 20px solid #FFF;
border-right: 20px solid #FFF;
border-bottom: 20px solid #FFF;
height: 510px;
padding: 0 0 0 630px;
}
.dogcat-top #food .image{
z-index: 102;
}
.dogcat-top #food .visual{
position: absolute;
top:-50px;
left: 30px;
width: 606px;
height: 607px;
z-index: 101;
}
.dogcat-top #food .inner{
position: absolute;
z-index: 102;
top:0;
left: 0;
}
.dogcat-top #food h2{
text-align: center;
width: 670px;
padding: 100px 0 0 0;
}
.dogcat-top #food .catch{
font-family: "NotoSerifCJKjp";
font-size: 20px;
line-height: 36px;
letter-spacing: 10px;
font-weight: 500;
text-align: center;
width: 670px;
padding: 30px 0;
}
.dogcat-top #food .catch .c01{
color: #C87D6A;
}
.dogcat-top #food .catch .c02{
color: #EBA733;
}
.dogcat-top #food .catch .c03{
color: #80B860;
}
.dogcat-top #food .more{
width: 180px;
text-align: center;
margin: 0 0 0 245px;
}
.dogcat-top #food .more a{
font-size: 14px;
line-height: 16px;
letter-spacing: 1px;
font-weight: 300;
border: 1px solid rgba(0, 0, 0, 0.2);
display: block;
text-decoration: none;
padding: 10px 0 10px 3px;
}
.dogcat-top #food .more a:hover{
opacity: 1;
background: #FFF;
}
.dogcat-top #food .more a img{
vertical-align: middle;
margin: -1px 0 0 5px;
}
.dogcat-top #food ul.rank{
margin: auto;
max-width: 600px;
height: 274px;
padding: 225px 0 0 0;
}
.dogcat-top #food ul.rank li{
text-align: center;
width: 33.33333%;
float: left;
}
.dogcat-top #food ul.rank li span{
display: block;
width: 140px;
height: 140px;
border-radius: 200px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
margin: 0 auto 5px auto;
}
.dogcat-top #food ul.rank li img{
width: 100px;
height: auto;
border-radius: 200px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
margin: 23px 0 0 0;
}
.dogcat-top #food ul.rank li a{
font-size: 13px;
line-height: 18px;
text-decoration: none;
}
.dogcat-top #food ul.rank li a:hover{
text-decoration: underline;
}
.dogcat-top #food ul.icon{
margin: auto;
max-width: 600px;
}
.dogcat-top #food ul.icon li{
text-align: center;
width: 33.33333%;
float: left;
}
.dogcat-top #food ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html .dogcat-top #food ul { display:inline-block; }
*:first-child+html .dogcat-top #food ul { display:inline-block; }



.dogcat-top #hatsuneko{
position: relative;
}
.dogcat-top #hatsuneko .inner{
position: relative;
max-width: 1200px;
height: 510px;
margin: auto;
}
.dogcat-top #hatsuneko .inner div{
background: rgba(0, 0, 0, 0.5);
position: absolute;
z-index: 101;
width: 340px;
right:0;
bottom:50px;
}
.dogcat-top #hatsuneko a{
text-decoration: none;
background: url(../img/cmn_arw_l_s_wht.png) bottom 22px right 20px no-repeat;
display: block;
padding: 0 0 22px 0;
}
.dogcat-top #hatsuneko h2{
font-size: 13px;
line-height: 13px;
color: #FFF;
padding: 19px 0 0 80px;
}
.dogcat-top #hatsuneko h2 img{
margin: 11px 0 0 0;
}
.dogcat-top #hatsuneko .image{
width: 48px;
position: absolute;
top:20px;
left: 20px;
}
.dogcat-top #hatsuneko .icon{
position: absolute;
top:-11px;
left: 25px;
width: 40px;
}
.dogcat-top #hatsuneko .catch{
font-family: "NotoSerifCJKjp";
font-size: 20px;
line-height: 30px;
letter-spacing: 3px;
font-weight: 300;
color: #FFF;
position: absolute;
top:50px;
right: 140px;
z-index: 101;
}
.dogcat-top #hatsuneko .catch strong{
display: block;
font-weight: 300;
padding: 180px 0 0 0;
position: absolute;
top:0;
right: 30px;
}
.dogcat-top #hatsuneko .catch span{
margin: 0 -12px 0 12px;
}
.dogcat-top #hatsuneko .visual{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 510px;
z-index: 100;
}



.dogcat-top #search{
position: relative;
height: 510px;
}
.dogcat-top #search h2{
position: relative;
z-index: 101;
text-align: center;
padding: 60px 0 0 0;
}
.dogcat-top #search .catch{
position: relative;
z-index: 101;
font-family: "NotoSerifCJKjp";
font-size: 20px;
line-height: 36px;
letter-spacing: 8px;
font-weight: 300;
opacity: 0.8;
text-align: center;
padding: 24px 0 28px 20px;
}
.dogcat-top #search .more{
position: relative;
z-index: 101;
width: 170px;
text-align: center;
margin: 0 auto;
}
.dogcat-top #search .more a{
font-size: 14px;
line-height: 16px;
letter-spacing: 1px;
font-weight: 300;
border: 1px solid rgba(0, 0, 0, 0.2);
display: block;
text-decoration: none;
padding: 16px 0 18px 3px;
}
.dogcat-top #search .more a:hover{
opacity: 1;
background: rgba(255, 255, 255, 1);
}
.dogcat-top #search .more a img{
vertical-align: middle;
margin: -1px 0 0 5px;
}
.dogcat-top #search .visual{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 510px;
z-index: 100;
}
.dogcat-top #search .icon{
position: absolute;
top:-11px;
left: 0;
right: 0;
z-index: 101;
text-align: center;
}



.dogcat-top #application{
position: relative;
height: 510px;
}
.dogcat-top #application h2{
position: relative;
z-index: 101;
width: 81px;
position: absolute;
width: 100%;
text-align: center;
top:185px;
}
.dogcat-top #application .catch{
font-family: "NotoSerifCJKjp";
font-size: 20px;
line-height: 20px;
letter-spacing: 8px;
font-weight: 300;
opacity: 0.8;
position: absolute;
z-index: 101;
top:70px;
right: 0;
left: 0;
margin: auto;
text-align: center;
}
.dogcat-top #application .catch br{
display: none;
}
.dogcat-top #application .more{
position: absolute;
z-index: 101;
width: 200px;
text-align: center;
bottom: 70px;
left: 0;
right: 0;
margin: auto;
}
.dogcat-top #application .more a{
font-size: 14px;
line-height: 16px;
letter-spacing: 1px;
font-weight: 300;
border: 1px solid rgba(0, 0, 0, 0.2);
display: block;
text-decoration: none;
padding: 10px 0 10px 3px;
background: rgba(255, 255, 255, 0.5);
}
.dogcat-top #application .more a:hover{
opacity: 1;
background: rgba(255, 255, 255, 1);
}
.dogcat-top #application .more a img{
vertical-align: middle;
margin: -1px 0 0 5px;
}
.dogcat-top #application .visual{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 510px;
z-index: 100;
}
.dogcat-top #application .icon{
position: absolute;
top:-11px;
left: 0;
right: 0;
z-index: 101;
text-align: center;
}



.dogcat-top #message{
position: relative;
}
.dogcat-top #message h2{
font-family: "NotoSerifCJKjp";
font-size: 16px;
line-height: 16px;
letter-spacing: 8px;
font-weight: 300;
opacity: 0.8;
text-align: center;
padding: 250px 0 250px 0;
}
.dogcat-top #message h2 img{
display: block;
margin: 50px auto 0 auto;
}
.dogcat-top #message h2 br{
display: none;
}
.dogcat-top #message .icon{
position: absolute;
top:-11px;
left: 0;
right: 0;
z-index: 101;
text-align: center;
}



/* ==============================================
movings.js
============================================== */

.spmode-chk {
display:none;
}
.mvinit-vh {
visibility:hidden;
opacity: 0;
position:relative;
}
.wave-mark {
position:relative;
display: inline-block;
margin-bottom:5px;
}
.wave-mark-in {
background: url(../img/cmn_wv_blck.png) left bottom repeat-x;
width:0%;
height:3px;
position:absolute;
left:0px;
bottom:-3px;
opacity: 0.8;
}

#search .wave-mark-in {
bottom:-5px;
	}
	
.offer .wave-mark-in {
bottom:-3px;
}



/* ==============================================
font-setting
============================================== */

@font-face {
font-family: "NotoSansCJKjp";
font-style: normal;
font-weight: 200;
src: url('../font/NotoSansCJKjp-Light.woff') format('woff');
}
@font-face {
font-family: "NotoSansCJKjp";
font-style: normal;
font-weight: 300;
src: url('../font/NotoSansCJKjp-DemiLight.woff') format('woff');
}
@font-face {
font-family: "NotoSansCJKjp";
font-style: normal;
font-weight: 600;
src: url('../font/NotoSansCJKjp-Bold.woff') format('woff');
}



@font-face {
font-family: "NotoSerifCJKjp";
font-style: normal;
font-weight: 200;
src: url('../font/NotoSerifCJKjp-Light.woff') format('woff');
}
@font-face {
font-family: "NotoSerifCJKjp";
font-style: normal;
font-weight: 300;
src: url('../font/NotoSerifCJKjp-Regular.woff') format('woff');
}