@charset "utf-8";
/* CSS Document */
/* =========================================================

基本の設定

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

body{

	background: #FFFFFF;

	margin: 0px;

	padding: 0px;

	color: #66584c;

	font-size:14px;

	font-family: Meiryo,メイリオ,Arial,"MS PGothic",Osaka,"ヒラギノ角ゴ Pro W3",sans-serif;

}



h1, h2, h3, h4, h5, h6, p, address, ul, ol, li, dl, dt, dd, table, th, td, img, form,iframe{

	margin: 0;

	padding: 0;

	border: none;

	line-height: 1.5em;

	list-style-type: none;

	font-style: normal;

	font-weight: normal;

	font-size: 14px;

	text-align: left;

}

@media (min-width : 768px){
    html{ font-size : 81.2%;} 
.middleArea {
    margin: 0px auto;
	max-width: 980px;
}
}
 
@media (max-width : 1024px) {
    html{ font-size : 100%; }
}

/* デフォルト状態のインライン要素をブロック要素に指定 */

article, aside, figure, figcaption, details, footer, header, hgroup, nav, section, summary{

	display:block;

	margin:0;

	padding:0;

}
.container-fluid{
	padding-left: 0px;
	padding-right: 0px
}
.container-small{
	max-width: 980px;
}
/* ------------------------------------- /
/   Header
/* ------------------------------------- */
header#pagetop {
	background: url(../../images/headBg.jpg) center 0px no-repeat;
	width: 100%;
	position: relative;
}
@media (min-width: 768px){ 
header#pagetop {
	max-width: 1000px;
	margin: 0px auto 30px;
	padding-left: 10%;
	padding-right: 50px;
	min-height: 610px;
	}
 }
@media (max-width: 768px){ 
header#pagetop {
	background-size: contain;
	height: 0px;
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding-bottom: 61%;
	margin-bottom: 15px;
}
	}
/*  logo
/--------------------------------- */
.logo{
	display: block;
	position: absolute;
	top:0px;
}
@media (min-width: 768px){ 
.logo{
	width: 210px;
}
	}
@media (max-width: 768px){ 
.logo{
	width: 25vw;
	margin-left: 15px;
}
	}

/*  nav
/*--------------------------------- */
.navbar-default {
	margin: 0px;
	border: none;
}

.navbar li a {
	color: #78411b;
}
.navbar li a:hover {
	color: #e4a631;
	background-color: none;
}
/*--------------------------------- */
@media (min-width: 768px){ 
.navbar-default > li > a {
	line-height: 1.5;
	margin: 0px auto;
	vertical-align: middle;
	display:table-cell;
	height: 50px;
	padding-top: 30px;
	}
.navbar-default li a {
	padding-left: 20px;
	background: url(../../images/cube.png) 0px 10px no-repeat;
	font-size: 1.2em;
	}
.navbar-collapse{
	margin-top: 20px;
	}
}

/* navスタイリング */
@media (max-width: 768px){
.navbar {
	padding: 0px;
	}
.navbar-nav {
    margin-top :0px;
}
	.nav {
        background-color: #FFF;
}
    .navbar-default .navbar-toggle {
        border-color: #78411b;
		background-color: #78411b;
    }
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
        background-color: #78411b;
    }
	.navbar-collapse{
	padding: 0px;
	border: none;
	}
	.navbar-header{
	position: absolute;
	top:0px;
		right: 0px;
	}
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #FFF;
    }
	.navbar-default .nav li.toplist {
	    border-top: solid 1px;
	color: #78411b;
	margin-top:50px; 
    }
	.navbar-default .nav > li {
    border-bottom: solid 1px;
	color: #78411b;
    }

}
/* =======↓ Important News ↓======= */
  #ImportantArea {
    margin: 0px auto 15px ;
    max-width:960px;
  }
  #ImportantArea .titleH {
    background-color: #e5001f;
    padding: 6px 0;
    text-align: center;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 1.3px;
  }
  #ImportantArea p {
    background-color: #fff;
    border: 1px solid #e5001f;
    padding: 15px 30px ;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
   #ImportantArea p a {
    text-decoration: underline;
  }
