/*@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');



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


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




#adspecial_fortinet_202305{
padding: 0;
}


#adspecial_fortinet_202305.adspecial_type1{
width:100% !important;
max-width:100% !important;
position:relative;
line-height:1.5;
font-family: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, メイリオ, Meiryo, sans-serif !important;
}


#adspecial_fortinet_202305.adspecial_type1:before{
content:"";
position:absolute;
top:0;
left:0;
background:url(/extra/fortinet_202305/media/head_image.jpg) right top no-repeat;
background-attachment:fixed;
width:100%;
height:100%;
z-index:-1;
}




footer{
margin-top:0;
}


.block_sponsored {
background:#444;
margin:0;
padding: 30px 20px;
text-align: center;
color:#fff;
}

.block_sponsored a{
color:#c34337;
}



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


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




.head-wrap:before{
content:"";
position:absolute;
top:0;
left:25px;
background-image: radial-gradient(#d9e0eb 25%, transparent 25%);
background-size: 8px 8px;
width:200px;
height:350px;
}

.head-wrap:after{
content:"";
position:absolute;
bottom:60px;
right:40px;
background-image: radial-gradient(#9eb5cc 25%, transparent 25%);
background-size: 10px 10px;
width:250px;
height:250px;
}




.ttl-area {
max-width:1300px;
margin:0 auto;
padding-top:30px;
position: relative;
z-index:100;
}


.ttl-area h1 {
display:flex;
flex-direction:column;
justify-content:center;
text-align:left;
height: 200px;
padding:0 15px;
color: #252525;
font-family: "Inter", "Noto Sans JP", sans-serif !important;
}

.ttl-area h1 span{
width:fit-content;
font-weight:normal;
font-family: "Inter", "Noto Sans JP", sans-serif !important;
}

.ttl-area h1 .ttl-label{
font-size:1.25rem;
font-weight:bold;
color:#d9291c;
position:relative;
}

.ttl-area h1 .ttl-label:before{
content:"";
position:absolute;
bottom:-10px;
left:0;
width:0;
height:5px;
background-color:#d9291c;
animation: ttl-line 0.3s linear 1.3s forwards;
}


.ttl-area h1 .ttl-main{
font-size:2.5rem;
position:relative;
opacity:0;
animation: fade-bottom 0.5s linear 0s forwards;
}






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

  100% {
    opacity: 1;}
}


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

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


@keyframes ttl-line{
0%{
width:0;
}
100%{
width:80px;
}
}



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

h2:before{
content:"";
position:absolute;
top:-45px;
left:calc(50% - 30px);
width:60px;
height:30px;
/*background-color:#c12621;*/
background-color:#d9291c;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

h2.white{
color: #fff;
}

h2.white:before{
background-color:#fff;
}


h2 span{
font-size:1rem;
color:#666;
display:block;
}


h3{
font-size:1.25rem;
}

h3 span{
font-size:1rem;
color:#d9291c;
display:block;
font-weight:normal;
}




/*** summary ***/


.lead-area {
width:100%;
margin:0 auto;
padding:20px 0 40px 0;
/*background:rgba(0,0,0,0.4);*/
background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0) 100%);
position:relative;
z-index:100;
}


.lead-area p {
font-size: 16px;
line-height: 1.8;
color:#fff;
max-width:1300px;
margin:0 auto;
padding: 10px 15px;
opacity:0;
animation: fade-bottom 0.5s linear 0.8s forwards;
}




/*** contents ***/





.area-background-white{
background-color:#fff;
position:relative;
}

.area-background-gray{
background-color:#f0f0f0;
position:relative;
}

