@CHARSET "UTF-8";

/*********************************************************
* レイアウトブロック
*********************************************************/

html{
	font-family:"Helvetica","Arial",YuGothic,"Yu Gothic","Hiragino Sans","ヒラギノ角ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	font-size:15px;
	letter-spacing: 0.4px;
	color:#505050;
}
.material-icons{
	font-size:150%;
	position:relative;
	top:5px;
	margin-right:10px;
}

.n_font{
	font-family:"Quicksand","Avenir","Arial",YuGothic,"Yu Gothic","Hiragino Sans","ヒラギノ角ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

body{
	background:url(../../images_201809_update/background/body.gif) 0 0 repeat;
	background-size:9px 9px;
}
#wrapper{
	background:url(../../images_201809_update/background/wrapper.gif) 0 0 repeat-x;
	background-size:10px 7px;
	width:100%;
	min-width:1004px;
}
#container{
	width:1004px;
	margin:0 auto;
	text-align:left;
	overflow:hidden;
}
#side{
	float:right;
	width:240px;
	padding-bottom:40px;
}

#top #content{
	float:left;
	width:739px;
}

#sub #content{
	float:left;
	width:739px;
}
#content .top_content_left{
	width:336px;
	float:left;
}
#content .top_content_right{
	width:336px;
	float:right;
}

#top #main{
	padding:23px 23px 0px;
}
#sub #main{
	padding:35px 25px 0px;
}

#main{
	background-color:#ffffff;
	margin-bottom:50px;
	border-left:1px solid #ebeced;
	border-right:1px solid #ebeced;
	border-bottom:1px solid #ebeced;
	border-radius:0 0 5px 5px;
	-webkit-border-radius:0 0 5px 5px;
	-moz-border-radius:0 0 5px 5px;
	position:relative;
}

.div_padding{
	padding-right:25px;padding-left:25px;/* 【左右パディング】 */
}

/*********************************************************
* progress_all
*********************************************************/

#progress_all{
	width:641px;
	margin:0 auto;
	padding:0 0 25px 0;
	font-size:12px;
}
#progress_all .inner_box{
	background:url(../../images_201809_update/background/progress_all.png) 0 0 no-repeat;
	background-size:641px 105px;
	width:641px;
	height:105px;
	position:relative;
}
/* 【調整用】#sub #main ulにてmarginを設定しているため、それを取り消す */
#main #progress_all ul{
	margin:0;
}
#progress_all li{
	float:left;
	color:#3b3b3b;
	font-weight:bold;
	font-size:100%;
	line-height:1;
}
#progress_all li span{
	font-size:19px;
}
#progress_all li img{
	margin-top:-1px;
}
#progress_all .percentage{
	position:absolute;
	top:25px;
	left:35px;
}
#progress_all .percentage li{
	margin:0 12px 0 0;
	padding:0;
	background:none;
}
#progress_all .remain{
	position:absolute;
	top:25px;
	right:35px;
}
#progress_all .remain li{
	margin:0 0 0 12px;
	padding:0;
	background:none;
}
#progress_all .remain span.mr5{
	margin-right:5px;
}

/*--------------------------------------------------------
* progress_all 簿記のトップページ用
--------------------------------------------------------*/

/* オレンジ背景の吹き出し付 */
.top_progress_all{
	width:741px;
	height:45px;
	background:url(../../images_201809_update_boki3/background/top_progress_all.png) 0 0 no-repeat;
	background-size:739px 45px;
	position:relative;
}
.top_progress_all h2{
	position:absolute;
	top:12px;
	left:20px;
}

/*--------------------------------------------------------
* progress_all 簿記のトップページ用（各分野の進捗）
--------------------------------------------------------*/

.progress_box{
	background:url(../../images_201809_update/background/progress_box.png) center bottom no-repeat;
	background-size:336px 555px;
	width:336px;
	margin-bottom:22px;
	padding-bottom:25px;
	position:relative;
	font-size:12px;
}
.progress_box h2{
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	height:51px;
}
.progress_box .inner_box{
	width:292px;
	height:100px;
	margin:0 22px;
	position:relative;
}
.progress_box .inner_box li{
	float:left;
	color:#3b3b3b;
	font-weight:bold;
	line-height:1;
}
.meter_s{
	width:290px;
	position:relative;
	top:56px;
}
.progress_box .inner_box li span{
	font-size:16px;
}
.progress_box .inner_box li img{
	margin-top:-1px;
}
.progress_box .inner_box .percentage{
	position:absolute;
	top:22px;
	left:0px;
	vertical-align:bottom;
}
.progress_box .inner_box .percentage li{
	margin:0 8px 0 0;
}
.progress_box .inner_box .remain{
	position:absolute;
	top:22px;
	right:0px;
}
.progress_box .inner_box .remain li{
	margin:0 0 0 8px;
}
.progress_box .inner_box .progress_bar{
	height:22px;
	position:absolute;
	top:62px;
	left:18px;
}
.progress_box p{
	font-size:14px;
	margin:0 22px 0px 22px;
}
p.readmore_none{
	display:none;
}

