@charset "UTF-8";
*, *::before, *::after {
  box-sizing: border-box; }

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none; }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0; }

ul[role='list'], ol[role='list'] {
  list-style: none; }

body {
  min-height: 100vh;
  line-height: 1.5; }

h1, h2, h3, h4, button, input, label {
  line-height: 1.1; }

h1, h2, h3, h4 {
  text-wrap: balance; }

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor; }

img, picture {
  max-width: 100%;
  display: block; }

input, button, textarea, select {
  font: inherit; }

textarea:not([rows]) {
  min-height: 10em; }

:target {
  scroll-margin-block: 5ex; }

/* ブレイクポイント
   ========================================================================== */
/* フォント
   ========================================================================== */
/* 色
   ========================================================================== */
/* 全体
   ====================================================================== */
* {
  box-sizing: border-box; }

html {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 62.5%;
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, sans-serif;
  text-size-adjust: 100%;
  word-break: normal; }

body {
  height: 100%;
  background-color: #000;
  color: #000;
  font-size: 1.6rem;
  line-height: 1.7;
  overflow-wrap: anywhere; }
  @media (min-width: 1025px) {
    body {
      font-size: 2rem; } }

body,
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; }

/* フッタを最下部に*/
.wrapper .footer {
  margin-top: auto; }

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 60px; }
  main > article {
    flex: 1;
    background-color: #fff;
    padding-bottom: 40px; }
  @media (min-width: 768px) {
    main {
      margin-top: 80px; }
      main > article {
        padding-bottom: 60px; } }
  @media (min-width: 1025px) {
    main {
      margin-top: 100px; }
      main > article {
        padding-bottom: 100px; } }

section {
  margin-top: 40px; }
  @media (min-width: 768px) {
    section {
      margin-top: 60px; } }
  @media (min-width: 1025px) {
    section {
      margin-top: 100px; } }

a {
  color: #000;
  text-decoration: none; }
  a:link, a:active, a:hover, a:visited {
    outline: 0 none; }

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

img {
  max-width: 100%;
  height: auto; }
  @media (min-width: 1025px) {
    img {
      image-rendering: -webkit-optimize-contrast; } }

h1, h2, h3, h4, h5, h6, p, figure {
  font-weight: normal;
  padding: 0;
  margin: 0; }

figure {
  font-size: 0; }

table {
  border-collapse: collapse; }

.sp {
  display: block !important; }
  @media (min-width: 768px) {
    .sp {
      display: none !important; } }
  @media (min-width: 1025px) {
    .sp {
      display: none !important; } }

.tab {
  display: none !important; }
  @media (min-width: 768px) {
    .tab {
      display: block !important; } }

.pc {
  display: none !important; }
  @media (min-width: 1025px) {
    .pc {
      display: block !important; } }

p {
  line-height: 1.8; }

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

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

.center {
  text-align: center !important; }

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

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

.wrap {
  padding: 0 20px; }
  @media (min-width: 768px) {
    .wrap {
      padding: 0 40px; } }
  @media (min-width: 1025px) {
    .wrap {
      width: 1200px;
      padding: 0;
      margin: 0 auto; } }

/* reCATPCHAバッジを全体では非表示（別途お問い合わせでは表示にする） */
.grecaptcha-badge {
  display: none !important; }

/* リストマーク入りul
   ====================================== */
.disc li {
  position: relative;
  padding-left: 1em;
  margin-bottom: .5em; }
  .disc li:last-child {
    margin-bottom: 0; }
  .disc li::before {
    position: absolute;
    display: block;
    content: '';
    transform: translateY(-50%);
    background-color: #fff;
    border-radius: 50%; }
