@charset "utf-8";
/* CSS Document */

/*---------------------------------------
 SP
----------------------------------------*/
/*--- common ---*/
*{
	box-sizing:border-box;
}
body {
	color: #575966;
	font-size:15px;	
	font-size:4vw;
}
img {
	width: 100%;
	height: auto;
	display: block;
}
input{
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-webkit-tap-highlight-color:transparent;
}
label{
    cursor:pointer;
	-webkit-tap-highlight-color:transparent;
}

a {
	color: #007FFF;
	-webkit-tap-highlight-color:transparent;
}
a:hover {
	text-decoration:none;
}
em{
	font-style:normal;
}
.redface{
	color:#D80000;
}
h1{
	margin:6.66% 3.73% 0;
	padding:0 0 2.8% 6.13%;
	position:relative;
	border-bottom:1px solid #ccc;
	font-weight: bold;
	font-size: 112%;
}
h1::before{
	content:'';
	position:absolute;
	background:#034093;
	width:3.73%;
	height:0.31em;
	left:0;
	top:0.55em;
}
h2{
	margin:4.76% auto 4.3%;
	font-weight: bold;
}
.note{
	font-size:77%;
	padding-left:1em;
	text-indent:-1em;
}
.note:before{
	content:'※';
}
p{
	margin-bottom:1.3%;
	line-height: 1.6;
}
/*--- header ---*/
header{
	border-top: 3px solid #034093;
}
header .logoArea{
	padding:5.2% 3.73%;
}
header img{
	width:66.86%;
}
/*--- indicator ---*/
.indicator ol{
	display: table;
	width:100%;
}
.indicator li{
	padding:1.55vw 0 1.35vw;
	position:relative;
	display: table-cell;
	width:33.33%;
	color:#fff;
	background:#D1D1DE;
	font-size:77%;
	text-align:center;
	vertical-align:middle;
}
.step1 .indicator2:before,
.step2 .indicator2:before,
.step3 .indicator3:before,
.error .indicator3:before{
	content: "";
	border: 2vw solid transparent;
    border-left-width: 1.8vw;
    border-left-color: #034093;
    display: block;
    position: absolute;
    margin-top: -2vw;
    top: 50%;
    left: 0;
    width: 0;
    z-index: 5;
}
.indicator li div{
	padding: 0 5vw;	
	height:3em;
	width:100%;
	display:table;
}
.indicator li div span{
	display:table-cell;
	vertical-align:middle;
}
.indicator li .line{
	border-right: 1px solid #fff;
}
.step1 .indicator1,
.step2 .indicator1,
.step3 .indicator2,
.error .indicator2,
.step4 .indicator3 {
	background:#034093;
}
.step1 .indicator2 div,
.step2 .indicator2 div,
.step4 .indicator1 div{
	border-right: 1px solid #fff;
}
/*--- main ---*/
.indentBox{
	margin:0 3.73%;
}
.stopFlow ol{
	counter-reset: mailmagStopFlow;
}
.stopFlow li{
    position: relative;
    padding:0 0 0.8em 1.2em;
}
.stopFlow li:before{
    counter-increment:  mailmagStopFlow;
    content: counter(mailmagStopFlow) ".";
	font-weight:bold;
	position: absolute;
    left: 0;
  }

