a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block
}
body {
  line-height: 1
}
ol, ul {
  list-style: none
}
blockquote, q {
  quotes: none
}
blockquote:after, blockquote:before, q:after, q:before {
  content: "";
  content: none
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
@media only screen and (max-width: 767px) {
  .pc {
    display: none !important
  }
}
@media only screen and (min-width: 768px) {
  .sp {
    display: none !important
  }
}
html, body {
  font-size: 1rem
}
html *, body * {
  box-sizing: border-box;
}
html *::before, html *::after, body *::before, body *::after {
  box-sizing: border-box
}
body {
  font-feature-settings: "palt";
  color: #888884;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  background-color: #c9c9c9;
}
@media(max-width: 768px) {
  body {
    height: 100%
  }
}
a {
  color: #2ea7e0;
  outline: none !important;
  transition: all .3s ease;
  text-decoration: none
}
a:link, a:visited {
  text-decoration: none
}
a:focus, a:active {
  text-decoration: underline
}
a:hover {
  opacity: .7;
  text-decoration: underline
}
img {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: text-bottom
}
@media(max-width: 768px) {
  img {
    width: auto
  }
}
sup {
  vertical-align: super;
  font-size: 60%
}
.wrap {
  max-width: 562px;
  width: auto;
  margin: 0 auto;
  background: #fff;
}
.inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* .atte */
.atte {
  color: #888884;
  font-size: calc( 18 * 1px * 0.75 );
  line-height: calc( 28 * 1px * 0.75 );
  letter-spacing: 0.125em;
}
dl.atte {
  margin: calc( 60 / 750 * 100% ) auto;
}
@media(max-width: 768px) {
  .atte {
    color: #888884;
    font-size: calc( 18 / 750 * 100vw );
    line-height: calc( 28 / 750 * 100vw );
    letter-spacing: 0.125em;
  }
}
p.atte,
.atte li,
.atte dd {
  position: relative;
  padding-left: 1.5em;
}
p.atte::before,
.atte li::before,
.atte dd::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}

/* .topics */
.topics .inner::after {
  content: "";
  background: url("../images/topics_btm.png") left bottom / 100% auto no-repeat;
  width: 100%;
  aspect-ratio: 750/111;
  display: block;
}
.topics ul {
  width: calc( 670 / 750 * 100% );
  margin: 0 auto;
}
.topics ul li {
  margin-top: calc( 20 / 670 * 100% );
}

/* .product */
.product .inner {
  padding-bottom: calc( 60 / 750 * 100% );
}
.product .navi {
  display: flex;
}
.product .navi li {
  cursor: pointer;
  background: url("../images/product_tab01_on.png") left bottom / 100% auto no-repeat;
}
.product .navi li + li {
  background: url("../images/product_tab02_on.png") left bottom / 100% auto no-repeat;
}
.product .navi li.active {
  cursor: auto;
}
.product .navi li.active img {
  visibility: hidden;
}
.product .navi li:hover img {
  opacity: 0;
}
.product #product02 {
  display: none;
}
.product .ac {
  width: calc( 670 / 750 * 100% );
  margin: 0 auto;
  border-top: #2ea7e0 solid 2px;
}
.product .ac + .ac {
  border-bottom: #2ea7e0 solid 2px;
}
.product #product02 .ac {
  border-color: #e60010;
}
@media(max-width: 768px) {
  .product .ac,
  .product .ac + .ac {
    border-width: 1px;
  }
}
.product .ac dt.ttl {
  cursor: pointer;
  background: url("../images/product01_ac01_close.png") left bottom / 100% auto no-repeat;
}
.product #product01 .ac + .ac dt.ttl {
  background: url("../images/product01_ac02_close.png") left bottom / 100% auto no-repeat;
}
.product #product02 .ac dt.ttl {
  background: url("../images/product02_ac01_close.png") left bottom / 100% auto no-repeat;
}
.product #product02 .ac + .ac dt.ttl {
  background: url("../images/product02_ac02_close.png") left bottom / 100% auto no-repeat;
}
.product .ac dt.active img {
  visibility: hidden;
}
.product .ac dt.ttl + dd {
  display: none;
}

/* .no1 */
.no1 a {
  display: block;
  width: calc( 555 / 750 * 100% );
  margin: calc( 60 / 750 * 100% ) auto;
  animation: btnslide 3s ease 0s infinite;
}
@keyframes btnslide {
  0% {
    transform: translateX(0);
  }
  5% {
    transform: translateX( calc( 20 / 750 * 100% ) );
  }
  10% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}
/* .fixedcv */
.fixedcv {
  display: none;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 10000;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 15px 3px rgba(101, 100, 96, .1) ;
  backdrop-filter: blur( 3px );
  padding: 14px 0;
}
.fixedcv .inner {
  max-width: 562px;
}
.fixedcv h2 {
  text-align: center;
  color: #686663;
  font-size: calc( 25px * 75% );
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: calc( 10 / 750 * 100% );
}
.fixedcv h2 strong {
  font-size: 1.5em;
  line-height: 1;
}
.fixedcv ul {
  display: flex;
  justify-content: center;
}
.fixedcv li {
  width: calc( 331 / 750 * 100% );
  margin: 0 calc( 10 / 750 * 100% );
}
@media(max-width: 768px) {
  .fixedcv {
    box-shadow: 0 0 calc( 15 / 750 * 100vw ) calc( 3 / 750 * 100vw ) rgba(101, 100, 96, .1) ;
    padding: calc( 14 / 750 * 100vw ) 0;
  }
  .fixedcv h2 {
    font-size: calc( 25 / 750 * 100vw );
    line-height: 1;
  }
  .fixedcv .inner {
    max-width: auto;
  }
}

/* .topics */
footer {
  position: relative;
  background: #f1f0ec;
  padding: calc( 40px * .75 ) 0 113px;
  font-size: calc( 20px * .75 );
  line-height: calc( 45px * .75 );
  letter-spacing: 0.1em;
  font-weight: 400;
}
footer .menu .inner {
  width: calc( 670 / 750 * 100% );
  padding-bottom: calc( 40 / 750 * 100% );
}
footer .menu ul {
  margin-bottom: calc( 10 / 670 * 100% );
}
footer .menu a {
  color: #686663;
  text-decoration: underline;
}
footer p.atte + p.atte {
  margin-top: calc( 30 / 670 * 100% );
}
footer p.number {
  text-align: right;
  font-size: calc( 18px * .75 );
  margin-top: calc( 20 / 670 * 100% );
}
footer .copy {
  background: #686663;
  text-align: center;
  padding: calc( 20 / 750 * 100% ) 0;
  color: #fff;
  font-size: calc( 18px * .75 );
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 400;
}
@media(max-width: 768px) {
  footer {
    padding: calc( 40 / 750 * 100vw ) 0 calc( 147 / 750 * 100vw );
    font-size: calc( 20 / 750 * 100vw );
    line-height: calc( 45 / 750 * 100vw );
    letter-spacing: 0.1em;
  }
  footer p.number {
    font-size: calc( 18 / 750 * 100vw );
  }
  footer .copy {
    font-size: calc( 18 / 750 * 100vw );
    line-height: 1;
    letter-spacing: 0.1em;
  }
}