/* tire（タイヤ・カー用品店LP）専用。接頭辞 .tr- */
.tr-sec{--tr-y:#ffd400;--tr-y2:#ffe766;--tr-k:#141414;--tr-k2:#262626;--tr-gray:#f3f3f0;--tr-font:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --tr-tread:linear-gradient(135deg,var(--tr-k) 25%,transparent 25%) -14px 0/28px 28px,linear-gradient(225deg,var(--tr-k) 25%,transparent 25%) -14px 0/28px 28px,linear-gradient(315deg,var(--tr-k) 25%,transparent 25%) 0 0/28px 28px,linear-gradient(45deg,var(--tr-k) 25%,transparent 25%) 0 0/28px 28px,var(--tr-y);
  color:var(--tr-k);position:relative;padding:clamp(60px,8vw,104px) 16px!important}
.tr-sec h1,.tr-sec h2,.tr-sec h3{font-family:var(--tr-font)}
.tr-white{background:#fff}
.tr-gray{background:var(--tr-gray)}
.tr-yellow{background:var(--tr-y)}
.tr-black{background:var(--tr-k);color:#fff}
/* トレッド模様の帯（セクション上端） */
.tr-yellow::before,.tr-black::before,.tr-fv::after{content:"";position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(-55deg,var(--tr-k) 0 10px,var(--tr-y) 10px 20px)}
.tr-yellow::before,.tr-black::before{top:0}
.tr-fv::after{bottom:0}

/* ===== ボタン ===== */
.tr-btns{gap:12px!important;margin-top:1.4em!important}
.tr-sec .wp-block-button.is-style-cx-cta .wp-block-button__link{background:var(--tr-y);color:var(--tr-k);font-family:var(--tr-font);border:3px solid var(--tr-k);box-shadow:5px 5px 0 var(--tr-k);border-radius:4px;padding:.9em 1.8em}
.tr-sec .wp-block-button.is-style-cx-cta .wp-block-button__link:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--tr-k);color:var(--tr-k)}
.tr-fv .wp-block-button.is-style-cx-cta .wp-block-button__link,.tr-black .wp-block-button.is-style-cx-cta .wp-block-button__link{border-color:var(--tr-y);box-shadow:0 6px 0 #b39500,0 14px 30px rgba(255,212,0,.25)}
.tr-fv .wp-block-button.is-style-cx-cta .wp-block-button__link:hover,.tr-black .wp-block-button.is-style-cx-cta .wp-block-button__link:hover{transform:translateY(3px);box-shadow:0 3px 0 #b39500}
.tr-yellow .wp-block-button.is-style-cx-cta .wp-block-button__link{background:var(--tr-k);color:var(--tr-y);border-color:var(--tr-k);box-shadow:5px 5px 0 #fff}
.tr-yellow .wp-block-button.is-style-cx-cta .wp-block-button__link:hover{color:var(--tr-y)}
.tr-sec .wp-block-button.is-style-cx-sub .wp-block-button__link{border:2px solid var(--tr-k);color:var(--tr-k);font-size:15px;padding:.7em 1.1em}
.tr-sec > .tr-btns,.tr-yellow .tr-btns,.tr-ticket .tr-btns,.tr-close-box .tr-btns{justify-content:center}

/* ===== ファーストビュー ===== */
.tr-fv{background:radial-gradient(700px 500px at 80% 40%,rgba(255,212,0,.16),transparent 70%),repeating-linear-gradient(-55deg,#181818 0 22px,#141414 22px 44px);color:#fff;padding-top:clamp(40px,6vw,72px)!important;padding-bottom:clamp(56px,7vw,88px)!important;overflow:hidden}
.tr-fv-cols{max-width:1180px!important;margin:0 auto!important;align-items:center!important;gap:clamp(20px,4vw,48px)!important}
.tr-kicker{display:inline-block;background:var(--tr-y);color:var(--tr-k);font-weight:900;font-size:15px;padding:.3em .9em;transform:rotate(-2deg);margin:0 0 1em!important}
.tr-fv h1{color:#fff;font-size:clamp(30px,3.6vw,48px);line-height:1.25;margin:0 0 .4em!important}
.tr-fv h1 strong{color:var(--tr-y);font-family:"Outfit",var(--tr-font);font-size:1.45em;line-height:1;display:inline-block;margin-top:.05em;text-shadow:4px 4px 0 #000}
.tr-fv h1 strong small{font-family:var(--tr-font);font-size:.4em}
.tr-fv-sub{font-size:clamp(15px,1.7vw,18px);font-weight:700;color:#e9e9e9}
.tr-badges{gap:12px!important;justify-content:flex-start!important;margin:1.2em 0 0!important}
.tr-badge{width:104px;height:104px;border-radius:50%;margin:0!important;background:var(--tr-y);color:var(--tr-k);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;font-size:13px;line-height:1.2;text-align:center;
  box-shadow:0 0 0 5px var(--tr-k),0 0 0 8px var(--tr-y)}
.tr-badge strong{font-family:"Outfit",var(--tr-font);font-size:2.3em;line-height:1}
.tr-badge:last-child strong{font-family:var(--tr-font);font-size:1.75em}
.tr-micro{font-size:13px;color:#bdbdbd;margin-top:.9em!important}
.tr-fv-cols > .wp-block-column:last-child{position:relative;padding-bottom:30px}
.tr-fv-photo{margin:0!important}
.tr-fv-photo img{width:100%;border:6px solid var(--tr-y);border-radius:4px!important;transform:rotate(2deg);box-shadow:0 24px 50px rgba(0,0,0,.5);display:block}
.tr-fv-phone{position:absolute;left:-6%;bottom:0;width:34%;margin:0!important;z-index:2}
.tr-fv-phone img{border:7px solid #000;border-radius:20px!important;aspect-ratio:9/17;object-fit:cover;object-position:top;box-shadow:0 18px 36px rgba(0,0,0,.6);display:block;transform:rotate(-5deg)}
.tr-fv-cap{position:absolute;right:0;bottom:0;margin:0!important;font-size:12px;color:#9a9a9a}

/* ===== 見出し ===== */
.tr-en{text-align:center;margin:0 auto .4em!important;font-family:"Outfit",sans-serif;font-weight:900;letter-spacing:.18em;font-size:14px}
.tr-en{display:block;width:max-content;max-width:100%;background:var(--tr-k);color:var(--tr-y);padding:.2em .8em}
.tr-yellow .tr-en{background:#fff;color:var(--tr-k)}
.tr-black .tr-en{background:var(--tr-y);color:var(--tr-k)}
.tr-sec h2.tr-h{text-align:center;font-size:clamp(26px,3.8vw,42px);line-height:1.4;margin:0 auto .5em!important;color:var(--tr-k)}
.tr-black h2.tr-h{color:#fff}
.tr-sec h2.tr-h strong{background:linear-gradient(transparent 62%,var(--tr-y) 62%);padding:0 .1em}
.tr-yellow h2.tr-h strong{background:linear-gradient(transparent 62%,#fff 62%)}
.tr-black h2.tr-h strong{background:none;color:var(--tr-y)}
.tr-lead{text-align:center;font-weight:700;font-size:clamp(15px,1.7vw,18px);max-width:820px;margin:0 auto 2em!important}
.tr-small{font-size:13px;color:#666;margin-top:1.2em!important}
.tr-black .tr-small{color:#aaa}
.tr-yellow .tr-small{color:#3d3500}
.tr-center{text-align:center;margin-left:auto!important;margin-right:auto!important;max-width:860px}

/* ===== タイヤ預かり（ブラウザの見本） ===== */
.tr-keep-cols{max-width:1040px;margin:0 auto!important;gap:clamp(24px,4vw,48px)!important;align-items:center!important}
.tr-browser{border:3px solid var(--tr-k);border-radius:4px;background:#fff;box-shadow:8px 8px 0 var(--tr-y);overflow:hidden;padding:0!important}
.tr-browser > *{margin:0!important}
.tr-browser-bar{background:var(--tr-k);color:#fff;font-family:"Outfit","Noto Sans JP",sans-serif;font-size:14px;padding:.55em 1em .55em 3.6em!important;position:relative;word-break:break-all}
.tr-browser-bar::before{content:"";position:absolute;left:1em;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#ff5f56;box-shadow:13px 0 0 #ffbd2e,26px 0 0 #27c93f}
.tr-browser-bar b{color:var(--tr-y)}
.tr-browser-body{padding:22px 22px 26px!important;background:radial-gradient(circle at 86% 30%,transparent 0 30px,var(--tr-k) 31px 44px,transparent 45px),#fff}
.tr-browser-body > *{margin:0 0 .6em!important}
.tr-browser-title{font-family:var(--tr-font);font-weight:900;font-size:24px;display:inline-block;background:linear-gradient(transparent 60%,var(--tr-y) 60%)}
.tr-browser-text{font-size:14px;max-width:80%}
.tr-browser-line{height:10px;background:#e7e7e2;border-radius:2px;width:90%}
.tr-browser-line.tr-short{width:60%}
.tr-browser-btn{display:inline-block;background:var(--tr-y);border:2px solid var(--tr-k);font-weight:900;font-size:14px;padding:.4em 1em;margin-top:.4em!important}
ul.tr-list{list-style:none;padding:0!important;margin:0!important}
ul.tr-list li{position:relative;padding:.55em 0 .55em 2.3em;border-bottom:2px dotted #ddd;font-size:16px;font-weight:700}
ul.tr-list li::before{content:"";position:absolute;left:0;top:.62em;width:1.5em;height:1.5em;border-radius:50%;background:var(--tr-k);box-shadow:inset 0 0 0 4px var(--tr-k),inset 0 0 0 7px var(--tr-y)}
ul.tr-list li strong{background:linear-gradient(transparent 62%,var(--tr-y2) 62%)}
.tr-tiles{max-width:1040px;margin:40px auto 0!important;gap:18px!important}
.tr-tile{background:var(--tr-gray);border-radius:4px;padding:22px 20px!important;text-align:center}
.tr-tile > *{margin:0 0 .3em!important}
.tr-tile-big{display:inline-block;font-family:var(--tr-font);font-weight:900;font-size:24px;background:var(--tr-k);color:var(--tr-y);padding:.15em .6em;transform:rotate(-2deg)}
.tr-tile h3{font-size:18px!important;margin-top:.4em!important}
.tr-tile p:not(.tr-tile-big){font-size:14.5px;text-align:left}

/* ===== 履き替えサイクル ===== */
.tr-cycle-row{max-width:1040px;margin:0 auto!important;display:grid!important;grid-template-columns:1fr 50px 1fr 50px 1fr;align-items:center;gap:0!important}
.tr-cycle-row > *{margin:0!important}
.tr-cycle{background:#fff;border:3px solid var(--tr-k);border-radius:4px;padding:24px 18px 20px!important;text-align:center;box-shadow:6px 6px 0 var(--tr-k)}
.tr-cycle > *{margin:0 0 .3em!important}
.tr-cycle h3{font-size:28px!important;line-height:1.2}
.tr-cycle p:last-child{font-size:14.5px;text-align:left}
.tr-cycle-n{display:inline-block;font-weight:900;font-size:13px;background:var(--tr-y);border:2px solid var(--tr-k);padding:.05em .7em}
.tr-cycle-mid{background:var(--tr-k);color:#fff;box-shadow:6px 6px 0 #fff;position:relative}
.tr-cycle-mid h3{color:var(--tr-y)!important}
/* タイヤの輪（CSSで描く） */
.tr-cycle-mid::before{content:"";display:block;width:74px;height:74px;margin:0 auto 10px;border-radius:50%;
  background:radial-gradient(circle,#888 0 9px,#141414 10px 17px,#bbb 18px 21px,#141414 22px);box-shadow:0 0 0 4px var(--tr-y)}
.tr-arrow{width:0;height:0;justify-self:center;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:20px solid var(--tr-k)}

/* ===== デザイン ===== */
.tr-design-cols{max-width:1140px;margin:0 auto!important;gap:clamp(24px,4vw,48px)!important;align-items:center!important}
.tr-pc img{border:10px solid var(--tr-k);border-bottom-width:16px;border-radius:6px!important;box-shadow:12px 12px 0 var(--tr-y);display:block}
.tr-sec h3.tr-side-h{font-size:clamp(22px,2.5vw,28px)!important;line-height:1.45;margin:0 0 .6em!important}
.tr-sub-btns{margin-top:1em!important}

/* ===== かんたん編集（黒） ===== */
.tr-edit-cols{max-width:1100px;margin:0 auto!important;gap:clamp(24px,4vw,48px)!important;align-items:center!important}
.tr-edit-img img{border:4px solid var(--tr-y);border-radius:4px!important;display:block}
.tr-edit-step{display:grid!important;grid-template-columns:62px 1fr;column-gap:16px;padding:14px 0!important;border-bottom:1px solid #333;margin:0!important}
.tr-edit-step > *{margin:0!important}
.tr-step-n{grid-row:span 2;font-family:"Outfit",sans-serif;font-weight:900;font-size:40px;line-height:1;color:var(--tr-y)}
.tr-edit-step h3{color:#fff!important;font-size:19px!important}
.tr-edit-step p:not(.tr-step-n){color:#d6d6d6;font-size:15px}

/* ===== 料金チケット ===== */
.tr-ticket{max-width:640px;margin:0 auto!important;background:var(--tr-y);border:3px solid var(--tr-k);border-radius:4px;padding:30px 24px 32px!important;text-align:center;position:relative;box-shadow:10px 10px 0 var(--tr-k)}
.tr-ticket::before,.tr-ticket::after{content:"";position:absolute;top:118px;width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid var(--tr-k)}
.tr-ticket::before{left:-17px;clip-path:inset(0 0 0 50%)}
.tr-ticket::after{right:-17px;clip-path:inset(0 50% 0 0)}
.tr-ticket > *{margin:0!important}
.tr-ticket-label{font-weight:900;font-size:18px}
.tr-ticket-price{font-family:var(--tr-font);font-weight:900;font-size:26px;line-height:1}
.tr-ticket-price strong{font-family:"Outfit",sans-serif;font-size:3.6em;letter-spacing:-.02em}
.tr-ticket-price small{font-size:.6em}
ul.tr-ticket-list{list-style:none;padding:0!important;margin:20px 0 6px!important;display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}
ul.tr-ticket-list li{background:#fff;border:2px solid var(--tr-k);padding:.4em .7em .4em 2em;font-weight:900;font-size:14.5px;position:relative}
ul.tr-ticket-list li::before{content:"";position:absolute;left:.65em;top:50%;width:.9em;height:.9em;margin-top:-.45em;background:var(--tr-k);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
.tr-ticket .wp-block-button.is-style-cx-cta .wp-block-button__link{background:var(--tr-k);color:var(--tr-y);box-shadow:5px 5px 0 #fff}

/* ===== FAQ ===== */
.tr-faq details.is-style-cx-faq{border:2px solid var(--tr-k);border-radius:4px}
.tr-faq details.is-style-cx-faq summary{color:var(--tr-k)}
.tr-faq details.is-style-cx-faq summary::before{content:"Q";color:var(--tr-k);background:var(--tr-y);width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:17px;top:.75em;left:.8em}
.tr-faq details.is-style-cx-faq[open] summary{border-bottom:2px dotted #ccc;margin-bottom:.8em}
.tr-faq details a{color:#0d0d0d;font-weight:700}
.tr-faq{padding-bottom:40px!important}
.tr-more-sec{padding-top:0!important;padding-bottom:56px!important}
details.tr-more{max-width:900px;margin:0 auto!important;background:#fff;border:2px solid var(--tr-k);border-radius:4px}
details.tr-more summary{cursor:pointer;font-weight:900;padding:1em 1.2em}
details.tr-more > :not(summary){padding:0 1.2em 1.2em;margin:0;font-size:15px}

/* ===== 締め ===== */
.tr-close-box{max-width:860px!important;margin:0 auto!important;text-align:center}
.tr-close-box > *{margin-left:auto!important;margin-right:auto!important}
.tr-close-chara img{width:150px;border-radius:0!important}
.tr-sec h2.tr-close-h{color:#fff;font-size:clamp(25px,3.6vw,40px);line-height:1.45;margin:.3em 0 .4em!important}
.tr-close-h strong{color:var(--tr-y)}
.tr-close-p{font-weight:700;color:#ddd}

/* ===== スマホ ===== */
@media (max-width:781px){
  .tr-fv{text-align:center}
  .tr-fv h1{font-size:31px}
  .tr-badges{justify-content:center!important}
  .tr-badge{width:92px;height:92px;font-size:12px}
  .tr-fv .tr-btns{justify-content:center}
  .tr-fv .tr-btns .wp-block-button,.tr-fv .tr-btns .wp-block-button__link{width:100%}
  .tr-fv-cols > .wp-block-column:last-child{max-width:360px;margin:12px auto 0!important;padding-bottom:40px}
  .tr-fv-phone{left:-2%;width:36%}
  .tr-sec h2.tr-h{font-size:24px}
  .tr-lead{text-align:left}
  .tr-lead br{display:none}
  .tr-cycle-row{grid-template-columns:1fr;row-gap:6px!important}
  .tr-arrow{transform:rotate(90deg);margin:4px auto!important}
  .tr-cycle{box-shadow:4px 4px 0 var(--tr-k)}
  .tr-cycle-mid{box-shadow:4px 4px 0 #fff}
  ul.tr-ticket-list{grid-template-columns:1fr}
  .tr-ticket{box-shadow:6px 6px 0 var(--tr-k)}
  .tr-ticket-price strong{font-size:3em}
  .tr-pc img{border-width:6px;border-bottom-width:10px;box-shadow:6px 6px 0 var(--tr-y)}
  .tr-sec .tr-sub-btns .wp-block-button{width:100%}
  .tr-sec .tr-sub-btns .wp-block-button__link{width:100%}
}

@media (min-width:782px){.tr-tiles{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:781px){.tr-ticket::before,.tr-ticket::after{display:none}}
.tr-faq details.is-style-cx-faq summary{padding-left:3.7em}
.tr-badges{gap:18px!important}
@media (max-width:781px){
  .tr-sec .wp-block-button.is-style-cx-cta .wp-block-button__link{font-size:16px;padding:.9em .7em}
  .tr-yellow .wp-block-button.is-style-cx-cta .wp-block-button__link{font-size:15px}
  .tr-browser-body{background:#fff}
  .tr-browser-text{max-width:none}
  .tr-sec .tr-btns .wp-block-button{max-width:100%}
}
.tr-sec h1,.tr-sec h2,.tr-sec h3{word-break:auto-phrase}