@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {position: relative;}
#Billboard h2 {font-size: 200%;font-weight: normal;font-family: 'Cinzel', serif;color: #fff;letter-spacing: 0.3em;line-height: 1;text-align: center;}
#Billboard h2 + p {margin-top: 2em;font-size: 112.5%;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;color: #fff;letter-spacing: 0.3em;line-height: 1;text-align: center;}
#Billboard .container {position: relative;z-index: 2;width: calc(100% - 4em);max-width: 1260px;padding: 5em 2em 3em;margin-left: auto;margin-right: auto;box-sizing: border-box;}
#Billboard::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: transparent url("../img/common/bg_05.webp") no-repeat 50% calc(50% + 1.5em) / 100% calc(100% + 3em);}

#Main .introduction {margin: 1em 0;}
#Main .introduction ul li a {display: block;color: #aaa;padding: 0.5em 1.5em;font-size: 150%;font-family: 'Cinzel', serif;letter-spacing: 0.05em;line-height: 1;text-decoration: none;text-align: center;}
#Main .introduction ul li a small {display: block;margin-top: 0.5em;font-size: 50%;line-height: 1;}
#Main .introduction ul li.current a {color: var(--dark-beige);cursor: default;pointer-events: none;}
#Main .introduction .container {padding: 0!important;margin-bottom: 0;background-color: transparent;background-image: none;}

#Main .block-equipment03-02 .pathmove {transform: translateY(-2.5em);}
#Main .block-equipment03-02 .container {position: relative;padding: 1.5em 0;}
#Main .block-equipment03-02 .grid-list-wrap {overflow: hidden;}
#Main .block-equipment03-02 .grid-list {margin: 1em -1em;}
#Main .block-equipment03-02 .grid-list > div {width: calc(33.33% - 2em);margin: 1em;}
#Main .block-equipment03-02 .grid-list > div h5 {position: relative;border-bottom: 1px solid #dcdcdc;margin: 0 0 0.5em;padding: 0.75em 0 0.5em 0;font-weight: normal;font-size: 100%;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;line-height: 1.5;color: var(--dark-beige);}
#Main .block-equipment03-02 .grid-list > div h5 + p {padding: 0 0 1em;font-size: 87.5%;}
#Main .block-equipment03-02 .grid-list > div h5 + p small {display: block;color: #666;}
#Main .block-equipment03-02 .grid-list > div figure {position: relative;}
#Main .block-equipment03-02 .grid-list > div figcaption {position: absolute;top: 0;left: 0;right: 0;padding: 0.75em;background-color: rgb(0 0 0 / 50%);font-family: 'Cinzel', serif;color: #fff;letter-spacing: 0.3em;line-height: 1;}