.stopFlow{
	padding-bottom:4.53%;
	border-bottom:1px solid #ccc;
}
.stopFlow ol{
	margin-bottom:3.6%;
}
.sendMail input[type="email"]{
	margin-bottom:3.7%;
	padding:0.5em;
	width:100%;
	border:1px solid #ccc;
	height:2.9em;
	background:#F6F6F6;
	border-radius:3px;
}
.sendMail input::-webkit-input-placeholder{
	color: #B9B9B9;
}
.sendMail input::-moz-placeholder{
	color: #B9B9B9;
}
.sendMail input:-ms-input-placeholder{
	color: #B9B9B9;
}
.sendMail .alert{
	margin-bottom: 3.7%;
	padding:2% 1% 1.8%;
	position: relative;
	background:#FFEAEA;
}
.sendMail .alert:before{
	content: "";
	border: 2vw solid transparent;
    border-bottom-width: 2.3vw;
    border-bottom-color: #FFEAEA;
    display: block;
    position: absolute;
    top: -4vw;
    left: 2vw;
    width: 0;
    z-index: 5;
}
.sendMail .alert span{
	padding-left:1.6em;
	color:#D80000;
	display:inline-block;
	position: relative;
}
.sendMail .alert span:before{
	content: "\f06a";
	font-family: FontAwesome;
	font-size: 100%;
	color:#D80000;
	position: absolute;
	left:.5em;
	top: -.1em;
	z-index:10;
}
.indentBox .buttonArea {
	margin:5.77% auto 16.57%;
	text-align:center;
}
.indentBox .buttonArea input[type="submit"]{
	padding:5% 0 4.3%;
	width:90.2%;
	color:#fff;
	background:#FF7979;
	font-weight: bold;
	border-radius:3px;
	box-shadow:0 0.25em 0 0 #EF4B4B;
    cursor:pointer;
}

