body{
font-family: 'Verdana', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}






/* フレーム設定-------------------------------------------------------------------------------- */

#adspecial_domo_202103{
padding: 0;

}

#adspecial_domo_202103.adspecial_type1{
max-width:none !important;
width:100% !important;
position:relative;
color:#555555;
}

footer{
margin-top:0;
}


.block_sponsored {
padding: 3% 0;
text-align: center;
background-color:#222222;
color:#fff;
}

.block_sponsored a{
color:#88BBDD;
}







/* headline-------------------------------------------------------------------------------- */


@keyframes fade-in{
  0% {
    opacity: 0;}

  100% {
    opacity: 1;}
}



@keyframes line {
  0% {width:0;}
  100% {width:100%;}
}


.hero-area{
background:#99CCEE url(/extra/domo_202103/media/bg-hero_parts.png) center top no-repeat;
margin:0 auto;
padding:15px 5% 3%;
/*height:350px;*/
position:relative;
background-size:cover;
}

.hero-area:after{
content:"";
position:absolute;
top:0;
right:10%;
width:100%;
height:100%;
background:url(/extra/domo_202103/media/hero_anime.gif) right center no-repeat;
opacity:0;
animation: fade 0.4s linear 0.5s forwards;
background-size:contain;
}


.hero-area .logo{
position:absolute;
top:25px;
left:25px;
display:block;
}

.hero-area h1{
font-size:320%;
text-align:left;
margin:2% 0 0 10%;
line-height:1.4;
color:#fff;
line-height:1.4;
position:relative;
z-index:100;
opacity:0;
animation: fade-in 0.4s linear 0.5s forwards;
}

.hero-area h1 span{
font-size:60%;
display:block;
margin-top:15px;
}


@keyframes fade{
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

@keyframes fade-in{
0% {
    opacity: 0;
    transform: translateY(30px);
}
100% {
    opacity: 1;
    transform: translateX(0);
}
}



.lead_block{
margin:0;
background-color:#f0f0f0;
padding:30px 15% 40px;
position:relative;
/*background-color:#99CCEE;*/
}


.lead_block:before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.lead_block p{
color:#555555;
font-size:110%;
line-height:1.5;
}






/*続きを読む*/

.lead-text {
    display: none;
}


.readmore {
    position: relative;
    height: 70px;
    width: 70px;
    margin: -30px auto 0;
padding-top:15px;
    display: block;
text-align:center;
background-color:#99CCEE;
    color: #fff;
    border: none;
    outline: 0;
    transition: .5s;
font-size:16px;
cursor: pointer;
box-shadow:0 0 10px #cccccc;
}
 


/*button.readmore:after{
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(135deg);
    box-sizing: border-box;
    transition: .3s;
}*/


.readmore:after{
    content: " ";
    position: absolute;
    top: 75%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(135deg);
    box-sizing: border-box;
    transition: .2s;
}

.readmore:hover{
color:#4A8BBC;
}
 
.readmore:hover:after {
    /*top: 40px;*/
    border-top: solid 3px #4A8BBC;
    border-right: solid 3px #4A8BBC;
}
 
.on-click {
    margin: -30px auto 0 !important;
    color: transparent!important;

}

.on-click:after{
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-top: none;
    border-right: none;
    border-bottom: solid 2px #fff;
    border-left: solid 2px #fff;
    transform: rotate(135deg);
    box-sizing: border-box;
    transition: .3s;
}


/*button.on-click:after{
    top: 50%;
    border-top: none;
    border-right: none;
    border-bottom: solid 2px #fff;
    border-left: solid 2px #fff;
}*/


.on-click:hover:after {
    top: 50%;
    border-top: none;
    border-right: none;
    border-bottom: solid 2px #4A8BBC;
    border-left: solid 2px #4A8BBC;
}
 








/* contents-------------------------------------------------------------------------------- */




.category-area{
margin:0 auto;
position:relative;
overflow:hidden;
position:relative;
}

.category-area .parts-illust01{
position:absolute;
top:35%;
left:15px;
}

.category-area .parts-illust02{
position:absolute;
top:20%;
right:15px;
}

.category-area .parts-illust03{
position:absolute;
bottom:25%;
right:20px;
}



.bottom{
    transform:translateY(50px);
    opacity: 0;
    transition:1s;
}

.bottom-in {
    transform:translateY(0);
    opacity: 1;
}



/*navigation*/


.category-navigation ul{
display:flex;
justify-content:center;
width:900px;
margin:45px auto;
padding:15px 0;
/*background: rgb(240,240,240);
background: linear-gradient(0deg, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 35%, rgba(255,255,255,1) 100%);*/
box-shadow:0 0 15px #d5d5d5;
border-radius:20px;
}

.category-navigation ul li+ li{
  border-left: 1px solid #cccccc;
}


.category-navigation ul li a{
width:300px;
margin:0 auto;
padding:12px 0;
text-align:center;
color:#555555;
font-size:130%;
font-weight:bold;
display:block;
position: relative;
overflow: hidden;
}


.category-navigation ul li a span{
position:relative;
  /*color:#4A8BBC;*/
  font-weight: bold;
  z-index: 1000;
  transition: 0.7s ease all;
}


.category-navigation ul li a:hover span{
  color: #4A8BBC;
  position:relative;
}

.category-navigation ul li a span:after{
content:"";
position:absolute;
bottom:-10px;
left:0;
width:100%;
height:1px;
background-color:#4A8BBC;
transform:scale(0,1);
transition:0.3s;
}

.category-navigation ul li a:hover span:after{
transform:scale(1,1);
}




.fade_text{
position: relative;
}

.fade_text:after{
position: absolute;
bottom: 0;
left: 0;
content: "";
display: block;
height: 100%;
width: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(240,240,240,1) 80%,rgba(240,240,240,1) 100%);
}



