@charset "utf-8";



/*slide.cssの読み込み
------------------------------------------------------------------------------------------------------------------------------------------------------*/

@import url(slide.css);



/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/


/*全体の設定
---------------------------------------------------------------------------*/

body {
	
margin: 0px;
	
padding: 0px;
	
color: #2f4f4f;	/*全体の文字色*/
	
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	
font-size: 18px;	/*文字サイズ*/
	
line-height: 1.7;		/*行間*/
	
-webkit-text-size-adjust: none;
	
background: #fff url(../images/kabe04.jpg);	/*背景色、背景画像の読み込み*/
	
border-top: 5px solid #ae9363;	/*上の線の幅、線種、色*/

}

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,input,textarea,select {
margin: 0px;
padding: 0px;
font-size: 100%;
font-weight: normal;
}

ul {
list-style-type: none;
}

ol {
padding-left: 40px;
padding-bottom: 15px;
}

img {
border: none;
max-width: 100%;
height: auto;
vertical-align: middle;
}

table {
border-collapse:collapse;
font-size: 100%;
border-spacing: 0;
}

iframe {
width: 100%;
}


/*リンク（全般）設定
---------------------------------------------------------------------------*/

a {
	
color: #111;		/*リンクテキストの色*/
	
transition: 0.3s;       /*マウスオン時の移り変わるまでの時間設定。0.3秒。*/

text-decoration: none;
}

a:hover {
	
color: #66cdaa;		/*マウスオン時の文字色*/

text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/

}




/*containerブロック
---------------------------------------------------------------------------*/

#container {
	
max-width: 1200px;	/*サイトの最大幅*/
	
padding: 0 3%;		/*上下、左右へのボックス内の余白*/
	
margin: 0 auto;

}


/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/

/*ヘッダーブロック*/

header {
	
text-align: center;	/*内容をセンタリング*/
	
padding: 40px 3%;	/*上下、左右へのブロック内の余白*/

}

/*ロゴ画像*/

header #logo img {
	
width: 350px;	/*画像幅*/

}


/*メインメニュー
---------------------------------------------------------------------------*/

/*メニューブロック*/

#menubar {
	
overflow: hidden;
	
padding-bottom: 40px;	/*メニューブロックの下の余白。下のコンテンツとの間の余白です。*/

}

/*メニュー１個あたりの設定*/

#menubar li {
	
float: left;	/*左に回り込み*/
	
width: 25%;	/*メニュー幅。今回４個なので100÷4=25です。５個にしたいなら20%にして下さい。*/

}

#menubar li a {
	
display:  block;
text-decoration: none;
	
line-height: 2.5;	/*行間を少し広く再設定。デフォルトは冒頭のbody内にあります。*/
	
text-align: center;	/*内容をセンタリング*/
	
font-size: 16px;	/*文字サイズ*/
	
background: #fff;	/*背景色（古いブラウザ用）*/
	
background: linear-gradient(#FFF 50%, #e7e7e7);	/*背景グラデーション*/
	
margin-left: 10px;		/*メニューの左に空けるスペース。メニュー同士の余白になります。*/
	border: 1px solid #ccc;	/*線の幅、線種、色*/
	
border-radius: 8px;	/*角丸のサイズ*/
	
box-shadow: 1px 2px 5px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、広げる幅、0,0,0は黒のことで0.1は色が10%ついた状態のこと。*/

}

/*１個目のメニューへの追加設定*/

#menubar li:first-child a {
	
margin-left: 0;	/*左に空けたスペースをリセット*/

}

/*英語表記（飾り文字）*/

#menubar li a span {
	
display: block;
	
font-size: 9px;		/*文字サイズ*/
	
background: #ae9363;	/*背景色*/
	
color: #FFF;		/*文字色*/
	
border-radius: 0px 0px 8px 8px;	/*角丸のサイズ。左上、右上、右下、左下への設定*/
	
