@charset "utf-8";
/* CSS Document */
@media screen and (max-width:500px) {
.spmaxw80 {max-width: 80%;}
.spmgn-t10 {margin-top: 10px!important;}
.spmgn-t16 {margin-top: 16px!important;}
.spmgn-t20 {margin-top: 20px!important;}
.noflex {display: block;}
#nav-drawer { position: relative; position: fixed; display: table-cell; background-color: #fff; top: 0; left: 0; z-index: 7000; height: 60px; width: 100%; right: 0; }
#nav-drawer .header_logo {
width: 70%;
min-width: 140px;
margin-left: 10px;
padding-top: 21px;
}
/*チェックボックス非表示*/
.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: #db9218;
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: #db9218;
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 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: #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: 60px;
}

/*index*/
#index .box01 {padding: 50px 16px 5px;}
#index .box01 h2 {
font-size: 20px; margin-bottom: 10px;
}
#index .box01 h2 span {font-size: 25px;}
#index .box01 .big,#index .box01 .txt01 {
display: none;
}
#index .box01 .inner {
display: block; margin-top: 20px;
}
#index .box01 .inner div {
width: 100%;
}
#index .box01 .inner p {
margin: 10px 0;
}
#index .box02 {padding: 16px 0;}
#index .box02 .inbox {padding: 0 16px; font-weight: bold; margin-top: 10px;}
#index .box02 h2 {top: 0; max-width: 30%;}
#index .box02 ul {margin-top: 10px;}
#index .box02 ul li {max-width: 48.5%;}
#index .box03 {padding: 30px 16px;}
#index .box03 h2 {z-index: 100; position: relative;}
#index .box03 .inbox:before{top: -50px;}
#index .box03 .work_txt {align-items: center;}
#index .box03 .title {z-index: 200; position: relative;}	
#index .box03 h3 {font-size: 3.4vw;}
#index .work_item {max-width: 47%; margin-right: 6%; margin-top: 6%;}
#index .work_item:nth-child(2n) {margin-right: 0;}
#index .box03 .work_img img {max-height: 120px; min-height: 120px;}
.work_no {display: none;}
#index .box03 .archive_cap {font-size: 3vw;}
#index .box03 .btn {position: relative; z-index: 200; margin: 20px auto 0;}
#index .box04 .over {padding: 0; background: none; margin-bottom: 16px;}
#index .box04 {border-bottom: 0; background-color: #fff; background: url(img/index/box04_bg.jpg)top center repeat; padding: 16px;}
#index .box04 .under:before {display: none;}	
#index .box04 .under {display: block; background-color: #f9f6f3; margin:0; padding: 16px;}
#index .box04 .under .tel {height: auto; margin: 0 auto; max-width: 100%;}
#index .box04 .under .mail {height: auto; max-width: 100%; margin: 16px auto 0;}
#index .box05 .title {max-width: 80%;}	
#index .box05 h2 {font-size: 18px;}
#index .box05 h2 span {font-size: 18px;}
#index .box05 ul {display: block;}
#index .box05 .inbox108:after {display: none;}
#index .box05 ul li {max-width: 100%; margin-bottom: 50px;}
#index .box05 ul li:nth-last-child(1) {margin-bottom: 0;}
#index .box05 {padding: 20px 16px;}
#index .box05 ul li img {width: 100%;}
#index .box05 ul li .btn {width: auto;}
#index .box06 {padding: 20px 0;}
#index .box06 .btn {position: relative; top: 0; margin: 0 auto;}
#index .box06 h2 {font-size: 18px; margin-bottom: 20px;}
#index #voice_list {padding: 0 16px;}
#index .voice_item {margin-bottom: 20px; max-width: 100%; width: 100%;}
#index .voice_img {max-width: 100%;}
#index .voice_img img {width: 100%;} 
#index .box07 {padding: 20px 16px;}
#index .box07 h2 {font-size: 20px; margin: 10px 0;}
#index .box07 .over {display: block; margin-top: 20px;}
.blog_item_area {max-height: inherit; height: auto; margin-left: 0; margin-top: 40px;}
#index .box07 .over .title_area h3 {max-width: 80%; margin: 0 auto;}
#index .box07 .over .title_area {margin-bottom: 0;}
#index .box07 .btn {margin: 15px auto 0;}
#index .box07 .under {display: block; margin-top: 20px;}
#index .box07 .under li {width: 100%; height: auto; margin-bottom: 20px;}
#index .box07 .under li img {width: 100%;}
#index .box07 .under h3 {padding: 20px;}
#index .box07 .under li:nth-child(3) h3 {padding: 20px;}
#index .box07 .under li:nth-child(4) {margin-bottom: 0;}
#index .box07 .img01 {min-width: inherit;}
#index .box08 {padding: 20px 16px; height: auto; background-size: cover;}
#index .box08 .inner {display: block; text-align: justify; line-height: 1.5; margin: 0;}
#index .box08 .title {display: none;}
#index .box08 .con {display: none;}
    .pr_box {padding: 40px 0;}
    .pr_box .pr_movie {width: calc(100% - 32px);}
    .pr_box .pr_movie video {border: 3px solid #fff;}
    .pr_box .play-btn {width: 15%;}
    .pr_box .pr_movie::after {height: 50%; width: calc(100% + 32px); bottom: -20px; left: -16px;}
    .pr_box .pr_title {width: 30%; margin: 0 auto 20px;}
    
    
#index .box09 .btn {width: 60%; padding-top: 20px;}
#index .box09 {padding: 50px 16px 20px;}
	
footer .inbox {display: none;}
footer {padding: 0;}
.stoker02 li {width: 50%;}
.stoker02 {display: flex; justify-content: space-between;}
#pop_banner {padding: 0; z-index: 300;}

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


/*about*/
#about .box01 {padding-bottom: 20px;}
#about .box01 ul {
padding: 0 16px; margin-bottom: 0;
}
#about .box01 ul li {
max-width: 47%;
}
#about .box02 h2 {font-size: 18px;}
#about .box02 .con {padding: 20px 16px; margin-bottom: 20px;}
#about .box02 .inner {display: block; margin-top: 16px;}
#about .box02 .inner img {width: 100%; max-height: 300px; object-fit: cover;}
#about .box02 .inner p {
writing-mode: horizontal-tb;
-webkit-writing-mode: horizontal-tb;
	-ms-writing-mode: horizontal-tb;
