@charset "UTF-8";
/* CSS Document */



.image_on{
     display:block!important;
}

section#huge_it_portfolio_content_1 {
    position:relative;
    display:block;
}

.portelement_1 .play-icon.youtube-icon,
.play-icon.youtube-icon {
    background: url(//mari-and-bird.jp/wp/wp-content/plugins/portfolio-gallery/assets/images/admin_images/play.youtube.png) center center no-repeat;
    background-size: 30% 30%;
}
.portelement_1 .play-icon.vimeo-icon,
.play-icon.vimeo-icon {
    background: url(//mari-and-bird.jp/wp/wp-content/plugins/portfolio-gallery/assets/images/admin_images/play.vimeo.png) center center no-repeat;
    background-size: 30% 30%;
}

.portelement_1 .play-icon,.play-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.portelement_1 {
    max-width:202px !important;
    width:100%;
    margin:0 0 10px 0;
    background:#F9F9F9;
    border:1px solid #DEDEDE;
    outline:none;
    box-sizing: border-box;
}



.portelement_1 .title-block_1 {
    position:relative;
    height: 38px;
    margin: 0;
    border-top:1px solid #DEDEDE;
    box-sizing: content-box;
}

.portelement_1 .title-block_1 h3 {
    position:relative;
    margin:0 !important;
    padding:0 5px !important;
    width:90%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space:nowrap;
    font-weight:normal;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px !important;
    line-height: 18px !important;
    color:#222222;
}

.portelement_1 .title-block_1 .button-block {
    position:absolute;
    right:0;
    top:0;
    display:none;
    vertical-align:middle;
    height:30px;
    padding:10px 10px 4px 10px;
}
.portelement_1:hover .title-block_1 .button-block {display:block;}

.portelement_1 .title-block_1 a,.portelement_1 .title-block_1 a:link,.portelement_1 .title-block_1 a:visited,
.portelement_1 .title-block_1 a:hover,.portelement_1 .title-block_1 a:focus,.portelement_1 .title-block_1 a:active {
    position:relative;
    display:block;
    vertical-align:middle;
    padding: 3px 10px 3px 10px;
    border-radius:3px;
    font-size:14px;
    background:#2EA2CD;
    color:#FFFFFF;
    text-decoration:none;
}

.portelement_1 .image-block_1 img {
    margin:0 !important;
    padding:0 !important;
    width:auto !important;
    height:110px !important;
    display:block;
    border-radius: 0 !important;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
height:50% !important;/*add*/
width:50% !important;/*add*/
vertical-align:middle !important;/*add*/
position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto !important;/*add*/

}

.portelement_1 .image-block_1 .image-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(255,255,255,0.7)  !important;
    /*display:none;*/
}

.portelement_1:hover .image-block_1  .image-overlay {
    display:block;
}

.portelement_1 .image-block_1 .image-overlay a {
    border:none;
    position:absolute;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:100%;
    background:url('//mari-and-bird.jp/wp/wp-content/plugins/portfolio-gallery/assets/images/admin_images/zoom.light.png') center center no-repeat;
}

.portelement_1 .title-block_1 {
    position:relative;
    height: 38px;
    margin: 0;
    border-top:1px solid #DEDEDE;
    box-sizing: content-box;
}

.portelement_1 .title-block_1 h3 {
    position:relative;
    margin:0 !important;
    padding:0 5px !important;
    width:90%;
    text-overflow: ellipsis;
    /*overflow: hidden;*/
    white-space:nowrap;
    font-weight:normal;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px !important;
    line-height: 18px !important;
    color:#222222;
	
}

.portelement_1 .title-block_1 .button-block {
    position:absolute;
    right:0;
    top:0;
   /* display:none;*/
    vertical-align:middle;
    height:30px;
    padding:10px 10px 4px 10px;
}
.portelement_1:hover .title-block_1 .button-block {display:block;}

.portelement_1 .title-block_1 a,.portelement_1 .title-block_1 a:link,.portelement_1 .title-block_1 a:visited,
.portelement_1 .title-block_1 a:hover,.portelement_1 .title-block_1 a:focus,.portelement_1 .title-block_1 a:active {
    position:relative;
    display:block;
    vertical-align:middle;
    padding: 3px 10px 3px 10px;
    border-radius:3px;
    font-size:14px;
    background:#2EA2CD;
    color:#FFFFFF;
    text-decoration:none;
}

/*#####POPUP#####*/

#huge_it_portfolio_popup_list_1 {
    position:fixed;
    width:80%;
    top:7%;
    left:7%;
    margin:0 !important;
    list-style:none;
    z-index:999999;
   /* display:none;*/
    height:90%;
/*	opacity:0;*/
}

