@charset "euc-jp";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/

/* 大枠ボックス */
.layer{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  padding: 30px;
}

/* 背景画像の読み込み */
.layer-bg{
  background: url("img/history2.jpg") no-repeat 0 0;
  background-size: 100%;
}

/* 重ねる文字の基本設定 */
.layer-txt{
  text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
  color: #fff;
  letter-spacing: 0.4rem;
  font-family: Georgia, "Times New Roman", Times, "serif"	
}



img#floatButton1 {
    position: fixed;
    left: 0;
    top: 150px;
	max-width: 40%;
	z-index: -100;
}

img.floatButton2 {
    position: fixed;
    right: 0;
    top: 150px;
	max-width: 40%;
	z-index: -100;
}





/* SP向けの設定 */
@media screen and (max-width: 600px) {
	
	img#floatButton1 {
		max-width: 10%;
	}
	
	img.floatButton2 {
		max-width: 10%;
	}

	.btn-grad {
	margin: 10px;/*ボタンの外側余白*/
    padding: 10px;/*ボタンの内側余白*/
    width:98%;/*ボタンの幅*/
    text-align: center;/*文字の位置*/
    transition: 0.5s;
    background-size: 200% auto;
    color: #fff;/*文字の色*/
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;/*ボタンの角の形*/
    display: block;
	background-image: linear-gradient(to right, #FF512F 0%, #DD2476 51%, #FF512F 100%);
	font-size: 20px;
	}

.btn-grad:hover { background-position: right center; }


.wrapbox {
	display: flex;
	flex-wrap: wrap;
}

.allbox {
	width:100%;
}
.head {
	width:100%;
	margin-top:51px;
	margin-bottom:10px;
}

.bnr_wrap {
	display:flex;
	flex-wrap:wrap;
}

.midashi_top {
	font-size:15px;
	font-weight: bold;
	line-height:130%;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	margin:20px auto 10px auto ;
	border-bottom: #959595 1px solid;
}

.midashi {
	width:99%;
	margin-top:5px;
	background-color:#F3F3F3;
	border-bottom:#999 1px solid;
	border-left:#999 8px solid;
	font-size:14px;
	text-align:left;
	padding-left:10px;
}

.midashi2{
	font-size:10px;
	color:#666;
	position: absolute;
	bottom: 0;
}

.midashi3{
	font-size:10px;
	color:#666;
}

.instractor {
	width:100%;
	border-top:#999 1px solid;	
}

.lineup {
	height:120px;
	position:relative;
	text-align:center;
}

.lineup img {
	width:20%;
}

.lineup2 {
	height:120px;
	position:relative;
	text-align:center;		
}

.lineup2 img {
	width:35%;
}

.bnr_series {
	position:relative;
	text-align:center;
	padding:0px 3px 5px 3px;
	font-size: 12px;
	margin: 0 auto;
}

.bnr_series img {
	width:80px;
	border:#CCC 1px solid;
}

.size_list {
	position:relative;
	text-align:center;
	padding:0px 3px 5px 3px;			
}

.size_list img {
	width:80px;
	border:#CCC 1px solid;
	padding: 5px;		
}

.bnr_teacher {
	position:relative;
	text-align:center;
	padding:0px 3px 5px 3px;
	margin-bottom: 20px;
}

.bnr_teacher img {
	width:40%;
	margin-top: 10px;	
}


.artdesign {
	text-align:left;
	line-height:150%;
}

.artdesign img{
	width:150px;
	float:left;
	margin-right:10px;
}

.arttip {
}

.arttip img {
	width:100%;
}

.table {
	background-color:#DFDFFF;
	margin:2px 1px 0 0;
}

.waku1 {
	border: #333 1px solid;
	padding: 15px;
	margin: 10px auto ;
}

.waku1 span {
		color: red;
}

.allsize {
		color:#7C7C7C;
		font-weight: bold;
		font-size: small;
		background-color:#F5F5F5;
    	padding: 5px;
    	width: 60%;
    	border-radius: 5px; /* 角を丸くする */
		margin: 0 auto;
		display: block;
		line-height: 120%;
		border:solid 0.5px #B8B8B8;
}	

.flexbox2to1 {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0 20px 0;
}
.flexbox2to1 div {
	width: 48%;
	font-size: 13px;
	text-align: center;
	}
.flexbox2to1 div img {
	max-height: 200px;
	margin: 15px 0 5px 0;
	border-radius: 5px;
    }

  .layer-txt{
   font-size: 2.4rem;
   padding: 4rem 0;
  }

}


