@charset "UTF-8";
/* ---------------------------------------------
  reset
--------------------------------------------- */
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  background-color: #ccc;
}

/* 解析タグの隙間対策 */
body > img {
  display: none;
}

.lp_main div, .lp_main span, .lp_main iframe, .lp_main h1, .lp_main h2, .lp_main h3, .lp_main h4, .lp_main h5, .lp_main h6, .lp_main p, .lp_main address, .lp_main img, .lp_main small, .lp_main strong, .lp_main sub, .lp_main sup, .lp_main dl,
.lp_main dt, .lp_main dd, .lp_main ol, .lp_main ul, .lp_main form, .lp_main label, .lp_main table, .lp_main caption, .lp_main tbody, .lp_main tfoot, .lp_main thead, .lp_main tr, .lp_main th, .lp_main td, .lp_main article,
.lp_main aside, .lp_main footer, .lp_main header, .lp_main menu, .lp_main nav, .lp_main section, .lp_main video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 0;
  line-height: 0;
  vertical-align: baseline;
  background: transparent;
}
.lp_main article, .lp_main aside, .lp_main details, .lp_main figcaption, .lp_main figure,
.lp_main footer, .lp_main header, .lp_main menu, .lp_main nav, .lp_main section {
  display: block;
}
.lp_main ol, .lp_main ul {
  list-style: none;
}
.lp_main :focus {
  outline: 0;
}
.lp_main table {
  border-collapse: collapse;
  border-spacing: 0;
}
.lp_main *,
.lp_main *::before,
.lp_main *::after {
  box-sizing: border-box;
}
.lp_main img {
  display: block;
  height: auto;
  vertical-align: bottom;
  width: 100%;
  max-width: 100%;
}
.lp_main svg,
.lp_main video {
  width: 100%;
  height: auto;
}


/* ---------------------------------------------
  lp_main外のリセット
--------------------------------------------- */
.pc_area p,
.hamburger_menu p {
  margin: 0;
}
.pc_area ul,
.hamburger_menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}


/* ---------------------------------------------
  common
--------------------------------------------- */
html {
  scroll-behavior: smooth;
}

.lp_main {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Noto Sans JP', sans-serif;
}


/* ---------------------------------------------
 PC表示
--------------------------------------------- */
.pc_area {
  display: none;
}

@media (min-width: 1300px) {
  .lp_main {
    position: relative;
    max-width: 500px;
    z-index: 2;
    background-color: #fff;
  }
  .lp_main .fv_menu_btn {
    display: none;
  }
  .hamburger_menu {
    display: none !important;
  }
  .pc_area {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
  .pc_left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: calc(50% + 250px);
    background: url(../img/common/pc_bg.jpg) no-repeat center center / cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .pcLeft_logo {
    width: min(180px, 80%);
  }
  .pcLeft_logo img {
    display: block;
    width: 100%;
    height: auto;
  }
  .pcLeft_illust {
    position: absolute;
    bottom: 0;
    right: 10%;
    width: min(160px, 100%);
  }
  .pcLeft_illust img {
    display: block;
    width: 100%;
    height: auto;
  }
  .pc_right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: calc(50% + 250px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    overflow: hidden;
  }
  .pcRight_title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 1;
    letter-spacing: 2px;
    padding: 20px 0 18px;
    width: min(250px, 100%);
  }
  .pcRight_nav {
    width: min(250px, 100%);
    margin-bottom: 40px;
  }
  .pcRight_nav ul {
    width: 100%;
    border-top: 2px solid #1a1a1a;
  }
  .pcRight_nav li {
    border-bottom: 1px solid #1a1a1a;
  }
  .pcRight_nav li:last-child {
    border-bottom: none;
  }
  .pcRight_nav a {
    display: flex;
    align-items: center;
    color: #1a1a1a;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    padding: 12px 0;
    text-decoration: none;
  }
  .pcRight_nav a.is_current {
    color: #f44a37;
  }
  .pcRight_nav a.is_current::before {
    background: radial-gradient(circle, #ccc 28%, #f44a37 28%);
  }
  .pcRight_nav a::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #ccc 28%, #1a1a1a 28%);
    margin-right: 12px;
  }
  .pcRight_btn {
    width: min(351px, 100%);
  }
  .pcRight_btn img {
    display: block;
    width: 100%;
    height: auto;
  }
}


