@charset "UTF-8";

:root {
  --size-sm: 1rem;
  --size-md: 1.6rem;
  --size-lg: 2.6rem;
  --size-xl: 4.2rem;
  --size-xxl: 6.6rem;

  --main-color: #f77237;
  --main-color-rgb: 247, 114, 55;
  --text-color: #44190c;
  --white-color: #fefefe;
  --white-color-rgb: 254, 254, 254;

  --font-sans: "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;

  --gutter-base: 8px;

  --contents-side-gutter: calc(var(--gutter-base) * 2);

  --contents-gutter: calc(var(--gutter-base) * 5);
  --contents-gutter-pc: calc(var(--gutter-base) * 10);

  --section-gutter: calc(var(--gutter-base) * 10);
  --section-gutter-pc: calc(var(--gutter-base) * 20);

  --footer-gutter: calc(var(--gutter-base) * 30);
}

html {
  font-size: 62.5%;
}

body {
  font-size: var(--size-md);
  line-height: 1.75;
  font-family: var(--font-sans);
  color: var(--text-color);
}

a {
  text-decoration: none;
  color: var(--main-color);
}

.center {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

.contents_title {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--contents-gutter);
}

.contents_title.pc {
  display: none;
}

@media screen and (min-width: 960px) {
  .contents_title.pc {
    display: block;
  }

  .contents_title.sp {
    display: none;
  }

  .contents_title {
    margin-bottom: var(--contents-gutter-pc);
  }

  br.pc_br_off {
    display: none;
  }
}

.btn {
  border: 1px var(--main-color) solid;
  display: block;
  width: 350px;
  margin-left: auto;
  margin-right: auto;
  line-height: 90px;
  text-align: center;
  position: relative;
  transition: 0.6s;
}

.btn::after {
  font-family: "Material Symbols Outlined";
  content: "\e5c8";
  position: absolute;
  right: 20px;
}

@media screen and (min-width: 960px) {
  .btn:hover {
    background-color: var(--main-color);
    color: var(--white-color);
  }

  .btn:hover::after {
    content: "\e315";
    position: absolute;
    right: 10px;
  }
}

header {
  padding: var(--gutter-base);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
}

header .header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header .header_inner h1 {
  width: 200px;
}

header .ham_menu {
  border: 1px solid var(--main-color);
  color: var(--main-color);
  padding: var(--gutter-base);
  display: flex;
  align-items: center;
  z-index: 100;
  mix-blend-mode: difference;
}

header .ham_menu_text {
  margin-left: var(--gutter-base);
}

header .ham_menu .ham_menu_line::before,
header .ham_menu .ham_menu_line::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--main-color);
}

header .ham_menu .ham_menu_line::before {
  transform: translateY(-2px);
}

header .ham_menu_line::after {
  transform: translateY(4px);
}

header.on .ham_menu .ham_menu_line::before {
  transform: translateY(2px) rotate(45deg);
}

header.on .ham_menu_line::after {
  transform: translateY(0px) rotate(-45deg);
}

header .header_inner nav {
  position: fixed;
  background-color: rgb(var(--main-color-rgb), 0.8);
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding-left: calc(var(--gutter-base) * 5);
  padding-right: calc(var(--gutter-base) * 5);
  padding-top: calc(var(--gutter-base) * 10);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

header .header_inner nav a {
  color: var(--white-color);
  font-size: var(--size-xl);
  border-bottom: 2px dotted var(--white-color);
  display: block;
  line-height: 2.5;
}

header.on .header_inner nav {
  opacity: 1;
  visibility: visible;
}

@media screen and (min-width: 960px) {
  header {
    padding-top: calc(var(--gutter-base) * 3);
    padding-left: calc(var(--gutter-base) * 3);
    padding-right: calc(var(--gutter-base) * 3);
  }

  header .ham_menu {
    display: none;
  }

  header .header_inner nav {
    opacity: 1;
    visibility: visible;
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    padding: 0;
  }

  header .header_inner nav a {
    color: var(--main-color);
    font-size: var(--size-md);
    line-height: 1.75;
    border-bottom: none;
  }

  header .header_inner nav ul {
    display: flex;
  }

  header .header_inner nav li {
    margin-left: calc(var(--gutter-base) * 2);
  }
}

footer {
  background-color: var(--main-color);
  color: var(--white-color);
  padding: calc(var(--gutter-base) * 3);
  text-align: center;
}

footer img {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  max-width: 260px;
  min-width: 160px;
  margin-bottom: calc(var(--gutter-base) * 3);
}

footer address {
  font-style: normal;
  margin-bottom: calc(var(--gutter-base) * 3);
}