@charset "utf-8";

/* CSS Document */

/* ---------  リセット -------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,blockquote,th,td {
	margin:0;
	padding:0;
}

fieldset,img {
	border:0;
}

address,caption,cite,code,dfn,em,/* strong, */th,var {
	font-style:normal;
	font-weight:normal;
}

ol,ul {
	list-style:none;
}

caption,th {
	text-align:left;
}

h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}

q:before,q:after {
	content:'';
}

abbr,acronym {
 border:0;
} /* -------リセット　ここまで------------------------ */



/* ---------pcとspを分ける----------- */

/* パソコンで見たときは"pc"のclassがついた画像が表示される */

.pc { display: block !important; }

.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */

@media only screen and (max-width: 768px) {
.pc { display: none !important; }
.sp { display: inline !important; }
}
/* ---------pcとspを分ける　ここまで----- */


/* --------------------------------------
　　　　spスマートフォン用ヘッダーナビ ドロップダウン
------------------------------------- */
.sp li a{
 	width:250px;
}

.sp li{
	font-size:1.2em;
	padding:0% 5% 0% 5%;
	margin-left:5%;
}

.sp ul li ul{
	margin-top:60px;
}

.sp p{
	margin-top:80px;
} /* --spスマートフォン用ヘッダーナビ ドロップダウンここまで-- */



/* -------------------------------------------------------
				スマートフォン用CSS
---------------------------------------------------------- */
@media only screen and (max-width: 768px) 
 {
 
h1{
	width:80%;
	font-size:1em;
	color:#358;
	border:solid 1px #48a;
	padding:1% 5%;
	margin-top:3%;
	margin-left:auto;
	margin-right:auto;		
	line-height:2;		/*-- 文章の行間を開ける --*/
    border-radius: 7px;			/*-- 角に丸み --*/
}

h2{
	width:70%;
	font-size:1.3em;
	color:#aaa;			/*-- 文字の色が変わらない --*/
	border:solid 1px #fff;		/*-- 白枠にしてhover時写真がぶれない --*/
	margin-top:3%;
	margin-left:auto;
	margin-right:auto;	
	line-height:2;		/*-- 文章の行間を開ける --*/
	padding:2% 5%;
    border-radius: 5px;		/*-- 角に丸み --*/
}

h2:hover{
	border:solid 1px #9be;
							/*-- ここにopacityを入れるとhover時写真がぶれる --*/
}

h2 a{
	text-decoration:none;
}
h3{			/*--- h3は特別開催の日時のページのみ ---*/
	font-size:1.8em;
	color:#b05;
}

h4{			/*---h3から h4にしてみる。特別開催の日時のページのみ ---*/
	font-size:1.8em;
	color:#b05;
}

p{
	font-size:1em;
	color:#666;
	line-height:1.8;/* -- 行間を広げる -- */
	letter-spacing:0.1em;	/* -- 字間を広げる -- */
	margin-left:auto;
	margin-right:auto;

}
	
p#summary{
	font-size:1em;
	font-family:verdana,helvetica,sans-serif;
	margin-bottom:20px;/* -- px -- */
	padding:10px;	/* -- px -- */
}


/* ------　table　　テーブル(スマートフォン用)-------- */
table{
	margin-top:3%;
	width:100%;
	border:none;		/* -- 外枠の罫線、無くす -- */
	border-collapse:separate;	/* -- ラインを離す -- */
	border-spacing:1%;			/* -- 離す距離 -- */
}

th{						/* -- 講師紹介のテーブル -- */
	width:10%;
	color:#666;
	font-size:1.2em;
	background-color:#eff;
	border:solid 2px #cff;		/* -- 内枠の水色 -- */
	padding:25px 0;			/* -- px -- */
	text-align:center;	/* -- 文字の中ぞろえ -- */
}

td{		/*-- テーブルのアレンジ教室を仕切っている --*/
	font-size:1em;
	color:#666;	
	border:solid 1px #daeaea;		/* -- 内枠の色（グレー） -- */
	line-height:3;		/* -- 行間を広げる -- */
}



