@charset "utf-8";
/*
@import url("jquery.fs.boxer.css");
@import url("slick.css");
*/

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

/*要素のフォントサイズやマージン・パディングをリセットしています*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/*行の高さをフォントサイズと同じにしています*/

body {
	line-height: 1;
}

/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/

/*nav ul {
  list-style:none;
  }*/

ol, ul {
	list-style: none;
}

/*引用符の表示が出ないようにしています*/

blockquote, q {
	quotes: none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */

ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/

mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

/*テキストに打ち消し線が付くようにしています*/

del {
	text-decoration: line-through;
}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}

/*縦方向の揃え位置を中央揃えに指定しています*/

input, select {
	vertical-align: middle;
}

/*画像を縦に並べた時に余白が出ないように*/

img {
	vertical-align: top;
	font-size: 0;
	line-height: 0;
}

/*box-sizingを全ブラウザに対応*/

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

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

.none {
	display: none;
}

/* 表示フォントの設定 */

body {
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
}

@media all and (-ms-high-contrast:none) {
	body {
		font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		/* 游ゴシックがずれるので、IE11は除外する */
	}
}

.mincho {
	font-family: "Roboto Slab", Garamond, "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

a:hover {
	opacity: 0.9;
}

button {
	cursor: pointer;
	border: none;
}

button:focus {
	outline: 0;
}

.pc {
	display: inherit;
}

.sp {
	display: none;
}

.pcshow {
	display: inline-block;
}
input{
	color:#333;
}
input::placeholder ,
input:-ms-input-placeholder ,
input::-ms-input-placeholder
{
	color: #ccc;
}

@media(max-width:640px), (orientation: portrait) {
	/* 640以下で */
	.pc {
		display: none;
	}
	.sp {
		display: inherit;
	}
	.pcshow {
		display: none;
	}
}

/* 点滅 */

.blinking {
	-webkit-animation: blink 1s ease-in-out infinite alternate;
	-moz-animation: blink 1s ease-in-out infinite alternate;
	animation: blink 1s ease-in-out infinite alternate;
}

@-webkit-keyframes blink {
	/*
    0% {opacity:.5;}
	100% {opacity:1;}
	*/
	0% {
		color: #000000;
	}
	100% {
		color: var(--main-basecolor3);
	}
}

@-moz-keyframes blink {
	/*
    0% {opacity:.5;}
	100% {opacity:1;}
	*/
	0% {
		color: #000000;
	}
	100% {
		color: var(--main-basecolor3);
	}
}

@keyframes blink {
	/*
    0% {opacity:.5;}
	100% {opacity:1;}
	*/
	0% {
		color: #000000;
	}
	100% {
		color: var(--main-basecolor3);
	}
}

body {
	background-color: #ffffff;
	color: #000000;
	-webkit-text-size-adjust: 100%;
	/*
	-ms-user-select: none;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	*/
	/* responsiveを想定して固定しない*/
	/*
	position: fixed;
	top:0;
	left:0;
	*/
	overflow-y: scroll;
	overflow-x: scroll;
	-webkit-touch-callout: none;
	/* リンク長押しのポップアップを無効化 */
	/*-webkit-user-select: none;*/
	/* テキスト長押しの選択ボックスを無効化 */
	/*background-image:url("../images/tex0.png");*/
	overscroll-behavior: none;
	/* 
    「もうこれ以上スクロールができない」ことを表すインタラクション
    スクロールが親に伝播してしまう「スクロールチェーン」
    左右へのスワイプで行う履歴の前後ナビゲーション
	を禁止する
	*/
}

/* *********************************************** */

#pager {
	padding: 10px 0;
	text-align: center;
	font-size: 0;
}

#pager b {
	display: inline-block;
	color: #666666;
	font-size: 14px;
	line-height: 1;
	margin: 0 20px;
}

#pager a {
	display: inline-block;
	text-decoration: none;
	color: #666666;
	font-size: 14px;
	line-height: 1;
	margin: 0 20px;
}

/* *********************************************** */

.nologin header {
	width: 100%;
	height: 90px;
}

.nologin header .inner {
	width: 960px;
	margin: 0 auto;
}

.nologin header h1 {
	display: inline-block;
	vertical-align: top;
	margin: 22px 0 0 0;
}

.nologin header h1 a {
	border: none;
	text-decoration: none;
}

.nologin header img {
	border: none;
	width: 108px;
	height: auto;
}

.nologin header .head-menu {
	width: calc(100% - 145px);
	display: inline-block;
	vertical-align: top;
	margin: 30px 0 0 0;
	text-align: right;
}

.nologin header .head-menu ul {
	display: inline-block;
	vertical-align: middle;
	margin-right: 6px;
}

.nologin header .head-menu ul li {
	display: inline-block;
	vertical-align: middle;
	height: 60px;
}

.nologin header .head-menu ul li a {
	text-decoration: none;
	color: #666666;
	font-size: 14px;
}

.nologin header .head-menu ul li a span {
	padding: 13px 10px;
	display: inline-block;
	border-radius: 4px;
}

.nologin header .head-menu ul li:hover a span, .nologin header .head-menu ul li:active a span, .nologin header .head-menu ul li.current a span {
	background-color: #edf0f5;
}

.nologin header .head-menu .menu {
	display: inline-block;
	vertical-align: top;
	margin-left: 10px;
	width: 106px;
	border: 2px solid #5a6883;
	border-radius: 4px;
}

.nologin header .head-menu .menu.name{
	border: none;
	text-align: center;
}

.nologin header .head-menu .menu.name a{
	line-height: 40px;
	vertical-align: top;
	display: inline;
	background-color: #ffffff !important;
	color:#5a6883;
	background-image: url("../images/introduction/icon_login.png");
	background-position:right center;
	background-repeat: no-repeat;
	background-size:12px auto;
	padding-right:18px;
}
.nologin header .head-menu .menu.logout{
	margin-left: 26px;
}


.nologin header .head-menu .menu a {
	display: block;
	padding: 13px 0;
	text-decoration: none;
	text-align: center;
	color: #5a6883;
}

.nologin header .head-menu .menu.login a {
	background-color: #5a6883;
	color: #ffffff;
}

.nologin header .head-menu .menu:hover, .nologin header .head-menu .menu:active, .nologin header .head-menu .menu.current {
	border: 2px solid #5587e7;
}

.nologin header .head-menu .menu:hover a, .nologin header .head-menu .menu:active a, .nologin header .head-menu .menu.current a {
	background-color: #5587e7;
	color: #ffffff;
}
.nologin header .head-menu .menu.name:active,
.nologin header .head-menu .menu.name:hover
{
	border: none;
}
.nologin header .head-menu .menu.name a:active,
.nologin header .head-menu .menu.name a:hover
{
	border: none;
	background-color: #ffffff;
	color: #5a6883;
}


.nologin header #spmenu {
	display: none;
}

.nologin #contents {
	padding: 50px 0 0 0;
	width: 960px;
	margin: 0 auto;
}

.nologin .subpage #contents {
	padding: 60px 0 100px 0;
}



.nologin .breadcrumb{
	max-width:960px;
	display: block;
	margin:0 auto;
} 
.nologin .breadcrumb ul{
	padding:16px 0 0 0;
}
.nologin .breadcrumb ul li{
	color:#666666;
	font-size:12px;
	display: inline-block;
}
.nologin .breadcrumb ul li:after{
	content:">";
	color:#999999;
	font-size:12px;
	display: inline-block;
	padding-left:8px;
	margin-right:8px;
}
.nologin .breadcrumb ul li:last-of-type:after{
	content:"";
	display: none;
}
.nologin .breadcrumb ul li a{
	color:#999999;
	text-decoration: none;
}

.nologin footer {
	width: 100%;
	background-color: #e6eaf0;
	padding: 30px 0 20px 0;
}

.nologin footer ul {
	text-align: center;
	margin: 0 auto 30px auto;
}

.nologin footer ul li {
	display: inline-block;
	vertical-align: top;
	margin: 0 15px;
}

.nologin footer ul li a {
	color: #666666;
	display: inline-block;
	text-decoration: none;
}

.nologin footer .logo {
	display: block;
	margin: 0 auto 36px auto;
	width: 97px;
}

.nologin footer .logo img {
	width: 82px;
	height: auto;
}

.nologin footer .copyright {
	font-size: 11px;
	color: #666666;
	text-align: center;
}

.nologin #main {
	display: inline-block;
	width: 100%;
	padding: 0 50px;
}

.nologin #main.subpage {
	border-top: 1px solid #5a6883;
}

/* *********************************************** */

.nologin .login {
	/*width:400px;*/
	margin: 0 auto;
}

.nologin .login .start {
	margin: 0 auto 40px auto;
	text-align: center;
}

.nologin .login .start img {
	width: 108px;
	height: auto;
	margin: 0 auto 16px auto;
}

.nologin .login .start p {
	color: #5a6883;
	font-size: 19px;
	font-weight: lighter;
}


.nologin .login .guide.start{
	width: 400px;
	text-align:left;
}
.nologin .login .guide.start span{
	color:#999999;
}
.nologin .login .notice{
	width: 400px;
	text-align:left;
	margin:0 auto 40px auto;
	color:#5a6883;
	font-size:14px;
}

.nologin .login form {
	/*margin-bottom:40px;*/
	width: 400px;
	margin: 0 auto 40px auto;
}

.nologin .login dl dt {
	font-size: 14px;
	color: #333333;
	margin-bottom: 10px;
}

