スタイルガイド

変数関連

フォント

$font-ja: 'Helvetica', 'Open Sans', "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
$font-ja-min: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
$font-en: "Lato", "Helvetica Neue", Helvetica, helvetica, arial, sans-serif;
$font-en-min: "Times New Roman", Georgia, serif;

カラー

$color-arr: (
        green: #2A8174,
        aqua-green: #5BAD92,
        light-green: #43A538,
        dark-brown: #393432,
        orange: #E48E3A,
        blue: #3797e8,
        pink: #f9809c,
        red: #f00,
        gray: #EEEEEE
);

幅の指定のミックスイン、vw_pc()、vw_sp()

特に意識せずにデザインの幅を入力すれば、
下の例では、1200以上では、434px固定、1200以下では画面幅に対する比率を守って縮小します。


//使い方(スマホ版 vw_spも同様)
.logo img{
  @include vw_pc(434);
}
//OUPUT
.logo img{
  width: 36.16667vw;
  max-width: 434px !important;
}
          

レイアウト関連

全体幅を1120pxで中央揃え .wrap

<section class="wrap">
    (コンテンツ)
  </section>

全体幅を1080pxで中央揃え .wrap .wrap--small

<section class="wrap wrap--small">
  (コンテンツ)
</section>

レスポンシブでの表示・非表示

900以上で表示

900以下で表示

       <p class="block--over900" style="background: lightpink">900以上で表示</p>
      <p class="block--under900" style="background: lightblue">900以下で表示</p>
 

背景色 .bg--{色名称}で背景が付きます。

緑背景
濃いグレーの背景
薄いグレー背景

(区切り線)
(区切り線)
(区切り線)
    <div class="separate-line--green">(区切り線)</div>
    <div class="separate-line--orange">(区切り線)</div>
    <div class="separate-line--blue">(区切り線)</div>
(枠線)
(枠線)
(枠線)
    <div class="frame-line--green">(枠線)</div>
    <div class="frame-line--orange">(枠線)</div>
    <div class="frame-line--blue">(枠線)</div>

以下の赤いラインはスタイルガイドの確認用のラインなので実際のスタイルとは無関係。

ヘッダー部分

ヘッダータイトル

※この関数で次のコードが出力できます。(引数にはメイン画像のパスをいれます。)

 header_group('/img/about/high-school/kv.jpg'); 

<h1 class="header-ttl"
    style="background-image: url(http://placehold.jp/12/999999/AAAAAA/1920x200.png?text=backgroundImage);">ヘッダータイトル</h1>
<div class="wrap">
  <ul class="bread-list">
    <li class="bread-list__item"><a href="#">HOME</a></li>
    <li class="bread-list__item"><a href="#">受験する</a></li>
    <li class="bread-list__item"><a href="#">高等学校</a></li>
    <li class="bread-list__item"><span>コース紹介</span></li>
  </ul>
</div>
            

グリッド

外側へ .row と、.row--col5
内包側へ.col
それぞれクラスをつけると5カラム〜2カラムのレイアウトになります。
ttl--balloon-orangeなどのクラスは見やすくするためだけにつけています。

asdfasd

asdfasd

asdfasd

asdfasd

asdfasd


<div class="row row--col5">
  <div class="col">
    <h3 class="ttl--balloon-orange">asdfasd</h3>
  </div>
  <div class="col">
    <h3 class="ttl--balloon-green">asdfasd</h3>
  </div>
  <div class="col">
    <h3 class="ttl--balloon-green">asdfasd</h3>
  </div>
  <div class="col">
    <h3 class="ttl--balloon-green">asdfasd</h3>
  </div>
  <div class="col">
    <h3 class="ttl--balloon-green">asdfasd</h3>
  </div>
</div>
          

asdfasd

asdfasd

asdfasd

asdfasd


