@charset "utf-8";
/* CSS Document */
@media screen and (max-width:500px) {
.spmaxw80 {max-width: 80%;}
.spmgn-t10 {margin-top: 10px!important;}
.spmgn-t20 {margin-top: 20px!important;}
.spmgn-b16 {margin-bottom: 16px;}
.spmgn-b10 {margin-bottom: 10px;}
.sppdg-b0 {padding-bottom: 0!important;}
.sppdg-lr16 {padding: 0 16px;}
.spblock {display: block!important;}
#nav-drawer { position: relative; position: fixed; display: flex; background-color: #1D1D1D; top: 0; left: 0; z-index: 7000; height: 60px; width: 100%; right: 0; align-items: center;}
#nav-drawer .header_logo {
width: 60%;
margin-left: 10px;
}
/*チェックボックス非表示*/
.nav-none { display:none; }

/*アイコンスペース*/
#nav-open {
display: inline-block;
width: 25px;
height: 25px;
vertical-align: middle;
margin: auto 0;
position: absolute;
top: 7px;
bottom: 0;
right: 10px;
}

/*openアイコン*/
#nav-open span,
#nav-open span:before,
#nav-open span:after {
content: '';
height: 3px;
width: 25px;
border-radius: 3px;
background: #1C6DAF;
display: block;
cursor: pointer;
position: absolute;
}
#nav-open span:before { bottom: -8px; }
#nav-open span:after { bottom: -16px; }

/*closeアイコン*/
#nav-close {
display: inline-block;
width: 25px;
height: 25px;
vertical-align: middle;
margin: auto 0;
position: absolute;
top: 7px;
bottom: 0;
right: 10px;
}
#nav-close span {
content: '';
display: none;
opacity: 0;
transition: .3s ease-in-out;
display: block;
cursor: pointer;
position: absolute;
z-index: 9999;
}
#nav-close span:after,
#nav-close span:before {
content: '';
display: none;    
height: 3px;
width: 25px;
border-radius: 3px;
background: #1C6DAF;
opacity: 0;
transition: 1s ease-in-out;
cursor: pointer;
position: absolute;
z-index: 9999;
}
#nav-close span:after {
transform: rotate(45deg);
bottom: -8px;
}
#nav-close span:before {
transform: rotate(-45deg);
bottom: -8px;
}

/*content*/
#sp_nav {
overflow: auto;
width: 100%;
height: 100%;
background: url(img/index/box04_bg01.jpg)top center repeat;
transition: 0.3s ease-in-out;
-webkit-transform: translateX(105%);
transform: translateX(105%);
position: fixed;
top: 0;
left: 0;
z-index: 8888;
}

/*チェックで表示*/
#nav-input:checked ~ #nav-close,
#nav-input:checked ~ #nav-close span,
#nav-input:checked ~ #nav-close span:after,
#nav-input:checked ~ #nav-close span:before {
display: block;
opacity: 1;
}
#nav-input:checked ~ #sp_nav {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}

#nav-drawer #sp_nav ul {
width: 100%;
margin: 10% 0 0;
}
#nav-drawer #sp_nav ul li {
color: #000;
font-weight: bold;
font-size: 3.5vw;
width: 80%;
border-bottom: 1px dotted #000; 
margin: 0 auto 10px;
padding-bottom: 10px;
text-align: center;
}
#nav-drawer #sp_nav ul li.header_logo {
background: url(img/header/logo.png) top center no-repeat;
background-size: contain;
max-width: 195px;
margin: 0 auto 2em;
padding-bottom: 0; 
border-bottom: none; 
}
#nav-drawer #sp_nav ul li.header_logo a {
opacity: 0;
padding-bottom: 70px;
}
.sp_main {
margin-top: 60px;
}
	
