@charset "UTF-8";
/*============================================
responsive
============================================*/
/*------------------------------------------------------------
main_view
------------------------------------------------------------*/
.main_view {
  width: 100%;
  height: 80vh;
  position: relative;
  background-color: #152431; }
  .main_view .slick-list {
    margin-left: 26%; }
    @media screen and (max-width: 897px) {
      .main_view .slick-list {
        margin-left: 34%; } }

.main_view .view_ttl {
  width: 40%;
  font-family: angie-sans, sans-serif;
  font-weight: 400;
  font-style: normal;
  position: absolute;
  left: 7%;
  top: 50%;
  z-index: 5;
  line-height: 1.2;
  transform: translateY(-50%) translateX(-7%);
  /*========= 流れるテキスト ===============*/
  /*全共通*/
  /*左右のアニメーション*/ }
  @media screen and (max-width: 897px) {
    .main_view .view_ttl {
      left: 12%; } }
  .main_view .view_ttl .view_ttl01 {
    font-size: 5rem;
    color: #fff; }
    @media screen and (max-width: 897px) {
      .main_view .view_ttl .view_ttl01 {
        font-size: 5vw; } }
  .main_view .view_ttl .view_ttl02 {
    font-size: 9rem;
    color: #BDB8B3; }
    @media screen and (max-width: 1290px) {
      .main_view .view_ttl .view_ttl02 {
        font-size: 6vw; } }
    @media screen and (max-width: 897px) {
      .main_view .view_ttl .view_ttl02 {
        font-size: 8vw; } }
    .main_view .view_ttl .view_ttl02 span.indent {
      text-indent: 29%; }
  .main_view .view_ttl span.small {
    font-size: 6rem;
    display: inline !important; }
    @media screen and (max-width: 897px) {
      .main_view .view_ttl span.small {
        font-size: 4vw; } }

@media screen and (max-width: 767px) {
  .main_view .view_ttl {
    width: 70%; } }
.main_view .view_ttl span {
  display: block !important; }

.main_view .view_ttl span + span {
  margin-top: 8%; }

.main_view .view_ttl span.slide-in img {
  width: 25vw;
  height: auto; }

@media screen and (max-width: 767px) {
  .main_view .view_ttl span.slide-in img {
    width: 50vw; } }
.main_view .view_ttl .slide-in {
  overflow: hidden;
  display: inline-block; }

.main_view .view_ttl .slide-in img {
  width: auto;
  height: auto;
  max-width: 468px; }

.main_view .view_ttl .slide-in_inner {
  display: inline-block; }

.main_view .view_ttl .leftAnime {
  opacity: 0;
  /*事前に透過0にして消しておく*/ }

.main_view .view_ttl .slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%);
    /*要素を左の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1; } }
.main_view .view_ttl .slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes slideTextX-100 {
  from {
    transform: translateX(100%);
    /*要素を右の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1; } }
@media (orientation: portrait) {
  .main_view {
    height: 45vh; } }
@media screen and (max-width: 767px) {
  .main_view {
    height: 82vh; } }
.main_view .slick-slider, .main_view .slick-list, .main_view .slick-track {
  height: 100%; }

.main_view img {
  width: 100%;
  height: 80vh;
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: inherit; }

@media (orientation: portrait) {
  .main_view img {
    height: 40vh; } }
/*--------逕ｻ蜒上し繧､繧ｺ隱ｿ謨ｴ---------*/
@media all and (max-width: 767px) {
  .main_view img {
    width: 100%;
    height: 90vh; } }
@media all and (max-width: 767px) {
  .main_view .view_btn {
    width: 30%;
    height: 30%;
    right: 3%; } }
/*-----------height隱ｿ謨ｴ----------*/
@media all and (max-width: 767px) {
  .main_view .slick-slide {
    background-color: none; } }
/*-----------遏｢蜊ｰ陦ｨ遉ｺ----------*/
/*------------------------------------------------------------
txt
------------------------------------------------------------*/
.txt {
  line-height: 2.4em;
  font-size: 1.7rem; }
  @media screen and (max-width: 897px) {
    .txt {
      font-size: 1.3rem; } }
  .txt + .readmore {
    margin-top: 60px; }
    @media screen and (max-width: 897px) {
      .txt + .readmore {
        margin-top: 30px; } }
  .txt.txt_ct {
    text-align: center; }

/*------------------------------------------------------------
.comBox
------------------------------------------------------------*/
.comBox {
  width: 1372px; }

/*------------------------------------------------------------
articleBox
------------------------------------------------------------*/
.articleBox {
  position: relative; }
  .articleBox .articleSet {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center; }
    @media screen and (max-width: 897px) {
      .articleBox .articleSet {
        display: inherit; } }
    .articleBox .articleSet .photo {
      width: 52%;
      height: auto;
      overflow: hidden;
      min-height: 600px;
      display: block; }
      @media screen and (max-width: 897px) {
        .articleBox .articleSet .photo {
          min-height: inherit;
          margin-bottom: 20px;
          width: auto; } }
      .articleBox .articleSet .photo img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        max-width: 100%;
        min-height: 600px; }
        @media screen and (max-width: 897px) {
          .articleBox .articleSet .photo img {
            min-height: inherit; } }
    .articleBox .articleSet .txtArea {
      width: 40%;
      position: relative; }
      @media screen and (max-width: 897px) {
        .articleBox .articleSet .txtArea {
          width: auto; } }
    .articleBox .articleSet.photoRight .txtArea {
      padding-left: 80px; }

/*------------------------------------------------------------
#shop
------------------------------------------------------------*/
#shop .comBox {
  position: relative;
  z-index: 10;
  min-height: 90vh; }
  @media (orientation: portrait) {
    #shop .comBox {
      min-height: 60vh; } }
  @media screen and (max-width: 897px) {
    #shop .comBox {
      min-height: inherit; } }
  #shop .comBox .articleSet.photoRight {
    min-height: 90vh; }
    @media (orientation: portrait) {
      #shop .comBox .articleSet.photoRight {
        min-height: 60vh; } }
    @media screen and (max-width: 897px) {
      #shop .comBox .articleSet.photoRight {
        min-height: inherit; } }
    @media screen and (max-width: 897px) {
      #shop .comBox .articleSet.photoRight .txtArea {
        padding: 200px 20px 20px; } }
