@charset "UTF-8";
.gas-diagnosis .question::before{
display:none !important;
}
.gas-diagnosis .question::after{
display:none !important;
}
.gas-diagnosis .question-note::before{
display:none !important;
}
.gas-diagnosis .question-note::after{
display:none !important;
}



.gas-diagnosis{
max-width:640px;
margin:auto;
padding:30px 30px 30px 30px;
background:#fafafa;
border-radius:10px;
}

.progress{
margin-bottom:15px;
font-size:14px;
color:#666;
}

.question{
font-size:20px;
margin-bottom:20px;
}

.step{
display:none;
}

.step.active{
display:block;
}

button{
display:block;
width:100%;
margin:10px 0;
padding:14px;
font-size:16px;
border:none;
background:#ff7a00;
color:white;
border-radius:6px;
cursor:pointer;
}

button:hover{
background:#ff9a3d;
}

#result{
display:none;
padding:10px 30px 30px 30px;
background:white;
border-radius:10px;
margin-top:10px;
}

.cta{
display:block;
margin-top:20px;
padding:16px;
text-align:center;
background:#e53935;
color:#fff;
font-weight:bold;
border-radius:6px;
text-decoration:none;
}

.cta-blue {
  display: block;
  margin-top: 20px;
  padding: 16px;
  text-align: center;
  background: #1e88e5; /* 鮮やかな青色 (Material Blue 600) */
  color: #fff;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
}

/* ホバー時の設定 */
.cta-blue:hover {
  background: #42a5f5; /* 少し明るい青 */
}

.cta-green {
  display: block;
  margin-top: 20px;
  padding: 16px;
  text-align: center;
  background: #43a047; /* 鮮やかな緑色 (Material Green 600) */
  color: #fff;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
}

/* ホバー時の設定 */
.cta-green:hover {
  background: #4caf50; /* 少し明るい緑 */
}



/* =============================
進捗バー
============================= */

.diagnosis-progress {
  margin-bottom: 25px;
}

.progress-bar {
  width: 100%;
  height: 10px;
  background: #e5eef8;
  border-radius: 10px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: #2c7be5;
  transition: width .3s;
}

.progress-text {
  text-align: right;
  font-size: 13px;
  margin-top: 6px;
  color: #1f4f8b;
}

.result-title{
display:block;
text-align:center;
}




/*
		テキストの太字
 ----------------------------------------------------------------------*/
.bold{ font-weight: bold; }
.normal{ font-weight: normal; }
.italic{ font-weight: italic; }

/*
		テキストのサイズ
 ----------------------------------------------------------------------*/
.fs05{ font-size: 0.5em; }
.fs06{ font-size: 0.6em; }
.fs07{ font-size: 0.7em; }
.fs08{ font-size: 0.8em; }
.fs085{ font-size: 0.85em; }
.fs09{ font-size: 0.9em; }
.fs10{ font-size: 1.0em; }
.fs11{ font-size: 1.1em; }
.fs12{ font-size: 1.2em; }
.fs13{ font-size: 1.3em; }
.fs14{ font-size: 1.4em; }
.fs15{ font-size: 1.5em; }
.fs16{ font-size: 1.6em; }
.fs17{ font-size: 1.7em; }
.fs18{ font-size: 1.8em; }
.fs19{ font-size: 1.9em; }
.fs20{ font-size: 2em; }
.fs21{ font-size: 2.1em; }
.fs22{ font-size: 2.2em; }
.fs23{ font-size: 2.3em; }
.fs24{ font-size: 2.4em; }
.fs25{ font-size: 2.5em; }


/*
		マージンの位置配置
 ----------------------------------------------------------------------*/



.m0{ margin: 0px!important; }				/*全margin無し*/
.mt-0{ margin-top: 0px!important; }			/*上marginが0px*/
.mr-0{ margin-right: 0px!important; }		/*右marginが0px*/
.mb-0{ margin-bottom: 0px!important; }		/*下marginが0px*/
.ml-0{ margin-left: 0px!important; }		/*左marginが0px*/

