@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap");
/* 30px 見出し文字サイズ */
/* 12px 注意事項など */
header {
  top: -100px;
  transition: all .5s; }
  header.flt {
    top: 0; }

#sec1 {
  width: 100%;
  min-width: 1280px;
  background: url(../images/toppage/mainv_p_01.jpg) no-repeat center top;
  background-size: cover;
  background-attachment: fixed;
  position: relative; }
  #sec1 .gnavi {
    width: 1085px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2; }
    #sec1 .gnavi .navi {
      display: flex;
      justify-content: center; }
      #sec1 .gnavi .navi li {
        font-size: 1.0625rem; }
        #sec1 .gnavi .navi li:first-child a {
          border-left: solid 1px #fff; }
        #sec1 .gnavi .navi li a {
          color: #fff;
          text-decoration: none;
          border-right: solid 1px #fff;
          padding: 0 20px; }
    #sec1 .gnavi .navi2 {
      margin: 0 0 0 40px;
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      justify-content: flex-end; }
      #sec1 .gnavi .navi2 li {
        width: 30px;
        margin: 0 0 0 25px; }
  #sec1 #mainv .subContents {
    height: 100vh;
    position: relative; }
    #sec1 #mainv .subContents h1 {
      width: 250px;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%); }
  #sec1 #concept {
    padding: 110px 0 300px;
    position: relative; }
    #sec1 #concept::after {
      content: "";
      width: 1085px;
      height: calc(1085px / 300 * 23);
      background: url(../images/toppage/concept_t_02.svg) no-repeat left top;
      position: absolute;
      bottom: 50px;
      left: 50%;
      transform: translateX(-50%); }
    #sec1 #concept .catch {
      width: 360px;
      margin-bottom: 60px; }
    #sec1 #concept .honbun {
      font-size: .9375rem;
      line-height: 2.4; }

#reason {
  min-width: 1280px;
  background: url(../images/toppage/reason_p_01.jpg) #f2eae9 no-repeat center top/100% auto;
  padding: 100px 0 40px 0;
  position: relative;
  z-index: 2; }
  #reason .subContents h2, #reason .subContents .lead {
    padding-left: 620px; }
  #reason .subContents h2 .en i {
    font-style: italic; }
  #reason .subContents .lead {
    color: #5a5a5a;
    font-size: .9375rem;
    margin: 0 0 50px; }
  #reason .subContents .reasonBox {
    width: 740px;
    background: #d89da8;
    margin: 0 auto 40px;
    padding: 30px 100px;
    position: relative; }
    #reason .subContents .reasonBox::before, #reason .subContents .reasonBox::after {
      content: "";
      width: 2px;
      height: 100%;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 20%, white 80%, rgba(255, 255, 255, 0) 100%);
      position: absolute;
      top: 0; }
    #reason .subContents .reasonBox::before {
      left: 30px; }
    #reason .subContents .reasonBox::after {
      right: 30px; }
    #reason .subContents .reasonBox ol {
      counter-reset: item; }
      #reason .subContents .reasonBox ol li {
        color: #fff;
        font-size: 1.0625rem;
        text-align: center;
        margin: 0 0 80px;
        position: relative;
        z-index: 1; }
        #reason .subContents .reasonBox ol li:last-child {
          margin-bottom: 0; }
        #reason .subContents .reasonBox ol li::before {
          counter-increment: item;
          content: counter(item);
          color: #000;
          font-family: 'GFS Didot', serif;
          font-weight: 400;
          font-size: 6.25rem;
          font-style: italic;
          line-height: 1;
          position: absolute;
          top: -50px;
          left: 50%;
          transform: translateX(-50%);
          z-index: -1; }
  #reason .subContents .honbun {
    color: #5a5a5a;
    font-size: .9375rem;
    text-align: center; }

#menu {
  min-width: 1280px;
  background: #fff;
  padding: 80px 0 0 0;
  position: relative;
  z-index: 2; }
  #menu .menus {
    display: flex;
    justify-content: space-between; }
    #menu .menus li {
      width: calc(100% / 3);
      height: 200px;
      position: relative; }
      #menu .menus li .bg img {
        width: 100%;
        height: 200px;
        object-fit: cover; }
      #menu .menus li p {
        position: absolute;
        top: 70px;
        left: 30px; }
        #menu .menus li p img {
          width: auto;
          height: 108px; }

