@charset "utf-8";
/* CSS Document */

/*=======================================================

	DEX / MOU CSS 1.0
	ATHR : Assiette Ltd.
	DATE : 2014/05
	FILE : style.css
    ----------------------------
	BASE COLOR	: #2F90C7	(logo)


=========================================================*/


/*-------------------------------------
			ブロック
-------------------------------------*/

/* clearfix */
.fix, .box { zoom:1; }
.fix:after, .box:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }


.graybox {
	margin: 0 auto;
	padding: 20px;
	background: #F6F6F6;
	}

.graybox p {
	margin: 0;
	text-align: center;
	}

.graybox2 {
	margin-top: 10px;
	padding: 20px 20px;
	text-align: left;
	background: #F2F2F2;
	border: 1px dotted #CCC;
	}

.boxnote {
	margin: 0 auto;
	padding: 15px 40px;
	width: 100%;
	border: 5px solid #EFEFEF;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

.boxnote2 {
	padding: 15px 20px;
	width: 100%;
	color: #666;
	background: #F8F8F8;
	border: 1px solid #DDD;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}


/* フリーダイヤル */

.phone-call:before {
	content:"";
	margin: -40px 0 0 0;
	padding:0;
	width: 100%;
	height: 5px;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	border-top: 5px solid #2F90C7;
	}

.phone-call {
	margin: 80px auto 40px;
	padding: 30px;
	color: #4E85BD;
	font-size: 16px;
	text-align: center;
	position: relative;
	background: #E3F2FB;
	border-radius: 5px;
	}

.phone-call p {	margin: 0; }

.phone-call p:nth-of-type(2) {
	margin-top: 5px;
	padding-bottom: 12px;
	border-bottom: 1px solid #BAE0F5;
	}

.phone-call address {
	margin: 0;
	padding-top: 15px;
	color: #4D85BD;
	text-align:left;
	border-top: 1px solid #FFF;
	}

.phone-call address img {
	margin-right: 5px;
	}

.phone-call address a {
	color: #4D85BD;
	font-family: "Century Gothic", "Avenir Roman", Calibri, "Helvetica Light", Meiryo, Osaka, sans-serif;
	font-size: 28px;
	letter-spacing: 1px;
	}

.phone-call address small {
	margin-left: 20px;
	font-size: 14px;
	}

.phone-call address small a {
	margin-left: 10px;
	font-size: 16px;
	font-weight: bold;
	}

/*-------------------------------------
	テーブル関係 table（共通） 
-------------------------------------*/



/*-------------------------------------
		空間 margin padding
-------------------------------------*/

.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt25 { margin-top: 25px; }
.mt30 { margin-top: 30px; }
.mt35 { margin-top: 35px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }

.pt5 { padding-top: 5px; }
.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pt25 { padding-top: 25px; }
.pt30 { padding-top: 30px; }
.pt35 { padding-top: 35px; }
.pt40 { padding-top: 40px; }
.pt50 { padding-top: 50px; }


/*-------------------------------------
	テキスト関係（共通） 
-------------------------------------*/

/* カラー指定 */
.red01 { color: #DC8347; }
.red02 { color: #DC4333; }
.ygreen01 { color:#9C3; }

/* box内 */
.note { color: #DC8347; }
.ondes { color: #AAA;}


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

.point i {
	margin: 0 13px 0 0;
	padding: 3px 10px;
	color: #FFF;
	font-size: 12px;
	display: inline-block;
	background: #D1D387;
	border-radius: 4px;
	}

p.point {
	margin: 15px 0 15px;
	}

.point2 {
	padding-top:28px;
	width: 100px;
	height: 100px;
	color: #FFF;
	font-size: 16px;
	font-weight: bold;
	line-height: 120%;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	right: 15px;
	top: 10px;
	display: inline-block;
	border-radius: 50%;

    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);

	-moz-box-sizing: border-box;
	box-sizing: border-box;

	opacity: 0.8;
	}


/*-------------------------------------
	要素 + class
-------------------------------------*/


p.right {
	text-align: right;
	}

p.link a i,
ul.link a i {
	margin: 0 5px 0 0;
	padding: 0 0 0 2px;
	width: 14px;
	height: 14px;
	color: #FFF;
	font-size: 10px;
	font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace, "Arial Black", Gadget, sans-serif;
	text-align: center;
	line-height: 14px;
	display: inline-block;
	vertical-align: middle;
	border-radius: 7px;
	background: #2F90C7;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

p.link a:hover i,
ul.link a:hover i {
	opacity: 0.6;
	}

ul.link li { margin: 5px 0; line-height: 130%;}

p.small { font-size: 12px;}

/* error */
.error,
.complete {
	margin: 0 0 20px 0;
	padding: 15px 20px;
	width: 100%;
	color: #F33;
	line-height: 130%;
	display: block;
	background: #FFF9F9;
	border: 3px solid #FFE1E1;
	border-radius: 5px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

ul.error {
	list-style: disc;
	margin-bottom: 20px;
	padding: 20px 20px 20px 40px;
	}

ul.error li {
	margin: 5px 0;
	}

h1.user { color:#86AD2C; }
h1.shop { color:#734B9F;}


span.female {
	color: #F33;
	}

span.male {
	color: #36F;
	}

.swbg {
	padding: 20px 20px 20px 35px;
	color: #FFF;
	font-size: 20px;
	font-weight: normal;
	position: relative;
	background: url(/images/common/bg-TSlash-w.png) left top;
	border-radius: 5px;
	}

.swbg:after {
	content:'';
	height: 22px;
	position: absolute;
	left: 20px;
	top: 19px;
	border-left: 4px solid #FFF;
	}

.swbg small {
	margin-left: 10px;
	margin-bottom: 5px;
	font-size: 14px;
	vertical-align: middle;
	}

.swbg.green  { background: url(/images/common/bg-TSlash-w.png) left top, #92C54B;}
.swbg.green2   { background: url(/images/common/bg-TSlash-w.png) left top, #9C0;}
.swbg.yellow {	background: url(/images/common/bg-TSlash-w.png) left top, #EAC637;}
.swbg.blue   { background: url(/images/common/bg-TSlash-w.png) left top, #2F90C7;}
.swbg.blue2   { background: url(/images/common/bg-TSlash-w.png) left top, #09C;}
.swbg.orange   { background: url(/images/common/bg-TSlash-w.png) left top, #FC0;}
.swbg.purple   { background: url(/images/common/bg-TSlash-w.png) left top, #66C;}
.swbg.pink   { background: url(/images/common/bg-TSlash-w.png) left top, #F69;}


p.swbg { line-height: 1;}


/* ステップ */
.step {
	margin: 30px 0 0 0;
	list-style: none;
	}

.step li:not(:last-child) {
	margin-bottom: 20px;
	border-bottom: 1px dotted #CCC;
	}
.ki {
	text-align: center;
	display: block;
	line-height: 50px;
}


.step  h2 {
	margin-bottom: 10px;
	color: #09C;
	border-radius: 5px;
	}

.step i {
	margin-right: 15px;
	padding: 10px 15px;
	color: #FFF;
	display: inline-block;
	background: #CC0;
	border-radius: 5px;
	}


/* アスタリスク※のリスト */
.asterisk { margin-top: 15px; position: relative;}
.asterisk li:before {
	content: "※";
	position: absolute;
	left: 0;
	display: block;
	}

.asterisk li {
	margin: 5px 0 5px 15px;
	font-size: 12px;
	line-height: 140%;
	}
.sp50 {
	margin-top: 10px;
}
.callform {
	width: 90%;
	height: 30px;
	margin-bottom: 20px;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;

}
div .sp50 input {
	color: #FFFFFF;
	font-size: 16px;
	background-color: #FC1111;
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 15px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: 30px;
}





/*-------------------------------------
	メディアクエリー Media Queries
-------------------------------------*/

@media screen and (max-width: 959px){
	header { padding-bottom: 20px; height: auto;}
	header h1 img { margin-top: 20px; width: 30%; max-width: 100px; position: relative; }
	header h1 { padding-bottom: 15px; border-bottom: 3px solid #DAEBF5;}
	header nav { position: absolute; top: 5px;}
	header .search { width: auto; margin: 13px 0 0 0; padding: 10px 0 0 0; font-size: 12px; line-height: 130%; }

	#PortalLinks { width: 90%;}
	#PortalLinks ul { display: inherit;}
	#PortalLinks li { float: left; height: 30px;}
	#PortalLinks li a { padding: 5px 10px;}
	#PortalLinks li:nth-of-type(2) { width: auto;}	/* 楽天 */
	#PortalLinks li:nth-of-type(3) { width: auto;}	/* yahoo */
	#PortalLinks li:nth-of-type(4) { width: auto;}	/* mixi */
	#PortalLinks li:nth-of-type(8) { width: auto;}	/* ニコニコ */

	#Breadcrumbs p { line-height: 150%;  word-wrap: normal; word-break: keep-all; }

	#Container { width: 90%;}
	article { width: 100%; max-width: none;}
	dt { width: 20%; }
	dd { width: 80%; }

	.movie-list { width: 85%;}
	#RouteGuide .link { text-align: left;}

	aside { clear: both; float: none; padding-top: 20px; width:100%; min-width: inherit; border-top: 5px solid #2F90C7;}
	#RPR1, #ToMyPage { text-align: center;}

/* footer */
	#PageTop { position: relative; z-index: 999;}
	#PageTop p { right: 20px;}
	footer nav section { width: auto; }
	footer nav ul, footer nav form { min-height: inherit;}

	}

@media screen and (max-width: 770px){
	header .search { width: 50%;}
	header .search input[type="text"] { width: 60%;}
	header p i { margin-bottom: 5px;}

	#Manual div .left { margin-right: 0; padding-right: 10px; max-width: 100%; -moz-box-sizing: border-box; box-sizing: border-box;}
	#Manual div .right { margin-left: 0; padding-left: 10px; max-width: 100%; -moz-box-sizing: border-box; box-sizing: border-box;}

	}

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

	header nav li a { font-size: 10px; padding: 0 3px;}
	header .search { float: none; width: 100%;}
	header .search input[type="text"] { width: 70%;}
	header #Manual { clear:both; float: none; margin: 10px 0 0 0; width: 100%; height: auto; display: block;}
	header #Manual ul { text-align: center;}

	#NewsTopics .tab-content li a { line-height: 140%;}
	.tab li a {	padding: 12px 5px 9px; min-width: 35px; font-size: 13px;}

	article h1, aside h2 { margin-bottom: 10px;}
	dl, dt, dd { font-size: 12px;}
	.PR, #Keyword { font-size: 12px; }
	.lbg li { word-wrap: break-word; word-break: break-all; }

/* 各ページ修正 */
	#Campaigns .point2 { display: none;}
	#Campaigns .step li,
	#Norikae .step li { padding-bottom: 5px; }
	#Campaigns .step,
	#Norikae .step { margin: 0;}
	#Campaigns .step i,
	#Norikae .step i { margin: 5px 10px 5px 0;}
	#Campaigns .step li:not(:last-child),
	#Norikae .step li:not(:last-child) { margin: 5px 0;}

	#Manual div h3 img { width: 80px; height: auto;}


/* aside */
	#RouteGuide { text-align: center;}
	#RouteGuide input[type=text] { width: 95px;}
	#RouteGuide label { display: block;}
	#RouteGuide label:nth-of-type(1) { margin-right: 0; margin-bottom: 5px;}
	#RouteGuide input[type=text] { width: 55%; margin-right: 5px;}
	#RouteGuide button { margin: 10px 0 0 0; width: 80%;}
	#RouteGuide .link { text-align: center;}

/* footer */
	.page-top { display: block;  position: relative;}
	.page-top a:before {
		content:'>';
		margin-right: 10px;
		color: #999;
		font-family: "Arial Black", Gadget, sans-serif;
		font-weight: bold;
		display: inline-block;
		transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform:rotate(-90deg);
		}
	}

@media screen and (max-width: 580px){
	header nav ul { text-align: left;}
	header #ManualLinks { margin-top: 10px; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box;}
	header #ManualLinks ul { text-align: left; -moz-box-sizing: border-box; box-sizing: border-box;}
	header #ManualLinks li { float: left; margin: 0; padding: 0 10px; width: auto; height: auto; -moz-box-sizing: border-box; box-sizing: border-box; display: block;}
	header #ManualLinks li a { padding: 0 5px 0 35px; -moz-box-sizing: border-box; box-sizing: border-box;}
	header #ManualLinks li:nth-of-type(1) { background-size: 30px auto; background-position: 10px top;}
	header #ManualLinks li:nth-of-type(2) {  background-size: 30px auto; background-position: 10px top;}
	
	.phone-call address img { width: 28px;}
	}

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

	header #ManualLinks li:nth-of-type(1) { width: 52%;}
	header #ManualLinks li:nth-of-type(2) { width: 48%;}

	article h1 { line-height: 130%;}
	article h2 { font-size: 15px; line-height: 130%;}
	article h3 { line-height: 130%;}
	table { font-size: 12px;}
	td,th { padding: 5px;}
	.swbg { padding: 8px 10px; font-size: 16px; border: none;}
	.swbg:after { display: none;}
	.lbg h3 { font-size: 14px;}
	.lbg li { font-size: 13px; }
	.phone-call { padding: 20px; font-size: 14px;}
	.phone-call address a { font-size: 18px; font-weight: normal;}
	.phone-call address small { margin: 10px 0 0; display: block;}
	.phone-call address small a { margin: 5px 0 0 0; font-size: 20px; font-weight: bold; display: block;}

/* コンテナ 下部マージン */
	#Service #Container,
	#Support #Container,
	#Norikae #Container,
	#Contact #Container,
	#Terms   #Container { margin-bottom: 0;}

/* header search 非表示 */
	#Service header .search,
	#Support header .search,
	#Norikae header .search,
	#Contact header .search,
	#Terms   header .search  { display: none;}

/* aside 非表示 */
	#Service aside,
	#Support aside,
	#Norikae aside,
	#Contact aside,
	#Terms   aside { display: none;}

/* 各ページ修正 */

	#Service .hikari h1 img { margin-right: 10px; width: 50px; height: auto;}
	#Service .hikari h1 small { top: -2px; font-size: 12px; }
	#Service .hikari h1 em { top: 14px; font-size: 15px; }
	#Service .hikari div:nth-of-type(2) { margin: 10px 0 0;}
	#Service .adsl h1 { font-size: 16px;}
	#Service .adsl table { display: none;}
	#Service .adsl .forS { display: block;}
	#Service #Others div { padding: 0; background-position: left top;}
	#Service #Others div h3 { padding: 5px 0 15px 100px; line-height: 140%;}
	#Service #Others div p { margin-top: 10px;}

	#Norikae article section:nth-of-type(1) h2 { font-size: 16px;}

	#Campaigns article input[type="text"] { width: 100%;}
	#Campaigns #Norikae th { width: 10%;}
	#Campaigns .sec h2 { font-size: 15px;}

	#Support article .contact p:nth-of-type(1) { text-align: left;}

	#Manual section:nth-of-type(1) div h3 { margin: 5px 0 10px;}
	#Manual section#mail h1,
	#Manual section#ftp h1 { margin-bottom: 10px;}
	#Manual div .left { padding-right: 5px; }
	#Manual div .right { padding-left: 5px; }

	#Contact #Complete section{ margin-bottom: 40px;}

	#Terms #Agreement .entry { margin: 0 20px 22px;}
	#Terms #Agreement .entry li { display: block; width: 100%;}
	#About article table th { min-width: 50px;}
	#Sitemap article ul li { margin: 3px 0; line-height: 130%;}
	#Error article section:nth-of-type(2) { display: none;}
	}

@media screen and (max-width: 380px){
	.openMenu { display: inherit;}
	.ac-navi { display: none;}

	#PortalLinks ul { margin-top: 20px;}
	#PortalLinks li { float: none; display: block; text-align: left;}
	#PortalLinks li a, #PortalLinks li:nth-of-type(1) a { padding: 2px 0; border: none; }
	#Searvice p.point { font-size: 12px;}

	#RPR1 img, #ToMyPage img { width: 100%;}
	}


/*-------------------------------------
			CSS end
-------------------------------------*/
.notation {
	font-size: 10px;
	margin-top: -25px;
	margin-left: 165px;
}
.atbox {
	width: 90%;
	height: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 15px;
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 15px;
	background-color: #FFFEE2;
	text-align: left;
	line-height: 130%;
	margin-right: auto;
	margin-left: auto;
}