.nologin .login dl dd {
	margin-bottom: 30px;
}

.nologin .login dl dd input {
	border: 2px solid #cccccc;
	border-radius: 2px;
	font-size: 14px;
	padding: 16px 8px;
	width: 100%;
}

.nologin .login .permanence {
	padding: 18px 0;
	font-size: 16px;
	text-align: center;
	vertical-align: middle;
}

.nologin .login .permanence input {
	margin-right: 8px;
	width: 16px;
	height: 16px;
	transform: scale(1.2);
	vertical-align: middle;
}

.nologin .login button {
	margin: 18px auto 0 auto;
	font-size: 16px;
	color: #ffffff;
	background-color: #5a6883;
	width: 100%;
	padding: 22px 0;
	border-radius: 4px;
	border: none;
	line-height: 1;
}

.nologin .login button:hover, .nologin .login button:active {
	background-color: #5587e7;
}

.nologin .login a {
	color: #5587e7;
	text-decoration: none;
}

.nologin .login ul li {
	margin-bottom: 16px;
	text-align: center;
}

.nologin .login .newregister {
	padding: 24px 0;
	text-align: center;
}

.nologin .login .error {
	text-align: center;
	color: #ff0000;
	margin-bottom: 30px;
}

.nologin .login .guide {
	text-align: center;
	margin-bottom: 30px;
	font-size: 14px;
	line-height: 20px;
}



.nologin .login .step {
	margin: 0 auto;
	text-align: center;
}

.nologin .login .step .inner {
	display: inline-block;
	vertical-align: top;
}

.nologin .login .step .stepBar {
	display: flex;
	max-width: max-content;
	position: relative;
	text-align: center;
	margin-bottom: 80px;
}

.nologin .login .step .stepBar li {
	font-size: 14px;
	color: #5a6883;
	list-style: none;
	position: relative;
	width: 136px;
}

.nologin .login .step .stepBar li:after {
	background: #D0E1F9;
	content: "";
	width: calc(100% - 60px);
	height: 1px;
	position: absolute;
	left: calc(-50% + 30px);
	top: 22px;
}

.nologin .login .step .stepBar li:first-child:after {
	display: none;
}

.nologin .login .step .stepBar li span {
	font-size: 18px;
	border: 1px solid #5e6c86;
	background: #ffffff;
	color: #5a6883;
	display: inline-block;
	height: 42;
	margin-bottom: 5px;
	line-height: 42px;
	width: 42px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.nologin .login .step .stepBar .visited:after {
	background: #4D648D;
}

.nologin .login .step .stepBar .visited span {
	background: #e6eaf0;
}

.nologin .login .title {
	font-size: 18px;
	color: #333333;
	margin-bottom: 40px;
	text-align: center;
}



.select-plan {
	width: 960px;
	margin: 0 auto;
}

.plan-list li.plan-item {
	width: calc( ( 100% - 80px) / 3);
	display: inline-block;
	vertical-align: top;
	margin-right: 40px;
}

.plan-list li.plan-item:last-child {
	margin-right: 0;
}

.plan-list .planform {
	width: 100%;
}

.nologin .login .plan-item form {
	width: auto;
}

.plan-list li.plan-item input[type=radio] {
	display: none;
}

.plan-list li.plan-item label .plan .box {
	padding: 30px 20px;
	border: 1px solid #cccccc;
	margin-bottom: 15px;
}

.plan-list li.plan-item label .plan .box .name {
	font-size: 18px;
	color: #666666;
	margin-bottom: 30px;
}

.plan-list li.plan-item.standard label .plan .box .name {
	color: #7f99cb;
}

.plan-list li.plan-item.premium label .plan .box .name {
	color: #c59738;
}

.plan-list li.plan-item label .plan .box .desc {
	font-size: 14px;
	line-height: 20px;
	color: #666666;
	margin-bottom: 30px;
	text-align: left;
}

.plan-list li.plan-item label .plan .box .plan-content .max-items {
	display: inline-block;
	border-top: 1px solid #cccccc;
	margin-bottom: 30px;
	width: 100%;
}

.plan-list li.plan-item label .plan .box .plan-content .max-items li {
	padding: 10px 0;
	margin: 0;
	border-bottom: 1px solid #cccccc;
	font-size: 14px;
	line-height: 20px;
	color: #666666;
	text-align: left;
}

.plan-list li.plan-item.standard label .plan .box .plan-content .max-items li span {
	color: #7f99cb;
}

.plan-list li.plan-item.premium label .plan .box .plan-content .max-items li span {
	color: #c59738;
}

.plan-list li.plan-item label .plan .box .plan-content .fee {
	font-size: 18px;
	color: #666666;
}

.plan-list li.plan-item label .plan .box .plan-content .fee .month {
	font-size: 12px;
}

.plan-list li.plan-item.standard label .plan .box .plan-content .fee span {
	color: #7f99cb;
}

.plan-list li.plan-item.premium label .plan .box .plan-content .fee span {
	color: #c59738;
}

.plan-list li.plan-item label .plan .btn {
	background-color: #999999 !important;
	color: #ffffff !important;
	font-size: 16px !important;
	text-align: center !important;
	padding: 22px 0 !important;
	border-radius: 4px !important;
	width: 100% !important;
}

.plan-list li.plan-item label .plan .btn:hover, .plan-list li.plan-item label .plan .btn:active {
	/*.plan-list li.plan-item input:checked+label .plan .btn{*/
	background-color: #666666 !important;
}

.plan-list li.plan-item.standard label .plan .btn {
	background-color: #7f99cb !important;
}

.plan-list li.plan-item.standard label .plan .btn:hover, .plan-list li.plan-item.standard label .plan .btn:active {
	/*.plan-list li.plan-item.standard input:checked+label .plan .btn{*/
	background-color: #5273b3 !important;
}

.plan-list li.plan-item.premium label .plan .btn {
	background-color: #c59738 !important;
}

.plan-list li.plan-item.premium label .plan .btn:hover, .plan-list li.plan-item.premium label .plan .btn:active {
	/*.plan-list li.plan-item.premium input:checked+label .plan .btn{*/
	background-color: #c08306 !important;
}


.nologin .login table.regconfirm{
	border-collapse: collapse;
	width:600px;
	margin: 0 auto 60px auto;
}
.nologin .login table.regconfirm tr{
	
}
.nologin .login table.regconfirm tr th{
	color:#666666;
	padding:18px 0 18px 18px;
	text-align:left;
	width:150px;
	border:1px solid #c0cadd;
	background-color:#e6eaf0;
}
.nologin .login  table.regconfirm tr td{
	color:#000000;
	padding:18px 0 18px 18px;
	text-align:left;
	width:450px;
	border:1px solid #c0cadd;
}
.nologin .login  table.regconfirm tr td .lite{
	color:#666666;
}
.nologin .login  table.regconfirm tr td .standard{
	color:#7f99cb;
}
.nologin .login  table.regconfirm tr td .premium{
	color:#c59738;
}

.nologin .login .formregister2{
	width:600px;
	margin:0 auto;
}

.nologin .login .formregister2 .btnarea{
	text-align:center;
}
.nologin #contents .login .formregister2 .btnarea button{
	display: inline-block;
	width:270px;
}
.nologin #contents .login .formregister2 .btnarea button[name=back]{
	background-color:#ffffff;
	border:2px solid #5a6883;
	color:#5a6883;
	padding:18px 0;
}


.nologin .login .thanks {
	font-size: 18px;
	color: #5a6883;
	margin: 0 auto 40px auto;
	text-align: center;
}


.nologin .login .loginform{
	color: #ffffff;
	background-color: #5a6883;
	border-radius: 4px;
	font-size: 14px;
	padding: 20px 0;
	max-width: 400px;
	width: 100%;
	display: block;
	margin:0 auto;
	border: none;
	line-height: 1;
	text-align:center;
}

.nologin .login .loginform:hover, .nologin .login .loginform:active {
	background-color: #5587e7;
}



/* *********************************************** */

.login header {
	min-width: 1020px;
	width: 100%;
	height: 90px;
	background-color: #5a6883;
}

.login header h1 {
	display: inline-block;
	vertical-align: middle;
	margin: 25px 0 0 30px;
}

.login header h1 img {
	width: 90px;
	height: auto;
}

.login header .head-menu {
	width: calc(100% - 145px - 34px);
	display: inline-block;
	vertical-align: middle;
	margin: 30px 0 0 0;
	text-align: right;
	padding-right: 30px;
}

.login header .head-menu .menu {
	display: inline-block;
	margin: 0 9px 0 0;
	font-size: 14px;
	border-radius: 4px;
}

.login header .head-menu .name {
	color: #c0cadd;
}

.login header .head-menu .setting a {
	display: inline-block;
	color: #ffffff;
	text-decoration: none;
	padding: 8px 10px;
}

.login header .head-menu .inuqery a {
	display: inline-block;
	color: #ffffff;
	text-decoration: none;
	padding: 8px 10px;
}

.login header .head-menu .logout {
	margin: 0 0 0 11px;
	border: 1px solid #ffffff;
}

.login header .head-menu .logout a {
	display: inline-block;
	color: #c0cadd;
	text-decoration: none;
	padding: 8px 10px;
}