#huge_it_portfolio_popup_list_1.active {
	display:table;
animation: popup_list 0.8s ease both;
-webkit-animation: popup_list 0.8s ease both;}
	

@keyframes popup_list {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes popup_list {
0% {opacity:0;}
100% {opacity:1;}
}
	
	


#huge_it_portfolio_popup_list_1 li.pupup-element {
   /* display:none;*/
    width:90%;
    padding:40px 0 20px 0;
    min-height:90%;
    position:fixed;
    background:#FFFFFF;
}

#huge_it_portfolio_popup_list_1 li.pupup-element.active {
    display:block;
}

#huge_it_portfolio_popup_list_1 .heading-navigation_1 {
    position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    z-index:2001;
    background:url('//mari-and-bird.jp/wp/wp-content/plugins/portfolio-gallery/assets/images/admin_images/divider.line.png') center bottom repeat-x;
}

#huge_it_portfolio_popup_list_1 .heading-navigation_1 .close,#huge_it_portfolio_popup_list_1 .heading-navigation_1 .close:link, #huge_it_portfolio_popup_list_1 .heading-navigation_1 .close:visited {
    position:relative;
    float:right;
    width:40px;
    height:40px;
    display:block;
    background:url('//mari-and-bird.jp/wp/wp-content/plugins/portfolio-gallery/assets/images/admin_images/close.popup.dark.png') center center no-repeat;
    border-left:1px solid #ccc;
    opacity:.65;
}

#huge_it_portfolio_popup_list_1 .heading-navigation_1 .close:hover, #huge_it_portfolio_popup_list_1 .heading-navigation_1 .close:focus, #huge_it_portfolio_popup_list_1 .heading-navigation_1 .close:active {opacity:1;}


#huge_it_portfolio_popup_list_1 .popup-wrapper_1 {

    width:60%;
    height:98%;
    padding:2% 0% 0% 2%;
}

.image-block_1 {
    width:55%;
height:55%;    position:relative;
    float:left;
    margin-right:2%;
    /*border-right:1px solid #ccc;*/
    min-width:200px;
    min-height:100%;
}

.image-block_1 img {
width:100% !important;    display:block;
    padding:0 !important;
width: 100% !important;/*add*/
text-align:center !important;/*add*/
margin:0 auto !important;/*add*/
max-width:700px !important;/*add*/
}

.right-block {
    width:42.8%;
    height: 100%;
    position:relative;
    float:right;
}

.right-block > div {
    padding-top:10px;
    /*padding-right: 4%;*/
    margin-bottom:10px;
    background:url('//mari-and-bird.jp/wp/wp-content/plugins/portfolio-gallery/assets/images/admin_images/divider.line.png') center top repeat-x;
background:none;
}
.right-block > div:last-child {background:none;}


.right-block .title {
    position:relative;
    display:block;
   /*margin:10px 0 0 0 !important;*/
    font-size:16px !important;
    line-height:20px !important;
    color:#222222;
}

#huge_it_portfolio_popup_list_1.description {
   float:right;
    position:relative;
    text-align:justify;
    font-size:14px !important;
    color:#222222;
}

.right-block .description h1,
.right-block .description h2,
.right-block .description h3,
.right-block .description h4,
.right-block .description h5,
.right-block .description h6,
.right-block .description p,
.right-block .description strong,
.right-block .description span {
    padding:2px !important;
    margin:0 !important;
}

.right-block .description h4{
	font-size:16px !important;	
	margin-bottom:20px !important;
	}

.right-block .description ul,
.right-block .description li {
    padding:2px 0 2px 5px;
    margin:0 0 0 8px;
}

ul.thumbs-list_1 {
    list-style:none;
    display:table;
    position:relative;
    clear:both;
    width:100%;
    margin:0 auto;
    padding:0;
}

ul.thumbs-list_1 li {
    display:block;
    float:left;
    width:70px;
    height:75px;
    margin:0 2% 5px 1% !important;
    opacity:1;
}

	ul.thumbs-list_1 li.active,ul.thumbs-list_1 li:hover {
    opacity:0.45;
}

ul.thumbs-list_1 li a {
    border:none;
    display:block;
}

ul.thumbs-list_1 li img {
    margin:0 !important;
    padding:0 !important;
    width:75px !important;
    height:75px !important;
	object-fit: cover;
}

#huge_it_portfolio_popup_list_1 .popup-wrapper_1 .image-block_1 iframe  {
    width:100% !important;
    height:95%;
    display:block;
    min-height:325px;

}

