@charset "UTF-8";
:root {
  --color-w: #ffffff;
  --color-main: #26b7bc;
  --color-main-bg: #bdeaef;
  --color-main-bg2: #f4fafc;
  --color-active: #ed7100;
  --color-active-bg: #fdf1e5;
  --color-slim: #18943b;
  --color-slim-bg: #f2faf4;
  --color-cbd: #af4b97;
  --color-cbd-bg: #fbf6fa;
  --color-bg: #eaf2f7;
  --color-bg2: #dde5eb;
  --color-bg3: #dce0e4;
  --color-bg4: #b5c1c5;
  --color-bg5: #aab2b1;
  --color-footer: #8b989e;
  --color-bg-red: #751707;
  --color-bg-blue: #ba791a;
  --color-0: #000000;
  --color-1: #111111;
  --color-2: #202020;
  --color-3: #545454;
  --color-4: #7c7c7c;
  --color-5: #a0a0a0;
  --color-6: #c4c4c4;
  --color-7: #d8d8d8;
  --color-8: #e5e5e5;
  --color-9: #f4f4f4;
  --color-10: #ffffff;
  --color-info: #eceff3;
  --easing: cubic-bezier(0.2, 1, 0.2, 1);
  --transition: 0.8s var(--easing);
  --box-shadow: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.05), -0.8rem -0.8rem 1.2rem #fff;
  --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, 0.08), -1rem -1rem 1.5rem #fff;
  --box-shadow-inset: inset 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.05), inset -0.8rem -0.8rem 1.2rem #fff;
  --box-shadow-dark: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.1), -0.8rem -0.8rem 1.2rem rgba(#fff, 0.2);
  --font-main: "Wix Madefor Display", "Zen Kaku Gothic New", sans-serif;
  --font-bold: "Wix Madefor Display", "Zen Kaku Gothic New", sans-serif;
  --font-go: "Wix Madefor Display", "Zen Kaku Gothic New", sans-serif; }

::selection {
  background: #f4fafc; }

.active_gurade {
  background: linear-gradient(45deg, #D06F1A, #E5B33D);
  background-size: 400% 400%;
  animation: GradientBackground 10s ease infinite; }

.actice_marker {
  background: linear-gradient(transparent 20%, var(--color-active-bg) 30%); }

.slim_gurade {
  background: linear-gradient(45deg, #A9BE33, #64A3DC);
  background-size: 400% 400%;
  animation: GradientBackground 10s ease infinite; }

.slim_marker {
  background: linear-gradient(transparent 20%, var(--color-slim-bg) 70%); }

.cbd_gurade {
  background: linear-gradient(45deg, #AF4B97, #A4B2D3);
  background-size: 400% 400%;
  animation: GradientBackground 10s ease infinite; }

.cbd_marker {
  background: linear-gradient(transparent 20%, var(--color-cbd-bg) 70%); }

@keyframes GradientBackground {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }
/* ==========================================================================

	common style
	
========================================================================== */
*, *::before, *::after {
  box-sizing: border-box; }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0; }

ul[role="list"], ol[role="list"] {
  list-style: none; }

html:focus-within {
  scroll-behavior: smooth; }

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5; }

a:not([class]) {
  text-decoration-skip-ink: auto; }

img, picture {
  width: 100%;
  height: auto;
  max-width: 100%;
  vertical-align: bottom; }

input, button, textarea, select {
  font: inherit; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important; } }
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, input, textarea {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

html {
  font-size: 62.5%;
  font-family: var(--font-main);
  color: var(--color-moji); }

body {
  font-size: 1.2rem;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background-image: url("../img/common/bg.jpg");
  background-size: 4000px;
  background-position: top; }

body.overflow {
  overflow: hidden; }

main {
  position: relative;
  overflow: hidden; }

input:-internal-autofill-selected {
  background-color: #fbfbfd !important; }

a {
  color: var(--color-moji);
  text-decoration: none; }

a:hover {
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all  1s; }

video {
  max-width: 100%;
  height: auto; }

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

nav ul {
  list-style: none; }

del {
  text-decoration: line-through; }

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

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

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

input[type="submit"] {
  cursor: pointer;
  border: none; }

textarea {
  resize: vertical;
  overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

li {
  list-style: none; }

address {
  font-style: normal; }

select, input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

.pc {
  display: block !important; }

.sp {
  display: none !important; }

@media only screen and (max-width: 768px) {
  .pc {
    display: none !important; }

  .sp {
    display: block !important; } }
.block_link {
  position: relative; }

.block_link a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -999px;
  background: transparent url("../img/common/link_bg.png") 0 0 repeat;
  z-index: 1000; }

/* ========================================
 * flex box 
  ========================================*/
.flex-center {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center; }

.flex-start {
  display: -webkit-flex;
  display: flex; }

.flex-end {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end; }

.flex-center-pc {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center; }

.flex-start-pc {
  display: -webkit-flex;
  display: flex; }

.flex-end-pc {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end; }

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

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

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

.flex-row-reverse {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse; }

.flex-row-reverse-pc {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse; }

.flex-space {
  -webkit-justify-content: space-between;
  justify-content: space-between; }

.flex-space-end {
  -webkit-justify-content: flex-end;
  justify-content: flex-end; }

.flex-space-start {
  -webkit-justify-content: flex-start;
  justify-content: flex-start; }

.flex-space-center {
  -webkit-justify-content: center;
  justify-content: center; }

.flex-wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }

@media only screen and (max-width: 768px) {
  .flex-center-pc {
    display: block; }

  .flex-start-pc {
    display: block; }

  .flex-end-pc {
    display: block; }

  .flex-center-sp {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center; }

  .flex-start-sp {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start; }

  .flex-end-sp {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end; }

  .flex-row-reverse-pc {
    -webkit-flex-direction: row;
    flex-direction: row; } }

.center_layout {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.top_center {
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%); }

.left_center {
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%); }

/* ========================================
 *  animation
  ========================================*/
a {
  text-decoration: none;
  outline: none; }

a:hover {
  outline: none; }

.link {
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  color: var(--color-text); }

.link::after {
  position: absolute;
  width: 100%;
  height: 1px;
  background: currentColor;
  top: 100%;
  left: 0;
  pointer-events: none; }

.link::after {
  content: ''; }

.link--metis::after {
  transform-origin: 100% 50%;
  transform: scale3d(0, 1, 1);
  transition: transform 0.3s; }

@media only screen and (min-width: 769px) {
  .link--metis:hover::after {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1); } }
.link--metis_active::after {
  transform-origin: 0% 50%;
  transform: scale3d(1, 1, 1); }

@media only screen and (min-width: 769px) {
  .link--metis_active:hover::after {
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1); } }
/* ==========================================================================

	animation
	
========================================================================== */
.fadein {
  opacity: 0;
  transform: translate(0, 15px);
  transition: .8s linear; }

.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0); }

.fadein_fade {
  -webkit-transform: translateY(0px) scale(1);
  -ms-transform: translateY(0px) scale(1);
  transform: translateY(0px) scale(1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
  -webkit-filter: blur(10px) brightness(1.5);
  filter: blur(10px) brightness(1.5); }

.fadein_fade.scrollin {
  transform: translate(0, 0);
  -webkit-transform: translateY(0px) scale(1);
  -ms-transform: translateY(0px) scale(1);
  transform: translateY(0px) scale(1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  opacity: 1;
  -webkit-filter: blur(0px) brightness(1);
  filter: blur(0px) brightness(1);
  -webkit-transition: opacity 2s ease 0.01s, -webkit-transform 2s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.01s, -webkit-filter 2s ease 0.01s;
  transition: opacity 2s ease 0.01s, -webkit-transform 2s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.01s, -webkit-filter 2s ease 0.01s;
  transition: transform 2s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.01s, opacity 2s ease 0.01s, filter 2s ease 0.01s;
  transition: transform 2s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.01s, opacity 2s ease 0.01s, filter 2s ease 0.01s, -webkit-transform 2s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.01s, -webkit-filter 2s ease 0.01s; }

.delay-100 {
  transition-delay: 100ms; }

.delay-200 {
  transition-delay: 200ms; }

.delay-300 {
  transition-delay: 300ms; }

.delay-400 {
  transition-delay: 400ms; }

.delay-1000 {
  transition-delay: 1000ms; }

.linkanime,
.linkanime::after {
  -webkit-transition: all 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 640ms cubic-bezier(0.165, 0.84, 0.44, 1); }

/* ==========================================================================

	header
	
========================================================================== */
.header {
  display: flex;
  position: fixed;
  width: 100%;
  top: 0px;
  z-index: 10;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  z-index: 199999;
  padding: 20px 4.8vw;
  opacity: 0;
  transform: translate(0, -30px);
  -webkit-transition: all 2s ease 0.1s, -webkit-transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.6s, -webkit-filter 2s ease 0.1s;
  transition: all 2s ease 0.1s, -webkit-transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.6s, -webkit-filter 2s ease 0.1s; }
  @media only screen and (max-width: 768px) {
    .header {
      position: relative;
      padding: 17px 0px 10px;
      margin: 0;
      width: 100%;
      display: block;
      height: 60px;
      top: 0px; } }
  .header__logo {
    padding: 0;
    width: 130px;
    position: relative; }
    .header__logo .white {
      opacity: 1; }
    .header__logo .on {
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0; }
    @media only screen and (max-width: 1000px) {
      .header__logo {
        width: 100px; } }
    @media only screen and (max-width: 768px) {
      .header__logo {
        margin: 0 auto;
        width: 100px;
        z-index: 1000; } }
  .header__nav {
    list-style: none;
    margin: 3px 0 0 40px;
    width: calc(100% - 130px); }
    @media only screen and (max-width: 1000px) {
      .header__nav {
        width: calc(100% - 240px);
        margin: 3px 0 0 20px; } }
    @media only screen and (max-width: 900px) {
      .header__nav {
        opacity: 0; } }
    @media only screen and (max-width: 768px) {
      .header__nav {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 0px;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.8);
        height: 100svh;
        padding: 120px 20px 50px;
        margin: 0;
        background: var(--color-bg);
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
        .header__nav::before {
          content: '';
          width: 100%;
          background: url("../img/common/bg.jpg");
          background-size: cover;
          height: 100%;
          position: absolute;
          z-index: 1;
          top: 0;
          left: 0;
          opacity: 0.9; }
        .header__nav::after {
          content: 'Copyright ©euglena Co,Ltd. All Rights Reserved.';
          position: absolute;
          bottom: 30px;
          right: 20px;
          color: var(--color-main);
          letter-spacing: 1px;
          font-size: 10px;
          z-index: 100; } }
    .header__nav ul {
      margin: 0px;
      z-index: 1000; }
      @media only screen and (max-width: 768px) {
        .header__nav ul {
          position: relative;
          margin: 40px 0 0; }
          .header__nav ul::after {
            content: 'PRODUCTS LIST';
            position: absolute;
            top: -46px;
            width: 100%;
            left: 0px;
            text-align: center;
            color: var(--color-w);
            font-weight: 500;
            letter-spacing: 1px;
            font-size: 14px;
            z-index: 100;
            opacity: 1; } }
      .header__nav ul li {
        font-size: 1.3rem;
        text-transform: none;
        letter-spacing: 2px;
        font-weight: 600;
        color: var(--color-w); }
        .header__nav ul li * {
          color: var(--color-moji); }
        @media only screen and (max-width: 1000px) {
          .header__nav ul li {
            font-size: 1.1rem; } }
        @media only screen and (max-width: 768px) {
          .header__nav ul li {
            font-size: 1.7rem;
            text-align: center;
            letter-spacing: 1px;
            background: rgba(255, 255, 255, 0.25);
            padding: 15px;
            border-radius: 13px; }
            .header__nav ul li * {
              color: var(--color-w); } }
      @media only screen and (max-width: 768px) {
        .header__nav ul .link--metis_active::after {
          opacity: 0; } }
      .header__nav ul li:not(:last-child) {
        margin: 0 20px 0 0;
        text-transform: none; }
        @media only screen and (max-width: 1000px) {
          .header__nav ul li:not(:last-child) {
            margin: 0 12px 0 0; } }
        @media only screen and (max-width: 768px) {
          .header__nav ul li:not(:last-child) {
            margin: 0 0 12px 0; } }
  .header .inner {
    width: 100%;
    margin: 0 auto;
    position: relative; }
  .header__burger {
    background-size: 100%;
    width: 3.1rem;
    height: 2.2rem;
    background-repeat: no-repeat; }
    .header__burger svg {
      width: 1rem;
      height: auto;
      margin: .8rem 0 0 .8rem; }

.is-load .header {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transition: opacity 1.6s ease 0.1s, -webkit-transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.6s, -webkit-filter 2s ease 0.1s;
  transition: opacity 1.6s ease 0.1s, -webkit-transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.6s, -webkit-filter 2s ease 0.1s;
  transition-delay: 0ms; }

@media only screen and (max-width: 768px) {
  .head-animation {
    transform: translateY(-100%); } }
@media only screen and (min-width: 769px) {
  header.is-animation {
    backdrop-filter: blur(0px);
    background-color: rgba(255, 255, 255, 0.2);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3)); }
    header.is-animation .header__logo .white {
      opacity: 0; }
    header.is-animation .header__logo .on {
      opacity: 1; }
    header.is-animation .header__nav ul li {
      color: var(--color-main); } }
