@charset "utf-8";

/* ------------------------------------------------
	ベース
------------------------------------------------ */

#lineuplist {
	line-height: 1.4;
}

#lineuplist .w1166 {
	max-width: 1166px;
	margin-right: auto;
	margin-left: auto;
	overflow-y: hidden;
	overflow-x: auto;
}

.kirigamine-contents-warp,.zubadan-contents-warp {
	background-color: #e6eef3;
	padding-top: 28px;
	padding-right: 4%;
	padding-bottom: 57px;
	padding-left: 4%;
}


@media only screen and (max-width: 767px) {
	html,body{
		min-height: 100vh;
	}

	.kirigamine-contents-warp,.zubadan-contents-warp {
		padding-top: 12px;
		padding-bottom: 90px;
	}
	.product-wrapper {
		max-width: 668px;
		margin-right: auto;
		margin-left: auto;
	}

}

/* ------------------------------------------------
	sticky
------------------------------------------------ */
.sticky:before,.sticky:after {
	content: '';
	display: table;
}

.sticky {
	position: sticky;
	position: -webkit-sticky; /* Safari */
	top: 0;
	z-index: 2;
}


/* ------------------------------------------------
	見出し
------------------------------------------------ */

.pagettl {
	margin-top: 115px;
	margin-bottom: 40px;
}

@media only screen and (max-width: 767px) {
	.pagettl {
		margin-top: 35px;
		margin-bottom: 20px;
	}

	.headline .inner {
		font-size: 126.25%;
	}

}

/* ------------------------------------------------
	スクロール説明
------------------------------------------------ */

.scroll_info {
	display: none;
	text-align: center;
}

.scroll_illust {
	max-width: 220px;
	width: 41.6666%;
	margin-top: 2.5%;
	margin-bottom: 18px;
}

@media only screen and (max-width: 767px) {
	.scroll_info {
		display: block;
	}

}


/* ------------------------------------------------
	タブ
------------------------------------------------ */
#kirigamine_contents #lineuptabArea {
		height: 62px;
		position: relative;
}
#kirigamine_contents #lineuptabArea ul {
	display: flex;
	justify-content: center;
	text-align: center;
}

#kirigamine_contents #lineuptabArea ul li {
	width: 295px;
	height: 62px;
}

#kirigamine_contents #lineuptabArea ul li button {
	width: 295px;
	height: 62px;
	display: block;
	overflow: hidden;
	line-height: 62px;
	color: #244980;
	background-color: #fff;
	border-top: solid 1px #f2ede8;
	border-right: solid 1px #f2ede8;
	border-left: solid 1px #f2ede8;
	box-sizing: border-box;
	font-size: 112.5%;
	letter-spacing: 0.1em;
}
#kirigamine_contents #lineuptabArea ul li button.current {
	background-color: #e6eef3;
	border: solid 1px #e6eef3;
}

#kirigamine_contents #lineuptabArea ul li button:hover {
	background-color: #e6eef3;
	border: solid 1px #e6eef3;
	text-decoration: none;
}


#kirigamine_contents #lineuptabArea ul li a:hover {
}

#kirigamine_contents #lineuptabArea ul li.zbdn button.current {
	background-color: #f2ede8;
	border: solid 1px #f2ede8;
}

#kirigamine_contents #lineuptabArea ul li.zbdn button:hover {
	background-color: #f2ede8;
	border: solid 1px #f2ede8;
}

@media only screen and (max-width: 767px) {
	#kirigamine_contents #lineuptabArea ul li {
		width: 46%;
	}

	#kirigamine_contents #lineuptabArea ul li button {
		width: 100%;
		font-size: 100%;
	}

}

/* ------------------------------------------------
	表組み
------------------------------------------------ */
.product-wrapper,
.product-wrapper * {
	box-sizing: border-box;
	border-collapse: collapse;
}


.header-top {
	position: sticky;
	top: var(--sticky-top, 0px);
	z-index: 2;
	max-width: 1166px;
	margin-right: auto;
	margin-left: auto;
}