/* --テーブルここまで,カレンダーのテーブルは下のクラスの中に入ってる -- */


/* ------　h_nav　　ヘッダーナビ(スマートフォン用) ---- */
div#h_nav{
	width:100%;
	border-bottom:solid 1px #def;
	background-color:rgba(255,255,255,0.7);  /* --右端の0.　が透明の指示-- */
	position:fixed;   /* --上に固定する */
}

div#h_nav li{
	display:inline;
}

div#h_nav li a{
	text-decoration:none;
	font-family:verdana,helvetica,sans-serif;
	color:#000;
	font-size:0.9em;
	margin-left:1%;	/* ----ヘッダーナビボタンの間----- */
}

/* --上のヘッダーにカーソルが乗ったとき-- */
div#h_nav li a:hover{
	color:#fff;
	background-color:rgba(0,100,200,0.3);  /* --右端の0.　が透明の指示-- */
} /* ----h_nav　ここまで---------------- */


/* --------------------------------------
　　　　ヘッダーナビ ドロップダウン(スマートフォン用)
------------------------------------- */

/* -------------共通部分----------------- */
.dropmenu{
  list-style-type: none;
  width: 100%;
}

.dropmenu:after{
  clear: both;
}

.dropmenu li{
  position: relative;
  width: 7.3%;				/* --文字の横幅-- */
  float: left;			/* --文字を横並びにする-- */
  text-align: center;
}

.dropmenu li a{
  display: block;
  padding: 0 0 0 0;			/* -- px -- */
}

.dropmenu li ul{
  list-style: none;
  position: absolute;
  z-index: 9999;
  top:0%;		/* --ドロップダウンで出てくる一番上の文字の頭の隙間-- */
}

.dropmenu li ul li{
  width:100%;	 
}

.dropmenu li ul li a{
  margin-top:3px;
  box-shadow: 1px 1px #8aa; /*-- 影を付ける --*/
  	background-color:rgba(255,255,255,1);  /* --右端の0.　が透明の指示,ロリポップでは全く反応しない。- */
}				/* --ドロップダウンメニュー間に隙間を開けるため-- */




/*-- パッと出る --*/
#normal li ul{
  display: none;
}

#normal li:hover ul{
  display: block;
} /*-- パッと出る。ここまで --*/

/* --------------------------------------
　　　　　header　　上の写真(スマートフォン用)
------------------------------------- */
div#header{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-top:2%;		/*-- 上のナビボタンと写真が重ならないための空間づくり --*/
}

div#header p{
	margin-left:auto;
	margin-right:auto;
} /* ----header　ここまで------------------- */


/* -------コンテナー ---------- */
div#container{
	width:100%;
	border:solid 1px #fff;		/*-- これを取ると形が崩れる --*/
	margin-left:auto;
	margin-right:auto;
	background-color:#f8ffff;
} /* ----コンテナーここまで------------- */


/* -------------　コンテンツ　--------- */
div#contents{
	width:100%;
	margin-left:auto;
	margin-right:auto;
} /* ----コンテンツ　ここまで-------- */


/* ---------　メイン ------------ */
div#main{
	width:100%;
	margin-left:auto;
	margin-right:auto;
} /* ----メイン　ここまで----------------- */


/* --------------------------------------
　　　　　class　クラス分け(スマートフォン用)
------------------------------------- */
/* -- p3のクラスは下 -- */




/* -- p10～p17 カレンダー --*/

table.design1 th{		/* -- カレンダーの年、月 -- */
	background-color:#88f; /* --88fはうす青-- */	
}

table.design1 td{
	text-align:center;	/* -- 文字の中ぞろえ -- */
}

