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


/* 全体 */
body {
	width: auto;
	height: auto;
	font-family: "ヒラギノ角ゴPro W3", "メイリオ", "Hiragino Kaku Gothic", "Osaka", "Meiryo", "Arial", "Helvetica", "Verdana", "MS Pゴシック", sans-serif;
	font-size: 16px;
	line-height: 1.5em;
	color: #000000;
	background-color: #ffffff;
}
.btn {
	transition: 1.0s ;
	}
a:hover img{
	opacity: 0.8 ;
	}

#footer_outline .address a{
	color:#000;
	text-decoration: none;
	}
.slick-dots li button:hover::before, .slick-dots li button:focus::before,
.slick-dots li.slick-active button::before {
    opacity: 1;
    color: #ffcc00;
}

.slick-prev,
.slick-next
{
    position: absolute;
    top: 50%;
    /*margin-top: -16px;*/
    outline: 0;
    text-indent: -9999px;
    z-index: 9999;
}
.slick-prev {
    background: url("../image/prev.png") no-repeat ;
	background-size: 100%;
}

.slick-next {
    background: url(../image/next.png) no-repeat ;
	background-size: 100%;
}

/* PC */
@media screen and (min-width:1113px){
.sp, .tb {
	display:none
	}
	
a.tel ,
.tel a {
    pointer-events: none;
	text-decoration: none;
}
a.mail {
    pointer-events:auto;
	color:#000;
}
a.mail span{
	display: inline-block;
	vertical-align: top;
}
#contents {
	width: auto;
	height: auto;
	margin: 0px auto;
	}
#header {
	width: 1080px;
	height: 70px;
	margin: auto;
	overflow:hidden;
	clear: both;
	}
#header .logo{
	width: 489px;
	height: 70px;
	margin: auto 60px auto auto;
	float: left;
	display: flex;
	justify-content: left;
    align-items: center; 
	}
#header .logo img {
	width: 489px;
	height: 28px;
	}
#header .mail_btn{
	width: 210px;
	height: 70px;
	margin: auto;
	padding-top: 3px;
	float: left;
	display: flex;
	justify-content: left;
    align-items: center; 
	}
#header .mail_btn img {
	width: 100%;
	height: auto;
	}	
#header .tel{
	width: 305px;
	padding-top: 24px;
	margin: auto;
	float: right;
	display: flex;
	justify-content: right;
    align-items: center;
	}
#header .tel img {
	width: 100%;
	height: auto;
	}	
#main {
	width: 1400px;
	height: auto;
	margin: 0px auto;
	}	
#mv {
	width: 100%;
	margin: auto auto 70px auto;
	background-color: #e0e0e0
	}	
#mv	.slider {
	width: 1400px;
	margin: 0px auto;
	list-style: none;
	}	
#concept {
	width: 1080px;
	height: auto;
	margin: auto auto 100px auto;
	}
#concept .ttl{
	width: 126px;
	height: 35px;
	margin: 0px;
	}
#concept .ttl img {
	width: 126px;
	height: 35px;
	}
#concept .text{
	width: auto;
	height: auto;
	margin-top: 20px;
	font-size: 18px;
	color: #666666;
	text-align: center;
	line-height: 2em;
	}
#concept .logo{
	width: 515px;
	height: 427px;
	margin: 50px auto 0px auto;
	}
/*#concept .logo img {
	width: 331px;
	height: 235px;
	}*/
#profile {
	width: 1080px;
	height: auto;
	margin: auto auto 90px auto;
	overflow:hidden;
	clear: both;
	}
#profile .ttl{
	width: 89px;
	height: 28px;
	margin: 0px;
	}
#profile .ttl img {
	width: 89px;
	height: 28px;
	}
#profile .area {
	width: 1080px;
	height: 318px;
	background-color: #e2e2e2;
	}
#profile .left {
	width: 760px;
	height: auto;
	margin: 65px 0px 0px 40px;
	float: left;
	}
#profile .name {
	font-size: 24px;
	}
#profile .name＿en {
	margin-top: 10px;
	}