@media (max-width: 768px){
  #ImportantArea p {
    padding: 15px;
  }
}
/*  Font
/*--------------------------------- */
h1.mainTitle{
	color: #f9a03c;
	text-align: center;
}
h1.mainTitle span{
	color: #caab95;
	display: block;
}
p{
	color: #66584c;
	line-height: 1.8em;
}
p.Att{
	padding-left: 10px;
}
p.ceAtt{
	text-align: center;
	padding-top: 2px;
}
/* Fontスタイリング */
@media (min-width: 768px){ 
h1.mainTitle{
	padding-top: 30px;
	line-height: 2.1em;
}
h1.mainTitle span{
	font-size: 2.1em;

}
p.mainText{
	padding: 25px 15px 25px;
}

}
/*--------------------------------- */
@media (max-width: 768px){
h1.mainTitle{
	padding-top: 15px;
}
h1.mainTitle span{
	font-size: 1.8em;
	line-height: 1.5em;
}
p.mainText{
	padding: 15px;
}
}

/*  About
/*--------------------------------- */
#AboutArea{
	background: url(../../images/BBg.png) 0px 0px repeat;
}
#AboutArea p.Mess{
	color:#78411b;
	font-size: 1.28em;
	line-height: 3.5em;
}
#AboutArea p.Mess span{
	font-size: 1.5em;
}
#AboutArea h1{
	background: url(../../images/dotLineB.png) 0px 0px repeat-x;
	padding-top: 60px;
}
#AboutArea .bgArea{
	background: url(../../images/dotLineB.png) 0px bottom repeat-x;
	padding-bottom: 60px;
}
@media (min-width: 768px){ 
#AboutArea{
	margin-bottom: 30px;
}
#AboutArea p.Mess{
		padding-top: 30px;
}
#AboutArea p.mainText{
	padding: 15px 0px 0px;
}
	}
@media (max-width: 768px){ 
#AboutArea{
	margin-bottom: 15px;
}
#AboutArea h1{
	padding-top: 35px;
}
	#AboutArea p.Mess{
	font-size: 1em;
	line-height: 2.2em;
	font-weight: bold;
	padding-top: 10px;
}
	#AboutArea 	p.mainText{
	padding: 15px 0px 0px;
}
#AboutArea .bgArea{
	padding-bottom: 35px;
}
	}
/*  Open Event
/*--------------------------------- */
#OpenArea {
	text-align: center;
	background: url(../../images/dotLine.png) 0px bottom repeat-x;
	padding-bottom: 60px;
}
#OpenArea h2#OpenTitle{
	max-width: 515px;
	padding: 0px 15px;
}
#OpenArea div#OpenImg{
	max-width: 745px;
	padding: 0px 15px;
	margin: 0px auto;
}
#OpenArea .EventShop h3 {
    margin: 0 0 5px;
	background-color: #78411b;
	border: 1px solid #78411b;
	color: #FFF;
}
#OpenArea .EventShop h3 a {
	color: #FFF;
	text-decoration: underline;
}
#OpenArea .EventShop h3{
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */ 
	behavior:url("/common/css/border-radius.htc");   /* IE用 */ 
	text-align: center;
	font-weight: bold;
	padding: 10px;
}
#OpenArea .EventShop table {
	border-top: 1px solid #e4d9d1;      /* 上 */
	border-left: 1px solid #e4d9d1;     /* 左 */
	margin: 0px auto 15px;
	width: 100%;
	color: #66584c;
}
#OpenArea .EventShop table th{
	white-space: nowrap;
}
#OpenArea .EventShop table td,
#OpenArea .EventShop table th{
	padding: 10px 20px;
	color: #393938;
	border-right: 1px solid #e4d9d1;    /* 右 */
	border-bottom: 1px solid #e4d9d1;   /* 下 */
}
@media (min-width: 768px){
#OpenArea {
	margin-bottom: 30px;
}
#OpenArea h2#OpenTitle{
	margin: 20px auto;
}
	}
@media (max-width: 768px){
#OpenArea {
	margin-bottom: 15px;
}
#OpenArea h2#OpenTitle{
	margin: 15px auto;

}
	}
