@charset "UTF-8";
/*数値の設定
------------------------------------------*/
/*上記数値の設定を呼び出しているmixin
------------------------------------------*/
/*
よく使用するmixin
------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap");
body {
  overflow: visible; }

figure figcaption, picture .caption, .caption {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  padding: 3px 5px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff; }

.innerWrap {
  padding: 0 20px; }

/* ----------------------------------------
pageKv
------------------------------------------- */
#pageKv {
  position: relative; }

.pageKv_scroll {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 130px;
  z-index: 1; }

.pageKv_scroll span {
  font-size: 21px;
  font-style: italic;
  letter-spacing: 0.2em;
  color: #fff; }

.pageKv_scroll span:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 120px;
  width: 1px;
  background: #fff; }

/*  */
@media screen and (max-width: 960px) {
  .pageKv_scroll {
    display: none; } }
.bg_texture {
  background: linear-gradient(140deg, #e1e5ed 0%, white 5%, #e1e5ed 10%, white 20%, #e1e5ed 25%, white 35%, #e1e5ed 40%, white 50%, #e1e5ed 55%, white 65%, #e1e5ed 70%, white 80%, #e1e5ed 85%, white 95%, #e1e5ed 100%);
  padding-bottom: 90px; }

@media screen and (max-width: 960px) {
  .bg_texture {
    padding-bottom: 45px; } }
/* ----------------------------------------
leadWrap
------------------------------------------- */
.leadWrap {
  padding-top: clamp(45px, 5vw, 90px);
  text-align: center; }

.leadWrap .leadEn {
  font-size: 42px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #9e8771;
  margin-bottom: clamp(20px, 4vw, 60px);
  text-align: center; }

.leadWrap .leadTtl {
  font-size: 30px;
  margin-bottom: clamp(20px, 2vw, 40px); }

.leadWrap .leadTxt {
  text-align: center; }

/*  */
@media screen and (max-width: 960px) {
  .leadWrap .leadEn {
    font-size: 21px; }

  .leadWrap .leadTtl {
    font-size: 18px; }

  .leadWrap .leadTxt {
    font-size: 13px;
    text-align: center; } }
/* ----------------------------------------
equipmentContents
------------------------------------------- */
body .wrapper {
  overflow: visible; }

#equipmentContents {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 80px;
  padding: 0 80px; }

#equipmentContents .eqContents_left {
  width: 20%;
  position: relative; }

#equipmentContents .eqContents_right {
  width: 80%;
  position: relative; }

.sideMenu_inner.sticky {
  position: sticky;
  top: 160px;
  left: 0; }

.sideMenu_list a {
  display: block;
  color: #ddd;
  transition: all 0.2s;
  font-size: clamp(13px, 1.4vw, 24px);
  letter-spacing: 0.04em;
  line-height: 2; }

.sideMenu_list a.is-current {
  color: #000; }

@media screen and (max-width: 960px) {
  #equipmentContents {
    padding: 0 15px; }

  #equipmentContents .eqContents_left {
    width: 20%; }

  #equipmentContents .eqContents_right {
    width: 77%; }

  .sideMenu_list a {
    font-size: 10px; } }
/* ----------------------------------------
iziModal モーダルカスタム
------------------------------------------- */
.js-equipment-modal {
  max-width: 528px !important;
  z-index: 10010 !important; }

.iziModal-navigate {
  z-index: 10002 !important; }

.iziModal-overlay {
  z-index: 10001 !important; }

body .modalclose {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
  border: none;
  padding: 0;
  background: none; }

body .modalclose .modalIcon {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  transform: translateY(-100%);
  text-align: center;
  color: #fff;
  cursor: pointer; }

body .modalclose .modalIcon::before {
  content: "✕";
  color: #fff;
  font-size: 25px; }

.modal_contens {
  font-family: YakuHanMP, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; }

.modal_contens img {
  width: 100%; }

.modal_contens .subImg {
  max-width: 250px;
  margin-top: 20px;
  padding: 0 40px; }

.modal_contens .title {
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.04em;
  margin: 30px 0 15px;
  padding: 0 40px; }

.modal_contens .text {
  font-size: clamp(13px, 1.4vw, 14px);
  letter-spacing: 0.04em;
  line-height: 1.8;
  padding: 0 40px 30px; }

.modal_contens .text small {
  display: block;
  color: #666;
  padding-top: 10px; }

@media screen and (max-width: 640px) {
  .js-equipment-modal {
    width: 95%; }

  .iziModal-navigate {
    display: none; }

  .modal_contens {
    max-height: 80vh;
    overflow-x: auto; } }
/* ----------------------------------------
eqList
------------------------------------------- */
.secHead {
  border-top: 1px solid #9e8771;
  padding-top: 20px;
  margin-bottom: 40px; }

.secHead h3 {
  color: #9e8771;
  font-size: clamp(20px, 3vw, 32px);
  letter-spacing: 0.1em;
  line-height: 1; }

.grid_contents {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 2%;
  row-gap: 80px; }

.thumImg {
  position: relative;
  overflow: hidden; }

.thumImg img {
  transition: all .3s; }

.thumIcon {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  color: #fff;
  font-size: 25px;
  line-height: 25px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.4);
  padding: 10px 15px;
  transition: all .2s; }

.thumTitle {
  font-size: clamp(11px, 1.4vw, 18px);
  line-height: 1.6;
  margin-top: 10px; }

.thumWrap .anno {
  color: #666;
  line-height: 1.7;
  display: block;
  padding-top: 10px; }

@media (hover: hover) {
  .thumWrap:hover {
    cursor: pointer; }

  .thumWrap:hover .thumImg img {
    transform: scale(1.06); }

  .thumWrap:hover .thumIcon {
    background: rgba(0, 0, 0, 0.8); } }
#anc01 {
  margin-top: -160px;
  padding-top: 160px; }

#anc02,
#anc03,
#anc04,
#anc05 {
  margin-top: -100px;
  padding-top: 160px; }

@media screen and (max-width: 960px) {
  .secHead {
    margin-bottom: 20px; }

  .grid_contents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 30px; }

  .thumIcon {
    padding: 5px 10px; }

  #anc01 {
    margin-top: -60px;
    padding-top: 60px; }

  #anc02,
  #anc03,
  #anc04,
  #anc05 {
    margin-top: -30px;
    padding-top: 60px; } }
