@charset 'UTF-8';
/* ====================================== */
/* global */
@import url('https://fonts.googleapis.com/css?family=Lateef');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
@import url('https://fonts.googleapis.com/css?family=Lateef');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
@font-face {
  font-family : 'Noto Serif Japanese';
  font-style : normal;
  font-weight : 400;
  src : url('./fonts/NotoSerifJP-Light.woff') format('woff');
  font-display : swap;
}

/****************************

break-point

*****************************/
/****************************

color-setting

*****************************/
/****************************

font-setting

*****************************/
@font-face {
  font-family : 'Noto Serif Japanese';
  font-style : normal;
  font-weight : 400;
  src : url('./fonts/NotoSerifJP-Light.woff') format('woff');
  font-display : swap;
}

/****************************

break-point

*****************************/
/****************************

color-setting

*****************************/
/****************************

font-setting

*****************************/
/* Reset Style */
html {
  overflow-y : scroll;
  font-family : 'Roboto', 'Lateef', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, Verdana, Roboto, 'Noto Sans JP', '貂ｸ繧ｴ繧ｷ繝�け', 'Yu Gothic', '貂ｸ繧ｴ繧ｷ繝�け菴�', 'YuGothic', '繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', '繝｡繧､繝ｪ繧ｪ', Meiryo, '�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け', 'MS PGothic', sans-serif;
  font-size : 62.5%;
  line-height : 1rem;
  min-width : 1280px;
  -webkit-font-smoothing : antialiased;
}
@media screen and (max-width: 750px) {
  html {
    min-width : 100%;
  }
}
@media all and (orientation: landscape) {
  html {
    min-width : inherit;
  }
}

body {
  font-family : 'Roboto', 'Lateef', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, Verdana, Roboto, 'Noto Sans JP', '貂ｸ繧ｴ繧ｷ繝�け', 'Yu Gothic', '貂ｸ繧ｴ繧ｷ繝�け菴�', 'YuGothic', '繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', '繝｡繧､繝ｪ繧ｪ', Meiryo, '�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け', 'MS PGothic', sans-serif;
  color : #000;
}

input,
button,
select,
textarea {
  -webkit-appearance : none;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin : 0;
  padding : 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style : normal;
}

table {
  border-collapse : collapse;
  border-spacing : 0;
}

caption,
th {
  text-align : left;
}

q:before,
q:after {
  content : '';
}

img,
object,
embed {
  vertical-align : top;
}

hr,
legend {
  display : none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size : 100%;
}

img,
abbr,
acronym,
fieldset {
  border : 0;
}

li {
  list-style-type : none;
}

/* YUI 3.4.1 (build 4118) Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License. http://yuilibrary.com/license/ */
select,
input,
button,
textarea {
  font : 99% arial, helvetica, clean, sans-serif;
}

table {
  font-size : inherit;
  font : 100%;
}

pre,
code,
kbd,
samp,
tt {
  font-family : monospace;
  *font-size : 108%;
  line-height : 100%;
}

/* ====================================== */
/* shared */
/* ====================================== */
/* block */
.colum--right {
  position : absolute;
  top : 0;
  right : 0;
  width : 50vw;
  height : 100vh;
  background : url(../img/main/main_sake.jpg) no-repeat center/cover;
}
.colum--right:hover {
  cursor : url(../img/cursor-sake.png) 50 50, pointer;
}
@media screen and (max-width: 750px) {
  .colum--right {
    top : 50vh;
    width : 100vw;
    height : 50vh;
  }
}

.colum--left {
  position : absolute;
  top : 0;
  left : 0;
  width : 50vw;
  height : 100vh;
  background : url(../img/main/main_koma.jpg) no-repeat center/cover;
}
.colum--left:hover {
  cursor : url(../img/cursor-sakazuki.png) 50 50, pointer;
}
@media screen and (max-width: 750px) {
  .colum--left {
    width : 100vw;
    height : 50vh;
    background-size : 200%;
    border-bottom : 2px solid #d8242c;
  }
}

