@charset "utf-8";
/* CSS Document */

/*共通スタイル*/
html{
	font-size: 62.5%;
	overflow-x: hidden; /* 横スクロールを無効化 */
}


body{
	margin: 0;
	padding: 0;
	color: #444444;
	font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 1.6;
	letter-spacing: 0.08rem;
	box-sizing: border-box; /* パディングとボーダーを含めて幅を計算 */
	overflow-x: hidden; /* 横スクロールを無効化 */
}


* {
    box-sizing: border-box
  } 

h1,h2,h3,h4,h5,h6,div,p,ul,li,a,dl,dt,dd{
	margin: 0;
	padding: 0;
}

img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

ul{
	list-style: none;
}

body a{
	text-decoration: none; 
	color: #444444;
}
a:visited{
	color:#444444;
}

.content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.flex_wrapper{
  /* 中身を中央揃えにするための設定 */
  display: flex;
  flex-direction: column;
  align-items: center; 	
}

section{
	margin-bottom: 100px;
}

@media (max-width: 768px) {
	section{
		margin-bottom: 30px;
	}
	}

/*フォント*/
h1,h2,h3,h4,h5,h6{
	font-weight: normal;
}

h2{
	font-size: 3rem;	
}

h3{
	font-size: 2rem;
}
h4{
	font-size: 1.6rem;
}


/* スマホのみ表示---------スマホ向けのスタイル */
@media (max-width: 768px) {
  .pc_none {
    display: block;
  }
}

/* スマホのみ表示---------PC向けのスタイル */
@media (min-width: 769px) {
  .pc_none {
    display: none;
  }
}

/* PCのみ表示----------スマホ向けのスタイル */
@media (max-width: 768px) {
  .sp_none {
    display: none; /* スマホでは非表示 */
  }
}

/* PCのみ表示--------向けのスタイル */
@media (min-width: 769px) {
  .sp_none {
    display: block; /* PCでは表示 */
  }
}


/*------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------*/
/*-----------ヘッダー-------------------------------------------------------------------*/
.lp_header_inner {
  background-color: black; 
  color: white; 
  padding: 5px 20px; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed; 
  top: 0;
  width: 100%; 
  max-width: 100%; 
  z-index: 1000; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  box-sizing: border-box; 
}

.logo_h1 {
  display: flex;
  align-items: center;
  white-space: nowrap; 
  flex-shrink: 1; 
}

.logo img {
  width: clamp(10px, 10vw, 70px);
  height: auto;
  margin-right: 10px; 
}

