@charset "utf-8";

/* base
-------------------------------------------------- */
body {
	padding-top: 98px;
}
body.open {
	overflow-y:hidden;
}
.warp {
	width: 100%;
	margin: 0 auto;
}
.pcNone {
	display: inherit;
}
.spNone {
	display: none;
}
main {
	width: 100%;
	min-width: 100%;
	padding: 0 5%;
}
.matter {
	font-size: 1.2rem;
	padding-bottom: 10px;
}
.ttl .matter {
	font-size: 1.2rem;
	padding-top: 36px;
}
.pager {
	margin-bottom: 10px;
}
.pager:last-of-type {
	margin-bottom: 0;
}
.pager li {
	margin-bottom: 5px;
}
#iconExpl dt {
	display: inline-block;
	text-align: center;
	width: 100%;
	margin: 0 0 8px;
	border-right: none;
	border-bottom: #a0a0a0 solid 1px;
}
#iconExpl dd p {
	text-align: center;
	width: 50%;
	padding: 8px 0;
}

/* #pageHead
-------------------------------------------------- */
#pageHead {
	height: auto;
	padding: 6px 5% 20px;
}
#pageHead ul {
	width: 100%;
	margin: 0 auto 10px;
}
#pageHead ul li a {
	padding-right: 1.0em;
	margin-right: 0.5em;
}
#pageHead h1 {
	font-size: 2.4rem;
	width: 100%;
}

/* #partsRecommend
-------------------------------------------------- */
#partsRecommend {
	width: 100%;
	padding: 0 5%;
	margin-bottom: 30px;
}
#partsRecommend ul li {
	float: left;
	width: 100%;
	margin: 0 0 17px;
	text-align: center;
}

/* #newsSearch
-------------------------------------------------- */
#newsSearch {
	width: 100%;
}
#newsSearchBtn {
	display: block;
	top: -102px;
	right: 3%;
	position: absolute;
}
#newsSearchBtn a {
	display: block;
	padding: 8px;
	width: 5.5em;
	font-size: 1.2rem;
	text-align: center;
	line-height: 1;
	color: #fff;
	background-color: #b22e30;
}
#newsSearchBtn a.hover {
	text-decoration: none;
	background-color: #ed1c24;
}
#newsSearchBtn a:focus {
	text-decoration: none;
}
#newsSearchBox.mfp-hide {
  display: none !important;
}
#newsSearchBox,
#newsSearchBox.en {
	width: 100%;
	margin: auto;
	padding: 30px 5%;
	color: #fff;
	text-align: center;
}
#newsSearchBox h1 {
	display: block;
	font-size: 2.4rem;
	color: #fff;
	margin-bottom: 1em;
}
#newsSearchBox h2 {
	float: none;
	font-size: 2.0rem;
	font-weight: bold;
	margin-bottom: 12px;
}
#newsSearchBox form p input[type='submit'] {
	position: relative;
	height: 42px;
	padding: 0 5em;
	text-align: center;
	font-size: 1.6rem;
	border: #fff solid 1px;
}
#newsSearchBox form ul li {
	width: 100%;
	height: 42px;
	margin-bottom: 1em;
}
#newsSearchBox form ul li:nth-of-type(2) {
	margin-left: 0;
}
#newsSearchBox form ul li input[type='text'] {
	width: 100%;
	height: 42px;
	line-height: 42px;
	font-size: 1.6rem;
}
#newsSearchBox form ul li:nth-of-type(2) select {
	height: 42px;
	font-size: 1.6rem;
}
#newsSearchBox form ul li:nth-of-type(2)::before {
	top: 18px;
}
#newsSearchBox form ol {
	display: inline-block;
	float: none;
	margin-bottom: 40px;
}
#newsSearchBox form ol li {
	position: relative;
	z-index: 2;
	width: 26%;
	margin-left: 3%;
	line-height: 38px;
}
#newsSearchBox form ol li span {
	font-weight: bold;
}
#newsSearchBox form ol li:first-of-type,
#newsSearchBox form ol li:nth-of-type(5) {
	width: 36%;
	margin-left: 3%;
	line-height: 38px;
}
#newsSearchBox form ol li:nth-of-type(4) {
	display: inline-block;
	z-index: 1;
	transform: rotate(90deg);
	text-align: center;
	width: 100%;
	margin-left: 0;
}
#newsSearchBox form ol li select {
	font-size: 1.6rem;
	height: 38px;
}
#newsSearchBox form ol li::before {
	top: 16px;
}



/* #partsReport
-------------------------------------------------- */
#partsReport {
	width: 100%;
	padding: 0 5%;
}
#partsReport ul {
	width: 100%;
	padding: 0 12px 10px;
	margin-bottom: 10px;
}
#partsReport ul li {
	width: 100%;
	padding: 5px 0;
}
#partsReport ul:last-of-type li:last-child {
	width: 100%;
}

/* #partsOldReport
-------------------------------------------------- */
#partsOldReport {
	display: inherit;
	width: 100%;
	padding: 20px;
}
#partsOldReport dl {
	width: 100%;
}
#partsOldReport dl dt {
	margin-bottom: 10px;
}
#partsOldReport p {
	margin: 20px auto 0;
}
#partsOldReport p a {
	width: 70%;
}

/* #partsAboutReport
-------------------------------------------------- */
#partsAboutReport {
	display: inherit;
	width: 100%;
}
#partsAboutReport li {
	width: 100%;
	margin-right: 0;
	padding: 20px;
	margin-bottom: 30px;
}
#partsAboutReport li:last-of-type {
	margin-bottom: 0;
}

