@charset "UTF-8";
/* ============================================================
 *  Utilities — 旧サイトで全域で使われていた汎用ユーティリティ。
 *  本来 kyotu.css 等の共通 CSS に入っているべきものが、
 *  なぜか商材ページ (biz/{product}/style.css) と style.css にしか
 *  含まれていなかったため、共通用に切り出した。
 *  ============================================================ */

/* margin
----------------------------------------------------------*/
/* Top */
.MG-T0  { margin-top: 0      !important; }
.MG-T5  { margin-top: 5px    !important; }
.MG-T10 { margin-top: 10px   !important; }
.MG-T15 { margin-top: 15px   !important; }
.MG-T20 { margin-top: 20px   !important; }
.MG-T25 { margin-top: 25px   !important; }
.MG-T30 { margin-top: 30px   !important; }
.MG-T40 { margin-top: 40px   !important; }
.MG-T50 { margin-top: 50px   !important; }
.MG-T60 { margin-top: 60px   !important; }
.MG-T80 { margin-top: 80px   !important; }
.MG-T100{ margin-top: 100px  !important; }
/* Top マイナス */
.MG-T7R  { margin-top: -7px  !important; }
.MG-T10R { margin-top: -10px !important; }
.MG-T20R { margin-top: -20px !important; }
.MG-T40R { margin-top: -40px !important; }
/* Bottom */
.MG-B0  { margin-bottom: 0    !important; }
.MG-B5  { margin-bottom: 5px  !important; }
.MG-B10 { margin-bottom: 10px !important; }
.MG-B15 { margin-bottom: 15px !important; }
.MG-B20 { margin-bottom: 20px !important; }
.MG-B25 { margin-bottom: 25px !important; }
.MG-B30 { margin-bottom: 30px !important; }
.MG-B39 { margin-bottom: 39px !important; }
.MG-B40 { margin-bottom: 40px !important; }
.MG-B50 { margin-bottom: 50px !important; }
.MG-B60 { margin-bottom: 60px !important; }
.MG-B80 { margin-bottom: 80px !important; }
/* top-bottom */
.MG-TB10  { margin: 10px 0  !important; }
.MG-TB20  { margin: 20px 0  !important; }
.MG-TB30  { margin: 30px 0  !important; }
.MG-TB50  { margin: 50px 0  !important; }
.MG-TB60  { margin: 60px 0  !important; }
.MG-TB80  { margin: 80px 0  !important; }
.MG-TB100 { margin: 100px 0 !important; }

/* padding
----------------------------------------------------------*/
/* Left */
.PD-L5   { padding-left: 5px   !important; }
.PD-L10  { padding-left: 10px  !important; }
.PD-L15  { padding-left: 15px  !important; }
.PD-L20  { padding-left: 20px  !important; }
.PD-L25  { padding-left: 25px  !important; }
.PD-L30  { padding-left: 30px  !important; }
.PD-L40  { padding-left: 40px  !important; }
.PD-L50  { padding-left: 50px  !important; }
.PD-L60  { padding-left: 60px  !important; }
.PD-L100 { padding-left: 100px !important; }
/* Right */
.PD-R5  { padding-right: 5px  !important; }
.PD-R10 { padding-right: 10px !important; }
.PD-R15 { padding-right: 15px !important; }
.PD-R20 { padding-right: 20px !important; }
.PD-R25 { padding-right: 25px !important; }
.PD-R30 { padding-right: 30px !important; }
/* Top */
.PD-T0  { padding-top: 0px  !important; }
.PD-T30 { padding-top: 30px !important; }
.PD-T40 { padding-top: 40px !important; }
.PD-T50 { padding-top: 50px !important; }
/* top-bottom */
.PD-TB3  { padding: 3px  0px !important; }
.PD-TB10 { padding: 10px 0px !important; }
.PD-TB20 { padding: 20px 0px !important; }
.PD-TB30 { padding: 30px 0px !important; }
.PD-TB40 { padding: 40px 0px !important; }
.PD-TB50 { padding: 50px 0px !important; }
.PD-TB60 { padding: 60px 0px !important; }
.PD-TB80 { padding: 80px 0px !important; }
/* Bottom */
.PD-B0  { padding-bottom: 0px  !important; }
.PD-B3  { padding-bottom: 3px  !important; }
.PD-B10 { padding-bottom: 10px !important; }
.PD-B20 { padding-bottom: 20px !important; }
.PD-B30 { padding-bottom: 30px !important; }
.PD-B40 { padding-bottom: 40px !important; }
.PD-B50 { padding-bottom: 50px !important; }
.PD-B60 { padding-bottom: 60px !important; }
.PD-B80 { padding-bottom: 80px !important; }

