@charset "UTF-8";

/* 基本設定（上書き） */

/* -----------------------------------
■Bootstrap追加
----------------------------------- */

/* Bootstrap基本スタイル上書き */
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.42857143;
  color: #333333;
  background-color: #ffffff;
}

/* Bootstrapのガター幅を調整するための汎用CSS */

.row-0{ margin-left:0px;  margin-right:0px}
.row-0 >div{ padding-right:0px;  padding-left:0px}
.row-10{ margin-left:-5px;  margin-right:-5px}
.row-10 >div{ padding-right:5px;  padding-left:5px}
.row-20{ margin-left:-10px;  margin-right:-10px}
.row-20 >div{ padding-right:10px;  padding-left:10px}
.row-30{ margin-left:-15px;  margin-right:-15px}
.row-30 >div{ padding-right:15px;  padding-left:15px}
.row-40{ margin-left:-20px;  margin-right:-20px}
.row-40 >div{ padding-right:20px;  padding-left:20px}
.row-50{ margin-left:-25px;  margin-right:-25px}
.row-50 >div{ padding-right:25px;  padding-left:25px}

/* グリッドの高さ揃え */
.row-eq-height {
	display: flex;
	flex-wrap: wrap;
}

/* -----------------------------------
■リンク全体に効果
----------------------------------- */

a {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}

/* -----------------------------------
■TOPページレイアウト
----------------------------------- */

html, body {
	height: 100%;
}

.section {
	text-align: center;
}

/* -------------------- */
/* セクション0 */
/* -------------------- */

#section0 {
	position: fixed;
	width: 100%;
	height: 100%;
}

.shadow {
	width: 100%;
	height: 100%;
}

@media screen{
	.shadow {
		background: transparent;
		background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 25%);
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 25%);
		background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 25%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=0 );
	}
}


@media print{
	#section0 {
		display: none;
	}
}

/* -------------------- */
/* セクション1 */
/* -------------------- */

#section1 {
	position: relative;
	width: 100%;
	height: auto;
	min-height: 100%;
}

@media print{
	#section1 {
		height:251mm !important;
		background: #666 url(../images/bg/bg01.jpg) no-repeat center top;
		-moz-background-size: cover;
		background-size: cover;
	}
}

.header {
	padding: 30px 60px 30px 60px;
	position: absolute;
	z-index: 99;
	top: 0;
	right: 0;
	left: 0;
}

.header > ul {
	margin: 0;
	padding: 0;
	list-style: none;
	-js-display: flex;
    display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.header > ul > li {
	margin: 0;
	padding: 0;
}

.logoArea {
	width: auto;
	padding: 0;
	margin-bottom: 15px;
}

.copyArea {
	box-sizing: content-box;
	position: absolute;
	height: 463px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.copyArea img {
	margin: 0 auto;
	display: block;
	max-width: 100%;
	height: auto;
}

.balloonArea {
	box-sizing: content-box;
	position: fixed;
	width: 17.4375vw;
	height: auto;
	top: 225px;
	top: calc(170px + 149px + 5.5099vw);
	right: 50px;
	margin: auto;
	z-index: 98;
}

.balloonRecruit {
	top: calc(170px + 149px);
	right: 50px;
	z-index: 98;
}

.ballooni-linc{
	top: 170px;
	right: 50px;
	z-index: 98;	
}

.balloonArea img {
	margin: 0 auto;
	display: block;
	max-width: 100%;
	height: auto;
}

.balloonArea a {
	display: block;
}

.balloonArea a:hover {
  animation: poyooon 0.5s linear 0s 1;
}
@keyframes poyooon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  5%  { transform: scale(1.1, 0.9) translate(0%, 1%); }
  15%  { transform: scale(1.2, 0.8) translate(0%, 4%); }
  40%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  55%  { transform: scale(0.9, 1.2) translate(0%, -25%); }
  75%  { transform: scale(0.9, 1.2) translate(0%, -5%); }
  85%  { transform: scale(1.2, 0.8) translate(0%, 4%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

#pageTop a img{
	width:100%;
	height:auto;
}
#pageTop a:hover {
  animation: poyooon 0.5s linear 0s 1;
}
@keyframes poyooon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  5%  { transform: scale(1.1, 0.9) translate(0%, 1%); }
  15%  { transform: scale(1.2, 0.8) translate(0%, 4%); }
  40%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  55%  { transform: scale(0.9, 1.2) translate(0%, -25%); }
  75%  { transform: scale(0.9, 1.2) translate(0%, -5%); }
  85%  { transform: scale(1.2, 0.8) translate(0%, 4%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}


.circleArea {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0px;
	text-align:center;
	padding: 15px 60px;
}
.circleArea img {
	margin: 0 auto 15px auto;
}

.circleArea a img {
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all  0.6s ease;
}
.circleArea a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
}

/* -------------------- */
/* セクション2 */
/* -------------------- */

#section2 {
	position: relative;
	width: 100%;
	height: auto;
	background: #FFF;
	padding: 30px 60px;
}

.copyArea2 {
	width: 100%;
	max-width: 67%;
	margin: 20px auto 50px auto;
}

.productArea {
	width: 100%;
	margin: 0 auto 15px auto;
}

.productArea img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.productArea a img {
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all  0.6s ease;
}
.productArea a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
}

