@charset "UTF-8";
/******************************************************************
** Stylesheet: Main Stylesheet
******************************************************************/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

/******************************************************************
** Links
******************************************************************/
a {
  background: transparent;
}
a:active, a:hover {
  outline: 0;
}

/******************************************************************
** Typography
******************************************************************/
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

abbr[title] {
  border-bottom: 0.0666666667rem dotted;
}

b,
strong,
.strong {
  font-weight: bold;
}

dfn,
em,
.em {
  font-style: italic;
}

hr {
  box-sizing: content-box;
  height: 0;
}

p {
  -webkit-hyphens: auto;
  -epub-hyphens: auto;
  hyphens: auto;
  -ms-word-break: break-all;
  -ms-word-wrap: break-all;
  word-break: break-word;
  word-break: break-word;
  -webkit-hyphenate-before: 2;
  -webkit-hyphenate-after: 3;
  hyphenate-lines: 3;
}

pre {
  margin: 0;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "“" "”" "‘" "’";
}
q:before, q:after {
  content: "";
  content: none;
}

small,
.small {
  font-size: 75%;
}

sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/******************************************************************
** Embedded content
******************************************************************/
img {
  border: 0;
  max-width: 100%;
  height: auto;
}

svg:not(:root) {
  overflow: hidden;
}

/******************************************************************
** Figures
******************************************************************/
figure {
  margin: 0;
}

/******************************************************************
** GENERAL STYLES
******************************************************************/
* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 0.4150390613vw;
}

body {
  font-family: "Lato", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
  line-height: 1.8;
  color: #000;
  margin: 0;
}

#container {
  overflow: clip;
}

.content-section--all {
  position: relative;
  background: #fff;
  padding: 3.4rem 0;
}
.content-section--all > .section-inner {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 31.76470588rem;
  background: #fff;
  overflow: clip;
  border-radius: 1rem;
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
  background: #d6f6ff;
  padding-bottom: 24px;
}

