/*========================================================================
みなみの島VR ボウリングガーデン＆アーカイブス スタイルシート
=========================================================================*/

article,aside,details,figcaption,figure,
footer,main,header,hgroup,menu,nav,section { 
	display: block;
}

nav, ul, li, a  {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	background-color: #164082;	/* marine blue(22,64,130) */
}

div#wrapper{
	margin: 0 auto;
	padding: 0;
	background-color: #fff;
	max-width: 960px;
}

div#flexslider {
	margin: 1em;
	max-width: 100%;
}

div#header {
	text-align: left;
	margin: 0;
	border-bottom: 1px solid #808080;
}

/* 2段組み（760px-200px）のフロート化 */
div#main{
	float: left;
	width: 760px;
}
div#sidebar{
	float: left;
	width: 200px;
}

/* 2段組み（20%-80%）のフロート化 */
div.img_head{
	float: left;
	width: 20%;
}
div.stc_body{
	float: left;
	width: 80%;
}

/* 2段組み（50%-50%）のフロート化 */
div.half_half{
	float: left;
	width: 50%;
}

/* タイトル下の階層ナビゲーション */
div#root {
	font-size: 12px;
	text-align: left;	
	padding: 6px 0.5em 3px 0.5em;
	border-bottom: 1px solid #c0c0c0;
}

/* SNSボタン群 */
div#sns_h, div#sns_b {
	text-align: left;
	margin: 0.5em;
}

/* 記事ページタイトル部の大枠 */
div#a_head {
	border: none #fff 1px;
	padding: 0;
	text-align: left;
//	border-bottom: 1px solid #808080;
}

/* ジャンプ群 */
div#jump {
	text-align: center;
}

/* 「ページトップへ戻る」常駐ボタン（半透明） */
div#pagetop {
	position: fixed;
	bottom: 10px;
	right: 10px;
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;
}

div#footer {
	text-align: center;
	padding: 1em 1em 0em 1em;
	border-top: 1px solid #808080;
	background-image: url(../img/maldives_1m.jpg);
	background-position: center center;
}

/* リンクの文字色 */
a:link {
	color: #0000cd;		/* mediumblue */
	text-decoration: none;
}
a:visited {
	color: #4169e1;		/* royalblue */
	text-decoration: none;
}
a:active {
	color: #ffd700;		/* gold */
	text-decoration: none;
}
a:hover {
	color: #dc143c;		/* crimson */
	text-decoration: underline;
}

/* グラデーションリンクボタン */
#button_blue {
	color: #ffffff;
	font-size: 16px;
	font-weight: bold;
	text-shadow: 1px 1px 0px #2f4f4f, 2px 2px 0px #2f4f4f;
	text-align: center;
	display: inline-block;
	text-decoration: none;
	border: 1px solid #2f4f4f;
	padding: 9px 0 6px 0;
	border-radius: 6px;
	background: -moz-linear-gradient(rgba(22,64,130,0.5), rgba(22,64,130,1));
	background: -webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(22,64,130,0.5)), to(rgba(22,64,130,1)));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#164082', endColorstr='#164082', GradientType=0)";
	background: -ms-linear-gradient(rgba(22,64,130,0.5), rgba(22,64,130,1));
	box-shadow: 1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;
}
a#button_blue:hover {
	background:-moz-linear-gradient(rgba(22,64,130,0.4), rgba(22,64,130,0.9));
	background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(22,64,130,0.4)), to(rgba(22,64,130,0.9)));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#164082', endColorstr='#164082', GradientType=0)";
	background: -ms-linear-gradient(rgba(22,64,130,0.4), rgba(22,64,130,0.9));
}

#button_green {
	color: #ffffff;
	font-size: 16px;
	font-weight: bold;
	text-shadow: 1px 1px 0px #006400, 2px 2px 0px #006400;
	text-align: center;
	display: inline-block;
	text-decoration: none;
	border: 1px solid #006400;
	padding: 9px 0 6px 0;
	border-radius: 6px;
	background: -moz-linear-gradient(rgba(34,139,34,0.5), rgba(34,139,34,1));
	background: -webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,139,34,0.5)), to(rgba(34,139,34,1)));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#228b22', endColorstr='#228b22', GradientType=0)";
	background: -ms-linear-gradient(rgba(34,139,34,0.5), rgba(34,139,34,1));
	box-shadow: 1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;
}
a#button_green:hover {
	background:-moz-linear-gradient(rgba(34,139,34,0.4), rgba(34,139,34,0.9));
	background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(105,105,105,0.4)), to(rgba(34,139,34,0.9)));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#228b22', endColorstr='#228b22', GradientType=0)";
	background: -ms-linear-gradient(rgba(34,139,34,0.4), rgba(34,139,34,0.9));
}

