@charset "UTF-8";
/* CSS Document */
@font-face {
    /*フォントの名前*/
    font-family: "MPLUSRounded1c";
    font-weight:400;
    /*フォントファイルへのパス（複数指定の場合、上から順に読み込まれる）*/
    src: url("../../../fonts/ShadowsIntoLight-Regular.ttf") format("ttf"),
         url("../../../fonts/MPLUSRounded1c-Regular.woff") format("woff"),
         url("../../../fonts/MPLUSRounded1c-Regular.ttf") format("ttf"),
         url("../../../fonts/MPLUSRounded1c-Regular.eot") format("eot");
}
@font-face {
    /*フォントの名前*/
    font-family: "MPLUSRounded1c";
    font-weight:500;
    src: url("../../../fonts/MPLUSRounded1c-Medium.woff2") format("woff2"),
         url("../../../fonts/MPLUSRounded1c-Medium.woff") format("woff"),
         url("../../../fonts/MPLUSRounded1c-Medium.ttf") format("ttf"),
         url("../../../fonts/MPLUSRounded1c-Medium.eot") format("eot");
}
@font-face {
    /*フォントの名前*/
    font-family: "MPLUSRounded1c";
    font-weight:600;
    src: url("../../../fonts/MPLUSRounded1c-Bold.woff2") format("woff2"),
         url("../../../fonts/MPLUSRounded1c-Bold.woff") format("woff"),
         url("../../../fonts/MPLUSRounded1c-Bold.ttf") format("ttf"),
         url("../../../fonts/MPLUSRounded1c-Bold.eot") format("eot");
}

h1,h2,h3,h4,p,span,ul,li,table,a,div,section{margin:0; padding:0;}

#wrapper{overflow:hidden;}

div.main{
    position:relative;
    max-width:1920px;
    height:auto;
    margin:0 auto;
    padding:0;
    border-bottom:none;
    z-index:0;
}
div.main > img{max-width:100%;}

div.main div.title{
    position:absolute;
    right:2.5%;
    bottom:5%;
    width:clamp(300px,40vw,600px);
}
div.main div.title img{
    display:inline-block;
    vertical-align:bottom;
    width:100%;
}