<div class="row row--col4">
  <div class="col">
    <h3 class="ttl--balloon-orange">asdfasd</h3>
  </div>
  <div class="col">
    <h3 class="ttl--balloon-green">asdfasd</h3>
  </div>
  <div class="col">
    <h3 class="ttl--balloon-green">asdfasd</h3>
  </div>
  <div class="col">
    <h3 class="ttl--balloon-green">asdfasd</h3>
  </div>
</div>
          

asdfasd

asdfasd

asdfasd


<div class="row row--col3">
  <div class="col">
    <h3 class="ttl--balloon-orange">asdfasd</h3>
  </div>
  <div class="col">
    <h3 class="ttl--balloon-green">asdfasd</h3>
  </div>
  <div class="col">
    <h3 class="ttl--balloon-green">asdfasd</h3>
  </div>
</div>
          

asdfasd

asdfasd

asdfasd


<div class="row row--col3">
  <div class="col">
    <h3 class="ttl--balloon-orange">asdfasd</h3>asdfasd</h3>
  </div>
  <div class="col">
    <h3 class="ttl--balloon-green">asdfasd</h3>
  </div>
</div>
          

文字装飾

.txt--center

.txt--right

.txt--orange

.txt--green

.txt--blue

.txt--pink

.txt--danger

背の高い文字.txt--tall100

大きい文字.txt--large大きな文字です。

明朝体.txt--mincho

10/23

<p class="txt txt--center">.txt--center</p>
<p class="txt txt--right">.txt--right</p>
<p class="txt txt--orange">.txt--orange</p>
<p class="txt txt--green">.txt--green</p>
<p class="txt txt--blue">.txt--blue</p>
<p class="txt txt--pink">.txt--pink</p>
<p class="txt txt--danger">.txt--danger</p>
<p class="txt ">背の高い文字.txt--tall<span class="txt txt--tall">100</span>名</p>
<p class="txt txt--large">大きい文字.txt--large<span class="txt txt--large">大きな文字</span>です。</p>
<p class="txt txt--mincho">明朝体.txt--mincho</p>
<p class="txt txt--date">10/23<span class="txt--date-day">火</span></p>

アイコンフォント

アイコンフォントの利用方法

 <p><span class="icon-header07"></span>アイコンフォントの利用方法<i class="icon-life05"></i></p> 

アイコン一覧

タイトル

タイトル .ttl--read

 <h1 class="ttl ttl--read">タイトル .ttl--read </h1> 

タイトル .ttl--bg-green

 <h3 class="ttl ttl--bg-green">タイトル .ttl--bg-green</h3> 

タイトル .ttl--bg-aqua-green

 <h3 class="ttl ttl--bg-aqua-green">タイトル .ttl--bg-aqua-green</h3> 

タイトルボールド .ttl--bold

<h2 class="ttl--bold">タイトルボールド</h2>

タイトルボールドのセンター ttl--bold-center

<h2 class="ttl--bold-center">タイトル</h2>

タイトル■のアイコン

<h2 class="ttl--cube">タイトル■のアイコン</h2>

ストライプ背景の
タイトル

<h2 class="ttl--stripe">ストライプ背景のタイトル</h2>

タイトル .ttl--line-green

 <h3 class="ttl ttl--line-green "><span>タイトル .ttl--line-green</span></h3> 

タイトル .ttl--line-aqua-green

 <h3 class="ttl ttl--line-aqua-green "><span>タイトル .ttl--line-aqua-green</span></h3> 

タイトル .ttl--line-light-green

 <h3
                  class="ttl ttl--line-light-green "><span>タイトル .ttl--line-light-green</span></h3> 

タイトル  (--ornament)

 <h3 class="ttl ttl--ornament"><span
                    class="inner">タイトル  (--ornament)</span></h3> 

タイトルornament
アンダーライン2行


        <h3 class="ttl ttl--ornament ttl--ornament-line2">
          <span class="inner"><strong>タイトル</strong>ornament <br><strong>アンダー</strong>ライン2行</span>
        </h3>
     

