@media screen and (max-width: 575px) {

:root {

    --font-size-ss: 10px;
    --font-size-s: 12px;
    --font-size-m: 14px;
    --font-size-l: 24px;
    --font-size-ll: 26px;
    --font-size-nav: 20px;
    --font-size-title: 24px;
    --font-size-subtitle: 16px;
    --font-size-strong: 19px;

    --width-max: 100%;
    --width-max2: 100%;

    --padding-lr: 32px;
}
.pcOnly {
    display: none;

}

.spOnly {
    display: block;

}
.widthA {
    width: 100%;
    max-width: 100%;
    margin:0 auto;
}
.layoutA {
    margin:0;
    padding:80px 32px 50px;
    width:100%;
}

.titleStyleA {
    margin:0 0 30px 52%;
    transform-origin: 0 100%;

    transform:translateX(-50%) scale(0.8);

}
.btnArea {
    padding-top: 3em;
}
.flex {
    flex-wrap: wrap;
}

header {
    padding:4vw 0 0 5vw;
    transition: none;
    height:90px;    

}

header > div {
    padding:0;
}
header nav {
    position:fixed;
    top:0;
    left:0;   
    transition: clip-path .8s ease-in-out;
    clip-path: circle(0px at 95% 100px);

}
header h2 img {
    width: 120px;
    height: auto;
}
header .navList .language {
   position: absolute;
   right:100px;
   top:30px;
}

header .navBurger {
    display: block;

}
header nav > div {
    background-color: var(--color-main);
    height:100vh;
    width:100vw;
    pointer-events: none;
    backface-visibility: hidden;
    padding:4vw 5vw 0 ;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0s ;
    transition-delay: 0.8s;


}    
header nav #nav-logo {
    width:120px;
    display: block;

}

header nav ul {
    border-top: 0px solid rgba(0,0,0,0.1);
    overflow-y:scroll;
    max-height:calc(100vh - 144px);
    display: flex;
    flex-wrap: wrap;
    gap:0px;
    padding-bottom:60px;
    background-color: var( --color-white);
    margin-top: 30px;


}
header nav ul li {
    width:100%;
    
    border-bottom: 0px solid rgba(0,0,0,0.1);

}
header nav ul li a {
    margin: 0.0em 0;
    border-left:5px solid var(--color-over);
    padding:1.0em 1.5em;
    min-width:auto;
}
header nav ul li a span {
    padding:0 0em;
    padding-top:0.7em;
}

.headerFixed header {
    opacity: 1;
    position: fixed;
    top:0;
    padding:0;
    background-color: var(--color-white);
}

.headerFixed header h2 {
    background-color: var(--color-main);
    position: fixed;
    padding:10px 15px;

}


.headerFixedActive header h1 {
    top:0;
}

.headerFixed header h2 img {
    width:68px;
    height:auto;
    margin-top:0;
}


main {
    padding-top:100px;
}



/*========= ハンバーガーメニュー ===============*/
#nav-popup {
    background-color: var(--color-white);
}
.navActive #nav-popup {
    clip-path: circle(150vh at 0 50%);

}

.navActive #nav-popup > div {
    visibility:visible;
    opacity: 1;
    pointer-events: inherit;
    transition: opacity 0s ;
    transition-delay: 0s;

}

#nav-popup > div {
}
#nav-popup > div > img {
    visibility:visible;
}
.navActive h1 {
}


.navBurger {
    position: absolute;
    top:10px;
    right:10px;
    width:70px;
    height:70px;
    text-align: center;
    z-index: 9999;


}
.openbtn {
    position: absolute;
    width:45px;
    left: 50%;
    top:10px;
    transform: translateX(-50%);

}

.openbtn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 0;
    height: 1px;
    border-radius: 2px;

    background-color: var(--color-black);
    width: 100%;
}

.openbtn span:nth-of-type(1) {
    top: 10px;
}

.openbtn span:nth-of-type(2) {
    top: 25px;
}

.openbtn p {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-sub);
    font-size:var(--font-size-ss);
}
.openbtn p::after {
    content:'MENU';

}
.openbtn.active p::after {
    content:'CLOSE';

}