figure {
    display: inline-block;   /* インラインブロック化 */
    margin: 0px 0px 15px 0px; /* 外側に余白を追加 */
    background-color: transparent;  /* 背景色 */
}
/* ▼画像に対する装飾 */
figure img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0px 0px 10px 0px; /* 下側にだけ10pxの余白を追加 */
}
/* ▼キャプションに対する装飾 */
figcaption {
    font-size: 0.9em;        /* 文字サイズを90%に */
    text-align: center;      /* 中身をセンタリング */
	margin: 0px 0px 15px 0px; /* 外側に余白を追加 */
}

.productCover{
	width: 85%;
	margin: 0 auto;
}

.productCover figure img {
	max-width: 95%;
}

/* IEのみ */
@media all and (-ms-high-contrast:none){
	figure {
	    display: block;   /* ブロック化 */
	}
}

.productLine {
  margin-top: 40px;
  margin-bottom: 70px;
  border: 0;
  border-top: 1px solid #666;
}

.commonPartsArea {
	margin-bottom: 30px;
}

/* -------------------- */
/* セクション3 */
/* -------------------- */

#section3 {
	position: relative;
	width: 100%;
	height: auto;
	background: #FFF;
}

.footer {
	background: #C6C6C6;
	padding: 30px 60px 30px 60px;
}

address {
	font-size: 0.8em;
	line-height: 1.5em;
	text-align: left;
	font-style: normal;
}

.addressArea {
	text-align: left;
	margin-bottom: 15px;
}

.addressExplan {
	margin-top: 0.5em;
	font-size: 15px;
}

/* -------------------- */
/* リクルート */
/* -------------------- */

.recruitFlex {
	width: 100%;
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.recruitImage {
	text-align: center;
	margin: 0 auto;
}

.recruitImage img {
	display: block;
	width: 320px;
	height: auto;
	margin: 50px auto;
	padding: 0px;
}


/* -------------------- */
/* ▼フッターメニューの装飾 */
/* -------------------- */
ul.footerMenu {
	margin: 0px;
	padding: 0px;
	margin-bottom: 15px;
}
ul.footerMenu li {
	list-style-type: none;
	font-size: 15px;
	text-align: left;
	font-weight: normal;         /* 太字にする */
}
ul.footerMenu a {
	padding: 0.5em 1em;
	color: #333;
	text-decoration: none;
	display: block;
}
ul.footerMenu span {
	padding: 0.5em 1em 0.5em 0em;
	color: #333;
	text-decoration: none;
	display: block;
}
ul.footerMenu a:hover {
	background-color: rgba(0,0,0,0.5); /* メニュー項目にマウスが載ったときの背景色(淡いピンク) */
	color: white;            /* メニュー項目にマウスが載ったときの文字色(濃い赤色) */
}



@media (max-height: 680px) {
	.copyArea {
		height: 279px;
		width: 186px;
		padding-bottom: 60px;
	}
}

@media (max-width: 767px) {
	.header {
		padding: 30px 15px;
	}
	.header > ul {
		display: inline;
	}
	
	.logoArea {
		margin-bottom: 0px;
	}
	#section1 {
		height: auto;
		padding-bottom: 60px;
	}
	.header {
		position: relative;
	}
	.copyArea {
		position: relative;
		height: 279px;
		padding-bottom: 0;
		width: 186px;
	}
	.balloonArea {
		top: auto;
		bottom: -10px;
		right: 15px;
		width: 120px;
		height: auto;
		margin: 0 auto 0 auto;
	}
	.balloonRecruit {
		bottom: calc(-10px + 66px + 5px);
	}
	.ballooni-linc{
		bottom: calc(-10px + 66px + 5px + 36px + 5px);
	}
	
	.circleArea {
		position: relative;
	}
	.copyArea2 {
		max-width: 100%;
		margin: 0px auto 30px auto;
	}
	#section2 {
		padding: 30px 15px;
	}
	.productCover{
		width: 100%;
	}
	.productCover figure img {
		max-width: 100%;
	}
	.smOnly {
		display: inline;
	}
	.pcOnly {
		display: none;
	}
	.footer {
		padding: 30px 15px;
	}
	.footerLine {
		border-left: none;
	}
	address {
		font-size: 0.7em;
	}
}
@media (min-width: 768px) {
	.copyArea {

	}
	.smOnly {
		display: none;
	}
	.pcOnly {
		display: none;
	}
	.footerLine {
		border-left: none;
	}
}
@media (min-width: 992px) {
	.pcOnly {
		display: none;
	}
	.footerLine {
	border-left: 1px solid #666;
	}
}
@media (min-width: 1200px) {
	.pcOnly {
		display: inline;
	}
	.footerLine {
	border-left: 1px solid #666;
	}
}