/*
Author: Sofnet Solutions
*/

/* ====================================================
 top
===================================================== */
.top .mv .sloganArea{
    position:absolute;
    bottom:130px;
    left:50%;
    width:440px;
    color:#fff;
    text-align:center;
    text-shadow:0px 0px 3px rgba(0,0,0,.5);
}

.sloganArea .slogan{
    font-size:28px;
    line-height:1.5;
}

@media only screen and (max-width:640px){

    .top .mv .sloganArea{
        bottom:40px;
        left:auto;
        right:1%;
        width:48%;
        text-align:left;
        font-size:12px;
    }

    .sloganArea .slogan{font-size:22px;}
}


.woodPanel{
    line-height:1.75;
    text-align:center;
    color:#fff;
    margin:20px auto 40px;
}

.woodPanel .ttl{
    margin-bottom:10px;
    text-align:center;
}

.woodPanel .imgFine{
    margin-left:10px;
}

.hexBase{
    overflow:hidden;
    width:960px;
}

.hexBaseWrap{
    position:relative;
    left: -10px;
    width:980px;
    overflow:hidden;
    transform:rotate(-5deg);
}

.hexBaseWrap::before{
    content:"";
    display:block;
    padding-top:366px;
}

.hBL{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(5deg);
    overflow:hidden;
}

.hBR{
    width: 100%;
    height: 100%;
    transform: rotate(5deg);
    overflow:hidden;
}

.hexBaseInner{
    width: 100%;
    height: 100%;
    transform:rotate(-5deg);
    background:url(../images/top/bg_intro.jpg) repeat top left / 430px auto;
}

/* hexLine */
.hexLine{
    position:absolute;
    top:20px;
    left:28px;
}

.hexLineWrap{
    position:relative;
    top:40px;
    width:920px;
    border-right:2px solid #fff;
    border-left:2px solid #fff;
}

.hLTL{
    position:absolute;
    top:-22px;
    left:-3px;
    width:49%;
    width:-webkit-calc(50% + 4px);
    width:calc(50% + 4px);
    border-top:2px solid #fff;
    transform: rotate(-5deg);
}

.hLTR{
    position:absolute;
    top:-22px;
    right:-3px;
    width:49%;
    width:-webkit-calc(50% + 4px);
    width:calc(50% + 4px);
    border-top:2px solid #fff;
    transform: rotate(5deg);
}

.hLBL{
    position:absolute;
    bottom:-22px;
    left:-3px;
    width:49%;
    width:-webkit-calc(50% + 4px);
    width:calc(50% + 4px);
    border-top:2px solid #fff;
    transform: rotate(5deg);
}

.hLBR{
    position:absolute;
    bottom:-22px;
    right:-3px;
    width:49%;
    width:-webkit-calc(50% + 4px);
    width:calc(50% + 4px);
    border-top:2px solid #fff;
    transform: rotate(-5deg);
}

.hexLineInner{
    height:245px;
}

@media only screen and (max-width:640px){
    .woodPanel{
        text-align:left;
    }

    .woodPanel .ttl .imgSmile{
        display:inline-block;
        width:150px;
        height:auto;
    }

    .woodPanel .ttl .imgFine{
        display:inline-block;
        width:160px;
        height:auto;
    }

    .hexBase{
        width:100%;
        max-width:360px;
        margin:0 auto;
    }

    .hexBaseWrap{
        left:-20px;
        width:calc(100% + 40px);
    }

    .hexBaseWrap::before{
        padding-top:418px;
    }

    .hexLine{
        left:30px;
        width:calc(100% - 60px);
    }

    .hexLineWrap{
        top:5px;
        width:100%;
        height:368px;
        box-sizing:border-box;
    }

    .hLTL{
        top:-8px;
        left:-2px;
    }

    .hLTR{
        top:-8px;
        right:-2px;
    }

    .hexLineInner{
        height:auto;
        padding:10px;
        font-size:12px;
    }

    .hLBL{
        bottom:-8px;
        left:-2px;
    }

    .hLBR{
        bottom:-8px;
        right:-2px;
    }
}


.kgLst{
    display:flex;
    flex-wrap:wrap;
    margin-top:-60px;
}

.kgLst .kg{
    width:440px;
    margin:60px 0 0 80px;
}

.kgLst .kg:nth-child(odd){margin-left:0;}

.kgLst .kg .img{position:relative;}

.kgLst .kg .img::before,
.kgLst .kg .img::after{
    content:"";
    position:absolute;
    top:0;
    width:0;
    height:0;
    border-style:solid;
}

.kgLst .kg .img::before{
    right:50%;
    border-width:40.73px 224px 0 0;
    border-color:#fff transparent transparent transparent;
}

.kgLst .kg .img::after{
    left:50%;
    border-width:0 224px 40.73px 0;
    border-color:transparent #fff transparent transparent;
}

.kgLst .kg img{width:100%;}

.kgLst .kg .name{
    position:relative;
    text-align:center;
}

.kgLst .kg .name::before{
    content:"";
    display:block;
    z-index:1;
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:1px;
}