.openbtn.active span:nth-of-type(1) {
    top: 15px;
    left: 0;
    transform: translateY(6px) rotate(-45deg);
    width: 100%;
}


.openbtn.active span:nth-of-type(2) {
    top: 27px;
    left: 0;
    transform: translateY(-6px) rotate(45deg);
    width: 100%;
}


.mvNews {
   position: relative;
   background-color: var(--color-black);
   width: auto;
   margin-top: -10px;
   margin-right:var(--padding-lr);
   color:var(--color-white);
}

.mvNews > div {
    padding-left:var(--padding-lr);
    gap:0 15px;
}

.mvNews > div strong {
    padding-right: 1em;


}
.mvNews > div a {
    flex-wrap: wrap;
    gap:0.2em 0;
    align-items: center;
    padding: 20px 0px 20px 10px;
    margin-right: 80px;
    line-height: 1.4;

}
.mvNews > div a::after {
    right:20px;
}

/*
TOP Vision
=================================== */


.topVisionImage .img1 {    width: 25%;  }
.topVisionImage .img2 {    width: 55%;  }
.topVisionImage .img3 {    width: 20%; align-self:flex-end; }



#topAbout .bnrStyleA {
}

#topAbout .bnrStyleA > .img > img {
    height: 100%;
    max-height: 100%;
    
}

.bnrStyleA {
   
    align-items: stretch;

}
.bnrStyleA > .img {
    width: 50%;
   
}

.bnrStyleA > .text {
    transition: all var(--transition-time);
    width: 50%;
    min-width: auto;
    padding:5em 2em;

}


.bnrStyleA.type2 {
}
.bnrStyleA.type2 > .img > img {
    height: 100%;

}
.bnrStyleA.type2 .text > p {
    font-size: var(--font-size-s);
}
.bnrStyleA.type2 .text {
    padding:4em 1em;
   
}

#topProduct {
    flex-wrap: wrap;
    gap:30px 0;
    
}

#topProduct > * {
    width: 100%;
}
#topProduct > .img {
    gap: 15px 5%;
    
}

#topProduct > .img > img {
    width: auto;
    height:intrinsic !important;
    transform: none !important;
    transform-origin: 0 0 !important;
    

}
#topProduct > .img > img.img1 { width: 60%;  }
#topProduct > .img > img.img2 { width: 30%; margin-top:20vw;  }
#topProduct > .img > img.img3 { width: 50%; margin-left:10%;  }
#topProduct > .img > img.img4 { width: 35%; margin-top:-12vw; }



.newsList> a {
    justify-content: center;
    gap:20px 0;
    flex-wrap: wrap
}.newsList> a .img {
    width: 100%;

}
.newsList> a .img img {
    width: 100%;
    max-height:50vw;
    height: auto;
    object-fit: cover;
}
#topInstagram {
    gap:30px 60px;
}

#topInstagram > .text {
    width: 100%;
}
#topInstagram > .img {
    width: 100%;
}

footer  {
}
footer > section.info {
    gap:40px;
    padding: var(--padding-lr);


}

footer > section.info > div.nav  {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap:1em 1.5em;
    min-width: auto;
}

footer > section.copy {
    padding-right:var(--padding-lr)
}

#btnToTop {
    width: 38px;
    height: 38px;
    position: fixed;
    bottom: 40px;
    left: inherit;
    right:-15px;

}




/* 下層共有
===================================*/
#pageTitle {
    margin-bottom: 0;


}



/* About
===================================*/

#aboutFV .img {
    display: flex;
    gap:0 10px;
    align-items: flex-start;
}

#aboutFV .img .img1 {  width:calc(40% - 10px);}
#aboutFV .img .img2 {  width:60%;}

#aboutBusiness .bg::after {
    background-size: cover;

    background-position: top center;

}
#aboutBusiness .list {
    padding-left:3em;
    padding-top:40px;
    align-items: flex-start;

}
#aboutBusiness  .list h3::before  {
    content:'';
    height:1px;
    width:16px;
    background-color: var(--color-primary);
    top:0.9em;
    left:-1.5em;

}


