@charset "UTF-8";
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  font-weight: normal;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

ol,
ul,
li {
  list-style: none; }

blockquote,
q {
  quotes: none; }

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

a {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

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

/* change border colour to suit your needs 
*/
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input,
select {
  vertical-align: middle; }

img,
iframe {
  vertical-align: bottom; }

th {
  text-align: left; }

/* a:hover{
	opacity: 0.7;
} */
/* ////////////////////////////////////////
PC
//////////////////////////////////////// */
/* ////////////////////////////////////////
PC
//////////////////////////////////////// */
/* ////////////////////////////////////////
SP
//////////////////////////////////////// */
@media screen and (max-width: 768px) {
  html {
    font-size: 62.5%; }

  body,
  div,
  span,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  abbr,
  address,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  samp,
  small,
  strong,
  sub,
  sup,
  var,
  b,
  i,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    /*font-weight: bold;*/ } }
/* ////////////////////////////////////////
SP
//////////////////////////////////////// */
/*---------------------------------------------
media query
----------------------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: 0em;
  color: #000; }

html {
  color: #444;
  font-family: 'Noto Sans JP', sans-serif, Arial, Helvetica, 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'HiraKakuPro-W3', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 62.5%; }

.mincho, .bl_sec02Body {
  font-family: 'Noto Serif', serif;
  font-family: 'Noto Serif JP', serif; }

/**
 * header
 */
header {
  max-width: 1300px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative; }

/**ハンバーガーボタン**/
.bl_humburger {
  position: fixed;
  top: 85px;
  width: 110px;
  height: auto;
  z-index: 10000;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  pointer-events: auto;
  margin-top: 0;
  margin-left: 86px; }
  @media screen and (max-width: 768px) {
    .bl_humburger {
      margin-top: 25px;
      margin-left: 10px;
      width: 50px;
      top: 0; } }

.bl_humburger > span {
  display: block;
  width: 100%;
  margin: 0 0 24px;
  height: 2px;
  background: #000;
  transition: all 0.2s ease-in-out; }
  @media screen and (max-width: 768px) {
    .bl_humburger > span {
      margin: 0 0 14px; } }

.bl_humburger.is_active > span:first-of-type {
  width: 100%;
  transform: translateY(28px) rotate(-45deg); }
  @media screen and (max-width: 768px) {
    .bl_humburger.is_active > span:first-of-type {
      transform: translateY(7px) rotate(-45deg); } }
.bl_humburger > span:nth-of-type(2) {
  width: 62%; }
.bl_humburger.is_active > span:nth-of-type(2) {
  opacity: 0; }
.bl_humburger > span:last-of-type {
  width: 81%;
  margin-bottom: 0; }
.bl_humburger.is_active > span:last-of-type {
  width: 100%;
  transform: translateY(-26px) rotate(45deg); }

.ly_gnav {
  position: fixed;
  top: 61px;
  width: 363px;
  margin-left: 237px;
  transform: translateX(-100vw);
  transition: all .5s ease;
  z-index: 1000; }
  @media screen and (max-width: 768px) {
    .ly_gnav {
      left: 0;
      right: 0;
      width: 96vw;
      max-width: 400px;
      margin-left: 3vw;
      margin-right: auto; } }
  @media screen and (max-width: 420px) {
    .ly_gnav {
      margin: 0 auto; } }
  .ly_gnav.is_open {
    transform: translateX(0); }