.fixed-bg-img-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.fixed-bg-img-wrap .img-wrap {
  height: 100%;
}
.fixed-bg-img-wrap .img-wrap img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 4480px) {
  html {
    font-size: 0.3794642846vw;
  }
}
@media screen and (max-width: 3840px) {
  html {
    font-size: 0.442708332vw;
  }
}
@media screen and (max-width: 3200px) {
  html {
    font-size: 0.5312499984vw;
  }
}
@media screen and (max-width: 2880px) {
  html {
    font-size: 0.590277776vw;
  }
}
@media screen and (max-width: 2560px) {
  html {
    font-size: 0.664062498vw;
  }
}
@media screen and (max-width: 2048px) {
  html {
    font-size: 0.8300781226vw;
  }
}
@media screen and (max-width: 1920px) {
  html {
    font-size: 0.8854166641vw;
  }
}
@media screen and (max-width: 1680px) {
  html {
    font-size: 1.0119047589vw;
  }
}
@media screen and (max-width: 1600px) {
  html {
    font-size: 1.0624999969vw;
  }
}
@media screen and (max-width: 1470px) {
  html {
    font-size: 1.1564625816vw;
  }
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1805555521vw;
  }
}
@media screen and (max-width: 1400px) {
  html {
    font-size: 1.2142857107vw;
  }
}
@media screen and (max-width: 1368px) {
  html {
    font-size: 1.2426900548vw;
  }
}
@media screen and (max-width: 1366px) {
  html {
    font-size: 1.2445095132vw;
  }
}
@media screen and (max-width: 1280px) {
  html {
    font-size: 1.3281249961vw;
  }
}
@media screen and (max-width: 1180px) {
  html {
    font-size: 1.4406779619vw;
  }
}
@media screen and (max-width: 1024px) {
  html {
    font-size: 1.6601562451vw;
  }
}
@media screen and (max-width: 932px) {
  html {
    font-size: 1.8240343294vw;
  }
}
@media screen and (max-width: 915px) {
  html {
    font-size: 1.8579234918vw;
  }
}
@media screen and (max-width: 914px) {
  html {
    font-size: 1.8599562309vw;
  }
}
@media screen and (max-width: 912px) {
  html {
    font-size: 1.8640350822vw;
  }
}
@media screen and (max-width: 896px) {
  html {
    font-size: 1.897321423vw;
  }
}
@media screen and (max-width: 882px) {
  html {
    font-size: 1.9274376361vw;
  }
}
@media screen and (max-width: 853px) {
  html {
    font-size: 1.9929659965vw;
  }
}
@media screen and (max-width: 844px) {
  html {
    font-size: 2.0142180036vw;
  }
}
@media screen and (max-width: 820px) {
  html {
    font-size: 2.0731707256vw;
  }
}
@media screen and (max-width: 800px) {
  html {
    font-size: 2.1249999938vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.2135416602vw;
  }
}
@media screen and (max-width: 740px) {
  html {
    font-size: 2.2972972905vw;
  }
}
@media screen and (max-width: 720px) {
  html {
    font-size: 2.3611111042vw;
  }
}
@media screen and (max-width: 667px) {
  html {
    font-size: 2.5487256297vw;
  }
}
@media screen and (max-width: 640px) {
  html {
    font-size: 2.6562499922vw;
  }
}
@media screen and (max-width: 600px) {
  html {
    font-size: 2.833333325vw;
  }
}
@media screen and (max-width: 540px) {
  html {
    font-size: 2.7777777778vw;
  }
  html .content-section--all {
    padding: 0;
  }
  html .content-section--all > .section-inner {
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  html .fixed-bg-img-wrap {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  html {
    font-size: 3.125vw;
  }
}
@media screen and (max-width: 430px) {
  html {
    font-size: 3.488372093vw;
  }
}
@media screen and (max-width: 414px) {
  html {
    font-size: 3.6231884058vw;
  }
}
@media screen and (max-width: 412px) {
  html {
    font-size: 3.640776699vw;
  }
}
@media screen and (max-width: 390px) {
  html {
    font-size: 3.8461538462vw;
  }
}
@media screen and (max-width: 375px) {
  html {
    font-size: 4vw;
  }
}
@media screen and (max-width: 360px) {
  html {
    font-size: 4.1666666667vw;
  }
}
@media screen and (max-width: 344px) {
  html {
    font-size: 4.3604651163vw;
  }
}
/******************************************************************
** H1, H2, H3, H4, H5 STYLES
******************************************************************/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
  text-rendering: optimizelegibility;
  font-weight: 500;
}

h1 a,
.h1 a,
h2 a,
.h2 a,
h3 a,
.h3 a,
h4 a,
.h4 a,
h5 a,
.h5 a {
  text-decoration: none;
}

h1,
.h1 {
  font-size: 2.5em;
}

h2,
.h2 {
  font-size: 1.75em;
  margin-bottom: 0.375em;
}

h3,
.h3 {
  font-size: 1.125em;
}

h4,
.h4 {
  font-size: 1.1em;
  font-weight: 700;
}

h5,
.h5 {
  font-size: 0.846em;
  text-transform: uppercase;
}

/******************************************************************
** common
******************************************************************/
.logo {
  width: 100%;
  margin: 0;
  line-height: 0;
}
.logo a,
.logo img {
  display: block;
  width: 100%;
}
.logo img {
  height: auto;
  transition: all 0.4s;
}

@media screen and (min-width: 1025px) {
  .logo a:hover img {
    opacity: 0.7;
  }
}
/******************************************************************
** HEADER STYLES
******************************************************************/
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: 1.4rem;
  padding-left: 1.4rem;
  padding-right: 1.4rem;
  z-index: 9999;
  transition: all 0.4s;
}
.header .inner-header {
  display: flex;
  align-items: center;
}
.header .logo {
  max-width: 10rem;
}

/******************************************************************
** FOOTER STYLES
******************************************************************/
.footer {
  position: relative;
  clear: both;
  background: #3aa9d3;
  padding-top: 2.6rem;
  padding-bottom: 1.2rem;
}
.footer .logo {
  margin: 0 auto;
  max-width: 3.2rem;
}
.footer .footer-desc01 {
  position: relative;
  font-size: 0.86666667rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin-top: 1.6em;
  margin-bottom: 0;
  padding-left: 0.05em;
}
.footer .copyright {
  font-size: 0.8rem;
  color: #fff;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin: 0 auto;
  margin-top: 2.6em;
  padding-left: 0.05em;
}