.overflow .header .header__nav {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1 !important;
  visibility: visible; }

.menu-trigger {
  display: none; }

@media only screen and (max-width: 768px) {
  .menu-trigger {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    cursor: pointer; }

  .menu-trigger {
    position: absolute;
    top: 69%;
    right: 6px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 50px;
    height: 37px;
    z-index: 2;
    margin: 0; }

  .menu-trigger:after, .menu-trigger:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -3px;
    margin: auto;
    display: block;
    width: 50%;
    height: 1px;
    content: "";
    background-color: var(--color-w);
    transition: width 0.2s cubic-bezier(0.19, 1, 0.22, 1), top 0.2s cubic-bezier(0.19, 1, 0.22, 1), bottom 0.2s cubic-bezier(0.19, 1, 0.22, 1), transform 0.2s cubic-bezier(0.19, 1, 0.22, 1); }

  .menu-trigger.active:after, .menu-trigger.active:before {
    background-color: var(--color-w); }

  .menu-trigger:before {
    top: -0.6rem; }

  .menu-trigger:after {
    bottom: -0.6rem; }

  .menu-trigger.active:before {
    top: 0;
    width: 50%;
    transform: rotate(45deg); }

  .menu-trigger.active:after {
    bottom: 0;
    width: 50%;
    transform: rotate(-45deg); } }
/* ==========================================================================

	footer
	
========================================================================== */
footer {
  width: 100%;
  position: relative;
  padding: 50px 0 60px;
  background-image: url("../img/common/bg.jpg");
  background-size: 4000px;
  background-position: top; }
  @media only screen and (max-width: 768px) {
    footer {
      padding: 20px 0 0px; } }
  footer:before {
    background: var(--color-w);
    content: '';
    height: 100%;
    top: -1px;
    width: 100%;
    position: absolute;
    opacity: 0.5; }
  footer .waves_bottom {
    transform: scale(1, -1);
    top: -53px;
    z-index: 100; }
    @media only screen and (max-width: 768px) {
      footer .waves_bottom {
        top: -20px; } }
  footer .inner {
    margin: 0 auto;
    padding: 0 4.8vw 0 4.8vw;
    position: relative;
    z-index: 100; }
    @media only screen and (max-width: 768px) {
      footer .inner {
        padding: 0px 0 30px;
        width: calc(100% - 40px);
        max-width: 600px; } }
  footer .pagetop {
    position: absolute;
    bottom: 0;
    right: 30px; }
    footer .pagetop .img {
      width: 38px;
      margin: 0 auto; }
    footer .pagetop .txt {
      text-align: center;
      color: var(--color-main);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.5px; }
  footer .logo {
    width: 120px;
    margin: 0 auto; }
    @media only screen and (max-width: 768px) {
      footer .logo {
        padding: 0 0 0 12px; } }
  footer .copy {
    width: 100%;
    text-align: center;
    font-size: 10px;
    letter-spacing: 1px;
    margin: 10px 0 0;
    color: var(--color-w); }
    @media only screen and (max-width: 768px) {
      footer .copy {
        margin: 5px 0 0;
        font-size: 0.9rem; } }

/* ==========================================================================

	btn
	
========================================================================== */
.link_box {
  background-color: var(--color-main);
  border: 1px solid var(--color-main);
  align-items: center;
  padding: 15px 10px;
  color: var(--color-w);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 1px;
  position: relative;
  text-align: center;
  z-index: 10;
  transition: all 0.5s ease;
  border-radius: 30px;
  cursor: pointer; }
  @media only screen and (max-width: 1000px) {
    .link_box {
      font-size: 1.4rem; } }
  @media only screen and (max-width: 768px) {
    .link_box {
      width: 100%;
      font-size: 1.2rem; } }
  @media only screen and (min-width: 769px) {
    .link_box:hover {
      background-color: var(--color-w);
      border: 1px solid var(--color-main);
      color: var(--color-main) !important; } }
  .link_box i {
    margin: 0 10px 0 0; }

/* ==========================================================================

	index.html
	
========================================================================== */
section .inner {
  max-width: 1200px;
  width: calc(100% - 17vw);
  margin: 0 auto;
  position: relative;
  z-index: 100; }
  @media only screen and (max-width: 1000px) {
    section .inner {
      width: calc(100% - 13vw); } }
  @media only screen and (max-width: 768px) {
    section .inner {
      width: calc(100% - 40px);
      max-width: 600px !important; } }
section .txtbox .title {
  font-size: 28px;
  letter-spacing: 2px;
  margin-bottom: 30px; }
  @media only screen and (max-width: 1000px) {
    section .txtbox .title {
      font-size: 25px;
      margin-bottom: 20px; } }
  @media only screen and (max-width: 768px) {
    section .txtbox .title {
      font-size: 21px;
      line-height: 1.4;
      letter-spacing: 1px; } }
section .txtbox .subtitle {
  font-size: 1.9rem;
  letter-spacing: 1px;
  margin: 0 0 40px; }
  @media only screen and (max-width: 768px) {
    section .txtbox .subtitle {
      font-size: 1.6rem; } }
section .txtbox .txt {
  margin: 60px 0 0;
  opacity: 0.9;
  font-size: 1.3rem;
  line-height: 2.4;
  font-weight: 400; }
  section .txtbox .txt p {
    margin-bottom: 18px; }
  @media only screen and (max-width: 1000px) {
    section .txtbox .txt {
      margin: 40px 0 0; } }
  @media only screen and (max-width: 768px) {
    section .txtbox .txt {
      font-size: 1.2rem;
      line-height: 2.2;
      margin: 30px 0 0; } }
section .category_title {
  font-size: 4rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--color-main); }
  @media only screen and (max-width: 768px) {
    section .category_title {
      font-size: 2.7rem;
      text-align: center; } }
  section .category_title span {
    font-size: 2rem;
    letter-spacing: 1px; }
    @media only screen and (max-width: 768px) {
      section .category_title span {
        font-size: 1.6rem; } }
section .category_title_sub {
  color: var(--color-main);
  font-size: 2rem;
  text-align: center;
  font-weight: 600; }
  @media only screen and (max-width: 768px) {
    section .category_title_sub {
      font-size: 1.8rem; } }

main .waves {
  position: absolute; }

.waves {
  position: relative;
  width: 100%;
  height: 200px;
  margin-bottom: -7px;
  min-height: 100px;
  max-height: 150px; }

.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; }

.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 10s; }

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0); }
  100% {
    transform: translate3d(85px, 0, 0); } }
@media (max-width: 768px) {
  .waves {
    height: 70px;
    min-height: 40px; } }
.hero_top {
  position: relative;
  margin: 150px 0 0;
  padding: 0 0 10svh; }
  @media only screen and (max-width: 768px) {
    .hero_top {
      margin: 40px 0 0;
      padding: 0 0 20px; } }
  .hero_top:before {
    background: var(--color-w);
    content: '';
    height: 100%;
    top: 39px;
    width: 100%;
    position: absolute; }
  .hero_top .inner {
    width: calc(100% - 10vw);
    position: relative; }
    @media only screen and (max-width: 768px) {
      .hero_top .inner {
        width: calc(100% - 40px); } }
    .hero_top .inner .bg_img {
      position: absolute;
      width: 62%;
      left: -14%;
      top: 16%;
      opacity: 0;
      transform: translate(0, 15px);
      transition: 1.8s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1s;
      -webkit-filter: blur(5px) brightness(1.5);
      filter: blur(5px) brightness(1.5); }
      @media only screen and (max-width: 768px) {
        .hero_top .inner .bg_img {
          left: -14%;
          top: 50%; } }
  .hero_top .waves {
    top: -110px; }
    @media only screen and (max-width: 768px) {
      .hero_top .waves {
        top: -31px; } }
  .hero_top .inner .right {
    width: 68%;
    opacity: 0;
    transform: translate(0, 15px);
    transition: 1.8s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1s;
    -webkit-filter: blur(5px) brightness(1.5);
    filter: blur(5px) brightness(1.5); }
    @media only screen and (max-width: 768px) {
      .hero_top .inner .right {
        width: 100%; } }
    .hero_top .inner .right .image_list li {
      position: relative; }
      .hero_top .inner .right .image_list li .bg {
        position: absolute;
        z-index: 1; }
      .hero_top .inner .right .image_list li .image {
        z-index: 10;
        position: relative; }
      .hero_top .inner .right .image_list li .txt {
        font-size: 16px;
        text-align: center;
        font-weight: 600;
        position: relative;
        z-index: 10;
        margin: 20px 0 0; }
        @media only screen and (max-width: 768px) {
          .hero_top .inner .right .image_list li .txt {
            font-size: 11px; } }
    .hero_top .inner .right .list_active_life {
      width: 32%;
      margin: 0 3% 0 0; }
      @media only screen and (max-width: 768px) {
        .hero_top .inner .right .list_active_life {
          width: 31%;
          margin: 0 4% 0 0; } }
      .hero_top .inner .right .list_active_life .bg {
        top: -5%;
        left: -33%;
        width: 161%;
        opacity: 0.5; }
      .hero_top .inner .right .list_active_life .txt {
        color: var(--color-active); }
    .hero_top .inner .right .list_slim_life {
      width: 32%;
      margin: 0 3% 0 0; }
      @media only screen and (max-width: 768px) {
        .hero_top .inner .right .list_slim_life {
          width: 31%;
          margin: 0 4% 0 0; } }
      .hero_top .inner .right .list_slim_life .bg {
        top: -5%;
        left: -33%;
        width: 151%;
        opacity: 0.5; }
      .hero_top .inner .right .list_slim_life .txt {
        color: var(--color-slim); }
    .hero_top .inner .right .list_cbd {
      width: 30%; }
      @media only screen and (max-width: 768px) {
        .hero_top .inner .right .list_cbd {
          width: 29%; } }
      .hero_top .inner .right .list_cbd .bg {
        top: -5%;
        left: -44%;
        width: 171%;
        opacity: 0.9; }
      .hero_top .inner .right .list_cbd .txt {
        color: var(--color-cbd); }
  .hero_top .inner .left {
    width: 32%;
    margin: 6% 0 0 0px;
    padding: 0 29px 0 0;
    opacity: 0;
    transform: translate(0, 15px);
    transition: 1.8s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1s;
    -webkit-filter: blur(5px) brightness(1.5);
    filter: blur(5px) brightness(1.5);
    z-index: 1000; }
    @media only screen and (max-width: 768px) {
      .hero_top .inner .left {
        width: 92%;
        padding: 0;
        margin: 20px auto 0;
        max-width: 500px; } }
    .hero_top .inner .left .icon {
      width: 34%;
      margin: 0 auto; }
    .hero_top .inner .left .subtitle {
      width: 90%;
      margin: 0 auto 15px; }
    .hero_top .inner .left .title {
      width: 100%; }