/*contents*/

.category-area h2{
font-size:260%;
color:#4A8BBC;
margin:0 auto;
text-align:center;
position:relative;
}

.category-area h2:after{
content:"";
position:absolute;
bottom:-15px;
left:45%;
width:10%;
height:8px;
background-color:#99CCEE;
transform:scale(0,1);
}

#adspecial_domo_202103.adspecial_type1 h2.slide:after{
transform:scale(1,1);
transition:0.5s ease;
}

.category-area h2.white{
color:#ffffff;
}

.category-area h2.white:after{
background-color:#4A8BBC;
}



.category-area .category-inner{
margin:0 auto;
padding:4% 0;
max-width:1050px;
}

.category-area .category-inner-panel,
.category-area .category-inner-info{
max-width:1100px;
}

.category-area .bg-blue{
background:#99CCEE url(/extra/domo_202103/media/bg-contents_parts.png) center center no-repeat;
background-size:cover;
margin:50px 0 0 0;
}


.category-area .bg-gray{
background-color:#555;
}


.category-area .summary{
font-size:18px;
line-height:1.4;
margin:55px auto 0;
text-align:left;
color:#555555;
width:78%;
}



.category-area .contents-list{
display:flex;
flex-wrap:wrap;
justify-content:center;
/*align-items:center;*/
align-items: baseline;
margin:0;
}

.category-area .contents-list li{
width:28%;
margin:35px 20px 0;
transform:translateY(60px);
opacity:0;
}

.category-area .contents-list li.fade-bottom{
opacity:1;
transform:translateY(0);
transition:0.5s ease;
}

.category-area .contents-list li img{
border:1px solid #ccc;
margin:15px auto;
text-align:center;
display:block;
width:140px;
height:auto;
}

.category-area .contents-list li:hover img{
transform:scale(1.05,1.05);
box-shadow:0 0 15px #d5d5d5;
transition:0.5s ease;
}

.category-area .contents-list li span{
text-align:left;
margin:0 auto 10px;
color:#555555;
display:block;
font-size:14px;
line-height:1.4;
}

.category-area .contents-list li a:hover span{
color:#4A8BBC;
}


