/* ===================================================================
CSS information
file name  :  style.css
style info :  All Page Desining
=================================================================== */
@charset "UTF-8";

/*--------
default
--------*/

body {
width: 100%;
height: 100%;
background: url('/m5/img/new_face/pc/u/bg.jpg') repeat;
background-color: #26130a;
font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'sans-serif';
}

#first {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: #d4b4a1;
z-index: 1000;
}

#loader {
display: none;
position: fixed;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;

margin-left: -100px;
text-align: center;
z-index: 2000;
}

.contents_all, .second_page {
background: url('/m5/img/new_face/pc/u/content_bg.png') repeat-y;
min-width: 980px;
width: 980px;
text-align: center;
margin: 0 auto;
overflow: hidden;
background-position: center top;
}

h1 img {
font-size: 0%;
line-height: 0;
margin: 0 auto;
vertical-align: bottom;
}

#main_visual, #review, #fortune_teller, #toroku_form {
font-size: 0%;
display:inline;
width: 0%;
height: 0%;
}

.banner {
width: 980px;
height: 230px;
margin: 40px auto;
display: inline-block;
*display: inline;
*zoom: 1;
}

.banner1 {
width: 980px;
height: 230px;
margin: 0 auto 30px;
display: inline-block;
*display: inline;
*zoom: 1;
}

/*--------
Back to top button
--------*/

#back-top {
position: fixed;
bottom: 0%;
right: 0%;
z-index: 2;
}

#back-top span {
width: 130px;
height: 105px;
display: block;
}


/*--------
title
--------*/

#main h1 {
background: url('/m5/img/new_face/pc/u/title.png') no-repeat;
background-position: center top;
min-width: 980px;
width: 100%;
height: 365px;
margin: 0 auto;
position: relative;
overflow: hidden;
}


/*--------
caption
--------*/
.caption1 {
background: url('/m5/img/new_face/pc/u/caption1.png') no-repeat;
background-position: center top;
min-width: 980px;
width: 100%;
height: 409px;
margin: 0 auto;
padding-bottom: 20px;
position: relative;
overflow: hidden;
text-align: center;
}

/* 2024.08.08 rk add ---*/
.caption1_01a {
background: url('/m5/img/new_face/pc/u/caption1_01a.png') no-repeat;
background-position: center top;
min-width: 980px;
width: 100%;
height: 409px;
margin: 0 auto;
padding-bottom: 20px;
position: relative;
overflow: hidden;
text-align: center;
}

.caption {
width: 980px;
margin: 0 auto;
}

/*--------
contents1
--------*/

.contents1 {
width: 980px;
min-width: 980px;
margin: 0 auto;
display: block;
}

.contents_cap {
width: 980px;
margin: 0 auto;
}

.tarot {
background: url('/m5/img/new_face/pc/u/tarot_bg.png') no-repeat;
width: 980px;
height: 462px;
margin: 0 auto;
}

.card_area {
width: 855px;
height: 300px;
margin: 0 auto;
padding-top: 105px;
}

.card {
float: left;
list-style: none;
padding-left: 18px;
}

/*--------
contents2
--------*/

.contents2 {
width: 980px;
min-width: 980px;
margin: 0 auto;
}

.recommended {
background: url('/m5/img/new_face/pc/u/recommended_bg.png') no-repeat;
width: 980px;
height: 629px;
margin: 0 auto;
}

/* 2024.08.08 rk add ---*/
.recommended_01a {
background: url('/m5/img/new_face/pc/u/recommended_bg_01a.png') no-repeat;
width: 980px;
height: 629px;
margin: 0 auto;
}

.recommended_area {
width: 780px;
height: 150px;
margin: 0 auto;
padding-top: 213px;
}

.genre {
background: url('/m5/img/new_face/pc/u/genre_bg.png') no-repeat;
width: 980px;
height: 291px;
margin: 0 auto;
}

.genre_area {
width: 780px;
height: 150px;
margin: 0 auto;
padding-top: 20px;
}

.menu {
list-style: none;
float: left;
position: relative;
width: 25%;
height: 144px;
}

/*--------
contents3
--------*/

.contents3 {
width: 980px;
min-width: 980px;
margin: 0 auto;
}

.guide {
width: 980px;
margin: 0 auto;
}

/*--------
form.second
--------*/

#box06 {
display: table;
height: auto;
*height: auto !important;/*for IE7*/
width: 100%;
min-width: 980px;
position: relative;
padding: 0 0 40px;
}

#wrap {
text-align: center;
}

#box06 #p_center, #p_center {
background: url('/m5/img/new_face/pc/u/form_center.png') repeat-y;
background-position: center top;
max-width: 980px;
width: 100%;
margin: 0 auto;
}

