@charset "UTF-8";
/*  =============================



			HANDMADE

			

=============================  */



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

			Layout

---------------------------  */
a {
	outline: none;
}
.scene-sp,
.sp {
  display: none;
}
.scene_area {
  padding: 20px 45px 0 45px;
  position: relative;
}
.scene_area .fb_area {
  position: absolute;
  top: -25px;
  right: 45px;
  text-align: right;
  float: right;
}
.scene_area .block {
  padding-bottom: 30px;
  position: relative;
}
.scene_area .key {
  float: left;
  width: 370px;
  height: auto;
  cursor: pointer;
}
.scene_area .key img {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px 1px;
  width: 100%;
  max-width: 370px;
  height: auto;
}
.scene_area .ttl_area{
  float: left;
  width: 430px;
  margin-left: 30px;
}
.scene_area .ttl_area_l {
  width: 650px;
}
.scene_area .ttl_area h3 {
  padding-bottom: 25px;
}
.scene_area .ttl_area p {
  color: #000000;
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 1.8em;
  padding-bottom: 20px;
}
.scene_area .ttl_area ul.thum {
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.scene_area .ttl_area ul.thum li {
  width: 30%;
  height: auto;
  cursor: pointer;
}

.scene_area .ttl_area ul.thum {
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.scene_area .ttl_area ul.thum li {
  width: 30%;
  height: auto;
  cursor: pointer;
}
.scene_area .scene7 .ttl_area ul.thum:after {
  content: "";
    display: block;
    width: 30%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}
.scene_area .ttl_area ul.thum li img {
  margin-bottom: 5px;
}
.scene_area .ttl_area ul.thum li a {
  display: block;
  text-align: center;
  font-size: 1.1em;
  font-weight: 600;
  text-decoration: none;
}
.scene_area .ttl_area ul.thum li.eghe {
  margin-right: 0;
}
.scene_area .hand_link {
  background: url(../scene/images/hand_link_bg.jpg) repeat;
  height: 68px;
  width: 100%;
  border-radius: 10px;
  margin-bottom: 20px;
  display: table;
  vertical-align: middle;
}
.scene_area .hand_link a {
  width: 100%;
  height: 100%;
  display: block;
  display: table-cell;
  vertical-align: middle;
}
.scene_area .hand_link a .ttl_dir {
  float: left;
  padding: 0 20px 0 20px;
}
.scene_area .hand_link a .ttl_dir img {
  max-width: 608px;
  width: 100%;
  height: auto;
}
.scene_area .hand_link a .arrow {
  float: right;
  padding-right: 15px;
}
.scene_area .bnr {
  width: 100%;
  margin-bottom: 20px;
}
.scene_area .bnr img {
  width: 100%;
  height: auto;
}
/*  ---------------------------

			scene18

---------------------------  */
.scene_area .scene17 .ttl_area,
.scene_area .scene18 .ttl_area,
.scene_area .scene19 .ttl_area,
.scene_area .scene21 .ttl_area {
  float: none;
  margin: 0 auto;
  text-align: center;
}
.scene_area .scene17 .ttl_area h3,
.scene_area .scene18 .ttl_area h3,
.scene_area .scene19 .ttl_area h3,
.scene_area .scene21 .ttl_area h3 {
  margin: 0 auto;
}
.scene_area .scene17 .scene17-thum,
.scene_area .scene18 .scene18-thum,
.scene_area .scene19 .scene19-thum {
  position: relative;
  min-height: 681px;
}
.scene_area .scene21 .scene21-thum {
  position: relative;
  min-height: 760px;
}
.scene_area .scene17 .scene17-thum li,
.scene_area .scene18 .scene18-thum li,
.scene_area .scene19 .scene19-thum li,
.scene_area .scene21 .scene21-thum li {
  list-style: none;
}
.scene_area .scene17 .scene17-thum .thum01,  .scene_area .scene17 .scene17-thum .thum02,  .scene_area .scene17 .scene17-thum .thum03,  .scene_area .scene17 .scene17-thum .thum04,  .scene_area .scene17 .scene17-thum .thum05,  .scene_area .scene17 .scene17-thum .thum06,  .scene_area .scene17 .scene17-thum .thum07,  .scene_area .scene17 .scene17-thum .thum08,  .scene_area .scene17 .scene17-thum .thum09,  .scene_area .scene17 .scene17-thum .thum10,  .scene_area .scene17 .scene17-thum .thum11,  .scene_area .scene17 .scene17-thum .thum12,  .scene_area .scene17 .scene17-thum .thum13 {
  position: absolute;
}
.scene_area .scene18 .scene18-thum .thum01,  .scene_area .scene18 .scene18-thum .thum02,  .scene_area .scene18 .scene18-thum .thum03,  .scene_area .scene18 .scene18-thum .thum04,  .scene_area .scene18 .scene18-thum .thum05,  .scene_area .scene18 .scene18-thum .thum06,  .scene_area .scene18 .scene18-thum .thum07,  .scene_area .scene18 .scene18-thum .thum08,  .scene_area .scene18 .scene18-thum .thum09,  .scene_area .scene18 .scene18-thum .thum10,  .scene_area .scene18 .scene18-thum .thum11,  .scene_area .scene18 .scene18-thum .thum12,  .scene_area .scene18 .scene18-thum .thum13 {
  position: absolute;
}
.scene_area .scene19 .scene19-thum .thum01,  .scene_area .scene19 .scene19-thum .thum02,  .scene_area .scene19 .scene19-thum .thum03,  .scene_area .scene19 .scene19-thum .thum04,  .scene_area .scene19 .scene19-thum .thum05,  .scene_area .scene19 .scene19-thum .thum06,  .scene_area .scene19 .scene19-thum .thum07,  .scene_area .scene19 .scene19-thum .thum08,  .scene_area .scene19 .scene19-thum .thum09,  .scene_area .scene19 .scene19-thum .thum10,  .scene_area .scene19 .scene19-thum .thum11,  .scene_area .scene19 .scene19-thum .thum12 {
  position: absolute;
}
.scene_area .scene21 .scene21-thum .thum01,  .scene_area .scene21 .scene21-thum .thum02,  .scene_area .scene21 .scene21-thum .thum03,  .scene_area .scene21 .scene21-thum .thum04,  .scene_area .scene21 .scene21-thum .thum05,  .scene_area .scene21 .scene21-thum .thum06,  .scene_area .scene21 .scene21-thum .thum07,  .scene_area .scene21 .scene21-thum .thum08,  .scene_area .scene21 .scene21-thum .thum09,  .scene_area .scene21 .scene21-thum .thum10,  .scene_area .scene21 .scene21-thum .thum11,  .scene_area .scene21 .scene21-thum .thum12,  .scene_area .scene21 .scene21-thum .thum13,  .scene_area .scene21 .scene21-thum .thum14,
.scene_area .scene21 .scene21-thum .thum15,   .scene_area .scene21 .scene21-thum .thum16,  .scene_area .scene21 .scene21-thum .thum17 {
  position: absolute;
}
.scene_area .scene17 .scene17-thum .thum01,
.scene_area .scene18 .scene18-thum .thum01,
.scene_area .scene19 .scene19-thum .thum01 {
  top: 0;
  left: 0;
}
.scene_area .scene17 .scene17-thum .thum02,
.scene_area .scene18 .scene18-thum .thum02 {
  top: 0;
  left: 240px;
}
.scene_area .scene17 .scene17-thum .thum03,
.scene_area .scene18 .scene18-thum .thum03 {
  top: 0;
  left: 395px;
}
.scene_area .scene17 .scene17-thum .thum04,
.scene_area .scene18 .scene18-thum .thum04 {
  top: 0;
  left: 550px;
}
.scene_area .scene17 .scene17-thum .thum05,
.scene_area .scene18 .scene18-thum .thum05 {
  top: 196px;
  left: 0;
}
.scene_area .scene17 .scene17-thum .thum06,
.scene_area .scene18 .scene18-thum .thum06 {
  top: 196px;
  left: 240px;
}
.scene_area .scene17 .scene17-thum .thum07,
.scene_area .scene18 .scene18-thum .thum07 {
  top: 526px;
  left: 0;
}
.scene_area .scene17 .scene17-thum .thum08,
.scene_area .scene18 .scene18-thum .thum08 {
  top: 526px;
  left: 120px;
}
.scene_area .scene17 .scene17-thum .thum09,
.scene_area .scene18 .scene18-thum .thum09 {
  top: 380px;
  left: 240px;
}
.scene_area .scene17 .scene17-thum .thum10,
.scene_area .scene18 .scene18-thum .thum10 {
  top: 380px;
  left: 458px;
}
.scene_area .scene17 .scene17-thum .thum11,
.scene_area .scene18 .scene18-thum .thum11 {
  top: 380px;
  left: 578px;
}
.scene_area .scene17 .scene17-thum .thum12,
.scene_area .scene18 .scene18-thum .thum12 {
  top: 534px;
  left: 458px;
}
.scene_area .scene17 .scene17-thum .thum13,
.scene_area .scene18 .scene18-thum .thum13 {
  top: 534px;
  left: 654px;
}
/*19*/
.scene_area .scene19 .scene19-thum .thum02 {
	top: 0;
	left: 170px;
}
.scene_area .scene19 .scene19-thum .thum03 {
	top: 0;
	left: 340px;
}
.scene_area .scene19 .scene19-thum .thum04 {
	top: 0;
	left: 510px;
}
.scene_area .scene19 .scene19-thum .thum05 {
	top: 0;
	left: 680px;
}
.scene_area .scene19 .scene19-thum .thum06 {
	top: 230px;
	left: 0;
}
.scene_area .scene19 .scene19-thum .thum07 {
	top: 230px;
	left: 340px;
}
.scene_area .scene19 .scene19-thum .thum08 {
	top: 230px;
	left: 575px;
}
.scene_area .scene19 .scene19-thum .thum09 {
	top: 230px;
	left: 712px;
}
.scene_area .scene19 .scene19-thum .thum10 {
	top: 455px;
	left: 340px;
}
.scene_area .scene19 .scene19-thum .thum11 {
	top: 455px;
	left: 478px;
}
.scene_area .scene19 .scene19-thum .thum12 {
	top: 455px;
	left: 615px;
}

/*  ---------------------------
	        scene20
---------------------------  */
.scene20_area {
	list-style: none;
}
.scene20_area .mv-key {
  float: left;
  width: 100%;
  height: auto;
  cursor: pointer;
}
.scene20_area .mv-key img {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px 1px;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}
.scene20_area .block .font-s {
	font-size: 0.8em;
}
.scene20_area ul.nav {
	overflow: hidden;
}
.scene20_area li {
	float: left;
}
.scene20_area ul.nav li {
	margin-right: 20px;
	list-style: none;
}
.scene20_area ul.nav li:last-child {
	margin-right: 0;
}
.scene20_area ul.nav li img {
	width: 270px;
	height: auto;
}
.scene20_area .topics-main {
	margin-bottom: 30px;
}
.scene20_area ul.thum {
  list-style: none;
}
.scene20_area ul.thum li {
  float: left;
  cursor: pointer;
  margin: 0 6px 0 0;
}
.scene20_area .topics-main,
.scene20_area .topics-sub {
	overflow: hidden;
}
.scene20_area .topics {
    margin-top: 60px;
}
.scene20_area .topics .topics-img {
	width: 300px;
	height: auto;
	margin-right: 30px;
}
.scene20_area .topics .topics-text {
	width: 520px;
	height: auto;
}
.scene20_area .topics-sub li:last-child {
	margin-right: 0;
}

/*  ---------------------------
	        scene21
---------------------------  */
.scene_area .scene21 .scene21-thum .thum01 {
	top: 0;
	left: 0;
}
.scene_area .scene21 .scene21-thum .thum02 {
	top: 0;
	right: 0;
}
.scene_area .scene21 .scene21-thum .thum03 {
	top: 0;
	left: 230px;
}
.scene_area .scene21 .scene21-thum .thum04 {
	top: 154px;
	left: 0;
}
.scene_area .scene21 .scene21-thum .thum05 {
	top: 154px;
	left: 115px;
}
.scene_area .scene21 .scene21-thum .thum06 {
	top: 308px;
	left: 0;
}
.scene_area .scene21 .scene21-thum .thum07 {
	top: 623px;
	left: 0px;
}
.scene_area .scene21 .scene21-thum .thum08 {
	top: 250px;
	left: 230px;
}
.scene_area .scene21 .scene21-thum .thum09 {
	top: 250px;
	left: 385px;
}
.scene_area .scene21 .scene21-thum .thum10 {
	top: 250px;
	left: 540px;
}
.scene_area .scene21 .scene21-thum .thum11 {
	top: 445px;
	left: 230px;
}
.scene_area .scene21 .scene21-thum .thum12 {
	top: 445px;
	left: 436px;
}
.scene_area .scene21 .scene21-thum .thum13 {
	top: 445px;
	right: 0;
}
.scene_area .scene21 .scene21-thum .thum14 {
	top: 565px;
	left: 230px;
}
.scene_area .scene21 .scene21-thum .thum15 {
	top: 250px;
	right: 0;
}
.scene_area .scene21 .scene21-thum .thum16 {
	top: 565px;
	left: 540px;
}
.scene_area .scene21 .scene21-thum .thum17 {
	top: 565px;
	left: 385px;
}
.scene_area .hand-link_21 {
  background: #eec400;
}
/*  ---------------------------
	scene21 about Pippi
---------------------------  */
.scene21_area_about .scene21-thum-about .mv-key {
  float: left;
  width: 100%;
  height: auto;
  cursor: pointer;
}
.scene21_area_about .scene21-thum-about .mv-key img {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px 1px;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}
.scene21_area_about .scene21-thum-about .notice {
	overflow: hidden;
	padding: 20px;
	background: url(../scene/images/hand_link_bg.jpg);
	border-radius: 10px;
}
.scene21_area_about .scene21-thum-about .notice li {
	float: left;
	list-style: none;
}
.scene21_area_about .scene21-thum-about .notice li.poster img {
	width: 150px;
	height: auto;
}
.scene21_area_about .scene21-thum-about .notice li.text {
	width: 500px;
	margin-left: 30px;
	color: #000000;
	text-align: left;
}
.scene21_area_about .scene21-thum-about .notice li.text h4 {
	margin: 10px 0 0;
	padding: 0;
	font-size: 24px;
	color: #ff350f;
	text-align: left;
}
.scene21_area_about .scene21-thum-about .notice li.text p,
.scene21_area_about .scene21-thum-about .notice li.text .font-s {
	font-size: 18px;
	padding: 0;
}
.scene21_area_about .scene21-thum-about .notice li.text .font-s {
	font-family: '小塚ゴシック Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', 'メイリオ', 'Meiryo', sans-serif;
}
.scene21_area_about .scene21-thum-about .notice li.text .pippi-btn {
	margin-top: 15px;
	display: inline-block;
}
.scene21_area_about .scene21-thum-about .notice li.text .pippi-btn a {
	position: relative;
  display: inline-block;
	padding: 8px 30px 8px 15px;
	font-size: 16px;
	font-weight: bold;
	background: #fee101;
    border-radius: 8px;
	text-decoration: none;
}
.scene21_area_about .scene21-thum-about .notice li.text .pippi-btn a::after {
	content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #586549;
  border-right: solid 2px #586549;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 7%;
  margin-top: -4px;
}
.scene21_area_about .scene21-thum-about .notice li.text .pippi-btn a:hover {
	opacity: 0.7;
	text-decoration: none;
}


@media screen and (max-width: 1060px) {
.scene_area .key {
  float: left;
  text-align: left;
  width: 320px;
}
.scene_area .ttl_area {
  float: left;
  width: 390px;
  margin-left: 25px;
}
.scene_area .ttl_area ul.thum li img {
  width: 120px;
}
/*scene20*/
.scene20_area .mv-key {
  float: left;
  text-align: left;
  width: 100%;
}
.scene20_area ul.nav {
	overflow: hidden;
}
.scene20_area li {
	float: left;
}
.scene20_area ul.nav li {
	width: 32%;
	margin-right: 2%;
	list-style: none;
	float: left;
}
.scene20_area ul.nav li:last-child {
	margin-right: 0;
}
.scene20_area ul.nav li img {
	width: 100%;
	height: auto;
}
/*scene21 about Pippi*/
.scene21_area_about .mv-key {
  float: left;
  text-align: left;
  width: 100%;
}
.scene21_area_about .scene21-thum-about .notice li {
	float: left;
}
.scene21_area_about .scene21-thum-about .notice li.poster {
	width: 30%;
	height: auto;
}
.scene21_area_about .scene21-thum-about .notice li.poster img {
	width: 100%;
	height: auto;
}
.scene21_area_about .scene21-thum-about .notice li.text {
	width: 65%;
	margin-left:5%;
}
.scene21_area_about .scene21-thum-about .notice li.text h4 {
	font-size: 22px;
}
.scene21_area_about .scene21-thum-about .notice li.text p,
.scene21_area_about .scene21-thum-about .notice li.text .font-s {
	font-size: 16px;
}
}

@media screen and (max-width: 960px) {
.scene-pc {
  display: none;
}
.scene-sp {
  display:block;
}
.scene_area .key {
  width: 100%;
  float: left;
  text-align: center;
  margin-bottom: 30px;
}
.scene_area .key img {
  height: 415px;
}
.scene_area .ttl_area {
  float: left;
  width: 100%;
  margin-left: 0;
  text-align: center;
}
.scene_area .ttl_area p {
  text-align: left;
}
.scene_area .ttl_area ul.thum {
  width: 100%;
  margin: 0 auto;
}
.scene_area .ttl_area ul.thum li img {
  width: 100%;
}
.scene_area .hand_link a .arrow {
  display: none;
}
.scene18 .ttl_area {
  float: none;
  margin: 0 auto;
}


/*  ---------------------------
			scene18
---------------------------  */
.scene_area .scene17 .scene17-thum,
.scene_area .scene18 .scene18-thum,
.scene_area .scene19 .scene19-thum,
.scene_area .scene21 .scene21-thum {
  width: 100%;
}
.scene_area .scene17 .ttl_area,
.scene_area .scene18 .ttl_area,
.scene_area .scene19 .ttl_area,
.scene_area .scene21 .ttl_area {
  float: none;
  margin: 0 auto;
  text-align: center;
}
.scene_area .scene17 .ttl_area p,
.scene_area .scene18 .ttl_area p,
.scene_area .scene19 .ttl_area p,
.scene_area .scene21 .ttl_area p {
  text-align: center;
}
.scene_area .scene17 .ttl_area h3,
.scene_area .scene18 .ttl_area h3,
.scene_area .scene19 .ttl_area h3,
.scene_area .scene21 .ttl_area h3 {
  margin: 0 auto;
}
.scene_area .scene17 .scene17-thum,
.scene_area .scene18 .scene18-thum,
.scene_area .scene19 .scene19-thum,
.scene_area .scene21 .scene21-thum {
  width:100%;
  position: relative;
  overflow: hidden;
}
.scene_area .scene17 .scene17-thum li,
.scene_area .scene18 .scene18-thum li,
.scene_area .scene19 .scene19-thum li,
.scene_area .scene21 .scene21-thum li {
  position: relative !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width: 50%;
  float: left;
  list-style: none;
}
  .scene_area .scene17 .scene17-thum li:nth-child(7),
  .scene_area .scene17 .scene17-thum li:nth-child(10),
  .scene_area .scene17 .scene17-thum li:nth-child(13) {
    width: 100%;
  }
  .scene_area .scene18 .scene18-thum li:nth-child(1),
  .scene_area .scene18 .scene18-thum li:nth-child(6),
  .scene_area .scene18 .scene18-thum li:nth-child(11) {
    width: 100%;
  }
  .scene_area .scene19 .scene19-thum li:nth-child(7),
  .scene_area .scene19 .scene19-thum li:nth-child(10) {
    width: 100%;
  }
  .scene_area .scene21 .scene21-thum li:nth-child(1),
  .scene_area .scene21 .scene21-thum li:nth-child(2),
  .scene_area .scene21 .scene21-thum li:nth-child(11),
  .scene_area .scene21 .scene21-thum li:nth-child(12),
  .scene_area .scene21 .scene21-thum li:nth-child(13),
  .scene_area .scene21 .scene21-thum li:nth-child(16),
  .scene_area .scene21 .scene21-thum li:nth-child(17){
    width: 100%;
  }
  .scene_area .scene17 .scene17-thum img,
  .scene_area .scene18 .scene18-thum img,
  .scene_area .scene19 .scene19-thum img,
   .scene_area .scene21 .scene21-thum img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}


/*  ---------------------------
	        scene20
---------------------------  */
.scene20_area .mv-key {
  width: 100%;
  float: left;
  text-align: center;
  margin-bottom: 30px;
}
.scene20_area .mv-key img {
  height: auto;
  margin-bottom: 0;
}
.scene20_area .block .font-s {
	font-size: 0.8em !important;
}
.scene20_area ul.nav {
	overflow: hidden;
}
.scene20_area li {
	float: left;
}
.scene20_area ul.nav li {
	width: 32%;
	margin-right: 2%;
	list-style: none;
	float: left;
}
.scene20_area ul.nav li:last-child {
	margin-right: 0;
}
.scene20_area ul.nav li img {
	width: 100%;
	height: auto;
}
.scene20_area .topics-main {
	margin-bottom: 30px;
}
.scene20_area .topics-main li {
	float: none;
}
.scene20_area ul.thum {
  width: 100%;
  margin: 0 auto;
}
.scene20_area ul.thum li img {
  width: 100%;
}
.scene20_area .topics-main,
.scene20_area .topics-sub {
	overflow: hidden;
}
.scene20_area .topics {
    margin-top: 60px;
}
.scene20_area .topics h4 img {
	width: auto;
	height: 60px;
}
.scene20_area .topics .topics-img {
	width: 100%;
	height: auto;
	margin-right: 0;
	margin-bottom: 3%;
}
.scene20_area .topics .topics-img img {
	width: 100%;
	height: auto;
}
.scene20_area .topics .topics-text {
	width: 100%;
	height: auto;
}
.scene20_area .topics-sub li {
	width: 49%;
	height: auto;
	margin-right: 2%;
}
.scene20_area .topics-sub li img {
	width: 100%;
	height: auto;
}
.scene20_area .topics-sub li:last-child {
	margin-right: 0;
}

}
/*  ---------------------------

			Wide

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

.scene_area .key_wide {
  float: none;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}
.scene_area .key_wide img {
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px 1px;
}
.scene_area .wide {
  float: none;
  width: 100%;
  margin-left: 0;
  text-align: center;
}
.scene_area .wide p {
  text-align: left;
  padding-bottom: 0;
}

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

			modal

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

@-webkit-keyframes 'fadeIn' {
 from {
 opacity: 0;
}
 to {
 opacity: 1;
}
}
 @-moz-keyframes fadeIn {
 from {
 opacity: 0;
}
 to {
 opacity: 1;
}
}
 @-webkit-keyframes 'fadeOut' {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
}
}
 @-moz-keyframes fadeOut {
 from {
 opacity: 1;
}
 to {
 opacity: 0;
}
}
 @-webkit-keyframes 'fadeInBg' {
 from {
 opacity: 0;
}
 to {
 opacity: 0.8;
}
}
 @-moz-keyframes fadeInBg {
 from {
 opacity: 0;
}
 to {
 opacity: 0.8;
}
}
 @-webkit-keyframes 'fadeOutBg' {
 from {
 opacity: 0.8;
}
 to {
 opacity: 0;
}
}
 @-moz-keyframes fadeOutBg {
 from {
 opacity: 0.8;
}
 to {
 opacity: 0;
}
}
/* -- 写真全体 -- */

#modalFrame {
  position: absolute;
  z-index: 102;
  display: none;
}
#modalFrame.show {
  display: block;
  -webkit-animation: 'fadeIn' 0.5s ease-out 0.5s backwards;
  -moz-animation: fadeIn 0.5s ease-out 0.5s backwards;
}
/* -- 写真 -- */

