@charset "UTF-8";

/*******************************
 
Case detailCss
 
*******************************/
.page article a,
.mfp-content a{
	color: #16269a;
	text-decoration: underline;
}
#contents{
    text-align: left;
}


/*---maintitle---*/

#head p{
    font-size: 150%;
	margin: 10px auto;
}
#head time{
	color: #a7a7a7;
}


/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	#head{
		padding: 60px 0 40px;
	}
	#head p{
		font-size: 140%;
	}
}

/*---intro---*/
.intro{
    position: relative;
    margin-bottom: 80px;
}
.intro:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 15px 0 15px;
    border-color: #fff8d5 transparent transparent transparent;
    content: "";
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.intro-inner{
    background: #fff8d5;
    padding: 30px 70px;
    border-radius: 20px;
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    .intro{
        margin-bottom: 50px;
    }
    .intro-inner{
        padding: 30px;
    }
}


/*---list-group---*/
.list-group{
    display: none;

    background: #e5e5e5;
    margin: 50px 0;
    padding: 50px 50px 30px;
}
.list-group .flex{
    justify-content: center;
}
.list-group .icon {
    position: relative;
    margin-bottom: 20px;
    padding-left: 60px;
}
.list-group .icon:before{
    content: "";
    width: 22px;
    height: 23px;
    background: url("../img/ico_plus@2x.png") no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    margin: auto;
}
.list-group .icon:before,
.list-group .icon img{
    vertical-align: middle;
}
.list-group .icon:nth-of-type(1){
    padding-left: 0;
}
.list-group .icon:nth-of-type(1):before{
    display: none;
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
	.list-group {
		padding: 20px 0 0;
	}
	.list-group .icon {
		padding-left: 25px;
	}
	.list-group .icon:before {
		width: 12px;
		height: 13px;
		left: 7px;
	}
	.list-group .icon img{
		width: 80px;
	}
}



/*---block-detail---*/
.block-detail .txt,
.block-detail .img{
    float: left;
}
.block-detail .txt{
    width: 100%;
    text-align: left;
}
.block-detail .img{
    width: 35%;
    padding: 30px 30px 0;
}

.block-detail .list{
    border-bottom: dashed 1px #eee;
    padding: 10px 3px;
}
.block-detail .list{
    flex-wrap: nowrap;
}
.block-detail .list dt{
    width: 18%;
    position: relative;
    padding-right: 30px;
}
.block-detail .list dt:after{
    content: ":";
    position: absolute;
    right: 10px;
}
.block-detail .list dd{
    width: 82%;
}
.ico-gry{
	color: #515151!important;
	text-decoration: none!important;
    display: inline-block;
    margin: 0 5px 8px 0;
    padding: 2px 8px;
    background: #e5e5e5;
    border-radius: 5px;
    transition: all 300ms 0s ease;
}
.ico-gry:hover{
    background: #32a138;
    color: #fff!important;
}

.slick-arrow{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 3px;
    width: 22px;
    height: 22px;
    text-align: center;
    border-radius: 50%;
    background: #f0f0f0;
    cursor: pointer;
    transition: all 300ms 0s ease;
}
.slick-prev{
    left: -10px;
}
.slick-next{
    right: -10px;
}
.slick-prev:before,
.slick-next:before{
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    margin: auto;
}
.slick-prev:before{
    border-width: 5px 8px 5px 0;
    border-color: transparent #b4b4b4 transparent transparent;
}
.slick-next:before{
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #b4b4b4;
}
.slick-arrow:hover{
    background: #32a138;
}
.slick-prev:hover:before{
    border-color: transparent #fff transparent transparent;
}
.slick-next:hover:before{
    border-color: transparent transparent transparent #fff;
}


