@charset "UTF-8";
/*==============================================================================================

  font

==============================================================================================*/
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", sans-serif;
  color: #333;
  font-size: 16px;
  line-height: 24px;
}

h1,h2,h3,h4,h5,h6 {
  font-size: 16px;
  font-weight: normal;
}

/* Headline1 大見出し用フォントサイズ */
.hlf1 {
  font-size: 28px;
  line-height: 36px;
}

/* Headline2 中見出し用フォントサイズ */
.hlf2 {
  font-size: 24px;
  line-height: 36px;
}

/* Headline3 小見出し用フォントサイズ */
.hlf3 {
  font-size: 20px;
  line-height: 30px;
}

/* annotation 注釈用フォントサイズ */
.atf {
  font-size: 14px;
  line-height: 22px;
}

/* 限定的Bold用 */
.bold {
  font-weight: bold;
  font-weight: 600;
}

/* リンクカラーのキャンセル */
a {
  color: #333;
}

@media screen and (max-width: 960px) {
  /* Headline1 大見出し用フォントサイズ */
  .hlf1 {
    font-size: 26px;
    line-height: 35px;
  }

  /* Headline2 中見出し用フォントサイズ */
  .hlf2 {
    font-size: 23px;
    line-height: 34px;
  }

  /* Headline3 小見出し用フォントサイズ */
  .hlf3 {
    font-size: 19px;
    line-height: 30px;
  }

  /* annotation 注釈用フォントサイズ */
  .atf {
    font-size: 14px;
    line-height: 22px;
  }
}

@media screen and (max-width: 768px) {
  /* Headline1 大見出し用フォントサイズ */
  .hlf1 {
    font-size: 24px;
    line-height: 34px;
  }

  /* Headline2 中見出し用フォントサイズ */
  .hlf2 {
    font-size: 22px;
    line-height: 32px;
  }

  /* Headline3 小見出し用フォントサイズ */
  .hlf3 {
    font-size: 18px;
    line-height: 26px;
  }

  /* annotation 注釈用フォントサイズ */
  .atf {
    font-size: 12px;
    line-height: 16px;
  }
}

/*==============================================================================================

  icon

==============================================================================================*/
.cs-icon{
  width: 24px;
  display: inline-block;
}

.cs-icon:before{
  content: '';
  display: block;
  width: 100%;
  padding-top: 100%;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.comp-on:before{
  background-image: url('../img/icons/m_icon-01_on.png');
}

.comp-off:before{
  background-image: url('../img/icons/m_icon-01_off.png');
}

.care-on:before{
  background-image: url('../img/icons/m_icon-02_on.png');
}
.care-off:before{
  background-image: url('../img/icons/m_icon-02_off.png');
}

.doc-on:before{
  background-image: url('../img/icons/m_icon-03_on.png');
}
.doc-off:before{
  background-image: url('../img/icons/m_icon-03_off.png');
}

.money-on:before{
  background-image: url('../img/icons/m_icon-04_on.png');
}
.money-off:before{
  background-image: url('../img/icons/m_icon-04_off.png');
}

.owner-on:before{
  background-image: url('../img/icons/m_icon-05_on.png');
}
.owner-off:before{
  background-image: url('../img/icons/m_icon-05_off.png');
}

.star-on:before{
  background-image: url('../img/icons/m_icon-06_on.png');
}
.star-off:before{
  background-image: url('../img/icons/m_icon-06_off.png');
}

.book-on:before{
  background-image: url('../img/icons/m_icon-07_on.png');
}
.book-off:before{
  background-image: url('../img/icons/m_icon-07_off.png');
}

.user-on:before{
  background-image: url('../img/icons/m_icon-08_on.png');
}
.user-off:before{
  background-image: url('../img/icons/m_icon-08_off.png');
}

.logout-on:before{
  background-image: url('../img/icons/m_icon-09_on.png');
}
.logout-off:before{
  background-image: url('../img/icons/m_icon-09_off.png');
}