/*============ responsive all page ============*/
@media only screen and (max-width: 1200px) {
    .service-center__box {
        margin-bottom: 40px;
        margin-left: 110px;
    }
}
@media only screen and (max-width: 991px) {
    header {
        padding: 10px 20px;
    }
    .header__logo a img {
        max-width: 90px;
    }
    .header__nav {
        position: absolute;
        top: 100%;
        width: 100%;
        left: 0px;
        right: 0px;
        height: auto;
        background-color: #fff;
        padding-right: 0px;
        z-index: 100;
        justify-content: flex-start;
        padding: 20px 0px;
        background-color: #eb6100;
        display: none;
    }
    .main__menu {
        width: 100%;
        flex-direction: column;
        align-items: initial;
    }
    .main__menu li a {
        color: #fff;
        padding: 6px 20px;
    }
    .header__logo {
       padding: 0px;
    }
    .menu-sp {
        cursor: pointer;
        display: block;
    
        position: relative;
    }
    .menu-sp:hover .menu-sp__hidden .icon-show span, .menu-sp:hover .menu-sp__show .icon-show span  {
    background-color: #eb6100;
    }
    .menu-sp .text {
    font-size: 18px; 	 	
    color: #000;
    padding-right: 15px; 
    font-weight: 600;
    text-transform: uppercase;
    padding-top: 3px;

    transition: opacity .6s cubic-bezier(.86,0,.07,1),transform .6s cubic-bezier(.86,0,.07,1);	
    transition: opacity .6s cubic-bezier(.86,0,.07,1),transform .6s cubic-bezier(.86,0,.07,1),-webkit-transform .6s cubic-bezier(.86,0,.07,1);
    }
    .menu-sp .menu-sp__hidden,  .menu-sp .menu-sp__show {
    display: flex;
    align-items: flex-end;
    transition: 0.5s;
    }
    .menu-sp .menu-sp__show {
    align-items: center;
    position: absolute;
    transform: translateY(10px);
    top: 0;
    right: 10px;
    width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    }
    .menu-sp .show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;

    }
    .menu-sp__show,
    .menu-sp .hidd {
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    }
    .icon-show {
    display: flex;
    flex-direction: column;
    }
    .icon-show span {
    display: block;
    margin: 2px 0px;
    width: 4px;
    height: 4px;
    background-color: #eb6100;

    transition: 0.2s;
    }

    .menu-sp__show .icon-show span {
        background-color: #eb6100;
        display: none;
    }

    .menu-sp__show .icon-show span:nth-child(2) {
    box-shadow: 4px 4px 0 #eb6100,-4px -4px 0 currentColor,4px -4px 0 currentColor,-4px 4px 0 currentColor;
    color: #eb6100;
    -webkit-transition: box-shadow .2s step-end,color .2s step-end;
    transition: box-shadow .2s step-end,color .2s step-end;
    -webkit-transition-delay: .3s,.3s;
    transition-delay: .3s,.3s;
    z-index: 1;

    display: block;
    background-color: #eb6100;
    margin-top: 5px;
    } 
    .service-box .__content h3 {
        font-size: 48px;
    }
    span.text-bg {
        font-size: 16px;
    }
    .service-box {
        flex-wrap: wrap;
        padding: 28px;
    }
    .service-box .__content {
        flex: auto;
        width: 100%;
    }
    .service-box .__link {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
    .service-box .__link img {
        position: static;
    }
    .work__item {
        width: calc(100%/2 - 10px);
        margin-right: 20px;
    } 
    .work__item:nth-child(3n + 3) {
        margin-right: 20px;
    }
    .work__item:nth-child(2n + 2) {
        margin-right: 0px;
    }
    .character__inner img {
        max-width: 320px;
        width: 100%;
    }
    .service-desc {
        padding-left: 0px;
    }
    .service-desc img {
        max-width: 420px;
    }
				.service-box .__content p.senzoku {
					line-height: 1.4;
				}
				.service-box .__content p.l2 {
					margin: 20px 0 0;
					line-height: 1;
				}
				.service-box .__content div {
					 top: -30px;
						left: 190px;
				}
				.service-box .__link img {
					 display: block;
						margin: 20px auto;
				}
				.work__list {
					display: block;
				}
				.work__item {
					width: 100%;
					margin: 0 0 30px;
				}
				.work__item .thumb {
					height: auto;
					display: block;
					padding: 10px;
				}
				.work__item .thumb img {
					display: block;
					margin: 0 auto;
				}
				.greeting__img-inner .__name h4 {
					font-size: 20px;
				}
	.container {
	 width: 98%;
	 margin: 0 auto;
	 max-width: none;
	}
	 
}