タイトル .ttl--balloon-green

 <h3 class="ttl ttl--balloon-green ">タイトル .ttl--balloon-green</h3> 

タイトル .ttl--balloon-aqua-green

 <h3 class="ttl ttl--balloon-aqua-green ">タイトル .ttl--balloon-aqua-green</h3> 

タイトル .ttl--balloon-light-green

 <h3
                  class="ttl ttl--balloon-light-green ">タイトル .ttl--balloon-light-green</h3> 

タイトル .ttl--dots

 <h3 class="ttl ttl--dots">タイトル .ttl--dots</h3> 

ページネーション

これはBEMに属せずWordPressの出力コードにあわせてます。


          <?php
          echo paginate_links( array(
  'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
  'format' => '?paged=%#%',
  'current' => max( 1, get_query_var('paged') ),
  'total' => $wp_query->max_num_pages
) );?> 

<div class="pagination">
  <span class="page-numbers current">1</span>
  <a class="page-numbers" href="http://wordpress/page/2/">2</a>
  <a class="page-numbers" href="http://wordpress/page/3/">3</a>
  <span class="page-numbers dots">…</span>
  <a class="page-numbers" href="http://wordpress/page/54/">54</a>
  <a class="next page-numbers" href="http://wordpress/page/2/">次へ »</a>
</div>
          

ボタン

サイズは、small:250px,medium:300px,large:600px

.btn--small

.btn--medium

.btn--large

.btn--wide


<p class="btn btn--small"><a href="#">.btn--small</a></p>
<p class="btn btn--medium"><a href="#">.btn--medium</a></p>
<p class="btn btn--large"><a href="#">.btn--large</a></p>
<p class="btn btn--wide"><a href="#">.btn--wide</a></p>
 

btn--tallで背の高いボタン

.btn--tall

 <p class="btn btn--small btn--tall"><a href="#">.btn--tall</a></p> 

btn--(色)で色を変更可能
色の種類はcommon.scssの$color-arrのすべて

.btn--green

.btn--blue

.btn--pink


<p class="btn btn--green"><a href="#">.btn--green</a></p>
<p class="btn btn--blue"><a href="#">.btn--blue</a></p>
<p class="btn btn--pink"><a href="#">.btn--pink</a></p>
          

コンテンツ一覧

グリッドのClass
.row,.col
を使って表現できます。


<div class="row row--col3">
  <div class="col">
    <img src="http://placehold.jp/600x400.png?text=img" alt="xxx">
    <p class="btn btn--wide btn--green"><a href="#">コンテンツ名</a></p>
  </div>
  <div class="col">
    <img src="http://placehold.jp/600x400.png?text=img" alt="xxx">
    <p class="btn btn--wide btn--aqua-green"><a href="#">コンテンツ名</a></p>
  </div>
  <div class="col">
    <img src="http://placehold.jp/600x400.png?text=img" alt="xxx">
    <p class="btn btn--wide btn--green"><a href="#">コンテンツ名</a></p>
  </div>
  <div class="col">
    <img src="http://placehold.jp/600x400.png?text=img" alt="xxx">
    <p class="btn btn--wide btn--aqua-green"><a href="#">コンテンツ名</a></p>
  </div>
  <div class="col">
    <img src="http://placehold.jp/600x400.png?text=img" alt="xxx">
    <p class="btn btn--wide btn--green"><a href="#">コンテンツ名</a></p>
  </div>

</div>
          

コンテンツ一覧-カードデザイン

柔道部
英語
スピーチ部
柔道部
英語
スピーチ部
柔道部
<div class="row row--col3">
<div class="col">
  <div class="card card-simple">
    <div class="card-simple__txt bg--green txt--center">柔道部</div>
    <div class="card-simple__img" style="background-image: url(http://placehold.jp/138x138.png?text=img);"></div>
  </div>
</div>
<div class="col">
  <div class="card card-simple">
    <div class="card-simple__txt bg--aqua-green">英語<br>スピーチ部</div>
    <div class="card-simple__img" style="background-image: url(http://placehold.jp/138x138.png?text=img);"></div>
  </div>
