@charset "utf-8";

.navToggle{
	display: none;
}
.sp_on{
		display: none;
}
.pc_on{
		display: block;
}
.foot_navi{
	display: none;
}

#lang2{
	display: none;
}

@media screen and (max-width: 1000px) {
	*, *:before, *:after {
	    -webkit-box-sizing: border-box;
	       -moz-box-sizing: border-box;
	         -o-box-sizing: border-box;
	        -ms-box-sizing: border-box;
	            box-sizing: border-box;
	}
	#wrapper{
		width: 100%;
		overflow-x: hidden;
	}
	.navToggle{
		display: block;
	}
	#lang2{
		display: block;
	}
	#navi{
		width: 100%;
		position: fixed;
	    z-index: 2;
	    top: 0;
	    left: 0;
	    background: #fff;
	    color: #000;
	    text-align: center;
	    transform: translateY(-100%);
	    transition: all 0.6s;
	    width: 100%;
	}
	#navi ul {
	    background: #fff;
	    margin: 0 auto;
	    padding: 25% 0 0 0;
	    width: 100%;
	    display: block;
	}
	#navi #sub {
	   display: none;
	}
    
	#header-area div#navi .menu li {
		display: block;
	    font-size: 1.05em;
	    list-style-type: none;
	    padding: 0;
	    width: 100%;
	}

	/* 最後はラインを描かない */
	#navi ul li:last-child {
	    padding-bottom: 0;
	    border-bottom: none;
	}

	#navi ul li a {
	    display: block;
	    color: #000;
	    padding: 0.5em 0;
	}

	/* このクラスを、jQueryで付与・削除する */
	#navi.active {
	    transform: translateY(0%);
	}
	#header-area div#navi {
	    margin-left: 0px;
	    margin-right: 0px;
	    padding-top: 0px;
		z-index: 110;
		position: absolute;
	}


	#header-area div#navi #lang {
	    position: relative;
	    top: 0;
	    right: 0;
	    display: flex;
	    justify-content: center;
	    padding-top: 6%;
	    padding-bottom: 6%;
	}
	.navToggle {
	    display: block;
	    position: absolute;    /* bodyに対しての絶対位置指定 */
	    right: 30px;
	    top: 32px;
	    width: 24px;
	    height: 17px;
	    cursor: pointer;
	    z-index: 113;
	    text-align: center;
	}

	.navToggle span {
	    display: block;
	    position: absolute;    /* .navToggleに対して */
	    width: 24px;
	    border-bottom: solid 2px #231815;
	    -webkit-transition: .35s ease-in-out;
	    -moz-transition: .35s ease-in-out;
	    transition: .35s ease-in-out;
	    left: 0;
	}

	.navToggle span:nth-child(1) {
	    top: 0px;
	}

	.navToggle span:nth-child(2) {
	    top: 6px;
	}

	.navToggle span:nth-child(3) {
	    top: 12px;
	}

	/* 最初のspanをマイナス45度に */
	.navToggle.active span:nth-child(1) {
	    top: 9px;
	    left: 0;
	    -webkit-transform: rotate(-45deg);
	    -moz-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	}

	/* 2番目と3番目のspanを45度に */
	.navToggle.active span:nth-child(2),
	.navToggle.active span:nth-child(3) {
	    top: 9px;
	    -webkit-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    transform: rotate(45deg);
	}

	#header-area p#logo{
		width: 28%;
		margin: 0 auto;
		padding-top: 0;
	    text-align: center;
	    float: none;
	    position: relative;
    	z-index: 114;
	}

	#header-area p#logo img{
		width: 100%;
	}
	#contents-area {
		width: 92%;
	    position: relative;
	    top: 0px;
	    left: 0px;
	    margin: 0 4%;
	}
	#contact {
	    position: relative;
	    width: 100%;
	    margin: 0px auto 0px auto;
	    padding: 0px 0px 0px 0px;
	}
	#contact h1 {
	    width: 100%;
	    margin: 0px auto 0px auto;
	}
	#contact h1 img{
		width: 39%;
		height: auto;
	}
	#contact .box1{
		padding: 6% 4%;
		background-image: none;
		background: #fff;
		width: 100%;
	}
	#contact .box1-top{
		width: 100%;
		background-image: none;
		padding: 0;
		margin: 5% 0;
	}
	#contact .box1-bottom{
		width: 100%;
	}
	#contact .box1 dl {
	    padding-top: 5%;
	}
	#contact .box1 dt {
	    font-size: 1.05em;
	    width: 100%;
	    padding-top: 2px;
	    float: none;
	    display: block;
	    margin-bottom: 2%;
	}
	#contact .box1 dd {
	    margin-left: 0;
	}
	#contact .box1 dd input{
		padding: 4%;
	}
	#contact .box1 dd textarea{
		height: 40px;
	}
	#contact .box1 dd input,
	#contact .box1 dd textarea,
	#contact .box1 dd .textbox{
		border-radius: 4px;
	}
	#contact .box1 dd input.w324,
	#contact .box1 dd input.w150,
	#contact .box1 dd textarea,
	#contact .box1 dd .textbox {
	    width: 100%;
	}
	#contact .box1 dd label.agree,
	#contact .box1 dd .bt{
		text-align: center;
	}
	#contact .box1 dd .bt input{
		float: none;
	}
	#contact .box1 dd h2{
		display: block;
		width: 100%;
		margin-left: 23px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	#contact .box1 dd #sub2 h2{
		width: 100%;
		padding-top: 10px;
		margin-left: 23px;
	}
	#contact .box1 dd #sub1 .box,
	#contact .box1 dd #sub2 .box{
		margin-left: 23px;
		padding-bottom: 20px;
	}
	#contact .box1 dd #sub1 .box li,
	#contact .box1 dd #sub2 .box li{
		word-break: break-all;
	}
	#contact .box1 dd #sub2 .box li label{
		word-break: break-all;
	}
	#contact .box1 dd ul li ul li.spindent span{
		padding-left:1.8em;
	}
	#contact .box1 dd ul li ul{
		padding-top: 10px;
	}
	#footer-area {
	    margin: 0px 4%;
	    padding: 0px 0px 27px 0px;
	}
	#footer-area address {
	    width: 100%;
	    padding-top: 47px;
	    text-align: center;
	    float: none;
	}
	.sp_on{
		display: block;
	}
	.pc_on{
		display: none;
	}
}


