@charset "utf-8";
/*--------------------------------------
	copyright :　webcal
--------------------------------------*/

@import url(normalize.css);
@import url(../_plugin/fontawesome/css/all.min.css);
@import url(common_parts.css);
@import url(common.css);


/*　index　==============================*/
.flb { display: flex; flex-wrap: wrap; }

.sec_inner { width: 100%; max-width: 1360px; margin: auto; }
.sec_contents { padding: 0 2rem; }
.tag li { padding-left: 1em; position: relative; margin-right: 1rem; }
.tag li::before { content:"■"; position: absolute; left: 0; }

.portfolio_wrap article { width: calc( (99.999% - 3rem) / 2 ); margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #ddd; }
.portfolio_wrap article:not(:nth-of-type(2n)) { margin-right: 3rem; }
.portfolio_wrap article img { cursor: pointer; transition: .7s; }
.portfolio_wrap .thumbnail { overflow: hidden; }
.portfolio_wrap .thumbnail:hover img { transform: scale(1.5); transition: .7s; }

@media screen and ( min-width: 769px ) {
	.portfolio_wrap article { width: calc( (99.999% - 6rem) / 3 ); margin-bottom: 3rem; }
	.portfolio_wrap article:not(:nth-of-type(2n)) { margin-right: 0; }
	.portfolio_wrap article:not(:nth-of-type(3n)) { margin-right: 3rem; }
}

/* modal */
#modal { display: none; }
.view_modal { overflow: hidden; }
.view_modal::after { content: ""; width: 100%; height: 100%; z-index: 999; background: rgba(0, 0, 0, 0.6); display: block; position: fixed; top: 0; left: 0; }
.view_modal #modal { display: block; position: relative; width: 85%; }
.view_modal #modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 3px; z-index: 9999; }
#modal .modal_inner { padding: 3rem; }
#modal .close { margin: 2rem 0; }
#modal button { padding: 0.3rem; }
#modal .blank_link::before { content:"\f08e"; font-family: "Font Awesome 5 PRO"; margin-right: 0.5em; }
#modal .tag { margin-bottom: 3rem; }
#modal .discription { white-space: pre-line; }
#footer { background: #000; }