/******************************************************************
** navigation
******************************************************************/
.footer ul.nav {
  position: relative;
  list-style: none;
  font-size: 0;
  text-align: center;
  display: table;
  margin: 0 auto;
  margin-top: 2.2rem;
  padding: 0;
}
.footer ul.nav > li,
.footer ul.nav > li a {
  position: relative;
  font-size: 0.66666667rem;
  color: #fff;
}
.footer ul.nav > li {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  padding: 0 0.6em;
}
.footer ul.nav > li:after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%) rotate(30deg);
  content: "";
  display: block;
  width: 0.06666667rem;
  height: 1em;
  background: #fff;
}
.footer ul.nav > li:first-child {
  padding-left: 0;
}
.footer ul.nav > li:last-child {
  padding-right: 0;
}
.footer ul.nav > li:last-child:after {
  display: none;
}
.footer ul.nav > li a {
  text-decoration: none;
  display: block;
  transition: all 0.1s;
}

.fixed-img-wrap,
.fixed-nav-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  width: calc(50% - 15.88235294rem);
  height: 100%;
  display: flex;
}
.fixed-img-wrap > .inner,
.fixed-nav-wrap > .inner {
  position: relative;
}

.fixed-img-wrap {
  right: 0;
  align-items: end;
  padding-bottom: 10vh;
  padding-bottom: 10svh;
  z-index: 100;
}
.fixed-img-wrap > .inner {
  width: 82.5%;
  margin: 0 0 0 auto;
}
.fixed-img-wrap > .inner .img-wrap img {
  height: auto;
}