#button_red {
	color: #ffffff;
	font-size: 16px;
	font-weight: bold;
	text-shadow: 1px 1px 0px #dc143c, 2px 2px 0px #b22222;
	text-align: center;
	display: inline-block;
	text-decoration: none;
	border: 1px solid #b22222;
	padding: 9px 0 6px 0;
	border-radius: 6px;
	background: -moz-linear-gradient(rgba(220,20,60,0.5), rgba(220,20,60,1));
	background: -webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(220,20,60,0.5)), to(rgba(220,20,60,1)));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#dc143c', endColorstr='#dc143c', GradientType=0)";
	background: -ms-linear-gradient(rgba(220,20,60,0.5), rgba(220,20,60,1));
	box-shadow: 1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;
}
a#button_red:hover {
	background:-moz-linear-gradient(rgba(220,20,60,0.4), rgba(220,20,60,0.9));
	background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(220,20,60,0.4)), to(rgba(220,20,60,0.9)));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#dc143c', endColorstr='#dc143c', GradientType=0)";
	background: -ms-linear-gradient(rgba(220,20,60,0.4), rgba(220,20,60,0.9));
}

#button_gray {
	color: #ffffff;
	font-size: 16px;
	font-weight: bold;
	text-shadow: 1px 1px 0px #464646, 2px 2px 0px #464646;
	text-align: center;
	display: inline-block;
	text-decoration: none;
	border: 1px solid #464646;
	padding: 9px 0 6px 0;
	border-radius: 6px;
	background: -moz-linear-gradient(rgba(105,105,105,0.5), rgba(105,105,105,1));
	background: -webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(105,105,105,0.5)), to(rgba(105,105,105,1)));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#696969', endColorstr='#696969', GradientType=0)";
	background: -ms-linear-gradient(rgba(105,105,105,0.5), rgba(105,105,105,1));
	box-shadow: 1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;
}
a#button_gray:hover {
	background:-moz-linear-gradient(rgba(105,105,105,0.4), rgba(105,105,105,0.9));
	background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(105,105,105,0.4)), to(rgba(105,105,105,0.9)));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#696969', endColorstr='#696969', GradientType=0)";
	background: -ms-linear-gradient(rgba(105,105,105,0.4), rgba(105,105,105,0.9));
}

/* 壁紙設定 */
div.sea {
	background-image: url(../img/bg_sea-long.jpg);
	background-attachment: scroll;
	background-repeat: repeat-y;
	background-position: left top;
}
div.karakusa {
	background-image: url(../img/bg_karakusa.gif);
	background-attachment: scroll;
	background-repeat: repeat-y;
	background-position: -8px top;
}

/* 記事の主段落 */
p.a, ul.a, li.a {
	margin-left: 0.75em;
	margin-right: 0.5em;
}

/* 記事内のテーブル */
table.a {
	margin: 0.75em;
	width: 95%;
}
/* テーブルの見出し */
caption {
	font-weight: bold;
	text-decoration: underline;
}

/* 記事の第2段落 */
p.b, ul.b, li.b {
	margin-left: 1.25em;
	margin-right: 0.5em;
}

/* 各記事（セクション）の大枠 */
div.i {
	border: none #fff 1px;
	margin: 0 0 2em;
	padding: 0 0.5em;
	text-align: left;
}

/* 枠付きボックス（本体専用） */
div.mainbox {
	border: 1px solid #808080;
	margin: 1em;
	padding: 0;
	box-shadow: 1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;
}
/* 枠付きボックス（サイドバー専用） */
div.sidebox {
	border: 1px solid #808080;
	margin: 0.5em 5px 0.5em 0px;
	padding: 5px;
	box-shadow: 1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;
}
/* 枠付き丸角ボックス（白金神社セリフ枠） */
div.serif {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 2px solid #000;
	background-color: #fff;
	margin: 0.5em;
	width: 95%;
}

/* 各ページのタイトル画像 */
h1#title {
	margin: 0.5em 0 0;
}

