@charset "UTF-8";

/* ==========================================================================
   Common styles
============================================================================= */
/* --------------------
  var
-------------------- */
:root {
  --color-brown: #64372c;
  --color-orange: #f38400;
  --color-accent: #a6893d;
  --color-beige-01: #f7f3ee;
  --color-border: #dcd1ce;
  --font-sans: "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-en: "Cormorant", serif;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url("https://example.com/material-symbols.woff") format('woff');
}

/* --------------------
  base style
-------------------- */
body {
  color: var(--color-brown);
  font-family: Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", var(--font-sans);
  /* font-size: 14px; */
  /* line-height: 1.6; */
  /* letter-spacing: 0.05em; */
}

.l-header, .l-aside, .l-footer {
  font-size: 14px;
}

.l-header a, .l-aside a, .l-footer a, .p-mv__menu a {
  color: var(--color-brown);
  text-decoration: none;
}

.l-header ul, .l-aside ul, .l-footer ul, .p-mv__menu {
  list-style: none;
  padding: 0;
}

.l-header .c-button, .l-aside .c-button, .l-footer .c-button {
  color: #fff;
}


/* --------------------
  logo
-------------------- */
.logo {
  mix-blend-mode: multiply;
}


/* --------------------
  read more
-------------------- */
.js-more {
  -webkit-padding-after: 48px;
  padding-block-end: 48px;
  position: relative;
}

.js-more__btn {
  background-color: var(--color-beige-01);
  border-radius: 50px;
  bottom: 0;
  color: var(--color-brown);
  display: block;
  padding: 10px;
  position: absolute;
  text-align: center;
  width: 100%;
}

.js-more__btn::before {
  content: "続きを読む";
}

.js-more__btn::after {
  content: "\e313";
  display: inline-block;
  font-family: 'Material Symbols Outlined';
  -webkit-margin-start: 4px;
  margin-inline-start: 4px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.js-more__btn.is-show::before {
  content: "閉じる";
}

.js-more__btn.is-show::after {
  -webkit-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}

.js-more__txt {
  overflow: hidden;
  position: relative;
}

.js-more__txt.is-hide {
  height: 16vw;
}

@media screen and (min-width: 768px) {
  .js-more__btn {
    display: none;
  }
}

@media screen and (max-width: 767.98px) {
  .js-more__txt.is-hide::before {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.9)), color-stop(50%, rgba(255, 255, 255, 0.9)), to(#fff));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
    background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
    bottom: -13px;
    content: "";
    height: 100%;
    position: absolute;
    width: 100%;
  }
}


/* --------------------
  header
-------------------- */
.l-header {
  padding: 2.2857vw;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 200;
  /* hamburger menu */
  /* scroll header */
}

.l-header__inner {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0 1.42857vw;
}

.l-header__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1.42857vw;
  -webkit-margin-start: auto;
  margin-inline-start: auto;
}

.l-header__nav>ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1.42857vw;
  list-style: none;
  padding: 0;
}

.l-header__nav>ul li>a {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: var(--color-brown);
  font-size: clamp(13px, 1.07vw, 15px);
  gap: 6px;
  line-height: 1.4;
  text-decoration: none;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  word-break: break-all;
}

.l-header__nav>ul li>a.link::after {
  background-image: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.10811 4L0 0.933333L0.945946 0L5 4L0.945946 8L0 7.06667L3.10811 4Z' fill='%23F38400'/%3E%3C/svg%3E%0A");
  content: "";
  display: inline-block;
  height: 8px;
  width: 5px;
}

.l-header__nav>ul a:hover {
  color: var(--color-orange);
}

.l-header__nav .has-children {
  position: relative;
}

.l-header__nav .has-children>a::after {
  content: "+";
  color: var(--color-orange);
  width: 0.5em;
}

.l-header__nav .sub-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 13px;
  list-style: none;
  gap: 16px;
  top: 30px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.l-header__nav .sub-menu a {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
}

.l-header .js-menu {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  margin-inline: auto 8px;
  position: relative;
  z-index: 200;
}

.l-header .js-menu span {
  background-color: var(--color-brown);
  display: block;
  height: 1px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  width: 28px;
}

.l-header .js-menu.is-open span {
  width: 30px;
}

.l-header .js-menu.is-open span:first-of-type {
  -webkit-transform: translateY(9px) rotate(30deg);
  transform: translateY(9px) rotate(30deg);
}

.l-header .js-menu.is-open span:nth-of-type(2) {
  background-color: transparent;
}

.l-header .js-menu.is-open span:last-of-type {
  -webkit-transform: translateY(-9px) rotate(-30deg);
  transform: translateY(-9px) rotate(-30deg);
}

