@charset "utf-8";
/* ==================================================
 　トップページ
================================================== */



/*  メインビジュアル
--------------------------------------------------------------------------------*/
#main_visual {
  height: 520px;
	position: relative;
}
#main_visual .catch {
position: absolute;
	top: 26px;
	left: 348px;
	z-index: 98;
}
#main_visual .visual {
  position: absolute;
	bottom: 0;
	left: -10px;
	z-index: 99;
}

/*  ストーリー
-------------------------------------------------------------------------------*/
#story_area {
clear: both;
margin: 0 0 20px 0;
padding: 38px 0;
background: #ededed;
}

#story_area h2 { clear: both; font-size: 200%; background: url(../images/icon_heart.gif) no-repeat 0 50%; padding: 4px 0 4px 52px; margin-bottom: 10px; }
#story_area h2 span { font-weight: normal; font-size: 80%;}
#story_area ul {
margin: 0 0 30px 0;
}

#story_area li {
float: left;
margin: 0 0 0 12px;
width: 225px;
max-width: none;
	background: #ffffff;
	-webkit-border-radius:6px 6px 6px 6px
	-moz-border-radius:6px 6px 6px 6px; 
	border-radius:6px 6px 6px 6px;
	padding: 18px 16px;
}

#story_area li:first-child { margin-left: 0; }

#story_area li img, #story_area li span { display: block; }
#story_area li img { width: 100%; height: auto; border: 1px solid #d9d9d9; margin-bottom: 14px; }
#story_area .title { color:#bf5829 !important; font-size: 120%; font-weight: bold; margin-bottom: 10px;}
#story_area .text { color:#707070;}
#story_area .caption { margin-top:5px; font-size:75%; font-weight:bold;	color: #00029E;}


@media screen and (min-width: 671px) {
#story_area ul.block_1 li:nth-child(1) {
	margin: 0 0 0 120px;
}
#story_area ul.block_1 li:nth-child(4) {
	clear: both;
	margin: 12px 0 0 0;
}
#story_area ul.block_1 li:nth-child(5) {
	margin: 12px 0 0 12px;
}
#story_area ul.block_1 li:nth-child(6) {
	margin: 12px 0 0 12px;
}
#story_area ul.block_1 li:nth-child(7) {
	margin: 12px 0 0 12px;
}
}
/*  アプリ
-------------------------------------------------------------------------------*/
#app_area h2 { background: url(../images/icon_sumaho.gif) no-repeat 0 50%; padding: 10px 0 10px 60px; font-weight: normal; margin-bottom: 10px;  }

#app_area table { border-collapse: collapse; }
#app_area td { border: 1px solid #e5e5e5; padding: 20px; vertical-align: top; width: 240px; }

#app_area h3 { font-weight: normal; font-size: 120%; padding: 4px 0 4px 56px; margin-bottom: 10px; line-height:1.4; min-height: 54px; }
.ap1 h3 { color: #a75631; background: url(../images/icon_app01.jpg) no-repeat 0 0;}
.ap2 h3 { color: #bc5471; background: url(../images/icon_app02.jpg) no-repeat 0 0;}
.ap2 h3 span { font-size: 76%; }
.ap3 h3 { color: #8865ba; background: url(../images/icon_app03.jpg) no-repeat 0 0;}
#app_area td p { margin-top: 10px; }

#app_area  .ap4 h3 { min-height: auto !important; padding-left: 0; font-weight: bold; margin-bottom: 0; }
#app_area  .ap4 img { margin-top: 10px; }

.ap1 h3 span, .ap3 h3 span { display:block; }

/*  info 
-------------------------------------------------------------------------------*/
#info_area {
clear: both;
margin: 20px 0;
padding: 20px 0;
background: #ededed;
}

#info_area h2 { font-size: 100%; }

#info_area dt { clear:both; float: left; width: 10em; padding-top: 0.5em; }
#info_area dd { margin-left: 10em; padding-top:0.5em; }
#info_area a { color:#00029E}
#info_area a:hover { color:#D83457; text-decoration:underline;}

/*  banner
-------------------------------------------------------------------------------*/
#banner_area { text-align: center; }
#banner_area ul { display: inline-block;}
#banner_area li { float: left; margin: 0 8px;}

/*  special_box
-------------------------------------------------------------------------------*/
.special_box {
  float: left;
  margin: 0 0 30px 10px;
/*  width: 464px;	*/
	width: 300px;
  border: 4px solid #eb6437;
	-webkit-border-radius:6px 6px 6px 6px
	-moz-border-radius:6px 6px 6px 6px; 
	border-radius:6px 6px 6px 6px;
	padding: 18px 16px;
  background: #fff;
  padding: 10px;
	box-sizing: border-box;
}

.special_box:first-child { margin-left: 0; }

.special_box .s01 {
   display: block;
   background: url(../images/icon_special01.jpg)no-repeat right 50%;
   min-height: 80px;
   height: 80px;
   font-size: 110%;
}

.special_box .s02 {
   display: block;
   background: url(../images/icon_special02.jpg)no-repeat right 50%;
   min-height: 80px;
   height: 80px;
   font-size: 110%;
}

.special_box .s03 {
   display: block;
   background: url(../images/icon_special03.jpg)no-repeat right 50%;
   min-height: 80px;
   height: 80px;
   font-size: 110%;
}

.special_box .s04 {
   display: block;
   background: url(../images/icon_special04.jpg)no-repeat right 50%;
   min-height: 80px;
   height: 80px;
   font-size: 110%;
}

.special_box .s05 {
   display: block;
   background: url(../images/icon_special05.jpg)no-repeat right 50%;
   min-height: 80px;
   height: 80px;
   font-size: 110%;
}

.special_box span { display: block; background: url(../images/tri_left.jpg) no-repeat 0 30px; padding: 25px 80px 0 16px;}
.special_box .s04 span { display: block; background: url(../images/tri_left.jpg) no-repeat 0 30px; padding: 5px 80px 0 16px;}

.new {
	padding: 5px 3px 3px 5px;
	width: 5em;
	margin-top: -2em;
	margin-bottom: 0.6em;
	font-size: 110%;
	font-weight: bold;
	color: #ffffff;
	background-color: #ff0000;
	line-height: 1.0;
	text-align: center;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
}