.products_top {
  position: relative;
  background: var(--color-w);
  margin: 20px auto 0;
  padding: 0 0 100px; }
  .products_top .inner {
    position: relative;
    transform: translate(0, 15px);
    transition: 1.8s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1s;
    -webkit-filter: blur(5px) brightness(1.5);
    filter: blur(5px) brightness(1.5); }
    .products_top .inner .bg_img {
      position: absolute;
      width: 77%;
      right: -14%;
      top: 1%; }
      @media only screen and (max-width: 768px) {
        .products_top .inner .bg_img {
          width: 98%;
          right: -26%;
          top: 0%; } }
    .products_top .inner .img_circle {
      position: absolute;
      width: 50px;
      top: 7%;
      left: -2%; }
      @media only screen and (max-width: 768px) {
        .products_top .inner .img_circle {
          display: none; } }
    .products_top .inner .img_circle2 {
      position: absolute;
      width: 40px;
      display: none; }
      @media only screen and (max-width: 768px) {
        .products_top .inner .img_circle2 {
          display: block;
          right: -3%;
          top: 57%; } }
    .products_top .inner .img_circle3 {
      position: absolute;
      width: 40px;
      display: none; }
      @media only screen and (max-width: 768px) {
        .products_top .inner .img_circle3 {
          display: block;
          left: -14%;
          top: -12%; } }
  .products_top .waves {
    transform: scale(1, -1);
    bottom: -142px;
    z-index: 100; }
    @media only screen and (max-width: 768px) {
      .products_top .waves {
        bottom: -59px; } }
  .products_top .products_list {
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 0px; }
    @media only screen and (max-width: 768px) {
      .products_top .products_list {
        width: 90%;
        margin: 50px auto 0;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 90px;
        max-width: 400px; } }
    .products_top .products_list li {
      position: relative; }
      .products_top .products_list li .img {
        position: relative;
        border: 1px solid var(--color-main); }
        .products_top .products_list li .img .img_bar {
          position: absolute;
          width: 101%;
          padding: 10px 1px;
          border-radius: 30px;
          font-size: min(1.1vw, 17px);
          top: -26px;
          left: -0.5%;
          color: var(--color-w);
          font-weight: 500;
          text-align: center; }
          @media only screen and (max-width: 768px) {
            .products_top .products_list li .img .img_bar {
              font-size: min(3.5vw, 17px); } }
        .products_top .products_list li .img img {
          vertical-align: bottom; }
      .products_top .products_list li .txtbox {
        margin: 20px 0 0; }
        .products_top .products_list li .txtbox .mark {
          padding: 4px 10px;
          color: var(--color-w);
          font-weight: 500;
          font-size: 13px;
          letter-spacing: 1px;
          display: inline-block; }
          @media only screen and (max-width: 1000px) {
            .products_top .products_list li .txtbox .mark {
              font-size: 10px; } }
          @media only screen and (max-width: 768px) {
            .products_top .products_list li .txtbox .mark {
              font-size: 11px; } }
        .products_top .products_list li .txtbox .name_box {
          margin: 18px 0 0;
          height: 72px; }
          @media only screen and (max-width: 768px) {
            .products_top .products_list li .txtbox .name_box {
              margin: 10px 0 0; } }
          .products_top .products_list li .txtbox .name_box .name_area .sub {
            font-size: 13px;
            font-weight: 500;
            color: var(--color-3); }
            @media only screen and (max-width: 1200px) {
              .products_top .products_list li .txtbox .name_box .name_area .sub {
                font-size: 10px; } }
            @media only screen and (max-width: 768px) {
              .products_top .products_list li .txtbox .name_box .name_area .sub {
                font-size: 11px; } }
          .products_top .products_list li .txtbox .name_box .name_area .name {
            font-size: 30px;
            font-weight: 600;
            display: inline-block;
            line-height: 1.3; }
            @media only screen and (max-width: 1200px) {
              .products_top .products_list li .txtbox .name_box .name_area .name {
                font-size: min(3vw, 23px); } }
            @media only screen and (max-width: 1000px) {
              .products_top .products_list li .txtbox .name_box .name_area .name {
                font-size: 23px; } }
            @media only screen and (max-width: 768px) {
              .products_top .products_list li .txtbox .name_box .name_area .name {
                font-size: 28px; } }
      .products_top .products_list li .support_box {
        margin: 30px 0;
        height: 90px; }
        @media only screen and (max-width: 768px) {
          .products_top .products_list li .support_box {
            margin: 18px 0;
            height: auto; } }
        .products_top .products_list li .support_box .support_txt {
          color: var(--color-main);
          font-size: 16px;
          font-weight: 600;
          text-align: center; }
          @media only screen and (max-width: 1000px) {
            .products_top .products_list li .support_box .support_txt {
              font-size: 12px; } }
          @media only screen and (max-width: 768px) {
            .products_top .products_list li .support_box .support_txt {
              font-size: 16px; } }
        .products_top .products_list li .support_box .main_txt {
          color: var(--color-main);
          font-size: 22px;
          font-weight: 600;
          text-align: center;
          position: relative; }
          @media only screen and (max-width: 1200px) {
            .products_top .products_list li .support_box .main_txt {
              font-size: min(5vw, 19px); } }
          .products_top .products_list li .support_box .main_txt span {
            font-size: 31px;
            font-weight: 600;
            margin: 0 5px 0 0; }
            @media only screen and (max-width: 1000px) {
              .products_top .products_list li .support_box .main_txt span {
                font-size: min(7vw, 27px); } }
          .products_top .products_list li .support_box .main_txt .main_txt_sub {
            font-size: 16px;
            position: absolute;
            top: -21px;
            left: 32px; }
            @media only screen and (max-width: 768px) {
              .products_top .products_list li .support_box .main_txt .main_txt_sub {
                font-size: 14px;
                position: absolute;
                top: -19px;
                left: 27px; } }
      .products_top .products_list li .link_box {
        width: 80%;
        margin: 0 auto; }
        @media only screen and (max-width: 768px) {
          .products_top .products_list li .link_box {
            width: 100%; } }
    .products_top .products_list .active_life .name_box .icon {
      width: 35px;
      margin: 0 15px 0 0; }
    .products_top .products_list .active_life .name_box .name_area {
      width: calc(100% - 50px); }
      .products_top .products_list .active_life .name_box .name_area .name {
        color: var(--color-active); }
    .products_top .products_list .active_life .mark {
      background-color: var(--color-active); }
    .products_top .products_list .active_life .support_box .main_txt {
      margin: 20px 0 0; }
      .products_top .products_list .active_life .support_box .main_txt span {
        color: var(--color-active);
        position: relative; }
      .products_top .products_list .active_life .support_box .main_txt .main_txt_sub {
        color: var(--color-active); }
    .products_top .products_list .slim_life .name_box .icon {
      width: 27px;
      margin: 0 17px 0 3px; }
    .products_top .products_list .slim_life .name_box .name_area {
      width: calc(100% - 47px); }
      .products_top .products_list .slim_life .name_box .name_area .name {
        color: var(--color-slim); }
    .products_top .products_list .slim_life .mark {
      background-color: var(--color-slim); }
    .products_top .products_list .slim_life .support_box .main_txt span {
      color: var(--color-slim); }
    .products_top .products_list .cbd .name_box .icon {
      width: 44px;
      margin: 0 15px 0 0; }
    .products_top .products_list .cbd .name_box .name_area {
      width: calc(100% - 58px); }
      .products_top .products_list .cbd .name_box .name_area .name {
        color: var(--color-cbd);
        font-size: 34px !important;
        font-weight: bold !important; }
        @media only screen and (max-width: 1000px) {
          .products_top .products_list .cbd .name_box .name_area .name {
            font-size: min(8vw, 30px) !important; } }
    .products_top .products_list .cbd .mark {
      background-color: var(--color-cbd); }
    .products_top .products_list .cbd .support_box {
      padding: 0px 0 0 0; }
      @media only screen and (max-width: 768px) {
        .products_top .products_list .cbd .support_box {
          padding: 0; } }
      .products_top .products_list .cbd .support_box .main_txt span {
        color: var(--color-cbd);
        font-weight: bold; }

.about_top {
  background: url("../img/common/bg.jpg");
  padding: 160px 0;
  position: relative;
  background-size: 4000px; }
  @media only screen and (max-width: 768px) {
    .about_top {
      padding: 90px 0;
      background-size: 2000px; } }
  .about_top:before {
    background: var(--color-w);
    content: '';
    height: 108%;
    top: -1px;
    width: 100%;
    position: absolute;
    opacity: 0.8; }
  @media only screen and (max-width: 768px) {
    .about_top .category_title {
      text-align: left;
      width: 90%;
      margin: 0 auto; }
    .about_top .category_title_sub {
      display: none; } }
  .about_top .about_box {
    margin: 40px 0 0; }
    @media only screen and (max-width: 768px) {
      .about_top .about_box {
        margin: 20px 0 0; } }
    .about_top .about_box .left {
      width: 56%;
      padding: 0 0 0 50px; }
      @media only screen and (max-width: 768px) {
        .about_top .about_box .left {
          width: 90%;
          padding: 0;
          margin: 0 auto; } }
      .about_top .about_box .left .main_txt {
        font-size: 20px;
        line-height: 2;
        margin: 0 0 20px; }
        @media only screen and (max-width: 768px) {
          .about_top .about_box .left .main_txt {
            font-size: 15px;
            letter-spacing: -0.5px; } }
        .about_top .about_box .left .main_txt .color {
          color: var(--color-main); }
        .about_top .about_box .left .main_txt .back_line {
          background: linear-gradient(transparent 20%, var(--color-main-bg) 20%); }
        .about_top .about_box .left .main_txt .attention01 {
          position: relative;
          display: inline-block; }
          .about_top .about_box .left .main_txt .attention01:before {
            content: '※1';
            font-size: 11px;
            color: var(--color-5);
            position: absolute;
            top: -10px;
            right: 0; }
            @media only screen and (max-width: 768px) {
              .about_top .about_box .left .main_txt .attention01:before {
                font-size: 10px; } }
        .about_top .about_box .left .main_txt .attention02 {
          position: relative;
          display: inline-block; }
          .about_top .about_box .left .main_txt .attention02:before {
            content: '※2';
            font-size: 11px;
            color: var(--color-5);
            position: absolute;
            top: -10px;
            right: 0; }
            @media only screen and (max-width: 768px) {
              .about_top .about_box .left .main_txt .attention02:before {
                font-size: 10px; } }
      .about_top .about_box .left .memo_txt {
        color: var(--color-4);
        margin: 0 0 15px; }
        @media only screen and (max-width: 768px) {
          .about_top .about_box .left .memo_txt {
            font-size: 11px; } }
        .about_top .about_box .left .memo_txt a {
          color: var(--color-4); }
        .about_top .about_box .left .memo_txt .label {
          margin: 0 6px 0 0; }
    .about_top .about_box .right {
      width: 44%;
      padding: 0 50px 0 80px; }
      @media only screen and (max-width: 768px) {
        .about_top .about_box .right {
          width: 100%;
          padding: 0 10%;
          margin: 30px auto 0; } }

