@charset "UTF-8";

/*RESET*/

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
img{ border:0; }
.clear{ clear:both; }
.clearL{ clear:left; }

body{
background:url(../img/common/bg.jpg) repeat-x;
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック";
font-size:100%;
color:#333333;
text-align:center;
}
:focus {
	outline: 0;
}
a{
	color:#333333;
	text-decoration:none;
}
a:hover,
a:active {
	color:#ff53b1;
	text-decoration:underline;
}

li{
	list-style-type:none;
}



/*/////////HAMBURGER///////////*/

#hamburger {
display: none;
position: absolute;
width: 38px;
height: 19px;
border: none;
right: 25px;
top: 19px;
cursor: pointer;
z-index: 200;
}
.burger-btn{
display: block;
height:19px;
position: absolute;
border: none;
cursor: pointer;
}
.burger-btn .bar{
width: 38px;
height: 1px;
display: block;
position: absolute;
left: 0;
background-color: #6e6e6e;
}
.burger-btn .bar_top{
top:0;
transition: 0.3s;
}
.burger-btn .bar_mid{
display: block;
top: 46%;
transition: 0.2s;
}
.burger-btn .bar_bottom{
bottom: 0;
transition: 0.3s;
}

/* MODAL open時 */
#hamburger.menuopen{
width: 38px;
height: 38px;
position: absolute;
right: 0;
}
#hamburger.menuopen .bar{
width: 38px;
height: 1px;  
display: block;
position: absolute;
}    
#hamburger.menuopen .bar_top{
top: 0;
transform: translate(-40%,10px) rotate(45deg)
}
#hamburger.menuopen .bar_mid{
opacity: 0;
left: -40px;
}
#hamburger.menuopen .bar_bottom{
bottom: 0;
transform: translate(-40%,-9px) rotate(-45deg);
}

#hamburger_cl{
    position: absolute;
    width: 38px;
    height: 19px;
    border: none;
    right: 0px;
    top: 25px;
    cursor: pointer;
}
#hamburger_cl .bar{
width: 38px;
height: 1px;  
display: block;
position: absolute;
}    
#hamburger_cl .bar_top{
top: 0;
transform: translate(-40%,10px) rotate(45deg)
}
#hamburger_cl .bar_bottom{
bottom: 0;
transform: translate(-40%,-9px) rotate(-45deg);
}

/*/////////DRAWER MENU///////////*/

#drawer_menu{
display: none;
z-index: 500;
background:url(../img/common/bg.jpg);
background-size: cover;
text-align: center;
width: 100%;
min-height: 100vh;
position: absolute;
top: 0;
padding:20px 20px 0 ;
box-sizing: border-box;
}
#drawer_logo{
text-align: center;
padding-bottom: 20px;
}
#menu_menu{
width: 90%;
max-width: 380px;
background: rgba(255,255,255,0.7);
border-radius: 15px;
margin: auto;
padding: 1.5em 0;
}
#menu_menu li{
font-size: 1rem;
letter-spacing: 0.05em;
padding: 0 0 0.75em;
border-bottom: solid 1px rgba(239,0,0,0.5);
width: 200px;
margin: auto;
margin-bottom: 0.75em;
}
#menu_menu li a{
text-decoration: none;
}


#wrap{
width: 100%;
	margin:0 auto;
	background:url(../img/common/page_bg.png) no-repeat;
	background-position: top center;
	font-size:13px;
	line-height:1.5em;
	text-align:center;
}
#header{
width: 95%;
max-width: 1000px;
margin: auto;
	height:60px;
}

#header #logo{
	float:left;
	text-align:left;
	padding-left:5px;
	padding-top:10px;
}
#header #globalnavi{
	float:right;
	text-align:right;
	padding-top:10px;
}
#footer{
	width:100%;
	background:url(../img/common/footer_bg.jpg) repeat-x;
	font-size:12px;
	margin-top:20px;
	padding-top:12px;
	padding-bottom:10px;
	font-family:Arial, Helvetica !important;
}
#footer img{ vertical-align:middle; padding-right:2px;}


