page 流れ系

最終更新：2022/03/08

今まで使っていたタイムライン

今まで使っていたタイムライン2

タイムラインを改修

今まで使っていたタイムライン

今まで使っていたタイムラインです。
真ん中の丸いところの色はHPに合わせて変更します。
「.info」「.primary」「.success」「.warning」「.danger」が丸いところの色を指定するクラスです。

1968年8月

コメントコメントコメントコメントコメントコメントコメントコメント
1

数字を入れても使えます。

コメントコメントコメントコメントコメントコメントコメントコメント
Font Awesome

Font Awesomeのアイコンも使えます。
何も入れなくても大丈夫です。

コメントコメントコメントコメントコメントコメントコメントコメント
1968年8月

コメントコメントコメントコメントコメントコメントコメントコメント

html

<ul class="timeline">
<li>
<div class="timeline-badge info">
<i class="fa fa-circle-thin" aria-hidden="true"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">1968年8月</h4>
</div>
<div class="timeline-body">
<p>コメントコメントコメントコメントコメントコメントコメントコメント</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge primary">
1
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">数字を入れても使えます。</h4>
</div>
<div class="timeline-body">
<p>コメントコメントコメントコメントコメントコメントコメントコメント</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge success">
<i class="fas fa-home"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">

<h4 class="timeline-title">Font Awesome</h4>
</div>
<div class="timeline-body">
<p>Font Awesomeのアイコンも使えます。</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">何も入れなくても大丈夫です。</h4>
</div>
<div class="timeline-body">
<p>コメントコメントコメントコメントコメントコメントコメントコメント</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge danger">
<i class="fa fa-circle-thin" aria-hidden="true"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">1968年8月</h4>
</div>
<div class="timeline-body">
<p>コメントコメントコメントコメントコメントコメントコメントコメント</p>
</div>
</div>
</li>
</ul>

<li>

</div>

</div>

<p>コメントコメントコメントコメントコメントコメントコメントコメント</p>

</div>

</li>

</div>

<h4 class="timeline-title">数字を入れても使えます。</h4>

</div>

<p>コメントコメントコメントコメントコメントコメントコメントコメント</p>

</div>

</li>

<li>

</div>

<h4 class="timeline-title">Font Awesome</h4>

</div>

<p>Font Awesomeのアイコンも使えます。</p>

</div>

</li>

</div>

<h4 class="timeline-title">何も入れなくても大丈夫です。</h4>

</div>

<p>コメントコメントコメントコメントコメントコメントコメントコメント</p>

</div>

</li>

<li>

</div>

</div>

<p>コメントコメントコメントコメントコメントコメントコメントコメント</p>

</div>

</li>

</ul>

css

/*普段のタイムライン タイムライン2共通部分*/
.timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}
.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #eeeeee;
  left: 50%;
  margin-left: -1.5px;
}
.timeline > li {
  margin-bottom: 20px;
  position: relative;
}
.timeline > li:before, .timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
.timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 60px;
}
@media (max-width: 767px) {
  ul.timeline:before {
    left: 40px;
  }
}
@media screen and (max-width: 639px) {
  .timeline > li {
    padding-left: 20px;
  }
}
@media (min-width : 640px) {
  .timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
}
/*普段のタイムラインのみ*/
.timeline > li > .timeline-panel {
  width: 46%;
  float: left;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 20px;
  position: relative;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-left: 15px solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 15px solid transparent;
  content: " ";
}
.timeline > li > .timeline-panel:after {
  position: absolute;
  top: 27px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #fff;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  content: " ";
}
.timeline > li > .timeline-badge {
  color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  top: 16px;
  left: 50%;
  margin-left: -25px;
  background-color: #999999;
  z-index: 100;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
  float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}
.timeline-badge.primary {
  background-color: #333 !important;
}
.timeline-badge.success {
  background-color: #666 !important;
}
.timeline-badge.warning {
  background-color: #999 !important;
}
.timeline-badge.danger {
  background-color: #ccc !important;
}
.timeline-badge.info {
  background-color: #000 !important;
}
.timeline-title {
  margin-top: 0;
  color: inherit;
}
.timeline-body > p, .timeline-body > ul {
  margin-bottom: 0;
}
.timeline-body > p + p {
  margin-top: 5px;
}
@media (max-width: 767px) {
  ul.timeline > li > .timeline-panel {
    width: calc(100% - 90px);
    width: -moz-calc(100% - 90px);
    width: -webkit-calc(100% - 90px);
  }
  ul.timeline > li > .timeline-badge {
    left: 15px;
    margin-left: 0;
    top: 16px;
  }
  ul.timeline > li > .timeline-panel {
    float: right;
  }
  ul.timeline > li > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
  }
  ul.timeline > li > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

/*普段のタイムラインタイムライン2共通部分*/

.timeline {

list-style: none;

padding: 20px 0 20px;

position: relative;

}

.timeline:before {

top: 0;

bottom: 0;

position: absolute;

content: " ";

width: 3px;

background-color: #eeeeee;

left: 50%;

margin-left: -1.5px;

}

.timeline > li {

margin-bottom: 20px;

position: relative;

}

.timeline > li:before, .timeline > li:after {

content: " ";

display: table;

}

.timeline > li:after {

clear: both;

}

.timeline {

list-style: none;

}

.timeline > li {

margin-bottom: 60px;

}

