@charset "utf-8";

/*================================================
   外枠をここで操作
================================================*/
.form-wrapper{
	width: 1400px;
	padding: 0 50px;
	margin: 50px auto;
	box-sizing: border-box;
}

@media only screen and (max-width: 1400px) {
	.form-wrapper{width: 100%; padding: 0 40px;}
}
@media only screen and (max-width: 1160px) {
	.form-wrapper{padding: 0 30px;}
}
@media only screen and (max-width: 835px) {
	.form-wrapper{margin:30px 0;}
}
/*================================================
   タイトル
================================================*/
.form-wrapper h1{
	text-align: center;
	line-height: 1.5em;
	margin: 70px 0;
}
.form-wrapper h1{
	text-align: center;
	line-height: 1.5em;
	margin: 70px 0;
}
/*================================================
   ステップ
================================================*/
.step-bar ol {
    padding-inline-start: 0px;
}
.stepBar {
    display: flex;
    max-width: 800px;
    position: relative;
    margin: 60px auto 60px auto;
    text-align: center;
}

.stepBar li {
    font-size: 16px;
    list-style: none;
    position: relative;
    width: 33.333%;
	color: #aaaaaa;
}
.stepBar .visited {
    color: #333333;
}

.stepBar li:nth-child(n+2):after {
    background: #cccccc;
    content: "";
    width: calc(100% - 48px);
    height: 8px;
    position: absolute;
    left: calc(-50% + 24px);
    top: 20px;
}

.stepBar .visited:after {
    background: #FF9900!important;
}

