@charset "UTF-8";

/*HTML style.css*/

:root {
  --Link-color: #BB9856;
  --Orange-red:#BD6D53;
  --Bg-color: #F8F7F2;
  --Ft-color: #E5DBCC;
  --Line-color: #DCD4B2;
  --Green1: #95B07A;
  --Green2: #E3EED8;
  --Green3: #596E44;
  --Red: #B5140F;


  --Red2: #B80000;
  --Yellow: #f1d628;
  --Blue: #03a9f4;
  --Black: #2a2a2a;
  --Gray: #f6f6f6;
  --Gray2: #d4d4d4;
  --Sans-serif: "YakuHanJP", "Noto Sans JP", sans-serif;
  --Serif: "YakuHanJP", "Noto Serif JP", serif;
  --hina: "Hina Mincho", serif;
  --ou: "Vollkorn", sans-serif;

}

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, address, em, img, small, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, figure, figcaption, footer, header, nav, section, time, audio, video {
  font-size: 100%;
  font-weight: 400;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: 0;
  outline: 0;
  background: transparent;
}
html,
body {
  width: 100%;
  height: 100%;
}
html {
  font-size: 62.5%;
  scroll-padding-top: 100px;
  @media (max-width: 1080px) {
    scroll-padding-top: 75px;
  }
}
body {
  font-family: "YakuHanJP", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 1.7rem;
  line-height: 1.8;
  font-weight: 400;
  position: relative;
  overflow: auto;
  width: 100%;
  min-width: 320px;
  margin: auto;
  letter-spacing: 0.1em;
  color: var(--Black);
  background: #fff;

  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.is-fixed,
body.is-fixed {
  overflow: hidden;
}

blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  transition: 0.2s ease-in-out;
  text-decoration: none;
  color: var(--Link-color);
  background-color: transparent;
  &:hover {
    color: var(--Orange-red);
  }
}

img {
  width: 100%;
  height: auto;
}
::selection {
  background: #e9ebf2;
}
::-moz-selection {
  background: #e9ebf2;
}

p + p {
  margin-top: 3rem;
}

.wrapper {
  position: relative;
  background: var(--Bg-color);
}
/* =======================================================
   LOADER
======================================================== */
#loading {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: var(--Bg-color);
}
.loaded {
  visibility: hidden;
  opacity: 0;
}

body {
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
          animation: fadeIn 2s ease 0s 1 normal;
}
/* =======================================================
   header
======================================================== */
.l-header,
.hd__inner,
.nav-btn {
  height: 100px;
  @media (max-width: 1080px) {
    height: 75px;
  }
}
/*======== l-header ==========================*/
.l-header {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
}
.l-header.bg-f {
  background: #fff;
  box-shadow: 0 0 6px -2px rgb(0 0 0 / 20%);
  transition: 0.3s;
}
.hd__inner {
  display: flex;
  visibility: inherit;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(15px, 1.875vw, 30px);
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
  opacity: 1;
  background: #fff;
  position: relative;
}

body.is-fixed .hd__inner {
  visibility: hidden;
  opacity: 0;
}

/*======== logo ==========================*/
.logo__link {
  display: flex;
  align-items: center;
  color: var(--Black);
}

.logo__img {
  display: block;
  width: clamp(50px,6.586vw,60px);
}

.logo__txt {
  font-family: var(--Serif);
  font-size: 2rem;
  font-weight: 500;
  margin-left: clamp(1rem, 1vw, 1.6rem); /*1600*/
  line-height: 1;
}

.logo__txt span:first-of-type {
  font-size: clamp(1rem, 0.875vw, 1.4rem);
}

.logo__txt span:nth-of-type(2) {
  font-size: clamp(1.4rem, 1.25vw, 2rem); /*1600*/
  margin-top: clamp(2px, 0.313vw, 5px); /*1600*/
}

