@media screen and (max-width:900px) {
    .contentInner {
        width: 90%;
    }
    .pcNone {
        display: block !important;
    }
    .spNone {
        display: none !important;
    }
    header h1 {
        text-align: right;
        padding: 8px 0.6em 0;
        color: #707070;
        font-size: 1rem;
        font-weight: lighter;
    }
    header h1 img {
        display: inline-block;
        margin-right: 5px;
    }
    /* slider */
    .slideBg .pcNone{
        display: none!important;
    }
    .slideBg .spNone{
        display: block!important;
    }
    /* swiper */
    .swiperImg {
        width: 50%;
    }
    .service .swiperContent {
        width: 50%;
        padding: 0 10px;
    }
    .service .swiperContent h3 {
        width: 100%;
        margin-bottom: 10px;
    }
    .service .swiperContent .swiperTxt {
        width: 100%;
        font-size: 0.7rem;
        padding-left: 0;
        line-height: 1.5;
        margin-bottom: 15px;
    }
    .service .swiperContent .mainTtl {
        font-size: 0.75rem;
    }
    .swiperImg img {
        width: 100%;
        height: auto;
    }
    .swiper-button-prev, 
    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next{
        bottom: 0;
        top: inherit;
        left: 50%;
        right: inherit;
        width: 10px;
        height: 18px;
        margin-top: 0;
        -webkit-transform: translateY(0) translateX(-50%);
        transform: translateY(0) translateX(-50%);
        background-size: 10px 18px;
    }
    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev{
        margin-left: 20px;
    }
    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next{
        margin-left: -20px;
    }
    .swiper-container {
        padding: 0 0 30px;
    }
    /* company */
    .companyInner {
        width: 90%;
    }
    /* service */
    .serviceAnc ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .serviceAnc li a {
        font-size: 1.0rem;
        border: 1px solid #C3F7E7;
        text-align: center;
        padding: 10px;
    }
    .serviceAnc li:nth-child(1) a {
        border-bottom: none;
        border-right: none;
    }
    .serviceAnc li:nth-child(2) a {
        border-bottom: none;
    }
    .serviceAnc li:nth-child(3) a {
        border-right: none;
    }
    .serviceAnc li a:before {
        display: none;
    }
    .serviceAnc li {
        margin: 0;
        width: 50%;
    }
    .serviceAnc {
        margin-bottom: 50px;
    }
    .serviceTop {
        height: 150px;
        margin-bottom: 40px;
        background: #f0faf7;
    }
    /* doctors */
    .doctors .commonTtl2 {
        width: 100%;
        text-align: center;
        position: absolute;
        top: -12px;
        font-size: 1.2rem;
    }
    .servicePage .commonTtl2:before {
        content: "";
        display: block;
        position: absolute;
        bottom: -10px;
        right: 0;
        left: 0;
        margin: 0 auto;
        height: 5px;
        width: 40%;
        background-color: #C3F7E7;
    }
    .doctors .docTxt {
        width: 100%;
    }
    .series.helena {
        margin-top: 40px;
    }
    .seriesContent {
        margin-right: 0;
        width: 100%;
    }
    .series {
        display: block;
        align-items: center;
        margin-bottom: 150px;
        width: 100%;
        margin-bottom: 40px;
    }
    .products .productList {
        display: block;
        width: 100%;
    }
    .products .productList > li {
        width: 100%;
        padding: 0 0 40px;
        border-right: none;
        margin-bottom: 40px;
        border-bottom: 5px solid #fff;
    }
    /* vitamin */
    .vitamin .vitaminContent {
        display: block;
    }
    .vitamin .ttlBox {
        position: absolute;
        top: -60px;
        width: 70%;
    }
    .vitamin .ttlBox img {
        width: 100%;
        height: auto;
    }
    .vitamin .commonTtl2 {
        font-size: 1.4rem;
        position: absolute;
        margin-left: 50px;
        margin-top: -30px;
    }
    .vitamin .contentInner {
        padding-top: 170px;
        padding-bottom: 100px;
    }
    .vitaminLeft {
        margin-top: 20px;
        margin-right: 0;
        width: 100%;
    }
    .vitaminImg {
        width: 50%;
        margin: 20px auto 0;
    }
    .vitaminImg img {
        width: 100%;
        height: auto;
    }
    /* medical */
    .medical .medicalContent {
        width: 100%;
    }
    .medical .contentInner {
        padding-top: 200px;
        padding-bottom: 100px;
    }
    .medical .ttlBox {
        position: absolute;
        top: -50px;
        width: 70%;
    }
    .medical .ttlBox img {
        position: static;
        right: 0;
        top: 0;
        width: 100%;
        height: auto;
    }
    .medical .medicalList {
        display: block;
    }
    .medical .ttlBox .commonTtl2 {
        font-size: 1.4rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: 72px;
        margin-top: -40px;
        -webkit-transform: translateY(0) translateX(-50%);
        transform: translateY(0) translateX(-50%);
    }
    .medical .medicalList {
        display: block;
    }
    .medical .medicalImg {
        text-align: center;
        width: 30%;
        margin: 0 1em 0 0;
    }
    .medical .medicalImg img {
        width: 100%;
        height: auto;
    }
    .medical .medicalCont {
        width: 65%;
    }
    .medical .medicalList h3 {
        text-align: left;
    }
    .medical .medicalList li {
        width: 100%;
        margin: 0 0 20px;
        display: flex;
        padding-bottom: 20px;
        border-bottom: 5px solid #fff;
    }
    .medical .medicalList .medicaltxt {
        font-size: 0.7rem;
        color: #707070;
        line-height: 1.8;
    }
    /* environ */
    .environ .contentInner {
        padding-top: 40px;
    }
    .environContent {
        display: block;
    }
    .envrionLeft {
        width: 100%;
        margin-right: 0;
        margin-bottom: 40px;
    }
    .environRight {
        width: 50%;
        margin: 0 auto;
    }
    .environRight img{
        width: 100%;
        height: auto;
    }
    .environ .commonTtl2 {
        font-family: serif;
        font-size: 1.2rem;
        text-align: center;
        display: block;
        margin-bottom: 40px;
    }
    /* project */
    .project .contentInner {
        padding-top: 200px;
    }
    .project .projectImg {
        width: 70%;
        position: absolute;
        top: -60px;
    }
    .project .projectImg img{
        width: 100%;
        height: auto;
    }
    .project .commonTtl2 {
        font-size: 1.2rem;
        text-align: center;
        width: 100%;
        margin-bottom: 30px;
    }
    .projectContent {
        width: 100%;
    }
    .doctorsHistory {
        clear: both;
        width: 100%;
    }
    .doctorsHistory .commonTtl3 {
        margin-right: 0;
        margin-bottom: 6px;
        font-size: 1.2rem;
    }
    .doctorsHistory .historyTxt {
        font-size: 0.8rem;
    }
    .doctorsHistory li {
        font-size: 0.7rem;
    }
    /* consult */
    .consult .consultImg {
        position: absolute;
        top: -60px;
        right: 0;
        width: 70%;
    }
    .consult .consultImg img {
        width: 100%;
        height: auto;
    }
    .consultContent .commonTtl2 {
        font-size: 1.2rem;
        margin-bottom: 40px;
        width: 100%;
        text-align: center;
    }
    .consultContent {
        width: 100%;
    }
    .consult .contentInner {
        padding-top: 200px;
        padding-bottom: 0;
    }
    /* salon */
    .salonTop {
        height: 250px;
    }
    .salonLogo img {
        width: 80px;
        height: 80px;
    }
    .salonTopContent h1 {
        font-size: 1.5rem;
    }
    .salonMenu .contentInner {
        display: block;
    }
    .salonMenu .commonTtl2 {
        margin: 0;
        display: block;
        text-align: center;
        font-size: 1.4rem;
    }
    .salonMenu .commonTtl2:before {
        content: "";
        display: block;
        position: absolute;
        bottom: -10px;
        left: 0;
        right: 0;
        margin: 0 auto;
        height: 5px;
        width: 50%;
        background-color: #C3F7E7;
    }
    .salonMenu ul {
        display: block;
        flex-wrap: wrap;
        margin-top: 50px;
        width: 100%;
    }
    .salonMenu li a {
        font-size: 1.0rem;
        border: 1px solid #C3F7E7;
        text-align: center;
        padding: 10px;
    }
    .salonMenu .contentInner {
        display: block;
        width: 100%;
    }
    .salonMenu ul {
        display: flex;
        flex-wrap: wrap;
        margin-top: 50px;
        width: 100%;
    }
    .salonMenu li {
        width: 50%;
        font-family: serif;
        margin-right: 0;
        font-size: 1.2rem;
        margin-bottom: 0;
    }
    .salonMenu li a {
        font-size: 0.7rem;
        border: 1px solid #C3F7E7;
        text-align: center;
        padding: 10px;
        width: 100%;
    }
    .salonMenu li:nth-child(odd) {
        margin-right: 0;
    }
    .salonMenu li a:before {
        display: none;
    }
    /* counseling */
    .counseling .couselImg {
        width: 70%;
    }
    .counseling .couselImg img {
        width: 100%;
        height: auto;
    }
    .counseling .contentInner {
        padding-top: 130px;
        padding-bottom: 50px;
    }
    .counseling .contentInner {
        padding-top: 230px;
    }
    .counseling .counselContent {
        width: 100%;
    }
    /* magic */
    .salonContent {
        display: block;
    }
    .salonLeft {
        width: 50%;
        margin: 0 auto;
    }
    .salonLeft img {
        width: 100%;
        height: auto;
    }
    .salonRight {
        width: 100%;
        margin: 30px auto 0;
    }
    .magicImgList li {
        margin: 0;
        width: 25%;
    }
    .magicImgList li img {
        width: 100%;
        height: auto;
    }
    .smallTxt {
        text-align: left;
    }
    .menuTtl {
        margin: 0 auto 20px;
    }
    .courseContent {
        display: block;
    }
    .courseLeft {
        width: 100%;
        margin: 0 0 20px;
    }
    .courseRight {
        width: 100%;
        margin: 0;
    }
    .courseContent .menuList {
        margin-left: 0;
    }
    .courseContent .courseTtl {
        font-size: 1rem;
    }
    .courseContent .price {
        font-size: 0.9rem;
        margin-bottom: 5px;
    }
    .courseContent .menuList.option li:nth-child(odd) {
        margin-right: 0;
    }
    .courseContent .menuList.option li {
        width: 100%;
        margin-bottom: 10px;
    }
    .chemicalImg img{
        width: 100%;
        height: auto;
    }
    .salonPage .commonTtl2 {
        font-size: 1.1rem;
        font-family: serif;
    }
    .salonPage .commonTtl2:before {
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .salonPage .contentInner {
        text-align: center;
        padding-bottom: 50px;
    }
    .courseContent .courseTtl {
        text-align: left;
    }
    .coursetxt {
        text-align: left;
    }
    .courseContent .commonTtl3 {
        font-size: 1.2rem;
        padding-bottom: 0;
        text-align: left;
    }
    .staff .salonLeft {
        margin: 0;
        width: 100%;
    }
    .staff .salonRight {
        width: 50%;
        margin: 0 auto;
    }
    .staff .salonRight img {
        width: 100%;
        height: auto;
    }
    .contact2 .contentInner .commonBtn a {
        width: 100%;
    }
    .staff .commonTtl2:after {
        top: -60px;
        right: 0;
        left: 0;
        margin: 0 auto;
    }
    .salonMenu .smallTxt {
        width: 90%;
        margin: 0 auto 30px;
    }
    .salonMenu .contentInner {
        padding-bottom: 70px;
        padding-top: 40px;
    }
    .courseContent .curseOrder:after {
        top: 0;
        bottom: 0;
        margin: auto 0;
    }
    /* contact */
    .contactForm .contentInner {
        width: 90%;
    }
    .contactForm .commonTtl2 {
        font-size: 1.5rem;
        width: 100%;
        text-align: center;
    }
    .contactForm .commonTtl2:before {
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .contactContent table th,
    .contactContent table td{
        display: block;
        width: 100%;
    }
    .contactContent table th{
        padding: 10px 10px 0;
    }
    .contactContent table td{
        padding: 10px;
    }
    .contactContent input, 
    .contactContent textarea{
        border: 1px solid #ccc;
    }
    .contactBtn button {
        width: 100%;
    }
    .contactEx {
        font-size: 0.7em;
    }
    .contactTop h1 {
        font-size: 1.5rem;
    }
    .contactTop {
        height: 150px;
        margin-bottom: 40px;
    }
    /* footer */
    footer {
        padding: 20px 0 0;
    }
    .footerInner {
        margin-bottom: 20px;
    }
    .footerLogo {
        width: 70%;
        text-align: center;
    }
    .footerLogo img {
        width: 70px;
    }
    .footerLogo span {
        display: inline-block !important;
        color: #707070;
        margin-left: 10px;
    }
    /* 20201206 追記 */
    .service2Page .commonTtl2:before {
        content: "";
        display: block;
        position: absolute;
        bottom: -10px;
        right: 0;
        left: 0;
        margin: 0 auto;
        height: 5px;
        width: 40%;
        background-color: #C3F7E7;
    }
    .project2 .commonTtl2 {
        width: 100%;
        text-align: center;
        font-size: 1.2rem;
    }
    .project2 {
        padding-bottom: 100px;
    }
    .project2Flex {
        flex-direction: column;
    }
    .project2Left {
        width: auto;
    }
    .service2Page .consult .contentInner {
        padding-top: 100px;
        padding-bottom: 10px;
    }
    .service2Page .project .projectImg {
        width: 280px;
        top: inherit;
        margin-bottom: 30px;
        position: relative;
    }
    .service2Page .project .contentInner {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .service2Page .consultContent {
        margin-bottom: 30px;
    }
    .service2Page .projectFlowImg img {
        width: 100%;
        margin: 0 auto;
    }
    .service2Page .projectFlowImg {
        clear: both;
        text-align: center;
        margin-bottom: 40px;
    }
    .service2Page .project .commonTtl3 {
        width: auto;
        font-size: 1rem;
    }
    .service2Page .projectFlow ul {
        width: auto;
        margin: 0 auto;
    }
    .service2Page .projectFlow li {
        align-items: flex-start;
        flex-direction: column;
        padding: 10px 10px 10px 35px;
    }
    .service2Page .projectFlow li p {
        width: auto;
        padding: 0;
        margin-top: 10px;
        font-size: 0.7rem;
    }
    .service2Page .doctoprojectrsPartner .commonTtl3 {
        margin-bottom: 20px;
    }
    .service2Page .doctorsNameImg img {
        width: 180px;
    }
    .doctorsNameImg {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .doctorsNameImg span {
        border: 1px solid #FFBCEB;
        padding: 3px 30px;
        font-size: 0.7rem;
        color: #707070;
        font-family: serif;
    }
    .denter .doctorsNameImg span {
        border: 1px solid #A5C8E6;
    }
    .doctorAco li {
        flex-direction: column;
        font-size: 0.6rem;
        justify-content: flex-start;
        margin-bottom: 10px;
    }
    .doctorAco .doctorLeft {
        width: auto;
        font-weight: bold;
    }
    .doctorAco ul {
        margin: 10px 0 60px;
    }
    .doctorAco h4 {
        padding: 5px 0;
    }
    .doctorAco .doctorRight {
        width: auto;
        font-size: 0.7rem;
    }
    .doctorAco2 .doctorLeft {
        font-size: 0.8rem;
    }
    .contentInner .zo .commonBtn a {
        width: 100%;
    }
    .service2Page .environ .contentInner {
        padding-top: 40px;
        padding-bottom: 60px;
    }
    .service2Page .doctorsPartner .commonTtl3 {
        margin-bottom: 30px;
    }
}

@media screen and (max-width:600px) {
    /* common */
    .contentInner {
        width: 90%;
    }
    header .menuBtn {
        display: block;
    }
    header .nav {
        display: none;
    }
    header .menuBtn {
        top: 1em;
        left: 1em;
    }
    .commonTable {
        font-size: 0.7rem;
    }
    .commonTable th {
        font-weight: normal;
        padding: 20px 15px;
        width: 9em;
    }
    .contentInner .commonBtn a {
        width: 100%;
    }
    /* hero slide */
    .hero {
        height: inherit;
        margin-bottom: 50px;
    }
    .heroSlide {
        position: absolute;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: auto;
    }
    /* slider */
    .slideBg .pcNone{
        display: block!important;
    }
    .slideBg .spNone{
        display: none!important;
    }
    .slideBg {
        position: static;
    }
    .slideContent h2 {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }
    .slideContent {
        margin-left: 95px;
    }
    .slideContent .slideTxt {
        font-size: 0.5rem;
    }
    /* service */
    .service {
        margin: 0 0 50px;
    }
    /* greeting */
    .greeting {
        width: 90%;
    }
    .greetingTxt h3 {
        position: relative;
        padding-left: 60px;
    }
    .greetingTxt h3:before {
        content: '';
        position: absolute;
        background: url(../images/common/logo.svg);
        background-size: 50px 50px;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
    }
    /* company */
    .companyInner {
        width: 90%;
    }
    /* service */
    .vitamin .contentInner {
        padding-top: 70px;
        padding-bottom: 100px;
    }
    .vitamin .ttlBox {
        width: 280px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .vitamin .commonTtl2 {
        font-size: 1.0rem;
    }
    .vitaminImg {
        width: 100%;
    }
    /* environ */
    .environRight {
        width: 100%;
    }
    /* medical */
    .medical .ttlBox {
        width: 280px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .medical .ttlBox .commonTtl2 {
        font-size: 1.0rem;
    }
    .medical .contentInner {
        padding-top: 110px;
    }
    .medical .medicalList li {
        padding-bottom: 0;
    }
    .project .projectImg {
        width: 280px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .project .contentInner {
        padding-top: 0px;
    }
    /* consult */
    .consult .consultImg {
        width: 280px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .consult .contentInner {
        padding-top: 100px;
    }
    /* counseling */
    .counseling .couselImg {
        width: 280px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    /* magic */
    .salonLeft {
        width: 100%;
    }
    /* staff */
    .staff .salonRight {
        width: 100%;
    }
    /* footer */
    .pageTop {
        right: 10px;
        bottom: 10px;
    }
}

@media screen and (max-width:480px) {
    /* project */
    .project .contentInner {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .counseling .contentInner {
        padding-top: 120px;
    }
}