#huge_it_portfolio_popup_list_1 .heading-navigation_1 .left-change, #huge_it_portfolio_popup_list_1 .heading-navigation_1 .right-change{
    width: 40px;
    height: 39px;
    font-size: 25px;
    display: inline-block;
    text-align: center;
    border: 1px solid #eee;
    border-bottom: none;
    border-top: none;
}

#huge_it_portfolio_popup_list_1 .heading-navigation_1 .right-change{
    position: relative;
    margin-left: -6px;
}

#huge_it_portfolio_popup_list_1 .heading-navigation_1 .right-change:hover, #huge_it_portfolio_popup_list_1 .heading-navigation_1 .left-change:hover{
    background: #ddd;
    border-color: #ccc;
    color: #000 !important;
    cursor: pointer;
}

#huge_it_portfolio_popup_list_1 .heading-navigation_1 .right-change a, #huge_it_portfolio_popup_list_1 .heading-navigation_1 .left-change a{
    position: absolute;
    transform: translate(-50%, -50%) !important;
    color: #777;
    text-decoration: none;
    width: 12px;
    height: 80%;
    display: inline-block;
    line-height: normal;
    top: 50%;
	left:18px;
}


/**/
.pupup-element .button-block {
    position:relative;
}

.pupup-element .button-block a,.pupup-element .button-block a:link,.pupup-element .button-block a:visited{
    position:relative;
    display:inline-block;
    padding:6px 12px;
    background:#2EA2CD;
    color:#FFFFFF;
    font-size:14px;
    text-decoration:none;
}

.pupup-element .button-block a:hover,.pupup-element .button-block a:focus,.pupup-element .button-block a:active {
    background:#0074A2;
    color:#FFFFFF;
}


#huge-popup-overlay-portfolio {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:199;
    background: rgba(0,0,0,0.7)  !important}


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

    #huge_it_portfolio_popup_list_1 {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:auto !important;
        left:0;
    }

    #huge_it_portfolio_popup_list_1 li.pupup-element {
        margin:0;
        height:auto !important;
        position:absolute;
        left:0;
        top:0;
    }

    #huge_it_portfolio_popup_list_1 li.pupup-element .popup-wrapper_1 {
        height:auto !important;
        overflow-y:auto;
    }


.image-block_1 {
        width:100%;
        float:none;
        clear:both;
        margin-right:0;
        border-right:0;
	margin-bottom: 15px;
    }

    .right-block {
        width:100%;
        float:none;
        clear:both;
        margin-right:0;
        border-right:0;
    }

    #huge-popup-overlay-portfolio_1 {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:199;
    }

}

#huge_it_portfolio_options_1 {
    position: relative;
    /*overflow: hidden;*/
float:;max-width:180px;width:20%;display:inline-block;margin-left:1%;
opacity: 0;    margin-bottom: 10px;
}

#huge_it_portfolio_options_1 ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

#huge_it_portfolio_filters_1 ul {
    margin: 0 !important;
    padding: 0 !important;
    /*overflow: hidden;*/
    width: 100%;
}



#huge_it_portfolio_options_1 ul li {
    border-radius: 0px;
    list-style-type: none;
    margin: 0 !important;
    padding: 0;
border: 1px solid #ccc;}

#huge_it_portfolio_options_1 ul li a {
    background-color: #F7F7F7 !important;
    font-size:14px !important;
    color:#555555 !important;
    text-decoration: none;
    cursor: pointer;
    margin: 0 !important;
    display: block;
    padding:3px;
    border-radius: 0px;
}

/*#huge_it_portfolio_content_1 #huge_it_portfolio_options_1 ul li:hover {

}*/

#huge_it_portfolio_options_1 ul li a:hover {
    background-color: #FF3845 !important;
    color:#FFFFFF !important;
    cursor: pointer;
}

#huge_it_portfolio_filters_1 {
    position: relative;
   /* overflow: hidden;*/
float:right;max-width:180px;width:20%;display:inline-block;margin-left:1%;
;}

#huge_it_portfolio_filters_1 ul li {
    list-style-type: none;
    border-radius: 0px;
border-bottom: 1px solid #ccc;}

#huge_it_portfolio_filters_1 ul li a {
    font-size:14px !important;
    color:#555555 !important;
    background-color: #FFFFFF !important;
    border-radius: 0px;
    padding:5px;
    display: block;
    text-decoration: none;
}

#huge_it_portfolio_filters_1  ul li a:hover {
    color:#FFFFFF !important;
    background-color: #5996AA !important;
    cursor: pointer
}
#huge_it_portfolio_filters_1 ul li.active a,
#huge_it_portfolio_filters_1 ul li.active a:link,
#huge_it_portfolio_filters_1  ul li.active a:hover,
#huge_it_portfolio_filters_1  ul li.active a:focus,
#huge_it_portfolio_filters_1  ul li.active a:active {
    color:#FFFFFF !important;
    background-color: #5996AA !important;
    cursor: pointer;
}
#huge_it_portfolio_content_1 #huge_it_portfolio_container_1 {
    width: 79%;
    max-width: 100% !important;
}

