@charset "utf-8";

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

DJ会員の退会手続きについて

---------------------------------------*/
/* CSS Document */

.column2R #main {
	float: none !important;
	width: auto !important;
}


#dj_wrapper {
	margin: 0 auto;
	width: 805px;
	margin-top:10px;
}

#dj_wrapper h2 {
	background: #4dcaee none repeat scroll 0 0;
    color: #fff;
    font-size: 140%;
    margin-bottom: 10px;
    padding: 5px 10px;
	margin-top:1em;
}
		

#dj_wrapper h3 {
	font-size: 130%;
	font-weight: bold;
	color: #FFF;
	background-color: #9C6;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	margin-bottom:20px;
	
}

#dj_wrapper ul {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
}


#dj_wrapper .triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 70px 0 70px;
	border-color: #ff0000 transparent transparent transparent;
	line-height: 0px;
	_border-color: #ff0000 #000000 #000000 #000000;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
	margin-top:15px;
	margin-bottom:15px;
	margin-left:100px;
}


.section {
	margin-bottom:30px;
}

#dj_wrapper .cancel_btn {
	background-color: #9C6;
	text-align: center;
	padding: 10px 0 4px;
    margin-bottom: 30px;
	box-shadow: 4px 4px 0 #ccc;
}
#dj_wrapper .cancel_btn:hover {
	opacity: 0.8;
	box-shadow: none;
	transform: translate(2px ,2px);
}
#dj_wrapper .cancel_btn a {
	font-size: 36px;
	font-weight: bold;
	color: #FFF;
	width: 100%;
	height: 100%;
	display: block;
	text-decoration: none;
}

@media screen and (max-width:479px){	
	#container {
		margin-bottom: 0px;
	}
	
	.column2R #main {
		width: 100%;
	}
	
	#dj_wrapper {
		width: auto;
	}
	
	#dj_wrapper .section p {
		margin-left: 2%;
		margin-right: 2%;
	}
#dj_wrapper .section img {
	max-width: 100%;
	height: auto;
}
	#dj_wrapper .cancel_btn {
	padding: 10px 0 4px;
		width: 94%;
		margin: 0 auto 20px;
}
#dj_wrapper .cancel_btn:hover {
	opacity: 1;
	box-shadow: 4px 4px 0 #ccc;
	transform: translate(0 ,0);
}
#dj_wrapper .cancel_btn a {
	font-size: 5vw;
}
}

/*----------------------------
　サービスプランテーブル
------------------------------*/
.listHead {
	background-color:#257ADA;
	color:#FFF;
	font-size:26px;
	font-weight:bold;
	padding:13px 30px;
}
.listHead2 {
	background-color:#257ADA;
	color:#FFF;
	font-size:22px;
	font-weight:bold;
	padding:13px 30px;
}

#s_plan td, th {
    border: 1px solid #cccccc;
    padding: 5px;
}
#s_plan th {
	font-weight:bold;
	text-align: center;
}
#s_plan td {
	line-height:1.5;
}

#black,
#green,
#blue,
#orange,
#pink,
#beige {
	color: #fff;
	line-height:1.5;
	padding:20px 5px;
}
#black {
    background-color: #000000;
}
#green {
    background-color: #1e9818;
}
#blue {
    background-color: #39f;
}
#orange {
    background-color: #f93;
}
#pink{
	background-color:#CC006B;
}
#beige{
	background-color:#996;
}
.koumoku {
	font-size:15px;
    background-color: #257ada;
}
.balloon {
    font-size: large;
}
#s_plan a {
	color: #ffffff;
}
@media screen and (max-width:479px){
	.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
	#s_plan {
		width: 100%;
	}
	#s_plan tr:first-of-type {
		display: none;
	}
	#s_plan tr:nth-of-type(odd) {
		margin-bottom: 20px;
	}
	#s_plan th, #s_plan td {
		display: block;
		width: 90%;
		margin: 0 auto;
		box-sizing: border-box;
	}
	#s_plan th {
		border-bottom: none;
	}
	#s_plan th:first-of-type {
		display: none;
	}
	#s_plan th:nth-of-type(n + 3){
		text-align: right;
		position: relative;
		padding-right: 12%;
		height: 62px;
	}
	#s_plan th:nth-of-type(n + 3)::before{
		position: absolute;
		top: 0;
		left: 0;
		color: #fff;
		font-size: 3.6vw;
		height: 100%;
		width: 46%;
		display: inline-flex;
		align-items: center;
		padding-left: 4%;
		white-space: pre;
		text-align: left;
	}
	#s_plan th:nth-of-type(3)::before{
		content: "シンプルプラン\A月額380円(+税)";
		background-color: #996;
	}
	#s_plan th:nth-of-type(4)::before{
		content: "タブレットプラン\A月額380円(+税)";
		background-color: #CC006B;
	}
	#s_plan th:nth-of-type(5)::before{
		content: "納得プラン\A月額680円(+税)";
		background-color: #1e9818;
	}
	#s_plan th:nth-of-type(6)::before{
		content: "満足プラン\A月額980円(+税)";
		background-color: #39f;
	}
	#s_plan th:nth-of-type(7)::before{
		content: "ゲーミング満足プラン\A月額980円(+税)";
		background-color: #000000;
	}
	#s_plan th:nth-of-type(8)::before{
		content: "とことん満足プラン\A月額1,580円(+税)";
		background-color: #f93;
	}
	#s_plan td {
		margin-bottom: 30px;
	}
	#s_plan a {
	font-size: 4vw;
}
	.flexCenter {
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.flexCenter .ml40 {
		margin-left: 0;
		margin-top: 20px;
	}
	.koumoku {
	padding: 10px 0;
}
}
/*-----------------------
　ご注意ください！
-----------------------*/

#dj_wrapper .attentionBox {
	width: 665px;
	border: 30px solid #CCC;
	padding: 40px;
	font-size: 16px;
	background-color: #FFF;
	color: #333;
}
@media screen and (max-width:479px){
	#dj_wrapper .attentionBox {
	width: 100%;
	box-sizing: border-box;
}
}

/*-----------------------
　装飾
-----------------------*/

.mt10 {
	margin-top:10px;
}
.mt20 {
	margin-top:20px;
}
.mt30 {
	margin-top:30px;
}
.mb20 {
	margin-bottom:20px;
}
.ml40 {
	margin-left:40px;
}

.kome {
	text-indent: -1em;
	padding-left: 1em;
}
.redB {
	font-weight: bold;
	color: #F00;
}
.underline {
	text-decoration: underline;
}
.font16b {
	font-size: 16px;
	font-weight: bold;
	padding-right:5px;
}

.font18b {
	font-size: 18px;
	font-weight: bold;
	padding-right:5px;
}

.font14 {
	font-size: 14px;
}
.font16 {
	font-size: 16px;
}
.txtCenter {
	text-align: center;
}











	

/* こっからしたはclearfix */

.clearfix:after {
	content: ".";  /* 新しい要素を作る */
	display: block;  /* ブロックレベル要素に */
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;/*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/*-------------------------------------
	ボックスが伸びるおまじない
---------------------------------------*/

.cl {
	display: inline-block;
}

.cl:after {
	content: "";
	display: block;
	clear: both;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}