.category-area .article-list,
.category-area .article-panel{
margin:50px auto 20px;
}


/* article panel*/
.category-area .article-panel{
justify-content:flex-start;
}
.category-area .article-panel li{
position:relative;
margin:0 5px;
}


.category-area .article-panel .article-main{
width:65%;
height:400px;
}

.category-area .article-panel .article-sub{
width:32%;
height:200px;
}

.category-area .article-panel .article-sub-set{
width:32%;
}

.category-area .article-panel .article-sub-set01{
width:100%;
height:200px;
position:relative;
}

.category-area .article-panel .article-sub-set02{
width:100%;
height:200px;
position:relative;
}

.category-area .article-panel li a{
display:block;
width:100%;
height:100%;
position:relative;
overflow:hidden;
}


.category-area .article-panel li a:before{
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80%;
    background: linear-gradient(to bottom, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 1) 100%);
display: block;
}


.category-area .article-panel li img{
object-fit: cover;
object-position: 50% 50%;
border:none;
width:100%;
height:100%;
}


.category-area .article-panel li:hover img{
box-shadow:none;
transform:none;
}

.category-area .article-panel li span,
.category-area .article-panel span{
position:absolute;
bottom:0;
left:0;
padding:10px 20px;
color:#fff;
font-size:16px;
font-weight:bold;
}



.category-area .article-panel li a:hover span{
transition:0.3s;
color:#99ccee;
}


.category-area .article-panel li.fade-bottom{
opacity:1;
transform:translateY(0);
transition:0.5s ease;
}


.category-area .article-panel li span.label{
position:absolute;
bottom:30%;
left:20px;
border:1px solid #fff;
background:rgba(0,0,0,0.5);
padding:3px 5px;
color:#fff;
font-size:12px;
text-align:center;
display:block;
z-index:100;
}
.category-area .article-panel li span.label_main{
position:absolute;
bottom:15%;
left:20px;
border:1px solid #fff;
background:rgba(0,0,0,0.5);
padding:3px 5px;
color:#fff;
font-size:12px;
text-align:center;
display:block;
z-index:100;
}


.category-area .info-list li{
width:auto !important;
margin:15px;
}
.category-area .info-list li.list-a{
width:250px !important;
}

.category-area .info-list li.list-b{
width:500px !important;
}

.category-area .info-list li .img-left{
border:none;
width:250px;
}
.category-area .info-list li .img-right{
border:none;
width:500px;
}

.category-area .info-list li a h3{
font-size:18px;
margin-bottom:5px;
color:#fff;
}

.category-area .info-list li a span{
font-size:14px;
color:#fff;
}

.category-area .info-list li a:hover h3,
.category-area .info-list li a:hover span{
color:#99CCEE;
transition:0.3s ease;
}




.category-area .bg-gray .summary,
.category-area .bg-blue .summary{
color:#ffffff;
}


/*tag*/

.category-area .contents-list .tag-icon{
margin:5px auto;
padding:6px 10px;
border-radius:50px;
display:inline-block;
color:#fff;
font-size:11px;
font-weight:bold;
}

.category-area .contents-list .tag-a{
background-color:#FF9922;
}

.category-area .contents-list .tag-b{
/*background-color:#569C3C;*/
background-color:#888888;
}

.category-area .contents-list .tag-c{
background-color:#7A3CA3
}




/*pagetop*/

.page-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}


.page-top a{
display: block;
padding: 8px 0 0 8px;
width: 60px;
height: 60px;
background-color: #888888;
color: #fff;
text-align: center;
position:relative;
}


.page-top a:hover{
background-color: #555;
transition:0.5s ease;
}


.page-top a:after{
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    width: 12px;
    height: 12px;
    margin: -3px 0 0 -6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(135deg);
    box-sizing: border-box;
}




/* 202203 追加 -------------------------------------------------------------------------------- */


.news-area{
background-color:#f5f5f5;
margin:45px auto;
padding:35px 25px 10px;
max-width:1050px;
position:relative;
}