.data_top {
  position: relative;
  background: var(--color-w);
  padding: 100px 0 140px; }
  @media only screen and (max-width: 768px) {
    .data_top {
      padding: 40px 0 40px; } }
  .data_top .waves {
    top: -149px;
    z-index: 100; }
    @media only screen and (max-width: 768px) {
      .data_top .waves {
        top: -70px; } }
  .data_top .inner {
    position: relative; }
    .data_top .inner .bg_img {
      position: absolute;
      width: 70%;
      left: -14%;
      top: 1%; }
    .data_top .inner .bg_img2 {
      z-index: 1;
      position: absolute;
      width: 77%;
      right: -32%;
      bottom: -7%; }
    .data_top .inner .icon {
      width: 60px;
      margin: 0px auto 20px; }
      @media only screen and (max-width: 768px) {
        .data_top .inner .icon {
          width: 40px; } }
    .data_top .inner .data_top_title {
      text-align: center;
      font-size: 20px;
      font-weight: 600;
      line-height: 1.7;
      color: var(--color-2); }
      @media only screen and (max-width: 768px) {
        .data_top .inner .data_top_title {
          font-size: 16px; } }
      .data_top .inner .data_top_title span {
        color: var(--color-main); }
    .data_top .inner .data_first {
      margin: 60px auto 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 30px;
      grid-row-gap: 0px; }
      @media only screen and (max-width: 768px) {
        .data_top .inner .data_first {
          margin: 30px auto 0;
          width: 90%;
          grid-template-columns: repeat(1, 1fr);
          grid-template-rows: 1fr;
          grid-column-gap: 0px;
          grid-row-gap: 40px; } }
      @media only screen and (max-width: 768px) {
        .data_top .inner .data_first .box01, .data_top .inner .data_first .box02 {
          border-bottom: 1px dashed var(--color-main);
          padding: 0 0 40px; } }
      .data_top .inner .data_first .box .card_title {
        font-size: min(1.8vw, 20px);
        color: var(--color-3);
        text-align: center; }
        @media only screen and (max-width: 768px) {
          .data_top .inner .data_first .box .card_title {
            font-size: min(8.5vw, 22px); } }
        .data_top .inner .data_first .box .card_title span {
          font-size: min(3.5vw, 35px);
          color: var(--color-main);
          font-weight: 600;
          margin: 0 5px; }
          @media only screen and (max-width: 1080px) {
            .data_top .inner .data_first .box .card_title span {
              font-size: min(9vw, 24px); } }
          @media only screen and (max-width: 768px) {
            .data_top .inner .data_first .box .card_title span {
              font-size: min(9vw, 28px); } }
      .data_top .inner .data_first .box .card_bottom_title {
        text-align: center;
        color: var(--color-4);
        height: 30px;
        font-size: 16px;
        padding: 2px 0 0; }
      .data_top .inner .data_first .box .card {
        background: var(--color-main);
        border-radius: 6px;
        padding: 10px;
        text-align: center;
        font-weight: 500;
        color: var(--color-w);
        position: relative; }
        @media only screen and (max-width: 768px) {
          .data_top .inner .data_first .box .card {
            max-width: 400px;
            margin: 0 auto; } }
        .data_top .inner .data_first .box .card .card_inner {
          width: 100%; }
        .data_top .inner .data_first .box .card .small {
          font-size: 14px; }
          @media only screen and (max-width: 1080px) {
            .data_top .inner .data_first .box .card .small {
              font-size: 12px; } }
        .data_top .inner .data_first .box .card .midium {
          font-size: 20px;
          line-height: 1.4; }
          @media only screen and (max-width: 1080px) {
            .data_top .inner .data_first .box .card .midium {
              font-size: 15px; } }
        .data_top .inner .data_first .box .card .large {
          font-size: 25px;
          line-height: 1.3; }
          @media only screen and (max-width: 1080px) {
            .data_top .inner .data_first .box .card .large {
              font-size: 19px; } }
        .data_top .inner .data_first .box .card .type {
          font-size: 12px; }
      .data_top .inner .data_first .box .card_full {
        height: 200px; }
        @media only screen and (max-width: 768px) {
          .data_top .inner .data_first .box .card_full {
            height: 160px; } }
      .data_top .inner .data_first .box .card_half {
        height: 85px; }
      .data_top .inner .data_first .box .graph {
        margin: 30px auto 20px;
        width: 80%; }
        @media only screen and (max-width: 768px) {
          .data_top .inner .data_first .box .graph {
            margin: 0px auto 20px;
            max-width: 300px; } }
      .data_top .inner .data_first .box .graph_txt {
        color: var(--color-4);
        text-align: center;
        font-size: 13px;
        font-weight: 600; }
      .data_top .inner .data_first .box .graph_txt_sub {
        margin: 20px auto 0;
        font-size: 12px;
        font-weight: 500;
        color: var(--color-4); }
        @media only screen and (max-width: 768px) {
          .data_top .inner .data_first .box .graph_txt_sub {
            font-size: 11px;
            max-width: 300px;
            margin: 20px auto 0; } }
        .data_top .inner .data_first .box .graph_txt_sub span {
          color: var(--color-main); }
      .data_top .inner .data_first .box03 .graph_txt_sub {
        width: 200px; }
    .data_top .inner .data_second {
      margin: 60px auto 0; }
      @media only screen and (max-width: 768px) {
        .data_top .inner .data_second {
          margin: 30px auto 0; } }
      .data_top .inner .data_second .left {
        width: 50%;
        padding: 0 40px 0 0;
        border-right: 1px dashed var(--color-main); }
        @media only screen and (max-width: 768px) {
          .data_top .inner .data_second .left {
            width: 100%; } }
      .data_top .inner .data_second .right {
        width: 50%;
        padding: 0 0 0 40px; }
        @media only screen and (max-width: 768px) {
          .data_top .inner .data_second .right {
            width: 100%; } }
      .data_top .inner .data_second .block .block_title {
        color: var(--color-main);
        font-size: 20px;
        line-height: 1.8;
        font-weight: 500;
        margin: 0 0 10px; }
        @media only screen and (max-width: 768px) {
          .data_top .inner .data_second .block .block_title {
            font-size: 18px;
            line-height: 1.4; } }
      .data_top .inner .data_second .block .txt {
        font-size: 14px;
        line-height: 1.8; }
        @media only screen and (max-width: 768px) {
          .data_top .inner .data_second .block .txt {
            font-size: 13px;
            line-height: 1.8; } }
      .data_top .inner .data_second .block .memo {
        font-size: 12px;
        color: var(--color-5);
        margin: 20px 0 0; }
        @media only screen and (max-width: 768px) {
          .data_top .inner .data_second .block .memo {
            font-size: 11px; } }
      .data_top .inner .data_second .block_second {
        margin: 40px 0 0; }
    .data_top .inner .data_img {
      width: 44%;
      margin: 70px 0 0 auto;
      z-index: 100; }
      @media only screen and (max-width: 768px) {
        .data_top .inner .data_img {
          width: 52%;
          margin: 20px 0 0 auto; } }

