/* Page Header */
.page-header {
  background         : linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./img/K114.jpg');
  background-size    : cover;
  background-position: center;
  color              : white;
  text-align         : center;
  padding            : 300px 20px;
  margin-top         : 60px;
}

.page-header.day_s {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/top03.webp');
}

.page-header.helper {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/top04.webp');
}

.page-header.senior {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/top02.webp');
}

.page-header.recrute {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./img/recrute.jpg');
}

.page-header.contact {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./img/contact.jpg');
}

.page-header h1 {
  font-size    : 3rem;
  font-weight: bold;
  color: #ddd;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.page-header p {
  font-size    : 2.0rem;
  color: #ddd;
}

/* Facility Information */
.facility-info {
  padding  : 4rem 2rem;
  max-width: 1200px;
  margin   : 0 auto;
}

.facility-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap                  : 2rem;
  margin-top           : 2rem;
}

.facility-item {
  text-align: center;
}

.facility-item img,
.room-type img {
  width        : 100%;
  height       : 200px;
  object-fit   : cover;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.facility-info .container .features .feature {
  display: flex;
  flex-flow: row nowrap;
  margin-top:2rem;
}

/* Service Flow */
.service-flow,
.move-in-flow {
  background: var(--footer-color);
  padding   : 4rem 2rem;
}

.flow-steps {
  max-width            : 1200px;
  margin               : 2rem auto 0;
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap                  : 2rem;
}

.flow-item {
  background   : white;
  padding      : 2rem;
  border-radius: 8px;
  text-align   : center;
  box-shadow   : 0 2px 5px rgba(0, 0, 0, 0.1);
}

.step {
  font-size: 1.6rem;
  background   : var(--primary-color);
  color        : white;
  display      : inline-block;
  padding      : 0.5rem 2rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}

/* Schedule */
.schedule {
  padding  : 4rem 2rem;
  max-width: 800px;
  margin   : 0 auto;
}

.schedule-table {
  margin-top: 2rem;
}

.schedule-item {
  display              : grid;
  grid-template-columns: 100px 1fr;
  padding              : 1rem;
  border-bottom        : 1px solid #eee;
}

.time {
  font-weight: bold;
  color      : var(--primary-color);
}

/* Room Information */
.room-info {
  padding  : 4rem 2rem;
  max-width: 1200px;
  margin   : 0 auto;
}

.room-details {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap                  : 2rem;
  margin-top           : 2rem;
}

.room-type {
  background   : white;
  padding      : 2rem;
  border-radius: 8px;
  box-shadow   : 0 2px 5px rgba(0, 0, 0, 0.1);
}

.room-type ul {
  list-style: none;
  margin-top: 1rem;
}

.room-type li {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  padding-left : 1.5rem;
  position     : relative;
}

.room-type li:before {
  content : "•";
  color   : var(--primary-color);
  position: absolute;
  left    : 0;
}

/* Service Features */
.service-features {
  background: var(--footer-color);
  padding   : 4rem 2rem;
}

.features-grid {
  max-width            : 1200px;
  margin               : 2rem auto 0;
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap                  : 2rem;
}

.feature-item {
  background   : white;
  padding      : 2rem;
  border-radius: 8px;
  text-align   : center;
  box-shadow   : 0 2px 5px rgba(0, 0, 0, 0.1);
}

.feature-item img{
  width:100%;
  height:auto;
  margin-bottom:20px;
}

/* Job Listings */
.job-listings {
  padding  : 4rem 2rem;
  max-width: 1200px;
  margin   : 0 auto;
}

.job-list {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap                  : 2rem;
  margin-top           : 2rem;
}

.job-card {
  background   : white;
  padding      : 2rem;
  border-radius: 8px;
  box-shadow   : 0 2px 5px rgba(0, 0, 0, 0.1);
}

.job-details h4 {
  color : var(--primary-color);
  margin: 1rem 0 0.5rem;
}

.job-details ul {
  list-style   : none;
  margin-bottom: 1rem;
}

.job-details li {
  margin-bottom: 0.5rem;
  padding-left : 1.5rem;
  position     : relative;
}

.job-details li:before {
  content : "•";
  color   : var(--primary-color);
  position: absolute;
  left    : 0;
}

/* Benefits */
.benefits {
  background: var(--footer-color);
  padding   : 4rem 2rem;
}

.benefits-grid {
  max-width            : 1200px;
  margin               : 2rem auto 0;
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap                  : 2rem;
}

.benefit-item {
  background   : white;
  padding      : 2rem;
  border-radius: 8px;
  box-shadow   : 0 2px 5px rgba(0, 0, 0, 0.1);
}

.benefit-item ul {
  list-style: none;
  margin-top: 1rem;
}

.benefit-item li {
  margin-bottom: 0.5rem;
  padding-left : 1.5rem;
  position     : relative;
}

.benefit-item li:before {
  content : "•";
  color   : var(--primary-color);
  position: absolute;
  left    : 0;
}

/* Contact Form */
.contact-info {
  text-align: center;
  padding   : 2rem;
}

.phone-number {
  font-size  : 2rem;
  font-weight: bold;
  color      : var(--primary-color);
}

.contact-form {
  max-width: 800px;
  margin   : 0 auto;
  padding  : 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display      : block;
  margin-bottom: 0.5rem;
}

.required {
  color      : #ff4444;
  margin-left: 0.5rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width        : 100%;
  padding      : 0.8rem;
  border       : 1px solid #ddd;
  border-radius: 4px;
  font-size    : 1rem;
}

.checkbox-label {
  display    : flex;
  align-items: center;
  gap        : 0.5rem;
}

.service-item ul {
  padding-left: 30px;
}

/* 多床室特長セクション */

/* 星背景用の疑似アニメーション */
.multi-bed-feature-emphasized {
  background-color: #1A2E63;
  color           : #ffffff;
  padding         : 80px 20px;
  text-align      : center;
  position        : relative;
  overflow        : hidden;
  z-index         : 1;
}

/* 星層3段構え */
.stars,
.stars2,
.stars3 {
  position         : absolute;
  top              : 0;
  left             : 0;
  width            : 200%;
  height           : 200%;
  background-size  : 20px 20px;
  background-repeat: repeat;
  background-image : radial-gradient(white 5px, transparent 5px);
  animation        : moveStars 150s linear infinite;
  z-index          : 0;
  opacity          : 0.02;
}



@keyframes moveStars {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(-50%, -50%);
  }
}

