@charset "utf-8";




/*
--------------------------------
	main visual
--------------------------------
*/


/* ---- container ---- */

.top .main {
	position: relative;
	height: 100vh;
	min-height: 640px;
}

@media screen and (max-width: 749px) {
	
	.top .main {
		height: calc(100vh - 60px);
		min-height: 0;
	}
	
}


/* ---- image ---- */

.top .image {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: #000;
	overflow: hidden;
}

.top .image div {
	position: absolute;
	width: 100%;
	height: 100%;
	background-position: 50% 50%;
	background-size: cover;
	opacity: 0;
	transform-origin: 50% 50%;
}

.top #image-0 { background-image: url(../img/top/main/img/1.jpg); }
.top #image-1 { background-image: url(../img/top/main/img/2.jpg); }
.top #image-2 { background-image: url(../img/top/main/img/3.jpg); }

.top .image .show {
	animation: top-slide-show 2s .5s cubic-bezier(.2,.5,.75,1) both;
}

.top .image .show-first {
	animation: top-slide-show 2s cubic-bezier(.2,.5,.75,1) both;
}

@keyframes top-slide-show {
	0% {
		opacity: 0;
		transform: scale(1);
	}
	100% {
		opacity: 1;
		transform: scale(1.02);
	}
}

.top .image .hide {
	animation: top-slide-hide 2s .2s cubic-bezier(.2,.5,.75,1) both;
}

@keyframes top-slide-hide {
	0% {
		opacity: 1;
		transform: scale(1.02);
	}
	100% {
		opacity: 0;
		transform: scale(1);
	}
}


/* ---- text ---- */

.top .left-text {
	position: absolute;
	left: 7%;
	top: 30%;
	z-index: 4;
	width: 35%;
}

.top .right-text {
	position: absolute;
	right: 7%;
	top: 44%;
	z-index: 4;
	width: 35%;
}

.top .left-text div,
.top .right-text div {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}

.top .left-text img,
.top .right-text img {
	display: block;
	width: 100%;
}

.top .left-text .def-show,
.top .right-text .def-show {
	opacity: 1;
}

.top .left-text .show {
	animation: top-txt-show 2s 1s cubic-bezier(.2,0,.08,1) both;
}

.top .right-text .show {
	animation: top-txt-show 2s 2s cubic-bezier(.2,0,.08,1) both;
}