#profile .text {
	margin-top: 40px;
	}
#profile .right {
	width: 210px;
	height: auto;
	margin: 21px 40px 0px 0px;
	float: right;
	}
#contact {
	width: 1080px;
	height: auto;
	margin: auto;
	}
#contact .text {
	font-size: 20px;
	text-align:center;
	font-weight: bold;
	}
#contact .mail_btn {
	margin-top: 13px;
	text-align:center;
	}
#contact .mail_btn img {
	width: 560px;
	height: 60px;
	}
#contact .tel {
	margin-top: 20px;
	text-align:center;
	}
#contact .tel img {
	width: 314px;
	height: 22px;
	}
#contact .mail img {
	width: 28px;
	height: auto;
	}
#works {
	width: 1104px;
	height: auto;
	margin: 65px auto 70px auto;
	}
#works .clm01 {
	width: 1104px;
	height: auto;
	margin: auto;
	margin-bottom: 105px;
	overflow:hidden;
	clear: both;
	}
#works .clm01_photoarea {
	width: 1104px;
	height: auto;
	margin: auto;
	position: relative;
	}
#works .clm01_photo {
	width: 1080px;
	height: auto;
	margin: auto;
	position: relative;
	}
#works .clm01_tag {	
	position: absolute;
	top: 20px;
	left: 0px;
	}	
#works .clm01_textarea {
	width: 1080px;
	height: auto;
	margin: auto;
	margin-top: 15px;
	}
#works .clm01_place {
	width: 850px;
	height: auto;
	float: left;
	}
#works .clm01_more {
	width: 200px;
	height: 37px;
	float: right;
	}
#works .clm02area{
	width: 1104px;
	height: auto;
	margin: auto;
	overflow:hidden;
	clear: both;
	}	
#works .clm02 {
	width: 532px;
	height: auto;
	margin: auto;
	margin-bottom: 85px;
	float: left;
	}
#works .clm02:nth-child(odd) {
	margin-right: 28px;
	}
#works .clm02_photoarea {
	width: 532px;
	height: auto;
	margin: auto;
	position: relative;
	}
#works .clm02_photo {
	width: 520px;
	height: auto;
	margin-left: 12px;
	position: relative;
	}
#works .clm02_tag {	
	position: absolute;
	top: 20px;
	left: 0px;
	}	
#works .clm02_textarea {
	width: 520px;
	height: auto;
	margin-top: 15px;
	margin-left: 12px;
	}
#works .clm02_place {
	width: 300px;
	height: auto;
	float: left;
	}
#works .clm02_more {
	width: 200px;
	height: 37px;
	float: right;
	}
#works .btn:hover img{
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "alpha(opacity=0)";
	}
#works .btn {
	display: block;
	width: 200px;
	height: 37px;
    background:url(../image/works_more_bg.gif) center top no-repeat;
	}
#footer {
	width: auto;
	height: auto;
	margin-top: 110px;
	background-color: #e2e2e2;
	}
#footer_outline {
	width: 1080px;
	height: auto;
	margin: auto auto 80px auto;
	padding-top: 40px;
	overflow:hidden;
	clear: both;
	}
#footer_outline .logo01 {
	width: 169px;
	height: 120px;
	margin: auto auto auto 260px;
	float: left;
	}
#footer_outline .logo01 img {
	width: 169px;
	height: auto;
	}
#footer_outline .footer_textarea {
	width: 620px;
	height: auto;
	margin: auto;
	float: right;
	}
#footer_outline .copy {
	font-size: 13px;
	line-height: 1.5em;
	}
#footer_outline .logo02 {
	width: 275px;
	height: auto;
	margin-top: 16px;
	}
#footer_outline .logo02 img {
	width: 275px;
	height: auto;
	}
#footer_outline .registration {
	font-size: 14px;
	margin-top: 22px;
	}
#footer_outline .address {
	font-size: 16px;
	line-height: 1.5em;
	margin-top: 40px;
	}