/* コンテンツが星より前面に来るように */
.multi-bed-feature-emphasized .container {
  position: relative;
  z-index : 2;
}


.multi-bed-feature-emphasized {
  background-color: #1A2E63;
  color           : #ffffff;
  padding         : 80px 20px;
  text-align      : center;
  position        : relative;
}

.multi-bed-feature-emphasized .container {
  max-width: 1080px;
  margin   : 0 auto;
}

.multi-bed-feature-emphasized h2 {
  font-size    : 30px;
  font-weight  : 600;
  color: #ddd;
  line-height  : 1.4;
  margin-bottom: 16px;
  position     : relative;
}

.multi-bed-feature-emphasized h2 span {
  display      : block;
  font-size    : 16px;
  color        : #a7c4ff;
  margin-bottom: 8px;
  font-weight  : normal;
}

.multi-bed-feature-emphasized .lead {
  font-size    : 16px;
  color        : #e2eaff;
  margin-bottom: 50px;
}

.multi-bed-cards {
  display        : flex;
  flex-wrap      : wrap;
  gap            : 30px;
  justify-content: center;
}

.multi-bed-cards .card {
  background   : #ffffff;
  color        : #1A2E63;
  border-radius: 10px;
  padding      : 24px;
  width        : 300px;
  text-align   : center;
  box-shadow   : 0 4px 8px rgba(0, 0, 0, 0.1);
}

.multi-bed-cards .card .icon {
  font-size    : 36px;
  margin-bottom: 12px;
}

.multi-bed-cards .card h3 {
  font-size    : 18px;
  margin-bottom: 10px;
}

.multi-bed-cards .card p {
  font-size  : 14px;
  line-height: 1.6;
  color      : #333;
}



/* CTA Section */
.cta {
  text-align: center;
  padding   : 4rem 2rem;
  background: var(--footer-color);
}



/* 共通セクションスタイル */
.price-section,
.faq-section {
  padding         : 60px 20px;
  background-color: #f6f9fc;
  text-align      : center;
}

.price-section h2,
.faq-section h2 {
  font-size    : 28px;
  color        : #1A2E63;
  margin-bottom: 10px;
}

.price-section .lead,
.faq-section .lead {
  font-size    : 16px;
  color        : #555;
  margin-bottom: 40px;
}

/* 料金テーブル */
.price-table {
  display  : grid;
  gap      : 15px;
  max-width: 600px;
  margin   : 0 auto 30px;
}

