@charset "utf-8";

/****** css initialize ******/
html, body, div, h1, h2, h3, h4, h5, h6, p, span, header, footer, nav, aside,
small, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
strong, sub, sup, var, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, dialog, blockquote, figure,
menu, section, time, mark, object, audio, video {
margin:0;
padding:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
word-break:break-all;
word-wrap:break-word;
}
/****** css initialize ******/

body { 
font-family:"メイリオ",Meiryo,Verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
font-size:16px;
text-align:center;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
color:#4c4c4c;
background:#fff;
overflow-x:hidden;
}

img {
border:none;
vertical-align:bottom;
}

a {
color:#4c4c4c;
outline:none;
text-decoration:none;
transition:0.5s;
-webkit-transition:0.5s;
-moz-transition:0.5s;
}

a:hover,
a:active {
color:#b4b4b4;
}

.dispblock {
display:block!important;
}

.dispnone {
display:none!important;
}

.pc {
display:inline;
}

.sp {
display:none;
}

.wrapper {
width:100%;
float:left;
}

.header {
width:100%;
padding:15px 0;
float:left;
}

.header img {
float:left;
}

footer.footer {
width:100%;
padding:15px 0;
background:#ff85af;
font-size:14px;
color:#fff;
float:left;
}

footer.footer a {
color:#fff;
}

.contents {
width:100%;
padding-bottom:35px;
background:#ffeeee;
float:left;
}

.wrap {
width:1000px;
display:inline-block;
}

.boxpict {
width:100%;
float:left;
}

.boxpict img {
max-width:100%;
height:auto;
}

.step {
width:100%;
padding:15px 0;
background:#ff85af;
font-size:26px;
font-weight:bold;
color:#fff;
float:left;
letter-spacing:0.1em;
}

.barprogress {
width:100%;
float:left;
}

.barprogress nav {
width:100%;
padding:35px 0;
text-align:center;
float:left;
}

.barprogress nav ul li {
margin:0 15px;
font-size:26px;
display:inline-block;
}

.barprogress nav ul li span.num {
width:60px;
height:60px;
display:inline-block;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
position:relative;
}

.barprogress nav ul li span.num b {
width:60px;
height:60px;
padding-top:11px;
background:#f9f9f9;
color:#868686;
display:inline-block;
box-sizing:border-box;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
position:relative;
z-index:2;
}

.barprogress nav li span.num:before {
width:50px;
height:5px;
background:#f9f9f9;
content:'';
position:absolute;
top:50%;
right:-40px;
transform:translate(0%,-50%);
-webkit-transform:translate(0%,-50%);
-moz-transform:translate(0%,-50%);
z-index:1;
}

.barprogress nav li:last-child span.num:before {
display:none;
}

.barprogress nav li span.actb.num b {
background:#fffff9;
color:#ff3366;
}

.boxform {
width:100%;
padding:30px;
border:3px solid #fff;
float:left;
box-sizing:border-box;
}

.listinput {
width:100%;
margin-bottom:80px;
float:left;
}

.listinput:nth-of-type(3) {
margin-bottom:30px;
}

.listinput > p {
width:100%;
margin-bottom:30px;
padding-bottom:5px;
border-bottom:2px dashed #ff97b1;
text-align:left;
font-size:20px;
font-weight:bold;
float:left;
letter-spacing:0.05em;
}

.listinput.text1 > p,
.listinput.text2 > p,
.listinput.select1 > p,
.listinput.select2 > p {
margin-bottom:60px;
}

.listinput > p span {
padding-left:10px;
font-size:15px;
color:red;
display:inline-block;
}

/****** input checkbox ******/

.listinput.checkb > div {
width:33.333333%;
margin-top:30px;
padding:0 20px;
float:left;
box-sizing:border-box;
position:relative;
}

.listinput.checkb input {
position:absolute;
top:50%;
left:40px;
transform:translate(0%,-50%);
-webkit-transform:translate(0%,-50%);
-moz-transform:translate(0%,-50%);
z-index:1;
}