.login header .head-menu .setting:hover, .login header .head-menu .inuqery:hover, .login header .head-menu .logout:hover, .login header .head-menu .setting:active, .login header .head-menu .inuqery:active, .login header .head-menu .logout:active, .login header .head-menu .setting.current, .login header .head-menu .inuqery.current, .login header .head-menu .logout.current {
	background-color: #374051;
}

.login header .head-menu .logout:hover, .login header .head-menu .logout:active, .login header .head-menu .logout.current {
	border: 1px solid #374051;
}

.login #main {
	display: inline-block;
	width: 100%;
}

.login aside {
	display: inline-block;
	vertical-align: top;
	width: 220px;
	min-height: 310px;
	background-color: #c7d3d6;
	position: relative;
}

.login aside ul li:hover {
	background-color: #ffffff;
}

.login aside ul li:active, .login aside ul li.current {
	background-color: #ffffff;
	color: #edab05;
}

.login aside ul li a {
	display: inline-block;
	color: #c7d3d6;
	text-decoration: none;
	padding: 0 0 0 30px;
	width: 100%;
}

.login aside ul li a span {
	display: inline-block;
	padding: 23px 0 23px 30px;
	background-repeat: no-repeat;
	background-position: left center;
	color: #4a515f;
}

.login aside ul li.home a span {
	background-image: url("../images/icon_home.png");
	background-size: 18px 18px;
}

.login aside ul li.home.current a span {
	background-image: url("../images/icon_home_hover.png");
	color: #edab05;
}

.login aside ul li.keyword a span {
	background-image: url("../images/icon_list.png");
	background-size: 18px 18px;
}

.login aside ul li.keyword.current a span {
	background-image: url("../images/icon_list_hover.png");
	color: #edab05;
}

.login aside ul li.site a span {
	background-image: url("../images/icon_site.png");
	background-size: 22px 22px;
}

.login aside ul li.site.current a span {
	background-image: url("../images/icon_site_hover.png");
	color: #edab05;
}


.login aside ul li.corprate a span{
	background-image: url("../images/icon_top.png");
}


.login aside .sig {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
}


.login aside .copyright {
	width: 100%;
	font-size: 11px;
	color: #c0cadd;
	padding: 29.5px 0 29.5px 30px;
	background-color: #1d2637;
}

.login #contents {
	width: calc(100% - 220px);
	display: inline-block;
	vertical-align: top;
	padding: 35px 40px;
}

/* *********************************************** */

.login #contents button {
	color: #ffffff;
	background-color: #5a6883;
	border-radius: 4px;
	font-size: 14px;
	padding: 20px 0;
	width: 140px;
	display: inline-block;
	vertical-align: top;
	border: none;
	line-height: 1;
}

.login #contents button:hover, .login #contents button:active {
	background-color: #5587e7;
}

/* *********************************************** */



.login #contents .tops .notice{

}

.login #contents .tops h2 {
	font-size: 12px;
	color: #5a6883;
	line-height: 1;
	padding-bottom: 11px;
	border-bottom: 1px solid #dbdee3;
	margin: 0;
}

.login #contents .tops .summary {
	margin-top: 20px;
	margin-bottom: 32px;
	padding: 0 0 59px 0;
	border-bottom: 2px solid #5a6883;
}

.login #contents .tops .summary .summarylist {
	width: 240px;
	display: inline-block;
	vertical-align: top;
}

.login #contents .tops .summary .summarylist dt {
	font-size: 14px;
	line-height: 1;
	color: #333333;
	margin-bottom: 19px;
}

.login #contents .tops .summary .summarylist dt dd {
	padding: 0;
	margin: 0;
}

.login #contents .tops .summary .summarylist dd .summarycnt {
	padding: 0;
	margin: 0;
	display: inline-block;
	vertical-align: top;
	padding-right: 12px;
	margin-right: 14px;
	border-right: 1px solid #c7d3d6;
}

.login #contents .tops .summary .summarylist dd .summarycnt:last-of-type {
	border-right: none;
}

.login #contents .tops .summary .summarylist dd .summarycnt dt {
	font-size: 12px;
	line-height: 1;
	color: #333333;
	margin-bottom: 9px;
}

.login #contents .tops .summary .summarylist dd .summarycnt dd {
	font-size: 36px;
	line-height: 1;
	color: #edab05;
}

.login #contents .tops .recent {
	padding: 0 0 40px 0;
	margin: 0;
}

.login #contents .tops .recent .list {
	border-top: none;
	padding: 0;
}

.login #contents .tops .recent .list table tr td.num {
	width: 50px;
	text-align: center;
	vertical-align: middle;
}

.login #contents .tops .recent .list table tr td.date {
	width: 96px;
	vertical-align: middle;
}

.login #contents .tops .recent .list table tr td.pagetitle {
	width: calc(100% - 50px - 96px);
	padding: 9px 160px 9px 30px;
}



.login #contents .tops.nopayment .notice{
	color:#333333;
	font-size: 18px;
	padding:0 0 35px 0;
}

.login #contents .tops.nopayment .steps{
	padding:40px 0 20px 0;
	border-bottom:2px solid #5a6883;
	margin:0 0 40px 0;
}

.login #contents .tops.nopayment .step{
	padding:0 0 40px 42px;
	background-position: top left;
	background-repeat: no-repeat;
	background-size:32px auto;
}
.login #contents .tops.nopayment .step.step1{
	background-image:url("../images/step1.png");
}
.login #contents .tops.nopayment .step.step2{
	background-image:url("../images/step2.png");
}
.login #contents .tops.nopayment .step.step3{
	background-image:url("../images/step3.png");

}

.login #contents .tops.nopayment .step dt{
	padding:20px 0;
	font-size:18px;
	color:#333333;
}
.login #contents .tops.nopayment .step dt span{
	color:#5a6883;
}
.login #contents .tops.nopayment .step dd{
	font-size:12px;
	line-height:18px;
	color:#333333;
	padding: 0 0 0 8px;
}

.login #contents .tops.nopayment .inq{

}
.login #contents .tops.nopayment .inq a{
	font-size:16px;
	color:#ffffff;
	background-color: #5a6883;
	border-radius: 4px;
	padding:17px 24px;
	vertical-align: top;
	display: inline-block;
	margin-right:30px;
	text-decoration: none;
}
.login #contents .tops.nopayment .inq a:hover{
		background-color: #5587e7;
}
.login #contents .tops.nopayment .inq span{
	font-size:12px;
	vertical-align: top;
	line-height: 50px;
}




/* *********************************************** */

.login #contents .regdata {
	margin-bottom: 60px;
}

.login #contents .regdata h2 {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	margin-bottom: 10px;
}

.login #contents .regdata input {
	padding: 18px 20px;
	font-size: 14px;
	color: #333333;
	border: 2px solid #cccccc;
	border-radius: 4px;
	width: 400px;
	display: inline-block;
	vertical-align: top;
	margin-right: 20px;
}

.login #contents .regdata button {
	color: #ffffff;
	background-color: #5a6883;
	border-radius: 4px;
	font-size: 14px;
	padding: 20px 0;
	width: 140px;
	display: inline-block;
	vertical-align: top;
	border: none;
	line-height: 1;
}

.login #contents .regdata button:hover, .login #contents .regdata button:active {
	background-color: #5587e7;
}

.login #contents p {
	line-height: 1.4;
}

.login #contents .list {
	border-top: 2px solid #5a6883;
	padding: 20px 0;
}

.login #contents .list table {
	width: 100%;
}

.login #contents .list table thead {
	border-bottom: 1px solid #dbdee3;
	padding: 11px 0;
}

.login #contents .list table tbody tr:nth-child(even) {
	background-color: #f4f4f4;
}

.login #contents .list table tr th {
	font-size: 12px;
	font-weight: normal;
	color: #333333;
	padding: 11px 0;
}

.login #contents .list table.paylist tr .send {
	width: 120px;
	text-align: center;
}

.login #contents .list table.paylist tr .payment {
	width: 120px;
	text-align: center;
}

.login #contents .list table tr.lock {
	color: #aaa;
}

.login #contents .list table tr td {
	font-size: 14px;
	line-height: 20px;
	padding: 9px 0;
}

.login #contents .list table tr td.pagetitle a {
	color: #333333;
	text-decoration: none;
}

.login #contents .list table tr td.pagetitle a:hover {
	color: #333333;
	text-decoration: underline;
}

.login #contents .list table tr .name {
	text-align: left;
	width: calc( 100% - 68px - 112px - 96px - 52px);
	line-height: 16px;
	padding: 8.5px 16px 8.5px 0;
}

.login #contents .list table tr .name span {
	width: 50px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	margin-right: 28px;
}

.login #contents .list table tr .name p {
	display: inline-block;
	vertical-align: middle;
	width: calc( 100% - 50px - 28px);
}

.login #contents .list table tr .hit {
	text-align: center;
	width: 68px;
}

.login #contents .list table tr .detail {
	text-align: center;
	width: 112px;
}

.login #contents .list table tr .detail a {
	display: inline-block;
	width: 80px;
	border-radius: 4px;
	font-size: 13px;
	padding: 10px 0;
	text-decoration: none;
	background-color: #5a6883;
	color: #ffffff;
}

.login #contents .list table tr .detail span {
	display: inline-block;
	width: 80px;
	border-radius: 4px;
	font-size: 13px;
	padding: 10px 0;
	text-decoration: none;
	background-color: #CFDDF6;
	color: #eeeeee;
}

.login #contents .list table tr .number {
	width: 30px;
	padding: 8.5px 16px 8.5px 0;
	text-align: left;
}