#contents_mat{
width: 95%;
max-width: 960px;
margin:0 auto;
padding:30px 0 10px;
background: rgba(255,255,255,0.7);
border-radius: 25px;
}

#contents_wrap{
width: 90%;
max-width:850px;
margin: auto;
text-align:left;
}
#contents_pic{
width:200px;
float:left;
}
.contents_pic{
width:200px;
float:left;
}
.contents_pic img{
width: 100%;
height: auto;
}
#contents_txt{
float:right;
width:610px;
}
.contents_txt{
float:right;
width:610px;
padding-bottom: 50px;
}
.contents_txt h2{
padding-bottom: 1.5em;
color: #ea0000;
}
#contents_wrap p{
padding-bottom:1.0em;
}
#contents_wrap p.break{
padding-bottom:2.4em;
}
#contents_wrap p.break2{
padding-bottom:2.4em;
line-height:2.0em;
}
#contents_wrap p.end{
padding-bottom:3.0em;
}
#contents_wrap a:hover {
	color:#ff53b1;
	text-decoration:underline;
}

.page_addition{
clear: both;
	width:100%;
	margin-top:10px;
	padding-top:10px;
	border-top:#dfdfdf solid 1px;
}
.totop{
text-align:right;
font-size:90%;
padding-top:10px;
cursor: pointer;
}
.pink{
color:#ff53b1;
}
.blue{
 color:#008feb;
}
.exp{
font-size:90%;
}

/*/////MESSAGE/////*/
.message_wrap{
width: 100%;
display: grid;
grid-template-columns: 200px 1fr;
padding-bottom:20px;
margin-bottom: 35px;
border-bottom: solid 1px rgba(0,0,0,0.1);
}
.message_pic_sp{
display: none;
}
.message_txt{
order: 2;
margin-left: 20px;
}
.message_txt h2 {
    padding-bottom: 1.5em;
    color: #ea0000;
}
.message_pic{
order: 1;
width: 200px;
}
.message_pic img{
width: 100%;
height: auto;
}
@media screen and (max-width:600px){
.message_wrap{
width: 100%;
display: block;
}
.message_pic_sp{
display: block;
width: 200px;
margin:auto; 
margin-bottom: 1em;
}
.message_pic_sp img{
width: 100%;
height: auto;
}
.message_pic{
display: none;
}

}


/*////NEWS//////*/

li.rss-item{
padding-bottom:15px;
margin-bottom:15px;
border-bottom:#FF9999 dotted 2px;
}
#contents_wrap a.rss-item{
color:#ff53b1;
text-decoration:none;
font-weight:bold;
}
#contents_wrap a.rss-item:hover{
color:#ff53b1;
text-decoration:underline;
}
span.rss-date{
font-size:90%;
color:#ca2e83;
}
p.news_thumb img{
display: inline-block;
vertical-align: top;
width: 45%;
max-width: 240px;
height: auto;
padding-right: 2px;
}

/*/////STUDIO/////*/
#studio_wrap{
width:100%;
font-size:90%;
line-height:1.4em;
}
#studio_wrap img{
width: 100%;
height: auto;
}
#studio_pics{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.studio_pic{
width: 32%;
}
@media screen and (max-width:500px){
#studio_pics{
display: block;
}
.studio_pic{
margin-bottom: 20px;
}
.studio_pic{
width: 100%;
}
}



/*/////LESSON/////*/
.pagetitle{
width: 250px;
}
h3.subtitle{
width: 250px;
}
h3.subtitle img,
.pagetitle img{
width: 100%;
height: auto;
}
.title_lr{
width:100%;
padding-bottom:8px;
}
.chapter{
float:left;
}
.pdf{
float:right;
text-align:right;
font-size:90%;
line-height:2.0em;
}
.pdf img{
vertical-align:middle;
padding-right:2px;
}
p.notice{
color:#CC0000;
line-height:1.65em;
}
.padd_l_5em{
padding-left: 5em;
}
.lesson_pic_wrap{
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 1em;
}
.lesson_pic{
width: 200px;
}
.class_pic_wrap{
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 1em;
}
.class_pic{
width: 272px;
margin-bottom: 1.5%;
}

