/* --------------------------------------------- */
/* ▼モバイルファースト (全環境に共通のデザイン) */
/* --------------------------------------------- */
html{
	font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
	width:100%;
}
body{
	width:100%;
}
#head{
	width:100%;
	padding:6px 0 4px;
	margin:0 0 24px;
	background-color:#A61F2F;
	text-align:center;
}
#head img{
	width:33.33%;
}
#stepBoxWrap{
	width:100%;
	display:table;
}
#stepBox{
	width:33%;
	display:table-cell;
	//border:1px solid #ccc;
	padding-left:16px;
}

.step {
    margin: 0 0 24px;
    width: 80%; /* 四角形の幅 */
    padding:8px 0;
    background: #efefef;
    position: relative;
    text-align:center;
    color:#333;
}
.step:after {
    border-left: 16px solid #efefef; /* 右向きの三角形を作るため左のボーダーに色を付ける */
    border-top: 16px solid transparent; /* 上のボーダーを透過に指定 */
    border-bottom: 18px solid transparent; /* 下のボーダーを透過に指定 */
    content: "";
    position: absolute;
    left: 50%; /* 一旦中央へ寄せる */
    top: 0;
    margin-left: 50%; /* 四角形の幅の半分右へ移動する */
}
/* テキストの指定 */
.step span {
    font-size: 18px;
}
.now{
	background:#999;
	color:#fff;
}
.now:after{
	border-left: 25px solid #999;
}

.frag{
	margin:0 auto 36px;
	padding:0;
	-moz-box-sizing: border-box;
	 box-sizing: border-box;
	width:95%;
}
.frag .hissu{
	font-size:9px !important;
	color:red;
	padding-left:3px;
	
}
.frag table{
	width:100%;
	border:none;
	border-top:1px solid #ccc;
	font-size:18px;
	line-height:24px;
	margin:0 auto 18px;
}
.frag table tr th{
	width:30%;
	padding:16px 8px ;
	text-align:left;
	vertical-align:middle;
	//border:1px solid #ccc;
	border-bottom:1px solid #ccc;
}	
.frag table tr td{
	width:70%;
	padding:16px 8px ;
	vertical-align:middle;
	//border:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
h4{
	font-size: 18px;
	line-height:24px;
	margin:0;
	padding:0;
}
.frag p{
	font-size: 18px;
	line-height:24px;
	margin:0 0 16px;
	padding:0;
}
.before{
	margin:0 auto 27px;
	padding:0 0 18px;
	border-bottom:1px dotted #ccc;
}
.after{
	margin:0 auto 36px;
	padding:0;
}
p.title{
	font-size: 18px;
	line-height:24px;
	margin:0 0 32px;
	padding:0;
}
.box,
.selectBox{
	margin:0 auto 16px;
	padding:0;
	-moz-box-sizing: border-box;
	 box-sizing: border-box;
	width:100%;
}
.boxCell{
	-moz-box-sizing: border-box;
	 box-sizing: border-box;
	width:100%;
	display:table;
	margin:0 auto;
}
.boxCellTd{
	display:cell;
	width:49%;
}
.boxCellTd:first-child{
	margin-right:2%;
}

p.atn{
	background:#eee;
	padding:14px;
	font-size:14px;
	-moz-box-sizing: border-box;
	 box-sizing: border-box;
	line-height:21px;
	margin-bottom:32px;
}
input {
	font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
	padding: 14px ;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size:18px;
	outline: none;
	background: none;
	width:100%;
	margin:8px 0 16px;
	-moz-box-sizing: border-box;
	 box-sizing: border-box;
}
input#datepicker{
	font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
	padding: 0 14px !important;
	border: none;
	border-radius: 4px;
	font-size:18px;
	outline: none;
	background: none;
	width:100%;
	margin:8px 0 16px;
	-moz-box-sizing: border-box;
	 box-sizing: border-box;
}
input#datepicker::placeholder {
  color: #000;
}

textarea{
	font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
}
input::placeholder {
  color: #999;
}

input:placeholder-shown,
textarea:placeholder-shown{
	background:#ffffe0;
}
input:not(:placeholder-shown) ,
textarea:not(:placeholder-shown) {
	background:#fff;
}
input[type="submit"],
input[type="button"]{
	margin-bottom:36px;
	background:#009900;
	color:#fff;
	font-size:18px;
}
input[type="submit"][disabled]{
	background:#eee;
	color:#999;
}
input[type="button"]#back,
input[type="button"]#close{
	background:#999;
}
input.hide{
	//border:none;
	display:inline-block;
	width:auto;
	height:auto;
}
div.addBox{
	margin:0 0 0;
}
input.add{
	background:#999;
	color:#fff;
	margin:0;
}
.selectBox{
	padding: 8px 8px ;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size:18px;
	margin:8px auto 16px;
	-moz-box-sizing: border-box;
	 box-sizing: border-box;
}
.order{
	width:100%;
	margin:0 auto 36px;
	padding:0;
}
#henpinGuide{
	width:100%;
	margin:0 auto 36px;
	padding:0;
}
.reasonWrap{
	width:100%;
	margin:18px auto 36px;
	padding:0;
}
.reasonWrap textarea{
	width:100%;
	box-sizing: border-box;
	border:1px solid #ccc;
	border-radius: 4px;
	vertical-align:bottom;
	margin:0;
	padding: 12px 8px;
	font-size:18px;
	line-height:24px;
}
.checkWrap{
	width:100%;
	margin:0 auto 18px;
	padding:0;
}
.radioWrap{
	width:100%;
	margin:0 auto 36px;
	padding:0;
	display:table;
}
.radioBox{
	width:50%;
	margin:0 ;
	padding:0;
	display:table-cell;
}
input[type=radio], input[type=checkbox] {
  display: none;
}

