@charset "utf-8";


/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer_res, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

body {
	margin: 0px;
	padding: 0px;
	color: #030303;	/*全体の文字色*/
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 15px;	/*背景色*/
	-webkit-text-size-adjust: none;
	background-image: url(../img/common/washi-pattern1.jpg);
	background-repeat: repeat;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form{margin:0px;padding:0px;}
ul{list-style-type:none;}
img{border:none;max-width:100%;height:auto;}
table{border-collapse:collapse;font-size:100%;border-spacing:0;}
iframe{width:100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #0043D1;	/*リンクテキストの色*/
	-webkit-transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	transition: 0.5s;			/*同上*/
	text-decoration: none;
}
a:hover {
	color: #000080;			/*マウスオン時の文字色（全体）*/
}



/*ナビドロワーここから
---------------------------------------------------------------------------*/
#nav-drawer {
	position: fixed;
	top: 0;
	left: 0;
	height: 30px;
	width: 100%;
	padding-left: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-image: url(../img/common/mob-header-title.gif);
	background-position: center 0%;
	background-repeat: no-repeat;
	background-color: rgba(255,255,255,0.68);
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 3px;/*線の太さ*/
	width: 25px;/*長さ*/
	border-radius: 3px;
	background-color: #272727;
	display: block;
	content: '';
	cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;/*最前面に*/
	width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 160px;/*最大幅（調整してください）*/
	height: 100%;
	background-color: #232356;/*背景色*/
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);/*左に隠しておく*/
	padding-left: 10px;
	padding-top: 20px;
	padding-right: 10px;
}
#nav-content ul li {
	padding-bottom: 10px;
	padding-top: 10px;
	border-bottom: 1px dotted #FFFFFF;
	padding-left: 10px;
	color: #FFFFFF;
}

#nav-content ul li a{
	color: #FFFFFF;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}


/* 全体
------------------------------------------------------------*/
#wrapper{
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	padding-top: 0;
	padding-right: 1%;
	padding-left: 1%;
	padding-bottom: 50px;
	width: 98%;
	position: relative;
	overflow-y: hidden;
}
/* wrapperの幅を98%にして左右のpadを1％ずつ取ってる*/

.inner{
	margin: 0 auto;
	width: 100%;
}
/* クラスinnerの幅は外側の入れ物の100％*/


/*************
/* ヘッダー
*************/
#header{
	overflow: hidden;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
}
/*はみ出たテキストを表示させない*/

* html #header{height:1%;}
/*CSSのバグを回避？*/

#header h1{
	font-size: 11px;
	font-weight: normal;
	display: none;
}


/*************
/* ロゴ
*************/
#header .logo{
	float:left;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}









/**************************
　左のメニューここから
**************************/

.left_menu_btn ul li {
	margin-bottom: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #FFFFFF;
	background-color: #78003A;
	border-radius: 5px;
	font-size: 1.1em;
	padding-left: 20px;
}
#title-img .top_works {
	background-color: #000000;
	padding-top: 30px;
	padding-bottom: 30px;
}
#title-img .top_works img {
	bottom: 30px;
}
#title-img .top_calendar_text {
	text-align: left;
	font-weight: normal;
	font-size: 1.2em;
	padding-left: 10px;
	border-left: thick ridge #07088C;
	margin-left: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.top_calendar_text .top_calendar_ttl {
	font-size: 1.5em;
	color: #E40000;
}
.left_menu_btn ul li a {
	color: #FFFFFF;
}
.left_menu_btn ul li a:hover{
	color: #666;	/*文字色*/
}


/**************************
　左のメニューここまで
**************************/



/*mainコンテンツのh3タグの設定*/
.right_contents h3 {
	clear: both;
	margin-bottom: 15px;
	font-size: 1.4em;
	background: #FFF;	/*背景色*/
	padding: 4px 15px;	/*上下、左右への余白*/
	border: 1px solid #e4e4e4;	/*枠線の幅、線種、色*/
	border-radius: 4px;	/*角丸のサイズ*/
	color: #000000;
	line-height: 1.2em;
}
#top-page h3 {
	border-left-style: none;
	background-color: none;
}
/*mainコンテンツのh3タグの１文字目への設定*/
.right_contents h3::first-letter {
	border-left: 3px solid #000080;	/*左側のアクセント用ラインの幅、線種、色*/
	padding-left: 10px;	/*アクセントラインと文字の間にとる余白*/
}
/*mainコンテンツの段落タグ設定*/
.right_contents p {
	padding: 7px 15px 14px;	/*上、左右、下への余白*/
	line-height: 1.7;
	font-weight: normal;
	color: #545454;
}
.right_contents p + p {
	padding-top: 0px;
}
.right_contents h2 + p,
.right_contents h3 + p {
	padding-top: 0px;
	margin-top: -5px;
}




#bunner-corner a img {
	box-shadow: 1px 1px 3px 1px rgba(70,70,70,0.81);
}
#bunner-corner {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}





