@charset "UTF-8";
body {
  color: #fff;
  font-family: "Noto Serif JP", sans-serif;
  background-color: #0f0f0f;
}

a {
  color: #fff;
}
a:hover {
  color: #707070;
}

.header-container {
  background-color: #0f0f0f;
}
@media screen and (min-width: 1200px), print {
  .header-logo .site-logo {
    top: 2rem;
  }
}
@media screen and (min-width: 1520px), print {
  .header-logo .site-logo {
    top: 0;
  }
}
@media screen and (min-width: 1920px), print {
  .header-logo .site-logo {
    left: -6.9rem;
  }
}
.header-logo .site-logo img {
  width: 4rem;
}
@media screen and (min-width: 1200px), print {
  .header-logo .site-logo img {
    width: 11rem;
  }
}
@media screen and (min-width: 1520px), print {
  .header-logo .site-logo img {
    width: 13.8rem;
  }
}

.header-info-shopping a:hover {
  color: #fff;
}

@media screen and (min-width: 1200px) {
  .is-fixed .header-logo a {
    top: 0;
  }
  .is-fixed .header-logo img {
    width: 9rem;
  }
}
@media screen and (min-width: 1920px) {
  .is-fixed .header-logo a {
    left: -4.5rem;
  }
}

@media screen and (min-width: 1200px), print {
  .nav {
    background-color: #0f0f0f;
  }
}
.nav-container {
  background-color: #0f0f0f;
}

.main-nav .nav-link {
  color: #f5db59;
}
@media screen and (max-width: 1199.98px) {
  .main-nav .nav-link {
    font-size: 2rem;
  }
}
@media screen and (min-width: 1200px), print {
  .main-nav .nav-link {
    font-size: 2.5rem;
    color: #fff;
  }
}
@media screen and (min-width: 1520px), print {
  .main-nav .nav-link {
    font-size: 3rem;
  }
}
@media screen and (min-width: 1920px), print {
  .main-nav .nav-link {
    font-size: 4rem;
  }
}
.main-nav .nav-link:hover {
  color: #fff;
}
@media screen and (min-width: 1200px), print {
  .main-nav .nav-link:hover {
    color: #f5db59;
  }
}
@media screen and (max-width: 1199.98px) {
  .main-nav .nav-label {
    color: #fff;
  }
}

.nav-button-icon {
  border-color: #fff;
}
.nav-button-icon::before, .nav-button-icon::after {
  border-color: #fff;
}

.nav-close-button .nav-button-icon::before, .nav-close-button .nav-button-icon::after {
  border-color: #fff;
}

.footer-nav .nav-link {
  color: #fff;
}
.footer-nav .nav-link:hover {
  color: #707070;
}

.link-btn {
  color: #fff;
}
.link-btn-arrow {
  border-color: #f5db59;
}
.link-btn-arrow::before {
  background-color: #f5db59;
}

a.link-btn:hover {
  color: #fff;
}
a.link-btn:hover::before {
  border-color: #f5db59;
}

.tel-button a {
  border-color: #707070;
}
.tel-button a::before {
  background-image: url(../img/base/tel_wht.svg);
}

.loader {
  background-color: #0f0f0f;
}
.loader::before {
  border-top-color: #f5db59;
}

.section-secondary:not(:first-of-type) {
  margin-top: 10rem;
}
@media screen and (min-width: 1200px), print {
  .section-secondary:not(:first-of-type) {
    margin-top: 14rem;
  }
}
@media screen and (min-width: 1920px), print {
  .section-secondary:not(:first-of-type) {
    margin-top: 25rem;
  }
}
.section-secondary:not(:last-child) {
  margin-bottom: 0;
}
.section-heading {
  color: #f5db59;
}
.section-heading .heading-lg {
  font-size: 4rem;
  color: #fff;
  letter-spacing: 0.025em;
}
@media screen and (min-width: 768px), print {
  .section-heading .heading-lg {
    font-size: 6rem;
  }
}
@media screen and (min-width: 1200px), print {
  .section-heading .heading-lg {
    font-size: 8rem;
  }
}

.page-title {
  color: #f5db59;
}
@media screen and (min-width: 1200px), print {
  .page-title {
    text-align: center;
  }
}
.page-title .title-lg {
  font-size: 4rem;
  color: #fff;
  letter-spacing: 0.025em;
}
@media screen and (min-width: 768px), print {
  .page-title .title-lg {
    font-size: 6rem;
  }
}
@media screen and (min-width: 1200px), print {
  .page-title .title-lg {
    font-size: 8rem;
  }
}
@media screen and (min-width: 1200px), print {
  .page-title-bgimg {
    height: 30rem;
  }
}
.page-title-secondary::before, .page-title-body::before {
  background-color: #2a2a2a;
}