@keyframes top-txt-show {
	0% {
		opacity: 0;
		transform: translate3d(0, 15px, 0);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.top .left-text .hide {
	animation: top-txt-hide .6s cubic-bezier(.2,0,.08,1) both;
}

.top .right-text .hide {
	animation: top-txt-hide .6s .2s cubic-bezier(.2,0,.08,1) both;
}

@keyframes top-txt-hide {
	0% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	100% {
		opacity: 0;
		transform: translate3d(0, -15px, 0);
	}
}

.top .main .copy {
	position: absolute;
	left: 0;
	top: 75%;
	z-index: 4;
	width: 100%;
	color: #fff;
	font-size: 1.67vw;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	text-shadow: 0 0 3px rgba(0,0,0,.7);
}

@media screen and (max-width: 959px) {
	
	.top .left-text {
		left: 3%;
		width: 40%;
	}
	
	.top .right-text {
		right: 3%;
		width: 40%;
	}
	
}

@media screen and (max-width: 749px) {
	
	.top .left-text {
		left: 2%;
		top: 25%;
		width: 50%;
	}
	
	.top .right-text {
		right: 2%;
		top: 55%;
		width: 50%;
	}
	
	.top .main .copy {
		top: 75%;
		font-size: 1.5rem;
	}
	
}

@media screen and (max-width: 749px) and (orientation: landscape) {
	
	.top .left-text {
		top: 20%;
		width: 40%;
	}
	
	.top .right-text {
		top: 40%;
		width: 40%;
	}
	
	.top .main .copy {
		top: 75%;
	}
	
	.top .main .copy .pc-hidden {
		display: none;
	}
	
}

/*---------------------------------------
2020.04.14
新型コロナによる緊急メッセージ

*/
.top .main .emergencyMSG {
  position: absolute;
  top: 18%;
  left: 4%;
  z-index: 5;
  color: #fff;
  width: 96%;
  text-align: left;
  font-size: 1.2vw;
}

.top .main .emergencyMSG a {
	text-decoration: underline;
	color: #fff;
}

.top .main .emergencyMSG a:hover,
.top .main .emergencyMSG a:active {
	text-decoration: none;
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
	.top .main .emergencyMSG {
		  top: 23%;
	}
}

@media screen and (max-width: 749px) {
	.top .main .emergencyMSG {
		  top: 10%;
			font-size: 1.3rem;
	}
}

@media screen and (max-width: 749px) and (orientation: landscape) {
	.top .main .emergencyMSG {
		  top: 10%;
	}
}


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



/* ---- scroll ---- */

.top .scroll {
	display: block;
	position: absolute;
	left: 50%;
	top: 88%;
	z-index: 4;
	width: 5em;
	height: 5em;
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
	letter-spacing: .02em;
	text-align: center;
	transform: translateX(-50%);
}

.top .scroll::before {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: 1.8em;
	width: 1px;
	height: 1.8em;
	background-color: rgba(255,255,255,.7);
	transition: height .2s ease-in-out;
}

.top .scroll::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: 2.7em;
	width: .8em;
	height: .8em;
	margin-left: -.35em;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: scale(.6, 1) rotate(-45deg);
	transition: top .2s ease-in-out;
}

.top .scroll:hover,
.top .scroll:active {
	color: #fff;
}

.top .scroll:hover::before,
.top .scroll:active::before {
	height: 3.3em;
}

.top .scroll:hover::after,
.top .scroll:active::after {
	top: 4.2em;
}

@media screen and (max-width: 749px) {
	
	.top .scroll {
		top: 85%;
		width: 4em;
		height: 4em;
	}
	
	.top .scroll::before {
		top: 1.2em;
		transition: none;
	}
	
	.top .scroll::after {
		top: 2.1em;
		transition: none;
	}
	
	.top .scroll:hover::before,
	.top .scroll:active::before {
		height: 1.8em;
	}
	
	.top .scroll:hover::after,
	.top .scroll:active::after {
		top: 2.1em;
	}
	
	.top .scroll span {
		display: none;
	}
	
}

@media screen and (max-width: 749px) and (orientation: landscape) {
	
	.top .scroll {
		top: auto;
		bottom: 0;
	}
	
}


/* ---- indicator: bar ---- */

.top .indicator-bar {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 5;
	width: 100%;
	height: 5px;
	background-color: #e6e6e6;
}

.top .indicator-bar span {
	display: block;
	width: 0;
	height: 5px;
	background-color: #0f53a0;
}

.top .indicator-bar.show span {
	animation: top-indicator-show 3s linear both;
}

@keyframes top-indicator-show {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

.top .indicator-bar.hide span {
	animation: top-indicator-hide 2.2s ease-in both;
}

@keyframes top-indicator-hide {
	0% {
		width: 100%;
		opacity: 1;
	}
	100% {
		width: 100%;
		opacity: 0;
	}
}




/*
--------------------------------
	about mitani
--------------------------------
*/


/* ---- container ---- */

.top .about {
	position: relative;
	height: 100vh;
	min-height: 640px;
}

.top .about .container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	overflow: hidden;
	background-image: url(../img/top/bg_about.jpg);
	background-position: 50% 50%;
	background-size: auto 100vh;
	opacity: 0;
	transition: top .5s ease-out .5s, right .5s ease-out .5s, bottom .5s ease-out .5s, left .5s ease-out .5s, opacity 1.2s ease-in;
}

.top .about.show .container {
	top: 7vh;
	right: 4vw;
	bottom: 7vh;
	left: 4vw;
	opacity: 1;
}

@media screen and (max-width: 749px) {
	
	.top .about {
		height: auto;
		min-height: 0;
		margin: calc(8vw - 15px) 0;
	}
	
	.top .about.show .container {
		top: 15px;
		right: 15px;
		bottom: 15px;
		left: 15px;
	}
	
}


/* ---- dots ---- */

.top .about .dots {
	position: absolute;
	left: calc(50% - 25.6vh);
	top: 0;
	z-index: 0;
	width: 56.0479vh;
	height: 100vh;
}

.top .about .dots-2 {
	transition: top .5s ease-out;
}

.top .about.show .dots-2 {
	top: -7vh;
}

@media screen and (max-height: 640px) {
	
	.top .about .dots {
		left: calc(50% - 164px);
		width: 359px;
		height: 640px;
	}
	
}

@media screen and (max-width: 749px) {
	
	.top .about .dots {
		display: none;
	}
	
}


/* ---- text ---- */

.top .about .contents {
	position: absolute;
	left: 12.5%;
	/*top: calc((100% - 320px) * .68);*/
	top: 50%;
	z-index: 3;
	transform: translateY(-36%);
}

.top .about .contents h2 {
	color: #fff;
	font-size: 4.2vw;
	text-shadow: 0 0 3px rgba(0,0,0,.7);
}

.top .about .contents p {
	margin-top: 30px;
	color: #fff;
	font-weight: bold;
	line-height: 2.5;
}

.top .about .contents .dot-frame-button {
	margin-top: 40px;
}

@media screen and (max-width: 749px) {
	
	.top .about .contents {
		position: relative;
		left: 0;
		top: 0;
		padding: calc(20vw + 15px) calc(4vw + 15px) calc(6vw + 15px);
		transform: none;
	}
	
	.top .about .contents h2 {
		font-size: 8vw;
	}
	
	.top .about .contents p {
		margin-top: 6vw;
		line-height: 1.8;
	}
	
	.top .about .contents .dot-frame-button {
		margin-top: 6vw;
	}
	
}

@media screen and (max-width: 374px) {
	
	.top .about .contents p {
		font-size: 1.2rem;
	}
	
}




/*
--------------------------------
	our business
--------------------------------
*/


/* ---- container ---- */

.top .global-container > .business {
	position: relative;
	height: 86vh;
	min-height: calc(640px - 14vh);
}

@media screen and (max-width: 749px) {
	
	.top .global-container > .business {
		height: auto;
		min-height: 0;
		margin: 0 15px;
	}
	
}


/* ---- dots ---- */

.top .global-container > .business .dots {
	position: absolute;
	left: calc(50% + 4vh);
	top: 0;
	z-index: 2;
	width: calc(86vh * .8082);
	height: 100%;
}

@media screen and (max-height: 640px) {
	
	.top .global-container > .business .dots {
		left: calc(50% + 4.5vh);
		width: calc((640px - 14vh) * .8082);
	}
	
}

@media screen and (max-width: 749px) {
	
	.top .global-container > .business .dots {
		display: none;
	}
	
}


/* ---- text ---- */

.top .global-container > .business .contents {
	position: absolute;
	right: 12.5%;
	/*top: calc((100% - 320px) * .68);*/
	top: 50%;
	transform: translateY(-24%);
	z-index: 3;
	opacity: 0;
	text-align: right;
	transition: opacity 1.5s ease .5s;
}

.top .global-container > .business.show .contents {
	opacity: 1;
}

.top .global-container > .business .contents h2 {
	color: #fff;
	font-size: 4.2vw;
	text-shadow: 0 0 3px rgba(0,0,0,.7);
}

.top .global-container > .business .contents p {
	margin-top: 30px;
	color: #fff;
	font-weight: bold;
	line-height: 2.5;
}

.top .global-container > .business .contents .dot-frame-button {
	margin-top: 40px;
}

@media screen and (max-width: 749px) {
	
	.top .global-container > .business .contents {
		position: relative;
		right: 0;
		top: 0;
		padding: 20vw 4vw 6vw;
		transform: none;
	}
	
	.top .global-container > .business .contents h2 {
		font-size: 8vw;
	}
	
	.top .global-container > .business .contents p {
		margin-top: 6vw;
		line-height: 1.8;
	}
	
	.top .global-container > .business .contents .dot-frame-button {
		margin-top: 6vw;
	}
	
}

@media screen and (max-width: 374px) {
	
	.top .global-container > .business .contents p {
		font-size: 1.2rem;
	}
	
}


/* ---- video ---- */

.top .global-container > .business .video {
	position: relative;
	z-index: 1;
	height: 100%;
	margin: 0 4vw;
	overflow: hidden;
	background-position: 50% 100%;
	background-size: auto 120%;
	overflow: hidden;
}

.top .global-container > .business .video::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(140deg, rgba(16,80,160,0) 0%, rgba(16,80,160,1) 100%);
	mix-blend-mode: multiply;
}

