@charset "UTF-8";
@use "./mixin" as *;
html, body, 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, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}

article, aside, figure, footer, header, nav, section, details, summary {
  display: block;
}

/* Handle box-sizing while better addressing child elements:
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Responsive images and other embedded objects */
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
img,
object,
embed {
  max-width: 100%;
}

/*
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
	In fact, it *will* cause problems with Google Maps' controls at small size.
	If this is the case for you, try uncommenting the following:

#map img {
		max-width: none;
}
*/
/* force a vertical scrollbar to prevent a jumpy page */
html {
  overflow-y: scroll;
}

/* we use a lot of ULs that aren't bulleted.
	you'll have to restore the bullets within content,
	which is fine because they're probably customized anyway */
ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

del {
  text-decoration: line-through;
}

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

/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  font-weight: bold;
  vertical-align: bottom;
}

td {
  font-weight: normal;
  vertical-align: top;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */
}

input[type="radio"] {
  vertical-align: text-bottom;
}

input[type="checkbox"] {
  vertical-align: bottom;
}

.ie7 input[type="checkbox"] {
  vertical-align: baseline;
}

.ie6 input {
  vertical-align: text-bottom;
}

select, input, textarea {
  font: 99% sans-serif;
}

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

small {
  font-size: 85%;
}

strong {
  font-weight: bold;
}

td, td img {
  vertical-align: top;
}

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* standardize any monospaced elements */
pre, code, kbd, samp {
  font-family: monospace, sans-serif;
}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {
  cursor: pointer;
}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {
  margin: 0;
}

/* make buttons play nice in IE */
button,
input[type=button] {
  width: auto;
  overflow: visible;
}

/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic;
}

