@charset "utf-8";

/***********************************************************
  common.css [the NEW base.css]

  - Modified: 2016-12-12 font-familyに「游ゴシック体」を追加（ウエイト調整含む）
  - Modified: 2016-11-23 .container(min-width:768px)に padding を指定
  - Modified: 2016-11-16 .alignleft と .alignright をレスポンシブ対応
  - Modified: 2016-11-16 「游ゴシック体」は対応が不完全なため採用中止(Windows10で薄く表示される)
  - Modified: 2016-09-21 font-familyに「游ゴシック体」を追加
  - Modified: 2016-09-21 .container の Media Query を修正、min-width は 768pxで統一
  - Modified: 2016-08-30 .mark は MS Pゴシックのみに
  - Modified: 2016-08-12 .label に line-height と vertical-align を追加、padding を微調整
  - Modified: 2016-08-10 フォント標準をNoto Sans Japanese / Roboto に変更
  - Modified: 2016-07-25 フォームのスタイリングを変更
  - Modified: 2016-07-22 dt:first-child を調整
  - Modified: 2016-07-21 .btnのスタイリングを変更
  - Modified: 2016-07-20 aタグ に colorのtransitionを追加
  - Modified: 2016-07-14 .container のスタイリングを変更
  - Modified: 2016-07-13 カラーリングを変更
  - Modified: 2016-07-13 レスポンシブ対応
  - Modified: 2015-09-01 hover時の transition を削除
  - Modified: 2015-08-25 .list-unstyled, .list-inline を追加
  - Modified: 2015-08-18 .btn:hover の初期値を削除
  - Modified: 2015-07-06 .text-center と .text-right を追加
  - Modified: 2015-02-16 select要素を font-size:99%; から除外
  - Modified: 2014-12-12 .nowrap を overflow:auto → hidden に変更
  - Modified: 2014-11-20 .alignleft と .alignright の margin を修正
  - Modified: 2014-11-11 .anchor-with-layered-icon を追加
  - Modified: 2014-10-20 .input-small を追加
  - Modified: 2014-09-09 マルチサイズ グリッドレイアウトを改良（nogutter 1行レイアウトならレガシーブラウザでもOK）
  - Modified: 2014-08-27 .btn要素に border: none; を追加
  - Modified: 2014-08-22 ラベル要素のデフォルト色を変更
  - Modified: 2014-07-03 マルチサイズ グリッドレイアウト nomargin → nogutter に改名
  - Modified: 2014-06-25 フォーム、ボタン、ラベル要素を追加
  - Modified: 2014-06-25 .textaligncenter, .textalignright を追加
  - Modified: 2014-06-16 マルチサイズ グリッドレイアウトを追加
  - Modified: 2014-04-10 .list-horizontal>dt/dd の margin を修正
  - Modified: 2014-02-19 .photobox, .parent と同等のclass名に .row を追加
  - Modified: 2014-02-05 margin, padding の値を em表記に変更
  - Modified: 2014-02-05 img の vertical-align を text-bottom から bottom に変更
  - Modified: 2014-02-05 dtタグの margin を設定
  - Modified: 2014-02-05 .list-horizontal>li の margin を修正
  - Modified: 2014-01-29 .list-horizontal>dd の margin を修正
  - Modified: 2014-01-27 pタグ・dtタグの margin を削除
  - Modified: 2013-10-09 text-align: justify; と text-justify を廃止
  - Modified: 2013-10-08 .photobox を class名「.parent」でも使用できるよう変更
  - Modified: 2013-10-08 micro clearfix を追加
  - Modified: 2013-06-06 ol,ul の margin-left, margin-right を0に（IE7向け）
  - Modified: 2013-05-10 .markを追加（◎○△×などの記号が小さく表示される箇所に使用）
  - Modified: 2013-05-02 pタグ・dtタグの margin を調整
  - Modified: 2013-03-18 .icon を追加
  - Modified: 2013-03-14 hover時の transition を追加（a img opacity .25s, a color .1s）
  - Modified: 2013-02-25 .list-horizontal, .alignleft, .alignright の inline-blockを最適化
  - Modified: 2013-01-23 .photoboxにIE6対策を追加
  - Modified: 2012-12-18 font-family から Helvetica を削除
  - Modified: 2012-11-27 table関連を追加・修正
***********************************************************/