.dots-gry {
    text-align: center;
    margin: auto;
    display: none;
}
.dots-gry li {
    display: inline-block;
    margin: 0 8px;
}
.slick-slider button {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    text-indent: -9999px;
    cursor: pointer;
}
.dots-gry button:before {
    content: '●';
    font-size: 16px;
    text-indent: 0px;
    position: absolute;
    top: 0;
    left: 0;
    color: #c8c8c8;
}
.dots-gry li.slick-active button:before {
    color: #000;
}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
	.block-detail .txt, .block-detail .img{
		float: none;
	}
	.block-detail .txt {
		width: 100%;
		padding-right: 0;
	}
	.block-detail .img {
		width: 90%;
		margin: auto;
	}
	.block-detail .img .trimming-img:before {
		padding-top: 70%;
	}
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	.block-detail .list dt {
		width: 30%;
	}
	.block-detail .list dd {
		width: 70%;
	}
}




/*---voice---*/
.voice{
	position: relative;
	margin: 80px 0 15em;
} 
.voice:before{
	content: "";
	position: absolute;
	top: 10em;
	z-index: -1;
	width: 100%;
	height: 97%;
	background: #dcdddd;
}
.voice-item{
	margin-bottom: 50px;
}
.voice-item .label{
	position: relative;
	z-index: 1;
	display: inline-block;
	background: #fff;
	border-radius: 20px 20px 0 0;
	padding: 20px 40px 0;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
	margin-bottom: 0;
}
.voice-item .flex{
	clear: both;
	background: #fff;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
	position: relative;
	overflow: hidden;
}
.voice-item .flex:before{
	content: "";
	display: block;
	position: relative;
	z-index: 2;
	width: 100%;
	height: 40px;
	background: #fff;
}
.voice-item .img{
	width: 35%;
	padding: 0 40px 40px;
}
.voice-item .txt{
	width: 65%;
	padding: 0 40px 40px;
}
.voice-item .ttl{
	font-size: 180%;
	font-weight: bold;
	margin-bottom: 20px;
}

.voice-item.client .label{
	float: right;
}
.voice-item.client .flex{
	border-radius: 20px 0 20px 20px;
}

.voice-item.client02 .label{
	float: left;
}
.voice-item.client02 .flex{
	border-radius: 0 20px 20px 20px;
}
.voice-item.staff .flex{
	border-radius: 0 20px 20px 20px;
}
.voice-item.staff .img{
	order: 2;
}

.voice-item.staff02 .label{
	float: right;
}
.voice-item.staff02 .flex{
	border-radius: 20px 0  20px 20px;
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
	.voice{
	position: relative;
	margin: 80px 0 10em;
} 
	.voice-item .img,
	.voice-item .txt{
		width: 100%;
	}
	.voice-item.staff .img{
		order: 1;
	}
	.voice-item.staff .txt{
		order: 2;
	}
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	.voice-item .label{
		padding: 20px 20px 0;
	}
	.voice-item.client .label{
		width: 180px;
	}
	.voice-item.staff .label{
		width: 160px;
	}
	.voice-item .img,
	.voice-item .txt{
		padding: 0 30px 30px;
	}
 .btn-green {
     margin:30px auto;
}
}


/*---gallery---*/
.gallery figure{
	text-align: center;
    margin: 0 0 30px;
}
.gallery figcaption{
    margin: 10px 0 0;
}


/*---popup---*/
.popup-modal{
	display: block;
	height: 100%;
	position: relative;
}
.popup-modal:before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.32) url("../img/ico_zoom@2x.png") no-repeat;
	background-position: center;
	background-size: 37px auto;
	z-index: 1;
	opacity: 0;
	transition: all 300ms 0s ease;
}
.popup-modal:hover:before{
	opacity: 1;
}
.page .mfp-content{
	width: 80%!important;
	background: #fff;
	padding: 30px;
	border-radius: 10px;
}
.page .mfp-content .caption{
	font-size: 110%;
	font-weight: bold;
	margin: 15px 0;
}
.page .mfp-close-btn-in .mfp-close{
	display: none;
}
.page .mfp-content .popup-modal-dismiss{
	display: block;
    width: 45px;
    height: 45px;
    border: solid 1px #d8d8d8;
    border-radius: 50%;
    font-size: 30px;
    line-height: 45px;
    text-align: center;
	margin: 0 0 0 auto;
	cursor: pointer;
}
.page .mfp-content .popup-modal-dismiss:before{
	content: "×";
    display: block;
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
	.page .mfp-content{
		width: 90%!important;
		padding: 20px;
	}
}