@media screen and (max-width:960px){
.lesson_pic{
width: 23.5%;
}
.lesson_pic img{
width: 100%;
height: auto;
}
.class_pic{
width: 32%;
}
.class_pic img{
width: 100%;
height: auto;
}
}

@media screen and (max-width:820px){
.chapter{
float:none;
}
.pdf{
float:none;
text-align:left;
line-height:2.0em;
margin-bottom: 1em;
}
}

@media screen and (max-width:600px){
.pagetitle{
width: 100%;
max-width: 340px;
}
h3.subtitle{
width: 100%;
max-width: 340px;
}
.pagetitle img{
width: 100%;
height: auto;
}
.lesson_pic{
width: 48.5%;
margin-bottom: 2.4%;
}
.class_pic{
width: 48.5%;
}
}

.sp-schedule{
  display: none;
}

.schedule-item{
  margin: 0 0 20px;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
}

.schedule-item dt{
  background: #e9ffb9;
  padding: 12px;
  font-weight: bold;
}

.schedule-item dd{
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid #eee;
}
dl.fee2026 dt,
dl.fee2026 dd{
text-align: center;
}
dl.fee2026 td{
text-align: left;
}
dl.fee2026 td.price{
text-align: right;
padding-right: 2em;
}
@media screen and (max-width:700px){
.pc-schedule{
  display: none;
}
.sp-schedule{
  display: block;
}
}


table.classes{
border-top:#999999 solid 1px;
border-left:#999999 solid 1px;
}
table.classes td{
border-bottom:#999999 solid 1px;
border-right:#999999 solid 1px;
}
table.classes td{
text-align:left;
padding:5px 0 3px 10px;
font-size:90%;
}

table.classpic  td{
padding-bottom:5px;
text-align:left;
font-size:90%;
line-height:1.4em;
vertical-align:top;
}

table.classes  td.title{
text-align:center;
background:#e9ffb9;
padding-left:10px;
padding-right:10px;
}
table.classes td.bottom{
}


table.calendar{
border-bottom:#999999 solid 1px;
border-left:#999999 solid 1px;
}
table.calendar td{
border-top:#999999 solid 1px;
border-right:#999999 solid 1px;
}
table.calendar td{
background:#FFFFFF;
font-size:95%;
line-height:1.4em;
text-align:center;
padding:5px 0 3px;
}

table.calendar td.topdot{
border-top:#999999 dashed 1px;
}
table.calendar td.right{
}
table.calendar td.bottom{
}
table.calendar td.classopen{
text-align:left;
}
table.calendar  td.title{
background:#e9ffb9;
}
table.calendar td.classname{
background:#fffeed;
}
table.calendar td.yellow{
background:#fffff3;
}
table.calendar td.holiday{
padding-left:15px;
padding-right:15px;
}

#contents_wrap p.trial_title{
background: #f2ffcd;
padding-bottom: 0;
padding: 3px 10px;
display: table;
margin-bottom: 1em;
}


/*/////CALENDAR////*/

#lesson_calendar{
width:1000px;
margin:20px auto;
text-align:left;
font-size:13px;
}
#calendar_notice{
width:1000px;
margin:0 auto;
text-align:left;
font-size:13px;
}
#lesson_calendar h3{
font-size:140%;
margin-bottom:20px;
}
#lesson_calendar h3.navi{
margin-bottom:5px;
}
#calendar_notice h3{
font-size:105%;
padding-top:20px;
}
#lesson_calendar p.navi{
margin-bottom:20px;
}
table.monthly_calendar{
background:#FFFFFF;
font-size:90%;
line-height:1.25em;
border-collapse: collapse;
}
table.monthly_calendar td{
padding:3px;
border:#999999 solid 1px;
vertical-align:top;
width: 14%;
}
table.monthly_calendar table td{
	border:none;
}
td.off{
	background:#e2e6ed;
	}