@media screen and (min-width: 1140px) {
  .l-header .logo {
    width: 19vw;
  }

  .l-header__nav>ul {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-inline: auto 4px;
  }

  .l-header__nav .has-children:hover>a::after,
  .l-header__nav .has-children:focus-within>a::after {
    content: "-";
  }

  .l-header__nav .has-children:hover .sub-menu,
  .l-header__nav .has-children:focus-within .sub-menu {
    opacity: 1;
    visibility: visible;
  }

  .l-header__nav .sub-menu {
    background-color: #fff;
    max-height: calc(100vh - 102px);
    opacity: 0;
    overflow-y: scroll;
    padding: 28px 32px;
    position: absolute;
    visibility: hidden;
    width: 230px;
  }

  .l-header__nav .sub-menu.scroll-menu::-webkit-scrollbar {
    width: 4px;
  }

  .l-header__nav .sub-menu.scroll-menu::-webkit-scrollbar-track {
    background-color: var(--color-beige-01);
  }

  .l-header__nav .sub-menu.scroll-menu::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 8px;
  }

  .l-header__nav .sub-menu.wide-menu {
    flex-direction: row;
    flex-wrap: wrap;
    visibility: visible;
    width: 600px;
  }

  .l-header__nav .sub-menu a::before {
    content: "-";
  }

  .l-header__nav .contact-menu {
    -webkit-margin-start: auto;
    margin-inline-start: auto;
  }

  .l-header__nav .contact-menu .c-tel {
    display: none;
  }

  .l-header .js-menu {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .l-header.is-fixed {
    -webkit-animation: slide-out-top 1.5s ease-out both;
    animation: slide-out-top 1.5s ease-out both;
  }
}

@media screen and (max-width: 1139.98px) {
  .l-header {
    padding: 16px;
  }

  .l-header .logo {
    width: 218px;
  }

  .l-header__nav {
    background-color: var(--color-beige-01);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 0;
    overflow: scroll;
    padding: 84px 32px 60px;
    position: fixed;
    top: 0;
    right: -375px;
    height: 100%;
    width: 375px;
    z-index: 100;
  }

  .l-header__nav>ul {
    -webkit-border-before: solid 1px var(--color-border);
    border-block-start: solid 1px var(--color-border);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    gap: 0;
    width: 100%;
  }

  .l-header__nav>ul>li>a {
    -webkit-border-after: solid 1px var(--color-border);
    border-block-end: solid 1px var(--color-border);
    padding: 14px 12px;
  }

  .l-header__nav>ul>li>a::after {
    font-size: 18px;
    -webkit-margin-start: auto;
    margin-inline-start: auto;
  }

  .l-header__nav .contact-menu {
    -webkit-margin-after: 34px;
    margin-block-end: 34px;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    width: 100%;
  }

  .l-header__nav .contact-menu .c-button {
    display: block;
    text-align: center;
  }

  .l-header__nav .contact-menu .c-tel {
    -webkit-margin-before: 16px;
    margin-block-start: 16px;
  }

  .l-header__nav .contact-menu .c-tel a {
    font-size: 36px;
    line-height: 1;
  }

  .l-header__nav .contact-menu .c-tel .info {
    -webkit-margin-before: 13px;
    margin-block-start: 13px;
  }

  .l-header__nav .has-children.is-open .sub-menu {
    max-height: 1000px;
    padding: 24px 13px;
  }

  .l-header__nav .sub-menu {
    gap: 14px;
    max-height: 0;
    overflow: hidden;
    padding: 0 13px;
    -webkit-transition: max-height 0.5s ease;
    transition: max-height 0.5s ease;
  }
}

/* --------------------
  aside
-------------------- */
.l-aside {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 0;
  opacity: 0;
  position: fixed;
  right: -375px;
  z-index: 100;
}

.l-aside.is-fixed {
  -webkit-animation: fade-in 0.5s 1 forwards;
  animation: fade-in 0.5s 1 forwards;
  height: auto;
}

.l-aside__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
  min-width: 46px;
  width: 4.1428vw;
}

.l-aside .reserve {
  background-color: #fff;
  border: solid 1px var(--color-orange);
  -webkit-border-end: 0;
  border-inline-end: 0;
  color: var(--color-orange);
  padding-block: 32px;
  text-align: center;
}