.listinput.checkb label {
padding:15px 15px 15px 50px;
background:#989898;
border:2px solid #fff;
text-align:left;
font-size:20px;
color:#fff;
display:block;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:0 6px 13px -8px rgba(0,0,0,0.6);
white-space:nowrap;
cursor:pointer;
user-select:none;
transition:background .2s, box-shadow .4s;
-webkit-transition:background .2s, box-shadow .4s;
-moz-transition:background .2s, box-shadow .4s;
position:relative;
box-sizing:border-box;
letter-spacing:0.1em;
z-index:2;
}

.listinput.checkb label:before {
width:18px;
height:18px;
background:#c2c2c2;
content:'';
display:block;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
transition:background-color .2s;
position:absolute;
top:50%;
left:15px;
transform:translate(0%,-50%);
-webkit-transform:translate(0%,-50%);
-moz-transform:translate(0%,-50%);
}

.listinput.checkb label:hover,
.listinput.checkb input:focus + label {
box-shadow:none;
}

.listinput.checkb input:checked + label {
background:#df2251;
box-shadow:none;
}

.listinput.checkb input:checked + label:before {
background:#fff;
}

/****** input text ******/

.listinput input[type="text"],
.listinput input[type="email"],
.listinput input[type="tel"] {
width:100%;
padding:12px 10px;
background:#fbfbfb;
border:1px solid #e9e9e9;
font-size:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
box-sizing:border-box;
transition:0.4s;
-webkit-transition:0.4s;
-moz-transition:0.4s;
}

.listinput input[type="text"]:hover,
.listinput input[type="email"]:hover,
.listinput input[type="tel"]:hover {
background:#fff;
border:1px solid #d3d3d3;
}

.listinput input[type="text"]:focus,
.listinput input[type="email"]:focus,
.listinput input[type="tel"]:focus {
background:#fff;
border:1px solid #d3d3d3;
outline:none;
}

.listinput input[type="text"]:placeholder-shown,
.listinput input[type="email"]:placeholder-shown,
.listinput input[type="tel"]:placeholder-shown {
color:#b5b5b5;
}

.listinput input[type="text"]::-moz-input-placeholder,
.listinput input[type="email"]::-moz-input-placeholder,
.listinput input[type="tel"]::-moz-input-placeholder {
color:#b5b5b5;
}

.listinput input[type="text"]::-webkit-input-placeholder,
.listinput input[type="email"]::-webkit-input-placeholder,
.listinput input[type="tel"]::-webkit-input-placeholder {
color:#b5b5b5;
}

.listinput.text1 label {
width:50%;
padding:0 30px;
float:left;
box-sizing:border-box;
}

.listinput.text1 label span {
width:10%;
padding-top:11px;
text-align:left;
float:left;
}

.listinput.text1 label input {
width:90%;
float:left;
}

/****** select ******/

.listinput.select2 > div {
width:100%;
float:left;
}

.listinput.select2 .title {
width:10%;
padding-top:11px;
text-align:left;
float:left;
}

.listinput.select1 .select-box {
width:40%;
float:left;
position:relative;
}

.listinput.select2 .select-box {
width:40%;
float:left;
position:relative;top20px
}

.listinput .select-box select {
width:100%;
padding:12px 10px;
background:#fff;
border:1px solid #dbdbdb;
font-size:15px;
box-sizing:border-box;
cursor:pointer;
float:left;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}

.listinput .select-box:before {
width:0;
border-bottom:6.5px solid #df2251;
border-left:6px solid transparent;
border-right:6px solid transparent;
content:'';
position:absolute;
right:9px;
top:13px;
}

.listinput .select-box:after {
width:0;
border-top:6.5px solid #df2251;
border-left:6px solid transparent;
border-right:6px solid transparent;
content:'';
position:absolute;
right:9px;
top:24px;
}

.listinput .select-box :focus {
outline:none;
}

.listinput .select-box.select-disabled:before {
border-bottom:6.5px solid #000;
}

.listinput .select-box.select-disabled:after {
border-top:6.5px solid #b3b3b3;
}

.listinput .select-box.select-disabled.disabled:before {
border-bottom:6.5px solid #df2251;
}

.listinput .select-box.select-disabled.disabled:after {
border-top:6.5px solid #df2251;
}

/****** button ******/

.listinput.button {
width:100%;
margin-bottom:0;
float:left;
}

