@charset "UTF-8";
/*----------------------------------------

	#product
	- mv
	- content
	- parts
		+ tab

-----------------------------------------*/

/*----------------------------------------
	mv
-----------------------------------------*/
#mv {
	background: #62b1d9 url("../img/c_mv_bg01.jpg") no-repeat right top;
	background-size: 1320px auto;
}
@media screen and (max-width: 767px) {
	#mv {
		background-size: auto 100%;
	}
}

/*----------------------------------------
	content
-----------------------------------------*/
[id^="type"]>.inner {
	padding: 36px 40px 43px;
	background-color: #e5f2ff;
}
[id^="type"]>.inner form>p {
	margin-bottom: 34px;
}
@media screen and (max-width: 767px) {
	#searchArea {
		margin: 0 -20px;
	}
	[id^="type"]>.inner {
		padding: 26px 20px 30px;
	}
	[id^="type"]>.inner form>p {
		margin-bottom: 23px;
		line-height: 1.7;
	}
}

/* checkbox */
[id^="type"]>.inner input[type="checkbox"] {
	display: none;
}
[id^="type"]>.inner input[type="checkbox"]+label {
	display: inline-block;
	margin: 0 16px 0 0;
	padding: 0 0 0 30px;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-font-feature-settings: 'fwid' 1;
			font-feature-settings: 'fwid' 1;
}
[id^="type"]>.inner input[type="checkbox"]+label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.25em;
	height: 1.25em;
	background-color: #fff;
	border: 1px solid #ddd;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
[id^="type"]>.inner input[type="checkbox"]+label:after {
	content: '';
	position: absolute;
	left: 3px;
	top: -0.5em;
	width: 0.4em;
	height: 1.0em;
	border-right: 3px solid #00a0e9;
	border-bottom: 3px solid #00a0e9;
	-webkit-transform-origin: left bottom;
	    -ms-transform-origin: left bottom;
	        transform-origin: left bottom;
	-webkit-transform: rotate(45deg) scale(0.0);
	    -ms-transform: rotate(45deg) scale(0.0);
	        transform: rotate(45deg) scale(0.0);
	opacity: 0;
}
[id^="type"]>.inner input[type="checkbox"]:checked+label:after {
	-webkit-transform: rotate(45deg) scale(1.0);
	    -ms-transform: rotate(45deg) scale(1.0);
	        transform: rotate(45deg) scale(1.0);
	opacity: 1;
}

/* button */
#searchArea [id^="type"] form:not(#typeFreeword)>div:last-child {
	width: 260px;
	max-width: 260px;
	margin: 12px auto 0;
	padding: 0;
	border: none;
	background-color: rgba(255,255,255,0.0);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#searchArea [id^="type"] form:not(#typeFreeword)>div:last-child::after {
    content: "※検索結果は以下に表示されます";
    display: block;
    font-size: 1.2rem;
    color: #de0b0b;
    text-align: center;
    line-height: 1;
    padding-top: 7px;
    margin-bottom: calc(-1.2rem - 7px);
}
.btn01 {
	cursor: pointer;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	border: 1px solid #ddd;
	background-color: #fff;
	border-radius: 40px;
	-webkit-box-shadow: 0px 3px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0px 3px 0 rgba(0, 0, 0, 0.1);
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
.btn01:active,
.btn01:focus {
	outline: none;
}
.btn01>span {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 3.15em;
	padding: 0 22px;
	color: #000;
	border-radius: 40px;
	-webkit-transition: 0.2s background;
	-o-transition: 0.2s background;
	transition: 0.2s background;
}
.btn01>span::after {
	content: "";
	display: inline-block;
	height: 12px;
	width: 12px;
	margin-left: 5px;
	border-bottom: 3px solid #00a0e9;
	border-right: 3px solid #00a0e9;
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}

.btn01:hover {
	border-color: #00a0e9;
	/*-webkit-transform: translateY(3px);
	-ms-transform: translateY(3px);
		transform: translateY(3px);
	-webkit-box-shadow: 0px 0px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 0 rgba(0, 0, 0, 0.1);*/
}
.btn01:hover>span {
	color: #fff;
	background: #00a0e9;
}
.btn01:hover>span::after {
	border-color: #fff;
}
@media screen and (max-width: 767px) {
	.btn01>span::after {
		width: 8px;
		height: 8px;
		border-width: 2px;
	}
	.btn01:hover {
		border-color: #ddd;
		/*-webkit-transform: translateY(3px);
		-ms-transform: translateY(3px);
			transform: translateY(3px);
		-webkit-box-shadow: 0px 0px 0 rgba(0, 0, 0, 0.1);
		box-shadow: 0px 0px 0 rgba(0, 0, 0, 0.1);*/
	}
	.btn01:hover>span {
		color: #000;
		background: #fff;
	}
	.btn01:hover>span::after {
		border-color: #000;
	}
}


/* typeCategory */
#typeCategory form>div:nth-of-type(1)>ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
#typeCategory form>div:nth-of-type(1)>ul>li {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
	width: calc((99.9999% - 40px) / 3);
	max-width: calc((99.9999% - 40px) / 3);
	margin-right: 20px;
	margin-bottom: 16px;
}
#typeCategory form>div:nth-of-type(1)>ul>li:nth-child(3n) {
	margin-right: 0;
}
@media screen and (max-width: 767px){
	#typeCategory form>div:nth-of-type(1)>ul>li {
		width: 100%;
		max-width: none;
    	margin: 0 auto 15px;
	}
}