.fixed-nav-wrap {
  left: 0;
  padding: 1.4rem;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.fixed-nav-wrap > .inner {
  display: table;
}
.fixed-nav-wrap .logo {
  max-width: 18rem;
  margin: 0 auto;
  margin-bottom: 2.6rem;
}
.fixed-nav-wrap ul.nav,
.fixed-nav-wrap ul.nav > li {
  position: relative;
  font-size: 1rem;
  display: block;
  margin: 0;
}
.fixed-nav-wrap ul.nav {
  list-style: none;
  padding: 0;
}
.fixed-nav-wrap ul.nav > li,
.fixed-nav-wrap ul.nav > li a {
  position: relative;
  font-size: 1em;
  font-weight: 700;
  color: #000;
  line-height: 1.6;
}
.fixed-nav-wrap ul.nav > li {
  margin-bottom: 0.8em;
}
.fixed-nav-wrap ul.nav > li:last-child {
  margin-bottom: 0;
}
.fixed-nav-wrap ul.nav > li a {
  text-decoration: none;
  display: inline-block;
  transition: all 0.1s;
}

@media screen and (min-width: 1025px) {
  .footer ul.nav > li a:hover {
    opacity: 0.7;
  }
  .fixed-nav-wrap ul.nav > li a:hover {
    color: #3aa9d3;
  }
}
@media screen and (max-width: 1024px) {
  .fixed-img-wrap,
  .fixed-nav-wrap {
    display: none;
  }
}
/******************************************************************
** frontpage
******************************************************************/
.mv {
  position: relative;
  width: 100%;
  padding-top: 5rem;
  padding-bottom: 3.2rem;
  background: transparent url(/column/sivomixx/img/top/mv-bg.webp) no-repeat center center/cover;
}
.mv .mv-catch {
  position: relative;
}
.mv .mv-catch01 {
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-top: 0;
  margin-bottom: 0.8em;
  padding-left: 0.05em;
}
.mv .mv-logo {
  position: relative;
  margin: 0 auto;
  max-width: 15.6rem;
}
.mv .mv-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.mv .mv-img-wrap01 {
  position: relative;
  margin-top: 1rem;
  width: calc(100% + 1.4rem);
}
.mv .mv-img-wrap01 .img-wrap img {
  height: auto;
}
.mv .link-btn-section01 {
  margin-top: 0.8rem;
}

.top-section {
  position: relative;
}

.top-section01,
.top-section02 {
  background: #fff;
  padding-top: 3rem;
}

.top-section01 {
  padding-bottom: 2.6rem;
}

.top-section02 > .section-inner {
  position: relative;
}
.top-section02 > .section-inner01 {
  margin-top: 1.8rem;
  z-index: 5;
}
.top-section02 > .section-inner01 .img-wrap img {
  height: auto;
}
.top-section02 > .section-inner01 .bg-img-wrap {
  position: absolute;
  bottom: 1.2rem;
  left: 0;
  right: 0;
  width: 100%;
}
.top-section02 > .section-inner01 .heading-img-wrap {
  line-height: 1;
  margin-top: 0;
  margin-bottom: -1.2rem;
}
.top-section02 > .section-inner02 {
  background: #f8fbf6;
  padding-top: 2.6rem;
  padding-bottom: 2.2rem;
}

.top-section--point .heading-img-wrap {
  line-height: 1;
  margin: 0;
}
.top-section--point .heading-img-wrap img {
  height: auto;
}
.top-section--point > .section-inner {
  position: relative;
}
.top-section--point > .section-inner01 {
  background: #fff;
  padding-bottom: 2.4rem;
}

.top-section--use {
  padding: 1.8rem 0;
  background: #f8fbf6;
}
.top-section--use .section-img-wrap01 {
  margin: 0 auto;
  max-width: 18.6rem;
  overflow: hidden;
  border-radius: 0.6rem;
}
.top-section--use .section-img-wrap01:before {
  content: "";
  display: block;
  padding-top: 46.5%;
}
.top-section--use .section-img-wrap01 img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.top-section--product {
  background: #fff;
  padding-top: 1.8rem;
  padding-bottom: 2.8rem;
}

.top-section--faq {
  background: #fff;
  padding-top: 3.2rem;
  padding-bottom: 1rem;
}

.top-section--animato {
  padding-top: 2.2rem;
  padding-bottom: 4rem;
  background: #fff url(/column/sivomixx/img/top/bg-material02.webp) no-repeat center center/cover;
}

.heading-box01 {
  position: relative;
  background: #fff;
  padding: 2.2rem 1rem 1.2rem;
  border: 0.06666667rem solid #3aa9d3;
  box-shadow: 0.46666667rem 0.46666667rem 0.33333333rem rgba(0, 143, 193, 0.1);
}
.heading-box01.mt--type01 {
  margin-top: 3rem;
}
.heading-box01 .heading {
  position: absolute;
  top: -1em;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  line-height: 1.6;
  width: calc(100% - 1.4rem);
  margin: 0;
  padding: 0.2em 1em;
  background: #3aa9d3;
  border-radius: 0.4em;
}
.heading-box01 .page-text {
  line-height: 1.8;
}

/******************************************************************
** pages
******************************************************************/
.page-text {
  position: relative;
  line-height: 2;
  margin: 0;
}
.page-text.page-text01 {
  margin-top: 1em;
}
.page-text.page-text02 {
  margin-top: 2em;
}
.page-text.page-text03 {
  margin-top: 3em;
}

/******************************************************************
** faq
******************************************************************/
ul.faq-list01,
ul.faq-list01 > li {
  position: relative;
  display: block;
  margin: 0;
}

ul.faq-list01 {
  list-style: none;
  padding: 0;
}
ul.faq-list01 > li {
  margin-bottom: 1rem;
}
ul.faq-list01 > li:last-child {
  margin-bottom: 0;
}

.acd-wrap {
  position: relative;
}
.acd-wrap .acd-label {
  position: relative;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  border: 0.06666667rem solid #3aa9d3;
  background: #fff;
  padding-top: 0.6em;
  padding-left: 3.6em;
  padding-right: 2.6em;
  padding-bottom: 0.6em;
  display: block;
  cursor: pointer;
  transition: all 0.1s;
}
.acd-wrap .acd-label .icon {
  position: absolute;
  top: 0.5em;
  left: 0.8em;
  font-size: 1em;
  font-weight: 700;
  color: #fff;
  line-height: 1.8em;
  text-align: center;
  width: 1.8em;
  height: 1.8em;
  background: #3aa9d3;
  border-radius: 50%;
  display: inline-block;
}
.acd-wrap .acd-label .cross {
  position: absolute;
  top: 50%;
  right: 0.8em;
  transform: translate(0, -50%);
  display: block;
  width: 0.8em;
  height: 0.8em;
}
.acd-wrap .acd-label .cross:before, .acd-wrap .acd-label .cross:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  display: block;
  background: #3aa9d3;
  transition: all 0.1s;
}
.acd-wrap .acd-label .cross:before {
  width: 0.06666667rem;
  height: 100%;
}
.acd-wrap .acd-label .cross:after {
  width: 100%;
  height: 0.06666667rem;
}
.acd-wrap .acd-content {
  height: 0;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.1s;
}
.acd-wrap .acd-content .page-text {
  font-size: 0.93333333em;
  line-height: 1.8;
}
.acd-wrap input {
  display: none;
}
.acd-wrap input:checked + .acd-label .cross:before {
  opacity: 0;
}
.acd-wrap input:checked + .acd-label + .acd-content {
  height: auto;
  padding-top: 0.8rem;
  padding-bottom: 1.4rem;
}