h2 strong{
	display:block;
	color:#D80000;
	text-align:center;
	line-height:1.6;
}
.step2 h2{
	width:17em;
}
.step4 h2{
	margin:5.78% auto;
	width:13.5em;
}
.indentBox .sendMailPic{
	margin:0 auto 6.2%;
	width:49.85%;
}
.indentBox .emailBox{
	margin:4.32% 0;
	width:100%;
	border:2px solid #CCC;
	color:#575966;
	border-radius:3px;
	text-align:center;
}
.indentBox .emailBox .emailTitle{
	padding:2.6% 1.44% 1.873%;
	border-bottom:1px dotted #ccc;
	border-radius:3px 3px 0 0;
	background:#F6F6F6;
	font-weight:bold;
}
.indentBox .emailBox .emailAdress{
	padding:2.6% 1.44% 1.873%;
	font-weight:bold;
	border-radius:0 0 3px 3px;
	word-break:break-all;
}
.indentBox .buttonArea .backButton{
	margin:0 auto;
	padding:4.65% 0;
	display:block;
	width:49%;
	color:#575966;
	background:#E0E0E0;
	font-weight:bold;
	border-radius:3px;
	box-shadow:0 0.25em 0 0 #B3B3B3;
    cursor:pointer;
	
}
.step4 .buttonArea .backButton{
	width:57.64%;
}
.indentBox .checkInfo{
	margin:1% 0 5%;
}
/*--- mailmagArea ---*/
.indentBox .allCheck{
	margin-bottom: 4.6%;
	display:inline-block;
	padding:2.2% 3% 2.2% 8%;
	position:relative;
	border: 1px solid #CCC;
	color:#575966;
	font-size:77%;
	background:#fff;
    cursor:pointer;
}
.indentBox .allCheck:before{
	content: "\f00c";
	font-family: FontAwesome;
	font-size: 112%;
	color:#575966;
	position: absolute;
	left:6%;
	top: 50%;
    margin-top: -0.65em;
	z-index:10;
}
.indentBox .mailmagArea .mailmagList{
	margin-bottom:1%;
}
.indentBox .mailmagList li{
	margin-bottom:1.87%;
	padding:4.6%;
	display:table;
	width:100%;
	background:#F6F6F6;
}
.indentBox .mailmagArea .checkbox{
	display:table-cell;
}
.indentBox .mailmagArea .checkbox input[type="checkbox"]{
	border:1px solid #888A9B;
	width:1.5em;
	height:1.5em;
	background:#fff;
	border-radius:3px;
	position:relative;
}
.indentBox .mailmagArea .checkbox input[type=checkbox]:checked:before{
	content: "\f00c";
	font-family: FontAwesome;
	font-size: 112%;
	color:#575966;
	position: absolute;
	top:50%;
	left:50%;
	margin-left: -0.5em;
    margin-top: -0.55em;
	text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff;
}
.indentBox .mailmagArea .mailmagBox .label{
	display: block;
}
.indentBox .mailmagArea .mailmagBox{
	padding-left: 4.45%;
	display:table-cell;
}
.indentBox .mailmagArea .mailmagBox .mailmagTitle{
	font-weight:bold;
	padding-bottom:1.86%;
}
.indentBox .mailmagArea .mailmagBox .mailmagText{
	font-size:77%;
}
.step3 .indentBox .note a{
	text-decoration:underline;
}
/*--- footer ---*/
footer{
	padding:4.4%;
	border-top: 1px solid #CCC;
	color:#333;
	font-size:59%;
	text-align:center;
}
/*--- error ---*/
.error h2 strong{
    font-size: 112%;	
}
.error h2 strong:before{
	content:"\f071";
    font-family: FontAwesome;
	padding-right:.4em;
}
.error .indentBox .invalidList{
    margin: 5% 0;
	background:#F6F6F6;
	padding:1em .5em;
}
.error .indentBox .invalidList dt{
	margin-bottom:2.3%;
	font-weight:bold;
	text-align:center;
}
.error .indentBox .invalidList li:before{
	content:"・";
}
.error .indentBox .invalidList li{
	margin-bottom:1%;
	padding-left: 1em;
    text-indent: -1em;
}
.error .indentBox .buttonArea .backButton{
	width:12em;
}
/*---------------------------------------
 Tablet
----------------------------------------*/
@media (min-width:415px) {
/*--- tablet common ---*/
body {
	color: #333;
	font-size:15px;
}
h1{
	margin:4.28% 3.28% 0 3.28%;
	padding:0 0 10px 21px;
	font-size: 153%;
}
h1::before{
	width:10px;
	height:4px;
    top: 0.65em;
}
h2{
	margin:26px 0 14px;
	font-size: 120%;
}
.note{
	font-size:73%;
}
p{
	margin-bottom:2px;
	line-height: 1.8;
}
/*--- tablet header ---*/
header{
	width:100%;
	border-top: 3px solid #034093;
}
header .logoArea{
	margin:0 auto;
	padding:4.2% 3.28% 4%;
	width:100%;
}
header img{
	padding:0;
	width:47.85%;
}
/*--- tablet indicator ---*/
.indicator{
	margin:0 auto;
	width:100%;
}
.indicator li{
	padding:4px 0 2px;
	width:33.33%;
}
.step1 .indicator2:before,
.step2 .indicator2:before,
.step3 .indicator3:before,
.error .indicator3:before{
	content: "";
	border: 7px solid transparent;
    border-left-color: #034093;
    border-left-width: 7px;
    margin-top: -7.5px;
}
.indicator li div{
	padding:0;	
	height:26px;
}
/*--- tablet main ---*/
main{
	margin:0 auto;
	width:100%;
	display:block;
}
.indentBox{
	margin:0 3.28%;
}
.indicator ol{
	margin-bottom:2.28%;
}
.stopFlow li{
    position: relative;
    padding:0 0 0.5em 1.2em;
}

.stopFlow li:before{
	font-weight:normal;
  }
.stopFlow{
	padding-bottom:3.7px;
	border-bottom:1px solid #ccc;
}
.stopFlow ol{
	margin-bottom:3.6%;
}
.sendMail input[type="email"]{
	margin-bottom:2.28%;
	padding:1.71%;
	width:100%;
	height:2.6em;
	border-radius:5px;
}
.sendMail .alert:before{
	border: 1.5vw solid transparent;
    border-bottom-width: 1.8vw;
    border-bottom-color: #FFEAEA;
    top: -3vw;
}
.indentBox .buttonArea {
	margin:7.14% auto 12.7%;
}
.indentBox .buttonArea input[type="submit"]{
	padding:16px 0 14px;
	width:90.2%;
	font-size: 120%;
	border-radius:6px;
	box-shadow:0 4px 0 0 #EF4B4B;
}
.indentBox .buttonArea input[type="submit"]:hover{
	background:#FF6262;
}
.indentBox .buttonArea input[type="submit"]:active{
	box-shadow: none;
    transform: translateY(4px);
    -webkit-transform: translateY(4px);
    -moz-transform: translateY(4px);
    -ms-transform: translateY(4px);
}
.step2 h2{
	width:100%;
}
.step4 h2{
	margin:5.78% auto;
	width:100%;
}
.indentBox .sendMailPic{
	margin:4.28% auto 5.71%;
	width:24.7%;
}
.indentBox .emailBox{
	margin:5.14% auto;
	border:1px solid #CCC;
	width:100%;
	border-radius:4px;
}
.indentBox .buttonArea .backButton{
	padding:16px 0;
	display:block;
	width:22%;
	font-size: 120%;
	border-radius:6px;
	box-shadow:0 4px 0 0 #B3B3B3;
}
.indentBox .buttonArea .backButton:active{
	box-shadow: none;
    transform: translateY(4px);
    -webkit-transform: translateY(4px);
    -moz-transform: translateY(4px);
    -ms-transform: translateY(4px);
}
.step4 .buttonArea .backButton{
	width:260px;
}
.indentBox .checkInfo{
	margin:0 0 5.7%;
}
/*--- tablet mailmagArea ---*/
.indentBox .mailmagArea .mailmagTitle{
	overflow:hidden;
}
.indentBox .mailmagArea h2{
	margin:0 0 14px;
	padding-left:20px;
	position:relative;
}
.indentBox .mailmagArea h2:before{
	content:url(https://img.phoenix.webcrew.co.jp/12200/img/icon_dot_01.gif);
	position:absolute;
	bottom:-2px;
	left:0;
}
.indentBox .mailmagArea h2:before{
	content:url(https://img.phoenix.webcrew.co.jp/12200/img/icon_dot_01.gif);
	position:absolute;
	bottom:-2px;
	left:0;
}
.indentBox .mailmagArea .allCheck{
	margin-bottom:11px;
	display:block;
	padding:6px 10px 6px 27px;
	font-size:73%;
	width:163px;
}
.indentBox .mailmagArea .allCheck:hover{
	background:#F6F6F6;
}
.indentBox .mailmagArea .allCheck:active{
	background:#E0E0E0;
}
.indentBox .mailmagArea .mailmagList{
	clear:both;
	margin-bottom:2.14%;
}
.indentBox .mailmagList li{
	margin-bottom:4px;
	padding:2.43%;
}
.indentBox .mailmagList li:hover{
	background:#E0E0E0;
}
.indentBox .mailmagArea .checkbox input[type="checkbox"]{
	width:20px;
	height:20px;
}
.indentBox .mailmagArea .checkbox input[type=checkbox]:checked:before{
	font-size:98%;
}
.indentBox .mailmagArea .mailmagBox{
	padding-left:2.14%;
}
.indentBox .mailmagArea .mailmagBox .mailmagTitle{
	padding-bottom:1.14%;
}
.indentBox .mailmagArea .mailmagBox .mailmagText{
	font-size:73%;
	line-height:1.6;
}
/*--- tablet footer ---*/
footer{
	padding:20px 0 18px;
	font-size:73%;
}
footer small{
	position:relative;	
}
/*--- tablet error ---*/
.error .indentBox .invalidList{
	margin: 15px 0;
	padding: 17px 15px;
}
.error .indentBox .invalidList li{
	margin-bottom:0;
}
.error .indentBox .invalidList dt{
	margin-bottom:10px;
}
}
/*---------------------------------------
 PC
----------------------------------------*/
@media (min-width:700px) {
/*--- PC common ---*/
h1{
	margin:30px 0 0;
}

/*--- PC header ---*/
header .logoArea{
	padding:30px 0 28px;
	width:700px;
	background:url(https://img.phoenix.webcrew.co.jp/12200/img/logo.gif) no-repeat 0 30px;
}
header img{
	width:335px;
	opacity:0;
}
/*--- PC indicator ---*/
.indicator{
	width:700px;
}
.indicator li{
	width:calc(700px / 3);
	font-size:100%;
}

/*--- PC main ---*/
main{
	width:700px;
}
.indentBox{
	margin:0 23px;
}
.indicator ol{
	margin-bottom:16px;
}
.stopFlow{
	padding-bottom:26px;
}
.stopFlow ol{
	margin-bottom:3.6%;
}
.sendMail input[type="email"]{
	margin-bottom:16px;
	padding:12px;
	width:500px;
	height:45px;
}
.sendMail .alert{
	width:500px;
}
.sendMail .alert span:before{
	left:.4em;
}
.sendMail .alert:before{
	border: 8px solid transparent;
    border-bottom-width: 10px;
    border-bottom-color: #FFEAEA;
    top: -18px;
}
.indentBox .buttonArea {
	margin:50px auto 89px;
}
.indentBox .buttonArea input[type="submit"]{
	padding:16px 0 14px;
	width:350px;
}
.indentBox .buttonArea input[type="submit"]:active{
	box-shadow: none;
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
}
.step2 h2{
	width:100%;
}
.step4 h2{
	margin:5.78% auto;
	width:100%;
}
.indentBox .sendMailPic{
	margin:30px auto 40px;
	width:173px;
}
.indentBox .emailBox{
	margin:36px auto;
	border:1px solid #CCC;
	width:550px;
	border-radius:4px;
}
.indentBox .emailBox .emailTitle{
	padding:8px 0 4px;
}
.indentBox .emailBox .emailAdress{
	padding: 6px 0 5px;
}
.indentBox .buttonArea .backButton{
	padding:16px 0;
	display:block;
	width:150px;
	font-size: 120%;
	border-radius:6px;
	box-shadow:0 5px 0 0 #B3B3B3;
}
.indentBox .buttonArea .backButton:hover{
	background:#d3d3d3;
}
.indentBox .buttonArea .backButton:active{
	box-shadow: none;
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
}
.indentBox .checkInfo{
	margin:0 0 40px;
}
.step4 .buttonArea .backButton{
	width:260px;
}
/*--- PC mailmagArea ---*/
.indentBox .mailmagArea h2{
	width:280px;
	float:left;
}
.indentBox .mailmagArea h2:before{
	content:url(https://img.phoenix.webcrew.co.jp/12200/img/icon_dot_01.gif);
	position:absolute;
	bottom:-2px;
	left:0;
}
.indentBox .mailmagArea .allCheck{
	margin-bottom: 14px;
	display:block;
	padding:6px 10px 6px 27px;
	font-size:73%;
	width:163px;
	float:right;
}
.indentBox .mailmagArea .allCheck:hover{
	background:#F6F6F6;
}
.indentBox .mailmagArea .allCheck:active{
	background:#E0E0E0;
}
.indentBox .mailmagArea .mailmagList{
	clear:both;
	margin-bottom:15px;
}
.indentBox .mailmagList li{
	padding:17px;
	width:654px;
}
.indentBox .mailmagArea .mailmagBox{
	padding-left:15px;
}
.indentBox .mailmagArea .mailmagBox .mailmagTitle{
	padding-bottom:8px;
}
.indentBox .mailmagArea .mailmagBox .mailmagText{
	font-size:73%;
	line-height:1.6;
}
/*---PC footer ---*/
footer small{
    display: inline-block;
    background: url(https://img.phoenix.webcrew.co.jp/12200/img/logo_s.gif) no-repeat 0;
    padding: 2px 0 0 100px;
}
}

/*---------------------------------------
tap-effectButton
----------------------------------------*/
@media (min-width:320px) and (max-width:414px)  {
.indentBox .buttonArea input[type="submit"].tap
{
	box-shadow: 0 0 0 0 transparent;
    transform: translateY(0.25em);
    -webkit-transform: translateY(0.25em);
    -moz-transform: translateY(0.25em);
    -ms-transform: translateY(0.25em);
}
.indentBox .buttonArea .backButton.tap{
	box-shadow: 0 0 0 0 transparent;
    transform: translateY(0.25em);
    -webkit-transform: translateY(0.25em);
    -moz-transform: translateY(0.25em);
    -ms-transform: translateY(0.25em);
}
.indentBox .mailmagArea .allCheck.tap{
	background:#E0E0E0;
}
}