#huge_it_portfolio_content_1 #huge_it_portfolio_filters_2 {
	float:none;
	width:100%;
	max-width: 100%;
	margin-bottom:1rem;
	display:none;
}
@media screen and (max-width: 768px) {



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

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


}
@media screen and (max-width: 317px) {
    .portelement_1  {
        width:98%;
        margin: 1% !important;
        float: left;
        /*overflow: hidden;*/
        outline:none;
        border:1px solid #D0D0D0;
    }
    .wd-portfolio-panel_1 {
        width: 100% !important;
    }
}
#huge-it-container-loading-overlay_1 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background:  url(//mari-and-bird.jp/wp/wp-content/plugins/portfolio-gallery/assets/images/loading/loading-1.svg) center top ;
    background-repeat: no-repeat;
    background-size: 60px auto;
}
#huge_it_portfolio_options_and_filters_1{
    position: relative;
    float: left;
    width: 20%;
    max-width: 180px;
    float:;
margin-left:1%;
}


/*PC版の時スマホ用メニューを隠す*/
#huge_it_portfolio_filters_2 {
	float:none;
	width:100%;
	max-width: 100%;
	margin-bottom:1rem;
    display: none;
}	


/**/
/*-------------------------------*/

/*@media screen and (min-width : 768px)

-------------------------------*/
@media screen and (max-width : 768px) {
#huge_it_portfolio_content_1 #huge_it_portfolio_filters_1 {
	float:none;
	width:100%;
	max-width: 100%;
	margin-bottom:1rem;
	display:none;
}
#huge_it_portfolio_content_1 #huge_it_portfolio_filters_1 ul li a {
	width:100%;
	display:block;
}
#huge_it_portfolio_content_1 #huge_it_portfolio_container_1 {
    width: 100%;
    max-width: 100% !important;

}
#huge_it_portfolio_popup_list_1 li.pupup-element {
    width:100%;
}

#huge_it_portfolio_popup_list_1 {
    width:100%;
    top:0 !important;
    left:0 !important;
    margin:0 !important;
    height:100%;
/*	opacity:0;*/
}
	
	
/*----------スマホ用メニュー----------*/	
#huge_it_portfolio_filters_2 {
	float:none;
	width:100%;
	max-width: 100%;
	margin-bottom:1rem;

}		

#huge_it_portfolio_filters_2 ul {
    margin: 0 !important;
    padding: 0 !important;
    /*overflow: hidden;*/
    width: 100%;
}



#huge_it_portfolio_options_2 ul li {
    border-radius: 0px;
    list-style-type: none;
    margin: 0 !important;
    padding: 0;
border: 1px solid #ccc;}

#huge_it_portfolio_options_2 ul li a {
    background-color: #F7F7F7 !important;
    font-size:14px !important;
    color:#555555 !important;
    text-decoration: none;
    cursor: pointer;
    margin: 0 !important;
    display: block;
    padding:3px;
    border-radius: 0px;
}

/*#huge_it_portfolio_content_1 #huge_it_portfolio_options_1 ul li:hover {

}*/

#huge_it_portfolio_options_2 ul li a:hover {
    background-color: #FF3845 !important;
    color:#FFFFFF !important;
    cursor: pointer;
}

#huge_it_portfolio_filters_2 {
    position: relative;
   /* overflow: hidden;*/
	display:inline-block;
	margin-left:1%;
}

#huge_it_portfolio_filters_2 ul li {
    list-style-type: none;
    border-radius: 0px;
border-bottom: 1px solid #ccc;}

#huge_it_portfolio_filters_2 ul li a {
    font-size:14px !important;
    color:#555555 !important;
    background-color: #FFFFFF !important;
    border-radius: 0px;
    padding:5px;
    display: block;
    text-decoration: none;
}

#huge_it_portfolio_filters_1  ul li a:hover {
    color:#FFFFFF !important;
    background-color: #5996AA !important;
    cursor: pointer
}
#huge_it_portfolio_filters_2 ul li.active a,
#huge_it_portfolio_filters_2 ul li.active a:link,
#huge_it_portfolio_filters_2  ul li.active a:hover,
#huge_it_portfolio_filters_2  ul li.active a:focus,
#huge_it_portfolio_filters_2  ul li.active a:active {
    color:#FFFFFF !important;
    background-color: #5996AA !important;
    cursor: pointer;
}
}