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

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

html {
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  color: #fef5ff;
  background-color: #250a28;
  font-family: Avenir, 'Helvetica neue', Helvetica,  メイリオ, Meiryo,'游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
}

a:link {
  color: #9BD3FF;
}

a:visited {
  color: #9BD3FF;
}

a:hover { 
  color: #9BD3FF;
}

.cf:before,.cf:after { 
  content:""; display:block;
}
.cf:after {
  clear: both;
}
.cf {
  zoom: 1;
}

#inner  {
  background: url(../pc/all_bg.jpg) repeat-y;
  background-position: center top;
  background-attachment: fixed;
}

.second_page {
  width: 980px;
  min-width: 980px;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 50px;
  overflow: hidden;
  background-position: center top;
}

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


#content {
  margin: 0 auto;
}

#content .content_inner {
  margin: 0 auto;
}

#content .content_wrap {
}

#content .content_main {
  position: relative;
}

#content .content_bg_btm {
  text-align: center;
}

/*--------
header
--------*/

#header {
  position: relative;
  text-align: center;
  background: url(../pc/header_bg.jpg) no-repeat;
  background-position: center top;
  height: 655px;
}

#header:before {
  position: relative;
  display: block;
  content:"";
  width: auto;
  height: 5px;
  background: url(../pc/bar.png) repeat-x;
  
}

#header:after {
  position: relative;
  display: block;
  content:"";
  top: 190px;
  width: auto;
  height: 5px;
  background: url(../pc/bar.png) repeat-x;
  
}

#header h1 {
  width: 589px;
  text-align: center;
  margin: 0 auto;
  padding-top: 161px;
}

#header p {
  margin-top: 120px;
}

#header .left_bar {
  position: absolute;
  top: 0;
  left:0;
  z-index: 2;
}

#header .right_bar {
  position: absolute;
  top: 0;
  right:0;
  z-index: 2;
}

/*--------
banner
--------*/

#banner {
  text-align: center;
  z-index: 3;
}

#banner a {
  display: block;
}

.banner1 {
  position: absolute;
  top: 442px;
  left: 50%;
  margin-left: -449px;
  padding-top: 27px;
  background-position: center top;
}

.banner2 {
  margin: 0px auto 45px !important;
} 

/*--------
caption
--------*/

.caption {
  text-align: center;
}

.caption1 {
  margin: 10px 0px 0px;
}

.caption2 {

  margin: 50px 0px 50px;
}

/*--------
heading
--------*/

#heading {
  height: 214px;
  text-align: center;
  background: url(../pc/heading_bg.png) no-repeat;
  background-position: center;
}

#heading span {
  display: block;
  background: url(../pc/heading_repeat.png) repeat-x;
  height: 163px;
  padding: 51px 0px 0px;
}

.caption1 {
  margin: 10px 0px 0px;
}

.caption2 {
  margin: 25px 0px 35px;
}

/*--------
leave
--------*/

.trouble_main .leave1 {
  position: absolute;
  top: 50px;
  left: 300px;
}

.trouble_main .leave2 {
  position: absolute;
  top: 120px;
  left: 150px;
}


.trouble_main .leave3 {
  position: absolute;
  top: 300px;
  right: 180px;
}

.trouble_main .leave4 {
  position: absolute;
  top: 130px;
  left: 800px;
}

.trouble_main .leave5 {
  position: absolute;
  top: 450px;
  left: 50px;
}

.trouble_main .leave6 {
  position: absolute;
  top: 500px;
  right: 30px;
}

#point .content_main .leave1 {
  position: absolute;
  top: 180px;
  left: 260px;
}

#point .content_main .leave2 {
  position: absolute;
  top: 60px;
  left: 335px;
}


#point .content_main .leave3 {
  position: absolute;
  top: 180px;
  right: 200px;
}

#point .content_main .leave4 {
  position: absolute;
  top: 130px;
  left: 800px;
}

#point .content_main .leave5 {
  position: absolute;
  top: 560px;
  left: 144px;
}

#point .content_main .leave6 {
  position: absolute;
  top: 500px;
  right: 30px;
}