margin: 0 30px;		/*上、左右への飾り文字の外側に空けるスペース*/
	
letter-spacing: 0.1em;	/*文字間隔を少し広くとる設定*/

}

/*マウスオン時と、現在表示中メニューの設定*/

#menubar li a:hover, #menubar li.current a {
	
background: #ae9363;	/*背景色*/
	
position: relative;
	
top: 1px;		/*現在の場所から下に1pxずらす*/
	
left: 1px;		/*現在の場所から右に1pxずらす*/
	
color: #fff;	/*背景色*/

}

/*マウスオン時と、現在表示中メニューの飾り文字の設定*/

#menubar li a:hover span, #menubar li.current a span {
	
background: #fff;	/*背景色*/
	
color: #ae9363;		/*文字色*/

}

/*スマホ用メニューを表示させない*/

#menubar-s {
display: none;
}

/*３本バーアイコンを表示させない*/

#menubar_hdr {
display: none;
}


/*コンテンツ（mainとsubを囲むブロック）
---------------------------------------------------------------------------*/

#contents {
	
clear: both;
overflow: hidden;

}


/*mainコンテンツ
---------------------------------------------------------------------------*/

#main {

float: left;	/*左に回り込み*/
	
width: 65%;	/*幅*/
	
padding-bottom: 40px;

}


/*mainの中のbox設定*/
#main .box {
	
background:#f5ecdb;	/*背景色*/
	
border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	
border-radius: 10px;	/*角丸のサイズ*/

margin-top: 15px;    /*ボックスの上スペース*/
	
margin-bottom: 20px;	/*ボックスの下スペース*/
	
padding: 15px;			/*ボックス内の余白*/

}

/*WegGL用*/
#main .box2{

background:#000;	/*背景色（不要）*/

margin-bottom: 20px;	/*ボックスの下に空けるスペース（不要？）*/

padding: 0px;		/*ボックス内の余白*/

width:504px;	        /*これがないとautoが効かない*/
margin: 0 auto; 　　　　/* 左右をauto指定にして左右中央揃えに */
max-width: 504px;　　　 /* 幅は最大504pxまでしか広げない */
}

#main .box3{

margin-bottom: 20px;	/*ボックスの下に空けるスペース（不要？）*/

padding: 0px;		/*ボックス内の余白*/

width:450px;	        /*これがないとautoが効かない*/
margin: 0 auto; 　　　　/* 左右をauto指定にして左右中央揃えに */
max-width: 450px;　　　 /* 幅は最大450pxまでしか広げない */
}



/*Unity2021以降のWebGL用（すずらん以降））*/
#main .box4{
position: relative;
width: 450px;
height: 800px;
margin: 0 auto;

}

#unity-container { position: absolute; width: 450px; height: 800px; }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }








/*h2タグの設定*/

#main h2 {
	
clear: both;

margin-top: 20px;    /*見出しの上スペース*/
	
margin-bottom: 20px;/*見出しの下にとるスペース*/
	
font-size: 18px;	/*文字サイズ*/
	
color: #663300;		/*文字色*/
	
text-shadow: 0px -2px 2px #fff;	/*テキストの影。右へ、下へ(マイナスがついているのでこの場合は上に向かう)、広げる幅、色。*/
	
letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする設定*/
	
padding: 4px 20px;		/*上下、左右への余白*/
	
background: #ab6723 url(../images/deco.png);	/*背景色と背景画像（※古いブラウザ用）*/
	
background: url(../images/deco.png) right center / 64px 40px no-repeat , url(../images/kabe05.gif),#ab6723;	/*背景画像を２種類設定、背景色、位置、サイズの順番でスラッシュで区切る*/
	
border-radius: 10px;	/*角丸の指定*/

}



/*h3タグの設定*/

#main h3 {
	
clear: both;
	
margin-top: 20px;    /*見出しの上にとるスペース*/

