*{
margin:0;
padding:0;
font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
color:#333;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
a img{
border:none;
}
img{
vertical-align:bottom;
}
li{
list-style-type: none;
}
.responsive{
max-width:100%;
height:auto;
}

/*iPhone用*/
html {
-webkit-text-size-adjust: 100%;
}

#loading{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background-color:#fff;
z-index:1;
}
#loading .logo{
position:absolute;
top:45%;
left:35%;
width:30%;
}
#loading .logo.fuwa{
 animation-name:fuwa;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-duration: 0.5s;
}
@keyframes fuwa {
0% {
opacity:2;
}
100% {
opacity:0.5;
}
}

#container{
position:relative;
width:100%;
min-width:1260px;
z-index:0;
}

#header{
margin-top:1%;
}
#header .logo{
margin:0 auto;
width:35%;
}
#header .btn{
margin-top: 0.5%;
padding:0.5% 0;
background-color:#DCECEC;
}
#header .btn .content{
margin:0 auto;
width: 1200px;
text-align: center;
}
#header .btn .content div {
display:inline-block;
margin: 0 0.5%;
width: 12%;
}

#main{
overflow:hidden;
opacity:0;
}

#news{
margin: 4% auto 0 auto;
border-top:1px dashed #0073D1;
border-bottom:1px dashed #0073D1;
padding:0.5% 0;
width: 1000px;
}
#news > div{
padding-right: 5%;
background:url(images/news_arrow.png) 100% 50% no-repeat;
background-size: 10px;
}
#news > div a{
font-size:0.9rem;
line-height: 1.2;
color:#0073D1;
}
#banner_70th {
margin-top:2%;
text-align: center;
}
#banner_70th a{
margin:0 auto 0 auto;
border-radius:20px;
padding:0.5% 2%;
text-decoration:none;
color:#fff;
background-color:#3A9863;
}

#series{
/*overflow-x:clip;*//*hiddenだとyはautoになる*/
overflow: hidden;
}
#series > div{/*各図鑑*/
position:relative;
margin-top:11%;
}
#series .midashi{
position:absolute;
top: -21%;
left: 0;
width: 680px;
z-index:1;
}
#series .photo{
position:absolute;
top: -29%;
left: 0%;
width: 280px;
z-index:2;
}
#series a img{
height:240px;
width:auto;
}
#series .bg{
position:relative;
padding: 0.5% 0 3% 0;
height:350px;
z-index:0;
}
#series .content {
position:absolute;
top:6%;
z-index:3;
}
#series .new{
margin:0 auto -22% auto;
width:45%;
}
#series .sotei img{
filter:drop-shadow(2px 2px 2px #666);
}
#series .purchase {
margin-top:8%;
text-align:center;
}
#series .purchase a{
border-radius: 20px;
padding: 3% 12%;
font-size:1.2rem;
color: #fff;
background-color: #d00;
}
#series p {
margin-top:3%;
text-align:center;
font-size:0.9rem;
line-height:1.2;
}
#series .catalog{
margin:0.5% 2% 0 0;
text-align:right;
}
#series .catalog a{
font-weight:bold;
font-size:1rem;
}

#neoSeries .bg{
background-color:#FFC136;
}
#neoSeries .catalog a{
color:#F15A24;
}

#startSeries .bg{
background-color:#f6b4cd;
}

#startSeries .catalog a{
color:#f45f93;
}
#startSeries .content{/*swiper無効*/
width:100%;
}
#startSeries .swiper-wrapper {
justify-content: center;
}
#startSeries .swiper-slide.sotei {
margin: 0 2%;
}

#pocketSeries .bg{
background-color:#A0E05A;
}
#pocketSeries .catalog a{
color:#00AC5F;
}

#madoakeSeries .bg{
background-color:#78D2F7;
}
#madoakeSeries .catalog a{
color:#00A0EC;
}

#kanrenSeries .bg{
height:400px;/*例外*/
background-color:#B2A2E8;
}
#kanrenSeries a img{
height:300px;
}

#preSeries .bg{
background-color:#FFA0A0;
}
#preSeries .catalog a{
color:#F94151;
}

#genre{
margin-top:4%;
}
#genre .midashi{
margin:0 auto;
width:25%;
}
#genre .btn{
margin-top:2%;
}
#genre .btn .content{
margin:0 auto;
width: 1100px;
text-align:center;
}
#genre .btn .content > div{
display:inline-block;
width: 7%;
}
#genre .btn .bg{
position:relative;
padding-bottom:7%;
}
#genre .btn .bg.active{
border-bottom:5px solid #0058DB;
}
#genre .btn .photo{
position:absolute;
top:0;
left:0;
}

