@charset "UTF-8";

/* ---------------------------------------------------
   File: function.css
   Version: 1.0.0
   Update: 2014-01-20
   Author: http://flowlab.co.jp

   (c)2007-2014 Flowlab inc. All Rights Reserved.
--------------------------------------------------- */






/* ===========================================================================
   Common */


nav#gnavi li#gnavi_function a {
	background-position: -105px -120px;
}




/* --------------------------------------------------
   Page Title
-------------------------------------------------- */

h1#tit_page {
	width: auto;
	height: 350px;
	background: #399fcd url(../function/images/tit_function.jpg) center top no-repeat;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	margin: 0 0 35px 0;
}








/* ===========================================================================
   Tab */


#tabs {
	width: 1000px;
	margin: 0 auto;
	padding-bottom: 40px;
}
#tabs ul#btn_select {
	height: 140px;
	padding: 10px 170px 20px 180px;
	display: block;
}
#tabs ul#btn_select li,
#tabs ul#btn_select li img,
#tabs ul#btn_select li a {
	width: 140px;
	height: 140px;
	display: block;
	overflow: hidden;
	padding: 0;
	margin: 0;
}
#tabs ul#btn_select li#tab_basic,
#tabs ul#btn_select li#tab_choice {
	margin-right: 110px;
	float: left;
}
#tabs ul#btn_select li#tab_control {
	margin-right: 10px;
	float: right;
}
#tabs ul#btn_select li a {
	cursor: pointer;
}
#tabs ul li a {
	color: #333;
}
#tabs ul li a:hover {
	color: #999;
	text-decoration: none;
}
#tabs ul li span {
	text-align: center;
	font-weight: bold;
	line-height: 1.2em;
	display: block;
	margin: 8px 0 0 0;
}


/* --------------------------------------------------
   Layout
-------------------------------------------------- */

#tabs-basic,
#tabs-choice,
#tabs-control {
	width: 1000px;
	display: block;
	padding: 60px 10px 0 0;
	margin: 0;
}
#tabs-basic		{ background: url(../function/images/bg_basic.gif) 0 0 no-repeat;}
#tabs-choice	{ background: url(../function/images/bg_choice.gif) 0 0 no-repeat;}
#tabs-control	{ background: url(../function/images/bg_control.gif) 0 0 no-repeat;}
.clear_end {
	clear: both;
	background: url(../function/images/bg_main_end.gif) left bottom no-repeat;
	height: 30px;
	overflow: hidden;
}


/* List Type */
.iconListTop,
.iconListBtm {
	display: block;
	margin: 0 auto;
}
.iconListTop li,
.iconListBtm li  {
	width: 120px;
	letter-spacing: 0;
	display: block;
	padding-bottom: 20px;
	overflow: hidden;
	float: left;
}
.iconListTop li img,
.iconListBtm li img {
	width: 68px;
	height: 68px;
	display: block;
	margin: 0 auto;
}


/* --------------------------------------------------
   Function Box
-------------------------------------------------- */

/* Basic */
#tabs-basic .iconListTop		{ width: 720px;}
#tabs-basic .iconListBtm		{ width: 840px;}

/* Choice */
#tabs-choice .iconListTop		{ width: 720px;}
#tabs-choice .iconListBtm		{ width: 600px;}

/* Control */
#tabs-control .iconListTop li,
#tabs-control .iconListBtm li {
	width: 100px;
}
#tabs-control .iconListTop li.tit_icon img,
#tabs-control .iconListBtm li.tit_icon img {
	width: 80px;
	height: 81px;
}
#tabs-control .iconListTop		{ width: 900px;}
#tabs-control .iconListBtm		{ width: 600px;
padding-left: 107px;
}




/* ===========================================================================
   Layout */



/* --------------------------------------------------
   Function Box
-------------------------------------------------- */

.function_inBox {
	background: url(../img_common/line_dot.gif) center bottom repeat-x;
}
.function_inBox .row,
.function_inBox_end .row {
	background: url(../function/images/line_dot_h.gif) center top repeat-y;
}

/* Layout */
.detailBox,
.detailBox_r {
	width: 437px;
	padding: 60px 0;
}
.detailBox {
	float: left;
}
.detailBox_r {
	float: right;
}


/* --------------------------------------------------
   Title
-------------------------------------------------- */

