@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {position: relative;}
#Billboard h2 {font-size: 200%;font-weight: normal;font-family: 'Cardo', serif;color: #fff;letter-spacing: 0.3em;line-height: 1;text-align: center;transition: letter-spacing var(--easing) 2000ms;}
#Billboard h2 + p {margin-top: 1em;font-family: "Cardo", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;color: #fff;letter-spacing: 0.3em;line-height: 1;text-align: center;transition: letter-spacing var(--easing) 2000ms;}
#Billboard .container {position: relative;z-index: 2;width: calc(100% - 4em);max-width: 1260px;padding: 6em 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: #9aa url("../img/common/bg_06.webp") no-repeat 0 0 / cover;background-blend-mode: color-burn;filter: contrast(.5) brightness(3.5) grayscale(0.7);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: transform;}
.staging #Billboard::after {filter: contrast(1) brightness(1) grayscale(0);transition: filter var(--easing) 2000ms;}
.transitionend #Billboard h2,
.transitionend #Billboard h2 + p {letter-spacing: 0.2em;}
#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;white-space: nowrap;}
#Main .introduction ul li.current a {color: var(--teal-green);cursor: default;pointer-events: none;}
#Main .introduction .container {padding: 0!important;margin-bottom: 0;background-color: transparent;background-image: none;}
#Main .block-equipment04-02 {position: relative;background: #ded9bb url("../img/common/bg_03.webp") no-repeat 50% / cover;background-blend-mode: overlay;}
#Main .block-equipment04-02 .pathmove {position: absolute;top: 0;left: 50%;transform: translateY(-50%);}
#Main .block-equipment04-02 h2 {font-size: 125%;letter-spacing: 0.3em;margin-bottom: 0.5em;}
#Main .block-equipment04-02 h2 span {font-size: 200%;font-family: 'Cinzel', serif;}
#Main .block-equipment04-02 h3 {font-family: 'Cinzel', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 175%;text-align: center;letter-spacing: 0.2em;color: #003744;margin: 0.5em 0;}
#Main .block-equipment04-02 .container {position: relative;padding-top: 1.5em;padding-bottom: 0;}
#Main .block-equipment04-02 .container > p {margin-top: 1em;padding: 0 0 3em;font-family: 'Cinzel', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 100%;text-align: center;letter-spacing: 0.2em;}
#Main .block-equipment04-02 .valueWrap {padding: 2.5em 0 4em;background: transparent url(../img/water/bg01.png) no-repeat 50% 0;}
#Main .block-equipment04-02 .valueWrap .txt03 {color: #2b606d;font-size: 225%;font-family: 'Cinzel', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";text-align: center;}
#Main .block-equipment04-02 .valueWrap img {max-width: 889px;margin: 0 auto;}

#Main .block-equipment04-03 .container .grid-list li .txtWrap .ttl {color: #938266;font-size: 200%;margin: 0;font-family: 'Cinzel', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
#Main .block-equipment04-03 .container .grid-list li .txtWrap .txt {font-size: 87.5%;line-height: 1.5;font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}

