@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');



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

body{
background:url(/extra/eset_microsite_202402/media/img_bg.png) left top repeat-x;
animation: bg-slide 100s linear infinite;
position:relative;
z-index:-1;
}


body:before{
content:"";
position:absolute;
top:0;
left:0;
/*background:rgba(0,151,162,0.7);*/
background-color:rgba(0,149,160,0.75);
background-image:
radial-gradient(at 99% 40%, hsla(193,81%,51%,1) 0px, transparent 50%),
radial-gradient(at 0% 80%, hsla(156,73%,64%,1) 0px, transparent 50%);
opacity:0.75;
width:100%;
height:100%;
}

body:after{
content:"";
position:absolute;
top:0;
left:0;
background:url(/extra/eset_microsite_202402/media/img_bg_top.png) center center no-repeat;
/*background-size:contain;*/
opacity:0.4;
width:100%;
height:100%;
z-index:-1;
}



@keyframes bg-slide {
0% {background-position: 0 0;}
100% {background-position: -100% 0;}
}



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

  50% {
    opacity: 1;}

  100% {
    opacity: 0;}
}




#adspecial_eset_microsite_202402.adspecial_type1{
    position: relative;
}

.adspecial_type1{
    /*max-width: 1050px !important;*/
    max-width: 100% !important;
    width: 100% !important;
}

footer{
margin-top:0;
}


.block_sponsored {
margin:25px auto 0;
padding: 10px 0;
text-align: center;
background-color:#fff;
/*color:#fff;*/
}

.block_sponsored a{
color:#0097a2;
}

.block_sponsored img{
display:block;
margin:25px auto 0;
}



.content-wrap{
max-width:1300px !important;
margin: 0 auto;
padding-bottom:40px;
background-color:#fff;
position:relative;
z-index:10;
}



.pagetop {
display: none;
position: fixed !important;
bottom: 15px;
right: 15px;
padding:15px 20px;
color:#fff;
background-color:#252525;
transition:0.3s ease;
z-index:1001;
}

.pagetop:hover{
background-color:#ffb900;
color:#fff !important;
}



/* headline設定-------------------------------------------------------------------------------- */


.header-area{
position:relative;
padding:5%;
height:500px;
background:url(/extra/eset_microsite_202402/media/head_main.jpg) center top no-repeat;
}


.header-area .logo{
position:absolute;
top:0;
right:0;
text-align:right;
}


.header-area .main-title{
font-family: "Inter", Arial, "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
font-size:2rem;
text-align:left;
line-height:1.4;
color:#424d56;
width:fit-content;
}

.header-area .main-title small{
font-size:60%;
margin:0 0 10px 0;
width:fit-content;
display:block;
position:relative;
}


.header-area .main-title span{
background-color:#0095a0;
color:#fff;
margin:0 0 10px 0;
padding:0 15px;
border-radius:15px;
font-weight:normal;
display:block;
width:fit-content;
}

.header-area .sub-title{
font-size:1.25rem;
font-weight:bold;
margin:0 0 25px 0;
padding:0;
/*background-color:#0095a0;*/
color:#444;
width:fit-content;
line-height:1.6;
border-radius:10px;
position:relative;
}

.header-area .sub-title span{
/*font-size:110%;*/
color:#0095a0;
}

.header-area .sub-title:before{
content:"";
position:absolute;
bottom:-2px;
left:0;
width:0;
height:1px;
background-color:#0095a0;
animation: line 0.5s linear 1.0s forwards;
}



.header-area .info{
font-size:0.85rem;
color:#151515;
/*opacity:0;
animation: fadein 0.5s linear 1.0s forwards;*/
}

.header-area .info a{
color:#4c40a9;/*202312*/
font-weight:bold;
}
.header-area .info a:hover{
color:#ccc !important;
}



@keyframes fadein{
  0% {
    opacity: 0;}

  100% {
    opacity: 1;}
}





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



@keyframes left-in{
0% {
    opacity: 0;
    transform: translateX(-50px);
}
100% {
    opacity: 1;
    transform: translateX(0);
}
}







/* category -------------------------------------------------------------------------------------------------------------- */


.category-area{
max-width:1150px;
margin:0 auto;
padding:25px 0;
}



/* lead -------------------------------------------------------------------------------- */


.lead-block{
max-width:1150px;
margin:-5% auto 0;
padding:20px;
color:#444;
background:rgba(255,255,255,1);
box-shadow:0 0 15px #e5e5e5;
border-radius:5px;
position:relative;
z-index:10;
opacity:0;
animation: fadein 0.5s linear 0.5s forwards;
}

.lead-block p{
margin:0;
padding:15px;
}

.lead-block:before{
content:"";
position:absolute;
top:-5px;
left:-2px;
width:55%;
height:10px;
background-color:#0095a0;
border-radius:3px;
z-index:-1;
}

.lead-block:after{
content:"";
position:absolute;
bottom:-5px;
right:-2px;
width:55%;
height:10px;
background-color:#0095a0;
border-radius:3px;
z-index:-1;
}




