@charset "utf-8";

.clearfix:after {
  content: ""; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}

.keyvis_scrlBg { background: white; position: relative; z-index: 10;}

.leadBlk {
	background-color:white;
	background-image:url(../img/lead_bg_bottom.png);
	background-repeat:no-repeat;
	background-position:bottom;
	background-size:contain;
	color:#fff;
	text-align:center;
	padding:7% 10% 15%;
	
}
.leadBlk h2 { margin-bottom:3%;}

.tabTxtBlk { display:table; width:100%; height:auto; margin-top:20px;}
.tabTxtBlk li { display:table-cell; width:50%; text-align:center; padding-bottom:5px;}
.tabTxtBlk li span { display:block;}
.tabTxtBlk li span img { width:10%;}
.tabTxtBlk li.txt01 a { font-size:10px; font-weight:bold; color:#08b7f1;}
.tabTxtBlk li.txt02 a { font-size:10px; font-weight:bold; color:#d02d2d;}

.tabBlk { display:table; width:100%; height:auto;}
.tabBlk li { display:table-cell;}
.questiontBlock {
	background-color:#d02d2d;
	box-shadow: 0 -3px 0 0 rgba(0,0,0,0.3) inset;
	border-radius:25px;
	width:70%;
	text-align:center;
	margin:30px auto 20px;
}

.questiontBlock.blue {
	background-color:#1DC3C8;
	border-radius:0px;}

.questiontBlock_head {
	position:relative;
	padding:0 10px;
}
.questiontBlock_head .inr {
	display:table;
	width:100%;
	height:30px;
}
.questiontBlock_head .icon {
	display:table-cell;
	vertical-align:middle;
	width:36px;
}
.questiontBlock_head .heading a {
	display:block;
	vertical-align:middle;
	padding:10px 15px 10px 0;
	color:#fff;
	text-align:center;
	font-weight:bold;
}
.questiontBlock_body {
	padding:0 10px 10px;
}
.questiontBlock .tglSld_icon:after {
	content:"";
	display:inline-block;
	width:12px;
	height:8px;
	background-image:url(/commonY15/img/sprite/icons_utility.png?v=161020);
	background-repeat:no-repeat;
	-webkit-background-size:250px 250px;
	background-size:250px 250px;
	background-position: -43px -17px;	
	position:absolute;
	top:50%;
	right:15px;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}

.grade_L { border:solid 2px #1055c6;}
.grade_S { border:solid 2px #f240c2;}
.grade_A { border:solid 2px #ea7d3c;}
.grade_B { border:solid 2px #f1d20c;}
.grade_L,
.grade_S,
.grade_A,
.grade_B { position:relative; margin:0 10px 10px;}
div .wpn {
	position:absolute;
	width:70px;
	height:auto;
	top:-6px;
	left:-6px;
}
div .htlName {
	clear:both;
	font-weight:bold;
	margin:0 0 10px 30px;
}
.grade_L .grade_ttl { color:#1055c6;}
.grade_S .grade_ttl { color:#f240c2;}
.grade_A .grade_ttl { color:#ea7d3c;}
.grade_B .grade_ttl { color:#f1d20c;}
.grade_ttl {
	float:left;
	font-weight:bold;
	margin:10px 0 10px 60px;
}
.icn {
	float:right;
	width:20%;
	height:auto;
	margin:10px 10px 10px 0;
}
.accordion {
	margin:15px 0;
	padding:0 15px;
}
.accCts .accTxt a { color:#3366ff; text-decoration:underline;}
.textchange {
	display:inline-block;
	width:100%;
	margin:0 auto;
	padding:10px 0;
	text-align:center;
}



.btn {
	border:solid 1px #dcdcdc;
	background-image:url(../img/icon_pls.png);
	background-repeat:no-repeat;
	background-position:95% center;
	background-size:15px;
}
.btn.is-active {
	background-image:url(../img/icon_mns.png);
}
.srchTbl { padding:0 15px;}
.srchTbl dl {
	display:table;
	width:100%;
	border:solid 1px #d02d2d;
	margin:0 0 15px;
}
.srchTbl dl dt,
.srchTbl dl dd { display:table-cell; text-align:center; vertical-align:middle; padding:10px 0;}

.srchTbl dl dt { background-color:#d02d2d; color:#fff}
.srchTbl dl dd span { color:#d02d2d;}

.srchTbl dl dd .title { display:none;}

.supportDesk {
	background-image:url(../img/parts_deskBg.png);
	 background-size:contain;
	background-repeat:repeat;
	border:solid 1px #89d62e;
	margin-bottom:20px;
}
.supportDesk h4 { margin:5px 5px 10px;}
.supportDesk ul { background-color:#caeea0; margin:0 10px 10px; padding:15px;}
.supportDesk ul .pic_desk { /*float:left; */width:100%; height:auto; margin:5px 0;}
.supportDeskInfo { background-color:#fff; border:solid 10px #caeea0; padding:10px;}
.supportDeskInfo h4 { margin-bottom:10px;}
.supportDeskInfo dl { display:table; border-bottom:solid 1px #caeea0; width:100%; height:auto; margin-bottom:10px; padding-bottom:10px;}
.supportDeskInfo dl dt,
.supportDeskInfo dl dd { display:table-cell;}
.supportDeskInfo dl dt { float:right; width:86%; height:auto; color:#eb305f; text-align:left;}
.supportDeskInfo dl .icon { float:left; width:12%; height:auto;}
.supportDeskInfo dl .text { float:right; width:86%; height:auto; text-align:left;}
.supportDeskInfo .accordion { padding:0;}
.supportDeskInfo .btn { background-color:#fff;}

.attractiveMap {
	position:relative;
	background-image:url(../img/parts_map.png);
	background-size:contain;
	background-repeat:no-repeat;
	margin:20px 10px;
	padding-top: 53.85%;
}
.attractiveMap p { position:absolute;}
.attractiveMap .btn_map01 { top:20%; left:3%; width:25%;}
.attractiveMap .btn_map02 { top:23%; left:30%; width:25%;}
.attractiveMap .btn_map03 { top:27%; left:57%; width:24%;}
.attractiveMap .btn_map04 { top:47%; left:76%; width:22%;}


/*モーダル用*/
#lean_overlay {
	position: fixed; z-index:100;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background: #000;
	display: none;
}
	
/*両モーダル共通*/
/*.modal_block { display: none;}*/
.modal_block_pkg .txt,
.modal_block_dp .txt { margin: 0 auto; width: 100%;}
.modal_block_pkg ul,
.modal_block_dp ul { width: 100%; margin-bottom: 6px;}
.modal_block_pkg .txt ul li,
.modal_block_dp .txt ul li { margin-bottom: 5px; text-indent: -1rem; padding-left: 1rem; font-size: 14px;}
.modal_block_pkg .txt ul li span,
.modal_block_dp .txt ul li span { color: #eeb13c; font-size: 18px; font-weight: 900;}

.mfp-close { height:30px; line-height:30px;}

/*パッケージモーダル用*/
.modal_block_pkg { width: 90%; padding: 10px; margin: 10px auto 0; background: #fff; border: 4px solid #08b7f1;}
.modal_block_pkg .ttl { border: 4px solid #08b7f1; color: #08b7f1; font-size: 18px; line-height:1.3; font-weight: bold; margin: 0 auto 5px; padding: 5px 0; text-align: center;  width: 100%;}
.modal_block_pkg .txt ul li::before {
	content: '';
	display: inline-block;
	background: #08b7f1;
	width: 6px;
	height: 18px;
	vertical-align: -3px;
	margin-right: .6rem;
}

/*DPモーダル用*/
.modal_block_dp { width: 90%; padding: 10px; margin: 10px auto 0; background: #fff; border: 4px solid #d02d2d;}
.modal_block_dp .ttl { border: 4px solid #d02d2d; color: #d02d2d; font-size: 16px; font-weight: bold; margin: 0 auto 5px; padding: 5px 0; text-align: center;  width: 100%;}
.modal_block_dp .txt ul li::before {
	content: '';
	display: inline-block;
	background: #d02d2d;
	width: 6px;
	height: 18px;
	vertical-align: -3px;
	margin-right: .6rem;
	}

	/*閉じるボタン用*/
	.js-c-lightbox-content .close-btn {
		position: relative;
		margin: 10px auto 0 auto;
		color: #999 !important;
		text-align: center;
		cursor: pointer;
		background: none;
		border: none;
	}
	.js-c-lightbox-content .close-btn::before {
		content: '';
		display: inline-block;
		background:url(../img/icn_ac_close.png);
		background-size: cover;
		width: 2rem;
		height: 2rem;
		margin-right: 5px;
		vertical-align: -4px;
	}	
	.mfp-close { width:auto; font-size:14px;}
	
	#headerAreaWrap { position: absolute; top: 0; left: 0; z-index: 10;}
	.android #headerAreaWrap { position:static; top: 0; left: 0; z-index: 10;}
#headerArea .headerTop { background: white; margin: 0; padding: 0 10px;}

.keyvisWrap { position: fixed; top: 0; left: 0; z-index: 0;}
.android .keyvisWrap  { position:static; top: 0; left: 0; z-index: 0;}

#keyvis {
	width: 100vw;
	padding-top: 45%;
	/* padding-top: 55%; */
	background: url(../img/bg_ttl.jpg);
	background-size: cover;
	position: relative;
}

.android #keyvis {
	padding-top: 25%;
}


#keyvis h1 {
	width: 90vw;
	max-width: 640px;
	margin: 0 auto 0 auto;
}

#keyvis::after {
	content: '';
	display: block;
	width: 80px;
	height: 40px;
	position: absolute;
	left: 50%;
	margin-left: -40px;
	background: url(../img/btn_scroll.png);
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 0;
}

.leadBlkWrap { padding-top: 100vh; position: relative; z-index: 0;}
.android .leadBlkWrap { padding-top: 0; position: relative; z-index: 0;}

.tabTxtBlk { padding-top: 20px; margin-top: 0;}
.attractiveMap { margin-bottom: 0; padding-bottom: 20px;}
.contents { margin-bottom: -20px;}

.wifi_top{ display: block; padding: 8px; border: 1px #fff solid; border-radius: 100px; margin-top: 20px; background-color: rgba(0,0,0,0.2)}
.wifi_top span{ color: #fff; font-size: 1.2rem; line-height: 1.2; display: block; margin: 1px;}
.wifi_top span.yellow{ font-size: 1.3rem; color: #ffff00; font-weight: bold;}

/*----220727_htlinfo----*/
.htlinfo-out{
	padding: 0 15px;
}
.htlinfo {
	width: 100%px;
	border-radius: 5px;
	padding: 6px;
	margin-bottom: 15px;
	background-color: #009b74;
	box-shadow: #a9a8a8 3px 3px;
	opacity: 0.8;
	position: relative;
	text-align: center;
	transition: all 0.3s ease;
}
.htlinfo a {
	color: white;
	font-size: 16px;
	line-height: 1.3;
	text-decoration-line: none;
	text-align: center;
}
.htlinfo:hover {
	opacity: 1.0;
	box-shadow: none;
	transform: translateY(3px);
	transform: translateX(3px);
}
.inline-block {
display: inline-block;
}

/* 20230512 */
#bnr {
	margin-bottom: 20px;
}
.btn_pamphlet a {
	color: #0f0f69;
	display: block;
	margin-top: 15px;
	font-size: 16px;
  }
  .red {
	color: #cc0000;
  }
  
  .panfu_txt {
	margin-top: 15px;
	font-size: 14px;
  }
  .slider_list {
	display: flex;
    width: 100%;
    height: auto;
    overflow-x: scroll;
	margin-bottom: 30px;
  }

   
  .slider_list li {
	width: 55%;
    margin: 15px;
    flex-shrink: 0;
  }

  /* 20240123追加 */
  .bn_headline {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bn_headline::before,
.bn_headline::after {
    width: 2px;
    height: 40px;
    background-color: #333333;
    content: '';
}

.bn_headline::before {
    transform: rotate(-35deg);
    margin-right: 16px;
}

.bn_headline::after {
    transform: rotate(35deg);
    margin-left: 16px;
}