#shopping {
  min-width: 1280px;
  background: #f2eae9;
  padding: 80px 0;
  position: relative;
  z-index: 2;
  /* Arrows */ }
  #shopping .slides .slide {
    width: 346px;
    text-align: center; }
    #shopping .slides .slide figure {
      margin-bottom: 10px; }
    #shopping .slides .slide h3 {
      line-height: 1.5;
      margin: 0 0 5px; }
  #shopping .more {
    margin-top: 100px; }
  #shopping .slick-prev,
  #shopping .slick-next {
    position: absolute;
    top: 185px;
    display: block;
    width: 36px;
    height: 36px;
    padding: 0; }
  #shopping .slick-prev {
    left: -45px; }
  #shopping .slick-next {
    right: -45px; }
  #shopping .slick-prev:before,
  #shopping .slick-next:before {
    content: "";
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    display: block; }
  #shopping .slick-prev:before {
    background-image: url(../images/common/s_prev.svg); }
  #shopping .slick-next:before {
    background-image: url(../images/common/s_next.svg); }
  #shopping .slick-dots {
    bottom: -50px; }

.bottomBtns {
  border-top: none; }

/* FOR smartphone landscape
***************************************************************************/
@media screen and (max-width: 751px) {
  header {
    top: 0;
    transition: none; }

  #sec1 {
    width: 100vw;
    min-width: initial;
    background: none;
    position: relative; }
    #sec1::before {
      content: '';
      width: 100%;
      height: 100vh;
      background: url(../images/toppage/mainv_p_01.jpg) no-repeat center top;
      background-size: cover;
      display: block;
      position: fixed;
      top: 0;
      left: 0; }
    #sec1 .gnavi {
      display: none; }
    #sec1 #mainv .subContents h1 {
      width: 40vw;
      left: 5vw; }
    #sec1 #concept {
      padding: 30vw 0 40vw;
      position: relative; }
      #sec1 #concept::after {
        width: 100vw;
        height: calc(100vw / 300 * 23);
        background-size: 100% auto;
        bottom: 5vw; }
      #sec1 #concept .catch {
        width: 80vw;
        margin-bottom: 10vw; }
      #sec1 #concept .honbun {
        font-size: .9375rem;
        line-height: 2.4; }

  #reason {
    width: 100vw;
    min-width: initial;
    background-position: -60vw top;
    background-size: 280vw auto;
    padding: 20vw 0 10vw 0; }
    #reason .subContents h2, #reason .subContents .lead {
      padding-left: 10vw; }
    #reason .subContents .lead {
      margin: 0 0 10vw; }
    #reason .subContents .reasonBox {
      width: 100%;
      margin: 0 auto 10vw;
      padding: 6vw 10vw; }
      #reason .subContents .reasonBox::before {
        left: 4vw; }
      #reason .subContents .reasonBox::after {
        right: 4vw; }
      #reason .subContents .reasonBox ol {
        counter-reset: item; }
        #reason .subContents .reasonBox ol li {
          font-size: 1rem;
          margin: 0 0 15vw; }

  #menu {
    min-width: initial;
    padding: 10vw 0 0 0; }
    #menu .menus {
      display: block; }
      #menu .menus li {
        width: 100vw;
        height: calc(100vw / 375 * 200);
        position: relative; }
        #menu .menus li .bg img {
          width: 100vw;
          height: calc(100vw / 375 * 200); }
        #menu .menus li p {
          top: 20vw;
          left: 5vw; }
          #menu .menus li p img {
            height: 26vw; }

  #shopping {
    min-width: initial;
    padding: 10vw 0;
    /* Arrows */ }
    #shopping .slides {
      margin: 0 10vw; }
      #shopping .slides .slide {
        width: 70vw; }
    #shopping .more {
      margin-top: 10vw; }
    #shopping .slick-prev,
    #shopping .slick-next {
      top: 38vw; }

  .bottomBtns {
    border-top: none; } }

/*# sourceMappingURL=toppage.css.map */