@charset "UTF-8";

/* CSS Document */

/*------------------------------------------------------------------------------------------------
   Base
------------------------------------------------------------------------------------------------*/

body {
width: 100%;
margin: 0;
padding: 0;
font-family: arial, Verdana, helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif;
font-size: 78%;
line-height: 160%;
background-color: #00d5c0;
color: #fff;
text-align: left;
}

a,
a:link,
a:visited {
color: #fff;
text-decoration: none;
}

a:hover,
a:active {
color: #333;
text-decoration: none;
}


div {
margin: 0;
padding: 0;
border: 0;
display: block;
}

p {
margin: 10px 0;
}

img {
border : 0;
display: block;
}

ul {
margin: 10px 0 10px 20px;
padding: 0;
list-style-type: disc;
list-style-position: outside;
}

ol {
margin: 10px 0 10px 25px;
padding: 0;
}

ul ul,ol ul {
margin: 0 0 0 20px;
list-style-type: circle;
list-style-position: outside;
}
ul ol {
margin: 5px 0 5px 20px;
}

p img {
display : inline;
margin: 0;
}


th,
td {
border-collapse: collapse;
}

form {
margin: 0;
padding: 0;
}


strong {
font-weight: bold;
}

hr {
width: auto;
height: 0;
margin: 0;
padding: 0;
border: none;
display: block;
visibility: hidden;
}
hr.line { margin: 15px 0; padding: 0; visibility: visible; }




/* Clearfix
---------------------- */
.cf:after {
   content: ".";
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
}
/* MacIE5 WinIE7 */
.cf{
   display:inline-block;
}
/*MacIE \*/
* html .cf{
	height:1em;
}
.cf{
	display:block;
}
/*  */


/* Clear
---------------------- */
.clear {
 clear: both;
}


/*None
---------------------- */
.none {
 display: none;
}

/*------------------------------------------------------------------------------------------------
   1. Common Style
------------------------------------------------------------------------------------------------*/

/*  Wrapper
------------------------------------------------------------------ */
#wrapper {
width: 980px;
margin: 0 auto;
padding: 0;
background-color: #426C93;
}

#otogumiBanner {
	width: 980px;
	margin: 0 auto;
	padding: 0;
	background-color: #000;
	text-align: center;
	display: none;
}
#otogumiBanner img {
	width: 100%;
	height: auto;
}
#container {
width: 980px;
height:800px;
margin: 0 auto;
overflow: hidden;
position:relative;
}

/*------------------------------------------------------------------------------------------------
   2. Layer Background
------------------------------------------------------------------------------------------------*/
#mainLayer01,
#mainLayer02 {
width: 980px;
height: 800px;
margin: 0;
padding: 0;
position: relative;
}
#mainLayer01 { background: url("../img/4th/bg01.gif") 0px 10px no-repeat; }
#mainLayer02 { }

#pict .pict01,
#pict .pict02,
#pict .pict03 {
position: absolute;
margin: 0;
}
#pict .pict01 { left: 170px; bottom: 140px; }
#pict .pict02 { left: 435px; bottom: 140px; }
#pict .pict03 { right: 130px; bottom: 140px;}


#bgColorTp,
#bgColorBm {
width: 980px;
height: 800px;
margin: 0;
position: relative;
}
/* #bgColorTp { background: url("../img/4th/bgColorUnder.png") center 90% no-repeat; } */
/* #bgColorBm { background: url("../img/4th/bgColorTop.png") center -25px no-repeat; } */


#bgBlue {
width: 980px;
height: 49px;
margin: 0;
position: absolute;
top: 0;
text-indent: -9999px;
background: url("../img/5th/bgBlue.png") -280px 0 no-repeat;
}
#bgBlue div { width: 438px; height: 138px; background: url("../img/5th/bgBlueR.png") 0 0 no-repeat; position: absolute; top: 49px; right: -16px; }