.stepBar li span {
    background: #cccccc;
    color: #ffffff;
    display: inline-block;
    height: 48px;
    margin-bottom: 5px;
    line-height: 48px;
    width: 48px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.stepBar .visited span {
    background: #FF9900;
}

@media only screen and (max-width: 835px) {
	.stepBar {max-width: 500px;}
	.stepBar li { font-size: 13px;}
	.stepBar li:nth-child(n+2):after {width: calc(100% - 24px); height: 4px; left: calc(-50% + 12px); top: 10px;}
	.stepBar li span {height: 24px; line-height: 24px; width: 24px;}
}
/*================================================
   前提文
================================================*/
.subsection{
	padding:10px 15px;
	background: #eeeeee;
	margin: 45px 0;
}
/*================================================
   区分
================================================*/
.form_head{
	box-sizing: border-box;
	border: 2px solid #f3c886;
	width: 100%;
	padding: 11px 12px;
	margin: 60px 0 5px;
	font-weight: bold;
	font-size: 1.1em;
	color: #555555;
}
.form_head label span{
	font-size: 0.8em;
	font-weight: normal;
}
.form_head label::before{
	content: "●";
	color: #f59b14;
	margin-right: 6px;
}
@media only screen and (max-width: 835px) {
	.form_head{margin-bottom: 20px;}
}
/*================================================
   入力エリア
================================================*/
.form-group-row{
	border-top:1px dotted #aaaaaa;
	padding: 25px 0;
}

.form-group-none{
	border-top:none;
}

.form-group-row > .form-row{
	display: table;
	width: 100%;
}

.form-group-row > .form-row label.col-form-label{
	display: table-cell;
	width: 24%;
	vertical-align: middle;
	padding-right: 1%;
}
.form-group-row > .form-row label.col-form-label > span{
	display: table;
}
.form-group-row > .form-row label.col-form-label > span > span{
	display: table-cell;
	vertical-align: middle;
}
.form-group-row > .form-row label.col-form-label > span > span:first-child{
	padding: 0 12px 0 0;
}
.form-group-row > .form-row label.col-form-label span.badge-danger{
	display: inline-block;
	background-color: #cc0000;
	color: #ffffff;
	font-weight: bold;
	padding: 0px 8px;
	font-size: 0.8em;
	white-space: nowrap;
}

.form-group-row > .form-row label.col-form-label + div{
	display: table-cell;
	width: 75%;
	vertical-align: middle;
}

.form-group-row p{
	margin: 0;
}

div.caption{
	width: 100%;
	background-color: #eeeeee;
	font-weight: bold;
	box-sizing: border-box;
	padding: 4px 8px;
	margin: 20px 0 7px;
	color: #555555;
}

@media only screen and (max-width: 835px) {
	.form-group-row{padding-top: 0; border: none;}
	.form-group-row br{display: none;}
	.form-group-row > .form-row label.col-form-label{display: block; width: 100%; padding: 5px 0 5px 8px; background-color: #dddddd; margin-bottom:8px;} 
	.form-group-row > .form-row label.col-form-label + div{display: block; width: 100%;}
	div.caption{font-weight: normal;}
}

/*================================================
   入力箇所
================================================*/
.input-normal{width: 350px;}
.input-email{width: 450px;}
.input-email-first{width: 200px;}
.input-email-latter{width: 230px;}
.input-tel{width: 90px;}
.input-zip-first{width: 70px;}
.input-zip-latter{width: 90px;}
.input-address{width: 600px;}
.input-other{width: 600px;}

@media only screen and (max-width: 835px) {
	.input-normal{width: 100%;}
	.input-email{width: 100%;}
	.input-email-first{width: 40%}
	.input-email-latter{width: 45%}
	.input-tel{width: 25%}
	.input-zip-first{width: 27%}
	.input-zip-latter{width: 32%;}
	.input-address{width: 100%;}
	.input-other{width: 100%;}
}

/*================================================
   グローバルサイン
================================================*/

.global-sign{
	box-sizing: border-box;
	border: 2px dotted #dddddd;
	padding: 10px 20px;
	width: 100%;
	margin: 70px 0;
	display: table;
}
.global-sign p{
	display: table-cell;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}
.global-sign p:first-child{
	width: 170px;
	padding-right: 20px;
}
.global-sign p:last-child{
	text-align: left;
}
.global-sign p img{
	width: 150px;
	vertical-align: bottom;
}
/*================================================
   チェックボックス ボタン
================================================*/
.checkbox {
    text-align: center;
    margin-bottom: 1rem;
}
.justify-content-center {
    -ms-flex-pack: center!important;
    justify-content: center!important;
}
.justify-content-center div {
	text-align: center;
}

.btn{
	margin: 0 auto;
	border: none;
	width: 300px;
	padding: 10px 20px;
	text-decoration: none;
}

.btn-orange {
    color: #fff;
    background-color: #FF9900;
}
.btn-block {
    display: block;
}
.btn.disabled, .btn:disabled {
    color: #fff;
    background-color: #cccccc;
	cursor: default;
}
.btn-sidemargin{
	margin: 15px 8px;
}

/*================================================
   Simple Cast
================================================*/
dl.simplecast-dlwrap{
	display: table;
}
dl.simplecast-dlwrap div{
	display: table-cell;
}
.simplecast-dlwrap div dt,
.simplecast-dlwrap div dd{
	text-align: center;
}

.simplecast-dlwrap div dd{
	text-align: center;
	margin: 12px 0 0;
}
dl.simplecast-main-photo dd{
	font-size: 0.8em;
}
dl.simplecast-main-photo + p{
	margin:140px 0 100px;
	text-align: center;
	font-size: 1.3em;
	font-weight: bold;
}
section.simplecast-difference{
	box-sizing: border-box;
	margin: 80px 0 10px;
	border: #dddddd solid 10px;
	padding: 10px 25px;
}
section.simplecast-difference h2{
	text-align: center;
}
dl.simplecast-difference div{
	box-sizing: border-box;
}
dl.simplecast-difference div:first-child{
	padding-right: 10px;
}
dl.simplecast-difference div:last-child{
	padding-left: 10px;
}
dl.simplecast-difference div dt{
	color: #D87F00;
	font-weight: bold;
}

.simplecast_policy h4{
	text-align: center;	
}
.simplecast_policy p{
	text-align: center;
}

@media only screen and (max-width: 835px) {
	dl.simplecast-main-photo + p{margin:60px 0 50px; font-size: 1.1em;}
}