@charset "utf-8";
@media screen and (max-width:640px) {
    body,
    html {
        height: 100%
    }
    .align-left,
    body {
        text-align: left
    }
    #Footer .inner ul li a,
    #block06 .voice .inner p.link-text a,
    #block07 ul li a {
        transition: all .2s ease 0s;
        text-decoration: none
    }
    html {
        font-size: 62.5%
    }
    body {
        margin: 0;
        padding: 0;
        font-size: 1.6rem;
        line-height: 1.5em;
        font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
        color: #575747;
        -webkit-text-size-adjust: 100%;
        background: #FFF
    }
    a {
        color: #0085B2;
        text-decoration: underline
    }
    a:hover {
        color: #E6423D;
        text-decoration: none
    }
    .align-right {
        text-align: right
    }
    #block01 h2,
    #block01 p,
    .align-center,
    h2.belt {
        text-align: center
    }
    .float-left {
        float: left
    }
    .float-right {
        float: right
    }
    img {
        width: 100%;
        height: auto
    }
    .img-left,
    .img-right {
        margin: 5% 0!important
    }
    .mt-none {
        margin-top: 0!important
    }
    .mt-10 {
        margin-top: 10px!important
    }
    .mt-25 {
        margin-top: 25px!important
    }
    .mt-40 {
        margin-top: 40px!important
    }
    .mt-50 {
        margin-top: 50px!important
    }
    .delay1s {
        animation-delay: 1s
    }
    .delay2s {
        animation-delay: 2s
    }
    .delay3s {
        animation-delay: 3s
    }
    .delay4s {
        animation-delay: 4s
    }
    .delay5s {
        animation-delay: 5s
    }
    .clearfix {
        zoom: 1
    }
    .clearfix:after {
        content: "";
        display: block;
        clear: both
    }
    .clearfloat {
        clear: both;
        height: 0;
        font-size: 1px;
        line-height: 0
    }
    #block02 ul li,
    h2.belt {
        line-height: 1.1;
        font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", sans-serif;
        font-weight: 900
    }
    .sp-hidden {
        display: none!important
    }
    h2.belt {
        background: #F44C59;
        width: 100%;
        margin: 0 auto 10px;
        color: #FFF;
        font-size: 2rem;
        padding: 15px 0;
        position: relative
    }
    h2.belt:after {
        content: " ";
        background: url(../../image/common/belt_icon.png);
        width: 20px;
        height: 10px;
        position: absolute;
        bottom: -10px;
        left: 50%;
        margin-left: -10px;
        background-size: contain
    }
    #Teaser,
    #Teaser .inner {
        width: 100%;
        margin: 0 auto
    }
    #Teaser {
        background: url(../../image/common/teaser_bg.png) center center no-repeat;
        background-size: 100%
    }
    #Teaser .inner {
        position: relative;
        padding: 10vw 0 15vw
    }
    #Teaser .inner h2 {
        width: 58%;
        position: relative;
        z-index: 50;
        padding-top: 5vw;
        margin-left: 5%
    }
    #Teaser .inner h3 {
        width: 40%;
        z-index: 50;
        position: absolute;
        top: 10vw;
        left: 5%
    }
    #Teaser .inner ul {
        width: 60%;
        letter-spacing: -.4em;
        position: relative;
        z-index: 50;
        margin-left: 5%;
        margin-top: 2%;
        display: none
    }
    #Teaser .inner ul li,
    #block03 ul li {
        display: inline-block;
        vertical-align: top;
        letter-spacing: 0
    }
    #Teaser .inner ul li {
        width: 31%;
        margin: 1%
    }
    #block03 ul,
    #block04 ul,
    #block05 {
        letter-spacing: -.4em
    }
    #Teaser .inner ul li:last-child {
        margin-right: 0
    }
    
    #Teaser .pctalk {
     /*   height: 372px; */
        position: absolute;
        right: 0;
        z-index: 10
    }
    
    #Teaser .pctalk img {
        height: 45.3vw;
    }
    