#shop .photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%; }
  @media screen and (max-width: 897px) {
    #shop .photo {
      width: 100%;
      height: auto; } }
  #shop .photo img {
    object-fit: cover;
    height: 100%;
    width: 100%; }
    @media (orientation: portrait) {
      #shop .photo img {
        min-height: 60vh; } }
    @media screen and (max-width: 897px) {
      #shop .photo img {
        height: 200px;
        min-height: inherit; } }

/*============================================
other
============================================*/
#other.bg {
  padding: 0; }
#other .bg {
  padding: 0; }
#other .columnBox > div {
  padding: 10%; }
#other .code + .txt {
  margin-top: 40px; }
#other .code iframe {
  height: 410px; }
#other .ttl, #other p.txt {
  color: #1B2C3C; }

/*============================================
item
============================================
*/
#item {
  padding: 100px 0 120px 0; }
  @media screen and (max-width: 897px) {
    #item {
      padding: 40px 0; } }
  #item .item__box {
    max-width: 1140px;
    margin: 0 auto; }
    @media screen and (max-width: 897px) {
      #item .item__box {
        margin: 0 20px; } }
    #item .item__box .inbox {
      display: flex;
      justify-content: space-between; }
      @media screen and (max-width: 897px) {
        #item .item__box .inbox {
          display: block; } }
      #item .item__box .inbox .img {
        max-width: 500px; }
        @media screen and (max-width: 897px) {
          #item .item__box .inbox .img {
            margin: 0 0 20px 0; } }
      #item .item__box .inbox .txt {
        margin: 0 0 0 5%;
        width: 100%; }
        @media screen and (max-width: 897px) {
          #item .item__box .inbox .txt {
            margin: 0; } }
        @media screen and (max-width: 897px) {
          #item .item__box .inbox .txt .item__headline {
            margin-bottom: 30px; } }
        @media screen and (max-width: 897px) {
          #item .item__box .inbox .txt .item__headline .category {
            margin-bottom: 20px; } }
        #item .item__box .inbox .txt .item__headline p a {
          color: #e4e4e4 !important;
          display: inline;
          border: 1px solid #fff;
          border-radius: 100px;
          padding: 0 15px;
          font-size: 1.4rem;
          margin: 0 10px 0 0; }
          @media screen and (max-width: 897px) {
            #item .item__box .inbox .txt .item__headline p a {
              font-size: 1.1rem;
              opacity: 0.7;
              line-height: 1.8;
              box-sizing: border-box;
              display: inline-block; } }
          #item .item__box .inbox .txt .item__headline p a:hover {
            opacity: 0.7; }
        #item .item__box .inbox .txt .item__headline h1 {
          font-size: 2.4rem;
          font-weight: 400; }
        #item .item__box .inbox .txt .item__headline .price {
          font-size: 2.2rem; }
          @media screen and (max-width: 897px) {
            #item .item__box .inbox .txt .item__headline .price {
              font-weight: 800; } }
          #item .item__box .inbox .txt .item__headline .price span {
            display: inline-block;
            padding: 0 0 0 5px;
            font-size: 1.2rem; }
        #item .item__box .inbox .txt .item__copy {
          padding: 30px 0 0 0;
          font-size: 1.6rem;
          line-height: 1.6; }
          @media screen and (max-width: 897px) {
            #item .item__box .inbox .txt .item__copy {
              padding: 20px 0 0 0; } }
        #item .item__box .inbox .txt .item__tag {
          color: #707070;
          padding: 15px 0 0 0;
          font-size: 1.4rem;
          line-height: 1; }
          #item .item__box .inbox .txt .item__tag a:hover {
            opacity: 0.7; }
        #item .item__box .inbox .txt .item__summary {
          padding: 45px 0 0 0; }
          @media screen and (max-width: 897px) {
            #item .item__box .inbox .txt .item__summary {
              padding: 20px 0 0 0; } }
          #item .item__box .inbox .txt .item__summary dl div {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px dotted #fff;
            padding: 0 0 7px 0;
            margin: 0 0 7px 0;
            font-size: 1.4rem; }
            #item .item__box .inbox .txt .item__summary dl div dt {
              width: 20%;
              font-weight: 700; }
            #item .item__box .inbox .txt .item__summary dl div dd {
              width: 80%; }
          #item .item__box .inbox .txt .item__summary .caution {
            font-size: 1.4rem; }
            @media screen and (max-width: 897px) {
              #item .item__box .inbox .txt .item__summary .caution {
                margin-top: 50px; } }
            #item .item__box .inbox .txt .item__summary .caution h4 {
              padding: 0;
              margin: 15px 0 0 0;
              line-height: 1.4; }
            #item .item__box .inbox .txt .item__summary .caution p {
              margin: 10px 0 0 0;
              line-height: 1.7; }
    #item .item__box .item__btn {
      margin: 60px auto 0 auto;
      text-align: center; }
      @media screen and (max-width: 897px) {
        #item .item__box .item__btn {
          margin: 30px 0 0 0;
          text-align: left; } }
      #item .item__box .item__btn .btnlinestretches4 {
        border-color: #636C74;
        color: #FFFFFF; }
        #item .item__box .item__btn .btnlinestretches4::before, #item .item__box .item__btn .btnlinestretches4::after {
          left: 180px; }
    #item .item__box .slider01 img {
      width: 500px;
      height: 500px;
      object-fit: cover;
      /* この一行を追加するだけ！ */ }
      @media screen and (max-width: 897px) {
        #item .item__box .slider01 img {
          width: 100%;
          height: 40vh; } }
    #item .item__box .thumbs01 img {
      width: 100%; }
  #item .relation__box {
    max-width: 1140px;
    margin: 90px auto 0 auto;
    padding: 90px 0 0 0;
    border-top: 1px solid #707070; }
    @media screen and (max-width: 897px) {
      #item .relation__box {
        padding: 40px 0 0 0;
        margin: 40px 20px 0 20px; } }
    #item .relation__box .inbox {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      #item .relation__box .inbox::before {
        content: "";
        width: 22%;
        display: block;
        order: 1; }
      #item .relation__box .inbox::after {
        content: "";
        width: 22%;
        display: block; }
      #item .relation__box .inbox .item {
        width: 22%;
        margin: 60px 0 0 0;
        background: #fff;
        transition: 0.5s all; }
        @media screen and (max-width: 897px) {
          #item .relation__box .inbox .item {
            width: 48%;
            margin: 20px 0 0 0; } }
        #item .relation__box .inbox .item .txt {
          padding: 10px 15px; }
          @media screen and (max-width: 897px) {
            #item .relation__box .inbox .item .txt {
              text-align: center;
              display: none; } }
        #item .relation__box .inbox .item a {
          color: #222; }
        #item .relation__box .inbox .item:hover {
          transition: 0.5s all;
          transform: scale(1.1, 1.1);
          background: #f4f4f4;
          box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }
    #item .relation__box .relation__headline {
      padding: 0;
      font-family: angie-sans, sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 4.0rem;
      color: #EFEFEF;
      text-align: center;
      line-height: 1.4; }
      @media screen and (max-width: 897px) {
        #item .relation__box .relation__headline {
          font-size: 2.2rem; } }
      #item .relation__box .relation__headline span {
        font-size: 2.0rem;
        color: #BDB8B3;
        font-family: source-han-sans-japanese, sans-serif;
        font-weight: 500;
        font-style: normal;
        display: block; }
        @media screen and (max-width: 897px) {
          #item .relation__box .relation__headline span {
            font-size: 1.8rem; } }
    #item .relation__box .price {
      text-align: right; }
      #item .relation__box .price span {
        display: inline-block;
        padding: 0 0 0 5px;
        font-size: 1.2rem; }
  #item ul.category__list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap; }
    @media screen and (max-width: 897px) {
      #item ul.category__list {
        justify-content: space-between; } }
    #item ul.category__list::after {
      display: block;
      content: "";
      width: 20%; }
      @media screen and (max-width: 897px) {
        #item ul.category__list::after {
          width: 48%; } }
  @media all and (max-width: 767px) {
    #item ul.category__list {
      flex-wrap: wrap;
      justify-content: flex-start; } }
  #item ul.category__list li {
    text-align: center;
    width: auto;
    margin: 0 2% 2% 0; }
  @media all and (max-width: 767px) {
    #item ul.category__list li {
      width: 46%;
      text-align: center;
      margin: 0 1% 2% 1%; } }
  #item ul.category__list li a {
    display: block;
    padding: 10px 15px;
    color: #fff;
    font-weight: 700;
    border: 2px solid #fff; }
  @media screen and (max-width: 897px) {
    #item ul.category__list li a {
      padding: 4px 15px;
      padding: 0 6px;
      font-size: 1.2rem; } }
  #item ul.category__list li a:hover {
    color: #222;
    background: #fff; }
  #item .item__list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    #item .item__list::after {
      content: "";
      width: 30%;
      display: block; }
    #item .item__list__item {
      width: 30%;
      margin: 60px 0 0 0;
      background: #fff;
      transition: 0.5s all; }
      @media screen and (max-width: 897px) {
        #item .item__list__item {
          width: 48%;
          margin: 30px 0 0 0; } }
      #item .item__list__item .txt {
        padding: 15px;
        font-size: 1.6rem;
        line-height: 1.4;
        font-weight: 400; }
        @media screen and (max-width: 897px) {
          #item .item__list__item .txt {
            padding: 10px 5px;
            font-size: 1.4rem;
            font-weight: normal; } }
      #item .item__list__item a {
        color: #222; }
      #item .item__list__item:hover {
        transition: 0.5s all;
        transform: scale(1.1, 1.1);
        background: #e7e7e7;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }
      #item .item__list__item ul {
        padding: 0;
        line-height: 1.4 !important; }
        #item .item__list__item ul li {
          display: inline;
          border: 1px solid #222;
          border-radius: 100px;
          padding: 0 10px;
          font-size: 1.4rem;
          background: #e7e7e7; }
          @media screen and (max-width: 897px) {
            #item .item__list__item ul li {
              font-size: 1.2rem; } }
      #item .item__list__item .img {
        position: relative; }
        #item .item__list__item .img:before {
          content: "";
          display: block;
          padding-top: 100%; }
        #item .item__list__item .img img {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          object-fit: cover; }
      #item .item__list__item .price {
        margin: 5px 0 0 0;
        text-align: right; }
        #item .item__list__item .price span {
          display: inline-block;
          padding: 0 0 0 5px;
          font-size: 1.2rem; }
  #item .item__headline h2 {
    padding: 20px 0;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    border-bottom: solid 1px #707070;
    margin: 0 0 30px 0; }