td.color1{						/* -- 日曜日 -- */
	background-color:#fdf;		
}
td.color2{						/* -- 月～金 -- */
	background-color:#eef;		
}
td.color3{						/* -- 土曜日 -- */
	background-color:#dff;		
}
td.color4{					/* -- レッスン日 黄色 -- */
	background-color:#ffb;		
}
td.color5{					/* -- レッスン日 緑色 -- */
	background-color:#cfd;		
}
/* ------- カレンダーここまで (スマートフォン用)----- */


  p.kousi2 a:hover{		/*-- 各教室p10～講師の写真 --*/
 	opacity:0.8;
	color:#66c;
	text-decoration:none;
 }
 
 p.lesson {			/* -- p10～p17各教室の「黄色がレッスン日です」の文字の色、バックの色 -- */
	color:#666;
	 font-size:1.4em;
	 background-color:#ffa;
	 width:70%;
	 margin-left:0;	 
 }

 p.lesson2 {			/* -- p12.p16のcafeK`sの「緑色が近くの教室のレッスン日です」の文字の色、バックの色 -- */
	color:#666;
	 font-size:1.2em;
	 background-color:#cfd;
	 width:70%;
	 margin-left:0;
 }


 p.lesson3 {			/* --lesspm3はイベント用。文字の色、バックの色 を変える-- */
	color:#666;
	 font-size:1.2em;
	 background-color:#cfd;
	 width:70%;
	 margin-left:0;
 }







div.hako a{
	text-decoration:none;
}
/* --------- 講師ここまで (スマートフォン用)------------- */

div.hako-link{
	width:70%;
	margin-top:5%;
	margin-left:10%;
	background-color:#fff;	
}

div.hako-link:hover{
	opacity:0.6;		/* --ホバーで写真が60%の薄さになる--- */
}

div.hako-link a{
	text-decoration:none;
}

div.hako2{
	width:80%;
	margin-left:auto;
	margin-right:auto;
	padding-left:5%;
	background-color:#fff;	
}

div.hako2 p img{
	border-radius: 2%;		/*-- 角に丸み --*/
}



div.hako4{		/*-- P1の一番下dlにしか使用してないようだ --*/
	width:60%;
	margin-left:auto;
	margin-right:auto;
	background-color:#fff;	
}

div.hako4 p{
	font-size:0.8em;
	margin-top:5%;
}

div.hako5{
	width:40%;
	border:solid 5px #eff;
}

div.otoiawase{
	width:45%;
	margin-top:5%;
	margin-left:auto;
	margin-right:auto;
}

div.otoiawase p:hover{
	opacity:0.7;
}

div.modoru{
	width:45%;
	margin-top:10%;
	margin-left:auto;
	margin-right:auto;
}

div.modoru:hover{
	opacity:0.7;	
}

div.back {				/* --右下の上に戻るボタン-- */
	 position:fixed;
 	bottom:1%;
	 right:2%;
	 padding:0.5% 1.5%;
	background-color:rgba(0,160,255,0.1);  /* --右端の0.　が透明の指示-- */
}

div.back a{
	font-size:1.4em;
	text-decoration:none;
}

div.back a:hover{
	 color: #09f;
	background-color:#bdf;
}


/* --クラス+　span　　スパンタグ(スマートフォン用)---- */
 .blue{
	font-size:120%;
	color: #fff;
 }
/* ----スパンタグここまで--------- */
/* ----------------クラス分けbox　ここまで------------ */


/* ---------　footer　(スマートフォン用)----------- */
div#footer{
	width:100%;
	background-color:#e5ffff;
	margin-left:auto;
	margin-right:auto;
}

address{
	width:50%;
	margin-right:auto;
	margin-left:auto;
	color:#66f;
} /* -----footerここまで--------- */


/* --------　　footer_nav　(スマートフォン用)---------- */
div#footer_nav{
	width:100%;
	padding:3% 0 3% 0;
}

div#footer_nav ul{
	width:80%;
	margin-right:auto;
	margin-left:auto;
}

div#footer_nav li{
	display:inline;
	margin:0 1% 0 1%;
}

div#footer_nav li a{
	color:#88f;
}

div#footer_nav li a:hover{
	color:#aaf;
	text-decoration:none;
}
/* -----footer_navここまで--------- */


/* -------------------------------
　		p1　トップページ  index(スマートフォン用) 
　----------------------------- */
body#index{
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

