@charset "utf-8";



/****************************** header ******************************/

.header {

  position: fixed;

  top: 0;

  right: 0;

  left: 0;

  z-index: 1000;

  background: white;

  -webkit-transition: 0.2s ease-in-out;

  -moz-transition: 0.2s ease-in-out;

  -ms-transition: 0.2s ease-in-out;

  -o-transition: 0.2s ease-in-out;

  transition: 0.2s ease-in-out; }

  .header__inner {

    position: relative;

    height: 13.33333vw;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    padding: 2.13333vw 26.66667vw 2.13333vw 2vw; }

    @media screen and (min-width: 768px),print{

      .header__inner{

        width: 100%;

        margin: 0 auto;

        height: 90px;

        padding: 15px 100px 0 0;

      }

    }

    @media screen and (min-width: 960px), print {

      .header__inner {

        width: 960px;

        margin: 0 auto;

        height: 90px;

        padding: 15px 100px 0 0; } }



  .header__logo a {

    display: block;

    width: 38.4vw;

    height: 5.73333vw;

    text-indent: -9999em;

    overflow: hidden;

    background: url(/common/images/site_logo.png) center center no-repeat;

    background-size: cover;

    -webkit-transition: 0.2s ease-in-out;

    -moz-transition: 0.2s ease-in-out;

    -ms-transition: 0.2s ease-in-out;

    -o-transition: 0.2s ease-in-out;

    transition: 0.2s ease-in-out; }

    @media screen and (min-width: 768px), print {

      .header__logo a {

        width: 288px;

        height: 43px;

        margin: 0 0 16px 0; }

        .header__logo a:hover {

          opacity: 0.5;

          -webkit-opacity: 0.5;

          -moz-opacity: 0.5;

          filter: alpha(opacity=50);

          -ms-filter: "alpha(opacity=50)"; } }

  @media screen and (min-width: 768px), print {

    .header__langswich {

      position: absolute;

      right: 100px;

      top: 15px; } }

  .header__langswich ul {

    display: flex;

    width: auto;

    height: 2.93333vw; }

    @media screen and (min-width: 768px), print {

      .header__langswich ul {

        height: 11px; } }

    .header__langswich ul li {

      position: relative; }

      .header__langswich ul li a {

        display: block;

        text-indent: -9999em;

        overflow: hidden; }

      .header__langswich ul li.head_sns a {

        display: block;

        text-indent: 0;

        padding: 0 7px;

        overflow: hidden; }

        @media screen and (min-width: 768px), print {

          .header__langswich ul li a {

            -webkit-transition: 0.2s ease-in-out;

            -moz-transition: 0.2s ease-in-out;

            -ms-transition: 0.2s ease-in-out;

            -o-transition: 0.2s ease-in-out;

            transition: 0.2s ease-in-out; }

            .header__langswich ul li a:hover {

              opacity: 0.5;

              -webkit-opacity: 0.5;

              -moz-opacity: 0.5;

              filter: alpha(opacity=50);

              -ms-filter: "alpha(opacity=50)"; } }

      .header__langswich ul li.jp {

        margin: 0vw 2.93333vw 0vw 0vw; }

        @media screen and (min-width: 768px), print {

          .header__langswich ul li.jp {

            margin: 0 22px 0 0; } }

        .header__langswich ul li.jp a {

          width: 13.6vw;

          height: 2.93333vw;

          background: url(/common/images/head_lang_jp.png) center center no-repeat;

          background-size: 100% auto; }

          @media screen and (min-width: 768px), print {

            .header__langswich ul li.jp a {

              width: 51px;

              height: 11px; } }

        .header__langswich ul li.jp:after {

          content: '';

          width: 1.06667vw;

          height: 2.93333vw;

          background: url(/common/images/head_lang_slash.png) center center no-repeat;

          background-size: 100% auto;

          position: absolute;

          right: -2.13333vw;

          top: 0;

          bottom: 0;

          margin: 0; }

          @media screen and (min-width: 768px), print {

            .header__langswich ul li.jp:after {

              width: 4px;

              height: 11px;

              right: -12px; } }

      .header__langswich ul li.en a {

        width: 11.46667vw;

        height: 2.93333vw;

        background: url(/common/images/head_lang_en.png) center center no-repeat;

        background-size: 100% auto; }

        @media screen and (min-width: 768px), print {

          .header__langswich ul li.en a {

            width: 43px;

            height: 11px; } }

  .header .today__box {

    position: absolute;

    right: 13.33333vw;

    top: 0;

    bottom: 0;

    height: 13.33333vw;

    padding: 2.13333vw 0vw 2.13333vw 0vw;

    font-family: 'Roboto', sans-serif;

    font-weight: 700;

    text-align: center;

    vertical-align: bottom; }

    @media screen and (min-width: 768px), print {

      .header .today__box {

        height: 90px;

        right: 0;

        padding: 14px 0; } }

    .header .today__box .today_m_y {

      font-size: 2.13333vw;

      margin: 0vw 0vw -0.66667vw 0vw;

      line-height: 1;

      letter-spacing: -0.05em; }

      @media screen and (min-width: 768px), print {

        .header .today__box .today_m_y {

          margin: 0;

          font-size: 1.4rem; } }

    .header .today__box .day {

      font-size: 8.53333vw;

      line-height: 1; }

      @media screen and (min-width: 768px), print {

        .header .today__box .day {

          font-size: 5.0rem; } }

  .header__nav {

    opacity: 0;

    display: none;

    background: rgba(255, 255, 255, 0.9);

    position: fixed;

    right: 0;

    top: 13.33333vw;

    bottom: 0;

    overflow-y: auto;

    padding: 5.33333vw 5.33333vw 5.33333vw 5.33333vw;

    -webkit-transition: 0.2s ease-in-out;

    -moz-transition: 0.2s ease-in-out;

    -ms-transition: 0.2s ease-in-out;

    -o-transition: 0.2s ease-in-out;

    transition: 0.2s ease-in-out;

    width: 90%;

    -webkit-overflow-scrolling: touch; }

    @media screen and (min-width: 768px), print {

      .header__nav {

        overflow: visible;

        width: auto;

        padding: 0;

        position: relative;

        display: block;

        opacity: 1;

        right: auto;

        bottom: auto;

        top: auto; } }

    .header__nav ul li {

      margin: 0vw 0vw 2.66667vw 0vw; }

      @media screen and (min-width: 768px), print {

        .header__nav ul li {

          margin: 0; } }

      .header__nav ul li a {

        font-size: 3.73333vw;

        letter-spacing: 0.02em;

        -webkit-transition: 0.2s ease-in-out;

        -moz-transition: 0.2s ease-in-out;

        -ms-transition: 0.2s ease-in-out;

        -o-transition: 0.2s ease-in-out;

        transition: 0.2s ease-in-out;

      	font:13px/1.231 'ryo-gothic-plusn',sans-serif;

  font-family:'ryo-gothic-plusn',sans-serif;

  text-decoration: none;

font-weight: bold;}

      }

        @media screen and (min-width: 768px), print {

          .header__nav ul li a {

            font-size: 1.4rem; }

            .header__nav ul li a:hover {

              text-decoration: none; } }

        .header__nav ul li a:before {

          font-family: 'FontAwesome';

          content: "\f061";

          margin-right: 0.5em; }

          @media screen and (min-width: 768px), print {

            .header__nav ul li a:before {

              content: none; } }

        .header__nav ul li a.disabled {

          color: #b3b3b3; }

    .header__nav ul .sub_menu {

      margin: 2.66667vw 0vw 0vw 5.33333vw; }

    .header__nav ul .sub_menu2 {

      margin: 2.66667vw 0vw 0vw 5.33333vw; }

      @media screen and (min-width: 768px), print {

        .header__nav ul .sub_menu {

          margin: 0;

          display: none;

          position: fixed;

          right: 0;

          left: 0;

          top: 90px;

          background: url(/common/images/sub_menu_bg.png) center bottom no-repeat;

          background-size: 100% 100px;

          padding-bottom: 53px; } 

        .header__nav ul .sub_menu2 {

            margin: 0;

            display: none;

            position: fixed;

            right: 0;

            left: 0;

            top: 90px;

            background: url(/common/images/sub_menu_bg2.png) center bottom no-repeat;

            background-size: 100%;

            padding-bottom: 40px; } }

      @media screen and (min-width: 2000px), print {      

        .header__nav ul .sub_menu2 {padding-bottom: 70px; }

      }

      @media screen and (min-width: 2500px), print {      

        .header__nav ul .sub_menu2 {padding-bottom: 90px; }

      }

      @media screen and (min-width: 768px), print {

        .header__nav ul .sub_menu ul {

          width: 100%;

          margin: 0 auto; } }

      @media screen and (min-width: 960px), print {

            .header__nav ul .sub_menu ul {

              width: 960px;

              margin: 0 auto; } }

      @media screen and (min-width: 768px), print {

        .header__nav ul .sub_menu ul li {

          display: inline-block; } }

      .header__nav ul .sub_menu ul li a {

        letter-spacing: 0.02em; }

        @media screen and (min-width: 768px), print {

          .header__nav ul .sub_menu ul li a {

            display: inline-block;

            line-height: 30px;

            text-align: center; }

            .header__nav ul .sub_menu ul li a.current, .header__nav ul .sub_menu ul li a:hover {

              color: white;

              background: #895c29; } }

        .header__nav ul .sub_menu ul li a:before {

          content: "\f105"; }

          @media screen and (min-width: 768px), print {

            .header__nav ul .sub_menu ul li a:before {

              content: none; } }

      @media screen and (min-width: 768px), print {

        .header__nav ul .sub_menu2 ul {

          width: 960px;

          margin: 0 auto; } }

      @media screen and (min-width: 768px), print {

        .header__nav ul .sub_menu2 ul li {

          display: inline-block; } }

      .header__nav ul .sub_menu2 ul li a {

        letter-spacing: 0.02em; }

        @media screen and (min-width: 768px), print {

          .header__nav ul .sub_menu2 ul li a {

            display: inline-block;

            line-height: 30px;

            text-align: center; }

            .header__nav ul .sub_menu2 ul li a.current, .header__nav ul .sub_menu2 ul li a:hover {

              color: white;

              background: #895c29; } }

        .header__nav ul .sub_menu2 ul li a:before {

          content: "\f105"; }

          @media screen and (min-width: 768px), print {

            .header__nav ul .sub_menu2 ul li a:before {

              content: none; }

            .sub_titele_op{

              display: block;

              font-size:0.8em;

              line-height: 1em;

              padding: 0px 0 8px;

              position: relative;

              top:4px;

            } }

      @media screen and (min-width: 768px), print {

        .header__nav ul .sub_menu ul.wineries_subs {

          text-align: right;

          position: relative;

          right: 305px;

          }

          .header__nav ul .sub_menu ul.wineries_subs li a {

            width: 190px;

 } }



      @media screen and (min-width: 768px), print {

        .header__nav ul .sub_menu2 ul.about_subs {

          text-align: left; }

          .header__nav ul .sub_menu2 ul.about_subs li a {

            width: 190px;

            } }

      @media screen and (min-width: 768px), print {

        .header__nav ul .sub_menu ul.enjoy_subs {

          text-align: right;

          }

          .header__nav ul .sub_menu ul.enjoy_subs li a {

            width: 190px; } }

      @media screen and (min-width: 768px), print {

        .header__nav ul .sub_menu ul.buy_subs {

          text-align: right; }

          .header__nav ul .sub_menu ul.buy_subs li a {

            width: 190px; } }

    @media screen and (min-width: 768px), print {

      .header__nav > ul {

        display: flex;

        margin-right: -13px; } }

    .header__nav > ul > li {

      padding: 0 20px; }

      .header__nav > ul > li:nth-child(1) {

        display: none; }

      .header__nav > ul > li.hover a:after {

        width: 100%; }

      .header__nav > ul > li.hover .sub_menu {

        z-index: 10; }

      .header__nav > ul > li > a {

        letter-spacing: 0.05em; }

        @media screen and (min-width: 768px), print {

          .header__nav > ul > li > a {

            display: inline-block;

            position: relative;

            padding-bottom: 14px;

            line-height: 26px;

            font-size: 1.6rem; }

            .header__nav > ul > li > a:after {

              position: absolute;

              display: block;

              right: 0;

              left: 0;

              margin: auto;

              bottom: 10px;

              height: 1px;

              background: black;

              content: '';

              width: 0;

              -webkit-transition: 0.2s ease-in-out;

              -moz-transition: 0.2s ease-in-out;

              -ms-transition: 0.2s ease-in-out;

              -o-transition: 0.2s ease-in-out;

              transition: 0.2s ease-in-out; }

            .header__nav > ul > li > a.current:after, .header__nav > ul > li > a:hover:after {

              width: 100%; } }

  .header #nav-toggle {

    position: absolute;

    right: 0;

    top: 0;

    bottom: 0;

    width: 13.33333vw;

    height: 13.33333vw; }

    @media screen and (min-width: 768px), print {

      .header #nav-toggle {

        display: none; } }

    .header #nav-toggle i, .header #nav-toggle i:before, .header #nav-toggle i:after {

      -webkit-transition: 0.2s ease-in-out;

      -moz-transition: 0.2s ease-in-out;

      -ms-transition: 0.2s ease-in-out;

      -o-transition: 0.2s ease-in-out;

      transition: 0.2s ease-in-out;

      display: block;

      width: 6.66667vw;

      height: 0.53333vw;

      background: black;

      position: absolute;

      right: 0;

      left: 0;

      margin: auto; }

    .header #nav-toggle i {

      top: 0;

      bottom: 0; }

      .header #nav-toggle i:before, .header #nav-toggle i:after {

        content: ''; }

      .header #nav-toggle i:before {

        top: -2.13333vw; }

      .header #nav-toggle i:after {

        bottom: -2.13333vw; }