/* ---------------------------
  BOX MODEL
--------------------------- */
body {
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  font-size: 87.5%;
  color: #212121;
}

body {
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

@media print, screen and (min-width: 768px) {
  html {
    font-size: 100%;
  }

  body {
    overflow-x: auto;
  }
}

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

.container {
  position: relative;
  padding: 0 2%;
}

@media print, screen and (min-width: 768px) {
  .container {
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 10px;
  }
}

@media print, screen and (min-width: 768px) {
  .container--narrow {
    max-width: 660px;
  }
}

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

h1 {
  font-weight: normal;
}

h2, h3, h4, h5, h6 {
  margin-top: 2.5em;
  margin-bottom: 1em;
  font-weight: normal;
}

input, button, textarea {
  font-size: 99%;
}

table {
  font-size: inherit;
}

pre, code, kbd, samp, tt {
  font-family: monospace;
  line-height: 1;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

p {
  line-height:30px;
}

a {
  transition: color 0.15s;
}

a > img {
  transition: opacity 0.15s;
}

a > img:hover {
  opacity: 0.85;
}

hr {
  margin: 3rem 0;
  border: none;
  border-bottom: 1px solid #9e9e9e;
}

/***********************************************************
  CLEARFIX
***********************************************************/

.clearfix:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}
.clearfix {min-height: 1px;}
* html .clearfix {height: 1px; /*\*//*/height: auto;overflow: hidden;/**/}

/***********************************************************
  micro clearfix
***********************************************************/
.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1; /* For IE 6/7 only */
}


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

address {
  font-style: normal;
}

em {
  font-style: normal;
  font-weight: bold;
}

strong {
  font-weight: bold;
}

small {
  font-size: 0.83em;
}

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

.ref {
  padding-left: 1em;
  text-indent: -1em;
}

.red {
  color: #f44336;
}

.inner {
  padding: 1rem;
}

.mark {
  /* font-family: "ＭＳ Ｐゴシック, sans-serif"; */
  font-family: "ＭＳ Ｐゴシック";
}

/**************************************/
/* TABLE - default, .table-bordered, .table-unbordered */
/**************************************/

table {
  margin: 1em 0;
  border-collapse: collapse;
}

th, td {
  padding: 0.5em 1em;
  border-bottom: 1px dotted #e0e0e0;
  text-align: left;
  vertical-align: top;
}

thead th, thead td {
  border-bottom: 1px solid #e0e0e0;
  vertical-align: bottom;
}

.table-full {
  width: 100%;
}

.table-aligncenter th,
.table-aligncenter td,
.table-text-center th,
.table-text-center td {
  text-align: center;
}

.table-vertical-middle th,
.table-vertical-middle td {
  vertical-align: middle;
}

.table-bordered {
  border: 1px solid #b2b2b2;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #b2b2b2;
}

.table-bordered th.dash-line-top,
.table-bordered td.dash-line-top {
  border-top: 1px dashed #b2b2b2;
}

.table-bordered th.dash-line-btm,
.table-bordered td.dash-line-btm {
  border-bottom: 1px dashed #b2b2b2;
}

.table-bordered th.border-no,
.table-bordered td.border-no {
  border-top: none;
}

.table-unbordered th,
.table-unbordered td {
  border: none;
}

table .text {
  text-align: left;
}

table .value {
  text-align: right;
}

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

.icon {
  vertical-align: middle;
}

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

ol, ul {
  margin-right: 0;
  margin-left: 0;
  padding-left: 2em;
}