/* #partsSpCont
-------------------------------------------------- */
#partsSpCont ul li {
	float: left;
	width: 100%;
}
#partsSpCont ul li time {
	margin-bottom: 5px;
	padding-bottom: 5px;
}
#partsSpCont ul li p {
	font-size: 1.4rem;
}

/* #partsOther
-------------------------------------------------- */
#partsOther {
	margin-bottom: 30px;
}
#partsOther ul li {
	float: inherit;
	width: 100%;
	max-width: 260px;
	margin: 0 auto 17px;
}
#partsOther ul li:nth-child(4n) {
	margin-right: auto;
}


/* #pagetop
-------------------------------------------------- */
#pagetop a {
	width: 40px;
	height: 40px;
	margin-right: 10px;
	margin-bottom: 34px;
}
#pagetop a::before {
	width: 40px;
	height: 40px;
}
#pagetop a::after {
	top: 6px;
	left: 14px;
	width: 12px;
	height: 12px;
}

/* header
-------------------------------------------------- */
#header {
	z-index: 999;
	top: 0;
	left: 0;
	padding: 0;
	height: 98px;
	min-width: 100%;
	border-bottom: none;
}
/* Fixed reset */
header.fixed {
}
header.open {
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7);
}

#mobileHead {
	padding: 0;
}
#mobileHead .waku {
	height: 57px;
	border-bottom: #b22e30 solid 3px;
}
#mobileHead p {
	padding: 8px 0 0 8px;
}
#mobileHead p a {
	float: left;
}
#mobileHead p img {
	height: 36px;
	padding: 0;
}
#mobileHead p span {
	float: left;
	display: block;
	margin: 16px 0 0 10px;
}
@media screen and (max-width:320px) {/*iPhone 5, 5s, seに適用させたいCSSを記述*/
	#mobileHead p span {
		width: 7.5em;
		line-height: 1.2;
		margin: 7px 0 0 10px;
	}
}
#mobileHead #search a {
	position: absolute;
	top: 0;
	right: 55px;
	height: 55px;
	width: 55px;
}
#mobileHead #searchBox {
	top: 57px;
	width: 100%;
	min-width: 100%;
	padding: 0 3%;
}
#mobileHead #searchBox.open {
  z-index: 8;
	padding: 15px 3%;
}
#mobileHead #searchBox .searchText {
	width: 75%;
	min-width: 75%;
}
#mobileHead #searchBox .searchBtn {
	float: right;
	width: 22%;
	min-width: 22%;
}


/* Toggle Button */
#navToggle {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 55px;
	height: 55px;
	padding: 4px;
	cursor: pointer;
	background-color: #000;
}
#navToggle div {
	position: relative;
	height: 47px;
	width: 47px;
	border: rgba(255, 255, 255, 0.6) solid 1px;
	border-radius: 5px;
}
#navToggle span {
	display: block;
	position: absolute;
	height: 2px;
	width: 54%;
	margin: 0 23%;
	background: #fff;
	border-radius: 5px;
	left: 0;
	transition: .35s ease-in-out;
}
#navToggle span:nth-child(1) {
	top: 12px;
}
#navToggle span:nth-child(2) {
	top: 19px;
}
#navToggle span:nth-child(3) {
	top: 26px;
}
#navToggle strong {
	position: absolute;
	bottom: 2px;
	color: #fff;
	font-size: 1rem;
	font-weight: normal;
	text-align: center;
	width: 100%;
}
	/* #nav-toggle 切り替えアニメーション */
	.open #navToggle div {
		border: none;
	}
	.open #navToggle strong {
		display: none;
	}
	.open #navToggle span:nth-child(1) {
		top: 23px;
		width: 60%;
		margin: 0 20%;
		transform: rotate(315deg);
	}
	.open #navToggle span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.open #navToggle span:nth-child(3) {
		top: 23px;
		width: 60%;
		margin: 0 20%;
		transform: rotate(-315deg);
	}
#mobileHead #item {
	width: 100%; 
	height: auto;
	padding: 13px 4% 10px;
  background: #ececec;
	border-bottom: #d5d5d5 solid 1px;
}
#mobileHead #item ul {
	display: none;
}
#mobileHead #item dl {
	float: right;
	width: 100%;
}
#mobileHead #item dl dt {
	width: calc(100% - 180px);
	text-align: left;
}
#mobileHead #item dl dd {
	margin: -3px 0 0 9px; 
}
#mobileHead #item dl dd:last-of-type {
	display: block;
}
#mobileHead #item dl dd a {
	font-size: 1.2rem;
	padding: 5px 10px;
	background-color: #6c6c6c;
	border-radius: 3px;
}
#mobileHead nav {
	display: none;
}

/* #nav
-------------------------------------------------- */
#globalNav {
	position: fixed;
	z-index: 999;
	top: 57px;
	background: #fff;
	width: 100%;
	min-width: 100%;
	height: 0;
	text-align: center;
	transition: .5s ease-in-out;
	overflow-y: hidden;
}
/* #globalNav スライドアニメーション */
#globalNav.open  {
	height: 100%;
	padding-bottom: 6em;
	overflow-y: auto;
}
#globalNav.fixed {
}
#globalNav ul {
	position: static;
	min-width: 100%;
	width: 100%;
	height: auto;
	display: block;
  text-align: left;
	margin-bottom: 1.5em;
	border-top: none;
}
#globalNav ul li {
	width: 100%;
	min-width: 100%;
	height: auto;
}
#globalNav ul li {
	border-left: none;
	border-bottom: #d4d4d4 solid 1px;
}
#globalNav ul li a span {
	display: none;
}
#globalNav ul li a strong {
	font-weight: normal;
}
#globalNav ul li a,
#globalNav ul li.type a {
	position: relative;
	width: 100%;
	font-size: 1.4rem;
	padding: 14px 2em;
}
#globalNav ul li a::after {
	position: absolute;
	content: "";
	top: 21px;
	right: 2em;
	width: 8px;
	height: 8px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#globalNav ul li a.hover,