/****************************** menu open ******************************/

body.open .header #nav-toggle i {

  background-color: transparent; }

  body.open .header #nav-toggle i:before {

    top: 50%;

    bottom: 50%;

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg); }

  body.open .header #nav-toggle i:after {

    top: 50%;

    bottom: 50%;

    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg); }



body.open .header__nav {

  opacity: 1;

  display: block; }



body.open .overlay {

  visibility: visible;

  cursor: pointer;

  background: rgba(0, 0, 0, 0.7); }

  body.open .overlay:after {

    visibility: visible;

    color: rgba(255, 255, 255, 0.8); }



/****************************** footer ******************************/

.footer {

  border-top: 1px solid #c7994a;

  font-family: "Open Sans",Arial,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif; }

  .footer__inner {

    padding: 2.13333vw 2.13333vw 5.33333vw 2.13333vw;

    position: relative; }

    @media screen and (min-width: 768px), print {

      .footer__inner {

        width: 960px;

        margin: 0 auto;

        padding: 10px; } }



    .footer__inner ul {

      margin: 0; }

      @media screen and (min-width: 768px), print {

        .footer__inner ul {

          display: flex;

          justify-content: flex-start;

          margin: 0 0 16px; } }

      @media screen and (min-width: 768px), print {

        .footer__inner ul li {

          margin: 0 25px 0 0; } }

      .footer__inner ul li a {

        font-size: 2.66667vw; }

        @media screen and (min-width: 768px), print {

          .footer__inner ul li a {

            font-size: 1.2rem; } }

        .footer__inner ul li a[target="_blank"]:after {

          display: inline-block;

          content: '';

          background: url(/common/images/ico_link.gif) no-repeat;

          background-size: auto 100%;

          height: 1em;

          width: 1.3em;

          margin-left: 0.5em; }

    .footer__inner p {

      line-height: 1; }

      .footer__inner p small {

        font-size: 2.66667vw; }

        @media screen and (min-width: 768px), print {

          .footer__inner p small {

            font-size: 1rem; } }

  .footer__logo {

    width: 35vw;

    position: absolute;

    left: 2.13333vw;

    top: 2.13333vw; }

    @media screen and (min-width: 768px), print {

      .footer__logo {

        width: 128px;

        height: 35px;

        left: auto;

        right: 0;

        top: 60px;

        bottom: 0;

        margin: auto; } }