.is-load .hero_top {
  width: 100%; }
  .is-load .hero_top .right {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
    -webkit-filter: blur(0px) brightness(1);
    filter: blur(0px) brightness(1);
    -webkit-transition: opacity 2s ease 0.1s, -webkit-transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.6s, -webkit-filter 2s ease 0.1s;
    transition: opacity 2s ease 0.1s, -webkit-transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.6s, -webkit-filter 2s ease 0.1s;
    transition: transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.6s, opacity 2s ease 0.1s, filter 2s ease 0.1s;
    transition: transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.6s, opacity 2s ease 0.1s, filter 2s ease 0.1s, -webkit-transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.6s, -webkit-filter 2s ease 0.1s; }
  .is-load .hero_top .bg_img {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
    -webkit-filter: blur(0px) brightness(1);
    filter: blur(0px) brightness(1);
    -webkit-transition: opacity 2s ease 0.1s, -webkit-transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.6s, -webkit-filter 2s ease 0.1s;
    transition: opacity 2s ease 0.1s, -webkit-transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.6s, -webkit-filter 2s ease 0.1s;
    transition: transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.6s, opacity 2s ease 0.1s, filter 2s ease 0.1s;
    transition: transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.6s, opacity 2s ease 0.1s, filter 2s ease 0.1s, -webkit-transform 3s cubic-bezier(0.21, 0.75, 0.38, 0.95) 0.6s, -webkit-filter 2s ease 0.1s; }
  .is-load .hero_top .left {
    -webkit-transform: translateY(0px) scale(1);
    -ms-transform: translateY(0px) scale(1);
    transform: translateY(0px) scale(1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
    -webkit-filter: blur(0px) brightness(1);
    filter: blur(0px) brightness(1);
    -webkit-transition: opacity 1s ease 1s, -webkit-transform 1.5s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1s, -webkit-filter 1.5s ease 1s;
    transition: opacity 1s ease 1s, -webkit-transform 1.5s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1s, -webkit-filter 1.5s ease 1s;
    transition: transform 1s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1s, opacity 1.5s ease 1s, filter 1s ease 1s;
    transition: transform 1s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1s, opacity 1.5s ease 1s, filter 1.5s ease 1s, -webkit-transform 1.5s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1s, -webkit-filter 1.5s ease 1s; }
.is-load .products_top .inner {
  -webkit-transform: translateY(0px) scale(1);
  -ms-transform: translateY(0px) scale(1);
  transform: translateY(0px) scale(1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  opacity: 1;
  -webkit-filter: blur(0px) brightness(1);
  filter: blur(0px) brightness(1);
  -webkit-transition: opacity 1s ease 1s, -webkit-transform 1.5s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1s, -webkit-filter 1.5s ease 1s;
  transition: opacity 1s ease 1s, -webkit-transform 1.5s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1s, -webkit-filter 1.5s ease 1s;
  transition: transform 1s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1s, opacity 1.5s ease 1s, filter 1s ease 1s;
  transition: transform 1s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1s, opacity 1.5s ease 1s, filter 1.5s ease 1s, -webkit-transform 1.5s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1s, -webkit-filter 1.5s ease 1s; }

/* ==========================================================================

	products_page
	
========================================================================== */
.products_main {
  position: relative;
  margin: 150px 0 0;
  padding: 101px 0 100px; }
  @media only screen and (max-width: 768px) {
    .products_main {
      margin: 20px 0 0;
      padding: 0 0 20px; } }
  .products_main .inner {
    position: relative; }
    @media only screen and (max-width: 768px) {
      .products_main .inner {
        padding: 60px 0 0; } }
    .products_main .inner .icon_img {
      position: absolute;
      top: -55px;
      left: -55px;
      width: 50px; }
      @media only screen and (max-width: 768px) {
        .products_main .inner .icon_img {
          position: absolute;
          top: 42px;
          left: -13px;
          width: 41px; } }
    .products_main .inner .bg01 {
      position: absolute;
      top: -7%;
      left: -40%;
      width: 50%; }
      @media only screen and (max-width: 768px) {
        .products_main .inner .bg01 {
          top: 1%;
          left: -20%;
          width: 100%; } }
    .products_main .inner .bg02 {
      position: absolute;
      bottom: -78%;
      right: -12%;
      width: 80%; }
      @media only screen and (max-width: 768px) {
        .products_main .inner .bg02 {
          position: absolute;
          bottom: -21%;
          right: -12%;
          width: 103%; } }
  .products_main:before {
    background: var(--color-w);
    content: '';
    height: 100%;
    top: 39px;
    width: 100%;
    position: absolute; }
  .products_main .waves {
    top: -110px; }
    @media only screen and (max-width: 768px) {
      .products_main .waves {
        top: -31px; } }
  .products_main .img {
    position: relative;
    width: 55%;
    vertical-align: bottom;
    opacity: 0;
    transform: translate(0, 15px);
    transition: 1.8s cubic-bezier(0.21, 0.75, 0.38, 0.95);
    -webkit-filter: blur(5px) brightness(1.5);
    filter: blur(5px) brightness(1.5); }
    @media only screen and (max-width: 768px) {
      .products_main .img {
        width: 90%;
        margin: 0 auto; } }
    .products_main .img img {
      vertical-align: bottom;
      border: 1px solid var(--color-main); }
  .products_main .left {
    width: 45%;
    padding: 0 0 0 40px;
    opacity: 0;
    transform: translate(0, 15px);
    transition: 1.8s cubic-bezier(0.21, 0.75, 0.38, 0.95) 1s;
    -webkit-filter: blur(5px) brightness(1.5);
    filter: blur(5px) brightness(1.5); }
    @media only screen and (max-width: 768px) {
      .products_main .left {
        width: 90%;
        margin: 30px auto 0;
        padding: 0; } }
  .products_main .txtbox {
    margin: 0px 0 0; }
    .products_main .txtbox .mark {
      padding: 4px 10px;
      color: var(--color-w);
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 1px;
      display: inline-block; }
      @media only screen and (max-width: 1000px) {
        .products_main .txtbox .mark {
          font-size: 11px; } }
    .products_main .txtbox .name_box {
      margin: 18px 0 0;
      height: 72px; }
      @media only screen and (max-width: 768px) {
        .products_main .txtbox .name_box {
          margin: 10px 0 0; } }
      .products_main .txtbox .name_box .name_area .sub {
        font-size: 13px;
        font-weight: 500;
        color: var(--color-3); }
        @media only screen and (max-width: 1000px) {
          .products_main .txtbox .name_box .name_area .sub {
            font-size: 10px; } }
        @media only screen and (max-width: 768px) {
          .products_main .txtbox .name_box .name_area .sub {
            font-size: 11px; } }
      .products_main .txtbox .name_box .name_area .name {
        font-size: 35px;
        font-weight: 600;
        display: inline-block;
        line-height: 1.3; }
        @media only screen and (max-width: 1000px) {
          .products_main .txtbox .name_box .name_area .name {
            font-size: 25px; } }
        @media only screen and (max-width: 768px) {
          .products_main .txtbox .name_box .name_area .name {
            font-size: 28px; } }
  .products_main .support_box {
    margin: 30px 0; }
    @media only screen and (max-width: 768px) {
      .products_main .support_box {
        margin: 18px 0; } }
    .products_main .support_box .support_txt {
      color: var(--color-main);
      font-size: 16px;
      font-weight: 600;
      text-align: center; }
    .products_main .support_box .main_txt {
      color: var(--color-main);
      font-size: 22px;
      font-weight: 600;
      text-align: center; }
      .products_main .support_box .main_txt span {
        font-size: 34px;
        font-weight: 600;
        margin: 0 5px 0 0;
        position: relative; }
        @media only screen and (max-width: 1000px) {
          .products_main .support_box .main_txt span {
            font-size: 30px; } }
      .products_main .support_box .main_txt .main_txt_sub {
        font-size: 16px;
        position: absolute;
        top: -21px;
        left: 32px; }
        @media only screen and (max-width: 1000px) {
          .products_main .support_box .main_txt .main_txt_sub {
            font-size: 13px;
            top: -17px;
            left: 35px; } }
  .products_main .recommend_box {
    background: var(--color-main-bg2);
    border-radius: 20px;
    padding: 30px; }
    .products_main .recommend_box .title {
      color: var(--color-main);
      font-size: 18px;
      font-weight: 600;
      text-align: center; }
      @media only screen and (max-width: 768px) {
        .products_main .recommend_box .title {
          font-size: 16px; } }
    .products_main .recommend_box .sub {
      color: var(--color-main);
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      margin: 0 0 20px; }

.is-load .products_main .img, .is-load .products_main .left {
  opacity: 1;
  -webkit-filter: blur(0px) brightness(1);
  filter: blur(0px) brightness(1);
  -opacity: 1;
  transform: translate(0, 0); }

.products_illust {
  position: relative;
  background: var(--color-w);
  padding: 0 0 100px; }
  @media only screen and (max-width: 768px) {
    .products_illust {
      padding: 0 0 50px; } }
  .products_illust .waves {
    transform: scale(1, -1);
    bottom: -142px;
    z-index: 100; }
    @media only screen and (max-width: 768px) {
      .products_illust .waves {
        bottom: -59px; } }
  .products_illust .title_box {
    margin: 0 auto; }
  .products_illust .img_bar {
    width: auto;
    padding: 10px 30px 10px 35px;
    border-radius: 30px;
    font-size: min(1.8vw, 27px);
    top: -26px;
    left: -0.5%;
    color: var(--color-w);
    font-weight: 500;
    text-align: center; }
    @media only screen and (max-width: 768px) {
      .products_illust .img_bar {
        font-size: min(4.4vw, 20px); } }
  .products_illust .illust_list {
    margin: 60px auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 0px;
    position: relative; }
    @media only screen and (max-width: 768px) {
      .products_illust .illust_list {
        display: block;
        margin: 40px auto 0; } }
    @media only screen and (max-width: 768px) {
      .products_illust .illust_list li {
        width: 100%; } }
    @media only screen and (max-width: 768px) {
      .products_illust .illust_list .illust_01 {
        width: 100%; }
      .products_illust .illust_list .illust_02 {
        position: absolute;
        top: 0;
        right: 5%;
        width: 42%;
        display: none; }
      .products_illust .illust_list .illust_03 {
        position: absolute;
        top: 35%;
        left: -4%;
        display: none; }
      .products_illust .illust_list .illust_04 {
        position: absolute;
        bottom: 10%;
        left: 33%;
        width: 38%;
        display: none; }
      .products_illust .illust_list .illust_05 {
        position: absolute;
        top: 35%;
        right: -3%;
        display: none; } }
    .products_illust .illust_list .txtbox {
      margin: 40px 0 0;
      text-align: center; }
      @media only screen and (max-width: 768px) {
        .products_illust .illust_list .txtbox {
          margin: 10px 0 0;
          display: none; } }
      .products_illust .illust_list .txtbox .main {
        font-size: min(2vw, 23px);
        position: relative;
        font-weight: 600;
        text-align: center;
        display: inline-block;
        margin: 0 auto; }
        @media only screen and (max-width: 768px) {
          .products_illust .illust_list .txtbox .main {
            font-size: 16px; } }
        .products_illust .illust_list .txtbox .main span {
          position: absolute;
          top: 0px;
          right: -11px;
          font-weight: 600;
          font-size: 11px;
          color: var(--color-main); }
          @media only screen and (max-width: 768px) {
            .products_illust .illust_list .txtbox .main span {
              font-size: 10px;
              right: -10px; } }
      .products_illust .illust_list .txtbox .sub {
        font-size: min(1.3vw, 14px);
        font-weight: 600;
        text-align: center;
        color: var(--color-main); }
        @media only screen and (max-width: 768px) {
          .products_illust .illust_list .txtbox .sub {
            font-size: 11px; } }
  .products_illust .for_txt {
    font-size: 25px;
    text-align: center;
    font-weight: 600;
    margin: 70px 0 0; }
    @media only screen and (max-width: 768px) {
      .products_illust .for_txt {
        font-size: 18px;
        margin: 30px auto 0; } }
  .products_illust .attention {
    color: var(--color-main);
    text-align: center;
    font-size: 13px;
    font-weight: 600; }
    @media only screen and (max-width: 768px) {
      .products_illust .attention {
        font-size: 11px; } }

.products_effect {
  padding: 200px 0;
  background-image: url("../img/common/bg.jpg");
  background-size: 10000px;
  background-position: top;
  position: relative; }
  @media only screen and (max-width: 768px) {
    .products_effect {
      padding: 100px 0; } }
  .products_effect .waves {
    top: 0px;
    transform: scale(1, -1); }
    @media only screen and (max-width: 768px) {
      .products_effect .waves {
        top: 0px; } }
  .products_effect .inner {
    position: relative; }
    .products_effect .inner .bg01 {
      position: absolute;
      top: -2%;
      right: -20%;
      width: 50%; }
      @media only screen and (max-width: 768px) {
        .products_effect .inner .bg01 {
          width: 100%;
          top: -1%;
          right: -60%; } }
    .products_effect .inner .bg02 {
      position: absolute;
      bottom: -3%;
      left: -21%;
      width: 50%; }
      @media only screen and (max-width: 768px) {
        .products_effect .inner .bg02 {
          width: 100%;
          bottom: -2%;
          left: -71%; } }
  .products_effect:before {
    background: var(--color-w);
    content: '';
    height: 101%;
    top: -1px;
    width: 100%;
    position: absolute;
    opacity: 0.7; }
  .products_effect .effect_area {
    margin: 50px auto 0; }
    @media only screen and (max-width: 768px) {
      .products_effect .effect_area {
        margin: 20px auto 0; } }
    .products_effect .effect_area .number {
      width: 44px;
      height: 44px;
      text-align: center;
      color: var(--color-w);
      line-height: 44px;
      padding: 0 2px 0 0;
      font-size: 25px;
      border-radius: 50%;
      font-weight: 600;
      margin: 0 auto 6px; }
      @media only screen and (max-width: 768px) {
        .products_effect .effect_area .number {
          width: 34px;
          height: 34px;
          line-height: 34px;
          font-size: 15px; } }
    .products_effect .effect_area .effect_name {
      text-align: center; }
      .products_effect .effect_area .effect_name span {
        font-size: 30px;
        text-align: center;
        line-height: 1.8;
        display: inline-block;
        font-weight: 600;
        position: relative; }
        @media only screen and (max-width: 768px) {
          .products_effect .effect_area .effect_name span {
            font-size: 17.5px; } }
      .products_effect .effect_area .effect_name span.fucorse {
        font-size: 40px; }
        @media only screen and (max-width: 768px) {
          .products_effect .effect_area .effect_name span.fucorse {
            font-size: 30px; } }
      .products_effect .effect_area .effect_name span.cbd {
        font-size: 50px;
        font-weight: bold; }
        @media only screen and (max-width: 768px) {
          .products_effect .effect_area .effect_name span.cbd {
            font-size: 40px; } }
      @media only screen and (max-width: 768px) {
        .products_effect .effect_area .effect_name span.top {
          letter-spacing: -0.5px; } }
      .products_effect .effect_area .effect_name span.top:before {
        content: '';
        background: rgba(255, 255, 255, 0.9);
        position: absolute;
        height: 73%;
        top: 15%;
        left: 4%;
        width: 96%;
        z-index: -1; }
        @media only screen and (max-width: 768px) {
          .products_effect .effect_area .effect_name span.top:before {
            left: 3%; } }
      .products_effect .effect_area .effect_name span.bottom:before {
        content: '';
        background: rgba(255, 255, 255, 0.9);
        position: absolute;
        height: 73%;
        top: 15%;
        left: 4%;
        width: 96%;
        z-index: -1; }
      .products_effect .effect_area .effect_name span.top_2:before {
        content: '';
        background: rgba(255, 255, 255, 0.9);
        position: absolute;
        height: 73%;
        top: 15%;
        left: 0%;
        width: 100%;
        z-index: -1; }
      .products_effect .effect_area .effect_name span.bottom_2:before {
        content: '';
        background: rgba(255, 255, 255, 0.9);
        position: absolute;
        height: 73%;
        top: 15%;
        left: 0;
        width: 100%;
        z-index: -1; }
      .products_effect .effect_area .effect_name span.small {
        font-size: 25px; }
    .products_effect .effect_area .image_box {
      width: 70%;
      margin: 20px auto;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 20px;
      overflow: hidden; }
      @media only screen and (max-width: 768px) {
        .products_effect .effect_area .image_box {
          width: 100%; } }
      .products_effect .effect_area .image_box .left {
        height: 180px;
        border-radius: 20px;
        width: 33%;
        overflow: hidden; }
        @media only screen and (max-width: 768px) {
          .products_effect .effect_area .image_box .left {
            width: 40%;
            height: 120px; } }
        .products_effect .effect_area .image_box .left img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: 50% 60%; }
      .products_effect .effect_area .image_box .left_slim {
        height: 220px; }
        @media only screen and (max-width: 768px) {
          .products_effect .effect_area .image_box .left_slim {
            width: 40%;
            height: 120px; } }
      .products_effect .effect_area .image_box .txt {
        width: 67%;
        padding: 30px; }
        @media only screen and (max-width: 768px) {
          .products_effect .effect_area .image_box .txt {
            width: 60%;
            padding: 0 20px; } }
        .products_effect .effect_area .image_box .txt .main {
          font-size: 16px;
          font-weight: 600; }
          @media only screen and (max-width: 768px) {
            .products_effect .effect_area .image_box .txt .main {
              font-size: 11px;
              text-align: center; } }
        .products_effect .effect_area .image_box .txt .sub {
          font-size: 14px;
          font-weight: 500;
          color: var(--color-4);
          margin: 10px 0 0; }
          @media only screen and (max-width: 768px) {
            .products_effect .effect_area .image_box .txt .sub {
              font-size: 10px;
              text-align: center; } }
          .products_effect .effect_area .image_box .txt .sub span {
            font-size: 10px;
            padding: 0 0 0 4px; }
    .products_effect .effect_area .effect_txt_box {
      text-align: center; }
    .products_effect .effect_area .effect_txt {
      background: linear-gradient(transparent 0%, var(--color-w) 0%);
      margin: 0 auto;
      padding: 0 20px;
      line-height: 2;
      font-size: 25px;
      text-align: center;
      display: inline-block;
      font-weight: 600;
      color: var(--color-3); }
      @media only screen and (max-width: 768px) {
        .products_effect .effect_area .effect_txt {
          font-size: 14px;
          padding: 0 10px; } }
      .products_effect .effect_area .effect_txt span {
        font-size: 30px; }
        @media only screen and (max-width: 768px) {
          .products_effect .effect_area .effect_txt span {
            font-size: 21px; } }
    .products_effect .effect_area .effect_list {
      margin: 60px auto; }
      @media only screen and (max-width: 768px) {
        .products_effect .effect_area .effect_list {
          margin: 20px auto; } }
      .products_effect .effect_area .effect_list li {
        background: var(--color-w);
        border-radius: 20px;
        padding: 60px 40px; }
        @media only screen and (max-width: 768px) {
          .products_effect .effect_area .effect_list li {
            padding: 40px 20px; } }
        .products_effect .effect_area .effect_list li:not(:last-child) {
          margin-bottom: 30px; }
        .products_effect .effect_area .effect_list li .sub {
          font-size: 17px;
          color: var(--color-4);
          text-align: center;
          font-weight: 500;
          margin: 0 0 6px; }
          @media only screen and (max-width: 768px) {
            .products_effect .effect_area .effect_list li .sub {
              font-size: 12px;
              margin: 6px 0 0; } }
        .products_effect .effect_area .effect_list li .number_title .list_number {
          width: 44px;
          height: 44px;
          text-align: center;
          margin: 0 20px 0 0;
          line-height: 41px;
          border-radius: 50%;
          font-size: 25px;
          font-weight: 600; }
          @media only screen and (max-width: 768px) {
            .products_effect .effect_area .effect_list li .number_title .list_number {
              width: 34px;
              height: 34px;
              line-height: 29px;
              font-size: 15px;
              margin: 0 auto; } }
        .products_effect .effect_area .effect_list li .number_title .list_number_first {
          margin: 0 5px 0 0 !important; }
        @media only screen and (max-width: 768px) {
          .products_effect .effect_area .effect_list li .number_title .list_number_second {
            margin: 0 !important; } }
        .products_effect .effect_area .effect_list li .number_title .title {
          font-size: 25px;
          color: var(--color-4);
          text-align: center;
          font-weight: 500; }
          @media only screen and (max-width: 1000px) {
            .products_effect .effect_area .effect_list li .number_title .title {
              font-size: 21px; } }
          @media only screen and (max-width: 768px) {
            .products_effect .effect_area .effect_list li .number_title .title {
              font-size: 17px; } }
          .products_effect .effect_area .effect_list li .number_title .title span {
            font-size: 30px;
            font-weight: 600; }
            @media only screen and (max-width: 1000px) {
              .products_effect .effect_area .effect_list li .number_title .title span {
                font-size: 26px; } }
            @media only screen and (max-width: 768px) {
              .products_effect .effect_area .effect_list li .number_title .title span {
                font-size: 21px; } }
        .products_effect .effect_area .effect_list li .list_inner {
          width: 86%;
          margin: 60px auto 0; }
          @media only screen and (max-width: 1100px) {
            .products_effect .effect_area .effect_list li .list_inner {
              width: 100%;
              margin: 30px auto 0; } }
          @media only screen and (max-width: 768px) {
            .products_effect .effect_area .effect_list li .list_inner {
              width: 100%;
              margin: 20px auto 0; } }
          .products_effect .effect_area .effect_list li .list_inner .graph {
            width: 60%;
            padding: 0 40px 0 0; }
            @media only screen and (max-width: 768px) {
              .products_effect .effect_area .effect_list li .list_inner .graph {
                width: 100%;
                padding: 0; } }
          .products_effect .effect_area .effect_list li .list_inner .graph_slim {
            width: 49%; }
            @media only screen and (max-width: 768px) {
              .products_effect .effect_area .effect_list li .list_inner .graph_slim {
                width: 100%;
                padding: 0; } }
          .products_effect .effect_area .effect_list li .list_inner .cbd_image {
            width: 57%;
            padding: 0 40px 0 0; }
            @media only screen and (max-width: 768px) {
              .products_effect .effect_area .effect_list li .list_inner .cbd_image {
                width: 100%;
                padding: 0; } }
          .products_effect .effect_area .effect_list li .list_inner .cbd_txt {
            width: 43%;
            font-size: 15px;
            line-height: 2.5;
            font-weight: 500;
            color: var(--color-3); }
            @media only screen and (max-width: 768px) {
              .products_effect .effect_area .effect_list li .list_inner .cbd_txt {
                width: 100%;
                font-size: 12px;
                line-height: 2;
                margin: 20px 0 0; } }
          .products_effect .effect_area .effect_list li .list_inner .outline {
            width: 40%;
            border-radius: 20px;
            padding: 40px 30px;
            background: var(--color-main-bg2); }
            @media only screen and (max-width: 768px) {
              .products_effect .effect_area .effect_list li .list_inner .outline {
                width: 100%;
                padding: 20px;
                margin: 30px 0 0; } }
            .products_effect .effect_area .effect_list li .list_inner .outline .label {
              color: var(--color-main);
              font-weight: 600;
              margin: 0 0 14px;
              font-size: 14px; }
              @media only screen and (max-width: 768px) {
                .products_effect .effect_area .effect_list li .list_inner .outline .label {
                  font-size: 12px;
                  margin: 0 0 10px; } }
            .products_effect .effect_area .effect_list li .list_inner .outline .txt {
              color: var(--color-4);
              font-weight: 500;
              margin: 0 0 10px; }
              @media only screen and (max-width: 768px) {
                .products_effect .effect_area .effect_list li .list_inner .outline .txt {
                  font-size: 10px; } }
              .products_effect .effect_area .effect_list li .list_inner .outline .txt .txt_label {
                width: 100%;
                display: block;
                margin: 0 0 0 -5px;
                font-size: 11px; }
                @media only screen and (max-width: 1000px) {
                  .products_effect .effect_area .effect_list li .list_inner .outline .txt .txt_label {
                    font-size: 11px; } }
                @media only screen and (max-width: 768px) {
                  .products_effect .effect_area .effect_list li .list_inner .outline .txt .txt_label {
                    width: 100%;
                    display: block;
                    margin: 0 0 0 -5px; } }
              .products_effect .effect_area .effect_list li .list_inner .outline .txt .txt_outline {
                width: 100%;
                display: block;
                opacity: 0.9;
                font-size: 11px; }
                @media only screen and (max-width: 1000px) {
                  .products_effect .effect_area .effect_list li .list_inner .outline .txt .txt_outline {
                    font-size: 11px; } }
                @media only screen and (max-width: 768px) {
                  .products_effect .effect_area .effect_list li .list_inner .outline .txt .txt_outline {
                    width: 100%;
                    display: block; } }
            .products_effect .effect_area .effect_list li .list_inner .outline .source_txt {
              color: var(--color-5);
              font-weight: 500;
              font-size: 10px;
              margin: 15px 0 0; }
  .products_effect .effect_area_second {
    margin: 140px auto 0; }
    @media only screen and (max-width: 768px) {
      .products_effect .effect_area_second {
        margin: 70px auto 0; } }
  .products_effect .number_title_second {
    margin: 60px auto 0; }

.products_info {
  background: var(--color-w);
  padding: 100px 0;
  position: relative; }
  @media only screen and (max-width: 768px) {
    .products_info {
      padding: 60px 0; } }
  .products_info .waves {
    top: -150px; }
    @media only screen and (max-width: 768px) {
      .products_info .waves {
        top: -70px; } }
  .products_info .bold {
    font-size: 16px;
    font-weight: 600;
    margin: 40px 0 8px;
    color: var(--color-2); }
    @media only screen and (max-width: 768px) {
      .products_info .bold {
        font-size: 14px; } }
  .products_info .txt {
    font-size: 13px;
    color: var(--color-4); }
    @media only screen and (max-width: 768px) {
      .products_info .txt {
        font-size: 11px; } }
  .products_info .accordion {
    margin: 40px 0 0;
    background: var(--color-w);
    padding: 22px 30px;
    font-size: 19px;
    font-weight: 600;
    color: var(--color-main);
    border-top: 1px solid var(--color-main);
    border-bottom: 1px solid var(--color-main);
    cursor: pointer;
    position: relative;
    line-height: 1; }
    @media only screen and (max-width: 768px) {
      .products_info .accordion {
        padding: 22px 10px;
        font-size: 15px; } }
  .products_info .content {
    list-style-type: none;
    margin: 0px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    color: var(--color-2);
    background: var(--color-main-bg2);
    transition: max-height 0.2s ease;
    letter-spacing: 0; }
  .products_info .c_inner {
    background: var(--color-main-bg2);
    padding: 20px 30px 30px; }
    @media only screen and (max-width: 768px) {
      .products_info .c_inner {
        padding: 20px 20px 30px; } }
    .products_info .c_inner .block {
      margin: 0 0 18px; }
      .products_info .c_inner .block .label {
        color: var(--color-main);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.5px; }
        @media only screen and (max-width: 768px) {
          .products_info .c_inner .block .label {
            font-size: 13px; } }
      .products_info .c_inner .block .block_txt {
        color: var(--color-3);
        font-size: 13px;
        margin: 3px 1px 0;
        line-height: 1.6; }
        @media only screen and (max-width: 768px) {
          .products_info .c_inner .block .block_txt {
            font-size: 12px; } }
  .products_info .symbol {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 17px;
    right: 30px; }
    @media only screen and (max-width: 768px) {
      .products_info .symbol {
        right: 10px; } }
  .products_info .symbol span {
    display: block;
    background-color: var(--color-main);
    width: 100%;
    height: 2px;
    border-radius: 4px;
    transition: all 0.4s ease; }
  .products_info .symbol span:nth-of-type(1) {
    transform: translateX(15px); }
  .products_info .symbol span:nth-of-type(2) {
    transform: rotate(-90deg); }
  .products_info .accordion.active .symbol span:nth-of-type(2) {
    transform: rotate(0deg); }

.active_page .color {
  color: var(--color-active); }
.active_page .bg {
  background-color: var(--color-active); }
.active_page .border {
  border: 3px solid var(--color-active); }
.active_page .name_box .icon {
  width: 35px;
  margin: 0 15px 0 0; }
.active_page .name_box .name_area {
  width: calc(100% - 50px); }
  .active_page .name_box .name_area .name {
    color: var(--color-active); }
.active_page .mark {
  background-color: var(--color-active); }
.active_page .support_box .main_txt {
  margin: 20px 0 0; }
  .active_page .support_box .main_txt span {
    color: var(--color-active); }
.active_page .recommend_box .list {
  width: 85%;
  margin: 0 auto; }
  @media only screen and (max-width: 1000px) {
    .active_page .recommend_box .list {
      width: 100%; } }
  @media only screen and (max-width: 768px) {
    .active_page .recommend_box .list {
      width: 95%; } }
.active_page .products_illust .title_box .icon {
  width: 50px;
  margin: 0 20px 0 0; }
  @media only screen and (max-width: 768px) {
    .active_page .products_illust .title_box .icon {
      width: 30px;
      margin: 0 auto 10px; } }
.active_page .products_illust .illust_list .txtbox .main {
  color: var(--color-active); }
.active_page .products_illust .illust_list .illust_03 .txtbox {
  margin: 20px auto 0; }
  @media only screen and (max-width: 900px) {
    .active_page .products_illust .illust_list .illust_03 .txtbox {
      margin: 24px auto 0; } }
  @media only screen and (max-width: 768px) {
    .active_page .products_illust .illust_list .illust_03 .txtbox {
      margin: 0 auto; } }
.active_page .products_illust .illust_list .illust_04 .txtbox {
  margin: 20px auto 0; }
  @media only screen and (max-width: 900px) {
    .active_page .products_illust .illust_list .illust_04 .txtbox {
      margin: 24px auto 0; } }
  @media only screen and (max-width: 768px) {
    .active_page .products_illust .illust_list .illust_04 .txtbox {
      margin: 0 auto; } }
.active_page .products_illust .for_txt {
  color: var(--color-active); }
@media only screen and (max-width: 1000px) and (min-width: 769px) {
  .active_page .list_01 .list_inner, .active_page .list_02 .list_inner, .active_page .list_03 .list_inner {
    display: block; }
    .active_page .list_01 .list_inner .graph, .active_page .list_02 .list_inner .graph, .active_page .list_03 .list_inner .graph {
      width: 70% !important;
      margin: 0px auto 0; }
    .active_page .list_01 .list_inner .outline, .active_page .list_02 .list_inner .outline, .active_page .list_03 .list_inner .outline {
      width: 70% !important;
      margin: 30px auto 0; } }

.slim_page .color {
  color: var(--color-slim); }
.slim_page .bg {
  background-color: var(--color-slim); }
.slim_page .border {
  border: 3px solid var(--color-slim); }
.slim_page .products_effect .effect_area .number {
  margin: 0 10px 0 0; }
  @media only screen and (max-width: 768px) {
    .slim_page .products_effect .effect_area .number {
      margin: 0 auto; } }
@media only screen and (max-width: 768px) {
  .slim_page .products_effect .effect_area .image_box .left {
    height: 180px !important; } }
.slim_page .name_box .icon {
  width: 27px;
  margin: 0 17px 0 3px; }
.slim_page .name_box .name_area {
  width: calc(100% - 47px); }
  .slim_page .name_box .name_area .name {
    color: var(--color-slim); }
.slim_page .mark {
  background-color: var(--color-slim); }
.slim_page .support_box .main_txt span {
  color: var(--color-slim); }
.slim_page .recommend_box .list {
  width: 70%;
  margin: 0 auto; }
  @media only screen and (max-width: 1000px) {
    .slim_page .recommend_box .list {
      width: 100%; } }
  @media only screen and (max-width: 768px) {
    .slim_page .recommend_box .list {
      width: 95%; } }
.slim_page .products_illust .title_box .icon {
  width: 50px;
  margin: 0 20px 0 0; }
  @media only screen and (max-width: 768px) {
    .slim_page .products_illust .title_box .icon {
      width: 30px;
      margin: 0 auto 10px; } }
.slim_page .products_illust .illust_list .txtbox .main {
  color: var(--color-slim); }
@media only screen and (max-width: 768px) {
  .slim_page .products_illust .illust_list .illust_04 .txtbox {
    margin: 0 auto; } }
.slim_page .products_illust .for_txt {
  color: var(--color-slim); }
.slim_page .outline_100 {
  width: 100% !important; }
@media only screen and (max-width: 1000px) and (min-width: 769px) {
  .slim_page .list_03 .list_inner, .slim_page .list_04 .list_inner {
    display: block; }
    .slim_page .list_03 .list_inner .graph, .slim_page .list_04 .list_inner .graph {
      width: 70% !important;
      margin: 0px auto 0; }
    .slim_page .list_03 .list_inner .outline, .slim_page .list_04 .list_inner .outline {
      width: 70% !important;
      margin: 30px auto 0; } }

.cbd_page .color {
  color: var(--color-cbd); }
.cbd_page .bg {
  background-color: var(--color-cbd); }
.cbd_page .border {
  border: 3px solid var(--color-cbd); }
.cbd_page .name_bottom_txt {
  font-size: 19px;
  font-weight: 600;
  margin: 6px 0 0; }
  @media only screen and (max-width: 768px) {
    .cbd_page .name_bottom_txt {
      font-size: 15px; } }
.cbd_page .effect_area {
  position: relative; }
.cbd_page .effect_txt_cbd {
  text-align: center;
  font-size: 15px;
  line-height: 2;
  margin: 30px 0 120px;
  font-weight: 500;
  color: var(--color-3); }
  @media only screen and (max-width: 768px) {
    .cbd_page .effect_txt_cbd {
      font-size: 13px;
      margin: 30px 0 60px; } }
.cbd_page .reaf_left {
  position: absolute;
  width: 12%;
  top: 0;
  left: 10%; }
  @media only screen and (max-width: 768px) {
    .cbd_page .reaf_left {
      width: 22%;
      left: 0; } }
.cbd_page .reaf_right {
  position: absolute;
  width: 16%;
  top: 0;
  right: 6%; }
  @media only screen and (max-width: 768px) {
    .cbd_page .reaf_right {
      width: 26%;
      right: 0; } }
.cbd_page .cbd_title {
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -250px;
  width: 500px;
  color: var(--color-w);
  font-weight: 500;
  font-size: 18px;
  text-align: center;
  padding: 10px 0;
  background: var(--color-main); }
  @media only screen and (max-width: 768px) {
    .cbd_page .cbd_title {
      top: -20px;
      left: 50%;
      margin-left: -40%;
      width: 80%;
      font-size: 13px; } }
.cbd_page .pdf_title {
  width: 90%;
  margin: 40px auto 16px;
  font-weight: 500;
  font-size: 16px; }
  @media only screen and (max-width: 768px) {
    .cbd_page .pdf_title {
      width: 100%; } }
.cbd_page .pdf {
  width: 90%;
  background: var(--color-info);
  border-radius: 20px;
  padding: 20px;
  margin: 0 auto 30px;
  position: relative; }
  @media only screen and (max-width: 768px) {
    .cbd_page .pdf {
      width: 100%;
      margin: 0 auto 20px;
      border-radius: 12px;
      padding: 12px; } }
  .cbd_page .pdf img {
    vertical-align: bottom; }
  .cbd_page .pdf button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    z-index: 100;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    -webkit-transition: -webkit-transform 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: -webkit-transform 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform 640ms cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 640ms cubic-bezier(0.165, 0.84, 0.44, 1);
    outline: 0; }