</div>
<div class="col">
  <div class="card card-simple">
    <div class="card-simple__txt bg--green txt--center">柔道部</div>
    <div class="card-simple__img" style="background-image: url(http://placehold.jp/138x138.png?text=img);"></div>
  </div>
</div>
<div class="col">
  <div class="card card-simple">
    <div class="card-simple__txt bg--aqua-green">英語<br>スピーチ部</div>
    <div class="card-simple__img" style="background-image: url(http://placehold.jp/138x138.png?text=img);"></div>
  </div>
</div>
<div class="col">
  <div class="card card-simple">
    <div class="card-simple__txt bg--green txt--center">柔道部</div>
    <div class="card-simple__img" style="background-image: url(http://placehold.jp/138x138.png?text=img);"></div>
  </div>
</div>
</div>

メディアボックス .media-box

イメージ

タイトル (.ttl--bb-green)

『.media-box』のコンテンツです。
画像が左に入り、そのサイズは498pxです。
テキストコンテンツは右に回り込みます。

タイトルのボーダーは『.ttl--bb-green』とすることで指定できます。
色の指定は『.ttl--bg-green』と同じです。

イメージ

タイトル (.ttl--bb-light-green)

左の画像サイズが570pxのパターンです。
画像の親である『.media-box__img』に『.media-box__img--big』を追加することで対応できます。

タイトルのボーダーは『.ttl--bb-aqua-green』です。

イメージ

タイトル (.ttl--bb-aqua-green)

『.media-box』のリバースパターンです。
画像が右に、テキストコンテンツが左に回り込みます。
親である『.media-box』に『.media-box--reverse』を追加することによって
表示を逆転させることが可能です。

タイトルのボーダーは『.ttl--bbThinGreen』と指定しています。

イメージ

タイトル

右の画像サイズが570pxのパターンです。
『.media-box__img--big』と『.media-box--reverse』を使用しています。














あと文字数が多くなった場合はこのように折り返さないですが仕様です。
こんなに長くなることはないと思いますが。。。

.media-wrap

イメージ

タイトル

『.media-box』のさらに親の説明をいたします。
『.media-box』を『.media-wrap』で包み
各モデファイアで指示することにより
一括で『.media-box』を調整することが可能です。

以下、簡単に説明していきます。

イメージ

タイトル

モデファイアの指定がない『.media-wrap』は
各『.media-box』の設定を引き継ぎます。

『.media-box--reverse』の設定が引き継がれています。

.media-wrap--reverse

イメージ

タイトル

モデファイアの指定を『--reverse』とすると
各『.media-box』の設定を無視して配置を変更します。

このボックスは『.media-box』ですが
設定が無視され『.media-box--reverse』と同じ配置になっています。

イメージ

タイトル

こちらは『.media-box--reverse』の設定が引き継がれています。

.media-wrap--reverse-odd

イメージ

タイトル

モデファイアの指定を『--reverse-odd』とすると
奇数番目の『.media-box』は『.media-box--reverse』と同じ配置、
偶数番目の『.media-box』は『.media-box』と同じ配置に強制的に行います。

このボックスは『.media-box』ですが
設定が無視され『.media-box--reverse』と同じ配置になっています。

イメージ

タイトル

このボックスは『.media-box--reverse』ですが
設定が無視され『.media-box』と同じ配置になっています。

.media-wrap--reverse-even

イメージ

タイトル

モデファイアの指定を『--reverse-even』とすると
偶数番目の『.media-box』は『.media-box』と同じ配置、
奇数番目の『.media-box』は『.media-box--reverse』と同じ配置に強制的に行います。

このボックスは『.media-box--reverse』ですが
設定が無視され『.media-box』と同じ配置になっています。

イメージ

タイトル

このボックスは『.media-box』ですが
設定が無視され『.media-box--reverse』と同じ配置になっています。