@media screen and (min-width: 1025px) {
  .acd-wrap .acd-label:hover {
    opacity: 0.7;
  }
}
/******************************************************************
** point
******************************************************************/
ul.point-list01,
ul.point-list01 > li {
  position: relative;
  display: block;
  margin: 0;
}

ul.point-list01 {
  list-style: none;
  padding: 0;
}
ul.point-list01 > li {
  margin-bottom: 2.6rem;
  padding-left: 0.8rem;
}
ul.point-list01 > li:last-child {
  margin-bottom: 0;
}
ul.point-list01 > li .box {
  position: relative;
  background: #fff;
  border: 0.06666667rem solid #3aa9d3;
  padding: 1.2rem;
  padding-top: 1.6rem;
}
ul.point-list01 > li .box .box-label {
  position: absolute;
  top: -0.8em;
  left: -0.8rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  display: inline-block;
  padding: 0.3em;
  padding-left: 2em;
  padding-right: 0.66666667em;
  background: #3aa9d3;
  border-radius: 9999px;
}
ul.point-list01 > li .box .box-label:before {
  position: absolute;
  top: 50%;
  left: 0.66666667em;
  transform: translate(0, -50%);
  content: "";
  display: block;
  width: 0.83333333em;
  height: 0.83333333em;
  background: transparent url(/column/sivomixx/img/common/icon_footprints01.webp) no-repeat center center/contain;
}
ul.point-list01 > li .box .row > div {
  margin: 0 0.6rem;
}
ul.point-list01 > li .box .page-text {
  line-height: 1.8;
}
ul.point-list01 > li .box .photo-wrap01 img {
  height: auto;
}
ul.point-list01 > li .box .list-wrap01 {
  position: relative;
  background: #f3f9fc;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
}
ul.point-list01 > li .box .list-wrap01 .heading {
  margin-bottom: 0.4em;
}

/******************************************************************
** cta
******************************************************************/
.cta-section {
  position: relative;
  padding: 0.4rem;
  background: #fff url(/column/sivomixx/img/common/bg_cta01.webp) no-repeat center center/cover;
  z-index: 10;
}
.cta-section > .section-inner {
  position: relative;
  padding: 2.2rem 0.6rem 1.2rem;
  border: 0.13333333rem solid #fff;
  border-radius: 0.6rem;
}
.cta-section .cta-img-wrap {
  position: absolute;
  bottom: -2.4rem;
  right: -2.2rem;
  width: 43.333333%;
  pointer-events: none;
}
.cta-section .cta-img-wrap .img-wrap img {
  height: auto;
}

#cta-fixed {
  position: sticky;
  bottom: -100px;
  width: 100%;
  margin-top: 20px;
  padding: 0 16px;
  z-index: 99;
  opacity: 0;
  transition: 0.4s;
}

#cta-fixed.is_show {
  bottom: 16px;
  opacity: 1;
}

/******************************************************************
** display
******************************************************************/
.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}
/******************************************************************
** layout
******************************************************************/
.content-section-inner {
  position: relative;
  margin: 0 auto;
}

.content-section-inner01 {
  padding-left: 1.4rem;
  padding-right: 1.4rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
}
.row > div {
  margin: 0 2rem;
}
.row > div:first-child {
  margin-left: 0 !important;
}
.row > div:last-child {
  margin-right: 0 !important;
}

.col-1 {
  flex: 1;
}

.col-2 {
  flex: 2;
}

.col-3 {
  flex: 3;
}

.col-4 {
  flex: 4;
}

.col-5 {
  flex: 5;
}

.col-6 {
  flex: 6;
}

.col-7 {
  flex: 7;
}

.col-8 {
  flex: 8;
}

