@charset "utf-8";
/*=============================================================
 contents Layout
=============================================================*/
/* CONTENTS
-------------------------------------------------------------*/
#contents section{
	margin: 110px 0 0;
	line-height: 1.60;
}
#contents section .contentsInner{
	max-width: 1280px;
	box-sizing: border-box;
	padding: 0 40px;
	margin: 0 auto;
}
/* Ttl
-------------------------------------------------------------*/
#contents .boxCategoryTtl{
	background-color: #d9edf8;
	transform: skewX(-20deg);
	margin-bottom: 40px;
}
#contents .boxCategoryTtlRwide{
 margin-right: calc(50% - 50vw);
	margin-left: -20px;
	transform-origin: bottom left;
}
#contents .boxCategoryTtlLwide{
 margin-left: calc(50% - 50vw);
	margin-right: -20px;
	transform-origin: top right;
}
#contents .boxCategoryTtl .ttlInner{
	max-width: 1200px;
}
#contents .boxCategoryTtlRwide .ttlInner{
	margin: 0 auto 0 0;
	border-left: 8px solid #00004c;
}
#contents .boxCategoryTtlLwide .ttlInner{
	margin: 0 0 0 auto;
	text-align: right;
	border-right: 8px solid #00004c;
}
#contents .boxCategoryTtl .ttlInner h2{
	padding: 20px;
	font-size: 42px;
	color: #00004c;
	transform: skewX(20deg);
}
/* cBg
-------------------------------------------------------------*/
.cBg{
 position: relative;
	z-index: 1;
}
.cBg:after{
	content: "";
	width: 100%;
	height: calc(100% - 20px);
	background: linear-gradient(180deg, rgba(240,242,243,1) 0%, rgba(249,251,252,1) 100%);
	position: absolute;
	top: 20px;
	z-index: -1;
}
.cBgL:after{
	transform: skewX(-20deg);
	transform-origin: top right;
	right: 40px;
}
.cBgR:after{
	transform: skewX(-20deg);
	transform-origin: bottom left;
	left: 40px;
}

