@charset "utf-8";

:root {
  --main-color: #119e95;
  --sub-color: #74b9b7;
  --accent-color1: #9e1189;
  --accent-color2: #9e8411;
  --base-color: #225e5a;
  --white: #fff;
  --fz_10: calc(10 / 16 * 1rem);
  --fz_11: calc(11 / 16 * 1rem);
  --fz_12: calc(12 / 16 * 1rem);
  --fz_13: calc(13 / 16 * 1rem);
  --fz_14: calc(14 / 16 * 1rem);
  --fz_15: calc(15 / 16 * 1rem);
  --fz_16: calc(16 / 16 * 1rem);
  --fz_17: calc(17 / 16 * 1rem);
  --fz_18: calc(18 / 16 * 1rem);
  --fz_19: calc(19 / 16 * 1rem);
  --fz_20: calc(20 / 16 * 1rem);
  --fz_22: calc(22 / 16 * 1rem);
  --fz_24: calc(24 / 16 * 1rem);
  --fz_26: calc(26 / 16 * 1rem);
  --fz_28: calc(28 / 16 * 1rem);
  --fz_30: calc(30 / 16 * 1rem);
  --fz_32: calc(32 / 16 * 1rem);
  --fz_36: calc(36 / 16 * 1rem);
  --fz_37: calc(37 / 16 * 1rem);
  --fz_38: calc(38 / 16 * 1rem);
  --fz_40: calc(40 / 16 * 1rem);
  --fz_43: calc(43 / 16 * 1rem);
  --fz_48: calc(48 / 16 * 1rem);
  --fz_50: calc(50 / 16 * 1rem);
}

@font-face {
  font-family: "din-regular";
  src: url(../font/din-regular.otf);
}

@font-face {
  font-family: "din-bold";
  src: url(../font/din-bold.otf);
}

@font-face {
  font-family: "Lato-Bold";
  src: url(../font/Lato-Bold.ttf);
}

@font-face {
  font-family: "Lato-Regular";
  src: url(../font/Lato-Regular.ttf);
}

@font-face {
  font-family: "Akshar";
  src: url(../font/Akshar-VariableFont_wght.ttf);
}

@font-face {
  font-family: "noto";
  src: url(../font/NotoSansJP-VariableFont_wght.ttf);
}

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

html {
  height: 100%;
}

body {
  font: var(--fz_14) / 1.8 "游ゴシック体", YuGothic, "游ゴシック Medium",
    "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  color: var(--base-color);
  overflow-x: hidden;
}

.inner {
  width: 1200px;
  margin-inline: auto;
}

.c_btn {
  width: 300px;
  height: 40px;
  margin: 100px auto;
  line-height: 40px;
  border-radius: 100px;
  background: var(--sub-color);
  border: 1px solid var(--sub-color);
  position: relative;
  text-align: center;
  z-index: 100;

  &:hover {
    background: var(--white);
    transition: 0.3s;

    &::after {
      color: var(--sub-color);
    }

    a {
      color: var(--sub-color);
    }
  }

  &::after {
    content: "＞";
    color: var(--white);
    font-weight: bold;
    font-size: var(--fz_12);
    position: absolute;
    right: 25px;
    top: 0;
  }

  a {
    color: var(--white);
    font-weight: bold;
    text-shadow: 1px 1px 2px #999;
    width: 100%;
    height: 100%;
    display: block;
  }
}
.fadein {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.fadein.show {
  opacity: 1;
  transform: translateY(0);
}

#totop {
  position: fixed;
  right: 3%;
  bottom: 3%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--main-color);
  z-index: 1000000;
  display: none;

  a {
    width: 100%;
    height: 100%;
    line-height: 50px;
    display: block;
    color: var(--white);
    text-align: center;
    font-size: var(--fz_40);
    &:hover{
      line-height: 40px;
      transition: .3s;
    }
  }
}
@media (width <=1200px) {
  .inner {
    width: 100%;
  }
}

@media (width <=1060px) {
  .c_btn {
    margin: 50px auto;
  }
}