@charset "UTF-8";

* {margin: 0; padding: 0; } /* 全てのプロパティの余白とパディングをリセットしています。*/

body			{
	margin: 0;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	color: #333333;
}

h1				{font-size: 1.5em;}

h2				{font-size: 1.2em;}

h3				{font-size: 1.0em;}

p				{font-size: 0.95em;}

a				{
	color: #996600;
	text-decoration: none;
}

.font08				{font-size: 0.8em;}
.font06				{font-size: 0.6em;}

/* インデント */
.ind01			{padding-left: 0.95em;}
.ind02			{padding-left: 1.9em;}
.ind03			{padding-left: 2.85em;}	
.hn3			{padding-left: 1.9em;}
.u-hn3			{padding-left: 1.9em;}
.hn4			{padding-left: 1.9em;}
.u-hn4			{padding-left: 0.95em;}
.jisage01		{padding-left: 2.29em;
				text-indent: -2.29em;}

/* color */
.color-maroon	{color: #800000}
.color-lightmaroon
				{color: #BA3535}
.color-bage		{color: #F9EFCF}				
.color-orange	{color: #FF5E19}
.color-yellow	{color: #ffd119}

/* フォント */
.font-normal	{font-weight: normal}

/* 宝塚リテラってどんなところ？ */
.flow			{padding-top: 1.9em;
				padding-left: 1.9em;
				padding-right: 1.9em;
				padding-bottom: 0.95em;
				margin-bottom: 0.95em;
				max-width: 360px;
				background-color: #f9efcf;
				font-weight: 600; }

.arrow			{padding-left: 1.9em;
				font-size: 1.5em;
				color: #ff5e19;}


/* ヘッダー */
.header			{margin: 0;}

.headimg		{width: 100%;/* PC・大きいタブレット用 */
				height: auto;
				vertical-align: bottom;}
				
.headimg_s		{width: 100%;/* スマホ・小さいタブレット用 */
				height: auto;
				vertical-align: bottom;}

.sitetitle		{color: #ffffff}

/* ヘッダー画像にサイト名を重ねる */
.header-inner	{position: relative;}

.sitetitle		{position: absolute;
				bottom:3%;
				left: 10%;}

/* ページトップ画像 */
.topimg			{width: 100%;
				height: auto;
				vertical-align: bottom;}

/* ########## トップページ ここから ↓ ########## */
				
/* 説明 */
.headline		{margin-top: 0;
				margin-bottom: 20px;
				padding-left: 20px;
				border-left: solid 16px #800000;
				font-size: 1.5em;
				font-weight: ;}

.intro p		{margin-top: 0;
				margin-bottom: 20px;}



/* 概要 */
.sumimg			{width: 100%;
				height: auto;}

.summary		{background:;}

.summary a		{display: block;
				background-color:;
				text-decoration: none;}
				
.summary a:hover
				{opacity: 0.7}
				
.summary h2		{margin-top: 0;
				margin-bottom: 0;
				padding-top: 5px;
				padding-bottom: 5px;
				text-align: center;
				color: #222222;
				font-size: 1.2em;
				font-weight: 600;}
			
.naiyou p a		{text-decoration: none;}

.naiyou p		{margin-top: 0;
				margin-bottom: 0;
				padding:15px;
				background-color: ;}

/* サイド メニュー */
.sub-nav ul		{margin: 0;
				padding: 0;
				list-style: none;}

.sub-nav li a	{display: block;
				margin-bottom: 10px;
				padding: 10px;
				border-radius: 4px;
				font-size: 1.0em;
				text-decoration: none;}

.sub-nav li a:hover
				{opacity : 0.7;}/* カーソルが乗った時 *//* 背景色 */

.sub-nav-guidance
				{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#faf2d8+25,f9efcf+75,f2e6c1+100 */
				background: #faf2d8; /* Old browsers */
				background: -moz-linear-gradient(top,  #faf2d8 25%, #f9efcf 75%, #f2e6c1 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top,  #faf2d8 25%,#f9efcf 75%,#f2e6c1 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom,  #faf2d8 25%,#f9efcf 75%,#f2e6c1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faf2d8', endColorstr='#f2e6c1',GradientType=0 ); /* IE6-9 */}	

.sub-nav-lesson
				{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#faf2d8+25,f9efcf+75,f2e6c1+100 */
				background: #faf2d8; /* Old browsers */
				background: -moz-linear-gradient(top,  #faf2d8 25%, #f9efcf 75%, #f2e6c1 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top,  #faf2d8 25%,#f9efcf 75%,#f2e6c1 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom,  #faf2d8 25%,#f9efcf 75%,#f2e6c1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faf2d8', endColorstr='#f2e6c1',GradientType=0 ); /* IE6-9 */}	


.sub-nav-teacher 	{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#faf2d8+25,f9efcf+75,f2e6c1+100 */
				background: #faf2d8; /* Old browsers */
				background: -moz-linear-gradient(top,  #faf2d8 25%, #f9efcf 75%, #f2e6c1 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top,  #faf2d8 25%,#f9efcf 75%,#f2e6c1 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom,  #faf2d8 25%,#f9efcf 75%,#f2e6c1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faf2d8', endColorstr='#f2e6c1',GradientType=0 ); /* IE6-9 */}

.sub-nav-exam	{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#faf2d8+25,f9efcf+75,f2e6c1+100 */
				background: #faf2d8; /* Old browsers */
				background: -moz-linear-gradient(top,  #faf2d8 25%, #f9efcf 75%, #f2e6c1 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top,  #faf2d8 25%,#f9efcf 75%,#f2e6c1 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom,  #faf2d8 25%,#f9efcf 75%,#f2e6c1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faf2d8', endColorstr='#f2e6c1',GradientType=0 ); /* IE6-9 */}

.sub-nav-nigate	{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#faf2d8+25,f9efcf+75,f2e6c1+100 */
				background: #faf2d8; /* Old browsers */
				background: -moz-linear-gradient(top,  #faf2d8 25%, #f9efcf 75%, #f2e6c1 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top,  #faf2d8 25%,#f9efcf 75%,#f2e6c1 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom,  #faf2d8 25%,#f9efcf 75%,#f2e6c1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faf2d8', endColorstr='#f2e6c1',GradientType=0 ); /* IE6-9 */}
	
.sub-nav i		{margin-right:10px;
				font-size: 1.9em;
				vertical-align: middle;}
				

/* お知らせ */
.sub-2			{padding-bottom: 20px;}

.update 		{width: auto; /* 新着情報エリアの幅 */
				font-size: 90%;
				padding:20px;
				border: solid 2px #BA3535;}

/* --- 見出し --- */
.update h2 		{margin: 0 0 5px; /* 見出しのマージン（上、左右、下） */
				}

/* --- 新着リスト --- */
.update dl 		{width: 100%; /* 新着リストの幅 */
				margin: 0;
				border-top: 1px #F9EFCF dotted; /* 新着リストの上境界線 */}

/* --- 日付エリア --- */
.update dt 		{width: 6.7em; /* 日付エリアの幅 */
				float: left;
				padding: 7px 0 6px 3px; /* 日付エリアのパディング（上右下左） */
				line-height: 120%;}

/* --- 本文エリア --- */
.update dd 		{margin: 0;
				padding: 7px 3px 6px 6.6em; /* 本文エリアのパディング（上右下左） */
				border-bottom: 1px #F9EFCF dotted; /* 本文エリア下境界線 */
				line-height: 120%;
				}

/* --- clearfix --- */
.clearFix:after {content: ".";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;}

.clearFix {min-height: 1px;}




/* ########## トップページ ここまで ↑ ########## */

				
/* ########## コンテンツページ ここから ↓ ########## */

/* パンくずリスト */
.bread			{margin-bottom: 20px;}

.bread ol		{margin: 0;
				padding: 0;
				list-style: none;}

.bread li a		{display: inline-block;
				padding: 0px;
				color: #000000;
				font-size: 0.75em;
				text-decoration: none;}

.bread li a:hover
				{background-color: #F9efcd;}
				
.bread ol:after	{content: "";
				display: block;
				clear: both;}

.bread li		{float: left;
				width: auto;}
				
.bread li:after	{content: '\003e';
				margin-left: 10px;
				margin-right: 10px;
				color: #888888;}

/* 記事 */
.kiji h1		{margin-top: 0;
				margin-bottom: 20px;
				padding-left: 20px;
				border-left: solid 16px #800000;
				font-weight: normal;}

.kiji .lead		{max-width: 100%;
				font-size: ;
				color: #666666;}

.kiji h2		{margin-top: 40px;
				margin-bottom: 20px;
				padding-left: 10px;
				border-bottom: solid 1px #BA3535;}

	

.kiji h3		{margin-top: 20px;
				margin-bottom: 10px;}

.kiji h4		{margin-top: 20px;
				margin-bottom: 10px;
				font-weight: normal;
				border-bottom: solid 1px #F9EFCF;}

				
.kiji p			{margin-top: 0;
				margin-bottom: 20px;}

/* お問い合わせフォーム */
.formWrap {
	width: auto;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;}
	
table.formTable{
	width:100%;
	margin:0 auto;
	
	border-collapse:collapse;}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;}
	
table.formTable th{
	width:35%;
	font-weight:normal;
	background:#efefef;
	text-align:left;}
	
.check {text-align: center;}

/* サイドメニュー */
.sidemenu		{border: solid 6px #F9EFCF;}

.sidemenu ul	{margin: 0;
				padding: 0;
				list-style: none;}
				
.sidemenu li a	{display: block;
				padding: 10px;
				border-top:solid 1px #F9EFCF;
				color: #000000;
				font-size: 0.8em;
				text-decoration: none;}

.sidemenu li a:hover
				{background : #F9EFCF;}/* カーソルが乗った時 *//* 背景色 */
				
/* もどる */
.back			{text-align: right}
.back a:hover	{color: #FF5E19;}

/* ########## コンテンツページ ここまで ↑ ########## */

/* ボックスの横幅を揃える *//* （※画面いっぱいに表示するボックス ： header, .nav, .pageimage, .footer ） */
.intro, .pickup, .sub, .container, .footer-inner
				{width: 90%;
				margin-right: auto;
				margin-left: auto;}
				
/* ボックス の上下 */
.header			{padding-top: 0;
				padding-bottom: 0;
				width: 100%;}
				
.intro			{padding-top: 20px;
				padding-bottom: 10px;}
				
.pickup			{padding-top: 20px;}

.pickup-1, .pickup-2, .pickup-3
				{padding-bottom: 10px;}
				
.sub-1			{padding-bottom: 20px;}

.container		{padding-top: 25px;
				padding-bottom: 25px;}

/* コピーライト */
.copyright		{padding-left: 7%;}

.copyright p	{margin: 0;
				color: #ffffff;
				font-size: 0.75em;}

/* フッター をバーの形にする */
.footer			{padding-top: 15px;
				padding-bottom: 15px;
				background-color: #800000;}
				
.footer-inner	{padding-left:;
				background-color: #800000;}

/* フッター をバーの形にする TER */
.footer-inner_ter	{padding-top: 15px;
					padding-bottom: 15px;
					background-color: #464646;}

.footer_ter			{padding-left:;
					background-color: #464646;}

/* TER h1 h2 の設定（うまくいってない） */
.tercontact		{margin-top: 0;
				margin-bottom: 20px;
				padding-left: 20px;
				font-weight: normal;}

.tercontactform
				{margin-top: 40px;
				margin-bottom: 20px;
				padding-left: 10px;
				border-bottom: solid 1px #464646;}

/* ########## 359px以下 ########## */
@media (max-width: 359px){


}/* ########## 359px以下 ここまで ########## */


/* ########## 599px以下 ########## */
@media (max-width: 599px){

img {max-width: 100%; height: auto;}/* タブレットでは画像（幅）を画面サイズで表示 */

/* ヘッダー画像の切り替え */
.headimg 		{display: none;}/* PC・大きいタブレット用をOff */

/* サイト名の表示 */
.sitetitle		{left: 3%;/* ヘッダー画像に重なるサイト名の位置 */
				font-size: 1.2em;}/* ヘッダー サイト名 フォントサイズ */

/* ナビゲーション 縦並び */
.menu ul		{margin: 0;
				padding: 0;
				list-style: none;}
				
.menu li a		{display: block;
				padding: 5px 5px 5px 10px;
				background: #800000;
				color: #ffffff;
				font-size: 0.8em;
				text-decoration: none;}

.menu li a:hover
				{background : #BA3535;}

.menu li		{margin-bottom: 2px;}

.menu-top		{margin-top: 2px;}

/* トップページ 画像の切り替え */
/* お知らせ */
.update 		{font-size: 70%;
				padding:12px;
				border: solid 2px #BA3535;}
				
/* --- 日付エリア --- */
.update dt 		{width: 5.0em; /* 日付エリアの幅 */
				float: left;
				padding: 7px 0 6px 3px; /* 日付エリアのパディング（上右下左） */
				line-height: 120%;
				font-size:90%}

/* --- 本文エリア --- */
.update dd 		{margin: 0;
				padding: 7px 3px 6px 6.0em; /* 本文エリアのパディング（上右下左） */
				border-bottom: 1px #F9EFCF dotted; /* 本文エリア下境界線 */
				line-height: 120%;}

/* 宝塚リテラとは 画像の切り替え */
/* リテラってどんなところ？ 画像の切り替え */
/* レッスン 画像の切り替え */

/* お問い合わせ フォームの切り替え */
.formWrap		{display: none}
.formlist ul	{list-style: none;}	
.formWrap_s 	{color:#555;
				line-height:200%;
				font-size:90%;}

/* アクセス 画像の切り替え */


}/* ########## 599px以下 ここまで ########## */


/* ########## 600px以上 ########## */
@media (min-width: 600px){

/* ヘッダー画像の切り替え */
.headimg_s 		{display: none;}/* スマホ・小さいタブレット用をOff */

/* ヘッダー サイト名 フォントサイズ */
.sitetitle		{font-size: 1.5em;}

/* ナビゲーション */
.nav			{
				/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc9999+0,b26666+17,993232+32,800000+67,660000+83,4c0000+100 */
				background: #cc9999; /* Old browsers */
				background: -moz-linear-gradient(top,  #cc9999 0%, #b26666 17%, #993232 32%, #800000 67%, #660000 83%, #4c0000 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top,  #cc9999 0%,#b26666 17%,#993232 32%,#800000 67%,#660000 83%,#4c0000 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom,  #cc9999 0%,#b26666 17%,#993232 32%,#800000 67%,#660000 83%,#4c0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc9999', endColorstr='#4c0000',GradientType=0 ); /* IE6-9 */
				/* gradient　ここまで */
				font-family: ;
				width: 100%;
				line-height: 40px;
				margin-top: 0;
				margin-bottom: 0;}

.menu ul		{width: 90%; /* リスト部分の幅（必要に応じて調整） */
				margin: 0 auto;
				list-style: none;     
				overflow: hidden;}


.menu li a		{
				display: block;
				border-right: 2px solid #440000;
				border-top: none;
				border-bottom: none;
				color: #ffffff;
				font-size: 0.7em; /* フォントサイズ(必要に応じて調整） */
				font-weight: 600;
				text-decoration: none;
				text-align: center;}

.menu li.menu-top a
				{border-left: 2px solid #440000;}/* 「トップ」左ボーダーの指定 */
 
.menu li a:hover
				{background-color: #BA3535;}

.menu ul:after	{content: "";
				display: block;
				clear: both;}
				
.menu li		{float: left;
				display:inline;
				width: 16.6%;
				line-height: 40px;
				padding: 0px;
				position: relative;}

/* 宝塚リテラとは 画像の切り替え */
/* リテラってどんなところ？ 画像の切り替え */
/* レッスン 画像の切り替え */

/* お問い合わせ フォームの切り替え */
.formWrap_s		{display: none}

/* アクセス 画像の切り替え */



}/* ########## 600px以上 ここまで ########## */

/* ########## 767px 以下 ########## */
@media (max-width: 767px){

/* タブレットサイズ用の調整 */

/* フォントサイズ */
h1				{font-size: 1.2em;}

h2				{font-size: 1.0em;}

h3				{font-size: 0.95em;}

p				{font-size: 0.9em;}

/* インデント */
.ind01			{padding-left: 0.9em;}
.ind02			{padding-left: 1.8em;}
.ind03			{padding-left: 2.7em;}	
.hn3			{padding-left: 1.8em;}
.u-hn3			{padding-left: 1.8em;}
.hn4			{padding-left: 1.8em;}
.u-hn4			{padding-left: 0.9em;}
.jisage01		{padding-left: 2.17em;
				text-indent: -2.17em;}



/* トップページの見出し フォントサイズ */
.headline		{font-size: 1.2em;}

/* パンくずリスト フォントサイズ */
.bread li a		{font-size: 0.7em;}

/* ナビゲーション の調整 */
.menu li a		{font-size: 0.6em;}/* フォントサイズ（ナビゲーションバーの形が崩れないよう調整） */

.menu ul		{width: 100%;/* リスト部分の幅（ナビゲーションバーの形が崩れないよう調整） */
				margin: 0 auto;
				list-style: none;     
				overflow: hidden;}

/* リテラってどんなところ？ */
.flow			{padding-top: 1.8em;
				padding-left: 1.8em;
				padding-right: 1.8em;
				padding-bottom: 0.9em;
				margin-bottom: 0.9em;
				max-width: 320px;
				background-color: #f9efcf;
				font-weight: 600; }

.arrow			{padding-left: 1.8em;
				font-size: 1.2em;
				color: #ff5e19;}


}/* ########## 767px 以下 ここまで########## */


/* ########## 768px 以上 ########## */
@media (min-width: 768px){

.sitetitle		{font-size: 1.8em;}

/* intro の後の pickup が崩れないようにする設定（※不要かもしれない） */

.intro:after	{content:"";
				display: block;
				clear: both;}

/* pickup-1 と pickup-2 と pickup-3 を横に並べる設定 */
.pickup:after	{content:"";
				display: block;
				clear: both;}

.pickup-1		{float: left;
				width: 32%;
				margin-right: 2%;}

.pickup-2		{float: left;
				width: 32%;
				margin-right: 2%;}

.pickup-3		{float: left;
				width: 32%;}

/* sub-1 と sub-2 を横に並べる設定 */
.sub:after		{content: "";
				display: block;
				clear: both;}
				
.sub-1			{float: left;
				width: 32%;
				margin-right: 2%;}

.sub-2			{float: left;
				width: 66%;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;}

/* container-2 を container-1 の横に並べる設定 */
.container:after		
				{content: "";
				display: block;
				clear: both;}
				
.container-1	{float: right;
				width: 80%;
				padding-left: 50px;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;}

.container-2	{float: left;
				width: 20%;}
				
}/* ########## 768px以上 ここまで ########## */


/* ########### 800px以上 ########## */
@media (min-width: 800px){

/* ナビゲーション */
.menu ul		{width: 90%;/* リスト部分の幅（ナビゲーションバーの形が崩れないよう調整） */      
				margin: 0 auto;/
				list-style: none;     
				overflow: hidden;}

.menu li a		{
				display: block;/* （前は　display: inline; padding: 0 auto;　と書いていた） */
				border-right: 2px solid #440000;
				border-top: none;
				border-bottom: none;
				color: #ffffff;
				font-size: 0.75em;/* フォントサイズ（ナビゲーションバーの形が崩れないよう調整） */
				font-weight: 600;
				text-decoration: none;
				text-align: center;}
				
}/* ########## 800px以上 ここまで ########## */


/* ########## 1080px以上 ########## */
@media (min-width: 1080px){

/* ナビゲーション */
.menu ul		{width: 80%;/* リスト部分の幅 */
				margin: 0 auto;
				list-style: none;     
				overflow: hidden;}


.menu li a		{
				display: block;/* （前は　display: inline; padding: 0 auto;　と書いていた） */
				border-right: 2px solid #440000;
				border-top: none;
				border-bottom: none;
				color: #ffffff;
				font-size: 0.85em; /* フォントサイズ */
				font-weight: 600;
				text-decoration: none;
				text-align: center;}
				
}/* ########## 1080px以上 ここまで ########## */


/* ########## 1190px以上 ########## */
@media (min-width: 1190px){

/* 全体の横幅を揃える */ 
.intro, .pickup, .sub, .footer-inner, .container
				{width: 80%;
				margin-right: auto;
				margin-left: auto;}
				
/* ナビゲーション */
.menu ul		{width: 75%;/* リスト部分の幅 */
				margin: 0 auto;
				list-style: none;     
				overflow: hidden;}

.menu li a		{
				display: block;/* （前は　display: inline; padding: 0 auto;　と書いていた） */
				border-right: 2px solid #440000;
				border-top: none;
				border-bottom: none;
				color: #ffffff;
				font-size: 0.88em; /* フォントサイズ */
				font-weight: 600;
				text-decoration: none;
				text-align: center;}
				
}/* ########## 1190px以上 ここまで ########## */


/* ########## 1366px以上 ########## */
@media (min-width: 1366px){

/* ナビゲーション */
.menu ul		{width: 70%;/* リスト部分の幅 */      
				margin: 0 auto;
				list-style: none;     
				overflow: hidden;}

.menu li a		{
				display: block;/* （前は　display: inline; padding: 0 auto;　と書いていた） */
				border-right: 2px solid #440000;
				border-top: none;
				border-bottom: none;
				color: #ffffff;
				font-size: 0.88em; /* フォントサイズ */
				font-weight: 600;
				text-decoration: none;
				text-align: center;}
				
}/* ########## 1366px以上 ここまで ########## */

/* 覚書 */

/* !!!!!!!!!! サイトで使用しているカラー !!!!!!!!!! */
/* 
淡いピンクベージュ　#F9EFCF

*/