div#main-index{
	width:60%;
	margin-left:auto;
	margin-right:auto;
}

div.hako2-index{
	margin-left:auto;
	margin-right:auto;
	padding-left:5%;
	background-color:#fff;	
}

/* -----　p1　定義リスト ------------ */
dl{							/* -- 下のお知らせ -- */
	font-size:80%;
	border:solid 1px #bbc;		/* -- px -- */
	height:500px;			/* -- px -- */
	overflow:auto;
	padding:0 6% 0 6%;
	margin-top:3%;		/* -- 上のh3との間 -- */
	margin-left:auto;
	margin-right:auto;
	margin-bottom:5%;
}

dl dt{
	border:solid 1px #88a;
}

/*--dtとddはdl[教室で制作した、、、]内の画像と文章--*/
dt{
	margin-top:10px;
		color:#779;
}

dd{
	color:#666;
	margin-bottom:5%;
} /* ----------------定義リスト　ここまで------- */

/* ------画像にカーソルがのると枠付きに------- */
div.hako-waku img {
	border:solid 1px #fff;
	border-radius: 6px;		/*-- 角に丸み --*/
		margin-top:50px;
}

div.hako-waku img:hover {
	border:solid 1px #8af;
	opacity:0.8;	/* --ホバーで写真が80%の薄さに--- */
	border-radius: 6px;		/*-- 角に丸み --*/
} /* -----p1 トップページここまで----------- */


/* --p2　Arrange-schoolアレンジ教室(スマートフォン用) - */
div.box-2 {

	background-color:#07f;	
	
	width:90%;
	margin:50px 10px 0 10px;
	padding:0px;
	border:solid 1px #acf;
	border-radius: 6px;/*-- 角に丸み --*/	

} 

div.box-2 p {
	font-size:0.8em;
	margin:10px 0px 10px 30px ;
	color:#fff;
}

p.kousi {		/*-- 文字とバックの色 p2. --*/
	 color: #000;	/*-- div.box-2 pが優先されてる --*/
	 font-size:100%;/*-- div.box-2 pが優先されてる --*/
	 background-color:#ec3;
	 width:67%;
 }/* ------p2ではp.kousiは使われてない---------- */
 
/* ------p2 アレンジ教室　ここまで---------- */


/* ---p3　生徒さんの作品 (スマートフォン用)----- */
body#sakuhin h3{
	width:100%;
	border:solid 1px #cdd;	

    border-radius: 6px;	/*-- 角に丸み --*/
}

body#sakuhin otoiawase {
 	display: inline-block;
}

div.box-1{
 	display: inline-block;
	width:380px;
	margin:50px 20px 0 20px;
	padding:20px;
	border:solid 1px #8af;
	border-radius: 6px;/*-- 角に丸み --*/	
} /* ------ 生徒さんの作品　ここまで---------- */


/* -----P4　体験レッスン(スマートフォン用) ------ */
body#taiken .hako2 img{			/* ハサミと下の花3点 */
	border:solid 1px #cdd;
	margin-right:3%;	
} /*------- 体験レッスン　ここまで ------*/


/* ---P5　検定レッスン(スマートフォン用)----- */
body#kentei .hako2 img{			/* 図と花3点 */
	border:solid 1px #cdd;
	margin:8% 0 0 0;
} /*------- 検定レッスン　ここまで ------*/


/* -----p9　お問い合わせ(スマートフォン用) ------- */
body#otoiawase p{
	font-size:0.7em;
} /* ------お問い合わせ　ここまで---------- */


/* -----p19　サイトマップ(スマートフォン用)---- */
body#sitemap #contents li{
	margin-top:25px;		/* -- px -- */
	font-size:0.8em;
		color:#666;
}

body#sitemap .hako2 ul{
	margin-left:50px;		/* -- px -- */
} /* ---------サイトマップ　ここまで-------- */


/* ------　p20　tokutei　特定商取引法に基づく --- */