.wp-pagenavi {
  margin: 60px 0 0 0;
  text-align: center; }

.wp-pagenavi a, .wp-pagenavi span {
  padding: 3px 9px !important; }

.wp-pagenavi a:hover, .wp-pagenavi span.current {
  color: #222 !important;
  background: #fff !important;
  border: 1px solid #fff !important; }

#items {
  background: #f4f4f4; }
  #items h2 {
    text-align: center;
    color: #1B2C3C; }
  #items .item__box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    #items .item__box__list {
      width: 18%;
      margin: 0 0 50px 0;
      background: #fff;
      transition: 0.5s all; }
      @media screen and (max-width: 897px) {
        #items .item__box__list {
          width: 48%;
          margin: 0 0 25px 0; } }
      #items .item__box__list .txt {
        padding: 10px;
        font-size: 1.5rem;
        line-height: 1.4;
        font-weight: 400; }
        @media screen and (max-width: 897px) {
          #items .item__box__list .txt {
            padding: 10px 5px;
            font-size: 1.4rem;
            font-weight: 400; } }
        #items .item__box__list .txt h3 {
          font-weight: 400;
          margin: 5px 0; }
      #items .item__box__list .img {
        position: relative; }
        #items .item__box__list .img:before {
          content: "";
          display: block;
          padding-top: 100%; }
        #items .item__box__list .img img {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          object-fit: cover; }
      #items .item__box__list a {
        color: #222; }
      #items .item__box__list:hover {
        transition: 0.5s all;
        transform: scale(1.1, 1.1);
        background: #e7e7e7;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; }
      #items .item__box__list ul {
        padding: 0;
        line-height: 1.4 !important; }
        #items .item__box__list ul li {
          display: inline;
          border: 1px solid #222;
          border-radius: 100px;
          padding: 0 10px;
          font-size: 1.2rem;
          background: #e7e7e7; }
          @media screen and (max-width: 897px) {
            #items .item__box__list ul li {
              font-size: 1.2rem; } }
      @media screen and (max-width: 897px) {
        #items .item__box__list:nth-child(n + 5) {
          display: none; } }
      #items .item__box__list .price {
        text-align: right; }
        #items .item__box__list .price span {
          display: inline-block;
          padding: 0 0 0 5px;
          font-size: 1.2rem; }
    #items .item__box .dammy {
      width: 18%; }