.line__container {
  display : -ms-flexbox;
  display : flex;
  -ms-flex-direction : column;
      flex-direction : column;
  -ms-flex-align : baseline;
  align-items : baseline;
  position : absolute;
}
.line__container--right {
  top : 10rem;
  left : 50vw;
  -ms-flex-align : baseline;
  align-items : baseline;
}
@media screen and (max-width: 750px) {
  .line__container--right {
    top : 15rem;
    left : 0;
  }
}
@media screen and (min-width: 300px) and (max-width: 320px) {
  .line__container--right {
    top : 12rem;
  }
}
.line__container--left {
  -ms-flex-align : end;
  align-items : flex-end;
  right : 50vw;
  bottom : 10rem;
  cursor : pointer;
}
@media screen and (max-width: 750px) {
  .line__container--left {
    right : 0;
    bottom : 12rem;
  }
}
@media screen and (min-width: 300px) and (max-width: 320px) {
  .line__container--left {
    bottom : 8rem;
  }
}

.line__mask {
  overflow : hidden;
}
.line__mask--no-margin {
  height : 3.3rem;
}
@media screen and (max-width: 750px) {
  .line__mask--no-margin {
    height : 2.6rem;
  }
}

.line__wrap {
  position : relative;
  left : -1px;
  display : inline-block;
  width : 0%;
  background-color : #fff;
  margin : 0 0 1.6rem;
  overflow : hidden;
  border-top : 1px solid #000;
  border-right : 1px solid #000;
  border-bottom : 1px solid #000;
  opacity : 0;
}
@media screen and (max-width: 750px) {
  .line__wrap {
    margin : 0 0 1rem;
  }
}
.line__wrap.is-active {
  animation : lineAnim 1.4s forwards;
}
.line__wrap--left {
  left : initial;
  right : 1px;
  border-right : none;
  border-left : 1px solid #000;
}
.line__wrap--left.is-active {
  animation : lineAnimLeft 1.4s forwards;
}
.line__wrap--no-margin {
  margin : 0;
  border-bottom : none;
}

.line__inner {
  display : block;
  background-color : #fff;
  width : 100%;
  height : 100%;
}

.line__text {
  box-sizing : border-box;
  padding : .6rem 1.4rem;
  font-size : 2.1rem;
  line-height : 1;
  opacity : 0;
}
@media screen and (max-width: 750px) {
  .line__text {
    font-size : 1.3rem;
    padding : .6rem 1rem;
  }
}
.line__text.is-active {
  animation : copyShow 1.2s forwards;
  animation-delay : .6s;
}

.line__copy {
  height : 1.6rem;
}
@media screen and (max-width: 750px) {
  .line__copy {
    height : 1.3rem;
  }
}
@media screen and (min-width: 300px) and (max-width: 320px) {
  .line__copy {
    height : 1.1rem;
  }
}
.line__copy--en {
  height : 1.4rem;
}
@media screen and (max-width: 750px) {
  .line__copy--en {
    height : 1.1rem;
  }
}
@media screen and (min-width: 300px) and (max-width: 320px) {
  .line__copy--en {
    height : 1rem;
  }
}

@keyframes lineAnim {
  0% {
    opacity : 0;
  }
  1% {
    opacity : 1;
  }
  25% {
    width : 0%;
  }
  75%,
  100% {
    width : 100%;
    opacity : 1;
  }
}

@keyframes lineAnimLeft {
  0% {
    opacity : 0;
  }
  1% {
    opacity : 1;
  }
  25% {
    width : 0%;
    left : 100%;
  }
  75%,
  100% {
    width : 100%;
    left : 0%;
    opacity : 1;
  }
}

@keyframes copyShow {
  0%,
  25% {
    opacity : 0;
    transform : translate(0, 1rem);
  }
  75%,
  100% {
    opacity : 1;
    transform : translate(0, 0);
  }
}

@keyframes blink {
  0%,
  25% {
    fill : #fff;
  }
  26%,
  100% {
    fill : #000;
  }
}

@keyframes blinkBg {
  0%,
  25% {
    background-color : #000;
  }
  26%,
  100% {
    background-color : #fff;
  }
}