#box06 h1 {
width: 980px;
margin: 0 auto;
}

#box06 table {
margin: 0px auto 30px;
}

#box06 table th {
padding: 35px 0 0 0;
text-align: center;
vertical-align: middle;
}

#box06 table input[type="text"] {
height: 30px;
vertical-align: middle;
}

#box06 table td {
padding: 40px 0 0 60px;
width: 424px;
color: #361000;
vertical-align: middle;
text-align: left;
}

#box06 select {
vertical-align: middle;
}

p.domain_txt {
font-size: 14px;
line-height:1.4em;
color: #361000;
}

#box06 p img {
vertical-align: middle;
}


/*--------
second text
--------*/

#s_txt {
width: 630px;
font-size: 14px;
text-align: left;
line-height: 1.4em;
margin: 0 auto;
color:#361000;
font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'sans-serif';
letter-spacing: 1px;
padding: 15px 0 70px;
}

#s_txt h3 {
padding:20px 0 0 1px;
font-size: 15px;
margin:0;
color:#e16f00;
font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'sans-serif';
font-weight: bold;
border-bottom: 1px dotted #e16f00;
}

#s_txt p, #s_txt ul, #s_txt ol {
padding-top: 15px;
}

#s_txt p, #s_txt ul{
padding-left: 20px;
}

#s_txt ul {
list-style:none;
}

#s_txt ol {
padding-left: 30px;
}

#s_txt a:link {
font-size: 14px;
font-weight: bold;
line-height: 1.2em;
color: #53a9d1;
text-decoration:none;
}

#s_txt a:hover {
font-size: 14px;
font-weight: bold;
line-height: 1.2em;
color: #aa99e9;
text-decoration:none;
}

#s_txt a:active {
font-size: 14px;
font-weight: bold;
line-height: 1.2em;
color: #aa99e9;
text-decoration:none;
}

.mark_clr {
color:#e16f00;
}

/*--------
footer
--------*/

#footer {
width: 980px;
min-width: 980px;
height: 80px;
text-align: center;
margin: 0 auto;
}

#f_link {
padding-top: 15px;
color: #673903;
}

#f_link a:link {
font-size: 14px;
line-height: 1.5em;
color: #673903;
text-decoration:none;
}

#f_link a:visited {
font-size: 14px;
line-height: 1.5em;
color: #997244;
text-decoration:none;
}

#f_link a:hover {
font-size: 14px;
line-height: 1.5em;
color: #d04e3c;
text-decoration:none;
}

#f_link a:active {
font-size: 14px;
line-height: 1.5em;
color: #d04e3c;
text-decoration:none;
}

p.copyright {
padding-top: 15px;
font-size: 14px;
color:#673903;
}

/*--------
form input
--------*/

div.radio-group {
margin-top: 5px;
}

div.radio-group input {
  opacity: 0;
    /*
  opacity: 0;
     filter: alpha(opacity=0);
  */
}

div.radio-group div {
  position: relative;
}

div.radio-group input {
  position: absolute;
  left: 0px;
  outline:none;
}

div.radio-group label {
cursor: pointer;
padding: 8px 0px 0px 0px;
float: left;
background: url('/m5/img/new_face/pc/u/index1_off.png') no-repeat;
width:211px;
height:40px;
color:#fcf2db;
font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
font-size: 18px;
text-shadow: 1px 1px 0px #260f00;
line-height:1.4;
text-align:center;
vertical-align:middle;
}

div.radio-group label.checked  {
background: url('/m5/img/new_face/pc/u/index1_on.png') no-repeat;
width:210px;
height:40px;
}

div#blood div.radio-group label {
cursor: pointer;
padding: 8px 0px 0px 0px;
float: left;
background: url('/m5/img/new_face/pc/u/index2_off.png') no-repeat;
width:106px;
height:40px;
color:#fcf2db;
font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
font-size: 18px;
text-shadow: 1px 1px 0px #260f00;
line-height:1.4;
text-align:center;
vertical-align:middle;
}

div#blood div.radio-group label.checked  {
background: url('/m5/img/new_face/pc/u/index2_on.png') no-repeat;
width:106px;
height:40px;
}

input[type="text"]:focus {
outline: 0;
border-color:#ffd800;
}

/*---------------------------------------------------------------------
  other
----------------------------------------------------------------*/
.clearfix:after { content:""; display:block; clear:both; height:0; }
* html .clearfix  { zoom: 1; }  /* IE6 */
*:first-child+html .clearfix { zoom: 1; }  /* IE7 */