/* typeDivision */
#typeDivision form {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	max-width: 880px;
	margin: 0 auto;
}
#typeDivision form>p {
	width: 100%;
}
#typeDivision form>div:nth-of-type(1) {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	width: calc(100% - 260px);
}
#typeDivision form>div:nth-of-type(1)>ul:nth-child(1) {
	width: 42%;
}
#typeDivision form>div:nth-of-type(1)>ul:nth-child(1) li {
	margin-bottom: 26px;
}
#typeDivision form>div:nth-of-type(1)>ul:nth-child(2) {
	width: 58%;
}
#typeDivision form>div:nth-of-type(1)>ul:nth-child(2) li {
	margin-bottom: 16px;
}
#typeDivision form>div:nth-of-type(1)>ul>li>ul {
	margin: 16px 0 0 40px;
}
#searchArea [id="typeDivision"] form:not(#typeFreeword)>div:last-child {
	margin: 2px 0 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1150px) {
	#typeDivision form>div:nth-of-type(1) {
		width: 100%;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}
	#typeDivision form>div:nth-of-type(1)>ul:nth-child(1),
	#typeDivision form>div:nth-of-type(1)>ul:nth-child(2) {
		width: 40%;
	}
	#searchArea [id="typeDivision"] form:not(#typeFreeword)>div:last-child {
		margin: 22px auto 0;
	}
}
@media screen and (max-width: 767px){
	#typeDivision form>div:nth-of-type(1)>ul:nth-child(1),
	#typeDivision form>div:nth-of-type(1)>ul:nth-child(2) {
		width: 100%;
	}
	#typeDivision form>div:nth-of-type(1) {
		width: 100%;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}
	#searchArea [id="typeDivision"] form:not(#typeFreeword)>div:last-child {
		margin: 13px auto 0;
	}
	#typeDivision form>div:nth-of-type(1)>ul:nth-child(1) li {
		margin-bottom: 15px;
	}
}


/* typeProduct */
[id="typeProduct"]>.inner:nth-of-type(1) {
	padding: 34px 40px 38px;
}
[id="typeProduct"]>.inner:nth-of-type(2) {
	padding: 34px 40px 40px;
}
#typeProduct .inner + .inner {
	margin-top: 20px;
}
#typeProduct form>.tit {
	margin-bottom: 15px;
}
#typeProduct #typeFreeword .inputArea::after {
	content: "※検索結果は以下に表示されます";
	display: block;
	font-size: 1.6rem;
	color: #de0b0b;
	line-height: 1;
	width: 100%;
	max-width: 741px;
	margin: 0 auto;
	padding-top: 7px;
}
#typeProduct #typeFreeword .inputArea>div {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	max-width: 741px;
	margin: 0 auto 18px;
	border: 2px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
