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

:root {
    
    --font-size-ss: 10px;
    --font-size-s: 12px;
    --font-size-m: 14px;
    --font-size-l: 16px;
    --font-size-l1: 20px;

    --font-size-l2: 18px;
    --font-size-l3: 20px;
    --font-size-l4: 40px;

}
body {
 
    min-width:auto;
    margin-bottom:82px;



}
.flex {
    flex-wrap: wrap;

}

.flex .flex-cont {
}

.flex.flex-reverse {
    flex-flow: row;
}


.content-size1 {
    max-width:none;
    padding:0 30px;

}

.content-size2 {
    max-width:none;
    padding:0 20px;
}

.content-size3 {
    max-width:none;
    padding:0 30px;
}

.padding-style1 {
    margin: 0px 0 0;
    padding-top:90px;
    padding-bottom:50px;


}
.padding-style2 {
    padding-top:50px;
    padding-bottom:40px;
    margin:40px 0 0;


}

.padding-style1 .padding-style2 {
    padding-left:0;
    padding-right:0;
}

/*========= header ===============*/

#header::before {
    position: fixed;
    top:-150px;
    left:-300px;
    content:url('/common/img/main-bg1.svg');
    transform: scale(0.5, 0.5);
}

#header-logo {
    width:auto;
    padding:10px;

}

#header-logo a img {
    width:100px;
    height:auto;
}

#nav {

    width:100%;
    position: fixed;
    flex-wrap: wrap;
    gap:0;

}

#nav-main {
    position: absolute;
    width: calc(100% - 30px);
    margin:0 15px;
    border-radius: 8px;
    right:-100%;
    top:85px;
    transition: all 0.8s;
    border: 3px solid var(--color-main) !important;
}
#nav-main.active {
    display: block;

    right:0;

}
#nav-main ul {
    flex-wrap: wrap;

}
#nav-main ul li {
    width:100%;
    border-top: 1px solid var(--color-border);

}
#nav-main ul li a {
    padding:25px 0;

}

#nav-main ul li a:hover {
    padding:25px 0;

}
#nav-main ul li> * {
}

#header {
    width: 100vw;
}
#header > div {
    padding:0;

    

}

#nav-contact {
    position: fixed;
    width:100%;
    bottom:0;
    left:0;
    text-align: center;
}

#nav-contact h4 {
    display: inline-block;
    padding:0.3em 5em;
    background-color: var(--color-main);
    color:var(--color-over);
    border-radius: 100px;
    margin-bottom:5px;
    min-width: ;
}
#nav-contact > ul {
    justify-content: space-between;
}
#nav-contact > ul > li  {
    width:33.3%;
}
#nav-contact > ul > li > a   {
    width:100%;

}
#header.scrolled #header-logo {
    width:70px;
    height:70px;
    

}


#header #spMenu {
    position: absolute;

    right:15px;
    top:15px;
    width:60px;
    height:60px;
    text-align: center;
    box-sizing: border-box;
    counter-increment: item;
    background-color: var(--color-main);
    border-radius: 100px;
    transition: all .8s;
}

.menu-trigger,
.menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}
.menu-trigger {
    margin:0 auto;
    margin-top:13px;

    transform: scale(0.5);
    position: relative;
    width: 50px;
    height: 34px;
    background: none;
    border: none;
    appearance: none;
    cursor: pointer;
}


.menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
    top: 0;
}
.menu-trigger span:nth-of-type(2) {
    top: 15px;
}
.menu-trigger span:nth-of-type(3) {
    bottom: 0;
}

#spMenu.active  {
    /*
    border-radius: 100px 100px 0 0 !important;
    height: 75px !important;
    */
}

#spMenu.active button span:nth-of-type(1),
#spMenu.active button span:nth-of-type(3) {
    width: 20px;
}
#spMenu.active button span:nth-of-type(1) {
    transform: translate(30px,8px) rotate(45deg);
}
#spMenu.active button span:nth-of-type(3) {
    transform: translate(30px,-8px) rotate(-45deg);
}
/*========= common ===============*/

.textdecoration_sweat::after {
    content: url(/common/img/icon-sweat.svg);
    display: inline-block;
    position: absolute;
    top:-25px;
    right:-20px;
    transform: scale(50%);
    

}

.padding-style1 {
    padding:50px 0 40px;

}
.padding-style2 {
    padding:60px 0 50px;
    margin:50px 0 0;


}
.title-styleA {
    margin-bottom: 2em;
}

.title-styleB {

    padding-top:20px;
    margin-bottom:50px;
}
.title-illust {
    right:0;
    top:0;
    transform: translateY(-100%) scale(50%);
}
.contact-box {
    padding:0 !important;
}
.btn-area {
    text-align: center;
    margin:15px 0;
}
.btn-area img {
    width: 100%;;
}

/*========= mainvisual ===============*/
main {
    padding-top:0;
}