/* .linkboxのdivにリンクを貼る */
.linkbox_hover{
	cursor:pointer;
}

/* トップページ 各ボックスのタイトル */
.progress_box #box_basic{background:url(../../images_201809_update_boki3/button/top_h2_basic.png) -1px 0 no-repeat;background-size:337px 51px;}
.progress_box #box_torihikitosiwake{background:url(../../images_201809_update_boki3/button/top_h2_torihikitosiwake.png) -1px 0 no-repeat;background-size:337px 51px;}
.progress_box #box_tyoubo{background:url(../../images_201809_update_boki3/button/top_h2_tyoubo.png) -1px 0 no-repeat;background-size:337px 51px;}
.progress_box #box_dennpyou{background:url(../../images_201809_update_boki3/button/top_h2_dennpyou.png) -1px 0 no-repeat;background-size:337px 51px;}
.progress_box #box_kessann{background:url(../../images_201809_update_boki3/button/top_h2_kessann.png) -1px 0 no-repeat;background-size:337px 51px;}
.progress_box #box_mosi{background:url(../../images_201809_update_boki3/button/top_h2_mosi.png) -1px 0 no-repeat;background-size:337px 51px;}
.progress_box #box_qa{background:url(../../images_201809_update_boki3/button/top_h2_qa.png) -1px 0 no-repeat;background-size:337px 51px;}

/* 簿記3級あれこれ */
.progress_box #box_qa ul{
	margin:16px 20px 0;/* 上下が18pxなのはliにpadding:4pxがあるため */
	font-size:14px;
}
.progress_box #box_qa li{
	border-bottom:1px dashed #dddddd;
	color:#279ed1;
	background-size:12px 1px;
	padding:4px 0;
}

.progress_box #box_qa li a{
	background:url(../../images_201809_update/list/link.png) 0px 5px no-repeat;background-size:10px 10px;
	padding:0 0 0 20px;
	display:block;
	text-decoration:none;
}

/*********************************************************
* メーター
*********************************************************/

.meter_l{
	width:569px;
	position:relative;
	top:61px;
	left:35px;
}

