/* shodan  */


#shodan {
width:960px;
margin:0 auto 10px;
}


#shodan .top_wrap {
    width:960px;
    margin:40px 0 0 0;
}

h3.shodan_ttl {
    margin:0;
    padding:0;
    width:960px;
    height:calc(960px * 0.66);
    background:url(../images/partner/shodan/shodan_ttl3.jpg) no-repeat;
    background-size: 100%;
}

.shodan_intro {
    padding:50px;
    background:url(../images/partner/shodan/shodan_read_bg.jpg) no-repeat 50% 100%;
    background-size: 100%;
}
.shodan_intro p {
    margin:30px 0;
    font-size: 1.55rem;
}

.shodan_img,
.shodan_img img {
    width:100%;
    opacity: 0.8;
}

.shodan_list {
    margin:0px 0;
    padding:120px 0 70px;
}
.shodan_list h4 {
    width:300px;
    margin:0 auto;
}
.shodan_list h4 img {
    width:100%;
}
.shodan_list ul li {
    margin:30px 0px;
}
.shodan_list ul li a {
    display: flex;
    text-decoration: none;
    padding:0;
    background:#f5f5f5;
    justify-content: center;
    align-items: center;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.shodan_list ul li a:hover {
    opacity: 0.8;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.shodan_list ul li a .text {
    padding:15px 50px;
    width:calc(100% - 60px - 200px);
}
.shodan_list p.ttl {
    font-size: 1.9rem;
    line-height: 160%!important;
    font-weight: bold;
    margin:0 0 20px 0!important;
    padding:0!important;
}
.shodan_list p.sub {
    font-size: 1.6rem;
    font-weight: bold;
    margin:0 0 5px 0!important;
    padding:0!important;
}
.shodan_list ul li a .thumb {
    width:250px;
    height:250px;
}
.shodan_list ul li a .thumb img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    display: block;
    margin:0;
}

.shodan_list p.date {
    margin:0!important;
    padding:0!important;
    font-size: 1.125rem;
}




#shodan .ttl_wrap {
margin:40px 0 0;
}

#shodan .headline p {
font-size: 2.2rem;
font-weight: bold;
text-align: center;
}

#shodan .ttl_inner {
width:960px;
text-align: center;
}

#shodan .ttl_inner img {
width:960px;    
}

#shodan p.sub_ttl {
font-size: 3.5rem!important;
text-align: center!important;
padding:100px 0 0;
margin:0 auto!important;
}

#shodan p.sub_ttl .nowrap {
    display: inline-block;
}

#shodan p.sub_ttl .and {
    display: inline-block;
    padding:0 1rem;
}

#shodan p.postdate {
font-size:1.6rem;
margin:0 auto!important;
padding:0;
text-align: center;
}

#shodan p {
    line-height: 200%;
    padding:10px 20px;
}

#shodan img.alignright {
    display: block;
    padding:25px 0 0;
    margin:0px 0 20px 20px;
    float:right;
}

#shodan p.read {
font-size:1.45rem;
font-weight: bold;
margin:0 auto!important;
background:#f5f5f5;
color:#333;
padding:50px 40px 40px;
}

#shodan p.read span.cap {
    font-size: 1.2rem;
    font-weight: normal;
    display: block;
    margin:20px 0 0 0;
    text-align: right;
    color:#999;
}

#shodan p.ask {
    color:#666;
    font-weight: bold;
    margin:50px 0 20px;
}

#shodan p span.ptnr {
    color:#004ea2;
    font-weight: bold;
}

#shodan p span.blmr {
    color:#6fba2c;
    font-weight: bold;
}

#shodan .imgfull,
#shodan .imgfull img {
    width:100%;
}

#shodan .company_info {
    margin:40px auto;
    text-align: center;
}

#shodan .company_info img {
    width:400px;
}

#shodan .company_info a img {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

#shodan .company_info a img:hover {
    opacity: 0.8;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

#shodan .company_info h4 {
    font-size: 1.8rem;
}