/* Works Index */
@media screen and (max-width: 1000px) {
	#works .resize-list li {
	    position: relative;
	    top: 0px;
	    left: 0px;
	    width: 100% !important;
	    height: auto !important;
	    float: none;
	}
	#works .resize-list li a{
		background-color: inherit;
	}
	#works .resize-list li a:hover{
		background-color: inherit;
	}
	#works .resize-list li a .name{
		position: relative;
		top: inherit;
		left: inherit;
		color: #000;
		filter: alpha(opacity=1);
    	-moz-opacity: 1;
    	opacity: 1;
	}
	#works .resize-list li a .name p{
		text-align: center;
		padding: 5px 0px;
		margin-bottom: 10px;
		font-size: 1.5em;
	}
	#works .resize-list li a .name .cate{
		display: none;
	}
}

.img-view-box-btnwrap{
	position: relative;
}

#img-view-close{
	top: -30px !important;
	right: 0px !important;
}

#img-view-left{
	top: calc(50% - 22px) !important;
    left: -34px !important;
}

#img-view-right{
	top: calc(50% - 22px) !important;
    right: -34px !important;
}

/* Works Cate Index */
@media screen and (max-width: 1000px) {
	.mt40 {
		margin-top: 20px !important;
	}
	#works .resize-list .text{
		font-size: 1.3rem;
	}
	#works .resize-list li a .bg {
		padding: 24px;
		min-height: 345px;
	}
	#works .resize-list li a .box{
		margin-bottom: 20px;
	}
	#works .resize-list li a .box h2 {
		padding-top: 0;
		margin: 0 auto 0px auto;
		padding: 0;
		font-size: 1.3rem;
	}
	#works .resize-list li a .box p.address {
	    padding-top: 15px;
	    font-size: 1.3rem;
	}
	#works .pre,
	#works .next{
		width: 30px;
	    position: absolute;
	    top: auto;
	}
	#works .pre a,
	#works .next a{
		position: absolute;
	}
	#works .pre img,
	#works .next img{
		max-width: 100%;
		height: auto;
	}
	#works .sp-link-all{
		font-size: 1.5rem;
		position: absolute;
		left: 50%;
		top: 5px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		display: block;
		margin: auto;
	}
	#works .sp-link-all a{
		text-decoration: none;
	}
	.works_box{
		width: 100%;
		position: absolute;
		bottom: -20px;
		display: block;
		background-color: #000;
	}
	#footer-area.sp_sub_foot {
	    margin: 20% 4% 0;
	}
	#img-view-box{
		width: 92% !important;
		position: absolute;
   		top: 14% !important;
   		left: 4% !important;
	}
	#img-view-box .box{
		width: 100% !important;
		height: auto !important;
	}
	#img-view-box .box .info-box{
		width: 100% !important;
		padding: 40px 20px;
	}
	#img-view-close{
		top: -30px !important;
		right: 15px !important;
	}
	#img-view-box-btnwrap{
		width: 100%;
		position: relative;
		margin-top: 20px;
	}
	#img-view-left,
	#img-view-right{
		width: 14px;
		height: 24px;
		position: absolute;
		top: 0 !important;
	}
	#img-view-left{
		left: 0 !important;
	}
	#img-view-right{
		right: 0 !important;
	}
	#img-view-left img,
	#img-view-right img{
		max-width: 100%;
		height: auto;
	}
	#img-view-left a,
	#img-view-right a{
		position: absolute;
	}
	#img-view-box .box img {
		height: auto;
	    max-height: 224px;
	}
}

