@charset "UTF-8";

/* COMMON
---------------------------------------------------------- */
html {
  height: 100%;
}
body{
  font-family: Helvetica Neue, Helvetica, Hiragino Sans, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
  font-size: 18px;
  line-height: 2em;
  color: #000;
  background: url(../img/bg.jpg);
  letter-spacing: .02em;
  text-indent: .02em;
  height: 100%;
}
@media(max-width:900px){
  font-size: 14px;
}/* @media */

img{ display: block; width: 100%;}
a img:hover{opacity: .8;transition: .2s;}

.pc{ display: inline-block !important;}@media(max-width:840px){.pc{ display: none !important;}}
.sp{ display: none !important;}@media(max-width:840px){.sp{ display: block !important;}}

/*--------------------
a
--------------------*/
a:link   {color: #000;text-decoration: none; transition: .2s;}
a:visited{color: #000;}
a:hover  {color: #ccc;}
a:active {color: #ccc;}

.ubdc_link {
  position: absolute;
  width: 15vw;
  top: 2vw;
  left: 15vw;
}
.ubdc_link a {
  color: #0d519e;
  border: 1px solid #0d519e;
  padding: 5px 20px;
  background: #fff;
  box-sizing: border-box;
}
.ubdc_link a:hover {
  color: #fff;
  background: #0d519e;
}

/*--------------------
  cts
--------------------*/
.wrap{
  max-width: 900px;
  margin: 0 auto;
}
header {
position: fixed;
background: #fff;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
width: 100%;
height: 6vw;
z-index: 99999;
}
header > .wrap{
  position: relative;
  max-width: 100% !important;
}
header > .wrap > .logo {
position: absolute;
width: 9vw;
top: 1vw;
left: 2vw;
}
header > .wrap > .btn_1 {
position: absolute;
width: 15vw;
top: 1vw;
right: 2vw;
}
.add_margin{
  width: 100%;
  height: 6vw;
}

.btn_area{
  padding: 5vw;
}


.credit{
  position: relative;
}
.credit_inner{
  position: absolute;
  text-align: center;
  top: 40px;
  width: 100%;
  line-height: 1.4;
}
.credit_inner > .logo {
  width: 20vw;
  margin: 150px auto 70px;
}
.credit_inner > .tit{
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 4px;
}
.credit_inner > .tex{
  margin-bottom: 8px;
}
.credit_inner > .gm > a{
  background: #0096ff;
  text-align: center;
  padding: 2px 1em;
  margin: 0 auto 32px;
  display: inline-block;
  color: #fff;
  font-size: 1.1em;
  border-radius: 4px;
}
.credit_inner > .gm > a:hover{
  opacity: .8;
}
footer{
  background: #000;
  color: #fff;
  text-align: center;
  padding: 32px 0;
}
footer > p:nth-child(1){
  padding-bottom: 8px;
}
footer > p:nth-child(2){
  font-size: .8em;
}

footer a:link   {color: #fff;text-decoration: none; transition: .2s;}
footer a:visited{color: #fff;}
footer a:hover  {color: #ccc;}
footer a:active {color: #ccc;}


@media(max-width:900px){
header {
position: fixed;
background: #fff;
width: 100%;
height: 14vw;
z-index: 99999;
}
header > .wrap{
  position: relative;
}
header > .wrap > .logo {
position: absolute;
width: 22vw;
top: 2vw;
left: 2vw;
}
header > .wrap > .btn_1 {
position: absolute;
width: 30vw;
top: 3vw;
right: 2vw;
}
.add_margin{
  width: 100%;
  height: 14vw;
}
.credit_inner > .logo{
  width: 40vw;
  margin: 0 auto 24px;
}
}/* @media */



/*  form_area */
.form_inner{
  background: #fff;
  padding: 30px 0;
}
dl.form{
  width: 90%;
}
dl.form > dt {
  clear: both;
  float: left;
  width: 16em;
  padding: 32px 0 0px;
}
dl.form > dt > span.hissu{
  background: #c00000;
  color: #fff;
  font-size: .8em;
  padding: 3px 2em;
  margin: 0 0 0 1em;
}
dl.form > dt > span.nini{
  background: #24ad88;
  color: #fff;
  font-size: .8em;
  padding: 3px 2em;
  margin: 0 0 0 1em;
}
dl.form > dd{
  padding: 30px 0 0 16em;
  border-top: 1px solid #999;
  margin: 0 0 30px;
}
dl.form > dd.bd_n{
  border-top: 0;
}
dl.form > dd.add{
  border-bottom: 1px solid #999;
  padding-bottom: 30px;
}
dl.form > dd > input{
  border: 0;
  outline: none;
  background: #f5f5f5;
  padding: 8px 2%;
  width: 96%;
  font-size: 1rem;
}
dl.form > dd input[type="radio"]{
  position: relative;
  top: -3px;
  margin-right: 8px;
}
dl.form > dd .add_no{
  width: 8em !important;
}
dl.form > dd .caution{
  color: #c30000;
  font-size: .7em;
  line-height: 1.6;
}
dl.form > dd select{
  font-size: 1.3em;
}
dl.form > dd > textarea{
  border: 0;
  outline: none;
  background: #f5f5f5;
  padding: 8px 2%;
  width: 96%;
  font-size: 1rem;
  height: 12em;
}
dl.form input.btn{
  text-align: center;
  border-radius: 10px;
  background-image: -moz-linear-gradient( 90deg, rgb(46,46,46) 0%, rgb(105,105,105) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(46,46,46) 0%, rgb(105,105,105) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(46,46,46) 0%, rgb(105,105,105) 100%);
  border: 0;
  display: block;
  color: #fff;
  font-size: 1rem;
  padding: 16px 80px;
  margin: 40px auto 0;
  letter-spacing: .1em;
  text-indent: .1em;
}
dl.form input.btn:hover{
  opacity: .8;
}
@media(max-width:780px){
dl.form {
    width: 90%;
}
dl.form > dd {
    padding: 0px 0 0 0;
    border-top: 0;
    margin: 0 0 0px;
    width: 100%;
}
dl.form > dt {
    padding: 16px 0 0px;
    width: 100%;
}
dl.form > dd.add {
    border-bottom: 0;
    padding-bottom: 0px;
}

dl.form input.btn {
  padding: 16px 0px;
  margin: 40px auto 0;
  letter-spacing: 0em;
  text-indent: 0em;
  width: 100%;
}
}/* @media */