@charset "utf-8";

/* コーポレートカラー #a2c7c9
文字 #6b584b
アクセントカラー #07575b 
薄い緑 #dae9e9
ピンク　#c9a3b4
補色　#c9a5a3*/

.renew-area{
    max-width: 450px;
}

.top-text{
    text-align: center;
}

.renew img{
    max-width: 100%;
    height: auto;
}

.renew{
    max-width: 440px;
    justify-content: center;
    margin: 0 auto;
    padding: 20px;
    background: linear-gradient(90deg, transparent 20%, #dae9e9 70%)
}

.renew-area .renew-before{
    position: relative;
}

.renew-area .before{
    position: absolute;
    display: inline-block;
    left: -10px;
    top: 0;
    color: #07575b ;
    background-color: rgba(218, 233, 233,0.5);
    border-radius: 10px;
    font-size: 20px;
    padding: 0 10px;
    font-weight: bold;
    transform: rotate(-15deg);
}

.renew-area .renew-after{
    position: relative;
}

.renew-area .after{
    position: absolute;
    display: inline-block;
    left: -10px;
    top: -10px;
    color: #07575b ;
    background-color: rgba(218, 233, 233,0.5);
    border-radius: 10px;
    font-size: 20px;
    padding: 0 10px;
    font-weight: bold;
    transform: rotate(-15deg);
}

.renew-text{
    margin-bottom: 50px;
}

.renew-text dt{
    width: max-content;
    background: linear-gradient(transparent 70%, #dae9e9 80%);
}

.renew-text dd{
    margin-left: 2em;
    text-align: justify;
    margin-bottom: 10px;
}


/* -----------------------------------------
  ここから450px以下の画面に向けた記述
----------------------------------------- */
@media screen and (max-width:450px){
   
    .top-text{
        text-align: left;
    }

}