/* 各ページの大見出し */
h2#fg {
	color: #228b22;
	font-size: 200%;
	font-style: italic;
	margin: 0.5em 0.25em;
}
h2#ind {
	color: #cd853f;
	font-size: 200%;
	margin: 0.5em 0.25em;
}
h2#mb {
	color: #164082;
	font-size: 200%;
	margin: 0.5em 0.25em;
}
h2#shr {
	color: #dc143c;
	font-size: 200%;
	margin: 0.5em 0.25em;
}
h2#sky {
	color: #7b68ee;
	font-size: 200%;
	margin: 0.5em 0.25em;
}

/* 記事ページの中見出し（ボックス型ロイヤルブルー） */
h3.rb {
	background-color: #4169e1;
	border-top: solid #add8e6 2px;
	border-left: solid #add8e6 2px;
	border-right: solid #191970 2px;
	border-bottom: solid #191970 2px;
	color: #ffffff;
	font-weight: bold;
	margin: 0;
	padding: 3px 4px 1px 0.5em;
	text-align: left;
}
/* 記事ページの中見出し（ボックス型マリンブルー） */
h3.mb {
	background-color: #164082;
	border-top: solid #b0c4de 2px;
	border-left: solid #b0c4de 2px;
	border-right: solid #2f4f4f 2px;
	border-bottom: solid #2f4f4f 2px;
	color: #ffffff;
	font-weight: bold;
	margin: 0;
	padding: 3px 4px 1px 0.5em;
	text-align: left;
}
/* 記事ページの中見出し（ボックス型ライトコーラル） */
h3.lc {	
	background-color: #f08080;
	border-top: solid #f8c0c0 2px;
	border-left: solid #f8c0c0 2px;
	border-right: solid #c04040 2px;
	border-bottom: solid #c04040 2px;
	color: #ffffff;
	font-weight: bold;
	margin: 0;
	padding: 3px 4px 1px 0.5em;
	text-align: left;
}
/* 記事ページの中見出し（ボックス型クリムゾン） */
h3.cr {	
	background-color: #dc143c;
	border-top: solid #f08080 2px;
	border-left: solid #f08080 2px;
	border-right: solid #8b0000 2px;
	border-bottom: solid #8b0000 2px;
	color: #ffffff;
	font-weight: bold;
	margin: 0;
	padding: 3px 4px 1px 0.5em;
	text-align: left;
}
/* 記事ページの中見出し（ボックス型ディムグレー） */
h3.dg {
	background-color: #696969;
	border-top: solid #c0c0c0 2px;
	border-left: solid #c0c0c0 2px;
	border-right: solid #000000 2px;
	border-bottom: solid #000000 2px;
	color: #ffffff;
	font-weight: bold;
	margin: 0;
	padding: 3px 4px 1px 0.5em;
	text-align: left;
}
/* 記事ページの中見出し（ボックス型フォレストグリーン） */
h3.fg {
	background-color: #228b22;
	border-top: solid #32cd32 2px;
	border-left: solid #32cd32 2px;
	border-right: solid #006400 2px;
	border-bottom: solid #006400 2px;
	color: #ffffff;
	font-weight: bold;
	margin: 0;
	padding: 3px 4px 1px 0.5em;
	text-align: left;
}

/* 記事ページの中見出し（シンプル型ロイヤルブルー） */
h4.rb {
	border-left: solid #4169e1 10px;
	border-bottom: dotted #4169e1 1px;
	color: #000000;
	font-weight: bold;
	margin: 2em 2px 1em;
	padding: 3px 4px 2px 0.5em;
	text-align: left;
}
/* 記事ページの中見出し（シンプル型マリンブルー） */
h4.mb {
	border-left: solid #164082 10px;
	border-bottom: dotted #164082 1px;
	color: #000000;
	font-weight: bold;
	margin: 2em 2px 1em;
	padding: 3px 4px 2px 0.5em;
	text-align: left;
}
/* 記事ページの中見出し（シンプル型ライトコーラル） */
h4.lc {	
	border-left: solid #f08080 10px;
	border-bottom: dotted #f08080 1px;
	color: #000000;
	font-weight: bold;
	margin: 2em 2px 1em;
	padding: 3px 4px 2px 0.5em;
	text-align: left;
}
/* 記事ページの中見出し（シンプル型クリムゾン） */
h4.cr {	
	border-left: solid #dc143c 10px;
	border-bottom: dotted #dc143c 1px;
	color: #000000;
	font-weight: bold;
	margin: 2em 2px 1em;
	padding: 3px 4px 2px 0.5em;
	text-align: left;
}
/* 記事ページの中見出し（シンプル型ディムグレー） */
h4.dg {
	border-left: solid #696969 10px;
	border-bottom: dotted #696969 1px;
	color: #000000;
	font-weight: bold;
	margin: 2em 2px 1em;
	padding: 3px 4px 2px 0.5em;
	text-align: left;
}
/* 記事ページの中見出し（シンプル型フォレストグリーン） */
h4.fg {
	border-left: solid #228b22 10px;
	border-bottom: dotted #228b22 1px;
	color: #000000;
	font-weight: bold;
	margin: 2em 2px 1em;
	padding: 3px 4px 2px 0.5em;
	text-align: left;
}

