chihung
12/3/2019 - 9:54 AM
TIMELINE. ORDER, STEP LAYOUT
<div class="entrance-step">
<dl class="dl-list-indent dl-number-dark-blue">
<dt>
<span class="number">
1
</span>
</dt>
<dd>
<h5 class="title-deep-blue">
お問い合わせ
<br class="visible-xs">
<span class="title-sm">
（以下のいずれかの方法でお申し込みください）
</span>
</h5>
<ul class="list-dot-sm dot-red">
<li>
友人紹介カードなどがある場合には、ご友人を通じて教室にご提出ください。
</li>
<li>
TEP本部へお電話よりお申し込み
</li>
</ul>
<div class="tel-fax bg-strip-strong-yellow width-590-md-min">
<div class="media">
<div class="media-left">
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/price-information/icon.png" alt="0120-03-4901" class="media-object"/>
<span class="number-tel-fax">
0120-03-4901
</span>
</div>
<br class="visible-xs">
<div class="media-body media-middle">
（日・祝を除く 午前10：00〜午後7：00）
</div>
</div>
</div>
<ul class="list-dot-sm dot-red">
<li>
TEP本部へFAXよりお申し込み … DMをご覧の方はFAX送信表をご利用ください
</li>
</ul>
<div class="tel-fax bg-strip-strong-yellow width-380-md-min">
<div class="media">
<div class="media-left">
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/price-information/icon-fax.png" alt="0533-89-4906" class="media-object"/>
<span class="number-tel-fax">
0533-89-4906
</span>
</div>
<br class="visible-xs">
<div class="media-body media-middle">
（24時間受付）
</div>
</div>
</div>
<ul class="list-dot-sm dot-red">
<li>
TEPのHPよりお申し込み
</li>
</ul>
</dd>
</dl>
<dl class="dl-list-indent dl-number-dark-blue">
<dt>
<span class="number">
2
</span>
</dt>
<dd>
<h5 class="title-deep-blue">
室長よりご連絡差し上げます
</h5>
<p class="text-sm">
担当教室の室長より、お申し込み内容の確認とご要望の確認をさせていただきます。 <br>
疑問点やご質問がありましたらお尋ねください。 <br>
授業料や学習システム詳細についてお伝えする面談を設定させていただきます。 <br>
お子様には学習状況と学力CHECKを兼ねた学力テストの実施にご協力いただきます。
</p>
</dd>
</dl>
<dl class="dl-list-indent dl-number-dark-blue">
<dt>
<span class="number">
3
</span>
</dt>
<dd>
<h5 class="title-deep-blue">
面談・入塾手続き
</h5>
<p class="text-sm">
学習システム・料金について説明の後、ご要望に添うよう受講プランをご提示します。
</p>
</dd>
</dl>
</div>.dl-number-dark-blue {
margin-bottom: 25px;
@media (max-width: $screen-xs-max) {
margin-bottom: 10px;
}
.number {
display: block;
width: 40px;
height: 40px;
padding: 5px;
font-size: 24px;
font-weight: bold;
color: #fff;
border-radius: 50%;
background-color: #3573ca;
text-align: center;
@media (max-width: $screen-xs-max) {
width: 35px;
height: 35px;
padding: 4px;
font-size: 20px;
}
}
dt {
padding-right: 11px;
@media (max-width: $screen-xs-max) {
padding-right: 4px;
}
}
dd {
padding-top: 8px;
}
}.entrance-step {
overflow: hidden;
.text-sm{
font-size: 14px;
@media (max-width: $screen-xs-max) {
font-size: 12px;
}
}
dl {
position: relative;
&,
dd {
overflow: visible;
}
&:before {
position: absolute;
top: 0;
bottom: -25px;
left: 19px;
margin-right: auto;
margin-left: auto;
border-left: 2px solid #3573ca;
z-index: -1;
content: "";
@media (max-width: $screen-xs-max) {
left: 16px;
}
}
&:last-child {
&:before {
top: 100%;
bottom: 100%;
}
}
}
.tel-fax {
margin-top: 7px;
margin-bottom: 10px;
padding: 6px 0 5px 10px;
@media (max-width: $screen-xs-max) {
margin-top: 3px;
margin-bottom: 5px;
padding: 5px 0 6px 10px;
}
.number-tel-fax {
font-size: 28px;
font-weight: bold;
color: #3373CB;
vertical-align: middle;
@media (max-width: $screen-xs-max) {
font-size: 22px;
}
}
.media-object {
display: inline-block;
}
.media-left {
white-space: nowrap;
}
}
}