margin-bottom: 20px;    /*見出しの下にとるスペース*/
	
font-size: 18px;	/*文字サイズ*/
	
background: #fff;	/*背景色（古いブラウザ用）*/
	
background: linear-gradient(#FFF, #ededed);	/*背景グラデーション*/
	
padding: 6px 20px;		/*上下、左右への余白*/
	
border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	
border-radius: 10px;	/*角丸の指定*/

}


/*mainコンテンツのh3タグの１文字目への設定*/

#main h3::first-letter {
	
border-left: 3px solid #ae9363;	/*左の線の幅、線種、色*/
	
padding-left: 10px;	/*線と文字との間の余白*/

}


/*段落タグ設定*/

#main p {
	
padding: 0px 20px 0px;	/*上、左右、下への余白*/

}

/*他*/

#main p + p {
	
margin-top: -10px;

}

#main h2 + p,
#main h3 + p {
	
margin-top: -10px;

}

#main section + section {
	
clear: both;
	
padding-top: 30px;

}



/*更新情報のスクロール*/
#main .osirase {
  overflow: scroll;
  overflow-x: hidden;
  border: dotted 3px #b0778c;
  height: 300px;
  margin-bottom: 20px;
  padding: 20px;
  line-height: 150%; 
}

/*各ゲーム案内用ボックス
---------------------------------------------------------------------------*/

/*各ボックスの設定*/

#main .list {
	
position: relative;
	
overflow: hidden;
	
margin: 0 2.5% 15px;            /*上、左右、下へのボックスの外に空けるスペース*/
	
border: 1px solid #ccc;	        /*枠線の幅、線種、色*/
	
padding: 3%;			/*ボックス内の余白*/
	
background: #FFF;		/*背景色（古いブラウザ用）*/
	
background: linear-gradient(#FFF, #f1f1f1);	/*背景色グラデーション*/
	
border-radius: 10px;	/*角丸のサイズ*/

}


/*ボックス内の写真設定*/

#main .list figure img {
	
float: left;		/*画像を左へ回り込み*/
	
background: #FFF;		/*画像の背景色。ここでは枠線と画像の間の色になります。*/
	
padding: 0.8%;			/*余白。ここに上の行で設定した背景色が出ます。*/
	
border: 1px solid #CCC;	/*枠線の幅、線種、色*/
	
width: 20%;	/*写真の幅*/
	
box-shadow: 2px 2px 3px rgba(0,0,0,0.15);	/*ボックスの影の設定。右へ、下へ、広げる幅、0,0,0は黒の事で0.15は透明度15%の事。*/

}


#main .list a:hover{
color: #66cdaa;		/*マウスオン時の文字色*/

text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/

position: relative; top: 3px; left: 0px;
}

/*ボックス内のh4タグ設定*/

#main .list h4 {
	
font-size: 18px;	/*文字サイズ*/
	
border-bottom: 4px dotted #ae9363;	/*下側の線の幅、線種、色*/
	
margin-bottom: 10px;
	
margin-left: 25%;	/*左の画像とバランスをとって設定する*/
	
color: #6c3524;		/*文字色*/

}

/*ボックス内の段落タグ設定*/

#main .list p {
	
padding: 0px;
	
margin-left: 25%;	/*左の画像とバランスをとって設定する*/

line-height: 1.5;
}




/*subコンテンツ
---------------------------------------------------------------------------*/

/*subブロック*/

#sub {
	
float: right;	/*右に回り込み*/
	
width: 31%;		/*幅*/
	
padding-bottom: 40px;

}


/*subコンテンツ内のh2タグ設定*/

#sub h2 {
	
padding: 10px 15px;		/*上下、左右への余白*/
	
background: #ae9363;/*背景色*/
	
color: #FFF;			/*文字色*/
	
text-align: center;		/*内容をセンタリング*/
	
border-bottom: 4px solid #faa003;	/*下線の幅、線種、色*/
	
