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

@media screen and (max-width:768px) {
	.inbox {padding: 0 16px; box-sizing: border-box;}
	.spnf {display: block!important;}
	#index .box01 .title01 {
		height: auto; width: 100%; padding: 20px 0;
	}
	#index .box01 {padding-bottom: 20px;}
	#index .box01 ul li {border: none; width: 47.5%;}
	.inbox14 {box-sizing:border-box; padding: 0 16px;}
	#index .box02 {padding-bottom:20px;}
	#index .box02 ul {
		display: block;
		margin-top: 50px;
		min-width: inherit;
	}
	#index .box02 ul li {margin-top: 50px;}
	#index .box02 .btn {margin-top: 20px;}
	#index .box03 {padding: 20px 0;}
	#index .box03 h2:before {display: none;}
	#index .box06 {padding: 20px 0 0.2px;}
	.voice_item {width: 100%; max-width: inherit;}
	.spmgn-20 {margin: 20px 0;}
	#index .box04 {padding: 20px 0 0; min-height: inherit;}
	#index .box04_title .icon01 {display: none;}
	#index .box04 h2 {max-width: 100%; min-width: 100%;}
	#index .box04_title .icon02 {display: none;}
	.work_item {width: 100%; max-width: inherit;}
	#index .box05 {padding: 20px 0 0;}
	#index .box05 .inbox:after {display: none;}
	#index .box05 .item {width: 100%;}
	#index .box05 h2 {max-width: 100%;}
	#index .box05 .item #blog_list {padding: 0;}
	#index .box05 .btn {padding-bottom: 20px;}
	#index .box07 {padding: 20px 16px;}
	#index .box05 .item #blog_list .blog_txt_item01 {margin-left: 18px;}
	#index .box07 ul {width: 100%; margin-top: 20px;}
	#index .box07 ul li {box-sizing: border-box; width: 47.5%;}
	#index .box07 h3 {font-size: 16px;}
	#index .box08 {padding: 20px 0;}
	#index .box08 .under {display: block; padding: 5px;}
	#index .box08 .under .logo {max-width: 15%; height: 15%; margin-right: 0;}
	#index .box08 .under .item01 {max-width: 65%; height: 65%; margin-right: 0;}
	#index .box08 .under .item03 {max-width: 15%; height: 15%;}
	#index .box08 .under .item02 {max-width: 30%; height: 30%; margin-right:0;}
	#index .box08 .under .tel {max-width: 90%;}
	#index .box08 .under .mail {max-width: 90%;}
	footer .copy {margin-bottom: 0;}
	footer .footer_over {display: none;}
	#pop_banner {display: none;}
		header .pcmenu {
		display: none;
	}
	header #navi {
		min-height: 0;
	}
	#nav-drawer { position: relative; position: fixed; display: table-cell; background-color: #0e59a5; top: 0; left: 0; z-index: 7000;padding: 10px 0; width: 100%; right: 0; }