/* #intro
-------------------------------------------------------------*/
#contents #intro{
	text-align: center;
}
#contents #intro p{
	font-size: 24px;
}
#contents #intro ul{
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 10px 0 0;
}
#contents #intro ul li{
	width: calc((100% - 30px) / 4);
	padding: 10px 0 0;
}
#contents #intro ul li a{
	width: 100%;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background: #00004c url("../shared/img/arw_white.png") no-repeat 15px center;
	background-size: 16px auto;
	text-align: center;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;
	border-radius: 10px;
}
/* #about
-------------------------------------------------------------*/
#contents #about .boxClm{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#contents #about .boxClm .box{
	width: calc((100% - 40px) / 2);
}
#contents #about .boxTable{
	padding: 40px 0 80px;
}
#contents #about .boxTableInner{
	width: 100%;
	max-width: 740px;
	margin: 0 auto;
}
#contents #about .boxTableInner table{
	width: 100%;
	font-size: 16px;
	line-height: 1.25;
}
#contents #about .boxTableInner table th,
#contents #about .boxTableInner table td{
	border-bottom: 1px solid #999;
}
#contents #about .boxTableInner table th.boxTtl{
	border-left: 1px solid #999;
	width: 310px;
}
#contents #about .boxTableInner table th.boxTtl .ttl{
	width: 100%;
	max-width: 377px;
	position: relative;
}
#contents #about .boxTableInner table th.boxTtl .ttl p{
	width: 50%;
	position: absolute;
	top: 50%;
	left: 0;
	text-align: center;
	transform: translateY(-50%);
}
#contents #about .boxTableInner table th.boxTtl .ttl p span{
	display: block;
}
#contents #about .boxTableInner table td.boxWhite{
	background-color: #fff;
	border-left: 1px solid #999;
}
#contents #about .boxTableInner table td{
	padding: 5px;
}
#contents #about .boxTableInner table td{
	padding: 5px;
}
#contents #about .boxTableInner table td figure{
	width: 100%;
	max-width: 200px;
	margin: 0 auto;
}
/* #spec
-------------------------------------------------------------*/
#contents #spec .boxClm{
 margin-right: calc(50% - 50vw);
}
#contents #spec .boxClmInner{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin: -40px 0 0;
}
#contents #spec .boxClm .boxPhoto{
	width: 55%;
	order: 1;
	background: url("../img/eco_bg.jpg") no-repeat right top;
	background-size: cover;
	position: relative;
	overflow: hidden;
}
#contents #spec .boxClm .boxPhoto:after{
	content: "";
	width: 100%;
	height: calc(100% + 40px);
	background: linear-gradient(180deg, rgba(240,242,243,1) 0%, rgba(249,251,252,1) 100%);
	position: absolute;
	top: -40px;
	left: -100%;
	z-index: 2;
	transform: skewX(-20deg);
	transform-origin: bottom right;
}
#contents #spec .boxClm .boxPhoto img{
	display: none;
}
#contents #spec .boxClm .boxDisc{
	width: 45%;
	padding: 40px 0 80px;
}
#contents #spec .boxClm .boxDisc ul li{
	padding: 0 0 10px 20px;
	position: relative;
}
#contents #spec .boxClm .boxDisc ul li:after{
	content: "";
	width: 9px;
	height: 9px;
	background: #009ce5;
	position: absolute;
	top: 13px;
	left: 0;
	z-index: 1;
	transform-origin: bottom right;
}
#contents #spec .boxClm .boxDisc ul li strong{
	color: #009ce5;
}
/* #market
-------------------------------------------------------------*/
#contents #market .boxClm{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#contents #market .boxClm .box{
	width: calc((100% - 40px) / 2);
	padding: 40px 0 0;
}
#contents #market .boxTable{
	margin: 40px 0 0;
}
#contents #market .boxTable table{
	width: 100%;
}
#contents #market .boxTable table th,
#contents #market .boxTable table td{
	padding: 5px;
	vertical-align: top;
}
#contents #market .boxTable table th{
	background: #e9e9e9;
}
#contents #market .boxTable table th.ttl{
	background: #009ce5;
	color: #fff;
	width: 150px;
}
#contents #market .boxTable table td{
	border-bottom: 1px solid #ccc;
}
#contents #market .boxTable table td.year{
	border-bottom: 1px solid #009ce5;
	color: #009ce5;
}
/* #lineup
-------------------------------------------------------------*/
#contents #lineup{
	padding: 0 0 80px;
}
#contents #lineup .boxClm{
	background: #fff;
}
#contents #lineup .boxClm+.boxClm{
	margin-top: 20px;
}
#contents #lineup .boxClmRwide{
 margin-right: calc(50% - 50vw);
	padding-right: 40px;
}
#contents #lineup .boxClmLwide{
 margin-left: calc(50% - 50vw);
	padding-left: 40px;
}
#contents #lineup .boxClmInner{
	width: 100%;
	max-width: 1200px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#contents #lineup .boxClmRwide .boxClmInner{
	margin: 0 auto 0 0;
}
#contents #lineup .boxClmLwide .boxClmInner{
	margin: 0 0 0 auto;
}
#contents #lineup .boxClmInner .boxItem{
	width: 26%;
	min-width: 340px;
}
#contents #lineup .boxClmInner .boxItem img{
	width: 100%;
}
#contents #lineup .boxClmInner .order1{
	order: 1;
}
#contents #lineup .boxClmInner .boxDisc{
	flex: 1;
}
#contents #lineup .boxClmRwide .boxClmInner .boxDisc{
	padding: 20px 30px 20px 0;
}
#contents #lineup .boxClmRwide .boxClmInner .boxDisc{
	padding: 20px 0 20px 30px;
}
#contents #lineup .boxClmInner .boxDisc h3 a{
	display: inline-block;
	padding: 0 0 0 35px;
	background: url("../shared/img/arw_surcle_blue.png") no-repeat left center;
	background-size: 28px 28px;
	font-size: 30px;
}
#contents #lineup .boxClmInner .boxDisc p.lead{
	padding: 10px 0 0;
	font-size: 20px;
	line-height: 1.35;
}
#contents #lineup .boxClmInner .boxDisc dl{
	padding: 10px 0 0;
	font-size: 16px;
}
#contents #lineup .boxClmInner .boxDisc dt{
	font-weight: 500;
}
#contents #lineup .boxClmInner .boxDisc dd ul{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
#contents #lineup .boxClmInner .boxDisc dd ul li{
	margin: 0 1em 0 0;
}
#contents #lineup .boxClmInner .boxDisc p.btn{
	padding: 10px 0 0;
}
#contents #lineup .boxClmInner .boxDisc p.btn a{
	display: inline-block;
	padding: 6px 15px 7px 25px;
	border-radius: 9999px;
	color: #fff;
	line-height: 1.0;
	font-size: 18px;
	background: #009ce5 url("../shared/img/arw_white.png") no-repeat 10px center;
	background-size: 10px auto;
}