.news-area .label{
position:absolute;
top:-10px;
left:25px;
background-color:#99ccee;
color:#fff;
width:100px;
height:25px;
font-size:13px;
text-align:center;
border-radius:10px;
}


.news-area ul li{
position:relative;
margin:0 0 15px 0;
padding:0 0 0 25px;
}
.news-area ul li:before{
content:"";
position:absolute;
top:8px;
left: 0;
width: 10px;
height: 10px;
border-top: 1px solid #444;
border-right: 1px solid #444;
transform: rotate(45deg);
}


.news-area ul li:hover:before{
transform: translateX(5px) rotate(45deg);
transition:.3s;
}




/* responsive -------------------------------------------------------------------------------- */



@media screen and (max-width:1300px){

.hero-area h1{
font-size:250%;

}



}


@media screen and (max-width:960px){


.hero-area{
padding:10px 0 8%;
position:relative;
}

.hero-area:after{
right:15px;
background-size:40%;
}


.hero-area .logo{
width:40px;
}

.hero-area h1{
margin:10% 0 0 5%;
font-size:200%;
}


.lead_block{
padding:15px 15px 30px;
font-size:100%;
}


.category-navigation ul{
width:100%;
display:block;
box-shadow:none;
}

.category-navigation ul li+ li{
border-left:none;
}

.category-navigation ul li a{
margin:40px auto 15px;
text-align:center;
box-shadow: 0 0 15px #e0e0e0;
}




.category-area h2{
font-size:240%;
}



.category-area .parts-illust03{
position:absolute;
bottom:28%;
right:20px;
}



.category-area .article-panel .article-main,
.category-area .article-panel .article-sub-set,
.category-area .article-panel .article-sub{
width:80%;
margin:0 auto;
}


.category-area .article-panel .article-main,
.category-area .article-panel .article-sub-set01,
.category-area .article-panel .article-sub-set02,
.category-area .article-panel .article-sub{
height:300px;
}

.category-area .article-panel span,
.category-area .article-panel li span{
margin:0;
padding:30px 20px;
}


.category-area .article-panel li span.label_main,
.category-area .article-panel li span.label{
bottom:25%;
}



}




@media screen and (max-width:640px){


.hero-area{
padding:25px 0 10%;
position:relative;
}

.hero-area:after{
right:0;
background-position:center 15px;
background-size:60%;
}

.hero-area h1{
font-size:180%;
z-index:1000;
margin:35% 0 0 5%;
}

.lead_block{
margin:0;
padding:5%;
font-size:100%;
}


button.readmore{
width:60px;
height:60px;
}



.category-area h2{
font-size:180%;
}


.category-area .summary{
font-size:16px;
padding:0 15px;
}


.category-area .contents-list{
display:block;
margin:5% 0 0 0;
}


.category-area .contents-list li{
width:100%;
margin:25px 0;
padding:10px;
overflow:hidden;
}

.category-area .contents-list li img{
margin:0 auto;
display:block;
}

.category-area .contents-list li span{
margin:15px;
}

.category-area .article-list li img{
margin-right:10px;
}




.parts-illust01,
.parts-illust02,
.parts-illust03,
.parts-illust04{
display:none;
}


.category-area .article-panel .article-main,
.category-area .article-panel .article-sub-set,
.category-area .article-panel .article-sub{
width:100%;
margin:0 auto;
}

.category-area .article-panel .article-main,
.category-area .article-panel .article-sub-set01,
.category-area .article-panel .article-sub-set02,
.category-area .article-panel .article-sub{
height:250px;
}

.category-area .article-panel .article-sub-set01{
margin-bottom:20px;
}

.category-area .article-panel li span{
margin:0;
}

.category-area .article-panel li span.label_main,
.category-area .article-panel li span.label{
bottom:40%;
}


.category-area .info-list li.list-a{
width:100% !important;
}

.category-area .info-list li.list-b{
width:100% !important;
}

.category-area .info-list li a h3{
text-align:center;
margin:10px auto 0;
}


.page-top a{
display:none;
}




}