.top .global-container > .business .video video {
	/* display: none; dev */
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

@media screen and (max-width: 749px) {
	
	.top .global-container > .business .video {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		margin: 0;
	}
	
	.top .global-container > .business .video video {
		display: none;
	}
	
}


/* ---- mask ---- */

.top .global-container > .business .video .mask {
	display: none;
	/* display: table; */
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: calc(100% + 1px);
	height: calc(100% + 1px);
}

.top .global-container > .business .video .mask span {
	display: table-cell;
	width: 16.6667%;
	background-color: #fff;
	opacity: 1;
	transition: opacity 1s ease-out;
}

.top .global-container > .business .video .mask span:nth-child(1) { transition-delay: 0s }
.top .global-container > .business .video .mask span:nth-child(2) { transition-delay: .1s }
.top .global-container > .business .video .mask span:nth-child(3) { transition-delay: .2s }
.top .global-container > .business .video .mask span:nth-child(4) { transition-delay: .3s }
.top .global-container > .business .video .mask span:nth-child(5) { transition-delay: .4s }
.top .global-container > .business .video .mask span:nth-child(6) { transition-delay: .5s }

/*
.top .global-container > .business .video .mask {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.top .global-container > .business .video .mask span {
	display: block;
	position: absolute;
	top: 0;
	width: calc(16.6667% + 1px);
	height: calc(100% + 1px);
	background-color: #fff;
	opacity: 1;
	transition: opacity 1s ease-out;
}

.top .global-container > .business .video .mask span:nth-child(1) { left: 0; transition-delay: 0s }
.top .global-container > .business .video .mask span:nth-child(2) { left: 16.6667%; transition-delay: .1s }
.top .global-container > .business .video .mask span:nth-child(3) { left: 33.3333%; transition-delay: .2s }
.top .global-container > .business .video .mask span:nth-child(4) { left: 50%; transition-delay: .3s }
.top .global-container > .business .video .mask span:nth-child(5) { left: 66.6667%; transition-delay: .4s }
.top .global-container > .business .video .mask span:nth-child(6) { left: 83.3333%; transition-delay: .5s }
*/

.top .global-container > .business.show .video .mask span {
	opacity: 0;
}




/*
--------------------------------
	news
--------------------------------
*/


/* ---- container ---- */

.top .news {
	margin: 12vh 8vw 8vh;
}

@media screen and (max-width: 749px) {
	
	.top .news {
		margin: 12vw 15px;
	}
	
}


/* ---- header ---- */

.top .news .header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1100px;
	margin: 0 auto;
}