/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl{
	padding-left: 15px;
	margin-bottom: 30px;
	overflow: auto;	/*高さ指定を超えるとiframe風にスクロールが出る設定。全部表示させたいならこの行と下のheightの行を削除。*/
	height: 140px;	/*ボックスの高さ*/
}
/*日付設定*/
#new dt {
	font-weight: bold;	/*太字にする設定。標準がいいならこの行削除。*/
	float: left;
	width: 8em;
}
/*記事設定*/
#new dd {
	padding-left: 8em;
}




/*************
メイン コンテンツ
*************/
/*IEのCSSでのバグを回避？*/
* html section.content{height:1%;}





/************フッターBND************/
/*PAGE TOP設定
---------------------------------------------------------------------------*/
#pagetop {
	clear: both;
}
#pagetop a {
	color: #FFF;		/*文字色*/
	font-size: 20px;	/*文字サイズ*/
	padding: 0px 30px;	/*上下、左右へのボックス内余白*/
	background: #333;	/*背景色*/
	text-decoration: none;
	text-align: center;
	display: block;
	float: right;
	border-radius: 4px 4px 0px 0px;	/*角丸のサイズ。左上、右上、右下、左下。*/
}
/*マウスオン時*/
#pagetop a:hover {
	background-color: #999;	/*背景色*/
	color: #FFF;			/*文字色*/
}


.footer {
	clear: both;
	padding-top: 10px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	background-color: #07088C;
	border-top: medium solid #9B9696;
	padding-bottom: 20px;
	color: #FFFFFF;
}

.footer a{
	color: #FFFFFF;
}

.footer .copyright {
	clear: both;
	padding-top: 5px;
	color: #F7EA09;
}
/*バーナードfooterここまで*/




toto
/* トップページの中、モバイル用のコラムの目次 */
.for_mob_menu {
	line-height: 1.5em;
	text-align: left;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	border: 1px solid #ff69b4;
	margin-right: auto;
	margin-left: auto;
	margin-top: 30px;
	margin-bottom: 20px;
	font-size: 120%;
	background-image: url(../img/common/calender_index.jpg);
	background-repeat: repeat-y;
	background-position: left top;
}

.for_mob_menu a {
	color: #000;
}

.for_mob_menu  dl dt {
	margin-left: 10px;
	font-size: 120%;
	font-weight: bold;
	margin-bottom: 5px;
	color: #ff69b4;
}

.for_mob_menu  dl dd {
	margin-left: 10px;
}


.spMaxNone .mob_catch {
	font-weight: bold;
	color: #06F;
	font-size: 12px;
	clear: both;
	margin-bottom: 20px;
}


/* モバイル用の別ページメニューもくじ　*/

#pankuzu {
	margin-bottom: 10px;
	text-align: left;
	font-size: 0.8em;
}


.mob_link_menu ul li {
	padding-top: 10px;
	padding-right: 5px;
	padding-left: 10px;
	padding-bottom: 10px;
	background-color: #07088C;
	color: #FFFFFF;
	font-weight: normal;
	line-height: 1.2em;
	text-align: center;
	margin-top: 5px;
}
#left_menu .spMaxNone .mob_link_menu {
	margin-left: auto;
	margin-right: auto;
}

.mob_link_menu ul li a:visited{
	color: #FFFFFF;
}
.mob_link_menu ul li a:link{
	color: #FFFFFF;
}
#yoko-menu {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid #BBBBBB;
	border-bottom: 1px solid #BBBBBB;
	color: #424242;
	margin-bottom: 10px;
	font-weight: lighter;
}

#yoko-menu a{
	color: #4C4C4C;
}


 .spMaxNone img {
	display: block;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
.logo .lang {
	display: inline-block;
	border-top: medium solid #E40000;
	border-bottom: medium solid #E40000;
	background-color: #FFFFFF;
	padding-left: 20px;
	padding-right: 20px;
}
.logo .lang a{
	color: #0043D1;
	font-weight: bold;
}
.amazon-link img {
	width: 50px;
	height: auto;
	border: 1px solid #8E8E8E;
	margin-right: 10px;
}
.amazon-link {
	margin-left: 20px;
	text-align: left;
}
.right_contents #otoiawase {
	margin-left: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid #BBBBBB;
	border-bottom: 1px solid #BBBBBB;
	margin-bottom: 20px;
	width: 350px;
	clear: both;
}


/**************************************************************************** ブラウザによるサイズの変更 ****************************************************************************/

/* PC用 ビューエリアの最小幅。このサイズ960より大きい場合に適用*/
@media only screen and (min-width:960px){	
.inner .logo .spNone {
	display: inline-block;
}
#title-img  {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	padding-bottom: 10px;
}


/* PCサイズ時には改行しない（960以下では改行する） */
.br-sp { display:none; }

#wrapper,.inner{
	width: 1000px;
	padding: 0;
	}
	



