@charset "utf-8";

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

.concept-1{
    background-color: #a2c7c9;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    font-weight: bold;
    line-height: 1.5;
}

.concept{
    justify-content: center;
}


.concept-2,.concept-3{
    background-color: #a2c7c9;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 20px 20px;
    font-weight: bold;
    line-height: 1.5;
}

.concept-area{
    line-height: 2;
    margin-bottom: 20px;
}

.concept-area p span{
    background:linear-gradient(transparent 70%, #c9a3b4 80%);
}

.osusume-area ul {
    width: 100%;
    list-style-type: disc;
    list-style-position: inside;
    background-color: #dae9e9;
    padding: 5px 10px;
    margin-bottom: 10px;
}

.osusume-area ul li{
    width: 100%;
    line-height: 2;
}

.exercise{
    margin-bottom: 20px;
    gap: 5px;
}

.exercise img{
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.osusume-area ul li span{
    background:linear-gradient(transparent 70%, #c9a3b4 80%);
}

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

.instructor img{
    max-width: 300px;
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
    margin-bottom: 20px;
}

.instructor{
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.shikaku ul {
    width: max-content;
    padding: 0 10px ;
    border-bottom: 1px dashed #6b584b;
    border-top: 1px dashed #6b584b;
    margin-bottom: 20px;
}

.shikaku ul li{
    width: 100%;
}


.aisatsu{
    background-color: #dae9e9;
    padding: 20px;
    box-shadow: 1px 2px 2px rgba(0,0,0,0.3);
    margin-bottom: 20px;
    text-align: justify;
}

.aisatsu p{
    background-color: #dae9e9; /* 背景色 */
    background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #dae9e9 50%, #dae9e9 100%), /* 点線1の色 */
                      linear-gradient(180deg, #6b584b 1px, transparent 1px); /* 点線2の色と太さ */
    background-size: 8px 100%, /* 点線1のサイズ 　幅・高さの順*/
                     100% 2em; /* 点線2のサイズ */
    line-height: 2em; /* 文字の高さ */
    padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}


h3{
    text-align: left;
    padding: 0 20px;
}


/* レスポンシブ */
/* -----------------------------------------
  ここから768px以下の画面に向けた記述
----------------------------------------- */
@media screen and (max-width:768px){
    .concept-1{
        width: 100px;
        height: 100px;
    }

    .concept-2,.concept-3{
        width: 80px;
        height: 80px;
    }

}

/* -----------------------------------------
ここから660px以下の画面に向けた記述
----------------------------------------- */
@media screen and (max-width:660px){
    .concept-area{
        line-height: 1.8;
    }

    .osusume-area ul {
        list-style: none;
    }

    .osusume-area ul li{
       font-size: 14px;
    }

    .osusume-area li{
        line-height: 1.8;
    }
    
    .osusume-area ul li span{
        font-size: 16px;
        font-weight: 500;
    }
}

/* -----------------------------------------
  ここから500px以下の画面に向けた記述
----------------------------------------- */
/* 最小320px幅での表示でも問題ない状態を目指す */
@media screen and (max-width:500px){
    .osusume-area ul {
        padding: 5px 0;
    }

    .aisatsu{
        font-size: 14px;
    }
}