#globalNav ul li a.current {
	color: #fff;
	background-color: #b22e30;
}
#globalNav ul li a.current strong {
	color: #fff;
}
#globalNav ul li a.hover::after,
#globalNav ul li a.current::after {
	border-color: #fff;
}
#globalNav ul li a span {
	display: none;
}
#globalNav ul li a strong {
	font-weight: normal;
}
#globalNav ul li a strong::after,
#globalNav ul li a strong::after {
	content: none;
}
#globalNav ol {
	display: block;
}
#globalNav ol:first-of-type {
	position: static;
	min-width: 100%;
	width: 100%;
	display: flex;
	height: auto;
	overflow: hidden;
	border-bottom: #d4d4d4 solid 1px;
}
#globalNav ol:first-of-type li {
	width: 25%;
}
#globalNav ol:first-of-type li a {
	display: block;
	height: 70px;
	width: 100%;
	padding-top: 12px;
	font-size: 1.1rem;
	text-align: center;
}
#globalNav ol:first-of-type li a.hover {
	color: #fff;
	text-decoration: none;
	background-color: #b22e30;
}
#globalNav ol:first-of-type li a.hover img {
 filter: brightness(0) invert(1);
}
#globalNav ol:first-of-type li img {
	display: block;
	width: auto;
	height: 28px;
	margin: 0 auto 2px;
}
#globalNav ol:first-of-type li:first-of-type {
	color: #d0cfcf;
	font-weight: bold;
	line-height: 50px;
	height: 50px;
	margin: 10px 0;
	border-right: #d4d4d4 solid 1px;
}
#globalNav ol:nth-of-type(2),
#globalNav ol:nth-of-type(3) {
	float: left;
	position: relative;
	width: 38%;
	margin-left: 7%;
	height: auto;
	overflow: hidden;
	text-align: left;
	line-height: 1;
}
#globalNav ol:nth-of-type(2) {
  clear: both;
}
#globalNav ol:nth-of-type(3) {
	width: 50%;
	margin-left: 0;
}
#globalNav ol:nth-of-type(2) li a,
#globalNav ol:nth-of-type(3) li a {
	position: relative;
	display: block;
	padding: 0.5em 0 0.5em 1em;
}
#globalNav ol:nth-of-type(2) li a::before,
#globalNav ol:nth-of-type(3) li a::before {
	position: absolute;
	content: "-";
	display: block;
	left: 0;
	top: 0.5em;
}
#globalNav p {
	float: left;
	display: block;
	width: 43%;
	margin-left: 5%;
	line-height: 1;
	margin-bottom: 1.5em;
}
#globalNav p a {
	display: block;
	width: 100%;
	padding: 10px 0;
	text-align: center;
	border: #6c6c6c solid 1px;
}
#globalNav p a.hover,
#globalNav p a.current {
	color: #fff;
	border-color: #b22e30;
	background-color: #b22e30;
}

/* footer
-------------------------------------------------- */
#footer {
	width: 100%;
	padding-top: 0;
	margin-top: 80px;
}
#footer .sitemap {
	display: inline-block;
	width: 100%;
	margin: 0 auto;
}
#footer .sitemap section,
#footer .sitemap:nth-of-type(3) section:first-of-type,
#footer .sitemap:nth-of-type(3) section:last-of-type {
	float: none;
	width: 100%;
	margin-right: 0;
	padding-top: 0;
}
#footer .sitemap:nth-of-type(3) section:first-of-type{
	width: 100%;
}
#footer .sitemap section ul {
	padding: 0 7% 1.2em;
}
#footer .sitemap:nth-of-type(3) section:first-of-type ul li {
	float: none;
	width: 100%;
}
#footer .sitemap:nth-of-type(3) section:first-of-type ul li:nth-child(even) {
	float: none;
}
#footer .sitemap section p {
	font-weight: normal;
	padding: 1em 5%;
	margin-bottom: 0;
	border-bottom: none;
	border-top: #cacaca solid 1px;
}
#footer .sitemap section p::after {
	position: absolute;
	content: "";
	top: 1.1em;
	left: inherit;
	right: 5%;
	width: 9px;
	height: 9px;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
	border-bottom: none;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	-webkit-transition: all .3s ease;
  transition: all .3s ease;
}
#footer .sitemap section p.open::after {
	top: 1.4em;
	-webkit-transform: rotate(315deg);
	transform: rotate(315deg);
}
#footer #sns {
  padding: 20px;
	background-color: #cacaca;
}
#footer #sns ul {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: stretch;
  align-items: stretch;
  text-align: center;
	width: 100%;
}
#footer #footMenu {
	display: none;
	min-width: 100%;
	background-color: #fff;
}
#footer #footMenu ul {
  padding: 15px 0;
}
#footer #footMenu ul li {
	margin: 0 4px;
}
#footer #copyright {
	min-width: 100%;
}

