@charset "utf-8";
/* CSS for Laufenn brand page */
/* CSS Variables */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
:root {
  /* メインカラー: 濃いパープル */
  --color-base-bg: #fff;
  /* ヘッダー/フッター用のより濃いネイビーパープル */
  --color-main: #44187f;
  /* パンくずバー用のパープル */
  --color-header-bg: #22196a;
  /* アクセントカラー: 中間の明るいパープル(バッジ・ピル) */
  --color-breadcrumb-bg: #4a2885;
  /* ハイライトカラー: CTAボタン用のピンク */
  --color-accent: #8d55cc;
  /* TOPへ戻るボタン用のビビッドバイオレット */
  --color-highlight: #e905bc;
  /* インチカラー */
  --color-cta-round: #70f;
  /* セルカラー */
  --color-inch: #7a2ad5;
  --color-cell: #b48de0;
  --color-text: #111;
  --color-text-light: #fff;
  --color-shadow: rgba(0, 0, 0, 0.2);
  /* Reset and base styles */ }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

html {
  scroll-behavior: smooth; }

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.7;
  background: var(--color-base-bg); }

a {
  color: inherit;
  text-decoration: none; }

img {
  display: block;
  max-width: 100%;
  height: auto; }

ul {
  list-style: none; }

button {
  cursor: pointer;
  font-family: "Noto Sans JP", sans-serif;
  border: none;
  background: none;
  /* 視覚的には非表示だがスクリーンリーダー/クローラーには読ませたいテキスト用 */ }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  /* br.sp: SPサイズでのみ改行、br.pc: PCサイズでのみ改行 */ }

br.sp {
  display: block; }

br.pc {
  display: none;
  /* Container */ }

.container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  /* Shutter */ }

.shutter {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-header-bg);
  z-index: 9999;
  animation: byeShutter 1.8s forwards; }

.shutter__logo {
  width: 60%;
  max-width: 360px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: byeLogo 1.8s forwards; }

@keyframes byeShutter {
  70% {
    opacity: 1; }

  100% {
    opacity: 0;
    display: none;
    z-index: -1; } }

@keyframes byeLogo {
  /* Breadcrumb bar */
  0% {
    opacity: 0; }

  30% {
    opacity: 1; }

  70% {
    opacity: 1; }

  100% {
    opacity: 0; } }

.breadcrumb-bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  background: var(--color-breadcrumb-bg);
  color: var(--color-text-light);
  padding: 4px 5px;
  font-size: 0.7rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; }

.breadcrumb-bar .breadcrumbs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap; }

.breadcrumb-bar .breadcrumbs li {
  display: inline;
  white-space: nowrap;
  color: var(--color-text-light); }

.breadcrumb-bar .breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
  color: var(--color-text-light); }

.breadcrumb-bar .breadcrumbs a {
  color: var(--color-text-light);
  text-decoration: none;
  /* Logo bar */ }

.logo-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  background: var(--color-header-bg);
  padding: 6px 16px; }

.logo-bar__link img {
  height: 22px;
  width: auto;
  /* Hero (TOP page)
 * hero__contentはFV画像の中央上に配置し、画像全体にcolor-breadcrumb-bgの
 * 半透明(30%)フィルターを重ねる
 */ }

.hero {
  position: relative;
  min-height: 350px;
  height: 93vw;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  padding: 15vw 6% 0;
  background: url("/autoway/dp/brand/laufenn/img/bg_fv_sp.jpg") no-repeat center center / cover; }

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* color-breadcrumb-bg(#4a2885)の30%不透明度。
     opacityプロパティを使うと背景画像ごと描画されなくなる表示不具合があるためrgba()で直接指定する */
  z-index: 0;
  background: rgba(74, 40, 133, 0.3);
  pointer-events: none; }

.hero__content {
  position: relative;
  z-index: 1;
  filter: drop-shadow(2px 2px 2px rgba(47, 47, 47, 0.57)); }

.hero__logo {
  width: 75vw;
  max-width: 570px;
  margin: 0 auto 5vw; }

.hero__subtitle {
  width: 80vw;
  max-width: 620px;
  /* Section styles */ }

.section {
  padding: 48px 0 10px;
  position: relative; }

.section__header {
  text-align: left;
  font-weight: 700;
  margin-bottom: 24px; }

.section__title {
  font-size: 30px;
  color: var(--color-main);
  line-height: 1.2;
  transform: skewX(-10deg); }

.section__subtitle {
  font-size: 16px;
  color: var(--color-text);
  transform: skewX(-10deg);
  /* About Laufenn */ }

.section--about {
  background: url("/autoway/dp/brand/laufenn/img/bg_about.jpg") no-repeat center center / contain; }

.about__catch {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 16px; }

.about__text {
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: -0.05em;
  color: var(--color-text);
  /* Line up */ }

#lineup .container {
  width: 90%; }

.products {
  display: flex;
  flex-direction: column;
  gap: 24px; }

.product-card {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
  /* スクロールで下からふわっと表示するアニメーション(js/main.jsでis-visibleを付与) */
  box-shadow: 2px 2px 10px var(--color-shadow);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease; }

.product-card.is-visible {
  opacity: 1;
  transform: translateY(0); }

.product-card__badge {
  background: var(--color-accent);
  color: #fff;
  font-size: 32px;
  font-weight: 900;
  text-align: left;
  padding: 0 20px; }

.product-card__badge-text {
  display: inline-block;
  transform: skewX(-10deg);
  /* バッジと同じアクセント背景を共有し、タイヤ画像は下半分をクロップする */ }

.product-card__image-wrap {
  background: var(--color-accent);
  padding: 0 20px;
  overflow: hidden;
  aspect-ratio: 2.15; }