.login #contents .list table tr .seimei {
	width: 180px;
	padding: 8.5px 16px 8.5px 0;
	text-align: left;
}

.login #contents .list table tr .mailaddr {
	width: 180px;
	padding: 8.5px 16px 8.5px 0;
	text-align: left;
}

.login #contents .list table tr .loginid {
	width: 150px;
	padding: 8.5px 16px 8.5px 0;
	text-align: left;
}

.login #contents .list table tr .company {
	width: 150px;
	padding: 8.5px 16px 8.5px 0;
	text-align: left;
}

.login #contents .list table tr .division {
	width: 150px;
	padding: 8.5px 16px 8.5px 0;
	text-align: left;
}

.login #contents .list table tr .address {
	width: 300px;
	padding: 8.5px 16px 8.5px 0;
	text-align: left;
}

.login #contents .list table tr .tel {
	width: auto;
	padding: 8.5px 16px 8.5px 0;
	text-align: left;
}

.login #contents .list table tr .plan {
	width: 145px;
	padding: 8.5px 16px 8.5px 0;
	text-align: left;
}

.login #contents .list table tr .action {
	width: 75px;
	padding: 8.5px 16px 8.5px 0;
	text-align: left;
}

.login #contents .list table tr .action a {
	display: inline-block;
	width: 55px;
	border-radius: 4px;
	font-size: 13px;
	padding: 10px 0;
	text-decoration: none;
	background-color: #5a6883;
	color: #ffffff;
	text-align: center;
}

.login #contents .list table tr .fee {
	width: auto;
	padding: 8.5px 16px 8.5px 0;
	text-align: left;
}

.login #contents .list table tr .action a:hover, .login #contents .list table tr .action a:active, .login #contents .list table tr .detail a:hover, .login #contents .list table tr .detail a:active {
	background-color: #5587e7;
}

.login #contents .list table tr .date {
	text-align: center;
	width: 96px;
}

.login #contents .list table tr .delete {
	text-align: center;
	width: 52px;
}

.login #contents .list table tr .sitename {
	text-align: left;
	width: calc( 100% - 110px - 112px - 96px - 52px);
	line-height: 16px;
	padding: 8.5px 16px 8.5px 0;
}

.login #contents .list table tr .sitename span {
	width: 50px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	margin-right: 28px;
}

.login #contents .list table tr .sitename p {
	display: inline-block;
	vertical-align: middle;
	width: calc( 100% - 50px - 28px);
}

.login #contents .list table tr .store {
	text-align: center;
	width: 110px;
}

.login #contents .list .billaddress p{
	margin-bottom:10px;
	font-size:16px;
	color:#333333;
}
.login #contents .list .billaddress table{
	margin-bottom:60px;
}
.login #contents .list .billaddress table tr{
	background-color:#ffffff;

}
.login #contents .list .billaddress table tbody tr:nth-child(2n){
	background-color:#ffffff;
}
.login #contents .list .billaddress table tr th{
	color:#666666;
	padding:18px 0 18px 18px;
	text-align:left;
	width:150px;
	border:1px solid #c0cadd;
	background-color:#e6eaf0;
}
.login #contents .list .billaddress table tr td{
	color:#000000;
	padding:18px 0 18px 18px;
	text-align:left;
	width:auto;
	border:1px solid #c0cadd;
}



/* *********************************************** */

.login #contents .setkeywordname {
	padding-bottom: 40px;
	margin-bottom: 30px;
	border-bottom: 2px solid #5a6883;
}

.login #contents .setkeywordname h2 {
	font-size: 14px;
	color: #333333;
	margin-bottom: 10px;
}

.login #contents .setkeywordname input {
	font-size: 14px;
	color: #333333;
	padding: 16px;
	border: 2px solid #cccccc;
	border-radius: 4px;
}

.login #contents .setkeywordlist h2 {
	font-size: 14px;
	color: #333333;
	margin-bottom: 30px;
}

.login #contents .setkeywordlist ul {
	margin-bottom: 20px;
	font-size: 0;
}

.login #contents .setkeywordlist ul li {
	width: calc( (100% - 20px) / 2);
	margin-bottom: 20px;
	margin-right: 20px;
	vertical-align: top;
	display: inline-block;
}

.login #contents .setkeywordlist ul li:nth-child(even) {
	margin-right: 0;
}

.login #contents .setkeywordlist input {
	display: none;
}

.login #contents .setkeywordlist label {
	display: inline-block;
	vertical-align: top;
	background-color: none;
	border: 2px solid #c0cadd;
	border-radius: 4px;
	font-size: 12px;
	color: #333333;
	padding: 10px 10px 10px 36px;
	background-image: url("../images/checkbox.png");
	background-size: 14px auto;
	background-repeat: no-repeat;
	background-position: left 11px center;
	width: 100%;
}

.login #contents .setkeywordlist input:checked+label {
	background-color: #e6eaf0;
	background-image: url("../images/checkbox_on.png");
}

.login #contents .setkeywordlist button {
	display: block;
	margin: 0 auto;
}

/* *********************************************** */

.login #contents .keyword .msg {
	font-size: 14px;
	line-height: 20px;
	font-weight: normal;
	color: #333333;
	margin-bottom: 30px;
}

.login #contents .keyword p {
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	color: #000000;
	margin-bottom: 20px;
}

.login #contents .keyword button {
	display: block;
}

/* *********************************************** */

.login #contents .site p {
	font-size: 14px;
	line-height: 20px;
	color: #333333;
	margin-bottom: 30px;
}

.login #contents .site form {
	margin-bottom: 30px;
}

/* *********************************************** */

.login #contents .setting h2 {
	font-size: 18px;
	color: #333333;
	margin-bottom: 40px;
}

.login #contents .setting .guide {
	text-align: left;
	margin-bottom: 30px;
	font-size: 14px;
	line-height: 20px;
}



.login #contents .setting dl dt {
	font-size: 14px;
	color: #666666;
	margin-bottom: 10px;
}

.login #contents .setting dl dt .req {
	color: #ff0000;
	font-size: 10px;
	display: inline-block;
	vertical-align: text-top;
}

.nologin .login .formregister dl dd,
.login #contents .setting dl dd {
	margin-bottom: 20px;
}
.nologin .login .formregister dl.billtype dd{
	padding-bottom:40px;
	margin-bottom:20px;
	border-bottom:1px solid #cccccc;
}


.nologin .login .formregister input,
.login #contents .setting dl dd input {
	width: 400px;
	font-size: 14px;
	color: #000000;
	padding: 6px 8px;
	border: 1px solid #cccccc;
	border-radius: 4px;
}
.nologin .login .formregister input[type=checkbox]{
	width:auto;
}

.nologin #contents .formregister dl dd input[name=sei], .nologin #contents .formregister dl dd input[name=mei] ,
.login #contents .setting dl dd input[name=sei], .login #contents .setting dl dd input[name=mei] {
	width: 195px;
	margin-right: 10px;
}
.nologin #contents .formregister dl dd input[name=mei] ,
.login #contents .setting dl dd input[name=mei]{
	margin-right:0;
}


.nologin #contents .formregister dl dd input[name=zip] ,
.login #contents .setting dl dd input[name=zip] {
	width: 80px;
	margin-bottom: 10px;
}

.nologin #contents .formregister dl dd input[name=password] ,
.login #contents .setting dl dd input[name=password] {
	margin-bottom: 10px;
}

.nologin #contents .formregister dl dd span,
.login #contents .setting dl dd span {
	display: inline-block;
	font-size: 14px;
	color: #333333;
	padding: 8px;
	margin-right: 10px;
	margin-bottom: 10px;
}

.nologin #contents .formregister dl dd span a ,
.login #contents .setting dl dd span a {
	display: inline-block;
	text-decoration: none;
	padding: 13px 10px;
	text-decoration: none;
	text-align: center;
	border: 2px solid #5a6883;
	border-radius: 4px;
	color: #5a6883;
}

.nologin #contents .formregister dl dd span a:hover,
.login #contents .setting dl dd span a:hover {
	background-color: #5587e7;
	color: #ffffff;
	border: 2px solid #5587e7;
}

.nologin #contents .formregister dl dd input[type=radio],
.login #contents .setting dl dd input[type=radio] {
	width: auto;
	vertical-align: middle;
}

.nologin #contents .formregister dl dd ul li,
.login #contents .setting dl dd ul li {
	display: inline-block;
	font-size: 14px;
	color: #333333;
	margin-right: 10px;
	margin-bottom: 10px;
}

.nologin #contents .formregister dl dd label,
.login #contents .setting dl dd label {
	display: inline-block;
	vertical-align: middle;
}

.nologin #contents .formregister button ,
.login #contents .setting button {
	display: block;
	margin: 0 auto;
}


.login #contents .setting form dl:last-of-type{
	border-bottom:2px solid #5a6883;
	padding-bottom:60px;
	margin-bottom:40px;
}

.login #contents .setting form dl:last-of-type dd{
	margin-bottom:0;
}

/*
.login #contents .setting dl.cancellation dt{
	display: inline-block;
}
.login #contents .setting dl.cancellation dd{
	display: inline-block;
}
*/

