@charset "utf-8";

.home {
	width: auto ;
}
.home h1 {
	font-size: 3em ;
	font-weight: normal ;
	letter-spacing: 0.02em ;
	padding-bottom: 1.25em ;
	text-align: center ;
}
p {
	margin: 0 ;
}
/* 製品情報
---------- */
.home h2 {
	border: none ;
	margin: 0 ;
}
.home .byMarket ul,
.home .byMarket li,
.home .recommended ul,
.home .recommended li {
	list-style: none ;
	margin: 0 ;
	padding: 0 ;
}
.home .byMarket > ul {
	display: flex ;
	justify-content:space-between;
	padding: 0 18px ;
}
.home .byMarket .marine,
.home .byMarket .its,
.home .byMarket .systems {
	background: #aaa no-repeat center center ;
	background-size: cover ;
	width: 49.75% ;
}
.home .byMarket h2 {
	color: #fff ;
	font-weight: normal ;
	font-size: 2.25em ;
	text-align: center ;
	padding: 1.8em 0 ;
	margin: 0 ;
}
.home .byMarket h2 small {
	font-size: 0.5em ;
	display: block ;
}
.home .byMarket .marine { background-image: url(/img/home/product_bg1.jpg) ;
}
.home .byMarket .its { background-image: url(/img/home/product_bg2.jpg) ;
}
.home .byMarket .systems { background-image: url(/img/home/product_bg3.jpg) ;
}