.cbd_page .name_box .icon {
  width: 48px;
  margin: 0 15px 0 0; }
.cbd_page .name_box .name_area {
  width: calc(100% - 63px); }
  .cbd_page .name_box .name_area .name {
    color: var(--color-cbd);
    font-size: 34px !important;
    font-weight: bold !important; }
.cbd_page .mark {
  background-color: var(--color-cbd); }
.cbd_page .support_box .main_txt span {
  color: var(--color-cbd);
  font-weight: bold !important; }
.cbd_page .recommend_box .list {
  width: 66%;
  margin: 10px auto 0; }
  @media only screen and (max-width: 1000px) {
    .cbd_page .recommend_box .list {
      width: 100%; } }
  @media only screen and (max-width: 768px) {
    .cbd_page .recommend_box .list {
      width: 95%; } }

/* ==========================================================================

	iziModal
	
========================================================================== */
.iziModal {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #FFF;
  transition: margin-top 0.3s ease, height 0.3s ease;
  transform: translateZ(0);
  width: 90% !important;
  max-height: 90svh;
  max-width: 1400px !important;
  z-index: 100001 !important;
  border-bottom: 0px solid #fff; }

@media only screen and (max-width: 768px) {
  .iziModal {
    width: 92% !important;
    height: auto; } }
.iziModal * {
  -webkit-font-smoothing: antialiased; }

.iziModal::after {
  content: '';
  width: 100%;
  height: 0px;
  opacity: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  pointer-events: none; }

.iziModal.hasShadow::after {
  height: 0px;
  opacity: 1; }

.iziModal .iziModal-progressbar {
  position: absolute;
  left: 0;
  top: 0px;
  width: 100%;
  z-index: 1; }

.iziModal .iziModal-progressbar > div {
  height: 2px;
  width: 100%; }

.iziModal .iziModal-header {
  background: rgba(255, 255, 255, 0) !important;
  padding: 0px !important;
  height: 50px;
  width: 50px;
  overflow: hidden;
  position: absolute;
  z-index: 1000000;
  right: -29px;
  top: -27px; }
  @media only screen and (max-width: 768px) {
    .iziModal .iziModal-header {
      height: 30px;
      width: 30px;
      overflow: hidden;
      position: absolute;
      z-index: 1000000;
      right: -5px;
      top: 7px;
      transform: scale(0.7); } }

.iziModal .iziModal-header-icon {
  font-size: 40px;
  color: rgba(255, 255, 255, 0.5);
  padding: 0 15px 0 0;
  margin: 0;
  float: left; }

.iziModal .iziModal-header-title {
  color: #FFF;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  display: none; }

.iziModal .iziModal-header-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 1.45;
  display: none; }

.iziModal .iziModal-header-title, .iziModal .iziModal-header-subtitle {
  display: none;
  margin: 0;
  padding: 0;
  font-family: 'Lato', Arial;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left; }

.iziModal .iziModal-header-buttons {
  position: absolute;
  top: 50%;
  right: 10px;
  margin: -17px 0 0 0; }

@media only screen and (max-width: 768px) {
  .iziModal .iziModal-header-buttons {
    position: absolute;
    top: 50%;
    right: 0px;
    margin: -17px 0 0 0; } }
.iziModal .iziModal-button {
  display: block;
  z-index: 2;
  outline: none;
  height: 34px;
  width: 34px;
  border: 0;
  padding: 0;
  margin: 0;
  opacity: 1;
  border-radius: 50%;
  transition: transform 0.5s cubic-bezier(0.16, 0.81, 0.32, 1), opacity 0.5s ease;
  background-size: 67% !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  /* For some Androids */ }

.iziModal .iziModal-button-close {
  position: relative;
  height: 22px;
  width: 22px;
  z-index: 100; }

.iziModal .iziModal-button-close::before {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #bcbcbc;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

.iziModal .iziModal-button-close::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #bcbcbc;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.iziModal .iziModal-button-close:hover {
  transform: rotate(180deg); }

.iziModal .iziModal-button:hover {
  opacity: 0.8; }

.iziModal .iziModal-header.iziModal-noSubtitle {
  height: auto;
  padding: 10px 15px 12px 15px; }

.iziModal .iziModal-header.iziModal-noSubtitle .iziModal-header-icon {
  font-size: 23px;
  padding-right: 13px; }

.iziModal .iziModal-header.iziModal-noSubtitle .iziModal-header-title {
  font-size: 15px;
  margin: 3px 0 0 0;
  font-weight: 400; }

.iziModal .iziModal-header.iziModal-noSubtitle .iziModal-header-buttons {
  right: 6px;
  margin: -16px 0 0 0; }

.iziModal .iziModal-header.iziModal-noSubtitle .iziModal-button {
  height: 30px;
  width: 30px; }

/* RTL */
.iziModal-rtl {
  direction: rtl; }

.iziModal-rtl .iziModal-header {
  padding: 14px 18px 15px 40px; }

.iziModal-rtl .iziModal-header-icon {
  float: right;
  padding: 0 0 0 15px; }

.iziModal-rtl .iziModal-header-buttons {
  right: initial;
  left: 10px; }

.iziModal-rtl .iziModal-button {
  float: left; }

.iziModal-rtl .iziModal-header-title, .iziModal-rtl .iziModal-header-subtitle {
  text-align: right;
  font-family: Tahoma, 'Lato', Arial;
  font-weight: 500; }

.iziModal-rtl .iziModal-header.iziModal-noSubtitle {
  padding: 10px 15px 12px 40px; }

.iziModal-rtl .iziModal-header.iziModal-noSubtitle .iziModal-header-icon {
  padding: 0 0 0 13px; }

/* LIGHT THEME */
.iziModal.iziModal-light .iziModal-header-icon {
  color: rgba(0, 0, 0, 0.5); }

.iziModal.iziModal-light .iziModal-header-title {
  color: #000; }

.iziModal.iziModal-light .iziModal-header-subtitle {
  color: rgba(0, 0, 0, 0.6); }

.iziModal .iziModal-loader {
  background: #FFF url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM5OTkiPiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iLTAuOXMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49Ii0wLjlzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9; }

.iziModal .iziModal-content-loader {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM5OTkiPiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiAgICAgICAgICAgICAgICBiZWdpbj0iLTAuOXMiIGR1cj0iMS40cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4gICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgICAgICAgICAgICAgICAgYmVnaW49Ii0wLjlzIiBkdXI9IjEuNHMiICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIgICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIgICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgPC9jaXJjbGU+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%; }

.iziModal .iziModal-content:before,
.iziModal .iziModal-content:after {
  content: '';
  display: table; }

.iziModal .iziModal-content:after {
  clear: both; }

.iziModal .iziModal-content {
  zoom: 1;
  width: 100%;
  position: relative;
  margin: 30px 0 0 0;
  -webkit-overflow-scrolling: touch; }
  @media only screen and (max-width: 768px) {
    .iziModal .iziModal-content {
      height: 100%;
      margin: 0px 0 0 0; } }

.iziModal .iziModal-wrap {
  width: calc(100% - 60px);
  margin: 0 auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch; }

@media only screen and (max-width: 768px) {
  .iziModal .iziModal-wrap {
    width: 100%;
    padding: 0px 10px;
    height: auto !important; } }
.iziModal .iziModal-iframe {
  border: 0;
  margin: 0 0 -6px 0;
  width: 100%;
  transition: height 0.3s ease; }

.iziModal-overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10000 !important; }

.iziModal-navigate {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 100008 !important; }

.iziModal-navigate-caption {
  position: absolute;
  left: 10px;
  top: 10px;
  color: white;
  line-height: 16px;
  font-size: 9px;
  font-family: 'Lato', Arial;
  letter-spacing: 0.1em;
  text-indent: 0;
  text-align: center;
  width: 70px;
  padding: 5px 0;
  text-transform: uppercase;
  display: none; }

.iziModal-navigate-caption::before, .iziModal-navigate-caption::after {
  position: absolute;
  top: 2px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 14px;
  font-size: 12px;
  content: '';
  background-size: 100% !important; }

.iziModal-navigate-caption:before {
  left: 0; }

.iziModal-navigate-caption:after {
  right: 0; }

.iziModal-navigate > button {
  position: fixed;
  bottom: 0;
  top: 0;
  border: 0;
  height: 100%;
  width: 54px;
  background-size: 100% !important;
  cursor: pointer;
  padding: 0;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: all;
  margin: 0;
  outline: none; }

.iziModal-navigate > button:hover {
  opacity: 1; }

.iziModal-navigate-prev {
  left: 52%;
  background: url("../img/common/arrow-left.svg") no-repeat 50% 50%;
  opacity: 0; }

.iziModal-navigate-next {
  right: 52%;
  background: url("../img/common/arrow-right.svg") no-repeat 50% 50%;
  opacity: 0; }

@media only screen and (min-width: 2000px) {
  .iziModal-navigate-prev {
    left: 50%;
    background: url("../img/common/arrow-left.svg") no-repeat 50% 50%;
    opacity: 0; }

  .iziModal-navigate-next {
    right: 50%;
    background: url("../img/common/arrow-right.svg") no-repeat 50% 50%;
    opacity: 0; } }
@media only screen and (max-width: 768px) {
  .iziModal-navigate > button {
    position: fixed;
    bottom: 0;
    top: 47.5%;
    border: 0;
    height: 50px;
    width: 24px;
    background-size: 100% !important;
    cursor: pointer;
    padding: 0;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: all;
    margin: 0;
    outline: none; }

  .iziModal-navigate-prev {
    left: 72%;
    background: url("../img/common/arrow-left.svg") no-repeat 50% 40%;
    opacity: 0; }

  .iziModal-navigate-next {
    right: 72%;
    background: url("../img/common/arrow-right.svg") no-repeat 50% 40%;
    opacity: 0; } }
.iziModal.isAttachedTop .iziModal-header {
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.iziModal.isAttachedTop {
  margin-top: 0 !important;
  margin-bottom: auto !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important; }

.iziModal.isAttachedBottom {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important; }

.iziModal.isFullscreen {
  max-width: 100% !important;
  margin: 0 !important;
  height: 100% !important;
  border-radius: 0 !important; }

.iziModal.isAttached {
  border-radius: 0 !important; }

.iziModal.hasScroll .iziModal-wrap {
  overflow-y: auto;
  overflow-x: hidden; }

html.iziModal-isOverflow {
  overflow: hidden; }

html.iziModal-isOverflow body, html.iziModal-isAttached body {
  overflow-y: scroll;
  position: relative; }

html.iziModal-isAttached {
  overflow: hidden; }

/* SCROLL */
.iziModal ::-webkit-scrollbar {
  overflow: visible;
  height: 7px;
  width: 7px; }

.iziModal ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
  border: solid transparent;
  border-width: 0px;
  min-height: 28px;
  padding: 100px 0 0;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07); }

.iziModal ::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.4); }