/* Works Archive */
@media screen and (max-width: 1000px) {
	#works .archives {
		width: auto;
		margin: 0px auto 0px auto;
		border-top: none;
		padding: 0px 0px 50px 0px;
	}
	#works h2 {
	    width: auto;
	    padding: 0px 0px 20px 0px;
	}
	#works .archives p.left {
		font-size: 1.9rem;
		width: auto;
		padding: 0;
		float: none;
		margin-bottom: 5px;
	}
	#works .archives ul {
	    width: auto;
	    float: none;
	}
	#works .archives ul li {
	    padding: 15px 0px 15px 20px;
	    border-bottom: 1px solid #AAAAAA;
	}
	#works .archives ul li:first-child {
	    border-top: 1px solid #AAAAAA;
	}
	#works .archives ul li .name {
		position: relative;
		left: -20px;
		font-size: 1.5rem;
		width: auto;
		margin: 0 0 5px;
		float: none;
	}
	#works .archives ul li .cate {
		font-size: 1.3rem;
		width: auto;
		margin: 0 0 0px 0px;
		float: none;
	}
	#works .archives ul li .info {
		font-size: 1.3rem;
		width: auto;
		margin: 5px 0;
		float: none;
	}
	#works .archives ul li .meter {
		font-size: 1.3rem;
		width: auto;
		padding-top: 0;
		text-align: left;
		float: none;
	}
}

/* Works Map */
@media screen and (max-width: 1000px) {
	#projects {
	    position: relative;
	    width: auto;
	    margin: 0px auto 0px auto;
	    padding: 0px 0px 0px 0px;
	}
	#projects img{
		max-width: 100%;
		height: auto;
	}
	#projects ol {
		font-size: 1.3rem;
		float: none;
		width: auto;
	}
	#projects ol li {
	    margin: 10px 0px 0px 26px;
	}
	#projects ol li:nth-child(10n) {
	    margin-bottom: 0;
	}
}

