@charset "utf-8";

.only_960,  
.only_720, 
.only_sp { 
	display: none; 	
}

/********************************************************************
 over 960px 
*********************************************************************/
@media screen and (min-width: 960px) { 


br.only_960, 
span.only_960 { 
	display: inline; 	
}
tr.only_960 { 
	display: table-row; 
}
div.only_960, 
ul.only_960, 
dl.only_960, 
dt.only_960, 
dd.only_960, 
p.only_960,
img.only_960 { 
	display: block; 	
}


}/* !end @media */


/********************************************************************
 over_720px_(tablet) 
*********************************************************************/

@media screen and (max-width: 959px) { 


br.only_720, 
span.only_720 { 
	display: inline; 	
}
tr.only_720 { 
	display: table-row; 
}
div.only_720, 
ul.only_720, 
dl.only_720, 
dt.only_720, 
dd.only_720, 
p.only_720,
img.only_720 { 
	display: block; 	
}

}/* !end @media */


/********************************************************************
 over SP 
*********************************************************************/

@media screen and (max-width: 719px) { 

.only_960,  
.only_720 { 
	display: none !important; 	
}
br.only_sp, 
span.only_sp { 
	display: inline; 	
}
tr.only_sp { 
	display: table-row; 
}
div.only_sp, 
ul.only_sp, 
dl.only_sp, 
dt.only_sp, 
dd.only_sp, 
p.only_sp,
img.only_sp { 
	display: block; 	
}

/****************************************************
 common_style_elements 
*****************************************************/

/*****************************
 unit_form 
******************************/

/* !structure */

.unit_form {
	margin: 0 auto 2em;
	width: 96%;
}
.block_form {
	width: 100%;
}
.block_form .fieldset {
	display: block;
}
.block_form .legend {
	display: block;
	width: 100%;
	line-height: 1.6em;
}
.block_form .legend .wrap {
	display: block;
	font-size: 1rem;
}
.block_form .body {
	display: block;
	padding: 1em 0 1em 1em;
	width: 100%;
	border-left: none;
	white-space: normal;
}
.block_form .body .wrap {
	max-width: 100%;
}

/* !parts */

select {
	margin-bottom: 0.5em;
	max-width: 66%;
	line-height: 1em;
	font-size: 1rem;
}
textarea, 
input[type="text"], 
input[type="password"], 
input[type="number"], 
input[type="email"],
input[type="tel"] { 
	margin-bottom: 0.5em;
	font-size: 1rem;
}
input[type="radio"] {
	-webkit-appearance: none;
	-webkit-transform: scale(1);
	position: relative;
	margin-right: 5px;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	border-radius: 12px;
	border: 2px solid #4c4c4c;
	box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-ms-box-sizing: border-box; 
	width: 24px;
	height: 24px;
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#fdfdfd),
		to(#d1d1d1)
	);
}
input[type="radio"]:checked {
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#353535),
		to(#8f8f8f)
	);
}
input[type="radio"]:checked:before {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	margin: -5px 0 0 -5px;
	-webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 1);
	content: "";
	border-radius: 5px;
	width: 10px;
	height: 10px;
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#fdfdfd),
		to(#d1d1d1)
	);
}
input[type="checkbox"] {
	-webkit-appearance: none;
	-webkit-transform: scale(1);
	position: relative;
	margin-right: 5px;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	border-radius: 6px;
	border: 2px solid #4c4c4c;
	box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-ms-box-sizing: border-box; 
	width: 24px;
	height: 24px;
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#fdfdfd),
		to(#d1d1d1)
	);
}
input[type="checkbox"]:checked {
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#353535),
		to(#8f8f8f)
	);
}
input[type="checkbox"]:checked:before {
	position: absolute;
	left: 1px;
	top: 17px;
	display: block;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 1);
	content: "";
	width: 10px;
	height: 4px;
	background: #FFFFFF;
	-webkit-transform: rotate(45deg);
	-webkit-transform-origin: right center;
}
input[type="checkbox"]:checked:after {
	display: block;
	position: absolute;
	left: 9px;
	top: 17px;
	content: "";
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 1);
	width: 19px;
	height: 4px;
	background: #FFFFFF;
	-webkit-transform: rotate(-53deg);
	-webkit-transform-origin: left center;
}


/****************************************************
 tricks 
*****************************************************/

/*****************************
 others 
******************************/

/* !fixed */
.fixed { 
}

/****************************************************
 common_layout_containers 
*****************************************************/