/**************************
　右のコンテンツここから
**************************/
.right_contents {
	width: 700px;
	float: left;
	margin-top: 20px;
	margin-left: 15px;
}

}





/* モニター幅940px以下 */
@media only screen and (max-width:940px){


/* 940より小さい時には改行しない（PCだけ改行する） */
.br-pc { display:none; }
#header h1{
	padding: 0 0 5px 10px;
	display: none;
}
#header .logo{padding-left:10px;}
}



/* w768より大きい場合に適用【タブレット以上の場合】*/
@media screen and (min-width: 768px){
/* w768より大きい場合は、表示させない */
.spMaxNone { display: none;}
#header .inner .logo {
	padding-left: 160px;
}

.top-right-img-box {
	width: 280px;
	float: right;
}

.right_contents h2 {
	clear: both;
	margin-bottom: 5px;
	font-size: 2.5em;
	font-weight: normal;
	color: #000000;
}

#top-page {
	margin-bottom: 60px;
}

#left_menu {
	width: 250px;
	float: left;
	margin-left: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
}
#left_menu dt {
	font-weight: bold;
	color: #FFFFFF;
	font-size: 16px;
	background-color: #78003A;
	margin-top: 10px;
	line-height: 1em;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
}
.left_menu_btn ul li {
	width: 190px;
}

#bunner-corner a img {
	width: 400px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	height: auto;
	margin-top: 20px;
}
#pagetop {
	padding-top: 40px;
}


}


/* iPad縦型 w768より小さい場合に適用*/
@media only screen and (max-width:768px){
#wrapper{
	position: static;
	overflow-y: hidden;
	padding-bottom: 10px;
}

/* spNoneクラスのものを表示しない */
	.spNone { display: none;}

  #header{
	padding-bottom: 0;
	padding-top: 40px;
}	

	#header h1{
	text-align: center;
	display: none;
}
	
	#header .logo{
	float:none;
	text-align:center;
	padding:10px 5px 20px;
	}

#title-img  img{
	width: 100%;
	height: auto;
}

.top_calendar_text{
	font-size: 14px;
	border-left-style: none;
	margin-left: 0px;
	padding-left: 0px;
}

.top_calendar_ttl{
	font-size: 14px;
	font-weight: bold;
	line-height: 1.2em;
}


.right_contents h2 {
	margin-bottom: 0px;
	font-size: 1.2em;
	font-weight: normal;
	color: #000000;
	padding-left: 0px;
	margin-left: 5px;
}
#top-page {
	margin-bottom: 20px;
}

.top-right-img-box {
	display: none;
}

#bunner-corner a img {
	margin-bottom: 20px;
	max-width: 90%;
}

#left_menu {
	float: none;
	clear: both;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}
#left_menu  dt  {
	background-color: #272626;
	color: #FFFFFF;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
}
#left_menu  dd  {
	margin-left: 0px;
	padding-left: 0px;
}
 #left_menu li{
	float: none;
	clear: both;
	width: 90%;
}
.left_menu_btn .amazon-link {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.right_contents h3 {
	font-weight: bold;
	color: #07088C;
	font-size: 1.2em;
	margin-top: 5px;
}
.right_contents h3::first-letter {
	border-left-style: none;	/*左側のアクセント用ラインの幅、線種、色*/
	padding-left: 0px;	/*アクセントラインと文字の間にとる余白*/
}

#pagetop a {
	float: none;
}
#pankuzu {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}
	
.right_contents{
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}
#header .spMaxNone   {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.maxWid {
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
.right_contents #otoiawase {
	margin-left: 30px;
	margin-right: 30px;
	width: auto;
}
#pagetop {
	padding-top: 0px;
}

}


/* スマートフォン横型　w640より小さい場合に適用 */
@media only screen and (max-width:640px){
}



/* w480より大きい場合に適用【タブレット以上の場合】*/
@media screen and (min-width: 480px){

}



/* スマートフォン縦型　w480より小さい場合に適用 */
@media only screen and (max-width:480px){
/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
section#new h2.open {
	background: url(../images/btn_minus.png) no-repeat right center/34px 34px, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e5e5e5));	/*グラデーション*/
	background: url(../images/btn_minus.png) no-repeat right center/34px 34px, -webkit-linear-gradient(#fff, #e5e5e5);	/*同上*/
	background: url(../images/btn_minus.png) no-repeat right center/34px 34px, linear-gradient(#fff, #e5e5e5);			/*同上*/
}
section#new h2.close {
	background: url(../images/btn_plus.png) no-repeat right center/34px 34px, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e5e5e5));	/*グラデーション*/
	background: url(../images/btn_plus.png) no-repeat right center/34px 34px, -webkit-linear-gradient(#fff, #e5e5e5);	/*同上*/
	background: url(../images/btn_plus.png) no-repeat right center/34px 34px, linear-gradient(#fff, #e5e5e5);
}


}

/************************** ↑ディスプレイによるCSSの違いはここまで↑**************************/