@charset "UTF-8";
/*-----------------------------------------------------
layout
-----------------------------------------------------*/
@media only screen and (min-width: 768px) {
  footer, header {
    width: 1000px !important;
    margin: 0px auto !important; }

  article {
    width: 680px !important;
    margin: 0px !important; }

  aside {
    width: 300px !important;
    margin-left: 20px !important; }

  #colmun {
    display: flex;
    justify-content: center;
    margin: 16px auto 0px; }

  .nopc {
    display: none !important; }

  .getPointCorner_try-entry-area {
    width: 1000px !important;
    margin: 0px auto !important; } }
/*-----------------------------------------------------
header
-----------------------------------------------------*/
@media only screen and (min-width: 768px) {
  header .header_logo {
    width: 12%;
    position: absolute;
    left: 16px; }
  header img {
    max-width: 100%;
    margin-left: 24px;
    padding: 8px 0; }
  header .header_header-top {
    text-align: center;
    z-index: 10; }
    header .header_header-top .header_top-area {
      position: relative;
      background-color: #fff;
      height: 70px;
      padding: 0 10px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center; }
      header .header_header-top .header_top-area a {
        display: block; }
        header .header_header-top .header_top-area a.header_logo .header_image-wrapper {
          position: relative;
          width: 206px;
          height: 32px;
          vertical-align: middle; }
      header .header_header-top .header_top-area .header_btn-mylist {
        display: block;
        width: 1.8rem;
        height: 1.85rem;
        position: absolute;
        right: 4.1em; }
        header .header_header-top .header_top-area .header_btn-mylist .header_icon {
          display: inline-block;
          width: 100%;
          height: 100%; }
          header .header_header-top .header_top-area .header_btn-mylist .header_icon .header_icon-mylist {
            margin-top: 2px; }
            header .header_header-top .header_top-area .header_btn-mylist .header_icon .header_icon-mylist .header_cls-1 {
              stroke: #aaa;
              stroke-width: 2;
              fill-opacity: 0;
              stroke-linecap: round;
              stroke-linejoin: round;
              fill-rule: evenodd;
              fill: #eaf8b8; }
  header .menu {
    display: flex;
    /*justify-content: flex-end;*/
    align-items: center;
    font-size: 0.9em;
    /*position: absolute;*/
    right: 24px; }
    header .menu .btn-group1 {
      position: absolute;
      left: 160px; }
      header .menu .btn-group1 ul.btn-genre {
        display: flex;
        margin-right: 50px; }
        header .menu .btn-group1 ul.btn-genre li a {
          width: 72px;
          color: #4F4F4F;
          padding: 0px;
          border: none;
          position: relative;
          display: inline-block;
          text-decoration: none;
          font-size: 0.9rem; }
        header .menu .btn-group1 ul.btn-genre li a::after {
          position: absolute;
          bottom: -10px;
          left: 0;
          content: '';
          width: 100%;
          height: 3px;
          transform: scale(0, 1);
          transform-origin: left top;
          transition: transform .3s; }
        header .menu .btn-group1 ul.btn-genre li a:hover::after {
          transform: scale(1, 1);
          font-weight: bold; }
        header .menu .btn-group1 ul.btn-genre li a.recommend::after {
          background: #4F4F4F; }
        header .menu .btn-group1 ul.btn-genre li a.mens::after {
          background: #9ECEFF; }
        header .menu .btn-group1 ul.btn-genre li a.kids::after {
          background: #F2C94C; }
        header .menu .btn-group1 ul.btn-genre li a.ladies::after {
          background: #FFA99B; }
    header .menu .btn-group2 {
      position: absolute;
      right: 300px; }
      header .menu .btn-group2 ul.btn-summary {
        display: flex; }
        header .menu .btn-group2 ul.btn-summary li:first-of-type {
          border-right: 1px solid #ddd; }
        header .menu .btn-group2 ul.btn-summary li a {
          width: 80px;
          color: #4F4F4F;
          padding: 5px 5px 4px;
          display: block;
          border: none;
          font-size: 0.75rem;
          margin: 0px 5px; }
          header .menu .btn-group2 ul.btn-summary li a:hover {
            background-color: #EBEBEB;
            border-radius: 100px; }
    header .menu .btn-group3 {
      display: flex;
      position: absolute;
      right: 10px; }
      header .menu .btn-group3 .btn-post {
        border-radius: 5px;
        background: #fff;
        border: solid 1px #ddd;
        text-align: center;
        text-shadow: none;
        font-weight: bold;
        border: none;
        background: #4F4F4F;
        margin-right: 10px; }
        header .menu .btn-group3 .btn-post a {
          display: block;
          color: #666;
          text-decoration: none;
          padding: 8px 0; }
        header .menu .btn-group3 .btn-post i {
          margin-left: 10px; }
        header .menu .btn-group3 .btn-post a {
          color: #fff;
          padding: 10px 10px 2px;
          border-radius: 5px; }
        header .menu .btn-group3 .btn-post:hover {
          opacity: 0.5; }
      header .menu .btn-group3 .btn-menu {
        position: relative;
        border-radius: 5px;
        background: #fff;
        border: solid 1px #ddd;
        text-align: center;
        text-shadow: none;
        font-weight: bold;
        border: solid 1px #4F4F4F;
        border-radis: 100px; }
        header .menu .btn-group3 .btn-menu a {
          display: block;
          color: #666;
          text-decoration: none;
          padding: 8px 0; }
        header .menu .btn-group3 .btn-menu i {
          margin-left: 10px; }
        header .menu .btn-group3 .btn-menu a {
          display: block;
          color: #4F4F4F;
          padding: 8px 8px 8px 0px; }
          header .menu .btn-group3 .btn-menu a i.fa {
            margin-right: 5px; }
        header .menu .btn-group3 .btn-menu ul.menu-level {
          display: none; }
        header .menu .btn-group3 .btn-menu:hover ul.menu-level {
          display: block;
          position: absolute;
          top: 37px;
          width: 165px;
          z-index: 6;
          background: #fff;
          border: solid 1px #4F4F4F;
          font-weight: normal;
          text-align: left; }
          header .menu .btn-group3 .btn-menu:hover ul.menu-level:before {
            content: "";
            position: absolute;
            top: -8px;
            margin-left: 14px;
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 0px 9px 9px;
            border-color: transparent transparent #FFF;
            z-index: 5; }
          header .menu .btn-group3 .btn-menu:hover ul.menu-level:after {
            content: "";
            position: absolute;
            top: -10px;
            left: 13px;
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 0 10px 10px 10px;
            border-color: transparent transparent #4F4F4F transparent;
            z-index: 2; }
          header .menu .btn-group3 .btn-menu:hover ul.menu-level li a {
            display: block;
            border-bottom: dotted 1px #ddd;
            padding: 12px;
            color: #454545; }
            header .menu .btn-group3 .btn-menu:hover ul.menu-level li a:hover {
              text-decoration: underline; }

  /* スマホメニュー3つ表示 */ }
@media only screen and (min-width: 768px) and (max-width: 767px) {
  .header_menu-area .header_header-sub-menu li {
    width: calc(100% / 3);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    border-right: 1px solid #fff; } }
/*Header END*/
/*-----------------------------------------------------
article
-----------------------------------------------------*/
.article_promotion-caveat {
  background-color: #fff;
  color: #868686;
  font-size: 10px;
  text-align: center;
  padding: 8px 0 0; }

/*-----------------------------------------------------
aside
-----------------------------------------------------*/
@media only screen and (min-width: 768px) {
  .aside_box {
    background-color: #fff;
    margin-top: 16px; }
    .aside_box:first-of-type {
      margin-top: 0px; }
    .aside_box h1 {
      padding: 1rem;
      font-size: 16px; }
      .aside_box h1:before {
        border-left: 4px solid #4F4F4F;
        content: '';
        padding-right: 8px; }
    .aside_box ul li {
      border-bottom-width: 1px;
      border-bottom-style: dotted;
      border-bottom-color: #cccccc; }
      .aside_box ul li:last-child {
        border: none; }
      .aside_box ul li a {
        color: #2d2926;
        text-decoration: none; }
      .aside_box ul li a:hover {
        opacity: 0.5;
        text-decoration: underline; }
    .aside_box ul.press_list li {
      padding: 16px 24px; }
    .aside_box ul.press_list div {
      display: flex; }
      .aside_box ul.press_list div img {
        width: 64px;
        height: 64px;
        object-fit: cover;
        margin-right: 8px;
        border-radius: 5px; }
      .aside_box ul.press_list div p {
        font-size: 14px;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        /* ブラウザがサポートしていない場合のフェールセーフ */
        max-height: 60px; }
    .aside_box ul.press_list_text li {
      padding: 4px 16px; }
    .aside_box ul.press_list_text a {
      text-decoration: none;
      font-weight: 400;
      font-size: 14px;
      line-height: 150%;
      align-items: center;
      display: flex;
      position: relative;
      padding: 8px 0; }
      .aside_box ul.press_list_text a:active {
        font-weight: bold; }
      .aside_box ul.press_list_text a:after {
        background: url(../img/aside_arrow.svg) no-repeat;
        background-size: contain;
        content: '';
        display: block;
        height: 30px;
        position: absolute;
        right: -8px;
        top: 50%;
        transform: translateY(-50%);
        width: 30px; } }