/* h2 -------------------------------------------------------------------------------- */

h2{
text-align:left;
font-family: "Inter", Arial, "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
font-size:2.5rem;
/*border-bottom:1px solid #424d56;*/
color:#424d56;
margin:30px 0;
line-height:1.4;
width:100%;
position:relative;
}

h2 span{
display: flex;
align-items: center;
color: #0097a2;
font-size: 1.25rem;
}

h2 span:after{
content: "";
display: inline-block;
margin-left: 10px;
width: 150px;
height: 1px;
background-color: #0097a2;
}




/* news -------------------------------------------------------------------------------- */


.news-block{
margin:20px 0;
}


.news-block li{
margin:0 0 25px 0;
}

.news-block li.new{
box-shadow:0 0 14px #e0e0e0;
padding:20px;
border-radius:5px;
width:fit-content;
}

.news-block li.new:hover{
box-shadow:0 0 14px #aaa;
transition:0.3s;
}

.news-block li a{
display:block;
}


.news-block li a span{
font-size:1rem;
line-height:1.4;
color:#424d56;
padding-left:30px;
position:relative;
display:block;
}

.news-block li a span:after{
content:"";
position:absolute;
top:5px;
left:0;
clip-path: polygon(0 0, 70% 50%, 0 100%);
width:10px;
height:10px;
background-color:#0097a2;
}

.news-block li a:hover span{
color:#8d9eab;
transition:0.3s;
}

.news-block li a:hover span:after{
transform:translateX(20px);
transition:0.3s;
}





/* item -------------------------------------------------------------------------------- */


.item-block{
display:flex;
justify-content:center;
flex-wrap:wrap;
padding:25px 0;
}

.item-block li{
width:24.5%;
margin:20px 40px;
background-color:#fff;
box-shadow: 0 0 10px #e0e0e0;
border-radius:15px;
position:relative;
display:block;
overflow:hidden;
}


.item-block li:hover{
background-color:#424d56;
box-shadow: 0 0 10px #666;
}

.item-block li a span{
display:block;
overflow:hidden;
}


.item-block li a img{
width:100%;
height:160px;
object-fit:cover;
object-position:top;
}


.item-block li a:hover img{
transform:scale(1.05);
transition:0.3s;
/*filter: grayscale(1);*/
}


.item-block li a span.caption{
margin:0 0 20px 0;
padding:15px;
font-size:16px;
line-height:1.6;
color:#0097a2;
}

.item-block li a:hover span.caption{
color:#fff;
transition:0.3s;
}

.item-block .label{
font-size:12px;
margin: 0 auto;
padding: 3px 15px;
color: #fff;
text-align: center;
font-weight: normal;
display: block;
position: absolute;
bottom:-3px;
left:-5px;
width:fit-content;
border-radius:5px;
overflow:hidden;
}

.item-block .label.special{
background-color:#3aabdf;
}

.item-block .label.article{
background-color:#2ebd85;
}

.item-block .label.whitepaper{
background-color:#82c617;
}













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




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



.header-area{
padding:10% 20px 20px;
}


.header-area .logo{
width:300px;
}


.header-area .main-title{
font-size:1.5rem;
}

.header-area .sub-title{
font-size:1rem;
line-height:1.5;
}



.category-area{
padding:20px;
}



.lead-block p{
padding:0;
}


h2{
font-size:2rem;
}


.item-block li{
width:37.5%;
}





}




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


.header-area{
height:350px;
padding:15% 20px 20px;
}

.header-area .logo{
width:200px;
}


.header-area .main-title{
font-size:1.25rem;
}

.header-area .main-title smll{
font-size:70%;
}

.header-area .sub-title{
font-size:0.85rem;
}

h2{
font-size:1.5rem;
}

.item-block{
display:block;
padding:0;
}

.item-block li{
width:100%;
margin:30px auto;
}

.item-block li a img{
height:200px;
}

.news-block{
padding:0
}



}







/* ヘッダー＆フッター広告表記 2024～
-------------------------------------------------------------------------------------------------------*/

.header_sponsored_area{
    width:100%;
    background-color:#fff;
    color:#000;
    font-size:14px;
    text-align:right;
    padding:15px 20px;
    position:relative;
    z-index:1000;
}

.header_sponsored_area span{
    margin:0;
    line-height:1.3;
    display:block;
}


.block_sponsored_area{
    clear:both;
    background-color:#fff;
    color:#000;
    font-size:14px;
    border:1px solid #000;
    margin:25px auto;
    padding:15px 15px 10px;
    max-width:760px;
    position:relative;
    z-index:1000;
}

.block_sponsored_area span{
    margin:5px 0;
    text-align:left;
    display:block;
}


.block_sponsored_area:before{
    display: block;
    content: "PR";
    position: absolute;
    top: -12px;
    left: 30px;
    width: 40px;
    height: 30px;
    text-align: center;
    background-color: #fff;
}


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

.block_sponsored_area{
margin:25px;
}