.lp_header h1 {
  color: white;
  font-size: clamp(1rem, 4vw, 2rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp_header .pc-cta{
	display: flex;
	gap: 8px;
}

.lp_header .cta-btn {
  display: flex;
  height: 52px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 2.2rem;
  padding:5px 50px;
  text-decoration: none;
  border-radius: 100px;
  color: #fff;
  background-color: #d86227;
　overflow: hidden;
　text-overflow: ellipsis;
}

@media (max-width: 960px) {
  .lp_header h1 {
    font-size: clamp(0.8rem, 3vw, 1.5rem);
  }

  .lp_header_inner {
    padding: 5px 10px;
  }

  .logo_h1 {
    flex-wrap: wrap;
  }
}

a.contact_btn {
    color: #ffffff;
}

@media (max-width: 960px) {
  .lp_header .pc-cta{
    display: none;
  }
	
	.logo img{
		margin-right: 0;
	}
}


/*ーーーースマホCTAボタンーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/* フローティングCTA */
.floating-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  gap: 3px;
  padding: 10px 5px calc(10px + env(safe-area-inset-bottom));
  z-index: 999;
}

.floating-cta .cta-btn{
  flex: 1;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: clamp(1.2rem, 4.5vw, 1.7rem);
  padding: 0 clamp(8px, 2vw, 12px);
  text-decoration: none;
  border-radius: 100px;
  color: #fff;
  background-color: #d86227;
　overflow: hidden;
　text-overflow: ellipsis;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  border: 3px solid #333;
}

@media (min-width: 960px) {
  .floating-cta {
    display: none;
  }
}


/*------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    body {
        font-size: 1.5rem; 
		line-height: 1.5;
    }

	h2{
		font-size: 1.8rem;
	}

	h3{
		font-size: 1.8rem;
	}
	h4{
		font-size: 1.6rem;
	}

    small {
        font-size: 1rem; 
    }
	
}


/*-------2カラム------------------------------------------*/
.col2_block,.col2_lock_block {
    display: flex;
    flex-wrap: wrap; 
	margin: 20px 0 10px 0;
}

.col2_item {
    flex: 1 1 48%;
    margin: 1%;
    display: flex;
    flex-direction: column;
}
@media screen and (max-width: 768px) {
     .col2_block {
         display: flex;
		 flex-direction: column;
     }
     .col2_block .col2_item {
         width: 100%;
         margin: 10px auto;
     }
 }




/*-------3カラム------------------------------------------*/

.col3_block {
  display: flex;
  gap: 15px;
  margin: 10px 0; 
}

.col3_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.bg_blue .col3_block{
	gap:10px;
}

.col3_item img {
  width: 100%;
  margin: 0 auto;
}

.col3_item h3{
	text-align: center;
	margin: 10px auto;
	font-weight: 500;
}

@media screen and (max-width: 768px) {
  .col3_block {
    flex-direction: column; 
    gap: 20px;             
  }
}


/*-----EVシーン-----------------------------------------------------------------*/
.scene_card,.point_card{
    border-radius: 30px;
}

.scene_card{
	background-color: #BCE2E8;
    padding:2%;
}

.scene_card h3{
	font-weight: 600;
	font-size: 2.1rem;
}

@media screen and (max-width: 768px) {
.scene_card,.bg_img_point .point_card{
    border-radius: 15px;
    padding:8%;
}
	.scene_wrapper{
		min-height: 2000px;
	}
} 

/*-----EV体験でわかること-----------------------------------------------------------------*/
.arch_bg_point{
  width: 100%;
  height: 130px; 
  background-color: #bfe7f1;
  clip-path: ellipse(68% 300% at 50% 300%);
  margin-bottom: -1px;
}

@media screen and (max-width: 768px) {
.arch_bg_point {
        clip-path: ellipse(80% 300% at 50% 330%);
        height: 100px;}
}

.bg_img_point{
  background-image: url("https://www.stern-tennoji.co.jp/datas/images/2026/03/21/0bea4dd9040ba8a37baa1ec389593a482de86c61.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  padding-bottom: 100px;
}



.h2_img{
	max-width: 50%;
	margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
.h2_img{
	max-width: 90%;
	margin-bottom: 10px;
 }
.bg_img_point{
  padding-bottom: 20px;
}	
}

.point_card{
    justify-content: space-between;
	text-align: left;
	background-color: #fff;
    padding:4% 3%;
}

.point_card h3{
  display: flex;
  align-items: center;
  min-height: 3em;
  margin-top: 15px;	
  text-align: left;
  font-size: 3rem;
  line-height: 1.3;
  align-self: flex-start;
  width: 100%;
}

.point_card p{
  min-height: 8em; 
  margin-bottom: auto; 
}

.point_card img{
	max-width: 65%;
}

.col3_item.point_card span{
    margin-left: 0;	
    margin-top: 10px;
}

@media screen and (max-width: 768px) {
	.point_card h3{
		font-size: 2.6rem;
		min-height: 2em;
	}
	
	.point_card p{
		min-height: auto;
	}
	
}
	
/*---過去キャンペーン参加者の声----------------------------------------- */
.bg_img_voice{
  background-image: url("https://www.stern-tennoji.co.jp/datas/images/2026/03/21/db43fa60f5dfef3dc2cb49f6ecceb396ae21eea9.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 60px 0;
}

.bg_img_voice img{
	margin: 10px;
}

@media screen and (max-width: 768px) {
.bg_img_voice{
	padding: 30px 0;
	}
}

/*---h2スタイル----------------------------------------- */
.h2_title {
  min-width: 50%;
  position: relative;  
  display: inline-block;
  background-color: #fff;   
  border: 2.5px solid #444; 
  border-radius: 25px;
  padding: 12px 60px;
  text-align: center;
  margin-bottom: 40px;
  z-index: 1;
  transform-style: preserve-3d;
  font-weight: 500;
}

.h2_title::before {
content: "";
  position: absolute;  
  top: -1.5px; 
  left: -1.5px;
  width: 100%;
  height: 100%;
  background-color: #fff;   
  border: 2.5px solid #444;
  border-radius: 25px;     
  z-index: -1;
  transform: translate(6px, 6px) translateZ(-1px);  
  box-sizing: content-box;
}

@media screen and (max-width: 768px) {
	.h2_title{
		min-width:70%;
		padding: 10px 20px;
		border-radius: 15px;
	    margin-bottom: 5px;
	    border: 1.5px solid #444; 
	} 
	
	.h2_title::before {
		border-radius: 15px;
		border: 1.5px solid #444;
	}

}

/*--------------拠点情報-----------------------------------------------------------*/
.showroom_wrapper{
	max-width: 1000px;
}

.showroom_wrapper h3{
	text-align: center;
	margin: 10px 0px;
}

.showroom_wrapper img{
	max-width: 90%;
	margin: 0 auto;
}

dt{
	text-align: center;
}
.col2_item dl {
  display: grid;
  grid-template-columns: auto 1fr; 
  column-gap: 20px; 
  row-gap: 2px; 
  text-align: left;
  max-width: 400px; 
  margin: 0 auto;   
  line-height: 1.3;
}

.col2_item dt {
  grid-column: 1; 
  font-weight: normal;
  white-space: nowrap;
}

.col2_item dd {
  grid-column: 2; 
  margin: 0;  
}

.tel_link {
	text-decoration: underline;
}

@media (max-width:768px) {
p.showroom_attention{
	margin-top: 20px;
	font-size: 1.4rem;
	line-height: 1.4;
  }
}

@media screen and (min-width: 769px) {
    .tel_link {
        pointer-events: none; 
		text-decoration: none;
    }
}
/*--------------よくある質問--------------------------------------------------------*/

.question_box .text p{
	font-size: 1.9rem;
}

@media (max-width:768px) {
	.question_box .text p{
		font-size: 1.5rem;
	}
}


/*アコーディオンメニュー*/
.faq_content {
  display: none;
}

.faq_content.active {
  display: block;
}

.content_inner{
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.type_text_group{
	display: flex;
}


.faq_item .text,.icon_wrap{
	padding-top: 30px;
}

.faq_item a,.spec_attention a{
	text-decoration: underline;
	color: #368ac7;
}

.question_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.icon_wrap{
	margin-left: 0 20px;
}


.answer_box {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

@media (max-width:768px) {
	.icon_wrap{
		margin: 0 3px 0 0;
	}
}

/* アクティブなメニューを開く */
.faq_item.active .answer_box {
  max-height: 3000px;
  opacity: 1;
}

.type{
	padding: 0 35px;
}
.type-text{
	font-size: 5rem;
	line-height: 1.5;
}

.answer_box .type-text{
	color:rgba(160,160,160,1.00);
	padding-left: 5px;
}

@media (max-width:768px) {
	
	.type{
	padding: 5px 10px 5px 0;
}
	.type-text{
		font-size: 3rem;
		line-height: 1.3;
	}
	.faq_item .text, .icon_wrap{
		padding-top: 17px;
	}
	

}

/*----------------＋から－へ変形----------*/

.icon {
  position: relative;
  width: 35px;
  height: 35px;
  display: block;
  transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  will-change: transform;
}
.icon:hover {
  transform: scale(0.92);
}
.icon:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 75%;
  height: 2px;
  border-radius: 10px;
  background: #000;
  display: block;
}
.icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 2px;
  height: 75%;
  border-radius: 10px;
  background: #000;
  display: block;
  transition: 0.3s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}


.icon.active {
  transform: rotate(180deg);
}
.icon.active:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

@media (max-width: 768px) {
	.icon{
		width: 25px;
		height: 25px;
	}
	.icon_wrap{
		margin-left: 0;
	}

}


/* faq_contentのアニメーション */
.faq_content{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
}

.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  max-height: 10000px;
}




/*----カルーセル------------------------------------------------------*/

.carousel_list {
  position: relative;
  display: flex;   
  overflow: hidden;  
  padding: 0 50px;  
  margin: 20px 0;
  box-sizing: border-box;
}

.carousel_list.slick-initialized {
  display: block;
  overflow: visible;
}

.carousel_item {
  padding: 0 10px;    
  box-sizing: border-box;
  outline: none;    
}

.product_card {
  background: #fff;
  border: 2px solid #eee;
  padding: 5% 7%;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 15px;
}

.product_card img {
  width: 100%;
  height: auto;
  margin: 20px 0;
}

/*左右の三角形ボタン*/
.slick-prev:before, 
.slick-next:before {
  content: "" !important; 
  display: none !important;
}
.slick-prev::after, .slick-next::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  margin: auto;
}

.slick-prev::after {
  border-width: 25px 18px 25px 0;
  border-color: transparent #4C80B1 transparent transparent;
}

.slick-next::after {
  border-width: 25px 0 25px 18px;
  border-color: transparent transparent transparent #4C80B1;
}

.slick-prev { left: 10px !important; z-index: 100; }
.slick-next { right: 10px !important; z-index: 100; }

@media screen and (max-width: 768px) {
  .carousel_list{
    padding: 0; 
  }
  
   .carousel_list article.carousel_item{
    padding: 0 6px; 
  }

  .slick-prev::before { border-width: 8px 12px 8px 0; }
  .slick-next::before { border-width: 8px 0 8px 12px; }
}



/*----対象モデル---------------------------------------------------*/
.shop-status-tags {
    display: flex;  
    flex-direction: row; 
    justify-content: space-between;
    width: 100%;
    max-width: 550px;          
    margin: 10px auto 5px; 
	padding: 0 10px 0;
    gap: 4px;                  
}

.shop-tag {
    flex: 1 1 0; 
    min-width: 0; 
    background-color: #d9d9d9;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 3px; 
    box-sizing: border-box; 
    font-size: clamp(0.8rem, 3vw, 1.3rem); 
    color: transparent;
    white-space: nowrap;
    letter-spacing: -0.02em; 
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2); 
}