.okesumi-about-container::before,
.okesumi-about-body::before {
  background-color: #2a2a2a;
}

@media screen and (min-width: 1520px), print {
  .okesumi-about-container::before {
    height: calc(100% - 12rem);
  }
}

@media screen and (min-width: 1920px), print {
  .okesumi-service-section {
    margin-bottom: 14rem;
  }
}

.okesumi-service-body {
  z-index: auto;
}

.okesumi-service-img1 .img-dmy-1 {
  background-color: #858585;
}
.okesumi-service-img1 .img-dmy-2 {
  background-color: #254a7a;
}

.okesumi-service-img2 .img-dmy-1 {
  background-color: #fef4e1;
}
.okesumi-service-img2 .img-dmy-2 {
  background-color: #b8a56d;
}

.okesumi-service-img3 .img-dmy-1 {
  background-color: #a83d44;
}
.okesumi-service-img3 .img-dmy-2 {
  background-color: #921e3a;
}

.okesumi-service-img4 .img-dmy-1 {
  background-color: #4c5e4b;
}
.okesumi-service-img4 .img-dmy-2 {
  background-color: #233a10;
}

.okesumi-service-border {
  background-color: #3f3f3f;
}
.okesumi-service-border::before {
  background-color: #3f3f3f;
}

.okesumi-contact-info .tel-num {
  color: #fff;
}

