@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;
}

/***************************************************/
.content p.top-title {
    position: relative;
    width: 100%;
    display: inline-block;
    font-size: 35px;
    font-weight: bold;
    margin: 0 0 20px 0;
    padding: 20px 0 0 10px;
    line-height: 40px;
    border-bottom: 1px solid #000000;
}
.content p.top-title:after{
  content: "";
  border-bottom: 2px solid #000000;;
  position: absolute;
  top: 1px;
  left: 0;
  width: calc(100% - 0px);
  height: calc(100% - 4px);
}

.content p.text {
    font-size: 14px;
    margin: 0 10px 20px;
    padding: 0;
}


/** 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 .tokyo {
    overflow: hidden;
    height: auto;
    margin: 20px 10px 30px;
}


/** 募集中 ******************************/
.content .main2 .tokyo .t-course {
    margin: 0 0 30px 0;
}

.content .main2 .tokyo .t-course a {
    display: block;
    height: auto;
    padding: 20px 0 0;
    text-decoration: none;
    border: 2px solid #003366;
}
.content .main2 .tokyo .t-course a:hover {
    /** マウスオーバー（ふわっと切換える） ******************************/
    background-color: #EEF7FF;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
    /** 半透明（全体） ******************************/
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

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

.content .main2 .tokyo p.title {
    font-family: "メイリオ";
    font-size: 20px;
    font-weight: bold;
    color: #8C0000;
    margin: 0 10px 0 0;
    padding: 0;
    line-height: 60px;
}

.content .main2 .tokyo p.freetour {
display: block;
    font-family: "メイリオ";
    font-size: 13px;
    font-weight: bold;
    color: #003366;
    margin: 10px 10px 10px;
    padding:  10px 10px;
        /** 角丸 ******************************/
    border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */
    background: #CEE7FF;
}

.content .main2 .tokyo p.attention {
    font-family: "メイリオ";
    font-size: 16px;
    font-weight: bold;
    color: #0000FF;
    margin: 0 0 0 20px;
    padding: 0;
}
.content .main2 .tokyo p.attention span {
    font-size:15px;
}

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

.content .main2 .tokyo p.target {
    overflow: hidden;
    width: 97%;
    font-family: "メイリオ";
    font-size: 14px;
    font-weight: bold;
    color: #0000FF;
    margin: 30px 0 0 0;
    padding: 0 3% 0 0;
    text-align: right;
    white-space: nowrap;
}

/** 募集終了 ******************************/
.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: 60px;
    height: 60px;
    border-radius: 50%;
    background: #555555;
    text-align:center;
    line-height: 60px;
    margin: 0 10px 0 10px;
    padding: 0;
}

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

.content .main2 .finished p.freetour {
display: block;
    font-family: "メイリオ";
    font-size: 13px;
    font-weight: bold;
    color: #555555;
    margin: 10px 10px 10px;
    padding:  10px 10px;
        /** 角丸 ******************************/
    border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */
    background: #cccccc;
}

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

.content .main2 .finished p.price {
    float: left;
    font-family: "メイリオ";
    font-size: 16px;
    font-weight: bold;
    color: #555555;
    margin: 5px 0 0 30px;
    padding:  0;
    line-height: 40px;
}
.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.target {
    font-family: "メイリオ";
    font-size: 14px;
    font-weight: bold;
    color: #555555;
    margin: 30px 20px 0 0;
    padding: 0;
    text-align: right;
}

/** 共通 ******************************/
.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: 10px 10px 0 20px;
    color: #888888;
    clear: both;
}


/********************************/
.content .main2 .tokyo .bottom {
    overflow: hidden;
    background: #003366;
    padding: 5px 10px 10px;
    margin: 0;
    clear: both;
}

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

/********************************/
.content .main2 .bottom p.date {
    float: left;
    display: inline-block;
    font-family: "メイリオ";
    font-size: 14px;
    color: #8C0000;
    font-weight: bold;
    background: #FFF;
    padding: 5px 10px;
    margin: 10px 0 0;
        /** 角丸 ******************************/
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}
.content .main2 .bottom p.date span {
    display: block;
    margin: 0;
}




/**************************************************************************/
/** タブエリア ここから　**************************************************/
/**************************************************************************/
.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;
}


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