@charset "utf-8";


/* -------------------------------------------------------------------

メインビジュアル

------------------------------------------------------------------- */
.main-visual_inner{
	background:url(../images/bg.png) no-repeat;
	background-size:cover;
}
.main-visual_inner p{
	max-width:100%;
	margin: -40px auto 0;
	padding:0em 0 ;
	text-align:center;
}

@media screen and (min-width:1350px){
.main-visual_inner {
  position: relative;
  background: url(../images/bg01.png) no-repeat left top;
  background-size: 100%  100%;
	padding:11em 0 5em;
}

.main-visual_inner::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%; /* ← 下半分だけ表示 */
  background: url(../images/bg02.png) no-repeat center bottom;
  background-size: 100% auto;
  pointer-events: none;
  z-index:-1;

}


  .main-visual_inner img {
    display: inline-block;
    width: auto;      /* ← 元のサイズで表示 */
    height: auto;
    max-width: 100%;  /* ← 画面が小さいときだけ縮む */
  }
}


/* -------------------------------------------------------------------

IDEXカードのおトクな魅力

------------------------------------------------------------------- */

.h2-title_inner_charm{
	background:#004a9f;
	padding:3em 0 ;
	text-align:center;
	
}
.h2-title_inner_charm h2{
	max-width:80%;
	margin: 0 auto;
}
@media screen and (min-width:768px){
.h2-title_inner_charm{
	padding:4em 0 ;
	margin:0 0 40px;
}
.h2-title_inner_charm h2{
	max-width:100%;
	}
}
.idex_charm_body{
	max-width:100%;
	margin: 0 auto;
	letter-spacing:1px;
	padding:5em 0;

}
@media screen and (min-width:768px){
.idex_charm_body{
	max-width:1000px;
	padding:5em 0 5em;
	}
}
.idex_charm_inner{
	max-width:80%;
	margin: 0 auto;
	display:grid;
	grid-template-columns:1fr;
	gap:40px 0;
}
@media screen and (min-width:768px){
.idex_charm_inner{
	grid-template-columns:1fr ;
	gap:20px;
	max-width:100%;
	}
}
/* ▼ 2つ横並び（PC）・SPは縦並び */
.point-wrapper {
  display: flex;
  gap: 50px;
}
@media (max-width: 768px) {
.point-wrapper {
  display: flex;
  gap: 50px;
  flex-wrap:wrap;
}

}
.point-box {
  position: relative;
  background: #0068b7;
  padding: 20px 20px;
  color: #fff;
  width: calc(50% - 15px);
  box-sizing: border-box;
  overflow: visible; /* 三角を飛び出させるため */
}

/* SP：1カラム */
@media (max-width: 768px) {
  .point-box {
    width: 100%;
  }
}

/* ▼ 左上の背面に回り込む三角（飛び出し）→ after に変更済み */
.point-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 0;
  height: 0;

  border-top: 130px solid #004A82;     /* 背景色と同じ */
  border-right: 130px solid transparent;

  transform: translate(-20px, -20px);

  /* ★ 背面に回す（最重要） */
  z-index: -1;
}

/* ▼ 右上の白い斜めカット → before に変更済み */
.point-box::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-top: 50px solid #fff;
  border-left: 50px solid transparent;
  z-index: 1; /* 前面 */
}

/* ---------- 内部デザイン ---------- */

.point-header {
  display: flex;
  align-items: center;
  gap: 15px;
}

.point-label {
  background: #9DC3E6;
  padding: 8px 25px;
  border-radius: 0px ;
  color: #fff;
  font-size: 18px;
	font-weight: bold;
	margin:0 -30px 0 -20px;
}
@media (max-width: 768px) {
.point-label {
	padding: 8px 20px;
	margin:0 0px 0 0px;
  font-size: 16px;
	}
}

.point-icon {
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* ★ text用の color / font-size は削除 */
  overflow: hidden; /* ← 画像を丸く切り抜く */
}

.point-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 中身が潰れない */
  display: block;
}

.point-body {
  background: #fff;
  color: #222;
  padding: 15px 15px;
  border-radius: 10px;
  margin-top: 10px;
}

.point-body h3 {
  color: #0068b7;
  margin-bottom: 10px;
  font-size:clamp(15px , 2vw, 22px);
  font-weight: bold;
  text-align:center;
}
.point-body p{
	font-size:clamp(13px , 2vw, 16px);
}


@media screen and (min-width:768px){
.point-body p{
	font-family: 'Hiragino Sans W3', sans-serif;
	}
}
/*




.grad-border-block_a{
   background: linear-gradient(90deg, #1d2c74, #006dba);
    border-radius: 16px;
    padding: 2px;
}
.grad-border-block_b{
   background: linear-gradient(90deg,#006dba , #1d2c74);
    border-radius: 16px;
    padding: 2px;
}

.icon-box {
	background:#fff;
	border-radius: 16px;
	padding: 0px 0 0;
	position:relative;
}
.border01 .figure-box{
	background-image: linear-gradient(90deg, #1d2c74, #006dba);
	border-radius:13px 13px 0 0;
	padding:30px 0 50px;
}
.border02 .figure-box{
	background-image: linear-gradient(90deg,#006dba , #1d2c74);
	border-radius:13px 13px 0 0;
	padding:30px 0 50px;

}

.icon-box figure{
	margin: 0 auto;
	text-align:center;
}

.icon-box dl {
	margin:-30px 0 0;
	padding:0px 20px 20px;

}
.icon-box dl dt{
	text-align:center;
	margin:0 0 5px;
}
.icon-box dl dd{
	font-size:clamp(14px, 2vw, 15px);
	margin:0px 0 0;
	font-family: 'Hiragino Sans W3', sans-serif;
	text-align:justify;
	
}
@media screen and (min-width:768px){
.icon-box dl dd{
	height:115px;
	}
}

.icon-box dl dd span{
	display:block;
	margin:10px 0 0;
	font-size:.8rem;
}
.fukidashi01 ,
.fukidashi02 {
	position: absolute;
	top:-25px;
}
.fukidashi01 img,
.fukidashi02 img{
	max-width:50px;
}

.fukidashi01{
	left:-10px;
}
.fukidashi02{
	right:-10px;
}
@media screen and (min-width:768px){
.fukidashi01 img,
.fukidashi02 img{
	max-width:100%;
}

.fukidashi01 ,
.fukidashi02 {
	top:-60px;
}
.fukidashi01{
	left:-25px;
}
.fukidashi02{
	right:-25px;
	}
}
*/


