@charset "UTF-8";
/*==========================================
変数 inc.scss
===========================================*/
/*Regular*/
/*==========================================
変数 fonts.scss
===========================================*/
/*===================================
userSS 追加
=====================================*/
/*==========================================
 
===========================================*/
/*==========================================
 共通設定
===========================================*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

*:focus {
  outline: none; }

::selection {
  background: #bfbfbf;
  color: #fff; }

*::-webkit-scrollbar {
  background: #000;
  width: 5px;
  height: 5px; }
*::-webkit-scrollbar-thumb {
  background-color: #ccc; }

/* for Firefox */
::-moz-selection {
  background: #bfbfbf;
  color: #fff; }

/*=== html ===*/
html {
  font-size: 62.5%; }

body {
  color: #0f4175;
  -webkit-text-size-adjust: 100%;
  font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  line-height: 1.5;
  overflow-x: clip;
  position: relative;
  transition: 0.3s ease-in-out;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }
  @media screen and (max-width: 960px) {
    body {
      overflow-x: clip; } }

main {
  overflow-x: clip;
  max-width: 100%; }

/*IE*/
/*@media all and (-ms-high-contrast:none) {
body {
  font-family: "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}
}*/
/*=== フォント ===*/
/* 明朝体 */
.font_min {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; }

/*ゴシック */
.font_go {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; }

/*=== リンク ===*/
a {
  color: initial;
  text-decoration: none;
  transition: 0.3s ease-in-out; }

a.img-link,
.img-link-wrap a {
  display: block;
  font-size: 0; }

@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none !important;
    cursor: default !important; } }
/*=== 画像 ===*/
img {
  max-width: 100%;
  height: auto; }

.noImg img {
  object-fit: contain;
  padding: 0 10%; }

img.noImg {
  object-fit: contain;
  padding: 0 10%; }

img.noimg {
  object-fit: contain;
  padding: 0 10%; }

img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em; }

/*=== clear fix ===*/
.clearfix::after {
  content: " ";
  display: block;
  clear: both; }

/*==========================================
 汎用css
===========================================*/
/*=== hover Action ===*/
/*memo 【_d】aタグに直*/
/*=== opacity ===*/
@media screen and (min-width: 961px) {
  .hover-oc_d:hover,
  .hover-oc a:hover {
    opacity: 0.7; } }
/*=== under line ===*/
.hover-ul_d,
.hover-ul a,
.hover-ulL_d,
.hover-ulL a,
.hover-ulF_d,
.hover-ulF a {
  position: relative;
  display: inline-block; }

/*=== under line【CENTER】 ===*/
.hover-ul_d::after,
.hover-ul a::after {
  position: absolute;
  bottom: -1px;
  left: 50%;
  content: "";
  width: 0;
  height: 1px;
  background-color: #000;
  transition: 0.3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

/*=== under line【LEFT】 ===*/
.hover-ulL_d::after,
.hover-ulL a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 0;
  height: 1px;
  background-color: #000;
  transition: 0.3s; }

/*=== under line【FADE】 ===*/
.hover-ulF_d::after,
.hover-ulF a::after {
  position: absolute;
  bottom: 0.3em;
  left: 0;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #000;
  opacity: 0;
  transition: 0.3s; }

/*=== HOVER動作 ===*/
@media (hover: hover) {
  .hover-ul_d:hover:hover::after,
  .hover-ul a:hover:hover::after,
  .hover-ulL_d:hover:hover::after,
  .hover-ulL a:hover:hover::after {
    width: 100%; } }

@media (hover: hover) {
  .hover-ulF_d:hover:hover::after,
  .hover-ulF a:hover:hover::after {
    bottom: 0;
    opacity: 1; } }

/* ホバー　震える */
@media (hover: hover) {
  .hover-rum:hover:hover {
    animation: rumble 0.12s linear infinite; } }

