@charset "utf-8";

@media (max-width:1100px){
  body{
    min-width: 980px;
  }
  .container{
    max-width: 1200px;
    margin: 0 auto;
    -webkit-margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
    -webkit-padding-left: 30px;
    -webkit-padding-right: 30px;
  }
  h1{
    padding-left: 50px;
    padding-right: 80px;
    width: 40%;
  }
  .navList a {
    padding: 0 15px;
  }
  .headerPhone{
    margin: 30px 20px 0 38px;
  }
  .phoneBtn {
    font-size: 35px;
  }
  .footerLeft{
    padding-left: 150px;
    padding-right: 50px;
  }
}
@media (max-width:768px){
  /*ーーー全体ーーー*/
  body{
    min-width: 320px;
    padding: 0;
  }
  .sp{
    display: block;
  }
  .pc{
    display: none;
  }
  .container{
    min-width: 320px;
    margin: 0 auto;
    -webkit-margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-padding-left: 20px;
    -webkit-padding-right: 20px;
  }
  .l-section {
    margin-top: 80px;
  }
  .largeTxt{
    font-size: 21px;
  }
  .txt2{
    text-align: justify;
  }
  .btnArrow{
    margin: 20px auto;
  }
 /*ーーーheaderーーー*/
  .headerTxt{
    display: none;
  }
  .headWrap{
    display: block;
    width: 80%;
    margin: 0 auto;
    padding-left: 5%;
  }
  h1{
    padding: 30px;
    margin: 0 auto;
  }
  .hamburger{
    display: block;
    position: absolute;
    top: 3rem;
  }
  .headerInner{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #fff;
    height: 100vh;
    z-index: 9999;
    padding-top: 50px;
    border-radius: 0;
    clip-path: none;
  }
  .navList::before{
    content: none;
  }
  .navList::after{
    content: none;
  }
  .headerNav {
    display: block;
    margin-bottom: 30px;
    font-size: 18px;
    line-height: 2.4;
  }
  .naviChild ul {
    display: block;
    position: static;
    width: 100%;
    background-color: transparent;
    opacity: 1;
    visibility: visible;
  }
  .naviChild ul li {
    width: 100%;
    font-size: 16px;
    text-indent: 1em;
  }
  .headerInner.active {
    display: block;
  }
  .headerPhone{
    flex-direction: column;
    margin: 0 auto;
  }
  .phoneBtn {
    font-size: 28px;
  }
  .phoneBtn::before {
    width: 25px;
    height: 25px;
  }
  .headerPhone p {
    padding-left: 0;
  }
  .topFade-slick img{
    height: 60vh;
    object-fit: cover;
  }
  .topFade_txt{
    width: 80%;
  }
  /*ーーーcompanyーーー*/
  .topCompany_inner{
    flex-wrap: wrap;
  }
  .topCompany_txtarea {
    width: 100%;
  }
  .topCompany_txtarea .largeTxt {
    margin-top: 50px;
}
  /*ーーーproductーーー*/
  .topProduct{
    padding-top: 60px;
  }
  .productContent{
    width: 100%;
    overflow: hidden;
    margin: 20px auto;
  }
  .productWrapper{
    flex-direction: column;
  }
  .productTxtarea .txt{
    padding: 20px 30px;
  }
  .productContent a::before{
    bottom: 60%;
    transform: none;
  }
  .productContent a::after{
    content: none;
  }
  .productContent a:hover::before {
    bottom: 60%;
    transform: none;
    transform: none;
  }
  .moreBtn {
    opacity: 1;
    width: 40%;
    text-align: center;
  }
  .productContent a:hover .moreBtn{
    transition: none;
  }
  .productContent a:hover .productTxtarea .txt{
    opacity: 1;
  }
  /*ーーーinfomationーーー*/
  .infoList a{
    flex-wrap: wrap;
  }
  .infoList_ttl{
    width: 100%;
  }
  /*ーーーcaseーーー*/
  .topCase{
    padding-top: 60px;
  }
  .caseBtn{
    margin:20px auto;
  }
  /*ーーーcontactーーー*/
  .contactPhone{
    font-size: 36px;
  }
  .topContact_inner .phoneBtn::before{
    content: none;
  }
  .topContact_inner::before{
    width: 80px;
    height: 70px;
    left: 0;
    top: -20%;
  }
  /*ーーーbackbuttonーーー*/
  .backToTop{
    width: 40px;
    height: 40px;
    right: 10px;
  }
  .backToTop.fixed{
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  .backToTop i {
    line-height: 40px;
  }
  /*ーーーfooterーーー*/
  .footerWrap,
  .footerListWrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  .footerListWrapper ul{
    width: 100%;
  }
  .footerListWrapper li:hover{
    color: #fff;
    transition: none;
  }
  .footLogo{
    padding: 30px;
    width: 60%;
    margin: 10px auto;
  }
  .footerLeft {
    width: 100%;
    padding-left: 20px;
  }
  .footerRight {
    width: 100%;
    padding-left:0;
    align-items: flex-start;
  }
  .footer .ttl {
    padding-top: 30px;
    font-size: 21px;
  }
  .footerTxtarea img{
    display: none;
  }
  .footerTxtarea .txt{
    padding-bottom: 20px;
    padding-left: 20px;
  }
  /*ーーーーーーーーーーーー
    下層ページ/company
  ーーーーーーーーーーーーー*/
  .companyInformation {
    flex-direction: column-reverse;
  }
  .companyInformation dl{
    width: 100%;
    margin:0 auto;
  }
  .companyInformation dt{
    width: 100%;
  }
  .companyInformation dd{
    padding: 0 0 20px 10px;
  }
  iframe {
    width: 100%;
  }
  /*ーーーーーーーーーーーー
    下層ページ/product
  ーーーーーーーーーーーーー*/
  .flexContent {
    flex-wrap: wrap;
  }
  .productDetail {
    padding: 0;
  }
  .productDetail_ttl {
    font-size: 21px;
    padding: 1em 0;
  }
  .productHeading{
    letter-spacing: 10px;
  }
  .productDetail_mainImg{
    margin-bottom: 10px;
    padding: 40%;
    height: 300px;
		background-attachment: unset;
  }
  .productDetail_txtarea{
    width: 100%;
  }
  .productDetail_txtarea .txt,
  .productMethod {
    padding: 10px;
}
  .gm1Type, .gm1Color{
    width: 100%;
  }
  .productPackegeImg {
    width: 50%;
    margin: 10px auto;
  }
  .productImg{
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .productImg img {
    width: calc(90%/2);
    padding: 10px 10px 0;
  }
  .base .productDataImg,
  .productDataImg{
    margin: 10px auto;
    width: 100%;
  }
  table {
    margin: 10px auto;
  }
  .tr, th, td {
    padding: 5px 8px;
  }
  .st100 .flowTxt{
    width: 85%;
  }
  .methodBlock .productImg img{
    width: 60%;
    right: 0;
  }
  .flow1 .productImg img{
    top: 45%;
  }
  .flow2 .productImg img,
  .flow3 .productImg img{
    top: 40%;
  }
  .st100 .flow4 {
    margin-bottom: 30px;
  }
  .st100 .flow1 .productImg::after, .st100 .flow2 .productImg::after, .st100 .flow3 .productImg::after{
    font-size: 75px;
  }
  .materialBox{
    width: 80px;
    height: 80px;
  }
  .flow1 .productImg img {
    top: 45%;
  }

  .deConWrap,
  .designTypeWrap,
  .designWrapper{
    display: block;
  }
  .deConImageWrap,
  .deConDetail_txtarea,
  .deContypeImg, .designImage_txtarea{
    width: 100%;
  }
  .deConDetail_ttl{
    margin-bottom: 1.6rem;
    padding-bottom: 0;
    letter-spacing: -0.2rem;
  }
  .headTxt{
    text-align: justify;
  }
  .designTypeWrap{
    width: 100%;
  }
  .trademark_ttl{
    font-size: 2.4rem;
  }
  .trademark .txt span{
    font-size: 1.8rem;
  }
  .dePage img{
    height: 16vh;
  }
  .deConDetail_txtarea .txt{
    padding: 0;
  }
  /*ーーーーーーーーーーーー
    下層ページ/case
  ーーーーーーーーーーーーー*/
  .caseContent{
    width: 100%;
    margin-right: 0;
  }
  .singleCase{
    flex-wrap: wrap;
    margin: 30px auto 50px;
  }
  .case_mainImg {
    margin:0 0 20px;
	 width: 100%;
  }
  .case_imgList{
    width: 100%;
  }
  .caseTxt{
    text-align: justify;
  }
  /*ーーーーーーーーーーーー
    下層ページ/info
  ーーーーーーーーーーーーー*/
  .singleHead {
    margin-top: 50px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .singleHead h3{
    width: 100%;
  }
  .infoTable tr{
    display: flex;
    flex-wrap: wrap;
    background-color: transparent;
    border: none;
  }
  .has-text-align-center:nth-child(1){
    width: 40%;
  }
  .has-text-align-center:nth-child(2){
    width: 60%;
  }
  .has-text-align-center:nth-child(3){
    width: 100%;
  }
  
  /*ーーーーーーーーーーーー
    下層ページ/contact
  ーーーーーーーーーーーーー*/
  .contactTxt{
    width: 100%;
    text-align: justify;
    letter-spacing: 0.1rem;
  }
  .contact dl{
    display: block;
  }
  input, textarea,
  .contact dt, .contact dd,
  .privacyTxt{
    width: 100%;
  }
  .contact dl dd input.postNumber {
    width: 30%;
  }
  .privacyAgree input{
    width: 10%;
  }
}