/* --------------------------------------------
    #Teaser .inner p {
        width: 152px;
        height: 175px;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 10
    }
-------------------------------------------- */


    .induction {
        width: 100%;
        margin: 0 auto;
        background: #009785
    }
    .induction .inner {
        width: 96%;
        margin: 0 auto;
        padding: 5vw 0
    }
    .induction h2 {
        width: 70%;
        margin: 0 auto
    }
    .induction .phone {
        width: 100%;
        margin: 10px 0
    }
    .induction .button {
        width: 100%
    }
    .induction .service {
        width: 100%;
        margin-top: 10px
    }
    #block01,
    #block01 h2,
    #block02,
    #block03,
    #block03 h3,
    #block03 ul {
        margin: 0 auto
    }
    #block01 {
        background: #F6F6F6;
        width: 100%;
        padding: 10px 0
    }
    #block01 h2 {
        width: 35%
    }
    #block01 p {
        font-size: 1.4rem;
        color: #00373D;
        font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", sans-serif;
        font-weight: 900
    }
    #block02 {
        width: 90%
    }
    #block02 ul {
        padding: 10px 0 20px
    }
    #block02 ul li {
        font-size: 1.6rem;
        color: #00373D;
        padding: 10px 0 10px 1.5em;
        border-bottom: dotted 1px #EAEAEA;
        position: relative
    }
    #block02 ul li:before {
        content: "\f046";
        font-family: FontAwesome;
        color: #009785;
        margin-right: 10px;
        font-weight: 400;
        position: absolute;
        top: 10px;
        left: 0
    }
    #block03 p,
    .lead p {
        font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", sans-serif;
        font-weight: 900;
        font-size: 1.4rem;
        text-align: center
    }
    #block04 ul li,
    #block05 .inner .arrow {
        position: relative
    }
    #block03 {
        width: 100%;
        padding: 25px 0;
        background: url(../../image/block03/bg.png) center top;
        border-top: solid 1px #F4F4F4
    }
    #block03 h3 {
        width: 80%
    }
    #block03 p {
        margin: 10px auto 15px;
        line-height: 1.6;
        width: 96%
    }
    #block03 p br {
        display: none
    }
    #block03 p span {
        background: rgba(255, 255, 38, .5);
        color: #F24C59;
        padding: 2px 5px
    }
    #block03 ul {
        width: 60%
    }
    #block03 ul li {
        width: 100%;
        margin: 2% 0
    }
    .lead {
        background: #F6F6F6;
        border-bottom: solid 1px #F6F6F6;
        padding: 10px 0;
        width: 100%;
        margin: -10px auto 0
    }
    .lead p {
        line-height: 1.5
    }
    #block04 h2,
    #block04 h3 {
        font-size: 2rem;
        line-height: 1.2;
        text-align: center;
        font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", sans-serif;
        font-weight: 900
    }
    #block04 {
        width: 90%;
        margin: 0 auto;
        padding: 30px 0
    }
    #block04 .icon {
        width: 40px;
        height: 40px;
        margin: 0 auto
    }
    #block04 h2 {
        color: #00373D;
        margin: 10px 0 5px
    }
    #block04 h2 span {
        color: #009785
    }
    #block04 h3 {
        color: #F34C59
    }
    #block04 .text {
        font-size: 1.4rem;
        line-height: 1.6;
        text-align: center;
        margin-top: 1em;
        font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", sans-serif;
        font-weight: 900
    }
    #block04 .text br,
    #block04 h3 br {
        display: none
    }
    #block04 ul li,
    #block05 .inner {
        display: inline-block;
        vertical-align: top
    }
    #block04 ul {
        margin-top: 15px
    }
    #block04 ul li {
        width: 100%;
        letter-spacing: 0;
        margin: 5px 0;
        padding-left: 20px
    }
    #block04 ul li img {
        width: 100%;
        height: auto
    }
    #block04 .figure {
        margin-top: 30px
    }
    #block05 {
        width: 90%;
        margin: 0 auto;
        padding: 20px 0
    }
    #block05 .inner {
        width: 100%;
        letter-spacing: 0;
        margin: 10px 0
    }
    #block05 .inner .image {
        width: 60%;
        margin: 0 auto
    }
    #block05 .inner h3 {
        font-size: 2.5rem;
        line-height: 1.1;
        color: #009785;
        font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", sans-serif;
        font-weight: 900;
        padding: 15px 0;
        text-align: center;
        border-bottom: dotted 1px #EAEAEA
    }
    #block05 .inner .text {
        margin-top: 1em;
        font-size: 1.4rem;
        line-height: 1.4
    }
    #block06 {
        background: url(../../image/block06/bg.png) center top;
        width: 100%;
        padding: 30px 0;
        border-top: solid 1px #E7F4F6
    }
    #block06 h2 {
        color: #00373D;
        font-size: 2rem;
        text-align: center;
        line-height: 1.1;
        font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", sans-serif;
        font-weight: 900
    }
    #block06 h3 {
        color: #F34C59;
        font-size: 1.4rem;
        text-align: center;
        line-height: 1.1;
        font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", sans-serif;
        font-weight: 900;
        margin-top: 5px
    }
    #block06 .voice {
        width: 90%;
        margin: 15px auto 0;
        box-shadow: 0 3px 0 #CCD7D5;
        background: #FFF;
        border-radius: 10px;
        letter-spacing: -.4em
    }
    #block06 .voice .image {
        display: none
    }
    #block06 .voice .inner {
        width: 96%;
        display: inline-block;
        vertical-align: top;
        letter-spacing: 0;
        margin: 4% 2%
    }
    #block06 .voice .inner h4 {
        color: #009785;
        font-size: 1.6rem;
        line-height: 1.1;
        border-bottom: dotted 1px #EAEAEA;
        padding: 10px 0;
        position: relative;
        font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", sans-serif;
        font-weight: 900;
        text-align: center
    }
    #block06 .voice .inner h4:after {
        content: " ";
        width: 60px;
        height: 1px;
        background: #009785;
        position: absolute;
        bottom: -1px;
        left: 0
    }
    #block06 .voice .inner p {
        font-size: 1.4rem;
        margin-top: 1em
    }
    #block06 .voice .inner p.link-text a {
        display: inline-block;
        background: #009785;
        color: #FFF;
        font-size: 1.2rem;
        line-height: 1.1;
        padding: 8px 30px;
        border-radius: 30px;
        font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", sans-serif;
        font-weight: 900;
        position: relative;
        cursor: pointer
    }
    #block06 .voice .inner p.link-text a:before {
        content: "\f105";
        font-family: FontAwesome;
        position: absolute;
        top: 8px;
        right: 10px;
        display: inline-block;
        font-weight: 400
    }
    #block06 .voice .inner p.link-text a:hover {
        background: rgba(0, 151, 133, .6)
    }
    .img-fit img {
        width: 70%;
        height: auto
    }
    .remodal {
        padding: 20px!important
    }
    .remodal h5.interview {
        color: #009785;
        font-size: 1.6rem;
        line-height: 1.1;
        border-bottom: dotted 1px #EAEAEA;
        padding: 10px 0 10px 1.2em;
        position: relative;
        font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", sans-serif;
        font-weight: 900;
        margin-top: 20px
    }
    .remodal h5.interview:first-child {
        margin-top: 0!important
    }
    .remodal h5.interview:before {
        content: "\f007";
        font-family: FontAwesome;
        color: #009785;
        margin-right: 10px;
        font-weight: 400;
        position: absolute;
        top: 10px;
        left: 0
    }
    .remodal h5.interview:after {
        content: " ";
        width: 60px;
        height: 1px;
        background: #009785;
        position: absolute;
        bottom: -1px;
        left: 0
    }
    .remodal .image img,
    .remodal ul li img {
        width: 100%;
        height: auto
    }
    .remodal p {
        margin-top: 1em;
        font-size: 1.4rem;
        line-height: 1.6
    }
    .remodal h6 {
        color: #F44C59;
        font-size: 1.4rem;
        line-height: 1.1;
        padding: 10px 0;
        margin: 20px 0 0;
        text-align: center;
        font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", sans-serif;
        font-weight: 900
    }
    #block07 h2,
    #block07 h3 {
        line-height: 1.2;
        text-align: center;
        font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", sans-serif;
        font-weight: 900
    }
    .remodal ul {
        letter-spacing: -.4em
    }
    .remodal ul li {
        width: 100%;
        display: inline-block;
        vertical-align: top;
        letter-spacing: 0;
        margin: 1% 0
    }
    #block07 {
        width: 90%;
        margin: 0 auto;
        padding: 30px 0
    }
    #block07 .icon {
        width: 40px;
        height: 40px;
        margin: 0 auto
    }
    #block07 h2 {
        font-size: 2rem;
        color: #00373D;
        margin: 10px 0 5px
    }
    #block07 h3 {
        color: #009785;
        font-size: 1.6rem
    }
    #block07 ul {
        width: 100%;
        margin: 15px auto 0
    }
    #block07 ul li {
        background: #F6F6F6;
        margin-bottom: 2px;
        padding: 10px
    }
    #block07 ul li a {
        color: rgba(87, 87, 71, 1);
        display: inline-block
    }
    #block07 ul li a:hover {
        color: rgba(87, 87, 71, .6)
    }
    #block08 {
        width: 90%;
        margin: 0 auto;
        padding: 20px 0
    }
    #block08 .faq {
        margin: 10px 0
    }
    #block08 .faq h3 {
        color: #00373D;
        font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", sans-serif;
        font-weight: 900;
        font-size: 1.4rem;
        line-height: 1.5;
        padding: 10px 0 10px 1.75em;
        position: relative
    }
    #MiddleTeaser h2,
    #block09 #ContactForm h3 {
        color: #FFF;
        line-height: 1.1;
        font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", sans-serif;
        font-weight: 900;
        font-size: 2rem;
        text-align: center
    }
    #block08 .faq h3:before {
        content: " ";
        background: url(../../image/block08/icon.png);
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: top;
        margin-right: 10px;
        background-size: contain;
        position: absolute;
        top: 10px;
        left: 0
    }
    #Header .inner h1.summary,
    #Header .inner p.phone {
        display: none
    }
    #block08 .faq .answer {
        border: 5px solid #F6F6F6;
        padding: 10px
    }
    #block09 {
        width: 90%;
        margin: 0 auto;
        padding: 10px 0 30px
    }
    #block09 p {
        margin-top: 1em
    }
    #block09 #ContactForm {
        margin-top: 60px
    }
    #block09 #ContactForm h3 {
        background: #00373D;
        padding: 30px 0
    }
    #block09 #ContactForm .inner {
        border: 10px solid #F6F6F6;
        padding: 15px;
        border-top: none
    }
    #MiddleTeaser {
        width: 100%;
        margin: 0 auto;
        background: url(../../image/common/middle_teaser_bg.png) center top
    }
    #MiddleTeaser h2 {
        width: 100%;
        margin: 0 auto;
        padding: 20px 0
    }
    .contents {
        width: 90%;
        margin: 30px auto 50px
    }
    .contents p {
        margin-top: 1em
    }
    h3.heading {
        background: #F6F6F6;
        font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", sans-serif;
        font-weight: 900;
        padding: 10px;
        margin-top: 50px;
        font-size: 2rem
    }
    .company-table td,
    .company-table th {
        border-bottom: solid 1px #EEE;
        padding: 10px;
        font-size: 1.2rem;
        line-height: 1.3
    }
    .company-table {
        width: 100%;
        border-top: solid 1px #E4E4E4
    }
    .company-table th {
        width: 30%;
        background: #F9F9F9
    }
    .company-table td {
        width: 70%;
        background: #FFF
    }
    #Header,
    #Header .inner,
    #Wrapper {
        width: 100%;
        margin: 0 auto
    }
    #Header {
        background: url(../../image/common/bg_header.png) center top repeat-x #FFF;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100
    }
    #Header .inner {
        height: 55px;
        position: relative;
        background: #FFF
    }
    #Header .inner h2.logo {
        width: 65%;
        position: absolute;
        top: 10px;
        left: 2%
    }
    #Header .inner p.contact {
        position: absolute;
        width: 100px;
        height: 55px;
        background: url(../../image/smart/contact_btn_bg.png) center top no-repeat #009785;
        background-size: 100%;
        top: 0;
        right: 0
    }
    #Header .inner p.contact span {
        display: block;
        padding: 20px 5px 5px
    }
    #Container {
        width: 100%;
        margin: 55px auto 0
    }
    #Footer {
        width: 100%;
        margin: 0 auto;
        padding: 20px 0
    }
    #Footer .inner {
        width: 96%;
        margin: 0 auto
    }
    #Footer .inner ul {
        letter-spacing: -.4em;
        text-align: center
    }
    #Footer .inner ul li {
        width: 50%;
        text-align: center;
        display: inline-block;
        vertical-align: top;
        letter-spacing: 0;
        font-size: 1rem;
        line-height: 1
    }
    #Footer .inner ul li a {
        display: block;
        background: #F6F6F6;
        color: rgba(87, 87, 71, 1);
        text-align: center;
        padding: 10px 0;
        border-right: solid 1px #FFF;
        margin: 1px
    }
    #Footer .inner ul li a:last-child {
        border-right: none
    }
    #Footer .inner ul li a:hover {
        background: #EEE;
        color: rgba(87, 87, 71, .6)
    }
    #Footer .inner .copyright {
        font-size: 1rem;
        line-height: 1.1;
        text-align: center;
        margin-top: 20px
    }
    #PageTop {
        display: none
    }
    .jisseki-slide {
        border-top: 1px solid #f4f4f4;
        padding-top: 20px;
    }
    .jisseki-slide h2 {
        color: #00373d;
        font-size: 3rem;
        line-height: 1.2;
        margin: 20px 0 30px;
        text-align: center;
    }
    .jisseki-slide h2 span {
        color: #f44c59;
        display: block;
        font-size: 24px;
    }
    

    
}