.l-aside .reserve span {
  -webkit-margin-start: 8px;
  margin-inline-start: 8px;
  letter-spacing: 0.1em;
  line-height: 1;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

.l-aside .js-asidemenu {
  background-color: var(--color-brown);
  color: #fff;
  font-size: 9px;
  min-height: 46px;
  height: 4.1428vw;
}

.l-aside .reserve,
.l-aside .js-asidemenu {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.l-aside .reserve::before,
.l-aside .js-asidemenu::before {
  content: "";
  font-family: 'Material Symbols Outlined';
  font-size: 20px;
  line-height: 20px;
}

.l-aside .reserve::before {
  content: "\ebcc";
}

.l-aside .js-asidemenu::before {
  content: "\e5d2";
}

.l-aside .js-asidemenu.is-open::before {
  content: "\e5cd";
}

.l-aside__nav {
  background-color: var(--color-beige-01);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: 0;
  overflow: scroll;
  padding: 84px 32px 60px;
  height: 100vh;
  width: 375px;
  z-index: 100;
}

.l-aside__nav>ul {
  -webkit-border-before: solid 1px var(--color-border);
  border-block-start: solid 1px var(--color-border);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  gap: 0;
  width: 100%;
}

.l-aside__nav>ul>li>a {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-border-after: solid 1px var(--color-border);
  border-block-end: solid 1px var(--color-border);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 14px 12px;
}

.l-aside__nav>ul>li>a::after {
  color: var(--color-orange);
  content: "";
  font-size: 18px;
  -webkit-margin-start: auto;
  margin-inline-start: auto;
  width: 0.5em;
}

.l-aside__nav>ul>li>a.link::after {
  background-image: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.10811 4L0 0.933333L0.945946 0L5 4L0.945946 8L0 7.06667L3.10811 4Z' fill='%23F38400'/%3E%3C/svg%3E%0A");
  display: inline-block;
  height: 8px;
  width: 5px;
}

.l-aside__nav .contact-menu {
  -webkit-margin-after: 34px;
  margin-block-end: 34px;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  width: 100%;
}

.l-aside__nav .contact-menu .c-button {
  display: block;
  text-align: center;
}

.l-aside__nav .contact-menu .c-tel {
  -webkit-margin-before: 16px;
  margin-block-start: 16px;
}

.l-aside__nav .contact-menu .c-tel a {
  font-size: 36px;
  line-height: 1;
}

.l-aside__nav .contact-menu .c-tel .info {
  -webkit-margin-before: 13px;
  margin-block-start: 13px;
}

.l-aside__nav .has-children>a::after {
  content: "+";
}

.l-aside__nav .has-children.is-open>a::after {
  content: "-";
}

.l-aside__nav .has-children.is-open .sub-menu {
  max-height: 1000px;
  padding: 24px 13px;
}

.l-aside__nav .sub-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 13px;
  top: 30px;
  gap: 14px;
  max-height: 0;
  overflow: hidden;
  padding: 0 13px;
  -webkit-transition: max-height 0.5s ease;
  transition: max-height 0.5s ease;
}

.l-aside__nav .sub-menu a {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
}

@media screen and (max-width: 767.98px) {
  .l-aside {
    display: none;
  }
}


/* --------------------
  スマホ追従メニュー
-------------------- */
@media (min-width: 576px) {
  .p-mv__menu {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .p-mv__menu {
    bottom: 0;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    width: 100%;
    z-index: 100;
  }

  .p-mv__menu li {
    background-color: rgba(45, 10, 0, 0.55);
  }

  .p-mv__menu li+li a::after {
    background-color: rgba(255, 255, 255, 0.3);
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    height: calc(100% - 38px);
    width: 1px;
  }

  .p-mv__menu a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #fff;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-weight: bold;
    font-size: 14px;
    gap: 6px;
    letter-spacing: 0.05em;
    padding: 14px 8px;
    position: relative;
    text-align: center;
  }

  .p-mv__menu a::before {
    content: "";
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    font-weight: normal;
  }

  .p-mv__menu a.access::before {
    content: "\e0c8";
  }

  .p-mv__menu a.tel::before {
    content: "\e0b0";
  }

  .p-mv__menu a.line::before {
    content: "\e625";
  }

  .p-mv__menu a.internet::before {
    content: "\e325";
  }
}

/* --------------------
  contact area
-------------------- */
.p-contact {
  background: url("../images/top/bg_contact.webp") no-repeat center/cover;
  padding-block: 72px 82px;
  position: relative;
}

.p-contact::before {
  background-color: rgba(215, 117, 0, 0.2);
  content: "";
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}

.p-contact .l-container {
  max-width: 1140px;
  margin-inline: auto;
  min-height: inherit !important;
}

.p-contact__cont {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 5.14vw;
  position: relative;
  z-index: 10;
}

.p-contact__cont .c-button {
  font-size: 20px;
  text-align: center;
}

.p-contact__cont .c-tel a {
  font-size: 42px;
}

.p-contact__cont .c-tel .info {
  -webkit-margin-before: 8px;
  margin-block-start: 8px;
}

@media screen and (min-width: 768px) {
  .p-contact__cont .c-button {
    -ms-flex-preferred-size: 363px;
    flex-basis: 363px;
  }
}

@media screen and (max-width: 1139.98px) {
  .p-contact .l-container {
    padding-inline: 16px;
  }
}

@media screen and (max-width: 767.98px) {
  .p-contact {
    background-image: url("../images/top/bg_contact_sp.webp");
    padding-block: 70px;
  }

  .p-contact__cont {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    padding-inline: 16px;
  }

  .p-contact__cont .c-button {
    font-size: 18px;
    width: 82.933%;
  }

  .p-contact__cont .c-tel a {
    font-size: 36px;
    line-height: 1;
  }
}

/* --------------------
  てんかん (バナーエリア)
-------------------- */
.p-other02 {
  padding-block: 100px 0;
}

.p-other02 .l-container {
  max-width: 1140px;
  margin-inline: auto;
  min-height: inherit !important;
}

@media screen and (max-width: 1139.98px) {
  .p-other02 .l-container {
    padding-inline: 16px;
  }
}

@media screen and (max-width: 767.98px) {
  .p-other02 {
    -webkit-padding-before: 24px;
    padding-block-start: 24px;
  }
}


/* --------------------
  footer
-------------------- */
.l-footer {
  background-color: var(--color-beige-01);
  -webkit-margin-before: 100px;
  margin-block-start: 100px;
}

.l-footer a {
  display: inline-block;
  font-size: 13px;
}

.l-footer a:hover {
  opacity: 0.5;
}

.l-footer__inner {
  max-width: 1140px;
  margin-inline: auto;
}

.l-footer__inner>div {
  padding-block: 64px;
}

.l-footer__nav>ul {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.4285vw;
}

.l-footer__nav>ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 16px;
}