body#tokutei th{
	width:30%;
} /* -----特定商取引法に基づく　ここまで-------- */


}/* -- 画面幅768px以下、スマホ用CSSここまで--*/






/*----------------------------------------------------------
			 画面幅768pxを超えるPC用 CSS。 
--------------------------------------------------------------*/
@media only screen and (min-width: 768px)  {

h1{
	width:60%;
	font-size:1.5em;
	color:#358;
	background-color:#fff;
	border:solid 1px #48a;
	padding:1% 5%;
	margin-top:3%;
	margin-left:auto;
	margin-right:auto;		
	line-height:2;		/*-- 文章の行間を開ける --*/
    border-radius: 7px;			/*-- 角に丸み --*/
}

h2{
	width:70%;
	font-size:1.3em;
	color:#aaa;			/*-- 文字の色が変わらない --*/
	border:solid 1px #fff;		/*-- 白枠にしてhover時写真がぶれない --*/
	margin-top:3%;
	margin-left:auto;
	margin-right:auto;	
	line-height:2;		/*-- 文章の行間を開ける --*/
	padding:2% 5%;
    border-radius: 5px;		/*-- 角に丸み --*/
}

h2:hover{
	border:solid 1px #9be;
	/*-- ここにopacityを入れるとhover時写真がぶれる --*/
}

h2 a{
	text-decoration:none;
}

h3{			/*--- h3は特別開催の日時のページのみ ---*/
	font-size:1.8em;
	color:#b05;
}

h4{			/*---h3から h4にしてみる。特別開催の日時のページのみ ---*/
	font-size:1.8em;
	color:#b05;
}

p{
	font-size:1em;
	color:#666;
	line-height:1.8;/* -- 行間を広げる -- */
	letter-spacing:0.1em;	/* -- 字間を広げる -- */
	margin-left:auto;
	margin-right:auto;
}
	
p#summary{
	font-size:1em;
	font-family:verdana,helvetica,sans-serif;
	margin-bottom:20px;/* -- px -- */
	padding:10px;	/* -- px -- */
}


/* --------------------------------------
　　　　　　table　　テーブル(PC用)
------------------------------------- */
table{
	margin-top:3%;
	width:100%;
	border:none;		/* -- 外枠の罫線、無くす -- */
	border-collapse:separate;	/* -- ラインを離す -- */
	border-spacing:1%;			/* -- 離す距離 -- */
}

th{						/* -- 講師紹介のテーブル -- */
	width:10%;
	color:#666;
	font-size:1.2em;
	background-color:#eff;
	border:solid 2px #cff;		/* -- 内枠の水色 -- */
	padding:25px 0;			/* -- px -- */
	text-align:center;	/* -- 文字の中ぞろえ -- */
}

td{		/*-- テーブルのアレンジ教室を仕切っている --*/
	font-size:1em;
	color:#666;	
	border:solid 1px #daeaea;		/* -- 内枠の色（グレー） -- */
	line-height:3;		/* -- 行間を広げる -- */
}

/* ----テーブルここまで-- カレンダーのテーブルは下のクラスの中に入っている -- */


/* --------------------------------------
　　　　　　h_nav　　ヘッダーナビ(PC用)
------------------------------------- */
div#h_nav{
	width:100%;
	border-bottom:solid 1px #def;
	background-color:rgba(255,255,255,0.7);  /* --右端の0.　が透明の指示-- */
	position:fixed;   /* --上に固定する */
}

div#h_nav li{
	display:inline;
}

div#h_nav li a{
	text-decoration:none;
	font-family:verdana,helvetica,sans-serif;
	color:#000;
	font-size:0.9em;
	margin-left:1%;	/* ----ヘッダーナビボタンの間----- */
}

/* --上のヘッダーにカーソルが乗ったとき-- */
div#h_nav li a:hover{
	color:#fff;
	background-color:rgba(0,100,200,0.3);  /* --右端の0.　が透明の指示-- */
} /* ----h_nav　ここまで---------------- */


/* --------------------------------------
　　　　ヘッダーナビ ドロップダウン(PC用)
------------------------------------- */