.iziModal ::-webkit-scrollbar-button {
  height: 0;
  width: 0; }

.iziModal ::-webkit-scrollbar-track {
  background-clip: padding-box;
  border: solid transparent;
  border-width: 0 0 0 2px; }

/* MODAL ANIMATIONS */
.iziModal.transitionIn .iziModal-header {
  -webkit-animation: iziM-slideDown 0.7s cubic-bezier(0.7, 0, 0.3, 1);
  -moz-animation: iziM-slideDown 0.7s cubic-bezier(0.7, 0, 0.3, 1);
  animation: iziM-slideDown 0.7s cubic-bezier(0.7, 0, 0.3, 1); }

.iziModal.transitionIn .iziModal-header .iziModal-header-icon {
  -webkit-animation: iziM-revealIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both;
  -moz-animation: iziM-revealIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both;
  animation: iziM-revealIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both; }

.iziModal.transitionIn .iziModal-header .iziModal-header-title, .iziModal.transitionIn .iziModal-header .iziModal-header-subtitle {
  -webkit-animation: iziM-slideIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both;
  -moz-animation: iziM-slideIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both;
  animation: iziM-slideIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both; }

.iziModal.transitionIn .iziModal-header .iziModal-button {
  -webkit-animation: iziM-revealIn 1.2s cubic-bezier(0.7, 0, 0.3, 1);
  -moz-animation: iziM-revealIn 1.2s cubic-bezier(0.7, 0, 0.3, 1);
  animation: iziM-revealIn 1.2s cubic-bezier(0.7, 0, 0.3, 1); }