#footer .copyright {
	width: 1080px;
	height: auto;
	margin: 80px auto auto auto;
	text-align:center;
	font-size: 14px;
	}
	
	#page_top {
		position: fixed;
		bottom:50px;
		right:50px;
	}
	
    .slick-prev,
    .slick-next
    {
        width: 46px;
        height: 89px;
    }
    .slick-prev {
        left: -70px;
    }

    .slick-next {
        right: -70px;
    }
}


@media screen and (min-width:751px) and ( max-width:1400px) {
	#mv .slider {
		width:100%;
	}
	#mv .slider img {
        width: 100%;
        list-style: none;
    }
    #mv .slick-prev {
        left: 20px;
    }

    #mv .slick-next {
        right: 20px;
    }
}

/* タブレット */
@media screen and (min-width:751px) and ( max-width:1112px) {
.sp {
	display:none
	}
	.tb {
	display:block;
	}
a.mail {
    pointer-events:auto;
	color:#000;
}
a.mail span{
	display: inline-block;
	vertical-align: top;
}
#contents {
	width: auto;
	height: auto;
	margin: 0px auto;
	}
#header {
	width: autoauto;
	height: 60px;
	margin: 5px auto auto auto;
	overflow:hidden;
	clear: both;
	}
#header .logo{
	width: 36%;
	height: 60px;
	margin: auto 14% auto 3%;
	float: left;
	display: flex;
	justify-content: left;
    align-items: center; 
	}
#header .logo img {
	width: 100%;
	height: auto;
	}
#header .mail_btn{
	width: 16%;
	height: 60px;
	margin: auto 0%;
	float: left;
	display: flex;
	justify-content: left;
    align-items: center; 
	}
#header .mail_btn img {
	width: 100%;
	height: auto;
	}	
#header .tel{
	width: 25%;
	height: 60px;
	margin: auto 3% auto auto;
	float: right;
	display: flex;
	justify-content: right;
    align-items: center;
	}
#header .tel img {
	width: 100%;
	height: auto;
	}	
#main {
	width: 100%;
	height: auto;
	margin: 0px auto;
	}	
#mv {
	margin: auto auto 50px auto;
	}	
#mv	.slider {
	list-style: none;
	}
#mv	.slider img{
	width: 100%;
	list-style: none;
	}
#concept {
	width: 94%;
	height: auto;
	margin: auto auto 60px auto;
	}
#concept .ttl{
	width: 15%;
	height: auto;
	margin: 0px;
	}
#concept .ttl img {
	width: 100%;
	height: auto;
	}
#concept .text{
	width: auto;
	height: auto;
	margin-top: 20px;
	font-size: 15px;
	color: #666666;
	text-align: center;
	line-height: 2em;
	}
#concept .logo{
	width: 45%;
	height: auto;
	margin: 50px auto 0px auto;
	}
#concept .logo img {
	width: 100%;
	height: auto;
	}
#profile {
	width: 100%;
	height: auto;
	margin: auto auto 70px auto;
	overflow:hidden;
	clear: both;
	}
#profile .ttl{
	width: 11%;
	height: auto;
	margin: auto auto -8px 3%;
	}
#profile .ttl img {
	width: 100%;
	height: auto;
	}
#profile .area {
	width: 100%;
	height: 300px;
	background-color: #e2e2e2;
	}
#profile .left {
	width: 73%;
	height: auto;
	margin: 3% 0px 3% 3%;
	float: left;
	}
#profile .name {
	margin-top: 20px;
	font-size: 24px;
	}
#profile .name＿en {
	margin-top: 5px;
	font-size: 14px;
	}
#profile .text {
	margin-top: 20px;
	font-size: 14px;
	line-height: 2em;
	}
#profile .right {
	width: 140px;
	height: auto;
	margin: 60px 3% auto auto;
	float: right;
	}
#profile .photo img{
	width: 100%;
	height: auto;
	}
#contact {
	width: 94%;
	height: auto;
	margin: auto;
	}
#contact .text {
	font-size: 16px;
	text-align:center;
	font-weight: bold;
	}
#contact .mail_btn {
	margin-top: 13px;
	text-align:center;
	}
