物件情報 物件情報
プライバシーポリシー サイトポリシー 鹿児島県人会〜つばめ会〜

© 2025 Takeda Corporation

株式会社タケダコーポレーション ロゴ
お問い合わせ アイコン 熊本事務所 電話 アイコン096-227-6282 福岡事務所 電話 アイコン092-710-6135
menu閉じる
ピックアップ

Pick Up

半導体産業向け事業用地

TOP   >   サンプルページ

サンプルページ

以降

Takeda Corporation
会社案内
お知らせ
入会希望の方はつばめ会会長 武田匡弘まで

News

一覧を見る
一覧を見る
採用に関するお問い合わせ

意義・目的・発足の経緯

.bg-haikei-01 #f4f6fa .rounded-right-30
Roboto Flex fw-light
Roboto Flex fw-regular
Roboto Flex fw-medium
Roboto Flex fw-light
Noto Sans JP fw-regular
Noto Sans JP fw-medium
Noto Sans JP fw-bold
.bg-main
.bg-accent
.bg-sub

style-guide.scss

VIEW MORE
VIEW MORE
VIEW MORE

Bootstrap

Build fast, responsive sites with Bootstrap

Currently v5.3.0-alpha1
Style Guide Container Artpro Breakpoints Root Font Size Color Font Family Font Weight ／ Font Style Line Height Reset color Text decoration inview Swiper Img Max

Style Guide

::selection {
  background-color: $text-70;
  color: #fff;
}

.empty-none

<p class="p-20 bg-main empty-none"></p>
<p class="p-20 bg-main empty-none">.empty-none</p>

.ff-gothic 游ゴシック

.font-smoothing

.ff-gothic 游ゴシック

.ff-mincyo 游明朝体

.font-smoothing

.ff-mincyo 游明朝体

.ff-gothic fw-bold 游ゴシック

.font-smoothing

.ff-gothic fw-bold 游ゴシック

.ff-mincyo fw-bold 游明朝体

.font-smoothing

.ff-mincyo fw-bold 游明朝体

.font-smoothing{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
デフォルト↓
.font-smoothing-none{
  -webkit-font-smoothing: subpixel-antialiased;//antialiased
  -moz-osx-font-smoothing: unset;//grayscale
}

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとな...にぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえ..おかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

.text-justify

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとな...にぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえ..おかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

.text-justify

・あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

-　あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

デフォルト .text-indent：1em
<p class="fs-18 ls-none text-indent">・あいうえおかきくけこ…</p>
<p class="fs-18 ls-none text-indent" style="--ap-indent:1.5em"> -　あいうえおかきくけこ…</p>

Container Artpro

fs-16

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬ

font-size: 16px;

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬ

fs-10

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつて

font-size: 10px;

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつて

Breakpoints

$grid-breakpoints: (
  xs: 0,
  sm: $sm-breakpoint,//def 576px @620
  md: (10 * ($artboards-container-width / $font-size-root)) / ($artboards-container-width / $xl-breakpoint),//768px
  lg: 992px,//def 992px
  xl: $xl-breakpoint,//def 1200px @1110+30+100=1240
  xxl: $artboards-size //def 1400px @1300px
) !default;

Root Font Size

1rem

:root {
  //font-size: calc(((100vw * 335 / 375)) / ( 335 / 16));
  @include root-fsr($sp-artboards-container-width, $sp-artboards-container-max, $font-size-root);
  @include media-breakpoint-up(sm) {
    //font-size: calc(((100vw * 1110 / 1240)) / ( 1110 / 16));
    @include root-fsr($artboards-container-width, $artboards-container-max, $font-size-root);
  }
  @include media-breakpoint-up(xl) {
    font-size: #{$font-size-root};
  }
}

Color

.text-default

.text-main

.text-accent

.bg-default
.bg-main
.bg-accent
.bg-primary
.bg-secondary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-light
.bg-dark
$default-text:  #343434;//文字色
$mainColor:     #3a7bc6;//青1
$accentColor:   #48acbc;//青3

Font Family

.ff-gothic 游ゴシック

.ff-mincyo 游明朝体

$font-family-sans-serif: "Yu Gothic", YuGothic, Verdana, Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-serif: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝",serif;

Font Weight ／ Font Style

Bold text. 700

Bolder weight text (relative to the parent element). bolder

Semibold weight text. 600

Medium weight text. 500

Normal weight text. 400

Light weight text. 300

Lighter weight text (relative to the parent element). lighter

Regular weight text .fw-regular 400

Demibold weight text .fw-demibold 600

Italic text .fst-italic

Text with normal font style .fst-normal

Line Height

.lh-season fs-14 ホテルの一流シェフたちが自信をもって贈る多彩な料理。うれしい「飲み放題」の特典も付いたお得なプラン。

.lh-season fs-14 mincyo 熊本ホテルキャッスルでは、
おすすめご宿泊プランをご用意しております。

.lh-10 ロレム・イプサムと呼ばれるダミーテキストです。これは、印刷・出版などのデザインやレイアウト作業で、実際の文章を入れる前に、仮の文章として使用されます。意味のある文章ではありませんが、文章の流れや見た目を確認するために、しばしば使用されます。上記の文章は、ロレム・イプサムの一種で、200文字の長さで、一般的に使用される日本語版ロレム・イプサムの例文です。

.lh-50 ロレム・イプサムと呼ばれるダミーテキストです。これは、印刷・出版などのデザインやレイアウト作業で、実際の文章を入れる前に、仮の文章として使用されます。意味のある文章ではありませんが、文章の流れや見た目を確認するために、しばしば使用されます。上記の文章は、ロレム・イプサムの一種で、200文字の長さで、一般的に使用される日本語版ロレム・イプサムの例文です。

//フォントサイズ+10px
.lh-season{
 line-height: calc(1em + #{10 / $font-size-root-num}rem);
}

Reset color

reset link.
Muted text with a reset link. 

<p class="text-danger">
 <a href="#" class="text-decoration-underline">reset link</a>.<br>
 Muted text with a <a href="#" class="text-reset text-decoration-underline">reset link</a>.
</p>

Text decoration

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed

This link has its hover text decoration 

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="">This link has its text decoration removed</a>
<a href="#" class="td-hover-underline">This link has its hover text decoration</a>
<a href="#" class="text-decoration-underline">This link has its text decoration removed</a>

Inview

no class data-inview

.inview-up data-inview

.inview-left data-inview

.inview-right data-inview

.inview-blocks data-inview span.char

<h2 class="" data-inview>no class data-inview</h2>
<h2 class="inview-up" data-inview>.inview-up data-inview</h2>
<h2 class="inview-left" data-inview>.inview-left data-inview</h2>
<h2 class="inview-right" data-inview>.inview-right data-inview</h2>
<h2 class="inview-blocks" data-inview><span class="char">.inview-blocks data-inview span.char</span></h2>
<h2 class="inview-lettering" data-inview data-lettering>.inview-lettering data-inview data-lettering</h2>
<h2 class="" data-inview data-shuffle>data-inview data-shuffle</h2><h2 class="" data-taicha data-lettering>お客様とのご縁に、心より感謝。</h2>

Swiper

TOPへ
page-top
熊本事務所 電話 アイコン096-227-6282 福岡事務所 電話 アイコン092-710-6135