.m1{ margin: 1px!important; }
.mt-1{ margin-top: 1px!important; }	
.mr-1{ margin-right: 1px!important; }
.mb-1{ margin-bottom: 1px!important; }
.ml-1{ margin-left: 1px!important; }

.m2{ margin: 2px!important; }
.mt-2{ margin-top: 2px!important; }	
.mr-2{ margin-right: 2px!important; }
.mb-2{ margin-bottom: 2px!important; }
.ml-2{ margin-left: 2px!important; }

.m3{ margin: 3px!important; }
.mt-3{ margin-top: 3px!important; }	
.mr-3{ margin-right: 3px!important; }
.mb-3{ margin-bottom: 3px!important; }
.ml-3{ margin-left: 3px!important; }

.m4{ margin: 4px!important; }
.mt-4{ margin-top: 4px!important; }	
.mr-4{ margin-right: 4px!important; }
.mb-4{ margin-bottom: 4px!important; }
.ml-4{ margin-left: 4px!important; }

.m5{ margin: 5px!important; }
.mt-5{ margin-top: 5px!important; }	
.mr-5{ margin-right: 5px!important; }
.mb-5{ margin-bottom: 5px!important; }
.ml-5{ margin-left: 5px!important; }

.m6{ margin: 6px!important; }
.mt-6{ margin-top: 6px!important; }	
.mr-6{ margin-right: 6px!important; }
.mb-6{ margin-bottom: 6px!important; }
.ml-6{ margin-left: 6px!important; }

.m7{ margin: 7px!important; }
.mt-7{ margin-top: 7px!important; }	
.mr-7{ margin-right: 7px!important; }
.mb-7{ margin-bottom: 7px!important; }
.ml-7{ margin-left: 7px!important; }

.m8{ margin: 8px!important; }
.mt-8{ margin-top: 8px!important; }	
.mr-8{ margin-right: 8px!important; }
.mb-8{ margin-bottom: 8px!important; }
.ml-8{ margin-left: 8px!important; }

.m9{ margin: 9px!important; }
.mt-9{ margin-top: 9px!important; }	
.mr-9{ margin-right: 9px!important; }
.mb-9{ margin-bottom: 9px!important; }
.ml-9{ margin-left: 9px!important; }

.m10{ margin: 10px!important; }
.mt-10{ margin-top: 10px!important; }
.mr-10{ margin-right: 10px!important; }
.mb-10{ margin-bottom: 10px!important; }
.ml-10{ margin-left: 10px!important; }

.m15{ margin: 15px!important; }
.mt-15{ margin-top: 15px!important; }
.mr-15{ margin-right: 15px!important; }
.mb-15{ margin-bottom: 15px!important; }
.ml-15{ margin-left: 15px!important; }

.m20{ margin: 20px!important; }
.mt-20{ margin-top: 20px!important; }
.mr-20{ margin-right: 20px!important; }
.mb-20{ margin-bottom: 20px!important; }
.ml-20{ margin-left: 20px!important; }

.m25{ margin: 25px!important; }
.mt-25{ margin-top: 25px!important; }
.mr-25{ margin-right: 25px!important; }
.mb-25{ margin-bottom: 25px!important; }
.ml-25{ margin-left: 25px!important; }

.m30{ margin: 30px!important; }
.mt-30{ margin-top: 30px!important; }
.mr-30{ margin-right: 30px!important; }
.mb-30{ margin-bottom: 30px!important; }
.ml-30{ margin-left: 30px!important; }

.m40{ margin: 40px!important; }
.mt-40{ margin-top: 40px!important; }
.mr-40{ margin-right: 40px!important; }
.mb-40{ margin-bottom: 40px!important; }
.ml-40{ margin-left: 40px!important; }

.m50{ margin: 50px!important; }
.mt-50{ margin-top: 50px!important; }
.mr-50{ margin-right: 50px!important; }
.mb-50{ margin-bottom: 50px!important; }
.ml-50{ margin-left: 50px!important; }

/*------------------------------------------------------------
		padding
-------------------------------------------------------------*/