.link-circle__wrap {
  position : absolute;
  width : 9rem;
  height : 9rem;
  z-index : 9;
}
@media screen and (max-width: 750px) {
  .link-circle__wrap {
    width : 7.8rem;
    height : 7.8rem;
  }
}
.link-circle__wrap--sake {
  display : none;
  top : 0;
  left : 0;
}
@media screen and (max-width: 750px) {
  .link-circle__wrap--sake {
    display : block;
    top : initial;
    left : 1rem;
    bottom : 1rem;
    background : url(../img/sake-btn.gif) no-repeat center/cover;
  }
}
.link-circle__wrap--koma {
  display : none;
  top : 0;
  right : 0;
}
@media screen and (max-width: 750px) {
  .link-circle__wrap--koma {
    display : block;
    top : 1rem;
    right : 1rem;
    background : url(../img/sakazuki-btn.gif) no-repeat center/cover;
  }
}
.link-circle__wrap--cursor {
  display : none;
}
.link-circle__wrap--cursor--is-active {
  display : block;
}

.link-circle__image {
  visibility : hidden;
  display : block;
  position : absolute;
  top : 0;
  left : 0;
  width : 100%;
  height : 100%;
}
.link-circle__image--is-active {
  visibility : visible;
}

.logo {
  text-align : center;
}
.logo__wrap {
  display : -ms-flexbox;
  display : flex;
  -ms-flex-align : center;
  align-items : center;
  position : absolute;
  top : 50%;
  left : 50%;
  transform : translate(-50%, -50%);
  width : 40rem;
  height : 18rem;
  background : #fff;
  z-index : 9;
}
@media screen and (max-width: 750px) {
  .logo__wrap {
    width : 22rem;
    height : 10rem;
  }
}
.logo__image {
  width : 80%;
}

.main-contents {
  display : block;
  position : relative;
  width : 100vw;
  height : 100vh;
  margin : 100vh 0 0;
}

.splash__wrap {
  position : fixed;
  top : 0;
  left : 0;
  width : 100vw;
  height : 100vh;
  z-index : -9;
  background : url(../img/splash/splash.jpg) no-repeat center/cover;
}

.splash__scrolldown {
  display : inline-block;
  position : absolute;
  bottom : 30px;
  left : 50%;
  transform : translate(-50%, 0);
  width : 7rem;
  animation : topScroll 2s infinite;
}
.splash__scrolldown img {
  width : 100%;
}

@keyframes topScroll {
  0%,
  25% {
    bottom : 30px;
  }
  50% {
    bottom : 15px;
  }
  75%,
  100% {
    bottom : 30px;
  }
}

.modal-contents__wrap {
  position : relative;
  display : -ms-flexbox;
  display : flex;
  -ms-flex-direction : column;
      flex-direction : column;
  -ms-flex-pack : center;
  justify-content : center;
  -ms-flex-align : center;
  align-items : center;
  width : 34vw;
  height : 100vh;
  box-sizing : border-box;
  padding : 15vh 2.4rem;
}
@media screen and (max-width: 750px) {
  .modal-contents__wrap {
    width : 100vw;
    height : auto;
    padding : 7rem 1.8rem 10rem;
  }
}

.modal-contents__desc {
  font-size : 1.2rem;
  line-height : 1.8;
}
@media screen and (max-width: 750px) {
  .modal-contents__desc {
    font-size : 1.1rem;
    line-height : 1.7;
  }
}
@media screen and (min-width: 300px) and (max-width: 320px) {
  .modal-contents__desc {
    font-size : 1.1rem;
    line-height : 1.6;
  }
}
.modal-contents__desc--ja {
  -ms-writing-mode : tb-rl;
      writing-mode : vertical-rl;
  font-family : '貂ｸ譏取悃', 'YuMincho', '繝偵Λ繧ｮ繝取�譛� ProN W3', 'Hiragino Mincho ProN', 'HG譏取悃E', '�ｭ�ｳ �ｰ譏取悃', '�ｭ�ｳ 譏取悃', serif;
  width : 100%;
  height : 20rem;
  min-height : 20rem;
  font-size : 1.2rem;
  word-break : break-all;
  line-height : 1.9;
}
@media screen and (max-width: 750px) {
  .modal-contents__desc--ja {
    font-size : 1.1rem;
    line-height : 1.7;
    -ms-flex-order : 2;
    order : 2;
    margin : 0 0 2.5rem;
  }
}
.modal-contents__desc--ja .upright {
  -webkit-text-orientation : upright;
          text-orientation : upright;
}
.modal-contents__desc--en {
  font-family : 'Roboto', sans-serif;
  width : 100%;
}
@media screen and (max-width: 750px) {
  .modal-contents__desc--en {
    -ms-flex-order : 3;
    order : 3;
  }
}

