@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-b10 {margin-bottom: 10px!important;}
.spmgn-b16 {margin-bottom: 16px;}
.sppdg-b0 {padding-bottom: 0!important;}
.spblock {display: block!important;}
#nav-drawer { position: relative; position: fixed; display: flex; background: url(img/header/bg.jpg)top center repeat; 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: #000;
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: #000;
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//box02_bg.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: 16px;
width: 80%;
border-bottom: 1px dashed #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: 40px; box-sizing: border-box;
}
	
.bdr-tb10 {border: none;}
	
.bx-wrapper {margin-top: 0!important;}	
	
.bx-viewport{height: 100%;}
	
/*index*/
	.movie_box .icon {display: none;}
	.movie_box h2 {margin-bottom: 0;}
	.movie_box {padding: 20px 16px;}
	.movie_box ul {display: block;}
	.movie_box li {width: 100%; margin-right: 0; font-size: 3.5vw; margin-top: 20px;}
	.movie_box .btn {border: 2px solid #000; margin-top: 10px;}
	.movie_box .btn02 {font-size: 4vw; padding: 16px 0; margin: 20px auto 0; background: #fc0203;}
	.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom: 10px;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
	
	#index .box01 {padding: 20px 16px; background-size: auto; background: url(img/sp/index/box01_bg.jpg)top left repeat;}
	#index .box01 h2 img {max-width: 100%; margin-bottom: 20px;}
	#index .box01 li {display: none;}
	#index .box01 .subtitle {margin: 20px auto; max-width: 90%; left: inherit;}
	#index .box01 .btn {margin: 20px auto 0; max-width: 70%;}
	#index .box02 .icon {display: none;}
	#index .box02 .btn {position: relative; top: inherit; right: inherit; margin: 0 auto;}
	#index .box02 .inbox12 {padding: 20px 16px; background: url(img/index//box02_bg.jpg)top center repeat;}
	#index .box02 .big {font-size: 5vw; line-height: 1.2; margin-top: 15px; transform: none;}
	#index .box02 .bdrb {border: 2px solid #000; margin-top: 15px;}
	#index .box02 .voice_img {max-width: 100%;}
	#index .box02 .voice_item {margin: 0 auto;}
	#index .box02 .voice_item:nth-child(3) {margin-right: auto;}
	#index .box02 .voice_txt {margin: 10px auto;}
	#index .box02 .tag {display: block; width: auto; height: auto; padding: 2%; font-size: 3.5vw;}
	#index .box03 {padding: 20px 16px;}
	#index .box03 .con {width: 100%; height: auto; background: none;}
	#index .box03 .btn {width: 60%; bottom: 9%;}
	#index .box04 {padding: 20px 16px; background: url(img/sp/index/box01_bg.jpg)top left repeat;}
	#index .box04 h2 {padding-left: 0; margin-top: 0; font-size: 5vw; transform: none;}
	#index .box04 li {display: block; margin: 50px 0;}
	#index .box04 li:before,#index .box04 li:after {display: none;}
	#index .box04 li .txtarea {padding: 16px; margin-right: 0; font-size: 14px;}
	#index .box04 li .bigtxt {font-size: 5vw; margin-bottom: 5px; text-align: center;}
	#index .box04 li .btn {margin: 10px auto 0;}
	#index .box04 .title {max-width: 70%; right: 0; margin-left: auto; margin-right: auto; top: -33px;}
	#index .box04 .title02 {max-width: 70%; left: 0; margin-left: auto; margin-right: auto; top: -33px;}
	#index .box04 li:nth-child(2) .txtarea {margin-left: 0; margin-right: 0;}
	#index .box04 li:nth-child(3) .txtarea {margin-left: 0; margin-right: 0;}
	#index .box04 li:nth-child(3) {margin-bottom: 0;}
	#index .box04 .icon {display: none;}
	#index .box05 {padding: 20px 16px; background: none;}
	#index .box05 .big {margin-top: 0; max-width: 100%; font-size: 5.5vw; text-align: center; transform: none;}
	#index .box05 .con {margin-top: 5.5vw; max-width: 100%; border-top: none;}
	#index .box05 .title {display: none;}
	#index .box05 .con h2 {padding: 5px; font-size: 5.5vw; text-align: center;}
	#index .box05 .zin {display: none;}
	#index .box05 .over {padding: 16px; margin: 0 auto; max-width: 100%; padding-bottom: 0;}
	#index .box05 .under {display: block; max-width: 100%; margin: 0 auto; padding: 16px;}
	#index .box05 .under .mail {margin-top: 10px;}
	#index .box06 {padding: 20px 16px; background: url(img/index//box02_bg.jpg)top center repeat;}
	#index .box06 .inbox {display: block;}
	#index .box06 .big {font-size: 5.5vw; margin-bottom: 5px; margin-top: 5px;}
	#index .box06 .img {margin-right: 0; margin-top: 0;}
	#index .box07 {padding: 20px 16px 80px; position: relative; z-index: 10;}
	#index .box07 .inbox {display: block;}
	#index .box07 ul {width: 100%; max-width: inherit; flex-wrap: wrap;}
	#index .box07 ul li {max-width: 47.5%; margin: 0;}
	#index .box07 ul li:nth-of-type(n + 3) {margin-top: 5%;}
	#index .box07 h2 {display: none; margin-bottom: 0;}
	#index .box07 .blog_item_area {max-width: inherit; min-width: inherit; margin-top: 20px;}
	#index .box07 .title_area {display: block; padding-top: 16px; padding-left: 16px;}
	#index .box07 .title_area h3 {font-size: 6vw;}
	#index .box07 .list {padding: 0 16px;}
	#index .news_item_area {padding: 20px 16px;}
	#index .news_item_area .list {font-size: 14px;}
	#index .news_item_area .bdrb {border: solid 2px #000; margin-top: 15px;}
	#index .box09 .bdrb {border: solid 2px #000; margin: 15px auto;}	
	#index .box09 .title_area {margin:20px auto;}
	#index .box09 .inbox {margin: 20px auto 30px; width: 100vw; height: auto;}
	#index .box09 .btn_box {width: 100vw; height: auto; margin: 0 auto; flex-wrap: wrap; box-sizing: border-box; padding: 0 16px; justify-content: space-between;}
	#index .box09 .btn_box a {width: 48%; padding: 4% 2%; font-size: 4vw; border: 2px solid #000; box-shadow: 1px 1px #000; text-align: center; font-weight: 700;}
	#index .box09 .btn_box a:nth-of-type(n + 3) {margin-top: 4%;}
	#index .box09 .btn_box a .arrow {display: none;}
	#index .box09 .btn_box a:nth-of-type(n + 2) {margin-left: 0;}
	
	#when .box01 .zin01 {display: none;}
	#when .box01 .h2 {max-width: 80%; margin: 0 auto;}
	#when .box01 .ul01 {display: block; padding: 0 16px;}
	#when .box01 .ul01 li {margin-top: 20px;}
	#when .box02 .zin02 {display: none;}
	#when .box02 {margin: 20px 16px;}
	#when .box02 h2 {padding: 16px;}
	#when .box02 .inner {display: block; margin: 16px;}
	#when .box02 .inner img {margin: 0 auto 15px;}
	#when .box02 .under {padding: 16px; margin: 16px;}
	#when .box02 .under .big {font-size: 4.5vw;}
	#when .box02 .under .inner02 {display: block;}
	#when .box02 .under .inner02 img {margin: 0 auto 15px;}
	#when .box02 h3 {padding-bottom: 16px; margin: 16px;}
	#contact_banner .title {padding: 10px;
    font-size: 5.5vw;
    text-align: center; line-height: 1.3;}
	#contact_banner .zin {display: none;}
	#contact_banner .over {    padding: 16px;
    margin: 0 auto;
    max-width: 100%;
    padding-bottom: 0; display: block;}
	#contact_banner .over img {margin: 0 auto;}
	#contact_banner .under {    display: block;
    max-width: 100%;
    margin: 0 auto;
    padding: 16px;}
	#contact_banner .under img {margin: 0 auto;}
	#contact_banner .under .mail {margin: 10px auto 0;}
	#seminar .box01 {padding: 20px 16px;}
	#seminar .box01 p {transform: none; font-size: 6.5vw; line-height: 1.1;}
	#seminar .box01 .img01 {margin: 10px auto;}
	#seminar .box01 .img02 {margin: 0 auto; max-width: 90%; margin-bottom: 8%;}
	#seminar .box01 .img03 {margin: 0 auto;}
	#seminar .ul01 {display: block;}
	#seminar .ul01 li img {margin: 0 auto;}
	#seminar .ul01 li:nth-child(2) img {margin-top: 16px;}
	#seminar .box02,#seminar .box03 {padding: 16px;}
	#seminar .ul02 li {display: block;}
	#seminar .ul02 li p {border-left: 3px solid #000; height: auto; padding: 2%; font-size: 5vw;}
	#seminar .ul02 li img {display: none;}
	#seminar .con {padding-bottom: 16px; margin-bottom: 16px;}
	#seminar .box02 .under,#seminar .box03 .under {padding: 16px;}
	#seminar .box02 .under .inner,#seminar .box03 .under .inner {display: block; margin: 16px 0; font-size: 13px;}
	#seminar .box02 .under .inner img,#seminar .box03 .under .inner img {margin: 0 auto 10px;}
	#seminar .box02 .under .sita,#seminar .box03 .under .sita {font-size: 3.6vw; padding: 3%; background: none;}
	#careful .con01 {padding: 16px; padding-top: 0;}
	#careful .con01 .img01,#careful .con01 .img02,#careful .con01 .img03 {margin: 0 auto; min-width: inherit;}
	#careful .con01 ul {display: block;}
	#careful .con01 ul li:nth-child(1) {margin-top: 0;}
	#careful .con01 ul li {margin-top: 16px;}
	#careful .ul02 {display: none!important;}
	#careful .con01 .spbtn {margin: 16px auto 0;}
	#careful .box02 {padding: 16px;}
	#careful .box02 .inner {display: block;}
	#careful .box02 .title01 {margin: 0 auto; max-width: 70%;}
	#careful .box02 .inner .big {font-size: 3.8vw; padding: 4%; padding-bottom: 0; margin-bottom: 0;}
	#careful .box02 .inner p {padding: 4%; font-size: 13px; padding-top: 0;}
	#careful .box02 .con .icon {display: none;}
	#careful .box02 .con {padding: 16px;}
	#careful .box02 .con h3 {font-size: 4vw; margin-bottom: 10px; text-align: left;}
	#careful .box02 .con .inner02 {display: block; font-size: 13px;}
	#careful .box02 .con .inner02 .img01 {margin: 0 auto 10px;}
	#careful .box02 .con .inner02 .img02 {margin: 0 auto 10px}
	#careful .contactarea {display: block;}
	#careful .contactarea img {margin: 0 auto;}
	#greeting .box01 {padding: 16px;}
	#greeting .box01 .inner, #greeting .box01 .inner02 {display: block; letter-spacing: 0; margin-bottom: 10px;}
	#greeting .box01 .inner img,#greeting .box01 .inner02 img {margin: 0 auto 10px;}
	#greeting .box02 {padding: 16px;}
	#greeting .box02 ul li {margin-bottom: 10px; line-height: 1.2;}
	#greeting .box02 ul li:nth-last-child(1) {margin-bottom: 0;}
	#company .table01 th,#company .table01 td {display: block; width: 100%; border-right: none; text-align: left; font-size: 3.3vw;}
	#company .box01 {padding: 16px; display: block; font-size: 3.6vw;}
	#company .box01 ul {margin-top: 10px;}
	#company .box02 {padding: 16px; font-size: 3.6vw;}
	#form .box01 .btn {bottom: 6%;}
	
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: 300; background: none; width: 100%; border: none; bottom: 0;} 
#contact_banner {display: block; border: none; background-color: #fff; position: relative; z-index: 350;}
#contact_banner .spcon {position: relative;}
#contact_banner .spcon .tel {position: absolute; bottom: 25%; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 93.5%;}
#contact_banner .spcon .mail {position: absolute; bottom: 4.5%; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 93.5%;}

