@charset "utf-8";

/* Wheelsystem Landing 専用の最小カスタム。既存 style-jp.css を尊重し、差分のみ定義 */

.wheelsystem .key-visual {
  background: url(../images/ws-keyvisual.png) no-repeat center bottom / cover;
  width: 100%;
  height: 350px;
  position: relative;
}

.wheelsystem .site-logo {
  position: absolute;
  display: block;
  content: "";
  top: 40px;
  left: 15%;
  width: 153px;
  height: 48px;
  z-index: 3;
}
.wheelsystem .page-ttl{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-top: 60px;
}
.wheelsystem .page-ttl img {
  width: 100%;
  height: auto;
  vertical-align: inherit;
  margin-right: 0;
}
.wheelsystem .page-ttl .product-name{
  display: block;
  width: 70%;
}


#sec-wheelsystem-info {
  padding: 60px 0;
}
.section-ws-ttl {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 40px;
}

.ws-hero { text-align: center; padding: 40px 0; }
.ws-hero__wheel { display: flex; justify-content:space-between; margin-bottom: 48px; }
.ws-hero__wheel-img { width: 320px; }
.ws-hero__wheel-img img { width: 100%; height: auto; }
.ws-hero__wheel-desc { width: 620px; padding-top: 20px; text-align: left; font-size: 16px; line-height: 30px; }
.ws-hero__running-img { max-width: 650px; margin: 0 auto;}
.ws-hero__running-img img { width: 100%; height: auto; }

.ws-diagram .col { flex-basis: 50%; }
.ws-diagram .col .ws-diagram__ttl { margin-bottom: 0; font-size: 20px; color: #cc0000; }
.ws-diagram .col .ws-diagram__img { width: 100%; }
.ws-diagram .col .ws-diagram__img img { width: 100%; height: auto; }

.ws-overview__bnr { width: 600px; margin: 0 auto 20px; }
.ws-overview__bnr a { display: block; background: #cc0000; color: #fff; padding: 16px; text-align: center; font-size: 20px; }
.ws-overview__bnr a:hover { background: #333333; color: #fff; text-decoration: none; }

#sec-developer-message{ background: #646464; color: #fff; padding: 20px 0 30px; }
.ws-developer-head{ display: flex; width: 950px; margin: 0 auto 30px; color: #fff; }
.ws-developer-head__ttl{ width: 50%; padding-top: 40px; }
.ws-developer-head__ttl h3{ font-size: 32px; font-weight: bold; }
.ws-developer-head__profile{ display: flex; width: 50%; justify-content: flex-end; align-items:flex-end; }
.ws-developer-head__profile-name{ margin-bottom: 10px; font-size: 20px;}
.ws-developer-head__profile-desc{ font-size: 16px; }
.ws-developer-head__profile-img{ width: 250px; height: 250px; }
.ws-developer-head__profile-img img{ width: 250px; height: auto; }

.en .ws-developer-head__ttl{ width: 60%; }
.en .ws-developer-head__profile{ width: auto; }
.en .ws-developer-head__profile-text{ width: calc(100% - 250px); }


.ws-balloon-list { max-width: 950px; margin: 0 auto; }
.ws-balloon-item { position: relative; background: #ffffff; color: #333; padding: 35px 50px; margin: 0 0 32px; border-radius: 20px; }
.ws-balloon-item:before {
  content: "";
  position: absolute;
  top: 100%;
  left: clamp(0%,96.5% - (1 - 0.6)*3em/2,100% - (1 - 0.6)*3em);
  width: 2.8em;
  height: 1.6em;
  background: inherit;
  border-bottom-left-radius: 100%;
  -webkit-mask: radial-gradient(calc(0.6*100%) 120% at 100% 0,#0000 99%,#000 101%);
}
.ws-balloon-ttl { font-size: 18px; color: #cc0000; margin: 0 0 1em; font-weight: bold; }
.ws-balloon-item p { margin: 0; line-height: 30px; }

.ws-profile { text-align: right; margin-bottom: 16px; }
.ws-profile__thumb { display: inline-block; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; background: #e1e1e1; }
.ws-profile__thumb img { width: 100%; height: auto; display: block; }

#sec-users-voice{ background: #e6e6e6; color: #000; padding: 20px 0 30px; }
.ws-voice-head{ display: flex; width: 950px; margin: 0 auto 30px; }
.ws-voice-head__ttl{ display:flex; flex-wrap: wrap; align-content: space-between; width: 50%; padding-top: 40px; }
.ws-voice-head__ttl h3{ font-size: 32px; font-weight: bold; }
.ws-voice-head__ttl p{ font-size: 18px; line-height: 1.6; }
.ws-voice-head__ttl span{ font-size: 16px; }
.ws-voice-head__profile{ display: flex; width: 50%; justify-content: flex-end; align-items:flex-end; }
.ws-voice-head__profile-name{ margin-bottom: 10px; margin-right: -28px; font-size: 20px;}
.ws-voice-head__profile-name span{ font-size: 18px; }
.ws-voice-head__profile-img{ width: 250px; height: 250px; }
.ws-voice-list { max-width: 1000px; margin: 0 auto; }
.ws-voice-item { background: #ffffff; padding: 20px; margin: 0 0 16px; border-radius: 6px; }


#sec-rental{ background: #fff; color: #000; padding: 60px 0; }
.ws-rental{ width: 950px; margin: 0 auto; padding-top: 20px; }
.ws-rental p{ margin-bottom: 0.5rem; }
.ws-rental p.att{ margin-top: 2rem; padding-left: 0.5em; font-size: 14px; }

.ws-rental ul{ margin-bottom: 2rem; padding-left: 24px; list-style-type: none; }
.ws-rental ul li{ margin-bottom: 0.5em; }
.ws-rental ul li span{ font-size: 14px; }
.order-btn-area.ws-rental-btn a { background-image: none; }
.order-btn-area.ws-rental-btn a:hover  { background-image: none; }


.ws-rental-doc__btn{ display: block; width: 300px; margin: 0 auto; }
.en .ws-rental-doc__btn{ width: 470px; }
.ws-rental-doc__btn:first-of-type{ margin: 30px auto 20px; }
.ws-rental-doc__btn a {
  display: block;
  background: #cc0000;
  color: #fff;
  padding: 14px;
  text-align: center;
  font-size: 22px;
}
.ws-rental-doc__btn a:hover {
  background: #333333;
  color: #fff;
  text-decoration: none;
}

/* スムーススクロール（CSSでの挙動補助） */
html { scroll-behavior: smooth; }