@charset "utf-8";

/* ======================================================================
/* root
====================================================================== */
:root {
  --color-black: #000000;
  --color-navy: #293362;
  --color-white: #ffffff;
  --color-gray: #f5f5f5;
  --color-red: #8b1e24;
  --color-gold: #b3975c;
  --color-orange: #ee713a;
  --color-light-orange: #ffc8b1;
  --color-dark-brown: #3b2924;
  --color-olive-brown: #908a57;
  --color-light-brown: #c3bbb6;
}

/* ======================================================================
/* body
====================================================================== */
body {
  font-size: 16px;
  font-weight: 400;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: var(--color-black);
  text-align: justify;
  letter-spacing: 0.03em;
  line-height: 1.8;
}

@media screen and (width <=768px) {
  body {
    font-size: 14px;
  }
}

/* ======================================================================
/* #container
====================================================================== */
#container {
  inline-size: 500px;
  block-size: auto;
  margin-inline: auto;
  background: #fff;
  box-shadow: 0 0 30px 0px rgb(0 0 0 / 10%);
  position: relative;
  z-index: 2;
}

@media screen and (width <= 768px) {
  #container {
    inline-size: 100%;
  }
}

/* ======================================================================
/* .inner
====================================================================== */
.inner {
  max-inline-size: 100%;
  block-size: auto;
  margin: 0 auto;
  padding: 70px 30px;

  & iframe {
    inline-size: 100%;
    block-size: 250px;
  }
}

@media screen and (width <= 768px) {
  .inner {
    inline-size: 100%;
    block-size: auto;
    padding: 35px 15px;
  }
}

/* ======================================================================
/* #nav03
====================================================================== */
#nav03 {
  position: relative;
  inline-size: 100%;
  block-size: auto;
  background: var(--color-dark-brown);

  &::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 100%;
    block-size: 50px;
    background: var(--color-dark-brown);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 40;
  }
}

/* ======================================================================
/* #nav04
====================================================================== */
#nav04 {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 100%;
    block-size: 50px;
    background: var(--color-white);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 30;
  }
}

/* ======================================================================
/* #nav05
====================================================================== */
#nav05 {
  background: var(--color-light-brown);
}

/* ======================================================================
/* fluidImg
====================================================================== */
@media screen and (width <= 768px) {
  .fluidImg {
    inline-size: 100%;
    block-size: auto;
  }
}

/* ======================================================================
/* relative
====================================================================== */
.relative {
  position: relative;
}

/* ======================================================================
/* bgColor
====================================================================== */
.bgColor-gray {
  background: var(--color-gray);
}

/*----------------------------------------
	target_nav
----------------------------------------*/
.target_nav {
  display: none;
  position: fixed;
  z-index: 100;
  top: 50%;
  right: 50%;
  transform: translate(calc(-50% + 300px), -50%);
  z-index: 49;
}
.header__link {
  display: block;
  width: 6px;
  height: 32px;
  background-color: transparent;
  border: 1px solid #d0c1c1;
  margin-top: 20px;
}
.header__link.is-active {
  background-color: #626262;
}
li.header__item {
  position: relative;
}

.t_nav_tex {
  display: block;
  width: 28px;
  text-align: center;
  position: absolute;
  top: 50%;
  color: #d0c1c1;
  transform: translate(15%, -50%);
}

@media screen and (max-width: 768px) {
  .target_nav {
    right: 5%;
    transform: translate(0, -50%);
  }
  .header__link {
    width: 4px;
    height: 24px;
    margin-top: 15px;
    border: 1px solid #c8c8c8;
  }
  .header__link.is-active {
    background-color: #c8c8c8;
  }

  /*���̕�������*/
  .t_nav_tex {
    width: 20px;
  }
} /*END*/

@media screen and (max-width: 599px) {
  .target_nav {
    display: none !important;
  }
} /*END*/

/* =====================================================
/* header
===================================================== */
header {
  position: relative;
}

/* ==============================================
/* txtLeft
============================================== */
.txtLeft {
  text-align: left;
  font-size: 12px;
}

/* =====================================================
/* footer
===================================================== */
footer {
  inline-size: 100%;
}