margin-top: 10px;
line-height: 1.5;
width: 100%;
}
#about .box02 .undertxt {margin-top: 10px; line-height: 1;}
#about .box02 h3 {margin: 0 auto;}
#about .box03 .over {font-size: 16px; letter-spacing: 1px; margin-bottom: 16px;}
#about .box03 .over span {font-size: 20px;}
#about .box03 {margin: 0;}
#about .box03 h2 {padding: 5px 0; font-size: 16px;}
#about .box03 .con01,#about .box03 .con02,#about .box03 .con03 {padding: 20px 16px;}
#about .box03 .inner {display: block; margin-bottom: 10px;}
#about .box03 .con01 h3:before,#about .box03 .con02 h3:before,#about .box03 .con03 h3:before {display: none;}
#about .box03 h3 {font-size: 20px; margin-top: 16px;}
#about .box03 .inner img {margin-right: 0; width: 100%; margin-bottom: 10px;}	
#about .box03 h4 {font-size: 14px; margin-bottom: 0;}
#about .box03 .inner02 {display: block;}
#about .box03 .inner02 img {width: 100%; margin-left: 0; max-height: 250px; object-fit: cover;}
#about .box03 .inner02 p {padding: 2px 16px; max-width: 100%;}
#about .box03 .inner02 p .big {font-size: 18px;}
#contact_banner {padding: 16px;}
#contact_banner .con {display: block;}
#contact_banner .con img {width: 100%;}
#contact_banner .con .tel {margin-bottom: 16px;}
/*concept*/
#concept .box01 h2 {font-size: 22px; padding: 5px 0; max-width: 100%;}
#concept .box02 {margin: 16px; padding: 16px;}
#concept .box02 ul li {max-width: 47.5%; margin-bottom: 16px;}
#concept .box02 .ex li {margin-bottom: 0;}
#concept .box03 .con,#concept .box04 .con,#concept .box05 .con,#concept .box06 .con {margin: 0 auto; padding-top: 16px;}
#concept .box03 .con .inner,#concept .box04 .con .inner,#concept .box05 .con .inner,#concept .box06 .con .inner {display: block; padding-bottom: 16px; margin-top: 16px;}
#concept .box03 .con .inner p,#concept .box04 .con .inner p,#concept .box03 .con .inner p,#concept .box05 .con .inner p,#concept .box06 .con .inner p {margin-right: 0; margin-top: 10px;}
#concept .box03,#concept .box04,#concept .box05,#concept .box06 {padding-bottom: 0; margin-top: 16px;}
#concept .box03 h2,#concept .box04 h2,#concept .box05 h2,#concept .box06 h2 {font-size: 30px;}
#concept .box03 .big,#concept .box04 .big,#concept .box05 .big,#concept .box06 .big {font-size: 26px;}

