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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500&display=swap');

/* ======================================================================================

    reset

====================================================================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure { margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box;}
body, table, input, textarea, select, option { font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo',sans-serif; } article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; }

html{overflow-y:scroll; height: 100%;}

img{vertical-align:middle; width:100%; height:auto;}

.img80per img{padding-left: 20%; padding-right: 20%;}

table{border-collapse:collapse; width:100%;}
td{padding: 5px; border: #666 solid 1px;}
td.title{ width: 20%;}
td.title2{ width: 30%;}

@media only screen and (max-width:840px) {
td.title{ width: 10%;}
td.title2{ width:20%;}
}

body{position: relative; font-size:14px; font-family: 'Noto Sans JP','メイリオ','Meiryo',sans-serif; font-weight: 300; letter-spacing: 1px; line-height: 1.6;}

a,a:hover img,li,li:hover,a::after,a:hover::after,a:hover i,a i{-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;}

a:link {text-decoration:none; color:#b17749;}
a:visited {text-decoration:none; color:#b17749;}
a:hover{text-decoration:none; color:#d3a678;}

a:hover img{opacity:0.7; filter: alpha(opacity=70); -ms-filter: "alpha( opacity=70 )";}

p{margin:0 0 10px 0; padding:0;}

h1,h2,h3,h4,h5{font-weight:normal; margin:0; padding:0}
h2,h3,h4,h5{width: 100%;}

.dotpattern {
  background: rgba(0,0,0,0);
  background-image: radial-gradient(rgba(0,0,0,.3) 40%, transparent 0), radial-gradient(rgba(0,0,0,.3) 40%, transparent 0);
  background-position: 0 0, 2px 2px;
  background-size: 4px 4px;
  width: 100%;
  height: 100%;
  position: relative;
}


/* == 2024年追加 == */

.NavArea{flex: 1;}
.Nav{display: flex; justify-content: space-between;}
.NavArea nav{flex: 1; padding-left: 10%; padding-right: 50px;}
.NavArea .SnsArea{width: 150px;}