/* ---------------------------------------------
 FVロゴ・メニューボタン
--------------------------------------------- */
.lp_main .fv_logo {
  position: fixed;
  top: min(calc((4 / 750) * 100vw), 4px);
  left: max(min(calc((24 / 750) * 100vw), 24px), calc(50vw - 375px + 24px));
  width: min(calc((166 / 750) * 100vw), 166px);
  z-index: 999;
}
.lp_main .fv_menu_btn {
  position: fixed;
  top: min(calc((24 / 750) * 100vw), 24px);
  right: max(min(calc((24 / 750) * 100vw), 24px), calc(50vw - 375px + 24px));
  width: min(calc((94 / 750) * 100vw), 94px);
  z-index: 999;
}

@media (min-width: 1300px) {
  .lp_main .fv_logo {
    position: absolute;
    left: calc((24 / 750) * 100%);
    top: 4px;
    width: calc((166 / 750) * 100%);
  }
}


/* ---------------------------------------------
 ハンバーガーメニュー
--------------------------------------------- */
.hamburger_menu {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: max(0px, calc(50vw - 375px));
  width: min(calc((580 / 750) * 100vw), 580px);
  z-index: 1000;
  background-color: #f44b35;
  overflow-y: auto;
  font-family: 'Noto Sans JP', sans-serif;
}
.hamburger_menu.is_open {
  display: block;
}
.hamburger_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: min(calc((50 / 750) * 100vw), 50px) min(calc((40 / 750) * 100vw), 40px) min(calc((30 / 750) * 100vw), 30px);
}
.hamburger_divider {
  height: 2px;
  background: #fff;
  margin: 0 min(calc((40 / 750) * 100vw), 40px);
}
.hamburger_title {
  color: #fff;
  font-size: min(calc((36 / 750) * 100vw), 36px);
  font-weight: bold;
  line-height: 1;
  letter-spacing: 2px;
}
.hamburger_close {
  position: relative;
  width: min(calc((36 / 750) * 100vw), 36px);
  height: min(calc((36 / 750) * 100vw), 36px);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.hamburger_close::before,
.hamburger_close::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background: #fff;
}
.hamburger_close::before {
  transform: translateY(-50%) rotate(45deg);
}
.hamburger_close::after {
  transform: translateY(-50%) rotate(-45deg);
}
.hamburger_nav {
  padding: min(calc((20 / 750) * 100vw), 20px) min(calc((40 / 750) * 100vw), 40px) 0;
}
.hamburger_nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hamburger_nav li {
  border-bottom: 1px solid #fff;
}
.hamburger_nav li:last-child {
  border-bottom: none;
}
.hamburger_nav a {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: min(calc((32 / 750) * 100vw), 32px);
  line-height: 1.4;
  padding: min(calc((24 / 750) * 100vw), 24px) 0;
  text-decoration: none;
}
.hamburger_nav a::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: min(calc((26 / 750) * 100vw), 26px);
  height: min(calc((26 / 750) * 100vw), 26px);
  border-radius: 50%;
  background: radial-gradient(circle, #f44b35 28%, #fff 28%);
  margin-right: min(calc((20 / 750) * 100vw), 20px);
}


/* ---------------------------------------------
  footer
--------------------------------------------- */
.lp_main .footer_inner {
  background-color: #fff;
  border-radius: min(calc((60 / 750) * 100vw), 60px) min(calc((60 / 750) * 100vw), 60px) 0 0;
  padding: min(calc((40 / 750) * 100vw), 40px) 5% min(calc((60 / 750) * 100vw), 60px);
  text-align: center;
}
.lp_main .logo {
  margin: 0 auto min(calc((20 / 750) * 100vw), 20px);
  width: min(calc((166 / 750) * 100vw), 166px);
}
.lp_main .logo img {
  display: block;
  width: 100%;
  height: auto;
}
.lp_main .footer_link {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin: 0 0 min(calc((20 / 750) * 100vw), 20px);
  padding: 0;
  list-style: none;
}
.lp_main .footer_link li + li::before {
  content: "|";
  display: inline-block;
  margin: 0 min(calc((10 / 750) * 100vw), 10px);
  color: #333;
  font-size: min(calc((24 / 750) * 100vw), 24px);
  line-height: 1;
}
.lp_main .footer_link a {
  display: inline;
  color: #333;
  font-size: min(calc((24 / 750) * 100vw), 24px);
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lp_main .footer_copy {
  margin: 0;
  color: #333;
  font-size: min(calc((24 / 750) * 100vw), 24px);
  line-height: 1;
  letter-spacing: .5px;
}

@media (min-width: 1300px) {
  .lp_main .footer_link li + li::before {
    font-size: 14px;
  }
  .lp_main .footer_link a {
    font-size: 14px;
  }
  .lp_main .footer_copy {
    font-size: 14px;
  }
}