@media only screen and (max-width: 768px) {
	.pc {
		display: none;
	}
	    input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: 1px solid #CCC;
  box-sizing: border-box;
  cursor: pointer;
  color: #000;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

    .header__logo h1 span {
        font-size: 18px;
    } 
    .section-padding {
        padding: 60px 0px;
    }
    .section__title h2 {
        font-size: 48px;
    }
    .about__inner .about__img img {
        margin: 0 auto;
        max-width: 200px;
    }
    .service-desc {
        padding-left: 0px;
    }
    .service-center {
        max-width: 100%;
        margin-top: 45px;
    }
    .service-center h3 {
        font-size: 28px;
        margin-bottom: 35px;
    }
    .service-menu__block h4 {
        font-size: 24px;
        margin-bottom: 16px;
    }
    .service-menu__block ul li {
        font-size: 16px;
    }
    .service-box .__content h3 {
        font-size: 36px;
								margin-bottom: 0;
    }
    .service-box .__content p.l2 span:nth-child(1) {
        font-size: 30px;
        line-height: 1.4;
        }
    .service-box .__content p.l2 span:nth-child(4) {
	color: #eb6100;
	font-size: 72px;
	margin-right: 4px;    }
    .service-box .__link {
        padding-left: 0px;
    }
    
    .service-center__box img {
        max-width: 80px;
    }
    .service-center__box img {
        left: -94px;
        top: -31px;
    }
    .service-center__box {
        margin-left: 95px;
        margin-bottom: 20px;
    }
    .wrap-service__menu {
        gap: 40px;
								display: block;
        justify-content: space-around;
    }
    .service-menu__block {
        align-items: flex-start;
								margin: 0 40px 30px;
    }
    .service-menu__block:last-child ul {
        padding-left: 0px;
    }
    .page-title {
        font-size: 48px;
    } 
    .eyecatch-page {
        padding: 32px 0px;
    }
    p.greeting__desc {
        max-width: 100%;
        margin: 40px 0px;
        line-height: 2;
    }
    .greeting__img-inner .__img img {
        max-width: 140px;
    }
    .greeting__img-inner {
        gap: 20px;
        padding-right: 20px;
    }
    .greeting__box {
        gap: 20px;
    }
    .greeting__box .__item {
        padding: 14px 10px;
								line-height: 1.4;
								max-width: none;
								width: 48%;
    }
    .greeting__box .__item:last-child::after {
        left: 40px;
    }
    .greeting__box .__item:first-child::after {
        right: 40px;
    }
    .greeting__box .__item::after {
        width: 40px;
        height: 20px;
    }
    .philosophy p.desc {
        font-size: 28px;
        margin-top: 35px;
    }
    .outline__inner .__item h5 {
        width: 120px;
    }
    .outline__inner .__item {
        padding-left: 0px;
        padding-right: 0px;
    }
    .character__inner p {
        flex: auto;
        width: 100%;
        line-height: 2.2;
    }
    section.works {
        padding-top: 30px;
    }
    .form__info-box {
        width: 100%;
    }
    .form-control {
        width: 100%;
        font-size: 16px;
    }
    .form-control2 {
        font-size: 16px;
    }
    .form-row label {
        width: 100%;
        justify-content: flex-start;
        gap: 20px;
    }
    .form-group__right {
        margin-top: -20px;
    }
    .service-desc img {
        max-width: 320px;
    } 
    .pc_none {
        display: block !important;
    }
    .page-contact {
        padding: 60px 0px;
    }
    .section__title h2 {
        background-image: url(../image/section-line_sp.png);
        background-size: 200px;
    }
    
    .form-check .error {
    width: 93%;
    }

}
@media only screen and (max-width: 767px) {  
    .about__inner .about__img:nth-child(1) {
        display: none;
    }
    .about__inner {
        flex-wrap: wrap;
    }
    .about__inner .about__img {
        width: 100%;
    }
    .about__inner .about__img img {
        max-width: 300px;
    }
    .about__inner .about__content {
        width: 100%;
								margin-bottom: 20px;
    }
    .service-desc {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 40px;
    }
    .character__inner {
        flex-wrap: wrap;
        row-gap: 30px;
    }
    .character__inner p {
        padding-top: 0px;
    }
    .page-contact p.info {
        font-size: 16px;
    }
    .contact-st__content .__inner {
        flex-wrap: wrap;
    }
    .contact-st__content .__inner .contact__phone {
        width: 100%;
        text-align: center;
    }
}
@media only screen and (max-width: 479px) { 
    .work__item {
        width: 100%;
        margin-right: 0px !important;
    }
    .work__item .thumb {
        height: auto;
    }
    .footer__logo img {
        max-width: 160px;
    } 
    .footer__img img {
        max-width: 100px;
    } 
    .greeting__img-inner .__img img {
        max-width: 140px;
    } 
    .greeting__img-inner .__name h4 {
        font-size: 18px;
    }
    .greeting__img-inner .__name p {
        font-size: 12px;
    }
    .greeting__img-inner {
        padding-right: 0px;
        gap: 12px;
    }
    .form-row__inner select.form-control {
        width: 120px;
    }
    .bt-submit,
    .bt-back {
        min-width: 280px;
        margin-bottom: 10px;
    }
    .wrap-service__menu {
        justify-content: flex-start;
    }
    .service-box {
        padding-left: 20px;
        padding-right: 20px;
    }
    span.text-bg {
        font-size: 12px;
    }
    .service-box .__content h3 {
        margin-top: 3px;
        margin-bottom: 16px;
    }
    .service-box .__link img {
        max-width: 260px;
        margin: 0 auto;
    }
    .service-box .__content div {
        left: unset;
        right: 0;
        top: 0;
    }
    .service-box .__link {
    top: -20px;
    }
        
}  
@media only screen and (max-width: 359px) {
    .service-menu__block {
        width: 100%;
    }
    .service-box .__content {
        padding-bottom: 0px;
    }
    .footer__img img {
        max-width: 80px;
    }
    .footer__inner {
        position: relative;
    }
    .footer__img {
        position: absolute;
        top: 50px;
        right: 0px;
    }
}