.col-9 {
  flex: 9;
}

/******************************************************************
** text
******************************************************************/
.fs--0-8em {
  font-size: 0.8em;
}

.fs--sml01 {
  font-size: 0.66666667rem;
}

.fs--sml02 {
  font-size: 0.73333333rem;
}

.fs--sml03 {
  font-size: 0.8rem;
}

.fs--sml04 {
  font-size: 0.86666667rem;
}

.fs--sml05 {
  font-size: 0.93333333rem;
}

.fs--lrg01 {
  font-size: 1.06666667rem;
}

.fs--lrg02 {
  font-size: 1.13333333rem;
}

.fs--lrg03 {
  font-size: 1.2rem;
}

.ta--l {
  text-align: left;
}

.ta--c {
  text-align: center;
}

.ta--r {
  text-align: right;
}

ruby rt {
  margin-bottom: 0.4em;
}

@media screen and (min-width: 769px) {
  .ta--l_pc {
    text-align: left;
  }
  .ta--c_pc {
    text-align: center;
  }
  .ta--r_pc {
    text-align: right;
  }
}
/******************************************************************
** heading
******************************************************************/
.heading--sub01 {
  position: relative;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  margin-top: 2.4em;
  margin-bottom: 0.8em;
}
.heading--sub01 .inner-text {
  position: relative;
  letter-spacing: 0.05em;
  display: block;
  padding-left: 0.05em;
}
.heading--sub01 .inner-text--main {
  font-size: 1em;
  color: #3aa9d3;
  line-height: 1.2;
}
.heading--sub01 .inner-text--sub {
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 0.6em;
}

.heading--brd-b_dashed01 {
  position: relative;
  font-size: 1.2rem;
  font-weight: 700;
  color: #3aa9d3;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
  padding-left: 0.05em;
  padding-bottom: calc(0.2em + 0.06666667rem);
}
.heading--brd-b_dashed01:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  display: block;
  width: 100%;
  height: 0.06666667rem;
  background-image: repeating-linear-gradient(90deg, #3aa9d3, #3aa9d3 0.29411765em, transparent 0.29411765em, transparent 0.58823529em);
  background-position: center bottom;
  background-repeat: repeat-x;
  background-size: 100% 0.06666667rem;
}

.heading--brd-l01 {
  position: relative;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8;
  margin-top: 1.2em;
  margin-bottom: 0.4em;
  padding-left: calc(0.5em + 0.26666667rem);
}
.heading--brd-l01:before {
  position: absolute;
  top: 47.5%;
  left: 0;
  transform: translate(0, -50%);
  content: "";
  display: block;
  width: 0.26666667rem;
  height: calc(100% - 0.8em);
  background: #3aa9d3;
}

/******************************************************************
** link
******************************************************************/
.link-btn01 {
  position: relative;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-decoration: none;
  line-height: 1.8;
  letter-spacing: 0.05em;
  width: 100%;
  max-width: 26rem;
  border: 0.13333333rem solid #fff;
  border-radius: 9999px;
  background: #3aa9d3;
  display: block;
  margin: 0 auto;
  margin-top: 1.4em;
  padding: 1em;
  transition: all 0.1s;
}
.link-btn01:hover {
  background: #00bbff;
}
.link-btn01:active {
  background: #009bd4;
  transform: scale(0.98);
}
.link-btn01.link-btn--animato {
  background: #14ae67;
  margin-top: 3em;
}
.link-btn01.link-btn--animato:hover {
  background: #00c469;
}
.link-btn01.link-btn--animato:active {
  background: #069e57;
  transform: scale(0.98);
}
.link-btn01.link-btn--animato .btn-text {
  position: relative;
  font-size: 1em;
  display: inline-block;
  padding-left: 2.4em;
}
.link-btn01.link-btn--animato .btn-text:before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  content: "";
  display: block;
  width: 1.6em;
  height: 1.51881333em;
  background: transparent url(/column/sivomixx/img/common/logomark_animato01_wh.webp) no-repeat center center/contain;
}

