@charset "utf-8";
/*------------------------------------------------------------
	life.html
------------------------------------------------------------*/
#main {
	margin-bottom: 182px;
	padding-top: 108px;
}

#main h2 {
	margin-bottom: 75px;
	text-align: center;
}

#main h2 embed {
	margin: 0 auto;
	width: 110px;
}

#main .txtBox {
	margin: 0 auto 119px;
	width: 690px;
}

#main .txtBox .textImg {
	margin-bottom: 44px;
}

#main .txtBox .textImg embed {
	width: 636px;
}

#main .txtBox p {
	margin-left: 3px;
	font-size: 15px;
	font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HGS明朝E", "メイリオ", Meiryo, "Noto Serif JP", serif;
	line-height: 3;
	letter-spacing: 2px;
}

#main .txtBox p span {
	margin-top: 17px;
	display: block;
	font-size: 30px;
	letter-spacing: 7px;
}

#main .photoUl {
	margin: -40px auto 0;
	width: 1100px;
}

#main .photoUl li {
	padding-top: 40px;
	width: 48.2%;
	float: left;
  opacity: 0;
  transition: opacity .3s ease;
}

#main .photoUl li:nth-child(2n) {
	float: right;
}

#main .photoUl li a {
	display: block;
	overflow: hidden;
}

#main .photoUl li img {
	width: 100%;
  transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
}

#main .photoUl li.show {
  opacity: 1;
}

#main .photoUl li.show img {
  transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transition: transform 1.6s ease 0s;
  -moz-transition: transform 1.6s ease 0s;
  -webkit-transition: transform 1.6s ease 0s;
}

#main .photoUl li.show a:hover img {
  transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
}

#gFooter .fBg {
	display: block;
	background: url(../img/life/f_bg.jpg) no-repeat center center;
	background-size: cover;
}

#gFooter .fNavi li a {
	border-bottom: none;
}

@media all and (min-width: 0) and (max-width: 767px) {
	#main {
		margin-bottom: 150px;
		padding-top: 87px;
	}

	#main h2 {
		margin-bottom: 45px;
	}

	#main h2 embed {
		width: 90px;
	}

	#main .txtBox {
		margin: 0 20px 71px;
		width: auto;
	}

	#main .txtBox .textImg {
		margin-bottom: 31px;
	}

	#main .txtBox .textImg embed {
		max-width: 335px;
		width: 100%;
	}

	#main .txtBox p {
		margin: 0 -5px 0 0;
		font-size: 12px;
		letter-spacing: 1.5px;
		line-height: 2.93;
	}

	#main .txtBox p span {
		margin-top: 34px;
		font-size: 19px;
		letter-spacing: 2px;
		line-height: 1.5;
	}

	#main .photoUl {
		margin: -15px 20px 0;
		width: auto;
	}

	#main .photoUl li {
		padding-top: 15px;
		width: 100%;
	}

	#main .photoUl li a:hover img {
		transform: scale(1);
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
	}

	#gFooter .fBg {
		background: url(../img/life/sp_f_bg.jpg) no-repeat center center;
		background-size: cover;
	}

	.iphone5 #main .txtBox p {
		letter-spacing: -.3px;
	}
}

/*------------------------------------------------------------
	common
------------------------------------------------------------*/
.lifeDetail #gHeader {
  visibility: hidden;
  opacity: 0;
  transition: background-color .3s ease, padding .3s ease, opacity .3s ease, visibility .3s ease;
}

.lifeDetail.showHeader #gHeader {
  visibility: visible;
  opacity: 1;
}

.lifeDetail #main {
	padding-top: 89px;
}

.lifeDetail #gFooter .fBg {
	display: none;
}

#gFooter .fNavi li a {
	border-bottom: 1px solid #000;
}

.lifeDetail #main h2 {
	text-align: left;
}

.lifeDetail #main .topBox {
	margin-bottom: 23px;
	height: 768px;
	position: relative;
	background: url(../img/life/top_bg01.jpg) no-repeat top center;
	background-size: cover !important;
}

.lifeDetail #main .topBox .topWord {
	margin-left: -527px;
	width: 1054px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.lifeDetail #main .topBox h2 {
	margin-bottom: 0;
	font-size: 28px;
	font-weight: 600;
	font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HGS明朝E", "メイリオ", Meiryo, "Noto Serif JP", serif;
	line-height: 1.6;
	letter-spacing: 6px;
}

.topWord02 {
	color: #fff;
}

.topWord div {
	margin-top: 15px;
	position: absolute;
}

.topWord div p {
	font-size: 16px;
	font-weight: 600;
	font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HGS明朝E", "メイリオ", Meiryo, "Noto Serif JP", serif;
	letter-spacing: 3px;
}

.topWord span {
	display: block;
	font-size: 12px;
	font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HGS明朝E", "メイリオ", Meiryo, "Noto Serif JP", serif;
	letter-spacing: 2px;
}

