@charset "utf-8";
#navi-area{ margin: 0 auto; padding: 0; }
#area-flow { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 98%; list-style: none; margin: 25px 0 15px 25px; padding: 0;}

/* 未処理 フォント設定  */
#area-flow li { line-height: 5px; width: 23%; padding-top: 30px; position: relative; list-style-type: none; overflow: hidden; color: #BBBBBB; font-size: 18px; text-align: center; background-color: transparent; border-radius: none; border: none;}

/* 未処理 ●外枠(灰) */
#area-flow li::before { content: ""; position: absolute; top: 0; left: 50%; z-index: 2; width: 24px; height: 24px; margin-left: -12px; border: 1px solid #BBBBBB; border-radius: 12px; box-sizing: border-box;}

/* 未処理 罫線 (灰)0%-41.9% ● (白)42%-58% ● (灰)58.01%-100% */
#area-flow li::after { content: ""; position: absolute; top: 11px; left: 50%; z-index: 1; width: 300px; height: 2px; margin-left: -150px; background: -webkit-linear-gradient(left, #BBBBBB 0%, #BBBBBB 41.9%, #FFF 42%, #FFF 58%, #BBBBBB 58.01%, #BBBBBB 100%); background: linear-gradient(to right, #BBBBBB 0%, #BBBBBB 41.9%, #FFF 42%, #FFF 58%, #BBBBBB 58.01%, #BBBBBB 100%);}

/* 処理中 フォント設定 */
#area-flow li.status-active { color: #FF0000; font-weight: bold;}

/* 処理中 ●背景色(黄塗潰し) */
#area-flow li.status-active::before { background-color: #FFF; border: 4px solid #FF0000;}

/* 処理中 罫線 (黄)0%-41.9% ● (白)42%-58% ● (灰)58.01%-100% */
#area-flow li.status-active::after {　background: -webkit-linear-gradient(left, #FF0000 0%, #FF0000 41.9%, #FFF 42%, #FFF 58%, #BBBBBB 58.01%, #BBBBBB 100%); background: linear-gradient(to right, #FF0000 0%, #FF0000 41.9%, #FFF 42%, #FFF 58%, #BBBBBB 58.01%, #BBBBBB 100%);}

/* 処理済 罫線 (黄)0%-41.9% ● (白)42%-58% ● (黄)58.01%-100% */
#area-flow li.status-done::after { background: -webkit-linear-gradient(left, #FF0000 0%, #FF0000 41.9%, #FFF 42%, #FFF 58%, #FF0000 58.01%, #FF0000 100%); background: linear-gradient(to right, #FF0000 0%, #FF0000 41.9%, #FFF 42%, #FFF 58%, #FF0000 58.01%, #FF0000 100%);}

/* 処理済 ●背景色(黄) */
#area-flow li.status-done::before { background: #FF0000; border: none;}

/* 処理済 ●内の✓白抜き  */
#area-flow li.status-done > div::before { content: ""; position: absolute; top: 5px; right: 50%; z-index: 3; width: 5px; height: 10px; margin-right: -3px; border-right: 2px solid #FFF; border-bottom: 2px solid #FFF; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

/* 左端 処理中 罫線 (白)0%-58% ● (灰)58.01%-100% */
#area-flow li:first-child::after { background: -webkit-linear-gradient(left, #FFF 0%, #FFF 58%, #BBBBBB 58.01%, #BBBBBB 100%); background: linear-gradient(to right, #FFF 0%, #FFF 58%, #BBBBBB 58.01%, #BBBBBB 100%);}

/* 左端 処理済 罫線 (白)0%-58% ● (黄)58.01%-100% */
#area-flow li:first-child.status-done::after { background: -webkit-linear-gradient(left, #FFF 0%, #FFF 58%, #FF0000 58.01%, #FF0000 100%); background: linear-gradient(to right, #FFF 0%, #FFF 58%, #FF0000 58.01%, #FF0000 100%);}

/* 右端 未処理 罫線 (灰)0%-41.9% ● (白)42%-100% */
#area-flow li:last-child::after { background: -webkit-linear-gradient(left, #BBBBBB 0%, #BBBBBB 41.9%, #FFF 42%, #FFF 100%); background: linear-gradient(to right, #BBBBBB 0%, #BBBBBB 41.9%, transparent 42%, transparent 100%);}