.l-footer__nav .ttl {
  font-size: 15px;
  font-weight: bold;
}

.l-footer__nav .ttl .link {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
}

.l-footer__nav .ttl .link::after {
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.6 6L0 1.4L1.4 0L7.4 6L1.4 12L0 10.6L4.6 6Z' fill='%231C1B1F'/%3E%3C/svg%3E%0A");
  background-position: center;
  content: "";
  height: 12px;
  width: 7px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.l-footer__nav .ttl .link:hover::after {
  -webkit-transform: translateX(5px);
  transform: translateX(5px);
}

.l-footer__nav .sub-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 16px;
}

.l-footer__bottom {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px;
}

.l-footer__bottom .sub {
  -webkit-margin-start: auto;
  margin-inline-start: auto;
}

.l-footer__bottom .sub-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 12px 32px;
}

.l-footer__bottom .copyright {
  font-family: var(--font-en);
  font-size: 12px;
  -webkit-margin-before: 16px;
  margin-block-start: 16px;
  text-align: right;
}

@media screen and (max-width: 1139.98px) {
  .l-footer__inner {
    padding-inline: 20px;
  }

  .l-footer__nav>ul {
    /* -ms-grid-columns: (1fr)[3]; */
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 767.98px) {
  .l-footer {
    -webkit-margin-before: 32px;
    margin-block-start: 32px;
    -webkit-padding-after: 32px;
    padding-block-end: 32px;
  }

  .l-footer__inner>div {
    padding-block: 32px 0;
  }

  .l-footer__inner .logo {
    text-align: center;
  }

  .l-footer__nav>ul {
    gap: 0;
    /* -ms-grid-columns: (1fr)[1]; */
    grid-template-columns: repeat(1, 1fr);
  }

  .l-footer__nav>ul li {
    gap: 0;
  }

  .l-footer__nav .sub-menu {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.3s ease;
    transition: max-height 0.3s ease;
  }

  .l-footer__nav .ttl {
    -webkit-border-after: solid 1px var(--color-border);
    border-block-end: solid 1px var(--color-border);
    padding: 14px 12px;
  }

  .l-footer__nav .ttl .link::after {
    -webkit-margin-start: auto;
    margin-inline-start: auto;
  }

  .l-footer__nav .js-toggle {
    cursor: pointer;
    position: relative;
  }

  .l-footer__nav .js-toggle .link::after {
    display: none;
  }

  .l-footer__nav .js-toggle::after {
    content: "+";
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .l-footer__nav .js-toggle.is-open::after {
    content: "-";
  }

  .l-footer__nav .js-toggle.is-open+.sub-menu {
    max-height: 1000px;
    padding: 24px 13px;
  }

  .l-footer__bottom .sub-nav {
    gap: 24px 32px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .l-footer__bottom .copyright {
    text-align: center;
    -webkit-margin-before: 48px;
    margin-block-start: 48px;
  }
}

@media (max-width: 575.98px) {
  .l-footer {
    padding-block-end: 132px;
  }
}


/* --------------------
  wrapper
-------------------- */
.l-inner {
  max-width: 900px;
  margin-inline: auto;
}

.bg-beige {
  background-color: var(--color-beige-01) !important;
}

/* --------------------
  column layout
-------------------- */
.l-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: wrap;
  -ms-flex: wrap;
  flex: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 30px;
}

.l-column.gap-40 {
  gap: 40px;
}

@media screen and (min-width: 768px) {
  .l-column.col-2>* {
    -ms-flex-preferred-size: calc(50% - 15px);
    flex-basis: calc(50% - 15px);
  }

  .l-column.col-3>* {
    -ms-flex-preferred-size: calc(33.333% - 20px);
    flex-basis: calc(33.333% - 20px);
  }

  .l-column.col-4>* {
    -ms-flex-preferred-size: calc(25% - 22.5px);
    flex-basis: calc(25% - 22.5px);
  }

  .l-column.gap-40.col-2>* {
    -ms-flex-preferred-size: calc(50% - 20px);
    flex-basis: calc(50% - 20px);
  }

  .l-column.gap-40.col-3>* {
    -ms-flex-preferred-size: calc(33.333% - 26.667px);
    flex-basis: calc(33.333% - 26.667px);
  }

  .l-column.gap-40.col-4>* {
    -ms-flex-preferred-size: calc(25% - 30px);
    flex-basis: calc(25% - 30px);
  }
}

@media screen and (max-width: 767.98px) {
  .l-column.col-2,
  .l-column.col-3 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
  }

  .l-column.col-2>*,
  .l-column.col-3>* {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .l-column.col-4>* {
    -ms-flex-preferred-size: calc(50% - 15px);
    flex-basis: calc(50% - 15px);
  }

  .l-column.col-5>* {
    -ms-flex-preferred-size: calc(33.333% - 20px);
    flex-basis: calc(33.333% - 20px);
  }
}

/* --------------------
  heading
-------------------- */
.c-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  /* 画像背景つき見出し */
}

.c-heading .en {
  color: var(--color-orange);
  font-family: var(--font-en);
  font-size: clamp(5rem, 4.444vw, 6.4rem);
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1.21875;
}

.c-heading em {
  font-size: clamp(1.4rem, 1.25vw, 1.8rem);
}

.c-heading__photo {
  overflow: hidden;
  position: relative;
}

.c-heading__photo::before {
  background-color: rgba(100, 55, 44, 0.65);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 5;
}

.c-heading__photo .hdg {
  color: #fff;
  font-size: clamp(24px, 2vw, 2.8rem);
  letter-spacing: 0.05em;
  padding-inline: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  z-index: 10;
}

.c-heading__photo img {
  -webkit-filter: blur(2px);
  filter: blur(2px);
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

/* --------------------
  text
-------------------- */
.txt {
  font-size: 1.4rem;
  line-height: 1.4;
}

.txt+.txt {
  margin-top: 1em;
}

.lead {
  font-size: 2.2rem;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

@media screen and (max-width: 767.98px) {
  .lead {
    font-size: 1.8rem;
    line-height: 1.4;
  }
}

.note {
  font-size: 1.3rem;
  line-height: 1.5;
}

.note::before {
  content: "※";
  margin-right: 5px;
}

.en {
  font-family: var(--font-en);
}

/* --------------------
  button
-------------------- */
.c-button {
  background-color: var(--color-orange);
  border: solid 1px var(--color-orange);
  border-radius: 100px;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  padding: 16px 22px;
  text-decoration: none;
  transition: all 0.5s;
}

.c-button:hover {
  background-color: #fff;
  color: var(--color-orange);
  font-weight: bold;
}

/* --------------------
  tel area
-------------------- */
.c-tel {
  text-align: center;
}

.c-tel a {
  color: var(--color-orange);
  display: block;
  font-family: var(--font-serif);
  font-weight: bold;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.c-tel .info {
  display: block;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

/* --------------------
  link
-------------------- */
.c-link {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-border-after: solid 1px;
  border-block-end: solid 1px;
  color: var(--color-orange);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 10px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  min-width: 147px;
  padding: 0 10px 10px;
}

.c-link::after {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='8' viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.3536 4.35355C12.5488 4.15829 12.5488 3.84171 12.3536 3.64645L9.17157 0.464465C8.97631 0.269203 8.65973 0.269203 8.46447 0.464465C8.2692 0.659728 8.2692 0.97631 8.46447 1.17157L11.2929 4L8.46447 6.82843C8.2692 7.02369 8.2692 7.34027 8.46447 7.53553C8.65973 7.7308 8.97631 7.7308 9.17157 7.53553L12.3536 4.35355ZM4.37114e-08 4.5L12 4.5L12 3.5L-4.37114e-08 3.5L4.37114e-08 4.5Z' fill='%23F38400'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  height: 10px;
  width: 12px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.c-link:hover {
  -webkit-border-after: solid 1px #fff;
  border-block-end: solid 1px #fff;
}

.c-link:hover::after {
  -webkit-transform: translateX(5px);
  transform: translateX(5px);
}

/* --------------------
  banner
-------------------- */
.bnr:hover {
  opacity: 0.7;
}

.breadcrumb li {
  display: inline;
}


/* --------------------
  breadcrumb list
-------------------- */
.breadcrumb li+li::before {
  content: "> ";
}

.breadcrumb li a {
  display: inline;
  text-decoration: underline;
}

.breadcrumb li a:hover {
  text-decoration: none;
}

/* --------------------
  list
-------------------- */
.c-disc>li {
  color: #333;
  letter-spacing: 2.4px;
  line-height: 1.75;
  padding-left: 18px;
  position: relative;
}

.c-disc>li+li {
  margin-top: 15px;
}

.c-disc>li::before {
  border-radius: 50%;
  background: var(--color-brown);
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
}

.c-disc>li .disc>li:first-child {
  margin-top: 15px;
}

.c-disc>li .disc>li::before {
  background-color: transparent;
  border: 1px solid var(--color-brown);
}

.c-order {
  counter-reset: order;
}

.c-order>li+li {
  margin-top: 50px;
}

.c-order>li+li::before {
  border-radius: 4px;
  counter-increment: order;
  content: counter(order) '.';
  display: inline-block;
  font-size: 2.4rem;
  margin-right: 1em;
}

.c-check>li {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.8rem;
  gap: 16px;
  line-height: 2;
}

.c-check>li::before {
  content: "\e2e6";
  color: var(--color-accent);
  display: inline-block;
  font-family: 'Material Symbols Outlined';
}

@media screen and (max-width: 767.98px) {
  .c-check>li {
    font-size: 1.4rem;
    gap: 8px;
  }
}

/* --------------------
  media
-------------------- */
.c-media>li+li {
  -webkit-margin-before: 16px;
  margin-block-start: 16px;
}

.c-media__cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
}

.c-media__txt {
  font-size: 1.1rem;
  -webkit-margin-before: 8px;
  margin-block-start: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  opacity: 0.7;
}

.c-media .figure {
  height: 100px;
  width: 100px;
  overflow: hidden;
}

.c-media .figure img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.c-media .details {
  -ms-flex-preferred-size: calc(100% - 100px - 24px);
  flex-basis: calc(100% - 100px - 24px);
}

@media screen and (min-width: 768px) {
  .c-media .figure {
    border-radius: 10px;
  }
}

@media screen and (max-width: 767.98px) {
  .c-media__cont {
    gap: 16px;
  }

  .c-media .figure {
    height: 78px;
    width: 78px;
  }

  .c-media .details {
    -ms-flex-preferred-size: calc(100% - 78px - 16px);
    flex-basis: calc(100% - 78px - 16px);
  }
}

/* --------------------
  table
-------------------- */
.c-tbl {
  line-height: 1.4375;
  margin-bottom: 10px;
  margin-inline: auto;
  max-width: 680px;
  width: 100%;
}

.c-tbl th {
  font-size: 1.6rem;
  font-weight: 900;
}

.c-tbl th, .c-tbl td {
  padding: 25px 0;
}

.c-tbl thead tr {
  border-bottom: solid 1px rgba(0, 79, 120, 0.5);
}

.c-tbl thead th {
  position: relative;
}

.c-tbl thead th:first-of-type::before {
  display: none;
}

.c-tbl thead th::before {
  background-color: rgba(0, 79, 120, 0.5);
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  height: 23px;
}

.c-tbl tbody tr {
  border-bottom: solid 1px rgba(0, 79, 120, 0.2);
}

.c-tbl tbody th {
  text-align: left;
  width: 220px;
}

.c-tbl tbody td {
  text-align: center;
}

@media screen and (max-width: 767.98px) {
  .tbl-wrap {
    overflow-x: scroll;
  }

  .c-tbl th,
  .c-tbl td {
    white-space: nowrap;
  }

  .c-tbl thead th {
    padding-inline: 30px;
  }
}

/* --------------------
  definition list
-------------------- */
.c-definition {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 16px;
}

.c-definition dt {
  -ms-flex-preferred-size: 45px;
  flex-basis: 45px;
}

.c-definition dd {
  -ms-flex-preferred-size: calc(100% - 45px - 16px);
  flex-basis: calc(100% - 45px - 16px);
}

/* --------------------
  ajust
-------------------- */
.ta-c {
  text-align: center !important;
}

.ta-r {
  text-align: right !important;
}

.ta-l {
  text-align: left !important;
}

.d-ib {
  display: inline-block;
}

.fw-bold {
  font-weight: bold !important;
}

.fw-normal {
  font-weight: normal !important;
}

@media screen and (min-width: 768px) {
  .fl-l {
    float: left !important;
    margin-right: 40px;
    margin-bottom: 40px;
  }

  .fl-r {
    float: right !important;
    margin-left: 40px;
    margin-bottom: 40px;
  }

  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }

  .clear {
    clear: both;
  }
}

/* --------------------
  device
-------------------- */
@media screen and (min-width: 768px) {
  .pc-none {
    display: none !important;
  }
}

@media screen and (max-width: 767.98px) {
  .sp-none {
    display: none !important;
  }
}


/* --------------------
  margin
-------------------- */
.mt-0 {
  margin-top: 0px !important;
}

.mr-0 {
  margin-right: 0px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.ml-0 {
  margin-left: 0px !important;
}

.pt-0 {
  padding-top: 0px !important;
}

.pr-0 {
  padding-right: 0px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.mt-5 {
  margin-top: 5px !important;
}

.mr-5 {
  margin-right: 5px !important;
}

.mb-5 {
  margin-bottom: 5px !important;
}

.ml-5 {
  margin-left: 5px !important;
}

.pt-5 {
  padding-top: 5px !important;
}

.pr-5 {
  padding-right: 5px !important;
}

.pb-5 {
  padding-bottom: 5px !important;
}

.pl-5 {
  padding-left: 5px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mr-10 {
  margin-right: 10px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.ml-10 {
  margin-left: 10px !important;
}

.pt-10 {
  padding-top: 10px !important;
}

.pr-10 {
  padding-right: 10px !important;
}

.pb-10 {
  padding-bottom: 10px !important;
}

.pl-10 {
  padding-left: 10px !important;
}

.mt-15 {
  margin-top: 15px !important;
}

.mr-15 {
  margin-right: 15px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}

.ml-15 {
  margin-left: 15px !important;
}

.pt-15 {
  padding-top: 15px !important;
}

.pr-15 {
  padding-right: 15px !important;
}

.pb-15 {
  padding-bottom: 15px !important;
}

.pl-15 {
  padding-left: 15px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mr-20 {
  margin-right: 20px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.ml-20 {
  margin-left: 20px !important;
}

.pt-20 {
  padding-top: 20px !important;
}

.pr-20 {
  padding-right: 20px !important;
}

.pb-20 {
  padding-bottom: 20px !important;
}

.pl-20 {
  padding-left: 20px !important;
}

.mt-25 {
  margin-top: 25px !important;
}

.mr-25 {
  margin-right: 25px !important;
}

.mb-25 {
  margin-bottom: 25px !important;
}

.ml-25 {
  margin-left: 25px !important;
}

.pt-25 {
  padding-top: 25px !important;
}

.pr-25 {
  padding-right: 25px !important;
}

.pb-25 {
  padding-bottom: 25px !important;
}

.pl-25 {
  padding-left: 25px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

.mr-30 {
  margin-right: 30px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.ml-30 {
  margin-left: 30px !important;
}

.pt-30 {
  padding-top: 30px !important;
}

.pr-30 {
  padding-right: 30px !important;
}

.pb-30 {
  padding-bottom: 30px !important;
}

.pl-30 {
  padding-left: 30px !important;
}

.mt-35 {
  margin-top: 35px !important;
}

.mr-35 {
  margin-right: 35px !important;
}

.mb-35 {
  margin-bottom: 35px !important;
}

.ml-35 {
  margin-left: 35px !important;
}

.pt-35 {
  padding-top: 35px !important;
}

.pr-35 {
  padding-right: 35px !important;
}

.pb-35 {
  padding-bottom: 35px !important;
}

.pl-35 {
  padding-left: 35px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mr-40 {
  margin-right: 40px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.ml-40 {
  margin-left: 40px !important;
}

.pt-40 {
  padding-top: 40px !important;
}

.pr-40 {
  padding-right: 40px !important;
}

.pb-40 {
  padding-bottom: 40px !important;
}

.pl-40 {
  padding-left: 40px !important;
}

.mt-45 {
  margin-top: 45px !important;
}

.mr-45 {
  margin-right: 45px !important;
}

.mb-45 {
  margin-bottom: 45px !important;
}

.ml-45 {
  margin-left: 45px !important;
}

.pt-45 {
  padding-top: 45px !important;
}

.pr-45 {
  padding-right: 45px !important;
}

.pb-45 {
  padding-bottom: 45px !important;
}

.pl-45 {
  padding-left: 45px !important;
}

.mt-50 {
  margin-top: 50px !important;
}

.mr-50 {
  margin-right: 50px !important;
}

.mb-50 {
  margin-bottom: 50px !important;
}

.ml-50 {
  margin-left: 50px !important;
}

.pt-50 {
  padding-top: 50px !important;
}

.pr-50 {
  padding-right: 50px !important;
}

.pb-50 {
  padding-bottom: 50px !important;
}

.pl-50 {
  padding-left: 50px !important;
}

.mt-55 {
  margin-top: 55px !important;
}

.mr-55 {
  margin-right: 55px !important;
}

.mb-55 {
  margin-bottom: 55px !important;
}

.ml-55 {
  margin-left: 55px !important;
}

.pt-55 {
  padding-top: 55px !important;
}

.pr-55 {
  padding-right: 55px !important;
}

.pb-55 {
  padding-bottom: 55px !important;
}

.pl-55 {
  padding-left: 55px !important;
}

.mt-60 {
  margin-top: 60px !important;
}

.mr-60 {
  margin-right: 60px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.ml-60 {
  margin-left: 60px !important;
}

.pt-60 {
  padding-top: 60px !important;
}

.pr-60 {
  padding-right: 60px !important;
}

.pb-60 {
  padding-bottom: 60px !important;
}

.pl-60 {
  padding-left: 60px !important;
}

.mt-65 {
  margin-top: 65px !important;
}

.mr-65 {
  margin-right: 65px !important;
}

.mb-65 {
  margin-bottom: 65px !important;
}

.ml-65 {
  margin-left: 65px !important;
}

.pt-65 {
  padding-top: 65px !important;
}

.pr-65 {
  padding-right: 65px !important;
}

.pb-65 {
  padding-bottom: 65px !important;
}

.pl-65 {
  padding-left: 65px !important;
}

.mt-70 {
  margin-top: 70px !important;
}

.mr-70 {
  margin-right: 70px !important;
}

.mb-70 {
  margin-bottom: 70px !important;
}

.ml-70 {
  margin-left: 70px !important;
}

.pt-70 {
  padding-top: 70px !important;
}

.pr-70 {
  padding-right: 70px !important;
}

.pb-70 {
  padding-bottom: 70px !important;
}

.pl-70 {
  padding-left: 70px !important;
}

.mt-75 {
  margin-top: 75px !important;
}

.mr-75 {
  margin-right: 75px !important;
}

.mb-75 {
  margin-bottom: 75px !important;
}

.ml-75 {
  margin-left: 75px !important;
}

.pt-75 {
  padding-top: 75px !important;
}

.pr-75 {
  padding-right: 75px !important;
}

.pb-75 {
  padding-bottom: 75px !important;
}

.pl-75 {
  padding-left: 75px !important;
}

.mt-80 {
  margin-top: 80px !important;
}

.mr-80 {
  margin-right: 80px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

.ml-80 {
  margin-left: 80px !important;
}

.pt-80 {
  padding-top: 80px !important;
}

.pr-80 {
  padding-right: 80px !important;
}

.pb-80 {
  padding-bottom: 80px !important;
}

.pl-80 {
  padding-left: 80px !important;
}

.mt-85 {
  margin-top: 85px !important;
}

.mr-85 {
  margin-right: 85px !important;
}

.mb-85 {
  margin-bottom: 85px !important;
}

.ml-85 {
  margin-left: 85px !important;
}

.pt-85 {
  padding-top: 85px !important;
}

.pr-85 {
  padding-right: 85px !important;
}

.pb-85 {
  padding-bottom: 85px !important;
}

.pl-85 {
  padding-left: 85px !important;
}

.mt-90 {
  margin-top: 90px !important;
}

.mr-90 {
  margin-right: 90px !important;
}

.mb-90 {
  margin-bottom: 90px !important;
}

.ml-90 {
  margin-left: 90px !important;
}

.pt-90 {
  padding-top: 90px !important;
}

.pr-90 {
  padding-right: 90px !important;
}

.pb-90 {
  padding-bottom: 90px !important;
}

.pl-90 {
  padding-left: 90px !important;
}

.mt-95 {
  margin-top: 95px !important;
}

.mr-95 {
  margin-right: 95px !important;
}

.mb-95 {
  margin-bottom: 95px !important;
}

.ml-95 {
  margin-left: 95px !important;
}

.pt-95 {
  padding-top: 95px !important;
}

.pr-95 {
  padding-right: 95px !important;
}

.pb-95 {
  padding-bottom: 95px !important;
}

.pl-95 {
  padding-left: 95px !important;
}

.mt-100 {
  margin-top: 100px !important;
}

.mr-100 {
  margin-right: 100px !important;
}

.mb-100 {
  margin-bottom: 100px !important;
}

.ml-100 {
  margin-left: 100px !important;
}

.pt-100 {
  padding-top: 100px !important;
}

.pr-100 {
  padding-right: 100px !important;
}

.pb-100 {
  padding-bottom: 100px !important;
}

.pl-100 {
  padding-left: 100px !important;
}

/* --------------------
  animation
-------------------- */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes slid-in-up {
  0% {
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
    visibility: visible;
    opacity: 0;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slid-in-up {
  0% {
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
    visibility: visible;
    opacity: 0;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes img-fade-in {
  0% {
    opacity: 0;
    -webkit-filter: blur(15px);
    filter: blur(15px);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    -webkit-filter: blur(0px);
    filter: blur(0px);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes img-fade-in {
  0% {
    opacity: 0;
    -webkit-filter: blur(15px);
    filter: blur(15px);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    -webkit-filter: blur(0px);
    filter: blur(0px);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0;
  }
}

@keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0;
  }
}