/* RIGHT SIDE  //Market at a Glance
-------------------------------------------------- */
#market {
	width: 100%;
	padding: 0 5%;
}
#market #toHome {
  height: auto;
}
#market article a { 
	text-align: right;
	padding: 12px 2em;
}
#market article h1 { 
	text-align: left;
}
#market article p {
	display: inline-block;
	float: none;
	padding: 0 1em 0 0;
}
#market article p:last-of-type { 
	display: inline-block;
	float: none;
	padding: 3px 1.em;
}
#market div {
	display: block;
	overflow-y: auto;
	height: 11em;
	margin-bottom: 30px;
}
#market section:last-of-type {
	margin-bottom: 0;
}
/* LEFT SIDE  //Side Menu
-------------------------------------------------- */
#side {
	width: 100%;
	padding: 0 5%;
}
#side section {
	display: none;
}
#side section:last-of-type {
	display: inline-block;
	margin-bottom: 30px!important;
}
#side section:last-of-type h3,
#side section:last-of-type p {
	padding-left: 5%;
}
#side section:last-of-type p:last-of-type {
	padding-right: 5%;
}
#side section#holiday table {
	width: 90%;
	margin: 0 5% 10px;
}

/* Banner  //Market at a Glance //Side Menu
-------------------------------------------------- */
aside .banner {
	margin-bottom: 50px;
}
aside .banner li {
	width: 80%;
	max-width: 280px;
	margin: 0 auto 10px;
}
aside .banner li img {
	width: 100%;
}

/* TOP Page
-------------------------------------------------- */
#top {
	display: inherit;
	flex-wrap: nowrap;
	margin-top: 20px;
}

#top #side .banner:last-of-type {
	margin-bottom: 0;
}
#top main {
	width: 100%;
	margin: 0;
}
#topVisual {
	width: 100%;
	min-width: 100%;
	height: auto;
  min-height: 80px;
	padding: 10px 0;
	background: url("../images/top_visual_sp.jpg") no-repeat center 37%;
}
#topVisual p {
  position: relative;
	float: none;
	color: #fff;
	font-size: 1.8rem;
	text-align: center;
	padding: 0;
}
#topVisual ol {
  display: flex;
  justify-content: center;
  align-items: center;
	float: none;
	width: 90%;
	margin: 10px 5% 0;
}
#topVisual ol li {
	float: none;
	margin: 0 2%;
  max-width: 95px;
}
#topVisual ol li a {
  display: grid;
	width: 100%;
	height: auto;
}
#topInfo {
	position: relative;
	width: 100%;
	margin: 0 auto;
}
#topInfo::after {
	display: block;
	clear: both;
	content: "";
}
#topInfo div:first-of-type {
	display: block;
	background-color: #000;
	padding: 5px;
	text-align: center;
}
#topInfo div:first-of-type a {
	position: relative;
	display: inline-block;
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	text-decoration: none;
	text-align:center;
	width: 80%;
	max-width: 300px;
	padding: 6px;
	border-radius: 3px;
	border:1px solid #4aadfb;
	text-shadow:1px 1px #555;
	background-image:-moz-linear-gradient(
		top,
		#49a9d4 0%,
		#2989d8 40%,
		#2285d6 52%,
		#2989d8);
	background-image:-webkit-gradient(
		linear,left top,left bottom,
		from(#49a9d4),
		color-stop(0.49,#2989d8),
		color-stop(0.52,#2285d6),
		to(#2989d8));
}
#topInfo div:first-of-type a.hover {
	color: #fff;
	background: #ed1c24;
	border-color: #ed1c24;
	text-shadow: 0 0 #ed1c24;
}
#topInfo div:first-of-type a::after {
	position: absolute;
	content: "";
	top: 13px;
	right: 15px;
	width: 9px;
	height: 9px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#topInfo article {
	width: 100%;
	padding: 10px 5%;
	background-color: #fff;
	border-bottom: 1px solid #cfcfcf;
}
#topInfo article dl dt {
	width: 6em;
}
#topInfo article dl dd {
	width: calc(100% - 6em);
}

#topInfo ol {
  display: flex;
  float: none;
  width: 90%;
  margin: 0 5%;
  padding-top: 10px;
}
#topInfo ol li {
	float: none;
  width: 32%;
	margin-left: 2%;
  border-color: #456273;
}
#topInfo ol li:first-of-type {
	margin-left: 0;
}
#topInfo ol li a {
  display: flex;
  justify-content: center;
  align-items: center;
	color: #456273;
	background-color: #fff;
	width: 100%;
	height: 100%;
  font-size: 1.0rem;font-weight: bold;
  padding: 5px 3px;
  text-decoration: none;
}
#topInfo ol li a.hover {
	color: #fff;
	background-color: #456273;
	text-decoration: none;
}
#topInfo ol li a img {
  display: none;
  width: 20px;
	filter: invert(0.7) sepia(100%) hue-rotate(157deg);
}
#topInfo ol li a.hover img {
 filter: brightness(0) invert(1);
}

#topNews {
	display: inherit;
	margin-bottom: 60px;
}
#topNews section {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 0 20px;
}
#topNews section h2 {
	margin-bottom: 8px;
}
#topNews section p:last-of-type {
	text-align: right;
	margin: 0.5em 0 6px;
}
#topNews section p:last-of-type a {
	position: relative;
	right: inherit;
	bottom: inherit;
	padding: 0;
}
#topNews figure {
	width: 100%;
	margin-bottom: 30px;
}
#topNews figure a img {
	width: 100%;
}
#topNews figure figcaption p {
 	top: 10%;
	left: 20px;
}
#topNews figure figcaption p strong {
	font-size: 3.8rem;
}