td.sunday{
background:#e9ffb9;
	color:#FF0000;
	text-align:center;
	font-weight:bold;
font-size:120%;
	}
td.saturday{
background:#e9ffb9;
	color:#0066FF;
	text-align:center;
	font-weight:bold;
font-size:120%;
width:14.5%;
	}
td.weekday{
background:#e9ffb9;
	text-align:center;
	font-weight:bold;
font-size:120%;
width:14.5%;
	}
td.classDate{
	text-align:left;
	font-weight:bold;
font-size:140%;
	}
td.classDateOff{
  color:#999999;
	text-align:left;
	font-weight:bold;
	}
td.classDateSun{
	color:#FF0000;
	text-align:left;
	font-weight:bold;
font-size:140%;
	}
td.classDateSunOff{
	color:#ff98ab;
	text-align:left;
	font-weight:bold;
	}
td.classDateSat{
	color:#0066FF;
	text-align:left;
	font-weight:bold;
font-size:140%;
	}
td.classDateSatOff{
	color:#9cc4ff;
	text-align:left;
	font-weight:bold;
	}

#contents_wrap table.monthly_calendar p{
padding-bottom:0.2em;
line-height:1.4em;
}

.event{
	color:#cc0000;
	font-weight:bold;
}
.event span.default{
	color:#000000;
	font-weight:normal;
}
.icon{
	color:#FFFFFF;
	font-weight:bold;
	padding:1px 6px;
	font-size:85%;
}
.h{background:#f24df4;}
.k{background:#ff5394;}
.f{background:#f88a09;}
.s{background:#99c20b;}
.m{background:#3ba630;}
.a{background:#3094a6;}
.d{background:#b12fd2;}
.r{background:#2f55d2;}
.x{background:#2f55d2;}
.bb{background:#8a30ca;}
.fd{background:#ff8f92;}

.kyukou_bb{
/*
border: solid 1px #8a30ca;
padding: 1px 0.2em;
margin-bottom: 0.25em;*/
}
.kyukou_bb .icon{
color:#333333;
font-weight:bold;
padding:1px 6px;
font-size:85%;
}
.kyukou_x .icon{
color:#333333;
font-weight:bold;
padding:1px 6px;
font-size:85%;
}
.icon.bb_kyukou{
border: solid 1px #8a30ca;
padding:  2px 6px;
line-height: 2;
}
.icon.x_kyukou{
border: solid 1px #2f55d2;
padding:  2px 6px;
line-height: 2;
}


.performance{
	background:#cc0000;
	color: #fff;
	font-weight:bold;
	padding:3px 5px 1px;
	font-size:95%;
	border-radius: 2px;
	margin: 5px 0;
}

.totop2{
	text-align:right;
}
.red{
	color:#cc0000;
}
table.monthly_calendar td p{
padding-bottom: 4px;
}



/*/////HISTORY////*/
.history_box{
width:100%;
padding-bottom:25px;
margin-top: 1em;
}
dl.history {line-height:1.45em;}
dl.history dt.hisdate{ 
background:#ff53b1;
color:#ffffff;
float:left;
padding-left:10px;
padding-right:8px;
-webkit-border-radius: 8px 0 0 8px / 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px / 8px 0 0 8px;
border-radius:8px 0 0 8px / 8px 0 0 8px;
}
dl.history dt.hisplace{
background:#47c5ff;
color:#ffffff;
float:left;
padding-left:10px;
padding-right:8px;
-webkit-border-radius: 0 8px 8px 0 / 0 8px 8px 0;
-moz-border-radius: 0 8px 8px 0 / 0 8px 8px 0;
border-radius:0 8px 8px 0 / 0 8px 8px 0;
}
dl.history dt.hisexp{ clear:left; padding-top:7px; line-height:1.35em;}
#contents_wrap  .history_box a{
font-size:90%;
color:#ff53b1;
text-decoration:underline;
}
#contents_wrap  .history_box a:hover{
text-decoration:none;
}
table.history_pic{
margin-top:7px;
font-size:90%;
}
table.history_pic td{
vertical-align:top;
}
.history_year{
width: 100%;
line-height:2.0em;
margin-bottom: 1em;
}
.history_pic_wrap{
width: 100%;
display: flex;
gap:3px;
flex-wrap: wrap;
margin-top: 10px;
}
.history_pic{
width: 136px;
}
.history_pic-127{
width: 127px;
}
.history_pic-168{
width: 168px;
}
.history_pic-196{
width: 196px;
}
.history_pic-200{
width: 200px;
}
.history_pic-275{
width: 275px;
}
.history_pic img{
width: 100%;
height: auto;
}
.history_pic-200 img{
width: 100%;
height: auto;
}
h3.subtitle_history {
width: 340px;
}
h3.subtitle_history img{
max-width: 100%;
}

@media screen and (max-width:500px){
dl.history dt.hisdate {
background: #ff53b1;
color: #ffffff;
float: none;
display: table;
padding-left: 10px;
padding-right: 10px;
border-radius: 8px;
}
dl.history dt.hisplace {
line-height: 1.25;
background: #47c5ff;
color: #ffffff;
float: none;
padding: 3px 10px;
border-radius: 8px;
}
}

/*////QandA//////*/

dl.question {clear:left; margin-bottom:10px;}
dl.question dt.q{ color:#ff53b1; float:left; font-weight:bold;}
dl.question dt.a{ color:#30aeff; float:left; font-weight:bold; background: none;}
dl.question dt.toi{ float:left; padding-left:10px; padding-bottom:5px; font-weight:bold;}
dl.question dt.answer{ float:left; padding-left:10px; padding-bottom:20px;}

.faq_list {
  display: flex;
  flex-direction: column;
}

.faq_item {
  display: grid;
  grid-template-columns: 1.0em 1fr;
  column-gap: 0.6em;
  align-items: start;
  line-height: 1.7;
}
.faq_item.ans{
margin-bottom: 25px;
}
.faq_item.q{
font-weight: bold;
}

.faq_mark {
  font-weight: 700;
  line-height: 1.9;
}

.faq_text {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 色 */
.faq_item.q .faq_mark {
  color: #ff53b1;
}

.faq_item.ans .faq_mark {
  color: #30aeff;
}


/*////LINK//////*/

dl.link {
padding-bottom:8px;
margin-bottom:10px;
border-bottom:#FF9999 dotted 2px;
line-height:1.6em;
}
dl.link dt.linktitle{ color:#ff53b1; font-weight:bold;}
.url{font-weight:normal;font-size:90%;}
dl.link dt.linkexp{font-size:90%; }
#contents_wrap dl.link dt.linktitle a{color:#ff53b1; text-decoration:none;}
#contents_wrap dl.link dt.linktitle a:hover{text-decoration:underline;}


/*///CONTACT///*/
#formarea{
width:700px;
padding-left:75px;
}
#submit{
width:700px;
text-align:center;
}
table.contact{
margin-bottom:10px;
}
table.contact td{
text-align:left;
padding:5px 0 3px 10px;
border-top:#999999 solid 1px;
border-right:#999999 solid 1px;
/*
border-bottom:#e0e1cf dotted 2px;*/
font-size:90%;
}
table.contact  td.title{
text-align:left;
background:#e9ffb9;
padding-left:10px;
padding-right:10px;
border-left:#999999 solid 1px;
width:120px;
}
table.contact td.bottom{
border-bottom:#999999 solid 1px;
}
input.oneline{
width:240px;
}
input.longline{
width:500px;
}
input.broad{
	width:200px;
	height:30px;
	vertical-align:middle;
	}
textarea.comment{
width:500px;
}



@media screen and (max-width:1000px){
#globalnavi{
display: none;
}
#hamburger {
display: block;
}
#contents_mat{
width: 95%;
margin: auto;
box-sizing: border-box;
}
}

@media screen and (max-width:600px){
#wrap{
font-size: 1rem;
}
}