#typeProduct #typeFreeword .inputArea>p {
	display: block;
	width: 100%;
	max-width: 741px;
	margin: 0 auto;
} 
#typeProduct #typeFreeword .searchWord {
	width: calc(100% - 62px);
}
#typeProduct #typeFreeword .searchWord input {
	width: 100%;
	height: 100%;
	padding: 18px 20px;
	border: none;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
#typeProduct #typeFreeword .searchBtn {
	width: 62px;
	background-color: #222;
}
#typeProduct #typeFreeword .searchBtn:hover {
	opacity: 0.8;
}
#typeProduct #typeFreeword .searchBtn input {
	display: block;
	width: 30px;
	padding: 18px 16px;
}

#typeProduct #typeHeadword .checkArea {
	max-width: 741px;
	margin: 0 auto;
	padding-right: 46px;
	overflow: hidden;
}
#typeProduct #typeHeadword .checkArea ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	margin-right: -78px;
}
#typeProduct #typeHeadword .checkArea ul li {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
	margin-bottom: 26px;
}
#typeProduct #typeHeadword .checkArea ul li>label {
	margin-right: 32px;
}
#typeProduct #typeHeadword .checkArea ul li:last-child {
	
}
@media screen and (max-width: 767px){
	#typeProduct .inner + .inner {
		margin-top: 15px;
	}
	[id="typeProduct"]>.inner:nth-of-type(1) {
		padding: 22px 20px 24px;
	}
	#typeProduct form>.tit {
		margin-bottom: 3px;
	}
	[id="typeProduct"]>.inner form>p {
		margin-bottom: 25px;
	}
	#typeProduct #typeFreeword .searchWord {
		width: calc(100% - 56px);
	}
	#typeProduct #typeFreeword .searchWord input {
		padding: 16px;
		line-height: normal;
	}
	#typeProduct #typeFreeword .searchBtn {
		width: 56px;
	}
	#typeProduct #typeFreeword .searchBtn input {
    	width: 24px;
		padding: 16px;
	}
	
	#typeProduct #typeFreeword .inputArea::after {
		padding-top: 5px;
	}
	#typeProduct #typeFreeword .inputArea>div {
		margin: 0 auto 8px;
	}
	#typeProduct #typeFreeword .inputArea>p {
		line-height: 1.75;
	}
	[id="typeProduct"]>.inner:nth-of-type(2) {
		padding: 22px 20px 28px;
	}
	#typeProduct #typeHeadword .checkArea {
		margin: -7px auto 0;
		padding-right: 0;
	}
	#typeProduct #typeHeadword .checkArea ul {
		margin-right: 0;
		padding: 0;
	}
	#typeProduct #typeHeadword .checkArea ul li {
		width: 25%;
		text-align: center;
	}
	#typeProduct #typeHeadword .checkArea ul li:last-child label {
		width: 1em;
		white-space: nowrap;
	}
	[id^="typeProduct"]>.inner input[type="checkbox"]+label {
		padding: 0 0 0 25px;
	}
	#typeProduct #typeHeadword .checkArea ul li>label {
		margin-right: 0;
	}
	#searchArea [id^="typeProduct"] form:not(#typeFreeword)>div:last-child {
		margin-top: 0;
	}
	#searchArea [id^="typeProduct"] .checkArea input+label {
		width: 1.0em;
		text-align: center;
	}
	#searchArea [id^="typeProduct"] .checkArea li:last-child input+label {
		width: auto;
		text-align: center;
	}
	
}