/* News */
@media screen and (max-width: 1000px) {
	#news {
	    width: auto;
	}
	#news h1 {
	    width: 38%;
	    margin: 0px 0 0px 0;
	    padding-bottom: 16px;
	    text-align: left;
	}
	#news h1 img{
		max-width: 100%;
		height: auto;
	}
	#news .box1-top {
	    width: auto;
	    margin: 11px 0px 0px auto;
	    padding-top: 17px;
	    background: #fff;
	}
	#news .box1-bottom {
	    width: auto;
	    padding-bottom: 12px;
	    background: none;
	}
	#news .box1 {
	    width: /**/100%;
	}
	#news .box1 {
	    width: auto;
	    padding: 20px 15px;
	    background: #fff;
	    box-sizing: border-box;
	    font-size: 1.3rem;
	}
	#news .box1 .left {
	    width: auto;
	    float: none;
	}
	#news .box1 .right {
	    margin-left: 0;
	}
	#news .box1 .left .body {
	    padding-top: 20px;
	}
	#news .box1 img{
		max-width: 100%;
		height: auto;
		display: block;
		margin-right: auto;
		margin-left: auto;
	}
	#news .paging {
		font-size: 1.3rem;
	}
	#news .paging img{
		width: 12px;
		height: 24px;
	}
	#news .prenext{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	#news .prenext .prev{
		width: 45%;
	}
	#news .prenext .next{
		width: 45%;
	}
	#news .prenext .next a{
		padding: 0 30px 0px 0px;
		background-size: 25px auto;
		background-position: right middle;
	}
	#news .prenext .prev a{
		padding: 0 0 0px 30px;
		background-size: 25px auto;
		background-position: left middle;
	}
}

/* Service */
@media screen and (max-width: 1000px) {
	#service-n {
	    width: auto;
	}
	#service-n h1 {
	    width: 38%;
	    margin: 0;
	}
	#service-n h1 img{
		max-width: 100%;
		height: auto;
	}
	#service-n .box {
	    padding-bottom: 30px;
	    width: auto;
	    margin: 0px auto;
	}
	#service-n h2 {
	    font-size: 1.3rem;
	    margin-top: 25px;
	    padding: 5px 10px;
	}
	#service-n .box p {
	    margin-top: 20px;
	    font-size: 1.3rem;
	    line-height: 1.6;
	}
	#service-n ul {
	    margin-right: 0;
	    margin-top: 20px;
	    display: block;
	}
	#service-n .point {
	    padding: 15px;
	    float: none;
	    width: auto;
	    margin-right: 0;
	}
	#service-n .point+.point {
		margin-top: 25px;
	}
	#service-n .point h3{
		text-align: center;
	}
	#service-n .img{
	    width: 82%;
	    max-width: 280px;
	    margin: auto;
	}
	#service-n .img img{
		max-width: 100%;
		height: autp;
	}
	#service-n p.text2 {
	    padding: 15px;
	}
}




/* organization */

#organization .box1_2,
#organization .box2_2{
	display: none;
}

@media screen and (max-width: 1000px) {
	#organization .breadcrumb{
		display: flex;
		justify-content: flex-start;
		margin-bottom: 25px;
	}
	#organization .breadcrumb li:not(:last-of-type){
		margin-right: 15px;
	}
	#organization .breadcrumb li a{
		font-size: 13px;
		text-decoration: none;
	}
	#organization .breadcrumb li.active a{
		color: #AFA06B;
	}
	#organization{
		width: 100%;
	}
	#organization h1 {
	    width: 39.71%;
	    margin: 0;
	}
	#organization h1 img{
		max-width: 100%;
		height: auto;
	}
	#organization .box1_2{
		display: block;
		margin-bottom: 5px;
	}
	#organization .box1{
		width: 100%;
		height: auto;
		background: none;
		margin-bottom: 35px;
	}
	#organization .box1 ul{
		margin-bottom: 35px;
	}
	#organization .box1 ul li.bt1,
	#organization .box1 ul li.bt2,
	#organization .box1 ul li.bt3,
	#organization .box1 ul li.bt4,
	#organization .box1 ul li.bt5,
	#organization .box1 ul li.bt6,
	#organization .box1 ul li.bt7,
	#organization .box1 ul li.bt8,
	#organization .box1 ul li.bt9{
		position: relative;
		top: inherit;
		left: inherit;
		display: block;
	}
	#organization .box1 .st1,
	#organization .box1 .st2,
	#organization .box1 .st3,
	#organization .box1 .st4,
	#organization .box1 .st5,
	#organization .box1 .st6{
		position: relative;
		top: inherit;
		left: inherit;
	}
	#organization .box1 .st1 h2,
	#organization .box1 .st2 h2,
	#organization .box1 .st3 h2,
	#organization .box1 .st4 h2,
	#organization .box1 .st5 h2,
	#organization .box1 .st6 h2{
		float: none;
		display: block;
	}
	#organization .box1 .st1 p,
	#organization .box1 .st2 p,
	#organization .box1 .st3 p,
	#organization .box1 .st4 p,
	#organization .box1 .st5 p,
	#organization .box1 .st6 p{
		margin-left: 0;
	}
	#organization .box1 .st1 p.adj{
		margin-left: 0;
		margin-top: 8px;
		margin-bottom: 4px;
	}
	#organization .box2{
		display: none;
	}
	#organization .box2_2{
		display: block;
	}
	#organization .sp_on,
	#organization .box2_2 img{
		width: 100%;
	}
}