.login #contents .setting dl.addition{
	border-bottom:1px solid #cccccc;
	padding-bottom:40px;
	margin-bottom:40px;
}
.login #contents .setting dl.addition:first-of-type{
	border-top:1px solid #cccccc;
	padding-top:40px;
	margin-top:40px;

}
.login #contents .setting dl.addition dd{
	margin-bottom:0;
}
.login #contents .setting dl.addition:last-of-type{
	border-bottom:none;
}
.nologin #contents .formregister dl dd span.names,
.login #contents .setting dl dd span.names{
	width:144px;
	padding-left: 0;
}
.nologin #contents .formregister dl dd span a,
.login #contents .setting dl dd span a{
	width:94px;
}

.nologin #contents .formregister .error,
.login #contents .setting .error {
	text-align: left;
	color: #ff0000;
	margin-bottom: 30px;
}


/* *********************************************** */

.login #contents .plan-title {
	font-size: 18px;
	color: #333333;
	margin-bottom: 40px;
}

.login #contents .plan-desc {
	font-size: 14px;
	line-height: 20px;
	color: #333333;
	margin-bottom: 40px;
}

.nologin #contents .formregister dl.billtype dd label,
.login #contents .setting dl.billtype dd label{
	margin-right:40px;
}


.login #contents .btnarea{
	text-align: center;
}
.login #contents button[name=back]{
	display: inline-block;
}
.login #contents button[name=gonext]{
	display: inline-block;
}

/* *********************************************** */

.login #contents .keyworddetail h2 {
	font-size: 14px;
	color: #333333;
	margin-bottom: 30px;
}

.login #contents .keyworddetail .keylist {
	margin-top: -20px;
	margin-bottom: 20px;
	margin-left: 1em;
	color: #333333;
	font-size: 14px;
}

.login #contents .keyworddetail #types-select {
	margin-bottom: 20px;
}

.login #contents .keyworddetail #types-select li {
	display: inline-block;
	margin-bottom: 10px;
	margin-right: 10px;
}

.login #contents .keyworddetail #types-select li:last-child {
	margin-right: 0;
}

.login #contents .keyworddetail #types-select input[type=radio] {
	display: none;
}

.login #contents .keyworddetail #types-select label {
	display: inline-block;
	vertical-align: top;
	background-color: none;
	border: 2px solid #c0cadd;
	border-radius: 4px;
	font-size: 12px;
	color: #333333;
	padding: 10px 10px 10px 36px;
	background-image: url("../images/checkbox.png");
	background-size: 14px auto;
	background-repeat: no-repeat;
	background-position: left 11px center;
}

.login #contents .keyworddetail #types-select input:checked[type=radio]+label {
	background-color: #e6eaf0;
	background-image: url("../images/checkbox_on.png");
}

.login #contents .keyworddetail h3 {
	font-size: 14px;
	color: #333333;
	margin-bottom: 10px;
}

.login #contents .keyworddetail textarea {
	background-color: none;
	border: 2px solid #c0cadd;
	border-radius: 4px;
	margin-right: 10px;
	width: calc( 100% - 140px - 10px);
	height: 90px;
	padding: 8px;
	background-color: #e6eaf0;
	margin-bottom: 38px;
}

.login #contents .keyworddetail #textcopy {
	width: 140px;
	color: #ffffff;
	background-color: #5a6883;
	border-radius: 4px;
	font-size: 14px;
	display: inline-block;
	vertical-align: top;
	border: none;
	line-height: 1;
	text-align: center;
	padding: 38px 0;
	margin-bottom: 38px;
}

.login #contents .keyworddetail #textcopy:hover, .login #contents .keyworddetail #textcopy:active {
	background-color: #5587e7;
}

.login #contents .keyworddetail h4 {
	font-size: 14px;
	color: #333333;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 2px solid #5a6883;
}

.login #contents .keyworddetail #show {
	width: 100%;
	display: none;
}

.login #contents .keyworddetail #show iframe {
	border: none;
	width: 100%;
	height: 900px;
	margin: 0 auto;
}

/* *********************************************** */

.login #contents .inquiry h2 {
	color: #333333;
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 40px;
}
.login #contents .inquiry p.info{
	padding:10px 0;
}

.login #contents .inquiry dl {
	margin-bottom: 10px;
}

.login #contents .inquiry dl dt {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
}

.login #contents .inquiry dl dd {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
}

.login #contents .inquiry dl dd textarea {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	padding: 10px;
	width: 100%;
	height: 200px;
}
.login #contents .inquiry dl dd select{
	font-size: 16px;
	padding: 8px 16px 8px 8px;
	border: 1px solid #ccc;
	color: #333;
}

.login #contents .inquiry dl dd .text {
	padding: 10px;
	width: 100%;
	border: 1px solid #ccc;
}
.login #contents .inquiry .error{
	color:#ff0000;
	font-size:12px;
}

.login #contents .inquiry label{
	display: block;
	margin:0 0 30px 0;
}

.login #contents .inquiry dl.privacy dt{
	text-align:left;
}
.login #contents .inquiry dl.privacy dd{
	text-align:left;
	margin-bottom:0;
}

.login #contents button[name=back]{
	background-color:#ffffff;
	border:2px solid #5a6883;
	padding:18px 0;
	color:#5a6883;
}



/* *********************************************** */

.login #contents .adminnews {}

.login #contents .adminnews a.btn {
	display: inline-block;
	width: 100px;
	border-radius: 4px;
	font-size: 13px;
	padding: 10px 0;
	text-decoration: none;
	background-color: #5a6883;
	color: #ffffff;
	text-align: center;
	margin-bottom: 30px;
}

.login #contents .adminnews th {
	text-align: left;
}

.login #contents .adminnews .pagetitle {
	width: auto;
	padding: 8.5px 16px 8.5px 0;
}

.login #contents .adminnews .pub_date {
	width: 152px;
	padding: 8.5px 16px 8.5px 0;
}

.login #contents .adminnews .end_date {
	width: 152px;
	padding: 8.5px 16px 8.5px 0;
}

.login #contents .adminnews .pub_flg {
	width: 70px;
	padding: 8.5px 16px 8.5px 0;
}

.login #contents .adminnews .newsaction {
	width: 120px;
	padding: 8.5px 16px 8.5px 0;
	text-align: left;
}

.login #contents .adminnews .newsaction a {
	display: inline-block;
	width: 100px;
	border-radius: 4px;
	font-size: 13px;
	padding: 10px 0;
	text-decoration: none;
	background-color: #5a6883;
	color: #ffffff;
	text-align: center;
}

.login #contents .adminnews dl {
	margin-bottom: 10px;
}

.login #contents .adminnews dl dt {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
}

.login #contents .adminnews dl dd {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
}

.login #contents .adminnews dl dd input[type=text] {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	padding: 10px;
	width: 100%;
}

.login #contents .adminnews dl dd input[type=datetime] {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	padding: 10px;
	width: 190px;
}

.login #contents .adminnews dl dd textarea {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	padding: 10px;
	width: 100%;
	height: 200px;
}

/* *********************************************** */

#kv {
	background-color: #edf0f5;
	width: 100%;
	height: 557px;
}

#kv h2 {
	font-size: 24px;
	font-weight: normal;
	color: #5a6883;
	text-align: center;
	padding: 40px 0;
}

#kv h2 br.sp {
	display: none;
}

#kv .mainimage {
	text-align: center;
	margin-bottom: -60px;
}

#kv .mainimage img {}

#introduction {
	position: relative;
}

#introduction .introbox {
	padding: 100px 0;
	width: 100%;
}

#introduction .introbox h2 {
	font-size: 24px;
	line-height: 40px;
	color: #5a6883;
	text-align: center;
}

#introduction #about {
	text-align: center;
	/*border-bottom:1px solid #5a6883;*/
}

#introduction #about h2 {
	padding-bottom: 100px;
	font-weight: normal;
	font-size: 28px;
}

#introduction #about h2 br.sp {
	display: none;
}

#introduction #about h2 br.pc {
	display: inline-block;
}

/*
#introduction #about dl{
	width:390px;
	display: inline-block;
	vertical-align: top;
	
}
#introduction #about dl dt{
	margin-top:10px;
	padding:190px 45px 25px 45px;
	background-repeat: no-repeat;
	background-size:146px auto;
	background-position: center top 50px;
	color:#5a6883;
	font-size:20px;
}
#introduction #about dl.about1 dt{
	background-image:url("../images/introduction/about1.png");
}
#introduction #about dl.about2 dt{
	background-image:url("../images/introduction/about2.png");
}
#introduction #about dl.about3 dt{
	background-image:url("../images/introduction/about3.png");
}
#introduction #about dl.about4 dt{
	background-image:url("../images/introduction/about4.png");
}

#introduction #about dl dd{
	padding:0 45px;
	font-size:16px;
	line-height:28px;
	color:#5a6883;
	text-align: left;
	
}
*/

#introduction #about .abouttext {
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}

#introduction #about .abouttext .inner {
	display: block;
	margin: 0 auto 100px auto;
	width: 1320px;
	height: auto;
	padding: 0;
	max-width: 1320px;
}

#introduction #about .abouttext .abouttext2.inner {
	margin: 0 auto;
}

#introduction #about .abouttext .inner.abouttext1 {
	background-image: url("/assets/images/introduction/f1.png");
	;
	background-repeat: no-repeat;
	background-position: top right;
	background-size: 600px auto;
}

#introduction #about .abouttext .inner.abouttext2 {
	background-image: url("/assets/images/introduction/f2.png");
	;
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 600px auto;
}

#introduction #about .abouttext .textbox {
	width: 960px;
	margin: 0 auto;
	min-height: 350px;
}

#introduction #about .abouttext .text {
	width: 480px;
	padding: 50px 0 0 0;
}