/*function*/
#function .box01_h2 {font-size: 18px; margin-top: 0;}
#function .box01_h2:before {display: none;}
#function .box01 {padding: 16px;}
#function .box01 .con {display: block;}
#function .box01 .con .img {margin-left: 0; width: 100%; margin-top: 10px;}
#function .box01 ul {margin-top: 16px;}
#function .box01 ul li {max-width: 30%;}
#function .box02 {padding-bottom: 20px; margin-bottom: 20px;}
#function .box04 {padding: 16px;}
#function .box04 .mintxt {font-size: 18px;}
#function .box04 h2 {font-size: 18px; line-height: 0.7; margin-top: 20px;}
#function .box04 .inner {display: block; padding: 16px;}
#function .box04 .inner img {margin-left: 0; width: 100%;}
#function .box04 .inner h3 {margin-top: 16px;}
#function .box05 h2 {font-size: 20px; line-height: 0.7; margin-bottom: 20px;}
#function .box05 .mintxt {font-size: 14px;line-height: 0.7;}
#function .box05 {padding: 16px;}
#function .box05 .con {padding: 16px;}
#function .box05 .con .inner {display: block; padding-bottom: 25px; margin-top: 16px;}
#function .box05 .con .inner img {width: 100%; margin-bottom: 10px;}
#function .box05 .con .inner p {margin-right: 0;}
#function .box06 {padding: 16px;}
#function .box06 .big {line-height: 2;}
#function .box06 .inner .bigtxt {font-size: 14px;}
#function .box06 .inner {padding: 16px;}
#function .yellow {font-size: 18px; line-height: 0.7;}

/*gallery.voice*/
#case #gallery_arcive_list,#voice #gallery_arcive_list {padding: 16px; padding-bottom: 0;}
#case .gallery_arcive_item,#voice .gallery_arcive_item {width: 100%;}
#case .gallery_arcive_img,#voice .gallery_arcive_img {max-width: 100%;}
#case .gallery_arcive_img img,#voice .gallery_arcive_img img {width: 100%;}
#case_single .item01,#voice_single .item01 {margin: 0 16px;}
#case_single .gallery_box img,#voice_single .gallery_box img {max-width: 100%; width: 100%; min-height: 200px; max-height: 200px;}

/*reason*/
#reason .box01 .title {max-width: 80%;}
#reason .box01 ul {max-width: 90%;}
#reason .box01 ul li {max-width: 30%;}
#reason .box01 .big {font-size: 18px; line-height: 0.6;}
#reason .box01 .big span {font-size: 35px;}
#reason .box02,#reason .box03,#reason .box04 {margin-top: 20px; padding: 0;}
#reason .box02 h2:before,#reason .box03 h2:before,#reason .box04 h2:before {background: url(img/sp/reason/box02_icon.png); width: 280px; height: 23px; top: -15px;}
#reason .box02 .txt,#reason .box03 .txt,#reason .box04 .txt  {font-size: 14px;}
#reason .box02 .txt span,#reason .box03 .txt span,#reason .box04 .txt span {font-size: 16px;}
#reason .box02 .inner,#reason .box03 .inner,#reason .box04 .inner {display: block; padding: 16px 16px 10px;}
#reason .box02 .inner img,#reason .box03 .inner img,#reason .box04 .inner img {margin-right: 0; width: 100%; margin-bottom: 10px;}
#reason .box05 h4 {font-size: 16px; line-height: 0.7; padding: 10px 0;}
#reason .box05 .con {padding: 16px; text-align: justify;}
#reason .box05 .con .big {margin: 10px 0; font-size: 16px; letter-spacing: 0;}
#reason .box05 .underarea {max-width: 100%; padding: 0 16px 10px; margin: 0; background-position: top center; background-size: contain; padding-top: 130px; letter-spacing: 3px; text-align: justify;}
#reason .box05 .underarea p {max-width: 100%;}