.modal-contents__shop-link {
  position : absolute;
  bottom : 0;
  right : 0;
  display : inline-block;
  background : #d8242c;
  padding : .8rem 2.2rem;
  font-size : 2rem;
  color : #fff;
  text-decoration : none;
  font-family : 'Lateef', cursive;
  letter-spacing : .1em;
}

.modal-contents__shop-link-wrap {
  position : absolute;
  bottom : 0;
  right : 0;
}
.modal-contents__shop-link-wrap a {
  display : inline-block;
  background : #d8242c;
  padding : .8rem 2.2rem;
  font-size : 2rem;
  color : #fff;
  text-decoration : none;
  font-family : 'Lateef', cursive;
  letter-spacing : .1em;
}

.modal-slide__wrap {
  width : 50vw;
  height : 100vh;
}
@media screen and (max-width: 750px) {
  .modal-slide__wrap {
    width : 100vw;
    height : 80vh;
  }
}

.modal-slide__item {
  position : relative;
  width : 100%;
  height : 100vh;
}
@media screen and (max-width: 750px) {
  .modal-slide__item {
    width : 100vw;
    height : 80vh;
  }
}
.modal-slide__item img {
  -o-object-fit : cover;
     object-fit : cover;
  width : 100%;
  height : 100%;
  font-family : 'object-fit: cover;';
}

.modal-thumb__wrap {
  width : 16vw;
  height : 100vh;
}
@media screen and (max-width: 750px) {
  .modal-thumb__wrap {
    display : -ms-flexbox;
    display : flex;
    -ms-flex-wrap : wrap;
        flex-wrap : wrap;
    width : 100vw;
  }
}

.modal-thumb__image {
  width : 100%;
  height : 20vh;
}
@media screen and (max-width: 750px) {
  .modal-thumb__image {
    width : 50%;
    height : 25vh;
  }
}
@media screen and (max-width: 750px) {
  .modal-thumb__image--large-sp {
    width : 100%;
    height : 50vh;
  }
}
.modal-thumb__image--sake01 {
  background : url(../img/sake/thumb/tsunan1.jpg) no-repeat center/cover;
}
.modal-thumb__image--sake02 {
  background : url(../img/sake/thumb/tsunan2.jpg) no-repeat center/cover;
}
.modal-thumb__image--sake03 {
  background : url(../img/sake/thumb/tsunan3.jpg) no-repeat center/cover;
}
.modal-thumb__image--sake04 {
  background : url(../img/sake/thumb/tsunan4.jpg) no-repeat center/cover;
}
.modal-thumb__image--sake05 {
  background : url(../img/sake/thumb/tsunan5.jpg) no-repeat center/cover;
}
.modal-thumb__image--koma01 {
  background : url(../img/koma/thumb/koma1.jpg) no-repeat center/cover;
}
.modal-thumb__image--koma02 {
  background : url(../img/koma/thumb/koma2.jpg) no-repeat center/cover;
}
.modal-thumb__image--koma03 {
  background : url(../img/koma/thumb/koma3.jpg) no-repeat center/cover;
}
.modal-thumb__image--koma04 {
  background : url(../img/koma/thumb/koma4.jpg) no-repeat center/cover;
}
.modal-thumb__image--koma05 {
  background : url(../img/koma/thumb/koma5.jpg) no-repeat center/cover;
}
.modal-thumb__image--bar01 {
  background : url(../img/bar/thumb/bar1.jpg) no-repeat center/cover;
}
.modal-thumb__image--bar02 {
  background : url(../img/bar/thumb/bar2.jpg) no-repeat center/cover;
}
.modal-thumb__image--bar03 {
  background : url(../img/bar/thumb/bar3.jpg) no-repeat center/cover;
}
@media screen and (max-width: 750px) {
  .modal-thumb__image--bar03 {
    background : url(../img/bar/thumb/bar3_sp.jpg) no-repeat center/cover;
  }
}
.modal-thumb__image--bar04 {
  background : url(../img/bar/thumb/bar4.jpg) no-repeat center/cover;
}
.modal-thumb__image--bar05 {
  background : url(../img/bar/thumb/bar5.jpg) no-repeat center/cover;
}