.bl_gnavCon {
  border: 2px solid #000;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transition: all .5s ease; }
  .bl_gnavCon .bl_gnavItem {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 22px;
    padding-right: 3px;
    transition: all .5s ease; }
    @media screen and (max-width: 768px) {
      .bl_gnavCon .bl_gnavItem {
        padding-left: 2vw; } }
    .bl_gnavCon .bl_gnavItem:first-of-type {
      padding-top: 19px; }
    .bl_gnavCon .bl_gnavItem:last-of-type {
      padding-bottom: 9px; }
    .bl_gnavCon .bl_gnavItem:hover {
      background: #000; }
    .bl_gnavCon .bl_gnavItem:hover .el_gnavItemEn {
      color: #fff; }
    .bl_gnavCon .bl_gnavItem:hover .el_gnavItemJa {
      color: #fff; }
  .bl_gnavCon .el_gnavItemEn {
    display: block;
    font-size: 2.5rem;
    letter-spacing: -0.04em;
    margin-bottom: 4px;
    color: #000;
    transition: all .5s ease; }
  .bl_gnavCon .el_gnavItemJa {
    display: block;
    font-size: 1.8rem;
    padding-left: 62px;
    color: #aaa;
    transition: all .5s ease;
    font-weight: 300; }
  .bl_gnavCon.is_open {
    opacity: 1; }

/**共通**/
.select-lang {
  position: absolute;
  width: 97px;
  top: 105px;
  margin-right: 158px;
  right: 0;
  z-index: 1000;
  display: flex; }
  @media screen and (max-width: 1000px) {
    .select-lang {
      top: 20px;
      margin-right: 3vw; } }
  .select-lang .bl_select_lang01 {
    width: 42px; }
    .select-lang .bl_select_lang01 img {
      width: 100%;
      cursor: pointer; }
  .select-lang .bl_select_lang02 {
    width: 15px; }
    .select-lang .bl_select_lang02 img {
      width: 100%;
      cursor: pointer; }
  .select-lang .bl_select_lang03 {
    width: 40px; }
    .select-lang .bl_select_lang03 img {
      width: 100%;
      cursor: pointer; }

.wrapper, .ly_wkWrapper {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%; }
  @media screen and (max-width: 1300px) {
    .wrapper, .ly_wkWrapper {
      max-width: unset;
      padding-left: 3vw;
      padding-right: 3vw; } }

.inline {
  display: inline-block;
  font-size: inherit;
  color: inherit;
  font-weight: inherit; }

.br-pc {
  display: block; }
  @media screen and (max-width: 1300px) {
    .br-pc {
      display: none; } }

.br-lg {
  display: block; }
  @media screen and (max-width: 1000px) {
    .br-lg {
      display: none; } }

.br-sp {
  display: none; }
  @media screen and (max-width: 1000px) {
    .br-sp {
      display: block; } }

.paper {
  transform-style: flat;
  transition: all 250ms ease-out; }
  .paper:before, .paper:after {
    content: "";
    position: absolute;
    z-index: -2;
    transition: all 250ms ease-out; }

.paper-raise:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
.paper-raise:hover {
  border: 1px solid #000; }
  .paper-raise:hover:before {
    box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.2); }

#page_top {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 80px;
  height: 80px; }
  @media screen and (max-width: 768px) {
    #page_top {
      width: 60px;
      height: 60px; } }
  #page_top a {
    position: relative;
    display: block; }
    @media screen and (max-width: 768px) {
      #page_top a {
        width: 60px;
        height: 60px; } }
  #page_top img {
    width: 100%;
    height: auto; }

/**
* index
*/
/**
* sec01
*/
main {
  padding-bottom: 98px; }

#sec01 {
  height: 100%;
  min-height: 690px;
  position: relative; }
  @media screen and (max-width: 420px) {
    #sec01 {
      height: 100vh;
      min-height: 100vh; } }

.ly_logo {
  padding-top: 223px;
  margin-right: 235px;
  margin-left: auto;
  width: 196px; }
  @media screen and (max-width: 1000px) {
    .ly_logo {
      margin-left: auto;
      margin-right: auto;
      width: 50vw;
      max-width: 196px; } }
  @media screen and (max-width: 420px) {
    .ly_logo {
      padding-top: 20vh; } }
  .ly_logo img {
    width: 100%;
    max-width: 196px; }

.bl_catch {
  margin-top: 47px;
  margin-left: 125px;
  margin-bottom: 63px;
  width: 648px; }
  @media screen and (max-width: 768px) {
    .bl_catch {
      margin-top: 10vh;
      margin-bottom: 10vh;
      width: 90%;
      max-width: 340px;
      margin-left: auto;
      margin-right: auto; } }
  .bl_catch img {
    width: 100%; }
  .bl_catch .pc {
    display: block; }
    @media screen and (max-width: 768px) {
      .bl_catch .pc {
        display: none; } }
  .bl_catch .sp {
    display: none; }
    @media screen and (max-width: 768px) {
      .bl_catch .sp {
        display: block;
        width: 100%;
        margin: 0 auto; } }

.ly_downArea {
  max-width: 1300px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 4vh; }
  @media screen and (max-width: 1300px) {
    .ly_downArea {
      position: absolute;
      height: 60px;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%; } }

.ly_downArrow {
  width: 46px;
  margin-left: auto;
  margin-right: auto; }
  @media screen and (max-width: 1300px) {
    .ly_downArrow {
      margin-top: auto; } }
  @media screen and (max-width: 420px) {
    .ly_downArrow {
      margin-top: auto; } }
  .ly_downArrow img {
    width: 100%;
    max-width: 46px; }

/**
* sec02
*/
#sec02 {
  height: 100%;
  min-height: 820px;
  position: relative; }
  @media screen and (max-width: 1300px) {
    #sec02 {
      height: auto;
      min-height: initial; } }