.product-card__image {
  max-width: 80%;
  margin: 0 auto; }

.product-card__name {
  padding: 20px 20px 0; }

.product-card__logo {
  height: 26px;
  margin: 0 auto; }

.product-card__ruby {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-main);
  margin-top: 10px;
  line-height: 1; }

.product-card__range {
  display: inline-block;
  background: var(--color-inch);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 3px 16px;
  border-radius: 20px;
  margin: 12px auto 16px; }

.product-card__desc {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--color-breadcrumb-bg);
  padding: 0 16px;
  margin-bottom: 16px;
  line-height: 1.5;
  height: 3em; }

.product-card__cars {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 0 16px 20px; }

.product-card__car {
  display: flex;
  flex-direction: column;
  align-items: center; }

.product-card__car-icon {
  height: 40px; }

.product-card__car-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-main);
  /* product-card内で独立したボタンとして見えるよう余白と角丸を付ける */ }

.product-card__button {
  display: block;
  width: 250px;
  margin: 0 auto 30px;
  background: var(--color-main);
  color: #fff;
  padding: 5px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 900;
  box-shadow: inset -2px -2px 2px rgba(0, 0, 0, 0.2);
  transition: 0.3s; }

.product-card__button .nav__label {
  display: block; }

.product-card__button .nav__label small {
  display: block;
  font-size: 16px; }

.product-card__button:hover {
  background: #fff;
  color: var(--color-main);
  /* 無断転載禁止バッジ */ }

.copyright-notice {
  text-align: right;
  margin-top: 24px; }

.copyright-notice span {
  display: inline-block;
  background: #5e5e5e;
  color: #fff;
  font-size: 14px;
  padding: 4px 10px;
  /* Top button */ }

.to-top {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-cta-round);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  z-index: 5;
  box-shadow: 2px 2px 6px var(--color-shadow); }

.to-top a {
  display: block;
  width: 100%;
  color: #fff; }

.to-top a::before {
  content: '';
  display: block;
  width: 25px;
  height: 23px;
  /* アイコンをmaskで描画し、背景色をcurrentColorにすることでhover時の色反転に追従させる */
  margin: 3px auto 2px;
  background-color: currentColor;
  -webkit-mask: url("/autoway/dp/brand/laufenn/img/icon_top_arrow.svg") no-repeat center / contain;
  mask: url("/autoway/dp/brand/laufenn/img/icon_top_arrow.svg") no-repeat center / contain; }

.to-top:hover {
  transition: opacity 0.3s, background-color 0.3s, color 0.3s;
  background: #fff;
  color: var(--color-cta-round); }

.to-top:hover a {
  color: var(--color-cta-round);
  /* Footer */ }

.footer {
  background: var(--color-header-bg);
  padding: 38px 0 0;
  color: #fff; }

.footer__logos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding-bottom: 38px; }

.footer__logos img {
  max-width: 100%; }

.footer__logos .laufenn {
  height: 27px; }

.footer__logos .footer__handshake {
  height: 57px; }

.footer__logos .aw {
  height: 47px; }

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: center;
  background: var(--color-breadcrumb-bg);
  padding: 16px 20px;
  font-size: 14px; }

.footer__links a {
  color: var(--color-text-light);
  text-decoration: none; }

.footer__copyright {
  text-align: center;
  font-size: 0.7rem;
  background: var(--color-breadcrumb-bg);
  padding: 12px 0;
  color: var(--color-text-light);
  /* Media Queries */ }

@media (min-width: 768px) {
  body {
    font-size: 16px; }

  br.sp {
    display: none; }

  br.pc {
    display: block; }

  .hero {
    min-height: 420px;
    height: 50vw;
    align-items: center;
    justify-content: flex-end;
    padding: 0 6% 0 0;
    background-image: url("/autoway/dp/brand/laufenn/img/bg_fv_pc.jpg"); }

  .hero__logo {
    width: 57vw; }

  .hero__subtitle {
    width: 62vw; }

  .section__title {
    font-size: 48px; }

  .section__subtitle {
    font-size: 18px; }

  .about__catch {
    font-size: 28px; }

  .about__text {
    font-size: 18px;
    text-align: center; }

  .products {
    max-width: 850px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px; }

  .product-card {
    border-radius: 20px; }

  .product-card__badge {
    font-size: 36px; }

  .product-card__logo {
    height: 28px; }

  .product-card__ruby {
    font-size: 14px; }

  .product-card__range {
    font-size: 16px; }

  .product-card__button {
    font-size: 20px;
    border-radius: 20px; }

  .product-card__button .nav__label small {
    font-size: 20px; }

  .copyright-notice {
    margin-top: 60px; }

  .footer__logos {
    flex-direction: row;
    gap: 30px; }

  .footer__logos .laufenn {
    height: 25px; }

  .footer__logos .footer__handshake {
    height: 60px; }

  .footer__logos .aw {
    height: 45px; }

  .footer__copyright {
    font-size: 14px; } }

@media (min-width: 1024px) {
  .hero {
    max-height: 500px; }

  .hero__logo {
    margin: 0 auto 50px; }

  .container {
    max-width: 960px; }

  .section--about {
    background-size: 960px; } }

@media (min-width: 1440px) {
  .to-top {
    right: calc(50% - 704px); } }

@media (min-width: 1080px) {
  .hero {
    padding-right: calc(50% - 475px); } }

@media (min-width: 1366px) {
  .hero {
    max-width: 1366px;
    margin: 0 auto;
    padding-right: 208px; }

  .breadcrumb-bar {
    padding-left: calc((100vw - 1366px) / 2 + 5px); }

  .logo-bar {
    padding-right: calc((100vw - 1366px) / 2 + 16px); } }