/* resultArea */
#resultArea {
	padding: 54px 0 40px;
}
.resultNum {
	margin-bottom: 15px;
}
.resultList dl dt {
	background-color: #62b1d9;
}
.resultList dl dt>ul,
.resultList dl dd>ul {
	display: flex;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.resultList dl dt>ul>li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: calc(100% / 3);
	height: 3.5em;
	padding: 0 18px;
	color: #fff;
	text-align: center;
	border-right: 1px solid #ddd;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.resultList dl dt>ul>li:nth-child(3n),
.resultList dl dd>ul>li:nth-child(3n) {
	border-right: none;
}
.resultList dl dd>ul {
	border-bottom: 1px solid #ddd;
}
.resultList dl dd>ul>li {
	width: calc(100% / 3);
	padding: 15px 18px;
	vertical-align: top;
	border-right: 1px solid #ddd;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.resultList dl dd>ul>li:nth-of-type(1){
	background-color: #fafafa;
}
.resultList dl dd>ul>li>ul>li {
	margin-bottom: 19px;
	padding: 0 0 0 0.8em;
	text-indent: -0.8em;
}
.resultList dl dd>ul>li>ul>li:last-child {
	margin-bottom: 0;
}
.resultList dl dd>ul>li>ul>li::before {
	content: "";
	display: inline-block;
	margin: 0 0.5em 0 0;
	border-top: 0.3em solid rgba(255,255,255,0.0);
	border-left: 0.4em solid #666;
	border-bottom: 0.3em solid rgba(255,255,255,0.0);
}
.resultList a {
	text-decoration: underline;
}
.resultList a:hover {
	text-decoration: none;
}
@media screen and (max-width: 767px){
	#resultArea {
		padding: 35px 0 40px;
	}
	.resultNum {
		margin-bottom: 11px;
	}
	.resultList {
		margin: 0 -20px;
		padding: 0 20px;
		overflow-y: scroll;
	}
	.resultList>dl {
		display: block;
		width: 100%;
		min-width: 530px;
		padding-right: 20px;
	}
	.resultList dl dt>ul>li {
		height: 3.1em;
		padding: 0;
	}
	.resultList dl dd>ul>li {
		padding: 12px 15px;
		line-height: 1.4;
	}
	.resultList dl dt>ul>li:nth-of-type(1),
	.resultList dl dd>ul>li:nth-of-type(1) {
		min-width: 20%;
	}
	.resultList dl dt>ul>li:not(:nth-of-type(1)),
	.resultList dl dd>ul>li:not(:nth-of-type(1)) {
		width: 40%;
	}
}


/* tab */
#tab {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	margin-bottom: 60px;
}
#tab>ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-top: -6px;
}
#tab>ul>li {
	width: calc(6em + 10px);
}
#tab>ul>li+li {
	margin-left: 20px;
}
#tab>ul>li>a {
	white-space: nowrap;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 0 5px 16px;
	color: #000;
	border-bottom: 2px solid #ddd;
	text-align: center;
	-webkit-transition: border 0.1s ease-out, color 0.1s ease-out;
	-o-transition: border 0.1s ease-out, color 0.1s ease-out;
	transition: border 0.1s ease-out, color 0.1s ease-out;
}
#tab>ul>li>a:hover,
#tab>ul>li.crnt>a {
	border-bottom-color: #00a0e9;
}
#tab>ul>li>a:hover {
	color: #666;
}
#tab>ul>li.crnt,
#tab>ul>li.crnt>a {
	pointer-events: none;
}
@media screen and (max-width: 767px) {
	#tab {
		margin-bottom: 40px;
	}
	#tab>ul {
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		width: 100%;
		margin-top: 0;
	}
	#tab>ul>li {
		width: calc(50% - 0.5px);
		line-height: 1.6rem;
		border-right: 1px solid rgba(255,255,255,0.0);
	}
	#tab>ul>li+li {
		margin: 0;
	}
	#tab>ul>li:nth-child(2n) {
		border-right: none;
	}
	#tab>ul>li:nth-child(n + 3) {
		margin-top: 1px;
	}
	#tab>ul>li>a {
		padding: 15px 5px;
		font-weight: normal;
		border-bottom: none;
		background-color: #eee;
		color: #666;
	}
	#tab>ul>li>a:hover,
	#tab>ul>li.crnt>a {
		color: #fff;
		background-color: #62b1d9;
	}
}