/*
 * 申込動線のステップバー。resources/views/components/registration-step-bar.blade.php が
 * このファイルを @push('style') で自分から読み込む。
 *
 * このシートに置くのは申込動線だけが使うもの（.step_bar5 / .step_bar_labeled）に限る。
 * 土台の .step_bar / .step_bar2 / .step_bar4 は休会・退会フォームも使うので style.css・
 * style2.css に残してある。あちらを消すとバーの枠と幅が無くなる。
 */

/* 5 段ぶんの幅指定。既存の 2/3/4 段バーには無い。 */
.step_bar5 {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    border: 2px solid #2B9ACE;
    border-radius: 6px;
    font-weight: bold;
    padding-left: 0px;
}
.step_bar5 li {
    line-height: 26px;
    color: #2B9ACE;
    text-decoration: none;
    padding: 0 15px 0 35px;
    background: #fff;
    display: inline-block;
    width: 20%;
    font-size: 10px;
}
.step_bar5 li small {
    font-size: 80%;
}
.step_bar5 li::after {
    position: relative;
    display: block;
    margin-top: -14px;
    margin-left: auto;
    margin-right: -25px;
    height: 13px;
    width: 20px;
    content: " ";
    transform: skew(-30deg);
    background: #fff;
    border-right: 1px solid #2B9ACE;
}
.step_bar5 li::before {
    float: right;
    display: block;
    margin-bottom: -25px;
    margin-left: auto;
    margin-right: -25px;
    height: 13px;
    width: 20px;
    content: " ";
    transform: skew(30deg);
    background: #fff;
    border-right: 1px solid #2B9ACE;
}
.step_bar5 li:first-child {
    padding-left: 20px;
    border-radius: 5px 0 0 5px;
}
.step_bar5 li:last-child {
    border-radius: 0 5px 5px 0;
}
.step_bar5 li:last-child::before,
.step_bar5 li:last-child::after {
    border: 0;
    background: transparent !important;
}
.step_bar5 li.current {
    background: #2B9ACE;
    color: #fff;
}
.step_bar5 li.current::before,
.step_bar5 li.current::after {
    background: #2B9ACE;
}
.step_bar5 li.current:last-child {
    margin-right: -35px;
    margin-left: 2px;
}
.step_bar5 li.current:last-child::before,
.step_bar5 li.current:last-child::after {
    border: 0;
    background: transparent !important;
}

/*
 * ラベル付きバー。既存の .step_bar4 等は 1 行・固定高さの短いラベルを前提にしており、
 * 「カウンセリング受付」のような長いラベルを入れると矢印の擬似要素ごと崩れる。
 * ここでは li を flex にして中央寄せし、折り返しを許す。
 */
.step_bar_labeled li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 2px 3px 2px 12px;
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
}
.step_bar_labeled li:first-child {
    padding-left: 6px;
}
.step_bar_labeled li > span {
    display: block;
    text-align: center;
}
/*
 * 段の切れ目の矢印。background: inherit で li の地色（current なら塗り）を引き継ぐので、
 * 状態ごとに色を書き分けなくてよい。
 */
.step_bar_labeled li::before,
.step_bar_labeled li::after {
    position: absolute;
    float: none;
    margin: 0;
    left: auto;
    right: -9px;
    width: 9px;
    height: 50%;
    content: " ";
    background: inherit;
    border-right: 1px solid #2B9ACE;
    z-index: 1;
}
.step_bar_labeled li::before {
    top: 0;
    transform: skew(30deg);
}
.step_bar_labeled li::after {
    top: 50%;
    transform: skew(-30deg);
}
/* 最終段の外側に矢印を出さない（枠から飛び出す）。 */
.step_bar_labeled li:last-child::before,
.step_bar_labeled li:last-child::after {
    display: none;
}
.step_bar_labeled li.current:last-child {
    margin-right: 0;
    margin-left: 0;
}