@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: 20px;
        --font-size-l3: 40px;
        --font-size-l4: 80px;
    
    }
    body {
     
        min-width:auto;
        margin-bottom:0;
    
    
    
    }
    .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;
    }
    .pc-only {
        display: none;
    }
    .sp-only {
        display: inherit;
    }

    .bnr-style01 {
        flex-wrap: wrap;
        width: 100%;
    }

    .bnr-style01 .txt {
         width: 100%;
         padding:2em;

    }
    .bnr-style01 .img {
        width: 100%;
   }

   

    .slick-slide img {
        width: 100%;
    }

    .lead-txt {
       text-align: justify !important;
    }
    
    
    /*========= header ===============*/
    #header {
        height:68px;

    }
    #header::before {
        position: fixed;
        top:-150px;
        left:-300px;
        transform: scale(0.5, 0.5);
    }
    
    #header-logo {
        width:auto;
        padding:5px 10px;
        
    
    }
    #header-logo a  {
        gap:0;
        padding-top:0.5em;

    }
    #header-logo a img {
        width: 120px !important;
    }
    
    #header-logo a img:last-child {
        width: 180px !important;
    }
    #nav {
    
        width:100%;
        position: fixed;
        flex-wrap: wrap;
        gap:0;
    
    }
    
    #nav-main {
        position: absolute;
        width: 100%;
        margin:0 0;
        right:-100%;
        top:68px;
        transition: all 0.8s;
        border: 3px solid var(--color-main) !important;
        background-color: var(--color-main);
    }
    #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::before {
        content:none
    }
    #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-main ul li.nav-contact {
        width: 100%;
        padding:1em 2em;

    }
    #nav-main ul li.nav-contact a {
        width: auto;
        margin: 0 auto;
    }
    
    
    
    #header #spMenu {
        position: absolute;
    
        right:5px;
        top:5px;
        width:60px;
        height:60px;
        text-align: center;
        box-sizing: border-box;
        counter-increment: item;
        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:20px 0;
        margin-bottom:30px;
    }
  
    .title-styleB h3 {
        transform: translate(-50%, -55%);
     }
 
 
     .title-styleC {
         color:var(--color-over);
         display: flex;
         justify-content: space-between;
         align-items: flex-end;
     
     }
     
     .title-styleC h2 {
         white-space: nowrap;
     }
     
     .title-styleC h3 {      
       
     }
    .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 .main-visual {
        height:auto;
        padding-bottom:200px;

    }
    main .main-visual .main-visual-cont {
        padding:100px 30px 0 ;
    }
    
    main .main-visual .main-visual-cont > .fv-cont {
        position: relative;
        top:inherit;
        left:inherit;
        transform: translate(0,0);
        flex-wrap: wrap;
        align-items: center;
        gap:30px 0;
    
    }

    main .main-visual-copy img{
        width: 100%;

    }

    main .slider {
        width: calc(100vw - 60px);
        height: auto;

    }

    main .slider img {
        width: 100%;
        height: auto;    
    }

    /*========= message ===============*/
    #sec-message {
    }
    #sec-message .img img {
        width: 100%;
    }

    #sec-message .txt h4 {
        white-space: wrap;
        justify-content: justify;
    }

    #sec-message > div > .flex {
        gap:30px 0;
    }
    
    /*========= bnr ===============*/

    #sec-bnr01 {
        margin-top:-180px;
    }

    /*========= news ===============*/
    #sec-news > .flex {
        flex-wrap: wrap;
        gap:0px 0;
    }
    #sec-news .list li a {
        padding:15px 0;
        gap:10px;
    }

    /*========= service ===============*/
    .service-list ul > li {
        width: 100%;
        padding:15px 30px 15px 45px;

    
        gap:30px;
        min-height: auto;
    
    }
    

    /*========= profile ===============*/
    #sec-profile {
        padding-bottom: 50px;
    }
    .profile-cont {
        margin-top: -10px;
        padding:30px;
    }
    .profile-cont .profile-style1 .col-2 > * {
        width: 100%;
    }

/*========= fee ===============*/
    .fee-style1 dl dt,
    .fee-style1 dl dd
     {
        padding:0.5em 2em;
    }

    .fee-style1 table td,
    .fee-style1 table th {
        white-space: nowrap;
        padding:1em 0.5em;
    }

    /*========= access ===============*/
    .access-cont {
        
    
    }
    .access-cont > * {
        flex-basis: 100% !important;

    }

    .access-cont .txt {
       
        padding:2em;
    }

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

    .contact-form-title {
        margin:3em 0;
    
    
    }
    
    .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.2em;
        margin-right: 0;
    }
    .contact-form dl dt.required::after {
        right:0;
        top:inherit;
        bottom:2px;
        left:inherit;
        transform: scale(80%);
    
     }
     
    
    .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;
    
    }

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

    footer .footer-main > .flex {
        align-items: center;
    }

    footer .footer-main > .flex > div {
        flex-basis: 100% !important;
        text-align: center;
    }

    footer .footer-main .logo img {
        width: 200px;
    }

    footer .footer-main .link  {
        display: none;
    }

    footer .footer-main .address .flex  {
        justify-content: center;
        gap:0.5em;
    }     
    footer .footer-copy {
        margin-top:2em;
    }

    
    
    
}