border-radius: 10px 10px 0px 0px;	/*角丸のサイズ。左上、右上、右下、左下の順番。*/

}


/*subコンテンツのbox
---------------------------------------------------------------------------*/

#sub .box {
	
background:#f5ecdb;	/*背景色*/
	
border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	
border-radius: 10px;	/*角丸のサイズ*/
margin-top: 15px;    /*ボックスの上スペース*/

	
margin-bottom: 20px;	/*ボックスの下スペース*/
	
padding: 35px;			/*ボックス内の余白*/

}

/*300*600広告用*/
#sub .box2{

background:#e6e6fa;	/*背景色最終で消す*/
	
margin-bottom: 20px;	/*ボックスの下に空けるスペース（不要？）*/

padding: 0px;		/*ボックス内の余白*/

width:300px;	        /*これがないとautoが効かない*/
margin: 0 auto; 　　　　/* 左右をauto指定にして左右中央揃えに */
/*max-width: 300px;　　　 幅は最大300pxまでしか広げない */
}
/*160*600広告用*/
#sub .box3{

background:#e6e6fa;	/*背景色最終で消す*/
	
margin-bottom: 20px;	/*ボックスの下に空けるスペース（不要？）*/

padding: 0px;		/*ボックス内の余白*/

width:160px;	        /*これがないとautoが効かない*/
margin: 0 auto; 　　　　/* 左右をauto指定にして左右中央揃えに */
/*max-width: 300px;　　　 幅は最大300pxまでしか広げない */
}

/*box内のh2タグ*/

#sub .box h2 {
	
border-radius: 0;	/*角丸をなしにする*/

}


/*subコンテンツ内のメニュー
---------------------------------------------------------------------------*/

/*メニュー全体の設定*/

#sub .submenu {
	
margin-bottom: 20px;		/*ブロックの下に空けるスペース*/
	
border-top: solid 1px #ccc;	/*上の線の線種、幅、色*/

}


#sub .submenu li a {
	
text-decoration: none;
display: block;
	
padding: 10px 10px;	/*メニュー内の余白。上下、左右への設定。*/
	
border: solid 1px #ccc;	/*線の線種、幅、色*/
	
border-top: none;		/*上の線だけ消す*/
	
background: #fff;		/*背景色*/

}

/*box内のメニューブロックの設定*/

#sub .box ul.submenu {
	
margin-bottom:  0;

}


/*フッター設定
---------------------------------------------------------------------------*/

footer {
	
clear: both;
	
text-align: center;		/*内容をセンタリング*/
	
padding: 10px 0;		/*上下、左右へのボックス内の余白*/
	
background: #ae9363;	/*背景色*/
	
color: #fff;			/*文字色*/
	
border-radius: 10px;	/*角丸のサイズ*/
	
margin-bottom: 20px;	/*フッターの下(外側)に空けるスペース*/

}

footer a {
	
text-decoration: none;
	
color: #fff;	/*リンクテキストの色*/

}

footer a:hover {
	
color: #fff;	/*マウスオン時のリンクテキストの色*/

}

footer .pr {
	
display: block;
	
font-size: 80%;

}



/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/

/*ブロック全体の設定*/

#new dl {
	
padding: 0 15px;		/*上下、左右へのブロック内の余白*/
	
margin-bottom: 20px;	/*ブロックの外(下)に空けるスペース*/

font-size: 16px;
}

/*日付設定*/

#new dt {
	
float: left;
	
width: 7em;
	
letter-spacing: 0.05em;

}

/*記事設定*/

#new dd {
	
padding-left: 7em;
	
border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/

}




/*よく頂く質問ページ
---------------------------------------------------------------------------*/

/*質問と答えのボックス全体を囲むブロック*/

.faq {
	
padding: 0 20px;	/*上下、左右へのボックス内余白*/

}

/*質問*/

.faq dt {
	
font-weight: bold;	/*太字にする設定*/
	
color: #ae9363;		/*文字色*/

}

