@charset "utf-8";

/* 位置表示設定  */
#navi-wrap { width: 100%; margin: 0; padding: 25px 0 10px; border-bottom: solid 1px #DFDFDF;}
#navi-area { width: 1000px; 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: 100%; list-style: none; margin: 0; padding: 0;}

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

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

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

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

/* 処理中 ●背景色(メインカラー塗潰し) */
#area-flow li.status-active::before { background-color: #FFF; border: 4px solid #c0a255;}

/* 処理中 罫線 (メインカラー)0%-41.9% ● (白)42%-58% ● (灰)58.01%-100% */
#area-flow li.status-active::after {　background: -webkit-linear-gradient(left, #c0a255 0%, #c0a255 41.9%, #FFF 42%, #FFF 58%, #DFDFDF 58.01%, #DFDFDF 100%); background: linear-gradient(to right, #c0a255 0%, #c0a255 41.9%, #FFF 42%, #FFF 58%, #DFDFDF 58.01%, #DFDFDF 100%);}

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

/* 処理済 ●背景色(メインカラー) */
#area-flow li.status-done::before { background: #c0a255; border: 4px solid #c0a255;}

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

/* 処理済 フォント  */
.status-note {color: #c0a255;}

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

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

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

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

/* 上に上がる */
#page_top{ width: 40px; height: 15px; position: fixed; right: 10px; bottom: 0px; opacity: 0.8;}
#page_top a{ width: 40px; height: 40px;text-decoration: none;}
#page_top a::before{ font-family: 'FontAwesome'; font-weight: 900; content: '\f0aa'; font-size: 40px; color: #b49850;}

/*　画面サイズが896pxまで、以下のスタイル適用 */
@media (max-width: 896px){
/* 位置表示設定  */
#navi-area { width: 100%;}
}

/*　画面サイズが480pxまで、以下のスタイル適用 */
@media (max-width: 480px){

/* 位置表示設定  */
#navi-area { width: 100%;}
#area-flow li {font-size: 12px;}
}