@charset "utf-8";
img {
 vertical-align: bottom;
}
header.top {
 margin: 0;
}
.top-catch {
 margin: 0;
}
p {
 font-size: 110%;
}
.suikyo-hita {
 padding: 0 2% 4%;
}
.suikyo-hita .for-border.lg h2 {
 font-size: clamp(16px, calc(100vw / 19.5), 26px);
}
.silica-content .for-border.lg h2 {
 font-size: clamp(16px, calc(100vw / 19.5), 26px);
}
.trigger-origin {
 background: url("../images/trigger-origin-bg750w.jpg") no-repeat center bottom / cover;
 background: url("../images/trigger-origin-bg750w.webp") no-repeat center bottom / cover;
 aspect-ratio: 750 /842;
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 grid-template-rows: repeat(4, 1fr);
}
.trigger-origin p.header {
 grid-column: span 5 / span 5;
}
.trigger-origin .p2 {
 grid-column: span 5 / span 5;
    grid-row-start: 2;
}
.trigger-origin .p3 {
 grid-column: span 5 / span 5;
 grid-row-start: 3;
}
.trigger-origin .p4 {
 grid-column: span 3 / span 3;
 grid-row-start: 4;
}
.trigger-origin .img5 {
 grid-column: span 2 / span 2;
 grid-column-start: 4;
 grid-row-start: 4;
}
.trigger-origin p.header {
 margin-bottom: 2%;
 color: #fff;
 font-size: 120%;
 font-weight: bold;
 text-shadow: 2px 2px 1px #0071bc, -2px -2px 1px #0071bc;
}
.trigger-origin p.normal {
 color: #fff;
}
img.right {
 width: 95%;
 margin-left: 5%;
}
.usage-scenarios.space,
.panel-operations.space {
 padding-bottom: 0;
}
.auto-cleaning,
.energy-saving {
 padding-top: 2%;
}
.trigger-origin {
 padding: 2%;
}
.natural-filter {
 margin-bottom: 3%;
 padding: 2%;
}
.natural-filter p {
 margin-bottom: 1%;
 line-height: 1.6;
}
ruby {
 margin: 0;
 padding: 0;
 line-height: 1;
}
rt {
 margin-bottom: -.2rem;
 font-size: .7rem;
}
.natural-filter .flex-container {
 display: flex;
}
.natural-filter .flex-container img {
 /*margin-top: -3%;*/
}
.introduction,
.silica-content,
.natural-hydrogen,
.nutritional-information {
 padding: 2%;
}
.natural-hydrogen {
 margin-bottom: 5%;
}
.natural-hydrogen p {
 margin-bottom: 2%;
}
.drink-effectively {
 padding: 2%;
}
.drink-effectively p {
 margin-bottom: 1rem;
}
.drink-effectively .flex-container {
 flex-direction: column;
}
.drink-effectively div.item {
 width: 100%;
 margin-bottom: 5%;
 padding: 5%;
 background: #eaf7f8;
 border-radius: 20px;
}
.drink-effectively .item h3 {
 margin-bottom: 3%;
 font-weight: bold;
 line-height: 1.8;
}
.drink-effectively .item h3:before {
 width: 2.2rem;
 height: 2.2rem;
 margin-right: .5rem;
 content: "";
 display: inline-block;
 vertical-align: top;
}
.drink-effectively .item h3.wakeUp:before {
 background: url(../images/sun-icon.png) no-repeat 0 0 / contain;
}
.drink-effectively .item h3.thirst:before {
 background: url(../images/sweat-icon.png) no-repeat 0 0 / contain;
}
.drink-effectively .item h3.duringExercise:before {
 background: url(../images/sport-icon.png) no-repeat 0 0 / contain;
}
.drink-effectively .item h3.atWork:before {
 background: url(../images/office-work-icon.png) no-repeat 0 0 / contain;
}
.drink-effectively .item h3.afterBathing:before {
 background: url(../images/bath-icon.png) no-repeat 0 0 / contain;
}
.drink-effectively .item h3.beforeBedtime:before {
 background: url(../images/moon-icon.png) no-repeat 0 0 / contain;
}
.drink-effectively .item p {
 margin-bottom: 0;
}
.nutritional-information {
 margin-bottom: 5%;
}
.nutritional-information .flex-container {
 margin-bottom: 2%;
 gap: 1%;
 border-bottom: 1px solid #eee;
}
.nutritional-information .item {
 width: 100%;
 padding: 5%;
 border: 1px solid #eee;
 border-bottom: .5px;
}
.nutritional-information .item p {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.nutritional-information .item span.space {
 max-width: calc(100% / 3);
}
.nutritional-information .item span.space:before {
 content: "・・・・・・・";
}
.nutritional-information .item span.name {
 width: 7rem;
}
.nutritional-information .item span.value {
 width: 5rem;
 text-align: right;
}
.nutritional-information p.caption {
 margin-bottom: 2%;
 font-size: 90%;
 text-align: right;
}
.nutritional-information p.caution {
 margin-bottom: 2%;
 font-size: 95%;
}
.link-button.p3p5p {
 padding: 3% 0 5%;
}
.w386 {
 width: calc(100% - 2rem);
 margin: 0 auto;
}
.bk-c8eaed {
 background: #f0f9fb;
}
section img {
 width: 100%;
}
@media screen and (min-width:800px) {
 header.top {
  margin: 0 auto;
 }
 .top-catch {
  margin: 0 auto;
 }
 .trigger-origin {
  margin-bottom: 3%;
  padding: 3%;
  background: url("../images/trigger-origin-bg960w.jpg") no-repeat center bottom / cover;
  aspect-ratio: 960 / 350;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
 }
 .trigger-origin p.header {
  grid-column: span 4 / span 4;
 }
 .trigger-origin .p2 {
  grid-column: span 3 / span 3;
  grid-row-start: 2;
 }
 .trigger-origin .p3 {
  grid-column: span 3 / span 3;
  grid-column-start: 1;
  grid-row-start: 3;
 }
 .trigger-origin .p4 {
  grid-column: span 3 / span 3;
  grid-column-start: 1;
  grid-row-start: 4;
 }
 .trigger-origin .img5 {
  grid-row: span 3 / span 3;
  grid-column-start: 4;
  grid-row-start: 2;
}
 .trigger-origin p.header {
  margin-bottom: 2%;
  color: #0071bc;
  font-size: 146%;
  font-weight: bold;
  text-shadow: 2px 2px 2px #fff, -2px -2px 2px #fff;
 }
 .trigger-origin p.normal {
  color: #fff;
  line-height: 2;
  font-weight: bold;
 }
 img.right {
 margin-top: 5%;
}
 .trigger-origin .frex-container {
  display: flex;
 }
 .trigger-origin .frex-container img.right {
  max-width: 260px;
  margin-left: 3%;
 }
 .natural-filter .flex-container {
  flex-direction: row;
 }
 .natural-hydrogen .g-design p {
  margin-bottom: 0;
 }
 .g-design {
  display: grid;
  grid-template-columns: repeat(2, 1 fr);
  grid-template-rows: repeat(4, 1 fr);
  gap: 1rem;
 }
 .active-hydrogen {
  grid-row: span 4 / span 4;
 }
 .famous-spring {
  grid-row: span 3 / span 3;
 }
 .famous-spring-description {
  grid-column-start: 2;
  grid-row-start: 4;
 }
 .drink-effectively .flex-container {
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: row;
 }
 .drink-effectively div.item {
  width: 47%;
  height: 14rem;
  padding: 2% 5%;
 }
 .nutritional-information .flex-container {
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: row;
  border-bottom: none;
 }
 .nutritional-information .item {
  width: 48%;
  padding: 3% 5%;
 }
 .nutritional-information .item.b-design {
  border-bottom: .5px solid #eee;
 }
 .w386 {
  max-width: 386px;
 }
}