/*回答*/

.faq dd {
	
padding-bottom: 15px;	/*下に空けるスペース*/

}


/*テーブル（ta1）
---------------------------------------------------------------------------*/

/*テーブル１行目に入った見出し部分（※caption）*/

.ta1 caption {
	
border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	
background: #eee;		/*背景色*/
	
border-bottom: none;	/*下線だけ消す*/
	
text-align: left;		/*文字を左寄せ*/
	
font-weight: bold;		/*太字に*/
	
padding: 10px;			/*ボックス内の余白*/

}

/*ta1設定*/

.ta1 {
	
width: 100%;
	
table-layout: fixed;
	
margin-bottom: 20px;	/*テーブルの下(外側)に空けるスペース*/
	
background: #fff;		/*テーブルの背景色*/

}

.ta1, .ta1 td, .ta1 th {
	
word-break: break-all;
	
border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	
padding: 10px;			/*ボックス内の余白*/
}
/*ta1の左側ボックス*/

.ta1 th {
	
width: 140px;		/*幅*/
	
text-align: center;	/*センタリング*/

}



/*inputボタン
---------------------------------------------------------------------------*/

#main input[type="submit"].btn,

#main input[type="button"].btn,

#main input[type="reset"].btn 
{
	
padding: 5px 10px;		/*上下、左右へのボタン内の余白*/
	
border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	
border-radius: 3px;		/*角丸のサイズ*/
	
background: #fff;		/*背景色*/

}

/*マウスオン時の設定*/

#main input[type="submit"].btn:hover,

#main input[type="button"].btn:hover,

#main input[type="reset"].btn:hover 
{
	
border: 1px solid #999;	/*枠線の幅、線種、色*/

}



/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/

/*アニメーションのキーグレーム設定（変更不要）*/

@keyframes scroll {

0% {
opacity: 0;
}

100% {
opacity: 1;
}

}

/*デフォルトでは非表示に*/

body .nav-fix-pos-pagetop a {
display: none;
}

/*ボタンの設定*/

body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	
display: block;
text-decoration: none;
text-align: center;
z-index: 100;
position: fixed;
	
width: 50px;		/*幅*/
	
line-height: 50px;	/*高さ*/
	
bottom: 33px;		/*下から33pxの場所に配置*/
	
right: 3%;			/*右から3%の場所に配置*/
	
background: #666;	/*背景色（古いブラウザ用）*/
	
background: rgba(0,0,0,0.6);	/*背景色。0,0,0は黒の事で0.6は透明度60%の事。*/
	
color: #fff;	/*文字色*/
	
border: 1px solid #fff;	/*枠線の幅、線種、色*/
	
animation-name: scroll;	/*上のアニメーションで指定しているkeyframesの名前（scroll）*/
	
animation-duration: 1S;	/*アニメーションの実行時間*/
	
animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
	
border-radius: 50%;	/*円形にする設定*/

}

/*マウスオン時*/

body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	
background: #66cdaa;	/*背景色*/

}


/*トップページのNEWアイコン
---------------------------------------------------------------------------*/

.newicon {
	
background: #8b0000;	/*背景色*/
	
color: #FFF;		/*文字色*/
	
font-size: 70%;		/*文字サイズ*/
	
line-height: 1.5;
	padding: 2px 5px;
	
border-radius: 2px;
	
margin: 0px 5px;
	
vertical-align: text-top;

}


/*ul,olタグ
---------------------------------------------------------------------------*/

ul.disc {
	
list-style: disc;
	
padding: 0 20px 20px 40px;

}


.ta1 ul, .ta1 ol {
	
padding-bottom: 0;

}


/*その他
---------------------------------------------------------------------------*/

.look {
background: #ccc;
color: #333;
padding: 5px 10px;
border-radius: 4px;
}

.mb15,.mb1em {
margin-bottom: 15px !important;
}

