/* ==========================================================================
   Variables(Figma: 常栄不動産_公式サイト PC / SP)
   ========================================================================== */
:root {
  /* Color */
  --color-key: #1ea334;
  --color-key-light: #63b671;
  --color-key-pale: #cedfca;
  --color-lime: #72be00;
  --color-accent: #e07800;
  --color-brown: #856b4d;
  --color-text: #4c4c4c;
  --color-text-sub: #737373;
  --color-dark: #595757;
  --color-white: #fff;
  --color-beige: #f2ebcb;
  --color-cream: #faf8eb;
  --color-ivory: #fbfae7;
  --color-bg-gray: #f3f1ef;
  --color-border: #d9d9d9;
  --color-line: #bebebe;
  --gradient-cta: linear-gradient(180deg, #e26a00 0%, #f9bd24 100%);

  /* Font family */
  --font-base: "Noto Sans JP", sans-serif;
  --font-ttl: "dnp-shuei-mgothic-std", "Noto Sans JP", sans-serif;
  --font-en: "Lato", sans-serif;

  /* Font weight */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-ttl: 600;

  /* Body text(SP: common_text_sp) */
  --fs-body: 1.5rem;
  --lh-body: 1.9;
  --ls-body: 0.01em;

  /* Common title(SP: ttl_common_sp) */
  --fs-ttl: 2.8rem;
  --lh-ttl: 1.5;
  --ls-ttl: 0.05em;

  /* Radius */
  --radius-10: 10px;
  --radius-15: 15px;
  --radius-20: 20px;
  --radius-30: 30px;
  --radius-50: 50px;
  --radius-full: 100px;

  /* Layout */
  --inner-width: 980px;
  --inner-padding: 20px;

  /* Transition */
  --duration: 0.3s;
}

@media (min-width: 768px) {
  :root {
    /* Body text(PC: common_text_pc) */
    --fs-body: 1.6rem;
    --lh-body: 1.8;
    --ls-body: 0.02em;

    /* Common title(PC: ttl_common_pc) */
    --fs-ttl: 3.6rem;
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

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

address,
em {
  font-style: normal;
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  background-color: var(--color-bg-gray);
  -webkit-font-smoothing: antialiased;
}

/* リンクのホバー(サイト共通) */
a {
  transition: opacity var(--duration);
}

@media (hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}

/* 電話番号のリンクはSPのみ有効(PCではクリックしても発信しない) */
@media (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

/* ==========================================================================
   Layout
   ========================================================================== */
.l-inner {
  width: 100%;
  max-width: calc(var(--inner-width) + var(--inner-padding) * 2);
  margin-inline: auto;
  padding-inline: var(--inner-padding);
}

/* ==========================================================================
   Utility
   ========================================================================== */
@media (min-width: 768px) {
  .u-sp-only {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .u-pc-only {
    display: none !important;
  }
}

.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}