.intro-text {
	padding-top: 5px;
	padding-bottom: 26px;
	font-size: 93.75%;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background-color: #e6eef3;
}

.intro-text .icon_ai {
	margin-right: 0.25em;
	margin-bottom: 2px;
}

.theader_product_lineup {
	top: 50px;
}

.fz_bgcolor {background-color: #709bb0;}
.z_bgcolor {background-color: #bab049;}
.fl_bgcolor {background-color: #231815;}
.x_bgcolor {background-color: #7aa55c;}
.r_bgcolor {background-color: #38908c;}
.s_bgcolor {background-color: #645159;}
.ge_bgcolor {background-color: #6d7caa;}

.table-header {
	display: flex;
	background-color: #ffffff;
}

.table-header-heading {
	width: 200px;
	flex-shrink: 0;
	background-color: #fff;
	position: sticky;
	left: 0;
	z-index: 1;
	border-right: solid 2px #e6eef3;
	box-sizing: border-box;
	min-height: 100px;
}

.table-header-heading .inner {
  display: flex;
  justify-content: center;
  align-items: center;
	text-align: center;
	width: 100%;
	height: 100%;
	position: relative;
}

.table-header-heading .button-show-all {
	color: #244980;
	font-size: 87.5%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	height: 20px;
}

.table-header-heading .button-show-all::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 9px;
	height: 14px;
	background: url(../img/img_arrow_red.png) center/contain no-repeat;
	margin-top: -2px;
	margin-right: 5px;
}

.table-header-body {
	flex: 1;
	overflow: auto;
}

.lineup-heading {
	overflow: hidden;
	color: #fff;
}

.lineup-heading table {
  border-collapse: collapse;
  border-spacing: 0;
	text-align: center;
	table-layout: fixed;
}
.lineup-heading td {
	border: none;
}

.lineup-heading a {
	text-decoration: none;
	color: #fff;
}

.lineup-name {
	font-size: 112.5%;
}

.lineup-heading .model-name {
	font-size: 87.5%;
	margin-bottom: 13px;
}

.lineup-heading p.model_year {
	font-size: 75%;
	margin-bottom: 7px;
}

.lineup-link {
	font-size: 75%;
	display: inline-block;
	vertical-align: middle;
}

.lineup-link::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 8px;
	height: 22px;
	background: url(../img/img_arrow_wh_right.png) center/contain no-repeat;
	margin-top: -2px;
	margin-right: 5px;
}

.lineup-cell {
	width: 138px;
	min-width: 138px;
	position: relative;
	padding-top: 30px;
	padding-bottom: 14px;
}

.lineup-close-btn,.modal-close-btn {
	position: absolute;
	top: 5px;
	right: 5px;
}

.lineup-close-btn span,.modal-close-btn span {
	position: relative;
	display: block;
	width: 12px;
	height: 12px;
}

.lineup-close-btn span:before,.lineup-close-btn span::after,.modal-close-btn span:before,.modal-close-btn span::after {
	content: "";
	display: block;
	width: 100%;/*バツ線の長さ*/
	height: 1px;/*バツ線の太さ*/
	background: #fff;
	transform: rotate(45deg);
	transform-origin:0% 50%;
	position: absolute;
	top: calc(14% - 0.5px);
	left: 14%;
}
.lineup-close-btn span::after,.modal-close-btn span::after {
	transform: rotate(-45deg);
	transform-origin:100% 50%;
	left: auto;
	right: 14%;
}

#kirigamine_contents .feature-section {
	clear: both;
	color: #244980;
	background-color: #fff;
	font-size: 87.5%;
}

.feature-heading {
	display: block;
	background-color: #b2cbd9;
	width: 1166px;
	text-align: left;
	color: #fff;
	font-weight: bold;
	padding-top: 12px;
	padding-bottom: 12px;
	box-sizing: border-box;
}

.feature-heading tbody {
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	display: inline-block;
}

.is-ie .feature-heading tbody {
	position: relative;
	left: auto;
}

.is-deactive .feature-heading {
	border-bottom: solid 2px #e6eef3;
}

.feature-heading span {
	padding-left: 15px;
}

.feature-heading span::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 15px;
	height: 9px;
	background: url(../img/img_arrow_wh_up.png) center/contain no-repeat;
	margin-top: -2px;
	margin-right: 15px;
	-webkit-transition: .25s ease-out;
	transition: .25s ease-out;
}

.is-deactive .feature-heading span::before {
	transform:rotate(180deg);
	-webkit-transition: .25s ease-out;
	transition: .25s ease-out;
}

.feature-table {
	width: 1166px;
	background-color: #fff;
}

.feature-table-row {
	display: flex;
	align-items: stretch;
}

.feature-table-subject {
	position: sticky !important;
	left: 0;
	z-index: 1;
	flex-shrink: 0;
	width: 200px;
	min-width: 200px;
	min-height: 45px;
	border-right: solid 2px #e6eef3;
	border-top: solid 2px #e6eef3;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 13px;
	vertical-align: middle;
	display: flex;
	align-items: center;
	background-color: #fff;
	box-sizing: border-box;
}

.is-ie .feature-table-subject {
	position: relative !important;
}

.feature-table-subject button {
	text-align: left;
	text-decoration: underline;
	letter-spacing: -0.05em;
}

.feature-table-subject button.no_click {
	text-decoration: none;
	pointer-events: none;
}

.feature-table-body {
	flex: 1;
	overflow: hidden;
}

.feature-table-body table {
  border-collapse: collapse;
  border-spacing: 0;
	text-align: center;
	height: 100%;
	table-layout: fixed;
	box-sizing: border-box;
	border-collapse: collapse;
}

.feature-table-body th {
	border-collapse: collapse;
}

.feature-table-body td {
	width: 138px;
	min-width: 138px;
	height: 100%;
	text-align: center;
	padding-top: 12px;
	padding-bottom: 12px;
	border-right: solid 2px #e6eef3;
	border-top: solid 2px #e6eef3;
	box-sizing: border-box;
	background-color: #ffffff;
	border-collapse: collapse;
}

.border-top-none .feature-table-subject,.border-top-none .feature-table-body td {
	border-top: none;
}

.h_90 {
	height: 90px;
}

.icon_ai {
	width: 28px;
	height: 16px;
	vertical-align: middle;
}

.typeL {
	border-top: none;
	box-sizing: border-box;
	left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	width: 176px;
}

.feature-table-subject_Dummy {
	width: 24px;
	height: 45px;
	display: inline-block;
	vertical-align: middle;
}

.typeL .button_typeL {
	display: flex;
}
.typeL-cell {
	display: flex;
	align-items: center;
	vertical-align: middle;
	border-top: solid 2px #e6eef3;
	border-left: solid 2px #e6eef3;
	vertical-align: middle;
	padding-top: 12px;
	padding-left: 12px;
	padding-bottom: 12px;
	flex-grow: 1;
}

.button_typeL .feature-table-subject_text {
	display: flex;
	align-items: center;
	vertical-align: middle;
}

.feature-table-subject-type_L {
	display: flex;
	flex-grow: 1;
}

.circule-sup {
	position: relative;
}

.circule-sup sup{
	position: absolute;
}

@media only screen and (max-width: 767px) {

	.intro-text {
		font-size: 75%;
		padding-bottom: 16px;
	}

	.icon_ai {
		width: 22px;
		height: 13px;
	}

	.table-header-heading {
		width: 115px;
	}

	.table-header-heading button {
		font-size: 75%;
	}

	.lineup-cell {
		width: 76.6px;
		min-width: 76.6px;
		padding-top: 11px;
		padding-bottom: 4px;
	}

	.h_90 {
		height: inherit;
	}

	.feature-table-body td {
		width: 76.6px;
		min-width: 76.6px;
		height: 100%;
		text-align: center;
		padding-top: 5px;
		padding-bottom: 5px;
		vertical-align: middle;
	}

	.lineup-heading p.model_year {
		font-size: 62.5%;
		margin-bottom: 2px;
	}

	.lineup-heading .model-name {
    font-size: 62.5%;
    margin-bottom: 0;
		min-height: 4.3em;
}

	.lineup-name {
		font-size: 75%;
		display: inline-block;
		padding: 0 5px;
	}

	.lineup-close-btn span,.modal-close-btn span {
		width: 9px;
		height: 9px;
	}

	.lineup-link {
		font-size: 62.5%;
	}

	.lineup-link::before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		width: 6px;
		height: 17px;
		background: url(../img/img_arrow_wh_right.png) center/contain no-repeat;
		margin-right: 4px;
	}

	.table-header-heading .button-show-all {
		font-size: 75%;
		height: 30px;
	}

	.table-header-heading .button-show-all::before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		width: 7px;
		height: 11px;
		background: url(../img/img_arrow_red.png) center/contain no-repeat;
		margin-top: -2px;
		margin-right: 5px;
	}

	#kirigamine_contents .feature-section {
		font-size: 74.8%;
	}

	.feature-heading {
		padding-top: 6px;
		padding-bottom: 4px;
		width: 100%;
		min-width: 651.2px;
	}

	.feature-heading span {
		padding-left: 8px;
	}

	.feature-heading span::before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		width: 10px;
		height: 8px;
		background: url(../img/img_arrow_wh_up.png) center/contain no-repeat;
		margin-top: -2px;
		margin-right: 5px;
	}

	.feature-table {
		width: 100%;
		min-width: 651.2px;
	}

	.feature-table-subject {
		width: 115px;
		min-width: 115px;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 6px;
		min-height: 25px;
	}


	.feature-table-subject_Dummy {
		width: 16px;
		height: auto;
	}

	.typeL {
		border-top: none;
		padding-top: 0;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
		width: 99px;
	}

	.typeL-cell {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 5px;
	}

}