div#container { 
	padding-bottom: 1080px; 
}
.footer_min div#container { 
	padding-bottom: 120px; 
}
div.content_unit_wrapper { 
	box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	-ms-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	padding: 12px 2%; 
	width: 100%; 
}
div.content_unit_wrapper > p, 
div.content_unit_wrapper > ul, 
div.content_unit_wrapper > dl, 
div.content_unit_wrapper > ol, 
div.content_unit_wrapper > table { 
	padding-left: 2%; 
}
div.content_unit_wrapper.column_wrap { 
	width: 100%; 
}
.content_unit_wrapper.column_wrap div.column_1 { 
	padding: 0px 2%; 
	width: 96%; 
}
.content_unit_wrapper.column_wrap div.column_2, 
.content_unit_wrapper.column_wrap div.column_3 { 
	padding: 0px 2%; 
	width: 96%; 
}
div.column_1 > div, 
div.column_2 > div, 
div.column_3 > div { 
	padding-left: 2%; 
}
div.column_1 > div h1, 
div.column_1 > div h2, 
div.column_1 > div h3, 
div.column_2 > div h1, 
div.column_2 > div h2, 
div.column_2 > div h3, 
div.column_3 > div h1, 
div.column_3 > div h2, 
div.column_3 > div h3 { 
	margin-left: -2%; 
}

/*****************************
 globalnavi 
******************************/

#globalnavi ul { 
	width: 100%; 
}
#globalnavi li {
	width: 20%;
	height: 44px; 
	line-height: 44px; 
	font-size: 0.8rem; 
}
#globalnavi li a i { 
	margin-right: 0; 
}
#globalnavi li.navi_logoff {
	font-size: 0.75rem;
	letter-spacing: -.05em;
}

/*****************************
  footer
******************************/

div#footer { 
	margin-top: -1040px; 
	height: 1040px;
}
.footer_min div#footer { 
	margin-top: -96px; 
	height: 96px;
}
#footer .content_unit_wrapper {
	padding: 2em 0 0; 
	width: 100%;
}
#footer div.box {
	display: block; 
	padding: 0px 2% 24px;
	width: 96%;
}
#footer .wrapper_main { 
	height: auto; 
}
#footer h2#link_to_top {
	display: block; 
	margin: 24px 0 0; 
	text-align: center; 
}
.footer_min #footer h2#link_to_top {
	margin: 0 0 1em; 
	line-height: 1.4;
}
#footer #copyright {
	display: block; 
	margin: 24px 0 0; 
	padding: 0; 
}
.footer_min #footer #copyright {
	margin: 0 0 1em; 
	padding-top: 1.25em;
	line-height: 1.4;
}

/****************************************************
 common_style_elements 
*****************************************************/

h2 { 
	padding: 12px 0px 0.75em; 
	font-size: 1.25rem; 
}
h3 { 
	padding: 12px 0px 0.5em; 
	font-size: 1rem; 
}

/*****************************
 functions 
******************************/

.banner_to_entry { 
	display: none; 
}
.content_unit.unit_to_entry img { 
	width: 100%; 
	height: auto; 
}

/* !unit_to_entry */

.unit_to_entry div.content_unit_wrapper.column_wrap { 
	width: 100% !important; 
	height: auto !important; 
}

/****************************************************
 top 
*****************************************************/
div#top_header { 
	height: auto; 
}
div#top_header .content_unit_wrapper { 
	width: 100%; 
	height: auto; 
	background: no-repeat; 
}
#top_header	h1 { 
	z-index: 10; 
	position: relative; 
	margin-bottom: -3em; 
	line-height: 1.2; 
	font-size: 0.6rem; 
}
div#top_header .content_unit_wrapper div { 
	position: relative; 
	display: block; 
	padding: 0; 
}
div#top_header .content_unit_wrapper img { 
	position: relative; 
	display: block; 
	width: 100%; 
}

/*****************************
 top_users 
******************************/

div#top_users { 
	background-size: 640px 128px; 
	border-bottom: 10px solid rgb(88,74,74); 
}
#top_users div.content_unit_wrapper { 
	height: 330px; 
}
#top_users div.content_unit_wrapper_ex { 
	background-size: 720px 60px; 
}
#top_users h2 { 
	padding: 4px 0 0; 
	font-size: 1.5rem; 
}
#top_users p { 
	margin-bottom: 1.2rem; 
	font-size: 1.2rem; 
	line-height: 1.4; 
}


/*****************************
 top_features 
******************************/

div.top_features { 
	height: auto; 
	background-size: contain !important; 
	border-bottom: 10px solid rgb(88,74,74); 
}
.top_features div.content_unit_wrapper { 
	height: auto; 
}
.top_features h2 { 
	padding: 12px 0px 1em 2%; 
	height: auto; 
	font-weight: bold; 
}
.top_features h2 a { 
	height: auto; 
	line-height: 36px; 
	text-align: left; 
}
.top_features p.detail { 
}

/* !event */