#topMarket .tab li {
	margin-bottom: 5px;
}
#topMarket .tabPanel li a {
	display: table;
}
#topMarket .tabPanel li a span {
	display: table-cell;
}
#topMarket .tabPanel li a p {
	display: table-cell;
	vertical-align: top;
  width: 100%;
}
#topSpCont ul li {
	width: 100%;
}
#topSpCont ul li img {
	margin-right: 10px;
}
#topSpCont ul li time {
	font-size: 1.2rem;
	width: calc(100% - 70px);
	margin-bottom: 5px;
	padding-bottom: 5px;
}
#topSpCont ul li p {
	font-size: 1.4rem;
	width: calc(100% - 70px);
}

#topPicup div {
	width: 100%;
	height: auto;
}
#topPicup div figure {
	display: flex;
	margin-bottom: 15px;
}
#topPicup div figure figcaption {
	font-size: 1.4rem;
}
#topPicup div ul li {
	margin-bottom: 0.5em;
}
#topPicup div ul li a {
	font-size: 1.3rem;
}
#topPicup div p {
	float: right;
	position: relative;
	right: inherit;
	bottom: inherit;
}
#topPicup div p a {
	font-size: 1.3rem;
}
#topPicup div p a::after {
	top: 0.55em;
}

#topInformation .tab {
	padding: 0 5px;
}
#topInformation .tab li {
	padding: 1em 0;
}
#topInformation .tabPanel li p {
	font-size: 1.4rem;
}

#topMovie ul li  {
	float: left;
	width: 90%;
	margin: 0 5% 20px;
}
#topMovie ul li:last-of-type  {
	margin-bottom: 0;
}
#topMovie ul li time {
	font-size: 1.2rem;
}
#topMovie ul li p {
	font-size: 1.4rem;
}

#topPress {
	margin-bottom: 50px;
}


/* auth/login
-------------------------------------------------- */
#login main {
	display: inherit;
}
#login section {
	width: 100%;
	margin-left: 0;
	padding-bottom: 30px;
	margin-bottom: 50px;
}
#login section:last-of-type {
	margin: 0;
}
#login section h2 {
	margin-bottom: 20px;
}
#login section dl {
	width: 100%;
}
#login section dl dt {
	width: 30%;
}
#login section dl dd {
	width: 70%;
}
#login section:first-of-type p .checkbox {
	margin-bottom: 20px;
}


/* regist/member
-------------------------------------------------- */
#member main {
	padding: 0 5% 60px;
}
#member h2 {
	font-size: 2.4rem;
}
#member .memberData th,
#member .memberData td {
	display: block;
	width: 100%;
	border: none;
	padding: 0.5em 1em;
}
#member .memberBox {
  padding: 0;
  margin-bottom: 30px;
  display: inline-block;
  justify-content: center;
}
#member .memberRegist {
  width: 84%;
  margin: 0 8% 20px;
}
#member .memberList tr {
	display: table;
	float: none;
	width: 100%;
}
#member .memberList tr th {
	width: calc(100% - 110px);
	padding: 10px 10px;
}
#member .memberList tr td {
	width: 110px;
	padding: 10px 10px;
}
#member .memberData input[type='text'],
#member .memberData input[type='password'] {
  margin: 0.5em 0 1.5em;
}
#member form ul {
  width: 90%;  
}
#member form ul li {
  width: 120px;
}
#member form .memberData th,
#member form .memberData td {
	width: 100%;
}


/* rpt/report
-------------------------------------------------- */
#rimReport {
	width: 100%;
	padding: 0 5%;
}
#rimReport main {
	padding: 0;
}
#rimReport .heading h2 {
	width: 100%;
	font-size: 1.6rem;
}
#rimReport .heading p {
	position: relative;
	right: inherit;
	top: inherit;
	text-align: center;
}
#rimReport ul {
	width: 100%;
	padding: 0 12px 10px;
	margin-bottom: 10px;
}
#rimReport ul li {
	width: 100%;
	padding: 6px 0;
}
#rimReport ul:last-of-type li:last-child {
	width: 100%;
}
#rimReport #partsOldReport {
	width: 100%;
	margin: 0 0 50px;
}
#rimReport #partsAboutReport {
	width: 100%;
	margin: 0;
}

/* rpt/report/select/type
-------------------------------------------------- */
#rimReportSelect main {
	width: 100%;
	padding: 0 5%;
}
#rimReportSelect main h2 {
	font-size: 2.4rem;
}
#rimReportSelect #reportMenu {
	display: none;
}
#rimReportSelect .selectCalendar .left,
#rimReportSelect .selectCalendar .right {
	width: 5%;
}
#rimReportSelect .selectCalendar .calendar {
	width: 90%;
}
#rimReportSelect .selectCalendar .left a::after {
	left: 0;
}
#rimReportSelect .selectCalendar .right a::after {
	right: 0;
}

#rimReportSelect main .selectBox {
	display: inline-block;
}
#rimReportSelect main .selectBox p {
	width: 100%;
	margin-bottom: 10px;
}
#rimReportSelect main #rimReportSubscribe .urge {
	font-size: 1.5rem;
	line-height: 1.6;
}