.meter{
	height:22px;
	background-color:#ffffff;
	background-size:10px 22px;
	border:1px solid #A5E1FF;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}
.meter > span{
	display:block;
	height:100%;
	-webkit-border-top-right-radius:0;
	-webkit-border-bottom-right-radius:0;
	-moz-border-radius-topright:0;
	-moz-border-radius-bottomright:0;
	border-top-right-radius:0;
	border-bottom-right-radius:0;
	-webkit-border-top-left-radius:2px;
	-webkit-border-bottom-left-radius:2px;
	-moz-border-radius-topleft:2px;
	-moz-border-radius-bottomleft:2px;
	border-top-left-radius:2px;
	border-bottom-left-radius:2px;

	-webkit-background-size:30px 30px;
	-moz-background-size:30px 30px;
	background-size:30px 30px;

	background-image:-webkit-linear-gradient(45deg, #E5F5FF 0%,#E5F5FF 25%, #B2E1FF 25%,
	          #B2E1FF 50%, #E5F5FF 50%, #E5F5FF 75%,
	          #B2E1FF 75%, #B2E1FF 100%);
	background-image:-moz-linear-gradient(45deg, #E5F5FF 0%,#E5F5FF 25%, #B2E1FF 25%,
	          #B2E1FF 50%, #E5F5FF 50%, #E5F5FF 75%,
	          #B2E1FF 75%, #B2E1FF 100%);
	background-image:-ms-linear-gradient(45deg, #E5F5FF 0%,#E5F5FF 25%, #B2E1FF 25%,
	          #B2E1FF 50%, #E5F5FF 50%, #E5F5FF 75%,
	          #B2E1FF 75%, #B2E1FF 100%);
	background-image:-o-linear-gradient(45deg, #E5F5FF 0%,#E5F5FF 25%, #B2E1FF 25%,
	          #B2E1FF 50%, #E5F5FF 50%, #E5F5FF 75%,
	          #B2E1FF 75%, #B2E1FF 100%);
	background-image:linear-gradient(45deg, #E5F5FF 0%,#E5F5FF 25%, #B2E1FF 25%,
	          #B2E1FF 50%, #E5F5FF 50%, #E5F5FF 75%,
	          #B2E1FF 75%, #B2E1FF 100%);

	-webkit-box-shadow:
	  inset 0 2px 9px  rgba(255,255,255,0.0),
	  inset 0 -2px 6px rgba(0,0,0,0.0);
	-moz-box-shadow:
	  inset 0 2px 9px  rgba(255,255,255,0.0),
	  inset 0 -2px 6px rgba(0,0,0,0.0);
	box-shadow:
	  inset 0 2px 9px  rgba(255,255,255,0.0),
	  inset 0 -2px 6px rgba(0,0,0,0.0);
	position:relative;
	overflow:hidden;
}

/*********************************************************
* index_table
*********************************************************/

.index_table{
	/* width:100%; */
	font-size:12px;
	margin-bottom:35px;
	margin-left:25px;
	margin-right:25px;
}
.index_table a{
	text-decoration:none;
	color:#505050;
}

/* th */

.index_table th{
	padding:0 5px 10px 5px;
	border-bottom:1px #eeeeee solid;
}
.index_table th img{
	vertical-align:middle;
	margin:0px 2px;
}
.index_table th.label_progress img{
	position:relative;
	left:13px;
}
.index_table th.label_learning_time_left img{
	position:relative;
	left:10px;
}

/* td */

.index_table td{
	border-bottom:1px #eeeeee solid;
	height:90px;
	cursor:pointer;
}
.index_table tr.myself td{
	cursor:auto;
}
.index_table td.number{
	font-size:19px;
	position:relative;
	top:-3px;
}
.index_table td.title{
	font-size:16px;
	padding-left:5px;
}

.index_table td.learning_time_left span{
	font-size:19px;
}

.index_table td div.now_learning{
	width:66px;
	padding:2px 7px;
	border-radius:5px;
	border:1px solid #2cb1ea;
	background-color:#2cb1ea;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	margin-right:auto;margin-left:auto;
	text-align:center;
	color:#ffffff;
	font-size:16px;
}

.index_list_tag_1{
	text-align:center;
}
.index_list_tag_2{
	text-align:center;
}
.index_list_tag_3{
	text-align:center;
}
.index_list_tag_4{
	text-align:center;
}
.index_list_tag_5_middle{
	text-align:center;
}
/* .index_list_tag_5_top{
	position:absolute;
	top:3px;
	left:398px;
	text-align:center;
}
.index_list_tag_5_bottom{
	position:absolute;
	top:46px;
	left:398px;
	text-align:center;
} */

/*********************************************************
* topic_path_box
*********************************************************/

.topic_path_box{
	background-color:#ffffff;
	line-height:24px;
	padding-top:6px;
	padding-bottom:6px;
	border:1px solid #62c9f5;
	border-radius:5px;
	margin-bottom:35px;
	padding-right:15px;padding-left:15px;/* 【左右パディング】 */
}
.topic_path:first-child:before{
	content: '\f015';
	margin: 0 12px 0 0;/* ホームアイコンの右マージンを調整してバランスを取る */
}
.topic_path:before{
	content: '\f0da';
	color:#2db9f5;
	vertical-align:top;
	display:inline-block;
	font-family: "Font Awesome 5 Free";
	font-weight:900;
	font-style:normal;
	font-size:20px;
	margin:0 10px 0 8px;
	-webkit-font-smoothing:antialiased;
}

/***************************************
* 前回学習日時、学習状況、残学習時間
****************************************/

.user_data_box{
	border:1px solid #eeeeee;
	padding:10px 10px 4px 10px;
	margin:0 0 25px 0;
}
.user_data_box dl{
	float:left;
	text-align:center;
}
.user_data_box dt{
	height:29px;
	margin-bottom:10px;
}
.user_data_box .user_data_box_last_learning{
	font-size:16px;
	margin-right:21px;
}
.user_data_box .user_data_box_status{
	margin-right:21px;
}
.user_data_box .user_data_box_learning_time_left{
	font-size:14px;
}
.user_data_box .user_data_box_learning_time_left span{
	font-size:21px;
	margin-right:5px;
}

/*--------------------------------------------------------
* タグ切り替えボタン
--------------------------------------------------------*/

div.tag_group{
	margin-bottom:5px;
}
div.tag_group div{
	position:relative;
	display:inline;
}
div.tag_group label{
	cursor:pointer;
	float:left;
	width:60px;
	height:57px;
	text-indent:-9899px;
}
div.tag_group div.tag_blue label{ background:url(../../images_201809_update/button/tag_blue_off.jpg) 0 0 no-repeat;background-size:100%;}
div.tag_group div.tag_yellow label{ background:url(../../images_201809_update/button/tag_yellow_off.jpg) 0 0 no-repeat;background-size:100%;}
div.tag_group div.tag_red label{ background:url(../../images_201809_update/button/tag_red_off.jpg) 0 0 no-repeat;background-size:100%;}
div.tag_group div.tag_white label{ background:url(../../images_201809_update/button/tag_white_off.jpg) 0 0 no-repeat;background-size:100%;}

div.tag_group div.tag_blue label:hover, div.tag_group div.tag_blue label.active{ background:url(../../images_201809_update/button/tag_blue_on.jpg) 0 0 no-repeat;background-size:100%;}
div.tag_group div.tag_yellow label:hover, div.tag_group div.tag_yellow label.active{ background:url(../../images_201809_update/button/tag_yellow_on.jpg) 0 0 no-repeat;background-size:100%;}
div.tag_group div.tag_red label:hover, div.tag_group div.tag_red label.active{ background:url(../../images_201809_update/button/tag_red_on.jpg) 0 0 no-repeat;background-size:100%;}
div.tag_group div.tag_white label:hover, div.tag_group div.tag_white label.active{ background:url(../../images_201809_update/button/tag_white_on.jpg) 0 0 no-repeat;background-size:100%;}

/*--------------------------------------------------------
* JS初期化データ
--------------------------------------------------------*/

div.javascript_initial_data{
	display:none;
}

/*--------------------------------------------------------
* Pタグ
--------------------------------------------------------*/

p{
	padding-bottom:35px;
	line-height:1.8;
	margin-right:25px;margin-left:25px;/* 【左右マージン】 */
}
p.right{
	text-align:right;
}
p.center{
	text-align:center;
}
p.image_title,
p.table_title,
p.list_title{
	padding-bottom:5px;
}

/*--------------------------------------------------------
* Strong、リスト、hr
--------------------------------------------------------*/

strong{
	font-weight:bold;
	font-size:100%;
	color:#000000;
	background:rgba(0, 0, 0, 0)
	linear-gradient(transparent 60%, #f9d8a9 0%) repeat scroll 0 0;/* 32,98 */
}
span.bold{
	font-weight:bold;
	font-size:100%;
	color:#000000;
}

#main span.list_mark{
	padding-right:10px;
	font-weight:bold;
}

hr{
	border:none;
	background:url(../../images_201809_update/hr/dotted_orange.gif) 0 0 repeat-x;
	background-size:16px 2px;
	height:2px;
	margin:0 0 35px 0;
	margin-right:25px;margin-left:25px;/* 【左右マージン】 */
}

/*--------------------------------------------------------
* h2
--------------------------------------------------------*/

#sub h2{
	color:#000;
	font-size:24px;
	font-weight:bold;
	height:40px;
	width:739px;
	padding:13px 0 2px 65px;
}

#basic h2{ background:url(../../images_201809_update_boki3/background/h2_010_basic.png) 0 0 no-repeat;background-size:739px 55px;}
#torihikitosiwake h2{ background:url(../../images_201809_update_boki3/background/h2_020_torihikitosiwake.png) 0 0 no-repeat;background-size:739px 55px;}
#dennpyou h2{background:url(../../images_201809_update_boki3/background/h2_030_dennpyou.png) 0 0 no-repeat;background-size:739px 55px;}
#tyoubo h2{ background:url(../../images_201809_update_boki3/background/h2_040_tyoubo.png) 0 0 no-repeat;background-size:739px 55px;}
#kessann h2{ background:url(../../images_201809_update_boki3/background/h2_050_kessann.png) 0 0 no-repeat;background-size:739px 55px;}
#mosi h2{ background:url(../../images_201809_update_boki3/background/h2_060_mosi.png) 0 0 no-repeat;background-size:739px 55px;}
#qa h2{ background:url(../../images_201809_update_boki3/background/h2_070_qa.png) 0 0 no-repeat;background-size:739px 55px;}
#information h2{
	background:url(../../images_201809_update_boki3/background/h2_999_information.png) 0 0 no-repeat;
	background-size:739px 55px;
}

/*--------------------------------------------------------
* h3
--------------------------------------------------------*/

h3{
	position:relative;
	font-weight:bold;
	font-size:24px;
	line-height:36px;
	color:#000000;
	border-bottom:1px #eeeeee solid;
	margin-bottom:35px;
	margin-right:25px;margin-left:25px;/* 【左右マージン】 */
}
h3 div.difficulty_image{
	position:absolute;
	bottom:5px;
	right:0px;
}

/*--------------------------------------------------------
* h4
--------------------------------------------------------*/

h4{
	position:relative;
	font-weight:bold;
	font-size:20px;
	color:#000000;
	line-height:36px;
	border-bottom:1px #eeeeee solid;
	margin-bottom:35px;
	margin-right:25px;margin-left:25px;/* 【左右マージン】 */
}

/*--------------------------------------------------------
* リンク
--------------------------------------------------------*/

a{
	color:#279ed1;
	text-decoration:none;
}

/*--------------------------------------------------------
* リストタグ
--------------------------------------------------------*/

/* none */

#main ul{
	margin-bottom:35px;
	margin-right:25px;margin-left:25px;/* 【左右マージン】 */
}
#main ul li{
	list-style-type:none;
	margin-bottom:10px;
}

/* disc */

#main ul.ul_disc{
	margin-right:25px;margin-left:45px;/* 【左右マージン】 */
}
#main ul.ul_disc li{
	padding:0;
	list-style:disc;
}
#main ul.ul_disc li.none{
	list-style:none;
}