#contact .mail_btn img {
	width: 560px;
	height: 60px;
	}
#contact .tel {
	margin-top: 13px;
	text-align:center;
	}
#contact .tel img {
	width: 314px;
	height: 22px;
	}
#contact .mail img {
	width: 24px;
	height: 18px;
	}
#works {
	width: 100%;
	height: auto;
	margin: 60px auto 40px auto;
	}
#works .clm01 {
	width: 100%;
	height: auto;
	margin: auto;
	margin-bottom: 50px;
	overflow:hidden;
	clear: both;
	}
#works .clm01_photoarea {
	width: 100%;
	height: auto;
	margin: auto;
	position: relative;
	}
#works .clm01_photo {
	width: 96%;
	height: auto;
	margin: auto;
	position: relative;
	}
#works .clm01_photo img {
	width: 100%;
	height: auto;
	}
#works .clm01_tag {	
	width: 100%;
	height: auto;
	position: absolute;
	top: 15px;
	left: 0px;
	}
#works .clm01_tag img {	
	width: 40%;
	height: auto;
	margin-left: 0.7%;
	}
#works .clm01_textarea {
	width: 94%;
	height: auto;
	margin: auto;
	margin-top: 10px;
	}
#works .clm01_place {
	width: 65%;
	height: auto;
	font-size: 14px;
	float: left;
	}
#works .clm01_more {
	width: 200px;
	height: 37px;
	float: right;
	}
#works .clm01_more img {
	width: 100%;
	height: auto;
	}
#works .clm02area{
	width: 100%;
	height: auto;
	margin: auto;
	overflow:hidden;
	clear: both;
	}
#works .clm02 {
	width: 45%;
	height: auto;
	margin: auto;
	margin: auto 3% 40px 3%;
	float: left;
	}
#works .clm02:nth-child(odd) {
	margin-right: 1%;
	}
#works .clm02_photoarea {
	width: 100%;
	height: auto;
	margin: auto;
	position: relative;
	}
#works .clm02_photo {
	width: 100%;
	height: auto;
	margin-left: auto;
	position: relative;
	}
#works .clm02_photo img {
	width: 100%;
	height: auto;
	}
#works .clm02_tag {	
	position: absolute;
	top: 11px;
	left: -1.5%;
	}
#works .clm02_tag img {
	width: 65%;
	height: auto;
	}
#works .clm02_textarea {
	width: 100%;
	height: auto;
	margin-top: 5px;
	}
#works .clm02_place {
	width: 43%;
	font-size: 14px;
	height: auto;
	float: left;
	}
#works .clm02_more {
	width: 45%;
	height: auto;
	float: right;
	}
#works .clm02_more img {
	width: 100%;
	height: auto;
	}
#footer {
	width: auto;
	height: auto;
	margin-top: 60px;
	background-color: #e2e2e2;
	}
#footer_outline {
	width: 650px;
	height: auto;
	margin: auto auto 40px auto;
	padding-top: 30px;
	overflow:hidden;
	clear: both;
	}
#footer_outline .logo01 {
	width: 169px;
	height: 120px;
	margin: auto 20px auto auto;
	float: left;
	}
#footer_outline .logo01 img {
	width: 169px;
	height: auto;
	}
#footer_outline .footer_textarea {
	width: 460px;
	height: auto;
	margin: auto;
	float: right;
	}
#footer_outline .copy {
	font-size: 12px;
	line-height: 1.5em;
	}
#footer_outline .logo02 {
	width: 275px;
	height: auto;
	margin-top: 14px;
	}
#footer_outline .logo02 img {
	width: 275px;
	height: auto;
	}
#footer_outline .registration {
	font-size: 14px;
	margin-top: 16px;
	}
#footer_outline .address {
	font-size: 16px;
	line-height: 1.5em;
	margin-top: 25px;
	}
