@charset "utf-8";
/* BURTON STEP ON レンタル告知  /rental/css/stepon.css
   写真コラージュ＋白い山形＋ロゴ＋黄色見出し（「お取り扱い商品」と同じ構成）
   ※ .stepon_section 配下のみに適用 */
.stepon_section{position:relative;padding-bottom:80px;background:#fff}
.stepon_section sup{font-size:.45em;vertical-align:super;line-height:0}
/* コラージュ（5枚） */
.stepon_section .stepon__collage{position:relative;display:grid;grid-template-columns:1.7fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;height:38vw;max-height:640px;background:#fff}
.stepon_section .stepon__collage figure{margin:0;overflow:hidden;position:relative}
.stepon_section .stepon__collage img{display:block;width:100%;height:100%;object-fit:cover}
.stepon_section .stepon__c1{grid-column:1;grid-row:1 / 3}
.stepon_section .stepon__c1 img{object-position:50% 28%}
.stepon_section .stepon__c2{grid-column:2;grid-row:1}
.stepon_section .stepon__c2 img{object-position:50% 50%}
.stepon_section .stepon__c3{grid-column:3;grid-row:1}
.stepon_section .stepon__c3 img{object-position:55% 60%}
.stepon_section .stepon__c4{grid-column:2;grid-row:2}
.stepon_section .stepon__c4 img{object-position:50% 25%}
.stepon_section .stepon__c5{grid-column:3;grid-row:2}
.stepon_section .stepon__c5 img{object-position:60% 62%}
/* 白い山形（浅め） */
.stepon_section .stepon__collage::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:100%;background:#fff;clip-path:polygon(0 90%,50% 76%,100% 90%,100% 100%,0 100%);z-index:1}
/* ロゴ＋見出し */
.stepon_section .stepon__midashi__box{position:relative;z-index:2;margin-top:-5vw;text-align:center}
.stepon_section .stepon__logo{width:300px;margin:0 auto}
.stepon_section .stepon__logo img{display:block;width:100%;height:auto}
.stepon_section .stepon__tag{display:inline-block;margin-top:26px;font-size:1.4rem;font-weight:bold;letter-spacing:.2em;text-indent:.2em;color:#e41414}
.stepon_section .stepon__midashi{display:inline-block;margin-top:8px;padding:5px 10px;background:#FEE100;font-size:3rem;font-weight:bold;line-height:1.3;letter-spacing:.12em;text-indent:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* 本文 */
.stepon_section .stepon__wrap{width:760px;margin:36px auto 0;text-align:center;font-size:1.5rem;line-height:1.9;font-feature-settings:"palt"}
.stepon_section .stepon__wrap p + p{margin-top:1.1em}
.stepon_section .stepon__lead{font-size:1.9rem;font-weight:bold;line-height:1.6}
.stepon_section .stepon__lead em{font-style:normal;background:linear-gradient(transparent 62%,#FEE100 62%)}
.stepon_section .stepon__note{font-size:1.3rem;color:#7F7169}
@media screen and (min-width:1700px){.stepon_section .stepon__midashi__box{margin-top:-85px}}
@media screen and (max-width:1040px){
  .stepon_section{padding-bottom:50px}
  .stepon_section .stepon__midashi__box{padding:0 5%}
  .stepon_section .stepon__logo{width:56%;max-width:260px}
  .stepon_section .stepon__tag{margin-top:16px;font-size:1.2rem}
  .stepon_section .stepon__midashi{font-size:2rem;letter-spacing:.08em;text-indent:0;padding:4px 8px}
  .stepon_section .stepon__wrap{width:100%;padding:0 9.87%;margin-top:22px;text-align:left;font-size:1.4rem}
  .stepon_section .stepon__wrap br{display:none}
  .stepon_section .stepon__lead{font-size:1.6rem}
  .stepon_section .stepon__note{font-size:1.2rem}
}
/* スマホ：コラージュを縦積みに */
@media screen and (max-width:768px){
  .stepon_section .stepon__collage{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto;max-height:none;gap:4px}
  .stepon_section .stepon__c1{grid-column:1 / 3;grid-row:1;aspect-ratio:3/2}
  .stepon_section .stepon__c2,.stepon_section .stepon__c3,.stepon_section .stepon__c4,.stepon_section .stepon__c5{grid-column:auto;grid-row:auto;aspect-ratio:4/3}
  .stepon_section .stepon__collage::after{clip-path:polygon(0 94%,50% 88%,100% 94%,100% 100%,0 100%)}
  .stepon_section .stepon__midashi__box{margin-top:-4vw}
}
/* aspect-ratio 非対応の古いブラウザ向け */
@supports not (aspect-ratio:1/1){
  @media screen and (max-width:768px){
    .stepon_section .stepon__collage figure{height:0}
    .stepon_section .stepon__c1{padding-top:66.67%}
    .stepon_section .stepon__c2,.stepon_section .stepon__c3,.stepon_section .stepon__c4,.stepon_section .stepon__c5{padding-top:75%}
    .stepon_section .stepon__collage img{position:absolute;top:0;left:0}
  }
}
/* 2026/11 ページ上部（黄色エリア内・ボタンの上）に配置 */
.pagetitle_rental .stepon_section{width:90%;max-width:1000px;margin:36px auto 40px;padding-bottom:44px;border-radius:10px;overflow:hidden;text-align:center;z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.pagetitle_rental .stepon_section .stepon__collage{height:auto;max-height:none;aspect-ratio:1000/400;gap:4px}
.pagetitle_rental .stepon_section .stepon__midashi__box{margin-top:-46px}
.pagetitle_rental .stepon_section .stepon__wrap{width:auto;max-width:760px;padding:0 30px}
@media screen and (max-width:1040px){
  .pagetitle_rental .stepon_section{width:92%;margin:28px auto 30px;padding-bottom:32px}
  .pagetitle_rental .stepon_section .stepon__midashi__box{margin-top:-4vw}
  .pagetitle_rental .stepon_section .stepon__wrap{padding:0 6%}
}
@media screen and (max-width:768px){
  .pagetitle_rental .stepon_section .stepon__collage{aspect-ratio:auto}
}