/* checked_sp_sky */

ul.ul_checked_sp_sky{
	margin-right:25px;margin-left:25px;/* 【左右マージン】 */
}
ul.ul_checked_sp_sky li{
	padding-left:25px;
	background:url(../../images_201809_update/list/checked_sp_sky.png) 0 0 no-repeat;
	background-size:18px 18px;
}
ul.ul_checked_sp_sky li.none{
	list-style:none;
}

/* checked_sp_orange */

ul.ul_checked_sp_orange{
	margin-right:25px;margin-left:25px;/* 【左右マージン】 */
}
ul.ul_checked_sp_orange li{
	padding-left:25px;
	background:url(../../images_201809_update/list/checked_sp_orange.png) 0 0 no-repeat;
	background-size:18px 18px;
}
ul.ul_checked_sp_orange li.none{
	list-style:none;
}

/* OL */

#main ol{
	margin-bottom:35px;
	margin-right:25px;margin-left:49px;/* 【左右マージン】 */
}
#main ol li{
	margin-bottom:10px;
	list-style:decimal;
}

/*--------------------------------------------------------
* テーブルタグ
--------------------------------------------------------*/

table{
	border-collapse:collapse;
	margin-right:auto;margin-left:auto;
	width:calc(100% - 50px);/* 【左右パディング】 */
	margin-bottom:35px;
}
td{
	padding:10px;
	background-color:white;
}
td.center{
	text-align:center;
}
td.right{
	text-align:right;
}
td.yellow{
	background-color:#fffae5;
}

