@charset "utf-8";
/* CSS Document */

/**/
h3{
    margin-bottom: 20px;
    width: 100%;
}
.section__intoroduction{
    padding: 0 20px 40px;
}
.section__intoroduction p{
    margin-bottom: 40px;
}
/*３項目のボタンの大きさ設定*/
.section__intoroduction .button{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;    
}
/*３項目のボタンの大きさ設定*/
.section__intoroduction .button img{
    width: 29vw;
    filter: drop-shadow(0px 3px 6px rgba(0, 0 , 0 ,.25));
}

@media screen and (min-width: 480px) {
    .section__title h2 img{
        margin-bottom: 100px;
    }
    .section__intoroduction .button{
        display: none;
    }
}
/*レッスン形態の余白設定*/
.section__lesson_form{
    padding: 40px 20px;
}
.section__lesson_form ul {
display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1080px;
    margin: 0 auto;
    align-items: flex-start;
}
/*背景のドット設定*/
.section__lesson_form ul li{
    background-color: #FDEEED;
    background-image: radial-gradient(#fff 15%, transparent 15%), radial-gradient(#fff 15%, transparent 15%);
    border-radius: 20px;
    background-position: 0px 0px, 25px 25px;
    background-size: 50px 50px;
    padding: 25px 20px;
	position: relative;
    width: 100%;
    margin-bottom: 80px;
    max-width: 335px;
}
/*動画レッスンの背景色*/
.section__lesson_form ul li:nth-child(1){
     background-color: #FDEEED;
}
/*オンラインレッスンの背景色*/
.section__lesson_form ul li:nth-child(2){
     background-color: #EFFBFF;
}
/*対面レッスンの背景色*/
.section__lesson_form ul li:nth-child(3){
     background-color: #EDF6E7;
    margin-bottom: 0;
}
/*アイコンの位置を一括設定*/
.section__lesson_form ul li img{
      width: 30%;
    top: -5%;
    left: 0;
}

/*対面レッスンの画像サイズ一括設定*/
.section__lesson_form ul li .pic{
   content: "";
    display: block;
    height: 29vh;
    border-radius: 20px;
    margin-bottom: 18px;
        max-height: 196px;
}
/*対面レッスンの画像*/
.section__lesson_form ul li:nth-child(1) .pic{
        background: url("../img/common/common_pic/movie_lesson.jpg") center top no-repeat;
    background-size: cover;
}
/*対面レッスンの画像*/
.section__lesson_form ul li:nth-child(2) .pic{
        background: url("../img/common/common_pic/onlinelesson.png") center top no-repeat;
    background-size: cover;
}
/*対面レッスンの画像*/
.section__lesson_form ul li:nth-child(3) .pic{
        background: url("../img/common/common_pic/regular_lesson.JPG") center top no-repeat;
    background-size: cover;
}
/*レッスン形態名のフォント設定*/
.section__lesson_form ul li h4{
    font-size: 1.8rem;
    font-family: 'Kiwi Maru', serif;
    margin-bottom: 10px;
    font-weight: 400;
}

/*タグの設定*/
.section__lesson_form .tag {
    border: 1px solid #5D4D2E;
    border-radius: 20px;
    padding: 0.2em 0.5em;
    min-width: 21%;
    font-size: 1.1rem;
    margin-right: 8px;
}
/*タグを横並びにして下部に余白を設ける*/
.section__lesson_form .flex {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
/*レッスン形態の文字全体を左寄せにする*/
.section__lesson_form .description{
    text-align: left;
    margin-bottom: 20px;
}
.section__lesson_form .info{
    text-align: left;
    margin-bottom: 15px;
}
.section__lesson_form .info_title{
    padding: 3px 13px;
    display: inline-block;
    border-radius: 5px;
    color: #fff;
    margin-bottom: 5px;
    background-position: left;
}
/*期間、料金、レッスン日の背景色*/
.section__lesson_form ul li:nth-child(1) .info_title{
        background-color: #E9989E;
}
/*期間、料金、レッスン日の背景色*/
.section__lesson_form ul li:nth-child(2) .info_title{
        background-color: #94DAF1;
}
/*期間、料金、レッスン日の背景色*/
.section__lesson_form ul li:nth-child(3) .info_title{
        background-color: #ABD297;
}
/*フォントを太字に*/
.section__lesson_form .font_bold{
    font-weight: bold;
}
/*フォントカラーを濃いピンクに*/
.section__lesson_form p .vivid_pink{
    color: #D70050;
}

@media screen and (min-width: 480px) {
    
    .section__lesson_form ul li img{
        width: 37%;
    }
    .section__lesson_form ul li h4{
        font-size: 2.1rem;
    }
    .section__lesson_form .tag{
        font-size: 1.4rem;
    }
}


.section__lesson_contents{
    padding: 40px 20px;
}
.section__lesson_contents h3{
	margin-bottom: 60px;
}
/*ベビーマッサージ上のイラスト*/
.illsut_05{
 top: -20%;
    right: -1%;
    width: 18vw;
        max-width: 100px;
}
/*クラフト教室横のイラスト*/
.illsut_06{
    top: 80%;
    left: -5%;
    width: 14vw;
     max-width: 82px;
}

/*レッスン内容を横並びにする*/
.section__lesson_contents ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
/*レッスン内容の枠の共通設定*/
.section__lesson_contents ul li{
    
    background-color: #FFF;
    border: solid 1px #E9989E;/*枠の線*/
    border-radius: 20px;
    box-shadow: 3px 3px #E9989E;/*影の設定*/
    margin-bottom: 20px;
    width: calc(50% - 10px);
    
}

/*ベビーマッサージのみ横いっぱいに広げる*/
.section__lesson_contents ul li:first-child{
    width: 100%;    
}
/*ベビーマッサージの写真と文字を横並びに*/
.lesson_contents__massa{
	display: flex;
    align-items: center;
    padding: 1.0em 1.0em;
    transition: all .5s;
}
.lesson_contents__massa:hover{
    transform: scale(1.05, 1.05);
}
/*ベビーマッサージの画像の大きさ設定*/
.lesson_contents__massa img{
        object-fit: cover;
    border-radius: 10px;
    width: 35vw;
    height: 34vw;
}
.lesson_contents__nomassa{
       padding: 1.0em 1.0em;
    transition: all .5s;
}
.lesson_contents__nomassa:hover{
    transform: scale(1.05, 1.05);
}
/*ベビーマッサージ以外の画像の大きさ設定*/
.lesson_contents__nomassa img{
	    object-fit: cover;
    border-radius: 10px;
    width:100%;
	height: 13vh;
     margin-bottom:0.5em;
}
/*文字を中央に寄せる*/
.lesson_contents__letter{
    margin: 0 auto;
    font-family: 'Kiwi Maru', serif;
}
/*「ベビーマッサージ」項目名の大きさ設定*/
.section__lesson_contents h4{
	font-size: 1.4rem;
    margin-bottom: 1.2em;
    font-weight: 400;
}
/*ベビーマッサージ以外のレッスン名の大きさ設定*/
.section__lesson_contents ul li:nth-child(n+2) h4{
    margin-bottom:0.5em;
}
.section__lesson_contents p{
       font-size: 1.2rem;
    color: #E9989E;
}
.spacer{
    display: none;
}
@media screen and (min-width: 960px) { 
    .section__lesson_contents{
        padding-bottom: 160px;
    }
    .section__lesson_contents ul{
        max-width: 1080px;
        margin: 0 auto;
        justify-content: center;
    }
    .section__lesson_contents ul li{
        margin: 0 10px 40px;
        max-width: 285px;
    }
    .lesson_contents__massa{
        display: block;
          padding: 1.5em 1.0em 1.5em;
    }
    .lesson_contents__massa img{
        width: 100%;
        height: 146px;
    }
    .lesson_contents__nomassa{
        padding: 1.5em 1.0em 1.5em;
    }
    .lesson_contents__nomassa img{
        height: 146px;
        margin: 0;
    }
    
    .section__lesson_contents h3{
        margin-bottom: 80px;
    }
    .section__lesson_contents h4, .section__lesson_contents ul li:nth-child(n+2) h4{
        font-size: 1.8rem;
        margin:1.0em 0 0.5em;
    }
    .section__lesson_contents p{
        font-size: 1.8rem;
    }
    .spacer{
        display: block;
        width: 100%;
    }
    .illsut_05{
        right: -110%;
    }
    .illsut_06{
        left: -120%;
    }
	footer{
		padding-top: 0;
	}
}