#rimReportSelect main #rimReportSubscribe {
	padding: 20px 10px;
	border-width: 3px;
}
#rimReportSelect main #rimReportSubscribe .auth {
	width: 100%;
}
#rimReportSelect main #rimReportSubscribe .published .leadingList {
	padding-left: 1em;
}
#rimReportSelect main #rimReportSubscribe .auth li {
	width: 48%;
}
#rimReportSelect main #rimReportSubscribe .auth li:last-of-type {
	margin-left: 4%;
}
#rimReportSelect main #rimReportSubscribe .auth li a {
	font-size: 1.2rem;
	padding: 10px 0;
}
#rimReportSelect main #rimReportSubscribe dl {
	margin: 0 0 20px 10px;
}
#rimReportSelect main #rimReportSubscribe dl dd {
	margin-bottom: 10px;
}
#rimReportSelect main #rimReportSubscribe .published .leadingTtl strong {
	display: block;
}
#rimReportSelect main #rimReportSubscribe .published .leadingSubTtl {
	padding-left: 0;
}
#rimReportSelect main #rimReportSubscribe .published .leadingSubList {
	padding-left: 0;
}



/* news
-------------------------------------------------- */
#marketNews main {
	float: left;
	width: 100%;
}
#marketNews main #topNews section {
	padding-bottom: 0;
}
#marketNews main #topNews section p:last-of-type a {
	font-size: 1.2rem;
	right: 15px;
}
#marketNews main #topNews section h1 {
	margin-bottom: 10px;
}
#marketNews main #topNews section h2 {
	padding-right: 0;
}
#marketNews main #topNews section p {
	padding-right: 0;
}
#marketNews main #topNews section p:last-of-type a {
	right: inherit;
}
#marketNews main .categoryNews ul {
	padding: 1em 0.5em;
}
#marketNews main .categoryNews ul li {
	font-size: 1.4rem;
	font-weight: normal;
}
#marketNews main #partsPress  {
	margin-bottom: 50px;
}
#marketNews main .newsList h2 {
	margin-bottom: 33px;
}
#marketNews main .newsList ul {
	margin-bottom: 20px;
}
#marketNews main .newsList .notes {
	font-size: 1.2rem;
	margin-bottom: 10px;
}
#marketNews #partsRecommend {
	padding: 0;
}
#marketNews #partsReport {
	display: none;
}
#marketNews main #partsRecommend ul li {
	margin: 0 0 17px;
}
#marketNews main #partsOther ul li {
	margin: 0 auto 17px;
}
#marketNews main #partsOther ul li:nth-of-type(3n) {
	margin-right: auto;
}
#marketNews main .newsData h2 span {
  display: inline-block;
  margin-left: 0;
  line-height: 1.4;
  padding-top: 4px;
}
#marketNews main .newsData h2 strong {
  display: inline-block;
  padding-left: 0;
}


#marketNews main .newsData article {
	padding: 0;
}
#marketNews main .newsData article h1 {
	font-size: 2.8rem;
	padding: 10px;
	/*margin-bottom: 20px;*/
}
#marketNews main .newsData article .newsSentence {
	padding-bottom: 20px;
}
#marketNews main .newsData article#spContent .newsSentence {
	display: block;
}
#marketNews main .newsData article .newsSine {
	margin-bottom: 30px;
}
#marketNews main .newsData article .newsSine small {
	display: block;
	padding: 3px 0 0;
}
#marketNews main .newsData article .newsBtn li {
	float: left;
	width: 49%;
}
#marketNews main .newsData article .newsBtn li a {
	font-size: 1.1rem;
	line-height: 50px;
}
#marketNews main .newsData article .newsBtn li a img {
	padding-right: 6px;
}
#marketNews main .newsData article #newsLogin {
	padding: 20px 20px 25px;
}
#marketNews main .newsData article #newsLogin p {
	padding-bottom: 20px;
}
#marketNews main .newsData article #newsLogin dl {
	width: 100%;
}
#marketNews main .newsData article #newsLogin dl:first-of-type {
	margin-bottom: 20px;
}
#marketNews main .newsData article #newsLogin dl dd a {
	line-height: 50px;
}
#marketNews main .newsSearch {
	margin-bottom: 60px;
}
#marketNews main #newsBacknumber .ttl span {
  display: block;
  padding: 3px 0 0;
}

/* about
-------------------------------------------------- */
#about .subnav {
  display: flex;
  flex-wrap: wrap;
	width: 100%;
	margin-bottom: 50px;
}
#about .subnav li {
	width: 33.333%;
}
#about .subnav li:nth-of-type(3n) {
	border-right: none;
}
#about .subnav li:first-of-type,
#about .subnav li:nth-of-type(2),
#about .subnav li:nth-of-type(3) {
	border-bottom: #fff solid 1px;
}
#about .subnav li a {
	padding: 10px 8px;
	font-size: 1.3rem;
}
#about .subnav li a img {
	height: 25px;
	width: auto;
	padding: 0 8px 3px 0;
}
#about .subnav li a span {
	font-size: 1.0rem;
}
#about .company {
	padding: 0;
}
#about .company dl {
	display: inline-block;
	font-size: 1.6rem;
	width: 90%;
	margin: 0 5%;
	padding-bottom: 20px;
}
#about .company dl:first-of-type {
	margin-bottom: 20px;
	padding-bottom: 20px;
}
#about .company dl:last-of-type {
	padding-bottom: 50px;
}
#about .company dl dt {
	width: 100%;
	padding: 0 0 10px;
}
#about .company dl dd {
	width: 100%;
	padding: 0;
	font-size: 1.4rem;
}
#about .company dl dd strong {
	font-size: 2.4rem;
	margin-top: 0;
}
#about .company dl dd ol li {
	margin-bottom: 0.6em;
}
#about .company dl dd ol li:last-of-type {
	margin-bottom: 0;
}
#about .promotion {
	padding: 0;
}
#about .promotion .movie {
	width: 100%;
	margin-bottom: 50px;
}
#about .promotion .movie:last-of-type {
	margin-bottom: 0;
}
#about .promotion .movie a {
	width: 90%;
	margin: 0 5%;
}
#about .promotion .movie a.hover::after {
	padding-top: 17%;
}


