@charset "UTF-8";

/* =========================================================
  elm
========================================================= */
body {
  color: #1e1e1e;
}

a {
  color: var(--a-color);
  text-decoration: none;
}

a:hover {
  color: var(--a-hover-color);
}

a:visited {
  color: var(--a-visited-color);
}

button {
  color: inherit;
  appearance: none;
}

/* =========================================================
  outline
========================================================= */
*:focus {
  box-shadow: 0 0 0px 1px white;
  outline: dotted !important;
}

/* =========================================================
  switching (pc / sp)
========================================================= */
@media only screen and (min-width: 835px), print {
  .for-sp {
    display: none !important;
  }
}

@media only screen and (max-width: 834px) {
  .for-pc {
    display: none !important;
  }
}

/* =========================================================
  site layout
========================================================= */
body {
  min-height: 100dvh;
}

#container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: clip;
}

#pageHeader {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1230px;
  margin: 0 auto;
  padding: 27px 15px 25px;
}

#pageNav {
  flex-basis: 100%;
  position: relative;
}

#pageNav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 1920px;
  height: 100%;
  background: url(/_themes/iseki/site/images/title-photo.webp) center center / cover no-repeat;
}

#pageNav::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 1920px;
  aspect-ratio: 1920/246;
  background: url(/_themes/iseki/site/images/title-mountain.svg) center top / 100% auto no-repeat;
}

#main {
  flex-grow: 1;
  position: relative;
  z-index: 1;
  padding-bottom: 155px;
}

#content {
  width: 100%;
  max-width: 1230px;
  margin: 0 auto;
  padding: 0 15px;
}

#pageFooter {
  position: relative;
  width: 100vw;
  max-width: 1920px;
  margin: 0 auto;
  isolation: isolate;
}

#pageFooter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mono-color-2);
  mix-blend-mode: multiply;
}

#pageFooter::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  height: 809px;
  background: url(/_themes/iseki/site/images/footer-photo.webp) center center / cover no-repeat;
}

@media only screen and (max-width: 834px) {
  #pageHeader {
    gap: 0;
    padding: 0;
  }

  #pageNav::before {
    width: 100%;
  }

  #pageNav::after {
    width: 130%;
  }

  #main {
    padding-top: 30px;
  }

  #content {
    padding: 0 10px;
  }
}

/* =========================================================
  piece
========================================================= */

/* siteLogo
----------------------------------------------- */
#siteLogo {
  flex-basis: 399px
}

#siteLogo h1 a {
  display: block;
  transition: opacity 0.25s ease-in-out;
}

#siteLogo h1 a:hover {
  opacity: 0.7;
}

@media only screen and (max-width: 834px) {
  #siteLogo {
    flex-basis: calc(100% - 62px);
    max-width: 76vw;
  }

  #siteLogo h1 a {
    display: inline-flex;
    align-items: center;
    height: 62px;
    padding: 10px;
  }

  #siteLogo img {
    height: 32px;
  }
}

/* headMenu
----------------------------------------------- */
#google_translate_element .goog-te-gadget-simple {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 142px;
  min-height: 33px;
  border: 1px solid var(--mono-color-6);
}

#menu-detail .home a {
  display: inline-block;
  padding: 4px 28px 4px 14px;
  border: 1px solid var(--mono-color-6);
  background: url(/_themes/iseki/site/images/ic-targetblank.svg) right 16px center no-repeat var(--mono-color-9);
  color: inherit;
}

#menu-detail .home a:hover {
  text-decoration: underline;
}

@media only screen and (min-width: 835px) {
  #headMenu {
    margin-left: auto;
    padding-top: 5px;
  }

  #menu-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 16px;
  }
}

@media only screen and (max-width: 834px) {
  #headMenu {
    display: flex;
    flex-direction: column;
    /*
    position: fixed;
    */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 75px;
    height: 100dvh;
    z-index: 100;
    pointer-events: none;
  }

  #headMenu::before {
    content: "";
    opacity: 0;
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0,0,0,.9);
    transition: opacity 0.25s ease-in-out;
  }

  #headMenu::after {
    content: "";
    opacity: 0;
    position: fixed;
    inset: 0 0 0 75px;
    z-index: -1;
    background: var(--ac-color-red-1);
    transition: opacity 0.25s ease-in-out;
  }

  body:has(.toolOpen) {
    overflow: hidden;
  }

  .toolOpen #headMenu {
    pointer-events: auto;
  }

  .toolOpen #headMenu::before,
  .toolOpen #headMenu::after {
    opacity: 1;
  }

  #headMenu > * {
    pointer-events: auto;
  }

  #headMenu .menu-btn {
    align-self: flex-end;
  }

  #headMenu .menu-btn button {
    width: 62px;
    height: 62px;
    border: none;
    background:
     url(/_themes/iseki/site/images/sp/ic-menu.svg) center center no-repeat,
     url(/_themes/iseki/site/images/sp/menu-background.png) center center / cover no-repeat;
    font-size: 0;
  }

  #headMenu .menu-btn button[aria-expanded="true"] {
    background: url(/_themes/iseki/site/images/sp/ic-menu_close.svg) center center no-repeat;
  }

  #headMenu #menu-detail {
    visibility: hidden;
    opacity: 0;
    padding: 32px 24px 80px;
    overflow-x: hidden;
  }

  #headMenu #menu-detail.open {
    visibility: visible;
    opacity: 1;
  }

  #headMenu .menu-navi {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--mono-color-9);
  }

  #headMenu .menu-navi ul {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }

  #headMenu .menu-navi a {
    color: var(--mono-color-9);
    font-size: 1.375rem;
    font-family: "Noto Serif JP", serif;
  }

  #headMenu .menu-navi a:hover {
    text-decoration: underline;
  }

  #google_translate_element {
    margin-bottom: 24px;
  }
}

