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

/*
□□□□□□□□□□□□□□□□□□□□□□□□□□

                トップページ専用CSS

□□□□□□□□□□□□□□□□□□□□□□□□□□
*/

@font-face {
  font-family: 'kar-font';
  src:  url('fonts/kar-font.eot?9jxv8b');
  src:  url('fonts/kar-font.eot?9jxv8b#iefix') format('embedded-opentype'),
    url('fonts/kar-font.ttf?9jxv8b') format('truetype'),
    url('fonts/kar-font.woff?9jxv8b') format('woff'),
    url('fonts/kar-font.svg?9jxv8b#kar-font') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'kar-font' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ico-arrow:before {
  content: "\e900";
}





/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆PC用◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
@media only screen and (min-width: 641px) {
/*ここにcss*/


/*

リストページ

*/

/*大枠*/
.works{
	background-color:#1b181c;
	color:#fff;
	padding:80px 0;
	box-sizing:border-box;
}

.works_list_con{
	text-align:center;
	width:1200px;
	margin:0 auto;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
}
.works_box{
	width:300px;
	box-sizing:border-box;
	border:1px solid #1b181c;
}

.works_box img{
	width:100%;
	height:auto;
}

.works_list_box {
	overflow:		hidden;
	position:		relative;
}
.works_list_box .caption {
	color:			#fff;
	position: absolute;
	bottom:10px;
	text-align:left;
	padding:10px;
}

.works_list_box .caption span{
	font-size:0.6em;
	line-height:2.2em;
}
.works_list_box .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background: linear-gradient(rgba(0, 33, 229, .4), rgba(51, 54, 49, .8));
	/*background-color:	rgba(0,0,0,0.4);*/
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.works_list_box:hover .mask {
	opacity:		1;	/* マスクを表示する */
}



/*---------------------------------------
　　　　　　　　詳細ページ

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

.works2{
	background-color:#1b181c;
	color:#fff;
	padding:0 0 80px;
	box-sizing:border-box;
	text-align:center;
}

/*上の大きなイメージ*/
.details_topimg_con{
	width:100%;
	height:90vh;
	max-height:1000px;
	background-size:cover;
	background-attachment:fixed;
	box-sizing:border-box;
	display: flex;
    justify-content: center;
    align-items: center;
	margin-bottom:80px;
	
}
.details_topimg_box{
	display:inline-block;
	text-shadow:0px 0px 3px #000;
	text-shadow:0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000;
}

.details_topimg_box2{
	text-align:center;
	line-height:1.1em;
	margin-bottom:50px;
}
.details_topimg_cat{
	margin:10px auto;
	border:1px solid #FFF;
	padding:8px 16px;
	display:inline-block;
	box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .5);
	/*filter: drop-shadow(0px 0px 3px #000,0px 0px 3px #000);*/
}
.details_topimg_name{
	margin:10px auto 20px;
	font-size:1.8em;	
}
.details_topimg_txt{
	border-top:1px solid #999;
	padding-top:20px;
	width:600px;
	margin:0 auto 80px;
	text-align:left;
}


.details_topimg_arrow {
	text-align:center;
	font-size:25px;
}


/*
画像リスト
*/

/*ビフォーアフター用タイトル*/
.page_photo_title{
	width:1000px;
	border-bottom:1px solid #FFF;
	padding-bottom:5px;
	margin:0 auto 50px;
	text-align:left;
	font-size:1.2em;
	line-height:1.1em;
}





.page_photo_con{
	width:1000px;
	margin:0 auto 80px;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
}


.list_box{
    width:250px;
	box-sizing:border-box;
	border:1px solid #1b181c;
}
.list_box span {
    display: block;
    height: 0;
    width: 100%;
    padding-bottom: 100%;
    background-size: cover;
    background-position:center center;
}
.list_box span:hover {
    opacity: .8;
}



.list_back_box{
	text-align:center;
}
.list_back_box a{
	color:#D7D7EA;
	border:1px solid #D7D7EA;
	padding:10px 20px;
	text-decoration:none;
	font-size:1.3em;
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆↓PC用◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
}
/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆↑PC用◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆スマホ用◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
@media only screen and (max-width: 640px) {
/*ここにcss*/



.works{
	background-color:#1b181c;
	color:#fff;
	padding:80px 0;
	box-sizing:border-box;
}
.works_list_con{
	width:90%;
	margin:0 auto;
	padding:0;
	overflow:hidden;
}

.works_box{
	width:50%;
	box-sizing:border-box;
	border:1px solid #1b181c;
	margin:0;
	padding:0;
	float:left;
}

.works_box img{
	width:100%;
	height:auto;
}

.works_list_box {
}
.works_list_box .caption {
	display:none;
}

.works_list_box .mask {
	display:none;
}

/*---------------------------------------
　　　　　　　　詳細ページ

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

.works2{
	background-color:#1b181c;
	color:#fff;
	padding:0 0 80px;
	box-sizing:border-box;
	text-align:center;
}

/*上の大きなイメージ*/
.details_topimg_con{
	width:100%;
	height:95vh;
	background-size:cover;
	background-attachment:fixed;
	box-sizing:border-box;
	display: flex;
    justify-content: center;
    align-items: center;
	margin-bottom:80px;
	
}
.details_topimg_box{
	display:inline-block;
	text-shadow:0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000;
}

.details_topimg_box2{
	text-align:center;
	line-height:1.1em;
	margin-bottom:25px;
}
.details_topimg_cat{
	margin:0 auto 5px;
	border:1px solid #FFF;
	padding:8px 16px;
	display:inline-block;
}
.details_topimg_name{
	margin:5px auto 10px;
	font-size:1.3em;	
}
.details_topimg_txt{
	border-top:1px solid #999;
	padding-top:10px;
	width:90%;
	margin:0 auto 30px;
	text-align:left;
}

/*下矢印*/
.details_topimg_arrow {
	text-align:center;
	font-size:25px;
}


/*ビフォーアフター用タイトル*/
.page_photo_title{
	width:90%;
	border-bottom:1px solid #FFF;
	padding-bottom:5px;
	margin:0 auto 25px;
	text-align:left;
	font-size:1.2em;
	line-height:1.1em;
}

/*画像リスト*/
.page_photo_con{
	width:90%;
	margin:0 auto 50px;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
}


.list_box{
    width:50%;
	box-sizing:border-box;
	border:1px solid #1b181c;
}
.list_box span {
    display: block;
    height: 0;
    width: 100%;
    padding-bottom: 100%;
    background-size: cover;
    background-position:center center;
}
.list_box span:hover {
    opacity: .8;
}

/*戻るボタン*/
.list_back_box{
	text-align:center;
}
.list_back_box a{
	color:#D7D7EA;
	border:1px solid #D7D7EA;
	padding:10px 20px;
	text-decoration:none;
	font-size:1.3em;
}

/*◆◆◆◆◆◆◆↓スマホ用◆◆◆◆◆◆◆*/    
}
/*◆◆◆◆◆◆◆↑スマホ用◆◆◆◆◆◆◆*/