@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);



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


body {
width: 100%;
position:relative;
font-family:"Lucida Sans Unicode", "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}


#adspecial_veriserve_2023{
padding: 0;
}


#adspecial_veriserve_2023.adspecial_type1{
width:100% !important;
max-width:100% !important;
position:relative;
line-height:1.6;
}

#adspecial_veriserve_2023.adspecial_type1:before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(/extra/veriserve_2023/media/head_parts.png) center center no-repeat;
/*background-attachment:fixed;*/
animation: blur 3s linear forwards;
z-index:-5;
}


#adspecial_veriserve_2023.adspecial_type1:after{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(/extra/veriserve_2023/media/head_img.jpg) center top no-repeat;
/*background-attachment:fixed;*/
z-index:-10;
}


@keyframes blur{
  0% {
filter: blur(6px);
}
  50% {
filter: blur(3px);
}
  100% {
filter: blur(0);
}
}


footer{
margin-top:0;
}


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

.block_sponsored a{
color:#fff;
}



.container-fluid {
max-width: 1050px;
margin:0 auto;
padding:40px 0;
background-color: transparent;
}


.head-wrap{
position: relative;
margin: 0 auto;
z-index:1;
position:realtive;
}



.ttl-area {
max-width:1000px;
margin:0 auto;
position: relative;
z-index:100;
}


.ttl-area h1 {
display:flex;
flex-direction:column;
justify-content:center;
font-size:2.25rem;
text-align:center;
height: 350px;
color: #fff;
}

.ttl-area h1 span{
width:fit-content;
text-align:center;
margin:0 auto 30px;
width:fit-content;
/*border-bottom:1px dotted #fff;*/
}


.ttl-area h1 .ttl-main{
opacity:0;
animation: fade-bottom 0.5s linear 0.7s 1 forwards;
}

.ttl-area h1 .ttl-sub{
font-size:60%;
position:relative;
opacity:0;
animation: fade-bottom 0.5s linear 0s 1 forwards;
}

.ttl-area h1 .ttl-sub:before{
content:"";
position:absolute;
bottom:-5px;
left:0;
width:0;
height:1px;
background-color:#5bbbf2;
opacity:0;
animation: slide 0.5s linear 1.7s forwards;
}




@keyframes slide{
  0% {
    opacity: 0;
width:0;
}
  100% {
    opacity: 1;
width:100%;
}
}


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

  100% {
    opacity: 1;}
}


@keyframes fade-bottom{
  0% {
    opacity: 0;
transform:translateY(60px);
}

  100% {
    opacity: 1;
transform:translateY(0);
}
}


@keyframes zoom{
  0% {
    opacity: 0;
transform: scale(0,0);
}
}






/*** summary ***/


.lead {
width:100%;
margin:0 auto;
padding:25px 0;
position:relative;
backdrop-filter: blur(4px);
z-index:100;
}

/*.lead:after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
backdrop-filter: blur(3px);
z-index:-1;
}*/


.lead p {
font-size: 16px;
line-height: 2.0;
color:#fff;
max-width:1000px;
margin:0 auto;
padding: 10px 20px;
}



h2 {
position: relative;
margin:0 auto 20px;
padding:0 15px;
text-align:center;
color: #fff;
font-weight: normal;
font-size: 2rem;
line-height:1.4;
font-feature-settings: "palt" 1;
}









/*** contents ***/


.appeal-area{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
max-width:1300px;
margin:0 auto;
}

.sbom,
.psirt,
.fuzzing,
.ransomware{
position:relative;
background:rgba(0,0,0,0.8);
color:#fff;
margin:50px auto;
padding:15px;
box-shadow:0 0 40px #050505;
width:45%;
z-index:100;
}


.sbom:before,
.psirt:before,
.fuzzing:before,
.ransomware:before{
content:"";
position:absolute;
top:0;
left:0;
  border-left: 130px solid #00428b;
  border-bottom: 180px solid transparent;
}

.sbom:after,
.psirt:after,
.fuzzing:after,
.ransomware:after{
content:"";
position:absolute;
bottom:0;
right:0;
  border-left: 130px solid transparent;
  border-bottom: 180px solid #1f6dc2;
}