/*  Course
/*--------------------------------- */
#CourseArea {
	text-align: center;
	background: url(../../images/dotLine.png) 0px bottom repeat-x;
	padding-bottom: 60px;
}
#CourseArea .CourseBox{
	text-align: center;
	margin-bottom: 20px;
}
#CourseArea .CourseBox h2{
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
	padding-top: 10px;
}
#CourseArea h2.Course1 {
	color: #fb9d18;
}
#CourseArea h2.Course2 {
	color: #31b3cf;
}
#CourseArea h2.Course3 {
	color: #ab6eb8;
}
#CourseArea .CourseBox p{
	text-align: center;
}
#CourseArea .CourseInfo{
	background: #faf5ef;
}
#CourseArea .CourseInfo p.Coursetext{
	color: #78411b;
}

#CourseArea h2.Member {
	color: #78411b;
	font-size: 1.2em;
	margin: 30px 10px 0px;
}
#CourseArea dl {
    margin: 5px 10px 10px;
	max-width: 404px;
}
#CourseArea dl dt {
    clear: left;
    float: left;
    margin: 0 0 5px;
	background-color: #78411b;
	border: 1px solid #78411b;
	color: #FFF;
}
#CourseArea dl dt,
#CourseArea dl dd{
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */ 
	behavior:url("/common/css/border-radius.htc");   /* IE用 */ 
	text-align: center;
	font-weight: bold;
	padding: 10px;
	width: 49%;
}
#CourseArea dd {
	border: 1px solid #baa08e;
	color: #66584c;
    margin: 0 0 5px 50%;
}
#CourseArea h2.present {
	text-align: center;
	color: #755e3c;
	padding-bottom: 3px;
	font-size:1.6em;	
	border-bottom: 5px solid #e1dcd4;   /* 下 */
}
@media (min-width: 768px){
#CourseArea {
	margin-bottom: 30px;
}

#CourseArea .CourseInfo p.Coursetext{
	font-size: 1.2em;
}
#CourseArea .CourseInfo{
	padding: 20px;
}
#CourseArea dl dt,
#CourseArea dl dd{
	width: 200px;
}

}
@media (max-width: 768px){
#CourseArea {
	margin-bottom: 15px;
}
#CourseArea .CourseBox img{
	max-width: 300px;
	width: 93vw;
	margin: auto;
}
#CourseArea .CourseInfo{
	padding: 15px;
}
#CourseArea .CourseInfo p.Coursetext{
	font-weight: bold;
}
}
/*  Present
/*--------------------------------- */

#PresentArea{
	text-align:center;
	margin:60px auto;
	width: 93vw;
}
#PresentArea h2{
	color:#e1b069;
	text-align:center;
	font-size:1.3em;
	border-bottom:1px solid #e1b069;
}
#PresentArea p{
	text-align:left;
	margin:15px 10px ;
}
@media (max-width: 768px){
#PresentArea img{
	width: 92vw;
}
}
/*  Trial
/*--------------------------------- */
#TrialArea{
	text-align: center;
	background: url(../../images/dotLine.png) 0px bottom repeat-x;
	padding-bottom: 60px;
}
#TrialArea .TrialBox{
	text-align: center;
	margin: 0px auto 20px;
}
#TrialArea .TrialBox h2{
	text-align: center;
	color: #986746;
	font-size: 1.14em;
	line-height: 2em;
}
#TrialArea .price{
	color: #d13005;
	font-weight: bold;
}

@media (min-width: 768px){
#TrialArea {
	margin-bottom: 30px;
}
}
@media (max-width: 768px){

#TrialArea {
	margin-bottom: 15px;
}
#TrialArea .TrialBox img{
	max-width: 300px;
	width: 95vw;
	margin: auto;
}

}
/*  Shop
/*--------------------------------- */
#ShopArea table {
	border-top: 1px solid #e4d9d1;      /* 上 */
	border-left: 1px solid #e4d9d1;     /* 左 */
	margin: 0px auto;
}
#ShopArea table td{
	color: #66584c;
	border-right: 1px solid #e4d9d1;    /* 右 */
}
#ShopArea table a{
	color: #f9a03c;
	text-decoration: underline;
}
@media (min-width: 768px){
#ShopArea {
	margin-bottom: 50px;
}
#ShopArea table {
	max-width: 880px;
	margin-top: 25px;
	width: 93vw;
}
#ShopArea table td{
	border-bottom: 1px solid #e4d9d1;   /* 下 */
	padding: 10px;
}
}
@media (max-width: 768px){
#ShopArea {
	margin-bottom: 15px;
}
#ShopArea table {
	border: none;
	width: 93vw;
	margin-top: 15px
}
#ShopArea table tr {
    border-top: 1px solid #d4cbc4;
	border-bottom: 1px solid #d4cbc4;
	display: block;
    margin-bottom: 10px;
  }
