.slick-dots {
  position: static;
  justify-content: flex-end;
  margin-top: 5px; }
  .slick-dots li {
    width: 20px;
    height: 4px;
    background: none;
    margin: 0 0 0 5px;
    border-radius: 0;
    border: 1px solid #271a14;
    box-sizing: border-box; }
  @media screen and (min-width: 768px) {
    .slick-dots {
      margin-top: 10px; }
      .slick-dots li {
        width: 40px;
        height: 8px;
        margin-left: 10px; } }

main {
  overflow: hidden; }

body {
  text-align: justify; }
  @media screen and (min-width: 768px) {
    body {
      letter-spacing: 3.2px; } }

header {
  z-index: 1; }

.ttl {
  font-size: 5vw;
  line-height: 1.8;
  color: #403730;
  letter-spacing: 0.3em; }
  .ttl span {
    font-size: 80%; }
  @media screen and (min-width: 768px) {
    .ttl {
      font-size: 33px;
      line-height: 63px;
      letter-spacing: 8px; }
      .ttl span {
        font-size: 26px; } }

.txt-en {
  font-family: "Cormorant Garamond";
  color: #66605a;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.25em;
  line-height: 1.7; }
  @media screen and (min-width: 768px) {
    .txt-en {
      letter-spacing: 4px; } }

#sec1 {
  z-index: 0;
  padding-top: 10vw;
  margin-bottom: 15vw; }
  #sec1 .sec1-deco {
    position: absolute;
    z-index: -1;
    top: -16vw;
    right: -20%;
    width: 70%; }
  #sec1 .sec1-img {
    overflow: hidden;
    width: 100%;
    height: 100vw; }
    #sec1 .sec1-img img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  #sec1 h2 {
    margin: 10vw auto 5vw; }
    #sec1 h2 p:nth-child(2) {
      margin-top: 10vw; }
  #sec1 .sec1-txt p + p {
    margin-top: 20px; }
  @media screen and (min-width: 768px) {
    #sec1 {
      padding-top: 83px;
      margin-bottom: 129px;
      max-width: 1200px;
      width: 100%;
      justify-content: flex-start; }
      #sec1 .sec1-deco {
        top: 0;
        right: -113px;
        width: 743px; }
      #sec1 .sec1-img {
        width: 50%;
        height: 1082px; }
      #sec1 .sec1-info {
        width: 430px;
        margin-left: 74px;
        margin-right: 30px; }
      #sec1 h2 {
        margin: 60px auto 0;
        height: 548px; }
        #sec1 h2 p:nth-child(2) {
          margin-top: 80px; }
      #sec1 .sec1-txt p + p {
        margin-top: 23px; } }

#sec2 {
  margin-bottom: 15vw; }
  #sec2 h2 {
    margin: 5vw 0;
    text-align: right; }
    #sec2 h2 .ttl {
      letter-spacing: 0.2em; }
  @media screen and (min-width: 768px) {
    #sec2 {
      margin-bottom: 107px;
      max-width: 1200px;
      width: 100%;
      align-items: center; }
      #sec2 .sec2-img {
        width: 811px;
        margin-right: -100px;
        order: 2; }
      #sec2 .sec2-info {
        width: 395px;
        padding-bottom: 30px; }
      #sec2 h2 {
        margin: 0 -11px 30px 0; }
        #sec2 h2 .ttl {
          letter-spacing: 9px; }
        #sec2 h2 .txt-en {
          margin-right: 8px; } }
  @media screen and (min-width: 768px) and (max-width: 1420px) {
    #sec2 {
      max-width: inherit; }
      #sec2 .sec2-img {
        margin-right: 0;
        width: 57.1%; }
      #sec2 .sec2-info {
        margin-left: 7.5%; }
      #sec2 .slick-dots {
        margin-right: 10px; } }
  @media screen and (min-width: 768px) and (max-width: 1240px) {
    #sec2 {
      justify-content: flex-end; }
      #sec2 .sec2-info {
        margin-left: 20px;
        margin-right: 30px; } }

#sec3 h2 {
  margin: 10vw 0 7vw 5%;
  text-align: left;
  letter-spacing: 0.1em; }
  #sec3 h2 span {
    letter-spacing: 0.05em; }
#sec3 .wrap {
  z-index: 0; }
#sec3 .sec3-deco {
  position: absolute;
  width: 178%;
  right: -63%;
  bottom: -102vw;
  z-index: -1; }
#sec3 .sec3-txt {
  margin-top: 7vw; }
@media screen and (min-width: 768px) {
  #sec3 .sec3-head {
    background: url("../img/wine/sec3_bg.jpg") no-repeat center/cover;
    height: 520px;
    padding: 0 20px;
    margin-bottom: 100px; }
    #sec3 .sec3-head h2 {
      max-width: 1200px;
      margin: 0 auto;
      padding-top: 140px;
      color: #fff;
      line-height: 60px;
      letter-spacing: 11px; }
      #sec3 .sec3-head h2 span {
        letter-spacing: 9px; }
  #sec3 .wrap {
    align-items: center; }
  #sec3 .sec3-img {
    width: 600px;
    order: 2; }
  #sec3 .sec3-txt {
    width: 330px;
    margin-top: 0;
    margin-right: 30px; }
  #sec3 .sec3-deco {
    width: 1219px;
    right: -250px;
    bottom: -865px; } }