.price-item {
  background     : #fff;
  padding        : 16px 20px;
  border-radius  : 8px;
  box-shadow     : 0 2px 6px rgba(0, 0, 0, 0.08);
  display        : flex;
  justify-content: space-between;
  font-size      : 15px;
  color          : #333;
}

.price-item.total {
  font-weight: bold;
  background : #e9f0ff;
  color      : #1A2E63;
}

.price-section .note {
  font-size  : 13px;
  color      : #777;
  line-height: 1.6;
}

/* FAQリスト */
.faq-list {
  display       : flex;
  flex-direction: column;
  gap           : 20px;
  max-width     : 800px;
  margin        : 0 auto;
  text-align    : left;
}

.faq-item {
  font-size: 1.8rem;
  background   : #fff;
  padding      : 20px 24px;
  border-radius: 10px;
  box-shadow   : 0 2px 8px rgba(0, 0, 0, 0.05);
}

.faq-item h3 {
  font-size    : 16px;
  margin-bottom: 10px;
  color        : #1A2E63;
}

.faq-item p {
  font-size  : 14px;
  color      : #444;
  line-height: 1.6;
}

.price-value-group {
  display       : flex;
  flex-direction: column;
  align-items   : flex-end;
}

.price-value-group .main-value {
  /* font-weight: bold; */
  font-size: 15px;
  color    : #333;
}

.price-value-group .sub-detail {
  font-size : 13px;
  color     : #777;
  margin-top: 4px;
}

.day-schedule-timeline {
  position: relative;
  max-width: 900px;
  margin: 60px auto;
  padding: 20px 0;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--primary-color);
  transform: translateX(-50%);
  z-index: 999999;
}

.schedule-block {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  margin-top: -50px;
}

.schedule-block.right {
  justify-content: flex-end;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, #f0f8ff 70%, #e6f7f1 85%, #fffaf0 100%);
}

.schedule-block.left {
  background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, #f0f8ff 70%, #e6f7f1 85%, #fffaf0 100%);
}

.schedule-block .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 260px;
  position: relative;
}

.schedule-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 12px;
}

.schedule-time {
  font-weight: bold;
  color: #1A2E63;
  margin-bottom: 4px;
  font-size: 32px;
  text-align: center;
  line-height: 1;
}


.schedule-label {
  font-size: 20px;
  color: #444;
  text-align: center;
    line-height: 1;
}

.dot {
  position: absolute;
  top:50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background-color:var(--primary-color);
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
}


.feature {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  gap:50px;
}

.img_wrap{
  display: flex;
  flex-flow: column nowrap;
  gap:10px;
  width: 40%;
}

.feature p {
  font-size: 1.8rem;
  width: 60%;
}

.multi-bed-cards {
  margin-bottom:70px;
}

.multi-bed-cards img{
  width:100%;height:auto;margin-bottom:20px;
}


.contact-info-box {
  background-color: #f5f5f0;
  border: 1px solid #e0e0dc;
  padding: 40px 20px;
  margin: 40px auto;
  max-width: 760px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  border-radius: 8px;
  text-align: center;
  font-family: 'Yu Gothic', 'ヒラギノ角ゴ ProN', sans-serif;
}

.contact-info-box h2 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #2b4c33;
  border-bottom: 2px solid #2b4c33;
  display: inline-block;
  padding-bottom: 5px;
}

.contact-info-box .contact-dept {
  font-weight: bold;
  color: #444;
  margin-bottom: 10px;
}

.contact-info-box address {
  font-style: normal;
  line-height: 1.8;
  color: #333;
  font-size: 15px;
}

.contact-info-box .tel {
  display: block;
  margin-top: 5px;
  font-weight: bold;
  color: #2b4c33;
}

/* Responsive Design */
@media (max-width: 768px) {

  .facility-grid,
  .flow-steps,
  .room-details,
  .features-grid,
  .job-list,
  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .schedule-item {
    grid-template-columns: 80px 1fr;
  }

  .timeline-line {
    left: 8px;
  }
  .schedule-block,
  .schedule-block.right,
  .schedule-block.left {
    justify-content: flex-start;
  }
  .schedule-block .content {
    margin-left: 24px;
    width: calc(100% - 40px);
  }

  .schedule-block {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
}

.feature-item img{
  width:50%;
}

.timeline-line, .dot{
  display: none;
}

}

@media (max-width: 425px) {

  .schedule-block {
      width: 80%;
  }

  .facility-info .container .features .feature {
  flex-flow: column nowrap;
}

.img_wrap {
  width: 100%;
}
.feature p {
  width: 100%;
}

}