以上が『.media-wrap』の説明になります。

リスト関連

.list-cube

<ul class="list-cube">
  <li class="list-cube__item">リストの先頭に緑の■が付きます。</li>
  <li class="list-cube__item">リストの先頭に緑の■が付きます。</li>
  <li class="list-cube__item--orange">色変更も可能リストの先頭に緑の■が付きます。リストの先頭に緑の■が付きます。リストの先頭に緑の■が付きます。リストの先頭に緑の■が付きます。リストの先頭に緑の■が付きます。</li>
      <li class="list-cube__item--pink">リストの先頭に緑の■が付きます。</li>
</ul>

.list-circle

 <ul class="list-circle">
  <li class="list-circle__item--green">リストの先頭に●が付きます。</li>
  <li class="list-circle__item--red">リストの先頭に●が付きます。リストの先頭に●が付きます。リストの先頭に●が付きます。リストの先頭に●が付きます。</li>
  <li class="list-circle__item--blue">リストの先頭に●が付きます。</li>
</ul>

.numbering__wrap

  1. リストが水平方向に並びます。
  2. リストが水平方向に並びます。リストが水平方向に並びます。リストが水平方向に並びます。
  3. リストが水平方向に並びます。リストが水平方向に並びます。
  4. リストが水平方向に並びます。リストが水平方向に並びます。
  5. リストが水平方向に並びます。リストが水平方向に並びます。
  6. リストが水平方向に並びます。リストが水平方向に並びます。

<div class="numbering__wrap">
  <ol class="numbering__list">
    <li class="numbering__item">リストが水平方向に並びます。</li>
    <li class="numbering__item">リストが水平方向に並びます。リストが水平方向に並びます。リストが水平方向に並びます。</li>
    <li class="numbering__item">リストが水平方向に並びます。リストが水平方向に並びます。</li>
    <li class="numbering__item">リストが水平方向に並びます。リストが水平方向に並びます。</li>
    <li class="numbering__item">リストが水平方向に並びます。リストが水平方向に並びます。</li>
    <li class="numbering__item">リストが水平方向に並びます。リストが水平方向に並びます。</li>
  </ol>
</div>
          

.numbering__wrap--vertical

  1. リストが垂直方向に並びます。リストが垂直方向に並びます。
  2. このように複数行にわたった場合、左右の高さが合わない問題がありますが気にしないでください。このように複数行にわたった場合、左右の高さが合わない問題がありますが気にしないでください。
  3. リストが垂直方向に並びます。リストが垂直方向に並びます。
  1. リストが垂直方向に並びます。
  2. リストが垂直方向に並びます。
  3. リストが垂直方向に並びます。

<div class="numbering__wrap numbering__wrap--vertical">
  <ol class="numbering__list">
    <li class="numbering__item">リストが垂直方向に並びます。リストが垂直方向に並びます。</li>
    <li class="numbering__item">
      このように複数行にわたった場合、左右の高さが合わない問題がありますが気にしないでください。このように複数行にわたった場合、左右の高さが合わない問題がありますが気にしないでください。
    </li>
    <li class="numbering__item">リストが垂直方向に並びます。リストが垂直方向に並びます。</li>
  </ol>
  <ol class="numbering__list">
    <li class="numbering__item">リストが垂直方向に並びます。</li>
    <li class="numbering__item">リストが垂直方向に並びます。</li>
    <li class="numbering__item">リストが垂直方向に並びます。</li>
  </ol>
</div>
          

.numbering__wrap--natural

  1. リストが自然に並びます。リストが自然に並びます。
  2. リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。
  3. リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。
  4. リストが自然に並びます。リストが自然に並びます。

<div class="numbering__wrap numbering__wrap--natural">
  <ol class="numbering__list">
    <li class="numbering__item">リストが自然に並びます。リストが自然に並びます。</li>
    <li class="numbering__item">リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。</li>
    <li class="numbering__item">リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。リストが自然に並びます。</li>
    <li class="numbering__item">リストが自然に並びます。リストが自然に並びます。</li>
  </ol>