/*land*/
#land .box00 {padding: 20px 16px; font-size: 3.5vw;}
#land .box00 .inner {display: block; margin-bottom: 16px;}
#land .box00 .icon {display: none;}
#land .box00 .big {font-size: 4vw; margin-bottom: 10px;}
#land .line {font-size: 3.5vw;}
#land .con_area {padding: 10px; margin-top: 20px; font-size: 3.8vw; border: 2px solid #cccccc;}
#land .con_area .logo {font-size: 5vw; margin: 10px auto;}
#land .con_area .big02 {font-size: 6vw;}
#land .con_area .inner02 {width: auto; margin: 10px auto 0; display: block;}
#land .con_area .tel {font-size: 6vw; padding: 10px; margin-bottom: 10px; justify-content: center; width: 100%; box-sizing: border-box;}
#land .con_area .mail {font-size: 4.4vw; padding: 10px; justify-content: center; width: 100%; box-sizing: border-box;}
#land .con_area .tel img, #land .con_area .mail img {width: 8%; margin-right: 10px;}
#land .box01 {padding: 20px 16px; margin-top: 20px; margin-bottom: 20px;}
#land .box01 .con {margin-top: 20px; padding: 10px; font-size: 3.5vw; line-height: 1.2; border: 2px solid #cccccc;}
#land .box01 h3 {font-size: 4.5vw;}
#land .box01 .icon01,#land .box01 .icon02 {display: none;}
#land .box01 .inner {display: block; margin: 10px auto;}
#land .box01 .inner p {height: inherit; writing-mode: inherit; -webkit-writing-mode: inherit; -ms-writing-mode: inherit; margin-top: 10px;}
#land .box01 .bnr_txt {font-size: 3.5vw; padding: 5px 10px; line-height: 1.3;}
#land .box015 {padding-bottom: 10px;}
#land .box015 .txt01 {font-size: 4vw; padding: 10px; display: block; margin-top: inherit;}
#land .box015 .big_txt01 {font-size: 4vw; margin-top: 10px;}
#land .box015 .big_txt01 span {font-size: 6vw;}
#land .center_box img {display: none;}
#land .center_box {background: none; background-color: #fff; font-size: 5vw; padding: 10px; border: 2px solid #cccccc;}
#land .center_box .min {font-size: 4vw; margin-top: 10px;}
#land .box02 {padding: 20px 16px 0; border: 2px solid #cccccc;}
#land .box02 .con {padding: 10px; font-size: 3.5vw; border: 2px solid #cccccc; margin-top: 20px;}
#land .box02 h2 {font-size: 3.5vw;}
#land .box02 h3 {font-size: 4vw; margin: 16px auto;}
#land .box02 .inner {display: block;}
#land .box02 .inner .img01 {margin-bottom: 10px; margin-right: 0;}
#land .box02 .inner .img02 {margin-bottom: 10px; margin-left: 0;}
#land .box02 .img03 {margin: 10px auto;}
#land .box02 .mgn {margin-bottom: 0;}
#land .box02 .con_area .mail {font-size: 4vw;}
#land .con_area .tel {font-size: 5vw;}
#land table {border: 2px solid #cccccc; margin-bottom: 16px!important;}
#land table th,#land table td {display: block; width: auto; padding: 10px; min-width: 0;}
.mwform-radio-field {display: block;}
.mw_wp_form .horizontal-item + .horizontal-item {margin-left: 0!important;}
#land table th:nth-last-child(1), #land table td:nth-last-child(1) {border-bottom: none;}
#land #form_area {margin-top: -60px; padding-top: 60px;}




/*flow*/	
#flow .box01 .inner,#flow .box02 .inner,#flow .box03 .inner,#flow .box04 .inner,#flow .box05 .inner {display: block; margin-top: 16px;}
#flow .box01 .inner img,#flow .box02 .inner img,#flow .box03 .inner img,#flow .box04 .inner img,#flow .box05 .inner img {margin-right: 0; width: 100%; margin-bottom: 10px;}
#flow .box01,#flow .box05 {padding: 40px 16px 16px;}
#flow .box01 h2,#flow .box02 h2,#flow .box03 h2,#flow .box04 h2,#flow .box05 h2 {font-size: 20px; line-height: 0.7;}
#flow .box02,#flow .box03,#flow .box04{padding: 16px;}
#flow .box01 .contact_area {display: block;}
#flow .box01 .tel {height: auto;margin: 0 auto 16px;}
#flow .box01 .mail {height: auto; margin: 0 auto;}
#flow .box01 .bnr {margin-top: 10px;}
#flow .box02 .underarea .point,#flow .box03 .underarea .point,#flow .box04 .underarea .point,#flow .box05 .underarea .point {width: auto;}
#flow .box02 .underarea,#flow .box03 .underarea,#flow .box04 .underarea,#flow .box05 .underarea {display: block;}
#flow .box02 .underarea img,#flow .box03 .underarea img,#flow .box04 .underarea img,#flow .box05 .underarea img {width: 100%; margin-top: 10px;}
#flow .box02 .leftarea,#flow .box03 .leftarea,#flow .box04 .leftarea,#flow .box05 .leftarea {padding-right: 0; padding-left: 0; margin-top: 30px;}
#flow .box02 .underarea .big,#flow .box03 .underarea .big,#flow .box04 .underarea .big,#flow .box05 .underarea .big {font-size: 18px;}
#flow .box06 .box06_icon {right: -16px; bottom: -16px; width: 48%;}
#flow .box06 {margin-top: 20px;}