div.top_features.event { 
	padding-bottom: 72px; 
	background-image: url(../images/common/top_features_event_sp.png); 
}
div.top_features.event p.detail { 
	padding-right: 50%; 
	padding-left: 2%; 
	height: 240px; 
	width: 48%; 
	font-size: 1rem; 
	background-image: url(../images/ja_JP/common/top_features_event_detail_sp.png); 
	background-size: auto 240px; 
	background-repeat: no-repeat; 
	background-position: right top; 
}

/* !file_photo */

div.top_features.photo_folder { 
	padding-bottom: 96px; 
	text-align: left; 
	background-image: url(../images/common/top_features_photo_folder_sp.png); 
}
div.top_features.photo_folder p.detail { 
	padding-right: 2%; 
	padding-left: 50%; 
	height: 240px; 
	width: 48%; 
	font-size: 1rem; 
	background-image: url(../images/ja_JP/common/top_features_photo_folder_detail_sp.png); 
	background-size: auto 200px; 
	background-repeat: no-repeat; 
	background-position: -180px top; 
}

/* !bbs_tweet */

div.top_features.bbs_tweet { 
	padding-bottom: 72px; 
	background-image: url(../images/common/top_features_bbs_tweet_sp.png); 
}
div.top_features.bbs_tweet p.detail { 
	padding-right: 2%; 
	padding-left: 50%; 
	height: 240px; 
	width: 48%; 
	font-size: 1rem; 
	background-image: url(../images/ja_JP/common/top_features_bbs_tweet_detail_sp.png); 
	background-size: auto 240px; 
	background-repeat: no-repeat; 
	background-position: left top; 
}

/* !mail */

div.top_features.mail { 
	padding-bottom: 144px; 
	text-align: left; 
	background-image: url(../images/common/top_features_mail_sp.png); 
}
div.top_features.mail p.detail { 
	padding-right: 50%; 
	padding-left: 2%; 
	height: 240px; 
	width: 48%; 
	font-size: 1rem; 
	background-image: url(../images/ja_JP/common/top_features_mail_detail_sp.png); 
	background-size: auto 240px; 
	background-repeat: no-repeat; 
	background-position: right top; 
}

/* !funclist */

.top_features.funclist ul.func_list { 
	margin: 0 auto 24px; 
	width: 100%; 
	background: none; 
}
.top_features.funclist .func_list li { 
	width: 33%; 
	background-color: white; 
}
div.content_unit.top_users_case img { 
	width: 100%; 
	height: auto; 
}
div.content_unit.top_users_case h2 { 
	font-weight: bold; 
}

/* !top_ex_contents */

.top_ex_contents div.content_unit_wrapper { 
	width: 100%; 
}
.top_ex_contents ul { 
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	border-bottom: 1px solid rgb(224,224,224);
}
.top_ex_contents ul li { 
	display: block;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	margin: 0;
	width: 100%;
	letter-spacing: normal;
	border-left: 1px solid rgb(224,224,224);
	border-top: 1px solid rgb(224,224,224);
	overflow: hidden; 
}
.top_ex_contents li.apps { 
	width: 100%;
}
.top_ex_contents .pics img { 
	box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-ms-box-sizing: border-box; 
	width: 100%; 
}
.top_ex_contents li p.pics { 
	float: left; 
	margin: 0; 
	width: 33%; 
	border: none; 
}
.top_ex_contents li p.pics.apps img { 
	border: none; 
	margin-bottom: 0; 
}
.top_ex_contents li div.detail { 
	float: left; 
	width: 66%; 
	border: none; 
}
.top_ex_contents li p.title { 
	padding: 1em 0 0; 
	font-weight: bold; 
}
.top_ex_contents li p.caption { 
	padding: 0.5em 1em; 
	text-align: left; 
}

/*****************************
 top_news 
******************************/

.top_news table { 
	width: 100%; 
}
.top_news table th, 
.top_news table td { 
	padding: 0.5em; 
	line-height: 26px; 
	vertical-align: top; 
}
.top_news table td i { 
	margin-top: -3px; 
}

/****************************************************
 func_common 
*****************************************************/

#func_list .content_unit { 
	border-bottom: 10px solid rgb(88,74,74); 
}
#func_list h2.func_title { 
	padding-top: 44px; 
	padding-bottom: 0.5em; 
	width: 100%; 
}
#func_list p.func_description { 
	margin-bottom: 0; 
}
#func_list div.func_detail_list { 
	box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	-ms-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	padding: 0 0 0 2%; 
	width: 100%; 
}
#func_list div.func_detail_screens { 
	padding: 0 0 0 2%; 
	width: 100%; 
}
#func_list div.func_detail_screens li { 
	margin: 4px 2%; 
	width: 29%; 
}
#func_list div.func_detail_screens li img { 
	width: 100%; 
	height: auto; 
}
#func_list .to_page_top { 
	padding-top: 12px; 
}
#func_list #func_ind_group.content_unit { 
	border: none; 
}
#func_list .content_unit.unit_to_entry { 
	margin-top: 24px; 
	border: none; 
}

