@charset "UTF-8";

/* -------------------------

  * COMMON_STYLE.CSS Document *

  > Table of Contents
    - リセット用スタイル
      - aタグの基本設定
      - リストのマージン、パディング削除
      - リストの中点削除
    - 部品スタイル
      - フロート解除
      - ブラウザサイズで表示切り替え
      - マージン 0 - 50
      - パディング 0 - 50
      - 文字サイズ 10 - 35
      - 文字の太さ
      - 行揃えの位置
      - 背景色
      - 文字色
      - 矢印 ">"
      - 矢印 "<"
      - 四隅を三角形で装飾

------------------------- */

/* **************************************************

    ▼リセット用スタイル▼

************************************************** */

/* =========================
   aタグの基本設定
========================= */

a {
    text-decoration: none;
    color: #000;
}

/* =========================
   リストのマージン、パディング削除
========================= */

ul, ol {
    margin: 0;
    padding: 0;
}

/* =========================
   リストの中点削除
========================= */

li { list-style-type: none; }


/* **************************************************

    ▼部品スタイル▼

************************************************** */


/* =========================
   フロート解除
========================= */

.clearfix::after {
    clear: both;
    content: "";
    display: block;
    height: 0;
}

/* =========================
   ブラウザサイズで表示切り替え
========================= */

.sp-active { display: block; }
.mobile-active { display: none; }
.pc-active { display: none; }

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

    .sp-active { display: none; }
    .mobile-active { display: block; }
    .pc-active { display: none; }

}

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

    .sp-active { display: none; }
    .mobile-active { display: none; }
    .pc-active { display: block; }

}

/*-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -*/

.sp-none { display: none; }
.mobile-none { display: block; }
.pc-none { display: block; }

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

    .sp-none { display: block; }
    .mobile-none { display: none; }
    .pc-none { display: block; }

}

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

    .sp-none { display: block; }
    .mobile-none { display: block; }
    .pc-none { display: none; }

}

/* =========================
   マージン
========================= */

.mt0 { margin-top: 0; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }
-----
.mr0 { margin-right: 0; }
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.mr40 { margin-right: 40px; }
.mr50 { margin-right: 50px; }
-----
.mb0 { margin-bottom: 0; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
-----
.ml0 { margin-bottom: 0; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }
.ml50 { margin-left: 50px; }

/* =========================
   パディング
========================= */

.pt0 { padding-top: 0; }
.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pt40 { padding-top: 40px; }
.pt50 { padding-top: 50px; }
-----
.pr0 { padding-right: 0; }
.pr10 { padding-right: 10px; }
.pr20 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.pr40 { padding-right: 40px; }
.pr50 { padding-right: 50px; }
-----
.pb0 { padding-bottom: 0; }
.pb10 { padding-bottom: 10px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb40 { padding-bottom: 40px; }
.pb50 { padding-bottom: 50px; }
-----
.pl0 { padding-left: 0; }
.pl10 { padding-left: 10px; }
.pl20 { padding-left: 20px; }
.pl30 { padding-left: 30px; }
.pl40 { padding-left: 40px; }
.pl50 { padding-left: 50px; }

/* =========================
   文字サイズ
========================= */

.fs10 { font-size: 10px; }
.fs15 { font-size: 15px; }
.fs20 { font-size: 20px; }
.fs25 { font-size: 25px; }
.fs30 { font-size: 30px; }
.fs35 { font-size: 35px; }

/* =========================
   文字の太さ
========================= */

.fw_n { font-weight: normal; }
.fw_b { font-weight: bold; }

/* =========================
   行揃えの位置
========================= */

.txt_right { text-align: right; }
.txt_center { text-align: center; }
.txt_left { text-align: left; }


/* =========================
   背景色
========================= */

.bg_red { background-color: #dca5a5; }
.bg_blue { background-color: #7d81cf; }
.bg_green { background-color: #adcf7d; }
.bg_black { background-color: #000; }
.bg_white { background-color: #fff; }
.bg_grey { background-color: #ccc; }

/* =========================
   文字色
========================= */

.color_red { color: #dca5a5; }
.color_blue { color: #7d81cf; }
.color_green { color: #adcf7d; }
.color_black { color: #000; }
.color_white { color: #fff; }
.color_grey { color: #ccc; }