#sec4 {
  margin-top: 20vw;
  position: relative;
  z-index: 1; }
  #sec4 h2 {
    margin: 0 auto 10vw;
    font-size: 5vw;
    letter-spacing: 0.3em; }
    #sec4 h2 p:nth-child(2) {
      margin-top: 12vw; }
    #sec4 h2 p:nth-child(3) {
      margin-top: 49vw; }
    #sec4 h2 span {
      font-size: 85%; }
  #sec4 .sec4-txt p + p {
    margin-top: 20px; }
  #sec4 .sec4-1 {
    margin-bottom: 15vw; }
    #sec4 .sec4-1 h3 {
      font-size: 3.5vw;
      line-height: 2.4;
      margin: 5vw 0 4vw;
      color: #403730; }
      #sec4 .sec4-1 h3 span {
        display: block;
        font-size: 145%;
        line-height: 1.7; }
  #sec4 .sec4-2 {
    border: 1px solid #aea49c;
    padding: 10vw 5%; }
    #sec4 .sec4-2 h3 {
      font-size: 4.5vw;
      text-align: center;
      margin-bottom: 3vw; }
  #sec4 .sec4-txt2 {
    border-bottom: 1px solid #aea49c;
    padding-bottom: 8vw; }
  #sec4 .toggle {
    border-bottom: 1px solid #aea49c;
    padding: 5vw 0; }
    #sec4 .toggle .toggle-link {
      position: relative;
      font-size: 110%;
      cursor: pointer;
      transition: 0.3s; }
      #sec4 .toggle .toggle-link:after {
        content: "";
        position: absolute;
        top: calc(50% - 8px);
        right: 0;
        background: url("../img/wine/toggle_off.png") no-repeat center/100% auto;
        width: 17px;
        height: 17px; }
      #sec4 .toggle .toggle-link:hover {
        opacity: 0.7; }
    #sec4 .toggle.active .toggle-link:after {
      background: url("../img/wine/toggle_on.png") no-repeat center/100% auto; }
  #sec4 dl {
    margin-bottom: 15px; }
  @media screen and (min-width: 768px) {
    #sec4 {
      margin-top: 155px;
      max-width: 1200px;
      width: 100%;
      padding: 0 30px; }
      #sec4 h2 {
        margin: 0 auto;
        height: 493px;
        font-size: 28px;
        letter-spacing: 9px; }
        #sec4 h2 p:nth-child(2) {
          margin-top: 49px; }
        #sec4 h2 p:nth-child(3) {
          margin-top: 266px; }
        #sec4 h2 span {
          font-size: 24px; }
      #sec4 .sec4-img {
        order: 2;
        width: 50%; }
      #sec4 .sec4-txt p + p {
        margin-top: 30px; }
      #sec4 .sec4-1 {
        margin-bottom: 178px; }
        #sec4 .sec4-1 h3 {
          font-size: 18px;
          line-height: 43px;
          margin: 27px 0 23px;
          letter-spacing: 6px; }
          #sec4 .sec4-1 h3 span {
            font-size: 26px;
            line-height: 43px;
            margin-top: 9px; }
      #sec4 .sec4-info {
        width: 42.5%; }
      #sec4 .sec4-2 {
        max-width: 1000px;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 89px 78px 65px; }
        #sec4 .sec4-2 h3 {
          font-size: 26px;
          margin-bottom: 45px;
          letter-spacing: 9px; }
      #sec4 .sec4-txt2 {
        padding-bottom: 33px; }
      #sec4 .toggle {
        padding: 21px 0; }
        #sec4 .toggle .toggle-link {
          font-size: 18px; }
          #sec4 .toggle .toggle-link:after {
            top: calc(50% - 11px);
            width: 22px;
            height: 22px;
            right: 22px; }
      #sec4 .toggle-main {
        margin-top: 6px; }
      #sec4 dl {
        margin-bottom: 0; }
        #sec4 dl dt {
          width: 220px; }
        #sec4 dl dd {
          width: calc(100% - 220px); } }

#sec5 {
  position: relative;
  z-index: 0;
  padding-top: 20vw; }
  #sec5 .sec5-deco {
    position: absolute;
    z-index: -1;
    width: 100%;
    left: 0;
    top: -36vw; }
  #sec5 .sec5-head {
    margin: 0 -6% 10vw; }
  #sec5 h2 {
    margin-top: 16vw; }
  #sec5 [class^="sec5-img"] {
    width: 39%; }
  #sec5 .sec5-img2 {
    margin-top: 25vw; }
  #sec5 .sec5-txt p + p {
    margin-top: 5vw; }
  #sec5 .btn-link {
    margin: 10vw auto 20vw; }
  @media screen and (min-width: 768px) {
    #sec5 {
      padding-top: 205px; }
      #sec5 .wrap {
        max-width: 1200px;
        width: 100%; }
      #sec5 .sec5-deco {
        width: 1710px;
        left: calc(50% - 855px);
        top: -312px; }
      #sec5 .sec5-head {
        margin: 0 0 55px; }
      #sec5 h2 {
        margin-top: 240px;
        font-size: 33px;
        letter-spacing: 10px; }
        #sec5 h2 span {
          font-size: 30px; }
      #sec5 [class^="sec5-img"] {
        width: 430px; }
      #sec5 .sec5-img2 {
        margin-top: 95px; }
      #sec5 .sec5-txt {
        margin: 0 auto;
        width: 604px; }
        #sec5 .sec5-txt p + p {
          margin-top: 35px; }
      #sec5 .btn-link {
        margin: 58px auto 145px;
        width: 366px; }
        #sec5 .btn-link a {
          padding: 16px 0; } }

#footer .f-nav {
  background: url("../img/wine/bg3.jpg"); }