#about article {
	display: inline-block;
	min-width: 100%;
	margin-bottom: 50px;
	background-color: #fff;
}
#about article figure {
	width: 100%;
	padding: 0 10% 20px;
	text-align: center;
}
#about article figure img {
	width: 100%;
	max-width: 480px;
	margin: auto;
}
#about article div {
	padding: 20px 5%;
	background-color: #f7f7f7;
}
#about article div h1 {
	padding-bottom: 1em;
}
#about article div .greeting {
	text-indent: 1em;
	line-height: 1.6;
	padding-bottom: 1em;
}
#about article div time {
	position: relative;
	right: inherit;
	bottom: inherit;
	display: block;
	padding: 10px 0;
	text-align: right;
}
#about article div p:last-of-type {
	text-align: right;
}
#about article div p:last-of-type span {
	padding-right: 0;
}
#about article div p:last-of-type strong {
	display: block;
}

#about .company .companyData {
	width: 100%;
}
#about .company .companyData:first-of-type {
	margin-bottom: 50px;
}
#about .company .companyData table {
	width: 100%;
}
#about .company .companyData table th {
	white-space: nowrap;
	padding: 1em 0 1em 1em;
}
#about .company .companyData:last-of-type table th {
	width: 20%;
}
#about .company .companyData:last-of-type table td {
	width: 80%;
}

#about .organization {
	padding: 0;
	margin-bottom: 50px;
}
#about .organization figure {
	width: 100%;
	padding-top: 0;
}

#about .office {
	padding: 0;
	margin-bottom: 50px;
}
#about .office dl {
	display: inline-block;
	width: 100%;
	padding: 0 0 20px 0;
	margin-bottom: 20px;
}
#about .office dl dt {
	width: 100%;
	padding: 0 1em;
	margin-bottom: 1em;
}
#about .office dl dd {
	width: 100%;
	padding: 0 1em;
}
#about .office div {
	display: flex;
	flex-wrap: wrap;
}
#about .office div dl {
	margin-right: 0;
}
#about .office div dl:nth-of-type(3) {
	margin-bottom: 20px;
}

#about .access {
	padding: 0;
}
#about .access div {
	height: 330px;
}
#about .access iframe {
	height: 730px;
}

/* glossary
-------------------------------------------------- */
#glossary main {
	width: 100%;
}
#glossary main ul {
	margin-bottom: 25px;
}
#glossary main ul li {
	margin: 0 5px 5px 0;
}
#glossary main section:last-of-type {
	margin-bottom: 50px;
}
#glossary main section table th,
#glossary main section table td {
	padding: 10px 6px;
}
#glossary main section table tbody th {
	font-size: 1.4rem;
}

/* previous
-------------------------------------------------- */
#previous main {
	padding: 0 5%;
}
#previous main section {
	padding: 0;
}
#previous main section:first-of-type div {
	width: 100%;
	margin-bottom: 20px;
}
#previous main section:first-of-type ul {
	width: 100%;
}
#previous main section:nth-of-type(2) div {
	padding-right: 0;
}
#previous main section:nth-of-type(2) div:nth-of-type(2n) {
	padding-left: 0;
}
#previous main section:nth-of-type(2) figure {
	display: inline-block;
	float: none;
	width: 100%;
	text-align: center;
}
#previous main section:nth-of-type(2) figure figcaption {
	font-size: 1.4rem;
	padding: 6px 0 0;
}
#previous main section:nth-of-type(2) ul {
	float: none;
	width: 94%;
	margin: 0 3%;
}
#previous main section:nth-of-type(2) ul li a {
	padding: 0 8px;
	font-size: 1.0rem;
}
#previous main section:nth-of-type(3) dl dd strong {
	color: #b22e30;
	display: block;
}

/* about/terms
-------------------------------------------------- */
#terms main {
	width: 100%;
	padding: 0 5%;
}
#terms main > p {
	margin-bottom: 40px;
}
#terms main article {
	margin-bottom: 40px;
}	

/* about/privacy
-------------------------------------------------- */
#privacy main {
	width: 100%;
	padding: 0 5%;
}
#privacy main > p {
	margin-bottom: 40px;
}
#privacy main article {
	margin-bottom: 40px;
}	

/* about/sitemap
-------------------------------------------------- */
#sitemap main {
  display: inline-block;
	padding: 0 5%;
}
#sitemap main section {
  margin: 0 0 40px;
}
#sitemap main section:last-of-type {
  margin: 0;
}