.logo__txt .en {
  display: none;
}
/*************************/
@media screen and (max-width: 991px) {
  .hd-info-logo {
    width: 100%;
  }
  .logo__txt {
    line-height: 1.4;
  }
  .logo__txt .en {
    font-size: clamp(0.8rem, 1.009vw, 1rem);
    display: block;
  }
  .logo__txt span:nth-of-type(2) {
    font-size: clamp(1.4rem, 1.816vw, 1.8rem);
    margin-top: 0;
  }
}
/*************************/

/*======== nav-btn ==========================*/
.nav-btn {
  width: clamp(60px, 5.625vw, 90px);
  cursor: pointer;
  position: relative;
  @media screen and (min-width: 1025px) {
    display: none;
  }
}
.nav-btn__inner {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.nav-btn__line {
  position: absolute;
  /* width: 24px; */
  height: 1px;
  right:  0;
  transition: 0.3s;
  transition: 0.3s ease-in-out;
  background: var(--Black);
}
.nav-btn__line:nth-child(1) {
  top: 32px;
  width:  50px;
  @media (max-width: 1080px) {
    top: 21px;
  }
}
.nav-btn__line:nth-child(2) {
  top: 41px;
  @media (max-width: 1080px) {
    top: 29px;width: 37px;
  }
}
.nav-btn__line:nth-child(3) {
  top: 50px;
  width: 26px;
  @media (max-width: 1080px) {
    top: 37px;
  }
}
.nav-btn__txt {
}

.nav-btn__txt {
  font-size: 1.4rem;
  letter-spacing: 2px;
  position: absolute;
  transition: 0.3s;
  top: 57px;
  right: 0;
  font-family: var(--ou);
  @media (max-width: 1080px) {
    top: 44px;
  }
}

/*== is-view ================*/
.is-open .nav-btn__line:nth-child(1) {
  transform: rotate(-45deg);
  width: 38px;
  right: 6px;
  @media (max-width: 1080px) {
    top: 30px;
  }
}
.is-open .nav-btn__line:not(:nth-child(1)) {
  transform: rotate(45deg);
  width: 38px;
  right: 6px;
  @media (max-width: 1080px) {
    top: 30px;
  }
}

/*======== l-header-menu ==========================*/


/*************************/
@media screen and (min-width: 1025px)
{
  .hd-menu {
    margin-right: max(20px, 0.75vw);
    margin-left: auto;
  }
  .hd-menu ul {
    font-size: clamp(1.3rem, 0.938vw, 1.6rem);
    display: flex;
  }
  .hd-menu__list + .hd-menu__list {
    /* margin-left: clamp(24px, 1.875vw, 30px); */
    /* margin-left:5px; */
    margin-left: clamp(5px,0.8vw, 30px);
  }
  .hd-menu__list {
    position: relative;
  }




  .hd-menu__list a {
    font-weight: 400;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(5px, 0.625vw, 10px) 0;
    letter-spacing: 0.2em;
    color: var(--Black);
  }
  .hd-menu__list a:hover {
    color: var(--Link-color);
  }
  .hd-menu__list a::after {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 1px;
    content: "";
    transition: 0.3s;
    opacity: 0;
    background: var(--Link-color);
  }
  .hd-menu__list a:hover::after {
    opacity: 1;
  }
}
/*************************/
.hd-menu__list.current a {
  color: var(--Link-color);
}

/*************************/
@media screen and (max-width: 1024px) {
  .hd-menu {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    position: absolute;
    top: 70px;
    right: 0;
    z-index: 100;
    width: 400px;
    height: 100vh;
    background: #fff;
    @media (max-width: 449px) {
      width: 100%;
    }
    & ul {
      margin: 40px;
      & li.hd-menu__list a {
        display: block;
        margin-bottom: 40px;
        border-bottom: 1px solid #ccc;
      }
    }
  }

  .hd-menu.is-active {
    opacity: 1;
    pointer-events: auto;
  }
}


/*======== current ==========================*/
.hd-menu__list a.current {
  color: var(--Green3);
}
.hd-menu__list a.current::after {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 2px;
  content: "";
  opacity: 1;
  background: var(--Green3);
}

/*======== is-fixed ==========================*/
body.is-fixed .l-header {
  position: relative;
}

/* =======================================================
   section
======================================================== */
.p-index__sec {
  margin-bottom: clamp(80px, 10.294vw, 140px); /*1360*/
  padding-bottom: clamp(80px, 10.294vw, 140px); /*1360*/
  overflow: hidden;
  background-color: var(--Bg-color);
  &.b-contact {
    margin-bottom: 0;
  }
}
.p-index__sec:not(.lower-top) {
  padding-top: clamp(80px, 10.294vw, 140px); /*1360*/
  margin-top: clamp(-140px, -10.294vw, -80px); /*1360*/
}
.p-index__sec.btm-none {
  margin-bottom: 0;
}

.c-container {
  width: 100%;
  margin: 0 auto;
}
.-wide {
  width: 1600px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 clamp(10px, 2.5vw, 40px); /*1600*/
}
.-mid {
  width: 1360px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 clamp(10px, 2.5vw, 40px); /*1600*/
}
.-full {
  max-width: 100%;
  margin: 0 auto;
}
.p-index__sec.bg-w {
  background: #fff;
}
.p-index__sec.nobg {
  background: transparent;
}
.nobg-wrap {
  padding-top: 60vh;
}
.bg-img {
  position: relative;
  &::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    right: -23px;
    width: 330px;
    aspect-ratio: 330 / 500;
    background: url(../images/common/bg-illust.svg) bottom right no-repeat;
    background-size: contain;
    z-index: 0;
    opacity: .07;
  }
  .c-container {
    position: relative;
    z-index: 1;
  }
}