.shop-tag.is-active {
    background-color: #92d3e5;   
    color: #444444;                 
}


.product_card button {
  width: 70%;
  padding: 12px 0;
  background-color: #cce7eb;   
  border:none;
  border-radius: 100px;       
  letter-spacing: 0.1em;  
  cursor: pointer;
  margin: 0 auto;
  color: #444;
  font-size: 1.5rem;
}
.js-open-modal { background: #000; color: #fff; border: none; padding: 10px 20px; cursor: pointer; transition: 0.3s; }
.js-open-modal:hover { opacity: 0.7; }

.modal_overlay {
    display: none; 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
    background: rgba(0, 0, 0, 0.8); z-index: 10000; opacity: 0; transition: opacity 0.3s ease;
    justify-content: center; align-items: center;
    }
.modal_overlay.is-open {
	display: flex !important; 
	opacity: 1; 
	touch-action: none;
}
.modal_content { 
	background: #fff; 
	position: relative; 
	z-index: 10001; 
	box-sizing: border-box; 
}

.close_btn { 
	position: absolute; 
	top: 15px; 
	right: 20px; 
	font-size: 35px; 
	background: none; 
	border: none; 
	cursor: pointer; 
	z-index: 10010; }

.modal_inner{
	display: grid;
	grid-template-columns: 3fr 4fr;
    column-gap: 15px;	
}

.model_name{
	font-family: 'Instrument Serif',serif,system-ui;
	font-weight: 400;
	font-style: normal;
    margin-bottom: 10px;
	font-size: 3.5rem;
	line-height: 1.1;
}

.detail_grid { 
	display: grid; 
	grid-template-columns: 4fr 5fr;
	margin-bottom: 15px; 
		}

.modal_left .detail_grid{
	margin-bottom: 5px;
}

.modal_left img{
	margin: 20px 0;
}

.detail_grid dt { 
	flex-direction: column;
	background-color: #EEEEEE;
	justify-content: center;
}
.detail_grid dt,.detail_grid dd { 
	display: flex;
	align-items: center;
	border-bottom: 1px solid #C9C9C9; 
	padding: 5px 10px;
	font-size: 1.5rem;
	line-height: 1.5;
}

.product_card .detail_grid dt{
	font-size: 1.3rem;
    white-space: nowrap;       
}

.product_card .detail_grid dt,.product_card .detail_grid dd{
    letter-spacing: -0.02em;	
}

@media screen and (max-width: 768px) {
	.product_card .detail_grid dt{
		font-size: 1.2rem;
	}
}

.detail_grid dt:first-of-type,
.detail_grid dd:first-of-type {
    border-top: 1px solid #C9C9C9;
}
	
.model_name,.model_price{
	text-align: center;
	margin-bottom: 12px;
}
.product_card .model_price,.modal_left .model_price dt{
	font-size: 1.5rem;
}

.model_price dd{
	font-weight: 600;
	font-size: 2.2rem;
}
.model_price dd small{
	font-weight: 400;
	font-size: 1.8rem;
}

.carousel_item small.modal_inner small {
  font-size: 0.7em;
  vertical-align: super;
  margin-left: 3px;
  color: #666;
}


.detail_price{
	display: flex;
	justify-content: flex-end;
    border-bottom: 1px solid #C9C9C9;
	padding: 10px;
}

.detail_price li{
	font-size: 1.2rem;
	line-height: 1.4;
}
.modal_inner .spec_attention{
	font-size: 1.2rem;
	line-height: 1.3;
}

.model_attetion li{
	text-align: left;	
}
li.separator_attention{
	border-top: 1px solid #C9C9C9;
    margin-top: 5px;  
    padding-top: 5px;  
	}

 /* PC */
@media screen and (min-width: 769px) {
.modal_content { 
	width: 1000px; 
	max-height: 90vh; 
	padding: 40px; 
	transform: scale(0.9); 
	transition: transform 0.3s ease; 
	overflow: visible !important; 
}
.modal_overlay.is-open .modal_content { 
	transform: scale(1); 
}
	
.modal_nav { 
	display: block; 
	position: absolute; 
	top: 50%; 
	transform: translateY(-50%); 
	width: 50px; 
	height: 50px; 
	background: rgba(255,255,255,0.1); 
	border: 1px solid #fff; 
	color: #fff; 
	border-radius: 50%; 
	font-size: 20px; 
	cursor: pointer; 
	transition: 0.3s; 
}
.modal_nav:hover { 
	background: #fff; 
	color: #000; 
}
.modal_nav.prev { 
	left: -70px; 
}
.modal_nav.next { 
	right: -70px; 
}
     }

/*タブレット*/
@media screen and (min-width: 769px) and (max-width: 1024px){
	.modal_content{
		width: 80%;
	}

}
@media screen and (min-width: 769px) and (max-width: 959px){
	.shop-tag {
		font-size: clamp(0.8rem, 3vw, 2rem);
		border-radius: 25px;
	}		
}


/* スマホ */
@media screen and (max-width: 768px) { 
            .modal_overlay { 
				align-items: flex-end; 
			}
            .modal_content { width: 100%; 
				max-height: 85vh; 
				padding: 50px 20px 40px; 
				border-radius: 30px 30px 0 0; 
				transform: translateY(100%); 
				transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
				overflow-y: auto; 
			}
            .modal_overlay.is-open .modal_content { 
				transform: translateY(0); 
			}
            .modal_nav { display: none;
			}

			.modal_inner{
				grid-template-columns: 1fr;
			}
			.model_attetion li{
				font-size: 1.2rem;
    			line-height: 1.2;
			}
			.model_attetion{
				margin-top: 20px;
        	}
}

        @keyframes slideInR { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes slideInL { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
        .slide-next { animation: slideInR 0.4s ease-out forwards; }
        .slide-prev { animation: slideInL 0.4s ease-out forwards; }



/*----EVユーザーの声---------------------------------------------------*/
.carousel_list .slick-track {
  display: flex !important;
  align-items: stretch;
}

.carousel_list .slick-slide {
  height: auto; 
  display: flex;  
}

.carousel_list .carousel_item {
  display: flex; 
  width: 100%;
  height: auto;
  padding: 0 10px;   
  margin-bottom: 5px;
}

.card_body {
  flex-grow: 1;    
  display: flex;
  flex-direction: column;
}
.user_card {
  display: flex;
  width: 100%;
  background: #fff;
  border: 1px solid #333;
  border-radius: 60px;
  padding: 8%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.card_header{
  display: grid;
  grid-template-columns: 6fr 4fr; 
  align-items: stretch;  
  gap: 5px;          
  margin-bottom: 10px;
}

.card_header_left {
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
  padding-bottom: 5px;
}

.card_header_left h3 {
  line-height: 1.4;
  margin: 5px 0;
  text-align: left;
  font-weight: 600;
  min-height: 3em;
}

.user_sub_header p {
  width: 100%;
  background: #e6e6e6;
  border-radius: 20px;
  padding: 8px 3px;
  font-size: 1.4rem;
  line-height: 1.4;
  display: inline-block;
  text-align: center;
  margin-bottom: 0;
}

.card_header_right {
  display: flex;
  justify-content: center;
  align-items: flex-end;  
}

.card_header_right img {
  width: 100%;         
  height: auto;
  max-width: 150px;    
  display: block;
}

.separator {
  border: none;
  border-top: 1px solid #333;
  margin: 0 0 15px 0;
}

.card_body h4 {
  background: #cce7eb;
  border-radius: 50px;
  text-align: center;
  padding: 8px;
  margin-bottom: 10px;
}

.card_body h4 + p {
  text-align: center;
  margin-bottom: 10px;
}

.card_body p:last-child {
    font-size: 1.6rem;
    line-height: 1.5;
    text-align: left;
}

p.voice_line{
	font-size: 3rem;
	border-bottom: 7px solid #E8824E;
	line-height: 1.3;
	margin-top: 50px;
    text-align: center;
	font-weight: 600;
}

@media screen and (max-width: 768px) {
	.user_card {
		border-radius: 15px;
	    padding: 7% 6%;
	}
	.card_body p:last-child {
		line-height: 1.6;
		font-size: 1.4rem;
	}
	
	.card_body h4 + p {
		font-size: 1.4rem;
        letter-spacing: -0.1px;
	}

	p.voice_line{
    font-size: 1.7rem;
    border-bottom: 5px solid #E8824E;	
	margin-top: 10px;
	}
}

/*-----充電動画------------------------------------------------------*/
.video_container {
  width: 100%;
  max-width: 800px;      
  margin: 20px auto;     
  aspect-ratio: 16 / 9;  
}
.video_container iframe {
  width: 100%;         
  height: 100%;        
  border-radius: 15px; 
  border: none;
}

/*-----貸出期間------------------------------------------------------*/

.bg_yellow{
	background-color: #FFEA00;
    padding: 40px 0 100px 0;
}

.arch_bg_yellow{
width: 100%;
  height: 130px; 
  background-color: #FFEA00;
  clip-path: ellipse(68% 300% at 50% 300%);
  margin-bottom: -1px;
}

.bg_yellow h2{
	margin-top: 20px;
}

.bg_yellow img{
	max-width: 1000px;
}
.bg_yellow p{
	white-space: nowrap;
	font-size: 2rem;
	margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
    .arch_bg_yellow {
        clip-path: ellipse(80% 300% at 50% 330%);
        height: 100px;
    }
	.bg_yellow{
		padding: 0px 0 30px 0;
	}
	
	.bg_yellow h2 {
    	margin: 10px 0 15px 0;
	}
	.bg_yellow p{
    	font-size: clamp(1.2rem, 2.5vw, 1.3rem);
}
}

/*-----条件・注意事項------------------------------------------------------*/
.wrap_border {
  border: 2px solid #333;
  padding:5%;
  box-sizing: border-box;
  border-radius: 50px;
  max-width: 1000px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
	.wrap_border{
		border-radius: 15px;
	}
}

ul.check_list{
	margin-top: 25px;
}
	
	
ul.check_list li.icon_check,ul.check_list .icon_attention {
  position: relative; 
  min-height: 1.5rem; 
  display: block;     
}

ul.check_list li.icon_check{
  margin-bottom: 2.3rem;	
}

ul.check_list .icon_attention{
  margin-bottom: 5px;
  font-weight: 600;
  padding-left: 4.5rem;
}

ul.check_list li.icon_check::before,ul.check_list .icon_attention::before {
  content: "";            
  position: absolute;     
  left: 0;               
  top: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; 
}

ul.check_list li.icon_check::before{
  background-image: url(https://www.stern-tennoji.co.jp/datas/images/2026/03/16/4ebda36932ed6b549bf27784a183e5c23c6b3a0a.png);
  width: 2.5rem;   
  height: 2.5rem;  
}

ul.check_list .icon_attention::before{
  background-image: url(https://www.stern-tennoji.co.jp/datas/images/2026/03/16/0e5291ad1c39c8e90b75b3da8af71442d318ad46.png);
  width: 3.4rem;   
  height: 3.4rem;  
}

.icon_check{
	padding-left: 3.5rem;
}



.body_attention{
   padding-left: 4.5rem;
   margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
  ul.check_list li.icon_check {
    padding-left: 2.5rem; 
    margin-bottom: 2.2rem;
  }
  
	ul.check_list li.icon_check::before{
	  width: 1.7rem;   
	  height: 1.7rem;  
	  top:0.2rem;
	}
	ul.check_list .icon_attention::before{
	  width: 2.8rem;   
	  height: 2.8rem;  	
	}  
	ul.check_list .icon_attention{
		padding-left: 3.8rem;
		line-height: 1.4;
	}

	.body_attention{
	   padding-left: 3.8rem;
	   margin-bottom: 30px;
	}

	ul.check_list h3.icon_attention{
		font-size: 1.7rem;
	}	
}

/*---ステップ-------------------------------------*/

.step_arrow {
  align-self: center;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 20px;
  border-color: transparent transparent transparent #4a82b5;
  flex-shrink: 0;
}

@media screen and (max-width: 768px) {
  .step_arrow {
    border-width: 18px 25px 0 25px;
    border-color: #4a82b5 transparent transparent transparent;
    margin:0;
  }
}

.col3_item span {
  display: inline-block;
  background-color: #5a86b5;
  color: #fff;
  margin: 0 auto;
  padding: 5px 30px;
  border-radius: 50px;
  text-align: center;
  font-size: 2rem;
}

.step_card{
	background-color: #fff;
    border-radius: 60px;
    padding:4% 3%;
}

.step_card span{
	margin-bottom: 20px;
	padding: 5px 50px;
}

.step_card img{
	max-width: 80%;
}

.step_card h3{
    font-size: 2.4rem;
    font-weight: 600;
    margin: 10px 0;	
	line-height: 1.4;
}

.bg_blue{
	background-color: #BCE2E8;
	padding-bottom: 100px;
}

.arch_bg_blue{
width: 100%;
  height: 130px; 
  background-color: #BCE2E8;
  clip-path: ellipse(68% 300% at 50% 300%);
  margin-bottom: -1px;
}

.step_card .small{
	line-height: 1.3;
	margin-top: 15px;
}

@media screen and (max-width: 768px) {
	.bg_blue{
	padding-bottom: 30px;
}
	
	.step_card {
    border-radius: 15px;
    padding:8%;
	}
	
.arch_bg_blue{
	clip-path: ellipse(80% 300% at 50% 330%);
    height: 100px;
}
	
.step_card img{
	max-width: 70%;
}
.step_card .small small{
	font-size: 1.3rem;
	line-height: 1.3;
}	

}

/*-----CTA------------------------------------------------------*/

.cta_area{
  background-image: url("https://www.stern-tennoji.co.jp/datas/images/2026/03/16/4c0a49176d2587eedc47709a0679d629d8966c59.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.cta_area .cta_group{
  max-width: 800px;	
  margin: 0 auto;
  padding: 80px 0;
}

.cta_area img{
	max-width: 60%;
}

.cta_area .term_img{
	max-width: 40%;
}
.cta_area a{
  display: block;
  background-color: #d86227; 
  color: #fff;
  font-size: 3.3rem;
  padding: 10px 80px;
  border-radius: 100px; 
  border: 4px solid #333;
  transition: transform 0.2s;
  margin: 20px 0;
　white-space: nowrap;
  max-width: 90%;
  text-align: center;
}

.cta_area a:hover{
  transform: translateY(-2px);
}

.cta_area a span {
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
	.cta_area .cta_group{
		padding: 40px 0;
}
	
	.cta_area img {
    max-width: 60%;
}
	.cta_area .term_img {
    max-width: 55%;
}
	.cta_area a {
		font-size: 2rem; 
		padding: 12px 30px;]
		border: 3px solid #333; 
		margin: 5px 0;
	  }	
}

/*-----注意事項------------------------------------------------------*/
.attention_group{
	padding: 40px;
}

.attention_group ul{
	list-style:inside;
}

.attention_group h3{
	margin-top: 25px;
}


.scroll_box{
  border: 1.5px solid #444; 
  padding: 40px;
  height: 300px;       
  overflow-y: auto;   
  scrollbar-width: thin;
  scrollbar-color: #5a86b5 #f0f0f0;	
}

.scroll_box p{
    line-height: 1.4;
    font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
	.attention_group {
		padding: 2%;
		line-height: 1.4;
	}
	.scroll_box{
		padding: 5%;
	}
	.scroll_box p {
    font-size: 1.35rem;
}
	.attention_group h3{
	margin-top: 15px;
}
	
}
/*-----フッター------------------------------------------------------*/

.footer_group{
	display: flex;
	align-items: center;
	justify-content: center;
}

footer.bg_black{
	background: #000000;
	color: #ffffff;
	padding: 15px 0 5px 0;
}

.bg_black a{
	color: #ffffff;
}

.bg_black a:visited{
	color: #ffffff;
}

footer .line_btn{
	text-align: left;
	padding-bottom: 10px;
}

.footer_group .txt_block{
	width: 50%;
	border-left: 1px solid #ffffff;
	padding: 10px 65px;
	text-align: left;

}

footer img{
	max-height: 95px;
	width: auto;
}
.word_logo {
  width: 50%;
  text-align: center;
  max-width: 100%; 
}

.word_logo img {
  max-width: 100%; 
  max-height: 50px; 
}

.company_name{
	font-size: 1.4rem;
	padding: 10px 0 5px 0;
	text-align: left;
}

footer .line_btn{
	font-size: 1.3rem;
}
footer small{
	display: block;
	color: #838383;
	text-align: center;
}

@media screen and (max-width: 959px) {
  .footer_group {
    flex-flow: column;
    align-items: baseline;
	scale:0.9;
  }

  .word_logo, .footer_group .txt_block {
    width: 80%; 
    padding: 0;
    border-left: none; 
    text-align: left; 
  }

  .word_logo img {
    max-width: 70%; 
  }
	
footer.bg_black{
	padding: 15px 0 100px 0;
}
}
