@charset "utf-8";
/* リセット
------------------------------------- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

table {border-spacing: 0; border-collapse: collapse;}
* html table {border-collapse: collapse;}
*:first-child+html table {border-collapse: collapse;}
caption,th {text-align: left; font-weight: normal;}
table,th,td,img {border: 0;}
input {vertical-align: middle;}
q:before,q:after {content: '';}
ul {list-style: none;}

hr,
legend,
caption {display: none;}

img {border:0; vertical-align: bottom;}

a:focus { outline: none;}

/* aタグ設定
------------------------------------- */
a:hover {
	opacity: 0.75;
	filter: alpha(opacity=75);
	-ms-filter: "alpha(opacity=75)";
	-moz-opacity: 0.75;
	-khtml-opacity: 0.75;
	zoom: 1;
}
a {
	transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
	text-decoration: none;
}
a {
	display: inline-block;
	color: #4f4a45;
}
header #gNav a,
#function .tabList a,
footer .footerList a {
	transition-property: none;
}
header #gNav a:hover,
#function .tabList a:hover,
footer .footerList a:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
	-moz-opacity: 1;
	-khtml-opacity: 1;
}


/* 基本設定
------------------------------------- */
html { font-size: 62.5%; } 
body {
	-webkit-text-size-adjust: 100%;
	font-size: 14px;
	font-family: YuGothic, "游ゴシック", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	min-width: 1280px;
	background: #f5f3ed;
	color: #4f4a45;
}
#contents {
	padding-bottom: 40px;
}
.inner {
	width: 1120px;
	margin: 0 auto;
}

.btn a {
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
	width: 288px;
	height: 48px;
	border-radius: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #e1d8c2;
	margin: 0 auto;
}

.pageTop {
	width: 64px;
	position: fixed;
	bottom: 33px;
	right: 79px;
}

header {
	width: 100%;
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
}
header .gNavList {
	display: flex;
	padding-left: 67px;
	padding-top: 50px;
}
header .gNavList a {
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
	padding: 0 2px 2px;
}
header .gNavList li {
	border-bottom: 1px solid transparent;
	font-size: 0;
}
header .gNavList li:hover {
	border-bottom: 1px solid #4f4a45;
}
header .white .gNavList li:hover {
	border-bottom: 1px solid #fff;
}
header .gNavList li:not(:first-child) {
	margin-left: 42px;
}

footer {
	padding-bottom: 33px;
}
footer .inner {
	border-top: 1px solid #4f4a45;
	padding-top: 20px;
}
footer .footerList {
	display: flex;
	justify-content: center;
}
footer .footerList a {
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
	padding: 0 2px 2px;
}
footer .footerList li {
	border-bottom: 1px solid transparent;
	font-size: 0;
}
footer .footerList li:hover {
	border-bottom: 1px solid #4f4a45;
}
footer .footerList li:not(:first-child) {
	margin-left: 30px;
}
footer .logo {
	text-align: center;
	margin-top: 20px;
}

#kvArea {
	position: relative;
	padding-bottom: 17px;
}
#kvArea .slideList {
	width: 100000px;
	display: flex;
}
#kvArea .slideArea {
	overflow: hidden;
}
#kvArea .slideList li {
	width: 100vw;
	position: relative;
}
#kvArea .slideList img {
	width: 100%;
	height: auto;
}
#kvArea .slideList .logo {
	width: 21.72vw;
	position: absolute;
	top: 16.09vw;
	left: 11.25vw;
}
#kvArea .slideList .mainLead {
	width: 21.48vw;
	position: absolute;
	top: 27.5vw;
	left: 11.48vw;
}
#kvArea .backBtn {
	position: absolute;
	top: 50%;
	left: 50px;
	transform: translateY(-50%);
	z-index: 3;
}
#kvArea .nextBtn {
	position: absolute;
	top: 50%;
	right: 50px;
	transform: translateY(-50%);
	z-index: 3;
}