.lifeDetail #main .topBox .h2Ttl {
	color: #fff;
}

.lifeDetail #main .subBox {
	margin: 0 auto;
	width: 1044px;
}

.lifeDetail #main h3 {
	font-size: 24px;
	font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HGS明朝E", "メイリオ", Meiryo, "Noto Serif JP", serif;
	margin: 0 0 55px -32px;
	height: 206px;
	width: 80px;
	text-align: left;
	letter-spacing: 4.5px;
	position: relative;
	left: 50%;
	top: 0;
	writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	direction: ltr;
	font-weight:600;
	display: none;
}

.lifeDetail #main h3 span {
	display: block;
}

.lifeDetail #main h3 .txt {
	margin-left: 12px;
	font-size: 12px;
	font-weight: normal;
	letter-spacing: 2.4px;
}

.lifeDetail #main h3 .en {
	font-size: 10px;
	font-weight: normal;
	font-family: 'Crimson Text', serif;
	font-style: italic;
	letter-spacing: 0.5px;
}

.lifeDetail #main dl {
	margin: 0 122px 51px;
}

.lifeDetail #main dt {
	margin: 0 -11px 22px 0;
	font-size: 24px;
	font-weight: 600;
	font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HGS明朝E", "メイリオ", Meiryo, "Noto Serif JP", serif;
	letter-spacing: 2.5px;
}

.lifeDetail #main dd {
	font-size: 14px;
	line-height: 1.86;
	letter-spacing: 1px;
}

.lifeDetail #main .txtDl01 {
	margin-bottom: 92px;
}

.lifeDetail #main .txtDl02 {
	margin-bottom: 121px;
}

.lifeDetail #main .movieUl {
	margin: 0 7px 94px;
	display: flex;
}

.lifeDetail #main .movieUl li {
	height: 281px;
}

.lifeDetail #main .movieUl li video {
	width: 100%;
	height: 281px;
}

.lifeDetail #main .movieUl li img {
  display: none;
}

.lifeDetail #main .movieUl li:nth-child(2n) {
	margin-left: 26px;
}

.lifeDetail #main .linkUl {
	overflow: hidden;
}

.lifeDetail #main .linkUl li {
	width: 20%;
	float: left;
	padding: 0 9px 18px;
	box-sizing: border-box;
}

.lifeDetail #main .linkUl li a {
	display: block;
	overflow: hidden;
}

.lifeDetail #main .linkUl li img {
	width: 100%;
	transition: all 1.6s ease 0s;
	-moz-transition: all 1.6s ease 0s;
	-webkit-transition: all 1.6s ease 0s;
}

.lifeDetail #main .linkUl li a:hover img {
	transform: scale(1.1);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
}

.lifeDetail #main .linkUl li.on a {
	position: relative;
}

.lifeDetail #main .linkUl li.on a:hover img {
	transform: none;
}

.lifeDetail #main .linkUl li.on a:before {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	position: absolute;
	top: 0;
	left: 0;

	content: "";
	z-index: 1;
}

/*------------------------------------------------------------
	life2.html
------------------------------------------------------------*/
.lifeDetail #main .life2 .topBox {
	background: url(../img/life/top_bg02.jpg) no-repeat top center;
}

/*------------------------------------------------------------
	life3.html
------------------------------------------------------------*/
.lifeDetail #main .life3 .topBox {
	background: url(../img/life/top_bg03.jpg) no-repeat top center;
}

.lifeDetail #main .life3 h3 {
	height: 121px;
}

/*------------------------------------------------------------
	life4.html
------------------------------------------------------------*/
.lifeDetail #main .life4 .topBox {
	background: url(../img/life/top_bg04.jpg) no-repeat top center;
}

.lifeDetail #main .life4 h3 {
	margin-bottom: 17px;
	letter-spacing: 4px;
	height: 350px;
}

/*------------------------------------------------------------
	life5.html
------------------------------------------------------------*/
.lifeDetail #main .life5 .topBox {
	background: url(../img/life/top_bg05.jpg) no-repeat top center;
}

/*------------------------------------------------------------
	life6.html
------------------------------------------------------------*/
.lifeDetail #main .life6 .topBox {
	background: url(../img/life/top_bg06.jpg) no-repeat top center;
}

.lifeDetail #main .life6 h3 {
	height: 121px;
}

/*------------------------------------------------------------
	life7.html
------------------------------------------------------------*/
.lifeDetail #main .life7 .topBox {
	background: url(../img/life/top_bg07.jpg) no-repeat top center;
}

.lifeDetail #main .life7 h3 {
	height: 121px;
}

/*------------------------------------------------------------
	life8.html
------------------------------------------------------------*/
.lifeDetail #main .life8 .topBox {
	background: url(../img/life/top_bg08.jpg) no-repeat top center;
}

/*------------------------------------------------------------
	life9.html
------------------------------------------------------------*/
.lifeDetail #main .life9 .topBox {
	background: url(../img/life/top_bg09.jpg) no-repeat top center;
}