.ly_sec02Catch {
  padding-top: 30px;
  text-align: center; }
  @media screen and (max-width: 768px) {
    .ly_sec02Catch {
      padding-top: 70px; } }

.bl_sec02Catch {
  width: 808px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4; }
  @media screen and (max-width: 1300px) {
    .bl_sec02Catch {
      padding-left: 3vw;
      padding-right: 3vw; } }
  @media screen and (max-width: 768px) {
    .bl_sec02Catch {
      width: 100%; } }
  @media screen and (max-width: 420px) {
    .bl_sec02Catch {
      font-size: 2.5rem;
      padding-left: 5vw;
      padding-right: 5vw;
      padding-left: 0;
      padding-right: 0; } }
  .bl_sec02Catch img {
    width: 100%; }
  .bl_sec02Catch .pc {
    display: block; }
    @media screen and (max-width: 768px) {
      .bl_sec02Catch .pc {
        display: none; } }
  .bl_sec02Catch .sp {
    display: none; }
    @media screen and (max-width: 768px) {
      .bl_sec02Catch .sp {
        display: block;
        margin-left: auto;
        margin-right: auto; } }
    @media screen and (max-width: 420px) {
      .bl_sec02Catch .sp {
        width: 100%; } }

.bl_sec02Catch.hp_eng {
  width: 100%;
  text-align: center;
  font-size: 3.2rem;
  font-weight: 200; }

.ly_sec02Body {
  max-width: 1300px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 33px; }
  @media screen and (max-width: 1300px) {
    .ly_sec02Body {
      max-width: 100%;
      padding-bottom: 70px; } }
  @media screen and (max-width: 768px) {
    .ly_sec02Body {
      padding-bottom: 13vh; } }

.bl_sec02Image {
  width: 100%;
  height: auto;
  overflow: hidden; }
  @media screen and (max-width: 768px) {
    .bl_sec02Image {
      margin-bottom: 2vh; } }
  .bl_sec02Image .pc {
    display: block;
    width: 100%;
    height: 256px;
    object-fit: cover; }
    @media screen and (max-width: 768px) {
      .bl_sec02Image .pc {
        display: none; } }
  .bl_sec02Image .sp {
    display: none; }
    @media screen and (max-width: 768px) {
      .bl_sec02Image .sp {
        display: block;
        width: 100%;
        height: 300px;
        object-fit: cover; } }
    @media screen and (max-width: 420px) {
      .bl_sec02Image .sp {
        height: 240px; } }

.bl_sec02Body {
  font-size: 1.9rem;
  line-height: 2.05;
  text-align: center;
  letter-spacing: 0.01em;
  margin-bottom: 5vh;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px; }
  .bl_sec02Body:last-of-type {
    margin-bottom: 56px; }
  @media screen and (max-width: 1300px) {
    .bl_sec02Body {
      text-align: left;
      padding-left: 3vw;
      padding-right: 3vw;
      margin-bottom: 2vh; } }
  @media screen and (max-width: 768px) {
    .bl_sec02Body {
      padding-left: 8vw;
      padding-right: 8vw; } }

/**
* sec03
*/
.ly_sec03, .ly_sec04 {
  padding-top: 73px;
  padding-bottom: 104px;
  text-align: center; }
  @media screen and (max-width: 768px) {
    .ly_sec03, .ly_sec04 {
      padding-bottom: 6vh;
      padding-top: 6vh; } }
  @media screen and (max-width: 420px) {
    .ly_sec03, .ly_sec04 {
      padding-bottom: 5vh;
      padding-top: 5vh; } }

.ly_wkWrapper {
  padding-left: 0;
  padding-right: 0; }

.bl_03Title {
  width: 308px;
  margin-left: auto;
  margin-right: auto; }
  .bl_03Title img {
    width: 100%;
    height: auto; }
  @media screen and (max-width: 420px) {
    .bl_03Title {
      height: 61px; }
      .bl_03Title img {
        max-height: 61px; } }

.ly_col3 {
  display: flex;
  justify-content: center;
  margin-top: 140px;
  padding-right: 11px; }
  @media screen and (max-width: 1300px) {
    .ly_col3 {
      padding-left: 0;
      margin-top: 5vh;
      flex-wrap: wrap;
      padding-left: 3vw;
      padding-right: 3vw; } }
  @media screen and (max-width: 420px) {
    .ly_col3 {
      padding-left: 1vw;
      padding-right: 1vw; } }

.ly_col4 {
  display: flex;
  justify-content: center;
  margin-top: 60px;
  padding-right: 0px; }
  @media screen and (max-width: 1300px) {
    .ly_col4 {
      display: none;
      padding-left: 0;
      margin-top: 2vh;
      flex-wrap: wrap; } }