/* =======================================================
   row-container
======================================================== */
.row-container {
  display: flex;
  &.imgtext {
    align-items: flex-start;
    .image-block {
      width: 40%;
      @media (min-width: 992px) {
        margin-right: clamp(40px,4.412vw,60px); /*1360*/
      }
      @media (max-width: 991px) {
        margin-bottom: 40px;
      }
      & img {
        height: 100%;
        width: 100%;
        display: block;
        object-fit: cover;
      }
    }
    .text-block {
      width: 60%;
    }
  }
}

@media (max-width: 991px)
{
  .row-container {
    &.imgtext {
      flex-direction: column;
      align-items: stretch;
      .image-block,
      .text-block {
        height: auto !important;
        width: 100%;
      }
      .image-block img {
        width: 100%;
        height: auto;
      }
    }
  }
}


/* =======================================================
   separate-block
======================================================== */
.separate-block {
  display: flex;
  position: relative;
  &.normal {
    justify-content: space-between;
  }
  .image-left,
  .image-right {
    position: relative;
    & img {
      width: 26.042vw;
      object-fit: cover;
    }
  }
  .image-left {
    order: 1;
    left: clamp(-80px,-4.167vw,-40px);
    @media (min-width: 1081px) {
      flex-grow: 1;
    }
    & img {
      object-position: 50% 30%;
    }
    &.adjust {
      @media (min-width: 1081px) {
        margin-top: 10vw;
      }
    }
  }
  .image-right {
    order: 3;
    right: clamp(-80px,-4.167vw,-40px);
    @media (min-width: 1081px) {
      align-self: flex-end;
      flex-shrink: 2;
    }
    & img {
      object-position: 50% 64%;
    }
    &.adjust img {
      @media (min-width: 1081px) {
        height: 350px;
      }
    }
  }
  .text {
    order: 2;
    flex-grow: 2;
    width: clamp(650px,44.792vw,860px);
    margin: 0 clamp(0px,2.083vw,60px);
  }
  .head-text {
    font-family: var(--hina);
    font-size: clamp(2.4rem,2.778vw,3rem); /*1080*/
    line-height: 1.2;
    @media (min-width: 1081px) {
      white-space: nowrap;
    }
    & span {
      display: block;
      & + span {
        margin-top: 0.8em;
      }
    }
  }
  .cts-text {
    margin-top: 80px;
    line-height: 2;
    & p + p {
      margin-top: 2em;
    }
  }

  &.normal .text-block {
    width: 55%;
    @media (min-width: 1081px) {
      order: 2;
    }
  }
  &.normal .image-block {
    width: 40%;
    @media (min-width: 1081px) {
      order: 1;
    }
  }
  &.reverse .text-block {
    order: 2;
    @media (min-width: 1081px) {
      order: 1;
    }
  }
  &.reverse .image-block {
    @media (max-width: 1080px) {
      margin-bottom: 40px;
    }
  }
}
.top-philosopy .text {
  margin-top: 4em;
}
@media (max-width: 1080px) {
  .separate-block {
    flex-wrap: wrap;
    justify-content: space-between;
    .image-right,
    .image-left {
      width: 48%;
      right: 0;
      left: 0;
      & img {
        width: 100%;
      }
    }
    .image-right {
      order: 2;
    }
    .text {
      order: 3;
      width: 100%;
    }
    &.normal .text-block,
    &.normal .image-block {
      width: 100%;
    }
    &.normal:not(.reverse) .image-block {
      margin-top: 40px;
      & img {
        object-fit: cover;
      max-height: 30vh;
      }
    }
  }
}
/*======== reverse ==========================*/
@media (min-width: 1081px) {
  .separate-block.reverse {
    .image-left {
      align-self: flex-end;
    }
    .image-right {
      align-self: auto;
    }
  }
}