@keyframes rumble {
  0% {
    transform: rotate(0deg) translate(0, 0); }
  12.5% {
    transform: rotate(0.4deg) translate(1px, -1px); }
  25% {
    transform: rotate(0.8deg) translate(0px, 1px); }
  37.5% {
    transform: rotate(0.4deg) translate(-1px, 0); }
  50% {
    transform: rotate(0deg) translate(0, 0); }
  62.5% {
    transform: rotate(-0.4deg) translate(1px, 0); }
  75% {
    transform: rotate(-0.8deg) translate(0, 1px); }
  87.5% {
    transform: rotate(-0.4deg) translate(-1px, -1px); }
  100% {
    transform: rotate(0deg) translate(0, 0); } }
.hover_TS a {
  transition: 0.25s all cubic-bezier(0.34, 1.56, 0.64, 1); }
  @media (hover: hover) {
    .hover_TS a:hover:hover {
      transform: scale(1.05); } }

.hover_db a {
  background: linear-gradient(currentColor 0 0) 0 100%/var(--d, 0) 2px no-repeat, linear-gradient(currentColor 0 0) 100% calc(100% - 4px)/var(--d, 0) 2px no-repeat;
  transition: 0s 0.5s, background-size 0.5s; }
  @media (hover: hover) {
    .hover_db a:hover:hover {
      --d: 100%;
      background-position: 0% calc(100% - 2px), 100% calc(100% - 2px);
      transition: 0.3s, background-position 0.3s 0.3s; } }