#bgPink {
width: 980px;
height: 105px;
margin: 0;
position: absolute;
bottom: 0;
text-indent: -9999px;
background: url("../img/5th/bgPink.png") 0 0 no-repeat;
z-index: 999;
}

/*  mainMenu
------------------------------------------------------------------ */
#mainMenu {
position: absolute;
width: 580px;
height: 40px;
margin: 0;
top: 2px;
left: 2px;
font-size: 130%;
overflow: hidden;
z-index: 999;
float: left;
}
#mainMenu img {
	float: left;
}


/*------------------------------------------------------------------------------------------------
   3. Content
------------------------------------------------------------------------------------------------*/
#main {
width: 980px;
margin: 0;
padding: 0;
}

.section {
clear: both;
width: 100%;
overflow: hidden;
position: relative;
}


/*  h1,h2,h3,h4
------------------------------------------------------------------ */
h1.logo,
h2.ttl,
h3.txt,
h3.dmbb_new {
margin: 0;
padding: 0;
position: absolute;
}

h1.logo { top: 210px; left: 107px; }
h2.renew { top: 105px; left: 377px; }
h2.ttl { top: 195px; left: 227px; }
h3.dmbb_new { top: 532px; left: 226px; z-index: 999;}

h2,
h3,
h4 {
margin: 0 0 10px 0;
padding: 0;
position: relative;
font-weight: bold;
}
h2 { font-size: 115%; }
h3 { font-size: 106%; }
h4 { font-size: 100%; }

/*  ゲスト名の場所
------------------------------------------------------------------ */
/* h3.txt { top: 428px; left: 227px; } */
/* h3.txt { top: 420px; left: 227px; } */
h3.txt { top: 415px; left: 227px; }



/*  KINKI
------------------------------------------------------------------ */
.kinki01 {
width: 260px;
height: 510px;
margin: 0;
overflow: hidden;
display: block;
position: absolute;
top: 243px;
z-index: 100;
}
.kinki01_toka {
width: 260px;
height: 510px;
margin: 0;
display: block;
position: absolute;
top: 243px;
z-index: 110;
}
.kinki01, Kinki01_toka { left: -30px; }

.kinki02 {
width: 220px;
height: 476px;
margin: 0;
overflow: hidden;
display: block;
position: absolute;
top: 243px;
z-index: 100;
}
.kinki02_toka {
width: 237px;
height: 486px;
margin: 0;
display: block;
position: absolute;
top: 243px;
right: -10px;
z-index: 110;
}
.kinki02, kinki02_toka { right: -38px; }

.kinki_cover { background: url("../photo/p9283rhp9uahewi.jpg") 0 0 no-repeat;}

#kinki01 {
	background-color: #fff;
	color: #000;
	padding: 10px;
	width: 580px;
	height: 100%;
	overflow: auto;
}

/*  DBMM
------------------------------------------------------------------ */
ul.dbmmTp,
ul.dbmmBm,
ul.dmbbFirst,
ul.dmbbSecond {
width: auto;
height: 150px;
margin: 0;
list-style: none;
/* overflow: hidden; */
position: absolute;
}

ul.dbmmTp { top: 32px; left: 20px; }
ul.dbmmBm { bottom: 65px; left: 230px; }
/* ul.dmbbOthers { display:none; top: 180px; left: 190px; z-index: 999;} */
ul.dmbbFirst { display:none; top: 160px; left: 280px; z-index: 999;}
ul.dmbbSecond { display:none; top: 290px; left: 333px; z-index: 998;}

ul.dbmmTp li,
ul.dbmmBm li,
ul.dmbbFirst li,
ul.dmbbSecond li {
float: left;
margin: 0;
display: block;
overflow: hidden;
position: relative;
}
ul.dbmmTp li { margin-left: -10px; }
ul.dbmmBm li { margin-left: -5px; }
ul.dmbbFirst li,ul.dmbbSecond li { margin-left: 6px; }

/*  GUEST
------------------------------------------------------------------ */
.guestBox {
width: 200px;
height: 160px;
margin: 0;
position: absolute;
top: 3px;
right: 200px;
}
.guestBox .ph { margin: 5px 0 0 7px; }

