@charset "utf-8";
@media screen and (min-width:1024px) and (max-width:1200px){
    header nav{
        width:70%;
    }
    header nav ul a{
        font-size:14px;
    }
}
@media screen and (max-width:1024px) {
    /*1024 common*/
    body p, a, ul li{
        font-size:14px;
    }
    .page-top{
        bottom:1vh;
    }
    /*1024 wide*/
    .wd-small{
        max-width:1000px;
    }
    .pd100{
        padding:75px 0;
    }
    .pd5-1{
        padding:35px 0 50px;
    }
    /*1024 footer*/
    footer .wrap{
        flex-flow: column;
    }
    footer .right{
        width:auto;
        margin:35px 0;
    }
    footer .right ul li:not(:nth-of-type(1)) a{
        font-size:14px;
    }
    /*1024 top-page*/
    section.health.top .wrap{
        margin-left:5vw;
    }
    section.health.top{
        padding-bottom:0;
    }
    section.health.top .img_logo{
        width:120px;
    }
    .contact-box{
        width:100%;
    }
}
@media screen and (max-width:1000px){
    /*1000 common*/
    .sp-contact, .sp-contact img{
        display: flex;
    }
    .sp-contact {
        position: fixed;
        right: 3vw;
        bottom: 8vh;
        z-index: 100;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin-bottom:30px;
        border-radius: 15px;
        color: #fff;
        background-color: #CA2A23;
        cursor: pointer;
    }
    .sp-contact img{
        width:25px;
    }
    /*1000 view*/
    .pc {
        display: none;
    }
    .ip {
        display: block;
    }
    /*1000 wide*/
    .wd-large{
        width:90vw;
    }
    .pd50{
        padding:25px 0;
    }
    .pd100{
        padding:50px 0;
    }
    .pd200{
        padding:100px 0;
    }
    /*1000 highlight*/
    .h_type01{
        font-size:28px;
    }
    .h_type02{
        font-size:26px;
        text-indent:0;
    }
    .h_type03{
        font-size:20px;
    }
    .h_type03 span{
        margin-top:5px;
        padding-top:5px;
        font-size:14px;
    }
    .h_type04{
        font-size:18px;
    }
    .h_type05{
        font-size:20px;
    }
    /*1000 link*/
    a.type02 {
        height: 30px;
        padding: 25px;
        font-size: 16px;
        line-height: 1.3em;
    }
    a.type02 span{
        width:28px;
        height:28px;
    }
    /*1000 list*/
    ul.products-nav{
        flex-flow: column;
    }
    ul.products-nav li{
        width:100%;
    }
    /*1000 header*/
    header{
        height:75px;
    }
    header nav, header.top nav{
        display: none;
    }
    /*1000 footer*/
    footer .right{
        flex-flow: column;
        margin:0 15px;
    }
    footer .right ul{
        margin-bottom:1.5em;
    }
    footer .right ul li:nth-of-type(1){
        margin-bottom:0.5em;
    }
    footer small{
        font-size:12px;
        text-align: center;
    }
    /*1000 top-page*/
    .text-box.type02{
        margin:25px 15px;
    }
    section.about.top{
        background-position: 20% 50%;
    }
    section.about.top .wrap{
        justify-content: center;
    }
    section.about.top .lg_right{
        width:100%;
        background:rgb(255,255,255,0.7);
    }
    section.products.top a.type01{
        margin:auto;
    }
    section.products.top .wrap{
        margin:35px 0;
        padding:15px;
    }
    section.health.top{
        flex-flow: column-reverse;
        padding:35px 0 0;
        background-image: none;
        background-color:#d62720;
    }
    section.health.top .wrap{
        width:80%;
        margin:auto;
    }
    section.health.top .img_catch{
        width:80%;
        aspect-ratio:16/9;
        object-position: 50% 25%;
    }
    section.health.top .img_logo{
        width:100px;
        margin:35px auto 0;
    }
    aside section.recruit.top{
        background-position: 80% 50%;
    }
    aside section.contact .wrap{
        flex-flow: column;
    }
    aside section.contact .wrap div:nth-of-type(1){
        width:100%;
    }
    aside section.contact .wrap .text-box.type02{
        margin:25px 0;
    }
/*
    .link-box{
        width:100%;
    }
    .link-box .wrap{
        width:100%;
    }
    .link-box a{
        justify-content: space-around;
        padding:25px 15px;
    }
    .link-box a .icon{
        width:28px;
        height:28px;
        margin-right:15px;
    }
    .link-box a .num{
        font-size:32px;
        letter-spacing: 2px;
    }
    .link-box a .time{
        font-size:12px;
    }
*/
    /*1000 about*/
    .hero-box{
        background:linear-gradient(to bottom, transparent 0%, transparent 40%, #d62720 40%, #d62720 100%);
    }
    .hero-box h1{
        font-size:22px;
        bottom:20%;
    }
    .hero-box .img_hero{
        width:70%;
    }
    ul.nav-box{
        flex-flow: column;
        gap:8px;
    }
    ul.nav-box li{
        width:100%;
    }
    ul.nav-box li a.type02{
        padding:15px;
    }
    ul.type01{
        width:100%;
    }
    ul.type01 li{
        justify-content: space-between;
        padding:1em;
    }
    ul.type01 li h3{
        font-size:14px;
    }
    ul.type01 li p{
        width:70%;
    }
    .logo-box{
        flex-flow: column;
        align-items: flex-start;
    }
    .logo-box img{
        width:100px;
    }
    section.about.greeting .wrap{
        flex-flow: column-reverse;
        margin:25px 0;
    }
    section.about.greeting img{
        width:100%;
        aspect-ratio:1/1;
        object-position: 50% 30%;
    }
    section.about.greeting .text-box {
        width:100%;
        margin:25px auto;
        overflow-wrap: inherit;
        line-break:inherit;
        word-break: inherit;
    }
    ul.history{
        width:100%;
    }
    ul.history li h3{
        width:4.2em;
        font-size:14px;
    }
    ul.history li span{
        width:30px;
        margin:0;
    }
    ul.history li span::after{
        height:80px;
    }
    ul.history li:nth-last-of-type(1) span::after, ul.history li:nth-last-of-type(2) span::after {
        height: 0px;
    }
    ul.history li span.large i{
        font-size:1em;
    }
    ul.history li p{
        width:75%;
    }
    /*1000 health*/
    section.health.ykk img{
        width:80%;
    }
    ul.type02{
        margin:25px auto;
    }
    ul.type02 li{
        margin:10px 0 10px 2em;
        font-size:14px;
    }
    /*1000 recruit*/
    section.recruit.concept .wrap{
        flex-flow: column;
        padding:35px 0;
    }
    section.recruit.concept h2{
        font-size:26px;
    }
    section.recruit.concept .text-box{
        width:90%;
        margin:25px auto;
    }
    section.recruit.concept .text-box p{
        margin:15px 0;
    }
    section.recruit.concept .img_catch{
        width:90%;
    }
    section.recruit.voice .wrap{
        flex-flow: column;
        margin:35px auto;
    }
    section.recruit.voice .box01{
        width:100%;
        margin-bottom:35px;
    }
    section.recruit.outline ul.type01 li{
        padding:1em 0.5em;
    }
    section.recruit.outline ul.type01 li p {
        width:75%;
        word-break: normal;
    }
    .contact-box{
        flex-flow: column;
        margin:50px auto;
    }
/*
    .contact-box .link-box{
        width:90%;
        margin-top:15px;
    }
    .contact-box .link-box a{
        padding:15px;
    }
*/
    /*1000 products*/
    article.lower.third{
        padding:50px 0;
    }
    section.products.p-list ul.products-nav{
        margin:35px 0;
    }
    .products-box{
        margin:35px 0 50px;
    }
    .products-box .box01{
        flex-flow: column;
        gap:20px;
        margin:15px 0 25px;
    }
    .products-box .box01 img{
        width:100%;
        aspect-ratio:16/9;
    }
    article.products.outline .title-box{
        margin:100px auto 35px;
    }
    article.products.outline .title-box .h_type02 span{
        font-size:18px;
    }
    section.products.outline-box{
        margin:0 0 35px;
    }
    section.products.use .box01{
        margin:25px 0 50px;
    }
    .content-wrap{
        flex-flow: column;
    }
    .content-wrap .side-box{
        width:100%;
        font-size:14px;
        line-height: 1.3em;
    }
    .content-wrap .side-box ul{
        display: flex;
        flex-flow: column;
        gap:5px;
        margin-bottom:35px;
    }
    .content-wrap .side-box ul li{
        border:solid 1px;
        border-radius: 10px;
    }
    .content-wrap .side-box .sticky-box a.type01{
        margin-left:auto;
    }
    .content-wrap .main-box{
        width:100%;
    }
    .content-wrap .img_hero{
        margin-bottom:25px;
    }
    .content-wrap .main-box .h_type02{
        font-size:24px;
    }
    section.products.merit .box01{
        flex-flow: column;
        justify-content: center;
        gap:0;
        padding:25px;
    }
    section.products.merit .box01 .icon-box img{
        margin:auto;
    }
    section.products.merit .box01 h4 {
        overflow-wrap: anywhere;
        line-break: strict;
        word-break: auto-phrase;
    }
    section.products.merit .box01 .text-box{
        width:95%;
        text-align: center;
        overflow-wrap: anywhere;
        line-break: strict;
        word-break: auto-phrase;
    }
}
@media screen and (max-width:768px){
    /*768 view*/
    .sp{
        display: block;
    }
    /*768 wide*/
    .pd100{
        padding:50px 0;
    }
    .pd0-1{
        padding:0 0 50px;
    }
    /*768 list*/
    ul.form{
        width:100%;
    }
    ul.form li{
        flex-flow: column;
        padding:1.5em 10px;
    }
    ul.form li label{
        width:100%;
        margin-bottom:10px;
        font-size:16px;
    }
    ul.form li input#agree{
        width:22px;
        height:22px;
        margin:0 5px 0 0;
    }
    /*768 header*/
    header{
        height:70px;
    }
    header .wrap{
        height:70px;
    }
    header .logo{
        height:35px;
    }
    /*768 toppage*/
    aside section.contact .box01{
        width:100%;
    }
    .link-box{
        height:auto;
        box-sizing: border-box;
    }
    .link-box a .icon{
        width:30px;
        height:30px;
        margin-right:15px;
    }
    .link-box a{
        padding:25px 25px;
    }
    .link-box a .num{
        font-size:28px;
        line-height: 1em;
    }
    .link-box.mail p{
        font-size:20px;
    }
    /*768 contact*/
    .contact-box{
        width:100%;
        max-width:600px;
        padding:25px 0;
    }
    .contact-box .text-box p{
        margin-bottom:25px;
        text-align: center;
    }
    .contact-box .link-box{
        width:95%;
    }
    ul.nav-box.contact{
        flex-flow: row;
    }
    .s-box .box03{
        padding:1em;
    }
    .s-box .box03 h4{
        font-size:16px;
    }
}
@media screen and (max-width:500px){
    /*500 common*/
    a.anchor {
        display: block;
        position: relative;
        top: -80px;
        visibility: hidden;
    }
    .f-wrap{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /*500 basic*/
    .page-top{
        width:50px;
        height:50px;
        right:5vw;
        bottom:5vh;
    }
    .sp-contact{
        width:50px;
        height:50px;
        margin-bottom:20px;
/*        right:5vw;*/
/*        bottom: 12vh;*/
    }
    body p, a, ul li{
        line-height: 1.6em;
    }
    /*500 wide*/
    .pd100{
        padding:35px 0;
    }
    .pd0-1{
        padding:0 0 50px;
    }
    /*500 highlight*/
    .h_type02 span.wrap{
        margin:0 10px;
    }
    /*500 footer*/
    footer .right ul li{
        line-height: 2em;
    }
    /*500 top-page*/
    .hero.top{
/*        aspect-rato:inherit;*/
/*        height:320px;*/
    }
    .hero.top h2{
        bottom:25%;
        font-size:28px;
        line-height: 1.3em;
    }
    .slide img{
/*        height:320px;*/
    }
    .img_hero{
        height:100%;
        object-position: 70% 50%;
    }
    .img_line{
        bottom:-9%;
    }
    /*500 about*/
    .hero-box .img_hero{
        width:70%;
        height:auto;
        object-position: inherit;
    }
    /*500 contact*/
    ul.nav-box.contact{
        flex-flow: column;
        margin:50px auto;
    }
}