.top .news .header h2 {
	color: #0f53a0;
	font-size: 4.2vw;
}

.top .news .header ul {
	display: flex;
	align-items: center;
	margin-left: 4em;
}

.top .news .header ul li {
	margin-left: 1.7em;
}

.top .news .header ul li:first-child {
	margin-left: 0;
}

.top .news .header ul li button {
	display: inline-block;
	position: relative;
	padding: .2em 0 .2em 2em;
	color: #999;
	font-weight: bold;
	cursor: pointer;
	transition: color .3s;
}

.top .news .header ul li button:hover,
.top .news .header ul li button:active,
.top .news .header ul li button.current {
	color: #0f53a0;
}

.top .news .header ul li button::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	width: 1.8em;
	height: 1.8em;
	margin-top: -.9em;
	background-image: url(../img/common/icon_news.svg);
	background-repeat: no-repeat;
	background-size: 9em 5.4em;
}

.top .news .header ul li button[name='all']::before { background-position: 0 0; }
.top .news .header ul li button[name='release']::before { background-position: -1.8em 0; }
.top .news .header ul li button[name='ir']::before { background-position: -3.6em 0; }
.top .news .header ul li button[name='event']::before { background-position: -5.4em 0; }
.top .news .header ul li button[name='csr']::before { background-position: -7.2em 0; }