.iziModal.transitionIn .iziModal-iframe, .iziModal.transitionIn .iziModal-wrap {
  -webkit-animation: iziM-fadeIn 1.3s;
  -moz-animation: iziM-fadeIn 1.3s;
  animation: iziM-fadeIn 1.3s; }

.iziModal.transitionIn .iziModal-header {
  -webkit-animation-delay: 0.0s;
  -moz-animation: 0.0s;
  animation-delay: 0.0s; }

.iziModal.transitionIn .iziModal-header .iziModal-header-icon,
.iziModal.transitionIn .iziModal-header .iziModal-header-title {
  -webkit-animation-delay: 0.4s;
  -moz-animation: 0.4s;
  animation-delay: 0.4s; }

.iziModal.transitionIn .iziModal-header .iziModal-header-subtitle {
  -webkit-animation-delay: 0.5s;
  -moz-animation: 0.5s;
  animation-delay: 0.5s; }

.iziModal.transitionOut .iziModal-header, .iziModal.transitionOut .iziModal-header * {
  transition: none !important; }

.iziModal.fadeOutDown, .iziModal-overlay.fadeOutDown {
  -webkit-animation: iziM-fadeOutDown 0.5s ease;
  animation: iziM-fadeOutDown 0.5s ease; }

.iziModal.fadeInUp, .iziModal-overlay.fadeInUp {
  -webkit-animation: iziM-fadeInUp 0.7s cubic-bezier(0.16, 0.81, 0.32, 1);
  animation: iziM-fadeInUp 0.7s cubic-bezier(0.16, 0.81, 0.32, 1); }

@-webkit-keyframes iziM-fadeOutDown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0); } }
@keyframes iziM-fadeOutDown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0); } }
@-webkit-keyframes iziM-fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }
@keyframes iziM-fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }
.iziModal .modal_itemlist {
  position: relative;
  height: 100%; }
  .iziModal .modal_itemlist .photo {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden; }
    @media only screen and (max-width: 768px) {
      .iziModal .modal_itemlist .photo {
        height: auto !important; } }
    .iziModal .modal_itemlist .photo img {
      object-fit: contain;
      width: 100%;
      height: 100%; }

@media only screen and (max-width: 768px) {
  .iziModal .modal_itemlist {
    position: relative;
    height: 90%;
    margin: 11% 0 0; }
    .iziModal .modal_itemlist .photo {
      width: 100%;
      height: 100%;
      position: relative;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat; } }