ol.unstyled,
ul.unstyled,
ol.list-unstyled,
ul.list-unstyled {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 0.5em 0;
}

dt {
  margin-top: 0.5em;
  font-weight: bold;
}

dt:first-child {
  margin-top: 0;
}

dd {
  margin-left: 1em;
}

.list-inline {
    list-style: outside none none;
    margin-left: -5px;
    padding-left: 0;
}

.list-inline > li {
  display: inline-block;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

/*---------- 
  list-horizontal … list-inline で代替。後方互換のため残す
----------*/
.list-horizontal {
  overflow: hidden;
  padding-left: 0;
}

ol.list-horizontal,
ul.list-horizontal {
  letter-spacing: -0.4em; /* <li>間の隙間を削除 */
}

.list-horizontal > li {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  margin: 0;
  letter-spacing: normal; /* <li>間の隙間を削除 */
  vertical-align: top;
}

.list-horizontal > dt {
  clear: left;
  float: left;
  margin: 0 0 1em;
}

.list-horizontal > dd {
  overflow: hidden;
  *zoom: 1;
  margin: 0 0 1em;
}


@media print, screen and (min-width: 768px) {
  .dl-horizontal > dt {
    clear: left;
    float: left;
    margin: 0 0 1em;
  }

  .dl-horizontal > dd {
    overflow: hidden;
    *zoom: 1;
    margin: 0 0 1em;
  }
}

@media print, screen and (min-width: 768px) {
   /* Description List の レスポンシブ対応 */
  .dl-rs {
    overflow: hidden;
  }

  .dl-rs > dt {
    clear: left;
    float: left;
    margin: 0;
    padding: 0.5rem 1rem 0.5rem 0;
    white-space: nowrap;
  }

  .dl-rs > dd {
    overflow: hidden;
    *zoom: 1;
    margin: 0;
    padding: 0.5rem 0;
  }
}

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

.photobox, .parent, .row {
  /* 文字と画像を横並びにするときに使用。clearfixと同等の効果 */
  overflow: hidden;
  *zoom: 1;
}

.alignleft, .alignright, .aligncenter {
  display: block;
  margin: 1rem auto;
}

.no-wrap, .nowrap {
  /* floatされた要素の下に回り込みさせない */
  overflow: hidden;
  *zoom: 1;
}

@media print, screen and (min-width: 768px) {
  .alignleft {
    float: left;
    margin: 0 1rem 0.5rem 0;
  }

  .alignright {
    float: right;
    margin: 0 0 0.5rem 1rem;
  }
}


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

.textaligncenter,
.text-center {
  text-align: center;
}

.textalignright,
.text-right {
  text-align: right;
}

/* ----------------------------------------
  マルチサイズ グリッドレイアウト
  - 親要素に .grid + .grid-Nin1 を指定
    * .grid-nogutter も指定すると左右に余白を作らないレイアウトで整列。
    * 1行レイアウトならレガシーブラウザでもOK、複数行対応は IE9以上
  - 子要素には .col を指定
---------------------------------------- */

.grid {
  overflow: hidden;
}

.grid > .col {
  float: left;
}

.grid > .col img {
  max-width: 100%;
  height: auto;
}

.grid-2in1 > .col {width: 47.916666%;  margin: 1.041666%;}
.grid-3in1 > .col {width: 31.25%;      margin: 1.041666%;}
.grid-4in1 > .col {width: 22.916666%;  margin: 1.041666%;}

.grid-2in1.grid-nogutter > .col {width: 48.936170%; margin: 1.063829% 0 1.063829% 2.127659%;}
.grid-2in1.grid-nogutter > .col:first-child {margin-left: 0;}
.grid-2in1.grid-nogutter > .col:nth-child(2n+1) {margin-left: 0;}

.grid-3in1.grid-nogutter > .col {width: 31.914893%; margin: 1.063829% 0 1.063829% 2.127659%;}
.grid-3in1.grid-nogutter > .col:first-child {margin-left: 0;}
.grid-3in1.grid-nogutter > .col:nth-child(3n+1) {margin-left: 0;}

.grid-4in1.grid-nogutter > .col {width: 23.404255%; margin: 1.063829% 0 1.063829% 2.127659%;}
.grid-4in1.grid-nogutter > .col:first-child {margin-left: 0;}
.grid-4in1.grid-nogutter > .col:nth-child(4n+1) {margin-left: 0;}

/* ----------------------------------------
  フォーム関連
---------------------------------------- */
select,
textarea,
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"] {
  display: inline-block;
  margin: 0.5em 0;
  padding: 0.5em;
  border: 1px solid rgba(0,0,0,0.24);
  border-radius: 2px;
  color: #424242;
  vertical-align: middle;
  box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset;
  /*transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;*/
}