/* #ordermade
-------------------------------------------------------------*/
#contents #ordermade .boxFlow{
	width: 100%;
	max-width: 660px;
	margin: -40px auto 0;
	border-bottom: 1px solid #88b1c9;
}
#contents #ordermade .boxFlowInner{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#contents #ordermade .boxFlowInner{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#contents #ordermade .boxFlowInner+.boxFlowInner{
	margin: 15px 0 0;
}
#contents #ordermade .boxFlowInner .boxTtl{
	width: 145px;
	padding: 0 0 30px;
	text-align: right;
	color: #009ce5;
}
#contents #ordermade .boxFlowInner:first-child .boxTtl{
	padding: 40px 0 30px;
}
#contents #ordermade .boxFlowInner .boxTtl h3 strong{
	font-size: 200%;
}
#contents #ordermade .boxFlowInner .boxTxt{
	flex: 1;
	padding: 0 0 30px 45px;
	position: relative;
}
#contents #ordermade .boxFlowInner .boxTxt:after{
	content: "";
	width: 35px;
	height: 100%;
	background: url("../img/line_arw.png") no-repeat left bottom;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
}
#contents #ordermade .boxFlowInner:last-child .boxTxt:after{
	background: url("../img/line_arw.png") no-repeat left top;
}
#contents #ordermade .boxFlowInner:first-child .boxTxt{
	flex: 1;
	padding: 40px 0 30px 45px;
	position: relative;
}
#contents #ordermade .boxFlowInner .boxTxt p.catch{
	font-size: 24px;
	color: #009ce5;
}
#contents #ordermade .boxFlowInner .boxTxt p.small{
	font-size: 16px;
}
#contents #ordermade .atn{
	width: 100%;
	max-width: 660px;
	margin: 10px auto 0;
	font-size: 16px;
	text-align: right;
}
/* #btmArea
-------------------------------------------------------------*/
#contents #btmArea{
	padding: 60px 0 80px;
	background-color: #74bfe1;
}
#contents #btmArea ul.category{
	width: 100%;
	max-width: 890px;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}