/*  PROMO
------------------------------------------------------------------ */
.pv {
width: 200px;
height: 160px;
margin: 0;
position: absolute;
top: 9px;
right: 10px;
background: url("../img/5th/promo.png") 0 0 no-repeat;
}
.pv:hover {
background: url("../img/5th/promoOver.png") 0 0 no-repeat;
}
.pv .ph { margin: 5px 0 0 7px; }

/*------------------------------------------------------------------------------------------------
   4. Footer
------------------------------------------------------------------------------------------------*/
#footer {
width: auto;
margin: 0;
padding: 0;
position: relative;
}

#footer .copy {
font-size: 10px;
text-align: center;
}



/* PageTop
---------------------- */
.ptop {
clear: both;
width: 90px;
height: 26px;
margin: 0;
text-indent: -9999px;
position: absolute;
top: -30px;
right: 10px;
}

.ptop a { width: 90px; height: 26px; display: block; overflow: hidden; background: url("../img/4th/ptop.png") 0 0 no-repeat; outline: none; }
.ptop a:hover { background: url("../img/4th/ptop_f2.png") 0 0 no-repeat; }


/*------------------------------------------------------------------------------------------------
   5. etc
------------------------------------------------------------------------------------------------*/
.img { margin: 0; } 

.fl { float: left; margin: 0; }
.fr { float: right; margin: 0; }

.areaL { float: left; margin: 0 10px 10px 0; }
.areaR { float: right; margin: 0 0 10px 10px; }

.tl { text-align: left; }
.tc { text-align: center; }
.tr { text-align: right; }

.f12 { font-size: 12px; }
.f10 { font-size: 10px; }
.ssmall { font-size: 83%; }
.small { font-size: 91%; }
.medium { font-size: 106%; }
.large { font-size: 115%; line-height: 170%; }

.b { font-weight: bold; }
.n { font-weight: normal; }
.u { text-decoration: underline; }

.cRed { color: #c33; }
.cRed a,.cRed a:link,.cRed a:visited { color: #c33; }
.cRed a:hover,.cRed a:active { color: #c33; }

.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }

.mt10 { margin-top: 10px; }
.mb10 { margin-bottom: 10px; }
.ml10 { margin-left: 10px; }
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }


#dmbb01,#kanran,#staff {
	background-color: #fff;
	color: #000;
	padding: 10px;
	width: 580px;
	height: 100%;
	overflow: auto;
}
#guest {
	background-color: #fff;
	color: #000;
	padding: 10px;
	width: 100%;
	height: 100%;
	overflow: auto;
}

.popupGallery {
	width: 100%;
	position: relative;
}
.popupGallery ul {
	list-style: none;
}
.popupGallery a {
	color: #000;
}
.popupGallery li {
	margin-bottom: 10px;
}

.popupGallery h3 { margin: 0; position: absolute; right: 20px; top: 30px; font-size: 164%; color: #000; }
.popupGallery h3.white { margin: 0; position: absolute; right: 20px; top: 30px; font-size: 164%; color: #fff; }

.popupGallery h4 { margin: 0 0 10px 0; padding-bottom: 7px; border-bottom: 2px dotted #4e84fe; }
.popupGallery h4.under { margin: 0 0 10px 0; padding-bottom: 7px; border-bottom: 2px dotted #4e84fe; width:100px; }

.popupGallery .txt { padding: 0 10px; line-height: 150%; }

div#modal {
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 96%;
	z-index: 9999;
}
div#modal div.modalBackground {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.75;
	filter: alpha(opacity=75);
	-ms-filter: "alpha(opacity=75)";
	z-index: 9999;
}
div#modal div.modalContainer {
	position: relative;
	width: 600px;
	height: 96%;
	padding: 12px;
	color: #333;
    border: 10px solid #6396ff;
	background-color: #fff;
	z-index: 10000;
	overflow: auto;
}