/* =======================================================
   top-head
======================================================== */
.top-head {
  margin-bottom: 80px;
  &.center {
    text-align: center;
  }
}
.top-head2 {
  font-family: var(--hina);
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 60px;
  line-height: 1.4;
}

/* =======================================================
   b-contact
======================================================== */
.b-contact {
  background: url(../images/common/btm-contact_bg.jpg) center center no-repeat;
  position: relative;
  background-size: cover;
  text-align: center;
  color: #fff;
  padding: clamp(80px,11.111vw,120px) 0;
  
  
  
  &::after {
    content:'';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .6;
    z-index: 0;
  }
  .c-container {
    position: relative;
    z-index: 1;
  }
  .heading {
    text-align: center;
    position: relative;
    display: inline-block;
    &::before,
    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      width: calc(100% / 2 - 200px);
      height: 1px;
      background: #fff;
      @media (max-width: 768px) {
        width: calc(100% / 2 - 140px);
      }
    }
    &::before {
      left: 0px;
    }
    &::after {
      right: 0px;
    }
  }
  .sec-body {
    display: flex;
    justify-content: space-around;
    text-align: left;
    @media (max-width: 1080px) {
      flex-direction: column;
      align-items: center;
    }
  }
  .text-block {
    width: max(530px,50%);
    @media (max-width: 1080px) {
      margin-bottom: 40px;
      width: 100%;
      text-align: center;
    }
    & p {
      @media (max-width: 1080px) {
        display: inline-block;
        text-align: left;
      }
    }
  }
  .contact-num {

    flex-shrink: 2;
    @media (min-width: 1081px) {
      padding-left: clamp(60px,5.208vw,100px);
    }
    .btn01 {
      margin-top: 30px;
      & a {
      border: 1px solid #fff;
        &::before {
          display: none;
        }
      }
    }
  }
}
.b-contact__tel {
  font-family: var(--ou);
  color: #fff;
  font-size: 4rem;
  letter-spacing: 4px;
  & i::before {
    color: #fff;
    font-size: 3rem;
    display: inline-block;
    margin-right: 10px;
  }
}