#Main .block-equipment03-02 .a-la-uno h3 {position: relative;border-bottom: 1px solid var(--light-beige);padding-bottom: 0.25em;font-size: 125%;font-family: 'Cinzel', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
#Main .block-equipment03-02 .a-la-uno h4 {position: relative;margin-bottom: 1em;padding-left: 8.5em;font-size: 125%;font-family: 'Cinzel', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
#Main .block-equipment03-02 .a-la-uno h4 strong {position: relative;display: block;margin-bottom: 0.5em;padding-left: 3.5em;line-height: 1.5;font-weight: normal;font-size: 125%;}
#Main .block-equipment03-02 .a-la-uno h4 strong::before {content: "";position: absolute;top: 0;left: 0;width: 3em;height: 3em;background: transparent url("../img/equipment/lavatory_14.webp") no-repeat 50% / contain;}
#Main .block-equipment03-02 .a-la-uno h4 span {display: inline-block;white-space: nowrap;}
#Main .block-equipment03-02 .a-la-uno h5 {margin-bottom: 1em;background-color: var(--light-beige);padding: 0.5em;text-align: center;font-weight: normal;font-size: 112.5%;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;line-height: 1.5;color: #fff;}
#Main .block-equipment03-02 .a-la-uno h6 {position: relative;border-bottom: 1px solid #dcdcdc;margin: 0 0 0.5em;padding: 0.75em 0 0.5em 0;font-weight: normal;font-size: 100%;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;line-height: 1.5;color: var(--dark-beige);}
#Main .block-equipment03-02 .a-la-uno h6 + p {font-size: 87.5%;}
#Main .block-equipment03-02 .a-la-uno h6 + p small {display: block;font-size: 10px;}
#Main .block-equipment03-02 .a-la-uno dt {position: relative;border-bottom: 1px solid #dcdcdc;margin: 0 0 0.5em;padding-bottom:  0.5em;font-weight: normal;font-size: 100%;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;line-height: 1.5;color: var(--dark-beige);}
#Main .block-equipment03-02 .a-la-uno dd {font-size: 87.5%;}
#Main .block-equipment03-02 .a-la-uno dd small {display: block;font-size: 10px;}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .introduction ul {display: table;margin: 0 auto;}
  #Main .introduction ul li {display: table-cell;width: 25%;}
  #Main .introduction ul li a {transition: color ease 500ms;}
  #Main .introduction ul li a:hover {color: var(--dark-beige);}
  #Main .introduction ul li + li a {position: relative;}
  #Main .introduction ul li + li a::before {content: "";position: absolute;top: 0.75em;bottom: 0.75em;left: 0;width: 1px;background-color: #ddd;}

  #Main .block-equipment03-02 > figure {width: calc(100% - 4em);max-width: 1260px;margin: 0 auto;position: relative;}
  #Main .block-equipment03-02 .grid-list > div figure img {max-width: 398px;}
  #Main .block-equipment03-02 .a-la-uno {margin: 4em 0 2em;border-bottom: 1px solid var(--light-beige);padding-bottom: 2em;}
  #Main .block-equipment03-02 .a-la-uno h3 {margin: 0 0 2em 12em;}
  #Main .block-equipment03-02 .a-la-uno h3::before {content: "";position: absolute;top: 50%;right: 100%;width: 12em;height: 4em;background: transparent url("../img/equipment/lavatory_10.webp") no-repeat 0 50% / contain;transform: translateY(-50%);}
  #Main .block-equipment03-02 .a-la-uno h4::before {content: "";position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 8em;height: 8em;background: transparent url("../img/equipment/lavatory_13.webp") no-repeat 50% / contain;}
  #Main .block-equipment03-02 .a-la-uno h4::after {content: "image（メーカー写真）";position: absolute;top: 50%;left: 0;padding-top: 4em;width: 12.8em;text-align: center;font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;font-size: 62.5%;letter-spacing: 0;text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff,-1px 1px 1px #fff,  1px -1px 1px #fff,1px 0 1px #fff, -1px  0 1px #fff,0 1px 1px #fff,  0 -1px 1px #fff;}
  #Main .block-equipment03-02 .a-la-uno dl {position: relative;padding-right: calc(30% + 1.5em);}
  #Main .block-equipment03-02 .a-la-uno dl::before {content: "";position: absolute;top: 0.25em;right: 0;bottom: 0;width: 30%;background: transparent url("../img/equipment/lavatory_15.webp") no-repeat 50% / cover;}
  #Main .block-equipment03-02 .a-la-uno dl::after {content: "image";position: absolute;right: 0;bottom: 0;padding: 1em;line-height: 1;font-size: 10px;}
  #Main .block-equipment03-02 .a-la-uno .column {display: flex;justify-content: space-between;}
  #Main .block-equipment03-02 .a-la-uno .column > div:not(:last-child) {max-width: 13em;margin-right: 1em;}
  #Main .block-equipment03-02 .a-la-uno .column > div:last-child {flex: 1;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1170px) {
  #Main .block-equipment03-02 .a-la-uno dl {padding-right: 0;}
  #Main .block-equipment03-02 .a-la-uno dl::before,
  #Main .block-equipment03-02 .a-la-uno dl::after {display: none;}
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard h2 + p {margin-top: 0.5em;}
  #Billboard .container {width: 100%;padding: 5em 0 2em;}
  #Billboard::after {background-position: 50%;background-size: auto 100%;}

  #Main .introduction ul {overflow: hidden;margin-bottom: 2em;}
  #Main .introduction ul li {float: left;width: 50%;margin: 0;}
  #Main .introduction ul li a {padding: 0.5em 0;margin: 1px;border-radius: 5px; border: 1px solid rgba(18, 50, 70,0.2);font-size: 125%;}

  #Main .block-equipment03-02 > figure{margin: -0.5em 1.5em 0;}
  #Main .block-equipment03-02 .grid-list > div {width: calc(100% - 2em);}
  #Main .block-equipment03-02 .container {position: relative;padding-bottom: 0;}
  #Main .block-equipment03-02 .a-la-uno {background-color: #f3f6f7;margin-top: 3em;padding: 1.5em;border-radius: 5px;}
  #Main .block-equipment03-02 .a-la-uno h3::before {content: "";display: block;height: 4em;margin-bottom: 1em;background: transparent url("../img/equipment/lavatory_10.webp") no-repeat 50% 100% / auto 75%;}
  #Main .block-equipment03-02 .a-la-uno h4 {padding-left: 0;}
  #Main .block-equipment03-02 .a-la-uno h4 strong {font-size: 112.5%;white-space: nowrap;}
  #Main .block-equipment03-02 .a-la-uno figure {background-color: #85959e;padding: 0 25%;}
  #Main .block-equipment03-02 .a-la-uno .column > div {margin-top: 1.5em;}
  #Main .block-equipment03-02 .a-la-uno .column > div:last-child {border-top: 1px solid #ddd;padding-top: 1.5em;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}