.link-btn-section01 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.link-btn-section01 .btn-wrap {
  position: relative;
  width: 100%;
}
.link-btn-section01 .btn-wrap .badge-wrap {
  position: absolute;
  top: calc(50% - 48px);
  left: -8px;
  width: 24%;
  max-width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 5;
}
.link-btn-section01 .btn-wrap .badge-wrap .img-wrap img {
  height: auto;
}
.link-btn-section01 .link-btn {
  position: relative;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-decoration: none;
  line-height: 1.6;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 68px;
  height: 6.75vw;
  max-height: 80px;
  padding: 0.2em 0;
  border: 0.13333333rem solid #fff;
  border-radius: 0.3em;
  transition: all 0.1s;
  box-shadow: 0.23333333em 0.23333333em 0.16666667em rgba(0, 143, 193, 0.2);
}
.link-btn-section01 .link-btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0.13333333rem solid #fff;
  border-radius: 0.3em;
  transition: all 0.1s;
  background: linear-gradient(150deg, rgb(0, 105, 255) 0%, rgb(0, 222, 255) 100%);
}
.link-btn-section01 .link-btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0.13333333rem solid #fff;
  border-radius: 0.3em;
  transition: all 0.1s;
  background: linear-gradient(150deg, rgb(26, 151, 244) 0%, rgb(46, 216, 224) 100%);
}
.link-btn-section01 .link-btn:hover::after {
  opacity: 0;
}
.link-btn-section01 .link-btn:active {
  transform: scale(0.98);
}
.link-btn-section01 .link-btn .btn-text {
  position: relative;
  font-size: 1em;
  letter-spacing: 0.05em;
  display: inline-block;
  padding-left: 1.5em;
  z-index: 2;
}
.link-btn-section01 .link-btn .btn-text:before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background: transparent url(/column/sivomixx/img/common/icon_cart01_wh.webp) no-repeat center center/contain;
}
.link-btn-section01 .caution-text {
  position: relative;
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-top: 1.4em;
  margin-bottom: 0;
  padding-left: 1.25em;
}
.link-btn-section01 .caution-text::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}

.anchor-point {
  position: relative;
  display: block;
}
.anchor-point.anchor-point01 {
  top: -4rem;
}

.link-btns {
  margin-top: 40px;
}

/******************************************************************
** image
******************************************************************/
.img-wrap {
  position: relative;
  line-height: 0;
}
.img-wrap img {
  width: 100%;
  margin: 0;
  display: block;
  pointer-events: none;
}

/******************************************************************
** list
******************************************************************/
dl,
menu {
  margin: 1em 0;
}

dd {
  margin: 0;
}

menu {
  padding: 0 0 2.6rem;
}

ol,
ul {
  margin: 0 0 1.5em;
  padding: 0;
  padding-left: 1em;
}

ol li,
ul li {
  margin-bottom: 0.3em;
}

ol {
  list-style: decimal;
}

ul {
  list-style: disc;
}

ol,
ul {
  margin: 0;
}
ol > li:last-child,
ul > li:last-child {
  margin-bottom: 0;
}

ul.list--caution,
ul.list--caution > li {
  position: relative;
  margin: 0;
  display: block;
}

ul.list--caution {
  list-style: none;
  padding: 0;
}
ul.list--caution > li {
  margin-bottom: 0.2em;
  padding-left: 1.2em;
}
ul.list--caution > li:last-child {
  margin-bottom: 0;
}
ul.list--caution > li:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "※";
}
ul.list--caution.mt--0-5em {
  margin-top: 0.5em;
}
ul.list--caution.mt--1em {
  margin-top: 1em;
}

/******************************************************************
** table
******************************************************************/
.table-wrap01 {
  position: relative;
  margin-top: 3.6rem;
}

.table-wrap02 {
  position: relative;
  margin-top: 2rem;
}

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