/* =======================================================
   order-btn
======================================================== */
.order-btn {
  position: fixed;
  z-index: 9999;
  right: 0;
  bottom: 69px;
  line-height: 1;
}
.order-btn a {
  display: inline-block;
  width: 70px;
  padding: 30px 13px;
  background-color: var(--Link-color);
  color: #fff;
  font-family: var(--hina);
  font-size: 1.2rem;
  letter-spacing: .3em;
  transition-duration: .4s;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(.165,.84,.44,1);
  writing-mode: vertical-rl;
  font-size-adjust: 0.53;
  &:hover {
    background: #fff;
    color: var(--Black);
    border: 1px solid var(--Black)
  }
}
.order-btn__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  & span {
    font-size-adjust: 0.53;
    font-weight: 500;
    line-height: 1.8;
    @media (min-width: 992px) {
      padding-top: 10px;
    }
    @media (max-width: 991px) {
      margin-left: 10px;
    }
  }
}

/*************************/
@media screen and (max-width: 991px)
{
  .order-btn {
    bottom: 0;
  }
  .order-btn a {
    width: auto;
    writing-mode: horizontal-tb;
    padding: 10px 20px 8px 20px;
    font-size: 1rem;
  }
    .l-footer__sublink ul {
    margin-bottom:20px;
  }
}
/*************************/


/* =======================================================
   page-top
======================================================== */
#page-top {
  position: fixed;
  right: 0px;
  bottom: 0px;
  width: 70px;
  height: 70px;
  cursor: pointer;
  z-index: 2;
  background: var(--Black);
  color: #fff;
  cursor: pointer;
  transition: all .3s;
  @media (max-width: 991px) {
    display: none;
  }
  i {
    display: inline-block;
    line-height: 1;
    transform: rotate(-90deg);
    font-size: 1.2rem;
    margin-bottom: 4px;
  }
  span {
    font-family: var(--ou);
  }
  &:hover {
    background: var(--Black);
    color: #fff;
  }
}
.pagetop__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:  column;
  width: 100%;
  height: 100%;
}

/* =======================================================
   footer
======================================================== */
footer {
  background: var(--Ft-color);
  padding-top: clamp(80px,8.824vw,120px);
  padding-bottom: 10px;
  @media (max-width: 780px) {
    padding-bottom: 57px;
  }
  & a {
    color: var(--Black);
  }
}
.footer_inner {
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
  @media (max-width: 1080px) {
    justify-content: center;
  }
}
.footer_add {
  margin-top: 20px;
  font-size: 1.4rem;
  & p + p {
    margin-top: 14px;
  }
}
.f_insta {
  display: block;
  margin-top: 20px;
  /* max-width: 150px; */
  max-width: 30px;
  transition: .2s;


  &:hover{
    opacity: .7;
  }
}
/*======== l-footer__navi ==========================*/
.child-item {
    display: flex;
    flex-wrap: wrap;
      font-size: 1.6rem;
  & > li {
    padding-left: 60px;
  }
  & > .navi-item {
    & > a {
      width: 100%;
    }
    & a {
      position: relative;
      display: block;
    }
  }  .navi-item {
    & a {
      padding-left: 18px;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        display: inline-block;
        top: calc(50% - 3px);
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: var(--Link-color);
      }
    }
  }
  .g-child-item {
    padding-top: 5px;
    padding-left: 20px;
    & a {
      padding-left: 18px;
      &::before {
        top: calc(50% - 1px);
        width: 8px;
        height: 1px;
        background: var(--Black);
      }
    }
  }
}
.g-child-item li + li,
.navi-item__cat li + li {
  margin-top: 5px;
}
.l-footer__navi__bottom {
  font-family: var(--ou);
  font-size: 1.4rem;
  text-align: center;
}