/* 右端 処理済 罫線 (黄)0%-41.9% ● (白)42%-100% */
#area-flow li:last-child.status-active::after { background: -webkit-linear-gradient(left, #FF0000 0%, #FF0000 41.9%, #FFF 42%, #FFF 100%); background: linear-gradient(to right, #FF0000 0%, #FF0000 41.9%, transparent 42%, transparent 100%);}

.cp_ipradio2 {}
.cp_ipradio2 .box2 { width: 100%; margin: 0.5% auto; text-align: left;}
.cp_ipradio2 .option-input {position: relative; position: relative; top: 7px; right: 0; bottom: 0; left: 0; width: 30px; height: 30px; margin: 0 3%; cursor: pointer; transition: all 0.15s ease-out 0s; color: #ffffff;border: none; outline: none; background: #d7cbcb; -webkit-appearance: none; appearance: none;}
.cp_ipradio2 .option-input:hover {background: #d6a9a9;}
.cp_ipradio2 .option-input:checked {background: #da3c41;}
.cp_ipradio2 .option-input:checked::before {font-size: 15px;line-height: 1; position: absolute;display: inline-block; width: 20px; height: 8px;content: '✔';text-align: center;}
.cp_ipradio2 .option-input:checked::after {position: relative;display: block;content: ''; background: #da3c41;}
.cp_ipradio2 .option-input.radio {border-radius: 50%;}
.cp_ipradio2 .option-input.radio::after {border-radius: 50%;}
.cp_ipradio2 label {display: block;}

/* ラジオボタン・チェックボックス設定  */
.cp_ipradio { -webkit-box-sizing: border-box; box-sizing: border-box;}
.cp_ipradio:before,.cp_ipradio:after { -webkit-box-sizing: inherit; box-sizing: inherit;}
.cp_ipradio .box { width: 100%; margin: 0 auto 0.5em; text-align: left;}
.cp_ipradio input[type=radio] {display: none;}
.cp_ipradio input[type=checkbox] {display: none;}
.cp_ipradio label:focus,
.cp_ipradio label:hover,
.cp_ipradio label:active,
.cp_ipradio input:checked + label {color: #FF0000;}
.cp_ipradio label:focus:before,
.cp_ipradio label:hover:before,
.cp_ipradio label:active:before,
.cp_ipradio input:checked + label:before {border-color: #FF0000; background: #ffffff;}
.cp_ipradio label { font-size: 16px; color: #000; line-height: 1; position: relative;display: block;overflow: hidden; padding: 1em 1em 0.5em 3em; cursor: pointer; -webkit-transition: all 0.15s ease; transition: all 0.15s ease; white-space: nowrap; text-overflow: ellipsis; background: #ffffff;}
.cp_ipradio label:before { position: absolute; top: 1em; left: 1em; width: 10px; height: 10px; content: ''; border: 0.2em solid #BBBBBB; border-radius: 50%;}
.cp_ipradio input:checked + label:before {border-color: #FF0000; background: #FF0000;}
.cp_ipradio input:disabled + label { cursor: not-allowed; color: rgba(0, 0, 0, 0.5); background: #efefef;}
.cp_ipradio input:disabled + label:hover { border-color: rgba(0, 0, 0, 0.1);}
.cp_ipradio input:disabled + label:before { border-color: #ffffff; background: #ffffff;}

/*　画面サイズが896pxまで、以下のスタイル適用 */
@media (max-width: 896px){
#area-flow { width: 90%; margin: 25px auto 15px; padding: 0 0 0 35px;}

/* 未処理 フォント設定  */
#area-flow li { line-height: 5px; width: 23%; padding-top: 30px; font-size: 17px;}

/* ラジオボタン・チェックボックス設定  */
.cp_ipradio label { font-size: 16px;}


}

/*　画面サイズが480pxまで、以下のスタイル適用 */
@media (max-width: 480px){
/* 未処理 フォント設定  */
#area-flow { margin: 25px auto 0;}
#area-flow li { line-height: 5px; width: 22.5%; padding-top: 30px; font-size: 16px;}

/* ラジオボタン・チェックボックス設定  */
.cp_ipradio label { font-size: 15px;}

}

/*　画面サイズが360pxまで、以下のスタイル適用 */
@media (max-width: 360px){
/* 未処理 フォント設定  */
#area-flow { margin: 25px auto 0;}
#area-flow li { line-height: 5px; width: 21.5%; padding-top: 30px; font-size: 15px;}

/* ラジオボタン・チェックボックス設定  */
.cp_ipradio label { font-size: 14px;}

}