@media only screen and (max-width:767px) and (orientation: landscape){
	/* -30 */
	.kirigamine-contents-warp .table-header-heading {
		width: 85px;
	}
	.kirigamine-contents-warp .table-header-heading .button-show-all br{
    display: none;
	}
	.kirigamine-contents-warp .feature-table-subject {
		width: 85px;
		min-width: 85px;
	}
	.kirigamine-contents-warp .typeL {
    width: 69px;
	}
	.kirigamine-contents-warp .lineup-heading table {
    width: 100%;
	}
	.kirigamine-contents-warp .lineup-cell {
		width: calc(100% / 7);
    min-width: 75.6px;
	}
	.kirigamine-contents-warp .feature-table {
    min-width: 100%;
	}
	.kirigamine-contents-warp .feature-table-body table {
    width: 100%;
	}
	.kirigamine-contents-warp .feature-table-body td {
    width: calc(100% / 7);
    min-width: 75.6px;
	}
	.kirigamine-contents-warp .feature-heading {
    min-width: 100%;
	}
}


/* ------------------------------------------------
	下部注釈
------------------------------------------------ */
.bottom_note {
	max-width: 1166px;
	margin-right: auto;
	margin-left: auto;
}


@media only screen and (max-width: 767px) {
	.bottom_note {
		font-size: 75%;
	}
	.note+.note {
    margin-top: 0;
	}
}


