@charset "utf-8";

/*-----------------------------------------------
	index
-----------------------------------------------*/
/* secTit */
.secTit{
	width: 515px;
	margin: 130px auto 125px;
}
.secTit .tit{
	font-size: 26px;
	line-height: 43px;
	font-weight: bold;
	color: #000;
	letter-spacing: 2px;
}
.secTit .txt{
	font-size: 16px;
	line-height: 40px;
	font-weight: 500;
	color: #000;
	margin-top: 43px;
}
@media only screen and (max-width:1023px){
	.secTit{
		width: 86.67%;
		margin: 95px auto 42px;
	}
	.secTit .tit{
		font-size: 15px;
		line-height: 25px;
		letter-spacing: 1.25px;
	}
	.secTit .txt{
		font-size: 11px;
		line-height: 25px;
		margin-top: 38px;
		letter-spacing: 0.25px;
	}
}

/* secMenu */
.secMenu .item{
	width: 33.36%;
	height: 0;
	padding-top: 15.63%;
	float: left;
	position: relative;
	overflow: hidden;
}
.secMenu .item:last-child{
	width: 33.28%;
}
.secMenu .item .bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	padding-top: 46.85%;
}
.secMenu .item .bg img{
	width: auto;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.secMenu .item.mouseOver .bg{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition-duration:0.25s;
	transition-duration: 0.25s;
}
.secMenu .item.mouseLeave .bg{
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition-duration:0.25s;
	transition-duration: 0.25s;
}
.secMenu .item .boxWrap{
	width: 90.6%;
	height: 90.6%;
	position: absolute;
	top: 4.7%;
	left: 4.7%;
}
.secMenu .item .boxWrap .square{
	position: absolute;
	height: 0;
}
.secMenu .item.mouseOver .boxWrap .square{
	-webkit-animation: squareAnimationIn 0.25s ease-in-out;
	animation: squareAnimationIn 0.25s ease-in-out;
	background: #000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.secMenu .item.mouseLeave .boxWrap .square{
	-webkit-animation: squareAnimationOut 0.25s ease-in-out;
	animation: squareAnimationOut 0.25s ease-in-out;
	background: #000;
}
@keyframes squareAnimationIn {
	from{
		top: 10.94%;
		left: 10.94%;
		width: 78.12%;
		height: 78.12%;
		opacity: 0;
	}
	to{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 1;
	}
}
@keyframes squareAnimationOut {
	from{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 1;
	}
	to{
		top: 10.94%;
		left: 10.94%;
		width: 78.12%;
		height: 78.12%;
		opacity: 0;
	}
}
.secMenu .item .boxWrap .tit{
	font-size: 26px;
	text-align: center;
	color: #FFF;
	padding-top: 22.5%;
	letter-spacing: 1.75px;
	position: relative;
	z-index: 1;
}
.secMenu .item:nth-child(2) .boxWrap .tit{
	letter-spacing: 6px;
	padding-top: 23.5%;
}
.secMenu .item:last-child .boxWrap .tit{
	font-size: 24px;
}
@media only screen and (max-width:1023px){
	.secMenu{
		background: #000;
	}
	.secMenu .item{
		width: 100% !important;
		padding-top: 33.5%;
		float: none;
	}
	.secMenu .item .bg{
		padding-top: 33.5%;
	}
	.secMenu .item .bg img{
		width: 100%;
		height: auto;
	}
	.secMenu .item .boxWrap{
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	.secMenu .item .boxWrap .square{
		display: none;
	}
	.secMenu .item .boxWrap .tit{
		font-size: 18px;
		padding-top: 14.7%;
		letter-spacing: 1.75px;
	}
	.secMenu .item:nth-child(2) .boxWrap .tit{
		letter-spacing: 1.75px;
		padding-top: 14.7%;
	}
	.secMenu .item .boxWrap .tit:last-child{
		font-size: 16px;
	}
	.secMenu .item .bg{
		opacity: 0;
		-webkit-transform: translate3d(0, 30px, 0) scale(0.9);
		transform: translate3d(0, 30px, 0) scale(0.9);
		-webkit-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
		transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
	}
	.secMenu .item .tit{
		opacity: 0;
		-webkit-transform: translate3d(0, 30px, 0) scale(0.9);
		transform: translate3d(0, 30px, 0) scale(0.9);
		-webkit-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
		transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
	}
	.secMenu .item .bg.jsShow,
	.secMenu .item .tit.jsShow{
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0) scale(1);
		transform: translate3d(0, 0, 0) scale(1);
	}
}

/* secValue */
.secValue .boxTitValue{
	width: 515px;
	margin: 100px auto 89px;
}
.secValue .boxTitValue .tit{
	font-size: 26px;
	font-weight: bold;
	color: #000;
	letter-spacing: 2.25px;
}
.secValue .boxTitValue .txt{
	font-size: 16px;
	line-height: 40px;
	font-weight: 500;
	color: #000;
	margin-top: 27px;
	letter-spacing: 0.5px;
}
.secValue .boxAnxious{
	width: 700px;
	padding-bottom: 60px;
	background: #000;
	margin: 40px auto 0;
	color: #FFF;
	font-size: 16px;
	border-radius: 20px;
}
.secValue .boxAnxious .tit{
	font-weight: bold;
	padding-top: 61px;
	text-align: center;
	letter-spacing: 1px;
}
.secValue .boxAnxious .txt{
	width: 488px;
	margin: 40px auto 0;
	font-weight: 500;
	line-height: 41px;
	letter-spacing: 0.8px;
}
.secValue .imgAnxious{
	width: 27px;
	margin: 9px auto 0;
}
.secValue .titRelief{
	font-size: 26px;
	font-weight: bold;
	color: #000;
	text-align: center;
	letter-spacing: 1.5px;
	margin: 39px 0 40px;
}
.secValue .titRelief .point{
	font-size: 40px;
	color: #B8B597;
}
.secValue .boxRelief{
	width: 1040px;
	margin: 0 auto;
	display: table;
	border-collapse: collapse;
}
.secValue .boxRelief .item{
	display: table-cell;
	vertical-align: top;
	width: 342px;
	height: 345px;
	border: 2px solid #B8B597;
	text-align: center;
	position: relative;
}
.secValue .boxRelief .item a{
	display: block;
	width: 100%;
	height: 100%;
	padding-top: 70px;
}
.secValue .boxRelief .item a::before{
	content: "";
	position: absolute;
	top: 10.94%;
	left: 10.94%;
	width: 78.12%;
	height: 78.12%;
	opacity: 0;
	display: block;
	background: #B8B597;
	z-index: -1;
	-webkit-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}
.secValue .boxRelief .item a:hover::before{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
}
.secValue .boxRelief .item:first-child .img{
	padding-left: 15px;
}
.secValue .boxRelief .item:nth-child(2) .img{
	padding-left: 5px;
}
.secValue .boxRelief .item .txt{
	font-size: 16px;
	color: #000;
	font-weight: 500;
	margin-top: 46px;
}
.secValue .boxRelief .item .tit{
	font-size: 26px;
	color: #000;
	font-weight: bold;
	margin-top: 21px;
	letter-spacing: 1px;
}
.secValue .imgRelief{
	width: 36px;
	height: 36px;
	margin: 50px auto 0;
	position: relative;
}
.secValue .imgRelief::before{
	content: "";
	display: block;
	width: 6px;
	height: 35px;
	background: #000;
	position: absolute;
	top: 0;
	left: 15px;
}
.secValue .imgRelief::after{
	content: "";
	display: block;
	width: 35px;
	height: 6px;
	background: #000;
	position: absolute;
	top: 15px;
	left: 0;
}
.secValue .txtBoxRelief .titIn{
    font-size: 26px;
    letter-spacing: 2px;
    text-align: center;
    font-weight: 700;
    margin-top: 50px;
}
.secValue .txtBoxRelief .txtIn{
    font-size: 16px;
    letter-spacing: 1px;
    margin-top: 20px;
    text-align: center;
    font-weight: 700;
}

.secValue .boxHybrid{
	width: 1040px;
	margin: 50px auto 60px;
	border: 2px solid #B8B597;
	padding: 0 169px;
}
.secValue .boxHybrid2{
    margin: 60px auto 100px;
}
.secValue .boxHybrid .boxTit{
	padding-top: 88px;
}
.secValue .boxHybrid .boxTit .txt{
	color: #000;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}
.secValue .boxHybrid .boxTit .tit{
	color: #B8B597;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.5px;
	margin-bottom: 30px;
}
.secValue .boxHybrid .boxTit .tit .txt{
    font-size: 26px;
    vertical-align: 3px;
}
.secValue .boxHybrid .boxList{
	margin-top: 43px;
}
.secValue .boxHybrid .boxList .item{
	width: 346px;
	float: left;
	background: #C0BEA1;
	color: #FFF;
	font-size: 26px;
	line-height: 39px;
	font-weight: bold;
	text-align: center;
	padding: 60px 0;
	letter-spacing: 1px;
}
.secValue .boxHybrid .boxList .item:last-child{
	float: right;
}
.secValue .boxHybrid .boxList2 .item{
    float: none!important;
    margin: 0 auto;
}
.secValue .boxHybrid .boxTxt{
	font-size: 13px;
	color: #000;
	line-height: 26px;
	margin-top: 26px;
}
.secValue .boxHybrid .btn a{
	display: block;
	width: 300px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	color: #B8B597;
	font-size: 16px;
	letter-spacing: 1px;
	margin: 55px auto 65px;
	border: 1px solid #B8B597;
}
.secValue .boxHybrid .btn a:hover{
	background: #000;
	color: #FFF;
	border: 1px solid #000;
}
@media only screen and (max-width:1023px){
	.secValue .boxTitValue{
		width: 86.67%;
		margin: 47px auto 49px;
	}
	.secValue .boxTitValue .tit{
		font-size: 15px;
		letter-spacing: 0.75px;
		text-align: center;
	}
	.secValue .boxTitValue .txt{
		font-size: 11px;
		line-height: 19px;
		margin-top: 47px;
		letter-spacing: 0.25px;
	}
	.secValue .boxAnxious{
		width: 86.67%;
		padding-bottom: 43px;
		margin: 47px auto 0;
		font-size: 11px;
		border-radius: 10px;
	}
	.secValue .boxAnxious .tit{
		font-size: 13px;
		padding-top: 45px;
		letter-spacing: 0.5px;
	}
	.secValue .boxAnxious .txt{
		width: 86.67%;
		min-width: 300px;
		margin: 30px auto 0;
		line-height: 20px;
		letter-spacing: 0;
	}
	.secValue .imgAnxious{
		width: 14px;
		margin: 12px auto 0;
	}
	.secValue .titRelief{
		font-size: 14px;
		letter-spacing: 0.75px;
		margin: 41px 0 24px;
	}
	.secValue .titRelief .point{
		display: block;
		font-size: 19px;
		margin-top: 10px;
	}
	.secValue .boxRelief{
		width: 86.67%;
		display: block;
	}
	.secValue .boxRelief .item{
		display: block;
		width: 100%;
		height: auto;
		margin-bottom: 19px;
	}
	.secValue .boxRelief .item:last-child{
		margin-bottom: 0;
	}
	.secValue .boxRelief .item a{
		padding: 23px 0 14px;
		height: auto;
	}
	.secValue .boxRelief .item a::before{
		display: none;
	}
	.secValue .boxRelief .item a::after{
		content: "";
		display: block;
		width: 19px;
		height: 18px;
		background: url(../img/about/bgReliefLink.gif) center top / cover no-repeat;
		position: absolute;
		top: 0;
		right: 0;
	}
	.secValue .boxRelief .item:first-child a{
		padding-top: 18px;
	}
	.secValue .boxRelief .item .img img{
		width: auto;
		height: 61px;
	}
	.secValue .boxRelief .item:first-child .img img{
		height: 71px;
	}
	.secValue .boxRelief .item:first-child .img{
		padding-left: 0;
	}
	.secValue .boxRelief .item:nth-child(2) .img{
		padding-left: 0;
	}
	.secValue .boxRelief .item .txt{
		font-size: 11px;
		margin-top: 19px;
		letter-spacing: 0.5px;
	}
	.secValue .boxRelief .item:first-child .txt{
		margin-top: 15px;
	}
	.secValue .boxRelief .item .tit{
		font-size: 14px;
		margin-top: 4px;
		letter-spacing: 0.25px;
	}
	.secValue .imgRelief{
		margin-top: 35px;
	}
    .secValue .txtBoxRelief .titIn{
        font-size: 14px;
        letter-spacing: 1px;
        margin-top: 35px;
    }
    .secValue .txtBoxRelief .txtIn{
        font-size: 11px;
        letter-spacing: 0.5px;
        line-height: 1.8;
        margin: 20px auto 0;
        text-align: left;
        width: 90%;
    }
    
	.secValue .boxHybrid{
		width: 86.67%;
		margin: 52px auto 50px;
		border: none;
		padding: 0;
	}
    .secValue .boxHybrid2{
        margin: 50px auto 50px;
    }
    
	.secValue .boxHybrid .boxTit{
		padding-top: 0;
	}
	.secValue .boxHybrid .boxTit .txt{
		font-size: 11px;
		line-height: 22px;
	}
	.secValue .boxHybrid .boxTit .tit{
		font-size: 19px;
		letter-spacing: 0.25px;
		margin-bottom: 5px;
	}
    .secValue .boxHybrid .boxTit .tit .txt{
        font-size: 13px;
        vertical-align: 1px;
    }
	.secValue .boxHybrid .boxList{
		margin-top: 24px;
	}
	.secValue .boxHybrid .boxList .item{
		width: 49.23%;
		font-size: 13px;
		line-height: 19px;
		padding: 22px 0;
		letter-spacing: 0.5px;
	}
	.secValue .boxHybrid .boxTxt{
		font-size: 11px;
		line-height: 20px;
		margin-top: 20px;
		letter-spacing: -0.1px;
	}
	.secValue .boxHybrid .btn a{
		width: 220px;
		height: 45px;
		line-height: 45px;
		font-size: 11px;
		letter-spacing: 1px;
		margin: 20px auto 0;
	}
	.secValue .boxHybrid .btn a:hover{
		background: #FFF;
		color: #B8B597;
		border: 1px solid #B8B597;
	}
}
@media only screen and (max-width:374px){
	.secValue .boxAnxious .txt{
		width: 92.78%;
		min-width: 92.78%;
	}
}

/* secU2 */
.secU2{
	background: #C0BEA1;
	padding-top: 100px;
}
.secU2 .boxImg{
	width: 1040px;
	margin: 0 auto;
	position: relative;
}
.secU2 .boxImg .img01{
	position: absolute;
	left: 32px;
	bottom: -139px;
	z-index: 1;
}
.secU2 .boxTxt{
	width: 562px;
	margin: 109px auto 0;
}
.secU2 .boxTxt .tit{
	font-size: 26px;
	line-height: 43px;
	font-weight: bold;
	color: #FFF;
	letter-spacing: 2.75px;
}
.secU2 .boxTxt .txt01{
	font-size: 16px;
	line-height: 40px;
	font-weight: 500;
	color: #FFF;
	margin-top: 43px;
	letter-spacing: -0.25px;
}
.secU2 .boxTxt .txt02{
	font-size: 13px;
	color: #FFF;
	line-height: 26px;
	margin-top: 19px;
	font-weight: 500;
}
.secU2 .boxTxt .btn{
	padding: 91px 0 108px;
}
.secU2 .boxTxt .btn a{
	display: block;
	width: 300px;
	height: 60px;
	line-height: 66px;
	text-align: center;
	color: #FFF;
	font-size: 14px;
	letter-spacing: 1.5px;
	margin: 0 auto;
	border: 1px solid #FFF;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.secU2 .boxTxt .btn a:hover{
	background: #FFF;
	color: #BFBDA1;
}
@media only screen and (max-width:1023px){
	.secU2{
		padding-top: 50px;
	}
	.secU2 .boxImg{
		width: 86.67%;
	}
	.secU2 .boxImg .img01{
		position: static;
		width: 72px;
		margin: 0 auto 25px;
	}
	.secU2 .boxTxt{
		width: 86.67%;
		margin: 44px auto 0;
	}
	.secU2 .boxTxt .tit{
		font-size: 14px;
		line-height: 21px;
		letter-spacing: 0.75px;
		text-align: center;
	}
	.secU2 .boxTxt .txt01{
		font-size: 11px;
		line-height: 20px;
		margin-top: 38px;
		letter-spacing: -0.1px;
	}
	.secU2 .boxTxt .txt02{
		font-size: 10px;
		line-height: 20px;
		margin-top: 40px;
	}
	.secU2 .boxTxt .btn{
		padding: 45px 0 50px;
	}
	.secU2 .boxTxt .btn a{
		width: 220px;
		height: 45px;
		line-height: 45px;
		font-size: 11px;
		letter-spacing: 1px;
	}
	.secU2 .boxTxt .btn a:hover{
		color: #FFF;
		border: 1px solid #FFF;
	}
	.secU2 .boxTxt .btn a:hover{
		background: transparent;
		color: ##FFF;
	}
}

/* secPurchase */
.secPurchase{
	background: #000;
}
.secPurchase .txt{
	font-size: 16px;
	color: #FFF;
	text-align: center;
	line-height: 40px;
	letter-spacing: 0.5px;
	font-weight: 500;
	padding-top: 97px;
}
.secPurchase .btn{
	padding: 44px 0 120px;
}
.secPurchase .btn a{
	display: block;
	width: 300px;
	height: 60px;
	line-height: 66px;
	text-align: center;
	color: #FFF;
	font-size: 14px;
	letter-spacing: 1.5px;
	margin: 0 auto;
	border: 1px solid #FFF;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.secPurchase .btn a:hover{
	background: #FFF;
	color: #000;
}
@media only screen and (max-width:1023px){
	.secPurchase .txt{
		font-size: 14px;
		line-height: 21px;
		letter-spacing: 0.75px;
		padding-top: 47px;
	}
	.secPurchase .btn{
		padding: 44px 0 50px;
	}
	.secPurchase .btn a{
		width: 220px;
		height: 45px;
		line-height: 45px;
		font-size: 11px;
		letter-spacing: 1px;
	}
	.secPurchase .btn a:hover{
		background: none;
		color: #FFF;
	}
}

/* ▼260108 */
.img100{
	width: 100%;
	height: auto;
}
.secTopImg{
	max-width: 702px;
	width: calc(100% - 100px);
	margin: 0 auto;
	margin-top: 173px;
	margin-bottom: 166px;
}
@media only screen and (max-width:767px){
	.secTopImg{
		max-width: 100%;
		width: 100%;
		margin-top: 91px;
		margin-bottom: 124px;
	}
}
/* secValue */
.secValue .aboutContentlist{
	margin-top: 85px;
}
.secValue .aboutContentlist .contentItem + .contentItem{
	margin-top: 117px;
}
.secValue .logoArea{
	text-align: center;
}
.secValue .logoArea .logoImg{
	max-width: 220px;
	margin: 0 auto;
	width: 100%;
}
@media only screen and (min-width:768px){
	.secValue .boxRelief.type02{
		max-width: calc(344px * 2);
	}
}
@media only screen and (max-width:767px){
	.secValue .aboutContentlist{
		margin-top: 73px;
		padding-bottom: 30px;
	}
	.secValue .aboutContentlist .contentItem + .contentItem{
		margin-top: 93px;
	}
	.secValue .logoArea{
		text-align: center;
		width: calc(160 / 375 *100%);
		margin: 0 auto;
		max-width: 280px;
	}
	.secValue .logoArea .logoImg{
		max-width: 100%;
	}
}