@charset "utf-8";
body {
	font-size: 16px;
	line-height: normal;
	font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin: 0 ;
	padding: 0;
	color: #000;
}

/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
    
	padding: 0;
	margin: 0;
	list-style-type: none;
}


h4, h5, h6 {
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
	padding-right: 15px;
	padding-left: 16px; /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}

p {
	font-size: 14px;
	line-height: normal;
	font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #000;
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
	text-align: justify;
	text-justify: inter-ideograph;
}

li {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
}

a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
}

/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a {
	color: #00F;
	text-decoration: none; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
a:link {
	color:#414958;
	text-decoration: none; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: none;
}






/** コンテント ********************************************************/
.content {
	width: 100%;
	margin: 0 auto;
	clear: both;
}


/** main1 ********************************************************/
.content .main1 {
	overflow: hidden;
	width: 100%;
	height: auto;
	margin: 0 auto;
    padding: 30px 0;
	background: #EEF7FF;
}


.content .main1 p.top {
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;
    background: #003366;
    margin: 0 0 20px;
    padding: 5px 0;
}

.content .main1 h1 {
    font-size: 30px;
    color: #8C0000;
    text-align: center;
    padding: 0;
    margin: 0;
}
.content .main1 h1 span {
    font-size: 20px;
    color: #8C0000;
}

.content .main1 p.center {
    font-size: 20px;
    color: #8C0000;
    text-align: center;
    margin: 0 0 40px;
}

.content .main1-1 {
	overflow: hidden;
	margin: 15px auto 0;
    padding: 30px 15px 20px;
	background: #CEE8FF;
}

.content .main1 p.number {
    font-family: "メイリオ";
    font-weight: bold;
    font-size: 17px;
    color: #003366;
    margin: 0;
}

.content .main1 p.about {
    font-family: "メイリオ";
    font-size: 14px;
    line-height: 18px;
    margin: 5px 0 0 1em;
}

.content .main1 p.limit {
    font-family: "メイリオ";
    font-size: 17px;
    font-weight: bold;
    color: #003366;
    margin: 25px 0 0;
    padding: 0;
}

.content .main1 p.detail {
    font-family: "メイリオ";
    font-size: 14px;
    line-height: 18px;
    margin: 5px 0 0 1em;
}



/** main2 ********************************************************/
.content .main2 {
	overflow: hidden;
	width: 100%;
	height: auto;
	margin: 30px auto 30px;
	background: #FFF;
}

.content .main2 .skype {
    overflow: hidden;
    height: auto;
    margin: 20px 10px 30px;
}


/** 募集中 ******************************/
.content .main2 .skype .s-course {
    display: block;
    height: auto;
    margin: 0 0 30px 0;
    padding: 20px 0 0;
    text-decoration: none;
    border: 2px solid #0081D8;
}

.content .main2 .skype p.place {
    float: left;
    font-family: "メイリオ";
    font-size: 20px;
    font-weight: bold;
    color: #FFF;
    display: inline-block;
    width: 90px;
    height: 50px;
    border-radius: 50%;
    background: #0081D8;
    text-align:center;
    line-height: 50px;
    margin: 0 10px 0 10px;
    padding: 0;
}

.content .main2 .skype p.title {
    font-family: "メイリオ";
    font-size: 22px;
    font-weight: bold;
    color: #8C0000;
    margin: 5px 10px 0 0;
    padding: 0;
    line-height: 120%;
}

.content .main2 .skype p.target {
    float: right;
    font-family: "メイリオ";
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 0 0;
    padding: 0 4% 0 0;
    line-height: 120%;
}

.content .main2 .skype p.price {
    font-family: "メイリオ";
    font-size: 16px;
    font-weight: bold;
    color: #8C0000;
    margin: 10px 0 0 20px;
    padding:  0;
    line-height: 40px;
    clear: both;
}
.content .main2 .skype p.price span {
    font-family: "メイリオ";
    font-size: 30px;
    font-weight: bold;
    color: #8C0000;
    line-height: 30px;
    text-align: center;
}

.content .main2 .skype p.attention {
    float: left;
    font-family: "メイリオ";
    font-size: 14px;
    font-weight: bold;
    color: #0000FF;
    margin: 0 0 10px 20px;
    padding: 0;
}

.content .main2 .skype p.times {
    float: right;
    font-family: "メイリオ";
    font-size: 14px;
    font-weight: bold;
    margin: 0 4% 10px 0;
    padding: 0;
}



/** 募集終了 ******************************/
.content .main2 .finished {
    height: auto;
    margin: 0 0 30px 0;
    padding: 20px 0 0;
    background: #EEEEEE;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #555555;
}

.content .main2 .finished p.place {
    float: left;
    font-family: "メイリオ";
    font-size: 20px;
    font-weight: bold;
    color: #FFF;
    display: inline-block;
    width: 90px;
    height: 50px;
    border-radius: 50%;
    background: #555555;
    text-align:center;
    line-height: 50px;
    margin: 0 10px 0 10px;
    padding: 0;
}

.content .main2 .finished p.title {
    font-family: "メイリオ";
    font-size: 22px;
    font-weight: bold;
    color: #888888;
    margin: 5px 10px 0 0;
    padding: 0;
    line-height: 120%;
}

.content .main2 .finished p.target {
    float: right;
    font-family: "メイリオ";
    font-size: 14px;
    font-weight: bold;
    color: #666666;
    margin: 0 0 0 0;
    padding: 0 4% 0 0;
    line-height: 120%;
}

.content .main2 .finished p.price {
    float: left;
    font-family: "メイリオ";
    font-size: 16px;
    font-weight: bold;
    color: #555555;
    margin: 10px 0 0 20px;
    padding:  0;
    line-height: 40px;
    clear: both;
}
.content .main2 .finished p.price span {
    font-family: "メイリオ";
    font-size: 30px;
    font-weight: bold;
    color: #555555;
    line-height: 30px;
    text-align: center;
}

.content .main2 .finished p.attention {
    float: left;
    font-family: "メイリオ";
    font-size: 14px;
    font-weight: bold;
    color: #555555;
    margin: 0 0 10px 20px;
    padding: 0;
}

.content .main2 .finished  p.times {
    float: right;
    font-family: "メイリオ";
    font-size: 14px;
    font-weight: bold;
    color: #666666;
    margin: 0 4% 10px 0;
    padding: 0;
}


/** 共通 ******************************/
.content .main2 span {
    font-size: 13px;
}

.content .main2 p.sub {
    font-family: "メイリオ";
    font-size: 16px;
    color: #555555;
    font-weight: bold;
    margin: -20px 0 0;
    padding: 0;
    text-align: right;
}

.content .main2 p.text {
    font-family: "メイリオ";
    font-size: 14px;
    margin: 30px 10px 0 20px;
    color: #888888;
    clear: both;
}


/********************************/
.content .main2 .skype .bottom {
    overflow: hidden;
    background: #0081D8;
    padding: 20px 10px 0;
    margin: 0;
    clear: both;
}

.content .main2 .finished .bottom {
    overflow: hidden;
    background: #555555;
    padding: 20px 10px 0;
    margin: 0;
}

/********************************/
.content .main2 p.applybox2-e {
    display: block;
    font-family: "メイリオ";
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background: #555555;
    margin: 20px 5% 0 5%x;
    padding: 10px 0;
    text-align: center;
        /** 角丸 ******************************/
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
    border: 2px solid #fff;
    text-decoration: none;
}

.content .main2 p.applybox2-l {
    margin: 20px 5% 0 5%x;
}

.content .main2 p.applybox2-r {
    margin: 0 5% 10px 5%x;
}

.content .main2 p.applybox2-l a {
    display: block;
    font-family: "メイリオ";
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: #FF7F00;
    padding: 10px 0;
    text-align: center;
        /** 角丸 ******************************/
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
    border: 2px solid #fff;
    text-decoration: none;
        /** マウスオーバー（ふわっと切換える） ******************************/
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
/***************************
1s が1秒なので、上記の場合は0.3秒で背景色が変わる
ease は変化の方法
****************************/
}

.content .main2 p.applybox2-r a {
    display: block;
    font-family: "メイリオ";
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: #D90000;
    padding: 10px 0;
    text-align: center;
        /** 角丸 ******************************/
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
    border: 2px solid #fff;
    text-decoration: none;
        /** マウスオーバー（ふわっと切換える） ******************************/
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
/***************************
1s が1秒なので、上記の場合は0.3秒で背景色が変わる
ease は変化の方法
****************************/
}

.content .main2 p.applybox2-l a:hover,
.content .main2 p.applybox2-r a:hover {
    /** 半透明（全体） ******************************/
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
/*********************
『filter:alpha(opacity=50);』--【IE】/ 透過無しの状態"100%"を指定する際は「filter:alpha(opacity=100);」。
『-moz-opacity: 0.5;』--【Firefox（Mozilla）】/ 透過無しの状態"100%"を指定する際は「-moz-opacity:1;」。
『opacity: 0.5;』--【SafariやOpera】/ 透過無しの状態"100%"を指定する際は「opacity:1;」。
**********************/
}


.content .main2 .bottom p.applybox3 {
    float: left;
    width: 278px;
    margin: 10px 0 0 10px;
}

.content .main2 .bottom p.applybox3 a {
    display: block;
    font-family: "メイリオ";
    font-size: 18px;
    font-weight: bold;
    background: #FFF;
    padding: 15px 0;
    text-align: center;
        /** 角丸 ******************************/
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}




/**************************************************************************/
/** タブエリア ここから　**************************************************/
/**************************************************************************/
.content .tabarea {
    overflow: hidden;
    width: 96%;
    margin: 0 2% 30px;
    padding: 0;
}
.content .tabarea p.tyo-title {
    color: #FFF;
    text-align: center;
    background: #003366;
    margin: 0;
    padding: 10px 0;
}
.content .tabarea p.osa-title {
    color: #FFF;
    text-align: center;
    background: #006633;
    margin: 0;
    padding: 10px 0;
}



.tab-group{
    display: flex;
    justify-content: center;
}
/**通常のタブのデザイン*******************************/
.tab01{
    flex-grow: 1;
    margin: 0;
    padding: 10px 0;
    list-style:none;
    cursor:pointer;
    display: block;
    color:#FFF;
    text-align: center;
    background: #7F99B2;
    border: 1px solid #7F99B2;
    border-bottom: none;
    
}
.tab02{
    flex-grow: 1;
    margin: 0;
    padding: 10px 0;
    list-style:none;
    cursor:pointer;
    display: block;
    color: #FFF;
    text-align: center;
    background: #7FB299;
    border: 1px solid #7FB299;
    border-bottom: none;
}
.tab03{
    flex-grow: 1;
    margin: 0;
    padding: 10px 0;
    list-style:none;
    cursor:pointer;
    display: block;
    font-size: 14px;
    color: #FFF;
    text-align: center;
    background: #003366;
    border: 1px solid #FFF;
    border-bottom: none;
}
.tab04{
    flex-grow: 1;
    margin: 0;
    padding: 10px 0;
    list-style:none;
    cursor:pointer;
    display: block;
    font-size: 14px;
    color: #FFF;
    text-align: center;
    background: #006633;
    border: 1px solid #FFF;
    border-bottom: none;
}


/**タブをクリックしたときのデザイン*******************/



/**************************************/
.panel-group{
    margin: 0;
    padding: 0;
}
.panel{
    display:none;
}



.tab01.is-active{
    background: #FFF;
    color: #003366;
    transition: all 0.2s ease-out;
    border: 1px solid #003366;
    border-bottom: none;
}
.tab02.is-active{
    background: #FFF;
    color:#006633;
    transition: all 0.2s ease-out;
    border: 1px solid #006633;
    border-bottom: none;
}
.tab03.is-active{
    background: #EEF7FF;
    color:#ACD8FF;
    transition: all 0.2s ease-out;
    border: 1px solid #FFF;
    border-bottom: none;
}
.tab04.is-active{
    background: #EAFFF4;
    color:#5E9D7D;
    transition: all 0.2s ease-out;
    border: 1px solid #FFF;
    border-bottom: none;
}

.panel.is-show{
    display:block;
}



/**　東京講座　*********************************************/
.tabarea .panel .tyo {
    margin: 0;
    padding: 30px 0 0;
    border: 1px solid #003366;
    border-top: none;
}

.tabarea .panel .tyo ul {
margin: 0 10px 20px;
padding: 0 0 20px 0;
border-bottom: 1px dotted #555;}

.tabarea .panel .tyo h2 {
font-size: 20px;
color: #8C0000;
margin: 0;
padding: 0;
font-weight: bold;
text-align: left;
}


.tabarea .panel .tyo li {
width: 100%;
margin: 0;
padding: 0;
border-left: 8px solid #4C7094;
border-bottom: none;
}
.tabarea .panel .tyo li:before {
    content: "";
}

.tabarea .panel .tyo h3 {
font-size: 15px;
color: #0000FF;
margin: 0 0 5px 0;
padding: 0 0 0 10px;
}


.tabarea .panel .tyo p.about {
font-size: 14px;
margin: 0;
padding: 0 0 5px 10px;
color: #555;
line-height: 100%;
}

.tabarea .panel .tyo p.level {
font-size: 14px;
font-weight: bold;
line-height: 22px;
margin: 0;
padding: 0 0 5px 10px;
}

.tabarea .panel .tyo .start {
display: inline;
font-size: 14px;
font-weight: bold;
color: #FFF;
line-height: 22px;
margin: 5px 0 0 15px;
padding: 5px 20px;
background: #4C7094;
line-height: 200%;
    /** 角丸 ******************************/
    border-radius: 50px;        /* CSS3草案 */  
    -webkit-border-radius: 50px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 50px;   /* Firefox用 */  
}



/**　大阪講座　*********************************************/
.tabarea .panel .osa {
    margin: 0;
    padding: 30px 0 0;
    border: 1px solid #006633;
    border-right: 1px solid #006633;
    border-top: none;
}

.tabarea .panel .osa ul {
margin: 0 10px 20px;
padding: 0 0 20px 0;
border-bottom: 1px dotted #555;
}

.tabarea .panel .osa h2 {
font-size: 20px;
color: #8C0000;
margin: 0;
padding: 0;
font-weight: bold;
text-align: left;
}


.tabarea .panel .osa li {
width: 100%;
margin: 0;
padding: 0;
border-left: 8px solid #006633;
border-bottom: none;
}
.tabarea .panel .osa li:before {
    content: "";
}

.tabarea .panel .osa h3 {
font-size: 15px;
color: #0000FF;
margin: 0;
padding: 0 0 5px 10px;
}


.tabarea .panel .osa p.about {
font-size: 14px;
margin: 0;
padding: 0 0 5px 10px;
color: #777;
line-height: 100%;
}

.tabarea .panel .osa p.level {
font-size: 14px;
font-weight: bold;
line-height: 22px;
margin: 0;
padding: 0 0 5px 10px;
}

.tabarea .panel .osa p.start {
display: inline;
font-size: 14px;
font-weight: bold;
color: #FFF;
line-height: 22px;
margin: 5px 0 0 15px;
padding: 5px 20px;
background: #006633;
line-height: 200%;
    /** 角丸 ******************************/
    border-radius: 50px;        /* CSS3草案 */  
    -webkit-border-radius: 50px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 50px;   /* Firefox用 */  
}




/**　無料体験　東京　*********************************************/


.tabarea .panel .ftyo {
    float: left;
    width: 100%;
    background: #EEF7FF;
    margin: 0;
    padding: 20px 0 10px;
}


.tabarea .panel .ftyo p.title {
    font-size: 13px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    background: #003366;
    margin: 0 5px 20px;
    padding: 10px 0 8px;
    /** 角丸 ******************************/
    border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
}






/**　無料体験　大阪　*********************************************/
.tabarea .panel .fosa {
    float: left;
    width: 100%;
    background: #EAFFF4;
    margin: 0;
    padding: 20px 0 10px;
}


.tabarea .panel .fosa p.title {
    font-size: 13px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    background: #006633;
    margin: 0 5px 20px;
    padding: 10px 0 8px;
    /** 角丸 ******************************/
    border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
}



/**　無料体験　共通　***************************/
.tabarea .panel p.text {
	font-size: 13px;
	line-height: normal;
	font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #000;
	margin: 0 10px 15px;
	text-align: justify;
	text-justify: inter-ideograph;
}

.tabarea .panel ul {
    margin: 0;
    padding: 0;
}

.tabarea .panel li {
    font-size: 14px;
    border-bottom: 1px dotted #ccc;
    line-height: 120%;
    margin: 10px 0 0;
    padding: 0 0 8px;
    text-align: center;
}
.tabarea .panel li:before {
    content: "●";
}

.tabarea .panel p.f-link {
    text-align: center;
    margin: 10px 0;
    line-height: 140%;
}
.tabarea .panel p.f-link a {
    display: block;
    color: #8C0000;
    padding: 0;
    text-decoration: underline;
}


/**************************************************************************/
/** タブエリア ここまで　**************************************************/
/**************************************************************************/