/* prevent BG image flicker upon hover
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:before, .clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Yu Gothic Medium', '游ゴシック Medium', YuGothic Pr6, '游ゴシック体 Pr6', YuGothic, '游ゴシック体', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'palt' 1;
  color: #333;
  font-size: 13px;
  line-height: 1.8;
}

@media screen and (min-width: 601px) {
  html.notIE body {
    font-size: 14px;
  }
}

html.msie body {
  font-size: 14px;
}

html.notIE body,
html.msie body {
  opacity: 1;
}

a {
  color: inherit;
  text-decoration: underline;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

input,
textarea,
select {
  margin: 0;
  font: inherit;
  vertical-align: middle;
  outline: none;
}

input[type="text"],
input[type="search"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="number"],
textarea,
select {
  width: 100%;
  background-color: #fff;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  border-radius: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input[type="text"],
input[type="search"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="number"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

textarea {
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  vertical-align: middle;
}

select {
  border: solid 1px #ccc;
  border-radius: 3px;
  padding: 10px 35px 10px 20px;
  font-size: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  position: relative;
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

button,
input[type="button"],
input[type="submit"] {
  padding: 0;
  background-color: transparent;
  border: none;
  font: inherit;
  -moz-appearance: none;
       appearance: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
}

button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
  outline: none;
}

img {
  display: block;
  max-width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

body main {
  flex-grow: 1;
}

body header, body .breadcrumb, body aside, body .shd_footer, body .simple_header {
  flex-grow: 0;
}

body > img {
  display: block;
  position: absolute;
}

@media screen and (min-width: 601px) {
  html.notIE main {
    min-width: 960px;
    width: 100%;
    margin: 0 auto;
  }
}

html.msie main {
  min-width: 960px;
  width: 100%;
  margin: 0 auto;
}

@media screen and (min-width: 601px) {
  html.notIE .g-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 78px;
  }
  html.notIE .g-header::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 156px;
    background: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transition: all .5s ease 0s;
  }
  html.notIE .g-header.m-scrolled::before {
    opacity: 1;
  }
  html.notIE .g-header__inner {
    min-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }
  html.notIE .g-header__logo {
    height: 78px;
  }
}

@media screen and (min-width: 601px) and (min-width: 1280px) {
  html.notIE .g-header__logo {
    width: 170px;
  }
}

@media screen and (min-width: 601px) and (max-width: 1279px) {
  html.notIE .g-header__logo {
    width: calc(170/1280*100vw);
  }
}

@media screen and (min-width: 601px) and (max-width: 960px) {
  html.notIE .g-header__logo {
    width: 150px;
  }
}

@media screen and (min-width: 601px) {
  html.notIE .g-header__logo a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(/haku/shared/img/logo_haku.svg) no-repeat center center;
    background-size: 120px;
  }
  html.notIE .g-header__logo a span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  html.notIE .g-header nav {
    display: flex;
    align-items: center;
  }
  html.notIE .g-header__links {
    display: flex;
    align-items: center;
  }
}

@media screen and (min-width: 601px) and (min-width: 1280px) {
  html.notIE .g-header__links {
    margin-right: 25px;
  }
}

@media screen and (min-width: 601px) and (max-width: 1279px) {
  html.notIE .g-header__links {
    margin-right: calc(25/1280*100vw);
  }
}

@media screen and (min-width: 601px) and (max-width: 960px) {
  html.notIE .g-header__links {
    margin-right: 20px;
  }
}

@media screen and (min-width: 601px) {
  html.notIE .g-header__links-item {
    font-family: 'Yu Mincho Medium', '游明朝 Medium', YuMincho Pr6, '游明朝体 Pr6', YuMincho, '游明朝体', 'Noto Serif JP', serif;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 78px;
    position: relative;
    text-decoration: none;
    cursor: pointer;
  }
}

@media screen and (min-width: 601px) and (min-width: 1280px) {
  html.notIE .g-header__links-item {
    padding: 0 25px;
  }
}

@media screen and (min-width: 601px) and (max-width: 1279px) {
  html.notIE .g-header__links-item {
    padding: 0 calc(25/1280*100vw);
  }
}

@media screen and (min-width: 601px) and (max-width: 960px) {
  html.notIE .g-header__links-item {
    padding: 0 20px;
  }
}

@media screen and (min-width: 601px) {
  html.notIE .g-header__links-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border-bottom: solid 1px #dd0046;
    opacity: 0;
    z-index: 1000;
    transition: opacity .2s ease 0s;
  }
  html.notIE .g-header__links-item:hover::before, html.notIE .g-header__links-item.m-hover::before {
    opacity: 1;
  }
  html.notIE .g-header__links-item em {
    font-style: normal;
    font-size: 15px;
    white-space: nowrap;
    position: relative;
    z-index: 1001;
  }
  html.notIE .g-header__links-item span {
    font-size: 12px;
    color: #a2a2a2;
    white-space: nowrap;
    margin-top: 5px;
    position: relative;
    z-index: 1001;
  }
  html.notIE .g-header__cp-cont {
    position: absolute;
    background-color: #fff;
    top: 78px;
    left: 0;
    right: 0;
  }
  html.notIE .g-header__cp-cont .inner {
    width: 960px;
    margin: auto;
    padding: 25px 0;
    text-align: center;
  }
  html.notIE .g-header__cp-cont .inner ul {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: left;
  }
  html.notIE .g-header__cp-cont .inner ul li {
    width: 470px;
    display: flex;
    position: relative;
    background-color: #F8F9FA;
  }
  html.notIE .g-header__cp-cont .inner ul li:nth-child(2n) {
    margin-left: 20px;
  }
  html.notIE .g-header__cp-cont .inner ul li picture {
    flex-basis: 223px;
    flex-shrink: 0;
    width: 223px;
  }
  html.notIE .g-header__cp-cont .inner ul li picture img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  html.notIE .g-header__cp-cont .inner ul li dl {
    padding: 20px;
  }
  html.notIE .g-header__cp-cont .inner ul li dt {
    margin-bottom: 10px;
  }
  html.notIE .g-header__cp-cont .inner ul li dt a {
    text-decoration: none;
    font-family: 'Yu Mincho Medium', '游明朝 Medium', YuMincho Pr6, '游明朝体 Pr6', YuMincho, '游明朝体', 'Noto Serif JP', serif;
    color: #dd0046;
  }
  html.notIE .g-header__cp-cont .inner ul li dt a::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    background-color: rgba(255, 255, 255, 0.3);
    opacity: 0;
    transition: all .2s ease 0s;
  }
  html.notIE .g-header__cp-cont .inner ul li dt a:hover::before {
    opacity: 1;
  }
  html.notIE .g-header__cp-cont .inner ul li dd {
    font-size: 11px;
  }
  html.notIE .g-header__sns {
    display: flex;
    align-items: center;
  }
}

@media screen and (min-width: 601px) and (min-width: 1280px) {
  html.notIE .g-header__sns li {
    margin-right: 30px;
  }
}

@media screen and (min-width: 601px) and (max-width: 1279px) {
  html.notIE .g-header__sns li {
    margin-right: calc(30/1280*100vw);
  }
}

@media screen and (min-width: 601px) and (max-width: 960px) {
  html.notIE .g-header__sns li {
    width: 20px;
  }
}

@media screen and (min-width: 601px) {
  html.notIE .g-header__insta {
    display: block;
    width: 22px;
    height: 22px;
  }
}

@media screen and (min-width: 601px) and (min-width: 961px) {
  html.notIE .g-header__insta {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.notIE .g-header__insta:hover {
    opacity: .7;
  }
}

@media screen and (min-width: 601px) {
  html.notIE .g-header__insta .icon {
    fill: #292929;
    transition: all .2s ease 0s;
  }
  html.notIE .g-header__insta span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  html.notIE .g-header__insta:hover .icon {
    fill: #dd0046;
  }
  html.notIE .g-header__tw {
    display: block;
    width: 22px;
    height: 22px;
  }
}

@media screen and (min-width: 601px) and (min-width: 961px) {
  html.notIE .g-header__tw {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.notIE .g-header__tw:hover {
    opacity: .7;
  }
}

@media screen and (min-width: 601px) {
  html.notIE .g-header__tw .icon {
    fill: #292929;
    transition: all .2s ease 0s;
  }
  html.notIE .g-header__tw span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  html.notIE .g-header__tw:hover .icon {
    fill: #dd0046;
  }
  html.notIE .g-header__lang {
    flex-grow: 0;
    flex-shrink: 0;
  }
}

@media screen and (min-width: 601px) and (min-width: 1280px) {
  html.notIE .g-header__lang {
    padding-right: 40px;
  }
}

@media screen and (min-width: 601px) and (max-width: 1279px) {
  html.notIE .g-header__lang {
    padding-right: calc(40/1280*100vw);
  }
}

@media screen and (min-width: 601px) and (max-width: 960px) {
  html.notIE .g-header__lang {
    padding-right: 20px;
  }
}

@media screen and (min-width: 601px) {
  html.notIE .g-header__lang dt {
    line-height: 0;
    cursor: pointer;
    height: 78px;
    display: flex;
    align-items: center;
  }
  html.notIE .g-header__lang dt .icon {
    width: 22px;
    fill: #292929;
    transition: all .2s ease 0s;
  }
  html.notIE .g-header__lang dt span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  html.notIE .g-header__lang dd {
    position: fixed;
    background-color: #fff;
    top: 78px;
    right: 0;
  }
  html.notIE .g-header__lang-item {
    display: flex;
    min-width: 145px;
    height: 50px;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all .2s ease 0s;
  }
  html.notIE .g-header__lang-item:hover {
    color: #dd0046;
  }
  html.notIE .g-header__lang:hover dt .icon {
    fill: #dd0046;
  }
  html.notIE .g-header__shopping {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 78px;
    background-color: #fff;
  }
  html.notIE .g-header__shopping button {
    width: 78px;
    height: 78px;
    background: url(/haku/shared/img/head_cart.svg) no-repeat center center;
    background-size: cover;
  }
}

@media screen and (min-width: 601px) and (min-width: 961px) {
  html.notIE .g-header__shopping button {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.notIE .g-header__shopping button:hover {
    opacity: .7;
  }
}

@media screen and (min-width: 601px) {
  html.notIE .g-header__shopping button span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
  }
}

html.msie .g-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 78px;
}

html.msie .g-header::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 156px;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transition: all .5s ease 0s;
}

html.msie .g-header.m-scrolled::before {
  opacity: 1;
}

html.msie .g-header__inner {
  min-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

html.msie .g-header__logo {
  height: 78px;
}

@media screen and (min-width: 1280px) {
  html.msie .g-header__logo {
    width: 170px;
  }
}

@media screen and (max-width: 1279px) {
  html.msie .g-header__logo {
    width: calc(170/1280*100vw);
  }
}

@media screen and (max-width: 960px) {
  html.msie .g-header__logo {
    width: 150px;
  }
}

html.msie .g-header__logo a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(/haku/shared/img/logo_haku.svg) no-repeat center center;
  background-size: 120px;
}

html.msie .g-header__logo a span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

html.msie .g-header nav {
  display: flex;
  align-items: center;
}

html.msie .g-header__links {
  display: flex;
  align-items: center;
}

@media screen and (min-width: 1280px) {
  html.msie .g-header__links {
    margin-right: 25px;
  }
}

@media screen and (max-width: 1279px) {
  html.msie .g-header__links {
    margin-right: calc(25/1280*100vw);
  }
}

@media screen and (max-width: 960px) {
  html.msie .g-header__links {
    margin-right: 20px;
  }
}

html.msie .g-header__links-item {
  font-family: 'Yu Mincho Medium', '游明朝 Medium', YuMincho Pr6, '游明朝体 Pr6', YuMincho, '游明朝体', 'Noto Serif JP', serif;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 78px;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

@media screen and (min-width: 1280px) {
  html.msie .g-header__links-item {
    padding: 0 25px;
  }
}

@media screen and (max-width: 1279px) {
  html.msie .g-header__links-item {
    padding: 0 calc(25/1280*100vw);
  }
}

@media screen and (max-width: 960px) {
  html.msie .g-header__links-item {
    padding: 0 20px;
  }
}

html.msie .g-header__links-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border-bottom: solid 1px #dd0046;
  opacity: 0;
  z-index: 1000;
  transition: opacity .2s ease 0s;
}

html.msie .g-header__links-item:hover::before, html.msie .g-header__links-item.m-hover::before {
  opacity: 1;
}

html.msie .g-header__links-item em {
  font-style: normal;
  font-size: 15px;
  white-space: nowrap;
  position: relative;
  z-index: 1001;
}

html.msie .g-header__links-item span {
  font-size: 12px;
  color: #a2a2a2;
  white-space: nowrap;
  margin-top: 5px;
  position: relative;
  z-index: 1001;
}

html.msie .g-header__cp-cont {
  position: absolute;
  background-color: #fff;
  top: 78px;
  left: 0;
  right: 0;
}

html.msie .g-header__cp-cont .inner {
  width: 960px;
  margin: auto;
  padding: 25px 0;
  text-align: center;
}

html.msie .g-header__cp-cont .inner ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: left;
}

html.msie .g-header__cp-cont .inner ul li {
  width: 470px;
  display: flex;
  position: relative;
  background-color: #F8F9FA;
}

html.msie .g-header__cp-cont .inner ul li:nth-child(2n) {
  margin-left: 20px;
}

html.msie .g-header__cp-cont .inner ul li picture {
  flex-basis: 223px;
  flex-shrink: 0;
  width: 223px;
}

html.msie .g-header__cp-cont .inner ul li picture img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

html.msie .g-header__cp-cont .inner ul li dl {
  padding: 20px;
}

html.msie .g-header__cp-cont .inner ul li dt {
  margin-bottom: 10px;
}

html.msie .g-header__cp-cont .inner ul li dt a {
  text-decoration: none;
  font-family: 'Yu Mincho Medium', '游明朝 Medium', YuMincho Pr6, '游明朝体 Pr6', YuMincho, '游明朝体', 'Noto Serif JP', serif;
  color: #dd0046;
}

html.msie .g-header__cp-cont .inner ul li dt a::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  background-color: rgba(255, 255, 255, 0.3);
  opacity: 0;
  transition: all .2s ease 0s;
}

html.msie .g-header__cp-cont .inner ul li dt a:hover::before {
  opacity: 1;
}

html.msie .g-header__cp-cont .inner ul li dd {
  font-size: 11px;
}

html.msie .g-header__sns {
  display: flex;
  align-items: center;
}

@media screen and (min-width: 1280px) {
  html.msie .g-header__sns li {
    margin-right: 30px;
  }
}

@media screen and (max-width: 1279px) {
  html.msie .g-header__sns li {
    margin-right: calc(30/1280*100vw);
  }
}

@media screen and (max-width: 960px) {
  html.msie .g-header__sns li {
    width: 20px;
  }
}

html.msie .g-header__insta {
  display: block;
  width: 22px;
  height: 22px;
}

@media screen and (min-width: 961px) {
  html.msie .g-header__insta {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.msie .g-header__insta:hover {
    opacity: .7;
  }
}

html.msie .g-header__insta .icon {
  fill: #292929;
  transition: all .2s ease 0s;
}

html.msie .g-header__insta span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

html.msie .g-header__insta:hover .icon {
  fill: #dd0046;
}

html.msie .g-header__tw {
  display: block;
  width: 22px;
  height: 22px;
}

@media screen and (min-width: 961px) {
  html.msie .g-header__tw {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.msie .g-header__tw:hover {
    opacity: .7;
  }
}

html.msie .g-header__tw .icon {
  fill: #292929;
  transition: all .2s ease 0s;
}

html.msie .g-header__tw span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

html.msie .g-header__tw:hover .icon {
  fill: #dd0046;
}

html.msie .g-header__lang {
  flex-grow: 0;
  flex-shrink: 0;
}

@media screen and (min-width: 1280px) {
  html.msie .g-header__lang {
    padding-right: 40px;
  }
}

@media screen and (max-width: 1279px) {
  html.msie .g-header__lang {
    padding-right: calc(40/1280*100vw);
  }
}

@media screen and (max-width: 960px) {
  html.msie .g-header__lang {
    padding-right: 20px;
  }
}

html.msie .g-header__lang dt {
  line-height: 0;
  cursor: pointer;
  height: 78px;
  display: flex;
  align-items: center;
}

html.msie .g-header__lang dt .icon {
  width: 22px;
  fill: #292929;
  transition: all .2s ease 0s;
}

html.msie .g-header__lang dt span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

html.msie .g-header__lang dd {
  position: fixed;
  background-color: #fff;
  top: 78px;
  right: 0;
}

html.msie .g-header__lang-item {
  display: flex;
  min-width: 145px;
  height: 50px;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: all .2s ease 0s;
}

html.msie .g-header__lang-item:hover {
  color: #dd0046;
}

html.msie .g-header__lang:hover dt .icon {
  fill: #dd0046;
}

html.msie .g-header__shopping {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 78px;
  background-color: #fff;
}

html.msie .g-header__shopping button {
  width: 78px;
  height: 78px;
  background: url(/haku/shared/img/head_cart.svg) no-repeat center center;
  background-size: cover;
}

@media screen and (min-width: 961px) {
  html.msie .g-header__shopping button {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.msie .g-header__shopping button:hover {
    opacity: .7;
  }
}

html.msie .g-header__shopping button span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

@media screen and (max-width: 600px) {
  html.notIE .g-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }
  html.notIE .g-header::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 55px;
    background: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transition: all .5s ease 0s;
    z-index: 1000;
  }
  html.notIE .g-header.m-scrolled::before {
    opacity: 1;
  }
  html.notIE .g-header__inner {
    position: relative;
    z-index: 1001;
  }
  html.notIE .g-header__logo {
    width: 115px;
    height: 55px;
  }
  html.notIE .g-header__logo a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(/haku/shared/img/logo_haku.svg) no-repeat center center;
    background-size: 85px;
  }
  html.notIE .g-header__logo a span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  html.notIE .g-header nav {
    background-color: #fff;
    position: fixed;
    padding: calc(60/750*100vw) calc(50 / 750 * 100vw) calc(50 / 750 * 100vw);
    top: 55px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
  }
  html.notIE .g-header__links {
    border-bottom: solid 1px #e3e3e3;
  }
  html.notIE .g-header__links > li {
    border-top: solid 1px #e3e3e3;
  }
  html.notIE .g-header__links-item {
    font-family: 'Yu Mincho Medium', '游明朝 Medium', YuMincho Pr6, '游明朝体 Pr6', YuMincho, '游明朝体', 'Noto Serif JP', serif;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
    width: 100%;
    height: 70px;
    text-decoration: none;
  }
  html.notIE .g-header__links-item em {
    font-style: normal;
    font-size: 18px;
    white-space: nowrap;
  }
  html.notIE .g-header__links-item span {
    font-size: 10px;
    color: #a2a2a2;
    white-space: nowrap;
    margin-left: 2em;
  }
  html.notIE .g-header .js-g-header__cp {
    position: relative;
  }
  html.notIE .g-header .js-g-header__cp::before {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 1px;
    background-color: #000;
    right: 0;
    top: 35px;
  }
  html.notIE .g-header .js-g-header__cp::after {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 1px;
    background-color: #000;
    right: 0;
    top: 35px;
    transform: rotate(-90deg);
    transition: all .2s ease 0s;
  }
  html.notIE .g-header .js-g-header__cp.m-opened::after {
    transform: rotate(0deg);
  }
  html.notIE .g-header__cp-cont ul li {
    width: 100%;
    display: flex;
    position: relative;
    background-color: #F8F9FA;
  }
  html.notIE .g-header__cp-cont ul li:nth-child(n + 2) {
    margin-top: calc(20 / 750 * 100vw);
  }
  html.notIE .g-header__cp-cont ul li picture {
    flex-basis: 30%;
    flex-shrink: 0;
    width: 30%;
  }
  html.notIE .g-header__cp-cont ul li picture img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  html.notIE .g-header__cp-cont ul li dl {
    padding: calc(20 / 750 * 100vw);
  }
  html.notIE .g-header__cp-cont ul li dt {
    margin-bottom: calc(20 / 750 * 100vw);
  }
  html.notIE .g-header__cp-cont ul li dt a {
    text-decoration: none;
    font-family: 'Yu Mincho Medium', '游明朝 Medium', YuMincho Pr6, '游明朝体 Pr6', YuMincho, '游明朝体', 'Noto Serif JP', serif;
    font-size: 11px;
    color: #dd0046;
  }
  html.notIE .g-header__cp-cont ul li dt a::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    background-color: transparent;
  }
  html.notIE .g-header__cp-cont ul li dd {
    font-size: 10px;
  }
  html.notIE .g-header__sns {
    display: flex;
    align-items: center;
    padding: calc(50 / 750 * 100vw) 0;
  }
  html.notIE .g-header__sns li {
    width: 50%;
  }
  html.notIE .g-header__insta {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(140 / 750 * 100vw);
    height: calc(140 / 750 * 100vw);
    background-color: #fff;
    border: solid 1px #dd0046;
    border-radius: 50%;
    margin: auto;
  }
  html.notIE .g-header__insta .icon {
    width: calc(70 / 750 * 100vw);
    fill: #dd0046;
    transition: all .2s ease 0s;
  }
  html.notIE .g-header__insta span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  html.notIE .g-header__tw {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(140 / 750 * 100vw);
    height: calc(140 / 750 * 100vw);
    background-color: #fff;
    border: solid 1px #dd0046;
    border-radius: 50%;
    margin: auto;
  }
  html.notIE .g-header__tw .icon {
    width: calc(62 / 750 * 100vw);
    fill: #dd0046;
    transition: all .2s ease 0s;
  }
  html.notIE .g-header__tw span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  html.notIE .g-header__lang {
    margin-top: calc(70 / 750 * 100vw);
  }
  html.notIE .g-header__lang dt {
    display: none;
  }
  html.notIE .g-header__lang ul {
    display: flex;
    justify-content: space-between;
  }
  html.notIE .g-header__lang ul a {
    font-family: 'Yu Mincho Medium', '游明朝 Medium', YuMincho Pr6, '游明朝体 Pr6', YuMincho, '游明朝体', 'Noto Serif JP', serif;
    font-size: 12px;
    line-height: 1;
    display: inline-block;
    padding-bottom: 3px;
    position: relative;
    text-decoration: none;
  }
  html.notIE .g-header__lang ul a::after {
    content: '';
    display: block;
    position: absolute;
    height: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
  }
  html.notIE .g-header__shopping {
    position: absolute;
    top: 0;
    right: 55px;
  }
  html.notIE .g-header__shopping button {
    width: 55px;
    height: 55px;
    background: url(/haku/shared/img/head_cart.svg) no-repeat center center;
    background-size: cover;
  }
  html.notIE .g-header__shopping button span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  html.notIE .g-header__menu {
    position: absolute;
    top: 0;
    right: 0;
  }
  html.notIE .g-header__menu button {
    width: 55px;
    height: 55px;
    background: #000;
    position: relative;
  }
  html.notIE .g-header__menu button::before, html.notIE .g-header__menu button::after,
  html.notIE .g-header__menu button span {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    width: 20px;
    height: 1px;
    color: #fff;
    overflow: hidden;
    opacity: 1;
    transform-origin: center center;
    transition: all .2s ease 0s;
  }
  html.notIE .g-header__menu button::before {
    content: '';
    transform: translate(-50%, -7px);
  }
  html.notIE .g-header__menu button::after {
    content: '';
    transform: translate(-50%, 7px);
  }
  html.notIE .g-header__menu button.m-opened::before {
    transform: translate(-50%, 0) rotate(45deg);
  }
  html.notIE .g-header__menu button.m-opened::after {
    transform: translate(-50%, 0) rotate(135deg);
  }
  html.notIE .g-header__menu button.m-opened span {
    opacity: 0;
  }
}

@media screen and (min-width: 601px) {
  html.notIE .simple_header header {
    background-color: #fff;
    display: flex;
    width: 100%;
    height: 107px;
    align-items: center;
    justify-content: center;
  }
  html.notIE .simple_header header img {
    display: block;
    width: 195px;
  }
}

html.msie .simple_header header {
  background-color: #fff;
  display: flex;
  width: 100%;
  height: 107px;
  align-items: center;
  justify-content: center;
}

html.msie .simple_header header img {
  display: block;
  width: 195px;
}

@media screen and (max-width: 600px) {
  html.notIE .simple_header header {
    background-color: #fff;
    display: flex;
    width: 100%;
    height: calc(107 / 750 * 100vw);
    align-items: center;
    justify-content: center;
  }
  html.notIE .simple_header header img {
    display: block;
    width: calc(195 / 750 * 100vw);
  }
}

@media screen and (min-width: 601px) {
  html.notIE .g-footer {
    background: url(/haku/shared/img/bg_footer.jpg) no-repeat center top;
    background-size: cover;
  }
  html.notIE .g-footer__inner {
    min-width: 960px;
    margin: 0 auto;
    padding: 90px 0 70px;
    text-align: center;
    position: relative;
  }
  html.notIE .g-footer__sns {
    margin: 0 auto;
  }
  html.notIE .g-footer__sns dt {
    font-family: 'Yu Mincho Medium', '游明朝 Medium', YuMincho Pr6, '游明朝体 Pr6', YuMincho, '游明朝体', 'Noto Serif JP', serif;
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    margin-bottom: 50px;
  }
  html.notIE .g-footer__sns dd {
    display: flex;
    justify-content: center;
  }
  html.notIE .g-footer__insta {
    flex-basis: 92px;
    flex-shrink: 0;
    flex-grow: 0;
  }
  html.notIE .g-footer__insta a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 92px;
    height: 92px;
    border: solid 1px #dd0046;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
  }
}

@media screen and (min-width: 601px) and (min-width: 961px) {
  html.notIE .g-footer__insta a {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.notIE .g-footer__insta a:hover {
    opacity: .7;
  }
}

@media screen and (min-width: 601px) {
  html.notIE .g-footer__insta a .icon {
    width: 46px;
    fill: #dd0046;
  }
  html.notIE .g-footer__insta a span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  html.notIE .g-footer__tw {
    flex-basis: 92px;
    flex-shrink: 0;
    flex-grow: 0;
    margin-left: 40px;
  }
  html.notIE .g-footer__tw a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 92px;
    height: 92px;
    border: solid 1px #dd0046;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
  }
}

@media screen and (min-width: 601px) and (min-width: 961px) {
  html.notIE .g-footer__tw a {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.notIE .g-footer__tw a:hover {
    opacity: .7;
  }
}

@media screen and (min-width: 601px) {
  html.notIE .g-footer__tw a .icon {
    width: 41px;
    fill: #dd0046;
  }
  html.notIE .g-footer__tw a span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  html.notIE .g-footer__links {
    margin-top: 120px;
    display: flex;
    justify-content: center;
  }
  html.notIE .g-footer__links li a {
    display: inline-block;
    text-decoration: none;
    font-size: 14px;
    font-family: 'Yu Mincho Medium', '游明朝 Medium', YuMincho Pr6, '游明朝体 Pr6', YuMincho, '游明朝体', 'Noto Serif JP', serif;
    font-style: normal;
    font-weight: 500;
  }
  html.notIE .g-footer__links li + li {
    margin-left: 10em;
  }
  html.notIE .g-footer__banner {
    margin: 50px auto 0;
    width: 500px;
  }
  html.notIE .g-footer__banner li a {
    display: block;
  }
}

@media screen and (min-width: 601px) and (min-width: 961px) {
  html.notIE .g-footer__banner li a {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.notIE .g-footer__banner li a:hover {
    opacity: .7;
  }
}

@media screen and (min-width: 601px) {
  html.notIE .g-footer__banner li img {
    display: block;
    width: 100%;
  }
  html.notIE .g-footer__pagetop {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    top: -30px;
    right: 50px;
  }
  html.notIE .g-footer__pagetop button {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: url(/haku/shared/img/btn_up.svg) no-repeat center center;
    background-size: contain;
  }
}

@media screen and (min-width: 601px) and (min-width: 961px) {
  html.notIE .g-footer__pagetop button {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.notIE .g-footer__pagetop button:hover {
    opacity: .7;
  }
}

@media screen and (min-width: 601px) {
  html.notIE .g-footer__pagetop button span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
  }
}

html.msie .g-footer {
  background: url(/haku/shared/img/bg_footer.jpg) no-repeat center top;
  background-size: cover;
}

html.msie .g-footer__inner {
  min-width: 960px;
  margin: 0 auto;
  padding: 90px 0 70px;
  text-align: center;
  position: relative;
}

html.msie .g-footer__sns {
  margin: 0 auto;
}

html.msie .g-footer__sns dt {
  font-family: 'Yu Mincho Medium', '游明朝 Medium', YuMincho Pr6, '游明朝体 Pr6', YuMincho, '游明朝体', 'Noto Serif JP', serif;
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  margin-bottom: 50px;
}

html.msie .g-footer__sns dd {
  display: flex;
  justify-content: center;
}

html.msie .g-footer__insta {
  flex-basis: 92px;
  flex-shrink: 0;
  flex-grow: 0;
}

html.msie .g-footer__insta a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 92px;
  height: 92px;
  border: solid 1px #dd0046;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}

@media screen and (min-width: 961px) {
  html.msie .g-footer__insta a {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.msie .g-footer__insta a:hover {
    opacity: .7;
  }
}

html.msie .g-footer__insta a .icon {
  width: 46px;
  fill: #dd0046;
}

html.msie .g-footer__insta a span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

html.msie .g-footer__tw {
  flex-basis: 92px;
  flex-shrink: 0;
  flex-grow: 0;
  margin-left: 40px;
}

html.msie .g-footer__tw a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 92px;
  height: 92px;
  border: solid 1px #dd0046;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}

@media screen and (min-width: 961px) {
  html.msie .g-footer__tw a {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.msie .g-footer__tw a:hover {
    opacity: .7;
  }
}

html.msie .g-footer__tw a .icon {
  width: 41px;
  fill: #dd0046;
}

html.msie .g-footer__tw a span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

html.msie .g-footer__links {
  margin-top: 120px;
  display: flex;
  justify-content: center;
}

html.msie .g-footer__links li a {
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  font-family: 'Yu Mincho Medium', '游明朝 Medium', YuMincho Pr6, '游明朝体 Pr6', YuMincho, '游明朝体', 'Noto Serif JP', serif;
  font-style: normal;
  font-weight: 500;
}

html.msie .g-footer__links li + li {
  margin-left: 10em;
}

html.msie .g-footer__banner {
  margin: 50px auto 0;
  width: 500px;
}

html.msie .g-footer__banner li a {
  display: block;
}

@media screen and (min-width: 961px) {
  html.msie .g-footer__banner li a {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.msie .g-footer__banner li a:hover {
    opacity: .7;
  }
}

html.msie .g-footer__banner li img {
  display: block;
  width: 100%;
}

html.msie .g-footer__pagetop {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
  top: -30px;
  right: 50px;
}

html.msie .g-footer__pagetop button {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: url(/haku/shared/img/btn_up.svg) no-repeat center center;
  background-size: contain;
}

@media screen and (min-width: 961px) {
  html.msie .g-footer__pagetop button {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.msie .g-footer__pagetop button:hover {
    opacity: .7;
  }
}

html.msie .g-footer__pagetop button span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

@media screen and (max-width: 600px) {
  html.notIE .g-footer {
    background: url(/haku/shared/img/bg_footer.jpg) no-repeat center top;
    background-size: cover;
  }
  html.notIE .g-footer__inner {
    padding: calc(135 / 750 * 100vw) calc(50 / 750 * 100vw) calc(90 / 750 * 100vw);
    text-align: center;
  }
  html.notIE .g-footer__sns {
    margin: 0 auto;
  }
  html.notIE .g-footer__sns dt {
    font-family: 'Yu Mincho Medium', '游明朝 Medium', YuMincho Pr6, '游明朝体 Pr6', YuMincho, '游明朝体', 'Noto Serif JP', serif;
    font-style: normal;
    font-weight: 500;
    font-size: 23px;
    line-height: 30px;
    margin-bottom: calc(50 / 750 * 100vw);
  }
  html.notIE .g-footer__sns dd {
    display: flex;
    justify-content: center;
  }
  html.notIE .g-footer__insta {
    flex-basis: 68px;
    flex-shrink: 0;
    flex-grow: 0;
  }
  html.notIE .g-footer__insta a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 68px;
    height: 68px;
    border: solid 1px #dd0046;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
  }
  html.notIE .g-footer__insta a .icon {
    width: 34px;
    fill: #dd0046;
  }
  html.notIE .g-footer__insta a span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  html.notIE .g-footer__tw {
    flex-basis: 68px;
    flex-shrink: 0;
    flex-grow: 0;
    margin-left: calc(60 / 750 * 100vw);
  }
  html.notIE .g-footer__tw a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 68px;
    height: 68px;
    border: solid 1px #dd0046;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
  }
  html.notIE .g-footer__tw a .icon {
    width: 30px;
    fill: #dd0046;
  }
  html.notIE .g-footer__tw a span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  html.notIE .g-footer__links {
    margin-top: calc(120 / 750 * 100vw);
    text-align: center;
  }
  html.notIE .g-footer__links li a {
    display: inline-block;
    text-decoration: none;
    font-size: 18px;
    line-height: 1;
    font-family: 'Yu Mincho Medium', '游明朝 Medium', YuMincho Pr6, '游明朝体 Pr6', YuMincho, '游明朝体', 'Noto Serif JP', serif;
    font-style: normal;
    font-weight: 500;
  }
  html.notIE .g-footer__links li + li {
    margin-top: calc(90 / 750 * 100vw);
  }
  html.notIE .g-footer__banner {
    margin: calc(130 / 750 * 100vw) auto 0;
  }
  html.notIE .g-footer__banner li a {
    display: block;
  }
  html.notIE .g-footer__banner li img {
    display: block;
    width: 100%;
  }
  html.notIE .g-footer__pagetop {
    display: none;
  }
}

.loc-h1 {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sp-display-block {
  display: block;
}

@media screen and (min-width: 601px) {
  html.notIE .sp-display-block {
    display: none;
  }
}

html.msie .sp-display-block {
  display: none;
}

.pc-display-block {
  display: none;
}

@media screen and (min-width: 601px) {
  html.notIE .pc-display-block {
    display: block;
  }
}

html.msie .pc-display-block {
  display: block;
}

.sp-br {
  display: inline-block;
}

@media screen and (min-width: 601px) {
  html.notIE .sp-br {
    display: none;
  }
}

html.msie .sp-br {
  display: none;
}

.pc-br {
  display: none;
}

@media screen and (min-width: 601px) {
  html.notIE .pc-br {
    display: inline-block;
  }
}

html.msie .pc-br {
  display: inline-block;
}

.kv {
  position: relative;
  width: 100%;
  height: 91.5vw;
  z-index: 1;
}

.kv_inner {
  background-image: url(/haku/laboratory/img/kv.jpg);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1920px;
  height: 91.5vw;
}

.kv_inner svg {
  width: 49.5%;
  padding-top: 5%;
}

@media screen and (min-width: 601px) {
  html.notIE .kv {
    height: 618px;
  }
  html.notIE .kv_inner {
    height: 618px;
  }
  html.notIE .kv_inner svg {
    width: auto;
    padding-top: 0;
  }
}

html.msie .kv {
  height: 618px;
}

html.msie .kv_inner {
  height: 618px;
}

html.msie .kv_inner svg {
  width: auto;
  padding-top: 0;
}

#particles-js {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  background-image: url("");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.stack {
  position: relative;
  z-index: 1;
}

.menu {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  position: relative;
  z-index: 5;
}

.menu .menu-list__item + .menu-list__item {
  border-top: 1px solid #fff;
}

.menu .menu-list__link {
  display: flex;
  align-items: center;
}

.menu .menu-list__link:after {
  background-image: url(../img/arrow_menu01.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  width: 17px;
  height: 9px;
  margin-left: auto;
}

.menu-list {
  background: linear-gradient(#979ca7 0%, #555961 100%);
  width: 100%;
  font-size: 17px;
}

.menu-list__link {
  display: block;
  color: #fff;
  font-family: "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
  text-decoration: none;
  padding: 12px 38px;
}

.menu-list__link span {
  display: inline-block;
  font-family: "Perpetua", "Baskerville", "Big Caslon", "Palatino Linotype", "Palatino", "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
  margin-right: 35px;
}

@media screen and (min-width: 601px) {
  html.notIE .menu {
    background: linear-gradient(#979ca7 0%, #555961 100%);
    box-shadow: none;
    max-width: 960px;
    left: 0;
    margin: -67px auto 0;
    position: relative;
  }
  html.notIE .menu-trigger {
    display: none;
  }
  html.notIE .menu-list {
    background: linear-gradient(275deg, #9ca1ac 0%, #4e525a 100%);
    box-shadow: 0;
    display: flex;
    padding: 0;
    position: relative;
    opacity: 1;
    visibility: visible;
  }
  html.notIE .menu-list__item {
    width: 33.33%;
    text-align: center;
  }
  html.notIE .menu-list__item + .menu-list__item {
    border-top: 0;
  }
  html.notIE .menu-list__item:not(:first-of-type) {
    border-left: 1px solid #fff;
  }
  html.notIE .menu-list__link {
    justify-content: center;
    flex-direction: column;
    font-family: "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
    font-size: 18px;
    line-height: 1;
    padding: 20px 0;
  }
  html.notIE .menu-list__link:after {
    margin-top: 18px;
    margin-left: initial;
  }
  html.notIE .menu-list__link span {
    display: block;
    font-family: "Perpetua", "Baskerville", "Big Caslon", "Palatino Linotype", "Palatino", "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
    font-size: 20px;
    margin-right: 0;
    margin-bottom: 10px;
  }
}

html.msie .menu {
  background: linear-gradient(#979ca7 0%, #555961 100%);
  box-shadow: none;
  max-width: 960px;
  left: 0;
  margin: -67px auto 0;
  position: relative;
}

html.msie .menu-trigger {
  display: none;
}

html.msie .menu-list {
  background: linear-gradient(275deg, #9ca1ac 0%, #4e525a 100%);
  box-shadow: 0;
  display: flex;
  padding: 0;
  position: relative;
  opacity: 1;
  visibility: visible;
}

html.msie .menu-list__item {
  width: 33.33%;
  text-align: center;
}

html.msie .menu-list__item + .menu-list__item {
  border-top: 0;
}

html.msie .menu-list__item:not(:first-of-type) {
  border-left: 1px solid #fff;
}

html.msie .menu-list__link {
  justify-content: center;
  flex-direction: column;
  font-family: "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
  font-size: 18px;
  line-height: 1;
  padding: 20px 0;
}

html.msie .menu-list__link:after {
  margin-top: 18px;
  margin-left: initial;
}

html.msie .menu-list__link span {
  display: block;
  font-family: "Perpetua", "Baskerville", "Big Caslon", "Palatino Linotype", "Palatino", "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
  font-size: 20px;
  margin-right: 0;
  margin-bottom: 10px;
}

.sp-menu {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  z-index: 100;
}

.sp-menu .menu-trigger,
.sp-menu .menu-close-trigger {
  position: fixed;
  top: 0;
  right: 0;
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sp-menu .menu-trigger svg,
.sp-menu .menu-close-trigger svg {
  width: 40%;
}

.sp-menu .menu-trigger {
  background: linear-gradient(#b9bdc4 0%, #8b8f96 100%);
}

.sp-menu .menu-close-trigger {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.43, 0.05, 0.17, 1), visibility 0.25s cubic-bezier(0.43, 0.05, 0.17, 1);
  z-index: 102;
}

.sp-menu .menu-list {
  background: linear-gradient(#979ca7 0%, #555961 100%);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
  font-size: 21px;
  padding: 40px 0 30px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.43, 0.05, 0.17, 1), visibility 0.25s cubic-bezier(0.43, 0.05, 0.17, 1);
}

.sp-menu:before {
  background-color: rgba(0, 0, 0, 0.7);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 50;
  transition: opacity 0.25s cubic-bezier(0.43, 0.05, 0.17, 1), visibility 0.25s cubic-bezier(0.43, 0.05, 0.17, 1);
}

.sp-menu.is-open, .sp-menu.is-open:before,
.sp-menu.is-open .menu-list,
.sp-menu.is-open .menu-close-trigger {
  visibility: visible;
  opacity: 1;
}

@media screen and (min-width: 601px) {
  html.notIE .sp-menu {
    display: none;
  }
}

html.msie .sp-menu {
  display: none;
}

.main {
  background-color: #fff;
  position: relative;
}

.stack > * + * {
  margin-top: calc(116 / 750 * 100vw);
}

@media screen and (min-width: 601px) {
  html.notIE .stack > * + * {
    margin-top: 116px;
  }
}

html.msie .stack > * + * {
  margin-top: 116px;
}

.catch {
  padding: calc(80 / 750 * 100vw) 32px 0;
  text-align: center;
  font-family: 'Yu Mincho Medium', '游明朝 Medium', YuMincho Pr6, '游明朝体 Pr6', YuMincho, '游明朝体', 'Noto Serif JP', serif;
  color: #5f696e;
  font-size: 23px;
  line-height: calc(99 / 46);
  transition: opacity 2.5s cubic-bezier(0.43, 0.05, 0.17, 1), transform 2.5s cubic-bezier(0.43, 0.05, 0.17, 1);
  opacity: 0;
  transform: translateY(35px);
}

.catch.is-show {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (min-width: 601px) {
  html.notIE .catch {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 90px 0 0;
    width: 100%;
    font-size: 47px;
    line-height: calc(93 / 47);
    transition: opacity 2.5s cubic-bezier(0.43, 0.05, 0.17, 1), transform 2.5s cubic-bezier(0.43, 0.05, 0.17, 1);
    opacity: 0;
    transform: translateY(35px);
  }
  html.notIE .catch.is-show {
    opacity: 1;
    transform: translateY(0);
  }
}

html.msie .catch {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 90px 0 0;
  width: 100%;
  font-size: 47px;
  line-height: calc(93 / 47);
  transition: opacity 2.5s cubic-bezier(0.43, 0.05, 0.17, 1), transform 2.5s cubic-bezier(0.43, 0.05, 0.17, 1);
  opacity: 0;
  transform: translateY(35px);
}

html.msie .catch.is-show {
  opacity: 1;
  transform: translateY(0);
}

.lead {
  font-family: "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
  font-size: 21px;
  padding: 52px 0;
  text-align: center;
}

@media screen and (min-width: 601px) {
  html.notIE .lead {
    font-size: 31px;
    padding: 54px;
  }
}

html.msie .lead {
  font-size: 31px;
  padding: 54px;
}

.pagenation {
  display: none;
  background: linear-gradient(#979ca7 0%, #555961 100%);
  width: 50px;
  height: 375px;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto 0;
  z-index: 105;
}

.pagenation-prev,
.pagenation-next {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 100%;
}

.pagenation-list {
  width: 100%;
}

.pagenation-list__item {
  position: relative;
}

.pagenation-list__item:before {
  background-color: #fff;
  border-radius: 50%;
  content: "";
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.43, 0.05, 0.17, 1);
}

.pagenation-list__item path {
  transition: stroke 0.25s cubic-bezier(0.43, 0.05, 0.17, 1);
}

.pagenation-list__item.is-active path {
  stroke: #5F696E;
}

.pagenation-list__item.is-active:before {
  opacity: 1;
}

.pagenation-list__link {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 55px;
  text-decoration: none;
  position: relative;
  z-index: 1;
}

.pagenation-list__item.is-active .pagenation-list__link {
  color: #5F696E;
}

@media screen and (min-width: 601px) {
  html.notIE .pagenation {
    display: flex;
  }
}

html.msie .pagenation {
  display: flex;
}

.section {
  counter-increment: section;
}

.section-header {
  color: #5F696E;
  font-size: 21px;
  font-family: "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
  text-align: center;
  line-height: 1;
  margin-bottom: 26px;
}

.section-header:before {
  content: "0" counter(section);
  font-family: "Perpetua", "Baskerville", "Big Caslon", "Palatino Linotype", "Palatino", "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
  font-size: 70px;
  font-weight: 400;
  display: block;
  margin-bottom: 12px;
}

@media screen and (min-width: 601px) {
  html.notIE .section-header {
    font-size: 32px;
    font-family: "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
    margin-bottom: 52px;
  }
  html.notIE .section-header:before {
    font-size: 93px;
    margin-bottom: 0;
  }
}

html.msie .section-header {
  font-size: 32px;
  font-family: "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
  margin-bottom: 52px;
}

html.msie .section-header:before {
  font-size: 93px;
  margin-bottom: 0;
}

.container {
  width: 100%;
  padding: 0 20px;
}

@media screen and (min-width: 601px) {
  html.notIE .container {
    max-width: 1020px;
    padding: 0 40px;
    margin: 0 auto;
  }
}

html.msie .container {
  max-width: 1020px;
  padding: 0 40px;
  margin: 0 auto;
}

@media screen and (max-width: 600px) {
  html.notIE .box-flex + .box-flex {
    margin-top: calc(40 / 750 * 100vw);
  }
  html.notIE .box-flex picture {
    display: block;
    width: calc(550 / 750 * 100vw);
    margin: calc(40 / 750 * 100vw) auto 0;
  }
  html.notIE .box-flex.m-sp-reverse {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 0;
  }
}

.box {
  padding: 24px 16px;
}

.box.bg-gray {
  background-color: rgba(247, 247, 248, 0.75);
}

.box.bg-gray.arrow {
  position: relative;
}

.box.bg-gray.arrow:after {
  border-top: 30px solid rgba(247, 247, 248, 0.75);
  border-right: 40px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 40px solid transparent;
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
}

.box.history-box {
  padding: 30px 16px;
}

.box.component-box {
  padding: 0;
}

.box-hr {
  border-top: solid 2px #000;
  margin: calc(50 / 750 * 100vw) 0;
}

.box + .box {
  margin-top: 50px;
}

.box-title {
  border-left: 2px solid #000;
  display: block;
  font-size: 18px;
  font-family: "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
  font-weight: 500;
  padding-left: 6px;
}

.box-title em {
  font-style: normal;
  color: #dd0046;
  display: inline-block;
  border: solid 1px #dd0046;
  line-height: 1;
  padding: .3em .5em;
}

.box-title + .box-picture {
  margin-bottom: 20px;
}

.box-sub-title {
  display: block;
  font-size: 15px;
  text-align: center;
  margin-top: 15px;
}

.box-inner {
  margin-top: 20px;
}

.box-inner p {
  letter-spacing: 0.04em;
}

.box-inner p + p {
  margin-top: 20px;
}

.box-profile {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-family: "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
  font-size: 16px;
}

.box-profile__name {
  margin-top: 20px;
}

.box-lead {
  font-size: 13px;
}

.box-figure {
  margin-top: 15px;
}

.box-figure + .box-text {
  margin-top: 15px;
}

.box-picture {
  margin-top: 20px;
}

.with-picture {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 601px) {
  html.notIE .box {
    padding: 50px 48px;
  }
  html.notIE .box.history-box {
    padding: 35px 40px;
  }
  html.notIE .box.component-box {
    padding: 70px 48px;
  }
  html.notIE .box-hr {
    border-top: solid 3px #000;
    margin: 60px 0;
  }
  html.notIE .box + .box {
    margin-top: 29px;
  }
  html.notIE .box-title {
    font-size: 28px;
    letter-spacing: -0.02em;
    padding-left: 12px;
    margin-bottom: 44px;
  }
  html.notIE .box-title em {
    font-size: .9em;
  }
  html.notIE .box-sub-title {
    font-size: 25px;
    margin-top: 30px;
  }
  html.notIE .box-inner p {
    font-size: 14px;
  }
  html.notIE .box-inner p + p {
    margin-top: 25px;
  }
  html.notIE .box-lead {
    font-size: 16px;
    text-align: center;
    line-height: 2;
  }
  html.notIE .box-figure {
    margin-top: 25px;
  }
  html.notIE .box-figure img {
    width: 100%;
  }
  html.notIE .box-figure + .box-text {
    margin-top: 25px;
  }
  html.notIE .box-picture {
    width: 41%;
    margin-top: 0;
    margin-left: 3%;
    flex-shrink: 0;
  }
  html.notIE .box-picture img {
    width: 100%;
  }
  html.notIE .box-flex {
    display: flex;
    justify-content: space-between;
  }
  html.notIE .box-flex + .box-flex {
    margin-top: 40px;
  }
  html.notIE .box-flex-texts, html.notIE .box-flex-figs {
    display: block;
    flex-basis: 416px;
    flex-shrink: 0;
    flex-grow: 0;
  }
  html.notIE .box-flex-texts picture, html.notIE .box-flex-figs picture {
    display: block;
  }
  html.notIE .box-flex-texts picture + picture, html.notIE .box-flex-figs picture + picture {
    margin-top: 40px;
  }
  html.notIE .box-flex-texts p + picture {
    display: block;
    margin-top: 40px;
  }
  html.notIE .box-inner .box-profile {
    flex-direction: row;
    align-items: baseline;
    font-size: 20px;
  }
  html.notIE .box-profile__affiliation {
    width: 100%;
  }
  html.notIE .box-profile__position {
    font-size: 14px;
    margin-left: 10px;
    order: 3;
  }
  html.notIE .box-profile__name {
    margin-top: 0;
  }
  html.notIE .with-picture {
    flex-direction: row;
  }
  html.notIE .with-picture .box-inner {
    margin-top: 0;
  }
}

html.msie .box {
  padding: 50px 48px;
}

html.msie .box.history-box {
  padding: 35px 40px;
}

html.msie .box.component-box {
  padding: 70px 48px;
}

html.msie .box-hr {
  border-top: solid 3px #000;
  margin: 60px 0;
}

html.msie .box + .box {
  margin-top: 29px;
}

html.msie .box-title {
  font-size: 28px;
  letter-spacing: -0.02em;
  padding-left: 12px;
  margin-bottom: 44px;
}

html.msie .box-title em {
  font-size: .9em;
}

html.msie .box-sub-title {
  font-size: 25px;
  margin-top: 30px;
}

html.msie .box-inner p {
  font-size: 14px;
}

html.msie .box-inner p + p {
  margin-top: 25px;
}

html.msie .box-lead {
  font-size: 16px;
  text-align: center;
  line-height: 2;
}

html.msie .box-figure {
  margin-top: 25px;
}

html.msie .box-figure img {
  width: 100%;
}

html.msie .box-figure + .box-text {
  margin-top: 25px;
}

html.msie .box-picture {
  width: 41%;
  margin-top: 0;
  margin-left: 3%;
  flex-shrink: 0;
}

html.msie .box-picture img {
  width: 100%;
}

html.msie .box-flex {
  display: flex;
  justify-content: space-between;
}

html.msie .box-flex + .box-flex {
  margin-top: 40px;
}

html.msie .box-flex-texts, html.msie .box-flex-figs {
  display: block;
  flex-basis: 416px;
  flex-shrink: 0;
  flex-grow: 0;
}

html.msie .box-flex-texts picture, html.msie .box-flex-figs picture {
  display: block;
}

html.msie .box-flex-texts picture + picture, html.msie .box-flex-figs picture + picture {
  margin-top: 40px;
}

html.msie .box-flex-texts p + picture {
  display: block;
  margin-top: 40px;
}

html.msie .box-inner .box-profile {
  flex-direction: row;
  align-items: baseline;
  font-size: 20px;
}

html.msie .box-profile__affiliation {
  width: 100%;
}

html.msie .box-profile__position {
  font-size: 14px;
  margin-left: 10px;
  order: 3;
}

html.msie .box-profile__name {
  margin-top: 0;
}

html.msie .with-picture {
  flex-direction: row;
}

html.msie .with-picture .box-inner {
  margin-top: 0;
}

.dl-list {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  width: 100%;
  margin: 40px auto 0;
}

.dl-list dt {
  background-color: #48A7C4;
  color: #fff;
  font-size: 15px;
  text-align: center;
  padding: 15px;
}

.dl-list dd {
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

@media screen and (min-width: 601px) {
  html.notIE .dl-list {
    flex-direction: row;
    max-width: 810px;
  }
  html.notIE .dl-list dt,
  html.notIE .dl-list dd {
    display: flex;
    align-items: center;
    font-size: 20px;
  }
  html.notIE .dl-list dt {
    justify-content: center;
    width: 120px;
    flex-shrink: 0;
  }
  html.notIE .dl-list dd {
    padding: 20px 35px;
    text-align: left;
  }
}

html.msie .dl-list {
  flex-direction: row;
  max-width: 810px;
}

html.msie .dl-list dt,
html.msie .dl-list dd {
  display: flex;
  align-items: center;
  font-size: 20px;
}

html.msie .dl-list dt {
  justify-content: center;
  width: 120px;
  flex-shrink: 0;
}

html.msie .dl-list dd {
  padding: 20px 35px;
  text-align: left;
}

.three-dimensional-movies {
  margin-top: 35px;
}

.three-dimensional-movies__title {
  display: block;
  text-align: center;
  margin-bottom: 16px;
}

.three-dimensional-movies__title span {
  border: 1px solid #000;
  border-radius: 35px;
  display: block;
  width: 55%;
  padding: 8px 16px;
  margin: 0 auto;
}

.three-dimensional-movies__item + .three-dimensional-movies__item {
  margin-top: 45px;
}

.three-dimensional-movies__movie {
  width: 100%;
  padding-top: 59.8%;
  position: relative;
}

.three-dimensional-movies__movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.three-dimensional-movies__tags {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.three-dimensional-movies__tag {
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 2px 6px;
}

.three-dimensional-movies__tag:before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
}

.three-dimensional-movies__tag:not(:first-of-type) {
  margin-left: 10px;
}

.three-dimensional-movies__tag:first-of-type:before {
  background-color: #FF0000;
}

.three-dimensional-movies__tag:nth-of-type(2):before {
  background-color: #9DFF00;
}

.three-dimensional-movies__caution {
  font-size: 10px;
  font-weight: 600;
  margin-top: 10px;
}

.three-dimensional-movies__caution li:before {
  content: '※';
  margin-right: 10px;
}

@media screen and (min-width: 601px) {
  html.notIE .three-dimensional-movies {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 30px;
  }
  html.notIE .three-dimensional-movies__title span {
    padding: 2px 16px;
  }
  html.notIE .three-dimensional-movies__item {
    width: 46%;
  }
  html.notIE .three-dimensional-movies__item + .three-dimensional-movies__item {
    margin-top: 0;
  }
  html.notIE .three-dimensional-movies__tags {
    justify-content: flex-start;
  }
}

html.msie .three-dimensional-movies {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 30px;
}

html.msie .three-dimensional-movies__title span {
  padding: 2px 16px;
}

html.msie .three-dimensional-movies__item {
  width: 46%;
}

html.msie .three-dimensional-movies__item + .three-dimensional-movies__item {
  margin-top: 0;
}

html.msie .three-dimensional-movies__tags {
  justify-content: flex-start;
}

.box-inner .intro .intro-lead {
  font-family: "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
  font-size: 28px;
  text-align: center;
}

.box-inner .intro p {
  font-size: 16px;
  text-align: center;
}

.box-inner .intro p + p {
  margin-top: 25px;
}

@media screen and (min-width: 601px) {
  html.notIE .intro .intro-lead {
    font-size: 31px;
  }
  html.notIE .intro p {
    font-size: 16px;
  }
  html.notIE .intro p + p {
    margin-top: 35px;
  }
}

html.msie .intro .intro-lead {
  font-size: 31px;
}

html.msie .intro p {
  font-size: 16px;
}

html.msie .intro p + p {
  margin-top: 35px;
}

.history-lead {
  text-align: center;
  margin-bottom: 35px;
}

.history-contents {
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.history-contents + .history-contents {
  margin-top: 10px;
}

.history-age {
  background-color: #5F696E;
  color: #fff;
  font-family: "Perpetua", "Baskerville", "Big Caslon", "Palatino Linotype", "Palatino", "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
  font-size: 20px;
  text-align: center;
  padding: 5px 15px;
}

.history-inner {
  padding: 18px;
}

.history-title {
  display: flex;
  align-items: baseline;
  font-family: "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
  font-size: 16px;
}

.history-title span {
  color: #48A7C4;
  display: block;
  font-size: 12px;
  margin-right: 5px;
}

.history-text {
  font-size: 11px;
  margin-top: 10px;
}

.history-note {
  font-size: 11px;
}

.history-note li:before {
  content: "※";
  display: inline-block;
  margin-right: 4px;
}

.history-figure {
  margin-top: 15px;
  width: 100%;
}

.history-figure img {
  width: 100%;
}

@media screen and (min-width: 601px) {
  html.notIE .history-contents {
    flex-direction: row;
  }
  html.notIE .history-age {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 31px;
    width: 15%;
    flex-shrink: 0;
  }
  html.notIE .history-inner {
    flex: 1 1 auto;
    padding: 40px 32px;
  }
  html.notIE .history-title {
    font-size: 20px;
  }
  html.notIE .history-title span {
    font-size: 16px;
  }
  html.notIE .history-text {
    font-size: 13px;
  }
  html.notIE .history-note {
    font-size: 13px;
  }
  html.notIE .history-figure {
    margin-top: 20px;
  }
}

html.msie .history-contents {
  flex-direction: row;
}

html.msie .history-age {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 31px;
  width: 15%;
  flex-shrink: 0;
}

html.msie .history-inner {
  flex: 1 1 auto;
  padding: 40px 32px;
}

html.msie .history-title {
  font-size: 20px;
}

html.msie .history-title span {
  font-size: 16px;
}

html.msie .history-text {
  font-size: 13px;
}

html.msie .history-note {
  font-size: 13px;
}

html.msie .history-figure {
  margin-top: 20px;
}

.component-title {
  font-family: "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
  font-size: 18px;
  text-align: center;
}

.component-title sup {
  font-size: 10px;
  vertical-align: super;
}

.component-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 45px;
}

.component-list__item {
  background-color: #F8F8F9;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 10px;
  margin-bottom: 4%;
  line-height: 1.2;
  width: 48%;
}

.component-list__item:nth-of-type(2n) {
  margin-left: 4%;
}

.component-list__name {
  font-family: "Yu Mincho Medium", "游明朝 Medium", YuMincho Pr6, "游明朝体 Pr6", YuMincho, "游明朝体", "Noto Serif JP", serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-bottom: 10px;
}

.conponent-list__img {
  display: block;
}

.conponent-list__img img {
  width: 100%;
}

.component-list__caution {
  text-align: left;
  line-height: 2;
}

.component-list__caution li {
  color: #5F696E;
  counter-increment: item;
  display: flex;
  font-size: 10px;
}

.component-caution {
  font-size: 10px;
}

.component-caution li:before {
  content: '※';
  display: inline-block;
  margin-right: 10px;
}

@media screen and (min-width: 601px) {
  html.notIE .component {
    max-width: 772px;
    margin: 0 auto;
  }
  html.notIE .component-title {
    font-size: 30px;
  }
  html.notIE .component-title sup {
    font-size: 12px;
  }
  html.notIE .component-list {
    justify-content: center;
  }
  html.notIE .component-list__item {
    font-size: 20px;
    width: 30%;
    padding: 15px 20px;
    margin: 1.6%;
  }
  html.notIE .component-caution {
    font-size: 13px;
  }
}

html.msie .component {
  max-width: 772px;
  margin: 0 auto;
}

html.msie .component-title {
  font-size: 30px;
}

html.msie .component-title sup {
  font-size: 12px;
}

html.msie .component-list {
  justify-content: center;
}

html.msie .component-list__item {
  font-size: 20px;
  width: 30%;
  padding: 15px 20px;
  margin: 1.6%;
}

html.msie .component-caution {
  font-size: 13px;
}

.page-top {
  display: flex;
  justify-content: center;
  position: relative;
  padding: 48px 20px;
  z-index: 1;
}

.page-top__button {
  display: block;
}

@media screen and (min-width: 601px) {
  html.notIE .page-top {
    padding: 92px 40px;
  }
}

html.msie .page-top {
  padding: 92px 40px;
}

.shd_footer {
  position: relative;
  z-index: 5;
}

@media screen and (min-width: 601px) {
  html.notIE .u-pc_none {
    display: none;
  }
}

html.msie .u-pc_none {
  display: none;
}

html.msie .u-pc_none.u-ie_disp {
  display: block;
}

@media screen and (max-width: 600px) {
  html.notIE .u-sp_none {
    display: none;
  }
}

.u-clearfix {
  display: block;
}

.u-clearfix::after, .u-clearfix::before {
  content: '';
  display: block;
  clear: both;
}

.u-taCenter {
  text-align: center;
}

.u-taLeft {
  text-align: left;
}

.u-taRight {
  text-align: right;
}

.u-ffSerif {
  font-family: 'Yu Mincho Medium', '游明朝 Medium', YuMincho Pr6, '游明朝体 Pr6', YuMincho, '游明朝体', 'Noto Serif JP', serif;
}

.u-ffSans {
  font-family: 'Yu Gothic Medium', '游ゴシック Medium', YuGothic Pr6, '游ゴシック体 Pr6', YuGothic, '游ゴシック体', 'Noto Sans JP', sans-serif;
}

.u-fwBold {
  font-style: normal;
  font-weight: 500;
}

.u-fwNormal {
  font-style: normal;
  font-weight: 400;
}

.u-fcPoint {
  color: #dd0046;
}

@media screen and (min-width: 961px) {
  .u-phoneLink {
    pointer-events: none;
    cursor: default;
  }
}

@media screen and (min-width: 961px) {
  .u-hover {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  .u-hover:hover {
    opacity: .7;
  }
}

.u-notes li {
  font-size: 12px;
  text-indent: -1em;
  padding-left: 1em;
  color: #a2a2a2;
}

@media screen and (min-width: 601px) {
  html.notIE .u-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 330px;
    min-height: 70px;
    text-decoration: none;
    text-align: center;
    margin: 0;
    padding: 0;
    border: 0 none;
    cursor: pointer;
    opacity: 1;
    transition: all .2s ease 0s;
  }
  html.notIE .u-btn span {
    font-family: 'Yu Gothic Medium', '游ゴシック Medium', YuGothic Pr6, '游ゴシック体 Pr6', YuGothic, '游ゴシック体', 'Noto Sans JP', sans-serif;
    font-size: 18px;
    line-height: 1.3;
    transition: all .2s ease 0s;
  }
  html.notIE .u-btn.m-sizeS {
    min-height: 55px;
  }
  html.notIE .u-btn.m-sizeS span {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
  }
  html.notIE .u-btn.m-sizeS:hover span {
    font-style: normal;
    font-weight: 500;
  }
  html.notIE .u-btn.m-primary {
    background-color: #dd0046;
  }
  html.notIE .u-btn.m-primary span {
    color: #fff;
    font-style: normal;
    font-weight: 500;
  }
  html.notIE .u-btn.m-primary:hover {
    opacity: .7;
  }
  html.notIE .u-btn.m-secondary {
    background-color: #F8F9FA;
    border: solid 1px #dd0046;
  }
  html.notIE .u-btn.m-secondary span {
    color: #dd0046;
    font-style: normal;
    font-weight: 400;
  }
  html.notIE .u-btn.m-secondary:hover {
    background-color: #dd0046;
  }
  html.notIE .u-btn.m-secondary:hover span {
    color: #fff;
    font-style: normal;
    font-weight: 500;
  }
}

html.msie .u-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 330px;
  min-height: 70px;
  text-decoration: none;
  text-align: center;
  margin: 0;
  padding: 0;
  border: 0 none;
  cursor: pointer;
  opacity: 1;
  transition: all .2s ease 0s;
}

html.msie .u-btn span {
  font-family: 'Yu Gothic Medium', '游ゴシック Medium', YuGothic Pr6, '游ゴシック体 Pr6', YuGothic, '游ゴシック体', 'Noto Sans JP', sans-serif;
  font-size: 18px;
  line-height: 1.3;
  transition: all .2s ease 0s;
}

html.msie .u-btn.m-sizeS {
  min-height: 55px;
}

html.msie .u-btn.m-sizeS span {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}

html.msie .u-btn.m-sizeS:hover span {
  font-style: normal;
  font-weight: 500;
}

html.msie .u-btn.m-primary {
  background-color: #dd0046;
}

html.msie .u-btn.m-primary span {
  color: #fff;
  font-style: normal;
  font-weight: 500;
}

html.msie .u-btn.m-primary:hover {
  opacity: .7;
}

html.msie .u-btn.m-secondary {
  background-color: #F8F9FA;
  border: solid 1px #dd0046;
}

html.msie .u-btn.m-secondary span {
  color: #dd0046;
  font-style: normal;
  font-weight: 400;
}

html.msie .u-btn.m-secondary:hover {
  background-color: #dd0046;
}

html.msie .u-btn.m-secondary:hover span {
  color: #fff;
  font-style: normal;
  font-weight: 500;
}

@media screen and (max-width: 600px) {
  html.notIE .u-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 72px;
    text-decoration: none;
    text-align: center;
    margin: 0;
    padding: 0;
    border: 0 none;
  }
  html.notIE .u-btn span {
    font-family: 'Yu Gothic Medium', '游ゴシック Medium', YuGothic Pr6, '游ゴシック体 Pr6', YuGothic, '游ゴシック体', 'Noto Sans JP', sans-serif;
    font-size: 17px;
    line-height: 1.3;
  }
  html.notIE .u-btn.m-sizeS {
    min-height: 58px;
  }
  html.notIE .u-btn.m-sizeS span {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
  }
  html.notIE .u-btn.m-primary {
    background-color: #dd0046;
  }
  html.notIE .u-btn.m-primary span {
    color: #fff;
    font-style: normal;
    font-weight: 500;
  }
  html.notIE .u-btn.m-secondary {
    background-color: #F8F9FA;
    border: solid 1px #dd0046;
  }
  html.notIE .u-btn.m-secondary span {
    color: #dd0046;
    font-style: normal;
    font-weight: 400;
  }
}

@media screen and (max-width: 600px) {
  html.notIE .u-shop {
    background-color: #F3F5F7;
    padding: calc(115 / 750 * 100vw) calc(50 / 750 * 100vw) calc(100 / 750 * 100vw);
    position: relative;
    z-index: 1;
  }
  html.notIE .u-shop_link_ttl {
    font-size: calc(42 / 750 * 100vw);
    text-align: center;
  }
  html.notIE .u-shop_link_btn {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: calc(70 / 750 * 100vw);
  }
  html.notIE .u-shop_link_btn a {
    width: calc(265 / 750 * 100vw);
  }
  html.notIE .u-shop_link_btn a + a {
    margin-left: calc(20 / 750 * 100vw);
  }
  html.notIE .u-shop_link_btn a + a:nth-child(2n + 1) {
    margin-left: 0;
  }
  html.notIE .u-shop_link_btn a + a:nth-child(n + 3) {
    margin-top: calc(20 / 750 * 100vw);
  }
  html.notIE .u-shop_find_ttl {
    margin-top: calc(115 / 750 * 100vw);
    font-size: calc(42 / 750 * 100vw);
    text-align: center;
  }
  html.notIE .u-shop_find_btn {
    margin-top: calc(70 / 750 * 100vw);
  }
  html.notIE .u-shop_find_btn a + a {
    margin-top: calc(50 / 750 * 100vw);
  }
}

@media screen and (min-width: 601px) {
  html.notIE .u-shop {
    background-color: #F3F5F7;
    padding: 60px 0 80px;
    position: relative;
    z-index: 1;
  }
  html.notIE .u-shop_link_ttl {
    font-size: 23px;
    text-align: center;
  }
  html.notIE .u-shop_link_btn {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    line-height: 1;
  }
  html.notIE .u-shop_link_btn a {
    width: 190px;
  }
}

@media screen and (min-width: 601px) and (min-width: 961px) {
  html.notIE .u-shop_link_btn a {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.notIE .u-shop_link_btn a:hover {
    opacity: .7;
  }
}

@media screen and (min-width: 601px) {
  html.notIE .u-shop_link_btn a + a {
    margin-left: 15px;
  }
  html.notIE .u-shop_find_ttl {
    margin-top: 60px;
    font-size: 23px;
    text-align: center;
  }
  html.notIE .u-shop_find_btn {
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }
  html.notIE .u-shop_find_btn a {
    width: 380px;
  }
}

@media screen and (min-width: 601px) and (min-width: 961px) {
  html.notIE .u-shop_find_btn a {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.notIE .u-shop_find_btn a:hover {
    opacity: .7;
  }
}

@media screen and (min-width: 601px) {
  html.notIE .u-shop_find_btn a + a {
    margin-left: 48px;
  }
}

html.msie .u-shop {
  background-color: #F3F5F7;
  padding: 60px 0 80px;
  position: relative;
  z-index: 1;
}

html.msie .u-shop_link_ttl {
  font-size: 23px;
  text-align: center;
}

html.msie .u-shop_link_btn {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  line-height: 1;
}

html.msie .u-shop_link_btn a {
  width: 190px;
}

@media screen and (min-width: 961px) {
  html.msie .u-shop_link_btn a {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.msie .u-shop_link_btn a:hover {
    opacity: .7;
  }
}

html.msie .u-shop_link_btn a + a {
  margin-left: 15px;
}

html.msie .u-shop_find_ttl {
  margin-top: 60px;
  font-size: 23px;
  text-align: center;
}

html.msie .u-shop_find_btn {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

html.msie .u-shop_find_btn a {
  width: 380px;
}

@media screen and (min-width: 961px) {
  html.msie .u-shop_find_btn a {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.msie .u-shop_find_btn a:hover {
    opacity: .7;
  }
}

html.msie .u-shop_find_btn a + a {
  margin-left: 48px;
}

.u-modal {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 2000;
}

.u-modal::-webkit-scrollbar {
  display: none;
}

.u-modal.reservation .reservation_txt {
  display: block;
}

.u-modal .reservation_txt {
  display: none;
  font-size: 12px;
  margin-top: 20px;
  text-align: center;
}

.u-modal_bg {
  background-color: rgba(0, 0, 0, 0.7);
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.u-modal_box {
  position: relative;
  margin: auto;
  background-color: #fff;
  width: 900px;
}

@media screen and (max-width: 600px) {
  html.notIE .u-modal {
    padding: calc(50 / 750 * 100vw);
  }
  html.notIE .u-modal_cont {
    width: 100%;
    position: relative;
  }
  html.notIE .u-modal_close {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(110 / 750 * 100vw);
    height: calc(110 / 750 * 100vw);
    background: #000 url(/haku/laboratory/img/close.svg) no-repeat center center;
    background-size: 100%;
    z-index: 2;
  }
}

@media screen and (max-width: 600px) and (min-width: 961px) {
  html.notIE .u-modal_close {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.notIE .u-modal_close:hover {
    opacity: .7;
  }
}

@media screen and (min-width: 601px) {
  html.notIE .u-modal {
    padding: 100px;
  }
  html.notIE .u-modal_cont {
    width: 900px;
    margin: 0 auto;
    position: relative;
  }
  html.notIE .u-modal_close {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: #000 url(/haku/laboratory/img/close.svg) no-repeat center center;
    background-size: 100%;
    z-index: 2;
  }
}

@media screen and (min-width: 601px) and (min-width: 961px) {
  html.notIE .u-modal_close {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.notIE .u-modal_close:hover {
    opacity: .7;
  }
}

html.msie .u-modal {
  padding: 100px;
}

html.msie .u-modal_cont {
  width: 900px;
  margin: 0 auto;
  position: relative;
}

html.msie .u-modal_close {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: #000 url(/haku/laboratory/img/close.svg) no-repeat center center;
  background-size: 100%;
  z-index: 2;
}

@media screen and (min-width: 961px) {
  html.msie .u-modal_close {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease 0s;
  }
  html.msie .u-modal_close:hover {
    opacity: .7;
  }
}

/*# sourceMappingURL=../css/maps/style.css.map */