.bl_colBox03, .bl_colBox04 {
  width: 230px;
  margin-right: 15px;
  margin-left: 15px; }
  @media screen and (max-width: 1300px) {
    .bl_colBox03, .bl_colBox04 {
      width: calc(50% - 4vw);
      max-width: 230px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 2vh; } }
  @media screen and (max-width: 420px) {
    .bl_colBox03, .bl_colBox04 {
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 4vh;
      width: calc(100% / 2);
      padding-left: 1vw;
      padding-right: 1vw; } }
  .bl_colBox03.hp_1299, .hp_1299.bl_colBox04 {
    display: none; }
    @media screen and (max-width: 1300px) {
      .bl_colBox03.hp_1299, .hp_1299.bl_colBox04 {
        display: flex; } }
  .bl_colBox03.is_empty, .is_empty.bl_colBox04 {
    display: none; }
    @media screen and (max-width: 1300px) {
      .bl_colBox03.is_empty, .is_empty.bl_colBox04 {
        display: flex;
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0; } }

@media screen and (max-width: 1300px) {
  .bl_colBox04 {
    width: calc(100% / 4);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between; } }

.el_colTitle {
  font-size: 1.9rem;
  font-weight: 300;
  margin-bottom: 12px;
  text-align: left; }
  @media screen and (max-width: 1300px) {
    .el_colTitle {
      font-size: 1.8rem; } }
  @media screen and (max-width: 420px) {
    .el_colTitle {
      font-size: 1.6rem; } }

.el_colImage {
  width: 230px;
  height: 230px; }
  @media screen and (max-width: 420px) {
    .el_colImage {
      width: 100%;
      height: calc(100vw / 2); } }
  .el_colImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left; }
    @media screen and (max-width: 420px) {
      .el_colImage img {
        object-fit: contain; } }

/**
* sec04
*/
.bl_04Title {
  width: 399px;
  margin-left: auto;
  margin-right: auto; }
  @media screen and (max-width: 420px) {
    .bl_04Title {
      width: 100%;
      padding-left: 3vw;
      padding-right: 3vw;
      height: 69px; } }
  .bl_04Title img {
    width: 100%;
    margin-right: 0;
    margin-left: auto;
    display: block; }
    @media screen and (max-width: 768px) {
      .bl_04Title img {
        margin-right: auto;
        max-width: 100%;
        max-height: 69px; } }

.bl_subTitle {
  margin-top: 83px;
  width: 95px;
  margin-left: auto;
  margin-right: auto; }
  .bl_subTitle img {
    width: 100%; }
  @media screen and (max-width: 768px) {
    .bl_subTitle {
      margin-top: 5vh;
      max-height: 23px;
      max-width: 100%; }
      .bl_subTitle img {
        width: auto;
        max-height: 23px; } }

.bl_subTitle.hp_01 {
  width: 64px; }
  .bl_subTitle.hp_01 img {
    width: 100%;
    max-height: unset; }

.bl_subText {
  margin-top: 35px;
  font-size: 1.9rem;
  letter-spacing: -0.05em;
  line-height: 1.2; }
  .bl_subText.hp_mdt {
    margin-top: 41px; }
  @media screen and (max-width: 768px) {
    .bl_subText {
      margin-top: 3vh;
      font-size: 1.8rem; } }
  @media screen and (max-width: 420px) {
    .bl_subText {
      text-align: left; } }

.ly_sec04Image {
  display: flex;
  justify-content: center;
  margin-top: 52px;
  margin-left: auto;
  margin-right: auto;
  width: 1281px;
  margin-bottom: 131px; }
  @media screen and (max-width: 1300px) {
    .ly_sec04Image {
      width: 100%; } }
  @media screen and (max-width: 420px) {
    .ly_sec04Image {
      flex-wrap: wrap; } }
  .ly_sec04Image.hp_mdt {
    margin-top: 38px; }

.bl_glassware.hp_01 {
  width: 440px; }
.bl_glassware.hp_02 {
  width: 401px; }
.bl_glassware.hp_03 {
  width: 393px; }
  @media screen and (max-width: 420px) {
    .bl_glassware.hp_03 {
      width: 100%; } }
.bl_glassware.hp_04 {
  width: 386px; }
  @media screen and (max-width: 420px) {
    .bl_glassware.hp_04 {
      width: 100%; } }
.bl_glassware.hp_05 {
  width: 502px; }
  @media screen and (max-width: 420px) {
    .bl_glassware.hp_05 {
      width: 100%; } }
.bl_glassware img {
  display: block;
  width: 100%;
  height: auto; }