#introduction #about .abouttext .left {
	float: left;
}

#introduction #about .abouttext .right {
	float: right;
}

#introduction #about .abouttext .text h3 {
	font-size: 24px;
	line-height: 32px;
	color: #5a6883;
	margin-bottom: 20px;
}

#introduction #about .abouttext .text h3 br.tab {
	display: none;
}

#introduction #about .abouttext .text p {
	font-size: 16px;
	line-height: 28px;
	color: #5a6883;
	text-align: left;
	letter-spacing: 2px;
}

@media(max-width:1320px) {
	#introduction #about .abouttext .inner {
		width: 100%;
	}
	#introduction #about .abouttext .inner.abouttext1 {
		background-position: top right -30px;
	}
	#introduction #about .abouttext .inner.abouttext2 {
		background-position: top left -30px;
	}
}

@media(max-width:1200px) {
	#introduction #about .abouttext .inner.abouttext1 {
		background-position: top right -100px;
	}
	#introduction #about .abouttext .inner.abouttext2 {
		background-position: top left -100px;
	}
}

@media(max-width:1080px) {
	#introduction #about .abouttext .inner.abouttext1 {
		background-position: top right -180px;
	}
	#introduction #about .abouttext .inner.abouttext2 {
		background-position: top left -180px;
	}
}

@media(max-width:980px) {
	#introduction #about .abouttext .textbox {
		width: 100%;
		padding: 0 30px;
	}
	#introduction #about .abouttext .inner.abouttext1 {
		background-position: top right -180px;
	}
	#introduction #about .abouttext .inner.abouttext2 {
		background-position: top left -180px;
	}
	#introduction #about .abouttext .text {
		width: 410px;
		padding: 0 20px;
	}
	#introduction #about .abouttext .text h3 {
		text-align: left;
	}
	#introduction #about .abouttext .text h3 br.tab {
		display: inline-block;
	}
}

@media(max-width:830px) {
	#introduction #about .abouttext .inner.abouttext1 {
		background-position: top right -270px;
	}
	#introduction #about .abouttext .inner.abouttext2 {
		background-position: top left -270px;
	}
}

@media(max-width:730px) {
	#introduction #about .abouttext .inner.abouttext1 {
		background-position: top right -330px;
	}
	#introduction #about .abouttext .inner.abouttext2 {
		background-position: top left -330px;
	}
}

@media(max-width:670px) {
	#introduction #about .abouttext .inner.abouttext1 {
		background-position: top right -380px;
	}
	#introduction #about .abouttext .inner.abouttext2 {
		background-position: top left -380px;
	}
}

@media(max-width:640px) {
	#introduction #about {}
	#introduction #about .abouttext .inner {
		margin: 0 auto 50px auto;
	}
	#introduction #about .abouttext .textbox {
		min-height: inherit;
		padding: 0 20px;
	}
	#introduction #about .abouttext .abouttext1 .textbox {
		padding-top: 76.5625vw;
		/*490/640*/
	}
	#introduction #about .abouttext .abouttext2 .textbox {
		padding-top: 76.5625vw;
		/*490/640*/
	}
	#introduction #about .abouttext .text {
		width: 100%;
		padding: 0;
	}
	#introduction #about .abouttext .left, #introduction #about .abouttext .right {
		float: none;
	}
	#introduction #about .abouttext .inner.abouttext1 {
		background-position: top left 40px;
		background-size: 115.625vw auto;
		/*740/640*/
	}
	#introduction #about .abouttext .inner.abouttext2 {
		background-position: top right 40px;
		background-size: 115.625vw auto;
		/*740/640*/
		margin: 0 auto;
	}
	#introduction #about .abouttext .text h3 {
		text-align: center;
		font-size: 18px;
		line-height: 26px;
		margin-bottom: 15px;
	}
	#introduction #about .abouttext .text p {
		font-size: 13px;
		line-height: 22px;
	}
}

#introduction #functions {
	border-bottom: 1px solid #5a6883;
}

#introduction #functions h2 {
	padding-bottom: 40px;
	font-weight: normal;
}

#introduction #functions p {
	font-size: 16px;
	line-height: 28px;
	color: #5a6883;
	max-width: 670px;
	margin: 0 auto;
	padding-bottom: 70px;
}

#introduction #functions dl {
	width: 290px;
	margin-right: 45px;
	display: inline-block;
	vertical-align: top;
}

#introduction #functions dl:last-of-type {
	margin-right: 0;
}

#introduction #functions dl dt {
	font-size: 20px;
	color: #5a6883;
	text-align: center;
	padding-bottom: 30px;
}

#introduction #functions dl dd {
	font-size: 14px;
	line-height: 24px;
	color: #666666;
}

#introduction #flow {
	/*border-bottom: 1px solid #5a6883;*/
}

#introduction #flow h2 {
	padding-bottom: 80px;
	font-weight: normal;
}

#introduction #flow dl {
	width: 468px;
	margin: 0 auto;
}

#introduction #flow dl dt {
	width: 128px;
	display: inline-block;
	vertical-align: top;
	font-size: 20px;
	font-weight: bold;
	color: #5a6883;
	background-image: url("../images/introduction/step.png");
	background-repeat: no-repeat;
	background-size: 27px auto;
	background-position: left 5px bottom 40px;
	padding-bottom: 240px;
}

#introduction #flow dl.flow4 dt {
	background-image: none;
}

#introduction #flow dl dd {
	width: calc(468px - 128px);
	display: inline-block;
	vertical-align: top;
	/*padding-right:195px;*/
	background-image: none;
}

#introduction #flow dl dd h3 {
	font-size: 20px;
	font-weight: normal;
	line-height: 28px;
	color: #5a6883;
	padding-bottom: 46px;
	margin-top: -4px;
}

#introduction #flow dl dd img {
	width: 240px;
	height: auto;
}

#introduction #plan {}

#introduction #plan h2 {
	padding-bottom: 40px;
}

#introduction #plan p.lead {
	font-size: 16px;
	line-height: 28px;
	color: #5a6883;
	max-width: 690px;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 60px;
}

#introduction .select-plan {
	margin-bottom: 50px;
}

#introduction #plan .plan-list li.plan-item label .plan .box {
	margin-bottom: 0;
}



#introduction #plan .paymentinfo{
	background-color: #e6eaf0;
	padding:50px 0;
	text-align: center;
	margin-bottom: 50px;
}
#introduction #plan .paymentinfo h3{
	font-size: 18px;
	color: #666666;
	margin-bottom: 20px;
}
#introduction #plan .paymentinfo  .guide {

	font-size: 14px;
	line-height: 20px;
	display: inline-block;
	color: #666666;
}

#introduction #plan .paymentinfo  .sp {
	display: none;
}

#introduction .register {
	font-size: 24px;
	color: #374051;
	padding: 38px 0;
	background-color: #e5c47f;
	border-radius: 50px;
	width: 400px;
	display: block;
	margin: 50px auto 0 auto;
	text-decoration: none;
	text-align: center;
	background-image: url("../images/introduction/account.png");
	background-position: right 30px center;
	background-repeat: no-repeat;
	background-size: 12 px auto;
}

#introduction .register:active, #introduction .register:hover {
	color: #2A3344;
	background-color: #bc9b56;
}

#introduction .visualimage {
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}

#introduction .visualimage img {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
	padding: 0 50px;
}

#introduction .visualimage img.pc {
	display: block;
}

#introduction .visualimage img.tab, #introduction .visualimage img.sp {
	display: none;
}


#introduction #submenu{
	text-align: center;
	margin-bottom: 100px;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
	padding: 70px 0;
}
#introduction #submenu ul{
	
}
#introduction #submenu ul li{
	display: inline-block;
	vertical-align: top;
	width:320px;
}
#introduction #submenu ul li a{
	color:#5a6883;
	font-size:20px;
	text-decoration: none;
	padding-right:24px;
	display: block;
}
#introduction #submenu ul li a span{
	background-image:url("../images/arrow.png");
	background-repeat: no-repeat;
	background-position: right center;
	background-size:10px auto;
	padding-right:24px;
	display: inline-block;;
}


