@charset "utf-8";

html {
    max-width: 1920px;
    font-family:  "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
}
body{
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6 {
    color: #222;
    font-weight: 600;
    line-height: 1.3;
}
img{
    display: block;
    width: 100%;
}
h2 {
    margin-top: 1.3em;
}
header{
    max-width: 1920px;
    padding: 24px 20px;
    box-sizing: border-box;
}
header img{
    width:14%;
    height: auto;
}
.mv{
    max-width: 1920px;
    width: auto;
    height: 778px;
    position: relative;
}
.copy{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    max-width: 415px;
}
.copy .cta{
    background-color: #fff;
    padding: 10% 25%;
    box-sizing: border-box;
}
.copy a{
    width: 130px;
    display: block;
    margin: 10px auto 0;
}
/* スライダーフェードイン start*/
.slider-wrap {
    height: 778px;
    width: auto;
    margin: 0 auto;
    overflow: hidden;
    }
    
    .slide-item>img {
    width: auto;
    height: 100%;
    object-fit: cover;
    }
    
    @keyframes fadezoom {
    0% {
    transform: scale(1);
    }
    
    100% {
    transform: scale(1.1);
    }
    }
    .slick-animation {
    animation: fadezoom 5s 0s forwards;
    }
/* スライダーフェードイン end*/
/* ドットカスタム start */
.mv .slider-wrap {
    position: relative;
}
.mv  .slick-dots li {
    margin: 0 4px; 
    width: 90px;
    height: 5px;
}
.mv .slick-dots li button{
    width: 85px;
    height: 8px;
}
.mv .slick-dots li button:before {
    content:'';
    width: 85px;
    height: 8px;
    background: #ffffff5e;
}
.mv .slick-dots li.slick-active button:before{
    background: #fff;
    opacity: 1;
}
.mv .slick-dots {
    position: absolute;
    bottom: 50px;
    z-index: 5;
}
/* ドットカスタム end */

/* intro */
.intro{
    background-image: url(../img/content_bg1_pc.png);
    padding: 10% 0;
}
.intro .bgf{
    background-color: #fff;
    width: 90%;
    margin-bottom: 120px;
}
.intro .consept {
    display: flex;
    padding-left: 15%;
    padding-right: 5%;
    align-items: center;
}
.intro .consept img:first-child{
    width: 50%;
    height: auto;
    margin-right: 5%;
    position: relative;
    top: -60px;
}
.intro .consept .txt{
    width: 45%;
}
.intro .consept .txt img:first-child{
width: 100%;
height: auto;
margin-bottom: 30px;
position: unset;
}
.intro .consept .txt p{
    letter-spacing: 0.05em;
    line-height: 2em;
}
.btT{
    margin-top: 0;
}

/* スタッフ */
.intro .bgf:nth-child(2) {
    margin-left: 10%;
    margin-bottom: 0;
}
.intro .staff img:nth-of-type(1){
    width: 45%;
    height: auto;
    margin-right: 0%;
    margin-left: 5%;
    position: relative;
    top: -60px;
}
.intro .consept.staff {
    display: flex;
    padding-left: 5%;
    padding-right: 10%;
    align-items: center;
}
.intro .consept.staff .txt img:first-child {
    width: 55%;
    height: auto;
    margin-bottom: 40px;
    position: unset;
    margin-left: 0;
}
.intro .consept.staff .txt {
    width: 50%;
}
/* 魅力 */
.charm{
    background-image: url(../img/content_bg2_pc.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 8% 2% 6%;
    position: relative;
}
.charm .inner{
    max-width: 1300px;
    margin: 0 auto;
}
.charm .inner img:first-child{
    width: 40%;
    margin: 0 auto 60px;
}
/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
    position:absolute;
    left: 50%;
    top: -7%;
    height: 120px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
        /*描画位置*/
    position: absolute;
    left:-15px;
    top: -15px;
        /*テキストの形状*/
    color: #000;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
    content: "";
        /*描画位置*/
    position: absolute;
    top: 0;
        /*線の形状*/
    width: 1px;
    height: 20px;
    background: #000;
        /*線の動き1.4秒かけて動く。永遠にループ*/
    animation: pathmove 1.4s ease-in-out infinite;
    opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
    0%{
        height:0;
        top:0;
        opacity: 0;
    }
    30%{
        height:80px;
        opacity: 1;
    }
    100%{
        height:0;
        top:120px;
        opacity: 0;
    }
}
/* エントリー */
.entry{
    padding: 8% 3%;
    box-sizing: border-box;
    background: linear-gradient(90deg, #fff 0%, #fff 80%, #FFF5F3 20%, #FFF5F3 100%);
}
.entry .inner{
    max-width: 1400px;
    margin: 0 auto;
}
.entry .inner img.title{
    width: 240px;
    margin: 0 auto;
}
.part{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.part img{
    width: 50%;
}
.part .txt{
    width: 45%;
}
.part .txt img{
    width: 70%;
    margin-bottom: 30px;
}
.part .txt p {
    letter-spacing: 0.05em;
    line-height: 2em;
    margin-bottom:8%;
}
.entry a{
    display: block;
    width: 235px;
    margin: 0 auto;
}
#wrapper .entry .part .txt .cta{
    background-color: #EF919F;
    padding: 8% ;
    box-sizing: border-box;
    border-radius: 50px;
    margin-bottom: 0;
}
#wrapper .entry .cta img{
    width: 45%;
    margin: 0 auto;
}
.entry .part:nth-of-type(2){
    margin-top: -20px;
}
.entry .part:nth-of-type(2) .txt img{
    width: 95%;
}
/* プログラム */
.program{
    background-color: #F6F6F8;
    padding: 6% 0;
}
.program .bgP{
    background: linear-gradient(90deg, #FADCDE 0%, #FADCDE 70%, #F6F6F8 30%, #F6F6F8 100%);
}
.program .bgP img{
    max-width: 1050px;
    padding: 6% 0;
    margin:  0 auto;
    
}
/* 業務内容 */
.job{
    padding: 8% 3%;
    box-sizing: border-box;
    background: linear-gradient(270deg, #fff 0%, #fff 80%, #FFF5F3 20%, #FFF5F3 100%);
}
.job .inner{
    max-width: 1200px;
    margin: 0 auto;
}
.job .inner .title{
    width: 560px;
    margin: 0 auto 50px;
}
.s-flow{
    background-color: #FFEBEC;
    padding: 8% 3%;
    box-sizing: border-box;
}
.s-flow .inner{
    max-width: 1200px;
    margin: 0 auto; 
}
.s-flow .inner .title{
    margin: 0 auto 40px;
    width: 520px;
}
.holiday{
    padding: 8% 0%;
    box-sizing: border-box;
    
}
.holiday .bgP{
    padding: 5% 0 5% 5%;
    background: linear-gradient(90deg, #FADCDE 0%, #FADCDE 70%, #fff 30%, #fff 100%);
}
.holiday img{
    max-width: 900px;
    margin: 0 auto;
}
/* スタッフの声 */
.voice{
    background-color: #F2F3F5;
    padding: 8% 3%;
}
.voice .inner{
max-width: 1100px;
margin: 0 auto;
}
.voice .title{
    width: 250px;
    margin: 0 auto 40px;
}
.voice .slider div{
    padding:0 1%;
    box-sizing: border-box;
}
.voice .slick-dots{
    bottom:-50px;
}
.voice .slick-dots li {
    margin: 0 15px;
    width: 10px;
    height: 10px;
}
.voice .slick-dots li button{
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: solid 5px #f09fac;
}
.voice .slick-dots li button:before {
    content:'';
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: none;
    opacity: 1;
}
.voice .slick-dots li.slick-active button:before{
    background: #f09fac;
}
.voice .slick-dots li button:before {
    top: 3px;
    left: 4px;
}
.cta-area2 .inner{
    padding: 8% 3%;
    max-width: 600px;
    margin: 0 auto;
}
.cta-area2 .cta {
    background-color: #EF919F;
    padding: 8%;
    box-sizing: border-box;
    border-radius: 50px;
    margin-bottom: 0;
}
.cta-area2 .cta img {
    width: 45%;
    margin: 0 auto;
}
.cta-area2 a {
    display: block;
    width:300px;
    margin: 40px auto 0;
}
.discription{
    background-color: #FFF5F3;
    padding: 8% 3%;
}
.discription img{
    width: 485px;
    margin: 0 auto;
}
table{
max-width: 1000px;
margin: 40px auto 0;
background-color: #fff;
border-collapse: collapse;
border: 1px solid #EF919F;
}
table th{
width: 25%;
padding: 3%;
background-color:#EF919F ;
color: #fff;
border-bottom:  1px  solid #fff;
}
table tr:last-child th{
    border-bottom: none;
    }
table td{
    width: 75%;
    padding: 3%;
    border: 1px solid #EF919F;
}
.flow{
    background-color: #F2F3F5;
    padding: 8% 3%;
    box-sizing: border-box;
}
.flow .inner{
    max-width: 1400px;
    margin: 0 auto;
}
.flow .inner img:first-child{
    width: 220px;
    margin: 0 auto 40px;
}
.massage{
    padding: 8% 0%;
    box-sizing: border-box;
}
.massage img.title{
    width: 370px;
    margin: 0 auto 40px;
}
.massage .bgp{
    background: linear-gradient(90deg, #FADCDE 0%, #FADCDE 70%, #fff 30%, #fff 100%);
    padding: 4%;
}
.massage .bgp img{
    max-width: 1250px;
    margin: 0 auto;
}
.cta-area2.bgG{
    background-color: #F2F3F5;
}
.qa{
    padding: 6% 0%;
}
.qa .title{
margin: 0 auto 40px;
width: 210px;
}
.qa h2{
    font-size: 25px;
    text-align: center;
    background-color: #FADCDE;
    padding: 1% ;
    line-height: 25px;
}
.qa .inner{
    max-width: 900px;
    margin: 0 auto;
    padding: 0 5%;
}
dl{
    max-width: 900px;
    margin: 10px auto;
    border: 1px solid #F192A3;
    padding: 1.5%;
    box-sizing: border-box;
}
.qa .inner dl:nth-of-type(1){
    margin-top: 30px;
}
dt{
    font-size: 1.3rem;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom:20px;
    position: relative;
    margin-left: 5%;
}
dt::before{
    content: '';/*何も入れない*/
    display: inline-block;/*忘れずに！*/
    width: 35px;/*画像の幅*/
    height: 35px;/*画像の高さ*/
    background-image: url(../img/Q.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    box-sizing: border-box;
    margin-right: 10px;
    position: absolute;
    left: -5%;
    top: -4px;
}
dd {
    margin-inline-start: 0px;
}
.pc{
    display: none;
}


/* 1650px */
@media only screen and (max-width: 1650px){
    .intro .bgf{
        width: 95%;
    }
    .intro .consept {
        display: flex;
        padding-left: 7%;
        padding-right: 5%;
        align-items: center;
    }
    .intro .bgf:nth-child(2) {
        margin-left: 7%;
        margin-bottom: 0;
    }
    .intro .consept.staff {
        padding-right: 6%;
    }
    .intro .consept.staff .txt img:first-child {
        width: 50%;
        height: auto;
    }
}
/* 1400px */
@media only screen and (max-width: 1400px){
    header img {
        width: 20%;
        height: auto;
    }
    .slider-wrap {
        height: 710px;
    }
    .slick-dots {
        bottom: 30px;
    }
    .slick-dots {
        position: absolute;
        bottom: 30px;
        z-index: 5;
    }
    .copy {
        top: 48%;
    }
    .intro .bgf{
        width: 100%;
    }
    .intro .consept {
        padding: 1% 5% 1% 5%;
    }
    .intro .consept img:first-child {
        width: 45%;
        height: auto;
        margin-right: 5%;
        position: relative;
        top: -60px;
    }
    .intro .consept .txt {
        width: 50%;
    }
    .intro .consept .txt img:first-child {
        width: 90%;
        height: auto;
    }
    .intro .bgf:nth-child(2) {
        margin-left: 0%;
        margin-bottom: 0;
    }
    .intro .consept.staff {
        padding-right: 5%;
    }
}
/* 1250px */
@media only screen and (max-width: 1250px){
    .intro .consept {
        padding: 2% 6% 2% 6%;
    }
    .intro .consept .txt img:first-child {
        margin-bottom: 20px;
        margin-top: 25px;
    }
    .intro .consept img:first-child {
        top: -70px;
    }
    .intro .consept.staff .txt img:first-child {
        margin-bottom: 20px;
        margin-top: 0px;
    }
}
/* 1000px */
@media only screen and (max-width: 1000px){
    .entry .part:nth-of-type(2) {
        margin-top: 0px;
    }
    .voice .slider div {
        padding: 0 0.2%;
    }
    .cta-area2 .inner {
        padding: 8% 3%;
        max-width: 550px;
        margin: 0 auto;
    }
    dt {
        margin-left: 7%;
    }
    dt::before {
        left: -7%;
    }
}
/* ----------SP------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 786px){
    header {
        width: 100%;
        padding: 4% 3% ;
        box-sizing: border-box;
    }
    header img {
        width: 40%;
        height: auto;
    }
    .pc{
        display: block;
    }
    .mv {
        width: 100%;
        width: auto;
        height: 420px;
    }
    .slider-wrap {
        height: 420px;
    }
    .slide-item>img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    .copy {
        max-width: unset;
        width: 78%;
    }
    .copy a {
        width: 105px;
        display: block;
        margin: 10px auto 0;
    }
    .copy .cta {
        padding: 10% 20%;
    }
    .mv .slick-dots li {
        width: 50px;
    }
    .mv .slick-dots li button {
        width: 50px;
        height: 8px;
    }
    .mv .slick-dots li button:before {
        width: 50px;
        height: 5px;
        background: #ffffffd1;
    }
    .mv .slick-dots{
        text-align: left;
        margin-left: 20px;
        bottom: 10px;
    }
    .intro {
        background-image: url(../img/content_bg1_sp.png);
        background-position: top;
        padding: 10% 0 25%;
    }
    /* intro */
    .bgf .pc{
        margin: 0 calc(50% - 50vw);
        width: 100vw;
        margin-bottom: 20px;
    }
    .intro .staff img:nth-of-type(1) {
        width: 100%;
        height: auto;
        top: 0;
        margin: 0;
    }
    .intro .consept.staff .txt {
        width: 100%;
        padding: 7%;
        box-sizing: border-box;
    }
    .intro .consept.staff {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        padding: 0;
    }
    .intro .bgf:nth-child(2) {
        width: 90%;
        margin: 0 auto;
    }
    .intro .consept.staff .txt img:first-child {
        width: 75%;
        height: auto;
    }
    .intro .consept img:first-child {
        width: 100%;
        height: auto;
    }
    .intro .consept .txt {
        width: 100%;
    }
    .intro .consept {
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .intro .bgf {
        width: 90%;
        margin: 0 auto 30%;
    }
    .sp{
        display: none;
    }
    .charm {
        background-image: none;
        padding:  0%;
        position: relative;
    }
    .charm .inner img:first-child {
        width: 83%;
        margin: 0 auto 60px;
    }
    .charm .inner img:first-child {
        width: 83%;
        margin: 0 auto 0px;
    }
    .sp-bg{
        background-image: url(../img/content_bg2_sp.png);
        background-position: bottom right;
        background-size: cover;
        background-repeat: no-repeat;
        padding: 20% 0 3% 0;
    }
    .scrolldown1 {
        height: 70px;
    }
    /*高さ・位置・透過が変化して線が上から下に動く*/
    @keyframes pathmove{
    0%{
        height:0;
        top:0;
        opacity: 0;
    }
    30%{
        height:40px;
        opacity: 1;
    }
    100%{
        height:0;
        top:70px;
        opacity: 0;
    }
    }
    .scrolldown1 {
        position: absolute;
        left: 50%;
        top: -2%;
        height: 120px;
    }
    .entry .inner img.title {
        width: 50%;
        margin: 0 auto;
    }
    .entry {
        padding: 15% 0%;
    }
    .part {
        display: block;
        align-items: center;
        justify-content: space-between;
    }
    .part img {
        width: 92%;
        height: auto;
        margin-top: 30px;
    }
    .part .txt {
        width: 83%;
        margin: 0 auto;
    }
    .part .txt img {
        width: 80%;
        margin-bottom: 30px;
    }
    .entry .part:nth-of-type(2) {
        margin-top: -10px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .entry .part:nth-last-of-type(1).part img {
        width: 92%;
        margin-left: 8%;
        box-sizing: border-box;
    }
    .entry .part:nth-last-of-type(1).part .txt img {
        margin-left: 0;
        width: 95%;
        margin: 40px 0 30px;
    }
    .program .bgP img {
        max-width: unset;
        width: 85%;
        padding: 10% 0;
    }
    .program .bgP {
        background: linear-gradient(90deg, #FADCDE 0%, #FADCDE 86%, #F6F6F8 24%, #F6F6F8 100%);
    }
    .program {
        background-color: #F6F6F8;
        padding: 16% 0;
    }
    .job {
        padding: 15% 3%;
    }
    .job .inner .title {
        width: 90%;
        margin: 0 auto 30px;
    }
    .s-flow .inner .title {
        margin: 0 auto 30px;
        width: 85%;
    }
    .s-flow {
        padding: 15% 3%;
    }
    .holiday {
        padding: 15% 0%;
    }
    .holiday .bgP {
        padding: 10% 5% 10% 5%;
        background: linear-gradient(90deg, #FADCDE 0%, #FADCDE 80%, #fff 20%, #fff 100%);
        box-sizing: border-box;
    }
    .voice .title {
        width: 40%;
        margin: 0 auto 30px;
    }
    .voice {
        background-color: #F2F3F5;
        padding: 15% 0% 20%;
    }
    .voice .slick-dots li button {
        width: 15px;
        height: 15px;
        border-radius: 100%;
        border: solid 5px #f09fac;
    }
    .voice .slick-dots li button:before {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 100%;
        background: none;
        opacity: 1;
    }
    .voice .slick-dots li button:before {
        top: 5px;
        left: 5px;
    }
    .cta-area2 .inner {
        padding: 15% 3%;
        box-sizing: border-box;
        max-width: 65%;
        margin: 0 auto;
    }
    .cta-area2 .inner {
        padding: 15% 3%;
        box-sizing: border-box;
        max-width: 70%;
        margin: 0 auto;
    }
    .cta-area2 a {
        display: block;
        width: 96%;
        margin: 40px auto 0;
    }
    .cta-area2 .cta img {
        width: 56%;
        margin: 0 auto;
    }
    .discription img {
        width: 90%;
        margin: 0 auto;
    }
    .discription {
        padding: 15% 5%;
    }
    table td {
        width: 75%;
        padding: 3%;
        border: 1px solid #EF919F;
        font-size: 0.9rem;
    }
    table th{
        font-size: 0.9rem;
    }
    .flow {
        background-color: #F2F3F5;
        padding: 15% 5%;
    }
    .flow .inner img:first-child {
        width: 40%;
        margin: 0 auto 30px;
    }
    .massage img.title {
        width: 60%;
        margin: 0px auto 30px;
    }
    .massage {
        padding: 15% 0%;
        box-sizing: border-box;
    }
    .massage .bgp {
        background: linear-gradient(90deg, #FADCDE 0%, #FADCDE 80%, #fff 20%, #fff 100%);
        padding: 10%;
    }
    .qa .title {
        margin: 0 auto 40px;
        width: 38%;
    }
    .qa {
        padding: 15% 0%;
    }
    .qa h2 {
        font-size: 22px;
        text-align: center;
        background-color: #FADCDE;
        padding: 3%;
        /* line-height: 35px; */
    }
    dt {
        font-size: 1.1rem;
        margin-left: 14%;
        line-height: 1.3rem;
    }
    dl {
        padding: 5%;
        font-size: 0.9rem;
    }
    dt::before {
        left: -16%;
        top: -10px;
    }
    dd{
        line-height: 1.5rem;
    }
}