.mainImage{
	width: 100%;
	height: 0;
	padding-top: calc(520 / 1280 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	margin-bottom: 24px;
	position: relative;
}
#president{background-image: url(../images/about/imgPresident1280.jpg);}
#products{background-image: url(../images/about/imgProducts1280.jpg);}
#hist{background-image: url(../images/about/imgHistory1280.jpg);}

.profile{position: absolute; padding: 24px; background-color: rgba(255,255,255,.5); display: block;}
.profile dt{font-weight: 600;}
.profile dd{font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif" ; line-height: 1.6;}
.profile dd span{font-family: "a-otf-ud-reimin-pr6n",sans-serif;}
.profilePs{display: none;}
.profilePs{
	display: none;
	text-align: center; font-size: 12px;
	background: url(../images/top/bgMain.png) no-repeat center top;
	width: 100%;
    background-size: cover;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 16px;
}
.profilePs dt{font-size: 16px; font-weight: 600;}
.profilePs dd{margin-top: 4px;}
.profilePs dd span{font-size: 18px;}

figure.imgHover {
  color: #fff;
  position: relative;
  float: left;
  overflow: hidden;
  color: #fff;
  text-align: left;
  background-color: #004098;
  font-size: 16px;
  -webkit-perspective: 50em;
  perspective: 50em;
	margin-bottom: 30px;
}
figure.imgHover img.aligncenter {
	margin-bottom: 0;
}
figure.imgHover * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure.imgHover img {
  opacity: 1;
  width: 100%;
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
    border: 4px double #efefef;
    background-color: #fff;
}
figure.imgHover figcaption {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  z-index: 1;
  opacity: 0;
  padding: 24px 16px 16px;
	text-align: left;
	font-size: 1rem;
	font-size: 12px;
}
figure.imgHover h3,
figure.imgHover p {
}
#container figure.imgHover h3{
	background: none;
	text-align: center;
	display: block;
	font-size: 14px;
}
figure.imgHover h3 {
  margin: 0;
}
figure.imgHover p {
  margin: 0 0 8px;
}
figure.imgHover .read-more {
  border: 1px solid #fff;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #fff;
	display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
figure.imgHover .read-more:hover {
  background-color: #ffffff;
  color: #000000;
}
figure.imgHover:hover img,
figure.imgHover.hover img {
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  opacity: 0;
}
figure.imgHover:hover figcaption,
figure.imgHover.hover figcaption {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}


@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	#president{background-image: url(../images/about/imgPresident1280@2x.jpg);}
	#products{background-image: url(../images/about/imgProducts1280@2x.jpg);}
	#hist{background-image: url(../images/about/imgHistory1280@2x.jpg);}
}

/*==================
 ▼ブレイクポイントのルール▼
 -スマホを基本設計にする-
 *〜479px：SP縦
 *480px〜：SP横
 *600px〜タブレット
 *960px〜小型PC
 *1280px〜大型PC
==================*/

@media screen and (max-width:480px) { 
    /*　画面サイズが480pxまではここを読み込む　*/
	.mainImage{margin-bottom: 0;}
	.profile{display: none;}
	.profilePs{display: block;}
	.profilePs dt{font-size: 16px; font-weight: 600;}
	.profilePs dd{margin-top: 4px;}
	.profilePs dd span{font-size: 18px;}
	.pageTitle {font-size: 17px;}
	#container figure.imgHover h3{font-size: 14px;}
	figure.imgHover {float: none;}
	figure.imgHover figcaption {padding: 20px 12px 12px; font-size: 11px;}
	figure.imgHover .read-more {padding: 4px 8px; font-size: 11px;}
}
@media screen and (min-width:480px) and ( max-width:600px) { 
/*　画面サイズが480pxからはここを読み込む　*/
	.mainImage{margin-bottom: 0;}
	.profile{display: none;}
	.profilePs{display: block;}
	figure.imgHover {float: none;}
}
@media screen and (min-width:600px) and ( max-width:960px) {
/*　画面サイズが600pxから960pxまではここを読み込む　*/
	.mainImage{margin-bottom: 0;}
	.profile{display: none;}
	.profilePs{display: block;}
	figure.imgHover {float: none;}
}
@media screen and (min-width:960px) and ( max-width:1140px) {
/*　画面サイズが960pxから1280pxまではここを読み込む　*/
	#president .profile{bottom: 10%; left: 8%;}
	.profile dt{font-size: 30px;}
	.profile dd span{font-size: 36px;}
}
@media screen and (min-width:1140px) {
/*　画面サイズが1280pxからはここを読み込む　*/
	.mainImage{margin-bottom: 56px;}
	#president .profile{bottom: 10%; left: 18%;}
	.profile dt{font-size: 33px;}
	.profile dd span{font-size: 39px;}
}