/* 文字を1サイズ小さくする */
.small {
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 1px;
}
/* 文字強調（サイズ大きめの太字） */
.strong {
	font-size: larger;
	font-weight: bold;
}
/* 赤色太字（注意表示） */
.notice {
	color: #ff0000;
	font-weight: bold;
}
/* 強調部位のマーカー */
.marker {
	background-color: #ffff00;
}
/* 強調部位のマーカー下線付き */
.markerline {
	background-color: #ffff00;
	text-decoration: underline;
}

/* フロート解除（micro clearfix） */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}

/* テーブル */
.table {
	display: table;
	border-collapse: collapse;
}
.inline-table{
	display:inline-table;
	border-collapse: collapse;
}
.caption {
	display: table-caption;
	font-weight: bold;
	text-align: center;
	text-decoration: underline;
}
.tr {
	display: table-row;
}
.th {
	display: table-cell;
	border: 3px double #808080;
	font-weight: bold;
	text-align: center;
}
.td {
	display: table-cell;
	border: 3px double #808080;
	text-align: left;
}

/* テーブル見出しの背景色をシルバーにして、センタリング */
th {
	text-align: center;
}
tr.silver th {
	background-color: #c0c0c0;
}
/* テーブル見出しの背景色を薄い海緑色にする */
tr.lsg th {
	background-color: #20b2aa;
}

/* YouTube埋め込み動画をレスポンシブにする */
.movie-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* タブレット型（1カラム） */
@media screen and (max-width: 960px){

div#wrapper{
	margin: 0 auto;
	padding: 0;
	background-color: #fff;
	width: 760px;
}

div, p, h1, h2, h3, h4 {
	background-image: url(images/space.gif);
	max-width:100%;
}

/* 2段組み（760px-200px）のフロート解除 */
div#main{
	width: 760px;
	padding-bottom: 1px;
}
div#sidebar{
	display: none;
}
/* テーブル見出しの背景色をシルバーにして、改行禁止 */
tr.silver td {
	background-color: #fff;
}


}


/* スマホ型（1カラム、メニューボタン） */
@media screen and (max-width: 768px){

body {
	margin: 0;
	padding: 0;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
	background-color: #164082;	/* marineblue(22,64,130) */
}

div#wrapper{
	margin: 0 auto;
	padding: 0;
	background-color: #fff;
	width: 95%;
}

div#flexslider {
	margin: 1em 0.5em;
	max-width: 100%;
}

div#header {
	text-align: center;
	margin-top: 0em;
}

/* 画像の横幅がディスプレイより大きく表示されないようにする */
img{
	max-width: 100%;
	height: auto;
	width /***/:auto;
}

div, p, h1, h2, h3, h4 {
	background-image: url(images/space.gif);
	max-width:100%;
}

/* 2段組み（760px-200px）のフロート解除 */
div#main{
	width: 100%;
	padding-bottom: 1px;
}
div#sidebar{
	display: none;
}

/* 2段組み（20%-80%）のフロート解除 */
div.img_head{
	width: 100%;
}
div.stc_body{
	width: 100%;
}

/* 2段組み（50%-50%）のフロート解除 */
div.half_half{
	width: 100%;
}

/* テーブル見出しの背景色をシルバーにして、左寄せ */
tr.silver th {
	background-color: #c0c0c0;
	text-align: left;
}
tr.silver td {
	background-color: #fff;
	text-align: left;
}
/* テーブル見出しの背景色を薄い海緑色にして、改行禁止 */
tr.lsg td {
	background-color: #fff;
	text-align: left;
}

/* テーブルの各セルをボックス要素化 */
table.a th, table.a td{
	display: block;
}

/* テーブルの列を非表示 */
th.non, td.non{
	display: none;
}


}