.disc.disc-black li::before {
  background-color: #000 !important; }

/* 数字入りol
========================================= */
ol.decimal {
  margin: 1em 0 0 1em; }
  ol.decimal > li {
    list-style-type: decimal;
    line-height: 2em;
    padding-left: .5em;
    margin-bottom: .5em; }
    ol.decimal > li:last-child {
      margin-bottom: 0; }

/* 強調ライン
========================================= */
.strong-line-red {
  background: linear-gradient(transparent 70%, #ffd7d7 70%);
  font-weight: bold; }

/* 上付き文字
========================================= */
.sup {
  display: inline;
  font-size: 1rem;
  vertical-align: top;
  position: relative;
  top: -.2em; }
  @media (min-width: 768px) {
    .sup {
      font-size: 1.2rem; } }

/* 下付き文字
========================================= */
.sub {
  font-size: 1rem;
  vertical-align: bottom;
  position: relative;
  bottom: -.1em; }
  @media (min-width: 768px) {
    .sub {
      font-size: 1.2rem; } }

/* 「※」印付きの注意書き
========================================= */
.notes {
  font-size: 1.4rem;
  font-weight: normal;
  text-indent: -1em;
  line-height: 1.7;
  padding-left: 1em; }
  .notes::before {
    content: '※'; }
  @media (min-width: 1025px) {
    .notes {
      font-size: 1.8rem; } }

/* デフォルトボタン（ゴールド）
   ====================================== */
.btn-gold {
  display: inline-block;
  background-color: #b39733;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  padding: .5em 1.5em;
  transition: .3s;
  margin-top: 40px; }
  @media (hover: hover) {
    .btn-gold:hover {
      background-color: #c8b15e; } }
  @media (min-width: 768px) {
    .btn-gold {
      font-size: 2.4rem;
      padding: .5em 2em;
      margin-top: 80px; } }
  @media (min-width: 1025px) {
    .btn-gold {
      font-size: 3.6rem;
      padding: .5em 2.5em;
      margin-top: 100px; } }

/* 矢印付きリンク
========================================= */
.arrow-link {
  position: relative;
  display: inline-block;
  text-decoration: none !important;
  padding-left: 1em; }
  .arrow-link::before {
    position: absolute;
    display: block;
    top: 50%;
    left: 0;
    content: '';
    width: 6px;
    height: 6px;
    margin-top: -1px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg); }
  @media (hover: hover) {
    .arrow-link:hover {
      text-decoration: underline !important; } }
  @media (min-width: 768px) {
    .arrow-link {
      padding-left: 1.2em; }
      .arrow-link::before {
        width: 8px;
        height: 8px;
        margin-top: -3px; } }
  @media (min-width: 1025px) {
    .arrow-link::before {
      width: 10px;
      height: 10px;
      margin-top: -4px; } }

/* 外部リンク
========================================= */
.external {
  display: inline-block;
  background: url("../img/ic-external.png") no-repeat right 0 top 50%/16px auto;
  padding-right: 22px;
  margin-right: 4px; }
  @media (min-width: 1025px) {
    .external {
      padding-right: 24px;
      margin-right: 6px; } }

/* ページトップボタン
========================================= */
#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 2rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s ease, transform .3s ease, background-color .3s ease;
  cursor: pointer;
  appearance: none;
  border-radius: 50%;
  border: none;
  pointer-events: none; }
  #back-to-top.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; }
  @media (hover: hover) {
    #back-to-top:hover {
      background-color: rgba(0, 0, 0, 0.8); } }

/* ヘッダ
   ====================================================================== */
/* 動作設定
========================================= */
#header {
  position: fixed;
  z-index: 100;
  transform: translateY(-200px);
  /* 初期は非表示 */ }

/* 上に上がる動き */
#header.move-up {
  transform: translateY(-200px);
  animation: UpAnime .5s forwards; }

@keyframes UpAnime {
  from {
    opacity: 1;
    transform: translateY(0); }
  to {
    opacity: 1;
    transform: translateY(-200px); } }
/* 下に下がる動き */
#header.move-down {
  transform: translateY(0);
  animation: DownAnime .5s forwards; }

@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(-200px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/* ios用 */
#header.move-down {
  pointer-events: auto;
  touch-action: manipulation;
  /* iOSのタッチ動作を最適化 */ }
#header.move-up {
  pointer-events: none; }