@media (max-width: 767px) {

ul.timeline:before {

left: 40px;

}

@media screen and (max-width: 639px) {

.timeline > li {

padding-left: 20px;

}

@media (min-width : 640px) {

.timeline > li {

overflow: hidden;

margin: 0;

position: relative;

}

/*普段のタイムラインのみ*/

.timeline > li > .timeline-panel {

width: 46%;

float: left;

border: 1px solid #d4d4d4;

border-radius: 2px;

padding: 20px;

position: relative;

-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

}

.timeline > li > .timeline-panel:before {

position: absolute;

top: 26px;

right: -15px;

display: inline-block;

border-top: 15px solid transparent;

border-left: 15px solid #ccc;

border-right: 0 solid #ccc;

border-bottom: 15px solid transparent;

content: " ";

}

.timeline > li > .timeline-panel:after {

position: absolute;

top: 27px;

right: -14px;

display: inline-block;

border-top: 14px solid transparent;

border-left: 14px solid #fff;

border-right: 0 solid #fff;

border-bottom: 14px solid transparent;

content: " ";

}

.timeline > li > .timeline-badge {

color: #fff;

width: 50px;

height: 50px;

line-height: 50px;

font-size: 1.4em;

text-align: center;

position: absolute;

top: 16px;

left: 50%;

margin-left: -25px;

background-color: #999999;

z-index: 100;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

.timeline > li.timeline-inverted > .timeline-panel {

float: right;

}

.timeline > li.timeline-inverted > .timeline-panel:before {

border-left-width: 0;

border-right-width: 15px;

left: -15px;

right: auto;

}

.timeline > li.timeline-inverted > .timeline-panel:after {

border-left-width: 0;

border-right-width: 14px;

left: -14px;

right: auto;

}

.timeline-badge.primary {

background-color: #333 !important;

}

.timeline-badge.success {

background-color: #666 !important;

}

.timeline-badge.warning {

background-color: #999 !important;

}

.timeline-badge.danger {

background-color: #ccc !important;

}

.timeline-badge.info {

background-color: #000 !important;

}

.timeline-title {

margin-top: 0;

color: inherit;

}

.timeline-body > p, .timeline-body > ul {

margin-bottom: 0;

}

.timeline-body > p + p {

margin-top: 5px;

}

@media (max-width: 767px) {

ul.timeline > li > .timeline-panel {

width: calc(100% - 90px);

width: -moz-calc(100% - 90px);

width: -webkit-calc(100% - 90px);

}

ul.timeline > li > .timeline-badge {

left: 15px;

margin-left: 0;

top: 16px;

}

ul.timeline > li > .timeline-panel {

float: right;

}

ul.timeline > li > .timeline-panel:before {

border-left-width: 0;

border-right-width: 15px;

left: -15px;

right: auto;

}

ul.timeline > li > .timeline-panel:after {

border-left-width: 0;

border-right-width: 14px;

left: -14px;

right: auto;

}

今まで使っていたタイムライン2

今まで使っていたタイムラインの吹き出しが無い版です。
丸いところの色はHPに合わせて変更します。
「.timeline-content:before」で丸いところの色を指定しています。

2007年2月

テキストテキスト

コメントコメントコメントコメントコメントコメントコメントコメント
2007年2月

テキストテキスト

コメントコメントコメントコメントコメントコメントコメントコメント

html

      <div class="center-none">
        <ul class="timeline">
          <li>
            <p class="timeline-date">2007年2月</p>
            <div class="timeline-content">
              <p class="time">テキストテキスト</p>
              <p>コメントコメントコメントコメントコメントコメントコメントコメント</p>
            </div>
          </li>
          <li>
            <p class="timeline-date">2007年2月</p>
            <div class="timeline-content">
              <p class="time">テキストテキスト</p>
              <p>コメントコメントコメントコメントコメントコメントコメントコメント</p>
            </div>
          </li>
        </ul>
      </div>

<li>

<p class="time">テキストテキスト</p>

<p>コメントコメントコメントコメントコメントコメントコメントコメント</p>

</div>

</li>

<li>

<p class="time">テキストテキスト</p>

<p>コメントコメントコメントコメントコメントコメントコメントコメント</p>

</div>

</li>

</ul>

</div>

css

/*普段のタイムライン タイムライン2共通部分*/
.timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}
.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #eeeeee;
  left: 50%;

  margin-left: -1.5px;
}
.timeline > li {
  margin-bottom: 20px;
  position: relative;
}
.timeline > li:before, .timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
.timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 60px;
}
@media (max-width: 767px) {
  ul.timeline:before {
    left: 40px;
  }
}
@media screen and (max-width: 639px) {
  .timeline > li {
    padding-left: 20px;
  }
}
@media (min-width : 640px) {
  .timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
}
/* タイムライン2のみ */
.center-none .timeline:before {
  display: none;
}
@media screen and (max-width: 639px) {
  .center-none .timeline {
    border-left: 3px solid #eee;
  }
  .center-none .timeline > li:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #000;
    position: absolute;
    left: -7px;
    top: 50%;
    border-radius: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
@media (min-width : 640px) {
  .timeline-date {
    width: 110px;
    float: left;
    margin-top: 20px;
  }
  .timeline-content {
    width: 75%;
    float: left;
    padding-left: 30px;
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: #F1F1F1;
  }
  .timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #000;
    position: absolute;
    left: 106px;
    top: 24px;
    border-radius: 100%;
  }
}

/*普段のタイムラインタイムライン2共通部分*/

.timeline {

list-style: none;

padding: 20px 0 20px;

position: relative;

}

.timeline:before {

top: 0;

bottom: 0;

position: absolute;

content: " ";

width: 3px;

background-color: #eeeeee;

left: 50%;

margin-left: -1.5px;

}

.timeline > li {

margin-bottom: 20px;

position: relative;

}

.timeline > li:before, .timeline > li:after {

content: " ";

display: table;

}

.timeline > li:after {

clear: both;

}

.timeline {

list-style: none;

}

.timeline > li {

margin-bottom: 60px;

}

@media (max-width: 767px) {

ul.timeline:before {

left: 40px;

}

@media screen and (max-width: 639px) {

.timeline > li {

padding-left: 20px;

}

@media (min-width : 640px) {

.timeline > li {

overflow: hidden;

margin: 0;

position: relative;

}

/* タイムライン2のみ */

.center-none .timeline:before {

display: none;

}

@media screen and (max-width: 639px) {

.center-none .timeline {

border-left: 3px solid #eee;

}

.center-none .timeline > li:before {

content: '';

width: 12px;

height: 12px;

background: #000;

position: absolute;

left: -7px;

top: 50%;

border-radius: 100%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

@media (min-width : 640px) {

.timeline-date {

width: 110px;

float: left;

margin-top: 20px;

}

.timeline-content {

width: 75%;

float: left;

padding-left: 30px;

border-left-width: 3px;

border-left-style: solid;

border-left-color: #F1F1F1;

}

.timeline-content:before {

content: '';

width: 12px;

height: 12px;

background: #000;

position: absolute;

left: 106px;

top: 24px;

border-radius: 100%;

}

今まで使っていたタイムラインを改修

今まで使っていたタイムラインを改修して作りました。
吹き出しの背景色を白にしているところがあるので、全体を背景色のクラスで囲んでいます。

1

ヒアリング

お客様のご希望・イメージをヒアリングします。ご参考に実際の施工事例の写真や建材サンプルなどもご覧になれます。
Font Awesome

丸の中にアイコンも入れられます。
企画・ご提案

何も入れなくても大丈夫です。
4

不動産のご契約

不動産売買契約を行います。ローン申し込み・弊社とのご契約も併せて行います。
5

その他お手続き

ローンの契約・リノベーションの打合せなどを行います。
6

図面・パースのご確認

図面・CGパースを作成し、ご確認いただきます。
7

施工

お客様と作成したプランが実際に形になっていきます。工事前には近隣へのご挨拶も致しますのでご安心ください。
8

お引渡し

リノベーション完了です。お客様へ物件を引き渡します。お引渡し後のアフターケアもお任せ下さい。

html

        <div class="page_time-Edit-line">
          <ul class="time-Edit-line">
            <li>
              <div class="time-Edit-line-badge">1</div>
              <div class="time-Edit-line-panel">
                <div class="time-Edit-line-heading"><p class="time-Edit-line-title">ヒアリング</p></div>
                <div class="time-Edit-line-body">
                  <p>お客様のご希望・イメージをヒアリングします。ご参考に実際の施工事例の写真や建材サンプルなどもご覧になれます。</p>
                </div>
              </div>
            </li>
            <li>
              <div class="time-Edit-line-badge"><i class="fas fa-home"></i></div>
              <div class="time-Edit-line-panel">
                <div class="time-Edit-line-heading"><p class="time-Edit-line-title">Font Awesome</p></div>
                <div class="time-Edit-line-body">
                  <p>丸の中にアイコンも入れられます。</p>
                </div>
              </div>
            </li>
            <li>
              <div class="time-Edit-line-badge"></div>
              <div class="time-Edit-line-panel">
                <div class="time-Edit-line-heading"><p class="time-Edit-line-title">企画・ご提案</p></div>
                <div class="time-Edit-line-body">
                  <p>何も入れなくても大丈夫です。</p>
                </div>
              </div>
            </li>
            <li>
              <div class="time-Edit-line-badge">4</div>
              <div class="time-Edit-line-panel">
                <div class="time-Edit-line-heading"><p class="time-Edit-line-title">不動産のご契約</p></div>
                <div class="time-Edit-line-body">
                  <p>不動産売買契約を行います。ローン申し込み・弊社とのご契約も併せて行います。</p>
                </div>
              </div>
            </li>
            <li>
              <div class="time-Edit-line-badge">5</div>
              <div class="time-Edit-line-panel">
                <div class="time-Edit-line-heading"><p class="time-Edit-line-title">その他お手続き</p></div>
                <div class="time-Edit-line-body">
                  <p>ローンの契約・リノベーションの打合せなどを行います。</p>
                </div>
              </div>
            </li>
            <li>
              <div class="time-Edit-line-badge">6</div>
              <div class="time-Edit-line-panel">
                <div class="time-Edit-line-heading"><p class="time-Edit-line-title">図面・パースのご確認</p></div>
                <div class="time-Edit-line-body">
                  <p>図面・CGパースを作成し、ご確認いただきます。</p>
                </div>
              </div>
            </li>
            <li>
              <div class="time-Edit-line-badge">7</div>
              <div class="time-Edit-line-panel">
                <div class="time-Edit-line-heading"><p class="time-Edit-line-title">施工</p></div>
                <div class="time-Edit-line-body">
                  <p>お客様と作成したプランが実際に形になっていきます。工事前には近隣へのご挨拶も致しますのでご安心ください。</p>
                </div>
              </div>
            </li>
            <li>
              <div class="time-Edit-line-badge">8</div>
              <div class="time-Edit-line-panel">
                <div class="time-Edit-line-heading"><p class="time-Edit-line-title">お引渡し</p></div>
                <div class="time-Edit-line-body">
                  <p>リノベーション完了です。お客様へ物件を引き渡します。お引渡し後のアフターケアもお任せ下さい。</p>
                </div>
              </div>
            </li>
          </ul>
        </div>

<li>

<div class="time-Edit-line-heading"><p class="time-Edit-line-title">ヒアリング</p></div>

<p>お客様のご希望・イメージをヒアリングします。ご参考に実際の施工事例の写真や建材サンプルなどもご覧になれます。</p>

</div>

</li>

<li>

<div class="time-Edit-line-heading"><p class="time-Edit-line-title">Font Awesome</p></div>

<p>丸の中にアイコンも入れられます。</p>

</div>

</li>

<li>

<p>何も入れなくても大丈夫です。</p>

</div>

</li>

<li>

<div class="time-Edit-line-heading"><p class="time-Edit-line-title">不動産のご契約</p></div>

<p>不動産売買契約を行います。ローン申し込み・弊社とのご契約も併せて行います。</p>

</div>

</li>

<li>

<div class="time-Edit-line-heading"><p class="time-Edit-line-title">その他お手続き</p></div>

<p>ローンの契約・リノベーションの打合せなどを行います。</p>

</div>

</li>

<li>

<div class="time-Edit-line-heading"><p class="time-Edit-line-title">図面・パースのご確認</p></div>

<p>図面・CGパースを作成し、ご確認いただきます。</p>

</div>

</li>

<li>

<p>お客様と作成したプランが実際に形になっていきます。工事前には近隣へのご挨拶も致しますのでご安心ください。</p>

</div>

</li>

<li>

<p>リノベーション完了です。お客様へ物件を引き渡します。お引渡し後のアフターケアもお任せ下さい。</p>

</div>

</li>

</ul>

</div>

css

.time-Edit-line {
  list-style: none;
  padding: 0;
  position: relative;
}
.time-Edit-line:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 2px;
  background-color: #777;
  left: 50%;
  margin-left: -1.5px;
}
.center-none .time-Edit-line:before {
  display: none;
}
.time-Edit-line > li {
  margin-bottom: 20px;
  position: relative;
}
.page_time-Edit-line .time-Edit-line > li {
  padding-left: 0;
  display: flex;
}
.time-Edit-line > li:before, .time-Edit-line > li:after {
  content: " ";
  display: table;
}
.time-Edit-line > li:after {
  clear: both;
}
.time-Edit-line > li:before, .time-Edit-line > li:after {
  content: " ";
  display: table;
}
.time-Edit-line > li:after {
  clear: both;
}
.time-Edit-line > li > .time-Edit-line-panel {
  width: 46%;
  border-radius: 2px;
  padding: 20px;
  position: relative;
  background-color: #fff;
  flex-grow: 1;
  margin-left: 1.5rem;
}
.time-Edit-line > li:nth-child(even) > .time-Edit-line-panel {
  background-color: #eaeaea;
}
.time-Edit-line > li > .time-Edit-line-panel:after {
  position: absolute;
  top: 12px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #fff;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  content: " ";
}
.time-Edit-line > li:nth-child(even) > .time-Edit-line-panel:after {
  border-left: 0 solid #eaeaea;
  border-right: 14px solid #eaeaea;
}
.time-Edit-line > li > .time-Edit-line-badge {
  color: #565656;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1.6rem;
  text-align: center;
  position: relative;
  background-color: #fff;
  z-index: 100;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */
  border: 2px #565656 solid;
  font-weight: 700;
}
.time-Edit-line > li.time-Edit-line-inverted > .time-Edit-line-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}
.time-Edit-line > li.time-Edit-line-inverted > .time-Edit-line-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}
.time-Edit-line-badge.primary {
  background-color: #444 !important;
}
.time-Edit-line-badge.success {
  background-color: #666 !important;
}
.time-Edit-line-badge.warning {
  background-color: #888 !important;
}
.time-Edit-line-badge.danger {
  background-color: #aaa !important;
}
.time-Edit-line-badge.info {
  background-color: #222 !important;
}
.time-Edit-line-title {
  margin-top: 0;
  color: inherit;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  margin-bottom: 1rem;
}
.time-Edit-line-body > p, .time-Edit-line-body > ul {
  margin-bottom: 0;
}
.time-Edit-line-body > p + p {
  margin-top: 5px;
}
ul.time-Edit-line:before {
  left: 25px;
}
ul.time-Edit-line > li > .time-Edit-line-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}
ul.time-Edit-line > li > .time-Edit-line-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}
.time-Edit-line {
  list-style: none;
}
.time-Edit-line > li {
  margin-bottom: 60px;
}
.page_time-Edit-line .time-Edit-line > li {
  margin-bottom: 0;
}
.time {
  font-size: 1.4rem;
  font-weight: bold;
}
@media screen and (min-width: 1200px) {
  .page_time-Edit-line {
    padding-top: 2rem;
  }
  ul.time-Edit-line:before {
    left: 31px;
  }
  .time-Edit-line > li > .time-Edit-line-badge {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 2rem;
  }
  .time-Edit-line > li > .time-Edit-line-panel {
    padding: 30px;
  }
  .time-Edit-line-title {
    font-size: 1.4rem;
  }
  .time-Edit-line-body > p {
    font-size: 1.1rem
  }
}
/* for Desktop */
@media (min-width : 640px) {
  .time-Edit-line > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
}
@media screen and (max-width: 639px) {
  .time-Edit-line > li {
    padding-left: 20px;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

.time-Edit-line {

list-style: none;

padding: 0;

position: relative;

}

.time-Edit-line:before {

top: 0;

bottom: 0;

position: absolute;

content: " ";

width: 2px;

background-color: #777;

left: 50%;

margin-left: -1.5px;

}

.center-none .time-Edit-line:before {

display: none;

}

.time-Edit-line > li {

margin-bottom: 20px;

position: relative;

}

.page_time-Edit-line .time-Edit-line > li {

padding-left: 0;

display: flex;

}

.time-Edit-line > li:before, .time-Edit-line > li:after {

content: " ";

display: table;

}

.time-Edit-line > li:after {

clear: both;

}

.time-Edit-line > li:before, .time-Edit-line > li:after {

content: " ";

display: table;

}

.time-Edit-line > li:after {

clear: both;

}

.time-Edit-line > li > .time-Edit-line-panel {

width: 46%;

border-radius: 2px;

padding: 20px;

position: relative;

background-color: #fff;

flex-grow: 1;

margin-left: 1.5rem;

}

.time-Edit-line > li:nth-child(even) > .time-Edit-line-panel {

background-color: #eaeaea;

}

.time-Edit-line > li > .time-Edit-line-panel:after {

position: absolute;

top: 12px;

right: -14px;

display: inline-block;

border-top: 14px solid transparent;

border-left: 14px solid #fff;

border-right: 0 solid #fff;

border-bottom: 14px solid transparent;

content: " ";

}

.time-Edit-line > li:nth-child(even) > .time-Edit-line-panel:after {

border-left: 0 solid #eaeaea;

border-right: 14px solid #eaeaea;

}

.time-Edit-line > li > .time-Edit-line-badge {

color: #565656;

width: 50px;

height: 50px;

line-height: 50px;

font-size: 1.6rem;

text-align: center;

position: relative;

background-color: #fff;

z-index: 100;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */

border: 2px #565656 solid;

font-weight: 700;

}

.time-Edit-line > li.time-Edit-line-inverted > .time-Edit-line-panel:before {

border-left-width: 0;

border-right-width: 15px;

left: -15px;

right: auto;

}

.time-Edit-line > li.time-Edit-line-inverted > .time-Edit-line-panel:after {

border-left-width: 0;

border-right-width: 14px;

left: -14px;

right: auto;

}

.time-Edit-line-badge.primary {

background-color: #444 !important;

}

.time-Edit-line-badge.success {

background-color: #666 !important;

}

.time-Edit-line-badge.warning {

background-color: #888 !important;

}

.time-Edit-line-badge.danger {

background-color: #aaa !important;

}

.time-Edit-line-badge.info {

background-color: #222 !important;

}

.time-Edit-line-title {

margin-top: 0;

color: inherit;

font-weight: 700;

font-size: 1.2rem;

letter-spacing: 0.1rem;

margin-bottom: 1rem;

}

.time-Edit-line-body > p, .time-Edit-line-body > ul {

margin-bottom: 0;

}

.time-Edit-line-body > p + p {

margin-top: 5px;

}

ul.time-Edit-line:before {

left: 25px;

}

ul.time-Edit-line > li > .time-Edit-line-panel:before {

border-left-width: 0;

border-right-width: 15px;

left: -15px;

right: auto;

}

ul.time-Edit-line > li > .time-Edit-line-panel:after {

border-left-width: 0;

border-right-width: 14px;

left: -14px;

right: auto;

}

.time-Edit-line {

list-style: none;

}

.time-Edit-line > li {

margin-bottom: 60px;

}

.page_time-Edit-line .time-Edit-line > li {

margin-bottom: 0;

}

.time {

font-size: 1.4rem;

font-weight: bold;

}

@media screen and (min-width: 1200px) {

.page_time-Edit-line {

padding-top: 2rem;

}

ul.time-Edit-line:before {

left: 31px;

}

.time-Edit-line > li > .time-Edit-line-badge {

width: 60px;

height: 60px;

line-height: 60px;

font-size: 2rem;

}

.time-Edit-line > li > .time-Edit-line-panel {

padding: 30px;

}

.time-Edit-line-title {

font-size: 1.4rem;

}

.time-Edit-line-body > p {

font-size: 1.1rem

}

/* for Desktop */

@media (min-width : 640px) {

.time-Edit-line > li {

overflow: hidden;

margin: 0;

position: relative;

}

@media screen and (max-width: 639px) {

.time-Edit-line > li {

padding-left: 20px;

}

上下左右中央にアイコンとテキスト

「div.sun_like_flow>div.slh1+slh2」で作ってください。
今回はリストではなくrowで括ることを想定して作りました。
「slh1」がアイコン、「slh2」がテキスト用です。

html

	<div class="row">
		<div class="col-12 m20-bottom">
			<div class="sun_like_flow">
				<div class="slh1"><div class="slf_icon"><i class="fas fa-home"></i></div></div>
				<div class="slh2">
					<p class="slh_h2">上下左右中央にアイコンとテキスト</p>
					<p>「div.sun_like_flow&gt;div.slh1+slh2」で作ってください。<br>今回はリストではなくrowで括ることを想定して作りました。<br>「slh1」がアイコン、「slh2」がテキスト用です。</p>
				</div>
			</div>
		</div>
	</div>

<p class="slh_h2">上下左右中央にアイコンとテキスト</p>

<p>「div.sun_like_flow>div.slh1+slh2」で作ってください。<br>今回はリストではなくrowで括ることを想定して作りました。<br>「slh1」がアイコン、「slh2」がテキスト用です。</p>

</div>

css

.sun_like_flow {
  background-color: #fff;
  border: 2px #000 solid;
  padding: 0 5% 5% 5%;
  width: 100%;
}
.slh1 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}
.slf_icon {
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  font-weight: bold;
}
.slh_h2 {
  width: 100%;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1.2rem;
}
@media screen and (min-width: 768px) {
  .sun_like_flow {
    padding: 5% 5% 5% 0;
    display: flex;
  }
  .slh1 {
    min-width: 150px;
    min-height: auto;
  }
  .slf_icon {
    width: 70px;
    height: 70px;
    font-size: 2.4rem;
  }
  .slh2 p:last-child {
    margin-bottom: 0;
  }
  .slh_h2 {
    width: auto;
    font-size: 1.4rem;
    font-weight: bold;
  }
}
@media screen and (min-width: 1200px) {
  .sun_like_flow {
    padding: 2rem 5% 2rem 0;
  }
}

.sun_like_flow {

background-color: #fff;

border: 2px #000 solid;

padding: 0 5% 5% 5%;

width: 100%;

}

.slh1 {

display: flex;

justify-content: center;

align-items: center;

min-height: 100px;

}

.slf_icon {

width: 55px;

height: 55px;

display: flex;

justify-content: center;

align-items: center;

font-size: 1.8rem;

background-color: #000;

color: #fff;

border-radius: 50%;

font-weight: bold;

}

.slh_h2 {

width: 100%;

font-size: 1.2rem;

font-weight: bold;

margin-bottom: 1.2rem;

}

@media screen and (min-width: 768px) {

.sun_like_flow {

padding: 5% 5% 5% 0;

display: flex;

}

.slh1 {

min-width: 150px;

min-height: auto;

}

.slf_icon {

width: 70px;

height: 70px;

font-size: 2.4rem;

}

.slh2 p:last-child {

margin-bottom: 0;

}

.slh_h2 {

width: auto;

font-size: 1.4rem;

font-weight: bold;

}

@media screen and (min-width: 1200px) {

.sun_like_flow {

padding: 2rem 5% 2rem 0;

}

上下左右中央にアイコンとテキスト横並び

左右のテキスト量が違うとき

上下左右中央にアイコンとテキスト横並び

高さが揃わない場合、「h-100」を「col」直下の「sun_like_flow」につけてください。
その場合、「col」の直下の子要素は「sun_like_flow」のみにしてください。

  <div class="row">
  <div class="col-6">
    <div class="sun_like_flow h-100">
      <div class="slh1"><div class="slf_icon"><i class="fas fa-home"></i></div></div>
      <div class="slh2">
        <p class="slh_h2">上下左右中央にアイコンとテキスト横並び</p>
        <p>左右のテキスト量が違うとき</p>
        </div>
      </div>
  </div>
      <div class="col-6">
        <div class="sun_like_flow">
          <div class="slh1"><div class="slf_icon">1</div></div>
          <div class="slh2">
            <p class="slh_h2">上下左右中央にアイコンとテキスト横並び</p>
            <p>高さが揃わない場合、「h-100」を「col」直下の「sun_like_flow」につけてください。<br>その場合、「col」の直下の子要素は「sun_like_flow」のみにしてください。</p>
          </div>
        </div>
    </div>
    </div>

<p class="slh_h2">上下左右中央にアイコンとテキスト横並び</p>

<p>左右のテキスト量が違うとき</p>

</div>

<p class="slh_h2">上下左右中央にアイコンとテキスト横並び</p>

<p>高さが揃わない場合、「h-100」を「col」直下の「sun_like_flow」につけてください。<br>その場合、「col」の直下の子要素は「sun_like_flow」のみにしてください。</p>

</div>

左側アイコンが被るリスト

Font Awesome

Font Awesomeのアイコンも入れられます。
1

数字も可能

数字であれば、テーマの英語フォントに合わせてもいいかもしれません。
背景色などもテーマに合わせて変更してください。
リノベーション勉強会

参加者限定！セミナー形式でリノベーションに役立つ情報をお伝えします。

html

      <ul class="List_covered_icon">
        <li>
          <div class="el_icon"><span><i class="fas fa-home"></i></span></div>
          <p class="lci_tit">Font Awesome</p>
          <p>Font Awesomeのアイコンも入れられます。</p>
          </li>
        <li>
          <div class="el_icon"><span>1</span></div>
          <p class="lci_tit">数字も可能</p>
          <p>数字であれば、テーマの英語フォントに合わせてもいいかもしれません。<br>背景色などもテーマに合わせて変更してください。</p>
          </li>
        <li class="lci_tit">
          <div class="el_icon"><span></span></div>
          <p>リノベーション勉強会</p>
          <p>参加者限定！セミナー形式でリノベーションに役立つ情報をお伝えします。</p>
          </li>
        </ul>

<li>

<p class="lci_tit">Font Awesome</p>

<p>Font Awesomeのアイコンも入れられます。</p>

</li>

<li>

<p class="lci_tit">数字も可能</p>

<p>数字であれば、テーマの英語フォントに合わせてもいいかもしれません。<br>背景色などもテーマに合わせて変更してください。</p>

</li>

<p>リノベーション勉強会</p>

<p>参加者限定！セミナー形式でリノベーションに役立つ情報をお伝えします。</p>

</li>

</ul>

css

.List_covered_icon {
  width: 100%;
}
.List_covered_icon li {
  list-style: none;
  margin-bottom: 1rem;
  position: relative;
  background-color: #f7f7f7;
  border: 2px #000 solid;
  display: block;
  padding: 2rem 1.5rem 1rem 40px;
  width: calc(100% - 30px);
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .List_covered_icon li {
    padding: 2rem 1.5rem 1rem 50px;
  }
}
/* icon */
.el_icon {
  width: 60px;
  height: 60px;
  background-color: #ffd52b;
  border: 2px #000 solid;
  position: absolute;
  left: -30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
  border-radius: 50%;
}
.el_icon > span {
  line-height: 58px;
  font-size: 1.6rem;
  font-weight: bold;
}
.el_icon img {
  max-width: 100%;
}
/* text */
.List_covered_icon li .lci_tit {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.List_covered_icon li p {
  font-size: 0.9rem;
  letter-spacing: 0.05rem;
}
@media screen and (min-width: 768px) {
  .List_covered_icon li p {
    font-size: 1rem;
  }
}

.List_covered_icon {

width: 100%;

}

.List_covered_icon li {

list-style: none;

margin-bottom: 1rem;

position: relative;

background-color: #f7f7f7;

border: 2px #000 solid;

display: block;

padding: 2rem 1.5rem 1rem 40px;

width: calc(100% - 30px);

margin-left: auto;

}

@media screen and (min-width: 768px) {

.List_covered_icon li {

padding: 2rem 1.5rem 1rem 50px;

}

/* icon */

.el_icon {

width: 60px;

height: 60px;

background-color: #ffd52b;

border: 2px #000 solid;

position: absolute;

left: -30px;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

text-align: center;

border-radius: 50%;

}

.el_icon > span {

line-height: 58px;

font-size: 1.6rem;

font-weight: bold;

}

.el_icon img {

max-width: 100%;

}

/* text */

.List_covered_icon li .lci_tit {

font-weight: 700;

font-size: 1.2rem;

margin-bottom: 1rem;

}

.List_covered_icon li p {

font-size: 0.9rem;

letter-spacing: 0.05rem;

}

@media screen and (min-width: 768px) {

.List_covered_icon li p {

font-size: 1rem;

}

縦の流れ

1

左に数字もしくはアイコン、右にテキストが入る流れです。
Font Awesomeのアイコンも可
2

数字・アイコン側はクラスを追記すれば背景色や字の色を変更したりできます。
3

数字アイコン側角丸も可

html

<ul class="column_flow">
	<li>
		<div class="cf_icon">1</div>
		<div class="cf_txt">左に数字もしくはアイコン、右にテキストが入る流れです。</div>
	</li>
	<li>
		<div class="cf_icon"><i class="fas fa-home"></i></div>
		<div class="cf_txt">Font Awesomeのアイコンも可</div>
	</li>
	<li>
		<div class="cf_icon cf_i_c1">2</div>
		<div class="cf_txt">数字・アイコン側はクラスを追記すれば背景色や字の色を変更したりできます。</div>
	</li>
	<li>
		<div class="cf_icon cf_i_c2">3</div>
		<div class="cf_txt">数字アイコン側角丸も可</div>
	</li>
</ul>

<li>

<div class="cf_txt">左に数字もしくはアイコン、右にテキストが入る流れです。</div>

</li>

<li>

<div class="cf_txt">Font Awesomeのアイコンも可</div>

</li>

<li>

<div class="cf_txt">数字・アイコン側はクラスを追記すれば背景色や字の色を変更したりできます。</div>

</li>

<li>

<div class="cf_txt">数字アイコン側角丸も可</div>

</li>

</ul>

css

/*枠*/
.column_flow{
	margin-bottom: 0;
	position: relative;
}
.column_flow::before{
	content: " ";
	display: block;
	position: absolute;
	width: 2px;
	height: 99%;
	top: 0.5%;
	left: calc(1rem + 18px);
	background-color: #ddd;
}
/*li*/
.column_flow li{
	background-color: #000;
	color: #fff;
	list-style: none;
	display: flex;
	padding: 1rem;
	align-items: center;
	margin-bottom: 1rem;
	position: relative;
}
/*icon*/
.cf_icon{
	width: 40px;
	min-width: 40px;
	height: 40px;
	background-color: #fff;
	color: #000;
	font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cf_icon.cf_i_c1{
	background-color: #000;
	color: #fff;
}
.cf_icon.cf_i_c2{
	border-radius: 50%;
}
/*テキスト*/
.cf_txt{
	flex-grow: 1;
	padding-left: 1rem;
}

/*枠*/

.column_flow{

margin-bottom: 0;

position: relative;

}

.column_flow::before{

content: " ";

display: block;

position: absolute;

width: 2px;

height: 99%;

top: 0.5%;

left: calc(1rem + 18px);

background-color: #ddd;

}

/*li*/

.column_flow li{

background-color: #000;

color: #fff;

list-style: none;

display: flex;

padding: 1rem;

align-items: center;

margin-bottom: 1rem;

position: relative;

}

/*icon*/

.cf_icon{

width: 40px;

min-width: 40px;

height: 40px;

background-color: #fff;

color: #000;

font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */

font-size: 1.2rem;

display: flex;

align-items: center;

justify-content: center;

}

.cf_icon.cf_i_c1{

background-color: #000;

color: #fff;

}

.cf_icon.cf_i_c2{

border-radius: 50%;

}

/*テキスト*/

.cf_txt{

flex-grow: 1;

padding-left: 1rem;

}

縦の流れ背景色無し

1

上のやつのli背景色が無いバージョンです
背景色が無いだけであとは基本的に同じです
2

同じようにクラス追記で変更可能
3

テキストテキスト
テキストテキスト

html

<ul class="column_flow_bgn">
	<li>
		<div class="cf_icon_bgn">1</div>
		<div class="cf_txt_bgn">上のやつのli背景色が無いバージョンです</div>
	</li>
	<li>
		<div class="cf_icon_bgn"><i class="fas fa-home"></i></div>
		<div class="cf_txt_bgn">背景色が無いだけであとは基本的に同じです</div>
	</li>
	<li>
		<div class="cf_icon_bgn cf_ib_c1">2</div>
		<div class="cf_txt_bgn">同じようにクラス追記で変更可能</div>
	</li>
	<li>
		<div class="cf_icon_bgn cf_ib_c2">3</div>
		<div class="cf_txt">テキストテキスト<br>テキストテキスト</div>
	</li>
</ul>

<li>

<div class="cf_txt_bgn">上のやつのli背景色が無いバージョンです</div>

</li>

<li>

<div class="cf_txt_bgn">背景色が無いだけであとは基本的に同じです</div>

</li>

<li>

<div class="cf_txt_bgn">同じようにクラス追記で変更可能</div>

</li>

<li>

<div class="cf_txt">テキストテキスト<br>テキストテキスト</div>

</li>

</ul>

css

/*枠*/
.column_flow_bgn{
	margin-bottom: 0;
	position: relative;
}
.column_flow_bgn::before{
	content: " ";
	display: block;
	position: absolute;
	width: 2px;
	height: 95%;
	top: 2.5%;
	left: 18px;
	background-color: #ddd;
}
/*li*/
.column_flow_bgn li{
	list-style: none;
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	position: relative;
}
.column_flow_bgn li:last-of-type{
	margin-bottom: 0;
}
/*icon*/
.cf_icon_bgn{
	width: 40px;
	min-width: 40px;
	height: 40px;
	background-color: #fff;
	color: #000;
	font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: auto;
}
.cf_icon_bgn.cf_ib_c1{
	background-color: #000;
	color: #fff;
}
.cf_icon_bgn.cf_ib_c2{
	background-color: #000;
	color: #fff;
	border-radius: 50%;
}
/*テキスト*/
.cf_txt_bgn{
	flex-grow: 1;
	padding-left: 1rem;
}

/*枠*/

.column_flow_bgn{

margin-bottom: 0;

position: relative;

}

.column_flow_bgn::before{

content: " ";

display: block;

position: absolute;

width: 2px;

height: 95%;

top: 2.5%;

left: 18px;

background-color: #ddd;

}

/*li*/

.column_flow_bgn li{

list-style: none;

display: flex;

align-items: center;

margin-bottom: 1rem;

position: relative;

}

.column_flow_bgn li:last-of-type{

margin-bottom: 0;

}

/*icon*/

.cf_icon_bgn{

width: 40px;

min-width: 40px;

height: 40px;

background-color: #fff;

color: #000;

font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */

font-size: 1.2rem;

display: flex;

align-items: center;

justify-content: center;

margin-right: auto;

}

.cf_icon_bgn.cf_ib_c1{

background-color: #000;

color: #fff;

}

.cf_icon_bgn.cf_ib_c2{

background-color: #000;

color: #fff;

border-radius: 50%;

}

/*テキスト*/

.cf_txt_bgn{

flex-grow: 1;

padding-left: 1rem;

}

スマホ縦・PC横の流れ

1

縦の流れがPCで横に流れます
基本的に同じです
2

テキストテキスト
3

テキストテキストテキストテキスト
4

途中の英数字を縦にするときは1
5

テキストテキストテキストテキスト
テキストテキスト
6

テキストテキストテキストテキスト
7

テキストテキストテキストテキスト
8

テキストテキストテキストテキスト
9

テキストテキストテキストテキスト
10

テキストテキストテキストテキスト
11

liは多くても12くらいまでにした方がいいです。

html

<ul class="column_row_flow">
	<li>
		<div class="crf_icon">1</div>
		<div class="crf_txt"><a href="#f06">縦の流れ</a>がPCで横に流れます</div>
	</li>
	<li>
		<div class="crf_icon"><i class="fas fa-home"></i></div>
		<div class="crf_txt">基本的に同じです</div>
	</li>
	<li>
		<div class="crf_icon crf_i_c1">2</div>
		<div class="crf_txt">テキストテキスト</div>
	</li>
	<li>
		<div class="crf_icon crf_i_c2">3</div>
		<div class="crf_txt">テキストテキストテキストテキスト</div>
	</li>
	<li>
		<div class="crf_icon">4</div>
		<div class="crf_txt">途中の英数字を縦にするときは<span class="font_orientation">1</span></div>
	</li>
	<li>
		<div class="crf_icon">5</div>
		<div class="crf_txt">テキストテキストテキストテキスト<br>テキストテキスト</div>
	</li>
	<li>
		<div class="crf_icon">6</div>
		<div class="crf_txt">テキストテキストテキストテキスト</div>
	</li>
	<li>
		<div class="crf_icon">7</div>
		<div class="crf_txt">テキストテキストテキストテキスト</div>
	</li>
	<li>
		<div class="crf_icon">8</div>
		<div class="crf_txt">テキストテキストテキストテキスト</div>
	</li>
	<li>
		<div class="crf_icon">9</div>
		<div class="crf_txt">テキストテキストテキストテキスト</div>
	</li>
	<li>
		<div class="crf_icon">10</div>
		<div class="crf_txt">テキストテキストテキストテキスト</div>
	</li>
	<li>
		<div class="crf_icon">11</div>
		<div class="crf_txt">liは多くても12くらいまでにした方がいいです。</div>
	</li>
</ul>

<li>

<div class="crf_txt"><a href="#f06">縦の流れ</a>がPCで横に流れます</div>

</li>

<li>

<div class="crf_txt">基本的に同じです</div>

</li>

<li>

<div class="crf_txt">テキストテキスト</div>

</li>

<li>

<div class="crf_txt">テキストテキストテキストテキスト</div>

</li>

<li>

<div class="crf_txt">途中の英数字を縦にするときは<span class="font_orientation">1</span></div>

</li>

<li>

<div class="crf_txt">テキストテキストテキストテキスト<br>テキストテキスト</div>

</li>

<li>

<div class="crf_txt">テキストテキストテキストテキスト</div>

</li>

<li>

<div class="crf_txt">テキストテキストテキストテキスト</div>

</li>

<li>

<div class="crf_txt">テキストテキストテキストテキスト</div>

</li>

<li>

<div class="crf_txt">テキストテキストテキストテキスト</div>

</li>

<li>

<div class="crf_txt">テキストテキストテキストテキスト</div>

</li>

<li>

<div class="crf_txt">liは多くても12くらいまでにした方がいいです。</div>

</li>

</ul>

css

/*枠*/
.column_row_flow{
	margin-bottom: 0;
	position: relative;
}
.column_row_flow::before{
	content: " ";
	display: block;
	position: absolute;
	width: 2px;
	height: 99%;
	top: 0.5%;
	left: calc(1rem + 18px);
	background-color: #ddd;
}
@media screen and (min-width: 992px){
	.column_row_flow{
		display: flex;
		justify-content: space-between;
	}
	.column_row_flow::before{
		width: 99%;
		height: 2px;
		top: calc(1rem + 18px);
		left: 0;
	}
	.crf_reverse{
		flex-direction: row-reverse;
	}
}
/*li*/
.column_row_flow li{
	background-color: #000;
	color: #fff;
	list-style: none;
	display: flex;
	padding: 1rem;
	align-items: center;
	margin-bottom: 1rem;
	position: relative;
}
@media screen and (min-width: 992px){
	.column_row_flow li{
		display: block;
		margin-bottom: 0;
		text-align: center;
	}
}
/*icon*/
.crf_icon{
	width: 40px;
	min-width: 40px;
	height: 40px;
	background-color: #fff;
	color: #000;
	font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.crf_icon.crf_i_c1{
	background-color: #000;
	color: #fff;
}
.crf_icon.crf_i_c2{
	border-radius: 50%;
}
@media screen and (min-width: 992px){
	.crf_icon{
		margin-right: auto;
		margin-left: auto;
	}
}
/*テキスト*/
.crf_txt{
	flex-grow: 1;
	padding-left: 1rem;
}
@media screen and (min-width: 992px){
	.crf_txt{
		-webkit-writing-mode: vertical-rl;
			-ms-writing-mode: tb-rl;
				writing-mode: vertical-rl;
		padding-left: 0;
		padding-top: 1rem;
		display:inline-block;
		text-align: left;
	}
}

/*枠*/

.column_row_flow{

margin-bottom: 0;

position: relative;

}

.column_row_flow::before{

content: " ";

display: block;

position: absolute;

width: 2px;

height: 99%;

top: 0.5%;

left: calc(1rem + 18px);

background-color: #ddd;

}

@media screen and (min-width: 992px){

.column_row_flow{

display: flex;

justify-content: space-between;

}

.column_row_flow::before{

width: 99%;

height: 2px;

top: calc(1rem + 18px);

left: 0;

}

.crf_reverse{

flex-direction: row-reverse;

}

/*li*/

.column_row_flow li{

background-color: #000;

color: #fff;

list-style: none;

display: flex;

padding: 1rem;

align-items: center;

margin-bottom: 1rem;

position: relative;

}

@media screen and (min-width: 992px){

.column_row_flow li{

display: block;

margin-bottom: 0;

text-align: center;

}

/*icon*/

.crf_icon{

width: 40px;

min-width: 40px;

height: 40px;

background-color: #fff;

color: #000;

font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */

font-size: 1.2rem;

display: flex;

align-items: center;

justify-content: center;

}

.crf_icon.crf_i_c1{

background-color: #000;

color: #fff;

}

.crf_icon.crf_i_c2{

border-radius: 50%;

}

@media screen and (min-width: 992px){

.crf_icon{

margin-right: auto;

margin-left: auto;

}

/*テキスト*/

.crf_txt{

flex-grow: 1;

padding-left: 1rem;

}

@media screen and (min-width: 992px){

.crf_txt{

-webkit-writing-mode: vertical-rl;

-ms-writing-mode: tb-rl;

writing-mode: vertical-rl;

padding-left: 0;

padding-top: 1rem;

display:inline-block;

text-align: left;

}

右から左の流れにするときは「column_row_flow」に「crf_reverse」のクラスを付けてください。

1

liの数に対して幅が広すぎるときは
rowなどで幅を変更してください。
2

テキストテキスト
3

テキストテキスト

スマホ縦・PC横の流れ背景色無し

1

縦の流れ背景色無しがPCで横に流れます
基本的に同じです
2

テキストテキスト
3

テキストテキストテキストテキスト
4

途中の英数字を縦にするときは1
5

テキストテキストテキストテキスト
テキストテキスト
6

テキストテキストテキストテキスト
7

テキストテキストテキストテキスト
8

テキストテキストテキストテキスト
9

テキストテキストテキストテキスト
10

テキストテキストテキストテキスト
11

liは多くても12くらいまでにした方がいいです。

html

<ul class="column_row_flow_bgn">
	<li>
		<div class="crf_icon_bgn">1</div>
		<div class="crf_txt_bgn"><a href="#f07">縦の流れ背景色無し</a>がPCで横に流れます</div>
	</li>
	<li>
		<div class="crf_icon_bgn"><i class="fas fa-home"></i></div>
		<div class="crf_txt_bgn">基本的に同じです</div>
	</li>
	<li>
		<div class="crf_icon_bgn crf_ib_c1">2</div>
		<div class="crf_txt_bgn">テキストテキスト</div>
	</li>
	<li>
		<div class="crf_icon_bgn crf_ib_c2">3</div>
		<div class="crf_txt_bgn">テキストテキストテキストテキスト</div>
	</li>
	<li>
		<div class="crf_icon_bgn">4</div>
		<div class="crf_txt_bgn">途中の英数字を縦にするときは<span class="font_orientation">1</span></div>
	</li>
	<li>
		<div class="crf_icon_bgn">5</div>
		<div class="crf_txt_bgn">テキストテキストテキストテキスト<br>テキストテキスト</div>
	</li>
	<li>
		<div class="crf_icon_bgn">6</div>
		<div class="crf_txt_bgn">テキストテキストテキストテキスト</div>
	</li>
	<li>
		<div class="crf_icon_bgn">7</div>
		<div class="crf_txt_bgn">テキストテキストテキストテキスト</div>
	</li>
	<li>
		<div class="crf_icon_bgn">8</div>
		<div class="crf_txt_bgn">テキストテキストテキストテキスト</div>
	</li>
	<li>
		<div class="crf_icon_bgn">9</div>
		<div class="crf_txt_bgn">テキストテキストテキストテキスト</div>
	</li>
	<li>
		<div class="crf_icon_bgn">10</div>
		<div class="crf_txt_bgn">テキストテキストテキストテキスト</div>
	</li>
	<li>
		<div class="crf_icon_bgn">11</div>
		<div class="crf_txt_bgn">liは多くても12くらいまでにした方がいいです。</div>
	</li>
</ul>

<li>

<div class="crf_txt_bgn"><a href="#f07">縦の流れ背景色無し</a>がPCで横に流れます</div>

</li>

<li>

<div class="crf_txt_bgn">基本的に同じです</div>

</li>

<li>

<div class="crf_txt_bgn">テキストテキスト</div>

</li>

<li>

<div class="crf_txt_bgn">テキストテキストテキストテキスト</div>

</li>

<li>

<div class="crf_txt_bgn">途中の英数字を縦にするときは<span class="font_orientation">1</span></div>

</li>

<li>

<div class="crf_txt_bgn">テキストテキストテキストテキスト<br>テキストテキスト</div>

</li>

<li>

<div class="crf_txt_bgn">テキストテキストテキストテキスト</div>

</li>

<li>

<div class="crf_txt_bgn">テキストテキストテキストテキスト</div>

</li>

<li>

<div class="crf_txt_bgn">テキストテキストテキストテキスト</div>

</li>

<li>

<div class="crf_txt_bgn">テキストテキストテキストテキスト</div>

</li>

<li>

<div class="crf_txt_bgn">テキストテキストテキストテキスト</div>

</li>

<li>

<div class="crf_txt_bgn">liは多くても12くらいまでにした方がいいです。</div>

</li>

</ul>

css

/*枠*/
.column_row_flow_bgn{
	margin-bottom: 0;
	position: relative;
}
.column_row_flow_bgn::before{
	content: " ";
	display: block;
	position: absolute;
	width: 2px;
	height: 95%;
	top: 2.5%;
	left: 18px;
	background-color: #ddd;
}
@media screen and (min-width: 992px){
	.column_row_flow_bgn{
		display: flex;
		justify-content: space-between;
	}
	.column_row_flow_bgn::before{
		width: 99%;
		height: 2px;
		top: 18px;
		left: 0;
	}
}
/*li*/
.column_row_flow_bgn li{
	list-style: none;
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	position: relative;
}
.column_row_flow_bgn li:last-of-type{
	margin-bottom: 0;
}
@media screen and (min-width: 992px){
	.column_row_flow_bgn li{
		display: block;
		text-align: center;
	}
}
/*icon*/
.crf_icon_bgn{
	width: 40px;
	min-width: 40px;
	height: 40px;
	background-color: #fff;
	color: #000;
	font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: auto;
}
.crf_icon_bgn.crf_ib_c1{
	background-color: #000;
	color: #fff;
}
.crf_icon_bgn.crf_ib_c2{
	background-color: #000;
	color: #fff;
	border-radius: 50%;
}
@media screen and (min-width: 992px){
	.crf_icon_bgn{
		margin-right: auto;
		margin-left: auto;
	}
}
/*テキスト*/
.crf_txt_bgn{
	flex-grow: 1;
	padding-left: 1rem;
}
@media screen and (min-width: 992px){
	.crf_txt_bgn{
		-webkit-writing-mode: vertical-rl;
			-ms-writing-mode: tb-rl;
				writing-mode: vertical-rl;
		padding-left: 0;
		padding-top: 1rem;
		display:inline-block;
		text-align: left;
	}
}

/*枠*/

.column_row_flow_bgn{

margin-bottom: 0;

position: relative;

}

.column_row_flow_bgn::before{

content: " ";

display: block;

position: absolute;

width: 2px;

height: 95%;

top: 2.5%;

left: 18px;

background-color: #ddd;

}

@media screen and (min-width: 992px){

.column_row_flow_bgn{

display: flex;

justify-content: space-between;

}

.column_row_flow_bgn::before{

width: 99%;

height: 2px;

top: 18px;

left: 0;

}

/*li*/

.column_row_flow_bgn li{

list-style: none;

display: flex;

align-items: center;

margin-bottom: 1rem;

position: relative;

}

.column_row_flow_bgn li:last-of-type{

margin-bottom: 0;

}

@media screen and (min-width: 992px){

.column_row_flow_bgn li{

display: block;

text-align: center;

}

/*icon*/

.crf_icon_bgn{

width: 40px;

min-width: 40px;

height: 40px;

background-color: #fff;

color: #000;

font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */

font-size: 1.2rem;

display: flex;

align-items: center;

justify-content: center;

margin-right: auto;

}

.crf_icon_bgn.crf_ib_c1{

background-color: #000;

color: #fff;

}

.crf_icon_bgn.crf_ib_c2{

background-color: #000;

color: #fff;

border-radius: 50%;

}

@media screen and (min-width: 992px){

.crf_icon_bgn{

margin-right: auto;

margin-left: auto;

}

/*テキスト*/

.crf_txt_bgn{

flex-grow: 1;

padding-left: 1rem;

}

@media screen and (min-width: 992px){

.crf_txt_bgn{

-webkit-writing-mode: vertical-rl;

-ms-writing-mode: tb-rl;

writing-mode: vertical-rl;

padding-left: 0;

padding-top: 1rem;

display:inline-block;

text-align: left;

}

右から左の流れにするときは「column_row_flow_bgn」に「crf_reverse」のクラスを付けてください。
「column_row_flow」と「column_row_flow_bgn」の「crf_reverse」は共通です。

1

liの数に対して幅が広すぎるときは
rowなどで幅を変更してください。
2

テキストテキスト
3

テキストテキスト

before-after応用

これの応用です

下へ誘導するようなアイコンがあれば
流れのように使えるかと思いましたがいかがでしょうか。

お問合せへの誘導に使っても良いかもしれません。

お問合せはこちらとか

html

		<div class="txt-center">
		<p><a href="http://mgm.moo.jp/cms010/underlayer/page-before-after#bfaf01">これ</a>の応用です</p>
		<div class="bfaf_arrow_down"></div>
			<p>下へ誘導するようなアイコンがあれば<br>流れのように使えるかと思いましたがいかがでしょうか。</p>
		<div class="bfaf_arrow_down"></div>
			<p>お問合せへの誘導に使っても良いかもしれません。</p>
		<div class="bfaf_arrow_down"></div>
			<div class="row">
				<div class="col-md-6 offset-md-3 col-lg-4 offset-lg-4"><div class="page-area"><a href="">お問合せはこちらとか</a></div></div>
			</div>
		</div>

<p><a href="http://mgm.moo.jp/cms010/underlayer/page-before-after#bfaf01">これ</a>の応用です</p>

<p>下へ誘導するようなアイコンがあれば<br>流れのように使えるかと思いましたがいかがでしょうか。</p>

<p>お問合せへの誘導に使っても良いかもしれません。</p>

<div class="col-md-6 offset-md-3 col-lg-4 offset-lg-4"><div class="page-area"><a href="">お問合せはこちらとか</a></div></div>

</div>

福家産業様（リブレットハウス）で作成

STEP01

お問い合わせ・資料請求

資料請求、またはお電話やメールなどでお問い合わせください。
モデルハウスや見学会へご案内いたします。

資料請求はこちら

お問い合わせはこちら
STEP02

相談会・イベント来場

私たちとお客様との出会い。
相談会やイベントにご来場いただき、
私たちの家づくりへの想い、こだわりに触れてください。

モデルハウス来場予約

イベント来場予約
STEP03

資金計画

お家を建ててからの充実した暮らしを叶えるために、ご家族のこれからを考えたライフプランをご提案いたします。
STEP04

ヒアリング

「理想の暮らしを教えてください」その問いに、お客さまの数だけ「想い」がありました。一つとして同じ「想い」はなく、暮らしの価値観は人によって様々。家づくりで叶えたい暮らしについてお聞かせください。

html

<ul class="flow_list_a">
	<li>
		<div class="fla_no">STEP<span>01</span></div>
		<div class="fla_txt">
			<p class="pri_tit">お問い合わせ・資料請求</p>
			<div class="row">
				<div class="col-12 col-md-6"><p><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0004.jpg" alt=""></p></div>
				<div class="col-12 col-md-6">
					<div class="row h-100 align-items-center">
						<div class="col-12">
					<p>資料請求、またはお電話やメールなどでお問い合わせください。<br>モデルハウスや見学会へご案内いたします。</p>
					<div class="row">
						<div class="col-12 col-lg-6">
					<div class="page-more"><a href="#">資料請求はこちら</a></div>
						</div>
						<div class="col-12 col-lg-6">
					<div class="page-area"><a href="#">お問い合わせはこちら</a></div>
						</div>
					</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</li>
	<li>
		<div class="fla_no">STEP<span>02</span></div>
		<div class="fla_txt">
			<p class="pri_tit">相談会・イベント来場</p>
			<div class="row">
				<div class="col-12 col-md-6"><p><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0003.jpg" alt=""></p></div>
				<div class="col-12 col-md-6">
					<div class="row h-100 align-items-center">
						<div class="col-12">
					<p>私たちとお客様との出会い。<br>相談会やイベントにご来場いただき、<br>私たちの家づくりへの想い、こだわりに触れてください。</p>
					<div class="row">
						<div class="col-12 col-lg-6">
					<div class="page-more"><a href="#">モデルハウス来場予約</a></div>
						</div>
						<div class="col-12 col-lg-6">
					<div class="page-area"><a href="#">イベント来場予約</a></div>
						</div>
					</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</li>
	<li>
		<div class="fla_no">STEP<span>03</span></div>
		<div class="fla_txt">
			<p class="pri_tit">資金計画</p>
			<div class="row">
				<div class="col-12 col-md-6"><p><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0002.jpg" alt=""></p></div>
				<div class="col-12 col-md-6">
					<div class="row h-100 align-items-center">
						<div class="col-12">
					<p>お家を建ててからの充実した暮らしを叶えるために、ご家族のこれからを考えたライフプランをご提案いたします。</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</li>
	<li>
		<div class="fla_no">STEP<span>04</span></div>
		<div class="fla_txt">
			<p class="pri_tit">ヒアリング</p>
			<div class="row">
				<div class="col-12 col-md-6"><p><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0001.jpg" alt=""></p></div>
				<div class="col-12 col-md-6">
					<div class="row h-100 align-items-center">
						<div class="col-12">
					<p>「理想の暮らしを教えてください」その問いに、お客さまの数だけ「想い」がありました。一つとして同じ「想い」はなく、暮らしの価値観は人によって様々。家づくりで叶えたい暮らしについてお聞かせください。</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</li>
</ul>

<li>

<p class="pri_tit">お問い合わせ・資料請求</p>

<p>資料請求、またはお電話やメールなどでお問い合わせください。<br>モデルハウスや見学会へご案内いたします。</p>

<div class="page-more"><a href="#">資料請求はこちら</a></div>

</div>

<div class="page-area"><a href="#">お問い合わせはこちら</a></div>

</div>

</li>

<li>

<p class="pri_tit">相談会・イベント来場</p>

<p>私たちとお客様との出会い。<br>相談会やイベントにご来場いただき、<br>私たちの家づくりへの想い、こだわりに触れてください。</p>

<div class="page-more"><a href="#">モデルハウス来場予約</a></div>

</div>

<div class="page-area"><a href="#">イベント来場予約</a></div>

</div>

</li>

<li>

<p>お家を建ててからの充実した暮らしを叶えるために、ご家族のこれからを考えたライフプランをご提案いたします。</p>

</div>

</li>

<li>

<p class="pri_tit">ヒアリング</p>

<p>「理想の暮らしを教えてください」その問いに、お客さまの数だけ「想い」がありました。一つとして同じ「想い」はなく、暮らしの価値観は人によって様々。家づくりで叶えたい暮らしについてお聞かせください。</p>

</div>

</li>

</ul>

css

.pri_tit{
	border-left: 4px #484343 solid;
	font-weight: bold;
	padding-left: 1rem;
	font-size: 1.2rem;
}
.flow_list_a li{
	list-style: none;
	display: flex;
}
.fla_no{
	width: 50px;
	font-family: "Open Sans", sans-serif;
	color: #fff;
	position: relative;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	text-align: center;
	font-weight: 700;
}
.flow_list_a li:nth-of-type(odd) .fla_no{
	background-color: #bbb;
}
.flow_list_a li:nth-of-type(even) .fla_no{
	background-color: #999;
}
.fls_b .flow_list_a li:nth-of-type(odd) .fla_no{
	background-color: #777;
}
.fls_b .flow_list_a li:nth-of-type(even) .fla_no{
	background-color: #555;
}
.flow_list_a li:not(:first-of-type):nth-of-type(odd) .fla_no::before,.flow_list_a li:not(:first-of-type):nth-of-type(even) .fla_no::before{
	content: " ";
	display: block;
	border-right: 25px transparent solid;
	border-left: 25px transparent solid;
	position: absolute;
	top: -1px;
	left: 0;
}
.flow_list_a li:not(:first-of-type):nth-of-type(odd) .fla_no:before{
	border-top: 25px #999 solid;
}
.flow_list_a li:not(:first-of-type):nth-of-type(even) .fla_no:before{
	border-top: 25px #bbb solid;
}
.fls_b .flow_list_a li:not(:first-of-type):nth-of-type(odd) .fla_no:before{
	border-top: 25px #555 solid;
}
.fls_b .flow_list_a li:not(:first-of-type):nth-of-type(even) .fla_no:before{
	border-top: 25px #777 solid;
}
.flow_list_a li:last-of-type .fla_no::after{
	content: " ";
	display: block;
	border-right: 25px transparent solid;
	border-left: 25px transparent solid;
	position: absolute;
	bottom: -24px;
	left: 0;
}
.flow_list_a li:last-of-type:nth-of-type(odd) .fla_no:after{
	border-top: 25px #bbb solid;
}
.flow_list_a li:last-of-type:nth-of-type(even) .fla_no:after{
	border-top: 25px #999 solid;
}
.fls_b .flow_list_a li:last-of-type:nth-of-type(odd) .fla_no:after{
	border-top: 25px #777 solid;
}
.fls_b .flow_list_a li:last-of-type:nth-of-type(even) .fla_no:after{
	border-top: 25px #555 solid;
}
.fla_no span{
	display: block;
	width: 100%;
	font-size: 2rem;
	line-height: 1;
}
.fla_txt{
	width: calc(100% - 50px);
	padding: 30px 1.5rem 0.5rem;
}
@media screen and (min-width: 992px){
	.fla_txt{
		padding: 50px 5% 1rem;
	}
}

.pri_tit{

border-left: 4px #484343 solid;

font-weight: bold;

padding-left: 1rem;

font-size: 1.2rem;

}

.flow_list_a li{

list-style: none;

display: flex;

}

.fla_no{

width: 50px;

font-family: "Open Sans", sans-serif;

color: #fff;

position: relative;

display: flex;

justify-content: center;

align-content: center;

flex-wrap: wrap;

text-align: center;

font-weight: 700;

}

.flow_list_a li:nth-of-type(odd) .fla_no{

background-color: #bbb;

}

.flow_list_a li:nth-of-type(even) .fla_no{

background-color: #999;

}

.fls_b .flow_list_a li:nth-of-type(odd) .fla_no{

background-color: #777;

}

.fls_b .flow_list_a li:nth-of-type(even) .fla_no{

background-color: #555;

}

.flow_list_a li:not(:first-of-type):nth-of-type(odd) .fla_no::before,.flow_list_a li:not(:first-of-type):nth-of-type(even) .fla_no::before{

content: " ";

display: block;

border-right: 25px transparent solid;

border-left: 25px transparent solid;

position: absolute;

top: -1px;

left: 0;

}

.flow_list_a li:not(:first-of-type):nth-of-type(odd) .fla_no:before{

border-top: 25px #999 solid;

}

.flow_list_a li:not(:first-of-type):nth-of-type(even) .fla_no:before{

border-top: 25px #bbb solid;

}

.fls_b .flow_list_a li:not(:first-of-type):nth-of-type(odd) .fla_no:before{

border-top: 25px #555 solid;

}

.fls_b .flow_list_a li:not(:first-of-type):nth-of-type(even) .fla_no:before{

border-top: 25px #777 solid;

}

.flow_list_a li:last-of-type .fla_no::after{

content: " ";

display: block;

border-right: 25px transparent solid;

border-left: 25px transparent solid;

position: absolute;

bottom: -24px;

left: 0;

}

.flow_list_a li:last-of-type:nth-of-type(odd) .fla_no:after{

border-top: 25px #bbb solid;

}

.flow_list_a li:last-of-type:nth-of-type(even) .fla_no:after{

border-top: 25px #999 solid;

}

.fls_b .flow_list_a li:last-of-type:nth-of-type(odd) .fla_no:after{

border-top: 25px #777 solid;

}

.fls_b .flow_list_a li:last-of-type:nth-of-type(even) .fla_no:after{

border-top: 25px #555 solid;

}

.fla_no span{

display: block;

width: 100%;

font-size: 2rem;

line-height: 1;

}

.fla_txt{

width: calc(100% - 50px);

padding: 30px 1.5rem 0.5rem;

}

@media screen and (min-width: 992px){

.fla_txt{

padding: 50px 5% 1rem;

}

石塚建設様で作成

STEP01

お問い合わせ・資料請求

お電話やホームページからメールでお問い合わせください。
資料請求も随時受け付けております。

お問い合わせ

資料請求

STEP02

イベント・無料相談

私たちとの出会いのきっかけに。
イベントや相談会では、私たちの家づくりへの想い・こだわりに触れることができます。

イベント情報

無料相談

STEP03

資金計画

お家を建ててから始まる新しい暮らしを、無理なく充実して過ごせるように。
ご家族のこれからの生活を考えた資金計画を立案します。

STEP04

ヒアリング

お客様ごとに「理想の暮らし」は様々。
お客様の数だけ生まれる「想い」をお聞かせください。

html

<div class="line_arrow_flow">
	
	<div class="laf_inner">
		<p class="lafi_no"><span>STEP</span>01</p>
		<div class="lafi_contents">
			<div class="row">
				<div class="col-12 col-md-5"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/simple01.jpg" alt=""></div>
				<div class="col-12 col-md-7">
					<p class="lafict_tit">お問い合わせ・資料請求</p>
					<p class="mb-0 mb-md-2">お電話やホームページからメールでお問い合わせください。<br>資料請求も随時受け付けております。</p>
					<div class="row">
						<div class="col-6">
							<div class="page-area"><a href="#">お問い合わせ</a></div>
						</div>
						<div class="col-6">
							<div class="page-more"><a href="#">資料請求</a></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="laf_inner">
		<p class="lafi_no"><span>STEP</span>02</p>
		<div class="lafi_contents">
			<div class="row">
				<div class="col-12 col-md-5"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/simple02.jpg" alt=""></div>
				<div class="col-12 col-md-7">
					<p class="lafict_tit">イベント・無料相談</p>
					<p class="mb-0 mb-md-2">私たちとの出会いのきっかけに。<br>イベントや相談会では、私たちの家づくりへの想い・こだわりに触れることができます。</p>
					<div class="row">
						<div class="col-6">
							<div class="page-area"><a href="#">イベント情報</a></div>
						</div>
						<div class="col-6">
							<div class="page-more"><a href="#">無料相談</a></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="laf_inner">
		<p class="lafi_no"><span>STEP</span>03</p>
		<div class="lafi_contents">
			<div class="row">
				<div class="col-12 col-md-5"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/simple03.jpg" alt=""></div>
				<div class="col-12 col-md-7">
					<p class="lafict_tit">資金計画</p>
					<p>お家を建ててから始まる新しい暮らしを、無理なく充実して過ごせるように。<br>ご家族のこれからの生活を考えた資金計画を立案します。</p>
				</div>
			</div>
		</div>
	</div>
	
	<div class="laf_inner">
		<p class="lafi_no"><span>STEP</span>04</p>
		<div class="lafi_contents">
			<div class="row">
				<div class="col-12 col-md-5"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/simple04.jpg" alt=""></div>
				<div class="col-12 col-md-7">
					<p class="lafict_tit">ヒアリング</p>
					<p>お客様ごとに「理想の暮らし」は様々。<br>お客様の数だけ生まれる「想い」をお聞かせください。</p>
				</div>
			</div>
		</div>
	</div>
	
</div>

<p class="lafict_tit">お問い合わせ・資料請求</p>

<p class="mb-0 mb-md-2">お電話やホームページからメールでお問い合わせください。<br>資料請求も随時受け付けております。</p>

<div class="page-area"><a href="#">お問い合わせ</a></div>

</div>

</div>

<p class="mb-0 mb-md-2">私たちとの出会いのきっかけに。<br>イベントや相談会では、私たちの家づくりへの想い・こだわりに触れることができます。</p>

<div class="page-area"><a href="#">イベント情報</a></div>

</div>

</div>

<p>お家を建ててから始まる新しい暮らしを、無理なく充実して過ごせるように。<br>ご家族のこれからの生活を考えた資金計画を立案します。</p>

</div>

<p class="lafict_tit">ヒアリング</p>

<p>お客様ごとに「理想の暮らし」は様々。<br>お客様の数だけ生まれる「想い」をお聞かせください。</p>

</div>

css

.line_arrow_flow{
	margin-bottom: 40px;
}
.laf_inner{
	padding: 0 15px 20px 0;
	border-bottom: 1px #ccc solid;
	display: flex;
	position: relative;
	margin-bottom: 30px;
}
.laf_inner::before{
	content: " ";
	border-top: 20px #ccc solid;
	border-right: 25px transparent solid;
	border-left: 25px transparent solid;
	display: block;
	position: absolute;
	bottom: -20px;
	left: 10px;
}
.laf_inner::after{
	content: " ";
	border-top: 20px #fff solid;
	border-right: 25px transparent solid;
	border-left: 25px transparent solid;
	display: block;
	position: absolute;
	bottom: -19px;
	left: 10px;
}
.line_arrow_flow .laf_inner:last-of-type::before,.line_arrow_flow .laf_inner:last-of-type::after{
	display: none;
}
.lafi_no{
	min-width: 70px;
	text-align: center;
	font-size: 2rem;
	color: #aaa;
	line-height: 1;
}
.lafi_no span{
	display: block;
	font-size: 0.8rem;
}
.lafi_contents{
	flex-grow: 1;
}
.lafict_tit{
	font-size: 1.1rem;
	position: relative;
	margin-bottom: 15px;
	clear: both;
	border-left: 5px solid #4a4c4e;
	background-image: url(../images/slash.gif);
	padding: 8px 10px;
	font-weight: bold;
	color: #01071b;
	margin-top: 15px;
}
@media screen and (min-width: 768px){
	.lafict_tit{
		margin-top: 0;
	}
}
@media screen and (min-width: 992px){
	.laf_inner{
		padding: 0 15px 40px 0;
		margin-bottom: 40px;
	}
	.laf_inner::before{
		content: " ";
		border-top: 25px #ccc solid;
		border-right: 35px transparent solid;
		border-left: 35px transparent solid;
		display: block;
		position: absolute;
		bottom: -25px;
		left: 20px;
	}
	.laf_inner::after{
		content: " ";
		border-top: 25px #fff solid;
		border-right: 35px transparent solid;
		border-left: 35px transparent solid;
		display: block;
		position: absolute;
		bottom: -24px;
		left: 20px;
	}
	.lafi_no{
		min-width: 110px;
		font-size: 3rem;
	}
	.lafi_no span{
		font-size: 1.1rem;
	}
	.lafict_tit{
		font-size: 1.3rem;
		margin-bottom: 20px;
	}
}

100

101

.line_arrow_flow{

margin-bottom: 40px;

}

.laf_inner{

padding: 0 15px 20px 0;

border-bottom: 1px #ccc solid;

display: flex;

position: relative;

margin-bottom: 30px;

}

.laf_inner::before{

content: " ";

border-top: 20px #ccc solid;

border-right: 25px transparent solid;

border-left: 25px transparent solid;

display: block;

position: absolute;

bottom: -20px;

left: 10px;

}

.laf_inner::after{

content: " ";

border-top: 20px #fff solid;

border-right: 25px transparent solid;

border-left: 25px transparent solid;

display: block;

position: absolute;

bottom: -19px;

left: 10px;

}

.line_arrow_flow .laf_inner:last-of-type::before,.line_arrow_flow .laf_inner:last-of-type::after{

display: none;

}

.lafi_no{

min-width: 70px;

text-align: center;

font-size: 2rem;

color: #aaa;

line-height: 1;

}

.lafi_no span{

display: block;

font-size: 0.8rem;

}

.lafi_contents{

flex-grow: 1;

}

.lafict_tit{

font-size: 1.1rem;

position: relative;

margin-bottom: 15px;

clear: both;

border-left: 5px solid #4a4c4e;

background-image: url(../images/slash.gif);

padding: 8px 10px;

font-weight: bold;

color: #01071b;

margin-top: 15px;

}

@media screen and (min-width: 768px){

.lafict_tit{

margin-top: 0;

}

@media screen and (min-width: 992px){

.laf_inner{

padding: 0 15px 40px 0;

margin-bottom: 40px;

}

.laf_inner::before{

content: " ";

border-top: 25px #ccc solid;

border-right: 35px transparent solid;

border-left: 35px transparent solid;

display: block;

position: absolute;

bottom: -25px;

left: 20px;

}

.laf_inner::after{

content: " ";

border-top: 25px #fff solid;

border-right: 35px transparent solid;

border-left: 35px transparent solid;

display: block;

position: absolute;

bottom: -24px;

left: 20px;

}

.lafi_no{

min-width: 110px;

font-size: 3rem;

}

.lafi_no span{

font-size: 1.1rem;

}

.lafict_tit{

font-size: 1.3rem;

margin-bottom: 20px;

}

振り分けページへ戻る

トップへ戻る