@charset "UTF-8";

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html{font-family:Arial,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Meiryo,Helvetica,メイリオ,sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,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,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{color:#000;background-color:transparent;text-decoration:none}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:bottom;max-width:100%;height:auto}svg:not(:root){overflow:hidden}figure{margin:0}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}li{list-style:none}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}img {backface-visibility: hidden;}

/* template ----------------------*/
body {
  font-size: 16px;
  line-height: 2;
  color: #555;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  background: #fff;
  margin: auto;
  padding: 0;
}
a, a:active, a:hover{ color: inherit; }

:root{
  --scrollbar: 0;
  --sp-main-width: 428px;
  --pc-main-width: (100vw - var(--sp-main-width));
}

.box img {
  display: block;
}

.wrap {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.wrap::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg_main.png) center/cover no-repeat;
  z-index: -1;
}

.pc-main {
  position: fixed;
  height: 100vh;
  inset: 0;
  /* left: -6.4rem; */
  /* width: 11.25rem; */
  width: calc(var(--pc-main-width) - var(--scrollbar) - var(--pc-main-width) / 2);
  margin: auto;
  margin-left: 0;
  z-index: 0;
}
.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: min(70%, 180px);
  text-align: center;
  z-index: 1;
}

.sp-main {
  position: relative;
  width: var(--sp-main-width);
  margin-inline: auto;
  box-shadow: 0 0 10px rgb(0 0 0 / .2);
  z-index: 1;
}

.floatingButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: clamp(340px, calc(var(--pc-main-width) - var(--scrollbar) - var(--pc-main-width) / 2), 396px);
  opacity: 0;
  visibility: hidden;
  transition: .4s ease;
  z-index: 10;
}
.floatingButton.is-active {
  opacity: 1;
  visibility: visible;
}
.floatingButton.is-hide {
  opacity: 0 !important;
  visibility: hidden !important;
}

.floatingButton__button {
  display: block;
  position: relative;
  box-shadow: 0 0 8px rgba(0 0 0 / .25);
  border-radius: 50vw;
  overflow: hidden;
  z-index: 0;
}
.floatingButton__button::before {
  content: '';
  position: absolute;
  top: -60px;
  left: -60px;
  width: 50px;
  height: 50px;
  background: linear-gradient(to right,rgba(255,255,255,0), rgba(255,255,255,0.9));
  animation: shine 6s ease-in infinite;
  z-index: 1;
}

@keyframes shine {
  0% {
    transform: scale(0) rotate(50deg);
    opacity: 0;
  }

  70% {
    transform: scale(1) rotate(50deg);
    opacity: 1;
  }

  100% {
    transform: scale(250) rotate(50deg);
    opacity: 0;
  }
}

@media screen and (max-width: 1200px) {
  :root {
    --sp-main-width: 375px;
  }
}

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

  .floatingButton {
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: min(100%, 375px);
    background-color: rgb(255 255 255 / .8);
    box-sizing: border-box;
    padding: 12px;
  }

  .floatingButton__button {
    width: min(calc(100% - 35px), 340px);
    margin-inline: auto;
  }
  .floatingButton__button::before {
    top: -60px;
    left: -60px;
    width: 50px;
    height: 50px;
  }
}

@media screen and (max-width: 640px) {
  .wrap {
    background: none;
  }

  .sp-main {
    width: 100%;
  }

  .floatingButton {
    width: 100%;
  }
}