/* ハレトケ */
.haretoke-section {
  color: #000;
}
.haretoke-wrap {
  margin: 0 -2rem;
  padding: 8rem 2rem;
  background-color: #dcdcdc;
}
@media screen and (min-width: 1200px), print {
  .haretoke-wrap {
    margin: 0 -5rem;
    padding: 10rem 5rem;
  }
}
.haretoke-container {
  padding-top: 3rem;
  background: url(../img/tsukinoshou/img-haretoke.png) no-repeat top;
  background-size: 28rem auto;
}
@media screen and (min-width: 768px), print {
  .haretoke-container {
    padding-top: 4rem;
    background-size: 40rem auto;
  }
}
@media screen and (min-width: 1200px), print {
  .haretoke-container {
    padding-top: 5rem;
    background-size: auto;
  }
}
.haretoke-heading {
  color: #977e00;
}
@media screen and (min-width: 1200px), print {
  .haretoke-heading {
    margin-bottom: 5rem;
  }
}
.haretoke-heading .heading-lg {
  color: #000;
}
.haretoke-description {
  line-height: 2;
  font-size: 1.6rem;
}
@media screen and (min-width: 768px), print {
  .haretoke-description {
    line-height: 2.2;
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 1200px), print {
  .haretoke-description {
    line-height: 3;
    font-size: 2rem;
  }
}
.haretoke-description * {
  font-weight: 600;
}

/* 商品ラインナップ */
@media screen and (min-width: 1200px), print {
  .lineup-heading {
    margin-bottom: 5rem;
  }
}
.lineup-description {
  line-height: 2;
  font-size: 1.6rem;
}
@media screen and (min-width: 768px), print {
  .lineup-description {
    line-height: 2.2;
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 1200px), print {
  .lineup-description {
    line-height: 3;
    font-size: 2rem;
  }
}
.lineup-description * {
  font-weight: 600;
}
.lineup-menu {
  display: flex;
  flex-wrap: wrap;
  margin: 5rem -1rem -1rem 0;
}
@media screen and (min-width: 768px), print {
  .lineup-menu {
    margin: 7.5rem -1.5rem -1.5rem 0;
  }
}
@media screen and (min-width: 1200px), print {
  .lineup-menu {
    margin: 9rem -3rem -2rem 0;
  }
}
.lineup-menu-col {
  width: 50%;
  padding: 0 1rem 1rem 0;
}
@media screen and (min-width: 768px), print {
  .lineup-menu-col {
    width: 33.3333%;
    padding: 0 1.5rem 1.5rem 0;
  }
}
@media screen and (min-width: 1200px), print {
  .lineup-menu-col {
    padding: 0 3rem 2rem 0;
  }
}
.lineup-menu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 5rem;
  line-height: 1.4;
  font-weight: 700;
  font-size: 1.2rem;
  text-align: center;
  background-color: #3f3f3f;
  transition: background-color 0.3s;
}
@media screen and (min-width: 375px), print {
  .lineup-menu a {
    height: 5.6rem;
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 768px), print {
  .lineup-menu a {
    height: 6.5rem;
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 992px), print {
  .lineup-menu a {
    flex-direction: row;
  }
}
@media screen and (min-width: 1200px), print {
  .lineup-menu a {
    height: 8.6rem;
    font-size: 2.1rem;
  }
}
.lineup-menu a:hover {
  text-decoration: none;
  color: #fff;
  background-color: #707070;
}
.lineup-menu a.is-current {
  color: #333;
  background-color: #f5db59;
}
.lineup-item {
  margin-top: 16rem;
}
@media screen and (min-width: 1920px), print {
  .lineup-item {
    margin-top: 20rem;
  }
}
@media screen and (min-width: 1200px), print {
  .lineup-item-container {
    display: flex;
  }
}
.lineup-img {
  width: 26rem;
  margin-right: auto;
  margin-bottom: 5rem;
  margin-left: auto;
}
@media screen and (min-width: 768px), print {
  .lineup-img {
    width: 40rem;
  }
}
@media screen and (min-width: 1200px), print {
  .lineup-img {
    align-self: flex-end;
    width: 54rem;
    margin-bottom: 7rem;
  }
}
@media screen and (min-width: 1520px), print {
  .lineup-img {
    width: 62.3rem;
  }
}
.lineup-img .img-dmy {
  position: relative;
  height: 17.3rem;
  margin-bottom: -17.3rem;
  z-index: 1;
}
@media screen and (min-width: 768px), print {
  .lineup-img .img-dmy {
    height: 26.6rem;
    margin-bottom: -26.6rem;
  }
}
@media screen and (min-width: 1200px), print {
  .lineup-img .img-dmy {
    height: 36rem;
    margin-bottom: -36rem;
  }
}
@media screen and (min-width: 1520px), print {
  .lineup-img .img-dmy {
    height: 41.5rem;
    margin-bottom: -41.5rem;
  }
}
.lineup-img .img-dmy-item {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  opacity: 0;
}
.lineup-img .img-dmy-1 {
  background-color: #858585;
}
.lineup-img .img-dmy-2 {
  background-color: #ccc;
}
.lineup-img .img-box {
  position: relative;
  z-index: 3;
  -webkit-transform: rotate(-2.5deg);
          transform: rotate(-2.5deg);
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
}
.lineup-img.is-active .img-dmy-1 {
  -webkit-animation: img_rotate1 2s forwards;
          animation: img_rotate1 2s forwards;
}
.lineup-img.is-active .img-dmy-2 {
  -webkit-animation: img_rotate2 2s forwards;
          animation: img_rotate2 2s forwards;
}
.lineup-img.is-active .img-box {
  -webkit-animation: img_rotate3 2s forwards;
          animation: img_rotate3 2s forwards;
}
.lineup-img1 .img-dmy-2 {
  background-color: #254a7a;
}
.lineup-img2 .img-dmy-2 {
  background-color: #215113;
}
.lineup-img3 .img-dmy-2 {
  background-color: #fadfff;
}
.lineup-img4 .img-dmy-2 {
  background-color: #84133c;
}
.lineup-img5 .img-dmy-2 {
  background-color: #4d2e39;
}
.lineup-main {
  flex: 1;
}
.lineup-inner {
  max-width: 64rem;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 1200px), print {
  .lineup-inner {
    width: 48rem;
    max-width: none;
    margin-right: 0;
    margin-left: auto;
  }
}
@media screen and (min-width: 1280px), print {
  .lineup-inner {
    width: 58rem;
  }
}
@media screen and (min-width: 1520px), print {
  .lineup-inner {
    width: 65rem;
  }
}
.lineup-head {
  margin-bottom: 2rem;
}
@media screen and (min-width: 1200px), print {
  .lineup-head {
    margin-bottom: 4rem;
  }
}
.lineup-logo {
  max-width: 7.5rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}
@media screen and (min-width: 1200px), print {
  .lineup-logo {
    max-width: 13.8rem;
    margin-bottom: 4rem;
  }
}
@media screen and (min-width: 1520px), print {
  .lineup-logo {
    margin-bottom: 5.4rem;
  }
}
.lineup-title {
  line-height: 1.6;
  font-weight: 700;
  font-size: calc(2rem + 2vw);
  text-align: center;
}
@media screen and (min-width: 375px), print {
  .lineup-title {
    font-size: 3rem;
  }
}
@media screen and (min-width: 1200px), print {
  .lineup-title {
    font-size: 4rem;
    text-align: left;
  }
}
@media screen and (min-width: 1520px), print {
  .lineup-title {
    font-size: 5.9rem;
  }
}
.lineup-title.font-mincho {
  font-weight: 700;
}
.lineup-title.font-marugo {
  font-weight: 500;
}
.lineup-title .br {
  display: block;
}
.lineup-body {
  position: relative;
  padding-bottom: 4rem;
  z-index: 2;
}
@media screen and (min-width: 1200px), print {
  .lineup-body {
    padding-bottom: 7rem;
  }
}
.lineup-border {
  display: block;
  position: absolute;
  bottom: 0;
  left: 3.2rem;
  width: 100vw;
  height: calc(100% - 4.25rem);
  color: #3f3f3f;
  background-color: currentColor;
}
@media screen and (min-width: 1200px), print {
  .lineup-border {
    bottom: 7rem;
    right: 0;
    left: auto;
    width: calc(100% + 35vw);
    height: calc(100% - 4.75rem - 7rem);
  }
}
@media screen and (min-width: 1520px), print {
  .lineup-border {
    width: calc(100% + 57rem);
    height: calc(100% - 6rem - 7rem);
  }
}
@media screen and (min-width: 1200px), print {
  .lineup-border::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    width: 50vw;
    height: 100%;
    background-color: currentColor;
  }
}
.lineup-text {
  position: relative;
  line-height: 2.5;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1200px), print {
  .lineup-text {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 1520px), print {
  .lineup-text {
    line-height: 3;
    font-size: 2rem;
  }
}
.lineup-text * {
  font-weight: 700;
}
@media screen and (min-width: 1520px), print {
  .lineup-text .br {
    display: block;
  }
}
.lineup-text .br-lg {
  display: block;
}
@media screen and (min-width: 1200px), print {
  .lineup-text .br-lg {
    display: inline;
  }
}
.lineup-more {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom: -2rem;
}
@media screen and (min-width: 1200px), print {
  .lineup-more {
    display: block;
    margin-bottom: -5rem;
  }
}
@media screen and (min-width: 1920px), print {
  .lineup-more {
    margin-top: 3rem;
  }
}
@media screen and (min-width: 768px), print {
  .lineup-more-list {
    display: flex;
  }
}
@media screen and (min-width: 1200px), print {
  .lineup-more-list {
    flex-direction: column;
    align-items: flex-end;
  }
}
@media screen and (min-width: 1520px), print {
  .lineup-more-list {
    flex-direction: row;
    align-items: center;
  }
}
@media screen and (min-width: 768px), print {
  .lineup-more-item {
    margin-right: 2.5rem;
    margin-left: 2.5rem;
  }
}
@media screen and (min-width: 1200px), print {
  .lineup-more-item {
    margin-right: 0;
    margin-left: 0;
  }
}
.lineup-more-item:not(:last-child) {
  margin-bottom: -4rem;
}
@media screen and (min-width: 768px), print {
  .lineup-more-item:not(:last-child) {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1200px), print {
  .lineup-more-item:not(:last-child) {
    margin-bottom: -5rem;
  }
}
@media screen and (min-width: 1520px), print {
  .lineup-more-item:not(:last-child) {
    margin-right: 4rem;
    margin-bottom: 0;
  }
}
.lineup-gallery {
  margin: 10rem -2rem 0;
}
@media screen and (min-width: 1200px), print {
  .lineup-gallery {
    margin: 16rem -5rem 0;
  }
}
.lineup-rule {
  margin-top: 10rem;
}
@media screen and (min-width: 768px), print {
  .lineup-rule {
    display: flex;
    justify-content: center;
    margin: 10rem -2rem 0;
  }
}
@media screen and (min-width: 1200px), print {
  .lineup-rule {
    margin: 16rem -5rem 0;
  }
}
@media screen and (min-width: 1920px), print {
  .lineup-rule {
    margin-top: 20rem;
  }
}
@media screen and (min-width: 768px), print {
  .lineup-rule-item {
    margin: 0 1rem;
  }
}
@media screen and (min-width: 1200px), print {
  .lineup-rule-item {
    margin: 0 2rem;
  }
}

/* 商品一覧 */
.news-list-img .news-link {
  color: #fff;
}