@charset "utf-8";
/* default */
@import url("/css/usr/contents/qjuku/responsive.gs.24col3.css");
@import url("/css/usr/contents/qjuku/lightbox.min.css");
@import url("/css/usr/contents/qjuku/normalize.css");
@import url("/css/usr/contents/qjuku/common.css");
@import url("/css/usr/contents/qjuku/info.css");
@import url("/css/usr/contents/qjuku/class.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("https://use.fontawesome.com/releases/v5.7.2/css/all.css");
@import url("https://use.fontawesome.com/releases/v6.2.0/css/all.css");
@import url("/css/usr/contents/qjuku/quilt-juku.css");

/* *******************************************************************　*/
/* 各ページ共通 ******************************************************　*/
/* *******************************************************************　*/
/* ヘッダー共通 */
header h1{
 margin: 1em 0;
 line-height: 0;
}
.block-category-list--header{
 display: none;
}

/* ページ共通 */

.spNone {
 display: none;
}
/* トップページ */
#jukuTop{
 padding: .5em;
 font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
#about{
 background: rgba(206,0,128,.08);
 /*line-height: 2rem;*/
 font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
 padding: 1.5em;
}
#about h1{
 border-bottom: 3px dashed #ce0080;
 margin-bottom: 1em;
 padding: .3em 0 0;
}
#about .gutters2 .span_6 { width: 32.0%; }
#about .gutters2 .span_18 { width: 66.0%; }
#infoTop p.ttl,
#snsTop p.ttl,
#newsTop p.ttl{
 border-bottom: 5px double #ce0080;
 color: rgba(206,0,128,1.00);
 letter-spacing: 0;
 margin-top: 1em;
 padding: .5em;
}
#infoTop h2{
 color: #ce0080;
 margin-top: 1.5em;
 padding-left: .3em
}
#infoTop h2::before{
 content: "\f111\00a0";
 font-family: "FontAwesome";
}
#infoTop h3{
 font-weight: normal;
 margin-bottom: .5em;
 padding-left: .3em
}
#infoTop h4{
 font-weight: normal;
}
#infoTop li{
 margin: 0 .5em;
}
#infoTop .infoNew{
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 color: #fff;
 background-color: #c00;
 display: inline-block;
 margin-right: .3em;
 padding: .1em .5em;
}
#infoTop ul{
 padding: .3em;
}
#infoTop ul li{
 border-bottom: 1px solid #ccc;
 margin-bottom: .5em;
 padding: .5em;
}
#infoTop ul li div{
 padding: .5em;
}
#infoTop ul li div.brdrB{
 border-bottom: 1px dashed #ccc;
 margin-bottom: 1.5em;
 padding-bottom: .5em;
}
#infoTop ul li .sseminar{
 display:-webkit-box;
 display:-moz-box;
 display:-ms-box;
 display:-webkit-flexbox;
 display:-moz-flexbox;
 display:-ms-flexbox;
 display:-webkit-flex;
 display:-moz-flex;
 display:-ms-flex;
 display:flex;
 -webkit-box-lines:multiple;
 -moz-box-lines:multiple;
 -webkit-flex-wrap:wrap;
 -moz-flex-wrap:wrap;
 -ms-flex-wrap:wrap;
 flex-wrap:wrap;
}
#infoTop ul li .sseminar p.span_6{
 background: #efefef;
 border: 1px solid #ccc;
 font-size: 13px;
 margin-bottom: .5em;
 padding:.5em;
 position: relative;
}
#infoTop ul li .sseminar p.span_6:nth-child(5){
 margin-left: 0;
}
#infoTop ul li .sseminar p.span_6 a.ssa{
 display: block;
 text-decoration: none;
}
#infoTop ul li .sseminar p.span_6 .ssTtl{
 display: block;
 line-height: 1.1em;
 margin-bottom: .4em;
 padding-left: 12px;
}
#infoTop ul li .sseminar p.span_6 .ssName{
 display: block;
 line-height: 1.1em;
 font-weight: bold;
 margin-bottom: .4em;
}
#infoTop ul li .sseminar p.span_6 .ssTtl::before{
 content: "\f111";
 font-family: "FontAwesome";
 font-size: 9px;
 margin-left: -10px;
 margin-top: -2px;
}
#infoTop .subttl{
 display: block;
 border-bottom: 1px dashed #666;
 margin-bottom: .8em;
 padding-bottom: .1em;
}
#infoTop .emPink{
 color: #ce0080;
 display: block;
 margin-bottom: .3em;
}
#infoTop .emPink::before{
 content: "\f111\00a0";
 font-family: "FontAwesome";
}
a.lnkLine {
 border-bottom: 1px solid #333;
}
a:link.lnkLine,
a:active.lnkLine,
a:hover.lnkLine {
 border-bottom: 1px dashed #333;
 text-decoration: none;
}
.btnzoomArea a{
 border: 1px solid #ce0080;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 color:  #ce0080;
 display: block;
 font-size: 14px;
 padding: 10px;
 margin: 10px;
 text-align: center;
 text-decoration: none;
}
.btnzoomArea a:hover{
 background-color: #ce0080;
 color: #fff;
}
a.btnInfo,
a.btnInfo2,
a.btnInfoNew,
a.btnMail {
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 color: #fff;
 padding: 10px;
 margin: 10px;
 text-align: center;
 text-decoration: none;
 background-color: #ce0080;
}
a.btnLine {
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 color: #fff;
 display: block;
 padding: 10px;
 margin: 10px;
 text-align: center;
 text-decoration: none;
 background-color: #00b900;
}
a.btnInfo,
a.btnInfoNew {
 display: block;
}
a.btnInfo2 {
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 color: #fff;
 display: block;
 padding: 10px;
 margin: 10px;
 text-align: center;
 text-decoration: none;
 background-color: #ce0080;
}
a.btnMail {
 display: inline-block;
 margin: 0 .5em;
 padding: .5em 3em;
}
a.btnInfo:hover,
a.btnInfo2:hover,
a.btnInfoNew:hover,
a.btnLine:hover,
a.btnMail:hover {
 color: #fff;
 opacity: .7;
}
a.btnInfo::after,
a.btnInfo2::after {
 content: "\00a0\f138";
 font-family: "FontAwesome";
}
a.btnInfoNew::after {
 content: "\00a0\f08e";
 font-family: "FontAwesome";
}
a.btnMail::after {
 content: "\00a0\f003";
 font-family: "FontAwesome";
}
#snsTop{
}
#snsTop li a{
 display: block;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 color: #fff;
 font-size: 19px;
 padding: 1em;
 margin-bottom: 1em;
 margin-top: 1em;
 text-align: center;
 text-decoration: none;
}
#snsTop li i{
 display: inline-block;
 padding-right: .2em;
}
#snsTop li.twitter a {
 background: #1DA1F2;
}
#snsTop li.instagram a {
 background: #D93177;
}
#snsTop li.line a {
 background: #00b900;
}
#newsTop{
}
#infoList li,
#newsTop li{
 border-bottom: 1px dashed #ccc;
 font-size: 13px;
 /*font-size: 1.3rem;*/
 margin-bottom: .5em;
 padding: .3em;
}
#newsTop .date{
}
#infoList .date::before,
#newsTop .date::before{
 color: #ce0080;
 content: "\f0da\00a0";
 font-family: "FontAwesome";
}
#infoList li a,
#newsTop li a{
 text-decoration: underline;
}
#infoList li a:hover,
#newsTop li a:hover{
 color: #ce0080;
}
#newsTop .toInfo{
 margin: 1em 0;
}
#newsTop .toInfo::before{
 color: #ce0080;
 content: "\f138\00a0";
 font-family: "FontAwesome";
}
#newsTop .toInfo a{
 text-decoration: underline;
}
/* お申込みについて*/
#apply{
 font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
 padding: .5em;
}
#apply .apply1{
}
#apply .apply1 p{
 padding: 1em;
}
#apply h1{
 border-bottom: 5px double #ce0080;
 color: rgba(206,0,128,1.00);
 letter-spacing: 0;
 padding: 0 .5em;
}
#apply h2{
 color: #ce0080;
 margin-top: 1.5em;
 padding-left: .3em
}
#apply h2::before{
 content: "\f111\00a0";
 font-family: "FontAwesome";
}
#apply .process {
 background: rgba(206,0,128,.05);
 counter-reset: number;
 list-style: none;
 margin: 1em;
 padding: 1.5em;
}
#apply .detailWrap{
 padding: 1em;
}
#apply .detailWrap .span_3,
#apply .detailWrap .span_4{
 margin-left: 0;
}
#apply .detailWrap dt{
 font-weight: bold;
}
#apply .detailWrap dd{
 margin-bottom: .8em;
}
#apply .process li {
 line-height: 2;
 margin-bottom: 2em;
 position: relative;
}
#apply .process li:last-child {
 margin-bottom: 0;
}
#apply .process li::before {
 background: rgba(206,0,128,.8);
 border-radius: 50%;
 color: #fff;
 counter-increment: number;
 content: counter(number);
 display: inline-block;
 font-family: 'Cinzel', serif;
 margin-right: .3em;
 text-align: center;
 height: 2em;
 width: 2em;
 }