#aboutBusiness  .list .item {
    padding-bottom:50px;
}

#aboutBusiness  .list .img {
    margin-left:-3em;
    gap:0 15px;
    padding-top:50px;
    margin-bottom: 30px;;

}

#aboutBusiness  .list .img1-1 {  width:60%;   }
#aboutBusiness  .list .img1-2 {  width:calc(40% - 15px);  align-self: flex-end; margin-bottom:-30px;     }

#aboutBusiness  .list .img2-1 {  width:40%;  align-self: flex-end;   margin-bottom:-30px;  }
#aboutBusiness  .list .img2-2 {  width:calc(60% - 15px);       }


#aboutBusiness .btnArea {
    margin-left: -3em;;
}


#aboutProfile {
    margin-bottom: 0;
}
#aboutProfile dl {
    padding-left:0;
    flex-wrap: wrap;
    gap:0 0;
}


#aboutProfile dl dt {
    width: 100%;
    
}

#aboutProfile dl dd {
    width: 100%;
    margin:0.5em 0 3em;

}



#aboutBackground .img {

    gap: 0 15px;
    margin-bottom:30px;
}
#aboutBackground .img .img1_1 {    width:60%; }
#aboutBackground .img .img1_2 {    width:40%; margin-bottom:-30px; align-self: flex-end; }
#aboutBackground .img .img2_1 {    width:60%;}
#aboutBackground .img .img3_1 {    width:60%; }

#aboutHistory {
    padding-bottom:30px;

}
#aboutHistory dl {
    padding-left: 0;
    flex-wrap: wrap;
    gap:0;
}

#aboutHistory dl dt {
    width: 100%;

}

#aboutHistory dl dd {
    width: 100%;
    padding-top:0.4em;
    padding-bottom:2em;
}
#aboutHistory .img  {
    gap: 0 15px;
    padding-top:20px;
}

#aboutHistory .img .img1  {   width:58.5% }
#aboutHistory .img .img2  {   width:calc(41.5% - 15px) }




#visionList .img {
    width: 100%;
}


#visionList .img2 {
    width: 100%;
}

#visionList .list03 .img{

    gap:50px 20px;
}

#visionList .list03 .img .img1 { width: 50%; margin:0 200px;  }
#visionList .list03 .img .img2 { width: 65%;     }

#visionList .list03 .img .img3 { width: calc(35% - 20px); margin-top:45vw;  }

#visionList .bg::after {
    background-size: cover;


}



/* product
===================================*/
#productFV .img {
    gap:0 10px;
}
#productFV .img .img1 {  width:calc(40% - 10px);}
#productFV .img .img2 {  width:60%;}


.productList01 {
    gap:40px 15px;
    flex-wrap: wrap;
}

.productList01 .list-item {
    width: calc(50% - 8px);
}

#productLineup {
    margin-top:50px;
}

.productList02 {

    gap:50px;

}
.productList02.list::before {
   
    left:calc(20%);
   
}
.productList02 .list-item {
   
    gap:0 20px;
    

}
.productList02 .list-item img {
    width:40%;
}



#productKintsugi {
    padding-bottom:20px;
}
#productKintsugi .img .img1_1 {    width:100%; }



/* News
===================================*/


.newsCategryLink {
    padding:0 var(--padding-lr) 10px;
    border-bottom:1px solid var(--color-tertiary);
}



#newsList {
    padding: 0 var(--padding-lr) !important;
    margin-bottom:50px

}
#newsList .newsList {

    padding-bottom: 0;
}

.pagination {
  
    padding: 0 ;
    margin: 15px 0;
     
 }
 .pagination .page-numbers {
    padding:1.0em;
}


.newsHeader {
    padding:0 var(--padding-lr);
}



/* Contact
===================================*/

.contactStyle01 {
    padding: 80px 0 80px 0;


}



.contactStyle01 input,
textarea
{
    font-size:var(--font-size-subtitle)

}







}