.radio, .checkbox {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 12px 12px 12px 42px;
  border-radius: 8px;
  background-color: #efefef;
  vertical-align: middle;
  cursor: pointer;
font-size:18px;
line-height:24px;
}
.radio{
	width:97.5%;
}
.checkbox{
	width:100%;
}
.radio:hover, .checkbox:hover {
  background-color: #e2edd7;
}
.radio:hover:after, .checkbox:hover:after {
  border-color: #53b300;
}
.radio:after, .checkbox:after {
  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 15px;
  display: block;
  margin-top: -10px;
  width: 16px;
  height: 16px;
  border: 2px solid #bbb;
  border-radius: 6px;
  content: '';
}

.radio:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #53b300;
  content: '';
  opacity: 0;
}
input[type=radio]:checked + .radio:before {
  opacity: 1;
}

.checkbox:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 21px;
  display: block;
  margin-top: -7px;
  width: 5px;
  height: 9px;
  border-right: 3px solid #53b300;
  border-bottom: 3px solid #53b300;
  content: '';
  opacity: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
input[type=checkbox]:checked + .checkbox:before {
  opacity: 1;
}



input[type=radio] {
  display: none;
}
.radio {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0 ;
  padding: 12px 12px 12px 42px;
  border-radius: 3px;
  background-color: #efefef;
  vertical-align: middle;
  cursor: pointer;
  width:97.5%;
}
.radio:hover {
  background-color: #e2edd7;
}
.radio:hover:after {
  border-color: #53b300;
}
.radio:after {
  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 15px;
  display: block;
  margin-top: -10px;
  width: 16px;
  height: 16px;
  border: 2px solid #bbb;
  border-radius: 6px;
  content: '';
}
.radio:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #53b300;
  content: '';
  opacity: 0;
}
input[type=radio]:checked + .radio:before {
  opacity: 1;
}


#foot{
	width:100%;
	text-align:center;
	margin:0 auto 16px;
	padding:0;
	font-size:14px;
}
#footFix{
	width:100%;
	text-align:center;
	margin:0 auto;
	padding:0;
	font-size:14px;
	position:fixed;
	bottom:16px;
}
#footFloat{
	width:100%;
	text-align:center;
	margin:0 auto 16px;
	padding:0;
	font-size:14px;
}

.faqList{
	margin:0 0 1em 0;
}
.faqList li{
	font-size: 18px;
	display: inline-block;
	list-style: none;
	margin:0 8px 8px 0 ;
}
.faqBox{
	margin:0 0 1.5em;
	padding:0;
}
.qa-006 {
    //max-width: 500px;
    margin-bottom: 5px;
    border-bottom: 2px solid #d6dde3;
}

.qa-006 summary {
    display: flex;
	list-style: none;
	font-size: 18px;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    color: #333333;
    cursor: pointer;
}
summary::-webkit-details-marker {
  display:none;
}
.qa-006 p{
	margin:0;
	padding:0;
}
.qa-006 summary::before,
.qa-006 p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-006 summary::before {
    color: #75bbff;
    content: "Q";
}

.qa-006 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
}

.qa-006[open] summary::after {
    transform: rotate(225deg);
}

.qa-006 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.qa-006[open] p {
    transform: none;
    opacity: 1;
}

.qa-006 p::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
}
#page_top{
	display:none;
	padding:1em;
  position: fixed;
  right: 5px;
  bottom: 5px;
  background: #333;
  opacity: 0.6;
  font-size:18px;
  text-align:center;
  text-decoration:none;
  color:#fff;
  z-index:99999;
}


/* -------------------------------------------- */
/* ▼タブレット用デザインとして付け足すデザイン */
/* -------------------------------------------- */
@media (min-width: 768px) {
	body{
		position:static;
		width:100%;
		height:100%;
		background-image: url(../img/back2.jpg);
		background-size:  cover;
		background-color:rgba(255,255,255,0.5);
		background-blend-mode:lighten;
		background-repeat: no-repeat;
	}
	.page {
		width:480px;
		max-height:100%;
		height:768px;
		margin:0 auto;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%); /* Safari用 */
		transform: translate(-50%, -50%);
	}
}
/* ------------------------------------ */
/* ▼PC用デザインとして付け足すデザイン */
/* ------------------------------------ */
@media (min-width: 1024px) {
	body{
		position:static;
		width:100%;
		height:100%;
		background-image: url(../img/back1.jpg);
		background-size:  cover;
		background-color:rgba(255,255,255,0.5);
		background-blend-mode:lighten;
		background-repeat: no-repeat;
	}
	.page {
		width:480px;
		max-height:100%;
		height:768px;
		margin:auto auto;
	}
}