/*!* -------------------------------
	top_back_button
------------------------------- *!*/
.top_back_button {
	display: block;
	margin-top: 54px;
	text-align: center;
	max-width: 1166px;
	margin-right: auto;
	margin-left: auto;
}
.top_back_button a {
	width: 129px;
	margin: 0 auto;
	box-sizing: border-box;
	border: 1px solid grey;
	border-radius: 5px;
	color: #333;
	display: block;
	padding: 10px 0 10px 0;
	-webkit-transition: .25s ease-out;
	transition: .25s ease-out;
	font-size: 87.5%;
	background-color: #fff;
}
.top_back_button a:hover {
	background-color: #c00;
	text-decoration: none;
	color: #fff;
}


/* ------------------------------------------------
	ズバ暖霧ヶ峰
------------------------------------------------ */

.zubadan-contents-warp {
	background-color: #f2ede8;
}

.zubadan-contents-warp .intro-text {
	background-color: #f2ede8;
}

.zubadan-contents-warp .lineup-cell {
	min-width: 241.5px;
}

.zubadan-contents-warp .table-header-heading {
	border-right: solid 2px #f2ede8;
	box-sizing: border-box;
}

.zubadan-contents-warp .feature-table-body td {
	min-width: 241.5px;
}

.vxv_bgcolor {
	background-color: #e60012;
}