section .inner {
	background: #fff;
	padding-top: 52px;
	padding-bottom: 51px;
}
section h2.ttl {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.875;
	text-align: center;
	letter-spacing: 0.2em;
}
section h2.ttl img {
	margin-bottom: 8px;
}
#info .releaseDate {
	background: none;
	text-align: left;
	padding: 0 0 0 68px;
	margin-top: 0;
}
#info .releaseDate {
	font-size: 14px;
	line-height: 1;
}
#info .releaseDate span {
	display: inline-block;
	border-bottom: 1px solid #6e6a65;
	padding-bottom: 4px;
}
#info .releaseDate_02 {
	background: none;
	text-align: left;
	padding: 0 0 0 68px;
	margin-top: 0;
}
#info .releaseDate_02 {
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0.05em;
	color: #e90f0f;
}
#info .releaseDate_02 a {
	color: #e90f0f;
}
#info .releaseDate_02 span {
	display: inline-block;
	border-bottom: 1px solid #e90f0f;
	padding-bottom: 4px;
}


#info .releaseDate_03 {
	background: none;
	text-align: left;
	padding: 0 0 0 68px;
	margin-top: 0;
}
#info .releaseDate_03 {
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0.05em;
	color: #e90f0f;
}
#info .releaseDate_03 a {
	color: #e90f0f;
}
#info .releaseDate_03 span {
	display: inline-block;
	border-bottom: 1px solid #e90f0f;
	padding-bottom: 4px;
}


#info .social-button::after {
	display: block;
	clear: both;
	content: "";
}
#info .social-button > li {
	float: left;
	line-height: 1;
}
#info .social-button > li + li {
	margin-left: 20px;
}
#info .shareArea {
	width: 1120px;
	margin: 0 auto;
}
#info .shareArea::after {
	display: block;
	clear: both;
	content: "";
}
#info .shareArea .releaseDate {
	float: left;
	max-width: calc(50% - 36px);
}




#info .shareArea .releaseDate_03 {
	float: left;
	max-width: calc(100%);
	font-weight: bold;
}




#info .shareArea .releaseDate_02 {
	float: left;
	max-width: calc(50% - 36px);
}

#info .shareArea .social-button {
	float: right;
	max-width: calc(50% - 36px);
}
#about .inner {
	margin-top: 14px;
	text-align: center;
}
#about .txtBox {
	width: 605px;
	font-size: 18px;
	font-weight: bold;
	line-height: 2.2222;
	letter-spacing: 0.05em;
	margin: 17px auto 0;
}
#about .txtBox span {
	display: block;
	background: url("../img/line_dot.png") 0 bottom repeat-x;
	background-size: 5px 2px;
}
#about .txtBox span.spSpan {
	display: inline;
	background: none;
}

#feature .inner {
	padding-left: 68px;
	padding-right: 68px;
	padding-bottom: 61px;
	margin-top: 26px;
}
#feature article .img {
	text-align: center;
}
#feature article .ttl01 {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5;
	margin-top: 24px;
}
#feature article .ttl01 span {
	display: inline-block;
	background: url("../img/line_dot.png") 0 bottom repeat-x;
	background-size: 5px 2px;
	padding: 0 2px 5px;
}
#feature article .ttl01 span.check {
	background: none;
	position: relative;
	padding: 0 0 0 38px;
}
#feature article .ttl01 span.check::before {
	content: '';
	width: 38px;
	height: 38px;
	display: block;
	background: url("../img/check.png") 0 0 no-repeat;
	background-size: cover;
	position: absolute;
	bottom: 5px;
	left: 0;
}
#feature article .txt01 {
	font-size: 14px;
	line-height: 1.7143;
	letter-spacing: 0.03em;
	margin-top: 10px;
}
#feature article .txt01 .cap {
	font-size: 11px;
	line-height: 2.1818;
	margin-left: 5px;
}

#feature .feature01 {
	margin-top: 26px;
}

#feature .feature02 {
	margin-top: 33px;
}