.top .news .header ul li button[name='all']:hover::before,
.top .news .header ul li button[name='all']:active::before,
.top .news .header ul li button[name='all'].current::before { background-position: 0 50%; }
.top .news .header ul li button[name='release']:hover::before,
.top .news .header ul li button[name='release']:active::before,
.top .news .header ul li button[name='release'].current::before { background-position: -1.8em 50%; }
.top .news .header ul li button[name='ir']:hover::before,
.top .news .header ul li button[name='ir']:active::before,
.top .news .header ul li button[name='ir'].current::before { background-position: -3.6em 50%; }
.top .news .header ul li button[name='event']:hover::before,
.top .news .header ul li button[name='event']:active::before,
.top .news .header ul li button[name='event'].current::before { background-position: -5.4em 50%; }
.top .news .header ul li button[name='csr']:hover::before,
.top .news .header ul li button[name='csr']:active::before,
.top .news .header ul li button[name='csr'].current::before { background-position: -7.2em 50%; }

.top .news .header ul li button span {
	display: inline-block;
}

@media screen and (max-width: 959px) {
	
	.top .news .header .button {
		display: none;
	}
	
	.top .news .header {
		display: block;
	}
	
	.top .news .header ul {
		justify-content: space-around;
		margin: 6vw 0 0;
	}
	
	.top .news .header ul li {
		margin-left: 0;
	}
	
	.top .news .header ul li button {
		padding: 2em 1em 0;
	}
	
	.top .news .header ul li button::before {
		left: 50%;
		top: 0;
		margin-top: 0;
		margin-left: -.9em;
	}
	
}

@media screen and (max-width: 749px) {
	
	.top .news .header h2 {
		font-size: 8vw;
	}
	
	.top .news .header ul li button {
		padding: 2em .2em 0;
		font-size: 1.2rem;
	}
	
	.top .news .header ul li button:hover,
	.top .news .header ul li button:active {
		color: #999;
	}
	
}


/* ---- body ---- */

.top .news .body {
	display: none;
	max-width: 1100px;
	margin: 5% auto 0;
}

.top .news.show #body-all {
	display: flex;
}

.top .news .body li {
	display: flex;
	width: 20%;
	min-height: 300px;
}

.top .news .body li:nth-child(1) { animation: news-fadeup .8s ease-out 0s both; }
.top .news .body li:nth-child(2) { animation: news-fadeup .8s ease-out .1s both; }
.top .news .body li:nth-child(3) { animation: news-fadeup .8s ease-out .2s both; }
.top .news .body li:nth-child(4) { animation: news-fadeup .8s ease-out .3s both; }
.top .news .body li:nth-child(5) { animation: news-fadeup .8s ease-out .4s both; }

@keyframes news-fadeup {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.top .news .body a {
	display: flex;
	position: relative;
	width: 100%;
	padding: 9px;
}

.top .news .body a:hover,
.top .news .body a:active {
	background-image: url(../img/common/dots_blue.png);
}

.top .news .body a .inner {
	width: 100%;
	padding: 2em 1em 6em 1em;
	background-color: #fff;
	transition: background-color .3s ease-in-out;
}

.top .news .body a:hover .inner,
.top .news .body a:active .inner {
	background-color: #0f53a0;
}

.top .news .body a .date {
	color: #b3b3b3;
	font-size: 1.4rem;
	transition: color .3s ease-in-out;
}

.top .news .body a:hover .date,
.top .news .body a:active .date {
	color: #9fbad9;
}

.top .news .body a p {
	margin-top: 1em;
	color: #000;
	font-weight: bold;
	line-height: 1.9;
	transition: color .3s ease-in-out;
}

.top .news .body a:hover p,
.top .news .body a:active p {
	color: #fff;
}

.top .news .body a p .pdf-size {
	display: inline-block;
	margin-left: 1em;
	color: #808080;
	font-size: 1.2rem;
	font-weight: normal;
	line-height: 1.9;
	vertical-align: middle;
	transition: color .3s ease-in-out;
}

.top .news .body a:hover p .pdf-size,
.top .news .body a:active p .pdf-size {
	color: #fff;
}

.top .news .body a p .pdf-size::before {
	content: "\e90a";
	display: inline-block;
	margin-right: 6px;
	color: #0f53a0;
	font-family: 'icomoon';
	font-size: 1.8rem;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
	transition: color .3s ease-in-out;
}

.top .news .body a:hover p .pdf-size::before,
.top .news .body a:active p .pdf-size::before {
	color: #fff;
}

.top .news .body a .category {
	position: absolute;
	left: 1em;
	right: 1em;
	bottom: 2em;
	padding-bottom: .8em;
	border-bottom: 1px solid #0f53a0;
	text-align: right;
}

.top .news .body a:hover .category,
.top .news .body a:active .category {
	border-bottom-color: #9fbad9;
}

.top .news .body a .category span {
	display: inline-block;
	position: relative;
	padding-left: 2em;
	color: #000;
	font-size: 1.4rem;
	transition: color .3s ease-in-out;
}

.top .news .body a .category.none span {
	display: none;
}

.top .news .body a:hover .category span,
.top .news .body a:active .category span {
	color: #fff;
}

.top .news .body a .category span::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	width: 1.8em;
	height: 1.8em;
	margin-top: -.9em;
	background-image: url(../img/common/icon_news.svg);
	background-repeat: no-repeat;
	background-size: 9em 5.4em;
}