/*index*/
	#index .box01 {padding: 20px 16px; box-sizing: border-box; border-top: 2px solid #fff; border-bottom: 2px solid #fff;}
	#index .box01 .con {display: block;}
	#index .box01 .logo {margin: 0 auto;}
	#index .box01 .right {margin-left: 0; font-size: 3.5vw; text-align: center;}
	#index .box01 span {font-size: 4vw;}
	#index .box01 h2 {font-size: 8vw; text-align: center; margin-bottom: 0;}
	#index .box015 {padding: 30px 16px; display: block; background-size: cover;}
	#index .box015 a:nth-of-type(n + 2) {margin: 20px auto 0;}
	#index .box02 {padding: 0; background: none;}
	#index .box02 .con01 {background: url(img/sp/index/box02_bg01.jpg)top right no-repeat; padding: 20px 16px;}
	#index .box02 .con02 {background: url(img/sp/index/box02_bg02.jpg)top right no-repeat; padding: 20px 16px;}
	#index .box02 .inner {display: block;}
	#index .box02 .inner h2 {max-width: 60%; margin: 0 auto;}
	#index .box02 .title02 {margin-top: 0}
	#index .box03 {padding: 20px 16px;}
	#index .box03 h2 {font-size: 7vw;}
	#index .box03 .btn {margin: 0 auto; position: relative; top: inherit; right: inherit;}
	#index .work_item {max-width: inherit; min-width: 100%;}
	#index .box04 {padding-bottom: 20px;}
	#index .box04 .bnr_area {padding: 20px 16px;}
	#index .box04 .inner {margin-top: 20px; display: block; padding: 0 16px;}
	#index .box04 .con {padding: 10px; line-height: 1.6;}
	#index .box04 .con .logo {margin-bottom: 10px;}
	#index .box04 .con .btn {margin-top: 10px;}
	#index .box04 .video_area {display: none;}
	#index .box04 video {height: inherit; width: 100%;}
	#index .box04 .smoke {height: 98.9%;}
	#index .box04 ul li {margin-bottom: 0; margin-top: 16px;}
	#index .box04 ul li img {width: 100%;}
	#index .box05 {padding: 20px 16px;}
	#index .box05 .inner {display: block;}
	#index .box05 .blog_item_area {max-width: inherit; min-width: inherit; margin-bottom: 20px;}
	#index .box05 .btn {margin: 0 auto;}
	#index .box05 ul {display: block; margin: 0 auto;}
	#index .box05 ul li {margin: 16px auto 0; width: 100%;}
	#index .box06 {padding: 20px 16px;}
	#index .box06 .inner {display: block; padding: 10px;}
	#index .box06 .inner .center {display: none;}
	#index .box06 .tel {margin: 10px auto;}
	#index .box07 {padding: 20px 16px; background: url(img/index/box03_bg.jpg)center center repeat-y; margin-bottom: -20px;}
	#index .box07 h2 {font-size: 5.5vw; text-align: center; margin-bottom: 10px;}
	#index .box07 p {max-width: 100%;}
	#index .partner {padding: 20px 16px; border-top: 2px solid #1b6daf; border-bottom: 2px solid #1b6daf;}
	#index .partner .big {font-size: 7vw;}
	#index .partner .bdr {width: 20%; margin: 16px auto 20px;}
	
	
	
footer .inbox {display: none;}
footer .over {display: none;}
.copyright_area {display: none;}
footer {padding: 0;}
.stoker02 li {width: 50%;}
.stoker02 {display: flex; justify-content: space-between;}
#pop_banner {padding: 0; z-index: 15; background: none; width: 100%; border: none; bottom: 0;} 
#contact_banner {display: block; background-color: #fff; padding: 16px; position: relative; z-index: 50;}
#contact_banner .logo {margin: 0 auto;}
#contact_banner .big {font-size: 3.8vw; text-align: center; margin: 10px 0;}
	#contact_banner .inner {display: block;}
	#contact_banner .inner p {display: none;}
	#contact_banner .tel {margin: 0 auto 10px; width: 80%;}
	#contact_banner .mail {width: 80%; margin: auto;}
	#contact_banner .min {font-size: 3vw;}