@media screen and (max-width: 1000px) {
	#company .breadcrumb{
		display: flex;
		justify-content: flex-start;
		margin-bottom: 25px;
	}
	#company .breadcrumb li:not(:last-of-type){
		margin-right: 15px;
	}
	#company .breadcrumb li a{
		font-size: 13px;
		text-decoration: none;
	}
	#company .breadcrumb li.active a{
		color: #AFA06B;
	}
	#company{
		width: 100%;
	}
	#company h1{
		width: 100%;
	}
	#company h1 img{
		width: 48%;
		height: auto;
	}
	#company .box1-top{
		    width: 100%;
		    margin: 0 0px 0px auto;
		    padding-top: 18px;
		    background: none;
	}
	#company .box1-bottom,
	#company .box1{
		width: 100%;
	}
	#company .box1 .left{
		width: 100%;
		float: none;
	}
	#company .box1 .right {
	    width: 100%;
	    padding-top: 15px;
	    line-height: 1.7em;
	    float: none;
	}
	#company #m1,
	#company #m2,
	#company #m3,
	#company #m4,
	#company #m5,
	#company #m6,
	#company #m7,
	#company #m8{
    	display: block;
    	height: 0;
	    padding: 0;
	    overflow: hidden;
	    transition: 0.8s;
	}
	#company #m1.active,
	#company #m2.active,
	#company #m3.active,
	#company #m4.active,
	#company #m5.active,
	#company #m6.active,
	#company #m7.active,
	#company #m8.active{
		height: auto;
	    opacity: 1;
	}
	#company #submenu{
		display: none;
	}
	#company .box1{
		background-image: none;
		background: #fff;
		padding: 0 15px;
		font-size: 13px;
	}
	#company .box1 .map{
		width: 100%;
		display: none;
	}
	#company .box1 .mapgif {
		margin-top:20px;
		width: 100%;
	}
	#company .box1 .mapgif img{
		width: 100%;
	}
	#company .box1 .googlemap{
		margin-bottom: 40px;
	}
	
	#company .m1.sp_on,
	#company .m2.sp_on,
	#company .m3.sp_on,
	#company .m4.sp_on,
	#company .m5.sp_on,
	#company .m6.sp_on,
	#company .m7.sp_on,
	#company .m8.sp_on{
		position: relative;
		padding: 10px 0;
		font-size: 15px;
		display: block;
	}
	#company .m1.sp_on::after,
	#company .m2.sp_on::after,
	#company .m3.sp_on::after,
	#company .m4.sp_on::after,
	#company .m5.sp_on::after,
	#company .m6.sp_on::after,
	#company .m7.sp_on::after,
	#company .m8.sp_on::after{
		content: "";
		position: absolute;
		top: 14px;
		right: 0;
		width: 8px;
		height: 8px;
		border: 1px solid;
		border-color: #000000 #000000 transparent transparent;
		transform: rotate(45deg);
		transition: all 0.3s;
	}
	#company .m1.sp_on.active,
	#company .m2.sp_on.active,
	#company .m3.sp_on.active,
	#company .m4.sp_on.active,
	#company .m5.sp_on.active,
	#company .m6.sp_on.active,
	#company .m7.sp_on.active,
	#company .m8.sp_on.active{
		color: #AFA06B;
	}
	#company .m1.sp_on.active::after,
	#company .m2.sp_on.active::after,
	#company .m3.sp_on.active::after,
	#company .m4.sp_on.active::after,
	#company .m5.sp_on.active::after,
	#company .m6.sp_on.active::after,
	#company .m7.sp_on.active::after,
	#company .m8.sp_on.active::after{
		top: 12px;
		transform: rotate(135deg);
	}
	#company .sp_on{
		max-width: 100%;
	}
	#company .box1 h2{
		display: none;
	}
	#company .box1 .left dl{
		margin-top: 10px;
	}
}

