/* レンタル事業（rental.php）— 会社案内のレンタル事業ページの配色（ティール）に合わせています */

/* 下層ページ共通のメインビジュアル（他ページCSSと同じ定義） */
.under-mv {
  margin-top: 100px;
  position: relative;
  background-position: center;
  background-size: cover;
  height: 200px;
  z-index: 3;
}

@media only screen and (max-width: 751px) {
  .under-mv {
    margin-top: 60px;
    height: 100px;
  }
}

.under-mv-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.under-mv-heading {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  margin: auto;
}

.under-mv-heading__title {
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  color: #fff;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
}

@media only screen and (max-width: 751px) {
  .under-mv-heading__title {
    font-size: 15px;
  }
}

.under-mv-heading__title-en {
  font-family: Roboto;
  font-size: 40px;
  text-align: center;
  color: #fff;
  position: relative;
  margin-bottom: 25px;
}

@media only screen and (max-width: 751px) {
  .under-mv-heading__title-en {
    font-size: 25px;
    margin-bottom: 10px;
  }
}

.under-mv-heading__sub {
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  color: #fff;
}

@media only screen and (max-width: 751px) {
  .under-mv-heading__sub {
    font-size: 15px;
  }
}

.rental-mv{background:linear-gradient(120deg,#1d5c54,#3a8c80)}
.rental-mv-inner{position:relative}
.rental-mv-inner:after{content:"PC RENTAL / LED VEST RENTAL";position:absolute;right:4%;bottom:16px;color:rgba(255,255,255,.2);font:500 20px Roboto,sans-serif;letter-spacing:.16em}
.rental{color:#333}
.rental-inner{width:min(1120px,90%);margin:0 auto}
.rental-title{text-align:center;margin-bottom:55px}

/* イントロ */
.rental-intro{padding:90px 0 80px}
.rental-intro-box{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
.rental-intro-en{font:300 64px/1 Roboto,sans-serif;color:#a9cfc8;letter-spacing:.02em;margin-bottom:28px}
.rental-lead{font-size:30px;line-height:1.7;font-weight:500;color:#1d5c54}
.rental-copy{margin-top:28px;font-size:17px;line-height:2}
.rental-intro-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 40%}

/* サービス内容 */
.rental-services{padding:85px 0;background:#eef4f2}
.rental-service-list{display:grid;gap:34px}
.rental-service{display:grid;grid-template-columns:400px 1fr;gap:40px;background:#fff;padding:36px;border-left:4px solid #2e7a70;box-shadow:0 8px 25px rgba(20,70,62,.07)}
.rental-service__img{display:block;width:100%;aspect-ratio:425/270;object-fit:cover}
.rental-service h3{font-size:25px;color:#1d5c54;margin-bottom:16px}
.rental-service p{font-size:16px;line-height:1.9}
.rental-scene{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.rental-scene li{font-size:14px;padding:6px 14px;background:#eef4f2;color:#1d5c54;border-radius:999px}

/* 強み */
.rental-strengths{padding:90px 0}
.rental-strength-list{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.rental-strength{padding:35px 30px;border:1px solid #d3e3df;border-top:4px solid #2e7a70}
.rental-strength h3{font-size:20px;line-height:1.6;color:#2e7a70;margin-bottom:16px}
.rental-strength p{font-size:15px;line-height:1.9}

/* 流れ */
.rental-flow{padding:85px 0;background:#eef4f2}
.rental-flow-list{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rental-flow-list li{background:#fff;padding:28px 22px;position:relative}
.rental-flow-list li:not(:last-child):after{content:"";position:absolute;right:-14px;top:50%;border-left:10px solid #2e7a70;border-top:8px solid transparent;border-bottom:8px solid transparent;z-index:2}
.rental-flow-list span{font:500 13px Roboto,sans-serif;color:#2e7a70;letter-spacing:.1em}
.rental-flow-list h3{font-size:19px;margin:12px 0;color:#1d5c54}
.rental-flow-list p{font-size:14px;line-height:1.8}

/* お問い合わせ */
.rental-contact{padding:75px 0;background:#1d5c54;color:#fff}
.rental-contact-inner{width:min(920px,90%);margin:0 auto;text-align:center}
.rental-contact-title{font-size:30px;line-height:1.5;margin-bottom:15px}
.rental-contact .under-contact-text{color:#fff}
.rental-contact-buttons{display:flex;gap:22px;justify-content:center;margin-top:35px}
.rental-contact-button{display:flex;align-items:center;justify-content:center;flex-direction:column;width:340px;min-height:82px;background:#fff;color:#1d5c54;font-size:22px;font-weight:500;transition:opacity .2s}
.rental-contact-button span{font-size:11px;margin-top:5px}
.rental-contact-button--mail{font-size:17px;background:#e17b35;color:#fff}
.rental-contact-button:hover{opacity:.82}
.rental a:focus-visible{outline:3px solid #8cc7bd;outline-offset:4px}

@media(max-width:767px){
  .rental-mv-inner:after{display:none}
  .rental-intro{padding:50px 0 45px}
  .rental-intro-box{grid-template-columns:1fr;gap:30px}
  .rental-intro-en{font-size:44px;margin-bottom:18px}
  .rental-lead{font-size:22px}
  .rental-copy{font-size:15px;margin-top:18px}
  .rental-intro-photo img{aspect-ratio:4/3}
  .rental-services,.rental-strengths,.rental-flow{padding:55px 0}
  .rental-title{margin-bottom:35px}
  .rental-service{grid-template-columns:1fr;gap:22px;padding:22px 20px}
  .rental-service h3{font-size:21px}
  .rental-service p{font-size:15px}
  .rental-strength-list,.rental-flow-list{grid-template-columns:1fr}
  .rental-flow-list li:not(:last-child):after{right:50%;top:auto;bottom:-15px;transform:translateX(50%) rotate(90deg)}
  .rental-contact{padding:55px 0}
  .rental-contact-title{font-size:23px}
  .rental-contact-buttons{display:block}
  .rental-contact-button{width:100%;margin-top:14px}
  .rental-contact-button--tel{font-size:20px}
}