/* デスクトップレイアウト : 769 px 〜最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {
.allbox {
	width:100%;
	max-width:960px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	margin:0 auto;
	padding-top:80px;
}
.head {
	width:100%;
	margin-top:20px;
}

.bnr_wrap {
	display:flex;
	flex-wrap:wrap;
}

.midashi_top {
	font-size:35px;
	font-weight: bold;	
	line-height:150%;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	margin:30px 0px 10px 0px ;
	border-bottom: #959595 1px solid;	
}

.midashi {
	width:99%;
	margin-top:25px;
	background-color:#F3F3F3;
	border-bottom:#999 1px solid;
	border-left:#999 8px solid;
	font-size:14px;
	text-align:left;
	padding-left:10px;
}

.midashi2{
	font-size:14px;
	color:#666;
	position: absolute;
	bottom: 0;
}

.midashi3{
	font-size:14px;
	color:#666;
}

.instractor {
	width:745px;
	height:670px;
	border-top:#999 1px solid;
}

.lineup {
	height:120px;
	position:relative;
	text-align:center;
}

.lineup img {
	width:20%;
}

.lineup2 {
	height:120px;
	position:relative;
	text-align:center;		
}

.lineup2 img {
	width:35%;
}

.bnr_series {
	position:relative;
	text-align:center;
	padding:0px 5px 10px 5px;		
}

.bnr_series img {
	width:100%;
	border:#CCC 1px solid;
}

.size_list {
	position:relative;
	text-align:center;
	padding:0px 3px 5px 3px;			
}

.size_list img {
	width:80px;
	border:#CCC 1px solid;
	padding: 5px;	
}

	
.bnr_teacher {
	position:relative;
	text-align:center;
	padding:0px 5px 10px 5px;
	margin-bottom: 15px;
}

.bnr_teacher img {
	width:60%;
	margin-top: 10px;	
}

.artdesign {
	text-align:left;
	line-height:150%;
}

.artdesign img{
	width:150px;
	float:left;
	margin-right:10px;
}

.arttip {
}

.arttip img {
	width:100%;
}

.table {
	background-color:#DFDFFF;
	margin:2px 1px 0 0;
}

.table2 {
	background-color:#FFDAC8;
	margin:2px 1px 0 0;
}

.waku1 {
	border: #333 1px solid;
	padding: 15px;
	margin: 10px auto ;
}

	.waku1 span {
		color: red;
	}

	.allsize {
		color:#7C7C7C;
		font-weight: bold;
		font-size: small;
		background-color:#F5F5F5;
    	padding: 5px;
    	width: 60%;
    	border-radius: 5px; /* 角を丸くする */
		margin: 0 auto;
		display: block;
		line-height: 120%;
		border:solid 0.5px #B8B8B8;
	}	

	.btn-grad {
	margin: 10px;/*ボタンの外側余白*/
    padding: 10px;/*ボタンの内側余白*/
    width:98%;/*ボタンの幅*/
    text-align: center;/*文字の位置*/
    transition: 0.5s;
    background-size: 200% auto;
    color: #fff;/*文字の色*/
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;/*ボタンの角の形*/
    display: block;
	background-image: linear-gradient(to right, #FF512F 0%, #DD2476 51%, #FF512F 100%);
	font-size: 30px;
	}

.btn-grad:hover { background-position: right center; }

	.flexbox2to1 {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px 0 20px 0;
}
.flexbox2to1 div {
	width: 24%;
	font-size: 15px;
	text-align: center;
	}
.flexbox2to1 div img {
	max-height: 200px;
	margin: 15px 0 5px 0;
	border-radius: 5px;
    }

  .layer-txt{
    font-size: 4rem;
    padding: 8rem 0;
  }	

}