@media(max-width:980px) {
	.nologin header .head-menu {
		display: none;
	}
	.nologin header #spmenu {
		display: block;
		width: 30px;
		height: 30px;
		position: absolute;
		top: 15px;
		right: 10px;
		cursor: pointer;
	}
	.nologin header #spmenu span {
		display: block;
		width: 100%;
		height: 2px;
		margin: 6px 0;
		background-color: #000;
		transition-duration: .5s;
	}
	.nologin header #spmenu.open span {
		display: none;
	}
	.nologin header #spmenu.open span:first-of-type {
		display: block;
		transform: rotate(-45deg);
		position: absolute;
		top: 10px;
	}
	.nologin header #spmenu.open span:last-of-type {
		display: block;
		transform: rotate(45deg);
		position: absolute;
		top: 10px;
	}
	.nologin header .head-menu ul li:hover, .nologin header .head-menu ul li:active, .nologin header .head-menu ul li.current {
		border-top: none;
		border-bottom: none;
	}
	.nologin header .inner {
		width: 100%;
	}
	.nologin header {
		height: 60px;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #ffffff;
		z-index: 1;
	}
	.nologin header h1 {
		margin: 12px 0 0 10px;
	}
	.nologin header img {
		width: 80px;
		height: auto;
	}
	.nologin header .head-menu {
		margin-top: 0;
		background-color: #edf0f5;
		width: 100%;
		z-index: 10;
		position: fixed;
		top: 60px;
		/*padding-bottom: 75px;*/
		height: calc(100vh - 60px);
		text-align: center;
	}
	.nologin header .head-menu ul {
		margin-right: 0;
		width: 100%;
		padding-top: 35px;
	}
	.nologin header .head-menu ul li {
		border: none;
		height: auto;
		width: 100%;
		text-align: center;
		padding: 10px 0;
	}
	.nologin header .head-menu ul li a span {
		padding: 0;
		margin-top: 0;
	}
	.nologin header .head-menu ul li:hover a span, .nologin header .head-menu ul li:active a span, .nologin header .head-menu ul li.current a span {
		border: none;
	}
	.nologin header .head-menu .menu {
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 20px;
	}
	.nologin #main {
		padding: 60px 0 0 0;
	}
	.nologin #contents {
		width: 100%;
		padding: 50px 15px 0 15px;
	}
	#introduction #functions dl {
		width: calc( ( 100% - 160px) / 2);
		margin-right: 40px;
		margin-left: 40px;
		margin-bottom: 80px;
	}
	#introduction #functions dl:last-of-type {
		margin-bottom: 0;
	}
	#introduction .select-plan {
		width: 100%;
		padding-bottom: 50px;
		padding-left: 30px;
		padding-right: 30px;
		margin-bottom: 0;
	}
	#introduction #plan .paymentinfo{
		margin-left: 30px;
		margin-right: 30px;
	}

}

@media(max-width:780px) {
	#introduction {
		width: 100vw;
		margin-left: -15px;
	}
	#introduction #about dl {
		width: calc( 100% / 2);
		padding: 0 30px;
	}
	#introduction #about dl dt {
		padding: 190px 0 25px 0;
	}
	#introduction #about dl dd {
		padding: 0;
	}
	#introduction #functions {
		width: calc(100% - 60px);
		margin: 0 auto;
	}
	#introduction #functions dl {
		width: calc( ( 100% - 60px) / 3);
		margin-right: 30px;
		margin-left: 0;
	}
	#introduction #functions dl:first-of-type {
		margin-left: 0;
	}
	#introduction #functions dl:last-of-type {
		margin-right: 0;
	}
	#introduction .visualimage img {
		padding: 0;
	}
	#introduction .visualimage img.pc {
		display: none;
	}
	#introduction .visualimage img.tab {
		display: block;
	}
}

@media(max-width:720px) {
	#introduction .nologin #contents {
		padding: 35px 0;
	}
	#introduction .introbox {
		padding: 60px 5px;
	}
	#introduction .introbox h2 {
		padding: 0 10px;
	}
	#kv {
		height: 102.125vw;
		/*660/640*/
	}
	#kv .mainimage {
		padding: 0 4.6875vw 4.6875vw 4.6875vw;
		/*0 30 30 30*/
		margin-bottom: -6.25vw;
		/*40/640*/
	}
	#kv .mainimage img {
		width: 90.625vw;
		/*580*/
	}
	#kv h2 {
		font-size: 7.5vw;
		/*24/320*/
		line-height: 11.25vw;
		/*36/320*/
		padding: 6.25vw 0;
		/*20/320*/
	}
	#kv h2 br.sp {
		display: inline-block;
	}
	#introduction #about dl {
		width: calc(100% - 20px);
		margin-left: 10px;
		margin-right: 10px;
		padding: 0;
	}
	#introduction #functions p {
		padding: 0 10px;
	}
	#introduction #functions dl {
		width: calc(100% - 20px);
		margin-left: 10px;
		margin-right: 10px;
	}
	#introduction #flow dl {
		/*
		width: calc(100% - 20px);
		margin-left:10px;
		margin-right:10px;
		*/
	}
	#introduction #flow dl dt {
		/*background-image:none;*/
	}
	#introduction #flow dl dd {
		/*
		width: calc(100% - 128px);
		padding-right:0;
		min-height: 160px;
		background-position: center bottom 20px;
		padding-bottom: 200px;
		*/
	}
	#introduction #flow dl.flow4 {
		/*margin-bottom:60px;*/
	}
	#introduction #plan p.lead {
		padding: 0 10px 60px 10px;
	}
	#introduction .plan-list li.plan-item {
		/*
		width: calc(100% - 20px);
		margin-left: 10px;
		margin-right: 10px;
		*/
		width:100%;
		margin-left: 0;
		margin-right: 0;
	}
	#introduction #plan .plan-list li.plan-item label .plan .box {
		margin-bottom: 20px;
	}

	#introduction #submenu{
		padding: 50px 15px;
	}
	#introduction #submenu ul li{
		width:50%;
	}



}





@media(max-width:640px) {
	.nologin #contents {
		padding: 20px 0 0 0;
	}
	#introduction {
		margin-left: 0;
	}
	#introduction .introbox {
		padding: 50px 15px;
	}
	#introduction .introbox h2 {
		font-size: 22px;
		line-height: 32px;
		padding-bottom: 50px;
	}
	#introduction #about h2 {
		font-size: 20px;
		line-height: 30px;
		padding-bottom: 50px;
	}
	#introduction #about h2 br.sp {
		display: inline-block;
	}
	#introduction #about h2 br.pc {
		display: none;
	}
	#introduction #about dl dt {
		font-size: 18px;
		line-height: 24px;
		padding: 200px 0 15px 0;
	}
	#introduction #about dl dd {
		padding: 0;
		font-size: 13px;
		line-height: 20px;
	}
	#introduction #functions {
		margin: 0 auto;
		width: calc(100% - 40px);
		padding: 50px 0;
	}
	#introduction #functions p {
		padding-bottom: 50px;
		font-size: 16px;
		line-height: 23px;
		padding-left: 0;
		padding-right: 0;
	}
	#introduction #functions dl {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 30px;
	}
	#introduction #functions dl:first-of-type, #introduction #functions dl:last-of-type {
		margin-left: 0;
		margin-right: 0;
	}
	#introduction #functions dl dt {
		font-size: 18px;
		line-height: 24px;
		padding-bottom: 15px;
	}
	#introduction #flow h2 {
		padding-bottom: 40px;
	}
	#introduction #flow dl {
		width: 280px;
		margin-bottom: 40px;
	}
	#introduction #flow dl dt {
		background-image: none;
		width: 280px;
		padding-bottom: 20px;
		font-size: 20px;
	}
	#introduction #flow dl dd {
		width: 280px;
		background-position: left bottom;
		background-repeat: no-repeat;
		background-size: 30px auto;
		background-image: url("../images/introduction/step.png");
		padding-left: 53px;
	}
	#introduction #flow dl.flow4 dd {
		background-image: none;
	}
	#introduction #flow dl dd h3 {
		font-size: 18px;
		padding-bottom: 30px;
		margin-top: 0;
	}
	#introduction #flow dl dd img {
		width: 174px;
		margin: 0 auto;
		display: block;
	}
	/*
	#introduction #flow dl.flow1 dd{
		background-image: url("../images/introduction/step.png");
	}
	#introduction #flow dl.flow2 dd{
		background-image: url("../images/introduction/step.png");
	}
	#introduction #flow dl.flow3 dd{
		background-image: url("../images/introduction/step.png");
	}
	#introduction #flow dl.flow4 dd{
		background-image: url("../images/introduction/step.png");
	}
	*/
	#introduction #flow dl dd p {
		padding-left: 45px;
	}
	#introduction .select-plan {
		padding-left: 0;
		padding-right: 0;
	}
	#introduction .plan-list li.plan-item {
		width: 100%;
	}
	#introduction .register {
		font-size: 18px;
		padding: 26px 0;
		border-radius: 35px;
	}
	#introduction .visualimage img.tab {
		display: none;
	}
	#introduction .visualimage img.sp {
		display: block;
	}


	#introduction #plan .paymentinfo{
		margin-left: 0;
		margin-right: 0;
	}

	#introduction #plan .guide .sp {
		display: inline-block;
	}
}

@media(max-width:480px) {
	.nologin footer {
		padding: 20px 0;
	}
	.nologin footer ul {
		margin: 0 auto 40px auto;
	}
	.nologin footer ul li {
		width: calc((100% - 40px) / 2);
		margin: 0;
		padding: 0;
	}
	.nologin footer ul li:nth-child(2n-1) {
		margin-right: 10px;
	}
	.nologin footer ul li:nth-child(1), .nologin footer ul li:nth-child(2) {
		margin-bottom: 10px;
	}
	.nologin footer ul li a {
		display: block;
		padding: 15px 0;
		background-color: #f0f3f6;
		font-size: 14px;
		text-align: center;
	}
	.nologin footer ul li a span {
		padding-right: 15px;
		display: inline-block;
		background-image: url("/assets/images/arrow.png");
		background-size: 8px auto;
		background-repeat: no-repeat;
		background-position: right center;
	}
	.nologin footer .logo {
		margin: 0 auto 40px auto;
	}
	#introduction #flow dl dt {
		width: 100%;
		padding-bottom: 20px;
	}
	#introduction #flow dl dd {
		width: 100%;
		padding-left: 40px;
	}
	#introduction .register {
		width: calc(100% - 20px);
		margin: 0 auto;
	}
}


@media(max-width:374px){
	#introduction #submenu {
		padding:25px 15px;
	}
	#introduction #submenu ul li{
		width:100%;
		padding:25px 0;
	}



}