.mb30 {
margin-bottom: 30px !important;
}

.clear {
clear: both;
}

.color1, .color1 a {
color: #f87373;
}

.bg1 {
background: #f6f5f2;
}

.pr {
font-size: 10px;
}

.wl {
width: 96%;
}

.ws {
width: 50%;
}

.c {
text-align: center;
}

.r {
text-align: right;
}

.l {
text-align: left;
}

img.fr {
float: right;
margin-left: 10px;
margin-bottom: 10px;
width: 30%;
}

img.fl {
float: left;
margin-right: 10px;
margin-bottom: 10px;
width: 30%;
}

.badge {
text-align: right;
}
.big1 {
font-size: 40px;
letter-spacing: 0.1em; /*em相対的な比率を指定しておくと、フォントサイズに応じて字間が決まる*/
}

.big2 {
font-size: 15px;
display: inline-block;
line-height: 1.5;
color: #6c3524;
}

.mini1 {
font-size: 13px;
display: inline-block;
line-height: 1.5;
}

.mini2 {
font-size: 15px;
display: inline-block;
line-height: 1.8;
}

.sh {
display: none;
}


/*png画像に影、左から、影の水平方向、垂直方向、ぼかしの具合、色（色+透明度）*/
.drop-shadow {
  filter:drop-shadow(4px 4px 6px rgba(0, 0, 0, .5));
}


.ad-space {
    margin-top: 2em!important;
    margin-bottom: 2em!important;
}








/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:800px){


/*メインメニュー
---------------------------------------------------------------------------*/

/*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。透明度(opacity)0%から透明度100%にする指定。*/

@keyframes menu1 {

0% {
opacity: 0;
}

100% {
opacity: 1;
}

}

/*スマホ用メニューブロック*/

#menubar-s {
	
display: block;
overflow: hidden;
	
position: absolute;
	
top: 0px;	/*上から0pxの場所に配置*/
	
border-top: 1px solid #fff;		/*上の線の幅、線種、色*/
	
width: 100%;
	
margin-left: -3%;
	
z-index: 10;
	
animation-name: menu1;		/*上のkeyframesの名前*/
	
animation-duration: 0.5S;	/*アニメーションの実行時間。0.5秒。*/
	
animation-fill-mode: both;	/*アニメーションの完了後、最後のキーフレームを維持する*/

}

/*メニュー１個あたりの設定*/

#menubar-s li a {
	
display: block;
text-decoration: none;
	
padding: 15px 10px 15px 30px;	
/*上、右、下、左へのメニュー内の余白*/
	
border-bottom: 1px solid #fff;	/*下の線の幅、線種、色*/
	
background: rgba(0,0,0,0.8);	/*背景色*/
	
color: #fff;		/*文字色*/
	
font-size: 20px;	/*文字サイズ*/

}

/*英語表記（飾り文字）*/

#menubar-s li a span {
	
display: block;
	
font-size: 12px;	/*文字サイズ*/
	
color: rgba(255,255,255,0.5);

}

/*現在表示中(current)の文字色*/

#menubar-s li.current a {
	
color: #ffde00;

}

/*PC用メニューを非表示にする*/

#menubar {
display: none;
}


/*３本バーアイコン設定
---------------------------------------------------------------------------*/

/*３本バーブロック*/

#menubar_hdr {
	display: block;position: absolute;z-index: 20;
	top: 20px;		/*上から20pxの場所に配置*/
	right: 3%;		/*右から3%の場所に配置*/
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
	border-radius: 50%;	/*円形にする設定*/
}
/*三本バーアイコン*/
#menubar_hdr.close {
	background: #ae9363 url(../images/icon_menu.png) no-repeat center top/50px;	/*背景色、アイコン画像読み込み、画像の上半分を読み込む。幅50px。*/
}
/*閉じるアイコン*/
#menubar_hdr.open {
	background: #ae9363 url(../images/icon_menu.png) no-repeat center bottom/50px;	/*背景色、アイコン画像読み込み、画像の下半分を読み込む。幅50px。*/
}