.top .news .body a .category.release span::before { background-position: -1.8em 0; }
.top .news .body a .category.ir span::before { background-position: -3.6em 0; }
.top .news .body a .category.event span::before { background-position: -5.4em 0; }
.top .news .body a .category.csr span::before { background-position: -7.2em 0; }

.top .news .body a:hover .category.release span::before,
.top .news .body a:active .category.release span::before { background-position: -1.8em 100%; }
.top .news .body a:hover .category.ir span::before,
.top .news .body a:active .category.ir span::before { background-position: -3.6em 100%; }
.top .news .body a:hover .category.event span::before,
.top .news .body a:active .category.event span::before { background-position: -5.4em 100%; }
.top .news .body a:hover .category.csr span::before,
.top .news .body a:active .category.csr span::before { background-position: -7.2em 100%; }

@media screen and (max-width: 959px) {
	
	.top .news .body {
		flex-wrap: wrap;
		margin-top: 0;
		overflow: hidden;
	}
	
	.top .news .body li {
		width: 50%;
		min-height: 0;
		margin-top: 10px;
	}
	
	.top .news .body li:nth-child(-n+2) {
		margin-top: 30px;
	}
	
	.top .news .body li:last-child {
		display: none;
	}
	
	.top .news .body a .inner {
		padding: 2em 1em 5em 1em;
	}
	
	.top .news .body a .category {
		left: 1em;
		right: 1em;
	}

}

@media screen and (max-width: 749px) {
	
	.top .news .body li {
		margin-top: 6vw !important;
	}
	
	.top .news .body a:hover,
	.top .news .body a:active {
		background-image: none;
	}
	
	.top .news .body a .inner {
		padding: 0 0 40px;
		transition: none;
	}
	
	.top .news .body a:hover .inner,
	.top .news .body a:active .inner {
		background-color: #fff;
	}
	
	.top .news .body a .category {
		bottom: 0;
	}
	
	.top .news .body a .date {
		font-size: 1.1rem;
		transition: none;
	}
	
	.top .news .body a:hover .date,
	.top .news .body a:active .date {
		color: #b3b3b3;
	}
	
	.top .news .body a p {
		font-size: 1.2rem;
		text-align: left;
		transition: none;
	}
	
	.top .news .body a:hover p,
	.top .news .body a:active p {
		color: #000;
	}
	
	.top .news .body a p .pdf-size::before {
		font-size: 1.6rem;
	}
	
	.top .news .body a .category {
		font-size: 1.1rem;
	}
	
	.top .news .body a:hover .category,
	.top .news .body a:active .category {
		border-bottom-color: #0f53a0;
	}
	
	.top .news .body a .category span {
		font-size: 1.2rem;
		transition: none;
	}
	
	.top .news .body a:hover .category span,
	.top .news .body a:active .category span {
		color: #000;
	}
	
	.top .news .body a:hover .category.release span::before,
	.top .news .body a:active .category.release span::before { background-position: -1.8em 0; }
	.top .news .body a:hover .category.ir span::before,
	.top .news .body a:active .category.ir span::before { background-position: -3.6em 0; }
	.top .news .body a:hover .category.event span::before,
	.top .news .body a:active .category.event span::before { background-position: -5.4em 0; }
	.top .news .body a:hover .category.csr span::before,
	.top .news .body a:active .category.csr span::before { background-position: -7.2em 0; }
	
}

@media screen and (max-width: 374px) {
	
	.top .news .body a .category span {
		font-size: 1.1rem;
	}
	
}