p.table_caption{
	margin-bottom:5px;
}



table.table_sp_sky td.header{/* leftとなっているがスマホ版では中央寄せ */
	text-align:center;
	background-color:#eaf8ff;
}
table.table_sp_sky td{
	border:1px solid #2db9f5;
}

table.table_sp_orange td.header{/* leftとなっているがスマホ版では中央寄せ */
	text-align:center;
	background-color:#fff1dd;
}
table.table_sp_orange td{
	border:1px solid #f7a531;
}



table.table_gray td.header{/* leftとなっているがスマホ版では中央寄せ */
	text-align:center;
	background-color:#eeeeee;
}
table.table_gray td{
	border:1px #dddddd solid;
}



table.table_list td{
	padding:5px 5px;
	border:none;
}

/*--------------------------------------------------------
* 画像タグ
--------------------------------------------------------*/

/* はみ出てはいけない */
img{
	margin:0;
	max-width:100%;
	height:auto;
}
/* センター */
div.image_center{
	margin-bottom:35px;
	margin-right:25px;margin-left:25px;/* 【左右マージン】 */
	text-align:center;
}
/* センター */
div.image_center.image_main{
	margin-bottom:25px;
}

/*--------------------------------------------------------
* 例題・問題ボックス
--------------------------------------------------------*/

.question_box div.caption{
	float:left;
	font-size:20px;
	font-weight:normal;
	vertical-align:bottom;
	padding:10px 0px;
	margin-bottom:5px;

}
.question_box div.button_clear{
	color:#2cb1ea;
	border:1px solid #dddddd;
	background-color:#ffffff;
	cursor:pointer;
	padding:10px 20px;
	border-radius:24px;/* オーバーしているが問題無し */
	text-align:center;
	float:right;
}
button{
	font-size:17px;
}
button.button_answer_without_check{
	display:inline;
	color:#d87f4e;
	border:1px solid #2cb1ea;
	background-color:#ffffff;
	font-weight:bold;
	color:#2cb1ea;
	cursor:pointer;
	padding:15px 40px;
	border-radius:35px;/* オーバーしているが問題無し */
	margin-bottom:35px;
}
button.button_answer_with_check{
	display:inline;
	border:1px solid #ea9c2e;
	background-color:#ffffff;
	font-weight:bold;
	color:#ea9c2e;
	cursor:pointer;
	padding:15px 20px;
	border-radius:35px;/* オーバーしているが問題無し */
	text-align:center;
	margin-bottom:35px;
}
div.table_margin{
	width:100%;
	padding-right:25px;padding-left:25px;/* 【左右パディング】 */
}