.modal-title__wrap {
  display : -ms-flexbox;
  display : flex;
  width : 100%;
  margin : 5rem 0;
  -ms-flex-pack : center;
  justify-content : center;
  -ms-flex-align : center;
  align-items : center;
}
@media screen and (max-width: 750px) {
  .modal-title__wrap {
    -ms-flex-order : 1;
    order : 1;
    margin : 0 0 4rem;
  }
}

.modal-title__main {
  width : 8rem;
  height : 7rem;
  margin : 0 2rem 0 0;
}
@media screen and (max-width: 750px) {
  .modal-title__main {
    width : 13vw;
    height : auto;
  }
}

.modal-title__title-wrap {
  display : -ms-flexbox;
  display : flex;
  -ms-flex-direction : column;
      flex-direction : column;
  width : 100%;
}

.modal-title__bottom {
  width : 100%;
  display : -ms-flexbox;
  display : flex;
  -ms-flex-pack : justify;
  justify-content : space-between;
}

.modal-title__credit {
  text-align : right;
  font-size : 1.4rem;
  line-height : 1;
}

.modal-title__main-title {
  font-family : 'Lateef', cursive;
  line-height : 1;
  font-size : 3.4rem;
  margin : 0 0 .5rem;
}
@media screen and (max-width: 750px) {
  .modal-title__main-title {
    font-size : 2.8rem;
    margin : 0 0 .3rem;
  }
}

.modal-title__border {
  display : block;
  width : 100%;
  height : 1px;
  background : #000;
}

.modal-title__cross {
  display : block;
  width : 1.2rem;
  margin : 0 .5rem;
}
@media screen and (max-width: 750px) {
  .modal-title__cross {
    width : .8rem;
    margin : 0 .5rem;
  }
}

.modal-title__label {
  display : -ms-flexbox;
  display : flex;
  -ms-flex-align : center;
  align-items : center;
  font-family : 'Lateef', cursive;
  font-size : 2rem;
  margin : 1.5rem 0 0;
  letter-spacing : 1px;
}
@media screen and (max-width: 750px) {
  .modal-title__label {
    font-size : 1.8rem;
    line-height : 1;
    margin : .5rem 0 0;
    letter-spacing : .02em;
  }
}

.modal__wrap {
  visibility : hidden;
  position : fixed;
  top : 0;
  left : 0;
  width : 100vw;
  height : 100vh;
  z-index : 99;
  background-color : #fff;
  -webkit-backface-visibility : hidden;
          backface-visibility : hidden;
}
.modal__wrap.is-visible {
  visibility : visible;
  z-index : 99999;
}
@media screen and (max-width: 750px) {
  .modal__wrap.is-visible {
    overflow-y : scroll;
    -webkit-overflow-scrolling : touch;
  }
}

.modal__in {
  display : -ms-flexbox;
  display : flex;
}
@media screen and (max-width: 750px) {
  .modal__in {
    -ms-flex-direction : column;
        flex-direction : column;
  }
}

.modal__close-btn {
  position : absolute;
  top : 0;
  right : 16vw;
  width : 75px;
  cursor : pointer;
  z-index : 9;
}
@media screen and (max-width: 750px) {
  .modal__close-btn {
    right : 0;
    width : 70px;
  }
}