.sbom p,
.psirt p,
.fuzzing p,
.ransomware p{
position:relative;
margin:40px auto 0;
max-width:80%;
z-index:100;
}

.sbom a,
.psirt a,
.fuzzing a,
.ransomware a{
color:#fff;
position:relative;
}

.sbom a:before,
.psirt a:before,
.fuzzing a:before,
.ransomware a:before{
content:"";
position:absolute;
top:6px;
left:-25px;
color: #5bbbf2;
width: 10px;
height: 10px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transition:0.3s;
transform:translateX(-5px) rotate(45deg);
}

.sbom a:hover,
.psirt a:hover,
.fuzzing a:hover,
.ransomware a:hover{
color:#5bbbf2 !important;
}


.sbom a:hover:before,
.psirt a:hover:before,
.fuzzing a:hover:before,
.ransomware a:hover:before{
border-top: 1px solid #5bbbf2;
border-right: 1px solid #5bbbf2;
transform:translateX(0) rotate(45deg);
}


.psirt small{
color:#999;
}


.content_block{
background:#f5f5f5;
margin:0 auto;
}


.special-area,
.article-area,
.wp-area,
.seminar-area,
.inquiry-area{
position:relative;
padding:10px;
}


.special-area:before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#042d60 url(/extra/veriserve_2023/media/parts_abstract.png) center center no-repeat;
background-size:cover;
/*background: linear-gradient(90deg, rgba(4,45,96,1) 0%, rgba(0,56,117,1) 50%, rgba(4,45,96,1) 100%);*/
z-index:-1;
}



.special-area ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
position:relative;
z-index:100;
}

.special-area ul li{
width:48%;
}
.special-area ul li a{
overflow:hidden;
margin:40px 0 0;
padding:35px 20px;
background-color:#fff;
box-shadow:0 0 25px #050505;
border-radius:5px;
display:block;
}
.special-area ul li a:hover{
background:rgba(0,0,0,0.3);
transition:0.3s ease;
}

.special-area ul li a img{
width:180px;
float:left;
margin-right:15px;
}

.special-area ul li a span{
font-size:16px;
}




.article-area:before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#4192eb;
z-index:-2;
}

.article-area:after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:
linear-gradient(45deg, rgba(31,109,194,1) 25%, transparent 25%,
transparent 75%, rgba(31,109,194,1) 75%, rgba(31,109,194,1)),
linear-gradient(-45deg, rgba(31,109,194,1) 25%, transparent 25%,
transparent 75%, rgba(31,109,194,1) 75%, rgba(31,109,194,1));
background-size: 8px 8px;
background-position: 0 0, 20px 20px;
opacity:0.3;
z-index:-1;
}


.article-area.bg-blue::before{
background-color:#6da0df;
z-index:-2;
}
.article-area.bg-blue::after{
background-image:
linear-gradient(45deg, rgba(69,130,206,1) 25%, transparent 25%,
transparent 75%, rgba(69,130,206,1) 75%, rgba(69,130,206,1)),
linear-gradient(-45deg, rgba(69,130,206,1) 25%, transparent 25%,
transparent 75%, rgba(69,130,206,1) 75%, rgba(69,130,206,1));
background-size: 8px 8px;
background-position: 0 0, 20px 20px;
opacity:0.3;
z-index:-1;
}


.article-area ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
position:relative;
z-index:100;
}
.article-area ul li{
width:32%;
}
.article-area ul li a{
overflow:hidden;
margin:40px 0 0;
padding:15px;
height:120px;
/*background:rgba(255,255,255,0.1);*/
box-shadow:0 20px 20px -10px #151515;
border-radius:5px;
display:block;
}
.article-area ul li a:hover{
background:rgba(255,255,255,0.2);
color:#5bbbf2 !important;
transition:0.3s ease;
}

.article-area ul li a img{
width:80px;
float:left;
margin-right:10px;
}

.article-area ul li a span{
color:#fff;
font-size14px;
}

