<style>

  /***** base *****/

  .sp_contents_grid a,
  .sp_contents_grid p,
  .sp_contents_grid p span {
    font-family: 'Noto Serif JP', serif, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Maru Gothic ProN', "Meiryo";
    font-variant-ligatures: none;
    word-break: break-all;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  /***** sp_contents_grid *****/

  .sp_contents_grid {
    width: 100%;
    height: auto;
    margin: 0px 0px 0px 0px;
    border: 1px solid #e8e8e8;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
  }

  .sp_contents_grid_object1 {
    width: 100%;
    height: auto;
    max-width: 1400px;
    padding: 120px 80px 120px 80px;
    margin: 0px 0px 0px 0px;
    border-top: 1px solid #e8e8e8;
  }

  .sp_contents_grid_object1_title1 {
    width: 100%;
    height: auto;
    margin: 0px 0px 50px 0px;
  }

  .sp_contents_grid_object1_title1_text1 {
    width: 100%;
    height: auto;
    margin: 0px 0px 10px 0px;
  }

  .sp_contents_grid_object1_title1_text1 p {
    color: #48217a;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    text-indent: 3px;
    letter-spacing: 3px;
  }

  .sp_contents_grid_object1_title1_text2 {
    width: 100%;
    height: auto;
    margin: 0px 0px 0px 0px;
  }

  .sp_contents_grid_object1_title1_text2 p {
    color: #897a9b;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    text-indent: 3px;
    letter-spacing: 3px;
  }

  /***** sp_contents_visual *****/

  .sp_contents_visual {
    width: 100%;
    height: auto;
    margin: 0px 0px 0px 0px;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
  }

  .sp_contents_visual_pc {
    width: 100%;
    height: auto;
    margin: 0px 0px 0px 0px;
    display: block;
  }

  .sp_contents_visual_smt {
    width: 100%;
    height: auto;
    margin: 0px 0px 0px 0px;
    display: none;
  }

  .sp_contents_visual_pc img,
  .sp_contents_visual_smt img {
    width: 100%;
    height: auto;
    margin: 0px 0px 0px 0px;
    display: block;
  }

  /***** sp_contents_introduction *****/

  .sp_contents_introduction {
    width: 100%;
    height: auto;
    margin: 0px 0px 0px 0px;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
  }

  .sp_contents_introduction_image1 {
    width: 100%;
    height: auto;
    margin: 0px 0px 30px 0px;
  }

  .sp_contents_introduction_info1_text1 {
    width: 100%;
    height: auto;
    margin: 0px 0px 0px 0px;
  }

  .sp_contents_introduction_info1_text1 p {
    font-size: 18px;
    font-weight: 300;
    text-align: center;
    text-indent: 2px;
    letter-spacing: 2px;
    line-height: 38px;
    padding: 10px 0px 10px 0px;
  }

  /***** sp_contents_category *****/

  .sp_contents_category_list1 ul {
    width: 100%;
    height: auto;
    margin: 0px 0px 0px 0px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
  }

  .sp_contents_category_list1 ul li {
    width: 33.33%;
    height: auto;
    padding: 10px 10px 10px 10px;
    margin: 0px 0px 0px 0px;
  }

  .sp_contents_category_list1 ul li a {
    position: relative;
    z-index: 0;
    width: 100%;
    height: auto;
    font-size: 12px;
    font-weight: 300;
    text-align: center;
    text-indent: 2px;
    letter-spacing: 2px;
    padding: 15px 15px 15px 15px;
    margin: 0px 0px 0px 0px;
    transition: .3s;
    display: block;
  }

  .sp_contents_category_list1 ul li a:hover {
    color: #ffffff;
  }

  .sp_contents_category_list1 ul li a::after {
    content: "";
    position: absolute;
    z-index: -10;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #e8e8e8;
    transition: .3s;
  }

  .sp_contents_category_list1 ul li a:hover::after {
    height: 100%;
    background-color: #48217a;
  }

  /***** sp_contents_ranking *****/

  .sp_contents_ranking {
    width: 100%;
    height: auto;
    margin: 0px 0px 0px 0px;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .sp_contents_ranking_object1 {
    width: 25%;
    height: auto;
    padding: 30px 15px 30px 15px;
    margin: 0px 0px 0px 0px;
  }

  .sp_contents_ranking_object1 a {
    width: 100%;
    display: block;
  }

  .sp_contents_ranking_object1_rank1 {
    width: 100%;
    margin: 0px 0px 5px 0px;
  }

  .sp_contents_ranking_object1_rank1 p {
    color: #808080;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    text-indent: 0px;
    letter-spacing: 1px;
  }

  .sp_contents_ranking_object1_rank1 p span {
    color: #e1980c;
    font-size: 20px;
    font-weight: 700;
    padding: 0px 5px 0px 5px;
  }

  .sp_contents_ranking_object1_image1 {
    width: 100%;
    height: 300px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 15px 0px;
    border: 1px solid #e8e8e8;
    object-fit: cover;
    overflow: hidden;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-end;
    align-items: center;
  }

  .sp_contents_ranking_object1_image1 img {
    width: 100%;
    margin: 0px 0px 0px 0px;
    transition: .3s;
    transform: scale(1.000);
    display: block;
  }

  .sp_contents_ranking_object1 a:hover .sp_contents_ranking_object1_image1 img {
    transform: scale(1.025);
  }

  .sp_contents_ranking_object1_info1 {
    width: 100%;
    height: auto;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    display: block;
  }

  .sp_contents_ranking_object1_info1_name1 {
    width: 100%;
    margin: 0px 0px 10px 0px;
  }

  .sp_contents_ranking_object1_info1_name1 p {
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    text-indent: 0px;
    letter-spacing: 1px;
    line-height: 26px;
  }

  .sp_contents_ranking_object1_info1_price1 {
    width: 100%;
    margin: 0px 0px 15px 0px;
  }

  .sp_contents_ranking_object1_info1_price1 p {
    font-size: 10px;
    font-weight: 500;
    text-align: left;
    text-indent: 0px;
    letter-spacing: 1px;
  }

  .sp_contents_ranking_object1_info1_price1 p span {
    color: #e1980c;
    font-size: 18px;
    font-weight: 700;
    padding: 0px 5px 0px 5px;
  }

  .sp_contents_ranking_object1_info1_button1 {
    width: 100%;
    margin: 0px 0px 10px 0px;
  }

  .sp_contents_ranking_object1_info1_button1 p {
    width: auto;
    max-width: 250px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    text-align: left;
    text-indent: 2px;
    letter-spacing: 2px;
    padding: 15px 30px 15px 30px;
    background-color: #48217a;
    transition: .3s;
    display: inline-block;
  }

  .sp_contents_ranking_object1 a:hover .sp_contents_ranking_object1_info1_button1 p {
    background-color: #e1980c;
  }

  /***** sp_contents_recommend *****/

  .sp_contents_recommend {
    width: 100%;
    height: auto;
    margin: 0px 0px 0px 0px;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
  }

  .sp_contents_recommend_object1 {
    width: 50%;
    height: auto;
    max-width: 800px;
    padding: 10px 10px 10px 10px;
    margin: 0px 0px 0px 0px;
  }

  .sp_contents_recommend_object1 a {
    width: 100%;
    background-color: #000000;
    display: block;
  }

  .sp_contents_recommend_object1 a img {
    width: 100%;
    transition: .3s;
    opacity: 1;
    display: block;
  }

  .sp_contents_recommend_object1 a:hover img {
    opacity: 0.75;
  }

  @media ( max-width: 1200px ) {

  .sp_contents_ranking_object1 {
    width: 33.33%;
  }

  }

  @media ( max-width: 1024px ) {

  .sp_contents_grid_object1 {
    padding: 120px 50px 120px 50px;
  }

  .sp_contents_visual_pc {
    display: none;
  }

  .sp_contents_visual_smt {
    display: block;
  }

  .sp_contents_introduction_info1_text1 p {
    font-size: 16px;
    text-indent: 1px;
    letter-spacing: 1px;
    line-height: 32px;
  }

  .sp_contents_category_list1 ul li {
    width: 50%;
  }

  .sp_contents_ranking_object1 {
    width: 50%;
  }

  .sp_contents_recommend_object1 {
    width: 100%;
  }

  }

  @media ( max-width: 767px ) {

  .sp_contents_grid_object1 {
    padding: 80px 30px 80px 30px;
  }

  .sp_contents_grid_object1_title1 {
    margin: 0px 0px 30px 0px;
  }

  .sp_contents_grid_object1_title1_text1 p {
    font-size: 18px;
  }

  .sp_contents_grid_object1_title1_text2 p {
    font-size: 14px;
  }

  .sp_contents_introduction_info1_text1 p {
    font-size: 14px;
    text-indent: 1px;
    letter-spacing: 1px;
    line-height: 28px;
  }

  .sp_contents_category_list1 ul li {
    width: 100%;
    padding: 5px 0px 5px 0px;
  }

  .sp_contents_category_list1 ul li a {
    font-size: 10px;
    text-indent: 1px;
    letter-spacing: 1px;
    padding: 10px 10px 10px 10px;
  }

  .sp_contents_ranking_object1 {
    width: 50%;
    padding: 15px 8px 15px 8px;
  }

  .sp_contents_ranking_object1_image1 {
    height: 180px;
  }

  .sp_contents_ranking_object1_info1_name1 p {
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 20px;
  }

  .sp_contents_ranking_object1_info1_price1 p {
    font-size: 8px;
    letter-spacing: 1px;
  }

  .sp_contents_ranking_object1_info1_price1 p span {
    font-size: 14px;
    padding: 0px 3px 0px 3px;
  }

  .sp_contents_ranking_object1_info1_button1 p {
    font-size: 8px;
    text-indent: 1px;
    letter-spacing: 1px;
    padding: 10px 30px 10px 30px;
  }

  .sp_contents_recommend_object1 {
    width: 100%;
    padding: 10px 0px 10px 0px;
  }

  }

</style>