#contents #btmArea ul.category li{
	width: calc((100% - 40px) / 3);
	padding: 20px 0 0;
}
#contents #btmArea ul.category li a p{
	width: 100%;
	height: 46px;
	color: #fff;
	font-weight: 600;
	padding: 5px 0 0 35px;
	background: url("../shared/img/arw_surcle_white.png") no-repeat left center;
	background-size: 28px 28px;
}
#contents #btmArea ul.btn{
	width: 100%;
	max-width: 890px;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	padding: 30px 0 0;
}
#contents #btmArea ul.btn li{
	width: calc((100% - 10px) / 2);
	padding: 10px 0 0;
}
#contents #btmArea ul.btn li a{
	width: 100%;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background: #00004c url("../shared/img/arw_white.png") no-repeat 15px center;
	background-size: 16px auto;
	text-align: center;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;
	border-radius: 10px;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 TUBLET
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:1023px){
/* Ttl
-------------------------------------------------------------*/
#contents .boxCategoryTtl .ttlInner h2{
	font-size: 36px;
}
/* #intro
-------------------------------------------------------------*/
#contents #intro ul li a{
	font-size: 18px;
	padding: 0 0 0 15px;
}
/* #about
-------------------------------------------------------------*/
#contents #about .boxTable{
	padding: 40px 0 80px;
}
#contents #about .boxTableInner{
	max-width: 680px;
}
#contents #about .boxTableInner table th.boxTtl{
	width: 285px;
}
/* #spec
-------------------------------------------------------------*/
#contents #spec .boxClm{
	margin: -40px -40px 0;
}
#contents #spec .boxClmInner{
	width: 100%;
	display: block;
	margin: 0;
}
#contents #spec .boxClm .boxPhoto{
	width: 100%;
	background: none;
}
#contents #spec .boxClm .boxPhoto:after{
	content: "";
	width: 100%;
	height: calc(100%);
	background: #fff;
}
#contents #spec .boxClm .boxPhoto img{
	display: block;
}
#contents #spec .boxClm .boxDisc{
	width: 100%;
	padding: 40px 40px 80px;
}
#contents #spec .boxClm .boxDisc ul li strong{
	color: #009ce5;
}
/* #lineup
-------------------------------------------------------------*/
#contents #lineup .boxClmInner .boxDisc h3 a{
	font-size: 22px;
}
#contents #lineup .boxClmInner .boxDisc p.lead{
	font-size: 17px;
}
#contents #lineup .boxClmInner .boxDisc dl{
	font-size: 13px;
}
#contents #lineup .boxClmInner .boxDisc p.btn a{
	font-size: 15px;
}
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:767px){
/* CONTENTS
-------------------------------------------------------------*/
#contents section{
	margin: 80px 0 0;
}
#contents section .contentsInner{
	padding: 0 20px;
}
/* Ttl
-------------------------------------------------------------*/
#contents .boxCategoryTtlRwide{
	margin-left: -10px;
}
#contents .boxCategoryTtlLwide{
	margin-right: -10px;
}
#contents .boxCategoryTtl .ttlInner h2{
	font-size: 20px;
}
/* #intro
-------------------------------------------------------------*/
#contents #intro{
	text-align: center;
}
#contents #intro p{
	font-size: 16px;
}
#contents #intro ul{
	flex-wrap: wrap;
}
#contents #intro ul li{
	width: calc((100% - 10px) / 2);
}
#contents #intro ul li a{
	font-size: 16px;
	padding: 0 0 0 15px;
}
/* #about
-------------------------------------------------------------*/
#contents #about .boxClm{
	display: block;
}
#contents #about .boxClm .box{
	width: calc(100%);
}
#contents #about .boxClm .box + .box{
	padding: 40px 0 0;
}
#contents #about .boxTable{
	padding: 40px 0 60px;
}
#contents #about .boxTableInner{
	padding: 0 0 40px;
	overflow: auto;
}
#contents #about .boxTableInner table{
	width: 100%;
	font-size: 14px;
}
#contents #about .boxTableInner table th,
#contents #about .boxTableInner table td{
	border-bottom: 1px solid #999;
}
#contents #about .boxTableInner table th.boxTtl{
	border-left: 1px solid #999;
	width: 325px;
}
#contents #about .boxTableInner table th.boxTtl .ttl{
	width: 100%;
	max-width: 377px;
	position: relative;
}
#contents #about .boxTableInner table th.boxTtl .ttl p{
	width: 50%;
	position: absolute;
	top: 50%;
	left: 0;
	text-align: center;
	transform: translateY(-50%);
}
#contents #about .boxTableInner table th.boxTtl .ttl p span{
	display: block;
}
#contents #about .boxTableInner table td.boxWhite{
	background-color: #fff;
	border-left: 1px solid #999;
}
#contents #about .boxTableInner table td{
	padding: 5px;
}
#contents #about .boxTableInner table td{
	padding: 5px;
}
#contents #about .boxTableInner table td figure{
	width: 100%;
	max-width: 200px;
	margin: 0 auto;
}

