@charset "UTF-8";
/*--------------------
共通設定
----------------------*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; }

a {
  text-decoration: none;
  color: #3c463c; }
  a.disabled {
    pointer-events: none;
    text-decoration: none; }

ul, ol {
  list-style: none; }

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

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

body {
  overflow-x: hidden; }

.en {
  font-family: "noto-sans", sans-serif; }

.ja {
  font-family: "toppan-bunkyu-gothic-pr6n", serif; }

@media screen and (max-width: 769px) {
  ul, ol, li, div, p, a {
    font-size: 3.0vw !important; } }
/*--------------------------------------------*/
.top_wrapper {
  margin: 0 auto;
  box-sizing: border-box;
  background: #fdfdf8;
  letter-spacing: 0.1em;
  color: #3c463c;
  line-height: 1.5 !important;
  font-size: 16px !important;
  text-align: center;
  font-family: "toppan-bunkyu-gothic-pr6n", serif;
  font-weight: normal;
  font-style: normal;
  overflow-x: hidden; }
  .top_wrapper .top_mv {
    margin: 0 auto 3%;
    width: 100%; }
  .top_wrapper .top-menu {
    max-width: 800px;
    margin: 1.0em auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%; }
    @media screen and (max-width: 769px) {
      .top_wrapper .top-menu {
        width: 98%; } }
    .top_wrapper .top-menu div {
      width: calc(100%/3);
      padding: 1.0em 0.5em;
      border-bottom: 1px solid #3c463c; }
      .top_wrapper .top-menu div:nth-child(n + 4) {
        border-bottom: none; }
      .top_wrapper .top-menu div:nth-child(2), .top_wrapper .top-menu div:nth-child(5) {
        border-left: 1px solid #3c463c;
        border-right: 1px solid #3c463c; }
      .top_wrapper .top-menu div a {
        display: block; }
        .top_wrapper .top-menu div a:hover {
          transform: scale(1.05);
          transition: .4s; }
        .top_wrapper .top-menu div a p {
          font-size: 0.9em !important;
          line-height: 1.5; }
          @media screen and (max-width: 769px) {
            .top_wrapper .top-menu div a p {
              font-size: 3vw !important; } }
          .top_wrapper .top-menu div a p span {
            font-size: 80%;
            display: block; }
  .top_wrapper section {
    margin: 10% auto;
    max-width: 800px; }
    @media screen and (max-width: 769px) {
      .top_wrapper section {
        margin: 25% auto; } }
    .top_wrapper section h2 {
      width: 100% !important;
      font-size: 1.2em !important;
      text-align: left;
      line-height: 1.5 !important;
      margin: 0 !important;
      border-bottom: none !important;
      font-weight: bold; }
      @media screen and (max-width: 769px) {
        .top_wrapper section h2 {
          font-size: 3.8vw !important; } }
      .top_wrapper section h2 span {
        display: block;
        font-weight: normal;
        font-size: 90%; }
        @media screen and (max-width: 769px) {
          .top_wrapper section h2 span {
            font-size: 80%; } }
      .top_wrapper section h2.center {
        text-align: center; }
    .top_wrapper section h3 {
      font-weight: normal;
      text-align: left;
      font-size: 1em !important;
      margin: 5% auto 1%;
      padding-left: 0.5em;
      line-height: 1.5 !important; }
    .top_wrapper section h4 {
      font-size: 1.0em;
      text-align: left;
      font-weight: bold;
      margin-bottom: 0.5em; }
      @media screen and (max-width: 769px) {
        .top_wrapper section h4 {
          font-size: 3.2vw; } }
      .top_wrapper section h4 span {
        font-weight: normal;
        font-size: 90%;
        margin-left: 1.0em; }
      .top_wrapper section h4.center {
        text-align: center; }
    .top_wrapper section p.master_txt {
      font-size: 0.8em !important;
      line-height: 1.5;
      margin-bottom: 1.0em;
      text-align: left;
      color: #666; }
      @media screen and (max-width: 769px) {
        .top_wrapper section p.master_txt {
          font-size: 2.7vw !important;
          width: 95%;
          margin: 0 auto 1.0em; } }
  .top_wrapper .top-btn {
    width: 99%;
    margin: 0 auto; }
    .top_wrapper .top-btn h2 {
      padding-left: 0.5em !important; }
    .top_wrapper .top-btn ul {
      margin: .5em auto;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
      width: 100%; }
      .top_wrapper .top-btn ul li {
        width: calc(100%/2 - 1%);
        margin-bottom: 1%;
        background: rgba(57, 70, 59, 0.2); }
        .top_wrapper .top-btn ul li p {
          font-size: 0.8em;
          padding: 0.5em 0;
          line-height: 1.5; }
          @media screen and (max-width: 769px) {
            .top_wrapper .top-btn ul li p {
              font-size: 2.8vw;
              padding: 0.7em; } }
          .top_wrapper .top-btn ul li p br {
            display: none; }
            @media screen and (max-width: 769px) {
              .top_wrapper .top-btn ul li p br {
                display: block; } }
  .top_wrapper .top-news {
    max-width: 600px;
    margin: 0 auto; }
    @media screen and (max-width: 769px) {
      .top_wrapper .top-news {
        width: 80%; } }
    .top_wrapper .top-news ul {
      margin: 1.0em auto;
      display: block; }
      @media screen and (max-width: 769px) {
        .top_wrapper .top-news ul {
          margin: 0 auto 1.0em; } }
      .top_wrapper .top-news ul li {
        border-bottom: 1px solid #3c463c;
        padding: 1.0em 0; }
        .top_wrapper .top-news ul li a p {
          font-size: 0.9em !important;
          text-align: left;
          line-height: 1.8; }
          @media screen and (max-width: 769px) {
            .top_wrapper .top-news ul li a p {
              font-size: 3vw !important; } }
          .top_wrapper .top-news ul li a p.date {
            font-size: 80%; }
            @media screen and (max-width: 769px) {
              .top_wrapper .top-news ul li a p.date {
                font-size: 60%; } }
            .top_wrapper .top-news ul li a p.date span {
              background: #7A8C5B;
              color: #fff;
              padding: .1em .2em .1em .4em;
              margin-left: 1.0em;
              font-size: 70%; }
  .top_wrapper .brand {
    margin: 0 auto;
    max-width: 600px;
    width: 100%; }
  .top_wrapper .top-category {
    margin: 0 auto; }
    .top_wrapper .top-category ul.type2_flex {
      display: flex;
      align-items: center;
      justify-content: center; }
      .top_wrapper .top-category ul.type2_flex li {
        width: 50%; }
        .top_wrapper .top-category ul.type2_flex li a {
          position: relative;
          display: block; }
          .top_wrapper .top-category ul.type2_flex li a:hover {
            opacity: .7;
            transition: .4s; }
          .top_wrapper .top-category ul.type2_flex li a p {
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 100%;
            transform: translateX(-50%);
            color: #fff;
            background: rgba(60, 70, 60, 0.5);
            padding: 1.0em;
            font-size: 1.5em !important;
            margin: 0; }
            @media screen and (max-width: 769px) {
              .top_wrapper .top-category ul.type2_flex li a p {
                font-size: 3.8vw !important; } }
    .top_wrapper .top-category ul.flex_design {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap; }
      .top_wrapper .top-category ul.flex_design li {
        width: calc(100%/3 - 1%);
        margin: .5%; }
        .top_wrapper .top-category ul.flex_design li a {
          position: relative;
          display: block; }
          .top_wrapper .top-category ul.flex_design li a:hover {
            opacity: .7;
            transition: .4s; }
          .top_wrapper .top-category ul.flex_design li a p {
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 100%;
            transform: translateX(-50%);
            color: #fff;
            background: rgba(60, 70, 60, 0.4);
            padding: 1.0em;
            font-size: 1.5em !important;
            line-height: 1.0;
            margin: 0; }
            @media screen and (max-width: 769px) {
              .top_wrapper .top-category ul.flex_design li a p {
                font-size: 3vw !important; } }
    .top_wrapper .top-category ul.other_flex {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 5% auto; }
      .top_wrapper .top-category ul.other_flex li {
        width: calc(100%/2 - 1%);
        margin: .5%; }
        .top_wrapper .top-category ul.other_flex li a {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #7A8C5B;
          padding: 1%; }
          .top_wrapper .top-category ul.other_flex li a:hover {
            opacity: .7;
            transition: .4s; }
          .top_wrapper .top-category ul.other_flex li a picture {
            width: 40%; }
          .top_wrapper .top-category ul.other_flex li a p {
            width: 70%;
            text-align: center;
            color: #fff;
            font-size: 1.5em !important; }
            @media screen and (max-width: 769px) {
              .top_wrapper .top-category ul.other_flex li a p {
                font-size: 3vw !important; } }
    .top_wrapper .top-category .all_view {
      margin: 3% auto 15%; }
      .top_wrapper .top-category .all_view a {
        display: block;
        font-size: 1.0em; }
        @media screen and (max-width: 769px) {
          .top_wrapper .top-category .all_view a {
            font-size: .8em; } }
        .top_wrapper .top-category .all_view a span {
          border-bottom: 1px solid #3c463c;
          font-size: 100%;
          padding-bottom: .3em; }
  .top_wrapper .contents {
    margin: 0 auto !important; }
  .top_wrapper .pickup {
    border-top: 1px solid rgba(60, 70, 60, 0.5);
    padding-top: 2.0em; }
    @media screen and (max-width: 769px) {
      .top_wrapper .pickup {
        width: 95%;
        margin: 0 auto; } }
    .top_wrapper .pickup ul {
      margin-top: 2.0em; }
      .top_wrapper .pickup ul li {
        width: 30%;
        padding-right: 1%; }
        @media screen and (max-width: 769px) {
          .top_wrapper .pickup ul li {
            width: 45%; } }
  .top_wrapper .ranking, .top_wrapper .ranking_color {
    border-top: 1px solid rgba(60, 70, 60, 0.5);
    padding-top: 2.0em; }
    @media screen and (max-width: 769px) {
      .top_wrapper .ranking, .top_wrapper .ranking_color {
        width: 95%;
        margin: 0 auto; } }
    .top_wrapper .ranking ul, .top_wrapper .ranking_color ul {
      margin-top: 2.0em;
      display: flex;
      align-items: flex-start;
      justify-content: space-between; }
      .top_wrapper .ranking ul.rank, .top_wrapper .ranking_color ul.rank {
        counter-reset: rank; }
        .top_wrapper .ranking ul.rank li, .top_wrapper .ranking_color ul.rank li {
          position: relative;
          width: calc(100%/3 - .5%); }
          .top_wrapper .ranking ul.rank li::after, .top_wrapper .ranking_color ul.rank li::after {
            content: "";
            position: absolute;
            font-size: 1.0em;
            left: 0;
            top: 0;
            line-height: 1.0;
            color: #fff;
            width: 60px;
            height: 60px;
            background: url(https://untule.itembox.design/item/asset/img/top/rank_bg.svg) no-repeat;
            background-size: contain; }
            @media screen and (max-width: 769px) {
              .top_wrapper .ranking ul.rank li::after, .top_wrapper .ranking_color ul.rank li::after {
                width: 35px;
                height: 35px; } }
          .top_wrapper .ranking ul.rank li::before, .top_wrapper .ranking_color ul.rank li::before {
            counter-increment: rank;
            content: counter(rank);
            position: absolute;
            display: block;
            font-size: 1.0em;
            color: #fff;
            top: .2em;
            left: .8em;
            z-index: 5; }
            @media screen and (max-width: 769px) {
              .top_wrapper .ranking ul.rank li::before, .top_wrapper .ranking_color ul.rank li::before {
                font-size: 0.8em;
                top: 0.4em;
                left: .7em; } }
      .top_wrapper .ranking ul li, .top_wrapper .ranking_color ul li {
        width: calc(100%/3 - .5%); }
        .top_wrapper .ranking ul li a, .top_wrapper .ranking_color ul li a {
          display: block; }
          .top_wrapper .ranking ul li a p, .top_wrapper .ranking_color ul li a p {
            text-align: left;
            font-size: 0.8em !important; }
            @media screen and (max-width: 769px) {
              .top_wrapper .ranking ul li a p, .top_wrapper .ranking_color ul li a p {
                font-size: 2.8vw !important; } }
  .top_wrapper #ranking .all_view a span {
    border-bottom: 1px solid #3c463c;
    font-size: 100%;
    padding-bottom: 0.3em; }
  .top_wrapper .ranking_color {
    border-top: none;
    margin-top: 10%;
    padding-bottom: 10%; }
    .top_wrapper .ranking_color .number {
      font-size: 1.0em;
      text-align: left;
      margin-bottom: .7em; }
      @media screen and (max-width: 769px) {
        .top_wrapper .ranking_color .number {
          font-size: .7em;
          margin-bottom: 0; } }
    .top_wrapper .ranking_color ul {
      width: 80%;
      margin: 0 auto; }
      @media screen and (max-width: 769px) {
        .top_wrapper .ranking_color ul {
          width: 90%; } }
      .top_wrapper .ranking_color ul li {
        padding: 2%; }
        @media screen and (max-width: 769px) {
          .top_wrapper .ranking_color ul li {
            padding: 1%; } }
  @media screen and (max-width: 769px) {
    .top_wrapper .howto {
      width: 98%;
      margin: 0 auto; } }
  .top_wrapper #howto_select {
    margin-bottom: 10%; }
    @media screen and (max-width: 769px) {
      .top_wrapper #howto_select {
        margin-bottom: 20%; } }
    .top_wrapper #howto_select ul li {
      width: 52%;
      padding-right: 2%; }
  .top_wrapper .howto_care ul {
    display: flex;
    align-items: flex-start;
    justify-content: space-between; }
    .top_wrapper .howto_care ul li {
      width: calc(100%/2 - 1%); }
      .top_wrapper .howto_care ul li a img {
        margin-bottom: 0.5em; }
      .top_wrapper .howto_care ul li a p {
        font-size: 0.9em !important;
        text-align: left; }
        @media screen and (max-width: 769px) {
          .top_wrapper .howto_care ul li a p {
            width: 90%;
            margin: 0 auto; } }
        .top_wrapper .howto_care ul li a p span {
          font-size: 70% !important;
          border: 1px solid #ccc;
          border-radius: 50vh;
          line-height: 1.0;
          padding: 0.2em 1.0em; }
  .top_wrapper #contents .more {
    font-size: 1em; }
    @media screen and (max-width: 769px) {
      .top_wrapper #contents .more {
        font-size: 0.8em; } }
    .top_wrapper #contents .more span {
      border-bottom: 1px solid #3c463c;
      padding-bottom: 0.2em; }
  .top_wrapper .content_slider {
    margin: 5% auto; }
    .top_wrapper .content_slider ul {
      max-width: 400px;
      margin: 0 auto;
      width: 75%; }
      .top_wrapper .content_slider ul li {
        margin-bottom: 1.0em; }
        .top_wrapper .content_slider ul li a {
          display: block;
          text-align: left;
          font-size: 0.8em !important; }
        .top_wrapper .content_slider ul li p {
          text-align: left;
          font-size: 1em !important;
          line-height: 1.5 !important; }
  .top_wrapper .content_list {
    margin: 10% auto;
    border-top: 1px dashed #3c463c; }
    @media screen and (max-width: 769px) {
      .top_wrapper .content_list {
        width: 90%; } }
    .top_wrapper .content_list .list a {
      border-bottom: 1px dashed #3c463c;
      display: flex;
      align-items: stretch;
      padding: 1% 0; }
      @media screen and (max-width: 769px) {
        .top_wrapper .content_list .list a {
          padding: 2% 0; } }
      @media screen and (max-width: 769px) {
        .top_wrapper .content_list .list a div.thumbnail {
          width: 28%; } }
      .top_wrapper .content_list .list a div.txt {
        padding: 2%;
        position: relative;
        width: calc(100% - 150px);
        text-align: left; }
        @media screen and (max-width: 769px) {
          .top_wrapper .content_list .list a div.txt {
            width: 72%; } }
        .top_wrapper .content_list .list a div.txt p {
          font-size: 1em !important; }
          @media screen and (max-width: 769px) {
            .top_wrapper .content_list .list a div.txt p {
              font-size: 0.9em !important; } }
        .top_wrapper .content_list .list a div.txt .icon {
          position: absolute;
          bottom: 1%;
          text-align: left;
          display: flex;
          justify-content: flex-start;
          align-items: center; }
          .top_wrapper .content_list .list a div.txt .icon p {
            font-size: 80% !important;
            margin-right: 1em !important; }
  .top_wrapper .masterpiece ul {
    margin-bottom: 10%; }
    @media screen and (max-width: 769px) {
      .top_wrapper .masterpiece ul {
        margin-bottom: 20%; } }
    .top_wrapper .masterpiece ul li {
      width: calc(100%/3.5);
      padding-right: 1%; }
      @media screen and (max-width: 769px) {
        .top_wrapper .masterpiece ul li {
          width: calc(100%/2.5); } }
      .top_wrapper .masterpiece ul li a {
        font-size: 0.9em !important; }
        .top_wrapper .masterpiece ul li a p {
          text-align: left;
          font-size: 100% !important;
          padding: .5em; }
  @media screen and (max-width: 769px) {
    .top_wrapper .service {
      margin: 20% auto 10%; } }
  .top_wrapper .service ul {
    max-width: 600px;
    margin: 0 auto; }
    @media screen and (max-width: 769px) {
      .top_wrapper .service ul {
        width: 90%; } }
    .top_wrapper .service ul li {
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .top_wrapper .service ul li div {
        width: 50%;
        position: relative;
        margin-bottom: 1.0em; }
        .top_wrapper .service ul li div .txt {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 0.9em !important;
          color: #fff;
          width: 100%; }
          @media screen and (max-width: 769px) {
            .top_wrapper .service ul li div .txt {
              font-size: 1em !important; } }
          .top_wrapper .service ul li div .txt span {
            font-size: 100%;
            display: block; }
        .top_wrapper .service ul li div a {
          font-size: 1em !important;
          display: block;
          border-bottom: 1px solid #3c463c;
          width: fit-content;
          margin: 0 auto; }
          @media screen and (max-width: 769px) {
            .top_wrapper .service ul li div a {
              font-size: 0.8em !important; } }
        .top_wrapper .service ul li div:first-child a {
          border: none; }

.js-fadeIn {
  opacity: 0;
  transition: 1.0s; }

.is-scrollIn {
  opacity: 1; }

button:hover, .fs-c-button--primary:hover {
  width: 6px !important;
  height: 6px !important;
  padding: 0 !important;
  margin: 0 5px;
  background: #7a8d5c !important; }

.flickity-button:hover {
  padding: 1em 2em !important; }

.flickity-page-dot:focus {
  box-shadow: none !important; }