@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {background: transparent url("../img/water/img_01.webp") no-repeat 50% / cover;padding: 16em 0 0;position: relative;}
#Billboard h2 {text-align: center;line-height: 1;font-family: "Copperplate Custom", serif;font-size: 650%;color: #d3e8f8;opacity: 0.5;}
#Billboard h3 {position: relative;margin: -1.75em auto 0;text-align: center;font-family: var(--serif);font-size: 175%;color: var(--color-02);}

#Main .block-water-01 {background: #fff url("../img/water/bg_01.webp") no-repeat 0 100% / 100% auto;}
#Main .block-water-01 h3 {font-size: 100%;}
#Main .block-water-01 h3 img {width: auto;height: 7em;margin: 0 auto;}
#Main .block-water-01 h4 {position: relative;margin: 0.5em auto;text-align: center;font-family: var(--serif);font-size: 175%;line-height: 1.5;color: #009dda;}
#Main .block-water-01 ul {display: flex;flex-wrap: wrap;justify-content: space-between;}
#Main .block-water-01 ul li {background-color: #009dda;border-radius: 3em;margin: 1em 0 0;padding: 0.5em 0;text-align: center;font-family: var(--serif);color: #fff;}
#Main .block-water-01 .lead {max-width: 46em;margin: 0 auto;color: #595757;}
#Main .block-water-01 .lead ~ figure {max-width: 1000px;margin: 3em auto 0;}
#Main .block-water-01 .container {padding-top: 0;}

#Main .block-water-01 .column > div {background-color: #fff;padding: 2em;margin: 1.5em 0 0;border-radius: 1em;box-sizing: border-box;}
#Main .block-water-01 .column > div h3 {background-color: #727171;margin-bottom: 1em;padding: 0.5em;text-align: center;font-family: var(--serif);font-size: 125%;line-height: 1.5;color: #fff;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-water-01 ul li {width: calc(25% - 1em);}
  #Main .block-water-01 .column {display: flex;justify-content: space-between;}
  #Main .block-water-01 .column > div {width: calc(50% - 1em);}
  #Main .block-water-01 .column > div .lead {max-width: 30em;}
  #Main .block-water-01 .column > div:nth-child() figure {max-width: 340px;margin: 1em auto 0;}
  #Main .block-water-01 .column > div figure {max-width: 340px;margin: 1em auto 0;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1100px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard {padding-top: 10em;}
  #Billboard h2 {font-size: 146.8%;}
  #Billboard h3 {margin-top: 0;font-size: 125%;}

  #Main .block-water-01 {background: #fff url("../img/water/bg_01.webp") no-repeat 50% 100% / auto 100%;}
  #Main .block-water-01 h3 img {height: 9em;}
  #Main .block-water-01 h4 {margin-top: 1em;font-size: 137.5%;}
  #Main .block-water-01 ul li {width: calc(50% - 0.25em);}
  #Main .block-water-01 .column > div .lead {letter-spacing: 0;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}