#apply .process li::after {
 color: rgba(206,0,128,.5);
 content: "\f063";
 font-family: "FontAwesome";
 position: absolute;
 left: 10%;
 bottom: -2em;
}
#apply .process p{
 margin-left: 2em;
}
#apply .process li:last-child::after {
 content: "";
}
#apply .processList{
 display: block;
 margin-left:  2em;
 position: relative;
}
#apply .processList::before {
 color: rgba(206,0,128,1);
 content: "\f111";
 font-family: "FontAwesome";
 left: -1.5em;
 padding-right: .3em;
 position: absolute;
}
#apply .attention {
 background: rgba(206,0,128,.05);
 list-style: none;
 margin: 1em;
 padding: 1.5em;
}
#apply .attention li {
 margin-left:  1.5em;
 padding-bottom: 1.5em;
 position: relative;
}
#apply .attention li::before {
 color: rgba(206,0,128,1);
 content: "\f069";
 font-family: "FontAwesome";
 left: -1.5em;
 padding-right: .3em;
 position: absolute;
}
/*クラス*/
#class #profile .workPic{
 max-width: 100%;
}
#class #profile .teacher{
 padding: 1em;
}
#class #profile .teacher img{
 background: #fff;
 display: block;
 margin: 0 auto 1em;
 padding: .8em;
}
#class .classAttention .midashi1{
 margin: 1.5em 2em;
}
#class .classAttention .midashi1{
 margin: 1.5em 2em;
}
#class .classAttention ul{
 list-style: none;
 margin: 1em;
 padding: 1.5em;
}
#class .classAttention li {
 margin-left:  1.5em;
 padding-bottom: 1.5em;
 position: relative;
}
/************************************************/
@media print, screen and (min-width: 600px) {
}
/************************************************/
@media print, screen and (min-width: 768px) {
a.btnInfo2 {
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
 color: #fff;
 display: block;
 padding: 20px 15px;
 width: 70%;
 margin: 10px auto;
}
/* ナビゲーション＆サイドメニュー共通 */
#menuButton {
 display: none;
}
/* ヘッダー共通 */
.headerContent header {
 text-align: left;
}
header h1{
 text-align: left;
}
/* ページ共通 */
.spNone {
 display: block;
}
/* トップページ */
#jukuTop{
 padding: 1em .5em;
}
#about{
}
#about .gutters2 .span_6 { width: 23.5%; }
#about .gutters2 .span_18 { width: 74.5%; }
/* お申し込みについて */
#apply{
 padding: 1em;
}
/*クラス*/
#class #profile .workPic{
 max-width: 50%;
}
/************************************************/
}
@media screen and (min-width : 1024px) {
/* PC */
}