/* *********************************************** */

.nologin #contents .inquiry {
	max-width: 688px;
	margin: 0 auto;
	text-align: center;
}

.nologin #contents .inquiry h2 {
	color: #333333;
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 40px;
	text-align: center;
}

.nologin #contents .inquiry p {
	color: #333333;
	font-size: 14px;
	line-height:20px;
	font-weight: normal;
	margin-bottom: 40px;
	text-align: center;
}

.nologin #contents .inquiry dl {
	margin-bottom: 10px;
	text-align: left;
}

.nologin #contents .inquiry dl dt {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	margin-bottom: 7px;
}

.nologin #contents .inquiry dl dd {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	margin-bottom: 30px;
}

.nologin #contents .inquiry dl dd input[type=text], .nologin #contents .inquiry dl dd input[type=email] {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	padding: 10px;
	width: 100%;
}
.nologin #contents .inquiry .error{
	color:#ff0000;
	font-size:12px;
}

.nologin #contents .inquiry dl dd .zip {
	display: inline-block;
	vertical-align: top;
	line-height: 40px;
}

.nologin #contents .inquiry dl dd input[name=zip] {
	width: 8rem;
	margin-bottom: 30px;
	margin-left: 20px;
	display: inline-block;
	vertical-align: middle;
}
.nologin #contents .inquiry dl dd select{
	font-size: 16px;
	padding: 8px 16px 8px 8px;
	border: 1px solid #ccc;
	color: #333;
}

.nologin #contents .inquiry dl dd textarea {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	padding: 10px;
	width: 100%;
	height: 200px;
	border: 1px solid #ccc;
}

.nologin #contents .inquiry dl dd .text {
	padding: 10px;
	width: 100%;
	border: 1px solid #ccc;
}

#contents .inquiry dl.privacy dt {
	margin-bottom: 20px;
	text-align: center;
}

#contents .inquiry dl.privacy dt a {
	display: inline-block;
	color: #5587e7;
	text-decoration: none;
	padding-bottom: 6px;
	border-bottom: 1px solid #5587e7;
}

#contents .inquiry dl.privacy dd {
	margin-bottom: 60px;
	text-align: center;
}

#contents .inquiry dl.privacy dd label {
	padding: 10px 11px;
	background-color: #e6eaf0;
	display: inline-block;
}

.nologin #contents button {
	color: #ffffff;
	background-color: #5a6883;
	border-radius: 4px;
	font-size: 14px;
	padding: 20px 0;
	max-width: 400px;
	width: 100%;
	display: block;
	margin: 0 auto;
	border: none;
	line-height: 1;
}

.nologin #contents .inquiry button{
	display: inline-block;
	width:140px;
}


.nologin #contents button:hover, .nologin #contents button:active {
	background-color: #5587e7;
}

.nologin #contents .inquiry button[name=back]
{
	background-color:#ffffff;
	border:2px solid #5a6883;
	color:#5a6883;
	padding:18px 0;
}



/* *********************************************** */

.nologin #contents .news {
	max-width: 688px;
	margin: 0 auto;
}

.nologin #contents .news h2 {
	font-size: 18px;
	color: #333333;
	margin-bottom: 40px;
	text-align: center;
	font-weight: normal;
}

.nologin #contents .news .list .list-inner {
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	padding: 40px 20px;
}

.nologin #contents .news a {
	text-decoration: none;
}

.nologin #contents .news a:hover {
	text-decoration: underline;
}

.nologin #contents .news dl {
	margin-bottom: 30px;
}

.nologin #contents .news dl dt {
	color: #999999;
	font-size: 14px;
	font-weight: normal;
	line-height: 1;
	width: 100%;
	margin-bottom: 20px;
}

.nologin #contents .news dl dd {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	width: 100%;
	display: inline-block;
	vertical-align: top;
	border-bottom: 1px solid #cccccc;
	padding: 0 0 36px 0;
}

.nologin #contents .news dl:last-child dd {
	border-bottom: none;
	padding: 0;
}

.nologin #contents .news dl dd h3 {
	font-size: 20px;
	line-height: 30px;
	color: #333333;
	margin-bottom: 22px;
}

.nologin #contents .news dl dd .newsbody {
	font-size: 14px;
	line-height: 24px;
	color: #333333;
}

/*
.nologin #contents .news h2{
	font-size:20px;
	line-height:28px;
	font-weight:bold;
	margin-bottom:30px;
}

.nologin #contents .news date{
	color: #333333;
    font-size: 14px;
    font-weight: normal;
	margin-bottom:30px;
	display: block;
	text-align: right;
}
.nologin #contents .news .pagebody{
	color: #333333;
    font-size: 14px;
    font-weight: normal;
	line-height:20px;	
}
*/

/* *********************************************** */

.nologin #contents .rule {
	max-width: 688px;
	margin: 0 auto 60px auto;
}

.nologin #contents .rule h2 {
	font-size: 18px;
	color: #333333;
	line-height: 24px;
	font-weight: normal;
	margin-bottom: 77px;
	text-align: center;
}

.nologin #contents .rule .box {}

.nologin #contents .rule .box p {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	line-height: 24px;
	margin-bottom: 36px;
}

.nologin #contents .rule .box dl {
	margin-bottom: 30px;
}

.nologin #contents .rule .box dl dt {
	color: #333333;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	margin-bottom: 14px;
}

.nologin #contents .rule .box dl dd {
	color: #333333;
	font-size: 14px;
	font-weight: normal;
	line-height: 24px;
	margin-bottom: 36px;
}


/* *********************************************** */
.nologin #contents #faq{
	
}
.nologin #contents #faq h2{
	font-size:18px;
	color:#333333;
	margin:0 auto 40px auto;
	text-align: center;
}
.nologin #contents #faq .inner{
	margin:0 auto;
	max-width:688px;
	border-top:1px solid #000000;
	border-bottom:1px solid #000000;
	padding:46px 20px 0 20px;
}
.nologin #contents #faq dl{
	margin-bottom:50px;
	border-bottom:1px solid #cccccc;

}
.nologin #contents #faq dl:last-of-type{
	border-bottom:none;
	margin-bottom: 0;
}
.nologin #contents #faq dl:after{
	content:url("../images/introduction/faq_arrow.png");
	padding:26px 0 30px 0;
	text-align: center;
	display: block;
	transform: rotateX(180deg);
	transition: 1s;
	cursor: pointer;
}
.nologin #contents #faq dl.open:after{
	transform: rotateX(0);
}
.nologin #contents #faq dl dt{
	min-height:52px;
	padding-left:98px;
	background-image:url("../images/introduction/faq_q.png");
	background-position: left center;
	background-size: 52px auto;
	background-repeat: no-repeat;
	font-weight:bold;
	font-size:20px;
	line-height:30px;
	color:#333333;
	display: flex;
	align-items: center;

}
.nologin #contents #faq dl dd{
	padding:40px 0 0 0;
	min-height:52px;
	padding-left:98px;
	background-image:url("../images/introduction/faq_a.png");
	background-position: left top 45px;
	background-size: 52px auto;
	background-repeat: no-repeat;
	font-size:14px;
	line-height:24px;
	color:#333333;
	display: none;
}



.nologin #contents #faq dl.open dd{
	display: block;
}

@media(max-width:740px){
	.nologin .breadcrumb{
		padding:0 15px;
	}
	.nologin #contents #faq{
		padding:0 15px;
	}
}


@media(max-width:640px){

	.nologin #contents #faq dl dt{
		background-size: 26px auto;
		min-height:26px;
		padding-left:50px;
		font-size:16px;
		line-height:24px;
	}
	.nologin #contents #faq dl dd{
		background-size: 26px auto;
		min-height:26px;
		padding-left:50px;
	}


}




/* *********************************************** */
/* モーダル 背景エリア */

#modal-bg{
	display:none;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.7);
	position:fixed;
	top:0;
	left:0;
	z-index: 10000;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	-ms-flex-line-pack: center;
	justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	flex-direction: column;
}

#modal-bg.loading{
	background-color: rgba(0,0,0,.1);
}


#modal-main {
	margin: 0;
	padding: 0;



	z-index: 100;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	flex-direction: column;

}
#modal-main .inner{
	padding: 15px;
	color: #999999;
	background-color:#ffffff;
	/*width: calc(100% - 30px);*/
	width: calc(100% - 140px);
	min-width:300px;
	margin:0 auto;
	border-radius:6px;
}
#modal-main .inner.small{
	width:235px;
}
#modal-main .title{
	font-size:14px;
	font-weight: normal;
	line-height: 20px;
	color:#999999;
	text-align:center;
}


#modal-main img{
	width:100%;
	height:auto;
	padding:20px 0 15px 0;
}
#modal-main .description{
	font-size:14px;
	color:#999999;
	padding:20px 0 0;
	text-align:center;
}
#modal-main .description p{
	text-align: left;
	line-height:1.4;
}

/* モーダル閉じる */
#modal-main .gonext,
#modal-main .close{
	padding: 14px 0;
	margin:30px 15px 0 15px;
	font-size:12px;
	border-radius: 20px;
	width: calc(100% - 30px);
	color:#333333;
	background-color:#999;
	text-align: center;
	display: inline-block;
	width:100px;
	cursor: pointer;
}
#modal-main .gonext:active,
#modal-main .close:active{
	background-color:#eeeeee;
}

#modal-inner{
	margin:0 auto;
	max-width:345px;
}

/* *********************************************** */