@charset "utf-8";

/* clearfix */
.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

.clear {
	clear:both;
}

/*----------------------------------------------------
	汎用class
----------------------------------------------------*/
.fl {float:left;}
.fr {float:right;}
.floatL {float:left; margin-left:20px;}
.floatR {float:right;}
.fc {float:center;}
.imgR {float: right; margin: 0 0 10px 10px;}
.imgL {float: left; margin: 0 10px 10px 0;}
.btn {text-align: center;}
.p0 {padding:0!important;}
.pl5 {padding-left:5px!important;}
.pl10 {padding-left:10px!important;}
.pr5 {padding-right:5px!important;}
.pr10 {padding-right:10px!important;}
.pt5 {padding-top:5px!important;}
.pt10 {padding-top:10px!important;}
.pt25 {padding-top:25px!important;}
.pb5 {padding-bottom:5px!important;}
.pb10 {padding-bottom:10px!important;}
.m0 {margin:0!important;}
.ml0 {margin-left:0!important;}
.ml2 {margin-left:2px!important;}
.ml3 {margin-left:3px!important;}
.ml4 {margin-left:4px!important;}
.ml5 {margin-left:5px!important;}
.ml7 {margin-left:7px!important;}
.ml10 {margin-left:10px!important;}
.ml15 {margin-left:15px!important;}
.ml20 {margin-left:20px!important;}
.ml23 {margin-left:23px!important;}
.ml30 {margin-left:30px!important;}
.ml40 {margin-left:40px!important;}
.ml50 {margin-left:50px!important;}
.ml100 {margin-left:100px!important;}
.ml120 {margin-left:120px!important;}
.mr0 {margin-right:0!important;}
.mr3 {margin-right:3px!important;}
.mr5 {margin-right:5px!important;}
.mr10 {margin-right:10px!important;}
.mr13 {margin-right:13px!important;}
.mr15 {margin-right:15px!important;}
.mr17 {margin-right:17px!important;}
.mr20 {margin-right:20px!important;}
.mr23 {margin-right:23px!important;}
.mr30 {margin-right:30px!important;}
.mr35 {margin-right:35px!important;}
.mr40 {margin-right:40px!important;}
.mr50 {margin-right:50px!important;}
.mr70 {margin-right:70px!important;}
.mr100 {margin-right:100px!important;}
.mt-3 {margin-top:-3px!important;}
.mt-15 {margin-top:-15px!important;}
.mt0 {margin-top:0!important;}
.mt2 {margin-top:2px!important;}
.mt3 {margin-top:3px!important;}
.mt5 {margin-top:5px!important;}
.mt6 {margin-top:6px!important;}
.mt10 {margin-top:10px!important;}
.mt15 {margin-top:15px!important;}
.mt25 {margin-top:25px!important;}
.mt30 {margin-top:30px!important;}
.mt35 {margin-top:35px!important;}
.mt50 {margin-top:50px!important;}
.mt100 {margin-top:100px!important;}
.mt120 {margin-top:120px!important;}
.mb0 {margin-bottom:0!important;}
.mb2 {margin-bottom:2px!important;}
.mb5 {margin-bottom:5px!important;}
.mb10 {margin-bottom:10px!important;}
.mb20 {margin-bottom:20px!important;}
.mb30 {margin-bottom:30px!important;}
.mb40 {margin-bottom:40px!important;}
.mb50 {margin-bottom:50px!important;}
.mb100 {margin-bottom:100px!important;}
.mLRauto {margin-right: auto; margin-left: auto;}
.w0035 {width:3.5%!important;}
.w005 {width:5%!important;}
.w010 {width:10%!important;}
.w013 {width:13%!important;}
.w015 {width:15%!important;}
.w020 {width:20%!important;}
.w025 {width:25%!important;}
.w030 {width:30%!important;}
.w035 {width:35%!important;}
.w040 {width:40%!important;}
.w045 {width:45%!important;}
.w050 {width:50%!important;}
.w070 {width:70%!important;}
.w080 {width:80%!important;}
.w085 {width:85%!important;}
.w090 {width:90%!important;}
.w095 {width:95%!important;}
.w099 {width:99%!important;}
.w100 {width:100%!important;}
.fb {font-weight:bold!important;}
.f10 {font-size:10px!important;}
.f11 {font-size:11px!important;}
.f12 {font-size:12px!important;}
.f13 {font-size:13px!important;}
.f14 {font-size:14px!important;}
.f15 {font-size:15px!important;}
.f16 {font-size:16px!important;}
.f18 {font-size:18px!important;}
.f20 {font-size:20px!important;}
.f25 {font-size:25px!important;}
.f30 {font-size:30px!important;}
.f40 {font-size:40px!important;}
.txtR {text-align:right!important;}
.txtL {text-align:left!important;}
.txtC {text-align:center!important;}
.vaM {vertical-align:middle!important;}
.vaB {vertical-align:bottom!important;}
.redTxt {color:#FF0000!important;}
.blueTxt {color:#3399FF!important;}
.lightBlueTxt {color:#61DCFF!important;}
.greenTxt { color:#00CC00!important;}
.orangeTxt {color:#FF6600!important;}
.orangeTxt2 { color:#FFAA55!important;}
.grayTxt {color:#CCCCCC!important;}
.grayTxt2 {color:#666666!important;}
.whiteTxt {color:#FFFFFF!important;}
.bt01 {border-top:1px dotted #999999;}
.clear {clear: both;}
.noBorder {border:none!important;}
.borderR {
	-webkit-border-radius:8px;
	   -moz-border-radius:8px;
		border-radius:8px;
	background:url(../community/timeline/bg_TL.gif) repeat-x top left;
	padding:10px;
}
.unDisplay_IE {display:none\9;}
.tableDefault {
	border-collapse: collapse!important;
	border-spacing: 0!important;
	border:none!important;
}
.circleFrame {
	font-size:16px;
	font-weight:bold;
	text-align:center;
	color:#FFFFFF;
	background:#FF8000;
	padding:2px 6px;
	-webkit-border-radius:20px;
		-moz-border-radius:20px;
	-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
	border-radius:20px;
	box-shadow:0 0 2px #CCCCCC;
}
/*
	clearfix
*/
.pkg:after {
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}
.pkg {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .pkg {
	height: 1%;
}
.pkg {
	display: block;
}
/* End hide from IE-mac */

/* -------------------------------------------------
	base
------------------------------------------------- */
body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0.9em;
}
div#contents {
	width:100%;
	height:100%;
	margin:0 auto 50px auto;
	padding:20px 0;
	background:#FEFFDF;
}
p a.button {
	font-size:14px;
	padding:10px;
	background-color:#FFFFFF;
	border-radius:6px;
	box-shadow:rgba(0,0,0,0.8) 0 0 6px;
	opacity:0.9;
	transition:all 0.2s linear;
	border:1px solid #666666\9;
}
p a.button:hover, p a.button.current {
	color:#FFFFFF;
	background-color:#3985F9;
	opacity:1;
}
div.follow {
	width:900px;
	margin:40px 0 100px 80px;
}
div.follow p {
	/* margin:0 15px; */
	margin:0 90px;
}

/* #fullbg_stretch
--------------------------- */
#fullbg_stretch  img {
	visibility: hidden;
}

/*----------------------------------------------------
    header
----------------------------------------------------*/
#head {
	z-index:2;
	width:100%;
	height:70px;
	position:relative;
	top:0;
	border-bottom:1px solid #FFFFFF;
	background-color:rgba(255,255,255,1);
	background:#FFFFFF\9;
	box-shadow: rgba(0,0,0,0.8) 0 1px 8px;
}
#head h1 {
	float:left;
	padding:10px;
}
#head p a {
	color:#FF6699;
	text-decoration:underline;
}

/*----------------------------------------------------
    ログインフォーム
----------------------------------------------------*/
div#form {
	width:400px;
	position:relative;
	margin-left:100px;
	margin-top:40px;
	border:20px;
	border-style:solid;
	border-color:rgba(255,170,0,0.8);
	border:20px solid #FF9900\9;
	border-radius: 1000px;
	box-shadow: rgba(0,0,0,1) 0 0 16px;
}
.form-container {
	display: flex;
	gap: 8px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height:350px;
	background-color:rgba(255,255,255,1);
	background:#FFFFFF\9;
	border-radius: 1000px;
	text-decoration: none;
	text-align:center;
	padding:20px;
}
.form-container h2 {
	text-shadow: #ffffff 0 1px 0;
	font-size:30px;
	font-weight:bold;
	margin-bottom: 18px;
	margin-top: 12px;
	text-align:center;

}
.submit-container{
	margin-top: 12px;
}

.form-area {
	display: flex;
	gap: 0 24px;
	align-items: center;
	flex-wrap: wrap;
	font-size:18px;
}
.form-area .label {
	width: 6em;
}
.form-area .input-container {
	flex: 1 180px;
}
.form-field {
	width:180px;
	padding:8px;
	font-size:18px;
	border: 1px solid #c4c4c4;
	background: #FFFFFF;
	border-radius: 4px;
	color: #b0b0b0;
	box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
}
.form-field:hover, .form-field:focus {
	background: #ffffff;
	color: #725129;
	border:1px solid #FF8E00;
}
.submit-button {
	width:140px;
	border: 1px solid #3f5b8c;
	background: #3c69ad;
	background: -webkit-gradient(linear, left top, left bottom, from(#6793e0), to(#3c69ad));
	background: -webkit-linear-gradient(top, #6793e0, #3c69ad);
	background: -moz-linear-gradient(top, #6793e0, #3c69ad);
	background: -ms-linear-gradient(top, #6793e0, #3c69ad);
	background: -o-linear-gradient(top, #6793e0, #3c69ad);
	background-image: -ms-linear-gradient(top, #6793e0 0%, #3c69ad 100%);
	border-radius: 6px;
	box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
	text-shadow: #383838 0 1px 0;
	color: #ffffff;
	padding: 8px 16px;
	font-size: 16px;
	text-decoration: none;
	vertical-align: middle;
	transition:all 0.2s linear;
	-webkit-transition: .2s linear;
    -moz-transition: .2s linear;
}
.submit-button:hover {
	cursor:pointer;
	border: 1px solid #c7781e;
	text-shadow: #383838 0 1px 0;
	background: #cc5800;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffaa00), to(#cc5800));
	background: -webkit-linear-gradient(top, #ffaa00, #cc5800);
	background: -moz-linear-gradient(top, #ffaa00, #cc5800);
	background: -ms-linear-gradient(top, #ffaa00, #cc5800);
	background: -o-linear-gradient(top, #ffaa00, #cc5800);
	background-image: -ms-linear-gradient(top, #ffaa00 0%, #cc5800 100%);
	color: #ffffff;
}
.submit-button:active {
	text-shadow: #383838 0 1px 0;
	border: 1px solid #c7781e;
	background: #ffaa00;
	background: -webkit-gradient(linear, left top, left bottom, from(#cc5800), to(#cc5800));
	background: -webkit-linear-gradient(top, #cc5800, #ffaa00);
	background: -moz-linear-gradient(top, #cc5800, #ffaa00);
	background: -ms-linear-gradient(top, #cc5800, #ffaa00);
	background: -o-linear-gradient(top, #cc5800, #ffaa00);
	background-image: -ms-linear-gradient(top, #cc5800 0%, #ffaa00 100%);
	color: #ffffff;
}
.mistake {
	color:#FF0000;
	font-size:16px;
}

/*----------------------------------------------------
    footer
----------------------------------------------------*/
#footer {
	width:80%;
	height:160px;
	position:relative;
	margin:0 auto 20px auto;
	background:#FFFFFF;
	padding:20px;
	border-radius:12px;
	box-shadow: rgba(0,0,0,1) 0 0 16px;
}



/*--------------------------------------------------------
追加：高さが1000以上になるとフッターを画面下部に固定
-------------------------------------------------------*/
@media only screen and (min-height: 1000px) {

		#footer {
		width:80%;
		height:160px;/*フッターの白い箱は縦幅固定、横幅は画面に合わせて伸縮*/
		background:#FFFFFF;
		border-radius:12px;
		box-shadow: rgba(0,0,0,1) 0 0 16px;
		margin:0 auto;
		padding:20px;
		position:absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		}
}
/*-----------------------追加ここまで-------------------------*/


ul.company {
	float:left;
}
ul.footerMark {
	float:right;
}
ul.footerMark:after{
	clear: both;
}
ul.footerMark li{
	display:inline;
	/*float:left;*/
	float:none;/*追加*/
	margin-right:20px;
}

/*-----------------------追加(スマホではマークを中央揃えにする)-------------------------*/
@media only screen and (max-width: 480px) {
　
		.mark{
		margin: 0 auto;
		/*display: flex;*/
		justify-content: center;
		}

		ul.footerMark {
		text-align: center;
		background: #fff;
		}
	
		ul.footerMark li{
		display: inline-block!important;
		float: none!important;
		}
	
}

/*-----------------------追加ここまで-------------------------*/



/*----------------------------------------------------
	メンテナンス
----------------------------------------------------*/
#mente {
	position:absolute;
	top:15%;
	right:10%;
	width:350px;
	height:430px;
}
#mente div.text {
	position: absolute;
	padding:10px;
	background: #FFFDE4;
	border: 4px solid #572618;
	border-radius:12px;
	z-index:1;
}
#mente div.text:after, #mente div.text:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
#mente div.text:after {
	border-color: rgba(213, 213, 209, 0);
	border-top-color: #FFFDE4;
	border-width: 15px;
	margin-left: -15px;
}
#mente div.text:before {
	border-color: rgba(245, 222, 196, 0);
	border-top-color: #572618;
	border-width: 21px;
	margin-left: -21px;
}
#mente h2 {
	font-size:20px;
	font-weight:bold;
	color:#C30003;
	text-align:center;
	margin-bottom:10px;
}
#mente p img {
	position:absolute;
	bottom:0;
	margin-left:-20px;
	z-index:0;
}

/*----------------------------------------------------
	広告掲載
----------------------------------------------------*/
.loginAD {
	position:absolute;
	top:25%;
	left:60%;
}

/* PC向けのスタイル：1280pxから適用 */
@media only screen and (min-width: 1280px) {
	div#form {
		margin-left:140px;
	}
	div.follow {
		margin:40px 0 100px 115px;
	}
	#mente {
		right:15%;
	}
}
@media only screen and (max-width: 1270px) {
	div#form {
		margin-left:100px;
	}
}
/* PC以外向けのスタイル：1023px以下に適用 */
@media only screen and (max-width: 1023px) {
}


/* タブレット、パソコン向けのスタイル：768px～ */
@media only screen and (min-width: 768px) {
	.unDisplay_PC {display:none;}
}
/* タブレット向けのスタイル：768px以下 */
@media only screen and (max-width: 768px) {
	#mente {
		top:auto;
		right:3%;
		width:300px;
		height:360px;
		margin:200px auto 0 auto;
	}
	#mente div.text {
		position: absolute;
		padding:10px;
		background: #FFFDE4;
		border: 4px solid #572618;
		border-radius:12px;
		z-index:3;
	}
	#mente div.text:after, #mente div.text:before {
		top: 100%;
		left: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}
	#mente div.text:after {
		border-color: rgba(213, 213, 209, 0);
		border-top-color: #FFFDE4;
		border-width: 15px;
		margin-left: -15px;
	}
	#mente div.text:before {
		border-color: rgba(245, 222, 196, 0);
		border-top-color: #572618;
		border-width: 21px;
		margin-left: -21px;
	}
	#mente h2 {
		font-size:18px;
		font-weight:bold;
		color:#C30003;
		text-align:center;
		margin-bottom:5px;
	}
	#mente p {
		font-size:12px;
	}
	#mente p img {
		position:absolute;
		bottom:0;
		width:90%;
		margin-left:20px;
		z-index:0;
	}
}
/* スマホ向けのスタイル：767px以下 */
@media only screen and (max-width: 767px) {
	
	body {
	}
	input, select {
		font-size:14px;
	}
	.unDisplay_Mobile {display:none;}
	.mobileW100 {width:100%;}
	.mobileW095 {width:95%;}
	.mobileW090 {width:90%;}
	.mobileW080 {width:80%;}
	.mobileW070 {width:70%;}
	.mobileW060 {width:60%;}
	.mobileW050 {width:50%;}
	.mobileW040 {width:40%;}
	.mobileW030 {width:30%;}
	.mobileW020 {width:20%;}
	.mobileW010 {width:10%;}
	.floatL {float:left}
	.floatR {float:right;}
	#head {
		height:auto;
	}
	#head h1 {
		float:none;
		text-align:center;
		padding:4px;
	}
	#head h1 a img {
		width:70%;
	}
	div#contents {
	}
	div#form {
		width:80%;
		margin:20px auto;
		border:none;
		border-radius:12px;
	}
	.form-container {
		background-color:rgba(255,255,255,0.8);
		border-radius: 12px;
		padding:8px;
	}
	.form-container h2 img {
		width:65%;
	}
	.form-area {
		width:60%;
		font-size:14px;
	}
	.form-field {
		width:100%;
		padding:4px;
	}
	div.follow {
		width:90%;
		margin:30px auto 80px auto;
		text-align:center;
	}
	div.follow p {
		float:none;
		margin:0;
	}
	#footer {
		width:100%;
		height:auto;
		position:relative;
		margin:0 auto;
		background:#FFFFFF;
		padding:10px 0;
		border-radius:0;
		box-shadow: rgba(0,0,0,1) 0 0 16px;
		text-align:center;
	}
	
	ul.company {
		float:none;
		font-size:12px;
		margin-bottom:20px;
		margin-bottom:10px;/*追加*/
	}
	div.mark {
		width:300px;
		background:#999999;
		background:#fff !important;/*追加*/
		margin:0px auto 12px auto;
	}
	ul.footerMark {
		float:none;
		margin-left:20px;
		margin-left:30px;/*追加*/
	}
	ul.footerMark li{
		margin-bottom:20px;
	}
	#mente {
		position:relative;
		top:auto;
		right:auto;
		width:300px;
		height:360px;
		margin:20px auto 0 auto;
	}
}

/* スマホ向けのスタイル：480px以下に適用 */
@media only screen and (max-width: 480px) {
/* スマホ広告エリア用 */	
	.spAD {
		width:100%;
		text-align:center;
	}
}

/*----------------- 追記---------------------- */
@media screen and (max-width: 767px) {
  .content.lazyloaded {
    background-image: url('http://placehold.it/100?text=SP');
  }
}
@media screen and (min-width: 768px) {
  .content.lazyloaded {
    background-image: url('http://placehold.it/100?text=PC');
		
  }
}

/*----------------- 追記ここまで------------------ */

/**お知らせ用**/
.login_notice{
position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: #FFEC6F;
    box-shadow: 0px 3px 8px #00000066;
    border: 1px solid #FAC48D;
}
.login_notice .notice-txt{
	margin-left: 1.5em;
    text-indent: -1.5em;	
}
.login_notice .icon-caution{
	font-weight: bold;
}
.login_notice .icon-caution::before{
	color: red;
}