main::before {
    right:-600px;
    top:-200px;
    content: url(/common/img/main-bg2.svg);
    transform: scale(40%);
}

main .main-visual-copy {
    
    flex-wrap: wrap;
    

}

main .main-visual-copy > div {
}
main .main-visual-copy > div  img {

    width:100%;
}

main .main-visual-copy > div:nth-child(1) {
    width:50%;
    order:2;
}
main .main-visual-copy > div:nth-child(2) {
    width:80%;
    order:1;
}
main .main-visual-copy > div:nth-child(3) {
    width:50%;
    order:3;
}


main .main-visual h1 {

}

.main-visual-copy-center {

}

.main-visual-copy-center a {
    margin: 20px 0 0;
}


/*========= about ===============*/
#sec-about {
    
}
#sec-about .about-pr1 {
    padding:30px;
    flex-wrap: wrap;
    gap:30px;
    flex-flow: column-reverse;
    text-align: center;

}
#sec-about .about-pr1 img {
    width:80%;
}

#sec-about .about-pr1 h4 {
    font-size: var(--font-size-l1);
}
#sec-about .about-pr1 p {
}


/*========= price index ===============*/

.price-index > ul > li {
    width:calc(50% - 5px);
}

/*========= footer ===============*/


footer .footer-sub {
    padding:20px 0;
    font-size: var(--font-size-s);
    text-align: center;
}



/*========= case ===============*/
.case-tab {
    background-color: var(--color-white);
}
.case-tab label {
    text-align: center;
    width:1%;
    flex-wrap: wrap;
    padding:1em 0.5em;
}

.case-tab label > span {
    font-size:var(--font-size-ss);
    text-align: center !important;
}

.case-tab input:checked+label+.tab-content {
    padding:20px 20px;

}
.case-tab .tab-content h5  {
    text-align: center;
}
.case-price-list > ul > li::before {
    left:50%;
    

    top:-30px;
    transform: translateX(-50%);

}

/*========= features ===============*/
#sec-features .features-cont {
    gap:10px;
    flex-wrap: wrap;
    flex-flow: column-reverse;
    text-align: center;
}

#sec-features .features-cont ul > li  {
    text-align: left;

}

#sec-features .features-cont  img {
    width:90%;
    margin:15px 0;
}

/*========= solution ===============*/
#sec-solution .solution-cont ul {
    flex-wrap: wrap;
    
    align-items: flex-start;

}
#sec-solution .solution-cont ul > li {
    width:100%;
    gap:10px 0;
    padding:20px;
    border-bottom:5px solid var(--color-bg);
    border-right:none;


}
/*========= pricelist ===============*/
.pricelist-list > table {
    display: block;
}
.pricelist-list > table  tr {
    display: block;
    margin-bottom:10px;
    border:1px solid var(--color-border);
}

.pricelist-list > table  tr > th,
 .pricelist-list > table  tr > td{
   display: block;
   padding:0.5em 1em !important;

}

/*========= flow ===============*/

.flow-list ol > li {
    flex-wrap: wrap;
    padding:20px 30px;

}

.flow-list ol > li > div {
    order: 3;
    padding:1em 0 0;

}
.flow-list ol > li > h5{
    order: 1;
}
.flow-list ol > li > img {
    order: 2;
    width:60px;


}

/*========= contact ===============*/
#sec-contact {
}

.contact-form {

}

.contact-form dl {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin:1.2em 0;


}

.contact-form dl dt {
    width:100%;
    padding:0 0 0.5em;
}
.contact-form dl dt.required::after {
    right:0;
    top:inherit;
    bottom:0;
    left:inherit;
    transform: scale(80%);
    width:50px;

 }
 

.contact-form dl dd {
    width:100%;
}
.contact-form dl dd input,
.contact-form dl dd textarea
{
    font-size:var(--font-size-l);
     width: 100%;
}
#agreement {
    margin:1em 0;
}

#agreement #pp.overflow-scroll {
   
    height:250px;
   
}

#agree_check {
    text-align: center;
    margin:1em 0;
}

#agree_check label {
    
}

#agree_check input[type="checkbox"] {
    background-color: var(--color-bg);
    position: relative;
    width: 20px;
    height: 20px;
    vertical-align: -5px;
    margin-right:1em;
}

#agree_check input[type="checkbox"]:checked:before {
    position: absolute;
    top: 1px;
    left: 6px;
    transform: rotate(50deg);
    width: 8px;
    height: 15px;
    border-right: 3px solid var(--color-main);
    border-bottom: 3px solid  var(--color-main);
    content: '';
}


.error_check {
    display: none;

}

#form_submit {
    text-align: center;
    margin-top:3em;

}

#form_submit input {
    display: inline-block;
    width:240px;
    text-align: center;
}

.hide-area {
    display: block;
}

#thnx {

    color:var(--color-main);
    text-align: center;
}


.modal > div {
    width:calc(100% - 30px);
    padding:0;

}



}