#footer .copyright {
	width: 100%;
	height: auto;
	margin: 30px auto auto auto;
	text-align:center;
	font-size: 12px;
	}
	
	#page_top {
		position: fixed;
		bottom:25px;
		right:25px;
	}
	
    .slick-prev,
    .slick-next
    {
        width: 46px;
        height: 89px;
    }
    .slick-prev {
        left: 2%;
    }

    .slick-next {
        right: 2%;
    }
	.slick-slide img {
      width: 100%;
    }
}



/* スマホ */
@media screen and (max-width: 750px) {
.pc, .tb {
	display:none
	}
#contents {
	width: auto;
	height: auto;
	margin: 0px auto;
	}
#header {
	width: auto;
	height: 60px;
	margin: 5px auto auto auto;
	overflow:hidden;
	clear: both;
	}
#header .logo{
	width: 31%;
	height: 60px;
	margin: auto 6% auto 3%;
	float: left;
	display: flex;
	justify-content: left;
    align-items: center; 
	}
#header .logo img {
	width: 100%;
	height: auto;
	}
#header .mail_btn{
	width: 28%;
	height: 60px;
	margin: auto 0%;
	float: left;
	display: flex;
	justify-content: left;
    align-items: center; 
	}
#header .mail_btn img {
	width: 100%;
	height: auto;
	}	
#header .tel{
	width: 27%;
	height: 60px;
	margin: auto 3% auto auto;
	float: right;
	display: flex;
	justify-content: right;
    align-items: center;
	}
#header .tel img {
	width: 100%;
	height: auto;
	}	
#main {
	width: 100%;
	height: auto;
	margin: 0px auto;
	}	
#mv {
	margin: auto auto 50px auto;
	}
#mv	.slider {
	list-style: none;
	}
#mv	.slider img{
	width: 100%;
	list-style: none;
	}
#concept {
	width: 94%;
	height: auto;
	margin: auto auto 50px auto;
	}
#concept .ttl{
	width: 21%;
	height: auto;
	margin: 0px;
	}
#concept .ttl img {
	width: 100%;
	height: auto;
	}
#concept .text{
	width: auto;
	height: auto;
	margin-top: 20px;
	font-size: 12px;
	color: #666666;
	text-align: center;
	line-height: 2em;
	}
#concept .logo{
	width: 45%;
	height: auto;
	margin: 50px auto 0px auto;
	}
#concept .logo img {
	width: 100%;
	height: auto;
	}
#profile {
	width: 100%;
	height: auto;
	margin: auto auto 60px auto;
	overflow:hidden;
	clear: both;
	}
#profile .ttl{
	width: 15%;
	height: auto;
	margin: auto auto -8px 3%;
	}
#profile .ttl img {
	width: 100%;
	height: auto;
	}
#profile .area {
	width: 100%;
	height: 315px;
	background-color: #e2e2e2;
	}
#profile .left {
	width: 59%;
	height: auto;
	margin: 3% 3% 3% 3%;
	float: left;
	}
#profile .name {
	margin-top: 20px;
	font-size: 20px;
	}
#profile .name＿en {
	margin-top: 5px;
	font-size: 12px;
	}
#profile .text {
	margin-top: 20px;
	font-size: 11px;
	line-height: 1.8em;
	}
#profile .right {
	width: 120px;
	height: auto;
	margin: 110px 3% auto auto;
	float: right;
	}
#profile .photo img{
	width: 100%;
	height: auto;
	}
#contact {
	width: 94%;
	height: auto;
	margin: auto;
	}
#contact .text {
	font-size: 14px;
	text-align:center;
	font-weight: bold;
	}
#contact .mail_btn {
	margin-top: 13px;
	text-align:center;
	}
#contact .mail_btn img {
	width: 100%;
	height: auto;
	}
#contact .tel {
	margin-top: 13px;
	text-align:center;
	}
#contact .tel img {
	width: 67%;
	height: auto;
	}
#contact .mail img {
	width: 24px;
	height: 18px;
	padding-top: 3px;
	}
#contact .mail span {
	vertical-align: top;
	}
#contact a.mail  {
	text-decoration: none;
	color:#000;
	}
#works {
	width: 100%;
	height: auto;
	margin: 50px auto 30px auto;
	}