.kgLst .kg.ishizaki .name::before{background:#00a5e3;}
.kgLst .kg.takao .name::before{background:#aace36;}
.kgLst .kg.mikasano .name::before{background:#fcc800;}
.kgLst .kg.utsukushigaoka .name::before{background:#f5b2b2;}

.kgLst .kg .name > span{
    display:inline-block;
    z-index:2;
    position:relative;
    padding:4px 8px;
    background:#fff;
    font-size:18px;
}

.kgLst .kg .txt{line-height:1.75;}

@media only screen and (max-width:640px){
    .kgLst{
        margin-top:-30px;
    }
    
    .kgLst .kg{
        width:100%;
        margin:30px 0 0;
    }


.kgLst .kg .img::before{
    right:50%;
    border-width:55.29px 304px 0 0;
    border-color:#fff transparent transparent transparent;
}

.kgLst .kg .img::after{
    left:50%;
    border-width:0 304px 55.29px 0;
    border-color:transparent #fff transparent transparent;
}
}


.recruitBnrArea{
    display: flex;
    position: relative;
    height: 150px;
    border: 2px solid #ddd;
    background-color: #fff;
    color: #333;
    transition: filter ease .3s;
}

.recruitBnrArea:hover{
    filter: brightness(108%);
    color: #333;
}

.recruitBnrArea .txtClm{
    width: calc(100% - 520px);
    padding: 20px 30px;
    box-sizing: border-box;
    line-height:1.75;
}

.recruitBnrArea .txtClm .ttl{
    position:relative;
    margin-bottom: 10px;
    padding:10px 0 0 50px;
    font-size:18px;
    min-height:50px;
    background: url("data:image/png;base64,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") center left / 41px auto no-repeat;
    box-sizing:border-box;
}

.recruitBnrArea .imgClm{
    width: 520px;
    background:url("../images/top/img_recruit-bnr.jpg") no-repeat;
}

@media only screen and (max-width:640px){
.recruitBnrArea{
    display: block;
    height: auto;
}

.recruitBnrArea::before{
    top: -10px;
    left: -10px;
    width: 21px;
    height: 23px;
    background-size: 21px 23px;
}

.recruitBnrArea .txtClm{
    width: 100%;
    padding: 20px;
}

.recruitBnrArea .txtClm .ttl{
    width: 100%;
}

.recruitBnrArea .imgClm{
    width: 100%;
    height: 150px;
    background-size:cover;
}
}

/* ====================================================
 policy
===================================================== */
.policyIntro{margin-top:40px;}

.policyIntro .ttl{
    margin-bottom:40px;
    text-align:center;
    font-weight:normal;
}

.policyIntro .ttl > span{
    position:relative;
    display:inline-block;
    padding:0 30px;
    font-size:22px;
}

.policyIntro .ttl > span::before,
.policyIntro .ttl > span::after{
    content:"";
    position:absolute;
    top:0;
    width:0;
    height:0;
    border-style: solid;
    border-width: 56px 2px 0 2px;
    border-color: #00a6e3 transparent transparent transparent;
}

.policyIntro .ttl > span::before{
    left:0;
    transform:rotate(-30deg);
}

.policyIntro .ttl > span::after{
    right:0;
    transform:rotate(30deg);
}

.policyIntro .detail{
    display:flex;
}

.policyIntro .img_1,
.policyIntro .img_2{
    width:240px;
    height:auto;
}

.policyIntro .txt{
    flex:1 1 0%;
    padding:10px;
    box-sizing:border-box;
}


    .policyIntro .detail img{
        width:100%;
        height:auto;
    }

@media only screen and (max-width:640px){
    .policyIntro{margin-top:10px;}

    .policyIntro .ttl{
        margin-bottom:20px;
    }

    .policyIntro .ttl > span{
        padding:0 14px;
        font-size:18px;
    }

    .policyIntro .ttl > span::before,
    .policyIntro .ttl > span::after{
        top:6px;
        border-width: 30px 2px 0 2px;
    }

    .policyIntro .detail{
        flex-wrap:wrap;
    }

    .policyIntro .detail .img_1{
        order:1;
        width:49%;
    }

    .policyIntro .detail .txt{order:3;}

    .policyIntro .detail .img_2{
        order:2;
        width:49%;
        margin-left:2%;
    }
}

.txtBox{
    width:600px;
    margin:0 auto 40px;
    padding:8px 20px;
    border:1px solid #999;
    background:#fff;
    font-size:18px;
    text-align:center;
}

@media only screen and (max-width:640px){
    .txtBox{
        width:100%;
        margin-bottom:20px;
        font-size:16px;
        box-sizing:border-box;
    }
}

.compositionArea{
    position:relative;
    text-align:center;
    padding-top:50px;
}

.compositionArea .txt{
    position:absolute;
    display:inline-block;
    width:190px;
    min-height:41px;
    padding:4px 6px 6px;
    border:2px dashed #999;
    background:#fff;
    line-height:1.1;
    font-size:12px;
    box-sizing:border-box;
}

.compositionArea .txt.mind{
    top:0;
    left:50%;
    transform:translateX(-50%);
}

.compositionArea .txt.patience{
    bottom:0;
    right:70%;
    right:calc(50% + 170px);
}

.compositionArea .txt.physical{
    bottom:0;
    left:70%;
    left:calc(50% + 170px);
    line-height:26px;
}

.compositionArea .img{
    width:330px;
    height:auto;
}

@media only screen and (max-width:640px){
    .compositionArea{
        padding-bottom:50px;
    }

    .compositionArea .txt.patience{
        right:auto;
        left:0;
        width:140px;
    }

    .compositionArea .txt.physical{
        left:auto;
        right:0;
        width:140px;
        line-height:1.1;
    }

    .compositionArea .img{
        width:60%;
    }
}

.policies{
    display:flex;
    flex-wrap:wrap;
    margin-top:-40px;
}

.policies .elm{
    width:440px;
    margin:40px 0 0 40px;
    padding:20px 20px 40px;
    border:1px solid #ddd;
    background:#fff;
    box-sizing:border-box;
}

.policies .elm:nth-child(odd){
    margin-left:0;
}

.policies .elm .img{
    width:230px;
    height:150px;
    margin:0 auto;
}

.policies .elm .img img{
    width:100%;
    height:auto;
}

@media only screen and (max-width:640px){
    .policies{margin-top:-20px;}
    
    .policies .elm{
        width:100%;
        margin:20px 0 0;
        padding:20px 20px 30px;
    }
}


/* ====================================================
 curriculum
===================================================== */
.training .intro{
    width:600px;
    margin:0 auto 40px;
}

@media only screen and (max-width:640px){
    .training .intro{
        width:100%;
        margin-bottom:20px;
    }
}

.training .trainingMenu{
    display:flex;
    flex-wrap:wrap;
}

.training .trainingMenu .menu{
    position:relative;
    width:300px;
    margin:0 0 0 30px;
    padding-bottom:80px;
}

.training .trainingMenu .menuInner{
    padding:30px 20px;
    box-sizing:border-box;
    line-height:1.75;
}

.training .trainingMenu .menu:first-child{
    margin-left:0;
}

.training .trainingMenu .menu.greeting{background:#ffebec;}
.training .trainingMenu .menu.reply{background:#fef4d1;}
.training .trainingMenu .menu.shoes{background:#e6f9ff;}

.training .trainingMenu .img{
    position:absolute;
    bottom:0;
    left:0;
}

.training .trainingMenu .img img{
    width:100%;
    height:auto;
}

@media only screen and (max-width:640px){
    .training .trainingMenu{
        margin-top:-20px;
    }

    .training .trainingMenu .menu{
        width:100%;
        margin:20px 0 0;
        padding-bottom:26.6%;
    }

    .training .trainingMenu .menuInner{
        position:relative;
        padding:20px 10px;
    }

    .training .trainingMenu .img{
        position:absolute;
        top:100%;
        bottom:auto;
        left:0;
    }
}

.curriculum{
    margin-top:-20px;
}

.curriculum .lesson{
    display:flex;
    align-items:center;
    margin-top:20px;
    padding:30px;
    border:1px solid #aaa;
    background:#fff;
    box-sizing:border-box;
}

.curriculum .lesson .txt{
    flex:1 1 0%;
    min-height:150px;
}

.curriculum .lesson .img{
    width:230px;
    margin-left:30px;
}

.curriculum .lesson .img img{
    width:100%;
    height:auto;
}

@media only screen and (max-width:640px){
    .curriculum .lesson{
        flex-wrap:wrap;
        padding:20px;
    }

    .curriculum .lesson .txt{
        flex:auto;
        width:100%;
        min-height:auto;
    }
    
    .curriculum .lesson .img{
        width:100%;
        margin:10px auto 0;
    }

    .curriculum .lesson .img{width:230px;}
}

.piaget{
    padding:10px;
    background-image:linear-gradient(-45deg, #fff 25%, #ffcbb9 25%, #ffcbb9 50%, #fff 50%, #fff 75%,#ffcbb9 75%, #ffcbb9);
    background-repeat:repeat;
    background-size:10px 10px;
    box-sizing:border-box;
}

.piaget > .bgWhite{padding:30px;}

.bgWhite{background-color:#fff;}

.piaget .ttl{
    position:relative;
    padding-top:20px;
    font-size:24px;
    text-align:center;
}

.piaget .ttl::before{
    content:"";
    display:block;
    position:relative;
    bottom:10px;
    width:24px;
    height:19px;
    margin:0 auto;
    background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABMCAYAAACbHRIPAAAFJ0lEQVR4nO1dK0wrQRStaFJBQggJDodBoWpJVlTV1tXUYcgkbToz9woMprIOh36OhKSiAolrgqjBVOCqEEjceWKnpf/PdndnZrs3OY6Ec3t2vvczhUJMhiAoQogS2u1rENVB1AVzH8xDEH2BeQzmMYi+QPQBolcQPUKpKoS4QBAU4+ISkfsFmCsgejTcPpZ4Mw/B/AaiLrRuoN2+hhAlm9znbCqClDdg7pgf/xfM2AtEPyB6BXMNQpym4SCCoAgpT8BcA9ELmL8j8P41InWgddmqOFNnmN/2dmSzk58guk9SGMP9DkSfMXN/B3MNUp6kJoxxpmL+eXzOLGMIpapxOoYgKIK5AuZBotyJ3qFUFVKexMV9tTNaX4LoOWEh5qcEoi5arfOD+QtxCuZOpCk1Ov9naH0Z+2iBECXzZY1Sc2Yeb2i3ryPzV+oKzD0r3Im+zMalFI8YUp6A6N6SELOOfUDr8t78w11f0tPrLvwlhDg9TAwhTkH0aN2ZPwwg5Y13YvyhE1kUMzJcEmOCPrS+3Mq/1TqHrWlqE4i6ey/2EKLkxDS1Hk+b5mTDv+sAz3WiyL1EgVJV66Q3O/QDrRtr+RPVEeWgly5qO+2+zI5k7ADhbaK8Q6mrJf5aXyLuw2oy+N66czTrxosDZHcV5WH2K0MQFEEkrfPaHf2NUxfCqxDbJPfBYPYrg1JXju2qdvmo6qvFCE+yQ+sE93dITn0guk/1JB4PRmg2z5YF0brhALkogrxMblnB/M86n2g+3C+OjhKSvnBLDiNoXUa7fQ0fR3goyOfcWgKty9ZJHeZQHWFcw7fpahaVP0FcPkTtho6jtwq7g+gZQVCcxDds3eLGhZ6JONrmcQjGkPKkYMKvtskchjDKGG/0zwa0Lk+uGeyTOUyQHxD9WOdxOO6ysH5kCU+FDMy9WcJbAf6eP7KIYQH+77CyhFEBPly1Hw/GBbgfyDkmfOeCuIVcEMfwna8hbmGc77Lcwig/h7gEoo+CV0kN2Ue/gLDQxjaRHCGefMw0yS60bhRMLNo+mRyAlDeTPFj/gzu+g+hrmuiQx0QcANHzX5KDUrfWCeWoLOZl+ZnTlA2MlnJ8wXznALHjxEw67J8gYcVRfo2SPsYQ4mJ1wrWv+b0+YzGvd06QsD7Er3R+vzHYWgQKrcsZyXFyG0S/UOp2oxhTUdwu+MwGVi3kawVxvYrVdxA9RymNvoCvBTAug+h1lzr71aKEzWbyeEl86K2qHN5PlLBMOh8ph+PfwWIsjJR8TYmOp8jT1FpRwkY09/mWeA+E/b5kHP2+Vosy6ciWHx53wSDWPlkbhQnbHuVT2DoQdQ9puBZNFCFOoVQ1Hy1zGIC5trIRQGrChO0sJI47A3IMoofUR8U6gxAlU+v+5Hmt+P4IG12WE+1AGtXQbJ6ZcHD2zy1EL1DqNrEdVJw207Y7i/WLvUl7dNu/8942FcbF3of7o++tEIvm+Yjxd0RssxlhfLiw7IG5kkkhFg2t1jmUunVSmHAUH4cQi4Zm88yhqawP5ooXu6akzWyXq7DRTXTykkGrde7MwywuGIKgaHLDakgjizLsIFTPhdhiM89iSCRRIRx2DnpI5BmJLNv0Pas4T/1EL5DyJpUr8ayaSd6rm0e5oooxhtYNJ++bfDQEQdHEYKJsk3tot6/z6SkBM2Hkh51ulMO/6ViNTRyDmf7udWyOv3xD60Y+KlKymdfWlssnJm8+5WKkb+b6ZbZgdYTZ0rDc0jczUoYg+oRSVdt8DrX/EFOpu8WWnzgAAAAASUVORK5CYII=") no-repeat center center / 100% auto;
    transform:translateX(-50%);
    animation: turn 5s infinite ease none;
}

@keyframes turn {
  0%{
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.piaget .detail{display:flex;}

.piaget .detail > .txt{
    flex:1 1 0%;
    margin-left:20px;
}

.piaget .detail > .img{
    width:560px;
}

.piaget .detail img{
    width:275px;
    height:auto;
}

.piaget .detail img:last-of-type{margin-left:10px;}

.highlighter{
    display:inline-block;
    position:relative;
    margin:0 5px;
    z-index:1;
}

.highlighter::before{
    content:"";
    display:inline-block;
    position:absolute;
    bottom:8px;
    left:-3px;
    width:calc(100% + 10px);
    height:12px;
    background:#ffe4da;
    z-index:-1;
}

@media only screen and (max-width:640px){
    .piaget > .bgWhite{padding:20px;}

    .piaget .ttl{
        line-height:1.5;
        font-size:18px;
    }

    .piaget .detail{
        flex-direction:column;
    }
    
    .piaget .detail > .img{
        width:100%;
    }
    
    .piaget .detail > .txt{margin:10px auto 0;}

    .piaget .detail img{width:49%;}
    
    .piaget .detail img:last-of-type{margin-left:2%;}

    .highlighter::before{
        bottom:2px;
        height:10px;
    }
}

/* ====================================================
 mikasakitchen
===================================================== */

.logoThumbCnt{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
}

.logoThumbCnt .imgArea{
    width: 150px;
}

.logoThumbCnt .txtArea{
    width: 780px;
}

.galleryThumb{
    position: relative;
    min-height: 640px;
}

.galleryThumb .thumbGroup{
    position: absolute;
    vertical-align: top;
}

.galleryThumb .thumbGroup:first-child{
    top: 0;
    left: 0;
;}

.galleryThumb .thumbGroup:nth-child(2){
    top: 0;
    right: 140px;
}
.galleryThumb .thumbGroup:nth-child(3){
    top: 405px;
    left: 140px;
}

.galleryThumb .thumbGroup:nth-child(4){
    top: 265px;
    right: 0;
}

.thumbGroup a{display: block;}

.facilityArea .thumb img{
    width: 300px;
    height: auto
}

.facilityArea .middle .thumb img{width: 380px;}
.facilityArea .large .thumb img{width: 480px;}

.galleryThumb .txt{margin-top: 5px;}

@media only screen and (max-width:640px){
    .logoThumbCnt{
            display: block;
    }

    .logoThumbCnt .imgArea{
        width: 100px;
        margin: 0 auto 10px;
    }

    .logoThumbCnt .txtArea{
        width: 100%;
    }

    .galleryThumb{
        display: flex;
        flex-wrap: wrap;
        min-height: auto;
    }

    .galleryThumb .thumbGroup{
        position: static;
        width: 49%;
        margin-left: 2%;
    }

    .galleryThumb .thumbGroup:nth-child(odd){margin-left: 0;}
    .galleryThumb .thumbGroup:nth-child(even){margin-top: 50px;}

    .facilityArea .thumb img,
    .facilityArea .middle .thumb img,
    .facilityArea .large .thumb img{
        width: 100%;
    }

    .galleryThumb .txt{font-size: 12px;}
}

.threeClmLst{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: -30px;
}

.threeClmLst > li{
    width: 300px;
    margin-top: 30px;
}

.threeClmLst > li img{
    width: 100%;
}

@media only screen and (max-width:640px){
    .threeClmLst{
        margin-top: -10px;
    }

    .threeClmLst > li{
        width: calc(50% - 5px);
        margin-top: 10px;
    }
}

/* ====================================================
 recruit
===================================================== */
.recruit .intro{
    display:flex;
    justify-content:center;
}

.recruit .intro .img_1{width:206px;}

.recruit .intro .img_2{width:195px;}

.recruit .intro img{
    width:100%;
    height:auto;
}

.recruit .intro .detail{
    text-align:center;
    padding-bottom:180px;
    background: url("../images/recruit/bg_recruit_1.png") no-repeat bottom center / 298px auto;
}

@media only screen and (max-width:640px){
    .recruit .intro{
        flex-wrap:wrap;
    }

    .recruit .intro .img_1{
        order:2;
        width:49%;
    }
    .recruit .intro .img_2{
        order:3;
        width:49%;
        margin-left:2%;
    }
    .recruit .intro .detail{
        order:1;
        margin-bottom:10px;
    }
}

.bnrArea{
    display:flex;
}

.bnrArea .bnr{
    width:300px;
    padding:20px;
    margin-left:30px;
    border:1px solid #ddd;
    background:#fff;
    box-sizing:border-box;
}

.bnrArea .bnr:first-child{margin-left:0;}

.bnrArea .bnr img{
    width:100%;
    height:auto;
}

@media only screen and (max-width:640px){
    .bnrArea{
        flex-direction:column;
    }

    .bnrArea .bnr{
        width:100%;
        margin:20px 0 0;
    }

    .bnrArea .bnr:first-child{margin-top:0;}
}

.inquiryBnr{
    position:relative;
}

.inquiryBnr::before{
    content:"";
    position:absolute;
    bottom:-113px;
    left:-10px;
    width:293px;
    height:207px;
    background:url(../images/recruit/bg_recruit_2.png) no-repeat top left / 100% auto;
}

.inquiryBnr a{
    display:block;
    width:460px;
    border:7px solid #fff;
    margin:0 auto;
    padding:15px 10px 20px;
    background:#f1e3ff;
    text-align:center;
    box-shadow:0 0 0 1px #ddd;
    box-sizing:border-box;
}

.inquiryBnr .cmnTtl_2{margin-bottom:5px;}

@media only screen and (max-width:640px){
    .inquiryBnr{
        padding-top:136px;
    }

    .inquiryBnr a{
        position:relative;
        width:100%;
        z-index:2;
    }

    .inquiryBnr::before{
        bottom:auto;
        top:0px;
        left:50%;
        width:200px;
        transform:translate(-50%);
        z-index:1;
    }
}

/* day */

.dayIntro{
    display: block;
    position: relative;
    width: 400px;
    margin: 0 auto 120px;
    text-align: center;
}

.dayIntro::before,
.dayIntro::after{
    content: "";
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
}

.dayIntro::before{
    width: 203px;
    height: 161px;
    top: -50px;
    left: -240px;
    background-image: url(../images/recruit/day/bg_day_make.png);
}

.dayIntro::after{
    width: 270px;
    height: 220px;
    top: -90px;
    right: -280px;
    background-image: url(../images/recruit/day/bg_day_line.png);
}

@media only screen and (max-width:640px){
    .dayIntro{
        width: 100%;
        margin: 0 0 130px;
        text-align: left;
    }

    .dayIntro::before{
        width: 101px;
        height: 81px;
        top: auto;
        bottom: -110px;
        left: 10px;
    }

    .dayIntro::after{
        width: 122px;
        height: 99px;
        top: auto;
        bottom: -110px;
        right: 10px;
    }
}

/* dayFlowArea
-------------------------------- */
.dayFlowArea{padding: 0 90px;}

.dayFlowElm{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    margin-top: 40px;
}

.dayFlowElm:first-child{margin-top: 0;}

.dayFlowElm:nth-child(2n-1){flex-direction: row-reverse;}

.dayFlowElm::before{
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
}

.dayFlowElm.time_1::before{
    width: 180px;
    height: 150px;
    top: 60px;
    right: -60px;
    background-image: url(../images/recruit/day/bg_day_1.png);
}

.dayFlowElm.time_2::before{
    width: 192px;
    height: 162px;
    top: 200px;
    right: -70px;
    background-image: url(../images/recruit/day/bg_day_2.png);
}

.dayFlowElm.time_3::before{
    width: 200px;
    height: 226px;
    top: -260px;
    left: -70px;
    background-image: url(../images/recruit/day/bg_day_3.png);
}

.dayFlowElm.time_4::before{
    width: 239px;
    height: 182px;
    top: 270px;
    right: -100px;
    background-image: url(../images/recruit/day/bg_day_4.png);
}

.dayTtl {
    margin-bottom: 20px;
    text-align: center;
}

.dayTtl > span{
    display: inline-block;
    position: relative;
    min-width: 160px;
    height: 30px;
    line-height: 29px;
    background-color: #7c48b1;
    font-size: 18px;
    font-weight: normal;
    color: #fff;
}

.dayTtl > span::before,
.dayTtl > span::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 13px;
    height: 30px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAA8CAMAAABPYVrXAAAASFBMVEUAAAB8SLF8SLF8SLF8SLF8SLF8SLF8SLF8SLF8SLF8SLF8SLF8SLF8SLF8SLF8SLF8SLF8SLF8SLF8SLF8SLF8SLF8SLF8SLHwbSb4AAAAF3RSTlMADbwk8pVB2mnr0xfloIM5yLF1YFhOLcWYwqUAAACxSURBVDjLdMnHAYAgAMDAUGygYHf/TZ0g9z0+MWAVsSrBaklYjVhdWDWsDqxKsForUrljdWPVsNqw2oPVWpHKL1YPVidWG1YRq6la5YTViNWM1YBVxKoExJIwHfVXVodGAEIxEESHQEI62P47RZ5gVnz9RFbl1olx8mPwXkqUE+3EOjFOz62UzD9RTrQT68Q4JTNEMo0oJ9qJdWKckhlKphLlRAsl8+DBJjP0yzyagGR+FB1BruVhUcMAAAAASUVORK5CYII=) center / 13px 30px no-repeat;
}

.dayTtl > span::before{
    left: -13px;
    transform: rotateZ(180deg);
}

.dayTtl > span::after{right: -13px;}

.dayFlowTxt{
    width: 190px;
    text-align: center;
    margin-right: 40px;
}

.dayFlowElm:nth-child(2n-1) .dayFlowTxt{margin: 0 0 0 40px;}

.dayFlowImg{
    display: block;
    position: relative;
    width: 350px;
    height: 240px;
}

.dayFlowImg::before{
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    left: -115px;
    top: -25px;
    width: 150px;
    height: 5px;
    border-top: dashed 5px #7c48b1;
    transform: rotate(45deg);
}

.dayFlowElm:first-child .dayFlowImg::before{display: none;}

.dayFlowElm:nth-child(2n-1) .dayFlowImg::before{
    left: auto;
    right: -115px;
    transform: rotate(135deg);
}

.dayFlowImg img{
    position: relative;
    width: 100%;
    z-index: 1;
}

@media only screen and (max-width:640px){
    .dayFlowArea{padding: 0;}

    .dayFlowElm{
        display: block;
        width: 80%;
        margin-top: 20px;
    }

    .dayFlowElm:nth-child(2n){margin-left: 20%;}

    .dayFlowElm.time_1::before{
        width: 72px;
        height: 60px;
        top: 80px;
        right: -40px;
    }

    .dayFlowElm.time_2::before{
        width: 77px;
        height: 65px;
        top: 15px;
        right: auto;
        left: -60px;
    }

    .dayFlowElm.time_3::before{
        width: 80px;
        height: 91px;
        top: 55px;
        left: auto;
        right: -70px;
    }

    .dayFlowElm.time_4::before{
        width: 86px;
        height: 66px;
        top: 30px;
        right: auto;
        left: -70px;
    }

    .dayFlowElm .dayTtl{margin-bottom: 10px;}

    .dayFlowElm .dayTtl > span{
    min-width: 80px;
    padding: 0 10px;
    font-size: 14px;
    }

    .dayFlowTxt{
        width: 70%;
        min-width: 190px;
        margin: 0 0 10px;
        padding-left: 60px;
    }

    .dayFlowElm:nth-child(2n-1) .dayFlowTxt{
        margin: 0 0 10px;
        padding-left: 0;
    }

    .dayFlowImg{
        width: 100%;
        height: auto;
    }

    .dayFlowImg::before{
        left: -125px;
        top: -65px;
        width: 300px;
        transform: rotate(70deg);
    }

    .dayFlowElm:nth-child(2n-1) .dayFlowImg::before{
        right: -125px;
        transform: rotate(110deg);
    }
}


/* message */
.pageJump{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin:30px 0 40px;
}

.pageJump a{
    position:relative;
    width:140px;
    margin-left:20px;
    padding:5px;
    border:1px solid #333;
    text-align:center;
    box-sizing:border-box;
}

.pageJump a.ishizaki{background:#e6f8ff;}
.pageJump a.takao{background:#f9ffe5;}
.pageJump a.mikasano{background:#fef4d1;}
.pageJump a.utsukushigaoka{background:#ffebec;}
.pageJump a.onepoint{background:#f1e3ff;}

.pageJump a::before{
    content:"";
    display:block;
    position:absolute;
    top:1px;
    left:1px;
    width:99%;
    width:calc(100% - 2px);
    height:99%;
    height:calc(100% - 2px);
    border:1px solid #333;
    box-sizing:border-box;
}

.pageJump a:first-of-type{
    margin-left:0;
}

@media only screen and (max-width:640px){
    .pageJump a{
        width:45%;
        margin:10px 0 0 5%;
    }

    .pageJump a:nth-of-type(odd){
        margin-left:0;
    }
}

.recruitFormBtn{
    display:inline-block;
    width:240px;
    height:50px;
    line-height:44px;
    border:2px solid #fff;
    background:#7d48b2;
    box-shadow:0 0 0 1px #ccc;
    color:#fff;
    text-align:center;
    font-size:16px;
    box-sizing:border-box;
    transition:all .3s;
}

.recruitFormBtn:hover{
    color:#7d48b2;
    border-color:#7d48b2;
    box-shadow:0 0 0 1px #7d48b2;
    background:#fff;
}


.kgArea{
    margin-bottom:40px;
    position:relative;
}
/*
.kgArea::before{
    content: "";
    position: absolute;
    top: 150px;
    left: -820px;
    z-index: 2;
    display: block;
    width: 1090px;
    height: 1830px;
    transform: rotateZ(45deg);
    background-size: 10px 10px;
}
*/

#ishizaki.kgArea::before{
    background-image: linear-gradient(45deg,#fff 25%,#f2fcff 25%,#f2fcff 50%,#fff 50%,#fff 75%,#f2fcff 75%,#f2fcff);
    animation: bgDeg_ishizaki 2s steps(2) 0s infinite normal none;
}
#takao.kgArea::before{
    background-image: linear-gradient(45deg,#fff 25%,#f8fde8 25%,#f8fde8 50%,#fff 50%,#fff 75%,#f8fde8 75%,#f8fde8);
    animation: bgDeg_takao 2s steps(2) 0s infinite normal none;
}
#mikasano.kgArea::before{
    background-image: linear-gradient(45deg,#fff 25%,#fef9e8 25%,#fef9e8 50%,#fff 50%,#fff 75%,#fef9e8 75%,#fef9e8);
    animation: bgDeg_mikasano 2s steps(2) 0s infinite normal none;
}
#utsukushigaoka.kgArea::before{
    background-image: linear-gradient(45deg,#fff 25%,#fff5f5 25%,#fff5f5 50%,#fff 50%,#fff 75%,#fff5f5 75%,#fff5f5);
    animation: bgDeg_utsukushigaoka 2s steps(2) 0s infinite normal none;
}

@keyframes bgDeg_ishizaki {
    0% {background-image: linear-gradient(45deg,#fff 25%,#f2fcff 25%,#f2fcff 50%,#fff 50%,#fff 75%,#f2fcff 75%,#f2fcff);}
    100% {background-image: linear-gradient(90deg,#fff 25%,#f2fcff 25%,#f2fcff 50%,#fff 50%,#fff 75%,#f2fcff 75%,#f2fcff);;}
}
@keyframes bgDeg_takao {
    0% {background-image: linear-gradient(45deg,#fff 25%,#f8fde8 25%,#f8fde8 50%,#fff 50%,#fff 75%,#f8fde8 75%,#f8fde8);}
    100% {background-image: linear-gradient(90deg,#fff 25%,#f8fde8 25%,#f8fde8 50%,#fff 50%,#fff 75%,#f8fde8 75%,#f8fde8);;}
}
@keyframes bgDeg_mikasano {
    0% {background-image: linear-gradient(45deg,#fff 25%,#fef9e8 25%,#fef9e8 50%,#fff 50%,#fff 75%,#fef9e8 75%,#fef9e8);}
    100% {background-image: linear-gradient(90deg,#fff 25%,#fef9e8 25%,#fef9e8 50%,#fff 50%,#fff 75%,#fef9e8 75%,#fef9e8);;}
}
@keyframes bgDeg_utsukushigaoka {
    0% {background-image: linear-gradient(45deg,#fff 25%,#fff5f5 25%,#fff5f5 50%,#fff 50%,#fff 75%,#fff5f5 75%,#fff5f5);}
    100% {background-image: linear-gradient(90deg,#fff 25%,#fff5f5 25%,#fff5f5 50%,#fff 50%,#fff 75%,#fff5f5 75%,#fff5f5);;}
}

.kgAreaWrapper{
    position:relative;
    z-index:2;
}

#ishizaki.kgArea{padding-bottom:115px;}
#takao.kgArea{padding-bottom:115px;}
#mikasano.kgArea{padding-bottom:100px;}
#utsukushigaoka.kgArea{padding-bottom:50px;}

.kgName{
    position:relative;
    padding-top:50px;
    text-align:center;
    font-weight:normal;
}

.kgName .roman{
    position:absolute;
    top:0;
    left:50%;
    transform:translate(-50%);
    font-family: 'Oxygen', sans-serif;
    font-size:48px;
    line-height:1;
    letter-spacing:1px;
}

#ishizaki .kgName{color:#01a5e4;}
#ishizaki .kgName .roman{color:#e6f9ff;}
#takao .kgName{color:#aace36;}
#takao .kgName .roman{color:#f2fcd2;}
#mikasano .kgName{color:#fcc900;}
#mikasano .kgName .roman{color:#fef4d1;}
#utsukushigaoka .kgName{color:#f4b2b3;}
#utsukushigaoka .kgName .roman{color:#ffebec;}

.messageArea{
    display:flex;
    flex-wrap:wrap;
}

.messageArea .message{
    position:relative;
    width:400px;
    margin:80px 0 0;
    padding:10px;
    box-sizing:border-box;
}

.messageArea .message:nth-child(2){margin:120px 0 0 140px;}
.messageArea .message:nth-child(3){margin:120px 0 0 50px;}
.messageArea .message:nth-child(4){margin:180px 0 0 90px;}

.messageArea .message::before{
    content:"";
    display:block;
    position:absolute;
    top:-40px;
    left:-40px;
    width:484px;
    height:564px;
    background:url(../images/recruit/message/bg_message.png) no-repeat top left / 484px auto ;
    z-index:-1;
    transform:rotate(5deg);
}

.messageArea .message:nth-child(2)::before,
.messageArea .message:nth-child(3)::before{
    transform:rotate(-8deg);
}

/* badge */
.badge{
    position:absolute;
    top:-90px;
    left:-20px;
    line-height:1.1;
    vertical-align:bottom;
    box-sizing:border-box;
    text-align:center;
}

.messageArea .message:nth-child(1) .badge{transform:rotate(-8deg);}
.messageArea .message:nth-child(2) .badge{transform:rotate(5deg);}
.messageArea .message:nth-child(3) .badge{transform:rotate(8deg);}
.messageArea .message:nth-child(4) .badge{transform:rotate(-5deg);}

.messageArea .message:nth-child(even) .badge{
    left:-40px;
}

.badge.sakura{
    width:111px;
    height:102px;
    padding:38px 20px 20px 20px;
    background:url(../images/recruit/message/img_badge_sakura.png) no-repeat center center / 100% auto;
    color:#d83473;
}
.badge.sakura::before{
    top:27px;
    left:43px;
}

.badge.moon{
    width:106px;
    height:107px;
    padding:45px 16px 20px 16px;
    background:url(../images/recruit/message/img_badge_moon.png) no-repeat center center / 100% auto;
    color:#ee7800;
}
.badge.moon::before{
    top:29px;
    left:24px;
}

.badge.tulip{
    width:107px;
    height:104px;
    padding:40px 16px 20px 16px;
    background:url(../images/recruit/message/img_badge_tulip.png) no-repeat center center / 100% auto;
    color:#6c272d;
}
.badge.tulip::before{
    top:30px;
    left:40px;
}

.badge.chick{
    width:117px;
    height:95px;
    padding:38px 10px 20px 25px;
    background:url(../images/recruit/message/img_badge_chick.png) no-repeat center center / 100% auto;
    color:#6b3f31;
}
.badge.chick::before{
    top:23px;
    left:28px;
}

.badge .name{
    font-family: 'Kosugi Maru', sans-serif;
    font-size:24px;
    font-weight:bold;
    letter-spacing:-1px;
}

.badge .unit{
    display:block;
    margin-top:2px;
    font-size:12px;
    color:#24140e;
}



@media only screen and (max-width:640px){
    .badge{
        transform:scale(.9);
        top:-75px;
    }

    .badge,
    .messageArea .message:nth-child(even) .badge{
        left:-20px;
    }
}

.messageArea .ttl{
    margin:15px 0;
    font-size:18px;
    line-height:1.2;
}

.messageArea .messageDetail{
    margin-bottom:10px;
    line-height:1.5;
}

.messageArea .service{
    text-align:right;
    line-height:1.1;
    font-size:12px;
}

.messageArea .img{
    position:relative;
    width:100%;
    height:206px;
}

.messageArea .img .photo{
    position:absolute;
    top:0;
    left:0;
    width:270px;
    height:auto;
}

.messageArea .img .cut{
    position:absolute;
    bottom:0;
    right:0;
    height:auto;
}

#ishizaki .messageArea .teacher_1 .img .cut{width:123px;}
#ishizaki .messageArea .teacher_2 .img .cut{width:130px;}
#ishizaki .messageArea .teacher_3 .img .cut{width:160px;}

#takao .messageArea .teacher_1 .img .cut{width:132px;}
#takao .messageArea .teacher_2 .img .cut{width:155px;}
#takao .messageArea .teacher_3 .img .cut{width:142px;}

#mikasano .messageArea .teacher_1 .img .cut{width:149px;bottom:-25px;}
#mikasano .messageArea .teacher_2 .img .cut{width:148px;}
#mikasano .messageArea .teacher_3 .img .cut{width:146px;}
#mikasano .messageArea .teacher_4 .img .cut{width:160px;}

#utsukushigaoka .messageArea .teacher_1 .img .cut{width:126px;bottom:-10px;}
#utsukushigaoka .messageArea .teacher_2 .img .cut{width:140px;}
#utsukushigaoka .messageArea .teacher_3 .img .cut{width:146px;}
#utsukushigaoka .messageArea .teacher_4 .img .cut{width:144px;}

.addPhoto{
    position:absolute;
    bottom:-50px;
    right:0;
    width:420px;
    height:560px;
}

#ishizaki .addPhoto .photo.p_4{
    position:absolute;
    top:60px;
    left:0;
    width:350px;
}
#ishizaki .addPhoto .balloon{
    position:absolute;
    top:0;
    left:120px;
    width:181px;
    height:auto;
}
#ishizaki .addPhoto .cut.c_4{
    position:absolute;
    bottom:0;
    left:70px;
    width:230px;
}

#takao .addPhoto .photo.p_4{
    position:absolute;
    top:90px;
    left:120px;
    width:225px;
    transform:rotate(-5deg);
    z-index:3;
}
#takao .addPhoto .photo.p_5{
    position:absolute;
    top:260px;
    left:180px;
    width:225px;
    transform:rotate(13deg);
    z-index:2;
}
#takao .addPhoto .photo.p_6{
    position:absolute;
    top:420px;
    left:140px;
    width:225px;
    transform:rotate(-12deg);
    z-index:1;
}
#takao .addPhoto .balloon{
    position:absolute;
    bottom:130px;
    left:40px;
    width:181px;
    height:auto;
    z-index:4;
}

#mikasano .addPhoto{
    left:50px;
    width:100%;
    height:auto;
    bottom:-150px;
}

#utsukushigaoka .addPhoto{
    left:0;
    width:100%;
    height:auto;
    bottom:-90px;
}

#mikasano .addPhoto .cut.c_5{width:245px;}
#utsukushigaoka .addPhoto .cut.c_5{width:210px;}

.kgArea .photo{
    border:4px solid #fff;
    box-shadow: 0 0 0 2px #eee;
    box-sizing:border-box;
}

@media only screen and (max-width:640px){
    .kgName{padding-top:30px;}
    .kgName .roman{font-size:30px;}

    #ishizaki.kgArea{padding-bottom:0;}

    .messageArea{
        justify-content:center;
    }

    .messageArea .message{
        width:100%;
        max-width:400px;
        margin:80px 0 0;
    }

    .messageArea .ttl{
        margin:20px 0 10px;
    }

    .messageArea .message:nth-child(2){
        margin:100px 0 0;
    }

    .messageArea .message:nth-child(3){
        margin:120px 0 0;
    }

    .messageArea .message:nth-child(4){
        margin:120px 0 0;
    }

    .messageArea .message::before{
        width:464px;
        height:541px;
        top:-60px;
    }

    .messageArea .img{height:176px;}

    .messageArea .img .photo{
        width:65%;
    }

    .addPhoto{
        position:relative;
        width:100%;
        height:330px;
        margin-top:40px;
        bottom:0;
    }

    #ishizaki .addPhoto .photo.p_4{
        position:absolute;
        top:80px;
        left:10%;
        width:50%;
        min-width:220px;
    }
    #ishizaki .addPhoto .balloon{
        position:absolute;
        top:0;
        left:19%;
        width:160px;
        height:auto;
    }
    #ishizaki .addPhoto .cut.c_4{
        position:absolute;
        bottom:0;
        left:auto;
        right:0;
        width:36%;
        min-width:148px;
    }

    #takao .addPhoto .photo.p_4{
        top:10%;
        left:19%;
        width:45%;
        min-width:200px;
        max-width:250px;
    }
    #takao .addPhoto .photo.p_5{
        top:50%;
        left:50%;
        width:45%;
        min-width:200px;
        max-width:250px;
        transform:rotate(10deg);
    }
    #takao .addPhoto .photo.p_6{
        top:80%;
        left:13%;
        width:45%;
        min-width:200px;
        max-width:250px;
    }
    #takao .addPhoto .balloon{
        position:absolute;
        top:47%;
        left:9%;
        width:160px;
        height:auto;
    }

    #mikasano.kgArea{
        margin-bottom:10px;
        padding-bottom:0;
    }

    #mikasano .addPhoto{
        width:185px;
        bottom:10px;
        left:50%;
        transform:translate(-50%);
    }

    #mikasano .addPhoto .cut.c_5{width:185px;}

    #utsukushigaoka .messageArea .teacher_1 .img .cut{
        width:116px;
        bottom:-10px;
        right:30px;
    }

    #utsukushigaoka .messageArea .teacher_2 .img .cut{
        right:10px;
    }

    #utsukushigaoka .addPhoto{
        left:0;
        bottom:10px;
        margin-top:0;
    }

    #utsukushigaoka .addPhoto .cut.c_5{
        width:180px;
    }

    #utsukushigaoka.kgArea{
        margin-bottom:10px;
        padding-bottom:0;
    }

}

#onepoint{padding-top:20px;}

.onepointWrap{
    position:relative;
    padding:60px 80px;
    background:#f7f6e9;
}

.onepointWrap::before{
    content:"";
    position:absolute;
    top:-20px;
    left:0;
    width:100%;
    height:20px;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAAoCAYAAAAv1t6rAAAD7klEQVR4nO2bS4hcRRSGa4yB+MY3BBdRQVCzE8VVIDq4UNRVJBJEBBWUYCArUQyjoC5cKehGZBTd2C7MIkRFZATju10kEowM0syDW+ckJNPTVf9f6ozTLjoz+IB0p++tqh69B/79+fiqittdp0ygdmOGlBnTpwD7ROw+EnC+3I+T1C9i92FqobXQWmgttBZaC11nqYXWQmuho5xaaC20FjrK+d8IDZAf+4EGr7sCdSW3lJKcz/TlhH60boUS+gNpdzSbzY39QI0xxrniRkJeCxRmlzN4lgJ0krS3DcLYaDQ2APZuUg+tH6HQtvf2EWPM2CCQ/6yFBbslQD8ZAVl9Fqx865xsHYbRGDMWfPEQITLaQiFH2+3Z64eE/BswYJ8PI3oME/r6oCfPmQqY3UzINyMplJDDi4tzl1Ugc61Iu3vUpALyYpWMInJBlVIrEUroPDC7uUrQ1QLkpdwS1wKdjMHonL0yUKdHReiKc3Z7DFBjeh8SpH6ZXSb12Nzc3HmxOAF7a6AuZxcK6NuxIFfLOdkaqH/kFOqc3BGbk15ezS10ud3W62KDGmMMKe/nkknK5ykYO53iikBBPqGQAylAjTEmuGJbPqF2RzJO6GQ+od4+nAp0YmLiHEI0g9ClEyeOXZSKE7D3ZBOa6rhdLUI/SL47IV+nZDx16pdLQonvhRJCxacENcaYAN2XfIdC30jNScpMjh06nRoU0MfTC5VnU3OS8lV6oZAjqUFP38qkFerl6dScZa7Zyhy5rdSggH0ytVDATqTmJOT7HEJ/azQaG1KCZvkbEPJWSkZjjCHUZhCqXefszSlBA+RAaqGEfJeS0Tm5qky/pYSSdncq0GazuTFAF5PvUOpyuz1zaSpOenkwo1A9lAoUkPszyOwGaheQx1JxErI/m9BAXQGKW1KABsinuYQSctgMOYFxNtVuy7WBupRTaDdAD8YGdc5uzyVzTaqzD8TmBPSdsn1Wc8HtZGcsyKIozg+Un7ILhc53OvOXx+L0Xu4MFUxnVDOCAm13OvM3ROAcI+Xd3DL/wnkwxk81cv6aMj9VqhfaW8FzCwt2S4WcY6S+kl3iv6TKm1VK9V6vDpAjVfVX6dQfocWgM6pnqlartansvWDMELL/5Mnpi8tyOmdvChXNEkURejq/B+i+Vqu1aRhIUm6vcsVGzLT3Oj4M49TU1Lmk7Ck7nZBKaG8VU2ZI2TPgaOdYcMU2Qj4MmWeHzjrQj70v7hrkGD5+/OiFgDwaqD/H6if+2xbKr4HyGWBfCF53ea/j3us4IPeS8lTvKcHw93+jEkKElPfodS8g961y0snOAH2u964l/jOPBELrpEwt9D+WPwEd2cgTYJwrLQAAAABJRU5ErkJggg==) repeat-x top left / 58px auto;
}

.onepointWrap::after{
    content:"";
    position:absolute;
    bottom:-60px;
    right:-45px;
    width:140px;
    height:321px;
    background:url(../images/recruit/message/img_onepoint_cut.png) no-repeat top center / 100% auto;
}

.onepointWrap .ttl{
    margin-bottom:25px;
    text-align:center;
}

.onepointWrap .ttl > span{
    display:inline-block;
    position:relative;
    padding:0 15px 12px;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAYCAYAAAB+zTpYAAAC2ElEQVRoge2ZIVDjUBCGM1MTgbnBVaKxuOtMZkrfLg4TUxUVgahrJ3mbmboaBK6yMT3TmSa7ClVZhcPVoRAoZphBYDiRcMdxN0Be0qZw/DPP7/uyb/ffjWV9ab0i4AcCviXkK0JeEfCSgCdayVADd7VK9l1r1qg7zm1T2E52tUqPCLmnQcYEch4hX2Yc5SYCvotQHq0I5fGtk3+AhFTqDzrSrPtydchzYjtU6bEGGUfIl+/h9m7AfwFHWWjg7v+Q2UF7fkDAEwK+NWFlBPhZZl9rlP6JM9upG0TVyp6/LMrwKQ34OWhSqf8ZMjrP2GUVXCoD/PvwZdCeH9QNyURhO9kl5Gm1PCoH/JTRcvaRyoYG7hLKzTpYWITiauAuqdTPrJmMCWVBwNelICNfaZUe1Q3vNQWH873MXpWACHxHyBeEPI2UjAi5pzH1CMUlFPfVAAYdaWZfl6dPvq54NvMk+P7j24aYvVukUr/EnZaE3Kt0RvCc2M5hXxgEdB2q9LiSQEoqOJzvmbgDQrnRSoYbmQNC4JZJpyXkJDic7609wH/Ic2JbKxkS8n1RsITc85zY3njQGrhbtFZno7mcbWoi9JzYJpX6JnFGSka1N+sTZ7aTjY+Fy8YDAU/WZesGHWlqlL5JsybgpVbJ/jriMlYI3CLklVHTQF5FSkYhcMv0KbrWrKFVsk/IvdwFPRjEca9R+ls7MHlObBPyqcnl/nia2VYqIZAzjdInlfpPtodQ3MwGcU8rGeZ7gqXpruBZrV3U1R8KK2jPD4psnOo8BHxLKvXrZlZYrjVraJR+0a69UbjIyYdfvw460iTgSd0wX4C9CIFbdbOpVHkDmpapzxWUg+W2DDxr06AjzdzwX20oW+8JefrpMvYtudasEQK3IiWj3AVUltn5v8UJobi1DwrbIs+J7RC4lVkyPiXk5NdPxJcWDPguH2FXBHKuQcYapR+q9PjDN60vFdNPRI4rZSTrJhkAAAAASUVORK5CYII=) repeat-x bottom left / 44px auto;
    font-size:16px;
    font-weight:normal;
}

.onepointWrap .ttl .point{
    position:absolute;
    top:-25px;
    left:-70px;
    display:inline-block;
    padding:0 15px;
    color:#666;
    font-size:12px;
    font-weight:normal;
    transform:rotate(-10deg);
}

.onepointWrap .ttl .point::before,
.onepointWrap .ttl .point::after{
    content:"";
    position:absolute;
    top:5px;
    width:0;
    height:0;
    border-style: solid;
    border-width: 24px 1px 0 1px;
    border-color: #999 transparent transparent transparent;
}

.onepointWrap .ttl .point::before{
    left:0;
    transform:rotate(-25deg);
}

.onepointWrap .ttl .point::after{
    right:0;
    transform:rotate(25deg);
}

.onepointWrap .adviceLst{
    display:flex;
    flex-wrap:wrap;
}

.onepointWrap .adviceLst li{
    position:relative;
    width:365px;
    margin-left:55px;
    padding:10px 0 10px 24px;
    box-sizing:border-box;
    border-bottom:5px dotted #fff;
    line-height:1.75;
}

.onepointWrap .adviceLst li:nth-last-of-type(-n+2){
    border-bottom:0;
}

.onepointWrap .adviceLst li::before{
    content:"";
    position:absolute;
    top:17px;
    left:0;
    width:16px;
    height:16px;
    border-radius:16px;
    background:#7c48b1;
}

.onepointWrap .adviceLst li:nth-of-type(odd){
    margin-left:0;
}


@media only screen and (max-width:640px){
    .onepointWrap{
        padding:50px 20px 30px;
    }

    .onepointWrap .ttl{
        margin-bottom:15px;
    }

    .onepointWrap .ttl .point{
        left:-10px;
    }

    .onepointWrap .adviceLst li{
        width:100%;
        margin-left:0;
    }
    
    .onepointWrap .adviceLst li:nth-last-of-type(2){
        border-bottom:5px dotted #fff;
    }

    .onepointWrap .adviceLst li:last-of-type{
        padding-right:30px;
    }

    .onepointWrap::after{
        bottom:-30px;
        right:-5px;
        width:60px;
        height:138px;
    }
}

/* questionnaire */

.questArea{font-size: 0;}

.questImg{
    display: inline-block;
    margin-right: 80px;
    vertical-align: top;
    font-size: 0;
}

.questImg:last-child{margin-right: 0;}

@media only screen and (max-width:640px){
.questImg{
    display: block;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.questImg:last-child{margin: 50px auto 0;}

}

/* ====================================================
 download
===================================================== */
.downloadLst{margin-top: 40px;}

.downloadLst a{
    display: block;
    position: relative;
    padding: 10px 50px 10px 10px;
    border-bottom: 1px dashed #ddd;
}

.downloadLst a:first-child{border-top: 1px dashed #ddd;}

.downloadLst a::after{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 15px);
    right: 10px;
    width: 27px;
    height: 30px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA8CAMAAAAaALmJAAAAYFBMVEUAAABmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZ3vnYRAAAAH3RSTlMAWpa7tFWIZzMRd90ipsP3QhcI8OrRgToskm1K4aFhecIFswAAANhJREFUSMft0csOgyAURVF8oKKigm9ty///ZQsOSEpLuJhGE7vna3IOIplDDL0XCIe60YuJGsOZKjdZXdiqNxcaLEa2KrEVEy8megZlcyfdbQKyoCyka1cgQ6RSR6RAhjgVsgTGXg3KUQ5k6KEurAiQoaaVrihdWRHReUjxiJULXZnu1yyGMR2bGrwMIa36zmCO0UsxUtpi31gqbNFd7O7HQoNNqa3mA3PpiowTW1wz0G/nYFlua921ZPJnBoP+dg42JraCcyzpVH4U67F7VDNQR7Amgrcgz555SYCqaZqEOgAAAABJRU5ErkJggg==) no-repeat top center / 27px 30px;
}

@media only screen and (max-width:640px){

    .downloadLst{margin-top: 20px;}

    .downloadLst a{padding:10px 25px 10px 0;}

    .downloadLst a::after{
        top: calc(50% - 10px);
        right: 0;
        width: 18px;
        height: 20px;
        background-size: 18px 20px;
    }

}