.inbox3 {
  display: flex;
  justify-content: space-between;
  flex-flow: row-reverse; }
  @media screen and (max-width: 897px) {
    .inbox3 {
      display: block; } }
  .inbox3 aside {
    width: 17%; }
    @media screen and (max-width: 897px) {
      .inbox3 aside {
        margin: 20px 0 0 0;
        width: 100%; } }
    .inbox3 aside h3 a {
      color: #fff;
      border-bottom: 1px solid #f4f4f4;
      display: block;
      padding: 15px 0;
      margin: 0 0 15px 0; }
    .inbox3 aside li:not(:last-of-type) {
      margin: 0 0 15px 0; }
    .inbox3 aside li li {
      margin: 0 !important; }
      .inbox3 aside li li a {
        color: #f4f4f4;
        border-bottom: 1px dotted #666;
        display: block;
        padding: 5px 0; }
    .inbox3 aside a:hover {
      opacity: 0.7; }
  .inbox3 .inleft {
    width: 78%; }
    @media screen and (max-width: 897px) {
      .inbox3 .inleft {
        width: 100%; } }
    .inbox3 .inleft ul {
      margin: 0 0 10px 0;
      display: flex;
      justify-content: center; }
      .inbox3 .inleft ul li {
        margin: 0 15px; }
        @media screen and (max-width: 897px) {
          .inbox3 .inleft ul li {
            margin: 0 10px; } }
        .inbox3 .inleft ul li a {
          color: #fff; }
          .inbox3 .inleft ul li a:hover {
            opacity: 0.7; }
  .inbox3 .count {
    text-align: center;
    padding: 0 0 30px 0; }
  .inbox3 .count-btm {
    text-align: center;
    padding: 10px 0 0 0; }

.inbox {
  max-width: 1140px;
  margin: auto;
  padding: 40px 0 60px 0; }
  @media screen and (max-width: 897px) {
    .inbox {
      padding: 10px 0 20px 0; } }

.inbox h2 {
  text-align: center; }

.inbox .comBox {
  border: none; }

.inbox ul.item__box {
  margin: 0 0 60px 0; }
  @media screen and (max-width: 897px) {
    .inbox ul.item__box {
      margin: 0 0 20px 0; } }

.inbox ul.item__box li {
  padding: 15px 0;
  margin: 0 0 15px 0;
  border-bottom: 1px solid #636C74; }
  @media screen and (max-width: 897px) {
    .inbox ul.item__box li {
      padding: 0 0 10px 0;
      margin: 0 0 10px 0; } }

.inbox ul.item__box li a {
  display: flex;
  color: #fff; }
  @media screen and (max-width: 897px) {
    .inbox ul.item__box li a {
      flex-wrap: wrap; } }
  .inbox ul.item__box li a:hover {
    opacity: 0.7; }

.inbox ul.item__box li a .date {
  width: 10%; }
  @media screen and (max-width: 897px) {
    .inbox ul.item__box li a .date {
      width: 25%; } }

.inbox ul.item__box li a .tag {
  width: 12%;
  text-align: center;
  border: 1px solid #636C74;
  font-size: 1.3rem;
  line-height: 1;
  margin: 0 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px; }
  @media screen and (max-width: 897px) {
    .inbox ul.item__box li a .tag {
      width: 25%; } }

.inbox ul.item__box li a .txt2 {
  width: 100%; }