#works .clm01 {
	width: 100%;
	height: auto;
	margin: auto;
	margin-bottom: 40px;
	overflow:hidden;
	clear: both;
	}
#works .clm01_photoarea {
	width: 100%;
	height: auto;
	margin: auto;
	position: relative;
	}
#works .clm01_photo {
	width: 96%;
	height: auto;
	margin: auto;
	position: relative;
	}
#works .clm01_photo img {
	width: 100%;
	height: auto;
	}
#works .clm01_tag {	
	width: 100%;
	height: auto;
	position: absolute;
	top: 15px;
	left: 0px;
	}
#works .clm01_tag img {	
	width: 53%;
	height: auto;
	margin-left: 0.4%;
	}
#works .clm01_textarea {
	width: 94%;
	height: auto;
	margin: auto;
	margin-top: 10px;
	}
#works .clm01_place {
	width: 60%;
	height: auto;
	height: auto;
	font-size: 12px;
	float: left;
	}
#works .clm01_more {
	width: 35%;
	height: auto;
	float: right;
	}
#works .clm01_more img {
	width: 100%;
	height: auto;
	}
#works .clm02area{
	width: 100%;
	height: auto;
	margin: auto;
	overflow:hidden;
	clear: both;
	}
#works .clm02 {
	width: 45%;
	height: auto;
	margin: auto;
	margin: auto 3% 30px 3%;
	float: left;
	}
#works .clm02:nth-child(odd) {
	margin-right: 1%;
	}
#works .clm02_photoarea {
	width: 100%;
	height: auto;
	margin: auto;
	position: relative;
	}
#works .clm02_photo {
	width: 100%;
	height: auto;
	margin-left: auto;
	position: relative;
	}
#works .clm02_photo img {
	width: 100%;
	height: auto;
	}
#works .clm02_tag {	
	position: absolute;
	top: 11px;
	left: -2%;
	}
#works .clm02_tag img {
	width: 70%;
	height: auto;
	}
#works .clm02_textarea {
	width: 100%;
	height: auto;
	margin-top: 5px;
	}
#works .clm02_place {
	width: 43%;
	font-size: 12px;
	height: auto;
	float: left;
	}
#works .clm02_more {
	width: 55%;
	height: auto;
	float: right;
	}
#works .clm02_more img {
	width: 100%;
	height: auto;
	}
#footer {
	width: auto;
	height: auto;
	margin-top: 60px;
	padding-bottom: 4VW;
	background-color: #e2e2e2;
	}
#footer_outline {
	width: 80%;
	height: auto;
	margin: auto auto 40px auto;
	padding-top: 30px;
	overflow:hidden;
	clear: both;
	}
#footer_outline .logo01 {
	width: 43%;
	height: auto;
	margin: auto;
	}
#footer_outline .logo01 img {
	width: 100%;
	height: auto;
	}
#footer_outline .footer_textarea {
	width: 100%;
	height: auto;
	margin: 20px auto auto auto;
	float: right;
	}
#footer_outline .copy {
	font-size: 11px;
	line-height: 1.5em;
	}
#footer_outline .logo02 {
	width: 67%;
	height: auto;
	margin-top: 10px;
	}
#footer_outline .logo02 img {
	width: 100%;
	height: auto;
	}
#footer_outline .registration {
	font-size: 11px;
	margin-top: 12px;
	}
#footer_outline .address {
	font-size: 13px;
	line-height: 1.5em;
	margin-top: 20px;
	}
#footer .copyright {
	width: 100%;
	height: auto;
	margin: 30px auto auto auto;
	text-align:center;
	font-size: 10px;
	}
	#page_top {
		width:50px;
		position: fixed;
		bottom:1VH;
		right:3%;
	}
	#page_top img{
		width:100%;
		height:auto;
	}
	
	
    .slick-prev,
    .slick-next
    {
        width: 23px;
        height: 45px;
    }
    .slick-prev {
        left: 2%;
    }

    .slick-next {
        right: 2%;
    }
	.slick-slide img {
      width: 100%;
    }
}