#shodan .company_info p {
    font-size: 1.4rem;
}


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


}


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

    .page_main {
        margin:0 auto!important;
        width:100%!important;
    }

    .page_main_inner {
        padding:0;
        margin:0;
    }

    .pconly {
        display: none;
    }

    #shodan {
    width:100%;
    margin:0 auto;
    }


    #shodan .top_wrap {
        width:100%;
        margin:0 0 0 0;
    }

    h3.shodan_ttl  {
        margin:0;
        padding:0;
        width:100vw;
        height:calc(100vw * 0.66);
        background:url(../images/partner/shodan/shodan_ttl2.jpg) no-repeat;
        background-size: cover;
    }

    .shodan_intro {
        padding:20px 20px;
        background:url(../images/partner/shodan/shodan_read_bg.jpg) no-repeat 50% 100%;
        background-size: 100%;
    }
    .shodan_intro p {
        margin:30px 0;
        font-size: 1.35rem;
        padding:10px 0!important;
        text-align: justify;
    }

    .shodan_img,
    .shodan_img img {
        width:100%;
        opacity: 0.8;
        display: block;
        margin:0;
    }

    .shodan_list {
        margin:0px 0;
        padding:50px 0 70px;
    }
    .shodan_list h4 {
        width:50vw;
        margin:0 auto;
    }
    .shodan_list h4 img {
        width:100%;
    }
    .shodan_list ul li {
        margin:10px 20px;
    }
    .shodan_list ul li a {
        display: block;
        text-decoration: none;
        padding:0;
        background:#f5f5f5;
    }
    .shodan_list ul li a .text {
        padding:20px 15px;
        width:auto;
    }
    .shodan_list p.ttl {
        font-size: 1.5rem;
        line-height: 160%!important;
        font-weight: bold;
        margin:0!important;
        padding:0!important;
    }
    .shodan_list p.sub {
        font-size: 1.35rem;
        font-weight: normal;
        margin:0 0 0 0!important;
        padding:10px 0 0 0!important;
    }
    .shodan_list ul li a .thumb {
        width:calc(100vw - 40px);
        height:calc((100vw - 40px) * 0.55);
    }
    .shodan_list ul li a .thumb img {
        width:calc(100vw - 40px);
        height:calc((100vw - 40px) * 0.55);
        object-fit: cover;
    }

    #shodan .ttl_wrap {
    margin:0 0 0;
    background-position: 50% 50%!important;
    width:100vw;
    }

    #shodan .headline p {
    font-size: 1.5rem;
    line-height: 165%;
    font-weight: bold;
    text-align: center;
    margin:0;
    padding:15px;
    }

    #shodan .ttl_inner {
    width:100vw;
    text-align: center;
    }

    #shodan .ttl_inner img {
    width:100%;
    display: block;
    }

    #shodan p.sub_ttl {
    font-size: 1.8rem!important;
    line-height: 140%;
    text-align: center!important;
    padding:15px 0;
    margin:0 auto!important;
    }

    #shodan p.sub_ttl .nowrap {
        display: inline-block;
    }

    #shodan p.sub_ttl .and {
        display:block;
        padding:0 1rem;
        margin:0;
        line-height: 100%;
    }

    #shodan p.postdate {
    font-size:1.4rem;
    }

    #shodan p {
        line-height: 180%;
        padding:10px 20px;
        margin:0!important;
        text-align: justify;
    }

    #shodan img.alignright {
        display: block;
        padding:0 0;
        margin:0 0;
        float:none;
    }

    #shodan p.read {
    font-size:1.25rem;
    font-weight: bold;
    margin:0 auto!important;
    background:#f5f5f5;
    color:#333;
    padding:25px;
    }

    #shodan p.read span.cap {
        font-size: 1.2rem;
        font-weight: normal;
        display: block;
        margin:0px 0 0 0;
    }

    #shodan p.ask {
        color:#666;
        font-weight: bold;
        margin:40px 0 0px!important;
    }

    #shodan p span.ptnr {
        color:#004ea2;
        font-weight: bold;
    }

    #shodan p span.blmr {
        color:#6fba2c;
        font-weight: bold;
    }

    #shodan .imgfull,
    #shodan .imgfull img {
        width:calc(100vw - 40px);
        margin:10px auto 0!important;
    }

    #shodan .company_info {
        margin:40px auto;
        text-align: center;
    }

    #shodan .company_info img {
        width:60vw;
    }

    #shodan .company_info a img {
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -ms-transition: all .3s ease-out;
        transition: all .3s ease-out;
    }

    #shodan .company_info a img:hover {
        opacity: 0.8;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -ms-transition: all .3s ease-out;
        transition: all .3s ease-out;
    }

    #shodan .company_info h4 {
        font-size: 1.5rem;
    }

    #shodan .company_info p {
        font-size: 1.125rem;
    }
	

}