@charset "utf-8";
.top-img {
 background: url(../images/top-bg430w.jpg) no-repeat top center / contain;
 aspect-ratio: 430 / 492;
}
.top-img .top-catch-char {
 width: 80%;
 margin: 8% 0 10% 10%;
}
.top-img .server-img {
 width: 45%;
 margin-left: 45%;
}
.notice {
 margin: 0 1rem 5%;
 padding: 1%;
 border: 2px solid #ddd;
}
.pfas-notice {
 margin-bottom: 10%;
 color: #4d4d4d;
}
.pfas-notice h2 {
 margin-bottom: 1rem;
 font-size: 160%;
 font-weight: bold;
}
.pfas-notice p {
 font-size: 110%;
 font-weight: bold;
 text-align: justify;
}
.pfas-notice a {
 margin-top: 1rem;
 line-height: 1;
 display: block;
 transition: all .3s ease-in-out;
}
.pfas-notice a:hover {
 opacity: .6;
}
.pfas-notice a img {
 width: 80%;
}
.news {
 display: flex;
 flex-direction: column;
}
.news h2 {
 margin-right: 2rem;
}
.news ul {
 width: 100%;
}
.news ul li {
 margin-bottom: .5rem;
 font-size: 100%;
 text-align: left;
 letter-spacing: -1px;
 display: flex;
 flex-direction: column;
}
.news ul li span.day {
 line-height: 1;
 letter-spacing: 1px;
}
.news ul li a {
 padding: .5rem;
 color: #63768d;
 font-weight: bold;
 line-height: 1.4;
 text-decoration: none;
 transition: all .3s ease-in-out;
}
.news ul li a:hover {
 opacity: .6;
 background: #efefef;
}
section.lineup {
 margin: 0 1rem 5%;
}
section.lineup h2 {
 margin-bottom: 1rem;
 text-align: left;
}
section.lineup h2 img {
 width: 70%;
 max-width: 368px;
 aspect-ratio: 368 / 46;
}
section.lineup ul {
 display: flex;
 gap: 1rem;
}
section.lineup li img {
 width: 100%;
 transition: all .3s ease-in-out;
}
section.lineup li img:hover {
 opacity: .6;
}
section.plan {
 margin: 0 auto;
 padding: 1rem;
 background: #f0f9fa;
}
section.plan h2 {
 margin-bottom: 1rem;
 text-align: left;
}
section.plan h2 img {
 width: 68%;
 max-width: 326px;
 aspect-ratio: 326 / 46;
}
section.plan img {
 width: 100%;
}
section.about {
 padding-bottom: 3%;
 background: url(../images/woman-drinking-water750w.jpg) no-repeat top center / cover;
 aspect-ratio: 750 / 1250;
 display: flex;
 align-items: flex-end;
}
.about .information {
 margin: 0 3%;
 padding: 1rem 2%;
 background: rgba(255, 255, 255,.5);
 border-radius: 10px;
}
.about .information h2 {
 margin-bottom: .5rem;
 color: #63768d;
 font-size: clamp(16px, calc(100vw / 19.5), 26px);
 font-weight: bold;
}
.about .information p {
 color: #4d4d4d;
 font-size: 115%;
 line-height: 1.6;
 letter-spacing: 0;
 text-align: justify;
 text-shadow: 1px 1px 1px aliceblue;
}
.about .information a {
 width: 80%;
 margin: 1rem auto 0;
 transition: all .3s ease-in-out;
}
.about .information a img {
 width: 100%;
 max-width: 367px;
}
.about .information a:hover {
 opacity: .6;
}
.plan-btn {
 width: 80%;
 margin: 1rem auto 0;
 transition: all .3s ease-in-out;
}
.plan-btn:hover {
 opacity: .6;
}
@media screen and (min-width:800px) {
 .top-img {
  margin-bottom: 2%;
  padding-right: 2%;
  text-align: right;
  background: url(../images/top-bg1920w.jpg) no-repeat top center / contain;
  aspect-ratio: 1920 / 708;
 }
 .top-img .top-catch-char {
  margin: 0;
  width: calc(100% / 4.5);
  max-width: 406px;
  display: inline-block;
 }
 .top-img .server-img {
  margin: 0;
  width: calc(100% / 2.7);
  max-width: 695px;
  vertical-align: top;
  display: inline-block;
 }
 .w500 {
  width: 600px;
 }
 .notice {
  width: 50%;
  margin: 0 auto 5%;
  padding: 2% 3%;
 }
 .pfas-notice a img {
  width: auto;
 }
 .news {
  flex-direction: row;
 }
 .news ul li {
  margin-bottom: 1rem;
  font-size: 105%;
  letter-spacing: 0;
  flex-direction: row;
 }
 .news ul li:last-child {
  margin-bottom: 0;
 }
 .news ul li span.day {
  margin-right: 1.5rem;
  line-height: 1.4;
 }
 .news ul li a {
  padding: 0;
 }
 section.lineup {
  width: 55%;
  margin: 0 auto 5%;
 }
 section.lineup h2 {
  margin-bottom: 5%;
 }
 section.lineup h2 img {
  width: 36%;
 }
 section.lineup ul {
  justify-content: space-around;
 }
 section.lineup ul li {
  width: 45%;
 }
 section.plan {
  padding: 3% 0 5%;
 }
 section.plan h2 {
  width: 60%;
  margin: 0 auto 1rem;
 }
 section.plan h2 img {
  width: 28%;
 }
 section.plan img.pricing-plan {
  width: 64%;
  max-width: 1086px;
  aspect-ratio: 1086 / 532;
 }
 .plan-btn {
  max-width: 367px;
  margin: 5% auto 0;
  display: block;
  transition: all .3s ease-in-out;
 }
 .plan-btn img {
  width: 100%;
 }
 .plan-btn:hover {
  opacity: .6;
 }
 section.about {
  padding: 0;
  background: url(../images/woman-drinking-water.jpg) no-repeat center center / contain;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  aspect-ratio: 1920 / 600;
 }
 .about .information {
  margin: 0;
  background: rgba(255,255,255,.6);
 }
 .about .information h2 {
  color: #66798f;
 }
 .about .information p {
  color: #444;
  font-weight: bold;
 }
 @media screen and (max-width:1230px) {
  section.about {
   background-size: cover;
  }
 }
 .about .information {
  width: 38rem;
  margin-right: 4%;
  padding: 2%;
  background: rgba(255,255,255,.6);
  border-radius: 15px;
  aspect-ratio: 608 / 323;
 }
 .about .information h2 {
  margin-bottom: 1rem;
  font-size: 150%;
 }
 .about .information p {
  font-size: 130%;
  letter-spacing: -1.5px;
 }
 .about .information a {
  width: 50%;
  margin-top: 2rem;
 }
}