table.selection_table{
	clear:both;
	table-layout:fixed;
	margin-bottom:25px;
}
table.selection_table td{
	text-align:center;
	padding:15px 2px;
	border:solid 1px #dddddd;
	cursor:pointer;
}
table.input_answer_table{
	clear:both;
	table-layout:fixed;
	margin-bottom:25px;

}
table.input_answer_table th{
	position:relative;
	text-align:center;
	padding:10px 2px;
	border:1px solid #dddddd;
}
table.input_answer_table td{
	text-align:center;
	padding:15px 2px;
	border:1px solid #dddddd;
	cursor:pointer;
}
table.input_answer_table th.orange{ background:#f9dfbb;}
table.input_answer_table th.yellow{ background:#f9efbb;}
table.input_answer_table td.orange{ background:#fff4e5;}
table.input_answer_table td.yellow{ background:#fffae5;}


.input_answer_table th{
	text-align:center;
	padding:10px 5px;
	border:1px solid #ccc;
}
.input_answer_table td.focused_t{
	border-bottom:2px solid #ea9c2e;
}
.input_answer_table td.focused_a{
	border-bottom:2px solid #eacb2e;
}
#batu{
	position:absolute;
	top:-28px;
	left:-48px;
	display:none;
}
#maru{
	position:absolute;
	top:-28px;
	left:-48px;
	display:none;
}

div.javascript_initial_data{
	display:none;
}

/*--------------------------------------------------------
* 動画対応
--------------------------------------------------------*/

/*********************************************************
* その他 ユーザーインターフェース考慮
*********************************************************/


/* 薄青の枠を消す */
button,input,textarea{
	outline:0;
}

/*********************************************************
 ここからコピー
*********************************************************/


/*--------------------------------------------------------
 アイコン
--------------------------------------------------------*/

i{
	margin-right: 0.4em;/* アイコンと右の文字にマージン */
}
i.sentence{
	margin-left: 0.4em;/* アイコンと左の文字にもマージン */
}

/*--------------------------------------------------------
border_box
--------------------------------------------------------*/

div#main div.border_box{
	position: relative;
	margin-top: 40px;/* タイトルの位置を-10するため、前の要素とのマージンを40px（30 + 10）取る。 */
	margin-bottom: 35px;
	margin-left: 25px;
	margin-right: 25px;
	padding: 25px 25px 0px 25px;/* padding-topはタイトルの分だけ5px余裕を持たせる */
	border-radius: 20px;
}
div#main div.border_box div.title{
	position: absolute;
	top: -10px;
	left: 10px;
	padding: 0 10px;
	background: #ffffff;
	font-size: 18px;
	line-height: 1;
	font-weight: bold;
}
/* 色違い */
div#main div.border_box.sp_sky{
	border: solid 2px #2db9f5;
}
div#main div.border_box.sp_orange{
	border: solid 2px #ea9c2e;
}
div#main div.border_box.dashed.sp_sky{
	border: dashed 3px #2db9f5;
}
div#main div.border_box.dashed.sp_orange{
	border: dashed 3px #ea9c2e;
}
div#main div.border_box.sp_sky div.title,
div#main div.border_box.sp_sky i{
	color: #2db9f5;
}
div#main div.border_box.sp_orange div.title,
div#main div.border_box.sp_orange i{
	color: #ea9c2e
}
div#main div.border_box.sp_sky strong{
	background:rgba(0, 0, 0, 0)
	linear-gradient(transparent 60%, #a3def7 0%) repeat scroll 0 0;/* 34,97 */
}
div#main div.border_box.sp_orange strong{
	background:rgba(0, 0, 0, 0)
	linear-gradient(transparent 60%, #efc283 0%) repeat scroll 0 0;/* 45,94 */
}
div#main div.border_box.sp_sky a{
	color:#279ed1;
}
div#main div.border_box.sp_orange a{
	color:#d87f4e;
}
div#main div.border_box.sp_sky ul.ul_disc.link{
	color:#279ed1;
}
div#main div.border_box.sp_orange ul.ul_disc.link{
	color:#d87f4e;
}
div#main div.border_box.sp_sky hr{
	height:2px;
	border-top:3px dashed #2db9f5;
	background:none;
}
div#main div.border_box.sp_orange hr{
	height:2px;
	border-top:3px dashed #ea9c2e;
	background:none;
}