/*****************************
 func_list_box(icons) 
******************************/

.func_list_box ul.func_list { 
	margin: 12px auto; 
	width: 100%; 
	border-top: 1px solid rgb(230,230,230); 
	background-color: white; 
}
.func_list_box .func_list li { 
	width: 33%; 
	padding-top: 0; 
	height: 72px; 
}
.func_list_box .func_list p.icon { 
	display: inline-block; 
	padding: 6px; 
	width: 32px; 
}
.func_list_box .func_list p.title { 
	width: 100%; 
	line-height: 1.2; 
	font-size: 0.75rem; 
	font-weight: normal; 
}
.func_list_box .func_list li p.caption { 
	display: none; 
}

/****************************************************
 faq 
*****************************************************/

.content_unit_wrapper > ul.faq_list { 
	padding: 0 0 2em;
}
.faq_list li { 
	font-size: 1rem;
}

/****************************************************
 loginform 
*****************************************************/

#loginform div#login_notice { 
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin: 0 2%; 
	padding: 0.5em; 
	width: 96%; 
}
#login_box .login_table td input[type="text"],
#login_box .login_table td input[type="password"] {
	font-size: 1rem;
}
#loginform h3, 
#loginform #login_box h3, 
#loginform #login_notice h3 { 
	margin-bottom: 1em;
	padding: 0; 
	font-weight: bold;
	font-size: 1rem;
	border-bottom: none; 
}
#loginform #login_box h3, 
#loginform #login_notice h3 { 
	padding-top: 1em;
	color: #8fc00e;
	border: none; 
}

/* !account_view */
#login_box .account_info .circle_logo {
	padding-right: 1em;
	width: 33%;
}
#login_box .account_info .circle_logo img {
	max-width: 100%;
	max-height: 100%;
	line-height: 100%;
}

/****************************************************
 inquire 
*****************************************************/

/* faq */
.faq_list.inquire { 
	margin-bottom: 0;
}

/****************************************************
 switchAuth 
*****************************************************/

#switch_auth_display p.create_new_account {
	padding-right: 0;
	text-align: center;
}
#switch_auth_display div#account_box { 
	width: 50%;
}
#switch_auth_display #account_box ul { 
	margin: 4%; 
	padding: 1em 0 0;
}
#switch_auth_display #account_box:nth-child(even) ul {
	margin-left: 0;
}
#switch_auth_display #account_box:nth-child(odd) ul {
	margin-right: 0;
}
#switch_auth_display #account_box li { 
}
#switch_auth_display #account_box li.circle_logo {
	margin-bottom: 0.5em;
	padding-bottom: 0;
	width: auto;
	height: 120px;
	max-height: none;
}
#switch_auth_display #account_box .circle_logo img { 
	width: auto;
	height: auto;
	max-width: 100%; 
	max-height: 100%; 
	line-height: 120px; 
}
#switch_auth_display #account_box li.user_icon_name { 
	padding: 0;
	background-color: white;
	border-top: 1px solid rgb(216,216,216); 
}
#switch_auth_display #account_box .user_icon_name .user_icon { 
	width: 25%; 
	height: auto;
	line-height: auto; 
	vertical-align: middle; 
	text-align: right; 
	overflow: hidden; 
	letter-spacing: -.40em; 
}
#switch_auth_display #account_box .user_icon_name .user_icon img { 
	display: inline-block; 
	*display: inline; 
	*zoom: 1; 
	max-width: 25%; 
	max-height: 100%; 
	line-height: auto; 
	vertical-align: middle; 
	letter-spacing: normal; 
}
#switch_auth_display #account_box .user_icon_name .user_name { 
	line-height: 100%;
	font-weight: bold;
}
#switch_auth_display #account_box .delete_account a {
	background-color: rgb(232, 98, 49);
}

/****************************************************
 plan 
*****************************************************/
/*****************************
 new 
******************************/

table.plan_new_20120201 { 
	padding-left: 0 !important;
}
table.plan_new_20120201 th,
table.plan_new_20120201 td { 
	padding: 0.5em 0.25em; 
	font-size: 0.6rem;
}

/****************************************************
 yahoo_to_circle_square 
*****************************************************/

#yahoo_to_circle_square table th,
#yahoo_to_circle_square table td {
	width: 25%;
}
#yahoo_to_circle_square .head_usage_list li {
	float: none;
	margin-bottom: 24px;
	width: 80%;
	text-align: left;
}
#yahoo_flow img {
	width: 80%;
	height: auto;
}
#yahoo_flow .pc img {
	width: 100%;
}

}/* !end @media */