@media screen and (max-width: 1000px) {
	#philosophy .breadcrumb{
		display: flex;
		justify-content: flex-start;
		margin-bottom: 25px;
	}
	#philosophy .breadcrumb li:not(:last-of-type){
		margin-right: 15px;
	}
	#philosophy .breadcrumb li a{
		font-size: 13px;
		text-decoration: none;
	}
	#philosophy .breadcrumb li.active a{
		color: #AFA06B;
	}
	#philosophy{
		width: 100%;
	}
	#philosophy h1{
		width: 39.71%;
		margin: 0;
	}
	#philosophy h1 img {
	    max-width: 100%;
	    height: auto;
	}
	#philosophy .st1{
		width: 100%;
		margin: 15px 0 0 0;
	}
	#philosophy .st1 h2,
	#philosophy .st2 h2,
	#philosophy .st3 h2{
		float: none;
		width: 100%;
		padding-top: 0;
		padding-bottom: 0;
		margin: 0;
		text-align: left;
	}
	#philosophy .st1 .box1-top,
	#philosophy .st2 .box2-top {
	    width: 100%;
	    padding-top: 20px;
	    background: none;
	    margin: 0;
	}
	#philosophy .st1 .bg2,
	#philosophy .st2 .bg2,
	#philosophy .st3 .bg2{
		background: #D9CD9B !important;
	}
	#philosophy .st1 .box1,
	#philosophy .st2 .box2,
	#philosophy .st3 .bg2{
		width: 100%;
		font-size: 13px;
		padding: 15px;
	}
	#philosophy .st1 .box1-bottom,
	#philosophy .st2 .box2-bottom,
	#philosophy .st3 .box3-bottom{
		width: 100%;
		background: none;
	}
	#philosophy .st2,
	#philosophy .st3{
		width: 100%;
		margin-top: 20px;
	}
	#philosophy .st3{
		top: inherit;
		margin-bottom: 0;
	}
	#philosophy .st2 .box2-top,
	#philosophy .st3 .box3-top{
		width: 100%;
		padding-top: 15px;
	}
	#philosophy .sp_on{
		max-width: 100%;
	}
}

@media screen and (max-width: 1000px) {
	#vision .breadcrumb{
		display: flex;
		justify-content: flex-start;
		margin-bottom: 25px;
	}
	#vision .breadcrumb li:not(:last-of-type){
		margin-right: 15px;
	}
	#vision .breadcrumb li a{
		font-size: 13px;
		text-decoration: none;
	}
	#vision .breadcrumb li.active a{
		color: #AFA06B;
	}
	#vision{
		width: 100%;
	}
	#vision h1{
		width: 39.71%;
		margin: 0;
	}
	#vision h1 img {
	    max-width: 100%;
	    height: auto;
	}
	#vision .box1{
		width: 100%;
		margin-top: 20px;
	}
	#vision .box1 img{
		max-width: 100%;
	}
	#vision .box2{
		width: 100%;
		float: none;
	}
	#vision .box2 img{
		max-width: 100%;
	}
	#vision .box3{
		display: none;
	}
	#vision .box4{
		width: 100%;
		height: auto;
	}
	#vision .box4 img{
		max-width: 100%;
	}
	#vision .box4 h2{
		position: relative;
		width: 100%;
		height: auto;
	}
}

@media screen and (max-width: 1000px) {
	.foot_navi{
		position: relative;
		display: block;
		margin-top: 20px;
		z-index: 101;
	}
	#header-area div#navi #lang2,
	.foot_navi .foot_lang2 {
	    position: relative;
	    top: 0;
	    right: 0;
	    display: flex;
	    justify-content: center;
	    padding-top: 6%;
	    padding-bottom: 6%;
	}
	.foot_navi .foot_lang2{
		padding-top: 8%;
	}
	.foot_navi .foot_lang2 li:not(:last-of-type){
		margin-right: 20px;
	}
	.foot_navi .menu li a {
	    display: block;
	    color: #000;
	    text-align: center;
	    padding: 0.5em 0;
	}
}