/****************************** content ******************************/

.inner {

  position: relative;

  padding: 4vw 3.33333vw 4vw 3.33333vw; }

  @media screen and (min-width: 768px), print {

    .inner {

      width: 960px;

      margin: 0 auto;

      padding: 40px 0; } }



.cont-visual {

  background-position: center top;

  background-repeat: no-repeat;

  background-size: cover; }

  @media screen and (min-width: 768px), print {

    .cont-visual {

      background-size: auto 100%;

      min-width: 960px; } }

  .cont-visual .catch {

    position: absolute;

    text-align: left;

    font-size: 6vw;

    letter-spacing: 0.1em;

    color: white;

    line-height: 1;

    height: 1em;

    top: 0;

    bottom: 0;

    left: 5.33333vw;

    margin: auto;

    text-shadow: 0px 0px calc(10vw/7.5) rgba(0, 0, 0, 0.7); }

    @media screen and (min-width: 768px), print {

      .cont-visual .catch {

        left: 0;

        font-size: 4.8rem; } }

    @media screen and (min-width: 768px), print {

      .cont-visual .catch {

        text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); } }

  .cont-visual .inner {

    height: 42.66667vw; }

    @media screen and (min-width: 768px), print {

      .cont-visual .inner {

        height: 420px; } }



.content h2 {

  font-size: 4.53333vw;

  line-height: 1.47059;

  padding: 0vw 0vw 1.06667vw 0vw;

  margin: 0vw 0vw 3.33333vw 0vw;

  border-bottom: 1px solid black; }

  @media screen and (min-width: 768px), print {

    .content h2 {

      font-size: 3.4rem;

      margin: 0 0 22px 0;

      padding: 0 0 5px 0; } }

  .content h2 .position {

    color: #895c29;

    display: block;

    font-size: 3.46667vw;

    line-height: 1;

    margin: 0vw 0vw 0.66667vw 0vw; }

    @media screen and (min-width: 768px), print {

      .content h2 .position {

        display: inline-block;

        margin: 0 1em 0 0;

        font-size: 2.4rem; } }