.p0{ padding: 0px!important; }				/*全padding無し*/
.pt-0{ padding-top: 0px!important; }		/*上paddingが0px*/
.pr-0{ padding-right: 0px!important; }		/*右paddingが0px*/
.pb-0{ padding-bottom: 0px!important; }		/*下paddingが0px*/
.pl-0{ padding-left: 0px!important; }		/*左paddingが0px*/

.p1{ padding: 1px!important; }
.pt-1{ padding-top: 1px!important; }
.pr-1{ padding-right: 1px!important; }
.pb-1{ padding-bottom: 1px!important; }
.pl-1{ padding-left: 1px!important; }

.p2{ padding: 2px!important; }
.pt-2{ padding-top: 2px!important; }
.pr-2{ padding-right: 2px!important; }
.pb-2{ padding-bottom: 2px!important; }
.pl-2{ padding-left: 2px!important; }

.p3{ padding: 3px!important; }
.pt-3{ padding-top: 3px!important; }
.pr-3{ padding-right: 3px!important; }
.pb-3{ padding-bottom: 3px!important; }
.pl-3{ padding-left: 3px!important; }

.p4{ padding: 4px!important; }
.pt-4{ padding-top: 4px!important; }
.pr-4{ padding-right: 4px!important; }
.pb-4{ padding-bottom: 4px!important; }
.pl-4{ padding-left: 4px!important; }

.p5{ padding: 5px!important; }
.pt-5{ padding-top: 5px!important; }
.pr-5{ padding-right: 5px!important; }
.pb-5{ padding-bottom: 5px!important; }
.pl-5{ padding-left: 5px!important; }

.p6{ padding: 6px!important; }
.pt-6{ padding-top: 6px!important; }
.pr-6{ padding-right: 6px!important; }
.pb-6{ padding-bottom: 6px!important; }
.pl-6{ padding-left: 6px!important; }

.p7{ padding: 7px!important; }
.pt-7{ padding-top: 7px!important; }
.pr-7{ padding-right: 7px!important; }
.pb-7{ padding-bottom: 7px!important; }
.pl-7{ padding-left: 7px!important; }

.p8{ padding: 8px!important; }
.pt-8{ padding-top: 8px!important; }
.pr-8{ padding-right: 8px!important; }
.pb-8{ padding-bottom: 8px!important; }
.pl-8{ padding-left: 8px!important; }

.p9{ padding: 9px!important; }
.pt-9{ padding-top: 9px!important; }
.pr-9{ padding-right: 9px!important; }
.pb-9{ padding-bottom: 9px!important; }
.pl-9{ padding-left: 9px!important; }

.p10{ padding: 10px!important; }
.pt-10{ padding-top: 10px!important; }
.pr-10{ padding-right: 10px!important; }
.pb-10{ padding-bottom: 10px!important; }
.pl-10{ padding-left: 10px!important; }

.p15{ padding: 15px!important; }
.pt-15{ padding-top: 15px!important; }
.pr-15{ padding-right: 15px!important; }
.pb-15{ padding-bottom: 15px!important; }
.pl-15{ padding-left: 15px!important; }

.p20{ padding: 20px!important; }
.pt-20{ padding-top: 20px!important; }
.pr-20{ padding-right: 20px!important; }
.pb-20{ padding-bottom: 20px!important; }
.pl-20{ padding-left: 20px!important; }

.p30{ padding: 30px!important; }
.pt-30{ padding-top: 30px!important; }
.pr-30{ padding-right: 30px!important; }
.pb-30{ padding-bottom: 30px!important; }
.pl-30{ padding-left: 30px!important; }

.p40{ padding: 40px!important; }
.pt-40{ padding-top: 40px!important; }
.pr-40{ padding-right: 40px!important; }
.pb-40{ padding-bottom: 40px!important; }
.pl-40{ padding-left: 40px!important; }

.p50{ padding: 50px!important; }
.pt-50{ padding-top: 50px!important; }
.pr-50{ padding-right: 50px!important; }
.pb-50{ padding-bottom: 50px!important; }
.pl-50{ padding-left: 50px!important; }