.function_inBox .row h3,
.function_inBox_end .row h3 {
	width: 437px;
	height: 82px;
	display: block;
	margin-bottom: 30px;
	text-indent: -9999px;
}
.function_inBox .row h4,
.function_inBox_end .row h4 {
	font-size: 1.5em;
	text-align: center;
	line-height: 1.3em;
	margin-bottom: 0.8em;
}


/* --------------------------------------------------
   Image Type
-------------------------------------------------- */

.imgType01,
.imgType02,
.imgType03 {
	display: block;
}
.imgType01	{ text-align: center;}
.imgType02	{ float: left;}
.imgType03	{ float: right;}


/* --------------------------------------------------
   Box Type
-------------------------------------------------- */

/* Box - Main */
.boxType00 {
	padding-top: 90px;
	float: right;
}
.function_inBox .row .boxType00 h4 {
	text-align: left;
}


/* Box 1-2-3 */
.boxType01 {
	padding-top: 20px;
}
.boxType02,
.boxType03 {
	width: 200px;
	padding-top: 40px;
}
.function_inBox .row .boxType02 h4,
.function_inBox .row .boxType03 h4 {
	text-align: left;
}
.boxType02	{ float: right;}
.boxType03	{ float: left;}


/* Att */
.function_inBox small {
	font-size: 0.75em;
	color: #666666;
	line-height: 1.4em;
	display: block;
	padding-top: 1em;
}











/* ===========================================================================
   Function Type */



/* --------------------------------------------------
   Basic
-------------------------------------------------- */

#basic_function h2 {
	height: 73px;
	background: #399fcd url(../function/images/tit_basic.gif) center 25px no-repeat;
	text-indent: -9999px;
	padding: 40px 0 20px 0;
}

/* Title */
#function01 h3 { background: url(../function/images/tit_basic01_push.gif) center top no-repeat;}
#function02 h3 { background: url(../function/images/tit_basic02_cover.gif) center top no-repeat;}
#function03 h3 { background: url(../function/images/tit_basic03_news.gif) center top no-repeat;}
#function04 h3 { background: url(../function/images/tit_basic04_coupon.gif) center top no-repeat;}
#function05 h3 { background: url(../function/images/tit_basic05_shere.gif) center top no-repeat;}
#function06 h3 { background: url(../function/images/tit_basic06_sns.gif) center top no-repeat;}
#function07 h3 { background: url(../function/images/tit_basic07_birthday.gif) center top no-repeat;}
#function08 h3 { background: url(../function/images/tit_basic08_shop.gif) center top no-repeat;}
#function09 h3 { background: url(../function/images/tit_basic09_call.gif) center top no-repeat;}
#function10 h3 { background: url(../function/images/tit_basic10_photo.gif) center top no-repeat;}
#function11 h3 { background: url(../function/images/tit_basic11_menu.gif) center top no-repeat;}
#function12 h3 { background: url(../function/images/tit_basic12_access.gif) center top no-repeat;}
#function13 h3 { background: url(../function/images/tit_basic13_setup.gif) center top no-repeat;}

/* Catch Copy */
#function01 h4	{ color: #E89325;}
#function02 h4	{ color: #F3C51C;}
#function03 h4	{ color: #DC5434;}
#function04 h4	{ color: #63B862;}
#function05 h4	{ color: #62A334;}
#function06 h4	{ color: #1AA392;}
#function07 h4	{ color: #399FCD;}
#function08 h4	{ color: #0862A9;}
#function09 h4	{ color: #A20C79;}
#function10 h4	{ color: #D5B3D3;}
#function11 h4	{ color: #E796A1;}
#function12 h4	{ color: #DB5361;}
#function13 h4	{ color: #6A3E30;}

/* Function01 - Push */
#function01 {
	padding-bottom: 1px;
}
#imgFunction_push,
#imgFunction_push img {
	width: 618px;
	display: block;
}
#imgFunction_push {
	background: #FFF;
	padding-bottom: 50px;
	float: left;
}
#function01 .boxType00 {
	width: 366px;
	padding-bottom: 40px;
}
#function01 h3 {
	width: 366px;
	margin-bottom: 60px;
}



/* --------------------------------------------------
   Choice
-------------------------------------------------- */

#choice_function h2 {
	height: 73px;
	background: #399fcd url(../function/images/tit_choice.gif) center 25px no-repeat;
	text-indent: -9999px;
	padding: 40px 0 20px 0;
}