.content h3 {

  font-size: 4.53333vw;

  line-height: 1.47059;

  margin: 2.66667vw 0vw 2.66667vw 0vw;

  color: #895c29; }

  @media screen and (min-width: 768px), print {

    .content h3 {

      font-size: 3.2rem;

      margin: 22px 0; } }



.content p {

  font-size: 3.2vw;

  line-height: 1.25;

  margin-bottom: 1em; }

  @media screen and (min-width: 768px), print {

    .content p {

      font-size: 1.8rem;

      line-height: 1.55556; } }



.content dt, .content dd {

  font-weight: 400;

  font-size: 3.2vw;

  line-height: 1.25; }

  @media screen and (min-width: 768px), print {

    .content dt, .content dd {

      font-size: 1.8rem;

      line-height: 1.55556; } }



.content dt {

  float: left;

  width: 17.33333vw; }

  @media screen and (min-width: 768px), print {

    .content dt {

      width: 75px; } }



.content dd {

  padding: 0vw 0vw 0vw 17.33333vw; }

  @media screen and (min-width: 768px), print {

    .content dd {

      padding: 0 0 0 75px; } }



.content a {

  color: #d07c62;

  text-decoration: underline; }

  @media screen and (min-width: 768px), print {

    .content a:hover {

      text-decoration: none; } }



.anchor {

  position: absolute;

  left: 0;

  top: -13.33333vw; }

  @media screen and (min-width: 768px), print {

    .anchor {

      top: -90px; } }



.sp_sns_icon{

  display: flex;

  margin: 10px auto;

}

.sp_sns_icon a{

  margin: 0 0 0 8%;

}

@media screen and (min-width: 768px), print {

  .sp_sns_icon{

    display: none;

  }

 

}