select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus {
  border-color: #607d8b;
}

select {
  padding: 0.25em;
}

.input-32, .input-xxlarge {width: 32rem;}
.input-24, .input-xlarge  {width: 24rem;}
.input-16, .input-large   {width: 16rem;}
.input-12, .input-medium  {width: 12rem;}
.input-8,  .input-small   {width: 8rem;}
.input-4,  .input-mini    {width: 4rem;}
.input-full    {box-sizing: border-box; width: 100%;}

::-webkit-input-placeholder {color: #616161;}
::-moz-placeholder {color: #616161;}
:-moz-placeholder {color: #616161;}
:-ms-input-placeholder {color: #616161 !important;}
:placeholder-shown {color: #616161;}

.ime-disabled {
  ime-mode: disabled;
}

/* ----------------------------------------
  ボタン（.btn）
---------------------------------------- */
.btn {
  position: relative;
  display: inline-block;
  padding: 0.5em 2em;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 0.25em;
  box-shadow: rgba(0,0,0,0.05) -1px 1px 0, rgba(255,255,255,0.1) -1px 1px 0 inset;
  background-color: #f5f5f5;
  color: #323232;
  text-align: center;
  text-decoration: none;
  font-size: 1.25rem;
  vertical-align: middle;
  cursor: pointer;
  transition: background 0.1s linear;
}

/*
.btn:hover {
	opacity:0.8;
}
*/
.btn:active {
  top: 1px;
}

.btn-primary {
  color: #fff;
  background-color: #f44336;
}

.btn-primary:hover {
  background-color: #e53935;
}

.btn-large {
  padding:0.8em 3.4em;
}

.btn-mini {
  padding: 0.25em 1em;
  font-size: 1rem;
}

/* ----------------------------------------
  ラベル（.label）
---------------------------------------- */
.label {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  padding: 0.3em 0.6em;
  border-radius: 0.25em;
  background-color: #9e9e9e;
  color: #fff;
  font-size: 0.83rem;
  line-height: 1;
  vertical-align: baseline;
}

.label-mini {
  font-size: 0.75rem;
}

.label-primary {
  background-color: #f44336;
}

/* ----------------------------------------
  iframe埋め込みコンテンツ（.embed-container）
---------------------------------------- */

.embed-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.embed-container iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
}

/* ----------------------------------------
  CENTERING BOX
  （ボックスは中央寄せ、テキストは左詰め）
---------------------------------------- */

.centering-box {
  text-align: center;
}

.centering-box__inner {
  display: inline-block;
  text-align: left;
}


/* ----------------------------------------
  MEDIA
  http://v4-alpha.getbootstrap.com/layout/media-object/ をベースに
---------------------------------------- */
.media {
  overflow: hidden;
}

.media-object {
  display: block;
  float: left;
  width: 25%;
  margin-right: 2%;
}

.media-body {
  overflow: hidden;
}

.media-heading {
  margin-top: 0;
}


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

@media screen and (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
}

@media print, screen and (min-width: 768px) {
  .sp-only {
    display: none !important;
  }
}

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