/*==== MARKER ===*/
.gray-line {
  background: linear-gradient(transparent 60%, #f5f5f5 60%); }

.green-line {
  background: linear-gradient(transparent 60%, #e8f1ec 60%); }

/*=== 幅 ===*/
.wrapMDL {
  max-width: 960px;
  width: 100%;
  margin-inline: auto; }

.wrapXL {
  max-width: 1920px;
  width: 100%;
  margin-inline: auto; }

.wrap {
  max-width: 1200px;
  width: 92%;
  margin: 0 auto; }

.wrapW {
  max-width: 1740px;
  width: 92%;
  margin: 0 auto; }
  @media screen and (min-width: 577px) {
    .wrapW {
      width: 92%; } }

@media screen and (max-width: 960px) {
  .wrapW_sp {
    max-width: 1740px;
    width: 92%;
    margin: 0 auto; } }

@media screen and (min-width: 961px) {
  .wrapW_pc {
    max-width: 1740px;
    width: 92%;
    margin-inline: 0 auto; } }

@media screen and (min-width: 961px) {
  .wrapW_left_pc {
    max-width: 1740px;
    width: 92%;
    margin-inline: 0 auto; } }

@media screen and (min-width: 961px) {
  .wrapW_right_pc {
    max-width: 1740px;
    width: 92%;
    margin-inline: auto 0; } }

.wrapW-P {
  width: 90%;
  margin: 0 auto; }
  @media screen and (max-width: 960px) {
    .wrapW-P {
      width: 92%; } }
  @media screen and (min-width: 961px) {
    .wrapW-P {
      width: 96%; } }
  @media screen and (min-width: 1361px) {
    .wrapW-P {
      width: calc(100% - 100px); } }

.wrapW-L {
  width: 96%;
  margin: 0 auto; }
  @media screen and (max-width: 960px) {
    .wrapW-L {
      width: 96%; } }
  @media screen and (min-width: 961px) {
    .wrapW-L {
      width: 96%; } }

.wrapW-M {
  width: 86%;
  margin: 0 auto; }
  @media screen and (max-width: 960px) {
    .wrapW-M {
      width: 92%; } }
  @media screen and (min-width: 961px) {
    .wrapW-M {
      width: 92%; } }
  @media screen and (min-width: 1361px) {
    .wrapW-M {
      width: calc(92% - 100px); } }

.wrapW-S {
  margin: 0 auto; }
  @media screen and (max-width: 960px) {
    .wrapW-S {
      width: 88%; } }
  @media screen and (min-width: 961px) {
    .wrapW-S {
      width: 88%; } }
  @media screen and (min-width: 1361px) {
    .wrapW-S {
      width: calc(88% - 100px); } }

.wrap-inner {
  padding: 0 2.5%; }
  @media screen and (min-width: 1201px) {
    .wrap-inner {
      padding: 0 25px; } }
  @media screen and (min-width: 1921px) {
    .wrap-inner {
      padding: 0 30px; } }
  @media screen and (max-width: 576px) {
    .wrap-inner {
      padding: 0 4%; } }

@media screen and (min-width: 961px) {
  .wrap-inner_pc {
    padding-inline: 4%; } }

@media screen and (max-width: 960px) {
  .wrap-inner_sp {
    padding-inline: 4%; } }

.wrapVW {
  width: 90vw;
  max-width: 1720px;
  margin: 0 auto; }

.wrapW-S,
.wrapW-M,
.wrapW-L,
.wrapW-P {
  padding: 0 2.5%; }
  @media screen and (min-width: 1201px) {
    .wrapW-S,
    .wrapW-M,
    .wrapW-L,
    .wrapW-P {
      padding: 0 25px; } }
  @media screen and (min-width: 1921px) {
    .wrapW-S,
    .wrapW-M,
    .wrapW-L,
    .wrapW-P {
      padding: 0 30px; } }
  @media screen and (max-width: 960px) {
    .wrapW-S,
    .wrapW-M,
    .wrapW-L,
    .wrapW-P {
      padding: 0 4%; } }

.side-wrap {
  max-width: calc(92% - 10px);
  margin-inline: 0 auto; }
  @media screen and (max-width: 960px) {
    .side-wrap {
      max-width: 96%;
      margin-inline: auto; } }

.dsp_none {
  display: none !important; }

/*=== PC none / SP none ===*/
@media screen and (min-width: 376px) {
  .pc-none_xs {
    display: none; } }
@media screen and (min-width: 376px) {
  .pc-none_sm {
    display: none; } }
@media screen and (min-width: 769px) {
  .pc-none_md {
    display: none; } }
@media screen and (min-width: 768px) {
  .pc-none_mdS {
    display: none; } }
@media screen and (min-width: 961px) {
  .pc-none {
    display: none; } }
@media screen and (min-width: 1201px) {
  .pc-none_lg {
    display: none; } }
@media screen and (min-width: 1921px) {
  .pc-none_xl {
    display: none; } }
@media (min-width: 480px) {
  .pc-none_480 {
    display: none; } }
@media screen and (max-width: 1920px) {
  .sp-none_xl {
    display: none; } }
@media screen and (max-width: 1200px) {
  .sp-none_lg {
    display: none; } }
@media screen and (max-width: 960px) {
  .sp-none {
    display: none; } }
@media screen and (max-width: 767px) {
  .sp-none_md {
    display: none; } }
@media screen and (max-width: 576px) {
  .sp-none_sm {
    display: none; } }
@media screen and (max-width: 375px) {
  .sp-none_xs {
    display: none; } }
@media screen and (max-width: 960px) {
  .sp-none_tag {
    display: contents; } }
@media screen and (min-width: 769px) {
  .pc-none_md_tag {
    display: contents; } }
@media screen and (max-width: 768px) {
  .sp-none_md_tag {
    display: contents; } }
@media screen and (min-width: 961px) {
  .pc-none_tag {
    display: contents; } }
/*=== テキスト ===*/
.wbr_txt {
  word-break: keep-all;
  overflow-wrap: anywhere; }

.taC {
  text-align: center; }

.fwB {
  font-weight: bold; }

/*=== 余白 ===*/
.main {
  margin-top: 65px; }
  @media screen and (max-width: 960px) {
    .main {
      margin-top: 61px; } }

/*==========================================
 アンカーリンク
===========================================*/
.anchor_link {
  position: relative;
  top: -150px;
  display: block; }

@media screen and (max-width: 960px) {
  .anchor_link {
    top: -100px; } }
.grecaptcha-badge {
  display: none; }

.auto-phrase {
  word-break: auto-phrase; }

/*==========================================
 ヘッダー
===========================================*/
#header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  background: #fff;
  padding: 10px 0; }
  #header .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center; }
  #header .header-logo {
    max-width: 295px;
    width: 35%; }
  @media screen and (max-width: 767px) {
    #header .header-cnv {
      display: none; } }
  #header .header-cnv a {
    display: block;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding: 0.5em 2em; }
    @media (hover: hover) {
      #header .header-cnv a:hover {
        background: #0f4175;
        color: #fff; } }

/*==========================================
 FOOTER
===========================================*/
#footer {
  padding: clamp(30px, 6vw, 60px) 0 1em; }
  @media screen and (max-width: 767px) {
    #footer {
      padding-bottom: 100px; } }
  #footer .footer-logo {
    max-width: 368px;
    width: 60%; }
  #footer .footer-copy {
    margin-top: clamp(20px, 4vw, 40px);
    font-size: clamp(1rem, 1.8vw, 1.8rem);
    text-align: right; }