#ShopArea table td {
    border-left: 1px solid #d4cbc4;
    display: block;
	border-bottom: none;
	padding: 5px 10px;
}
}
/*  Prof
/*--------------------------------- */
#ProfArea{
	background: #faf9f9 url(../../images/WLineBottom.png) 0px bottom repeat-x;
	padding-bottom: 60px;
}
#ProfArea #ProfBox {
	background: url(../../images/WLineTop.png) 0px 0px repeat-x;
	overflow: hidden;
	text-align: center;
	padding-top: 40px;
}

#ProfArea  #ProfBox p{
	line-height: 1.86em;
}
#ProfArea .ImgBox{
	text-align: center;
	margin-top: 20px;
}
#ProfArea .ImgBox img{
	max-width: 345px;
	margin: 0px auto;
}
#ProfArea  #ProfBox a{
	color: #f9a03c;
}
@media (min-width: 768px){
#ProfArea  #ProfBox h1{
	margin: 20px 0px;
}
#ProfArea .ImgBox{
	float: right;
}
#ProfArea .TextBox{
	float: left;
}

}
/*--------------------------------- */
@media (max-width: 768px){
#ProfArea .ImgBox img{
	max-width: 345px;
	width: 93vw;
}
#ProfArea .ImgBox{
	margin-top: 0px;
}
#ProfArea #ProfBox h1{
	text-align: center;
	margin: 20px 0px 10px;
}
}
/*  Contact
/*--------------------------------- */
.ContactArea {
	text-align: center;
	width:280px; 
	margin: 30px auto 0px;
	
}
.ConBt {
    display: inline-block;
}
.ConBt a {
    display:block;  /* ブロック要素にしてリンク範囲を作る */
    width:280px;  /* ボタンの幅 */
    background:#f9a03c;  /* ボタンの背景色 */
    border-radius:10px;  /* 角丸（半径10px） */
    color:#fff;  /* リンクテキストのカラー */
	font-size: 1.4em;
    line-height:2.8em;  /* ボタンの高さ＋テキストを中央（上下方向）にする */
    text-decoration:none;  /* リンクの下線（装飾）を消す */
    text-align:center;  /* テキストを中央寄せ */
}


/*  pageTop
/*--------------------------------- */
#pageTop {
  position: fixed;
  right: 20px;
}
#pageTop a {
  display: block;
  z-index: 999;
  padding: 6px 0 0 ;
  border-radius: 30px;
  width: 38px;
  height: 38px;
  background-color: #d0c4ad;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
/*  footer
/*--------------------------------- */
footer#FootCopy{
	background: #78411b;
	padding: 10px;
	text-align: right;
	margin-top: 70px;
}
footer#FootCopy dt,
footer#FootCopy dd{
	font-size: 0.9em;
	color: #FFF;
}
footer#FootCopy dl {
    clear: both;
    margin: 6px;
    padding: 0;
}
footer#FootCopy dt {
    display: inline;
    margin-right: -0.9em;
    text-align: right;
}
footer#FootCopy dd {
    display: inline;
    margin-left: 0.9em;
    text-align: right;
}
footer#FootCopy dd a{
	color: #FFF;
}
footer#FootCopy p.copyright {
    color: #fff;
    text-align: right;
	font-size: 0.9em;
}
@media (min-width: 768px){
footer#FootCopy{
	text-align: right;
}
footer#FootCopy dl {
    text-align: right;
}
footer#FootCopy p.copyright {
    text-align: right;
	font-size: 0.9em;
}
footer#FootCopy img.CraftLogo{
	width: 365px;
	height: 35px;
}
}
@media (max-width: 768px){
footer#FootCopy{
	text-align: center;
}
footer#FootCopy img.CraftLogo{
	max-width: 365px;
	width: 93vw;
	height: auto;
}
footer#FootCopy dt,
footer#FootCopy dd{
    text-align: right;
}
footer#FootCopy dl {
	text-align: center;
}
footer#FootCopy p.copyright {
    text-align: center;
	font-size: 0.7em;
}
}