/* フォントサイズ・カラー
----------------------------------------------------------*/
/* サイズ */
.TXT-S   { font-size: 14px; }
.TXT-M   { font-size: 16px; }
.TXT-L   { font-size: 18px; }
.TXT-XL  { font-size: 21px; }
.TXT-LL  { font-size: 24px; }
.TXT_50  { font-size:  50%; }
.TXT_70  { font-size:  70%; }
.TXT_80  { font-size:  80%; }
.TXT_85  { font-size:  85%; }
.TXT_90  { font-size:  90%; }
.TXT_110 { font-size: 110%; }
.TXT_120 { font-size: 120%; }
.TXT_150 { font-size: 150%; }
.TXT_180 { font-size: 180%; }
.TXT_R11 { font-size: 1.1rem; }
.TXT_R12 { font-size: 1.2rem; }
.TXT_R13 { font-size: 1.3rem; }
.TXT_R14 { font-size: 1.4rem; }
.TXT_R16 { font-size: 1.6rem; }
/* 書体 */
.TXT-B { font-weight: bold; }
/* カラー */
.TXT-RED  { color: #F30;     }
.TXT-ORG  { color: #f7931e;  }
.TXT-BLU  { color: #184581;  }
.TXT-PBLU { color: #cedde7;  }
.TXT-SBLU { color: #00bfff;  }
.TXT-PU   { color: #184581;  }
.TXT-DGR  { color: #3f4244;  }
.TXT-MGR  { color: #575755;  }
.TXT-WHI  { color: #fff;     }
.TXT-MBLU { color: #A0D024;  }

/* マーカー
----------------------------------------------------------*/
/* 明るい黄色 */
.linetext {
  background: linear-gradient(rgba(0, 0, 0, 0) 75%, #fff77b 0%);
}
/* 暗い黄色 */
.linetext-dy {
  font-size: inherit;
  background: linear-gradient(rgba(0, 0, 0, 0) 75%, #FFE240 0%);
}

/* 背景色
----------------------------------------------------------*/
.bg_n      { background: #184581; }
.bg_bl     { background: #0a5789; }
.bg_pbl    { background: #cedde7; }
.bg_dbl    { background: #0b3567; }
.bg_newpbl { background: #e6f4ff; }
.bg_ol     { background: #fb6816; }
.bg_pu     { background: #184581; }
.bg_gr     { background: #f7f7f7; }
.bg_w      { background: #fff;    }
.bg_01     { background: #012555; }
.bg_02     { background: #bdd7e8; }
.bg_y      { background: #eee8aa; }

/* 枠線
----------------------------------------------------------*/
.BOR-GRY {
  border: 2px solid #ccc;
  padding: 10px;
}

/* インデント
----------------------------------------------------------*/
.TXT-IND3 { text-indent: 3em; }
.TXT-IND4 { text-indent: 4em; }

/* width
----------------------------------------------------------*/
.WIDTH_PX400 { width: 400px; }
.WIDTH_PE40  { width: 40%;   }

/* 改行
----------------------------------------------------------*/
.TXT-WRAP-NO { text-wrap: none; }

/* SP（モバイル）でのサイズ調整
----------------------------------------------------------*/
@media screen and (max-width: 769px) {
  .MG-T80  { margin-top: 30px !important; }
  .MG-TB80 { margin: 50px 0   !important; }
  .MG-TB30 { margin: 20px 0   !important; }
  .MG-B80  { margin-bottom: 40px !important; }
  .PD-TB80 {
    padding-top: 50px    !important;
    padding-bottom: 50px !important;
  }
}

/* テキスト置き換え（PC / SP）
   ※ kyotu.css にも replace-pc / replace-sp の基本定義があるため、
      ここでは画像版の追加スタイル（hover トランジション等）のみ。
----------------------------------------------------------*/
.replace-pc img {
  width: 100%;
  display: block;
  height: auto;
}
.replace-pc img:hover {
  -webkit-transition: 0.2s ease-in-out;
     -moz-transition: 0.2s ease-in-out;
       -o-transition: 0.2s ease-in-out;
          transition: 0.2s ease-in-out;
}

@media screen and (max-width: 769px) {
  .replace-sp img {
    width: 100%;
    display: block;
    height: auto;
  }
  .replace-sp a {
    color: #fff;
  }
}

/* マルチカラム
----------------------------------------------------------*/
.multicolumnbox   { max-width: 100%; }
.multicolumnbox80 { max-width:  80%; }

/* 2段 */
.columns2 {
  column-width: 200px;
  column-gap: 30px;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
.columns2 p          { border-right: 1px solid #fff; }
.columns2 p:last-child { border-right: none; }

/* 3段 */
.columns {
  width: 100%;
  max-width: 1040px;
  display: table;
}
.columns div {
  width: 22.7%;
  display: table-cell;
  float: left;
  margin-right: 3%;
  margin-bottom: 3%;
}
.columns div:nth-child(4n) { margin-right: 0; }
.columns div p             { font-size: 16px; }

/* 4段 */
.columns4 {
  column-width: 200px;
  column-gap: 10px;
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
}

/* spec layout */
.sp_spec {
  width: 100%;
  max-width: 1040px;
  display: table;
}
.sp_spec .spec {
  width: 31.3%;
  display: table-cell;
  float: left;
  margin-right: 3%;
  margin-bottom: 3%;
}
.sp_spec .spec:last-child { margin-right: 0; }
.sp_spec .spec img {
  width: 100%;
  display: block;
  height: auto;
}
.sp_spec .spec p { margin-top: 30px; }