/* -------------------------------------------------------------------

おすすめIDEXカード診断

------------------------------------------------------------------
.h2-title_inner_diagnosis{
	padding:3em 0 5em;
	text-align:center;
	
}
.h2-title_inner_diagnosis h2{
	max-width:80%;
	margin: 0 auto;
}
@media screen and (min-width:768px){
.h2-title_inner_diagnosis{
	padding:4em 0 ;
	margin:0 0 0px;
}
.h2-title_inner_diagnosis h2{
	max-width:100%;
	}
}

.idex_diagnosis_body{
	max-width:100%;
	margin: 0 auto;
	letter-spacing:1px;
	padding:2em 0 6em;
	background:#F2F6FA;
}


.idex_diagnosis_inner{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:4px 0;
}
@media screen and (min-width:768px){
.idex_diagnosis_inner{
	max-width:780px;
	margin: 0 auto;
	gap:40px;
	}
}
.idex_diagnosis_inner .q-box{
	background:#fff;
	max-width:90%;
	margin: 0 auto;
	border-radius: 6px;
	padding:30px 20px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	position:relative
}
.idex_diagnosis_inner .img-center{
	text-align:center;
}
.idex_diagnosis_inner .common-img{
	text-align:center;
	margin:15px 0 ;
}
.idex_diagnosis_inner .a-box{
	max-width:90%;
	margin: 50px auto 0;
	border-radius: 6px;
	padding:30px 20px;
	position:relative
}
@media screen and (min-width:768px){
.idex_diagnosis_inner .a-box{
	margin: 0px auto 0;
	}
}

.idex_diagnosis_inner .blue{
	background:#2e3192;
}
.idex_diagnosis_inner .lightblue{
	background:#6fa8dc;
}
.idex_diagnosis_inner .text-link {
	color:#fff;
	display:block;
	margin:20px auto 0;
	text-align:center;
	font-size:clamp(13px, 2vw, 15px);
	text-decoration:underline;
}
.idex_diagnosis_inner a{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:block;
}
.idex_diagnosis_inner a:hover{
	background:rgba(255,255,255,.2);
}

.diagnosis_fukidashi,
.diagnosis_fukidashi02,
.diagnosis_fukidashi03,
.diagnosis_fukidashi04{
	position:absolute;
}
@media screen and (min-width:768px){
.diagnosis_fukidashi{
	top:-30px;
	left:-20px;
}
.diagnosis_fukidashi02{
	top:-30px;
	right:-20px;
}
.diagnosis_fukidashi03{
	top:-50px;
	left:-20px;
}
.diagnosis_fukidashi04{
	top:-50px;
	right:-20px;
	}
}


.pc-only{
	display:none;
	}
.diagnosis_fukidashi_sp,
.diagnosis_fukidashi02_sp{
	text-align:center;
	margin:-60px 0 10px;
	}
.diagnosis_fukidashi03_sp,
.diagnosis_fukidashi04_sp{
	text-align:center;
	margin:-70px 0 10px;

	}
.sp-only_text{
	font-size:.8rem;
	text-align:center;
	height:100px;
	}
.sp-only_text_2{
	font-size:.8rem;
	text-align:center;
	height:75px;
	}
.idex_diagnosis_inner .q-box{
	border-radius: 6px;
	padding:30px 10px 0 ;

	}
.idex_diagnosis_inner .a-box{
	border-radius: 6px;
	padding:30px 10px 20px;

}
.white-color{
	color:#fff;
	}
.sp-only_text_2 .sp--large{
	display:block;
	font-size:1.3rem;
	font-weight:700;
	line-height:1.2;
	margin:5px 0 0;
	}
.spheight{
	height:60px;
	}

}
@media screen and (min-width:769px){
.sp-only{
	display:none;
	}

}
*/

/* -------------------------------------------------------------------

おすすめIDEXカード診断

------------------------------------------------------------------- */
.h2-title_inner_diagnosis{
	padding:3em 0 5em;
	text-align:center;
	
}
.h2-title_inner_diagnosis h2{
	max-width:80%;
	margin: 0 auto;
}
@media screen and (min-width:768px){
.h2-title_inner_diagnosis{
	padding:4em 0 ;
	margin:0 0 0px;
}
.h2-title_inner_diagnosis h2{
	max-width:100%;
	}
}

.idex_diagnosis_body{
	max-width:100%;
	margin: 0 auto;
	letter-spacing:1px;
	padding:2em 0 6em;
	background:#F2F6FA;
}


.idex_diagnosis_inner{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:4px 0;
}
@media screen and (min-width:768px){
.idex_diagnosis_inner{
	max-width:780px;
	margin: 0 auto;
	gap:40px;
	}
}
.idex_diagnosis_inner .q-box{
	background:#fff;
	max-width:90%;
	margin: 0 auto;
	border-radius: 6px;
	padding:30px 20px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	position:relative
}
.idex_diagnosis_inner .img-center{
	text-align:center;
}
.idex_diagnosis_inner .common-img{
	text-align:center;
	margin:15px 0 ;
}
.idex_diagnosis_inner .a-box{
	max-width:90%;
	margin: 50px auto 0;
	border-radius: 6px;
	padding:30px 20px;
	position:relative
}
@media screen and (min-width:768px){
.idex_diagnosis_inner .a-box{
	margin: 0px auto 0;
	}
}

.idex_diagnosis_inner .blue{
	background:#2e3192;
}
.idex_diagnosis_inner .lightblue{
	background:#6fa8dc;
}
.idex_diagnosis_inner .text-link {
	color:#fff;
	display:block;
	margin:20px auto 0;
	text-align:center;
	font-size:clamp(13px, 2vw, 15px);
	text-decoration:underline;
}
.idex_diagnosis_inner a{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:block;
}
.idex_diagnosis_inner a:hover{
	background:rgba(255,255,255,.2);
}

.diagnosis_fukidashi,
.diagnosis_fukidashi02,
.diagnosis_fukidashi03,
.diagnosis_fukidashi04{
	position:absolute;
}
@media screen and (min-width:768px){
.diagnosis_fukidashi{
	top:-30px;
	left:-20px;
}
.diagnosis_fukidashi02{
	top:-30px;
	right:-20px;
}
.diagnosis_fukidashi03{
	top:-50px;
	left:-20px;
}
.diagnosis_fukidashi04{
	top:-50px;
	right:-20px;
	}
}
@media screen and (max-width:768px){
.pc-only{
	display:none;
	}
.diagnosis_fukidashi_sp,
.diagnosis_fukidashi02_sp{
	text-align:center;
	margin:-60px 0 10px;
	}
.diagnosis_fukidashi03_sp,
.diagnosis_fukidashi04_sp{
	text-align:center;
	margin:-70px 0 10px;
	}
.sp-only_text{
	font-size:.8rem;
	text-align:center;
	height:100px;
	}
.sp-only_text_t{
	font-size:.8rem;
	text-align:center;
	height:70px;
}
.idex_diagnosis_inner .q-box{
	border-radius: 6px;
	padding:30px 10px 10px ;

	}
.idex_diagnosis_inner .a-box{
	border-radius: 6px;
	padding:30px 10px 0;
	height:260px;
}
.white-color{
	color:#fff;
	}
.sp-only_text_t .sp--large{
	display:block;
	font-size:1.2rem;
	font-weight:700;
	line-height:1.2;
	margin:5px 0 0;
	}
.spheight{
	height:65px;
	line-height:1.4;
	padding:6px 0 0;
	}
.spheight-p{
	height:65px;
	padding:23px 0 0;
	}
}
@media screen and (min-width:769px){
.sp-only{
	display:none;
	}

}


/* -------------------------------------------------------------------

IDEX CLUBカードがおトクな理由

------------------------------------------------------------------- */

.card__img{
	text-align:center;
	margin:0 auto 30px;
	max-width:50%;
}
@media screen and (min-width:768px){
.card__img{
	max-width:250px;
	}
}


.h2-title_inner_reason{
	padding:3em 0 1em;
	margin:0 0 0px;
	text-align:center;
}
.h2-title_inner_reason h2{
	max-width:80%;
	margin: 0 auto;
	}

@media screen and (min-width:768px){
.h2-title_inner_reason{
	padding:4em 0 1em;
	margin:0 0 0px;
	text-align:center;
}
.h2-title_inner_reason h2{
	max-width:100%;
	margin: 0 auto;
	}
}

