/* --------------------------------------------------------------------------------
 * web fonts
-------------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/* ----------------------------------------------------------------------
 reset (exculding 'sup')
---------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block;
}

input, textarea {
  margin: 0;
  padding: 0;
}

ol, ul {
  list-style: none;
}

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

caption, th {
  text-align: left;
}

img {
  vertical-align: middle;
}

/* ----------------------------------------------------------------------
 basic setting
---------------------------------------------------------------------- */
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #465870;
  line-height: 1.5;
  margin: 0 auto;
  /*
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  */
}

body * {
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}

input, button, textarea, select {
  color: #161f3e;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
}

textarea {
  vertical-align: top;
}

*:focus {
  outline: none;
}

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

a:hover {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* ----------------------------------------------------------------------
 common class
---------------------------------------------------------------------- */
@media only screen and (min-width: 751px) {
  .pc-non {
    display: none !important;
  }
}
@media only screen and (max-width: 750px) {
  .sp-non {
    display: none !important;
  }
}

.pos-relative {
  position: relative;
}

.header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  @media screen and (max-width: 750px){
    display: none;
  }
}
.header__btn {
  position: absolute;
  width: calc((790/3840) * 100%);
  top: 0px;
  right: calc((60/3840) * 100vw);
}
.sec01 {
  padding-top: 0;
  @media screen and (min-width: 751px){
    padding-top: calc((300/3840) * 100vw);
  }
}
.sec {
  position: relative;
}
.btn {
  position: absolute;
  text-align: center;
  @media screen and (max-width: 750px){
    width: 100%;
    left: 0px;
    img {
      width: 78.6vw;
    }
  }
  @media (hover: hover) {
    &:hover {
      opacity: 0.8;
    }
  }
}
.btn-01 {
  bottom: calc((107 / 375) * 100vw);
  @media screen and (min-width: 751px){
    width: calc((1225/3840) * 100%);
    left: calc((1308/3840) * 100%);
    bottom: calc((380/3840) * 100vw);
  }
}
.btn-02 {
  bottom: calc((70 / 375) * 100vw);
  @media screen and (min-width: 751px){
    width: calc((1226/3840) * 100%);
    left: calc((2016/3840) * 100%);
    bottom: calc((380/3840) * 100vw);
  }
}
.btn-03 {
  bottom: calc((60 / 375) * 100vw);
  @media screen and (min-width: 751px){
    width: calc((1462/3840) * 100%);
    left: calc((1484/3840) * 100%);
    bottom: calc((315/3840) * 100vw);
  }
}
.btn-04 {
  bottom: calc((60 / 375) * 100vw);
  @media screen and (min-width: 751px){
    width: calc((1462/3840) * 100%);
    left: calc((1484/3840) * 100%);
    bottom: calc((315/3840) * 100vw);
  }
}
.btn-05 {
  bottom: calc((60 / 375) * 100vw);
  @media screen and (min-width: 751px){
    width: calc((1462/3840) * 100%);
    left: calc((1484/3840) * 100%);
    bottom: calc((315/3840) * 100vw);
  }
}
.btn-06 {
  bottom: calc((106 / 375) * 100vw);
  @media screen and (min-width: 751px){
    width: calc((1225/3840) * 100%);
    left: calc((1308/3840) * 100%);
    bottom: calc((380/3840) * 100vw);
  }
}
.btn-07 {
  bottom: calc((70 / 375) * 100vw);
  @media screen and (min-width: 751px){
    width: calc((1226/3840) * 100%);
    left: calc((2016/3840) * 100%);
    bottom: calc((380/3840) * 100vw);
  }
}
.youtube {
  position: absolute;
  text-align: center;
  left: 0px;
  top: 191px;
  width: 100%;
  iframe {
    width: calc(328 / 375 * 100vw);
    aspect-ratio: 16 / 9;
    height: auto;
  }
  @media screen and (min-width: 751px){
    width: calc((1875/3840) * 100%);
    left: calc((1326/3840) * 100%);
    top: calc((805/3840) * 100vw);
    iframe {
      width: 100%;
      aspect-ratio: 1.46 / 1;
    }
  }
}
.footer {
  padding-top: calc(24 / 375 * 100vw);
  background-color: #f5f4f2;
  position: relative;
  @media screen and (min-width: 751px){
    padding: calc(160 / 3840 * 100vw) calc(100 / 3840 * 100vw) calc(100/ 3840 * 100vw);
  }
}
.footer__row {
  display: flex;
  @media screen and (min-width: 751px){
    display: none;
  }
}
.footer__bottom {
  padding: calc(48 / 375 * 100vw) calc(40 / 375 * 100vw) calc(40/ 375 * 100vw);
  @media screen and (min-width: 751px){
    margin-top: calc(100 / 3840 * 100vw);
    padding: calc(120 / 3840 * 100vw) 0 0;
    border-top: 1px solid #8794a2;
  }
}
.footer__nav {
  @media screen and (min-width: 751px){
    display: flex;
  }
  li {
    + li {
      margin-top: 0.5em;
      @media screen and (min-width: 751px){
        margin: 0 0 0 1em;
      }
    }
    a {
      font-size: calc(15 / 375 * 100vw);
      color: inherit;
      text-decoration: none;
      font-weight: 500;
      @media screen and (min-width: 751px){
        font-size: calc(36 / 3840 * 100vw);
      }
    }
  }
}
.footer__name {
  @media screen and (min-width: 751px){
    width: calc(1412 / 3840 * 100vw);    
  }
}
.copyright {
  font-size: calc(14 / 375 * 100vw);
  font-weight: 500;
  margin-top: 2em;
  @media screen and (min-width: 751px){
    font-size: calc(36 / 3840 * 100vw);
    text-align: right;
  }
}
.float {
  position: fixed;
  z-index: 10;
  right: calc(20 / 375 * 100vw);
  bottom: calc(20 / 375 * 100vw);
  @media screen and (min-width: 751px){
    right: calc(20 / 3840 * 100vw);
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .gotop {
    display: inline-block;
    width: calc(54 / 375 * 100vw);
    @media screen and (min-width: 751px){
      width: calc(200 / 3840 * 100vw);
      margin-bottom: calc(90 / 3840 * 100vw);
    }
  }
  .buy {
    display: none;
    @media screen and (min-width: 751px){
      display: inline-block;
      width: calc(406 / 3840 * 100vw);
    }
  }
}

.fmcall {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.fmcall span {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
}
.fmcall a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
  text-decoration: none;
}