#result{
background-color:#9CCBFF;
}
#result > .content{
margin:0 auto;
padding:2% 2% 10% 2%;
width:1000px;
}
#result > .content > div {
display: inline-block;
margin: 2% 2%;
width: 15%;
text-align:center;
}
#result > .content img{
width:150px;
height:auto;
filter:drop-shadow(2px 2px 2px #666);
}
#result > .content img.pocket{
width:108px;
height:auto;
}
#result .purchase {
margin-top:8%;
text-align:center;
}
#result .purchase a{
border-radius: 20px;
padding: 3% 12%;
font-size:1.2rem;
color: #fff;
background-color: #d00;
}

#flow{
margin-top:-10%;
}

#middle_banner{
margin-top:4%;
text-align:center;
}
#middle_banner .content{
margin:0 auto;
width:1000px;
}
#middle_banner .content > div{
display:inline-block;
margin:1% 1%;
width:45%
}
#middle_banner .midashi{
font-weight:bold;
font-size:1.4rem;
color:#FF8B20;
}

#tvcm{
margin-top:60px;
text-align: center;
font-size:12px;
line-height: 20px;
}
#tvcm > .content {
margin: 0 auto;
width: 1000px;
}
#tvcm .title{
margin-top:2px;
line-height: 1.4;
}
#tvcm > .content > .lineup > div{
margin-top:10px;
padding: 0 0.5%;
display: inline-block;
vertical-align:top;
text-align:center;
/*width:18.5%;*/
/*width:23.5%;*/
width:32%;
/*width:48%;*/
}

#notice{
margin-top:2%;
text-align:center;
}
#notice p{
margin:0.5% auto 0 auto;
border-radius:40px;
padding:0.5% 0;
width:400px;
font-size:1.2rem;
line-height:1.2;
}
#notice a{
color:#fff;
}
#notice .red p{
background-color:#E60000;
}
#notice .blue p{
background-color:#0073D1;
}
#notice .blue .midashi{
margin-top:1.5%;
font-size:1.4rem;
color:#0073D1;
}

#banner{
position:relative;
margin:4% 0 0 0;
padding:3% 0;
text-align:center;
background-color:#FCF5CF;
}
#banner .content{
margin:0 auto;
width:96%;
}
#banner ul{
display:table;
table-layout:fixed;
margin: 0 auto;
width: 80%;
}
#banner li{
padding:0 300px;/*1つのとき*/
/*padding:0 70px;*//*2つのとき*/
/*padding:0 16px;*//*3つのとき*/
display:table-cell;
text-align:center;
}

#footer{
margin:10% auto 0 auto;
position:relative;
background-color:#DCECEC;
}
#footer .content{
margin:0 auto;
padding: 2% 0 2% 0;
text-align:center;
width:950px;
}
#footer .top{
margin:-15% auto 0 auto;
width:14%;
}
#footer .logo{
margin:0 auto;
width:40%;
}
#footer .sns{
margin:2% auto 0 auto;
width:16%;
}
#footer .sns ul{
margin:2% auto 0 auto;
display:table;
width:100%;
}
#footer .sns li{
padding:0 8%;
display:table-cell;
vertical-align:middle;
}
#footer .btn{
margin-top:2%;
}
#footer .btn div{
display:inline-block;
margin:2% 1% 0 1%;
width:22%;
}
#link{
margin-top:2%;
}
#link > ul > li{
display:inline-block;
font-size:0.8rem;;
line-height:1.4;
}
#link > ul > li > a{
border-right: 1px solid #000;
padding:0 10px 0 5px;
}
#link > ul > li:nth-child(1) > a{
border-left: 1px solid #000;
padding-left: 10px;
}
#footer .copyright{
margin-top:2%;
font-size:0.7rem;;
line-height:1.4;
}
#footer .sho{
margin-top:2%;
}
#footer .sho a{
border:1px solid #000;
padding:0.5% 1%;
font-size:1.2rem;;
}

.sp{
display:none !important;
}
.sp_inline{
display:none !important;
}

/*swiper*/
#series .swiper {
overflow:unset;/*下欠け対策*/
overflow-x: clip;
}
.swiper-wrapper {
transition-timing-function: linear;
}
.swiper-slide {
text-align: center;
width: auto;
}
#main .swiper-slide-prev, #main .swiper-slide-next, #main .swiper-slide-visible{
opacity:0.2;
}
.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction {
bottom: unset;
}

