/* CSS Document */

body{
    max-width: 1100px;
    margin:  0 auto;
    font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic Pro', "Meiryo UI", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
    font-size: 62.5%;
}

img{
    width: 100%;
    display: block;
}

h1,h2,h3,h4,p{
    margin: 0;
}

.text-box{
     width: 100%;
     height: auto;
     position: relative;
}

.fv-title{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    letter-spacing: 0.1em;
    line-height: 2;
    font-weight: 100;
    width: 100%;
}

.main-title{
    font-size: clamp(9px, -1.862px + 2.897vw, 30px);
    color: #fff;
}
.sub-title{
     color: #E8477C;
     font-size: clamp(16px, -4.690px + 5.517vw, 56px);
     font-weight: bold;
     width: 100%;
}
.sub-title::after{
    content: "フィットネス発想のマシンピラティス。";
    display: block;
    font-size: clamp(9px, -2.379px + 3.034vw, 31px);
    font-weight: 100;
    margin-top: 10px;
}

.contents-title{
    position: absolute;
    top: 50%;
    left: 9%;
    transform: translateY(-50%);
    margin: 0;
    font-size: clamp(16px, 2.034px + 3.724vw, 40px);
}
.title-revers{
    left: 41%;
}
.contents-box{
    width: 82%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    display: flex;
    justify-content: space-between;
}
.box-revers{
    flex-direction: row-reverse;
}
.contents-box p{
    width: 45%;
    font-size: clamp(11px, -0.379px + 3.034vw, 33px);
    letter-spacing: 0.1em;
    line-height: 1.5;
    font-weight: 100;
    color: #fff;
}
.contents-box img{
    width: 45%;
}

.lesson-title{
    color: #E8477C;
    font-size: clamp(18px, 0.414px + 4.69vw, 52px);
    font-weight: bold;
    text-align: center;
}
.lesson-title span{
    font-size: clamp(22px, 1.828px + 5.379vw, 61px);
    background-color: #F8D2DE;
}
.lesson-text{
    color: #E8477C;
    font-size: clamp(13px, 1.103px + 3.172vw, 36px);
    font-weight: 100;
    text-align: center;
}