/* List */
#functionChoiceList {
	width: 1000px;
	margin: 40px auto;
}

/* Title */
#function14 h3 { background: url(../function/images/tit_choice01_recommend.gif) center top no-repeat;}
#function15 h3 { background: url(../function/images/tit_choice02_stamp.gif) center top no-repeat;}
#function16 h3 { background: url(../function/images/tit_choice03_web.gif) center top no-repeat;}
#function17 h3 { background: url(../function/images/tit_choice04_friend.gif) center top no-repeat;}
#function18 h3 { background: url(../function/images/tit_choice05_reservation.gif) center top no-repeat;}
#function19 h3 { background: url(../function/images/tit_choice06_hospital.gif) center top no-repeat;}
#function20 h3 { background: url(../function/images/tit_choice07_mycollection.gif) center top no-repeat;}
#function21 h3 { background: url(../function/images/tit_choice08_body.gif) center top no-repeat;}
#function22 h3 { background: url(../function/images/tit_choice09_school.gif) center top no-repeat;}
#function23 h3 { background: url(../function/images/tit_choice10_favorite.gif) center top no-repeat;}
#function24 h3 { background: url(../function/images/tit_choice11_movie.gif) center top no-repeat;}

/* Catch Copy */
#function14 h4	{ color: #F3C51C;}
#function15 h4	{ color: #E89325;}
#function16 h4	{ color: #DC5434;}
#function17 h4	{ color: #63B862;}
#function18 h4	{ color: #62A334;}
#function19 h4	{ color: #1AA392;}
#function20 h4	{ color: #0862A9;}
#function21 h4	{ color: #A20C79;}
#function22 h4	{ color: #D5B3D3;}
#function23 h4	{ color: #E796A1;}
#function24 h4	{ color: #DB5361;}

/* Function14 - Push */
#function14 {
	padding-bottom: 1px;
}
#imgFunction_reccomend,
#imgFunction_reccomend img {
	width: 618px;
	display: block;
}
#imgFunction_reccomend {
	background: #FFF;
	float: left;
}
#function14 .boxType00 {
	width: 366px;
}
#function14 h3 {
	width: 366px;
	margin-bottom: 60px;
}




/* --------------------------------------------------
   Control
-------------------------------------------------- */

#control_function h2 {
	height: 73px;
	background: #2b2b2b url(../function/images/tit_control.gif) center 25px no-repeat;
	text-indent: -9999px;
	padding: 40px 0 20px 0;
}
#control_function h3 {
	color: #FFF;
	text-align: center;
	font-size: 1.6em;
	line-height: 1em;
	background: #34aadc;
	padding: 14px 0;
}

/* Icon */
#control_function .detailBox,
#control_function .detailBox_r {
	width: 460px;
	padding: 20px 0;
}
.icon_control,
.icon_control img {
	width: 71px;
	height: 82px;
	display: block;
	overflow: hidden;
}
.icon_control {
	float: left;
}

/* Title */
.controlBox {
	width: 370px;
	padding-top: 18px;
	float: right;
}
#control_function h4 {
	width: 308px;
	height: 49px;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
}
#control01 h4 { background: url(../function/images/tit_control01_shop.gif) 0 0 no-repeat;}
#control02 h4 { background: url(../function/images/tit_control02_top.gif) 0 0 no-repeat;}
#control03 h4 { background: url(../function/images/tit_control03_announce.gif) 0 0 no-repeat;}
#control04 h4 { background: url(../function/images/tit_control04_menu.gif) 0 0 no-repeat;}
#control05 h4 { background: url(../function/images/tit_control05_coupon.gif) 0 0 no-repeat;}
#control06 h4 { background: url(../function/images/tit_control06_shere.gif) 0 0 no-repeat;}
#control07 h4 { background: url(../function/images/tit_control07_birthday.gif) 0 0 no-repeat;}
#control08 h4 { background: url(../function/images/tit_control08_access.gif) 0 0 no-repeat;}
#control09 h4 { background: url(../function/images/tit_control09_stamp.gif) 0 0 no-repeat;}
#control10 h4 { background: url(../function/images/tit_control10_recommend.gif) 0 0 no-repeat;}
#control11 h4 { background: url(../function/images/tit_control11_movie.gif) 0 0 no-repeat;}
#control12 h4 { background: url(../function/images/tit_control12_school.gif) 0 0 no-repeat;}