div.area{
	font-family: "MPLUSRounded1c";
	color: #111;
    padding:60px 0;
    margin:0 auto;
    overflow:hidden;
}
div.area.blue{background:#ECEEF7;}

div.area div.contents{
    position:relative;
    width:auto;
    max-width:1280px;
    margin:0 auto;
    padding:0 15px;
    z-index:0;
}
div.contents + div.contents{margin-top:60px;}

div.flex{display:flex;}
.red{color:#f00;}
.center{text-align:center;}
.inline_flex{display:inline-flex;}

/*インデント・小文字・画像関係*/
div.contents > p.indent{
    padding-left:1.1em;
    text-indent:-1.1em;
    margin:0;
}
div.contents > p.min{
    font-size:80%;
    line-height:1.4;
}
div.contents > p.min + p.min{margin-top:0.25em;}
div.box img.f_img{margin:0 auto;}
strong{font-weight:600;}

div.contents h2{
    display:table;
    max-width:520px;
    min-width:240px;
    color:#fff;
    text-align:center;
    font-size:28px;
    font-weight:600;
    margin:0 auto 0;
    padding:18px 1.5em;
    border:none;
    background:none;
    border-radius:42px;
    background:#2C4E82;
}
div.contents h2 + *{margin-top:40px;}

/**
外国人に英語で習う英語でチェロ３つの特徴
**/
div.contents.point h2{
    display:block;
    color:#2C4E82;
    border-radius:0;
    background:none;
    max-width:768px;
}
div.contents.point h2 span{
    display:block;
    color:#fff;
    background:#2C4E82;
    padding:5px;
    border-radius:8px;
    margin-top:5px;
}

div.contents.point div.flex{
    justify-content: space-between;
    flex-wrap:wrap;
    margin-top:60px;
}
div.contents.point::before{
    position:absolute;
    content:"";
    display:inline-block;
    left:-120px;
    top:-20px;
    width:282px;
    height:276px;
    z-index:0;
    background:url(../img/gara01.png) center no-repeat;
    background-size:contain;
    z-index:-1;
}
div.contents.point div.flex div{
    position:relative;
    width:calc((100% - 100px) /3);
    padding:50px 20px 20px;
    border-radius:12px;
    background:#ECEEF7;
    box-sizing:border-box;
}
div.contents.point div.flex div span.icon{
    position:absolute;
    top:-35px;
    left:50%;
    transform:translateX(-50%);
    padding:12px 12px 10px;
    color:#fff;
    font-size:20px;
    font-weight:600;
    line-height:1.1;
    text-align:center;
    background:#2C4E82;
    border-radius:50px;
}
div.contents.point div.flex div img{
    display:block;
    margin:0 auto;
    width:300px;
    max-width:100%;
}
div.contents.point div.flex div h3{
    color:#2C4E82;
    font-size:24px;
    line-height:1.4;
    text-align:center;
    margin-top:20px;
}
div.contents.point div.flex div p{
    font-size:18px;
    line-height:1.8;
    margin-top:15px;
}

/**
講師
**/
div.contents.staff::before{
    position:absolute;
    content:"";
    display:inline-block;
    left:-150px;
    top:-40px;
    width:322px;
    height:326px;
    background:url(../img/pattem03.png) center no-repeat;
    background-size:contain;
    z-index:-1;
}
div.contents.staff::after{
    position:absolute;
    content:"";
    display:inline-block;
    right:-100px;
    top:-25px;
    width:280px;
    height:206px;
    background:url(../img/gara02.png) center no-repeat;
    background-size:contain;
    z-index:0;
}

div.contents.staff div.staff-box h3{
    font-family:'Noteworthy';
    color:#2C4E82;
    font-size:64px;
    text-align:center;
    letter-spacing:6pt;
    font-style:italic;
    font-weight:400;
    line-height:1.4;
}
div.contents.staff div.staff-box p{
    background:#fff;
    padding:30px 40px;
    margin-top:30px;
    border-radius:10px;
    line-height:2;
}
div.contents.staff div.flex div:last-child::before{
    position:absolute;
    content:"";
    display:inline-block;
    right:-100px;
    top:-75px;
    width:280px;
    height:206px;
    background:url(../img/gara02.png) center no-repeat;
    background-size:contain;
    z-index:0;
}
div.mov_wrap{
    position:relative;
    width:640px;
    height:400px;
    padding:0;
    margin:30px auto 0;
    overflow:hidden;
    border-radius:6px;
}
div.mov_wrap iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/**
費用
**/
table.p_td{
    width:100%;
    padding:0;
    border-collapse: collapse;
    background:#fff;
}
table.p_td tr th,
table.p_td tr td{
    font-weight:400;
    font-size:18px;
    text-align:left;
    padding:16px 20px;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
}
table.p_td tr th{
    font-weight:600;
    width:220px;
    color:#2C4E82;
    background:#ECEEF7;
}
table.p_td + p{margin-top:40px;}

/**
よくある質問
**/
div.area.yel{background:#EEC828;}
div.contents.qa::before{
    position:absolute;
    content:"";
    display:inline-block;
    left:-150px;
    top:-75px;
    width:239px;
    height:244px;
    z-index:0;
    background:url(../img/pattem10.png) center no-repeat;
    background-size:contain;
    z-index:-1;
}
h3.question{
    position:relative;
    font-size:18px;
    line-height:1.1;
    color:#fff;
    border-radius:12px 12px 0 0;
    background:#2C4E82;
    padding:16px 12px 16px 45px;
    margin:0 auto;
}
h3.question::before{
    position:absolute;
    left:16px;    
    top:15px;
    display:inline-block;
    content:"Ｑ";
    font-size:20px;
    color:#fff;
}
p.answer{
    position:relative;
    font-size:18px;
    line-height:1.6;
    border-radius:0 0 12px 12px;
    padding:15px 15px 15px 45px;
    margin:5px auto 0;
    background:#fff;
}
p.answer::before{
    position:absolute;
    left:16px;    
    top:20px;
    display:inline-block;
    content:"Ａ";
    font-size:20px;
    line-height:1;
    color:#ec4666;
    font-weight:600;
}
p.answer + h3.question{margin-top:20px;}

/*アクションボタン*/
a.btn{
    display:table;
    max-width:520px;
    min-width:240px;
    position:relative;
    color:#fff;
    font-size:28px;
    font-weight:600;
    text-decoration:none;
    text-align:center;
    margin:0 auto;
    background:#eb4e4e;
    border-radius:6px;
    padding:18px 1.5em;    
    box-shadow:0 4px 1px #84071f;
    transition:0.3s ease;
    transform:translateY(0px);
}
a.btn:hover{
    transform:translateY(3px);
    box-shadow:0 1px 1px #84071f;
}

* + a.btn{margin-top:20px;}

/*幅いっぱい画像*/

br.br{display:inline;}
br.sp_br{display:none;}

.pc_only{display:block;}
.sp_only{display:none;}


@media screen and (max-width:1024px) {

/**
特徴
**/
div.contents.point div.flex div{width:calc((100% - 40px) /3);}
div.contents.point::before{
    left:-60px;
    top:20px;
}


}


@media screen and (max-width:768px) {

div.main{margin-top:60px;}
div.main div.title{
    top:5%;
    bottom:auto;
    right:0;
    width:58.593vw;
}
div.contents h2 + *{margin-top:20px;}


/**
特徴
**/
div.contents.point::before{
    right:-50px;
    top:0;
}
div.contents.point div.flex{display:block;}
div.contents.point div.flex div{
    width:auto;
    margin:0 auto;
    padding:50px 15px 15px;
}
div.contents.point div.flex div + div{margin-top:40px;}

/**
講師
**/
div.contents.staff::after{
    right:0;
    top:0;
    width:180px;
    height:103px;
}
div.contents.staff div.staff-box h3{
    font-size:5.8vw;
    letter-spacing:4pt;
}
div.contents.staff div.staff-box p{padding:25px;}



/**
費用
**/
div.contents.price::before{
    left:-25px;
    top:-50px;
}
table.p_td tr th{width:120px;}


/**
よくある質問
**/
div.contents.qa::before{
    left:-25px;
    top:-60px;
}

/*アクションボタン*/
a.btn{max-width:380px;}


br.br{display:none;}
br.sp_br{display:inline;}

.pc_only{display:none;}
.sp_only{display:block;}


}


@media screen and (max-width:599px) {
div.contents h2{
    font-size:22px;
    padding:10px 0.75em;
}
div.contents > p {
    font-size:16px;
    line-height:1.6;
}

/**
特徴
**/
div.contents.point::before{
    right:-50px;
    top:60px;
    width:141px;
    height:140px;
}

div.contents.point div.flex div img{
    display:block;
    max-width:240px;
}
div.contents.point div.flex div p{
    font-size:16px;
    line-height:1.6;
    padding:0;
}

/**
講師
**/
div.contents.staff::after{
    right:20px;
    top:-50px;
    width:100px;
    height:74px;
}
div.contents.staff div.staff-box p{
    font-size:16px;
    line-height:1.6;
}

div.mov_wrap{
    width:100%;
    height:0;
    padding-top:56.5%;
}


/**
費用
**/
table.p_td,
table.p_td tbody,
table.p_td tr{
    display:block;
    width:100%;
}

table.p_td tr th,
table.p_td tr td{
    display:block;
    width:auto;
    font-weight:500;
    font-size:16px;
    line-height:1.6;
    padding:12px 16px;
    border:none;
}
table.p_td tr:last-child td{border-bottom:1px solid #ccc;}


/**
よくある質問
**/
h3.question{
    font-size:16px;
    line-height:1.6;
    padding:12px 12px 12px 40px;
}
h3.question::before{
    left:12px;    
    top:10px;
}
p.answer{
    font-size:16px;
    padding:12px 12px 12px 40px;
}
p.answer::before{
    left:12px;
    top:15px;
}
p.answer + h3.question{margin-top:15px;}

/*アクションボタン*/
a.btn{
    max-width:280px;
    font-size:18px;
    padding:16px 1em;
}

br.br599{display:inline;}

}


@media screen and (max-width:480px) {


}


div.area.grn{
    background:#e9f6f3;
    margin-top:50px;
}

div.area.grn h2.col{color:#40c6b1;}

div.osusume-drum{
    display:flex;
    justify-content:space-between;
    margin:0 auto;
}

div.osusume-drum div{
    position:relative;
    width:calc((100% - 60px)/3);
    padding:45px 30px 30px;
    background:#fff;
    border-radius:10px;
    box-sizing:border-box;
    box-shadow:0 0 6px rgba(0,0,0,0.1);
}
div.osusume-drum div::before{
    position:absolute;
    content:"";
    display:flex;
    justify-content:center;
    align-items:center;
    top:-25px;
    left:50%;
    transform:translateX(-50%);
    width:50px;
    height:50px;
    color:#fff;
    font-size:20px;
    font-weight:600;
    font-weight:600;
    background:#40c6b1;
    border-radius:25px;
}
div.osusume-drum div:nth-child(1)::before{content:"1";}
div.osusume-drum div:nth-child(2)::before{content:"2";}
div.osusume-drum div:nth-child(3)::before{content:"3";}
div.osusume-drum div p{
    font-size:20px;
    line-height:2;
    font-weight:500;
}


@media screen and (max-width:768px) {

div.osusume-drum{
    flex-direction:column;
    width:480px;
    max-width:100%;
}
div.osusume-drum div{
    width:100%;
    padding:30px;
}    
div.osusume-drum div + div{margin-top:25px;}

div.osusume-drum div::before{
    top:-15px;
    width:30px;
    height:30px;
    font-size:16px;
    border-radius:15px;
}
div.osusume-drum div p{font-size:16px;}

}