.area-background-gray:before{
content:"";
position:absolute;
top:40px;
left:0;
width:140px;
height:600px;
background-image:radial-gradient(#fff 25%, transparent 25%);
background-size: 12px 12px;
/*border-top-right-radius:100px;*/
z-index:1;
}

.area-background-gray:after{
content:"";
position:absolute;
bottom:0;
right:0;
width:600px;
height:180px;
background-image:radial-gradient(#d5d5d5 25%, transparent 25%);
background-size: 8px 8px;
border-top-left-radius:50px;
z-index:1;
}


.area-background-gray .parts-left{
position:absolute;
top:20%;
left:0;
}


.area-background-gray .parts-right{
position:absolute;
bottom:0;
right:0;
}

.area-background-gray .parts-right_2{
position:absolute;
bottom:3%;
right:0;
}


.area-background-red{
/*background-color:#a81f18;*/
background:#d9291c url(/extra/fortinet_202305/media/back_geometry.png) center bottom;
background-size:cover;
position:relative;
}



.content-area{
position:relative;
padding:45px 10px;
}

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


.content-area ul li{
width:48%;
}

.content-area ul li a span{
color:#666;
display:block;
margin:10px 0;
text-align:left;
position:relative;
}



.content-area ul.solution-item li{
width:30%;
margin:10px;
padding:10px 30px 30px;
background-color:#fff;
/*box-shadow:0 0 30px #252525;*/
/*border-top:10px solid #454545;*/
}

.content-area ul.solution-item li.sol01{
border-top:13px solid #8666ac;
}

.content-area ul.solution-item li.sol02{
border-top:13px solid #2bccd4;
}

.content-area ul.solution-item li.sol03{
border-top:13px solid #9ab1cc;
}

.content-area ul.solution-item li .summary{
margin:10px 0 0 0;
padding:15px 0;
border-top:1px solid #eee;
}

.content-area ul.solution-item li .icon{
text-align:center;
margin:0 auto;
}

.content-area ul.solution-item li h3{
text-align:center;
}


.content-area .movie-inner{
width:100%;
height:0;
margin:0 auto 60px;
padding-top:56.25%;
text-align:center;
position:relative;
z-index:1000;
}


.content-area .movie-inner iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.content-area .movie-item .thumb a{
float:left;
width:300px;
height:149px;
margin:0 15px 0 0;
display:block;
position:relative;
}

.content-area .movie-item .thumb a:hover{
opacity:0.5;
transition:0.3s;
}


.content-area .movie-item h3{
font-size:1.15rem;
}


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

.content-area .hitachi-item div{
width:48%;
margin:10px 0;
}

.content-area .hitachi-item .text{
margin:10px;
}

.content-area .hitachi-item img{
max-width:100%;
}

.content-area .hitachi-item a img:hover{
opacity:0.8;
transition:0.3s;
}


.content-area .hitachi-item span{
font-size:16px;
margin:0;
display:block;
}


.content-area .step-item{
background-color:#fff;
margin:30px auto;
padding:20px;
display:flex;
justify-content:center;
/*box-shadow:0 0 20px #e5e5e5;*/
}


.content-area .step-item div{
width:48%;
margin:10px 0;
}

.content-area .step-item .text{
margin:10px;
}

.content-area .step-item img{
max-width:100%;
}

.content-area .step-item span{
font-size:16px;
margin:20px 0 0 0;
display:block;
}

.content-area .step-item img:hover{
opacity:0.7;
transition:0.3s;
}



.content-area ul.case-item{
justify-content:space-around;
}

.content-area ul.case-item li{
width:30%;
margin:15px;
text-align:center;
}

.content-area ul.case-item li a{
display:block;
padding:30px 15px;
border-radius:3px;
}

.content-area ul.case-item li a:hover{
/*background-color:#e5e5e5;*/
background:rgba(225,225,225,0.7);
transition:0.3s;
}

.content-area ul.case-item li a:hover span{
color:#000;
}


.content-area ul.partner li{
width:100%;
text-align:center;
}

.content-area ul.partner li{
font-size:22px;
}



.content-area .links a{
color:#d9291c;
position:relative;
padding-left:20px;
font-size:1.1rem;
}

.content-area .links a:hover{
color:#ccc !important;
transition:0.3s;
}

.content-area .links a:before{
content:"";
position:absolute;
top:50%;
left: 0;
width: 10px;
height: 2px;
background:#d9291c;
}

.content-area .links a:hover:before{
background:#ccc;
transition:0.3s;
}

.content-area .links a:after{
content:"";
position:absolute;
top:35%;
left: 3px;
width: 8px;
height: 8px;
border-top: 2px solid #d9291c;
border-right: 2px solid #d9291c;
transform: rotate(45deg);
}

.content-area .links a:hover:after{
border-top: 2px solid #ccc;
border-right: 2px solid #ccc;
transition:0.3s;
}







/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin-top:32px; overflow:visible; background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#000; padding:1px;}
        #cboxLoadingGraphic{background:url(/extra/digital_trust_now/media/partner/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(/extra/digital_trust_now/media/partner/controls.png) no-repeat 0 0;}
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious:hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext:hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:0;}
        #cboxClose:hover{background-position:-50px -25px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}



#cboxOverlay {
  background: #000;
}
#cboxLoadedContent {
  background: #fff;
}
#cboxLoadedContent {
  padding: 0;
  overflow: auto;
  -moz-box-shadow: 0px 1px 10px #000000;
  -webkit-box-shadow: 0px 1px 10px #000000;
  box-shadow: 0px 1px 10px #000000;
}
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose , #cboxTitle {
  top: -30px;
}
#colorbox, #cboxOverlay, #cboxWrapper {
  overflow: visible ;
}
#cboxTitle {
  color: #fff;
}

#cboxClose {
border:0;
padding:0;
margin:0 auto;
overflow:visible;
text-indent:-9999px;
width:25px;
height:25px;
background:url(/extra/fortinet_202305/media/icon_close.png) center center no-repeat;
position:absolute;
top:-40px;
}
#cboxClose{background-position:0 0; left:0;}
#cboxClose:hover{background-position:-25px 0;}








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


@media (max-width: 960px) {


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


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

h2{
font-size:1.5rem;
}


.content-area ul li{
width:100%;
margin:0 auto 40px;
}



.content-area ul.solution-item li{
width:100%;
}



}




@media (max-width: 640px) {


.container-fluid {margin: 0;}


.head-wrap:before,
.head-wrap:after{
display:none;
}



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



.content-area ul,
.content-area .hitachi-item{
display:block;
}

.content-area ul li,
.content-area .hitachi-item div{
width:95% !important;
margin:10px auto;
}



.content-area ul.movie-item li .thumb a{
float:none;
width:100%;
height:150px;
margin:25px auto;
}


.content-area .step-item{
display:block;
}

.content-area .step-item div{
width:100%;
margin:0 auto 15px;
}







}