#feature article .layout {
	display: flex;
}
#feature article .layout .txtBox {
	width: calc(100% - 564px);
	position: relative;
}
#feature article .layout .img01 {
	padding-top: 5px;
}
#feature article .layout .img02 {
	position: absolute;
	bottom: 0;
	left: 0;
}
#feature .feature03 .img01,
#feature .feature04 .txtBox,
#feature .feature05 .img01 {
	margin-right: 44px;
}
#feature .feature04 .img01 {
	order: 2;
}
#feature .feature04 .txtBox {
	order: 1;
}
#feature article .layout .ttl01 {
	margin-top: 0;
	text-align: left;
}
#feature article .layout .ttl01 span {
	display: block;
}
#feature article .layout .ttl01 span.check {
	display: inline-block;
}
#feature article .layout .ttl01 span.span02 {
	padding-left: 40px;
	margin-top: 5px;
}
#feature .feature03 {
	margin-top: 57px;
}
#feature .feature04 {
	margin-top: 55px;
}
#feature .feature04 .img02 {
	text-align: center;
}
#feature .feature05 {
	margin-top: 54px;
}
#feature .feature06 {
	margin-top: 52px;
	text-align: center;
}
#feature .feature06 .txt01 {
	margin-top: 24px;
}
#feature .btn {
	margin-top: 63px;
}

#feature article .layout .ttl01 span.spSpan02,
#feature article .ttl01 span.spCheck {
	display: inline;
	background: none;
	padding: 0;
}

#function {
	margin-top: 57px;
}
#function .inner {
	padding-left: 68px;
	padding-right: 68px;
}
#function .tabList {
	display: flex;
	align-items: center;
	padding-left: 93px;
}
#function .tabList01 {
	border-bottom: 1px solid #4f4a45;
	margin-top: 5px;
}
#function .tabList02 {
	border-top: 1px solid #4f4a45;
}
#function .tabList li:nth-child(2) {
	margin-left: 139px;
}
#function .tabList li:nth-child(3) {
	margin-left: 119px;
}
#function .tabList a {
	padding: 24px 0;
	position: relative;
}
#function .tabList01 a {
	padding-top: 18px;
}
#function .tabList02 a {
	padding-bottom: 18px;
}
#function .tabList a:hover::after,
#function .tabList li.cur a::after {
	content: '';
	width: 180px;
	height: 6px;
	display: block;
	background: #e1d8c2;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
#function .tabList01 a:hover::after {
	bottom: 0;
}
#function .tabList02 a:hover::after {
	top: 0;
}
#function .tabList01 li.cur a::after {
	bottom: 0;
}
#function .tabList02 li.cur a::after {
	top: 0;
}

#function .tabContentBox {
	padding-top: 31px;
}
#function #tab02,
#function #tab03 {
	display: none;
}

#function article {
	padding-bottom: 65px;
}
#function article .ttl {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.1;
	background: url("../img/line_dot.png") 0 bottom repeat-x;
	background-size: 5px 2px;
	padding: 0 2px 7px;
	margin-top: 38px;
}
#function article .ttl .check {
	display: inline-block;
	position: relative;
	padding-left: 38px;
}
#function article .ttl .check::before {
	content: '';
	width: 38px;
	height: 38px;
	display: block;
	background: url("../img/check.png") 0 0 no-repeat;
	background-size: cover;
	position: absolute;
	bottom: 3px;
	left: 0;
}
#function article .txt {
	font-size: 14px;
	line-height: 1.7143;
	margin-top: 10px;
}
#function article .img {
	text-align: center;
}