#Main .block-equipment04-04 {position: relative;z-index: 2;}
#Main .block-equipment04-04 .grid-list {padding-bottom: 5em;}
#Main .block-equipment04-04 .grid-list > div {margin: 0;}
#Main .block-equipment04-04 .grid-list .right .ttl {position: relative;font-size: 187.5%;font-family: 'Cinzel', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";text-indent: 0.4em;line-height: 1.5;padding-left: 1em;margin-bottom: 2em;}
#Main .block-equipment04-04 .grid-list .right .ttl img {position: absolute;left: -2.5em;top: -0.5em;max-width: 3.75em;}
#Main .block-equipment04-04 .grid-list .right .txt {line-height: 2;}
#Main .block-equipment04-04 .grid-list .right .txt span {color: #0a7082;}
/* =====
* 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: 20%;}
  #Main .introduction ul li a {transition: color ease 500ms;}
  #Main .introduction ul li a:hover {color: var(--teal-green);}
  #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-equipment04-03 .txt02 {text-align: center;}
  #Main .block-equipment04-03 .grid-list-wrap {overflow: hidden;margin-top: -8em;}
  #Main .block-equipment04-03 .grid-list-wrap .grid-list {overflow: hidden;margin: 0 -1em;}
  #Main .block-equipment04-03 .grid-list-wrap .grid-list li {width: calc(33.33% - 2em);margin: 1em;position: relative;}
  #Main .block-equipment04-03 .grid-list-wrap .grid-list li .imagephoto:before {display: inline-block;content: '';color: #fff;font-size: 150%;width: 1.5em;line-height: 1.5;text-align: center;background: #189eb6;position: absolute;top: 0;left: 0;font-family: 'Cinzel', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
  #Main .block-equipment04-03 .grid-list-wrap .grid-list li:nth-child(1) .imagephoto:before {content: '01';}
  #Main .block-equipment04-03 .grid-list-wrap .grid-list li:nth-child(2) .imagephoto:before {content: '02';}
  #Main .block-equipment04-03 .grid-list-wrap .grid-list li:nth-child(3) .imagephoto:before {content: '03';}
  #Main .block-equipment04-03 .grid-list-wrap .grid-list li:nth-child(4) .imagephoto:before {content: '04';}
  #Main .block-equipment04-03 .grid-list-wrap .grid-list li:nth-child(5) .imagephoto:before {content: '05';}
  #Main .block-equipment04-03 .grid-list-wrap .grid-list li:nth-child(6) .imagephoto:before {content: '06';}
  #Main .block-equipment04-03 .grid-list-wrap .scroller {display: none;}

  #Main .block-equipment04-04 .grid-list {justify-content: end;}
  #Main .block-equipment04-04 .grid-list > div {width: 50%;}
  #Main .block-equipment04-04 .grid-list .imagephoto {background: transparent url("../img/water/img08.png") no-repeat 50%;background-size: cover;height: 100%;}
  #Main .block-equipment04-04 .grid-list .imagephoto img {display: none;}
  #Main .block-equipment04-04 .grid-list .right {margin-top: -2.5em;padding: 0 0 2em 2em;width: calc(40% - 3em);max-width: 550px;margin-right: auto;margin-left: 0;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1260px) {
  #Main .block-equipment04-04 .grid-list .right {padding: 0 0 2em 2em;width: calc(50% - 3em);}
  #Main .block-equipment04-04 .grid-list .right .ttl {font-size: 150%;margin-bottom: 1.5em;letter-spacing: 0;}
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard .container {width: 100%;padding: 6em 0 2em;}
  #Billboard::after {background-position: 50% calc(50% + 2em - 2px);background-size: 100% calc(100% + 4em);}
  #Main .introduction ul {overflow: hidden;margin-bottom: 2em;}
  #Main .introduction ul li {float: left;width: 50%;margin: 0;}
  #Main .introduction ul li:nth-child(1) {width: 100%;}
  #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 .introduction ul li.current a {border-color: var(--teal-green);}

  #Main .block-equipment04-02 .container {position: relative;padding-bottom: 0;margin: 0;}
  #Main .block-equipment04-02 h2 {letter-spacing: 0;}
  #Main .block-equipment04-02 h2 span {font-size: 150%;}
  #Main .block-equipment04-02 h3 {font-size: 112.5%;letter-spacing: 0;margin-bottom: 1em;}
  #Main .block-equipment04-02 .container > p {padding: 0 0 1em;}
  #Main .block-equipment04-02 .valueWrap {background-size: 100% auto;background-color: #e9f1f4;}
  #Main .block-equipment04-02 .valueWrap .txt03 {font-size: 200%;line-height: 1.3;}

  #Main .block-equipment04-03 .container {margin: -3em 0 1em;padding: 0 1.5em 3em;background: #e9f1f4;}
  #Main .block-equipment04-03 .container .scroller img {width: 600%;}
  #Main .block-equipment04-03 .grid-list {display: none;}

  #Main .block-equipment04-04 .grid-list {background-color: #fff;margin: 0 1.5em;padding-bottom: 3em;}
  #Main .block-equipment04-04 {}
  #Main .block-equipment04-04 .grid-list .right .ttl {font-size: 150%;text-align: center;padding-left: 0;margin-bottom: 0.5em;}
  #Main .block-equipment04-04 .grid-list .right .ttl img {width: 2em;left: 50%;top: -1em;margin-left: -4em;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}