/* -------------共通部分----------------- */
.dropmenu{
  list-style-type: none;
  width: 100%;
}

.dropmenu:after{
  clear: both;
}

.dropmenu li{
  position: relative;
  width: 7.3%;				/* --文字の横幅-- */
  float: left;			/* --文字を横並びにする-- */
  text-align: center;
}

.dropmenu li a{
  display: block;
  padding: 5px 0 0 0;			/* -- px -- */
}

.dropmenu li ul{
  list-style: none;
  position: absolute;
  z-index: 9999;
  top:100%;			/* --ドロップダウンで出てくる一番上の文字の頭の隙間-- */
}

.dropmenu li ul li{
  width:100%;	 
}

.dropmenu li ul li a{
  margin-top:3px;
  box-shadow: 1px 1px #8aa; /*-- 影を付ける --*/
  	background-color:rgba(255,255,255,1);  /* --右端の0.　が透明の指示,ロリポップでは全く反応しない。- */
} /* --ドロップダウンメニュー間に隙間を開けるため-- */


/* --ふんわりとフェードイン(PC用)-- */
#fade-in li ul{
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
}

#fade-in li:hover ul{
  visibility: visible;
  opacity: 1;
}

#fade-in li ul li a{
  visibility: hidden;
  opacity: 0;
  transition: 1s;
}

#fade-in li:hover ul li a{
  visibility: visible;
  opacity: 1;
} /* ---ふんわりとフェードイン。ここまで----- */

/* --------------------------------------
　　　　　header　　上の写真(PC用)
------------------------------------- */
div#header{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-top:2%;		/*-- 上のナビボタンと写真が重ならないための空間づくり --*/
}

div#header p{
	margin-left:auto;
	margin-right:auto;
} /* ----header　ここまで------------------- */


/* --------------------------------------
　　　コンテナー用(PC用)
------------------------------------- */
div#container{
	width:100%;
	border:solid 1px #fff;		/*-- これを取ると形が崩れる --*/
	margin-left:auto;
	margin-right:auto;
	background-color:#f8ffff;
} /* ----コンテナーここまで------------- */


/* --------------------------------------
　　　　　コンテンツ(PC用)　
------------------------------------- */
div#contents{
	width:100%;
	margin-left:auto;
	margin-right:auto;
} /* ----コンテンツ　ここまで-------- */


/* --------------------------------------
　　　　　メイン(PC用)
------------------------------------- */
div#main{
	width:100%;
	margin-left:auto;
	margin-right:auto;
} /* ----メイン　ここまで----------------- */


/* --------------------------------------
　　　　　class　クラス分け(PC用)
------------------------------------- */
/* -- p3のクラスは下 -- */
/* -- p10～p17 カレンダー --*/
table.design1{
	width:40%;
	display:inline-table;
	margin-right:5%;
}

table.design1 th{		/* -- カレンダーの年、月 -- */

	background-color:#eff;	
}

table.design1 td{
	text-align:center;	/* -- 文字の中ぞろえ -- */
}

td.color1{						/* -- 日曜日 -- */
	background-color:#fdf;		
}
td.color2{						/* -- 月～金 -- */
	background-color:#eef;		
}
td.color3{						/* -- 土曜日 -- */
	background-color:#dff;		
}
td.color4{					/* -- レッスン日 黄色 -- */
	background-color:#ffb;		
}
td.color5{					/* -- レッスン日 緑色 -- */
	background-color:#cfd;		
}
/* --------- カレンダーここまで(PC用) ------------------- */