.hxv_bgcolor {
	background-color: #ea5504;
}

.nxv_bgcolor {
	background-color: #f08300;
}

.kxv_bgcolor {
	background-color: #e4aa03;
}

.zubadan-contents-warp .feature-heading {
	background-color: #f29781;
}

.zubadan-contents-warp .theader_product_lineup {
	top: 50px;
}

.zubadan-contents-warp .is-deactive .feature-heading {
	border-bottom: solid 2px #f2ede8;
}

.zubadan-contents-warp .feature-table-subject {
	border-right: solid 2px #f2ede8;
	border-top: solid 2px #f2ede8;
}

.zubadan-contents-warp .feature-table-body td {
	border-right: solid 2px #f2ede8;
	border-top: solid 2px #f2ede8;
}

.zubadan-contents-warp .typeL {
	border-top: none;
}

.zubadan-contents-warp .typeL-cell {
	border-top: solid 2px #f2ede8;
	border-left: solid 2px #f2ede8;
}

.zubadan-contents-warp .border-top-none .feature-table-subject,.zubadan-contents-warp .border-top-none .feature-table-body td {
	border-top: none;
}


@media only screen and (max-width: 767px) {


	.zubadan-contents-warp .feature-heading {
		min-width: 421px;
	}

	.zubadan-contents-warp .lineup-cell {
		min-width: 76.6px;
		width: 20vw;
	}

	.zubadan-contents-warp .feature-table {
		min-width: 421px;
	}

	.zubadan-contents-warp .feature-table-body td {
		min-width: 76.6px;
		width: 20vw;
	}


}

@media only screen and (min-width: 1175px) {

}

/* ------------------------------------------------
	モーダル（ツールチップ）
------------------------------------------------ */
/* Tooltip text */
.tooltiptext {
	width: 560px;
	max-width: 70%;
	line-height: 1.7;
	color: #fff;
	box-sizing: border-box;
	position: absolute;
	background: #72a3b9;
	box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}

.zbdn-tooltiptext {
	background: #eb6e50;
}

.tooltip-inner {
	padding-top: 22px;
	padding-right: 22px;
	padding-bottom: 22px;
	padding-left: 27px;
	position: relative;
}

.tooltiptext .tooltiptext-ttl {
	font-size: 87.5%;
	font-weight: bold;
	padding-bottom: 10px;
	display: inline-block;
	margin-left: -0.25em;
}

.tooltiptext .tooltiptext-body {
	font-size: 87.5%;
	line-height: 1.8em;
	letter-spacing: 0.05em;
}

.tooltiptext .red {
	color: #ec1d00;
}

.tooltiptext-contaienr {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
}

.tooltiptext-contaienr-bg {
	box-sizing: border-box;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.15);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: auto;
	/* width: 100%;
	height: 100%; */
	padding: 15px;
}

	/* todo: ズバ暖だけ色分け必要なら下記を使う */
/* .zubadan-contents-warp + .tooltiptext-contaienr .tooltiptext-contaienr-bg {
	background-color: rgba(255, 255, 255, 0.7);
} */


@media only screen and (max-width: 767px) {
	.tooltiptext {
		width: auto;
		max-width: 100%;
		position: static;
		margin: auto;
	}

	.tooltiptext .tooltiptext-ttl {
		font-size: 75%;
	}

	.tooltiptext .tooltiptext-body {
		font-size: 75%;
		line-height: 2.2em;
		letter-spacing: 0.03em;
	}

	.tooltiptext-contaienr-bg {
		display: flex;
		flex-direction: column;
		padding: 20px;
	}
}

/*!* -------------------------------
    global-sticky
------------------------------- *!*/
@media only screen and (min-width:767px) {.global-sticky{z-index: 99;}}