table.table--type01 {
  position: relative;
  width: 100%;
}
table.table--type01 th,
table.table--type01 td {
  position: relative;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
}
table.table--type01 th .page-text,
table.table--type01 td .page-text {
  line-height: 1.8;
}
table.table--type01 th .sml01,
table.table--type01 td .sml01 {
  font-size: 0.66666667em;
}
table.table--type01 th .sml02,
table.table--type01 td .sml02 {
  font-size: 0.73333333em;
}
table.table--type01 th .sml03,
table.table--type01 td .sml03 {
  font-size: 0.8em;
}
table.table--type01 th .sml04,
table.table--type01 td .sml04 {
  font-size: 0.86666667em;
}
table.table--type01 th .sml05,
table.table--type01 td .sml05 {
  font-size: 0.93333333em;
}
table.table--type01 th .img-wrap,
table.table--type01 td .img-wrap {
  display: block;
}
table.table--type01 th .img-wrap--product01,
table.table--type01 td .img-wrap--product01 {
  margin: 0 auto;
  max-width: 7.4em;
}
table.table--type01 th .img-wrap--product01 img,
table.table--type01 td .img-wrap--product01 img {
  height: auto;
}
table.table--type01 thead th {
  font-weight: 700;
  color: #fff;
  text-align: center;
  background: #3aa9d3;
  padding: 0.4em 1em;
  border-left: 0.4em solid #fff;
  border-right: 0.4em solid #fff;
  width: 50%;
}
table.table--type01 thead th:first-child {
  border-left: none;
}
table.table--type01 thead th:last-child {
  border-right: none;
}
table.table--type01 tbody tr:last-child {
  border-bottom: 0.06666667rem solid #3aa9d3;
}
table.table--type01 tbody th {
  text-align: center;
  color: #3aa9d3;
  letter-spacing: 0.1em;
  background: #deeef5;
  padding: 0.4em 1em;
  border: 0.06666667rem solid #3aa9d3;
}
table.table--type01 tbody td {
  text-align: left;
  background: #fff;
  padding: 1.2em 1em;
}
table.table--type01 tbody td:before, table.table--type01 tbody td:last-child:after {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  content: "";
  display: block;
  width: 0.06666667rem;
  height: calc(100% - 1.6rem);
  background: #3aa9d3;
}
table.table--type01 tbody td:before {
  left: -0.03333333rem;
}
table.table--type01 tbody td:last-child:after {
  right: -0.03333333rem;
}
table.table--type01 tbody td.ta--c {
  text-align: center;
}
table.table--type01 tbody td.ta--c b {
  font-size: 1.15em;
}
table.table--type01 table.table--type02 {
  position: relative;
  width: 100%;
}
table.table--type01 table.table--type02 th,
table.table--type01 table.table--type02 td {
  position: relative;
  line-height: 1.6;
  letter-spacing: 0.05em;
  padding: 0.6em 0.8em;
  border: 0.06666667rem solid #e6e6e6;
}
table.table--type01 table.table--type02 thead th {
  font-weight: 700;
  color: #000;
  text-align: center;
  background: #f6fafd;
}
table.table--type01 table.table--type02 td {
  background: #fff;
  text-align: left;
  vertical-align: top;
}
table.table--type01 table.table--type02 td:before, table.table--type01 table.table--type02 td:after {
  display: none;
}

/******************************************************************
** margin
******************************************************************/
.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

/******************************************************************
** animation
******************************************************************/
.fadein {
  opacity: 0;
  transition: 0.7s all;
}
.fadein.ttb {
  transform: translate(0, -2.6rem);
}
.fadein.btt {
  transform: translate(0, 2.6rem);
}
.fadein.ltr {
  transform: translate(-2.6rem, 0);
}
.fadein.rtl {
  transform: translate(2.6rem, 0);
}
.fadein.scrollin {
  opacity: 1;
}
.fadein.ttb.scrollin, .fadein.btt.scrollin, .fadein.ltr.scrollin, .fadein.rtl.scrollin {
  transform: translate(0, 0) !important;
}

.fadein02 {
  -moz-transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
}

.fadein03 {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
}

.fadein04 {
  -moz-transition-delay: 600ms;
  -webkit-transition-delay: 600ms;
  -o-transition-delay: 600ms;
  -ms-transition-delay: 600ms;
}

.fadein05 {
  -moz-transition-delay: 800ms;
  -webkit-transition-delay: 800ms;
  -o-transition-delay: 800ms;
  -ms-transition-delay: 800ms;
}

.fadein06 {
  -moz-transition-delay: 1000ms;
  -webkit-transition-delay: 1000ms;
  -o-transition-delay: 1000ms;
  -ms-transition-delay: 1000ms;
}

@media screen and (max-width: 768px) {
  .fadein02,
  .fadein03,
  .fadein04,
  .fadein05,
  .fadein06 {
    -moz-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
  }
}
/******************************************************************
** LARGE VIEWING SIZE
******************************************************************//*# sourceMappingURL=style.css.map */