</div>
          

.table-outline-header

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

<table class="table-outline-header">
  <tr>
    <th class="table-outline-header__head-h">テキスト</th>
    <th class="table-outline-header__head-h">テキスト</th>
    <th class="table-outline-header__head-h">テキスト</th>
    <th class="table-outline-header__head-h">テキスト</th>
  </tr>
  <tr>
    <th class="table-outline-header__head-v">テキスト</th>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr class="table-outline-header__hilight">
    <th class="table-outline-header__head-v">テキスト</th>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <th class="table-outline-header__head-v">テキスト</th>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
</table>

 

.table-simple

  第1種奨学生 第2種奨学生
東大・国公立大医学科コース 若干名 若干名

 <table class="table-simple">
  <tr>
    <th>&nbsp;</th>
    <th>第1種奨学生</th>
    <th>第2種奨学生</th>
  </tr>
  <tr>
    <th>東大・国公立大医学科コース</th>
    <td>若干名</td>
    <td>若干名</td>
  </tr>
</table>
          

.table-history

平成27年
  • 全日本通信珠算競技大会
    個人総合競技中学の部 日本一
  • 全日本通信珠算競技大会
    個人総合競技中学の部 日本一
  • 全日本通信珠算競技大会
    個人総合競技中学の部 日本一
平成28年
  • 全日本通信珠算競技大会
    全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会
  • 全日本通信珠算競技大会
    全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会
  • 全日本通信珠算競技大会
    全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会
 <table class="table-history">
      <tr>
        <th>平成27年</th>
        <td>
          <ul>
            <li>
              全日本通信珠算競技大会<br>
              <strong>個人総合競技中学の部 日本一</strong>
            </li>
            <li>
              全日本通信珠算競技大会<br>
              <strong>個人総合競技中学の部 日本一</strong>
            </li>
            <li>
              全日本通信珠算競技大会<br>
              <strong>個人総合競技中学の部 日本一</strong>
            </li>
          </ul>
        </td>
      </tr>
      <tr>
        <th>平成28年</th>
        <td>
          <ul>
            <li>
              全日本通信珠算競技大会<br>全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会
            </li>
            <li>
              全日本通信珠算競技大会<br>全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会
            </li>
            <li>
              全日本通信珠算競技大会<br>全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会全日本通信珠算競技大会
            </li>
          </ul>
        </td>
      </tr>
    </table> 

タブコンテンツ

コンテンツ1

だみーてきすとです。これは仮入力のためのだみーてきすとです。全く意味はございません。だみーてきすとです。これは仮入力のためのだみーてきすとです。全く意味はございません。だみーてきすとです。

コンテンツ2

Okinawa Prefecture (Japanese: Hepburn: Okinawa-ken?, Okinawan: Uchinaa-chin)
is the southernmost prefecture of Japan.[1]


<nav class="tab__wrap">
  <ul class="tab__list">
    <li class="tab__item tab__item--active"><a href="javascript:void();">コンテンツ1</a></li>
    <li class="tab__item"><a href="javascript:void();">コンテンツ2</a></li>
  </ul>
</nav>

<section class="tab__content tab__content--active">
  <article>
    <h3 class="ttl--read">コンテンツ1</h3>
    <p>だみーてきすとです。これは仮入力のためのだみーてきすとです。全く意味はございません。だみーてきすとです。これは仮入力のためのだみーてきすとです。全く意味はございません。だみーてきすとです。</p>
  </article>
</section>
<section class=" tab__content tab__content--hide">
  <article>
    <h3 class="ttl--read">コンテンツ2</h3>
    <p class="txt--center">
      Okinawa Prefecture (Japanese: Hepburn: Okinawa-ken?, Okinawan: Uchinaa-chin) <br>is the southernmost prefecture of Japan.[1]
    </p>
  </article>
</section>
          

最後まで確認ありがとうございます。