#point .content_main .leave7 {
  position: absolute;
  top: 600px;
  right: 273px;
}

#experience .slidercontent_wrap .leave1 {
  position: absolute;
  top: -50px;
  left: 200px;
}

#experience .slidercontent_wrap .leave2 {
  position: absolute;
  top: 60px;
  left: -50px;
}


#experience .slidercontent_wrap .leave3 {
  position: absolute;
  top: 180px;
  right: -60px;
}

#experience .slidercontent_wrap .leave4 {
  position: absolute;
  top: -40px;
  right: 100px;
}

#experience .slidercontent_wrap .leave5 {
  position: absolute;
  top: 300px;
  left: -40px;
}

#experience .slidercontent_wrap .leave6 {
  position: absolute;
  top: -30px;
  right: 200px;
}

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

#trouble {
  text-align: center;
  padding: 160px 0px 50px;
  background: url(../pc/trouble_bg.png) ;
}

#trouble .trouble_main {
  position: relative;;
  width: 836px;
  margin: 0 auto;
}

#trouble .trouble_main p {
  margin-top: 50px;
}

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

#point {
  height: 827px;
  margin-top: 45px;
  background: url(../pc/point_bg.png) no-repeat;
  background-position: center top;
}

#point_cap {
  text-align: center;
  background: ;
}

#point .content_main {
  position: relative;
  width: 980px;
  margin: 0 auto;
}

#point .content_main ul {
  width: 830px;
  height: 830px;
  margin: 0 auto;
}

#point .content_main ul li {
  position: absolute;
  width: 404px;
}

#point .content_main ul li.point1 {
  top:0;
  left: 50%;
  margin-left: -202px;
}

#point .content_main ul li.point2 {
  top: 213px;
  left: 50%;
  margin-left: -418px;
}

#point .content_main ul li.point3 {
  top: 213px;
  right: 50%;
  margin-right: -418px;
}

#point .content_main ul li.point4 {
  top: 425px;
  left: 50%;
  margin-left: -202px;
}

/*--------
contents3
--------*/
#experience {
  margin: 45px 0px 0px;
}

#experience h2 {
  text-align: center;
}

#experience ul.tab {
  width: 300px;
  margin: 0 auto 30px;
  list-style: none;
}

#experience ul.tab li {
    float: left;
    margin: 0px 26px;
    cursor: pointer;
    text-indent: -9999px;
}
#experience ul.tab li:hover {
}

#experience ul.tab li span {
  display: block;
  width: 98px; 
  height: 130px;
}

#experience ul.tab li .tab1 {
  background: url(../pc/experience1_tab.png) no-repeat;
}

#experience ul.tab li .tab2 {
  background: url(../pc/experience2_tab.png) no-repeat;
}

#experience div.slidercontent {
  position: relative;
}

#experience div.slidercontent {
    background: url(../pc/experience_bg.png) no-repeat;
    clear: both;
    width: 820px;
    height: 426px;
    margin: 0 auto;
    padding: 25px 47px 0px;
}


#experience div.active {
    display: block;
}

#experience div.slidercontent_wrap {
  position: relative;
  width: 914px;
  margin: 0 auto;
}

#experience div.slidercontent_wrap p.arrow1 {
  position: absolute;
  top: 220px;
  left: 7px;
  z-index: 3;
}

#experience div.slidercontent_wrap p.arrow2 {
  position: absolute;
  top: 220px;
  right: 7px;
  z-index: 3;
}

#experience div.slidercontent div {
  float: left;
}

#experience div.slidercontent div h3 {
  margin-bottom: 20px; 
}

#experience div.slidercontent div.inner1 {
} 

#experience div.slidercontent div.inner1 .name_wrap {
  margin-bottom: 25px; 
}

#experience div.slidercontent div.inner1 .name_wrap p {
  float: left;
}

#experience div.slidercontent div.inner1 .name_wrap p.case {
  float: left;
  width: 241px;
}

#experience div.slidercontent div.inner1 .name_wrap p.age {
  float: left;
  margin: 15px 0px 0px 20px;
  width: 183px;
}