.idex_reason_body{
	max-width:100%;
	margin: 0 auto;
	letter-spacing:1px;
	padding:2em 0 10em;
background: url(../images/reason/bg02.png) no-repeat 0% 0%,
linear-gradient(180deg,rgba(26, 66, 129, 1) 0%,
rgba(26, 66, 129, 1) 30%, 
rgba(0, 110, 187, 1) 70%,
rgba(0, 110, 187, 1) 100%

);
  background-size: 100% , auto;
}
@media screen and (min-width:768px){
.idex_reason_body{
	max-width:100%;
	margin: 0 auto;
	letter-spacing:1px;
	padding:2em 0 8em;
	/*background:url(../images/reason/bg.png) no-repeat 100% 0% #006EBB;
	background-size:100%;
	*/
background: url(../images/reason/bg.png) no-repeat 0% 0%,
linear-gradient(180deg,rgba(26, 66, 129, 1) 0%,
rgba(26, 66, 129, 1) 30%, 
rgba(0, 110, 187, 1) 70%,
rgba(0, 110, 187, 1) 70%

);
  background-size: 100% , auto;
	}
}


.idex_reason_inner{
	border-radius:5px;
	padding:35px 0px;
	background:#fff;
	max-width:90%;
	margin: 0 auto;

}
@media screen and (min-width:768px){
.idex_reason_inner{
	max-width:900px;

	padding:35px 40px;
	}
}
.reason_title{
	border-bottom:3px solid #2e3192;
	text-align:center;
	max-width:90%;
	margin: 0 auto;
}
@media screen and (min-width:768px){
.reason_title{
	max-width:100%;
	}
}

.reason_title span{
	background:#2e3192;
	display:inline-block;
	padding:15px 40px 10px;
	border-radius:10px 10px 0 0 ;
	max-width:80%;
}
@media screen and (min-width:768px){
.reason_title span{
	max-width:100%;
	}
}
.reason--box{
	max-width:90%;
	margin: 0 auto;
	padding:10px 0 40px;
	
}
.reason--title{
	margin:0px  auto 20px;
	text-align:center;
	font-size:clamp(14px, 2vw, 18px);
	
}
.reason--title .yellow-lbl{
	color:#c1272d;
}



.reason--title .text-weight{
	display:block;
	font-weight:700;
	margin:5px 0 0;
}
.reason--title .text--large{
	font-size:clamp(24px, 2vw, 35px);

}
.point-line{
	line-height:1.2;
	display:block;
	text-align:center;
}

.reason--comment{
	font-size:clamp(14px, 2vw, 16px);
	text-align:center;
	font-weight:300;
	font-family: 'Hiragino Sans W3', sans-serif;
}
.reason--notice{
	margin:20px 0 0;
	font-size:clamp(12px, 2vw, 14px);
	text-indent:-1em;
	padding-left:1em;
	font-weight:300;
	font-family: 'Hiragino Sans W3', sans-serif;
	
}
@media screen and (min-width:768px){
.reason--notice{
	margin:20px auto 0;
	max-width:530px;
	}
}
.reason--notice li:before{
	content:"※";
}
.common-img_reason{
	text-align:center;
	margin:0px auto 30px;
}

.reason--box .div-list{
	background:#F4F4F9;
	padding:20px;
	margin:20px auto 0;

}
@media screen and (min-width:768px){
.reason--box .div-list{
	max-width:650px;

	}
}

.reason--box .box-list{
	color:#2e3192;
	font-size:clamp(14px, 2vw, 16px);

	
}
.reason--box .box-list li{
	margin:5px 0 ;
	font-weight:700;
	text-indent:-1em;
	padding-left:1em;
	font-family: 'Hiragino Sans W5', sans-serif;
}
.reason--box .box-list li:before{
	content:"●";
	color:#2e3192;
}

.set-banner{
	text-align:center;
	margin:20px auto 0px;
	max-width:90%;
}

/* -------------------------------------------------------------------

IDEX CLUBカードのおトクなポイント

------------------------------------------------------------------- */


.idex_point_body{
	max-width:100%;
	margin: 0 auto;
	letter-spacing:1px;
	padding:2em 0 8em;
	background:url(../images/point/bg.png) repeat-y 0% 0% #fff;
	background-size:100%;
}
@media screen and (min-width:768px){
.idex_point_body{
	background:url(../images/point/bg.png) repeat-y 50% 50% #fff;
	background-size:100%;
	padding:2em 0 6em;
	}
}

.bg-style{
	background:#f2f2f2;
}

.ill_inner,
.ill_inner_light{
	max-width:90%;
	margin: 0 auto;
	display:flex;
	justify-content:center;
	gap:0 20px;
	align-items:center;
}
.ill_inner figure img{
	max-width:100px;
}
@media screen and (min-width:768px){
.ill_inner figure img{
	max-width:143px;
	}
}

.ill_inner .balloon-left,
.ill_inner .balloon-right{
  position: relative;
  display: inline-block;
  padding: 30px 30px ;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
	font-size:clamp(14px, 2vw, 16px);
  background: #104a94;
  border-radius:10px;
 	font-weight:500;
 	line-height:1.7;
}
.ill_inner .balloon-left:before{
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #104a94;
}

.ill_inner .balloon-right:before{
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #104a94;
}
@media screen and (min-width:768px){
.pc-style_main{
	max-width:590px;
	}
.pc-style_sub{
	max-width:530px;
	}
}



.a_comment{
	max-width:90%;
	margin: 30px auto 10px;
	display:flex;
	justify-content:center;
}

.ill_inner_light figure img{
	max-width:60px;
}
.ill_inner_light .balloon-left_waku{
  position: relative;
  display: inline-block;
  padding: 20px 25px ;
  min-width: 120px;
  max-width: 100%;
  color: #104a94;
	font-size:clamp(14px, 2vw, 16px);
  border: solid 2px #104a94;
  box-sizing: border-box;
   border-radius:10px;
	font-weight:500;
}
.ill_inner_light .balloon-left_waku:before{
  content: "";
  position: absolute;
  top: 50%;
  left: -21px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #f2f2f2;
  z-index: 2;
}
.ill_inner_light .balloon-left_waku:after{
  content: "";
  position: absolute;
  top: 53%;
  left: -24px;
  margin-top: -14px;
  border: 12px solid transparent;
  border-right: 12px solid #104a94;
  z-index: 1;
}


.ill_inner_light .balloon-right_waku{
  position: relative;
  display: inline-block;
  padding: 20px 25px ;
  min-width: 120px;
  max-width: 100%;
  color: #104a94;
	font-size:clamp(14px, 2vw, 16px);
  background: #F2f2f2;
  border: solid 2px #104a94;
  box-sizing: border-box;
   border-radius:10px;
	font-weight:500;
}
.ill_inner_light .balloon-right_waku:before{
  content: "";
  position: absolute;
  top: 50.5%;
  right: -21px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #F2f2f2;
  z-index: 2;
}
@media screen and (min-width:768px){
.ill_inner_light .balloon-right_waku:before{
	top: 50%;
	}
}

.ill_inner_light .balloon-right_waku:after{
  content: "";
  position: absolute;
  top: 52%;
  right: -24px;
  margin-top: -14px;
  border: 12px solid transparent;
  border-left: 12px solid #104a94;
  z-index: 1;
}

/*----リットル表記------*/