#modalPhoto {
  background-color: white;
  padding: 10px;
  width: 400px;
	height: 600px;

}
#modalPhoto li {
  display: none;
}
#modalPhoto .sp li {
  display: inline;
}
#modalPhoto li.selected {
  display: block;
  -webkit-animation: 'fadeIn' ease-out 0.5s backwards;
  -moz-animation: fadeIn ease-out 0.5s backwards;
}
/* -- 写真の説明 -- */

#modalText {
  background-color: white;
  /*width: 400px;*/

  padding: 3px 10px 13px;
  color: #000;
}
#modalText li {
  display: none;
  font-size: 116%;
  line-height: 1.5em;/*1.8em;*/
  letter-spacing: 0.1em;
  height: 80px;
}
#modalText li.selected {
  display: block;
  -webkit-animation: 'fadeIn' ease-out 0.5s backwards;
  -moz-animation: fadeIn ease-out 0.5s backwards;
}
/* -- 写真の番号 -- */

#modalNum {
  color: #000;
  margin-top: 7px;
}
#modalButton {
  padding-top: 20px;
  width: 420px;
}
#modalPrev, #modalNext, #modalNum {
  float: left;
}
#modalPrev, #modalNext, #modalClose {
  cursor: pointer;
  cursor: hand;
}
#modalNext {
  margin-left: 10px;
  margin-right: 17px;
}
#modalClose {
  float: right;
}
/* -- 背景 -- */

#modalBg {
  position: absolute;
  background-color: #fff;
  opacity: 0;
  left: 0;
  top: 0;
  -webkit-animation: 'fadeOutBg' ease-out 0.5s backwards;
  -moz-animation: fadeOutBg ease-out 0.5s backwards;
}
#modalBg.show {
  opacity: 0.8;
  -ms-filter: "alpha(opacity=80)";  /* ie 8 */
  z-index: 101;
  -webkit-animation: 'fadeInBg' ease-out 0.5s backwards;
  -moz-animation: fadeInBg ease-out 0.5s backwards;
}