#experience div.slidercontent div.inner2 {
  position: relative;
  z-index: 2;
  width: 548px;
  margin-left: 10px;
}

#experience div.slidercontent figure {
  position: absolute;
  right: 35px;
}

/*--------
second text
--------*/
#s_txt {
  width: 700px;
  padding-top: 15px;
  font-size: 14px;
  text-align: left;
  line-height: 1.7em;
  margin: 0 auto;
  color: #FFFAF6;
  font-family: Avenir, 'Helvetica neue', Helvetica,  メイリオ, Meiryo,'游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
  letter-spacing: 1px;
}

#s_txt h3 {
  padding:20px 0 0 1px;
  font-size: 15px;
  margin:0;
  color: #FADEA9;
  font-family: Avenir, 'Helvetica neue', Helvetica,  メイリオ, Meiryo,'游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
  border-bottom: 1px dotted #a28a5b;
}

#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.body {
  font-size: 14px;
  line-height: 1.2em;
  color: #9BD3FF;
  text-decoration:none;
}

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

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

.mark_clr {
  color:#FADEA9;
}

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

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

#footer .footer_bg {
  height: 101px;
}

#f_link {
  color: #fff;
  font-size: 14px;
  line-height: 1.5em;
  text-decoration:none;
  padding-top: 24px;
}

#f_link a:link {
  color: #fef5ff;
}

#f_link a:visited {
  color: #fef5ff;
}

#f_link a:hover {
  color: #fef5ff;
}

#f_link a:active {
  color: #fef5ff;
}

p.copyright {
  padding: 12px 0px 15px;
  font-size: 13px;
  color: #fef5ff;
}

p.copyright a {
  color: #fef5ff;
}

/*--------
second bg
--------*/
.second_bg #content .content_wrap {
  width: 869px;
  margin: 0 auto;
}

.second_bg #form .content_main {
  background: url(../pc/form_mdl.png) repeat-y;
  background-position: center;
}

.second_bg #content .content_main .inner_bg{
  background: url(../pc/form_mdl.png) repeat-y;
  background-position: center;
}

.second_bg h1 {
  text-align: center;
}

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

#form {
  width: 900px;
  margin: 0 auto;
}

#form .form_caption {
  text-align: center;
}

#form .form_bg_btm {
  text-align: center;
}

#form article {
  padding: 30px 100px 27px;
  background: url(../pc/form_mdl.png) repeat-y;
  background-position: center;
}

#form article tr {
}

#form article th , #form article td {
  padding-bottom: 27px;
  vertical-align: middle;
}

#form article td {
  padding-left: 27px;
} 

#form article select {
  border: 1px solid #CCC;
  border-radius:0px !important;
  background: #fff;
  font-size:100%;
  vertical-align: middle;
  height:40px;
}

#form article .attention {
  font-size: 15px;
  color:#fef5ff;
}

#form h4.toroku_txt {
  text-align: center;
}

div.radio-group {
}

div.radio-group input {
  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: 12px 0px 0px 0px;
  float: left;
  background: url('../pc/index1_off.png') no-repeat;
  background-size:contain;
  width:200px;
  height:30px;
  color:#ffffff;
  font-family: Avenir, 'Helvetica neue', Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
  font-size: 17px;
  text-shadow: 1px 1px 0px #603a1d;
  line-height:1.4;
  text-align:center;
  vertical-align:middle;
}

div.radio-group label.checked  {
  background: url('../pc/index1_on.png') no-repeat;
  width: 200px;
  height: 30px;
  background-size:contain;
}

div#blood div.radio-group label {
  cursor: pointer;
  padding: 12px 0px 0px 0px;
  float: left;
  background: url('../pc/index2_off.png') no-repeat;
  background-size:contain;
  width: 100px;
  height: 30px;
  color: #ffffff;
  font-family: Avenir, 'Helvetica neue', Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
  font-size: 17px;
  text-shadow: 1px 1px 0px #683d83;
  line-height:1.4;
  text-align:center;
  vertical-align:middle;
}

div#blood div.radio-group label.checked  {
  background: url('../pc/index2_on.png') no-repeat;
  background-size:contain;
  width: 100px;
  height: 30px;
}

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 */