/* information
-------------------------------------------------- */
#information #side.exceed {
	padding-top: 0;
}
#information main {
	width: 100%;
	margin-bottom: 50px;
}
#information main .tab {
	padding: 0 5px;
}
#information main .tab li a {
	padding: 1em 0;
	font-size: 1.1rem;
}
#information main .tabPanel li {
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.4;
	margin-bottom: 1.0em;
	padding-bottom: 1.0rem;
}
#information main .tabPanel li time {
	font-size: 1.2rem;
}
#information main .newsData {
	margin-bottom: 0;
}
#information main .newsData article {
	padding: 0;
}
#information main .newsData article h1 {
	font-size: 1.9rem;
	padding: 10px;
	margin-bottom: 20px;
}
#information main .newsData article .newsSentence {
	padding-bottom: 30px;
}
#information main .newsData article .newsBtn li {
	float: left;
	width: 49%;
}
#information main .newsData article .newsBtn li a {
	font-size: 1.1rem;
	line-height: 50px;
}
#information main .newsData article .newsBtn li a img {
	padding-right: 6px;
}


/* assessment
-------------------------------------------------- */
#assessment {
	width: 100%;
	padding: 0 5%;
}
#assessment main {
	padding: 0;
}
#assessment .heading h2 {
	width: 100%;
	font-size: 1.6rem;
}
#assessment .heading p {
	position: relative;
	right: inherit;
	top: inherit;
	text-align: center;
}
#assessment ul {
	width: 100%;
	padding: 0 12px 10px;
	margin-bottom: 10px;
}
#assessment ul li {
	width: 100%;
	padding: 6px 0;
}
#assessment #partsOldReport {
	width: 100%;
	margin: 0 0 50px;
}
#assessment #partsAboutReport {
	width: 100%;
	margin: 0;
}


/* contact
-------------------------------------------------- */
#contact {
	width: 100%;
	padding: 0 5%;
}
#contact main {
	padding: 0;
}
#contact .heading h2 {
	width: 100%;
	font-size: 1.6rem;
}
#contact .heading p {
	position: relative;
	right: inherit;
	top: inherit;
	text-align: center;
}
#contact ul {
	width: 100%;
	padding: 0 12px 10px;
}
#contact ul li {
	width: 100%;
	padding: 6px 0;
}
#contact ol li {
	width: 100%;
}
#contact #contactform {
  padding: 0;
}
#contactform .contact-form dl {
  width: 100%;
  display: block;
}
#contactform .contact-form dl dt,
#contactform .contact-form dl dd {
  display: inline-block;
}
#contactform .contact-form dl dt {
  width: 100%;
}
#contactform .contact-form dl dd {
  width: 100%;
  padding: 1em 1em 2em;
}
#contactform div.controls {
  width: 90%;
}
#contactform div.controls div {
  width: 120px;
  margin: auto;
}

/* allSearch
-------------------------------------------------- */
#allSearch {
  padding: 0;
}
#allSearch #estresult dl:first-of-type {
  margin-top: 0;
}
#allSearch #estresult .paging a,
#allSearch #estresult .paging span {
  margin-bottom: 5px;
}


/* error
-------------------------------------------------- */
#error {
  padding: 0;
}

/* passRe
-------------------------------------------------- */
#passRe {
  padding: 0;
}
#passRe .msg-error {
  text-align: left;
}
#passRe .comp br {
  display: none;
}
#passRe table th,
#passRe table td {
  display: block;
  width: 100%;
}
#passRe table th {
  margin-bottom: 1em;
  text-align: center;
}

/* モーダルウィンドウ
-------------------------------------------------- */
.modalContent {
  width: 100%;
}
.modalContent img{
  width: 100%;
}



@keyframes scroll-hint-appear {

  0% {
      transform: translateX(40px);
      opacity: 0;
  }

  10% {
    opacity: 1;
  }

  50%, 100% {
    transform: translateX(-40px);
    opacity: 0;
  }
}

.scroll-hint.is-right-scrollable {
  background: linear-gradient(270deg,rgba(200,200,200) 0,transparent 16px,transparent);
}

.scroll-hint.is-right-scrollable.is-left-scrollable {
  background: linear-gradient(90deg,rgba(200,200,200) 0,transparent 16px,transparent),linear-gradient(270deg,rgba(200,200,200) 0,transparent 16px,transparent);
}

.scroll-hint.is-left-scrollable {
  background: linear-gradient(90deg,rgba(200,200,200) 0,transparent 16px,transparent);
}

.scroll-hint-icon {
  position: absolute;
  top: calc(20% - 25px);
  left: calc(50% - 60px);
  box-sizing: border-box;
  width: 120px;
  height: 80px;
  border-radius: 5px;
  transition: opacity .3s;
  opacity: 0;
  background: rgba(0, 0, 0, .7);
  text-align: center;
  padding: 20px 10px 10px 10px;
}

.scroll-hint-icon-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  pointer-events: none;
}

.scroll-hint-text {
  font-size: 10px;
  color: #FFF;
  margin-top: 5px;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
    opacity: .8;
}

.scroll-hint-icon:before {
  display: inline-block;
  width: 40px;
  height: 40px;
  color: #FFF;
  vertical-align: middle;
  text-align: center;
  content: "";
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=);
}

.scroll-hint-icon:after {
  content: "";
  width: 34px;
  height: 14px;
  display: block;
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -20px;
  background-repeat: no-repeat;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
  opacity: 0;
  transition-delay: 2.4s;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
  opacity: 1;
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
  animation: scroll-hint-appear 1.2s linear;
  animation-iteration-count: 2;
}

.scroll-hint-icon-white {
  background-color: #FFF;
  box-shadow: 0 4px 5px rgba(0, 0, 0, .4);
}

.scroll-hint-icon-white:before {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=);
}

.scroll-hint-icon-white:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==);
}

.scroll-hint-icon-white .scroll-hint-text {
  color: #000;
}