#function article#tab01 .ttl02 {
	margin-top: 49px;
}
#function article#tab01 .img02 {
	margin-top: 18px;
}
/*#function article#tab01 .img03 {
	margin-top: 30px;
}*/
#function article#tab01 .imgWrap {
	position: relative;
	margin-top: 30px;
}
#function article#tab01 .imgWrap .imgContent {
	max-height: 490px;
	overflow: hidden;
	margin-bottom: 54px;
	border-bottom: 2px solid #e1d8c2;
	transition: max-height 0.8s ease-in-out, margin-bottom 0.8s ease-in-out;
}
#function article#tab01 .imgWrap .imgContent.is-active {
	max-height: 878px;
	margin-bottom: 40px;
	border-bottom: none;
}
#function article#tab01 .imgWrap .imgOpenBtn {
	position: absolute;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	left: 50%;
	bottom: 0;
	width: 80px;
	height: 80px;
	border: 2px solid #e1d8c2;
	border-radius: 999px;
	background-color: #fff;
	transform: translate(-50%, 50%);
}
#function article#tab01 .imgWrap .imgOpenBtn.is-active {
	display: none;
}
#function article#tab01 .imgWrap .imgOpenBtn::after {
	position: absolute;
	display: block;
	content: "";
	left: -2px;
	top: 50%;
	width: calc(100% + 4px);
	height: calc(50% + 2px);
	background-color: #fff;
}
#function article#tab01 .imgWrap .imgOpenBtn .imgOpenLink {
	z-index: 1;
	position: relative;
	display: block;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	border-radius: 999px;
	background-color: #e1d8c2;
}
#function article#tab01 .imgWrap .imgOpenBtn .imgOpenLink > span {
	position: absolute;
	display: inline-block;
	top: 15px;
	left: 50%;
	font-size: 1.2rem;
	font-weight: bold;
	color: #4f4a45;
	transform: translateX(-50%);
}
#function article#tab01 .imgWrap .imgOpenBtn .imgOpenLink > span::after {
	position: absolute;
	display: block;
	content: "";
	bottom: -12px;
	left: 50%;
	width: 12px;
	height: 12px;
	border-bottom: 2px solid #4f4a45;
	border-left: 2px solid #4f4a45;
	transform: translateX(-50%) rotate(-45deg);
}
#function article#tab01 .btn {
	margin-top: 40px;
}
#function article#tab02 .ttl02 {
	margin-top: 55px;
}
#function article#tab02 .img02 {
	margin-top: 20px;
}
#function article#tab02 .img03 {
	margin-top: 34px;
}
#function article#tab02 .btn {
	margin-top: 42px;
}
#function article#tab03 {
	padding-bottom: 63px;
}
#function article#tab03 .img02 {
	margin-top: 24px;
}
#function article#tab03 .img03 {
	margin-top: 0;
}
#function #tab03 .title {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2222;
	margin-top: 33px;
	margin-bottom: 14px;
}
#function #tab03 .txtBox02 .title {
	margin-top: 55px;
}
#function #tab03 .title span {
	position: relative;
	display: inline-block;
	padding: 0 2px;
	z-index: 2;
}
#function #tab03 .title span::before {
	content: '';
	width: 100%;
	height: 5px;
	display: inline-block;
	background: #e1d8c2;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
}
#function #tab03 .text {
	font-size: 14px;
	line-height: 1.5;
}
#function article#tab03 .imgTxtBox {
	margin-top: 21px;
	display: flex;
}
#function article#tab03 .imgTxtBox .img03 {
	margin-right: 15px;
}
#function article#tab03 .imgTxtBox .text {
	width: calc(100% - 785px);
}

#spec {
	margin-top: 34px;
}
#spec .inner {
	padding-bottom: 49px;
}
#spec .slideArea {
	overflow: hidden;
	position: relative;
	margin-top: 29px;
	padding-top: 13px;
}
#spec .slideList {
	width: 100000px;
	display: flex;
}
#spec .slideList li {
	text-align: center;
	width: 1120px;
}
#spec .slideList li img {
	width: 384px;
	height: auto;
}
#spec .slideNav {
	width: 100%;
	text-align: center;
	font-size: 0;
	margin-top: 57px;
}
#spec .slideNav span {
	background: #cac9c7;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	display: inline-block;
	cursor: pointer;
}
#spec .slideNav span.cur {
	background: #4f4a45;
}
#spec .slideNav span:not(:first-child) {
	margin-left: 16px;
}
#spec .backBtn img,
#spec .nextBtn img,
#spec .backBtn a,
#spec .nextBtn a {
	width: 100%;
	height: auto;
}
#spec .backBtn,
#spec .nextBtn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
}
#spec .backBtn {
	left: 65px;
}
#spec .nextBtn {
	right: 65px;
}