.NavArea nav .Nav1{display: flex; font-size: .8rem; border-bottom: #fff solid .5px; justify-content: flex-end;}
.NavArea nav .Nav1 li{margin-left: 30px;}
.NavArea nav .Nav2{display: flex; justify-content: space-between;}

.NavArea .SnsArea{display: flex; justify-content: space-between;}
.NavArea .SnsArea li{text-align: center; position: relative;}
.NavArea .SnsArea li a{position: relative;}

header .snsTW,
header .snsFB,
header .snsIN,
header .snsYT{font-size: 1.5rem; position: relative;}
header .snsTW a::after,header .snsFB a::after,header .snsIN a::after,header .snsYT a::after{position: absolute; content: ""; width: 35px; height: 35px; border-radius: 100%; background: #fff; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: -1}

.snsTW a{color: #000 !important;}
.snsFB a{color: #315096 !important;}
.snsIN a{color: #e1306c !important;}
.snsYT a{color: #ff0000 !important;}

section.TopCaption .inner{padding: 0 .5% 100px; max-width: 100%;}
section.TopCaption .TopCaptionTitle{text-align: center; font-size: 4.5rem; color: #AB9074; font-weight: 100; line-height: 1.3; margin-bottom: 30px;}
section.TopCaption .TopCaptionTitle span.Sub{font-size: 80%; display: block;}
section.TopCaption .TxtArea{padding: 20px;}

.TopBanner{display: flex; flex-wrap: wrap; justify-content: space-between;}
.TopBanner .TopBannerBox{width: 33%; padding-bottom: 50px; position: relative;}
.TopBanner .TopBannerBox a{position: absolute; bottom: 20px; left: 50%; transform: translate(-50%,0); display: inline-block; background: #AB9074; color: #fff; padding: 5px 40px 5px 20px; border-radius: 500px;}
.TopBanner .TopBannerBox a i{position: absolute; top: 50%; right: 10px; transform: translate(0,-50%);}
.TopBanner .TopBannerBox a:hover{opacity: .7;}
.TopBanner .TopBannerBox a:hover i{right: 5px;}

.TopBanner .TopBannerBox h2{font-size: 3.5rem; color: #fff; text-shadow: 1px 1px 1px #AB9074 , -1px -1px 1px #AB9074 , -1px 1px 1px #AB9074 , 1px -1px 1px #AB9074; font-weight: 400; text-align: center; line-height: 1.2; padding: 40px 10px;}
.TopBanner .TopBannerBox h2 span.Sub{font-size: 1.6rem; font-weight: 500; display: block;}

.TopCaptionStu h2{background: url("../img/top/mv/02.jpg") center center; background-size: cover;}
.TopCaptionEdu h2{background: url("../img/top/mv/01.jpg") center center; background-size: cover;}
.TopCaptionSoc h2{background: url("../img/top/mv/course_intro_niko2.jpg") center center; background-size: cover;}

section.TopEvent .inner{max-width: 900px; padding-top: 100px; padding-bottom: 100px;}
.EventSlider li{padding: 0 5%;}


.heading1{font-size: 3rem; color: #AB9074; font-weight: 100; text-align: center; line-height: 1.2; margin-bottom: 40px;}
.heading2{font-size: 2rem; color: #AB9074; font-weight: 100; text-align: center; line-height: 1.2; margin-bottom: 40px;}
.heading3{font-size: 1.2rem; color: #AB9074; font-weight: 100; text-align: center; line-height: 1.2; margin-bottom: 30px;}

@media only screen and (max-width:840px) {
.NavArea{display: none;}
.TopBanner .TopBannerBox{width: 100%;}

.imgSP{padding: 0 25%;}
}

ul.StudyLink1{display: flex; flex-wrap: wrap; justify-content: center;}
ul.StudyLink1 li{padding: 0 5% 20px; position: relative;}
ul.ForumArchive{display: flex; flex-wrap: wrap; justify-content: center;}
ul.ForumArchive li{padding: 0 5% 30px; width: 25%; position: relative; text-align: center;}
ul.ForumArchive li a{display: block;}
ul.ForumArchive li img{margin-bottom: 10px;}
ul.ForumArchive li .Day{font-size: .7rem; margin-bottom: 5px;}
ul.ForumArchive li .Title{font-size: .8rem}

@media only screen and (max-width:840px) {
ul.ForumArchive li{padding: 0 3% 30px; width: 50%;}
}

/* ======================================================================================

    common

====================================================================================== */


.flex{
display:-webkit-box;
display:-moz-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
justify-content: space-between;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;	
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}

.flex2 li{width:48%;}
.flex3 li{width:32%;}
.flex4 li{width:24%;}
.flex5 li{width:19%;}
.flex6 li{width:13%;}

.flex4b li{width:24%;}

.flex2 li,
.flex3 li,
.flex4 li,
.flex5 li,
.flex6 li{margin-bottom: 40px; position: relative;}

.inner{margin:0 auto; position:relative; max-width:1140px; padding:0 20px; overflow: hidden;}


h2.topsection{font-size:30px;}
h2.topsection span{font-size:80%; margin-left:10px;}

h2.pagetitle{font-size:36px; font-weight: 300;}


h3 {
	font-size:15px;
	margin-bottom:20px;
	position: relative;
	padding: .3rem .6rem .2rem;
	border:1px solid #ccc;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	background: -webkit-linear-gradient(top, #fff 0%, #dfdfdf 100%);
	background: linear-gradient(to bottom, #fff 0%, #dfdfdf 100%);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}



h4{
	font-size:16px;
	font-weight: 400;
	color: #8C0002;
	margin-bottom:10px;
	position: relative;
}

h5{font-size: 100%; font-weight: 700;}

.midashi1{font-size: 16px; font-weight: 400px; color:#4E0001;}
.midashi1 span{display: block; padding-left: 0px; font-size: 90%;}

.icon{-moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; padding:4px 8px;}

.icon_1day{background: #000DB3; color: #fff;}
.icon_free{background: #000DB3; color: #fff;}
.icon_shortterm{background: #1B7D00; color: #fff;}
.icon_wholeyear{background: #C10003; color: #fff;}

.beg{background:#009; color:#FFF;}
.int{background:#F60; color:#FFF;}
.mas{background:#693; color:#FFF;}
.skype{background:#00a7e5; color:#FFF;}

.icon_active{color: #000DB3; font-size: 80%;}
.icon_noneactive{color: #C10003; font-size: 80%;}

span.subtitle{font-size: 80%; margin-left: 10px;}

span.speechbubble1{background: #4E0001; padding: 3px 15px; border-radius: 500px; position: relative; display: inline-block; color: #fff; margin-bottom: 15px;}
span.speechbubble1::after{content: ''; top:100% ; left: 50%; transform: translate(-50%,0); position: absolute; border-style: solid; border-color: #4E0001 transparent transparent transparent ; border-width: 7px 4px 0px 4px;}

@media only screen and (max-width:840px) {
span.subtitle{margin-left: 0px; display: block;}
h2.topsection{font-size:24px;}

.main_area{padding:30px 0px;}
.flex2 li,.flex3 li,.flex4 li,.flex5 li{width:100%;}
.flex4b li{width:50%;}
}


.ul00 li{padding: 5px 0 5px 15px; position: relative;}
.ul00b li{padding: 10px 0; position: relative;}
.ul_num li{ list-style: decimal; margin-left: 20px;}

.ul01 li{padding: 5px 0 5px 15px; position: relative;}
.ul01 li::before{position: absolute; content: ''; border-radius:100%; top: 1em; left: .5em; z-index: 2; width: 3px; height: 3px; background: rgba(95, 0, 0, 1);}

.ul02 li{padding: 1px 0 1px 15px; position: relative; border-bottom: #CCCCCC dotted 1px; font-size: 90%;}
.ul02 li::before{position: absolute; content: ''; border-radius:100%; top: 1em; left: .5em; z-index: 2; width: 3px; height: 3px; background: rgba(95, 0, 0, 0);}

.ul03 li{padding: 10px 0; position: relative;}


.dl01 dt{ color: #903700; margin-top: 15px;}

.ul_memo li{margin-left: 20px; font-size: 80%; padding: 5px 0; position: relative;}
.ul_memo li::before{content: '※'; position: absolute; top: 5px; left: -15px;}

/** アコーディオン
-------------------------------------------------- */

ul.acordion{margin:0; padding:0;}
ul.acordion .trigger{cursor: pointer; font-size: 18px; line-height: 2.5; border-top: #ccc solid 1px;}

ul.acordion li .none-submenu{display: block; padding: 0; width:100%;}
ul.acordion li .active-submenu{display: block; padding: 0; width:100%;}

ul.acordion li{position:relative;}
ul.acordion li .none-submenu::after {content:'+';}
ul.acordion li .active-submenu::after {content:'−';}

ul.acordion li .none-submenu::after,
ul.acordion li .active-submenu::after {font-size:28px; position:absolute; right:20px; top:-15px; color: #666}


/* ======================================================================================

    header/footer

====================================================================================== */


header{background:rgba(150,0,0,.85); position:fixed; top: 0; z-index:2; width: 100%; color: #FFFFFF;}
header {box-shadow:0px 0px 18px rgba(0,0,0,0.5);}

header a:link {text-decoration:none; color:#fff;}
header a:visited {text-decoration:none; color:#fff;}
header a:hover{opacity: .8;}

header .inner{display: flex; justify-content: space-between;}
header .inner,footer .inner{padding-top: 10px; padding-bottom: 10px; position: relative;}

header h1{font-family:'Noto Sans JP',"sans-serif"; font-size: 1.1rem; line-height: 1.1rem; width: 200px; padding-left: 60px; position: relative;}
header h1::after{position: absolute; content: ""; left: 0; top: 50%; transform: translate(0,-50%); background: url(../img/common/logo_tmc.png) center center no-repeat; width: 50px; height: 25px; background-size: 50px;}

header h1 span{font-size: 87%; display: block;}


header .tel{ font-size: 1.4rem;}
header .tel i{ margin-right: 5px; font-size: 1.5rem;}

footer{background:rgba(150,0,0,1); color:#fff; }

footer a:link,
footer a:visited{text-decoration:none; color:#fff;}
footer a:hover{text-decoration:none; color:#d3a678;}


footer .sp_footer_nav li{font-size: 1.7rem; width: 33%;}
footer .sp_footer_nav li.tel{ text-align: center;}


footer h4{color: #fff; margin-bottom: 5px; border-bottom: #fff dotted 1px; font-family: 'Noto Sans JP','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo',sans-serif;}

footer i{margin-right: 5px;}

.googlemap{border:0; width:100%; height: 200px; filter:grayscale(100%); -webkit-filter:grayscale(100%); opacity: 1;}

.copy{text-align:center; font-size:90%; width: 100%; border-top: #fff solid 1px; margin-top: 10px;}



@media only screen and (max-width:950px) {
header .bthome{display: none;}
}

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

header h1{width:80%;}

header nav,footer nav{display:none}
footer{position:fixed; z-index:1; bottom: 0; width: 100%;}

footer .inner{padding-top: 0px; padding-bottom: 0px;}
}




/* ======================================================================================

    bt

====================================================================================== */

a.bt01{filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ffffff, endcolorstr=#e0d4c9));
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ffffff, endcolorstr=#e0d4c9))";
zoom: 1;
background: -moz-linear-gradient(top center, #ffffff 0%, #e0d4c9 100%);
background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#e0d4c9));
background: linear-gradient(top center, #ffffff 0%, #e0d4c9 100%);
background: linear-gradient(to bottom, #ffffff, #e0d4c9);}

a.bt01{text-decoration:none; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:5px 40px 5px 10px; border:#c0a08f solid 1px; position:relative;}

a.bt01::after{content:'';
    height: 0;
    position: absolute;
    width: 0;
    border: 5px solid transparent;
    border-left-color: #9a6c53;
    right:5%;
    top: 30%;
	z-index:1;}


a.bt01:hover{}

a.bt01:hover::after{right:1%;}


a.bt02{text-decoration:none; padding:5px 40px 5px 10px; position:relative;}
a.bt02{-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:#666 solid 1px; position:relative;}
a.bt02::after{content:'';
    height: 0;
    position: absolute;
    width: 0;
    border: 5px solid transparent;
    border-left-color: #666;
    right:5%;
    top: 30%;
	z-index:1;}

a.bt02:hover{}

a.bt02:hover::after{right:1%;}

footer a.bt02{border:#fff solid 1px;}
footer a.bt02::after{border-left-color: #fff;}



@media only screen and (max-width:840px) {
a.bt01{display:block;}
}

/* ======================================================================================

    box

====================================================================================== */

.box01,.flex_box li{border:#ccbfaa solid 1px; margin-bottom:20px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; padding:20px 20px; overflow:hidden; position:relative;}


.box02{border:#ccbfaa solid 1px; margin-bottom:20px; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; padding:20px 3%; overflow:hidden; position:relative;}

.box02_no_overflow{border:#ccbfaa solid 1px; margin-bottom:20px; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; padding:20px 3%; position:relative;}

.box03{margin-bottom:20px; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; padding:10px 3%; overflow:hidden; position:relative;}
.box03{-moz-box-shadow:0px 0px 10px rgba(0,0,0,0.2);
-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.2);
box-shadow:0px 0px 10px rgba(0,0,0,0.2);}



/* ======================================================================================

    section

====================================================================================== */

section .inner{ padding-top: 30px; padding-bottom: 30px;}

article{overflow: hidden; margin-bottom: 100px;}

.wrapper{padding:100px 0;}

@media only screen and (max-width:840px) {
.wrapper{padding:20px 0 80px; }
}

/* ======================================================================================

    TOP PAGE

====================================================================================== */

/* ===== mv ==== */
.mvcaption{width:100%; position: absolute; top: 0; z-index: 1;}
.mvcaption_inner{width:400px; margin: 0 auto; margin-top: 100px;}

.mvcaption img{opacity: .7;}

@media only screen and (max-width:840px) {
.mvcaption_inner{width:280px; margin-top: 80px;}
}

.boxslider_area{ padding: 0 1%;}




@media only screen and (max-width:840px) {
.boxslider_area{ display: none;}

ul.TopBanner{justify-content: space-between;}
ul.TopBanner li{width: 49%; padding: 0%; margin-bottom: 30px;}
}


/* ===== お知らせ ==== */

ul.news_area{border:#CCC solid 1px; margin-bottom: 15px;}
ul.news_area li{position:relative; padding:1rem; overflow:hidden;}
ul.news_area li:nth-child(even){background-color: #F9F8F5}
ul.news_area li span.day{color:#F30; display:block; font-size:80%;}
ul.news_area li .icon{position:absolute; right:5px; top:5px; font-size:11px;}

ul.news_area li .icon_gray{background:#999; color:#FFF;}

ul.news_area li .photo{width:10%; float: left;}
ul.news_area li .txt{width:85%; float: right;}

ul.news_area i{ margin-left: 10px; font-size: 150%;}

ul.news_area li h3 {
	font-size:16px;
	margin-bottom:20px;
	position: relative;
	padding: 0;
	border:0px solid #ccc;
	background: transparent;
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 0) inset;
	color: #A30002;
}


@media only screen and (max-width:840px) {
.news_area li .photo{width:20%; float: left;}
.news_area li .txt{width:75%; float: right;}

}

/* ===== バナーエリア ==== */

.top_banner{float:right;}

.top_banner img{border:#cf9b67 solid 1px;}
.top_banner img:hover{border:#e9cbad solid 1px;}
.top_banner li{ margin-bottom:10px;}


/* ===== リンクエリア ==== */
.linkarea li{border-bottom:#CCC dotted 1px; padding:5px 3px;}
.linkarea li span{ display:block; font-size:90%;}


/* ======================================================================================

    PAGE

====================================================================================== */

.suv_v .inner{height: 400px;}


.AboutPhotoExterior{margin: 0 auto 40px; max-width: 400px; position: relative;}
.AboutPhotoExterior .caption{position: absolute; bottom: 0; right: 0; padding: 5px; color: #fff; font-size: 11px;}
.suv_v .caption{position: absolute; bottom: 0; right: 0; padding: 5px; color: #fff; font-size: 12px;}

.instrument_li li{text-align: center; font-size: 80%; width: 12.5%; margin-bottom: 20px;}
.instrument_li li.yokonaga{width: 25%;}
@media only screen and (max-width:840px) {
.instrument_li li{width: 33%;}
.instrument_li li.yokonaga{width: 66%;}
}

h2.pagetitle{color: #fff; font-size: 50px; position: absolute; bottom: 20px; text-shadow: 0 0px 20px rgba(0,0,0,1);}


h2.pagetitle span{font-size: 50%; display: block;}

ul.pamphlet{display: flex; flex-wrap: nowrap; justify-content: center; max-width: 600px; margin: 0 auto;}
ul.pamphlet li{margin-right: 2%; width: 40%;}
ul.pamphlet li:last-child{margin-right: 0%;}

@media only screen and (max-width:840px) {
ul.pamphlet{justify-content: space-between; max-width: 100%;}
ul.pamphlet li{margin-right: 0%; width: 48%;}
}


.artmanagement .bgam{background: url("../management/img/mv.jpg"); background-size: cover;}
.artmanagement h2.artmanagement_title{font-size: 50px; color: #604699;}
.artmanagement h2.artmanagement_title span{font-size: 50%; display: block;}
.amtable .amtime{width: 13%;}
.amtable .amkoushi{width: 25%;}

.amdl dd{font-size: 80%;}
.amdl dt{margin-top: 5px;}

.artmanagement .icon_bunkacho{width: 200px; margin-top: 100px;}
.artmanagement .icon_bunkacho li{width: 45%;}

h2.sectiontitle{text-align: center; font-size: 30px; line-height: 1.2; margin-bottom: 30px; display: block; width: 100%;}

.facilityarea h4{position: absolute; top: 5%; background: rgba(0,0,0,.5);color: #fff; font-size: 15px; padding: 4px 10px;}

.course_box .iconarea{margin-bottom: 15px;}
.course_box .bt02{display: block;}


.publicationlist .pagenum{font-size: 90%; vertical-align: bottom; text-align: right;}

.amsankahi{padding-top: 40px; }


.TeacherImg1{width: 200px;}
.TeacherTxt1{flex: 1; padding-left: 30px;}
.TeacherTxt2{flex: 1; padding-left: 30px;padding-right: 30px;}
@media only screen and (max-width:840px) {
.TeacherImg1{width: 100%; padding: 0 25% 50px;}
.TeacherTxt1{flex: 1; padding-left: 0px;}
.TeacherTxt2{flex: 1; padding-left: 0px;padding-right: 0px;}
}

@media only screen and (max-width:840px) {
.suv_v .inner{height: 200px;}
h2.pagetitle{font-size: 20px;}

.artmanagement h2.artmanagement_title{font-size: 20px;}
.artmanagement h2.artmanagement_title span{font-size: 70%;}
.artmanagement .icon_bunkacho{width: 150px; margin-top: 50px;}
.amsankahi{padding-top: 0px;}
}


.flex_course_intro li{width: 24%; margin-bottom: 15px;}
.flex_course_intro li a{padding: 10px; border:#ccbfaa solid 1px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; overflow:hidden; position:relative; display: block;}

.flex_course_intro li a.tonkori{background-image:url(../img/course_intro/tonkori/icon.png); background-position:200% center; background-repeat:no-repeat;}
.flex_course_intro li a.gekkin{background-image:url(../img/course_intro/gekkin/icon.png); background-position:100% center; background-repeat:no-repeat;}
.flex_course_intro li a.dankin{background-image:url(../img/course_intro/dankin/icon.png); background-position:140% center; background-repeat:no-repeat;}
.flex_course_intro li a.niko{background-image:url(../img/course_intro/niko/icon.png); background-position:140% center; background-repeat:no-repeat;}
.flex_course_intro li a.komuz{background-image:url(../img/course_intro/komuz/icon.png); background-position:110% center; background-repeat:no-repeat;}
.flex_course_intro li a.matouqin{background-image:url(../img/course_intro/matouqin/icon.png); background-position:110% center; background-repeat:no-repeat;}
.flex_course_intro li a.oyayubi{background-image:url(../img/course_intro/oyayubi/icon.png); background-position:90% center; background-repeat:no-repeat;}
.flex_course_intro li a.koukin{background-image:url(../img/course_intro/koukin/icon.png); background-position:90% center; background-repeat:no-repeat;}
.flex_course_intro li a.nodouta{background-image:url(../img/course_intro/nodouta/icon.png); background-position:95% center; background-repeat:no-repeat;}
.flex_course_intro li a.rhythm{background-image:url(../img/course_intro/rhythm/icon.png); background-position:130% center; background-repeat:no-repeat;}
.flex_course_intro li a.djembe{background-image:url(../img/course_intro/djembe/icon.png); background-position:95% center; background-repeat:no-repeat;}
.flex_course_intro li a.darbukka{background-image:url(../img/course_intro/darbukka/icon.png); background-position:95% center; background-repeat:no-repeat;}
.flex_course_intro li a.tabla{background-image:url(../img/course_intro/tabla/icon.png); background-position:95% center; background-repeat:no-repeat;}
.flex_course_intro li a.panflute{background-image:url("../img/course_intro/panflute/main_v.png"); background-position:95% center; background-repeat:no-repeat; background-size: 45%;}
.flex_course_intro li a.ryuteki{background-image:url("../img/course_intro/ryuteki/main_v.png"); background-position:150% center; background-repeat:no-repeat; background-size: 80%;}




.flex_course_ensemble{display: flex; flex-wrap: wrap; justify-content: flex-start;}
.flex_course_ensemble li{width: 31.33333%; margin-bottom: 50px; margin-left: 1%; margin-right: 1%; text-align: center;}
.flex_course_ensemble li a{padding: 10px; border:#ccbfaa solid 1px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; overflow:hidden; position:relative; display: block;}

@media only screen and (max-width:840px) {
.flex_course_intro li{width: 49%;}
}



.report_li span{color:#a18974; display:block; font-size: 80%;}
.report_li li{position: relative; border-bottom: #000 dotted 1px; padding: 5px 0;}
.report_li .icon{position: absolute; right: 0; top: 3px; font-size: .55rem}
.icon_gam{background:#C30; color:#FFF;}
.icon_ex{background:#69C; color:#FFF;}
.icon_tri{background:#693; color:#FFF;}
.icon_other{background:#777; color:#FFF;}




.flex_photo01{width: 20%;}
.flex_txt01{width: 75%;}
@media only screen and (max-width:840px) {
.flex_photo01{width: 50%; margin: 0 auto; margin-bottom: 15px;}
.flex_txt01{width: 100%;}
}



.drawer-menuUl li{border-bottom: #ccc solid 1px; position: relative; padding: 8px; font-size: 14px}

.drawer-menu a:link,a:visited {text-decoration:none; color:#b17749;}

.drawer-menu ul.sns{display: flex; flex-wrap: wrap; justify-content: space-between; padding: 15px 20px 0;}
.drawer-menu ul.sns li{font-size: 1.5rem;}

/* ======================================================================================

    form

====================================================================================== */

input,textarea {margin:0; padding:10px; width:100%; background:#fff; border:#999 solid 1px; border-radius:5px; box-sizing: border-box;}

.textarea_h{min-height:200px;}

.bt_submit{height:50px; background:#b25d54; color:#FFF; font-size:16px; border-radius:50px;}
.bt_submit:hover{background:#963329;}


.formtitle{position:relative; color:#4E4E4E; padding:0px; display: block; margin-bottom: 5px;}
.formtitle span{background:rgba(200, 80, 0, 1); color:#fff; padding:2px 4px; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; font-size:80%; margin-left:10px;}

.formarea{background: #FFFFFF; padding: 30px;}

.required{position: relative;}
.required::after{content: '必須'; font-size: .6rem; color: #840002; margin-left: 5px;}

/* ======================================================================================

    other

====================================================================================== */


@media only screen and (min-width:841px) {
	
.pc{display:block;}
.sp{display:none;}


.res10{width:10%;}
.res11{width:11%;}
.res12{width:12%;}
.res13{width:13%;}
.res14{width:14%;}
.res15{width:15%;}
.res16{width:16%;}
.res17{width:17%;}
.res18{width:18%;}
.res19{width:19%;}
.res20{width:20%;}
.res21{width:21%;}
.res22{width:22%;}
.res23{width:23%;}
.res24{width:24%;}
.res25{width:25%;}
.res26{width:26%;}
.res27{width:27%;}
.res28{width:28%;}
.res29{width:29%;}
.res30{width:30%;}
.res31{width:31%;}
.res32{width:32%;}
.res33{width:33%;}
.res34{width:34%;}
.res35{width:35%;}
.res36{width:36%;}
.res37{width:37%;}
.res38{width:38%;}
.res39{width:39%;}
.res40{width:40%;}
.res41{width:41%;}
.res42{width:42%;}
.res43{width:43%;}
.res44{width:44%;}
.res45{width:45%;}
.res46{width:46%;}
.res47{width:47%;}
.res48{width:48%;}
.res49{width:49%;}
.res50{width:50%;}
.res51{width:51%;}
.res52{width:52%;}
.res53{width:53%;}
.res54{width:54%;}
.res55{width:55%;}
.res56{width:56%;}
.res57{width:57%;}
.res58{width:58%;}
.res59{width:59%;}
.res60{width:60%;}
.res61{width:61%;}
.res62{width:62%;}
.res63{width:63%;}
.res65{width:65%;}
.res66{width:66%;}
.res67{width:67%;}
.res68{width:68%;}
.res69{width:69%;}
.res70{width:70%;}
.res71{width:71%;}
.res72{width:72%;}
.res73{width:73%;}
.res74{width:74%;}
.res75{width:75%;}
.res76{width:76%;}
.res77{width:77%;}
.res78{width:78%;}
.res79{width:79%;}
.res80{width:80%;}
.res81{width:81%;}
.res82{width:82%;}
.res83{width:83%;}
.res84{width:84%;}
.res85{width:85%;}
.res86{width:86%;}
.res87{width:87%;}
.res88{width:88%;}
.res89{width:89%;}
.res90{width:90%;}
}



@media only screen and (max-width:840px) {
	
.pc{display:none;}
.sp{display:block;}

.res10,.res11,.res12,.res13,.res14,.res15,.res16,.res17,.res18,.res19,.res20,.res21,.res22,.res23,.res24,.res25,.res26,.res27,.res28,.res29,.res30,.res31,.res32,.res33,.res34,.res35,.res36,.res37,.res38,.res39,.res40,.res41,.res42,.res43,.res44,.res45,.res46,.res47,.res48,.res49,.res50,.res51,.res52,.res53,.res54,.res55,.res56,.res57,.res58,.res59,.res60,.res61,.res62,.res63,.res64,.res65,.res66,.res67,.res68,.res69,.res70,.res71,.res72,.res73,.res74,.res75,.res76,.res77,.res78,.res79,.res80,.res81,.res82,.res83,.res84,.res85,.res86,.res87,.res88,.res89,.res90{width:100%; margin-bottom:10px;}

}



/*--------共通--------*/


.photo_l{float:left; margin:0 10px 10px 0;}
.photo_r{float:right; margin:0 0px 10px 10px;}

.box_l{float:left;}
.box_r{float:right;}
.box_c{margin:0 auto;}

.txt_r{text-align:right;}
.txt_l{text-align:left;}
.txt_c{text-align:center;}

.block{display:block;}
.overflow{overflow:hidden;}
.cl{clear:both;}

.img_b5 img{margin-bottom:5px;}
.img_b10 img{margin-bottom:10px;}

.w10{width:10%;}
.w15{width:15%;}
.w20{width:20%;}
.w25{width:25%;}
.w30{width:30%;}
.w35{width:35%;}
.w40{width:40%;}
.w45{width:45%;}
.w50{width:50%;}
.w55{width:55%;}
.w60{width:60%;}
.w65{width:65%;}
.w70{width:70%;}
.w75{width:75%;}
.w80{width:80%;}
.w85{width:85%;}
.w90{width:90%;}

.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt35{margin-top:35px !important;}
.mt40{margin-top:40px !important;}
.mt45{margin-top:45px !important;}
.mt50{margin-top:50px !important;}

.mb5{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.mb35{margin-bottom:35px !important;}
.mb40{margin-bottom:40px !important;}
.mb45{margin-bottom:45px !important;}
.mb50{margin-bottom:50px !important;}

.mtb5{margin:5px 0 !important;}
.mtb10{margin:10px 0 !important;}
.mtb15{margin:15px 0 !important;}
.mtb20{margin:20px 0 !important;}

.ptb5{padding:5px 0 !important;}
.ptb10{padding:10px 0 !important;}
.ptb15{padding:15px 0 !important;}
.ptb20{padding:20px 0 !important;}

.mr3{margin-right:3px !important;}
.mr4{margin-right:4px !important;}
.mr5{margin-right:5px !important;}
.mr6{margin-right:6px !important;}
.mr7{margin-right:7px !important;}
.mr8{margin-right:8px !important;}
.mr9{margin-right:9px !important;}
.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}

.f70per{font-size:70%}
.f80per{font-size:80%}
.f90per{font-size:90%}
.f110per{font-size:110%}
.f120per{font-size:120%}
.f130per{font-size:130%}
.f140per{font-size:140%}
.f150per{font-size:150%}
.f160per{font-size:160%}
.f170per{font-size:170%}
.f180per{font-size:180%}


.f_blue{ color:#6d80bc;}
.f_pink{color:#F69;}

.f_mintyo{font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;}

.memo{font-size:90%;}
.memo_eng{font-size:90%; display: block}

.movie-wrap {position: relative; padding-bottom: 50%; padding-top: 30px; height: 0; overflow: hidden;}
.movie-wrap iframe {position: absolute; top: 0; left: 0; width:100%; height:100%;}

#page-top {position: fixed; bottom: 20px; right: 20px; z-index:20;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
#page-top a {text-decoration:none; color: #fff; padding:15px 20px; text-align:center; display: block; border-radius: 5px; background:#ac0000; font-size:12px;}
#page-top a:hover {text-decoration: none; background:#bd6422;}

@media only screen and (max-width:840px) {
#page-top {position:absolute; top: 0px; right: 20px;
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

#page-top a{padding:0px; background:transparent; font-size:1.6rem;}
#page-top a:hover {text-decoration: none; background:transparent;}

}