/* デザイン設定
========================================= */
.header {
  position: relative;
  width: 100%;
  height: 60px;
  background-color: #636363;
  padding: 0;
  margin-bottom: 30px; }
  .header .wrap {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0; }
  .header__logo {
    position: relative;
    width: 200px;
    height: 60px;
    background: url("../img/hd-logo_bg.png") no-repeat;
    background-size: auto 60px;
    background-position: -10px 0; }
    .header__logo a {
      display: block;
      position: absolute;
      top: 50%;
      left: 20px;
      transform: translateY(-50%); }
      .header__logo a img {
        width: 120px; }
  .header__conts {
    position: relative;
    flex: 1;
    border-left: 1px solid #fff; }
  @media (min-width: 768px) {
    .header {
      height: 80px; }
      .header .wrap {
        height: 80px; }
      .header__logo {
        height: 80px;
        background-size: auto 80px;
        background-position: -20px 0; }
        .header__logo a img {
          width: 180px; } }
  @media (min-width: 1025px) {
    .header {
      height: 100px; }
      .header .wrap {
        width: 1200px;
        height: 100px;
        margin: 0 auto; }
      .header__logo {
        width: 300px;
        height: 100px;
        background-size: auto 100px; }
        .header__logo a {
          left: 0; }
          .header__logo a img {
            width: auto; } }

/* 購入ボタン
========================================= */
.btn-buy {
  display: block;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 103; }
  .btn-buy a {
    display: inline-block;
    width: 140px;
    background-color: #b39733;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    line-height: 1;
    text-align: center;
    padding: .8em 0;
    cursor: pointer;
    transition: .3s; }
    @media (hover: hover) {
      .btn-buy a:hover {
        background-color: #c8b15e; } }
  @media (min-width: 768px) {
    .btn-buy {
      right: 100px; }
      .btn-buy a {
        width: 200px;
        font-size: 1.8rem;
        padding: 1em 0; } }
  @media (min-width: 1025px) {
    .btn-buy {
      right: 130px; }
      .btn-buy a {
        width: 260px;
        font-size: 2rem; } }

/* ハンバーガーボタン
========================================= */
.hamburger {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 101;
  width: 60px;
  height: 60px;
  border-left: 1px solid #000;
  cursor: pointer; }
  .hamburger::before, .hamburger::after,
  .hamburger span {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    width: 50%;
    margin: auto;
    transition: all .6s ease; }
  .hamburger::before {
    content: '';
    top: calc(25% - 0px);
    border-top: 2px solid #000; }
  .hamburger::after {
    content: '';
    bottom: calc(25% - 0px);
    border-bottom: 2px solid #000; }
  .hamburger span {
    top: calc(50% - 1px);
    height: 2px;
    background-color: #000; }
  .hamburger.on span {
    opacity: 0; }
  .hamburger.on::before {
    top: calc(50% - 1px);
    border-top: 2px solid #000;
    transform: rotate(315deg); }
  .hamburger.on::after {
    bottom: calc(50% - 2px);
    border-bottom: 2px solid #000;
    transform: rotate(-315deg); }
  @media (min-width: 768px) {
    .hamburger {
      width: 80px;
      height: 80px; } }
  @media (min-width: 1025px) {
    .hamburger {
      border-right: 1px solid #000;
      right: 0;
      width: 100px;
      height: 100px; }
      .hamburger::before {
        border-top-width: 3px; }
      .hamburger::after {
        border-bottom-width: 3px; }
      .hamburger span {
        height: 3px; }
      .hamburger.on::before {
        border-top-width: 3px; }
      .hamburger.on::after {
        border-bottom-width: 3px; } }

/* GM
========================================= */
.nav-conts {
  display: none;
  position: absolute;
  top: 60px;
  right: 0;
  z-index: 102;
  width: 100%;
  background-color: #000;
  color: #fff; }
  .nav-conts .nav-menu {
    padding: 30px;
    margin: 0 auto; }
    .nav-conts .nav-menu__main {
      display: flex;
      flex-direction: column;
      border-top: 1px solid #6b6b6b; }
      .nav-conts .nav-menu__main li {
        border-bottom: 1px solid #6b6b6b; }
        .nav-conts .nav-menu__main li a {
          display: block;
          padding: .5em 0; }
          @media (hover: hover) {
            .nav-conts .nav-menu__main li a:hover {
              text-decoration: underline; } }
    .nav-conts .nav-menu__sns {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 30px; }
      .nav-conts .nav-menu__sns a {
        display: block;
        transition: .3s; }
        @media (hover: hover) {
          .nav-conts .nav-menu__sns a:hover {
            opacity: .5; } }
    .nav-conts .nav-menu__sub {
      display: flex;
      flex-direction: column;
      margin-top: 30px; }
      .nav-conts .nav-menu__sub li a {
        display: block;
        font-size: 1.2rem;
        color: #fff;
        padding: 1em 22px 1em 0; }
        @media (hover: hover) {
          .nav-conts .nav-menu__sub li a:hover {
            text-decoration: underline; } }
  @media (min-width: 768px) {
    .nav-conts {
      top: 80px;
      padding: 20px 0; }
      .nav-conts .nav-menu__main {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 30px;
        border: none; }
        .nav-conts .nav-menu__main li {
          width: calc(100% / 5);
          border: none;
          text-align: center; }
          .nav-conts .nav-menu__main li a {
            display: inline-block;
            text-align: center;
            padding: 0; }
      .nav-conts .nav-menu__sns {
        margin-top: 40px; }
      .nav-conts .nav-menu__sub {
        flex-direction: row;
        justify-content: center;
        gap: 30px;
        margin-top: 40px; }
        .nav-conts .nav-menu__sub li a {
          display: inline-block;
          font-size: 1.4rem;
          padding: 0 24px 0 0; } }
  @media (min-width: 1025px) {
    .nav-conts {
      top: 100px;
      padding: 40px 0; }
      .nav-conts .nav-menu {
        width: 1200px; }
        .nav-conts .nav-menu__main {
          gap: 40px; }
        .nav-conts .nav-menu__sns {
          margin-top: 60px; }
        .nav-conts .nav-menu__sub {
          margin-top: 60px; }
          .nav-conts .nav-menu__sub li a {
            font-size: 1.6rem; } }

/* フッタ
   ====================================================================== */
.footer {
  color: #fff; }
  .footer__conts {
    background-color: #2e2e2e;
    padding: 20px 0; }
    .footer__conts .sns {
      display: flex;
      justify-content: center;
      gap: 20px; }
      .footer__conts .sns a {
        display: block;
        transition: .3s; }
        @media (hover: hover) {
          .footer__conts .sns a:hover {
            opacity: .5; } }
  .footer__nav, .footer__sub-nav {
    display: none; }
  .footer__sub-conts {
    background-color: #000;
    padding: 20px 0; }
  .footer__copyright {
    font-size: 1.2rem;
    line-height: 1;
    text-align: center; }
  @media (min-width: 1025px) {
    .footer {
      font-size: 1.4rem; }
      .footer__conts {
        padding: 60px 0; }
        .footer__conts .wrap {
          position: relative; }
          .footer__conts .wrap .sns {
            position: absolute;
            right: 0;
            bottom: 0; }
      .footer__nav {
        display: block; }
        .footer__nav ul {
          display: flex; }
          .footer__nav ul li {
            flex: 1;
            font-weight: bold;
            margin-right: 1em; } }
        @media (min-width: 1025px) and (hover: hover) {
          .footer__nav ul li a:hover {
            text-decoration: underline; } }
  @media (min-width: 1025px) {
            .footer__nav ul li:last-child {
              margin-right: 0; }
            .footer__nav ul li ul {
              display: flex;
              flex-direction: column;
              margin-top: 1em; }
              .footer__nav ul li ul li {
                font-weight: normal;
                line-height: 1.6; }
              .footer__nav ul li ul.disc li::before {
                top: 12px;
                left: 4px;
                width: 3px;
                height: 3px; }
      .footer__sub-conts {
        padding: 30px 0; }
        .footer__sub-conts .wrap {
          display: flex;
          align-items: center;
          justify-content: space-between; }
      .footer__sub-nav {
        display: block; }
        .footer__sub-nav ul {
          display: flex;
          gap: 2em; }
          .footer__sub-nav ul li {
            line-height: 1; }
            .footer__sub-nav ul li a {
              color: #fff; } }
          @media (min-width: 1025px) and (hover: hover) {
            .footer__sub-nav ul li a:hover {
              text-decoration: underline; } }
  @media (min-width: 1025px) {
      .footer__copyright {
        font-size: 1.4rem;
        text-align: right; } }

/* コンテンツ共通
   ====================================================================== */
/* ページタイトル
   ====================================== */
.page-ttl {
  background: #000 url("../img/page-ttl_bg.png") no-repeat top left/auto 120px;
  margin-bottom: 40px; }
  .page-ttl .wrap {
    display: flex;
    flex-direction: column;
    height: 120px; }
  .page-ttl__h1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 2rem;
    line-height: 1; }
  @media (min-width: 768px) {
    .page-ttl {
      background-size: auto 180px;
      margin-bottom: 60px; }
      .page-ttl .wrap {
        height: 180px; }
      .page-ttl__h1 {
        font-size: 3.2rem; } }
  @media (min-width: 1025px) {
    .page-ttl {
      background-size: auto 260px;
      margin-bottom: 100px; }
      .page-ttl .wrap {
        height: 260px; }
      .page-ttl__h1 {
        font-size: 4.8rem; } }

/* パンくず
   ====================================== */
.breadcrumb {
  width: 100%; }
  .breadcrumb li {
    display: inline-block;
    font-size: 1rem;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    padding: 1em .5em 0 0; }
    .breadcrumb li::before {
      content: '\003e';
      padding: 0 .5em 0 0; }
    .breadcrumb li:first-child::before {
      content: '';
      padding: 0; }
    .breadcrumb li:last-child {
      white-space: normal; }
    .breadcrumb li a {
      text-decoration: none; }
      @media (hover: hover) {
        .breadcrumb li a:hover {
          text-decoration: underline; } }
  @media (min-width: 768px) {
    .breadcrumb li {
      font-size: 1.4rem; } }

/* 見出し設定
   ====================================== */
.ttl-01,
.ttl-02,
.ttl-03 {
  font-weight: bold;
  line-height: 1.4; }
  .ttl-01 + p,
  .ttl-02 + p,
  .ttl-03 + p {
    margin-top: clamp(0.5em, 3vw, 1em); }

.ttl-01 {
  font-size: clamp(2.2rem, 3vw, 3.4rem);
  padding-bottom: .25em;
  border-bottom: 2px solid #ccc; }

.ttl-02 {
  font-size: clamp(2rem, 3vw, 2.4rem); }

.ttl-03 {
  font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* 2カラム
========================================= */
/* メイン2カラム */
@media (min-width: 768px) {
  .main-container {
    display: flex;
    padding: 0 40px; }
    .main-container .main-conts {
      flex: 1;
      margin-right: 40px; }
    .main-container aside {
      width: 200px; } }
@media (min-width: 1025px) {
  .main-container {
    width: 1200px;
    padding: 0;
    margin: 0 auto; }
    .main-container .main-conts {
      margin-right: 40px; }
    .main-container aside {
      width: 250px; } }

/* 2カラム時サイドナビ
========================================= */
aside ul {
  margin-top: 30px;
  border-bottom: 1px solid #636363; }
aside li {
  border-right: 1px solid #636363;
  border-left: 1px solid #636363;
  border-top: 1px dotted #636363; }
  aside li:first-child {
    position: relative;
    background-color: #fff;
    font-weight: bold;
    color: #000;
    text-align: center;
    padding: 1em;
    border-top: 2px solid #000;
    border-bottom: 1px dotted #636363;
    border-right: 1px solid #636363;
    border-left: 1px solid #636363; }
    aside li:first-child::before, aside li:first-child::after {
      position: absolute;
      display: block;
      content: '';
      top: -2px;
      height: 2px; }
    aside li:first-child::before {
      left: -1px;
      border-left: 1px solid #636363; }
    aside li:first-child::after {
      right: -1px;
      border-right: 1px solid #636363; }
  aside li:nth-child(2) {
    border-top: none; }
  aside li a {
    position: relative;
    display: block;
    text-decoration: none;
    padding: 1em 2em 1em 1em;
    transition: .3s; }
    aside li a::after {
      position: absolute;
      display: block;
      top: 50%;
      right: 1em;
      content: '';
      width: 6px;
      height: 6px;
      margin-top: -2px;
      border-top: 2px solid #000;
      border-right: 2px solid #000;
      transform: rotate(45deg); }
    @media (hover: hover) {
      aside li a:hover {
        opacity: .5; } }
@media (min-width: 768px) {
  aside {
    padding-bottom: 0; }
    aside ul {
      margin-top: 0; }
    aside li:first-child {
      font-size: 1.6rem;
      border-top-width: 3px; }
      aside li:first-child::before, aside li:first-child::after {
        top: -3px;
        height: 3px; }
    aside li a {
      font-size: 1.6rem; }
      aside li a::after {
        width: 8px;
        height: 8px;
        margin-top: -2px; } }
@media (min-width: 1025px) {
  aside li:first-child {
    font-size: 1.8rem;
    border-top-width: 3px; }
    aside li:first-child::before, aside li:first-child::after {
      top: -3px;
      height: 3px; }
  aside li a {
    font-size: 1.8rem; }
    aside li a::after {
      width: 8px;
      height: 8px;
      margin-top: -2px; } }