@media only screen and (max-width: 834px) {
  /* translate */
  html body {
    top: 0 !important;
  }

  body > .skiptranslate {
    width: 100%;
    max-width: 900px;
    background-color: #fff;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
  }

  body > .skiptranslate iframe {
    position: relative;
    width: 160%;
    max-width: 768px;
  }

  #goog-gt-tt {
    max-width: 100% !important;
  }
}

/* globalNavi
----------------------------------------------- */
#globalNavi {
  position: relative;
  z-index: 0;
}

#globalNavi::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 100vw;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

#globalNavi ul {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

#globalNavi li a {
  display: block;
  position: relative;
  padding: 26px 0 20px;
  color: inherit;
  font-weight: 600;
  font-size: min(2vw,1.3125rem);
  font-family: "Noto Serif JP", serif;
  text-align: center;
  transition: opacity 0.25s ease-in-out;
}

#globalNavi li a:hover {
  opacity: 0.7;
}

#globalNavi li a.cur::before {
  content: "";
  position: absolute;
  top: 20px;
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ac-color-red-1);
}

/* commonFooter
----------------------------------------------- */
#commonFooter {
  position: relative;
  width: 100%;
  max-width: 1230px;
  margin: 0 auto;
  padding: 77px 15px 20px;
  color: var(--mono-color-9);
}

#commonFooter::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 1920px;
  min-width: 1840px;
  aspect-ratio: 1920/420;
  background:
   url(/_themes/iseki/site/images/footer-ring01.png) left bottom / 217px auto no-repeat,
   url(/_themes/iseki/site/images/footer-ring02.png) right top / 199px auto no-repeat;
  pointer-events: none;
}

#commonFooter .contact {
  margin-bottom: 50px;
  font-size: 1.125rem;
}

#commonFooter .contact h2 {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}

#commonFooter .contact address span {
  display: inline-block;
  margin: 15px 1em 0 0;
}

#commonFooter .contact .mail,
#pageTop a {
  display: block;
  position: relative;
  border: 1px solid var(--mono-color-9);
  color: inherit;
  font-weight: 400;
  font-size: 1rem;
}

#commonFooter .contact .mail {
  padding: 5px 13px 5px 44px;
  background: url(/_themes/iseki/site/images/ic-mail.svg) 12px center no-repeat;
}

#pageTop a {
  position: absolute;
  top: 0;
  right: 15px;
  padding: 15px 14px 15px 48px;
  border-top: none;
  background: url(/_themes/iseki/site/images/arrow-pagetop.svg) 20px center no-repeat;
}

#commonFooter .contact .mail::before,
#pageTop a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mono-color-2);
  mix-blend-mode: multiply;
}

#commonFooter .contact .mail:hover,
#pageTop a:hover {
  text-decoration: underline;
}

#commonFooter .copy small {
  font-size: inherit;
}

@media only screen and (max-width: 834px) {
  #commonFooter::before {
    min-width: 0;
    top: -44px;
    z-index: -1;
    aspect-ratio: unset;
    background-position: -7% 106%, 114% 0%;
    background-size: min(40%,180px) auto;
  }
}

@media only screen and (max-width: 390px) {
  #commonFooter {
    padding: 77px 35px 15px 10px;
  }

  #commonFooter .contact {
    margin-bottom: 30px;
  }

  #commonFooter .contact h2 {
    margin-bottom: 10px;
  }

  #commonFooter .contact address span:not(:has(.mail)) {
    display: inline;
  }

  #pageTop a {
    right: 10px;
  }
}

/* breadCrumbs
----------------------------------------------- */
#breadCrumbs {
  position: relative;
  margin: 16px 0 116px;
  font-size: 0.875rem;
}

#breadCrumbs ol,
#breadCrumbs li {
  list-style: none;
}

#breadCrumbs li {
  display: inline-block;
}

#breadCrumbs li:not(:last-child)::after {
  content: "＞";
  margin: 0 8px;
}

#breadCrumbs li a {
  color: inherit;
}

#breadCrumbs li a:hover {
  text-decoration: underline;
}

@media only screen and (max-width: 834px) {
  #breadCrumbs {
    margin: 6px 6px 50px;
  }
}

/* pageTitle
----------------------------------------------- */
#pageTitle {
  position: relative;
  margin-bottom: 255px;
  z-index: 1;
}

#pageTitle .pieceBody {
  display: flex;
  align-items: center;
}

#pageTitle .pieceBody h1 {
  font-size: 2.375rem;
  font-family: "Noto Serif JP", serif;
  line-height: 1.5;
}

@media only screen and (max-width: 834px) {
  #pageTitle {
    margin-bottom: 130px;
  }

  #pageTitle .pieceBody h1 {
    padding: 0 15px;
    font-size: max(4vw,1.75rem);
  }
}