p.kousi {		/*-- 文字とバックの色p1.p2. --*/
	 color: #000;
	 font-size:100%;
	 background-color:#ee6;
	 width:67%;
 }
 
  p.kousi2 a:hover{		/*-- 各教室p10～講師の写真 --*/
 	opacity:0.8;
	color:#66c;
	text-decoration:none;
 }
 
 p.lesson {			/* -- p10～p17各教室の「黄色がレッスン日です」の文字の色、バックの色 -- */
	color:#666;
	 font-size:1.4em;
	 background-color:#ffa;
	 width:70%;
	 margin-left:0;
	 
 }

 p.lesson2 {			/* -- p12.p16のcafeK`sの「緑色が近くの教室のレッスン日です」の文字の色、バックの色 -- */
	color:#666;
	 font-size:1.2em;
	 background-color:#cfd;
	 width:70%;
	 margin-left:0;
 }
 
 
 
 p.lesson3 {			/* --lesspm3はイベント用。文字の色、バックの色 を変える-- */
	color:#666;
	 font-size:1.2em;
	 background-color:#aff;
	 width:70%;
	 margin-left:0;
 }


 
 
 
 
 
 
 
div.hako{			/* -- p7 講師のページで使ってる -- */
	width:80%;
	border:solid 5px #eff;
	margin-left:auto;
	margin-right:auto;
	background-color:#fff;
}


div.hako a{
	text-decoration:none;
}
		/* -- 講師ここまで(PC用) -- */

div.hako-link{
	width:70%;
	margin-top:5%;
	margin-left:10%;
	background-color:#fff;	
}

div.hako-link:hover{
	opacity:0.6;		/* --ホバーで写真が60%の薄さになる--- */
}

div.hako-link a{
	text-decoration:none;
}

div.hako2{
	width:80%;
	margin-left:auto;
	margin-right:auto;
	padding-left:5%;
	background-color:#fff;	
}

div.hako2 p img{
	border-radius: 2%;		/*-- 角に丸み --*/
}



div.hako4{		/*-- P1の一番下dlにしか使用してないようだ --*/
	width:60%;
	margin-left:auto;
	margin-right:auto;
	background-color:#fff;	
}

div.hako4 p{
	font-size:0.8em;
	margin-top:5%;
}

div.hako5{
	width:40%;
	border:solid 5px #eff;
}

div.otoiawase{
	width:45%;
	margin-top:5%;
	margin-left:auto;
	margin-right:auto;

}

div.otoiawase p:hover{
	opacity:0.7;
}

div.modoru{
	width:45%;
	margin-top:10%;
	margin-left:auto;
	margin-right:auto;

}

div.modoru:hover{
	opacity:0.7;	
}

div.back {				/* --右下の上に戻るボタン-- */
	 position:fixed;
 	bottom:1%;
	 right:2%;
	 padding:0.5% 1.5%;
	background-color:rgba(0,160,255,0.1);  /* --右端の0.　が透明の指示-- */
}

div.back a{
	font-size:1.4em;
	text-decoration:none;
}

div.back a:hover{
	 color: #09f;
	background-color:#bdf;
}


/* --------------------------------------
　　　　　クラス+　span　　スパンタグ(PC用)　
------------------------------------- */

 .blue{
	font-size:130%;
	color: #78c;
 }/* -----span　　スパンタグここまで--------- */

/* ----クラス分けbox　ここまで------------ */


/* --------------------------------------
　　　　　footer(PC用)　
------------------------------------- */
div#footer{
	width:100%;
	background-color:#e5ffff;
	margin-left:auto;
	margin-right:auto;

}

address{
	width:50%;
	margin-right:auto;
	margin-left:auto;
	color:#66f;
}/* -----footerここまで--------- */


/* --------------------------------------
　　　　　footer_nav(PC用)　
------------------------------------- */
div#footer_nav{

	width:100%;
	padding:3% 0 3% 0;
}

div#footer_nav ul{

	width:80%;
	margin-right:auto;
	margin-left:auto;
}

div#footer_nav li{
	display:inline;
	margin:0 1% 0 1%;
}

div#footer_nav li a{
	color:#88f;
}

div#footer_nav li a:hover{
	color:#aaf;
	text-decoration:none;
} /* -----footer_navここまで--------- */


/* --------------------------------------
　　　　p1　トップページ  index(PC用)
------------------------------------- */
body#index{
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

div#main-index{
	width:60%;
	margin-left:auto;
	margin-right:auto;
}