.article-area p a{
text-align:right;
margin:15px 0;
font-size:12px;
color:#fff !important;
display:block;
}

.article-area p a:hover{
color:#5bbbf2 !important;
}



.wp-area:before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#042d60 url(/extra/veriserve_2023/media/parts_abstract.png) center center no-repeat;
background-size:cover;
/*background: linear-gradient(90deg, rgba(4,45,96,1) 0%, rgba(0,56,117,1) 50%, rgba(4,45,96,1) 100%);*/
z-index:-1;
}

.wp-area ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
position:relative;
z-index:100;
}

.wp-area ul li{
margin:40px 0 0;
padding:15px;
width:32%;
color:#fff;
}



.wp-area ul li a{
color:#fff;
}

.wp-area ul li img,
.wp-area ul li a img{
max-width:200px;
display:block;
margin:10px auto;
box-shadow:0 0 50px #151515;
}

.wp-area ul li a img:hover{
opacity:0.8;
transform:scale(1.01,1.01);
transition:0.3s ease;
}

.wp-area ul li span{
display:block;
text-align:center;
}


.seminar-area:before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#4192eb url(/extra/veriserve_2023/media/parts_seminar.png) center center no-repeat;
background-size:cover;
/*background: linear-gradient(90deg, rgba(39,119,208,1) 0%, rgba(65,146,235,1) 50%, rgba(39,119,208,1) 100%);*/
z-index:-1;
}


.seminar-area:after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#4192eb;
background-image:
linear-gradient(45deg, rgba(31,109,194,1) 25%, transparent 25%,
transparent 75%, rgba(31,109,194,1) 75%, rgba(31,109,194,1)),
linear-gradient(-45deg, rgba(31,109,194,1) 25%, transparent 25%,
transparent 75%, rgba(31,109,194,1) 75%, rgba(31,109,194,1));
background-size: 8px 8px;
background-position: 0 0, 20px 20px;
opacity:0.15;
z-index:-1;
}



.special-area h2,
.article-area h2,
.wp-area h2,
.seminar-area h2,
.inquiry-area h2{
color:#fff;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
width:fit-content;
padding:30px 5px;
}

/*.article-area h2{
color:#444;
border-top:1px solid #444;
border-bottom:1px solid #444;
}*/


.special-area li a:hover,
.article li a:hover,
.wp-area li a:hover,
.seminar-area li a:hover{
color:#5bbbf2 !important;
transition:0.3s ease;
}



.inquiry-area h2{
color:#1f6dc2;
border-top:1px solid #1f6dc2;
border-bottom:1px solid #1f6dc2;
}

.inquiry-area:before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#4192eb url(/extra/veriserve_2023/media/parts_inquiry.png) center center no-repeat;
background-size:cover;
z-index:-1;
}


/*.inquiry-area .inner{
display:flex;
justify-content:center;
align-items: center;
max-width:600px;
margin:0 auto;
}*/

.inquiry-area p{
line-height:1.8;
font-size:16px;
margin:30px auto;
text-align:center;
}





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


@media (max-width: 960px) {


#adspecial_veriserve_2023.adspecial_type1{
background-size:cover;
}


.ttl-area h1 {
font-size:1.5rem;
}











@keyframes slide{
  0% {
    opacity: 0;
width:0;
}

  100% {
    opacity: 1;
width:100%;
}
}


.head_title h1{
font-size:230%;
}




.banner_block a img{
margin:20px auto 0;
}



}






@media (max-width: 640px) {


.container-fluid {margin: 0;}


h2 {
font-size:1.5rem;
}


.appeal-area{
display:block;
width:100%;
}

.sbom,
.psirt,
.fuzzing,
.ransomware{
width:100%;
}


.sbom p,
.psirt p,
.fuzzing p,
.ransomware p{
max-width:95%;
}


.special-area ul,
.article-area ul,
.wp-area ul,
.seminar-area ul{
display:block;
}

.special-area ul li,
.article-area ul li,
.wp-area  ul li,
.seminar-area  ul li{
width:100%;
}


.special-area ul li img{
width:120px;
}

.article-area ul li a{
height:auto;
}




}