/*company*/
#company .box01 {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 .box02 {display: block; margin: 0;}
#company .box02 .left {max-width: 100%; text-align: justify; font-size: 13px;}
#company .box02 .right {width: 100%; text-align: justify; margin-top: 16px;}
#company .company_area {padding: 10px 16px;}
#company .box03 {margin: 16px 0 0;}
#company .box03 iframe {height: 350px;}
#company .box04 ul {padding: 0 16px;}
#company .box04 ul .title {font-size: 18px;}
#company .box04 ul li {max-width: 48%;}
#company .privacy {padding: 0 16px;}
#company .privacy .con01 {margin-top: 25px;}
#company .privacy .text {font-size: 3.5vw;}
#company .privacy .txt01 {font-size: 3.5vw;}
#company .privacy h3 {font-size: 4vw;}
    

    

/*greeting*/
#greeting .inner {display: block;}
#greeting h2 {text-align: center;}
#greeting .min {text-align: center;}
#greeting .inner .img01,#greeting .inner .img02 {margin: 16px auto 10px; width: 100%;}
#greeting .greeting_area {padding: 16px;}
#greeting table th { display: block;
width: auto;
text-align: left;
padding: 0;}
#greeting table td {display: block; width: auto; padding: 0; margin-bottom: 5px; border-bottom: 1px solid #e0e0e0;}
#greeting table {padding: 16px;}
#form .box01 .con01 .big {font-size: 18px; line-height: 0.7; margin-top: 10px;}
#form .box01 .con01 {margin-bottom: 20px;}
#form .box02 .under {display: block; padding: 16px;}
#form .box02 .under .tel{margin: 0 auto;}
#form .box02 .under .mail {display: none;}
#form .box03 ul {padding: 16px 0; font-size: 13px;}
#form .box03 {padding: 0 16px;}
#form .box03 table th {display: block;
width: auto;
text-align: left;
padding: 10px;
min-width: 0; 
}
#form .box03 table {max-width: -webkit-fill-available;}
#form .box03 table td {display: block; width: auto; padding: 10px;}
#form .box03 table input, #form .box03 table textarea {width: 100%; font-size: 16px;}
.mwform-radio-field input {width: auto!important;}
.mw_wp_form_input .btn input {font-size: 20px; height: 50px; max-width: 80%;}
#form .box03 table td.w40 .wpcf7-list-item,#form .box03 table .list02 .wpcf7-list-item {width: 50%; font-size: 3.5vw;}   
#form .box03 table td.w40 .wpcf7-list-item:nth-child(n + 3),#form .box03 table .list02 .wpcf7-list-item:nth-child(n + 3) {margin-top: 1%;}
#form .box03 table td.w30 .wpcf7-list-item {font-size: 3.5vw;}
#form .box03 table td.w30 .wpcf7-list-item:nth-child(n + 4) {margin-top: 1%;}
#form .box03 table td.sp-w50 .wpcf7-list-item {width: 50%;}
#form .box03 table td.sp-w50 .wpcf7-list-item:nth-child(n + 3) {margin-top: 1%;}
#form .btn {font-size: 4.5vw;}    
#concept .box01 {margin-top: 0;}
#index .con_area {display: none;}
	
#initiatives .box {margin: 20px auto; padding: 16px; font-size: 3.5vw; line-height: 1.8;}
#initiatives .box h2 {font-size: 4.5vw; margin-bottom: 0; line-height: 1.5;}	
#initiatives .box p {margin-top: 16px;}	
.initiatives_thumb {height: 120px;}
.initiatives_thumb img {width: auto; height: auto;}
	

}

@media screen and (max-width:320px) {
#company .box04 ul .title {font-size: 16px;}

}