.listinput.button button {
width:300px;
padding:13px 10px;
background:#f58181;
border:0;
color:#fff;
font-size:18px;
font-weight:bold;
box-sizing:border-box;
letter-spacing:0.1em;
cursor:pointer;    
transition:0.4s;
-webkit-transition:0.4s;
-moz-transition:0.4s;
}

.listinput.button button:hover {
background:#e22828;
}

.listinput.button .note {
width:100%;
margin-bottom:30px;
float:left;
}

.listinput.button .note br {
display:none;
}

.listinput.button .note a {
color:#0072ff;
}

.listinput.button .note a:hover {
color:#9d9d9d;
}


/****** shuryo ******/

.shuryo {
width:100%;
line-height:40px;
padding:100px 20px 60px;
font-size:18px;
font-weight:bold;
float:left;
box-sizing:border-box;
}

.shuryo .home {
width:100%;
margin-top:50px;
font-size:16px;
font-weight:bold;
float:left;
}

.shuryo .home a {
padding:6px 40px;
background:#e90079;
color:#fff;
display:inline-block;
}

.shuryo .home a:hover {
background:#414141;
}


/**************************************************
***************************************************
width:[1000px] or less.
***************************************************
**************************************************/

@media screen and (max-width:1000px) {

.pc {
display:none;
}

.sp {
display:inline;
}

.wrap {
width:100%;
float:left;
}

}


/**************************************************
***************************************************
width:[768px] or less.
***************************************************
**************************************************/

@media screen and (max-width:768px) {

footer.footer {
padding:15px 0;
font-size:12px;
}

.step {
font-size:20px;
}

.barprogress nav {
padding:25px 0;
}

.barprogress nav ul li {
margin:0 10px;
font-size:18px;
}

.barprogress nav ul li span.num {
width:40px;
height:40px;
}

.barprogress nav ul li span.num b {
width:40px;
height:40px;
padding-top:7px;
}

.barprogress nav li span.num:before {
width:40px;
right:-30px;
}

.boxform {
width:100%;
padding:0 15px;
border:0;
}

.boxform #docform {
width:100%;
padding:15px;
border:3px solid #fff;
float:left;
box-sizing:border-box;
}

.listinput {
margin-bottom:40px;
}

.listinput:nth-of-type(3) {
margin-bottom:20px;
}

.listinput > p {
margin-bottom:20px;
font-size:16px;
}

.listinput.text1 > p,
.listinput.text2 > p,
.listinput.select1 > p,
.listinput.select2 > p {
margin-bottom:30px;
}

.listinput.checkb > div {
width:50%;
margin-top:15px;
padding:0 5px;
}

.listinput.checkb input {
left:20px;
}

.listinput.checkb label {
padding:15px 5px 15px 25px;
font-size:14px;
}

.listinput.checkb label:before {
width:12px;
height:12px;
left:5px;
}

.listinput.select2 .title {
width:100%;
padding-top:0;
padding-bottom:5px;
}

.listinput.select1 .select-box,
.listinput.select2 .select-box {
width:100%;
}

.listinput .select-box:before {
top:16px;
}

.listinput .select-box:after {
top:27px;
}

.listinput .select-box.select-disabled:before {
border-bottom:6.5px solid #ccc;
}

.listinput .select-box.select-disabled:after {
border-top:6.5px solid #ccc;
}

.listinput.text1 label {
width:100%;
padding:0;
}

.listinput.text1 label:nth-of-type(1) {
margin-bottom:20px;
}

.listinput.text1 label span {
width:100%;
padding-top:0;
padding-bottom:5px;
}

.listinput.text1 label input {
width:100%;
}

.listinput.button button {
padding:13px 0;
font-size:16px;
}

.listinput.button .note {
margin-bottom:20px;
font-size:14px;
}

.listinput.button .note br {
display:block;
}


.shuryo {
line-height:30px;
padding:60px 20px 30px;
text-align:left;
font-size:16px;
}

.shuryo .home {
margin-top:30px;
text-align:center;
}

}


/**************************************************
***************************************************
width:[400px] or less.
***************************************************
**************************************************/

@media screen and (max-width:400px) {

.listinput.button button {
width:100%;
}

}