*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
::after,::before{box-sizing:border-box}
body{font-family:'Noto Sans JP',sans-serif;font-size:1rem;font-weight:400;position:relative;color:#333;background-color:#fff;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color 1s ease}
body,h1,h2,h3,h4,h5,h6{margin:0;outline:none;line-height:1.6}
p{line-height:1.8;letter-spacing:.06em}
a{display:inline-block;color:inherit}
a,a:focus,a:hover{outline:none;text-decoration:none}
a:hover,button:hover{cursor:pointer;}
main,article,aside,dialog,figure,footer,header,hgroup,nav,section,div{position:relative;display:block}
ul,ol{list-style:none}
li{list-style:none}
nav ul{list-style:none}
figure{display:block;position:relative;line-height:0}
figure figcaption{line-height:1.6}
table{width:100%}
table th{text-align:left}
iframe{border:none}
canvas{vertical-align:bottom}
blockquote,q{quotes: none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
strong{font-weight:800}
span{display:inline-block}
.pc{display:none}
.tb{display:none}
.sp{display:block}
.tb-hide{display:none}
img{display:inline-block;width:100%;height:auto}
picture{display:block}
.container,.container-lg,.flex-container{position:relative;width:100%;margin:0 auto;padding:0 1.875rem}
.main{background:#fff; overflow: hidden;}


@media screen and (min-width: 48rem) {
  .pc {
    display:block;
  }
  .tb {
    display:block;
  }
  .sp {
    display:none;
  }
}
.cta-btn {
  display: none;
}

@media (min-width:48rem) {
  .cta-btn {
    position: fixed;
    display: block;
    bottom: 20px;
    right: calc(37 * var(--u));
    background-image: url(../img/top/icon_contact.png);
    width: calc(180* var(--u));
    height: calc(260 * var(--u));
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
  }

  .cta-btn::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../img/top/icon_contact-orange.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s, opacity 0.5s, background-image 0.5s;
  }
}

@media (any-hover: hover) {
  .cta-btn:hover::before {
    opacity: 1;
    visibility: visible;
  }
}

@media screen and (max-width:48rem){
  body{ font-size:14px ;
  }
}

@media (any-hover: hover) {
  a:hover,button:hover {
      transition: all 0.3s ease;
  }
  a:before,a:after,button:before,button:after {
    transition: all 0.3s ease;
  }
}

:root {
	/* サイズ */
  --u: 0.0625rem;/* 1px = 0.0625rem。使用例：calc(120 * var(--u));*/
  --vw-sp: calc(100vw / 375);
  --vw-md: calc(100vw / 767);
  --vw-lg: calc(100vw / 1024);
  --vw-xl: calc(100vw / 1680);
  --vw-xxl: calc(100vw / 1920);

/* カラー */
--black: #333;
--white: #fff;
--oragne: #f09428;
--gray: #8b8b8b;
--l-gray: #f3f2ee;
--border: #707070;
--font-gray: #e5e5e5;
--bg-contact: #f7f6f5;

/* フォント */
--font-inter: 'Inter', sans-serif;
--font-lobster: 'Lobster Two', cursive;
--font-main: 'Noto Sans JP', sans-serif;
}


/* ルートフォントサイズの設定 */
html {
  font-size: 100%;
}

/* @media (max-width: 1680px) and (min-width: 1281px) {
  html {
    font-size: max(calc(16px * 100vw / 1680px), 14px);
  }
}
@media (max-width: 1280px) and (min-width: 768px) {
  html {
    font-size: max(calc(16px * 100vw / 1280px), 14px);
  }
}
@media (max-width: 767px) {
  html {
    font-size: min(calc(16px * 100vw / 375px), 20px);
  }
}
@media (max-width: 375px) {
  html {
    font-size: calc(16px * 100vw / 375px);
  }
} */




@media screen and (min-width: 1681px) {
  html {
    font-size: 100%;
    /* font-size: 0.8333333333vw; */
  }
}
@media screen and (max-width: 1680px) {
  html {
  font-size: max(calc(16px * 100vw / 1680px), 14px);
  }
}
@media screen and (max-width: 1023px) {
  html {
    font-size: 100%;
    font-size: 1.25vw;
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: min(calc(16px * 100vw / 375px), 18.5px);
  }
}
@media (max-width: 375px) {
  html {
    font-size: 4.2666666667vw;
  }
}