@media (max-width: 1300px) {
  .l-footer__navi {
    width: 60%;
  }
  .navi-item__cat {
    display: flex;
    margin-top: 40px;
    & li + li {
      margin-top: 0;
      margin-left: 30px;
    }
  }
}
@media (max-width: 1080px) {
  .l-footer__navi {
    display: none;
  }
}



/* =======================================================
   c-heading01
======================================================== */
.c-heading01 {
  font-family: var(--hina);
  font-size: clamp(3rem,3.704vw,4rem);
  margin-bottom: 5px;
}
.c-heading01__text {
  font-family: var(--ou);
  font-size: 2rem;
}

/* =======================================================
   sec-body
======================================================== */
.sec-body {
  padding-top: clamp(40px, 5.882vw, 80px);
}
.sec-body.-pt__small {
  padding-top: clamp(20px, 2.941vw, 60px);
}

/* =======================================================
   btn01
======================================================== */
.btn01 {
  margin-top: clamp(60px,10.417vw,80px);
  @media (max-width: 1080px) {
    text-align: center;
  }
}
.btn01 a {
  position: relative;
  display: inline-block;
  padding: 12px 36px 12px 55px;
  white-space: nowrap;
  color: #fff;
  background: var(--Black);
  &::before {
    content:'';
    display: block;
    position: absolute;
    top: -5px;
    left: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border: 1px solid var(--Black);
    transition: all .3s;
  }
  &::after {
    content:'';
    display: block;
    position: absolute;
    top: calc(50% + 1px);
    left: 30px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 6px;
    background: #fff;
    transition: all .3s;
  }
  &:hover {
    background: var(--Link-color);
    &::before {
      border-color: var(--Link-color);
    }
    &::after {
      height: 1px;
    }
  }
}


/* =======================================================
   font-setting
======================================================== */
.-serif {
  font-family: var(--Serif);
}

.-white {
  color: #fff;
}
.-green {
  color: var(--Green1);
}
.-red {
  color: var(--Red);
}

.-blue {
  color: var(--Blue);
}
.-bold {
  font-weight: 600;
}
.-bolder {
  font-weight: bold;
}

.under {
  border-bottom: 1px solid;
}