#nav-drawer .header_logo {
	width: 60%;
	min-width: 140px;
	margin: auto;
}
/*チェックボックス非表示*/
.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: #fff;
    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: #fff;
    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/box06_bg.jpg) top left 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: #fff;
	font-weight: bold;
	font-size: 18px;
	width: 80%;
	border-bottom: 2px dashed #fff; 
	margin: 0 auto 1em;
	padding-bottom: 1em;
	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;
}
	header {padding: 10px 5px;}
	header .sp-left {
		display: flex;
		margin-left: 10px;
		justify-content: space-between;
		width: 80%;
		max-width: 80%;
		align-items: center;
	}
	header .sp-left p {
		font-size: 0.6em;
		line-height: 1;
		font-weight: bold;
		align-self: flex-end;
	}
	#index .box03 #bx-wrapper {width: 100%;
	margin-left: 0;
	left: auto;}
	.bxslider li {
		max-width: 100%;
		height: auto;
		min-width: inherit;
	}
	.bx-wrapper img {max-width: 89%!important; margin: 0 auto;}
	.sidebar {display: none;}
	#index .pr_box {box-sizing: border-box; padding: 30px 16px; background-size: cover;}
	#index .pr_box .txt01 {padding: 2%;}
	#index .pr_box .txt01 span {font-size: 3.5vw;}
	#index .pr_box .txt02 {margin-bottom: 30px;}
	#index .pr_box .txt02 p {font-size: 6vw; margin: 0 3%;}
	#index .pr_box .txt02 img {width: 5%;}
	.pr_box .pr_movie {width: 100%;}
	.pr_box .play-btn {width: 15%;}
	#case .con01 {display: block;}
	#case .con01 img {max-width: 100%;}
	#case .con01 p {max-width: 100%; margin-top: 20px;}
	#case .inner2:after {display: none;}
	#case .inner2 ul li:after {width: 15px; height: 15px;}
	#case .inner2 ul li:before {border-right: 3px solid; border-bottom: 2px solid; width: 10px; left: 5px; height: 15px;}
	#case .inner2 ul li {font-size: 12px; padding-left: 30px;}
	#case .inner:before {background: url(img/sp/case/box01_icon01.png); width: 80px; height: 53px;}
	#case .inner3:before {background: url(img/sp/case/box02_icon01.png); width: 84px; height: 53px;}
	#case .inner4:before {background: url(img/sp/case/box03_icon01.png); width: 85px; height: 53px;}
	#case .inner5:before {background: url(img/sp/case/box04_icon01.png); width: 85px; height: 53px;}
    #case .inner6:before {background: url(img/sp/case/box05_icon01.png); width: 85px; height: 53px;}
	#case .inner7:before {background: url(img/sp/case/box06_icon01.png); width: 85px; height: 53px;}
    #case .inner8:before {background: url(img/sp/case/box07_icon01.png); width: 86px; height: 53px;}
	#case .inner9:before {background: url(img/sp/case/box08_icon01.png); width: 85px; height: 53px;}
	#case h3 {font-size: 30px; text-align: center; padding: 0;}
	#case h3 p {margin-left: 0;}
	#case .box05 h3,#case .box06 h3 {padding-left: 60px;}
	#case .inner2 ul {padding-bottom: 15px;}
	#contact_banner:before {display: none;}
	#contact_banner h2 {font-size: 30px;}
	#contact_banner .bnrinner {display: block; background: url(img/bnr/bnrinner_bg.jpg)top center repeat}
	#contact_banner .name {max-width: 80%; height: 80%;}
	#contact_banner .logo {max-width: 18%; height: 18%;}
	#contact_banner .text {display: none;}
	#contact_banner .mail {max-width: 100%; margin-top: 16px;}
	#contact_banner {margin: 20px 16px 0}
	.page_thumb img {height: 120px;}
	.spmgn-t20 {margin-top: 20px!important;} 
	.sp-pdg-b20 {padding-bottom: 20px!important;}
	.sppdg-b0 {padding-bottom: 0!important;}
	.sppdg016 {padding: 0 16px;}
	#reason .reasonall .list01 {margin-top: -20px;}
	#reason .box01 .inner .con {display: block; margin-top: 16px;}
	#reason .box01 .inner .con p {margin-right: 0; margin-top: 10px;}
	#reason .box02 .inner .con {display: block; margin-top: 16px;}
	#reason .box02 .inner .con p {margin-right: 0; margin-top: 10px;}
	#reason .box03 .inner .con {display: block; margin-top: 16px;}
	#reason .box03 .inner .con p {margin-right: 0; margin-top: 10px;}
	#reason .title02 {max-width: 100%; margin: 0 auto;}
	#reason .ao {font-size: 18px;}
	#reason .box03 .ao p {font-size: 18px;}
	#net .box01 {margin: 0 16px;}
	#net .box02 {margin-left: 16px; margin-right: 16px;}
	#net .box02 .img01 {margin-top: -5px; position: relative; z-index: 20;}
	#net .box02 .img02 {position: relative; z-index: 30; margin-top: -80px; max-width: 100%;}
	#net .box02 h2 {width: 100%; margin-left: auto;}
	#net .box03 {margin-left: 16px; margin-right: 16px;}
	#net .box03 .img01 {margin-top: -5px; position: relative; z-index: 20;}
	#net .box03 .img02 {position: relative; z-index: 30; margin-top: -80px; max-width: 100%;}
	#net .box03 h2 {width: 100%; margin-left: auto;}
	#net .box04 {margin-left: 16px; margin-right: 16px;}
	#net .box04 .img01 {margin-top: -5px; position: relative; z-index: 20;}
	#net .box04 .img02 {position: relative; z-index: 30; margin-top: -80px; max-width: 100%;}
	#net .box04 h2 {width: 100%; margin-left: auto;}
	#net .inner h3 {margin-left: -3%;
	margin-top: 0;
	max-width: 100%;}
	#net .inner .conbn {margin: 0;}
	#voice_arcive {padding: 16px 16px 0;}
	#voice_arcive .bdr {width: 100%; max-width: 100%;}
	#work_arcive {padding: 16px 16px 0;}
	#work_arcive .bdr {width: 100%; max-width: 100%;}
	#blog .paging {padding: 20px 0 0;}
	.single_blog {margin: 0 16px;}
	#form .box01,#form .box02 {padding: 0 16px;}
	#form .telbnr:after {display: none;}
	#form .telbnr .tel {max-width: 80%;}
	#form .telbnr .orange {font-size: 16px;}
	#form .box02 #contact {
    width: 100%;
    margin: 0 16px 30px;
    max-width: -webkit-fill-available;
	}
	#form .box02 #contact th {
    display: block;
    width: auto;
    text-align: left;
    padding: 10px;
	}
	#form .box02 #contact td {display: block; width: auto;}
	#form .box02 #contact input, #form .box02 #contact textarea {font-size: 16px;}
	#sitemap .sitemap_wrap {font-size: 18px!important; padding: 0 16px;}
		.stoker02 {
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		z-index: 20;
	} 
	.stoker02 li {width: 50%;}
/*comapny*/
	#company .box01 {padding: 0 16px;}
	#company .box02 {padding: 0 16px;}
	#company .box03 {padding: 0 16px;}
	#company .box01 table th {
	    display: block;
    width: auto;
    text-align: left;
    padding: 10px;
	}
	#company .box01 table td {
	    display: block;
    width: auto;
		padding: 10px;
	}
	#company .box03 .innerall .inner {display: block;}
	#company .box03 .innerall {padding: 16px;}
	#company .box03 .innerall .inner img {max-width: inherit; height: auto;}
	.sp-mgn-b16 {margin-bottom: 16px!important;}
	#company .box03 .innerall h3 {font-size: 16px; padding: 10px;}
	.sp-pdg-r0 {padding-right: 0!important;}
	.sp-pdg-l0 {padding-left: 0!important;}
	#form .main {width: 100%; box-sizing: border-box;}
}
	@media screen and (max-width:320px) {
		#case h3 {font-size: 24px;}
		#reason .ao {font-size: 15px;}
		#company .box03 .innerall h3 {font-size: 13px;}
}