/* #spec
-------------------------------------------------------------*/
#contents #spec .boxClm{
	margin: -40px -20px 0;
}
#contents #spec .boxClm .boxDisc{
	width: 100%;
	padding: 20px 20px 60px;
}
#contents #spec .boxClm .boxDisc ul li{
	padding: 0 0 10px 15px;
	position: relative;
}
#contents #spec .boxClm .boxDisc ul li:after{
	top: 8px;
}
/* #market
-------------------------------------------------------------*/
#contents #market .boxClm{
	display: block;
}
#contents #market .boxClm .box{
	width: calc(100%);
	max-width: 500px;
	margin: 0 auto;
	padding: 40px 0 0;
}
#contents #market .boxTable table th.ttl{
	width: 60px;
}
/* #lineup
-------------------------------------------------------------*/
#contents #lineup{
	padding: 0 0 60px;
}
#contents #lineup .boxClm{
	padding: 0;
	background: none;
}
#contents #lineup .boxClmRwide{
 margin-right: calc(0);
	padding-right: 20px;
}
#contents #lineup .boxClmLwide{
 margin-left: calc(0);
	padding-left: 20px;
}
#contents #lineup .boxClmInner{
	display: block;
	padding-bottom: 20px;
}
#contents #lineup .boxClmRwide .boxClmInner{
	margin: 0;
}
#contents #lineup .boxClmLwide .boxClmInner{
	margin: 0;
}
#contents #lineup .boxClmInner .boxItem{
	width: 100%;
	max-width: 400px;
	min-width: 340px;
	margin: 0 auto;
}
#contents #lineup .boxClmRwide .boxClmInner .boxDisc{
	padding: 20px 0 0;
}
#contents #lineup .boxClmRwide .boxClmInner .boxDisc{
	padding: 20px 0 0;
}
#contents #lineup .boxClmInner .boxDisc{
	padding: 20px;
	max-width: 400px;
	margin: 0 auto;
}
#contents #lineup .boxClmInner .boxDisc h3 a{
	display: inline-block;
	padding: 0 0 0 24px;
	background: url("../shared/img/arw_surcle_blue.png") no-repeat left center;
	background-size: 16px 16px;
	font-size: 19px;
}
#contents #lineup .boxClmInner .boxDisc p.lead{
	font-size: 16px;
}
#contents #lineup .boxClmInner .boxDisc dl{
	font-size: 13px;
}
#contents #lineup .boxClmInner .boxDisc p.btn{
	text-align: center;
}
#contents #lineup .boxClmInner .boxDisc p.btn a{
	font-size: 14px;
}
/* #ordermade
-------------------------------------------------------------*/
#contents #ordermade .boxFlowInner .boxTtl{
	width: 85px;
}
#contents #ordermade .boxFlowInner .boxTtl h3 strong{
	font-size: 180%;
}
#contents #ordermade .boxFlowInner .boxTxt p.catch{
	font-size: 18px;
	color: #009ce5;
}
#contents #ordermade .boxFlowInner .boxTxt p.small{
	font-size: 14px;
}
#contents #ordermade .atn{
	font-size: 14px;
}
/* #btmArea
-------------------------------------------------------------*/
#contents #btmArea{
	padding: 40px 0 60px;
	background-color: #74bfe1;
}
#contents #btmArea ul.category{
	justify-content: center;
	flex-wrap: wrap;
}
#contents #btmArea ul.category li{
	width: calc(50%);
	padding: 20px 10px 0;
}
#contents #btmArea ul.category li a p{
	display: block;
	height: auto;
	margin: 10px 0 0;
	padding: 3px 0 3px 25px;
	background: url("../shared/img/arw_surcle_white.png") no-repeat left 4px;
	background-size: 16px 16px;
	font-size: 15px;
	line-height: 1.15;
}
#contents #btmArea ul.btn{
	display: block;
}
#contents #btmArea ul.btn li{
	width: calc(100%);
}
#contents #btmArea ul.btn li a{
	height: 40px;
	font-size: 15px;
}
}