/*------------------------------------------------------------
	life10.html
------------------------------------------------------------*/
.lifeDetail #main .life10 .topBox {
	background: url(../img/life/top_bg10.jpg) no-repeat top center;
}


@media all and (min-width: 0) and (max-width: 767px) {
	/*------------------------------------------------------------
		common
	------------------------------------------------------------*/
	.lifeDetail #main {
		padding-top: 77px;
	}

	.lifeDetail #main .topBox {
		margin-bottom: 0;
		height: auto;
		background: none !important;
	}
	
	.lifeDetail #main .topWord  {
		margin-bottom: 41px;
		position: static;
		transform: none;
		font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HGS明朝E", "メイリオ", Meiryo, "Noto Serif JP", serif;
		text-align: center;
		overflow: hidden;
	}
	
	.lifeDetail #main .topWord h2 {
		margin: 0 -15px 29px 0;
		font-size: 24px;
		display: block;
		text-align: center;
		letter-spacing: 2.7px;
	}
	
	.topWord p {
		margin-bottom: 3px;
		font-size: 14px;
		letter-spacing: 2.8px;
	}
	
	.topWord span {
		display: block;
		font-size: 12px;
		letter-spacing: 2.5px;
	}

	.lifeDetail #main .topBox img {
		margin-bottom: 45px;
		width: 100%;
	}

	.lifeDetail #main .topBox h2 {
		margin: 0 0 0 10px;
		width: auto;
		color: #000 !important;
		font-size: 25px;
		text-align: center;
		letter-spacing: 1.5px;
		line-height: 1.45;
		position: static;
		transform: translate(0);
		-moz-transform: translate(0);
		-ms-transform: translate(0);
		-o-transform: translate(0);
		-webkit-transform: translate(0);
	}

	.lifeDetail #main .subBox {
		width: auto;
	}

	.lifeDetail #main h3 {
		margin: 0 0 30px;
		width: auto;
		height: auto !important;
		text-align: center;
		letter-spacing: 3px;
		position: static;
		writing-mode: inherit;
		-webkit-writing-mode: inherit;
		direction: inherit;
	}

	.lifeDetail #main h3 {
		margin-bottom: 41px;
		font-size: 20px;
	}

	.lifeDetail #main h3 .txt {
		margin: 0 0 8px;
		font-size: 12px;
		letter-spacing: 3.5px;
	}

	.lifeDetail #main h3 .en {
		margin-top: 2px;
		font-size: 10px;
	}

	.lifeDetail #main dl {
		margin: 0 20px 50px;
	}

	.lifeDetail #main dt {
		margin: 0 -5px 14px 0;
		font-size: 20px;
		letter-spacing: 1px;
	}

	.lifeDetail #main dd {
		letter-spacing: 0.3px;
		line-height: 1.7;
	}

	.lifeDetail #main .txtDl01 {
		margin-bottom: 58px;
	}

	.lifeDetail #main .txtDl02 {
		margin-bottom: 55px;
	}

	.lifeDetail #main .movieUl {
		margin: 0 0 47px;
		display: block;
	}

	.lifeDetail #main .movieUl li {
		margin-left: 0 !important;
		height: auto;
	}

	.lifeDetail #main .movieUl li video {
		height: auto;
	}

  .lifeDetail #main .movieUl li:nth-child(1) {
    position: relative;
    height: 0;
    padding-bottom: 56%;
  }

  .lifeDetail #main .movieUl li:nth-child(1) video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .lifeDetail #main .movieUl li:nth-child(1) img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .lifeDetail.Android.lowVersion #main .movieUl li video {
    display: none;
  }

  .lifeDetail.Android.lowVersion #main .movieUl li img {
    display: block;
    width: 100%;
  }

	.lifeDetail #main .linkUl {
		margin: 0 12px;
	}

	.lifeDetail #main .linkUl li {
		padding: 15px 8px 0;
		width: 50%;
	}

	.lifeDetail #main .linkUl li a:hover img {
		transform: scale(1);
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
	}

	/*------------------------------------------------------------
		life4.html
	------------------------------------------------------------*/
	.lifeDetail #main .life4 h3 {
		margin-bottom: 40px;
	}

	.iphone5.lifeDetail #main .topBox h2 {
		margin-left: 5px;
		letter-spacing: -1.8px;
	}

	.iphone5 #main .txtBox p span {
		letter-spacing: -2px;
	}

	/*------------------------------------------------------------
		life10.html
	------------------------------------------------------------*/
	.lifeDetail #main .life10 .topWord  h2 {
		letter-spacing: 1.7px;
	}
	
	.lifeDetail.iphone5 #main .life10 .topWord h2 {
		margin-left: 5px;
		letter-spacing: -2.5px;
	}
}


@media all and (min-width: 0) and (max-width: 374px) {
	.lifeDetail #main .topWord h2 {
		letter-spacing: -0.5px;
	}