div.hako2-index{
	margin-left:auto;
	margin-right:auto;
	padding-left:5%;
	background-color:#fff;	
}

/* --------------------------------------
　　　　　p1　定義リスト(PC用)
------------------------------------- */

dl{							/* -- 下のお知らせ -- */
	font-size:80%;
	border:solid 1px #bbc;		/* -- px -- */

	height:500px;			/* -- px -- */
	overflow:auto;
	padding:0 6% 0 6%;
	margin-top:3%;		/* -- 上のh3との間 -- */
	margin-left:auto;
	margin-right:auto;
	margin-bottom:5%;
}

dl dt{
	border:solid 1px #88a;
}

/*--dtとddはdl[教室で制作した、、、]内の画像と文章--*/
dt{
	margin-top:10px;
		color:#779;
}

dd{
	color:#666;
	margin-bottom:5%;
}/* ----------------定義リスト　ここまで------- */


/* ------画像にカーソルがのると枠付きに------- */
div.hako-waku img {
	border:solid 1px #fff;
	border-radius: 6px;		/*-- 角に丸み --*/
		margin-top:50px;
}

div.hako-waku img:hover {
	border:solid 1px #8af;
	opacity:0.8;	/* --ホバーで写真が80%の薄さに--- */
	border-radius: 6px;		/*-- 角に丸み --*/
}/* -----トップページここまで----------- */


/* --------------------------------------
　　　　p2　Arrange-school アレンジ教室(PC用)
------------------------------------- */

div.box-2{
 	display: inline-block;
	width:440px;
	margin:50px 0px 0 20px;
	padding:20px 20px 20px 40px;
	border:solid 1px #acf;
	border-radius: 6px;/*-- 角に丸み --*/	
	
}

div.box-2:hover{
	opacity:0.8;	/* --ホバーで写真が80%の薄さに--- */
	border:solid 1px #35a;
	border-radius: 6px;/*-- 角に丸み --*/
}/* ------アレンジ教室　ここまで---------- */


/* --------------------------------------
　　　　p3　生徒さんの作品(PC用)
------------------------------------- */

body#sakuhin h3{
	width:50%;
	border:solid 1px #cdd;	
	margin-left:auto;
	margin-right:auto;
    border-radius: 6px;	/*-- 角に丸み --*/
}

body#sakuhin otoiawase {
 	display: inline-block;
}

div.box-1{
 	display: inline-block;
	width:380px;
	margin:50px 20px 0 20px;
	padding:20px;
	border:solid 1px #8af;
	border-radius: 6px;/*-- 角に丸み --*/	
}/* ------ 生徒さんの作品　ここまで---------- */


/* --------------------------------------
　　　P4　体験レッスン(PC用)
------------------------------------- */
body#taiken .hako2 img{			/* ハサミと下の花3点 */
	border:solid 1px #cdd;
	margin-right:3%;	
}/*------- 体験レッスン　ここまで ------*/


/* --------------------------------------
　　　P5　検定レッスン(PC用)
------------------------------------- */
body#kentei .hako2 img{			/* 図と花3点 */
	border:solid 1px #cdd;
	margin:8% 0 0 0;
}/*------- 検定レッスン　ここまで ------*/


/* --------------------------------------
　　　　p9　お問い合わせ(PC用)
------------------------------------- */

body#otoiawase p{
	font-size:0.7em;
}/* ------お問い合わせ　ここまで---------- */


/* --------------------------------------
　　　　p19　サイトマップ(PC用)
------------------------------------- */

body#sitemap #contents li{
	margin-top:25px;		/* -- px -- */
	font-size:0.8em;
		color:#666;
}

body#sitemap .hako2 ul{
	margin-left:50px;		/* -- px -- */
}/* ---------サイトマップ　ここまで-------- */


/* --------------------------------------
　　　　p20　tokutei　特定商取引法に基づく(PC用)
------------------------------------- */

body#tokutei th{
	width:30%;
}/* --------特定商取引法に基づく　ここまで-------- */

}/* --- 画面幅768pxを超えるPC用 CSSここまで------- */