/*main,subコンテンツ
---------------------------------------------------------------------------*/
#main, #sub {
	float: none;
	width: auto;
}

/*その他
---------------------------------------------------------------------------*/
body.s-n #sub,body.s-n #footermenu,.m-n {display: none;
}




}





/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:480px){


/*全体の設定
---------------------------------------------------------------------------*/

body {
	
font-size: 16px;	/*文字サイズ*/
	
line-height: 1.8;	/*行間*/

}


/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/

/*ヘッダーブロック*/

header {
	
text-align: left;	/*内容を左側に*/

}

/*ロゴ画像*/

header #logo img 
{
	
width: 220px;	/*画像幅*/

}


/*mainコンテンツ
---------------------------------------------------------------------------*/

#main h2, #main h3 {
	
font-size: 16px;
	
padding-left: 10px;
	
padding-right: 10px;

}

/*段落タグ設定*/

#main p {
	
padding: 0px 10px 15px;

}


/*施設のご案内ページ用ボックス
---------------------------------------------------------------------------*/
/*ボックス内のh4タグ設定*/

#main .list h4 
{
	
font-size: 16px;	/*文字サイズ*/
	
border-bottom: 2px dotted #ae9363;	/*下側の線の幅、線種、色*/

}


/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/


#new dl {
	
padding: 0 2px;		/*上下、左右へのブロック内の余白*/
	
margin-bottom: 20px;	/*ブロックの外(下)に空けるスペース*/


}

/*日付設定*/

#new dt {
	
float: left;
	
width: 5em;
	
letter-spacing: 0.04em;     

font-size: 13px;
}

/*記事設定*/

#new dd {
	
padding-left: 5em;
	
border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/

font-size: 15px;
}






/*テーブル(ta1)
---------------------------------------------------------------------------*/

/*余白の上書き*/

.ta1 caption,.ta1 th,.ta1 td 
{
	
padding: 5px;

}

/*テーブル内の左側*/

.ta1 th 
{
	
width: 100px;

}

/*テーブル内の右側*/

.ta1 td 
{
	
width: auto;

}


/*その他
---------------------------------------------------------------------------*/

.ws,.wl {
width: 94%;
}

.big1 {
font-size: 18px;
letter-spacing: normal;}

img.fr,img.fl {
float: none;
margin: 0;
width: 100%;
}

.sh {
display:block;
}

.pc {
display:none;
}





}







/****************************************
  ==== RESETS
****************************************/

html,body,div,canvas { 
margin: 0; padding: 0; 
}

::-moz-selection { 
color: #333; text-shadow: none; 
}

::selection {  
color: #333; text-shadow: none; 
}

.clear:after { 
visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; 
}

.clear { 
display: inline-table; clear: both; 
}


/* Hides from IE-mac \*/
 * html .clear { 
height: 1%; 
}
 .clear { 
display: block; 
}
 /* End hide from IE-mac */

/****************************************
  ==== LAYOUT
****************************************/


html, body { 
width: 100%; height: 100%; font-family: Helvetica, Verdana, Arial, sans-serif; 
}

div.logo {
 width: 204px; height: 38px; float: left; background: url(logo.png) 0 0 no-repeat; position: relative; z-index: 10; 
}

div.title { 
height: 38px; line-height: 38px; padding: 0 10px; margin: 0 1px 0 0; float: right; color: #333; text-align: right; font-size: 18px; position: relative; z-index: 10; 
}

.template-wrap { 
position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); 
}

.template-wrap canvas { 
margin: 0 0 10px 0; position: relative; z-index: 9; box-shadow: 0 10px 30px rgba(0,0,0,0.2); -moz-box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
}

.fullscreen { 
float: right; position: relative; z-index: 10; 
}