.pan {
display: none;
}
.page_top_img {
margin-top: 60px;
}
.page_title {font-size: 16px;}

	#voice .gallery_arcive_item {max-width: 100%;}
	#voice,#voice_single .tag {display: block; width: auto; height: auto; padding: 2%; font-size: 3.5vw;}
	#voice_single .tag {right: 25px; bottom: 25px;}
	
	#case #gallery_arcive_list,#voice #gallery_arcive_list {display: block; padding: 16px; padding-bottom: 0.02px;}
	#case .gallery_arcive_img,#voice .gallery_arcive_img {max-width: 100%;}
	#case .gallery_arcive_img img,#voice .gallery_arcive_img img {max-width: 100%; min-width: inherit; width: 100%;}
	.paging {padding-bottom: 0;}
	#case_single .gallery_box img,#voice_single .gallery_box img {max-width: 100%; max-height: inherit; min-height: inherit; width: 100%; height: 250px;}
	#case_single .gallery_area,#voice_single .gallery_area {padding: 16px; padding-bottom: 0.02px;}
	#case_single .work_img,#voice_single .work_img {padding: 16px;}
	#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; margin: 20px 0; padding: 0;}
	#form .box03 table {max-width: -webkit-fill-available;}
	#form .box03 table input,#form .box03 table textarea {width: 100%; font-size: 16px; padding: 0;}
	#form .box03 table th {display: block;
    width: auto;
    text-align: left;
    padding: 10px;
    min-width: 0;
	border-right: none;
	}
	#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;}
	#form .box03 table .mwform-radio-field input {width: auto;}
	.mw_wp_form .horizontal-item + .horizontal-item {margin-left: 0!important; display: block;}
}
@media screen and (max-width:340px) {
}