table {
	border-top: 1px solid #9c9997;
	border-bottom: 1px solid #9c9997;
	font-size: 16px;
	line-height: 1.25;
	margin: 0 auto;
}
table th {
	vertical-align: baseline;
	padding: 5px 4px 4px;
}
table td {
	border-left: 1px solid #bbb7b7;
	padding: 5px 10px 4px 16px;
}
table tr:not(:first-child) th,
table tr:not(:first-child) td {
	border-top: 1px solid #bbb7b7;
}
#spec .specTable {
	width: 880px;
	margin-top: 50px;
}
#spec .specTable th {
	width: 21%;
}
#spec .specTable .tdWh01 {
	width: 18%;
}

#accessory {
	margin-top: 31px;
}
#accessory .coverList {
	width: 696px;
	margin: 24px auto 0;
}
#accessory .coverTable + .coverList {
	margin: 48px auto 0;
}
#accessory .coverList li {
	background: right 100px center no-repeat;
	display: flex;
	align-items: center;
	font-size: 16px;
	line-height: 1;
	height: 163px;
}
#accessory .coverList li:nth-child(1) {
	background-image: url("../img/accessory_bk.jpg");
	background-size: 509px auto;
}
#accessory .coverList li:nth-child(2) {
	background-image: url("../img/accessory_br.jpg");
	background-size: 509px auto;
}
#accessory .coverList li:nth-child(3) {
	background-image: url("../img/accessory_gr.jpg");
	background-size: 509px auto;
}
#accessory .coverList li:not(:first-child) {
	margin-top: 20px;
}
#accessory .coverList.replacament li span{
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
#accessory .coverList.replacament li:nth-child(1) {
	background-image: url("../img/accessory_replacament.jpg");
	background-size: 509px auto;
}

#accessory .ttl01 {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	margin-top: 23px;
}

#accessory .coverTable {
	width: 590px;
	margin-top: 11px;
}
#accessory .coverTable th {
	width: 13.5%;
}
#accessory .coverTable.replacament th {
	width: 17.5%;
}

#capTxtArea {
	margin-top: 30px;
}
#capTxtArea .inner {
	padding-left: 68px;
	padding-right: 68px;
	padding-top: 32px;
	padding-bottom: 31px;
}
#capTxtArea .capTxtList {
	font-size: 12px;
	line-height: 1.75;
	letter-spacing: 0.03em;
}
#capTxtArea .capTxtList li::before {
	content: '●';
	display: inline-block;
	margin-right: 2px;
}


@media screen and (max-width: 1280px) and (min-width: 769px){
	#kvArea .slideArea {
		width: 1280px;
	}
	header .inner {
		margin-left: 80px;
	}
	#kvArea .slideList li {
		width: 1280px;
	}
	#kvArea .slideList .logo {
		width: 278px;
		position: absolute;
		top: 206px;
		left: 144px;
	}
	#kvArea .slideList .mainLead {
		width: 275px;
		position: absolute;
		top: 352px;
		left: 147px;
	}
}
@media screen and (min-width: 769px) {
	.sp {
		display: none!important;
	}
	
	.white a{color:#fff;}
}
/* clearfix
------------------------------------- */
.clearfix::after {
	content: '';
	display: block;
	clear: both;
	height: 0;
}

/* IE11対応
------------------------------------- */
@media all and (-ms-high-contrast: none) {
	#about .txtBox span {
		padding-top: 4px;
	}
	#about .txtBox span.spSpan {
		padding-top: 0;
	}
	#feature article .layout .ttl01 span.span02 {
		padding-top: 4px;
	}
	#feature article .ttl01 span.check::before {
		bottom: 9px;
	}
	#function article .ttl .check::before {
		bottom: 6px;
	}
	#function #tab03 .title span::before {
		bottom: 4px;
	}
	table th {
		padding: 9px 4px 3px;
	}
	table td {
		padding: 9px 10px 3px 16px;
	}
	.btn a {
		padding-top: 6px;
	}
	header #gNav a,
	footer .footerList a {
		position: relative;
		top: 2px;
	}
}