.liter-text{
	color:#c1272d;
	font-size:clamp(22px, 3vw, 37px);
	font-weight:700;
	letter-spacing:2px;
	text-align:center;
	margin:20px 0 0;
}
.liter-text .liter-large{
	font-size:4rem;
}
.liter-text .liter-marker{
	background:linear-gradient(transparent 60%, #ff6 60%);
}
.liter-box{
	background:#E8E8ED;
	padding:20px 10px;
	max-width:90%;
	margin: 10px auto 10px;
}
.liter-box p{
	color:#104a94;
	font-weight:700;
	font-size:clamp(17px, 2vw, 18px);
	text-align:center;
}
.liter-notice{
	font-size:clamp(12px, 2vw, 14px);
	max-width:90%;
	margin: 0px auto 10px;
	padding-left:1em;
	text-indent:-1em;
	font-family: 'Hiragino Sans W3', sans-serif;
}
.liter-last{
	margin: 0px auto 40px;
}

@media screen and (min-width:768px){
.liter-notice{
	text-align:center;
	}
}

.liter-box ul{
	margin:10px 0 10px;
}

@media screen and (min-width:768px){
.liter-box ul{
	max-width:100%;
	text-align:center;
	margin:10px auto 10px;
	}
}
.liter-box ul li{
	padding-left:.5em;
	text-indent:-.5em;
	font-size:clamp(14px, 2vw, 15px);
	font-weight:300;
	font-family: 'Hiragino Sans W3', sans-serif;
}


.liter-box ul li:before{
	content:"・";
}

.point-space{
	margin:0px auto 0;
}
.space-title{
	margin:0px auto 0;
}
@media screen and (min-width:768px){
.space-title{
	margin:120px auto 0;
	}
.idex-space{
	margin:120px auto 20px;
	}
}
/* -------------------------------------------------------------------

おトクに給油ができる

------------------------------------------------------------------- */
.reason-btn_box{
	max-width:90%;
	margin: 0px auto 0;
}
@media screen and (min-width:768px){
.reason-btn_box{
	max-width:900px;
	margin: 40px auto 0;
	}
}

.reason-btn_box dl{
	text-align:center;
	margin: 0 0 80px;
}
@media screen and (min-width:768px){
.reason-btn_box dl{
	margin: 0 0 60px;
	}
}

.reason-btn_box dl dt{
	font-size:clamp(14px, 2vw, 20px);
	color:#fbca2b;
	margin: 0 0 5px;
	font-weight:700;
}
.reason-btn_box dl dd a{
	background:#fbca2b;
	color:#222;
	font-size:clamp(12px, 2vw, 24px);
	text-decoration:none;
	padding:13px 25px;
	display:block;
	border-radius:100px;
	max-width:100%;
	margin: 0 auto;
	font-weight:700;
}
@media screen and (min-width:768px){
.reason-btn_box dl dd a{
	padding:20px 25px;
	}

}

.reason-btn_box dl dd a:hover{
	background:#fff;
	color:#222;
}
.reason-btn_box figure{
	text-align:center;
	margin:10px auto 30px;
	max-width:80%;
}
.reason-btn_box div{
	border-radius:5px;
	background:#fff;
	padding:20px;
}
@media screen and (min-width:768px){
.reason-btn_box div{
	padding: 30px 40px;
	margin:0 0 0px
	}
}

.reason-btn_box div p{
	font-size:clamp(16px, 2vw, 25px);
	color:#0092c3;
	font-weight:700;
	text-align:center;
	border-left:3px solid #0092c3;
	border-right:3px solid #0092c3;
	padding:0 10px;
	margin:0 auto 20px;
	max-width:85%;
}

@media screen and (min-width:768px){
.reason-btn_box div p{
	max-width:700px;
	margin:0 auto 20px;
	}

}

.reason-btn_box .blue--box{
	background:#EFF8FC;
	padding: 30px 10px;
}

.reason-btn_box ul{
	text-align:center;
	font-size:clamp(12px, 2vw, 16px);
}
.reason-btn_box ul li{
	margin:5px 0 ;
	font-family: 'Hiragino Sans W3', sans-serif;
}
.reason-btn_box ul li a{
	color:var(--color);
	
}
.reason-btn_box ul li span{
	display:inline-block;
	margin:0px 5px 0px ;
	width:12px;
	background:url(../cmn/images/arrow_blank.png) no-repeat center ;
	background-size:12px;

}
.coin{
	background:url(../images/point/icon03_pc.png) no-repeat top left ;
	background-size:25px;
}
@media screen and (min-width:768px){
.coin{
	background:url(../images/point/icon03_pc.png) no-repeat 2% bottom ;
	background-size:auto;
	}
}

/* -------------------------------------------------------------------

IDEX CLUB POINT

------------------------------------------------------------------- */
.h2-title_inner_point{
	padding:3em 0 ;
	text-align:center;

	
}
.h2-title_inner_point h2{
	max-width:95%;
	margin: 0 auto;
	background:#fff;
	padding:10px 10px;
}

.h2-title_inner_point_b{
	padding:0em 0 ;
	text-align:center;

	
}
.h2-title_inner_point_b h2{
	max-width:100%;
	margin: 0 auto;
	background:#fff;
	padding:0px;
}

@media screen and (min-width:768px){
.h2-title_inner_point{
	padding:4em 0 ;
}
.h2-title_inner_point h2{
	max-width:1000px;
	padding: 15px;
	}
.h2-title_inner_point_b{
	padding:4em 0 ;
}
.h2-title_inner_point_b h2{
	max-width:1000px;
	padding: 15px;
	margin:0 0 -30px;
	}
}
.point_title {
	border-bottom:#f7931e 3px solid ;
}

.point_title span{
	background:#f7931e;
}
.blue-lbl{
	color:#006ebb;
}
.idex_reason_inner .point-div-list{
	background:#FBEED3;

}
.idex_reason_inner .point-div-list li{
	color:#f15a24;
	font-family: 'Hiragino Sans W5', sans-serif;
}
.idex_reason_inner .point-div-list li:before{
	color:#f15a24;
	content:"●";
}
.another_style{
	background:#FFF5E9!important;
}

.another_style ol {
  margin: 0;
  padding: 0;
  list-style: none; /* デフォルトの数字を非表示に */
  counter-reset: li;
}

/* ol内のliのスタイル */
.another_style ol li {
  position: relative;
  font-size: 16px;
  padding-left: 2.3em;
  line-height: 1.5;
	color:#f15a24;
	font-weight:700;
	font-family: 'Hiragino Sans W5', sans-serif;
}
.another_style ol li span{
	color:#BF3E0D;
	background:linear-gradient(transparent 40%, #ff6 60%);
}


/* 2つ目以降のliにmargin-topを指定 */
.another_style ol li:not(:first-child) {
  margin-top: 0.6em;
}

/* 数字のスタイル */
.another_style ol li::before {
  counter-increment: li;
  content: counter(li);
  position: absolute;
  left: 0px;
  top: 2px; /* 数字のY軸線上の位置を調整 */
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #f15a24;
  font-size: 12px;	
  color: #fff;
  line-height: 25px;
  text-align: center;
}
.common-img_point{
	text-align:center;
	margin:0px auto 10px;
}
.common-img_point_bai{
	text-align:center;
	margin:10px auto 10px;
}

.point-inner_list{
	max-width:90%;
	margin: 0 auto 0px;
	text-align:center;
}
.point-inner_list li{
	color:var(--color);
	font-size:clamp(14px, 2vw, 16px);
	font-family: 'Hiragino Sans W3', sans-serif;

}
.point-inner_list li:before{
	content:"●";
}

.ss-last{
	margin:0 auto 40px
}

.point-marker{

	color:#f15a24;
	text-align:center;
	font-size:clamp(20px, 2vw, 26px);
	margin:30px auto 5px;
	font-weight:700;
}
.point-marker span{
	background:linear-gradient(transparent 40%, #ff6 60%);
}

.point-link{
	text-align:center;
	margin:10px auto 40px;
	font-family: 'Hiragino Sans W3', sans-serif;
}
.point-link a{
	color:var(--color);
	font-size:clamp(14px, 2vw, 15px);
	background:url(../cmn/images/arrow_blank.png) no-repeat 100% 50%;
	background-size:11px;
	padding-right:15px;
}
/* -------------------------------------------------------------------

IDEX CLUB POINT カードのおトクなポイント

------------------------------------------------------------------- */
.icon-inner ul{
	max-width:70%;
	margin: 0 auto 0px;
	display:flex;
	justify-content:center;
	gap:0 15px;
}
@media screen and (min-width:768px){
.icon-inner ul{
	gap:0 30px;
	margin: 0 auto 30px;
	}
}

.point-inner_title{
	max-width:90%;
	margin: 0 auto 20px;
	display:flex;
	justify-content:center;
	padding:80px 0 0;
	background:url(../images/clubpoint/ill.png) no-repeat 50% 0;
	background-size:40px;
}
@media screen and (min-width:768px){
.point-inner_title{
	padding:0px 0 0;
	background:url(../images/clubpoint/ill.png) no-repeat 0% 0%;
	background-size:77px;
	}
}

.simulation-inner{
	display:grid;
	grid-template-columns:1fr ;
	gap:15px 0 ;
	max-width:90%;
	margin: 10px auto 25px;
}
@media screen and (min-width:768px){
.simulation-inner{
	grid-template-columns:1fr 1fr;
	align-items:center;
	gap:0 10px;
	}
}

.simulation-inner .simulation-inner_box{
	padding:20px 15px;
}
.simulation-inner .simulation-inner_box dd{
	font-weight:300;
}



.type-pink{
	background:#EFF8FC;
	font-family: 'Hiragino Sans W3', sans-serif;
}
.type-pink dt{
	color:#0092C3;
	font-size:clamp(17px, 2vw, 20px);
	margin:0 0 10px;
	font-weight:700;
}
.type-pink dd{
	font-size:clamp(13px, 2vw, 15px);
}
.simulation-center{
	text-align:center;
	margin: 0 auto;
	max-width:100%;
}
.common-img_simulation{
	text-align:center;
	margin:10px auto;
}
.simulation-inner_sub{
	display:grid;
	grid-template-columns:1fr ;
	gap:20px 0 ;
	max-width:90%;
	margin: 0 auto 0px;
	background:#EFF8FC;
	padding:20px;

	font-family: 'Hiragino Sans W3', sans-serif;
}
@media screen and (min-width:768px){
.simulation-inner_sub{
	text-align:center;
	padding:20px 30px;
	}
}

.simulation-inner_sub p{
	font-size:clamp(16px, 2vw, 19px);
	color:#0092C3;
	font-weight:700;
}
.orange-text{
	max-width:90%;
	margin: 0 auto 30px;
	padding:0px;
	font-size:clamp(18px, 2vw, 22px);
	color:#f15a24;
	font-weight:700;
	font-family: 'Hiragino Sans W3', sans-serif;
}
@media screen and (min-width:768px){
.orange-text{
	text-align:center;
	}
}

.orange-text .marker{
	background:linear-gradient(transparent 40%, #ff6 60%);
}

.type-lightorange{background:#39B54A;font-family: 'Hiragino Sans W3', sans-serif;}
.type-orange{background:#009245;font-family: 'Hiragino Sans W3', sans-serif;}
.type-red{background:#006837;font-family: 'Hiragino Sans W3', sans-serif;}

.type-lightorange dt,
.type-orange dt,
.type-red dt{
	color:#fff;
	font-size:clamp(17px, 2vw, 19px);
	margin:0 0 0px;
	font-weight:700;
}
.type-lightorange dd,
.type-orange dd,
.type-red dd{
	font-size:clamp(13px, 2vw, 15px);
	color:#fff;
}
.type-lightorange{background:#39B54A;}
.simulation-center_max{
	text-align:center;
	margin:30px auto 40px;
	max-width:90%;
}
.jpoint_inner{
	border:2px solid #003b90;
	max-width:90%;
	margin: 0 auto;
	padding:25px 20px;
	border-radius:10px;
}
@media screen and (min-width:768px){
.jpoint_inner{
	max-width:660px;
	}
}

.jpoint_inner .jpoint_inner_title{
	font-size:clamp(18px, 2vw, 22px);
	color:#003b90;
	font-weight:700;
	text-align:center;
}
.jpoint_inner dt{
	text-align:center;
	margin:10px auto;
}
.jpoint_inner dd{
	font-size:clamp(14px, 2vw, 16px);
	font-family: 'Hiragino Sans W3', sans-serif;
}
@media screen and (min-width:768px){
.jpoint_inner dd{
	text-align:center;
	}
}
.jpoint_btn{
	text-align:center;
	margin:30px 0 10px;
}
.jpoint_btn a{
	background:url(../cmn/images/arrow_blank_w.png) no-repeat 95% 50% #003b90;
	background-size:11px;
	color:#fff;
	text-decoration:none;
	font-size:clamp(12px, 2vw, 16px);
	font-weight:500;
	padding:10px 35px 10px 20px;
	border-radius:100px;
}


.point-btn dl dt{
	font-size:clamp(14px, 2vw, 20px);
	color:#f15a24;
	margin: 0 0 5px;
	font-weight:700;
  text-shadow: 3px 3px 3px #fff, -3px -3px 3px #fff,
  -3px 3px 0 #fff,  3px -3px 0 #fff,
  3px 0 0 #fff, -3px  0 0 #fff,
  0 3px 0 #fff,  0 -3px 0 #fff;
}
.point-btn dl dd a{
	background:#f15a24;
	color:#fff;
	font-size:clamp(12px, 2vw, 24px);
	text-decoration:none;
	padding:13px 0px;
	display:block;
	border-radius:100px;
	max-width:100%;
	margin: 0 auto;
	font-weight:700;
	font-family: 'Hiragino Sans W3', sans-serif;
}
@media screen and (min-width:768px){
.point-btn dl dd a{
	padding:20px 25px;
	}

}

.point-btn dl dd a:hover{
	background:#006ebb;
	color:#fff;
}


/* -------------------------------------------------------------------

お申し込みの流れ

------------------------------------------------------------------- */
.card-root_body{
	max-width:90%;
	margin: 0 auto;
	letter-spacing:1px;
	padding:3em 0 8em;
}
@media screen and (min-width:768px){
.card-root_body{
	max-width:830px;
	padding:6em 0 15em;
	}
}


.card-root_body h3{
	color:#006ebb;
	text-align:center;
	font-weight:700;
	font-size:clamp(18px, 2vw, 30px);
	padding:10px 0;
	border-bottom:1px solid #006ebb;
}

.card-root_body .root-text{
 	font-size:clamp(12px, 2vw, 14px);
	text-align:center;
	padding:30px 0 10px;
	border-bottom:2px solid #006ebb;
	max-width:95%;
	margin: 0 auto;
	font-family: 'Hiragino Sans W3', sans-serif;
}
@media screen and (min-width:768px){
.card-root_body .root-text{
	max-width:650px;
	}
}


.card-root_body .root-text span{
	color:#006ebb;
	text-align:center;
	display:block;
	font-weight:700;
	margin:0 0 5px;
	font-size:clamp(15px, 2vw, 20px);
}
.card-root_body .root-notice{
	max-width:95%;
	margin: 30px auto;
	font-family: 'Hiragino Sans W3', sans-serif;
}
@media screen and (min-width:768px){
.card-root_body .root-notice{
	max-width:650px;
	}
}


.card-root_body .root-notice dt{
 	font-size:clamp(13px, 2vw, 14px);
 	font-weight:500;
}
.card-root_body .root-notice dd{
 	font-size:clamp(12px, 2vw, 14px);
	padding-left:1em;
	text-indent:-1em;
	font-weight:300;

}
.card-root_body .root-notice dd:before{
	content:"※";
}
.card-root_body .root-notice dd span{
	display:block;
}


.card-root_body .root-notice dd span a{
	color:var(--color);
	background:url(../cmn/images/arrow_blank.png) no-repeat 100% 50%;
	background-size:11px;
	padding-right:15px;
}

/*--タイムライン--*/
.step {
	position: relative;
	padding: 0px 0 30px;
	margin: 0px auto;
	max-width:95%;
	/* カウンターを増やす */
	counter-increment: step-index;
	z-index: 0;
}

.step-first {
	margin: 30px auto 0;
	max-width:95%;
}
@media screen and (min-width:768px){
.step {
	max-width:650px;
	}

.step-first {
	max-width:650px;
	}
}

/* 縦線の描画 */
.step:not(:last-child)::before {
	position: absolute;
	top: 0;
	left: 16px;
	width: 8px;
	height: 100%;
	content: "";
	background-color: #006ebb;
}

.step-last:not(:last-child)::before {
	position: absolute;
	top: 0;
	left: 10px;
	width: 0px;
	height: 0%;
	content: "";
	background-color: #fff;
}

.step-title {
	display: grid;
	grid-template-columns: 50px 1fr;
	gap: 10px;
	align-items: center;
	color: #006ebb;
 	font-size:clamp(16px, 2vw, 18px);
 	font-weight:500;
}



.step-title::before {
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	font-size: 1.2rem;
	font-weight: var(--w700);
	color: #fff;
	content: counter(step-index);
	background-color: #006ebb;
	border-radius: 100px;
}

.step-text {
	padding-left: 60px;
 	font-size:clamp(14px, 2vw, 16px);
	line-height: 1.5;
	color: #1a1a1a;
	font-family: 'Hiragino Sans W3', sans-serif;
}




/* -------------------------------------------------------------------

基本情報

------------------------------------------------------------------- */

.card-body h4{
	color:#006ebb;
	text-align:center;
  font-weight:700;
 	font-size:clamp(18px, 2vw, 25px);
 	margin:0 0 25px;
 	letter-spacing:1px;
}


.table_box{
  overflow-x: auto;
  width:90%;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #006ebb #e0e0e0;
}





/* -------------------------------------------------------------------

IDEX CLUBカード利用と値引きの例

------------------------------------------------------------------- */
.example-body{
	max-width:90%;
	margin: 0 auto;
	letter-spacing:1px;
	padding:0em 0 8em;
}
@media screen and (min-width:768px){
.example-body{
	max-width:960px;
	padding:3em 0 8em;
	}
}

.example-body h3{
	color:#006ebb;
	text-align:center;
	font-weight:700;
	font-size:clamp(18px, 2vw, 30px);
	padding:10px 0;
	border-bottom:1px solid #006ebb;
	margin:60px 0 0;
}
@media screen and (min-width:768px){
.example-body h3{
	max-width:830px;
	margin:60px auto 0;
	}
}

.example-body .example-body_text{
	text-align:center;
	font-weight:500;
	font-size:clamp(14px, 2vw, 18px);
	margin:50px 0 5px;
}
.example-body .div-list{
	background:#e8f3f9;
	padding:20px;

}
@media screen and (min-width:768px){
.example-body .div-list{
	max-width:530px;
	margin:0px auto 30px;
	}
}

.example-body .box-list{
	color:#006ebb;
	font-size:clamp(14px, 2vw, 16px);

}
.example-body .box-list li{
	margin:5px 0 ;
	font-family: 'Hiragino Sans W3', sans-serif;	
}
.example-body .box-list li:before{
	content:"●";
	color:#006ebb;
}


.table_box_gas{
  overflow-x: auto;
  width:100%;
  margin: 0px auto 0;
  -webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #006ebb #e0e0e0;
}

.example-body .gas_table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 960px;
 	margin: 0 auto 5px;
}
@media screen and (min-width:768px){
.example-body .gas_table {
	width: 100%;
	}
}


.example-body .gas_table th,
.example-body .gas_table td {
  vertical-align: top;
  color: var(--color);
  text-align: center;
/*  white-space: nowrap;*/
	border:1px solid #1a1a1a;
}

.example-body .gas_table th {
 	font-size:clamp(12px, 2vw, 14px);
  border-right: 1px solid #006ebb;
  padding: 5px 15px ;
  vertical-align: middle;
  text-align:left;
}
.example-body .gas_table .day{
	background:#006ebb;
	color:#fff;
	font-family: 'Hiragino Sans W3', sans-serif;
}
.example-body .gas_table .day_red{
	background:#d5182b;
	color:#fff;
  border-right: 1px solid #d5182b;
}

.example-body .gas_table td {
 	font-size:clamp(13px, 2vw, 14px);
  padding: 5px 0px!important;
  vertical-align: middle;
}
.red-color{
	color:#d5182b;
	font-weight:500;
}


.example-body .sticky {
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-left: none;
  border-right: 1px solid #006ebb;
	width:120px;
}
@media screen and (min-width:768px){
.example-body .sticky {
	width:230px;
	}
}

.example-body .sticky::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-left: 1px solid #1a1a1a;
  border-right: 1px solid #1a1a1a;
  z-index: -1;
}
.scroll-right{
	font-size:.7rem;
	width:90%;
	margin: 40px auto 5px;
	position:relative;
  display: flex;
  letter-spacing:1px;
  font-weight:300;
  font-family: 'Hiragino Sans W3', sans-serif;
	}
.scroll-right_gas{
	font-size:.7rem;
	width:100%;
	margin: 40px auto 5px;
	position:relative;
  display: flex;
  letter-spacing:1px;
  font-weight:300;
  font-family: 'Hiragino Sans W3', sans-serif;
	}
.scroll-right::after,
.scroll-right_gas::after {
	content: '';
  width: 40px;
  height: 5px;
  border-bottom: solid 1px;
  border-right: solid 1px;
  transform: skew(45deg);
	margin:5px 0 0;
}
@media screen and (min-width:768px){
.scroll-right ,
.scroll-right_gas{
	display:none;
	}
}

.sp_kome{
	margin:0 5px 0 ;
}	
.arrow_list_table{
 	font-size:clamp(11px, 2vw, 12px);
 	margin:10px 0 0;
 	font-family: 'Hiragino Sans W3', sans-serif;
}

	
@media screen and (min-width:980px){
.sp_kome{
	display:none;
}

.arrow_list_table{
	display:flex;
	justify-content:flex-end;
	gap:0 20px;
	margin:5px 0 0 100px;
}
.arrow_list_table li{
	color:var(--color);
	border:2px solid 	#d5182b;
	border-radius:5px;
	height:75px;
	text-align:center;
	font-family: 'Hiragino Sans W3', sans-serif;
 	position: relative;
}
.arrow_list_table li:before{
    content: "";
    display: block;
    position: absolute;
    background: #d5182b;
    width: 2px;
}
.arrow_list_table li:after{
    content: "";
    display: block;
    position: absolute;
     width: 0;
    height: 0;
    border: 8px solid;
    border-color: transparent  transparent #d5182b transparent;
}

.arrow_list_table li:nth-child(1){
	padding:30px ;
}
.arrow_list_table li:nth-child(1):before{
    top: -160px;
    left: 130px;
    height: 160px;

}
.arrow_list_table li:nth-child(1):after{
    top: -175px;
    left: 123px;
}
.arrow_list_table li:nth-child(2){
	padding:10px 30px 15px;

}
.arrow_list_table li:nth-child(2):before{
    top: -160px;
    right: 40px;
    height: 160px;

}
.arrow_list_table li:nth-child(2):after{
    top: -175px;
    right: 33px;
}


.arrow_list_table li:nth-child(3){
	padding:18px 40px;
}
.arrow_list_table li:nth-child(3):before{
    top: -110px;
    left: 15px;
    height: 110px;

}
.arrow_list_table li:nth-child(3):after{
    top: -119px;
    left: 8px;
	}
}
/* -------------------------------------------------------------------

WEB明細サービス「MyJチェック（登録無料）」

------------------------------------------------------------------- */
.myj-body{
	max-width:90%;
	margin: 0 auto;
	letter-spacing:1px;
	padding:3em 0 ;
	display:grid;
	grid-template-columns:1fr;
	gap:20px 0 ;
}
@media screen and (min-width:768px){
.myj-body{
	max-width:900px;
	padding:0em 0 10em;
	grid-template-columns:.2fr 1.6fr;
	gap:20px;
	
	}
}
.myj-body dl dt{
	font-size:clamp(14px, 2vw, 18px);
	font-weight:700;
}
.myj-body dl dd{
	font-size:clamp(12px, 2vw, 14px);
	margin:5px 0 0 ;
	font-weight:300;
	font-family: 'Hiragino Sans W3', sans-serif;
}
.myj-body dl dd ul{
	font-size:clamp(11px, 2vw, 14px);
	margin:10px 0  ;
}
.myj-body dl dd ul li{
	padding-left:1em;
	text-indent:-1em;
}
.myj-body dl dd ul li:before{
	content:"※";
}
.myj-body dl dd a{
	font-size:clamp(12px, 2vw, 14px);
	color:var(--color);
	background:url(../cmn/images/arrow_blank.png) no-repeat 100% 50%;
	background-size:11px;
	padding-right:15px;
}
/*----作り治し----*/
.txt-area{
	margin:0px  auto 10px;
}
.txt-area .area--title{
	margin:0px  auto 10px;
	text-align:center;
	font-size:clamp(14px, 2vw, 18px);
	font-family: 'Hiragino Sans W3', sans-serif;z
}
.txt-area ul{
	display:flex;
	justify-content:center;
	gap:0 10px;

	font-size:clamp(14px, 2vw, 18px);
}
.txt-area .text-weight{
	font-weight:700;
		line-height:1.5;
}
.txt-area .text--large{
	font-size:clamp(24px, 2vw, 35px);
}
.txt-area .yellow-lbl{
	color:#c1272d;
}
@media screen and (max-width:768px){
.txt-area ul li img{
	max-width:35px;
	}

}
.txt-area02{
	margin:0px  auto 10px;
}
.txt-area02 .area--title{
	margin:0px  auto 10px;
	text-align:center;
	font-size:clamp(14px, 2vw, 18px);
	font-family: 'Hiragino Sans W3', sans-serif;z
}
.txt-area02 ul{
	display:flex;
	justify-content:center;
	gap:0 10px;

	font-size:clamp(14px, 2vw, 18px);
}
.txt-area02 .text-weight{
	font-weight:700;
		line-height:1.5;
}
.txt-area02 .text--large{
	font-size:clamp(22px, 2vw, 35px);
}
.txt-area02 .yellow-lbl{
	color:#c1272d;
}
@media screen and (max-width:768px){
.txt-area02 ul li img{
	max-width:60px;
	}

}



.scroll-box {
  width:100%;
	background:#fff;
}

.scroll-box table figure{
	max-width:180px;
	margin: 0 auto;
}

.scroll-box table {
  border-collapse: collapse;
  border-spacing: 0;
  max-width: 960px;
 	margin: 0 auto 5px;
	font-family: 'Hiragino Sans W3', sans-serif;
	table-layout: fixed;
}
@media screen and (max-width:768px){
.scroll-box table {
  width: 90%;
	}
}

.scroll-box table th,
.scroll-box table td {
  vertical-align: middle;
  padding: 20px;
  border: 1px solid #1a1a1a;
  color: #000;
  font-size: 14px;
  text-align: center;
  color: var(--color);
}
@media screen and (max-width:768px){
.scroll-box table th,
.scroll-box table td {
  border: 1px solid #ccc;
	}
}

.scroll-box table th {
  background: #fff;
  font-weight:700;
 	font-size:clamp(14px, 2vw, 14px);
  width: 200px;
}
@media screen and (max-width:768px){
.scroll-box table th {
  background: #f8f8f8;
  font-weight:700;
  width: 100%;
  border: 1px solid #ccc;
   padding:10px 0;
	}
}

.scroll-box table td {
	width:400px;
}
@media screen and (max-width:768px){
.scroll-box table td {
	width:auto;
	padding:20px 20px 20px;
	}
.scroll-box table .first{
  border-right: 1px solid #ccc;
	}
}

.scroll-box table .ver-top{
  vertical-align: top;
}

.scroll-box table .middle{
  vertical-align: middle;
	padding: 20px 20px ;
}
@media screen and (max-width:768px){
.scroll-box table .middle{
  vertical-align: middle;
	padding: 20px 20px 20px;
	}

}

.scroll-box table .onleft{
	text-align:left;
}
.pcspace{
	height:30px;
	}

.scroll-box table td dl{
	text-align:left;
}
.scroll-box table td dl dt{
  font-weight:700;
  margin: 0 0 5px;
}

.scroll-box table td dl.border-up{
	padding:20px 0 0;
	margin:20px 0 0;
	border-top:1px solid #ccc;
}
.scroll-box table .table-notice{
 	font-size:clamp(11px, 2vw, 13px);
 	margin:10px 0 0px;
 	padding-left:1em;
	text-indent:-1em;
	text-align:left;
}
.scroll-box table .table-notice_last{
 	font-size:clamp(11px, 2vw, 13px);
 	margin:10px 0 0px;
 	padding-left:1em;
	text-indent:-1em;
	text-align:left;
}

.scroll-box table .table-list{
 	font-size:clamp(13px, 2vw, 14px);
	text-align:left;
 	margin:0px 0 0px ;
}
.scroll-box table .table-list li{
 	margin:3px 0 ;
}



/*----------------------------------------

リッターのテーブル

-----------------------------------------*/
.arrow_list_table{
	display:none;
}
@media screen and (max-width:768px){
.arrow_list_table{
	display:block;
	}
}

.liter_zone{
	text-align:center;
}
@media screen and (min-width:769px){
.table-liter{
	display:none;
	}
}


@media screen and (max-width:768px){
.liter_zone figure{
	display:none;
	}
.table-liter{
	border:1px solid #1a1a1a;
 	font-size:clamp(11px, 2vw, 13px);
 	margin:20px 0 0;
}
.table-liter th,
.table-liter td{
	padding:10px;
	border:1px solid #1a1a1a;
	}
.table-liter td{	
	text-align:center;
	}
.table-liter th{	
	background:#006ebb;
	color:#fff;
	}
.table-liter .liter-days{	
	width:50px;
	text-align:center;
	}
.table-liter .red-style{	
	color:#d5182b;
	font-weight:700;
	}
.table-liter .red-bg{	
	background:#d5182b;

	}
}

.jpoint-text{
	margin:10px 0 10px;
 	font-size:clamp(11px, 2vw, 13px);
	font-family: 'Hiragino Sans W3', sans-serif;
}
.jpoint-text_center{
	margin:10px auto 0px;
 	font-size:clamp(11px, 2vw, 13px);
 	text-align:center;
 	font-family: 'Hiragino Sans W3', sans-serif;
}
.amazon-text{
	margin:20px 0 0;
 	font-size:clamp(11px, 2vw, 13px);
 	font-family: 'Hiragino Sans W3', sans-serif;
}
.back-text{
	margin:20px 0 10px;
 	font-size:clamp(11px, 2vw, 13px);
 	font-family: 'Hiragino Sans W3', sans-serif;
}



/* -------------------------------------------------------------------

構成変更20251209

------------------------------------------------------------------- */
.simulation-inner_new{
	background:#DCEAF7;
	max-width:90%;
	margin: 0 auto 30px;
	padding:20px;

}
.simulation-inner_new .simulation-inner_new_text{
 	font-size:clamp(14px, 2vw, 16px);
 	font-family: 'Hiragino Sans W3', sans-serif;
 	margin:0 0 20px;
 	text-align:center;
 	line-height:1.6;
}

@media screen and (min-width:769px){
.simulation-inner_new .simulation-inner_new_text{
	text-align:left;
	}
}

.simulation-inner_new .simulation-inner_new_text .undl{
	text-decoration:underline;
}
.simulation-inner_new_white{
	background:#fff;
	max-width:100%;
	margin: 0 auto 0px;
	padding:10px;
	display:grid;
	grid-template-columns:1fr;
	gap:20px 0;
	 	position:relative;
}
@media screen and (min-width:769px){
.simulation-inner_new_white{
	padding:15px;
	grid-template-columns:1fr 1fr;
	align-items:center;
	gap:10px ;
	}

}

.simulation-blue{
	background:#EFF8FC;
	padding:10px 15px;
 	font-size:clamp(14px, 2vw, 15px);
 	font-family: 'Hiragino Sans W3', sans-serif;
}

.simulation-blue .type-pink_color{
	color:#0098D8;

}
.simulation-blue dt{
	font-weight:700;
 	font-size:clamp(16px, 2vw, 20px);
 	margin:0 0 10px;

}


.simulation-inner_new .simulation-inner_new_text .und_bai{
	font-size:clamp(14px, 2vw, 25px);
	font-weight:700;
}
.idex-denki{
	background:#78C96D;
	color:#fff;

}
.simulation-green{
	background:#006837;
	padding:20px 15px 25px;
 	font-size:clamp(14px, 2vw, 15px);
 	font-family: 'Hiragino Sans W3', sans-serif;
}

@media screen and (min-width:769px){
.simulation-green{
	padding:10px 15px;
	}
}

.simulation-green dt{
	font-weight:700;
 	font-size:clamp(16px, 2vw, 20px);
 	margin:0 0 10px;

}
.green-only{
	background:#215F9A;
	color:#fff;
	padding:6px 10px;
	position:absolute;
	right:50%;
	top:133px;
 transform: translateX(50%);
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
 	font-size:clamp(12px, 2vw, 15px);
 	width:75%;
 	text-align:center;
 	border-radius:5px;
}
@media screen and (min-width:769px){
.green-only{
	padding:5px 10px;
	right:2%;
	top:-15px;
 transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
   	width:35%;
	}
}
.figure-green{
	margin:5px 0 0;
}
@media screen and (min-width:769px){
.figure-green{
	margin:0px 0 0;
	}
}
.simulation-max{
	max-width:90%;
	margin: 0 auto 30px;
	padding:20px 0;
}
.simulation-max dl{
	text-align:center;
	padding:20px 0;
}
.simulation-max dl dt{
 	font-size:clamp(15px, 2vw, 17px);
 	font-family: 'Hiragino Sans W3', sans-serif;
	margin:0 0 10px;
}
.simulation-max dl .space-bottom{
	margin:0 0 10px;
}
@media screen and (min-width:769px){
.simulation-max dl .space-bottom{
	margin:0 0 -30px;
	}
}
.simulation-max_sp{
	display:none;
}
@media screen and (max-width:769px){
.simulation-max_sp{
	text-align:center;
	display:block;
	}
}
.new-inner_box_color{
	background:#FBF6E4;
	padding:5px 15px 20px;
	margin:30px 0 0;
}
@media screen and (min-width:769px){
.new-inner_box_color{
	padding:5px 0px 20px;
	}
}


/* 基本見た目 */




.sp-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0px 0 0px;
  background: none;
   border: none;
	position:relative;

}
@media screen and (max-width:769px){
.sp-summary {
  width: 60%;
  padding: 10px 0;
  cursor: pointer;
  border: none;
  margin: 0 auto 20px;
  background: #f3f3f3;
	text-align:center;
	font-size:16px;
  display: flex;
  justify-content: center;   /* 中央寄せ */
  align-items: center;
	}
.sp-accordion{
	margin: 0 0 40px;
	}
}



/* アニメ対象 */
.acc-inner {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 360ms ease, opacity 260ms ease;
  will-change: max-height, opacity;
}

/* 中身の余白 */
.acc-inner .acc-inner-content {
  padding: 0px 0px 20px 0px;
}
.acc-close-btn:focus {
  outline: none;
}
/* 閉じるボタン */
.acc-close-btn {
  display: block;
  width: 80%;
  padding: 10px;
  margin: 12px auto 0;
  border: none;
  background: #f3f3f3;
  border-radius: 6px;
  cursor: pointer;
}

/* 開いている時（is-open）：好きな位置（例：右上） */
.sp-accordion.is-open .sp-summary::after {
  transform: none;
}


/* PC（常時展開、アコーディオン無効化） */
@media (min-width: 769px) {

  .sp-summary { pointer-events: none; display: none;}
  .sp-summary:after { display: none; }

  .acc-inner {
    max-height: none !important;
    opacity: 1 !important;
    margin:0 0 100px;
  }

  /* PCでは閉じるボタンを非表示 */
  .acc-close-btn {
    display: none;
  }
}

details.closing .accordion-content {
  transition: none !important;
}

.h2-title_body,
.sp-accordion .h2-title_body{
	text-align:center;
	margin:0 auto;
}

.margin-step01{
	margin:80px auto 15px;
}
@media screen and (max-width:769px){
.margin-step01{
	margin:40px auto 15px;
	max-width:80%;
	}
}

.margin-step02{
	margin:120px auto 15px;
}
@media screen and (max-width:769px){
.margin-step02{
	margin:80px auto 15px;
	max-width:80%;
	}
}

.margin-step03{
	margin:80px auto 15px;
}
@media screen and (max-width:769px){
.margin-step03{
	margin:40px auto 15px;
	max-width:90%;
	}
}

.margin-step04{
	margin:120px auto 15px;
}
@media screen and (max-width:769px){
.margin-step04{
	margin:80px auto 15px;
	max-width:90%;
	}
}
.wh-bg{
	background:#fff;
	padding:2em;
	max-width:1000px;
}
@media screen and (max-width:769px){
.wh-bg{
	padding:2em;
	max-width:90%;
	}
}


.area-space{
	padding:30px 0;
}
.jpoint-center{
	text-align:center;
}
@media screen and (max-width:769px){
.jpoint-center{
	text-align:center;
	max-width:80%;
	margin: 0 auto;
	}
}