.highlight {
  background: linear-gradient(transparent 0%, #f8e32a6b 0%);
  margin: 0 2px;
  padding: 2px 4px;
}

.-fs_18 {
  font-size: 1.8rem;
}
.-fs_small {
  font-size: 0.8em;
}
.-left {
  text-align: left;
}
.-center {
  text-align: center;
}
.-right {
  text-align: right;
}
.-max980 {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
}
/*************************/
@media screen and (max-width: 991px) {
  .-sp_left {
    text-align: left;
  }
}
/*************************/

/* =======================================================
   display
======================================================== */
.dp-ib {
  display: inline-block;
}
.dp-ib_center {
  text-align: center;
}
.dp-ib_center > * {
  display: inline-block;
  text-align: left;
}

/*************************/
@media screen and (max-width: 991px) {
  .sp-none {
    display: none;
  }
}
/*************************/
@media screen and (min-width: 992px) {
  .pc-none {
    display: none;
  }
}
/*************************/

/* =======================================================
   fadeIn
======================================================== */

.fadeIn {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s ease-in-out;
}
.fadeIn.scrollin {
  transform: translateY(0);
  opacity: 1;
}

/* =======================================================
   margin,padding
======================================================== */
.mb_10 {
  margin-bottom: 10px;
}
.mb_40 {
  margin-bottom: 40px;
}
.mb_20-40 {
  margin-bottom: clamp(20px, 4.036vw, 40px);
}
.mb_30-40 {
  margin-bottom: clamp(30px, 4.036vw, 40px);
}
.mb_40-80 {
  margin-bottom: clamp(40px, 8.073vw, 80px);
}

.mt_10 {
  margin-top: 10px;
}
.mt_40 {
  margin-top: 40px;
}
.mt_20-40 {
  margin-top: clamp(20px, 4.036vw, 40px);
}
.mt_30-40 {
  margin-top: clamp(30px, 4.036vw, 40px);
}
.mt_40-80 {
  margin-top: clamp(40px, 8.073vw, 80px);
}
.mt_100 {
  margin-top: clamp(60px,13.021vw,100px); /*768*/
}

/* =======================================================
   other
======================================================== */
img.cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* =======================================================
   Inview
======================================================== */
.Inview {
  visibility: hidden;
  transition: 1s;
  transform: translateY(30px);
  opacity: 0;
}
.active {
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
}

/* =======================================================
   WEB-FONT
======================================================== */
@font-face {
  font-family: "webfont";
  font-weight: normal;
  font-style: normal;

  src: url("fonts/webfont.eot?txxr3j");
  src:
    url("fonts/webfont.eot?txxr3j#iefix") format("embedded-opentype"),
    url("fonts/webfont.ttf?txxr3j") format("truetype"),
    url("fonts/webfont.woff?txxr3j") format("woff"),
    url("fonts/webfont.svg?txxr3j#webfont") format("svg");
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "webfont" !important;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;

  speak: never;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow:before {
  content: "\e900";
}
.icon-check:before {
  content: "\e901";
}
.icon-mail:before {
  content: "\e902";
}
.icon-pin:before {
  content: "\e903";
  color: #4b4b4b;
}
.icon-rice_left:before {
  content: "\e904";
}
.icon-rice_right:before {
  content: "\e905";
}
.icon-tel:before {
  content: "\e906";
  color: #4b4b4b;
}


#container {
  margin: 20px;
  width: min(30vw, 150px);
  height: min(30vw, 150px);
  position: relative;
}
.table001 {
  width: 800px;
  max-width: 100%;
  border-collapse: collapse;
  border: 1px solid #333;
}
.table001 th,
.table001 td {
  padding: 10px;
  vertical-align: middle;
  border: 1px solid #333;
}
.table001 th {
  background: #fff06c;
}

/* =======================================================
   印刷設定
======================================================== */
@page {
  margin: 10mm;

  size: 210mm 297mm;
}
@media print {
  body {
    zoom: 0.8;
    width: 1190px;

    -webkit-print-color-adjust: exact;
  }
  .l-header {
    position: relative;
  }
  .l-main-img,
  #page .l-main-img__inner {
    height: 300px;
  }
  .l-main {
    padding-bottom: 80px;
  }
  .nav-btn {
    position: absolute;
  }
  .Inview {
    visibility: visible;
    opacity: 1;
  }
  #page-top {
    position: absolute;
  }
}






  .hd-menu__list_ec{display: none;}


@media screen and (min-width: 1025px) {
  .hd-menu__list_ec{
    width: 110px;
background-color: var(--Link-color);
  height: 100%;
  display: inline-block;
    transition: .2s;
    border: 1px solid var(--Link-color);
  a{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
    height: 100%;
  color:#fff;

i{
  transition: .2s;
  display: inline-block;
width: 100%;
height: 20px;
text-align: center;
margin-right: 5px;
background-image: url(../images/common/cart.png);
background-size: contain;
background-repeat: no-repeat;
background-position:center ;
margin-bottom: 5px;
}


.hd-menu__list_ec_txt{
    font-size: 10px;
    line-height: 1.3em;
    text-align: center;
}

}



&:hover{
  background-color: #fff;
    border: 1px solid var(--Black);
  a{
  color: var(--Black);
  }
i{
background-image: url(../images/common/cart_hover.png);
}
}



}

.hd-menu__list_ec_sp{
display: none;}
}


@media screen and (min-width: 1025px) {
.hd__inner{padding-right: 0;}
}



@media screen and (min-width: 1081px) {
i{
height: 25px !important;
margin-bottom: 10px !important;
}

.hd-menu__list_ec_txt{
    font-size: 13px !important;
    line-height: 1.3em;
}
}