/* margin、padding調整 */
div#main div.border_box p{
	margin-right:0px;
	margin-left:0px;
	padding-bottom: 25px;/* Pタグだけはpadding_bottomで管理しているため */
}
div#main div.border_box ul,
div#main div.border_box ol,
div#main div.border_box div.image_center,
div#main div.border_box table,
div#main div.border_box hr{
	margin-right:0px;
	margin-left:0px;
	margin-bottom:25px;
}
div#main div.border_box ul.ul_disc{
	margin-left:20px;
}
div#main div.border_box ol{
	margin-left:24px;
}
div#main div.border_box table{
	width:100%;
}

/*--------------------------------------------------------
background_box
--------------------------------------------------------*/

div#main div.background_box{
	padding: 20px 25px 0px 25px;
	overflow: hidden;/* 子要素のmargin-bottomを有効化させるために必要 */
	margin-bottom: 35px;
	margin-left:25px;
	margin-right:25px;
	border-radius: 20px;
}
div#main div.background_box div.title{
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

/* 色違い */
div#main div.background_box.sp_sky{
	background-color: #eaf8ff;
}
div#main div.background_box.sp_orange{
	background-color: #fff1dd;
}
div#main div.background_box.sp_sky div.title,
div#main div.background_box.sp_sky i{
	color: #2db9f5;
}
div#main div.background_box.sp_orange div.title,
div#main div.background_box.sp_orange i{
	color: #ea9c2e
}
div#main div.background_box.sp_sky strong{
	background:rgba(0, 0, 0, 0)
	linear-gradient(transparent 60%, #a3def7 0%) repeat scroll 0 0;/* 34,97 */
}
div#main div.background_box.sp_orange strong{
	background:rgba(0, 0, 0, 0)
	linear-gradient(transparent 60%, #efc283 0%) repeat scroll 0 0;/* 45,94 */
}
div#main div.background_box.sp_sky a{
	color:#279ed1;
}
div#main div.background_box.sp_orange a{
	color:#d87f4e;
}
div#main div.background_box.sp_sky ul.ul_disc.link{
	color:#279ed1;
}
div#main div.background_box.sp_orange ul.ul_disc.link{
	color:#d87f4e;
}
div#main div.background_box.sp_sky hr{
	height:2px;
	border-top:3px dashed #2db9f5;
	background:none;
}
div#main div.background_box.sp_orange hr{
	height:2px;
	border-top:3px dashed #ea9c2e;
	background:none;
}

/* margin、padding調整 */
div#main div.background_box p{
	margin-right:0px;
	margin-left:0px;
	padding-bottom: 25px;/* Pタグだけはpadding_bottomで管理しているため */
}
div#main div.background_box ul,
div#main div.background_box ol,
div#main div.background_box div.image_center,
div#main div.background_box table,
div#main div.background_box hr{
	margin-right:0px;
	margin-left:0px;
	margin-bottom:25px;
}
div#main div.background_box ul.ul_disc{
	margin-left:20px;
}
div#main div.background_box ol{
	margin-left:24px;
}
div#main div.background_box table{
	width:100%;
}

/*********************************************************
* トップページ用の切り替えボタン
*********************************************************/

div#main div.button_box{
	margin: 0 auto;
	padding-right:25px;
	padding-left:25px;
	font-size: 17px;
}
@media only screen and (min-width: 375px) and (max-width: 737px){/* iPhone6以上iPad未満 */
	div#main div.button_box{
		font-size: 16px;
	}
}
@media only screen and (max-width: 374px){/* iPhone5 */
	div#main div.button_box{
		font-size: 13px;
	}
}
div#main div.button_box ul{
	margin-left: 0;/* デフォルトでは20pxなので */
	margin-right: 0;
	text-align: left;
}
div#main div.button_box ul li{
	width: 31%;
	padding: 0px;
	box-shadow: 0 2px 4px rgba(0,0,0,.25);
	display: inline-block;
	border-radius: 5px;
	cursor: pointer;
}
div#main div.button_box ul li.selected{
	box-shadow: 0 1.5px 3px rgba(0,0,0,.25);
	cursor: auto;
}
div#main div.button_box ul li.disabled{
	box-shadow: none;
	cursor: auto;
}
div#main div.button_box ul li div{
	color: #ffffff;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
	padding: 10px 0;
	border-radius: 5px;
}

/*--------------------------------------------------------
sp_sky
--------------------------------------------------------*/

div#main div.button_box.sp_sky ul li div{
	background-color: #2db9f5;
}
div#main div.button_box.sp_sky ul li.selected div{
	background-color: #1f7fa8;
}

/*--------------------------------------------------------
3個ボタン
--------------------------------------------------------*/

div#main div.button_box.three ul li{
	width: 32%;
}

div#main div.button_box.three ul li:nth-child(3n+1){
	margin-right: 1%;
	margin-left: 0%;
}
div#main div.button_box.three ul li:nth-child(3n+2){
	margin-right: 1%;
	margin-left: 1%;
}
div#main div.button_box.three ul li:nth-child(3n+3){
	margin-right: 0%;
	margin-left: 1%;
}



















