@charset "UTF-8";
/*------------------
共通使用
-------------------*/
@media screen and (max-width: 768px) {
  body {
    width: 100%;
    padding: 0; } }
* {
  font-family: 'Gilda Display'; }
  * img {
    max-width: 100%; }

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media screen and (max-width: 768px) {
    .flex {
      flex-direction: column; } }

.flex_container {
  display: flex;
  align-items: center; }

.flex-reverse {
  flex-direction: row-reverse; }
  @media screen and (max-width: 768px) {
    .flex-reverse {
      flex-direction: inherit; } }

@media screen and (max-width: 768px) {
  .pc {
    display: none; } }

.sp {
  display: none; }
  @media screen and (max-width: 768px) {
    .sp {
      display: block;
      padding: 0; } }

/*------------------
H1エリア
-------------------*/
.h1_area {
  background: url("/wp001/wp-content/themes/simplenotes/img/information/h1_img.jpg") 0 0 no-repeat;
  background-size: cover;
  padding: 10rem 0 10rem 0; }
  @media only screen and (max-width: 787px) {
    .h1_area {
      padding: 5rem 0 5rem 0;
      background-position: center center; } }
  .h1_area .h1_contents {
    text-align: center;
    font-size: 4em; }
    @media only screen and (max-width: 787px) {
      .h1_area .h1_contents {
        font-size: 24px; } }
    .h1_area .h1_contents span {
      display: block;
      font-size: 13px;
      font-weight: normal;
      margin-bottom: 3px; }

/*------------------
コンテンツ-全体
-------------------*/
.info_contents {
  width: 1100px;
  margin: 64px auto; }
  @media screen and (max-width: 768px) {
    .info_contents {
      width: 100%;
      padding-left: 3%;
      padding-right: 3%; } }