/* ---- button, banners ---- */

.top .news .row {
	margin-top: 30px;
	overflow: hidden;
}

.top .news .row .button {
	display: none;
	float: right;
	width: 270px;
}

.top .news .banners {
	overflow: hidden;
}

.top .news .banners li {
	float: left;
	width: calc((100% - 30px) / 4);
	margin: 20px 10px 0 0;
	padding: 9px;
	background-image: url(../img/common/dots_blue.png);
}

.top .news .banners li:nth-child(4n) {
	margin-right: 0;
}

.top .news .banners li a {
	display: block;
	height: 0;
	padding-bottom: 32.317%;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	opacity: 1;
	filter: brightness(1);
	transition: filter .2s;
}

.top .news .banners li a:hover,
.top .news .banners li a:active {
	filter: brightness(1.1);
}

.top .news .banners li a img {
	display: none;
}

@media screen and (max-width: 959px) {
	
	.top .news .row .button {
		display: block;
		float: none;
		width: auto;
		text-align: center;
	}
	
	.top .news .banners {
		float: none;
		width: auto;
		padding: 8vw 0 0;
	}
	
	.top .news .banners li {
		width: calc((100% - 10px) / 2);
	}
	
	.top .news .banners li:nth-child(2n) {
		margin-right: 0;
	}
	
}

@media screen and (max-width: 749px) {
	
	.top .news .row {
		margin-top: 8vw;
	}
	
	.top .news .banners li {
		float: none;
		width: auto;
		margin-right: 0;
		margin-top: 3vw;
		padding: 9px;
	}
	
	.top .news .banners li:first-child {
		margin-top: 0;
	}
	
	.top .news .banners li a {
		filter: none;
		transition: none;
	}
	
	.top .news .banners li a:hover,
	.top .news .banners li a:active {
		filter: none;
	}
	
}




/*
--------------------------------
	footer
--------------------------------
*/


.above-footer {
	display: none;
}

.business + .above-footer {
	display: block;
	height: 0;
	margin-top: 120px;
	overflow: hidden;
}

@media screen and (max-width: 749px) {
	
	.business + .above-footer {
		margin-top: 10vw;
	}
	
}




/*
--------------------------------
	and Mitani
--------------------------------
*/


/* ---- container ---- */

.top .and {
	padding: 12vh 8vw;
	background-color: #f1f1f1;
}

@media screen and (max-width: 749px) {
	
	.top .and {
		padding: 12vw 15px;
	}
	
}


/* ---- header ---- */

.top .and h2 {
	max-width: 1100px;
	margin: 0 auto;
	color: #0f53a0;
	font-size: 4.2vw;
}

@media screen and (max-width: 749px) {
	
	.top .and h2 {
		font-size: 8vw;
	}
	
}


/* ---- banners ---- */

.top .and ul {
	display: flex;
	flex-wrap: wrap;
	max-width: 1100px;
	margin: 0 auto;
	padding-top: 50px;
}

.top .and li {
	width: 22%;
	margin: 50px 4% 0 0;
}

.top .and li:nth-child(4n) {
	margin-right: 0;
}

.top .and li img {
	display: block;
	width: 100%;
	opacity: 1;
	transition: opacity .2s ease-out;
}

.top .and li h3 {
	margin-top: 20px;
	color: #0f53a0;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.5;
}

.top .and li p {
	margin-top: 14px;
	color: #000;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.9;
	transition: color .2s;
}

.top .and a:hover img,
.top .and a:active img {
	opacity: .7;
}

.top .and a:hover p,
.top .and a:active p {
	color: #0f53a0;
}

@media screen and (max-width: 749px) {
	
	.top .and ul {
		padding: 3vw 5% 0;
	}
	
	.top .and li {
		width: 45%;
		margin: 6vw 10% 0 0;
	}
	
	.top .and li:nth-child(2n) {
		margin-right: 0;
	}
	
	.top .and li img {
		transition: none;
	}
	
	.top .and li h3 {
		margin-top: 2vw;
		font-size: 1.3rem;
		line-height: 1.5;
	}
	
	.top .and li p {
		display: none;
	}
	
	.top .and a:hover img,
	.top .and a:active img {
		opacity: 1;
	}
	
}