/*********************************************************
* User
*********************************************************/

button.button_user{
	display:inline;
	border:1px solid #2cb1ea;
	background-color:#ffffff;
	font-weight:bold;
	color:#2cb1ea;
	cursor:pointer;
	padding:15px 20px;
	border-radius:5px;/* オーバーしているが問題無し */
	margin-bottom:35px;
}
input{
	border: 1px solid #dddddd;
}

/*--------------------------------------------------------
* ユーザー仮登録・パスワード再設定・ご登録情報
--------------------------------------------------------*/

p.logout{
	margin-right:0px;
	margin-left:0px;
	text-align:center;
}

.register_form_table{
	width:688px;
	margin:0 auto 35px;
	border-top:1px solid #dddddd;
}
.register_form_table tr{
	border-bottom:1px solid #dddddd;
}
.register_form_table th{
	background:#fff9f2;
	padding:12px;
	font-weight:bold;
	text-align:center;
	width:150px;
}
.register_form_table th.th_delete_user{
	background:#ffe8e8;
	padding:12px;
	font-weight:bold;
	text-align:center;
	width:150px;
}

.register_form_table td.value{
	padding:12px;
	width:260px;
}
.register_form_table td input.save_button{
	cursor:pointer;
	margin-top:12px;
	padding:2px 10px;
}
.register_form_table td input.cancel_button{
	cursor:pointer;
	margin-top:12px;
	margin-left:12px;
	padding:2px 10px;
}
.register_form_table td.detail{
	padding:6px;
	width:278px;
	color:#404040;
	font-size:90%;
}
.register_form_table td.detail span.public{
	color:#f06060;
}
.register_form_table td.detail span.private{
	color:#6060f0;
}
.register_form_table td.detail a.edit{
	cursor:pointer;
}

.register_form_table td.information_mail{
	padding:12px;
	width:538px;
}
.register_form_table td p.error{
	font-size:85%;
	color:red;
	margin:12px 0 0px 0 !important;
	width:250px;
}
.register_form_table td p.info{
	font-size:85%;
	color:blue;
	margin:12px 0 0px 0 !important;
	width:250px;
}
.register_form_table td input.textfield{
	width:240px;
	padding:5px;
}
.register_form_table td span.explain{
	margin-left:1em;
	font-size:100%;
}
.register_form_table td.td_delete_user{
	background:#fff8f8;
}

/* 編集部分の非表示 */

.register_form_table tr#edit_nickname_row{
	display:none;
}
.register_form_table tr#edit_password_row{
	display:none;
}
.register_form_table tr#edit_information_mail_row{
	display:none;
}
.register_form_table tr#edit_delete_user_row{
	display:none;
}


/*--------------------------------------------------------
* ログイン・パスワードを忘れた
--------------------------------------------------------*/

.simple_form_table{
	width:450px;
	margin:0 auto 35px;
	border-top:1px solid #dddddd;
}

.simple_form_table tr{
	border-bottom:1px solid #dddddd;
}
.simple_form_table th{
	background:#fff9f2;
	padding:12px;
	font-weight:bold;
	text-align:center;
	width:190px;
}
.simple_form_table td.value{
	padding:12px;
	width:260px;
}
.simple_form_table td input.textfield{
	width:250px;
	padding:5px;
}
.simple_form_table tr.auto_login{
	border-bottom:none;
}
.simple_form_table td span.explain{
	margin-left:1em;
	font-size:100%;
}
div.simple_form_error{
	text-align:center;
	margin:0px auto 35px auto;
	background-color:#ffe8e8;
	padding:10px 10px 10px 10px;
	width:320px;
	font-size:85%;
	color:red;
	border-radius:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
}

/*********************************************************
* adsense
*********************************************************/

.adsense{
	margin-right:auto;
	margin-left:auto;
	background-color:#ddd;
	margin-bottom:35px;
}
.adsense_bb{
	margin-right:auto;
	margin-left:auto;
	width:728px;
	height:90px;
	background-color:#ddd;
	margin-bottom:35px;
}
.adsense_ws{
	width:160px;
	height:600px;
	background-color:#ddd;
	margin: 0 0 10px 35px;
}
.adsense_br_left{
	width:336px;
	height:280px;
	background-color:#ddd;
	margin:0 0 35px 0;
	float:left;
}
.adsense_br_right{
	width:336px;
	height:280px;
	background-color:#ddd;
	margin:0 0 35px 0;
	float:right;
}
.adsense_br_top{
	width:336px;
	height:280px;
	background-color:#ddd;
	margin-bottom:25px
}