@charset "utf-8";

html, body, div,p,img,ul,li{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	font-family:"メイリオ", Meiryo,"Hiragino Kaku Gothic Pro",  Osaka,"ヒラギノ角ゴ Pro W3",  "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	vertical-align:bottom;
	background-color:transparent;
	list-style:none;
}

html,body {height:100%;}

body {
	line-height:1.48;
	font-size:14px;
	text-align:center;
	color:#444;
  background-color: #fff;
}

a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	text-decoration: underline;
	color: #060;
}
/* header
----------------------------------------------------*/
header{
    background: #000;/*ヘッダー背景色*/
    height:40px;
    position:relative;
}
header h1{
    text-align:center;
    color:#fff;/*ヘッダー文字色*/
    margin:0px;
    font-size:14px;
    line-height:40px;
}

/* Fixed position */
#lptop-padding {
	padding-top: 40px;
}

#fixed-top {
	position: fixed;
	top: 0;
	width: 100%;
	height: 50px;
	z-index: 4;
}

/* wrapper
----------------------------------------------------*/
#wrapper {
	width:100%;
	padding: 0 0;
}

#fixBtnBox {
  position: fixed;
  z-index: 9999;
  width: 100%;
  bottom: 0%;
  background-color: rgba(0, 0, 0, 0.3);
  padding-top: 1%;
  padding-bottom: 3%;
  animation: fadeIn 0.7s linear;
}


#content {
	line-height: 0;
  background-image: url("../img/bg_img.png");
  background-size: 6.5%;
}
#content img {
	width: 100%;
	height: auto;
}

.mgn_btm {
  margin-bottom: 10%;
}

/* toggle
----------------------------------------------------*/

.toggle_btn {
  animation: animScale 2s infinite ease-out; /*ボタン動き*/
  padding: 8% 15%;
  width: 70% !important;
}

.secret {
	margin:0;
	}

.secret dt{
	margin:0;
	cursor:pointer;
	}
.secret dd{
	margin:0;
	display:none;
	}

/* en quete
----------------------------------------------------*/

.enquete {
  margin-top: 10%;
}

.enquete_ttl {
  margin-bottom: 5%;
}

/* YES or NO */
.switchbox {
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 5% 6% 10% 6%;
}

.switchbox label {
    display: block;
    font-weight: bold;
    cursor :pointer;
    padding: 10% 5%;
    text-align: center;
    background: #aaa;
    color: #fff;
    border-radius: 5px;
    box-shadow:0px 5px 0px 0px rgba(0,0,0,0.5) ;
    width: 35%;
    font-size: 2rem;
}

.switchbox input {
    display: none; 
}

.switchbox input:checked + label {
    transform: translateY(3px);
    background: #579AFF;
    box-shadow:0px 2px 0px 0px #00327C ;
    color: #fff;
}

/* 1択式 */

.chkbox {
  margin-bottom: 10%;
  line-height: 1.48;
  text-align: left;
}
.chkbox li {
  margin-bottom: 5%;
  color: #000;
}

.enquete_ans {
  padding: 0 6%;
}

.chkbox li:last-child {
  margin-bottom: 0;
}

label {
    cursor: pointer;
}

.chkbox li input[type="radio"] {
  display: none;
}

.chkbox li label {
  position: relative;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: bold;
  padding-left: 10%;
}

.chkbox li label::before {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: solid 2px #579aff;
  background: #fff;
  border-radius: 5px;
}

.chkbox li input[type="radio"]:checked + label::after {
  border-right: 3px solid red;
  border-bottom: 3px solid red;
  content: '';
  display: block;
  height: 14px;
  width: 5px;
  left: 8px;
  top: 1px;
  opacity: 1;
  position: absolute;
  transform: rotate(45deg);
}
  
/* offer contents
----------------------------------------------------*/

.offer_short {
  margin-top: 3%;
}

.offer {
  margin: 10% 3% 7% 3%;
}

.cvBtn {
  padding-bottom: 5%;
}

.cvBtn a {
  display: block;
  text-align: center;
}

.onlybtn {
    animation: fluffyY 1s infinite ease-out;
}

/* btn_animation */
@keyframes fluffyY {
 0% {
transform:translateY(5%);
}
 50% {
transform:translateY(-5%);
}
 100% {
transform:translateY(5%);
}
}

/* offer */
.cvBtnSP {
  position: relative;
}

.onebtn_cv {
  position: absolute;
  right: 7%;
  bottom: 8%;
  width: 53%;
  animation: animScale 2s infinite ease-out;
}

/*ボタンアニメーションキーフレーム*/
@keyframes animScale {
  0% {
    transform: scale(0.9, 0.9);
  } /*(Xよこ,Yたて)サイズは%で表示*/
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.9, 0.9);
  }
  75% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(0.9, 0.9);
  }
}

/* 読み込み時はフォーム非表示
----------------------------------------------------*/
.customer_info {
  display: none;
}