/*colorbox*/
.cboxIframe{
background:transparent;
}
#cboxContent{
background:transparent;
}
#cboxTopLeft,#cboxTopCenter,#cboxTopRight,
#cboxMiddleLeft,#cboxMiddleRight,
#cboxBottomLeft,#cboxBottomCenter,#cboxBottomRight{
width:0;
height:0;
}
#cboxClose {
top: 1%;
right:1%;
width: 100px;
height: 123px;
background: url(images/menu_close.png) no-repeat 0 0;
background-size:100%;
}
#cboxClose:hover {
background-position: 0 0;
}
#cboxLoadingOverlay,#cboxLoadingGraphic{
background:url();
}
#cboxOverlay {
opacity: 0.8 !important;
}


@media (max-width: 639px) {
#loading .logo{
position:absolute;
top:45%;
left:15%;
width:70%;
}

#container{
min-width:100%;
}

#header{
margin-top:2%;
}
#header .logo{
margin:0 auto;
width:75%;
}
#header .btn{
margin-top: 1%;
padding:0 0 2% 0;
}
#header .btn .content{
width:98%;
}
#header .btn .content div {
display: inline-block;
margin: 2% 0.5% 0 0.5%;
}
#header .btn .content div:nth-of-type(-n+3) {
width: 30%;
}
#header .btn .content div:nth-of-type(n+4) {
width: 22%;
}

#news{
margin: 10% auto 0 auto;
padding:0.5% 0 1.5% 0;
width: 96%;
font-size:0.8rem;
}
#news > div{
margin-top: 1%;
background-size: 8px;
}
#news > div a {
font-size: 0.8rem;
}

#banner_70th {
margin-top:4%;
}
#banner_70th a{
margin:0 auto 0 auto;
padding:2% 4%;
font-size: 0.8rem;
}

#series > div{/*各図鑑*/
margin-top:28%;
}

#series .midashi {
top: -26%;
left: -17%;
width: 77%;
}
#series a img {
height: 170px;
}
#series .photo{
top: -28%;
left: unset;
right:-2%;
width: 45%;
}
#series .bg {
left:-5%;
width:110%;
height:280px;
transform: rotate(-4deg);
}
#series .purchase a{
font-size:1rem;
}

#startSeries .content{
width:auto;
}
#startSeries .swiper-wrapper {/*swiper無効*/
justify-content: unset;
}
#startSeries .swiper-slide.sotei {
margin: unset;
}

#genre .midashi {
width: 60%;
}
#genre .btn .content{
width: 100%;
}
#genre .btn .content > div {
width: 15%;
}
#genre .btn .bg.active{
border-bottom:none;
}

#result > .content{
padding:2% 2% 10% 2%;
width:96%;
}
#result > .content > div {
margin: 3% 1%;
width: 30%;
}
#result > .content img{
width:105px;
}
#result > .content img.pocket{
width:75px;
}
#result .purchase a{
font-size:1rem;
}

#flow img{
height:150px;
width:auto;
}

#middle_banner .content{
width:86%;
}
#middle_banner .content > div{
margin:4% 0 0 0;
width:100%
}
#middle_banner .midashi{
font-size:1.1rem;
}

#tvcm{
margin-top:6%;
padding:10px 0 10px 0;
font-size:3vw;
line-height:1.4;
}
#tvcm > .content {
width:96%;
}
#tvcm .title{
font-size:2.5vw;
}
#tvcm > .content > .lineup > div{
width:48%;
}

#notice p{
border-radius:40px;
padding:1.5% 0;
width:90%;
font-size:1rem;
}
#notice .blue .midashi{
margin-top:3%;
font-size:1.2rem;
}

#banner{
position:relative;
margin:8% 0 0 0;
padding:1% 0 6% 0;
}
#banner ul{
margin:0 auto;
display:block;
width:80%;
}
#banner li{
margin-top:6%;
padding:0;
display:block;
}

#footer{
margin:20% auto 0 auto;
}
#footer .content{
padding: 2% 0 4% 0;
width:100%;
}
#footer .top{
margin:-23% auto 0 auto;
width:24%;
}
#footer .logo{
width:68%;
}
#footer .sns{
margin:4% auto 0 auto;
width:30%;
}
#footer .btn div{
margin:2% 1% 0 1%;
width:43%;
}
#link{
margin-top:4%;
}
#link > ul > li{
font-size:0.7rem;;
}
#footer .copyright{
margin-top:4%;
font-size:0.6rem;;
}
#footer .sho{
margin-top:4%;
}
#footer .sho a{
padding:1.5% 2%;
font-size:1.1rem;;
}

.sp{
display:block !important;
}
.sp_inline{
display:inline !important;
}
.pc{
display:none;
}

/*colorbox*/
#cboxClose {
width: 15%;
/*height: 40px;*/
}
}