Bootstrap
Build fast, responsive sites with Bootstrap
Currently v5.0.0-alpha1
Link color & target="_blank"
<a href="https://getbootstrap.com/" target="_blank" rel="noopener">https://getbootstrap.com/</a>
<section class="title-01">
<h2 class="title-main">熊本とともに60年。<br>いつまでも、これからも。</h2>
<p class="title-cap">歴史と伝統が紡いだおもてなしで<br>お客様をお迎えいたします。</p>
</section>
Color
.text-default
.text-70
.text-main
.bg-default
.bg-main
.bg-type-01 $bg-type-01: #F3F0ED;
.bg-type-02 $bg-type-02: #F5F4F4;
.bg-type-03 $bg-type-03: #DDD7D6;
.bg-type-04 $bg-type-04: #F1F0E8;
.bg-type-05 $bg-type-05: #F2F4F6;
$default-text: #212121;
$mainColor: #692326;
Font Family
.gothic 游ゴシック
.mincyo 游明朝体
Web Font
Acumin Pro (Typekit)[Medium 500・Semibold 600]
Acumin Pro Medium
Acumin Pro Semibold
Line Height
.lh-season fs-14 ホテルの一流シェフたちが自信をもって贈る多彩な料理。うれしい「飲み放題」の特典も付いたお得なプラン。
.lh-season fs-14 mincyo 熊本ホテルキャッスルでは、
おすすめご宿泊プランをご用意しております。
//フォントサイズ+10px
.lh-season{
line-height: calc(1em + #{10 / $font-size-root-num}rem);
}
Typography
title-01
熊本とともに60年。
いつまでも、これからも。
歴史と伝統が紡いだおもてなしで
お客様をお迎えいたします。
styleguide.php
h1 2018 font font-family-sans-serif 日本語入力あああ 40px
h2 2018 font font-family-sans-serif 日本語入力あああ 38px
h2 2018 font font-family-sans-serif 日本語入力あああ 38px
h3 日本語入力 text-main 34px main
h3 日本語入力 text-accent 34px accent
h3 日本語入力 text-sub 34px sub
btn-accent btn-outline-accent btn-accent rounded-0h4 日本語入力 text-info 26px
h4 日本語入力 text-column 26px
h4 日本語入力 text-events 26px
h4 日本語入力 text-works_kitchenkitchen
h4 日本語入力 text-works_bathroombathroom
h4 日本語入力 text-works_toiletroomtoiletroom
h4 日本語入力 text-works_restroomrestroom
h5 日本語入力 text-default 22px
h6 日本語入力 text-default 18px
2018 tk-fot-tsukuardgothic-std 日本語入力あああ
2018 tk-fot-tsukuardgothic-std 日本語入力あああ
2018 tk-fot-tsukuardgothic-std 日本語入力あああ
2018 tk-fot-tsukuardgothic-std 日本語入力あああ
2018 font font-family-sans-serif 日本語入力あああ
2018 font font-family-sans-serif 日本語入力あああ
2018 font font-family-sans-serif 日本語入力あああ
2018 font font-family-sans-serif 日本語入力あああ