/*==========================================
 【SP FOOTER CNV】
===========================================*/
.footer-spNav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 5;
  box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.6); }
  @media screen and (min-width: 768px) {
    .footer-spNav {
      display: none !important; } }
  .footer-spNav a {
    display: block;
    background: #0f4175;
    color: #fff;
    padding: 1em 0;
    font-weight: bold;
    letter-spacing: 0.1em; }

/*==========================================
 【CNV BLOCK】
===========================================*/
.cnvBlock {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media screen and (max-width: 767px) {
    .cnvBlock {
      height: 70vh; } }
  .cnvBlock .fixedArea-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    clip-path: inset(0); }
    .cnvBlock .fixedArea-bg .bgFixed {
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url("../../img/lp/bg-cnv.jpg"); }
      @media screen and (max-width: 767px) {
        .cnvBlock .fixedArea-bg .bgFixed {
          background-position: left 9% center; } }

.btn-request a {
  display: block;
  text-align: center;
  width: clamp(140px, 20vw, 275px);
  aspect-ratio: 1/1;
  position: relative; }
  @media (hover: hover) {
    .btn-request a:hover .btn-more .arw {
      transform: rotateX(360deg); } }
  .btn-request a .btn-deco {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; }
    .btn-request a .btn-deco.deco01 {
      background: #0f4175;
      animation: btnAnime01 3s ease-in-out infinite; }
    .btn-request a .btn-deco.deco02 {
      background: #ecb130;
      animation: btnAnime02 5s ease-in-out infinite; }
  .btn-request a .btn-main {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; }
    .btn-request a .btn-main::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: #fff;
      position: absolute;
      left: 0;
      top: 0;
      transform: rotate(45deg); }
  .btn-request a .btn-ttlEn, .btn-request a .btn-ttlJa, .btn-request a .btn-more {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
  .btn-request a .btn-ttlEn {
    font-family: "futura", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
    letter-spacing: 0.2em;
    font-size: clamp(1.2rem, 1.8vw, 2.1rem);
    font-weight: 600; }
  .btn-request a .btn-ttlJa {
    font-weight: bold;
    font-size: clamp(1.6rem, 2vw, 2.4rem);
    letter-spacing: 0.2em;
    margin-top: 0.5em; }
    .btn-request a .btn-ttlJa::before {
      content: "";
      display: block;
      width: 100%;
      max-width: 216px;
      height: 1px;
      background: #79868b;
      margin: 0 auto 0.4em; }
  .btn-request a .btn-more {
    margin-top: 3em;
    font-size: clamp(1rem, 1.6vw, 1.6rem);
    letter-spacing: 0.05em;
    color: #79868b;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row; }
    @media screen and (max-width: 576px) {
      .btn-request a .btn-more {
        margin-top: 2em; } }
    .btn-request a .btn-more .arw {
      transition: 0.3s ease-in-out;
      display: inline-block;
      background: url("../../img/lp/btn-arw.svg") no-repeat center/contain;
      aspect-ratio: 25/10;
      width: clamp(15px, 2.5vw, 25px);
      margin-left: 5px; }

@keyframes btnAnime01 {
  0% {
    transform: rotate(52deg); }
  50% {
    transform: rotate(48deg); }
  to {
    transform: rotate(52deg); } }
@keyframes btnAnime02 {
  0% {
    transform: rotate(48deg); }
  50% {
    transform: rotate(44deg); }
  to {
    transform: rotate(48deg); } }

/*# sourceMappingURL=common.css.map */