.pan {
display: none;
}
.page_top_img {
margin-top: 60px;
}
.page_title {font-size: 16px;}
	#business .box01, #business .box02, #business .box03 {padding: 20px 16px;}
	#business .box01 .inner, #business .box02 .inner {display: block;}
	#business .box01 .inner .img01 {margin: 0 auto 20px;}
	#business .box01 .img02 {margin: 16px 0;}
	#business .box01 li {display: block; padding: 10px; margin-top: 16px;}
	#business .box01 li img,#business .box02 .inner img,#business .box03 .inner img {margin-right: 0; width: 100%;}
	#business .box01 li h3 {margin-bottom: 10px;}
	#business .box02 .inner img,#business .box03 .inner img {margin-bottom: 10px;}
	#business .box02 .con {padding: 10px; margin-top: 16px; font-size: 3vw;}
	#business .box02 .con h3 {font-size: 3.5vw; margin-bottom: 10px;}
	#business .box02 .con .title {margin-bottom: 10px;}
	#business .box02 .con ul li {max-width: 48%; font-size: 3vw;}
	#business .box02 .con li:nth-child(3) {margin-top: 10px;}
	#business .box03 .inner {display: block;}
	#business .box03 ul {display: block; margin-top: 0;}
	#business .box03 ul li {padding: 10px; margin: 10px auto 0; max-width: 100%;}
	#business .box03 ul li p {margin-bottom: 5px;}
	#business .box03 ul li img {width: 100%;}
	#business .box03 .bnr {padding: 10px; font-size: 4.5vw;}
	#business .box03 .bnr span {font-size: 3.5vw;}
	#general .box01, #general .box02, #general .box03 {padding: 20px 16px;}
	#general .title_area {display: block;}
	#general .box01, #general .box02, #general .box03 {padding: 20px 16px;}
	#general .box01 h2, #general .box02 h2, #general .box03 h2 {font-size: 6.8vw; text-align: center; margin: 0;}
	#general .box01 .inner {display: block;}
	#general .box01 .inner .img01 {margin: 16px auto;}
	#general .box01 .zin {margin-top: 0;}
	#general .box01 .con {font-size: 3.7vw; padding: 10px;}
	#general .inner02 {display: block; padding: 10px;}
	#general .box02 li {font-size: 4vw;}
	#general .box02 .con {padding: 10px;}
	#general .box02 .zin {position: relative; top: 0; right: 0; margin: 0 0 20px auto;}
	#general .inner02 .img01 {margin-right: 0; width: 100%;}
	#general .under {padding: 10px;}
	#general .under .title {font-size: 4vw;}
	#general .under .sub_title {margin: 10px 0; font-size: 4vw;}
	#general .inner03 {display: block;}
	#general .inner03 .box {max-width: inherit;}
	#general .inner03 .box img {width: 100%;}
	#general .inner03 .box .txt_area {height: auto;}
	#general .box03 ul {margin-top: 10px;}
	#general .box03 .txt_area {padding: 10px;}
	#general .box03 .inner .area {font-size: 3vw;}
	#recruit table {font-size: 4vw;}
	#recruit table th {display: block; width: auto; text-align: left; padding: 16px; border-right: none;}
	#recruit table td {display: block; width: auto; padding: 16px;}
	#about .con01 {padding: 20px 16px; background-size: cover; font-size: 3.1vw; line-height: 2; text-align: center;}
	#about .con01 .inner {padding: 10px; display: block;}
	#about .box01 {padding-bottom: 0;}
	#about .box01 h2 {padding: 16px 0; font-size: 6vw; line-height: 1.2;}
	#about .box01 .inner {display: block; margin: 16px 0 0; padding: 0 16px; font-size: 3.2vw; text-align: center;}
	#about .box01 .inner h3 {font-size: 4.5vw; text-align: center; margin-bottom: 10px;}
	#company .con {display: block; padding: 16px;}
	#company .con .icon {width: 25%; top: 0; bottom: 0; margin: auto;}
	#company table {font-size: 16px;}
	#company table th {display: block; width: auto; text-align: left; padding: 16px; border-right: none;}
	#company table td {display: block; width: auto; padding: 16px;}
	#company .map_title {font-size: 4.5vw; padding: 12px; padding-left: 16px;}
	
	
	#case #gallery_arcive_list,#gallery #gallery_arcive_list {display: block; padding: 16px; padding-bottom: 0.02px;}
	#gallery .gallery_arcive_item {margin-right: 0; padding: 16px;}
	#case .gallery_arcive_img,#gallery .gallery_arcive_img {max-width: 100%;}
	#case .gallery_arcive_img img,#gallery .gallery_arcive_img img {max-width: 100%; min-width: inherit; width: 100%; max-height: inherit; min-height: inherit;}
	#case .gallery_arcive_img {max-height: 200px;}
	#case .gallery_txt {max-width: inherit; text-align: center;}
	.paging {padding-bottom: 0;}
	#case_single .work_img {display: block;}
	#case_single .work_img .before, #case_single .work_img .after {max-width: 100%;}
	#case_single .work_img .before {margin-bottom: 16px;}
	#case_single .item01 {padding: 16px;}
	#case_single .gallery_box img,.gallery_box img {max-width: 100%; max-height: inherit; min-height: inherit; width: 100%; height: 250px;}
	#case_single .gallery_area,.gallery_area {padding: 16px; padding-bottom: 0.02px;}
	#staff h3 {font-size: 6.5vw; text-align: center;}
	#staff .position {text-align: center; font-size: 5vw;}
	#blog .box01,#blog_single .box01 {padding: 10px; border: 10px solid;}
	#form .box01 .btn {max-width: 70%;}
	#form .box03 {padding: 0 16px;}
	#form .box03 ul {font-size: 12px;}
	#form .box03 table {max-width: -webkit-fill-available;}
	#form .box03 table input,#form .box03 table textarea {font-size: 16px; padding: 5px;}
	#form .box03 table th {display: block;
    width: auto;
    text-align: left;
    padding: 10px;
    min-width: 0;}
	#form .box03 table td {    display: block;
    width: auto;
    padding: 10px;}
	.mw_wp_form_input .btn input,.mw_wp_form_confirm .btn input {font-size: 18px; max-width: 70%; height: auto; line-height: 1; padding: 10px 0;}
	.mwform-checkbox-field input,.mwform-radio-field input {width: auto!important;}
	#form .codedropz-upload-inner .codedropz-btn-wrap a.cd-upload-btn {padding: 20px 0; font-size: 16px;}
	#form .codedropz-upload-container {padding: 0;}
	#form .codedropz-upload-inner h3 {display: none;}
	#form .codedropz-upload-inner span {display: none;}
	#staff .gallery_arcive_item {display: block; padding: 16px; width: 100%; margin: 0 16px;}
	#staff .gallery_arcive_img {max-width: 100%; min-width: inherit;}
	#staff .gallery_arcive_img img {object-position: 0 0;}
	#staff .gallery_txt {max-width: 100%; padding: 0; margin-top: 16px; text-align: justify;}
	#staff .link_btn {font-size: 3.5vw;}
	
	/*recruit*/
	.swiper-slide {padding-bottom: 0; margin-top: 130px;}
	.main_box .txt_area {width: 100%;}
	.main_box .swiper-wrapper {position: relative;}
	#recruit02 {z-index: inherit;}
	#recruit02 .box01 {margin-top: 0;}
	#recruit02 .box01 .logo {width: 100%; margin-top: 0;}
	#recruit02 .box02 .inner {display: block;}
	#recruit02 .news_area {display: none;}
	#recruit02 .box02 {padding: 0; margin-bottom: 0;}
	#recruit02 .box02 .img {width: 100%;}
	#recruit02 .box02 .icon {display: none;}
	#recruit02 .box02 .txt_area {padding: 16px; font-size: 3vw; line-height: 2; width: 100%; margin-left: 0; box-sizing: border-box;}
	#recruit02 .box02 h2 {font-size: 4.5vw; margin-bottom: 10px; margin-left: 0; text-align: center;}
	#recruit02 .box02 .btn {width: 100%; margin: 10px auto; font-size: 4vw;}
	#recruit02 .box03 {padding: 0;}
	#recruit02 .box03 h2 {padding: 20px; margin: 0 auto;}
	#recruit02 .box03 h2 img {width: 100%; padding-left: 0;}
	#recruit02 .box03 li {margin-top: 16px;}
	#recruit02 .box03 li:nth-child(3),#recruit02 .box03 li:nth-child(4) {margin-top: 16px;}
	#recruit02 .box03 li:nth-child(1) {margin-top: 0;}
	#recruit02 .box03 .bg {display: none;}
	#recruit02 .box05 {padding: 20px 16px;}
	#recruit02 .box05 .title_area {display: block; margin-bottom: 10px; font-size: 4.5vw; text-align: center;}
	#recruit02 .box05 h2 {font-size: 7vw; margin: auto; line-height: 1;}
	#recruit02 .tab {font-size: 4vw; padding: 10px 0;}
	.panel {padding: 16px 10px;}
	.accordion4 li {padding: 20px 0; }
	#recruit02 .box05 .title {font-size: 4vw;}
	.accordion4 .inner {margin-top: 10px;}
	.accordion4 p{font-size: 3.5vw;}
	#recruit02 .box05 .big {font-size: 3.5vw; padding: 10px; margin-bottom: 10px;}
	#recruit02 .box05 table {border: 1px solid #dcdcdc;}
	#recruit02 .box05 th, #recruit02 .box05 td {font-size: 3vw; padding: 10px; border-bottom: 1px solid #dcdcdc;}
	#recruit02 .box05 th {border-right: 1px solid #dcdcdc; width: 30%;}
	#recruit02 .box06 {padding: 0; position: relative; z-index: 50;}
	#recruit02 .box06 .box {padding: 16px; position: relative; z-index: 10; background-color: #fff;}
	#recruit02 .box06 .inner {display: block;}
	#recruit02 .box06 .tel_txt {width: 70%; margin: 10px auto 0;}
	#recruit02 .box06 .btn {margin-top: 10px;}
	#recruit02 .box06 .tel {margin-right: 0; width: 70%; margin: auto;}
	
}