.useful {
  background-color: #dfdbd2; }

.coloredstone {
  background-color: #f1eeeb; }

.diamond {
  background-color: #dfdbd2; }

.pearl {
  background-color: #f1eeeb; }

.events {
  background-color: #dfdbd2; }

/*------------------
コンテンツ-サイド
-------------------*/
.info_side {
  width: 26%; }
  @media screen and (max-width: 768px) {
    .info_side {
      width: 100%;
      margin-top: 80px; } }
  .info_side > div {
    margin-bottom: 40px; }
  .info_side .side_h2 {
    position: relative;
    font-size: 22px;
    font-weight: normal;
    padding-left: 30px;
    margin-bottom: 24px; }
    .info_side .side_h2:before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      background-size: contain;
      vertical-align: middle; }
    .info_side .side_h2:after {
      position: absolute;
      content: "";
      bottom: -6px;
      left: 0;
      background-image: url("/wp001/wp-content/themes/simplenotes/img/information/ptn_bg01.jpg");
      background-size: contain;
      width: 100%;
      height: 4px; }
    .info_side .side_h2 span {
      font-size: 11px;
      color: #959595;
      margin-left: 6px; }
  .info_side .ranking_area .ranking:before {
    background-image: url("/wp001/wp-content/themes/simplenotes/img/information/ranking_icon.png");
    width: 27px;
    height: 21px; }
  .info_side .ranking_area .ranking_list {
    counter-reset: ranking-mark; }
    .info_side .ranking_area .ranking_list li {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px; }
      .info_side .ranking_area .ranking_list li:hover {
        opacity: 0.8; }
      .info_side .ranking_area .ranking_list li .img {
        width: 24%; }
        .info_side .ranking_area .ranking_list li .img img {
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%; }
      .info_side .ranking_area .ranking_list li h3 {
        display: block;
        width: 72%;
        font-weight: normal;
        font-size: 13px; }
      .info_side .ranking_area .ranking_list li:before {
        position: absolute;
        content: counter(ranking-mark,decimal);
        counter-increment: ranking-mark;
        top: 4px;
        left: 6px;
        color: #fff;
        z-index: 999; }
      .info_side .ranking_area .ranking_list li:after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        border-style: solid;
        border-width: 34px 34px 0 0;
        border-color: #313131 transparent transparent transparent; }
      .info_side .ranking_area .ranking_list li:nth-child(1):after {
        border-color: #a5926d transparent transparent transparent; }
      .info_side .ranking_area .ranking_list li:nth-child(2):after {
        border-color: #959ea1 transparent transparent transparent; }
      .info_side .ranking_area .ranking_list li:nth-child(3):after {
        border-color: #a0b9c1 transparent transparent transparent; }
  .info_side .category_area {
    width: 100%; }
    .info_side .category_area .category:before {
      background-image: url("/wp001/wp-content/themes/simplenotes/img/information/category_icon.png");
      width: 22px;
      height: 18px;
      top: 4px; }
    .info_side .category_area .category_list {
      width: 100%; }
      .info_side .category_area .category_list li {
        padding: 16px;
        border-radius: 3px;
        text-align: center;
        margin-bottom: 6px;
        cursor: pointer; }
        .info_side .category_area .category_list li a {
          color: #6b6b6b;
          width: 100%;
          height: 100%;
          display: block; }
        .info_side .category_area .category_list li:hover {
          opacity: 0.8; }
        .info_side .category_area .category_list li:nth-child(odd) {
          background-color: #dfdbd2; }
        .info_side .category_area .category_list li:nth-child(even) {
          background-color: #f1eeeb; }
  .info_side .feature_area .feature:before {
    background-image: url("/wp001/wp-content/themes/simplenotes/img/information/feature_icon.png");
    width: 23px;
    height: 28px;
    top: -5px; }
  .info_side .feature_area .feature_list li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; }
    .info_side .feature_area .feature_list li:hover {
      opacity: 0.8; }
    .info_side .feature_area .feature_list li .img {
      width: 24%; }
      .info_side .feature_area .feature_list li .img img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%; }
    .info_side .feature_area .feature_list li h3 {
      display: block;
      width: 72%;
      font-weight: normal;
      font-size: 13px; }
      .info_side .feature_area .feature_list li h3 span {
        display: block;
        padding: 4px;
        font-size: 11px;
        text-align: center;
        color: #6b6b6b;
        margin-bottom: 4px; }

/*------------------
コンテンツ-メインエリア
-------------------*/
.info_main {
  width: 72%; }
  @media screen and (max-width: 768px) {
    .info_main {
      width: 100%; } }

.info_article .flex {
  cursor: pointer;
  margin-bottom: 16px; }
  @media screen and (max-width: 768px) {
    .info_article .flex {
      margin-bottom: 20px; } }
  .info_article .flex:hover {
    opacity: 0.8; }
.info_article .ttl_img {
  position: relative;
  width: 25%; }
  @media screen and (max-width: 768px) {
    .info_article .ttl_img {
      width: 100%; } }
  .info_article .ttl_img .view_text {
    position: absolute;
    background-color: #514c4a;
    top: 0;
    left: 0;
    padding: 14px;
    color: #fff;
    font-weight: bold;
    line-height: 1.2;
    text-align: center; }
  .info_article .ttl_img img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%; }
.info_article .ttl_txt {
  width: 73%; }
  @media screen and (max-width: 768px) {
    .info_article .ttl_txt {
      width: 100%;
      margin-top: 15px; } }
  .info_article .ttl_txt .category_day {
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
    .info_article .ttl_txt .category_day .category {
      min-width: 120px;
      padding: 8px;
      border-radius: 3px;
      text-align: center;
      color: #6b6b6b; }
    .info_article .ttl_txt .category_day .day {
      width: auto;
      margin-left: 10px;
      margin-right: 10px;
      color: #bfbfbf; }
  .info_article .ttl_txt .page_view {
    background-color: #514c4a;
    padding: 6px;
    color: #fff;
    line-height: 1.2;
    text-align: center; }
.info_article .ttl {
  font-size: 20px;
  margin: 10px 0; }
  @media screen and (max-width: 768px) {
    .info_article .ttl {
      font-size: 14px; } }
.info_article .txt {
  font-size: 14px;
  line-height: 1.8;
  color: #bfbfbf; }
  @media screen and (max-width: 768px) {
    .info_article .txt {
      display: none; } }

.info_pager {
  text-align: right; }
  .info_pager a {
    border: 1px solid #313131;
    padding: 8px; }
    .info_pager a:hover {
      cursor: pointer;
      background-color: #313131;
      color: #fff; }
  .info_pager .current {
    background-color: #313131;
    color: #fff;
    padding: 8px; }

.recommend_w .info_article .ttl_img {
  position: relative;
  width: 25%; }
  @media screen and (max-width: 768px) {
    .recommend_w .info_article .ttl_img {
      width: 50%; } }