/* =========================
   Hero
   ========================= */
.hero{
  padding: 0 0 8px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,212,0,.35), transparent 45%),
    radial-gradient(circle at 70% 30%, rgba(26,162,255,.22), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,212,0,.12));
}
.hero .header-sale-banner-link{
  margin-top: 0;
}
@media (min-width: 861px){
  .hero .header-sale-banner-link{
    display: flex;
    justify-content: flex-end;
  }
}

.hero-container{
  opacity: 0;
  transition: opacity 1.2s ease;
  will-change: opacity;
}
.hero-container.is-visible{
  opacity: 1;
}

.hero-card{
  background: var(--paper);
  border: var(--border);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* hero-image: 初期は透明 → 表示でフェードイン */
.hero-picture,
.hero-image{
  width: 100%;
  height: auto;
}

.hero-image{
  opacity: 1;
  transition: opacity 1.8s ease; /* ゆっくり */
  will-change: opacity;  
}

.hero-picture{
  display: block;
  aspect-ratio: 1024 / 1955;
}

.hero-picture .hero-image{
  height: 100%;
  object-fit: contain;
  display: block;
}

.hero-image.is-fadein{
  opacity: 1;
}

/* ユーザーがアニメを減らしたい設定の場合 */
@media (prefers-reduced-motion: reduce){
	.hero-picture,
  	.hero-image {
    	transition: none;
  	}
  .hero-sp-overlay{
    animation: none;
    opacity: 1;
  }
  .hero-sp-overlay--second{
    animation: none;
    opacity: 1;
  }
  .hero-image{
    animation: none;
    opacity: 1;
  }
}

@media (max-width: 480px){
  .hero-picture{
    aspect-ratio: 788 / 2522;
  }
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 10px;
}


.hero-badges{
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-badges li{
  padding: 8px 10px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 700;
}

/* トップ画像上にクリック領域を置く */
.hero-figure-wrap{
  position: relative;
}

.hero-sp-overlay{
  position: absolute;
  left: 49%;
  top: 55%;
  width: 70%;
  transform: translate(-50%, -50%);
  opacity: 0;
  display: none;
  pointer-events: none;
  z-index: 2;
}

.hero-sp-overlay--second{
  z-index: 3;
  top: calc(50% - 130px);
}

@keyframes st1OverlayFade{
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes st1OverlaySlideInRightSp{
  from { opacity: 0; transform: translate(-30%, -50%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes st1OverlaySlideInRight{
  from { opacity: 0; transform: translate(-30%, -50%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes st1OverlaySlideInLeft{
  from { opacity: 0; transform: translate(-70%, -50%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes st1HeroSlideInRight{
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes st1OverlayBlink{
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* 右下「料金/車体について」ボタン付近をクリック可能に */
.hero-hotspot-price{
  position: absolute;

  /* だいたい右下の青いボタン位置（必要に応じて微調整） */
  right: 6%;
  bottom: 5%;
  width: 50%;
  height: 10%;
  display: block;
  border-radius: 16px;
}

/* 右下「LINEでカンタン申し込み」ホットスポット */
.hero-hotspot-line{
  position: absolute;
  right: 6%;
  top: 23%;
  width: 26%;
  height: 12%;
  display: block;
  border-radius: 16px;
}

@media (max-width: 480px){
  .hero-hotspot-price{
    right: 6%;
    bottom: 2%;
    width: 50%;
    height: 5%;
  }

  .hero-hotspot-line{
    right: 6%;
    top: 14%;
    width: 25%;
    height: 7%;
  }
  .hero { 
    padding-top: 8px; 
   }  

  .hero-sp-overlay{
    display: block;
    animation: st1OverlaySlideInRightSp 1.2s ease forwards;
  }

  .hero-sp-overlay--second{
    animation: st1OverlaySlideInLeft 1.2s ease forwards,
               st1OverlayBlink 1s steps(1, end) 5 1.2s;
  }
}

@media (min-width: 481px){
  .hero-image{
    opacity: 0;
    animation: st1HeroSlideInRight 1.2s ease forwards;
  }
}

/* デバッグ用（合わせ終わったら消してOK） */
/* .hero-hotspot-price{ outline: 3px dashed rgba(255,0,0,.5); }  */

/* =========================
   points
   ========================= */
/* 背景セクション */
.points-section .container {
  background: url("../assets/ST1_back_3.png") center top / cover no-repeat;
  padding: 24px 0 48px;
  overflow: hidden; /* スライドインで横に揺れないように */
}

/* これを変更：min(100%, 980px) を撤廃して container 幅に揃える */
.points-stack{
  width: 100%;                 /* ← hero と同じ container 幅に揃う */
  margin: 0;                   /* container が中央寄せしている前提 */
  padding-top: 32%;/*clamp(48px, 7vw, 140px);*/
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
}

/* カード自体を中央寄せ */
.point-card{
  display: flex;
  justify-content: center;
}

/* 画像を最大80%で表示（比率維持） */
.point-card img{
  width: 86%;
  max-width: 86%;
  height: auto;
  display: block;
}

/* --- スライドインアニメ --- */
.js-slidein{
  opacity: 0;
  transform: translateX(64px);
  transition: opacity 900ms ease, transform 900ms ease;
  will-change: opacity, transform;
}
.js-slidein.from-left{ transform: translateX(-64px); }

.js-slidein.is-inview{
  opacity: 1;
  transform: translateX(0);
}

/* ちょい差で気持ちよく（任意） */
.points-stack .js-slidein:nth-child(1){ transition-delay: 0ms; }
.points-stack .js-slidein:nth-child(2){ transition-delay: 120ms; }
.points-stack .js-slidein:nth-child(3){ transition-delay: 240ms; }

/* 「詳しくはこちら」ホットスポット（位置は画像に合わせて微調整） */
.point-card--link{
  cursor: pointer;
  position: relative;
}
.point2-hotspot{
  position: absolute;
  /* 画像内のボタン位置に合わせて調整（まずは赤枠で確認） */
  right: 14%;
  bottom: 17%;
  width: 42%;
  height: 18%;
  border-radius: 14px;
  background: transparent;
  border: none;
  padding: 0;
}

.point2-hotspot--full{
  inset: 0;
  width: auto;
  height: auto;
  right: auto;
  bottom: auto;
  border-radius: 16px;
}

/* Point2 modal open: lock page scroll */
html.is-scroll-locked,
body.is-scroll-locked{
  height: 100%;
  overflow: hidden;
}

body.is-scroll-locked{
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}

/* 当たり確認用（調整後に消してOK） */
/* .point2-hotspot{ outline: 3px dashed rgba(255,0,0,.55); }  */

/* Point2 popup */
.point2-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.point2-modal.is-open{
  display: flex;
}
.point2-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}
.point2-modal__panel{
  position: relative;
  width: min(92vw, 600px);
  max-height: 98vh;
  height: 98vh;
  background: #fff;
  border: 2px solid #111;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  padding: 18px 16px 14px;
  z-index: 1;
  transform: scale(.92);
  opacity: 0;
  animation: point2ZoomIn .55s ease forwards;
}
.point2-title{
  font-size: clamp(20px, 2.4vw, 32px);
  margin: 6px auto 12px;
}
.point2-title .section-title__icon{
  height: 56px;
}
.point2-title.section-title--spec::before{
  height: .55em;
  background: color-mix(in oklab, currentColor 18%, transparent);
  border-radius: 10px;
}
.point2-modal__close{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}
.point2-slider{
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  max-height: calc(98vh - 170px);
}
.point2-slider__track{
  display: flex;
  width: 100%;
  transition: transform .35s ease;
  will-change: transform;
}
.point2-slide{
  width: 100%;
  flex: 0 0 100%;
}
.point2-slide img{
  width: auto;
  height: auto;
  max-width: 98%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}
.point2-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.point2-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid #111;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.point2-dot.is-active{
  background: #111;
}

@keyframes point2ZoomIn{
  from { transform: scale(.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@media (max-width: 480px){
  .points-stack{
    padding-top: 32%; /*clamp(28px, 8vw, 80px);*/
  }

  .point2-modal{
    align-items: flex-start;
  }

  .point2-modal__panel{
    height: auto;
    max-height: 80svh;
    padding: 14px 12px 12px;
    margin-top: 6svh;
  }

  .point2-slider{
    max-height: none;
  }

  .point2-slide img{
    max-width: 92%;
    max-height: 60svh;
  }
}

/* =========================
   howto
   ========================= */
/* 手続きの流れ */
/* 背景セクション */
.howto-section .container {
  background: url("../assets/ST1_back_4.png") center top / cover no-repeat;
  padding: 24px 0 48px;

}

.howto-stack{
  width: 100%;
  margin: 0;  
  padding-top: 30%;
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
}

/* カード自体を中央寄せ */
.howto-card {
	position: relative; 
  display: flex;
  justify-content: center;
}

.howto-card img{
  width: 86%;
  max-width: 86%;
  height: auto;
  display: block;
}

/* 「詳しくはこちら」ホットスポット（位置は画像に合わせて微調整） */
.howto-card--link{ cursor: pointer; }
.howto-hotspot{
  position: absolute;
  /* 画像内のボタン位置に合わせて調整（まずは赤枠で確認） */
  left: 6%;
  bottom: 12%;
  width: 32%;
  height: 26%;
  border-radius: 14px;
}

/* 当たり確認用（調整後に消してOK） */
/* .howto-hotspot{ outline: 3px dashed rgba(255,0,0,.55); }  */

@media (max-width: 480px){
  .howto-stack{
    padding-top: 26%; /*clamp(28px, 8vw, 80px);*/
  }
  html, body{
    overflow-x: hidden;
  }

  .howto-section .container{
    overflow-x: hidden;          /* 念のため */
    background-size: contain;
  }

  .howto-card{
    max-width: 100%;
    overflow: hidden;            /* hotspot/outlineがはみ出しても切る */
  }

  .howto-card img{
    width: 86%;
    max-width: 86%;
    height: auto;
  } 
}

/* =========================
   Infomation お知らせ
   ========================= */
.infomation-section .container {
  	background        : url("../assets/ST1_back_5.png") center top / cover no-repeat;
  	padding           : 24px 0 48px;

}

#about{
  scroll-margin-top: 90px;
}

.infomation-stack{
  	width          : 100%;
  	margin         : 0;  
  	padding-top    : 30%;
  	display        : grid;
  	gap            : clamp(18px, 2.6vw, 30px);
}

.about-list-with-icon{
  display: block;
}
.about-list-icon{
  width: 100px;
  height: auto;
  display: block;
  margin: 10px auto 0;
}

@media (max-width: 900px){
  #about .grid.two{
    grid-template-columns: 1fr;
  }
}

#about .section-title{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* 重要なお知らせ */
#site-important-notice{
  padding: 24px 0;
}
#site-important-notice .top-message{
  margin-top: 24px;
}
#importantNotice{
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  padding: 15px;
  color: #000;
  background-color: #fff;
  text-align: center;
  border: 2px solid rgb(0 75 125);
  box-sizing: border-box;
  overflow: hidden;
}
#importantNotice .title{
  font-size: 20px;
  font-weight: 700;
}
#importantNotice ._mpv_paragraphContentText{
  margin: 5px 5px 50px 5px !important;
}


/* infomation list styling (importantNotice用) */
.infomation ._mtl_articleMessage{
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: 10px;
  box-sizing: border-box;
  background-color: #fff;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 2px solid #b3424a !important;
  border-top: none !important;
  border-radius: 0 !important;
  padding-bottom: 20px;
}
.infomation ._mtl_articleMessage ._mtl_messageArea{
  position: absolute;
  z-index: 10;
  margin-left: calc(5% - 10px);
}
.infomation ._mtl_articleMessage ._mtl_messageArea label{
  color: #f55;
  font-size: 8pt;
  padding-left: 10px;
}
.infomation ._mtl_articleMessage ._mtl_profilePhoto,
.infomation ._mtl_articleMessage ._mtl_articleTools{
  display: none;
}
.infomation .date{
  font-size: 16px;
  margin: 15px 15px;
}
.infomation ._mtl_articleHead .title{
  display: none;
}
.infomation ._mtl_articleMessage ._mtl_articleContent,
.infomation ._mbp_article ._mtl_articleContent{
  position: relative;
  clear: both;
  width: 96% !important;
  margin: 5px 10px 5px 10px !important;
}

/* 中央寄せ */
.infomation-list {
	  position       : relative; 
    margin-top     : 50px;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    width          : 100%;
}
.infomation-list.zoom-in{
  opacity: 0;
  transform: scale(.92);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
  will-change: opacity, transform;
}
.infomation-list.zoom-in.is-animated{
  opacity: 1;
  transform: scale(1);
}

.news-list {
  	margin: 0 0 20px;
  	padding: 0;
  	list-style: none;
  	width: min(860px, 92%);
}

.news-list a,
.news-list a:hover,
.news-list a:focus,
.news-list a:focus-visible,
.news-list a:active {
  text-decoration: none !important;
}

.news-list > li,
.news-list > ._mtl_articleMessage {
  	background-color: #fffdf0;
  	border: 2px solid rgba(0,0,0,.15);
  	border-radius: 14px;
  	padding: 14px 18px;
  	margin-bottom: 14px;
  	box-shadow: 0 4px 0 rgba(0,0,0,.08);
  	cursor: pointer;
}

.show-more-item {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.show-more-item button {
	border: 2px solid rgba(0,0,0,.2);
	background: #fffdf0;
	border-radius: 999px;
	padding: 8px 18px;
	font-weight: 700;
	cursor: pointer;
}

.news-list .date2 {
  float: left;
  font-size: 0.9rem;
  color: #333;
  margin: 0 10px 5px 0;
  line-height: 1.5;
}

.news-list .category {
  float: left;
  margin: 0 8px 5px 0;
  background-color: #5cc2dc;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1.5;
  font-size: 0.8rem;
}

.news-list ._mtl_articleHead .title {
  clear: both;
  font-size: 1rem;
  color: #111;
  text-align: left;
  line-height: 1.4;
  margin-top: 6px;
}

/* バッジ＋日付を並べる行 */
.news-list .meta-line {
   display: flex;
   margin-bottom: 6px;
   align-items: center;
   gap: 10px;
}

.badge {
  	display: inline-block;
  	width: 60px;
  	padding: 2px 0;
  	text-align: center;
  	font-size: 0.75rem;
  	font-weight: bold;
  	border-radius: 12px;
  	color: #fff;
  	flex-shrink: 0;
}
.badge.news { background-color: #ff6f61; }
.badge.info { background-color: #4db6ac; }
.badge.story { background-color: #9575cd; }

/* 日付 */
.news-list .date {
  	font-size: 0.9rem;
  	color: #333;
  	flex-shrink: 0;
}

/* タイトル */
.news-list .news-text {
  	font-size: 1rem;
  	color: #111;
  	text-align: left;
  	line-height: 1.4;
}

.newMark {
    float: left;
    display: block;
    position: relative;
    width: 64px;     
    margin-bottom: 0px;
    margin-top: 0px;
}

.newMark img {
	width: 100%;
}

@media (max-width: 480px){
	.infomation-stack{
    	padding-top: 26%;
  	}
  	html, body{
    	overflow-x: hidden;
  	}

 	.infomation-section .container{
    	overflow-x: hidden;    
    	background-size: cover;
    	background-position: center top;
  	}

  	.infomation-list {
    	max-width: 100%;
    	overflow: hidden;
  	}

  	.news-list > li,
  	.news-list > ._mtl_articleMessage {
    	padding: 12px 14px;
  	}

  	.news-list .meta-line {
    	flex-wrap: wrap;
    	justify-content: flex-start;
    	gap: 6px;
  	}

  	.news-list .news-text {
    	font-size: 0.95rem;
  	}
  
	.news-list .newMark {
	    width: 50px;     
	    margin-bottom: -6px;
	    margin-top: -6px;
	}

  .news-list .date2 {
    margin: 0 10px 5px 0;
    line-height: 1.5;
  }

  .news-list .category {
    margin: 0 5px 5px 0;
    padding: 2px 6px;
    line-height: 1.2;
    font-size: 0.75rem;
  }
}






/* アニメーション関係 */
/* Zoom-in animation */


.hero-figure-wrap.zoom-in{
  opacity: 0;
  transform: scale(.5);
  transition: opacity .8s ease-out, transform .8s ease-out;
  will-change: opacity, transform;
}

.hero-figure-wrap.zoom-in.is-animated{
  opacity: 1;
  transform: scale(1);
}