@charset "UTF-8";

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

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
}

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

p,
figure,
dl,
dd {
  margin: 0;
}

img,
svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

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

button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

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

/*---------------------------------
  Usage Rule
---------------------------------
  ・PCのKVや画面幅いっぱいの装飾：calc(数値 * var(--pc))
  ・PCの本文コンテンツ：calc(数値 * var(--pc))
  ・SP：375px基準で calc(数値 * var(--sp))
  ・1px罫線、z-index、opacity、line-height、font-weight 等は固定値可
---------------------------------*/

/*---------------------------------
  Design Tokens / Variables
---------------------------------*/
:root {
  --pc-base: 1920;
  --sp-design-base: 375;

  --maincolor: #00a7c8;
  --subcolor: #7ac943;
  --textcolor: #000;
  --bgcolor: #fff;
  --graycolor: #f5f7f8;
  --linecolor: #d9e1e4;

  --ksf-main: #337a98;
  --ksf-accent: #36baad;
  --ksf-button: #80bcc4;
  --ksf-border: #c1c1c1;

  --grad-main:
    linear-gradient(
      135deg,
      #00d6d6 0%,
      #00c8d8 38%,
      #7fd75b 100%
    );

  --inner: calc(1040 * var(--pc));

  --pc: calc(100vw / var(--pc-base));

  /* PC時は基本使用しないが、初期値として保持 */
  --sp: calc(100vw / var(--pc-base));
}

@media screen and (max-width: 768px) {
  :root {
    --inner: 96%;
    --sp: calc(100vw / var(--sp-design-base));
  }
}

/*---------------------------------
  Base
---------------------------------*/
body {
  display: flex;
  flex-direction: column;

  min-width: 320px;
  min-height: 100vh;

  color: var(--textcolor);
  background: var(--bgcolor);

  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.04em;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.ksf__site {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 100vh;
}

main,
.ksf-main {
  flex: 1;
}

@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
}

/*---------------------------------
  Utilities
---------------------------------*/
.inner {
  width: 100%;
  max-width: var(--inner);
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .inner {
    width: var(--inner);
    max-width: none;
  }
}

.only-pc {
  display: block;
}

.only-sp {
  display: none;
}

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

  .only-sp {
    display: block !important;
  }
}

.txt-left {
  text-align: left;
}

.pcno-break::before {
  content: "";
  white-space: pre;
}

.spno-break::before {
  content: "\A";
  white-space: pre;
}

@media screen and (max-width: 768px) {
  .pcno-break::before {
    content: "\A";
    white-space: pre;
  }

  .spno-break::before {
    content: "";
    white-space: pre;
  }
}