.sp440{display:none}

@media screen and (min-width: 751px) {
    .sp{display:none !important}
    /* NAV */
    nav{margin: 0 3.2rem 0 auto;}
    .h_box{height: 9.6rem;}
    .h_inner{padding: 0 0 0 2.5%;width: 100%;max-width: 192rem;margin: 0 auto;}
    .hamburger{display:none;}
    .nav_list{display: flex;justify-content: space-between;gap: 3.32vw;}
    .nav_list>li>a,
    .nav_list>li>.hook{display:flex;align-items:center;position:relative;font-weight: 500;font-size: 1.8rem;}
    .nav_list>li.parent{position:relative;}
    .nav_list>li.parent>.hook{cursor:default}
    .sub{position:absolute;z-index:1;padding-top: 1.3rem;transition:all .3s;top: 100%;left: -1.8rem;}
    .sub ul{width: 25.4rem;background-color: #FFF;border-radius: 1rem;padding: 1.8rem 2rem;box-shadow: var(--shadow1);}
    .sub ul li:not(:last-child){margin-bottom: 1.2rem;}
    .sub ul li a{font-weight: 500;padding-left: 1.5rem;position: relative;}
    .sub ul li a::before{content: '';position: absolute;width: 0.9rem;height: 1.3rem;background: url('../images/nav_ic.png') no-repeat center /contain;left: 0;top: 0.6rem;transition: all 0.3s;}
    .nav_list>li:not(.parent)>a::after{content: '';position: absolute;width: 0.8rem;height: 0.8rem;background: var(--mcolor);left: calc(50% - 0.4rem);bottom: -1.3rem;border-radius: 50%;transition: all 0.3s;opacity: 0;}
    /* CUSTOM */
    .find_a,.find_out{cursor: pointer;}

    /* HOVER */
    .sub ul li a:hover{color: var(--mcolor);}
    .sub ul li a:hover::before{left: 0.2rem;}
    .nav_list>li:hover .hook,
    .nav_list>li:hover>a{color:var(--mcolor);text-decoration: none;}
    .parent:not(:hover) .sub{display: none;}
    .parent:hover .sub{transform:translate(0,0);}
    .btn a:hover,.btn a.hv,.sec01_list li:hover{border:0.1rem solid var(--mcolor);color: var(--mcolor);outline: 0.1rem solid var(--mcolor);}
    .sec01_list li:hover .tt a{color: var(--mcolor);}
    .h_contact a:hover,.ft_cta a:hover{background: linear-gradient(to right,#40bbca, #a8d88c);;}
    .nav_list>li>a:hover::after{opacity: 1;}
    .sec02_list li .tt:hover{text-decoration: underline;text-underline-offset: 0.2rem;cursor: pointer;}
    .sec03_list dl{position: relative;}
    .sec03_list dl::after{content: '';position: absolute;width: 100%;height: 100%;top: 0;left: 0;border-radius: 1rem;opacity: 0;border: 0.3rem solid;}
    .sec03_list dl:hover::after{opacity: 1;}
    .sec03_list dl:nth-of-type(1)::after{border-color: #00A0B1;}
    .sec03_list dl:nth-of-type(2)::after{border-color: #74BC57;}
    .sec03_list dl:nth-of-type(3)::after{border-color: #1C841C;}
    .sec03_list dl:nth-of-type(4)::after{border-color: #238578;}
    .ft_links li a:hover{color: var(--mcolor);text-decoration: underline;text-underline-offset: 0.2rem;}
    .to_top:hover{opacity: 0.7;}
}


@media screen and (min-width: 1890px){
    /* .mv{width: 1920px;margin: 0 auto;left: 50%;transform: translateX(-50%);} */
}
@media screen and (min-width: 751px) and (max-width: 1300px){
    nav{margin: 0 1.5vw 0 auto;}
    .h_contact a,.nav_list>li>a, .nav_list>li>.hook{font-size: clamp(12px,1.4vw,16px);}
    .h_contact a span{padding-left: 2.5vw;}
    .h_contact a span::before{width: 2vw;height: 2.1vw;top: calc(50% - 1vw);}
}
@media screen and (min-width: 751px) and (max-width: 1200px){
    main{padding-top: 7rem;}
    .h_box{height: 7rem;}
    .nav_list{gap: 2vw;}
    .slick-dots{bottom: 1.5rem;}
    .slick-dots li{width: 1.2rem;height: 1.2rem;}
    .sec03_list dl dt{width: 24vw;height: 16vw;top: calc(50% - 8vw);left: 3vw;}
    .sec03_list dl dt .sm{font-size: 1.5vw;}
    .sec03_list dl dt .lg{font-size: 2.4vw;}
    .ft_links{gap: 2vw;}
    .ft_links li a,.ft_add{font-size:clamp(14px,1.5vw,16px);}
    .ft_box02_l{max-width: 35%;}
    .btn a{width: 20rem;}
    .ft_cta a{font-size:clamp(16px,4vw,24px);}
    .sec02_box{gap: 3rem;}
}

/* screen-min:750px */
@media screen and (max-width: 750px) {
    img{max-width:100%; height: auto;}
    #wrapper,header,main,footer,.inner{width:100%!important;min-width:unset!important}
    .pc{display:none!important}
    body.is_nav{overflow: hidden;}
    body.mac nav{padding-bottom: 160px;}
    /* NAV */
    nav{display:block;position:fixed;top:48px;left:0;width:100%;height:calc(100vh - 48px);overflow:auto;z-index:100;display:none;background: #FFF;padding:0 16px 80px;}
    nav .inner{padding: 0;}
    .nav_list{flex-direction:column}
    .nav_list ul,
    .nav_list li{width:100%}
    .nav_list > li:not(.parent) > a{border-bottom:solid 1px #C7C7C7;}
    .nav_list .hook, .nav_list a{display:block;padding: 19px 0 12px;font-size:1.8rem;font-weight:500;position: relative;}
    .nav_list > li > a::after{content: '';position: absolute;width: 9px;height: 13px;background: url('../images/nav_ic.png') no-repeat center /contain;right: 0;top: calc(50% - 5px);}
    .nav_list .hook::before,
    .nav_list .hook::after{content:"";position:absolute;width: 16px; height: 2px; background-color: #FFF;top:calc(50% - 1px);right:10px; transition: all 0.3s;}
    .nav_list .hook::after{transform: rotate(-90deg);}
    .nav_list .hook.open::after{transform: rotate(0);}
    .sub ul li:not(:last-child){margin-bottom: 12px;}
    .sub ul li a::before {content: '';position: absolute;width: 16px;height: 2px;background: var(--mcolor);left: 0;top: 1.5rem;transition: all 0.3s;}

    .nav_list li.parent .sub{padding: 0 0 0 18px;}
    .sub ul:not(:last-child){margin-bottom:15px}
    .sub a{padding: 0 0 0 25px;}
    .hamburger{position:absolute;right:0;bottom:3px;font:inherit;display:block;overflow:visible;margin:0;cursor:pointer;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity,filter;text-transform:none;color:inherit;border:0;z-index: 101}

    /*=====================================================
                          C U S T O M
    ======================================================*/
    /*============ HEADER ============*/
    .h_box{height:48px}
    .h_inner{padding: 0 0.9rem;}

    /*============ Main ============*/
    main{padding-top: 48px;}
    #logo{width: 18.4rem;}
    .h_contact{margin: 0 31px 0 0;}
    .h_contact a{font-size: 1.3rem;width: 12rem;height: 3.2rem;border-radius: 0.3rem;}
    .h_contact a span{padding-left:1.8rem;}
    .h_contact a span::before{width: 1.3rem;}
    .mv_ite{height: 56rem;}
    .mv_ite img{max-width: inherit;max-height: 100%;}
    .slick-dots{padding: 0.4rem 1rem;bottom: 2.3rem;}
    .slick-dots li{width: 1.2rem;height: 1.2rem;}
    .slick-dots li:not(:last-child){margin-right: 0.4rem;}

    .ttl_h2{font-size: 2.2rem;margin-bottom: 1.8rem;}
    .ttl_h2::before{width: 3rem;height: 3rem;margin-bottom: 0;}
    .sec01{padding: 4rem 0;}
    .sec01_list{width: calc(100% + 3.2rem);margin-left: -1.6rem;}
    .sec01_des{font-size: 1.4rem;}
    .cat{font-size: 1.1rem;}
    .sec02{padding-bottom: 6rem;}
    .sec02_frame{padding: 2.2rem 1.5rem;margin-bottom: 4rem;}
    .sec02_list li .tt{line-height: 1.6;}
    .sec03_list{gap: 0;width: calc(100% + 3.2rem);margin-left: -1.6rem;}
    .sec03_list dl dt{width: calc(100% - 1.8rem);height: calc(100% - 1.8rem);top: 50%;left: 50%;transform: translate(-50%,-50%);max-width: 21rem;max-height: 18rem;}
    .sec03_list dl dt .sm{font-size: 1.3rem;margin-bottom: 0.5rem;}
    .sec03_list dl:nth-of-type(3) dt .sm{margin-bottom: 1.5rem;}
    .sec03_list dl dt .lg{font-size: 1.8rem;}
    .sec03_list dl dd{border-radius: 0;}
    /*============ FOOTER ============*/
    address{font-size: 1.3rem;letter-spacing: -0.02rem;}
    .ft_cta a{font-size: 2rem;padding: 4.3rem 1.5rem 3.5rem;}
    .ft_cta a::before{margin-bottom: 0.2rem;}
    .ft_box01{padding: 4.8rem 0;background: url('../images/ft_bg_sp.png') no-repeat center bottom /100% 120px}

    .ft_box02{padding-bottom: 5.5rem;}
    .ft_box02_inner{padding: 3.2rem 0 2.6rem;width: fit-content;margin: 0 auto;min-width: 34.3rem;}
    .ft_box02_l{margin-bottom: 2.5rem;}
    .ft_logo{width: 29.9rem;margin-bottom:1.5rem;}
    .ft_links{gap: 2rem;}
    .ft_links li a{font-size: 1.5rem;padding-left: 2.3rem;line-height: 1.9;}

    /* TO TOP */
    .to_top{width:3.2rem;height:3.2rem;right:1.6rem;bottom: 1.6rem;}
    /*============ END 750 ============ */
}



/* screen-max:440px */
@media screen and (max-width: 440px) {
    .sp440 {display: block !important;}
    .pc440{display: none !important}
    .mv_ite_1 img{transform: translateX(100px);}
}

/* screen-max: 360px */
@media screen and (max-width: 374px) {
    html{font-size: 53%;}
    address{font-size: 1.2rem;}
}