.home .byMarket > ul > li > ul {
	background: rgba(255,255,255,0.75) ;
	font-size: 18px ;
	padding: 1.5em 0 0.5em 0 ;
	display: flex ;
	flex-wrap: wrap ;
}
.home .byMarket > ul > li > ul li {
	padding-bottom: 1em ;
	width: 50% ;
}
.home .byMarket > ul > li > ul li a span:before,
.home .byCategory .refine form .input:before {
	font-family: 'furunocom' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	font-size: 0.8em ;
}
.home .byMarket > ul > li > ul li a span:before {
	content: "\e904";
	color: #004ea2 ;
	vertical-align: middle;
	width: 1.5em;
}
.home .byMarket > ul > li > ul li a {
	color: #161616 ;
	display: flex ;
	align-items: center;
	vertical-align: middle ;
	line-height: 1.3 ;
	padding-left: 15% ;
}
.home .byMarket > ul > li > ul li a span {
	display: flex ;
	align-items: center;
}
.home .byMarket > ul > li > ul li a:hover {
	color: #004ea2 ;
}
.home-search {
	background: linear-gradient(to bottom, #fff 30%, #daddde);
}
.home .byCategory {
	box-sizing: border-box ;
	background: #fff ;
	display: flex ;
	justify-content: space-between;
	margin: 60px 0 ;
	padding: 23px 26px ;
}
.home .byCategory h2 {
	color: #161616 ;
	font-size: 1.625rem ;
	font-weight: normal ;
	padding: 0 0 0.75em;
	text-align: left ;
}
.home .byCategory .refine {
	border-right: 1px solid #b4b4b4 ;
	padding: 0 2.5% 0 0 ;
	width: 66% ;
}
.home .byCategory .refine form,
.home .byCategory .keyword form {
	display: flex ;
	justify-content: space-between;
}
.home .byCategory .refine form .input,
.home .byCategory .keyword form .input {
	border: 1px solid #cccccc ;
	width: calc(33% - 3em);
	position: relative ;
	overflow: hidden ;
}
.home .byCategory .keyword form .input {
	width: calc(100% - 7em);
}
.home .byCategory .refine form .select:before {
    position: absolute;
    right: 0;
    top: 0;
	content: "\e906";
	color: #004ea2 ;
	padding: 0.65em 0.5em ;
}
.home .byCategory .refine form .select:hover:before {
	background: #e4ecf4 ;
}
.home .byCategory .refine form input,
.home .byCategory .refine form select,
.home .byCategory .keyword form input {
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	width:calc(100%) ;
}
.home .byCategory .refine form select::-ms-expand {
    display: none;
}
.home .byCategory .refine form input,
.home .byCategory .keyword form input {
	box-sizing: border-box ;
	padding-left: 3px ;
}
.home .byCategory .refine form select {
	z-index:1 ;
	position: relative ;
}
.home .byCategory .refine .button,
.home .byCategory .keyword .button {
	line-height: 2 ;
	width: 6em ;
}
.home .byCategory .keyword .button {
	height: 100% ;
}

.home .byCategory .refine .button:before,
.home .byCategory .keyword .button:before {
	font-size: 1.2em ;
	height: 100%;
	padding-right: 0.25em ;
}
.home .byCategory .keyword {
	width: 29% ;
}
.home .besides {
	display: flex ;
	flex-wrap: wrap ;
	justify-content:space-between;
	margin-bottom: 90px ;
}
.home .besides .important,
.home .besides .notice,
.home .besides .spurious{
	width: 49% ;
	padding-bottom: 0.75em ;
}
.home .besides .important a,
.home .besides .notice a,
.home .besides .spurious a{
	background: #3671af no-repeat 3% 0 ;
	background-size: contain ;
	color: #fff ;
	display: block ;
	font-size:1.5em ;
	padding: 0.5em 1em 0.5em 22% ;
}
.home .besides .important a {
	background-image: url(/img/home/product_button_bg1.gif) ;
}
.home .besides .notice a {
	background-image: url(/img/home/product_button_bg2.gif) ;
}
.home .besides .spurious a {
	background-image: url(/img/home/product_button_bg3.gif) ;
}

.home .besides .important a:before,
.home .besides .notice a:before,
.home .besides .spurious a:before {
	padding-right: 0.5em ;
	font-size: 0.75em ;
}
/* ピックアップ
---------- */
.pickup,
.recommended {
	background: #f8f8f8 ;
	padding: 5.5em 0 2em 0 ;
}
.pickup h1,
.home-topics h1{
	display: flex;
	align-items: center;
	text-align: left ;
}
.pickup h1 small,
.home-topics h1 small {
	font-size: 14px ;
	color: #3671af ;
	padding-left: 1.5em ;
}
.pickup ul,
.home-topics ul {
	margin: 0 ;
	padding: 0 ;
	display: flex;
	flex-wrap: wrap ;
}
.pickup li,
.home-topics li.new-topic {
	list-style: none ;
	width: 32.25% ;
	padding-bottom: 3.5em ;
}
.pickup li:nth-of-type(3n-1),
.home-topics li.new-topic:nth-of-type(2) {
	margin-left: 1.5% ;
	margin-right: 1.5% ;
}
.pickup li.hidden {
	display: none ;
}
.pickup li a,
.home-topics li a {
	color: #222 ;
	transition-duration:0.2s;
}
.pickup li a:hover img,
.home-topics li a:hover .thumbnail div {
	opacity: 0.7 ;
	transition-duration:0.2s;
}
.pickup li a:hover,
.home-topics li a:hover {
	color: #103BAB ;
}
.pickup li img {
	display: block;
	padding-bottom: 0.5em ;
}
.pickup li h2 {
	font-size: 1.125em ;
	padding: 0 ;
}
.pickup li p {
	margin: 0 ;
	padding: 0.5em 0 0 0 ;
}
.more-button {
	text-align: center ;
	padding-bottom: 4em ;
}
.more-button span {
	box-sizing: border-box ;
	display: block ;
	font-size: 24px ;
	padding: 0.5em 1em ;
	width: 50% ;
	margin: auto ;
}
.more-button span:hover {
	background: #3671af ;
	color: #fff ;
}
.more-button span:before {
	font-size: 0.6em ;
	padding-right: 0.25em ;
}
.more-button.show,
.more-button.open .open,
.more-button.close .close {
	display: block ;
}
.more-button,
.more-button.open .close,
.more-button.close .open {
	display: none ;
}
/* 新着情報
---------- */
.home-topics {
	padding: 5.5em 0 11em 0 ;
}
.home-topics ul {
	border-bottom: 1px solid #dedede ;
}
.home-topics li {
	list-style: none ;
	border-top: 1px solid #dedede ;
	width: 100% ;
}
.home-topics li a {
	width: 100% ;
	display: flex ;
	flex-wrap: wrap;
}
.home-topics li.new-topic {
	border: 1px solid #c1c1c1 ;
	box-sizing: border-box ;
	margin-bottom: 2em ;
	padding: 0 ;
}
.home-topics li.new-topic a {
	box-sizing: border-box ;
	padding: 1em ;
}
.home-topics li.new-topic .thumbnail {
	border: none ;
	max-height: 163px ;
	max-width: none ;
	margin: 0 ;
	padding: 0 ;
	width: 100% ;
}
.home-topics li.new-topic .thumbnail div {
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
}
.home-topics li.new-topic .outline {
	padding: 1em 0 ;
	display: flex ;
	flex-wrap: wrap ;
	width: 100% ;
}
.home-topics li.new-topic .title {
	padding-top: 0.75em ;
	width: 100% ;
}
.home-topics li.new-topic .date {
	box-sizing: border-box ;
	width: calc(100% - 90px);
	padding: 0 0 0 1em ;
	line-height: 1.2rem ;
}
.home-topics li.new-topic .category {
	height: auto ;
	padding: 0 ;
}
.home-topics li .thumbnail {
	box-sizing: border-box ;
	border: 1px solid #bbb ;
	display: flex ;
	margin: 0.5em 0 ;
	max-height: 62px ;
	overflow: hidden ;
	padding: 4px ;
	position: relative;
	width: 90px ;
}
.home-topics .thumbnail:before {
    content:"";
    display: block;
    padding-top: 75%;
}
.home-topics .thumbnail div {
	background: no-repeat center center ;
	background-size: cover ;
	position: absolute;
	top: 4px;
	left: 4px;
	bottom: 4px;
	right: 4px;
}
.home-topics li .outline {
	display: grid;
	grid-template-columns: 120px auto ;
	grid-template-rows: auto auto ;
	display: -ms-grid;
	-ms-grid-columns: 120px auto;
	-ms-grid-rows: auto auto;

	padding: 0.5em 0 0.5em 30px ;
	box-sizing: border-box ;
	width: 80% ;
	width: calc(100% - 90px) ;
}
.home-topics li .date {
	grid-row: 1 / 2;
	-ms-grid-column: 2;
	-ms-grid-row: 1;

	display: flex;
	align-items: end;
}
.home-topics li .title {
	grid-row: 2 / 3;
	-ms-grid-column: 2;
	-ms-grid-row: 2;
	vertical-align: top ;
}
.home-topics li .category {
	grid-row: 1 / 3;
	-ms-grid-column: 1;
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;

    display: flex;
    justify-content: center;
    align-items: center;
	padding:  0 30px 0 0 ;
	vertical-align: middle ;
}

.newstopics .button {
	font-size: 1.5em;
	padding: 0.5em 1em ;
	width: 80% ;
	max-width: 560px ;
	margin-top: 3.5em ;
	display: inline-block ;
}

/* 英文
---------- */
.en .home .byMarket > ul > li > ul li a {
	padding-left: 8% ;
}
/* 中文
---------- */
.cn .home .besides .notice {
	width: 80% ;
	margin: auto ;
	max-width: 560px;
}
.cn .home .besides .notice a {
	padding: 0.5em 1em 0.5em 1em;
	text-align: center ;
}
.cn .recommended .tabs {
	display: flex ;
	flex-wrap: wrap ;
	align-items:center ;
}
.cn .recommended .tabs > li {
	width: 24.8% ;
	margin-right: 0.26% ;
	padding-bottom: 30px ;
	overflow: hidden;
}
.cn .recommended .tabs li:nth-of-type(4n) {
	margin-right: 0 ;
}
.cn .recommended .tabs h3 {
	background: #999 no-repeat center center ;
	background-size: cover ;
	border-bottom: 15px solid #acbaca ;
	box-sizing: border-box;
	color: #fff ;
	font-size: 1.625em ;
	font-weight: bold ;
	line-height: 1.7 ;
	padding: 4.5rem 0 ;
	position: relative ;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center ;
	margin-bottom: 0 ;
}
.cn .recommended .tabs h3 {
	border-color:  #acbaca ;
}

.cn .recommended .tabs h3:before {
	position: absolute ;
    font-size: 2rem;
	bottom: 23px ;
	left: 0 ;
	right: 0 ;
	display: inline-block ;
	text-align: center ;
    line-height: 1;
}
.cn .recommended .tabs .tab1 h3 { background-image: url(/img/recreational/shiptype_bg1.jpg) ;}
.cn .recommended .tabs .tab2 h3 { background-image: url(/img/recreational/shiptype_bg2.jpg) ;}
.cn .recommended .tabs .tab3 h3 { background-image: url(/img/recreational/shiptype_bg3.jpg) ;}
.cn .recommended .tabs .tab4 h3 { background-image: url(/img/recreational/shiptype_bg4.jpg) ;}

.cn .recommended .tabs a {
	display: block ;
	color: #161616 ;
}
.cn .recommended .tabs a:before {
	color: #0163cc ;
}
.cn .recommended .tabs a:hover {
	color: #0163cc ;
}

.cn .tabs ul {
	background: #f0f0f0 ;
	padding: 2em 30px 1.75em;
}
.cn .recommended .tabs li li {
	margin-bottom: 0.25em ;
}
.cn .home .byCategory .refine form .select:nth-of-type(2) {
	display: none;
}
.cn .home .byCategory .refine form .input {
	width: calc(47% - 3em);
}
.cn .home-search {
	background: linear-gradient(to bottom, #fff, #daddde);
}
.cn .home-search h1 {
	padding-bottom: 0.25em ;
}
.cn .home .byCategory {
	margin-top :1em ;
}
@media screen and (max-width: 1200px) {
	/* 製品情報
	---------- */
	.home .byMarket h2 {
		font-size: 1.8em ;
	}
	.home .byMarket > ul > li > ul li {
		padding-bottom: 1em ;
		width: 100% ;
	}
	.home .byMarket > ul > li > ul li a {
		padding-left: 10% ;
	}
	.home .byMarket > ul > li > ul li {
		padding-bottom: 0.5em ;
	}
	/* 英文
	---------- */
	.en .home .byMarket > ul > li > ul li a {
		padding-left: 5% ;
	}

}
@media screen and (max-width: 960px) {
	/* 製品情報
	---------- */
	.home .byMarket h2 {
		font-size: 1.5em ;
	}
	.home .byMarket > ul > li > ul li a {
		font-size: 1rem ;
		padding-left: 5% ;
	}
	/* 英文
	---------- */
	.en .home .byMarket > ul > li > ul li a {
		padding-left: 3% ;
	}
}
@media screen and (max-width: 880px) {
	/* 製品情報
	---------- */
	.home .byMarket h2 {
		font-size: 1.4em ;
	}
	.home .byMarket > ul > li > ul li a span:before {
		font-size: 0.9em ;
		margin-left: -0.85em ;
		padding: 4px 4px 0 0 ;
	}
	.home .byMarket > ul > li > ul li a span {
		padding-left: 0.5em ;
	}
	.home .byCategory .refine {
		border: none ;
		padding: 0 ;
		width: 100% ;
	}
	.home .byCategory .keyword {
		display: none ;
	}
	.home .besides .important a,
	.home .besides .notice a,
	.home .besides .spurious a{
		font-size: 1rem ;
	}
	/* ピックアップ
	---------- */
	.pickup ul {
		justify-content: space-between;
	}
	.pickup li,
	.pickup li:nth-of-type(3n-1) {
		margin: 0 ;
		width: 49% ;
	}
	.pickup li img {
		width: 100% ;
	}
	.cn .recommended .tabs h3 {
		font-size: 1.25em ;
		padding: 2em 0 ;
	}
	.cn .recommended .tabs h3:before {
		font-size: 1.25em ;
		bottom: 14px ;
	}

	.cn .recommended .tabs > li {
		width: 49.8% ;
		margin-right: 0.4% ;
	}
	.cn .recommended .tabs li:nth-of-type(2n) {
		margin-right: 0 ;
	}
	.cn .tabs ul {
		padding: 1em 0 0.75em 10px;
		font-size: 87.5% ;
	}
	

}

@media screen and (max-width: 640px) {
	/* 製品情報
	---------- */
	.home h1 {
		margin-left: 0 ;
		margin-right:0 ;
	}
	.home-search h1,
	.cn .home-search h1,
	.pickup h1,
	.home-topics h1 {
		font-size: 1.6em ;
		padding-bottom: 1rem ;
		text-align: left ;
	}
	.home-search h1,
	.cn .home-search h1 {
		padding-left: 18px ;
		padding-right: 18px ;
	}
	.home-search,
	.cn .home-search {
		background: none ;
	}
	.home .byMarket .marine,
	.home .byMarket .its,
	.home .byMarket .systems,
	.cn .home .byMarket .marine,
	.cn .home .byMarket .its {
		width: 100% ;
	}
	.home .byMarket > ul > li > ul {
		font-size: 0.875rem ;
	}
	.home .byMarket > ul {
		display: block ;
		padding: 0 18px ;
	}
	.home .byMarket > ul > li > ul {
		background: #fff ;
		display: flex ;
		flex-wrap: wrap ;
		justify-content: space-between;
		padding: 4px 0 2em ;
	}

	.home .byMarket > ul > li > ul li {
		width: 49% ;
		margin-bottom: 4px ;
		padding: 0 ;
		display: flex ;
	}
	.home .byMarket > ul > li > ul li a {
		box-sizing: border-box ;
		border: 1px solid #dedede ;
		background: #e3e3e3 ;
		height: 100% ;
		padding: 0.75em 0.1em 0.75em 0.5em ;
		line-height: 1.25 ;
		width: 100% ;
		font-size: 14px ;
	}
	.home .byMarket > ul > li > ul li a:hover {
		background: #f5f5f5 ;
	}
	.home .byCategory {
		border: 3px solid #c9c9c9 ;
		margin: 0 0 2em ;
		padding: 15px ;
	}
	.home .byCategory h2 {
		font-size: 1.25em ;
	}
	.home .byCategory .refine form {
		display: block ;
	}
	.home .byCategory .refine form .input,
	.cn .home .byCategory .refine form .input {
		width: 100% ;
		margin-bottom: 0.75em ;
	}
	.home .byCategory .refine .button {
		width: 100% ;
		text-align: center ;
		padding: 0.75em 0 ;
	}
	.home .besides {
		display: block ;
		margin-bottom: 3em ;
	}
	.home .besides .important,
	.home .besides .notice,
	.home .besides .spurious,
	.cn .home .besides .notice {
		width: 100% ;
		padding-bottom: 16px ;
	}
	.home .besides .important a,
	.home .besides .notice a,
	.home .besides .spurious a {
		line-height: 1.3 ;
		font-size: 1rem ;
		padding: 0.75em 0 0.75em 22% ;
	}
	.more-button span {
		font-size: 16px ;
	}
	/* 中文
	---------- */
	.cn .home .besides .notice a {
		padding: 0.5em 1em 0.5em 1em;
		text-align: center ;
	}
	.cn .home .byCategory {
		margin-top: 0 ;
	}

	/* ピックアップ（一部 新着情報）
	---------- */
	#pickup {
		background: #f1f1f1 ;
		padding: 1.5em 0 1em ;
	}
	.pickup h1 small,
	.home-topics h1 small {
		display: none ;
	}
	.pickup ul,
	.home-topics ul {
		display: block ;
	}
	.pickup li,
	.pickup li:nth-of-type(3n-1),
	.home-topics li.new-topic {
		width: 100% ;
		padding: 0 ;
		margin: 0 0 1.5em ;
	}
	.pickup li h2,
	.pickup li {
		font-size: 0.875rem ;
	}
	/* 新着情報
	---------- */
	.home-topics {
		background: none ;
		padding: 1.5em 0 11em 0 ;
	}
	.home-topics ul {
		border-bottom: 0 ;
	}
	.home-topics li.new-topic {
		margin: 0 ;
	}
	.home-topics li,
	.home-topics li.new-topic {
		border: none;
		border-bottom: 1px solid #bbb;
	}
	.home-topics li a,
	.home-topics li.new-topic a {
		font-size: 0.875em ;
		padding: 0.75em 0  ;
	}
	.home-topics li.new-topic:first-child a {
		padding: 0 0 0.75em  ;
	}
	.home-topics li.new-topic .title,
	.home-topics li .title {
		padding-top: 0.25em ;
	}
	.home-topics li .thumbnail {
		display: none ;
	}
	.home-topics li .date,
	.home-topics li.new-topic .date {
		box-sizing: border-box;
		width: calc(100% - 90px);
		padding: 0 0 0 0.25em;
		line-height: 1.2rem;
	}
	.home-topics li .category {
		padding : 0 ;
	}
	.home-topics li .outline,
	.home-topics li.new-topic .outline {
		width: 100% ;
		display: flex ;
		flex-wrap: wrap ;
		padding: 0.5em 0 0.5em ;
	}
	.newstopics .button {
		box-sizing: border-box;
		font-size: 0.875rem ;
		width:100% ;
		margin-top: 2.5em ;
		max-width: none ;
		padding: 1em 0 ;
	}
	.cn .home-topics,
	.cn .recommended {
		padding: 1.5em 0 3em 0 ;
	}

}
@media screen and (max-width: 400px) {
	.home .besides .important a,
	.home .besides .notice a {
		font-size: 1rem ;
		padding: 0.8em 0 0.8em 20% ;
	}

	/* 中文
	---------- */
	.cn .home .besides .notice a {
		padding: 0.8em 0 0.8em 20% ;
		text-align: left ;
	}

}